1.頁面要表達的意思是否正確
在設計頁面的時候，需要註意頁面要傳達給用戶的重點信息。
例如本次案例的產品需求中，該頁面的功能是促使用戶快速下單，信息上則要側重於價格與優惠信息。（如下圖）
首屏信息是給用戶的第壹印象，在用戶打開頁面，盡可能展現出更多用戶感興趣的內容。
而此次頁面需要突出促銷優惠信息，次要信息則放在後面。（如下圖）
2. 頁面視覺重點
相信大家平時經常聽說0.618的黃金比例（斐波那契數列）。屏幕方寸間合理運用黃金比例可以讓界面視覺重心更加平穩，視覺更加舒適。
同時有助於界面區域分割，集中視覺焦點，承載更重要的信息，讓整個界面布局更加合理。（如下圖）
淘寶、京東到家等成熟的壹線產品黃金比例運用，在視覺焦點區域都向用戶展示了關鍵信息。
3. 元素間距符合各層級的關系
為什麽頁面會雜亂無章？主要是信息壹味地堆砌，分布沒有區別，但只要遵從以下方法，頁面就會清晰很多，有節奏的呼吸感也出來了。
同類的板塊不應被混亂的間距區隔開來，它們應該更集中，並且整體與別的板塊區別開來。同理，不僅僅是板塊，元素與元素之間也是如此，這樣用戶可以更加快速地看到自己想要的東西。
那麽，如何更好地讓信息按照相似屬性合理分布呢？
這就要利用5分、等分原則來讓分布變得更合理，假設相同板塊的間距值為a px，則不同板塊為2a px。
這樣不僅在視覺可以將信息分布開來，還能讓整體的布局更加規整，不會淩亂，盡可能使用同壹或者同倍數的間距，更便於開發。
案例中，相近元素的間距為16px（a px），則不同類別的元素為32px（2a px）。
1. 字體種類的控制
壹個產品如果字體種類過多，會導致界面的不統壹與混亂。
通常字體控制盡量在2-3種以內，中文字體、英文字體以及特殊數字字體。如下圖：
2. 字號與粗細控制
字號過多使信息失去重點，基礎字號控制在3種以內，目的在於清晰區分信息的層級。
正文字號建議為28px，副文案為24px，大標題、價格等重要信息需按實際情況加大，令信息的層級區分更明顯。
加粗字體往往是整個界面的視覺焦點，重點的文本（如標題、價格）需要加粗處理，註意控制字體加粗的使用，以免造成信息層級的混亂。下圖為調整字號及粗細的前後對比：
3. 行距控制
行距太小不便於用戶閱讀，太大會顯得松散，所以控制在1.2-1.5倍的範圍是較為舒適的範圍。下圖為調整行距的前後對比：
4. 字體顏色
字體主要以黑白灰為主：#333333?#666666?#999999。
字體顏色深淺有序能讓信息層級主次分明，產品應該根據不同模塊以及同壹模塊的層級需要調整不同的灰度值，並在產品中反復使用，統壹規範輸出。
信息越重要，字體顏色越深。除此之外我們還需要註意到什麽呢？
也是很多剛入行的設計小夥伴很容易忽略的細節，產品的實際使用環境。
比如，我們此次改版的產品詳情界面就是線上下單，線下提貨的運營模式，不僅需要考慮室內使用環境，還需要考慮到特殊的室外強光環境。結合下圖感受壹下：
如何在強光環境下保證產品良好的視覺體驗呢？這也是UI走查表需要註意到的細節點：強光測試（大於4.5:1）。
我們先觀察壹組顏色對比，如下圖：
我們會發現字體顏色層級依然是深黑色、中黑色、淺黑色，相信很多設計師朋友已經註意到我們使用的顏色更深了，為什麽呢？
為了保證在強光環境下信息的可閱讀性，如下圖：字體信息最淺層級，淺黑色的色彩數值對比數值都大於4.5:1。
有細心的設計師朋友或許已經註意到色彩值並沒#333333、#666666、#999999那麽便於記憶了，為什麽呢？
為了提升更好的視覺感受與界面的品質感，我們在字體顏色中采用了偏藍灰，大家不防跟我壹起觀察下圖，上圖灰色看上去略微有壹些臟臟的感覺，下圖視覺更耐看、更有質感。
騰訊新聞、金色財經App 中也應用到了偏藍灰，有種撲面而來的清爽。
除了常用字體層級的顏色對比，在界面中針對關鍵的賣點信息還用到強調色，即品牌色。
品牌色也會經常運用到特殊字體、提示文字、鏈接等等。
改版前，促銷信息缺少提示入口。改版後，以品牌色作為入口字體顏色，引起用戶註意。（如下圖）
1. 視覺比例
由於圖標通常都是成群結對的出現，彼此間的統壹性顯得非常重要，但是常常容易被忽略，可以制定如下圖的圖標盒子來規範尺寸。
2. 圖標設計要點
設計圖標時應註意基礎形狀復用，保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計，既能統壹大小又有整體感。
面性圖標
設計時需要註意挖空比例的壹致性，保持圖標的整體性。如價格走勢、降價通知這壹排圖標，挖空比例控制在20%。
線性圖標
設計時應註意保持統壹的線條粗細，案例中2px的粗細線條重復使用，常用的圖標描邊粗細壹般為1.5pt，當然需要所有圖標的粗細與文字粗細壹致，和諧統壹。
3. 圖標尺寸
在app中，功能圖標大致可分成兩種：可以點擊的按鈕；不可點擊的展示圖標。
可以點擊的按鈕常用於導航欄、tab欄、操作欄（吸底按鈕圖示），常用尺寸為：48x48px、64x64px。
如下圖的導航和吸底按鈕都用了48x48px的大小、已經用iOS用44x44px，現在已經統壹48x48px。
不可點擊的展示圖標常用於信息展示位置（價格走勢/規格/評論等圖示）常用尺寸為：24x24px 32x32px。
如下圖，評論模塊中的展示圖標使用24x24px，價格走勢則使用了32x32px的尺寸。
4. 標簽的走查規範
從商業的角度，標簽是為了凸顯產品賣點，比如妳在商場時常能看到「全場低至2.9折」這類的促銷信息。
其實在界面中同樣會有，目的就是為了抓住用戶薅羊毛和刺激性消費心理，對比沒有標簽的同類商品，用戶會更加傾向於有標簽的商品。
常用標簽樣式有三種表現樣式：
面性：填充壹整個色塊。
線面結合：低飽和度的色塊結合高飽和度的描邊。
線性描邊：1px粗細描邊。
如上圖：為展示清楚，在原來基礎上放大了1倍，運用規則與之前提到的圖標壹樣，根據模塊功能的重要性去搭配，按照重要到次要的排序是：面性>線面>線性。
標簽呼吸感規律
很多初級設計師都在疑惑到底標簽文字定多大合適呢？標簽字號壹般為：18-22px。
以「自營」標簽為例，如上圖：外框邊距橫縱向成2倍的倍數關系。
所以以後在畫標簽，只要先定好字號大小，剩下的邊框邊距就按照2倍的關系去拓展。
為了確保我們做視覺稿的時候易於文本的閱讀通常會用到壹些配圖，而這些配圖通常也影響著我們整個界面的美觀度。
壹個優秀的設計師在設計作品時都會特別的註重圖形與圖象的比例，圖片的選取當然也是重中之重，那麽我們在項目中應該如何選取圖片並且正確地使用圖片的比例呢？
1. 圖片使用的規範
首先要做到讓圖片的背景保持統壹並且做到幹凈整潔。
圖片主體的比例大小跟其他圖片保持統壹，避免出現有些圖片展示局部，有些圖片展示整體。（如下圖）
2. 圖片模塊的常用使用比例
如果沒有深入的對人機交互進行研究的話，在UI設計中很多人認為圖片的尺寸是可以隨意定制的。
下面我們就來說說這UI設計中圖片的比例常用的有下列幾種：
1 : 1，這種比例比較適用於電商，它可以讓商品圖片展示最大化，也是目前電商最主流的圖片使用尺寸。如下圖：
16 : 9，這種比例比較適用於視頻，這是標準的人體工程學比例，根據人體工程學家的研究發現人的兩只眼睛的視野範圍並不是方的，而是壹個長寬比例為16 : 9的長方形，所以我們看到的視頻比例通常會采用16 : 9。
4 : 3，這種比例應用於新聞類APP比較多。
它源自於壹些微小型相機最原始的尺寸比例，不需要進行過多比例的裁剪，應用起來比較方便，對於需要展示大量的圖片信息類的產品來說特別適用。
UI設計走查表到這裏就要結束了，不知道大家有沒有學到很多呢，下期分享（可以評論區留言不定時分享）
《影響用戶行為的幾種方法》
《解析5款字體設計全過程》
《運營組件化設計過程》
《品牌基因法做圖標》
壹個較為完整的設計走查表
具體流程可見花瓣UI設計規範文檔
在此致敬優設3年二班程遠