亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

很多新人在開(kāi)始做移動(dòng)端UI設(shè)計(jì)的時(shí)候，往往對(duì)界面的一些尺寸規(guī)范不是十分清楚，對(duì)做UI設(shè)計(jì)的基礎(chǔ)概念也沒(méi)有清晰的認(rèn)識(shí)，很多時(shí)候都是憑借自己的感覺(jué)和經(jīng)驗(yàn)去繪制界面，心里并沒(méi)有一個(gè)清晰的概念，導(dǎo)致做出來(lái)的頁(yè)面總是不那么盡如人意。本文整理匯總了一些界面設(shè)計(jì)（iOS系統(tǒng)）中常用的一些尺寸規(guī)范和方法，如控件間距、適配、標(biāo)注、切圖等，設(shè)計(jì)師在設(shè)計(jì)時(shí)并不一定要嚴(yán)格遵守，但對(duì)這些規(guī)范應(yīng)有所了解，并融會(huì)貫通。

01.UI基礎(chǔ)概念

02.UI元素設(shè)計(jì)規(guī)范

03.UI版式設(shè)計(jì)規(guī)范

04.UI文字使用規(guī)范

05.UI顏色使用規(guī)范

06.UI輸出規(guī)范

07.UI交互介紹

08.總結(jié)

在開(kāi)始UI設(shè)計(jì)之前必須搞清楚物理像素、邏輯像素、倍率三個(gè)詞。

屏幕都是由許多像素點(diǎn)組成，每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們看到的畫面。像我們的熟悉iphone 6s 屏幕就是由750行、1334列像素點(diǎn)組成的矩陣圖。設(shè)計(jì)師作圖所用的分辨率就是指物理像素，簡(jiǎn)而言之，物理像素=分辨率，單位px

邏輯像素又叫邏輯點(diǎn)，是控制屏幕內(nèi)容顯示多寡的一個(gè)單位，單位符號(hào)pt，程序員在開(kāi)發(fā)環(huán)節(jié)必須將設(shè)計(jì)師提供的物理像素轉(zhuǎn)換成邏輯像素，并通過(guò)邏輯像素來(lái)控制頁(yè)面顯示哪些內(nèi)容。不同設(shè)備邏輯像素與物理像素的比例是不同的。每個(gè)設(shè)備物理像素固定不變，我們調(diào)節(jié)顯示器的分變率其實(shí)調(diào)節(jié)的是邏輯像素。

物理像素在硬件層面構(gòu)成了液晶屏幕，邏輯像素在軟件層面構(gòu)成了畫面圖像倍率，1個(gè)邏輯像素對(duì)應(yīng)1個(gè)物理像素，1pt=1px，倍率1x，1個(gè)邏輯像素對(duì)應(yīng)1.5個(gè)物理素，1pt=1.5px，倍率1.5x，1個(gè)邏輯像素對(duì)應(yīng)2個(gè)物理像素，1pt=2px，倍率2x，1個(gè)邏輯像素對(duì)應(yīng)3個(gè)物理像素，1pt=3px，倍率3x，倍率=物理像素/邏輯像素。

由于開(kāi)發(fā)工具不同，邏輯像素在ios,android名稱不同，ios是pt，android是dp

那么ios設(shè)計(jì)時(shí)選擇何種倍率？

要從開(kāi)發(fā)換算、設(shè)計(jì)成本、效果查看、倍率轉(zhuǎn)換、切圖5個(gè)方面來(lái)綜合選擇。

開(kāi)發(fā)換算，程序員拿到設(shè)計(jì)師提供的標(biāo)注圖以后，需要將標(biāo)注中的物理像素轉(zhuǎn)換成邏輯像素，即px轉(zhuǎn)換為pt，這里便涉及到換算的問(wèn)題。通常設(shè)計(jì)圖中元素尺寸在三位數(shù)以內(nèi)，對(duì)于一般人而言三位數(shù)以內(nèi)除以1最容易，2其次，3最后，本輪排1x>2x>3x

設(shè)計(jì)成本，在2x邏輯像素下，列表高60pt，頭像高51pt，二者不可能剛好居中對(duì)齊，勢(shì)必偏移1pt，手機(jī)實(shí)際顯示偏移2px；在3x物理像素下，列表高150px，頭像高100px，轉(zhuǎn)換到1x邏輯像素，100不能被3整除，勢(shì)必造成偏移。為保證落地效果，1x倍率下尺寸必須為偶數(shù)，2x倍率下尺寸必須為4的倍數(shù)，3x倍率下尺寸必須為6的倍數(shù)，本輪排序1x>2x>3x

