如果你是一個經(jīng)驗(yàn)豐富的設(shè)計師，你可能贊同這樣一個觀點(diǎn)：受其他作品/設(shè)計指南啟發(fā)而進(jìn)行設(shè)計或者模仿其他設(shè)計并不見得就是一種抄襲行為，相反，它是一種最佳的學(xué)習(xí)過程，是對設(shè)計模式的學(xué)習(xí)，對設(shè)計準(zhǔn)則的學(xué)習(xí)，是一種設(shè)計出用戶都能理解的用戶界面的方法。

有些人可能會說如果太依賴于設(shè)計指南或遵循他人的設(shè)計模式/思想，就會抹殺設(shè)計師自己創(chuàng)造性，終有一天，所有的程序可能都會看起來一樣。不過從用戶體驗(yàn)的角度來看，我意識到了另外一個比較嚴(yán)重的問題：遵從所謂最佳設(shè)計案例的設(shè)計模式/思想，可能會使你相信像Google/ Facebook / Instagram 這樣的設(shè)計（極有可能是你最喜歡的應(yīng)用程序）永遠(yuǎn)是對的，你會視他們的目標(biāo)也就是你的目標(biāo)，并對此不會提出任何質(zhì)疑。這里有一些模式被認(rèn)為是(或曾經(jīng)是)最佳的設(shè)計代表，然而它們實(shí)際上可能沒有你第一眼看到認(rèn)為的那么好。

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)航的這種做法究竟該如何評價。

一個滑動側(cè)邊欄靈活易用

上面這種方案對設(shè)計師非常有吸引力且設(shè)計方便：因?yàn)槟悴槐負(fù)?dān)心有限的屏幕空間被過多占用，你只要把所有導(dǎo)航放在一個默認(rèn)隱藏的側(cè)邊滑動欄里面即可。

然而實(shí)驗(yàn)表明，如果以更明顯的方式來顯示菜單欄選項(xiàng)，用戶的使用度和滿意度都會得到提升，甚至能增加收入。這就是為何YouTube已經(jīng)舍棄掉原本的漢堡菜單欄，轉(zhuǎn)而將最重要的導(dǎo)航選項(xiàng)提出來一直可見。

YouTube 導(dǎo)航方式的變化

如果你的導(dǎo)航結(jié)構(gòu)復(fù)雜，隱藏處理并不會使體驗(yàn)友好。

2、到處都是圖標(biāo)

針對屏幕大小有限的問題，乍看上去用圖標(biāo)取代所有文本標(biāo)簽是不必費(fèi)什么腦子就能想到的方案。象形符號占用更少的空間，不用被翻譯成有限的文本，而且人們也往往更熟悉，不是嗎？似乎現(xiàn)在所有的應(yīng)用程序也都是這樣考慮和去做的。

然而，上述的方案不過是個假想，正是基于這個假想，設(shè)計師們有時就會就會設(shè)計出難以辨別的圖標(biāo)來指向具體功能。例如，在Instagram中，你能想到右上角的圖標(biāo)功能是指發(fā)送信息嗎？

或者，假設(shè)你從未使用過谷歌翻譯，你認(rèn)為點(diǎn)擊右下角的圖標(biāo)是觸發(fā)什么功能呢？

無論是假設(shè)你的用戶很熟悉抽象的象形圖，還是認(rèn)為他們愿意花時間去理解他們，這種想法常常是不正確的。

Bloom.fm 的神秘標(biāo)簽欄

如果你設(shè)計過圖標(biāo)且認(rèn)為添加一個彈出標(biāo)簽?zāi)軌蛟鰪?qiáng)它的視覺可用性，那么你就錯了。即使你設(shè)計的是一個正方形，用戶也還是需要去了解它。

Swarm 的圖標(biāo)提示

然而上述表述并不就是說你不應(yīng)該使用圖標(biāo)。實(shí)際上，有一些圖標(biāo)是用戶已經(jīng)熟知的，而這些圖標(biāo)大多是代表著搜索、視頻播放、郵箱、設(shè)置等功能。（不過用戶還是不能確定，當(dāng)他們點(diǎn)擊一個心形圖標(biāo)時會發(fā)生什么。）

有些圖標(biāo)是被大部分用戶熟知的，是可以通用的

無論如何，針對復(fù)雜而抽象的功能，我們一般應(yīng)該使用適當(dāng)?shù)奈谋緲?biāo)簽來標(biāo)示出來。在這些情況下，圖標(biāo)是仍然有用的，它們能夠增強(qiáng)菜單選項(xiàng)的識別度和可觸摸感。

Pixelmatr 的導(dǎo)航

3、基于導(dǎo)航結(jié)構(gòu)的手勢

當(dāng)蘋果在2007年發(fā)布iPhone時，多點(diǎn)觸控技術(shù)一下子吸引到了大家的注意（并很快成為主流），人們意識到他們不再是只能在界面上點(diǎn)按，還能實(shí)現(xiàn)縮放、嚙合和滑動等操作。

自此，手勢操作自然而然也開始受到設(shè)計師的歡迎，而且誕生了很多使用手勢操作實(shí)現(xiàn)功能控制的程序。

Clear 里面的手勢操作

就像隱藏導(dǎo)航、使用圖標(biāo)取代文本標(biāo)簽一樣，手勢看上去對于試圖節(jié)省屏幕空間的設(shè)計師也是一種有效的方法。

關(guān)于手勢你需要知道的第一件事是它們通常是隱藏的。人們需要記住它們，其結(jié)果就像漢堡包菜單一樣：如果你將一些選項(xiàng)/操作藏起來，那么只有更少的人才會去用到它。

