美文网首页
界面布局之_关于分割线的思考

界面布局之_关于分割线的思考

作者: 拾叶姑娘 | 来源:发表于2018-01-10 10:08 被阅读58次

    2. 分割线设计

    在UI设计中,最传统也是最常见的的分隔方式是“线”。它能起到分隔、组织、细化的作用,帮助用户了解页面层次,赋予内容组织性。

    而“线”,可以分为:a.全出血分隔线,b.内嵌式分割线

    a.全出血分隔线

    “出血”是一种平面印刷中的概念,而“全出血”指的是分隔线横向贯穿整个页面,一般为了区分更加独立性的内容信息。

    比如:知乎的“想法”feed流里,就是采用全出血分隔线的形式,让信息分隔的更明显,更加独立性。 

    全出血分隔线

    比如:google photo,用全出血分割线,来区分上面的默认分类和下面相册的模块内容。

    相册的模块内容

    b.内嵌式分割线

    内嵌式分割线,不同于前者,它一般会在“线”的前面留有缺口,来区分统一模块下的相关内容,目的是为了让用户浏览大量相关内容时,更加高效

    比如:知乎的“更多”页面,卡片内采用内嵌式分割线,来区分同一维度下有关联的内容。

    比如第二个模块里,我的创作、我的收藏、我的关注、我的邀请回答,都是“我”操作后的内容信息;而第三个模块,已购内容、我的私家课、我的Live...,都是跟“钱”或“付费”相关的。

    内嵌式分割线

    所以,采用内嵌式分割线,比较适合这种划分有关联性的内容,同时有提升浏览效率

    其实,采用“线”的分割方式,相对其它两种(卡片式设计、无框设计)是比较保守的解决方案,但是,前提是要处理好“线”的间距、粗细、颜色,等问题

    相关文章

      网友评论

          本文标题:界面布局之_关于分割线的思考

          本文链接:https://www.haomeiwen.com/subject/gfwnnxtx.html