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

UI界面設(shè)計(jì)平面設(shè)計(jì)專業(yè)1精選2021版課件目錄一、UI界面設(shè)計(jì)相關(guān)知識(shí)二、UI界面設(shè)計(jì)常用方法和原則三、UI界面常用元素制作四、計(jì)算機(jī)界面設(shè)計(jì)五、播放器界面設(shè)計(jì)六、手機(jī)界面設(shè)計(jì)七、專題網(wǎng)頁(yè)設(shè)計(jì)2精選2021版課件一、UI界面設(shè)計(jì)相關(guān)知識(shí)1.UI界面設(shè)計(jì)的概念2.UI設(shè)計(jì)師3.界面設(shè)計(jì)涉及的范圍及學(xué)科4.界面設(shè)計(jì)的流程5.UI界面設(shè)計(jì)規(guī)范3精選2021版課件”“一、UI界面設(shè)計(jì)相關(guān)知識(shí)1.UI界面設(shè)計(jì)的概念4精選2021版課件一、UI界面設(shè)計(jì)相關(guān)知識(shí)-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ū)目：《用戶界面設(shè)計(jì)與制作》《交互設(shè)計(jì)》《UI進(jìn)化論——移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)》其他網(wǎng)絡(luò)資料5精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念通過(guò)什么操作ATM機(jī)？ATM機(jī)操作界面6精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念通過(guò)什么操作Photoshop程序？軟件界面7精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念通過(guò)什么操作手機(jī)？手機(jī)界面8精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念1、什么是界面設(shè)計(jì)（UI）？界面——UI即UserInterface(用戶界面)的簡(jiǎn)稱。廣義上來(lái)講，UI界面是人與機(jī)器進(jìn)行交互的操作平臺(tái)，即用戶與機(jī)器相互傳遞信息的媒介。用戶機(jī)器界面9精選2021版課件”“UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念概括成一句話就是——人和機(jī)器之間的界面。這個(gè)界面實(shí)際上是體現(xiàn)在我們生活中的每一個(gè)環(huán)節(jié)的，例如開(kāi)車時(shí)候方向盤(pán)和儀表盤(pán)就是這個(gè)界面，看電視的時(shí)候遙控器和屏幕就是這個(gè)界面，用電腦的時(shí)候鍵盤(pán)和顯示器就是這個(gè)界面。于是我們可以把UI可以分成兩大類：硬件界面和軟件界面。本課所關(guān)注的UI設(shè)計(jì)特指軟件界面，我們也可以稱為特殊的或者狹義的UI設(shè)計(jì)。10精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-1.UI界面設(shè)計(jì)的概念一、什么是UI界面設(shè)計(jì)？界面設(shè)計(jì)即UserInterfaceDesign（用戶界面設(shè)計(jì)）的簡(jiǎn)稱，是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。人機(jī)交互操作邏輯界面美觀11精選2021版課件問(wèn)題一：界面設(shè)計(jì)=版式設(shè)計(jì)？所謂版式設(shè)計(jì)，就是在版面上，將有限的視覺(jué)元素進(jìn)行有機(jī)的排列組合。界面設(shè)計(jì)的內(nèi)容包括：圖形、文字、色彩、編排，使界面起到美化效果的作用。需要研究用戶需求，研究目標(biāo)用戶。12精選2021版課件問(wèn)題二：界面設(shè)計(jì)=用戶+界面？或者界面設(shè)計(jì)就是單單指界面美化設(shè)計(jì)？從字面上看，UI有用戶與界面兩個(gè)組成部分，但實(shí)際上還有還有用戶與界面之間的交互關(guān)系。界面設(shè)計(jì)需要定位使用者、使用環(huán)境、使用方式。不僅僅是美化界面，還有需要研究用戶、讓界面變得更友好、更有趣、更易用、更舒適。13精選2021版課件UI用戶界面=+交互=版式考慮用戶的心理需求，研究目標(biāo)用戶14精選2021版課件前面講到UI設(shè)計(jì)包括兩方面——美化和交互。讓大家更了解UI設(shè)計(jì)的重要性從美化的角度看：UI優(yōu)化后:1更有時(shí)尚感、層次感2.從QQ圖像就能知道是QQ的登入界面，更直觀、形象。從交互的角度：未UI優(yōu)化的界面：1.功能過(guò)于簡(jiǎn)單2.登入沒(méi)有體現(xiàn)按鈕的特點(diǎn)，而不會(huì)單擊3.密碼輸入框也沒(méi)有做掩密處理，被盜號(hào)的風(fēng)險(xiǎn)系數(shù)增加15精選2021版課件”“ui設(shè)計(jì)是做什么的？UI設(shè)計(jì)從工作內(nèi)容上來(lái)說(shuō)分為3個(gè)方向。它主要是由UI研究的3個(gè)因素決定的，其分別是研究界面，研究人與界面的關(guān)系，研究人。1.研究界面----圖形設(shè)計(jì)師國(guó)內(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)生之前，長(zhǎng)期以來(lái)UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹(shù)狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般都是軟件工程師背景居多。2.UI設(shè)計(jì)師16精選2021版課件”“3.研究人----用戶測(cè)試/研究工程師。任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶問(wèn)卷的形式來(lái)衡量UI設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒(méi)有這個(gè)職位，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)嚴(yán)重的風(fēng)險(xiǎn)性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。綜上所述UI設(shè)計(jì)師就是：軟件圖形設(shè)計(jì)師、交互設(shè)計(jì)師和用戶研究工程師。17精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)3.界面設(shè)計(jì)涉及的范圍及學(xué)科界面設(shè)計(jì)是一種結(jié)合美學(xué)、計(jì)算機(jī)科學(xué)、心理學(xué)、行為學(xué)、人機(jī)工程學(xué)、信息學(xué)以及市場(chǎng)學(xué)等的綜合性學(xué)科，強(qiáng)調(diào)人—機(jī)—環(huán)境三者作為一個(gè)系統(tǒng)進(jìn)行總體設(shè)計(jì)。18精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-4.界面設(shè)計(jì)的工作流程4.界面設(shè)計(jì)的工作流程：

