《ui界面設(shè)計》課件全套 項目1-4 UI圖標設(shè)計 -網(wǎng)頁UI界面設(shè)計

UI界面設(shè)計USERINTERFACE項目1UI圖標設(shè)計實訓(xùn)任務(wù)1.1UI圖標基本規(guī)范與風(fēng)格1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標志與形象欄5.色彩6.文字7.網(wǎng)頁圖標畫畫什么是圖標？具指代意義的圖形符號，具有高度濃縮并快捷傳達信息、便于記憶的特性。網(wǎng)頁圖標A圖標在界面中的分類展示圖標——不可點擊尺寸：24×24、28×28、32×32按鈕圖標——可點擊尺寸：44×44、48×48、56×56、64×64不可點擊的展示圖標

可點擊的按鈕圖標網(wǎng)頁圖標網(wǎng)頁中的按鈕圖標icon的尺寸一般選擇4的倍數(shù)，這樣有利于在成倍縮放的時候，不會造成半像素的情況。例如48×48的icon，縮小2倍的時候24×24；而34×34的icon，縮小2倍的時候是17×17。在圖標中應(yīng)盡量避免出現(xiàn)單數(shù)。圖標的尺寸圖標的設(shè)計原則更具識別性圖標本身的功能便是第一時間傳遞信息。因而我們需要使用更加具象的視覺語言，使得信息傳達更為準確。更具一致性使圖標一致性是一套圖標系統(tǒng)成功的關(guān)鍵之一。在這里的統(tǒng)一性不是指所有的圖標里面都要用一模一樣的元素，而是圖標的線粗細、斷點的距離、元素的大小、切割的距離、同樣的色調(diào)、風(fēng)格的一致。當所有的圖標都用一樣的元素在里面時，會造成辨認困難。適度的情感化體現(xiàn)作為一個金融產(chǎn)品，在用戶使用界面時，我們想更改從前用戶對金融產(chǎn)品嚴肅氣質(zhì)的認知，采用更為豐富的造型與顏色使頁面更具親和力。CBA保持相同的大小與間距；方圓處理圖標的風(fēng)格時下流行的圖標可以歸納為：線性圖標、面性圖標、線面結(jié)合圖標。至于mbe風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等，都是基于以上三種來進行風(fēng)格設(shè)計。下圖為在dribbble上看到一些比較好看的icon設(shè)計，作者ID均備注在右下角，在此僅供參考。除了在dribbble、站酷、花瓣、優(yōu)設(shè)、iconfont等找好看的圖標以外，還可以參考市面上主流的那些app中的圖標。圖標的風(fēng)格圖標風(fēng)格參考手繪風(fēng)格圖標網(wǎng)頁圖標彩繪風(fēng)格圖標網(wǎng)頁圖標像素風(fēng)格圖標網(wǎng)頁圖標扁平化圖標擬物化與扁平化扁平化中的色塊扁平化圖標網(wǎng)頁圖標網(wǎng)頁圖標實訓(xùn)任務(wù)1.2圖標設(shè)計1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標志與形象欄5.色彩6.文字7.網(wǎng)頁圖標畫畫網(wǎng)頁設(shè)計基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標志與形象欄5.色彩6.文字7.網(wǎng)頁圖標常用的畫圖標軟件有三個：AI、PS、sketch。AI的好處是矢量，網(wǎng)格比較規(guī)范，容易處理圖標的線面轉(zhuǎn)換，其中直角一鍵轉(zhuǎn)圓角功能非常好用，缺點就是調(diào)色非常的難用，只能處理普通色塊，復(fù)雜的色彩會耗費很多時間。PS的好處是調(diào)色功能強大，形狀剪切中規(guī)中矩，缺點是做線性圖標的時候需要用布爾運算，描邊功能操作起來沒有AI方便。Sketch的好處是矢量，調(diào)色十分智能，并且現(xiàn)在做界面多數(shù)用sketch，應(yīng)用起來十分便捷，缺點是它的造型沒有AI和PS嚴謹，一些轉(zhuǎn)角的位置不夠流暢，小圖的時候不易察覺，放大后就能看到不流暢的線條。我可以三者結(jié)合來畫圖標：首先用AI構(gòu)造基本的形狀。如果是要發(fā)作品做展示，就拉到ps里面進行調(diào)色和展示；如果是放在界面中使用，就拉到sketch調(diào)色使用。參數(shù)設(shè)置與參考線的繪制步驟（1）參數(shù)設(shè)置與參考線的繪制步驟（2）參數(shù)設(shè)置與參考線的繪制步驟（3）圖標的分類圖標可以歸納為：線性圖標、面性圖標、線面結(jié)合圖標。至于mbe風(fēng)格、斷線風(fēng)格、色塊風(fēng)格、漸變風(fēng)格、半透明風(fēng)格、雙色搭配風(fēng)格等等，都是基于以上三種來進行風(fēng)格設(shè)計。圖標復(fù)雜規(guī)范參考線參考線的使用用復(fù)雜規(guī)范的參考線畫到熟練的時候，就可以用較簡單的參考線去限定，因為你已經(jīng)十分熟悉體量感的控制了。簡單的畫法：只需要畫三個正方形，線性選擇顏色是灰色，描邊選擇0.25pt。小口訣：長物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。圖標的簡單規(guī)范圖標簡單規(guī)范參考線實訓(xùn)任務(wù)1.3圖標繪制1.創(chuàng)意2.視覺流程清晰3.網(wǎng)頁版式4.標志與形象欄5.色彩6.文字7.網(wǎng)頁圖標畫畫網(wǎng)頁設(shè)計基礎(chǔ)1.創(chuàng)意2.視覺流程3.網(wǎng)頁版式4.標志與形象欄5.色彩6.文字7.網(wǎng)頁圖標如何畫圖標PS中繪制圖標的簡單規(guī)范1PS中繪制圖標的簡單規(guī)范2PS中繪制圖標的簡單規(guī)范3在畫布中用描邊0.25pt來畫好參考線，然后選中參考線，右鍵-建立參考線。如何在AI建立參考線來復(fù)用畫一個44×44的正方形，顏色調(diào)為灰色，描邊選擇0.25pt（在此補充一個知識點，72ppi下的1pt是等于1px的，具體請自行百度），然后然后畫一個42×42的正方形居于其中。這個42×42的界線為安全界線，圖標不要畫超過這個界線，避免在切圖的時候貼邊切，導(dǎo)致圖標出現(xiàn)不自然的邊界。上圖詳細展示畫參考線的步驟。參考線的建立AI中建立參考線復(fù)用步驟（1）參考線的建立步驟（2）參考線的建立步驟（3）參考線的建立步驟（4）參考線是為了限定圖標的大小，從而達到整體的美觀與規(guī)范。TIPS：a.提煉物體形狀后，在不影響辨識度情況下，可以適當改變一下形狀，把高的或者扁的物品，畫成比較飽滿的樣子；b.當物體形狀不適合畫得飽滿時，可以盡量上下或者左右撐滿，然后旋轉(zhuǎn)45度，以增加畫面的飽滿感如何各種形狀的圖標如何在參考線中統(tǒng)一長物體變飽滿傾斜增加體量感繪制過程要點改變圖標大小的時候，要兩邊同時縮放，不造成半像素。使用內(nèi)描邊來進行線性圖標的繪制，更容易對齊網(wǎng)格，但是內(nèi)描邊只要使用鋼筆加點來斷點的話，就會自動變成居中描邊。使用內(nèi)描邊的時候怎么進行斷點？可以把描邊進行對象-擴展，轉(zhuǎn)為形狀，然后用布爾運算來剪切。由于太麻煩，一般使用居中描邊（不推薦居中描邊是因為在手機界面中的線性圖標一般是3像素，居中描邊怕出現(xiàn)半像素，影響清晰度），但經(jīng)過檢驗，只要注意把線拖動對齊網(wǎng)格，不會影響清晰度。TIPS：手機界面中的圖標，線性一般是用3像素，因為2像素太細，4像素又顯得太笨重；當2倍圖的時候用3像素，3倍圖的時候就會變成4.5像素，所以3倍圖的時候要手動把4.5調(diào)成4或者5像素。THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE項目2移動端App界面設(shè)計實訓(xùn)任務(wù)2.1手機界面設(shè)計基礎(chǔ)規(guī)范畫畫App界面的

