我們在設(shè)計小程序時，一般都有設(shè)計界面，作為用戶與系統(tǒng)互動的媒介，而這些界面設(shè)計統(tǒng)稱為ui設(shè)計。那大家知道ui設(shè)計規(guī)范有哪些嗎？下面就讓小編帶大家來詳細(xì)了解一下相關(guān)的內(nèi)容吧。

　　一、ios篇

　　1、尺寸及分辨率

　　iPhone界面尺寸

　　初代iphone

　　iPhone4

　　iPhone5

　　iPhone6/7/8

　　iPhoneXS

　　iPhoneXS Max

（圖片來自網(wǎng)絡(luò)）

　　iPad界面尺寸

　　1024x768 2048x1536

　　單位都是px（像素，網(wǎng)頁UI與一定段UI分辨率一般都只要72）

　　設(shè)計的時候不是每個尺寸都要做一套，一般采用750x1334的尺寸進(jìn)行設(shè)計。

　　2、界面基本組成元素尺寸　

　　狀態(tài)欄（Status Bars）和導(dǎo)航欄（Navigation Bars）

　　狀態(tài)欄：我們經(jīng)常說的信號、運營商、電量等顯示手機(jī)狀態(tài)的區(qū)域，40px，

　　導(dǎo)航欄：顯示我們當(dāng)前界面的名稱，包含想要的功能或者頁面跳轉(zhuǎn)按鈕

　　狀態(tài)欄和導(dǎo)航欄

　　導(dǎo)航欄圖標(biāo)尺寸：在導(dǎo)航欄區(qū)域上的功能諸如搜索、添加、更多、返回等均需要用圖標(biāo)來表達(dá)　

　　標(biāo)簽欄 （Tab Bars）

　　標(biāo)簽欄指的是APP底部的區(qū)域，如微信底部常駐有聊天、通訊錄、發(fā)現(xiàn)、我的四個圖標(biāo)。

　　iPhone6/7/8設(shè)計中，標(biāo)簽欄的高度為49pt（98px），通常我們會在Tab欄圖標(biāo)之下加上11pt（22px）的注釋文字，這個注釋文字一般來說都是非常淺的淺灰色。

　　標(biāo)簽欄

　　標(biāo)簽欄圖標(biāo)尺寸

　　造型

　　工具欄 （ToolBars）

　　我們在蘋果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當(dāng)前任務(wù)相關(guān)的操作和按鈕，在滑動時可以收起。工具欄同Tab欄一樣都是位于底部，但是高度略窄，它的高度是44pt（88px）。

　　3、字體大小

　　iOS中英文使用的是

　　San Francisco (SF)

　　字體，中文是蘋方黑體

　　手機(jī)上顯示的最小字體10pt（20px），最大的是34pt（68px）。

　　表1：HIG對APP的字體建議，只針對英文SF字體而言的（基于@2x）　　

　　表2：特殊區(qū)域字體建議（基于@2x）　　

　　表3：用戶體驗　

　　4、圖標(biāo)尺寸大小

　　圖標(biāo)都是按照最大1024x1024進(jìn)行設(shè)計的，之后按照比例縮小調(diào)整，高光部分與圓角不需要做，ios系統(tǒng)自動生成，一般圖標(biāo)最大做256x256，最小44x44。

　　程序應(yīng)用 120x120px　　

　　啟動圖標(biāo)切圖

　　image.png

　　控件 控件包括：輸入框、按鈕、滑桿、頁卡、開關(guān)等，設(shè)計空間需注意兩件事：第一，點擊區(qū)域基本符合44pt（88px）原則，也就是在手機(jī)上大小大概是7mm-9mm的區(qū)域，適合手指點擊。第二，要設(shè)計操作的不同狀態(tài)，不要只設(shè)計一種狀態(tài)。

　　5、色彩