產(chǎn)品制作人，寫(xiě)產(chǎn)品計(jì)劃書(shū)。

用戶體驗(yàn)研究員，作調(diào)查分析。

信息建構(gòu)師，設(shè)計(jì)產(chǎn)品架構(gòu)。

交互設(shè)計(jì)師，作出互動(dòng)流程。

視覺(jué)設(shè)計(jì)師，作出頁(yè)面視覺(jué)設(shè)計(jì)。

前臺(tái)工程師，前臺(tái)開(kāi)發(fā)。

后臺(tái)工程師，后臺(tái)開(kāi)發(fā)。

用戶體驗(yàn)研究員，做用戶測(cè)試確保質(zhì)量。19精選2021版課件UI界面設(shè)計(jì)相關(guān)知識(shí)-4.界面設(shè)計(jì)的流程20精選2021版課件線框原型、黑白原型稿21精選2021版課件產(chǎn)品原型22精選2021版課件界面設(shè)計(jì)23精選2021版課件”“UI界面設(shè)計(jì)相關(guān)知識(shí)-5.UI界面設(shè)計(jì)的規(guī)范手機(jī)界面設(shè)計(jì)規(guī)范24精選2021版課件iOS系統(tǒng)規(guī)范25精選2021版課件iphone界面基本組成元素狀態(tài)欄(statusbar)：就是我們經(jīng)常說(shuō)的信號(hào)、運(yùn)營(yíng)商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px導(dǎo)航欄(navigation)：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁(yè)面間的跳轉(zhuǎn)按鈕，其高度為：88px主菜單欄(submenu，tab)（標(biāo)簽欄）：類似于頁(yè)面的主菜單，提供整個(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)下的樣式，如圖26精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本1.iOS界面尺寸設(shè)備分辨率PPI狀態(tài)欄高度導(dǎo)航欄高度標(biāo)簽欄高度Iphone6plus1080x1920px401ppi54px132px146pxIphone6/6s750x1334px326ppi40px88px98pxIphone5/5c/5s640x1136px326ppi40px88px98pxIphone4/4s640x960px326ppi40px88px98pxppi（pixelsperinch）即每英寸像素，也叫像素密度。27精選2021版課件2.圖標(biāo)尺寸設(shè)備APPstore程序應(yīng)用主屏幕Spotlight搜索標(biāo)簽欄工具欄/導(dǎo)航欄Iphone6plus1024x1024px180x180px114x114px87x87px75x75px66x66pxIphone6/6s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone5/5c/5s1024x1024px120x120px114x114px58x58px75x75px44x44pxIphone4/4s1024x1024px120x120px114x114px58x58px75x75px44x44px28精選2021版課件29精選2021版課件Iphone6圖例30精選2021版課件31精選2021版課件3.狀態(tài)欄規(guī)范用戶依賴于狀態(tài)欄的重要信息，如信號(hào)，時(shí)間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。pt（point）是印刷業(yè)上長(zhǎng)使用的單位，磅的意思，是一種固定的長(zhǎng)度單位，可以用測(cè)量設(shè)備測(cè)量的單位。pt=px*3/41pt=1/72英寸32精選2021版課件4.導(dǎo)航欄規(guī)范導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動(dòng)作按鈕，如添加，編輯，完成。請(qǐng)注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。33精選2021版課件導(dǎo)航欄分類第一種：app標(biāo)簽導(dǎo)航標(biāo)簽導(dǎo)航位于頁(yè)面底部，通常包含5個(gè)標(biāo)簽是比較合適的數(shù)量。這種導(dǎo)航是非常常見(jiàn)的，如果你的應(yīng)用需要用戶頻繁的在不同分頁(yè)切換，可以采用這種導(dǎo)航。它的缺點(diǎn)是會(huì)占用一定高度的空間。如微信最新版的APP界面設(shè)計(jì)圖。34精選2021版課件第二種：APP舵式導(dǎo)航目前流行一種標(biāo)簽導(dǎo)航的變體，個(gè)人把它稱為“舵式導(dǎo)航”，因?yàn)樗臉邮胶芟褫喆嫌脕?lái)指揮的船舵，兩側(cè)是其他操作按鈕。當(dāng)頁(yè)面有處于同一層級(jí)的幾大部分內(nèi)容，同時(shí)又需要一個(gè)非常重要且頻繁操作的入口，就可以采用這種APP導(dǎo)航模式。如下圖葡萄社APP。35精選2021版課件第三種：APP抽屜式導(dǎo)航模式抽屜導(dǎo)航是講菜單隱藏在當(dāng)前頁(yè)面后，點(diǎn)擊入口即可像拉抽屜一樣拉出菜單，這種導(dǎo)航的優(yōu)點(diǎn)是節(jié)省頁(yè)面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁(yè)面。比較適合于不那么需要頻繁切換內(nèi)容的應(yīng)用，例如對(duì)設(shè)置、關(guān)于等內(nèi)容的隱藏。這種導(dǎo)航設(shè)計(jì)需要注意的是一定要提供菜單畫(huà)出的過(guò)渡動(dòng)畫(huà)。自從path應(yīng)用以來(lái)，這種抽屜式導(dǎo)航菜單非常受到大家的喜愛(ài)。36精選2021版課件第四種：APP宮格導(dǎo)航（比如九宮格）這種宮格導(dǎo)航是將主要入口全部聚合在頁(yè)面，讓用戶做出選擇。這樣的組織方式無(wú)法讓用戶在第一時(shí)間看到內(nèi)容，選擇壓力較大，采用這種導(dǎo)航的應(yīng)用已經(jīng)越來(lái)越少，往往用在二級(jí)頁(yè)作為內(nèi)容列表的一種圖形化形式呈現(xiàn)，或是作為一系列工具入口的聚合。37精選2021版課件第五種：APP混合組合導(dǎo)航當(dāng)用戶需要聚焦內(nèi)容，同時(shí)又需要一些快捷入口能夠連接到某些頁(yè)面時(shí)，就可以采用組合導(dǎo)航。組合導(dǎo)航上方用宮格的形式展現(xiàn)快捷入口，與標(biāo)簽導(dǎo)航不同的是，這些宮格入口之間不需要是平級(jí)的關(guān)系，也不必包含整個(gè)層級(jí)的內(nèi)容，你可以將它理解為一種圖形化的文字鏈。這種導(dǎo)航比較靈活，能適應(yīng)架構(gòu)的快速調(diào)整。38精選2021版課件第六種：列表式APP導(dǎo)航列表式APP導(dǎo)航是我們?cè)贏PP設(shè)計(jì)種必不可少的一個(gè)信息承載模式。當(dāng)然作為一個(gè)APP的導(dǎo)航也是非常方便的。不過(guò)目前來(lái)看，列表導(dǎo)航通常用于二級(jí)頁(yè)，由于它與宮格導(dǎo)航一樣，不會(huì)默認(rèn)展示任何實(shí)質(zhì)內(nèi)容，所以通常app不會(huì)在首頁(yè)使用它。這種導(dǎo)航結(jié)構(gòu)清晰，易于理解，冷靜高效，能夠幫助用戶快速的定位去到對(duì)應(yīng)的頁(yè)面。列表項(xiàng)目可以通過(guò)間距、標(biāo)題等進(jìn)行分組。39精選2021版課件第七種：tab導(dǎo)航用于二級(jí)頁(yè)，本質(zhì)和標(biāo)簽導(dǎo)航相同，當(dāng)應(yīng)用層級(jí)較多的情況下，可以采用tab導(dǎo)航，典型場(chǎng)景是用于改變的當(dāng)前的視圖，或?qū)Ξ?dāng)前頁(yè)面內(nèi)容進(jìn)行分類查看。40精選2021版課件第八種：大圖輪播導(dǎo)航或是大圖上面的導(dǎo)航設(shè)計(jì)當(dāng)你的應(yīng)用信息足夠扁平，可以嘗試輪播導(dǎo)航，如果應(yīng)用得當(dāng)，能夠給人耳目一新的體驗(yàn)。這種導(dǎo)航能夠最大程度的保證應(yīng)用的頁(yè)面簡(jiǎn)潔性，操作也是最方便的。但是缺點(diǎn)是不能夠快速的定位對(duì)應(yīng)的分頁(yè)內(nèi)容。41精選2021版課件5.搜索欄42精選2021版課件6.工具欄Stepper控件43精選2021版課件

