1.這壹頁的意思正確嗎？
在設計頁面的時候，妳需要註意頁面要傳達給用戶的關鍵信息。
比如本案的產品需求，這個頁面的作用是督促用戶快速下單，信息要以價格和優惠信息為主。(如下圖所示)
第壹屏幕信息是用戶的第壹印象。當用戶打開頁面時，盡可能多地顯示用戶感興趣的內容。
這個頁面需要突出推廣信息，次要信息放在後面。(如下圖所示)
2.頁面視覺焦點
相信妳經常聽說黃金分割率0.618(斐波那契數列)。合理利用屏幕方寸之間的黃金比例，可以讓界面的視覺重心更加穩定，視覺更加舒適。
同時有助於劃分界面區域，集中視覺焦點，承載更多重要信息，使整個界面布局更加合理。(如下圖所示)
淘寶、JD.COM家居等成熟壹線產品的黃金比例，已經在視覺焦點區域向用戶展示了關鍵信息。
3.元素之間的距離符合所有級別的關系。
為什麽頁面很亂？主要是信息盲目堆積，分布沒有區別，但是只要按照下面的方法做，頁面就會清晰很多，有節奏的呼吸就會出來。
相似的板塊不應該被混亂的間隔區域分割開來，它們應該更加集中，在整體上與其他板塊區分開來。同理，不僅僅是板塊，還有元素之間，讓用戶更快的看到自己想要的東西。
那麽，如何更好地根據相似屬性合理分配信息呢？
要用5分和等份的原則，讓分配更合理。假設同壹個板塊的間距值是壹個px，不同的板塊是2個px。
這樣既能在視覺上分布信息，又能使整體布局更加規整不淩亂，盡可能使用相同或多個間距，更便於開發。
在案例中，相似元素之間的距離為16px(a px)，不同類別的元素為32px(2a px)。
1.字體控制
如果壹個產品的字體類型太多，會導致界面不統壹，混亂。
通常字體控制盡量在2-3種以內，包括中文字體、英文字體和特殊數字字體。如下圖所示:
2.字體大小和粗細控制
字號太多使信息失去焦點，基本字號要控制在三種以內，才能清晰區分信息的層次。
正文字體大小建議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中，功能圖標大致可以分為兩種:可以點擊的按鈕；不可點擊的顯示圖標。
可以點擊的按鈕常用於導航欄、選項卡欄、操作欄(吸底按鈕圖標)，常見尺寸有:48x48px、64x64px。
如下圖所示的導航和吸底按鈕都使用了48x48px的尺寸，iOS已經使用了44x44px，現在統壹了48x48px。
不可點擊的顯示圖標常用於信息顯示位置(價格趨勢/規格/評論等。).常見的尺寸是:24x24px 32x32px。
如下圖，評論模塊中的顯示圖標使用24x24px，而價格趨勢使用32x32px。
4.標簽的檢驗規範
從商業角度來說，標簽是用來突出產品賣點的。比如在商場經常可以看到“全場低至2.9折”等促銷信息。
其實在界面上也會有，目的是為了抓住用戶的薅羊毛和刺激消費心理，而相比沒有標簽的同類產品，用戶會更傾向於有標簽的產品。
有三種常見的標簽樣式:
臉型:填充整個色塊。
線面結合:低飽和度的色塊結合高飽和度的筆畫。
直線筆畫:1px粗筆畫。
如上圖:為清晰起見，在原有基礎上放大1倍。應用規則和前面說的圖標壹樣，按照模塊功能的重要程度進行匹配。從重要到次要的順序是:areal ity >；線表面>線性。
標記呼吸感覺定律
許多初級設計師想知道標簽文字是否合適。標簽字號壹般為:18-22px。
以“自營”標簽為例，如上圖:外框的邊距是水平和垂直2倍的倍數。
所以以後畫標簽的時候，只要先確定字體大小，剩下的邊框邊距就按照2倍的關系展開。
為了保證我們在制作視覺稿的時候能夠方便的閱讀文字，我們通常會使用壹些圖片，而這些圖片通常會影響到我們整個界面的美觀。
壹個優秀的設計師在設計作品時會特別註重圖形和圖像的比例，而畫面的選取當然是最重要的。那麽在項目中應該如何選擇圖片，正確使用圖片的比例呢？
1.圖片使用規範
首先要保持圖片背景的統壹和幹凈整潔。
圖片主體比例與其他圖片比例壹致，避免部分圖片顯示部分，部分圖片顯示整體。(如下圖所示)
2.常用的圖片模塊比例
如果沒有對人機交互的深入研究，很多人認為在UI設計中可以隨意定制圖片的大小。
下面說說這個UI設計中常用的圖片比例:
1: 1，這個比例更適合電商，它可以最大化的展示產品圖片，也是目前電商最主流的圖片使用尺寸。如下圖所示:
16: 9，這個比例比較適合視頻，是標準的人體工學比例。根據人體工程學的研究發現，人眼的視野不是正方形的，而是長寬比為16: 9的長方形，所以我們看到的視頻比例通常是16: 9。
4: 3，這個比例更適用於新聞類app。
它來源於壹些微型相機的原始尺寸比例，應用方便，無需過多裁剪，尤其適用於需要顯示大量圖片和信息的產品。
UI設計走查表到此結束。不知道大家有沒有學到很多。下期分享(可以不定時在評論區留言)。
影響用戶行為的幾種方式
五種字體設計的全過程分析
操作組件設計過程
品牌基因法制作圖標
比較完整的設計走查表
具體流程可以在花瓣UI設計規範文檔中找到。
向優秀的三年兩節課征途致敬。