Adapted from our book and video series, Refactoring UI.
展示数据的时候,特别是展示来自数据库的多种数据,很容易陷入陷阱--使用大量标签去解释数据信息

产生这个问题的原因是因为呈现多层级的数据很难,因为每个数据的重量级是一样的。
你其实并不需要标签。很多情况下,这些数据信息只需要改变形式。举个例子,janedoe@example.com这是邮箱地址,(555) 765-4321是电话号码 $19.99是价格,这些不用标签用户也能识别到。但当形式不够丰富的时候,内容呈现就比较单一。当你看到“客户服务”在某个职员名字下面的时候,其实不需要去特别指出“工作部门”,我们会自然而然知道这是工作部门。

当你展示数据时候不使用标签,就需要加重重要的信息、需要识别的信息,使界面更容易使用,并且会让用户感觉有设计感。
连接标签和数字
即使一段没有标签的数据不是完整的,你可以通过整理话术而不是增加标签。举个例子,如果你需要呈现一个电商商品的界面, 可以尝试使用"库存剩12 "替代 "库存: 12"

如果你正在设计一个房产app,像“3个房间”的话术会比“房间:3”更简单。

如果你能够把标签和数字连接成一个简单的部分,给每一段信息的的识别性会更高。
标签是次要的
当你展现复杂且相似的信息并且这些信息需要快速扫视的时候,比如像后台系统,这时候你就真的需要加上标签。
在这种情况下,增加标签,并支持内容信息的显示,标签可以使内容信息清晰易读。

不要强调标签并且把它变小、减少内容、使用更轻的字重,或者这三点一起使用。
什么时候需要加重标签
在设计界面时,当你知道用户会寻找标签的时候,那就需要加重标签而不是加重数据。比如在介绍科技电子产品的时候,页面数据很多,这时候需要加上标签。
比如一个用户试着找出笔记本里的网络设备,他们可能在页面中寻找这些词语“网络设备”“WIFI”“无网络”,而不是“高通”或“英特尔”

不要过分强调数据的情况:标签是重要信息、标签用更黑的颜色、价格用更浅的颜色。
网友评论