国外WEB经典的网页应用界面设计欣赏

为了赶上互联网发展的步伐,我们所开发的Web应用要具有优良的品质,充当着用户界面的角色,及捕获企业所提供特殊服务、产品的目标用户的责任。只有它的设计满足客户的基本需求,具有简单、响应式、易使用的界面才能满足上述的目标。因此,设计者必须使用最好的Web开发与设计技巧,同时要注意几个注意事项,比如空白区域、UI加载速度优化、信息与说明的恰当展示等。

什么使我们成为网站和app的忠实用户?思考这个问题时,我们发现那些令人喜爱的网站和app都拥有一样东西:灵魂。它们是有灵性的,它们的用户体验中被置入了情感化智能,并且这种情感化智能通过交互设计和反馈机制得以体现。 这些要素将个性赋予了网站或app产品,并让产品最终在用户心中留下深刻的印象。不得不说,在赢得忠实用户这件事上,产品的灵魂确实扮演了一个挺重要的角色。本文中,我们将通过一些优秀的例子来了解情感化交互,以及个性和灵魂是如何灌注进产品的。 什么是情感化交互? 情感化交互设计是一种状态,指在网站或app在显示信息或实现功能时,包含了能产生人性化用户体验的种种细节。这些交互可能是大的体验(例如网站整个宕掉时),或者是小的体验(例如在表单元素旁显示的错误信息)。它可以体现在不同的要素中,例如提示信息、颜色、设计、对用户输入的响应,以及系统信息输出。将这每一种体验混合起来,就为网站创造了灵魂和个性,这种和用户间的情感联系能带来忠诚持久的狂热粉丝。 情感化交互范例 以下部分范例来自Little Big Details这个天才的网站,我强烈推荐你上去看看,一定有收获。 1. Bottlenose

无论专业人士还是初学者都会用到Web应用界面,所以近距离研究每个UI元素对于设计师来说十分重要。为了帮助设计师们完成任务,本文列举了一些优秀的Web应用界面设计。或许你可以从中获得设计自己Web应用界面的灵感。

图片 1

Web应用界面设计案例

这是一个基于Web的Twitter客户端,它给用户提供了一种新的探索和使用Twitter的方式。这家网站在用户初次使用时的引导方面做得很出色,用清晰而幽默的方式向用户介绍它的功能。网站在确认按钮上使用了诸如Make senese、Got it一类的词句,让用户感到有个性,和产品自身的自信感,这比简单的Next强多了。

Jamiq、FreshBooks、CrazyEgg、Donor Tools、Wufoo、Freckle、Pulse、Mint、Harvest、iPlotz、PollDaddy、Campaign Monitor、Designer Pages、OneHub和Wistia的Web界面设计都是很好的案例。

  1. Wufoo

Jamiq是一款监测工具,用来跟踪具有高排名的搜索引擎和所有语言的社交媒体平台。而FreshBooks是一款在线发票服务软件,用来帮助小企业和自由职业者进行时间追溯和发票跟踪。CrazyEgg可以帮助用户了解点击发生在网站的哪些地方。相似的,Donor Tools是一款帮助非营利组织和福利员寻找捐款与筹资目标的应用。Wufoo可帮助设计者用更快、更有趣的方式设计Web表单,它可以帮助你创建注册表单、邀请函、在线调查及联系方式表单。

图片 2

总而言之,每个案列都反应了不同的需求与目标。你需要一一分析它们的设计细节,以发现哪些元素可以完美地应用到你自己的产品设计中。这个过程可能需要花费一些时间,但是值得的。

Wufoo混合了俏皮的提示信息和触动人心的UI元素,为用户营造了一种友好和私人化的体验。例如:

为了进一步帮助你,本文还将展示更多十分酷的Web应用设计。所有有案例具有设计简单、配色方案完美、整体设计和可用性好等特点。

  • 每个页面的标题里会包含一句诗。虽然是随机显示的,但诗句强化了Wufoo典雅的产品形象,让枯燥的任务(创建表单)变得个性生动。 图片 3
  • 注意New Form后面的感叹号。提到form,人们总是联想到无尽的填写,但Wufoo放了一个感叹号在这里,让这个元素充满了能量和乐趣。 图片 4
  • 表单报告界面没有数据时,Wufoo并没有简单给出一个空白界面,而是通过提示信息传递出真正有个性的东西,并且鼓励和督促你创建第一份报告。

Postmark

图片 5

图片 6

  1. MailChimp 作为最好的情感化交互的范例之一,MailChimp从不放过每一个可以向产品注入灵魂的机会。

Buffer

  • 404页:MailChimp的404页面很有才,准确的告诉用户目前发生了什么,并积极号召用户采取下一步行动,继续先前的流程体验。这招很聪明、有效,并且化解了404的尴尬。 图片 7
  • 发送邮件活动(Email Campaign):用户发送了一个邮件活动后,MailChimp总是会给予用户庆祝和鼓励。This is your moment of glory这句文案很好的缓解了用户在创建邮件活动时的恐惧和期待。 图片 8
  • Twitter页面:如果MailChimp宕机了,他们的Twitter页就会换上一个特别的背景图:一只悲伤的黑猩猩正在努力修复问题。现在人们习惯去Twitter了解到底出了什么事,而这张背景图正好强化了这个Twitter账号的个性,给用户带来情感化交互体验。

图片 9

  1. Pinterest

Freshdesk

图片 10

图片 11

这个当下火热的社交媒体网站在注册账号时,使用了一种有深度的交互设计。不同于传统的即时表单验证信息,当用户输入合法的邮箱和密码时,网站会给出Looks good!的提示信息。虽然这只是一个很小的触动,但足以使注册流程显得人性化。

Mint

  1. Path

图片 12

图片 13

MailChimp

Path的注册按钮上有一个向右的箭头,而当鼠标点上去后,箭头会变成笑脸。这样,当用户与网站第一次产生交互时,就获得了一个亲切而个性的欢迎。这是一个有深度的细节,一般设计者和用户都会忽略这个地方,而当它真的出现了,就为接下来的体验定下了良好的基调。

图片 14

  1. Hootsuite

Skyclerk

图片 15

图片 16

这只友好的猫头鹰是Hootsuite的吉祥物,吉祥物不仅仅是一张可爱的脸,它甚至代表了服务本身,如同MailChimp的那只黑猩猩。Hootsuite调用Twitter的API把数据拉到自己的应用上,由于Twitter有API调用次数限制,Hootsuite会在用户长时间不活动时停止向Twitter请求数据。此时,猫头鹰会出现,告诉你它正在休息,如果你需要它的话,可以让它立刻醒来。这招巧妙的把负面体验变成了正面体验,塑造了品牌形象,并为产品带来了个性和灵魂。

本文由美高梅官方网站发布于影像世界,转载请注明出处:国外WEB经典的网页应用界面设计欣赏

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。