COMPONENTSOFTHEINTERFACE狀態(tài)欄標簽欄主顯示區(qū)導(dǎo)航欄手機界面規(guī)范App界面控件規(guī)范界面規(guī)范文字參數(shù)手機界面基礎(chǔ)手機界面基礎(chǔ)AB字號中文：思源黑體

英文：robot

偶數(shù)單位24pt,28pt,36pt等字體：App安卓界面中文字參數(shù)（1）打開【PS】，新建【1080*1920】的畫布，并劃分出【狀態(tài)欄】、【標簽欄】、【導(dǎo)航欄】，如圖所示App安卓界面制作步驟-1（2）給【狀態(tài)欄】和【標簽欄】填充顏色，并繪制【狀態(tài)欄】和【標簽欄】的內(nèi)容，如圖所示。App安卓界面制作步驟-2（3）將廣告圖片和功能圖標【復(fù)制】到Banner區(qū)域。（4）添加【主顯示區(qū)】的其它元素。（5）繪制【導(dǎo)航欄】按鈕和圖標。App安卓界面制作步驟-31.重要性：色彩往往給人以鮮明的第一印象。2.色彩三屬性:色相、明度、純度3.色彩情感和視覺感受4.配色方案：同種色、同類色、鄰近色、對比色等5.色彩策略實訓(xùn)任務(wù)2.2UI配色方案

