《UI界面交互設計》完整課件

UIDESIGN第一章UI面設計初識第六章播放器界面設計第二章UI面設計的規(guī)范與原則第三章UI面設計之平面設計第四章UI面設計之移動界面設計第五章應用軟件界面設計第一節(jié)UI設計基礎第二節(jié)UI界面設計與用戶體驗第三節(jié)UI界面設計的構成法則UIDESIGN一、什么是UI設計UI是userinterface（用戶界面）的簡稱。UI設計是指對軟件的人機交互、操作邏輯、界面的整體設計。UI設計不是簡單地畫圖標，也不局限于視覺設計，而是需要更多地考慮產(chǎn)品和用戶需求來進行整體設計。（一）用戶研究用戶研究包含兩個方面：一是可用性工程學（usabilityengineering），研究如何提高產(chǎn)品的可用性，使系統(tǒng)的設計更容易被人使用、學習和記憶；二是通過可用性工程學研究，發(fā)掘用戶的潛在需求，為技術創(chuàng)新提供新的思路和方法。（二）交互設計交互設計指人機之間的交互工程。交互設計是從程序員的工作中分離出來成為一個獨立學科，也就是人機交互設計。其目的在于使軟件易學、易用、易理解，使計算機真正成為方便為人類服務的工具。（三）界面設計界面設計不是單純的美術繪畫。它需要定位使用者、使用環(huán)境、使用方式，并且為最終用戶而設計，是純粹的科學性的藝術設計。檢驗一個界面的標準既不是某個項目開發(fā)組領導的意見，也不是項目成員投票的結果，而是最終用戶的感受。因此，界面設計要緊密結合用戶研究，以便設計出令用戶滿意的視覺效果。二、UI設計的常見類型（一）移動端UI設計移動端UI設計主要包含手機UI設計與平板電腦UI設計。在科技迅速發(fā)展的時代，平板電腦也逐步走進大眾生活。平板電腦是一種介于手機與電腦之間的便攜式電腦，將觸摸屏作為基本的輸入設備。平板電腦因輕薄、便攜、功能齊全、可操作界面空間大等優(yōu)點吸引了眾多用戶。（二）PC端UI設計PC端指的是電腦端。PC端UI設計就是電腦上的操作界面設計，其中包含網(wǎng)頁界面設計與軟件應用界面設計。軟件應用界面是用戶對軟件形成第一印象的重要媒介，其設計自然成為軟件開發(fā)的重要組成部分，并且越來越被軟件開發(fā)公司重視。（三）游戲UI設計隨著人們物質(zhì)生活水平的不斷提高，游戲產(chǎn)業(yè)越來越繁榮。一個優(yōu)秀的游戲UI設計可以吸引玩家，甚至決定玩家的初始存留。游戲界面雖然看起來是表象，卻直指游戲核心。（四）其他UI設計如今，更多的智能設備進入大眾生活，如VR眼鏡、智能電視、車載系統(tǒng)等，使UI設計的應用更加廣泛。三、UI設計的規(guī)范沒有規(guī)矩，不成方圓，UI設計也不例外。設計師不能單憑個人的主觀經(jīng)驗做設計，要想提升用戶體驗、高效且順暢地完成設計任務，就需要遵守一些設計規(guī)范。很多時候，設計規(guī)范是為了解決統(tǒng)一性和效率問題，避免開發(fā)過程中重復、煩瑣的低效工作。（一）移動端UI設計與PC端UI設計的不同1.界面尺寸不同不同的交互載體由不同的屏幕尺寸呈現(xiàn)。電腦顯示屏尺寸一般為19～24英寸，平板電腦屏幕尺寸一般為12.9英寸左右，手機屏幕尺寸一般為4～7英寸。尺寸不同，顯示區(qū)域就不同，設計時就需要考慮如何在不同的界面空間合理安排界面布局。2.用戶操作方式不同PC端與移動端有不同的操作方式，精準度也有明顯的區(qū)別。3.用戶使用環(huán)境不同PC端用戶多身處固定場所，使用環(huán)境比較穩(wěn)定，所以持續(xù)使用時間較長。移動端設備不受環(huán)境局限，使用時間更加靈活。用戶在移動端的使用時間更碎片化，所以移動端操作更注重短時、高效地滿足用戶使用需求。（二）移動端UI設計規(guī)范移動電子設備受屏幕尺寸的限制，無法在同一頁面上同時展示太多內(nèi)容，所以通過增加層級的方式向用戶展現(xiàn)內(nèi)容。各級界面不宜設計得過于復雜，應去繁從簡，多采用色彩鮮亮、版式清晰、視覺沖擊力強的界面向用戶傳達有效的信息。（三）PC端UI設計規(guī)范網(wǎng)頁設計的尺寸主要和兩個因素有關：電腦顯示器的分辨率、瀏覽器的分辨率。每個頁面都有有效可視區(qū)域，也就是除瀏覽器的工具欄和側邊欄外真正顯示內(nèi)容的地方。四、UI設計的常用工具（一）PhotoshopAdobePhotoshop簡稱“PS”，是由Adobe公司開發(fā)和發(fā)行的圖像處理軟件。PS主要處理以像素構成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。（二）IllustratorAdobeIllustrator簡稱“AI”，是一種應用于出版、多媒體和在線圖像的工業(yè)標準矢量插畫軟件。（三）AfterEffectsAdobeAfterEffects簡稱“AE”，是Adobe公司推出的一款圖形視頻處理軟件，適用于從事設計和視頻特技的機構，包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。（四）AxureRPAxureRP是一個專業(yè)的快速原型設計工具，讓負責定義需求和規(guī)格、設計功能和界面的專家能夠快速創(chuàng)建應用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。（五）SketchSketch是一款適用于設計師的矢量繪圖應用軟件。矢量繪圖也是目前進行網(wǎng)頁、圖標和界面設計的主要方式。（六）MarkManMarkMan是一款方便、高效的標注工具，極大地節(jié)省了設計師在設計稿上添加和修改標注的時間。一、用戶體驗的重要性用戶體驗就是商機。一件產(chǎn)品成功的關鍵就在于讓用戶滿意，讓用戶覺得值得購買和喜愛使用。只有用戶滿意了，當企業(yè)再推出新產(chǎn)品的時候，用戶才會再次選擇同一家的產(chǎn)品，并且還會帶動周邊的用戶。二、用戶體驗要素基于UCD的產(chǎn)品設計主要從表現(xiàn)層、框架層、結構層、范圍層、戰(zhàn)略層5個層面來考慮。這5個層面自下而上建設，隨著層面的上升，所做的決策越來越具體，涉及的細節(jié)越來越精細。一、什么是構成？構成是一種造型概念，是現(xiàn)代藝術興起的流派之一。它將不同或相同的形態(tài)、單元重新組合成新的單元形象，即藝術家主觀地考察宏觀和微觀世界，探究各事物間的組合關系與組合規(guī)律。二、形式美法則形式美法則是人類在創(chuàng)造美的過程中對美的形式規(guī)律的經(jīng)驗總結和抽象概括。研究、探索形式美的法則能夠培養(yǎng)人們對形式美的敏感性，指導人們更好地去創(chuàng)造美的事物。掌握形式美的法則能夠使人們更自覺地運用它來表現(xiàn)美的內(nèi)容，達到美的形式與美的內(nèi)容的高度統(tǒng)一。（一）統(tǒng)一與變化在界面設計中，形式美的規(guī)律是多樣統(tǒng)一的。界面設計的美是在變化和統(tǒng)一的矛盾中尋求“既不單調(diào)又不混亂的和諧、易用的世界”，簡單來說就是在變化中求統(tǒng)一。（二）對比與調(diào)和對比是含有兩個以上不同造型因素才能顯現(xiàn)出來的，是求得變化的好方法。調(diào)和是構成美的對象在內(nèi)部關系中無論質(zhì)和量都相輔相成，互為需要，其矛盾形成秩序的動態(tài)，是一種變化的美。（三）對稱與均衡對稱是以形象和色彩在不同位置上的相同來求得統(tǒng)一；均衡是圖案在不同位置上量與力在視覺心理上的平衡，求得內(nèi)在的統(tǒng)一。（四）節(jié)奏與韻律節(jié)奏是指音樂中音響節(jié)拍輕重緩急有規(guī)律的變化和重復。韻律是在節(jié)奏的基礎上賦予一定的情感色彩。前者著重于運動過程中的形態(tài)變化；后者著重于神韻變化，給人情趣和精神上的滿足。三、構成的思維方式均衡對比律動視點一、用戶模擬設計法用戶模擬設計法要求設計師（本身也是用戶）通過用戶調(diào)研，研究用戶最根本的需求，設身處地地換位思考，在不同情境中模擬用戶使用環(huán)境，將靈感與問題記錄下來，再回歸到設計師本身為用戶解決問題。二、目標導向設計法設計的本質(zhì)是解決問題。所謂目標導向，就是做任何事之前先明確目標，然后把目標拆解成可具體執(zhí)行的子目標，再把子目標轉化為設計中的要點。在界面設計中，設計目標主要分為產(chǎn)品目標和用戶目標。產(chǎn)品目標一般由產(chǎn)品經(jīng)理提出，也可以由設計師提出。三、“頭腦風暴”設計法“頭腦風暴”設計法是由美國創(chuàng)造學家A.F.奧斯本于1939年首次提出、1953年正式發(fā)表的一種激發(fā)創(chuàng)造性思維的方法。在運用“頭腦風暴”設計法時，要突破自己的思維定式，尋求更新或更多的想法，并不斷拓展、延伸，最終選取最佳的設計方案。一、界面設計元素（一）文字文字是信息內(nèi)容的載體，是記錄思想、交流思想、承載語言的圖像或符號。它一方面向用戶清晰、準確地傳達信息；另一方面，作為界面設計三大元素之一，與圖片、圖形共同構成界面，形成畫面美感。優(yōu)秀的文字設計還可以向用戶傳達情感。1.字體字體的選擇需根據(jù)品牌特性或界面功能而定。在不同的界面搭載設備上，選用的字體也不相同。一般常用的中文字體有黑體、宋體、楷體、等線體等。常用的英文字體有無襯線體、襯線體、意大利斜體、手寫體等。2.字號字號大小決定了信息的層級和主次關系。合理、有序的字號設置能讓界面信息清晰易讀、層次分明；相反，糟糕、無序的字號設置會讓界面混亂不堪，影響閱讀體驗。最常用的描述字號大小的單位有em和px兩種，通常認為em是相對大小單位，px是絕對大小單位。px是像素單位，16px表示16個像素大小，常用來表示電子設備中的字號；em是相對大小單位，表示的字號大小不固定，根據(jù)基礎文字大小進行相對大小處理。如果默認的字號大小為16px，對一段文字規(guī)定使用1em，那么表現(xiàn)出來的就是16px，2em就是32px。移動端一般根據(jù)文字的不同位置、不同功能來選擇不同字號大小，導航主標題字號通常為40～42px，正文通常為36px或32px，副文案為26px，小字為20px。PC端字號一般選用宋體12px或14px，大號字體選用黑體或微軟雅黑，字號可選18px、20px、26px、30px。行間距一般為字號的1.5～1.8倍。（二）圖片1.圖片的比例圖片的比例不同，向用戶傳達的信息與情感也有所不同。常用的圖片比例有1∶1、3∶4、16∶9、16∶10等。圖片的比例沒有固定的要求，可根據(jù)產(chǎn)品內(nèi)容或功能需求進行調(diào)整。如圖所示的App產(chǎn)品展示界面，產(chǎn)品展示圖片比例為1∶1，在圖片數(shù)量較多的情況下，使用這種圖片比例可以使整個界面看起來井然有序，突出產(chǎn)品形象，結構清晰。圖為優(yōu)酷PC端軟件界面，熱門播放展示圖片比例為16∶9，給用戶帶來了影視畫面的視覺感受，貼合產(chǎn)品的功能與特性。這種圖片比例應用廣泛，給用戶一種視野開闊的感覺。X∶≤Y瀑布流圖片比例也是較為常見的一種圖片比例。X∶≤Y代表寬度固定，高度在最大值之間自定義的瀑布流設計。2.圖片的位置與面積如圖所示，保時捷中國網(wǎng)站界面將圖片填充于整個banner（橫幅廣告）中，帶給用戶強烈的視覺沖擊力。擴大圖片面積能使界面整體產(chǎn)生震撼力。面積較小的圖片會給人以精致的感覺。如圖所示，圖片與文字相結合，在有限的空間內(nèi)為用戶提供了更多的信息。同級圖片安置于相同高度的位置水平排列，使畫面具有平衡性、秩序性。在界面設計中，更多的時候需要將大小不同的圖片相結合，通過圖片大小向用戶傳達界面主次關系，常以大圖突出主體內(nèi)容，以小圖介紹分類信息。3.圖片與文字的組合在界面設計中，圖片與文字的組合是多種多樣的，不同形式的圖文組合能帶給用戶不同的感覺。文字穿插在圖片中可以增加界面的層次感和立體感，增強界面的現(xiàn)代性和科技性。（三）圖形1.圖標圖形一般來說，用戶可以進行操作的圖標均為功能型圖標，如圖所示。功能型圖標主要用于幫助用戶達成某種交互目標或完成某些交互任務。展示型圖標多用于展現(xiàn)產(chǎn)品特性、風格或宣傳企業(yè)品牌，如圖所示的iPhone界面圖標，是獨特的、有內(nèi)涵的且具有辨識度的。2.版式圖形版式圖形多用于輔助界面版式設計，借助圖形對界面進行層級處理、畫面切割等。如圖所示的每日故宮App界面，利用規(guī)則圖形對不同尺寸的圖片進行規(guī)范，并且有序排列，重新組合為新的圖形，給人一種穩(wěn)定、祥和、有序的感覺。如圖所示的界面，借助不規(guī)則圖形對界面的不同功能區(qū)進行區(qū)域劃分，增加了界面的層次感，使整個界面看起來年輕、活潑、有趣。如圖所示的網(wǎng)站界面，在界面背景中，運用不規(guī)則圖形對界面進行劃分，將視線聚焦于中間部分，在內(nèi)容上運用規(guī)則圖形規(guī)范內(nèi)容信息。規(guī)則圖形與不規(guī)則圖形的結合使整個界面看起來既活潑又保持一定的秩序。二、界面設計色彩搭配色彩是絕大多數(shù)設計給用戶傳遞的最顯著的視覺元素之一，是藝術表現(xiàn)的要素之一。用戶對不同的色彩有著不同的感受和體驗。色彩不是越多越好。通常在配色方案中，色彩數(shù)量要控制在3種左右。（一）色彩基礎知識1.色彩的概念色彩是指光從物體反射到人的眼睛所引起的一種視覺心理感受。色彩按字面含義理解可分為色和彩。色是指人對進入眼睛的光傳至大腦時所產(chǎn)生的感覺；彩則是多色的意思，是人對光變化的理解。2.原色、間色、復色原色又叫作三原色、一次性色。三原色分為兩大類：光的三原色和顏料的三原色。光的三原色為紅、綠、藍。顏料的三原色為紅、黃、藍。三原色是所有色彩的基礎色，可以調(diào)配出多種色相的色彩。間色是由兩個原色相混合得出的色彩，如黃色與藍色等量調(diào)配可得出綠色，藍色與紅色等量調(diào)配可得出紫色。復色是將兩個間色或一個原色與相對應的間色相混合得出的色彩。復色包含三原色的成分，是色彩純度較低的含灰色彩。3.色彩三要素色彩的基本屬性包括色相、純度、明度。這3個色彩特性稱為色彩三要素。色相指色彩的相貌，是色彩最顯著的特征。它是不同波長的色彩被感覺的結果。光譜上的紅、橙、黃、綠、青、藍、紫就是7種不同的基本色相。黑、白及各種明度的灰為無彩色，不具有色相屬性。明度指色彩的明暗、深淺程度的差別，取決于反射光的強弱。明度包括兩個含義：一是指一種顏色本身的明與暗，二是指不同色相之間存在著明與暗的差別。純度又稱飽和度，指色彩的純凈度。原色的純度最高，原色在色彩中所占的比例不同，會產(chǎn)生不同的色彩純度。4.色相環(huán)與色彩的相互關系色彩的三屬性就如同音樂中的音階一般，可以利用它們來維持繁多色彩之間的秩序，形成一個既容易理解又方便使用的色彩體系。所有的色彩可排成一個環(huán)形，這種色相的環(huán)狀排列叫作“色相環(huán)”。（二）色彩搭配原則色彩在視覺傳達中往往伴隨著某種情感或含義，如紅色代表熱烈、喜慶、警示，黃色代表信心、希望、快樂，綠色代表健康、環(huán)保、希望等。在界面設計中，用戶對產(chǎn)品的第一印象常常取決于界面的顏色或圖形，若色彩使用得恰到好處，就可以吸引用戶，增加瀏覽量，與用戶建立良好的關系。1.色彩協(xié)調(diào)統(tǒng)一同一產(chǎn)品或同一類型的窗口應使用同一種配色方案，根據(jù)品牌形象與產(chǎn)品屬性選擇恰當?shù)纳{(diào)。當然，統(tǒng)一并不代表只能有一種顏色，可以通過調(diào)整明度、純度或小面積使用對比色等方法來豐富畫面效果。2.有重點色配色時，可以選取一種顏色作為整個界面的重點色，使之成為界面的焦點。重點色通常起到提醒、標記、警告等作用。3.色彩平衡整個界面在配色時最好使用3種以內(nèi)的基色，以獲得更好的視覺效果。在設計中要保持色彩平衡，使用的顏色越多，越難保持平衡。4.色彩調(diào)和在選用對比色、互補色進行界面設計時，要在明度、純度上進行調(diào)整，使幾種色彩相融合。一、簡易性簡易的界面有利于用戶了解和使用，并能降低用戶做出錯誤選擇的可能性。二、記憶負擔最小化人腦不是電腦，在設計界面時要考慮到人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定且有限，24小時內(nèi)存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。四、用戶使用習慣界面應方便用戶通過已掌握的知識來操作，不應超出常識。界面的視覺呈現(xiàn)應便于用戶理解和使用。三、一致性一致性是每一個優(yōu)秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產(chǎn)品內(nèi)容相一致。六、靈活性靈活性簡單來說就是要讓用戶方便地使用，且兼具互動多重性，不局限于單一的工具（如鼠標、鍵盤、手柄等）。五、安全性與人性化界面應能讓用戶自由做出選擇，且所有選擇都是可逆的。在用戶做出危險的選擇時，要有系統(tǒng)提示。高效率和用戶滿意度是人性化的體現(xiàn)。產(chǎn)品應具備專家級和初學者系統(tǒng)，即用戶可依據(jù)自己的習慣定制界面，并能保存設置。隨著科技和設備的飛速發(fā)展，界面設計風格也變得多元化。不同的風格讓界面看起來靈活多變。常見的界面設計風格有扁平化、擬物化、立體化。一、扁平化扁平化設計是隨著移動端的發(fā)展而出現(xiàn)和流行的，是指在狹小的操作視圖屏幕中，刪繁就簡，弱化材質(zhì)、漸變、陰影，去除冗余的圖形元素、排版。設計師在界面設計中通過添加圖標陰影、降低圖形透明度、結合色彩漸變等方式，運用光影效果增加界面層級，讓扁平化界面不再單調(diào)、冰冷，畫面變得豐富，帶給用戶新穎的視覺感受。這種界面設計風格稱為半扁平化。二、擬物化擬物化設計是指在設計過程中通過添加高光、紋理、材質(zhì)和陰影等效果，力求再現(xiàn)實物對象；也可適當?shù)剡M行變形和夸張，使界面模擬真實物體。三、立體化與擬物化風格相比，立體化風格更加簡約、清晰。立體化風格是基于3D技術發(fā)展起來的，可以增強界面的親和力和娛樂性。在AI技術的帶動下，立體化風格也成為界面設計中的主流風格之一，從游戲界面到產(chǎn)品界面，將立體化融入界面設計變得越來越流行。和一個軟件產(chǎn)品要經(jīng)過很多開發(fā)階段才能發(fā)布使用一樣，一個完整的UI作品也要經(jīng)過諸多步驟才能投入使用。一般的UI設計流程如下：需求分析→功能設計→視覺設計→技術實現(xiàn)→反饋改進。一、需求分析在UI設計過程中，需求分析人員會確定軟件的目標用戶，獲取最終用戶和直接用戶的需求。在設計一個產(chǎn)品之前，設計者應該明確什么人群使用、什么時候使用、在哪里使用、如何使用，任何一個因素都會改變UI的設計方向。二、功能設計界面設計不僅要向用戶傳達視覺美感，還要向用戶傳遞信息、完成人機交互。設計師應根據(jù)產(chǎn)品的屬性設計承載不同功能的界面。三、視覺設計在進行視覺設計時，需要先明確界面風格定位，設計者可以通過關鍵詞語描述來進行分析。例如，某款軟件的風格定位是精美、時尚、年輕、簡約，希望用戶在使用時感覺親切、放松、印象深刻，設計者就要結合風格定位與情感要素進行視覺設計?？梢栽O計出幾種不同的界面樣式以供選擇，但設計制作應盡可能保持同一水準。四、技術實現(xiàn)已完成的設計作品需要經(jīng)過后臺編程，進行程序開發(fā)，再發(fā)布到平臺上投向市場?？梢?，一個符合產(chǎn)品定位、滿足用戶需求的好的UI設計產(chǎn)品的推出，與技術人員的合作也密不可分。五、反饋改進投向市場并不意味著作品設計的結束。在作品投入使用時，需要零距離接觸最終用戶，收集用戶反饋，對出現(xiàn)的問題加以改進，統(tǒng)計、整理用戶的真實評價，為以后的版本升級積累資料。一、圖標圖標需要在很小的范圍之內(nèi)表達出最清楚的含義，讓用戶“一看即懂”。在設計、制作圖標時應該注意其識別性、美觀性、一致性與可用性。二、按鈕按鈕是一種基礎界面控件，源自生活中的電器元件，允許用戶通過點擊或其他操作方式進行交互。按鈕既可以是文本按鈕，也可以是圖像圖標按鈕。三、菜單任何一個軟件或頁面都需要通過各種命令來完成各項功能。在有限的界面空間內(nèi)，命令大多通過菜單來實現(xiàn)。在移動端界面設計中，“漢堡式”菜單成為界面的重要元素，并得到廣泛應用。“漢堡式”菜單設計能減少用戶使用過程中的干擾，很多讓人眼花繚亂的元素都可以隱藏其中，避免用戶注意力太過分散，用戶需要時可通過點擊圖標來訪問菜單。這樣的菜單設計能提升用戶體驗。四、標簽標簽的作用是對位于其后的界面組件作說明。標簽設計應該注意轉角部分的變化，狀態(tài)可參考按鈕來設置。五、滾動條和狀態(tài)欄滾動條主要是為了對固定大小的區(qū)域性空間中內(nèi)容量的變換進行設計，應該有上下箭頭、滾動標等，有些還有翻頁標。狀態(tài)欄一般用于顯示當前的操作狀態(tài)或提示信息。如圖所示的Word狀態(tài)欄，顯示當前Word文檔中的當前頁數(shù)及全文字數(shù)、語言等信息。在制作界面控件時，像素網(wǎng)格對齊是非常重要的。左圖為矢量圖形與像素網(wǎng)格對齊狀態(tài)，右圖為矢量圖形未與像素網(wǎng)格對齊狀態(tài)。為確保輸出圖形在界面端口顯示清晰，需在制作前將文件狀態(tài)設置為矢量圖形與像素網(wǎng)格對齊。以Photoshop為例，其設置步驟如下。步驟1：啟動PhotoshopCC2018，在菜單欄中執(zhí)行【編輯】命令，如圖所示。步驟2：在【編輯】菜單中執(zhí)行【首選項】→【工具】命令。步驟3：在【工具】選項卡中選擇【將矢量工具與變化和像素網(wǎng)格對齊】選項。一、圖標的制作功能型圖標一般有16px×16px、24px×24px、28px×28px、32px×32px、36px×36px、48px×48px等尺寸，圖標所在位置不同，尺寸就不同。展示型圖標一般有44px×44px、48px×48px、64px×64px、96px×96px、128px×128px等尺寸，不同用戶端口所需圖標尺寸不同，最大圖標尺寸為256px×256px步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。將背景圖層設置為不可見。步驟2：在工具欄中選擇【橢圓工具】，然后按住【Shift】鍵，在畫板中繪制一個正圓形，并將其填充為黑色，效果如圖所示。步驟3：選擇圖層“橢圓1”，按【Ctrl】+【J】組合鍵復制橢圓圖層，并更名為“橢圓2”。然后按【Ctrl】+【T】組合鍵進入自由變換模式，在狀態(tài)欄中單擊【保持長寬比】圖標?，將寬（W）與高（H）的數(shù)值設置為“80%”。為使視圖清晰，將橢圓填充為白色。步驟4：繼續(xù)選擇圖層“橢圓1”，按【Ctrl】+【J】組合鍵復制3個橢圓圖層，分別更名為“橢圓3”“橢圓4”“橢圓5”，并將其依次排列。然后按【Ctrl】+【T】組合鍵進入自由變換模式，在狀態(tài)欄中單擊【保持長寬比】圖標?，將寬（W）與高（H）的數(shù)值分別設置為“60%”“40%”“20%”。步驟5：選中“橢圓1”“橢圓2”圖層，按【Ctrl】+【E】組合鍵合并橢圓形狀，在工具欄中選擇【路徑選擇工具】，選擇上層橢圓。步驟6：在狀態(tài)欄中單擊【路徑操作】圖標?，然后執(zhí)行【減去頂層形狀】命令，制作圓環(huán)，將圓環(huán)填充為黑色，并將圖層重命名為“圓環(huán)1”，效果如圖所示。步驟7：選中“橢圓3”“橢圓4”圖層，按【Ctrl】+【E】組合鍵合并橢圓形狀，在工具欄中選擇【路徑選擇工具】，選擇上層橢圓。在狀態(tài)欄中單擊【路徑操作】圖標?，然后執(zhí)行【減去頂層形狀】命令，制作圓環(huán)，將圓環(huán)填充為黑色，并將圖層重命名為“圓環(huán)2”。步驟8：同時選擇圖層“圓環(huán)1”“圓環(huán)2”“橢圓5”，按【Ctrl】+【E】組合鍵合并形狀，并將圖層重命名為“橢圓”。步驟9：在工具欄中選擇【矩形工具】，然后按住【Shift】鍵，在畫板中繪制正方形，尺寸為400px×400px。按【Ctrl】+【T】組合鍵進入自由變換模式，按住【Shift】鍵將圖形順時針旋轉45°。步驟10：選擇圖層“矩形1”，并將底角與圓形圓心對齊。然后選擇圖層“矩形1”“橢圓”，按【Ctrl】+【E】組合鍵合并形狀，在工具欄中選擇【路徑選擇工具】，選擇上層矩形，在狀態(tài)欄中單擊【路徑操作】圖標，然后執(zhí)行【與形狀區(qū)域相交】命令。

