恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【译】分屏设计的最佳实践
0.0°
2018-07-17 自译外文 经验/观点 原作者: Nick Babich 举报 1752 8 6 0

【转自我的公众号】

分屏设计的最佳实践


       单个屏幕一分为二,越来越多的网站采用的设计模式包括两个并排放置的垂直面板。分屏设计遵循一个简单原则:

   

单个屏幕,两种信息


       每侧都有独立的内容区域,如照片、文本区块或插图。

Image title

当您要推广两件事情的时候,分屏是非常有益的。这种方法可以突出两个对象并允许用户快速作出选择。


       将屏幕分成两个区块不只是简单的图形趋势,也提供了引导用户进入网站的原始方式。靠近一点看,你可以发现以下优势:

1.引起用户对特定内容的注意。

2.对比出现。

3.提供非传统的格式。

       这也是响应式框架的明智选择。这种类型的布局特别适合在大屏或平板上导航,也适用于移动端设备:当涉及较小屏幕时,面板可以堆叠。

分屏的优势是使无数设计组合成为可能。在本文中,您将了解如何充分运用这种设计趋势。


分屏设计的最佳选择


       在设计中使用分屏设计布局时,可以同时赋予两种元素同等重要性,并允许用户在两者之间快速选择。这意味着您可以轻松传达双重重要性。需要强调的是用户会在配对两者之间建立视觉联系,因此您可以将其看成是阴和阳的概念。


鲜艳的颜色和醒目的字体配对


       由于扁平化设计和质感设计(Material Design)的关注度上升,颜色和字体是当前的大势所趋。鲜艳的颜色作为视觉刺激,醒目的字体强化了文字内容。结合两者,会产出有趣的视觉设计。

Image title

       明亮的颜色和有趣的字体配搭增添了趣味性。图片来源:Baesman

Image title

充满色彩的图片与内容并排放置是强有力的组合。


把用户注意力吸引到操作按钮上


       分屏设计很适合设计视觉主题,能为操作创造更大的焦点。负空间结合醒目的垂直分割,增加了对重要区域或关键元素的极大关注。

Image title

该设计有助于把用户注意吸引至左侧屏幕的操作。


把屏幕看成卡片


       分屏设计模式源自于卡片设计的流行。遵循这一趋势的网站共享一个基于卡片的概念:屏幕本质只是超大的卡片,每一屏都包含一条信息和一个操作。

Image title

Si Le Solei 设计中左侧是一张“卡片”,右侧包含一对卡片。


       堆叠模式可能有所不同。例如,下方 Stikwood 的设计案例特点是一侧分割成许多小块。这给予用户更多入口。

Image title

考虑使用马赛克或砌体模式。


小提示:保持屏幕简洁,因为复杂的分屏使 UI 看起来混乱。


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

       尽管分屏设计模式可以区分不同元素,但在内容之间必须存在联系。一种可用方式是使用颜色建立联系。在屏幕之间复制明显的颜色建立视觉流。这在有许多对比的品牌颜色或色调中非常有用:

Image title

Bump 复制了品牌颜色,从而建立了从产品屏幕到预定屏幕的视觉流。

Image title

Marka 复制了高对比度的颜色来建立屏幕之间的视觉流。


       另一种技术是跨屏幕放置同一元素(如文本)。该元素可以增加凝力:

Image title

分屏元素可以重叠。图片来源:Sewage Free Seas


最后,可以使用彩色覆盖:

Image title

Nathan Riley 网站右侧屏幕设计为左侧屏幕的延续。


用动画鼓励用户操作


       精美的动画和交互效果鼓励用户点击。看下面 “Chekhow is Alive” 网站的设计。该设计希望用户点击按钮找到自己的性格。

Image title


结论

       分屏设计是一种有趣、功能强大及响应式的设计方式。然而,当涉及内容,拆分布局可能会变得艰难。如果您正在为您的网站考虑分屏设计,我建议您问自己以下几个问题:

它是否适合您的内容?是否有足够的负空间使布局有效?

用户会喜欢这种布局还是为其困扰?

是否可以将用户注意力拆分成两半?


       请记住内容是王道,分屏应该是向人们传递信息的简单方式。

       谢谢

更新:2018-07-17

收藏

8人已收藏

  • 13

    作品

  • 5

    粉丝

  • 3

    关注

  • 生日礼物选择
  • 小金鱼 游啊游
  • 后台管理界面设计
  • 登录界面
相关标签

    猜你喜欢

      2018-07-17 自译外文 经验/观点 原作者: Nick Babich 举报 1752 8 6 0

      【译】分屏设计的最佳实践

      0.0°

      你确定要举报【译】分屏设计的最佳实践

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年05月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录