当前位置: 首页 >  谷歌优化

分割布局,你用对了吗?

发布日期:2020-05-17

笔者利用具体案例,对背景栏分割、卡片分割、留白分割以及Ⅸ卡片分割四种App界面分割设计的优缺点进行分析,并指出这四种方式分别适用的情况。

最近发现很多APP的首页布局都换成了′下图这种留白的分割方式,不太明白这个样式为什么普及度会变得这么⇔广,因Ψ此就把目前首页的分割布局都研究了一下。

研究的时候,我把我们平时设计最经常用的几种分割方式也一起找了出来,这样研究起来比较有更直观一点。

在做界面设计时,我们为了区分信息结构及层次,通常采用以下四种布局样式:背景栏分割、分割线分割、留白分割、卡片投影。

一、背景栏分割

背景栏分割有点像一个容Φ器上放了不同维度的≌内容,●能够在内容区分的同时,还能保持界面的统一性。

如下图所示:

优点:设计的时候好布局,能提高屏幕的利用率。同时让界面看起来有秩序,降低用户对于大量信息的理解时间。 缺点:对图标的视觉要╣求比较高。因此在做这种页面时,一定要把握好图标的色彩搭配和细节的一致性,不然会显得画面很粗糙。

这种设计适合内容多且不太好梳理的页面——利用背景分割,将每个部分分成独立的ↀ模块,将用户的注意力留在想看‥的模块,同‖∠时提高用户的理解能力。

如下图所示:

支付宝和蛋卷基金都是采用这种背景栏做分割。

每个卡片都是不同的维度,相对独立的,通过背景栏的分割,以及不同模块的标题,提高了视觉效率。

二、分割线分割

分割线是UI设计中最常见的一种分隔方式,能帮助用户理解页面层次,有分隔、组织的作用。一般是为了将内容分割开,形成独立的内容和信息。

如下图所示:

优点:这是一种比较保守的设计▫方案,担心不知道要用什么方式来做分™割的时候,就可以选这种,一般不会出错。 缺点:要处理好线的粗细,间距和颜色——线条不能·。过粗,颜色不能太重。处理不好的话,会让页面有一种挤压及粗重的感觉。

这种分割线大部分在UGC模块上使用。

首先要考虑到屏幕ч利用率,其次对每个用户产生的内容要进行分割。但是,存在感不能太强,不然会干扰用户对内容本身的注意力,因此我们会在大部分的UGC模块上使用这种形式。

如下图所示:

例#如:微信朋友圈和全名K歌的首页¥,就是使用的贯通分割线,让这些内容在视觉上分开,形成独立的模块。

我γ们看大部分的社交APP,属于UGC模块的大多都是使用的贯通分割线。因为UGC∈的内容是不可控的,有可能是文字,也有可能是图片,使用贯通分割线能够减轻用户的视觉压力。

二、留白※分割

留白:是指在页面元素间或是包围页面元素的空白空◆间。

虽然这种手法可能会被认为是浪费空间,但是不得不说,目前大部分App的首页都是采用的留白分割。

如下图所示:

优点:使用留白能够让整个页面在视觉上展现的更加舒适。去除很多边边框框的束缚,就会显得更加规整,并且不杂乱。 缺点:要求界面元素比较统一、重复,同时图片的大致调性要一致,不然会显得界面很凌乱。而且,留白的增多也☎意味着会减少屏幕的利用率。因此,使用留白做分割还是要符合产品调性和整体页面的展示效果。

这种比较适合产品调性比较简洁,同时页ↈ面图片比较多的界面。因为与其说是留白做分割,不如说是图片做分割。

如下图所示:

造作、腾讯视频、爱彼迎的首页等,用的都是大留白做不同部分的分割。

从这三个截图我们能发现:留白间距上下的内↹容,大多都是相对一致的、重复的Ц——相近的内容,用户会下意识的分在一个模块里,同时运用大标题能够成为关键的信息。而且他们用的*图片整体感觉很一致,因此界面感觉就很简洁。

我在写这篇文章的时候其实是有疑惑的:感觉留白能让页面看起来高大上,那么,是∩不是可以将分割线和背景分割都改变⿴成留白?

所以我做了这个尝试,如下图所示:

