設計規範：IOS平台設計規範

今天正式進入到UI知識體系的第二個系列：設計規範。了解各大平台的設計規範是每個UI設計師必經的過程。不管是剛入行的設計師，還是入行2、3年的設計師，如果說這些基本的知識都不清楚的話，就會顯得自己不夠專業。今天說所要講的是IOS平台的設計規範，那麼它的規範到底有哪些呢？

一、為什麼要了解設計規範？

有人說，我們是設計師啊，遵從那麼多設計規範，不是限制我們的設計么？UI設計不是藝術設計，我們需要基於設備和現有技術去設計。如果你設計的再漂亮，再天馬行空，可是技術實現不了，那你的設計只能是「漂亮的小媳婦而已」，只能自己在家欣賞，帶出去的話就太丟人了。了解設計規範也能在設計前期就能避免一些不必要的錯誤，極大提高我們的工作率。

二、UI設計師需要了解哪些規範？

在工作中發現設計師在IOS端設計中常遇到的規範問題來自五個方面：尺寸、字體、圖標、按鈕、命名。

01、尺寸：iPhone常見設備尺寸

目前市場上的IOS設備的尺寸基本上是以下幾種:

5/5C/5S：320x480pt 640X1136px

6/6S/7/7S：375x664pt 640X1136px

6 Plus / 6S Plus / 7 Plus / 7S Plus：414x736pt 1242X2208px

X：375x812pt 1125X2436px

iPhone X是我們設計時需要關注的焦點，它首次使用了OLED屏幕，解析度達到1125×2436px @3x，PPI達到了458ppi。上面狀態欄88px，下面的home觸發區域為68Px，所以IphoneX的設計安全區域為2280px。

尺寸：用哪種尺寸適配

UI設計師在設計IOS端應用的時候只需要出一套設計稿，所有的設計稿尺寸以750×1334 px來做設計稿尺寸。因為這個尺寸從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。如果你是使用Sketch的話，用1倍圖（375X667pt）來做設計；如果你是使用ps的話，以750X1334px來做設計。

02、字體：字體和字體大小規範

字體

IOS9：中文字體為冬青黑體，英文字體為Helvetica Neue

IOS10、IOS11：中文字體為蘋方(Ping Fang SC Light)，英文字體為San Francisco

我們盡量是選擇高版本的字體去做設計，目前悠閑使用IOS11版本的系統字體

大小規範

導航欄標題： 32-36PX

標題文字： 30-32px

內容區域文字：24-28px

輔助性文字： 20-24px

這只是一個常見的字體大小規範，前人經驗所得，我們還是需要根據實際情況來制定規範

03、圖標：圖標的設計規範

圖標的設計大小：我們設計圖標的時候統一在1024X1024的畫板中進行製作，當使用的時候等比縮放。

視覺統一：正方形、矩形、圓形、長方形這幾種情況下的圖標需要進行一些調整才能達到視覺的平衡，具體情況參照上方的圖片示例。

常見的使用尺寸：系統圖標常見的使用尺寸為（12px、14px、16px、18px、24px、32px） 業務圖標常見的使用尺寸為（32px、48px、64px）

系統圖標通常用來表示常用的操作，比如：刪除、保存、編輯。也可以用來表示一個文件或者狀態。

業務圖標不同於系統圖標，本身不帶有功能性的操作，而是輔助配合文案的一個抽象化圖形。相較於系統圖標，業務圖標在設計的細節上更為豐富，使用的尺寸也比較大。

（來自https://ant.design/docs/spec/icon-cn）

04、按鈕：按鈕的狀態及樣式

小凡發現很多設計師在做手機端設計稿的時候很多都會遺漏掉按鈕不同狀態的設計，還有的設計師問我，IOS端的按鈕有幾種狀態。

05、命名：UI設計命名規範

關於UI命名規範，這是最基本的，但卻也是非常重要的。規範的命名可以幫助我們高效的和同事、開發對接，提升工作的效率。對於自己來說，可以幫助後期文件方便的修改、查找、整理；對於團隊來說，可以加快項目的協同，提升整體的工作效率；對於開發來說，可以節省大量的時間成本，加快溝通的效率。

命名規則：

模塊_類別_功能_狀態.png

例如：home_button_search_default.png

釋義為：主頁_按鈕_搜索_默認.png

這是我工作中的命名規則，你也可以更具項目的實際情況制定其他合適的命名規則

總結：

IOS平台設計規範：尺寸、字體、圖標、按鈕、命名

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！