• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 看似简单的单色配色,需要这些技巧帮你玩转

看似简单的单色配色,需要这些技巧帮你玩转

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI配色,单色网站,单色配色,经验分享,网站配色等相关知识,希望在学习及工作中可以帮助到您

配色几乎是所有设计分支当中都绕不开的问题。通常我们所看到的配色都是由2~3种主要的色彩构成,单色配色并不是设计师的首选配色方案。但是单色配色方案在很多设计项目当中,都呈现出了极具表现力的一面。结合许多新的趋势和新的技术,优秀的单色配色并不一定弱于多色配色。

由于绝大多数的设计项目都倾向于使用多色调配色方案,这使得单色配色在诸多不同的设计当中,更容易脱颖而出。

选择基础色

单色配色的设计最难的地方,其实也就是挑选色彩这个事情。诚然,设计师不需要进行多色调搭配筛选,但是直接决定整个设计的色彩,挑选起来其实更加艰难。

一般而言,不同的色彩有着不同的气质,传递出不同的情绪,你可以从这方面着手。

  • 红色:爱,激情
  • 蓝色:和谐,信任
  • 绿色:希望,自然
  • 黄色:乐趣,能量
  • 粉色:浪漫,女性化
  • 紫色:神秘,幻想

仔细想想你设计对象的品牌形象和产品定位,什么样的色彩会比较合适?

确定色彩的色相之后,接下来你需要考虑色彩的明暗和饱和度。你需要营造柔和的感觉还是明亮的效果?调整这些属性,让主色调更贴合你的设计目标。

学会调整明暗和饱和度

单色配色并不是指只有一种颜色,而是只有一种色相。我们在色环上常见的色彩,默认情况下饱和度和亮度都是100%。确定色相之后,你可以通过调整明暗和饱和度,来创造一套和而不同的配色方案。通常,我们会使用Tint(色彩)、Tone(色调,饱和度)和Shade(色度)这三个属性,来对色相下的颜色进行界定,以及调整。

  • Tint:用选定的颜色和白色混合产生的颜色
  • Tone:用选定的颜色和不同程度的灰色混合产生不同饱和度的颜色
  • Shade:用选定的颜色和不同程度的黑色混合产生不同色度的颜色

所以,确定了颜色之后,通过调整色彩、色调和色度,你能获得一个色相下不同的颜色,创造出有层次的配色方案。

当然,你所创造的这套配色方案内不同的颜色之间,要有足够的对比度,让用户能够识别出来。

你可以让不同的元素的色彩,在整个设计中保持色相相同明暗次第变化,构成一个阶梯型的色阶。

实际上,许多有趣的单色配色效果,在印刷品上面表现得颇为不俗。很大程度上,是因为它不仅能够呈现颜色,而且能够借助不同的工艺,实现不同的质感。

和其他元素搭配使用

由于单色配色之下,所有的色彩都在同一色相下,色彩的对比度可能没有多色配色下那么明显,所以想引导用户浏览不同的元素的时候,引导性上可能没那么明显。

当然,无论你使用什么色彩,黑白的文本通常都能保证足够的对比度,用来承载内容,也不会让整个设计显得单调。

  • 使用颜色叠加:在叠加色彩之前,将背景的元素都转为黑白,确保叠加颜色之后,整体的色彩是一致同一的。
  • 使用加粗字体:采用加粗字体是为了让文本内容在单色配色的背景中更容易被用户所识别。
  • 使用阴影和其他视觉提示:这些视觉效果本身是为了在元素和背景层之间添加间隔,强化可读性。
  • 使用插画:让单色配色和插画结合起来,能够创造更加现代的视觉体验,同时也强化单色配色的表现力。
  • 搭配相应的图片:如果你需要在单色配色的网站中使用视频或者图片的话,不妨将网站的主色调和图片中的某个色彩保持一致。Cuberto 这个网站就是这样。

大胆使用流行色

流行色其实不分领域和国界,近年来的流行色大多都是明亮而饱和度高的色彩,你看看《这10种色彩,是潘通预测的2017年秋冬两季流行色》和《世界上最受欢迎的色彩出炉了,她的名字叫马尔斯绿!》这两篇文章就知道。

