β

超赞干货!有哪些巧用色彩的技巧能为卡片设计加分?

优设-UISDC 34 阅读

card-design-color-skills-1

@可乐橙_ColaChan :得益于 Material Design 日益增长的人气,卡片式界面已经随处可见了。这种时尚且注重功能的美学,运用块状的设计元素承载多种多样的信息。如果想要利用这种多才多艺的手法,你的 卡片设计 必须别具一格。

色彩就是方法之一。优美的色彩选用、令人振奋的色彩搭配、和有趣的结合,能创造重点、提升易用性,并且吸引用户深入你的设计项目。

卡片式设计基础

要运用卡片来设计,有许多要注意,这些卡片会突出不同类型的数据(例如图片、文字、按钮、链接、评论、或视频),这些数据都关联到同一则信息。

这些可点击的区块,被设计成复古校园游戏卡牌的样式,其中一块区域包含了某种视觉信息,还有一小块文字或按钮。卡片风格界面的优点是,用户能很轻易领悟它们的用法,使得它成为大量内容或电商的理想方案。而且,它们易于浏览、适于分享、用途广泛。

image01

图片来源: Urban Ministries of Durham

5klc20160327

图片来源: The Clymb

要开始运用 卡片设计 ,可以从学习 卡片设计 的基础开始,请看UX Pin的 《2015-2016的网页设计趋势手册》

你还得遵循 《有效的卡片式设计完全指南》 中的这7条最佳用法:

浅色与深色卡片

首先要面临的抉择,是使用浅色还是深色的配色。两种各有利弊;白色或浅色的配色最普遍,但深色在移动应用上正在变得流行。

4klc20160327

图片来源: Dribbble

Dribbble的卡片很容易分辨、排列、和点击,让人了解某个项目的详细信息。它的设计在浅色背景上使用了白色的卡片,每张图片下方有个内容区域显示作品。浅色在桌面端表现尤其优秀,对于眼睛很友好。

3klc20160327

图片来源: SB Joinery

SB Joinery则选用了深色的配色——在深色背景上使用反白文字——并在图片上叠加了颜色,让视觉重心停留在文字和幽灵按钮上。弹出菜单同样使用了深色主题。得益于粗字体和高对比度的色彩,深色风格的卡片易读性强,极其实用。

鲜艳的配色

卡片式设计的运用主要受 Material Design 的影响——好的影响。设计风格强调移动端的可用性,借扁平化设计和极简风格之所长,遵循一套用户日益习惯的美学风格和技巧。

这种风格吸收了鲜艳、高饱和的配色,从蓝色到绿色、红色。虽然不是一定要遵循这些色彩建议,但这是个好主意。加入大胆、明亮的配色,能够创造重点和顺畅的体验。

2klc20160327

图片来源: Helbak

如何充分利用饱和色?

用于强调的颜色

最后,大胆的颜色选择,是一种强调特定元素的手段。例如,彩色元素能打破视觉单一,促进交互行为。

1klc20160327

图片来源: Mayors Challenge 2016

The Mayors Challenge的设计充分运用了material design的概念,却没有做出Google产品的感觉。颜色鲜艳而明亮,同时卡片在某种程度上却非常简单和“不明确”。图标、文字和链接中都有鲜艳色彩,所有这些暗示,都在引导用户在网站上进行操作。

关于卡片式界面设计有一种批判的声音,它使各种元素看起来过于相似了——所以需要挥洒创意、打破陈规。

总结

色彩正是让卡片式设计独具一格的因素。选择所用技巧时,要考虑色彩如何最好地与品牌相结合,并为用户服务。

要产生最佳效果,就要带着特定目的运用色彩,通过设计吸引用户,促使他们采取行动。无论是使用浅色还是深色,或者是鲜艳色彩和流行混搭,色彩都能影响用户对于设计的感知和操作方式。

「可乐橙的精品译文专栏」

个人品牌好的设计师私单多!
《酒香也怕巷子深!超实用的设计师个人品牌打造指南》

电商设计的9个趋势!
《不学就落伍咯!2016年电商设计的9个热门趋势(附案例)》

2016年的潘通流行色!
《2016流行这2种色彩!附优秀网页设计案例》

原文链接: studio.uxpin
译文地址: colachan
译者: @可乐橙_ColaChan

uisdc-hao

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================ 关于优设网 ================
“优设网 uisdc.com “是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书 :史上最全的设计师图书导航: http://hao.uisdc.com/book/
设计微博 :拥有粉丝量112万的人气微博 @优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航 :全球顶尖设计网站推荐,设计师必备导航: http://hao.uisdc.com

作者:优设-UISDC
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座,聊设计,找素材,尽在优设网

发表评论