界面设计的3C:Color, Contrast, Content

有许多因素影响设计项目的最终产出。从事网页或移动应用的设计师,不仅要考虑美感,创意和美学,更重要是考虑用户如何获取信息框架以及如何响应。今天我们将谈论在界面设计中的神奇配方–“3C”,它在解决设计问题和提升设计体验方面,扮演着非常重要的角色,同时又确保我们的设计界面更直观好用。所谓的3C是:Color(色彩),Contrast(对比度)和Content(内容)。

Color色彩

在视觉艺术中,颜色似乎是一切的灵魂,由艺术家将它融入在创作中。颜色确实蕴藏着力量:一眨眼的功夫他就能改变图像的情绪;它可以包含鼓励,警告,号召,恐吓,强调,说服等等各种情绪;它可以使文字更有力量,相反也可以削弱文字。不用任何言语就可以传递情感。它俨然已成为大师掌中一件利器。

 

日历APP

 

难怪,在UI设计领域,配色是让设计更出彩的关键。它实际上是一个多功能和多样化的工具,能够同时满足多个需求:

  • 提升可识别性和品牌意识;
  • 确保可读性;
  • 激发行为号召;
  • 满足审美需求;
  • 突出导航;
  • 增强交互的直观性;
  • 美化视觉方案;
  • 创造清晰和谐风格。

正如我们在其中一篇关于UI设计中颜色使用的文章中提到的那样,在通过尝试不同的颜色搭配设计用户友好的界面时,最重要的是要记住,无论何种冒险的颜色混搭都应该保持清爽干净。屏幕或页面上没有干扰, 清晰的页面能提高可用性和可读性,才能使所有的颜色各尽其能。

界面设计的目的不仅仅是传递视觉信息,更重要的是使产品简单易上手,一个检查你的解决方案的好方法是让屏幕呈现黑白效果。观察它,你很快就会明白,哪些元素必须是显而易见的,功能化的,像这样去工作,不然你设计的界面一旦没了颜色就很容易迷失。不要忽视这种简单的方法来检查您的设计的效率:否则无效的颜色组合会暴露问题,并会给色盲用户带来使用上的的潜在问题。

 

 

还有一点很重要,就是颜色的选择和组合有很大的心理暗示:他们能够强化网站的信息和内容,营造恰当的氛围。通过心理暗示,刻板印象和文化背景使得色彩本身成为设计师传递数字产品想法、目标、本质和情绪的强有力的因素。

创建界面绝不是纯粹地发挥创造力,而是通过为用户提供产品服务,治愈他们的痛楚,使他们的生活更快乐。所以,从UI的颜色选择和使用角度来看,设计师应该永远记住界面应该是高度可用和清晰的。任何一块不起眼地方的取色都应该考虑可用性、实用性和和谐。使用颜色编码分类作颜色标记,用以改善和加速导航 – 只有借助色彩的强大功能,才能使设计更加高效和对用户友好。

 

 

Contrast对比

对比度是影响页面的可扫描性和视觉层次的关键因素之一。它使设计师能够以某种方式的布局呈现,通知用户哪些交互点是至关重要的,哪些是次要的。对比可以有效引人入胜,并将其注意力引导到特定的元素上,从而保证导航的直观性和界面的可用性。

对比可以基于UI元素的不同特征,包括:

  • 颜色
  • 尺寸
  • 形状
  • 方向。

 

经常想到的关于对比的第一个想法是黑白。在没有阴影和多种颜色的情况下,通过对比度的区分就能让单色画更具表现力的可能性。这与在用户界面中的工作方式相同。更有甚者,相比在艺术摄影领域应用的重要美学意义,对比在建立版面的可用性和适用性上有重要影响。因此,明智地使用对比度是使网站和应用程序易于使用的有力手段。

当然,这并不意味着只有黑白的UI才是最有效的。当用户在全球呈现如此多样的愿景和需求时,过多的限制是不明智的。然而,前面提到的“黑白”测试非常有用。设计师应该记住,丰富多彩的界面可以在不同的屏幕和分辨率上看起来不同。此外,低对比度会使界面难于应用在有色盲等健康问题的人群。

