如果你是一個有經(jīng)驗的設計師,你可能同意在UI設計中從別人的作品里獲取靈感并不算抄襲的說法。通過借鑒而產(chǎn)生的作品是一種最好的實踐練習,它也要運用各種設計模式,也要遵循設計規(guī)范,也要確保選用用戶熟悉的模式來創(chuàng)作使用界面。
有人也許會說墨守陳規(guī)或模仿別人會扼殺創(chuàng)造力,到最后所有的應用看起來都是一樣的。但從用戶體驗的角度我看到了另一個的問題。盲目運用最佳設計使你相信Google/Facebook/Instagram或者其他你喜歡的應用永遠是正確的,他們的設計目標和你的一樣,并未對他們的設計產(chǎn)生過質疑。這里有些現(xiàn)在(或過去)被認為最佳實例的模塊。但未必如你初見時認為的那么出色。
1、隱藏式導航
有近五十萬篇描述過漢堡式菜單的文章,多數(shù)都是設計師寫的,并為此展開激烈爭辯。如果你錯過了相關文章,可以閱讀一下這篇或這篇,但簡而言之,這不是關于圖標本身而是有關于把導航藏到一個圖標后面的討論。

對于設計師來說這是一種十分誘人和方便的解決辦法:你不必擔心屏幕空間的限制,僅需要把整個導航塞進默認隱藏的滾動層里就可以了。
但是,實踐表明,用一種更加可見式的方式展示菜單選項,能夠提升活躍度、用戶滿意度、甚至收入。這就是為什么大型的應用移除漢堡式導航而趨向于使更多相關的導航項始終可見。

如果導航相對復雜,將其隱藏不能帶來友好的操作。應從優(yōu)先級去考慮。
2、圖標,無處不見的圖標
在有局限性的屏幕界面上,通過使用圖標替換文本標簽的方式來節(jié)省空間也是沒有道理的。圖標占用較少空間,也不需要翻譯,同時人們對這些圖標都很熟悉,對嗎?而且其他應用都是這么做的。
從這個假設考慮,應用程序設計者有時候在圖標背后隱藏的功能在實際操作中是難以被識別的。例如,你能猜到,通過Instagram里的這個圖標來發(fā)送即時消息嘛?

或者,假如說之前你從無使用過Google Translate,你會期望通過點擊下面的象形圖標訪問哪些功能?

有個常見的錯誤,就是認為用戶都熟悉抽象的象形圖,或者他們愿意花費額外的時間去探索和學習它們的含義。

如果你認為在圖標上添加懸浮氣泡會讓它更易用,那你就錯了。即使你是Foursquare,用戶也需要去學習如何使用。

但也不可以不使用圖標。有大量的圖標被用戶所熟知,其中多數(shù)表示一些常用的功能如搜索、播放視頻、郵件、設置等等。(但是用戶仍然不確定當他們點擊一個類似心型的圖標時會發(fā)生什么。)

然而,復雜而抽象的功能需要配備顯示適當?shù)奈淖謽撕?。在這種情況下,圖標仍然有用,因為他們可增強菜單的發(fā)現(xiàn)性,同時在應用中增加親密感和個性化。

** 基本功能通過圖標可以有效地展現(xiàn),但是對于復雜的功能,需要添加上文字標簽。(并且如果使用圖標,需要先對他們的易用性進行測試。) **
3、基于手勢的導航
2007年蘋果公司推出iPhone時,多觸點技術得到主流關注,用戶了解到,在操作界面上不僅可以點擊還可以縮放、捏合和滑動。
手勢操作深受設計師的歡迎,許多應用程序都帶有實驗性的手勢控制。

就像隱藏導航和使用圖標代替文字標簽一樣,手勢對于想節(jié)省界面空間的設計師來說是很有誘惑力的。(“那里不應有一個刪除圖標,人們可以向左滑動清空即可。或者向右滑動,我們來決定如何使用。”)
對于手勢,首先需要了解的是它們都是隱藏起來的。人們需要記住他們。就像漢堡式導航的狀況一樣,一個隱藏的功能只有少數(shù)的人會去使用。
此外,手勢和圖標有著相同的問題:有些大多數(shù)用戶都掌握并通用的手勢,比如點擊、縮放、滾動;還有一些手勢是需要在每個應用中發(fā)現(xiàn)和學習的。
不幸的是,更多的手勢在夸應用間尚未實現(xiàn)標準化和一致性——在觸控界面設計中手勢依然是一個新的領域。甚至簡單如滑動一封電子郵件的手勢,在各個郵件管理應用中工作效果也是不一樣的。