7.提示框提示對(duì)話框是用于輸送關(guān)鍵信息和提示快速操作。提示應(yīng)保持最少文字，退出一定是明顯。44精選2021版課件8.分段控制框45精選2021版課件9.滑塊10.開(kāi)關(guān)46精選2021版課件11.布局標(biāo)準(zhǔn)控件ios1334x750pxIphone6/6s47精選2021版課件點(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)上也省略了它。48精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本13.標(biāo)準(zhǔn)色49精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本14.字體大小、規(guī)格一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。IOS9中文字體：蘋(píng)方/PingFangSCIOS8中文字體：常州華文的黑體-簡(jiǎn)，在macosx系統(tǒng)中選擇黑體-簡(jiǎn)IOS英文、數(shù)字：Helvetial50精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本15.間距和對(duì)齊方式一般的規(guī)范最低要求8pt空白或邊距。這將有足夠留白空間，使得布局更容易掃描和文本更具可讀性。而且在此基礎(chǔ)上，UI元素應(yīng)對(duì)齊，文本應(yīng)該有相同的基線位置。

51精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本Android系統(tǒng)界面規(guī)范52精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本1.Android界面尺寸53精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本

2.界面尺寸（1280x720px）狀態(tài)欄高度：50px

導(dǎo)航欄高度：96px

