>

你应当掌握的24种新兴交互设计,4个安顿提出让

- 编辑:管家婆马报彩图 -

你应当掌握的24种新兴交互设计,4个安顿提出让

在互联网这个领域,每天都有不计其数的产品诞生,有些产品只是灵光一现,有的却存活了下来,但是不论存活与否,这些产品上总有一些设计细节让我们眼前一亮,下文中分类整理了一些不错的交互形式,希望能给大家带来新的设计灵感。

轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢。

前世今生

2011年6月28日,谷歌正式推出了其酝酿已久的Google+社交网络服务,作为和Facebook抗衡的重要社交产品之一,Google+在初期的产品定位和对手有些差异,强调和不同的兴趣的朋友分享,其中一个重要的功能“圈子”将自己的好友打上一些标签进行分类,自己在分布信息的时候可以将不同内容分布到不同的圈子,让分享最优化。

图片 1

早前的版本

如图所示,早期的Google+整体形势与主流社交网站非常相似,核心功能包括以下几点:

信息流:Google+中心页面显示的朋友和联系人分享的最新信息以及相关评论和图片内容,主要展示的是个人和好友的动态和互动。

视频:视频功能被称为Hangouts(环聊),用户可以和自己的好友发起视频群聊,最多允许10人同时参与视频聊天。

社群:可以让用户分组,将不同类别信息发送到不同圈子,与真正感兴趣的人进行分享信息。

Sparks:让用户按照兴趣爱好找到自己喜欢的东西并且能够非常方便的分享给圈子内的好友。

      可以看出,在最初的产品定位上,Google+是想通过圈子这个核心功能打照一个不一样的社交平台,希望借由自己的特色在Facebook掌控的社交帝国杀出一条血路。但是从之前一份分析数据来看,Google+有22亿账号,活跃用户只有400万到600万。在22亿账号中,有9%公开发表过帖子,但其中37%是在YouTube留言,2015年1月所有Google+账号中只有0.3%(即660万)发过帖子,每天发帖的用户只有36.7万。这一数据没有包括非公开的帖子或留言,但足以显示Google+用户的活跃度很低,可以说Google+是一个“社交鬼城”。并且照这样的势头下去也不会有好转,因此在2015年11月Google+有了一次全新重大的改版并希望能够借由改版活得新的爆发。

一、导航

事实上,万能和事佬轮播图的点击率通常都很低,转化效果也并不好,却往往占用了页面最抢眼的大面积位置。想象这么一个场景:当你走进图书馆想找一本特定的书阅读时,一个销售员挡在你面前让你先看一个大广告图,然后等你还没读完具体讲了什么内容时,他又突然换了一张,是不是很惹人厌呢?大部分轮播图的设计也是如此。

新版体验

图片 2

全平台统一体验

      官方根据此前数据和意见反馈将“收藏集”和“社群”这2个功能放到了最显著的位置。所有的内容都是围绕用户的兴趣展开,由主界面我们就可以感受到Google+本次改动可谓用心良苦。

       整体的界面风格采用Material Design,页面显得更加的简洁、大气。界面层级也更加的扁平化,用户可以非常方便找到自己想要的功能,不同的主页面对应着红、蓝、绿、白这几个构成Google主色调的颜色给人视觉上强烈的冲击。同时更加注重不同设备上的体验,web,ios和安卓都进行了优化,用户无论在哪都可以得到快速一致的操作体验。

1,Google+导航的隐藏功能

确保你真的需要使用轮播图

首页

图片 3

首页

       首页构造非常简单,左边是侧边栏导航,右边为卡片式的信息流展示,整个页面结构扁平化,方便用户的浏览与查找。分享新鲜事的流程更加清晰,用户不需像原来一样发布前在“文字、图片、投票、链接”等一堆类别中进行选择,最需要输入文字或图片即可,大大精简突出产品的核心。最新的版本还会根据用户屏幕尺寸来显示2行或3行内容,充分利用屏幕空间。