效果查看，我們通常會(huì)將效果圖導(dǎo)入對(duì)應(yīng)設(shè)備中進(jìn)行查看，目前主流設(shè)備都采用2x，3x倍率，1x的設(shè)計(jì)圖在主流設(shè)備上成倍放大的同時(shí)，分割線，描邊線也會(huì)成倍的放大，如果不對(duì)這些細(xì)節(jié)二次調(diào)整，終端效果會(huì)很不理想。由于2x，3x之間等比縮放跨度不大，故而邏輯像素相同的兩個(gè)2x，3x可以直接查看彼此的效果圖，3x比2x效果好些，本輪排序3x>2x>1x

倍率轉(zhuǎn)換，1x轉(zhuǎn)換2x，3x極為方便；2x轉(zhuǎn)換為1x需要除以2，轉(zhuǎn)換3x需要乘以1.5較為便捷；3x轉(zhuǎn)換2x需要除以3乘以2，轉(zhuǎn)換1x需要除以3，比較繁瑣，本輪排序1x>2x>3x

切圖，1x設(shè)計(jì)圖必須另外導(dǎo)出2x，3x兩套切圖，2x設(shè)計(jì)圖導(dǎo)出3x需放大1.5倍，3x導(dǎo)2x需要除以3再乘以2，麻煩，本輪排序2x>3x>1x

綜合比較分析，只有2x倍率設(shè)計(jì)圖方便向上向下適配轉(zhuǎn)換。

那么在確立ios設(shè)計(jì)尺寸以后，android是否需要另出一套圖呢？答案是看需求，可以一稿配雙平臺(tái)。

在2x倍率下，ios有640x1136、750x1334、750x1624三種主流分辨率，android統(tǒng)一為720x1280,兩平臺(tái)采用相同的APP設(shè)計(jì)規(guī)范，邏輯像素?fù)Q算方式一樣，程序員根據(jù)同一份標(biāo)注圖開(kāi)發(fā)，實(shí)現(xiàn)頁(yè)面中元素尺寸完全相同，在ios3種尺寸中750x1334也最接近720p，寬度僅相差30px,相差比僅為0.04適配無(wú)差別，故而可以一稿配雙平臺(tái)，如果對(duì)實(shí)現(xiàn)效果要求較高，那就需要按720x1280再出圖。

iPhone X依然可用750x1334設(shè)計(jì),只是高度增加了290px，尺寸750*1624（@2x）注意狀態(tài)欄的高度由原來(lái)的40px變成了88px，另外底部要預(yù)留68px的主頁(yè)指示器的位置。

確立雙平臺(tái)設(shè)計(jì)尺寸750x1334以后，務(wù)必要清楚APP界面的基本構(gòu)成。

狀態(tài)欄，用來(lái)呈現(xiàn)信號(hào)，時(shí)間，電量等信息，高20pt，寬通欄，位于APP界面頂部，可以改變底色與APP統(tǒng)一。

導(dǎo)航欄，導(dǎo)航作用，位于狀態(tài)欄下方，底色一般為APP主色，高44pt，寬通欄一般顯示主題也可以放搜索等控件。

標(biāo)簽欄，讓用戶在不同的子任務(wù)，視圖和模式中進(jìn)行切換，位于APP底部，高49pt，寬通欄，一般放3-5個(gè)圖標(biāo)。

工具欄，放置著用于操作當(dāng)前屏幕中各對(duì)象的控件，位于APP底部，高44pt，寬通欄
搜索欄，用于搜索，高可自定義，寬也可自定義或通欄，可位于導(dǎo)航欄上方也可以放在下方范圍欄，只和搜索一起出現(xiàn)，高寬可自定義，位于搜索欄下方。

內(nèi)容視圖是APP主要內(nèi)容，常見(jiàn)的有5種視圖形式。

列表形式，每條列表可以是單獨(dú)的圖片或者文本，也可以圖文混合，并用分割線分區(qū)
卡片形式，將同類形式歸納到一個(gè)矩形或者圓角矩形當(dāng)中，卡片可堆疊，覆蓋，移動(dòng)，美化。

集合視圖，將同類信息用平鋪的形式展現(xiàn)，一般圖片為主，文字為輔。

圖片形式，純圖片展示。

文字形式，純文本形式。

控制元素用于控制顯示APP內(nèi)容。

頁(yè)面控制器，告訴用戶當(dāng)前處于第幾個(gè)頁(yè)面，常見(jiàn)于banner。

分段式控件，將一個(gè)頁(yè)面分到2-5個(gè)類別，常見(jiàn)于導(dǎo)航欄上下方。

刷新視圖，提示用戶正在刷新。

選擇器，常用于選擇信息，調(diào)節(jié)數(shù)值。

文本框，常用與信息輸入。

