UI界面設計課件.ppt

《UI界面設計課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《UI界面設計課件.ppt（141頁珍藏版）》請在裝配圖網(wǎng)上搜索。

UI界面設計,平面設計專業(yè),目錄,一、UI界面設計相關(guān)知識二、UI界面設計常用方法和原則三、UI界面常用元素制作四、計算機界面設計五、播放器界面設計六、手機界面設計七、專題網(wǎng)頁設計,一、UI界面設計相關(guān)知識,1.UI界面設計的概念2.UI設計師3.界面設計涉及的范圍及學科4.界面設計的流程5.UI界面設計規(guī)范,”,“,一、UI界面設計相關(guān)知識,1.UI界面設計的概念,一、UI界面設計相關(guān)知識-1.UI界面設計的概念,,1.什么是界面設計？（難點）2.UI設計師3.界面設計涉及的范圍及學科4.界面設計的流程5.UI界面設計規(guī)范參考書目：《用戶界面設計與制作》《交互設計》《UI進化論——移動設備人機交互界面設計》其他網(wǎng)絡資料,UI界面設計相關(guān)知識-1.UI界面設計的概念,,通過什么操作ATM機？,ATM機操作界面,UI界面設計相關(guān)知識-1.UI界面設計的概念,通過什么操作Photoshop程序？,軟件界面,UI界面設計相關(guān)知識-1.UI界面設計的概念,通過什么操作手機？,手機界面,UI界面設計相關(guān)知識-1.UI界面設計的概念,,1、什么是界面設計（UI）？界面——UI即UserInterface(用戶界面)的簡稱。廣義上來講，UI界面是人與機器進行交互的操作平臺，即用戶與機器相互傳遞信息的媒介。,,,,,,用戶,機器,界面,”,“,UI界面設計相關(guān)知識-1.UI界面設計的概念,概括成一句話就是——人和機器之間的界面。這個界面實際上是體現(xiàn)在我們生活中的每一個環(huán)節(jié)的，例如開車時候方向盤和儀表盤就是這個界面，看電視的時候遙控器和屏幕就是這個界面，用電腦的時候鍵盤和顯示器就是這個界面。于是我們可以把UI可以分成兩大類：硬件界面和軟件界面。本課所關(guān)注的UI設計特指軟件界面，我們也可以稱為特殊的或者狹義的UI設計。,UI界面設計相關(guān)知識-1.UI界面設計的概念,,一、什么是UI界面設計？界面設計即UserInterfaceDesign（用戶界面設計）的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。,,,,,人機交互,操作邏輯,界面美觀,,問題一：界面設計=版式設計？所謂版式設計，就是在版面上，將有限的視覺元素進行有機的排列組合。界面設計的內(nèi)容包括：圖形、文字、色彩、編排，使界面起到美化效果的作用。需要研究用戶需求，研究目標用戶。,,問題二：界面設計=用戶+界面？或者界面設計就是單單指界面美化設計？從字面上看，UI有用戶與界面兩個組成部分，但實際上還有還有用戶與界面之間的交互關(guān)系。界面設計需要定位使用者、使用環(huán)境、使用方式。不僅僅是美化界面，還有需要研究用戶、讓界面變得更友好、更有趣、更易用、更舒適。,,,,,UI,用戶,界面,=,+,,交互,,,=,,版式,考慮用戶的心理需求，研究目標用戶,前面講到UI設計包括兩方面——美化和交互。讓大家更了解UI設計的重要性從美化的角度看：UI優(yōu)化后:1更有時尚感、層次感2.從QQ圖像就能知道是QQ的登入界面，更直觀、形象。從交互的角度：未UI優(yōu)化的界面：1.功能過于簡單2.登入沒有體現(xiàn)按鈕的特點，而不會單擊3.密碼輸入框也沒有做掩密處理，被盜號的風險系數(shù)增加,”,“,ui設計是做什么的？UI設計從工作內(nèi)容上來說分為3個方向。它主要是由UI研究的3個因素決定的，其分別是研究界面，研究人與界面的關(guān)系，研究人。1.研究界面----圖形設計師國內(nèi)目前大部分UI工作者都是從事這個行業(yè)。也有人稱之為美工，但實際上不是單純意義上的美術(shù)工人，而是軟件產(chǎn)品的產(chǎn)品外形設計師。這些設計師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設計教育背景，例如工業(yè)外形設計，裝潢設計，信息多媒體設計等。2.研究人與界面的關(guān)系---交互設計師在圖形界面產(chǎn)生之前，長期以來UI設計師就是指交互設計師。交互設計師的工作內(nèi)容就是設計軟件的操作流程，樹狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設計，并且確立交互模型，交互規(guī)范。交互設計師一般都是軟件工程師背景居多。,2.UI設計師,”,“,3.研究人----用戶測試/研究工程師。任何的產(chǎn)品為了保證質(zhì)量都需要測試，軟件的編碼需要測試，自然UI設計也需要被測試。這個測試和編碼沒有任何關(guān)系，主要是測試交互設計的合理性以及圖形設計的美觀性。測試方法一般都是采用焦點小組，用目標用戶問卷的形式來衡量UI設計的合理性。這個職位很重要，如果沒有這個職位，UI設計的好壞只能憑借設計師的經(jīng)驗或者領導的審美來評判，這樣就會給企業(yè)帶來嚴重的風險性。用戶研究工程師一般是心理學人文學背景比較合適。綜上所述UI設計師就是：軟件圖形設計師、交互設計師和用戶研究工程師。,UI界面設計相關(guān)知識,,3.界面設計涉及的范圍及學科界面設計是一種結(jié)合美學、計算機科學、心理學、行為學、人機工程學、信息學以及市場學等的綜合性學科，強調(diào)人—機—環(huán)境三者作為一個系統(tǒng)進行總體設計。,UI界面設計相關(guān)知識-4.界面設計的工作流程,,4.界面設計的工作流程：產(chǎn)品制作人，寫產(chǎn)品計劃書。用戶體驗研究員，作調(diào)查分析。信息建構(gòu)師，設計產(chǎn)品架構(gòu)。交互設計師，作出互動流程。視覺設計師，作出頁面視覺設計。前臺工程師，前臺開發(fā)。后臺工程師，后臺開發(fā)。用戶體驗研究員，做用戶測試確保質(zhì)量。,UI界面設計相關(guān)知識-4.界面設計的流程,,,,線框原型、黑白原型稿,,產(chǎn)品原型,,界面設計,”,“,UI界面設計相關(guān)知識-5.UI界面設計的規(guī)范,手機界面設計規(guī)范,iOS系統(tǒng)規(guī)范,iphone界面基本組成元素,狀態(tài)欄(statusbar)：就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域，其高度為：40px導航欄(navigation)：顯示當前界面的名稱，包含相應的功能或者頁面間的跳轉(zhuǎn)按鈕，其高度為：88px主菜單欄(submenu，tab)（標簽欄）：類似于頁面的主菜單，提供整個應用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px內(nèi)容區(qū)域(content)：展示應用提供的相應內(nèi)容，整個應用中布局變更最為頻繁，其高度為：734px。內(nèi)部設計1、所有能點擊的圖片不得小于44px（Retina需要88px）2、單獨存在的部件必須是雙數(shù)尺寸3、充分考慮每個控制按鈕在4中狀態(tài)下的樣式，如圖,,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,1.iOS界面尺寸,ppi（pixelsperinch）即每英寸像素，也叫像素密度。,2.圖標尺寸,Iphone6圖例,3.狀態(tài)欄規(guī)范,用戶依賴于狀態(tài)欄的重要信息，如信號，時間和電池。文本和圖標可以是白色或黑色，但背景可以被設計成任何顏色，并與導航欄合并。pt（point）是印刷業(yè)上長使用的單位，磅的意思，是一種固定的長度單位，可以用測量設備測量的單位。pt=px*3/41pt=1/72英寸,4.導航欄規(guī)范,導航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動作按鈕，如添加，編輯，完成。請注意，如果您使用這些系統(tǒng)圖標，您不需要為它們單獨設計。,導航欄分類,第一種：app標簽導航標簽導航位于頁面底部，通常包含5個標簽是比較合適的數(shù)量。這種導航是非常常見的，如果你的應用需要用戶頻繁的在不同分頁切換，可以采用這種導航。它的缺點是會占用一定高度的空間。如微信最新版的APP界面設計圖。,第二種：APP舵式導航目前流行一種標簽導航的變體，個人把它稱為“舵式導航”，因為它的樣式很像輪船上用來指揮的船舵，兩側(cè)是其他操作按鈕。當頁面有處于同一層級的幾大部分內(nèi)容，同時又需要一個非常重要且頻繁操作的入口，就可以采用這種APP導航模式。如下圖葡萄社APP。,第三種：APP抽屜式導航模式抽屜導航是講菜單隱藏在當前頁面后，點擊入口即可像拉抽屜一樣拉出菜單，這種導航的優(yōu)點是節(jié)省頁面展示空間，讓用戶將更多的注意力聚焦到當前頁面。比較適合于不那么需要頻繁切換內(nèi)容的應用，例如對設置、關(guān)于等內(nèi)容的隱藏。這種導航設計需要注意的是一定要提供菜單畫出的過渡動畫。自從path應用以來，這種抽屜式導航菜單非常受到大家的喜愛。,第四種：APP宮格導航（比如九宮格）這種宮格導航是將主要入口全部聚合在頁面，讓用戶做出選擇。這樣的組織方式無法讓用戶在第一時間看到內(nèi)容，選擇壓力較大，采用這種導航的應用已經(jīng)越來越少，往往用在二級頁作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。,第五種：APP混合組合導航當用戶需要聚焦內(nèi)容，同時又需要一些快捷入口能夠連接到某些頁面時，就可以采用組合導航。組合導航上方用宮格的形式展現(xiàn)快捷入口，與標簽導航不同的是，這些宮格入口之間不需要是平級的關(guān)系，也不必包含整個層級的內(nèi)容，你可以將它理解為一種圖形化的文字鏈。這種導航比較靈活，能適應架構(gòu)的快速調(diào)整。,第六種：列表式APP導航列表式APP導航是我們在APP設計種必不可少的一個信息承載模式。當然作為一個APP的導航也是非常方便的。不過目前來看，列表導航通常用于二級頁，由于它與宮格導航一樣，不會默認展示任何實質(zhì)內(nèi)容，所以通常app不會在首頁使用它。這種導航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對應的頁面。列表項目可以通過間距、標題等進行分組。,第七種：tab導航用于二級頁，本質(zhì)和標簽導航相同，當應用層級較多的情況下，可以采用tab導航，典型場景是用于改變的當前的視圖，或?qū)Ξ斍绊撁鎯?nèi)容進行分類查看。,第八種：大圖輪播導航或是大圖上面的導航設計當你的應用信息足夠扁平，可以嘗試輪播導航，如果應用得當，能夠給人耳目一新的體驗。這種導航能夠最大程度的保證應用的頁面簡潔性，操作也是最方便的。但是缺點是不能夠快速的定位對應的分頁內(nèi)容。,5.搜索欄,6.工具欄,Stepper控件,7.提示框,提示對話框是用于輸送關(guān)鍵信息和提示快速操作。提示應保持最少文字，退出一定是明顯。,8.分段控制框,9.滑塊,10.開關(guān),11.布局標準控件,ios1334x750pxIphone6/6s,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,12.圖標網(wǎng)格,Apple使用黃金分割在它們的一些圖標上。這讓圖標保持良好的比例，同時確保了美感。雖然這是一個很好的規(guī)范，但它不是嚴格要求。甚至Apple在很多圖標上也省略了它。,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,13.標準色,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,14.字體大小、規(guī)格,一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標題用20pt+。IOS9中文字體：蘋方/PingFangSCIOS8中文字體：常州華文的黑體-簡，在macosx系統(tǒng)中選擇黑體-簡IOS英文、數(shù)字：Helvetial,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,15.間距和對齊方式,一般的規(guī)范最低要求8pt空白或邊距。這將有足夠留白空間，使得布局更容易掃描和文本更具可讀性。而且在此基礎上，UI元素應對齊，文本應該有相同的基線位置。,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,Android系統(tǒng)界面規(guī)范,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,1.Android界面尺寸,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,2.界面尺寸（1280 x720px）,狀態(tài)欄高度：50px導航欄高度：96px標簽欄高度：96pxAndroid最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，當然高度也是和標簽欄一樣的：96px內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）,,3.常用尺寸,一般把48dp作為可觸碰UI原件的標準，48dp=72px=9mm，這是一個用戶手指能夠準確舒適觸碰的最小尺寸。Android界面默認菜單欄的高度是：72px；Android界面每個元素之間最小的間距是：12px；Android界面默認btn的高度是：60pxpx=ppi/160*dp,4.常用屏幕尺寸,240 x320ldpi（低等屏幕）320 x480mdpi（中等屏幕）480 x800hdpi（高清屏幕）720 x1280 xhdpi（超高清屏幕）相應的圖片資源尺寸的比例關(guān)系為1：1.5:2也就是第一套圖為mdpi的資源圖片，hdpi可調(diào)整到150%，xhdpi可調(diào)整到200%。,點擊添加文本,點擊添加文本,點擊添加文本,點擊添加文本,5.字體規(guī)范、大小,5.X版本：思源黑體/NotoSansHan5.0以下版本：DroidSansFallback，可用文泉驛微米黑代替英文、數(shù)字：Roboto標題（58px或60px）二級標題（44px或48px）正文字體（32px或36px）；英文最小字號22px，中文最小字號18px。,UC瀏覽器界面,6.安卓系統(tǒng)界面示例,二、UI界面設計的常用方法及原則,1.UI界面設計的原則2.UI界面設計中的構(gòu)成方法3.UI界面設計風格,二、UI界面設計的常用方法及原則-1.UI界面設計的原則,,1.UI界面設計的原則一致性和必要的個性化使用用戶的語言用戶記憶負擔最小化用戶界面的功能性容易理解清楚的報錯信息快捷方式的組合連續(xù)性方便退出幫助系統(tǒng),二、UI界面設計的常用方法及原則-1.UI界面設計的原則,,1）、一致性和必要的個性化OFFICE軟件風格一致，要有統(tǒng)一的字體字號、統(tǒng)一的色調(diào)、統(tǒng)一的提示用詞、窗口在統(tǒng)一的位置、按鈕也在窗口的相同的位置。目的是能夠減少記憶量、減少出錯概率而且能迅速積累操作經(jīng)驗。個性化。在一致性下，適當突出該軟件的“個性化”。如PPT中不同于word有自己的動畫效果。,二、UI界面設計的常用方法及原則-1.UI界面設計的原則,,2）、使用用戶的語言界面中要注意使用用戶的語言，而不是設計者的語言。最有效的方法：讓數(shù)據(jù)說話，如詢問用戶、用戶投票等。因此，用戶使用系統(tǒng)的錯誤會降到最低。,,3）、用戶記憶負擔最小化瀏覽信息比記憶更容易，在設計時一定要考慮到減輕用戶的記憶負擔。,,4）、用戶界面的功能性界面最基本的性能是具有功能性與使用性，通過界面設計，讓用戶明白功能操作，并將產(chǎn)品本身的信息更加順暢的傳遞給使用者，是功能界面存在的基礎與價值用戶界面一定要有基本的功能，設計者不能片面追求界面外觀漂亮而導致華而不實。,,5）、容易理解大多數(shù)的用戶都有豐富的生活經(jīng)驗，也就是使用各種工具或者玩具的經(jīng)驗。如果能夠在界面設計中把這些積累的生活經(jīng)驗和界面視覺元素對應或這連接起來就會讓用戶更容易理解。如電子書界面，模擬翻書的設計可以很快讓用戶理解如何操作，并且給讀者熟悉的閱讀體驗。,6）、清楚的報錯信息錯誤操作后，系統(tǒng)應該提供有針對性的錯誤信息反饋提示，讓用戶心里有數(shù)。,7）、快捷方式的組合在菜單及按鈕中使用快捷鍵可以讓用戶操作的更加快捷因此在一些軟件設計中會把的常用的功能用圖標按鈕的形式擺在工具條上或用快捷件。如在犀牛軟件中按住中間滾輪就能彈出常用的功能鍵或者在CAD軟件中每個常用工具都會有個相應的英文快捷鍵。直線工具：L(line),,8）、連續(xù)性一個有序的連續(xù)的界面能讓用戶輕松使用。在排列和版面布局上要有序，是水平排列還是垂直排列還是兩者都有之。如QQ界面。,9）.方便退出在界面的使用上要設計方便退出，提供不同可能性，如手機的退出，是按一個鍵就可退出還是一層一層的退出。10）.幫助系統(tǒng)它可以幫助用戶更快捷、更好的學習界面的使用，告訴用戶在遇到某些使用問題時該如何處理、減少用戶在使用中的挫折感。,2.UI界面設計中的構(gòu)成方法-網(wǎng)頁界面構(gòu)圖原則及方法,對稱平衡如果你想在你的網(wǎng)頁看上去美觀和優(yōu)雅，那么你應該做一個網(wǎng)站對稱。,2.1網(wǎng)頁設計構(gòu)圖原則,不對稱平衡不對稱平衡帶來一種自由隨意的感覺。盡管有時候看上去不是那么自然，但是它還是經(jīng)常在網(wǎng)頁設計中得到實用。,水平平衡如果你想在你的網(wǎng)頁看上去美觀和優(yōu)雅，那么你應該做一個網(wǎng)站對稱。,垂直平衡垂直結(jié)構(gòu)用于頭部和底部的元素非常相似的情形。這樣的布局往往運用于小元素的展示。,F模式用戶極少逐字閱讀文字。每個段落的開始兩個字最為重要，這將決定內(nèi)容是否能留住用戶。初始段落，副標題和要點都要保持醒目。,Z模式Z模式幾乎可以適用到任何的網(wǎng)頁交互，Z模式的優(yōu)點就是簡單。如果你的網(wǎng)站內(nèi)容很多并且很復雜的話，那么用這個模式，效果就會稍差。當然，這些都不是絕對的。當Z模式簡化布局，就可以增加轉(zhuǎn)化率,2.2兩種主要的網(wǎng)頁瀏覽模式,①九宮格網(wǎng)格構(gòu)圖,這種版式主要運用在分類為主的一級頁面，起到功能分類的作用。,②圓心點放射形構(gòu)圖,我們將主要的功能設置在版式的中位置，就能引導用戶的視線聚集在想要突出的功能點上，就算視線本來不在中間的位置，也能引導用戶再次回到中心的聚集處。,2.UI界面設計中的構(gòu)成方法-手機移動界面構(gòu)圖方法,2.3UI界面設計中的構(gòu)成方法-手機移動界面中的版式設計原理,③三角形構(gòu)圖,主要運用在文字與圖標的版式中，讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級羅列得更為規(guī)整和明確。在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點有描述。,④SF字形構(gòu)圖,,,,在進行界面設計的時候，對用戶的視覺移動方向的預設是非常重要的。在界面中加入更為順暢的構(gòu)圖設計引導用戶視線移動的元素，就能使用戶更多的觀察到產(chǎn)品的核心和產(chǎn)品的賣點。,2.UI界面設計中的構(gòu)成方法-手機移動界面構(gòu)圖方法,2.3UI界面設計中的構(gòu)成方法-手機移動界面中的版式設計原理,2.3UI界面設計中的構(gòu)成方法-手機移動界面中的版式設計原理,⑤信息的排布,對任何信息進行排布的時候，首先必須要掌握的是對齊/重復/親密/對比，貫穿設計的四大原則。,對齊,重復和對比,親密性,2.UI界面設計中的構(gòu)成方法-手機移動界面中的版式設計原理,⑥圖片的使用,頁面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會給人一種寧靜典雅、高級的感覺。提升圖版率會有充滿活力，使畫面有富有感染力的效果。,圖版率高、有感染力,圖版率低、寧靜典雅,使用色塊提高圖版率,擬物繪圖提高圖版率,在移動端界面中通常需要選取主色，標準色，點晴色。移動端與網(wǎng)頁端稍微不同，主色雖然是決定了畫面風格的色彩但是往往不會被大面積的使用。,鄰近色、同色系、漸變、對比色、明暗色、多色搭配等顏色搭配,⑦顏色的使用,⑧留白的藝術(shù),一、能使頁面的空間感更強，視線更開闊，通過留白來減輕頁面的壓迫感，使用戶進入一種輕松的氛圍。二、通過留白區(qū)分元素的存在，弱化元素與元素之間的阻隔三、通過留白有目的的突出表達的重點四、賦予頁面構(gòu)成產(chǎn)生不同的變化,①,②,③,④,在觀看事物時，往往會產(chǎn)生一些不同的視覺心理，著作權(quán)歸作者所有。在版式設計中同樣大量運用這些科學視覺方法對用戶進行視覺上的引導，也能讓設計師快速找到一些排版布局的方法。,⑨視覺心理的靈活運用,通欄、間距通常采用黃金比例,圓角、圓形比直角更容易讓人接受,照片、相片通常使用方形展示,避免單調(diào)，增加頁面節(jié)奏感,通過蒙版的方式控制頁面色調(diào),⑩沒有設計的設計,每一條線/每一行文字/每一個按鈕的存在都是都有它存在的理由。它不加無意義的修飾、不須陪村和烘托，讓用戶更關(guān)注內(nèi)容的主體，弱化對視覺的認知。甚至于用戶在滑動時看到一個按鈕或一行文字也感覺這是理所當然的存在。讓用戶感知不到刻意的設計，一切的發(fā)生都是那么自然。,3.UI界面設計風格,1.扁平化：風格簡單，無特效；排版簡潔；色彩絢麗；二維效果；,2.擬物化：3D特效；逼真；,3.卡通化：夸張；變形；,三、UI界面常用元素制作,1.常用圖形制作2.常用控件制作3.圖標設計與制作4.UI界面設計風格,按鈕；加載loading；日歷界面；旗幟元素；評價五角星的滿意度；好評度評價體系元素；網(wǎng)站常用運用到的提示；錯誤；警告；驗證成功等標志元素；還有視頻界面；音頻界面和tab切換界面的設計。,1.常用圖形制作,按鈕制作：,1、打開AdobePhotoshop，執(zhí)行菜單：“文件”／“新建”（快捷鍵Ctrl+N），彈出新建對話框，設置名稱：按鈕，寬度：570像素，高度：400像素，分辨率：72像素／英寸，顏色模式：RGB顏色、8位，背景內(nèi)容：白色，設置完畢后單擊確定按鈕，如圖1所示。,2、在圖層面板上單擊創(chuàng)建新圖層按鈕，新建一個圖層4，再工具箱選擇圓角矩形工具，并按住鍵盤中Shift不放在工作區(qū)拖出一個圓角矩形，按鍵盤快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，設置前景色為藍色，按鍵盤快捷鍵Ctrl+D取消選區(qū)，如圖2所示。效果圖如圖3所示。,3、調(diào)整圖層樣式，具體數(shù)據(jù)參照以下幾個表,4、選擇圖層4，復制一個圖層4副本并給圖層4副本添加蒙版，如圖11所示。,5、單擊工具箱中的橫排文字工具，輸入school，然后在工具選項欄上設置字體參考圖12，如圖12所示。,6、在圖層控制面板新建一個圖層或者（按快捷鍵Shift+Ctrl+N），接著在工具箱中選擇鋼筆工具，在屬性欄中設置鋼筆為路徑，接著再工作區(qū)繪制出一個不規(guī)則的形狀，按鍵盤快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，設置前景色為白色，按鍵盤快捷鍵Ctrl+D取消選區(qū)，并設置不透明度為30%。如圖所示。,2.按鈕2，白色質(zhì)感播放器按鈕,表層圓形圖層樣式設置：,2.下層圓形樣式設置：,3.底層圓形圖層樣式,,圖標制作,,三、圖標制作,圖標設計的意義視覺設計的重要組成部分，用于提示與強調(diào)使產(chǎn)品的功能具象化，更容易理解使產(chǎn)品的人機界面更具有吸引力，富含娛樂性形成產(chǎn)品的統(tǒng)一特征，給用戶以信賴感，便于功能的記憶創(chuàng)造差異化、個性化的美，強化裝飾性作用圖標設計是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味圖標設計的表現(xiàn)方式靈活自由、可以傳達不同的產(chǎn)品理念圖標設計是在屏幕上展示產(chǎn)品的最佳方式,,1、圖標設計的意義1）、視覺設計的重要組成部分，用于提示與強調(diào)2）、使產(chǎn)品的功能具象化，更容易理解,,1、圖標設計的意義3）、使產(chǎn)品的人機界面更具有吸引力，富含娛樂性,,1、圖標設計的意義4）、圖標設計是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味,,1、圖標設計的意義4）、圖標設計是一種藝術(shù)創(chuàng)作、能提高產(chǎn)品的品味,,1、圖標設計的意義5）、圖標設計的表現(xiàn)方式靈活自由、可以傳達不同的產(chǎn)品理念,,,,1、圖標設計的意義6）、圖標設計是在屏幕上展示產(chǎn)品的最佳方式,,,2、圖標設計的原則1）、精美、直觀、生動的圖標,,2、圖標設計的原則1）、精美、直觀、生動的圖標,,2、圖標設計的原則2）、圖標的唯一性——準確、易識別、易理解,,2、圖標設計的原則3）、系列圖標風格統(tǒng)一、整體性強,,2、圖標設計的原則4）、主題文化性,,3、圖標設計的規(guī)格圖標文件的類型：.ico文件，圖標文件大都是.ico格式圖標的一般尺寸：16x16像素、32x32像素、48x48像素、64x64像素、96x96像素、256x256像素,,,4、圖標設計的流程1）、圖標創(chuàng)意階段看懂界面需求，對每個圖標的定義要準確清楚。,,4、圖標設計的流程2）、草圖繪制階段——統(tǒng)一圖標風格、統(tǒng)一透視,,4、圖標設計的流程3）、草圖渲染階段一般使用Photoshop、Illustrator、Firework、XaraXtremepro等軟件,,,課堂練習：繪制常用移動應用圖標繪制常用電腦應用圖標,四、計算器界面設計實訓,五、播放器界面設計實訓,六、手機主題界面設計實訓,七、網(wǎng)站專題界面設計實訓,