如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)。

移動(dòng)端搜索功能設(shè)計(jì)：3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎn)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

移動(dòng)端搜索功能設(shè)計(jì)：3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎn)

這篇文章筆者想和大家聊一聊有關(guān)搜索功能的設(shè)計(jì)，搜索功能是每個(gè)內(nèi)容型APP的核心，它的易用性決定了用戶是否能從APP里快速找到自己想找的內(nèi)容，那么決定搜索體驗(yàn)好壞的關(guān)鍵點(diǎn)又是什么呢？這里我總結(jié)了兩點(diǎn)，“操作的易用性”和“結(jié)果的準(zhǔn)確性”?？此坪?jiǎn)單的兩點(diǎn)卻有很多的學(xué)問(wèn)，筆者把搜索的交互流程劃分成三個(gè)關(guān)鍵階段，“搜索前、搜索中及搜索后”，接下來(lái)將從這三個(gè)階段逐一分析整個(gè)搜索流程中的相關(guān)設(shè)計(jì)。

搜索入口——依據(jù)功能權(quán)重來(lái)判斷入口的表現(xiàn)形式

在不同的APP或者不同的場(chǎng)景下搜索入口有著不同的表現(xiàn)形式，具體的表現(xiàn)形式取決于產(chǎn)品對(duì)搜索功能權(quán)重的定義，如果說(shuō)在某一場(chǎng)景下搜索功能是用戶常用的核心功能那么他在界面上所表現(xiàn)出來(lái)的權(quán)重就要高些，反之則低些。下圖是常見(jiàn)的搜索功能的入口形式，他們的權(quán)重從左到右依次降低，筆者將對(duì)他們一一進(jìn)行分析

方式一：如下圖APP Store的搜索入口

如下圖APP Store的搜索形式，搜索放在標(biāo)簽欄上作為一個(gè)獨(dú)立的功能模塊，它的功能層級(jí)是最高的。不管用戶操作到哪里都可以隨時(shí)進(jìn)入搜索頁(yè)面，這樣的搜索入口通常用在搜索場(chǎng)景非常多的內(nèi)容型APP上，方便用戶在任何時(shí)候快速進(jìn)入搜索頁(yè)面。

方式二：搜索框外漏在nav bar上

如下圖是京東app的搜索入口，它將搜索框外漏在nav bar上，這樣的形式有著兩個(gè)設(shè)計(jì)的關(guān)鍵點(diǎn)：

關(guān)鍵點(diǎn)一：搜索框外漏在頂部導(dǎo)航條上

搜索框直接外漏在導(dǎo)航條上是為了突顯該功能，這一功能往往是用戶在該頁(yè)面非常核心的操作任務(wù)，類似天貓京東這類電商型app，通常情況下用戶都是帶著明確目的來(lái)購(gòu)買(mǎi)東西的，那么他們采取的最快最直接的方式就是搜索。

關(guān)鍵點(diǎn)二：在向上滾動(dòng)界面時(shí)，搜索框一直懸停在頂部

這樣做的場(chǎng)景是這樣的，在用戶滾動(dòng)頁(yè)面尋找內(nèi)容時(shí)，可能并不能找到自己想要的內(nèi)容，搜索框一直懸停一是為了暗示用戶可以進(jìn)行搜索，二是為了讓用戶在想搜索時(shí)快速觸發(fā)搜索

方式三：出現(xiàn)在NAV BAR下面，默認(rèn)隱藏或顯示

如下圖是微信在聊天頁(yè)面和通訊錄頁(yè)面的搜索入口，初始化狀態(tài)時(shí)聊天頁(yè)面的搜索框是不出現(xiàn)在用戶的可視范圍內(nèi)的，當(dāng)頁(yè)面下滑時(shí)搜索框才出現(xiàn)，而在通訊錄頁(yè)面里搜索框是默認(rèn)出現(xiàn)在用戶的可視范圍內(nèi)的。

分析：微信在最近聯(lián)系人和通訊錄上搜索框的默認(rèn)狀態(tài)不同，這很好地詮釋了這兩種場(chǎng)景下的搜索功能的權(quán)重。最近聯(lián)系人頁(yè)面上的搜索入口顯得更加隱蔽，因?yàn)樵谶@個(gè)頁(yè)面下用戶產(chǎn)生搜索的場(chǎng)景很少，把其隱藏簡(jiǎn)化了界面的元素，提升了界面的美觀性。

方式四：通過(guò)點(diǎn)擊icon觸發(fā)搜索

如下圖是淘票票的搜索的入口，通過(guò)點(diǎn)擊右上角的搜索icon進(jìn)入搜索頁(yè)面：

分析：在界面權(quán)重上，這樣的方式相對(duì)于以上三種方式來(lái)說(shuō)顯得較弱一點(diǎn)，因?yàn)樵谶@樣的場(chǎng)景下用戶使用搜索的概率并不是很高，如果把搜索外漏就會(huì)占據(jù)更多的屏幕空間，破壞界面的權(quán)重等級(jí)和美觀性。

