《Photoshop CC UI設(shè)計(jì)案例教程（第2版）》全套教學(xué)課件

全套可編輯PPT課件本章介紹：

隨著互聯(lián)網(wǎng)市場(chǎng)的逐漸成熟，企業(yè)對(duì)于UI設(shè)計(jì)從業(yè)人員的要求變得更加全面，因此想要從事UI設(shè)計(jì)工作的人員需要系統(tǒng)地學(xué)習(xí)知識(shí)并更新自己的知識(shí)體系。本章對(duì)UI設(shè)計(jì)的相關(guān)概念、常用軟件、項(xiàng)目流程、風(fēng)格表現(xiàn)、行業(yè)發(fā)展以及學(xué)習(xí)方法進(jìn)行系統(tǒng)講解。通過對(duì)本章的學(xué)習(xí)，讀者可以對(duì)UI設(shè)計(jì)有一個(gè)宏觀的認(rèn)識(shí)，這有助于讀者高效、便利地進(jìn)行后續(xù)的UI設(shè)計(jì)工作。第1章初識(shí)UI設(shè)計(jì)全套可編輯PPT課件明確UI設(shè)計(jì)的相關(guān)概念熟悉UI設(shè)計(jì)的常用軟件了解UI設(shè)計(jì)的行業(yè)發(fā)展知識(shí)目標(biāo)全套可編輯PPT課件掌握UI設(shè)計(jì)的項(xiàng)目流程掌握UI設(shè)計(jì)的風(fēng)格表現(xiàn)掌握UI設(shè)計(jì)的學(xué)習(xí)方法能力目標(biāo)全套可編輯PPT課件培養(yǎng)學(xué)習(xí)UI設(shè)計(jì)的興趣培養(yǎng)獲取UI設(shè)計(jì)新知識(shí)、新技能、新方法的基本能力樹立文化自信、職業(yè)自信素質(zhì)目標(biāo)全套可編輯PPT課件1.1?UI設(shè)計(jì)的相關(guān)概念UI設(shè)計(jì)的基本概念UI與WUI和GUI的關(guān)系UI設(shè)計(jì)常用術(shù)語(yǔ)中英文對(duì)照全套可編輯PPT課件用戶界面（UserInterface，UI）設(shè)計(jì)，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面樣式進(jìn)行整體設(shè)計(jì)。優(yōu)秀的UI設(shè)計(jì)不僅要保證界面的美觀，更要保證交互設(shè)計(jì)（InteractionDesign，IaD）的高可用性及用戶體驗(yàn)（UserExperience，UE）的高友好度。1.1.1

UI設(shè)計(jì)的基本概念全套可編輯PPT課件在設(shè)計(jì)領(lǐng)域，UI現(xiàn)在被廣泛分為Web用戶界面（WebUserInterface，WUI）和圖形用戶界面（GraphicalUserInterface，GUI）。在企業(yè)中，WUI設(shè)計(jì)師主要從事個(gè)人計(jì)算機(jī)（PersonalComputer，PC）端網(wǎng)頁(yè)設(shè)計(jì)的工作。由于移動(dòng)端包含大量GUI，因此在企業(yè)中，GUI設(shè)計(jì)師主要從事移動(dòng)端App的設(shè)計(jì)工作。1.1.2UI與WUI和GUI的關(guān)系全套可編輯PPT課件UI：全稱為UserInterface，即用戶界面。GUI：全稱為GraphicalUserInterface，即圖形用戶界面。HUI：全稱為HandsetUserInterface，即手持設(shè)備用戶界面。WUI：全稱為WebUserInterface，即網(wǎng)絡(luò)用戶界面。IA：全稱為InformationArchitect，即信息架構(gòu)師。UE/UX：全稱為UserExperience，即用戶體驗(yàn)。1.1.3UI設(shè)計(jì)常用術(shù)語(yǔ)中英文對(duì)照ID：全稱為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.3UI設(shè)計(jì)常用術(shù)語(yǔ)中英文對(duì)照1.2?UI設(shè)計(jì)的常用軟件UI設(shè)計(jì)常用軟件分類1.3?短視頻的特點(diǎn)產(chǎn)品設(shè)計(jì)流程UI設(shè)計(jì)流程無(wú)論是從零開始打造一個(gè)產(chǎn)品，還是對(duì)產(chǎn)品進(jìn)行迭代更新，一定要讓擁有不同技能的角色分工合作。要想保證以最高效的方式做出具備市場(chǎng)競(jìng)爭(zhēng)力的產(chǎn)品，就一定需要規(guī)范的設(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)的一個(gè)或多個(gè)環(huán)節(jié)。1.3.1產(chǎn)品設(shè)計(jì)流程上圖為大流程，下圖為展開流程UI設(shè)計(jì)師是公司中專門負(fù)責(zé)界面設(shè)計(jì)的人員。其負(fù)責(zé)的具體內(nèi)容包括界面設(shè)計(jì)、切圖標(biāo)注、動(dòng)效制作等，UI設(shè)計(jì)師的主要交接文件是設(shè)計(jì)稿件與切圖標(biāo)注文件。1.3.2UI設(shè)計(jì)流程UI設(shè)計(jì)流程圖1.4?UI設(shè)計(jì)的風(fēng)格表現(xiàn)UI設(shè)計(jì)的風(fēng)格在2017年由以擬物化為主轉(zhuǎn)化到以扁平化為主，因此UI設(shè)計(jì)的風(fēng)格主要可以分為擬物化和扁平化兩大類。擬物化（左）扁平化（右）1.擬物化風(fēng)格擬物化風(fēng)格主要通過高光、紋理、陰影等效果模擬現(xiàn)實(shí)物品的造型和質(zhì)感，將實(shí)物在UI設(shè)計(jì)中再現(xiàn)。1.4UI設(shè)計(jì)的風(fēng)格表現(xiàn)擬物化圖標(biāo)2.扁平化風(fēng)格扁平化風(fēng)格去除了諸如透視、紋理、漸變等冗余、厚重和繁雜的裝飾效果，運(yùn)用抽象、極簡(jiǎn)和符號(hào)化的設(shè)計(jì)元素進(jìn)行表現(xiàn)。1.4UI設(shè)計(jì)的風(fēng)格表現(xiàn)扁平化圖標(biāo)國(guó)內(nèi)UI設(shè)計(jì)行業(yè)經(jīng)歷了多年的發(fā)展，在相關(guān)崗位、能力需求以及薪資待遇等方面都產(chǎn)生了巨大的變化。想要進(jìn)入U(xiǎn)I設(shè)計(jì)行業(yè)，要先了解UI設(shè)計(jì)行業(yè)的現(xiàn)狀及發(fā)展趨勢(shì)。1.5UI設(shè)計(jì)的行業(yè)發(fā)展UI設(shè)計(jì)行業(yè)現(xiàn)狀UI設(shè)計(jì)發(fā)展趨勢(shì)隨著多年的發(fā)展，國(guó)內(nèi)UI設(shè)計(jì)的市場(chǎng)規(guī)模不斷擴(kuò)大，對(duì)UI設(shè)計(jì)師的需求亦不斷提高，UI設(shè)計(jì)專業(yè)人才緊缺。企業(yè)需求從原先單一地重視視覺美觀度提升到了關(guān)注產(chǎn)品整體的用戶體驗(yàn)。國(guó)內(nèi)諸如阿里巴巴、騰訊、網(wǎng)易等大型互聯(lián)網(wǎng)公司，都各自成立了用戶體驗(yàn)設(shè)計(jì)部門，吸納了眾多UI設(shè)計(jì)類人才。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀大型互聯(lián)網(wǎng)公司1.地域分布由于網(wǎng)絡(luò)發(fā)展和人才聚集等原因，我國(guó)UI設(shè)計(jì)行業(yè)有著明顯的地域特征。目前，UI設(shè)計(jì)行業(yè)發(fā)展最為突出的地區(qū)依然是北京，其次是上海，廣州、深圳與杭州是僅次于北京、上海的熱門地區(qū)。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀2.企業(yè)類型大部分UI設(shè)計(jì)師都在民營(yíng)、私企類型公司就業(yè)，同時(shí)不少傳統(tǒng)行業(yè)的公司也已經(jīng)融入了互聯(lián)網(wǎng)，并開始招聘UI設(shè)計(jì)師，向“互聯(lián)網(wǎng)+”的方向發(fā)展。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀3.崗位細(xì)分得益于UI設(shè)計(jì)行業(yè)的快速發(fā)展，UI設(shè)計(jì)相關(guān)的崗位變得越來(lái)越細(xì)分化，演變出了很多與UI設(shè)計(jì)相關(guān)的崗位，如交互設(shè)計(jì)師、視覺設(shè)計(jì)師、用戶研究員、運(yùn)營(yíng)設(shè)計(jì)師、產(chǎn)品經(jīng)理等。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀數(shù)據(jù)與圖片來(lái)源于《2021中國(guó)用戶體驗(yàn)行業(yè)發(fā)展報(bào)告》4.能力需求近年來(lái)，業(yè)界對(duì)UI設(shè)計(jì)師的能力需求早已從基礎(chǔ)的視覺規(guī)范、界面美觀上升到了產(chǎn)品的交互設(shè)計(jì)、用戶體驗(yàn)層面，“全棧設(shè)計(jì)師”和“全鏈路設(shè)計(jì)師”的概念亦順應(yīng)能力需求的提高而提出。業(yè)界對(duì)UI設(shè)計(jì)師能力的綜合性需求越來(lái)越高。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀數(shù)據(jù)與圖片來(lái)源于《2021中國(guó)用戶體驗(yàn)行業(yè)發(fā)展報(bào)告》5.薪酬待遇以熱門城市為基準(zhǔn)，UI設(shè)計(jì)師年薪逐年增加。影響UI設(shè)計(jì)師薪酬待遇的因素主要有崗位類型、學(xué)歷、經(jīng)驗(yàn)以及從業(yè)年限等。1.5.1UI設(shè)計(jì)行業(yè)現(xiàn)狀數(shù)據(jù)與圖片來(lái)源于《2021中國(guó)用戶體驗(yàn)行業(yè)發(fā)展報(bào)告》從早期的專注于工具的技法型表現(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ā)生了巨大的變化。1.5.2UI設(shè)計(jì)發(fā)展趨勢(shì)UI設(shè)計(jì)發(fā)展趨勢(shì)1.技術(shù)實(shí)現(xiàn)隨著科學(xué)技術(shù)的快速發(fā)展，承載UI的媒介也由傳統(tǒng)的計(jì)算機(jī)、手機(jī)等擴(kuò)展到可穿戴設(shè)備。相信虛擬現(xiàn)實(shí)、增強(qiáng)現(xiàn)實(shí)及其他人工智能技術(shù)的發(fā)展，必然會(huì)使得UI設(shè)計(jì)更加高效，交互更為豐富，并帶來(lái)更多的可能性。2.設(shè)計(jì)風(fēng)格UI設(shè)計(jì)的風(fēng)格經(jīng)歷了由擬物化到扁平化的轉(zhuǎn)變，現(xiàn)在扁平化風(fēng)格依然為主流，但加入了材料設(shè)計(jì)（MaterialDesign）語(yǔ)言，使設(shè)計(jì)更為醒目、細(xì)膩。3.應(yīng)用領(lǐng)域UI設(shè)計(jì)的應(yīng)用領(lǐng)域已由原先的PC端和移動(dòng)端擴(kuò)展到可穿戴設(shè)備、無(wú)人駕駛汽車、AI機(jī)器人等，更為廣闊。1.5.2UI設(shè)計(jì)發(fā)展趨勢(shì)UI設(shè)計(jì)的初學(xué)者，首先要明確市場(chǎng)現(xiàn)在到底需要什么樣的設(shè)計(jì)師，這樣才能有針對(duì)性地學(xué)習(xí)、提升。結(jié)合市場(chǎng)需求，我們推薦下列學(xué)習(xí)方法。1.整體學(xué)習(xí)整體學(xué)習(xí)是指進(jìn)行相關(guān)課程學(xué)習(xí)及文章學(xué)習(xí)，針對(duì)初學(xué)者建議進(jìn)行課程學(xué)習(xí)，這樣可以系統(tǒng)學(xué)習(xí)UI的相關(guān)知識(shí)和設(shè)計(jì)應(yīng)用方法。1.6UI設(shè)計(jì)的學(xué)習(xí)方法

