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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
巧用色彩为卡片设计加分
0.0°
2016-03-28 自译外文 经验/观点 原作者: Carrie Cousins 举报 12008 144 148 2

色彩是使卡片式设计独具一格的因素,如何选用和搭配色彩,来使卡片式设计具有更高的美观度与易用性。


得益于Material Design日益增长的人气,卡片式界面已经随处可见了。这种时尚且注重功能的美学,运用块状的设计元素承载多种多样的信息。如果想要利用这种多才多艺的手法,你的卡片设计必须别具一格。
色彩就是方法之一。优美的色彩选用、令人振奋的色彩搭配、和有趣的结合,能创造重点、提升易用性,并且吸引用户深入你的设计项目。

卡片式设计基础

要运用卡片来设计,有许多要注意,这些卡片会突出不同类型的数据(例如图片、文字、按钮、链接、评论、或视频),这些数据都关联到同一则信息。
这些可点击的区块,被设计成复古校园游戏卡牌的样式,其中一块区域包含了某种视觉信息,还有一小块文字或按钮。卡片风格界面的优点是,用户能很轻易领悟它们的用法,使得它成为大量内容或电商的理想方案。而且,它们易于浏览、适于分享、用途广泛。
image01
图片来源:Urban Ministries of Durham
image03
图片来源:The Clymb
要开始运用卡片设计,可以从学习卡片设计的基础开始,请看UX Pin的《2015-2016的网页设计趋势手册》
你还得遵循《有效的卡片式设计完全指南》中的这7条最佳用法:

  • 留白。运用足够的边界和边距来避免杂乱。
  • 一张卡片一件事。卡片能简化你的网站结构。不要让每张卡片过于复杂,破坏了这层基础。
  • 合适的图片。卡片中的图总是比较小,要确保图片清晰、裁剪得当,适合相应的场景。
  • 简洁的字体。由于文字也很小,简洁的字体最易辨识。选用简洁优美的字体,避免使用装饰性字体。
  • 发挥创意。付出额外的努力让它别具一格,使用诸如动画效果、视频、圆角、或新颖的配色。
  • 使用开放的栅格。标准的栅格有助于保持间距一致,同时包容各种尺寸和断点。
  • 贯彻菲兹定律。正如我们在《交互设计最佳实践》中所描述的,菲兹定律(同样适用于卡片)建议整个卡片都可以点击——而不仅仅是上面的文字或图片。这使得用户操作更轻松。

    浅色与深色卡片

    首先要面临的抉择,是使用浅色还是深色的配色。两种各有利弊;白色或浅色的配色最普遍,但深色在移动应用上正在变得流行。
    image02
    图片来源:Dribbble
    Dribbble的卡片很容易分辨、排列、和点击,让人了解某个项目的详细信息。它的设计在浅色背景上使用了白色的卡片,每张图片下方有个内容区域显示作品。浅色在桌面端表现尤其优秀,对于眼睛很友好。
    image05
    图片来源:SB Joinery
    SB Joinery则选用了深色的配色——在深色背景上使用反白文字——并在图片上叠加了颜色,让视觉重心停留在文字和幽灵按钮上。弹出菜单同样使用了深色主题。得益于粗字体和高对比度的色彩,深色风格的卡片易读性强,极其实用。

    鲜艳的配色

    卡片式设计的运用主要受Material Design的影响——好的影响。设计风格强调移动端的可用性,借扁平化设计和极简风格之所长,遵循一套用户日益习惯的美学风格和技巧。
    这种风格吸收了鲜艳、高饱和的配色,从蓝色到绿色、红色。虽然不是一定要遵循这些色彩建议,但这是个好主意。加入大胆、明亮的配色,能够创造重点和顺畅的体验。
    image04
    图片来源:Helbak
    如何充分利用饱和色?
  • 用在页头、按钮和行动指令元素上。
  • 作为一种有含义的背景元素使用——例如不同类型的卡片使用不同颜色。(就像Helbak.的案例)请注意,即使是柔和色和浅色也能美妙地套用这种方式。
  • 将色彩用于主要的文字元素,提升可读性。
  • 用鲜艳的色彩叠加在图片上,或使用双色渐变的技巧来引导用户浏览卡片。

    用于强调的颜色

    最后,大胆的颜色选择,是一种强调特定元素的手段。例如,彩色元素能打破视觉单一,促进交互行为。
    image00
    图片来源:Mayors Challenge 2016
    The Mayors Challenge的设计充分运用了material design的概念,却没有做出Google产品的感觉。颜色鲜艳而明亮,同时卡片在某种程度上却非常简单和“不明确”。图标、文字和链接中都有鲜艳色彩,所有这些暗示,都在引导用户在网站上进行操作。
    关于卡片式界面设计有一种批判的声音,它使各种元素看起来过于相似了——所以需要挥洒创意、打破陈规。

    总结

    色彩正是让卡片式设计独具一格的因素。选择所用技巧时,要考虑色彩如何最好地与品牌相结合,并为用户服务。
    要产生最佳效果,就要带着特定目的运用色彩,通过设计吸引用户,促使他们采取行动。无论是使用浅色还是深色,或者是鲜艳色彩和流行混搭,色彩都能影响用户对于设计的感知和操作方式。

原文链接:https://studio.uxpin.com/blog/use-color-to-up-the-ante-on-your-ui-cards/
作者信息:
Carrie Cousins
Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.

更新:2016-03-28

收藏

144人已收藏

可乐橙

UI/UX设计师,现居杭州

  • 113

    作品

  • 6675

    粉丝

  • 14

    关注

  • 移动应用弹窗设计指南
  • 短期记忆与用户体验
  • 记忆的工作原理与设计诀窍
  • 老年用户的体验思考
相关标签
卡片式设计色彩

    猜你喜欢

      2016-03-28 自译外文 经验/观点 原作者: Carrie Cousins 举报 12008 144 148 2

      巧用色彩为卡片设计加分

      0.0°

      你确定要举报巧用色彩为卡片设计加分

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2016年03月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      148
      144
      2

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

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

      登录

      手机号

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

      登录
      第三方账号登录