如果你是一位經(jīng)驗(yàn)豐富的設(shè)計(jì)師，你應(yīng)該會(huì)同意這個(gè)觀點(diǎn)：從他人的作品中獲取到靈感并不算偷竊他人的作品。這是屬于在對(duì)設(shè)計(jì)進(jìn)行深入研究呀，這也屬于一種設(shè)計(jì)模式呀，而且還遵守設(shè)計(jì)規(guī)范呢。所以，當(dāng)然要以用戶們所熟悉的那些模式來(lái)創(chuàng)造出可用性界面。

不過(guò)，有的設(shè)計(jì)師則會(huì)認(rèn)為，過(guò)于遵守設(shè)計(jì)規(guī)范，而且，經(jīng)常性的從他人的作品中獲取靈感的話，自己本身的創(chuàng)造能力就會(huì)下降，這就導(dǎo)致了這樣一個(gè)結(jié)果——一天下來(lái)，你的所有APP都長(zhǎng)一個(gè)樣。

從交互設(shè)計(jì)的角度看，我們會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題。什么問(wèn)題呢？

習(xí)慣性的去應(yīng)用一些所謂的最好的設(shè)計(jì)模式，可能會(huì)讓你覺(jué)得Google，F(xiàn)acebook，Instagram或者說(shuō)其他的一些你最喜歡的APP總是做的非常棒，你會(huì)覺(jué)得，他們的設(shè)計(jì)目標(biāo)和你自己的設(shè)計(jì)目標(biāo)并沒(méi)啥差別，但是，人家成功了，而你的作品卻失敗了。所以，這里推薦一些被公認(rèn)為是(至少曾經(jīng)被公認(rèn)為)最好的設(shè)計(jì)模式，可能在你第一次看來(lái)，這些設(shè)計(jì)模式也就那樣。

1、隱藏導(dǎo)航

關(guān)于漢堡圖標(biāo)，已經(jīng)有不下于50萬(wàn)的文章來(lái)爭(zhēng)論它了。如果你一篇都未曾讀過(guò)，試著去讀一兩篇吧。其實(shí)，簡(jiǎn)單說(shuō)來(lái)，這些文章討論的主題更主要的是這個(gè)圖標(biāo)里所隱含的那些導(dǎo)航，而不是這個(gè)圖標(biāo)自身。

上面圖片這樣的設(shè)計(jì)對(duì)于設(shè)計(jì)師來(lái)說(shuō)其實(shí)是很有吸引力的，而且簡(jiǎn)直太方便了。根本不用擔(dān)心屏幕大小的限制，只需要這樣一個(gè)圖標(biāo)，然后，把所有的導(dǎo)航全部塞進(jìn)這個(gè)可以上下滾動(dòng)的東西里，然后，讓他默認(rèn)隱藏。就這樣，就這么簡(jiǎn)單。

但是，實(shí)驗(yàn)證明，與完全隱藏導(dǎo)航相比，適當(dāng)?shù)恼故境鲆恍?dǎo)航能夠更多的增加用戶的依賴度和滿意程度，甚至為你帶來(lái)更多的收入。所以說(shuō)，現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標(biāo)，將最常用的一些導(dǎo)航一直顯示給了用戶。