進(jìn)度條，展示任務(wù)或進(jìn)程進(jìn)度。

臨時(shí)視圖用于臨時(shí)顯示APP重要信息，或提供額外功能或選項(xiàng)。

警告視圖，必須包含標(biāo)題，或標(biāo)題加正文，包含一個(gè)或多個(gè)按鈕。

操作列表，用戶某個(gè)行為操作觸發(fā)，包含兩個(gè)或以上按鈕。

模態(tài)視圖，占據(jù)整個(gè)屏幕，包含當(dāng)前任務(wù)所需文字和控件，通常也會(huì)包含一個(gè)完成和一個(gè)取消按鈕。

啟動(dòng)圖標(biāo)（設(shè)計(jì)時(shí)不需要做圓角，做圓角只是為看實(shí)際效果）。

啟動(dòng)圖標(biāo)柵格系統(tǒng)

iOS界面尺寸及欄高

Android界面尺寸及欄高

8像素原理，由于iOS技術(shù)開(kāi)發(fā)以320x480px為標(biāo)準(zhǔn)開(kāi)發(fā)的，所以設(shè)定尺寸為1，算出各個(gè)尺寸的比例。各個(gè)尺寸比例的值乘以4時(shí)，各個(gè)尺寸都能夠滿足是整數(shù)，且保證開(kāi)始是不會(huì)模糊。又因?yàn)锧2x切圖設(shè)計(jì)稿尺寸為640x960px，所以設(shè)計(jì)最小的尺寸單位為8px

8像素原理優(yōu)勢(shì)，保證在雙平臺(tái)的大部分機(jī)型開(kāi)發(fā)中不會(huì)出現(xiàn)模糊變形的問(wèn)題。使用8px原理只需要一套設(shè)計(jì)稿，減少設(shè)計(jì)師的工作量，提升效率。

在移動(dòng)端頁(yè)面的設(shè)計(jì)中，頁(yè)面中元素的邊距和間距的設(shè)計(jì)規(guī)范是非常重要的，一個(gè)頁(yè)面是否美觀、簡(jiǎn)潔、是否通透和邊距間距的設(shè)計(jì)規(guī)范緊密相連。

全局邊距，全局邊距是指頁(yè)面內(nèi)容到屏幕邊緣的距離，整個(gè)應(yīng)用的界面都應(yīng)該以此來(lái)進(jìn)行規(guī)范，以達(dá)到頁(yè)面整體視覺(jué)效果的統(tǒng)一。

在實(shí)際應(yīng)用中應(yīng)該根據(jù)不同的產(chǎn)品氣質(zhì)采用不同的邊距，讓邊距成為界面的一種設(shè)計(jì)語(yǔ)言，常用的全局邊距有32px、30px、24px、20px等等，當(dāng)然除了這些還有更大或者更小的邊距，但上面說(shuō)到的這些是最常用的，而且有一個(gè)特點(diǎn)就是數(shù)值全是偶數(shù)。以iOS原生態(tài)頁(yè)面為例，“設(shè)置”頁(yè)面和“通用”頁(yè)面都是使用的30px的邊距，以微信和支付寶為例，他們的邊距分別是20px和24px。通常左右邊距最小為20px，這樣的距離可以展示更多的內(nèi)容，不建議比20還小，否則就會(huì)使界面內(nèi)容過(guò)于擁擠，給用戶的瀏覽帶來(lái)視覺(jué)負(fù)擔(dān)。30px是非常舒服的距離，是絕大多數(shù)應(yīng)用的首選邊距。

卡片間距，在移動(dòng)端頁(yè)面設(shè)計(jì)中卡片式布局是非常常見(jiàn)的布局方式，至于卡片和卡片之間的距離的設(shè)置需要根據(jù)界面的風(fēng)格以及卡片承載信息的多少來(lái)界定，通常最小不低于16px，過(guò)小的間距會(huì)造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px，當(dāng)然間距也不宜過(guò)大，過(guò)大的間距會(huì)使界面變得松散，間距的顏色設(shè)置可以與分割線一致，也可以更淺一些。

以iOS（750*1334px）為例，設(shè)置頁(yè)面不需要承載太多的信息，因此采用了較大的70px作為卡片間距，有利于減輕用戶的閱讀負(fù)擔(dān)，而通知中心承載了大量的信息，過(guò)大的間距會(huì)讓瀏覽變得不連貫和界面視覺(jué)松散，因此采用了較小的16px作為卡片的間距。

