打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
新兴交互方式探析 - 3

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


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

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

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

      新组件创想是由一淘UX内部的小团体“发改委”(该团体每周定期组织会议,进行分享、讨论及创作)进行的一些微创新,这里展示两个“发改委”针对组控件的优化或新设计设计师分别为赵九、小路。

IE6升级提示

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

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

      在设计中,我们遇到两个问题,一、如何让用户听到你要说什么。二、如何让用户按你所说的做。首先,我们提供用户更趣味性的展现方式,用轻松一些的手绘风格去取代生硬的提示框,用户看到的,更像是一张手涂的卡片,这在一定程度上降低了对于同质化的弹窗提示或是弹出广告的抵触情绪,同时用口语化的提示(亲,你的IE6弱爆了!)去增加用户的好奇心,如果用户这时在想“你才弱爆了呢,给个理由先”,那么,我们的第一个问题就解决了。

      对于解决第二个问题,我的理解是,能否戳到用户的“痛处”;在用户听到你要说什么之后,理想的情况是直接去点击下面的链接去升级或替换浏览器(当然也有可能直接给你关了,对于这种情况,我只能说,弄死IE6,我们还有很多的努力要做),另一种情况是用户问了一句“为啥?”,好吧,我们给你在右边留了一个链接,点了你就知道为啥了。

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


错误提示

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

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

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

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

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

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

借此机会,也可以给用户推广介绍下我们UX平台四种角色的设计师了:

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

返回顶部

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

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

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

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

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

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

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

扩展设计:

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

结语

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

      以上这些案例都是出于对新兴交互方式的兴趣才收集的,并不见得代表未来的发展趋势,贡献出来希望能开阔下大家的设计思路,从更多的维度来思考自己的设计,收集会一直持续下去,并会增加移动端的案例的比例,这里只是简单截图举例,观看视频更能体会到设计的精髓,视频资料存放在\\Etaoux\etaoUEd\x_邢风\新兴交互方式收集,欢迎各位指教。


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
20130301早读课:二十四种让人眼前一亮的新兴交互方式
以“用户体验”为中心的设计长什么样?
线框流程一款用于工作流程或APP的UX交付
优漫动游:聊聊UI设计中的交互原则
YES SHARE |2022年最值得关注的9个用户体验趋势!
16个有效的UX写作规则
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服