一 開篇：為什么需要建立設(shè)計規(guī)范？
1、保證設(shè)計的一致性。
對內(nèi)部：多個設(shè)計師合作，依然能保證設(shè)計風格的統(tǒng)一。
對用戶：提高用戶體驗，提高操作效率，加深對產(chǎn)品的記憶。
2、提高開發(fā)效率
與前端有效溝通的工具，提高設(shè)計還原度，降低對接成本。
開發(fā)可以建立公共組件庫，極大的提高了開發(fā)效率。
3、方便產(chǎn)品迭代
隨著產(chǎn)品的業(yè)務(wù)變化，發(fā)現(xiàn)一些問題或者需要優(yōu)化用戶體驗的時候，針對單個控件進行調(diào)整，就可以影響全局，十分便捷。
二 移動端設(shè)計規(guī)范之平臺設(shè)計語言
優(yōu)秀設(shè)計來自世界互聯(lián)網(wǎng)公司，前沿的設(shè)計理念和完善的設(shè)計語言是我們設(shè)計師的學習目標。了解和學習后，更好的進行產(chǎn)品設(shè)計。
前沿平臺
1、谷歌設(shè)計語言 Google Design
http://design.google
谷歌設(shè)計中心，展示了谷歌的設(shè)計工作和概念，包括了 Material Design 在內(nèi)的所有關(guān)于產(chǎn)品、體驗、設(shè)計、品牌等互聯(lián)網(wǎng)領(lǐng)域的設(shè)計思考。
2 、蘋果 IOS 設(shè)計規(guī)范
蘋方人機界面設(shè)計指南，含有IOS設(shè)計規(guī)范，指導(dǎo)界面設(shè)計。蘋果人機界面設(shè)計指南，詳細介紹了蘋果公司最新的移動設(shè)備和系統(tǒng)，設(shè)計屏幕分辨率、圖標設(shè)計規(guī)范、色彩搭配、文字等設(shè)計語言，同時還提供了 UI 設(shè)計資源可供大家使用。
3、Ant Design
螞蟻金服設(shè)計平臺是國內(nèi)互聯(lián)網(wǎng)公司之一，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計與開發(fā)的體驗設(shè)計方案，包含了網(wǎng)頁端的顏色、字體、圖標、組件等頁面設(shè)計布局等設(shè)計指導(dǎo)網(wǎng)站。
螞蟻集團的企業(yè)級產(chǎn)品是一個龐大且復(fù)雜的系統(tǒng)，數(shù)量多且功能復(fù)雜，而且變動和并發(fā)頻繁，常常需要設(shè)計者與開發(fā)者能快速做出響應(yīng)。同時這類產(chǎn)品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩(wěn)定且高復(fù)用性的內(nèi)容。
隨著商業(yè)化的趨勢，越來越多的企業(yè)級產(chǎn)品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，我們（螞蟻集團體驗技術(shù)部）經(jīng)過大量項目實踐和總結(jié)，逐步打磨出一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系 —— Ant Design。基于「自然」、「確定性」、「意義感」、「生長性」四大設(shè)計價值觀，通過模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計者專注于更好的用戶體驗。
4、Fluent Design System
微軟基于Windows 10 的設(shè)計指南，它可以幫助開發(fā)者設(shè)計和構(gòu)建流暢、精美的應(yīng)用程序，包括人機界面布局、樣式、控件和設(shè)計工具包下載。
微軟將這套全新的設(shè)計語言名為 Fluent Design System（流暢設(shè)計體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動畫）、Material（材質(zhì)）和 Scale（縮放）。
5、WeUI
WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，包含表單、基礎(chǔ)組件、操作反饋、導(dǎo)航等各種各樣的設(shè)計元素。它由微信官方設(shè)計團隊為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計，使得用戶的使用感知更加統(tǒng)一。
具體看下面的內(nèi)容，有詳細介紹。
6、Airbnb Design
Airbnb 是一家享譽全球的民宿服務(wù)公司。同時，這背后有一個他們自己強大的設(shè)計團隊，為Airbnb提供著設(shè)計方面工作。我日常工作使用到的（動效方面）Lottie 也是他們設(shè)計開發(fā)的產(chǎn)物（感謝）。他們擁有自己的設(shè)計網(wǎng)站Airbnb Design。其中一些文章介紹 DSL， 正如在《設(shè)計體系》一書介紹，他們嚴格遵守著自己的設(shè)計規(guī)范和原則。保證著Airbnb的產(chǎn)品在設(shè)計上的一致性，可用性等，目的是為不同國家的用戶提供好的用戶體驗。
界面設(shè)計中的字體思考
文字是 App 中最核心的元素之一，產(chǎn)品傳達給用戶的內(nèi)容。字體有無襯線字體和襯線字體。無論iOS 還是 Android 系統(tǒng)，它們都有內(nèi)置的默認字體可供設(shè)計師使用。用心處理好字號大小、字體顏色與字體間距的處理上。
用戶界面設(shè)計中，字體是界面設(shè)計中的基本元素。設(shè)計師要設(shè)計好界面中的字體顏色、字體間距、字號的大小、
字重等思考。
蘋果系統(tǒng)中默認的字體是：蘋方字體。英文字體和數(shù)字字體是：舊金山字體，San Francisco 字體。
其中數(shù)字字體比較好的字體可以用：Dinner 字體。
安卓系統(tǒng)默認的中文字體是：思源黑體。 英文字體是：Roboto 字體。
界面設(shè)計中的字體設(shè)計規(guī)范，如下圖所示。
介紹幾款西文字體：
無襯線字體，在字的筆畫開始和結(jié)束的地方，沒有額外裝飾，筆畫粗細均勻，適合于主題設(shè)計的屏幕展示，給人一種自然舒適感。例如：無裝飾性的易識別的代表字體：Helvetica 英文字體、San Francisco 英文字體、
Roboto 英文字體、Arial 英文字體。
襯線字體是字的筆畫開始和結(jié)尾處的位置有額外裝飾，同時筆畫的粗細有所不同，一般適用于印刷排版，具有較高的可讀性。例如：具有裝飾性的代表字體：Times New Roman。
DIN 字體
DIN 字體是效力于德國交通標識和公共空間的經(jīng)典字體，是一種很好的數(shù)字字體。
Futura 字體
Futura 字體 ，這個字體現(xiàn)代、時尚具有幾何特征，是很多雜志和時尚品牌的常用字體，例如：時尚氣質(zhì)的品牌 LV 的商標字體就是這種英文字體。
Roboto 字體
Roboto 字體，是谷歌公司為 Android 操作系統(tǒng)開發(fā)的默認英文字體，具有“現(xiàn)代感”、“親和力” 的設(shè)計感。
San Francisco 字體
San Francisco 字體 ，蘋果公司設(shè)計的，蘋果公司推出的 Apple Watch 和 iOS 移動端等系統(tǒng)的英文字體。
Didot 字體
Didot 字體， 是世界上最著名的英文字體之一，美感，可以用在 英文標題、產(chǎn)品設(shè)計、廣告使用的一款字體。
例如：時尚雜志 VOGUE 標題字 就是運用了這個字體。
三 移動端設(shè)計規(guī)范之設(shè)計主題、設(shè)計原則、屏幕的設(shè)計尺寸：
iOS 設(shè)計主題
iOS的三個主要主題將其與其他平臺區(qū)分開來：
- 明晰。在整個系統(tǒng)中，各種大小的文字都清晰易讀，圖標精確而清晰，裝飾物微妙而恰當，對功能的高度關(guān)注激發(fā)了設(shè)計的靈感。負空間，顏色，字體，圖形和界面元素巧妙地突出了重要內(nèi)容并傳達了交互性。
- 尊敬 流暢的動作和清晰美觀的界面可幫助人們理解內(nèi)容并與之互動，而從未與之競爭。內(nèi)容通常會填滿整個屏幕，而半透明和模糊通常會暗示更多內(nèi)容。最少使用邊框，漸變色和陰影可以保持界面明亮通風，同時確保內(nèi)容至關(guān)重要。
- 深度。獨特的視覺層和逼真的動作傳達層次感，賦予生命力并促進理解。觸摸和可發(fā)現(xiàn)性提高了人們的愉悅感，使他們能夠訪問功能和其他內(nèi)容而不會丟失上下文。當您瀏覽內(nèi)容時，過渡會提供一種深度感。
設(shè)計原則
為了最大限度地提高影響力和影響范圍，請在想象應(yīng)用程序的身份時牢記以下原則。
審美完整性
審美完整性表示應(yīng)用程序的外觀和行為與其功能的集成程度。例如，一個可以幫助人們執(zhí)行重要任務(wù)的應(yīng)用程序可以通過使用微妙，醒目的圖形，標準控件和可預(yù)測的行為來使他們專注。另一方面，沉浸式應(yīng)用程序（例如游戲）可以提供引人入勝的外觀，帶來樂趣和刺激，同時鼓勵發(fā)現(xiàn)。
一致性
一致的應(yīng)用程序通過使用系統(tǒng)提供的界面元素，知名的圖標，標準的文本樣式和統(tǒng)一的術(shù)語來實現(xiàn)熟悉的標準和范例。該應(yīng)用程序以人們期望的方式結(jié)合了功能和行為。
直接操縱
屏幕內(nèi)容的直接操作可以吸引人們并促進理解。用戶在旋轉(zhuǎn)設(shè)備或使用手勢來影響屏幕內(nèi)容時會經(jīng)歷直接的操縱。通過直接操作，他們可以看到其操作的直接可見結(jié)果。
反饋
反饋確認行動并顯示結(jié)果，以使人們了解情況。內(nèi)置的iOS應(yīng)用程序可響應(yīng)每個用戶操作提供可感知的反饋。輕觸時，交互元素將突出顯示，進度指示器傳達長時間運行的操作的狀態(tài)，動畫和聲音有助于闡明操作的結(jié)果。
隱喻
當應(yīng)用程序的虛擬對象和動作是扎根于現(xiàn)實世界或數(shù)字世界的隱喻時，人們會更快地學習。隱喻在iOS中可以很好地工作，因為人們可以與屏幕進行物理交互。他們將視圖移開以隱藏下面的內(nèi)容。他們拖動和滑動內(nèi)容。他們切換開關(guān)，移動滑塊并滾動選擇器值。他們甚至瀏覽書籍和雜志的頁面。
互聯(lián)網(wǎng)產(chǎn)品設(shè)計的尺寸規(guī)范和分辨率的認識，是進行線上界面設(shè)計的第一步。然而，市面上的型號有很多，咋辦？
作為設(shè)計師，要掌握常見的尺寸和距離，理解并做好設(shè)計的適配，才能解決不同手機屏幕之間的布局規(guī)范和換算關(guān)系。
常見的移動端手機屏幕的設(shè)計尺寸如下：
DPI和PPI的定義（來自百度百科）
DPI原來是印刷上的記量單位，意思是每英寸上，所能印刷的網(wǎng)點數(shù)（Dot Per Inch）。但隨著數(shù)字輸入，輸出設(shè)備快速發(fā)展，大多數(shù)的人也將數(shù)字影像的解析度用DPI表示，但較為嚴謹?shù)娜丝赡茏⒁獾?，印刷時計算的網(wǎng)點（Dot）和電腦顯示器的顯示像素（Pixel）并非相同，所以較專業(yè)的人士，會用PPI(Pixel Per Inch)表示數(shù)字影像的解析度，以區(qū)分二者。
我們通常講的打印機分辨率是多少DPI，指的是”在該打印機最高分辨率模式下,每英寸所能打印的最多”理論”墨點數(shù)”。
Pixels Per Inch也叫像素密度，所表示的是每英寸所擁有的像素數(shù)量。因此PPI數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度越高，擬真度就越高。
Pixels Per Inch是像素的密度單位，就像PPI值越高，畫面的細節(jié)就會越豐富，所以數(shù)碼相機拍出來的圖片因品牌或生產(chǎn)時間不同可能有所不同，常見的有72PPI，180PPI和300PPI,默認出來就是這么多(A710拍出的是180PPI)。
DPI(Dots Per Inch)是指輸出分辨，針對于輸出設(shè)備而言的，一般的激光打印機的輸出分辨率是300PPI-600PPI，印刷的照排機達到1200PPI-2400PPI，常見的沖印一般在150PPI到300PPI之間。
例如，iPhone 6、7、8 的屏幕物理尺寸是4.7 英寸。RetinaHD高清顯示屏，移動端屏幕尺寸是：750px 乘 1334px ,326ppi，全sRGB標準。
iPhone 6 Plus,5.5英寸(對角線)LED背光寬Multi?Touch顯示屏，具有IPS技術(shù),1920×1080像素分辨率，401ppi.全sRGB標準,如下圖所示。
分辨率、像素和屏幕物理尺寸
iPhone X 尺寸 是 5.8英寸，手機主屏幕分辨率是750乘1624 PX，整個屏幕的像素尺寸,一倍圖：375 乘 812 。
關(guān)于 iPhone 6，一倍圖下：375 乘 667 。
pc端網(wǎng)頁設(shè)計的尺寸是：1920乘1080px。
像素密度，即每英寸屏幕所擁有的像素數(shù)，像素密度越大，顯示畫面細節(jié)就越豐富。
像素密度=√{（長度像素數(shù)^2+寬度像素數(shù)^2）}/ 屏幕尺寸。
屏幕分辨率是指縱橫向上的像素點數(shù)，單位是px。屏幕分辨率確定計算機屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當屏幕分辨率低時（例如 640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x 1200），在屏幕上顯示的像素多，單個像素尺寸比較小。
顯示分辨率就是屏幕上顯示的像素個數(shù)，分辨率160×128的意思是水平方向含有像素數(shù)為160個，垂直方向像素數(shù)128個。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。
比例 ：4：3、5：4、16:10、16:9、21:9
4:3 是最常見屏幕比例。16:10 就是常見的「寬屏幕」比例。16:9 主要是HD電視在用的比例。
常聽到的720p、1080p 都是這個比例。
邏輯大小和像素大小
對于人類的視覺對于對象尺寸的判斷是由邏輯大小來決定的。以一個圖形為例，無論這個圖形距離我們多遠，用戶的認知中，大小是直徑為25mm 。 也就是說，這是它的真實的大小，所以我們把人對于物體真實尺寸的認知成為邏輯大小。
屏幕像素數(shù)量不同，在相同像素大小的情況下，圖形顯示的大小，就會不一樣。
IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎(chǔ)上乘以 1.5 ，才能以平常的物理尺寸顯示元素的大小。
邏輯像素與實際像素
Ipone 手機屏幕常見的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。
同樣一個圓，高分辨率的屏幕顯示更清晰，視覺體驗會更好。
設(shè)計時，優(yōu)先保證高分辨率的屏幕效果。
一倍圖字樣的切圖則應(yīng)用在普通屏幕上，帶 @2x字樣的切圖通常用于 Retina 屏幕上，帶@3x 字樣的切圖則應(yīng)用在 IPONE Plus 系列手機的屏幕上。設(shè)計者只需把這 3 個尺寸的切圖給技術(shù)人員，技術(shù)人員可以將合適的尺寸的圖片適配到各個機型了。實際像素除以倍率，就得到邏輯像素尺寸。
所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發(fā)。最初該技術(shù)是用于Moto Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網(wǎng)膜顯示屏。
為了適配，是為了實現(xiàn)視覺的統(tǒng)一感，讓相同大小的物體在不同像素密度的屏幕上看起來大小是相同的感覺。邏輯像素是pt，普通像素是px。 1 pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone 8 plus中等于3px。開發(fā)項目中，一倍圖機型上是100px乘100px,在iPhone 6s 中顯示出來的是200px乘200px，在 iPhone 8 plus 中顯示出來的是 300px乘300px 。在視覺上，這三個尺寸看起來是一樣的。下圖是 ipone 手機界面詳細的適配尺寸規(guī)范。
針對以上規(guī)范，設(shè)計師的尺寸為 375乘667 pt、導(dǎo)出格式為 @2x 的設(shè)計稿可以應(yīng)用在ipone 6、ipone 7、ipone 8 手機中。
安卓系統(tǒng)把各種設(shè)備的像素密度劃分成幾個范圍區(qū)間，并且給不同范圍的設(shè)備定義了不同的倍率，保證顯示效果的相近。安卓系統(tǒng)的邏輯像素單位是 dp 。
安卓系統(tǒng)的手機屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。
密度為xxxhdpi(1080px乘1920px) 的手機目前市場份額占比較大；目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機產(chǎn)品占絕大多數(shù)的市場份額，而正好他們的邏輯像素是 360dp 乘 640dp, 根據(jù)這樣的分辨率標準導(dǎo)出 @2x、@3x、@4x 這三種格式的切圖，基本就可以適配市面上絕大部分的Andriod 系統(tǒng)的機型了。
全局邊距
在UI界面設(shè)計中，以(750px乘1334px)全局邊距一般是30PX，整個產(chǎn)品設(shè)計的邊距都是30px，保持一致性。
或者 32px 的全局邊距也是不錯的選擇，比如：Booking 就用了這個尺寸。
24px 全局邊距
Facebook ，它們不但距離屏幕邊緣距離一致，就連邊緣距離一致，就連頭像與文字的距離也相同，都是 16px。
40px 全局邊距
40px 屬于較大的大邊距，留白開始變多，界面呼吸感好，閱讀體驗好。例如：36kr。大邊距適合單一的應(yīng)用，不需要復(fù)雜信息和交互層級。
50px 全局邊距
50px 可以算最大邊距，它讓界面變得干凈整潔，用戶在瀏覽時極為輕松。
豎向間距
定義卡片和卡片間的間距一般是：20px、24px、30px，最大間距不超過40px。間距的背景色可以與你分割線一致，也可以淺一些，界面柔和一點。
88px
ios 中最小點擊區(qū)域是 88px，因為蘋果在縱向尺寸上把 22px 作為一個基礎(chǔ)單元，物理尺寸最小空間的高度為 22乘4等于88px，為手指觸摸最小的高度。因此導(dǎo)航欄、標簽欄、列表、搜索欄和按鈕的高度都是 88px，導(dǎo)航欄和標簽欄圖標為 44px，元素與元素之間的最小間距是 22px。
四 iPhone X的適配方案
針對前面所講的ios 系統(tǒng)的常用機型，幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設(shè)計的適配。而相對來說，ipone X 的適配處理稍微多一些細節(jié)。異形的 iPhone X 的屏幕部分的高度增加了145pt，如下圖所示。
先說一下頂部劉海區(qū)域的適配方式。如圖 所示，對于常規(guī)的 iPhone 8 屏幕來說，屏幕內(nèi)基本都是安全顯示區(qū)域，安全顯示區(qū)域就是要把重要元素放在上面做好設(shè)計。iPhone X 上由于多了劉海 的設(shè)計和四周的圓角設(shè)計，意味著也多了兩個不可顯示內(nèi)容的非安全區(qū)域。蘋果官方給出的非安全區(qū)域為屏幕上方 44 pt ，屏幕下方是 34 pt ，并且下方 34 pt 的非安全區(qū)域一定不可以放置可點擊的按鈕，否則會與虛擬的 Home 鍵發(fā)生交互上的沖突。
空間里利用率角度思考，與 IOS 界面的整體效果保持一致的感覺。如下圖所示，豎版和橫版。
而具體的適配方法要從這兩塊非安全區(qū)域去用心思考。由于頂部的非安全區(qū)域內(nèi)不可以出現(xiàn)狀態(tài)欄之外的內(nèi)容，因此從前的狀態(tài)條由20pt加長到44pt, 則意味著增加了 24 pt 。這時候?qū)Ш綑诘某叽绫３植蛔儯恍枵w向下移動24pt 。 這時候?qū)Ш綑诘某叽绫３植蛔?，只需整體向下移動 24pt 即可。同時，狀態(tài)欄背景的顏色需要與導(dǎo)航欄背景的顏色保持一致。
當界面頂部帶有圖片背景時，最簡單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部，一般有以下兩種處理方式。
第一種方式是為 iPhone X 單獨做一套 Banner 尺寸，拉長 24pt，并且頂部 24pt 不可放置有效的閱讀消息，設(shè)計兩套圖，一種是正常的 IPONE 6、7、8 等尺寸，一種是 ipone X 的尺寸 下需要的設(shè)計廣告圖。如下圖所示。
第二種方式是顯示導(dǎo)航欄，并且 Banner 不再貫穿到 頂部顯示，而是移動到導(dǎo)航欄下方。
顯示效果缺少沉浸式的設(shè)計體驗感。
說完劉海區(qū)域的適配方式之后，再來說一下底部非安全區(qū)域的適配方式。置于屏幕底部的 Home Indicator 集成了原有實體 Home 鍵退出與切換系統(tǒng)應(yīng)用的功能。在適配過程中，可以更換此區(qū)域內(nèi)背景的顏色、透明度與高度。底部的33pt 的非安全區(qū)域內(nèi)禁止出現(xiàn)可操作按鈕。
第1種情況，當界面底部有按鈕，按鈕依附在底部 34pt 的非安全區(qū)域的上方即可，非安全區(qū)域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。
第2種情況，當界面底部沒有按鈕，只需讓列表正常顯示就可以了，無須遮擋，如下圖所示。
第3種情況：在廣告引導(dǎo)頁等呈現(xiàn)全屏樣式時，需要做兩套設(shè)計稿的間距和大小的設(shè)計適配，保證好的視覺內(nèi)容的展示，背景色延伸的方法就好。
界面設(shè)計中的間距思考
界面所留出的固定邊距是最基礎(chǔ)的柵格系統(tǒng)。如下圖所示。
界面的分割規(guī)范應(yīng)用在品類區(qū)的功能圖標，四等分的設(shè)計，符合柵格系統(tǒng)的設(shè)計。規(guī)范的設(shè)計，有利于開發(fā)對設(shè)計稿的還原設(shè)計。
柵格系統(tǒng)中的8px 的原則
8px 原則，就是界面設(shè)計中所有元素的長度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸，安卓系統(tǒng)屏幕下的部分適配尺寸。
五 常見的移動端設(shè)計布局和適用場景
信息的設(shè)計優(yōu)先級，布局合理性，提升信息的傳達效率。
核心功能的布局
核心功能的各模塊的布局之間保持相對獨立，標簽橫向數(shù)量盡量不要超過5個，超過5個可以采用左右滑的交互方式來實現(xiàn)，來自于設(shè)計心理學。
標簽樣式的布局優(yōu)點是各入口清晰呈現(xiàn)，方便用戶快速查找信息；標題一定要精簡。對于要突出的核心功能，可以做信息層級的大小、是否有設(shè)計背板的處理，主次關(guān)系分明。
列表式布局
列表式布局適用于信息類的產(chǎn)品。
列表式布局優(yōu)點信息展示較直觀，節(jié)省界面空間，瀏覽效率高，字段長度不受限制，并且可以錯行展示。單純看文字會視覺疲勞，所以圖文混排，富有變化。突出主題，優(yōu)質(zhì)配圖，有利于用戶更好的閱讀信息。
卡片式布局
卡片式布局就是把不同大小、不同形式的內(nèi)容放在一個容器里進行組合展示。較常見的是圖文混排，既要做到視覺上的一致性感覺，又要平衡圖片和主題內(nèi)容的關(guān)系。分組展示，讓用戶更好的理解各模塊的內(nèi)容。
瀑布流布局
瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內(nèi)容。移動端的瀑布流布局一般是兩列信息并行，錯位展示，可以極大的提升交互效率，可以制造豐富的視覺體驗，適用于花瓣等圖片類的界面布局設(shè)計。
六 APP組建化設(shè)計規(guī)范
（具體看我站酷前面寫的組件化思維的文章）
Ios系統(tǒng)和安卓系統(tǒng)都提供了一些固定的官方組件規(guī)范。遵循其官方組件規(guī)范，可以極大提高設(shè)計和開發(fā)效率，同時降低用戶的學習成本。其中最常見的規(guī)范化組件包括頂部的狀態(tài)欄、導(dǎo)航欄、底部標簽欄和工具欄。
狀態(tài)欄
ios 是 20pt, 安卓是24dp.
導(dǎo)航欄
ios 是 44pt, 安卓是56dp.
標簽欄
ios 的高度是 49pt, 安卓標簽欄的高度是48dp.
工具欄
工具欄的高度是 44pt,安卓是 48dp .
字體是蘋方字體；英文是SF英文字體。思源黑體，roboto 英文字體。
IOS設(shè)計是 11pt到29pt 左右，一級主題是24pt 以上,二級標題是20pt左右。
內(nèi)容，導(dǎo)航欄標題是 18pt。 三級標題是16pt。 文字內(nèi)容一般是 14pt
品類區(qū)圖標內(nèi)容：12pt 。 底部TAB 圖標文字：10pt到11pt
七 微信小程序設(shè)計
基于微信小程序輕快的特點，我們擬定了小程序界面設(shè)計指南和建議。 設(shè)計指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上。旨在微信生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗，同時最大程度適應(yīng)和支持不同需求，實現(xiàn)用戶與小程序服務(wù)方的共贏。
友好禮貌
為了避免用戶在微信中使用小程序服務(wù)時，注意力被周圍復(fù)雜環(huán)境干擾，小程序在設(shè)計時應(yīng)該注意減少無關(guān)的設(shè)計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶進行操作。
重點突出
每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。在確定了重點的前提下，應(yīng)盡量避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素。
避免誤操作
換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設(shè)計。
小程序是在微信開放平臺上運行的一種不需要下載安裝即可使用的應(yīng)用，它提供了一種快速體驗的方式，用戶通過掃一掃或搜一搜即可打開應(yīng)用，實現(xiàn)了“觸手可及”、“用完即走”的高效操作。對于開發(fā)者而言，小程序開發(fā)門檻相對較低，能滿足簡單的基礎(chǔ)應(yīng)用?；谛〕绦蜉p快的特點，我們在進行小程序界面設(shè)計時，友好、高效、一致的用戶體驗，友好的引導(dǎo)用戶操作。
小程序菜單
小程序的界面，包括小程序內(nèi)嵌網(wǎng)頁和插件，微信都會在其右上角放置菜單。菜單包括兩個圖標，左邊是更多，點開分別是轉(zhuǎn)發(fā)、關(guān)于和取消；右邊是主頁，點擊后回到小程序列表。小程序菜單和狀態(tài)欄之外的區(qū)域是開發(fā)者控制區(qū)域，可設(shè)計。
微信提供深淺兩種配色，適配不同風格，元素設(shè)計的辨識度。小程序在IOS和Android 的標注尺寸，如下圖所示。
開發(fā)者不可對小程序菜單自定義，但可選擇深淺兩種基本配色以適應(yīng)頁面設(shè)計風格。為了讓小程序菜單清晰可見，在深色背景上使用淺色菜單，在淺色背景上使用深色菜單。
減少輸入
由于手機鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優(yōu)化體驗。
在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索，而減少或避免不必要的鍵盤輸入。
上面部分用圖，來自微信小程序設(shè)計指南，具體細節(jié)設(shè)計規(guī)范可以看-微信小程序設(shè)計指南。
頁面導(dǎo)航
頂部標簽分頁欄，顏色和樣式都可以自定義。
最常見的設(shè)計方式是將選中態(tài)填充品牌主色，未選態(tài)有清晰的對比和可操作性。最常見的設(shè)計方式是將選中態(tài)填充品牌主色，未選態(tài)填充灰色，標簽之間保持足夠的空間，避免引起誤操作。
標簽分頁分頁欄的樣式可根據(jù)App的 視覺風格進行設(shè)計，以保證兩個平臺擁有一致的視覺體驗。例如騰訊視頻，在App中，它的標簽欄分頁欄是無框式設(shè)計風格，選中態(tài)和未選態(tài)以文字大小和色彩的對比進行區(qū)分；在小程序中，同樣使用無框式設(shè)計風格，色彩不變，樣式上字號大小，精致的線條輔助展示當前狀態(tài)的設(shè)計。
開發(fā)者可為小程序頁面添加標簽分頁導(dǎo)航，標簽分頁欄可固定在頁面頂部或底部，便于用戶在不同在不同的分頁間做切換。標簽數(shù)量不得少于2個，最多不超過 5個，為確保足夠的點擊區(qū)域，建議標簽數(shù)量不超過4個。
小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。設(shè)計時可自定義圖標樣式、標簽文案及顏色等，以750乘1334px 的分辨率，標簽文案字號是 20px，圖標尺寸為 50px乘50px、標簽欄高 98px，與 ios 蘋果的設(shè)計規(guī)范保持一致性。
微信小程序的設(shè)計和開發(fā)，可根據(jù)產(chǎn)品需要選擇或不選擇底部標簽分頁欄，例如騰訊視頻小程序使用4個標簽承載功能不同的頁面內(nèi)容，為用戶提供清晰、快速的瀏覽體驗；而窮游行程助手的內(nèi)容較為單一，只需一個頁面就能清晰呈現(xiàn)所有內(nèi)容，因此不需要標簽分頁欄。如下圖所示。
啟動頁加載
在小程序列表點擊小程序后進入小程序后進入啟動頁，它是小程序在微信內(nèi)一定程度上展現(xiàn)品牌特征的頁面之一，
本頁面將突出展示小程序品牌特征和加載狀態(tài)。啟動頁除品牌Logo 展示外，頁面上的其他所有元素如，加載進度指示，均由微信統(tǒng)一提供且不能更改，無須開發(fā)者開發(fā)。品牌Logo 尺寸為 80乘80px，間距標注如下圖所示。
頁面過長時間的等待會引起用戶的負面情緒，應(yīng)盡量使用微信小程序項目提供的技術(shù)縮短等待時間。優(yōu)先顯示預(yù)設(shè)的本地數(shù)據(jù)，告知用戶正在加載頁面中。
全局加載反饋是在小程序名稱左側(cè)顯示加載狀態(tài)的圖標，提示加載小程序內(nèi)容的過程。同時，模態(tài)的加載樣式將覆蓋整個頁面，它是由加載圖標、文字提示和半透明圓角矩形組成，由于無法明確告知具體加載的位置將可能引起用戶的焦慮情緒，因此應(yīng)謹慎使用。
設(shè)計案例
小程序設(shè)計是基于微信內(nèi)部運行的應(yīng)用，因此在視覺上要輕盈、干凈、簡潔，保持扁平化設(shè)計風格；在交互上要結(jié)構(gòu)簡單、層級清晰、跳轉(zhuǎn)少，保證產(chǎn)品高效的瀏覽體驗。微信小程序，在設(shè)計時應(yīng)精簡控件和高效、實用。
旅游產(chǎn)品為例：
1、 小程序頁面的右上角固定小程序菜單。
2、為確保足夠的點擊區(qū)域，小程序底部的標簽分頁欄建議最多4項。收件箱在很多 App 中不會獨立作為一個標簽，可以考慮移除；個人資料 承載了許多用戶自己的重要信息，保留在標簽欄比較合適。最后確定四個底部標簽欄的功能設(shè)計-分別是：首頁，收藏，消息，我的，四個標簽。
3、開始進行設(shè)計，保持與App 同樣的白色背景，標題欄上 Airbnb 居左對齊。
4、我們必須對原來的樣式進行優(yōu)化，做減法是小程序設(shè)計的關(guān)鍵。在App中，Airbnb 的設(shè)計輕盈、干凈、簡潔，因此可以直接復(fù)用到小程序中，無須重新設(shè)計。小程序延續(xù)了輕量化陰影的視覺特征，因此優(yōu)化后的界面設(shè)計依然保持與App一致的設(shè)計風格。
八 網(wǎng)頁的設(shè)計規(guī)范
1、網(wǎng)頁設(shè)計是什么？
網(wǎng)頁設(shè)計也被稱為 Web Design、網(wǎng)站設(shè)計、Website design、WUI 等。它的本質(zhì)就是網(wǎng)站的圖形界面設(shè)計。
2. 設(shè)計規(guī)范
一個產(chǎn)品的設(shè)計規(guī)范應(yīng)該有：字體規(guī)范、主體色規(guī)范、圖表規(guī)范、圖片規(guī)范等。
3、網(wǎng)站種類
網(wǎng)站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如、企業(yè)網(wǎng)站、產(chǎn)品網(wǎng)站、電商網(wǎng)站、移動端H5 等，均是面向用戶的產(chǎn)品。以用戶為中心考慮體驗設(shè)計。
To B端作為一個需求量很大的類別，比如電商后臺、Dashboard、企業(yè)級OA、網(wǎng)站統(tǒng)計后臺等這些面向商家和專業(yè)人士的網(wǎng)站就是 To B 類網(wǎng)站項目了。To B 類項目最重要的是效率，因為說白了我們在設(shè)計使用者工作的工具，我們在設(shè)計時必須首先要使用者可以高效工作使用。
企業(yè)網(wǎng)站
每個企業(yè)都需要有一個網(wǎng)站來對外展示自己的能力、介紹自己的產(chǎn)品等。企業(yè)網(wǎng)站設(shè)計時通常會有網(wǎng)站首頁、公司介紹、產(chǎn)品中心、公司團隊、在線商城、聯(lián)系我們等這幾個模塊，企業(yè)網(wǎng)站會展示很多諸如公司環(huán)境、團隊成員、企業(yè)文化等實際的照片，配合一些資料進行設(shè)計。企業(yè)網(wǎng)站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，也就是為了達到讓消費者認同品牌這個要求。
產(chǎn)品網(wǎng)站
從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發(fā)現(xiàn)一種新鮮的產(chǎn)品營銷模式，就是產(chǎn)品網(wǎng)站。設(shè)計這類網(wǎng)站的內(nèi)容主要是該產(chǎn)品的工藝、技術(shù)、設(shè)計、特點、構(gòu)造、使用場景等。這樣的產(chǎn)品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，產(chǎn)品設(shè)計必須精致、有品質(zhì)感。
后臺網(wǎng)站（數(shù)據(jù)可視化）
后臺網(wǎng)站 Dashborad-儀表盤。其含義就是有一大堆數(shù)據(jù)與統(tǒng)計信息。后臺網(wǎng)站是 To B 類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數(shù)據(jù)。可是數(shù)據(jù)非?？菰?，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現(xiàn)這些繁瑣的數(shù)據(jù)，這種圖形表達數(shù)據(jù)的方式也叫做數(shù)據(jù)可視化。
可以參考的網(wǎng)站有： 百度的 ECHARTS ，如下圖所示。
CRM系統(tǒng)（簡單拆解網(wǎng)頁B端的設(shè)計規(guī)范）
CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統(tǒng)。CRM 是企業(yè)對客戶進行信息化管理的一種形式，用互聯(lián)網(wǎng)技術(shù)實現(xiàn)對客戶信息進行收集、管理、分析，對企業(yè)的銷售、服務(wù)、售后進行監(jiān)控。常見的功能有員工日程管理、訂單管理、發(fā)票管理等。
在PC端建議采用： 1440×900的設(shè)計尺寸
SaaS
如果我們服務(wù)于為企業(yè)搭建 CRM、ERP 或者 OA 等系統(tǒng)的第三方公司，那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service)，即軟件就是服務(wù)。
有贊軟件即SaaS服務(wù),包括有贊微商城、有贊零售、有贊教育、有贊美業(yè)、有贊小程序。如下圖所示。
企業(yè)OA
企業(yè)OA，即(Office Automation)，也就是辦公自動化系統(tǒng)。
通過企業(yè)OA 可以完成請假、調(diào)休、離職、查詢公司規(guī)章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。
設(shè)計師在設(shè)計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當前頁面中最重要的功能。
4、B端系統(tǒng)的設(shè)計原則
一致
與現(xiàn)實生活一致 ， 用戶使用習慣
界面中一致，設(shè)計圖標、文字、元素等保持一致性。
反饋
控制反饋，清晰的知道自己的操作。
清晰認知頁面的主題和交互狀態(tài)。
效率
簡化流程。清晰明確的含義 界面快速認知和理解。
結(jié)果可控
用戶可自由操作，包括撤銷、回退、終止當前操作等。
設(shè)計規(guī)范（具體可以參考 ANT DESIGN 網(wǎng)站設(shè)計規(guī)范，去制作本公司的網(wǎng)頁端的設(shè)計規(guī)范）
從原子：色彩、字體、間距、圓角、分割線。
分子：輸入框、選擇器、開關(guān)、上傳、時間日期選擇
組件：導(dǎo)航、表單、列表、 數(shù)據(jù)可視化圖表、 篩選
通用層面思考
色彩 、文字、 邊距和圓角、 按鈕 、間距、 柵格
主色：B端建議盡量選擇冷色系 避免太高亮
建議關(guān)鍵主色與白色對比度大于4.5
附：對比度檢測 https://webaim.org/resources/contrastchecker/
按鈕： 實心按鈕、 空心按鈕 、文字按鈕
PC端后臺：不推薦用大圓角
間距
一般選用8的倍數(shù)
8、16、24、32、40、48、56、64、72……
網(wǎng)頁柵格，一般選用24柵格布局
24欄+23水槽+2頁邊距
柵格應(yīng)用在內(nèi)容層，如下圖所示。
頂部導(dǎo)航的使用場景：
適用于一級導(dǎo)航數(shù)量較少，內(nèi)容較為簡單的系統(tǒng)
追求沉浸式閱讀的系統(tǒng)
多用于官網(wǎng)首頁
頂部導(dǎo)航的優(yōu)點：
占用屏幕空間小，為內(nèi)容區(qū)留出更多空間
對視覺的干擾小，符合從上到下的閱讀習慣
一般采用固定版心的方式，更容易適配
隨著業(yè)務(wù)的發(fā)展，拓展性變差
三三級導(dǎo)航點擊后隱藏，不利于用戶記憶和查找
側(cè)邊導(dǎo)航的優(yōu)點：
適用于更專注功能和快速操作的系統(tǒng)，有贊為例，如下圖所示。
多用于較為復(fù)雜的后臺系統(tǒng)
拓展性強，一級導(dǎo)航的數(shù)目可以展示更多
層級清晰，一二三級導(dǎo)航都可以流暢展示
操作效率高，用戶在操作和瀏覽中快速定位和切換當前位置
面包屑導(dǎo)航
使用場景：兩級及以上層級，最多不超過5級
作用：告知用戶你在哪里，且可以迅速回到上幾級導(dǎo)航
九 設(shè)計師的自我修養(yǎng)
我們對設(shè)計充滿興趣和激情。
1 用心積累優(yōu)秀的設(shè)計案例?？梢愿鶕?jù)公司的行業(yè)競品，同類直接競品，跨界競品做好收集。
2 每日記錄設(shè)計靈感。比如：站酷收藏夾，按照主題收藏；花瓣靈感，分組命名。
3 執(zhí)行力強，遇到設(shè)計問題，換位思考。
4 超出預(yù)期，做好需求的設(shè)計方案，同時關(guān)注設(shè)計細節(jié)，超出需求方的預(yù)期和用戶的預(yù)期。
5 有上進心，工作做好后，做好設(shè)計的總結(jié)和作品整理，發(fā)到站酷設(shè)計平臺，與其他設(shè)計師一起交流設(shè)計。
6 眼界開闊，知識面廣：一個優(yōu)秀的設(shè)計師，不僅懂設(shè)計，還懂產(chǎn)品、運營、 推廣、開發(fā)思維等方面的相關(guān)知識的學習和研究。有利于和上下游人士的溝通順暢。做到互相理解，團隊更好的完成項目的設(shè)計提案。
最后，讓自己保持著朝氣蓬勃的精神，保持著朝氣蓬勃而富有創(chuàng)造力的心態(tài)。
參考文獻如下：
1、《規(guī)律與邏輯》
2、《CCtalk B端產(chǎn)品設(shè)計課》by 美芳老師
3、《高級UI設(shè)計師》
4、《ANT-DESIGN 螞蟻金服》
5、《蘋果官網(wǎng)等設(shè)計網(wǎng)站》
原文地址：站酷
作者：峻溪POINTVISION
轉(zhuǎn)載請注明：學UI網(wǎng)》設(shè)計規(guī)范和適配
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司