AMO全媒体运营
首页 交互设计 10个超赞的交互设计范例

10个超赞的交互设计范例

当用户打开一个app或网站,他们首先会注意到那些明显的设计元素:logo,颜色,icon,插画或图片。这些元素确实帮助提升了用户体验,但事实上往往带来更大的问题:怎样处理交互设计。…

当用户打开一个app或网站,他们首先会注意到那些明显的设计元素:logo,颜色,icon,插画或图片。这些元素确实帮助提升了用户体验,但事实上往往带来更大的问题:怎样处理交互设计。对终端用户来说,这不像一个华丽的新页面那么容易察觉,但对于创建一个直观易用的页面来说这必不可少。

什么是交互设计?

交互设计是促进帮助用户与产品间交互反馈的一种设计(产品往往指app或网页)。根据交互设计基本原理,”交互设计的目的是创造产品,使用户能以最佳方式达到目的。”换句话说,交互设计应当处理好屏幕上出现的任何用户可能与之交互的元素,无论是点击,滑动,轻点,或其他动作。

交互设计的5个维度是帮助理解什么是交互的一种有用的模型。这个概念最早是由Gillian Crampton Smith,一位交互设计学者引入的,当时这个模型只有4个维度。Kevin Silver,一位IDEXX实验室的高级交互设计师,他后来添加了第5个维度。

第1个维度:文案应当简单易懂,并且文案长度应当足够能让用户正确理解(太长的文字会让用户不耐烦,而太短会造成歧义)。

第2个维度:视觉传达,类似图像,排版,icon之类,应当起到补充文字的作用来向用户传达含义。

第3个维度:物理对象或空间,指的是用户实际与之发生交互的硬件和设备。例如,用户是使用智能手机还是笔记本和鼠标?他们是在什么场景中?书桌前还是拥挤的地铁上?

第4个维度:时间,指的是用户会怎样衡量进度,例如用声音或动画,以及他们花了多久和上述提到的3种维度交互?

第5个维度:行为,这是由Kevin Silver添加的。包括了前面提到的4种维度如何定义产品的交互。它还包括了用户和产品的反应。

相关阅读: UX设计师探索手势交互的6个理由

10个交互设计范例

设计交互在现实生活中是怎样的?这里是Dribbble上一些我们喜欢的范例。

动图封面

作者Jony vino。跟你的朋友AA账单往往没有看起来那么容易,尤其当你对视觉的敏感超过对数字。这个app可以让你输入账单总金额,选择小费的百分比,然后查看每个人应当付多少。最棒的地方是,你可以在app中简单地调整每个人单独的部分,数字会马上自动计重新算出来,而不用手动调整每个人的部分以至于不得不重新计算每个人该付多少。

动图封面

作者Prem Gurusamy。对于大部分电商网站,当你需要查看购物车时会跳转去网站或app上另一个完全不同的页面。使用这种交互方式,当你点击“加入购物车”按钮后,你会立刻看到你的商品“飞”进购物车。当你浏览页面其他部分时,购物车会一直可视化地显示你的商品。

动图封面

作者Igor Pavlinski。社交媒体app往往因为信息过载臭名远扬,它总是同时向你展示各种热门新闻、流行视频或文章、以及爆炸新闻。这款为新社交媒体app所做的设计将控制权重新还给用户,按照来源组织内容(例如Youtube,Vimeo,Twitter,或Reddit),方便你选择浏览某个频道。卡片式的布局也省去了你在偏好的不同内容间反复跳转的消耗,相反,你可以在相同的体验中来回交替浏览。

动图封面

作者Tubik。点一个你自己的汉堡有一千零一种搭配方式。当你在智能手机上下单时,在小小的屏幕上点选不同的原料是件需要高度灵巧性的事。这款为Tasty Burger app设计的UI界面简化了点单流程,它先对食材的种类进行了分类,你可以先选择食材的种类(例如芝士),然后再选择不同的类型,例如车达芝士或硬质奶酪,而不用一次性浏览一长串包括芝士、菜蔬、肉类、面包等各种可能搭配组合的清单。

动图封面

作者Rahul.Design。如果你正在找房子,但无法亲自去现场查看,那么其次最优的选择就是虚拟现实访问。Spec是一款为真实地产设计的app,它模仿了我们在查看新的房产时的真实行为。你可以点进任何一个房间,像是厨房或客厅,然后360度旋转手机来查看室内状况,只需一个点击就可以从一个房间切换到另一个房间。

动图封面

作者Forest Plasencia。筛选器提供强大而简单的方式来处理不同的信息字段。但是,很多筛选器的交互问题是他们在app内开启了新的弹窗或页面,遮挡了你想过滤的信息。这个页面中的微交互将所有内容都显示在页面中,哪怕你正在筛选信息。用这种方式,当你选择了不同的筛选选项后可以立刻看到结果的变化。

动图封面

作者Dmitro Petrenko。感谢智能手机的出现,如今想要监控自己的住宅比过往任何时候都更方便。但是全美94%-99%的安全警报都是误报的。主要的原因是用户误操作,或是偶然触发警报后无法关闭。这个app使用图片和影像,帮助你将每次操作聚焦在最重要的交互步骤上——不论你此时是否已触发的家里的警报。

相关阅读:创建一个记录交互步骤的工具

动图封面

作者Gil。这个简单的页面交互提升了用户的临场体验,并且帮助公司将用户访问页面时间保持得更久。网站的主要目的是为了展示这些房子作为办公室或扩建部分,在真实场景中是怎样使用的。这个页面没有为每个操作目的单独设计体验,它的目的是模仿用户对比不同用途,并且在其中无缝切换。

动图封面

作者Dominik Martin。交互不需要大胆和引人注目的影响。这个app简化了我们都很嫌弃的一种操作——从一串很长的列表中挑选所在国家或地区。它不会让用户滚动列表来找到自己的国家,这个微交互先让你选择所在国家的首字母,然后再从范围窄得多的列表中找到自己的国家。

动图封面

作者Mykolas Puodziunas。越来越多零售网站的设计使你更容易“快速浏览”一个商品,而不是点击到详情页然后不得不返回到搜索结果来浏览其他商品。这款app更进一步,使你可以同时查看同款商品的不同颜色,而不用离开当前的列表页。

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名

为您推荐

交互设计:如何做到品质?

如何做到品质,即交互设计的高品质。 一、怎样算是品质? 首先,探讨这个问题,意义何在? 笔者认为,有两点意义:首先,作为...

从产品的角度看交互设计原则

对于一名产品经理,交互设计是原型设计里的重要环节,交互设计的好坏,直接影响产品是否能够吸引和留住用户,因此了解交互设计的...

从入门到精通,了解智能交互设计专业

随着科技的飞速发展,智能交互设计专业逐渐成为热门领域。这个专业涵盖了人机交互、人工智能、设计思维等多个方面,为从业者提供...

交互设计的基本原则探究

随着科技的不断发展,交互设计已经成为产品设计中不可或缺的一环。在设计用户界面时,遵循一些基本的交互设计原则是确保用户体验...

AR智能眼镜交互设计研究

AR眼镜交互形式分为外接设备和自然交互,我们将一一分析这些交互形式特点和应用场景。预测未来AR眼镜交互形式将会往哪个方向...

发表回复

返回顶部