基于模件化理论的用户界面信息架构设计

朱小意　向云波

摘要：文章首先以德国艺术史学家雷德侯的“模件化”理论为导向，对用户界面信息架构现状进行分析;其次通过对用户界面的视觉界面、交互操作、用户体验三个方面进行研究，从用户的角度出发，分析用户在体验过程中的功能需求，并对用户界面信息架构进行多层次研究，探讨了基于模件化理论的用户界面信息架构设计价值;最后总结出用户界面信息架构设计的原则。通过文章的研究，以期为基于模件化理论的用户界面信息架构设计提供理论支撑和方法借鉴。

关键词：模件化理论;用户界面;信息架构设计;用户体验

中图分类号：TB472 文献标识码：A

文章编码：1672-7053（2021）11-0132-03

用户界面是用户和产品进行交互的主要途径，当今社会随着移动互联网和新时期信息科学技术的发展，用户界面从主要以平板电脑为载体，扩展到各种移动终端、智能设备。用户对用户界面和体验有了更加多的关注，使得用户界面信息架构设计更加需要加强。模件具有独立性、组合性、重复性、置换性、适应性的特点。“模件化”理论的应用可以让用户界面信息架构布局更加清晰，在模件化理论的基础上创造出具有一定数量的、多样性的组合布局方式，形成全新的创意性、独特感的设计形态。从设计原则和设计形式研究模件化理论对用户界面信息架构产生的作用，能够使设计师更加重视用户视觉界面、交互操作及用户体验的合理性，在实践工作中能将模件化理论运用到用户界面信息架构设计中，使得界面能够更准确、广泛地诠释和传达信息内容。

1模件化理论概述

模件系统分为五个层次：元素、模件、单元、序列和总集。在模件系统中，第一阶层为元素。形式不同的元素经过抽象、有意识的组合，产生形态不同的元素是构成模件的基础;第二阶层是模件，它是由元素组成的独特母题，并且能通过复杂的结构组合为装饰单元;第三阶层是将模件按一定秩序组成构图，即形成模件体系;第四阶层是序列，由类似并且存在内部关联的单元会集形成。同类单元的形式、性能、体积、造型等各方面都具有秩序感、形式化的特征;第五阶层是总集，展现了模件化理论的关键目标，即大规模的生产。因而模件化理论在用户界面信息架构设计中运用相当普遍。模件体系是以每个模件按照必要的准则进行组装而形成的复杂且有机结合的整体，是每个模件的思维及表达方式。模件系统具有宽泛的适应领域，是一种能无限发展的非定形系统。模件系统既包合其本身的模件元素，也包括单元和序列，单位是经过组装的特征从模件中完成“模件”到“模件系统”的衍生过程，可以获得增值和替换，即是有限到无限过程的纽带和方法。总之，模件的根本就是交换的单元，而且能以有差别的方法组合成更大的单元。

2用户界面信息架构现存问题

用户界面信息架构设计指界面展现的全部信息内容的构成方式，其对界面结构和用户体验有着至关重要的效能。目前用户界面信息架构设计在视觉界面、交互操作、用户体验等三个方面存在着一些相对应的问题，需要进一步优化来提高用户界面的易操作性。

首先，在视觉界面方面。（1）网页端和移动端界面存在太长的内容宽度和太小的文字;在用户视觉上会影响信息传达的有效性;（2）在界面的按钮规范上存在不明确的情况。页面上的某些元素可以帮助用户确定正在浏览的页面，其他元素应该尽可能清晰一致;

其次，在交互操作方面。（1）所有内容全部平铺在一个网页界面上（如图1），所有选项全部展开，虽然用户可以创建功能概览，但是仍然存在90%左右的按键用户不经常使用，就会给其添加认知负担。界面中信息内容过多时可以使用滚动，此时需要在界面中使用有效的信息内容来协助用户建立上下文，为用户解决滚动问题;（2）在弹窗框上面再设置弹窗。这样容易打破用户在使用过程中的心理模型。在用户完成第二个弹窗上的操作时还是会回到原来的界面，给用户产生了模糊性信息;

最后，在用户体验方面。（1）下拉菜单分类不清楚（如图2）。例如，新版微信的用户界面将“朋友圈”功能中点赞和评论收缩进了一个按钮，用户需要再点进去操作，从而影响用户体验;（2）页面的表单元素过多。这样影响了用户逻辑交叉流畅性，增加了视觉空间设计负担;（3）界面的当前位置不清楚（如图3）。在每一个页面上都会提供明确的标题或者是页面的名称，当网站层级和深度大于1级时，就需要考虑是否采用面包屑引擎进行导航，如果一个流程中有多种步骤，就会根据需求来显示这些步骤。

3基于模件化理论的用户界面信息架构设计意义

