巧用色彩为卡片式设计加分,海淘科技教您:
得益于Material Design日益增长的人气,卡片式界面现已随处可见了。这种时权且重视功用的美学,运用块状的方案元素承载多种多样的信息。假如想要运用这种文武双全的办法,你的卡片方案有必要匠心独运。
色彩即是办法之一。漂亮的色彩选用、令人振奋的色彩分配、和幽默的联系,能创造关键、进步易用性,并且吸引用户深化你的方案项目。
要运用卡片来方案,有许多要注意,这些卡片会出色不一样类型的数据(例如图画、文字、按钮、衔接、议论、或视频),这些数据都相关到同一则信息。
这些可点击的区块,被方案成复古校园游戏卡牌的款式,其间一块区域包含了某种视觉信息,还有一小块文字或按钮。卡片特性界面的优点是,用户能很容易领会它们的用法,使得它成为很多内容或电商的志向方案。并且,它们易于阅览、适于同享、用途广泛。
要初步运用卡片方案,能够从学习卡片方案的基础初步,
你还得遵照这7条最佳用法:
留白。运用满足的间隔和边距来避免杂乱。
一张卡片一件事。卡片能简化你的网站结构。不要让每张卡片过于杂乱,破坏了这层基础。
适宜的图画。卡片中的图老是比较小,要确保图画清楚、裁剪稳当,适宜相应的场景。
简练的字体。因为文字也很小,简练的字体最易辨识。选用简练漂亮的字体,避免运用装饰性字体。
表现构思。支付额外的极力让它匠心独运,运用比方动画效果、视频、圆角、或新颖的配色。
运用打开的栅格。标准的栅格有助于坚持间隔一同,一同包容各种标准和断点。
首先要面临的选择,是运用淡色仍是深色的配色。两种各有利弊;白色或淡色的配色最遍及,但深色在移动应用上正在变得盛行。
Dribbble的卡片很简略分辩、摆放、和点击,让人了解某个项目的详细信息。它的方案在淡色布景上运用了白色的卡片,每张图画下方有个内容区域闪现著作。淡色在桌面端表现特别优良,对于双眼很和睦。
SB Joinery则选用了深色的配色——在深色布景上运用反白文字——并在图画上叠加了色彩,让视觉重心停留在文字和鬼魂按钮上。弹出菜单一样运用了深色主题。得益于粗字体和高对比度的色彩,深色特性的卡片易读性强,极点有用。
卡片式方案的运用首要受Material Design的影响——好的影响。方案特性侧重移动端的可用性,借扁平化方案和极简特性之所长,遵照一套用户日益习气的美学特性和诀窍。
这种特性吸收了美丽、高丰满的配色,从蓝色到绿色、赤色。虽然不是一定要遵照这些色彩建议,但这是个好主意。参加大胆、明亮的配色,能够创造关键和顺畅的领会。
用在页头、按钮和行为指令元素上。
作为一种有意义的布景元素运用——例如不一样类型的卡片运用不一样色彩。(就像Helbak.的事例)请注意,即使是柔软色和淡色也能美好地套用这种办法。
将色彩用于首要的文字元素,进步可读性。
用美丽的色彩叠加在图画上,或运用双色骤变的诀窍来引导用户阅览卡片。
终究,大胆的色彩选择,是一种侧重特定元素的手法。例如,五颜六色元素能打破视觉单一,推进交互做法。
The Mayors Challenge的方案充分运用了material design的概念,却没有做出Google产品的感触。色彩美丽而明亮,一同卡片在某种程度上却非常简略和“不明确”。图标、文字和衔接中都有美丽色彩,所有这些暗示,都在引导用户在网站上进行操作。
对于卡片式界面方案有一种批评的动静,它使各种元素看起来过于相似了——所以需要挥洒构思、打破陈规。
色彩恰是让卡片式网站设计方案独具一格的要素。选择所用诀窍时,要思考色彩怎样最佳地与品牌相联系,并为用户服务。
要发作最佳效果,就要带着特定目的运用色彩,通过方案吸引用户,推进他们采纳行为。无论是运用淡色仍是深色,或者是美丽色彩和盛行混搭,色彩都能影响用户对于方案的感知和操作办法。