PhotoshopCC UI設(shè)計案例教程PPT完整全套教學(xué)課件

第1章初識UI設(shè)計本章介紹：隨著互聯(lián)網(wǎng)市場的逐漸成熟，企業(yè)對于UI設(shè)計從業(yè)人員的要求變得更加綜合，因此想要從事UI設(shè)計行業(yè)的人員需要系統(tǒng)地學(xué)習(xí)與更新自己的知識體系。本章對UI設(shè)計的行業(yè)現(xiàn)狀、相關(guān)概念、項目流程、風(fēng)格表現(xiàn)以及學(xué)習(xí)方法進(jìn)行系統(tǒng)講解。通過本章的學(xué)習(xí)，讀者可以對UI設(shè)計有一個宏觀的認(rèn)識，有助于高效、便利地進(jìn)行后續(xù)的UI設(shè)計工作。了解UI設(shè)計行業(yè)現(xiàn)狀掌握UI設(shè)計的基本概念熟練UI設(shè)計項目流程了解UI設(shè)計不同的風(fēng)格表現(xiàn)掌握UI設(shè)計的學(xué)習(xí)方法學(xué)習(xí)目標(biāo)UI設(shè)計的相關(guān)概念包括了UI設(shè)計的基本概念、UI與WUI和GUI的關(guān)系以及UI設(shè)計的常用術(shù)語和常用軟件。1.1UI設(shè)計的相關(guān)概念UI即UserInterface（用戶界面）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。優(yōu)秀的UI設(shè)計不僅要保證界面的美觀度，更要保證了交互設(shè)計（英文InteractionDesign,縮寫IxD）的可用性及用戶體驗（UserExperience，簡稱UE/UX）的友好度。

1.1.1UI設(shè)計的相關(guān)概念A(yù)pp界面展示在設(shè)計領(lǐng)域，UI現(xiàn)在被廣泛分為WUI和GUI。WUI全稱WebUserInterface，即網(wǎng)頁界面。在企業(yè)中，WUI設(shè)計師主要從事PC端網(wǎng)頁設(shè)計的工作。GUI全稱GraphicalUserInterface，即圖形用戶界面。因為移動端包含大量圖形用戶界面，因此在企業(yè)中，GUI設(shè)計師主要從事移動端App的設(shè)計工作

1.1.2

UI與WUI和GUIApp界面展示UI：（UserInterface）用戶界面。GUI：（GraphicsUserInterface）圖形用戶界面。HUI：（HandsetUserInterface）手持設(shè)備用戶界面。WUI：（WebUserInterface）網(wǎng)頁風(fēng)格用戶界面。IA:（InformationArchitect）信息架構(gòu)。UX/UE:（UserExperience）用戶體驗。

1.1.3

UI設(shè)計常用術(shù)語中英文對照

IxD:（InteractionDesign)交互設(shè)計。UED:（UserExperienceDesign)用戶體驗設(shè)計。UCD:（UserCenteredDesign）以用戶為中心的設(shè)計。UGD:（UserGrowthDesign）用戶增長設(shè)計。UR:（UserResearch）用戶研究。PM:（ProductManager）產(chǎn)品經(jīng)理。

1.1.3

UI設(shè)計常用術(shù)語中英文對照

1.1.4UI設(shè)計常用軟件

UI設(shè)計常用軟件分類無論是從0開始打造一個產(chǎn)品，還是對產(chǎn)品進(jìn)行迭代更新，一定要有不同技能的角色分工合作。想要保證以最高效的方式做出具備市場競爭力的產(chǎn)品，就一定需要規(guī)范的設(shè)計流程。

1.2

UI設(shè)計項目流程

項目設(shè)計流程UI設(shè)計流程針對整個產(chǎn)品的設(shè)計流程而言，UI設(shè)計僅是其中的一部分。一個產(chǎn)品從啟動到上線，會經(jīng)歷多個環(huán)節(jié)、由多個角色共同協(xié)作完成。每個角色基本都會有對應(yīng)的1個或多個環(huán)節(jié)。

1.2.1

項目設(shè)計流程

圖為大流程，下圖為展開流程，下圖中的橙色為多個角色共同協(xié)作完成UI設(shè)計師（UserInterfaceDesigner，UID），是公司中專門負(fù)責(zé)界面設(shè)計的職位。其負(fù)責(zé)的具體內(nèi)容包括界面設(shè)計、切圖標(biāo)注、動效制作等，UI設(shè)計師的主要交接文件是設(shè)計稿件與切圖標(biāo)注。

1.2.2

UI設(shè)計流程

UI設(shè)計流程圖

1.3

UI設(shè)計的風(fēng)格表現(xiàn)

UI設(shè)計的風(fēng)格在2017年由擬物化為主轉(zhuǎn)化到了以扁平化為主，因此UI設(shè)計的風(fēng)格主要可以分為擬物化和扁平化兩大類。擬物化（左）扁平化（右）

1.3

UI設(shè)計的風(fēng)格表現(xiàn)

1.擬物化風(fēng)格擬物化風(fēng)格主要通過高光、紋理、陰影等效果模擬現(xiàn)實物品的造型和質(zhì)感，將實物在UI設(shè)計中再現(xiàn)。擬物化圖標(biāo)

1.3

UI設(shè)計的風(fēng)格表現(xiàn)

2.扁平化風(fēng)格扁平化風(fēng)格去除了諸如透視、紋理、漸變等冗余、厚重和繁雜的裝飾效果，運用抽象、極簡和符號化的設(shè)計元素進(jìn)行表現(xiàn)。扁平化圖標(biāo)國內(nèi)UI設(shè)計行業(yè)歷經(jīng)了10年的發(fā)展，從相關(guān)崗位、能力要求以及薪資待遇等各方面都產(chǎn)生了巨大的變化。想要進(jìn)入UI設(shè)計行業(yè)，要先了解UI設(shè)計行業(yè)的現(xiàn)狀及發(fā)展趨勢。

1.4

UI設(shè)計的行業(yè)發(fā)展

隨著近10年的發(fā)展，國內(nèi)UI設(shè)計的市場規(guī)模不斷擴大，UI設(shè)計師的需求亦越發(fā)龐大，高級UI設(shè)計的專業(yè)人才緊缺。企業(yè)需求從原先單一地重視視覺美觀度已經(jīng)提升到了關(guān)注產(chǎn)品整體的用戶體驗。國內(nèi)諸如阿里巴巴、騰訊、網(wǎng)易等大型互聯(lián)網(wǎng)公司，都各自成立了用戶體驗設(shè)計部門，吸納了眾多UI設(shè)計類人才。

大型互聯(lián)網(wǎng)公司1.4.1

UI設(shè)計行業(yè)現(xiàn)狀1.地域特征由于政策引進(jìn)、網(wǎng)絡(luò)發(fā)展和人才聚集等原因，我國UI設(shè)計行業(yè)有著強烈的地域特征。目前，UI設(shè)計行業(yè)發(fā)展最為突出的地區(qū)依然是北京，其次是上海，深圳與杭州是僅次于北京、上海的熱門地區(qū)。

4大熱門城市及其他地區(qū)的UI設(shè)計師分布1.4.1

UI設(shè)計行業(yè)現(xiàn)狀2.行業(yè)分布大部分UI設(shè)計師都在互聯(lián)網(wǎng)公司從業(yè)，不少傳統(tǒng)行業(yè)的公司也已經(jīng)融入了互聯(lián)網(wǎng)技術(shù)，并開始招聘UI設(shè)計師，向互聯(lián)網(wǎng)+的方向發(fā)展。

UI設(shè)計行業(yè)分布1.4.1

UI設(shè)計行業(yè)現(xiàn)狀3.崗位細(xì)分得益于UI設(shè)計行業(yè)的加速發(fā)展，UI設(shè)計相關(guān)的崗位變得越來越細(xì)分化，演變出了不少新的崗位。

UI設(shè)計崗位細(xì)分1.4.1

UI設(shè)計行業(yè)現(xiàn)狀4.能力需求近年來，UI設(shè)計的能力需求早已從基礎(chǔ)的視覺規(guī)范、界面美觀上升到了產(chǎn)品的交互設(shè)計、用戶體驗層面，“全棧設(shè)計師”和“全鏈路設(shè)計師”的概念亦順應(yīng)能力需求而提出。UI設(shè)計師對能力的綜合性需求越來越高。

能力需求（以主流城市10000元+UI設(shè)計師為基準(zhǔn)）1.4.1

UI設(shè)計行業(yè)現(xiàn)狀5.薪酬待遇以熱門城市為基準(zhǔn)，UI設(shè)計師月薪在8000元以上的超過50%。影響UI設(shè)計師薪資的因素主要有工作崗位、過往經(jīng)歷、從業(yè)年限等。

UI設(shè)計行業(yè)待遇分布1.4.1

UI設(shè)計行業(yè)現(xiàn)狀從早期的專注于工具的技法型表現(xiàn)，到現(xiàn)在要求UI設(shè)計師參與到整個商業(yè)鏈條，兼顧商業(yè)目標(biāo)和用戶體驗，可以看出國內(nèi)的UI設(shè)計行業(yè)發(fā)展是跨躍式的。UI設(shè)計從設(shè)計風(fēng)格、技術(shù)實現(xiàn)到應(yīng)用領(lǐng)域都發(fā)生了巨大的變化。

UI設(shè)計發(fā)展趨勢1.4.2

UI設(shè)計發(fā)展趨勢1.技術(shù)實現(xiàn)虛擬現(xiàn)實、增強現(xiàn)實及人工智能等技術(shù)的發(fā)展，使得UI設(shè)計更加高效，交互亦更為豐富。2.設(shè)計風(fēng)格UI設(shè)計的風(fēng)格經(jīng)歷了由擬物化到扁平化設(shè)計的轉(zhuǎn)變，現(xiàn)在扁平化風(fēng)格依然為主流，但加入了MaterialDesign設(shè)計語言（材料設(shè)計語言，是由Google推出的全新設(shè)計語言），使設(shè)計更為醒目且細(xì)膩。3.應(yīng)用領(lǐng)域UI設(shè)計的應(yīng)用領(lǐng)域已由原先的PC端和移動端擴展到可穿戴設(shè)備、無人駕駛汽車、AI機器人等，更為廣闊。

1.4.2

