您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

低调的分隔线

原创文章 分类: 经验/观点 版权:
281 0 1 1
2019-07-11
1.6
普通推荐

随着ios12规范 “轻量级” 设计理念的广泛使用,分隔线的出现频率变少,颜色也越来越浅,但它在界面中仍然有着重要的作用...

随着ios12规范 “轻量级” 设计理念的广泛使用,分隔线的出现频率变少,颜色也越来越浅,但它在界面中仍然有着重要的作用,它可以帮助用户区分信息层级,理解信息,使得我们的界面井井有条。分割虽小,却也有分类


分隔线的分类


全分隔线

全分隔线顾名思义就是将整个页面全部分隔,全分隔线的分隔视觉效果比较强烈。 



内嵌分隔线

内嵌分隔线是一种弱分隔的方式,也是我们在页面设计中最常用的一种分隔方式,不同于全分隔线将页面拦腰截断,内嵌分隔线的两端或者某一端会和页面的最边界留有一定的距离。 

Image title


分隔线使用方法


区分不同功能模块

界面都有目的地将不功能模块组合在一起,当需要强调两个完全模块不同时可以使用全分隔线。


下图中“综合排序”部分属于导航模块,下方的列表部分属于信息内容展示模块,两个模块的功能完全不同,所以在两个部分使用了全分隔线。 

Image title


区分不同内容

界面中展示的内容多种多样,当需要将两个具有相关性,却又不同的内容区分开来,则可以考虑使用

内嵌分隔线。内嵌分隔线可以将不同的内容有效的区分开来,又不破坏界面的整体连贯性。


下图首页的 “少年头条” “泉灵的语文课” “学科” 都是针对用户推荐的一些相关内容,但每个部分的内容又不相同,所以使用了两端距离页面最边界同等的距离的内嵌分隔线,有效的将内容区分开来,又保证了页面的整体。

Image title


区分相似内容

不同小信息条组成了信息块,这些信息块可能具有相似的结构,可以使用内嵌分隔来区别这些信息块。当这些信息块没有明显的锚元素(如头像或图标)时可以考虑使用到两端距离页面最边界同等的距离的内嵌分隔线,如果它们具有明显的锚元素时,则需要根据视觉平衡,适当的选择留部分距离的内嵌分隔线。

微信页面的左边由icon和文字组成,右边仅有一个向右的icon,在视觉上,左边偏重,所以分隔线留出了左边icon的,右端紧靠右边界,以此来平衡视觉。

Image title


注意


分隔线的目的是辅助用户理解信息,在设计时不宜抢了主要信息的注意力,所以分隔线一般都是细而浅。Material Design中建议分隔线 为1dp(在750x1334的界面中约为 2px) 的粗细,在亮色中为黑色降低透明度到12%,在暗色中为白色并降低透明度到12%,此数值仅供参考,具体情况还需具体分析。


欢迎关注公众号“七七的设计手札”查看更多文章。



七呀七个七

2粉丝/0关注

小有见解
哈喽“按钮”说说界面中的文字
0
158****7513

关注了,是个很好的知识点。

精彩!

扫描二维码
去手机端查看海报

七呀七个七

TA已经获得1枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN