web配置表单结构设计——你不晓得的冷知识

编辑荐语：控制技术跟踪可以应用的场景和领域数不胜数，最破烂的配置文件结构设计，也是采用者体验结构雕塑家经过种种权衡，运用各式各样科学研究工具反复结构设计测试后呈现给大家的。

当我们结构设计Web配置文件时，往往用最感性的结构设计经验本能驱动我们去解决一些貌似在介面结构设计中最简单的难题，但每当到微小之处，又会有无数疑问从技术细节中冒出给我们的结构设计导致困扰。例如：在配置文件介面Label（条码） 和 Input（快捷方式） 上下还是左右排列合理、Label要不加有大括号、快捷方式究竟多宽合适等等......以上这类难题看起来并不影响采用者顺利完成各项任务，很久以来也少没人关心那些微小之处会不能对采用者有什么影响。以致于，我表达想写一篇探求那些技术细节的文章时，同僚会里头说：你都开始科学研究条码结尾要不加有大括号了吗......，怕热了——真是个冷知识！确实如此，那些凡塘、无腺的内容，甚少千万别去留心和思索。因此我在写下那些分享内容时期望可以填补空缺是：冷知识虽然冷，但有用。用我了解的那些配置文件结构设计冷知识：启迪你的冷思维、带出你的热思索。话不闲谈，我们开始讨论第一个难题：///在线配置文件01.条码结尾加有大括号吗有个配置文件技术细节不晓得你有没有想过，条码结尾是否加有大括号？这个难题在我前团队发生过激烈争论，有同僚说：不加有，挤占宽度，而且千万别留心它......,也没人说：加有，从含义上讲，大括号的作用就是提示上下文或总结上下文的停滞。加上之后能更好表示条码与输出域的关联......."。

听起来好像都很多道理，那究竟谁更对呢！首先，我们上溯一下 Web 文化史，早期可访问性录入目录中通常坚持要条码带大括号，即使萤幕随身听一度必须依赖各式各样技巧才能理解记号不明的配置文件。而随着技术发展，Web配置文件采用label条码（tag）可以做正确的记号，那么萤幕随身听就能通过记号（markup）把条码（label）和相应的表头对应起来则无需再借助大括号。不过在客户端又很多意外！曾经 Windows Vista 手册中特别强调采用大括号， Mac Aqua 也有此明确要求但准则会稍灵活一些。这种情形是即使某些情形下萤幕随身听在与可阅读源代码的页面记号相比会遇到一些困难，不能直接显示代码。也是这个文化史原因，导致 Vista 和 Aqua 各自都有大量其条码包含大括号的文化史配置文件。即使实在没有必要把它们全部将错就错，直到今天客户端配置文件依旧延续这一准则。

优势：最有利于减少配置文件录入时间（条码和快捷方式位置最为靠近）；采用者视野固定，站体一南埃尔普下（清晰的顺利完成路径）；节省大量纵向空间（可用于以多种方式组合的相关快捷方式）。下风：挤占额外的纵向空间（如果可提供更多采用的纵向萤幕空间较小，应当谨慎采用顶翻转条码）；建议采用快捷方式50%至75%的高度作为相邻快捷方式宽度。适用场景：希望采用者快速录入配置文件，顺利完成各项任务；同时，当输出项存在尊卑之dba，对条码扩展性明确要求高。在线配置文件

2.右翻转条码：在线配置文件如果要尽量避免配置文件挤占纵向萤幕空间，右翻转能提供更多快速顺利完成时间。马泰奥·彭佐的控制技术科学研究发现，专家采用者和新手采用者扫视（眼睛运动）右翻转条码配置文件的条码和快捷方式的平均时间分别在170毫秒和240毫秒，而录入顺利完成时间比左翻转快2倍。

优势：条码与快捷方式相邻（方便快速录入）。下风：右翻转布局导致左侧不齐，影响了快速游览配置文件的效率难题；若条码文字宽度变宽，右翻转还存在灵活度难题。适用场景：既要减少纵向空间，又加有快录入速度的场景。

3.左翻转条码：在线配置文件在顶、右、左三种方案中，左翻转配置文件录入速度最慢。即使左翻转配置文件解析难题时眼球定位次数最多，采用者一般情形下都能将左翻转布局中的条码和快捷方式联系起来，只是花费时间较长。根据马泰奥·彭佐的科学研究，典型扫视时间为500毫秒，很长说明采用者经历了沉重的认知压力。

