那些應該杜絕濫用的UI設計

@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ī)范些阅,如果你的設計可行性更高。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末斑唬,一起剝皮案震驚了整個濱河市市埋,隨后出現的幾起案子黎泣,更是在濱河造成了極大的恐慌,老刑警劉巖腰素,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異雪营,居然都是意外死亡弓千,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門献起,熙熙樓的掌柜王于貴愁眉苦臉地迎上來洋访,“玉大人,你說我怎么就攤上這事谴餐∫稣” “怎么了?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵岂嗓,是天一觀的道長汁展。 經常有香客問我,道長厌殉,這世上最難降的妖魔是什么食绿? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮公罕,結果婚禮上器紧,老公的妹妹穿的比我還像新娘。我一直安慰自己楼眷,他們只是感情好铲汪,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著罐柳,像睡著了一般掌腰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上张吉,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天辅斟,我揣著相機與錄音,去河邊找鬼芦拿。 笑死士飒,一個胖子當著我的面吹牛,可吹牛的內容都是我干的蔗崎。 我是一名探鬼主播酵幕,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼缓苛!你這毒婦竟也來了芳撒?” 一聲冷哼從身側響起邓深,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎笔刹,沒想到半個月后芥备,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡舌菜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年萌壳,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片日月。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡袱瓮,死狀恐怖,靈堂內的尸體忽然破棺而出爱咬,到底是詐尸還是另有隱情尺借,我是刑警寧澤,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布精拟,位于F島的核電站燎斩,受9級特大地震影響,放射性物質發(fā)生泄漏蜂绎。R本人自食惡果不足惜瘫里,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荡碾。 院中可真熱鬧谨读,春花似錦、人聲如沸坛吁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拨脉。三九已至哆姻,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間玫膀,已是汗流浹背矛缨。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留帖旨,地道東北人箕昭。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像解阅,于是被迫代替她去往敵國和親落竹。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內容