如何做好產品設計中的「+」功能?來看高級設計師的總結! - 優設-UISDC

                                        如何做好產品設計中的「+」功能?來看高級設計師的總結!

                                        2018/09/20 7434評論區

                                        @蘇大牙牙牙?:日常工作中,有很多看似平凡的小細節,常被大家忽視,卻影響著用戶的真實體驗。比如,前幾天跟同事們針對產品設計中「+」功能所運用的場景、展開形式進行討論,發現這是一個挺有意思的話題。

                                        所以跟大家分享下,我的一些相關思考。

                                        一、「+」的運用場景

                                        我們常見的產品中,采用「+」功能的場景,大致分為兩種:(上傳)內容選項、(聚合)快捷功能。

                                        1.(上傳)內容選項

                                        根據「+」的直觀表意,大致也能猜到它的運用跟「添加」、「上傳」某個東西相關。

                                        比如:微博,點擊「+」入口后,是選擇所要上傳的內容類型。(可以曬自己精修X小時后媽都認不出來的自拍、也可以曬逗比的小視頻,或者就想搞一場直播)。

                                        比如:下廚房左上角的「+」,點擊后,是選擇上傳作品,或者創建菜譜的選項。

                                        再比如:工具類產品 Google drive,dropbox、百度網盤、微云,點擊「+」后,同樣是選擇上傳不同文件的入口。

                                        可以看出,這種情況下的「+」功能,多指「添加」、「上傳」的含義,所承載的內容,是同一緯度下的不同選項。

                                        2.(聚合)快捷功能

                                        眾所周知,產品為了節省界面空間,同時避免過多功能給用戶不必要的干擾,會選擇把一些不常用的快捷功能收到二級展示。常見的產品中,他們選擇把這些快捷功能塞進「+」里。

                                        那么,你是不是覺得「+」功能跟「…」功能承載的內容是一樣的?比如:樂趣首頁右上角「…」,同樣是對頻率較低的功能的集合。

                                        那為什么有的產品不直接用「…」,還是選擇用「+」呢?

                                        通過分析發現,「+」雖然也是聚合快捷功能的入口,但承載的功能有一個共性:都是圍繞著用戶主動打開、發起、新建等操作進行的,因此用「+」更貼切。

                                        比如:微信里的「+」,包含著「發起群聊」,「添加朋友」,「掃一掃」,「收付款」,其實都跟「添加」有關。

                                        比如:淘寶也是類似的處理方式。

                                        再比如:愛奇藝的「+」,里面包含的也是跟「添加」,「上傳」相關,像上傳視頻、掃一掃、我要直播……

                                        反過來看「…」,它聚合的功能,大多是相互關聯較弱,且沒有主動添加、上傳等含義的。因此,用一個相對模糊,沒有指向性的符號詮釋,更為合適。

                                        由上可以看出,在這種情況下,「+」作為聚合快捷功能的入口,包含的是頻率較低,且跟主動「新建」、「發起」、「掃描」等相關的功能。

                                        二、「+」的展開方式

                                        當用戶觸發界面中的「+」時,常見的展開方式有3種,分別是:氣泡彈出框、動態欄、沉浸模式。

                                        1. 氣泡彈出框

                                        氣泡彈出框,這個控件又常被稱為 Popover,一般是由一個矩形和三角箭頭組成的彈出窗口,通過點擊 Popover 內的按鈕或者非 Popover 的屏幕其他區域可關閉。

                                        比如,以微信為代表的「+」的展開方式,采用的就是 Popover。一般用于聚合快捷功能。優點是觸發「+」到 Popover 的距離很近,操作順手,效率高(更像是導航的延伸)。

                                        2. 動作欄

                                        動作欄,這個控件官方稱之為 Action Sheet,是用戶觸發「+」后,出現的一種模態彈出框,里面包含一組與當前情景相關的選項,一般用于上傳內容選項。

                                        在 iPhone 屏幕上,為了便于單手持握時操作,Action Sheet 通常占據屏幕底部區域。

                                        比如:以 Google drive、Dropbox 為代表的產品,需要選擇上傳文件類型的選項。

                                        在這個部分,同事們討論有些爭議點,在于:google drive 和 Dropbox 或者微博,它們的加號本來就在底部,所以彈窗讓用戶感覺視線統一。

                                        而有的產品「+」在上面,彈窗從底部出來,擔心注意力切換和手指移動的路徑比較長,顯得割裂。

                                        帶著這個問題,我調研了有類似情況的產品,會不會讓人覺得不舒服。

                                        后來發現,不會的。原因在于我們常用的、擁有10億+用戶的微信,發朋友圈時操作就是這樣,而我們并沒有感覺很割裂,反而已經習慣。

                                        同樣,iPhone 自帶的「提醒事項」App,也是這樣處理。

                                        后來看了規范發現,iOS 確實意識到在 iPad 上,如果繼續將 Action Sheet 顯示在屏幕底部,如果頻繁操作使用會比較累。因此,做了特殊處理。而手機屏幕上以底部為主,同時點擊空白區域取消的操作,也是系統用戶所熟知的。

                                        總的來說,操作欄適合承載同一緯度下的內容選項,同時,就算「+」在頂部,采用底部動態欄,體驗上也是沒問題的。

                                        3. 沉浸模式

                                        沉浸模式,指的是當觸發「+」時,用戶在全局蒙層上進行功能操作,同樣適用于上傳內容選項。

                                        優點是拓展性更強,體現在:提升收益、品牌認知、內容運營。

                                        提升收益

                                        比如:微博,采用沉浸模式,下面是上傳不同狀態類型的入口,上面可以增加廣告收入。

                                        再比如:微云,在沉浸模式下,可以植入自己的「會員」廣告,從而提升會員轉化。

                                        品牌認知

                                        比如:有道云筆記,在頂部的空間內,宣傳自己的品牌 slogn「記錄,成為更好的自己」,是一種品牌情感化的傳遞。

                                        內容運營

                                        像「好好住」,它們在這個頁面加入「話題」運營推廣。從而給 UGC 內容模塊帶節奏。

                                        大多數產品都想營造社區氛圍,建立用戶關系,從而增加用戶粘性,提升產品留存。但要想擁有濃厚的社區氛圍,首先要有內容,才有人愿意看,才有人在里面互動。

                                        現實問題是,很多用戶有想發狀態的心,但不知道發什么,從而放棄。因此,我們應該作出相應的引導。

                                        比如,「好好住」在發布環節,增加話題運營「#每天一張生活日常#」入口,就是解決剛才說的「用戶不知道發什么」的問題。運營同學想點子、造話題、帶節奏,從而提升用戶的發布量。

                                        因此可以看出,「沉浸模式」,對于那些有拓展需求(收益、品牌、運營)的產品更適用。

                                        不知道你有沒有發現,相比國外,國內采用這種「沉浸模式」的產品偏多。或許在中國這個互聯網競爭如此激烈的大環境下,大家不愿意放棄任何一個能夠運營或留住用戶的機會。

                                        總結

                                        總的來說,在常見的產品中「+」功能的運用場景有:(上傳)內容選項、(聚合)快捷功能;它的展開方式可分為:氣泡彈出框(適合承載快捷功能)、操作欄(適合容納內容選項)、沉浸模式(容納內容選項的同時,拓展性更強)。其實,交互形式沒有好壞之分,只有哪個更適合自己的內容需求和產品目標,正如 Louis Sullivan 所說:「形式追隨功能」。

                                        日常工作中有太多類似「+」這種,看似一個不起眼的小功能,被大家忽略。我們習慣性看一下競品,拍腦袋決定方案。

                                        但是,慢慢你會發現,只有深挖和分析這些所謂的「小細節」,才能知道別人這么做背后的原因,才能舉一反三的去運用,才能更好的兼顧統一性和拓展性,而不是停留在浮于表面的模仿。

                                        歡迎關注作者的微信公眾號:「大牙的設計筆記」

                                        「值得探究的產品細節」

                                        優設大課堂

                                        非特殊說明,本文版權歸原作者所有,轉載請注明出處
                                        本文地址:http://www.ndwc.tw/aggregation-function-in-product-design

                                        發表評論 加載中....

                                        評論加載中....

                                        uisdc

                                        評論區都快餓癟了,看看我期盼的小眼神...

                                        優設大課堂 sketch 轉場動效 界面設計 設計師 扁平化設計 交互設計師 排版布局 職場 平面設計 設計師專訪 素材下載 視覺設計 設計流程 配色 web前端開發 用戶體驗設計 AI教程 海報設計 設計理論 神器下載 字體下載 設計規范 設計趨勢 psd下載 動效設計 圖標設計 產品設計 logo設計 ICON 神器推薦 職場規劃 App設計 字體設計 酷站推薦 交互設計 ui設計 設計師職場 優秀網頁設計 用戶體驗 ps技巧 酷站 PS教程 網頁設計 經驗分享
                                        wechat

                                        優設官方微信

                                        50萬設計師關注

                                        微信號:youshege

                                        把好文章收藏到微信

                                        打開微信,掃碼分享
                                        學設計 優設網 在這里

                                        江苏11选5开奖结果