總結(jié)：依據(jù)用戶的需求場(chǎng)景，搜索入口放在不同的位置，如果說(shuō)在該頁(yè)面搜索是一個(gè)主要的功能，我們就應(yīng)該去突顯它，提升它在界面上的權(quán)重，反之則減輕它的權(quán)重。

搜索中間頁(yè)——運(yùn)營(yíng)的重災(zāi)區(qū)，用戶搜索行為的關(guān)鍵點(diǎn)

搜索中間頁(yè)本來(lái)應(yīng)該是一個(gè)輕量化的頁(yè)面，用戶在這里輸入內(nèi)容進(jìn)行搜索即可。但隨著運(yùn)營(yíng)需求的擴(kuò)張，這個(gè)頁(yè)面逐漸成為了一個(gè)運(yùn)營(yíng)重災(zāi)區(qū)，多了很多推薦的內(nèi)容。筆者將從“輸入框提示信息、搜索分類、搜索歷史、搜索推薦、搜索輸入、搜索建議”等方面分析一下這個(gè)頁(yè)面的設(shè)計(jì)。

1. 輸入框提示信息

搜索框內(nèi)的提示信息通常是提示用戶當(dāng)下可以搜索什么樣的內(nèi)容，如下圖bilibi的搜索提示，告訴用戶可以進(jìn)行“視頻、番劇、UP主或者AV號(hào)”的搜索，這樣的提示信息對(duì)用戶也是一種良性的引導(dǎo)，給用戶提供了一個(gè)心理預(yù)期，同時(shí)也對(duì)用戶隨意輸入關(guān)鍵詞造成無(wú)結(jié)果的傷害體驗(yàn)的可能進(jìn)行了限制。例如一個(gè)房產(chǎn)APP，搜索框內(nèi)提示輸入樓盤(pán)或小區(qū)名，如果沒(méi)有這樣的提示有的用戶可能就會(huì)去輸入價(jià)格去篩選房源，這句提示語(yǔ)很好地降低了這樣的風(fēng)險(xiǎn)。

但隨著人們對(duì)APP使用的熟悉，用戶在這里的認(rèn)知負(fù)擔(dān)基本消除，運(yùn)營(yíng)人員逐漸搶占了這塊地方，這句話變成了內(nèi)容的推薦或者產(chǎn)品的Slogan，這些推薦的內(nèi)容可以是運(yùn)營(yíng)人員手動(dòng)維護(hù)的也可以是依據(jù)用戶的購(gòu)買(mǎi)和行為習(xí)慣進(jìn)行推薦的。如下圖右邊是淘寶的搜索提示，搜索框的文案變成了“紅人最愛(ài)潮牌名服”，這就是運(yùn)營(yíng)人員在為特定內(nèi)容進(jìn)行導(dǎo)流。

2. 搜索分類

在內(nèi)容型APP中搜索時(shí)通常會(huì)對(duì)內(nèi)容進(jìn)行分類搜索，這是為了幫助用戶更地找到相關(guān)內(nèi)容，分類的操作可以發(fā)生在搜索前也可以發(fā)生在搜索后，如下圖是“淘寶、微信、網(wǎng)易云音樂(lè)”搜索分類的方式，筆者將分別對(duì)他們進(jìn)行分析。

淘寶是將搜索分類前置，默認(rèn)搜索寶貝，點(diǎn)擊后彈出浮層進(jìn)行切換。這樣的方式存在一個(gè)明顯的缺點(diǎn)就是由于該入口所占空間位置不顯著，會(huì)導(dǎo)致用戶感知太弱。 這樣的方式通常用在用戶大多數(shù)情況下只搜索某一分類的內(nèi)容，如淘寶這樣，用戶大部分的搜索場(chǎng)景都是在尋找寶貝。

微信默認(rèn)搜索所有內(nèi)容，將分類通過(guò)通過(guò)三個(gè)很顯著的入口放在搜索框下方，當(dāng)點(diǎn)擊某一分類時(shí)跳轉(zhuǎn)到該分類的搜索界面，同時(shí)搜索框的文案以及搜索界面的內(nèi)容發(fā)生相應(yīng)變化，提示用戶搜索范圍被改變。這種方式通常用在這些分類搜索的場(chǎng)景都很常見(jiàn)時(shí)，它的缺點(diǎn)在于，從界面表現(xiàn)形式來(lái)看，這三個(gè)分類更像是三個(gè)功能的入口，他們與搜索框聯(lián)系得不是很緊密，很多用戶最開(kāi)始使用時(shí)并不知道點(diǎn)擊這些分類是進(jìn)行搜索范圍的限制。經(jīng)測(cè)試3個(gè)從未使用過(guò)該功能的用戶，他們都認(rèn)為點(diǎn)擊朋友圈后就是進(jìn)入朋友圈，點(diǎn)擊文章后就是顯示所有文章。

