1.将界面中相关的元素组织在一起，成为一个组，让它们不被视作一堆散乱且彼此无关的片段。

如果微信的信息列表页面，每一项的名称、时间、摘要只是样式区别却未经组织，就会变得不那么容易阅读，如下（图1）。尤其在列表项很多的时候，将拥挤不堪，让人窒息。

实际的处理方式仅仅是采用了合理的列表项间距，以及每一项当中名称、时间、摘要的分布距离，就能轻松区分出列表项、每一项中内容的关系。秩序井然，符合逻辑，保证了良好的可读性。见下（图2）

通过组织界面元素，体现亲疏关系，保证条理清晰，不仅做设计时要注意，开发的时候也要重视。

2.任何元素都不能在界面中随意摆放，应该跟界面中的其他元素存在相应的视觉关系。

如果多看阅读的图书详情页面，简介信息和操作按钮随机摆放，像尚未完成的拼图零件，会让人无比烦乱,如下（图3）

实际页面见下（图4），书名、作者、评分、价格左对齐，评分标记星星与评价人数水平方向对齐，阅读与购买、收藏与赠送等根据操作类型分组，各自在水平方向对齐。整洁的排版布局，提供流畅的视觉引导。

通过将文字信息、操作按钮的分别对齐，来明确它们要传递的信息。一般在设计过程中，很少会出现这种混乱的情况。更多是在开发测试阶段，界面中的类似问题会比较多，尤其是不同尺寸屏幕适配的时候。

3.界面中的元素、样式、空间关系等有意识地在整个产品中重复，以保持良好的一致性。

比如微信的底部功能栏，不管当前在哪个功能模块，它都以相同的风格样式、功能数量、排列顺序出现。不会因为从微信切换到通讯录，就突然多出一个或减少一个功能，或者改变排列顺序。见下（图5）

（图5）微信统一的底部功能栏

又比如简书，统一采用曙光色作为焦点状态；根据使用场景出现的元素，比如搜索和提醒，采用同样的样式和位置；文章列表在不同的分类下也是统一的卡片样式（白天和夜间模式卡片底色、文字颜色有区别，但是在同一个模式下，对应的样式会始终保持一致）。

聪明地使用重复的手法，不仅可以强化设计效果、提高信息清晰度，使用户能够快速熟悉和习惯产品，增加认同感，还可以营造成熟、稳定的产品形象。对开发来说，可以减少代码量、便于统一管理和修改。

4.如果两个界面元素要传递的信息不完全相同，就应该在视觉上加以区别，有利于信息阅读。

如多看阅读书城分类列表的书籍信息，见下（图7）。左边的文字样式未做对比区分，虽然能够正常阅读，但是信息层级显然不如右边有对比区分的明确。左边没有字号、颜色的对比，显得呆板不够美观；右边则能够让人阅读得很轻松，并感到愉悦。

手机QQ的聊天界面，见下（图8）。左边对界面中现有图形元素作了统一的样式处理，消除了对比，于是可以发现无法区分操作层级，是否可以点击也辨别不出来，并且失去重点。右边是实际界面，图形元素有样式对比，层级明确，是否可点非常明显，业务逻辑体现得充分合理。

（图8）QQ聊天界面

对比可以有效地组织界面信息，体现信息层级关系，帮助用户理解产品操作逻辑。

本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址：https://www.mcykj.com/show-19-239-1.html转载请注明出处！