被誤用的移動(dòng)體驗(yàn)設(shè)計(jì)模式

2016-02-19

3235

序言

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

正文

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

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

隱藏導(dǎo)航欄

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

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

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

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

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

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

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

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

設(shè)計(jì)師們通常會(huì)犯這樣一個(gè)錯(cuò)誤，那就是認(rèn)為自己的用戶熟悉這些圖標(biāo)，或者他們?cè)敢饣ㄙM(fèi)額外的時(shí)間來探索和學(xué)習(xí)這些圖標(biāo)。

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

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

Swarm的圖標(biāo)提示

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

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

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

Pixelmator的導(dǎo)航欄

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

手勢(shì)導(dǎo)航

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

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

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

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

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

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

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

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

在Mailbox中同樣的手勢(shì)則表示郵件歸檔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

質(zhì)疑一切

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

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

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

關(guān)注我們：在查找公眾號(hào)中搜索：zomsky1688，或者掃描下方二維碼快速關(guān)注。
廣州市縱天信息科技有限公司公眾號(hào)