3.6.3木纹质感的标签栏设计.pptVIP

第三章：UI界面中基本元素的制作与设计（五） 3.6.1 简易的列表栏设计 使用标签栏可以将大量关联的数据或者选项划分成更容易理解的分组，能够在不需要却换出当前上下文的情况下，有效地进行内容导航和内容组织，如下图所示为标题栏的实际应用效果。 即便是在两个标签之间，标签栏中呈现的内容也可以有很大的差别，如下图所示。标签栏应该逻辑地组织相关内容，并提供有意义的区分，也可以是图标或者文字的组合，并且在必要的时候会使用混合的方式表现一些提示信息。 根据平台和使用环境，标题栏的内容可以表现为固定的或者是滑动的。固定的标签栏最适合用于快速相互切换的标签。视图的宽度限制了标签的最大数量。在固定的标签栏中每个标签宽度相等，直接通过单击标签或者在内容区域中左右滑动来可固定的标签视图之间进行导航。 滑动的标签栏用于显示标签的子集，可以包含更长的标签和更多的标签数量，最适合用于触摸操作的浏览环境；通过点击标签，在标签栏上左右滑动，或者在内容区域中左右滑动，可在滑动的标签间进行导航，如下图所示。 3.6.2 线性化的标签栏设计 设计关键词：扁平化、线性、ios系统 软件功能提要：圆角矩形工具、“描边/颜色叠加”图层样式、横排文字工具 制作步骤详解 在photoshop中创建一个新的文档，将其“背景”图层填充上适当颜色；选择工具箱中的“圆角矩形工具”，接着在图像窗口中单击并拖拽鼠标，绘制一个圆角矩形，使用“描边”图层样式对其进行修饰。 选择工具箱中的“矩形工具”绘制出一个矩形，接着设置其“填充”任意颜色，利用“颜色叠加”图层样式对其进行修饰，在图像窗口中可以看到编辑的效果。 选择工具箱中的“直线工具”绘制出垂直方向的两条直线，填充上白色，放在矩形的两侧，在图像窗口中可以看到编辑的效果。 选择文字工具箱中的“横排文字工具”输入所需的文字，打开“字符”面板设置文字的属性，完成本例的制作。 3.6.3 木纹质感的标签栏设计 素材：木纹素材.jpg 设计关键词：立体化、内阴影、木纹、Android系统 软件功能提要：圆角矩形工具、多种图层样式的应用、横排文字工具 制作步骤详解 运行Photoshop应用程序，创建一个新的文档，将木纹素材.jpg添加到图像窗口中，适当调整其大小，使其铺满整个画布，最后将素材与“背景”图层合并在一起。 选择工具箱中的“圆角矩形工具”，在其选项栏中进行设置，绘制出一个黑色的矩形，设置其混合模式为“柔光”，接着使用“投影”和“颜色叠加”图层样式对其进行修饰，并在相应的选项卡中设置参数，在图像窗口中可以看到编辑的效果。 选择“圆角矩形工具”绘制出所需的形状，将其命名为“按钮”，使用“内阴影”、“渐变叠加”、“图案叠加”和“投影”图层样式并降低图层不透明度对其进行修饰，并在相应的选项卡中对参数进行设置，在图像窗口中可以看到编辑的效果。 使用“直线工具”绘制出所需的线条，对标签栏进行分割，设置其“填充”选项的参数为5%，接着使用“斜面浮雕”和“颜色叠加”图层样式对绘制的线条进行修饰，并在相应的选项卡中对参数进行设置，在图像窗口中可以看到编辑的效果。 使用“圆角矩形工具”绘制出所需的按下状态的形状，接着使用“斜面浮雕”、“颜色叠加”、“图层叠加”和“渐变叠加”图层样式修饰绘制的形状，并在相应的选项卡中对参数进行设置，在图像窗口中可以看到的编辑的效果。 使用“横排文字工具”输入所需的文字，打开“字符”面板堆每个文字图层的属性进行设置，把文字按照相同的间距放在适当的位置上。 对其中一个文字图层应用“投影”和“颜色叠加”图层样式，设置完成后，将编辑的图层样式复制和粘贴到其它的文字图层中，完成本例的编辑。 3.7.1 图标栏的设计原则 图标栏特别适合有三个或者三个以上的操作，需要提供给用户选择并且不需要对操作有额外解释的情景。图标栏可以是列表样式的也可以是宫格样式的，宫格不局可以增加视觉的清晰度，如下图所示为不同App中图标栏的设计效果。 使用图标栏可以展示和其它APP相关的操作，比如作为进去其它App的入口。在一个标准的列表样式的底部图标栏中，每一个操作应该有一句描述和一个对齐的图标。如果需要的话，也可以使用分隔符对这些操作进行逻辑的分组，也可以为分组添加标题或者副标题。 图标栏在样式表现上也比较灵活，根据信息内容的需要，有点图标栏在界面的两侧，有的图标栏在界面底部且行数在两行以上，具体如下图所示。 在设计图标栏的过程中，有的图标栏中只使用具有很强指示作用的图标对信息进行表现，而又的使用图标加文字的方式进行表现，如下图所示，不管是用那种方式，图标栏中的图标都要与实际操作功能相符，并且整个图标栏的文字和图标风格要保持一致。 3.7.2：线性化的图标设计