iOS系統(tǒng)界面設(shè)計(jì)規(guī)范

Android系統(tǒng)界面設(shè)計(jì)規(guī)范2.作品收集建議設(shè)計(jì)師每天拿出1～2小時(shí)到UI中國(guó)、站酷（ZCOOL）、追波（Dribbble）等網(wǎng)站，瀏覽最新的作品，并將其加入收藏，形成自己的資料庫(kù)。1.6UI設(shè)計(jì)的學(xué)習(xí)方法UI中國(guó)站酷追波（Dribbble）3.項(xiàng)目臨摹項(xiàng)目臨摹比較推崇的是從應(yīng)用中心下載優(yōu)秀的App，截圖保存進(jìn)行臨摹。臨摹時(shí)一定要保證完全一樣并且要多臨摹。1.6UI設(shè)計(jì)的學(xué)習(xí)方法4.項(xiàng)目實(shí)戰(zhàn)經(jīng)過一定的積累，設(shè)計(jì)師最好通過一個(gè)完整的企業(yè)項(xiàng)目來(lái)提升能力。從原型圖到設(shè)計(jì)稿再到切圖標(biāo)注，甚至可以制作成動(dòng)效Demo。1.6UI設(shè)計(jì)的學(xué)習(xí)方法從原型圖到設(shè)計(jì)稿本章介紹：

圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中重要的組成部分，可以幫助用戶更好地理解產(chǎn)品的功能，是打造產(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ī)范和方法。第2章圖標(biāo)設(shè)計(jì)熟悉圖標(biāo)的基礎(chǔ)知識(shí)掌握?qǐng)D標(biāo)的設(shè)計(jì)規(guī)范明確圖標(biāo)的風(fēng)格類型知識(shí)目標(biāo)明確圖標(biāo)的設(shè)計(jì)思路掌握?qǐng)D標(biāo)的繪制方法能力目標(biāo)培養(yǎng)良好的圖標(biāo)設(shè)計(jì)習(xí)慣培養(yǎng)對(duì)圖標(biāo)的審美鑒賞能力培養(yǎng)有關(guān)圖標(biāo)設(shè)計(jì)的創(chuàng)意能力素質(zhì)目標(biāo)圖標(biāo)的概念圖標(biāo)設(shè)計(jì)的流程圖標(biāo)設(shè)計(jì)的原則2.1?圖標(biāo)的基礎(chǔ)知識(shí)圖標(biāo)（Icon）是具有明確指代含義的圖形。通過將某個(gè)詞語(yǔ)或概念設(shè)計(jì)成形象易辨的圖標(biāo)，進(jìn)而降低用戶的理解成本、提高設(shè)計(jì)的整體美觀度。圖標(biāo)通常和文本相互搭配使用，兩者相互支撐，共同起到傳遞其中所要表達(dá)的內(nèi)容、信息以及意義的作用。2.1.1圖標(biāo)的概念圖標(biāo)設(shè)計(jì)的流程包括分析調(diào)研、尋找隱喻、設(shè)計(jì)圖形、建立風(fēng)格、細(xì)節(jié)潤(rùn)色、場(chǎng)景測(cè)試等環(huán)節(jié)。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)品UI2.尋找隱喻隱喻通常表示從一種事物能聯(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ì)的流程3.設(shè)計(jì)圖形圖形的設(shè)計(jì)非?？简?yàn)圖標(biāo)設(shè)計(jì)師的基本功。通過隱喻收集相關(guān)元素之后，設(shè)計(jì)師需要繪制一系列草圖，提煉并設(shè)計(jì)出成型的圖形，并根據(jù)圖標(biāo)的規(guī)范在計(jì)算機(jī)上對(duì)圖形進(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ì)的流程5.細(xì)節(jié)潤(rùn)色細(xì)節(jié)往往是使產(chǎn)品區(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)的細(xì)節(jié)潤(rùn)色6.場(chǎng)景測(cè)試為了讓圖標(biāo)適用于不同場(chǎng)景及不同分辨率的終端，還需要根據(jù)規(guī)范調(diào)整圖標(biāo)的分辨率，具體的規(guī)范會(huì)在2.2節(jié)“圖標(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ì)的流程圖標(biāo)的細(xì)節(jié)潤(rùn)色圖標(biāo)設(shè)計(jì)要遵循可識(shí)別性、視覺統(tǒng)一、簡(jiǎn)潔美觀、愉悅友好四大原則。1.可識(shí)別性（1）造型準(zhǔn)。設(shè)計(jì)圖標(biāo)時(shí)通過對(duì)信息與圖形的理解，進(jìn)行準(zhǔn)確的圖標(biāo)造型，以保證用戶理解圖標(biāo)需要傳達(dá)出來(lái)的含義。比如圖標(biāo)在使用從真實(shí)世界簡(jiǎn)化而來(lái)的造型時(shí)更具有識(shí)別度，都表達(dá)點(diǎn)贊，左邊的圖標(biāo)比右邊的圖標(biāo)更具有識(shí)別度。2.1.3圖標(biāo)設(shè)計(jì)的原則（2）顏色對(duì)。設(shè)計(jì)圖標(biāo)時(shí)通過調(diào)整色相、明度、飽和度，使用準(zhǔn)確的顏色，以保證圖標(biāo)和背景形成對(duì)比。比如圖標(biāo)本身使用黃色，背景通常采用較深的顏色才能使人看得更清楚，同樣的圖標(biāo)，黃色與黑色搭配使人更容易識(shí)別。2.1.3圖標(biāo)設(shè)計(jì)的原則騰訊視頻，黃色圖標(biāo)、白色背景騰訊視頻，黃色圖標(biāo)、黑色背景（3）夠清晰。設(shè)計(jì)圖標(biāo)時(shí)通過設(shè)置坐標(biāo)位置及尺寸，使用正確的數(shù)值，可以保證像素準(zhǔn)確以及圖標(biāo)的清晰度。比如圖標(biāo)的坐標(biāo)位置為整數(shù)、尺寸為偶數(shù)時(shí)圖標(biāo)會(huì)更加清晰。2.1.3圖標(biāo)設(shè)計(jì)的原則清晰的圖標(biāo)不清晰的圖標(biāo)2.視覺統(tǒng)一（1）造型統(tǒng)一。圖標(biāo)造型必須要統(tǒng)一，造型統(tǒng)一包括描邊一致、倒角一致、留白一致、角度一致以及透視一致等。造型統(tǒng)一會(huì)使圖標(biāo)更加精致。2.1.3圖標(biāo)設(shè)計(jì)的原則描邊一致描邊不一致（2）風(fēng)格統(tǒng)一。圖標(biāo)風(fēng)格必須要統(tǒng)一，在進(jìn)行設(shè)計(jì)時(shí)，我們通常會(huì)先將其中一個(gè)圖標(biāo)的風(fēng)格確立，然后將該風(fēng)格延續(xù)到其他圖標(biāo)，以保證圖標(biāo)風(fēng)格一致。風(fēng)格統(tǒng)一會(huì)使圖標(biāo)更加整齊。知識(shí)拓展：一個(gè)圖標(biāo)的用色盡量不要超過3種顏色，否則會(huì)導(dǎo)致用戶視覺混亂。2.1.3圖標(biāo)設(shè)計(jì)的原則3.簡(jiǎn)潔美觀（1）造型簡(jiǎn)潔。進(jìn)行圖標(biāo)設(shè)計(jì)時(shí)應(yīng)減少不必要的細(xì)節(jié)，降低復(fù)雜度，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)整體簡(jiǎn)潔，幫助用戶快速識(shí)別。2.1.3圖標(biāo)設(shè)計(jì)的原則造型簡(jiǎn)潔的圖標(biāo)造型復(fù)雜的圖標(biāo)（2）比例協(xié)調(diào)。設(shè)計(jì)圖標(biāo)時(shí)根據(jù)特定的規(guī)則進(jìn)行設(shè)計(jì)，以保證協(xié)調(diào)性，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)呈現(xiàn)最佳狀態(tài)。比如當(dāng)內(nèi)部圖形與外部圖形的輪廓比為1：2時(shí)，圖標(biāo)的整體視覺效果最為平衡，內(nèi)部圖形與外部圖形不同比例的圖標(biāo)。2.1.3圖標(biāo)設(shè)計(jì)的原則（3）風(fēng)格合理。圖標(biāo)設(shè)計(jì)使用合理的風(fēng)格，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)更加符合產(chǎn)品需求并提高產(chǎn)品美觀度。比如進(jìn)行旅游出行行業(yè)的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)在扁平化基礎(chǔ)面性圖標(biāo)之上再添加其他效果，以此打造出豐富絢麗的圖標(biāo)效果。2.1.3圖標(biāo)設(shè)計(jì)的原則風(fēng)格不合理的圖標(biāo)風(fēng)格合理的圖標(biāo)（4）配色科學(xué)。圖標(biāo)設(shè)計(jì)一定要使用科學(xué)的配色，這樣設(shè)計(jì)出的圖標(biāo)才會(huì)更加符合其含義并加強(qiáng)整體美觀性。比如進(jìn)行“美妝護(hù)膚”的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)選擇甜美、溫柔的粉色以強(qiáng)調(diào)優(yōu)美感；進(jìn)行“電腦數(shù)碼”的圖標(biāo)設(shè)計(jì)時(shí)，通常會(huì)選擇冷靜、中性的藍(lán)色以強(qiáng)調(diào)科技感。然后通過明度與純度的變化，使用獨(dú)特的顏色打造出精致的圖標(biāo)。2.1.3圖標(biāo)設(shè)計(jì)的原則配色不科學(xué)的圖標(biāo)配色科學(xué)的圖標(biāo)4.愉悅友好（1）品牌感。有時(shí)由于表達(dá)的意義相同，會(huì)導(dǎo)致不同產(chǎn)品中的圖標(biāo)設(shè)計(jì)顯得普通甚至出現(xiàn)雷同。將品牌融入圖標(biāo)的設(shè)計(jì)中，可以巧妙地讓圖標(biāo)具備差異性，擁有獨(dú)特的產(chǎn)品氣質(zhì)，避免抄襲情況出現(xiàn)，將品牌融入圖標(biāo)設(shè)計(jì)的閑魚App。2.1.3圖標(biāo)設(shè)計(jì)的原則（2）生命力。在設(shè)計(jì)圖標(biāo)時(shí)注入擬人化的元素，同樣會(huì)令圖標(biāo)具備差異性。這種充滿生命力的設(shè)計(jì)，會(huì)帶給用戶親近友好的體驗(yàn)。2.1.3圖標(biāo)設(shè)計(jì)的原則（3）微交互。在視覺設(shè)計(jì)的基礎(chǔ)之上，為圖標(biāo)添加小動(dòng)畫，形成交互，會(huì)令用戶感到更加愉悅。2.1.3圖標(biāo)設(shè)計(jì)的原則圖標(biāo)的設(shè)計(jì)規(guī)范主要是根據(jù)App的iOS和Android兩個(gè)平臺(tái)的設(shè)計(jì)規(guī)范而來(lái)的。下面從圖標(biāo)的尺寸及單位、圖標(biāo)的視覺統(tǒng)一、圖標(biāo)的清晰度3個(gè)方面出發(fā)詳細(xì)講解圖標(biāo)的設(shè)計(jì)規(guī)范。2.2圖標(biāo)的設(shè)計(jì)規(guī)范圖標(biāo)的尺寸及單位圖標(biāo)的視覺統(tǒng)一圖標(biāo)的清晰度1.iOS中圖標(biāo)的尺寸及單位在iOS中，圖標(biāo)主要分為應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩種，單位是px和pt。px即“像素”，是按照像素格計(jì)算的單位，表示移動(dòng)設(shè)備的實(shí)際像素。pt即“點(diǎn)”，是根據(jù)內(nèi)容尺寸計(jì)算的單位。（1）應(yīng)用圖標(biāo)。應(yīng)用圖標(biāo)是應(yīng)用程序的圖標(biāo)。應(yīng)用圖標(biāo)主要應(yīng)用于主屏幕、AppStore、Spotlight以及設(shè)置場(chǎng)景中。2.2.1圖標(biāo)的尺寸及單位iOS中各類應(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è)角遮住。2.2.1圖標(biāo)的尺寸及單位應(yīng)用圖標(biāo)會(huì)以不同的分辨率出現(xiàn)在主屏幕、AppStore、Spotlight以及設(shè)置場(chǎng)景中，尺寸也應(yīng)根據(jù)不同設(shè)備的分辨率進(jìn)行適配。2.2.1圖標(biāo)的尺寸及單位iOS的不同設(shè)備的系統(tǒng)圖標(biāo)尺寸應(yīng)用圖標(biāo)會(huì)以不同的分辨率出現(xiàn)在主屏幕、AppStore、Spotlight以及設(shè)置場(chǎng)景中，尺寸也應(yīng)根據(jù)不同設(shè)備的分辨率進(jìn)行適配。2.2.1圖標(biāo)的尺寸及單位使用iOS的不同設(shè)備的應(yīng)用圖標(biāo)尺寸（2）系統(tǒng)圖標(biāo)。系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，主要應(yīng)用于導(dǎo)航欄、工具欄以及標(biāo)簽欄。當(dāng)未找到符合需求的系統(tǒng)圖標(biāo)時(shí)，UI設(shè)計(jì)師可以設(shè)計(jì)自定義圖標(biāo)。2.2.1圖標(biāo)的尺寸及單位iPhoneSE/6/6s/7/8/XR導(dǎo)航欄和工具欄上的圖標(biāo)尺寸一般是44px，標(biāo)簽欄上的圖標(biāo)尺寸一般是50px。系統(tǒng)圖標(biāo)會(huì)以不同的分辨率出現(xiàn)在導(dǎo)航欄、工具欄以及標(biāo)簽欄場(chǎng)景中，圖標(biāo)尺寸也應(yīng)根據(jù)不同設(shè)備的分辨率進(jìn)行適配。2.2.1圖標(biāo)的尺寸及單位使用iOS的不同設(shè)備的系統(tǒng)圖標(biāo)尺寸2.Android中圖標(biāo)的尺寸及單位在Android中，圖標(biāo)主要分為應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)兩種，單位是dp。dp是Android設(shè)備上的基本單位，等同于iOS設(shè)備上的pt。（1）應(yīng)用圖標(biāo)。應(yīng)用圖標(biāo)即產(chǎn)品圖標(biāo)，是品牌和產(chǎn)品的視覺表達(dá)，主要出現(xiàn)在主屏幕上。2.2.1圖標(biāo)的尺寸及單位Android中各類應(yīng)用圖標(biāo)創(chuàng)建應(yīng)用圖標(biāo)時(shí)，應(yīng)以320dpi（dpi表示的是Android設(shè)備每英寸所擁有的像素?cái)?shù)量）分辨率中的48dp尺寸為基準(zhǔn)。應(yīng)用圖標(biāo)的尺寸應(yīng)根據(jù)不同設(shè)備的分辨率進(jìn)行適配。當(dāng)應(yīng)用圖標(biāo)應(yīng)用于GooglePlay中時(shí)，其尺寸是512px×512px。2.2.1圖標(biāo)的尺寸及單位使用Android的不同設(shè)備的應(yīng)用圖標(biāo)尺寸（2）系統(tǒng)圖標(biāo)。系統(tǒng)圖標(biāo)即界面中的功能圖標(biāo)，通過簡(jiǎn)潔、現(xiàn)代的圖形表達(dá)一些常見功能。MaterialDesign提供了一套完整的系統(tǒng)圖標(biāo)，同時(shí)設(shè)計(jì)師也可以根據(jù)產(chǎn)品的調(diào)性自定義設(shè)計(jì)系統(tǒng)圖標(biāo)。2.2.1圖標(biāo)的尺寸及單位創(chuàng)建系統(tǒng)圖標(biāo)時(shí)，以320dpi分辨率中的24dp尺寸為基準(zhǔn)。系統(tǒng)圖標(biāo)的尺寸應(yīng)根據(jù)不同設(shè)備的分辨率進(jìn)行適配。2.2.1圖標(biāo)的尺寸及單位MaterialDesign語(yǔ)言提供了4種不同的圖標(biāo)形狀供UI設(shè)計(jì)師參考，以保持視覺統(tǒng)一。2.2.2圖標(biāo)的視覺統(tǒng)一邊角：邊角半徑默認(rèn)為2dp。內(nèi)角應(yīng)該使用方形而不要使用圓形，圓角建議使用2dp。描邊：系統(tǒng)圖標(biāo)應(yīng)使用2dp的描邊以保持圖標(biāo)的一致性。2.2.2圖標(biāo)的視覺統(tǒng)一描邊末端：描邊末端應(yīng)該是直線并帶有角度，留白區(qū)域的描邊也應(yīng)該是2dp。描邊如果是傾斜45°，那么末端應(yīng)該也以傾斜45°為結(jié)束。視覺校正：如果系統(tǒng)圖標(biāo)需要設(shè)計(jì)復(fù)雜的細(xì)節(jié)，則可以進(jìn)行細(xì)微的調(diào)整以提高其清晰度。2.2.2圖標(biāo)的視覺統(tǒng)一設(shè)計(jì)時(shí)為保證圖標(biāo)清晰，需將軟件中x軸和y軸坐標(biāo)設(shè)為整數(shù)，而不是小數(shù)，將圖標(biāo)“放在像素上”。2.2.3圖標(biāo)的清晰度正確示例錯(cuò)誤示例根據(jù)風(fēng)格類型劃分，圖標(biāo)可以分為擬物化風(fēng)格、扁平化風(fēng)格、3D風(fēng)格及2.5D風(fēng)格。2.3圖標(biāo)的風(fēng)格類型擬物化風(fēng)格扁平化風(fēng)格3D風(fēng)格2.5D風(fēng)格擬物化風(fēng)格的圖標(biāo)貼近現(xiàn)實(shí)，帶有漸變、高光、陰影等效果。在“iOS6時(shí)代”擬物風(fēng)格達(dá)到了流行的巔峰，之后逐漸被扁平化風(fēng)格趕超，現(xiàn)常用于工具類、游戲類等的應(yīng)用圖標(biāo)。2.3.1擬物化風(fēng)格扁平化風(fēng)格圖標(biāo)與擬物化風(fēng)格圖標(biāo)不同，很少有漸變、高光、陰影等效果。扁平化風(fēng)格自2013年iOS7推出，如今成了設(shè)計(jì)的主流趨勢(shì)。扁平化風(fēng)格圖標(biāo)可以分為線性、面性以及線面3種類型。經(jīng)過多年的發(fā)展，設(shè)計(jì)師在線性、面形以及線面3種類型的基礎(chǔ)上又設(shè)計(jì)衍生了其他類型。這些類型形式各異、富有特點(diǎn)，并被廣泛運(yùn)用。2.3.2扁平化風(fēng)格線性圖標(biāo)通過統(tǒng)一的線條進(jìn)行繪制，以表達(dá)圖標(biāo)的功能。該類圖標(biāo)具有形象簡(jiǎn)約、設(shè)計(jì)輕盈的特點(diǎn)，會(huì)呈現(xiàn)出干凈的視覺效果。2.3.2扁平化風(fēng)格基礎(chǔ)線性線性斷點(diǎn)線性延伸線性漸變線性疊加面性圖標(biāo)即填充圖標(biāo)。面性圖標(biāo)由于占用的視覺面積要比線性圖標(biāo)占用的多，所以具有整體飽滿、視覺突出的特點(diǎn)，能夠幫助用戶快速進(jìn)行圖標(biāo)的位置定位。2.3.2扁平化風(fēng)格基礎(chǔ)面性面性延伸面性漸變面性多色面性疊加線面圖標(biāo)是線性圖標(biāo)和面性圖標(biāo)的結(jié)合。線面圖標(biāo)由于兼具線性圖標(biāo)和面性圖標(biāo)兩種圖標(biāo)的優(yōu)勢(shì)，所以具有生動(dòng)有趣、俏皮可愛的特點(diǎn)。通過對(duì)線面比例的不同把控，線面圖標(biāo)能夠呈現(xiàn)出不同的視覺效果。2.3.2扁平化風(fēng)格內(nèi)部填充：小比例填充內(nèi)部填充：大比例填充內(nèi)部填充：全部填充錯(cuò)位填充線面拼接3D風(fēng)格的圖標(biāo)立體、有層次感，由若干幾何多邊體構(gòu)成。其制作軟件通常為3dxMax和C4D，并常用于游戲中。2.3.33D風(fēng)格2.5D風(fēng)格的圖標(biāo)由物體的正面、光面和暗面3面組成，是一種模擬3D效果的圖標(biāo)。其制作軟件通常為Illustrator，并常用于引導(dǎo)頁(yè)、空狀態(tài)以及彈窗中。2.3.42.5D風(fēng)格使用圓角矩形工具繪制床體，使用圓角矩形工具、矩形工具和減去頂層形狀命令繪制其他部分。2.4課堂案例——繪制扁平化風(fēng)格的單色面性圖標(biāo)效果圖2.5課堂練習(xí)課堂練習(xí)——繪制扁平化風(fēng)格的不透明色塊面性圖標(biāo)課堂練習(xí)——繪制扁平化風(fēng)格的微漸變面性圖標(biāo)2.5.1課堂練習(xí)——繪制扁平化風(fēng)格的不透明色塊面性圖標(biāo)使用橢圓工具繪制燈泡主體，使用圓角矩形工具和多邊形工具繪制其他部分。效果圖2.5.2課堂練習(xí)——繪制扁平化風(fēng)格的微漸變面性圖標(biāo)使用漸變疊加命令繪制背景，使用多邊形工具、圓角矩形工具、矩形工具、橢圓工具和合并形狀命令、減去頂層形狀命令繪制其他部分，使用添加圖層蒙版命令和畫筆工具擦除不需要的部分。效果圖2.6課后習(xí)題課后習(xí)題——繪制扁平化風(fēng)格的光影效果圖標(biāo)課后習(xí)題——繪制扁平化風(fēng)格的折紙投影圖標(biāo)2.6.1課后習(xí)題——繪制扁平化風(fēng)格的光影效果圖標(biāo)使用漸變疊加命令繪制背景，使用圓角矩形工具、矩形工具、橢圓工具和合并形狀命令、減去頂層形狀命令繪制其他部分，使用剪切蒙版命令置入漸變效果。效果圖2.6.2課后習(xí)題——繪制扁平化風(fēng)格的折紙投影圖標(biāo)使用漸變疊加命令繪制背景，使用圓角矩形工具、矩形工具、橢圓工具和減去頂層形狀命令繪制其他部分，使用剪切蒙版命令置入漸變效果。效果圖本章介紹：

