序言

伴隨著移動端的迅速發(fā)展，移動端的設(shè)計也越來越多樣，為了做出差異化，設(shè)計師們與產(chǎn)品經(jīng)理絞盡腦汁想帶給用戶不同的體驗。然而，在使用者習(xí)慣與創(chuàng)新設(shè)計上，兩者的確很難權(quán)衡與拿捏。當(dāng)我在翻譯這篇文章時，并不知道它已經(jīng)被很多人翻譯過，但我還是決定將再次翻譯后的文章發(fā)布出來，我想無論是對我自己，還是對設(shè)計師們，這篇文章都將一直提醒著我們。

正文

在經(jīng)驗豐富的設(shè)計師眼里，界面設(shè)計過程中受到其他作品的啟發(fā)，并不能算是抄襲。學(xué)習(xí)研究其他優(yōu)秀案例、它們的設(shè)計模式、界面設(shè)計中遵循的準(zhǔn)則，能幫助設(shè)計師確保用戶在使用自己的設(shè)計時，更加容易上手，并創(chuàng)建出更有效的交互界面。

也許有人會說遵循相同的指導(dǎo)準(zhǔn)則并沿用他人的思路會扼殺設(shè)計師自己的創(chuàng)造力，他們還認(rèn)為，到最后所有的App看起來都會是類似的。作為一名用戶體驗設(shè)計師，我看到的問題卻恰恰不同。如果用戶習(xí)慣了去適應(yīng)那些優(yōu)秀案例，就會讓你覺得，谷歌/ Facebook/ Instagram/[以及你最喜歡的其他App]的設(shè)計永遠(yuǎn)是對的，你會認(rèn)為你的設(shè)計目標(biāo)要跟他們一樣，這樣的后果就是，你會失去質(zhì)疑的能力。下面有一些設(shè)計模式，它們常常被認(rèn)為或者曾經(jīng)被認(rèn)為是優(yōu)秀案例，但其實并沒有你一開始以為的那么優(yōu)秀。

1. 隱藏導(dǎo)航欄

一個漢堡式的菜單大概至少能隱含五十萬個圖標(biāo)，盡管它們大都是設(shè)計師自己設(shè)計的，但他們自己也反感這種菜單。總的來說，問題并不是出在圖標(biāo)本身，而是圖標(biāo)背后隱藏的導(dǎo)航欄。

這種解決方案對設(shè)計師來說是非常誘人和便利的：你不必?fù)?dān)心有限的屏幕空間，你可以把整個導(dǎo)航欄設(shè)計成一個可滾動的層級結(jié)構(gòu)，然后將其隱藏到默認(rèn)的圖標(biāo)后面。

然而實驗表明，如果將隱藏菜單上的選項顯化，可以有效增加用戶的參與度、滿意度，甚至可增加應(yīng)用的收入。現(xiàn)在所有的大用戶都拋棄漢堡式菜單而轉(zhuǎn)用更加清晰的菜單模式，將常用導(dǎo)航選項始終對用戶可見，原因大概也在于此。

YouTube導(dǎo)航欄的變化（盧克·萊夫斯基）

2. 無處不在的圖標(biāo)

盡管屏幕空間有限，但全部用圖標(biāo)來代替所有的文本標(biāo)簽，以求盡可能節(jié)省空間也是十分愚蠢的。通常設(shè)計師會認(rèn)為圖像占用空間更少，也不需要進(jìn)行本地化翻譯，況且人們也很熟悉這些圖標(biāo)，對吧？何況其他的App也都這么做。

基于這一假設(shè)，App設(shè)計師有時會在圖標(biāo)后隱含一些功能，而實際上這些功能用戶通常很難察覺。比如你會猜測，點擊Instagram上的這個圖標(biāo)后，是否可以直接發(fā)送消息。

或者，假設(shè)你從來沒用過谷歌翻譯，你希望下面這個圖標(biāo)隱藏著什么功能呢？

設(shè)計師們通常會犯這樣一個錯誤，那就是認(rèn)為自己的用戶熟悉這些圖標(biāo)，或者他們愿意花費額外的時間來探索和學(xué)習(xí)這些圖標(biāo)。

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

如果你設(shè)計了一個圖標(biāo)，但是需要一個彈出標(biāo)簽來配合它使用，即使你執(zhí)意這么使用或者你的用戶也愿意學(xué)習(xí)這個圖標(biāo)，這個設(shè)計也是失敗的。

Swarm的圖標(biāo)提示