设计师通常需要回答的第一个问题就是颜色和对比度通常是如何搭配使用呢:是应该是在浅背景上使用深色还是深背景上使用浅色?围绕这个话题,我们要考虑以下几个面:

 

  • 清晰度:

    这方面应该包括用户能够清楚地看到和区分屏幕或页面上的所有必要的细节。配色方案和组合应该支持简单直观的导航,并且使要突出的功能在元素布局上做强调。这种情况下,如果没有考虑到这个方面或者没有经过适当的测试,就会造成用户拿到屏幕无所适从,产生糟糕的体验。其中一种检查方法是利用“模糊效果”,在模糊模式下查看屏幕或页面,检查是否能够轻松快速地捕捉到重要的元素。

  • 可读性:

    用户轻松阅读文本的能力。这个方面至关重要尤其是在一个应用程序或网站是文本驱动的情况下:可读性较差可能会导致用户丢失关键数据,或者阅读时感到费解和吃力,因为他们不得不做出相当大的努力与文字做斗争。缺乏可读性可能是为什么用户放弃使用严重原因之一,即便它是一款外观很吸引你的产品。

 

  • 可访问性:

    产品能够触达尽可能广泛用户群的能力。这意味着“使用还是不使用”的决定权应该取决于用户的需求和愿景,而不是因为身体或客观因素受到阻挠。配色方案是影响这方面的主要因素之一。设计师应该考虑不同年龄、特殊需求,残疾的用户的使用情况等等,这些都是背景和元素颜色选择判断的依据之一。

 

  • 响应能力:

    产品根据使用的设备灵活布局的能力。在高分辨率的专业显示器上看起来柔和时尚,清晰注目可以在可用性上起加分不少,但很可能在低分辨率屏幕上会出现一些瑕疵。当然,色彩方案和对比值会首先影响我们在不同设备的响应能力。

 

  • 使用场景:

    为用户定期和经常使用的潜在环境选择合适的配色方案和背景类型。就自然光下的使用而言,深色背景可以产生反射的效果,特别是在光滑的平板电脑和智能手机上。相反,在光线不好的环境下经常使用的场景,暗色的背景可以移除光线对导航和可读性干扰。所以,颜色组合,对比度和色调的问题在这里引起了很大的关注。

 

 

 

内容

不应该在设计和内容孰重孰轻的问题上作斗争,因为少了任意一个其他一项也无法正常运作。有各种各样的内容类型,它们可以是被组织好的文字、图像或者视频。让我们近距离窥探一下它们。

 

图像

图像在可用性方面占有重要地位:由于绝大多数用户都是通过视觉来驱动的,因此图像成为获取关于网站或应用的基本数据的钩子。图像的利用既能传递信息也能表达情感。依据细节和功能级别不同可将用户界面中的图像分类为多种类型,其中包括:

  • 照片:这些可以是主题照片以创建适当的氛围和配置指定的信息,演示照片,电子商务网站上的项目的照片,博客文章的标题照片等。
  • 插图:以不同的风格和复杂程度完成,自定义插图展现了UI设计的流行趋势,因为它们既可以提供丰富的信息,又可以使原本的设计脱颖而出。
  • 特色横幅:主要应用于网页设计,它们通常是在交互的初始阶段第一个吸引用户注意的视觉元素的一张大图; 他们以吸引人的视觉呈现方式交代站点资源的主要内容。
  • 图标:这些小而有意义的象形符号是具有信息指代作用,并在信息发布者和接受者之间的数据交换上起到桥梁作用 – 与文本靠单词和字母提供信息或服务不同,图标通过象形的符号去映射真实物理世界的事物。图标在提供清晰直观的导航中扮演重要角色。
  • 吉祥物:图像通常是拟人化的,通常在大多数情况下代表品牌,产品或服务的身份,因此贯穿整个应用程序或网站以及品牌项目和促销活动使其成为一个标志性的符号。他们既可以在交互上建立积极的情感共鸣,又可以提高品牌的可识别性。
  • 视觉识别元素:这些是品牌化的各种视觉标识,如商标,品牌定制字体和口号等。

 

 

文本