图片 4

首先,设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。在各种网页中早以身经百战的用户,会选择最快速的方式找到和浏览他们想要看的内容。把精力放在翻看没有预期的轮播图上显然是低效的,一上来就自动进入了用户的视觉盲区。下面的热力图展示了用户的浏览行为习惯:快速扫描找到想要阅读的区域,然后再进行有序的沉浸式阅读,毫无例外他们都忽略了看起来像广告的图片部分。

社群

图片 5

社群

图片 6

社群详情页

       打开“社群”默认进入已加入的社群,用户可以关注或者自己创建社群,社群详情页中右侧显示模式与首页相同,展示的是该社群里面的相关内容,左侧除了展示社群的简介还会按照不同帖子的格式进行分类,方便用户查看自己想要的内容。用户在未加入某一社群时无法回复和发表文章。整个模块的架构非常的简单,用户在熟悉某一个单元后都可以复用到其他页面模块之中,降低了用户的学习成本。

Google+作为google进入社交领域的第一个产品,在交互方式有很多亮点,比如在导航的扩展性上,可以把不常用的标签拖放到更多中,从而使导航界面更简洁,这个操作进行时的效果也很精致、流畅。

图片 7

移动端

图片 8

首页、汉堡栏

图片 9

收藏集/社群

       移动端整体设计和web几乎没有太多区分,一眼看去就是一个web版的缩写,但是在某些体验上移动端的设计更佳。首先,移动端的主要目的是方便用户的浏览体验,因此信息的展示就显得非常的主要,Google+的卡片式结构能够比较完美的承载这些信息,此外,定位更加清晰准确,底部tab只突出最核心的功能,并且底部导航固定显示,照顾那些喜欢不断深入的用户,避免以为层级过深而迷失方向,同时针对移动端的特性对一些细节做调整。最后,所有的动效,手势都是针对移动端进行设计的,各种转场动画不仅让用户感到赏心悦目,而且毫无突兀的感觉,将功能、感官、体验完美结合。

2,导航hover

(以上热力图源自 James Royal-Lawson)

机遇与挑战

      本次改版可以说是Google+更加明确自己产品定位的一个信号,整体给人耳目一新的感觉,但是新版同时也招来了很多负面的声音,特别是web版本的体验相对较差,很多不可思议的操作例如:不支持鼠标hover,进入详情页后返回上一层级居然需要先点开隐藏的导航然后再点击才能返回(还不如点浏览器后退方便),虽然是实现了全部版本的统一,但是却没有针对不同平台的特点进行设计,可以说这一点导致web的体验非常差。

      总体来说,新版的Google+是一款好的产品,但是他如何在竞争激烈且已被寡头垄断的领域获得自己的空间还有一段较黑暗的路要走,是就此沉寂还是走出黎明前的黑暗就在此一搏!

图片 10

图片 11

案例一:你选中某个导航标签时,并不是改变该标签的字体颜色或将字体加粗,而是点亮该标签的背景。

(以上热力图源自 Nielsen Norman Group)

图片 12

除此之外,在2013就有研究结果表明,轮播图的交互效果十分不理想: 只有 1% 的用户点击了轮播图上切换按钮,其中 84% 的用户只在首屏点了1次。

案例二:选中的标签上会滴下一滴牛奶,并停留在那里,告知你的当前位置。(当然,这是一个关于牛奶的网站)。

图片 13

3,具有亲和力的图形化导航

(以上图片源自Erik Runyon的研究结果)

图片 14

还有学者针对30多个B2B的网站的网站进行了研究分析,根据轮播图的内容分成了三类:品牌宣传(Branding)、白皮书/在线研讨会(Thought Leadership)、服务推广(Service Promtion),发现不管是哪一类的内容,点击率都很低(0.16%~0.65%):

图片 15

图片 16