色彩是一個品牌給人的第一印象。營銷界有個著名的“7秒定律”，即消費者在7秒內(nèi)就可以確定是否有購買商品的意愿。如果第一眼沒有被吸引住就很難對產(chǎn)品有進一步了解的欲望。而在這短短7秒內(nèi)，色彩的決定因素占到67%。大部分初次接觸產(chǎn)品的消費者會在90秒內(nèi)決定是否購買，而這個評估中62%-90%是基于顏色?！?秒定律”色彩重要性色彩三屬性——色相、明度、純度色彩情感和視覺感受色彩是富于情感的色彩情感和視覺感受紅色黃色色彩情感和視覺感受藍色綠色色彩情感和視覺感受橙色紫色色彩情感和視覺感受黑色灰色色彩情感和視覺感受咖啡色金屬色實訓(xùn)任務(wù)2.3App頂部導(dǎo)航欄設(shè)計

畫畫導(dǎo)航欄是指位于頁面頂部或者側(cè)邊區(qū)域的，在頁眉橫幅圖片上邊或下邊的一排水平導(dǎo)航按鈕，它起著鏈接站點或者軟件內(nèi)的各個頁面的作用。手機界面導(dǎo)航手機界面導(dǎo)航畫畫App導(dǎo)航欄作用？導(dǎo)航欄是用來幫助用戶定位、導(dǎo)航、操作的基礎(chǔ)組件;首頁導(dǎo)航欄就是一級導(dǎo)航欄，由首頁導(dǎo)航欄中點開的界面就是二級頁面。手機界面導(dǎo)航整個導(dǎo)航欄通常分為左、中、右三部分，左側(cè)和右側(cè)主要用來放置功能控件，中間部分主要用來放置文字標題或者搜索，接下里展開分析左中右三部分的構(gòu)成。一級導(dǎo)航欄中間經(jīng)常能看到搜索框，然后搜索框左右兩邊放置其他的控件。當導(dǎo)航欄的內(nèi)容太多，比如有文字標題、頭像、按鈕等控件，搜索欄和這些控件可能無法并排放置時，可以將搜索欄橫向拉長，放在下一行單獨展示。現(xiàn)在淘寶App首頁的導(dǎo)航欄就做成了兩行，上一行用來放置文字標題和功能圖標，搜素欄集合掃碼、拍照等功能單獨作為一行。我們在使用產(chǎn)品的過程中會發(fā)現(xiàn)，App的導(dǎo)航欄或多或少都存在一些設(shè)計上的差異。二級導(dǎo)航常見的還有在中間使用加粗的文字作為標題，也可以使用主標題+副標題的形式來展示更多的信息。手機界面導(dǎo)航畫畫導(dǎo)航欄設(shè)計樣式？導(dǎo)航欄樣式分為通欄和非通欄，通欄就是通到頁面最頂部的通欄。非通欄的設(shè)計是整個導(dǎo)航欄跟整Banner之間有明顯分界。我們可以結(jié)合站在產(chǎn)品和用戶客戶的角度來看，思考整個導(dǎo)航欄。我們把導(dǎo)航欄做成通欄的時候，Banner更加細膩的，導(dǎo)航欄上的功能入口,比如掃一掃啊，搜索啊，包括消息視覺層面上變得更加弱了。手機界面導(dǎo)航手機界面導(dǎo)航App導(dǎo)航欄設(shè)計注意事項文字、搜索框和圖標的大小尺寸與距離合理文字圖標搜索框手機界面導(dǎo)航畫畫App導(dǎo)航欄文字字號文字字號，一級導(dǎo)航搜索框內(nèi)的文字一般28像素，圖標的文字18像素；二級導(dǎo)航標題文字，在兩倍圖750乘1334的作圖尺寸下，我們會把它做成36像素；文字層級間隔大于4像素；手機界面導(dǎo)航畫畫手機界面導(dǎo)航畫畫App導(dǎo)航欄搜索框

