UI设计-从图标到界面完美解析第四章-按钮、导航、控件的设计[精]课件.pptx

1、从 图 标 到 界 面 完 美 解 析UI设计第四章按钮、导航、控件的设计CONTENTS目录01按钮的设计02顶部操作栏设计03导航栏设计04滑动条设计05对话框设计06下拉菜单设计07经验总结08能力拓展01按钮的设计第四章按钮、导航、控件的设计按钮的设计什么是按钮？n吸引人们点击的欲望n信息反馈n用户体验按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能。例如我们常用的播放器的播放暂停、搜索引擎的信息搜索、注册登录系统的登录、注册按钮第四章按钮、导航、控件的设计按钮的设计扁平化按钮n最简洁的几何图形组合及清晰的颜色n色彩扁平n笔画清晰简洁的字体n辨识度高扁平化是一种极简主义的美术设

2、计风格，通过简单的图形、字体和颜色的组合，力求最快速、最直观的设计意图。扁平化按钮第四章按钮、导航、控件的设计按钮的设计扁平化按钮扁平化按钮第四章按钮、导航、控件的设计按钮的设计扁平化按钮扁平化按钮实例演示4.1 声音开关按钮第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：1、新建文件2、绘制前景色为#1fc627，宽度124px，高度42px，圆角半径为21px的圆角矩形第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：3、为圆角矩形增加内阴影（轻微的内投影增加质感）第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：4、绘制按钮中白色滑块（白色滑块高度比外框小4px，使上下有2

3、px间距）第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：5、为滑块增加样式（增加滑块的外阴影和渐变叠加#f0f0f0-#ffffff）第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：6、增加文字（文字为白色，字体helvetica LT Std，苹果系统中常使用的英文字体）第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：7、修改矩形的底色，作为状态2（双击鼠标点击处修改颜色，为#5a5a5a）按钮通常存在交互关系，但大小风格都应该是一致，通常只是颜色、文字或者位置发生变化第四章按钮、导航、控件的设计按钮的设计扁平化按钮步骤：8、移动滑块图层到合适位置，并修改文字，并改变投影

4、方向及不透明度第四章按钮、导航、控件的设计按钮的设计拟物化按钮n视觉质感n模拟真实物体，认知成本低n放弃数字媒介的独特优势拟物化设计顾名思义就是模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟直实物体，拟物设计会让你第一眼就认出这是个什么东西拟物化按钮第四章按钮、导航、控件的设计按钮的设计拟物化按钮拟物化按钮第四章按钮、导航、控件的设计拟物化按钮实例演示4.2 开关按钮按钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：1、新建文件，画布颜色为#dbdbdb2、绘制前景色为#fff，104*54px，圆角半径为27px的圆角矩形按

5、钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：3、增加图层样式渐变叠加（#9d9d9d-#ffffff）与内投影按钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：4、复制底框图层，选中路径选择工具（黑箭头），在实时形状属性面板里设置宽度84px，高度28px，半径14px。并通过对齐属性垂直水平居中按钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：5、选中该图层，为图层增加内发光和内投影效果。按钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：6、绘制滑块：首先做底层，设置前景色#dbdbdb，绘制一个直径为40px的圆，与底框垂直居中，距右边相同距离。按钮的设计拟物化按钮第四

6、章按钮、导航、控件的设计步骤：7、增加图层样式：为该图层增加投影和渐变叠加（#8d8d8d-#ffffff）按钮的设计拟物化按钮第四章按钮、导航、控件的设计步骤：8、绘制滑块表面：复制滑块底图层，删除其图层样式，并通过快捷键CTRL+T变形，同时按住shift和alt键同比例缩放至直径为34px。按钮的设计拟物化按钮9、增加渐变叠加（#d0d0d0-#ffffff）。10、增加文字及样式。11、完成off状态。02顶部操作栏设计第四章按钮、导航、控件的设计n状态栏正下方n标识当前界面或站点内容n可以始终显示或者隐藏n应含有当前界面的标题n可包含返回及退出、分享控件在页眉的导航栏中，应避免显示过

