UI图标设计-时钟课件.ppt

《UI图标设计-时钟课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、图标设计——时钟UI黄王龙·HWLONGUI的概念什么是UI什么是UI设计拟物设计扁平设计什么是UI?UI即UserInterface（用户界面）的简称是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等什么是UI设计?UI设计不是美工，也不是美术绘画，需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。对软件的人机交互、操作逻辑、界面美观的整体设计，UI设计主要分类有平面设计、WEB前端设计、移动端设计、交互设计，主要注重用户的交互体验。原则：1、置界面

2、于用户的控制之下；2、减少用户的记忆负担；3、保持界面的一致性。拟物设计模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟真实物体，拟物设计会让你第一眼就认出这是个什么东西。交互方式也模拟现实生活的交互方式。拟物化设计的优点：1、认知和学习成本低，外婆级的人也能看懂IOS里面几乎所有原生应用的图标；2、各种按钮的视觉质感和按下去之后的交互效果，养成用户对这类“东西”的统一认知和使用习惯；3、人性化的体贴：我相信有很多同学都非常喜欢ibooks的体验，用它来阅读确实是一种享受。拟

3、物化设计的缺点：大多数拟物化界面并没有实现功能化，只有花费大量的时间在视觉的阴影和质感效果。扁平设计摒弃高光、阴影等造成透视感的效果，通过抽象、简化、符号化的设计元素来表现。界面上极简抽象、矩形色块、大字体、光滑、现代感十足，让你去体会这是什么东西。其交互核心在于功能本身的使用，所以去掉了冗余的界面和交互。扁平化的优点：1、简约而不简单，搭配一流的网络、色彩设计，让看久了拟物化的用户感觉焕然一新；2、突出内容主题，减弱各种渐变、阴影、高光等拟真视觉效果对用户视线的干扰，让用户更加专注于内容本身，简单易用。3、设计更容易，优秀扁平的设计只

4、需保证良好的架构、网络和排版布局，色彩的运用和高度一致性。扁平化设计的缺点需要一定的学习成本，且传达的感情不丰富，甚至过于冰冷。效果图重点绘图工具形状工具：圆形工具，圆角工具，矩形工具PS图像处理应用A图层效果（难点）投影、渐变叠加、浮雕效果、内阴影，外发光、图层叠加等B滤镜功能（难点）添加杂色动感模糊C效果图分解木纹底盘凹盘白盘刻度指针反光环境光绘制底盘一1.新建800X800像素的文档2.选择工具箱圆角矩形工具，属性栏上的半径改成50像素，绘制正圆角矩形,填充成黑色。绘制底盘一3.设置底盘图层样式效果：投影参数渐变叠加绘制底盘一4.

5、设置底盘图层样式效果：浮雕参数设置投影、颜色叠加‘浮雕后，得到如下效果：增加底盘木纹二5.通过滤镜增加木纹效果：新建图层，按住Ctrl键，点刚画出来的圆角矩形载入选区，填充深黄色，选择“滤镜—杂色—添加杂色”，然后锁定图层，点“滤镜—模糊—动感模糊”添加杂色动感模糊增加底盘木纹二6.把木纹图层的透明度改为“50%”，图层模式为“叠加”，效果如下：二绘制凹盘二1.用椭圆形状工具，按Shift，绘制一个正圆行，如图：（什么颜色都可以）三2.设置图层样式：外发光：绘制凹盘二三3.继续图层样式：渐变叠加：内阴影：效果如图：绘制凹盘二三4.复制刚

6、才做好的图层，按住“Ctrl+T”选中，再按“Shift+Alt”往中间缩放，调整“内阴影”参数，如图：效果如图：图层绘制白盘二四1.再次复制一个上面做好的圆形图层，缩放一点，然后调整“渐变叠加”图层效果，如图：绘制刻度二五1.新建图层，用“矩形形状工具”绘制一个小长方形，填充红色，如图：2.按住“Shift+Alt”复制一个，拉到下面，如图：3.选中两个图层，按“Ctrl+E”，把它们合并成一个图层。如图：绘制刻度二五4.复制一个刚才合并的刻度图层5.按”Ctrl+T”，在属性栏上把旋转角度改为30度。6.按回车键确定，然后按”Ctr

7、l+Shift+Alt+T”连续按4次，如图：绘制刻度二五7.把斜角刻度填充成黑色，给刻度添加浮雕样式，如图：投影：浮雕：绘制指针六1.用矩形工具绘制厂方形大小不同的指针，添加投影，如图：投影参数：绘制反光七1.利用白色盘载入选区，新建图层，填充白色，选中”选框工具”,移动选框，然后按“Delete”删除,如图：利用白色盘载入选区新建图层，填白色移动选区，删除绘制反光七2.前景色为黑色，添加图层蒙版，用画笔（画笔透明度为20%），轻轻的在蒙版上涂画，白边遮蒙掉，效果如图：蒙版图层效果绘制环境光八1.新建图层，画两个方形2.Ctrl+t自

8、由变形，按“Ctrl+Shift+Alt”，用鼠标把两个方形拉成倒梯形，如图：3.右键，点“变形”，或者点属性栏上的“变形”图标，把上面拉弯，如图绘制环境光八1.把变形好的梯形移到合适的位置，图层透明度为5