ui界面中基本元素的制作与设计.ppt

第三章：UI界面中基本元素的制作与设计 3.1.1 按钮的设计原则 在进行按钮设计之前，显然我们来了解一下按钮的表现形式和状态。按钮在移动UI界面是启动某个功能，运行某个动作的触动点。常见的按钮外观包括了圆角矩形、矩形、圆形等；当然，有的应用程序为了表现其独特的、个性化的设计效果，也会设计出异形的按钮。 由于按钮是用户执行某项操作时所接触的对象，因此在操作中一定要有反馈，让用户明白发生了什么，这就要求按钮在设计中需要制作出几种不同的状态。按钮通常包含了5种不同的状态。 在按钮的设计过程中，确保按钮外观不改变的前提下，我们可以通过阴影、渐变、发光等特效的编辑来创建按钮的多种不同状态。 应用程序的界面中要强调的链接会以按钮的形式表现，尤其重要的按钮是促成用户完成页面功能的一个很重要的部分；所以对于其本身来讲，应该具有吸引眼球的效果，如下图所示。对于一个可以起到突出作用的按钮，首先其本身的颜色应该区别于它周边的环境色，因此它要有更亮而且更高对比度的颜色；其次按钮的设计可以多利用符号、图标，比如说箭头，这样的设计绝对要比文字的描述更直观；最后值得注意的是，按钮的设计要与整个界面的风格、材质相搭配，这样设计出来的按钮才符合实际的需要。 3.1.2 扁平化按钮设计 案例1 首先用用圆角矩形工具拖出一个圆角矩形作为开关的基本形，颜色选择一个明亮的绿色。 添加内阴影样式，使用圆角矩形有向内凹陷的效果。注意阴影的颜色不要用黑色而是要用一个与底色同色系的颜色。 继续添加外发光效果，使得圆角矩形更加柔和，能够与环境融合。 最后就会得到一个绿坑： 为了让绿坑更加有层次感，我们需要新建一个上下左右都大5PX（可根据实际情况调整）圆角矩形图层，添加图层样式。 这样我们就能让圆角矩形变得更加丰富层次了。 新建一个圆角矩形层，比前一步做的绿坑小4PX左右并添加图层样式。 现在雏形已经出来了，继续新建一个圆角矩形图层，等比例缩小一圈，并添加图层样式，这样可以做出立体效果。 接下来继续添加阴影，丰富立体效果。 建一个正圆，添加图层样式，制造凹陷的效果。 最后添加一行英文，提升整体效果。 案例2 PS设计制作扁平化IOS7风格图标，教程制作出来的图标还挺漂亮的，制作的难度也不大。我们先来看看最终的效果图吧： 步骤 1 ：打好地基 Cttrl + N 创建画布，大小为1024px * 1024px ， 填充背景色为#fcf2da。 然后/编辑/ 首选项/参考线/网格和切片，设置如下： 先创建一个圆角矩形，大小为512px*512px，半径120px，填充颜色#c47420，命名icon base 添加内阴影，参数如下： 为它做一个长投影效果，创建一个矩形，填充黑色，大小可以自己调整，我是宽718.22px和高732.74px，Ctrl + T 变换角度。 添加图层样式—— 渐变叠加，参数如图，顺便把不透明度调整为30%，填充0%。 步骤 2 ：创建笔记本 同样创建圆角矩形，参数如左下图。然后复制一层，快捷键A来到选择工具，减少16px，调整高度为432px。 完成后继续复制一层，依上高度改为416px，填充颜色改为 # f3f3f3，完成后如右下图。 笔记本雏形完成了，现在给它划线，用直线工具，粗细的像素调整为2，填充黑色。 完成后调整图层不透明度为20%，如下图所示。 步骤 3：创建铅笔 创建矩形，大小为192 x 96px，颜色改成 #00da67或者任何你喜欢的颜色。 继续创建两个矩形，高度改为32px，填充黑色，调整不透明度为25%和10%，整齐列到笔身上，如左下图所示。继续创建笔头，可以用多边形工具，双击画布后，参数设置如中下图所示，颜色填充为#e39a4d，然后对齐笔身。 现在创建笔尖，如法炮制一个三角形，大小为32x32px，颜色填充为#474f57，移动到笔头处对齐，创建为剪切蒙版，如下图所示。 大型以及出来了，再给它加个橡皮擦。 创建一个圆角矩形，宽高是64x96px，半径是20px，颜色填充# f78879，命名为Rubber 然后创建一个矩形，大小32x96px，填充颜色# d5d5d5，如左下图所示。为它添加点光，创建一个圆角矩形，大小是10* 40px ，填充白色，不透明度改成30%，如右下图所示。 最后给它添加长投影，创建矩形，大小352x160px，其他的按照前边的长投影一样变换角度，添加渐变就大功告成了。 更多案例 使用混合模式和遮罩效果制作网页按钮 打开Photoshop，新建空白文档，为了不让白色背景看起来乏味，增加一个渐变叠加效果。渐变颜色为