7、多元素，因为手机界面有限，元素过多，主要内容只能下移，降低了页面的可读性。顶部操作栏顶部操作栏设计第四章按钮、导航、控件的设计n顶部操作条通常设置高为88pxn返回键和功能键距离边框的安全距离为20pxn标题居中显示，字体大小为36-40pxn按钮的高度不超过60pxn苹果系统标题常用默认字体为“方正黑体简”n英语及数字字体为“helvtica”在顶部操作栏可以有更多，搜索，分享，记录，增加，返回一些功能性操作。比较重要的一点是要注意常用尺寸及安全距离。上面以5s的尺寸作代表，将常用的尺寸及安全距离做介绍。图为IOS默认的顶部操作栏模式顶部操作栏顶部操作栏设计第四章按钮、导航、控件的设计顶部操

8、作栏设计顶部操作栏第四章按钮、导航、控件的设计顶部操作栏实例演示4.3 顶部操作栏效果图顶部操作栏设计第四章按钮、导航、控件的设计步骤：1、新建640*88像素画布，分辨率为72，背景颜色任意2、选择矩形工具，创建一个640*88的矩形3、为矩形增加渐变叠加样式。顶部操作栏设计第四章按钮、导航、控件的设计步骤：4、绘制640*4的矩形移动到底部，填充色#41aa655、绘制返回按钮：78*50，半径为8px的圆角矩形。合并形状状态下，选择多边形工具的3边，绘制三角形，22*46，移动到合适位置顶部操作栏设计第四章按钮、导航、控件的设计步骤：6、为按钮添加渐变叠加、内投影、投影、描边效果顶部操作

9、栏设计第四章按钮、导航、控件的设计步骤：7、增加文字，大小22，颜色为白色，增加适当投影顶部操作栏设计第四章按钮、导航、控件的设计步骤：8、绘制设置按钮：48*48，半径8px，增加渐变颜色，与轻微投影顶部操作栏设计第四章按钮、导航、控件的设计步骤：9、绘制齿轮：24*24正圆，填充白色，再绘制6*30半径2px的圆形矩形，通过连续复制位移直到变形完成。10、绘制14*14正圆，通过减去顶层形状，完成齿轮基本型顶部操作栏设计第四章按钮、导航、控件的设计步骤：11、为齿轮添加轻微投影12、增加标题title，大小40px，颜色为#fff，增加投影效果，完成效果图。顶部操作栏设计03导航栏设计第四

10、章按钮、导航、控件的设计n标签式导航n列表式导航n九宫格导航n抽屉式导航导航在页面中是非常重要的，可以清晰的引导用户去想去的模块。导航栏设计导航栏设计第四章按钮、导航、控件的设计将重要的导航控件及操作控件放在页脚或栏目条下面的位置，方便用户轻松触及并执行操作。多种表现形式，可以是图标，可以是文字，可以文字加图标。标签式导航设计导航栏设计第四章按钮、导航、控件的设计这种导航可以隐藏可以不隐藏，可以滑动，多见于资讯杂志类及社交应用类侧滑式导航设计导航栏设计第四章按钮、导航、控件的设计可以是单文字的，也可以是图文结合的，如设置页面，也可以和其他导航一起使用列表式导航设计导航栏设计第四章按钮、导航、控

11、件的设计这类导航首页没有实际的内容，只有几个栏目显示，与内容为主的趋势相悖，最典型的是美图类应用，如美图秀秀，魔拍，二级栏目中也常用使用九宫格式导航设计导航栏设计第四章按钮、导航、控件的设计导航栏设计实例演示4.4 顶部操作栏效果图导航栏设计第四章按钮、导航、控件的设计导航栏设计实例分析导航栏设计n导航栏高度98pxn5个栏目，平均分配，每个栏目宽度128pxn交互时，改变背景色，文字标签和图标颜色n图标大小适中统一32px，文字大小20px，第四章按钮、导航、控件的设计步骤：1、新建640*98，分辨率72的画布，前景色#0c0c0c2、计算标签尺寸3、绘制闹钟：通过布尔运算制作圆环；（参考

