如何在UI设计中运用颜色

作者&投稿:雷娇 (若有异议请与网页底部的电邮联系)
~

颜色和其他东西一样,只有在适度使用的时候才能达到最好的效果。如果你能坚持配色方案中使用的颜色不超过3种,你会得到更好的效果。颜色运用和平衡息息相关。使用的颜色越多,实现平衡就越困难。

本文将分为两个部分:

一、法则篇二、工具篇法则篇60-30-10法则

这是一个室内设计领域中永不过时的装饰技巧,它可以轻松地帮助你完成一个配色方案。60%+30%+10%的比例分配是为了平衡颜色。这个公式妙在它营造了一种平衡感,使眼睛可以舒适地从一个焦点移动到另一个焦点。同时,它也运用起来非常简单。

60%是主色调,30%是辅助色,10%是强调色。

颜色的含义

几个世纪以来,科学家一直在研究颜色的情感效应。除了创造美学,颜色也是情感和联想的创造者。颜色的含义会根据文化和情况而有所不同。这就是为什么你会看到黑白色的时装店。因为他们想要表现得优雅和高级。

Asos电商网站使用黑白配,加上绿色的行为召唤按钮是有自己的考虑的

红色:激情、爱、危险蓝色:冷静、负责、安全黑色:神秘、优雅、邪恶白色:纯洁、安静、干净绿色:新鲜、清新、自然

下图为颜色在不同的文化下含义不同。

灰度优先

我们习惯在设计阶段的早期就开始调整颜色和色调。但是,当你意识到自己花了3个小时来调整主色调的时候,你发现这种行为毫无帮助。虽然把玩颜色很有吸引力,但是你应该避免在设计初期进行这种行为。

相反地,你应该强迫自己专注调整间距和布局元素。这种布局的约束是非常有效的,它会为你节省很多时间。调整间距和布局元素并不是那么无聊。如果你想表达不一样的东西,尝试使用不同的色调即可。

远离纯灰色和纯黑色

多年来,我学到的一个最重要的颜色技巧之一就是避免使用不带色调的灰色。在现实生活中,纯灰色几乎是不存在的。黑色也是同样的道理。(没错,事实上就是要五彩斑斓的黑)

在这张图片中最深的颜色不纯黑,而是#0A0A10

记得给你的颜色添加一些色调。用户会下意识地觉得这类颜色更加自然和熟悉。

相信自然

最佳的色彩组合来自于大自然。它们总是看起来非常天然。根据自然环境来寻找设计方案的好处是可以拥有无数的色板,因为大自然的颜色总是在变化 。

我们只需要看看周围,就能获取灵感。

保持对比度

有的颜色和某些颜色搭配协调,和另一些颜色则会产生冲突。通过色轮,可以很好地观察到颜色相互作用的规则。你应该清楚地了解这个方法,但是不一样要亲手去做。

获得灵感

当我们谈到UI参考的时候,Dribbble是一个很好的选择。Dribbble也有颜色搜索工具。所以,如果你想要针对某个特定的颜色进行视觉研究,可以前往以下网址:dribbble.com/colors

视频、印刷设计、室内设计、时尚……有很多的启发灵感的事物。要对各种形式的色板保持灵敏的感觉,并且把看起来有趣的所有东西存下来。

我会从韩流的视频短片中获取颜色灵感

工具篇

为了节省大家时间,下面整理了一些2017年非常好用的色板工具。它们会为你节省大量的时间。

Coolors.co

我最喜欢的颜色选择工具。你可以简单地锁定颜色,并按住空格键生成色板。Coolors.co还支持上传图片,从图片中提取色板。Coolors.co酷在,你不仅仅有一个结果,相反地,你可以通过选择器,调整你的颜色,获得很多配色方案。

链接(无需翻墙):

Kuler

这款来自Adobe的工具已经陪伴我们很长时间了。它可以在浏览器或桌面应用中使用。如果你使用的是桌面应用程序,那你可以将配色方案导出到Photoshop中。

链接(无需翻墙):

Paletton

它和前面一款工具Kuler相似。不同之处是,它不限于5种色调。当你已经确定主色调,想要调整辅助色的时候,这是一款很棒的工具。

链接(需翻墙):

Shutterstock Lab Spectrum

你可能会问:如果我想用我选择的颜色搜索图片呢?那么,Shutterstock旗下有款叫作Spectrum的工具可以满足你的需求,你可以通过特定的色调搜索图片。你甚至不需要称为会员,因为即使是带水印的小预览图片已经足以生成色板。

