UI走查表有什么用竹捉？

一套成熟的UI走查表芜辕，能更科學(xué)更高效地改稿，減少設(shè)計(jì)中的反復(fù)試錯(cuò)块差，也能讓評(píng)審交付時(shí)更有理有據(jù)侵续。不僅僅停留于看上去順眼、我覺(jué)得挺好憨闰、先這樣的視覺(jué)表層状蜗。更深一層來(lái)說(shuō)，走查表有助于培養(yǎng)設(shè)計(jì)師的結(jié)構(gòu)化思維鹉动，形成一個(gè)完整的設(shè)計(jì)體系轧坎。

如何走查信息層級(jí)

1.頁(yè)面要表達(dá)的意思是否正確

在設(shè)計(jì)頁(yè)面的時(shí)候，需要注意頁(yè)面要傳達(dá)給用戶的重點(diǎn)信息泽示。

例如本次案例的產(chǎn)品需求中眶根，該頁(yè)面的功能是促使用戶快速下單，信息上則要側(cè)重于價(jià)格與優(yōu)惠信息边琉。（如下圖）

首屏信息是給用戶的第一印象属百，在用戶打開(kāi)頁(yè)面，盡可能展現(xiàn)出更多用戶感興趣的內(nèi)容变姨。

而此次頁(yè)面需要突出促銷優(yōu)惠信息族扰，次要信息則放在后面。（如下圖）

2. 頁(yè)面視覺(jué)重點(diǎn)

相信大家平時(shí)經(jīng)常聽(tīng)說(shuō)0.618的黃金比例（斐波那契數(shù)列）定欧。屏幕方寸間合理運(yùn)用黃金比例可以讓界面視覺(jué)重心更加平穩(wěn)渔呵，視覺(jué)更加舒適。

同時(shí)有助于界面區(qū)域分割砍鸠，集中視覺(jué)焦點(diǎn)扩氢，承載更重要的信息，讓整個(gè)界面布局更加合理爷辱。（如下圖）

淘寶录豺、京東到家等成熟的一線產(chǎn)品黃金比例運(yùn)用，在視覺(jué)焦點(diǎn)區(qū)域都向用戶展示了關(guān)鍵信息饭弓。

3. 元素間距符合各層級(jí)的關(guān)系

為什么頁(yè)面會(huì)雜亂無(wú)章双饥？主要是信息一味地堆砌，分布沒(méi)有區(qū)別弟断，但只要遵從以下方法咏花，頁(yè)面就會(huì)清晰很多，有節(jié)奏的呼吸感也出來(lái)了阀趴。

同類的板塊不應(yīng)被混亂的間距區(qū)隔開(kāi)來(lái)昏翰，它們應(yīng)該更集中苍匆，并且整體與別的板塊區(qū)別開(kāi)來(lái)。同理棚菊，不僅僅是板塊锉桑，元素與元素之間也是如此，這樣用戶可以更加快速地看到自己想要的東西窍株。

那么民轴，如何更好地讓信息按照相似屬性合理分布呢？

這就要利用5分球订、等分原則來(lái)讓分布變得更合理后裸，假設(shè)相同板塊的間距值為a px，則不同板塊為2a px冒滩。

這樣不僅在視覺(jué)可以將信息分布開(kāi)來(lái)微驶，還能讓整體的布局更加規(guī)整，不會(huì)凌亂开睡，盡可能使用同一或者同倍數(shù)的間距因苹，更便于開(kāi)發(fā)。

案例中篇恒，相近元素的間距為16px（a px）扶檐，則不同類別的元素為32px（2a px）。

如何進(jìn)行文字規(guī)范走查

1. 字體種類的控制

一個(gè)產(chǎn)品如果字體種類過(guò)多胁艰，會(huì)導(dǎo)致界面的不統(tǒng)一與混亂款筑。

通常字體控制盡量在2-3種以內(nèi)，中文字體腾么、英文字體以及特殊數(shù)字字體奈梳。如下圖：