界面設(shè)計(jì)是UI設(shè)計(jì)中最重要的部分之一，界面是最終呈現(xiàn)給用戶的結(jié)果，因此界面設(shè)計(jì)是涉及版面布局、顏色搭配等內(nèi)容的綜合性工作。本章對(duì)App界面的基礎(chǔ)知識(shí)、設(shè)計(jì)規(guī)范、App常用的界面類型以及App界面的繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對(duì)App界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制App常用界面的規(guī)范和方法。第3章App界面設(shè)計(jì)熟悉App界面的基礎(chǔ)知識(shí)掌握App界面的設(shè)計(jì)規(guī)范明確App常用的界面類型知識(shí)目標(biāo)明確App界面的設(shè)計(jì)思路掌握App閃屏頁(yè)的繪制方法掌握App引導(dǎo)頁(yè)的繪制方法掌握App首頁(yè)的繪制方法掌握App個(gè)人中心頁(yè)的繪制方法掌握App詳情頁(yè)的繪制方法掌握App注冊(cè)登錄頁(yè)的繪制方法能力目標(biāo)培養(yǎng)良好的App界面設(shè)計(jì)習(xí)慣培養(yǎng)對(duì)App界面的審美鑒賞能力培養(yǎng)有關(guān)App界面設(shè)計(jì)的創(chuàng)意能力素質(zhì)目標(biāo)App的概念A(yù)pp界面設(shè)計(jì)的流程App界面設(shè)計(jì)的原則3.1?App界面的基礎(chǔ)知識(shí)App是Application（應(yīng)用程序）的縮寫，一般指智能手機(jī)的第三方應(yīng)用程序。用戶主要從應(yīng)用商店下載App，比較常用的應(yīng)用商店有蘋果的AppStore、華為應(yīng)用市場(chǎng)等。3.1.1App的概念A(yù)pp設(shè)計(jì)的流程包括分析調(diào)研、資料收集、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、測(cè)試驗(yàn)證等環(huán)節(jié)。3.1.2App界面設(shè)計(jì)的流程1.分析調(diào)研App界面設(shè)計(jì)是根據(jù)品牌的調(diào)性、產(chǎn)品的定位而進(jìn)行的，對(duì)于不同應(yīng)用領(lǐng)域的App，其設(shè)計(jì)風(fēng)格也會(huì)有區(qū)別。3.1.2App界面設(shè)計(jì)的流程馬蜂窩途牛旅游攜程旅行2.資料收集根據(jù)初步確定的設(shè)計(jì)方向和界面風(fēng)格，進(jìn)行App界面相關(guān)的資料收集以及整理，為接下來(lái)的交互設(shè)計(jì)做準(zhǔn)備。3.交互設(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.1.2App界面設(shè)計(jì)的流程4.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查，這是整個(gè)App設(shè)計(jì)流程中非常重要的一個(gè)環(huán)節(jié)，可以在執(zhí)行界面設(shè)計(jì)之前檢查出是否有遺漏、缺失等細(xì)節(jié)問題。3.1.2App界面設(shè)計(jì)的流程交互設(shè)計(jì)自查表5.界面設(shè)計(jì)原型圖審查通過之后，就可以進(jìn)入界面的視覺設(shè)計(jì)環(huán)節(jié)了，這個(gè)環(huán)節(jié)的設(shè)計(jì)圖就是產(chǎn)品最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范，圖片、文字內(nèi)容真實(shí)，并運(yùn)用墨刀、Principle等軟件制作成可交互的高保真原型，以便后續(xù)測(cè)試界面時(shí)使用。3.1.2App界面設(shè)計(jì)的流程6.測(cè)試驗(yàn)證測(cè)試驗(yàn)證是最后一個(gè)環(huán)節(jié)，是為App進(jìn)行優(yōu)化的重要支撐。測(cè)試驗(yàn)證是指讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此環(huán)節(jié)共同觀察、記錄，可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。3.1.2App界面設(shè)計(jì)的流程App測(cè)試驗(yàn)證1.iOS系統(tǒng)界面設(shè)計(jì)原則（1）清晰。在整個(gè)系統(tǒng)界面中，文字在各種尺寸的屏幕上都要清晰易讀，圖標(biāo)精確而清晰，裝飾精巧且恰當(dāng)，令用戶更易理解功能?？衫秘?fù)空間、顏色、字體、圖形等界面元素巧妙地突出重要內(nèi)容，并傳達(dá)交互性，通過負(fù)空間、顏色、字體、圖形等界面元素設(shè)計(jì)后，巧妙地突出重要內(nèi)容。3.1.3App界面設(shè)計(jì)的原則（2）遵從。流暢的動(dòng)畫和清晰美觀的界面可以幫助用戶理解內(nèi)容并與之互動(dòng)，同時(shí)不干擾用戶的使用。內(nèi)容一般填滿整個(gè)屏幕，而半透明和模糊效果通常暗示有更多內(nèi)容。最低限度地使用邊框、漸變和陰影可使界面輕盈，同時(shí)確保內(nèi)容明顯。3.1.3App界面設(shè)計(jì)的原則（3）深度。獨(dú)特的視覺層級(jí)和真實(shí)的動(dòng)畫效果可以表現(xiàn)層次結(jié)構(gòu)，賦予界面活力，并促進(jìn)用戶理解。令用戶通過觸摸和探索發(fā)現(xiàn)程序的功能，不僅會(huì)使用戶提高興趣，更方便用戶了解功能，還能使用戶關(guān)注到額外的內(nèi)容。在瀏覽內(nèi)容時(shí)，層級(jí)的過渡可提供深度感。3.1.3App界面設(shè)計(jì)的原則2.MaterialDesign設(shè)計(jì)原則（1）材質(zhì)隱喻。MaterialDesign的靈感來(lái)自物理世界的事物及其紋理，包括它們?nèi)绾畏瓷涔饩€和投射陰影等。它對(duì)材料表面進(jìn)行了重新構(gòu)想，加入了紙張和墨水的特性。3.1.3App界面設(shè)計(jì)的原則（2）大膽夸張。MaterialDesign以印刷設(shè)計(jì)方法中的排版、網(wǎng)格、空間、比例、顏色和圖像為指導(dǎo)，來(lái)創(chuàng)造視覺層次、視覺意義以及視覺焦點(diǎn)，使用戶沉浸其中。（3）動(dòng)效表意。MaterialDesign通過微妙的反饋和平滑的過渡使動(dòng)效保持連續(xù)性。當(dāng)元素出現(xiàn)在屏幕上時(shí)，它們?cè)诃h(huán)境中轉(zhuǎn)換和重組，相互作用并產(chǎn)生新的變化。3.1.3App界面設(shè)計(jì)的原則（4）靈活。MaterialDesign旨在實(shí)現(xiàn)品牌表達(dá)。它與自定義代碼庫(kù)集成，允許無(wú)縫實(shí)現(xiàn)組件、插件和設(shè)計(jì)元素。（5）跨平臺(tái)。MaterialDesign使用包括Android、iOS、Flutter和Web的共享組件跨平臺(tái)管理。3.1.3App界面設(shè)計(jì)的原則App的設(shè)計(jì)規(guī)范分為iOS設(shè)計(jì)規(guī)范和Android設(shè)計(jì)規(guī)范兩部分。3.2App界面的設(shè)計(jì)規(guī)范iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范Android系統(tǒng)界面的設(shè)計(jì)規(guī)范1.iOS單位及尺寸（1）相關(guān)單位。?PPI：像素密度（PixelsPerInch，PPI）是屏幕分辨率單位，表示的是每英寸所擁有的像素?cái)?shù)量，其中x，y分別為橫向、縱向的像素?cái)?shù)。PPI越大，畫面越細(xì)膩。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范PPI的計(jì)算公式?Asset：比例因子。標(biāo)準(zhǔn)分辨率顯示器具有1︰1的PPI，用@1x表示，其中一個(gè)像素等于一個(gè)點(diǎn)。高分辨率顯示器具有更高的PPI，比例因子為2.0或3.0，分別用@2x和@3x表示。一個(gè)10px×10px的標(biāo)準(zhǔn)分辨率（@1x）圖像，該圖像的@2x版本為20px×20px。因此，高分辨率顯示器需要具有更多像素的圖像。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范@3x版本為30px×30px?邏輯像素（LogicPoint）和物理像素（PhysicalPixel）：邏輯像素單位為pt，是根據(jù)內(nèi)容尺寸計(jì)算的單位。物理像素單位為px，是按照像素格計(jì)算的單位，表示移動(dòng)設(shè)備的實(shí)際像素。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范邏輯像素與物理像素的轉(zhuǎn)換（2）設(shè)備尺寸。在進(jìn)行界面設(shè)計(jì)時(shí)，為了適配大部分尺寸，推薦以iPhoneX/XS/11Pro為基準(zhǔn)。如果使用Photoshop就創(chuàng)建750px×1624px尺寸的畫布，如果使用Sketch就創(chuàng)建375pt×812pt尺寸的畫布。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范iOS常見的設(shè)備尺寸2.iOS界面結(jié)構(gòu)iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范iOS手機(jī)端界面結(jié)構(gòu)iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范iOS手機(jī)端界面結(jié)構(gòu)iOS界面主要由狀態(tài)欄、導(dǎo)航欄、標(biāo)簽欄組成。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范iOSiPad端界面結(jié)構(gòu)3.iOS布局（1）網(wǎng)格系統(tǒng)。網(wǎng)格系統(tǒng)（GridSystem），又稱為柵格系統(tǒng)，是利用一系列垂直和水平的參考線，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，再以這些列或格子為基準(zhǔn)，進(jìn)行頁(yè)面布局設(shè)計(jì)的方式，其能使布局規(guī)范、簡(jiǎn)潔、有秩序。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范（2）組成元素。網(wǎng)格系統(tǒng)由列、水槽以及邊距3個(gè)元素組成。列是放置內(nèi)容的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范（3）網(wǎng)格的運(yùn)用。?單元格：iOS的最小點(diǎn)擊區(qū)域的尺寸是44pt×44pt，即88px（@2x）。因此，在適用性方面，能被44和88整除的偶數(shù)4和8作為iOS最小單元格比較合適。其中4px容易將頁(yè)面切割細(xì)碎，所以比較推薦使用8px。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范?列：列的數(shù)量有4、6、8、10、12、24這幾種情況。其中4列通常在2等分的簡(jiǎn)潔頁(yè)面中使用，6列、12列和24列基本滿足所有等分情況，然而24列將頁(yè)面切割太碎，因此實(shí)際使用時(shí)還是以12列和6列為主。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范?水槽：水槽、邊距以及橫向間距的寬度可以依照最小單元格8px為增量進(jìn)行統(tǒng)一設(shè)置，如24px、32px、40px。其中32px（16pt@2x）最為常用。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范?邊距：邊距的寬度可以與水槽的寬度有所區(qū)別，在iOS中以@2x為基準(zhǔn)，常見的邊距有20px、24px、30px、32px、40px以及50px。邊距的選擇應(yīng)結(jié)合產(chǎn)品本身的氣質(zhì)，其中30px是最為舒適的邊距，也是絕大多數(shù)App首選的邊距。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范4.iOS字體（1）系統(tǒng)字體。舊金山（SF）字體：SF字體是非襯線字體，其中SF字體有SFUIText（文本模式）和SFUIDisplay（展示模式）兩種尺寸。SFUIText適用于小于等于19pt的文字，SFUIDisplay適用于大于等于20pt的文字。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范舊金山字體紐約字體：紐約字體是襯線字體。對(duì)于小于20pt的文本使用小號(hào)，對(duì)于20～35pt的文本使用中號(hào)，對(duì)于36～53pt的文本使用大號(hào)，對(duì)于54pt或更大的文本使用特大號(hào)。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范紐約字體蘋方字體：在iOS中，中文使用的是蘋方字體，該字體共有6個(gè)字重。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范蘋方字體（2）字體大小。進(jìn)行iOS界面設(shè)計(jì)時(shí)要注意字號(hào)的大小。蘋果官網(wǎng)的建議全部是針對(duì)英文SF字體而言的，中文字體需要UI設(shè)計(jì)師靈活運(yùn)用這些建議，以最終呈現(xiàn)效果的實(shí)用性和美觀度為基準(zhǔn)進(jìn)行調(diào)整。3.2.1iOS系統(tǒng)界面的設(shè)計(jì)規(guī)范蘋方字體1.Android尺寸及單位（1）相關(guān)單位。??DPI：網(wǎng)點(diǎn)密度（Dot?Per?Inch，DPI）是輸出分辨率的單位，表示每英寸輸出的點(diǎn)數(shù)。其在移動(dòng)設(shè)備上等同于PPI，表示的是每英寸所擁有的像素?cái)?shù)量。通常PPI適用于蘋果手機(jī)，DPI適用于Android手機(jī)。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范?獨(dú)立密度像素（Densty-independentPixel）與獨(dú)立縮放像素（Scale-independentPixel）：獨(dú)立密度像素（單位為dp）是Android設(shè)備上的基本單位，等同于蘋果設(shè)備上的pt。Android開發(fā)工程師使用的單位是dp，所以UI設(shè)計(jì)師進(jìn)行標(biāo)注時(shí)應(yīng)將px轉(zhuǎn)化成dp，公式為dp×ppi/160=px。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范獨(dú)立縮放像素是Android設(shè)備上的字體單位。Android平臺(tái)允許用戶自定義文字大小，當(dāng)文字大小是“正?！睍r(shí)，1sp=1dp。而當(dāng)文字大小是“大”或“超大”時(shí)，1sp”→“1dp。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范（2）設(shè)備尺寸。Android常見的設(shè)備尺寸。在進(jìn)行界面設(shè)計(jì)時(shí)，如果想要一稿適配Android和iOS，就使用Photoshop新建720px×1280px尺寸的畫布。如果根據(jù)MaterialDesign新規(guī)范單獨(dú)設(shè)計(jì)Android設(shè)計(jì)稿，就使用Photoshop新建1080px×1920px尺寸的畫布。無(wú)論哪種需求，使用Sketch只建立360dp×640dp尺寸的畫布即可。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范2.Android界面結(jié)構(gòu)Android界面主要由狀態(tài)欄、導(dǎo)航欄、頂部應(yīng)用欄組成。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范3.Android布局在iOS設(shè)計(jì)規(guī)范中，我們已經(jīng)剖析了網(wǎng)格系統(tǒng)及其組成元素，因此在Android布局中不贅述，直接進(jìn)行Android中網(wǎng)格的布局。?單元格：Android的最小點(diǎn)擊區(qū)域的尺寸是48dp×48dp，因此能被48整除的偶數(shù)4和8作為Android最小單元格比較合適。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范所有組件都與Android設(shè)備的8dp網(wǎng)格對(duì)齊。圖標(biāo)、文字和組件中的某些元素可以與4dp網(wǎng)格對(duì)齊。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范?列：列的數(shù)量在手機(jī)設(shè)備上推薦為4列，在平板電腦上推薦為8列。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范手機(jī)設(shè)備平板電腦?水槽：水槽和邊距的寬度在手機(jī)設(shè)備上推薦為16dp，在平板電腦上推薦為24dp，MD為材料設(shè)計(jì)語(yǔ)言（MaterialDesign）的簡(jiǎn)稱。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范?邊距：邊距的寬度可以和水槽的寬度統(tǒng)一。另外邊距的寬度可以根據(jù)產(chǎn)品的設(shè)計(jì)要求和水槽的寬度不同。當(dāng)Android中邊距和水槽的寬度不同時(shí)，其寬度的設(shè)置具體可以參考iOS布局中邊距的寬度。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范4.Android字體（1）系統(tǒng)字體。Android中英文使用的是Roboto字體，共有6個(gè)字重。中文使用的是思源黑體，又稱為“SourceHanSans”或“Noto”，共有7個(gè)字重。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范（2）字體大小。進(jìn)行Android界面設(shè)計(jì)時(shí)要注意字號(hào)的大小。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范Android各元素以720px×1280px為基準(zhǔn)進(jìn)行設(shè)計(jì)，可以與iOS對(duì)應(yīng)，其常見的字號(hào)大小為24px、26px、28px、30px、32px、34px，36px等，最小字號(hào)為20px。3.2.2?Android系統(tǒng)界面的設(shè)計(jì)規(guī)范Android對(duì)應(yīng)界面iOS對(duì)應(yīng)界面界面設(shè)計(jì)是打造產(chǎn)品的用戶體驗(yàn)里非常重要的一環(huán)。在App中，常用界面類型為閃屏頁(yè)、引導(dǎo)頁(yè)、首頁(yè)、個(gè)人中心頁(yè)、詳情頁(yè)以及注冊(cè)登錄頁(yè)等。3.3App常用的界面類型閃屏頁(yè)引導(dǎo)頁(yè)首頁(yè)個(gè)人中心頁(yè)詳情頁(yè)注冊(cè)登錄頁(yè)閃屏頁(yè)又稱為“啟動(dòng)頁(yè)”，是用戶點(diǎn)擊App圖標(biāo)后，預(yù)先加載的一張圖片。1.品牌推廣型品牌推廣型閃屏頁(yè)是為表現(xiàn)產(chǎn)品品牌而設(shè)定的，基本采用“產(chǎn)品logo+產(chǎn)品名稱+宣傳語(yǔ)”的簡(jiǎn)潔化設(shè)計(jì)形式。3.3.1閃屏頁(yè)1號(hào)店閑魚京東的品牌推廣型閃屏頁(yè)2.活動(dòng)廣告型活動(dòng)廣告型閃屏頁(yè)是為推廣活動(dòng)或廣告而設(shè)定的，通常將推廣的內(nèi)容直接設(shè)計(jì)在閃屏頁(yè)內(nèi)，多采用插畫和海報(bào)的設(shè)計(jì)形式，常用暖色營(yíng)造熱鬧的氛圍。3.3.1閃屏頁(yè)百度網(wǎng)盤百度瀏覽器知乎的活動(dòng)廣告型閃屏頁(yè)“雙11”國(guó)慶“雙12”的活動(dòng)廣告型閃屏頁(yè)3.節(jié)日關(guān)懷型節(jié)日關(guān)懷型閃屏頁(yè)是為營(yíng)造節(jié)日氛圍，同時(shí)凸顯產(chǎn)品品牌而設(shè)定的，多采用“產(chǎn)品logo+內(nèi)容插畫”的設(shè)計(jì)形式，使用戶感受到節(jié)日相關(guān)的關(guān)懷與祝福。3.3.1閃屏頁(yè)閑魚美圖秀秀口袋兼職的節(jié)日關(guān)懷型閃屏頁(yè)百度錢包QQ音樂

