视觉规范——侧导航/分页
侧边导航栏、分页的方法
侧边导航栏侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。对设计的理解和审美决定了周围要留多少的空白。
绘制矩形框矩形框的高度可以随着屏幕高度的变化而变化，所以不需要考虑。那只定义矩形框的宽度就行了，宽度分别是：小（240px）、中（280px）、大（320px）。当决定采用哪种尺寸后，就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。
文本行高文字的行高是由鼠标状态（Hover）的高度来确定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，侧边导航栏的文本左右多留一下白，不能使导航栏看上去太紧凑，给人感觉太压抑，就会显得不是很美观了。
层级划分因为侧边导航栏中有树形结构，一个主级别可以分散为多个子级别，所以就需要划分一下层级。划分层级的方法也有很多，可以改变字号、改变颜色、改变字形、改变距离。采用哪种方法还是要看具体需求，像那种需要想突出层级且对比强烈的需求，可以采用 ...
视觉规范——下拉/导航
不管是下拉菜单还是导航菜单，都是设计语言部分中的基础部分中的某个组成部分。当这些组件按照功能和需求整合到一起，就生成了新的页面或用户界面。
了解下拉菜单下拉菜单有两种样式，分别是主菜单和二级菜单。它也是由按钮、菜单栏、鼠标状态（Hover）组成的。
真正整合成组件时，组件会有三种不同的尺寸（大中小），被配置不同的高度，不同的颜色和不同的曲率。
绘制矩形框绘制下拉菜单的矩形框，要定义它的高度和宽度。下拉菜单框的高度是根据内容的增加而随之变化的，而它的宽度是受里面字数影响的。字数的最大宽度定下来，才能定下矩形框的宽度。一般情况下，菜单中的功能名称不会超过9个字，利用7±定律得知，超过9个字不易理解和阅读（易读性），所以这里的矩形框的宽度，不过超过9个字符。那如果下拉菜单中的功能名称，超过9个字，如下图所示。
文本行高添加文本内容，就是在下拉菜单里添加文字。当用7±2定律得知最大字符数不能超过9个字符后，就说明下拉菜单里的文字的宽度定好了，接下来就要定文字的行高了。文字的宽度和行高都计算好，就可以绘制文字与矩形框之间的间距了。文字的行高是由鼠标状态（Hover）的高度 ...
视觉规范——按钮
一个简单的按钮需要经历无数次推敲，才能整合为设计语言
网格基数的设置这里的网格不是平面设计中的网格系统，是包含在绘图工具中的网格功能，虽然它俩在本质上是相同的。用绘图工具绘制网格能帮助我们约束模块，使模块的比例存在一定的关系。如下图尺寸大小为137x31的按钮A，和尺寸大小为128x32的按钮B，尺寸大小为137x31的按钮A是不规范的，宽137和高31是不存在比例关系的。而尺寸大小为128x32的按钮B就是规范的，宽128和高32不仅是倍数关系（128/32=4倍），而且两个数都可以整除，在全局中设的基数4（32/4=8，128/4=32，这里的4为基数）。
网格基数绘制一个按钮的第一步，就是设置网格基数。如果网格基数不设置4px而设置3px，那画一个高度为45px的时间选择器时，得知右面“上”的图标高度就是45/2=22.5px，这里出了小数点，22.5px中包含7个网格位，并多出了1.5个px，即22.5-21（3x7网格位）=1.5px的空位，1.5px<3px。所以网格基数设置为3px它是不规范的。在下图中也做出了相应的解释。把图上按钮中为“上” ...
UI动效常用技能点
在用户体验界面设计中，因交互需求而发生的动效设计，例如：loading、转场、点击反馈等。现在越来越多专业化UX交互动效软件助力实现html在手机上的实时操作反馈。在ae常用的技能点有：
缓动
交互动效的初衷是为了给产品带来舒适的用户体验，那么从本质上每一个交互动效的过渡都应该遵从物理曲线与缓动原则，比如下拉的重力感、过场的缓入缓出，避免产品像机器般给用户带来生硬的感受。
AE应用
选中关键帧—-动画>关键帧辅助>缓动 | animation>keyframe assistant>easy ease （或点击关键帧右键>关键帧辅助>缓动）
图形编辑器>使视图适应所有曲线>拖动端点调整曲线 | Graph Editor > Fit all graphs to view
遮罩
遮罩功能可以解决许多你想不到的动效问题，达到一个比如魔术化的效果，也是MG动画转场常用功能之一。简单理解来说，就是将动效分为2层（底层是展示图，顶层是遮罩），通过改变的遮罩大小，我们可以看到底层展示图的不同部分。
AE应用
选中形 ...
除非有更好的选择，否则就遵从
交互设计之父的阿兰·库珀最为人熟知的或许就是这句“除非有更好的选择，否则就遵从标准”了，在交互设计领域有很多经过了时间的验证的法则定律被认作了标准，
费茨定律（Fitts’ Law）费茨定律（Fitts’ Law）简介费茨定律是由保罗·费茨（Paul M. Fitts）博士，在对人类操作过程中的运动特征、运动时间、运动范围和运动准确性进行研究之后提出的，时间是1954年。该定律被用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。
费茨定律指的是：使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离（D）和目标大小（S）有关。用数学公式表达为：时间 T = a + b log2(D/S+1)。如下图：上图中，T指的是：移动设备所需时长；a、b指的是：经验参数，它们依赖于具体的指点设备的物理特性，以及操作人员和环境等因素；D指的是：设备起始位置和目标位置之间的距离；S指的是：目标区域的面积大小。
费茨定律（Fitts’ Law）在设计中的应用（1）按钮等可点击区域在合理的范围之内越大越容易点击，反之， ...