網(wǎng)易云音樂(lè)是將搜索分類進(jìn)行后置了，在下文關(guān)于搜索結(jié)果的展示我會(huì)分析它的優(yōu)劣勢(shì)。

3.搜索歷史

搜索歷史記住用戶的足跡，方便用戶快速向以前搜索過(guò)的內(nèi)容進(jìn)行轉(zhuǎn)換。設(shè)計(jì)上我們需要注意的一點(diǎn)就是需要把搜索歷史和搜索推薦區(qū)分開(kāi)來(lái)，在位置上，盡量讓搜索歷史靠近搜索框（如下圖），因?yàn)閺恼J(rèn)知心理學(xué)上來(lái)講，越靠近搜索框的內(nèi)容越能表示它是搜索歷史。在表現(xiàn)形式上，搜索歷史和搜索推薦盡量采用不同的表現(xiàn)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史

4. 搜索推薦

這里的搜索推薦通常有三種來(lái)源：

1. 按照用戶的搜索熱度進(jìn)行推薦；
2. 運(yùn)營(yíng)手動(dòng)配置；
3. 按照搜索行為進(jìn)行計(jì)算和推薦;

它存在的目的主要有兩個(gè)：

• 一是挖掘用戶的潛在需求，讓用戶更快地找到想找的內(nèi)容；
• 二是作為運(yùn)營(yíng)位為特定的內(nèi)容導(dǎo)流。

建議：

• 不要漏出太多的推薦內(nèi)容，畢竟它帶有一些運(yùn)營(yíng)和廣告性質(zhì)，用戶的接受度并不會(huì)很高
• 在界面上讓推薦內(nèi)容和搜索歷史有明顯的區(qū)分，方便用戶在形式上一眼就能區(qū)分出搜索歷史和推薦內(nèi)容
• 盡量推薦一些對(duì)用戶有真正價(jià)值的內(nèi)容

5. 搜索輸入

受移動(dòng)端操控方式的限制，在輸入內(nèi)容時(shí)存在兩個(gè)明顯的痛點(diǎn)：“修改內(nèi)容”和“輸入速度”。

關(guān)于修改內(nèi)容：當(dāng)用戶想更改語(yǔ)句中一部分文字時(shí)，將光標(biāo)移動(dòng)到想要更改的地方是一件很難的事，點(diǎn)擊操作真的很令人發(fā)狂，通常情況下我寧愿重新輸入。但是針對(duì)這一點(diǎn)搜狗輸入法做了一個(gè)很人性的交互，當(dāng)用戶按住鍵盤(pán)左右滑動(dòng)時(shí)就能移動(dòng)光標(biāo)（如下圖）。

關(guān)于輸入速度：很早之前偶然間發(fā)現(xiàn)了UC瀏覽器在輸入文字時(shí)的一個(gè)交互功能，如下圖所示，當(dāng)輸入文字后，用戶可以將搜索建議的詞語(yǔ)直接加入到搜索框中然后繼續(xù)輸入文字。這樣的需求場(chǎng)景在很常見(jiàn)，比如我想搜索“交互設(shè)計(jì)師的前景”，當(dāng)我輸入交互二字后就會(huì)有“交互設(shè)計(jì)”的搜索建議，點(diǎn)擊搜索建議后面的箭頭將這個(gè)詞直接加入搜索框，然后就出現(xiàn)了“交互設(shè)計(jì)師的前景”的搜索建議，點(diǎn)擊搜索建議后進(jìn)入搜索結(jié)果的頁(yè)面，這個(gè)過(guò)程中我少打了很多字，對(duì)我的搜索速度有很大的提升。

6.搜索建議

當(dāng)用戶輸入內(nèi)容后，搜索框下面出現(xiàn)了眾多的搜索建議，這些搜索建議是為了幫助用戶快速向目標(biāo)進(jìn)行轉(zhuǎn)化，如下圖是京東的搜索建議，當(dāng)我輸入畫(huà)框后，一系列畫(huà)框的搜索建議就出來(lái)了，它還有一個(gè)亮點(diǎn)就是在此提供了細(xì)化篩選條件，畫(huà)框后面緊跟了“長(zhǎng)方形、實(shí)木、正方形”等關(guān)鍵的篩選條件，為用戶省去了到結(jié)果頁(yè)進(jìn)行篩選的步驟。

搜索結(jié)果——背后的邏輯決定了用戶是否能找到準(zhǔn)確的內(nèi)容

搜索結(jié)果是搜索過(guò)程中最關(guān)鍵的點(diǎn)，結(jié)果的準(zhǔn)確性確定了用戶體驗(yàn)的好壞，筆者將從“搜索結(jié)果的形式、搜索結(jié)果的操作、搜索結(jié)果的分類、搜索結(jié)果的排序”等方面來(lái)對(duì)搜索結(jié)果進(jìn)行分析。

1. 搜索結(jié)果的形式

