微软bing的创意交互设计

2016-02-17 04:38 4 1 收藏

下面是个微软bing的创意交互设计教程,撑握了其技术要点,学起来就简单多了。赶紧跟着图老师小编一起来看看吧!

【 tulaoshi.com - 平面设计 】

导读:微软bing在推出时很多人就觉得这个搜索引擎界面与众不同,没有使用谷歌简单直接的界面,而是用许多精美的图片作为网站界面,当然作为微软bing来说,还有许多好玩创意的交互设计功能。

微软的bing 已经除了有一段时间了,之前玩了一下没有特别的感觉,但前两天,不小心发现bing 的视频搜索功能十分强大。于是好好的用了一下,发现bing 的交互设计做的很好玩,很是让人喜欢,不与其他网站的比较,单纯的说说个人的感觉。

1.首页

微软bing的创意交互设计,PS教程,图老师教程网

微软bing的创意交互设计,PS教程,图老师教程网

bing的首页很花,它花的很有意思,每天都是完全不同的一张照片,就像flickr,每次刷新首页的大图都会不同,而且鼠标移到某处,会有相关的提示文字,有别于其他主流搜索网站的清爽,这一突破让我觉得很新鲜。在我看来,就信息提供而言一个是主动的,一个是被动的。比如上百度,我搜索的是我想得到的信息。bing ,可以让我在漫无目的之下也能得到很多信息,也许有些信息是怎么也想不到会去搜索的。有时候有点错觉自己在玩discovery,甚至每天都想看看bing出了什么照片。

2.网页搜索

微软bing的创意交互设计,PS教程,图老师教程网

顶部是首页图的局部作为背景, 整个页面分成三栏,包括左边的相关搜索,中间的搜索结果,以及右边的广告。左边的相关类似于google 页面中底部相关搜索。整个页面显示的信息 量不大,跟google 差不多。

3.图片搜素

分成两栏,相关搜索,和结果显示。左边的相关搜索相当于google里面的百宝箱。只不过用google百宝箱搜索的结果更为精准。

下图是点击首页寻找更多后的页面。

微软bing的创意交互设计,PS教程,图老师教程网

下图是图片搜索页

微软bing的创意交互设计,PS教程,图老师教程网

在右上角bing可以调整搜索结果的显示方式,这是最小的图, 包括还有中型图,大型图和带有文字信息四种款式提供选择。

鼠标移上显示较大图和相关信息,有一个细微的交互,鼠标移上后大约有一秒左右的延时,才显示更多信息,这样不会造成无意移过也哗啦哗啦的显示,让人头晕。

Bing 最有别于他的是:图片搜索不设翻页!

就像google 的阅读器,不被打扰的操作才是最好的操作 如果按照正常搜索的情况下,滚动鼠标,是可以基本显示本页如片,如果用拖动条,拖很快,大约不过3秒,基本显示本页图片。没错,goole 也很快,每页显示大约只有0.x秒,不过每次看完,要找下一页来点,其实也是破坏流畅的一个操作。

Bing只用滚动就可以无限看,是很爽。

不过有一个问题就是,如果我在大概什么位置看了一张图,我觉得好,但我还想看看下面的,如果是翻页的话,我只要记住在第几页即可找回,拖动的话我是不是还要来回拖拉才能找到前图?既然bing 有提供这是第x -第x 张 为什么不能提供一个快捷到达第几张的操作呢?

在搜索图片的另外一个情况,就是看到好的我直接点开放着,然后再去看其他的。而bing 是在原窗口打开的,然后把带有该图片的网页嵌在bing里面打开,虽然可以直接看到大图了,虽然左边还能接着看刚才的搜索结果,也有链接可以回刚才的结果页,但这个做法不太符合用户习惯,而且破坏了用户的视觉记忆。个人感觉还是打开新窗口的好,不喜欢我就直接关掉了,还用得着去找那个小小的返回结果么?

下图是图片详情页面。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

微软bing的创意交互设计,PS教程,图老师教程网

4.地图

微软bing的创意交互设计,PS教程,图老师教程网

微软bing的创意交互设计,PS教程,图老师教程网

就是地图,有一个实时路况的功能,如果真的是实时的话应该很好用,但是现在只有上海和北京有开放这个功能。