如果你比较关注近来的导航设计的话,不难发现,越来越多的导航采用了图标,代替了原有的文字链,并且扩大了单个标签的点击区域,这是在手机、平板电脑越来越普及的情况下,采取的优化设计,这样的导航可以同时适应PC端、移动端,节省了设计成本。

(以上图片源自Harrison Jones的研究结果)

4,活泼的辅助导航

不仅如此,不少使用轮播图的网站还存在以下几种SEO问题:

图片 17

复杂的大图导致网站性能低,加载速度慢。一般轮播图都会承载大量的图片信息,尤其是那些首屏就被高分辨率轮播图铺满的网站,这样庞大的图片信息会对加载速度造成很大影响。每多加载1秒,就会流失更多用户。无论是用户还是搜索引擎,都偏好加载更快的网站。

越来越多的国外网站运用侧边栏导航来辅助浏览页面,方便用户到达想关注的区域。不过使用这些侧边栏,需要注意页面的情况,避免其淹没在繁杂的页面元素之中,成为用户眼中的牛皮癣。

使用轮换的标题。不少开发者倾向于给页面最上方的轮播图片打上标签,使页面上出现轮换的4-5个不同的标签,导致相关关键词的检索能力降低。

二、Hover交互

Flash的使用。部分网站的轮播图使用Flash去展示内容,它能够做出很酷的效果,但却无法被任何搜索引擎抓取。

图片 18

综上所述,设计不当的轮播图容易被忽略,点击率不理想,还可能会对SEO造成负面影响。所以,我们不应该在还没有仔细思考过页面希望给用户传达内容的优先级和希望达到的效果时,就哪里需要哪里搬。事实上,有很多其他方式也能帮助我们解决问题,并带来更好的效果:

案例一:鼠标移到元素上时,会有流畅的动态效果,而不是仅仅改变颜色。

1、找到最需要触达给用户的内容,将次要内容放在次级位置展示

图片 19

谷歌云平台的产品与服务种类繁多,但并没有使用轮播图展示全部产品和特性,而是将浓缩的品牌价值和理念清晰地展现在用户面前,并提供主(免费试用)、次(与销售人员联系)两个明显的转化入口。同时,将其他次要入口铺在下方,让用户可以选择通过顶导航或者继续往下浏览,快速找到感兴趣的内容,如下图:

案例二:这个元素其实是焦点图切换中的控件,当用户将鼠标移到切换按钮上时,能看到下一张图片的缩略图。

图片 20

在进行hover状态的设计的时候,可以参考以上案例,关注细节,为用户打造更流畅的交互动作。

(以上图片截自Google Cloud Plantform)

三、反馈设计

2、让它成为内容的一部分

图片 21

氧气是一个专注于提供内衣购买推荐的app,当你按顺序滚动浏览页面的商品时,促销信息会以和通常产品推荐一样的形式出现在你面前,打扰感低,对进入沉浸式阅读的用户转化效果好,如下图:

案例是一个用户的订阅操作,设计师利用了极小的空间,做出了订阅、取消订阅等完整的交互细节。

图片 22

四、Hover展现更多

(以上图片截自氧气app)

图片 23

3、砍掉不重要的推广图,直接展示内容

图片 24

右边的图片似乎看起来更 好看 ,更 吸引人 ,然而在实际场景中用户总是习惯性的忽略banner部分的内容,选择性的浏览正文部分,直接展示用户需要的内容,可以提高用户的检索效率,从而带来更高的转化率:

这种鼠标hover展现更多信息的设计很受人青睐,它达到了视觉效果美观跟功能实用的微妙平衡,设计师为了视觉效果可以先把内容优先级较低的内容隐藏,等鼠标移入时再将其显示出来。

图片 25

五、照片展示

(图片源自《行为设计转化率 ——通过设计引导用户行为提升转化率》)

图片 26

所以,当你的合作伙伴告诉你他想加一个banner,能轮播的那种,先别急于着手画图,不妨按以下的几个步骤和他展开探讨:

