PhotoshopCC UI設計案例教程PPT完整全套教學課件

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

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

1.1.2

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

1.1.3

UI設計常用術語中英文對照

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

1.1.3

UI設計常用術語中英文對照

1.1.4UI設計常用軟件

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

1.2

UI設計項目流程

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

1.2.1

項目設計流程

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

1.2.2

UI設計流程

UI設計流程圖

1.3

UI設計的風格表現(xiàn)

UI設計的風格在2017年由擬物化為主轉化到了以扁平化為主，因此UI設計的風格主要可以分為擬物化和扁平化兩大類。擬物化（左）扁平化（右）

1.3

UI設計的風格表現(xiàn)

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

1.3

UI設計的風格表現(xiàn)

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

1.4

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

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

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

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

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

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

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

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

UI設計崗位細分1.4.1

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

能力需求（以主流城市10000元+UI設計師為基準）1.4.1

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

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

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

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

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

1.4.2

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

UI設計需掌握的主流軟件1.5

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

iOS設計規(guī)范1.5

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

網(wǎng)站推薦1.5

UI設計的學習方法

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

UI設計的學習方法第2章圖標設計

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

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

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

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

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

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

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

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

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

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

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

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

描邊為2dp的圖標解析圖2.2.2

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

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

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

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

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

2.3.1像素風格游戲中的像素圖標扁平化風格自2013年iOS7的推出而成為了設計的主流趨勢，扁平化風格的圖標也成為了界面圖標的主導風格。扁平化風格的圖標簡潔美觀、功能突出，可以細分為線性圖標、面性圖標和線面結合圖標。

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

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

2.3.2扁平化風格圓角圖標

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

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

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

2.3.2扁平化風格不透明度圖標：不透明度圖標有層次，適用范圍較廣。不透明度圖標

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

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

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

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

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

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

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

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

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

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

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

2.3.2扁平化風格錯位填充：錯位填充圖標，面與線進行錯位，一般用于App界面中的底部標簽欄。點綴填充圖標

2.3.2扁平化風格全部填充：全部填充圖標，充實、飽滿，一般用于App界面中的分類或是引導頁與彈框中。全部填充圖標

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Android界面結構Android界面主要由狀態(tài)欄、導航欄、頂部應用欄組成。

Android界面結構3.2.2Android設計規(guī)范3.

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

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

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

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

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

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

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

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

3.3.1閃屏頁

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

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

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

3.3.2引導頁

3.3.2引導頁高德地圖App的功能說明型引導頁

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

搞笑賣萌型引導頁3.3.2引導頁首頁又稱為“起始頁”，是用戶使用App的第一頁。首頁承擔著流量分發(fā)的作用，是展現(xiàn)產(chǎn)品氣質(zhì)的關鍵頁面，可以細分為列表型、網(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)品詳細信息，用于用戶產(chǎn)生消費的頁面。頁面內(nèi)容較豐富，以圖文信息為主。

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

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

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

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

3.5課堂練習——制作ShineApp效果圖

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

3.6

課后習題——制作CircleApp效果圖

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

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