IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

如何在界面设计中“色”诱用户?

Catherine • 2017-06-05 08:22 • 交互设计

在设计过程中,如何最佳地搭配颜色,诱导用户视线?是不是在为图标选择什么颜色而烦恼,反反复复地尝试,总不能达到想要的效果。是不是总在羡慕“别人家的设计”,而苦于无从下手?其实所有的颜色都有些小规律,今天@Micu设计 就和大家聊一聊“色”。

文章目录[隐藏]

  • 从感受抓到色的重点(焦点)
  • 原则一:色的大小位置
  • 原则二:严谨而有节奏
  • 如何用“色”?
    • 互补色平衡法
    • 冷暖色平衡法
    • 深色和浅色的平衡
    • 花色(图案)与纯色的对比

在设计过程中,如何最佳地搭配颜色,诱导用户视线?是不是在为图标选择什么颜色而烦恼,反反复复地尝试,总不能达到想要的效果。是不是总在羡慕“别人家的设计”,而苦于无从下手?其实所有的颜色都有些小规律,今天@Micu设计 就和大家聊一聊“色”。

作者微信公众号:MICU设计

如何在界面设计中“色”诱用户?

在色彩的应用中,大家对颜色都会有不同程度的理解,从而影响到设计页面的表现。

熟练地将色彩搭配运用到设计中去,会让设计更为稳重和得体。优秀的设计它的色彩搭配非常的舒服,令人赏心悦目。那我们怎么才能搭配出最贴合设计的色彩更好呢?

为何“色”?因为“生理”上有需求!

既然是平面设计,视觉刺激是最直观的。比如当下流行的涂色书,为啥普普通通的图案能展现出那样美丽的效果,就是因为色,因为合理的颜色搭配。

再比如好的天气是蓝色,而灰色的天气就雾霾的天了。

那么马路边那些亮着红灯的区域,那你想到啥?我就不说了。

所以在研究感官是为了从生理上得到“我们看到什么样的色彩时”会做出什么样的反映。

用户虽然没有上过色彩的相关课程,但是他们仍然能很直观地看出什么是符合他们审美的。

同样颜色的选择不仅诠释了设计的表现方式也营造了用户对产品的购买需求。需要从中满足用户最直观的生理需求点。

我们就来看看下面的几种方法吧,怎么将用户的欲望勾引起来。

从感受抓到色的重点(焦点)

我在设计过程中总结的经验,画面中主要色彩不要超过三种,表达出主题即可。

太多的颜色会使页面杂乱无章,干扰主要信息。

这是12306的网站,颜色用的数量我是没有数过来,重点在哪里?想要凸显的信息太多,还总是闪闪闪。如果处处是焦点,那就真的没焦点了。用户最主要的是买票,扫来扫去地满页面地找,这不是好的用户体验,有些反智!!

如何在界面设计中“色”诱用户?

再看看其他互联网公司做的三方刷票网站。为毛一下就这么简单~

设计有主色彩配色,色相构成是统一的配色,由绿色为色相支配、统一了画面的配色。

如何在界面设计中“色”诱用户?

疑问:叠加效果,能尝试出好的颜色吗?

很多同学在设计初期不知道选用色彩定位,常常用叠加来尝试效果,结果发现越来越没有头绪。

色彩叠加本身确实很好,一般用海报等背景上比较多,不宜在交互的页面。盲目使用色彩叠加,会使画面变得复杂沉闷。表达上含义模糊,用户会觉得杂乱,无法找到需要找到的信息和功能。可见,叠加的效果不但没有加分,反而减分。

疑问:信息量or简洁,如何取舍?

简洁、准确是色彩核心标准,简单明了的色彩能快速被用户解读。

不要奢望用户能够在一个页面上停留太多时间,一页显示N多信息时代早就过去了。

疑问四:如果通过色彩气氛,诱导用户?

好的色彩搭配和选择能激发用户购买而定场景感和购买欲望。