图片中的圆点代表的是图片、视频等内容,而且圆点的位置也隐喻着这些照片的拍摄位置。这种交互方式将内容跟现实位置结合在了一起,更能吸引用户,获得用户的认可。

1、这么做的目的是什么,当用户打开页面时,最希望他关注什么内容,这些内容是否能分出优先级

六、评论模块

2、通过已有的研究结论,理性认识轮播图的效果(并非万能,如果设计不当可能带来负面效应)

图片 27

3、思考是否有更好的方式去达到同样的目的

在这个音乐网站中,设计师将每首歌曲的评论跟歌曲的时间维度相结合,你可以对歌曲的某一句、甚至某个词进行评论,并用小头像的形式进行展示。这样的设计,是针对用户的特殊需求而设计的,但这种交互形式值得我们借鉴到其他地方。

4、当无法抉择时,做ABtest

七、仿真展示

读到这里你可能还会产生这些疑惑:轮播图真的都这么低效难用吗,那为什么还有那么多网站使用呢?为什么我的网站的数据和上面的数据有出入?上面的数据都是基于web场景下的,在移动场景下会有什么不同吗?

图片 28

诚然,有的场景就非常适合使用轮播图——当用户希望查看的信息以图片形式承载效率最高,并且图片同属于某一类别下,用户有所预期时。谷歌图片的体验就是个典型的例子, 用户在搜索了摸个图片的关键词之后,先看到小图列表,点进其中一个小图查看原始图片后,就能通过左右箭头或者相关图片推荐去浏览更多同类型的图片:

案例来自于电子商务网站,T恤被挂在衣架上进行展示,鼠标移动时,衣服会朝相应方向移动,这种设计是取材于现实生活,拉近了网络跟现实的距离,流畅的交互、丰富的细节让用户有实体店购物的感觉。

图片 29

八、信息展示

(以上图片源自谷歌图片)

图片 30

除此之外,还有其他纯粹展示图片或者对外出租广告位的场景也同样适用。

图片 31

另外,在移动端场景下,由于屏幕的垂直高度更小,轮播图所占的比例更大,交互操作又比web端用鼠标点击有更大的触发区域,点击率通常会更高一些。有学者专门针对移动端的电商网站轮播图交互效果进行了研究分析,得出了与Erik略为不同的结论:23%的用户点击了轮播图上的内容,其中的54.1%在第一张图上完成了转化,其中的15.7%在第二张图上进行了操作。虽然数据图表同样是线性递减的,但无论是轮播图本身的点击率(23%)还是第一屏之后的点击率(总和占所有对轮播图点击的45.9%),都高于先前Erik在ND.edu网站上得到的数据。

这两张图属于同一个案例,只是展示了不同维度的信息。当信息有变动时,图上会有实时的更新,告知用户具体内容。这种设计是基于信息可视化的理论进行的,通过简单的效果来呈现复杂的信息。

图片 32

九、三维视角

(以上图片源自Kyle Peatt的研究结果)

图片 33

由于不同网站的历史背景、用户习惯、关注点和设计方案有所差异,得到的数据可能千差万别。我们需要知道的是,是否使用轮播图本身并非是影响点击转化率的决定性因素,是否有结合实际场景设计合适的方案,才是关键。在适宜的场景下,体验好的轮播图也可以带来令人惊喜的效果。

图片 34

体验好的轮播图应该如何设计

这个案例是三维视角的交互,用户进入页面后,会有4个选项,随着用户鼠标的移动,会自动选择某个选项。这样炫酷的设计的原因跟网站的主题有一定的关系(UFC格斗网站),带给用户较强的冲击感。

如果你确实需要使用轮播图并希望获取更高的点击率,以下是一些设计建议:

十、3D效果

1、让轮播图看起来像是站点的一部分

图片 35