還有一種是不留邊距，通常被應(yīng)用在卡片式布局中圖片通欄顯示，比如站酷APP（當(dāng)然站酷APP也進(jìn)行了改版，首頁(yè)已經(jīng)采用了不通欄的卡片式設(shè)計(jì)）。這種圖片通欄顯示的設(shè)置方式，更容易讓用戶將注意力集中到每個(gè)圖文的內(nèi)容本身，其視覺(jué)流在向下瀏覽時(shí)因?yàn)闆](méi)有留白的引導(dǎo)被圖片直接割裂，造成在圖片上停留更長(zhǎng)時(shí)間。

內(nèi)容間距，一款A(yù)PP除了各種欄（狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄）和控件icon就是內(nèi)容了，內(nèi)容的布局形式多種多樣，這里不去探討內(nèi)容具體應(yīng)該如何去布局，我們來(lái)說(shuō)一說(shuō)內(nèi)容的間距設(shè)置問(wèn)題。

先來(lái)介紹一下格式塔原則中的一個(gè)重要的原則就是鄰近性，格式塔鄰近性原則認(rèn)為：?jiǎn)蝹€(gè)元素之間的相對(duì)距離會(huì)影響我們感知它是否以及如何組織在一起，，互相靠近的元素看起來(lái)屬于一組，而那些距離較遠(yuǎn)的則自動(dòng)劃分組外，距離近的關(guān)系緊密。來(lái)看下圖，左圖中的圓在水平方向比垂直距離近，那么，我們看到了4排圓點(diǎn)，而右圖則看成4列。

在UI設(shè)計(jì)中內(nèi)容布局時(shí)，一定要重視鄰近性原則的運(yùn)用，比如在下面這款輕芒閱讀APP的主界面中，每一個(gè)應(yīng)用名稱都遠(yuǎn)離其他圖標(biāo)，與對(duì)應(yīng)的圖標(biāo)距離較近，保持親密的關(guān)系，也讓用戶的瀏覽變得更直觀，如果應(yīng)用名稱與上下圖標(biāo)距離相同，就分不出它是屬于上面還是下面，從而讓用戶產(chǎn)生錯(cuò)亂的感覺(jué)。

再來(lái)看一個(gè)案例，日日煮APP，上面圖片與文字較近，下面圖片與文字較遠(yuǎn)，所以我們清晰的知道文字是屬于上面的圖片的。

在APP的設(shè)計(jì)中內(nèi)容的布局形式多種多樣，這里介紹最常用的兩種布局形式，列表式布局和卡片式布局。

列表式布局方式，非常普遍，隨便打開(kāi)一個(gè)APP，基本都存在這種布局方式，其布局形式的特點(diǎn)在于能夠在較小的屏幕中顯示多條信息，用戶通過(guò)上下滑動(dòng)的手勢(shì)能獲得大量的信息反饋。以我們最常用的微信和QQ為例，其“信息”頁(yè)面都是采用的列表式布局，在采用這種布局形式的時(shí)候要注意列表舒適體驗(yàn)的最小高度是80px，最大的高度要視內(nèi)容的多少而定。自如（列表高110px）和唯品會(huì)（列表高106px）列表式布局。

卡片式布局，形式非常靈活。其特點(diǎn)在于，每張卡片的內(nèi)容和形式都可以相互獨(dú)立，互不干擾，所以可以在同一個(gè)頁(yè)面中出現(xiàn)不同的卡片承載不同的內(nèi)容。而由于每張卡片都是獨(dú)立存在的，其信息量可以相對(duì)列表更加豐富。在使用卡片式布局的時(shí)候要注意卡片本身一般是白色的，而卡片之間的間距顏色一般是淺灰色，當(dāng)然不同產(chǎn)品風(fēng)格顏色可能不一樣，有些是淺灰色偏藍(lán)等。

雙欄卡片的布局形式，比較常見(jiàn)于以圖片信息為主導(dǎo)的App。例如一些商城的商品陳列頁(yè)面。這種形式與卡片式類似，但它能在一屏里顯示更多的內(nèi)容，至少4張卡片。同時(shí)，由于分開(kāi)左右兩欄的顯示，用戶可以更加方便地對(duì)比左右兩欄卡片的內(nèi)容。

界面圖片設(shè)計(jì)比例，在UI設(shè)計(jì)中，對(duì)于圖片的尺寸和比例沒(méi)有嚴(yán)格的規(guī)范，設(shè)計(jì)師往往憑借經(jīng)驗(yàn)和感覺(jué)設(shè)置一個(gè)看起來(lái)不錯(cuò)的尺寸，但事實(shí)上我們是有章可循的。運(yùn)用科學(xué)的手段設(shè)置圖片的尺寸，可以獲得最優(yōu)的方案，常見(jiàn)的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。