比如暖色能激发用户的食欲,在消费内的软件中经常用到(淘宝)。蓝色能给人带来平静,大部分的阅读软件则用到了蓝色(知乎)

在界面色彩要学会做加减法

原则一:色的大小位置

大块的色彩烘托气氛和主题比较稳定,小块的色彩用于点缀,丰富画面。

统一颜色让用户认准店面。

首先需要在不同的界面框架中统一招牌色,保证产品给用户能一目了然的找到这个店。

那么我和大家介绍一下一款不为人知的软件“BIG”。首先名称非常的霸气,易于用户记忆和传播。整体采用了朱红色贯彻了整个产品的设计。不管是LOGO还是菜单栏非常的统一。让用户在使用完后对这个产品有了非常统一的印象。

如何在界面设计中“色”诱用户?

其实它是淘宝APP发现页面中内置的一款软件,所以说招牌色多么的重要,在这么丰富的软件中怎么让用户一目了然,用一次就记忆深刻!

原则二:严谨而有节奏

在界面中的可以运用相似性与来进行色彩呼应,这样的画面更有节奏感和舒适性。

运用颜色渐变穿插,让界面平衡在一个频率上。

如何在界面设计中“色”诱用户?

在页面色彩关系的处理中,我们需要注意重色的运用,它对画面的平衡有非常大的作用。

下面是浅色菜单栏和深色菜单栏的区别。我们可以发现,有重色后的页面,显得更为稳定舒服。

如何在界面设计中“色”诱用户?

原则三:在相似中,找呼应

我们来看一组练习,找找色彩的呼应性。

如何在界面设计中“色”诱用户?

1. 定义了色彩的基调,找到了形象店面色。

在设计中我们只采用了单一的颜色进行了设计,使用大小关系区分了功能的主次关系。视觉上比较平衡但是页面显得单调。

2. 为了让用户聚焦在主要的功能上,在主要功能上使用了补色对比。这种方式比造型上的区分更为强烈。

3. 但在采用过多的色彩会使界面没有秩序性。这种色彩的搭配会给用户一种混乱感。

4. 用色上不仅需要聚焦,还有讲究颜色的呼应性。同类色彩会彼此呼应,聚焦点只要在主要的点上。

所以说注意彩色的关系与功能的区别及其重要。这样才能把握好色彩的节奏感。

如何用“色”?

用“色”,达到平衡。

人们渴望生活的稳定和安定,平衡感能满足用户的视觉需求。如果在界面设计中运用一对或多对的平衡色彩能让用户从心里需求上得到满足,这样的设计能更容易让用户具有亲近感,给用户留下愉悦而舒服的美感。

在平衡色彩中的定义并不是面积相等就叫平衡。要讲究主题性中找到色彩的平衡关系,以及版式等元素中的协调性。

一般在色彩运用中的“平衡色”有五种类型:

一:互补色之间的平衡

二:冷色和暖色的平衡

三:深色和浅色的平衡

四:有色彩和无色彩的平衡

五:花色与纯色的平衡

互补色平衡法

在界面设计中,使用互补色彩的对比是最为强烈的,最易传播的。

这种色彩能使用户的视觉产生强烈的刺激,情感浓烈,给人留下鲜明的印象。这种方式是。适合在夸张的、张扬的场景下使用。

但这种颜色用的太过于平凡容易造成用户的视觉疲劳。给人一种不安定的感觉。那么在使用这样的搭配方式时需要控制使用的位置和信息的面积了,核心的地方可以这样去使用。

主要的三对互补色:红绿、蓝橙、黄紫。

我们可以看到很多APP的icon为了吸引用户的注意就用到了强烈对比的互补色。

番茄快点、QQ空间、相机360

如何在界面设计中“色”诱用户?

运用这种大胆的平衡色能使整个风格主题格外的鲜明。

