信息时代移动终端界面设计原则浅析论文

导读:移动互联网产品已成为人们日常生活的重要工具,其精美的用户界面是目前市场上移动互联网产品用以吸引注意 力、传达信息的主要形式,但缺乏对信息呈现、信息引导、信息沟通方面的重视

SCI论文(www.scipaper.net):

摘 要:移动互联网产品已成为人们日常生活的重要工具,其精美的用户界面是目前市场上移动互联网产品用以吸引注意 力、传达信息的主要形式,但缺乏对信息呈现、信息引导、信息沟通方面的重视。文章基于移动终端的界面,通过理论研究和 案例解读的方式比较视觉设计和信息设计的特点,结合格式塔原理,浅析用户界面的设计原则,为信息爆炸时代下的移动终端 界面设计提供有益的借鉴和参考。

关键词:信息时代 ;移动终端 ;界面设计 ;原则


Analyzing the Design Principles of Mobile Interface in the Information Age
XIA Ling
(Guangzhou South University, Guangzhou Guangdong 510970)

【Abstract】: Mobile Internet products had become an important tool in Peoples Daily lives. At present, the beautiful UI can attract attention and convey information that is the main form of mobile Internet products, however, there is a lack of attention to information presentation, information guidance and information communication. Based on the Interface of Mobile terminal, comparing the characteristics ofVisual Design and Information Design through theoretical research and case study, and Combining with Gestalt principles,the design principles of user interface is analyzed. Hope to provide useful reference for the design of mobile interface in this era of information explosion.
【Key words】: information age;mobile terminal;interface design;principle

0 引言

据市场研究机构 Gartner 预测,2021 年全球智能 手机销售将增长 11.4% 达 15 亿部。 根据 eMarketer 的预测,智能手机用户 85.7% 的上网时间是在访问应 用。随着互联网科技的飞速发展和智能手机的普及,互 联网产品融入人们的衣食住行,满足了人们社交、出 行、消费、娱乐等各种生活需求。对消费者而言,界面 就是产品。用户界面搭载于移动终端进行信息传播和交 流,是用户与互联网产品信息互动的桥梁,承担着视觉 吸引、信息传达、人机交互三方面的功能,是移动终端 的重要组成部分 [1]。因此,研究移动终端用户界面具有一定的现实意义。伴随着信息爆炸时代的到来、审美素 养的提高,人们对移动端界面的视觉吸引和信息告知方 式提出了更高的要求。基于此,文章就移动终端的用户 界面厘清其视觉设计和信息设计方向的内容,并比较视 觉设计和信息设计作用于用户界面的特点,分析整理用户界面的设计原则,希望能够为信息爆炸时代下的移动 终端界面设计提供有益的借鉴和参考。


浏览大图

1 信息时代概述

信息时代,即数字时代,是指计算机技术将我们生活 中的信息转换为数字信息的过程,互联网计算机技术的应 用普及到生活的方方面面,标志着进入信息时代。信息时 代有着鲜明的时代特征。(1)信息化和网络化,信息技术 和互联网应用于经济社会生活的各个领域,用户通过互联 网可以 24 小时获得远程教育、远程医疗、网络缴费的服 务。(2)知识化,得益于信息技术的普及,知识可以被共 享、被相乘、被再创建,知识的传播速度加快,信息量增大,每个人都可以轻易的得到想知道的信息。(3)智 能化,由于日益庞杂、低效率和受时空限制的信息已不 能满足解决问题的需要,随着智能科技的发展,智能设 备和智能系统以其便捷性得到了广泛应用,其中以移动 终端为盛。(4)全球化,随着互联网技术的发展和智能设备的普及,信息传播冲破了原来地域地区的限制,可 以高效率、大容量、跨地区、跨国界、自由的流动。随 着人类社会进入信息时代,移动终端以其便捷性携带着 各种资讯进入人们的视野,信息产生的速度比以往人类 社会阶段迅猛地多。我们实实在在地处在一个信息爆炸 的时代,每天都有海量的信息被推送到受众的面前,现代 人工作生活节奏的加快以及工作生活方式的改变,场景和 时间越来越碎片化,人们更希望在短时间内获取更多的信
息以满足生活社交的需求。随着信息量的加大,人们很难 获得正确客观的信息,而信息之间的相互干扰,信息很难 引起目标受众的注意。因此,移动终端界面作为人与信息 互动的主要平台需要在单位时间内提供更多有效的信息, 提高阅读信息的效率,减少信息间的相互干扰。

2 移动端界面设计内容

2.1 视觉设计

