界面設(shè)計(jì)需要了解不少的規(guī)范，但是我們以激發(fā)大家學(xué)習(xí)的熱情為首要前提，所以先了解一些簡(jiǎn)單的知識(shí)。
01 蘋(píng)果手機(jī)更新?lián)Q代，所以有很多不同的尺寸，一般以750*1334px為設(shè)計(jì)原型進(jìn)行制作，之后會(huì)根據(jù)不同的需求來(lái)進(jìn)行切圖。
如上圖，px是像素的單位，在750*1334px的界面圖中，狀態(tài)欄高40px，導(dǎo)航欄高88px，標(biāo)簽欄高98px。所以我們?cè)谠O(shè)計(jì)的時(shí)候一般會(huì)用輔助線把規(guī)范的高度標(biāo)注出來(lái)。
安卓英文字體選用Roboto，中文用思源黑體
IOS系統(tǒng)英文字體使用San Fransico，中文用蘋(píng)方體
我們先簡(jiǎn)單了解到這里，現(xiàn)在開(kāi)始我們這周的任務(wù)教程。
01 打開(kāi)PS原型圖后，先文件——另存為——新江湖積分原型圖（這么做的目的是把源文件保留，在制作的過(guò)程中要養(yǎng)成每隔一段時(shí)間，ctrl+s保存一下文件，防止程序崩潰）
02 用裁剪工具將畫(huà)布拉大；
解鎖背景圖層，選中背景圖層，單擊前景色，會(huì)出現(xiàn)一個(gè)吸管工具，將吸管工具點(diǎn)一下背景，即可吸取背景顏色，alt+back鍵盤(pán)填充前景色
03 選擇矩形工具，在畫(huà)布上隨機(jī)單擊一下，會(huì)出現(xiàn)創(chuàng)建矩形的窗口，分別繪制出750*1334、40*40、88*88、98*98像素的方形。
04 視圖——標(biāo)尺，將標(biāo)尺調(diào)用出來(lái)；將鼠標(biāo)移動(dòng)到標(biāo)尺上，長(zhǎng)按拖拉即可出現(xiàn)參考線，對(duì)圖形添加參考線。
模板中沒(méi)有按照使用的尺寸來(lái)設(shè)計(jì)，所以需要我們自己繪制出標(biāo)準(zhǔn)的畫(huà)布，正好學(xué)習(xí)一下矩形工具和參考線。
06根據(jù)草圖，從模板中尋找到相似的元素，復(fù)制到剛建立的方形中。選擇移動(dòng)工具，確保自動(dòng)選擇打勾并選擇右邊的圖層。（這樣在畫(huà)布上點(diǎn)選圖形，就會(huì)自動(dòng)跳轉(zhuǎn)到該圖層了）。用移動(dòng)工具框選所需要的元素，按住alt鍵的同時(shí)拖動(dòng)圖層，即可復(fù)制出元素，移動(dòng)到合適位置，ctrl+T調(diào)整大小。
07 同時(shí)也可以自行繪制圖形，如插入圓形圖，選擇圓形工具，在合適位置按住shift鍵畫(huà)出圓形，ctrl+T調(diào)整圖形大小。
06 其他圓形可以直接按住alt鍵拖動(dòng)圖層，即可復(fù)制出同樣的圓形。將其放置在合適位置。最后用對(duì)齊工具進(jìn)行對(duì)齊調(diào)整。
將所有對(duì)齊的圓形全部選中（按住shift鍵點(diǎn)選），運(yùn)用對(duì)齊工具，進(jìn)行對(duì)齊。有水平居中對(duì)齊、靠左靠右對(duì)齊、水平均勻分布和垂直均勻分布，大家都可以點(diǎn)選嘗試一下。
07 有文字的地方可以拖動(dòng)模板中的文字進(jìn)行填充，也可以用文字工具輸入合適的文字，如果有些字體沒(méi)有安裝的，都選用蘋(píng)方或思源黑體；
字體大小設(shè)置
標(biāo)題欄中間字號(hào)：36px
標(biāo)題欄側(cè)邊字號(hào)：32px
商品名稱的字號(hào)：28px
店鋪名稱的字號(hào)：24px
08 圖層移動(dòng)的快捷鍵：
選中后Ctrl+]向上移動(dòng)一層
Ctrl+[ 向下移動(dòng)一層
Ctrl+Shift+]移動(dòng)到頂層
Ctrl+Shift+]移動(dòng)到底層
總結(jié)：這次運(yùn)用到移動(dòng)工具、矩形圓形工具、截圖工具、填充工具、尺寸放大、對(duì)齊工具、參考線繪制的知識(shí)點(diǎn)，有點(diǎn)小多，大家一定要堅(jiān)持下去哦，操作多了就熟練啦！