微信公众号:没有了分割线之后,看起来整个页面就失去了平衡Д,视觉上左边偏重。 最右И:没有了背景分割,改成留白分割后,UGC模块里有发视频的、发照片的、点赞的、评论的、转发的,整体看起来信息量很大,看久了会容易弄混。所以,留白分割还是Ж比较适用于尺寸一致或者风格统一的页面。

三、卡片投影分割

卡≯片投影一直是以小巧整齐的内容容器的形式У而存在,每一个卡片〖的都承载不同的信息,是用户了解更多细节ρ信息的入口。

如下图所示:

优点:能够快速吸引用户的注意力,而且容易出视觉效果,设计的时候大多数设计师都比较喜欢用卡片投影。 缺点:屏幕利用率比较低,而且开发实现起来有@点困难,上线版一般离设计稿的差距有点大。

卡片投影比较适合信息量比较Θ多,但是视觉上又比较精简一点的页面。因此目前很多电商,金融类的首页用的都是卡片投影式的设计。

如下图所示:

自如:首页是卡片投影分割,主要依靠的是视觉设计,配色和icon是他们首页的亮点。这样能够快速的吸引用户的注意力,让用户点击。而±且ξ因为首页的分类比较多,采用这ω种卡片投影分割,能方便用户理解。 Keep:首页是全部关于用户的信息。为了能让用户更一眼就能看到自己关心的内容,所以用卡片式投影做分割,让页面保持简约的同时,还能保持内容的纯粹性和直观性。

四、总结

总的来说,任何表现形式都是为了更好的呈现功能和内容。但是,我们也不能盲目追随趋势,一定要了解为什么会采用这种形式。

接着,我们来看下面╥这张图简单的总★结一下:

背景栏分割:其布局屏幕利用率是最高的,能在有限的屏幕上放置更多的信息。同时,通过背景的分割,将有关联的信息放在一起,还能够保持页面┏上下的一致性。 分割线分割:较适用于UGC模块。将用户发表的内容做分割,形成独立的信息,这种展现形式比较中规中矩,使用起来一般不会出错。 留白分割:适用于内容相对一致的、重复的页面。通过留白的间距让用户对页面有理解,视觉上简洁并且有层次。但是◤,屏幕的利用率会降低,同时对图片的要求统一性要求很高。目前大部分主流的App用的就是这种风格的分割。 卡片投影:适用于信息量比较多的页面。►因为产品调性又需要比较精简一点的页面,加了投〾影以后,视觉效果也比较好,能快速吸引用户的注意。

参考链接:

《卡片式设计,并不能支撑所有的设计需求》

《什么是卡片式设计?》

《关于卡片设计、分割线、无框设计的思考》

《关于页面布局思考汇总:无边框设计、卡片设计及分割线设计》

《为什么你爱用的 App,都用卡片式设计≦?》

《用户界面,真的需要有那么多留白吗?》

 

