网页界面中度色设计 第1篇
Pantone 选出了这款极具生命力的 Living Coral —— 「活力珊瑚橘」 作为2019年的潘通年度流行色。
PANTONE 16-1546 活珊瑚，还代表了现代生活的融合，是自然环境中出现的一种滋养色，同时也在社交媒体中的生动呈现。
潘通色彩研究中心的执行董事 Leatrice Eiseman 在声明当中提到：「 色彩是一个平衡的镜头，透过它我们体验自然与数码的实境，活珊瑚橘色尤其如此。消费者渴望人际互动与社交关系，欢乐的活珊瑚橘呈现出人性化、振奋人心的特质，打动人们的心弦。」
在移动端 UI 的界面设计中，橙色也是一种超级饱和、充满活力的选择，可以在任何社交媒体上流行——因为橙色是在自然界中发现的一种美丽的色彩。
网页界面中度色设计 第2篇
当界面中需要被提示的内容不止一种时，就可以用辅助色加以区分。当界面中主题色占比过大，需要使用辅助色让视觉达到平衡。辅助色与主题色的色相差距通常不会太大，并且在产品中用色不超过30%。
如下图所示，作业帮 App 界面，品牌主色在滚动符等图标、卡片上有所区分时，辅助色青绿色、黄色等可以更好的展示品类区的功能图标等。
网页界面中度色设计 第3篇
色彩影响着用户的情绪和行为，讲究主次之分和情绪影响用户的想法。设计中流传着：色不过三。即在一个界面中不要使用超过 3 种颜色搭配，可以有主色、辅助色、点缀色。色彩本身，可以调整出三种色彩的饱和度、明度的变化用来搭配更丰富的色彩。比如：ANT DESIGN，文章中第四部分会谈到。
网页界面中度色设计 第4篇
空间色彩设计的搭配原则一般是3种，界面中60%是主色，可以运用到导航栏、按钮、图标、标题等关键元素中，使之成为整个App的视觉焦点和色彩联系，30%为辅助色，可以避免界面单一的主色而单调；10%为点缀色，用在一些不太重要的元素。
色彩层次，邻近色的应用，让界面看上去和谐和平衡，360金融将绿色的主色运用到导航栏、图标和插画上，黄色的辅助色运用到按钮上，主次关系处理的非常清晰明确。
网页界面中度色设计 第5篇
互联网App设计，色调一般由主色、辅助色、点缀色为基准来搭配的。一致性的色调界面设计，能给用户始终如一的视觉体验。
网页界面中度色设计 第6篇
在设计与绘画艺术中，将冷暖色分为三种色调：
1 暖色调：红色、橙色、黄色。
2 冷色调：青色、蓝色。
3 中性色调：紫色和绿色相对中性色调。
冷暖色在设计中的应注意其比例、轻重、色环的位置，最后的视觉呈现要符合人们视觉上和心理上的舒适感。
冷色会让人想到大海、冰雪等，让人产生广阔、平静、冷的感觉；暖色则会让人联想到太阳、篝火等，让人产生了温暖、热情的感觉。
网页界面中度色设计 第7篇
明度对比是指色彩的明暗程度的对比，也指色彩的黑白灰的对比。在心理学中，明度对比也称明暗对比或亮度对比。物体受不同明度背景的影响，可以产生不同的视觉感受。灰色卡在白色背景下感觉变暗。在黑色背景下，感觉变亮了。
在明度对比中，黑色和白色是最强的对比组合，而黑色与深灰色、白色与浅灰色是较弱的对比组合。在同一色相、同一纯度的颜色中混入的黑色越多，明度就越低；在同一色相、同一纯度的颜色中混入的白色越多，明度就越高。利用明度对比，可展现出色彩的前后空间感、画面的层次感、体积感等。
明度对比越强，光感越强，界面的表达越明确主题。如下图所示。
明度对比合理，可以让信息层级展现更清晰和直观，提升用户的阅读效率和愉悦感。
视觉设计心理学，明度越低的物体越往后，明度越高的物体越靠前。在进行界面设计时，一般不能将深色卡片悬浮在浅色背景上，不符合用户的视觉体验设计习惯。
如图所示，将白色卡片放在灰色背景上时，会感觉到灰色背景上的白色卡片，界面层次感很明确；微信读书的白色卡片的内容在界面上属于最高层级，而灰色背景给人以后退的感觉。
网页界面中度色设计 第8篇
1. 主色：主色即整套配色方案中最主要的颜色，好比电影、戏剧中的主角，其在整个界面中的位置最明显、清晰、强烈，对页面起着决定性作用。
2. 配色：配色好比电影、戏剧中的配角，与主角关系紧密，对主角起到较大程度的衬托作用。配色在整套配色方案中的作用也是至关重要的，在色彩关系上，往往用来与主色做对比，构成整个页面的色彩框架。
3. 背景色：背景色主要是对主色、配色等颜色起到衬托作用的颜色，也可以说是网页的支配色，它虽然只是作为背景出现，但却往往会决定着浏览者对网站的整体印象。如果背景色鲜艳、亮丽，网站也会给人新鲜畅快的感觉，如果背景色淡雅、恬静，网站的风格也会倾向于温和、素雅。
4. 辅助色：辅助色是指在配色中起到辅助和调和作用的颜色，它可以增加画面的层次，减小主色和配色之间的过渡对比，使整套颜色和谐相融。辅助色常在画面中不同的位置重复出现，这可以起到互相呼应的作用,使页面更加整体、统一。
5. 点缀色：点缀色一般在画面中出现的面积较小，并与主色调反差较大，色彩鲜亮的居多。它适用于配色略显沉闷的画面，用小面积点缀些强烈的颜色，可以起到强调的作用，让整个页面增添轻松和动感。点缀色的面积较小，它的存在并不会影响色彩搭配的整体倾向。
天津联才科技发展有限公司是一家为企业提供互联网系统技术方案和网站建设服务的企业。公司创立于2015年，主要为政府、国企、国内上市公司、国外公司提供专业的品牌服务和技术开发服务。
自2015年成立以来，我们一直在帮助企业实现具有影响力的、行业特定的品牌、官网及软件系统解决方案。我们为企业提供从需求分析、功能规划、交互设计、原型设计、系统运维的整体软件开发技术解决方案。 联才科技始终关注有前景的软件开发集成框架和培养经验丰富的技术开发团队，为我们的客户提供优异的互联网解决方案。
网页界面中度色设计 第9篇
万物复苏的春日，枝繁叶茂的夏季，如果要用一个颜色来形容这两个季节，那么一定是绿色。
绿色代表着自然，清新，朝气，蓬勃。
绿色是生命的颜色。而绿色大家族中的薄荷绿尤以小清新定位，个性独特，辨识度极高。
追波的：Hydroponic Plant App，如下图。
在移动端 UI 界面设计中，绿色在移动端产品设计的应用上。
网页界面中度色设计 第10篇
1. 色彩的鲜明性原则：一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。
2. 色彩的独特性原则：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。
3. 色彩的艺术性原则：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。
4. 色彩搭配的合理性原则：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。
网页界面中度色设计 第11篇
产品界面设计中，不同的内容应该呈现出不同的层级关系。例如，任务与背包间的同级关系，蚂蚁森林与内容间的丛属关系等。
利用同色系、色彩之间的色相差异可非常直观的区分内容的层级关系，同时还可以通过色彩间的强对比突出关键内容。如图所示，蚂蚁森林通过色彩的强弱区分视觉层级，绿色在视觉上层级最高，重要按钮与文字使用绿色，可以让画面内容的层级关系更清晰明确。
网页界面中度色设计 第12篇
使用互补色对比的优点是，可以让画面更具张力，营造出视觉上的反差，吸引用户关注。常见的互补色有红色与绿色、黄色与紫色、以及橙色与蓝色等。因此，在使用互补色对比时，设计师通常需要遵循大调和，小对比的原则，即将一种颜色大面积使用，然后将其对比色局部使用。同时，将明度相同、彩度很高的等量互补色搭配在一起，可以使界面看起来鲜明，如红色配绿色等。黄色与紫色由于明度差距较大，不会产生刺眼的效果，因此黄色与紫色的对比搭配方式也经常被用到。
网页界面中度色设计 第13篇
“紫色，象征高贵的颜色。略带种忧郁而富有魅力的色彩，代表声望、深刻和高雅。中国传统中紫色代表圣人，帝王之气。如北京故宫又称为“紫禁城”。这都是源于古代对北极星的崇拜。在西方，紫色亦代表尊贵，常成为贵族所爱用的颜色。这源于古罗马帝国蒂尔人，常用的紫色染料仅供贵族穿着。”
界面设计中，紫色由温暖的红色和冷静的蓝色混合而成的颜色，是极佳的刺激色。网页运用紫色为主色调，魅力十足，非常符合这个网页设计的定位。
网页界面中度色设计 第14篇
色彩在使用时更多的是基于信息传递、操作引导和交互反馈等目的。理性的选择颜色是关键。
企业级产品设计体系，创造高效愉悦的工作体验
- END -
如若图文资源侵犯您权益，请及时与我们联系，将第一时间做出处理
添加小浪郎（注明来意），欢迎进群交流
网页界面中度色设计 第15篇
从用户的心理学角度思考，界面可以选择使用一些柔和的色彩，调整其色相、饱和度、明度就能搭配出和谐的色彩。比如：首页核心功能图标，使用了不同的色彩，呈现了产品设计的年轻感、时尚感、律动感。
多种色彩来搭配，又保证了整体色彩搭配的和谐、统一感。
网页界面中度色设计 第16篇
蓝色代表着广阔的天空、冷静、诚实、希望与科技、视觉上很舒服的色彩。蓝色给人自由和平静的感觉。在科技资讯、职场等类别的产品界面设计中使用较多，如：36Kr、钉钉 等工具类产品，如下图所示。
网页界面中度色设计 第17篇
冷暖对比网页例图
冷暖对比分析： 以上这几组颜色乍一看感觉鲜艳程度都差不多，但是通过观察它们的数值发现饱和度都有相差，然而明度相近，因此它们给人造成的视觉感受几乎是相同的。该页面冷暖颜色较为丰富，橙和蓝是对比最强烈的补色，其次是倾向不够明显的补色黄、紫。明度不同的两个绿色起到了冷暖视觉的过渡作用。主色调的浅蓝色亮度较高，让页面不易给人沉闷的感觉。 结论： 冷暖对比的应用，通常在休闲娱乐网站、食品网站出现比较多。 将这两个色系的色彩安排在同一画面时，其对比效果极为强烈。通常初学者较容易使两色相互排斥，导致画面色调不谐调。一般我们采用两种调和的方法。
纯度调整 降低冷暖两色纯度。用明度黑、白、灰变化来调整画面的层次、直接使用黑、白、灰色系进入画面搭配，或者加入补色的谐调，也都能很好的起到协调的效果。
纯度调整网页例图
纯度调整分析： 主色调的橙色，添入了少许黑色做渐变背景色，降低了纯度。辅助色的蓝色是橙色的补色，主要起的是使得整个页面过多的暖色降低协调于整体的效果，及背景色的棕色都分别提暗降低纯度。而左上角的黄色则通过提高了亮度来降低纯度。一个页面里应有少量纯度较高的颜色而不至于使整个页面过于压抑，
网页界面中度色设计 第18篇
从色彩感官刺激角度来说，网页的色彩设计主要在于色彩的并置过程。但色彩的并置并不是那么简单的过程，而是需要色彩设计师从色彩学、色彩心理学以及计算机色彩形成的基本原理等请多方面进行理性地分析，然后制定出合理的设计方案。
网页的色彩并不是简单的色彩合成，网页的色彩设计也不是仅仅为用户提供视觉刺激，而因为不同的人有不同的色彩审美观念，会因用户的年龄、性别、受教育水平等请多因素而影响到色彩的设计布局，设计师要充分考虑到这一点。网页的色彩设计不但是一门科学，而且是一门艺术，因而必须遵守其特定的设计规律。
首先，网页的色彩设计要遵从人的视觉习惯，在色彩搭配时应时刻注意眼睛的舒适性，不要用亮度太高或太低的色彩，以在特定的时间段内注视后不疲劳为宜。其次，在色彩设计的时候要尽量满足用户对色彩审美的需求，尽可能地为用户呈现出美观，符合用户需求的色彩配置。
再次，网页的色彩设计是为传递网页信息服务的，即尽管色彩在网页中地位非常重要，但其终究还是一个配角，不能“抢了主要信息的风头”，因此，设计师在色彩选择和搭配的时候时刻要牢记色彩的配角地位。此外，色彩的选择与搭配仍然要注重关注主体用户对色彩的相关喜好。
网页界面中度色设计 第19篇
用户体验中运用了夜间模式这功能，用户喜欢深夜使用手机这种场景。比如：阅读资讯类产品，金融产品等也会选择夜晚进行阅读和使用。
当需要沉浸式的专注工作内容时，建议使用暗黑模式，可以帮助使用者更关注凸显出来的内容和操作。
比如：百度网盘的界面设计，白天和夜晚的使用场景很丰富，因此支持夜间模式很有必要，保证使用者的体验上的舒适感。
和谐的渐变色，美丽舒服，画面丰富，层次感好，可以应用到图标设计上，导航背板上。
网页界面中度色设计 第20篇
1. 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
2. 用两种色彩。先选定一种色彩，然后选择它的对比色，再进行微小的调整。整个页面色彩丰富但不花哨。
3. 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩，而又不花，色调统一。这种配色方法在网站设计中最为常用。
4. 灰色在网页设计中又称为“万能色”，其特点是可以和任何颜色搭配，在使用时把握量避免网页变灰。
5. 在网页配色中，尽量控制在三种色彩以内，以避免网页花、乱、没有主色的显现。背景和前文的对比尽量要大，以便突出主要文字内容。
网页界面中度色设计 第21篇
色彩对于人的大脑的冲击力大于造型。比如淘宝，我们会记忆起淘宝的主色是橙色。
色彩是影响人类视觉思维的重要因素，色彩能直观的体现产品的性格和气质，运用好色彩对UI设计师很重要。