1、试论 UI 设计中视觉要素的优化控制 李洁琼 中国人民大学 摘 要： 信息化时代, 各种新的智能终端产品层出不穷。用户界面作为连接用户与产品的纽带, 出现的次数日益频繁。用户界面 (User Interface, 简称 UI) 设计, 即专门为各类电子产品界面所作的设计, 逐渐引起人们的关注。与传统的界面设计相比, UI 设计更加关注人机交互过程中的用户体验。如何才能设计出更受欢迎的 UI 界面, 已经成为众多相关人士讨论与研究的焦点。在这样的大背景下, 用户体验既是 UI 设计的起点, 同时也是 UI 设计的目标所在。要想真正设计出受用户欢迎的界面, 最主要的一点在于设计的视觉表现是否充分体
2、现了用户真实的需求、是否美观大方便于操作, 这不仅是本次研究的主要内容, 同时也是优秀 UI 设计的理想境界。关键词： UI 设计; 视觉要素; 优化控制; 作者简介：李洁琼 (1984) , 女, 云南人, 中国人民大学研究生在读, 研究方向:视觉艺术设计。1 图形优化控制点动成线, 线动成面, 面动成体。点、线、面依然是 UI 设计中的基础元素。我们若想形成某种静态图像, 只要将其基础元素按我们预想的轨迹运动, 扩大或缩小。在 UI 视觉设计中, 图形要素的设计强调规律性和合理性。规律性在于点、线、面的运动都不能杂乱无章, 要有迹可寻, 它们的运动轨迹要严谨有序, 图像设计无论扁平化抑或拟
3、物化, 都追求形式与秩序上的美感。合理性在于布局与搭配的变化。一个界面由多种图像元素组成, 图像的位置与颜色如何在整体规划中做到主次有别、和谐统一, 要在无数次变化中反复调整, 直至找到最佳构图。这种变化并非随心所欲, 而是要根据一定的美学原则, 同时还必须具备科学性。以手机 APP 的应用图标为例, 设计时如果遵循图形元素定位规则 (即相同尺寸的画布下, 方形、圆形、竖直矩形、水平矩形所界定的图标在画面中应该占有不同比例) , 这样即便图标形状多样, 在手机桌面上也能基本实现统一性并具有平衡的美感。在图形图像创作过程中, 适当地运用数学公式和标准几何图形甚至黄金分割, 可以使图形在传达意义之
4、外具备严谨的美感。2 文字优化控制在移动 UI 的视觉设计中, 文字的地位不容小觑。在目前的视觉语言设计中, 承载信息的要素趋于多元化, 但文字的主导地位仍然不可动摇。为了使得用户在第一时间得到界面的准确信息和核心内容, 文字的设计应当简洁明了、言简意赅。除此之外, 为加强文字的视觉冲击力与内容感染力, 文本的字体、大小、颜色以及排版方式应当符合人机交互界面设计原理, 不能以个人或少数人喜好、习惯而随意排版。在字体的优化上, 2015 年苹果 IOS9 推出“苹方黑”字体, 取代之前的“华纹细黑”;安卓 Material Design 推出“思源黑体”取代之前的“Droid Sans Fall
5、back”。两种新字体都不约而同地展现出良好的适配性, 即在不同分辨率设备上, 可以最大限度保证文字清晰易识别。如此的发展趋势, 不难看出在文字设计上, 清晰易识别是第一优先的。琳琅满目的字体各有各的性格, 选择符合产品气质的字体、了解字体的版权归属、学习创造新的字体是UI 设计中特别需要注意的问题。3 色彩优化控制五彩斑斓的色彩构成了美妙的大千世界, 也是人类生活中必不可少的信息来源之一。根据人的视觉原理, 人在看到一个界面时, 首先映入眼帘的是色彩, 其次注意的才是文字。根据这一现象, 在移动 UI 的视觉设计中, 色彩的运用则显得意义非凡, 甚至可以说, 色彩的选用和搭配是否得当决定了用
6、户是否有兴趣去了解界面所包含的内容。电脑软件技术的发展, 为移动 UI 的设计提供了众多颜色可选项, 赋予了色彩高度的差异性。比如京东红、淘宝橙、OFO 黄、微信绿、去哪儿青、支付宝蓝、雅虎紫这些品牌产品选用的颜色, 都获得了用户的认可。产品主色的选择需要考虑用户心理、行业区别、品牌理念等因素。主色确定之后, 配色方案的形成需要根据色彩基础知识, 灵活运用色彩搭配技巧来合理配置。在一个优秀的 UI 界面中, 如何结合作品主题, 确定主色调和配色方案, 然后依据美学原理来选择主次元素的明暗饱和度、颜色种类及数量搭配, 以调配设计出主次分明、和谐统一、简练深刻的色彩界面, 可谓是任重而道远。4 版
7、式优化控制在 UI 设计中, 版式布局十分重要, 版式布局设计是指视觉元素 (文字、图像、图片等) 按照一定规律排列, 方便人们更好地理解体会所表达的艺术技巧和内涵, 也能很充分地体现其设计质量。在一件质量优秀的作品中, 除图像、文字和颜色元素之外, 该作品的本质就是布局。在移动 UI 视觉设计中, 由于移动产品 (手机、i Pad 等) 显示屏幕不同, 设计时的大小尺度将由设备来决定, 同时也决定着版式布局的相关设计。比如手机屏幕空间有限, 上下布局方式更利于用户浏览;而 i Pad 屏幕较宽, 左右布局方式可以让屏幕空间得到充分利用, 使信息展现更加饱满。布局过程中特别要注意的是, 与用户
8、直接进行交互的按钮元素, 其位置和大小势必要考虑用户的使用习惯以及手指厚度, 避免因用户手指尖接触面积不同, 导致不易使用等困扰。如何合理地在移动 UI 视觉设计中使用排版布局, 使界面设计更满足用户视觉与心理两个方面的感受?第一步, 应明确主要内容与次要内容之间的关系。要重点探索如何才能突出主体部分, 而避免次要部分过于醒目。第二步, 排版布局要科学合理, 比如使用栅格系统来帮助排版。第三步, 局部风格稍加变化, 引导浏览者有重点地阅读, 避免浪费时间, 使整个页面内容完整地表达信息。5 视觉感知优化控制5.1 认知心理与视觉感知认知心理学认为:“人不是被动的刺激物接受者, 人脑中进行着积极
9、的、对所接收的信息进行加工的过程, 即认知过程。”通常在进行 UI 设计时, 设计者更多的是上来就考虑如何编程实现界面功能, 而忽略了对用户认知特性的分析。事实上, 了解并遵循人类认知心理是进行 UI 设计的基础。合理使用认知心理学中的规律, 对 UI 设计具有很强的指导意义。首先, 简洁性。人的知觉有一种“简化”的倾向, 所谓“简化”并非指界面中包含的元素少, 而是一种将任何元素以尽可能简单的结构组织起来的倾向。知觉简化的特性对人的认知产生两个方面的影响:一方面体现在人们对于简洁、对称、规则图形的喜好;另一方面, 简化、规则的倾向, 使人们的活动变得简单、程序化。将简洁性的概念运用到 UI
10、设计中, 体现在一个页面中的视觉重点有且只有一个, 避免强调过多的元素, 过多的给予对于用户来说其实是一种负担。少即是多, 是互联网时代的信条。其次, 整体性。格式塔心理学在视觉领域的观点是:人的视觉是具有整体化处理图形倾向的, 因此, 当一个不完整的图形出现在人的视觉当中时, 人的视觉思维会倾向于自动将其补全, 使其变成一个完整的图形。格式塔心理学在 UI 设计中主要应用于信息组织方面。其中的邻近性原则是指在空间上距离相近的元素容易被视为一个整体。相似性原则是指在空间上具有相似特点 (形状、颜色、方向) 的元素容易被视为一个整体。这些视觉组织原则在设计界面时可以合理利用, 把相关的信息放得近
11、一点或把相关的信息用相同的形状、颜色等表示, 这样使信息看起来是一个整体, 用户就会快速准确地察觉到它们。最后, 记忆负荷。在人机交互过程中, 也需要处理记忆这种高级认知过程。记忆分为短期和长期记忆。日常生活中人类一般运用短期记忆, 短期记忆的保持时间短, 存储容量小。鉴于短期记忆的这种特性, 在进行 UI 设计时, 应当以直观明了的方式在界面突出核心信息, 刺激用户神经, 加强其短期记忆。当用户凭借短期记忆无法完成任务时, 适当地施以援手将是一种明智的设计。以手机百度为例, 在其搜索界面, 除了历史记录可以帮助用户克服因短期记忆造成的信息不准确外, 关键词的关联信息还可以帮助人们记忆起相对完
12、整的信息。另外, 在 UI 设计中还要考虑一致性, 在类似的情况下, 必须有一致的操作序列, 在提示、菜单中必须产生相同的术语, 自始至终使用一致的命令, 这样便于用户记忆。5.2 经验与感知事先知道的经验常常影响着用户对于新事物的感知。在进行 UI 设计时, 需要考虑用户已掌握的知识。例如, 我们早已被告知某个标识代表某种含义, 这时, 如果将该标识设计成别的形状, 用户就会觉得不舒服, 导致使用不方便。生活中常见的移动 UI 设计中的种种图标, 如语音通话的接听与挂断图标, 大都遵循着红色为拒绝、禁止, 而绿色为允许、同意;而该图标若是横向放置则意味着挂断, 竖向放置意味着接听。显而易见,
13、 这是与人们生活经验密切相关的。若是不遵循此种普遍经验, 那么会使用户在认知与使用感受上产生不必要的困扰, 故而造成用户体验不畅, 也无法得到用户的认可。5.3 环境与感知环境作为人机交互中的重要存在, 其对人的感知影响无疑是巨大的。在进行包括图表在内的文本阅读时, 整体语言环境是建立于用户对单个的、独立的文字或词语进行有秩序规律的认知上, 换言之, 用户将通过整体认知与局部认知相互结合的方式去感知事物。比如, “百度地图”手机客户端中的“美食”字样, 其含义是基于地理位置的美食商家。“今日头条”手机客户端中的“美食”字样, 其含义是各类美食文章。若是抛开所属客户端这一整体环境, 那么用户对“
14、美食”的认知必然会出现偏差。手机客户端界面力求简洁, 且需要考虑到用户的辨识和认知能力, 故而也不可能出现大段的说明文字。事实上, 用户被手机客户端整体语言环境所限定时, 其便能够在该框架内去理解局部环境的意义。5.4 反馈与感知视觉反馈是直接影响用户体验的重要因素。如果没有视觉反馈, 就相当于聊天时你滔滔不绝, 对方却一言不发, 两人之间难以互动。从产品的角度而言, 如果没有反馈, 用户就无法确定自己操作的结果, 更不必提要进行下一步的操作。最直观的视觉反馈, 是用户在手机上进行点击等操作时, 交互元素通过改变自身形态作出响应, 为用户提供反馈。这种反馈模式会拉近用户与产品之间的距离, 因为
15、用户可以容易地感受到自己在同屏幕中的元素进行直接真实的互动。更深层的视觉反馈是用户在完成一个交互动作之后, 出现一种可视化、简洁的形式向用户展示操作的结果以及当前系统所处的状态。良好的用户体验应该确保每一次操作都能得到视觉反馈, 无论成功与否, 都能让用户体会到使用产品期间的一种安全感和掌控感。当静态图形的视觉反馈不足以引起用户注意时, 一个恰当且有趣的动效设计可以瞬间俘获用户的心。无论是静态还是动态视觉反馈, 在合适的时间、空间出现, 是保证用户具有良好体验的关键。6 结语优秀的 UI 视觉设计能够让用户产生愉快的视觉体验而乐意亲近, 这必然增加产品的吸引力和附加值;相反, 一个布局散乱、图像混杂的界面会影响用户使用的欲望。对 UI 视觉要素进行不断的优化与探索, 对用户体验进行周到细致的照顾, 是设计出受用户欢迎的 UI 界面的必由之路, 也是提升产品商业价值的重要手段。参考文献1杨婷婷.基于用户感知心理的 UI 设计初探J.电脑知识与技术, 2013 (15) . 2王佳.UI 设计理念的接受美学阐释D.浙江工业大学, 2015. 3蔡希阳.探究 UI 设计的视觉传达艺术D.哈尔滨师范大学, 2015. 4张美珍.浅析色彩在 UI 设计中的应用J.设计, 2014 (07) .
