第三章UI界面中基本元素的制作与设计.ppt

第三章：UI界面中基本元素的制作与设计 3.3.1 进度条的设计原则 在应用程序的操作中，对于完成部分可以确定的情况下，使用确定的指示器能让用户对某个操作所需要的时间有个快速的了解，这种指示器我们称之为进度条。 进度条显示的类型有两种，一种是线形进度指示器，一种是圆形进度指示器，可以使用其中任何一种来指示确定性和不确定性的操作。如下图所示为线形进度指示器的设计效果。 有的线形进度指示器会将加载信息的百分比显示出来，有的则只包含一个进度条，用户只能通过观察线形长短大致猜测加载进度。我们常用的播放器的播放进度条就是最常见的一种线形进度指示器。 圆形的进度指示器可以和一个有趣的图标或者刷新图标结合在一起使用，它的设计相比线形进度指示器显得更加丰富。如下图所示为圆形进度指示器的设计效果。 当用户进入页面加载时而在小小的等待中，美丽的界面设计能给用户带来一瞬间的惊叹，让用户再也不觉得等待是漫长的。精致的细节，往往最能考验设计师的技术，但同时也是最能打动人心的关键。如下图所示的进度条在设计中不但创意十足，而且细节和质感都非常完美。 3.3.2 扁平化进度条的设计 扁平化完全属于二次元，这个概念最核心的地方就是放弃一切装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素一概不用。所有的元素的边界都干净利落，没有任何羽化，渐变，或者阴影。尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。如下图所示为扁平化进度指示器的设计效果。 案例 首先给背景添加一个灰白的渐变，提升整体质感。 用椭圆形工具选择形状，画一个正圆，取消填充给描边，设置如下图所示。 加参考线确定好圆心，选择形状用矩形工具在右上角画一个矩形，填充给灰色取消描边，然后添加剪切蒙板（按住Ctrl+Alt鼠标左键点击两图层间的横线），设置如下图所示。 选择形状用椭圆形工具画一个小圆，放在右边红灰相间的位置上，调整好大小，填充给红色取消描边，上部分灰色圆圈的制作原理一样，设置如下图所示。 效果如下图所示，最后添加上文字内容，案例完成。 3.3.3 层次感强烈的进度条的设计 跟扁平化完全不同，有装饰效果，诸如阴影，透视，纹理，渐变等等能做出3D效果的元素，体积感较强。如下图所示。 案例 新建个文档，我这里用的是800*800像素，填充黑色，并设置一个图层样式。 将“背景”图层转换为智能对象，执行滤镜/杂色/添加杂色，设置数量为1，高斯分布，勾选单色。 执行滤镜/滤镜库/画笔描边/阴影线，设置描边长度4，锐化程度10，强化1。 现在，我们就完成了背景的创建。 画一个620*45像素的圆角矩形。 为这个圆角矩形添加一个图层样式。 设置完图层样式，我们得到如下效果。 接下来，我们画一个白色的500*25像素的圆角矩形。 我们画一个细长矩形，然后旋转30度。 用直接选择工具，选择住这旋转后的矩形，CTRL+T，把X轴的水平位置增加35像素。如我下图中的截图，原来的位置是80像素，更改为115像素。 用直接选择工具选择住这个矩形，CTRL+ALT+SHIFT+T，疯狂复制，友情提示，用直接选择工具选择住，再次变换的时候，就不会生成新图层，因为我们只想要得到一个图层而已，现在，我们得到如下效果。 我将这一堆的条纹取名为渐变，将其下移到白色圆角矩形的位置，创建一个剪贴蒙版，并设置个图层样式。