移動(dòng)端界面設(shè)計(jì) 課件 項(xiàng)目1、2 初識移動(dòng)端界面設(shè)計(jì)、圖標(biāo)的設(shè)計(jì)與制作

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

項(xiàng)目1初識移動(dòng)端界面設(shè)計(jì)項(xiàng)目1初識移動(dòng)端UI設(shè)計(jì)任務(wù)1認(rèn)識移動(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ì)，小明需要對移動(dòng)端界面設(shè)計(jì)有個(gè)初步認(rèn)識，然后撰寫一份報(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)終端的簡稱。移動(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ù)提供了廣闊的舞臺，很多增值業(yè)務(wù)可以就此展開，如：股票、新聞、天氣、交通、商品、應(yīng)用程序下載、音樂圖片下載等等。

移動(dòng)互聯(lián)網(wǎng)終端還包括平板電腦，智能手表和車載電腦。2.“UI”的本義是用戶界面，是英文User和Interface的縮寫，泛指用戶的操作界面，包含移動(dòng)APP，網(wǎng)頁，智能穿戴設(shè)備等。UI界面設(shè)計(jì)是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對軟件的使用界面進(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è)計(jì)是為了解決用戶的具體問題。只有將產(chǎn)品本身的UI設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì)完美融合才能打造出優(yōu)秀的界面設(shè)計(jì)作品。好的UI設(shè)計(jì)不僅讓軟件變得有個(gè)性、有品味，還會讓軟件的操作變得舒適、簡單、自由，充分體現(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)對手機(jī)的系統(tǒng)性能有所了解。3.UI設(shè)計(jì)師則指從事對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。UI設(shè)計(jì)具體分為三類，圖形設(shè)計(jì)、交互設(shè)計(jì)和用戶測試/研究的工作職能，分別對應(yīng)的是美術(shù)設(shè)計(jì)的專業(yè)知識，軟件工程師背景和相應(yīng)的編程能力，以及社會學(xué)、心理學(xué)等人文學(xué)科儲備。當(dāng)然，實(shí)際工作中，這幾種職能也不是截然分開的。而今，這一涵蓋諸多領(lǐng)域的職位，也越來越要求從業(yè)人員同時(shí)具備跨學(xué)科、綜合性的理論素養(yǎng)和實(shí)操能力。在漫長的軟件發(fā)展過程中，界面設(shè)計(jì)工作一直沒有被重視起來。做界面設(shè)計(jì)的人也被貶義的稱為“美工”。其實(shí)軟件界面設(shè)計(jì)就像工業(yè)產(chǎn)品中的工業(yè)造型設(shè)計(jì)一樣，是產(chǎn)品的重要賣點(diǎn)。一個(gè)友好美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(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ù)評價(jià)

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

初涉移動(dòng)端設(shè)計(jì)和開發(fā)的同學(xué)們，基本都會在尺寸問題上糾結(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)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(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)確的說是每英寸的長度上排列的像素點(diǎn)數(shù)量。1英寸是一個(gè)固定長度，等于2.54厘米。像素密度越高，代表屏幕顯示效果越精細(xì)。Retina屏比普通屏清晰很多，就是因?yàn)樗南袼孛芏确艘槐丁?.倍率與邏輯像素

