数极客首页

二十四种让人眼前一亮的新兴交互方式

在互联网这个范畴
,每天都有数不胜数

的产品降生
,有些产品只是灵光一现,有的却存活了下来,但是不论

存活与否,这些产品上总有一些设计细节让我们眼前一亮,本文中分类整理了一些不错的交互方式
,希望能给大家带来新的设计灵感。

一、导航

1,Google+导航的躲藏
功用

二十四种让人眼前一亮的新兴交互方式

Google+作为google进入社交范畴
的第一个产品,在交互方式有很多亮点,比如

在导航的扩展性上,能够

把不常用的标签拖放到“更多”中,从而使导航界面更简约
,这个操作中止

时的效果也很精致、流利

2,导航hover

二十四种让人眼前一亮的新兴交互方式

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

二十四种让人眼前一亮的新兴交互方式

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

3,图形化导航  

二十四种让人眼前一亮的新兴交互方式

假定

你比较

关注近来的导航设计的话,不难发现,越来越多的导航采用了图标,替代
了原有的文字链,并且扩展
了单个标签的点击区域,这是在手机、平板电脑越来越进步

的状况

下,采取的优化设计,这样的导航能够

同时顺应
PC端、移动

端,俭省
了设计本钱

4,辅助导航

二十四种让人眼前一亮的新兴交互方式

越来越多的国外网站运用侧边栏导航来辅助阅读
页面,便当
用户抵达
想关注的区域。不过运用
这些侧边栏,需求
留意
页面的状况

,避免

其淹没

在繁杂

的页面元素之中,成为用户眼中的“牛皮癣”。

 

二、Hover交互

二十四种让人眼前一亮的新兴交互方式

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

二十四种让人眼前一亮的新兴交互方式
案例二:这个元素其实是焦点图切换中的控件,当用户将鼠标移到切换按钮上时,能看到下一张图片的缩略图。

在中止

hover状态的设计的时分
,能够

参考以上案例,关注细节,为用户打造更流利
的交互动作。

 

三、反响

设计

二十四种让人眼前一亮的新兴交互方式
案例是一个用户的订阅操作,设计师应用
了极小的空间,做出了订阅、取消订阅等完好
的交互细节。

 

四、Hover展示

更多

二十四种让人眼前一亮的新兴交互方式
这种鼠标hover展示

更多信息的设计很受人喜欢

,它抵达

了视觉效果美观跟功用
适用
的巧妙

均衡

,设计师为了视觉效果能够

先把内容优先级较低的内容躲藏
,等鼠标移入时再将其显现
出来。

 

五、照片展示

二十四种让人眼前一亮的新兴交互方式
图片中的圆点代表的是图片、视频等内容,而且圆点的位置也隐喻着这些照片的拍摄位置。这种交互方式将内容跟理想
位置分别

在了一同
,更能吸收
用户,取得

用户的认可。

 

六、评论模块

二十四种让人眼前一亮的新兴交互方式
在这个音乐网站中,设计师将每首歌曲的评论跟歌曲的时间维度相分别

,你能够

对歌曲的某一句、致使

某个词中止

评论,并用小头像的方式
中止

展示

。这样的设计,是针对用户的特殊需求而设计的,但这种交互方式
值得我们自创
到其他中央

 

七、仿真展示

二十四种让人眼前一亮的新兴交互方式
案例来自于电子商务网站,T恤被挂在衣架上中止

展示

,鼠标移动

时,衣服会朝相应方向移动

,这种设计是取材于理想
生活,拉近了网络跟理想
的距离

,流利
的交互、丰厚
的细节让用户有实体店购物的觉得

 

八、信息展示

二十四种让人眼前一亮的新兴交互方式
这两张图属于同一个案例,只是展示

了不同维度的信息。当信息有变动时,图上会有实时的更新,告知用户细致

内容。这种设计是基于信息可视化的理论中止

的,经过
简单的效果来呈现复杂的信息。

 

九、三维视角

二十四种让人眼前一亮的新兴交互方式
这个案例是三维视角的交互,用户进入页面后,会有4个选项,随着用户鼠标的移动