QQ瀏覽器的節(jié)日關(guān)懷型閃屏頁(yè)引導(dǎo)頁(yè)是用戶在第一次打開App時(shí)或經(jīng)過更新后打開App時(shí)看到的一組圖片，通常由3～5頁(yè)組成。1.功能說明型功能說明型引導(dǎo)頁(yè)是引導(dǎo)頁(yè)中最基礎(chǔ)的一種，主要對(duì)產(chǎn)品的新功能進(jìn)行展示，常用于App重大版本的更新。3.3.2引導(dǎo)頁(yè)高德地圖App的功能說明型引導(dǎo)頁(yè)2.產(chǎn)品推廣型產(chǎn)品推廣型引導(dǎo)頁(yè)可表現(xiàn)App的價(jià)值，讓用戶更了解這款A(yù)pp的理念。其多采用與企業(yè)形象和產(chǎn)品風(fēng)格一致的生動(dòng)化、形象化的設(shè)計(jì)形式，讓用戶看到精美的畫面。3.3.2引導(dǎo)頁(yè)京東App的產(chǎn)品推廣型引導(dǎo)頁(yè)首頁(yè)又稱為“起始頁(yè)”，是用戶使用App時(shí)的第一頁(yè)。1.列表型列表型首頁(yè)在頁(yè)面上將同級(jí)別的模塊進(jìn)行分類展示，常用于以數(shù)據(jù)展示、文字閱讀等為主的App。其采用單一的設(shè)計(jì)形式，方便用戶瀏覽內(nèi)容。3.3.3首頁(yè)2.網(wǎng)格型網(wǎng)格型首頁(yè)在頁(yè)面上將重要的功能以矩形模塊的形式進(jìn)行展示，常用于工具類App。其采用統(tǒng)一矩形模塊的設(shè)計(jì)形式，刺激用戶點(diǎn)擊模塊。3.3.3首頁(yè)天天P圖Word墨刀的網(wǎng)格型首頁(yè)3.卡片型卡片型首頁(yè)在頁(yè)面上將圖片、文字、控件放置于同一張卡片中，再將卡片進(jìn)行分類展示，常用于數(shù)據(jù)展示、文字閱讀、工具使用等類型的App。3.3.3首頁(yè)知乎微信讀書有道翻譯官的卡片型首頁(yè)4.綜合型綜合型首頁(yè)是由搜索欄、Banner、金剛區(qū)、瓷片區(qū)以及標(biāo)簽欄等組成的頁(yè)面，運(yùn)用范圍較廣，常用于電商類、教育類、旅游類等App。其采用豐富的設(shè)計(jì)形式，能滿足用戶的需求。3.3.3首頁(yè)蘇寧易購(gòu)?fù)九Ｂ糜勿I了么的綜合型首頁(yè)個(gè)人中心頁(yè)是展示個(gè)人信息的頁(yè)面，主要由頭像和信息內(nèi)容組成，具有功能集合、信息集合的作用，其有時(shí)也會(huì)以“抽屜打開”的形式出現(xiàn)。3.3.4個(gè)人中心頁(yè)淘寶閑魚網(wǎng)易云音樂的個(gè)人中心頁(yè)詳情頁(yè)是展示App產(chǎn)品詳細(xì)信息，使用戶產(chǎn)生消費(fèi)的頁(yè)面，具有展示產(chǎn)品、轉(zhuǎn)化流量的作用。詳情頁(yè)內(nèi)容較豐富，以圖文信息為主。3.3.5詳情頁(yè)京東途牛旅游

