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

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

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

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）用戶體驗(yàn)。

1.1.3

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

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

1.1.3

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

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

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

1.2

UI設(shè)計(jì)項(xiàng)目流程

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

1.2.1

項(xiàng)目設(shè)計(jì)流程

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

1.2.2

UI設(shè)計(jì)流程

UI設(shè)計(jì)流程圖

1.3

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

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

1.3

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

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

1.3

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

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

1.4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.4.2

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

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

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

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

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

網(wǎng)站推薦1.5

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

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

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

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

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

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è)計(jì)師可以設(shè)計(jì)自定義圖標(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)，通過簡(jiǎn)潔現(xiàn)代的圖形表達(dá)一些常見功能。Material

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

MaterialDesign官網(wǎng)提供的完整系統(tǒng)圖標(biāo)2.2.1圖標(biāo)的尺寸及單位MaterialDesign語言提供了4種不同的圖標(biāo)形狀供UI設(shè)計(jì)師參考，以保持視覺平衡。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è)計(jì)復(fù)雜的細(xì)節(jié)，則可以進(jìn)行細(xì)微的調(diào)整以提高其清晰度。

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

正確示例（左）和錯(cuò)誤示例（右）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ì)是由多個(gè)像素點(diǎn)組成的插圖，其本身是位圖。在早期的計(jì)算機(jī)界面、久遠(yuǎn)的游戲畫面中經(jīng)常使用像素風(fēng)格圖標(biāo)，因此像素風(fēng)格圖標(biāo)常會(huì)帶給用戶懷舊復(fù)古的體驗(yàn)。

2.3.1像素風(fēng)格游戲中的像素圖標(biāo)扁平化風(fēng)格自2013年iOS7的推出而成為了設(shè)計(jì)的主流趨勢(shì)，扁平化風(fēng)格的圖標(biāo)也成為了界面圖標(biāo)的主導(dǎo)風(fēng)格。扁平化風(fēng)格的圖標(biāo)簡(jiǎn)潔美觀、功能突出，可以細(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)用于移動(dò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)格斷點(diǎn)圖標(biāo)：斷點(diǎn)圖標(biāo)有趣、豐富，一般用于表現(xiàn)年輕、可愛等方面的內(nèi)容。斷點(diǎn)圖標(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ù)比較高，一般用于文化、藝術(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)：?jiǎn)紊嫘詧D標(biāo)是最基本的面性圖標(biāo)，一般用于App界底部的標(biāo)簽欄以及圖標(biāo)的選中狀態(tài)。單色面性圖標(biāo)

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

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

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

2.3.2扁平化風(fēng)格折紙投影圖標(biāo)：折紙投影圖標(biāo)帶有微擬物效果，一般用于App界面中的金剛區(qū)起到運(yùn)營(yíng)效果或直接用于工具類圖標(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ì)分為點(diǎn)綴填充、錯(cuò)位填充、全部填充3種。點(diǎn)綴填充：點(diǎn)綴填充圖標(biāo)，填充的面積約占圖標(biāo)的30%，一般用于App界面中的底部標(biāo)簽欄點(diǎn)綴填充圖標(biāo)

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

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