UI設(shè)計發(fā)展趨勢對于UI設(shè)計的初學(xué)者來講，首先要明確市場現(xiàn)在到底需要什么樣的設(shè)計師，這樣才能有針對性的地學(xué)習(xí)提升。結(jié)合市場需求，我們推薦下列學(xué)習(xí)方法：1.軟件學(xué)習(xí) 軟件的學(xué)習(xí)是UI設(shè)計的剛需和基礎(chǔ)，設(shè)計師即使有再好的想法，但不能通過軟件制作出來也是徒勞。要我們主要需要掌握的軟件有Photoshop、Illustrator、AfterEffects、AxureRP和墨刀，有條件的設(shè)計師還可以學(xué)習(xí)Sketch和Principle。

UI設(shè)計需掌握的主流軟件1.5

UI設(shè)計的學(xué)習(xí)方法2.開拓眼界眼界的開拓至關(guān)重要，許多UI設(shè)計師無法做出美觀的界面就是沒有看到太多優(yōu)秀的設(shè)計。這里推薦3種方法助力設(shè)計師開拓眼界。第1種:閱讀優(yōu)秀設(shè)計師的文章，吸收優(yōu)秀設(shè)計師的經(jīng)驗。

iOS設(shè)計規(guī)范1.5

UI設(shè)計的學(xué)習(xí)方法Android設(shè)計規(guī)范第2種:閱讀優(yōu)秀書籍，系統(tǒng)的學(xué)習(xí)UI設(shè)計的相關(guān)知識和設(shè)計應(yīng)用方法。第3種:欣賞優(yōu)秀的作品，建議設(shè)計師每天拿出1-2小時到UI中國、站酷（ZCOOL）、追波(Dribbble)這些網(wǎng)站瀏覽最新的作品，并加入收藏，形成自己的資料庫。

網(wǎng)站推薦1.5

UI設(shè)計的學(xué)習(xí)方法

3.臨摹學(xué)習(xí)眼界開拓后，需要進(jìn)行相關(guān)的設(shè)計臨摹。臨摹的來源首先推崇的是從應(yīng)用中心下載優(yōu)秀的APP，截圖保存進(jìn)行臨摹，其次可以從第2步開拓眼界中的優(yōu)秀案例進(jìn)行臨摹。臨摹一定要保證完全一樣并且要多臨摹。4.項目實戰(zhàn)經(jīng)過一定的積累，最好通過一套完整的企業(yè)項目來提升。從原型圖到設(shè)計稿再到切圖標(biāo)注，甚至可以制作成動效Demo。一整套項目的實戰(zhàn)，會讓我們在設(shè)計能力上有質(zhì)的提升。1.5

UI設(shè)計的學(xué)習(xí)方法第2章圖標(biāo)設(shè)計

本章介紹：圖標(biāo)設(shè)計是UI設(shè)計中重要的組成部分，可以幫助用戶更好地理解產(chǎn)品的功能，是營造產(chǎn)品用戶體驗的關(guān)鍵一環(huán)。本章對圖標(biāo)的基礎(chǔ)知識、設(shè)計規(guī)范、風(fēng)格類型以及繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對圖標(biāo)設(shè)計有一個基本的認(rèn)識，并快速掌握繪制圖標(biāo)的規(guī)范和方法。了解圖標(biāo)設(shè)計的基礎(chǔ)知識掌握圖標(biāo)設(shè)計的規(guī)范認(rèn)識圖標(biāo)設(shè)計的風(fēng)格學(xué)習(xí)目標(biāo)掌握扁平化風(fēng)格-單色面性圖標(biāo)的繪制方法技能目標(biāo)本節(jié)介紹UI圖標(biāo)設(shè)計相關(guān)的基礎(chǔ)知識，包括圖標(biāo)的概念、圖標(biāo)設(shè)計的流程以及圖標(biāo)設(shè)計的原則。2.1圖標(biāo)的基礎(chǔ)知識圖標(biāo)的概念圖標(biāo)設(shè)計的流程圖標(biāo)設(shè)計的原則圖標(biāo)又稱為icon，是具有明確指代含義的計算機圖形。從廣義上講，圖標(biāo)是高度濃縮，并能快捷傳達(dá)信息，便于記憶的圖形符號。圖標(biāo)的應(yīng)用范圍很廣，包括軟件界面、硬件設(shè)備及公共場合等。從狹義上講，圖標(biāo)則多應(yīng)用于計算機軟件方面。其中，桌面圖標(biāo)是軟件標(biāo)識，界面中的圖標(biāo)是功能標(biāo)識。2.1.1圖標(biāo)的概念公共場所圖標(biāo)指示

界面中的圖標(biāo)Window10桌面圖標(biāo)圖標(biāo)設(shè)計可以按照分析調(diào)研、尋找隱喻、設(shè)計圖形、建立風(fēng)格、細(xì)節(jié)潤色、場景測試的流程來進(jìn)行。2.1.2圖標(biāo)設(shè)計的流程圖標(biāo)設(shè)計流程圖1.分析調(diào)研圖標(biāo)設(shè)計是根據(jù)品牌的調(diào)性、產(chǎn)品的功能而進(jìn)行的，不同場景的圖標(biāo)設(shè)計方法也會有區(qū)別。因此，設(shè)計圖標(biāo)之前要先分析需求，確定圖標(biāo)的功能，并進(jìn)行相關(guān)競品的調(diào)研，清楚設(shè)計方向。2.1.2圖標(biāo)設(shè)計的流程音樂類競品2.尋找隱喻隱喻通常表示從一種事物能聯(lián)想到另一種事物，如談到歌曲，會聯(lián)想到音樂符。尋找隱喻是圖標(biāo)設(shè)計的常用思路，在明確設(shè)計方向后，應(yīng)根據(jù)功能，通過頭腦風(fēng)暴找到相關(guān)的物品，進(jìn)行相關(guān)的元素的收集。2.1.2圖標(biāo)設(shè)計的流程QQ音樂圖標(biāo)的聯(lián)想過程3.設(shè)計圖形圖形的設(shè)計非常考驗圖標(biāo)設(shè)計師的基本功。通過隱喻收集相關(guān)的元素之后，需要設(shè)計師繪制一系列草圖，提煉設(shè)計出成型的圖形，并根據(jù)圖標(biāo)的規(guī)范在計算機上進(jìn)行微調(diào)。2.1.2圖標(biāo)設(shè)計的流程圖標(biāo)設(shè)計草圖4.建立風(fēng)格目前的圖標(biāo)設(shè)計風(fēng)格還是以擬物化和扁平化兩種為主，其中扁平化為當(dāng)今的流行趨勢。因此我們要結(jié)合前期的分析調(diào)研，建立符合需求的風(fēng)格。2.1.2圖標(biāo)設(shè)計的流程兩款音樂應(yīng)用圖標(biāo)不同的設(shè)計風(fēng)格5.細(xì)節(jié)潤色細(xì)節(jié)往往是區(qū)別于競品、建立產(chǎn)品氣質(zhì)的關(guān)鍵。細(xì)節(jié)潤色一般會從顏色、質(zhì)感甚至造型等方面入手，最終完成體現(xiàn)產(chǎn)品特點的圖標(biāo)設(shè)計。2.1.2圖標(biāo)設(shè)計的流程印度尼西亞標(biāo)志設(shè)計師YogaPerdana為圖標(biāo)進(jìn)行質(zhì)感調(diào)整6.場景測試為了讓圖標(biāo)適用于不同場景及不同分辨率的手機，還需要根據(jù)規(guī)范調(diào)整圖標(biāo)的分辨率，具體的規(guī)范會在2.2圖標(biāo)的設(shè)計規(guī)范進(jìn)行深入剖析。最后在上線前，還要將設(shè)計稿在不同的應(yīng)用場景中進(jìn)行測試，確保圖標(biāo)的可用性和識別度。2.1.2圖標(biāo)設(shè)計的流程不同應(yīng)用場景下的圖標(biāo)圖標(biāo)設(shè)計要遵循表意準(zhǔn)確、視覺統(tǒng)一、簡潔美觀、愉悅友好四大原則。1.設(shè)計準(zhǔn)確圖標(biāo)的設(shè)計準(zhǔn)確具體表現(xiàn)在表意準(zhǔn)確和造型準(zhǔn)確兩個方面。表意準(zhǔn)確是指在使用時，圖標(biāo)能夠快速傳達(dá)準(zhǔn)確的信息，被用戶理解而不會造成困惑。2.1.3圖標(biāo)設(shè)計的原則表意準(zhǔn)確的音樂類圖標(biāo)2.視覺統(tǒng)一圖標(biāo)設(shè)計需要在基本造型、風(fēng)格表現(xiàn)、節(jié)奏平衡上保持統(tǒng)一。在基本造型上，需要根據(jù)規(guī)范對圖標(biāo)各部分設(shè)計進(jìn)行統(tǒng)一。2.1.3圖標(biāo)設(shè)計的原則形體造型統(tǒng)一的圖標(biāo)（左）和形體造型未統(tǒng)一的圖標(biāo)（右）在風(fēng)格表現(xiàn)上，得益于移動互聯(lián)網(wǎng)的發(fā)展，圖標(biāo)的風(fēng)格非常多樣化。設(shè)計師可以根據(jù)應(yīng)用場景和產(chǎn)品情況選擇合適的風(fēng)格。需要注意，在進(jìn)行多色圖標(biāo)的設(shè)計時，用色盡量不要超過3種顏色，否則會導(dǎo)致用戶視覺混亂。2.1.3圖標(biāo)設(shè)計的原則App界面中風(fēng)格統(tǒng)一的圖標(biāo)在節(jié)奏平衡上，由于圖標(biāo)造型的豐富，可以根據(jù)規(guī)范給出的模版達(dá)到節(jié)奏協(xié)調(diào)、視覺統(tǒng)一的效果。2.1.3圖標(biāo)設(shè)計的原則在規(guī)范輔助下設(shè)計出視覺平衡的圖標(biāo)3.簡潔美觀圖標(biāo)的設(shè)計應(yīng)盡量保持圖形的簡潔，去掉多余的裝飾。將簡潔的圖形精細(xì)化設(shè)計，形成節(jié)奏。2.1.3圖標(biāo)設(shè)計的原則簡潔美觀的圖標(biāo)4.愉悅友好賦予圖標(biāo)適度的情感，令用戶不僅能快速實現(xiàn)目標(biāo)，更能體驗交互的喜悅。其中，為圖標(biāo)添加交互動效就是一種能快速賦予圖標(biāo)情感的表現(xiàn)手法。金融App界面中圖標(biāo)被賦予了細(xì)膩的動效。2.1.3圖標(biāo)設(shè)計的原則波蘭設(shè)計師KamilBachanek創(chuàng)作圖標(biāo)的設(shè)計規(guī)范主要是根據(jù)App中的iOS和Android兩個平臺的設(shè)計規(guī)范而來的。下面從圖標(biāo)尺寸及單位、圖標(biāo)的視覺統(tǒng)一、圖標(biāo)的清晰度3個方面詳細(xì)講解圖標(biāo)的設(shè)計規(guī)范。2.2圖標(biāo)的設(shè)計規(guī)范

