如何使用最佳UI设计模式

发布时间:2019-09-02 11:31:19 阅读:66

对于许多人来说,UI设计模式可能难以正确实现,因为概念非常简单:美学上令人愉悦且功能丰富的模式集合。但如果你把它们视为模式,那么你的网站就会开始感受到千篇一律。

我们将解释UI模式的不同分类,并描述如何根据您的需求选择正确的模式。请继续阅读以了解更多信息。

UI设计模式的4种主要类型

模式不是可以剪切并粘贴到您的设计中的网站功能。更准确的定义是解决常见可用性问题的可视化策略。此外,图案不是你拼接在一起创建界面的部分; 相反,它们更接近基础部分,您可以在其上构建自定义网站。UI设计模式不是模板,因此不应将它们视为这样(除非您想要对您的网站感到无聊)。

Vimeo UI设计模式
为了防止混乱,当您将鼠标悬停在每个项目上时,Vimeo的主导航会触发下拉列表。

 

正如Jared Spool在“ 设计决策剖析”中所描述的那样,UX模式仅在基于特定设计案例使用时才有用。通常,它们针对核心站点功能,例如:

  • 输入和输出 - 这些模式处理用户如何与站点交互或提交输入,以及站点如何响应或提交反馈。
  • 导航 - 这些有助于指导用户在网站周围,确保他们正确定位并知道如何丢失他们的方式。
  • 内容结构 - 您的内容是否可访问且易于访问?这些模式可帮助您整理内容,以便您的用户可以充分享受您的网站。
  • 社交分享 - 这些模式允许,促进和促进您喜欢的任何社交媒体场所的网站共享。

UI设计模式的3个层次

如上面的金字塔所示,模式可以通过它们帮助站点的方式进一步分类。哥本哈根Benjamin Interactive的设计师Anders Toxboe 认为,模式可以通过三种方式为网站提供帮助:实施,流程和背景。

1.实施

金字塔底部是模式的基本组成部分,分类为实现。

正如您在Yelp样式指南中的示例中所看到的,这些是最直接和最严格的模式,规则往往是黑白的:搜索框应位于右上角,表单标签应该直接在现场框等下面

Yelp风格指南

2.流动

如免费电子书Web UI最佳实践中所述,上述实施模式的步骤是有助于用户体验流动的模式。在这个级别,模式变得更加先进,并且关注它们如何帮助用户在站点中移动以实现其目标。将一个跳转到置顶导航更好地工作,以帮助用户获得额外的内容?鉴于您的目标用户和网站类型,接收输入的最佳方式是什么?从本质上讲,这些模式更灵活,可根据您的特定需求定制您的网站。

我们来看看Spotify和Pinterest的下面的例子。

用户问题:我想快速访问网站上的其他选项或操作,但我不想让太多选择感到瘫痪。

UI模式解决方案:隐藏可扩展菜单中的其他选项,以便它们不会使主界面混乱。

Spotify UI设计模式
Spotify的溢出菜单

 

Pinterest UI设计模式
Pinterest溢出菜单

3.背景

上下文模式特定于您选择的网站类型或类型。

例如,假设您正在为专业艺人建立一个网站:您需要包含活动日历,传记和投资组合等模式。如果你正在建立一个电子商务网站,你将不需要一个活动日历,但如果没有结账系统你就不会走得太远。

现在让我们看一个真实的例子。 维珍美国  航空公司的预订表格(高级用户输入模式)需要UI模式,因为它属于航空公司业务。显然,像Pinterest或Twitter这样的社交网站不需要这种复杂的东西。

维珍航空预订表格UI模式
维珍美国的预订表格

使用正确的UI设计模式的4个步骤

在列出Web界面的详细信息之前 - 用户输入数据的方式,网站提供反馈的方式等等 - 首先,您需要确定网站的可视层次结构

了解您网站的外观和风格将帮助您了解哪些模式适合您。一旦建立,您就可以开始选择UI模式的过程。

选择过程可简化为四个基本步骤:

  1. 确定需要解决的问题。
  2. 探索其他人如何解决同样的问题。
  3. 检查解决方案在其他站点上的使用情况。
  4. 详细说明模式的正确用法,以便您可以重新创建它。

上述过程专注于寻找模式,但您如何确定哪种模式适合您?Technori主编Melissa Joy Kung 在她关于该主题的帖子中详细阐述了这一过程她通过烂番茄使用的“评级”风格模式的例子说明了她的观点:

Rottentomatoes UI设计模式

1.定义UX模式 - 首先,您应该了解模式的作用。评级模式的主要功能是为用户提供快速反馈,允许用户的语音被听到,并收集定性和定量的用户数据。

2.找到使用得很好的模式 - 搜索网络,直到找到特别好用的模式网站,在这种情况下,烂番茄。这可以在以后用作参考指南。

3.列出模式解决的问题 - 与定义模式的主要功能类似,了解它们所针对的问题非常重要。评级模式满足反馈,提高交互性,并且它使用户的意见更加重要,他们欣赏。

4.知道何时使用模式 - 这可以追溯到我们之前关于上下文的UI模式的讨论。当您的产品需要额外的反馈时,或者当您希望扩展现有的反馈(如书面评论)时,会使用评级模式 - 但这在新闻博客上没有意义。

5.了解如何使用模式 - 在此阶段,您将了解网站的技术细节。评级模式使用用户评级的总计平均值,稍后更改评级的选项,悬停在其上时显示的显示,让用户知道他们的评级被接受的提示等。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"如何使用最佳UI设计模式",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560