交互设计案例分析3-表单对齐方式.pptxVIP

数字媒体学院 于成龙;表单是UI设计中非常常见的元素，无论是大屏幕还是小屏幕设备，web端还是移动端，我们都经常见到表单。表单的交互设计有很多细节，今天主要要聊的是其中的一点——对齐。;1. 表单的基本结构 表单的基本结构包括3个元素：标签/Label，内容/Value，输入框/Input Box。在不需要数据录入，只是展示信息的状态下，输入框也可以没有。;2. 常见的表单对齐方式及统计分析 以上基本结构是组成表单的最小单元。一个表单包含一系列这样的基本结构。 常见的表单对齐方式有如下5种，几??前有人对前3种对齐方式做了粗略的统计： 第一种是标签和内容沿中间对齐。;2. 常见的表单对齐方式及统计分析 有41%的网站采用这种对齐方式。其中包括YouTube, Facebook, Metacafe。 沿中间对齐最大的好处是在视觉上形成一条垂直的中线，中线左边是标签，右边是内容，一目了然。比如携程的机票预订页面就采用了这种对齐方式。;2. 常见的表单对齐方式及统计分析 不过这种方式也有局限，比如某些标签的长度很长时，为了追求中间对齐反而影响了阅读，也破坏了页面的均衡感。另外，在移动设备上这种方式是不适合的，因为手机屏幕宽度很小，标签和内容并排放置是很困难的。 第二种是标签和内容分为两行，按左对齐。;2. 常见的表单对齐方式及统计分析 有30%的网站采用这种对齐方式。其中包括Behance, Wufoo, Tickspot, Mixx, DZone。 这种方式也是现在很流行的对齐方式。它避免了因为标签过长而带来了麻烦，同时也能很好的适应小屏幕的设备。比如Booking，Agoda还有Behance都采用了这样的对齐方式。;2. 常见的表单对齐方式及统计分析 第三种是标签和内容都为左对齐。 有29%的网站采用这种对齐方式。其中包括Digg, Ning, Wykop.pl, 43things, StudiVZ。 这种方式和第一种类似，不过在区分标签和内容上没有沿中间对齐的方式那么明显，而且同样存在难以适应标签过长的问题。;2. 常见的表单对齐方式及统计分析 第四种是标签左对齐，内容右对齐。 这种方式在手机中很常见，最典型的代表就是iOS的系统设置界面。;2. 常见的表单对齐方式及统计分析 第四种是标签左对齐，内容右对齐。 这种方式在手机中很常见，最典型的代表就是iOS的系统设置界面。;2. 常见的表单对齐方式及统计分析 除了手机，在网站中也能经常看到这样的对齐方式。如下图，其中左侧提供的筛选条件自成一体，采用这样的对其方式有利于在局部上形成一个独立的区块，增强信息的识别性和可读性。;2. 常见的表单对齐方式及统计分析 第五种是标签左对齐内容紧跟着标签。 将前4种方式和第5种进行对比，很明显就能看出这种方式的缺陷。这里最严重的问题在于不利于信息的阅读，用户很难区分标签和内容。所以，现在很少见到这样的对齐方式，但我在airbnb上发现了这种对齐方式。;3. 表单设计的更多变化 除了以上提到的5种对齐方式，如今表单的设计又出现了新的变化，那就是直接将标签作为提示信息放在输入框里面，而且越来越多的网站和app开始这样做。;3. 表单设计的更多变化 ;3. 表单设计的更多变化 这样做最大的好处是简化了界面。这种方式常见于注册和登录的时候，因为所需要的输入项通常很少，而且用户已经很熟悉注册和登录时要输入什么，所以这种方式很容易被用户所接受。 当然，并不是任何时候都适合这样做，比如下图这样的表单，如果把所有的标签都放到输入框中，那么当用户填完所有信息后并不一定能在第一时间准确的说出每个字段分别代表什么意思。因为字段比较多，在没有标签的情况下，如何理解每个字段的含义就存在一定的障碍。 ;3. 表单设计的更多变化 原始表单 ;3. 表单设计的更多变化 没有标签的表单