将品牌元素贯穿设计始终,使用一致的字体及排版方式,让轮播图成为站点中统一的门面,而不是容易被直接忽略的花哨无序的贴片广告。提供清晰,区分标题、正文和转化入口的层次,提高可读性,如下图:

图片 36

图片 37

这个案例为了追求视觉冲击力使用了3D效果,但是也不缺乏实用性,交互流畅,不影响信息读取。

(以上图片截自Heroku)

十一、时间指示

2、慎用自动切换

图片 38

固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。 —— 电商专家 Depesh Mandalia

在某些按时间切换图片的模块,可采用此方式,给用户心理预期,这样切换的时候用户会比较容易接受,同样的设计可以应用到焦点图切换、页面切换、页面加载等模块。

Web易用性大师Jakob Nielsen也曾专门针对会自动切换的轮播图做了可用性研究,结论表明自动切换的轮播图会惹恼用户并更容易被他们忽略。

十二、metro信息展示

图片 39

图片 40

(以上图片截自淘宝网)

图片 41

这种设计似乎非常普遍:在一个固定的区域中,每5秒自动切换展示一张图片。这看起来似乎很方便,提高了更多内容的曝光率。然而实际并没有多少用户会盯着图片为了未知的内容耐心等待5秒,这样做太低效了,他们的视线早就转移到了其他地方。除此之外,当用户对当前的图片内容感兴趣进入阅读状态时,突然的自动切换会打断用户的阅读进程,让用户丧失可控感,感到沮丧和恼怒。最关键的是,自动切换的图片会比默认静止的图片看起来更像广告而非原生站点的一部分。

同级别的信息展示时,可以将其归类整理,以便获得较好的视觉效果,信息展开后,将其他豆腐块移动到下方,进行下一级别的信息展示,达到效果跟功能的平衡。

图片 42

十三、信息预览

还有一些网站用了比较折中的方式,当鼠标 hover 至 banner 上时停止自动切换,或者在 banner 上提供了暂停的按钮,这样做比原始的不分场合的自动切换要高级一些,但却无法解决移动端的一致性适配问题。因为在移动场景下,并不存在 hover 这一状态,暂停小按钮的可用性也非常差。同时由于移动端的一屏内容有限,用户不会做过多的停留就会往下翻看其他内容,自动切换这样的交互方式不仅起不到曝光更多内容的作用,反而影响了体验。好的做法是,让你的页面保持稳定的状态,通过进度指示点或者隐藏部分内容的方式,提示用户可以左右滑动查看更多。

图片 43

在下面的豆瓣app的这个例子中,推荐的第二个小组还有一部分没有显示出来,让用户明显能够感知到后面还有更多类似的推荐,可以左右滑动进行查看:

针对同等级的大批量信息,可以采用这种缩略模式,利用hover状态呈现信息的主要内容,由用户决定下一步操作,达到空间的合理利用。

图片 44

十四、复选式信息筛选

(以上图片截自豆瓣app)

图片 45

Instagram在推荐用户时也用了类似的做法,除此之外,还给出了展示全部的操作入口。不仅对用户的打扰最小,操作效率也更高。

图片 46

图片 47

通过页面顶部的操作模块,可以页面的信息进行多重筛选,直观、方便,比单一的下拉框式筛选功能更加丰富。

(以上图片截自Instagram app)

十五、浮层中的多重信息展示

所以,让你的图片默认静止在最新或者最重要的内容上,给出可以切换的操作预期,由用户自主触发切换操作时才进行切换,是更好的选择。

图片 48

3、给予清晰的操作反馈和内容预期

图片 49

展示信息的信息应该面向大部分的访问用户,属于同一类别或有所关联(如都是某个酒店的图片,都是旅游城市的地标图,都是当季发布的新品图等等),引起访问者的兴趣并诱发进一步切换探索,而不是随机地将一些无明显关联的图片放在同样的位置。

