UI界面设计中展示的美学原理.docVIP

UI界面设计中展示的美学原理 目录 TOC \o 1-9 \h \z \u 目录 1 正文 1 文1：UI界面设计中展示的美学原理 1 一、交互设计及UI扁平化设计特征 2 二、美学在UI扁平化设计中的表现 3 （一） 整体与简约 3 （二） 相似性 4 （三） 接近性 6 （四） 图底关系 7 文2：UI界面设计界面设计不存在美工 8 五套软件界面 11 参考文摘引言： 12 原创性声明（模板） 13 文章致谢（模板） 13 正文 UI界面设计中展示的美学原理 文1：UI界面设计中展示的美学原理 UI是用户界面 （User Interface） 的缩写。UI设计是指人机交互的媒介， 包括用户操作的流程设计、操作规范及界面美观的图形设计， 包括可用性及可行性分析、GUI （图形用户软件界面设计） 、界面用户的相关测试等。 在产品的交互中， 能最直接能看到、感受到的就是软件界面的色调、风格和操作。界面设计大致包括三个方面：界面的外观设计、界面的交互设计以及界面设计的交互合理性和易用性。 一、交互设计及UI扁平化设计特征 交互设计从可用性和用户体验两个层面进行分析， 关注“以人为本”的用户需求。交互产品的界面是人机信息交互的枢纽， 是人和产品或服务的一种互动模式， 通过用户的操作过程， 达到用户的使用目的或是高效使用产品。 UI扁平化设计特征有五种。一是拒绝特效， 即所有元素都不加修饰， 如阴影、斜面、突起、渐变等， 图片框、按钮、导航栏都尽量保持简洁。设计中的各层级中没有明显的区分模块， 如背景图、前景图、按钮、文本、导航等。 二是简单元素， 即使用简单的UI元素， 如按钮和图标， 常用矩形、圆形、方形等简单的形状。元素间相互独立并尽量达到简单直观的效果， 还可通过文字图形的空间组合， 表达和谐与美。 三是注重排版。扁平化设计要求元素更简单， 排版就显得更为重要。字体和字形通过版式来区分各模块。通过排版引导客户， 交互模块元素注重增强易用性和交互性。 四是重视色彩。扁平化设计中， 界面拥有更大胆的色调。UI界面中一般不多于3种色调， 但是在扁平化设计中平均会使用6至8种颜色， 而且色彩更纯、色调更有活力。 五是追求极简。UI扁平化设计中应尽量避免不必要的修饰， 保持最简单的色调、文本、图形。 二、美学在UI扁平化设计中的表现 （一） 整体与简约 在设计中， 整体决定部分， 部分依从于整体， 两者相辅相成， 互为作用。在互联网的时代， 界面构成要素中除了文字和图像以外， 还包含声音、视频和动画等新兴的多媒体元素， 其在增加了UI界面生动性的同时， 也使界面设计者考虑更多的合理性运用。点、线、面基本形态作为UI设计中的视觉传达要素， 共同构成了软件界面交互设计， 但是整个版面并非是各类元素的简单相加， 元素间相互联系、相互制约以达到传达信息的目的。 UI扁平化设计应以精简为准则贯穿于整个设计中， 精简并不是指内容少， 而是注重重点的表达， 在视觉上也要遵循用户的视觉逻辑。设计前期， 设计师了解界面内容和性质后， 需要对整个布局进行构思， 简单画出基本框架， 并且与客户和开发人员进行有效的沟通， 最终确定界面的基本雏形和流程， 从整体的构思再到细节的局部， 从每个表格、按钮、菜单等细节元素再到整体的效果。 在很多扁平化的UI交互设计中可以看到若隐若现的幽灵按钮。所谓的幽灵按钮， 其实就是无填充色的透明按钮， 多以非常简洁的线条和圆角组成， 不加修饰的功能说明直接衬托在按钮上。幽灵按钮为了让用户很快找到按钮的位置， 多没有修饰和特效， 为起到聚焦效果， 设计时可适当调整按钮的大小， 或将按钮悬浮在图片背景上、动画上等， 或排版的时候将其放在较醒目的位置。 在UI的布局中， 常见的有标题正文型、左右框架型、上下框架型、封面型、Flash型、综合框架型等。目前， Flash型采用非常流行的Flash动画效果画面， 页面内容随时间变化， 所表达的信息更丰富， 具有较强的现代感和视觉冲击力。有的设计感极强， 可以跟传统的多媒体相提并论。通常人们在看到新事物时， 自然会通过联想将旧有经验与之对应。但是无论用什么样的框架， 都应该遵循最基本的规律和原则， 相关设计通常把标识信息放在界面的左上方位置， 版权说明信息则习惯性地放在界面的最下方。 留白是中国传统艺术创作的常用表达方式， 其源自中国的书画， 为了使画面更协调、更美丽， 艺术家在某些地方有意留出空间， 增加美感， 给人以无限想象的空间。留白也经常被运用在软件交互的界面设计中， 特别是导航栏、菜单栏、弹出窗口等， 通过对图形化、符号化的细节把握， 每个模块的简化设计都需要经过科学的测试和检验。设计师通过扁平化版式