信息架构作为用户界面的脊梁，它主要是归纳组织用户界面信息内容、建设信息架构布局及设计，以及对用户信息界面所呈现出来的各种科学技术方法和艺术手段。即把无秩序的信息进行归纳分类、筛选计划，并形成一目了然的逻辑关系。它的重要性和关键目标，是使得信息能够被用户理解和直接访问。基于模件化理论的用户界面信息架构设计的重要性意义，旨在把艺术理论框架里的“模件化”体系与信息架设计的形式相互结合，具备了研究性和预见性，提供了一种新的阐释和思索“模件化”的视域，从而使网页端和移动端用户界面信息架构能更加栩栩如生，直接了当地展现中国艺术中模件化制造的方法与技术，对用户界面信息架构设计具有非常重要的实际意义。模件化理论为用户界面提供了设计思维，从移动端和网页端用户界面中发掘并剖析了“模件化”特点，将艺术中的“模件化”理论运用到用户界面信息架构的创新设计实践中。

4基于模件化理论的用戶界面信息架构设计原则

用户界面信息架构设计的核心是整理信息内容活动的流程，在信息内容的布局上，需要适应使用者的行为习惯和思维逻辑，便于界面信息内容可以正确无误地传递;另外也要考量以提升用户体验为核心的交互性质，为界面信息内容设计有效的布局。早在1998年，马里兰大学教授本·施耐德曼博士获得ACM CHI（美国计算机学会计算机人机交互终身成就奖）时，提出了“用户界面设计的八大黄金法则”。

4.1统一性

统一性是模件化理论最大的特点，统一性可以帮助用户快捷了解产品的使用环境，从而更简便地完成目标。在设计相似功能的菜单时，可以使用类似的图形、图表、色彩，从而使菜单的层次布局、用户流程图达成统一性。这种信息呈现方式的规范化，可以减轻用户在使用界面过程中的认知负担，使用户体验更加流畅和易懂。

4.2增加通用性

用户人群不同会存在个性化需求，可以丰富界面设计指导方式的要求，提高用户信息架构设计的质量。例如，网页端的磁铁式信息架构和移动端的快捷窗口设置，使用次数的增加，加强了用户经验的积累，用户能更敏捷地浏览和掌握界面。

4.3给予信息反馈提示

用户在操作上首先要知道其所在位置和发生的事情，用户在每次完成一个操作后，需要系统给出相对应的反馈，之后用户才能进行下一步的界面操作。反馈可以分为许多不同的类型，例如语音提示、触摸式反馈等不同类型的形式。

4.4设计对话

如果用户需要继续执行一连串的动作来实现目标，就需要悉心地设计每一个被指引的流程。特别是在用户界面的开始、进行中，以及用户完成操作时的响应。精良的指导性设计可以提高用户的满意度，从而减少用户操作界面时的烦恼与紧张感。例如应用程序的安装流程，或者网络上的购物流程等。

4.5避免错误操作

用户不喜欢在操作界面时被提示“错误”，在设计时需要多重考量如何降低使用者犯错误的机率。用户在界面使用过程中难以避免会错误出现，界面反馈需要在报错的同时提供良好的解决方法，给予用户简洁、清晰的操作流程，以便于指引用户方便快捷地分析及处理问题。例如在线表单设计，用红色的线框作为标记，来提醒用户未填写的表单信息。

4.6允许用户撤销操作

设计师和技术人员在系统开发过程中，需要设置显著的方法，让用户恢复之前的操作。在单次操作、信息输入或整个操作流程完成后，都需要让系统允许进行返回的操作，这一功能减少了用户的使用压力，使用户知道即使在操作失误时，也可以使用撤销功能，让用户更加放心地去探索界面的功能。

4.7用戶应掌控控制权

在界面设计过程中需要仔细考量，如何能够让使用者主动地去研究和使用界面，而不是被动地接收界面信息。要让使用者能够清楚地了解界面的操作功能，在界面设计时依据用户期待的使用方法去运行，从而获取使用者的信赖和支持。为了使用户能够掌握界面，还需要清晰了解目前的环境和状况、进程及接下来应该怎样做。

4.8减轻短时间记忆负担

界面信息架构设计应在模件化理论的引导下，尽可能保持简洁、简单的信息层次结构，让用户识别信息的时候不需要记忆信息。用户界面信息架构设计是高效交互设计师和uI设计师必须具备的基础技能，用户界面架构更多的是各种功能模块的重新排列组合，这一点突出了模件化理论在界面中的重要性。要想设计出卓越、高效、流畅的用户界面信息架构设计，不仅要符合及满足八大用户界面设计要求的黄金原则，还要具备一定的理论支撑。

5基于模件化理论的用户界面信息架构设计思路

