移動(dòng)端界面設(shè)計(jì) 課件全套 潘寧 項(xiàng)目1-7 初識(shí)移動(dòng)端界面設(shè)計(jì)-綜合項(xiàng)目實(shí)訓(xùn)

移動(dòng)端界面設(shè)計(jì)

項(xiàng)目1初識(shí)移動(dòng)端界面設(shè)計(jì)項(xiàng)目1初識(shí)移動(dòng)端UI設(shè)計(jì)任務(wù)1認(rèn)識(shí)移動(dòng)端界面設(shè)計(jì)

1.1.1任務(wù)情境：

小明來到了UI設(shè)計(jì)公司做實(shí)習(xí)生，跟隨張?jiān)O(shè)計(jì)師。張?jiān)O(shè)計(jì)師帶他熟悉工作環(huán)境，小明的工作主要是協(xié)助張?jiān)O(shè)計(jì)師做移動(dòng)端界面設(shè)計(jì)，小明需要對(duì)移動(dòng)端界面設(shè)計(jì)有個(gè)初步認(rèn)識(shí)，然后撰寫一份報(bào)告。1.1.2任務(wù)分析：了解移動(dòng)端界面設(shè)計(jì)，需要明確以下幾個(gè)問題：1.移動(dòng)端的概念；2.UI設(shè)計(jì)的意義；3.UI設(shè)計(jì)師的工作內(nèi)容；4.UI設(shè)計(jì)師經(jīng)常使用的軟件；5.UI設(shè)計(jì)實(shí)習(xí)生需要學(xué)習(xí)的內(nèi)容。1.1.3任務(wù)實(shí)施：1.我們常說的移動(dòng)端是移動(dòng)互聯(lián)網(wǎng)終端的簡(jiǎn)稱。移動(dòng)互聯(lián)網(wǎng)終端是指通過無線網(wǎng)絡(luò)技術(shù)上網(wǎng)接入互聯(lián)網(wǎng)的終端設(shè)備，其主要功能就是移動(dòng)上網(wǎng)，因此其十分依賴各種網(wǎng)絡(luò)。在移動(dòng)互聯(lián)網(wǎng)時(shí)代，終端成為移動(dòng)互聯(lián)網(wǎng)發(fā)展的重點(diǎn)之一。移動(dòng)互聯(lián)網(wǎng)的終端主要以智能手機(jī)為主。智能手機(jī)除了具備手機(jī)的通話功能外，還具備了PDA（PersonalDigitalAssistant個(gè)人數(shù)碼助理，一般指掌上電腦）的大部分功能，特別是個(gè)人信息管理以及基于無線數(shù)據(jù)通信的瀏覽器功能。智能手機(jī)為用戶提供了足夠的屏幕尺寸和帶寬，既方便隨身攜帶，又為軟件運(yùn)行和內(nèi)容服務(wù)提供了廣闊的舞臺(tái)，很多增值業(yè)務(wù)可以就此展開，如：股票、新聞、天氣、交通、商品、應(yīng)用程序下載、音樂圖片下載等等。

移動(dòng)互聯(lián)網(wǎng)終端還包括平板電腦，智能手表和車載電腦。2.“UI”的本義是用戶界面，是英文User和Interface的縮寫，泛指用戶的操作界面，包含移動(dòng)APP，網(wǎng)頁(yè)，智能穿戴設(shè)備等。UI界面設(shè)計(jì)是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對(duì)軟件的使用界面進(jìn)行美化、優(yōu)化和規(guī)范化的設(shè)計(jì)分支。具體包括軟件啟動(dòng)封面設(shè)計(jì)，軟件框架設(shè)計(jì)，按鈕設(shè)計(jì)，面板設(shè)計(jì)，菜單設(shè)計(jì)，標(biāo)簽設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，滾動(dòng)條及狀態(tài)欄設(shè)計(jì)，安裝過程設(shè)計(jì)，包裝及商品設(shè)計(jì)等。設(shè)計(jì)不同于藝術(shù)，藝術(shù)是感性的，而設(shè)計(jì)是理性的。藝術(shù)所表達(dá)的是創(chuàng)作者的個(gè)人意識(shí)，而設(shè)計(jì)是為了解決用戶的具體問題。只有將產(chǎn)品本身的UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)完美融合才能打造出優(yōu)秀的界面設(shè)計(jì)作品。好的UI設(shè)計(jì)不僅讓軟件變得有個(gè)性、有品味，還會(huì)讓軟件的操作變得舒適、簡(jiǎn)單、自由，充分體現(xiàn)軟件的特點(diǎn)。

手機(jī)UI設(shè)計(jì)是手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。置身于手機(jī)操作系統(tǒng)中人機(jī)交互的窗口，設(shè)計(jì)界面必須基于手機(jī)的物理特性和軟件的應(yīng)用特性進(jìn)行合理的設(shè)計(jì)，界面設(shè)計(jì)師首先應(yīng)對(duì)手機(jī)的系統(tǒng)性能有所了解。3.UI設(shè)計(jì)師則指從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。UI設(shè)計(jì)具體分為三類，圖形設(shè)計(jì)、交互設(shè)計(jì)和用戶測(cè)試/研究的工作職能，分別對(duì)應(yīng)的是美術(shù)設(shè)計(jì)的專業(yè)知識(shí)，軟件工程師背景和相應(yīng)的編程能力，以及社會(huì)學(xué)、心理學(xué)等人文學(xué)科儲(chǔ)備。當(dāng)然，實(shí)際工作中，這幾種職能也不是截然分開的。而今，這一涵蓋諸多領(lǐng)域的職位，也越來越要求從業(yè)人員同時(shí)具備跨學(xué)科、綜合性的理論素養(yǎng)和實(shí)操能力。在漫長(zhǎng)的軟件發(fā)展過程中，界面設(shè)計(jì)工作一直沒有被重視起來。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣點(diǎn)。一個(gè)友好美觀的界面會(huì)給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點(diǎn)。界面設(shè)計(jì)不是單純的美術(shù)繪畫，它需要定位使用者、使用環(huán)境、使用方式并且最終為用戶而設(shè)計(jì)，是純粹的科學(xué)性的理性的設(shè)計(jì)。檢驗(yàn)一個(gè)界面的最終標(biāo)準(zhǔn)是用戶的體驗(yàn)。UI設(shè)計(jì)師要時(shí)刻記住用戶體驗(yàn)至上。4.UI設(shè)計(jì)師需要精通Photoshop軟件的操作，有時(shí)還需要使用AI、Illustrator、切圖時(shí)可以使用Photoshop工具欄的裁切工具，或者使用專門的切圖工具像素大廚（PxCook）。5.作為UI設(shè)計(jì)公司的實(shí)習(xí)生，需要精通Photoshop軟件的操作，需要學(xué)習(xí)交互設(shè)計(jì)，學(xué)習(xí)三大手機(jī)系統(tǒng)的特點(diǎn)，同時(shí)學(xué)習(xí)圖標(biāo)的設(shè)計(jì)，手機(jī)APP界面設(shè)計(jì)，智能手表的界面設(shè)計(jì)，平板電腦的界面設(shè)計(jì)。1.1.4任務(wù)評(píng)價(jià)

撰寫對(duì)于移動(dòng)端UI設(shè)計(jì)的認(rèn)識(shí)報(bào)告任務(wù)2——UI設(shè)計(jì)常用單位解析1.2.1任務(wù)情境

初涉移動(dòng)端設(shè)計(jì)和開發(fā)的同學(xué)們，基本都會(huì)在尺寸問題上糾結(jié)好一陣子才能摸到頭緒。因此設(shè)計(jì)師給小明布置了新的作業(yè)，了解UI設(shè)計(jì)常用的單位。1.2.2任務(wù)分析

移動(dòng)端設(shè)備屏幕尺寸非常多，碎片化嚴(yán)重。尤其是Android，你有很多種分辨率：480×800，480×854，540×960，720×1280，1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960，640×1136，750×1334，1242×2208。實(shí)際上大部分的app和移動(dòng)端網(wǎng)頁(yè)，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(guī)律可循。1.2.3任務(wù)實(shí)施1.像素密度（PPI）

PPI，用于描述屏幕的像素密度。我們平時(shí)提到的分辨率，是指手機(jī)屏幕的實(shí)際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點(diǎn)組成的。每個(gè)點(diǎn)發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機(jī)屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone3gs的屏幕像素是320×480，iPhone4s的屏幕像素是640×960。剛好兩倍，然而兩款手機(jī)都是3.5英寸的。這兒有一個(gè)重要的概念，像素密度，也就是PPI(pixelsperinch)。這項(xiàng)指標(biāo)是連接數(shù)字世界與物理世界的橋梁。PixelsPerInch，準(zhǔn)確的說是每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長(zhǎng)度，等于2.54厘米。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)樗南袼孛芏确艘槐丁?.倍率與邏輯像素

假設(shè)有個(gè)郵件列表界面，3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會(huì)變得特別寬。但兩款手機(jī)其實(shí)是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會(huì)小到根本看不清字。在現(xiàn)實(shí)中，這兩者效果卻是一樣的。這是因?yàn)樘O果手機(jī)從蘋果4開始，就是Retina屏幕，屏幕把2×2個(gè)像素當(dāng)1個(gè)像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個(gè)像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。這也是IOS二倍圖的由來。在iOS應(yīng)用的資源圖片中，同一張圖通常有兩個(gè)尺寸，文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。由此可以看出，蘋果以普通屏為基準(zhǔn)，給Retina屏定義了一個(gè)2倍的倍率(iPhone的plus機(jī)型是3倍，對(duì)應(yīng)IOS三倍圖)。實(shí)際像素除以倍率，就得到邏輯像素尺寸。只要兩個(gè)屏幕邏輯像素相同，它們的顯示效果就是相同的。在這本書中設(shè)計(jì)尺寸都采用IOS二倍圖的設(shè)計(jì)尺寸。3.常用單位及其換算：inch：英寸，長(zhǎng)度單位，1英寸=2.54厘米；px：pixel，像素，電子屏幕上組成一幅圖畫或照片的最基本單元，在Photoshop上將圖片放大可以看到是由一個(gè)個(gè)的小格子組成的，這一個(gè)個(gè)的小格子就是一個(gè)像素。；pt:point，點(diǎn)，印刷行業(yè)常用單位，等于1/72英寸，等于0.035厘米；ppi:pixelsperinch，像素密度，即每英寸的長(zhǎng)度上排列的像素點(diǎn)數(shù)量。dpi:dotperinch，即每英寸上能打印的點(diǎn)數(shù)量。常用于打印設(shè)備上，這個(gè)值越高，打印出的效果越精細(xì)。density：屏幕密度。dp:dip，Density-independentpixel,是安卓開發(fā)用的長(zhǎng)度單位，1dp表示在屏幕像素點(diǎn)密度為160ppi時(shí)1px長(zhǎng)度。定義當(dāng)屏幕的PPI為160時(shí)，1dp=1px，這時(shí)1dp的長(zhǎng)度為1/160=0.006英寸，即px/dp=dpi/160。當(dāng)手機(jī)屏幕的PPI不同時(shí)，比如在320PPI屏幕上，這時(shí)1dp=2px,這時(shí)1dp的長(zhǎng)度為2/320=0.006英寸。也就是說DP類似于我們所說的物理尺寸了，這可以保證用dp做為單位時(shí)在PPI不同的屏幕上看起來效果是相同的。sp:scale-independentpixel，安卓開發(fā)用的字體大小單位。