假設(shè)有個(gè)郵件列表界面，3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機(jī)其實(shí)是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。在現(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倍，對應(yīng)IOS三倍圖)。實(shí)際像素除以倍率，就得到邏輯像素尺寸。只要兩個(gè)屏幕邏輯像素相同，它們的顯示效果就是相同的。在這本書中設(shè)計(jì)尺寸都采用IOS二倍圖的設(shè)計(jì)尺寸。3.常用單位及其換算：inch：英寸，長度單位，1英寸=2.54厘米；px：pixel，像素，電子屏幕上組成一幅圖畫或照片的最基本單元，在Photoshop上將圖片放大可以看到是由一個(gè)個(gè)的小格子組成的，這一個(gè)個(gè)的小格子就是一個(gè)像素。；pt:point，點(diǎn)，印刷行業(yè)常用單位，等于1/72英寸，等于0.035厘米；ppi:pixelsperinch，像素密度，即每英寸的長度上排列的像素點(diǎn)數(shù)量。dpi:dotperinch，即每英寸上能打印的點(diǎn)數(shù)量。常用于打印設(shè)備上，這個(gè)值越高，打印出的效果越精細(xì)。density：屏幕密度。dp:dip，Density-independentpixel,是安卓開發(fā)用的長度單位，1dp表示在屏幕像素點(diǎn)密度為160ppi時(shí)1px長度。定義當(dāng)屏幕的PPI為160時(shí)，1dp=1px，這時(shí)1dp的長度為1/160=0.006英寸，即px/dp=dpi/160。當(dāng)手機(jī)屏幕的PPI不同時(shí)，比如在320PPI屏幕上，這時(shí)1dp=2px,這時(shí)1dp的長度為2/320=0.006英寸。也就是說DP類似于我們所說的物理尺寸了，這可以保證用dp做為單位時(shí)在PPI不同的屏幕上看起來效果是相同的。sp:scale-independentpixel，安卓開發(fā)用的字體大小單位。

1.2.4任務(wù)評價(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í)間了，對于移動(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)板、路徑工具、濾鏡等圖像處理功能?？芍谱魅绨粹o制作、文字特效、材質(zhì)紋理、三維物體、影像特效及廣告創(chuàng)意設(shè)計(jì)等多種用途。Photoshop的應(yīng)用領(lǐng)域是很廣泛的，在圖像、圖形、文字、視頻、出版各方面都有涉及。是一門值得深入學(xué)習(xí)的一種好軟件。（2）AdobeIlustrator。是Adobe系統(tǒng)公司推出的一款非常好的基于矢量的圖形制作軟件，源文件格式為*.ai，最大特征在于鋼筆工具的使用，使得操作簡單、功能強(qiáng)大的矢量繪圖成為可能。它還集成文字處理、上色等功能，不僅在插圖制作，在印刷制品（如廣告?zhèn)鲉巍⑿宰樱┰O(shè)計(jì)制作方面也廣泛使用，事實(shí)上已經(jīng)成為桌面出版（DTP）業(yè)界的默認(rèn)標(biāo)準(zhǔn)。該軟件主要應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計(jì)到大型的復(fù)雜項(xiàng)目。（3）AxureRP。是美國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，德國MAXON出的3D動(dòng)畫軟體。Cinema4D是一個(gè)老牌的三維軟件。能夠進(jìn)行頂級的建模、動(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)智能識別。PxCook優(yōu)點(diǎn)在于將標(biāo)注、切圖這兩項(xiàng),設(shè)計(jì)完稿后集成在一個(gè)軟件內(nèi)完成，支持Windows和Mac雙平臺。2.常用文件格式

移動(dòng)端UI設(shè)計(jì)的各種元素通常僅以PNG、JPG、GIF格式進(jìn)行存儲。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)頁或S60程序中，原因是它壓縮比高，生成文件體積小。位圖格式，支持透明度，質(zhì)量較小，經(jīng)常用于網(wǎng)絡(luò)，也可以用于印刷，但必須是小面積印刷；JPG格式：JPEG（全稱是JointPhotographicExpertsGroup）是常見的一種圖像格式，它由聯(lián)合照片專家組開發(fā)并命名為"ISO10918-1"，JPEG僅僅是一種俗稱而已。JPEG格式是目前網(wǎng)絡(luò)上最流行的圖像格式，可以把文件壓縮到最小，在Photoshop軟件中以JPEG格式儲存時(shí)，提供11級壓縮級別，以0—10級表示。其中0級壓縮比最高，圖像品質(zhì)最差。即使采用細(xì)節(jié)幾乎無損的10級質(zhì)量保存時(shí)，壓縮比也可達(dá)5：1。以BMP格式保存時(shí)得到4.28MB圖像文件，在采用JPG格式保存時(shí)，其文件僅為178KB，壓縮比達(dá)到24：1。經(jīng)過多次比較，采用第8級壓縮為存儲空間與圖像質(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)成一種最簡單的動(dòng)畫。GIF只能顯示256色。

1.3.4任務(wù)評價(jià)

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

