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

从图标到界面完美解析 UI 设计 第四章 按钮、导航、控件的设计  CONTENTS 目 录 01 按钮的设计 02 顶部操作栏设计 03 导航栏设计 04 滑动条设计 05 对话框设计 06 下拉菜单设计 07 经验总结 08 能力拓展 01 按钮的设计 第四章 按钮、导航、控件的设计 按钮的设计 什么是按钮？ 吸引人们点击的欲望 信息反馈 用户体验 按钮代表着“做某件事”，即点击了按钮代表着操作了一个功能。 例如我们常用的播放器的播放暂停、有哪些信誉好的足球投注网站引擎的信息有哪些信誉好的足球投注网站、注册登录系统的登录、注册 第四章 按钮、导航、控件的设计 按钮的设计 01 按钮的颜色—比周围颜色由更亮且高对比度的颜色。 02 言简意赅—简单直接 03 主次之分—视觉的优先级别 04 面积—安全尺寸，大小适中。 第四章 按钮、导航、控件的设计 按钮的设计 扁平化按钮设计 拟物化按钮设计 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 最简洁的几何图形组合及清晰的颜色 色彩扁平 笔画清晰简洁的字体 辨识度高 扁平化是一种极简主义的美术设计风格，通过简单的图形、字体和颜色的组合，力求最快速、最直观的设计意图。 扁平化按钮 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 扁平化按钮 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 扁平化按钮—实例演示 4.1 声音开关按钮 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 1、新建文件 2、绘制前景色为#1fc627，宽度124px，高度42px，圆角半径为21px的圆角矩形 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 3、为圆角矩形增加内阴影（轻微的内投影增加质感） 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 4、绘制按钮中白色滑块（白色滑块高度比外框小4px，使上下有2px间距） 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 5、为滑块增加样式 （增加滑块的外阴影和渐变叠加#f0f0f0-#ffffff） 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 6、增加文字 （文字为白色，字体helvetica LT Std，苹果系统中常使用的英文字体） 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 7、修改矩形的底色，作为状态2 （双击鼠标点击处修改颜色，为#5a5a5a） 按钮通常存在交互关系，但大小风格都应该是一致，通常只是颜色、文字或者位置发生变化 第四章 按钮、导航、控件的设计 按钮的设计—扁平化按钮 步骤： 8、移动滑块图层到合适位置，并修改文字，并改变投影方向及不透明度 第四章 按钮、导航、控件的设计 按钮的设计—拟物化按钮 视觉质感 模拟真实物体，认知成本低 放弃数字媒介的独特优势 拟物化设计顾名思义就是模拟现实物品的造型和质感，通过叠加高光、纹理、材质、阴影等效果对实物进行再现，也可适当程度变形和夸张，界面模拟直实物体，拟物设计会让你第一眼就认出这是个什么东西 拟物化按钮 第四章 按钮、导航、控件的设计 按钮的设计—拟物化按钮 拟物化按钮 第四章 按钮、导航、控件的设计 拟物化按钮—实例演示 4.2 开关按钮 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 1、新建文件，画布颜色为#dbdbdb 2、绘制前景色为#fff，104*54px，圆角半径为27px的圆角矩形 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 3、增加图层样式渐变叠加（#9d9d9d-#ffffff）与内投影 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 4、复制底框图层，选中路径选择工具（黑箭头），在实时形状属性面板里设置宽度84px，高度28px，半径14px。并通过对齐属性垂直水平居中 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 5、选中该图层，为图层增加内发光和内投影效果。 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 6、绘制滑块：首先做底层，设置前景色#dbdbdb，绘制一个直径为40px的圆，与底框垂直居中，距右边相同距离。 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 7、增加图层样式：为该图层增加投影和渐变叠加（#8d8d8d-#ffffff） 按钮的设计—拟物化按钮 第四章 按钮、导航、控件的设计 步骤： 8、绘制滑块表面：复制滑块底图层，删除其图层样式，并通过快捷键CTRL+T变形，同时按住shift和alt键同比例缩放至直径为34px。 按钮的设计—拟物化按钮 9、增加渐变叠加（#d0d0d0-#ffffff）。 10、增加文字及样