首页技术文章正文

UI设计如何确定设计风格和设计色彩?

更新时间:2021-11-26 来源:黑马程序员 浏览量:

IT培训班

在进行UI设计时,往往需要设计师对UI设计要素进行整体把控,才能设计出优秀的设计作品。在UI设计要素中设计风格色彩搭配尤为重要,下面将对这两种设计要素进行详细讲解。


一、 设计风格

设计风格可以理解为美的不同视觉表现形式。在UI设计中,统-设计风格能给用户呈现整体一致的视觉体验,既有利于传达产品整体的品牌形象,又方便设计团队制定设计规范,减少设计风格不一致带来的沟通成本。因此确定设计风格往往是UI设计的第一步工作。确定设计风格主要包括以下几个步骤。

1. 寻找产品特性

每个产品都有自己的特性,表现产品特性的词汇也有很多,例如柔美、轻巧、阳刚、张扬、热情、神秘、高贵、环保、科技、时尚等,每个产品特性都会有着对应的视觉语言。


2. 确定主色调

在进行UI设计时,必须为产品确定一个主色调,然后根据主色调搭配不同的辅助色,设计各种颜色控件。主色调是视觉风格中的灵魂,更是一种可以强化的视觉识别信号,让用户只通过主色调就能识别产品的特性。


3. 选择图标和字体

在UI设计中,设计风格还反映在图标和字体的选择上。例如,纤细的图标和字体显得设计高雅适用于高端类产品,而卡通图标和字体更适用于少儿类型产品的界面设计。然而困扰设计师的是移动端系统自带的中文较少,而且没什么特色。因此内嵌字体成为些追 求完美的设计师的首选。


4. 排版设计

排版设计是指在有限的版面空间,将UI设计元素按照所要表现的设计风格进行编排组合,形成一个富有艺术美的整体形象。

UI设计要素

二、 设计色彩

色彩是UI设计中一个很重要的元素,作为最直观的视觉信息,无时无刻不影响着用户的体验。下面将具体介绍色彩的基础知识和搭配方法。


1. 认识色彩

在UI设计中,色彩可以归纳为四种,分别为主色、背景底色、辅助色和点缀色,具体介绍如下。


1) 主色

主色指设计时的主要颜色,包括大面积的背景色、装饰图形颜色等构成视觉中心的颜色。主色是配色中的中心色,主要是由页面中整体栏目或中心图像所形成的中等面积的色块,主色在页面配色中具有重要地位,通常形成视觉中心。主色的选择通常有两种方式,一是选择与背景底色呈对比的色彩,二是选择与背景底色、辅助色相近的色相颜色或者邻近色。

主色是决定画面风格趋向的色彩,主色有可能不仅仅只是一种颜色。主色的选择过程称为定色调,它的成败直接影响到视觉传达的效果,还会影响到使用者的情绪。因此确定主色是设计中非常关键的一步。


2) 背景底色

背景底色对界面整体空间效果的影响比较大,由于占据的面积最大,支配着整个空间的效果,所以是配色的重点。背景底色常使用的颜色主要包括白色、浅灰色等。


3) 辅助色

页面中除了具有视觉中心作用的主色之外,还有作为呼应主色而产生的辅助色,辅助色的作用是使画面更完美更丰富。辅助色的视觉重要性和体积仅次于主色和背景底色,常常用于陪衬主色,使主色更突出。辅助色常用于页面中较小的元素,如按钮等。


4) 点缀色

点缀色通常用来打破单调的页面整体效果,营造生动的空间氛围。所以选择较鲜艳的颜色,常以对比色或高纯度色彩加以表现。点缀色的应用面积越小,色彩越强,点缀色的效果才会越突出。点缀色通常在色彩组合中占据的面积较小,视觉效果较为醒目,主要用在提示性的小图标或者需要重点突出的图形中。


2. 颜色分类

颜色分类方式有很多种,但是在UI设计中,往往更注重受众的感受,会根据受众的心理感受,将颜色分为暖色调、冷色调以及中性色调。