在某些情况下,浮层中需要放置大量的信息,这些信息属于同级别,又属于不同类型,这时候,可以参考此案例中的信息展示方式,在浮层中以较好的效果处理这些信息。

让用户能够快速识别点击区域,减少出错的可能。提供更大的点击区域和hover反馈,让用户能够清晰的感知到哪些区域是可点的。

十六、信息流内容数量控制

图片 50

图片 51

同时,对于面积较小的点击区域(如定位指示点),给予适当的容错区间。

图片 52

图片 53

对同等级、同类别的信息进行信息流内容控制的时候,可以参考此设计模式,利用简单的操作控制信息展示的数量,选取不同的设置时,下方的信息流可以根据实际情况改变样式,让信息流的样式跟对应的设置形成心理映射,用户形成习惯之后,能即刻明白该情况下的设置是什么。

提示用户所在的位置,提示用户操作后可见的内容。当用户对切换后的内容有所预期时,他能够更容易地找到自己感兴趣的内容,点击率也更高。下图的例子将步骤与定位指示点相结合,图片按顺序展示了当前步骤的指示。

十七、无线端手势操作

图片 54

图片 55

在下图的案例中,banner区域的下方展示了不同视图下的缩略图和标题文字,让用户能够在不进行任何切换时,就获取隐藏的信息内容,然后再选择自己感兴趣的进行操作。

案例一:模拟物理环境,赋予界面弹性属性,界面切换更自然,效果也更丰富。

图片 56

图片 57

(以上图片截自John Deere)

案例二:ipad上的应用程序Paper,用两个手指顺时针或逆时针旋转,来替代取消操作和恢复操作按钮。

4、保证可用性,兼顾SEO

十八、转场动画

最后很重要的一点是,在设计时须考虑到网站的加载速度,对内容进行优化,使用轻量的图片元素和转场动画,保证网站的可用性。

图片 58

目前web端产品的转场基本还处于没有情感化设计的阶段,无线产品在这块做的比较有借鉴性。上图的案例都有人性化、操作感强的特点在其中。

十九、图片查看

图片 59

图片 60

这种设计方式更接近现实中的场景,用户很容易明白,并且点击这些图片会带来不同的转换效果(左移、右移、斜着飞入屏幕),此外这种排列能让用户对处于特殊位置的图片记忆更加深刻。

二十、多图合一展示

图片 61

通过这种方式,在一张图上就可以展示多种相关商品,节省了大量的空间和资源,也将商品展示方式进行了创新。在电子商务网站上,这种设计的发挥空间很大。

二十一、Loading

图片 62

对一成不变的loading的样式稍作改进,就能超出用户的预期,从而获得用户的好感,而跟网站主题相关的设计,会提升用户对网站的忠诚度。

二十二、时间轴

图片 63

图片 64

在社交网站以外的网站上,时间轴也可以扮演十分重要的角色:以优秀的设计来引导用户进行更方便的阅读,达到更好的信息传达目的。

二十三、推拉窗

图片 65

图片 66

用推拉窗来进行信息展示,它可以在同样的空间内展示几倍的信息,而且有主次之分,让用户有所关注。

二十四、单页面网站

图片 67

图片 68

这种设计是将网站的所有内容都加载在一个页面上,通过上下或左右滚动就能浏览完整个网站,这种技术极大地减少了网站的层级,避免用户迷惑,提升了体验。

二十五、新组件畅想

1,IE6升级提示

优势概述:为用户设计提供升级或替换更高版本的浏览器的提示,并尽可能的降低用户对于提示的抵触 情绪,加速IE6消亡

应用环境:使用 IE6浏览器打开相关网页时

