原文：UI頭條

建立設計規范的好處：1 保證產品設計的一致性。2 提高開發的效率。3 方便產品的迭代優化。

一、開篇：為什么需要建立設計規范？

1、保證設計的一致性。

對內部：多個設計師合作，依然能保證設計風格的統一。

對用戶：提高用戶體驗，提高操作效率，加深對產品的記憶。

2、提高開發效率

與前端有效溝通的工具，提高設計還原度，降低對接成本。

開發可以建立公共組件庫，極大的提高了開發效率。

3、方便產品迭代

隨著產品的業務變化，發現一些問題或者需要優化用戶體驗的時候，針對單個控件進行調整，就可以影響全局，十分便捷。

二、移動端設計規范之平臺設計語言

優秀設計來自世界互聯網公司，前沿的設計理念和完善的設計語言是我們設計師的學習目標。了解和學習后，更好的進行產品設計。

1、谷歌設計語言? Google Design?

http://design.google

谷歌設計中心，展示了谷歌的設計工作和概念，包括了 Material Design 在內的所有關于產品、體驗、設計、品牌等互聯網領域的設計思考。

2、蘋果 IOS 設計規范

蘋方人機界面設計指南，含有IOS設計規范，指導界面設計。蘋果人機界面設計指南，詳細介紹了蘋果公司最新的移動設備和系統，設計屏幕分辨率、圖標設計規范、色彩搭配、文字等設計語言，同時還提供了 UI 設計資源可供大家使用。

3、Ant Design

螞蟻金服設計平臺是國內互聯網公司之一，基于螞蟻金服生態系統的跨設計與開發的體驗設計方案，包含了網頁端的顏色、字體、圖標、組件等頁面設計布局等設計指導網站。

螞蟻集團的企業級產品是一個龐大且復雜的系統，數量多且功能復雜，而且變動和并發頻繁，常常需要設計者與開發者能快速做出響應。同時這類產品中有存在很多類似的頁面以及組件，可以通過抽象得到一些穩定且高復用性的內容。

隨著商業化的趨勢，越來越多的企業級產品對更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，我們（螞蟻集團體驗技術部）經過大量項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系

—— Ant

Design。基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀，通過模塊化解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。

4、Fluent Design System

微軟基于Windows 10 的設計指南，它可以幫助開發者設計和構建流暢、精美的應用程序，包括人機界面布局、樣式、控件和設計工具包下載。

微軟將這套全新的設計語言名為 Fluent Design System（流暢設計體系），該體系共有五大核心元素，包括Light（光感）、Depth（深度）、Motion（動畫）、Material（材質）和 Scale（縮放）。

5、WeUI

WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，包含表單、基礎組件、操作反饋、導航等各種各樣的設計元素。它由微信官方設計團隊為微信內網頁和微信小程序量身設計，使得用戶的使用感知更加統一。

具體看下面的內容，有詳細介紹。

6、Airbnb Design

Airbnb

是一家享譽全球的民宿服務公司。同時，這背后有一個他們自己強大的設計團隊，為Airbnb提供著設計方面工作。我日常工作使用到的（動效方面）Lottie

也是他們設計開發的產物（感謝）。他們擁有自己的設計網站Airbnb Design。其中一些文章介紹 DSL，

正如在《設計體系》一書介紹，他們嚴格遵守著自己的設計規范和原則。保證著Airbnb的產品在設計上的一致性，可用性等，目的是為不同國家的用戶提供好的用戶體驗。

界面設計中的字體思考：

文字是 App 中最核心的元素之一，產品傳達給用戶的內容。字體有無襯線字體和襯線字體。無論iOS 還是 Android 系統，它們都有內置的默認字體可供設計師使用。用心處理好字號大小、字體顏色與字體間距的處理上。

用戶界面設計中，字體是界面設計中的基本元素。設計師要設計好界面中的字體顏色、字體間距、字號的大小、

字重等思考。

蘋果系統中默認的字體是：蘋方字體。英文字體和數字字體是：舊金山字體，San Francisco 字體。其中數字字體比較好的字體可以用：Dinner 字體。

安卓系統默認的中文字體是：思源黑體。? 英文字體是：Roboto 字體。

界面設計中的字體設計規范，如下圖所示。

介紹幾款西文字體：