手機界面導(dǎo)航畫畫App導(dǎo)航欄元素間距

Banner就是海報、招貼，直譯通欄廣告圖2-8Banner效果圖2-9Banner效果實訓(xùn)任務(wù)2.4App-Banner設(shè)計首先，我們要清楚我們的設(shè)計目的不論你做的多么漂亮，多么炫酷，多么華麗，多么￥#@……沒用！設(shè)計是為了信息傳達！用戶高效得到信息才是設(shè)計的初衷2秒原則互聯(lián)網(wǎng)上的廣告圖，只有2秒的生存時間。要么被忽視，要么被關(guān)閉，要么被點擊。so...在2秒內(nèi)把你想要說的事情說完！特別對于商城類的，用戶沒時間看你的大作，只是來買東西而已。Banner的結(jié)構(gòu)2.2.2Banner的結(jié)構(gòu)圖2-10Banner的結(jié)構(gòu)1.商品層—商品的清晰度圖片質(zhì)量對于網(wǎng)站的影響是很大的，特別是電商類的網(wǎng)站，圖片要足夠的清晰。要做到最基本的不變形、不模糊、不失真2.2.2Banner的結(jié)構(gòu)圖2-11商品清晰度圖2-12商品鮮艷度2.商品層—展示角度我們一些設(shè)計總想創(chuàng)新，走不尋常路。但是不是什么時候都適合不尋常例如電水壺，永遠都是正側(cè)面，因為經(jīng)過長時間的驗證，這個角度是最容易辨認產(chǎn)品本身和最佳的視覺效果。其他角度的叫“鬧著玩”！圖2-13商品角度3.商品層—摳圖問題有清晰輪廓的產(chǎn)品，可以做摳圖處理輪廓不是很清晰或者不是很美觀的產(chǎn)品，可保留角版處理圖2-14摳圖圖2-15摳圖4.文案層—視覺清晰度產(chǎn)品清晰，文案清晰，背景簡潔屬于高效的信息傳達去色后，文案要很背景拉開明度距離，否則文字容易被閱讀圖2-16視覺清晰度圖2-17視覺清晰度現(xiàn)在很多文案策劃老嫌說的不夠嚴謹，導(dǎo)致文案文字超級長，我們可以采用分段去做；當然也可以跟策劃談?wù)勅松?。文案不要超過8個字圖2-19文案圖2-20文案如果一個背景顏色足夠深，那么寫淺色字是比較好的，如果一個背景顏色足夠的淺，寫深色字是比較好的一個顏色不要同時出現(xiàn)黑色和白色（深色和亮色）圖2-21文案顏色圖2-22文案顏色搭配5.文案層—邏輯清晰度符合人類內(nèi)心原欲的文案，往往更容易驅(qū)動人類行為。從眾：已賣出100000件好奇：神奇手膜，神奇腳模利益：錯過今天再等一年恐懼：消滅你家99.9%的細菌自我：這個表有點貴，但是很帥/我們不賣便宜的，只賣好的搞笑：老板不在，全場亂賣/美工辭職了，老板自己來網(wǎng)絡(luò)流行語在電商上還是很受用的，比如任性，醉了，100塊錢都不給我，洪荒之力之類文案核心是了解人性本身，而不是單純了解你需要推銷的本體。如果碰到什么新春特賣，型男必備，春游必備，新款上架，直接把運營或者文案策劃掐死就行了。圖文不符或者文案不清晰的廣告，只能讓用戶望而卻步圖2-23圖文相符真正的好文案，會擊中你內(nèi)心最薄的那層需求圖2-24好文案圖2-25好文案6.背景層—背景層分解圖2-26Banner的背景層圖2-27Banner的背景層1.垂直構(gòu)圖：可以充分顯示產(chǎn)品和主體的高大與深度，因此多應(yīng)用于單薄細長的產(chǎn)品。2.2.3Banner的構(gòu)圖圖2-28垂直構(gòu)圖垂直構(gòu)圖圖2-29垂直構(gòu)圖2.平衡式構(gòu)圖：平衡式構(gòu)圖可以給人一種完美、滿足的感覺，常用于地產(chǎn)設(shè)計、茶具設(shè)計等。圖2-30平衡式構(gòu)圖圖2-31平衡式構(gòu)圖3.斜線/放射線構(gòu)圖：斜線具有運動、流動的感覺，常用在運動裝備、細長的文具等產(chǎn)品上。圖2-32放射線構(gòu)圖圖2-33放射線構(gòu)圖圖2-34放射線構(gòu)圖圖2-35放射線構(gòu)圖4.對角線構(gòu)圖：巧妙利用了對角線的長度優(yōu)勢，使畫面動感、活潑，達到吸引視線、突出主體、均衡視覺的效果。圖2-36對角線構(gòu)圖圖2-37對角線構(gòu)圖5.框架式構(gòu)圖：框架式構(gòu)圖能增加畫面的縱向?qū)Ρ群脱b飾效果，產(chǎn)生深度感。圖2-38框架式構(gòu)圖圖2-39框架式構(gòu)圖6.九宮格構(gòu)圖：九宮格中的四個交叉點是放置主體的最佳位置，這種構(gòu)圖方式更符合人們的視覺習(xí)慣，使主體自然成為視覺中心。即突出了主體，又平衡了畫面。圖2-40九宮格構(gòu)圖圖2-41九宮格構(gòu)圖112畫畫底部導(dǎo)航欄可以說是現(xiàn)在最流行的導(dǎo)航控件了，微信、支付寶、淘寶、網(wǎng)易云音樂等等，各種類型的APP都有應(yīng)用。作用是為了做好內(nèi)容分類，節(jié)省屏幕空間，等需要的時候更容易被人找到!實訓(xùn)任務(wù)2.5App底部Tab欄設(shè)計底部Tab欄是什么？WHATISIT?113手機界面Tab欄設(shè)計Tab常見布局根據(jù)Banner的位置和主題，選擇以下構(gòu)圖屏幕等分減去左右間距后等分圖標左右間距手機界面底部Tab欄屏幕等分：技術(shù)實現(xiàn)比較簡單，市面上使用比較多的樣式。計算方法：列寬=屏幕寬度/標簽個數(shù)。手機界面底部Tab欄減去左右間距后等分：標簽之間相對緊湊。手機界面底部Tab欄圖標左右間距相等：多用在標簽數(shù)量為3個的情況，因為用屏幕等分方式圖標看起來會比較散，所以可以采用這種方法。117手機界面Tab欄設(shè)計Tab背景樣式常見樣式白色或淺灰黑色毛玻璃透明背景手機界面底部Tab欄白色或淺灰：最為常見的背景樣式，它能夠更好的突出標簽內(nèi)容，同時不會讓底部顯得過重?？梢允褂冒咨油队盎蛘叩撞考訙\灰色分隔線的方式將其和內(nèi)容區(qū)分開。手機界面底部Tab欄黑色背景：黑色背景往往用于一些特殊類型的APP，如運動、股票等，渲染氛圍。手機界面底部Tab欄毛玻璃：在前2年比較流行，多用在IOS中，給人時尚的感覺，不過會耗費大量資源，目前使用的比較少。手機界面底部Tab欄透明背景：采用透明背景，可以讓用戶視覺更聚焦于內(nèi)容本身。但這種方式會導(dǎo)致標簽信息展示較弱，所以透明背景多用在內(nèi)容為主的APP中，如抖音。手機界面Tab欄設(shè)計Tab欄展現(xiàn)方式常見樣式圖標+文字純圖標圖標+文字+駝式按鈕純文字手機界面底部Tab欄圖標+文字：最常見的標簽展示樣式，用圖標吸引人的眼球，配合文字說明，更能凸顯圖標標簽欄。手機界面底部Tab欄純圖標：采用純圖標樣式比較簡潔，但識別性較低，一般適用于小眾產(chǎn)品中，如花瓣、Pinterest，這2個產(chǎn)品是設(shè)計分享類平臺，用戶群體比較小眾且目標用戶是互聯(lián)網(wǎng)從業(yè)人員，對這些圖標含義較為熟悉，采用這種方式會顯得產(chǎn)品比較有氣質(zhì)。手機界面底部Tab欄圖標+文字+駝式按鈕：這種標簽欄樣式常見于社區(qū)類APP中，采用駝式按鈕來突出功能點，引導(dǎo)用戶發(fā)布內(nèi)容。如閑魚PP，點擊加號按鈕就可發(fā)布閑置，調(diào)動用戶積極性。手機界面底部Tab欄純文字：采用這種方式能夠更直觀的讓用戶進行操作，遵循簡單易用的原則。但樣式比較單一，適合用戶群體跨度較大但產(chǎn)品，多用于直播類、內(nèi)容類、簡單工具類APP中，例如小紅書、百度翻譯。實訓(xùn)任務(wù)2.6移動端界面視覺流程設(shè)計畫畫視覺流程是什么？WHATISIT?視覺流程是通過設(shè)計引導(dǎo)使用者的眼睛，通俗的講就是先看到什么，再看到什么，也就是視覺瀏覽的順序。什么是視覺流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺中心次重點再其次信息點......畫畫為什么進行視覺流程梳理？WHYDOYOUDOIT?一個好的設(shè)計不僅僅是好看，更重要的是做出一個正確的設(shè)計，解決實際問題，將信息展示清楚。清晰的展示信息這是非常重要的一個設(shè)計理念。手機界面視覺流程如何理解清晰展示信息？HOWDOYOUDOIT?我么可以根據(jù)主題和甲方要求，按照信息重要性，著手進行視覺信息的依次梳理。在整個視信息按照重要性的等級排列覺的表現(xiàn)中，有最重要的信息，也有相對次要的信息，如果把這些出來，那么就是有層級。如果我們在做設(shè)計之前對信息的層級關(guān)系首先做梳理，然后再去設(shè)計，這樣設(shè)計的作品就會產(chǎn)生極好的視覺流程。手機界面視覺流程表現(xiàn)視覺層級梳理信息層級遵循視覺習(xí)慣？首先我們要指導(dǎo)人類視覺習(xí)慣遵循從左往右、從上到下的軌跡。我們的界面設(shè)計要遵循視覺習(xí)慣來安排，將重對比法則要的信息放到視覺中心的位置，按照視覺規(guī)律來布局各種層級信息。手機界面視覺流程視覺習(xí)慣:遵循從左往右、從上到下的軌跡視覺習(xí)慣:頁面上部比下部更引人注目視覺習(xí)慣:頁面往往是左邊比右邊更引人注目信息元素的位置Position視覺流程賞析/遵循對比法則？對比主要分為：大小對比、粗細對比、色彩對比、明度對比。運用對比的法則，來展現(xiàn)各種層級的信息。手機界面視覺流程遵循對比法則遵循圖片、圖標和文字吸引度？我們需要了解文字、圖片和圖標的吸引度也是不同的。通常來說，三者的吸引度從大到小排列是圖片>圖標>文字。手機界面視覺流程吸引度：圖片>圖標>文字視覺流程清晰如何引導(dǎo)使用者的眼睛：信息元素的位置Position圖片文字的吸引度Colour色彩Colour對比：大小粗細…設(shè)計/非設(shè)計視覺流程清晰圖片文字的吸引度

