从人人网客户端看Win8 Metro设计精髓

转自:http://software.intel.com/zh-cn/blogs/2012/05/17/win8-metro


之前也发了一系列关于Win8的博客,今天给大家分享的不是Win8本身,而是Win8 Metro的应用。Win8 的极简主义设计理念被很多人批评做出来的东西太粗糙,不好看,甚至记得一度非常火的一个帖子,详细对比Win8和iOS在各个界面的美观度。经过这篇博客给大家分享的内容,我想会改变很多人的看法。


坦白讲,作为一个学习了四年专业交互和界面设计本科课程的我,看到人人网Win8的Metro设计,也被深深地惊艳到了。惊艳到的不仅仅是一个一个界面,同样还有其优秀的交互设计。鉴于在博客中无法让大家感受到交互设计的部分。我就给大家列出主要界面的UI设计,配上描述的交互方式,供大家尝鲜。


1. 新鲜事


最左边是新鲜事,极简主义发挥到极致,背景渐变色块,优雅的微软Segoe字体,有图片的区域较大,直接显示图片,文字区域较小,配以不同颜色的色块,搭配非常简洁和干净。从未发现微软Segoe字体这么漂亮过。注意背景色块的渐变区域,如果是纯蓝色,会显得很呆板,加上一点点的渐变,和右边30%的分隔,将整个画面激活。


2. 我的照片


我的照片和最近来访在新鲜事右边,直接滑动即可看到这部分内容。每个图片会动态变化。请注意看我的照片区域的分栏设计,设计得非常精巧,中间加以宽度适中的分隔,是否想起了Van der Rohe 的名言"less is more" 。最右边的竖条照片刚好显示一张全身照,不知是巧合还是有图片识别算法进行优化排列的。

3. 最近来访


继续向右推动,就会出现这幅界面,这里面的联系人会像来回翻动,可惜无法动态展示。

4. 个人主页


依然只有色块区域,文字和图片,组成了个人主页区域。上端三个字的字体和颜色搭配得非常漂亮。依次点击可以跳到对应的界面。这边我想很多网友会拿和iOs相对比,iOs的设计理念,一般会放个Button在这里,各有各的好处,但是我想说人人网这里的设计真的很惊艳。

5. 我


点击我可以看到详细信息。在这个页面可以仔细看出背景设计的巧妙之处,仔细欣赏这个背景一会吧,真的很棒。我想这就是教科书上面说的"简约不简单"吧。

6. 浏览图片


浏览图片的界面,在前端的这个图片可以随意拖动,当拖到边框外的时候,就回到后端的页面。交互很好。这张图片来自马蜂窝的,应该不存在个人隐私的问题,大家尽可多多欣赏。哈哈。

7. 个人新鲜事



8. 快速回复


快速回复非常方便。

9. 我的日志



10. 我的好友页面


11. 快速分享@页面


12. 总结


已经无法用言语表达我对这个设计的喜爱了。如果你还在怀疑Windows8设计师Sam在 如何重塑信仰 中对于Win8的期待和描述,我想,这篇博客是最好的答案。



  • 作者:zollty(接收技术咨询和工作机会)
  • 出处:http://www.cnblogs.com/zollty/
  • 本文版权归作者和博客园共有,欢迎转载,但请在文章页面明显位置给出原文连接,否则视为侵权。
  • 关于博主,85后程序员,擅长复杂分布式系统架构,中间件设计开发,关注效率/性能/稳定性。
  • 对于自己,博文只是总结。在总结的过程发现问题,解决问题。
  • 对于他人,在此过程如果还能附带帮助他人,那就再好不过了。
  • 感谢您的阅读。如果文章对您有用,那么请轻轻点个赞,以资鼓励。
原文地址:https://www.cnblogs.com/zollty/p/3029539.html