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

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

2019/08/12 27292評論 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頁面:發生未知毛病時的頁面。

規范優先級

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

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

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

云南体彩网歡迎添加作者微信交流:

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

發表評論 加載中....

評論加載中....

uisdc

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

您還沒有登錄

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

微信掃碼

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

把好文章收藏到微信

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