無襯線字體，在字的筆畫開始和結束的地方，沒有額外裝飾，筆畫粗細均勻，適合于主題設計的屏幕展示，給人一種自然舒適感。例如：無裝飾性的易識別的代表字體：Helvetica 英文字體、San Francisco 英文字體、

Roboto 英文字體、Arial 英文字體。

襯線字體是字的筆畫開始和結尾處的位置有額外裝飾，同時筆畫的粗細有所不同，一般適用于印刷排版，具有較高的可讀性。例如：具有裝飾性的代表字體：Times New Roman。

DIN 字體

DIN 字體是效力于德國交通標識和公共空間的經典字體，是一種很好的數字字體。

Futura 字體

Futura 字體 ，這個字體現代、時尚具有幾何特征，是很多雜志和時尚品牌的常用字體，例如：時尚氣質的品牌 LV 的商標字體就是這種英文字體。

Roboto 字體

Roboto 字體，是谷歌公司為 Android 操作系統開發的默認英文字體，具有“現代感”、“親和力” 的設計感。

San Francisco 字體

San Francisco 字體 ，蘋果公司設計的，蘋果公司推出的 Apple Watch 和 iOS 移動端等系統的英文字體。

Didot 字體

Didot 字體， 是世界上最著名的英文字體之一，美感，可以用在 英文標題、產品設計、廣告使用的一款字體。

例如：時尚雜志 VOGUE 標題字 就是運用了這個字體。

三、移動端設計規范之設計主題、設計原則、屏幕的設計尺寸：

iOS 設計主題

iOS的三個主要主題將其與其他平臺區分開來：

明晰：在整個系統中，各種大小的文字都清晰易讀，圖標精確而清晰，裝飾物微妙而恰當，對功能的高度關注激發了設計的靈感。負空間，顏色，字體，圖形和界面元素巧妙地突出了重要內容并傳達了交互性。

尊敬：流暢的動作和清晰美觀的界面可幫助人們理解內容并與之互動，而從未與之競爭。內容通常會填滿整個屏幕，而半透明和模糊通常會暗示更多內容。最少使用邊框，漸變色和陰影可以保持界面明亮通風，同時確保內容至關重要。

深度：獨特的視覺層和逼真的動作傳達層次感，賦予生命力并促進理解。觸摸和可發現性提高了人們的愉悅感，使他們能夠訪問功能和其他內容而不會丟失上下文。當您瀏覽內容時，過渡會提供一種深度感。

設計原則

為了最大限度地提高影響力和影響范圍，請在想象應用程序的身份時牢記以下原則。

審美完整性

審美完整性表示應用程序的外觀和行為與其功能的集成程度。例如，一個可以幫助人們執行重要任務的應用程序可以通過使用微妙，醒目的圖形，標準控件和可預測的行為來使他們專注。另一方面，沉浸式應用程序（例如游戲）可以提供引人入勝的外觀，帶來樂趣和刺激，同時鼓勵發現。

一致性

一致的應用程序通過使用系統提供的界面元素，知名的圖標，標準的文本樣式和統一的術語來實現熟悉的標準和范例。該應用程序以人們期望的方式結合了功能和行為。

直接操縱

屏幕內容的直接操作可以吸引人們并促進理解。用戶在旋轉設備或使用手勢來影響屏幕內容時會經歷直接的操縱。通過直接操作，他們可以看到其操作的直接可見結果。

反饋

反饋確認行動并顯示結果，以使人們了解情況。內置的iOS應用程序可響應每個用戶操作提供可感知的反饋。輕觸時，交互元素將突出顯示，進度指示器傳達長時間運行的操作的狀態，動畫和聲音有助于闡明操作的結果。

隱喻

當應用程序的虛擬對象和動作是扎根于現實世界或數字世界的隱喻時，人們會更快地學習。隱喻在iOS中可以很好地工作，因為人們可以與屏幕進行物理交互。他們將視圖移開以隱藏下面的內容。他們拖動和滑動內容。他們切換開關，移動滑塊并滾動選擇器值。他們甚至瀏覽書籍和雜志的頁面。

互聯網產品設計的尺寸規范和分辨率的認識，是進行線上界面設計的第一步。然而，市面上的型號有很多，咋辦？

作為設計師，要掌握常見的尺寸和距離，理解并做好設計的適配，才能解決不同手機屏幕之間的布局規范和換算關系。

常見的移動端手機屏幕的設計尺寸如下：DPI和PPI的定義（來自百度百科）

