`USERINTERFACE

DESIGN

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

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

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