首頁(yè)

重復(fù)與突變?cè)诋a(chǎn)品設(shè)計(jì)中的應(yīng)用

資深UI設(shè)計(jì)者

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

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

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

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

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

格式塔原理:接近性、相似性、連續(xù)性、封閉性、對(duì)稱(chēng)性、主體/背景、共同運(yùn)動(dòng),格式塔原理中的對(duì)稱(chēng)性就是重復(fù)的一種表現(xiàn)方式;格式塔原理中的相似性算是重復(fù)中自帶的一種突變。

1. 重復(fù)

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

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

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

重復(fù)配色

在 app store 的頁(yè)面中使用了相同的顏色進(jìn)行提醒,方便用戶快速查找和點(diǎn)擊,整體的藍(lán)色又給人理性的感覺(jué),看到付費(fèi)app 的好評(píng)數(shù)可以看出是因?yàn)楫a(chǎn)品好才推薦你進(jìn)行理性消費(fèi)。

重復(fù)大小

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

重復(fù)間距

Airbnb 界面中的間距非常規(guī)范,首頁(yè)大體采用了谷歌里面的8px 原則,每個(gè)間距之間的規(guī)范很多1:2的比例關(guān)系。好的比例規(guī)范會(huì)給界面帶來(lái)簡(jiǎn)潔大氣的感覺(jué)。

重復(fù)組件

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

2. 突變

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

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

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

banner輪播

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

導(dǎo)航欄分類(lèi)

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

按鈕

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

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

feed流

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

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

3. 節(jié)奏感

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

左右滑動(dòng)

(如圖來(lái)自u(píng)istar)界面中三個(gè)書(shū)籍整齊的排列在一起,可以通過(guò)左右滑動(dòng)來(lái)獲取更多的書(shū)籍。在使用左右滑動(dòng)效果時(shí),應(yīng)考慮元素的數(shù)量,盡量不要超過(guò)10個(gè)以上。

列表頁(yè)

(如圖來(lái)自u(píng)istar)列表頁(yè)面整齊的排列在一起有一定的節(jié)奏感,通過(guò)改變 icon 的配色來(lái)豐富畫(huà)面。

4. 韻律

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

最美有物

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

圖表

圖表在設(shè)計(jì)的時(shí)候通過(guò)不同顏色來(lái)區(qū)分不同的時(shí)間段,線條錯(cuò)落有致的排列增加了界面的韻律感。

配色

△ 來(lái)自Prakhar Neel Sharma和crisssamson

這兩個(gè)作品都是通過(guò)色彩按照紅橙黃綠青藍(lán)紫規(guī)律運(yùn)用到界面中的背景和列表中,增加了畫(huà)面的豐富感和韻律感。

重復(fù)在動(dòng)效中如何運(yùn)用才會(huì)有韻律感?

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

二、總結(jié)

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

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

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

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(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ù)。

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

博博

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


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


對(duì)于2018年的設(shè)計(jì)趨勢(shì),眾說(shuō)紛紜。作為大型設(shè)計(jì)社區(qū)的behance終于按耐不住,多名設(shè)計(jì)師預(yù)測(cè)了2018年20大設(shè)計(jì)趨勢(shì),下面就和興元君一起看看到底是哪些吧!

1 未來(lái)感

無(wú)論何時(shí),我們都對(duì)未來(lái)充滿了幻想與期待。更先進(jìn)的顯示技術(shù)、更的出行方式,那些若夢(mèng)幻離的景象總是令人興奮,未來(lái)感的塑造總會(huì)喚起人們心中對(duì)科技的無(wú)盡渴望。

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

2 簡(jiǎn)約舒適

少即是多,這是亙古不變的真理。簡(jiǎn)約意味著簡(jiǎn)潔,以簡(jiǎn)約主義的白色為主,優(yōu)化功能,強(qiáng)調(diào)空間感。

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

3 深度感

為傳統(tǒng)的平面元素增添厚度,是 2018 年的設(shè)計(jì)大勢(shì)。一點(diǎn)陰影,賦予了元素另一個(gè)維度,為交互體驗(yàn)打開(kāi)了一扇窗。空間造就了深度,深度成就了空間。

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

4 響應(yīng)式圖標(biāo)

在未來(lái),越來(lái)越多的面向移動(dòng)體驗(yàn),而日漸修長(zhǎng)的屏幕讓縱橫之別不容忽視。無(wú)論哪種情況,圖標(biāo)都必須適應(yīng)新的環(huán)境。因此,響應(yīng)式圖標(biāo)設(shè)計(jì)對(duì)設(shè)計(jì)師而言至關(guān)重要。

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

5 插畫(huà)設(shè)計(jì)

任時(shí)光奔騰如梭,但歷史總是驚人相似。太長(zhǎng)時(shí)間的同質(zhì)化,讓突出個(gè)性的呼聲愈喊愈震。這些年尚未發(fā)力的插畫(huà),在今年一定會(huì)得到大家的關(guān)注。

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

6 動(dòng)效設(shè)計(jì)