1.2.4任務(wù)評(píng)價(jià)

了解IOS系統(tǒng)和安卓系統(tǒng)UI設(shè)計(jì)常用單位，以及單位之間的換算關(guān)系。任務(wù)3——了解UI設(shè)計(jì)常用圖像格式及常用軟件1.3.1任務(wù)情境

小明到公司實(shí)習(xí)已經(jīng)有幾天的時(shí)間了，對(duì)于移動(dòng)端界面設(shè)計(jì)有了初步了解，明確了基本概念和工作中常用的單位，在真正開始設(shè)計(jì)工作之前，張老師要求小明了解UI設(shè)計(jì)常用軟件和圖像格式。1.3.2任務(wù)分析

進(jìn)行移動(dòng)端UI設(shè)計(jì)，離不開軟件操作，做一名設(shè)計(jì)師助理，首先要熟悉軟件操作和常用圖像格式。1.3.3任務(wù)實(shí)施1.常用軟件介紹（1）AdobePhotoshop。圖像元老，最受歡迎的強(qiáng)大圖像處理軟件之一，是Adobe公司旗下的軟件。它的源文件格式為*.psd，處理由以像素所構(gòu)成的數(shù)字圖像，能處理的圖片格式主要是：JPGE、GIF、PNG、PSD、PDD、BMP、RLE、DIB、DCM、DC3、DIC、EPS、IFF、TDI、JPG、JPE、JPF、JPX、JP2、J2C、J2K、JPC、PCX、PDF、PDP、RAW、PXR、SCT、TGA、VDA、ICB、VST、TIF、TIFF、PBM、PGM、PPM、PNM、PFM、PAM。Photoshop擁有多種選擇工具，極大地方便了用戶的不同要求。而且多種選擇工具還可以結(jié)合起來選擇較為復(fù)雜的圖像。它涉及圖像合成、色彩校正、圖層調(diào)板、通道使用、動(dòng)作調(diào)板、路徑工具、濾鏡等圖像處理功能。可制作如按鈕制作、文字特效、材質(zhì)紋理、三維物體、影像特效及廣告創(chuàng)意設(shè)計(jì)等多種用途。Photoshop的應(yīng)用領(lǐng)域是很廣泛的，在圖像、圖形、文字、視頻、出版各方面都有涉及。是一門值得深入學(xué)習(xí)的一種好軟件。（2）AdobeIlustrator。是Adobe系統(tǒng)公司推出的一款非常好的基于矢量的圖形制作軟件，源文件格式為*.ai，最大特征在于鋼筆工具的使用，使得操作簡(jiǎn)單、功能強(qiáng)大的矢量繪圖成為可能。它還集成文字處理、上色等功能，不僅在插圖制作，在印刷制品（如廣告?zhèn)鲉?、小?cè)子）設(shè)計(jì)制作方面也廣泛使用，事實(shí)上已經(jīng)成為桌面出版（DTP）業(yè)界的默認(rèn)標(biāo)準(zhǔn)。該軟件主要應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計(jì)到大型的復(fù)雜項(xiàng)目。（3）AxureRP。是美國(guó)AxureSoftwareSolution公司旗艦產(chǎn)品，是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，讓負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計(jì)工具，它能快速、高效的創(chuàng)建原型，同時(shí)支持多人協(xié)作設(shè)計(jì)和版本控制管理。AxureRP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、UI設(shè)計(jì)師等，另外，架構(gòu)師、程序員也在使用Axure。（4）C4DC4D全名CINEMA4D，德國(guó)MAXON出的3D動(dòng)畫軟體。Cinema4D是一個(gè)老牌的三維軟件。能夠進(jìn)行頂級(jí)的建模、動(dòng)畫和渲染的3D工具包。C4D最初是應(yīng)用于工業(yè)建模與渲染，以及建筑，后來擴(kuò)展到廣告和欄目包裝領(lǐng)域，也慢慢的參與影視特效行業(yè)。（5）PxCookPxCook，像素大廚，是一款非常實(shí)用且功能強(qiáng)大的UI設(shè)計(jì)師效率提升利器，讓設(shè)計(jì)師專注于設(shè)計(jì)本質(zhì)，不再為標(biāo)注切圖而煩惱，從設(shè)計(jì)到實(shí)現(xiàn)一氣呵成。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動(dòng)智能識(shí)別。PxCook優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng),設(shè)計(jì)完稿后集成在一個(gè)軟件內(nèi)完成，支持Windows和Mac雙平臺(tái)。2.常用文件格式

移動(dòng)端UI設(shè)計(jì)的各種元素通常僅以PNG、JPG、GIF格式進(jìn)行存儲(chǔ)。PNG格式：便攜式網(wǎng)絡(luò)圖形（PortableNetworkGraphics）是一種無損壓縮的位圖圖形格式。其設(shè)計(jì)目的是試圖替代GIF和TIFF文件格式，同時(shí)增加一些GIF文件格式所不具備的特性。PNG的名稱來源于“可移植網(wǎng)絡(luò)圖形格式(PortableNetworkGraphicFormat，PNG)”，也有一個(gè)非官方解釋“PNG'sNotGIF”。PNG使用從LZ77派生的無損數(shù)據(jù)壓縮算法，一般應(yīng)用于JAVA程序、網(wǎng)頁(yè)或S60程序中，原因是它壓縮比高，生成文件體積小。位圖格式，支持透明度，質(zhì)量較小，經(jīng)常用于網(wǎng)絡(luò)，也可以用于印刷，但必須是小面積印刷；JPG格式：JPEG（全稱是JointPhotographicExpertsGroup）是常見的一種圖像格式，它由聯(lián)合照片專家組開發(fā)并命名為"ISO10918-1"，JPEG僅僅是一種俗稱而已。JPEG格式是目前網(wǎng)絡(luò)上最流行的圖像格式，可以把文件壓縮到最小，在Photoshop軟件中以JPEG格式儲(chǔ)存時(shí)，提供11級(jí)壓縮級(jí)別，以0—10級(jí)表示。其中0級(jí)壓縮比最高，圖像品質(zhì)最差。即使采用細(xì)節(jié)幾乎無損的10級(jí)質(zhì)量保存時(shí)，壓縮比也可達(dá)5：1。以BMP格式保存時(shí)得到4.28MB圖像文件，在采用JPG格式保存時(shí)，其文件僅為178KB，壓縮比達(dá)到24：1。經(jīng)過多次比較，采用第8級(jí)壓縮為存儲(chǔ)空間與圖像質(zhì)量兼得的最佳比例。JPEG文件的優(yōu)點(diǎn)是體積小巧，并且兼容性好。GIF格式：GIF(GraphicsInterchangeFormat)的原義是“圖像互換格式”，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應(yīng)用程序。GIF格式可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡(jiǎn)單的動(dòng)畫。GIF只能顯示256色。

1.3.4任務(wù)評(píng)價(jià)

了解移動(dòng)端界面設(shè)計(jì)常用軟件及其功能和設(shè)計(jì)中常用的圖片格式。任務(wù)4——掌握UI設(shè)計(jì)準(zhǔn)則1.4.1任務(wù)情境

通過幾天的實(shí)習(xí)，小明對(duì)于UI設(shè)計(jì)的理解越來越深入了，他了解了常用軟件之后，發(fā)現(xiàn)軟件都是自己學(xué)習(xí)過，但是設(shè)計(jì)師告訴他，僅僅掌握軟件的操作是遠(yuǎn)遠(yuǎn)不夠的，一個(gè)好的UI設(shè)計(jì)師，必須知道UI設(shè)計(jì)的準(zhǔn)則。1.4.2任務(wù)分析

設(shè)計(jì)絕不是簡(jiǎn)單的排列組合與簡(jiǎn)單地再編輯，它應(yīng)當(dāng)充滿著價(jià)值和意義，去說明道理，去刪繁就簡(jiǎn)，去闡明演繹，去修飾美化。1.4.3任務(wù)實(shí)施1.界面清晰最重要

界面清晰是UI設(shè)計(jì)的第一步，要想讓用戶喜歡你設(shè)計(jì)的UI，首先必須讓用戶認(rèn)可它、知道怎么樣使用它。讓用戶在使用時(shí)預(yù)期會(huì)發(fā)生什么，并方便地與它交互。2.全力維護(hù)用戶的注意力

在閱讀的時(shí)候，總是會(huì)有事物分散我們的注意力。因此，在設(shè)計(jì)界面的時(shí)候，能夠吸引用戶的注意力很關(guān)鍵，千萬不要將界面的周圍設(shè)計(jì)得太復(fù)雜，干凈簡(jiǎn)潔的界面可以利于維持用戶的注意力。3.讓界面處于用戶的掌控之中

人類往往對(duì)能夠掌控自己和周圍的環(huán)境感到舒服，不考慮用戶感受的設(shè)計(jì)往往會(huì)讓這種舒適感消失。保證界面處于用戶的掌控之中，讓用戶自己感受主動(dòng)權(quán)。4.直接操作的感覺最棒