2.3.3擬物風(fēng)格擬物風(fēng)格在iOS6時(shí)代達(dá)到了流行的巔峰，擬物化風(fēng)格的圖標(biāo)對(duì)于現(xiàn)實(shí)的還原度較高，其質(zhì)感強(qiáng)烈、識(shí)別性高，但在功能表現(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)，其具備強(qiáng)烈的體積感和空間感。活動(dòng)專題頁、引導(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)真實(shí)、細(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è)計(jì)本章介紹：界面是UI設(shè)計(jì)中最重要的部分，是最終呈現(xiàn)給用戶的結(jié)果，因此界面設(shè)計(jì)是涉及到版面布局、顏色搭配等內(nèi)容的綜合性工作。本章對(duì)App界面的基礎(chǔ)知識(shí)、設(shè)計(jì)規(guī)范、常用類型以及繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對(duì)App界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制App常用界面的規(guī)范和方法。了解App的基礎(chǔ)知識(shí)掌握App的設(shè)計(jì)規(guī)范認(rèn)識(shí)App常用界面類型學(xué)習(xí)目標(biāo)掌握社交類App-閃屏頁的繪制方法掌握社交類App-歡迎頁的繪制方法掌握社交類App-首頁的繪制方法掌握社交類App-消息列表頁的繪制方法掌握社交類App-聊天頁的繪制方法掌握社交類App-個(gè)人中心頁的繪制方法技能目標(biāo)本節(jié)介紹App相關(guān)的基礎(chǔ)知識(shí)，包括App的概念、App的流程以及App設(shè)計(jì)的原則。3.1App基礎(chǔ)知識(shí)App的概念A(yù)pp設(shè)計(jì)的流程App設(shè)計(jì)的原則App是應(yīng)用程序Application的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序。用戶主要從應(yīng)用商店下載App，比較常用的應(yīng)用商店有蘋果的AppStore，華為應(yīng)用市場(chǎng)等。應(yīng)用程序的運(yùn)行與系統(tǒng)密不可分，目前市場(chǎng)上，主要的智能手機(jī)操作系統(tǒng)有蘋果公司的iOS和谷歌公司的Android系統(tǒng)。對(duì)于UI設(shè)計(jì)師而言，要進(jìn)行移動(dòng)界面設(shè)計(jì)工作，需要分別學(xué)習(xí)兩大系統(tǒng)的界面設(shè)計(jì)知識(shí)。3.1.1App的概念A(yù)pp設(shè)計(jì)可以按照分析調(diào)研、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、界面測(cè)試、設(shè)計(jì)驗(yàn)證的步驟來進(jìn)行。3.1.2.App設(shè)計(jì)的流程App設(shè)計(jì)的流程圖1.分析調(diào)研App的設(shè)計(jì)是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行的，不同應(yīng)用領(lǐng)域的App，設(shè)計(jì)風(fēng)格也會(huì)有區(qū)別。因此，我們?cè)谠O(shè)計(jì)之前應(yīng)該先分析需求，了解用戶特征，再進(jìn)行相關(guān)競(jìng)品的調(diào)研，明確設(shè)計(jì)方向。3.1App基礎(chǔ)知識(shí)QQ音樂網(wǎng)易云音樂蝦米音樂2.交互設(shè)計(jì)交互設(shè)計(jì)是對(duì)整個(gè)App設(shè)計(jì)進(jìn)行初步構(gòu)思和流程制定的環(huán)節(jié)。一般需要進(jìn)行紙面原型設(shè)計(jì)、架構(gòu)設(shè)計(jì)、流程圖設(shè)計(jì)、線框圖設(shè)計(jì)等具體工作。3.1App基礎(chǔ)知識(shí)App交互設(shè)計(jì)3.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查是整個(gè)App設(shè)計(jì)流程非常重要的一個(gè)階段?？梢栽趫?zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏缺失的細(xì)節(jié)問題。3.1App基礎(chǔ)知識(shí)交互自查表4.界面設(shè)計(jì)原型圖審查通過之后，就可以進(jìn)入界面的視覺設(shè)計(jì)階段了，這個(gè)階段的設(shè)計(jì)圖就是產(chǎn)品最終呈現(xiàn)給用戶的界面。3.1App基礎(chǔ)知識(shí)App界面5.界面測(cè)試界面測(cè)試階段是讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此階段共同觀察、記錄。在測(cè)試中可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。3.1App基礎(chǔ)知識(shí)App細(xì)節(jié)調(diào)整6.設(shè)計(jì)驗(yàn)證設(shè)計(jì)驗(yàn)證是最后一個(gè)階段，是為App進(jìn)行優(yōu)化的重要支撐。在產(chǎn)品正式上線后，通過用戶的數(shù)據(jù)反饋進(jìn)行記錄，驗(yàn)證前期的設(shè)計(jì)，并繼續(xù)優(yōu)化。3.1App基礎(chǔ)知識(shí)App界面優(yōu)化在進(jìn)行App設(shè)計(jì)時(shí)，需要遵循iOS和Android系統(tǒng)的規(guī)范，因此可以根據(jù)iOS下的設(shè)計(jì)原則以及Android系統(tǒng)下MaterialDesign語言中的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)。1.iOS設(shè)計(jì)原則iOS系統(tǒng)設(shè)計(jì)有清晰、遵從、深度三大原則。3.1.3

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

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

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

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

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

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

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

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

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

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

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

水槽3.2.1iOS設(shè)計(jì)規(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è)計(jì)規(guī)范4.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.3.1閃屏頁

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

3.3.1閃屏頁活動(dòng)廣告型閃屏頁

3.3.1閃屏頁節(jié)日關(guān)懷型閃屏頁引導(dǎo)頁是用戶第一次打開或經(jīng)過更新后打開App看到的一組圖片，通常由3~5頁組成。引導(dǎo)頁起到了在用戶使用App之前，提前幫助用戶快速了解App的主要功能和特點(diǎn)的作用，可以細(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首頁個(gè)人中心頁是展示個(gè)人信息的頁面，主要由頭像和信息內(nèi)容組成。個(gè)人中心頁有時(shí)也會(huì)以抽屜打開的形式出現(xiàn)。

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

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

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

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

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