搜索結(jié)果一般分為兩種，一種是所見(jiàn)即所得，用戶輸入內(nèi)容后出現(xiàn)在搜索框下面的搜索建議就是搜索結(jié)果，這種搜索通常出現(xiàn)在一些輕量化的APP中，因?yàn)樗阉鹘ㄗh對(duì)應(yīng)的就是唯一的搜索結(jié)果，如下圖微信的搜索一樣。

第二種形式就是一個(gè)關(guān)鍵詞對(duì)應(yīng)了多個(gè)搜索建議，每個(gè)搜索建議又對(duì)應(yīng)了多個(gè)搜索結(jié)果，當(dāng)用戶點(diǎn)擊搜索后進(jìn)入了一個(gè)專門(mén)的搜索結(jié)果頁(yè)，如下圖京東的搜索一樣。

2. 搜索結(jié)果的操作

依據(jù)用戶的需求目的，在搜索結(jié)果的列表上我們可以外漏用戶大部分情況下會(huì)采取的操作，比如說(shuō)視頻類網(wǎng)站，用戶搜索到某一內(nèi)容后，最常采取的操作就是播放，我們就可以把播放按鈕外漏，縮短用戶的操作路徑（如下圖愛(ài)奇藝的搜索結(jié)果頁(yè)）

3. 搜索結(jié)果的分類

通常的分類方式是TAB切和卡片，以下是微信和網(wǎng)易云音樂(lè)的分類。

這兩種方式有各自的應(yīng)用場(chǎng)景，TAB切主要應(yīng)用在搜索結(jié)果有固定的幾種分類，并且通常的情況下搜索結(jié)果都有很多的內(nèi)容，如上圖的網(wǎng)易云音樂(lè)，每一個(gè)分類都有很多的搜索結(jié)果，如果它采用卡片式的瀑布流布局，用戶需要不停往下翻才能看到第二種分類的內(nèi)容。卡片式主要運(yùn)用在搜索結(jié)果的內(nèi)容不多，如微信這樣的情況，每一類結(jié)果并不是很多，卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容，如果這里用TAB切就很尷尬了，因?yàn)槊恳活惖膬?nèi)容都很少或者很多類里根本沒(méi)有內(nèi)容，這樣的用戶感受就不好了。

4. 搜索結(jié)果的排序

搜索結(jié)果的排序是一個(gè)比較復(fù)雜的工作，里面涉及了很多的算法邏輯，筆者對(duì)這塊也不是很清楚，但是一般的垂直內(nèi)容型APP并沒(méi)有這么復(fù)雜的算法在里面，就是按照搜索的關(guān)鍵字去一一匹配。

如下圖是說(shuō)我在QQ閱讀輸入一個(gè)“男”字，然后就給我建議第一個(gè)字是“男”的所有可能的結(jié)果，當(dāng)?shù)谝粋€(gè)字匹配完后就匹配第二個(gè)字，這樣以此類推。他們的整體順序就是按照匹配關(guān)鍵字的先后進(jìn)行排列的，其實(shí)在排序中還牽涉了很多的算法，比如說(shuō)它可能會(huì)摻雜一些“熱度、人氣、人為意圖、語(yǔ)義”等因素的權(quán)重，這里不展開(kāi)贅述了。

以上就是筆者對(duì)搜索功能的介紹和思考，希望能對(duì)大家有所幫助。

本文由 @不知名設(shè)計(jì)師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)

經(jīng)過(guò)一個(gè)多月的閉關(guān)潛修，新MMORPG回合制游戲《魔力物語(yǔ)》近期又準(zhǔn)備和大家見(jiàn)面了。至于具體的開(kāi)測(cè)日期，容小編先賣(mài)個(gè)關(guān)子（PS：我絕對(duì)不會(huì)說(shuō)其實(shí)我也不知道）。在上次結(jié)束之后，我們針對(duì)測(cè)試出現(xiàn)的問(wèn)題進(jìn)行修復(fù)并優(yōu)化游戲。在一個(gè)多月的優(yōu)化中，游戲?qū)?huì)脫胎換骨，以更完善的姿態(tài)和大家見(jiàn)面。下面就讓大家看下游戲UI界面優(yōu)化的成果。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

本文聚焦 Airbnb 產(chǎn)品，描述10大可用性原則的應(yīng)用場(chǎng)景，希望能夠幫助你更系統(tǒng)地理解10大可用性原則。

一、系統(tǒng)狀態(tài)的可見(jiàn)性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系統(tǒng)應(yīng)該在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答仯冀K讓用戶了解正在發(fā)生的事情。

這項(xiàng)原則通常被遵循并使用在如下幾個(gè)場(chǎng)景：

