UI设计－从图标到界面完美解析第四章按钮、导航、控件的设计

《UI设计－从图标到界面完美解析第四章按钮、导航、控件的设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、从图标到界面完美解析UI设计第四章按钮、导航、控件的设计CONTENTS目录01按钮的设计02顶部操作栏设计03导航栏设计04滑动条设计05对话框设计06下拉菜单设计07经验总结08能力拓展01按钮的设计第四章按钮、导航、控件的设计按钮的设计什么是按钮？吸引人们点击的欲望信息反馈用户体验按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能。例如我们常用的播放器的播放暂停、搜索引擎的信息搜索、注册登录系统的登录、注册按钮第四章按钮、导航、控件的设计按钮的设计01按钮的颜色—比周围颜色由更亮且高对比度的颜色。02言简意赅—简单直接03主次之分—视觉

2、的优先级别04面积—安全尺寸，大小适中。第四章按钮、导航、控件的设计按钮的设计0102扁平化按钮设计拟物化按钮设计第四章按钮、导航、控件的设计按钮的设计—扁平化按钮最简洁的几何图形组合及清晰的颜色色彩扁平笔画清晰简洁的字体辨识度高扁平化是一种极简主义的美术设计风格，通过简单的图形、字体和颜色的组合，力求最快速、最直观的设计意图。扁平化按钮第四章按钮、导航、控件的设计按钮的设计—扁平化按钮扁平化按钮第四章按钮、导航、控件的设计按钮的设计—扁平化按钮扁平化按钮—实例演示4.1声音开关按钮第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：1、新建文

3、件2、绘制前景色为#1fc627，宽度124px，高度42px，圆角半径为21px的圆角矩形第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：3、为圆角矩形增加内阴影（轻微的内投影增加质感）第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：4、绘制按钮中白色滑块（白色滑块高度比外框小4px，使上下有2px间距）第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：5、为滑块增加样式（增加滑块的外阴影和渐变叠加#f0f0f0-#ffffff）第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：6、增加文字（文字为白色，字体helve

4、ticaLTStd，苹果系统中常使用的英文字体）第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：7、修改矩形的底色，作为状态2（双击鼠标点击处修改颜色，为#5a5a5a）按钮通常存在交互关系，但大小风格都应该是一致，通常只是颜色、文字或者位置发生变化第四章按钮、导航、控件的设计按钮的设计—扁平化按钮步骤：8、移动滑块图层到合适位置，并修改文字，并改变投影方向及不透明度第四章按钮、导航、控件的设计按钮的设计—拟物化按钮视觉质感模拟真实物体，认知成本低放弃数字媒介的独特优势拟物化设计顾名思义就是模拟现实物品的造型和质感，通过叠加高光、纹理、材质

5、、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟直实物体，拟物设计会让你第一眼就认出这是个什么东西拟物化按钮第四章按钮、导航、控件的设计按钮的设计—拟物化按钮拟物化按钮第四章按钮、导航、控件的设计拟物化按钮—实例演示4.2开关按钮按钮的设计—拟物化按钮第四章按钮、导航、控件的设计步骤：1、新建文件，画布颜色为#dbdbdb2、绘制前景色为#fff，104*54px，圆角半径为27px的圆角矩形按钮的设计—拟物化按钮第四章按钮、导航、控件的设计步骤：3、增加图层样式渐变叠加（#9d9d9d-#ffffff）与内投影按钮的设计—拟物化按钮第

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

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

8、下移，降低了页面的可读性。顶部操作栏顶部操作栏设计第四章按钮、导航、控件的设计顶部操作条通常设置高为88px返回键和功能键