圖標(biāo)尺寸及單位圖標(biāo)的視覺統(tǒng)一圖標(biāo)的清晰度1.iOS系統(tǒng)中的圖標(biāo)尺寸及單位在iOS系統(tǒng)中，圖標(biāo)主要分為應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩種，單位是px和pt。px即“像素”，是按照像素格計算的單位，也就是移動設(shè)備的實際像素。（1）應(yīng)用圖標(biāo)應(yīng)用圖標(biāo)是應(yīng)用程序的圖標(biāo)。應(yīng)用圖標(biāo)主要應(yīng)用于主屏幕、AppStore、Spotlight以及設(shè)置中。2.2.1圖標(biāo)的尺寸及單位

iOS系統(tǒng)中各類應(yīng)用圖標(biāo)應(yīng)用圖標(biāo)的設(shè)計尺寸可以采用1024px，并根據(jù)iOS官方模版進(jìn)行規(guī)范。正確的圖標(biāo)設(shè)計稿應(yīng)是直角矩形不帶圓角的，iOS會自動應(yīng)用一個圓角遮罩將圖標(biāo)的4個角遮住。

iOS官方模版2.2.1圖標(biāo)的尺寸及單位（2）系統(tǒng)圖標(biāo)系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，系統(tǒng)圖標(biāo)主要應(yīng)用于導(dǎo)航欄、工具欄以及標(biāo)簽欄。當(dāng)未找到符合需求的系統(tǒng)圖標(biāo)，UI設(shè)計師可以設(shè)計自定義圖標(biāo)。

系統(tǒng)圖標(biāo)2.2.1圖標(biāo)的尺寸及單位2.

Android系統(tǒng)中的圖標(biāo)尺寸及單位在Android系統(tǒng)中，圖標(biāo)主要分為應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩種，單位是dp。（1）應(yīng)用圖標(biāo)應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是品牌和產(chǎn)品的視覺表達(dá)，主要出現(xiàn)在主屏幕上。

Android系統(tǒng)中各類應(yīng)用圖標(biāo)2.2.1圖標(biāo)的尺寸及單位（2）系統(tǒng)圖標(biāo)系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，通過簡潔現(xiàn)代的圖形表達(dá)一些常見功能。Material

Design提供了一套完整的系統(tǒng)圖標(biāo)，同時設(shè)計師也可以根據(jù)產(chǎn)品的調(diào)性進(jìn)行自定義設(shè)計。

MaterialDesign官網(wǎng)提供的完整系統(tǒng)圖標(biāo)2.2.1圖標(biāo)的尺寸及單位MaterialDesign語言提供了4種不同的圖標(biāo)形狀供UI設(shè)計師參考，以保持視覺平衡。2.2.2圖標(biāo)的視覺統(tǒng)一

MaterialDesign官網(wǎng)提供的四類圖標(biāo)內(nèi)部結(jié)構(gòu)線邊角：邊角半徑默認(rèn)為2dp。內(nèi)角應(yīng)該是方形而不要使用圓形，圓角建議使用2dp。

邊角半徑為2dp的圖標(biāo)解析圖2.2.2圖標(biāo)的視覺統(tǒng)一描邊：系統(tǒng)圖標(biāo)使用2dp的描邊以保持圖標(biāo)的一致性。

描邊為2dp的圖標(biāo)解析圖2.2.2

圖標(biāo)的視覺統(tǒng)一描邊末端：描邊末端應(yīng)該是直線并帶有角度，留白區(qū)域的描邊粗細(xì)也應(yīng)該是2dp。描邊如果是傾斜45度，那么末端應(yīng)該也是傾斜45度為結(jié)束。

描邊末端為2dp的圖標(biāo)解析圖2.2.2圖標(biāo)的視覺統(tǒng)一視覺校正：如果系統(tǒng)圖標(biāo)需要設(shè)計復(fù)雜的細(xì)節(jié)，則可以進(jìn)行細(xì)微的調(diào)整以提高其清晰度。

復(fù)雜圖標(biāo)的視覺校正解析圖2.2.2圖標(biāo)的視覺統(tǒng)一設(shè)計時為保證圖標(biāo)清晰，需將軟件中X和Y坐標(biāo)設(shè)為整數(shù)，而不是小數(shù)，將圖標(biāo)“放在像素上”。

正確示例（左）和錯誤示例（右）2.2.3圖標(biāo)的清晰度從風(fēng)格表現(xiàn)上，圖標(biāo)可以分為像素風(fēng)格、扁平化風(fēng)格、擬物化風(fēng)格、微擬物風(fēng)格以及立體風(fēng)格。

2.3圖標(biāo)的風(fēng)格類型像素風(fēng)格扁平化風(fēng)格擬物化風(fēng)格微擬物風(fēng)格立體風(fēng)格像素風(fēng)格圖標(biāo)的本質(zhì)是由多個像素點組成的插圖，其本身是位圖。在早期的計算機界面、久遠(yuǎn)的游戲畫面中經(jīng)常使用像素風(fēng)格圖標(biāo)，因此像素風(fēng)格圖標(biāo)常會帶給用戶懷舊復(fù)古的體驗。

2.3.1像素風(fēng)格游戲中的像素圖標(biāo)扁平化風(fēng)格自2013年iOS7的推出而成為了設(shè)計的主流趨勢，扁平化風(fēng)格的圖標(biāo)也成為了界面圖標(biāo)的主導(dǎo)風(fēng)格。扁平化風(fēng)格的圖標(biāo)簡潔美觀、功能突出，可以細(xì)分為線性圖標(biāo)、面性圖標(biāo)和線面結(jié)合圖標(biāo)。

2.3.2扁平化風(fēng)格1.線性圖標(biāo)線性圖標(biāo)即通過統(tǒng)一的線條進(jìn)行繪制，表達(dá)圖標(biāo)的功能。線性圖標(biāo)經(jīng)常用于App界面底部的標(biāo)簽欄、導(dǎo)航欄的功能按鈕以及界面中的分類。

2.3.2扁平化風(fēng)格線性圖標(biāo)應(yīng)用于移動界面底部標(biāo)簽欄（左）和線性圖標(biāo)應(yīng)用于導(dǎo)航欄（右）圓角圖標(biāo)：圓角圖標(biāo)柔和、親切，一般用于母嬰、兒童以及女性等方面內(nèi)容。

2.3.2扁平化風(fēng)格圓角圖標(biāo)

2.3.2扁平化風(fēng)格直角圖標(biāo)：直角圖標(biāo)明快、果斷，一般用于金融以及工具等方面內(nèi)容。直角圖標(biāo)

2.3.2扁平化風(fēng)格斷點圖標(biāo)：斷點圖標(biāo)有趣、豐富，一般用于表現(xiàn)年輕、可愛等方面的內(nèi)容。斷點圖標(biāo)

2.3.2扁平化風(fēng)格高光式圖標(biāo)：高光式圖標(biāo)較傳統(tǒng)，一般用于銀行等方面的內(nèi)容。高光式圖標(biāo)

2.3.2扁平化風(fēng)格不透明度圖標(biāo)：不透明度圖標(biāo)有層次，適用范圍較廣。不透明度圖標(biāo)

2.3.2扁平化風(fēng)格雙色圖標(biāo)：雙色圖標(biāo)由兩種不同色彩的線搭配構(gòu)成，適用于表現(xiàn)可愛、活潑等方面的內(nèi)容。雙色圖標(biāo)

2.3.2扁平化風(fēng)格一筆畫圖標(biāo)：一筆畫圖標(biāo)較文藝，同時難度系數(shù)比較高，一般用于文化、藝術(shù)等方面的內(nèi)容。一筆畫圖標(biāo)

2.3.2扁平化風(fēng)格2.面性圖標(biāo)面性圖標(biāo)即填充圖標(biāo)，經(jīng)常用于App界面底部的標(biāo)簽欄、圖標(biāo)的選中狀態(tài)、以及界面中的金剛區(qū)（專指App頁面Banner下方的的功能入口導(dǎo)航區(qū)域）和界面中的重要分類。面性圖標(biāo)

2.3.2扁平化風(fēng)格單色面性圖標(biāo)：單色面性圖標(biāo)是最基本的面性圖標(biāo)，一般用于App界底部的標(biāo)簽欄以及圖標(biāo)的選中狀態(tài)。單色面性圖標(biāo)

2.3.2扁平化風(fēng)格不透明色塊面性圖標(biāo)：不透明色塊面性圖標(biāo)有層次，一般用于App界面中的金剛區(qū)，起到運營效果。不透明色塊面性圖標(biāo)

2.3.2扁平化風(fēng)格微漸變面性圖標(biāo)：微漸變面性圖標(biāo)有層次感，但不夠分明，一般用于App界面中的金剛區(qū)起到運營效果。微漸變面性圖標(biāo)

2.3.2扁平化風(fēng)格光影效果圖標(biāo)：光影效果圖標(biāo)帶有微擬物效果，一般用于App界面中的金剛區(qū)起到運營效果。光影效果圖標(biāo)

2.3.2扁平化風(fēng)格折紙投影圖標(biāo)：折紙投影圖標(biāo)帶有微擬物效果，一般用于App界面中的金剛區(qū)起到運營效果或直接用于工具類圖標(biāo)。折紙投影圖標(biāo)

2.3.2扁平化風(fēng)格多色面性圖標(biāo)：多色面性圖標(biāo)酷炫、多彩，一般用于生活等方面內(nèi)容。多色面性圖標(biāo)