DPI原來是印刷上的記量單位，意思是每英寸上，所能印刷的網點數（Dot

Per

Inch）。但隨著數字輸入，輸出設備快速發展，大多數的人也將數字影像的解析度用DPI表示，但較為嚴謹的人可能注意到，印刷時計算的網點（Dot）和電腦顯示器的顯示像素（Pixel）并非相同，所以較專業的人士，會用PPI(Pixel

Per Inch)表示數字影像的解析度，以區分二者。

我們通常講的打印機分辨率是多少DPI，指的是"在該打印機最高分辨率模式下,每英寸所能打印的最多"理論"墨點數"。

Pixels Per Inch也叫像素密度，所表示的是每英寸所擁有的像素數量。因此PPI數值越高，即代表顯示屏能夠以越高的密度顯示圖像。當然，顯示的密度越高，擬真度就越高。

Pixels Per Inch是像素的密度單位，就像PPI值越高，畫面的細節就會越豐富，所以數碼相機拍出來的圖片因品牌或生產時間不同可能有所不同，常見的有72PPI，180PPI和300PPI,默認出來就是這么多(A710拍出的是180PPI)。

DPI(Dots Per Inch)是指輸出分辨，針對于輸出設備而言的，一般的激光打印機的輸出分辨率是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技術,1920x1080像素分辨率，401ppi.全sRGB標準,如下圖所示。

分辨率、像素和屏幕物理尺寸iPhone X 尺寸 是 5.8英寸，手機主屏幕分辨率是750乘1624 PX，整個屏幕的像素尺寸,一倍圖：375 乘 812 。

關于 iPhone 6，一倍圖下：375 乘 667? 。

pc端網頁設計的尺寸是：1920乘1080px。

像素密度，即每英寸屏幕所擁有的像素數，像素密度越大，顯示畫面細節就越豐富。像素密度=√{（長度像素數^2+寬度像素數^2）}/ 屏幕尺寸。

屏幕分辨率是指縱橫向上的像素點數，單位是px。屏幕分辨率確定計算機屏幕上顯示多少信息的設置，以水平和垂直像素來衡量。就相同大小的屏幕而言，當屏幕分辨率低時（例如

640 x 480），在屏幕上顯示的像素少，單個像素尺寸比較大。屏幕分辨率高時（例如 1600 x

1200），在屏幕上顯示的像素多，單個像素尺寸比較小。

顯示分辨率就是屏幕上顯示的像素個數，分辨率160×128的意思是水平方向含有像素數為160個，垂直方向像素數128個。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細和細膩。

比例 ：4：3、5：4、16:10、16:9、21:9

4:3 是最常見屏幕比例。16:10 就是常見的「寬屏幕」比例。16:9 主要是HD電視在用的比例。常聽到的720p、1080p 都是這個比例。

邏輯大小和像素大小對于人類的視覺對于對象尺寸的判斷是由邏輯大小來決定的。以一個圖形為例，無論這個圖形距離我們多遠，用戶的認知中，大小是直徑為25mm 。也就是說，這是它的真實的大小，所以我們把人對于物體真實尺寸的認知成為邏輯大小。

屏幕像素數量不同，在相同像素大小的情況下，圖形顯示的大小，就會不一樣。IPONE 8 plus 屏幕上的元素尺寸需要在IPONE 8 的基礎上乘以 1.5 ，才能以平常的物理尺寸顯示元素的大小。

邏輯像素與實際像素Ipone 手機屏幕常見的分辨率有 640px乘1136px、750px乘1334px、1242px乘2208px及1125px乘2436px 等。

同樣一個圓，高分辨率的屏幕顯示更清晰，視覺體驗會更好。

設計時，優先保證高分辨率的屏幕效果。

一倍圖字樣的切圖則應用在普通屏幕上，帶

@2x字樣的切圖通常用于 Retina 屏幕上，帶@3x 字樣的切圖則應用在 IPONE Plus 系列手機的屏幕上。設計者只需把這 3

個尺寸的切圖給技術人員，技術人員可以將合適的尺寸的圖片適配到各個機型了。實際像素除以倍率，就得到邏輯像素尺寸。

所謂“Retina”是一種顯示標準，是把更多的像素點壓縮至一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度。由摩托羅拉公司研發。最初該技術是用于Moto

