APP和網(wǎng)頁設(shè)計必制作須要會的知識技能

2019-12-06 點擊量：

剛開始工作的時候，APP怎么做？網(wǎng)頁怎么做？統(tǒng)統(tǒng)不知道，找很多的網(wǎng)站、手機(jī)APP來參考，最后做出似是而非的東西，明明是自己做的臨摹的app頁面，怎么會和原版頁面差別那么大呢？更曾一度發(fā)現(xiàn)不了自己的app頁面做的不好看，沾沾自喜，更覺得UI設(shè)計不過如此，沒什么技術(shù)含量。

再度回首以往做的那些頁面，常因為不了解字體、圖標(biāo)大小而隨意選擇自己喜歡的，這樣的后果就是給自己埋了大坑，畢竟工作上的項目，后期是自己要為其負(fù)責(zé)的。如果早點看到郗鑒老師的這本“UI設(shè)計師進(jìn)階完全指南”，我一定能提升雙倍的工作效率，不必每天苦兮兮的加班，最后做出來的頁面還不好看！

UI是User Interface Design(界面設(shè)計)的簡稱，包含一切人機(jī)交互可視化的頁面設(shè)計，UI設(shè)計師的職責(zé)是設(shè)計工人機(jī)交互使用的圖形化用戶界面，并使界面更加易用和友好。1像素的偏差都可能引某些人的不適感，UI設(shè)計是一門很嚴(yán)謹(jǐn)?shù)穆殬I(yè)。我就個人工作中常遇到困惑內(nèi)容整理了書中app、網(wǎng)頁設(shè)計的基本內(nèi)容，希望能幫小伙伴們帶來收獲，節(jié)省工作效率。

△圖片來自：Rita攝影

1、iPhone設(shè)計規(guī)范

a、iphone各系列手機(jī)型號、尺寸、使用的切圖是我們必須了解的（文末附上各類UI Kit下載地址）。

手機(jī)型號與像素對應(yīng)表（圖片來自：郗鑒）

b、iPhone設(shè)計需注意到的尺寸設(shè)計，包含導(dǎo)航欄設(shè)計、大標(biāo)題導(dǎo)航欄設(shè)計、tab欄設(shè)計等。大標(biāo)題導(dǎo)航欄的高度一般為116pt（包含20pt狀態(tài)欄，返回圖標(biāo)信息，大標(biāo)題34pt）?；瑒禹撁鏁r大標(biāo)題會變成正常導(dǎo)航欄的64pt。

△iPhone6/7/8和iPhone X導(dǎo)航區(qū)域的差別（圖片來自郗鑒）

△大標(biāo)題導(dǎo)航欄設(shè)計（圖片來自：郗鑒）

△圖片來自郗鑒

△標(biāo)簽欄的尺寸（圖片來自：郗鑒）

c、閃屏資源。閃屏是一張完整的靜態(tài)圖片，尺寸如下：

△圖片來自郗鑒

d、字體。IOS中英文使用的是San Francisco (SF)字體。（下載地址：https://developer.apple.com/fonts）

△HIG對APP的字體建議基于@2x（圖片來自：郗鑒）

e、其他。iphone控件設(shè)計基本符合44pt（88px）原則，即在手機(jī)上大小為7～9mm，適合手指操作。iTunes上傳截圖需要提供兩套截圖：1242px * 2688px 和 1125px * 2436px兩套截圖。

f、UI設(shè)計師設(shè)計界面前需要先做用戶研究以了解產(chǎn)品特性，如用戶畫像、用戶調(diào)研、用戶使用場景分析、設(shè)計競品分析等。若設(shè)計稿需要調(diào)節(jié)為Iphone X的顯示效果，可以下載IOS 12設(shè)計源文件，把界面頭尾設(shè)計成iPhoneX專用頭尾。

△iphone6/7/8尺寸（圖片來自郗鑒)

e、視覺規(guī)范。一套移動端的視覺規(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)所有間距的尺寸。