研究發(fā)現(xiàn)人們會花極少的時間來閱讀大部分頁面，大部分情況下，用戶通過掃描來尋找注意力的吸引點。其中圖標和圖像比文字更具有吸引力。視覺的吸引度之圖片和文字圖標圖片>文字視覺流程清晰色彩的吸引度Colour有顏色的比無色的設(shè)計元素更具吸引力。視覺流程清晰強對比形成吸引力對比越強，越能吸引注意力。對比可以是色彩、大小、形狀、曲直、明暗的對比。大小Size上，大圖比小圖更具吸引力；大字比小字更吸引人的注意力；對比Contrast對比可以是色彩、大小、形狀、曲直、明暗的對比視覺流程清晰設(shè)計元素的吸引力設(shè)計過的圖形和文字更具有視覺吸引力手機界面視覺流程對比法則遵循圖片、圖標和文字吸引度遵循視覺習(xí)慣實訓(xùn)-APP界面視覺流程改版APP界面視覺流程改版實訓(xùn)中，根據(jù)前面講到的方法，分析界面需要改變的地方，然后進行界面改版。手機界面視覺流程改版前界面手機界面視覺流程手機界面視覺流程做好布局的層級：將頁面信息按照重要性排序，在視覺上需要有輕重關(guān)系，重要信息的部分就要做得更加吸引人，其次重要信息的需要稍弱化一些，以此類推。通常來講，手機端Banner區(qū)域位置是視覺上最具有吸引力的位置，其次是下方的金剛區(qū)域，一般叫做磁片區(qū)域。磁片區(qū)域可以根據(jù)品牌和用戶的需求放置運營內(nèi)容、促銷內(nèi)容或者圖標。THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE項目3移動端主題界面設(shè)計實訓(xùn)任務(wù)3.1手機主題鎖屏界面設(shè)計畫畫全球范圍內(nèi)作品招募，所有獲獎作品將在全球范圍內(nèi)發(fā)布和銷售！具體設(shè)計要求：設(shè)計符合主題創(chuàng)意的鎖屏樣式和鎖屏墻紙。華為“百變解鎖”可以實現(xiàn)各種各樣的樣式，鎖屏界面上可以支持音樂播放、顯示天氣預(yù)報；并支持直接解鎖到達相機、短信等各個應(yīng)用，因此請自由發(fā)揮想象力和創(chuàng)造力。需考慮鎖屏操作時會發(fā)生的變化，比如解鎖的手勢、解鎖時引發(fā)的界面動畫、充電時的提示等；建議配以文字說明。解鎖界面墻紙尺寸規(guī)格：1080x1920像素；2021華為全球主題設(shè)計大賽()畫畫華為手機主題獲獎作品手機主題鎖屏

