幾何

以下內容由摹客團隊翻譯整理,僅供學習交流。摹客Mockplus是快速的原型設計工具。摹客iDoc是高效的在線協作設計平臺。

現如今,企業產品部門劃分越來越多,分工越來越細,想要打造美觀一致的產品和界面設計,就需要各個部門共同遵守統一的設計規范。

但是,究竟如何才能從零開始快速搭建統一的設計規范系統呢?不用擔心。本文將為大家詳細介紹UI設計系統搭建的6個主要步驟, 供設計師們參考和借鑒:

 

首先,什么是UI設計系統?

UI設計系統是一整套軟件設計和開發的標準,用以定義和統一界面上各個組件的樣式和規范,引導產品團隊快速構建應用程序, 聚合并使用各類設計資源。所以,UI設計系統,既是設計團隊完成UI設計的說明書,也是開發團隊編碼和實現設計的重要資源庫。

 

UI設計系統為什么如此重要?

眾所周知,公司內部各個產品以及界面要保持風格樣式一致,其實是非常困難的。但保持設計統一卻又非常關鍵,它不單單帶來整齊和諧的視覺感受,還能幫助用戶形成一定使用習慣,無形中熟記專屬于該公司產品的設計語言,從而輕松提高其品牌辨識度。

 

如何從頭快速搭建UI設計系統?

從零開始搭建UI設計系統,最簡單的方法就是快速創建一個包含所有設計素材的資源庫, 例如一個包含配色、文本樣式、切圖以及頁面模式等資源的庫。而且,這個資源庫還需要清晰定義和呈現設計(例如網頁或App設計)中所有的組件。

總之,從這個角度來講,在沒有使用任何工具幫助的情況下,設計系統構建是一條漫長的路。需要各個部門和成員通力合作,共同完成。決不能輕易放棄。

下面我們就一起來看看,如何一步步快速搭建設計系統吧:

 

第一步,創建情緒板(Moodboard)和配色

為快速統一產品界面主體風格,定義各個產品外觀,我們可以首先嘗試構建相關情緒板和配色。例如,將日常設計中遇到的各類優質UI、創意滿滿的產品設計以及圖片等拼貼到情緒板。如此,需要時,就可直接從情緒板中挑選合適的配色或尋求設計靈感。

此外,情緒板搭建過程中,也需詳細列出各類顏色的原色、間色以及復色。報錯和成功提示的配色、 色調明暗和灰階等,也需囊括在內。而且,UI設計過程中,大都需要包含以下幾種灰階:

  • 非常淺的灰色,常見于界面背景設計
  • 稍暗的灰色,常用于邊框、線條、筆畫以及分隔器設計
  • 中灰色,常見于副標題和次級文本設計
  • 深灰色,多用于界面主標題、正文和背景設計

總之,我們需要為每種顏色添加不同色調、明暗和灰階,設計過程中,才能根據需要隨時取用,豐富界面設計。

第二步,規范邊框圓角和陰影

設置好配色之后,我們需要規范UI中邊框的圓角和陰影。通常,圓角與界面卡片和圖表之類組件設計密切相關,影響著界面的整體外觀和用戶的視覺體驗。然而,邊框圓角的弧度究竟該設為多大才合適呢?

一般而言,這取決于我們想要帶給用戶怎樣的情感體驗。圓角弧度越大,邊框就會越圓,看起來就會更加可愛、友好。相反,弧度越小,邊框就會越方正,看起來就會更加嚴肅、正式。 所以,邊框的圓角設計的建議是:請盡量將其弧度設置在2到8個像素之間。

陰影,主要用于展現設計中組件的厚度和透視效果。最近, 也時常用于區分界面的多個組件元素。 而設計系統搭建過程中,我們嘗試從下面四個類別定義UI中的所有陰影設計:

  • 淺色陰影,用以突出交互組件,并提供一定視覺暗示,引導用戶點擊交互
  • 稍微明顯的陰影,用以設計交互懸停特效
  • 一目了然的陰影,為下拉菜單、彈出窗口以及其它類似組件打造透視效果。
  • 深色陰影,輕松打造界面布局類組件,呈現界面整體結構布局。

第三步,定義文本字體尺寸

擁有優質用戶體驗的UI設計,大都具有清晰的層級結構,尤其是界面層級分明的標題結構。而想要打造統一的設計系統,字體大小和標題層級也需要進行統一規范。