链接(需翻墙):

Tineye Multicolor

如果你想搜索照片上的色彩组合,甚至确定各个颜色的比例,那么Tineye可以帮助你。这个网站使用的数据库,包含了1000万张来自Flickr的Creative Commons(知识共享,一个非营利组织)图像。

链接(无需翻墙):

最后的想法

色彩是一个非常难以掌握的概念,特别是在数字时代。上面提到的方法和工具可以帮助你找到合适的颜色。创造令人惊叹的配色方案的最好的办法是练习。所以开始把玩颜色吧。

Medium

译文地址:紫豆子设计站(公众号)

译者:紫豆子




透明背景png在UI设计中有何妙用
设计半透明背景图层,并在此基础上添加小窗户,通过调整透明度,突出特定部分,吸引读者注意力。例如,下面的设计通过在纯色背景上挖出文字形状,集中视觉焦点,使人物形象更加突出。05. 内容醒目 设计中,如包装、封面等,使用透明图层可以增加吸引力。例如,下面的杂志设计在透明清晰的封面上添加白色文字LOGO...

UI设计的工作内容都有啥??
UI=User Interface,即:用户界面。UI设计,也叫用户界面设计,是指对软件人机交互、操作逻辑、界面美观的整体设计。【UI应用场景】我们日常生活中所用到的:手机、电脑、电视、车载系统、iPad、ATM机、工业中控系统...只要是带有电子屏幕的显示设备,都有需要UI设计。【UI实际意义】UI\/用户界面,就是我...

ui设计师如何实现作品的交互动效
ui设计中一根线,一像素,色彩饱和度的细微差别,一个小渐变,一个字体的选择,画布的大小,用笔的粗细,这些小细节,虽然不是人人都能说得出,但是能第一眼“看在心里,感觉到骨子里”,所以就算不说,细节也是能让任何人第一时间感觉到的,别忽视每一个小细节,它说不定就是你成功的堡垒,也是一有机会就让你失败的利箭...

UI设计怎么做用户需求分析?方法有哪些?
这个领域的方法包括日常研究,卡片分类,纸面原型和其他一些参与式的设计活动。一旦我很好的理解了我的用户的专业知识和信仰,我就可以开始深层次探究迎合他们需求的内容,功能和产品。这些可以在与研究参与者密切合作中产生潜在设计解决方法时完成,当然也可以在设计设想初期接受他们的真实反馈。开始动手 当调...

ui一般用什么软件做
二、Illustrator Illustrator是矢量图形和插图软件。它主要用来做页数多的宣传品,也可以完成一些简单的图像编辑。复杂的图层设计会先用Photoshop完成,再导入Illustrator进行排列。它是高阶UI设计师需要的技能,也是在UI设计中比较常用到的软件。三、Indesign Indesign主要用于图书和讲义的排版,也是UI设计师经常...

透明背景png在UI设计中有何妙用
下面的这个网页设计,如果要通过他的配色方案和几何形状可以联想到它的LOGO,你必须要创建一个半透明背景层和图形要素。11. 强调特定的范围特别是使用了文字文本和其他设计要素的生动的半透明彩色背景层,可以更好的强调。在下面的这个广告设计中,灵活运用半透明红色图层,和黑白的人物图像做出对比,将图像中的SALE强调出来...

UI设计中,弹窗设计规范总结
1.2 模态-ActionbarActionbar一般被设计用来向用户展示多个功能按钮选择。当功能按钮数量很多的时候,文字列表的形式不适合显示,此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。1.3 模态-浮出层(Popover)是当用户轻点某个控件或页面中的某一...

移动应用UI设计——导航设计
跳板式导航的特征是,登录界面中的菜单选项就是进入各个应用的起点。在国内市场上跳板式设计应用很用,如下图的第一个“百度手机卫士”(图1-3)它主要通过功能来展示菜单选项,这种网格布局清晰的把各个功能区域进行划分,能让用户快速找到入口并点击操作。(图1-4)的云图TV,它是一个免流量的手机电视,他的模块相对...

UI设计怎么做用户分析?具体方法?
小心不过早地聚焦在交互层和视觉层上,不要过早地陷入细节的讨论中,比如使用列表或卡片,使用圆圈还是方块…例如,灰机的一位用户界面同事,他的产品经理给他的设计评价是:着色产品原型,缺乏创意。之后,工作人员发现,并非UI同事能力差,而是需求沟通时没有方法,更多在聊原型图设计细节。造成无法深入...

