超全面!界面视觉设计5要素(1)

来源:网络   作者:一起学设计小编   发布时间:2018-01-11    浏览次数:0
收藏到:

undefined


一款 App 或 Web 产品,从用户体验的角度包含了战略层、范围层、结构层、框架层、表现层。而作为 UI 设计师,如果连「表现层」的内容都还一知半解就去盲目地学习其他领域,这是不提倡的。


这里说的「表现层」是指视觉设计层面,在界面的视觉设计中同样也包含了 5 个视觉要素:色彩、文字、图标、图片、空间。一个出色的界面设计,必然是将这些要素做到了淋漓尽致。


本文结合大量优秀的案例,并以通俗简练的语言,系统地介绍了这 5 个视觉要素。篇幅略长,耐心读完你一定会有收获!


适合阅读人群:视觉设计师、交互设计师、平面设计师、设计爱好者等。


文章大纲如下:


undefined


那我们就开始吧 : )


要素一:色彩



1. 色彩基础概述


1.1 色彩三属性


色相(H):即色彩的相貌、种类和名称,比如红、橙、黄、绿等颜色的种类就叫色相。

饱和度(S):即色彩的鲜艳程度,也称纯度。

明度(B):即色彩的明亮程度。


人眼看到的任一彩色光都是这三个属性的综合效果。



1.2 色彩寓意


同一色相的不同明度和不同饱和度,也会对人产生不同的心理感受。我在这里归纳整理了各种色彩在通常情况下代表的不同寓意,仅供参考。


红色(Red):热烈、喜庆、热情、浪漫、危险

橙色(Orange):温暖、食物、友好、财富、警告

黄色(Yellow):光辉、明亮、尊贵、权力

绿色(Green):健康、自然、清新、希望、安全

青色(Cyan):朝气、脱俗、真诚、清丽

蓝色(Blue):平静、纯洁、清凉、科技、沉稳

紫色(Purple):神秘、高贵、优雅、浪漫、妖艳

黑色(Black):深沉、庄重、严肃、邪恶、死亡

白色(White):纯洁、神圣、干净、高雅、冷淡

灰色(Gray):平凡、随意、苍老、冷漠



2. 色彩搭配


色相对比:两种及两种以上色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。

色相对比的强弱程度,取决于色相之间在色环上的距离 (角度),距离 (角度) 越大对比越强,反之对比越弱。


undefined


一般界面的色彩搭配主要包括三种颜色:主色调、辅助色、点缀色,搭配比例分别为6:3:1。



2.1 同类色搭配


色环上相距0°的颜色为同类色,一般常用同一种色相的不同明度或不同饱和度的组合方式,例如蓝与浅蓝,红与粉红等。同类色搭配对比效果统一、清新、含蓄,但也容易产生单调、乏味的感受。


undefined



2.2 邻近色搭配


色环上相距30°左右的颜色为邻近色 ,例如紫与蓝紫,蓝紫与蓝等。邻近色搭配对比效果柔和、文静、和谐,但也容易感觉单调、模糊,需调节明度来加强效果。


undefined



2.3 类似色搭配


色环上相距60°左右的颜色为类似色,例如橙与黄,黄橙与黄绿等。类似色搭配对比效果较丰富、活泼,同时又不失统一、和谐的感觉。


undefined



2.4 中差色搭配


色环上相距90°左右的颜色为中差色,例如红与黄橙,蓝绿与黄等。中差色搭配对比效果明快、活泼、饱满、使人兴奋,同时不失调和之感。


undefined



2.5 对比色搭配


色环上相距120°左右的颜色为对比色,例如红与黄,红紫与黄橙等。对比色搭配对比效果强烈、醒目、刺激、有力,但也容易造成视觉疲劳,一般需要采用多种调和手段来改善对比效果。


undefined



2.6 互补色搭配


色环上相距180°左右的颜色为互补色,例如红与绿,黄与紫等。互补色搭配表现出一种力量、气势与活力,具有非常强烈的视觉冲击力。


undefined



2.7 多色搭配


多色搭配顾名思义是由多种色彩组合而成的一种搭配方式,一般以不超过 4 种颜色为宜,规定一种作为主导色,其余作为辅助色使用。


多色搭配会让画面显得更加丰富、多彩,充满趣味性,但若控制不好,也容易让画面变花,失去平衡。搭配时须注意区分主次,按比例进行调和。


undefined


12345共5页
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:经验分享

相关推荐

http://www.17xsj.com/shejijiaocheng/shejililun/7026.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取10学币奖励,超爽下载!