通常,我們需要定義以下級別的字體尺寸:

  • 默認字體尺寸(例如CSS中默認的字體尺寸:1 em), 常作為營銷類網頁和界面的通用字體尺寸。而16 px則是各大瀏覽器默認的字體尺寸。設計規范搭建過程中,可直接添加到規范庫中。
  • 稍大的字體尺寸,用以定義界面博客文字內容。
  • 再大一些的字體尺寸,用以定義界面標題和附標題。
  • 較大的字體尺寸,用以定義區域模塊的標題。
  • 超大的字體尺寸, 例如用以定義定價頁面上價格的文本字體尺寸。
  • 最后,還需添加更小的字體尺寸,用以定義界面次級內容、輸入提示以及其它次要信息。

第四步,統一界面圖標

設計規范系統,也需要統一圖標,確保界面所有圖標都具有相似或相同的風格樣式。而對于設計初學者而言,他們可以嘗試使用免費的圖標素材包。如此,既能省掉制作設計圖標的時間,又能輕松確保各個界面的統一性。

第五步,規范界面按鈕、滑塊和進度條

按鈕是UI設計中最重要的組件之一。用戶點擊即可實現購買和閱讀詳情等操作。為提升用戶點擊率,按鈕需要根據實際功能進行設計,易于用戶查找和識別,并能夠清楚指明點擊后可實現的操作。

而且,UI設計過程中,包含很多種按鈕。按鈕的各種狀態設計也不可或缺。

而以下是UI設計中比較常見的按鈕種類:

  • 命令按鈕
  • 單選按鈕
  • 復選框
  • 導航按鈕

設計系統中的滑塊和加載進度相關規范的添加,能夠輕松定義UI設計中滑動條和進度條之類組件的樣式,讓產品設計更加美觀統一。

第六步,定義下拉菜單、標簽和彈窗(以及其他復雜組件)

到目前為止,我們已經設置好了一套最基本的設計規范系統。利用此規范系統,我們還能夠定義其它更加復雜的組件,例如菜單、標簽和彈窗等。而且,設計規范標準不同,所能打造的此類組件也會不同。

以上就是設計系統搭建的的基本步驟,希望能夠對大家有所幫助。當然, 實際設計案例中,根據不同設計需求,設計團隊也可添加更多類別的設計規范,打造其專屬的設計系統??傊?,設計系統搭建,請盡量保證其結構清晰且簡潔易懂,以方便各個部門隨時取用。

 

優質高效的設計系統構建和管理工具

如上所述,在沒有任何工具的協作下,即使是公司所有設計團隊都參與進來,整個設計系統搭建過程也并不簡單。究竟,如何才能快速、優質且高效的構建并管理設計系統呢?這里為大家推薦一款非常實用的工具——Mockplus DS設計系統。

Mockplus DS設計系統是一款在線的設計規范定制和管理工具,允許公司各個設計部門在線實時協作構建、分享、使用和管理統一的UI設計規范。支持8種設計資源上傳和管理,例如圖片、Logo、字體、顏色、陰影、圖標、組件等。支持多種方式導出和應用。團隊各成員可輕松在線編輯,一鍵分享同步。團隊共建,實時共享設計資源。

 

結語

統一的設計規范系統是企業打造專屬產品設計語言, 加快產品設計、測試以及開發流程,提高產品知名度和辨識度的重要手段。無論是手動搭建,還是利用工具在線搭建,都需要各部門和成員通力合作,各司其職,堅持不懈。

 

原文地址:medium.muz.li

譯文地址:Mockplus

作者:Rahul Goradia

譯者:Mockplus

 

轉載請注明:學UI網 » 超實用!手把手教你從頭構建UI設計系統

登錄收藏
 
你可能喜歡的:
超好看的30款網站側邊欄設計超好看的30款網站側邊欄設計
交互設計七大定律在設計中的運用交互設計七大定律在設計中的運用
所有的設計都離不開這兩條創作思路所有的設計都離不開這兩條創作思路
十大用戶體驗設計失敗案例,你知道嗎?十大用戶體驗設計失敗案例,你知道嗎?
以Ant Design為例來說說B端設計的基本套路以Ant Design為例來說說B端設計的基本套路
品牌設計模型品牌設計模型
為什么交互設計能幫助產品解決問題為什么交互設計能幫助產品解決問題
標簽欄圖標的常見樣式與反饋形式標簽欄圖標的常見樣式與反饋形式
搞定UI中報錯信息設計,輕松提升用戶體驗搞定UI中報錯信息設計,輕松提升用戶體驗
如何讓你用最短的時間聊最嗨的天?如何讓你用最短的時間聊最嗨的天?
?
类似钱咖的高额赚钱