雨木林風(fēng),荷伴漣漪。我們無(wú)時(shí)無(wú)刻都在被運(yùn)動(dòng)吸引,技術(shù)的不斷革新,為動(dòng)效的使用鋪平了道路,越來(lái)越多的產(chǎn)品也隨之使用動(dòng)效。大勢(shì)所趨,永不停息!

7 微交互

上下?lián)軇?dòng),左右平移;點(diǎn)按有悅,長(zhǎng)停則變。 優(yōu)化體驗(yàn),塑造品牌,微交互無(wú)處不在。

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

08 演示動(dòng)效

這種動(dòng)效只供展示,引導(dǎo)用戶使用。特別是在啟動(dòng)頁(yè)、空狀態(tài),演示動(dòng)效能極大的激發(fā)用戶使用興趣,幫助用戶完成特定操作。

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

9 明亮漸變

扁平化大行其道多年,多少讓人有些審美疲勞,漸變得以重新回歸。不同以往的是,鮮艷、明亮、酷炫,是當(dāng)下漸變的特點(diǎn)。

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

10 三維效果

3D 始終是我們不容忽視的力量,蟄伏多年,一直在尋找爆發(fā)的良機(jī)。且在這多年的隱忍中,聚集了越來(lái)越多的力量,讓本就可怕至極的力量變的愈加摧枯拉朽。

2018 年,它不一定會(huì)發(fā)力,可一旦契機(jī)出現(xiàn),就會(huì)勢(shì)不可擋。

11 金屬質(zhì)感

現(xiàn)實(shí)和虛擬的界限愈加模糊,較為容易 “欺騙” 視覺(jué)的金屬質(zhì)感重新博得設(shè)計(jì)師關(guān)注。

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

12 上個(gè)時(shí)代的彩色圖案

也許是懷舊情懷的需要,也許是那年的少年已肩扛重?fù)?dān)。那些年在玩具和衣著上圖案重新煥發(fā)出新的活力。

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

13 傻大粗黑

這一點(diǎn)毋庸置疑,在較長(zhǎng)的一段時(shí)間里它都不會(huì)被取代。更令人欣慰的是,無(wú)襯線字體也開(kāi)始展露頭腳,讓字體的選擇進(jìn)入了一個(gè)新世界。

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

14 字體設(shè)計(jì)

在一切歸于冷靜之后,那些精雕細(xì)琢,能彰顯差異性的東西重回王者之地,字體設(shè)計(jì)也得以榮膺桂冠。

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

15 粒子背景

沉浸體驗(yàn),是所有設(shè)計(jì)師的不懈追求。不喧賓奪主突出主體,不太阿倒持取悅用戶,正是粒子背景的魅力所在。

16 拆分頁(yè)面

一分為二,各司其職;化繁為簡(jiǎn),相輔相成。劃分頁(yè)面空間,重新定義區(qū)域,圖像與文字分離,構(gòu)建信息結(jié)構(gòu)。信息越是爆炸,越需要化繁為簡(jiǎn)

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

17 艷,更艷

從性冷淡到大膽用色,恍然間拋開(kāi)了對(duì)過(guò)度的恐懼。越是過(guò)度,愈是討喜,任何大膽的設(shè)計(jì)都會(huì)被稱(chēng)贊和鼓勵(lì)。

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

18 單色圖標(biāo)

色彩紛呈,漸幻若璃;界面之中,唯我獨(dú)素。色彩艷麗的今天,唯有圖標(biāo)堅(jiān)守其道。不跟風(fēng)任吹,不隨波逐流,這種堅(jiān)持換來(lái)了舒適與愉悅。

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

19 混合圖標(biāo)

線與面合,白與艷合;合則一派,不合則滅。在不同風(fēng)格爭(zhēng)相出現(xiàn)的今天,也是一種不錯(cuò)的嘗試。

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

20 新造型主義

作為新造型主義的奠基人,皮特·蒙德里安曾這樣說(shuō)過(guò):對(duì)自由和平衡(和諧)的渴望是人類(lèi)天性。通過(guò)理想的繪畫(huà)形式將宇宙真理物質(zhì)化、幾何化。

簡(jiǎn)化,井然有序,色面完美。率真的純粹原色相互對(duì)立與平衡,憑借兩種否定,黑與白分割構(gòu)圖。

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

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(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ù)


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

博博

移動(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)

人人都是產(chǎn)品經(jīng)理 2017-01-04 18:08:02


這篇文章筆者想和大家聊一聊有關(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ì)。

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

搜索入口——依據(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)行分析

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

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

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

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

方式二:搜索框外漏在nav bar

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

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

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

搜索框直接外漏在導(dǎo)航條上是為了突顯該功能,這一功能往往是用戶在該頁(yè)面非常核心的操作任務(wù),類(lèi)似天貓京東這類(lèi)電商型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)的。

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

分析:微信在最近聯(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è)面:

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

分析:在界面權(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)容。筆者將從“輸入框提示信息、搜索分類(lè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)行推薦的。如下圖右邊是淘寶的搜索提示,搜索框的文案變成了“紅人最?lèi)?ài)潮牌名服”,這就是運(yùn)營(yíng)人員在為特定內(nèi)容進(jìn)行導(dǎo)流。

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

