UI界面設(shè)計(jì)課件.ppt

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

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