2.3.2扁平化風(fēng)格3.線面結(jié)合圖標(biāo)線面結(jié)合圖標(biāo)是線性圖標(biāo)和面性圖標(biāo)的結(jié)合。線面結(jié)合圖標(biāo)經(jīng)常用于趣味性App界面中底部的標(biāo)簽欄、界面中的分類或是引導(dǎo)頁與彈框中。線面結(jié)合圖標(biāo)

2.3.2扁平化風(fēng)格線面結(jié)合圖標(biāo)充滿活力、形象有趣，又可以細(xì)分為點綴填充、錯位填充、全部填充3種。點綴填充：點綴填充圖標(biāo)，填充的面積約占圖標(biāo)的30%，一般用于App界面中的底部標(biāo)簽欄點綴填充圖標(biāo)

2.3.2扁平化風(fēng)格錯位填充：錯位填充圖標(biāo)，面與線進(jìn)行錯位，一般用于App界面中的底部標(biāo)簽欄。點綴填充圖標(biāo)

2.3.2扁平化風(fēng)格全部填充：全部填充圖標(biāo)，充實、飽滿，一般用于App界面中的分類或是引導(dǎo)頁與彈框中。全部填充圖標(biāo)

2.3.3擬物風(fēng)格擬物風(fēng)格在iOS6時代達(dá)到了流行的巔峰，擬物化風(fēng)格的圖標(biāo)對于現(xiàn)實的還原度較高，其質(zhì)感強烈、識別性高，但在功能表現(xiàn)上卻不如扁平化圖標(biāo)更直接。擬物風(fēng)格圖標(biāo)常用于工具類、游戲類應(yīng)用。擬物化風(fēng)格圖標(biāo)

2.3.4微擬物風(fēng)格微擬物風(fēng)格圖標(biāo)減輕了擬物風(fēng)格的厚重質(zhì)感，帶有基本的投影和陰影效果，介于擬物和扁平化風(fēng)格之間。微擬物圖標(biāo)常用于工具類應(yīng)用。微擬物風(fēng)格圖標(biāo)

2.3.5立體風(fēng)格立體風(fēng)格圖標(biāo)有別于傳統(tǒng)的平面圖標(biāo)，其具備強烈的體積感和空間感。活動專題頁、引導(dǎo)頁、空狀態(tài)經(jīng)常使用立體風(fēng)格的圖標(biāo)。立體風(fēng)格圖標(biāo)

2.3.5立體風(fēng)格立體風(fēng)格的圖標(biāo)視覺突出、層次分明，可以細(xì)分為3D圖標(biāo)和2.5D圖標(biāo)。?3D圖標(biāo)：3D圖標(biāo)真實、細(xì)致，一般用于游戲以及工具等方面內(nèi)容。3D圖標(biāo)

2.3.5立體風(fēng)格2.5D圖標(biāo)：2.5D圖標(biāo)現(xiàn)代、耐看，一般用于表現(xiàn)現(xiàn)代、有趣及文藝等方面內(nèi)容。3D圖標(biāo)

2.4課堂案例——繪制扁平化風(fēng)格-單色面性圖標(biāo)使用“圓角矩形”工具繪制床體，使用“圓角矩形”工具、“矩形”工具和“減去頂層形狀”命令繪制其他部分。效果圖課堂練習(xí)——繪制扁平化風(fēng)格-不透明色塊面性圖標(biāo)課堂練習(xí)——繪制扁平化風(fēng)格-微漸變面性圖標(biāo)2.5課堂練習(xí)2.5.1課堂練習(xí)——繪制扁平化風(fēng)格-不透明色塊面性圖標(biāo)使用“橢圓”工具繪制燈泡主體，使用“圓角矩形”工具和“多邊形”工具繪制其他部分。效果圖2.5.2課堂練習(xí)——繪制扁平化風(fēng)格-微漸變面性圖標(biāo)使用“漸變疊加”命令繪制背景，使用“多邊形”工具、“圓角矩形”工具、矩形工具、橢圓形工具和合并形狀命令、減去頂層形狀命令繪制其他部分。使用添加圖層蒙版命令和畫筆工具擦除不需要的部分。效果圖課后習(xí)題——繪制扁平化風(fēng)格-光影效果圖標(biāo)圖標(biāo)課后習(xí)題——繪制扁平化風(fēng)格-折紙投影圖標(biāo)2.6課后習(xí)題2.6.1課后習(xí)題——繪制扁平化風(fēng)格-光影效果圖標(biāo)圖標(biāo)使用“漸變疊加”命令繪制背景，使用“圓角矩形”工具、“矩形”工具、“橢圓形”工具和“合并形狀”命令、“減去頂層形狀”命令繪制其他部分。使用剪切蒙版命令置入漸變效果。效果圖2.6.2課后習(xí)題——繪制扁平化風(fēng)格-折紙投影圖標(biāo)使用“漸變疊加”命令繪制背景，使用“圓角矩形”工具、“矩形”工具、“橢圓形”工具和“減去頂層形狀”命令繪制其他部分，使用“剪切蒙版”命令置入漸變效果。效果圖第3章App界面設(shè)計本章介紹：界面是UI設(shè)計中最重要的部分，是最終呈現(xiàn)給用戶的結(jié)果，因此界面設(shè)計是涉及到版面布局、顏色搭配等內(nèi)容的綜合性工作。本章對App界面的基礎(chǔ)知識、設(shè)計規(guī)范、常用類型以及繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對App界面設(shè)計有一個基本的認(rèn)識，并快速掌握繪制App常用界面的規(guī)范和方法。了解App的基礎(chǔ)知識掌握App的設(shè)計規(guī)范認(rèn)識App常用界面類型學(xué)習(xí)目標(biāo)掌握社交類App-閃屏頁的繪制方法掌握社交類App-歡迎頁的繪制方法掌握社交類App-首頁的繪制方法掌握社交類App-消息列表頁的繪制方法掌握社交類App-聊天頁的繪制方法掌握社交類App-個人中心頁的繪制方法技能目標(biāo)本節(jié)介紹App相關(guān)的基礎(chǔ)知識，包括App的概念、App的流程以及App設(shè)計的原則。3.1App基礎(chǔ)知識App的概念A(yù)pp設(shè)計的流程App設(shè)計的原則App是應(yīng)用程序Application的縮寫，一般指智能手機的第三方應(yīng)用程序。用戶主要從應(yīng)用商店下載App，比較常用的應(yīng)用商店有蘋果的AppStore，華為應(yīng)用市場等。應(yīng)用程序的運行與系統(tǒng)密不可分，目前市場上，主要的智能手機操作系統(tǒng)有蘋果公司的iOS和谷歌公司的Android系統(tǒng)。對于UI設(shè)計師而言，要進(jìn)行移動界面設(shè)計工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)計知識。3.1.1App的概念A(yù)pp設(shè)計可以按照分析調(diào)研、交互設(shè)計、交互自查、界面設(shè)計、界面測試、設(shè)計驗證的步驟來進(jìn)行。3.1.2.App設(shè)計的流程App設(shè)計的流程圖1.分析調(diào)研App的設(shè)計是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行的，不同應(yīng)用領(lǐng)域的App，設(shè)計風(fēng)格也會有區(qū)別。因此，我們在設(shè)計之前應(yīng)該先分析需求，了解用戶特征，再進(jìn)行相關(guān)競品的調(diào)研，明確設(shè)計方向。3.1App基礎(chǔ)知識QQ音樂網(wǎng)易云音樂蝦米音樂2.交互設(shè)計交互設(shè)計是對整個App設(shè)計進(jìn)行初步構(gòu)思和流程制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型設(shè)計、架構(gòu)設(shè)計、流程圖設(shè)計、線框圖設(shè)計等具體工作。3.1App基礎(chǔ)知識App交互設(shè)計3.交互自查交互設(shè)計完成之后，進(jìn)行交互自查是整個App設(shè)計流程非常重要的一個階段。可以在執(zhí)行界面設(shè)計之前檢查出是否有遺漏缺失的細(xì)節(jié)問題。3.1App基礎(chǔ)知識交互自查表4.界面設(shè)計原型圖審查通過之后，就可以進(jìn)入界面的視覺設(shè)計階段了，這個階段的設(shè)計圖就是產(chǎn)品最終呈現(xiàn)給用戶的界面。3.1App基礎(chǔ)知識App界面5.界面測試界面測試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計人員和開發(fā)人員在此階段共同觀察、記錄。在測試中可以對設(shè)計的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。3.1App基礎(chǔ)知識App細(xì)節(jié)調(diào)整6.設(shè)計驗證設(shè)計驗證是最后一個階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗證前期的設(shè)計，并繼續(xù)優(yōu)化。3.1App基礎(chǔ)知識App界面優(yōu)化在進(jìn)行App設(shè)計時，需要遵循iOS和Android系統(tǒng)的規(guī)范，因此可以根據(jù)iOS下的設(shè)計原則以及Android系統(tǒng)下MaterialDesign語言中的設(shè)計原則進(jìn)行設(shè)計。1.iOS設(shè)計原則iOS系統(tǒng)設(shè)計有清晰、遵從、深度三大原則。3.1.3

App設(shè)計的原則（1）清晰在整個系統(tǒng)中，文字在各種尺寸上都要清晰易讀，圖標(biāo)精確而清晰，裝飾精巧且恰當(dāng)，令用戶更易理解功能。利用負(fù)空間、顏色、字體、圖形等界面元素巧妙地突出重要內(nèi)容，并傳達(dá)交互性。3.1.3

App設(shè)計的原則以色列設(shè)計師VladTyzun創(chuàng)作的App界面，各元素通過精心設(shè)計后，巧妙的突出重要內(nèi)容（2）遵從流暢的動畫和清晰美觀的界面可以幫助用戶理解內(nèi)容并與之互動，同時不干擾到用戶的使用。內(nèi)容一般填滿整個屏幕，而半透明和模糊效果通常暗示有更多內(nèi)容。最低限度地使用邊框、漸變和陰影可使界面輕盈，同時確保內(nèi)容明顯。3.1.3