這些比例不無(wú)根據(jù)，它們都和圖片尺寸有關(guān)。16:9 是根據(jù)人體工程學(xué)的研究，發(fā)現(xiàn)人的兩只眼睛的視野范圍是一個(gè)長(zhǎng)寬比例為16:9的長(zhǎng)方形，4:3 是勾三股四弦五，在攝影中非常常見(jiàn)……

建立統(tǒng)一風(fēng)格的圖標(biāo)，在應(yīng)用界面的設(shè)計(jì)中，功能圖標(biāo)不是單獨(dú)的個(gè)體，通常是由許多不同的圖標(biāo)構(gòu)成整個(gè)系列，它們貫穿于整個(gè)產(chǎn)品應(yīng)用的所有頁(yè)面并向用戶傳遞信息。一套APP圖標(biāo)應(yīng)該具有相同的風(fēng)格，包括造型規(guī)則、圓角大小，線框粗細(xì)，圖形樣式和個(gè)性細(xì)節(jié)等元素都應(yīng)該具有統(tǒng)一的規(guī)范。

通過(guò)分析以上三組圖標(biāo)可以得出：他們具有統(tǒng)一的色彩，統(tǒng)一的圓角大小，統(tǒng)一的線框粗細(xì)，那綜合起來(lái)也就是具有統(tǒng)一的風(fēng)格，給用戶高度統(tǒng)一的視覺(jué)體驗(yàn)。

系統(tǒng)圖標(biāo)柵格系統(tǒng)

系統(tǒng)圖標(biāo)柵格系統(tǒng)，視覺(jué)比例保持一致的柵格范例：圓形圖標(biāo)視覺(jué)張力較小，所以撐滿整格；方形圖標(biāo)視覺(jué)張力較大，所以適當(dāng)縮小；豎長(zhǎng)圖標(biāo)一般上下?lián)螡M格，左右留間距；橫長(zhǎng)圖標(biāo)一般左右撐滿格，上下留間距。

系統(tǒng)圖標(biāo)示例

通過(guò)系統(tǒng)圖標(biāo)柵格系統(tǒng)完成的APP圖標(biāo)效果演示（功能型圖標(biāo)）

通過(guò)系統(tǒng)圖標(biāo)柵格系統(tǒng)完成的APP圖標(biāo)效果演示（非功能型圖標(biāo)）

公共控件-重要按鈕

公共控件-次級(jí)按鈕

公共控件-較弱按鈕

公共控件-選擇&單選

公共控件-選項(xiàng)卡

公共控件-標(biāo)簽

公共控件-搜索控件

注冊(cè)登錄，分四種情況，第一種，不需要注冊(cè)登錄。一些簡(jiǎn)單的第三方APP ，開(kāi)眼，樂(lè)流等，功能單一，不需要用戶信息就能使用所有功能。

第二種，第三方賬號(hào)登錄。用戶不需要輸入登錄信息，直接選擇一種第三方賬號(hào)登錄即可，比如微信，微博，QQ等，簡(jiǎn)化流程，提高留存率。

第三種，郵箱注冊(cè)。最開(kāi)始的注冊(cè)是基于網(wǎng)頁(yè)的，郵箱注冊(cè)自然成為主流。注冊(cè)過(guò)程中需要驗(yàn)證郵箱也很方便。

第四種，手機(jī)注冊(cè)。APP基于手機(jī)，手機(jī)號(hào)注冊(cè)APP通過(guò)短信驗(yàn)證也成為了主流。

注冊(cè)登錄優(yōu)化設(shè)計(jì)，用顯示/隱藏小icon代替輸入兩遍密碼。為確保APP密碼輸入正確，很多APP需要用戶輸入2遍密碼確認(rèn)，這無(wú)疑增加用戶工作量，解決辦法就是增加顯示/隱藏小icon。

彈出對(duì)應(yīng)的輸入鍵盤。點(diǎn)開(kāi)郵箱輸入框彈出帶有@的英文輸入鍵盤，點(diǎn)開(kāi)手機(jī)號(hào)輸入
彈出九宮格數(shù)字鍵盤，點(diǎn)開(kāi)密碼輸入，彈出英文輸入鍵盤。

對(duì)手機(jī)號(hào)碼進(jìn)行344分布。這規(guī)則不僅適用于手機(jī)號(hào)碼，包括銀行賬號(hào)和轉(zhuǎn)賬金額等等這樣有利于用戶編輯和閱讀數(shù)字。

增加一鍵清空ICON。登錄時(shí)偶爾會(huì)出現(xiàn)輸入錯(cuò)誤，鍵盤中的清除只能一直按著才會(huì)清空，有了一鍵清空方便處理。

清晰的錯(cuò)誤反饋。當(dāng)用戶輸入信息有誤，不是讓用戶自己猜，而是彈出臨時(shí)框告知用戶兩種形式dialog和toast，后者更好一些，沒(méi)有中斷操作。