,会自动选择某个选项。这样炫酷的设计的缘由
跟网站的主题有一定的关系(UFC格斗

网站),带给用户较强的冲击感。

 

十、3D效果

二十四种让人眼前一亮的新兴交互方式
这个案例为了追求视觉冲击力运用
了3D效果,但是也不缺乏适用
性,交互流利
,不影响信息读取。

 

十一、时间指示

二十四种让人眼前一亮的新兴交互方式
在某些按时间切换图片的模块,可采用此方式,给用户心理预期,这样切换的时分
用户会比较

容易接受

,同样的设计能够

应用到焦点图切换、页面切换、页面加载等模块。

 

十二、“豆腐块”信息展示

二十四种让人眼前一亮的新兴交互方式
同级别的信息展示

时,能够

将其归类整理,以便取得

较好的视觉效果,信息展开后,将其他“豆腐块”移动

到下方,中止

下一级别的信息展示

,抵达

效果跟功用
的均衡

 

十三、信息预览

二十四种让人眼前一亮的新兴交互方式
 针对同等级的大批量信息,能够

采用这种缩略方式

,应用
hover状态呈现信息的主要内容,由用户决议
下一步操作,抵达

空间的合理应用

 

十四、复选式信息选择

二十四种让人眼前一亮的新兴交互方式
经过
页面顶部的操作模块,能够

页面的信息中止

多重选择

,直观、便当
,比单一的下拉框式选择

功用
愈加
丰厚

 

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

二十四种让人眼前一亮的新兴交互方式

在某些状况

下,浮层中需求
放置大量的信息,这些信息属于同级别,又属于不同类型,这时分
,能够

参考此案例中的信息展示

方式,在浮层中以较好的效果处置
这些信息。

 

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

二十四种让人眼前一亮的新兴交互方式

对同等级、同类别的信息中止

信息流内容控制的时分
,能够

参考此设计方式

,应用
简单的操作控制信息展示

的数据量
,选取不同的设置时,下方的信息流能够

依据

理论

状况

改动
样式

,让信息流的样式

跟对应的设置形故意

理映射,用户构成
习气
之后,能即刻明白该状况

下的设置是什么。

 

十七、五险段手势操作

二十四种让人眼前一亮的新兴交互方式

案例一:模仿

物理环境,赋予界面弹性属性,界面切换更自然,效果也更丰厚

二十四种让人眼前一亮的新兴交互方式

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

 

十八、转场动态

二十四种让人眼前一亮的新兴交互方式

目前web端产品的转场基本

还处于没有情感化设计的阶段,无线产品在这块做的比较

有自创
性。上图的案例都有人性化、操作感强的特性
在其中。

 

十九、图片查看

二十四种让人眼前一亮的新兴交互方式

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

 

二十、多图合一展示

二十四种让人眼前一亮的新兴交互方式

经过
这种方式,在一张图上就能够

展示

多种相关商品,俭省
了大量的空间和资源,也将商品展示

方式中止

了创新。在电子商务网站上,这种设计的发挥空间很大。

 

二十一、Loading

二十四种让人眼前一亮的新兴交互方式

对原封不动
的loading的样式

稍作改进

,就能超出用户的预期,从而取得

用户的好感,而跟网站主题相关的设计,会提升用户对网站的忠实
度。

 

二十二、时间轴

二十四种让人眼前一亮的新兴交互方式

在社交网站以外的网站上,时间轴也能够

扮演十分

重要的角色:以优秀的设计来引导用户中止

更便当
的阅读,抵达

更好的信息传达目的。

 

二十三、推拉窗

二十四种让人眼前一亮的新兴交互方式

用推拉窗来中止

信息展示

,它能够

在同样的空间内展示

几倍的信息,而且有主次之分,让用户有所关注。

 

二十四、单页面网站

二十四种让人眼前一亮的新兴交互方式

这种设计是将网站的一切
内容都加载在一个页面上,经过
上下或左右滚动就能阅读
完好
个网站,这种技术极大地减少了网站的层级,避免

用户迷惑,提升了体验。

 

二十五、新组件畅想

1,IE6升级

提示

