




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
`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調節
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
評論
0/150
提交評論