15208187678

为企业构建全球竞争力,行业信息化整体解决方案

For the enterprise to build the global competitiveness industry informatization overall solution

使用UX设计模式设计接口
2021-03-24 145次 UX设计

每个UX设计人员都知道创建方便的界面以保留用户的挑战性。UX设计确实是一件艺术品:您必须有效地构造内容并创建逻辑导航,同时保持整个界面的视觉美感。

幸运的是,有UX设计模式可以帮助设计人员为常见的接口问题设计可行的解决方案。这些模式结合了每一项功能的设计最佳实践,无论是购物车还是登录表单。

UX模式也很有用,因为它们为设计人员提供了一种通用语言:提及熟悉的模式的名称可以使您快速传达自己的想法并消除误解。

让我们深入了解更多有关设计模式的信息。

什么是UX设计模式?

数字键盘代替了用于输入数值的标准键盘,无穷大滚动可在电子商务网站上创建流畅的流程,面包屑显示用户从主页到当前页面的路径‒这些是我们在UX设计模式中的一些示例都熟悉。

模式应用于用户界面后,可以有效地减少导航所需的时间和精力。在与界面进行交互时,用户将不熟悉的元素与他们之前遇到的事物相关联,从而可以更快地与界面建立融洽的关系。例如,Skype的状态指示器类似于交通信号灯,因此很容易快速查看用户是否处于脱机状态或有空。

用户期望每次交互都会产生熟悉的结果,例如在滚动页面时继续显示的无限新闻线程。现代设计模式确保了这些预期结果。每次用户认识到熟悉的设计模式时,他们的大脑就会刺激多巴胺(一种控制游乐中心和寻求奖励行为的化学物质)的产生。

因此,设计图案可以在用户注意到一个熟悉的图案时以及该图案按预期工作时刺激多巴胺的产生。

最重要的是: UX设计模式提供了熟悉的交互,因此用户无需分析每个交互即可浏览系统。设计模式减少了每次交互所花费的时间和精力,并使报酬最大化。

如何应用UX设计模式

有许多已建立的UX模式库,其中包含经过分类的UX模式。但是,这并不意味着您应该在布局中使用每种可能的模式。模式首先是可用性问题的解决方案,因此,如果没有问题,则不应应用解决方案。

选择合适的设计模式的常见策略是UXPin提出的以问题为中心的方法。有四个主要步骤会影响UX设计人员是否选择模式的决定:

找出需要解决的问题。

分析找到解决这些问题的方法的其他网站或移动应用程序。

检查其他网站或移动应用如何实施这些解决方案。

分析每种模式,然后确定哪种模式适合您。

1.找出问题

在第一阶段,您应该检测界面中存在的可用性问题。您可以在论坛和主题网站上进行研究,亲自进行调查或接受用户采访,以及使用其他旨在检测用户“痛苦”的方法来检测这些问题,换句话说,找出用户对当前设计解决方案不满意的地方以及缺少的界面。通常,在产品处于开发过程中时将应用这些方法。

如果您要处理的是需要改造的现有产品,则可以采用诸如用户访谈,A / B测试,支持团队的反馈以及焦点小组之类的策略。

假设我们有一家跳出率很高的电子商务商店。在Google Analytics(分析)的帮助下,我们发现了一个问题:用户在结帐阶段离开了网站。用户反馈表明,问题出在用户必须填写的长签约表格中。我们的问题很明确,我们可以继续进行下一个阶段‒查找其他网站如何处理类似问题。

2.分析类似的网站

接下来,您应该访问与您相似的网站,并分析其解决此问题的方法。对于我们的示例,让我们看一下FeelUnique,Victoria's Secret和沃尔玛。

如我们所见,FeelUnique启用了社交登录功能。新移民可以使用其Facebook,Google,Twitter,Instagram或PayPal帐户进入简短的注册表格,该表格已经填写了姓名,姓氏,电子邮件和国家/地区。用户只需输入邮政编码即可完成注册过程。

Victoria's Secret(维多利亚的秘密)使网站访问者可以使用PayPal帐户或现有的Victoria's Secret帐户进行签出。或者,用户可以以客人身份退房。使用PayPal签出非常方便:用户可以使用现有的PayPal帐户登录并快速共享账单和付款信息。