通過幾天的實(shí)習(xí)，小明對于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ì)絕不是簡單的排列組合與簡單地再編輯，它應(yīng)當(dāng)充滿著價(jià)值和意義，去說明道理，去刪繁就簡，去闡明演繹，去修飾美化。1.4.3任務(wù)實(shí)施1.界面清晰最重要

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

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

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

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

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

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

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

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

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

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

在每個(gè)屏幕上只顯示必要的內(nèi)容，如果用戶在做選擇，那么給他們顯示足夠的信息，然后在各自的頁面上展示詳情，避免在某個(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ù)評價(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)品定位與市場分析階段

UI設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場定位、產(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對原型進(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é)：對前面所有工作以設(shè)計(jì)方面的實(shí)施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪-圖形-Flash-視頻幾個(gè)質(zhì)量范圍，原型的本質(zhì)更傾向于一個(gè)DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對象的基本特性。（5）界面設(shè)計(jì)階段

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

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

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

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

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

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

圖1-2原型圖APP的原型圖可以使用軟件AxureRP來繪制，一般建議繪制文件大小為375*667像素。也可以采用紙筆繪制。原型圖確定的主要是頁面的內(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)行全屏效果查看或者請求開發(fā)人員幫助。1.5.4任務(wù)評價(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ì)組長找到小明，讓小明嘗試去做一個(gè)關(guān)于這款A(yù)PP的ICON圖標(biāo)，來做一次鍛煉，具體的APP內(nèi)容和類型可以向市場部負(fù)責(zé)人了解清楚。接到任務(wù)后，小明找到了市場部負(fù)責(zé)人進(jìn)行了了解，并開始了設(shè)計(jì)進(jìn)程。2.1.2任務(wù)分析

小明接到的這個(gè)任務(wù)這是關(guān)于旅游的一款A(yù)PP軟件，并且是針對人群是情侶，取名為“愛旅行”。這個(gè)任務(wù)重點(diǎn)是考察設(shè)計(jì)人員如何把握住情侶的特點(diǎn)，熟練運(yùn)用所掌握的設(shè)計(jì)技巧，針對相應(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è)置，選用“減去頂層命令”，對橢圓進(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ù)評價(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è)計(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á)到美感和識別性兼?zhèn)洹?.1.6觸類旁通

當(dāng)我們決定要去AppStore、GooglePlay這樣的應(yīng)用市場下載某個(gè)APP應(yīng)用時(shí)，首先映入眼簾的便ICON，即應(yīng)用圖標(biāo)。一個(gè)APP應(yīng)用圖標(biāo)設(shè)計(jì)的美感與吸引力，決定了用戶對產(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ì)。通過對筆畫及整體骨架進(jìn)行設(shè)計(jì)調(diào)整，以達(dá)到符合產(chǎn)品特性和視覺差異化的目的。作為國人對漢字的敏感度，這樣的設(shè)計(jì)形式大大降低了用戶對品牌的認(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)背景為單色或者漸變色，少量的顏色會輔助一些圖形作為背景元素，動(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)物給人的印象比較可愛，有助于加深用戶對產(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)的識別性較強(qiáng)。如圖2-20所示。

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

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

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

了解了主菜單欄包含主頁、分類、視頻、題庫、我的，小明開始搜集網(wǎng)上資料，并且下載類似APP做競品分析，決定利用色塊形式來設(shè)計(jì)正形圖標(biāo)。01.“主頁”圖標(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)建矩形，作為該頁面的主菜單欄,將其置于文件底部。如圖2-22；圖2-23所示。Step03：選擇工具箱中的“鋼筆工具”按鈕，將鋼筆的工具欄屬性改為“形狀”，填充顏色設(shè)置為：R45、G152、B98，描邊設(shè)置為：無。如圖2-24；圖2-25所示。圖2－24圖2－25Step03：使用鋼筆工具，結(jié)合<Ctrl>鍵和<Alt>鍵，繪制帶有圓角特點(diǎn)的該圖形，做為主頁正形圖標(biāo)，圖形整體尺寸控制在50x50px。如圖2-26所示。

