UI界面設(shè)計(jì) 課件 重大 第一部分 界面設(shè)計(jì)概述

UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁圖標(biāo)WEBDESIGN第一部分網(wǎng)頁界面設(shè)計(jì)10網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)畫畫網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)什么是圖標(biāo)？具指代意義的圖形符號(hào)，具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。網(wǎng)頁圖標(biāo)A圖標(biāo)在界面中的分類展示圖標(biāo)——不可點(diǎn)擊尺寸：24×24、28×28、32×32按鈕圖標(biāo)——可點(diǎn)擊尺寸：44×44、48×48、56×56、64×64不可點(diǎn)擊的展示圖標(biāo)

可點(diǎn)擊的按鈕圖標(biāo)網(wǎng)頁圖標(biāo)網(wǎng)頁中的按鈕圖標(biāo)icon的尺寸一般選擇4的倍數(shù)，這樣有利于在成倍縮放的時(shí)候，不會(huì)造成半像素的情況。例如48×48的icon，縮小2倍的時(shí)候24×24；而34×34的icon，縮小2倍的時(shí)候是17×17。在圖標(biāo)中應(yīng)盡量避免出現(xiàn)單數(shù)。圖標(biāo)的尺寸圖標(biāo)的設(shè)計(jì)原則更具識(shí)別性圖標(biāo)本身的功能便是第一時(shí)間傳遞信息。因而我們需要使用更加具象的視覺語言，使得信息傳達(dá)更為準(zhǔn)確。更具一致性使圖標(biāo)一致性是一套圖標(biāo)系統(tǒng)成功的關(guān)鍵之一。在這里的統(tǒng)一性不是指所有的圖標(biāo)里面都要用一模一樣的元素，而是圖標(biāo)的線粗細(xì)、斷點(diǎn)的距離、元素的大小、切割的距離、同樣的色調(diào)、風(fēng)格的一致。當(dāng)所有的圖標(biāo)都用一樣的元素在里面時(shí)，會(huì)造成辨認(rèn)困難。適度的情感化體現(xiàn)作為一個(gè)金融產(chǎn)品，在用戶使用界面時(shí)，我們想更改從前用戶對(duì)金融產(chǎn)品嚴(yán)肅氣質(zhì)的認(rèn)知，采用更為豐富的造型與顏色使頁面更具親和力。CBA保持相同的大小與間距；方圓處理圖標(biāo)的風(fēng)格時(shí)下流行的圖標(biāo)可以歸納為：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)。至于mbe風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等，都是基于以上三種來進(jìn)行風(fēng)格設(shè)計(jì)。下圖為在dribbble上看到一些比較好看的icon設(shè)計(jì)，作者ID均備注在右下角，在此僅供參考。除了在dribbble、站酷、花瓣、優(yōu)設(shè)、iconfont等找好看的圖標(biāo)以外，還可以參考市面上主流的那些app中的圖標(biāo)。圖標(biāo)的風(fēng)格圖標(biāo)風(fēng)格參考手繪風(fēng)格圖標(biāo)網(wǎng)頁圖標(biāo)彩繪風(fēng)格圖標(biāo)網(wǎng)頁圖標(biāo)像素風(fēng)格圖標(biāo)網(wǎng)頁圖標(biāo)扁平化圖標(biāo)擬物化與扁平化扁平化中的色塊扁平化圖標(biāo)網(wǎng)頁圖標(biāo)網(wǎng)頁圖標(biāo)THANK