这种平衡色彩最为强烈的情况就是使两个色相的饱和度都调整到最高,面积比例也在1:1。此时的气氛最为浓烈,冲击感最强!

我们可以看到代购现场这款APP的LOGO设计采用了1:1的色彩关系比以上的APP icon更为突出。所以在应用市场中更为容易让用户找到,达到了品牌的传播性。

如何在界面设计中“色”诱用户?

冷暖色平衡法

冷暖色是人类在大自然生活总结出来的颜色规律。我们看到红色、黄色让人联想起燃烧的火焰,太阳等,是一种温暖的感觉。这样的颜色就定义为“暖色”而蓝色就然我想起了水、冰雪,是冷的感觉。所以就是“冷色”。

冷暖对别色是自然平衡的规律,可以在设计中大量使用,这样的配色会使作品非常的出彩,不显单调。

如何在界面设计中“色”诱用户?

在设计中,冷色与暖色的平衡是界面设计中最为广泛的使用方法,效果也非常的出众。

色彩好比就是阴阳太极,冷与暖的两级平衡还原了生活中的和谐。冷暖色彩搭配的方法基本没有啥缺点,使用在设计中,技巧性比较多,对设计的细腻感受要求比较高。

如何在界面设计中“色”诱用户?

深色和浅色的平衡

在色彩中颜色采用浅色,柔和而轻盈,也会显得不够稳定。采用深色,会显得厚重高级,但容易沉闷。在界面设计时,在主色彩是浅色的情况下,适当补充些深色,能更好的平衡画面。

在锤子手机界面中为了让页面平衡,首图展示了黑白两个机型,让页面更为稳定平衡。

如何在界面设计中“色”诱用户?

花色(图案)与纯色的对比

在运用色彩时候怎么能让设计更为绚丽出彩呢?但有不要过花乱呢?

这时候就要注意了,花色与纯色需要有对比,色彩比较鲜明而花的一般运用在核心展示上,而背景需要整体。

QQ开屏就很好的突出了产品的品牌特色,让用户过目不忘。这种设计方式也适合运用在banner等设计中。

如何在界面设计中“色”诱用户?

好的设计不应该永远是“人家的设计”,看得不够多,琢磨不够透,练手太少。多临摹10遍,狠狠心吧。

原文来自:优设

作者:MICU设计

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/32386/

logologo设计UI交互产品产品经理图标场景微信用户用户体验用色界面设计经验视觉视觉设计设计配色配色方案
赞 (0)
CatherineCatherine
0
生成海报
UE干货:Material Design App 实战经验分享
上一篇 2017-06-05 06:23
用户体验设计师必备的4种UX文档
下一篇 2017-06-05 09:28