當(dāng)能夠直接操作物體時(shí)，用戶的感覺是最棒的。在設(shè)計(jì)界面時(shí)，我們?cè)黾拥膱D標(biāo)往往并不是必需的，比如我們過多的使用按鈕、選項(xiàng)等等其他繁瑣的東西僅僅是為了填滿界面，這些都是畫蛇添足。圖標(biāo)的作用是以圖形化的視覺形象給用戶快速引導(dǎo)，如果只是裝飾，就不如不要。5.每個(gè)屏幕只提供一個(gè)操作主題

我們?cè)O(shè)計(jì)的每一個(gè)畫面都應(yīng)該有單一的主題，這樣不僅能夠讓用戶使用到它真正的價(jià)值，也使得上手容易，使用起來也更方便。如果一個(gè)屏幕支持兩個(gè)或兩個(gè)以上的主題，立馬會(huì)讓整個(gè)界面看起來混亂不堪。6.界面過渡自然

界面的交互都是關(guān)聯(lián)的，所以要認(rèn)真地考慮到下一步的交互是怎樣的，并且通過設(shè)計(jì)將其實(shí)現(xiàn)。當(dāng)用戶已經(jīng)完成該做的步驟，給他們自然而然繼續(xù)下去的方法。界面的交互要清晰。7.表里如一

按鈕要具備按鈕的特點(diǎn)，讓用戶一眼就看到。而不具備按鈕特性的元素不能設(shè)計(jì)成按鈕的樣子，否則用戶會(huì)不知所措。8.區(qū)別對(duì)待一致性

如果屏幕元素各自的功能不同，那么它們的外觀也理應(yīng)不同。反之，如果功能相同或相近，那么它們看起來就應(yīng)該是一樣的。元素排版整齊且統(tǒng)一，功能清晰明了。9.強(qiáng)烈的視覺層次感

強(qiáng)烈的視覺層次感是通過界面上視覺元素提供的清晰瀏覽順序來實(shí)現(xiàn)的，也就是說，用戶每次都能按照同一個(gè)順序?yàn)g覽同一些元素。弱化的視覺層次沒有給用戶提供如何瀏覽的線索，用戶會(huì)感到困惑和混亂。恰當(dāng)?shù)慕M織UI能夠降低認(rèn)知難度，對(duì)屏幕元素的恰當(dāng)組織能夠使頁(yè)面顯得簡(jiǎn)潔，這能夠幫助用戶更容易并且更快地理解你的界面。10.顏色不是決定性因素

物體的顏色會(huì)隨著光線的變化而變化，顏色是一個(gè)變化的性質(zhì)，不應(yīng)該在界面上起決定性作用。它可以用于提醒，但是不應(yīng)該是唯一的區(qū)分元素。通過鮮艷的色彩來提醒需要用戶關(guān)注的內(nèi)容。11.漸進(jìn)展示

在每個(gè)屏幕上只顯示必要的內(nèi)容，如果用戶在做選擇，那么給他們顯示足夠的信息，然后在各自的頁(yè)面上展示詳情，避免在某個(gè)界面過度展示所有細(xì)節(jié)。12.優(yōu)秀的設(shè)計(jì)是無形的

優(yōu)秀的設(shè)計(jì)是沒有痕跡的，如果設(shè)計(jì)是成功的，那么用戶可以只關(guān)注自己的目的，而不是界面，不依賴于界面。13.界面是被人使用的

只有用戶使用你設(shè)計(jì)的界面時(shí)，才是成功的。界面中的視覺設(shè)計(jì)不是藝術(shù)作品，正確地理解信息和傳遞信息是最重要的事，忽略內(nèi)容而關(guān)注形式是不可取的。1.4.4任務(wù)評(píng)價(jià)

用戶體驗(yàn)至上是一個(gè)UI設(shè)計(jì)師應(yīng)該謹(jǐn)記的原則。任務(wù)五——了解移動(dòng)端界面設(shè)計(jì)基本流程1.5.1任務(wù)情境

小明馬上就可以協(xié)助張?jiān)O(shè)計(jì)師做設(shè)計(jì)工作了，在此之前，他還需要了解移動(dòng)端界面設(shè)計(jì)的基本流程以及自己的工作和學(xué)習(xí)的內(nèi)容。1.5.2任務(wù)分析

了解UI設(shè)計(jì)流程，明確UI設(shè)計(jì)實(shí)習(xí)生的學(xué)習(xí)內(nèi)容。1.5.3任務(wù)實(shí)施1.一個(gè)產(chǎn)品的UI設(shè)計(jì)流程一般需要以下10個(gè)階段：（1）產(chǎn)品定位與市場(chǎng)分析階段

UI設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場(chǎng)定位、產(chǎn)品定義、客戶群體、運(yùn)行方式等。UI設(shè)計(jì)的主要職責(zé)：定義用戶群特征、定義最終用戶群、定義產(chǎn)品方向。（2）用戶研究與分析階段

UI設(shè)計(jì)師收集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心理、需求等，提出用戶研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作由團(tuán)隊(duì)配合完成。在時(shí)間與項(xiàng)目需求允許的情況下，更可以制定實(shí)景用戶分析。UI設(shè)計(jì)的主要職責(zé)是收集相關(guān)資料、分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心理、需求等，提出用戶研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作由團(tuán)隊(duì)配合完成。時(shí)間與項(xiàng)目需求允許的情況下，更可以制定實(shí)景用戶分析。

（3）架構(gòu)設(shè)計(jì)階段

這一階段涉及到比較多的界面交換與流程的設(shè)計(jì)，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。進(jìn)行UI風(fēng)格設(shè)計(jì)，設(shè)計(jì)出界面，和需求部門拿出定稿；UE對(duì)原型進(jìn)行優(yōu)化，整理出交互及用戶體驗(yàn)方面意見，反饋給UI及需求部門；UID等待效果圖，開始代碼編制。UI主要職責(zé)：根據(jù)可行性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。進(jìn)行界面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、風(fēng)格設(shè)計(jì)。（4）原型設(shè)計(jì)階段

根據(jù)進(jìn)度與成本，可以把原型控制在“手繪-圖形-Flash-視頻幾個(gè)質(zhì)量范圍。設(shè)計(jì)規(guī)范、代碼及程序開發(fā)。UI主要職責(zé)：對(duì)前面所有工作以設(shè)計(jì)方面的實(shí)施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪-圖形-Flash-視頻幾個(gè)質(zhì)量范圍，原型的本質(zhì)更傾向于一個(gè)DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對(duì)象的基本特性。（5）界面設(shè)計(jì)階段

根據(jù)原型設(shè)計(jì)階段的界面原型，對(duì)界面原型進(jìn)行視覺效果的處理。UI主要職責(zé)：該階段確定整個(gè)界面的色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)。（6）界面輸出階段

配合好開發(fā)人員完成相關(guān)的界面結(jié)合。UI主要職責(zé)：對(duì)界面設(shè)計(jì)階段的最后結(jié)果配合技術(shù)部門實(shí)現(xiàn)界面設(shè)計(jì)的實(shí)際效果。（7）可用性測(cè)試階段

針對(duì)一致性測(cè)試；信息反饋測(cè)試；界面簡(jiǎn)潔性測(cè)試；界面美觀度測(cè)試；用戶動(dòng)作性測(cè)試；行業(yè)標(biāo)準(zhǔn)測(cè)試。UI主要職責(zé)：負(fù)責(zé)原型的可用性測(cè)試，發(fā)現(xiàn)可用性問題并提出修改意見。（8）完成工作階段

對(duì)于前面七個(gè)階段的設(shè)計(jì)工作進(jìn)行細(xì)節(jié)調(diào)整。UI主要職責(zé)：可用性的循環(huán)研究、用戶體驗(yàn)回饋、測(cè)試回饋、UI人員對(duì)可行性建議進(jìn)行完善。（9）產(chǎn)品上線

檢驗(yàn)前面界面設(shè)計(jì)的成果是否符合市場(chǎng)及用戶群體。UI主要職責(zé)：收集市場(chǎng)對(duì)于產(chǎn)品的用戶體驗(yàn)，并記錄成說明文字。（10）分析報(bào)告及優(yōu)化方案

了解整個(gè)界面設(shè)計(jì)的優(yōu)缺點(diǎn)。UI主要職責(zé)：對(duì)于前九個(gè)階段的界面設(shè)計(jì)進(jìn)行詳細(xì)系統(tǒng)的整理，為下一次界面設(shè)計(jì)提供有力的市場(chǎng)及專業(yè)依據(jù)。2.移動(dòng)端UI設(shè)計(jì)實(shí)習(xí)生需要學(xué)習(xí)的工作1.繪制APP的腦圖，如圖1-1“APP流程圖”所示：圖1-1“APP流程圖”APP流程圖說明了APP主要的功能、頁(yè)面以及頁(yè)面之間的邏輯關(guān)系?？梢允褂密浖L制，也可以使用紙筆繪制。2.APP設(shè)計(jì)的原型圖APP的原型圖確定了每一個(gè)頁(yè)面的具體內(nèi)容和大概的版式設(shè)計(jì)，如圖1-2原型圖所示：

圖1-2原型圖APP的原型圖可以使用軟件AxureRP來繪制，一般建議繪制文件大小為375*667像素。也可以采用紙筆繪制。原型圖確定的主要是頁(yè)面的內(nèi)容和功能。3.UI設(shè)計(jì)（1）版式設(shè)計(jì)

版式的設(shè)計(jì)在UI設(shè)計(jì)中非常重要，一個(gè)好的UI設(shè)計(jì)，版式設(shè)計(jì)占到百分之八十。（2）圖標(biāo)設(shè)計(jì)

圖標(biāo)功能：在圖形設(shè)計(jì)之前，圖標(biāo)設(shè)計(jì)非常重要，圖標(biāo)的功能是我們進(jìn)行圖標(biāo)造型設(shè)計(jì)的標(biāo)準(zhǔn)和依托。設(shè)計(jì)圖標(biāo)的目標(biāo)的是實(shí)用和美觀，同時(shí)要考慮圖標(biāo)的隱喻性，它代表的意思必須是用戶可知的、熟知的。（3）色彩調(diào)配