1)暖色调颜色

暖色包含红色、橙色、黄色以及这三种颜色衍生的同类色。它们分别是烈焰、落叶以及日出和日落的颜色,象征活力、激情和积极。在UI设计中,通常使用暖色来体现激情、快乐、热忱和活力的主题内容。

(1)红色:是热烈、冲动、强有力的色彩。红色可以传达有活力、积极、热诚、温暖、前进等含义的主题形象与精神,此外红色也常用来作为警告、危险、禁止等标识用色。在UI设计中,红色是一种很重的色彩,如果在设计中使用过多,会产生一种压倒性的感官效果,尤其是使用纯红色时。如果设计师想在设计中添加力量和激情的感觉,红色就是一种非常 不错的颜色。

(2)橙色:是一种充满生气和活力的颜色。橙色象征着收获、富足和快乐。在Ul设计中,橙色不像红色那样强烈,但也能获取观众的注意力。

(3)黄色:是最明亮、最具活力的暖色。黄色象征着快乐、希望,此外黄色也用来象征虚伪、欺骗。


2)冷色调颜色

冷色调颜色包含青色和蓝色。相对暖色调而言,冷色调强度要弱。通常给人感觉是舒缓、放松,甚至有一点冷淡。

(1)青色:是坚实、强硬的冷色调颜色,介于蓝色和绿色之间,图1-48所示的某品牌啤酒网站,就使用青色作为主色调,象征着沉稳、踏实。在UI设计中,青色适于表现深沉、可靠的感觉。

(2)蓝色:是一种安静的冷色调颜色,象征着沉稳和智慧。因此-些科技类的企业网站通常使用蓝色作为主色调。图1-49所示为某电器企业网站,该网站使用蓝色作为主色调。


3)中性色调

中性色通常用作设计作品的背景色。包含黑色、白色、灰色、绿色和紫色五种颜色。在UI设计中,中性色的含义以及给人的心理感受容易受到周围暖色和冷色的影响。

(1)黑色:作为设计中使用最广泛的颜色之一,黑色象征着权威、高雅、低调和创意,此外也象征着执着、冷漠和防御,是设计中的百搭颜色。

(2)白色:同样是设计中使用最广泛的颜色之一, 象征着纯洁、神圣、善良。此外白色还象征着恐怖和死亡。在UI设计中,通常用白色作为主色调,配合大范围的留白彰显格调。

(3)灰色:是一种理性高雅的颜色,象征着诚恳、认真、沉稳、严谨。在UI设计中,灰色和黑色、白色一样,同样是使用最广泛的颜色,是设计中的百搭色。

(4)绿色:是给人实全感的概色,象征者自由、和平,新鲜、生命、健康。在UI设计中绿色常作为安全杀毒软件,或环保健康类界面的主色调。

(5)紫色:是一种高贵的颜色,象征着神秘、奢华和浪漫。在UI设计中,深紫色给人一种富有和奢华的感受。


3. 颜色搭配基础

在UI设计中,如果对色彩搭配没有把握,可以参考以下三种方法。


1) 参考同类界面设计

根据产品所涉及的行业、风格和定位去寻找同类型界面的色彩搭配组合。如科技风一般采用蓝、白、灰为主;女性主题经常以粉色、紫色或柔和的米色为主;美食类主题多以橙色或黄色为主。


2)三色搭配原则

三色搭配原则是指在设计作品中,单个界面的颜色应保持在三种以内(这里的颜色指色相)。如果超过三种,就会产生眼花缭乱的感觉。


3)借助配色软件

如果觉得上述方法无法满足需求,还可通过配色网站进行配色,通过这种方法获得的色彩组合都符合色彩搭配规范,省时省力。例如,Color Scheme Designer 3、Colour Lovers等都是一些非常实用的配色利器。



猜你喜欢:

21个UI设计技巧【UI设计干货】

用户界面设计的10大原则

化妆品广告如何设计?有什么设计思路?

黑马程序员UI设计培训班

分享到:
在线咨询 我要报名
和我们在线交谈!