本文由 @潘团子 原创∞发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于 CC0 协议

  • 谷歌手势控制黑科技新进展...

    谷歌公司获得了美国监管部门的批准,可部署一款基于雷达的动作感应设备,也就是外界熟悉的Project Soli项目。美国联邦通信委员会(FCC)在周一晚间公布的命令中称,同意授予谷歌一项豁免,以高于目前允许的功率水平运行Soli传感器。FCC称,这种传感器还可以运行在飞机上。谷歌FCC称,这一决定是出于公众利益考虑,通过免触摸的手势技术提供创新设备控制功能。FCC表示,Soli传感器能够使用雷达射束...

  • CBNData:纸尿裤行...

    报告下载:添加199IT官方微信【i199it】,回复关键词【纸尿裤行业研究报告】即可 消费者画像-性别和年龄 消费者方面,和母婴行业整体情况一样,购买纸尿裤的消费者也是女性居多,并且仍在逐年增加 购买纸尿裤的主力是29-35岁年龄人群,并且这个人群的比例远高于整个母婴行业;23-28岁年轻人群的比例逐年增加 消费者画像-网购深度和消费档...

  • 小米:2017年Q2小米...

    7 月 7 日,雷军发表内部信称,小米手机第二季度出货量 2316 万台,环比增长 70%,是小米手机问世七年以来创造的最高季度手机出货量纪录。 根据 IDC 的数据,2017 年第一季度,小米手机的出货量还不及华为的一半,在中国市场排名第五。雷军把过去一年小米手机销量不理想的原因归结为「两次长达几个月的严重缺货」。而在内部信中,雷军把第...

  • 3成女性,竟因为这个原因...

    16-25岁的女性,每周花在自拍上的时间,超过5个小时;当她们自拍时,她们在想些什么?

  • 毕马威 | 资本寒冬下投...

    199IT数据中心微信账户:i199IT 日前,顶尖会计师事务所界中的“四大”之一的毕马威(KPMG)公布了2015年第四季度全球VC风险投资报告。作为收官之作,其不仅详细阐述了世界“热钱”的流向和流量,也指明了未来创新创业的风口所在。 对于全球范围的创业者和风投机构来说,持续半年多的资本寒冬所带来的影响似乎仍然在持续。然而即便如此,就...

  • 北京大学&安世...

    近期,安世联合(中国)与北京大学“中国居民出境旅游风险研究”项目组联合发布《中国居民出境旅游风险报告》,对海外旅游市场进行了解读,对中国出境旅游风险进行了详细的分析。 中国居民出境旅游市场分析 报告从中国居民出境旅游人次、旅游目的地分布和旅游消费渠道三个方面,回顾了过去十年(2007-2016)中国居民出境旅游市场,并对2017至2020...

  • 2017年大数据十大发展...

    大数据市场将会继续增长这一点毋庸置疑,但企业应该如何应用大数据呢?目前还没有一个清楚的答案。新的大数据技术正在进入市场,而一些旧技术的使用还在继续增长。本文涵盖大数据未来发展的十大趋势,这些趋势可能对2017年及以后的大数据市场产生极大影响。 专家预计,机器学习、预测分析、物联网和边缘计算将对2017年及以后的大数据项目产生深远影响。 ...

  • 这几个因素会影响到网站优...

        其中一些因素将影响网站优化的作用。许多SEO的搜索者仍仅停留在排名阶段,而朋友链很难改变。那么百度搜索引擎的关键字排名又如何呢??如何提高您网站的排名?网站的内容和搜索关键词的相关性,网站的相同主题和内容将被百度认可,甚至您的网站减少也会使用户感到不满。网...

  • 如何分析付费用户,第一部...

    付费用户就是为我们的产品带来收入的人。了解付费用户行为的细微差别是很重要的:比如他们都买了什么,付费频率是怎样,花了多少钱等等。了解用户在上述行为中的感受是很重要的,用户投资了我们的产品是否让他们感到满意。实际上,在F2P网络游戏中玩家的每次付费都是投资:在一开始的时候玩家的付费,会在最后得到一个投资回报率(ROI),可以用货币化的方式衡量玩家体验的情绪。因此我们应该了解用户,即使他们是少数的.....

  • 【网络广告销售技巧】设计...

        一个好的营销网站是企业24个小时的推销员,很难在规划上是不合理的,客户能够付出,假如做到了,那就是你的主动东西每天赚24个小时。横幅直奔主题,中心卖点是买卖网站最重要的网站之一。一个好的横幅可能是规划的中心。         直奔主题,...

  • Ponemon Inst...

    根据Ponemon Institute周三公布的网络犯罪报告显示,对美国大公司的网络攻击导致这些大公司今年损失1270万美元,同比增长9.7个百分点。该报告显示,网络犯罪给大公司造成的损失当中,业务中断和信息丢失占了近四分之三。 研究还证实,将安全置于优先考虑的公司,年内和安全事件相关的成本更低,使用安全技术防止关键系统被入侵的公司...

  • 今日头条:AI助力用户推...

    在上篇中主要讲了AI助力实现智能推荐的原理流程和方法,在下篇中笔者将通过上手操作,来讨论具体落地的方法。 本篇笔者选择今日头条中的13个类别的信息作为上手对象,如:时尚、旅游、美食、育儿、财经、图片、探索、娱乐、搞笑、直播、体育、科学等,分别通过抽取粉丝数超过百万以上的用户最近的文章、用户标签和分享的图像,最终在13个类别上获取了353个用户的I...