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

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

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

一. 規(guī)范的意義

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

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

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

姓（一到兩個(gè)字）+名（一到兩個(gè)字）

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

二. iOS 設(shè)計(jì)規(guī)范

iOS 設(shè)計(jì)三大原則：

1. 視覺層：清晰

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

設(shè)計(jì)要點(diǎn) 01：顏色

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

設(shè)計(jì)要點(diǎn) 02：排版

對(duì)任何信息進(jìn)行排版的時(shí)候，首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比，貫穿設(shè)計(jì)的四大原則。

2. 交互層：遵從

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

3. 結(jié)構(gòu)層：深度

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

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

1. 界面結(jié)構(gòu)

設(shè)計(jì)要點(diǎn) 01：狀態(tài)欄（Stayus bar）

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

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

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

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

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

設(shè)計(jì)要點(diǎn) 02：導(dǎo)航欄（Navigation Bar）

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

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

c. 不要自定義導(dǎo)航欄；

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

e. iOS11 導(dǎo)航欄分為兩種形式。

設(shè)計(jì)要點(diǎn) 03：標(biāo)簽欄（Tab bar）

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

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

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

d. 標(biāo)簽欄用來組織整個(gè)應(yīng)用層面的信息結(jié)構(gòu)；

e. 標(biāo)簽欄的圖標(biāo)有正負(fù)形。

設(shè)計(jì)要點(diǎn) 04：工具欄（Tool bar）

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

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

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

d. 工具欄可以放置文字或圖標(biāo)，當(dāng)項(xiàng)目超過 3 個(gè)以上的項(xiàng)目可以使用圖標(biāo)。

2. 系統(tǒng)字體

在用戶界面中，每一個(gè)單詞和字母都至關(guān)重要，好的字體等于好的設(shè)計(jì)。字體成了界面設(shè)計(jì)的基石，而我們?cè)O(shè)計(jì)師，則是些這類「信息基石」的修造者。

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

3. 人機(jī)交互

設(shè)計(jì)要點(diǎn)：手勢（Gestures）

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

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

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

設(shè)計(jì)要點(diǎn) 01：左圖右文與左文右圖

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

設(shè)計(jì)要點(diǎn) 02：搜索體驗(yàn)

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

設(shè)計(jì)要點(diǎn) 03：內(nèi)容刷新

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

設(shè)計(jì)要點(diǎn) 04：頁面加載

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

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

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

設(shè)計(jì)要點(diǎn) 05：個(gè)人中心

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

設(shè)計(jì)要點(diǎn) 06：閱讀體驗(yàn)

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

設(shè)計(jì)要點(diǎn) 07：評(píng)論回復(fù)

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

作者 ：NGchao

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