網(wǎng)絡(luò)切換，一些消耗流量大的APP用戶一般只會(huì)在WiFi狀態(tài)下運(yùn)行，當(dāng)WiFi切換到3G/4G時(shí)會(huì)提示。

網(wǎng)頁(yè)加載，下拉刷新或者網(wǎng)絡(luò)延遲正在進(jìn)入。

網(wǎng)絡(luò)異常，APP無(wú)法與服務(wù)器交換數(shù)據(jù)，一般有三種形式處理網(wǎng)絡(luò)中斷問(wèn)題，第一種，整頁(yè)提示。設(shè)計(jì)樣式包括三部分：icon或者插畫形式，網(wǎng)絡(luò)異常文案，重新連接的按鈕。

第二種，預(yù)設(shè)圖和占位符提示。由于網(wǎng)絡(luò)信號(hào)不好或者網(wǎng)絡(luò)中斷等引起頁(yè)面無(wú)法調(diào)取時(shí)，我們可以在APP中事先預(yù)設(shè)圖標(biāo)和占位符來(lái)代替加載的數(shù)字，圖片，文字，也就是預(yù)處理過(guò)程。

第三種，toast&dialog提示。

臨時(shí)視圖，警告視圖。當(dāng)你觸發(fā)重要按鈕時(shí)，需要你再次確認(rèn)這就是警告視圖，比如升級(jí)APP，獲取位置等都會(huì)出現(xiàn)。包括三部分標(biāo)題，正文，按鈕。有些簡(jiǎn)單的只有標(biāo)題和按鈕。

模態(tài)視圖。暫停主任務(wù)，完成模態(tài)里的任務(wù)自動(dòng)回到主任務(wù)。通常占據(jù)整個(gè)屏幕，包含完成任務(wù)所需的文字和控件，包含完成和取消按鈕。

操作列表。針對(duì)當(dāng)前頁(yè)，用戶想執(zhí)行的操作太多，不可能把這些操作都放出來(lái)，不然頁(yè)面密密麻麻，操作列表完美解決這個(gè)問(wèn)題。

空頁(yè)面，沒(méi)有內(nèi)容的頁(yè)面或者尚未添加內(nèi)容的頁(yè)面。

版式設(shè)計(jì)又叫做版面編輯，即在有限的版面空間里，將版面的構(gòu)成要素如文字、圖片、控件等根據(jù)特定的內(nèi)容進(jìn)行組合排列。一個(gè)優(yōu)秀的排版要考慮到用戶的閱讀習(xí)慣和設(shè)計(jì)美感，在UI設(shè)計(jì)中版面設(shè)計(jì)的原則有哪些呢？

對(duì)齊，對(duì)齊是貫穿版式設(shè)計(jì)的最基礎(chǔ)，最重要的原則之一，它能建立起一種整齊劃一的外觀，帶給用戶有序一致的瀏覽體驗(yàn)。

對(duì)稱，對(duì)稱是宇宙間的設(shè)計(jì)哲學(xué)，是對(duì)立統(tǒng)一規(guī)律的本質(zhì)屬性，呈現(xiàn)出一種和諧自然的美，在應(yīng)用界面的設(shè)計(jì)中，引導(dǎo)頁(yè)設(shè)計(jì)、注冊(cè)登錄輸入框和按鈕等無(wú)一不是對(duì)稱的設(shè)計(jì)。

分組，物以類聚，人以群分。分組是將同類別的信息組合在一起，直觀的呈現(xiàn)在用戶的面前，這樣的設(shè)計(jì)能夠減少用戶的認(rèn)知負(fù)擔(dān)，在移動(dòng)端界面的設(shè)計(jì)中最常見(jiàn)的分組方式就是卡片，為用戶選擇提供專注而又明確的瀏覽體驗(yàn)。

在iOS 9推出之前普遍采用華文黑體、谷歌思源、冬青等字體進(jìn)行設(shè)計(jì)，iOS 9推出了蘋果自己的字體—蘋方自此iOS中文采用蘋方，英文/數(shù)字采用HelveticaNeue；Android中文采用思源，英文/數(shù)字采用Roboto

文字是APP中最核心的元素，那么，文字的字體如何選擇，字號(hào)如何設(shè)定，是否加粗，顏色如何設(shè)置？

在一款A(yù)PP中字號(hào)范圍一般在20-36之間（@2x）,當(dāng)然iOS 11中出現(xiàn)了大標(biāo)題的設(shè)計(jì)，字號(hào)還是要根據(jù)產(chǎn)品屬性酌情設(shè)定。另外需要注意的一點(diǎn)是所有的字號(hào)設(shè)置都必須為偶數(shù)，上下級(jí)內(nèi)容字號(hào)極差關(guān)系為2-4號(hào)。