• 系統(tǒng)導(dǎo)航、Toast。讓用戶明確知道「我在哪」；
• 按鈕、圖片等元素可被交互的表達(dá)與反饋。通過(guò)視覺(jué)、與空間上的反饋，向用戶傳達(dá)頁(yè)面元素是可以被交互的，引導(dǎo)用戶前往下一站；
• 用戶完成交互動(dòng)作和系統(tǒng)操作后，系統(tǒng)需要給予用戶對(duì)應(yīng)的反饋。比如操作成功、完成注冊(cè)等；

Airbnb 的房源詳情頁(yè)頂部導(dǎo)航，可以通過(guò)點(diǎn)擊快速定位到房源的某類信息，讓用戶清晰地知道「我在哪？我還能去哪？」

在發(fā)布房源時(shí)，系統(tǒng)頂部模擬了進(jìn)度條，顯示出了當(dāng)前步驟，以及當(dāng)前的發(fā)布進(jìn)度。

二、貼近用戶的真實(shí)環(huán)境

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson

系統(tǒng)應(yīng)該說(shuō)用戶的語(yǔ)言，用戶熟悉的單詞，短語(yǔ)和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)。

這項(xiàng)原則說(shuō)的直白一些，就是：「說(shuō)人話」。

產(chǎn)品簡(jiǎn)單到傻瓜也能操作，是喬布斯和張小龍做產(chǎn)品的核心理念。坐擁10億用戶的微信之父張小龍說(shuō)過(guò)，做產(chǎn)品要有傻瓜心態(tài)。不要炫耀自己的智商，不要讓用戶覺(jué)得自己是白癡，請(qǐng)用最簡(jiǎn)單直白的語(yǔ)言描述狀況；就好比自然世界里，你和他人說(shuō)話的時(shí)候必然使用簡(jiǎn)單的白話文進(jìn)行直白的溝通以保證交流順暢。

在房源的詳情頁(yè)、Airbnb PLUS 介紹頁(yè)，系統(tǒng)用了大量高質(zhì)量的攝影圖片傳達(dá)一種空間氛圍感。同時(shí)，在介紹文案的措辭方面，簡(jiǎn)潔易懂，語(yǔ)言邏輯清晰。

三、用戶有控制和來(lái)去自由的權(quán)利

User control and freedom

Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson

用戶通常會(huì)錯(cuò)誤地選擇了系統(tǒng)的某個(gè)功能，并且需要一個(gè)明確標(biāo)記的」緊急出口「來(lái)離開(kāi)不想要的狀態(tài)，而不必進(jìn)行擴(kuò)展對(duì)話。支持撤消和重做。

用戶擁有自由使用和控制系統(tǒng)的權(quán)利，最為常見(jiàn)的就是系統(tǒng)會(huì)為用戶提供「撤銷(xiāo)、重做、返回」的入口。

在故事專欄，當(dāng)用戶在瀏覽器當(dāng)前標(biāo)簽頁(yè)進(jìn)入下一級(jí)頁(yè)面時(shí)，系統(tǒng)都為用戶提供了返回按鈕，一方面方便用戶來(lái)去自由，另一方營(yíng)造出了一定的沉浸式瀏覽體驗(yàn)。

四、系統(tǒng)的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用戶不應(yīng)該懷疑不同的話語(yǔ)、情況或行為是否在表達(dá)同樣的一件事情。系統(tǒng)設(shè)計(jì)需遵循平臺(tái)慣例。

• 移動(dòng)端 APP 內(nèi)的返回按鈕位置通常會(huì)被放在左上角，當(dāng)然有些 APP 會(huì)將返回按鈕統(tǒng)一放在左下角，雖然返回按鈕的位置不同于大多數(shù) APP，但對(duì)于此 APP 的返回交互來(lái)說(shuō)，其實(shí)還是一致的；
• 除常用按鈕位置需要符合一致性原則外，icon 的視覺(jué)設(shè)計(jì)也要遵循一致性原則，一個(gè)對(duì)象對(duì)應(yīng)一個(gè) icon.

在房源、故事集列表頁(yè)，系統(tǒng)統(tǒng)一用了卡片式的視覺(jué)風(fēng)格，并且每個(gè)卡片里的文字與背景圖片的層次也都保持一致。

在房源詳情頁(yè)，系統(tǒng)使用了統(tǒng)一的 iocn 風(fēng)格和文字風(fēng)格，傳達(dá)房源的設(shè)施屬性。

五、防止錯(cuò)誤

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson

比良好的錯(cuò)誤提示信息更好的方法是：一個(gè)走心的設(shè)計(jì)可以提前防止錯(cuò)誤的發(fā)生。系統(tǒng)要么消除容易出錯(cuò)的情況，要么檢查它們，并在用戶采取行動(dòng)之前向用戶提供確認(rèn)選項(xiàng)。

• 比如某些操作不能進(jìn)行，那就置灰或隱藏，不要在用戶點(diǎn)擊后才提醒不能操作。如果有某些內(nèi)容不能選擇，就置灰或者隱藏，不要等用戶點(diǎn)擊完成時(shí)才告知不能使用；
• 同樣，在用戶容易出現(xiàn)錯(cuò)誤操作的場(chǎng)景下，需要給出二次確認(rèn)，如：刪除和取消重要信息的操作。