　　其實在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設(shè)計怎樣的顏色都可以。只要符合產(chǎn)品氣質(zhì)并且在色彩心理學(xué)理論上思考，用什么顏色是設(shè)計師的自由。官方建議的系統(tǒng)色彩如下：

　　系統(tǒng)建議色彩

　　6、UI布局概念

　　可點擊對象的區(qū)域：尺寸不要小于44x44px；

　　將重要的內(nèi)容和功能放在權(quán)重高的位置，將重要的元素放在前半屏比較好，對于閱讀習(xí)慣從左到右的用戶來說，更貼近屏幕左側(cè)位置容易引起關(guān)注；

　　利用視覺表現(xiàn)形式的權(quán)重和平衡，尺寸較大的元素具有更高的權(quán)重，對于尺寸較小的元素來說，更能吸引目光，看上去更加重要；

　　在iPhone6/7/8尺寸下，狀態(tài)欄高度20pt(40px)、導(dǎo)航欄44pt(88px)、Tab欄49pt(98px)、導(dǎo)航標(biāo)題字號建議17pt(34px)、導(dǎo)航欄圖標(biāo)建議22pt(44px)、Tab欄圖標(biāo)建議30pt(60px)、Tab欄圖標(biāo)注釋文字11pt(22px)、左右安全距離建議12pt(24px)。字號從10pt（20px）到34pt（68px）均可，要視具體情況決定。

　　作為iPhone全面屏系列手機(jī)，上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標(biāo)注區(qū)域不應(yīng)該放置任何功能，應(yīng)留出一定的邊距（Margin）。一般的APP會留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點擊。不過內(nèi)容展現(xiàn)卻可以呈現(xiàn)在邊距里。

　　7、切圖

　　圖標(biāo)切圖

　　有了大小各異的iPhone尺寸，如果程序只有一套切圖，那么一定會造成有的手機(jī)顯示很差。所以我們要在程序里放置多套切圖，然后讓程序判斷“主人”的手機(jī)是什么型號，顯示不同的切圖。這樣才能夠完美地呈現(xiàn)給用戶最好的體驗。切圖的方法有很多種。Sketch和

　　Adobe XD

　　可以直接導(dǎo)出。Phtoshop不具備這個功能，但是我們可以使用

　　cutterman

　　藍(lán)湖

　　等插件導(dǎo)出切圖。不管是自帶功能還是插件，導(dǎo)出切圖都可以導(dǎo)出@2x和@3x圖，而設(shè)計稿只需要iPhone6/7/8一套即可。

　　切圖命名規(guī)范　　

　　然后我們要按照 功能_ 類型_ 名稱_ 狀態(tài)@倍數(shù)來命名每個切圖，比如我們導(dǎo)航條上有一個搜索圖標(biāo)，那么它的名稱就是：

　　navi_icon_search_default@2x.png 導(dǎo)航_ 圖標(biāo)_ 搜索_ 正常@2x.png

　　App Store截圖 在程序上傳App Store時我們需要提供多張APP截圖，供用戶了解APP的功能。我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。

　　閃屏頁　

　　8、視覺規(guī)范

　　一套APP應(yīng)該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。一套移動端應(yīng)用的視覺規(guī)范應(yīng)該包括: 1、主色/輔色/色彩規(guī)范: 規(guī)定APP所能使用的色彩種類； 2、文字顏色/大小規(guī)范: 規(guī)定APP主要使用文字的大小、顏色、應(yīng)用場景等； 3、ICON規(guī)范: 規(guī)定APP的icon設(shè)計規(guī)范; 4、應(yīng)用圖標(biāo)規(guī)范: 規(guī)定APP的應(yīng)用圖標(biāo)使用規(guī)范； 5、按鈕和交互態(tài)規(guī)范: 規(guī)定APP內(nèi)所有按鈕和交互態(tài)的樣式； 6、間距規(guī)范: 規(guī)定APP內(nèi)所有間距的尺寸。

　　二、Android篇