![App+软件+游戏+网站界面设计教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/297/33831297/b_33831297.jpg)
实战练习01 制作扁平化按钮
视 频:资源包\视频\第2章\2-4-1.mp4
源文件:资源包\源文件\第2章\2-4-1.psd
●案例分析
本案例是设计制作一款扁平化风格的按钮,配色方案是用大面积的中性色搭配少量的黄色、红色、绿色和蓝色,使整个按钮看起来简单大方。按钮的设计摒弃了大量的阴影和高光,选择少量发光元素凸显按钮的外形,而圆形的外观设计沿用了之前的设计理念,使大众在看到图形的瞬间就知道它是按钮,案例的完成效果如图2-23所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_24.jpg?sign=1734435842-SVQ6MDWS78t1F9C7HYySk8OcDggsl1tK-0-85807cae29a44cb1bd219524374c146c)
图2-23
●制作步骤
01 执行“文件>新建”命令,弹出“新建”对话框,新建一个空白文档,如图2-24所示。使用“渐变工具”在画布上拖动鼠标填充从RGB(237、243、246)到RGB(181、190、195)的线性渐变,效果如图2-25所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_25.jpg?sign=1734435842-bxhMXJGFdK85pyEWAa9HGbrTYfe8X9jd-0-96d18381b619cef9143a86c5cb429695)
图2-24
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_26.jpg?sign=1734435842-RwSmyRoeUOhZ1GhfSLDbHcdGwPEsEl9D-0-1903919334c160a580ba52cbe9a9ce23)
图2-25
02 执行“视图>新建参考线”命令,弹出“新建参考线”对话框,在对话框中设置参数,如图2-26所示。使用相同方法再次创建参考线,完成后的画布效果如图2-27所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_27.jpg?sign=1734435842-022yY2oj1uTEEAMa44hFXIqLmJm6e4HO-0-00bd855f59bc35c3c51efde345096215)
图2-26
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_28.jpg?sign=1734435842-cS6wpR7DbrEOjjk2GvH3weT3slemQodi-0-b46216e9c49ebab32c13dcd1bf0bd504)
图2-27
03 使用“椭圆工具”在画布中心绘制形状,形状属性如图2-28所示。绘制完成后,形状的图像效果如图2-29所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_29.jpg?sign=1734435842-KW0BR8JNbNv9TJoIAzIpgPWnSZemedEN-0-2dd89c3928b7d35c565b34122ae25351)
图2-28
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_30.jpg?sign=1734435842-rIUsrhU3JULwzzpzMjp81LBipLaSmtCz-0-eb9b7a5ec33e574eb2fe937335963563)
图2-29
04 双击形状图层缩览图,打开“图层样式”对话框,选择“投影”选项进行相应设置,如图2-30所示。设置完成后,单击“确定”按钮,图像效果如图2-31所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_31.jpg?sign=1734435842-xFQd1YRji5wF9u04dtjSXlTUhsKVzv32-0-d1bb1128f6bd2d162fb4ce5adc44cc54)
图2-30
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_32.jpg?sign=1734435842-1hSfHzEL334ilQPmVLo0I3AiLBl4AdNk-0-986b0d241f2d0d80d1aae5401b4dba50)
图2-31
05 复制“椭圆1”图层并清除图层样式,将“路径操作”更改为“减去顶层形状”选项后,继续使用“椭圆工具”绘制一个720px×720px的椭圆形状,如图2-32所示。使用“路径选择工具”调整形状位置,如图2-33所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_33.jpg?sign=1734435842-XntjX7wbR9t9yzBbEux69ur6f3RkigsL-0-2b9a7659659be6af732779a83d3d780e)
图2-32
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_34.jpg?sign=1734435842-XYkupC9TLCSpIAlY6eF6UvyoJGGkn1Vy-0-b63f1a244b5fd0964227dd5451fbebf2)
图2-33
提示
使用“形状工具”在画布中绘制形状时,可以首先在画布中单击,然后在弹出的“创建形状”对话框中设置形状的大小、半径值和边数等参数,设置完成后,单击对话框中的“确定”按钮,即可完成形状的绘制。但是这样创建的形状往往会出现在画布的任意位置,像图2-31 中的椭圆形一样,需要调整形状的位置。
06 双击形状图层缩览图,打开“图层样式”对话框,选择“斜面和浮雕”选项进行相应设置,如图2-34所示。设置完成后继续选择“描边”选项,设置具体参数,如图2-35所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_35.jpg?sign=1734435842-v7v6J4Gnr8HaaAB0S9VrEEsy4vxnsGn3-0-e39036018a527312d8c1df631dd645a5)
图2-34
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_36.jpg?sign=1734435842-PsWTcOd9lV07Y7FYJOXDPXBOODJTCeLO-0-d7ab86627a151bb6d7f89d90022c6f60)
图2-35
07 图层样式设置完成后,单击“确定”按钮,图像效果如图2-36所示。打开“图层”面板,选择除“背景”图层以外的两个形状图层,使用快捷键【Ctrl+G】将其编组,“图层”面板如图2-37所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_37.jpg?sign=1734435842-53qdxz5jqGfTrJOU1poQrP4Ho5MrBiuD-0-56cf1fc8ef65dc05061157c0b6076413)
图2-36
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_38.jpg?sign=1734435842-4SrTIEc94BAKA1fIM7skAmfEg7QaPBcO-0-1a4d8c2eea2141c9d07d9a43e88d77d7)
图2-37
08 使用“椭圆工具”绘制一个颜色为RGB(41、41、41)的形状,为图层添加“渐变叠加”图层样式,如图2-38所示。执行“文件>打开”命令,将素材图像“24101.png”拖曳到设计文档中,并摆放到合适位置,如图2-39所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_39.jpg?sign=1734435842-56PJVnjwCyzSls6aFeBEKFwnjfNNCu2p-0-d974e408f11dc43f99ac2d9118497577)
图2-38
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_40.jpg?sign=1734435842-kyYimjk0x3gpwlGtHfj5kqzyM6Vr5nkC-0-4138dc53bd0453470029199b0816faf8)
图2-39
09 执行“文件>打开”命令,将素材图像“24101.png”拖曳到设计文档中,并摆放到合适位置,如图2-40所示。新建一个30px×30px的透明文档,在画布中填充颜色,如图2-41所示。执行“编辑>定义图案”命令,保存图案。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_41.jpg?sign=1734435842-FyFllgUKW8iqdCA1J1vqNhCVXlCMDZRA-0-d1d4909dd8adda44c3e720d38bee5c1d)
图2-40
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_42.jpg?sign=1734435842-a6yUUvm8hW2Dfm7Hid3fH6icZUkj1dJW-0-e83bb48140400c8003743e63b63cc8d7)
图2-41
10 双击形状图层缩览图,打开“图层样式”对话框,选择“颜色叠加”选项进行相应设置,如图2-42所示。设置完成后继续选择“图案叠加”选项,设置具体参数如图2-43所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_43.jpg?sign=1734435842-yTnGF2lIgWfkRCTpBrySQCDtkUZmWZH3-0-362d3123030b259fb1c3acdd2553a1b7)
图2-42
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_44.jpg?sign=1734435842-PvT8g4oXRxb7Kr5D9DS2oUwI3EGon6ua-0-e44afd1ce7259613f2942c4d24291b39)
图2-43
11 设置完成后单击“确定”按钮,图像效果如图2-44所示。打开“字符”面板,设置参数如图所示。使用“横排文字工具”在画布中输入符号,符号颜色为RGB(223、223、223),如图2-45所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_45.jpg?sign=1734435842-efwroZFjeyn0me170lS47aT5n3tr0aKj-0-26137d8510cfafaaa8cc43d09c5c3eeb)
图2-44
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_46.jpg?sign=1734435842-WmzRX2SuuE0lTi8I46DZS6UBCuMfAi9K-0-a3a110a24f8f9be0816456b7baeeb414)
图2-45
12 双击形状图层缩览图,打开“图层样式”对话框,选择“描边”选项进行相应设置,如图2-46所示。设置完成后继续选择“外发光”选项,设置具体参数,如图2-47所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_47.jpg?sign=1734435842-93CjnpzWZZduuY6cMZxt8FfSSQUgcdr2-0-c9e08ed5547314f289e57d6110884c9e)
图2-46
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_48.jpg?sign=1734435842-UXp2f0gIAaRqIXk3jJhSRQ4BOCVQsdWe-0-ed43394ebcb2c8df114db69adfc47f24)
图2-47
13 打开“图层”面板,选中相关图层将其编组,并重命名为“面”,如图2-48所示。完成整个按钮的绘制后,图像效果如图2-49所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_49.jpg?sign=1734435842-HDf8DGaIMGXbchW51aGLG6SeGT6tWfoC-0-eedf8f7a64ff74622a88652c7b5e6d90)
图2-48
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_50.jpg?sign=1734435842-kKcRv8CghdDOPFv1P5EMGqYnGMcAdoJA-0-9189c83e5597f132608c103479bdf3a8)
图2-49
14 打开“图层”面板,隐藏“背景”图层,执行“图像>裁切”命令,弹出“裁切”对话框后设置参数,如图2-50所示。执行“文件>导出>导出为”命令,弹出“导出为”对话框,参数设置如图2-51所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_51.jpg?sign=1734435842-kQUUJLM4lnXQLYO2atAqAVFGf2d3104K-0-ee8dbbe2ef2b0f3ee2cee41801eb2866)
图2-50
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_52.jpg?sign=1734435842-hE4JFtFeFh8jCXEAn7D9V2GNegFAF2PC-0-d62902a2fdcd68bd1470b1728257dabf)
图2-51
15 设置完成后,单击“全部导出”按钮,在弹出的对话框中选择存储切图的文件夹。文件导出后,图像效果如图2-52所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_53.jpg?sign=1734435842-nTZ1QxaojFq2LJzRyUlF1Pnq3GRpW5zD-0-870df97a4c0f0e8b415737e6c19e471a)
图2-52
知识链接
按钮和图标的切图输出
1.切图尺寸必须为双数,是为了保证切图图片在工程师开发时高清显示。因为1px 是智能设备能够识别的最小单位,换句话说就是1px 不能在智能设备上被分为两份。
2.图标和按钮的切图输出应根据标准尺寸输出并且要考虑到手机适配,为了适配大分辨率的手机(如iPhone X),图标和按钮在切图时需要输出@2x 和@3x 的切图。
3.为了提升App 的运行速度,要尽量减小图片文件大小。如果切图文件比较大,不利于用户在使用UI 界面过程中加载页面,因此切图时要尽量压缩图片文件的大小。
4.要把可点击部件的相关状态都切图输出,比如正常状态、点击状态。在切图过程中不仅要输出正常状态的切图,更要注意不要遗漏其他状态的切图。
2.4.2 UI界面中的图标
图标是一种小的可视控件,是软件UI界面设计中的指示路牌,以最便捷、简单的方式指引浏览者获取其想要的信息资源。图标是具有明确指代含义的计算机图形,其中,操作系统桌面图标是软件或快捷操作方式的标识,界面中的图标是软件或应用的某种功能的标识。
图标在软件界面中无处不在,是软件UI界面设计中非常重要的设计元素。随着科技的发展、社会的进步,人们对美、时尚、趣味和质感的不断追求,图标设计呈现出百花齐放的局面,越来越多精致、新颖、富有创造力和人性化的图标涌入浏览者的视野。但是,图标设计不仅要精美、富有质感,更重要的是具有良好的可用性,如图2-53所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_54.jpg?sign=1734435842-Mm6UJK95P8NC9qBej8cuStlAXfENW8yG-0-bb6c3b7c569dba9a90b67ac8cf941860)
图2-53
提示
好的图标设计不仅要精美,具有可识别性、独特性,而且要具有实用性,所以好的图标设计具有以下几个特点:多样性、艺术性、准确性、实用性和持久性。
2.4.3 图标的设计原则
界面设计的未来方向是简洁、易用和高效,精美的扁平化设计往往起到画龙点睛的作用,从而提升设计的视觉效果。现在,图标的设计越来越新颖,扁平化图标设计的核心思想是要尽可能地发挥图标的优点:比文字直观、漂亮,并在该基础上尽可能使简洁、清晰、美观的图形表达出图标的意义。
●可识别性原则
可识别性是图标设计的首要原则,具体是指设计的图标要能够准确地表达相应的操作,让浏览者一眼看到就能明白该图标要表达的意思。例如:道路上的图标,可识别性强、直观、简单,即使不识字的人,也能立即了解图标的含义,如图2-54所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_55.jpg?sign=1734435842-kDnJoJQ7zjxkareXoGrAt00JrIKhmDQn-0-05b527854ad9fae999ab951244ea4c77)
图2-54
●差异性原则
这也是图标设计的重要原则之一,同时也是容易被设计者忽略的一条原则。只有图标之间有差异,才能被浏览者关注,从而对设计内容留有印象,否则图标设计就是失败的,如图2-55所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_56.jpg?sign=1734435842-Z28qyQRP9ImSP8DhCa6KwrR1LM78b6CK-0-e84c219498b6bf8c89da9ea04b34b10b)
图2-55
●实用性原则
在软件界面中,我们经常会看到一些系统操作小图标。这些系统操作小图标的设计虽然简单,却很实用。通常,软件界面不需要精度很高、尺寸很大的图标,并且这些图标要有差异性、可识别性,并且风格要保持统一,如图2-56所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_57.jpg?sign=1734435842-qbaEjsgAKbHcEABift2XHLVF7eDmBt4D-0-475d61be4a0118f58dc4f22fe265b75b)
图2-56
●与环境协调原则
任何图标或设计都不可能脱离环境而独立存在,图标最终要放在软件界面中才会起作用。因此,图标的设计要考虑图标所处的环境,才能更好地为设计服务,如图2-57所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_58.jpg?sign=1734435842-A345r6SVAzByoP80cYDijtBJ5WDVofjz-0-efc3efb556336345a3a4ed135896765e)
图2-57
●视觉效果原则
图标设计追求视觉效果,一定要在保证差异性、可识别性和协调性原则的基础上,先满足其基本的功能需求,然后考虑更高层次的需求——视觉需求。如图2-58所示为视觉效果出众的软件图标。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_59.jpg?sign=1734435842-Dldc3YfKeMwQQp2BfoH5ZK69mUPiKiCW-0-4cda86e23a97605dfe144e5d0182cd61)
图2-58
●创造性原则
随着时代的发展和人们审美的提高,图标的设计层出不穷,要想让浏览者注意到设计的内容,只有在保证图标实用性的基础上,提高图标的创造性,才能给浏览者留下深刻的印象。如图2-59所示为具有创造性的图标,很容易让浏览者印象深刻。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_60.jpg?sign=1734435842-YSuxQlC0l3dHLejVGkm2gAf5e270U0n1-0-fb7760ea0564ab3039c13118616c16fb)
图2-59
2.4.4 图标的常用格式
图标也称“icon”,广泛应用于程序标志、数据标志、命令选择、模式信号或切换开关、状态指示等,图标有助于用户快速执行命令或打开程序文件。一个图标就是一套相似的图片,每一张图片有不同的格式,图标包含透明区域,在透明区域内可以透出图标下的背景。因为操作系统和显示设备的多样性,导致了图标格式也要具有多样性。图标的常见格式如表2-1所示。
表2-1 图标的常见格式
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_61.jpg?sign=1734435842-asU2CUL3JxOfHldMNpMmnhE85yQFnRff-0-9bf8d6ecc8574137de1ddb762d4fbf41)
表2-1 图标的常见格式(续表)
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_62.jpg?sign=1734435842-w5P2OEQYZz9oVsPx0eT9tPVwFLUBxIdI-0-f2e6b581903d9a9801fa8be586937b9e)
2.4.5 拟物化风格图标
拟物化软件图标除了能够给用户带来逼真的感觉,还会带给用户华丽感。通常拟物化软件图标的效果要比真实对象更好,因为在设计图标时会将一些不和谐的内容进行美化处理,如不均匀的颜色和阴影、不清晰的纹理等,通过处理使拟物化图标看起来更加真实、细腻、美观,给人很强烈的视觉感受,如图2-60所示。
![img](https://epubservercos.yuewen.com/0264AB/18096060408238806/epubprivate/OEBPS/Images/txt003_63.jpg?sign=1734435842-5RM1E2LrEPftYKWYVudaDSIaREHvLeTU-0-819cd7be11d9bf72185c8c6b64bb6c53)
图2-60
拟物化软件图标具有很高的识别性,在设计过程中需要注意以下几个要求∶
●确定一种风格
对于拟物化图标也可以添加特殊的风格,使图标效果看起来更一致,但是添加的特效不宜太多,适可而止,否则将失去图标原有的意境。
●保持最小元素
创建图标时,首先要使其含义明确且容易被理解。保持绘制对象的最小元素,除了可以使图标效果更加真实,还有助于用户理解图标的含义。
●坚持简单
图标作为软件界面中重要的元素,风格要与软件界面的风格保持一致,所以设计时不要花费大量的时间在图标的标新立异上,充分延续软件界面特征的同时增加一些出色的设计。
●分步制作
拟物化图标的设计过程一般都比较烦琐,建议用户分阶段进行设计制作,这样可以避免由于图标效果未能达到要求需要修改,从而浪费大量的时间。
●适当夸张
一个逼真的拟物化图标固然好,但也可以通过适当夸张将其需要表现的含义更清晰地表现出来,增强图标的隐喻。