如果房源在某天或多天已被預(yù)定或暫時(shí)不開(kāi)放，則日歷里將這些不可預(yù)定的日期置灰。

用戶在修改個(gè)人重要信息后，系統(tǒng)會(huì)讓用戶輸入密碼二次確認(rèn)。

六、系統(tǒng)識(shí)別勝過(guò)用戶記憶

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson

通過(guò)使用對(duì)象，動(dòng)作和選項(xiàng)的可視化表達(dá)，最大限度地減輕用戶的記憶負(fù)擔(dān)。用戶不應(yīng)該記住從對(duì)話的一部分到另一部分的信息。

• 為用戶保留查看和搜索歷史是一個(gè)很常見(jiàn)的系統(tǒng)識(shí)別的例子；
• 用戶在填寫(xiě)一個(gè)長(zhǎng)頁(yè)面表單時(shí)，系統(tǒng)可以根據(jù)實(shí)際情況提供一個(gè)實(shí)時(shí)預(yù)覽的功能，避免出現(xiàn)用戶填了下面忘了上面的情況；
• 用戶在填寫(xiě)完表單（比如訂單頁(yè)面）后，系統(tǒng)可以再次向用戶展示所填信息，以最終確認(rèn)；
• 用戶為了完成一項(xiàng)目標(biāo)任務(wù)，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面后，系統(tǒng)可以再次展示上一個(gè)頁(yè)面內(nèi)與目標(biāo)任務(wù)相關(guān)的核心信息，以減輕用戶的記憶負(fù)擔(dān)。

系統(tǒng)會(huì)在首頁(yè)第一屏為用戶展示瀏覽歷史（登錄后）。

搜索框也會(huì)保留最近5次的搜索歷史。

七、靈活易用的使用體驗(yàn)

Flexibility and efficiency of use

Accelerators?—?unseen by the novice user?—?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson

一些被精心設(shè)計(jì)的體驗(yàn)也許會(huì)被專家用戶察覺(jué)到，使系統(tǒng)需要能夠滿足無(wú)經(jīng)驗(yàn)和有經(jīng)驗(yàn)的用戶。允許用戶進(jìn)行頻繁的操作。

當(dāng)用戶在滾動(dòng)屏幕瀏覽房源詳細(xì)信息時(shí)，系統(tǒng)將預(yù)定的基本信息（如：價(jià)格、日期、人數(shù)等）固定在瀏覽器的右側(cè)，方便用戶在瀏覽過(guò)程中隨時(shí)開(kāi)始預(yù)定步驟。

八、美觀和簡(jiǎn)約的設(shè)計(jì)

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson

對(duì)話中不應(yīng)該包含無(wú)關(guān)緊要或很少需要的信息。在對(duì)話中每增加一個(gè)相對(duì)重要的信息，就意味著需要弱化其他信息。

高顏值不需要理由。

九、幫助用戶識(shí)別，診斷，并從錯(cuò)誤中恢復(fù)

Help users recognize, diagnose,and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson

錯(cuò)誤信息應(yīng)該用通俗易懂的語(yǔ)言表達(dá)（不要用代碼），較準(zhǔn)確的反應(yīng)問(wèn)題，并且提出解決方案。

實(shí)在無(wú)法避免的報(bào)錯(cuò)時(shí)，不要單純只是報(bào)錯(cuò)，要提供解決方案。就好比小時(shí)候犯錯(cuò)，你絕不能光說(shuō)：「啊，我錯(cuò)了?！估蠋熁蚣议L(zhǎng)必然會(huì)追問(wèn)：「錯(cuò)哪兒啦？」你要是說(shuō)不出緣由，則必定被認(rèn)為認(rèn)錯(cuò)不誠(chéng)懇不真心。

當(dāng)用戶填寫(xiě)錯(cuò)誤時(shí)，系統(tǒng)會(huì)及時(shí)給出提示以及解決方法。

十、幫助文檔

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson

如果系統(tǒng)能讓用戶不需要閱讀文檔就會(huì)使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專注于用戶的目標(biāo)任務(wù)，并列出具體的步驟來(lái)告知用戶。

• 對(duì)于一些可以用一句話說(shuō)清楚的幫助，可以直接在對(duì)象旁邊提供鼠標(biāo)懸停出發(fā)的 tips，或者簡(jiǎn)明的輔助說(shuō)明；
• 對(duì)于較復(fù)雜的，一兩句話說(shuō)不清楚的幫助，則需要跳轉(zhuǎn)至對(duì)應(yīng)的幫助頁(yè)面；
• 系統(tǒng)需要有一個(gè)幫助中心，為用戶提供模糊搜索、分類搜索，來(lái)為用戶提供更全面的幫助。

