基于用户体验的UI设计要点分析

2018-01-08李时颖马俊伟

电脑知识与技术 2017年36期

李时颖　马俊伟

摘要：UI设计需要从信息传达、视觉感受、交互过程等方面充分考虑用户体验才能更好的服务于人机交互。此外，“扁平化设计”策略的运用能够让与用户的信息交互更为简明高效。

关键词：UI设计；用户体验；交互体验；扁平化设计

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）36-0070-03

UI设计作为一种服务于人机交互的设计领域，所具有的重要功能就是让信息传达与交互在一个友善、明晰、便捷的界面中进行，是一项综合了审美感受与设计观念的复杂活动，需要考虑非常多的因素。好的UI设计实际上应该是一个很便捷的工具，要让用户觉得好用、方便，同时它又应该是美的、令人愉悦的和有趣味的。UI设计必须服务于用户，因而在设计时要从用户体验的角度进行充分思考。

下面，本文将从用户体验的角度出发，分别从用户对信息获取与使用的体验、用户的视觉体验、用户的人机交互体验三个方面探讨UI设计的要点，最后，本文阐述了如何运用“扁平化设计”策略让信息交互更为简明高效。

1 UI设计中要充分考虑用户的信息获取与使用体验

UI设计要充分为用户考虑，让信息以一种有序、明晰的方式传达给用户，并且尽可能考虑到用户解读信息时的认知规律，避免让用户产生解读困难或者误读。对于手机app，用户往往在很短的时间内就能分辨出一个app是否好用，好用的app总是让人不需要花费太多精力就能迅速掌握使用方法，并能轻易的获得想要的内容。

1）明确信息的层级关系与重要程度

UI设计很重要的作用之一就是将信息传达视觉化，因而在设计之前先必须先明确信息内部的逻辑、层级关系，区分出重点信息、次要信息、补充信息，从而确定信息的呈现方式。后续的设计工作都要以此作为基础

2）清晰完善的提示系统

用户面对的往往是超文本形式的复杂信息，在阅读时需要快速浏览要点、经常切换内容的层级、返回或者前进、或是需要快速定位到新的关键词。此时，在UI设计中建立一套方便的提示系统和常用功能的快捷接口就显得极为重要，提示系统在界面中即不能干扰重点信息的呈现，又能方便用户及时发现。

3）版面设计符合阅读习惯

UI版面设计包括页面的结构、页面内板块的分布、文字的颜色、大小、分布、间距等等很多内容。好的版面设计力求让用户获得一种舒适的阅读体验。

UI版面设计所遵循的一个基本原则就是版面中的各板块分布要和谐，重点突出，同时，排版设计必须符合人的视觉规律。人们看东西时一般习惯于从左到右、从上到下，或者顺时针运动，这种方式人们会觉得阅读时的眼球运动较为流畅和轻松，排版设计时一般要求尊重这一视觉习惯。

此外，版面设计尽可能要统一但要避免单调。版面设计界定了信息的展示范围和信息的分布方式。好的版式设计会在在阅读时为用户建立一种阅读秩序和阅读惯性，并在用户适应此种秩序之后产生一种心理预期，即同类信息仍然以相同的版式出现。但如果所有页面的版式都一成不变，就会给用户带来视觉倦怠，因此当信息的层级或者类别发生变化时，最好让版式发生一些改变，但所有的版式都应该统一在一个较为协调的风格内。

4） UI设计中的符号性视觉语言的运用

符号性的视觉语言已经成为现代生活中司空见惯的视觉传达形式，比如洗手间标识图形、婴儿头像图形、箭头图形、各种交通标志等等。很多符号性的视觉语言的使用在人们的日常生活中已经约定俗成，具有非常明确的、广为认可的含义，如电商购物网站的购物车图形、如天气预报类网站代表晴天、阴天、雨天的图形，以及分别代表播放、暂停和停止的三角形、双竖线和方形。在UI设计中合理的选择和运用符号性的视觉语言就显得十分重要，在UI设计中，应当尽可能使用广为熟知的符号性语言。选择人们熟悉的符号性视觉语言相比于一套全新的符号语言系统更容易让用户迅速获得提示，产生一种熟悉的自信感，也避免发生认知障碍从而产生解读困难。更利于交互过程的顺利和流畅。

5）尽可能将抽象的信息视觉化

很多信息都是以数据的形式呈现，数字化的信息会有一种精确、令人信服的感觉，但是大量的数据却会让用户感觉枯燥和乏味，用户在直接阅读数据时较难获得一种关于数据间关系的直观认识。此时，尽可能将数据等抽象化的信息转化成为视觉语言，能够获得更好的传播效果，比如充分运用图表，将抽象数据转化成图形，能够让用户迅速明确数据间的逻辑关系并获得直观的印象。如支付宝账单统计功能将各类开销用饼图的方式进行呈现。

6）信息呈现单纯明确

UI设计中，要尽可能的对信息进行归类，并且在同一个页面中，信息的呈现尽可能简单、单纯，也就是说，同一个页面的内容尽可能不要过于复杂。当该页面是一个信息列表时，也应该通过罗列简明的主题来快速的标识列表内容。

2 UI设计中要充分考虑用户的视觉体验

好的界面设计应该具有美感，为用户带来方便的实用功能的体验同时，提供一种令人愉悦的视觉体验。如何让UI设计更具审美价值，是非常值得考虑的问题。

1）视觉风格的建立和统一

UI界面往往会确立整个app给用户带来的第一印象，清新明快、理性简洁或是炫酷特别，这些印象往往会成为一个用户选择使用一个app的非常感性但是很重要的理由，一个界面的视觉风格往往由整个界面的主体色彩、图标的风格形式等对具体的视觉元素的设计表现出来。整套UI设计都需要统一在明確、稳定的视觉风格内。

2）一套精心设计的图标与按钮

一套精心设计的图标和按钮能让UI设计在尽可能的简洁明确的基础上获得一种精致感。好的图标和按钮应该是简明的，让人迅速通过图形语言识别出图标和按钮的含义。但是即使是最简单的、广为使用的符号、图形仍然可以通过对线条、色彩及细节设计呈现出不同的视觉效果，就像中国的汉字，同一个汉字用不同的字体书写就展现出不同的气质。并且，应当将图标、按钮的设计统一在整套界面的视觉风格中进行整体考虑。

3）基于色彩心理学进行色彩设计

色彩心理学理论中，色彩具有明显的象征性。一般来说，白色带来纯净、干净、轻巧的感觉，白色为主的UI界面会让人感到干净舒适；灰色让人感觉优雅，沉稳、理性，使用得当会带来高级感，使用不当则会显得脏；黑色能够象征权威、高雅，同时也显得低调、深邃。当黑色与有彩色搭配时，强烈的明度和色相对比能够营造一种创意的、另类、现代的气氛；蓝色系带来一种理性、可靠、专业的印象，如支付宝app，使用蓝色作为主色调就会带来一种专业可靠地感觉。此外，蓝色还有一种思考、哲学的知性意味，例如知乎app也使用蓝色作为主色调；大地色（例如金棕、米色、咖啡色）带来一种平和、亲切、包容、温暖的印象；金属色（金色、银色）带来一种金属光泽的华丽感和现代感，但金属感同时也会显得冰冷；红色充满热情，有一种热情、热闹的气氛；粉红色、玫红色则是非常具有女性色彩的颜色，让人感到甜蜜、浪漫、唯美、温柔；橙色很有活力，有一种热烈、向上的气氛；黄色因为明度极高，有非常强烈的提示作用，大面积使用会带来一种躁动感；绿色给人带来新鲜、自由、和平、清新自然的感受，很多蔬果类的电商app都很喜欢使用绿色作为主色；紫色带来优雅、浪漫，以及神秘、未知的气氛，容易让人联想到变幻莫测或精神世界有关的事物。

综上所述，所有的颜色由于自己的色彩属性都会带来一种天然的心理感受，UI设计时色彩的运用如果与设计的主题、内容搭配得当，就会给用户带来一种舒适感和和谐感。一般来说，UI设计应该充分考虑到设计内容的行业气质和类型选择恰当的配色方案。

3 UI设计中要充分考虑交互效果的体验

人机交互是UI设计中需要考虑的一个关键问题，事实上，每个用户在使用一个app、或者机器时都会有自己的使用习惯或者自己理解信息的方式。人们在使用一个全新的界面时，其实是一个观察、判断和探索的过程，用户会根据界面的设计、分布、提示去猜测可能的使用方法或者交互规则。好的交互设计能够给用户足够清楚地提示，让用户在交互过程中迅速学习到一种人机交互的“接口”，而不会让用户不知所措或者频频碰壁。同时，除了让交互过程更顺利流畅，好的交互设计还能带来具有更多参与性的丰富的趣味。

1）设计师的换位思考

在进行交互过程设计时，设计师必须要能换位思考。必须想象自己是首次接触此界面的使用者，通过一对系列问题的考察，例如：我有什么需要，我希望得到何种提示、重要的按钮是不是容易被察觉，是不是能够获得操作正确还是错误的及时反馈，是不是能够及时返回到前一步操作等等……得到一系列解决方法，从而构建整个交互过程的框架。