36氪的詳情頁(yè)注冊(cè)登錄頁(yè)是電商類、社交類等功能豐富型App的必要頁(yè)面，具有進(jìn)入產(chǎn)品、深度關(guān)聯(lián)的作用。注冊(cè)登錄頁(yè)設(shè)計(jì)直觀簡(jiǎn)潔，并且提供第三方賬號(hào)登錄，國(guó)內(nèi)常見的第三方賬號(hào)有微博、微信、QQ等。3.3.6注冊(cè)登錄頁(yè)考拉海購(gòu)智聯(lián)招聘

36氪注冊(cè)登錄頁(yè)3.4課堂案例——制作暢游旅游App課堂案例——制作暢游旅游App閃屏頁(yè)課堂案例——制作暢游旅游App引導(dǎo)頁(yè)課堂案例——制作暢游旅游App首頁(yè)課堂案例——制作暢游旅游App個(gè)人中心頁(yè)課堂案例——制作暢游旅游App酒店詳情頁(yè)課堂案例——制作暢游旅游App登錄頁(yè)3.4.1課堂案例——制作暢游旅游App閃屏頁(yè)使用置入嵌入對(duì)象命令置入圖像，使用顏色疊加命令添加效果。效果圖3.4.2課堂案例——制作暢游旅游App引導(dǎo)頁(yè)使用置入嵌入對(duì)象命令置入圖像和圖標(biāo)，使用漸變疊加命令和顏色疊加命令添加效果，使用橫排文字工具輸入文字。效果圖3.4.3課堂案例——制作暢游旅游App首頁(yè)使用圓角矩形工具、矩形工具和橢圓工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用“屬性”面板制作彌散投影，使用橫排文字工具輸入文字。效果圖3.4.4?課堂案例——制作暢游旅游App個(gè)人中心頁(yè)使用圓角矩形工具、矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用漸變疊加命令添加效果，使用“屬性”面板制作彌散投影，使用橫排文字工具輸入文字。效果圖3.4.5?課堂案例——制作暢游旅游App酒店詳情頁(yè)使用圓角矩形工具、矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用“屬性”面板制作彌散投影，使用橫排文字工具輸入文字。效果圖3.4.6?課堂案例——制作暢游旅游App登錄頁(yè)使用圓角矩形工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用顏色疊加命令添加效果，使用橫排文字工具輸入文字。效果圖3.5?課堂練習(xí)——制作潮貨電商App使用圓角矩形工具、矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用“屬性”面板制作彌散投影，使用橫排文字工具輸入文字。效果圖3.6?課后習(xí)題——制作三餐美食類App使用圓角矩形工具、矩形工具、橢圓工具和直線工具繪制形狀，使用置入嵌入對(duì)象命令置入圖片和圖標(biāo)，使用創(chuàng)建剪貼蒙版命令調(diào)整圖片顯示區(qū)域，使用“屬性”面板制作彌散投影，使用橫排文字工具輸入文字。效果圖本章介紹：由于設(shè)備的不同，網(wǎng)頁(yè)界面設(shè)計(jì)相對(duì)于App界面設(shè)計(jì)，有著更加豐富的內(nèi)容。本章對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)知識(shí)、網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范、網(wǎng)頁(yè)常用的界面類型以及網(wǎng)頁(yè)界面的繪制方法進(jìn)行系統(tǒng)講解與演練。通過本章的學(xué)習(xí)，讀者可以對(duì)網(wǎng)頁(yè)界面設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)，并快速掌握繪制網(wǎng)頁(yè)常用界面的規(guī)范和方法。第4章