步驟11：在畫板中對圖形位置進行調(diào)整執(zhí)行【文件】→【存儲為】命令，將文件保存為PNG格式，并命名為“WiFi圖標”。步驟12：在應用時，可根據(jù)界面色彩需求對圖標顏色進行更改。最終完成效果如圖所示。二、按鈕的制作按鈕是UI設計中常用的界面控件。它在界面中作為主要的行動點，引導用戶進行相應的操作，在用戶和產(chǎn)品的交互中承擔著重要的作用。按鈕與圖標不同：圖標主要表現(xiàn)視覺的美觀性；按鈕則注重功能性，有時需要在狹小的空間內(nèi)體現(xiàn)功能與文字。在設計時，不同的按鈕形狀會給用戶帶來不同的視覺感受。其常用形狀有直角矩形、半圓角矩形、圓角矩形。根據(jù)產(chǎn)品使用對象來選擇合適的按鈕形狀與顏色至關重要。以在Photoshop中制作圓角矩形開關按鈕為例，具體步驟如下。步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。步驟2：選擇“圖層0”圖層，單擊面板底部的【添加圖層樣式】圖標，然后選擇【顏色疊加】選項，在【顏色疊加】選項卡中將填充顏色設置為“R：37，G：36，B：36”。步驟3：在工具欄中選擇【圓角矩形工具】，繪制圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：0，G：155，B：223”。步驟4：選擇“圓角矩形1”圖層，單擊面板底部的【添加圖層樣式】圖標?，然后選擇【內(nèi)陰影】選項，在【內(nèi)陰影】選項卡中設置各項參數(shù)。步驟5：單擊【內(nèi)陰影】右側的添加按鈕?，繼續(xù)添加【內(nèi)陰影】效果，將【角度】調(diào)整為“-90”。步驟6：繼續(xù)添加【內(nèi)陰影】效果，將【角度】調(diào)整為“0”。步驟7：繼續(xù)添加【內(nèi)陰影】效果，將【角度】調(diào)整為“180”。步驟8：在【圖層樣式】對話框中選擇【內(nèi)發(fā)光】選項，具體設置如圖所示。步驟9：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：239，G：239，B：239”。步驟10：選擇“橢圓1”圖層，單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項，在【漸變疊加】選項卡中設置各項參數(shù)。步驟11：在【圖層樣式】對話框中選擇【內(nèi)陰影】選項，增加圓形厚度。步驟12：單擊【內(nèi)陰影】右側的添加按鈕?，繼續(xù)添加【內(nèi)陰影】效果，將【角度】調(diào)整為“-90”。步驟13：繼續(xù)添加【內(nèi)陰影】效果，為圓形添加藍色反光效果，具體設置如圖所示。步驟14：繼續(xù)添加【內(nèi)陰影】效果，為圓形兩側添加反光效果，具體設置如圖所示。步驟15：繼續(xù)添加【內(nèi)陰影】效果，具體設置如圖所示。步驟16：在【圖層樣式】對話框中選擇【投影】選項，具體設置如圖所示。步驟17：繼續(xù)添加【投影】效果，增加投影的層次感，具體設置如圖所示。步驟18：在工具欄中選擇【橫排文字工具】，雙擊畫板輸入文字“ON”，然后在【文字圖層屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：13，G：145，B：191”。步驟19：選擇“ON”文字圖層，單擊面板底部的【添加圖層樣式】圖標?，然后選擇【內(nèi)陰影】選項，增加文字層次感，具體設置如圖所示。步驟20：繼續(xù)添加【內(nèi)陰影】效果，增強文字立體感，具體設置如圖所示。步驟21：隱藏“圖層0”的背景顏色。執(zhí)行【文件】→【存儲為】命令，將文件保存為PNG格式，并命名為“開關按鈕”。三、菜單與工具欄的制作菜單與工具欄在功能上并無太大差別，菜單主要為用戶提供更多可操作選項，或為文字按鈕，或為圖形按鈕。在形式上，常見的菜單有下拉式菜單與彈出式菜單，需要根據(jù)具體的使用場景選擇合適的設計方式。工具欄主要為用戶提供可操作按鈕，大多具有定向功能。圖形圖標為工具欄的主要組成元素。以在Photoshop中制作彈出式菜單為例，具體步驟如下。步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。步驟2：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：250，G：54，B：74”，并將圖層命名為“底層圓”。步驟3：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【內(nèi)陰影】選項，為“底層圓”添加內(nèi)陰影效果，加強圖形層次感，具體設置如圖所示。步驟4：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：255，G：255，B：255”，并將圖層命名為“中層圓”。步驟5：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【投影】選項，為“中層圓”添加投影效果，具體設置如圖所示。步驟6：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：250，G：54，B：74”，并將圖層命名為“頂層圓”。步驟7：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【投影】選項，為“頂層圓”添加投影效果，具體設置如圖所示。步驟8：同時選中“底層圓”“中層圓”“頂層圓”3個圖層，在狀態(tài)欄中分別單擊【水平居中對齊】按鈕??和【垂直居中對齊】按鈕?，將3個圓形居中對齊，效果如圖所示。步驟9：制作定位圖標。在“頂層圓”上新建圖層，在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)，如圖3-69所示。將其填充顏色設置為“R：250，G：54，B：74”，并將圖層命名為“定位-圓”。步驟10：在工具欄中選擇【多邊形工具】，在畫板上雙擊，在【創(chuàng)建多邊形】對話框中將【邊數(shù)】設置為“3”。步驟11：按【Ctrl】+【T】組合鍵進入自由變換模式，將三角形旋轉90°，放置于“定位-圓”下方，與“定位-圓”水平居中對齊，并調(diào)整三角形大小，使三角形兩邊與圓下方相切。步驟12：按【Ctrl】+【R】組合鍵顯示標尺，以三角形底端頂點為準分別畫水平與垂直參考線，并刪除三角形圖層。步驟13：在工具欄中選擇【直接選擇工具】，單擊“定位-圓”底端錨點，拖動至參考線交點。步驟14：在工具欄中選擇【轉換點工具】，單擊“定位-圓”底端錨點。步驟15：使用【直接選擇工具】?對“定位-圓”左右兩側錨點進行調(diào)整。步驟16：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：255，G：255，B：255”，并將圖層命名為“定位-小圓”，使其與“定位-圓”形狀水平居中對齊。步驟17：同時選中“定位-圓”“定位-小圓”圖層，按【Ctrl】+【G】組合鍵創(chuàng)建新組，并將新組更名為“定位圖標”。至此，定位圖標制作完成。步驟18：制作評論圖標。在“定位圖標”上新建圖層，在工具欄中選擇【橢圓工具】，繪制一個橢圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：35，G：35，B：35”，并將圖層命名為“評論-圓”。步驟19：在工具欄中選擇【多邊形工具】，繪制一個三角形，按【Ctrl】+【T】組合鍵進入自由變換模式，將三角形旋轉130°，調(diào)整三角形大小，將其填充顏色設置為“R：35，G：35，B：35”。步驟20：同時選中“評論-圓”“多邊形1”圖層，按【Ctrl】+【E】組合鍵合并形狀，并將新圖層更名為“評論圖形”。步驟21：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。步驟22：將新建圓形的填充顏色設置為“R：255，G：255，B：255”，按【Ctrl】+【C】組合鍵復制，再按【Ctrl】+【V】組合鍵粘貼兩次，得到3個尺寸、顏色相同的圓形。步驟23：將3個圓形放置在“評論圖形”的適當位置，單擊狀態(tài)欄中的【垂直居中對齊】按鈕??和【水平居中分布】按鈕??來調(diào)整圓形的位置與分布。同時選中3個圓形圖層，按【Ctrl】+【E】組合鍵合并圖形，將圖層更名為“評論-小圓”。步驟24：同時選中“評論圖形”“評論-小圓”圖層，按【Ctrl】+【G】組合鍵創(chuàng)建新組，并將新組更名為“評論圖標”。至此，評論圖標制作完成。步驟25：制作搜索圖標。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：35，G：35，B：35”，并將圖層命名為“搜索-圓”。

