UI设计中的3C:色彩,对比度,内容

用户头像
北京/教育工作者/5年前/348浏览
UI设计中的3C:色彩,对比度,内容

有许多因素会影响设计项目的结果。在网站或移动应用程序的界面上工作时,设计师不仅要考虑美感,创造力和唯美主义。

有许多因素会影响设计项目的结果。在网站或移动应用程序的界面上工作时,设计师不仅要考虑美感,创造力和唯美主义,而且还应考虑人们如何看待结构和内容以及对其进行响应的方式。今天,我们将讨论界面设计中“3C”的神奇公式,这些方面起着巨大的作用,并且在使UX成为积极的和解决问题的过程中,对使UI变得有用和直观具有极大的影响。因此,让我们谈谈颜色,对比度和内容。

颜色

在视觉艺术中,色彩似乎是一切的灵魂,艺术家将其吸入到创作中。实际上,颜色就是力量。它可以在眨眼间改变图像的心情。它可以鼓励,警告,呼吁,突出显示等等。它可以支持这些词,反之亦然-窃取他们的力量。它可以毫无表情地分享情感。它可以成为掌握大师的强大武器。


在UI设计领域,颜色是获得有效结果的关键步骤之一。实际上它是一个多功能且多样化的工具,能够同时满足多种需求:

–支持可识别性和品牌知名度;

–支持可读性;

–加强号召性用语;

–满足审美需求;

–加强导航;

–增强直观的互动;

–美化视觉解决方案;

–创造清晰和谐的风格。

重要的是要记住,无论如何,即使是最冒险的颜色匹配和混合,也应该看起来很干净。清晰度提高了可用性,支持了可读性,并使所有颜色都发挥了最大作用。

谈到界面,其目的不仅是传递视觉消息,而且还可以实现轻松而成功的交互,一种检查解决方案的好方法是对已完成屏幕进行黑白外观。观察它,您将快速了解那些必须引人注目和功能正常的元素是否像这样正常工作或迷失了颜色。不要忽略这种检查设计效率的简便方法:它将揭示无效的组合,并容易显示出色盲用户界面的潜在问题。


还必须提及的是,颜色的选择和组合具有很大的心理潜力:它们能够增强网站的信息和内容,从而营造适当的氛围。心理方面,刻板印象和文化背景使颜色本身成为强大而有效的因素,使设计师能够传递数字产品的想法,目标,性质和心情。

创建界面绝不是纯粹的创造力。为用户提供产品的行为将治愈他们的痛苦,使他们的生活更加幸福。因此,从UI的颜色选择和用法的角度来看,设计人员应始终记住该界面应高度可用并且清晰。颜色选择的所有最细微方面都应提高可用性,实用性和协调性。使用类别的颜色编码,提供颜色标记,使用颜色来改善和加快导航速度-借助强大的颜色功能,可以使许多方面变得更加高效和以用户为中心。

对比

对比度是影响页面视觉层次的关键因素之一。它使设计人员能够以通知用户哪些交互点很重要而哪些交互点是次要的方式呈现布局。对比度可有效吸引用户的注意力并将其吸引到特定元素,从而支持页面或屏幕的直观导航和可用性。

对比度可以基于UI元素的不同功能,包括:

–颜色

–尺寸

–形状

–方向


关于对比度,经常想到的第一个想法是黑色和白色。在没有阴影和多种颜色的情况下,单色图像使用对比度作为表达潜能的主要推动力。而且在用户界面中的工作方式相同。与艺术品或摄影作品相比,对比度不仅会影响美学效果,而且还会对版面的可用性和导航性产生重大影响。因此,明智地使用对比度是使网站和应用程序易于使用的强大方法。

当然,这并不意味着只有黑白UI是最有效的。当全球范围内的用户呈现出如此多样的愿望和需求时,限制太多是不明智的。但是,前面部分已经提到的“黑白”测试非常有帮助。设计人员应记住,色彩缤纷的界面在不同的屏幕和分辨率下看起来可能会有所不同。此外,低对比度可能会使该界面难以用于存在色盲等健康问题的人。

