移動端界面設計

項目1初識移動端界面設計項目1初識移動端UI設計任務1認識移動端界面設計

1.1.1任務情境：

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

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

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

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

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

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

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

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

了解IOS系統和安卓系統UI設計常用單位，以及單位之間的換算關系。任務3——了解UI設計常用圖像格式及常用軟件1.3.1任務情境

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

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

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

1.3.4任務評價

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小明馬上就可以協助張設計師做設計工作了，在此之前，他還需要了解移動端界面設計的基本流程以及自己的工作和學習的內容。1.5.2任務分析

了解UI設計流程，明確UI設計實習生的學習內容。1.5.3任務實施1.一個產品的UI設計流程一般需要以下10個階段：（1）產品定位與市場分析階段

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

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

（3）架構設計階段

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

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

根據原型設計階段的界面原型，對界面原型進行視覺效果的處理。UI主要職責：該階段確定整個界面的色調、風格、界面、窗口、圖標、皮膚的表現。（6）界面輸出階段

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

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

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

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

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

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

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

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

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

項目2

圖標的設計與制作任務1——APP軟件的iCON圖標設計2.1.1任務情境

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

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

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

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

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

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

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

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

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

02.使用多個字體設計

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

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

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

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

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

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

卡通形象與動物形象容易混淆，因為很多卡通形象都是基于動物設計演變而來。這里單獨列舉出來是為了歸類一些單純以動物外形為設計元素的表現手法。卡通形象表情特征明顯，視覺沖擊力和圖標的識別性較強。如圖2-20所示。

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

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

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

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

“視頻”的圖標也需要在“主頁”圖標的頁面上繼續(xù)操作（頁面：750*1334px主菜單欄：750x98px。Step01:選擇“圓角矩形工具”按鈕，對工具屬性欄進行設置，顏色為R45、G152、B98，無描邊色，在圖像上繪制圓角矩形。如圖2-35所示。Step02：設置寬度和高度分別為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：選擇“矩形工具”按鈕，在選項欄中設置描邊為4px，描邊顏色為R45、G152、B98，無填充，在圖像上繪制矩形。按下鍵入<Ctrl+T>鍵，對矩形進行旋轉，效果如圖2-39；圖2-40；圖2-41；圖2-42所示。圖2－42圖2－43圖2－44

Step05：選擇“矩形工具”按鈕，對工具屬性欄進行設置，填充色為白色，在圖像上繪制矩形，并使用快捷鍵<Ctrl+J>鍵再復制三個同樣的矩形，調整位置和大小。如圖2-43、2-44所示。05.“我的”圖標制作步驟詳解：“我的”的圖標也需要在“主頁”圖標的頁面上繼續(xù)操作。頁面：750*1334px主菜單欄：750x98px。Step01:使用“矩形工具”按鈕，建一個50x50的矩形，無填充色，描邊為1點，顏色為黑色。如圖2-45、圖2-46所示。圖2-45圖2-46Step02:選擇“橢圓工具”按鈕，對工具屬性欄進行設置，顏色為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任務評價1.主菜單欄中的圖標尺寸符合iOS系統的規(guī)范。2.圖標的設計是利用面性元素加色彩來表現的，符合正形圖標的設計原則。3.主菜單欄的圖標整體統一，風格一致。2.2.5必備知識

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

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

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

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

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

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

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

圖標設計選擇圓角設計，從外觀上就決定著風格化的統一。如圖2-55所示。圖2-55圖2-5601.氣質1：活潑的氣質

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

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

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

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

負形圖標要求在正形圖標的基礎上進行修改，但是要把握兩者之間的關系，熟知主菜單欄正形與負形轉換設計的方法，難度一般。2.3.3任務實施

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

圖2-61

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

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

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

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

圖2-79圖2-80圖2-81圖2-82Step03：選擇“矩形工具”按鈕，在選項欄中設置描邊為4點，描邊顏色為#555756，填充為無，在圖像上繪制矩形。按下<Ctrl+T>鍵，對矩形進行旋轉。如圖2-80所示。Step04：選擇“矩形工具”按鈕，在選項欄中設置前景色為#555756，在圖像上繪制矩形，鍵入快捷鍵<Ctrl+J>鍵再復制三個同樣的矩形，調整位置和大小。如圖2-81所示。05.“我的”圖標制作步驟詳解：Step01：選用“矩形工具”按鈕，創(chuàng)建一個78*78px的矩形；如圖2-82所示。Step02:設置這個矩形“填充”為無，“描邊”為黑色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：在圖層關掉“矩形1”圖層，并將橢圓2柵格化圖層，轉換為普通圖層，否則橡皮擦不能直接使用；如圖2-89所示。Step07：選用“橡皮擦”按鈕，選擇實心圓，擦掉下方形狀；如圖2-90、圖2-91所示。Step08：繼續(xù)擦除不需要的部分；如圖2-92所示。線性圖標完成。圖2-90圖2-91圖2-922.3.4任務評價1、主菜單欄的圖標，符合iOS系統的設計規(guī)范。2、從形式上也符合負形圖標的規(guī)范。3、能利用線性元素加色彩來表現默認狀