標(biāo)簽欄高度：96px

Android最近出的手機(jī)都幾乎去掉了實(shí)體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和標(biāo)簽欄一樣的：96px

內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）54精選2021版課件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*dp55精選2021版課件4.常用屏幕尺寸240x320ldpi（低等屏幕）320x480mdpi（中等屏幕）480x800hdpi（高清屏幕）720x1280xhdpi（超高清屏幕）相應(yīng)的圖片資源尺寸的比例關(guān)系為1：1.5:2也就是第一套圖為mdpi的資源圖片，hdpi可調(diào)整到150%，xhdpi可調(diào)整到200%。56精選2021版課件點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本點(diǎn)擊添加文本5.字體規(guī)范、大小5.X版本：思源黑體/NotoSansHan5.0以下版本：DroidSansFallback，可用文泉驛微米黑代替英文、數(shù)字：Roboto標(biāo)題（58px或60px）二級(jí)標(biāo)題（44px或48px）正文字體（32px或36px）；英文最小字號(hào)22px，中文最小字號(hào)18px。57精選2021版課件UC瀏覽器界面6.安卓系統(tǒng)界面示例58精選2021版課件二、UI界面設(shè)計(jì)的常用方法及原則1.UI界面設(shè)計(jì)的原則2.UI界面設(shè)計(jì)中的構(gòu)成方法3.UI界面設(shè)計(jì)風(fēng)格59精選2021版課件二、UI界面設(shè)計(jì)的常用方法及原則-1.UI界面設(shè)計(jì)的原則1.UI界面設(shè)計(jì)的原則一致性和必要的個(gè)性化使用用戶的語(yǔ)言用戶記憶負(fù)擔(dān)最小化用戶界面的功能性容易理解清楚的報(bào)錯(cuò)信息快捷方式的組合連續(xù)性方便退出幫助系統(tǒng)60精選2021版課件二、UI界面設(shè)計(jì)的常用方法及原則-1.UI界面設(shè)計(jì)的原則1）、一致性和必要的個(gè)性化OFFICE軟件風(fēng)格一致，要有統(tǒng)一的字體字號(hào)、統(tǒng)一的色調(diào)、統(tǒng)一的提示用詞、窗口在統(tǒng)一的位置、按鈕也在窗口的相同的位置。目的是能夠減少記憶量、減少出錯(cuò)概率而且能迅速積累操作經(jīng)驗(yàn)。個(gè)性化。在一致性下，適當(dāng)突出該軟件的“個(gè)性化”。如PPT中不同于word有自己的動(dòng)畫(huà)效果。61精選2021版課件二、UI界面設(shè)計(jì)的常用方法及原則-1.UI界面設(shè)計(jì)的原則2）、使用用戶的語(yǔ)言界面中要注意使用用戶的語(yǔ)言，而不是設(shè)計(jì)者的語(yǔ)言。最有效的方法：讓數(shù)據(jù)說(shuō)話，如詢問(wèn)用戶、用戶投票等。因此，用戶使用系統(tǒng)的錯(cuò)誤會(huì)降到最低。62精選2021版課件3）、用戶記憶負(fù)擔(dān)最小化瀏覽信息比記憶更容易，在設(shè)計(jì)時(shí)一定要考慮到減輕用戶的記憶負(fù)擔(dān)。63精選2021版課件4）、用戶界面的功能性界面最基本的性能是具有功能性與使用性，通過(guò)界面設(shè)計(jì)，讓用戶明白功能操作，并將產(chǎn)品本身的信息更加順暢的傳遞給使用者，是功能界面存在的基礎(chǔ)與價(jià)值用戶界面一定要有基本的功能，設(shè)計(jì)者不能片面追求界面外觀漂亮而導(dǎo)致華而不實(shí)。64精選2021版課件5）、容易理解大多數(shù)的用戶都有豐富的生活經(jīng)驗(yàn)，也就是使用各種工具或者玩具的經(jīng)驗(yàn)。如果能夠在界面設(shè)計(jì)中把這些積累的生活經(jīng)驗(yàn)和界面視覺(jué)元素對(duì)應(yīng)或這連接起來(lái)就會(huì)讓用戶更容易理解。如電子書(shū)界面，模擬翻書(shū)的設(shè)計(jì)可以很快讓用戶理解如何操作，并且給讀者熟悉的閱讀體驗(yàn)。65精選2021版課件6）、清楚的報(bào)錯(cuò)信息錯(cuò)誤操作后，系統(tǒng)應(yīng)該提供有針對(duì)性的錯(cuò)誤信息反饋提示，讓用戶心里有數(shù)。66精選2021版課件7）、快捷方式的組合在菜單及按鈕中使用快捷鍵可以讓用戶操作的更加快捷因此在一些軟件設(shè)計(jì)中會(huì)把的常用的功能用圖標(biāo)按鈕的形式擺在工具條上或用快捷件。如在犀牛軟件中按住中間滾輪就能彈出常用的功能鍵或者在CAD軟件中每個(gè)常用工具都會(huì)有個(gè)相應(yīng)的英文快捷鍵。直線工具：L(line)67精選2021版課件8）、連續(xù)性一個(gè)有序的連續(xù)的界面能讓用戶輕松使用。在排列和版面布局上要有序，是水平排列還是垂直排列還是兩者都有之。如QQ界面。68精選2021版課件9）.方便退出在界面的使用上要設(shè)計(jì)方便退出，提供不同可能性，如手機(jī)的退出，是按一個(gè)鍵就可退出還是一層一層的退出。10）.幫助系統(tǒng)它可以幫助用戶更快捷、更好的學(xué)習(xí)界面的使用，告訴用戶在遇到某些使用問(wèn)題時(shí)該如何處理、減少用戶在使用中的挫折感。69精選2021版課件2.UI界面設(shè)計(jì)中的構(gòu)成方法-網(wǎng)頁(yè)界面構(gòu)圖原則及方法對(duì)稱平衡如果你想在你的網(wǎng)頁(yè)看上去美觀和優(yōu)雅，那么你應(yīng)該做一個(gè)網(wǎng)站對(duì)稱。2.1網(wǎng)頁(yè)設(shè)計(jì)構(gòu)圖原則不對(duì)稱平衡不對(duì)稱平衡帶來(lái)一種自由隨意的感覺(jué)。盡管有時(shí)候看上去不是那么自然，但是它還是經(jīng)常在網(wǎng)頁(yè)設(shè)計(jì)中得到實(shí)用。水平平衡如果你想在你的網(wǎng)頁(yè)看上去美觀和優(yōu)雅，那么你應(yīng)該做一個(gè)網(wǎng)站對(duì)稱。垂直平衡垂直結(jié)構(gòu)用于頭部和底部的元素非常相似的情形。這樣的布局往往運(yùn)用于小元素的展示。70精選2021版課件F模式·用戶極少逐字閱讀文字?！っ總€(gè)段落的開(kāi)始兩個(gè)字最為重要，這將決定內(nèi)容是否能留住用戶?！こ跏级温?，副標(biāo)題和要點(diǎn)都要保持醒目。Z模式Z模式幾乎可以適用到任何的網(wǎng)頁(yè)交互，Z模式的優(yōu)點(diǎn)就是簡(jiǎn)單。如果你的網(wǎng)站內(nèi)容很多并且很復(fù)雜的話，那么用這個(gè)模式，效果就會(huì)稍差。當(dāng)然，這些都不是絕對(duì)的。當(dāng)Z模式簡(jiǎn)化布局，就可以增加轉(zhuǎn)化率2.2兩種主要的網(wǎng)頁(yè)瀏覽模式71精選2021版課件①九宮格網(wǎng)格構(gòu)圖這種版式主要運(yùn)用在分類為主的一級(jí)頁(yè)面，起到功能分類的作用。②圓心點(diǎn)放射形構(gòu)圖我們將主要的功能設(shè)置在版式的中位置，就能引導(dǎo)用戶的視線聚集在想要突出的功能點(diǎn)上，就算視線本來(lái)不在中間的位置，也能引導(dǎo)用戶再次回到中心的聚集處。2.UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面構(gòu)圖方法2.3UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面中的版式設(shè)計(jì)原理72精選2021版課件③三角形構(gòu)圖主要運(yùn)用在文字與圖標(biāo)的版式中，讓界面保持平衡穩(wěn)定。從上至下式的三角形構(gòu)圖，能把信息層級(jí)羅列得更為規(guī)整和明確。在界面中三角形構(gòu)圖大部分都是圖在上，字在下，閱讀更為舒服，有重點(diǎn)有描述。④SF字形構(gòu)圖在進(jìn)行界面設(shè)計(jì)的時(shí)候，對(duì)用戶的視覺(jué)移動(dòng)方向的預(yù)設(shè)是非常重要的。在界面中加入更為順暢的構(gòu)圖設(shè)計(jì)引導(dǎo)用戶視線移動(dòng)的元素，就能使用戶更多的觀察到產(chǎn)品的核心和產(chǎn)品的賣點(diǎn)。2.UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面構(gòu)圖方法2.3UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面中的版式設(shè)計(jì)原理73精選2021版課件2.3UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面中的版式設(shè)計(jì)原理⑤信息的排布對(duì)任何信息進(jìn)行排布的時(shí)候，首先必須要掌握的是對(duì)齊/重復(fù)/親密/對(duì)比，貫穿設(shè)計(jì)的四大原則。對(duì)齊重復(fù)和對(duì)比親密性74精選2021版課件2.UI界面設(shè)計(jì)中的構(gòu)成方法-手機(jī)移動(dòng)界面中的版式設(shè)計(jì)原理⑥圖片的使用頁(yè)面中圖片所占的比率叫做圖版率，通常情況下降低圖版率會(huì)給人一種寧?kù)o典雅、高級(jí)的感覺(jué)。提升圖版率會(huì)有充滿活力，使畫(huà)面有富有感染力的效果。圖版率高、有感染力圖版率低、寧?kù)o典雅使用色塊提高圖版率擬物繪圖提高圖版率75精選2021版課件在移動(dòng)端界面中通常需要選取主色，標(biāo)準(zhǔn)色，點(diǎn)晴色。移動(dòng)端與網(wǎng)頁(yè)端稍微不同，主色雖然是決定了畫(huà)面風(fēng)格的色彩但是往往不會(huì)被大面積的使用。鄰近色、同色系、漸變、對(duì)比色、明暗色、多色搭配等顏色搭配⑦顏色的使用76精選2021版課件⑧留白的藝術(shù)一、能使頁(yè)面的空間感更強(qiáng)，視線更開(kāi)闊，通過(guò)留白來(lái)減輕頁(yè)面的壓迫感，使用戶進(jìn)入一種輕松的氛圍。二、通過(guò)留白區(qū)分元素的存在，弱化元素與元素之間的阻隔三、通過(guò)留白有目的的突出表達(dá)的重點(diǎn)四、賦予頁(yè)面構(gòu)成產(chǎn)生不同的變化①②③④77精選2021版課件在觀看事物時(shí)，往往會(huì)產(chǎn)生一些不同的視覺(jué)心理，著作權(quán)歸作者所有。在版式設(shè)計(jì)中同樣大量運(yùn)用這些科學(xué)視覺(jué)方法對(duì)用戶進(jìn)行視覺(jué)上的引導(dǎo)，也能讓設(shè)計(jì)師快速找到一些排版布局的方法。⑨視覺(jué)心理的靈活運(yùn)用通欄、間距通常采用黃金比例圓角、圓形比直角更容易讓人接受照片、相片通常使用方形展示避免單調(diào)，增加頁(yè)面節(jié)奏感通過(guò)蒙版的方式控制頁(yè)面色調(diào)78精選2021版課件⑩沒(méi)有設(shè)計(jì)的設(shè)計(jì)每一條線/每一行文字/每一個(gè)按鈕的存在都是都有它存在的理由。它不加無(wú)意義的修飾、不須陪村和烘托，讓用戶更關(guān)注內(nèi)容的主體，弱化對(duì)視覺(jué)的認(rèn)知。甚至于用戶在滑動(dòng)時(shí)看到一個(gè)按鈕或一行文字也感覺(jué)這是理所當(dāng)然的存在。讓用戶感知不到刻意的設(shè)計(jì)，一切的發(fā)生都是那么自然。79精選2021版課件3.UI界面設(shè)計(jì)風(fēng)格1.扁平化：風(fēng)格簡(jiǎn)單，無(wú)特效；排版簡(jiǎn)潔；色彩絢麗；二維效果；80精選2021版課件81精選2021版課件2.擬物化：3D特效；逼真；82精選2021版課件3.卡通化：夸張；變形；83精選2021版課件三、UI界面常用元素制作1.常用圖形制作2.常用控件制作3.圖標(biāo)設(shè)計(jì)與制作4.UI界面設(shè)計(jì)風(fēng)格84精選2021版課件按鈕；加載loading；日歷界面；旗幟元素；評(píng)價(jià)五角星的滿意度；好評(píng)度評(píng)價(jià)體系元素；網(wǎng)站常用運(yùn)用到的提示；錯(cuò)誤；警告；驗(yàn)證成功等標(biāo)志元素；還有視頻界面；音頻界面和tab切換界面的設(shè)計(jì)。1.常用圖形制作85精選2021版課件按鈕制作：86精選2021版課件87精選2021版課件1、打開(kāi)AdobePhotoshop，執(zhí)行菜單：“文件”／“新建”（快捷鍵Ctrl+N），彈出新建對(duì)話框，設(shè)置名稱：按鈕，寬度：570像素，高度：400像素，分辨率：72像素／英寸，顏色模式：RGB顏色、8位，背景內(nèi)容：白色，設(shè)置完畢后單擊確定按鈕，如圖1所示。88精選2021版課件2、在圖層面板上單擊創(chuàng)建新圖層按鈕，新建一個(gè)圖層4，再工具箱選擇圓角矩形工具，并按住鍵盤(pán)中Shift不放在工作區(qū)拖出一個(gè)圓角矩形，按鍵盤(pán)快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，設(shè)置前景色為藍(lán)色，按鍵盤(pán)快捷鍵Ctrl+D取消選區(qū)，如圖2所示。效果圖如圖3所示。89精選2021版課件3、調(diào)整圖層樣式，具體數(shù)據(jù)參照以下幾個(gè)表90精選2021版課件91精選2021版課件92精選2021版課件93精選2021版課件94精選2021版課件95精選2021版課件4、選擇圖層4，復(fù)制一個(gè)圖層4副本并給圖層4副本添加蒙版，如圖11所示。96精選2021版課件5、單擊工具箱中的橫排文字工具，輸入school，然后在工具選項(xiàng)欄上設(shè)置字體參考圖12，如圖12所示。97精選2021版課件6、在圖層控制面板新建一個(gè)圖層或者（按快捷鍵Shift+Ctrl+N），接著在工具箱中選擇鋼筆工具，在屬性欄中設(shè)置鋼筆為路徑，接著再工作區(qū)繪制出一個(gè)不規(guī)則的形狀，按鍵盤(pán)快捷鍵Ctrl+Enter轉(zhuǎn)換為選區(qū)，設(shè)置前景色為白色，按鍵盤(pán)快捷鍵Ctrl+D取消選區(qū)，并設(shè)置不透明度為30%。如圖所示。98精選2021版課件2.按鈕2，白色質(zhì)感播放器按鈕99精選2021版課件表層圓形圖層樣式設(shè)置：100精選2021版課件101精選2021版課件102精選2021版課件103精選2021版課件104精選2021版課件2.下層圓形樣式設(shè)置：105精選2021版課件106精選2021版課件107精選2021版課件108精選2021版課件3.底層圓形圖層樣式109精選2021版課件110精選2021版課件111精選2021版課件112精選2021版課件圖標(biāo)制作113精選2021版課件三、圖標(biāo)制作圖標(biāo)設(shè)計(jì)的意義視覺(jué)設(shè)計(jì)的重要組成部分，用于提示與強(qiáng)調(diào)使產(chǎn)品的功能具象化，