在個(gè)人資料頁(yè)面，對(duì)于用戶關(guān)心的隱私信息，系統(tǒng)會(huì)給出非常有親和力的解釋文案。此外，在系統(tǒng)很多頁(yè)面都有對(duì)應(yīng)功能的幫助鏈接以跳轉(zhuǎn)至幫助中心。

系統(tǒng)的幫助中心，提供了搜索和問(wèn)題分類引導(dǎo)，方便用戶快速定位問(wèn)題。

△ 本文圖片版權(quán)歸 Airbnb 所有

總結(jié)

號(hào)稱以設(shè)計(jì)驅(qū)動(dòng)的 Airbnb 公司，的確在產(chǎn)品設(shè)計(jì)、用戶研究、UX設(shè)計(jì)方面展現(xiàn)出了較高的功力。網(wǎng)站甚至移動(dòng)端APP 的框架層、范圍層、視覺(jué)層的設(shè)計(jì)都體現(xiàn)出了高度的用戶體驗(yàn)一致性和品牌感?？梢钥闯?，Airbnb 對(duì) design system 的重視一級(jí)高度的執(zhí)行力。什么是好的產(chǎn)品品牌認(rèn)知和識(shí)別，我可以簡(jiǎn)單的理解為：「脫掉」Logo，用戶照樣認(rèn)識(shí)你。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)

我們不會(huì)放過(guò)一套好的ui素材，一定會(huì)把他們分享出來(lái)，而今天分享的就是由云瑞整理的2017年11月新出爐的ui套裝源文件下載，這些套裝都是極簡(jiǎn)主義和扁平化風(fēng)格的，都是當(dāng)下最流行的，包含web和手機(jī)app界面ui，希望對(duì)您有用

UI空狀態(tài)404錯(cuò)誤頁(yè)可以幫助網(wǎng)站避免丟失用戶的信任，并正確引導(dǎo)用戶返回其它頁(yè)面，減少客戶的流失量。404頁(yè)面的設(shè)計(jì)也是提高用戶體驗(yàn)的一種表現(xiàn)形式。下面我們以去哪網(wǎng)404頁(yè)面為例來(lái)為大家具體講解一下404的構(gòu)成。

男生運(yùn)動(dòng)鞋商店支付界面，顏色搭配非常舒服，鞋子攝影也很漂亮，字體字號(hào)運(yùn)用非常到位。

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

項(xiàng)目背景：為了配合世界杯做的H5活動(dòng)，主題是DIY你的世界杯時(shí)刻                                      

玩法：選擇自己看世界杯的場(chǎng)景，可以在畫(huà)面當(dāng)中添加食物和自定義的小元素，另外根據(jù)場(chǎng)景的變換人物的腿也可以選擇哦                                                 

項(xiàng)目周期大概半個(gè)月，和團(tuán)隊(duì)的小伙伴一起完成的，感謝@珊，@暖暖，@明明   

使用工具包括sketch、ps、手繪板                                                                    

ps：做H5真的是很累，工作量大，畫(huà)的手疼，不過(guò)也積累了很多的經(jīng)驗(yàn)，上線了好開(kāi)心!

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)

2018年UI設(shè)計(jì)趨勢(shì)概覽

嗨兔科技 2018-06-11 10:41:59

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

互聯(lián)網(wǎng)產(chǎn)品的用戶界面設(shè)計(jì)趨勢(shì)是根據(jù)用戶的不同需求而不斷變化的。在仔細(xì)分析了過(guò)去幾年用戶界面設(shè)計(jì)的趨勢(shì)和創(chuàng)新之后，我們可以發(fā)現(xiàn)其背后的一些規(guī)律，2018年UI界面設(shè)計(jì)的趨勢(shì)如下。

漸變色

在過(guò)去的幾年里，越來(lái)越多的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)采用了色彩漸變的方法，今年的流體漸變更是風(fēng)靡全球。即使你只選擇了一種顏色，也可以在色彩漸變和不同圖片的幫助下，營(yíng)造出出豐富的層次結(jié)構(gòu)感，繪制出一幅令人賞心悅目的畫(huà)面。因此，色彩漸變的流行之風(fēng)不僅在席卷了2017年整年，還將會(huì)在2018年繼續(xù)流行下去。

icon由線轉(zhuǎn)面、刻畫(huà)細(xì)節(jié)

現(xiàn)在的ios12中，采用了面性圖標(biāo)，未選中和選中狀態(tài)只有顏色上的區(qū)分，并且圖標(biāo)更加圓潤(rùn)。目前很多用戶界面已經(jīng)給頁(yè)面底部標(biāo)簽欄的icon加上微動(dòng)效底部標(biāo)簽欄icon不僅有微動(dòng)效，十分有意思，符合當(dāng)下95后00后的用戶心態(tài)。同時(shí)細(xì)節(jié)的設(shè)計(jì)帶給用戶的感受也會(huì)上一個(gè)檔次。

透明度+重疊