由于手機(jī)本身的限制，在色彩的還原程度上有一定限制，因此在選用色彩時(shí)要根據(jù)使用的屏幕進(jìn)行調(diào)節(jié)，方法就是將設(shè)計(jì)好的效果圖導(dǎo)入相應(yīng)的手機(jī)中，用該手機(jī)自帶的圖片瀏覽軟件進(jìn)行全屏效果查看或者請(qǐng)求開發(fā)人員幫助。1.5.4任務(wù)評(píng)價(jià)1.了解UI設(shè)計(jì)流程2.明確UI設(shè)計(jì)實(shí)習(xí)生需要學(xué)習(xí)掌握的內(nèi)容移動(dòng)端界面設(shè)計(jì)

項(xiàng)目2

圖標(biāo)的設(shè)計(jì)與制作任務(wù)1——APP軟件的iCON圖標(biāo)設(shè)計(jì)2.1.1任務(wù)情境

小明進(jìn)入公司之后，恰巧公司接到一款iOS系統(tǒng)的APP軟件開發(fā)，設(shè)計(jì)組長(zhǎng)找到小明，讓小明嘗試去做一個(gè)關(guān)于這款A(yù)PP的ICON圖標(biāo)，來做一次鍛煉，具體的APP內(nèi)容和類型可以向市場(chǎng)部負(fù)責(zé)人了解清楚。接到任務(wù)后，小明找到了市場(chǎng)部負(fù)責(zé)人進(jìn)行了了解，并開始了設(shè)計(jì)進(jìn)程。2.1.2任務(wù)分析

小明接到的這個(gè)任務(wù)這是關(guān)于旅游的一款A(yù)PP軟件，并且是針對(duì)人群是情侶，取名為“愛旅行”。這個(gè)任務(wù)重點(diǎn)是考察設(shè)計(jì)人員如何把握住情侶的特點(diǎn)，熟練運(yùn)用所掌握的設(shè)計(jì)技巧，針對(duì)相應(yīng)的人群，設(shè)計(jì)出符合產(chǎn)品特點(diǎn)和人群的ICON圖標(biāo)，設(shè)計(jì)難度較大。2.1.3任務(wù)實(shí)施

了解了APP軟件的內(nèi)容和類型后，小明思考之后決定采用字母和人物形狀的抽象處理來設(shè)計(jì)ICON圖標(biāo)，比較符合情侶的特點(diǎn)。制作步驟詳解：Step01：新建文件1024*1024px的文件，名稱：ICON；顏色為RGB模式。如圖2-1所示。圖2-1圖2-2Step02：設(shè)置背景為藍(lán)色（31a6d0），按Alt+Delete鍵進(jìn)行填充。如圖2-2所示。Step03：使用“圓角矩形工具”，設(shè)置半徑為180像素，設(shè)置“形狀”屬性，填充色為”白色”，描邊”無”，進(jìn)行創(chuàng)建圓角矩形。如圖2-3；圖2-4；圖2-5所示。圖2－3圖2－4圖2－5Step04：選取“橢圓工具”，將其設(shè)置為“形狀屬性”，填充藍(lán)色（31a6d0）描邊“無”，進(jìn)行創(chuàng)建橢圓形狀；再使用鋼筆工具以同樣的工具屬性設(shè)置，選用“減去頂層命令”，對(duì)橢圓進(jìn)行做“減去”。如圖2-6；圖2-7所示。圖2－6圖2－7Step05：使用同樣的方法制作另外的形狀，填充顏色改為橘色（f7931d）。如圖2-8、圖2-9所示。圖2-8圖2-9Step06：選取“鋼筆工具”設(shè)置“形狀”屬性，制作下面的形狀內(nèi)容。如圖2-10；圖2-11所示。圖2－10圖2－11最終置于手機(jī)屏幕的效果圖：如圖2-12所示。圖2－122.1.4任務(wù)評(píng)價(jià)1.ICON圖標(biāo)的制作，使用兩個(gè)人物的抽象處理和字母“i”的相結(jié)合，基本符合了“愛旅行”的行業(yè)特點(diǎn)。2.同時(shí)顏色上選用藍(lán)色和橘色，分別代表著“男”和“女”，色彩使用規(guī)范。3.圖標(biāo)尺寸使用了1024x1024px的大小，圓角使用180px，完全符合iOS系統(tǒng)ICON的設(shè)計(jì)規(guī)范。2.1.5必備知識(shí)

設(shè)計(jì)時(shí)要熟練掌握iOS系統(tǒng)的ICON圖標(biāo)設(shè)計(jì)規(guī)范，在APPStore中使用的圖標(biāo)大小為1024x1024px，圓角大小為180px。

利用字母進(jìn)行ICON的設(shè)計(jì)，在應(yīng)用中比較廣泛，其中分為單個(gè)字母的設(shè)計(jì)、多個(gè)字母的組合設(shè)計(jì)、字母結(jié)合圖形的設(shè)計(jì)等，設(shè)計(jì)過程中一定注意字母的含義和抽象化處理，使IiCON的設(shè)計(jì)達(dá)到美感和識(shí)別性兼?zhèn)洹?.1.6觸類旁通

當(dāng)我們決定要去AppStore、GooglePlay這樣的應(yīng)用市場(chǎng)下載某個(gè)APP應(yīng)用時(shí)，首先映入眼簾的便ICON，即應(yīng)用圖標(biāo)。一個(gè)APP應(yīng)用圖標(biāo)設(shè)計(jì)的美感與吸引力，決定了用戶對(duì)產(chǎn)品的第一印象。一個(gè)有吸引力的APP應(yīng)用圖標(biāo)，可以讓用戶愿意去了解你，下載你的APP。

那么ICON的設(shè)計(jì)形式大概分為以下幾類：

通過使用字體進(jìn)行設(shè)計(jì)，其中包含單個(gè)字體設(shè)計(jì)、多個(gè)字體設(shè)計(jì)、字體加輔助圖形設(shè)計(jì)。01.使用單個(gè)字體設(shè)計(jì)

提取產(chǎn)品名稱中最具代表性的獨(dú)立文字，進(jìn)行字體設(shè)計(jì)。通過對(duì)筆畫及整體骨架進(jìn)行設(shè)計(jì)調(diào)整，以達(dá)到符合產(chǎn)品特性和視覺差異化的目的。作為國(guó)人對(duì)漢字的敏感度，這樣的設(shè)計(jì)形式大大降低了用戶對(duì)品牌的認(rèn)知成本。該設(shè)計(jì)形式可以一目了然的傳遞產(chǎn)品信息，讓用戶在自己的手機(jī)桌面上快速找到應(yīng)用所在。如圖2-13所示。圖2－13

02.使用多個(gè)字體設(shè)計(jì)

多個(gè)字體設(shè)計(jì)通常為產(chǎn)品名稱直接運(yùn)用在設(shè)計(jì)中，如有道、閑魚等。多個(gè)字體設(shè)計(jì)需要注意的是整體的協(xié)調(diào)與可讀性，一排出現(xiàn)兩個(gè)漢字屬于比較理想的可讀范圍，極限值為2個(gè)漢字并排，最多兩行為宜。如圖2-14所示。03.字體加輔助圖形設(shè)計(jì)

字母加圖形組合設(shè)計(jì)應(yīng)用比較廣泛，圖形分為幾何圖形和生活映象提煉的圖形。如酷狗音樂就是字母結(jié)合圓形組合而成，QQ瀏覽器則是字母與生活中云朵的提煉圖形結(jié)合而成。如圖2-15所示。圖2－14圖2－15二、通過使用圖形進(jìn)行設(shè)計(jì)，其中包含使用動(dòng)物剪影設(shè)計(jì)、相同圖形重復(fù)設(shè)計(jì)、動(dòng)物形象設(shè)計(jì)、卡通形象設(shè)計(jì)等。01.動(dòng)物剪影設(shè)計(jì)

動(dòng)物剪影通常是提取動(dòng)物外部輪廓進(jìn)行單色填充，可以提取動(dòng)物整體形象或者局部特征部位作為設(shè)計(jì)元素。這類應(yīng)用圖標(biāo)背景為單色或者漸變色，少量的顏色會(huì)輔助一些圖形作為背景元素，動(dòng)物采用單色填充，以白色填充居多。如圖2-16所示。圖2-16圖2-17圖2-1802.相同圖形重復(fù)設(shè)計(jì)

將相同的圖形進(jìn)行有序的排列，排列形式有梯度漸變、等大均排、規(guī)律性重復(fù)、配色差異、大小錯(cuò)落等。這樣的設(shè)計(jì)方式可以給單調(diào)的圖形增加層次感和構(gòu)圖飽滿，有一定梯度漸變和規(guī)律性重復(fù)的圖形組合可以傳遞一定的韻律感和動(dòng)感。如圖2-17所示。03.正負(fù)形的設(shè)計(jì)

正負(fù)形的設(shè)計(jì)在logo圖形設(shè)計(jì)中是比較常見的表現(xiàn)手法，運(yùn)用在圖標(biāo)設(shè)計(jì)中，以正形為底突出負(fù)形特征，以負(fù)形表達(dá)產(chǎn)品屬性。利用正負(fù)形進(jìn)行設(shè)計(jì)，圖形設(shè)計(jì)感較強(qiáng)，正形與負(fù)形可以更加充分的表達(dá)產(chǎn)品特征與服務(wù)。如圖2-18所示。04.動(dòng)物形象設(shè)計(jì)

動(dòng)物作為圖標(biāo)設(shè)計(jì)元素是比較常見的方式之一。動(dòng)物給人的印象比較可愛，有助于加深用戶對(duì)產(chǎn)品的印象。動(dòng)物的表現(xiàn)形式有剪影、線性描邊風(fēng)格、面性風(fēng)格等。如圖2-19所示。05.卡通形象設(shè)計(jì)

卡通形象與動(dòng)物形象容易混淆，因?yàn)楹芏嗫ㄍㄐ蜗蠖际腔趧?dòng)物設(shè)計(jì)演變而來。這里單獨(dú)列舉出來是為了歸類一些單純以動(dòng)物外形為設(shè)計(jì)元素的表現(xiàn)手法?？ㄍㄐ蜗蟊砬樘卣髅黠@，視覺沖擊力和圖標(biāo)的識(shí)別性較強(qiáng)。如圖2-20所示。

圖2-19圖2-20任務(wù)2——正形圖標(biāo)的制作任務(wù)2.2.1任務(wù)情境