使用流行色来作为网页的主要色调,不仅仅会让设计本身有趣而漂亮,而且能够让你的网页紧跟潮流。无论是世界上最受欢迎的马尔思绿,还是少女性爆棚的芭蕾鞋粉。

这些明亮的流行色还有一个显著的好处,就是当你做单色配色的时候,很容易调出用以搭配的其他同系颜色。

当然,如果你要选择流行色来作为设计的主色调,那么你一定要时刻关注时尚圈在流行色上的风向变化,尤其是季节性的流行色,这不仅关乎你网站配色是否适宜,而且能够为你接下来的设计提供灵感。

使用更为现代的深色系

如果你想让自己的单色配色方案情感和情绪不那么明显,可以使用更为现代的黑色、深蓝作为单色配色的主体。

其实这样的深色系配色本身很有趣,也足够独特,只不过不是那么容易创造,并且没有足够的空间来供其他的颜色来发挥。

深色系,尤其是黑色系的配色,本身就会给人很现代的感觉,同时,在这种配色方案下,使用浅色或者白色的文本,可读性会非常强。

采用“准单色”配色

就像我之前在《秋风渐起,大咖们都跟随这些趋势做网页设计》这篇文章当中所说的,有的时候打破一项规则,往往能创造出意外且惊艳的效果。

这里所说的准单色配色,指的是在单色配色方案当中,加入一种色相截然不同的对比色,让整个配色方案拥有了全新的视觉焦点。

结语

单色配色本身很有趣,更重要的是,它也足够经典。不过,单色配色的缺陷也很明显,用户长时间观看之下,会很快习惯网页的这种设计,之后对于用户的吸引力并不会太过持久,所以,设计师可以适当地、定期地进行调整,确保网页的持久生命力。

想看更多单色配色设计实战案例,可以点击下方的链接跳转到优优灵感频道的单色配色案例~

【不容错过的设计实战】

  1. 《富有未来感的柏林之夜APP,是这样设计出来的》
  2. 《设计实战!城市指南网站着陆页是这样设计出来的》
  3. 《这款给医生的专业APP,设计上有着怎样不同的要求?》
  4. 《帮你策划盛大婚礼的APP,设计思路是这样的》
  5. 《这款面向大众的理财APP,设计过程是这样的》
  6. 《一款真正让人专注的效率应用,应该这么设计》

原文地址:designshack
原文作者:CARRIE COUSINS
优设译文:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 浅色还是深色?教你选择合适的界面配色方案!
  • UI配色这件事情,可以指望这6个实用技巧
  • 讲真,这可能是目前最全的在线配色工具合集了
  • 学会给配色做减法,让你的设计更加高端!
  • 超全面!UI设计中的字体配色方法总结
  • 看似简单的单色配色,需要这些技巧帮你玩转
  • 在配色这件事情上,总会有一些有趣且有用的小技巧
  • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
  • 看过那么多UI 配色指南,这篇可能是最全面的(附大量实例)

相关文章

  • 2018-08-23AR和VR流行之前,设计师如何掌握「环境」对用户体验的影响
  • 2018-08-23收藏这7个在线配色神器,再也不愁配色灵感了 !
  • 2017-08-06新手建站入门教程③ 别名(CNAME)记录和URL转发
  • 2017-08-06网页设计心得 高效编写网页代码
  • 2018-08-23结合实例,总结画线稿时容易出现的几个常见问题
  • 2017-09-05echart主题工具的使用
  • 2018-08-23如何减少操作步骤?我总结了这3个方法!
  • 2018-08-23进阶经验!如何系统的进行改版设计(下)
  • 2018-08-23今年的双11品牌设计,官方首度揭秘背后全过程!
  • 2018-08-23腾讯CDC:设计师必须知道的16句名言

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 网易设计师:帮你学会万能的深度访谈方法
    • 超全面!腾讯出品的交互微动效设计指南
    • 网页色彩对比与调和技巧分享
    • 如何开好需求评审会?36氪产品总监告诉你!
    • 5个步骤实现响应式Web设计方法 与瀑布模式说”再见”(图文教程)
    • 你要的三八节文案来了
    • Google对话式交互规范指南(八):通过确认和应答给予用户信心
    • 想更好地掌控设计,你还需要懂得形状心理学
    • 2018 UCAN 大会官方全纪录——人工智能和新零售环境下的设计产业升级
    • 六招提高网页加载速度的小技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有