起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識5條被濫用的移動設計模式
如果你是一個經驗豐富的設計師，你可能贊同這樣一個觀點：受其他作品/設計指南啟發而進行設計或者模仿其他設計并不見得就是一種抄襲行為，相反，它是一種最佳的學習過程，是對設計模式的學習，對設計準則的學習，是一種設計出用戶都能理解的用戶界面的方法。
有些人可能會說如果太依賴于設計指南或遵循他人的設計模式/思想，就會抹殺設計師自己創造性，終有一天，所有的程序可能都會看起來一樣。不過從用戶體驗的角度來看，我意識到了另外一個比較嚴重的問題：遵從所謂最佳設計案例的設計模式/思想，可能會使你相信像Google/ Facebook / Instagram 這樣的設計（極有可能是你最喜歡的應用程序）永遠是對的，你會視他們的目標也就是你的目標，并對此不會提出任何質疑。這里有一些模式被認為是(或曾經是)最佳的設計代表，然而它們實際上可能沒有你第一眼看到認為的那么好。
1、隱藏導航
至少已經有50萬篇寫過關于漢堡包菜單的文章，其中大部分出自對此設計方案持反對意見的設計師之手。如果你不曾看到，不妨看看這兩篇：
http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/
http://jamesarcher.me/the-hamburger-menu/
這并不是關于圖標本身的問題，關鍵在于圖標背后隱藏導航的這種做法究竟該如何評價。
一個滑動側邊欄靈活易用
上面這種方案對設計師非常有吸引力且設計方便：因為你不必擔心有限的屏幕空間被過多占用，你只要把所有導航放在一個默認隱藏的側邊滑動欄里面即可。
然而實驗表明，如果以更明顯的方式來顯示菜單欄選項，用戶的使用度和滿意度都會得到提升，甚至能增加收入。這就是為何YouTube已經舍棄掉原本的漢堡菜單欄，轉而將最重要的導航選項提出來一直可見。
YouTube 導航方式的變化
如果你的導航結構復雜，隱藏處理并不會使體驗友好。
2、到處都是圖標
針對屏幕大小有限的問題，乍看上去用圖標取代所有文本標簽是不必費什么腦子就能想到的方案。象形符號占用更少的空間，不用被翻譯成有限的文本，而且人們也往往更熟悉，不是嗎？似乎現在所有的應用程序也都是這樣考慮和去做的。
然而，上述的方案不過是個假想，正是基于這個假想，設計師們有時就會就會設計出難以辨別的圖標來指向具體功能。例如，在Instagram中，你能想到右上角的圖標功能是指發送信息嗎？
或者，假設你從未使用過谷歌翻譯，你認為點擊右下角的圖標是觸發什么功能呢？
無論是假設你的用戶很熟悉抽象的象形圖，還是認為他們愿意花時間去理解他們，這種想法常常是不正確的。
Bloom.fm 的神秘標簽欄
如果你設計過圖標且認為添加一個彈出標簽能夠增強它的視覺可用性，那么你就錯了。即使你設計的是一個正方形，用戶也還是需要去了解它。
Swarm 的圖標提示
然而上述表述并不就是說你不應該使用圖標。實際上，有一些圖標是用戶已經熟知的，而這些圖標大多是代表著搜索、視頻播放、郵箱、設置等功能。（不過用戶還是不能確定，當他們點擊一個心形圖標時會發生什么。）
有些圖標是被大部分用戶熟知的，是可以通用的
無論如何，針對復雜而抽象的功能，我們一般應該使用適當的文本標簽來標示出來。在這些情況下，圖標是仍然有用的，它們能夠增強菜單選項的識別度和可觸摸感。
Pixelmatr 的導航
3、基于導航結構的手勢
當蘋果在2007年發布iPhone時，多點觸控技術一下子吸引到了大家的注意（并很快成為主流），人們意識到他們不再是只能在界面上點按，還能實現縮放、嚙合和滑動等操作。
自此，手勢操作自然而然也開始受到設計師的歡迎，而且誕生了很多使用手勢操作實現功能控制的程序。
Clear 里面的手勢操作
就像隱藏導航、使用圖標取代文本標簽一樣，手勢看上去對于試圖節省屏幕空間的設計師也是一種有效的方法。
關于手勢你需要知道的第一件事是它們通常是隱藏的。人們需要記住它們，其結果就像漢堡包菜單一樣：如果你將一些選項/操作藏起來，那么只有更少的人才會去用到它。
另外，手勢面臨跟圖標類似的問題：雖然有一些大部分人都能理解的常規手勢，包括點按、縮放、滾動等，但是在一些程序中的特定手勢仍然需要人們去發現和學習之后再去使用。
很可惜的是，現在大多數App中充斥的手勢操作并沒有實現標準統一化——這仍然是界面設計的一個新領域。即使如滑動一封郵件這樣的操作在不同的郵箱程序中也可能面臨不同的結果。
在蘋果的郵箱程序中，郵件向右滑動標示出“標記為未讀”的選項
在Mailbox中，相同的手勢則代表將郵件歸檔
4、遮罩式的引導說明
引導說明，是最近一個關于用戶體驗的熱門話題，是指用戶初次接觸到應用程序時程序向用戶展現的一個使用幫助。針對這個概念，大多程序的做法都是使用一個遮罩層向用戶解釋界面的必要元素和功能。
dcovery 的做法
然而為何這卻是一個糟糕的解決方案？因為大部分用戶都會跳過你的說明介紹。他們只想能快點開始使用你的程序。即使他們注意到了你的使用說明，當退出遮罩層后也都通常會統統忘記。（尤其當屏幕上塞滿了信息）。最后一個關鍵點在于，這種依靠遮罩引導的設計方式表明你的程序功能本身設計的還不夠直觀（直觀的設計不需要向用戶解釋才對）。請牢牢記?。?/p>
如果還需要解釋給用戶，那就說明其本身設計不夠好
實際上，引導流程可以使用很多益于用戶的方式來進行設計。例如，Slack，使用面向用戶的第一屏向其顯示一些必要的內容，簡單地介紹自己，專注于告訴用戶自己的價值所在，而不是使用屏幕標注展示太過具體的功能特性。
一個引導新用戶的更具對話式的方法是采用循序漸進的說明。Duolingo是這樣做的：通過前面的引導吸引用戶進入程序，然后針對自己選擇的語言開始一個快速測試（用戶甚至不需要注冊登記），因為邊做邊學是最好的學習方式。另外，這樣也是一個向用戶傳達產品價值的更精巧的方式。
還記得Mailbox郵箱中的滑動手勢功能不同于蘋果郵箱嗎？循序漸進式的引導說明是這樣的：用戶在開始使用程序前必須嘗試每個手勢的時候再向他們傳達使用方法。
在一個半透明的遮罩層上設計引導說明之前，停下來想想新用戶的初次體驗究竟會是如何的。專注于上下文。在大多數的情況下，都會有一個更好的方式來歡迎您的用戶。
5、有創意但并不直觀的空狀態
空狀態是大部分沒有經驗的設計師經常忽略的地方，然而對于一個完整的用戶體驗環節來說，它也是其中重要的一環。
有時候設計師將錯誤信息提示頁面或空狀態處理頁面都視作一個可以發揮想法創意的地方?？匆幌鹿雀枵掌膶諣顟B的處理方法：
乍看上去，它好像處理的還不錯。遵循設計規范，布局合理，還有一張漂亮的圖片。
然而，當你重新審視，你會發現有一些明顯奇怪的地方:
- 沒有任何數據的情況下那里為何有一個突出的搜索按鈕？你怎么可能在這種情況下還用到搜索？
- 中間的圖片（突出的元素）明顯的是不可點的（盡管很多人會嘗試）
- 文本提示說你應該點擊右上角的那個按鈕創建內容，那為何不在提示后邊直接放置創建按鈕呢？
上面的這種空狀態并未讓用戶理解以下內容：
- 什么是照片集？它們為何有用？
- 為什么我沒有任何數據？
- 我能做什么或者我是否應該做些什么？
當談到創造性時，我們認為有時候少即是多。下面這種空狀態就處理的很好。（讓我們現在忽略“點擊下面的按鈕”這條指令，即文本提示下面的按鈕本身就有很明顯的引導作用。）
Loots 的空狀態處理
別忘了空狀態（類似于網頁端的404頁面）不應該僅僅關乎視覺效果和品牌調性，它在提升可用性方面更為重要。所以請保證你的設計直觀易用。
質疑一切
請牢記不同的應用程序和用戶之間是有差異性的，適用于一個程序的設計方案并不見的對另外的程序有效。這絕對不是一個放之四海而皆準的東西。而且，你也難以準確的知道為何一個程序按那種套路設計。
所以，請保持質疑的態度，然后自己思考，自己設計，自己研究。
去權衡，試驗，驗證——如果你的設計更能體現價值，不必擔心自己沒有遵循所謂的設計指南。
譯者：三達不留點gpj
譯自：https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570
本文由 @三達不留點gpj 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
收藏了，，很好
寫得很棒