2. 字號(hào)與粗細(xì)控制

字號(hào)過(guò)多使信息失去重點(diǎn)，基礎(chǔ)字號(hào)控制在3種以內(nèi)解虱，目的在于清晰區(qū)分信息的層級(jí)攘须。

正文字號(hào)建議為28px，副文案為24px殴泰，大標(biāo)題于宙、價(jià)格等重要信息需按實(shí)際情況加大，令信息的層級(jí)區(qū)分更明顯艰匙。

加粗字體往往是整個(gè)界面的視覺(jué)焦點(diǎn)限煞，重點(diǎn)的文本（如標(biāo)題、價(jià)格）需要加粗處理员凝，注意控制字體加粗的使用，以免造成信息層級(jí)的混亂奋献。下圖為調(diào)整字號(hào)及粗細(xì)的前后對(duì)比：

3. 行距控制

行距太小不便于用戶閱讀健霹，太大會(huì)顯得松散旺上，所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調(diào)整行距的前后對(duì)比：

4. 字體顏色

字體主要以黑白灰為主：#333333?#666666?#999999糖埋。

字體顏色深淺有序能讓信息層級(jí)主次分明宣吱，產(chǎn)品應(yīng)該根據(jù)不同模塊以及同一模塊的層級(jí)需要調(diào)整不同的灰度值，并在產(chǎn)品中反復(fù)使用瞳别，統(tǒng)一規(guī)范輸出征候。

信息越重要，字體顏色越深祟敛。除此之外我們還需要注意到什么呢疤坝？

也是很多剛?cè)胄械脑O(shè)計(jì)小伙伴很容易忽略的細(xì)節(jié)，產(chǎn)品的實(shí)際使用環(huán)境馆铁。

比如跑揉，我們此次改版的產(chǎn)品詳情界面就是線上下單，線下提貨的運(yùn)營(yíng)模式埠巨，不僅需要考慮室內(nèi)使用環(huán)境历谍，還需要考慮到特殊的室外強(qiáng)光環(huán)境。結(jié)合下圖感受一下：

如何在強(qiáng)光環(huán)境下保證產(chǎn)品良好的視覺(jué)體驗(yàn)?zāi)乩崩荩窟@也是UI走查表需要注意到的細(xì)節(jié)點(diǎn)：強(qiáng)光測(cè)試（大于4.5:1）望侈。

我們先觀察一組顏色對(duì)比，如下圖：

我們會(huì)發(fā)現(xiàn)字體顏色層級(jí)依然是深黑色勋桶、中黑色甜无、淺黑色，相信很多設(shè)計(jì)師朋友已經(jīng)注意到我們使用的顏色更深了哥遮，為什么呢岂丘？

為了保證在強(qiáng)光環(huán)境下信息的可閱讀性，如下圖：字體信息最淺層級(jí)眠饮，淺黑色的色彩數(shù)值對(duì)比數(shù)值都大于4.5:1奥帘。

△?強(qiáng)光測(cè)試

有細(xì)心的設(shè)計(jì)師朋友或許已經(jīng)注意到色彩值并沒(méi)#333333、#666666仪召、#999999那么便于記憶了寨蹋，為什么呢？

為了提升更好的視覺(jué)感受與界面的品質(zhì)感扔茅，我們?cè)谧煮w顏色中采用了偏藍(lán)灰已旧，大家不防跟我一起觀察下圖，上圖灰色看上去略微有一些臟臟的感覺(jué)召娜，下圖視覺(jué)更耐看运褪、更有質(zhì)感。

騰訊新聞、金色財(cái)經(jīng)App 中也應(yīng)用到了偏藍(lán)灰秸讹，有種撲面而來(lái)的清爽檀咙。

除了常用字體層級(jí)的顏色對(duì)比，在界面中針對(duì)關(guān)鍵的賣點(diǎn)信息還用到強(qiáng)調(diào)色璃诀，即品牌色弧可。

