1.這壹頁的意思正確嗎？
在設計頁面時，您需要註意頁面應該向用戶傳達的關鍵信息。
例如，在本案的產品需求中，該頁面的功能是敦促用戶快速下單，信息應集中在價格和優惠信息上。（如下所示）
第壹個屏幕信息是用戶的第壹印象。當用戶打開頁面時，會盡可能多地顯示用戶感興趣的內容。
這個頁面需要突出推廣信息，次要信息放在後面。（如下所示）
2.頁面視覺焦點
相信大家經常聽說黃金分割率0.618（斐波那契數列）。合理利用屏幕方寸之間的黃金比例可以使界面的視覺重心更穩定，視覺更舒適。
同時有助於劃分界面區域，集中視覺焦點，承載更多重要信息，使整個界面布局更加合理。（如下所示）
淘寶和JD.COM家居等成熟壹線產品的黃金比例在視覺焦點區域向用戶展示了關鍵信息。
3.元素之間的距離符合所有級別的關系。
為什麽頁面很亂？主要原因是信息盲目堆積，分布沒有差異，但只要遵循以下方法，頁面就會清晰得多，有節奏的呼吸就會出來。
相似的板塊不應該被混亂的間隔區域分隔開，它們應該更加集中，並作為壹個整體與其他板塊區分開來。同樣的，不僅是板塊，還有元素之間，讓用戶更快地看到自己想要的東西。
那麽，如何更好地根據相似屬性合理分配信息呢？
有必要使用5分和等份原則，使分配更加合理。假設同壹板塊的間距值為1 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倍。應用規則與前面提到的圖標規則相同，根據模塊功能的重要性進行匹配。從重要到次要的順序是:面積性》；線表面》線性。
標簽呼吸感覺定律
許多初級設計師想知道標簽文本有多合適。標簽字號壹般為:18-22px。
以“自營”標簽為例，如上圖所示:外框的邊距水平和垂直方向均為2倍的倍數。
因此，將來繪制標簽時，只要先確定字體大小，剩余的邊框邊距將按照2倍的關系進行擴展。
為了確保我們在制作視覺手稿時可以輕松閱讀文本，我們通常會使用壹些圖片，而這些圖片通常會影響我們整個界面的美觀性。
壹個優秀的設計師在設計作品時會特別註意圖形和圖像的比例，圖片的選擇當然是最重要的。那麽我們應該如何在項目中選擇圖片並正確使用圖片的比例呢？
1.圖片使用規範
首先，我們應該保持圖片背景的統壹和幹凈整潔。
圖片主體的比例與其他圖片的比例保持壹致，以避免某些圖片顯示部分而某些圖片顯示整體。（如下所示）
2.常用的圖片模塊比例
如果沒有對人機交互的深入研究，很多人認為在UI設計中可以隨意定制圖片的大小。
下面我們來說說這個UI設計中常用的圖片比例:
1: 1，這個比例更適合電商，它可以最大限度地展示產品圖片，也是目前電商最主流的圖片使用尺寸。如下圖所示:
16: 9，這個比例更適合視頻，這是標準的人體工程學比例。根據人體工程學的研究發現，人眼的視野不是正方形的，而是長寬比為16: 9的矩形，所以我們看到的視頻比例通常為16: 9。
4: 3，這個比例更適用於新聞應用程序。
它源於壹些微型相機的原始尺寸比例，無需過度切割即可方便應用，尤其適用於需要顯示大量圖片和信息的產品。
UI設計走查表到此結束。我不知道妳是否學到了很多東西。下期分享（可以不定時在評論區留言）。
影響用戶行為的幾種方式
五種字體設計的全過程分析
操作組件設計過程
品牌基因法制作圖標
壹個相對完整的設計步行表
具體流程可以在petal UI設計規範文檔中找到。
我要向優秀的三年兩節課旅程致敬。