12、前面的案例）4、绘制时针分针：2个半径为1的圆角矩形，填充#909090，放置到圆中心5、制作闹钟小耳朵：绘制12*12的2个正圆放置到圆环下方6、制作通过减去顶层制作镂空7、制作文字，与底边距离20px导航栏设计第四章按钮、导航、控件的设计步骤：8、按照相同方法绘制其他栏目图标9、制作交互：背景改为#212121，文字和图标颜色为#fff导航栏设计04滑动条设计第四章按钮、导航、控件的设计滑动条是由滑槽与其中的把手组成的UI控件，用户可以通过移动把手，改变相关的状态。滑块通常为水平显示（也有纵向显示，环状模式），左端是最小值，右端为最大值。滑块的整个可选范围都处于界面中。滑动条的设计可以应用

13、到进度条，通话音量控制，屏幕亮度调整，播放进度等等在ios的设计规范中介绍了滑动条，他将用于显示及调整当前值的把手称为突钮，将显示值的滑槽称为轨道滑动条设计滑动条设计第四章按钮、导航、控件的设计滑动条设计滑动条设计第四章按钮、导航、控件的设计滑动条设计实例演示4.5 滑动条案例滑动条设计第四章按钮、导航、控件的设计滑动条设计实例分析滑动条设计n用户可以通过滑块修改与时间或进度相关的n视频和音频播放器适用n滑块有最大值和最小值n把手的位置随着播放进行而移动n用户可以通过滑槽位置查看当前播放状态第四章按钮、导航、控件的设计步骤：1、新建400*58px，分辨率72的画布，前景色#fff2、绘制36

14、0*18，半径为9px的圆角矩形3、为该矩形增加描边、渐变叠加、投影效果滑动条设计第四章按钮、导航、控件的设计步骤：4、绘制进度条：复制底框图层，修改实时形状属性参数为宽256px，高10px，半径为5px，填充色为#44b5df5、进度条增加内投影、投影样式滑动条设计第四章按钮、导航、控件的设计步骤：6、椭圆工具，绘制一个24*24的正圆，填充色为#ffffff7、选择滑块图层，粘贴底框的图层样式8、复制滑块图层，修改其大小至10*10px，修改填充色为#44b5df，图层样式参数与进度条一致9、设置时间文字，完成效果图滑动条设计05对话框的设计第四章按钮、导航、控件的设计 在app中的视觉

15、设计沿用了我们日常的沟通模式。我们的社交方式无外乎2种，对话框设计对话框设计n直接沟通方式n间接沟通方式第四章按钮、导航、控件的设计直接沟通类似与面对面交谈，呈现方式为对话形式。如移动设备上自带的短信功能，便具备了对话与交流的形式感，还有我们常用的qq对话，微信对话直接沟通对话框设计n 对话层次表现得更加直接n 体会到社交的乐趣与交流的通畅。第四章按钮、导航、控件的设计间接沟通通常是指通过平台将自身的心情，状态进行发布，其他用户浏览后的反馈信息。这样的沟通方式，减弱了沟通的即时感和交流感。如朋友圈，qq动态，微博等等间接沟通对话框设计n 注意用合理的界面去展示记录着的心情或者状态第四章按钮、导

16、航、控件的设计对话框其他风格设计方式对话框设计第四章按钮、导航、控件的设计对话框设计实例演示 4.5 对话框效果图对话框设计第四章按钮、导航、控件的设计对话框设计实例分析对话框设计n安全距离：头像距界面边框20px，2个对话之间的距离为40px。n设计为气泡模式，模拟人说话的感觉，这种模式使用户能立马明白对话的意图。第四章按钮、导航、控件的设计步骤：1、新建640*800像素，分辨率72的画布2、新建图层，填充颜色#343e4c，添加滤镜-杂色-增加杂色，高斯分布，数量选择1%。3、绘制日期分割线及投影，文字大小16px，#242930对话框设计第四章按钮、导航、控件的设计步骤：4、绘制对方头

