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

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

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

2. 分割线设计

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

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

a.全出血分隔线

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

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

全出血分隔线

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

相册的模块内容

b.内嵌式分割线

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

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

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

内嵌式分割线

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

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

相关文章

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

    2. 分割线设计 在UI设计中,最传统也是最常见的的分隔方式是“线”。它能起到分隔、组织、细化的作用,帮助用户了解...

  • 界面布局之_关于卡片设计的思考

    你有没有反问自己是在被趋势牵着鼻子走,还是真正深思熟虑后,选择更符合自己产品定位和内容传达的表现形式? 总的来说,...

  • 分割线的分类和使用规则

    *界面设计中的分割线* 在UI界面中,分割线是页面重要组成元素。线元素可以对页面进行分割、编排或重新布局,起到对相...

  • 界面布局之_关于无框设计的思考

    3. 无框设计 无框设计是近两年流行起来的的一种新的趋势,是去除界面中的边框,分割线,用间距来区分内容。 它适合运...

  • 2019-03-15

    实验内容:关于线性布局、约束布局及表格布局的使用 主要代码: 主界面: 线性布局: 约束布局: 表格布局: 截图:...

  • iOS 关于界面布局的一些思考

    引子--两个xib的故事 上周小伙伴因为有事请假了,之后他那边负责的模块,经理反映有点问题,于是让我解决下。问题如...

  • 界面布局autoresizing

    一.界面布局过程 super view -layoutSubviews -setNeedsLayout 下次绘制之...

  • RecyclerView的使用(2)

    RecyclerView设置分割线 RecyclerView的分割线去设置布局?太low了!RecyclerVie...

  • 年前最后一发:带分割线的LinearLayout

    前言 在开发过程中,界面中条目间都需要我们设置分割线。大多时候,我们都通过如下布局代码片段设置: 如上写法虽也方便...

  • 《瞬间之美》读书笔记

    《瞬间之美-Web界面设计如何让用户心动》------Robert Hoekman,Jr. 1.布局 布局是内容组...

网友评论

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

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