先是整個(gè)文章的框架

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

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

ui設(shè)計(jì)要遵循哪些規(guī)范？

操作系統(tǒng)規(guī)范

系統(tǒng)平臺(tái)的規(guī)范可以讓新手少走些彎路，遵循規(guī)范的前提可以讓界面不出大問(wèn)題。

公司設(shè)計(jì)規(guī)范

遵循公司的規(guī)范可以讓ui風(fēng)格與公司形象保持一致，更具品質(zhì)。

產(chǎn)品內(nèi)設(shè)計(jì)規(guī)范

需要基于平臺(tái)和公司規(guī)范基礎(chǔ)上參與制作，產(chǎn)品規(guī)范可以讓界面的設(shè)計(jì)更統(tǒng)一協(xié)調(diào)。

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

視覺(jué)層：清晰

在整個(gè)系統(tǒng)中，文字在每一個(gè)尺寸都是清晰易讀的，圖標(biāo)精確而清晰，裝飾精巧而適合，使得用戶(hù)更容易理解功能，負(fù)空間，顏色、字體、圖形和界面元素巧妙突出重要內(nèi)容，并傳達(dá)交互性?！獪p少用戶(hù)學(xué)習(xí)成本，避免過(guò)度設(shè)計(jì)。

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

設(shè)計(jì)早期可以通過(guò)較灰的顏色來(lái)避免色臺(tái)對(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ì)的四大原則。

交互層：遵從

流暢的動(dòng)畫(huà)和清晰美觀的界面可以幫助人們了解和與內(nèi)容交互，而不應(yīng)該（因?yàn)樘^(guò)花哨）而干擾到用戶(hù)的使用。內(nèi)容通常充滿整個(gè)屏幕，而半透明和模糊常常暗示有更多內(nèi)容?！層脩?hù)知道從哪里來(lái)，即將去哪兒。

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

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

從z軸上進(jìn)行區(qū)分主任務(wù)層、底板層、背景層

主任務(wù)層

物理空間最高層級(jí)，放置主任務(wù)元素，如主要功能入口，主元素（車(chē)輛）等，需要加以投影抬高視覺(jué)層級(jí)。

底板層

物理空間中間層級(jí)，作為托起主元素的底板，色彩為白色，二維空間最高層級(jí)。

背景層

物理空間最低層級(jí)，作為整個(gè)產(chǎn)品的背景元素，多位重色（深灰色、主題藍(lán)色等）

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

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

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

@1x下尺寸為20pt

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

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

在用戶(hù)全屏觀看媒體時(shí)，可以考慮隱藏狀態(tài)欄以及所有界面ui

Tip：很多產(chǎn)品會(huì)故意隱藏狀態(tài)欄，從而增加頁(yè)面停留時(shí)長(zhǎng)

設(shè)計(jì)要點(diǎn) 02:導(dǎo)航欄（navigation bar）

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

@1x下尺寸為44pt（iphone x是88pt）

避免導(dǎo)航欄內(nèi)內(nèi)容過(guò)多，功能數(shù)目一般不超過(guò)2個(gè)

Ios導(dǎo)航欄分兩種形式

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

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

@1x下尺寸為49pt（iPhone x上為83pt）

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

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

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

設(shè)計(jì)要點(diǎn) 04:工具欄（tool bar）——通常在二級(jí)頁(yè)面

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

@1x下尺寸為44pt（iphone x上為83pt）

工具欄內(nèi)放置用戶(hù)最常用的指令

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

系統(tǒng)字體

在用戶(hù)界面中，每一個(gè)單詞和字母都至關(guān)重要。好的字體等于好的設(shè)計(jì)。字體成了界面設(shè)計(jì)的基石，而我們?cè)O(shè)計(jì)師，則是這些這類(lèi)【信息基石】的修造者。Ios 9之后，IOS中文字體：蘋(píng)方；英文字體 san francisco（舊金山）評(píng)判一個(gè)字體的適用程度，只需看兩個(gè)方面：1、看數(shù)字：3、6、9；數(shù)字區(qū)分是否明顯2、看大寫(xiě)的I和小寫(xiě)的l。

人機(jī)交互

Ios 11將這個(gè)先進(jìn)的移動(dòng)操作系統(tǒng)又一次提升至新標(biāo)準(zhǔn)，它讓iphone和ipad變得更為強(qiáng)大、更個(gè)性化，同時(shí)也變得更為智能。

手勢(shì)（gestures）

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

內(nèi)容類(lèi)產(chǎn)品UI設(shè)計(jì)要點(diǎn)

內(nèi)容類(lèi)產(chǎn)品分為PGC和UGCPGC：專(zhuān)業(yè)生產(chǎn)內(nèi)容——騰訊新聞UGC：用戶(hù)生產(chǎn)內(nèi)容——抖音

內(nèi)容類(lèi)產(chǎn)品解析

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

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

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

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

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

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

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

分布加載：優(yōu)先加載占用網(wǎng)絡(luò)資源少的內(nèi)容，再加載占用網(wǎng)絡(luò)資源多的內(nèi)容懶加載：主要出現(xiàn)在長(zhǎng)界面中，用戶(hù)可以不斷地向下查看內(nèi)容，達(dá)到某個(gè)點(diǎn)之后或觸發(fā)拉動(dòng)后自動(dòng)加載更多內(nèi)容。預(yù)加載：是一種提前加載的方式，例如在閃屏的時(shí)候提前加載首頁(yè)內(nèi)容

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

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

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

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

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

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

像素px

像素是指由圖像的小方格即所謂的像素（pixel）組成的，這些小方塊都有一個(gè)明確的位置和被分配的色彩數(shù)值，而這些一小方格的顏色和位置就決定該圖像所呈現(xiàn)出來(lái)的顏色。

物理尺寸cm/mm

就是指我們能用的物理方法測(cè)出的尺寸（如物體長(zhǎng)2m），它是可見(jiàn)的尺寸。

像素密度ppi

即每英寸屏幕所擁有的像素?cái)?shù)，像素密度越大，顯示畫(huà)面細(xì)節(jié)就越豐富。

視網(wǎng)膜屏幕retina

當(dāng)你所拿的東西距你10-12英寸（約25-30厘米時(shí)），它只要達(dá)到300ppi這個(gè)神奇的數(shù)字（每英寸300個(gè)像素點(diǎn)）以上，你的視網(wǎng)膜就無(wú)法分辨出像素點(diǎn)了。

邏輯像素pt（dp）與實(shí)際像素px（IOS用pt、安卓用dp）

作為設(shè)計(jì)師，當(dāng)你在iphone 8 plus手機(jī)的屏幕上看到一條水平橫線時(shí)，1px應(yīng)該是正常的預(yù)期，但是細(xì)想一下，這個(gè)1px，你就會(huì)發(fā)現(xiàn)，腦子里形成的這個(gè)“1px”的概念其實(shí)正是邏輯像素。很顯然，iPhone 8 plus 的分辨率非常高，以至于人眼已經(jīng)分辨不出一個(gè)顯像單元的大小，所以如果用實(shí)際的1px來(lái)顯示一條線的話，應(yīng)該很難看得清楚。現(xiàn)如今我們都是用pt來(lái)標(biāo)注蘋(píng)果ios 375*667 ptiPhone x 375*812 pt安卓 360*640 dp附一張圖，方便理解

什么情況下需要單獨(dú)做適配？

適配：同一個(gè)界面，不同的機(jī)型，用戶(hù)看到的內(nèi)容應(yīng)該是一致的。

邏輯尺寸寬度變化

屏幕顯示區(qū)域異形

常見(jiàn)的適配方案（同樣的內(nèi)容，顯示在不同寬度的手機(jī)上）

適配方案A 間距等比放大、頭像大小不變

適配方案B 頭像等比放大、間距大小不變（常用模式）

適配方案C 間距等比放大、當(dāng)超過(guò)一定數(shù)值后增加一個(gè)頭像

適配方案D 間距與頭像都等比放大

精準(zhǔn)適配細(xì)節(jié)

字符行高與還原度

在sketch中，文字是有默認(rèn)行高的，一般是字號(hào)的1.4倍。當(dāng)文字只有一行時(shí)，需要手動(dòng)調(diào)整行高與字號(hào)相等，而文字出現(xiàn)多行時(shí)，其margin就容易被行高打亂了節(jié)奏。

文字適配常見(jiàn)情況

對(duì)于適配來(lái)講，最不確定的因素就是文字的長(zhǎng)度了，文字適配的好與壞對(duì)于用戶(hù)來(lái)講有非常直接的感受?！詣?dòng)換行、超出省略、縮字號(hào)、限定字符

自動(dòng)換行：出現(xiàn)多行幾率較高的文本信息，并且對(duì)于當(dāng)前頁(yè)面的信息展示較為重要時(shí)?；蛘弋?dāng)前頁(yè)面無(wú)二級(jí)頁(yè)面時(shí)，必須通過(guò)換行的方式來(lái)顯示全部

超出省略：當(dāng)前省略的信息頁(yè)面有二級(jí)頁(yè)面，并且二級(jí)頁(yè)面點(diǎn)擊頻率較高時(shí)，或者當(dāng)前需要省略的內(nèi)容非重要信息。

縮字號(hào)：文本超出一行的幾率不大，但偶爾會(huì)出現(xiàn)時(shí)。沒(méi)有二級(jí)頁(yè)面或者信息內(nèi)容對(duì)于當(dāng)前頁(yè)面較為重要。

限定字符：防止文本適配出現(xiàn)問(wèn)題最根本的就是從后臺(tái)字符數(shù)量上解決，適用于非用戶(hù)主觀輸入的信息，或者可以預(yù)期用戶(hù)的最大字符數(shù)量時(shí)。

注明：（總行高-字號(hào)大?。?2=文本框空白高度

關(guān)于UI設(shè)計(jì)的更多內(nèi)容，可以關(guān)注我的個(gè)人公眾號(hào)「云木的設(shè)計(jì)日記」，與我共同學(xué)習(xí)進(jìn)步。

公眾號(hào)內(nèi)回復(fù)：云木

即可加我二維碼，與我交流指教。