如果我们允许用户不登录便签出,那么第一次购买便很方便。但是,这些用户下次访问该网站进行购买时,将需要从头开始输入帐单和运输详细信息,并且不会保存其订单历史记录。

最后,还有沃尔玛网站,其中提供了懒惰注册以及其他注册选项。懒惰注册是双赢的:客户能够浏览网站,将商品放入购物车,然后使用最少的信息进行注册,而网站会接收用户的电子邮件地址,该电子邮件地址可用于营销和促销。

我们的研究表明,FeelUnique,Victoria's Secret和Walmart等网站都使用了懒惰检出,社交登录和来宾检出。这是三种不同的设计模式,我们不必一定要在我们自己的网站上使用它们。

3.分析效率

在下一步中,您将分析每种模式的效率,并找出哪种模式可以满足您网站的需求。在我们的示例中,我们的问题是结帐期间网站被遗弃。因此,我们的目标是选择一种模式,以帮助我们留住用户并帮助他们完成订单。

比较模式之后,我们发现了明显的差异。例如,PayPal结帐和延迟注册都需要最少的信息(例如电子邮件和密码)。但是,并非所有用户都具有PayPal帐户,并且懒惰的注册不需要连接其他服务。选择模式时,请考虑用户的需求。

社交登录是一种快速便捷的登录方式:大多数互联网用户在流行的社交媒体网站(例如Google +,Twitter,Facebook和Instagram)上都有帐户。社交登录可以获取有关用户的关键信息,包括姓名,姓氏,电子邮件地址和邮寄地址。这使用户可以填写最少的信息,并快速进行结帐。

假设我们选择了社交登录名,以简化结帐流程并保留用户。最后一步是查找使用社交登录名的网站,例如FeelUnique和Asos。

4.剖析图案

最后一步是剖析模式words,换句话说,分析其他网站如何使用社交登录以及如何根据需要自定义或修改模式。

例如,Asos的按钮带有图标,以及社交媒体频道的名称‒ Facebook,Google +和Twitter。Asos特意选择了吸引所有人的最受欢迎的社交媒体渠道。Asos活泼的语气生动地吸引了千禧一代,因此,其社交媒体按钮不包括LinkedIn和Flickr之类的专业网络也就不足为奇了。

FeelUnique的社交媒体图标位于主要登录表单下方。尽管没有文本,但是这些图标还是很容易区分的,因为它们具有可识别的徽标和背景色。

设计模式的主要类别

有几种通常被接受的UX模式类型,它们服务于大多数界面(用于移动设备和Web)中提供的功能。这些类别包括:

数据输入/输出‒这些模式处理网站根据接收到的数据提供的数据输入和反馈。

内容结构‒这些UX设计模式可简化整个UX流程,并确保所有页面元素的可访问性,从而使用户在浏览网站或应用程序时充满信心。

导航‒这些模式可确保轻松浏览站点和内部控件(例如菜单导航)。

激励‒激励模式促使用户执行某些动作,并为成功完成动作提供奖励。

层次结构‒这些模式可以帮助您构建视觉层次结构,以便您的用户可以轻松地区分主要元素。

社交媒体‒社交媒体模式鼓励您的用户在线共享内容并与他人互动。

让我们看一下每个类别中的一些UX模式:

1.数据输入/输出

许多网站要求用户登录,创建个人资料,选择事件的日期等等。设计人员的任务是使数据输入过程快速,方便且无错误。这最后一个标准对于需要准确数据的航班或酒店预订服务至关重要。您不希望用户因为预订不正确的航班而感到沮丧,是吗?

例如,如果要为用户提供选择航班或房间日期的机会,则可能使用称为日期选择器(或日历选择器)的元素。日期选择器显示日历,让用户单击几下即可选择日期或日期范围,而无需手动输入。

当要求用户输入接近当前日期的日期时,此模式会派上用场。但是,如果某个日期过去或将来太远,则单击日历以到达所需的日期可能会令人沮丧。另外,请记住,在某些情况下,用户更愿意手动输入日期,而不是选择日期more,例如,当期望的输入距离单击太多时。

日期选择器对于选择日期范围非常方便:通常,此类系统并排显示两个日历,因此用户只需单击几下即可选择日期范围。

在Airbnb上,用户可以在一个下拉日历菜单中快速选择日期:无需在一个框中选择入住日期,而继续进行另一个操作以选择退房日期。因此,Airbnb的访客使用较少的点击来预订公寓。此外,所选日期范围以浅绿色突出显示,因此用户可以清楚地看到所选时间段。