App設(shè)計的原則以色列設(shè)計師VladTyzun創(chuàng)作的App界面，各元素通過精心設(shè)計后，巧妙的突出重要內(nèi)容（3）深度獨特的視覺層級和真實的動畫效果傳達(dá)層次結(jié)構(gòu)，賦予界面活力，并促進(jìn)用戶理解。令用戶通過觸摸和探索發(fā)現(xiàn)程序的功能，不僅會使用戶提高樂趣，更加方便用戶了解功能，還能使用戶關(guān)注到額外的內(nèi)容。在瀏覽內(nèi)容時，層級的過渡可提供深度感。3.1.3

App設(shè)計的原則烏克蘭設(shè)計公司CadabraStudio創(chuàng)作的App界面2.MaterialDesign設(shè)計原則MaterialDesign語言有材質(zhì)隱喻、大膽夸張、動效表意、靈活、跨平臺五大原則。（1）材質(zhì)隱喻MaterialDesign的靈感來自物理世界及其紋理，包括它們?nèi)绾畏瓷涔饩€和投射陰影。它對材料表面進(jìn)行了重新構(gòu)想，加入了紙張和墨水的特性。3.1.3

App設(shè)計的原則材質(zhì)隱喻（2）大膽夸張MaterialDesign以印刷設(shè)計方法中的排版、網(wǎng)格、空間、比例、顏色和圖像為指導(dǎo)，來創(chuàng)造視覺層次、視覺意義以及視覺焦點，使用戶沉浸其中。3.1.3

App設(shè)計的原則大膽夸張（3）動效表意通過微妙的反饋和平滑的過渡使動效保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時，它們在環(huán)境中轉(zhuǎn)換和重組，相互作用并產(chǎn)生新的變化。3.1.3

App設(shè)計的原則動效表意（4）靈活MaterialDesign系統(tǒng)旨在實現(xiàn)品牌表達(dá)。它與自定義代碼庫集成，允許無縫實現(xiàn)組件、插件和設(shè)計元素。3.1.3

App設(shè)計的原則靈活（3）深度獨特的視覺層級和真實的動畫效果傳達(dá)層次結(jié)構(gòu)，賦予界面活力，并促進(jìn)用戶理解。令用戶通過觸摸和探索發(fā)現(xiàn)程序的功能，不僅會使用戶提高樂趣，更加方便用戶了解功能，還能使用戶關(guān)注到額外的內(nèi)容。在瀏覽內(nèi)容時，層級的過渡可提供深度感。3.1.3

App設(shè)計的原則烏克蘭設(shè)計公司CadabraStudio創(chuàng)作的App界面（5）跨平臺MaterialDesign使用包括Android、iOS、Flutter和Web的共享組件跨平臺管理。3.1.3

App設(shè)計的原則跨平臺App設(shè)計的規(guī)范分為iOS設(shè)計規(guī)范和Android設(shè)計規(guī)范兩部分。3.2App設(shè)計的規(guī)范iOS設(shè)計規(guī)范Android設(shè)計規(guī)范iOS的基礎(chǔ)設(shè)計規(guī)范包括單位及尺寸、界面結(jié)構(gòu)、布局、字體4個方面。1.iOS設(shè)計單位及尺寸（1）相關(guān)單位?PPI:像素密度，英文全稱“PixelsPerinch”，簡稱“PPI”，是屏幕分辨率單位，表示的是每英寸所擁有的像素數(shù)量。屏幕密度越大，畫面越細(xì)膩。3.2.1iOS設(shè)計規(guī)范PPI的計算公式（X、Y分別為橫向、縱向的像素數(shù)）?Asset:比例因子，英文全稱“Asset”。標(biāo)準(zhǔn)分辨率顯示器具有1：1像素密度（或@1x），其中一個像素等于一個點。高分辨率顯示器具有更高的像素密度，比例因子為2.0或3.0（稱為@2x和@3x）。因此，高分辨率顯示器需要具有更多像素的圖像。一個10px×10px的標(biāo)準(zhǔn)分辨率（@1x）圖像，該圖像的@2x版本為20px×20px，@3x版本為30px×30px3.2.1iOS設(shè)計規(guī)范?邏輯像素和物理像素：邏輯像素，英文全稱“LogicPoint”，單位“點”，即“pt”，是根據(jù)內(nèi)容尺寸計算的單位。邏輯像素與物理像素的轉(zhuǎn)換3.2.1iOS設(shè)計規(guī)范（2）設(shè)計尺寸iOS常見的設(shè)備尺寸。在進(jìn)行界面設(shè)計稿時，為了一稿適配，都是以iPhone6/6s/7/8為基準(zhǔn)。使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch就建立375x667pt。iOS常見設(shè)備的尺寸iOS設(shè)計標(biāo)準(zhǔn)尺寸3.2.1iOS設(shè)計規(guī)范iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。iOS手機端界面結(jié)構(gòu)圖3.2.1iOS設(shè)計規(guī)范iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。iOS手機端界面結(jié)構(gòu)圖3.2.1iOS設(shè)計規(guī)范iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。iOSiPad界面結(jié)構(gòu)圖3.2.1iOS設(shè)計規(guī)范3.iOS布局(1)網(wǎng)格系統(tǒng)網(wǎng)格系統(tǒng)（GridSystems），又稱為柵格系統(tǒng)，是利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁面布局設(shè)計的方式，能使布局規(guī)范、簡潔、有秩序。網(wǎng)格系統(tǒng)3.2.1iOS設(shè)計規(guī)范(2)組成元素網(wǎng)格系統(tǒng)由列、水槽以及邊距3個元素組成。列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。組成元素（①列、②水槽、③邊距）3.2.1iOS設(shè)計規(guī)范(3)網(wǎng)格的運用?單元格：iOS的最小點擊區(qū)域是44pt，即88px（@2x）。因此，在適用性方面，能被整除的偶數(shù)4和8作為iOS最小單元格比較合適。其中4px容易將頁面切割細(xì)碎，所以比較推薦使用8px。單元格3.2.1iOS設(shè)計規(guī)范?列：列的數(shù)量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡潔頁面時使用，6、12和24基本滿足所有等分情況，然而24列將頁面切割太碎，因此實際使用還是以12列和6列為主。

列的使用3.2.1iOS設(shè)計規(guī)范?水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如24、32、40。其中32px（16pt@2x）最為常用。

水槽3.2.1iOS設(shè)計規(guī)范?邊距：邊距的寬度也可以與水槽有所區(qū)別。在iOS中以@2x為基準(zhǔn),常見的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)APP首選的邊距。

iOS中的設(shè)置及通用頁面都采用了30px的邊距3.2.1iOS設(shè)計規(guī)范4.

iOS字體(1)系統(tǒng)字體iOS英文使用的是SanFrancisco(SF)字體，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText適用與小于19pt的文字，SFUIDisplay適用于大于20pt的文字。中文使用的是蘋方，共有6個字重。

iOS系統(tǒng)字體3.2.1iOS設(shè)計規(guī)范

iOS系統(tǒng)APP的字體建議3.2.1iOS設(shè)計規(guī)范（2）字號大?。篿OS設(shè)計時要注意字號的大小。一般為了區(qū)分標(biāo)題和正文，字體大小差異至少保持在4px(2pt@2x),正文的合適行間距在1.5～2倍之間。Android系統(tǒng)基礎(chǔ)規(guī)范可以通過設(shè)計尺寸、界面結(jié)構(gòu)、基本布局、字體規(guī)范及圖標(biāo)規(guī)范5個方面進(jìn)行詳盡的剖析。3.2.2Android設(shè)計規(guī)范1.Android設(shè)計尺寸及單位（1）相關(guān)單位?

DPI:網(wǎng)點密度，英文全稱“DotPerinch”，簡稱“DPI”，是打印分辨率單位,表示每英寸打印的點。在移動設(shè)備上等同于PPI，表示的是每英寸所擁有的像素數(shù)量。通常PPI代表蘋果手機，DPI代表安卓手機。

DPI等同于PPI3.2.2Android設(shè)計規(guī)范?獨立密度像素與獨立縮放像素：獨立密度像素,英文全稱“Density-independentpixels”，簡稱“dp”，是安卓設(shè)備上的基本單位，等同于蘋果設(shè)備上的pt。

dp與px的轉(zhuǎn)換3.2.2Android設(shè)計規(guī)范獨立縮放像素，英文全稱“Scale-independentPixel”，簡稱“sp”，是Android設(shè)備上的字體單位。

sp等同于dp3.2.2Android設(shè)計規(guī)范（2）設(shè)計尺寸Android常見的設(shè)備尺寸。在進(jìn)行界面設(shè)計稿時，如果要一想一稿適配iOS，那就使用Photoshop新建720x1280px尺寸的畫布。如果根據(jù)MaterialDesign新規(guī)范單獨設(shè)計Android，那就使用Photoshop新建1080x1920px尺寸的畫布。無論哪種需求，使用Sketch只建立360x640dp即可。

Android常見的設(shè)備尺寸3.2.2Android設(shè)計規(guī)范2.

Android界面結(jié)構(gòu)Android界面主要由狀態(tài)欄、導(dǎo)航欄、頂部應(yīng)用欄組成。

Android界面結(jié)構(gòu)3.2.2Android設(shè)計規(guī)范3.

Android布局在iOS中已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中不再贅述，直接進(jìn)行Android中網(wǎng)格的布局。?單元格：Android的最小點擊區(qū)域是48dp，因此能被整除的偶數(shù)4和8作為Android最小單元格比較合適。

單元格3.2.2Android設(shè)計規(guī)范圖標(biāo)、排版和組件中的某些元素可以與4dp網(wǎng)格對齊。?列：列的數(shù)量在手機設(shè)備上推薦4列，在平板電腦上推薦8列。

列的數(shù)量，手機設(shè)備（左）平板電腦（右）與4dp網(wǎng)格對齊3.2.2Android設(shè)計規(guī)范水槽：水槽和邊距的寬度在手機設(shè)備上推薦16dp，平板電腦上推薦24dp。

手機設(shè)備、平板電腦水槽和邊距的寬度3.2.2Android設(shè)計規(guī)范邊距：邊距的寬度可以和水槽統(tǒng)一，也可以根據(jù)產(chǎn)品和水槽不同。當(dāng)Android中邊距的寬度和水槽不同時，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。

邊距的寬度3.2.2Android設(shè)計規(guī)范4.Android字體規(guī)范（1）系統(tǒng)字體Android英文使用的是Roboto字體，共有6個字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個字重。