在设计中,我们遇到两个问题,一、如何让用户听到你要说什么。二、如何让用户按你所说的做。首先,我们提供用户更趣味性的展现方式,用轻松一些的手 绘风格去取代生硬的提示框,用户看到的,更像是一张手涂的卡片,这在一定程度上降低了对于同质化的弹窗提示或是弹出广告的抵触情绪,同时用口语化的提示 (亲,你的IE6弱爆了!)去增加用户的好奇心,如果用户这时在想你才弱爆了呢,给个理由先,那么,我们的第一个问题就解决了。对于解决第二个问题,我的理解是,能否戳到用户的痛处;在用户听到你要说什么之后,理想的情况是直接去点击下面的链接去升级或替换浏览器(当然 也有可能直接给你关了,对于这种情况,我只能说,弄死IE6,我们还有很多的努力要做),另一种情况是用户问了一句为啥?,好吧,我们给你在右边留了 一个链接,点了你就知道为啥了。

图片 69

图片 70

图片 71

最后,考虑到我们平台产品的通用性,并不是所有的产品都适合这种手绘风格的提示,还准备了一套相对通用一些的版本,以配合个别产品的背景。

图片 72

2,错误提示

优势概述:除了给用户提供必要的信息外,用一点小小的幽默帮用户消除一些错误带来的负面情绪

应用环境:网页出现错误时,如:404错误(针对这版设计的特点,比较适合一淘UX网站等类似的设计站点)

我们设计了一个很牛X的网站,但还没牛X到保证不会出现错误,但这并不影响我们的用户体验,即使错了,我们也会尽量保证这是个有趣的错误,看看我们的错误提示吧。

错误提示页面需要提供给用户的必要信息,主要有两点,一:告诉用户怎么了。二:告诉用户下一步该怎么做。

所以,针对网页中出现的下面三种不同的错误,我们一淘UX平台网站(ux.etao.com)会直截了当的用口语告诉用户 怎么了&改该怎么做:

好吧,现在用户知道该出什么事儿也知道该怎么做了,但这毕竟是个错误,用户也是有脾气的,其实出了错误,大家都不想的,你看我们一淘UX的前端工程尸、交互设计狮、用户研究猿和视觉设计虱这一张张苦逼的表情你就知道了。

图片 73

图片 74

图片 75

考虑到其它平台,我们也在做一些相对较为标准的错误提示,希望能在UX各产品中使用较为统一的规范。

图片 76

3,返回顶部

优势概述:使体验更有趣生活化,在视觉上与页面更融合。因此不再用机械化的文字或规矩的图标,而是尝试用隐喻的手法去表达

应用环境:在页面较长时用户需要回到顶部时

返回顶部需要向上,发想了一系列具有向上含义的事物(气球、烟、跳高、向上爬的动植物等等),最后锁定在电梯,优点在:

1、电梯向上的速度较快并可控,符合页面移动的场景。

2、根据一淘首页、子频道页面、活动页面的特点,往往模块较多、商品等按模块排布,如同用积木搭建 的大楼。因此用电梯的概念很契合。

3、视觉上观光电梯的形态是封闭的胶囊形,不会像比较开放的形态一样会过度分割负空间。形态上的简洁柔和符合目前的图标规范和视觉气质。

设计细节及实际应用如图:

图片 77

扩展设计:

电梯内部的人可以根据不同的场景设计形象。如团购表现出很拥挤;优惠频道表现出血拼;海外购表现出国际化;女性、男性、儿童也可以做出相应区分。体现出生活乐趣。

图片 78

结语

对交互细节的注重,是铸就互联网产品优秀体验的基础,细节决定成败,这句话在互联网产品上也一样适用,我们进行设计的时候可以尝试跳出现有设计的束缚,思考新的设计方式,给用户带来不一样的体验,同时也能给我们带来意想不到的收获。

以上这些案例都是出于对新兴交互方式的兴趣才收集的,并不见得代表未来的发展趋势,贡献出来希望能开阔下大家的设计思路,从更多的维度来思考自己的设计,收集会一直持续下去,并会增加移动端的案例的比例。

本文由管家婆摄影发布,转载请注明来源:你应当掌握的24种新兴交互设计,4个安顿提出让