用户体验设计:分屏设计的最佳实践

分享一篇Nick babich的2月25日的新文,原文点击此处,翻译不当之处请指出。


分屏设计

越来越多的网站使用的设计模式:将一个屏幕分成两部分,包括并列放置两个垂直面板。分割屏幕设计遵循了一些简单规则:

一个屏幕,两部分信息。

每个部分都以单独包含的元素为特征,如照片、文本域或插图。

当你有两件事要跟进,分屏尤其好用。这种方法可以让你突出两者的区别,并使用户快速从他们之间做出选择。

分屏不仅仅是一个简单的图解趋势,而是一个原始的方法向用户提供了两种不同的路径来引导用户进入您的网站。仔细一看,你会发现以下优点:

  • 吸引用户对特殊部分的关注。
  • 显示了强烈的对比。
  • 提供了一种非常规的格式。

这也是一个很好的选择响应框架。这种布局特别适合于大屏幕或平板电脑上的导航,也可以用于移动设备:当他变成较小的屏幕,面板可以堆叠。

分屏的好处在于,几乎所有的设计组合都会成为可能。在这篇文章中,你会找到如何充分利用这种设计趋势的方法。

分屏设计内容的最佳选择

当你使用分屏布局作为你的设计方案,你可以给予这两个元素同等的重要性,同时,允许用户在他们之间迅速做出选择。这意味着你可以轻松地传达出其双重重要性。更重要的是能让用户明白这两个成对的元素之间的视觉连接。所以你应该将其视为一对“阴”“阳”概念来运用。

成对的充满活力的颜色以及醒目的排版

得益于平面和材质设计的增强,颜色和字体是现在的大趋势。充满活力的色彩视觉刺激和醒目的排版提升了文本内容。结合这两点,你最终可以落实于有趣的视觉设计。

明亮的颜色和有趣的排版对可以增加趣味性。图片引用来自Baesman
一个强大的彩色图像和内容并排的组合。

吸引用户注意到动作按钮

分屏是设计一个视觉主题时是很好的选择,可以创建一个更大的焦点来引发更多用户行为。周围的反衬空间(negative space)与醒目的垂直分割相结合,增强了对重点或关键元素的最大的注意力。

设计有助于吸引用户对于左屏的注意力。

将屏幕视为卡片

分屏设计是来源于流行的卡片式设计的一种模式。遵循这一趋势的网站基于卡片式设计的概念:屏幕基本上只是超大的卡片,每一屏就是一个容器,包含一组信息和一个用户行为。

在Si Le solei的设计中,左边的面板就是一张“卡片”在右面板包含一对“卡片”。

堆叠模式可能会有所不同。例如,在Stikwood的设计中,下图例中就是以划分为更小部分为特征的,这样给更多用户提供了进入的“点”。

可以考虑使用马赛克或砖块这样的堆叠元素模式。

提醒:(虽然堆叠可以用,但还是需要)保持你的屏幕简单,因为复杂的分屏会使界面UI看起来凌乱。

在“屏幕”之间创建视觉流

虽然分屏设计模式可以给你留下明显不同的元素,但内容之间必须有连接。建立连接的一种可能的方法是通过颜色。复制一个独特的颜色,建立视觉流从一个“屏”到另一个。这被很好地运用于一个品牌的颜色或色调通过一系列的对比来进行强调:


bump复制了品牌的一个颜色,建立一个视觉流从产品左到预购右屏。
Marka复制了一个高对比度的颜色,建立了从一个屏幕到另一个屏幕的视觉流程。

另一种实现技术是在屏幕上分层单个元素(例如:文本样式的复制)。这个元素可以提升额外的凝聚力:

分屏元素同样可以重叠。图像引用来自Sewage Free Seas

还有,你可以使用一个彩色的叠加:


在Nathan Riley网站中,右屏被设计为左屏的延续。

使用动画,鼓励用户采取行动

优良的动画和交互效果会鼓励用户点击。看下图中“Chekhow is Alive”网站的设计用。它会使你点击,找到你的角色。


图像引用来自Google

总结

分屏设计是一种有趣的、功能性强的和响应的方式来创建的引人入胜的设计。然而,当涉及到内容,拆分布局可能是艰难的。如果你正在考虑为你的网站分屏,我建议你问自己这几个问题:

  1. 它适合你的内容吗?会有足够的反衬空间(negative space)使其布局吗?
  2. 你的用户会欣赏这一布局还是会混淆他们呢(你分开的内容是不是清晰的)?
  3. 你的划分方式把用户的注意力分成一半可以吗?成功了吗?

请记住,内容为王和分屏应该一种将你的信息传递给人们的简单的方式(而不是让用户更难分别的)。

以上,感谢阅读!与君共勉!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,721评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,259评论 25 707
  • 图文|十二匕千八页 柞水游记 凤凰,亦作“凤皇”,古代传说中的百鸟之王。雄的叫“凤”,雌的叫“凰”。此篇之所以凰在...
    十二匕千八页阅读 480评论 3 6
  • 听说咪蒙又把实习生搞哭了,又听说各大自媒体人又开始轮番上阵去骂咪蒙,但这些都不是我写这篇文章的目的,毕竟我总是懒得...
    每天都有新实习阅读 1,111评论 1 0