思源黑體3.2.2Android設(shè)計規(guī)范（2）字號大小Android設(shè)計時要注意字號的大小。Android各元素以720x1280px為基準(zhǔn)設(shè)計，可以與iOS對應(yīng)，其常見的字號大小：24px、26px、28px、30px、32px、34px，36px等，最小字號為20px。

Android系統(tǒng)APP的字體建議3.2.2Android設(shè)計規(guī)范界面設(shè)計是產(chǎn)品用戶體驗里非常重要的一環(huán)。在App中，常用界面類型為閃屏頁、引導(dǎo)頁、首頁、個人中心頁、詳情頁以及注冊登錄頁。

3.3App常用界面類型閃屏頁引導(dǎo)頁首頁個人中心頁詳情頁注冊登錄頁閃屏頁又稱為“啟動頁”，是用戶點擊App應(yīng)用圖標(biāo)后，預(yù)先加載的一張圖片。閃屏頁承載了用戶對App的第一印象，是情感化設(shè)計的重要組成部分，其設(shè)計類型可以細(xì)分為品牌推廣型、活動廣告型、節(jié)日關(guān)懷型等。

3.3.1閃屏頁

3.3.1閃屏頁品牌推廣型閃屏頁

3.3.1閃屏頁活動廣告型閃屏頁

3.3.1閃屏頁節(jié)日關(guān)懷型閃屏頁引導(dǎo)頁是用戶第一次打開或經(jīng)過更新后打開App看到的一組圖片，通常由3~5頁組成。引導(dǎo)頁起到了在用戶使用App之前，提前幫助用戶快速了解App的主要功能和特點的作用，可以細(xì)分為功能說明型、產(chǎn)品推廣型、搞笑賣萌型。

3.3.2引導(dǎo)頁

3.3.2引導(dǎo)頁高德地圖App的功能說明型引導(dǎo)頁

京東商城App的產(chǎn)品推廣型引導(dǎo)頁3.3.2引導(dǎo)頁

搞笑賣萌型引導(dǎo)頁3.3.2引導(dǎo)頁首頁又稱為“起始頁”，是用戶使用App的第一頁。首頁承擔(dān)著流量分發(fā)的作用，是展現(xiàn)產(chǎn)品氣質(zhì)的關(guān)鍵頁面，可以細(xì)分為列表型、網(wǎng)格型、卡片型、綜合型。

3.3.3首頁

列表型首頁3.3.3首頁

網(wǎng)格型首頁3.3.3首頁

卡片型首頁3.3.3首頁

綜合型首頁3.3.3首頁個人中心頁是展示個人信息的頁面，主要由頭像和信息內(nèi)容組成。個人中心頁有時也會以抽屜打開的形式出現(xiàn)。

3.3.4個人中心頁淘寶（左）閑魚（中）滴滴出行（右）的個人中心頁詳情頁是展示App產(chǎn)品詳細(xì)信息，用于用戶產(chǎn)生消費的頁面。頁面內(nèi)容較豐富，以圖文信息為主。

3.3.5詳情頁京東商城（左）途牛（中）36Kr（右）的詳情頁注冊登錄頁是電商類、社交類等功能豐富型App的必要頁面。頁面設(shè)計直觀簡潔，并且提供第三方賬號登錄，國內(nèi)常見的第三方賬號有微博、微信、QQ等，國外常見的第三方賬號有Facebook、Twitter以及Google等。

3.3.6注冊登錄頁Done（左）智聯(lián)招聘（中）36Kr（右）注冊登錄頁使用“橢圓”工具和“圓角矩形”工具繪制圖形，使用“描邊”和“漸變疊加”命令為圖形添加效果，使用“剪貼蒙版”命令為圖片添加蒙版，使用“橫排文字”工具輸入文字。

3.4課堂案例——制作侃侃App效果圖

3.4課堂案例——制作侃侃App效果圖使用“直線”工具、“橢圓”工具和“圓角矩形”工具繪制圖形，使用“漸變疊加”命令為圖形添加效果，使用剪貼蒙版命令為圖片添加蒙版，使用“橫排文字”工具輸入文字。

3.5課堂練習(xí)——制作ShineApp效果圖

效果圖3.5課堂練習(xí)——制作ShineApp使用“直線”工具、“橢圓”工具和“圓角矩形”工具繪制圖形，使用“漸變疊加”命令為圖形添加效果，使用“剪貼蒙版”命令為圖片添加蒙版，使用“橫排文字”工具輸入文字。

3.6

課后習(xí)題——制作CircleApp效果圖