Aura上。這種分辨率在正常觀看距離下足以使人肉眼無法分辨其中的單獨像素。也被稱為視網膜顯示屏。

為了適配，是為了實現視覺的統一感，讓相同大小的物體在不同像素密度的屏幕上看起來大小是相同的感覺。邏輯像素是pt，普通像素是px。1

pt 在ipone 6、ipone 7、ipone 8等于 2px ，在 iPhone 6 plus、iPhone 7 plus、iPhone

8 plus中等于3px。開發項目中，一倍圖機型上是100px乘100px,在iPhone 6s 中顯示出來的是200px乘200px，在

iPhone 8 plus 中顯示出來的是 300px乘300px 。在視覺上，這三個尺寸看起來是一樣的。下圖是 ipone

手機界面詳細的適配尺寸規范。

針對以上規范，設計師的尺寸為 375乘667 pt、導出格式為 @2x 的設計稿可以應用在ipone 6、ipone 7、ipone 8 手機中。

安卓系統把各種設備的像素密度劃分成幾個范圍區間，并且給不同范圍的設備定義了不同的倍率，保證顯示效果的相近。安卓系統的邏輯像素單位是 dp 。

安卓系統的手機屏幕都可以找到自己密度值、代表分辨率、倍率、邏輯分辨率等。

密度為xxxhdpi(1080px乘1920px)

的手機目前市場份額占比較大；目前密度為 xhdpi、xxdpi 和 xxxdpi 的手機產品占絕大多數的市場份額，而正好他們的邏輯像素是

360dp 乘 640dp, 根據這樣的分辨率標準導出 @2x、@3x、@4x 這三種格式的切圖，基本就可以適配市面上絕大部分的Andriod

系統的機型了。

全局邊距在UI界面設計中，以(750px乘1334px)全局邊距一般是30PX，整個產品設計的邊距都是30px，保持一致性。

或者 32px 的全局邊距也是不錯的選擇，比如：Booking 就用了這個尺寸。

24px 全局邊距Facebook ，它們不但距離屏幕邊緣距離一致，就連邊緣距離一致，就連頭像與文字的距離也相同，都是 16px。

40px 全局邊距40px 屬于較大的大邊距，留白開始變多，界面呼吸感好，閱讀體驗好。例如：36kr。大邊距適合單一的應用，不需要復雜信息和交互層級。

50px 全局邊距50px 可以算最大邊距，它讓界面變得干凈整潔，用戶在瀏覽時極為輕松。

豎向間距定義卡片和卡片間的間距一般是：20px、24px、30px，最大間距不超過40px。間距的背景色可以與你分割線一致，也可以淺一些，界面柔和一點。

88pxios 中最小點擊區域是 88px，因為蘋果在縱向尺寸上把 22px 作為一個基礎單元，物理尺寸最小空間的高度為 22乘4等于88px，為手指觸摸最小的高度。因此導航欄、標簽欄、列表、搜索欄和按鈕的高度都是 88px，導航欄和標簽欄圖標為 44px，元素與元素之間的最小間距是 22px。

四、iPhone X的適配方案

針對前面所講的ios 系統的常用機型，幾乎一種邏輯尺寸為375pt乘667pt 就可以完成設計的適配。而相對來說，ipone X 的適配處理稍微多一些細節。異形的 iPhone X 的屏幕部分的高度增加了145pt，如下圖所示。

先說一下頂部劉海區域的適配方式。如圖 所示，對于常規的 iPhone 8

屏幕來說，屏幕內基本都是安全顯示區域，安全顯示區域就是要把重要元素放在上面做好設計。iPhone X 上由于多了劉海

的設計和四周的圓角設計，意味著也多了兩個不可顯示內容的非安全區域。蘋果官方給出的非安全區域為屏幕上方 44 pt ，屏幕下方是 34 pt

，并且下方 34 pt 的非安全區域一定不可以放置可點擊的按鈕，否則會與虛擬的 Home 鍵發生交互上的沖突。

空間里利用率角度思考，與 IOS 界面的整體效果保持一致的感覺。如下圖所示，豎版和橫版。

而具體的適配方法要從這兩塊非安全區域去用心思考。由于頂部的非安全區域內不可以出現狀態欄之外的內容，因此從前的狀態條由20pt加長到44pt,

則意味著增加了 24 pt 。這時候導航欄的尺寸保持不變，只需整體向下移動24pt 。這時候導航欄的尺寸保持不變，只需整體向下移動 24pt

