探析以用户为中心的UI设计

李迪雅

摘 要：探讨UI设计如何提升产品的用户体验，以达到更好的人机交互，从而达到产品整体使用感受的提升。从用户体验和UI设计的核心定义出发，介绍了用户体验及UI设计的职能以及二者的关系。通过对案例的研究分析，总结出以用户为中心的UI设计原则，以明确UI设计的本质是以用户为中心。

关键词：UI设计；用户体验；界面设计

随着社会收入水平的增加，人们开始不满足于产品的基本功能，要求更加舒适的使用感、更加优美的外观，以用户为中心、以人为本越来越被重视，于是“用户体验”这个词被越来越多地提出来。用户体验（UE）是指用户在产品使用过程中建立起来的一种纯主观的感受。而用户体验设计（UED）则包括了前期用户研究、中期UI设计以及后期产品迭代等等。“UI”即User用户和Interface界面的缩写。所以，UI设计，即用户界面设计，是指对用户界面的界面美观、操作逻辑以及人机交互進行整体设计。好的UI设计不仅要让产品变得美观实用，更加要让产品的操作简单舒适，充分体现产品的定位和特点。

一、UI设计概述

（一）UI设计的职能

UI设计师的职能大体包括三方面：

1.用户研究

用户研究是进行UI设计的前期准备，主要目的是在产品有了明确的市场定位后，明确产品的目标用户，了解目标用户需求以定义产品设计的导向。通过对用户的知觉特征、任务操作特征、认知心理特征的分析，以明确用户痛点，进而细化产品概念。

2.交互设计

交互设计（Interaction Design），是定义和设计人造系统的行为的设计领域，它定义了两个或多个互动的个体之间交流的内容和结构，使其互相配合，从而共同达成某种目的。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求[1]。

产品和用户之间的互动是情感交流的过程，也是信息交换的体现。交互设计以实现产品的易用性以及良好的用户体验为目标，能够更好地实现人与产品之间的交流与互动[2]。

在设计流程中，交互设计的工作是在明确用户需求后，准确定位用户痛点，以用户需求为中心进行交互动作的整体设计，进而设计出一套完整规范、交互动作流畅的交互原型。

3.界面设计

UI即 User Interface（用户界面）的简称，UI设计最终的表达方式也终将归于对用户界面的诠释与表达。当设计师需要把人、动作、工具或媒介、目的和场景等五要素合理整合到一起去完成一个界面并使用户获得良好的使用体验时，他所遵循的规律必然有别于产品设计师，后者考虑的主要是如何合理运用结构、材料、色彩等物理属性去实现产品的某项功能，而前者则需要考虑用户主观因素与产品的适应性[3]。

（二）UI设计的特点

UI设计作为一个新的设计领域，既与视觉设计、产品设计息息相关，又不尽相同。UI设计为产品用户界面的整体设计，集用户研究、交互设计和界面设计为一体，既要兼顾产品界面的实用性与美观性，更要注重产品人机交互带来的良好用户体验，优秀的UI设计考验设计师对视觉设计创意与想法、对人机交互的清晰认知以及对用户需求的准确理解。

（三）UI设计与用户体验的关系

《设计心理学》一书中曾提到过这样一个故事：作者的一位朋友在欧洲时曾被困在某城市的邮局门道里出不来，最后是外面的人推开了旋转门才得以出去，其实被困住的原因很简单，只是由于门上的机关太过隐蔽，作者的朋友没有看到，才导致他没有找到开门的正确方法。设计人员只注重了门的美观性，却没有注重门的实用性，导致用户在使用过程中不得其门而入[4]。

这个例子恰好说明了虽然UI设计更加注重界面的设计，但用户的使用感也是包括在界面之中的，产品的便捷性、易用性，包括用户使用时界面结构与界面色彩的舒适度都与UI设计息息相关。好的设计不仅要有美观的外表，更要有让用户能够看懂的操作以及使用过程中舒适的感觉。

二、案例研究——好奇心日报UI设计的用户体验元素分析

（一）界面分析

好奇心日报的LOGO为黑底上面一个黄色的Q，Q既可指代Question，也可指带“好奇心”中的“奇”。图标简洁不花哨，黑底黄字视觉冲击力很大，容易抓住眼球，在花样繁多的新闻类app中吸引用户的视线。

