移動端界面設(shè)計 課件全套 潘寧 項目1-7 初識移動端界面設(shè)計-綜合項目實訓(xùn)

移動端界面設(shè)計

項目1初識移動端界面設(shè)計項目1初識移動端UI設(shè)計任務(wù)1認識移動端界面設(shè)計

1.1.1任務(wù)情境：

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

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

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

撰寫對于移動端UI設(shè)計的認識報告任務(wù)2——UI設(shè)計常用單位解析1.2.1任務(wù)情境

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

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

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

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

1.2.4任務(wù)評價

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

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

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

移動端UI設(shè)計的各種元素通常僅以PNG、JPG、GIF格式進行存儲。PNG格式：便攜式網(wǎng)絡(luò)圖形（PortableNetworkGraphics）是一種無損壓縮的位圖圖形格式。其設(shè)計目的是試圖替代GIF和TIFF文件格式，同時增加一些GIF文件格式所不具備的特性。PNG的名稱來源于“可移植網(wǎng)絡(luò)圖形格式(PortableNetworkGraphicFormat，PNG)”，也有一個非官方解釋“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格式儲存時，提供11級壓縮級別，以0—10級表示。其中0級壓縮比最高，圖像品質(zhì)最差。即使采用細節(jié)幾乎無損的10級質(zhì)量保存時，壓縮比也可達5：1。以BMP格式保存時得到4.28MB圖像文件，在采用JPG格式保存時，其文件僅為178KB，壓縮比達到24：1。經(jīng)過多次比較，采用第8級壓縮為存儲空間與圖像質(zhì)量兼得的最佳比例。JPEG文件的優(yōu)點是體積小巧，并且兼容性好。GIF格式：GIF(GraphicsInterchangeFormat)的原義是“圖像互換格式”，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應(yīng)用程序。GIF格式可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡單的動畫。GIF只能顯示256色。

1.3.4任務(wù)評價

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

項目2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

卡通形象與動物形象容易混淆，因為很多卡通形象都是基于動物設(shè)計演變而來。這里單獨列舉出來是為了歸類一些單純以動物外形為設(shè)計元素的表現(xiàn)手法?？ㄍㄐ蜗蟊砬樘卣髅黠@，視覺沖擊力和圖標的識別性較強。如圖2-20所示。

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

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

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

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

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

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

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

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

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

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

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

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

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

線性圖標與剪影圖標不同的是，線性圖標通過線來塑造形體的輪廓。線也是一種面，只不過線是比較細的面。App的圖標尺寸并不大，所以如果線不要過于復(fù)雜，因為在小面積中過多的線會對識別性產(chǎn)生較大的困擾。如圖2-54所示。圖2-53圖2-54圖標的風(fēng)格化

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

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

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

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

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

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

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

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

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

圖2-61

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

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

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

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

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

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

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

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

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

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

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

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

小明完成了主菜單欄圖標之后，終于可以松口氣了，就在今天組長找到小明，對小明的圖標設(shè)計提出表揚，并安排小明一個新的任務(wù)，因為面試時聽小明說過，自己的總結(jié)能力很強，所以想讓小明通過分析各個APP軟件中的功能型圖標，做出功能型圖標設(shè)計方法的總結(jié)。2.4.2任務(wù)分析

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

接到任務(wù)，小明開始去搜集功能型圖標，對設(shè)計方法進行分析，爭取完美的完成任務(wù)。

01.什么是功能型圖標？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（4）工具欄：放置一些與當前界面視圖相關(guān)的操作按鈕，用來操縱當前視圖的內(nèi)容。在IOS二倍圖中，高度為88px。IOS系統(tǒng)各機型的欄高如表3-2IOS系統(tǒng)各分辨率下的欄高所示。表3-2IOS系統(tǒng)各分辨率下的欄高設(shè)備UI設(shè)計尺寸（像素）狀態(tài)欄高度（像素）導(dǎ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)欄的電源信號等信息。步驟五：制作導(dǎo)航欄中的信息。結(jié)果如圖3-8狀態(tài)欄、導(dǎo)航欄所示。圖3-8狀態(tài)欄導(dǎo)航欄

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

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

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

繪制寬750像素，高98像素的矩形作為標簽欄的背景，填充為白色，描邊無。拖入需要的圖標，輸入文字。標簽欄是手機APP中最重要的分類，是一級菜單。設(shè)計手機APP界面要考慮到人們的操作習(xí)慣，標簽欄放置之所以放置在最下端，是因為方便單手拇指操作。注意：要按照字號和圖標的大小計算高度，設(shè)置水平方向參考線。標簽欄所使用的字號是整個頁面中最小的，一般使用20像素，最小使用18像素。字體選擇“蘋方”或者“黑體”等無襯線字體，不能使用微軟雅黑。

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

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

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

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

移動端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ū)。

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

小技巧：移動端APP的背景色經(jīng)常使用的背景色是淺灰色，色值“#eeeeee”，或者與這個顏色鄰近的顏色。成圖如圖3-15首頁。圖3-15首頁3.1.4任務(wù)評價1.各欄高度符合IOS規(guī)范。2.文字的字體、字號、顏色符合IOS規(guī)范。3.圖標大小距離恰當。4.圖片處理效果。5.圖片與文字的結(jié)合。6.白卡上及圖片與文字的擺放位置合適。7.頁面的其他細節(jié)。3.1.5必備知識1.二倍圖的名稱由來：因為自從蘋果四代開始使用的是Retina屏幕，也就是HD顯示屏，所以在iOS開發(fā)中，因為有普通屏和高清屏的原因，所以需要在應(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)航欄，標簽欄，高度分別為40像素、88像素、98像素；4.導(dǎo)航欄，標簽欄文字字體、字號、消除鋸齒方法、字的顏色；5.白卡的使用；6.文字和圖片距離手機邊緣的距離；7.圖片處理方法。3.1.6觸類旁通

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

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

分類頁面的原型圖如圖3-16原型圖“分類”。

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

圖3-18“拾色器”

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

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