品牌色也會(huì)經(jīng)常運(yùn)用到特殊字體、提示文字劣欢、鏈接等等棕诵。

改版前，促銷信息缺少提示入口凿将。改版后校套，以品牌色作為入口字體顏色，引起用戶注意丸相。（如下圖）

如何通過(guò)設(shè)計(jì)規(guī)范走查圖標(biāo)

1. 視覺(jué)比例

由于圖標(biāo)通常都是成群結(jié)對(duì)的出現(xiàn)搔确，彼此間的統(tǒng)一性顯得非常重要，但是常常容易被忽略灭忠，可以制定如下圖的圖標(biāo)盒子來(lái)規(guī)范尺寸膳算。

2. 圖標(biāo)設(shè)計(jì)要點(diǎn)

設(shè)計(jì)圖標(biāo)時(shí)應(yīng)注意基礎(chǔ)形狀復(fù)用，保持整體識(shí)別性弛作。如下圖重復(fù)使用矩形涕蜂、圓形、橢圓形等基礎(chǔ)形狀進(jìn)行設(shè)計(jì)映琳，既能統(tǒng)一大小又有整體感机隙。

面性圖標(biāo)

設(shè)計(jì)時(shí)需要注意挖空比例的一致性，保持圖標(biāo)的整體性萨西。如價(jià)格走勢(shì)有鹿、降價(jià)通知這一排圖標(biāo)，挖空比例控制在20%谎脯。

線性圖標(biāo)

設(shè)計(jì)時(shí)應(yīng)注意保持統(tǒng)一的線條粗細(xì)葱跋，案例中2px的粗細(xì)線條重復(fù)使用，常用的圖標(biāo)描邊粗細(xì)一般為1.5pt源梭，當(dāng)然需要所有圖標(biāo)的粗細(xì)與文字粗細(xì)一致娱俺，和諧統(tǒng)一。

3. 圖標(biāo)尺寸

在app中废麻，功能圖標(biāo)大致可分成兩種：可以點(diǎn)擊的按鈕荠卷；不可點(diǎn)擊的展示圖標(biāo)。

可以點(diǎn)擊的按鈕常用于導(dǎo)航欄烛愧、tab欄油宜、操作欄（吸底按鈕圖示）掂碱，常用尺寸為：48x48px、64x64px验庙。

如下圖的導(dǎo)航和吸底按鈕都用了48x48px的大小顶吮、已經(jīng)用iOS用44x44px社牲，現(xiàn)在已經(jīng)統(tǒng)一48x48px粪薛。

不可點(diǎn)擊的展示圖標(biāo)常用于信息展示位置（價(jià)格走勢(shì)/規(guī)格/評(píng)論等圖示）常用尺寸為：24x24px 32x32px。

如下圖搏恤，評(píng)論模塊中的展示圖標(biāo)使用24x24px违寿，價(jià)格走勢(shì)則使用了32x32px的尺寸。

4. 標(biāo)簽的走查規(guī)范

從商業(yè)的角度熟空，標(biāo)簽是為了凸顯產(chǎn)品賣點(diǎn)藤巢，比如你在商場(chǎng)時(shí)常能看到「全場(chǎng)低至2.9折」這類的促銷信息。

其實(shí)在界面中同樣會(huì)有息罗，目的就是為了抓住用戶薅羊毛和刺激性消費(fèi)心理掂咒，對(duì)比沒(méi)有標(biāo)簽的同類商品，用戶會(huì)更加傾向于有標(biāo)簽的商品迈喉。

常用標(biāo)簽樣式有三種表現(xiàn)樣式：

面性：填充一整個(gè)色塊绍刮。

線面結(jié)合：低飽和度的色塊結(jié)合高飽和度的描邊。

線性描邊：1px粗細(xì)描邊挨摸。