即可。同時，狀態欄背景的顏色需要與導航欄背景的顏色保持一致。

當界面頂部帶有圖片背景時，最簡單的處理方式將頂部圖片元素的高度增加 24pt。如果有 Banner 貫穿到頂部，一般有以下兩種處理方式。

第一種方式是為 iPhone X 單獨做一套 Banner 尺寸，拉長 24pt，并且頂部 24pt? 不可放置有效的閱讀消息，設計兩套圖，一種是正常的 IPONE 6、7、8 等尺寸，一種是 ipone X 的尺寸 下需要的設計廣告圖。如下圖所示。

第二種方式是顯示導航欄，并且 Banner 不再貫穿到 頂部顯示，而是移動到導航欄下方。顯示效果缺少沉浸式的設計體驗感。

說完劉海區域的適配方式之后，再來說一下底部非安全區域的適配方式。置于屏幕底部的

Home Indicator 集成了原有實體 Home

鍵退出與切換系統應用的功能。在適配過程中，可以更換此區域內背景的顏色、透明度與高度。底部的33pt 的非安全區域內禁止出現可操作按鈕。

第1種情況，當界面底部有按鈕，按鈕依附在底部 34pt 的非安全區域的上方即可，非安全區域的背景色一般與操作按鈕的背景色保持一致。如下圖所示。

第2種情況，當界面底部沒有按鈕，只需讓列表正常顯示就可以了，無須遮擋，如下圖所示。

第3種情況：在廣告引導頁等呈現全屏樣式時，需要做兩套設計稿的間距和大小的設計適配，保證好的視覺內容的展示，背景色延伸的方法就好。

界面設計中的間距思考界面所留出的固定邊距是最基礎的柵格系統。如下圖所示。

界面的分割規范應用在品類區的功能圖標，四等分的設計，符合柵格系統的設計。規范的設計，有利于開發對設計稿的還原設計。

柵格系統中的 8px 的原則8px 原則，就是界面設計中所有元素的長度除以寬度和間距都可以被 8 整除。這里的 8px 是基于@2x 倍圖格式下的切圖使用的。以320dp乘480dp為@1x 邏輯尺寸，安卓系統屏幕下的部分適配尺寸。

五、常見的移動端設計布局和適用場景

信息的設計優先級，布局合理性，提升信息的傳達效率。

核心功能的布局核心功能的各模塊的布局之間保持相對獨立，標簽橫向數量盡量不要超過5個，超過5個可以采用左右滑的交互方式來實現，來自于設計心理學。

標簽樣式的布局優點是各入口清晰呈現，方便用戶快速查找信息；標題一定要精簡。對于要突出的核心功能，可以做信息層級的大小、是否有設計背板的處理，主次關系分明。

列表式布局列表式布局適用于信息類的產品。

列表式布局優點信息展示較直觀，節省界面空間，瀏覽效率高，字段長度不受限制，并且可以錯行展示。單純看文字會視覺疲勞，所以圖文混排，富有變化。突出主題，優質配圖，有利于用戶更好的閱讀信息。

卡片式布局卡片式布局就是把不同大小、不同形式的內容放在一個容器里進行組合展示。較常見的是圖文混排，既要做到視覺上的一致性感覺，又要平衡圖片和主題內容的關系。分組展示，讓用戶更好的理解各模塊的內容。

瀑布流布局瀑布流布局適用于圖片、視頻等更好的沉浸式的瀏覽內容。移動端的瀑布流布局一般是兩列信息并行，錯位展示，可以極大的提升交互效率，可以制造豐富的視覺體驗，適用于花瓣等圖片類的界面布局設計。

六、APP組建化設計規范（具體看我站酷前面寫的組件化思維的文章）

Ios系統和安卓系統都提供了一些固定的官方組件規范。遵循其官方組件規范，可以極大提高設計和開發效率，同時降低用戶的學習成本。其中最常見的規范化組件包括頂部的狀態欄、導航欄、底部標簽欄和工具欄。

狀態欄ios 是 20pt, 安卓是24dp.

導航欄ios 是 44pt, 安卓是56dp.

標簽欄ios 的高度是 49pt, 安卓標簽欄的高度是48dp.

工具欄工具欄的高度是 44pt,安卓是 48dp .字體是蘋方字體；英文是SF英文字體。思源黑體，roboto 英文字體。