步驟26：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：255，G：255，B：255”，并將圖層命名為“搜索-小圓”。步驟27：同時選中“搜索-圓”“搜索-小圓”圖層，單擊狀態(tài)欄中的【水平居中對齊】按鈕??和【垂直居中對齊】按鈕??，使兩個圓形居中對齊，效果如圖所示。步驟28：在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：35，G：35，B：35”，按【Ctrl】+【T】組合鍵進入自由變換模式，將圓角矩形旋轉45°，置于“搜索-小圓”圖層下方，并調(diào)整其在搜索圖形中的位置。步驟29：同時選中“搜索-圓”“搜索-小圓”“圓角矩形1”圖層，按【Ctrl】+【G】組合鍵創(chuàng)建新組，并將新組更名為“搜索圖標”。至此，搜索圖標制作完成。步驟30：制作相機圖標。在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：35，G：35，B：35”，并將圖層命名為“相機-圖形”。步驟31：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：255，G：255，B：255”，并將圖層命名為“相機-圓”。步驟32：同時選中“相機-圖形”“相機-圓”圖層，單擊狀態(tài)欄中的【水平居中對齊】按鈕??和【垂直居中對齊】按鈕??，使兩個圖形居中對齊。步驟33：在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：35，G：35，B：35”，并將圖層命名為“相機-按鈕”。步驟34：同時選中“相機-圖形”“相機-圓”“相機-按鈕”圖層，按【Ctrl】+【G】組合鍵創(chuàng)建新組，并將新組更名為“相機圖標”。至此，相機圖標制作完成。步驟35：調(diào)整“定位圖標”“評論圖標”“搜索圖標”“相機圖標”在圖形中的位置，使4個圖標分布勻稱，在視覺上保持平衡，效果如圖所示。步驟36：制作取消按鈕。在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：255，G：255，B：255”，按【Ctrl】+【T】組合鍵進入自由變換模式，將圓角矩形旋轉45°。步驟37：選中圓角矩形，同時按住【Alt】鍵移動圓角矩形，得到復制圖形，然后按【Ctrl】+【T】組合鍵進入自由變換模式。右擊，在彈出的快捷菜單中執(zhí)行【水平翻轉】命令，調(diào)整兩個圓角矩形的位置，使其與“頂層圓”居中對齊。步驟38：同時選中“圓角矩形1”“圓角矩形1拷貝”圖層，按【Ctrl】+【G】組合鍵創(chuàng)建新組，并將新組更名為“取消按鈕”。至此，取消按鈕制作完成。步驟39：制作選中指示圖形。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其填充顏色設置為“R：231，G：231，B：231”，并將圖層命名為“指示圖形”。步驟40：使用【矩形工具】?繪制一個矩形，將矩形放置在正圓形一半的位置，選中“指示圖形”與“矩形1”圖層，按【Ctrl】+【E】組合鍵合并形狀。在工具欄中選擇【路徑選擇工具】，選擇上層矩形，在狀態(tài)欄中單擊【路徑操作】按鈕?，然后執(zhí)行【減去頂層形狀】命令，將正圓形剪切為半圓形。步驟41：使用【矩形工具】繪制一個矩形，將矩形放置在半圓圖形垂直中線的位置。選中半圓與該矩形圖層，利用布爾運算，將半圓剪切為1/4圓，并將圖層重命名為“選中圖形”。步驟42：選中“選中圖形”圖層，按【Ctrl】+【T】組合鍵進入自由變換模式，將圖形旋轉45°，調(diào)整底端錨點，使其與“頂層圓”圓心重疊。步驟43：將“選中圖形”圖層置于“頂層圓”與圖標圖層組之下。調(diào)整畫面。

