小紐扣

辽宁35选7的走势图带连线:如何構建設計語言

小紐扣 設計規范 1779瀏覽

辽宁35选7开奖哪个台 www.duulp.com “風格來來去去。 好的設計是一種語言,而不是一種風格?!薄狹assimoVignelli。一整套作品從完成到后期的更新迭代,都需要一套規范的文檔,這樣會節省團隊設計師之間的冗余工作。

 

為何構建設計語言

1、品牌形象

隨著公司發展會衍生一系列線上產品以及線下物料,設計語言的構建大大統一傳達了公司品牌形象,產品后續迭代中也不會混亂,更有效的維護企業品牌形象,加深用戶印象,有效提升用戶體驗。

 

2、用戶體驗

線上產品的設計語言更注重用戶體驗,比如不同的界面邊距和字號大小,產品的基調也會不同,用戶的情緒感受也不一樣。所以在構建設計語言時,首先要了解產品特性以及使用場景和使用人群,確定好產品方向再著手構建設計語言如何傳達給用戶合適的設計體驗。

 

3、開發效率

統一的設計組件可以大幅度提高開發者的時間效率以及項目周期,還有就是在項目后期迭代或修改時,統一的樣式可以快速修改。減輕了設計對接和開發實現的負擔。

 

語言構建

1、顏色

無論UI還是平面,顏色是視覺傳達的最核心也是最基本的語言,不同的主色,會給人不同的視覺感受,同樣的主色不同的配色,視覺感受也會不同。在設計中確定好主色后,配色的選擇也較為關鍵。界面設計中除了背景色、字體顏色、圖標以外,后期上傳的產品圖以及輪播圖都要規范。

 

2、字體

字體的設定包括字號、字重、行距、顏色對比以及界面間距留白的協調性。Material Design對字體標題和內容文字的大小剛好是1.6倍,接近黃金比例,所以字體的處理也要有所考究。構建文字在界面美觀和基調同時,更要注重用戶可讀性,分清主次關系。字體種類在界面中應存在一種或者兩種,不可出現三種字體。字號和字顏色避免過于接近,導致無法分清關系。正文行間距一般為字號的1.5~1.8倍之間。

 

3、形狀

形狀的使用在界面設計中也最為常見,最多的就是直角和圓角,以及帶有品牌元素的形狀。不同的形狀傳達的情緒也不同,比如說尖銳的和弧度的,包括圓角大小不同視覺感也不同。根據重復原則,如果某個形狀在界面中重復使用時很容易加深用戶對于產品的印象,就像很多設計師設計icon時結合產品特性以及logo的設計基因相結合。

 

4、圖標

接著上面形狀的理解,圖標的風格設計也要和界面的其他設計元素應保持統一的設計語言,實現產品界面中所有視覺設計的一致性。圖標設計構成通過形狀、邊框、顏色、圓角、大小、肌理等來延續傳達在界面的基調和品牌基因。

 

5、網格

網格系統目前比較成熟的設計布局工具,設計中使用一套規范的間距,來保持產品的一致性,網格間距以倍數方式,比如1X,2X,3X,4X。比如現需設計一個讓用戶感受到輕松愉悅的頁面,可以使用較大的柵格間距比例,以12為基準,比如間距一律使用12,24,36,48。如果是信息較為緊密的,則可以使用8的倍數,如8,16,24,32等。不同的界面信息承載使用網格也不同,界面空間留白不同,界面風格也會不同。比如:Airbnb界面邊距48px,整體產品調性簡約大氣;馬蜂窩的界面,側重于突出圖片,因此頁面內容區域比例會比較大。

 

6、圖片比例

對于圖片比例,設計師有的往往憑感覺設定,但最好合理的使用圖片規范,常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618這些比例經過前輩驗證也是做合適視覺尺寸。

 

界面呈現

由于界面和產品需求不可預期性,構建設計語言無法100%的的滿足所有界面,根據界面最終呈現在不影響設計方向前提下,以及產品后期可迭代空間,可以進行局部調整設計方案。

 

總結

我覺得好的設計語言是有生命,就好像在為每個人訴說自己的故事,傳達自己的情緒,希望每個人了解自己。背后的塑造它每一位設計師都在努力讓它變得更好,讓它更易于與別人溝通。

 

推薦

推薦幾個大廠的設計語言,大家可以進一步深入了解:

https://ant.design/index-cn

https://material.io/design/introduction/#introduction-goals

https://www.ibm.com/design/language/

 

原文地址:站酷

作者:楓橋良夜

 

轉載請注明:辽宁35选7开奖哪个台 » 如何構建設計語言

登錄收藏
 
你可能喜歡的:
圓角矩形背后的含義|深度解析圓角矩形背后的含義|深度解析
?iOS 13 做了哪些體驗升級?iOS 13 做了哪些體驗升級
系統圖標 - 基礎認知 Material 規范系統圖標 – 基礎認知 Material 規范
移動端設計規范 — UI欄類移動端設計規范 — UI欄類
如何輸出清晰有效的設計方案如何輸出清晰有效的設計方案
UI設計命名方式及常用控件分享UI設計命名方式及常用控件分享
網格的基礎網格的基礎
按鈕規范系列 - 「按鈕尺寸」的設計詳解按鈕規范系列 – 「按鈕尺寸」的設計詳解
干貨 | 如何構建UI組件設計規范干貨 | 如何構建UI組件設計規范
‘信息引導’超全總結,讓你的設計有理有據‘信息引導’超全總結,讓你的設計有理有據
?