2. 搜索分類(lèi)

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

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

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

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

網(wǎng)易云音樂(lè)是將搜索分類(lèi)進(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)形式。搜索歷史伴隨的交互操作有刪除單條或者清空搜索歷史

移動(dòng)端搜索功能設(shè)計(jì):3個(gè)階段解析搜索流程設(shè)計(jì)要點(diǎ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)(如下圖)。

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

關(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ì)我的搜索速度有很大的提升。

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

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)行篩選的步驟。

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

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

搜索結(jié)果是搜索過(guò)程中最關(guān)鍵的點(diǎn),結(jié)果的準(zhǔn)確性確定了用戶體驗(yàn)的好壞,筆者將從“搜索結(jié)果的形式、搜索結(jié)果的操作、搜索結(jié)果的分類(lèi)、搜索結(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é)果,如下圖微信的搜索一樣。

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

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

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

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

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

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

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

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

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

這兩種方式有各自的應(yīng)用場(chǎng)景,TAB切主要應(yīng)用在搜索結(jié)果有固定的幾種分類(lèi),并且通常的情況下搜索結(jié)果都有很多的內(nèi)容,如上圖的網(wǎng)易云音樂(lè),每一個(gè)分類(lèi)都有很多的搜索結(jié)果,如果它采用卡片式的瀑布流布局,用戶需要不停往下翻才能看到第二種分類(lèi)的內(nèi)容??ㄆ街饕\(yùn)用在搜索結(jié)果的內(nèi)容不多,如微信這樣的情況,每一類(lèi)結(jié)果并不是很多,卡片式的瀑布流布局能讓用戶快速定位到自己想要的內(nèi)容,如果這里用TAB切就很尷尬了,因?yàn)槊恳活?lèi)的內(nèi)容都很少或者很多類(lè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è)字,這樣以此類(lèi)推。他們的整體順序就是按照匹配關(guān)鍵字的先后進(jìn)行排列的,其實(shí)在排序中還牽涉了很多的算法,比如說(shuō)它可能會(huì)摻雜一些“熱度、人氣、人為意圖、語(yǔ)義”等因素的權(quán)重,這里不展開(kāi)贅述了。

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

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

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



藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(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ù)


《魔力物語(yǔ)》UI界面變革,新舊UI對(duì)比

藍(lán)藍(lán)設(shè)計(jì)的小編

經(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)化的成果。

用Airbnb 的產(chǎn)品,幫你快速理解尼爾森10大可用性原則!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(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)擊快速定位到房源的某類(lèi)信息,讓用戶清晰地知道「我在哪?我還能去哪?」

在發(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)、重做、返回」的入口。

在故事專(zhuān)欄,當(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ì)被專(zhuān)家用戶察覺(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)該容易被搜索,且專(zhuān)注于用戶的目標(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)搜索,來(lái)為用戶提供更全面的幫助。

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

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

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

總結(jié)

號(hào)稱(chēng)以設(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ì)m.sillybuy.com )是一家專(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速遞

藍(lán)藍(lán)設(shè)計(jì)的小編

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

UI空狀態(tài)設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

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)成。

UI設(shè)計(jì)規(guī)范

博博


惹不起的設(shè)計(jì)師 2017-02-20 15:03:14

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


UI設(shè)計(jì)拋開(kāi)視覺(jué)設(shè)計(jì)不談,更多的是尺寸、適配等一些問(wèn)題。這些問(wèn)題往往是初學(xué)者比較難以理解的問(wèn)題。更多的應(yīng)用于簡(jiǎn)化開(kāi)發(fā)過(guò)程、使多個(gè)產(chǎn)品擁有一致的體驗(yàn),是落到實(shí)處的東西。由于負(fù)責(zé)各個(gè)產(chǎn)品線的產(chǎn)品經(jīng)理并非同一人,如果此時(shí)設(shè)計(jì)師們又是滲透到各個(gè)產(chǎn)品組中,那么產(chǎn)品之間的體驗(yàn)就根本讓用戶感覺(jué)不出是一個(gè)部門(mén)設(shè)計(jì)開(kāi)發(fā)出來(lái)的。規(guī)范是大型項(xiàng)目必須的,可以簡(jiǎn)化開(kāi)發(fā)成本、減少各個(gè)部門(mén)之間的溝通成本。

這是你苦苦追尋的UI設(shè)計(jì)規(guī)范,趕快收藏!

這是你苦苦追尋的UI設(shè)計(jì)規(guī)范,趕快收藏!

這是你苦苦追尋的UI設(shè)計(jì)規(guī)范,趕快收藏!

這是你苦苦追尋的UI設(shè)計(jì)規(guī)范,趕快收藏!

這是你苦苦追尋的UI設(shè)計(jì)規(guī)范,趕快收藏!

藍(lán)藍(lán)設(shè)計(jì)m.sillybuy.com )是一家專(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ù)


優(yōu)秀UI界面設(shè)計(jì)評(píng)析

藍(lán)藍(lán)設(shè)計(jì)的小編

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

日歷

鏈接

個(gè)人資料

存檔