关于卡片设计、分割线、无框设计的思考(2)

来源:网络   作者:热心网友   发布时间:2018-02-07    浏览次数:113



2.分割线设计



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


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



a.全出血分隔线


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

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



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



b.内嵌式分割线。


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


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


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




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


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



123共3页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/7096.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通