《UI界面交互設(shè)計(jì)》完整課件

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

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

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

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

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