视觉设计从传统行业走向互联网时代,互联网产品 的视觉设计随之成为软件产品的包装。通过文献整理、 案例分析和实践经验的总结,文章认为移动端的视觉设 计是运用形状、颜色、纹理、图案和文字等视觉元素构 成视觉风格,营造强烈的视觉表现吸引用户注意和兴趣, 实现信息传达并激发用户行为的设计 [2]。主要可以从以 下 3 个方面进行分析 :(1)页面布局。采用不同的构图 方式排列组合视觉元素,使版面达到美观的效果。(2) 色彩。色彩是传递信息最重要的视觉元素之一,运用色 彩元素设计主题、营造氛围,以创造不同的情感体验, 其次,使用色彩差异有效引导视觉移动和交互操作。(3) 文字。文字是视觉语言中最直接和最传统的表现形式,选 择符合产品气质的字体,合理布局文字以增强信息的有效 阅读和视觉美感 [3]。吴佳敏在《视觉链》一书中提出, 互联网界面视觉设计最关心的是产品是否富有美观度、 艺术性和视觉冲击力,关注的是用户的视觉感知获得。

2.2 信息设计

从国际设计界和教育界对信息设计的诠释中,可以 寻找出信息设计的普遍规律,信息碎片化时代背景下的 移动终端界面是信息重组的过程。在信息呈现方面,通 过对产品功能的解构、分类来整合信息的层次结构,将 无形、无序的内容转换为有形、有序的信息。在信息引导方面,通过对标题、文本、插图和颜色的运用来突出 重要信息,帮助用户在海量信息、动态空间中快速获取 信息。在信息沟通方面,通过对产品定位、用户需求、 用户行为的研究,建设符合用户习惯的环境,提供视觉 线索和友好的交互体验。

通过对移动端界面设计内容的分析,可以看出界面视觉的设计侧重于信息的美观性,界面信息的设计侧重 于信息的传递效率。以移动端 App 登录按钮为例,信 息设计思考的是按钮在什么位置,用户可以轻松找到 它。而视觉设计考虑的是如何使这个按钮看起来更美 观,以激发用户兴趣做更深入的接触。两者的共同目标 都是为了完成视觉传达。互联网科技的迅速发展使移动 终端的使用场景和使用时间不断碎片化,高效获取信息 是当下人们使用移动终端的首要诉求。郑昊在 UI 设计与认知心理学一书中提出,设计的本质是解决认知的问 题。UI(用户界面,User Interface, 以下简称 UI) 设 计的本质就是解决虚拟世界的信息传递问题,视觉界面 就是信息的视觉层级,视觉层级的本质就是信息组织与 架构 [4]。因此,如何平衡视觉设计和信息设计,是当前 移动终端界面需要思考的问题。

3 信息时代移动终端界面设计原则分析

3.1 简洁清晰性原则

信息时代移动终端界面设计应遵循简洁清晰性原则。 好的用户界面给人流畅、愉悦的用户体验,这里的流畅、 愉悦是指界面展现的内容是否具备清晰的信息流程,是 否引导用户顺利完成目标。实验证明,人类在短期记忆 中一次只能记住大约 5 件事。由于人类注意力的有限性, 设计者需要帮助用户减少心理操作和认知负荷,确保信 息可以被清楚地识别 ;帮助用户减少发生错误选择的可 能性,将用户实现目标的交互成本降到最低。设计者需 要尽量避免无意义的元素、需要回忆或仔细阅读的信息、 页面加载和等待时间过长、注意转移等问题。使界面设 计的每一个元素简单、干净,提供给用户一个易于感知、 认知、且有意义的信息组合。以咕咚为例,打开 App 主 界面后分别有天气,运动选项选择,今日步数,开始跑 步,历史记录等选项, “背景”为用户当前所在位置的区 域地图, “运动”是 App 的核心功能, 因此,“开始运 动”放在首页中心的焦点位置,且和跑步总公里、背景 占据了屏幕的五分之四。这一信息层级简洁明了,想要 传递的信息就是“不要想太多,立刻开始跑步”。

再以移动 App 登录界面设计方案为例,首次进入 登录页面,从上至下依次是手机号,密码,登录等选 项。A 方案以蓝色(品牌色)填充登录按钮,在吸引用户注意力和引导其交互的同时,传达品牌概念,相比 B 方案视觉上更为美观醒目。预测用户行为 :进入登录页 面由颜色引导视线 - 点击登录按钮 - 提示未输入手机号 和密码 - 输入正确的信息 - 点击登录 - 登录成功。B 方 案,用灰色作为登录按钮的默认状态色,告知用户在未 输入手机号和密码的情况下不可点击,蓝色则作为输入正确信息后的可触发色。预测用户行为 :输入手机号 - 密码 - 点击登录按钮 - 登录成功。两种方案比较可见, B 方案比 A 方案呈现的信息更加准确,使用效率更高。 因此,过多无用的设计会导致用户对信息的误读,阻碍 交互操作,降低使用效率。简洁清晰的信息可以帮助用 户快速定位和识别信息,用户参与度更高。

3.2 一致性原则