2022vivo全球主題設(shè)計大賽e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插畫設(shè)計提報CONTENTS主題分析設(shè)計元素

／

風(fēng)格表現(xiàn)

／

人員分工草圖方案頭腦風(fēng)暴／

素材收集

／

草圖繪制e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D主題分析SubjectAnalysise7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草圖方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3De7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D頭腦風(fēng)暴根據(jù)任務(wù)要求組織小組討論發(fā)散思維聯(lián)想素材收集主題元素分析素材資源收集明確設(shè)計方向草圖繪制結(jié)構(gòu)比例分析初稿設(shè)計繪制草圖優(yōu)化設(shè)計e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D頭腦風(fēng)暴埃舍爾——矛盾空間紀念碑谷2.5d

太空系太空元素

e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D素材收集

太空系e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D草圖繪制方案優(yōu)化中

太空系草圖優(yōu)化草圖初稿設(shè)計方案SketchScheme

CLICKTODISCOVERe7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3D空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.謝謝實訓(xùn)任務(wù)3.2手機主題內(nèi)頁設(shè)計e7d195523061f1c03a90ee8e42cb24248e56383cd534985688F9F494128731F165EE95AB4B0C0A38076AAEA07667B1565C446FC45FF01DFB0E885BCDBDF3A284F3DB14DA61DD97F0BAB2E6C668FB4931E215FF6878D5F6B0465E977E0E1BFFEC5D6B8E7F4139DCFCEFE639B81BC72DE28A92C85AFCE342342CA29B859019BFB872019A4A7ADEFA2DADD4FDADD226DB3DMAGICAT/THECITYOFTHESKY/2.5DILLUSTRATIONDESIGN

/天空之城/2.5D插畫設(shè)計提報空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.空白演示Loremipsumdolorsitamet,consecteturadipisicingelit.圖標設(shè)計案例一級圖標：新手福利/邀友有禮/私人定制/積分兌換/高效靈活/平臺數(shù)據(jù)二級圖標：會員中心/我的訂單/我的拼團/消息中心/地址管理/分享有禮實訓(xùn)任務(wù)3.3手機主題圖標設(shè)計THANK

YOU!謝謝謝謝UI界面設(shè)計USERINTERFACE項目4網(wǎng)頁UI界面設(shè)計什么是視覺流程？引導(dǎo)使用者的眼睛,首先看到其次看到再其次看到......————————————————————————視覺中心次重點再其次信息點......實訓(xùn)任務(wù)4.1網(wǎng)頁設(shè)計流