《好奇心日报》的主色为黑黄搭配，黄色给人活泼、有趣的感觉，而黑色则让人觉得沉稳，黄色与黑色搭配既能展现属于年轻人的活力，又不会给人太过跳脱，不够稳重的感觉。好奇心日报的欢迎页面为大面积的黑色上点缀少量的黄色LOGO，这样既保证了界面的简洁，也避免了黑色过于沉闷的弊端，并且也造成了足够的视觉冲击力。

《好奇心日报》的排版采用了N字形列表式图文1：1的纵向排列，期间穿插横向的小版块，列表式的排版能够更好地凸显文章的标题，使用户能够毫不费力地捕捉文章所要表达的中心思想。N字形布局对用户有着纵向引导作用，使用户的重点在左侧文字标题，有利于使用者快速抓取文章内容。阅读内页的布局摒弃了一切不必要的繁杂内容，使用户能够集中注意力在文章内容上，文末的标签及推荐也没有与文章毫无关联的情况出现。

《好奇心日报》极其注重细节：将大部分功能整合到底部悬浮菜单内，首页仅仅留下NEWS和LAB两个部分，悬浮菜单的原型仍然是抽屉式或者汉堡式菜单，但放在底部更加便于操控，浏览新闻时上滑菜单消失，下滑菜单出现，在阅读体验上更加舒适；下拉刷新Gif选用了画风清新可爱的素描动图，加深了使用时的情感体验；过渡Gif也同样的素描手写风格，应用在文章加载里，能有效缓解用户在等待文字、图片加载时的焦虑。

（二）竞品分析

1.今日头条

今日头条的座右铭是“我们不生产新闻，我们只做大数据的搬运工”。这句话虽是玩笑居多，但想要靠算法取胜的今日头条，只让我们感受到了遍地的八卦新闻，首页充斥着“UC震惊体”与大量的广告，真正可以看的内容寥寥无几，对阅读内容有质量要求的用户肯定会转移向垂直专业的新闻app。

2.澎湃新闻

由纸媒体过渡的新媒体，内容比较正式，打开后一股“老干部”气息扑面而来，适合平时有看纸媒体习惯、关注时政的用户。交互设计方面有着纸媒过渡的app的通病，用户体验不算好，若再不改进恐怕会流失不少用户。

（三）总结

《好奇心日报》的成功证明了一个产品在战略阶段就应该考虑用户体验，产品从始至终考虑用户需求，抓住用户痛点，才有吸引用户的资本，而在后期维护与产品迭代时更要时刻注意用户体验并及时做出反馈，以良好的体验感和优质的内容留住用户[5]。

三、以用户为中心的UI设计原则

（一）可用性原则

产品的设计要清晰明了。当用户打开一个app，却不知如何下手，那么就算这个app设计的再漂亮也是失败的。设计要清晰明了，让用户一看便知如何操作的界面才是好的界面设计。

（二）易用性原则

产品的易用体现在交互层级的简单高效。交互层级太过复杂会让用户产生厌烦感，比如一个两步就能做完的交互动作，为了显示设计师的界面美观硬是用四五步绕个大圈子才做完。设计的最终目的是为了服务于用户，为了其他忽略用户体验就有些舍本逐末了。

（三）一致性原则

完整的界面必定是一致的，进行设计之前列好规范会让界面的美观大大增加，用户体验也会很好。人是很敏感的动物，很容易在同类的物品中发现异类，并且会不习惯，如果一个app每个页面的前进、后退、进入、退出都长得不一样，那么用户在使用过程中会极其别扭，从而产生排斥心理。

四、结语

在用户界面设计中，UI设计的本质是考虑用户需求。用户的敏感、挑剔决定了产品若想脱颖而出，必须使用户感到舒适并不会厌倦，这就考验设计师对用户体验的体会以及创新的能力了。

所以，一个好的产品，首先要有好的用户体验，其次要有反应快速的用户追踪，最后还需要适当的创新使用户眼前一亮。

参考文献：

[1]李世国，顾振宇.交互设计[M].北京：中国水利水电出版社，2012.

[2]李静，李世国.从交互设计的视角探索人与产品的情感交流[J].包装工程，2008，（09）：151-153.

[3]魏玮，宫晓东.基于用户体验的人机界面发展趋势[J].北京航空航天大学学报，2011，（07）：868-871.

[4]唐纳德·A·诺曼.设计心理学[M].北京：中信出版集团，2015.

[5]黄晟.基于用户体验的APP设计研究[D].陕西科技大学，2012.

作者单位：

武漢东湖学院