火星網(wǎng)校
如何從零構(gòu)建UI組件及設計規(guī)范(三):全局樣式
發(fā)布時間：2024-04-08 12:45:52 瀏覽量：186次
本篇為如何從零構(gòu)建UI組件及設計規(guī)范之設計全局樣式篇，主要介紹在組件和界面設計中，涉及全局樣式的最基礎構(gòu)成元素，基礎樣式的使用及規(guī)則內(nèi)容。
《如何從零構(gòu)建UI組件及設計規(guī)范》共分為5個系列，分別為《一：介紹篇》、《二：設計原則》、《三：全局樣式》、《四：基礎組件》、《五：通用模版》
本篇介紹涉及全局樣式的最基礎構(gòu)成元素，基礎樣式的使用及規(guī)則內(nèi)容，它是定義設計規(guī)范中的最基礎條件，決定了整個產(chǎn)品的風格及調(diào)性。
- Color 顏色
- Font 字體
- Icon 圖標
- Shadow 投影
- Voicce 文案
- Space 間距
01 Color 顏色
顏色的應用能夠為九曳的產(chǎn)品和界面帶來統(tǒng)一且可識別的一致性。
品牌色
平臺使用九曳新品牌綠色作為主色調(diào)，其中 Light 常用于 hover，Dark 常用于 active。一般情況下，按鈕、標簽頁等除特別標注組件外，組件的顏色以「輔助品牌色」為準。
中性色
中性色常用于文本、背景、邊框、陰影等，可以體現(xiàn)出頁面的層次結(jié)構(gòu)。整體中性色偏一點點藍，讓其在視覺體現(xiàn)上更加干凈。根據(jù)使用場景，中性色主要被定義為3類：文字、線框、背景。
輔助色
輔助色為界面設計中的特殊場景顏色，常用于信息提示，比如成功、警告和失敗。
錯誤案例
在產(chǎn)品本身中使用到品牌的色彩數(shù)量較少，一般除按鈕以外，基本還是「輔助品牌色」，即鈷藍色調(diào)為準。
02 Font 字體
字體系統(tǒng)遵循一致、靈活的原則推薦 macOS（iOS）優(yōu)先的策略，在不支持蘋方字體的情況，使用備用字體。
字體規(guī)范
中文優(yōu)先級：PingFang SC、Hiragino Sans GB、Microsoft YaHei
英文優(yōu)先級：Helvetica Neue、Helvetica、Arial
字體代碼
-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif
主字體
為了更好的閱讀體驗，和一個屏幕展示更多的信息，我們將原先的 14 更改為 13 大小。
考慮到我們系統(tǒng)的使用對象非常注重效率的提升，第一個屏幕可容納的信息量是非常重要，13 大小既能滿足用戶的可讀性，信息之間的距離也能間接的變大，給用戶更舒適、清晰的閱讀感受。
字號
正文和輔助字號使用 Regular 字重。所有的標題使用 Medium，以突出層次，讓信息清晰。字體加粗的代碼是600。
字階與行高
行高是影響用戶閱讀體驗的重要因素之一，一般英文的基本行高通常是字號的1.2em左右，而中文因為字符較為復雜，所以中文相對英文行高更大，現(xiàn)在中文的公認行高為1.6em之間會有一個比較好的視覺閱讀效果。通過計算，定義了5種字號的大小以及相對應的行高：
錯誤案例
需要考慮字體顏色，將易讀性和可訪問性作為首要考慮因素。在運行的文本中保持顏色的中性，將藍色用于某一些操作。
03 Icon 圖標
圖標可以更好的幫助用戶理解界面信息，給予正確、友好的指引。
設計原則
簡約造型簡單不繁雜，不做過多的裝飾，有較高的易讀性和辨識性。
一致圖標的設計風格，采用的圓角需要保持一致性。
設計規(guī)范
圖標尺寸尺寸為 24x24px，包含2px溢出區(qū)域。
造型簡約避免過多的筆畫，保持圖標簡約、干凈。
尺寸大小產(chǎn)品設計中使用的icon實存需要按照制定的規(guī)則尺寸設計。
圖標用法
顏色標準圖形應該是字形，并應使用單一的純色填充，且不應該帶有陰影。
樣式選擇清晰而不是好看或者個性的風格。
隱喻不要單獨使用有歧義的圖標。使用正確的用戶可以識別的圖標（表格和文件刪除除外）。
04 Shadow 投影
通過投影反映給用戶，當前的元素與底層背景的距離來反應層次關系。
投影類型
小投影主要用于小模塊及小元素之間，輕量級提示或刪除。
中投影主要用于一些較大模塊以及激活需要操作的元素，例如下拉選項、氣泡提示等。
大投影主要應用于一些大模塊，例如輕提示、通知消息、模態(tài)彈窗等。
投影代碼
小投影
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 文案
為更好的統(tǒng)一標準和使用體驗，九曳設計規(guī)范為此提供了一套常用的文案集合。
標準詞匯庫
在產(chǎn)品設計中需按照標準的用法使用。
錯誤案例
感嘆號 一般情況下，正面用于使用感嘆號，負面使用句號。所以「你的訂單量已超過限制?！故褂镁涮?，需注意確保在上下文（包括標題等）中使用不超過一個感嘆號。
禮貌用語 禮貌性語言用不好會給用戶傳達一些錯的語調(diào)和感受。需謹慎使用“請”和“謝謝”之類的術(shù)語。
說明出錯原因 明確告知用戶，發(fā)生了生么，并告知是何原因。
給出建議 完整闡述信息，并給出建議。
直接使用「你」 直接使用你、我和用戶進行對話，避免使用「您」，讓用戶感覺過于客套和討好。
尊重用戶 給用戶支持和鼓勵，不強迫命令。
使用阿拉伯數(shù)字 人對于數(shù)字的感知速度更快，使用數(shù)字表述更加有效，所以統(tǒng)計的數(shù)據(jù)使用阿拉伯數(shù)字。
06 Space 間距
信息之間的關聯(lián)度越高，它們之間的距離就應該更加接近，讓給感覺更像是一個視覺單元；反之，則是多個視覺單元。通過通知控制間距，實現(xiàn)頁面信息頁面的結(jié)構(gòu)和信息層次。
間距使用
我們的比列是以8px（1rem）單位為基礎。使用 8 的倍數(shù)來定義模塊間距于元素的尺寸。
舉例說明
設計頁面 表格頁面和新增頁面。
文字間距文字間距需要考慮行高。
#相關閱讀#
如何從零構(gòu)建UI組件及設計規(guī)范（一）：介紹篇
如何從零構(gòu)建UI組件及設計規(guī)范（二）：設計原則
本文由 @徐銀高 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術(shù)教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內(nèi)容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