小明作為剛進(jìn)入公司的成員，主要是以鍛煉為主，所以有時(shí)會(huì)做一些輔助工作。正好所在小組剛接到一個(gè)關(guān)于網(wǎng)課的APP軟件設(shè)計(jì)，需要做出主菜單的圖標(biāo)，由此小明參加了這個(gè)任務(wù)的小組討論會(huì)，會(huì)后就由小明先去設(shè)計(jì)主菜單欄的正形圖標(biāo)。2.2.2任務(wù)分析

小明接到的這個(gè)任務(wù)主菜單欄的圖標(biāo)設(shè)計(jì)，并且已經(jīng)明確規(guī)定是關(guān)于網(wǎng)課的，會(huì)議上也確定了主菜單欄的組成。這個(gè)任務(wù)重點(diǎn)是考察設(shè)計(jì)人員對(duì)主菜單欄圖標(biāo)的設(shè)計(jì)要點(diǎn)，熟練運(yùn)用線性、面、色彩做出符合產(chǎn)品特點(diǎn)的正形圖標(biāo)，設(shè)計(jì)難度偏大。2.2.3任務(wù)實(shí)施

了解了主菜單欄包含主頁(yè)、分類、視頻、題庫(kù)、我的，小明開始搜集網(wǎng)上資料，并且下載類似APP做競(jìng)品分析，決定利用色塊形式來設(shè)計(jì)正形圖標(biāo)。01.“主頁(yè)”圖標(biāo)制作步驟詳解：Step01：在Photoshop中創(chuàng)建一個(gè)新的文檔（750*1334px）。如圖2-21所示。圖2－21圖2－22圖2－23Step02：使用“矩形工具”，設(shè)置工具屬性欄，使用填充顏色為淺灰色，描邊為無，W：750像素；H：98像素，點(diǎn)擊空白區(qū)域創(chuàng)建矩形，作為該頁(yè)面的主菜單欄,將其置于文件底部。如圖2-22；圖2-23所示。Step03：選擇工具箱中的“鋼筆工具”按鈕，將鋼筆的工具欄屬性改為“形狀”，填充顏色設(shè)置為：R45、G152、B98，描邊設(shè)置為：無。如圖2-24；圖2-25所示。圖2－24圖2－25Step03：使用鋼筆工具，結(jié)合<Ctrl>鍵和<Alt>鍵，繪制帶有圓角特點(diǎn)的該圖形，做為主頁(yè)正形圖標(biāo)，圖形整體尺寸控制在50x50px。如圖2-26所示。

最終效果圖：如圖2-27所示。圖2－26圖2－2702.“分類”圖標(biāo)制作步驟詳解：“分類”的圖標(biāo)需要在“主頁(yè)”圖標(biāo)的頁(yè)面上繼續(xù)操作（頁(yè)面：750x1334px主菜單欄：750x98px。Step01：:使用“圓角矩形”工具按鈕繪制出所需的形狀，寬度、高度為50x50，圓角半徑為3像素，填充上R45、G152、B98的顏色，無描邊色。如圖2-28；圖2-29所示。圖2-28圖2-29圖2-30圖2-31Step02：使用相同方法再次繪制三個(gè)相同的圓角矩形，并運(yùn)用移動(dòng)工具將四個(gè)圓角矩形放置整齊。如圖2-30、圖2-31所示。03.“視頻”圖標(biāo)制作步驟詳解：“視頻”的圖標(biāo)也需要在“主頁(yè)”圖標(biāo)的頁(yè)面上繼續(xù)操作（頁(yè)面：750*1334px主菜單欄：750*98px。Step01：使用工具箱“矩形工具“按鈕創(chuàng)建圓角矩形工具”，對(duì)工具屬性欄進(jìn)行設(shè)置，顏色為R45、G152、B98，描邊：無。如圖2-32所示。Step02：設(shè)置寬度和高度分別為50像素、50像素，半徑為5像素，單擊空白區(qū)域進(jìn)行創(chuàng)建。如圖2-33所示。圖2-32圖2-33Step03：選取工具箱中的“鋼筆工具”按鈕，結(jié)合<Ctrl>鍵和<Alt>鍵，繪制帶有圓角三角形。如圖2-34所示。圖2－3404.“題庫(kù)”圖標(biāo)制作步驟詳解：

“視頻”的圖標(biāo)也需要在“主頁(yè)”圖標(biāo)的頁(yè)面上繼續(xù)操作（頁(yè)面：750*1334px主菜單欄：750x98px。Step01:選擇“圓角矩形工具”按鈕，對(duì)工具屬性欄進(jìn)行設(shè)置，顏色為R45、G152、B98，無描邊色，在圖像上繪制圓角矩形。如圖2-35所示。Step02：設(shè)置寬度和高度分別為48像素、55像素，圓角半徑為6像素，單擊空白區(qū)域進(jìn)行創(chuàng)建。如圖2-36所示。圖2-35圖2-36Step03：選擇“鋼筆工具”按鈕，在選項(xiàng)欄中選擇“減去頂層形狀”選項(xiàng)，可將建立的選區(qū)從原始的形狀上減去。如圖2-37、圖2-38所示。

圖2－37圖2－38圖2－39圖2－40圖2－41Step04：選擇“矩形工具”按鈕，在選項(xiàng)欄中設(shè)置描邊為4px，描邊顏色為R45、G152、B98，無填充，在圖像上繪制矩形。按下鍵入<Ctrl+T>鍵，對(duì)矩形進(jìn)行旋轉(zhuǎn)，效果如圖2-39；圖2-40；圖2-41；圖2-42所示。圖2－42圖2－43圖2－44

Step05：選擇“矩形工具”按鈕，對(duì)工具屬性欄進(jìn)行設(shè)置，填充色為白色，在圖像上繪制矩形，并使用快捷鍵<Ctrl+J>鍵再?gòu)?fù)制三個(gè)同樣的矩形，調(diào)整位置和大小。如圖2-43、2-44所示。05.“我的”圖標(biāo)制作步驟詳解：“我的”的圖標(biāo)也需要在“主頁(yè)”圖標(biāo)的頁(yè)面上繼續(xù)操作。頁(yè)面：750*1334px主菜單欄：750x98px。Step01:使用“矩形工具”按鈕，建一個(gè)50x50的矩形，無填充色，描邊為1點(diǎn)，顏色為黑色。如圖2-45、圖2-46所示。圖2-45圖2-46Step02:選擇“橢圓工具”按鈕，對(duì)工具屬性欄進(jìn)行設(shè)置，顏色為R45、G152、B98，無描邊，在圖像上繪制圓形（注意控制大?。Ｈ鐖D2-47、圖2-48所示。圖2-47圖2-48Step03:使用相同方法再次繪制一個(gè)圓形。如圖2-49所示。

圖2-49圖2-50圖2-51圖2－52Step05：將第一步繪制的矩形圖層刪除。如圖2-52所示。2.2.4任務(wù)評(píng)價(jià)1.主菜單欄中的圖標(biāo)尺寸符合iOS系統(tǒng)的規(guī)范。2.圖標(biāo)的設(shè)計(jì)是利用面性元素加色彩來表現(xiàn)的，符合正形圖標(biāo)的設(shè)計(jì)原則。3.主菜單欄的圖標(biāo)整體統(tǒng)一，風(fēng)格一致。2.2.5必備知識(shí)

設(shè)計(jì)時(shí)要熟練掌握iOS系統(tǒng)的2倍圖設(shè)計(jì)尺寸（750x1334px），熟知主菜單欄的高度為98px，圖標(biāo)大小在50px左右。

設(shè)計(jì)的形式利用色彩加面性元素來展示正形圖標(biāo)，而且5個(gè)圖標(biāo)體現(xiàn)出圓角特點(diǎn)，整體是一套風(fēng)格化圖標(biāo)。2.2.6觸類旁通

主菜單欄圖標(biāo)的元素界定01、利用面性元素設(shè)計(jì)圖標(biāo)

在App中使用的圖標(biāo)常見的兩種風(fēng)格就是剪影和線性風(fēng)格，剪影圖標(biāo)通過面來塑造形體的圖標(biāo)，下圖圖標(biāo)采用了剪影的設(shè)計(jì)形式，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。如圖2-53所示。02.利用線性元素設(shè)計(jì)圖標(biāo)

線性圖標(biāo)與剪影圖標(biāo)不同的是，線性圖標(biāo)通過線來塑造形體的輪廓。線也是一種面，只不過線是比較細(xì)的面。App的圖標(biāo)尺寸并不大，所以如果線不要過于復(fù)雜，因?yàn)樵谛∶娣e中過多的線會(huì)對(duì)識(shí)別性產(chǎn)生較大的困擾。如圖2-54所示。圖2-53圖2-54圖標(biāo)的風(fēng)格化

主菜單欄的圖標(biāo)在設(shè)計(jì)過程中最注重的是風(fēng)格化，其中的設(shè)計(jì)要素分為：圓角和直角。01.氣質(zhì)1：活潑的氣質(zhì)

大多數(shù)應(yīng)用都屬于這個(gè)類型，比如常見的社交、娛樂、直播、美食，塑造都是積極向上的活潑感覺，所以圖標(biāo)都會(huì)采用圓角設(shè)計(jì)。

圖標(biāo)設(shè)計(jì)選擇圓角設(shè)計(jì)，從外觀上就決定著風(fēng)格化的統(tǒng)一。如圖2-55所示。圖2-55圖2-5601.氣質(zhì)1：活潑的氣質(zhì)

一些格調(diào)應(yīng)用或者偏男性的應(yīng)用會(huì)可以塑造一種一樣的棱角感，所以會(huì)采用直角設(shè)計(jì)，另外一些偏B類的上午工具應(yīng)用也會(huì)采用直角設(shè)計(jì)，塑造一種嚴(yán)謹(jǐn)安全的感覺。如圖2-56所示。品牌基因在圖標(biāo)中運(yùn)用01.品牌圖形整體應(yīng)用

首頁(yè)最常見的是使用的圖標(biāo)是一個(gè)房子的圖形，這個(gè)圖形源自面包屑結(jié)構(gòu)，Home的圖形代表家，只要點(diǎn)擊Home就像是回到起點(diǎn)一樣。很多應(yīng)用的圖標(biāo)上的logo，都是一個(gè)讓人印象深刻的主圖形，那么我們可以直接把這個(gè)logo圖形做為應(yīng)用的首頁(yè)模塊圖標(biāo)使用。這樣的好處很明顯，每次用戶打開應(yīng)用后，都會(huì)看到這個(gè)圖形，反復(fù)加強(qiáng)了用戶對(duì)App的logo的印象。例如大眾點(diǎn)評(píng)、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂提取各自品牌圖形，應(yīng)用在了App底部導(dǎo)航欄首頁(yè)模塊上。如圖2-57所示。圖2－5702.品牌顏色的使用