還有,想一想,搖晃你的設備,可能意味著撤銷(在iOS上)也可能表示發(fā)送反饋(在谷歌地圖上)。
永遠不要忘記手勢是隱藏的操控,而且要記住,你的用戶在上面需要花費大量的精力。除非你是Tinder,那你或許可以替全世界定義向右滑動的含義——但也僅限于你應用中至關重要的某個概念。
4、首次使用時的界面引導
首次操作,一個最近很火的用戶體驗議題,指用戶和應用第一次接觸。在許多情況下,這僅僅意味著展示一些覆蓋的引導給用戶講解應用界面:

為什么這是個糟糕的解決方案?因為許多用戶會跳過你的簡介;他們只是想快點使用應用。即使他們注意到你的引導,但是當關閉覆蓋時,他們通常會忘掉一切。(特別是,如果屏幕塞滿了信息。)而且最重要的是:添加教學引導不會使界面更直觀。
牢記這一點:

首次操作的流程可以用一些可能更有用的方式展示給用戶。例如,Slack,在第一屏介紹了一些使用環(huán)境。他們簡單地自我介紹,注重效益,而不是界面和功能。

漸進式引導是一種更具交互性的方式來吸引用戶第一次使用。Duoling沒有介紹應用如何操作:鼓勵用戶跳躍并快速測試所選擇的語言(即使用戶沒有注冊),因為在操作中用戶可以學到更多。這也是一種更加吸引人的方式來顯示應用程序的價值。

還記得滑動手勢在Mailbox和Apple Mail里的不同嗎?這是它們的漸進式引導如何工作的:用戶會看到一個演示,在實際使用應用前,他們要試著操作每一個手勢。

在設計一個半透明覆蓋的教學引導前,停下來并想一下用戶首次使用的體驗是什么樣的。要重視環(huán)境。在大多數(shù)情況下,會有更好的方式展示你的歡迎界面。
5、有創(chuàng)意、不直觀的空狀態(tài)
空狀態(tài)很容易被經(jīng)驗不足的設計師忽略,但是,當涉及到一個應用程序的整體用戶體驗時,它們可能是一個重要的因素。
有時候,設計師把錯誤的消息和空狀態(tài)當作有機會發(fā)揮創(chuàng)意的畫布。
例如Google Photos的這個空白狀態(tài)界面:

第一眼看到時,覺得它也出色,對嗎?遵循規(guī)范,層次分明,上面還有漂亮的插畫。
但再看一眼,這里有一些奇怪的東西:
- 如果沒有收藏集,為什么會出現(xiàn)一個突出的搜索按鈕?為什么你要在什么都沒有的位置查找?
- 第二個突出的元素,圖片顯然是不能點擊的(雖然很多人會嘗試)
- 提示說,我應該尋找頂部的“+”號,這很別扭。為什么提示本身不包含添加按鈕?這就像是在說“點擊繼續(xù)按鈕繼續(xù)”。
上面的空白狀態(tài)界面并不能幫助用戶了解情況:
- 收藏集是什么?他們有什么用?
- 為什么我沒什么也沒有?
- 使用它我能做什么(如果我想做的話)?
當談到創(chuàng)意時,少有時是更多。下面的空白狀態(tài)很好的起到了它應有的作用。(讓我們暫時忽略“Now tap the button below”的按鈕)

不要忘記空狀態(tài)(類似于網(wǎng)頁的404頁面)不僅僅和視覺美感與品牌個性有關。而且它們在可用性方面具有更重要的作用。要確保它們直觀易懂。
質疑一切
不要誤解我的意思:設計模式和最佳實踐仍然是你的伙伴。但請記住應用程序和用戶是不同的:一種解決方案可能會在一個應用程序上工作良好,但不一定適合你的應用。這不是普適規(guī)律。而且,你永遠都不會知道一個應用為什么要這樣設計。
獨立思考。獨立設計。獨立研究。
權衡、測試、驗證——別害怕違背準則,如果那樣做更有意義。
原文鏈接:https://medium.com/@kollinz/misused-mobile-ux-patterns-84d2b6930570
作者:Zoltan Kollin
備注:本人首次翻譯并發(fā)布,如有不足之處,歡迎大家指正。推薦大家去閱讀英文原文,加深對文章主旨的理解。