案例分析：本案例是運用Photoshop制作具有金屬質(zhì)感的旋轉圖標。在制作過程中主要使用“圖層樣式”功能，與“濾鏡”效果相結合，繪制質(zhì)感強、形狀規(guī)整的圖標。步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。步驟2：單擊“圖層0”圖層右側的鎖狀按鈕，解鎖該圖層。單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項。將該圖層更名為“背景”。步驟3：在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：47，G：47，B：47”。將該圖層更名為“底圖”。步驟4：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項。步驟5：在【圖層樣式】對話框中選擇【斜面和浮雕】選項，具體設置如圖所示。步驟6：在【圖層樣式】對話框中選擇【內(nèi)陰影】選項，具體設置如圖所示。步驟7：在【圖層樣式】對話框中選擇【投影】選項，具體設置如圖所示，效果如圖所示。步驟8：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：47，G：47，B：47”。將該圖層更名為“金屬底層”。步驟9：制作圖形金屬質(zhì)感。單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項。圖層樣式中的顏色可根據(jù)畫面美感設置，沒有固定數(shù)值要求。步驟10：在【圖層樣式】對話框中選擇【描邊】選項。步驟11：在【圖層樣式】對話框中選擇【投影】選項，具體設置如圖所示，效果如圖所示。步驟12：制作金屬拉絲質(zhì)感。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：47，G：47，B：47”。將該圖層更名為“金屬底層拉絲效果”。步驟13：選中該圖層，右擊，在彈出的快捷菜單中執(zhí)行【柵格化圖層】命令，如圖所示。步驟14：在最上方菜單欄中執(zhí)行【濾鏡】→【雜色】→【添加雜色】命令，如圖所示?！咎砑与s色】對話框中的具體設置如圖所示。步驟15：繼續(xù)在最上方菜單欄中執(zhí)行【濾鏡】→【模糊】→【動感模糊】命令?！緞痈心：繉υ捒蛑械木唧w設置如圖所示。步驟16：將該圖層的混合模式設置為【濾色】。選中該圖層，右擊，在彈出的快捷菜單中執(zhí)行【轉換為智能對象】命令。步驟17：為金屬底層添加內(nèi)壁厚度。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：47，G：47，B：47”。將該圖層更名為“金屬底層內(nèi)壁”。步驟18：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項，具體設置如圖所示。步驟19：制作彩色層。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：167，G：167，B：167”。將該圖層更名為“彩色層”。步驟20：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項。步驟21：在【圖層樣式】對話框中選擇【內(nèi)陰影】選項，具體設置如圖所示。步驟22：繼續(xù)添加3層【內(nèi)陰影】效果，具體設置如圖所示，效果如圖所示。步驟23：制作頂層金屬圓。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。步驟24：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【漸變疊加】選項。步驟25：在【圖層樣式】對話框中選擇【描邊】選項，具體設置如圖所示。步驟26：在【圖層樣式】對話框中選擇【投影】選項，具體設置如圖所示。步驟27：繼續(xù)添加【投影】效果，具體設置如圖所示，效果如圖所示。步驟28：制作頂層金屬圓拉絲效果。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：47，G：47，B：47”。將該圖層更名為“金屬頂層拉絲效果”。步驟29：使用步驟12至步驟16的方法制作拉絲效果，圖標效果如圖所示。步驟30：繪制指示點。在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，然后在【屬性】面板中設置各項參數(shù)。將其內(nèi)部填充顏色設置為“R：156，G：57，B：166”。將該圖層更名為“指示點”。步驟31：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【描邊】選項。步驟32：在【圖層樣式】對話框中選擇【內(nèi)陰影】選項。步驟33：繪制終點指示點。在工具欄中選擇【矩形工具】?，繪制一個矩形，將其內(nèi)部填充顏色設置為“R：230，G：0，B：18”，然后在【屬性】面板中設置各項參數(shù)。將該圖層更名為“終點指示點”。步驟34：單擊面板底部的【添加圖層樣式】圖標?，然后選擇【內(nèi)陰影】選項。步驟35：根據(jù)畫面需求，調(diào)整各個圖形元素位置。步驟36：導出與存儲圖標。在圖層欄中，選中除背景外的全部圖層，按【Ctrl】+【G】組合鍵對圖標元素圖層進行編組，并將圖層組更名為“旋轉圖標”。右擊，在彈出的快捷菜單中執(zhí)行【快速導出為PNG】命令，將文件存儲到文件夾中。一、什么是App？App是application（應用程序）的縮寫，主要指安裝在智能手機上的軟件，用來完善原始系統(tǒng)的不足與個性化，使手機功能更完善，為用戶提供更豐富的使用體驗。比較著名的應用商店有蘋果的AppStore、谷歌的GooglePlayStore、黑莓的BlackBerryAppWorld、微軟的Marketplace等。在移動端軟件快速發(fā)展的形勢下，軟件的類型與功能日益細化、多元化，極大地滿足了用戶的不同需求。例如在移動端應用商店中下載“小愛音箱”App，即可在手機上對小愛音箱進行操控。二、移動端UI的設計趨勢（一）界面風格趨勢在界面風格上，移動端UI設計的主要趨勢可分為扁平化方向、插畫風方向、3D效果方向。1.扁平化方向扁平化設計作為近幾年UI界面的主流設計風格，將繼續(xù)被廣泛應用。扁平化的設計風格在發(fā)展過程中變得更加精致化、層次化，會將動態(tài)效果納入設計考量中，再結合動效，在原有的清晰、簡約的基礎上增添了一些生動活潑的特點。2.插畫風方向近幾年，插畫手繪風格界面逐漸流行起來。3.3D效果方向3D效果多用于游戲類界面設計中。（二）形式與內(nèi)容趨勢1.卡片式設計卡片式設計的優(yōu)勢在于更直觀的內(nèi)容表達和快捷的跳轉操作，整體更有層次感，運用起來更方便，在視覺、體驗、交互等各方面擁有良好的用戶體驗。2.無邊框設計無論是PC端還是移動端，顯示屏幕都在向大屏方向發(fā)展，界面設計則跟隨屏幕的發(fā)展走向無邊框化，去除了界面中的邊框、分割線，用間距來區(qū)分內(nèi)容。3.分割線設計在界面設計中，最傳統(tǒng)、最常見的分隔方式是“線”。它能起到分隔、組織、細化的作用，幫助用戶了解界面層次，使界面信息具有條理。分割線包含全屏分割線與內(nèi)嵌式分割線。三、手機AppUI設計與平面UI設計的區(qū)別手機AppUI設計主要是手機App界面設計；平面UI設計的范圍則非常廣泛，包括絕大部分的UI設計，如車載系統(tǒng)界面設計、智能冰箱界面設計等。四、移動App界面設計流程（一）工作描述設計師基于原型交互稿及產(chǎn)品需求文檔來設計產(chǎn)品頁面效果圖，與產(chǎn)品經(jīng)理深入溝通確定詳細的交互細節(jié)及效果，與需求業(yè)務方確定并完善最終效果圖，依據(jù)開發(fā)需求進行效果圖細節(jié)標注，設計產(chǎn)品圖標及應用市場審核宣傳材料，配合市場運營部門設計產(chǎn)品運營活動頁面等。（二）工作要點用戶分析，設計梳理。素材收集，確定風格。界面設計，規(guī)范輸出。UE（用戶體驗）測試，整體復盤。（三）交付成果交付成果包括PSD源文件、切圖源文件、交互描述及標注細節(jié)規(guī)范說明。五、App界面配色原則（1）設計色調(diào)統(tǒng)一。（2）運用情感化色彩。（3）采用標準界面。（4）考慮色盲、色弱用戶需求。（5）顏色方案的測試。由于顯示器、顯卡的不同，每臺機器的色彩表現(xiàn)都不一樣，所以應該通過不同機器對每套顏色方案進行嚴格測試。（6）遵循對比原則。對比原則簡單來說就是淺色背景使用深色文字，深色背景使用淺色文字。（7）色彩類別的控制。整個界面中的顏色種類不宜太多，以免讓人眼花繚亂，應盡量保持干凈。一、iOS系統(tǒng)概述iOS系統(tǒng)是蘋果公司為其移動設備開發(fā)的操作系統(tǒng)，主要應用于iPhone、iPad以及iPodtouch等設備。iOS系統(tǒng)可以管理移動設備硬件并為設備本地應用程序的實現(xiàn)提供基礎技術。二、iOS系統(tǒng)用戶界面元素（一）條欄條欄用來告訴用戶他們處于應用程序中的什么位置，提供導航，可能包含按鈕或其他元素來啟動操作和交流信息。1.狀態(tài)欄狀態(tài)欄在屏幕的上邊緣，顯示有關設備當前狀態(tài)的有用信息，如時間、移動運營商、網(wǎng)絡狀態(tài)和電池電量。2.導航欄導航欄在應用程序界面的頂部，在狀態(tài)欄的下方，并允許通過一系列分層的屏幕導航。3.搜索欄搜索欄允許用戶通過輸入文本來搜索大量的信息。搜索欄既可以單獨顯示，也可以在導航欄或內(nèi)容視圖中顯示。4.標簽欄標簽欄出現(xiàn)在應用程序界面的底部，能夠在應用程序的不同部分之間快速切換。5.工具欄工具欄包含用于執(zhí)行與當前視圖或其中內(nèi)容相關的操作的按鈕。工具欄是半透明的，可能有背景色。當用戶不需要時，工具欄通常會隱藏起來。（二）內(nèi)容視圖1.操作表操作表是響應控件或操作時出現(xiàn)的一種特定的警告樣式，會提供一組與當前操作相關的兩個或多個選項。2.活動視圖活動是指在當前操作中有用的任務，如復制、收藏或查找等，一旦啟動，可以立即執(zhí)行任務，或者在繼續(xù)之前詢問更多信息。3.警報警報主要傳達與應用程序或設備狀態(tài)相關的重要信息，并經(jīng)常請求反饋。警報由標題、可選消息、一個或多個按鈕和可選的文本字段組成。除了這些可配置元素之外，警報的可視化外觀是固定的，不能自定義。

