做界面的时候,大家爱先聊图标和配色。但客户第一眼看的是「哪里重要」,这就是信息层级。层级乱了,图标再精致也救不回来。客户最关心的仍旧是,信息层级能不能先不做。我会先问一句,这事一个月要重复多少遍。
层级决定先看什么
一个页面里,信息有主有次。最重要的放最显眼的位置,次要的退到后面,眼睛才知道往哪看。
层级清楚的时候,客户不用思考,一眼就抓到重点。层级乱的时候,满屏都是重点,等于没有重点。
我们常拿报纸打比方。头版头条字号最大,这就是层级。界面也一样,要让重要的东西自己站出来。
层级怎么排
排层级靠三样:大小、位置,另外还有对比。大小拉开差距、位置放对顺序,还有对比做出区分,层级就立起来了。
同一页里,标题明显大于正文,这是大小;关键按钮放在视线落点。这是位置;主要信息用深色、辅助信息用浅色,这是对比。
三样一起用,比单靠一种更有效。只用颜色区分而不动大小的,层级往往不够明显。
层级排错的样子
层级排错,有几个典型症状。满屏加粗、到处是彩色,以及按钮长得都一样,这三样一出现,层级基本就乱了。
还有一种是把次要信息做得比主要信息还抢眼。客户一眼看到的是广告位,不是你要他做的事。
这类问题改起来其实不贵,调调大小和颜色就能改善,比推翻重做划算得多。
层级和留白有关系吗
有。留白不只是好看,它本身就是一种层级手段。
元素之间留够空,眼睛才会把它们看成一组。挤在一起的信息,看起来就是一团。
我们排版时习惯用留白分区。相关的靠近,不相关的拉开,不靠线框也能分出层次。
留白也不是越多越好。太空会让页面显得散,客户找不到该看的地方。够用、能分出组就行。
还有一点是节奏。整页都留一样的白,反而没有重点;重要的内容周围留得多一点,它自己就突出了。
做信息层级之前,先答这几个问题
一页放多少信息合适
看场景。后台可以密一点,前台首页尽量少,一屏说清一件事。
怎么知道层级对不对
把页面缩小到看不清字,还能看出重点在哪,层级就基本对了。
颜色越多越好吗
不是。颜色是用来区分的,不是用来堆的,主色一两个就够。
常斌的团队向来这么讲:先把谁重要排清楚,再谈好不好看,顺序不能倒。
先把重点标出来
我的建议是拿现在的页面,圈出你最想让客户看的那一处,看它是不是最显眼。不是的话,层级就该调了。
深度合作 160 多家,很多客户是从一个小项目开始一路做下来的。做界面这块,信服无限会先和客户一起把信息排一遍序。谈价格之前,告诉我你这个页面最想让客户做什么。