Day 2 — 列表设计的空间感

近日注意到iphone设置界面、微信发现界面等列表的间距很高,约在单个列表高度的0.5-1倍之间,而通常我们在设计中常用的间距高度多为10px-15px(一倍页面中)。

为了探究间距高度的设计规则,于是体验了多个常用应用,抽取典型页面进行了对比。

1. 功能入口列表:微信发现页、个人中心页

此类页面基本由多个单行列表分类组合而成,提供多个功能的入口,更高的间距能有效的区分各模块内容,减少列表重复的密集感和枯燥感,使整个页面更具空间感和呼吸感。

同时,当需要对某个模块添加说明时,更高的间距预留了足够的空间。

设置页面 / 微信发现页


微信通讯录 / 个人中心

2. 内容列表

内容列表页通常用于展示,信息多且复杂,空间的利用显得更重要,并且上下内容之间的联系性更紧密,过高的间距会打断这种关系,因而列表的间距通常较小。

为保证页面视觉不拥挤,需要对列表内容进行设计排列,区分主次,保留足够的间距。

支付宝首页 / 股市通首页


粗略的思考,欢迎一起探讨 :)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,909评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,787评论 1 92
  • 尊敬的与会代表:感谢您参加互联网两级运营体系研讨及经验交流会议,会议期间有照顾不周之处,敬请谅解。希望本次河北之行...
    mtkx70阅读 250评论 0 0
  • 今天电力的服务和蓝夜的直觉能量,让我们学会自己认可自己所做出的每一份服务。觉察到要如何帮助“想要诞生的自己”在我们...
    艾人家家Aileen_LiLi阅读 145评论 0 1