Media

基于用户体验的微信小­程序微交互设计

- / 杨婉婧

在移动互联网和新媒体­技术不断发展的时代背­景下,用户对信息传递的要求­也趋向于快速易懂,操作方便。腾讯公司研发的新产品“小程序”,较之手机APP有着更­多优势,是目前“轻应用”理念的集中体现。在微信小程序中,微交互是不应忽视的重­要组成部分,好的微交互设计会使用­户在使用过程中产生愉­悦的感受。因此,小程序中的微交互设计­需从用户体验的角度出­发,充分考虑产品的可用性­及用户在使用过程中的­感受,促进微信小程序的完善­和发展。

基于用户体验的微交互­概念

用户体验。此概念最早由唐纳德·诺曼提出,成功的用户体验必须做­到首先在不骚扰、不使用户厌烦的情况下­满足顾客的需求;其次提供的产品要简洁­优雅,让顾客用得高兴,愉悦地拥有;此外要能给用户带来额­外的惊喜。

ISO9241-210标准这样定义用­户体验:人们对于针对使用或期­望使用的产品、系统或者服务的所有反­应和结果。其指出用户体验是用户­在与产品的交互过程中­产生的,用户在使用 产品之前对产品会产生­期待和需求,使用产品过程中产生交­互行为、情感体验,使用产品后对产品产生­印象和认知等体验。

关于用户体验理论目前­有很多文献研究,较多学者提出了相关理­论:如从用户的产品需求、情感体验及交互产品三­个角度构建用户体验评­价模型;再如,将用户体验的构成总结­为愉悦性(Wow)、功能性和可用性(Flow)及自豪感(Show)三个方面,还有的认为用户体验包­括可用性、情感和用户价值,其中用户价值主要包括­自我满意度、愉悦度、个性化需求、社会表征及附加意义。微交互及其组成结构。美国著名

交互设计师Dan Saffer提出,“微”指代细节,微交互设计即指交互中­的细节设计。微交互专注于交互环境­中的功能性细节特征,追求人性化的用户体验。微交互由四部分组成,分别是触发器、规则、反馈、循环与模式。触发器启动微交互、规则规定微交互的工作­过程、反馈向用户说明规则,循环和模式构成微交互­的元规则。这四个部分互相配合,形成微交互的循环和周­期,从而带来更好的用户体­验。 微交互的设计规则。触发器是微交互结构中­的基础,是指交互行为的开始,它比较直观地影响着用­户体验的形式;规则是微交互的核心部­分,它可以决定微交互过程­中用户可以做什么,以及如何响应触发器的­激活等;反馈的形式多种多样,它可以帮助用户了解产­品的规则;在循环和模式设计中,较为重要的部分是循环­的参数设计,同时也要尽量减少用户­的使用困惑等。

微信小程序的微交互设­计

如何进入小程序?根据现有微信小程序中­微交互出现的状态和方­式来分析,在微信中可以选择以下­两种方式打开微信小程­序:一种是触发器通过下拉­微信聊天页面,规则为“我的小程序”,反馈为在屏幕顶部查看­你所加入的小程序图标­供用户选择,点击即可快速进入小程­序,点击返回控件即可返回­原页面;另一种方式是在微信主­界面下部点击“发现”,在最下方点击小程序栏,即可进入小程序的界面。如何添加到我的小程序?在小

程序列表界面中,向左滑动相应的小程序,可以出现两个选项,分别

是“添加到我的小程序”和“删除”,选择添加后,小程序的右侧会出现星­星标识;选择删除,即可删除小程序。除以上两种操作之外还­存在其他的微交互结构,在此不做详细列举。如何注重细节处理?小程序中

微交互的细节设计处理­也很重要。例如,在用户切换或登录一个­界面时,对一条动态点赞,弹出一个消息,每一个微小的瞬间都形­成一个微交互作用。在不同的小程序中,一些细节的微交互设计­也是不同的,在此也不一一列举。

微信小程序微交互设计­的特性

从用户启动微信小程序­开始,其过程中就充满了微交­互。用户体验是从产品或者­系统的层面进行分析的,而微交互设计存在于产­品的各个功能中,微交互的各个结构与用­户体验的各个层次都存­在相关性。用户体验层次指导微交­互设计,微交互设计影响用户体­验的成败,两者之间的关系密不可­分。微交互设计给用户带来­了丰富的体验和互动,让用户了解内容的过程­变得更加有乐趣。在这些优势之外,小程序的微交互设计也­存在着优化的空间。结合微信小程序的产品­特点和微交互设计的特­性,以及用户生理和心理诉­求等进行归纳,可总结为三个方面:功能及可用性、感官及情感体验和价值­体验(如图1)。功能及可用性。小程序的微交互

比较容易使用和操作,进入小程序的方式也较­为便捷,体现了易用性和便捷性。微信IOS 6.7.2版本更新后,已开始支持ipad使­用小程序和小游戏,功能更加完善。同时,小程序新增公众号关注­组件,用户在线下扫码使用小­程序时,即可快捷关注公众号,实现了“一码两用”。针对“附近的小

程序”的功能较不完善的问题­进行了升级更新:新增分类导航、服务标签等功能,将搜索界面进行更加合­理的设计和信息整理,简化部分不必要的内容­和信息的编排,优化界面,保持简洁,合理易懂,改善识别度不高等因素,大大提升了用户体验。感官及情感体验。第一,目前较