众所周知,单词是描述复杂功能的通用手段。就用户界面而言,文本是帮助用户达成任务目的的关键特征之一。

考虑到网页相当受限,而移动应用程序屏幕的交互元素的可用空间非常有限,文本推敲应该见证你的匠心和专业。显然当一个设计师能够独立完成界面上的所有工作是非常棒的,毕竟我们不抗拒拥有一个独角兽设计师同伴。但是,他们没有义务这样做。而且很多情况下,即便是设计精良的专业人员,也难以用恰当地方式处理屏幕上的文案。

这项工作同其他工作一样,需要专门技能和知识储备。作为一名设计师需要额外去掌握。但不得不说的是,有很多人真的这样做,仔细研究了文案措辞的技巧和方法,使得在视觉解决方案里我们又多了一种途径,去和用户建立精准联系并获得他们的青睐。

 

 

解决这个问题的另一种方法是聘请专业撰稿人。无论你走到哪里,最重要的事情是找到创建屏幕文案的方式,使每一个文字发挥价值。由于文字是UI设计不可分割得一个组成部分,因此我们认为它应该支持布局的任何其他部分相同得理念:屏幕或页面上的所有内容都必须具有功能性和目的性。一切都应该为用户工作。

在应用程序或网站中实施的文本可以是:

  • 通知
  • 通信
  • 促使交互
  • 增强导航
  • 呼吁感受
  • 制造氛围
  • 创造语气和声音。

设计师创造任何形式的界面的另一件事情应该始终牢记,文案是设计的另一个视觉元素。除了图标,字段,按钮,插图,开关等之外,它还像任何其他图形组件一样占据屏幕或网页的一部分,并影响应用程序或网站的总体风格呈现。这意味着其信息内容和视觉呈现都会影响文字的效率。二者相辅相成。

高效文案的成功直接取决于类型和字体的选择,背景,文案的位置等设计方案。前面提到所有方面都大大影响了可读性的水平,所以当它们做得不恰当时,文案即使是高度有意义的也将失去应用其潜力的机会。

根据上面提到的一切,在设计过程中某些阶段,专业撰稿人可以在创作过程中变得很有帮助:

  • 文本呈现用户角色和用例:由专业作家根据用户研究得到的信息完成,这些类型的文本可以更高效,更集中和简洁,这在团队合作方面尤为重要;
  • 文案号召性用语元素;
  • 文案介绍屏幕,教程和工具提示;
  • 屏幕和网页的说明和通知;
  • 目录或菜单位置的文案;
  • 着陆页承载的文案;
  • 项目描述的模板等

视频

常用的视频内容类型:

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

– 产品演示视频提供了有关产品特性和优势的详细信息,介绍了特定的交互步骤,并展示了产品的解决问题的潜力

– 着陆页视频增强了用户在网页上提供的特定号召性用语的信息

– 视频褒奖显示对公司,品牌或产品的信任和忠诚的原因和迹象

– 娱乐和教育视频提高情绪吸引力,并经常提出病毒式营销材料。

所有提到的类型都可以有效地用于营销目标和提高品牌知名度。一个富有创造性和吸引人的视频是吸引客户注意力的一种好方法,也是快速,明亮地通知他们的经过验证的方法。一个视频同时激活了多种感知渠道 – 音频,视觉和声音 – 通常以讲述故事的方式进行。所有这些因素的结合趋向于使得演示文稿更加强大和令人难忘,特别是如果基于高质量的图形设计和动画。人们每天都有大量的各种各样的信息,所以他们大多没有准备好花时间学习产品或服务,尤其是新的。在这些条件下,视频可以成为动态,信息和吸引力的沟通方式。

 

检查了用户友好型设计的三个核心方面之后,很容易发现创作过程包含设计师必须考虑的多个问题。没有通用的解决方案:对于每个项目,都必须在用户和市场调查的基础上做出决定,并进行彻底的用户测试。为了让用户感受到魔力,设计师必须找到最适合特定用户问题和业务目标的3C组合。

刷牙君

View posts by 刷牙君
处女座设计师一枚,涉及的专业领域视觉,交互,前端。

Leave a Reply

Your email address will not be published. Required fields are marked *