網(wǎng)頁(yè)界面設(shè)計(jì)熟悉網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)知識(shí)掌握網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范明確網(wǎng)頁(yè)常用的界面類型知識(shí)目標(biāo)明確網(wǎng)頁(yè)界面的設(shè)計(jì)思路掌握網(wǎng)站首頁(yè)的繪制方法掌握網(wǎng)站列表頁(yè)的繪制方法掌握網(wǎng)站詳情頁(yè)的繪制方法能力目標(biāo)培養(yǎng)良好的網(wǎng)頁(yè)界面設(shè)計(jì)習(xí)慣培養(yǎng)對(duì)網(wǎng)頁(yè)界面的審美鑒賞能力培養(yǎng)有關(guān)網(wǎng)頁(yè)界面設(shè)計(jì)的創(chuàng)意能力素質(zhì)目標(biāo)網(wǎng)頁(yè)界面設(shè)計(jì)的概念網(wǎng)頁(yè)界面設(shè)計(jì)的流程網(wǎng)頁(yè)界面設(shè)計(jì)的原則4.1?網(wǎng)頁(yè)界面設(shè)計(jì)的基礎(chǔ)知識(shí)網(wǎng)頁(yè)界面設(shè)計(jì)主要是根據(jù)企業(yè)希望向用戶傳遞的信息進(jìn)行網(wǎng)站功能策劃，然后進(jìn)行界面設(shè)計(jì)、美化的工作。網(wǎng)頁(yè)界面設(shè)計(jì)涵蓋用于制作和維護(hù)網(wǎng)站的許多不同的技能，包含信息架構(gòu)設(shè)計(jì)、網(wǎng)頁(yè)圖形設(shè)計(jì)、用戶界面設(shè)計(jì)、用戶體驗(yàn)設(shè)計(jì)，以及品牌標(biāo)識(shí)設(shè)計(jì)和Banner設(shè)計(jì)等。4.1.1?網(wǎng)頁(yè)界面設(shè)計(jì)的概念網(wǎng)頁(yè)界面設(shè)計(jì)的流程包括網(wǎng)站策劃、資料收集、交互設(shè)計(jì)、交互自查、界面設(shè)計(jì)、測(cè)試驗(yàn)證等環(huán)節(jié)。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程網(wǎng)頁(yè)設(shè)計(jì)流程1.網(wǎng)站策劃網(wǎng)頁(yè)界面設(shè)計(jì)是根據(jù)品牌的調(diào)性、網(wǎng)站的定位而進(jìn)行的，對(duì)于不同主題的網(wǎng)頁(yè)界面，其設(shè)計(jì)風(fēng)格也會(huì)有區(qū)別。因此，應(yīng)先分析需求，了解用戶特征，并進(jìn)行相關(guān)競(jìng)品的調(diào)研，從而明確設(shè)計(jì)方向。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程2.資料收集根據(jù)初步確定的設(shè)計(jì)方向和界面風(fēng)格，進(jìn)行網(wǎng)頁(yè)界面相關(guān)的資料收集以及整理，為接下來(lái)的交互設(shè)計(jì)做準(zhǔn)備。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程3.交互設(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ì)工作，線框圖和原型圖可直接使用Photoshop或Sketch軟件進(jìn)行設(shè)計(jì)。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程原型圖設(shè)計(jì)4.交互自查交互設(shè)計(jì)完成之后，進(jìn)行交互自查，這是整個(gè)網(wǎng)頁(yè)界面設(shè)計(jì)流程中非常重要的一個(gè)環(huán)節(jié)。5.界面設(shè)計(jì)線框圖、原型圖通過審查后，便可以進(jìn)入界面的視覺設(shè)計(jì)環(huán)節(jié)，這個(gè)環(huán)節(jié)的設(shè)計(jì)圖即網(wǎng)站最終呈現(xiàn)給用戶的界面。界面設(shè)計(jì)要求設(shè)計(jì)規(guī)范，圖片、內(nèi)容真實(shí)。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程6.測(cè)試驗(yàn)證測(cè)試驗(yàn)證是網(wǎng)頁(yè)界面設(shè)計(jì)的最后一個(gè)環(huán)節(jié)。測(cè)試驗(yàn)證是指讓具有代表性的用戶進(jìn)行典型操作，設(shè)計(jì)人員和開發(fā)人員在此環(huán)節(jié)共同觀察、記錄，可以對(duì)設(shè)計(jì)的細(xì)節(jié)進(jìn)行相關(guān)的調(diào)整。最后將整理好的網(wǎng)頁(yè)界面文件運(yùn)用文件傳送協(xié)議（FileTransferProtocol，F(xiàn)TP）傳輸工具傳輸?shù)骄W(wǎng)絡(luò)上，以供用戶訪問。4.1.2?網(wǎng)頁(yè)界面設(shè)計(jì)的流程網(wǎng)頁(yè)界面設(shè)計(jì)的原則可以分為直截了當(dāng)、簡(jiǎn)化交互、足不出戶、提供邀請(qǐng)、巧用過渡、即時(shí)反應(yīng)六大原則。1.直截了當(dāng)直截了當(dāng)即“所見即所得”的直接操作原則。例如，用戶不用為了編輯內(nèi)容而打開另一個(gè)頁(yè)面，可以直接在頁(yè)面內(nèi)實(shí)現(xiàn)編輯。4.1.3?網(wǎng)頁(yè)界面設(shè)計(jì)的原則2.簡(jiǎn)化交互簡(jiǎn)化交互即充分理解用戶的意圖，令用戶操作簡(jiǎn)便，不為用戶造成麻煩。使用頁(yè)面內(nèi)容中的操作工具，將交互操作和信息內(nèi)容更好的融合，從而簡(jiǎn)化交互，在狀態(tài)1中信息內(nèi)容左側(cè)設(shè)計(jì)了一個(gè)可單擊的控件，當(dāng)鼠標(biāo)指針懸停時(shí)，變成狀態(tài)2，此時(shí)鼠標(biāo)指針變?yōu)椤笆中巍保丶咨舶l(fā)生了變化，提醒用戶進(jìn)行單擊。4.1.3?網(wǎng)頁(yè)界面設(shè)計(jì)的原則3.足不出戶任何頁(yè)面頻繁刷新和跳轉(zhuǎn)都會(huì)引起盲視，打斷用戶心流（Flow，是一種將個(gè)人精力完全投注在某種活動(dòng)上的感覺）。適當(dāng)?shù)剡\(yùn)用覆蓋層、嵌入層、虛擬頁(yè)面以及流程處理等方法，將操作保持在同一個(gè)頁(yè)面中進(jìn)行，通過單擊左側(cè)的展開控件，查看某個(gè)列表項(xiàng)的詳情信息，以保證用戶不必跳轉(zhuǎn)頁(yè)面，打斷心流。4.1.3?網(wǎng)頁(yè)界面設(shè)計(jì)的原則4.提供邀請(qǐng)邀請(qǐng)是用于引導(dǎo)用戶進(jìn)入下一個(gè)交互層次的暗示和提醒。例如“拖放”“行內(nèi)編輯”“上下文工具”等一大堆交互需要處理時(shí)，都可能發(fā)生被用戶忽視的問題。所以向用戶提供預(yù)期功能邀請(qǐng)、引導(dǎo)操作邀請(qǐng)以及白板式邀請(qǐng)等邀請(qǐng)是順利完成人機(jī)交互的關(guān)鍵，在沒有活動(dòng)時(shí)，通過醒目的按鈕邀請(qǐng)用戶創(chuàng)建活動(dòng)。4.1.3?網(wǎng)頁(yè)界面設(shè)計(jì)的原則5.巧用過渡在界面中，適當(dāng)加入一些翻轉(zhuǎn)、傳送帶以及滑入/滑出等過渡效果，能讓界面生動(dòng)有趣，同時(shí)也能向用戶揭示界面元素間的關(guān)系。4.1.3?網(wǎng)頁(yè)界面設(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)組合，隨著用戶輸入，實(shí)時(shí)顯示搜索結(jié)果，就能為用戶帶來(lái)高度靈敏的界面。4.1.3?網(wǎng)頁(yè)界面設(shè)計(jì)的原則網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范可以通過網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位、界面結(jié)構(gòu)、布局、文字及圖標(biāo)5個(gè)方面進(jìn)行詳盡的剖析。4.2?網(wǎng)頁(yè)界面的設(shè)計(jì)規(guī)范網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位網(wǎng)頁(yè)界面設(shè)計(jì)的界面結(jié)構(gòu)網(wǎng)頁(yè)界面設(shè)計(jì)的布局網(wǎng)頁(yè)界面設(shè)計(jì)的文字網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)1.相關(guān)單位（1）英寸。英寸（inch）是英式的長(zhǎng)度單位，用in表示。一般1in=2.54cm。許多顯示設(shè)備經(jīng)常用in來(lái)表示大小。目前主流的臺(tái)式機(jī)顯示器尺寸一般為21.5in、24in、27in、32in，主流的筆記本電腦屏幕尺寸一般為13.3in、14in、15.6in。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位27in的iMac15.6in的MacBookPro（2）像素。像素（pixel）是組成屏幕畫面最小的點(diǎn)，用px表示。把屏幕中的圖像無(wú)限放大，會(huì)發(fā)現(xiàn)圖像是由一個(gè)個(gè)小點(diǎn)組成的，這些小點(diǎn)就是像素。使用Photoshop軟件設(shè)計(jì)界面的網(wǎng)頁(yè)設(shè)計(jì)師使用的單位都是像素。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位在Photoshop中設(shè)計(jì)網(wǎng)頁(yè)界面的單位（3）分辨率。分辨率（Resolution）即屏幕中像素的數(shù)量，它等于畫面水平方向的像素值×畫面垂直方向的像素值。屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位1366*768px（左）1920*1080px（右）2.設(shè)計(jì)尺寸（1）頁(yè)面寬度。在進(jìn)行界面設(shè)計(jì)時(shí)，結(jié)合市場(chǎng)占有率以及為了能夠適應(yīng)寬度至少為1920px的屏幕，UI界面設(shè)計(jì)師都是以1920px×1080px為基準(zhǔn)進(jìn)行設(shè)計(jì)的。使用Photoshop時(shí)推薦創(chuàng)建寬度為1920px的畫布，高度根據(jù)網(wǎng)頁(yè)的要求設(shè)定即可。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位網(wǎng)頁(yè)中常見的設(shè)備尺寸及市場(chǎng)占有率（3）首屏高度。用戶打開計(jì)算機(jī)或移動(dòng)設(shè)備中的瀏覽器時(shí)，在不滾動(dòng)屏幕的情況下，第一眼看到的畫面高度就是首屏高度。通常首屏以內(nèi)的頁(yè)面關(guān)注度為80.3%，首屏以外的頁(yè)面關(guān)注度僅有19.7%，因此首屏對(duì)網(wǎng)站設(shè)計(jì)有著極大的重要性。首屏高度需要減去瀏覽器菜單欄以及狀態(tài)欄的高度。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位如果以1080px為基準(zhǔn)，將減去瀏覽器菜單欄以及狀態(tài)欄后的高度，作為設(shè)計(jì)稿的首屏高度，這樣的設(shè)計(jì)稿在其他分辨率較低的屏幕上，其圖片的核心內(nèi)容會(huì)因?yàn)槠聊惶鞍倍患舨玫?。因此，綜合分辨率及瀏覽器的統(tǒng)計(jì)數(shù)據(jù)，首屏參考線高度建議為768px，圖像可視區(qū)、核心內(nèi)容安全高度建議為560px。4.2.1?網(wǎng)頁(yè)界面設(shè)計(jì)的尺寸及單位網(wǎng)頁(yè)界面主要由頁(yè)頭（Header）、內(nèi)容主體（Body）、頁(yè)腳（Footer）組成，其中頁(yè)頭包含網(wǎng)站標(biāo)識(shí)、導(dǎo)航等元素，內(nèi)容主體包含橫幅和內(nèi)容相關(guān)的信息，頁(yè)腳包含、版權(quán)信息。4.2.2?網(wǎng)頁(yè)界面設(shè)計(jì)的界面結(jié)構(gòu)1.頁(yè)面分割與App界面設(shè)計(jì)一樣，在網(wǎng)頁(yè)中，我們也可以利用一系列垂直和水平的參考線，將頁(yè)面分割成若干個(gè)有規(guī)律的列或格子，分割后的列或格子統(tǒng)稱為網(wǎng)格系統(tǒng)，再以這些列或格子為基準(zhǔn)，進(jìn)行頁(yè)面的布局設(shè)計(jì)，使布局規(guī)范、簡(jiǎn)潔、有秩序。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局2.網(wǎng)格系統(tǒng)的組成（1）單元格。網(wǎng)格系統(tǒng)的基本單位是單元格。設(shè)計(jì)師需要先定義好網(wǎng)格的單元格大小。常見的PC端網(wǎng)頁(yè)的最小單位的邊長(zhǎng)有4px、6px、8px、10px、12px，目前主流計(jì)算機(jī)設(shè)備的屏幕分辨率在垂直與水平方向上基本都可以被8整除，同時(shí)以8px作為單元格的邊長(zhǎng)，用戶在視覺感受上也較為舒適。因此推薦使用8px作為單元格的邊長(zhǎng)。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局（2）列+水槽+邊距。當(dāng)確定好單元格后，則需要確定列、水槽和邊距這3個(gè)元素。其中列是放置內(nèi)容的區(qū)域。水槽是列與列之間的距離，有助于分離內(nèi)容。邊距是內(nèi)容與屏幕左右邊緣之間的距離。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局3.網(wǎng)格系統(tǒng)的搭建（1）確定屏幕寬度。搭建網(wǎng)格系統(tǒng)的第一步是創(chuàng)建畫布。（2）確定網(wǎng)格區(qū)域。確定好網(wǎng)頁(yè)的尺寸，接下來(lái)需要確定網(wǎng)格區(qū)域。網(wǎng)格區(qū)域的確定應(yīng)在結(jié)合尺寸的基礎(chǔ)上，根據(jù)不同的布局進(jìn)行。如果是寬度為1920px的上下布局的網(wǎng)頁(yè)，通常網(wǎng)格區(qū)域會(huì)在中間的安全寬度區(qū)域。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局不同布局的網(wǎng)頁(yè)的網(wǎng)格區(qū)域（3）確定列數(shù)、水槽、邊距。?列數(shù)。PC端網(wǎng)頁(yè)常用12列網(wǎng)格和24列網(wǎng)格。12列網(wǎng)格在前端開發(fā)開源工具庫(kù)Bootstrap與Foundation中廣泛使用，適用于業(yè)務(wù)信息分組較少的中后臺(tái)頁(yè)面設(shè)計(jì)。24列網(wǎng)格適用于業(yè)務(wù)信息量大、信息分組較多的中后臺(tái)頁(yè)面設(shè)計(jì)。移動(dòng)端網(wǎng)頁(yè)則對(duì)應(yīng)以6列網(wǎng)格和12列網(wǎng)格為主。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局?水槽。水槽以及橫向間距的寬度可以依照單元格的邊長(zhǎng)8px為增量進(jìn)行統(tǒng)一設(shè)置，如8px、16px、24px、32px、40px。其中24px最為常用。移動(dòng)端網(wǎng)頁(yè)可根據(jù)App界面設(shè)計(jì)規(guī)范選擇水槽，一般有24px、30px、32px、40px，建議采用32px水槽。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局?邊距。邊距通常是水槽的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)行選擇。移動(dòng)端網(wǎng)頁(yè)可根據(jù)App界面設(shè)計(jì)規(guī)范選擇邊距，一般有20px、24px、30px、32px、40px以及50px，建議采用30px邊距。4.2.3?網(wǎng)頁(yè)界面設(shè)計(jì)的布局1.Web安全字體Web安全字體是用戶系統(tǒng)中自帶的字體，如Windows的微軟雅黑、macOS的蘋方。另外CSS定義了5種通用字體系列：Serif字體、Sans-serif字體、Monospace字體、Cursive字體、Fantasy字體。設(shè)計(jì)師可以大膽采用Web安全字體，根據(jù)開發(fā)優(yōu)先級(jí)、設(shè)計(jì)美觀度，從高到低將常見的Web安全字體進(jìn)行排列。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字2.字號(hào)大小基于用戶計(jì)算機(jī)顯示器的閱讀距離（50cm）以及最佳閱讀角度（30°），14pt字號(hào)能夠保證用戶在多數(shù)常用顯示器上的閱讀效率最佳。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字我們以14pt字號(hào)為默認(rèn)字號(hào)，并運(yùn)用不同的字號(hào)和字重體現(xiàn)網(wǎng)頁(yè)中的視覺信息層次。移動(dòng)端網(wǎng)頁(yè)中的字號(hào)選擇可以參考第3章“App界面設(shè)計(jì)”。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字3.文字字重在大部分情況下，只會(huì)出現(xiàn)Regular和Medium兩種字重，分別對(duì)應(yīng)CSS語(yǔ)言中fontweight屬性的400和500。在英文字體加粗的情況下會(huì)采用Semibold字重，對(duì)應(yīng)代碼中的600。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字4.文字行高應(yīng)給不同字號(hào)的文字設(shè)置對(duì)應(yīng)的行高，這樣才可以維持網(wǎng)頁(yè)中文字的秩序之美。在版式設(shè)計(jì)中，西文的行高基本是字號(hào)的1.2倍，中文的行高基本是字號(hào)的1.5～2倍。在網(wǎng)頁(yè)設(shè)計(jì)中，可以參考版面設(shè)計(jì)的字號(hào)設(shè)置規(guī)律，或使用AntDesign定義的10個(gè)不同字號(hào)以及與之對(duì)應(yīng)的行高。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字知識(shí)拓展：AntDesign是經(jīng)過大量的項(xiàng)目實(shí)踐和總結(jié)，開發(fā)出的一套設(shè)計(jì)語(yǔ)言與研發(fā)框架。其中文字行高是該語(yǔ)言受到五聲音階以及自然律的啟發(fā)而定義的。這套文字行高的規(guī)律為“字號(hào)+8=行高”。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字5.字間距不同的字母有不同的外形，如果使用相同的字間距會(huì)造成字母顯示不協(xié)調(diào)，因此需要調(diào)整字間距來(lái)提升文字的可讀性。使用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，將“字符”面板中的字間距選擇為“視覺”，排版文字的可讀性最佳。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字6.行間距行間距讓字與字之間有了“可呼吸”的空間，行間距對(duì)文章的易讀性有很大影響。網(wǎng)頁(yè)設(shè)計(jì)中的行間距可以使用AntDesign定義的固定數(shù)值8px，即行高減去字號(hào)的數(shù)值。需要注意的是，使用Photoshop進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，“字符”面板中的行距并不等同于這里的行間距，在Photoshop里的行距需要根據(jù)文字行高的規(guī)范進(jìn)行設(shè)置。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字7.段落間距段落間距能夠保持頁(yè)面的“節(jié)奏”，它的設(shè)置與行高和行間距有著密切聯(lián)系。段落間距建議設(shè)置為行高與兩倍行間距之和。4.2.4?網(wǎng)頁(yè)界面設(shè)計(jì)的文字1.設(shè)計(jì)尺寸通常在1024px×1024px的畫板中制作圖標(biāo)，需留出64px的邊距，保證不同面積的圖標(biāo)有協(xié)調(diào)一致的視覺效果。AntDesign提供了6種圖標(biāo)設(shè)計(jì)中最常用的基本形式供網(wǎng)頁(yè)設(shè)計(jì)師參考，以便設(shè)計(jì)師快速地調(diào)用并在此基礎(chǔ)上做變形。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)2.設(shè)計(jì)元素AntDesign中將最常見的基本元素歸納為點(diǎn)、線、圓角、三角。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)基本元素在使用時(shí)的尺寸?點(diǎn)：AntDesign建議，在點(diǎn)的尺寸選擇上采用16的倍數(shù)這一原則。常用點(diǎn)的4種尺寸分別為80、96、112、128。?線：AntDesign在線條粗度上采用8的倍數(shù)這一原則，線條粗度以8的倍數(shù)遞增。常用線的4種尺寸分別為56、64、72、80。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)?圓角：AntDesign對(duì)于圓角的尺寸選擇采取的也是8的倍數(shù)這一原則，最常用的圓角的3種尺寸分別為8、16、32。其中圖標(biāo)內(nèi)角使用直角的處理方式。?三角：AntDesign受到美國(guó)戰(zhàn)斗機(jī)F-14的啟發(fā)，將常用的三角的角度定在約76°。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)AntDesign除了定義角度，對(duì)圖標(biāo)中實(shí)心箭頭的尺寸也做了調(diào)整。在圖標(biāo)頂角大約保持76°的基礎(chǔ)上，寬度使用8倍數(shù)的原則，進(jìn)行圖標(biāo)放大或縮小時(shí)，寬度變化的間隔建議為24的倍數(shù)。圖標(biāo)的W為寬度、H為高度，單位可以是pt或px。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)3.視覺平衡（1）圖標(biāo)造型：彎曲的線條在視覺上比豎直的線條看起來(lái)細(xì)，因此需要對(duì)72px尺寸的圓形外邊框進(jìn)行4px的微調(diào)。（2）擺放角度：傾斜的線條同樣在視覺上會(huì)比豎直的線條看起來(lái)細(xì)，因此需要對(duì)傾斜的線條進(jìn)行4px的微調(diào)。（3）留白空間：當(dāng)圖形的留白不足時(shí)，可通過調(diào)整線條的粗細(xì)來(lái)平衡視覺重量。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)4.使用原則為支持響應(yīng)式設(shè)計(jì)，交付前端的圖標(biāo)應(yīng)盡量使用可縮放的矢量圖形（ScalableVectorGraphics，SVG）格式。或者將圖標(biāo)直接上傳到iconfont中，讓前端直接調(diào)用圖標(biāo)字體。4.2.5?網(wǎng)頁(yè)界面設(shè)計(jì)的圖標(biāo)iconfont阿里巴巴矢量圖標(biāo)庫(kù)1.首頁(yè)網(wǎng)站首頁(yè)，又稱為網(wǎng)站主頁(yè)，通常是用戶通過搜索引擎訪問網(wǎng)站時(shí)所看到的首個(gè)頁(yè)面。首頁(yè)是用戶了解網(wǎng)站的第一步，通常會(huì)包含產(chǎn)品展示圖、產(chǎn)品介紹信息、用戶注冊(cè)登錄入口等。4.3?網(wǎng)頁(yè)常用的界面類型2.列表頁(yè)列表頁(yè)，又稱為“List頁(yè)”，是對(duì)信息進(jìn)行歸類管理，便于用戶快速查看基本信息及操作的頁(yè)面。在列表頁(yè)中，設(shè)計(jì)的關(guān)鍵在于信息的可閱讀性及可操作性。4.3?網(wǎng)頁(yè)常用的界面類型3.詳情頁(yè)詳情頁(yè)是產(chǎn)品信息的主要承載頁(yè)面，對(duì)于信息效率和優(yōu)先級(jí)判定有一定的要求。清晰的布局能令用戶快速看到關(guān)鍵信息，提高決策效率。4.3?網(wǎng)頁(yè)常用的界面類型4.專題頁(yè)專題頁(yè)是針對(duì)特定的主題而制作的頁(yè)面，包括網(wǎng)站相應(yīng)模塊、頻道所涉及的功能以及該主題事件的相關(guān)內(nèi)容。專題頁(yè)因?yàn)樾畔⒇S富、設(shè)計(jì)精美，會(huì)吸引大量用戶。4.3?網(wǎng)頁(yè)常用的界面類型5.控制臺(tái)頁(yè)控制臺(tái)頁(yè)，又稱為“Dashboard”