最終效果圖：如圖2-27所示。圖2－26圖2－2702.“分類”圖標(biāo)制作步驟詳解：“分類”的圖標(biāo)需要在“主頁”圖標(biāo)的頁面上繼續(xù)操作（頁面：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)也需要在“主頁”圖標(biāo)的頁面上繼續(xù)操作（頁面：750*1334px主菜單欄：750*98px。Step01：使用工具箱“矩形工具“按鈕創(chuàng)建圓角矩形工具”，對工具屬性欄進(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.“題庫”圖標(biāo)制作步驟詳解：

“視頻”的圖標(biāo)也需要在“主頁”圖標(biāo)的頁面上繼續(xù)操作（頁面：750*1334px主菜單欄：750x98px。Step01:選擇“圓角矩形工具”按鈕，對工具屬性欄進(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>鍵，對矩形進(jìn)行旋轉(zhuǎn)，效果如圖2-39；圖2-40；圖2-41；圖2-42所示。圖2－42圖2－43圖2－44

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

圖2-49圖2-50圖2-51圖2－52Step05：將第一步繪制的矩形圖層刪除。如圖2-52所示。2.2.4任務(wù)評價(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è)計(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中過多的線會對識別性產(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)都會采用圓角設(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)用會可以塑造一種一樣的棱角感，所以會采用直角設(shè)計(jì)，另外一些偏B類的上午工具應(yīng)用也會采用直角設(shè)計(jì)，塑造一種嚴(yán)謹(jǐn)安全的感覺。如圖2-56所示。品牌基因在圖標(biāo)中運(yùn)用01.品牌圖形整體應(yīng)用

首頁最常見的是使用的圖標(biāo)是一個(gè)房子的圖形，這個(gè)圖形源自面包屑結(jié)構(gòu)，Home的圖形代表家，只要點(diǎn)擊Home就像是回到起點(diǎn)一樣。很多應(yīng)用的圖標(biāo)上的logo，都是一個(gè)讓人印象深刻的主圖形，那么我們可以直接把這個(gè)logo圖形做為應(yīng)用的首頁模塊圖標(biāo)使用。這樣的好處很明顯，每次用戶打開應(yīng)用后，都會看到這個(gè)圖形，反復(fù)加強(qiáng)了用戶對App的logo的印象。例如大眾點(diǎn)評、餓了么、花瓣、貓途鷹、網(wǎng)易云音樂提取各自品牌圖形，應(yīng)用在了App底部導(dǎo)航欄首頁模塊上。如圖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ì)，得到了小組組長的認(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.“主頁”圖標(biāo)制作步驟詳解：Step01：選擇工具箱中的“鋼筆工具”按鈕，將鋼筆的工具欄屬性改為“形狀”，填充顏色設(shè)置為無，描邊設(shè)置為3點(diǎn)，顏色為#aaaaaa。如圖2-60；圖2-61所示。圖2-60

圖2-61

Step02：利用“鋼筆工具”按鈕，結(jié)合<Ctrl>鍵和<Alt>鍵，繪制帶有圓角特點(diǎn)的該圖形，做為主頁正形圖標(biāo)，圖形整體尺寸控制在50x50px。如圖2-62所示。圖2－62圖2－63圖2－64Step03：使用“橡皮擦工具”按鈕，將形狀圖層?xùn)鸥窕?，擦除相?yīng)的部分。如圖2-63、圖2-64所示。02.“分類”圖標(biāo)制作步驟詳解：“分類”的圖標(biāo)需要在“主頁”圖標(biāo)的頁面上繼續(xù)操作（頁面：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)建圓角矩形”對話框，設(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.做缺口

對“圓角矩形圖層”做柵格化圖層，點(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.“題庫”圖標(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>鍵，對矩形進(jìn)行旋轉(zhuǎn)。如圖2-80所示。Step04：選擇“矩形工具”按鈕，在選項(xiàng)欄中設(shè)置前景色為#555756，在圖像上繪制矩形，鍵入快捷鍵<Ctrl+J>鍵再復(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ù)評價(jià)1、主菜單欄的圖標(biāo)，符合iOS系統(tǒng)的設(shè)計(jì)規(guī)范。2、從形式上也符合負(fù)形圖標(biāo)的規(guī)范。3、能利用線性元素加色彩來表現(xiàn)默認(rèn)狀