第4章：UI设计艺术表现[65页]课件.pptx

1、MobileTerminalUIDesign移动端UI设计第第4 4章章UIUI设计艺术表现设计艺术表现大纲分析视觉设计流程视觉设计流程 UIUI视觉风格要素视觉风格要素 UIUI设计风格与手法设计风格与手法 UIUI色彩设计色彩设计 UIUI视觉流程设计视觉流程设计第一阶段：理解阶段第二阶段：探索阶段第三阶段：应用阶段移动端移动端UIUI视觉风格要素视觉风格要素一、文字 移动界面中文字的主要功能是精准地传达各种信息，这种传达效果有效的获得，必须做到文字精准的编辑和有序的编排，去繁就简，使人易认、易懂、易读。移动端移动端UIUI视觉风格要素视觉风格要素一、文字 移动界面中文字主要包括标题文字、

2、控件文字和正文文字。移动端移动端UIUI视觉风格要素视觉风格要素一、文字 控件文字包括导航文字、菜单文字、按钮文字、滑块文字、输入框文字等。控件文字的主要功能是进行说明，设计控件文字时需要考虑文字与控件之间的大小比例关系，既要满足用户清晰阅读的功能，又要做到文字与控件的协调搭配，实现界面控件视觉美观。移动端移动端UIUI视觉风格要素视觉风格要素二、图形图像 移动界面中的图形包括图形图片、图形图标、图形控件等。图像主要是指界面中的摄影照片及广告图片。图形图像的引入既能成倍地加大移动界面所提供的信息量，又能渲染主题和美化界面，使界面信息传达的方式变得更加直观和有趣。移动端移动端UIUI视觉风格要素

3、视觉风格要素三、色彩 色彩的适当选用能体现移动产品的外观形象，延伸移动产品的内涵形象。色彩作为UI视觉风格重要构成要素，选用既要符合色彩规律，又要体现界面的特色和个性。移动端移动端UIUI视觉风格要素视觉风格要素四、版式 UI版式即界面版面格式。UI版式设计是在有限的屏幕空间内，根据移动产品主题的类型和要求，将文字、图形、图像、控件等视觉要素进行有机排列组合，使各种构成要素达到均衡、调和、对比、韵律等视觉效果，形成主题鲜明、个性独特的界面视觉风格。 移动界面按照其产品功能可以分为两大类：信息展示型界面和功能操作型界面。移动端移动端UIUI视觉风格要素视觉风格要素四、版式信息展示型界面移动端移动

4、端UIUI视觉风格要素视觉风格要素四、版式功能操作型界面UIUI设计风格与手法设计风格与手法一、拟物化 拟物化设计是利用高光、纹理、材质、阴影或渐变等方式模拟现实物品的造型、质感，或是保留过去物品的某一特点的一种设计手法。UIUI设计风格与手法设计风格与手法二、扁平化 扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。在界面设计中具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来，同时在设计元素上，扁平化界面强调了抽象、极简和符号化。UIUI设计风格与手法设计风格与手法三、 Material Design Material Des

5、ign，中文名：原质化设计，是由Google推出了全新的视觉设计语言。 Material Design的核心思想，就是把物理世界的体验带进屏幕。 Material Design中，最重要的信息载体就是魔法纸片。UIUI设计风格与手法设计风格与手法四、 绘画风格 移动界面设计中采用绘画元素也是常见的表现手法之一。UIUI设计风格与手法设计风格与手法五、 摄影风格 在界面中使用摄影图片来提高界面的视觉吸引力越来越成为一种潮流。照片元素具有十分直观的逼真感，具有真实性和客观性，摄影作品具有一种真实的力量，视觉冲击力强。在移动界面中，背景使用整张照片充满整个屏幕越来越多。UIUI色彩设计色彩设计一、色

6、彩基本知识 色彩三要素：色相、饱和度、明度。UIUI色彩设计色彩设计一、色彩基本知识 色彩模式： RGB颜色模式UIUI色彩设计色彩设计一、色彩基本知识 色彩模式： CMYK颜色模式UIUI色彩设计色彩设计一、色彩基本知识 色彩模式： HSB颜色模式UIUI色彩设计色彩设计一、色彩基本知识 色彩模式：灰度模式UIUI色彩设计色彩设计二、色彩搭配方式 1、同色系配色UIUI色彩设计色彩设计二、色彩搭配方式 2、邻近色配色UIUI色彩设计色彩设计二、色彩搭配方式 3、类似色配色UIUI色彩设计色彩设计二、色彩搭配方式 4、对比色配色UIUI色彩设计色彩设计二、色彩搭配方式 5、中性色配色UIUI色彩设计色彩设计二、色彩搭配方式 6、主导色调配色