《UI設(shè)計(jì)》課件-擬物圖標(biāo)

`USERINTERFACE

DESIGN

`UI視覺設(shè)計(jì)SKEUMORPHISM擬物化圖標(biāo)UI設(shè)計(jì)，擬物化與扁平化就是追求模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等各種效果對實(shí)物進(jìn)行再現(xiàn)（也可適當(dāng)程度變形和夸張）；擬物設(shè)計(jì)VS扁平化設(shè)計(jì)就是摒棄以上對效果（尤其是高光、陰影等能造成透視感的效果）的追求，追求通過抽象、簡化、符號化的設(shè)計(jì)元素來表現(xiàn)。擬物設(shè)計(jì)VS扁平化設(shè)計(jì)UI設(shè)計(jì)，擬物化與扁平化關(guān)于擬物化和扁平化，我們可以通過以下兩張圖片直觀感受一下：畢加索《亞維儂的少女》擬物設(shè)計(jì)扁平化設(shè)計(jì)UI設(shè)計(jì)，擬物化與扁平化Chrome的Logo的扁平化設(shè)計(jì)：另一個(gè)扁平化例子：擬物化ROM扁平化ROM擬物化圖標(biāo)的概念

模擬現(xiàn)實(shí)物品的造型和質(zhì)感，通過疊加高光、紋理、材質(zhì)、陰影等效果對實(shí)物進(jìn)行再現(xiàn)，注意交互的方式從實(shí)際出發(fā)視覺+交互/ui-kits-with-psd-files優(yōu)點(diǎn)：認(rèn)知和學(xué)習(xí)成本低人性化的體貼與提示缺點(diǎn)：花費(fèi)大量的時(shí)間在視覺陰影和質(zhì)感效果適配困難響應(yīng)式布局寸步難行擬物化的留白比較少，重點(diǎn)留在質(zhì)感上，細(xì)節(jié)容易忽略。響應(yīng)式設(shè)計(jì)，響應(yīng)式布局或多功能適配，擬物化的圖標(biāo)很難一個(gè)個(gè)切圖和適配質(zhì)感擬物化圖標(biāo)的優(yōu)點(diǎn)缺點(diǎn)（一）擬物材質(zhì)的分類材質(zhì)的表現(xiàn)：（1）光感效果，通常表現(xiàn)物體的體積感、厚重感，注重素描理論基礎(chǔ)。（2）啞光質(zhì)感效果，簡潔圖形加“低維度”的質(zhì)感，通常作為扁平化圖標(biāo)的延伸。（1）光感效果高光亮面暗面反光明暗交界線球體被放置在橙色的底板上，而底板和球都都置于樹下，渲染出來的環(huán)境光就和Yosemite的圖標(biāo)的金屬部分的效果非常接近。@陳子木1.光感材質(zhì)處理：光感材質(zhì)包括：玻璃、水晶、金屬……繪制過程中需考慮打燈的位置，且高光位置需一致高光面可以有兩種表現(xiàn)形式：（1）硬高光：通常用漸變+蒙板（輔助）來實(shí)現(xiàn)（2）軟高光：通常用形狀工具+高斯/動(dòng)感模糊來實(shí)現(xiàn)反光面可以在圖層模式中進(jìn)行調(diào)整：疊加/濾色/顏色減淡……原則可制造微亮效果的均可使用反射面是最后加以輔助的表現(xiàn)，通常會(huì)用“玻璃窗戶”等元素達(dá)到反射環(huán)境物的修飾，記住將透明度調(diào)低硬高光軟高光@陳子木@陳子木2.光滑面板的表現(xiàn)3.水晶球的表現(xiàn)分析一顆水晶球水晶的扁平：明顯的明暗交界線且成環(huán)形，暗面與反光面緊貼2、啞光質(zhì)感材質(zhì)啞光質(zhì)感的物件由于表面粗糙，漫反射加大，故此高光不明顯，在質(zhì)感的塑造上又是一件新鮮的事情！啞光的材料包括：布、木、塑料、紙、皮革……

木質(zhì)導(dǎo)航紙質(zhì)導(dǎo)航1.啞光質(zhì)感效果的處理兩種慣用方式：（1）預(yù)設(shè)圖案（自制or套用素材），進(jìn)行填充（2）添加糙感：濾鏡雜色+模糊有時(shí)會(huì)兩者一起使用！2.布料的表現(xiàn)重點(diǎn)：布紋粗糙感的營造，可以用“雜色”（確保前景是白色）你可以自己設(shè)置圖案，構(gòu)建不同質(zhì)感的材料：創(chuàng)建畫布（不能少于10×10px）可采用了100x100px，這樣便能進(jìn)行”放大””縮小”。放大到3200%來繪制你的圖案3.木材的表現(xiàn)濾鏡→雜色→添加雜色（可勾選單色，100%）濾鏡→模糊→動(dòng)感模糊Ctrl+B調(diào)節(jié)