如果說(shuō)你的導(dǎo)航比較復(fù)雜，那么，請(qǐng)?jiān)诳紤]優(yōu)先級(jí)的基礎(chǔ)上適當(dāng)?shù)仉[藏導(dǎo)航。

2、圖標(biāo)，隨處可見(jiàn)的圖標(biāo)

由于移動(dòng)端的屏幕大小限制，許多無(wú)腦的設(shè)計(jì)師為了節(jié)省空間，在任何只要能夠使用圖標(biāo)替換的文本域，都使用了圖標(biāo)。大家都這樣想，象形文字或者圖標(biāo)占的空間又少，不需要額外的轉(zhuǎn)換，而且，人們都很熟悉這些圖標(biāo)，難道不是這樣嗎？所以，每一個(gè)APP都這樣做了。

設(shè)計(jì)師們將上面的那種假設(shè)放在腦海里，于是，有的時(shí)候，他們將實(shí)用性的功能蘊(yùn)含在了圖標(biāo)里面，但事實(shí)上，那個(gè)圖標(biāo)是難以識(shí)別的。比如，你能猜到在下圖的Instagram里的這個(gè)圖標(biāo)點(diǎn)擊之后能夠發(fā)送什么信息嗎？

或者說(shuō)，假如你從來(lái)沒(méi)用過(guò)谷歌翻譯，那么，你會(huì)期待下圖的這個(gè)圖標(biāo)實(shí)現(xiàn)什么樣的功能呢？

你總是假設(shè)你的用戶們非常熟悉那些抽象的圖標(biāo)，或者說(shuō)，你總以為用戶們會(huì)花大量的時(shí)間去研究和學(xué)習(xí)你的這個(gè)圖標(biāo)的含義。這是一個(gè)很普遍性的錯(cuò)誤，很多設(shè)計(jì)師都會(huì)犯這個(gè)錯(cuò)誤。

Bloom.fm上讓人覺(jué)得迷糊的標(biāo)簽欄

如果說(shuō)你曾經(jīng)設(shè)計(jì)過(guò)一個(gè)需要一個(gè)彈出框來(lái)解釋從而提高可用性的圖標(biāo)，那么，即使你的用戶們會(huì)不管怎么樣都能了解它，你的這個(gè)做法也是錯(cuò)誤的。

當(dāng)然，并不是說(shuō)你在設(shè)計(jì)中就一點(diǎn)都不使用圖標(biāo)。你的用戶們熟悉大量的圖標(biāo)，這些圖標(biāo)中，有很大一部分都是能夠代表普通的功能的，比如搜索，播放視頻，郵件，設(shè)置等等。(但是，用戶們可能不會(huì)很確定當(dāng)他們點(diǎn)擊一個(gè)心形圖標(biāo)的時(shí)候，會(huì)發(fā)生什么。)

一些能夠被大多數(shù)用戶所識(shí)別的圖標(biāo)并且被認(rèn)為是通用的

對(duì)于復(fù)雜的和抽象的圖標(biāo)，在顯示的時(shí)候，應(yīng)該總是在旁邊加上一個(gè)文本來(lái)進(jìn)行說(shuō)明。這樣，你的圖標(biāo)才是真正有用的。同時(shí)，還能夠提高菜單的可發(fā)現(xiàn)性，也能夠?yàn)槟愕腁PP添加漂亮的觸感和個(gè)性。

Pixelmator的導(dǎo)航

對(duì)于基本的功能，可以使用圖標(biāo)來(lái)展現(xiàn)；但是，對(duì)于復(fù)雜的功能，就需要使用文本來(lái)說(shuō)明了。(如果你要使用圖標(biāo)的話，要時(shí)常性的做可用性測(cè)試)

3、基于手勢(shì)的導(dǎo)航操作

當(dāng)蘋(píng)果公司在2007年發(fā)布了iPhone的時(shí)候，多指觸控技術(shù)就成為了人們關(guān)注的主流技術(shù)，用戶們發(fā)現(xiàn)他們不僅可以在屏幕上進(jìn)行點(diǎn)擊，還可以進(jìn)行放大，縮小和左右輕掃。

手勢(shì)在設(shè)計(jì)們的圈子中流行了起來(lái)，許多的APP都圍繞著手勢(shì)操作來(lái)進(jìn)行設(shè)計(jì)。

Clear里的手勢(shì)操作

