@TerryFan:創(chuàng)新總是很少,互相借鑒總是特別多萎津,我們一起來看看那些被濫用但有時并沒那么好的設計,給大家敲響警鐘抹镊,參考無罪锉屈,但是多獨立思考,自主設計垮耳。
如果你是一位有經驗的設計師颈渊,你也許常會在其他界面中獲取設計靈感,這并不等同于抄襲终佛。這是在做最佳案例研究俊嗽,可以套用常用的設計模式,也符合主流的設計規(guī)范铃彰,而且使用用戶熟知的UI組件乌询,可以讓界面變得更加易用。
也許有人會說太依賴于設計規(guī)范而且抄來抄去的豌研,完全扼殺了創(chuàng)造力妹田,而且最終唬党,所有的應用都長成一樣了。然而從體驗的角度來說鬼佣,我看到了另外一個問題驶拱。習慣于復用那些常見的UI組件會讓你慢慢陷入一個誤區(qū),你會認為Google晶衷、Facebook蓝纲、Instagram等你喜歡的應用總是對的,他們的設計意圖和你的想法一致晌纫,你會完全忘了帶著質疑的態(tài)度來看他們的設計税迷。這里我列舉一些UI組件,他們被認為(或是曾經被認為)是非常好的設計锹漱,然而他們也許并沒有那么好箭养。
一、“深藏不露”的導航
過去一段時間哥牍,有無數關于漢堡菜單的文章毕泌,大部分設計師都在抵制使用他,然而這件事的本質并非是圖標的錯嗅辣,而是將導航隱藏在圖標之下的問題撼泛。
這種設計方案對于設計師來說特別省事,根本不用擔心有限的屏幕大小澡谭,只需要將你所有的菜單項排個序然后放進這個可滾動的浮層中愿题,藏在漢堡菜單里。
然而實踐證明蛙奖,使用可視化的菜單項會提高用戶的參與度潘酗、滿意度甚至是商業(yè)利益。這也是為什么現在主流的應用都從漢堡菜單改成底部導航的可見菜單設計外永。
△ Youtube的菜單設計進化-Luke
小結:
如果你的菜單很多很復雜崎脉,將他們隱藏起來并不會提高友好度拧咳, 信息重組并重排優(yōu)先級才是正道伯顶。
二、「遍地開花」的圖標
還是因為有限的屏幕空間骆膝,似乎盡可能使用圖標代替文字來節(jié)省空間是個無需考慮的真理祭衩。圖形顯然占用更少的空間,他們無視多語言阅签,而且用戶很很習慣掐暮,不是么?幾乎所有應用都是這么做的政钟。
有了這樣的設想后路克,設計師常常會選擇將功能隱藏在哪怕是可識別性特別低的圖標之下樟结。例如Instagram,你能想到你可以通過點擊這個圖標直接發(fā)送消息么精算?
還有瓢宦,如果你從來都沒有用過谷歌翻譯,你認為點擊這個鬼畫符似的圖標會發(fā)生什么呢灰羽?
假定用戶熟知那些抽象化的圖標或是認為用戶會花多余的時間探索并且學習圖標的功能驮履,是一個常見的設計錯誤。
△ Bloom.fm里神奇的菜單欄
如果你認為在界面中給圖標提供一個彈出式的標注能夠提高可用性廉嚼,那你就錯了玫镐。即使是在Foursquare里(譯者注:一款在國外超有名的簽到應用,街旁的原型)你的用戶總歸會去學習并且記住他怠噪,也不代表這樣設計是對的恐似。
△ Swarm應用里的圖標指示
但這并不意味著不能使用圖標,有許多已經形成普遍用戶認知舰绘,像那些代表常規(guī)功能的圖標蹂喻,例如搜索、視頻播放捂寿、郵件口四、設置等等。(但是用戶仍然有可能不太確定秦陋,比如蔓彩,點擊一個心形的圖標具體會發(fā)生什么)
△ 這些都是用戶熟知,可以被廣泛使用的圖標
對于復雜的功能驳概,應該始終配有合適的文字赤嚼。在這種情況下,圖標仍然很有用顺又,因為圖形可以提高菜單的可發(fā)現性更卒,可以在界面中形成一個合適的觸摸區(qū)域,并且能夠增加應用的個性稚照。
△ 某圖片編輯工具的菜單
小結:
基礎功能可以用圖標來代替蹂空,復雜的功能需要有文字(如果你非要使用圖標,請進行可用性測試果录。)
三上枕、基于手勢的菜單
當2007年蘋果推出iPhone時,多點觸控技術漸漸成為主流弱恒,用戶也逐步認知到操作不是只有點擊那么單一的辨萍,他們還可以進行縮放、滑動等返弹。
手勢在設計中也漸漸受到青睞锈玉,有許多應用都是純手勢驅動設計爪飘。
△ Clear的手勢操作
就如同藏起菜單項和使用圖標代替文字一樣,手勢有時可以幫助設計師節(jié)省屏幕空間拉背。(“這里應該有個刪除按鈕悦施,可以左劃調出,或者右劃去团,我們可以定一下抡诞。”)
關于手勢土陪,你需要知道的第一件事就是它總是隱藏的昼汗,需要用戶去記。就像漢堡菜單的情況:如果你把某個選項藏起來鬼雀,使用它的人將會變少顷窒。
還有,手勢有著圖標同樣的問題:有一些用戶熟知的手勢操作源哩,比如點擊鞋吉、縮放和滾動,同樣在不同的應用中都有需要用戶自己去發(fā)現并且學習的手勢操作励烦。
不幸的是谓着,大部分的手勢都不是標準定義的,在不同應用中的功用也可能不同——這仍然是觸屏界面設計中很新的一塊領域坛掠。即使是想在郵件上滑動這樣簡單的操作赊锚,在不同的郵箱應用中,都會大相徑庭屉栓。
在Apple Mail里舷蒲,郵件上右劃調出”標記為已讀”
同樣的手勢在Mailbox里確是”將郵件存檔”
還有,“搖一搖”也許有不同的功用友多,iOS里是撤銷牲平,Google Maps里是發(fā)送反饋。(譯者注:真應該讓作者來試試我大天朝的各大應用…)
小結:
別忘了手勢也是隱藏操作域滥,是需要用戶花費精力去記住的東西纵柿。假如是在Tinder(譯者注:美國版陌陌),你也許可以去教會整個世界右劃會發(fā)生什么——但是也僅限于手勢是你應用理念的重要組成部分骗绕。
四藐窄、一打開應用就是引導
引導頁资昧,是進來很火熱的UX話題酬土,指的是用戶與應用的首次邂逅。在大多數情況下格带,引導頁就是給用戶顯示一些新手指引撤缴,解釋界面:
△ Dcovery應用的引導
為什么說這是一個糟糕的設計呢刹枉?因為許多用戶都會跳過這種介紹,他們就是想馬上開始使用屈呕。就算他們注意到你的引導微宝,他們也會很快在關掉之后就忘得一干二凈。(尤其是界面里塞得滿滿的都是信息虎眨。)而且最后而且同樣重要的是:界面中加入引導并不一定能讓用戶更易上手蟋软,記住:用戶界面就像講笑話嗽桩,如果需要去解釋笑點岳守,那么你懂的。
引導流程有許多其他設計的可能碌冶,也會更好用湿痢。比如Slack,通過第一屏的交互給用戶創(chuàng)造一些情境扑庞。 簡單地介紹自己譬重,聚焦在給用戶帶來的好處而不是介紹界面和功能。
△ Slake的介紹頁
更有效的方法是增加和用戶的互動罐氨,使用步驟化的引導臀规。Duolingo并沒有去解釋應用:他們鼓勵用戶加入做一個簡單的測試題(即使在未登錄狀態(tài)),因為實操才是最好的學習栅隐。而且這是一個更有效的展示應用好處的方式以现。
△ Duolingo互動引導
還記得Mailbox和Apple Mail的手勢區(qū)別么? 我們來看看Mailbox是怎么逐步帶用戶上路的:用戶在真實使用app前约啊,就會看到這個引導的流程邑遏,并嘗試所有的手勢。
△ Mailbox引導
小結:
在設計半透明遮罩+引導前恰矩,先停下來想想用戶在首次使用時將會碰到什么记盒。多想想使用場景。大部分的情況下外傅,你總是有更好的方法來歡迎你的用戶的纪吮。
五、創(chuàng)意十足但然并卵的空白頁
空白頁是常常會被一些經驗不足的設計師忽視的地方萎胰。然而碾盟,它們在整體的用戶體驗中扮演著重要的角色。
有時設計師看到錯誤信息或是空白狀態(tài)是個空的畫布時技竟,會認為這是做些創(chuàng)意的絕好機會冰肴。以Google Photos的空白頁舉例:
△ Google Photos的空白狀態(tài)頁
乍一看,似乎設計得很棒,對么熙尉? 層級清晰联逻,符合規(guī)范,圖片設計得也很美
但是再一看检痰,你會發(fā)現有許多奇怪的地方:
為什么有個搜索按鈕在空白頁上包归?難道要在沒有內容的內容里搜索么?
第二铅歼,界面中最為醒目的元素公壤,圖標顯然是不能點擊的(然而許多用戶會嘗試去點它)。
提示說我應該去頂上找到“+”椎椰,這超奇怪境钟。為什么這個提示里不能帶個添加按鈕呢?就像說“點繼續(xù)按鈕繼續(xù)”一樣傻俭识。
上面這個空白狀態(tài)頁的設計顯然不能幫助用戶理解情景:
什么是集錦慨削?有什么用?為什么我一個都沒有套媚?我能做些什么(如果我需要做些什么的話)缚态?
說到創(chuàng)意,離不開“少即是多”堤瘤。下面這個空白頁設計做的非常完美(讓我們先忽略“現在點擊下面這個按鈕”這句話)
△ Lootsy的空白頁設計
小結:
別忘了空白頁的設計(類似的還有web上的404頁面)不僅是視覺設計和品牌表現玫芦,更是可用性的表現。好好的設計一下本辐。
質疑一切
別誤解我的意思: 設計組件和最佳案例仍然是你最好的設計伙伴桥帆。但是請謹記應用和應用是不同的,用戶和用戶也是不同的慎皱。某個設計在別人的應用中能很好的解決問題但也許在你的應用中就不行老虫。設計并不是均碼內衣。還有茫多,你也不知道人家的應用這么設計的深層原因祈匙。
所以請獨立思考,自主設計天揖,自己去研究夺欲。
估算、測試今膊、驗證——并且別害怕打破規(guī)范些阅,如果你的設計可行性更高。