设计师通常必须回答的关于颜色和对比度的第一个问题是选择哪种通用配色方案:应采用深色还是浅色?从这个角度来看,应该考虑几个重要方面:

清晰度:这方面应包括用户清楚地看到和区分屏幕或页面上所有必要细节的能力。配色方案和组合应支持简单直观的导航,并使布局中最实用的元素脱颖而出。如果不考虑或未正确测试这方面的情况,则可能导致产品在屏幕上完全混乱,使用户看不到他们真正应有的功能。当您在模糊模式下查看屏幕或页面并检查是否可以轻松,快速地观察到所有重要内容时,检查它的方法之一就是被广泛使用的“模糊效果”。

可读性:用户轻松阅读文本的能力。如果应用程序或网站是文本驱动的,则此方面尤为重要:可读性差会导致用户丢失关键数据或使用该产品时感到莫名其妙的紧张感,因为他们一直在努力应对文本,这需要花费大量的精力才能完成。缺乏可读性可能是即使使用诱人的产品也无法吸引用户的一个严重原因。


辅助功能: 产品覆盖尽可能多的人的能力。这意味着“使用或不使用”的决定应主要基于用户的需求和愿望,而不是基于其身体能力。配色方案问题是影响此方面的主要因素之一。设计师应考虑不同年龄,特殊需求,残疾的用户,这也可以确定背景和布局元素的颜色选择。

响应能力:产品根据所使用的设备灵活地转换布局的能力。这对可用性至关重要,因为在高分辨率专业显示器上看起来时尚,引人注目的和清晰的外观,可能会在小尺寸的低分辨率屏幕上变成视觉模糊的效果。当然,配色方案和对比度等级首先会影响这个问题。

环境:为用户可能会经常使用的颜色环境 选择合适的配色方案和背景类型。就在自然光下而言,深色背景确实可以产生反射效果,尤其是在平板电脑和智能手机通常使用的光泽屏幕上。相反,就经常在光线不佳的环境中正常使用而言,深色背景会使光线远离屏幕,这对导航和可读性有不良影响。因此,颜色组合,对比度和阴影问题在这里引起了很大的关注。


内容

有各种各样的内容类型可以围绕文本,图像和视频进行全局组织。让我们分别看看它们的作用。

图片

图片在可用性中起着很大的作用:由于绝大多数用户是视觉驱动的,因此图片成为获取有关网站或应用程序基本数据的关键点。图像代表了内容丰富而又富于情感的部分。详细程度和功能级别允许将用户界面中的图像分类为几个类型,其中:

–照片:这些照片可以是创建适当心情并设置消息的主题照片,演示照片,电子商务网站上项目的照片,博客的标题照片等。

    

–插图:以不同的样式和复杂程度完成的自定义插图代表了UI设计中的流行趋势,因为它们看起来既具有信息性又具有原创性,从而使设计在竞争中脱颖而出。

–大标语:主要用于网页设计中,它们是大图像,通常是在交互的最初几秒钟中引起用户注意的第一个视觉元素;他们通常以有吸引力的视觉方式呈现资源的主要内容。


–图标:这些是很小但有意义的象形图,可提供信息,并支持信息提供者和收件人之间的数据交换–当复制带有字母或字符时,图标通过图像传达图像,该图像与现实世界的对象相似。图标在提供清晰直观的导航中起着关键作用。

–吉祥物:通常是个性化的图像,在大多数情况下,它们代表品牌,产品或服务的身份,因此通过所有应用程序或网站以及品牌商品和促销活动而成为其象征性约定。吉祥物既可以增加互动的积极性,又可以提高品牌知名度。

–视觉识别元素:这些是品牌的各种视觉标志,例如徽标,品牌名称和口号的自定义字母等。


文本

就用户界面而言,文本是成功执行的关键功能之一。

考虑到网页相当有限而移动应用程序屏幕具有可用于交互元素的空间同样非常有限的事实,因此文本应采用精心设计和专业的方法。在许多情况下,设计师都是设计方面的专业人士,他们很难解决适当的文字撰写问题。

这项工作需要设计师掌握额外的特殊技能和知识。必须说的是,其中很多人确实是这样,认真研究创建文本的技术和方法,这些信息将使用户受益并吸引用户,同时将支持应用于屏幕的所有视觉设计解决方案。