就像隱藏的導(dǎo)航欄和使用圖標(biāo)代替文本一樣，手勢(shì)看起來(lái)似乎能夠?yàn)樵O(shè)計(jì)師節(jié)約一些屏幕空間。(“屏幕上不應(yīng)該有刪除按鈕的存在，人們只需要向左或者向右輕掃就可以進(jìn)行刪除了。我們會(huì)決定怎么操作的?！?

關(guān)于手勢(shì)，你首先需要知道的是，手勢(shì)是不可見(jiàn)的。人們需要記住它們，就像漢堡菜單的例子一樣。如果你隱藏了一個(gè)選項(xiàng)，那么，用到那個(gè)選項(xiàng)的人就會(huì)越少。

另外，手勢(shì)存在著與圖標(biāo)相同的問(wèn)題：眾所周知的手勢(shì)有點(diǎn)擊，放大，上下滾動(dòng)，同時(shí)，每個(gè)APP也有那些需要慢慢發(fā)現(xiàn)和學(xué)習(xí)的手勢(shì)。

不幸的是，觸屏界面的設(shè)計(jì)仍然是一個(gè)新的領(lǐng)域，在各個(gè)APP中，大多數(shù)手勢(shì)還不標(biāo)準(zhǔn)和統(tǒng)一。一個(gè)很簡(jiǎn)單的手勢(shì)，比如左右輕掃，在各種各樣的郵件APP中可能都會(huì)大相徑庭。

在Apple的Mail APP中，向右輕掃，顯示出了“標(biāo)記為未讀”的選項(xiàng)

同樣的手勢(shì)，在Mail Box中，就表示將郵件存檔

或者說(shuō)，想一想，搖晃你的手機(jī)，在兩個(gè)APP中，也會(huì)有兩種不同的含義。在iOS中表示撤銷(xiāo)，在Google Maps中表示發(fā)送反饋信息。

永遠(yuǎn)都要記住，手勢(shì)是隱藏的操作，人們不得不去記住它們。對(duì)于你的用戶，這需要大量的努力。如果你是一個(gè)發(fā)起人，也許你可以讓全世界的向右輕掃的含義都一樣——但是，只有當(dāng)它是你APP的概念設(shè)計(jì)里必不可少的一個(gè)部分的時(shí)候。

4、新手引導(dǎo)

新手引導(dǎo)，最近很火的一個(gè)話題，適用于用戶第一次與APP打交道的時(shí)候。在很多情況下，這個(gè)簡(jiǎn)單的方式能夠在一個(gè)透明的覆蓋層上為用戶展示一些標(biāo)記來(lái)解釋界面元素。

dcovery APP里的新手引導(dǎo)

為什么說(shuō)這是一個(gè)很爛的解決方案呢？因?yàn)樵S多用戶都會(huì)跳過(guò)你的介紹，他們想做的就是趕緊使用這個(gè)APP。即使他們注意到了你的這些標(biāo)記，當(dāng)他們把這個(gè)關(guān)掉的時(shí)候，這些所謂的教程也被他們忘得一干二凈了(尤其是當(dāng)屏幕上擠滿了信息的時(shí)候)。最后說(shuō)一句重要的，在你的屏幕上添加這些引導(dǎo)的標(biāo)記，并不會(huì)提高APP的易用性，記住下面這句話：

原圖翻譯：用戶界面就和講笑話一樣，如果這個(gè)笑話還需要解釋才能明白的話，那么，這也不是一個(gè)好笑話。

對(duì)于你的用戶來(lái)說(shuō)，新手引導(dǎo)也許可以使用其他的方式來(lái)設(shè)計(jì)的更加有用。比如Slack這個(gè)APP，使用第一屏來(lái)創(chuàng)建一個(gè)用戶場(chǎng)景。簡(jiǎn)單的介紹一下他們自己，著重于利益而不是屏幕上的功能。

留住你的第一批用戶的一個(gè)更有效的方法就是逐步的引導(dǎo)。比如Duolingo，他沒(méi)有向用戶們解釋這個(gè)APP是如何工作的，而是促使人們做一個(gè)指定語(yǔ)言的快速測(cè)試(甚至不需要登錄)，因?yàn)橛脩魝兛梢栽谧鰷y(cè)試的過(guò)程中了解到這個(gè)APP是如何使用的。同時(shí)，這也是展示這個(gè)APP的價(jià)值的一個(gè)更有影響力的方法。