4.集合集合用于集合管理一組有序的內(nèi)容（如一組照片），并在一個可定制和高度可視化的布局中呈現(xiàn)，如圖所示。集合不強制執(zhí)行嚴格的線性格式，所以特別適合顯示大小不同的項目。一般來說，集合非常適合顯示基于圖像的內(nèi)容，可以選擇性地呈現(xiàn)背景和其他裝飾性視圖，以直觀地區(qū)分項目的子集。5.圖像視圖圖像視圖在透明或不透明背景上顯示單個圖像或動態(tài)圖像序列。在圖像視圖中，圖像可以被拉伸、縮放或固定到特定位置。默認情況下，圖像視圖不可交互。6.頁面視圖頁面視圖控制器可以實現(xiàn)內(nèi)容頁面（如文檔、電子書、記事本或日歷）之間的線性導航。頁面視圖控制器可使用兩種樣式來轉換頁面：滾動和翻頁。7.彈窗彈窗是一個短暫的視圖。當用戶點擊一個控件或一個區(qū)域時，它會出現(xiàn)在屏幕上其他內(nèi)容的上方。通常，彈窗包含一個指向彈窗所在位置的箭頭。8.滾動視圖滾動視圖允許用戶瀏覽多于可視區(qū)域的內(nèi)容，如文檔中的文本或圖像集合。當用戶滑動、輕彈、拖動、輕擊和按壓時，滾動視圖會跟隨用戶手勢，以一種自然的方式顯示或縮放內(nèi)容。滾動視圖本身沒有外觀，但是當用戶與它交互時，它會顯示暫時的滾動指示器。9.拆分視圖拆分視圖管理兩個并排的內(nèi)容窗格顯示。主窗格中包含持久內(nèi)容，輔助窗格中包含相關信息。10.列表列表將數(shù)據(jù)顯示為一個滾動的單列行列表，其中的行可以劃分為節(jié)或組。11.文本視圖文本視圖用來顯示多行文本內(nèi)容。12.網(wǎng)頁視圖網(wǎng)頁視圖直接在應用程序中加載和顯示豐富的網(wǎng)頁內(nèi)容。（三）控件1.按鈕按鈕用以啟動應用程序的特定操作，可自定義背景，并且可以包含標題或圖標。2.編輯菜單用戶可以觸摸、按住或雙擊文本字段、文本視圖、網(wǎng)頁視圖或圖像視圖中的元素來選擇內(nèi)容并顯示編輯選項（如復制和粘貼。3.標簽標簽用來描述屏幕上的界面元素或提供短消息。4.頁面控件頁面控件顯示當前頁在扁平化頁面列表中的位置。它以一系列小指示圓點的形式出現(xiàn)，表示可用頁面的打開順序。5.滑塊滑塊是一個可以用手指滑動的交互控件。用戶可以用手指滑動該控件在最小值和最大值之間移動，如調(diào)整屏幕亮度或媒體文件播放期間的位置等。三、iOS系統(tǒng)界面設計規(guī)范在設計時，設計者需要對iOS系統(tǒng)界面設計規(guī)范有一定的了解與掌握，雖不一定要嚴格遵守，但要學會融會貫通。微課視頻（一）界面設計尺寸曾經(jīng)的iOS設備iPhone6（s）/7/8（4.7英寸）、iPhone6（s）/7/8Plus（5.5英寸）、iPhoneX（5.8英寸）、iPhoneXSMax（6.5英寸）等都采用了Retina屏幕，其中iPhone6（s）/7/8采用的是2倍率的分辨率，后三者采用的是3倍率的分辨率。隨著屏幕尺寸的發(fā)展，iOS系統(tǒng)界面設計尺寸逐漸由750px×1334px轉換成1242px×2208px，一般在設計時需有兩套界面尺寸。iOS界面尺寸及分辨率（二）界面元素欄高度iOS11系統(tǒng)引入了“安全區(qū)域”的概念。屏幕在橫屏與豎屏狀態(tài)下，各區(qū)域尺寸也不相同。（三）界面控件尺寸（1）應用圖標尺寸一般為180px×180px（60pt×60pt@3x）、120px×120px（60pt×60pt@2x）。（2）焦點圖標尺寸一般為120px×120px（40pt×40pt@3x）、80px×80px（40pt×40pt@2x）。（3）設置圖標尺寸一般為87px×87px（29pt×29pt@3x）、58px×58px（29pt×29pt@2x）。（4）用戶圖標尺寸一般為72px×72px（24pt×24pt@3x）、48px×48px（24pt×24pt@2x）。（5）標簽欄圖標圓形尺寸為75px×75px（25pt×25pt@3x）、50px×50px（25pt×25pt@2x），方形尺寸為69px×69px（23pt×23pt@3x）、46px×46px（23pt×23pt@2x）。四、iOS系統(tǒng)設計原則整體美學一致性直接操作反饋使用隱喻用戶控制與交互設計一、Android系統(tǒng)概述Android是一種基于Linux的自由及開放源代碼的操作系統(tǒng)，主要使用于移動設備，如智能手機和平板電腦，由Google公司和開放手機聯(lián)盟領導及開發(fā)。二、Android系統(tǒng)界面設計規(guī)范Android系統(tǒng)的界面設計規(guī)范與iOS系統(tǒng)明顯不同。Android是一個開放源代碼的系統(tǒng)，國內(nèi)外有很多手機廠商，如小米、華為、魅族、三星等，因此Android機型非常多。每一家手機廠商都有自己的操作系統(tǒng)，都有一套自己的UI設計規(guī)范。（一）設計稿尺寸Android設備產(chǎn)品眾多，要適配每一個機型是很復雜且困難的。目前市場上的主流機型通常選擇1080px×1920px作為Android設備設計稿尺寸。以1080px×1920px為設計稿標準尺寸，與低密度屏幕和高密度屏幕適配時，界面調(diào)整幅度最小。如今大屏幕是主流，設計師有了更大的發(fā)揮空間，可以充分利用視覺空間進行界面布局。（二）基本概念（三）界面元素規(guī)范為了支持所有不同屏幕密度的設備運行，Android將它們歸為4類：低（Ldpi）、中（Mdpi）、高（Hdpi）、超高（XHdpi）。Android系統(tǒng)各種屏幕密度與其他參數(shù)參考數(shù)據(jù)界面設計空間尺寸如表所示。界面設計空間尺寸在設計狀態(tài)欄時需注意以下幾點：①狀態(tài)欄可以在整個App中采用一個樣式，也可以單獨為某個視圖設計樣式；②狀態(tài)欄背后不要放其他內(nèi)容，不要有滾動內(nèi)容，防止干擾用戶閱讀狀態(tài)欄信息；③盡量不要隱藏狀態(tài)欄，除非特殊情況，如全屏看視頻時可以隱藏狀態(tài)欄，但要保證輕點屏幕時可以恢復狀態(tài)欄。三、Android系統(tǒng)UI界面設計特色（一）使用戶陶醉（二）簡化操作（三）更加完善的工作流程四、Android系統(tǒng)用戶界面元素（一）主屏幕主屏幕可自定義放置應用圖標、目錄和窗口小控件，可通過左右滑動屏幕切換不同的主屏幕窗口。（二）狀態(tài)欄狀態(tài)欄位于手機屏幕的頂部，可顯示飛行模式、移動數(shù)據(jù)、熱點、藍牙、鬧鐘等。其中時間和電池圖標是必須保留的。（三）導航抽屜導航抽屜是一個從屏幕左邊滑入的面板，用于顯示應用的主要導航頁，多運用在單一的主頁面中。（四）操作欄操作欄位于手機屏幕最下方，包含3個按鈕，左側為返回，中間為主界面，右側為最近任務。以圖片圖標為例，我們來學習設計與制作交互式圖標。步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。步驟2：繪制常規(guī)狀態(tài)圖標。在工具欄中選擇【矩形工具】，按住【Shift】鍵在畫板中繪制一個正方形，將其描邊填充顏色設置為“R：82，G：74，B：77”，內(nèi)部填充顏色設置為“R：255，G：255，B：255”。步驟3：在工具欄中選擇【矩形工具】，按住【Shift】鍵在“底層”圖層之上繪制一個正方形，將其內(nèi)部填充顏色設置為“R：117，G：221，B：224”。步驟4：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，將其描邊填充顏色設置為“R：82，G：74，B：77”，內(nèi)部填充顏色設置為“R：255，G：216，B：1”。步驟5：在工具欄中選擇【多邊形工具】，雙擊畫板，將邊數(shù)設置為“3”，然后按住【Shift】鍵繪制一個正三角形，將其描邊填充顏色設置為“R：82，G：74，B：77”，內(nèi)部填充顏色設置為“R：238，G：238，B：238”。步驟6：在工具欄中選擇【多邊形工具】，雙擊畫板，將邊數(shù)設置為“3”，然后按住【Shift】鍵繪制一個正三角形，將其描邊填充顏色設置為“R：82，G：74，B：77”，內(nèi)部填充顏色設置為“R：238，G：238，B：238”。步驟7：在圖像中根據(jù)“色塊”與“山”圖層形狀的位置，繪制參考線，并在工具欄中選擇【矩形工具】，在畫板中繪制一個矩形。同時選擇該圖層與“山”圖層，按【Ctrl】+【E】組合鍵合并形狀，再在工具欄中選擇【路徑選擇工具】，選擇上層矩形，在狀態(tài)欄中單擊【路徑操作】圖標?，然后執(zhí)行【與形狀區(qū)域相交】命令，調(diào)整相交后形狀的顏色，將圖層名稱改為“山”。步驟8：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，將其內(nèi)部填充顏色設置為“R：82，G：74，B：77”。步驟9：選中圓形并復制粘貼兩個圓形，調(diào)整三個圓形的水平高度與間距，將圖層名稱改為“更多”。步驟10：選中除背景外的其余所有圖層，按【Ctrl】+【G】組合鍵對圖層進行編組，將圖層組更名為“常規(guī)圖標”。步驟11：繪制單擊狀態(tài)圖標。復制“常規(guī)圖標”圖層組，更名為“單擊圖標”。步驟12：在“單擊圖標”圖層組中選中“底圖”圖層，將其內(nèi)部填充顏色設置為“R：238，G：238，B：238”，形狀無描邊。步驟13：選中“太陽”圖層，將其描邊填充顏色設置為“R：160，G：160，B：160”。步驟14：分別選中“小山”“山”圖層，將其描邊填充顏色設置為“R：160，G：160，B：160”。步驟15：選中“更多”圖層，將其內(nèi)部填充顏色設置為“R：160，G：160，B：160”。單擊圖標制作完成。步驟16：繪制按下狀態(tài)圖標。復制“單擊圖標”圖層組，更名為“按下圖標”。步驟17：在“按下圖標”圖層組中選中“底圖”圖層，單擊面板底部的【添加圖層樣式】圖標?，然后選擇【內(nèi)陰影】選項，在【內(nèi)陰影】選項卡中設置各項參數(shù)。步驟18：單擊【內(nèi)陰影】右側的添加按鈕?，添加3層【內(nèi)陰影】效果，【距離】和【大小】的數(shù)值不變，【角度】分別設置為“0”“90”“180”。步驟19：按下圖標制作完成，效果如圖所示。步驟20：繪制選中狀態(tài)圖標。復制“單擊圖標”圖層組，更名為“選中圖標”。步驟21：在“選中圖標”圖層組中選中“底圖”圖層，將其描邊填充顏色設置為“R：0，G：160，B：33”，內(nèi)部填充顏色設置為“R：255，G：255，B：255”。步驟22：選中“色塊”圖層，將其內(nèi)部填充顏色設置為“R：0，G：160，B：233”。步驟23：分別選中“太陽”“小山”“山”圖層，將其描邊填充顏色設置為“R：255，G：255，B：255”，內(nèi)部填充顏色設置為“R：0，G：160，B：233”。步驟24：選中“更多”圖層，將其內(nèi)部填充顏色設置為“R：255，G：255，B：255”。選中圖標制作完成。步驟25：繪制禁用狀態(tài)圖標。復制“選中圖標”圖層組，更名為“禁用圖標”。步驟26：在“禁用圖標”圖層組中選中“底圖”圖層，將其描邊填充顏色設置為“R：210，G：210，B：210”，內(nèi)部填充顏色設置為“R：255，G：255，B：255”。步驟27：選中“色塊”圖層，將其內(nèi)部填充顏色設置為“R：210，G：210，B：210”。步驟28：分別選中“太陽”“小山”“山”圖層，將其描邊填充顏色設置為“R：210，G：210，B：210”，內(nèi)部填充顏色設置為“R：238，G：238，B：238”。步驟29：選中“更多”圖層，將其內(nèi)部填充顏色設置為“R：210，G：210，B：210”。禁用圖標制作完成。步驟30：存儲圖標文件。同時選中“常規(guī)圖標”“單擊圖標”“按下圖標”“選中圖標”“禁用圖標”圖層組，右擊，在彈出的快捷菜單中執(zhí)行【快速導出為PNG】命令。PNG格式文件將自動保存到指定文件夾中。第一節(jié)了解App界面設計第二節(jié)iOS系統(tǒng)界面尺寸及控件設計規(guī)范第三節(jié)Android系統(tǒng)界面尺寸及控件設計規(guī)范第四節(jié)交互式圖標設計與制作第五節(jié)扁平化移動界面設計與制作UIDESIGN案例分析：此款iOS系統(tǒng)購票App界面采用扁平化卡片式形式，通過主次卡片在界面中的布局體現(xiàn)內(nèi)容的主次關系，視覺效果簡潔，傳達信息清晰。步驟1：啟動PhotoshopCC2018，執(zhí)行【文件】→【新建】命令，在【新建文檔】對話框中設置各項參數(shù)。步驟2：利用工具欄中的【矩形工具】【圓角矩形工具】【橢圓工具】，結合布爾運算繪制狀態(tài)欄圖標。步驟3：在工具欄中選擇【橫排文字工具】?編輯時間，字體采用【蘋方黑體-簡體-中粗】，字號設置為“31點”。步驟4：在工具欄中選擇【矩形工具】，繪制一個矩形，將其填充顏色設置為“R：245，G：245，B：245”。步驟5：在工具欄中選擇【矩形工具】，繪制一個矩形，將其填充顏色設置為“R：255，G：255，B：255”。步驟6：在工具欄中選擇【圓角矩形工具】，繪制一個圓角矩形，將其填充顏色設置為“R：255，G：255，B：255”。步驟7：選中“矩形1”圖層與“圓角矩形1”圖層，按【Ctrl】+【E】組合鍵合并形狀，將新圖層更名為“上部卡片背景”。步驟8：在工具欄中選擇【橫排文字工具】?編輯文字“FlightTicket”，字體采用【Arial-Bold】，字號設置為“64點”。步驟9：在工具欄中選擇【橢圓工具】，按住【Shift】鍵繪制一個正圓形，將其描邊填充顏色設置為“R：235，G：235，B：235”