關(guān)于字體顏色和是否加粗：字體的顏色設(shè)置我們一般很少用純黑色，一般用深灰色和淺灰色、細(xì)體和粗體（注意要用字體本身的字重，不能用PS的加粗功能）來(lái)區(qū)分重要信息和次要信息，進(jìn)行信息層級(jí)的劃分）

顏色的使用分3種場(chǎng)景，重要，一般，較弱（ 文字有時(shí)候也會(huì)單獨(dú)作為一個(gè)場(chǎng)景 ）

標(biāo)注示例

頁(yè)面標(biāo)注，當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)界面進(jìn)行標(biāo)注給開(kāi)發(fā)工程師在還原界面時(shí)進(jìn)行參考。

常用的標(biāo)注工具有Mark Man或PX Cook，一般需要標(biāo)注這些地方：

1.標(biāo)題欄：背景色，標(biāo)題欄文字大小，文字顏色(不再贅述)；

2.Banner：所有撐滿橫屏的大圖，不需要橫向尺寸，把高度標(biāo)出了就可以了;

3.菜單圖標(biāo)：圖標(biāo)的大小和圖標(biāo)的可點(diǎn)擊區(qū)域不一定一致也就是說(shuō)，圖標(biāo)可以做的很小，但是為了保證點(diǎn)擊的準(zhǔn)確性和流暢性，工程師可以把可點(diǎn)擊區(qū)域設(shè)置的很大，這樣標(biāo)注和切圖的時(shí)候就要注意，標(biāo)注的是可點(diǎn)擊區(qū)域的大小，切圖切的也是可點(diǎn)擊區(qū)域的大小，也就是用透明區(qū)域去補(bǔ)上，否則圖片會(huì)模糊。在設(shè)計(jì)的時(shí)候就要考慮可點(diǎn)擊區(qū)域的范圍，比如X寶購(gòu)物車頁(yè)面左側(cè)的小圈，可點(diǎn)擊區(qū)域要比實(shí)際小圈尺寸大很多。這種類型的圖標(biāo)需要標(biāo)注圖標(biāo)點(diǎn)擊區(qū)域大小，圖標(biāo)距離屏幕最左最右以及上下的距離。至于圖標(biāo)的間距，因?yàn)橛行r(shí)候可能 設(shè)計(jì)師不能完全做到1px不差，所以我基本不標(biāo)，交給工程師讓他們?nèi)ヌ幚?，其?shí)等距排列的圖標(biāo)不需要標(biāo)間距，因?yàn)楣こ處熯€要?jiǎng)討B(tài)適應(yīng)不同的屏幕，標(biāo)了間距也是白標(biāo)(還是要和你的搭檔溝通怎么去標(biāo)注）；

4.模塊間隔：這個(gè)位置其實(shí)不是太重要，我習(xí)慣標(biāo)注上這里，麻煩能少則少。

5.圖片+文字：這個(gè)應(yīng)該比較常見(jiàn)，只標(biāo)注一個(gè)單位(圖+文)就可以了。圖片需要標(biāo)注寬高，因?yàn)楣こ處熞O(shè)置圖片區(qū)域，從后臺(tái)調(diào)取，可以這么說(shuō)，軟件里除了橫屏撐滿的圖，基本上所有的圖片都要標(biāo)注寬高。圖片距離上下左右的距離，文字大小顏色，這里的文字其實(shí)算兩個(gè)控件，標(biāo)題文字以及說(shuō)明文字，需要單獨(dú)標(biāo)出。Tab Bar：這個(gè)位置其實(shí)比較特殊，你可以單獨(dú)標(biāo)注圖標(biāo)大小+文字大??；還可以圖標(biāo)文字算作一個(gè)控件，整個(gè)切出來(lái)。

切圖規(guī)范，當(dāng)界面設(shè)計(jì)定稿之后，設(shè)計(jì)師需要對(duì)圖標(biāo)進(jìn)行切片提供給開(kāi)發(fā)工程師，通常我們只需要對(duì)icon進(jìn)行切圖即可，文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的，例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可，開(kāi)發(fā)工程師可以用代碼實(shí)現(xiàn)這種效果。