移动端UI\/UX设计有哪些必知的设计要点
不过在英文界面中,有一个问题需要注意,就是要尽量克制地使用大写字母。以TheWeatherChannel为例,“SUNNY”这个词只有5个字母也就算了,但是如果去是其他的天气所用字母数量较多,视觉上可能会相当的累赘。在中文的字体设计中也要尽量避免文案过长、过于复杂的问题。所以,此处应当注意两件事:排版和内容...

平山县18771434837: 怎样在产品设计中合理运用色彩元素 -
南兰恩格: 在产品设计中色彩的运用,关键在于产品的特性所定,不是随意地追求大面积的灰色来搭配小面积的纯度较高的色彩.要根据产品的用途、对象来选择色彩,有的产品需要对比强烈的色彩但不能太花哨,有的产品需要文雅而简洁的色彩,色彩设计非常讲究感觉,能提高产品的吸引力.总之,产品设计色彩的运用最讲究的是美观实用.

平山县18771434837: UI设计三大要素是什么? -
南兰恩格: UI设计的三大要素: 1、色彩 色彩是绝大多数设计给用户传递的最显著的视觉元素之一;色彩本身常常就能够创造出独特的情感体验,即使没有其他的元素.任何可见的色彩,呈现在任何人面前,几乎都能够获得反馈.这也使得色彩在设计中有...

平山县18771434837: ui设计中当页面颜色多时怎么突出焦点 -
南兰恩格: UI设计中一般是有一个主色调,然后用与主色调相反色调的颜色来突出焦点.

平山县18771434837: 游戏UI图标的配色该怎么配 -
南兰恩格: 色彩学理论研究的是纯色之间的关系,以及他们混合的效果,我们将研究一些使用最广泛的色彩关系或配色方案,同时,给出它们在当前网络应用中的实例.设计一个配色方案通常是决定设计中将哪些颜色放在一起,能够产生最佳的视觉效果,这也是良好配色方案的第一步.接下来的每一张截屏中,调色板显示了截屏中使用的主要颜色,纯色色调在色盘中也被标记了出来,一边显示色彩关系.色彩能使用户注意力集中并引导着用户专注地使用你设计的界面.伴随着日常生活中事实存在的各种干扰还有烦躁情绪,让用户专注于你设计的界面可能是非分之想.但是,用色彩将他们拉回到你的设计和内容中去,并与你的设计作品产生共鸣,则是设计师必备的一种技能.

平山县18771434837: 标志设计中颜色的运用 -
南兰恩格: 1、用一种色彩.这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将 色彩变淡或则加深),产生新的色彩 2、用两种色彩.先选定一种色彩,然后选择它的对比色 3、用一个色系.简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝. 4、用黑色和一种彩色.比如大红的字体配黑色的边框感觉很“跳”. 忌讳的是: 不要将所有颜色都用到,尽量控制在三种色彩以内.

平山县18771434837: UI设计注意事项有哪些? -
南兰恩格: 第一、布局要简洁这点和网页设计的理念比较接近,无论是考虑到用户的浏览体验还是操作体 验,都应当尽量将整体的布局设计简单化,让用户可以一目了然.以左树右表的结构布局而言,左侧的操作区域功能名称要准确,层级不应太 繁...

平山县18771434837: 有没有好看的UI配色 -
南兰恩格: 现在都流行用鲜亮的颜色

平山县18771434837: 做一个ui的界面设计给了一个色板怎么用 -
南兰恩格: 应该是按照色卡对颜色 UI即User Interface(用户界面)的简称.UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计.好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点.

平山县18771434837: 『UI教程』今天给大家讲解下UI到底做啥 -
南兰恩格: UI到底做什么,要从UI接到的工作流程来说——产品/交互/设计.也就是说一般我们接到的是交互稿. 这时候UI看到一个交互设计,需要考虑的是: 1、这样的排布是否合理(比如960的屏和1136的屏幕是否都可以容下足够的设计关键信息) 2、...

平山县18771434837: APP软件开发UI设计需要注意哪些细节 -
南兰恩格: 细节!我不知道你说是哪些的细节,也不知道你说的app具体是属于哪种,工具类还是内容类?工具类的app,个人觉得主要是各种按钮尺寸和布局位置,避免用户错误操作和功能不知道在什么地方.内容类的app的话:各种内容的呈现是否会对用户产生视觉上的错误的方面进行细节的处理,流程中是否有对流程干扰的因素,比如弹框类.如果必须要有什么东西,如弹框,设计时需要通过处理来弱化对流程的干扰.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网