每個(gè)應(yīng)用都應(yīng)該有自己獨(dú)特的品牌色，直接提取品牌色作為圖標(biāo)設(shè)計(jì)視覺元素，閑魚圖標(biāo)圖的品牌色是黃色，個(gè)人中心的圖標(biāo)提取了品牌的黃色，進(jìn)行了圖標(biāo)設(shè)計(jì)。如圖2-58、圖2-59所示。圖2-58圖2-59任務(wù)3——負(fù)形圖標(biāo)的制作任務(wù)2.3.1任務(wù)情境

小明前兩天做的主菜單欄的正形圖標(biāo)設(shè)計(jì)，得到了小組組長(zhǎng)的認(rèn)可，現(xiàn)在讓小明接著設(shè)計(jì)負(fù)形圖標(biāo)。2.3.2任務(wù)分析

負(fù)形圖標(biāo)要求在正形圖標(biāo)的基礎(chǔ)上進(jìn)行修改，但是要把握兩者之間的關(guān)系，熟知主菜單欄正形與負(fù)形轉(zhuǎn)換設(shè)計(jì)的方法，難度一般。2.3.3任務(wù)實(shí)施

接到任務(wù)后，小明開始了負(fù)形圖標(biāo)的設(shè)計(jì)。01.“主頁(yè)”圖標(biāo)制作步驟詳解：Step01：選擇工具箱中的“鋼筆工具”按鈕，將鋼筆的工具欄屬性改為“形狀”，填充顏色設(shè)置為無，描邊設(shè)置為3點(diǎn)，顏色為#aaaaaa。如圖2-60；圖2-61所示。圖2-60

圖2-61

Step02：利用“鋼筆工具”按鈕，結(jié)合<Ctrl>鍵和<Alt>鍵，繪制帶有圓角特點(diǎn)的該圖形，做為主頁(yè)正形圖標(biāo)，圖形整體尺寸控制在50x50px。如圖2-62所示。圖2－62圖2－63圖2－64Step03：使用“橡皮擦工具”按鈕，將形狀圖層?xùn)鸥窕脸鄳?yīng)的部分。如圖2-63、圖2-64所示。02.“分類”圖標(biāo)制作步驟詳解：“分類”的圖標(biāo)需要在“主頁(yè)”圖標(biāo)的頁(yè)面上繼續(xù)操作（頁(yè)面：750*1334px主菜單欄：750x98px。Step01：:使用“圓角矩形工具”按鈕繪制出所需的形狀，寬度高度為50*50，圓角半徑為3像素，無填充色，描邊設(shè)置為4點(diǎn)，顏色為#aaaaaa。如圖2-65、圖2-66所示。圖2-65圖2-66圖2-68圖2-67Step3：使用“橡皮擦工具”按鈕，將形狀圖層?xùn)鸥窕?，擦除相?yīng)的部分。如圖2-69；圖2-70所示。03.“視頻”圖標(biāo)制作步驟詳解：Step1：點(diǎn)擊工具箱“圓角矩形工具”按鈕，彈出“創(chuàng)建圓角矩形”對(duì)話框，設(shè)置寬度和高度分別為50像素、50像素，半徑為5像素，單擊“確定”按鈕。如圖2-71所示。02.修改描邊

在工具屬性欄中，設(shè)置填充為無，描邊為灰色R:85G87B86，單擊“確定”按鈕，描邊為4點(diǎn)。如圖2-72、圖2-73所示。圖2－69圖2－70圖2－71圖2－72圖2－7303.做缺口

對(duì)“圓角矩形圖層”做柵格化圖層，點(diǎn)擊工具箱“橡皮擦工具”按鈕，在工具屬性欄將橡皮擦大小調(diào)到13左右，硬度為100%，選中下方硬邊圓，擦除多余部分。如圖2-74所示。圖2－74圖2－75圖2－75圖2－7604.添加三角形選區(qū)“鋼筆工具”按鈕，設(shè)置填充為無，描邊為灰色R:85G87B86，描邊為：4，繪制圓角三角形。如圖2-75、圖2-76所示。04.“題庫(kù)”圖標(biāo)制作步驟詳解：Step01：選擇“圓角矩形工具”按鈕，在選項(xiàng)欄中設(shè)置填充為無，描邊為4點(diǎn)，描邊顏色為#a6a6a6，圓角半徑為6像素，在圖像上繪制圓角矩形。如圖2-77；2-78所示。

圖2-77圖2-78Step02：選擇“矩形工具”按鈕，在選項(xiàng)欄中設(shè)置描邊為4點(diǎn)，描邊顏色為#a6a6a6，填充為無，選擇“減去頂層形狀”按鈕，可將建立的選區(qū)從原始的形狀上減去。選擇“矩形工具”按鈕，建立選區(qū)，減去多余的形狀。如圖2-79所示。

圖2-79圖2-80圖2-81圖2-82Step03：選擇“矩形工具”按鈕，在選項(xiàng)欄中設(shè)置描邊為4點(diǎn)，描邊顏色為#555756，填充為無，在圖像上繪制矩形。按下<Ctrl+T>鍵，對(duì)矩形進(jìn)行旋轉(zhuǎn)。如圖2-80所示。Step04：選擇“矩形工具”按鈕，在選項(xiàng)欄中設(shè)置前景色為#555756，在圖像上繪制矩形，鍵入快捷鍵<Ctrl+J>鍵再?gòu)?fù)制三個(gè)同樣的矩形，調(diào)整位置和大小。如圖2-81所示。05.“我的”圖標(biāo)制作步驟詳解：Step01：選用“矩形工具”按鈕，創(chuàng)建一個(gè)78*78px的矩形；如圖2-82所示。Step02:設(shè)置這個(gè)矩形“填充”為無，“描邊”為黑色1px；如圖2-83、圖2-84所示。圖2-83圖2-84圖2-85圖2-86Step03：選用“橢圓工具”按鈕，按住<Shift+Alt>作一個(gè)圓形，“填充”為無，“描邊”為灰色（#555756）4px；如圖2-85所示。Step04：選用“橢圓工具”按鈕，按住<Shift+Alt>鍵再作一個(gè)圓形，“填充”為無，“描邊”為灰色（#555756）4px；如圖2-86所示。Step05：使用“矩形工具”，找到屬性欄里的“減去頂層形狀”（下圖第一個(gè)按鈕），作一個(gè)矩形減去圓的下半部分；如圖2-87；圖2-88所示。圖2－87圖2－88圖2－89Step06：在圖層關(guān)掉“矩形1”圖層，并將橢圓2柵格化圖層，轉(zhuǎn)換為普通圖層，否則橡皮擦不能直接使用；如圖2-89所示。Step07：選用“橡皮擦”按鈕，選擇實(shí)心圓，擦掉下方形狀；如圖2-90、圖2-91所示。Step08：繼續(xù)擦除不需要的部分；如圖2-92所示。線性圖標(biāo)完成。圖2-90圖2-91圖2-922.3.4任務(wù)評(píng)價(jià)1、主菜單欄的圖標(biāo)，符合iOS系統(tǒng)的設(shè)計(jì)規(guī)范。2、從形式上也符合負(fù)形圖標(biāo)的規(guī)范。3、能利用線性元素加色彩來表現(xiàn)默認(rèn)狀態(tài)。4、主菜單欄的圖標(biāo)整體統(tǒng)一，風(fēng)格一致。2.3.5必備知識(shí)

設(shè)計(jì)時(shí)要熟練掌握iOS系統(tǒng)的2倍圖設(shè)計(jì)尺寸（750x1334px），熟知主菜單欄的高度為98px，圖標(biāo)大小在50px左右。

設(shè)計(jì)的形式利用線性元素來展示負(fù)形圖標(biāo)，而且5個(gè)圖標(biāo)體現(xiàn)出圓角特點(diǎn)，并對(duì)圖標(biāo)做斷線處理，整體是一套風(fēng)格化圖標(biāo)。2.3.6觸類旁通APP主菜單欄圖標(biāo)的設(shè)計(jì)技巧01.單純使用顏色的變換

圖標(biāo)選擇剪影或者線性的設(shè)計(jì)形式，圖標(biāo)激活狀態(tài)為一種顏色，這個(gè)顏色一般選擇使用這個(gè)App的品牌色，其它的圖標(biāo)為灰色。圖標(biāo)的設(shè)計(jì)形式不做任何變化。如圖2-93所示。圖2－93圖2－94圖2－9502.使用設(shè)計(jì)形式+顏色變換

激活的圖標(biāo)設(shè)計(jì)為剪影的形式，未激活的圖標(biāo)設(shè)計(jì)為線性的形式。這樣點(diǎn)擊和未點(diǎn)擊的圖標(biāo)除了有顏色的變化，還有設(shè)計(jì)形式的變化。如圖2-94所示。03.設(shè)計(jì)形式不變+色彩面元素

未激活的圖標(biāo)使用線性圖標(biāo)表現(xiàn)方式，激活的圖標(biāo)在線性的基礎(chǔ)上，添加帶有典型色彩的面元素，是目前圖標(biāo)設(shè)計(jì)的新形式。如圖2-95所示。04.動(dòng)畫的切換

一些應(yīng)用的標(biāo)簽欄圖標(biāo)會(huì)帶上一些動(dòng)效，使設(shè)計(jì)更加具有趣味性。例如淘寶App采用的就是最常見的動(dòng)效。點(diǎn)擊圖標(biāo)，圖標(biāo)會(huì)有一個(gè)小放大的抖動(dòng)效果。如圖2-96所示。

另外一些App采用更加復(fù)雜的設(shè)計(jì)效果，例如優(yōu)酷的App主菜單欄的圖標(biāo)，除了基本的大小抖動(dòng)之外，每個(gè)圖標(biāo)的內(nèi)部填充元素會(huì)有一個(gè)動(dòng)效。例如發(fā)現(xiàn)圖標(biāo)除了填充外，會(huì)有一個(gè)旋轉(zhuǎn)效果。而星球圖標(biāo)，內(nèi)部的填充線會(huì)有一個(gè)由左到右填充效果。如圖2-97所示。任務(wù)4——總結(jié)功能型圖標(biāo)的設(shè)計(jì)方法2.4.1任務(wù)情境

