浅谈UI设计经验

浏览02016-12-08 00:13:58 37

(作者:杨乐萍@TaoCloud)

u1.png

是UI设计

维基与百度百科对UI的定义为:

UIUser Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。


字面意思UI是由用户与界面两部分组成。实践过程中,用户与界面的交互关系也非常重要。一般需要考虑三方面因素:

l   用户研究(UE)

首先要从用户角度研究产品,对用户的工作环境、产品习惯做前期的调研,在产品开发的前期能够把用户对产品功能的期望、设计和外观需求融入产品当中。


l   交互设计(IXD)

目的在于加强软件的易用、易学、易理解,使计算机真正成为方便为人类服务的工具。


l   界面设计(GUI)

一个友好美观的界面会给人带来舒适的视觉享受,拉近人与电脑的距离,为商家创造卖点。


 综上所述,UI其实是介于用户与硬件而设计彼此之间交互沟通的软件,目的使得用户能够方便有效地去操作硬件以达成双向交互,以便高效地完成工作。如何才能使UI不仅在实现交互效果的同时,也能让用户更轻松愉悦的完成工作?一款形象感人的UI设计是必需的要求。

用户界面设计是屏幕产品的重要组成部分。当看到设计师能恰到好处的把一款设计作品展现的和谐得体和令人赏心悦目,相信这款作品会给用户带来深刻的印象。想想若是自己会怎么去设计,如何运用色彩,如何去布局,有没有更好的解决方案。这一心里历程我想是每位设计师都会有的。然而最初最根本的就是配色。配色其实是一门设计师必学的课程,也是比较难以把控的过程。

UI设计配色方法

u2.png

作为设计者,必须掌握基本的色彩理论,通过实践不断加深对色彩的理解,最终可以熟练驾驭各种色彩,搭配出平衡且使用愉悦的作品来。

经验:建议多看优秀作品和观察周围环境展示牌作品,从中能够获取和培养色彩感并搭配灵感。国内比较优秀的设计网站有:视觉中国、站酷、蓝色理想等。这些网站也是前辈大神们必推的设计网站。

颜色的基本知识

设计必备的配色知识有哪些?

了解色相、明度、饱和度、无彩色、有彩色和色调等概念及其功能。


 颜色的“色相”、“饱和度”和“明度”的3要素,被称为“颜色的三属性”。通过这三属性为基准产生的颜色关系,且以数值化方式建立的色彩体系,称为色彩表。理解这些颜色的特性是设计师必备要领。

色相、饱和度、明度(HSB或HSV)

知乎定义:“ H(Hue) 代表色相,S(Saturation) 代表饱和度。Hue(色相)是指取值范围在0-360°的圆心角,每个角度可以代表一种颜色。B HSB 模式中是 Brightness 的意思, V HSV 中是值,但是所表述的是一个东西:对光的量或光源的功率的感知。色相和明度(值)可以在0 - 1或者0% - 100%间取值。

当我们需要运用颜色时,相信许多人选择使用RGB色彩模式,但RGB是对机器很友好的色彩模式,显然并不够人性化。所以作为设计师,HSB模式更受欢迎。因为色相、饱和度和明度是人脑对色彩的理解方式,这些属性对于实际应用会更有意义。

ui4.png

所谓“色相”,指的就是红色、蓝色和黄色等颜色种类,它代表颜色的差异性。将这些颜色依照光谱顺序排列成环状,称为“色相环”,从色相环中可以轻易地看出颜色间的关系。

ui5.jpg

色相环上位于相反位置上的两个颜色,称为补色;接近相反位置的颜色称为相反色;而相邻的颜色称为类似色。另外,红色、橙色和黄色这类让人感到温暖的色相组,称为暖色系;而蓝色、水蓝色这类让人感到生冷的色相组,则称为冷色系。

色彩的明暗程度称为明度。颜色里明度最高的为白色,最低的为黑色。因而越接近白色的明度越高,越接近黑色的颜色明度越低。明度越高,颜色会越抢眼,并且给人明快的印象。

表示颜色鲜艳程序的属性,称为饱和度。色调鲜艳的颜色饱和度较高,反之则较低。注意:色相相同的颜色里,饱和度最高的颜色称为纯色,与其他颜色混合会使饱和度降低。当饱和度为0时,就会变成灰色。即使是同一色相,不同饱和度,感观也是不同的。