信息时代移动终端界面设计应遵循一致性原则。在认知心理学上人们对熟悉的事物更容易感知,即通过经 验感知界面内容。在整个应用程序中保持界面元素(包 括标准色、辅助色、文字、间距大小、分割线等)一致 和风格统一,提供稳定的视觉目标和线索、熟悉的体验 和舒适的环境,以提高用户识别效率,使操作结果符合 预期。一致性具体有视觉、功能、内部和外部四种一致 性。视觉一致性,指元素样式、颜色一致性。以用户界 面的图标为例,相同样式的图标在整个产品中应携带一 致的信息。功能一致性,指相同控件具有一样的功能、 操作模式一致。如下拉加载操作在整个产品中的交互方 式相同。内部一致性,指新功能和新页面与原有内部环 境保持一致。外部一致性,指多个产品在视觉和功能上 尽量一致。如小米手机产品系列,在操作习惯和 UI 风 格上保持了统一,老用户可以轻松使用新手机。我们的 大脑会将我们所看到的东西与记忆中的熟悉模式相联 系,使用被用户所广泛认可并熟悉的界面元素可以帮助 用户快速、准确的解码信息并进行下一步操作。

3.3 连续性原则

信息时代移动终端界面设计应遵循连续性原则。连 续性具有良好的视觉可感知性,为用户提供清晰、符合 直觉的视觉层级结构。有条理、有秩序的呈现元素的空 间和时间关系,引导用户视线,提高视觉搜索效率,方 便用户确定焦点。遵循基本的“从左至右,从上到下” 的顺序和优先级,提供用户可以自然推断的后续步骤, 发现自己感兴趣的内容。以马蜂窝旅游 App 为例,马 蜂窝以分享旅游攻略赢得旅游爱好者的青睐,旅行前用 户可以了解旅行路线,查看景点详情,景点详情页面伴 随与景点相关的酒店、美食、跟团、包车等服务推荐, 切中用户需求。马蜂窝运用连续性原则组合和排列用户的“预操作行为”,以引导用户做更深入的页面操作。 马蜂窝各子频道在视觉和功能上保持统一,在传达品牌 价值的同时,提高了用户对产品的信任度。

3.4 审美性原则

信息时代移动终端界面设计应遵循审美性原则。美 学因素虽然不是用户界面设计的最终目标,但是具有美 观性的设计更容易吸引用户的注意力,带给人愉悦的心情,并促使其有更深入的接触行为。反之则产生抵触心 理。在信息拥挤、快节奏的时代,人们追求的是所见 即所得的用户体验。Google 和苹果 IOS13 更新的设计 语言系统增加了暗夜模式,其目的是减少背景信息的干 扰、关注信息内容本身。2021 年的 UI 设计趋势提到了 “多彩的颜色搭配”“极简主义”“3D”“较大字体”等 设计风格。如网易云音乐 6.0 改版,整体色调从原版的 红色调整为白色,去分割线,大胆使用留白设计给予界面呼吸的空间,留白区域使界面信息更清晰、层次感更 强。如 Airbnb、雪球运用扁平化、简单配色营造了简 单、清新的画面,利用大标题、粗字体(或可读性更高 的字体)展示重要信息,充分利用空间平衡界面元素的 关系。如电商 App 淘宝、京东的金刚区采用“业务说 明 + 图形”的造型和多彩的颜色搭配组合图标,抓住 用户的注意力。诺曼在《情感化设计》一书中提到,美 感不仅是视觉的愉悦,而是整个产品的使用体验 [5]。优 秀的设计是功能与形式的完美结合。在向用户展示信息 时,提高产品的美学性,营造沉浸感,将用户的注意力 集中到界面中最重要、核心的功能区域 ;有效利用空 间,平衡分布界面元素 ;避免过度美化,减轻视觉负担 和多余信息的干扰,确保用户轻松的完成任务。

4 结语

信息时代移动终端界面设计需要遵循界面设计原 则,将有效沟通和传递信息作为首要诉求,有机结合视 觉设计和信息设计的特点,才能设计出更为友好、易用 的移动终端产品。信息设计组织有价值的信息元素,提 供给用户清晰可见和身临其境的界面。视觉设计编码有 意义的视觉符号,提供给用户唯美简约和令人愉悦的界 面。两者相辅相成,共同作用于用户界面,为用户提供 全面的信息资源和视觉体验。在信息数字化、网络化的 今天,人们获取信息的方式越来越多元化、个性化,移 动终端界面如何有效传递信息值得不断研究和探索。

参考文献

[1] [英]拉斯基.人本界面[M].史元春,译.北京:机械工业出版社, 2004.
[2] 吴佳敏.视觉链[M].北京:机械工业出版社,2017.
[3] 张聪.移动互联网产品中的ui视觉设计研究[D].吉林:东北师 范大学,2016.
[4] 高薇.新媒体背景下界面信息的视觉方法研究[D].辽宁:大连 理工大学,2019.
[5] [美]唐纳德•诺曼.情感化设计[M].付秋芳,程进三,译.北京: 电子工业出版社,2005.

关注SCI论文创作发表,寻求SCI论文修改润色、SCI论文代发表等服务支撑,请锁定SCI论文网!

 

来源:SCI论文网

推荐阅读