小明完成了主菜單欄圖標(biāo)之后，終于可以松口氣了，就在今天組長(zhǎng)找到小明，對(duì)小明的圖標(biāo)設(shè)計(jì)提出表?yè)P(yáng)，并安排小明一個(gè)新的任務(wù)，因?yàn)槊嬖嚂r(shí)聽小明說過，自己的總結(jié)能力很強(qiáng)，所以想讓小明通過分析各個(gè)APP軟件中的功能型圖標(biāo)，做出功能型圖標(biāo)設(shè)計(jì)方法的總結(jié)。2.4.2任務(wù)分析

此任務(wù)是進(jìn)行大量的搜集功能型圖標(biāo)，從這些功能型圖標(biāo)的設(shè)計(jì)方法進(jìn)行分析總結(jié)，匯總起來，難度一般。2.4.3任務(wù)實(shí)施

接到任務(wù)，小明開始去搜集功能型圖標(biāo)，對(duì)設(shè)計(jì)方法進(jìn)行分析，爭(zhēng)取完美的完成任務(wù)。

01.什么是功能型圖標(biāo)？

功能圖標(biāo)是具有指代意義且具有功能標(biāo)識(shí)的圖形，它不僅是一種圖形，更是一種標(biāo)識(shí)，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。功能型圖標(biāo)的設(shè)計(jì)可以分別分為面性圖標(biāo)、線性圖標(biāo)、圓角圖標(biāo)、直角圖標(biāo)、斷點(diǎn)圖標(biāo)、不透明度圖標(biāo)、雙色圖標(biāo)、結(jié)構(gòu)圖標(biāo)、一筆圖標(biāo)等，每個(gè)類型的圖標(biāo)設(shè)計(jì)點(diǎn)不同，可形成不同的效果。

以下是各APP中不同設(shè)計(jì)點(diǎn)的功能型圖標(biāo)的展示。如圖2-98所示。圖2-98圖2-99不透明度圖標(biāo)。如圖2-99所示。雙色圖標(biāo).如圖2-100所示。直角圖標(biāo)。如圖2-101所示。結(jié)構(gòu)圖標(biāo)。如圖2-102所示。一筆圖標(biāo)。如圖2-103所示。圖2-100圖2-101圖2-102圖2-10302.如何合理的設(shè)計(jì)功能型圖標(biāo)第一步：頭腦風(fēng)暴

以旅游為主體進(jìn)行頭腦風(fēng)暴，這個(gè)就能想到很多很多。第二步：搜集資料

搜集資料的時(shí)候要很好的提取關(guān)鍵詞，具象的事物可以看看該事物好的品牌公司的產(chǎn)品，品牌公司的工業(yè)設(shè)計(jì)相對(duì)較好，對(duì)后面提取元素也會(huì)有很大的幫助。也可以通過提取好的關(guān)鍵詞，翻譯成英文，再到國(guó)外的網(wǎng)站追波、be搜上一搜看看。搜索到的素材和元素一定要再設(shè)計(jì)，不能拿來直接用，如果直接用后面就沒必要寫了。第三步：提取元素

提取元素又歸結(jié)到繪畫結(jié)構(gòu)中去了，繪畫好的看到具象事物，具象圖標(biāo)就是提取主要輪廓線，保留可要可不要的元素，到最后的時(shí)候做統(tǒng)一刪減。如圖2-104所示。圖2-104圖2-105第四步：規(guī)范化

上面元素提取好后，需要開始選擇一種圖標(biāo)風(fēng)格進(jìn)行繪制。開始繪制的時(shí)候不要過于追求圖標(biāo)的風(fēng)格，還是要從圖標(biāo)本身出發(fā)快速的繪制好。等全部繪制好了突然想換一種圖標(biāo)風(fēng)格也是很快的，水到渠成。第五步：加減法

一套圖標(biāo)繪制好了之后還是在放在一起看一下整理的感覺，最后通過加減法適當(dāng)?shù)男扌扪a(bǔ)補(bǔ)，對(duì)于視覺上看上去過于繁瑣的圖標(biāo)要保留大輪廓的同時(shí)減少結(jié)構(gòu)達(dá)到視覺平衡；對(duì)于確實(shí)很簡(jiǎn)單但又沒辦法添加任何的東西來增加的時(shí)候是否可以放大來增加它的視覺豐滿感。如圖2-105所示。2.4.4任務(wù)評(píng)價(jià)

關(guān)于功能型圖標(biāo)的設(shè)計(jì)方法總結(jié)，小明先從特點(diǎn)入手，對(duì)特點(diǎn)進(jìn)行了總結(jié)，然后總結(jié)出一套設(shè)計(jì)方法，得到了小組組長(zhǎng)的認(rèn)可。移動(dòng)端界面設(shè)計(jì)

項(xiàng)目3手機(jī)APP的界面設(shè)計(jì)任務(wù)1——制作APP首頁(yè)3.1.1任務(wù)情境

小明接到設(shè)計(jì)師老師的通知，要設(shè)計(jì)一個(gè)APP的首頁(yè)。這個(gè)APP已經(jīng)確定好功能定位、流程圖，已經(jīng)有了頁(yè)面的原型圖。設(shè)計(jì)師告訴小明只需要按照IOS二倍圖的規(guī)范，設(shè)計(jì)UI界面，并且給小明幾張同類型APP首頁(yè)作為參考。3.1.2任務(wù)分析APP（應(yīng)用程序，Application的縮寫）一般指手機(jī)軟件。目前有三大流行的手機(jī)操作系統(tǒng)，分別是蘋果公司的IOS，谷歌公司的安卓系統(tǒng)，微軟的WPhone。在UI設(shè)計(jì)公司，設(shè)計(jì)師設(shè)計(jì)APP手機(jī)界面，一般按照IOS的二倍圖的尺寸來設(shè)計(jì)，一稿適配。要求的設(shè)計(jì)尺寸是750*1334像素。UI設(shè)計(jì)不同于藝術(shù)設(shè)計(jì)，藝術(shù)是感性的，UI設(shè)計(jì)是理性的，藝術(shù)所表達(dá)的是設(shè)計(jì)者的個(gè)人意識(shí)，而設(shè)計(jì)師是為了解決用戶具體的問題。原型圖如圖3-1“原型圖”：

圖3-1原型圖APP首頁(yè)參考圖片如圖3-2首頁(yè)1，圖3-3首頁(yè)2，圖3-4首頁(yè)3。圖3-2首頁(yè)1圖3-3首頁(yè)2圖3-4首頁(yè)33.1.3任務(wù)實(shí)施步驟一：按快捷鍵<Ctrl+K>，打開“首選項(xiàng)”對(duì)話框，在“常規(guī)”中勾選“用滾輪縮放”，如圖3-5“首選項(xiàng)-常規(guī)”，圖3-5首選項(xiàng)-常規(guī)

在“單位與標(biāo)尺”中，選擇，“標(biāo)尺”為“像素”，文字為“像素”，“屏幕分辨率”為“72像素/英寸”，如圖3-6首選項(xiàng)-單位與標(biāo)尺。圖3-6首選項(xiàng)-單位與標(biāo)尺步驟二：新建文件750*1334px，分辨率72像素/英寸，背景白色。這是按照IOS二倍圖的尺寸來設(shè)計(jì)的，如圖3-8新建文件所示。圖3-7“新建文件”圖3-7“新建文件”

隨著IOS系統(tǒng)手機(jī)版本的更新?lián)Q代，設(shè)計(jì)師需要牢記的數(shù)值也越來越多。表3.1所示為目前市面上比較常見的幾款I(lǐng)OS手機(jī)系統(tǒng)界面設(shè)計(jì)尺寸。表3-1IOS手機(jī)系統(tǒng)界面設(shè)計(jì)尺寸設(shè)備UI尺寸（像素）iPhoneX1125*2436iPhone8/7/6/6sp1242*2208iPhone8/7/6/6s750*1334iPhone5/5c/5s640*1136iPhone4/4s640*960iPhone&iPodtouch第一代、第二代、第三代320*480

在實(shí)際項(xiàng)目中，設(shè)計(jì)師基本上不會(huì)為每一種分辨率單獨(dú)設(shè)計(jì)一套UI界面。大多數(shù)情況下都是在IOS二倍圖的基礎(chǔ)上進(jìn)行設(shè)計(jì)，然后再為其他尺寸適配二進(jìn)行界面上的放大或者縮小。步驟三：建立水平方向參考線，40px，128像素，1236像素。預(yù)留狀態(tài)欄、導(dǎo)航欄和標(biāo)簽欄的位置。IOS系統(tǒng)手機(jī)界面中的欄主要有：狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄、工具欄。每個(gè)欄都有規(guī)定的外觀、功能和行為，主要是傳達(dá)與上下文情景相關(guān)的信息，展示用戶在應(yīng)用中所處的位置，同時(shí)還包含相關(guān)的導(dǎo)航功能。在75*1334px的界面設(shè)計(jì)中，欄高如表3-2所示。（1）狀態(tài)欄：顯示在屏幕的最上方，欄中包含信號(hào)、運(yùn)營(yíng)商、電量等信息，如圖3-8所示。在IOS二倍圖中高度為40px.當(dāng)運(yùn)行游戲程序或者全屏觀看媒體文件時(shí)，狀態(tài)欄會(huì)自動(dòng)隱藏。（2）導(dǎo)航欄：顯示當(dāng)前界面的標(biāo)題信息，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕。在IOS二倍圖中，高度為88px。（3）標(biāo)簽欄：是頁(yè)面的主菜單，用于切換一級(jí)頁(yè)面，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)。在IOS二倍圖中高度為98px。

