正文
每种布局方式背后都有各自合适的使用情况和适用范围。
并不是所有时候，都需要让用户操作越快越好。
比如，在需要慎重填写重要信息的表单设计时，需要故意让用户放慢操作速度。
1. 顶对齐：最适合快速浏览操作。
（标注说明+眼动轨迹，《设计表单的标签和输入区 表单设计的对齐方式》，by：b3inside）
2. 右对齐：左对齐的标签可以很容易的通览 表单 的信息，节省垂直空间。（不适合布局复杂情况，会很乱）
（标注说明+眼动轨迹，《设计表单的标签和输入区 表单设计的对齐方式》，by：b3inside）
举个说明：
云计算-关系型数据库的创建实例中标签都较长，且要填写的表单项数较多，综合考虑后，为了让用户在一屏环境下填完，右对齐方式更合适。
（《5Tips–助力管理平台的信息设计》，by: seaman320）
3. 左对齐：操作用时最久，适合布局复杂表单。
（标注说明+眼动轨迹，《设计表单的标签和输入区 表单设计的对齐方式》，by：b3inside）
右对齐表单不适合布局复杂情况，会很乱。所以在布局复杂的表单中一般会选择左对齐。
（《5Tips–助力管理平台的信息设计》，by: seaman320）
4. 标签在输入区内部（不推荐使用）
标签消失，看不到问题，可能会忘记要回答什么
改进办法：
对于一些空间受限，内容又繁多的表单，还有一些创意的处理方法。
标签先放在预置文字位置，填写时，标签变小，升到上面。（float lable）
（by：Matt D. Smith，Dribbble ）
总结：
▲ input Tips 总结：
-
合理组织表单内容：注意表单分组呈现，别所有信息一股脑排下来。
-
选择合适布局方式：左对齐/右对齐/顶对齐。
-
渐进展开额外内容：根据使用情况，可先默认隐藏高级的、或者当时不是必须填的信息，点击可展开。
-
即时帮助和即时验证：即时验证让长表单的填写成为一种实时有效的沟通。
-
借助图形化表达：适当使用图形表达，可减少占用空间，让表格主次分明。如，填写visa卡信息时，用图片提示需要哪个信息，比描述更直观。
（表单信息分组呈现。by Balkan Brothers in CRM Dashboard on Jul 21, 2016，Dribbble）
Input 参考文章：
-
《Designing More Efficient Forms: Assistance and Validation》（by: Nick Babich）：着重阐述表单中的帮助和验证。
-
《Forms Need Validation》（by：Andrew Coyle）：同样讲表格验证的，更为细致。
-
《10 Rules For Efficient Form Design – UX Planet 》（by: Nick Babich）：表单设计的10个有效原则。
译文：http://www.uisdc.com/10-rules-efficient-form-design
-
《Design Better Forms》(by:Andrew Coyle)：正误对比，普及基础设计要点。
-
《Designing Perfect Text Field: Clarity, Accessibility and User Effort》（by: Nick Babich）：正误对比，说明怎样的form是好用的。
译文：http://www.uisdc.com/designing-perfect-text-field
Dropdown（下拉菜单）
用户不喜欢填表单。表单越长越复杂，用户全部填完的几率就越低。
Dropdown在表单中经常出现，常见的问题有：
▲ 选项过多
如果选择菜单有超过15个选项，扫描和定位就比较困难。用户体验很差。
比如找国家，每次都100多个，很痛苦。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
这种情况下，用户一般都知道自己要找啥，所以用一个输入框+自动填写完成功能，代替选择菜单，是比较好的选择。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
Tip：如果选择菜单的选项超过15个，那么考虑用输入框（孔的，或者带自动完成功能），也许更合适。
▲ 选项过少
如果选项少于7个，考虑用radio buttons。
因为选项少，用户仍需要点开才能看到所需信息，这就不合适。
比如，就俩选项。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
只有2个选项时，适合用 radio buttons。
用户可以立刻扫描一共几个选项，每个选项都是啥。而不需要事先点击按钮，再展开信息。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
▲ 菜单的标签
一个选择菜单旁应该一直配有标签。
而且在选择框内部，也得放有内容的标签（不能是“请选择”之类的），确切告诉用户，他们在选择啥。
标签应该明确清晰，完整地描述所选择的一组内容。
（在选择框外部，内部，都设置文字标签，让用户在操作之前没有困惑。《UX Design: Drop-Downs in Forms》，by: Nick Babich）
▲ 菜单的默认选项
如果不是绝大多数用户都会选择那一项（如90%），就别用默认选项。
否则，就是引导用户去选择错误项。因为用户在填表时速度很快，没人会仔细研究每一句话。
▲ 移动设备上的选择菜单
Mobile is a magnifying glass for your usability problems.
——Josh Brewer
选择菜单在电脑浏览器中也许没啥问题。
但在移动端，痛点就被放大，上下文环境关系很容易变模糊。
（左边：几乎每一个问题都设置下拉选择菜单；右边为每一个问题都配有一个合适的输入形式。from： lukew）
左图会带来很多问题：
问题1：操作的数量
这是上图左边的例子，需要的下拉菜单的数量。
（用户首先要点击，然后要不止一次的滚动屏幕，来寻找他们的目标。from： lukew）
问题2：屏幕分割
“选择菜单”的UI交互形式，在移动设备上将屏幕分割成两块，体验差。
在iPhone iOS9上，选择菜单大概占了屏幕的50%。
（几乎占了屏幕一般的选择菜单项。《UX Design: Drop-Downs in Forms》，by: Nick Babich）
解决办法：
当设计一个满是下拉菜单的表单时，考虑下一些下拉菜单是否可以换成更合适的获得答案的表现形式。
列出相关选项，手动选择一个。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
连续的增减数值，对小范围调整很合适。（如，选择乘客数量）
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
支持2个简单的，完全相反的选项。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
允许用户在一个方位中，精细地调整数值。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
最重要的是，要致力于简化表格，去除所有不必要的输入框。有时一个多选菜单可以浓缩为一个输入框。这可以有效减少用户的认知负担。
（《UX Design: Drop-Downs in Forms》，by: Nick Babich）
Dropdown 参考文章：
Button（按钮）
按钮是一个在产品中营造流畅使用体验的关键元素。
这部分的设计和 styleguide 关系比较密切，需要提前想好按钮的层级关系，定义好每个层级的形式，和规则。
▲ 按钮总共分5种类型
下图整理了它们各自的用法用例，以及之间的层级关系。
▲ 按钮状态——按钮是有多种状态的元素
-
常规状态（normal state）：设计要点，常规状态下的按钮，务必要看起来也像个按钮。
-
焦点状态（focused state）：提供一个感觉良好的视觉反馈。可以尝试一些视觉愉悦的状态切换动效。
-
按下状态（pressed state）：可以加一些有实质用途的动效，同时达到令人愉悦的效果。
-
不激活状态（inactive state）：分两种：直接隐藏，或以不可点形式展示（disabled state）。各有利弊，按需选择。
（hover状态切换动效，Source: CSS Buttons）
（按下按钮反馈，by Colin Garven in Dynamic Buttons on Feb 17, 2014，Dribbble）