效果圖3.6課后習(xí)題——制作CircleApp第4章網(wǎng)頁界面設(shè)計本章介紹：由于設(shè)備的不同，網(wǎng)頁界面設(shè)計相對于App界面設(shè)計，有著更加豐富的內(nèi)容。本章對網(wǎng)頁界面的基礎(chǔ)知識、設(shè)計規(guī)范、常用類型以及繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對網(wǎng)頁界面設(shè)計有一個基本的認(rèn)識，并快速掌握繪制網(wǎng)頁常用界面的規(guī)范和方法。了解網(wǎng)頁界面設(shè)計的基礎(chǔ)知識掌握網(wǎng)頁界面設(shè)計的規(guī)范認(rèn)識網(wǎng)頁常用界面類型學(xué)習(xí)目標(biāo)掌握家居類網(wǎng)站-首頁的繪制方法掌握家居類網(wǎng)站-產(chǎn)品列表頁的繪制方法掌握家居類網(wǎng)站-產(chǎn)品詳情頁的繪制方法技能目標(biāo)網(wǎng)頁界面設(shè)計的概念網(wǎng)頁界面設(shè)計的流程網(wǎng)頁設(shè)計的原則4.1網(wǎng)頁界面設(shè)計基礎(chǔ)知識網(wǎng)頁界面設(shè)計的基礎(chǔ)知識包括了網(wǎng)頁界面設(shè)計的概念、網(wǎng)頁界面設(shè)計的流程以及網(wǎng)頁界面設(shè)計的原則。網(wǎng)頁界面設(shè)計（WebUIdesign，WUI），主要是根據(jù)企業(yè)希望向用戶傳遞的信息進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行頁面設(shè)計美化的工作。網(wǎng)頁界面設(shè)計涵蓋了制作和維護(hù)網(wǎng)站的許多不同的技能和學(xué)科，包含了信息架構(gòu)設(shè)計、網(wǎng)頁圖形設(shè)計、用戶界面設(shè)計、用戶體驗設(shè)計，以及品牌標(biāo)識設(shè)計和Banner設(shè)計等。4.1.1網(wǎng)頁界面設(shè)計的概念意大利設(shè)計師GiorgioSannino創(chuàng)作的網(wǎng)頁網(wǎng)頁界面的設(shè)計流程可以按照網(wǎng)站策劃、交互設(shè)計、交互自查、界面設(shè)計、界面測試、設(shè)計驗證的步驟來進(jìn)行。4.1.2網(wǎng)頁界面設(shè)計的流程網(wǎng)頁設(shè)計流程1.網(wǎng)站策劃網(wǎng)頁界面的設(shè)計是根據(jù)品牌的調(diào)性、網(wǎng)站的定位而進(jìn)行的，不同主題的網(wǎng)頁，設(shè)計風(fēng)格也會有區(qū)別。因此我們要先分析需求及功能，了解用戶特征，再進(jìn)行相關(guān)競品的調(diào)研，明確設(shè)計方向。4.1.2網(wǎng)頁界面設(shè)計的流程不同風(fēng)格網(wǎng)頁展示2.交互設(shè)計交互設(shè)計是對整個網(wǎng)站設(shè)計進(jìn)行初步構(gòu)思和確定的環(huán)節(jié)。一般需要進(jìn)行架構(gòu)設(shè)計、流程圖設(shè)計、低保真原型設(shè)計、線框圖設(shè)計等具體工作。為了方便后續(xù)的界面設(shè)計工作，低保真原型和線框圖的設(shè)計與制作應(yīng)直接在視覺設(shè)計軟件Photoshop或Sketch中進(jìn)行。4.1.2網(wǎng)頁界面設(shè)計的流程原型設(shè)計圖3.交互自查交互設(shè)計完成之后，進(jìn)行交互自查是整個網(wǎng)頁設(shè)計流程非常重要的一個階段?？梢栽谶M(jìn)行界面設(shè)計之前檢查出是否有遺漏缺失的細(xì)節(jié)問題，具體可以參考App界面設(shè)計中的交互自查。4.1.2網(wǎng)頁界面設(shè)計的流程4.界面設(shè)計線框圖審查通過，就可以進(jìn)入界面的視覺設(shè)計階段了，這個階段的設(shè)計圖就是產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計要求設(shè)計規(guī)范，圖片、文字內(nèi)容真實，并運用Axure、Principle等軟件或直接運用代碼語言制作成可交互的高保真原型，以便后續(xù)的界面測試。4.1.2網(wǎng)頁界面設(shè)計的流程荷蘭設(shè)計師DennisSnellenberg創(chuàng)作的網(wǎng)站界面5.界面測試界面測試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計人員和開發(fā)人員在此階段共同觀察、記錄。在測試中可以對設(shè)計的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。4.1.2網(wǎng)頁界面設(shè)計的流程Twitter經(jīng)過測試中的改版，提供了夜間模式的支持6.設(shè)計驗證設(shè)計驗證是最后一個階段，是為網(wǎng)站進(jìn)行優(yōu)化的重要支撐。在網(wǎng)站正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗證前期的設(shè)計，并繼續(xù)優(yōu)化。4.1.2網(wǎng)頁界面設(shè)計的流程數(shù)據(jù)分析產(chǎn)品網(wǎng)頁設(shè)計的原則可以分為直截了當(dāng)、簡化交互、足不出戶、提供邀請、巧用過渡、即時反應(yīng)六大原則。1.直截了當(dāng)直截了當(dāng)即“所見即所得”的直接操作原則。例如，讓用戶不要為了編輯內(nèi)容而打開另一個頁面，直接在頁面內(nèi)實現(xiàn)編輯。4.1.3網(wǎng)頁設(shè)計的原則直截了當(dāng)?shù)牟僮?.簡化交互充分理解用戶的意圖，令用戶操作簡便，不為用戶造成麻煩。通過使用頁面內(nèi)容中的操作工具，令操作和內(nèi)容更好的融合，從而簡化交互。4.1.3網(wǎng)頁設(shè)計的原則將交互操作和信息內(nèi)容進(jìn)行了更好的融合3.足不出戶任何頁面頻繁刷新和跳轉(zhuǎn)都會引起盲視，打斷用戶心流（英語：Flow，是一種將個人精神力完全投注在某種活動上的感覺）。適當(dāng)?shù)剡\用覆蓋層、嵌入層，虛擬頁面以及流程處理等方法。4.1.3網(wǎng)頁設(shè)計的原則列表嵌入層4.提供邀請邀請是用于引導(dǎo)用戶進(jìn)入下一個交互層次的暗示和提醒。例如“拖放”“行內(nèi)編輯”“上下文工具”等一大堆交互需要處理時，都面臨容易被用戶忽視的問題。所以向用戶提供預(yù)期功能邀請、引導(dǎo)操作邀請以及白板式邀請等邀請是順利完成人機交互的關(guān)鍵。4.1.3網(wǎng)頁設(shè)計的原則白板式邀請：在沒有活動時，通過醒目的按鈕邀請用戶創(chuàng)建活動5.巧用過渡在界面中，適當(dāng)?shù)募尤胍恍┓D(zhuǎn)、傳送帶以及滑入滑出等過渡效果，能讓界面生動有趣，同時也能向用戶揭示界面元素間的關(guān)系。4.1.3網(wǎng)頁設(shè)計的原則滑入滑出示例6.即時反應(yīng)即時反應(yīng)是用戶進(jìn)行了操作或者內(nèi)部數(shù)據(jù)發(fā)生了變化，系統(tǒng)立即給出對應(yīng)的反饋，如自動完成、實時建議、實時搜索等工具經(jīng)過適當(dāng)組合，就能為用戶帶來高度靈敏的界面。4.1.3網(wǎng)頁設(shè)計的原則實時搜索：隨著用戶輸入，實時顯示搜索結(jié)果網(wǎng)頁界面設(shè)計的基礎(chǔ)規(guī)范可以通過設(shè)計尺寸及單位、界面結(jié)構(gòu)、布局、字體及圖標(biāo)5個方面進(jìn)行詳盡的剖析。4.2網(wǎng)頁界面設(shè)計的規(guī)范網(wǎng)頁設(shè)計尺寸及單位網(wǎng)頁設(shè)計的界面結(jié)構(gòu)網(wǎng)頁設(shè)計的布局網(wǎng)頁設(shè)計的文字網(wǎng)頁設(shè)計的圖標(biāo)1.相關(guān)單位（1）英寸英寸（inch，in）是英式的長度單位，一般1英寸=2.54厘米。許多顯示設(shè)備經(jīng)常用英寸來表示大小。目前主流的臺式機顯示器尺寸一般為21.5、24、27、32英寸，目前主流的筆記本電腦尺寸一般為13.3、14、15.6英寸。27英寸的iMac4.2.1網(wǎng)頁設(shè)計尺寸及單位15.6英寸的MacBookPro（2）像素像素（pixel，px）是組成屏幕畫面最小的點。把屏幕中的圖像無限放大，會發(fā)現(xiàn)圖像是由一個個小點組成的，這些小點就是像素。使用Photoshop軟件設(shè)計界面的網(wǎng)頁設(shè)計師使用的單位都是px。在Photoshop中設(shè)置網(wǎng)頁界面的單位4.2.1網(wǎng)頁設(shè)計尺寸及單位（3）分辨率分辨率（resolution）即屏幕中像素的數(shù)量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩，如14英寸屏幕的分辨率是1366×768px，也有的是1920×1080px。1920×1080的顯示效果會比1366×768的好。1366*768px（左）1920*1080px（右）4.2.1網(wǎng)頁設(shè)計尺寸及單位屏幕分辨率（SCREENRESOLUTION）統(tǒng)計4.2.1網(wǎng)頁設(shè)計尺寸及單位2.設(shè)計尺寸（1）頁面寬度網(wǎng)頁中常見的尺寸及使用分布比例。在進(jìn)行界面設(shè)計時，結(jié)合市場占有率以及為了能夠適應(yīng)寬度至少為1920px的屏幕，都是以1920×1080px為基準(zhǔn)進(jìn)行設(shè)計的。使用Photoshop推薦創(chuàng)建寬度為1920px尺寸的畫布，高度根據(jù)網(wǎng)頁的要求設(shè)定即可。（2）安全寬度安全寬度即內(nèi)容安全區(qū)域，是一個承載頁面元素的固定寬度值，目的是確保網(wǎng)頁在不同計算機的分辨率下都可以正常顯示頁面中的元素。在寬度為1920px的設(shè)計尺寸中。寬度為1920px的設(shè)計中的安全寬度4.2.1網(wǎng)頁設(shè)計尺寸及單位（3）首屏高度當(dāng)用戶打開電腦或移動設(shè)備的瀏覽器時，在不滾動屏幕的情況下，第一眼看到的畫面就是首屏高度。通常首屏以上的頁面關(guān)注度為80.3%，首屏以下的頁面關(guān)注度僅有19.7%，因此首屏對網(wǎng)站設(shè)計有著極大的重要性。首屏高度需要去掉瀏覽器菜單欄以及狀態(tài)欄的高度。常用瀏覽器的狀態(tài)欄、菜單欄高度4.2.1網(wǎng)頁設(shè)計尺寸及單位網(wǎng)頁界面主要由頁頭、內(nèi)容主體、頁腳組成，其中頁頭包含了網(wǎng)站標(biāo)識、導(dǎo)航等元素，內(nèi)容主體包含了橫幅和內(nèi)容相關(guān)的信息，頁腳包含了導(dǎo)航、版權(quán)聲明等元素。網(wǎng)頁界面的結(jié)構(gòu)4.2.2網(wǎng)頁設(shè)計的界面結(jié)構(gòu)1.網(wǎng)格系統(tǒng)與App界面設(shè)計一樣，在網(wǎng)頁中，我們也可以利用一系列垂直和水平的參考線，將頁面分割成若干個有規(guī)律的列或格子，再以這些格子為基準(zhǔn)，進(jìn)行頁面的布局設(shè)計，使布局規(guī)范簡潔有秩序。網(wǎng)頁界面設(shè)計的網(wǎng)格系統(tǒng)4.2.3網(wǎng)頁設(shè)計的布局2.組成元素網(wǎng)頁設(shè)計的網(wǎng)格系統(tǒng)也由列、水槽和邊距3個元素組成。列是內(nèi)容放置的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。①列、②水槽以及③邊距4.2.3網(wǎng)頁設(shè)計的布局3.網(wǎng)格的運用（1）單元格常見的PC端網(wǎng)頁最小單位有4、6、8、10、12，目前主流計算機設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被8整除，同時以8px作為單元格，視覺上也是能感受到較為明顯的差異，因此推薦使用8px作為單元格的邊長。單元格4.2.3網(wǎng)頁設(shè)計的布局（2）列PC端常用的為12列和24列。12列在前端開發(fā)開源工具庫Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少的中后臺頁面設(shè)計。24列適用于業(yè)務(wù)信息量大、信息分組較多的中后臺頁面設(shè)計。移動端網(wǎng)頁則對應(yīng)以6列和12列為主。PC端的12列和24列4.2.3網(wǎng)頁設(shè)計的布局單列

