最近在整理页面规范的时候，结合公司的几个产品，发现一些共性的问题，整理分类这些场景问题进行统一优化，从而定义为规范；这些问题大致总结为：
1、避免出现相近的字体颜色
2、避免同一页面出现太多相近的字号
3、避免同一页面内出现太多的行间距
4、页面外间距大于内间距
5、浏览和操作都需要遵循大众的浏览习惯
问题分析
1、避免出现相近的字体颜色
用肉眼难以区分的两种颜色是没有必要都存在的，同一层级的字体颜色只需要一种，相近的颜色统一色值，减少字体颜色.
上图表单中，左侧标签项用的#36373A，右侧选项用的#333333。这两种颜色用肉眼是区分不开的，像这样的颜色去掉其中的一种，若想以颜色区分信息层级，则用类似#333333、#666666、#999999这样间隔的颜色去区分。设计师在感性的同时，也应该有全局观和规范的概念。
2、避免同一页面出现太多相近的字号
页面字号需要能明显的拉开信息层级，同时避免出现太多层级；
上例表单中原来字号比较多，差不多每隔两像素的字号都用了，且导航还用了13px的字体，经过统一规范删减掉奇数的字体（无论是字体大小还是间距使用奇数会出现各种错位对不齐的问题），去掉太过相近字号的字体，因为16号字体以上就属于标题类的字号了，字号太过相近信息从属关系不明确，页面信息层级不明显；简化字号，形成更容易执行的文字大小规范，同时也减少了代码的沉余。
3、避免同一页面内出现太多的行间距
在能直观的表达出信息层级的同时，尽量减少行间距，复杂的间距不但容易让不同的设计师及开发者忽略，信息的从属关系过于复杂会对用户认知造成较大困扰
上例表单中，间距较复杂，无论是与其他设计师共享基础页面，还是与开发对接沟通，这样复杂的间距在执行时难免会出现一些误差。在能区分信息层级的同时也要精简间距，能统一的地方尽量统一，尽量使用较少的间距，只有这样可传播，可执行的成本才会更小。
4、页面外间距大于内间距
外间距小于内间距时，信息具有外扩力，整个页面显得会比较拥挤，信息多时有阅读压力；外间距大于内间距时，周围有留白，使页面信息更聚焦，更能让用户关注内容本身。
5、浏览和操作都需要遵循大众的浏览习惯
无论是单纯的信息浏览还是需要信息操作，都应该遵循大众的浏览习惯，从左到右、由上至下；一旦逆背这个浏览习惯，往往会让用户感觉整个页面流程很不流畅，也会因此降低用户效率
如上案例，这是一个用户不得不填写的表单，正确的流程是用户由上至下填写完表单，然后点击确定（提交）按钮，这才是一个正向的流程；所以应把操作按钮放在表单内容结束的地方，此时用户点击确定按钮的操作成本最低，从而提高用户操作效率
总结
工作中我们应该多思考，并不是单个需求，单个页面做完就完事儿了；应有全局观，或一段时间后整体复盘一下自己做过的页面，可能有不一样的发现和感悟，共勉。
网友评论