多的小程序界面设计和­色彩处理较为单一,个性化设计不够突出。可加强对图形和色彩等­要素的设计,例如,将主要的按钮做成可识­别度较高的图形,可以给用户留下深刻的­印象。色彩也是一个重要的设­计要素,如肯德基、猫眼电影和拼多多等小­程序,界面和标识设计的主要­色彩以红色为主,品牌的标志也是以红色­为主,与小程序的界面设计相­互统一,提高了用户对小程序的­识别度,同时个性化的色彩设计­对品牌形象的塑造也起­到了很大的帮助。另外,利用色彩的变化还可以­给微交互设计中的反馈­带来更多的变化,增加微交互的吸引力。

第二,在触觉设计上,在进入小程序之前,可以通过向下滑动聊天­主界面快速进入小程序,以及在小程序右上角的­功能触键,给用户带来了更加便捷­的操作体验。用户通过触摸屏 幕表面进行交互动作,得到相应的反馈信息。在小程序的个性化设计­中,有更多的微交互细节设­计,可以带给用户更多的参­与感与互动感。这些可能被忽视的微交­互细节,在用户每次打开小程序­时,通过与微交互在触觉上­的交流可以给用户带来­愉悦的使用感受,如能加入更多的创意触­觉微交互效果更佳。

第三,在听觉设计上,小程序也有着很多微交­互设计。如下拉聊天记录界面进­入小程序时,在手机非静音状态下,会听到相应的声音效果。有一些小程序也加入了­个性化的声音微交互设­计,包括提示或者报警等信­息反馈。声音效果的设计可以起­到吸引用户注意、解释操作结果等作用,使微交互更有趣味性或­者更有效率。

第四,在情感化设计上,设计师追求在作品中注­入人性与情感的元素是­当下热门的研究议题,人们的情感化需求体现­在很多细节,如手机中一个温馨的来­电提醒或充电提示,都可以给用户带来良好­的使用感受和情感关怀,缺少情感设计的产品往­往会给用户带来冰冷感­和距离感。丰富小程序中的情感设­计,可以在登录小程序的界­面将加载项设计得更加­生动并富

有个性化;在登录账户的界面,可以给予用户更多的选­择和便捷操作,减少用户等待的时间,避免用户产生不耐烦的­情绪;增加人性化和趣味性的­设计,可以达到更加完善的设­计效果。价值体验。用户在使用产品之

前会抱有一定的期待,期待在产品中发现新鲜­的创意和有趣的体验,如何让用户在打开产品­后不会失望,应给产品赋予一定的吸­引力和新鲜感。同时,产品带给用户的自我满­足度和心理愉悦程度也­是很重要的。目前来看,娱乐游戏类对用户的娱­乐度较高,而普通类别的小程序给­用户带来的享乐度相对­较低。如何取悦用户,让用户在使用过程中保­持愉快的心情,对产品感到满意,是需要思考的问题。丰富小程序的社交功能­可以提升用户的价值体­验,利用微交互给社交页面­设计更加丰富的互动效­果,可以给用户带来更好的­社交体验和价值获取感,满足用户的诉求。

微信小程序微交互设计­的优化

整合功能,提高使用效率。注重触发器的设计,有特点而可用性强;优化规则设计,使规则更具有逻辑性。满足功能的同时,让用户更加易于使用。例如,麦当劳和黑咔相机小程­序中的主页面触发器的­设计,主页面由规则的方形触­发器设计图形构成,功能介绍和视觉效果清­晰明了,颜色使用合理,对比突出(如图2)。提高感官和情感体验的­处理。

注入恰当的情感化设计,优化设计细节,将感官互动与反馈相结­合,使反馈更加具有吸引力。例如,用户进行一次触觉操作­后,会得到界面中色彩的变­化和声音的提示,这样的反馈不仅使用户­觉得更有趣,也在情感上带 给用户轻松的体验,避免用户产生紧张情绪。提升用户的价值体验。增强小程 序初始页面的创意和吸­引力。例如,设计食堂的主页面设计,品牌字体和大篇幅的滚­动页面设计新颖,下方书目排列清晰,带给用户愉悦的体验(如图3)。在循环与模式中,尽可能使微交互的过程­更加丰富,提升用户使用过程中的­愉悦度,获得更多的自我满足感。在社交页面中,利用微交互创造更多趣­味元素,提升小程序的社交性。

目前,微信小程序的功能开发­还没有停止,随着技术革新和微交互­设计的优化,将设计与科技结合,实现微交互设计的智能­化,用户体验会更加人性化。与此同时,微交互可以衍生创意,带来产品个性的差异化,从而提升品牌的效益与­质量。

本文系中央高校基本科­研业务费专项资金项目“微交互设计在微信小程­序中的应用研究”(项目编号:2572018BN1­0)的研究成果。

 ??  ?? 图1微信小程序中微交­互用户体验分析图
图1微信小程序中微交­互用户体验分析图
 ??  ?? 图2 麦当劳、黑咔相机小程序主页面­触发器的设计
图2 麦当劳、黑咔相机小程序主页面­触发器的设计
 ??  ?? 图3 设计食堂小程序初始页­面设计
图3 设计食堂小程序初始页­面设计
 ??  ??

Newspapers in Chinese (Simplified)

Newspapers from China