解决此问题的另一种方法是让专业撰稿人参与该过程。无论采取什么方式,这方面最重要的事情就是找到创建文本的方法。由于文本是UI设计不可或缺的一部分,因此我们认为文本应与布局的任何其他部分支持相同的哲学:放在屏幕或页面上的所有内容都必须具有功能性和针对性。一切都应该为用户工作。

在应用程序或网站中实现的文本可以并且应该:

–通知

–交流

–启用互动

–增强导航

–诉诸感情

–参与情绪

–创建语气和声音

设计人员创建任何类型的界面时都应牢记的另一件事是,文本是设计的另一种视觉元素。以及图标,字段,按钮,插图,切换按钮等,它实际上占据了屏幕或网页的一部分,就像其他任何图形组件一样,并影响了应用程序或网站的总体风格。这意味着其丰富的内容和视觉效果都将显著影响文本。这是外部和内部的相互支持。

有效文本的成功直接取决于诸如字体的选择,背景,拷贝位置之类。所有提及的方面都会极大地影响可读性,因此,如果处理不当,即使文本具有很高的意义,也将失去充分利用其潜力的机会。


根据上述所有内容,专业撰稿人可以在设计过程的某些阶段中为您提供很大的帮助:

-创建呈现用户角色和用例的文本:由专业作家根据从用户研究中获得的信息完成,这些类型的文本可以更有效,更集中,更简洁,这在团队合作方面尤其重要;

–为号召性用语创建文本;

–为介绍屏幕,教程和工具提示创建文本;

–为屏幕和网页创建说明和通知;

–为目录或菜单位置创建文本;

–为登录页面创建引人入胜的文本;

–创建商品说明等的模板。


视频

视频内容的常用类型:

–简介视频,通常会提供有关公司,产品或品牌的第一眼见解,并显示用户可以获得哪些好处

–产品演示视频,详细介绍了产品的功能和优势,告知了交互的特殊步骤,并展示了产品解决问题的潜力

–登录页面视频,可增强信息,从而将用户吸引到页面上提供的特定号召性用语

–视频证明书,显示出对公司,品牌或产品的信任和忠诚的原因和迹象

–娱乐性和教育性录像带,引起了人们的广泛关注,并经常介绍病毒式营销的材料。

所有提到的类型都可以有效地用于营销目标并提高品牌知名度。富有创意且引人入胜的视频是一种吸引客户注意力的好方法,也是一种可以迅速,明亮地告知客户的可靠方法。视频可以同时激活多个感知通道-音频,视觉,声音,并且通常以讲述故事的方式进行。所有上述提到的因素组合都倾向于使演示更加生动有趣,尤其是基于高质量的图形设计和动画的情况下。人们每天都充斥着大量的各种信息,因此大多数人还没有准备好花很多时间来学习产品或服务,尤其是新的产品或服务。在这些情况下,视频可以成为动态,信息丰富且有吸引力的通信方式。


在检查了用户友好设计的三个核心方面之后,不难看出创意过程包括设计师必须考虑的多个问题。没有通用的解决方案:对于每个项目,必须根据用户和市场研究以及全面的用户测试来做出决策。为了使用户感受到魔力,设计师必须找到3C的组合,它可以针对特定用户的问题和业务目标发挥最大的作用。


2
举报
|
5
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
UI通用设计素材1
【新年UI图标】会员icon
【新年UI图标】影音icon
【新年UI图标】珠宝icon
新拟态风格 UI设计组件库
【新年UI图标】30个图标
高级表盘系列UI源文件
新能源APP应用UIKit
3D渐变流体抽象矢量UI背景图
【新年UI图标】游戏/娱乐icon
盲盒APP UI设计
UI_3D图标“一本秘籍”(源文件
矢量立体简约UI蓝白图标
钱包ui模板
APP/小程序商业项目UI模板|99个高保真UI+79个原型
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】汽车icon
Security Camera UI kit
【新年UI图标】秒杀icon
UI界面 组件
【新年UI图标】钱包icon
我的钱包-UI界面设计-app
你可能喜欢
相关收藏夹
大家都在看
登录注册