OS設計是 11pt到29pt 左右，一級主題是24pt 以上,二級標題是20pt左右。

內容，導航欄標題是 18pt。? ? 三級標題是16pt。文字內容一般是 14pt

品類區圖標內容：12pt 。底部TAB 圖標文字：10pt到11pt

七、微信小程序設計

基于微信小程序輕快的特點，我們擬定了小程序界面設計指南和建議。設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內，建立友好、高效、一致的用戶體驗，同時最大程度適應和支持不同需求，實現用戶與小程序服務方的共贏。

友好禮貌

為了避免用戶在微信中使用小程序服務時，注意力被周圍復雜環境干擾，小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾，禮貌地向用戶展示程序提供的服務，友好地引導用戶進行操作。

重點突出

每個頁面都應有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容。在確定了重點的前提下，應盡量避免頁面上出現其它與用戶的決策和操作無關的干擾因素。

避免誤操作

換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標準組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標準控件尺寸進行設計。

小程序是在微信開放平臺上運行的一種不需要下載安裝即可使用的應用，它提供了一種快速體驗的方式，用戶通過掃一掃或搜一搜即可打開應用，實現了“觸手可及”、“用完即走”的高效操作。對于開發者而言，小程序開發門檻相對較低，能滿足簡單的基礎應用。基于小程序輕快的特點，我們在進行小程序界面設計時，友好、高效、一致的用戶體驗，友好的引導用戶操作。

小程序菜單小程序的界面，包括小程序內嵌網頁和插件，微信都會在其右上角放置菜單。菜單包括兩個圖標，左邊是更多，點開分別是轉發、關于和取消；右邊是主頁，點擊后回到小程序列表。小程序菜單和狀態欄之外的區域是開發者控制區域，可設計。

微信提供深淺兩種配色，適配不同風格，元素設計的辨識度。小程序在IOS和Android 的標注尺寸，如下圖所示。

開發者不可對小程序菜單自定義，但可選擇深淺兩種基本配色以適應頁面設計風格。為了讓小程序菜單清晰可見，在深色背景上使用淺色菜單，在淺色背景上使用深色菜單。

減少輸入

由于手機鍵盤區域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設計小程序頁面時因盡量減少用戶輸入，利用現有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。

例如下圖中，在添加銀行卡時，采用攝像頭識別接口來幫助用戶輸入。除此之外微信團隊還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準確性，進而優化體驗。

在用戶搜索時提供搜索歷史快捷選項將幫助用戶快速進行搜索，而減少或避免不必要的鍵盤輸入。

上面部分用圖，來自微信小程序設計指南，具體細節設計規范可以看-微信小程序設計指南。

頁面導航頂部標簽分頁欄，顏色和樣式都可以自定義。

最常見的設計方式是將選中態填充品牌主色，未選態有清晰的對比和可操作性。最常見的設計方式是將選中態填充品牌主色，未選態填充灰色，標簽之間保持足夠的空間，避免引起誤操作。

標簽分頁分頁欄的樣式可根據App的

視覺風格進行設計，以保證兩個平臺擁有一致的視覺體驗。例如騰訊視頻，在App中，它的標簽欄分頁欄是無框式設計風格，選中態和未選態以文字大小和色彩的對比進行區分；在小程序中，同樣使用無框式設計風格，色彩不變，樣式上字號大小，精致的線條輔助展示當前狀態的設計。

開發者可為小程序頁面添加標簽分頁導航，標簽分頁欄可固定在頁面頂部或底部，便于用戶在不同在不同的分頁間做切換。標簽數量不得少于2個，最多不超過 5個，為確保足夠的點擊區域，建議標簽數量不超過4個。

小程序首頁可選擇微信提供的原生底部標簽分頁樣式，該樣式僅供小程序首頁使用。設計時可自定義圖標樣式、標簽文案及顏色等，以750乘1334px

的分辨率，標簽文案字號是 20px，圖標尺寸為 50px乘50px、標簽欄高 98px，與 ios 蘋果的設計規范保持一致性。

微信小程序的設計和開發，可根據產品需要選擇或不選擇底部標簽分頁欄，例如騰訊視頻小程序使用4個標簽承載功能不同的頁面內容，為用戶提供清晰、快速的瀏覽體驗；而窮游行程助手的內容較為單一，只需一個頁面就能清晰呈現所有內容，因此不需要標簽分頁欄。如下圖所示。

