UI界面設計 課件 重大 第一部分 界面設計概述

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

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

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

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

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