記得住左右輕掃的手勢(shì)在Apple的Mail APP里和在MailBox里的不同嗎？看看他們的逐步引導(dǎo)是如何做的：用戶們?cè)陂_(kāi)始使用APP之前，必須在APP所提供的一個(gè)練習(xí)場(chǎng)景里嘗試使用這個(gè)APP里的每一個(gè)手勢(shì)。

在你準(zhǔn)備在一個(gè)半透明的覆蓋層上設(shè)計(jì)你的引導(dǎo)標(biāo)記的時(shí)候，停下來(lái)好好想想第一次使用你的APP的用戶會(huì)有寫(xiě)什么樣的經(jīng)歷。關(guān)注一下使用環(huán)境，通常情況下，有更好的方法來(lái)歡迎你的用戶們。

5、充滿了創(chuàng)造力，但是并不直觀的空白狀態(tài)

很多沒(méi)有經(jīng)驗(yàn)的設(shè)計(jì)師很容易忽略APP的空白狀態(tài)。但是，從一個(gè)APP的整體用戶體驗(yàn)上來(lái)說(shuō)，這是一個(gè)很重要的方面。

有的時(shí)候，設(shè)計(jì)師們把錯(cuò)誤信息和空白狀態(tài)的界面當(dāng)作一塊展示他們創(chuàng)造力的畫(huà)布。

比如下面這張Google Photo的空白狀態(tài)界面：

第一眼看去，簡(jiǎn)直太棒了不是嗎？一個(gè)漂亮的矢量圖加上完全符合設(shè)計(jì)規(guī)范的布局。

但是，再看一下，就會(huì)覺(jué)得有寫(xiě)奇怪的東西了：

?這塊屏幕里什么收藏也沒(méi)有，但為什么這里會(huì)有一個(gè)那么顯眼的搜索按鈕呢？難道是想讓用戶在什么都沒(méi)有的界面里搜索什么？

?第二個(gè)很顯眼的元素就是這個(gè)矢量圖，很明顯不可以點(diǎn)擊(雖說(shuō)會(huì)有很多人去嘗試點(diǎn)擊)。

?屏幕上的提示說(shuō)，我應(yīng)該找到在頂部的那個(gè)超級(jí)不起眼的“＋”標(biāo)志。為什么這個(gè)提示自己不包含一個(gè)添加按鈕呢？就像是在說(shuō)“點(diǎn)擊繼續(xù)按鈕來(lái)繼續(xù)”

總而言之，上面這個(gè)空白屏幕沒(méi)有能夠幫助用戶理解用戶所在的這個(gè)環(huán)境：

?什么是收藏？他們?yōu)槭裁从杏媚兀?

?為什么我什么都沒(méi)有呢？

?我可以做些什么嗎？(我應(yīng)該做什么？)

當(dāng)需要?jiǎng)?chuàng)造力時(shí)，越少有時(shí)會(huì)越有用。下面這個(gè)空白狀態(tài)屏在可用性上就做的十分完美。(先讓我們忽略那個(gè)“現(xiàn)在就點(diǎn)擊下面這歌按鈕吧”的引導(dǎo)提示)

在Lootsy里的空白狀態(tài)屏

記住，空白狀態(tài)(類(lèi)似于網(wǎng)頁(yè)里的404頁(yè)面)并不只是美感和品牌特色。在可用性上，他們更為重要。要讓空白狀態(tài)更為直觀。

多問(wèn)多想

不要說(shuō)我是錯(cuò)的：設(shè)計(jì)模式和最佳的實(shí)踐仍然是你的好伙伴。但是要知道，APP和用戶是不一樣的：在一個(gè)APP里能夠適用的方案，在你自己的APP里，也許就一點(diǎn)不適用。這不是一個(gè)通用方案就能解決的事情。另外，你永遠(yuǎn)不可能知道為什么一個(gè)APP會(huì)以某種方式來(lái)設(shè)計(jì)。

自己要多想想，多設(shè)計(jì)，多研究。

衡量，測(cè)試，驗(yàn)證——如果能夠做得更好，就不要害怕打破設(shè)計(jì)規(guī)范。

作者： 鄭小小莊

轉(zhuǎn)載請(qǐng)注明：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司