超全面的 UI 工作流程指南(四):設計規范 - 優設網 - UISDC

超全面的 UI 工作流程指南(四):設計規范

2019/08/12 27576評論 7

編者按:完整的 UI 設計流程到底是怎樣的?從需求到產品上線,要經歷多少個階段,每個階段有哪些應該掌握的基礎知識,本次優設獨家專題為你從零開始梳理出 UI 工作流程,適合新手閱讀學習。

往期回顧:

產品發展日趨平穩時,產品定位和品牌形象已進入穩定狀態,參與設計的人越來越多,設計的統一性和效率的問題也漸漸顯現。因此,為了保證平臺設計統一性,提升團隊工作效率,打磨細節體驗,就需要我們定義和整理設計規范。

確定規范內容

UI 設計中,設計規范是一個關鍵步驟。知名大廠基本上都有一套自己的完整規范體系,在整理設計規范時,以大平臺規范體系作為參考,針對產品自身情況增刪,整理出我們自己所需要的規范內容,能有效地避免規范內容遺漏缺失。

拓展鏈接:各大官網設計規范集合

色彩規范

顏色是設計中最重要的元素,顏色的運用與搭配決定設計的品質感。在 UI 設計中,顏色的使用規范主要在于:品牌主色、文本顏色、界面顏色(背景色、線框色)等。

字體規范

不同的字體氣質不一樣,并且不同場景下帶給人的感受也不一樣。所以需要在設計的時候考慮到字體的設計效果,然后在設計規范中注明。

圖標規范

在 UI 界面中,具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計???,產品的每個頁面中都有可能存在圖標。設計規范中,圖標一般按照用途分為兩類:應用圖標、功能圖標。

應用圖標:各種應用程序的識別標志,在應用商店里下載的一些應用程序的標志。

功能圖標:規范中最好標明圖標格式與使用方式。比如 Web 設計,圖片可以使用 iconfont 管理,可生成代碼交付給前端開發;如果是原生 APP,那么需要標注圖標導出格式與尺寸。

圖片規范

圖片作為界面設計的重要組成部分,需要標明尺寸規范,分為不同用途的種類。

設計尺寸&柵格系統

設計尺寸,是指進行設計時,選擇的畫板尺寸。例如是 750*1334,還是 375*667,每個公司設計的基準都不一樣,所以設計尺寸并沒有規定只能用某一個尺寸,我們在設計時,使用的 1 倍圖為基準進行設計的,基準尺寸為 375*667。

柵格系統,是運用固定的格子設計版面布局,在 UI 設計和前端開發中被廣泛應用的一套體系。在設計尺寸中提到柵格系統,是因為現在的設計基本都是一稿適配多端,而柵格系統能很好的解決這個問題。

△ Christie Tang

柵格系統拓展鏈接:《看不懂不會用的柵格系統,這篇幫你徹底掌握它!》

界面布局

布局是頁面構成的前提,是后續展開交互和視覺設計的基礎。設計規范中可以提供常用的布局模板來保證同類產品間的一致性,設計者在選擇布局之前,需要注意以下幾點原則:

  • 明確用戶在此場景中完成的主要任務和需獲取的決策信息。
  • 明確決策信息和操作的優先級及內容特點,選擇合理布局。

△部分布局類型展示

控件規范

控件是指產品界面中可操作的部件,與組件是有一些區別的??丶胛?Control,組件翻譯為 Component。

通俗的解釋說法就是組件為多個元素組合而成,控件為單一元素組合而成。

常用的 UI 控件(Control):按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。

以下列舉一些我們在 APP 設計規范中整理的內容。

1. 按鈕

按鈕有 5 個狀態:正常、點擊、懸停、加載、禁用。需要在規范中分別羅列出這五個狀態,標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度,按鈕文本大小、顏色值。如果是圖標按鈕的話,除了上述參數值以外,還需要標注 icon 和按鈕文本之間的間距,icon 圖標的大小。

2. 輸入框

用于單行信息錄入文字上下居中顯示,支持鍵盤錄入和剪切板輸入文本,對特定格式的文本進行處理:密碼隱藏顯示、身份證、卡號分段顯示,標注寬高。

3. 選擇

選擇可分為單選與多選,并且也有五種不同狀態:未選擇、已選中、未選懸停、已選失效、未選失效項。規范中需展示出所有效果狀態。

4. 選項卡

用于讓用戶在不同的視圖中進行切換。標簽數量,一般是 2-5 個;其中,標簽中的文案需要精簡,一般是 2-4 個字。每個標簽所占的寬度可適當調整。

5. 滑動開關

滑動開關有兩個互斥的選項(例如開/關、是/否、啟動/禁止),它是用來打開或者關閉選項的控件。選擇其中一個選項會立即執行操作。

6. 進度條

用于向用戶展示步驟的步數以及當前所處的進程。

7. 角標

用于聚合型的消息提示,一般出現在通知圖標或頭像的右上角,通過醒目的視覺形式吸引用戶眼球。

組件規范

常用的 UI 組件(Component):表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。

△ Ant design 移動組件

在 skecth 中設計時,使用 Symbol 創建的組件,在后期整理時,可以節省許多的時間。

推薦閱讀:《Sketch 進階教程!利用Symbol 建立一套設計規范組件庫?》

當然,Figma 也同樣具備這樣的能力,你所創建的組件都存在于 Assets 中。

缺省頁面

  • 空狀態頁面:顯示對應的頁面空狀態的圖標,增加相應的引導按鈕。
  • 無網絡狀態:在沒有連接到網絡時的提示頁面。
  • 404&505頁面:發生未知錯誤時的頁面。

規范優先級

了解規范的內容有哪些之后,我們需要確認的是規范優先級,規范內容龐大復雜,基礎的、必要的、高性價比的放在第一個版本中,復雜的往后放,隨著產品的迭代,規范才會越來越完整。

一個好的規范應該是高效的、簡單易懂的。具體執行時,我們應該確保分類合理、規范本身保持一致、布局排版易讀,來提升設計師查閱的效率;確保定義清晰、描述準確、場景完備,來幫助設計師理解和使用。但值得注意的是,設計規范并不是「圣經」,不要因為規范而限制了自己的思維,當發現規范有問題的時候,要及時去修正,而不是做了一次之后,一直沿用,永不修改。

注:本系列文章為優設獨家專題,請勿轉載。

歡迎添加作者微信交流:

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/design-specification-4

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

sketch 界面設計 版式設計 排版布局 職場 優設專訪 設計師干貨 優設大課堂 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 設計規范 海報設計 設計趨勢 用戶體驗設計 動效設計 平面設計 logo設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里