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

序言

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

正文

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

也許有人會(huì)說(shuō)遵循相同的指導(dǎo)準(zhǔn)則并沿用他人的思路會(huì)扼殺設(shè)計(jì)師自己的創(chuàng)造力，他們還認(rèn)為，到最后所有的App看起來(lái)都會(huì)是類(lèi)似的。作為一名用戶體驗(yàn)設(shè)計(jì)師，我看到的問(wèn)題卻恰恰不同。如果用戶習(xí)慣了去適應(yīng)那些優(yōu)秀案例，就會(huì)讓你覺(jué)得，谷歌/ 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í)并沒(méi)有你一開(kāi)始以為的那么優(yōu)秀。

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

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

這種解決方案對(duì)設(shè)計(jì)師來(lái)說(shuō)是非常誘人和便利的：你不必?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ì)用戶可見(jiàn)，原因大概也在于此。

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

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

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

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

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

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

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

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

Swarm的圖標(biāo)提示

這并不意味著你不能使用任何圖標(biāo)。有很多圖標(biāo)你的用戶是很熟悉的，它們主要指代的是搜索、視頻播放、電子郵件、設(shè)置等一些常用功能。不過(guò)用戶也可能不完全熟悉這些常用圖標(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)航欄

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

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

當(dāng)蘋(pí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)?！高@樣的話就沒(méi)必要設(shè)計(jì)刪除按鈕了，人們只需要左滑或者右滑屏幕就好了。不過(guò)向左還是向右是由我們決定的?！?/p>

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

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

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

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

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

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

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

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

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

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

為什么有人說(shuō)這是一個(gè)不好的解決方案呢？因?yàn)楹芏嘤脩魰?huì)跳過(guò)介紹這一部分；他們只想盡快開(kāi)始使用應(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ì)。資料來(lái)源：Startup Vitamins

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

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

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

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

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)視為空白畫(huà)布，在這些畫(huà)布上，他們可以做一些創(chuàng)造性的設(shè)計(jì)。

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

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

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

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

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

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

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

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

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

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

質(zhì)疑一切

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

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

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

文章題目：被誤用的移動(dòng)體驗(yàn)設(shè)計(jì)模式
分享地址：http://www.muchs.cn/news12/159712.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、Google、網(wǎng)站維護(hù)、網(wǎng)站制作、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)公司

廣告

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