网页版的app?Windows UI Style 的网页新体验

 

作为cnBeta(西贝)长久以来的支持者,自学校里(曾经的大学时期)知道了这个网站就特别的迷恋,原因之一就是信息量大,几乎所有的IT新闻都不会被落下,有趣的评论也能让人眼前一亮,看各种资讯、经验分享的时候也有着一种想参与的气氛。

 

这么大的信息量,作为网站的阅读者与信息制造者来说都是一种挑战,如何呈现,怎样呈现,是一种学问。

 

有人说传统的西贝很有风格,其他的网站总是变来变去的,西贝始终都是这个样子,这或许是对于一个老地方的眷顾感,“有自己的Style”是一种婉转的说法!

 

随着现在IT产品的不断推陈出新,新型的掌上设备代替原有的台式PC,更多家电也拥有了全新的体感体验,普通的PC机也可以通过触控来实现多种操作,而这些变化都是为了满足人们对新技术的追求及对更人性化的用户体验的渴望。西贝作为后台数据库的一种呈现形式,技术人员也在不断更新着自己的知识储备,兼顾更多的现有设备,以创造出更佳的用户体验。可以说,西贝的Style也在慢慢地发生着改变。

 

在一次意外的搜索中我得到了一个和西贝相关的链接:

 

Figure 1当时的搜索关键字以及截图

 

打开第一个链接后让人有种焕然一新的感觉。真的,这种感觉真是记忆犹新——西贝还是原来的西贝,却有着全新的界面全新的体验。此时此刻,特别有种将全新的西贝扩散的冲动!

 

打开这个页面,首先映入眼帘的是这种信息突出、文图兼得的方式展示给大家,用格子将这些信息纵横分隔起来,简约而不失重点。

Figure 2有别于传统的Windows UI风格的西贝Style

 

Figure 3传统的西贝Style

 

新风格的西贝如果不注意左上角的站标,我真差点把它当作一个阅读器的应用。那么这样一种用户亲和的界面效果又是如何实现的呢?

 

通过查看西贝这个链接的源代码,在description中可以看到这段,"cnBeta与IE合作开发的全新HTML5 Web App体验,利用最新HTML5及CSS3开发,为你带来快速、流畅、如应用般的新闻阅读体验。同时也对IE10的触控手势进行了支持。"(与搜索引擎显示的内容一致)。

 

有意思的信息字段——既然是和IE一起开发的,好奇的我同时在两个不同的浏览器中打开了这个地址:

Figure 4不同浏览器的体验

 

通过上图粗略一看,似乎区别不大。但是继续使用起来就会发现,IE10下的文字更佳清晰,视觉体验更加柔和舒服,,右侧的Chrome虽然相差不大,但是细看起来字体上略微有些不适合阅读。对于我的阅读习惯我可能更喜欢左侧的效果。

同时,在相同网络环境下,IE10下面加载的速度会比Chrome稍快一些。当调整了窗口的大小以后,IE 10内容调整的动态效果也要更加流畅一些。

 

呈现效果来说因为IE10更好的支持CSS3以及HTML5。对于目前这两个开放式互联网标准来说——尤其是HTML5——还在不断地成长中,因此不是版本帝的IE10都达到了所有IE版本中的最优秀,但是体现最大兼容性,新Windows UI风格的cnBeta样式在两种浏览器下看起来很友好。

 

同时点击右上角的e我看到了“开发者背后的故事”,这种新的布局叫做“瀑布流布局”,可以更好的突出信息本身;冻结显示(可以理解成标题栏的元素)包含了:首页,我的阅读列表,优秀评论,十大人气文章,以及一个刷新按钮和一个可点击的i按钮,再后面是搜索框,以及重新塑造的ie图标等组件

Figure 5冻结显示的上方标题栏,常用的需求均可实现

 

记忆阅读列表的功能很实用,再也不用后台打开多个内容,也不用RSS订阅了,真的是非常方便,同时下方的大尺寸框格秉承了Windows UI的样式,突出信息本身,更加方便触控操作,每个独立的窗格右上方是评论数,右下角的白色+是添加到我的阅读列表的功能钮。

 

Figure 6红色虚线内就是秉承Windows UI设计理念的信息区

 

IE10和cnBeta的携手,一同进步了,一同开始了一种全新的信息呈现,还原信息本身的价值,让我在茫茫信息海洋中找回属于我的那份优质阅读体验。

 

看的到西贝+HLTM5的组合方式,使用IE 10作为最终呈现,这种在国内大幅使用HTML5作为信息呈现的网站尚不多见,而西贝在此领域开创先河,树立了全新的标志,为更多领域提供借鉴与参考的范例。

 

IE10作为微软最新的浏览器,不断的打破自己原来的旧模式与旧体系(从IE9开始),让人们看到一款耳目一新的浏览器。这种全新的体验,不单是外表的卓越,稳重与踏实也是新一代IE 10的内涵体现,对于新技术的积极支持,对于新观念的及时推出,对于安全的坚持不懈,对于用户隐私的卓越保护,对于未来的美好呈现更是IE 10不断坚持的研发理念。

 

IE作为生长在Windows 平台下的重磅产品给用户提供的不仅仅是一个可以上网的平台,而是更强有力的支持,让上网络回归到最纯粹的那个世界,更安心、顺畅、便捷的进行金融交易,这也是来自于良好的兼容性、紧密贴合Windows 平台的设计理念。网络上的你我他,现实世界中的好朋友通过IE这扇窗进行了有效的联系与沟通,在这样一个生态环境下我们拥有的我们所经历的都是对未来的一种铺垫,网站开发者的成本也随之降低,用户使用习惯上也会感觉一直(从IE9过渡到IE10,大家的普遍感觉是更快,更好,更有效)。

 

 最后的截图来自于 Windows 8 +Windows UI下的IE10,如果没有最下方的地址栏,我真的会认为这样的展示和某种特别编写的应用没有区别了

 

感受全新的IE,感受用心呈现的新网络。

感受全新的西贝,感受用心呈现的新资讯。

 

嗯,与之说是新本IE更好的支持HTML5等技术,不如说是新版IE已经完成了挑战未来互联网的准备。与之说新界面的西贝采用了HTML5等技术,不如说西贝已经做好了与科技同进步的决心。

 

cnBeta准备好了,IE10准备好了,你准备好了么?

 

一起加入IE10的行列吧。

 

 

获得最新版IE:http://www.beautyoftheweb.cn/download

 

posted @ 2012-12-21 17:33  周冠宇  阅读(1218)  评论(0编辑  收藏  举报