Booking.com的日期选择器会连续显示两个月,而Airbnb的日期选择器会在签到和签出框中显示相同的月份。用户在Booking.com的值机框中选择日期后,便会转到另一个框来选择日期。该过程涉及的点击次数比对Airbnb的点击次数更多。

用户提交数据或照片或视频内容后,向他们提供反馈很重要。提醒您的用户有关错误和成功的信息。警报可让您的用户了解情况并增强他们的信心。

提供带有UI元素的输入反馈,例如通知,消息框,彩色工具提示,加载动画和图像等等。例如,在用户成功提交电子邮件营销活动之后,MailChimp会显示猴子爪的俏皮图像。

2.内容结构

通过结构合理的内容,清晰的导航以及对诸如注册之类的常见操作的快速修复,可以获得令人满意的用户体验。这些快速解决方案减少了摩擦因素,使用户无法完成自己的目标,例如进行购买。UXPin的Jerry Cao概述了导致用户放弃页面的一些因素:

视觉混乱(不相关的图像,横幅和链接)

界面不一致

不必要的动作

令人困惑的功能

有一些UX设计模式旨在减少摩擦。这些模式为有效的内容结构(如仪表板,FAQ部分和图像库)提供了解决方案,并简化了社交登录和自动完成之类的常见过程。

所述仪表板图案是对于涉及分析,指标或跟踪任何活动应用程序的通用解决方案。通常,仪表板显示的数据会通知用户有关系统的当前状态(例如销售或网站活动)。设计成功的仪表板不会分散用户的注意力,也无法很好地传达信息。简而言之,仪表板使用户能够快速地从多个源中提取数据。

3.导航

UX设计人员有时将导航与一个玩笑相提并论,说需要解释的导航并没有那么好。这种比较是合理的:简单明了的导航是确保Web或移动应用程序具有高度可用性的关键因素之一。

Web和移动导航模式可确保流畅的用户流,提高学习能力并减少摩擦。UX设计人员承认,这种模式可能会导致过度抛光的界面,而这种界面在众多类似的界面中并不突出。因此,设计者的目标是设计导航,以成功地将熟悉的概念与创新的解决方案融合在一起。

UX内容策略师Jerry Cao指出,您应该使用常见的导航模式来创建可识别的控件(例如菜单和选项卡),这些控件同时具有灵活性,以便您可以轻松地自定义它们。

让我们探索内容导航的一种常见模式‒无限或连续滚动。连续滚动使用户可以在自动加载内容时继续滚动。UX设计人员使用无限滚动来鼓励用户通过加载内容来消费更多内容,而无需用户点击或单击按钮(例如,“上一个”和“下一个”)。由于出现了具有用户生成内容的网站(Facebook之类的社交媒体网站)和移动界面,这种模式越来越受欢迎。

内容丰富的网站(例如Buzzfeed和Mashable)使用无限滚动模式来吸引网站访问者,并使他们在网站上花费更多的时间。

不过,无限滚动并不适合每个网站或移动应用。使用户能够反复滚动以消耗大量内容似乎很有趣,但是在某些情况下,用户会发现无限滚动会令人烦恼且毫无用处。以下是使用无限滚动有效的几种情况:

当内容太多而无法放在单个页面上并且您不想将用户的注意力从内容上移开时。

在处理移动界面时,用户无需点击“下一步”按钮之类的小元素。

当您不想破坏用户与内容的交互时。与单击“下一步”或“阅读更多”按钮相比,用户更可能通过向下滚动来消费内容。

在为页脚无关紧要的网站设计导航时。对于已建立的业务,具有“关于我们”或“联系我们”链接的页脚很重要,因此无限滚动可能会使用户感到困惑并使他们离开网站。

4.激励

激励或有说服力的设计模式利用心理学来创建认知触发器,以促使用户执行所需的动作。与外部触发因素(例如CTA)不同,说服力模式在用户和产品之间建立了无意识的联系。这种挂钩是通过将用户的问题与解决方案相匹配的“钩子”体验来实现的。结果,用户将习惯性地返回您的网站或应用程序,并且更有可能注册,订阅新闻通讯,填写个人资料,发布内容等等。

有说服力的设计模式通常分为五类:

认识

游戏化

知觉和记忆

回馈

社会偏见

游戏化模式包括强大的策略,可促使用户采取进一步的措施(例如,邀请朋友或延长订阅时间)。评估,奖励,里程碑,徽章,成就,等级,分数和其他策略可以轻松地鼓励用户越来越多地与系统进行交互。

Codeschool online在线学习平台‒提供了游戏化说服模式的鲜明示例。进度是游戏化设计的关键指标。在Codeschool上,学习者可以在个人档案中跟踪他们的课程进度。进度条将逐渐用绿色填充,表示已完成。用于展示进度和提高用户参与度的设计模式称为完成模式。

Codeschool使用的另一种模式是成就模式。通常,此模式侧重于对用户重要的个人或社会成就。由于Codeschool是一个学习平台,因此成就具有个人意义。用户获得完成课程或任何其他教育内容的徽章。

请记住,游戏化模式仅在某些目标受众(即儿童,青少年和千禧一代)中有效。此外,请记住,尽管教育,娱乐,社交媒体,生产力和类似类别的应用程序对于游戏化技术非常有用,但并不是每个应用程序都应该进行游戏化。

5.层次结构

网站或移动应用程序的视觉层次结构允许用户区分主要元素和次要元素。内容结构旨在方便,整洁地定位页面块,而层次结构则负责对内容进行优先级排序。

UI和UX设计工具可帮助您实现视觉层次结构。UI工具对人们如何看待信息产生巨大影响:难怪大标题引起了更多关注,而较小的字体则表明了更多的通用信息。建立视觉层次结构的UI技巧列表还包括:

对比。颜色,纹理,图案和形状有助于立即区分站立在一起的元素。

颜色。明亮的颜色比冷色调更容易引起人们的注意。

页面扫描模式。我们的目光倾向于以“ Z”或“ F”模式扫描网页,这种知识可以帮助您将内容定位在更容易阅读的区域。

空间。明智地使用,元素周围的负空间将使该元素更加可见和可读。

除了UI设计工具之外,UX设计模式还可以帮助您构建出色的视觉辅助工具,以指导用户浏览网站。

这些UX模式之一是面包屑。面包屑设计模式用于指示用户从主页到当前位置的路径。此模式显示了浏览内容的层次结构,因此用户可以在页面之间快速切换。面包屑是电子商务网站的一种流行模式。由于大多数电子商务网站都具有包含多个产品类别的分支结构,因此使用户能够轻松返回产品类别或主页很重要。

6.社交媒体

社交媒体模式可同时发挥多种功能。这些模式促进了交流(聊天),内容共享(自动共享),建立社交声誉(推荐)和其他社交互动(关注,邀请朋友)。

社交媒体类别尽管有其名称,但不一定意味着在社交媒体网站或应用中使用模式。根据上下文,这些模式还用于建立信任感,竞争和用户参与度。

例如,排行榜模式通常用于指示类别中的最佳表现。在竞争激烈的环境中使用这种模式以激发用户参与游戏或竞赛并激发社区意识是有效的。

成功实施的排行榜模式是上下文相关的,这意味着您应该仅比较具有相似级别,活动率等的用户。同样,最好将用户与他们的朋友列表中的人或位于相同位置的人进行比较。通常,当人们与自己认识的人或至少可能会面的人竞争时,他们会感到参与度更高。

在Swarm上,用户与朋友竞争。尽管只有前三名用户才能获得奖励金币,但Swarm的界面在一行下显示了其他占位符。这个技巧可以让Swarm用户看到谁可能在下周成为竞争对手。

FitBit遵循排行榜模式的最佳做法。FitBit上的排行榜是上下文相关的:用户可以根据不同的类别查看其排名,包括“最高”(总体排名),“朋友”和“本地”。FitBit显示其他用户的排名和关键指标(如步骤数),从而促使用户根据这些指标进行竞争。

外卖

在日常设计任务中,UX模式非常有用。如果要查找更多它们,请考虑查看包含整齐组织和结构化的模式的设计模式库,包括UI模式,UXPin的Web UI设计模式和Design of Design。

但是请记住,不要将设计模式盲目地应用于任何接口。每种模式都解决了一个确切的设计问题,应明智地应用。过度使用设计模式可能会使您的界面显得平淡无奇。



推荐阅读