在20世纪70年代期间,克里斯托弗·亚历山大很可能是许多建筑师的烦恼。作为一名建筑师,亚历山大以他的设计理论而闻名,尤其是他坚持认为用户比任何建筑师都更了解他们需要的建筑。因此,他创建并验证了一种 “模式语言”,使任何人都可以大规模或小规模地设计和构建。没过多久,这个通用模板就进入了web,web设计模式诞生了。
在这篇文章中,我们将探讨用户体验 (UX) 设计模式的确切含义,以及在互联网上跟踪它们的一些最佳来源。
什么是设计模式?
作为人类,我们具有在视觉设计中寻找模式的天生愿望和能力。这种视觉感知可以应用于信息分析,这就是大数据和数据可视化在当今商业环境中变得如此突出的原因。即使没有意识到这一点,我们自然也会被模式所吸引,而设计模式是设计师和最终用户都可以理解的通用视觉语言。在用户体验方面,这意味着设计师认识到用户在与产品交互时的习惯,例如他们如何浏览页面。
除了直观,设计模式也很方便。开发人员没有太多的时间在手 ,所以使用设计模式而不是从头开始创建一些东西是一个伟大的节省时间。
证明在页面上
无论是否设计模式,由于其吸引力和实用性,在网页设计中经常使用某些元素。您几乎可以在任何网页上找到以下示例:
- 格式塔原则
描述人们如何将视觉元素组织成组或统一整体的一系列原则。这些包括相似性,连续性,闭包和更多。在网页设计中,所有这些原则都应该被认为是为用户提供最充分的体验。
- 接近度
作为一般规则,人们将把紧密放置在一起的元素关联起来,因为它们彼此相关。对于描绘不相似的分离对象也可以这样说。接近需要使用负空间来将元素分开或使它们更靠近在一起,以创建分组项目的外观,而无需线条或其他指示符。
- 颜色
很少有元素能像颜色一样吸引用户的注意力。这可能是由于它可以引起非常不同的反应,这取决于颜色和读者本身。找到相互补充的颜色可以进一步强调内容; 在色谱中彼此相邻的颜色就是一个很好的例子。
图书馆
这些元素将被考虑到任何好的网页设计中,所以你的下一个问题可能是 “在哪里可以得到它们?” 以下是一些设计模式的最佳网站-无论您只是在寻找灵感还是想直接嵌入到您自己的网站中。
1.UI模式
模式被分成关于网页的不同区域及其对应的用户动作/反应的多个有用部分。每个模式都包含有关何时使用它的建议,例如屏幕截图,用户可能如何参与页面以及它将如何提供积极的UX。此外,UI模式提供了有说服力的设计模式,如损失厌恶,认知偏差等。
例如, 连续滚动向用户呈现看似无穷无尽的内容集,省略通常的 “下一页” 按钮以帮助内容消费。这对于对于页面来说可能太大的大型数据集是有效的,或者如果导航到第二页面会从内容中带走太多注意力。
2.图案
通过完善的库,Patternry提供了有关不同设计模式选择的详细信息。标签允许用户搜索表单,内容和导航等类别,所有这些类别都包含有关模式解决的问题以及何时,如何以及为什么使用它的详细信息。HTML类别提供HTML,CSS和JavaScript格式的代码,以便快速编码到您的网站。
进度条用于显示应用程序正在执行任务,并显示所述任务的进度。如果操作需要超过几秒钟才能完成,这是保持用户通知的好方法,使界面感觉更灵敏。Patternry提供了用于快速和容易嵌入的HTML代码。
3.祖尔布
Zurb拥有来自世界各地设计师的庞大资源库,拥有众多资产来激励和支持狂热的开发人员。包含超过5000个界面模式以及众多行为触发器和代码片段,可用内容的范围是无与伦比的。但是,Zurb确实缺乏其模式的信息性,因此可能适合寻找灵感的更有经验的开发人员。
4.UXPin
UXPin非常适合移动设计模式,包括电子商务,音乐和视频,社交媒体和出租车应用程序模板类别。每个类别都包含用户可能在每个站点上体验的全面选择。例如,社交媒体包括帐户创建,个人资料,导航抽屉,搜索建议,登录,提要等。UXPin是一项付费服务,但用户可以注册免费试用,看看它是否适合他们。
还不满意吗?
我们总是很高兴看到优秀的用户体验设计的例子,特别是当它们来自我们自己的产品时。如果您想查看更多应用程序、网页或仪表板示例,可以在我们的示例页面上查看。有了iOS,HTML5,Windows Forms和Indigo Studio的示例,每个人都有一些东西!
想要在编写单个代码之前体验您的应用程序的外观和工作方式吗?试用Indigo Studio原型制作工具今天或看看它能为你做什么。