啟動頁加載在小程序列表點擊小程序后進入小程序后進入啟動頁，它是小程序在微信內一定程度上展現品牌特征的頁面之一，本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌Logo 展示外，頁面上的其他所有元素如，加載進度指示，均由微信統一提供且不能更改，無須開發者開發。品牌Logo 尺寸為 80乘80px，間距標注如下圖所示。

頁面過長時間的等待會引起用戶的負面情緒，應盡量使用微信小程序項目提供的技術縮短等待時間。優先顯示預設的本地數據，告知用戶正在加載頁面中。

全局加載反饋是在小程序名稱左側顯示加載狀態的圖標，提示加載小程序內容的過程。同時，模態的加載樣式將覆蓋整個頁面，它是由加載圖標、文字提示和半透明圓角矩形組成，由于無法明確告知具體加載的位置將可能引起用戶的焦慮情緒，因此應謹慎使用。

設計案例小程序設計是基于微信內部運行的應用，因此在視覺上要輕盈、干凈、簡潔，保持扁平化設計風格；在交互上要結構簡單、層級清晰、跳轉少，保證產品高效的瀏覽體驗。微信小程序，在設計時應精簡控件和高效、實用。

旅游產品為例：

1、 小程序頁面的右上角固定小程序菜單。

2、為確保足夠的點擊區域，小程序底部的標簽分頁欄建議最多4項。收件箱在很多 App 中不會獨立作為一個標簽，可以考慮移除；個人資料

承載了許多用戶自己的重要信息，保留在標簽欄比較合適。最后確定四個底部標簽欄的功能設計-分別是：首頁，收藏，消息，我的，四個標簽。

3、開始進行設計，保持與App 同樣的白色背景，標題欄上 Airbnb 居左對齊。

4、我們必須對原來的樣式進行優化，做減法是小程序設計的關鍵。在App中，Airbnb 的設計輕盈、干凈、簡潔，因此可以直接復用到小程序中，無須重新設計。小程序延續了輕量化陰影的視覺特征，因此優化后的界面設計依然保持與App一致的設計風格。

八、網頁的設計規范

1、網頁設計是什么？

網頁設計也被稱為 Web Design、網站設計、Website design、WUI 等。它的本質就是網站的圖形界面設計。

2、設計規范

一個產品的設計規范應該有：字體規范、主體色規范、圖表規范、圖片規范等。

3、網站種類

網站的分類按對象來劃分可以分為 To C端和 To B端兩種。To C端就是面向用戶和消費者，例如、企業網站、產品網站、電商網站、移動端H5 等，均是面向用戶的產品。以用戶為中心考慮體驗設計。

To

B端作為一個需求量很大的類別，比如電商后臺、Dashboard、企業級OA、網站統計后臺等這些面向商家和專業人士的網站就是 To B

類網站項目了。To B 類項目最重要的是效率，因為說白了我們在設計使用者工作的工具，我們在設計時必須首先要使用者可以高效工作使用。

企業網站

每個企業都需要有一個網站來對外展示自己的能力、介紹自己的產品等。企業網站設計時通常會有網站首頁、公司介紹、產品中心、公司團隊、在線商城、聯系我們等這幾個模塊，企業網站會展示很多諸如公司環境、團隊成員、企業文化等實際的照片，配合一些資料進行設計。企業網站通常也追求所謂「高端」、「大氣」、「上檔次」的風格，也就是為了達到讓消費者認同品牌這個要求。

產品網站從蘋果公司的 iPhone 介紹頁到小米手機8的介紹頁，我們會發現一種新鮮的產品營銷模式，就是產品網站。設計這類網站的內容主要是該產品的工藝、技術、設計、特點、構造、使用場景等。這樣的產品頁希望可以讓用戶有沉浸感，所以一般來說都是使用全屏布局，產品設計必須精致、有品質感。

后臺網站（數據可視化）

后臺網站 Dashborad-儀表盤。其含義就是有一大堆數據與統計信息。后臺網站是

To B

類型，那么首先的需求就是能快速地顯示給操作者他需要掌握的數據。可是數據非常枯燥，我們可以使用諸如「折線圖」、「餅狀圖」、「曲線圖」、「表格」等不同方式來展現這些繁瑣的數據，這種圖形表達數據的方式也叫做數據可視化。