這并不意味著你不能使用任何圖標(biāo)。有很多圖標(biāo)你的用戶是很熟悉的，它們主要指代的是搜索、視頻播放、電子郵件、設(shè)置等一些常用功能。不過用戶也可能不完全熟悉這些常用圖標(biāo)，有時他們?nèi)匀徊淮_定點擊這些圖標(biāo)之后究竟會發(fā)生什么，比如點擊一個心形的圖標(biāo)。

有些圖標(biāo)受到了廣大用戶的認(rèn)可，可被視為通用

而一些復(fù)雜和抽象的圖標(biāo)，需要配有相應(yīng)的文本標(biāo)簽以作提示。在這種情況下，圖標(biāo)仍然有效，因為它們可以增強(qiáng)菜單欄的探索功能，這些圖標(biāo)也會使你的App更加人性、界面更加友好。

Pixelmator的導(dǎo)航欄

基本功能可以通過圖標(biāo)來有效表示，但對于一些隱含復(fù)雜功能的圖標(biāo)，需要添加文本標(biāo)簽來配合使用。如果你需要使用這些圖標(biāo)，那么一定要對它們的易用性進(jìn)行測試。

3. 手勢導(dǎo)航

當(dāng)蘋果公司在2007年推出iPhone的時候，多點觸控技術(shù)受到了主流關(guān)注，用戶也認(rèn)識到他們不僅可以在界面上進(jìn)行圖標(biāo)點控，還可以縮放和滑動界面。

手勢變得廣受設(shè)計師歡迎，現(xiàn)在很多App都被設(shè)計成以手勢控制為主。

Clear 應(yīng)用中的手勢導(dǎo)航

就像隱藏導(dǎo)航欄和使用圖標(biāo)代替文本標(biāo)簽一樣，設(shè)計師使用手勢控制也是為了節(jié)省屏幕空間，這也是手勢控制最吸引設(shè)計師們的一點?！高@樣的話就沒必要設(shè)計刪除按鈕了，人們只需要左滑或者右滑屏幕就好了。不過向左還是向右是由我們決定的?！?/p>

關(guān)于手勢控制，首先要注意的是，他們總是隱藏的，用戶必須記住這些手勢。但后果就是，這些手勢跟漢堡式菜單一樣：如果選項隱藏起來，那么用戶使用就會減少。

此外，手勢控制和圖標(biāo)存在相同的問題，盡管大多數(shù)用戶已經(jīng)熟悉了一些手勢，比如點擊、縮放和滾動等，但不同應(yīng)用還有其獨特的手勢需要用戶來發(fā)掘和學(xué)習(xí)。

不幸的是，大多數(shù)的手勢并不符合規(guī)范，并且不同應(yīng)用間還會出現(xiàn)手勢交叉?？偟膩碚f，手勢控制在觸摸界面設(shè)計中還是一個較新的領(lǐng)域。即使是一個簡單的手勢，比如滑動一封郵件，不同的應(yīng)用中呈現(xiàn)的方式也大不相同。

在Apple Mail中向右滑動，可將已讀郵件標(biāo)記為未讀

在Mailbox中同樣的手勢則表示郵件歸檔

還有，晃動設(shè)備在iOS系統(tǒng)中可能意味著撤消操作，而在谷歌地圖中則意味著發(fā)送反饋。

千萬記住一點，手勢控制是一種隱藏的控制方式，用戶需要記住這些手勢，這就意味著要加大在用戶端的投入。如果你是Tinder，那么你也許能讓全世界記住向右滑動意味著什么——但使用它的前提是它是你App概念的一個重要組成部分。

4.覆蓋式引導(dǎo)界面

用戶引導(dǎo)是一個新近興起的用戶體驗設(shè)計熱門話題，它指的是對初次使用某一App的用戶進(jìn)行引導(dǎo)。在許多情況下，這一過程通常表現(xiàn)為將引導(dǎo)以覆蓋頁面的形式呈現(xiàn)給用戶，講解如何使用界面：

dcovery中的引導(dǎo)標(biāo)記

為什么有人說這是一個不好的解決方案呢？因為很多用戶會跳過介紹這一部分；他們只想盡快開始使用應(yīng)用。即使他們注意到了你的教程，在教程結(jié)束的那一刻他們也都會忘得一干二凈，尤其當(dāng)教程信息填滿整個屏幕的時候，他們更不可能記住了。最后一點，也是很關(guān)鍵的一點就是：在交互界面加入引導(dǎo)標(biāo)記會影響產(chǎn)品的可用性。記住這一點：

