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

藍藍設(shè)計( www.shtzxx.cn )是一家專注而深入的界面設(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.shtzxx.cn )是一家專注而深入的界面設(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ù)姆答仯冀K讓用戶了解正在發(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)問題，并且提出解決方案。

實在無法避免的報錯時，不要單純只是報錯，要提供解決方案。就好比小時候犯錯，你絕不能光說：「啊，我錯了。」老師或家長必然會追問：「錯哪兒啦？」你要是說不出緣由，則必定被認(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)出了高度的用戶體驗一致性和品牌感。可以看出，Airbnb 對 design system 的重視一級高度的執(zhí)行力。什么是好的產(chǎn)品品牌認(rèn)知和識別，我可以簡單的理解為：「脫掉」Logo，用戶照樣認(rèn)識你。

藍藍設(shè)計( www.shtzxx.cn )是一家專注而深入的界面設(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)成。

男生運動鞋商店支付界面，顏色搭配非常舒服，鞋子攝影也很漂亮，字體字號運用非常到位。

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

項目背景：為了配合世界杯做的H5活動，主題是DIY你的世界杯時刻                                      

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

項目周期大概半個月，和團隊的小伙伴一起完成的，感謝@珊，@暖暖，@明明   

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

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

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

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

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

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

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

漸變色

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

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

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

透明度+重疊

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

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

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

插畫風(fēng)格

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

較強的顏色或字體大小對比

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

3D效果正流行

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

交互動效

給APP的圖標(biāo)、字體、照片和按鈕添加動畫或交互總是對用戶有著積極的影響，因為它能帶用戶更多愉快的體驗。它的幾點特性：快速且流暢、恰到好處的反饋、提升操作感受、提供良好的視覺效果。所以這一趨勢在2018年還將繼續(xù)流行下去。

動態(tài)視頻

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

VR/AR/VUI是未來的大趨勢

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

---

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

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