可以參考的網站有：百度的 ECHARTS ，如下圖所示。

CRM系統（簡單拆解網頁B端的設計規范）CRM 即 Customer relationship management，翻譯過來是客戶管理管理系統。CRM 是企業對客戶進行信息化管理的一種形式，用互聯網技術實現對客戶信息進行收集、管理、分析，對企業的銷售、服務、售后進行監控。常見的功能有員工日程管理、訂單管理、發票管理等。

在PC端建議采用：1440x900的設計尺寸

認識 B 端系統的設計原則

一致與現實生活一致 ， 用戶使用習慣。界面中一致，設計圖標、文字、元素等保持一致性。

反饋? 控制反饋，清晰的知道自己的操作。清晰認知頁面的主題和交互狀態。

效率 簡化流程。清晰明確的含義? 界面快速認知和理解。

結果可控用戶可自由操作，包括撤銷、回退、終止當前操作等。

設計規范（具體可以參考 ANT DESIGN 網站設計規范，去制作本公司的網頁端的設計規范）

從原子：色彩、字體、間距、圓角、分割線。

分子：輸入框、選擇器、開關、上傳、時間日期選擇

組件：導航、表單、列表、 數據可視化圖表、 篩選

通用層面思考：色彩 、文字、 邊距和圓角、 按鈕 、間距、 柵格

主色：B端建議盡量選擇冷色系 避免太高亮

建議關鍵主色與白色對比度大于4.5附：對比度檢測https://webaim.org/resources/contrastchecker/

按鈕： 實心按鈕、 空心按鈕 、文字按鈕

PC端后臺：不推薦用大圓角

間距一般選用8的倍數：8、16、24、32、40、48、56、64、72......

網頁柵格，一般選用24柵格布局。24欄+23水槽+2頁邊距

柵格應用在內容層，如下圖所示。

頂部導航的使用場景：適用于一級導航數量較少，內容較為簡單的系統。追求沉浸式閱讀的系統，多用于官網首頁。

頂部導航的優點：占用屏幕空間小，為內容區留出更多空間。對視覺的干擾小，符合從上到下的閱讀習慣。一般采用固定版心的方式，更容易適配。

隨著業務的發展，拓展性變差。三三級導航點擊后隱藏，不利于用戶記憶和查找。

側邊導航的優點：適用于更專注功能和快速操作的系統，有贊為例，如下圖所示。多用于較為復雜的后臺系統。

拓展性強，一級導航的數目可以展示更多。層級清晰，一二三級導航都可以流暢展示。操作效率高，用戶在操作和瀏覽中快速定位和切換當前位置。

面包屑導航使用場景：兩級及以上層級，最多不超過5級。

作用：告知用戶你在哪里，且可以迅速回到上幾級導航。

SaaS

如果我們服務于為企業搭建 CRM、ERP 或者 OA 等系統的第三方公司，那么我們可能會老聽到 SaaS 這個詞。SaaS 是(Software-as-a-Service)，即軟件就是服務。

有贊軟件即SaaS服務,包括有贊微商城、有贊零售、有贊教育、有贊美業、有贊小程序。如下圖所示。

企業OA

企業OA，即(Office Automation)，也就是辦公自動化系統。

通過企業OA 可以完成請假、調休、離職、查詢公司規章制度、請示、匯報等工作。這樣減少了很多窗口成本和員工的時間成本，增強了公司辦事效率。

設計師在設計此類項目時同樣要以操作者的體驗和效率為重，讓操作者輕易可以找到在當前頁面中最重要的功能。

九、設計師的自我修養

我們對設計充滿興趣和激情。

1、用心積累優秀的設計案例。可以根據公司的行業競品，同類直接競品，跨界競品做好收集。

2、每日記錄設計靈感。比如：站酷收藏夾，按照主題收藏；花瓣靈感，分組命名。

3、執行力強，遇到設計問題，換位思考。

4、超出預期，做好需求的設計方案，同時關注設計細節，超出需求方的預期和用戶的預期。

5、有上進心，工作做好后，做好設計的總結和作品整理，發到站酷設計平臺，與其他設計師一起交流設計。

6、眼界開闊，知識面廣：一個優秀的設計師，不僅懂設計，還懂產品、運營、 推廣、開發思維等方面的相關知識的學習和研究。有利于和上下游人士的溝通順暢。做到互相理解，團隊更好的完成項目的設計提案。