另外，手勢面臨跟圖標(biāo)類似的問題：雖然有一些大部分人都能理解的常規(guī)手勢，包括點(diǎn)按、縮放、滾動等，但是在一些程序中的特定手勢仍然需要人們?nèi)グl(fā)現(xiàn)和學(xué)習(xí)之后再去使用。

很可惜的是，現(xiàn)在大多數(shù)App中充斥的手勢操作并沒有實(shí)現(xiàn)標(biāo)準(zhǔn)統(tǒng)一化——這仍然是界面設(shè)計的一個新領(lǐng)域。即使如滑動一封郵件這樣的操作在不同的郵箱程序中也可能面臨不同的結(jié)果。

在蘋果的郵箱程序中，郵件向右滑動標(biāo)示出“標(biāo)記為未讀”的選項(xiàng)

在Mailbox中，相同的手勢則代表將郵件歸檔

4、遮罩式的引導(dǎo)說明

引導(dǎo)說明，是最近一個關(guān)于用戶體驗(yàn)的熱門話題，是指用戶初次接觸到應(yīng)用程序時程序向用戶展現(xiàn)的一個使用幫助。針對這個概念，大多程序的做法都是使用一個遮罩層向用戶解釋界面的必要元素和功能。

dcovery 的做法

然而為何這卻是一個糟糕的解決方案？因?yàn)榇蟛糠钟脩舳紩^你的說明介紹。他們只想能快點(diǎn)開始使用你的程序。即使他們注意到了你的使用說明，當(dāng)退出遮罩層后也都通常會統(tǒng)統(tǒng)忘記。（尤其當(dāng)屏幕上塞滿了信息）。最后一個關(guān)鍵點(diǎn)在于，這種依靠遮罩引導(dǎo)的設(shè)計方式表明你的程序功能本身設(shè)計的還不夠直觀（直觀的設(shè)計不需要向用戶解釋才對）。請牢牢記住：

如果還需要解釋給用戶，那就說明其本身設(shè)計不夠好

實(shí)際上，引導(dǎo)流程可以使用很多益于用戶的方式來進(jìn)行設(shè)計。例如，Slack，使用面向用戶的第一屏向其顯示一些必要的內(nèi)容，簡單地介紹自己，專注于告訴用戶自己的價值所在，而不是使用屏幕標(biāo)注展示太過具體的功能特性。

一個引導(dǎo)新用戶的更具對話式的方法是采用循序漸進(jìn)的說明。Duolingo是這樣做的：通過前面的引導(dǎo)吸引用戶進(jìn)入程序，然后針對自己選擇的語言開始一個快速測試（用戶甚至不需要注冊登記），因?yàn)檫呑鲞厡W(xué)是最好的學(xué)習(xí)方式。另外，這樣也是一個向用戶傳達(dá)產(chǎn)品價值的更精巧的方式。

還記得Mailbox郵箱中的滑動手勢功能不同于蘋果郵箱嗎？循序漸進(jìn)式的引導(dǎo)說明是這樣的：用戶在開始使用程序前必須嘗試每個手勢的時候再向他們傳達(dá)使用方法。

在一個半透明的遮罩層上設(shè)計引導(dǎo)說明之前，停下來想想新用戶的初次體驗(yàn)究竟會是如何的。專注于上下文。在大多數(shù)的情況下，都會有一個更好的方式來歡迎您的用戶。

5、有創(chuàng)意但并不直觀的空狀態(tài)

空狀態(tài)是大部分沒有經(jīng)驗(yàn)的設(shè)計師經(jīng)常忽略的地方，然而對于一個完整的用戶體驗(yàn)環(huán)節(jié)來說，它也是其中重要的一環(huán)。

有時候設(shè)計師將錯誤信息提示頁面或空狀態(tài)處理頁面都視作一個可以發(fā)揮想法創(chuàng)意的地方。看一下谷歌照片的對空狀態(tài)的處理方法：

乍看上去，它好像處理的還不錯。遵循設(shè)計規(guī)范，布局合理，還有一張漂亮的圖片。

然而，當(dāng)你重新審視，你會發(fā)現(xiàn)有一些明顯奇怪的地方:

1. 沒有任何數(shù)據(jù)的情況下那里為何有一個突出的搜索按鈕？你怎么可能在這種情況下還用到搜索？
2. 中間的圖片（突出的元素）明顯的是不可點(diǎn)的（盡管很多人會嘗試）
3. 文本提示說你應(yīng)該點(diǎn)擊右上角的那個按鈕創(chuàng)建內(nèi)容，那為何不在提示后邊直接放置創(chuàng)建按鈕呢？

上面的這種空狀態(tài)并未讓用戶理解以下內(nèi)容：

• 什么是照片集？它們?yōu)楹斡杏茫?/li>
• 為什么我沒有任何數(shù)據(jù)？
• 我能做什么或者我是否應(yīng)該做些什么？

當(dāng)談到創(chuàng)造性時，我們認(rèn)為有時候少即是多。下面這種空狀態(tài)就處理的很好。（讓我們現(xiàn)在忽略“點(diǎn)擊下面的按鈕”這條指令，即文本提示下面的按鈕本身就有很明顯的引導(dǎo)作用。）

Loots 的空狀態(tài)處理

別忘了空狀態(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)衡，試驗(yàn)，驗(yàn)證——如果你的設(shè)計更能體現(xiàn)價值，不必?fù)?dān)心自己沒有遵循所謂的設(shè)計指南。

譯者：三達(dá)不留點(diǎn)gpj

譯自：https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570

本文由 @三達(dá)不留點(diǎn)gpj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。