相关推荐

  • 微信10个交互细节问题的探讨与重设计 交互设计

    微信10个交互细节问题的探讨与重设计

    文章分析了微信交互设计中的几个细节问题,与大家分享,希望能够给大家带来一定的启发。A:「朋友圈老是有红点,我又有见到红点不刷不舒服的强迫症,只好不停地去刷,时间就这么过去了T_T」

    B:「那你关了呗」

    A:「关了更会想,虽然没提示,但是不是有更新呢……于是刷得更频繁了」

    BCD:「……」A:「我给朋友晒结婚证的朋友圈点了赞,然后一整天都在收到别人点赞和评论的提醒。」
    B:「说明你朋友人缘好呗」
    A:「可是,不停地看到红色数字,点进去却发现全是别人之间的互动,自己发的朋友圈无人问津,会很失落的」
    ABCD:「……」

    2017-05-10
  • 转场动效的5个核心规则 交互设计

    转场动效的5个核心规则

    本文作者通过大量的案例分析和过来人的经验,总结了优秀转场动效的5个核心的规则。enjoy~

    2017-04-27
  • 《设计之下》之交互总结 交互设计

    《设计之下》之交互总结

    作者:ManUx 拖了很久的读书笔记总结,总算稍稍总结了一下。有些内容都已经开始模糊了,每次重新再看的时候,又会发现跟之前不一样的理解。这篇读书笔记主要是对《设计之下》交互部分进行总结,书中基于搜狐新闻客…

    2015-08-18
  • 为用户操心!如何用预期式设计保持用户体验简单易行? 交互设计

    为用户操心!如何用预期式设计保持用户体验简单易行?

    现如今,用户大多深陷于碎片化的时间和过量的信息,所以用户更加青睐简约而现代的网页设计。“少即是多”是这类网站的设计哲学,少而精准的内容设计方式和内容策略让访客从沉重的信息压力中解放出来。 虽然做减法的方…

    2015-11-19
  • 微信热点

    「Sketch | 译文」用共享样式创建文本系统

    原文作者:Bunin Dmitriy来自:Medium阅读全文大约需要 6 分钟相信字体样式管理对很多新人设计师而言并不是一件容易的事,甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯,这不但增加了设计项目的维护难度,更主要的是随着项目的不断膨胀,你项目中的排版会变得杂乱无章、极不统一。其实使用Sketch来进行字体管理并不复杂,今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章,不到十分钟可以让你对文...

    2018-04-14
  • 微信热点

    交互设计 | 做设计你怎能不了解心理学?

    以用户为中心的设计7个原则:(1)应用存储于外部世界和头脑中的知识(2)简化任务的结构(3)注重可视性,消除执行阶段和评估阶段的鸿沟(4)建立正确的匹配关系(5)利用自然和人为限制性因素(6)考虑可能出现的人为差错(7)最后选择,采用标准化今天分享的【主题】什么是无形的设计?【Giver】IHan,自由设计师有形的通常是指硬体的设计,所以像是越来越小的晶片或者你可以做曲面的屏幕之类,那无形的话通常是指它的一些背后的一些科技的发展,或者是...

    2018-05-02
  • 微信热点

    智能语音交互设计 1 — 总览篇

    大家好,从本周开始会进行Conversational AI Design Newsletter编写。希望把一些现有的语音交互的研究成果和一些关于Conversational AI的方法收集起来分享给大家。source: Pinterest第一篇 — 总览篇语音助手(Voice Assistant)主要由几种重要的技术组成:自动语音识别系统(ASR),自然语言处理(NLU),和机器学习(Machine Learning)。ASR类似于我们...

    2018-02-05
  • 3种基本方法,引导用户正确操作 交互设计

    3种基本方法,引导用户正确操作

    作为一名产品经理,当人们使用你的产品的时候,需要尽可能避免他们犯错误。我们应该留心用户可能犯错误的地方,在合适的地方给他们一个温和的推动,以确保一切都能正常进行。(不要让用户认为自己被指使着做什么事,至少不要用被认为是“粗鲁”和“侵扰式”的)

    2017-05-31
  • 十二条动效体验原则 交互设计

    十二条动效体验原则

    如果你想要了解更多背景信息,建议先阅读我的前一篇译文《动效的基本常识》,其中介绍了动画与动效的差异、即时与非即时的定义、动效提升可用性的四种方式(可预期、连续性、表述性、关联性)、以及理论、手段、属性与值之间的关系。

    2017-04-28
  • 人工智能时代,给设计师的 3 个建议 交互设计

    人工智能时代,给设计师的 3 个建议

    过去一年,和人工智能相关的新闻铺天盖地。身为设计师的你可能会问:人工智能和我的日程工作有关吗?我应该为此做什么准备?Design will be less about delivering on a user’s request, and more about responding to the needs they haven’t expressed yet.
    (未来,设计会更多地去响应用户还没有表达的需求,而不是去为了响应用户主动提出的需求)「Alexa,把客厅灯关了,把我的床头灯开到一半的亮度」
    「Alexa,再买一袋我上个月买过的那款猫粮」
    「Alexa,我今天早上的会议几点开始?」

    2017-05-07
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress