网站地图 加入收藏 设为首页 原创论文网,覆盖经济,法律,医学,建筑,艺术等800余专业,提供60万篇论文资料免费参考

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

作者:原创论文网 时间:2018-08-08 09:08 加入收藏
  摘要:随着软件设计的快速发展, 界面设计逐渐成为产品的重要卖点。当下, 互联网的运用范围越来越广泛, UI界面设计也越来越受重视。简洁美观、色彩奔放、舒适友好的扁平化界面设计作为一种鲜明的美学风格, 能给人带来较好的感官享受, 提升产品价值, 满足人们的多元化需求。
  
  关键词:软件交互; 界面设计; 扁平化;

平面设计
  
  UI是用户界面 (User Interface) 的缩写。UI设计是指人机交互的媒介, 包括用户操作的流程设计、操作规范及界面美观的图形设计, 包括可用性及可行性分析、GUI (图形用户软件界面设计) 、界面用户的相关测试等。
  
  在产品的交互中, 能最直接能看到、感受到的就是软件界面的色调、风格和操作。界面设计大致包括三个方面:界面的外观设计、界面的交互设计以及界面设计的交互合理性和易用性。
  
  一、交互设计及UI扁平化设计特征
  
  交互设计从可用性和用户体验两个层面进行分析, 关注“以人为本”的用户需求。交互产品的界面是人机信息交互的枢纽, 是人和产品或服务的一种互动模式, 通过用户的操作过程, 达到用户的使用目的或是高效使用产品。
  
  UI扁平化设计特征有五种。一是拒绝特效, 即所有元素都不加修饰, 如阴影、斜面、突起、渐变等, 图片框、按钮、导航栏都尽量保持简洁。设计中的各层级中没有明显的区分模块, 如背景图、前景图、按钮、文本、导航等。
  
  二是简单元素, 即使用简单的UI元素, 如按钮和图标, 常用矩形、圆形、方形等简单的形状。元素间相互独立并尽量达到简单直观的效果, 还可通过文字图形的空间组合, 表达和谐与美。
  
  三是注重排版。扁平化设计要求元素更简单, 排版就显得更为重要。字体和字形通过版式来区分各模块。通过排版引导客户, 交互模块元素注重增强易用性和交互性。
  
  四是重视色彩。扁平化设计中, 界面拥有更大胆的色调。UI界面中一般不多于3种色调, 但是在扁平化设计中平均会使用6至8种颜色, 而且色彩更纯、色调更有活力。
  
  五是追求极简。UI扁平化设计中应尽量避免不必要的修饰, 保持最简单的色调、文本、图形。
  
  二、美学在UI扁平化设计中的表现
  
  (一) 整体与简约
  
  在设计中, 整体决定部分, 部分依从于整体, 两者相辅相成, 互为作用。在互联网的时代, 界面构成要素中除了文字和图像以外, 还包含声音、视频和动画等新兴的多媒体元素, 其在增加了UI界面生动性的同时, 也使界面设计者考虑更多的合理性运用。点、线、面基本形态作为UI设计中的视觉传达要素, 共同构成了软件界面交互设计, 但是整个版面并非是各类元素的简单相加, 元素间相互联系、相互制约以达到传达信息的目的。
  
  UI扁平化设计应以精简为准则贯穿于整个设计中, 精简并不是指内容少, 而是注重重点的表达, 在视觉上也要遵循用户的视觉逻辑。设计前期, 设计师了解界面内容和性质后, 需要对整个布局进行构思, 简单画出基本框架, 并且与客户和开发人员进行有效的沟通, 最终确定界面的基本雏形和流程, 从整体的构思再到细节的局部, 从每个表格、按钮、菜单等细节元素再到整体的效果。
  
  在很多扁平化的UI交互设计中可以看到若隐若现的幽灵按钮。所谓的幽灵按钮, 其实就是无填充色的透明按钮, 多以非常简洁的线条和圆角组成, 不加修饰的功能说明直接衬托在按钮上。幽灵按钮为了让用户很快找到按钮的位置, 多没有修饰和特效, 为起到聚焦效果, 设计时可适当调整按钮的大小, 或将按钮悬浮在图片背景上、动画上等, 或排版的时候将其放在较醒目的位置。
  
  在UI的布局中, 常见的有标题正文型、左右框架型、上下框架型、封面型、Flash型、综合框架型等。目前, Flash型采用非常流行的Flash动画效果画面, 页面内容随时间变化, 所表达的信息更丰富, 具有较强的现代感和视觉冲击力。有的设计感极强, 可以跟传统的多媒体相提并论。通常人们在看到新事物时, 自然会通过联想将旧有经验与之对应。但是无论用什么样的框架, 都应该遵循最基本的规律和原则, 相关设计通常把标识信息放在界面的左上方位置, 版权说明信息则习惯性地放在界面的最下方。
  
  留白是中国传统艺术创作的常用表达方式, 其源自中国的书画, 为了使画面更协调、更美丽, 艺术家在某些地方有意留出空间, 增加美感, 给人以无限想象的空间。留白也经常被运用在软件交互的界面设计中, 特别是导航栏、菜单栏、弹出窗口等, 通过对图形化、符号化的细节把握, 每个模块的简化设计都需要经过科学的测试和检验。设计师通过扁平化版式设计赋予界面更多境界。一个优秀的界面设计师应有足够的文化底蕴和专业知识, 方能在简洁而不简单的UI界面设计上施展艺术能力。
  
  (二) 相似性
  
  界面上的有一些碎片化的单一设计元素, 通过归纳和分类可以找到其共性。相似性可以帮助设计师用关联性组织设计元素, 而关联性可以是颜色、大小、形状或方向。在扁平化的界面设计中, 通过切换界面, 每一个元素就像是一棵树上的叶子, 每一片叶子都有颜色、大小、形状、纹理上的变化, 但同时也具有相似性和整体性。它们既是单一的个体, 又在整体中相互作用、相互联系。用户在交互过程中, 感受到的不仅是树的高大魁梧, 同时也能欣赏到树叶的婀娜多姿。
  
  如微信的界面, 设计比较简洁和平实。所有的元素如按钮、菜单在风格和色调上保持一致, 用户能够很清晰快速地找到目标。
  
  在界面排版设计中, 设计师通过展示元素之间的关联性或者非关联性, 传递有组织、有联系的使用感。在一些大型的新闻类界面设计中, 除了最上面的导航栏, 整体大多被区块分成两个部分:左边和右边被清晰区分为两个独立的元素:左边部分是图文并茂的头条新闻, 右侧是浏览最多的新闻布局。尽管每个部分提供相同的功能--展示阅读的文章和图片, 但因为左边的面积大, 自然会引导读者花更多精力去关注头条新闻栏目。
  
  在界面的布局设计时, 设计师常以区块化分割界面布局。有的直接用线条和图片来区分, 也有通过留白、色块等艺术手段来切分界面, 给用户清晰的使用顺序, 并且能避免一些用户视线混乱和迷失方向, 感受到界面设计排版的舒适阅读快感。比如, 链接能够使页面和应用实现一些基本的内部交流, 它们必须和周围的其他元素区分开来, 而且有必要更加明显。文本链接中也存在几种相似性, 在样式、上下文、类别和目的上的差异;在边栏和主题之间都在相似性原则下统一被定义。
  
  (三) 接近性
  
  在任何一个软件界面中, 设计师都会把一些相互接近、有关联的元素聚集起来, 组团后形成模块单元。在某一个UI界面中, 主界面、二级页面、三级页面以及弹出界面, 各层级的风格样式都会保持高度接近, 并且在字体样式、配色、操作流程上保持相似性。假设一个界面中有一级标题、二级标题和三级标题, 虽然有可能出现在不同的界面中, 但是设计师在设计过程中会通过标题的背景色、标题的字体样式或者标题的大小来区别三者之间的关系, 做到有距离的层级感, 同时也要保持相关性。
  
  如果界面上有很多操作按钮, 在排版时需要考虑其功能、作用、重要性和操作方法等。在扁平化设计中, 用色彩来区分按钮的层级关系是最常用的方法。设计师可提炼最有冲击力的颜色作为主要按钮的颜色。在次级按钮的颜色选择上则要依据主要按钮的色调调整色相、饱和度等色值, 也可通过调整按钮大小或者在按钮文本说明上进行区分。如设计按钮样式, 分为默认、悬浮、触发、已访问四种样式。从配色和外形上都有规范统一, 能使用户一目了然, 提高可识别度, 同时又要有细微的区分。好比一个按钮的效果, 当鼠标移动到它上面有颜色的变化, 当用户点击时有凹进去的效果, 这样的交互设计很符合人们需要。
  
  层级的接近性原则在设计上可以让用户非常简单地去操作界面, 能有效提高工作效率。用户的一切需求应随着界面的不断切换实现交互。如文字排版, 用简单的CSS样式就能实现层级关系, 最重要的是要在整个设计中都能考虑到这个原则, 并将其运用于全局之中。
  
  (四) 图底关系
  
  在空间设计中用得最多的就是图底关系。在界面层级关系中, 可以把它看成是本书, 一层层地叠加实现界面效果。最前面的页为前景, 最后面的是背景。在整个界面中, 用户视觉的起点最接近自己的元素。在UI设计中, 设计师充分运用色调、排版把前景、景以及中间的很多页面区别开来, 让用户一目了然。用户的需求也是通过视觉的层级来传递, 借助自然的视觉路径进行操作。比如, 为了强调主要内容可以把背景设计成模糊虚化的效果, 让内容和背景有效分离, 还可以调整内容上的文字大小、增强文字色彩色调的对比度、选择较粗的字体等方法。
  
  如一个很复杂的界面布局效果, 其中包括图片、文本、颜色和形状的组合, 则可运用图底关系将各元素的结构有效模块化, 虽然很复杂, 但看上去很清晰。这些不同的元素能够快速定义什么是连续的内容 (图) 以及什么是连续的结构和背景 (底) .
  
  在设计过程中, 设计师必须充分考虑到界面布局规范及合理化, 按照人们自上而下、从左往右的阅读习惯, 常用的按键功能图标要确定用户操作的移动范围和距离, 避免鼠标反复移动带来的负面影响。扁平化界面整体应简洁易用、现代时尚, 主要功能操作是交互的核心所在, 不常用的操作区域可设计收缩模块或暂时隐藏。这样既满足了用户的操作流程, 也能提高软件交互的效率。
  
  结语
  
  扁平化的界面设计抛弃了传统的注重视觉刺激, 不具有审美的持续性。表达了用户对于美及使用的需求。设计师应以人为本, 更加注重对软件产品本身的功能、信息的表达。在UI的发展历程中如何将视觉设计、美学原理以及软件交互的设计规范有效结合, 更合理地开发设计功能与产品有效的互动结合, 设计出符合人们审美的创新产品, 将是UI信息设计未来需要解决的课题和不断努力研究的方向。
  
  参考文献
  [1]库尔特·考夫卡。格式塔心理学原理[M].黎炜, 译。杭州:浙江教育出版社, 1999.
  [2]史蒂夫·克鲁格。网站可用性测试及优化指南[M].袁国忠, 译。北京:人民邮电出版社, 2010.
  [3]尼尔森。打造高可用性的移动产品[M].牛化成, 译。北京:人民邮电出版社, 2013.
  [4]杰西·詹姆斯·加瑞特。以用户为中心的产品设计[M].范晓燕, 译。北京:机械工业出版社, 2011.
  [5]杰夫·约翰逊。理解UI设计准则[M].张一宁, 译。北京:人民邮电出版社, 2010.
  [6]希夫曼·卡纽克。消费者行为学[M].江林, 译。北京:中国人民大学出版社, 2007.
UI界面设计中展示的美学原理相关文章
重要提示:转载本站信息须注明来源:原创论文网,具体权责及声明请参阅网站声明。
阅读提示:请自行判断信息的真实性及观点的正误,本站概不负责。
别人都分享了,你还在等什么?赶快分享吧!
更多