刚才看了谷歌的地图,虽然不是实时的,但是继google earth之后,现在有一个新的街景视图感觉直接把你置身于 你所点的街道上,全部都是实景照片。可以前进后退,环视360度,以及看细节,非常牛!

下图,街景视图

微软bing的创意交互设计,PS教程,图老师教程网

(不好意思,跑题了)

5.最后说一下bing 我觉得最厉害的,就是视频搜索。

微软bing的创意交互设计,PS教程,图老师教程网

他厉害就厉害在,鼠标移上,2秒左右之后直接小窗口播放(可以关闭声音)~

视频搜索 一直是很纠结的东西,因为,只能看到一张截图,所以只有点了才知道是不是我想要的,但确认的过程是非常漫长的,从打开网页到等视频读取进度到放玩广告,好几分钟过去了~ 个人觉得这个指哪儿就放那儿的交互非常棒。口说无用,去试一把就知道了。

6.决策引擎

虽然还没有上中文版,不过依然已经应用了,就稍微提一下,

主要是四大:Bing Travel(旅游), Bing Shopping(购物), Bing Local(本地) 以及 Bing Health(健康)四大垂直决策引擎最大的特色就是,抓取了大量来自第三方网站的信息(包括:用户评价、票价等),并利用语义实现能够帮助用户更好、更快地做出决定。

说到决策引擎,不得不再跑题说一下hunch

它是一个可以帮助你做决定的网站。首先进入网站他会问你一些无关痛痒的问题,注册之后 你可以通过 网站的一系列问题,得出大部分人碰到这种问题会做什么决定,来判断类似该不该买一个智能手机你该租车还是买一辆汽车?要不要给他打一个电话这样的问题。可惜的是,现在只有英文版的玩。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

微软bing的创意交互设计,PS教程,图老师教程网

微软bing的创意交互设计,PS教程,图老师教程网

东拉西扯的说了这么多,想说的就是 bing 对于现在常用的搜索交互上有很多的不同,可能有人鼓掌有人不屑,不过说到底,bing带来的确是一些创新,一些改变,值得尝试,值得关注。

进入论坛参与讨论

来源:https://www.tulaoshi.com/n/20160217/1578566.html

延伸阅读
包豪斯运动(1918-1933)起源于德国,是纯粹而诚实的设计理念的复兴,其影响波及到建筑、艺术、字体、产品设计诸多领域。其特色是强调功能,去除装饰。包豪斯的美感和信念来自于工业和设计制造,是受现代工业文明影响的设计思潮。在谈到包豪斯的理念时,哥伦比亚大学的 Watter Gropius 认为,包豪斯的目的在展现群体合作的同时不丧失个性。 它的...
交互设计的本质是对用户行为的一种设计,直达内心的设计能够影响用户自身的情感,从而引导用户的行为、提升趣味性和愉悦度等,这些都是针对用户情感化设计的领域。针对用户情感进行设计时,需要考虑产品的用户群,有趣的交互设计将会为产品塑造个性,需要明确产品个性是否与目标用户相符。富有灵感和创意的设计与一般设计的区别在于,它不那么...
交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到心中有数才能创造出符合需求,用户易学易用的界面来。所谓没有必要重复发明轮子,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。 常见的UI设计模式如下图: 下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。 01.主体/细节(Ma...
2012年初,我负责了对公司深度匹配产品进行了一次全面的用户体验规划,对产品整体的设计开展提供了用户视角的依据。过程收到了PD同学和业务团队的一些不错的反馈。在这里和大家分享一下这个设计推导过程。 新设计师在进行交互设计时,很容易直接进入具体的界面层的设计思考,而整个过程中的前期推导过程却很容易被忽略,在这个案例中会着重前...
做交互设计也有好几个年头了,最近一直在思考一个问题,我们这些俗称线框仔的交互设计师,如何保持自己的竞争力,我们的未来会是怎样的? 在互联网公司里担任交互设计师,往往只是一个项目里的螺丝钉,工作内容不外乎分析需求、分析用户、画线框图、做原型demo,在web时代如此,在移动互联时代亦是如此,我们往往只是着眼于屏幕上的信息与用户...

经验教程

970

收藏

55
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部