无彩色和有彩色

黑白灰称为无彩色,其他颜色都是有彩色。无彩色不具有色彩三属性的色相、饱和度,区别仅在于明度。

 ui6.jpg

色调

色调用来表示明度、饱和度综合变化的状态。搭配颜色的时候,使用同样色调,或是以类似色调为基础做出设计,显得自然协调。你是冷色调还是暖色调,夏季或者冬季,选择适合自己的装扮,一不小心跑偏话题了其实不然,不同颜色给人不同的感观感受。据说卧室不推荐使用红色壁纸,因为红色刺激人类情感,使人兴奋。而办公室适应蓝色调,蓝色使用镇定,这样大家可以有条不紊的投入工作。

 到这里,大家是否已经了解和认识到颜色世界里的一些可循的规律呢?有了这些知识,我想下面的内容更容易理解。

配色

       前言:近几年比较流行的设计似乎是将色彩控制在最少范围。特别是随着网络时代的飞速发展,蓝色被越来越多的人感知。这些感知跟时代、社会发展紧密相关。尽管不同时代人们对色彩认知会有所变化。但是运用原色搭配仍然被大家所认可。

       下图配色,是选择一个主色,建议从选择一个明亮,柔和的原色(logo颜色)作为开始。这样的选择往往是相对安全的。然后剩下的就是选择合适的色彩去搭配。

ui7.jpg

注意:不要过度使用色彩。

单色

这种配色方案用在按钮的交互设计上较普遍。选择一种色相,为其添加不同透明度的白色或黑色。因为色相相同,其又能产生和谐的对比效果。此种配色方案较常用在按钮的操作设计上。如下图:

ui8.png

临近色

色相环中相邻的色彩称为临近色。这在UI按钮设计中也非常普遍。临近色在色彩中显得不过分花哨,也不会过分单一。通常被称为同一“色系”。通常设计师会将色相值增减30-50来得到一个临近色。将每色相递增30后得到如下图色彩:

ui9.png

互补色

前面提到过的色彩的基本知识中,12色相环中接近相反(互为180度角)的两个颜色称为互补色。互补色会让人产生强烈地对比效果。这种本色方式通常会用在突出显示或者告警等地方。例如,红绿按钮在页面中非常突出,因为红绿是互补色。如下图大道云行管理界面中蓝色是主色,但是红色和黄色看起来相当突出。这就是互补色的应用方式。

ui10.png

PS经验:图像 –>调整 -> 反相(CTRL+I)得到该颜色的互补色。

中性色

前面提到有彩色和无彩色概念,而通常设计中提到中性色调其实指的是无彩色系。这种颜色通常很柔和色彩不那么明亮耀眼。其介于三元色之间的颜色,不属于冷色调也不属于暖色调。黑白灰是常用的三大中性色。黑白灰这三种中性色能与任何色彩起谐和、缓解作用。在UI设计中中性色一般都是为了衬托主色才会用到。为避免与主色产生冲突,其饱和度会特别低,接近0

ui11.png

 

所有色彩从色相开始,通过色相选择一个主色,然后可以选择其他单色、临近色和互补色。再通过修改饱和度与明度值而调出各式各样的色彩。

使用图片色彩

      ui12.png

 

当不知如何设计时,通常的办法就是找素材。有的时候看到一副作品会觉得更适合当下的场景。然后开始取色调色。上图banner色调取自下图:

ui13.png


很多设计师会有一些习惯,当看到一张美丽作品时,会将其拍下来或者截图保存下来,导入ps取出色彩。形成一个新的色板。经过多次尝试练习,设计功底会不断加深增强。色彩的培养,色彩的收集再到色彩的运用自如,这一过程是每位设计师必修课程。下面介绍几款经常用到的配色网站:

Adobe Color CC

ui14.png

可快速将一件作品的配色方案提取出来。

uigradients

ui15.png


一款专门为渐变的配色解决方案。例如在TaoCloud MoxIO SSD加速软件的配色方案如图:


ui16.png

 

小结:

本次文章是以教程方式呈现出来,主要目的是让读者可以按照文章内容进行操作和运用,让读者理解UI的定义、UI设计的配色方案等。当然UI并不仅仅是这些,UI设计只是第一步, UI交互设计才是决定最终用户的操作体验。那么接下来开始介绍UI的交互设计之UI前端技术。


发表评论

全部评论(0)