字體、圖形以及顏色的重疊，不僅可以使界面看上去更加醒目鮮明，還可以營(yíng)造出一種空間感。 相同元素的重疊，再輔以陰影，也會(huì)使整個(gè)APP界面的設(shè)計(jì)產(chǎn)生更多的奇妙感，牢牢抓住用戶眼球，給他們留下深刻印象。因此，用戶體驗(yàn)設(shè)計(jì)中，不同元素的重疊將會(huì)成為2018年的趨勢(shì)。

卡片+投影相結(jié)合

ios12中采用了大圓角卡片設(shè)計(jì)，它不再像過(guò)去MD中的小圓角那樣呆板，大圓角讓設(shè)計(jì)更加輕快大氣。相信大家已經(jīng)看到了很多卡片都使用了投影這一手法，輕微的、似有似無(wú)的投影，不會(huì)被用戶立即察覺(jué)，但是會(huì)給設(shè)計(jì)增加深度，形成層疊的關(guān)系，更加醒目，可以更好的抓住用戶的注意力。

插畫(huà)風(fēng)格

插畫(huà)風(fēng)格運(yùn)用的越來(lái)越廣泛，適用于app當(dāng)中的啟動(dòng)頁(yè)、缺省頁(yè)、banner圖、專題頭圖、彈窗插畫(huà)、icon等等，UI界面有各式各樣的插畫(huà)風(fēng)格——如手繪風(fēng)格、簡(jiǎn)約風(fēng)格、MBE風(fēng)格、剪紙風(fēng)格和孟菲斯風(fēng)格等。這些插畫(huà)風(fēng)格的使用不僅使APP更加有趣和與眾不同，同時(shí)也賦予了用戶界面?zhèn)€性，這就在界面設(shè)計(jì)層出不窮的當(dāng)下能夠給用戶留下更為深刻的印象。

較強(qiáng)的顏色或字體大小對(duì)比

強(qiáng)烈的顏色或字體對(duì)比也可以幫助設(shè)計(jì)師設(shè)計(jì)出優(yōu)秀的用戶界面來(lái)吸引用戶的注意。例如，添加不同樣式、類型、大小的字體，也可以傳遞層次和空間的感覺(jué)。而不同類型和風(fēng)格的配色也會(huì)形成鮮明的對(duì)比，使整個(gè)設(shè)計(jì)更加豐富多彩和引人注目。

3D效果正流行

今年C4D大熱，相信大家已經(jīng)感受到了，今年雙十一很多商家都使用了3D效果，有的還加上了動(dòng)效，可以讓你全方位、多角度、更加真實(shí)的觀察商品。目前還不會(huì)C4D的設(shè)計(jì)師們，為了提升你的競(jìng)爭(zhēng)力，有必要學(xué)起來(lái)了，畢竟技多不壓身。

交互動(dòng)效

給APP的圖標(biāo)、字體、照片和按鈕添加動(dòng)畫(huà)或交互總是對(duì)用戶有著積極的影響，因?yàn)樗軒в脩舾嘤淇斓捏w驗(yàn)。它的幾點(diǎn)特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺(jué)效果。所以這一趨勢(shì)在2018年還將繼續(xù)流行下去。

動(dòng)態(tài)視頻

一般小視頻使用在啟動(dòng)頁(yè)多用于第一次打開(kāi)app的場(chǎng)景，對(duì)用戶的代入感較強(qiáng)再如由動(dòng)態(tài)圖片轉(zhuǎn)變成動(dòng)態(tài)視頻，圖片中有少量的動(dòng)態(tài)元素，仿佛賦予圖片生命，比較唯美和貼近現(xiàn)實(shí)。手機(jī)banner設(shè)計(jì)上也會(huì)采用動(dòng)態(tài)視頻進(jìn)行展現(xiàn)，方便360度的查看商品，刺激你剁手的欲望。

VR/AR/VUI是未來(lái)的大趨勢(shì)

眾所周知，現(xiàn)在VR（虛擬現(xiàn)實(shí)）和AR（增強(qiáng)現(xiàn)實(shí)）VUI（語(yǔ)音交互設(shè)計(jì)）大火，它們的核心都是計(jì)算機(jī)視覺(jué)和聽(tīng)覺(jué)。VR目前在娛樂(lè)領(lǐng)域被使用，而AR將會(huì)真正影響我們的工作和生活，多用于多媒體、市場(chǎng)營(yíng)銷(xiāo)、教育等方面。VUI在醫(yī)療和戶外活動(dòng)方面會(huì)發(fā)揮出前所未有的用戶超級(jí)體驗(yàn)。

---

我們?yōu)閯?chuàng)造者和變革者而生，我們幫助企業(yè)制定用戶體驗(yàn)策略，為用戶創(chuàng)造精彩的數(shù)字體驗(yàn)，并通過(guò)品牌設(shè)計(jì)與用戶建立情感的連接，用設(shè)計(jì)驅(qū)動(dòng)商業(yè)策略的成功。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(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ù)