有很多剛入行的設計伙伴會對各種設計規(guī)范抓狂，也遇到很多來咨詢這方面問題的，我特意為大家找來一篇關于設計規(guī)范解剖的一些文章，今天給大家?guī)淼氖堑谝黄秈os設備的設計規(guī)范與細節(jié)拆解》。

希望今天的這篇文章可以讓你對 iOS 的設計規(guī)范有一定的了解，所謂規(guī)范是死的，人是活的，變化是難以控制的，希望大家不要陷入規(guī)范而做出沒有突破的設計。我們可以了解與研究規(guī)范，但是也要敢于突破，這樣才能不斷輸出差異化的設計作品。

介紹就說到這里，下面我們一起來看看作者的文章，歡迎大家多多留言互動。

一. 規(guī)范的意義

1. 為什么要遵循規(guī)范？

規(guī)范由設計升華而來，從視覺的角度來說，實際上就是一個素材庫。產(chǎn)品有什么樣的視覺呈現(xiàn)和元素定義，都有可遵循的標準，保證日后迭代可以延續(xù)產(chǎn)品所傳遞的思想跟價值，最大限度保證了產(chǎn)品的一致性。

2. 界面規(guī)范跟人起名字一樣

姓（一到兩個字）+名（一到兩個字）

3. UI要遵循哪些規(guī)范？

二. iOS 設計規(guī)范

iOS 設計三大原則：

1. 視覺層：清晰

在整個系統(tǒng)中，文字在每一個尺寸都是清晰易讀的，圖標精確而清晰，裝飾精巧而合適，使得用戶更易理解功能。負空間、顏色、字體和界面元素巧妙突出重要內(nèi)容并傳達交互性。

設計要點 01：顏色

設計早期可以通過較灰的顏色來避免色彩對于間距和布局的影響，一旦設計完成，需要通過調(diào)整顏色和色調(diào)，保證色彩在任何情況下都可以辨識。同時，也需要關注色盲人群的體驗。

設計要點 02：排版

對任何信息進行排版的時候，首先必須要掌握的是對齊/重復/親密/對比，貫穿設計的四大原則。

2. 交互層：遵從

流暢的動畫和清晰美觀的界面可以幫助人們了解和與內(nèi)容交互，而不應該（因為太過花哨而）干擾到用戶的使用。內(nèi)容通常充滿整個屏幕，而變透明和模糊常常暗示有更多內(nèi)容。

3. 結構層：深度

使用不同的視覺層級和真實的運動效果來傳達層次的感覺，賦予界面活力，并促進用戶的理解，讓用戶通過觸摸和探索來發(fā)現(xiàn)程序的功能不僅會使用戶產(chǎn)生喜悅感，更加方便了解功能，還能使用戶關注到額外內(nèi)容。在對內(nèi)容進行導航時，層級的專長效果提供一種有深度的感覺。

iOS 規(guī)范細節(jié)拆解

1. 界面結構

設計要點 01：狀態(tài)欄（Stayus bar）

a. 狀態(tài)欄始終固定在屏幕上邊緣；

b. @1x 下尺寸為 20pt；

c. 不要自定義狀態(tài)欄；

d. 避免滾動內(nèi)容直接透過狀態(tài)欄顯示（設計抽屜導航時）；

e. 在使用全屏觀看媒體時，可以考慮隱藏狀態(tài)以及所有頁面 UI。

設計要點 02：導航欄（Navigation Bar）

a. 導航欄是半透明的（70%），位于狀態(tài)欄下方；

b. @1x 下尺寸為 44pt（iPoneX 是 88pt）；

c. 不要自定義導航欄；

d. 避免導航欄內(nèi)內(nèi)容過多，空間數(shù)目一般不超過 2；

e. iOS11 導航欄分為兩種形式。

設計要點 03：標簽欄（Tab bar）

a. 標簽欄是半透明的（70%），始終出現(xiàn)在屏幕底部；

b. @1x下尺寸為 49pt（iPhoneX 上為 83pt）；

c. 標簽欄一次最多承載 5 個標簽，多于 5 個的圖標以列表形式收納到“更多”里；

d. 標簽欄用來組織整個應用層面的信息結構；

e. 標簽欄的圖標有正負形。

設計要點 04：工具欄（Tool bar）

a. 工具欄是半透明的（70%）；

b. @1x 下尺寸為 44pt（iPhoneX上為83pt）；

c. 工具欄內(nèi)放置用戶最常用的指令；

d. 工具欄可以放置文字或圖標，當項目超過 3 個以上的項目可以使用圖標。

2. 系統(tǒng)字體

在用戶界面中，每一個單詞和字母都至關重要，好的字體等于好的設計。字體成了界面設計的基石，而我們設計師，則是些這類「信息基石」的修造者。

很多產(chǎn)品都是這樣，到了改版的時候，大多都是先不管你好與不好，先噴為敬，噴就萬事了。但是話說回來，從下圖中的 iOS8 到 iOS9 的更新中，字體更換后 iOS9 確實要比原來的 iOS8 看起來更清楚，不論是漢字還是數(shù)字、英文，都要更清晰、直觀。

3. 人機交互

設計要點：手勢（Gestures）

用戶通過在屏幕上執(zhí)行手勢與 iOS 設備進行交互，這些手勢與內(nèi)容密切關系，并增強與對象的直接操控感。

4. 實際案例解析（以內(nèi)容類產(chǎn)品為例）

這類產(chǎn)品更多的是內(nèi)容為王，它連接的是人與信息，核心是信息，用戶用產(chǎn)品是為了以最快的速度獲取最有用的信息。如何抓住自己有的，而大家沒有的內(nèi)容才是王道，愛奇藝的各種獨播、自制等均可以說明這一點。

設計要點 01：左圖右文與左文右圖

閱讀 APP 內(nèi)容設計符合用戶瀏覽習慣的排版方式，把不必要的信息弱化，突出內(nèi)容，減少和弱化不必要的干擾信息，讓用戶更專注。

設計要點 02：搜索體驗

在頂部導航欄，隨時搜索關鍵詞，記錄用戶搜索歷史，每天熱門推薦也是很有閱讀 APP 人性化的功能。

設計要點 03：內(nèi)容刷新

下拉刷新功能是用戶習慣認知的一種交互方式，閱讀類的內(nèi)容刷新還有一種常見形式“Feed 流”，即上滑出現(xiàn)新內(nèi)容。

設計要點 04：頁面加載

分布加載：優(yōu)先加載占用網(wǎng)絡資源少的內(nèi)容，再加載占用網(wǎng)絡資源多的內(nèi)容；

懶加載：主要出現(xiàn)在長界面中，用戶可以不斷地向下查看內(nèi)容，達到某個點之后或觸發(fā)拉動后自動加載更多內(nèi)容；

預加載：是一種提前加載的方式，例如在閃屏的時候提前加載首頁內(nèi)容。

設計要點 05：個人中心

閱讀 APP 可以在個人中心的設計上考慮板式的選擇，從板式上體現(xiàn)對社交的傾向性。

設計要點 06：閱讀體驗

盡量減少不必要的信息，讓用戶專注于內(nèi)容文字本身，把設置等干擾元素隱藏到二級彈窗，同時加入更多人性化功能，長按對文字編輯和查詢。

設計要點 07：評論回復

用戶在閱讀內(nèi)容可直接進行評論和回復，無需二次點擊，簡化操作流程。

作者 ：NGchao

原文鏈接：https://www.zcool.com.cn/article/ZOTI4NTMy.html