模件系统是由元素、模件、单元、序列和总集等各部分组成，“元素”不存在模件化，需要通过增加组成方式后才能形成“模件”。按模件体系去分析，“元素”是每个功能模块的基础组成，而“模件”是这些元素的基本形式，其通过组合形成“单元”，在不同排列方法的组合下，形成多样的用户界面信息架构布局，即模件系统中的“总集”。

5.1网页端用户界面信息架构设计思路

信息层级概念在模件化理论里，大部分以扁平化的方式呈现，即隶属功能是同一个层级信息的并列关系。使用者能通过产品界面的导航按钮选择自己想要理解的功能，二级导航和三级导航的设计可以减少页面之间的跳转次数，确保使用者能在有限的界面范围完成操作过程。同时能够将用户界面变得简捷、方便，是用户界面信息架构设计中的关键方法。使用清楚明白的信息层级架构关系和显明的常用功能按钮，可以方便使用者辨别与切换。

首先，在界面中最主要的是视觉因素，根据人的视觉流程习惯，为从上到下、从左至右。用户更容易注意到信息横向排列中首末的内容，信息内容竖向排列则会使用户关注度逐渐递减。卡片式信息架构是以每一个卡片来承载图标，用文字大小来区分信息层级、图像及颜色等元素的模件。通过在用户界面中重复组合的方式，来形成不同功能的单元。例如，谷歌网页端界面的卡片式风格，具有表面直观而自然的立体感，卡片可以让用户直观地感受到使用情景;其次，在交互操作方面，磁铁式信息架构是由基础形状承载国标、文字为一个模件，在这个模件的基础上添加数量，进行规整的排列组成的单元形式。例如微软Windows10的动态磁贴，将应用通知最新信息与图标相结合，提供一种更加高效的信息查阅方式。用户无需打开应用就能看到自己关注的最新信息，再根据自身需要，点击进入应用了解更详细的内容;最后，在用户体验方面，用户体验以简洁、方便、易操作为基本模件元素，全方面的考量这些元素，使其组合成以“用户为中心”的设计理念模件。模件在视觉界面、交互操作中的重复考量，组成了视觉界面用户体验的模件化以及交互操作中的模件化方式。例如Windows10的动态磁贴，其设计的大方块比不规则小型图标更易被选择和点击，同时矩形更利于磁贴的移动、位置的摆放、大小缩放与任何形式的组合。具有高效炫酷的视觉和简单易于操作的交互式用户体验，满足“以用户为中心”的信息架构设计特点。

5.2移动端用户界面信息架构设计思路

移动端产品的用户界面信息架构设计，在视觉方面倾向扁平化设计趋势，目的是能让用户在使用产品的过程中，可以简洁方便地获得界面信息内容。视觉方面的扁平化和交互信息内容的扁平化，都是以视觉元素和感觉因素为用户服务。建立优良的用户体验，主要形式是予以清楚、标准的组合方式来呈现界面信息内容，在使用者和信息两者之间建立有效信息传达的纽带。手机和Ipad等移动设备受操作空间的制约，需要对信息内容的呈现进行更加清晰和灵活的布局。同时在用户界面信息架构设计中，需考量因屏幕大小的特点，而导致用户操作体验和视觉疲劳等影响因素。

首先，用户界面在获得了基础“模件”体系和规划了完整的信息筛选过程后，需要将界面元素进行视觉层面的优化呈现。在移动终端，用户界面信息架构设计常见的视觉元素有色彩、文字大小、图像位置、形态等。视觉上主要是遵从对图形、图像、色彩等这些元素高层次特点进行剖析，让使用者感觉到界面使用过程更加易于操作、有效的信息内容更加易于辨别，从而降低了用户视觉干扰性和疲惫感;其次在交互操作方面，用户界面在移动端的展现，依靠触摸技术来实行交互性能，经过各种各样移动的手势来呈现交互的方式。移动端用户界面信息架构设计能够展现“模件化”理论交互的优良特点，依据界面信息架构的布局方式，可对不同信息内容部分，设计相对应的交互形态。比如快捷窗口式信息架构，能使用户便捷地跳转至需求的内容信息页面;最后，在用户体验方面，“多点触控”的使用方式，可以使用户通过手指点击屏幕来完成交互功能，是呈现“模件化”理论交互设计最重要的技术支持，为界面设计给予了更大的可操作空间。移动端设备所具有的屏幕特性及智能化、人性化的“多点触控”功能，是区别于其他设备的主要特点之一。例如苹果手机IOS系统的手势操作，增加了用户的操作兴趣，提高了操作便捷性。

6结语

模件化理论的标准化与系统化的形式语言，是艺术想象力和科学思维的组合，隐藏着秩序与规律。模件化的设计构思可以将有限的内容进行无限的变化和组合。在信息化时代下的用户界面信息架构设计，其模件构思行为大大提高了用户体验的效率。因此用户界面设计师可以持续性地借助模件的力量，寻求设计上的突破与创新。