优势：容易游览条码；挤占纵向空间较少。下风：条码和快捷方式的相邻宽度增大；适合于采用者不熟悉配置文件要收集的数据或难题无法分成易处理的内容组，左翻转条码游览配置文件难题会更容易。采用者只要上上下下阅读条码左栏，不能被快捷方式打断。适用场景：配置文件中存在较多的复杂或敏感信息，希望采用者放慢速度、仔细思索（在一些注册类配置文件中较多采用）。

单从效率角度看，顶翻转条码>右翻转>左翻转，但是根据应用场景，效率快并不是我们选择条码翻转方式的唯一的指标。

因此，得到以下几点建议：如果你希望采用者放慢速度，仔细思索配置文件中每个配置文件项，左翻转条码是个好选择，特别是含有大量可选快捷方式或高级设置的陌生数据时；而顶翻转条码在一些国际化产品的配置文件结构设计时，会有更好的延展性；至于，右翻转条码虽然与配置文件域联系紧密，便于采用者录入，但是要考虑好条码的长短不齐如何解决。能否精简条码内容，以及确定好配置文件与介面的边距。///03.记号必填与可选表头的困惑许多配置文件结构设计中，有个常见难题：是否应该记号必填表头？如果配置文件中的大多数表头或全部都是必填的，我们是否仍然应该记号它们？

先简单回答：是肯定的，采用者有时需要通过必填记号来评估工作量，了解输出信息量的最低限度。我会在下面具体解释原因。了解不记号必填表头的诱惑在线配置文件通常，结构雕塑家会觉得每个必填表头都有一个记号是重复的、丑陋的、占空间，而且干扰介面，甚至可能看起来很扰乱（有认知负担！）。因此通常采取以下一种或两种策略：1.在配置文件顶部显示说明，说明中除非另有解释，否则所有表头都是必填；2.只记号可选表头，即使它们通常较少；3.在某些特殊情形下，也会什么都不做：相信采用者会神奇地晓得需要录入什么表头；如果不晓得，那么只需要点击提交报错即可。

那些方法有什么难题？如果你这样想，我来告诉你在线配置文件1.采用者一般不喜欢阅读配置文件顶部说明。不难想象，采用者不太可能阅读配置文件顶部的说明。配置文件表头需要自给自足，毕竟，每个表头都有特定指令——它的条码，为什么采用者需要阅读其他任何东西来录入它呢？2.即使采用者阅读了说明，也可能忘记。你可能会说：采用者阅读了顶部的说明，怎么就会忘记——这么简单的事情？的确容易忘记，特别是当配置文件很长或录入配置文件被打断时（这种情形在移动端很常见）。即使采用者记得，但这挤占了工作记忆，增加了认知负荷。换句话说，你让采用者顺利完成各项任务更难了。录入配置文件本身对采用者来说就相当有挑战性——为什么要让它更具有挑战性？3.采用者必须扫描配置文件以确定是否为必填表头。不难发现，无论是否在配置文件顶部包含说明，结果都可能相同，采用者会忽略或忘记。他们会扫视配置文件，找到一个记号为必填或可选的标识。而且很多采用者甚至不能费心去环顾四周，他们只会做出假设。他们会想——嗯，邮箱——不需要我的邮箱吧？先空着呢。即使采用者没有留空，也不得不暂停来思索一个表头是否需要录入，减慢交互速度并使过程看起来更长、更乏味。想要解决以上难题很简单：记号所有必填表头。尽量明确和清晰展示每个必填表头，并记号它。当然，就像很多结构雕塑家所说：介面出现大量必填标识（红色星号*）确实会增加视觉噪声。甚至重复的星号 * 会带来一些认知恐慌。但相比之下，两害取其轻，那些负面因素是轻微的。如何记号必填表头？这里包含至少有两种方式：星号*（红色）和必填提示。星号*在页面上已经很常见，采用者熟悉其含义。优点是它不挤占太多空间，也看起来与条码文字足够不同，所以采用它。可以采用其他记号形式吗？当然可以，但是最好遵循市面上常见的形式（雅各布定律），这样更符合采用者认知。星号应该在表头条码之前还是在表头条码之后？这不一定有实际影响，但将其放在条码之前的一个原因是，只需扫视条码的最左边字符，就能轻松定位必填哪些表头。星号*是一种视觉记号，应当仔细考虑配置文件中的标识位置。标识在条码左边能指引采用者迅速浏览介面，并判断出必填项。如果在右侧由于快捷方式形式、长度各不相同，标识和快捷方式翻转会导致难以浏览和判断。是否也应该记号可选表头？虽然这不是强制性的，但记号可选表头确实减轻了采用者思索：如果没有这个标识，采用者要环顾四周，并根据其他记号表头推断该表头是可选的。如果非必填在表头条码旁边，那该各项任务会变得更容易。不描述可选表头，这没难题，但这样做会是一个很好的额外帮助。

