頻繁過稿被老板pass？被要求執(zhí)行無理的設(shè)計工作？接到改稿任務(wù)無從下手？當老板對你的設(shè)計產(chǎn)生質(zhì)疑時，不妨用設(shè)計走查的思路說服Ta。

UI走查表有什么用？

一套成熟的UI走查表，能更科學更高效地改稿，減少設(shè)計中的反復(fù)試錯，也能讓評審交付時更有理有據(jù)。不僅僅停留于看上去順眼、我覺得挺好、先這樣的視覺表層。更深一層來說，走查表有助于培養(yǎng)設(shè)計師的結(jié)構(gòu)化思維，形成一個完整的設(shè)計體系。

文章闡述的觀點

如何走查信息層級

1. 頁面要表達的意思是否正確

在設(shè)計頁面的時候，需要注意頁面要傳達給用戶的重點信息。

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

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

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

2. 頁面視覺重點

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

同時有助于界面區(qū)域分割，集中視覺焦點，承載更重要的信息，讓整個界面布局更加合理。（如下圖）

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

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

為什么頁面會雜亂無章？主要是信息一味地堆砌，分布沒有區(qū)別，但只要遵從以下方法，頁面就會清晰很多，有節(jié)奏的呼吸感也出來了。

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

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

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

這樣不僅在視覺可以將信息分布開來，還能讓整體的布局更加規(guī)整，不會凌亂，盡可能使用同一或者同倍數(shù)的間距，更便于開發(fā)。

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

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

1. 字體種類的控制

一個產(chǎn)品如果字體種類過多，會導(dǎo)致界面的不統(tǒng)一與混亂。

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

2. 字號與粗細控制

字號過多使信息失去重點，基礎(chǔ)字號控制在3種以內(nèi)，目的在于清晰區(qū)分信息的層級。

正文字號建議為28px，副文案為24px，大標題、價格等重要信息需按實際情況加大，令信息的層級區(qū)分更明顯。

加粗字體往往是整個界面的視覺焦點，重點的文本（如標題、價格）需要加粗處理，注意控制字體加粗的使用，以免造成信息層級的混亂。下圖為調(diào)整字號及粗細的前后對比：

3. 行距控制

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

4. 字體顏色

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

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

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

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

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

如何在強光環(huán)境下保證產(chǎn)品良好的視覺體驗?zāi)?？這也是UI走查表需要注意到的細節(jié)點：強光測試（大于4.5:1）。

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

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

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

△ 強光測試

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

為了提升更好的視覺感受與界面的品質(zhì)感，我們在字體顏色中采用了偏藍灰，大家不防跟我一起觀察下圖，上圖灰色看上去略微有一些臟臟的感覺，下圖視覺更耐看、更有質(zhì)感。

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

除了常用字體層級的顏色對比，在界面中針對關(guān)鍵的賣點信息還用到強調(diào)色，即品牌色。

品牌色也會經(jīng)常運用到特殊字體、提示文字、鏈接等等。

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

如何通過設(shè)計規(guī)范走查圖標

1. 視覺比例

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

2. 圖標設(shè)計要點

設(shè)計圖標時應(yīng)注意基礎(chǔ)形狀復(fù)用，保持整體識別性。如下圖重復(fù)使用矩形、圓形、橢圓形等基礎(chǔ)形狀進行設(shè)計，既能統(tǒng)一大小又有整體感。

面性圖標

設(shè)計時需要注意挖空比例的一致性，保持圖標的整體性。如價格走勢、降價通知這一排圖標，挖空比例控制在20%。

線性圖標

設(shè)計時應(yīng)注意保持統(tǒng)一的線條粗細，案例中2px的粗細線條重復(fù)使用，所有圖標的粗細與文字粗細一致，和諧統(tǒng)一。

3. 圖標尺寸

在app中，功能圖標大致可分成兩種：可以點擊的按鈕；不可點擊的展示圖標。

可以點擊的按鈕常用于導(dǎo)航欄、tab欄、操作欄（吸底按鈕圖示），常用尺寸為：48x48px、64x64px。

如下圖的導(dǎo)航和吸底按鈕都用了48x48px的大小。

不可點擊的展示圖標常用于信息展示位置（價格走勢/規(guī)格/評論等圖示）常用尺寸為：24x24px 32x32px。

如下圖，評論模塊中的展示圖標使用24x24px，價格走勢則使用了32x32px的尺寸。

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

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

其實在界面中同樣會有，目的就是為了抓住用戶薅羊毛和刺激性消費心理，對比沒有標簽的同類商品，用戶會更加傾向于有標簽的商品。

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

• 面性：填充一整個色塊。
• 線面結(jié)合：低飽和度的色塊結(jié)合高飽和度的描邊。
• 線性描邊：1px粗細描邊。

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

標簽呼吸感規(guī)律

很多初級設(shè)計師都在疑惑到底標簽文字定多大合適呢？標簽字號一般為：18-22px。

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

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

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

為了確保我們做視覺稿的時候易于文本的閱讀通常會用到一些配圖，而這些配圖通常也影響著我們整個界面的美觀度。

一個優(yōu)秀的設(shè)計師在設(shè)計作品時都會特別的注重圖形與圖象的比例，圖片的選取當然也是重中之重，那么我們在項目中應(yīng)該如何選取圖片并且正確地使用圖片的比例呢？

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

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

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

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

UI設(shè)計中圖片的比例常用的有下列幾種：

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

16 : 9，這種比例比較適用于視頻，這是標準的人體工程學比例，根據(jù)人體工程學家的研究發(fā)現(xiàn)人的兩只眼睛的視野范圍并不是方的，而是一個長寬比例為16 : 9的長方形，所以我們看到的視頻比例通常會采用16 : 9。

4 : 3，這種比例應(yīng)用于新聞類APP比較多。

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

如果你還是不知道如何去使用尺寸，那么你可以直接查找相關(guān)競品進行設(shè)計。

UI設(shè)計走查表

我們整理了一個較為完整的設(shè)計走查表，希望在實踐中能夠幫到大家。

除此以外，作為一名UI設(shè)計師，不僅要懂得執(zhí)行設(shè)計，同時也要做好前期對產(chǎn)品的認知工作，如了解項目背景、目標用戶、品牌特點等信息，從而能更深層理解產(chǎn)品，讓設(shè)計更加貼近產(chǎn)品。

歡迎關(guān)注作者的微信公眾號：「EDC設(shè)計研究中心」