YOU!謝謝UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁圖標(biāo)-2WEBDESIGN第一部分網(wǎng)頁界面設(shè)計(jì)10網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)畫畫網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)常用的畫圖標(biāo)軟件有三個(gè)：AI、PS、sketch。AI的好處是矢量，網(wǎng)格比較規(guī)范，容易處理圖標(biāo)的線面轉(zhuǎn)換，其中直角一鍵轉(zhuǎn)圓角功能非常好用，缺點(diǎn)就是調(diào)色非常的難用，只能處理普通色塊，復(fù)雜的色彩會(huì)耗費(fèi)很多時(shí)間。PS的好處是調(diào)色功能強(qiáng)大，形狀剪切中規(guī)中矩，缺點(diǎn)是做線性圖標(biāo)的時(shí)候需要用布爾運(yùn)算，描邊功能操作起來沒有AI方便。Sketch的好處是矢量，調(diào)色十分智能，并且現(xiàn)在做界面多數(shù)用sketch，應(yīng)用起來十分便捷，缺點(diǎn)是它的造型沒有AI和PS嚴(yán)謹(jǐn)，一些轉(zhuǎn)角的位置不夠流暢，小圖的時(shí)候不易察覺，放大后就能看到不流暢的線條。我可以三者結(jié)合來畫圖標(biāo)：首先用AI構(gòu)造基本的形狀。如果是要發(fā)作品做展示，就拉到ps里面進(jìn)行調(diào)色和展示；如果是放在界面中使用，就拉到sketch調(diào)色使用。參數(shù)設(shè)置與參考線的繪制步驟（1）參數(shù)設(shè)置與參考線的繪制步驟（2）參數(shù)設(shè)置與參考線的繪制步驟（3）圖標(biāo)的分類圖標(biāo)可以歸納為：線性圖標(biāo)、面性圖標(biāo)、線面結(jié)合圖標(biāo)。至于mbe風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等，都是基于以上三種來進(jìn)行風(fēng)格設(shè)計(jì)。圖標(biāo)復(fù)雜規(guī)范參考線參考線的使用用復(fù)雜規(guī)范的參考線畫到熟練的時(shí)候，就可以用較簡(jiǎn)單的參考線去限定，因?yàn)槟阋呀?jīng)十分熟悉體量感的控制了。簡(jiǎn)單的畫法：只需要畫三個(gè)正方形，線性選擇顏色是灰色，描邊選擇0.25pt。小口訣：長(zhǎng)物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。圖標(biāo)的簡(jiǎn)單規(guī)范圖標(biāo)簡(jiǎn)單規(guī)范參考線THANK

YOU!謝謝謝謝UI界面設(shè)計(jì)USERINTERFACE網(wǎng)頁圖標(biāo)-2WEBDESIGN第一部分網(wǎng)頁界面設(shè)計(jì)10網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)畫畫網(wǎng)頁設(shè)計(jì)基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標(biāo)志與形象欄5.色彩6.文字7.網(wǎng)頁圖標(biāo)如何畫圖標(biāo)PS中繪制圖標(biāo)的簡(jiǎn)單規(guī)范1PS中繪制圖標(biāo)的簡(jiǎn)單規(guī)范2PS中繪制圖標(biāo)的簡(jiǎn)單規(guī)范3在畫布中用描邊0.25pt來畫好參考線，然后選中參考線，右鍵-建立參考線。如何在AI建立參考線來復(fù)用畫一個(gè)44×44的正方形，顏色調(diào)為灰色，描邊選擇0.25pt（在此補(bǔ)充一個(gè)知識(shí)點(diǎn)，72ppi下的1pt是等于1px的，具體請(qǐng)自行百度），然后然后畫一個(gè)42×42的正方形居于其中。這個(gè)42×42的界線為安全界線，圖標(biāo)不要畫超過這個(gè)界線，避免在切圖的時(shí)候貼邊切，導(dǎo)致圖標(biāo)出現(xiàn)不自然的邊界。上圖詳細(xì)展示畫參考線的步驟。參考線的建立AI中建立參考線復(fù)用步驟（1）參考線的建立步驟（2）參考線的建立步驟（3）參考線的建立步驟（4）參考線是為了限定圖標(biāo)的大小，從而達(dá)到整體的美觀與規(guī)范。TIPS：a.提煉物體形狀后，在不影響辨識(shí)度情況下，可以適當(dāng)改變一下形狀，把高的或者扁的物品，畫成比較飽滿的樣子；b.當(dāng)物體形狀不適合畫得飽滿時(shí)，可以盡量上下或者左右撐滿，然后旋轉(zhuǎn)45度，以增加畫面的飽滿感如何各種形狀的圖標(biāo)如何在參考線中統(tǒng)一長(zhǎng)物體變飽滿傾斜增加體量感繪制過程要點(diǎn)改變圖標(biāo)大小的時(shí)候，要兩邊同時(shí)縮放，不造成半像素。使用內(nèi)描邊來進(jìn)行線性圖標(biāo)的繪制，更容易對(duì)齊網(wǎng)格，但是內(nèi)描邊只要使用鋼筆加點(diǎn)來斷點(diǎn)的話，就會(huì)自動(dòng)變成居中描邊。使用內(nèi)描邊的時(shí)候怎么進(jìn)行斷點(diǎn)？可以把描邊進(jìn)行對(duì)象-擴(kuò)展，轉(zhuǎn)為形狀，然后用布爾運(yùn)算來剪切。由于太麻煩，一般使用居中描邊（不推薦居中描邊是因?yàn)樵谑謾C(jī)界面中的線性圖標(biāo)一般是3像素，居中描邊怕出現(xiàn)半像素，影響清晰度），但經(jīng)過檢驗(yàn)，只要注意把線拖動(dòng)對(duì)齊網(wǎng)格，不會(huì)影響清晰度。TIPS：手機(jī)界面中的圖標(biāo)，線性一般是用3像素，因?yàn)?像素太細(xì)，4像素又顯得太笨重；當(dāng)2倍圖的時(shí)候用3像素，3倍圖的時(shí)候就會(huì)變成4.5像素，所以3倍圖的時(shí)候要手動(dòng)把4.5調(diào)成4或者5像素。THANK

