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