分屏式设计正在逐渐流行,常见的玩法有哪些?

不论如何,内容为王,而形式服从于内容,谨慎选择。


不论如何,内容为王,而形式服从于内容,谨慎选择。

分屏式设计正在逐渐流行,常见的玩法有哪些?

习惯了一栏式的设计,将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息,是分屏式设计的最典型特征,两边的信息可以包含相同类型的元素,可以呈现不同属性的媒体内容,比如一边是图片,一边是文本。

分屏式设计完美的解决了你需要同时呈现两个不同内容的需求,这种UI界面突出了这两项内容的对等地位,让用户自行浏览,或者作出选择。

分屏式设计正在逐渐流行,常见的玩法有哪些?

你会发现,分屏式设计不仅仅是一种逐步流行的页面设计趋势,而且非常实际地解决了需要呈现同等重要内容、让用户选择的设计需求。这种呈现方式看起来原始,但是确实有着明显的优势:

  1. 引起用户对于特定区域的注意力
  2. 创造对比
  3. 非常规式的布局

此外,分屏式设计和响应式框架能够很好的结合起来,这种类型的布局特别适合在桌面端大屏幕和平板电脑上使用,同时还能够在小屏幕上以上下堆叠式的方式呈现出来。

分屏式设计的最佳选项

当你将屏幕划分为两块的时候,两个区域内的内容的重要性是同等的,这也意味着你可以在这个界面中传达双重重要的概念。处于两个对等区块的元素就像阴阳鱼一样,从视觉到功能上,同等重要,互为补充。

活力四射的配色和趣味十足的排版

得益于扁平化设计和Material Design 在设计领域的大范围普及,色彩和排版成为了目前设计的主要驱动力。鲜艳的色彩带来视觉刺激,而有趣的排版则让文本更有意思,两者的结合能带来颇为值得一看的设计。

分屏式设计正在逐渐流行,常见的玩法有哪些?

色彩和排版的组合

分屏式设计正在逐渐流行,常见的玩法有哪些?

图片和色块的组合

吸引用户注意行为召唤按钮

分屏式设计正在逐渐流行,常见的玩法有哪些?

分屏式设计在视觉设计可以很有张力,这也意味着身为设计师的你同样可以合理地运用留白创造视觉焦点,将用户的注意力吸引到特定的元素上,这也是行为召唤(CTA)按钮的使用原理。

将屏幕视作一个卡片

分屏式设计本质上是从卡片式设计中延伸出来的,而遵循这一设计原理的网站通常都会将屏幕视作为一个卡片,每一屏都是一个容器,每个卡片都承载一个交互和一条信息。

分屏式设计正在逐渐流行,常见的玩法有哪些?

屏幕的左边包含一个卡片,而右边则包含了一对卡片。

分屏式设计是自由的,它所包含的左右两大块其实是还可以继续往下细分的,比如下面的Stikwood 这个网站就将右侧的部分划分为更小的区块,用来承载更多的内容,提供更多的信息入口。

分屏式设计正在逐渐流行,常见的玩法有哪些?

小贴士:尽量让你的界面保持简单,即使要分割出更多区块,也尽量不要使用复杂的模式,否则UI界面会看起来很混乱。

构建视觉关联

虽然分屏设计模式让你可以在其中呈现截然不同的元素,但是两个信息容器之间还是有关系和关联的。创建关联的方式很多,色彩是最常用的一种构建联系的方式。通过“共享”最明显的色彩,让两个不同的屏产生联系,产生视觉流。如果这个色彩正好是品牌色的话,效果尤其明显:

分屏式设计正在逐渐流行,常见的玩法有哪些?

Bump 使用品牌色来构建视觉流,让界面和用户产生联系。

分屏式设计正在逐渐流行,常见的玩法有哪些?

Marka 也采用了类似的技巧,色彩对比度更加强烈。

另外一个值得一提的技巧,是让某个元素横跨两个区块(比如文本),让这个元素来作为两个区块的连接点:

分屏式设计正在逐渐流行,常见的玩法有哪些?

除了文字,你还可以使用色彩叠加来连接两个部分:

分屏式设计正在逐渐流行,常见的玩法有哪些?

这个分屏设计案例中,右侧的屏幕看起来像是左侧屏幕的延伸一样。

使用动效鼓励用户交互

动效越来越多的参与到我们的UI设计和交互中来,使用动效来鼓励用户但与到交互中是非常合理的设计策略。看看下面 Chekhow is Alive 这个网站的设计,设计师通过动效展示不同的角色,与你进行匹配。

