作为一个可视化结构设计的特殊教育同学帮同学改可视化介面称得上很日常生活了，长此以往发现我们常有的难题较为集中，除了文本和方法论的难题，听觉上的难题也很常用，今天单页结构设计游学的Muzi同学就来跟我们谈谈你的介面的听觉结构设计究竟怎么了？
依照我的实战经验，介面的听觉结构设计时常碰到这种的难题：
1.“Branne”介面（特指很不漂亮的）。
2.“做不出来”介面，指声效和低保真的差别是加了色调和相片的。
3.不难受”介面，指称不上很不漂亮，但总真的这儿不难受的介面。
4.“理想”介面，指没层级，看起来默默无闻没特点的介面。
有些同学真的要作出漂亮的介面好难，自己还要好多年才能“修得”，但我不这么认为，事实证明你和专精的介面只差一个“五大准则”！
简而言之五大准则，也叫作排印的五大准则或是结构设计的五大准则，指的是亲密无间、翻转、多次重复、对照。几乎所有的较为成功的结构设计中都能看到五大准则的应用领域，他也被各小厂用以制订她们的结构导则，众所周知的是蚂蚁金服的Ant Design制订的结构设计准则是严苛依照五大准则来的（Ant Design结构设计准则https://ant.design/docs/spec/proximity-cn），那么加下来就来给我们具体讲一下五大准则。1.亲密无间
亲密无间也能叫作亲密无间性，指的是当重要信息间的相关性越高，重要信息间的距越短，但若，她们的距就越近，用这种的准则去总体规划重要信息间的宽度也是依照文本去总体规划网页结构，这种的层级关系会使网页看起来更加自然。如下表所示图。
再比如在Ant Design中，横向宽度依照亲密无间性规定了四种技术标准，分别是：8px（双簧管宽度）、16px（中号宽度）、24px（球型宽度），并且当这四种技术标准宽度不适用于时，能通过以此类推『基础宽度8px』的次方，或是增加原素来掀开重要信息层级。
在 Ant Design 中，y = 8 + 8 * n。其中，n >= 0，y 是横向宽度，8 是『基础宽度』。2.翻转
翻转准则比较好理解，是结构设计中原素和重要信息的翻转规则，正确的使用翻转能增加网页的美观度，使读者的阅读更加便捷，同时也能更好的传达重要信息。
在翻转规则中，除了常用的左翻转，右翻转，居中翻转，两端翻转外，我们还能自己制订翻转规则。下面以Ant Design的翻转规则为例，来看一下翻转规则是怎样制订的。
文案类翻转：
如果网页的字段或段落较短、较散时，需要确定一个统一的听觉起点。
表单类翻转：
表单类翻转采用的冒号左右分别翻转，这种的翻转能让文本锁定在一定范围内，让用户眼球顺着冒号的听觉流，就能找到所有填写项，从而提高填写效率。
数字类翻转
由于在实际使用的情况下，数字大小的差别会较为大，因此为了快速对照数值大小，建议所有数值取相同有效位数，并且右翻转。
3.对照
对照准则是通过听觉上的区分对照来突出一些原素的特点性质，吸引观众的目光，区分文本的层级。我们能看到的对照有非常多种，比如色调的对照、字体大小粗细的对照、距之间的对照，在可视化结构设计中的还能分为静态对照和动态对照。我们能通过对照来区分主次关系，总分关系，状态关系等等各种不同的关系。
4.多次重复
多次重复准则指的是，在同类重要信息的表达上使用多次重复相同的原素，这种使用不仅可以有效降低用户的学习成本，也能帮助用户识别出这些原素间的相关性。
文章作者：MUzi
南安普敦大学可视化结构设计硕士
擅长可视化结构设计与用户体验相关专精特殊教育和课程知识体系建立
任何关于院校和作品集的难题
欢迎随时和马克君沟通
知无不言，言无不尽