你可能会问：默认值不是采用者想要的，误导采用者怎么办？在结构设计有默认值的配置文件域时，你要思索默认值是否是大多数采用者可以接受的答案，如果不确信可以先去做一下采用者调研，了解采用者的心声。就算默认值真的不是采用者想要的，至少你也为他提供更多了一个示例来告诉采用者答案应该是什么样子的。在线配置文件这一点也可以节省采用者几秒的思索时间——或避免一条错误信息。但并不代表所有的配置文件域都要给出默认值，我们只是尽可能的让采用者节省时间。如何采用：

在第一次向采用者显示配置文件时，用一个合理的默认值预先录入文本框、组合框或者其他控件。也可以采用采用者之前提供更多给应用的信息来动态地给出默认值（例：通过身份证自动识别出生日期；利用邮编，推导出对应省/市）。如果只是即使你觉得不应该留下空白的输出域，那么千万别采用默认模式。只有当你有理由确信绝大部分采用者，在绝大多数情形下，不能修改这个取值时才提供更多默认值——否则，这将会给采用者带来额外的工作！///在线配置文件05.快捷方式的宽度如何设定有一个容易被忽视但实则举重若轻的难题，配置文件中快捷方式宽度如何设定？在配置文件结构设计中，对于 Checkbox、Radio 等控件，很明确必须跟随内容自适应处理。但对于Input、Select等你会不能产生困惑，是定宽处理还是跟随内容更好。不晓得你是否试图这么理解过？快捷方式作为采用者录入信息的主要方式，其表现形式是否可以提供更多给采用者录入配置文件的有用线索。唐纳德·诺曼的著作《结构设计心理学》中详细讲解过心理暗示方面的内容。而宽度的变化就是一种有效暗示。在真实场景中，大部分快捷方式是存在理想长度的，那么就应该向采用者暗示所需输出内容的长度来减轻判断负担。下图就是典型案例，一个实际不需要花多少钱的金额快捷方式在左图中进行等宽处理，反而容易误导采用者对输出金额的判断，导致一种不安全感。

表现形式要为采用者录入提供更多有用线索，采用不同长度的文本框提供更多了暗示；这种暗示是一种有用线索，当快捷方式长度长短不定时，采用者会很自然地思索为什么这样；录入快捷方式时会自然考虑那些线索。在线配置文件

请注意！保证暗示效果的同时，千万别设定太多的宽度，反而会让配置文件显得凌乱；太少又会让配置文件看起来都像四四方方的盒子。最佳方法是找到适合产品的最佳模度值和数量。什么是模度值和数量呢！落在具体结构设计上要先梳理产品中常见的配置文件类型，然后设置一个默认宽度。以此为基础来有规律的增加长度，并考虑清楚它们的适用场景；从而定义出不同的模度，最终制定出整洁有序的模度规范。这样就可以让一线的结构雕塑家们跳过部分繁琐磨人的技术细节思索，快速搭建出合适的配置文件宽度并合理有效。

现在不用EXCEL也能快速生成精美的数据统计报表啦！简道云仪表盘，通过简单拖拽，即可制作出一个个柱形图、折线图、饼图等图表，还可以自定义颜色等信息。制作出的报表可以快速分享给团队其他成员看，并且可以灵活控制查看权限，确保数据安全。通过预警设置，当数据异常时（如库存不足），还可以第一时间向负责人推送消息。多种配色，完全自定义设置，让您的仪表盘与众不同，独具特色。不管是手机、电脑、IPAD，还是工厂PDA，都可以查看仪表盘，随时随地掌握数据。