分屏式设计正在逐渐流行,常见的玩法有哪些?

结语

分屏式的页面设计非常有趣,功能也足够强大,不过你的内容是否适合用来这么展示?所以,在如此设计之前,建议先问自己几个问:

  1. 分屏式设计是否和你的网站内容相匹配?是否有足够的布局来进行分屏式设计?
  2. 你的用户是否会喜欢这样的布局?
  3. 将用户的注意力一分为二是否合适?

不论如何,内容为王,而形式服从于内容,谨慎选择。

 

原文作者:Nick Babich

原文地址:uxplanet

译者:@陈子木

译文地址:http://www.uisdc.com/split-screen-design-trends

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23769/

(0)
CatherineCatherine
上一篇 2017-05-06 16:49
下一篇 2017-05-06 19:11

相关推荐

  • 真相:到底什么是交互设计

    数十万互联网从业者的共同关注!作者:Mr汤进,微信公共号ID:chuangshe_space作者原创并投稿早读课,转载请联系作者。一、前话5月1日在我和小伙伴们一起维护的原创微信公共号“创设空间”:chuangshe_space中向关注的…

    2017-08-02
  • 从1.2亿次的点击中,苹果学到了这个提高用户体验的方法

    从iOS 9改版到iOS 10之后,锁屏页面的音乐控件变大了,用户体验 明显提高。那么最佳的按钮触摸大小应该是多少?经过1.2亿次的实验后,这个结果被微软/苹果等顶级公司采用,强烈推荐学习。

    2017-05-04
  • 设计基础:细说“十大可用性原则”

    “尼尔森十大可用性原则”给交互设计师带来益阳的设计思考,但对于新人来说,这并不好理解。为此,本文作者将结合自身经验以及一些案例,与大家聊聊“尼尔森十大可用性原则”到底是什么意思。enjoy~尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。1995年以来,他通过自己的 Alertbox 邮件列表以及useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,尽管他的一些观点可能带来争议,至少在 Web 设计师眼中,他是 Web 易用性领域的顶尖领袖。

    2017-04-27
  • 关于Axure8.0中继器的使用1

    废话少说,请开始你的表演!!!1.拖入一个中继器,将中继器多余的行删除;2.在中继器中添加三列(可以直接双击编辑),分别命名:name、sex、age;3.双击拖入的中继器会跳转类似动态面板的“(中继器)(page2)”新页面;4.在(中继器)(page2)中再添加两个和已有矩形大小一直的矩形,分别命名:name、sex、age;关于中继器的准备工作完毕,因为中继器需要存放动态数据,所以需要在页面增加动态数据的输入入口。5.回到拖入中继...

    2018-03-10
  • 国家地理:创新设计世界地图APP-炫酷、叼、高度还原设计方案。

    本文首发在iamue.com(我是UE网) 头条号同步发布 来看一看别人家的UEUi 国家地理做了一个世界地图app,动效狂拽酷炫叼炸天。关键是app线上高度还原了设计的动画效果,而且非常流畅。一起来欣赏一下吧 然后默默的收…

    2015-06-25
  • Push!请给用户一个打开APP的理由

    大多数APP的推送都是使用不当的。

    2016-04-21
  • axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 2 部分: 深入推荐引擎相关算法 - 协同过滤

    本系列的第一篇为读者概要介绍了推荐引擎,下面几篇文章将深入介绍推荐引擎的相关算法,并帮助读者高效的实现这些算法。 在现今的推荐技术和算法中,最被大家广泛认可和采用的就是基于协同过滤的推荐方法。它以其方…

    2015-12-22
  • 四步搞定!保障产品体验的基本流程和方法

    「到 2020 年,用户体验将超过价格和产品,成为品牌差异的关键。这个品牌差异,由用户体验驱动,是一个最有价值的和可靠的竞争优势」——在 Medium 的一篇文章「The Business of User Experience」中开篇的一句。个人很是认同,也许不到 2020 年,体验的竞争价值就可以作为品牌差异的关键。那么问题来了,如何保障体验?尤其对于互联网产品而言,快速迭代的开发机制下,怎么样的流程和方法可以保障每次版本迭代都不遗漏产品体验风险?

    2017-05-28
  • 信息的收集、甄别和呈现

    史蒂芬说:用户调研帮助我们去理解其他人需求,从而我们可以用充分的,有灵感的设计解决方案来对他们的需求做出更快捷的反馈。用研同时也帮助我们避开自己的偏见,因为我们必须频繁的为跟我们生活截然不同的人们设…

    2014-11-11