安卓手機發(fā)展到現(xiàn)在，除了硬件方面受到大家關(guān)注之外，很多消費者在選擇手機的時候，都會注重這款手機搭載的系統(tǒng)，也就是手機UI。就目前的情況來看，很多廠商的產(chǎn)品都有自己的特定UI，這些UI都是基于安卓系統(tǒng)深度打造的產(chǎn)品。

色彩跳躍、文字流暢、精美的設(shè)計，會不會讓你有一種愛不釋手的感覺呢？即使你對其中的文字內(nèi)容并沒有什么興趣，有些精致的廣告也能吸引住你，這就是平面設(shè)計的魅力！它能把一種概念，一種思想通過精美的構(gòu)圖、版式和色彩，傳達給看到它的人。

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

一、設(shè)計中的重復(fù)是什么？

在平面設(shè)計中，重復(fù)構(gòu)成是常用的一種構(gòu)成方法，通過重復(fù)可以使畫面達到和諧、統(tǒng)一的視覺效果，并能加強給人的印象，也可以達到一種有規(guī)律的節(jié)奏感和形式美感。

排版的四大原則：對比、對齊、親密性、重復(fù)，重復(fù)在排版中也占據(jù)了一席之地，可見它在設(shè)計中分量是不可小覷的。

格式塔原理：接近性、相似性、連續(xù)性、封閉性、對稱性、主體/背景、共同運動，格式塔原理中的對稱性就是重復(fù)的一種表現(xiàn)方式；格式塔原理中的相似性算是重復(fù)中自帶的一種突變。

1. 重復(fù)

重復(fù)是設(shè)計中最基本的形式。在同一設(shè)計中，相同的形象出現(xiàn)過兩次或兩次以上就形成了重復(fù)。

在產(chǎn)品設(shè)計中重復(fù)的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復(fù)的元素有位移（方向）、旋轉(zhuǎn)、縮放、不透明度、相同屬性交互要一致。

在產(chǎn)品設(shè)計的前期設(shè)計師需要輸出界面設(shè)計，為了方便下游前端工程師更好的規(guī)范和適配，也要保證產(chǎn)品后期上線產(chǎn)品視覺稿的高度還原，這就要求設(shè)計師輸出一整套產(chǎn)品的視覺和交互規(guī)范。

重復(fù)配色

在 app store 的頁面中使用了相同的顏色進行提醒，方便用戶快速查找和點擊，整體的藍色又給人理性的感覺，看到付費app 的好評數(shù)可以看出是因為產(chǎn)品好才推薦你進行理性消費。

重復(fù)大小

INS 主頁第一排頭像相同大小進行重復(fù)排列，與內(nèi)容的人物頭像有大小對比之分；INS 搜索頁采用了九宮格布局，為了重復(fù)中有變化它把右邊的四個方格合并成一個內(nèi)容展示區(qū)域，推薦好的熱門視頻。

重復(fù)間距

Airbnb 界面中的間距非常規(guī)范，首頁大體采用了谷歌里面的8px 原則，每個間距之間的規(guī)范很多1:2的比例關(guān)系。好的比例規(guī)范會給界面帶來簡潔大氣的感覺。

重復(fù)組件

（如圖標(biāo)注）INS 界面中用了統(tǒng)一組件，相同的圓角和高度規(guī)范又給畫面增加了統(tǒng)一性和連貫性。

2. 突變

在相同的形象重復(fù)出現(xiàn)時，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時我們稱之為突變。

格式塔原理中的相似性也是重復(fù)中突變的一種形式。

在產(chǎn)品設(shè)計中我們運用的突變的目的很簡單就是為了讓其更加突出，多用于區(qū)分當(dāng)前狀態(tài)、選中狀態(tài)和默認(rèn)狀態(tài)。

banner輪播

banner輪播圖上面的提示狀態(tài)會根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進行區(qū)分，把當(dāng)前狀態(tài)進行變化從而進行凸顯出來。

導(dǎo)航欄分類

導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認(rèn)狀態(tài)進行區(qū)分，把當(dāng)前狀態(tài)進行變化從而進行凸顯出來。

按鈕

在登錄注冊頁面中，我們會通過大的色塊凸顯登錄按鈕，引導(dǎo)用戶快速登錄進入到 app 里面。也減少了用戶的思考過程，符合大腦的惰性。

但是在很多 windows系統(tǒng)中，卸載軟件時會跟你玩文字游戲，會用非、否、不是等誘導(dǎo)你作出錯誤的判斷。

feed流

feed流是產(chǎn)品中持續(xù)更新并呈現(xiàn)給用戶內(nèi)容的信息流。feed流在產(chǎn)品展現(xiàn)形式有列表、瀑布流、卡片形式。

站酷首頁 feed流里面會把內(nèi)容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點是推作品，當(dāng)文章出現(xiàn)時通過改變文章的排版進行區(qū)分，重復(fù)里面又帶有變化。

