2021-11-30 09:32:18|已浏览：515次
UI界面视觉设计包含5个要素：色彩、文字、图标、图片、空间。一个出色的界面设计，必然是将这些要素做到了淋漓尽致。
要素一：色彩
1. 色彩基础概述
1.1 色彩三属性
色相(H)：即色彩的相貌、种类和名称，比如红、橙、黄、绿等颜色的种类就叫色相。
饱和度(S)：即色彩的鲜艳程度，也称纯度。
明度(B)：即色彩的明亮程度。
人眼看到的任一彩色光都是这三个属性的综合效果。
1.2 色彩寓意
同一色相的不同明度和不同饱和度，也会对人产生不同的心理感受。
我在这里归纳整理了各种色彩在通常情况下代表的不同寓意，仅供参考。
红色(Red)：热烈、喜庆、热情、浪漫、危险
橙色(Orange)：温暖、食物、友好、财富、警告
黄色(Yellow)：光辉、明亮、尊贵、权力
绿色(Green)：健康、自然、清新、希望、安全
青色(Cyan)：朝气、脱俗、真诚、清丽
蓝色(Blue)：平静、纯洁、清凉、科技、沉稳
紫色(Purple)：神秘、高贵、优雅、浪漫、妖艳
黑色(Black)：深沉、庄重、严肃、邪恶、死亡
白色(White)：纯洁、神圣、干净、高雅、冷淡
灰色(Gray)：平凡、随意、苍老、冷漠
2. 色彩搭配
色相对比：两种及两种以上色彩组合后，由于色相差别而形成的色彩对比效果称为色相对比。
色相对比的强弱程度，取决于色相之间在色环上的距离 (角度)，距离 (角度) 越大对比越强，反之对比越弱。
一般界面的色彩搭配主要包括三种颜色：主色调、辅助色、点缀色，搭配比例分别为 6:3:1。
要素二：文字
1. 字体简介
中文字体种类大致分为：宋体、黑体、仿宋、楷体、其它（变体字）。
西文字体种类大致分为：无衬线体、罗马正体或衬线体、意大利斜体、手写体、黑字体（哥特体）。
这次主要给大家介绍一下比较常用的衬线体和无衬线体。
2. 文字使用规则
不同平台的界面设计中规范的字体会有不同，像移动端界面的设计就会有固定的字体样式，网页中会有常用的几个字体。
要素三：图标
1. 图标功能
图标是 Web 和 App 设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效地识别，并且图标也有一定的装饰作用，可以提高界面设计的美观度。
2. 图标类型
关于图标的类型目前并没有很权威的分类，我根据图标的用途将其分为两大类：「功能型图标」和「展示型图标」。
3. 图标风格
图标的设计风格有很多种，例如：线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等，我对其中常见的几种作下简要的介绍。
要素四：图片
图片在 Web 和 App 界面设计中是非常常见的，图片的质量和展现方式都会影响着用户对产品的感官体验。
1. 图片比例
不同比例的图片所传递的主要信息各不相同，我们需要结合产品的特点，并根据不同的场景来选择合适的图片比例进行设计。
2. 图片排版
图片的排版类型有很多种，根据不同的场景和所需传递的主体信息来选择与之相符的展现方式，以下是常见的几种排版类型。
要素五：空间
1. 栅格系统
栅格系统英文为「Grid systems」，是一种平面设计的方法与风格，运用固定的格子设计版面空间布局。
其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。
如今栅格系统也已经被运用到网页设计中，它以规则的网格阵列来指导和规范网页中的空间布局。
栅格系统的使用，可以让网页的信息呈现更加美观、易读、严谨和一致，同时也更具可用性。
2. 留白
对于一些特殊的页面，例如：引导页、闪屏页、促销页等，可以不用严格按照栅格系统进行设计，但需要注意空间留白的运用。
本文由培训无忧网长沙牛耳教育课程顾问老师整理发布，希望能够对想参加长沙UI设计培训的学生有所帮助。更多课程信息可关注培训无忧网UI设计培训或添加老师微信：15033336050
注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-5539.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注UI设计频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050