輸出切片，先將設(shè)計(jì)稿中的圖標(biāo)重新排列在一張新的畫布中，保證同樣尺寸的圖標(biāo)間距相同，這樣做的好處是為圖標(biāo)建立一個(gè)控件庫(kù)，有利于圖標(biāo)的整理。給每一個(gè)圖標(biāo)建立好參考線之后，用PS自帶的切片功能沿著建立好的每個(gè)圖標(biāo)的參考線畫框即可，注意最后要輸出PNG格式的切片（PNG格式擁有更多的顏色和細(xì)節(jié)并且支持透明）。在具體操作時(shí)首先要將畫布背景色去掉，讓畫布變成透明，做好切片后執(zhí)行“文件
-存儲(chǔ)為Web所用格式，在對(duì)話框中選擇PNG格式，點(diǎn)擊“存儲(chǔ)”即可。每種圖標(biāo)或者圖片如果有不同狀態(tài)，每一種不同的狀態(tài)都需要進(jìn)行切片輸出。

切片命名，切片命名的通用規(guī)范是，界面_功能_狀態(tài).png。名稱應(yīng)使用英文命名，不要使用數(shù)字或者符號(hào)作為開(kāi)頭，使用下劃線進(jìn)行連接，例如一個(gè)首頁(yè)處于正常狀態(tài)下的按鈕命名是 home_btn_nor@2x.png。其中界面首頁(yè)是home、空間按鈕是btn、狀態(tài)正常是normal。為了命名的正確性，設(shè)計(jì)師需要先和合作的開(kāi)發(fā)工程師進(jìn)行溝通確認(rèn)。

切圖格式，位圖格式：PNG 24，PNG 8，JPG在JPG和PNG兩種格式圖片大小相差不是很大的情況下，推薦使用PNG；如果圖片大小相差很大，使用JPG。歡迎頁(yè)面一定要使用PNG格式，在不影響視覺(jué)效果的前提下，可以考慮使用PNG 8；矢量圖格式：PDF，SVG，WEBP，IOS原生支持的兩種矢量圖片格式，但是支持的一般，并不能保證100%把所有圖片效果渲染出來(lái)；

優(yōu)化，切圖出來(lái)后還要做資源優(yōu)化處理。一個(gè)APP有很多圖標(biāo)，圖片，它們的大小直接影響APP大小，并不是所有人的手機(jī)網(wǎng)速都很快，APP太大加載緩慢，會(huì)直接影響使用，所以一般都會(huì)進(jìn)行二次壓縮優(yōu)化。

交互設(shè)計(jì)，從項(xiàng)目立項(xiàng)，調(diào)研分析，獲取設(shè)計(jì)需求和功能列表，到確定信息架構(gòu)，任務(wù)流程，最終形成頁(yè)面原型整個(gè)過(guò)程。

信息架構(gòu)，熟悉用戶需求之后，要將抽象的需求轉(zhuǎn)化成一個(gè)個(gè)任務(wù)，再將任務(wù)變成產(chǎn)品的一個(gè)功能點(diǎn)。然后每個(gè)功能細(xì)化，就會(huì)形成信息架構(gòu)。信息架構(gòu)并不是一開(kāi)始就畫的很完善，而是根據(jù)不同的任務(wù)一步步列出也就是逐漸優(yōu)化完善的過(guò)程。信息架構(gòu)有了以后，就可以根據(jù)信息架構(gòu)去建立頁(yè)面流了。

流程圖，是用來(lái)描述一個(gè)任務(wù)的基本流程的，即用戶完成該任務(wù)的行為流程是怎樣的，有了各任務(wù)的流程圖下面就可以具體到每個(gè)頁(yè)面了。

頁(yè)面流，能清晰表達(dá)用戶完成某一任務(wù)所要經(jīng)過(guò)的頁(yè)面，除了頁(yè)面還有頁(yè)面包含的行動(dòng)點(diǎn)，以及頁(yè)面跳轉(zhuǎn)包含的手勢(shì)和動(dòng)畫，頁(yè)面，行動(dòng)點(diǎn)，連接線缺一不可。

線框圖，功能點(diǎn)和信息架構(gòu)梳理完畢，頁(yè)面流反映了用戶的操作路徑，接下來(lái)要做的就是具體化每個(gè)頁(yè)面這就是線框圖。線框圖反映了產(chǎn)品每個(gè)頁(yè)面所包含的信息，元素，控件等信息，對(duì)接下來(lái)的視覺(jué)和前端工作至關(guān)重要。

本文整理匯總了包括基礎(chǔ)概念，元素設(shè)計(jì)，版式設(shè)計(jì)，文字使用，顏色使用，輸出，交互介紹等等一些列的移動(dòng)端UI設(shè)計(jì)規(guī)范，在此期間查閱了相關(guān)的資料，共耗時(shí)三天完成，希望為剛剛從事UI設(shè)計(jì)的設(shè)計(jì)師們提供入門級(jí)別的幫助。

?最后祝大家學(xué)習(xí)愉快，并且有更大的進(jìn)步！