如何從零構建UI組件及設計規范(三):全局樣式

1 評論 8802 瀏覽 88 收藏 12 分鐘

本篇為如何從零構建UI組件及設計規范之設計全局樣式篇,主要介紹在組件和界面設計中,涉及全局樣式的最基礎構成元素,基礎樣式的使用及規則內容。

《如何從零構建UI組件及設計規范》共分為5個系列,分別為《一:介紹篇》、《二:設計原則》、《三:全局樣式》、《四:基礎組件》、《五:通用模版》

本篇介紹涉及全局樣式的最基礎構成元素,基礎樣式的使用及規則內容,它是定義設計規范中的最基礎條件,決定了整個產品的風格及調性。

  1. Color 顏色
  2. Font 字體
  3. Icon 圖標
  4. Shadow 投影
  5. Voicce 文案
  6. Space 間距

01 Color 顏色

顏色的應用能夠為九曳的產品和界面帶來統一且可識別的一致性。

品牌色

平臺使用九曳新品牌綠色作為主色調,其中 Light 常用于 hover,Dark 常用于 active。一般情況下,按鈕、標簽頁等除特別標注組件外,組件的顏色以「輔助品牌色」為準。

中性色

中性色常用于文本、背景、邊框、陰影等,可以體現出頁面的層次結構。整體中性色偏一點點藍,讓其在視覺體現上更加干凈。根據使用場景,中性色主要被定義為3類:文字、線框、背景。

輔助色

輔助色為界面設計中的特殊場景顏色,常用于信息提示,比如成功、警告和失敗。

錯誤案例

在產品本身中使用到品牌的色彩數量較少,一般除按鈕以外,基本還是「輔助品牌色」,即鈷藍色調為準。

02 Font 字體

字體系統遵循一致、靈活的原則推薦 macOS(iOS)優先的策略,在不支持蘋方字體的情況,使用備用字體。

字體規范

中文優先級: ? ?PingFang SC、Hiragino Sans GB、Microsoft YaHei

英文優先級: ? ?Helvetica Neue、Helvetica、Arial

字體代碼

-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif

主字體

為了更好的閱讀體驗,和一個屏幕展示更多的信息,我們將原先的 14 更改為 13 大小。

考慮到我們系統的使用對象非常注重效率的提升,第一個屏幕可容納的信息量是非常重要,13 大小既能滿足用戶的可讀性,信息之間的距離也能間接的變大,給用戶更舒適、清晰的閱讀感受。

字號

正文和輔助字號使用 Regular 字重。所有的標題使用 Medium,以突出層次,讓信息清晰。字體加粗的代碼是600。

字階與行高

行高是影響用戶閱讀體驗的重要因素之一,一般英文的基本行高通常是字號的1.2em左右,而中文因為字符較為復雜,所以中文相對英文行高更大,現在中文的公認行高為1.6em之間會有一個比較好的視覺閱讀效果。通過計算,定義了5種字號的大小以及相對應的行高:

錯誤案例

需要考慮字體顏色,將易讀性和可訪問性作為首要考慮因素。在運行的文本中保持顏色的中性,將藍色用于某一些操作。

03 Icon 圖標

圖標可以更好的幫助用戶理解界面信息,給予正確、友好的指引。

設計原則

簡約 ? ?造型簡單不繁雜,不做過多的裝飾,有較高的易讀性和辨識性。

一致 ? ?圖標的設計風格,采用的圓角需要保持一致性。

設計規范

圖標尺寸 ? ?尺寸為 24x24px,包含2px溢出區域。

造型簡約 ? ?避免過多的筆畫,保持圖標簡約、干凈。

尺寸大小 ? ?產品設計中使用的icon實存需要按照制定的規則尺寸設計。

圖標用法

顏色 ? ?標準圖形應該是字形,并應使用單一的純色填充,且不應該帶有陰影。

樣式 ? ?選擇清晰而不是好看或者個性的風格。

隱喻 ? ?不要單獨使用有歧義的圖標。使用正確的用戶可以識別的圖標(表格和文件刪除除外)。

04 Shadow 投影

通過投影反映給用戶,當前的元素與底層背景的距離來反應層次關系。

投影類型

小投影 ? ?主要用于小模塊及小元素之間,輕量級提示或刪除。

中投影 ? ?主要用于一些較大模塊以及激活需要操作的元素,例如下拉選項、氣泡提示等。

大投影 ? ?主要應用于一些大模塊,例如輕提示、通知消息、模態彈窗等。

投影代碼

小投影

box-shadow:1px 1px 4px 0px rgba(35,40,48,0.2);

中投影

box-shadow:1px 1px 8px 0px rgba(35,40,48,0.2);

大投影

box-shadow:2px 2px 16px 0px rgba(35,40,48,0.2);

05 Voicce 文案

為更好的統一標準和使用體驗,九曳設計規范為此提供了一套常用的文案集合。

標準詞匯庫

在產品設計中需按照標準的用法使用。

錯誤案例

感嘆號 ? ?一般情況下,正面用于使用感嘆號,負面使用句號。所以「你的訂單量已超過限制。」使用句號,需注意確保在上下文(包括標題等)中使用不超過一個感嘆號。

禮貌用語 ? ?禮貌性語言用不好會給用戶傳達一些錯的語調和感受。需謹慎使用“請”和“謝謝”之類的術語。

說明出錯原因 ? ?明確告知用戶,發生了生么,并告知是何原因。

給出建議 ? ?完整闡述信息,并給出建議。

直接使用「你」 ? ?直接使用你、我和用戶進行對話,避免使用「您」,讓用戶感覺過于客套和討好。

尊重用戶 ? ?給用戶支持和鼓勵,不強迫命令。

使用阿拉伯數字 ? ? 人對于數字的感知速度更快,使用數字表述更加有效,所以統計的數據使用阿拉伯數字。

06 Space 間距

信息之間的關聯度越高,它們之間的距離就應該更加接近,讓給感覺更像是一個視覺單元;反之,則是多個視覺單元。通過通知控制間距,實現頁面信息頁面的結構和信息層次。

間距使用

我們的比列是以8px(1rem)單位為基礎。使用 8 的倍數來定義模塊間距于元素的尺寸。

舉例說明

設計頁面 ? ?表格頁面和新增頁面。

文字間距 ? ?文字間距需要考慮行高。

#相關閱讀#

如何從零構建UI組件及設計規范(一):介紹篇

如何從零構建UI組件及設計規范(二):設計原則

 

本文由 @徐銀高 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 大方混搭風很大

    來自北京 回復