第4章UI设计艺术表现课件.pptx

,MobileTerminal UI Design移动端UI设计,第4章,UI设计艺术表现,大纲分析,视觉设计流程,UI视觉风格要素,UI设计风格与手法,UI色彩设计,UI视觉流程设计,第一阶段：理解阶段第二阶段：探索阶段第三阶段：应用阶段,移动端UI视觉风格要素,一、文字 移动界面中文字的主要功能是精准地传达各种信息，这种传达效果有效的获得，必须做到文字精准的编辑和有序的编排，去繁就简，使人易认、易懂、易读。,移动端UI视觉风格要素,一、文字 移动界面中文字主要包括标题文字、控件文字和正文文字。,移动端UI视觉风格要素,一、文字 控件文字包括导航文字、菜单文字、按钮文字、滑块文字、输入框文字等。控件文字的主要功能是进行说明，设计控件文字时需要考虑文字与控件之间的大小比例关系，既要满足用户清晰阅读的功能，又要做到文字与控件的协调搭配，实现界面控件视觉美观。,移动端UI视觉风格要素,二、图形图像 移动界面中的图形包括图形图片、图形图标、图形控件等。图像主要是指界面中的摄影照片及广告图片。图形图像的引入既能成倍地加大移动界面所提供的信息量，又能渲染主题和美化界面，使界面信息传达的方式变得更加直观和有趣。,移动端UI视觉风格要素,三、色彩 色彩的适当选用能体现移动产品的外观形象，延伸移动产品的内涵形象。色彩作为UI视觉风格重要构成要素，选用既要符合色彩规律，又要体现界面的特色和个性。,移动端UI视觉风格要素,四、版式 UI版式即界面版面格式。UI版式设计是在有限的屏幕空间内，根据移动产品主题的类型和要求，将文字、图形、图像、控件等视觉要素进行有机排列组合，使各种构成要素达到均衡、调和、对比、韵律等视觉效果，形成主题鲜明、个性独特的界面视觉风格。 移动界面按照其产品功能可以分为两大类：信息展示型界面和功能操作型界面。,移动端UI视觉风格要素,四、版式信息展示型界面,移动端UI视觉风格要素,四、版式功能操作型界面,UI设计风格与手法,一、拟物化 拟物化设计是利用高光、纹理、材质、阴影或渐变等方式模拟现实物品的造型、质感，或是保留过去物品的某一特点的一种设计手法。,UI设计风格与手法,二、扁平化 扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。在界面设计中具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来，同时在设计元素上，扁平化界面强调了抽象、极简和符号化。,UI设计风格与手法,三、 Material Design Material Design，中文名：原质化设计，是由Google推出了全新的视觉设计语言。 Material Design的核心思想，就是把物理世界的体验带进屏幕。 Material Design中，最重要的信息载体就是魔法纸片。,UI设计风格与手法,四、 绘画风格 移动界面设计中采用绘画元素也是常见的表现手法之一。,UI设计风格与手法,五、 摄影风格 在界面中使用摄影图片来提高界面的视觉吸引力越来越成为一种潮流。照片元素具有十分直观的逼真感，具有真实性和客观性，摄影作品具有一种真实的力量，视觉冲击力强。在移动界面中，背景使用整张照片充满整个屏幕越来越多。,UI色彩设计,一、色彩基本知识 色彩三要素：色相、饱和度、明度。,UI色彩设计,一、色彩基本知识 色彩模式： RGB颜色模式,UI色彩设计,一、色彩基本知识 色彩模式： CMYK颜色模式,UI色彩设计,一、色彩基本知识 色彩模式： HSB颜色模式,UI色彩设计,一、色彩基本知识 色彩模式：灰度模式,UI色彩设计,二、色彩搭配方式 1、同色系配色,UI色彩设计,二、色彩搭配方式 2、邻近色配色,UI色彩设计,二、色彩搭配方式 3、类似色配色,UI色彩设计,二、色彩搭配方式 4、对比色配色,UI色彩设计,二、色彩搭配方式 5、中性色配色,UI色彩设计,二、色彩搭配方式 6、主导色调配色,