2）运用动态效果增加交互的趣味性

当苹果手机第一次在UI中使用动态图标和按钮时给使用它的用户带来了非常大的乐趣，人们长按一个图标，它便晃动起来，提示你它在等待你的下一步操作。事实上，动态效果的使用打破了传统的简单的超链接式的交互方式，提供了富有趣味的交互提示。比如可以通过图标颜色的闪动、变大、缩小等等给予用户明确的提示；或者通过图标在某个方向的运动引导用户的视线，为用户提供必需的线索；还有一些有趣动态效果，比如qq、微信中发表生日祝福时接收方会收到弹幕式的鲜花及蛋糕，感受到一种强烈的气氛；将一个图标删除后它会自动燃烧殆尽或变成烟雾消失等等，好的动态效果即能有效的吸引并引导用户完成交互，同时还让用户体验到充分参与的乐趣。

3）设计富有创意的交互方式

当用户点击一个按钮，信息的呈现及反馈以一种明晰但是不同于心理预期的方式弹出或出现时，就会给用户带来一种新鲜感。富有创意的交互方式会带来一种游戏般的乐趣，让人机交互变得充满探索性。但交互方式不能因为追求趣味变得过于花哨、晦涩难懂或者有歧义。

4 让信息传达更简明的“扁平化设计”策略

此外，运用“扁平化设计”策略能够让UI设计更简洁明晰。使得人机交互更为高效。

扁平化设计概念，即“Flat Design”，这种设计思想早在二零零八年时，就由谷歌公司提出。该设计思想的核心意义是：去除3D、立体效果、肌理、渐变等复杂的装饰元素，通过使用极简、抽象、几何及符号化的设计语言传达视觉信息。

比起丰富、个性化的视觉体验，扁平化设计更强调“信息”本身的传达是否突出、鲜明。

UI设计作为平面设计中特别强调人机交互功能的应用领域，需要考虑到信息传播的效率，当信息以简明、直观的方式让用户快速理解事物的工作方式和内在关联时，信息传播就是高效的。扁平化设计所具有的单纯的视觉效果和明晰的视觉逻辑，在特别强调信息传播效率时，能够成为一种重要的设计思想。

如今，Windows、iOS、Android等操作系统的界面设计、移动终端上的许多app界面都具有明显的“扁平化”设计倾向。

“扁平化设计”要想获得简介明快的视觉效果，而避免单调、冷漠的视觉体验需要精心设计版式、色彩、图标等视觉元素。

可以通过以下具体策略实施“扁平化设计”。

4.1 简化设计元素

UI界面设计一般由背景色、按钮、菜单栏、导航条、状态栏、图标等构成，其中每个部分都要由线条、色彩、文字、图案等元素构成。“扁平化设计”思想的核心就是通过简化设计元素最终达到一种简洁明晰的视觉效果，所以一般尽可能使用几何形代替较为边缘较为复杂的形体、去除过于复杂的细节，尽可能将繁杂的细节简化成为较为单纯的线条、色块从而让视觉语言更简洁。

4.2 运用色彩进行扁平化设计的策略

4.2.1 通过合理的配色直观的展示UI界面的框架

通过色块的大小、分布和关联，用户能够非常直观的确认一个UI界面的框架，迅速找到功能性的视觉元素，如导航条、状态栏、按钮、图标等等，合理的配色方案能够只用色块本身清楚地表明这些组件内在的逻辑结构和信息的层级关系。

4.2.2 运用色彩对比与调和突出重点信息、统一重点信息之外的内容

1）運用色彩对比突出重点信息

比起设计复杂的文字呈现和特殊效果，单纯的使用色彩对比来突出重点信息是扁平化设计的一个重要方法。

用黑白灰的无彩色作为背景色，用有彩色作为重点信息的颜色能够形成鲜明的对比。背景色一般占据整体界面的60%-80%的比例，无彩色不容易造成视觉疲劳，容易让人感到宁静与平和，同时，除了明度较为接近的白与黄、蓝、紫与黑，大部分有彩色都能在无彩色的背景上得到较为明显的突出效果。

补色和冷暖反差明显的颜色放在一起时能够带来明显的视觉反差，起到很好的突出重点和提示信息的作用。

2）运用近似色统一重点信息以外的内容

将除重点信息之外的内容统一在一个色调内。让它们形成一个相对于重点信息之外，对比较弱的整体。

3）离散化的色彩渐变

UI设计中，经常使用色彩渐变丰富视觉的层次感，当设计元素需要出现层次变化时，使用离散式的色彩变化代替使用连续渐变的色彩的层次在视觉上更简洁和富有趣味性。