用视觉的差异和统一来表现界面信息.docVIP

文章的内容是将我平时工作中学到的东西写出来，希望能够给大家一点启发，有争议的地方也希望大家能够一起讨论。文中不会具体的教你怎么去做只是会给大家提供思路以及想法。 在一个完整的产品中包含了很多信息在里边：按钮、表单、链接、提示、备注、说明、错误等（这里只是罗列出一部分）。如何才能然这些庞大的信息能够一目了然的呈现在用户面前，让他们能够清晰且快速的就知道：哦，这个是***，我可以***。 1、 了解产品要做好的UI你还真的需要做好这一步，如果一名设计师连产品本身都没办法了解的话，那做出来的东西往往会一直徘徊在修改，审核，修改，审核这种无尽的循环中。在拿到运营同学或者产品经理的UI图以后，我们要对整个产品的信息架构有一定的了解以，了解UI图中每一个小区域所承载的信息类型，了解UI图中的那些信息他们是表单？列表？提示？还是链接。充分的了解到整个产品的信息架构以后那我们之后动起手来就更加的得心应手了。 信息框架清晰，可以让用户深深的爱上你的网站，因为一切都是那么的简单。 2、 通过视觉将信息分类只是了解到整个产品的信息框架还不够，那样只能给你一个比较模糊的思路，接下来我们要做的事就更加的重要了：通过视觉表现来对各种信息进行分类。通过色彩、样式把不同的信息类型展现在用户面前，让用户能够清晰的知道：哦，这个是***。我们来看看豆瓣是怎么做的： 对信息的分类做的很好。图中通过很大的间距将信息分为6块：注册、登录、小站推荐、活动推荐、同城、搜索(当然除了留白以外还有排版样式上的区分)。在每一个信息区块中加入了一些色彩的区分，将信息的细节表现了出来：1、 按钮是绿色的色块；2、 标题是绿色的文字；3、 简介是灰色的文字；4、 链接是蓝色的文字。 有效的视觉差异和统一，能够让用户一眼就能明白信息与信息之间的关系。在上面的例子中除了色彩的区分以外，在排版方面也做到了有效的区分。例子很小，你可以自行到、、去查看下。这些网站的信息相对而言都比较轻量化，可以供你进行参考，记得到内页去逛逛，主意观察信息结构和信息的区分。 反面教材：如果发现小站和线上活动的结构是一样的，或者差不多的会是怎样？