（4）工具欄：放置一些與當(dāng)前界面視圖相關(guān)的操作按鈕，用來操縱當(dāng)前視圖的內(nèi)容。在IOS二倍圖中，高度為88px。IOS系統(tǒng)各機(jī)型的欄高如表3-2IOS系統(tǒng)各分辨率下的欄高所示。表3-2IOS系統(tǒng)各分辨率下的欄高設(shè)備UI設(shè)計(jì)尺寸（像素）狀態(tài)欄高度（像素）導(dǎo)航欄高度（像素）標(biāo)簽欄高度（像素）iPhoneX750*1624408898iPhone8/7/6/6sp1042*220860132146iPhone8/7/6/6s750*1334408898iPhone5/5c/5s640*1136408898iPhone4/4s640*960408898iPhone&iPodtouch第一代、第二代、第三代320*480204449步驟四：使用“繪制形狀”工具繪制寬750px，高128的矩形，填充為白色，描邊無，作為狀態(tài)欄和導(dǎo)航欄。在素材文件中拖入狀態(tài)欄的電源信號(hào)等信息。步驟五：制作導(dǎo)航欄中的信息。結(jié)果如圖3-8狀態(tài)欄、導(dǎo)航欄所示。圖3-8狀態(tài)欄導(dǎo)航欄

導(dǎo)航欄中文字的字號(hào)一般選擇32-44像素之間，只選擇偶數(shù)大小，如，32、34、36、38、40、42、44，不使用單數(shù)字號(hào)。字體選擇“蘋方”或者“黑體”，顏色可以選擇深灰色，色值“#333333”。使用“無襯線”字體，不能使用“微軟雅黑”?！跋忼X的方法”選擇“平滑”或“渾厚”，如圖3-9切換字符和段落面板所示。3-9切換字符和段落面板

提示：制作這一步的時(shí)候要建立圖層文件夾，將狀態(tài)欄和導(dǎo)航欄中的元素放置在各自的文件夾中，并注意圖層順序。注意：在移動(dòng)端界面設(shè)計(jì)中，不使用純黑色“#000000”，多使用深灰色“#333333”。

在APP界面設(shè)計(jì)中，狀態(tài)欄一般和導(dǎo)航欄背景顏色一致，并且和內(nèi)容區(qū)域需要區(qū)分開，目前流行的方法一：在導(dǎo)航欄下邊緣繪制一條一像素高的淺灰色細(xì)線。方法二：給狀態(tài)欄的矩形背景加圖層樣式“投影”。打開“圖層樣式”對(duì)話框，如圖3-10圖層樣式對(duì)話框，選擇“投影”，“不透明度”選擇20%，“角度”選擇90度，不勾選“使用全局光”，距離選擇2像素，擴(kuò)展為0，大小為4像素，或者“距離”和“大小”參數(shù)可以更小，不能過大。圖3-10圖層樣式對(duì)話框步驟六：制作標(biāo)簽欄。

繪制寬750像素，高98像素的矩形作為標(biāo)簽欄的背景，填充為白色，描邊無。拖入需要的圖標(biāo)，輸入文字。標(biāo)簽欄是手機(jī)APP中最重要的分類，是一級(jí)菜單。設(shè)計(jì)手機(jī)APP界面要考慮到人們的操作習(xí)慣，標(biāo)簽欄放置之所以放置在最下端，是因?yàn)榉奖銌问帜粗覆僮鳌Ｗ⒁猓阂凑兆痔?hào)和圖標(biāo)的大小計(jì)算高度，設(shè)置水平方向參考線。標(biāo)簽欄所使用的字號(hào)是整個(gè)頁(yè)面中最小的，一般使用20像素，最小使用18像素。字體選擇“蘋方”或者“黑體”等無襯線字體，不能使用微軟雅黑。

標(biāo)簽欄的圖標(biāo)大小設(shè)置在40到50像素之間，44像素左右是比較常用的數(shù)值。并且在正常狀態(tài)下正負(fù)形圖標(biāo)不能混用。如果正常態(tài)使用負(fù)形圖標(biāo)，那么當(dāng)前圖標(biāo)可以使用正形，或者使用主色來表示圖標(biāo)的選中狀態(tài)。

在IOS系統(tǒng)中的APP設(shè)計(jì)中，標(biāo)簽欄最多可以放置五個(gè)圖標(biāo)，有時(shí)候放置四個(gè)或者三個(gè)，圖標(biāo)之間的距離要相同，因此根據(jù)圖標(biāo)的大小和個(gè)數(shù)，一級(jí)圖標(biāo)距離邊界的距離，計(jì)算好數(shù)值，設(shè)置垂直方向的參考線。

標(biāo)簽欄和內(nèi)容區(qū)域需要區(qū)分開，目前流行的方法一：在標(biāo)簽欄上邊緣繪制一條一像素高的淺灰色細(xì)線。方法二：給標(biāo)簽欄的矩形背景加圖層樣式“投影”。打開“圖層樣式”對(duì)話框，如圖3-11圖層樣式對(duì)話框，選擇“投影”，“不透明度”選擇20%，“角度”選擇-90度，不勾選“使用全局光”，“距離”選擇2像素，“擴(kuò)展”為0，“大小”為4像素，或者“距離”和“大小”的參數(shù)可以選擇更小的數(shù)值，不能過大。3-11圖層樣式對(duì)話框步驟七：制作內(nèi)容區(qū)域。

首先注意內(nèi)容區(qū)域在圖層順序上，處于標(biāo)簽欄與狀態(tài)欄的下方。

移動(dòng)端APP使用的圖片要經(jīng)過處理，根據(jù)需要，按住“Ctrl+L”調(diào)整“色階”如圖3-12所示。圖3-12色階圖3-13曲線按住<Ctrl+M>調(diào)整“曲線”，如圖3-13所示。按<Ctrl+U>調(diào)整“色相和飽和度”，如圖3-14所示。圖3-14色相和飽和度

圖片上放置文字，如果放置白色文字，文字不清晰，可以選擇方法一：給圖片加局部遮罩，遮罩選擇黑色透明，方法二：給文字加投影。

繪制搜索框，二倍圖中，搜索框一般高度在58到65像素之間，60像素左右，搜索框中的字大小可以選擇26到28像素之間。搜索框一般使用圓角矩形。

注意：搜索框上下要留有足夠的寬度作為手指觸摸操作的熱區(qū)。

圖片需要左右滑動(dòng)的，最后一張圖片要放置不完整圖片，讓使用者能明確知道有展示不完全的內(nèi)容，可以左右滑動(dòng)。圖片排列整齊，圖片之間的距離要相同。注意：放置在白卡上的圖片和文字要注意圖片與白色卡片上下左右邊緣的距離，不能太擠。步驟八：背景顏色使用淺灰色。設(shè)置前景色為“#eeeeee”,在圖層面板中選擇“背景”圖層，按住<Alt+Del>填充前景色。

小技巧：移動(dòng)端APP的背景色經(jīng)常使用的背景色是淺灰色，色值“#eeeeee”，或者與這個(gè)顏色鄰近的顏色。成圖如圖3-15首頁(yè)。圖3-15首頁(yè)3.1.4任務(wù)評(píng)價(jià)1.各欄高度符合IOS規(guī)范。2.文字的字體、字號(hào)、顏色符合IOS規(guī)范。3.圖標(biāo)大小距離恰當(dāng)。4.圖片處理效果。5.圖片與文字的結(jié)合。6.白卡上及圖片與文字的擺放位置合適。7.頁(yè)面的其他細(xì)節(jié)。3.1.5必備知識(shí)1.二倍圖的名稱由來：因?yàn)樽詮奶O果四代開始使用的是Retina屏幕，也就是HD顯示屏，所以在iOS開發(fā)中，因?yàn)橛衅胀ㄆ梁透咔迤恋脑?，所以需要在?yīng)用中放置三套圖，一套是普通屏的，另外兩套是高清屏的。高清屏圖片的命名方式:@2x.png，@3x.png。iPhone4以前例如iPhone4，iPhone3，iPhone等都是普通屏，4s，5/5s/5c,6/6s,7都是2倍，6p/6sp/7p是3倍；2.IOS二倍圖制作文件大小為750*1334像素；3.二倍圖狀態(tài)欄，導(dǎo)航欄，標(biāo)簽欄，高度分別為40像素、88像素、98像素；4.導(dǎo)航欄，標(biāo)簽欄文字字體、字號(hào)、消除鋸齒方法、字的顏色；5.白卡的使用；6.文字和圖片距離手機(jī)邊緣的距離；7.圖片處理方法。3.1.6觸類旁通

通過“制作APP首頁(yè)”這個(gè)任務(wù)的實(shí)施，大家了解了IOS二倍圖的來源，設(shè)置文件的大小，頁(yè)面必要的組成部分，各欄高度，文字的字體、字號(hào)、顏色的使用規(guī)范，圖片的處理方法，白卡的使用，那么大家就可以設(shè)計(jì)一張自己的APP的首頁(yè)了，題材不限。任務(wù)2——設(shè)計(jì)一級(jí)頁(yè)面“分類”3.2.1任務(wù)情境

今天小明要繼續(xù)設(shè)計(jì)任務(wù)，制作另一個(gè)一級(jí)頁(yè)面“分類”。3.2.2任務(wù)分析

分類頁(yè)面的原型圖如圖3-16原型圖“分類”。

這個(gè)頁(yè)面也是一級(jí)頁(yè)面，不需要重新制作狀態(tài)欄、導(dǎo)航欄和標(biāo)簽欄，只需要更改導(dǎo)航欄文字和標(biāo)簽欄的當(dāng)前圖標(biāo)就可以。因此要在“首頁(yè)”的基礎(chǔ)上設(shè)計(jì)內(nèi)容區(qū)域。3.2.3任務(wù)實(shí)施步驟一：打開文件“1首頁(yè).psd”存儲(chǔ)為“分類.psd”。在圖層面板中保留“狀態(tài)欄”，“導(dǎo)航欄”和“標(biāo)簽欄”的圖層，刪除其他圖層。步驟二：刪除狀態(tài)欄文字“首頁(yè)”，更改標(biāo)簽欄當(dāng)前圖標(biāo)為“分類”。結(jié)果如圖3-17“分類1”。圖3-17“分類1”

圖3-18“拾色器”

注意：根據(jù)設(shè)計(jì)的頁(yè)面內(nèi)容計(jì)算好尺寸，設(shè)置水平方向和垂直方向的參考線。步驟三：繪制搜索框。

選擇圓角矩形工具繪制搜索框，顏色為淺灰色，寬度690，高度50。輸入文字字號(hào)22，字體蘋方或者黑體，“消除鋸齒方法”為“平滑”或者“渾厚”，顏色選擇色值為“