《UI界面设计》课件第三章 UI界面设计之平面设计.pptx

UIDESIGN主编：殷辛、李茜

第一节常见界面控件第二节常见控件制作第三节创意图标设计与制作UIDESIGN

一、图标图标需要在很小的范围之内表达出最清楚的含义，让用户“一看即懂”。在设计、制作图标时应该注意其识别性、美观性、一致性与可用性。微课视频

二、按钮按钮是一种基础界面控件，源自生活中的电器元件，允许用户通过点击或其他操作方式进行交互。按钮既可以是文本按钮，也可以是图像图标按钮。

三、菜单任何一个软件或页面都需要通过各种命令来完成各项功能。在有限的界面空间内，命令大多通过菜单来实现。

在移动端界面设计中，“汉堡式”菜单成为界面的重要元素，并得到广泛应用。“汉堡式”菜单设计能减少用户使用过程中的干扰，很多让人眼花缭乱的元素都可以隐藏其中，避免用户注意力太过分散，用户需要时可通过点击图标来访问菜单。这样的菜单设计能提升用户体验。

四、标签标签的作用是对位于其后的界面组件作说明。标签设计应该注意转角部分的变化，状态可参考按钮来设置。

五、滚动条和状态栏滚动条主要是为了对固定大小的区域性空间中内容量的变换进行设计，应该有上下箭头、滚动标等，有些还有翻页标。

状态栏一般用于显示当前的操作状态或提示信息。如图所示的Word状态栏，显示当前Word文档中的当前页数及全文字数、语言等信息。

第一节常见界面控件第二节常见控件制作第三节创意图标设计与制作UIDESIGN

在制作界面控件时，像素网格对齐是非常重要的。左图为矢量图形与像素网格对齐状态，右图为矢量图形未与像素网格对齐状态。

为确保输出图形在界面端口显示清晰，需在制作前将文件状态设置为矢量图形与像素网格对齐。以Photoshop为例，其设置步骤如下。步骤1：启动PhotoshopCC2018，在菜单栏中执行【编辑】命令，如图所示。

步骤2：在【编辑】菜单中执行【首选项】→【工具】命令。

步骤3：在【工具】选项卡中选择【将矢量工具与变化和像素网格对齐】选项。

一、图标的制作功能型图标一般有16px×16px、24px×24px、28px×28px、32px×32px、36px×36px、48px×48px等尺寸，图标所在位置不同，尺寸就不同。展示型图标一般有44px×44px、48px×48px、64px×64px、96px×96px、128px×128px等尺寸，不同用户端口所需图标尺寸不同，最大图标尺寸为256px×256px

步骤1：启动PhotoshopCC2018，执行【文件】→【新建】命令，在【新建文档】对话框中设置各项参数。将背景图层设置为不可见。

步骤2：在工具栏中选择【椭圆工具】，然后按住【Shift】键，在画板中绘制一个正圆形，并将其填充为黑色，效果如图所示。

步骤3：选择图层“椭圆1”，按【Ctrl】+【J】组合键复制椭圆图层，并更名为“椭圆2”。然后按【Ctrl】+【T】组合键进入自由变换模式，在状态栏中单击【保持长宽比】图标?，将宽（W）与高（H）的数值设置为“80%”。为使视图清晰，将椭圆填充为白色。

步骤4：继续选择图层“椭圆1”，按【Ctrl】+【J】组合键复制3个椭圆图层，分别更名为“椭圆3”“椭圆4”“椭圆5”，并将其依次排列。然后按【Ctrl】+【T】组合键进入自由变换模式，在状态栏中单击【保持长宽比】图标?，将宽（W）与高（H）的数值分别设置为“60%”“40%”“20%”。

步骤5：选中“椭圆1”“椭圆2”图层，按【Ctrl】+【E】组合键合并椭圆形状，在工具栏中选择【路径选择工具】，选择上层椭圆。

步骤6：在状态栏中单击【路径操作】图标?，然后执行【减去顶层形状】命令，制作圆环，将圆环填充为黑色，并将图层重命名为“圆环1”，效果如图所示。

步骤7：选中“椭圆3”“椭圆4”图层，按【Ctrl】+【E】组合键合并椭圆形状，在工具栏中选择【路径选择工具】，选择上层椭圆。在状态栏中单击【路径操作】图标?，然后执行【减去顶层形状】命令，制作圆环，将圆环填充为黑色，并将图层重命名为“圆环2”。

步骤8：同时选择图层“圆环1”“圆环2”“椭圆5”，按【Ctrl】+【E】组合键合并形状，并将图层重命名为“椭圆”。

步骤9：在工具栏中选择【矩形工具】，然后按住【Shift】键，在画板中绘制正方形，尺寸为400px×400px。按【Ctrl】+【T】组合键进入自由变换模式，按住【Shift】键将图形顺时针旋转45°。

步骤10：选择图层“矩形1”，并将底角与圆形圆心对齐。然后选择图层“矩形1”“椭圆”，按【Ctrl】+【E】组合键合并形状，在工具栏中选择【路径选择工具】，选择上层矩形，在状态栏中单击【路径操作】图标，然后执行【与形状区域相交】命令。

步骤11：在画板中对图形位置进行调整执