关于形色字构质动

253 阅读4分钟

关于形/色/字/构/质/动

在用户体验设计中,通常将产品设计的过程抽象为5层,即战略层、范围层、结构层、框架层和表现层。其中,表现层即视觉层,是用户所能看见的一切,也是离用户最近的一层,它是用户可以直观感受的层面,同时也是设计师可以直接影响的层面。

定义一个产品风格以及品牌调性也是从视觉层出发,“形色字构质动”是构成一个app视觉语言最基本的六个维度。

一、形-图形元素

形是最基本的视觉构成元素,主要表现在点线面图形构成上,可以从以下几方面分析:

视觉|解析构成APP视觉语言的六个维度-形色字构质动

1.ICON运用

ICON图标的风格与统一度在形上影响着设计的风格,表现在样式、视觉大小、粗细、圆角、复杂程度上等(图标三个层次-辨识度、统一性、凸显性)

视觉|解析构成APP视觉语言的六个维度-形色字构质动

2.插画图形

插画是图形设计应用比较广泛的形式之一,分为场景插画和功能插画。场景插画可以营造产品氛围和气质,有助于品牌故事的传达,提升品牌感;功能插画主要将产品功能可视化出来,便于用户快速识别,降低学习成本。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

3.品牌强化

品牌设计的目的就是为了利用图形化的元素,去加强用户的记忆,形成产品的差异。品牌强化表现层可以体现在品牌元素延展和风格延展上,元素延展例如logo图形可运用在一些图标、内容引导页、以及插画绘制上,风格延展例如抖音故障风在图标、插画和活动页面的运用等,都可以有效达到品牌心智的强化。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

二、色-色彩体系

色彩的运用能为画面提升视觉冲击力,也能给人最直观的感受。色彩可以从色彩心理、色彩搭配角度提升设计质量,比如不同色彩能给用户带来不同心理感受,金色代表高贵,红色代表喜庆热情,橙色代表活泼,黑白灰传达极简高级感;不同的色彩搭配(主色、辅助色)讲究和谐和统一,统一配色能够协调页面,增强氛围。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

三、字-字体体系

字体的体系包括字体的字形、字号大小、粗细、间距、行高、段落对齐等都是影响设计的一大因素。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

四、构-页面布局构成

构成,即画面的布局与排布,也就是画面的内容采用的排列方式,画面的构图形式,留白等。不同的布局决定着画面的呼吸感、通透感和舒适感。

画面构图的层次感越强,视觉效果也就越丰富,画面构图有三角形(安全稳定),四角形(严谨规范),中心型(突出视觉焦点),曲线型(以S型为主,自由),满版型(直观大方)等。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

五、质-质感风格

质感也是设计风格直观的体现,主要表现在界面风格、投影、材质上。

1.扁平风格

扁平化意味着将界面中的所有元素做扁平处理,其特点是:去高光、去渐变、去投影,扁平风一直是UI设计的标准。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

2.新拟态风格

新拟态是一种无纹理的拟物风,与扁平风相对,可以理解为:加高光、加渐变、加投影,是一种类似于轻浮雕,介于扁平与投影之间。可以用来表现卡片、按钮的质感,在光影、厚度细节上需要做更多处理。但它也有局限性,就是弱清晰度,不够明了视觉层级关系,尺度更难把控。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

3.磨砂玻璃风格

磨砂玻璃风格也叫毛玻璃,能有效创建画面层次,透光不透明能提升质感。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

4.弥散光风格

弥散光风格设计特点是:模糊、噪点、朦胧、虚化、柔和等。通过两种模糊渐变色彩效果的叠加来使画面活跃,增强设计感。

视觉|解析构成APP视觉语言的六个维度-形色字构质动

六、动-动效动画

动效体现在按钮动效、交互反馈和视频动画上。

视觉|解析构成APP视觉语言的六个维度-形色字构质动