YOU!謝謝謝謝UI界面設(shè)計(jì)USERINTERFACE圖標(biāo)設(shè)計(jì)分類與擬物化設(shè)計(jì)扁平化風(fēng)格設(shè)計(jì)原則拒絕特效使用簡(jiǎn)單的元素注重排版關(guān)注色彩極簡(jiǎn)主義圖標(biāo)設(shè)計(jì)作品欣賞圖2-59扁平化圖標(biāo)扁平化風(fēng)格設(shè)計(jì)原則拒絕特效使用簡(jiǎn)單的元素注重排版關(guān)注色彩極簡(jiǎn)主義圖2-60扁平化圖標(biāo)扁平化風(fēng)格設(shè)計(jì)原則拒絕特效使用簡(jiǎn)單的元素注重排版關(guān)注色彩極簡(jiǎn)主義圖2-61扁平化圖標(biāo)扁平化風(fēng)格設(shè)計(jì)原則拒絕特效使用簡(jiǎn)單的元素注重排版關(guān)注色彩極簡(jiǎn)主義圖2-62扁平化圖標(biāo)扁平化風(fēng)格設(shè)計(jì)的特點(diǎn)去掉冗余的裝飾效果讓“信息”本身重新作為核心被凸顯出來在設(shè)計(jì)元素上強(qiáng)調(diào)抽象、極簡(jiǎn)、符號(hào)化信息架構(gòu)上的扁平，能讓用戶能更快得到關(guān)心的信息需要一定的學(xué)習(xí)成本，傳達(dá)的感情不豐富圖標(biāo)的風(fēng)格分類1.扁平化圖標(biāo)特點(diǎn)：純色、剪影優(yōu)點(diǎn)：簡(jiǎn)潔、清新、舒服、視覺識(shí)別度較好，色彩明朗，設(shè)計(jì)感強(qiáng)烈，圖形表現(xiàn)高度概括扁平化中的色塊扁平化圖標(biāo)2.MBE風(fēng)格此風(fēng)格的原創(chuàng)作者是法國(guó)設(shè)計(jì)師MBE2015年在dribbble網(wǎng)站發(fā)布，設(shè)計(jì)采用更大更粗的描邊、斷點(diǎn)式描邊、色塊溢出，相對(duì)于沒有描邊的扁平化風(fēng)格，除去了里面不必要的色塊區(qū)分，更簡(jiǎn)潔、通用、易識(shí)別。3.輕折疊圖標(biāo)特點(diǎn)：純色、折痕、輕投影優(yōu)點(diǎn)：比純平面豐富，有輕微視覺空間感，色彩明朗，輕投影，營(yíng)造出輕盈的感覺，視覺統(tǒng)一性好4.輕質(zhì)感圖標(biāo)特點(diǎn)：輕漸變、層次簡(jiǎn)單、輕投影優(yōu)點(diǎn)：簡(jiǎn)潔、干凈、明朗，有一定的精致感，有簡(jiǎn)單的層次，輕投影創(chuàng)造輕度立體感而又輕盈清新，內(nèi)容相對(duì)豐富5.折紙風(fēng)圖標(biāo)特點(diǎn)：折疊、投影、結(jié)構(gòu)優(yōu)點(diǎn)：層次豐富，結(jié)構(gòu)明顯，易于創(chuàng)造控件立體感，幾何感明顯，復(fù)雜和簡(jiǎn)潔結(jié)合，挑戰(zhàn)了扁平化的立體性6.長(zhǎng)投影圖標(biāo)特點(diǎn)：投影、層次優(yōu)點(diǎn)：色彩對(duì)比度大，有明顯而單純的投影，創(chuàng)造鮮明的層次感和空間感，視覺沖擊強(qiáng)烈圖2-67長(zhǎng)投影圖標(biāo)7.立體化和厚度感圖標(biāo)特點(diǎn)：厚度、細(xì)節(jié)優(yōu)點(diǎn)：有明顯的厚度，明顯的立體感，有厚重感，有一定的細(xì)節(jié)擬物化設(shè)計(jì)的概念“擬物化”設(shè)計(jì)是一種以保留原始被模仿對(duì)象的各種裝飾元素為基礎(chǔ)、并由此衍生出來的設(shè)計(jì)風(fēng)格1.擬物化設(shè)計(jì)的優(yōu)點(diǎn)：外觀完全與現(xiàn)實(shí)事物相似，用戶認(rèn)知和學(xué)習(xí)成本低；交互與現(xiàn)實(shí)事物保持一致；動(dòng)態(tài)效果高