雙列多列網(wǎng)頁4.2.3網(wǎng)頁設(shè)計的布局（3）水槽水槽以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如8、16、24、32、40。其中24px最為常用。水槽尺寸設(shè)置4.2.3網(wǎng)頁設(shè)計的布局（4）邊距邊距的設(shè)置通常是水槽的0、0.5、1.0、1.5、2.0等倍數(shù)。以1920px為例的設(shè)計稿，網(wǎng)格系統(tǒng)一般在1200px的安全區(qū)域進(jìn)行建立，此時內(nèi)容與屏幕左右邊緣已經(jīng)有了一定距離，邊距可以根據(jù)畫面美觀度及呼吸感進(jìn)行選擇。內(nèi)容于屏幕左右邊緣已經(jīng)有了距離4.2.3網(wǎng)頁設(shè)計的布局1.安全字體Web安全字體是用戶系統(tǒng)中自帶的字體，如Windows系統(tǒng)的微軟雅黑、Mac系統(tǒng)的蘋方。另外CSS定義了5種通用字體系列：Serif字體、Sans-serif字體、Monospace字體、Cursive字體、Fantasy字體。設(shè)計師可以大膽采用Web安全字體，常見的Web安全字體如圖。根據(jù)開發(fā)優(yōu)先級、設(shè)計美觀度，從高到低進(jìn)行排列4.2.4網(wǎng)頁設(shè)計的文字2.字號大小基于用戶計算機顯示器閱讀距離（50cm）以及最佳閱讀角度（0.3），14px字號能夠保證用戶在多數(shù)常用顯示器上的閱讀效率最佳。字號大小選擇4.2.4網(wǎng)頁設(shè)計的文字3.文字行高不同的字號應(yīng)設(shè)置對應(yīng)的行高，這樣才可以維持網(wǎng)頁中字體的秩序之美。文字行高設(shè)置4.2.4網(wǎng)頁設(shè)計的文字1.設(shè)計尺寸通常在1024×1024px的畫板中進(jìn)行制作，并留出64px的邊距，保證不同面積的圖標(biāo)有協(xié)調(diào)一致的視覺效果。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)設(shè)計尺寸2.設(shè)計元素AntDesign中將最常見的基本元素可以歸納為點、線、圓角、三角?；驹卦谑褂蒙系某叽?。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)AntDesign基本元素及尺寸?點：AntDesign建議，在點的尺寸選擇上保持16的倍數(shù)這一原則。常用點的4種尺寸分別為80、96、112、128。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)不同線的尺寸不同尺寸的點?線：AntDesign在線條之間的關(guān)系采用8的倍數(shù)原則，從小到大以8的規(guī)律遞增。常用線的4種尺寸分別為56、64、72、80。?圓角：AntDesign對于圓角采取的也是8的倍數(shù)原則，最常用的3種規(guī)格分別為8、16、32。其中圖標(biāo)內(nèi)角保持直角的處理方式。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)三角的尺寸圓角的尺寸?三角：AntDesign中的角度受到美式戰(zhàn)斗機F-14tomcat的啟發(fā)，將常用的角度定在約76度。3.視覺平衡AntDesign在圖標(biāo)造型、擺放角度以及留白空間3個方面，通過對基本元素規(guī)格上的微調(diào)來達(dá)到圖標(biāo)的平衡感。（1）圖標(biāo)造型：彎曲的線條在視覺上比豎直的線條看起來細(xì)，因此需要對72px尺寸的圓形外邊框上進(jìn)行4px的微調(diào)。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)圖標(biāo)造型帶來的微調(diào)（2）擺放角度：傾斜的線條同樣在視覺上會比豎直的線條看起來細(xì)，因此對傾斜的線條進(jìn)行4px的微調(diào)。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)擺放角度帶來的微調(diào)（3）留白空間：當(dāng)圖形的留白不足時，可通過調(diào)整線條的粗細(xì)來平衡視覺重量。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)留白空間帶來的微調(diào)4.使用原則為了支持響應(yīng)式設(shè)計，交付前端的圖標(biāo)，盡量使用SVG矢量格式圖標(biāo)，或?qū)D標(biāo)直接上傳到iconfont中，讓前端直接調(diào)用圖標(biāo)字體。4.2.5網(wǎng)頁設(shè)計的圖標(biāo)Iconfont阿里巴巴矢量圖標(biāo)庫網(wǎng)頁界面設(shè)計是影響整個網(wǎng)站用戶體驗的關(guān)鍵所在。在網(wǎng)頁設(shè)計中，常用界面類型為首頁、列表頁、詳情頁、專題頁、控制臺頁以及表單頁。4.3網(wǎng)頁常用界面類型首頁列表頁詳情頁專題頁控制臺頁表單頁1.首頁網(wǎng)站首頁，又稱為網(wǎng)站主頁，通常是用戶通過搜索引擎訪問網(wǎng)站時所看到的首張頁面。首頁是用戶了解網(wǎng)站的第一步，通常會包含產(chǎn)品展示圖、產(chǎn)品介紹信息、用戶登錄注冊入口等。4.3網(wǎng)頁常用界面類型首頁2.列表頁列表頁，又稱為“List頁”，是對信息進(jìn)行歸類管理，方便用戶能快速查看基本信息及操作的頁面。在列表頁中，設(shè)計的關(guān)鍵在于信息的可閱讀性及可操作性。4.3網(wǎng)頁常用界面類型列表頁3.詳情頁詳情頁是產(chǎn)品信息的主要承載頁面，對于信息效率和優(yōu)先級判定有一定的要求。清晰的布局能令用戶快速看到關(guān)鍵信息，提高決策效率。4.3網(wǎng)頁常用界面類型詳情頁4.專題頁專題頁是針對特定的主題而制作的頁面，頁面會包括網(wǎng)站相應(yīng)模塊、頻道所涉及的功能以及該主題事件的內(nèi)容。專題頁因為信息豐富，設(shè)計精美會吸引大量用戶。4.3網(wǎng)頁常用界面類型專題頁5.控制臺頁控制臺頁，又稱為“Dashboard”，集合了如數(shù)字、圖形以及文案等大量多樣化的信息，需要一目了然地將關(guān)鍵信息展示給用戶。在控制臺頁中，設(shè)計的關(guān)鍵是精簡清晰地向用戶展示龐大復(fù)雜的信息。4.3網(wǎng)頁常用界面類型控制臺頁6.表單頁表單頁通常用來執(zhí)行登錄、注冊、預(yù)定、下單、評論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁面模式。舒適的表單設(shè)計，可以引導(dǎo)用戶高效地完成表單背后的工作流程。4.3網(wǎng)頁常用界面類型控制臺頁4.4課堂案例——制作EasyLife家居電商網(wǎng)站課堂案例——制作EasyLife家居電商網(wǎng)站首頁課堂案例——制作EasyLife家居電商網(wǎng)站產(chǎn)品列表頁課堂案例——制作EasyLife家居電商網(wǎng)站產(chǎn)品詳情頁使用“矩形”工具添加底圖顏色，使用“置入”命令置入圖片，使用圖層蒙版調(diào)整圖片顯示區(qū)域，使用“橫排文字”工具添加文字，使用“多邊形”工具、“星形”工具和“直線”工具繪制基本形狀。4.4.1課堂案例——制作EasyLife家居電商網(wǎng)站首頁效果圖使用“置入”命令置入圖片，使用圖層蒙版調(diào)整圖片顯示區(qū)域，使用“橫排文字”工具添加文字，使用“矩形”工具和直線“直線”工具繪制基本形狀。4.4.2課堂案例——制作EasyLife家居電商網(wǎng)站產(chǎn)品列表頁效果圖使用“置入”命令置入圖片，使用圖層蒙版調(diào)整圖片顯示區(qū)域，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓形”工具和“直線”工具繪制基本形狀。4.4.3課堂案例——制作EasyLife家居電商網(wǎng)站產(chǎn)品詳情頁效果圖效果圖4.5課堂案例——制作Artsy家居電商網(wǎng)站使用“置入”命令置入圖片，使用圖層蒙版調(diào)整圖片顯示區(qū)域，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓形”工具和直線工具繪制基本形狀。效果圖4.6課后習(xí)題——制作裝飾家居電商網(wǎng)站使用“置入”命令置入圖片，使用圖層蒙版調(diào)整圖片顯示區(qū)域，使用“橫排文字”工具添加文字，使用“矩形”工具和“直線”工具繪制基本形狀。第5章軟件界面設(shè)計本章介紹：軟件界面設(shè)計泛指對軟件的使用界面進(jìn)行美化設(shè)計。本章針對PC軟件界面的基礎(chǔ)知識、設(shè)計規(guī)范、常用類型以及繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對PC軟件界面設(shè)計有一個基本的認(rèn)識，并快速掌握繪制PC軟件常用界面的規(guī)范和方法。了解軟件界面設(shè)計的基礎(chǔ)知識掌握軟件界面設(shè)計的規(guī)范認(rèn)識軟件界面常用界面類型學(xué)習(xí)目標(biāo)掌握音樂播放器軟件-首頁的繪制方法掌握音樂播放器軟件-歌單頁的繪制方法掌握音樂播放器軟件-歌曲列表頁的繪制方法技能目標(biāo)軟件界面設(shè)計的概念軟件界面設(shè)計的流程軟件界面設(shè)計的原則5.1軟件界面設(shè)計基礎(chǔ)知識軟件界面設(shè)計的基礎(chǔ)知識包括軟件界面設(shè)計的概念、軟件界面設(shè)計的流程以及軟件界面設(shè)計的原則。軟件界面（softwareinterface）設(shè)計是界面設(shè)計的一個分支，主要針對軟件的使用界面進(jìn)行交互操作邏輯、用戶情感化體驗、界面元素美觀的整體設(shè)計。具體工作內(nèi)容包括軟件啟動界面設(shè)計、軟件框架設(shè)計、圖標(biāo)設(shè)計等。5.1.1軟件界面設(shè)計的概念由波蘭設(shè)計師LukePachytel創(chuàng)作的軟件界面軟件界面的設(shè)計流程可以按照分析調(diào)研、交互設(shè)計、交互自查、視覺設(shè)計、設(shè)計測試、驗證總結(jié)的步驟來進(jìn)行。5.1.2軟件界面設(shè)計的流程軟件界面設(shè)計流程圖1.分析調(diào)研與App和網(wǎng)頁界面設(shè)計類似，軟件界面的設(shè)計也要先分析需求，明確設(shè)計方向。5.1.2軟件界面設(shè)計的流程不同風(fēng)格的軟件界面2.交互設(shè)計交互設(shè)計是對整個軟件設(shè)計進(jìn)行初步構(gòu)思和制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型、架構(gòu)設(shè)計、流程圖設(shè)計、線框圖設(shè)計等具體工作。5.1.2軟件界面設(shè)計的流程印度設(shè)計師GauthamMukesh創(chuàng)作的交互設(shè)計圖3.交互自查交互設(shè)計完成之后，進(jìn)行交互自查是整個軟件界面設(shè)計流程非常重要的一個階段。可以在執(zhí)行界面設(shè)計之前檢查出是否有遺漏缺失的細(xì)節(jié)問題，具體可以參考App中的交互自查。5.1.2軟件界面設(shè)計的流程4.視覺設(shè)計原型圖審查通過，就可以進(jìn)入視覺設(shè)計階段了，這個階段的設(shè)計圖即產(chǎn)品最終呈現(xiàn)給用戶的界面，設(shè)計要求與網(wǎng)頁設(shè)計類似。最后運用Axure、墨刀等軟件制作成可交互的高保真原型以便后續(xù)的設(shè)計測試。5.1.2軟件界面設(shè)計的流程印度設(shè)計師PareshKhatri制作可交互的高保真原型5.界面測試界面測試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計人員和開發(fā)人員在此階段共同觀察、記錄。在測試中可以對設(shè)計的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。5.1.2軟件界面設(shè)計的流程葡萄牙UX/UI設(shè)計師PedroRibeiro進(jìn)行軟件界面細(xì)節(jié)調(diào)整6.驗證總結(jié)驗證總結(jié)是最后一個階段，是為整套軟件進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗證前期的設(shè)計，并繼續(xù)優(yōu)化。5.1.2軟件界面設(shè)計的流程印度產(chǎn)品設(shè)計師DivanRaj設(shè)計師創(chuàng)作的軟件界面在進(jìn)行軟件界面設(shè)計時，我們主要針對計算機應(yīng)用界面、移動應(yīng)用界面、網(wǎng)頁界面以及游戲界面進(jìn)行設(shè)計。針對移動應(yīng)用界面、網(wǎng)頁界面設(shè)計原則，我們在前兩章中都已闡述，本節(jié)主要圍繞Windows系統(tǒng)下的FluentDesign語言（微軟于2017年開發(fā)的設(shè)計語言）中的設(shè)計原則進(jìn)行講解。FluentDesign有自適應(yīng)、共鳴、美觀三大原則。5.1.3軟件界面設(shè)計的原則1.自適應(yīng)：在每臺設(shè)備上都顯得自然FluentDes