17、像，86*86的正圆，头像图层应用“创建剪贴蒙版”，并设置投影及斜面浮雕对话框设计第四章按钮、导航、控件的设计步骤：5、绘制对话框：高75px，任意宽度，半径为5px，颜色#242930的圆角矩形，并在如图所示位置绘制三角形，并合并形状。6、为该组合图形增加内投影及投影对话框设计第四章按钮、导航、控件的设计步骤：6、输入文字，增加文字投影。7、同样的方式完成效果图对话框设计06下拉菜单的设计第四章按钮、导航、控件的设计下拉菜单设计下拉菜单设计n侧拉式n下滑式n上滑式下拉菜单是用于用户自由选择选项的通道。不管采用什么滑动方式，风格一定是统一于整个UI界面设计的风格的（包括文字、背景、色彩等）。第

18、四章按钮、导航、控件的设计下拉菜单设计实例演示 4.6 下拉菜单效果图下拉菜单设计第四章按钮、导航、控件的设计下拉菜单设计实例分析下拉菜单设计n黑白灰三种颜色构成，以灰黑渐变为主n有展开二级栏目状态n包含文字、小箭头图标，箭头有2个状态第四章按钮、导航、控件的设计步骤：1、新建219*410像素，分辨率72的画布2、菜单一级栏目和二级栏目共10个，平分为10等分。下拉菜单设计第四章按钮、导航、控件的设计步骤：3、绘制父栏目：将矩形增加渐变叠加，增加栏目的光泽感。4、增加浮雕、投影、增强立体感。下拉菜单设计第四章按钮、导航、控件的设计步骤：5、绘制箭头：用【矩形工具】绘制一个半圆角的矩形，旋转4

19、5度角，再用【路径选择工具】将其选中，按Ctrl+C与Ctrl+V进行复制粘贴。在用【自由变换工具】设置“水平翻转”，接着放到相应位置上，完成箭头绘制下拉菜单设计第四章按钮、导航、控件的设计步骤：6、设置箭头的凹陷效果：下拉菜单设计第四章按钮、导航、控件的设计步骤：7、复制多个父栏目放到合适位置，并将箭头旋转90度8、完成对子栏目的设置：各栏目是被一条凹陷效果的线分割。绘制多个矩形，并选择按高度均匀分布。下拉菜单设计第四章按钮、导航、控件的设计步骤：9、对分割线设置凹陷效果10、输入文字，父栏目为加粗效果，子栏目为常规粗细下拉菜单设计第四章按钮、导航、控件的设计步骤：11、绘制栏目后面“数量”

20、部分，并设置凹陷效果，只有个位数字的背景为“椭圆形”，其它为圆角矩形。12、修改文字完成最后效果图下拉菜单设计07经验总结第四章按钮、导航、控件的设计经验总结经验总结n 为app设计任意控件及按钮时，建议最好使用形状工具绘制，因为矢量形状的优点，当要适应各个不同尺寸的终端时，比较好改变大小。n 可是页面中形状交叉相对复杂时，使用Photoshop CC 以上版本可以比较轻松操作，只需要选择调整图层的形状路径并左键双击，即可打开形状路径单独调整经验总结第四章按钮、导航、控件的设计与系统标准图标区分开设计规则配色柔和协调外表美观风格统一易懂易理解简单富有流线感避免尖角一致性01020304050607经验总结08能力拓展第四章按钮、导航、控件的设计能力拓展练习1能力拓展第四章按钮、导航、控件的设计能力拓展练习2能力拓展第四章按钮、导航、控件的设计能力拓展练习3能力拓展第四章按钮、导航、控件的设计能力拓展练习4能力拓展第四章按钮、导航、控件的设计能力拓展练习5能力拓展Thank YOU感谢您的聆听