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

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


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

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

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

分屏式设计完美的解决了你需要同时呈现两个不同内容的需求,这种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

相关推荐

  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11
  • 与经典艺术交互体验,迪士尼推出AR博物馆,“篡改”世界画作

    ——映维网——国际影响力VR信息数据平台文章相关引用及参考:vrscout怎样做到?用户能够通过移动设备扫描博物馆中的任何2D艺术品或者是书籍,然后实时更改颜色和色调。例如,你可以把《蒙娜丽莎》变成紫色的皮肤(映维网 2017年09月02日)迪士尼在2015年开发了一种可以通过实时纹理来创建彩色书籍的AR技术(一种捕获2D绘图来实时创建3D增强现实图像的过程)。自那以后,迪士尼将实时纹理技术发展成一个名为AR Museum的新AR应用程...

    2018-01-30
  • 如何运用预置的内容和默认设置,创造更好的用户体验

    首先出现的数值和设置内容就是默认项。它们的作用似乎微乎其微,但默认项(和它们的设计者)掌握着强大的力量——替用户做决策。本文中,我们会讨论如何运用预置的内容和默认设置,创造更好的用户体验。只有不到5%的用户会修改默认设置用户会假设你已经掌握了他们所有的偏好

    2017-05-02
  • 作品集讲座 | 交互设计与工业设计的关系?

    专注艺术留学作品集辅导前几期克瑞斯带同学们分析了景观设计、建筑设计和室内设计三大专业。今天为大家分享艺术作品集比较热门的交互设计和工业设计专业,对于交互设计,许多同学们都不太了解,甚至因为同样涉及到产品,因此容易和工业设计混为一谈 ,今天克瑞斯就来跟大家详细讲一讲交互设计与工业设计的区别,希望同学们在选择专业上更加清晰明了。如今的工业设计变得非常的宽泛,它本身就是一个非常需要人们来思考的概念思维,并且它的设计思维都是从产品的整体外形线条...

    2018-03-31
  • 一张图看懂在华为和腾讯工作的区别

    作为先后任职于菊厂(华为)和 鹅厂(腾讯)的高级设计师老毕,对于这两家企业文化迥异的公司,有着深刻的体会(血和泪),今天老司机就带领大家对比一下两家公司的区别。 来源:BAT 企业文化 薪酬结构 应届生薪资 …

    2016-06-17
  • 交互设计师之学习需求分析总结

    交互设计师在产品开发的过程中扮演者什么样的角色?需要做什么具体的工作?这是我之前接触到交互设计时的疑问,我想只有清楚了交互设计师的工作流程,才能对交互设计师的职责有一个深入的理解,下面根据自己所涉猎…

    交互设计 2015-08-12
  • 从一个弹窗的关闭按钮引发的讨论和思考

    作者:李逍遥(UXRen翻译组管理员,UI设计师)   弹窗的右上角有个关闭按钮,功能好像跟下面的取消确定差不多,都是操作完成后弹窗关闭。咋的一看好像很多余,是不是多余呢,因为设计规范的时候碰巧遇到这个问题。…

    交互专题 2023-03-03
  • 情绪板的制作方法:写给设计师的全方位使用指南

    在设计上图片比其他要素更容易让人理解,所以我们可以利用情绪板(英: Mood Board),来使设计工作更加流畅,缩短制作的时间、改善工作流程。

    2017-05-11
  • 移动设计:体验、交互和创新之精髓

    移动优先的设计策略将使产品拥有高度任务驱动的体验。用户可以将注意力聚焦在需要完成关键任务上,而不会被传统桌面产品中过多的无关因素所干扰。

    2017-06-04
  • 一份全面系统的渐变色自学指南

    踏入新创科技业以来,总是听见许多设计师/工程师朋友们在抱怨设计师与工程师之间的合作有多么的…不融洽(糟糕),要码是设计师常常抱怨工程师没有 美感,不重视设计细节,或是连Guideline都不读完就来跟我讲该怎样设计( → 强烈建议iOS/Android 工程师不管未来是否会接触接口设计都花些时间把iOS的Human Interface Guideline跟Material Design Guideline给看完,这是基本啊!!基本啊!!在线已经有满坑满谷的翻译文章啰,所以别再拿看不懂英文当借口啰);另一方面就是工程师也常常会抱怨 设计师总是把写动画当作小画家,把写程序当成写国字(Framer会红的原因?!)或是总是有着过于天马行空的设计想法。

    2017-05-22