元素|当界面信息点爆满时,如何利用“间距设计”把内容讲清楚( 二 )


元素|当界面信息点爆满时,如何利用“间距设计”把内容讲清楚
文章插图
(文字行距太大了)
元素|当界面信息点爆满时,如何利用“间距设计”把内容讲清楚
文章插图
(当标题使用较小的行距时,两行才会被看作一个整体内容)
该如何做:一般大标题的行高比例需要小于正文的行高比例。
七、密集≠杂乱请记住,一个信息密集的界面不一定要让人感到杂乱或不知所措。
元素|当界面信息点爆满时,如何利用“间距设计”把内容讲清楚
文章插图
(通过调整间距、字号并添加分割线来打造视觉秩序)
除了利用间距,还可以通过这些方法传达元素间的关系,例如:

  • 将相关的元素放进一个模块里
  • 使用分割线或字符区分元素间的边界
  • 调整文本大小、字重或颜色来区分元素层级
元素|当界面信息点爆满时,如何利用“间距设计”把内容讲清楚
文章插图
每一个让人“感觉不错”的界面背后,需要我们花费大量的时间和精力不断打磨。
有个有效的练习方法就是:找一个你喜欢的app或网站页面,根据里面的功能按你自己的想法进行重新设计,并将以上关于留白的8个方法加以实践。
你将会发现,这个过程中有许多设计决策和细节需要你仔细考量。
总结:
  1. 间距需遵循接近法则
  2. 利用留白让用户将注意力集中在特定内容上
  3. 确保设计和开发使用相同的测量方法
  4. 使用栅格系统限制与规范设计
  5. 避免使用过于相近的间距值
  6. 行高不一定是随着文本变大而增加的
  7. 页面信息密集不等于要让人感到杂乱
本文由 @SDL艺术实验室 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自 Pexels,基于CC0协议