优势概述:为用户设计提供升级

或交流

更高版本的阅读
器的提示,并尽可能的降低用户关于
提示的抵触  心情
,加速IE6消亡

应用环境:运用
IE6阅读
器翻开
相关网页时

在设计中,我们遇到两个问题,一、怎样
让用户听到你要说什么。二、怎样
让用户按你所说的做。第一
,我们提供用户更兴味

性的展示

方式,用轻松一些的手绘作风
去取代生硬

的提示框,用户看到的,更像是一张手涂的卡片,这在一定水平

上降低了关于
同质化的弹窗提示或是弹出广告的抵触心情
,同时用口语化的提示(亲,你的IE6弱爆了!)去增加用户的猎奇
心,假定

用户这时在想“你才弱爆了呢,给个理由先”,那么,我们的第一个问题就处置

了。

关于
处置

第二个问题,我的了解

是,能否戳到用户的“痛处”;在用户听到你要说什么之后,理想的状况

是直接去点击下面的链接去升级

或交流

阅读
器(当然也有可能直接给你关了,关于
这种状况

,我只能说,弄死IE6,我们还有很多的努力要做),另一种状况

是用户问了一句“为啥?”,好吧,我们给你在右边留了一个链接,点了你就知道

为啥了。

最终
,思索
到我们平台产品的通用性,并不是一切
的产品都适合

这种手绘作风
的提示,还准备了一套相对通用一些的版本,以配合个别产品的背景。

 二十四种让人眼前一亮的新兴交互方式

2,错误提示

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

应用环境:网页呈现
错误时,如:404错误(针对这版设计的特性
,比较

适合

一淘UX网站等相似

的设计站点)

我们设计了一个很牛X的网站,但还没牛X到保证不会呈现
错误,但这并不影响我们的用户体验,即便

错了,我们也会尽量保证这是个有趣的错误,看看我们的错误提示吧。

错误提示页面需求
提供给

用户的必要信息,主要有两点,一:通知
用户怎样
了。二:通知
用户下一步该怎样
做。

所以,针对网页中呈现
的下面三种不同的错误,我们一淘UX平台网站(ux.etao.com)会开门见山
的用口语通知
用户 “怎样
了&改该怎样
做”:

好吧,往常

用户知道

该出什么事儿也知道

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

了。

二十四种让人眼前一亮的新兴交互方式

思索
到其它平台,我们也在做一些相对较为规范

的错误提示,希望能在UX各产品中运用
较为统一的规范

3,返回顶部

优势概述:使体验更有趣生活化,在视觉上与页面更融合

。因而

不再用机械化的文字或规矩的图标,而是尝试用隐喻的手法去表达

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

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

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

的场景。

2、依据

一淘首页、子频道页面、活动页面的特性
,常常
模块较多、商品等按模块排布,似乎

用积木搭建    的大楼。因而

用电梯的概念很契合。

3、视觉上观光电梯的形态是封锁
的胶囊形,不会像比较

开放的形态一样会过度分割负空间。形态上的简约
温和
契合
目前的图标规范

和视觉气质。

设计细节及理论

应用如图:

二十四种让人眼前一亮的新兴交互方式

扩展设计:

电梯内部的人能够

依据

不同的场景设计形象。如团购表现出很拥堵
;优惠频道表现出血拼;海外购表现出国际化;女性、男性、儿童也能够

做出相应辨别

。表现
出生活乐趣。

二十四种让人眼前一亮的新兴交互方式

 

结语

对交互细节的注重,是铸就互联网产品优秀体验的基础

,细节决议
成败,这句话在互联网产品上也一样适用,我们中止

设计的时分
能够

尝试跳呈现
有设计的约束
,思索

新的设计方式,给用户带来不一样的体验,同时也能给我们带来意想不到的收获。

以上这些案例都是出于对新兴交互方式的兴味
才搜集
的,并不见得代表未来

的展开

趋向
,贡献

出来希望能开阔下大家的设计思绪
,从更多的维度来思索

自己

的设计,搜集
会不时

持续下去,并会增加移动

端的案例的比例。

来源:一淘UX

 

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章