3. 節(jié)奏感

多少元素排列可以形成節(jié)奏感，一般來說是3個或3個以上，兩個你不能說是節(jié)奏感只能說它是重復(fù)。當(dāng)3個或3個以上整齊的排列就會形成一種節(jié)奏感。

左右滑動

（如圖來自uistar）界面中三個書籍整齊的排列在一起，可以通過左右滑動來獲取更多的書籍。在使用左右滑動效果時，應(yīng)考慮元素的數(shù)量，盡量不要超過10個以上。

列表頁

（如圖來自uistar）列表頁面整齊的排列在一起有一定的節(jié)奏感，通過改變 icon 的配色來豐富畫面。

4. 韻律

元素在排列的過程中有形狀、顏色、大小、不透明度等有規(guī)律的變化就形成了一種韻律感。在動效上主要還是通過位移、放大縮小、旋轉(zhuǎn)、不透明等變化來制作界面動畫。

最美有物

最美有物app 的畫報界面中，通過改變每個界面的大小比例有序的排列在一起，通過上下滑動可以快速瀏覽標(biāo)題，進行查找翻閱，整個過程很流暢，整個界面有流動性和韻律感。

圖表

圖表在設(shè)計的時候通過不同顏色來區(qū)分不同的時間段，線條錯落有致的排列增加了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個作品都是通過色彩按照紅橙黃綠青藍紫規(guī)律運用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。

重復(fù)在動效中如何運用才會有韻律感？

界面動效中主要分成當(dāng)前狀態(tài)動效變化和轉(zhuǎn)場動效變化，界面中的元素a1對b1、a2對b2、a3對b3信息對等，能幫助界面做出很有韻律感的動效。

二、總結(jié)

重復(fù)可以使畫面秩序化、整齊化，形成和諧、富有節(jié)奏感的視覺效果，更加有利于人們加強對畫面的記憶。

重復(fù)、突變、節(jié)奏感、韻律幾種不同的方式都是存在于產(chǎn)品當(dāng)中的，幾種不同的美感可以同時存在的，只不過它適應(yīng)不同人群的審美能力，審美能力高一點的更喜歡一些變化，審美能力相對基礎(chǔ)更喜歡簡單的重復(fù)。

所以畫面中不斷出現(xiàn)同樣的元素這叫重復(fù)，而在很多重復(fù)里面突然出現(xiàn)一個變化這叫突變，相同元素整齊的排列在一起這叫節(jié)奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。

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

2018年Behance 上最值得關(guān)注的20個設(shè)計趨勢...

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

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

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

移動端搜索功能設(shè)計：3個階段解析搜索流程設(shè)計要點

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

移動端搜索功能設(shè)計：3個階段解析搜索流程設(shè)計要點

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

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

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

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

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

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

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

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

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

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

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

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

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

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

方式四：通過點擊icon觸發(fā)搜索

如下圖是淘票票的搜索的入口，通過點擊右上角的搜索icon進入搜索頁面：

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

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

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

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

1. 輸入框提示信息

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

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

2. 搜索分類

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

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

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

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

3.搜索歷史

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

4. 搜索推薦

這里的搜索推薦通常有三種來源：

1. 按照用戶的搜索熱度進行推薦；
2. 運營手動配置；
3. 按照搜索行為進行計算和推薦;

它存在的目的主要有兩個：

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

建議：

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

5. 搜索輸入

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

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

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

6.搜索建議

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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)該在合理的時間內(nèi)通過適當(dāng)?shù)姆答?，始終讓用戶了解正在發(fā)生的事情。

這項原則通常被遵循并使用在如下幾個場景：

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

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

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

二、貼近用戶的真實環(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)該說用戶的語言，用戶熟悉的單詞，短語和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實世界的約定，使信息以自然和合乎邏輯的順序出現(xiàn)。

這項原則說的直白一些，就是：「說人話」。

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

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

三、用戶有控制和來去自由的權(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

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

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

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

四、系統(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)該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統(tǒng)設(shè)計需遵循平臺慣例。

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

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

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

五、防止錯誤

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

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

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

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

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

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

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

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

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

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

搜索框也會保留最近5次的搜索歷史。

七、靈活易用的使用體驗

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è)計的體驗也許會被專家用戶察覺到，使系統(tǒng)需要能夠滿足無經(jīng)驗和有經(jīng)驗的用戶。允許用戶進行頻繁的操作。

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

八、美觀和簡約的設(shè)計

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

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

高顏值不需要理由。

九、幫助用戶識別，診斷，并從錯誤中恢復(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

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

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

當(dāng)用戶填寫錯誤時，系統(tǒng)會及時給出提示以及解決方法。

十、幫助文檔

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)能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應(yīng)該容易被搜索，且專注于用戶的目標(biāo)任務(wù)，并列出具體的步驟來告知用戶。

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

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

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

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

總結(jié)

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

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

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

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