用戶界面跟笑話一樣，如果用戶需要你的解釋才能懂，那么這就不是個好的設(shè)計。資料來源：Startup Vitamins

用戶引導(dǎo)可以通過其他的模式來實現(xiàn)，對用戶來說也會更加有效。比如說，Slack通過第一張載入界面來創(chuàng)建一些內(nèi)容，在這張界面上，該應(yīng)用只是對其功能進(jìn)行了簡單介紹，注重效益，而不是界面設(shè)計和功能。

漸進(jìn)式的用戶引導(dǎo)可以通過更具交互性的方式來吸引初次使用的用戶。在初次載入界面中，多鄰國并沒有解釋該應(yīng)用是如何運作的，它甚至鼓勵用戶跳過這些步驟，直接做快速測試選擇語言，這些不需要登陸就可以完成，因為學(xué)習(xí)一個App的最好方式就是通過直接操作。此外，這也能更直接地向用戶顯示其價值。

還記得滑動手勢在Mailbox和Apple Mail中的不同之處嗎？這就是它們漸進(jìn)式用戶引導(dǎo)的工作原理：用戶通過操作來快速演練所有的手勢，在這一過程中他們將熟悉這些手勢的使用：

在設(shè)計一個半透明的覆蓋式引導(dǎo)標(biāo)記之前，停下來想一想，用戶的初次體驗應(yīng)該是怎樣的。設(shè)計師要專注于界面環(huán)境的上下文。在大多數(shù)情況下，總會有更好的方式來歡迎你的用戶。

5.富有創(chuàng)意卻不直觀的空狀態(tài)

空狀態(tài)很容易被缺乏經(jīng)驗的設(shè)計師忽略，而涉及到一個App的整體用戶體驗時，空狀態(tài)是移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站十分重要的衡量因素。

有時候，設(shè)計師會將錯誤消息和空狀態(tài)視為空白畫布，在這些畫布上，他們可以做一些創(chuàng)造性的設(shè)計。

以谷歌圖片的空狀態(tài)界面為例：

谷歌照片的空狀態(tài)畫面

乍一看，這個畫面似乎很大，對不對？布局完好，并且遵循了設(shè)計準(zhǔn)則，上面還有一個漂亮的圖形。

再看一眼就會發(fā)現(xiàn)畫面中有一些奇怪的地方：

• 1）如果用戶沒有收藏任何位置的話，那么界面上為什么會有一個顯眼的搜索按鈕？拿它來搜索什么呢？
• 2）其次突出的一點就是，盡管大家會去嘗試點按界面上的圖標(biāo)，但它顯然是不可點的。
• 3）提示說我應(yīng)該尋找頂部的「+」號按鈕，這對用戶來說是十分尷尬的。移動網(wǎng)站建設(shè),高端網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站為什么提示本身不包含添加按鈕？這就像提示繼續(xù)按鈕的時候說「點擊繼續(xù)按鈕來繼續(xù)」一樣。

以上這個空狀態(tài)界面并不能幫助用戶了解上下文情境：

• 1）什么是收藏？它們有什么用嗎？
• 2）為什么我沒有收藏的內(nèi)容？
• 3）如果我能操作的話，要怎么操作呢？

當(dāng)談到創(chuàng)意時，少即是多。在有效性方面，下面這個空狀態(tài)界面就做得十分出色。讓我們先忽略那個「現(xiàn)在點擊下面的按鈕」的指令。

Lootsy的空狀態(tài)界面

不要忘了，空狀態(tài)（也就是類似經(jīng)常出現(xiàn)的404網(wǎng)頁的界面）不僅需要有視覺美感和品牌個性，它們更需要有可用性。設(shè)計師應(yīng)該讓它們更加直觀。

質(zhì)疑一切

不要誤會我的意思：設(shè)計模式和優(yōu)秀案例仍然是你的朋友。但請記住，App和用戶是不同的：一個解決方案可能適用于某一個App，但并不適用于你的。每個解決方案都不是萬能的。另外，你永遠(yuǎn)也不會知道為什么一個App要設(shè)計成某個特定的樣子。

自己動腦思考，做你自己的設(shè)計，自己去調(diào)研。

測量，測試，驗證——如果你的想法更有效的話，那就不要在意它是否違背某些設(shè)計準(zhǔn)則。

分享題目：被誤用的移動體驗設(shè)計模式
分享網(wǎng)址：http://jinyejixie.com/news/159712.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、企業(yè)建站、網(wǎng)站設(shè)計公司、外貿(mào)建站、網(wǎng)站設(shè)計、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)