提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
【转自我的公众号】
分屏设计的最佳实践
单个屏幕一分为二,越来越多的网站采用的设计模式包括两个并排放置的垂直面板。分屏设计遵循一个简单原则:
单个屏幕,两种信息
每侧都有独立的内容区域,如照片、文本区块或插图。
当您要推广两件事情的时候,分屏是非常有益的。这种方法可以突出两个对象并允许用户快速作出选择。
将屏幕分成两个区块不只是简单的图形趋势,也提供了引导用户进入网站的原始方式。靠近一点看,你可以发现以下优势:
1.引起用户对特定内容的注意。
2.对比出现。
3.提供非传统的格式。
这也是响应式框架的明智选择。这种类型的布局特别适合在大屏或平板上导航,也适用于移动端设备:当涉及较小屏幕时,面板可以堆叠。
分屏的优势是使无数设计组合成为可能。在本文中,您将了解如何充分运用这种设计趋势。
分屏设计的最佳选择
在设计中使用分屏设计布局时,可以同时赋予两种元素同等重要性,并允许用户在两者之间快速选择。这意味着您可以轻松传达双重重要性。需要强调的是用户会在配对两者之间建立视觉联系,因此您可以将其看成是阴和阳的概念。
鲜艳的颜色和醒目的字体配对
由于扁平化设计和质感设计(Material Design)的关注度上升,颜色和字体是当前的大势所趋。鲜艳的颜色作为视觉刺激,醒目的字体强化了文字内容。结合两者,会产出有趣的视觉设计。
明亮的颜色和有趣的字体配搭增添了趣味性。图片来源:Baesman
充满色彩的图片与内容并排放置是强有力的组合。
把用户注意力吸引到操作按钮上
分屏设计很适合设计视觉主题,能为操作创造更大的焦点。负空间结合醒目的垂直分割,增加了对重要区域或关键元素的极大关注。
该设计有助于把用户注意吸引至左侧屏幕的操作。
把屏幕看成卡片
分屏设计模式源自于卡片设计的流行。遵循这一趋势的网站共享一个基于卡片的概念:屏幕本质只是超大的卡片,每一屏都包含一条信息和一个操作。
Si Le Solei 设计中左侧是一张“卡片”,右侧包含一对卡片。
堆叠模式可能有所不同。例如,下方 Stikwood 的设计案例特点是一侧分割成许多小块。这给予用户更多入口。
考虑使用马赛克或砌体模式。
小提示:保持屏幕简洁,因为复杂的分屏使 UI 看起来混乱。
在“屏幕”之间创建视觉流
尽管分屏设计模式可以区分不同元素,但在内容之间必须存在联系。一种可用方式是使用颜色建立联系。在屏幕之间复制明显的颜色建立视觉流。这在有许多对比的品牌颜色或色调中非常有用:
Bump 复制了品牌颜色,从而建立了从产品屏幕到预定屏幕的视觉流。
Marka 复制了高对比度的颜色来建立屏幕之间的视觉流。
另一种技术是跨屏幕放置同一元素(如文本)。该元素可以增加凝力:
分屏元素可以重叠。图片来源:Sewage Free Seas
最后,可以使用彩色覆盖:
Nathan Riley 网站右侧屏幕设计为左侧屏幕的延续。
用动画鼓励用户操作
精美的动画和交互效果鼓励用户点击。看下面 “Chekhow is Alive” 网站的设计。该设计希望用户点击按钮找到自己的性格。
结论
分屏设计是一种有趣、功能强大及响应式的设计方式。然而,当涉及内容,拆分布局可能会变得艰难。如果您正在为您的网站考虑分屏设计,我建议您问自己以下几个问题:
它是否适合您的内容?是否有足够的负空间使布局有效?
用户会喜欢这种布局还是为其困扰?
是否可以将用户注意力拆分成两半?
请记住内容是王道,分屏应该是向人们传递信息的简单方式。
谢谢
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册