如果你是一個經(jīng)驗豐富的設(shè)計師,你可能贊同這樣一個觀點:受其他作品/設(shè)計指南啟發(fā)而進行設(shè)計或者模仿其他設(shè)計并不見得就是一種抄襲行為类早,相反,它是一種最佳的學(xué)習(xí)過程,是對設(shè)計模式的學(xué)習(xí)搏色,對設(shè)計準(zhǔn)則的學(xué)習(xí),是一種設(shè)計出用戶都能理解的用戶界面的方法券册。
有些人可能會說如果太依賴于設(shè)計指南或遵循他人的設(shè)計模式/思想频轿,就會抹殺設(shè)計師自己創(chuàng)造性,終有一天烁焙,所有的程序可能都會看起來一樣略吨。不過從用戶體驗的角度來看,我意識到了另外一個比較嚴重的問題:遵從所謂最佳設(shè)計案例的設(shè)計模式/思想考阱,可能會使你相信像Google/ Facebook / Instagram 這樣的設(shè)計(極有可能是你最喜歡的應(yīng)用程序)永遠是對的翠忠,你會視他們的目標(biāo)也就是你的目標(biāo),并對此不會提出任何質(zhì)疑乞榨。這里有一些模式被認為是(或曾經(jīng)是)最佳的設(shè)計代表秽之,然而它們實際上可能沒有你第一眼看到認為的那么好当娱。
1、隱藏導(dǎo)航
至少已經(jīng)有50萬篇寫過關(guān)于漢堡包菜單的文章考榨,其中大部分出自對此設(shè)計方案持反對意見的設(shè)計師之手跨细。如果你不曾看到,不妨看看這兩篇:http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/河质,http://jamesarcher.me/the-hamburger-menu/)冀惭,這并不是關(guān)于圖標(biāo)本身的問題,關(guān)鍵在于圖標(biāo)背后隱藏導(dǎo)航的這種做法究竟該如何評價掀鹅。
上面這種方案對設(shè)計師非常有吸引力且設(shè)計方便:因為你不必擔(dān)心有限的屏幕空間被過多占用散休,你只要把所有導(dǎo)航放在一個默認隱藏的側(cè)邊滑動欄里面即可。
然而實驗表明乐尊,如果以更明顯的方式來顯示菜單欄選項戚丸,用戶的使用度和滿意度都會得到提升,甚至能增加收入扔嵌。這就是為何YouTube已經(jīng)舍棄掉原本的漢堡菜單欄限府,轉(zhuǎn)而將最重要的導(dǎo)航選項提出來一直可見。
如果你的導(dǎo)航結(jié)構(gòu)復(fù)雜痢缎,隱藏處理并不會使體驗友好胁勺。
2、到處都是圖標(biāo)
針對屏幕大小有限的問題独旷,乍看上去用圖標(biāo)取代所有文本標(biāo)簽是不必費什么腦子就能想到的方案署穗。象形符號占用更少的空間,不用被翻譯成有限的文本势告,而且人們也往往更熟悉蛇捌,不是嗎?似乎現(xiàn)在所有的應(yīng)用程序也都是這樣考慮和去做的咱台。
然而络拌,上述的方案不過是個假想,正是基于這個假想回溺,設(shè)計師們有時就會就會設(shè)計出難以辨別的圖標(biāo)來指向具體功能春贸。例如,在Instagram中遗遵,你能想到右上角的圖標(biāo)功能是指發(fā)送信息嗎萍恕?
或者,假設(shè)你從未使用過谷歌翻譯车要,你認為點擊右下角的圖標(biāo)是觸發(fā)什么功能呢允粤?
無論是假設(shè)你的用戶很熟悉抽象的象形圖,還是認為他們愿意花時間去理解他們,這種想法常常是不正確的类垫。
如果你設(shè)計過圖標(biāo)且認為添加一個彈出標(biāo)簽?zāi)軌蛟鰪娝囊曈X可用性司光,那么你就錯了。即使你設(shè)計的是一個正方形悉患,用戶也還是需要去了解它残家。
然而上述表述并不就是說你不應(yīng)該使用圖標(biāo)。實際上售躁,有一些圖標(biāo)是用戶已經(jīng)熟知的坞淮,而這些圖標(biāo)大多是代表著搜索、視頻播放陪捷、郵箱回窘、設(shè)置等功能。(不過用戶還是不能確定揩局,當(dāng)他們點擊一個心形圖標(biāo)時會發(fā)生什么毫玖。)
無論如何凌盯,針對復(fù)雜而抽象的功能,我們一般應(yīng)該使用適當(dāng)?shù)奈谋緲?biāo)簽來標(biāo)示出來烹玉。在這些情況下驰怎,圖標(biāo)是仍然有用的,它們能夠增強菜單選項的識別度和觸摸感二打。?
3县忌、基于導(dǎo)航結(jié)構(gòu)的手勢
當(dāng)蘋果在2007年發(fā)布iPhone時,多點觸控技術(shù)一下子吸引到了大家的注意(并很快成為主流)继效,人們意識到他們不再是只能在界面上點按症杏,還能實現(xiàn)縮放、嚙合和滑動等操作瑞信。
自此厉颤,手勢操作自然而然也開始受到設(shè)計師的歡迎,而且誕生了很多使用手勢操作實現(xiàn)功能控制的程序凡简。
就像隱藏導(dǎo)航逼友、使用圖標(biāo)取代文本標(biāo)簽一樣,手勢看上去對于試圖節(jié)省屏幕空間的設(shè)計師也是一種有效的方法秤涩。
關(guān)于手勢你需要知道的第一件事是它們通常是隱藏的帜乞。人們需要記住它們,其結(jié)果就像漢堡包菜單一樣:如果你將一些選項/操作藏起來筐眷,那么只有更少的人才會去用到它黎烈。
另外,手勢面臨跟圖標(biāo)類似的問題:雖然有一些大部分人都能理解的常規(guī)手勢,包括點按照棋、縮放津畸、滾動等,但是在一些程序中的特定手勢仍然需要人們?nèi)グl(fā)現(xiàn)和學(xué)習(xí)之后再去使用必怜。
很可惜的是肉拓,現(xiàn)在大多數(shù)App中充斥的手勢操作并沒有實現(xiàn)標(biāo)準(zhǔn)統(tǒng)一化——這仍然是界面設(shè)計的一個新領(lǐng)域。即使如滑動一封郵件這樣的操作在不同的郵箱程序中也可能面臨不同的結(jié)果梳庆。
4膏执、遮罩式的引導(dǎo)說明
引導(dǎo)說明驻售,是最近一個關(guān)于用戶體驗的熱門話題,是指用戶初次接觸到應(yīng)用程序時程序向用戶展現(xiàn)的一個使用幫助更米。針對這個概念欺栗,大多程序的做法都是使用一個遮罩層向用戶解釋界面的必要元素和功能。
然而為何這卻是一個糟糕的解決方案征峦?因為大部分用戶都會跳過你的說明介紹迟几。他們只想能快點開始使用你的程序。即使他們注意到了你的使用說明栏笆,當(dāng)退出遮罩層后也都通常會統(tǒng)統(tǒng)忘記类腮。(尤其當(dāng)屏幕上塞滿了信息)。最后一個關(guān)鍵點在于蛉加,這種依靠遮罩引導(dǎo)的設(shè)計方式表明你的程序功能本身設(shè)計的還不夠直觀(直觀的設(shè)計不需要向用戶解釋才對)蚜枢。請牢牢記住:
實際上厂抽,引導(dǎo)流程可以使用很多益于用戶的方式來進行設(shè)計。例如丁眼,Slack筷凤,使用面向用戶的第一屏向其顯示一些必要的內(nèi)容,簡單地介紹自己户盯,專注于告訴用戶自己的價值所在嵌施,而不是使用屏幕標(biāo)注展示太過具體的功能特性。
一個引導(dǎo)新用戶的更具對話式的方法是采用循序漸進的說明莽鸭。Duolingo是這樣做的:通過前面的引導(dǎo)吸引用戶進入程序吗伤,然后針對自己選擇的語言開始一個快速測試(用戶甚至不需要注冊登記),因為邊做邊學(xué)是最好的學(xué)習(xí)方式硫眨。另外足淆,這樣也是一個向用戶傳達產(chǎn)品價值的更精巧的方式。
還記得Mailbox郵箱中的滑動手勢功能不同于蘋果郵箱嗎?循序漸進式的引導(dǎo)說明是這樣的:用戶在開始使用程序前必須嘗試每個手勢的時候再向他們傳達使用方法巧号。
在一個半透明的遮罩層上設(shè)計引導(dǎo)說明之前族奢,停下來想想新用戶的初次體驗究竟會是如何的。專注于上下文丹鸿。在大多數(shù)的情況下越走,都會有一個更好的方式來歡迎您的用戶。
5靠欢、有創(chuàng)意但并不直觀的空狀態(tài)
空狀態(tài)是大部分沒有經(jīng)驗的設(shè)計師經(jīng)常忽略的地方廊敌,然而對于一個完整的用戶體驗環(huán)節(jié)來說,它也是其中重要的一環(huán)门怪。
有時候設(shè)計師將錯誤信息提示頁面或空狀態(tài)處理頁面都視作一個可以發(fā)揮想法創(chuàng)意的地方骡澈。看一下谷歌照片的對空狀態(tài)的處理方法:
乍看上去掷空,它好像處理的還不錯肋殴。遵循設(shè)計規(guī)范,布局合理坦弟,還有一張漂亮的圖片护锤。
然而,當(dāng)你重新審視减拭,你會發(fā)現(xiàn)有一些明顯奇怪的地方:
(1)沒有任何數(shù)據(jù)的情況下那里為何有一個突出的搜索按鈕蔽豺?你怎么可能在這種情況下還用到搜索区丑?
(2)中間的圖片(突出的元素)明顯的是不可點的(盡管很多人會嘗試)
(3)文本提示說你應(yīng)該點擊右上角的那個按鈕創(chuàng)建內(nèi)容拧粪,那為何不在提示后邊直接放置創(chuàng)建按鈕呢?
上面的這種空狀態(tài)并未讓用戶理解以下內(nèi)容:
(1)什么是照片集沧侥?它們?yōu)楹斡杏茫?/p>
(2)為什么我沒有任何數(shù)據(jù)可霎?
(3)我能做什么或者我是否應(yīng)該做些什么?
當(dāng)談到創(chuàng)造性時宴杀,我們認為有時候少即是多癣朗。下面這種空狀態(tài)就處理的很好。(讓我們現(xiàn)在忽略“點擊下面的按鈕”這條指令旺罢,即文本提示下面的按鈕本身就有很明顯的引導(dǎo)作用旷余。)
別忘了空狀態(tài)(類似于網(wǎng)頁端的404頁面)不應(yīng)該僅僅關(guān)乎視覺效果和品牌調(diào)性,它在提升可用性方面更為重要扁达。所以請保證你的設(shè)計直觀易用正卧。
質(zhì)疑一切
請牢記不同的應(yīng)用程序和用戶之間是有差異性的,適用于一個程序的設(shè)計方案并不見的對另外的程序有效跪解。這絕對不是一個放之四海而皆準(zhǔn)的東西炉旷。而且,你也難以準(zhǔn)確的知道為何一個程序按那種套路設(shè)計。
所以窘行,請保持質(zhì)疑的態(tài)度饥追,然后自己思考,自己設(shè)計罐盔,自己研究但绕。
去權(quán)衡,試驗惶看,驗證——如果你的設(shè)計更能體現(xiàn)價值壁熄,不必擔(dān)心自己沒有遵循所謂的設(shè)計指南。
譯自:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570?adbid=667750768665997312#.v789aqc8d