提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
随着ios12规范 “轻量级” 设计理念的广泛使用,分隔线的出现频率变少,颜色也越来越浅,但它在界面中仍然有着重要的作用...
随着ios12规范 “轻量级” 设计理念的广泛使用,分隔线的出现频率变少,颜色也越来越浅,但它在界面中仍然有着重要的作用,它可以帮助用户区分信息层级,理解信息,使得我们的界面井井有条。分割虽小,却也有分类
分隔线的分类
全分隔线
全分隔线顾名思义就是将整个页面全部分隔,全分隔线的分隔视觉效果比较强烈。
内嵌分隔线
内嵌分隔线是一种弱分隔的方式,也是我们在页面设计中最常用的一种分隔方式,不同于全分隔线将页面拦腰截断,内嵌分隔线的两端或者某一端会和页面的最边界留有一定的距离。
分隔线使用方法
区分不同功能模块
界面都有目的地将不功能模块组合在一起,当需要强调两个完全模块不同时可以使用全分隔线。
下图中“综合排序”部分属于导航模块,下方的列表部分属于信息内容展示模块,两个模块的功能完全不同,所以在两个部分使用了全分隔线。
区分不同内容
界面中展示的内容多种多样,当需要将两个具有相关性,却又不同的内容区分开来,则可以考虑使用
内嵌分隔线。内嵌分隔线可以将不同的内容有效的区分开来,又不破坏界面的整体连贯性。
下图首页的 “少年头条” “泉灵的语文课” “学科” 都是针对用户推荐的一些相关内容,但每个部分的内容又不相同,所以使用了两端距离页面最边界同等的距离的内嵌分隔线,有效的将内容区分开来,又保证了页面的整体。
区分相似内容
不同小信息条组成了信息块,这些信息块可能具有相似的结构,可以使用内嵌分隔来区别这些信息块。当这些信息块没有明显的锚元素(如头像或图标)时可以考虑使用到两端距离页面最边界同等的距离的内嵌分隔线,如果它们具有明显的锚元素时,则需要根据视觉平衡,适当的选择留部分距离的内嵌分隔线。
微信页面的左边由icon和文字组成,右边仅有一个向右的icon,在视觉上,左边偏重,所以分隔线留出了左边icon的,右端紧靠右边界,以此来平衡视觉。
注意
分隔线的目的是辅助用户理解信息,在设计时不宜抢了主要信息的注意力,所以分隔线一般都是细而浅。Material Design中建议分隔线 为1dp(在750x1334的界面中约为 2px) 的粗细,在亮色中为黑色降低透明度到12%,在暗色中为白色并降低透明度到12%,此数值仅供参考,具体情况还需具体分析。
欢迎关注公众号“七七的设计手札”查看更多文章。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册