欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

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

发布时间:2017:03:22 19:02:27 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1258个文字,预计阅读时间4分钟
导语
习惯了一栏式的设计,将屏幕一分为二的设计常常会让用户感到更加新鲜。网页中并排的两栏呈现不同的信息,是分

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

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

  

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

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

  ·引起用户对于特定区域的注意力

  ·创造对比

  ·非常规式的布局

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

  在今天之前,公司建站,优设也曾预测过分屏式设计的流行:《查漏补缺!极有可能被低估的三种有趣的网页设计趋势》

  分屏式设计的最佳选项

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

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

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

  

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

  色彩和排版的组合

  

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

  图片和色块的组合

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

  

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

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

  将屏幕视作一个卡片

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

  

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

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

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

  

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

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

  构建视觉关联

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

  

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

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

  

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

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

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

  

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

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

  

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

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

  使用动效鼓励用户交互

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:实战经验!交互设计师如何与产品经理高效协作?

下一篇:用一个实战案例 帮你学会讲述重设计作品的思路

  • 18877 文章总数
  • 2200835访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信