《UI设计》课件——拟物图标.pptVIP

/wooden-texture-patterns4塑料效果5折纸THANKYOU?`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调节色调（改色）Ctrl+L调节色阶(改暗)