據(jù)悉，Magic Leap近日將公布關(guān)于Magic Leap One的2D和3D用戶界面，有關(guān)媒體還在該公司的開發(fā)人員文件中發(fā)現(xiàn)了包括Landscape和Immersive在內(nèi)的應(yīng)用程序。

一看就懂！詳解大廠UI設(shè)計規(guī)范制作步驟

小小設(shè)計控 2018-07-30 09:34:38

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

一、提取設(shè)計原則關(guān)鍵詞

1. 提取一級關(guān)鍵詞

第一步，先要去提取出關(guān)鍵詞，這個關(guān)鍵詞怎么來，有幾種方式獲取，第一個從整個公司戰(zhàn)略出發(fā)，任何一個產(chǎn)品一定有他的戰(zhàn)略，品牌戰(zhàn)略，商業(yè)戰(zhàn)略。舉個例子，假設(shè)我們是 eaby，公司今年戰(zhàn)略是全球化，高品質(zhì)，正品，那么這個就是一級核心關(guān)鍵詞，所有的設(shè)計語言一定要和公司戰(zhàn)略結(jié)合起來，可以理解為戰(zhàn)略關(guān)鍵詞是整個設(shè)計語言頂部金字塔。

二、運用情緒版提取二級關(guān)鍵詞

有了一級關(guān)鍵詞后，需要去思考，那么什么樣的設(shè)計能給人全球化的感受呢，什么樣的感覺能有高品質(zhì)，正品應(yīng)該傳遞什么樣的感覺呢？此刻需要用到第二個方法就是情緒版，通過情緒版去把符合這些關(guān)鍵詞感受的圖形具體化。

三、高品質(zhì)特征是什么？

下圖是一組日本的花茶設(shè)計，那么在這組設(shè)計中，設(shè)計師是如何體現(xiàn)高品質(zhì)呢？

△ 首先包裝很精美耐看，設(shè)計簡約

△ 做工精量，整個產(chǎn)品包裝，都是在富士山腳下

△ 采摘環(huán)境很透明，值得被信任

△ 整個品茶的過程也特別讓人向往，很有儀式感

△ 整個的設(shè)計很完整，很有設(shè)計感在里面

通過以上案例拆解，我們能對這個高品質(zhì)的關(guān)鍵詞有更加進一步的理解，高品質(zhì)原來在情感層面是一個這么抽象的感覺，但是很多同學(xué)會問，那么這二級詞匯也很抽象，如何靠這個來做設(shè)計，很難去理解及表達，別著急，還有下一步。

1. 高品質(zhì)設(shè)計表現(xiàn)形式？

關(guān)于高品質(zhì)在視覺形式上如何來體現(xiàn)了，哪些設(shè)計感覺能代表高品質(zhì)呢，這個時候就需要我們?nèi)ふ乙恍┰O(shè)計參考，這些案例要能代表高品質(zhì)。

△ 清晰的有品質(zhì)的圖片

△ 牛皮癬，不精致不可取

△ 優(yōu)雅的排版和留白，文字清晰，雜志感受

△ 圖文密集，缺少版式不可取

△ 精致的布局，柵格的體系，給人品質(zhì)感

△ 缺乏版式及設(shè)計感

△ 有設(shè)計細節(jié)的

△ 無細節(jié)不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

△ 設(shè)計的延續(xù)性和完整性

2. GOOD CASE

3. BAD CASE

四、設(shè)計分層

以上就是我們從一個戰(zhàn)略關(guān)鍵詞逐步推導(dǎo)到一級關(guān)鍵詞，到二級關(guān)鍵詞，到設(shè)計手法，以及對應(yīng)設(shè)計表達，推導(dǎo)的一個全過程。

• 本能層：清晰的，有設(shè)計感的，做工精致
• 行為層：完善的，值得信任的，用心的
• 精神層：讓人向往的，值得期待的

五、總結(jié)

以上大概為一個設(shè)計關(guān)鍵詞的全部推導(dǎo)過程及到設(shè)計手法的確定，也是設(shè)計語言里面最難的部分，后面的關(guān)鍵詞也是類似的思考方法和思路，最終通過推導(dǎo)我們需要得出每個關(guān)鍵詞的情緒圖，以及對應(yīng)設(shè)計特征，最終需要在界面中展示的形色字構(gòu)質(zhì)，一個完整過程。

比如國際化，同樣通過前面思路，我們需要去思考國際化如何在設(shè)計中體現(xiàn)，去提煉出代表國際化的象征物，如地標(biāo)，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節(jié)日場景。

結(jié)語

希望大家可以通過我這期的分享，能夠詳細理解到如何從公司戰(zhàn)略層提取到核心一級關(guān)鍵詞，到二級關(guān)鍵詞，以及對應(yīng)的設(shè)計手法，對應(yīng)到形色字構(gòu)質(zhì)，大家可以依據(jù)此方法去拿你現(xiàn)在手上的界面去做一次體系化的推導(dǎo)。

最后，依據(jù)推導(dǎo)出來的原則，以及對應(yīng)的設(shè)計手法去做概念，去在界面中運用，最終完成設(shè)計語言第一步，設(shè)計關(guān)鍵詞和設(shè)計手法定義。

圖片素材作者：Tran Mau Tri Tam ?

安卓手機發(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)和默認狀態(tài)。

banner輪播

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

導(dǎo)航欄分類

導(dǎo)航欄分類上面的提示狀態(tài)也是根據(jù)當(dāng)前狀態(tài)和默認狀態(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è)計( m.bouu.cn )是一家專注而深入的界面設(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è)計( m.bouu.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é)果的準確性”?？此坪唵蔚膬牲c卻有很多的學(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下面，默認隱藏或顯示

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

分析：微信在最近聯(liá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使用的熟悉，用戶在這里的認知負擔(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)易云音樂”搜索分類的方式，筆者將分別對他們進行分析。

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

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

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

3.搜索歷史

搜索歷史記住用戶的足跡，方便用戶快速向以前搜索過的內(nèi)容進行轉(zhuǎn)換。設(shè)計上我們需要注意的一點就是需要把搜索歷史和搜索推薦區(qū)分開來，在位置上，盡量讓搜索歷史靠近搜索框（如下圖），因為從認知心理學(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)我輸入畫框后，一系列畫框的搜索建議就出來了，它還有一個亮點就是在此提供了細化篩選條件，畫框后面緊跟了“長方形、實木、正方形”等關(guān)鍵的篩選條件，為用戶省去了到結(jié)果頁進行篩選的步驟。

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

搜索結(jié)果是搜索過程中最關(guān)鍵的點，結(jié)果的準確性確定了用戶體驗的好壞，筆者將從“搜索結(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è)計( m.bouu.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回合制游戲《魔力物語》近期又準備和大家見面了。至于具體的開測日期，容小編先賣個關(guān)子（PS：我絕對不會說其實我也不知道）。在上次結(jié)束之后，我們針對測試出現(xiàn)的問題進行修復(fù)并優(yōu)化游戲。在一個多月的優(yōu)化中，游戲?qū)撎Q骨，以更完善的姿態(tài)和大家見面。下面就讓大家看下游戲UI界面優(yōu)化的成果。