如上圖：為展示清楚孩革，在原來(lái)基礎(chǔ)上放大了1倍，運(yùn)用規(guī)則與之前提到的圖標(biāo)一樣得运，根據(jù)模塊功能的重要性去搭配膝蜈，按照重要到次要的排序是：面性>線面>線性。

標(biāo)簽呼吸感規(guī)律

很多初級(jí)設(shè)計(jì)師都在疑惑到底標(biāo)簽文字定多大合適呢熔掺？標(biāo)簽字號(hào)一般為：18-22px饱搏。

以「自營(yíng)」標(biāo)簽為例，如上圖：外框邊距橫縱向成2倍的倍數(shù)關(guān)系置逻。

所以以后在畫(huà)標(biāo)簽推沸，只要先定好字號(hào)大小，剩下的邊框邊距就按照2倍的關(guān)系去拓展诽偷。

如何走查圖片比例的合理性

為了確保我們做視覺(jué)稿的時(shí)候易于文本的閱讀通常會(huì)用到一些配圖坤学，而這些配圖通常也影響著我們整個(gè)界面的美觀度。

一個(gè)優(yōu)秀的設(shè)計(jì)師在設(shè)計(jì)作品時(shí)都會(huì)特別的注重圖形與圖象的比例报慕，圖片的選取當(dāng)然也是重中之重深浮，那么我們?cè)陧?xiàng)目中應(yīng)該如何選取圖片并且正確地使用圖片的比例呢？

1. 圖片使用的規(guī)范

首先要做到讓圖片的背景保持統(tǒng)一并且做到干凈整潔眠冈。

圖片主體的比例大小跟其他圖片保持統(tǒng)一飞苇，避免出現(xiàn)有些圖片展示局部菌瘫，有些圖片展示整體。（如下圖）

2. 圖片模塊的常用使用比例

如果沒(méi)有深入的對(duì)人機(jī)交互進(jìn)行研究的話布卡，在UI設(shè)計(jì)中很多人認(rèn)為圖片的尺寸是可以隨意定制的雨让。

下面我們就來(lái)說(shuō)說(shuō)這UI設(shè)計(jì)中圖片的比例常用的有下列幾種：

1 : 1，這種比例比較適用于電商忿等，它可以讓商品圖片展示最大化栖忠，也是目前電商最主流的圖片使用尺寸。如下圖：

16 : 9贸街，這種比例比較適用于視頻庵寞，這是標(biāo)準(zhǔn)的人體工程學(xué)比例，根據(jù)人體工程學(xué)家的研究發(fā)現(xiàn)人的兩只眼睛的視野范圍并不是方的薛匪，而是一個(gè)長(zhǎng)寬比例為16 : 9的長(zhǎng)方形捐川，所以我們看到的視頻比例通常會(huì)采用16 : 9。

4 : 3逸尖，這種比例應(yīng)用于新聞?lì)怉PP比較多古沥。

它源自于一些微小型相機(jī)最原始的尺寸比例，不需要進(jìn)行過(guò)多比例的裁剪娇跟，應(yīng)用起來(lái)比較方便岩齿，對(duì)于需要展示大量的圖片信息類的產(chǎn)品來(lái)說(shuō)特別適用。

UI設(shè)計(jì)走查表到這里就要結(jié)束了逞频，不知道大家有沒(méi)有學(xué)到很多呢纯衍，下期分享（可以評(píng)論區(qū)留言不定時(shí)分享）

《影響用戶行為的幾種方法》

《解析5款字體設(shè)計(jì)全過(guò)程》

《運(yùn)營(yíng)組件化設(shè)計(jì)過(guò)程》

《品牌基因法做圖標(biāo)》

一個(gè)較為完整的設(shè)計(jì)走查表

具體流程可見(jiàn)花瓣UI設(shè)計(jì)規(guī)范文檔

在此致敬優(yōu)設(shè)3年二班程遠(yuǎn)