UI界面设计

刘宝丽 孙丽娟 何燕红 刘海艳

【摘要】UI界面设计是整个系统的门户，其设计艺术和用户体验感两者都是组成这个门户的重要部分。本文综合考虑了色彩要素和网格排版的使用，结合UI动效和设计心理学，探讨了UI界面的设计思路。

【关键词】色彩;排版;UI动效;用户的心理

UI（user interface）就是用户界面的简称，主要针对软件，其作用仅次与整个系统的功能。它同时结合了计算机科学与认知心理学等多个学科，是计算机学科中的一股新鲜血液。色彩的意义、排版、图形的变化、纹理样式、巧妙的UI动效、深度的用户心理研究是用户体验感与实用性和简约性的重要体现。

优秀的UI设计师不仅熟悉功能而且了解用户的心理，他们往往把自己想象成用户，如果连自己都不满意的设计在他们眼里是不完美的。中国视觉设计师马哲认为设计即沟通，设计是追求美好体验，设计存在于任何一个细节中，设计是一种传统，是无尽的探索，是勇敢迎接挑战，是任何一种源于爱的东西。

一、设计的艺术

（一）色彩的意义

对于色彩要素的管理问题，UI设计应该综合分析各种因素之间的关系，并找到一个平衡点和亮点，使得设计方案具有更加强的目的性。色彩方案语言通俗易懂，能让用户直观感受。通过色相、色度和色调从而达到不同的感官效果。因此UI世界中色彩的意义并非常识那样简单，红色代表热情似火，蓝色代表冷静自由。很多设计师的配色世界里所表现的远远比看到的要多。界面的色彩与整体功能、用户的年龄、用户的性别甚至是用户的工作等都有极大的联系。在我看来可能正是色彩让用户感受到了活力，远离工作的压力。是自由，和平的颜色给作为音乐爱好者的用户灵感来源。是粉色与紫色亮丽而愉悦的氛围为年龄在15～25岁的少女抒写情怀。色彩并非是独立存在的艺术品，它与整个项目的主题功能紧紧联系，同时也拥有了画龙点睛的作用。

而研究显示大多数人更倾向于仅依赖2—3种色彩的简单组合。一个好的交互设计作品是将复杂点的概念转换成简单的、有吸引力的直观体验，用来供最终用户使用。标准色彩规范中要规定出主色、辅助色、装饰色。其中主色用量基本占据全部用色的75%，它将决定整个界面的视觉风格，因此主色选择至关重要。

（二）排版

在UI的排版中利用网格系统是非常重要的，它利用一系列垂直和水平的参考线将页面分割有规律的格子，并且将这一规则贯穿于整个产品设计中。网格系统是由瑞士设计师，约瑟夫·米勒-布罗克曼在《平面设计中的网格系统》一书提出，对设计界有着深远的影响。当多名设计师同时参与设计时，网格系统方便给出一个统一的框架去约束，从而提高效率。熟练运用网格系统能够让你的设计更加有秩序和节奏感，页面信息的展示更加清晰，从而提高阅读效率。对于强迫症的人群，缩短了设计的时间。对于页面大小相对限制的手机端UI来说外边距和水槽（如果一个页面有N列，那么水槽就有N-1列）的宽度至关重要，宽度太大，页面会变得宽松。宽度太小，页面会感觉比较“满”。

文字本身也能传达其他元素无法传达的信息，因此文字设计不仅美观更要实用。优秀的排版，不会让用户产生视觉疲劳，而应该让用户能轻松获取信息，实现人机有效交互。界面字体的数量一般控制在2～3种，多则容易混乱。字体的过小，容易损伤用户的眼睛，而太大则会迅速吃掉屏幕，破坏阅读连贯性。行间距应该是字体大小的120%，在手机端界面中细心的设计师也会注意字间距的大小。

二、用户体验感

（一）UI动效

UI动效是用户界面上最突出的元素。相对于文字和静止的图像，动态的更容易被发觉。用户的视线会不由自主的追寻动态的物体，这是一种条件反射。小部分被采用的动效，可以减轻用户的认知负担，防止看漏，从而更好的确立良好的层级关系。以用户为中心，充分体现界面的人性化和响应性。在UI动效后用户能更好的反馈，例如是否已经点击按钮或者当用户在做出重要决定时，在视觉上进行人性化提示的动效是加分的。当界面发生改变时，适度的界面动效，给予用户视觉缓冲效果。同時解说动画与视觉提示，为新手用户提供了极大的便利。

（二）设计心理学

用户的良好体验感往往来源于在使用过程中细小的心理问题。可能它微不足道但是却无形中节省了用户很多宝贵时间。当使用滚动条时，如果用户向左滑动时一般不会关注滚动条右端，因此在滚动条两端设置箭头。这个问题体现了游标移动到目标之间的距离、目标物的大小的所花费的时间之间的关系，同时也正是心理学家费兹的人机界面设计法则所研究的问题。对于那些会产生高风险的交互元素，设计师往往不希望用户能轻松点击，当删除按钮与其他常用按钮距离过于接近时，这会非常危险。在很多时候用户会常常怀疑自己可能患有选择恐惧症，但这实际上是选项实在太多造成的。席客定律指出反应时间与观察时间、阅读文字、移动鼠标和可能相似的答案总数有关系。因此减少所需要反应时间，降低犯错的概率，这会从很大程度上提高用户的效率。科学家发现人类头脑最好的状态能含有7+2或者7-2项信息块。这一原理也常常被应用于移动交互设计上，比如应用的选项卡一般不会超过5个。

三、结语

本文主要阐述了UI界面的设计思路，在设计时UI界面可以丰富多彩，但宗旨不应改变，它永远服务于用户，并且具有实用性和简洁性。熟练掌握色彩及排版，注重适度的UI动效和对用户心理状态的洞察，都是提升界面美感的重要途径。（通信作者：刘海艳）

参考文献：

[1]陈根.UI入门一本就够[M].化学工业出版社，2018.

[2]娜塔莉·娜海.UI设计心理学[M].中国人民大学出版社，2019.

[3]蒋飞燕.浅析色彩在UI设计中的应用[J].传播力研究，2019.