我們在設計小程序時，一般都有設計界面，作為用戶與系統互動的媒介，而這些界面設計統稱為ui設計。那大家知道ui設計規范有哪些嗎？下面就讓小編帶大家來詳細了解一下相關的內容吧。
一、ios篇
1、尺寸及分辨率
iPhone界面尺寸
| 手機型號 | 物理像素 | 邏輯像素 | 資源 |
|---|---|---|---|
| 初代iphone | 320x480 px | 320x480 pt | @1x |
| iphone 4/4s | 640x960 px | 320x480 pt | @2x |
| iphone 5/5s | 640x1136 px | 320x568 pt | @2x |
| iphone 6s/6/7/8 | 750x1334 px | 375x667 pt | @2x |
| iphone 6s/6/7/8 Plus | 1242x2208 px | 414x736 pt | @3x |
| iphone X | 1125x2436 px | 375x812 pt | @3x |
| iphone XR | 828x1792 px | 414x896 pt | @2x |
| iphone XS | 1125x2436 px | 375x812 pt | @3x |
| iphone XS Max | 1242x2688 px | 414x896 pt | @3x |
初代iphone
iPhone4
iPhone5
iPhone6/7/8
iPhoneXS
iPhoneXS Max
（圖片來自網絡）
iPad界面尺寸
1024x768 2048x1536
單位都是px（像素，網頁UI與一定段UI分辨率一般都只要72）
設計的時候不是每個尺寸都要做一套，一般采用750x1334的尺寸進行設計。
2、界面基本組成元素尺寸
| 手機型號 | 狀態欄 | 導航欄 | 標簽欄 |
|---|---|---|---|
| iphone 6/7/8 | 40px | 88px | 98px |
| iphone Plus | 54px | 132px | 146px |
| iphone x | 132px | 132px | 248px |
狀態欄（Status Bars）和導航欄（Navigation Bars）
狀態欄：我們經常說的信號、運營商、電量等顯示手機狀態的區域，40px，
導航欄：顯示我們當前界面的名稱，包含想要的功能或者頁面跳轉按鈕
狀態欄和導航欄
導航欄圖標尺寸：在導航欄區域上的功能諸如搜索、添加、更多、返回等均需要用圖標來表達
| 建議尺寸 | 最大尺寸 | |
|---|---|---|
| @2x | 48x48px | 56x56px |
| @3x | 72x72px | 84x84px |
標簽欄 （Tab Bars）
標簽欄指的是APP底部的區域，如微信底部常駐有聊天、通訊錄、發現、我的四個圖標。
iPhone6/7/8設計中，標簽欄的高度為49pt（98px），通常我們會在Tab欄圖標之下加上11pt（22px）的注釋文字，這個注釋文字一般來說都是非常淺的淺灰色。
標簽欄
標簽欄圖標尺寸
造型
工具欄 （ToolBars）
我們在蘋果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當前任務相關的操作和按鈕，在滑動時可以收起。工具欄同Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。
3、字體大小
iOS中英文使用的是
San Francisco (SF)
字體，中文是蘋方黑體
手機上顯示的最小字體10pt（20px），最大的是34pt（68px）。
表1：HIG對APP的字體建議，只針對英文SF字體而言的（基于@2x）
| 位置 | 字族 | 邏輯像素 | 實際像素 | 行距 | 字間距 |
|---|---|---|---|---|---|
| 大標題 | Regular | 34pt | 68px | 41 | +11 |
| 標題一 | Regular | 28pt | 56px | 34 | +13 |
| 標題二 | Regular | 22pt | 44px | 28 | +16 |
| 標題三 | Regular | 20pt | 40px | 25 | +19 |
| 頭條 | Semi-Bold | 17pt | 34px | 22 | -24 |
| 正文 | Regular | 17pt | 34px | 22 | -24 |
| 標注 | Regular | 16pt | 32px | 21 | -20 |
| 副標注 | Regular | 15pt | 30px | 20 | -16 |
| 注解 | Regular | 13pt | 26px | 18 | -6 |
| 注釋一 | Regular | 12pt | 24px | 16 | 0 |
| 注釋二 | Regular | 11pt | 22px | 13 | +6 |
表2：特殊區域字體建議（基于@2x）
| 位置 | 導航欄標題 | 按鈕表頭 | 表格文字 | Tab圖標下字體 |
|---|---|---|---|---|
| 字號 | 34px | 34px | 28px | 22px |
表3：用戶體驗
| 可接受下線 | 見小值 | 舒適值 | |
|---|---|---|---|
| 長文本 | 26px | 30px | 32-34px |
| 短文本 | 28px | 30px | 32px |
| 注釋 | 24px | 24px | 28px |
4、圖標尺寸大小
圖標都是按照最大1024x1024進行設計的，之后按照比例縮小調整，高光部分與圓角不需要做，ios系統自動生成，一般圖標最大做256x256，最小44x44。
程序應用 120x120px
| 位置 | 主屏幕 | Spotlight搜索 | 標簽欄 | 工具欄和導航欄 |
|---|---|---|---|---|
| 大小 | 114x114px | 87x87px | 60x60px | 44x44px |
啟動圖標切圖
image.png
控件 控件包括：輸入框、按鈕、滑桿、頁卡、開關等，設計空間需注意兩件事：第一，點擊區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm的區域，適合手指點擊。第二，要設計操作的不同狀態，不要只設計一種狀態。
5、色彩
其實在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以。只要符合產品氣質并且在色彩心理學理論上思考，用什么顏色是設計師的自由。官方建議的系統色彩如下：
系統建議色彩
6、UI布局概念
可點擊對象的區域：尺寸不要小于44x44px；
將重要的內容和功能放在權重高的位置，將重要的元素放在前半屏比較好，對于閱讀習慣從左到右的用戶來說，更貼近屏幕左側位置容易引起關注；
利用視覺表現形式的權重和平衡，尺寸較大的元素具有更高的權重，對于尺寸較小的元素來說，更能吸引目光，看上去更加重要；
在iPhone6/7/8尺寸下，狀態欄高度20pt(40px)、導航欄44pt(88px)、Tab欄49pt(98px)、導航標題字號建議17pt(34px)、導航欄圖標建議22pt(44px)、Tab欄圖標建議30pt(60px)、Tab欄圖標注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號從10pt（20px）到34pt（68px）均可，要視具體情況決定。
作為iPhone全面屏系列手機，上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標注區域不應該放置任何功能，應留出一定的邊距（Margin）。一般的APP會留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點擊。不過內容展現卻可以呈現在邊距里。
7、切圖
圖標切圖
有了大小各異的iPhone尺寸，如果程序只有一套切圖，那么一定會造成有的手機顯示很差。所以我們要在程序里放置多套切圖，然后讓程序判斷“主人”的手機是什么型號，顯示不同的切圖。這樣才能夠完美地呈現給用戶最好的體驗。切圖的方法有很多種。Sketch和
Adobe XD
可以直接導出。Phtoshop不具備這個功能，但是我們可以使用
cutterman
藍湖
等插件導出切圖。不管是自帶功能還是插件，導出切圖都可以導出@2x和@3x圖，而設計稿只需要iPhone6/7/8一套即可。
切圖命名規范
| 簡稱 | 含義 | 簡稱 | 含義 |
|---|---|---|---|
| bg | （background）背景 | default | 默認 |
| nav | （navbar）導航欄 | pressed | 按下 |
| tab | （tab bar）標簽欄 | back | 返回 |
| btn | （button）按鈕 | edit | 編輯 |
| img | （image）圖片 | content | 內容 |
| del | （delete）刪除 | left/center/right | 左/中/右 |
| msg | （message）提示信息 | logo | 標識 |
| pop | （pop up）彈出 | login | 登錄 |
| icon | 圖標 | refresh | 刷新 |
| selected | 選擇 | banner | 廣告 |
| disabled | 不可點擊 | link | 鏈接 |
| user | 用戶 | download | 下載 |
然后我們要按照 功能_ 類型_ 名稱_ 狀態@倍數來命名每個切圖，比如我們導航條上有一個搜索圖標，那么它的名稱就是：
[email protected] 導航_ 圖標_ 搜索_ 正常@2x.png
App Store截圖 在程序上傳App Store時我們需要提供多張APP截圖，供用戶了解APP的功能。我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。
閃屏頁
| 手機型號 | 物理像素 | 邏輯像素 | 張數 |
|---|---|---|---|
| iphone 5/5s | 640x1136 px | 320x568 pt | 1 |
| iphone 6s/6/7/8 | 750x1334 px | 375x667 pt | 1 |
| iphone 6s/6/7/8 Plus | 1242x2208 px | 414x736 pt | 1 |
| iphone X | 1125x2436 px | 375x812 pt | 1 |
| iphone XR | 828x1792 px | 414x896 pt | 1 |
| iphone XS Max | 1242x2688 px | 414x896 pt | 1 |
8、視覺規范
一套APP應該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。一套移動端應用的視覺規范應該包括: 1、主色/輔色/色彩規范: 規定APP所能使用的色彩種類； 2、文字顏色/大小規范: 規定APP主要使用文字的大小、顏色、應用場景等； 3、ICON規范: 規定APP的icon設計規范; 4、應用圖標規范: 規定APP的應用圖標使用規范； 5、按鈕和交互態規范: 規定APP內所有按鈕和交互態的樣式； 6、間距規范: 規定APP內所有間距的尺寸。
二、Android篇
在微信中搜索faceui
