WIN8设计特性浅谈和腾讯微博MS首版设计思路分享

　　作者：dengxuecui(崔登学) miaotong(佟淼)

　　10月，一个收获的季节，微软的新一代操作系统window8悄然而至，同时，我们的微博客户端团队，也搭上了第一波win8应用的末班车，设计并推出了腾讯微博MS版本。本文将结合腾讯微博MS版本的设计过程以及对win8系统特性的认识，聊聊win8操作的平台的应用设计。

　　文章很长，请选择有价值的部分阅读，或许你敢把它读完呢…

　　本文索引：

　　1. Windows8—再构想

　　2. Win8的系统特性

　　3. Win8的交互特性

　　4. Win8的视觉特性-Metro进化

　　5. 腾讯微博MS首版的设计思路

　　6. Win8平台应用设计建议

　　一、 Windows8—再构想

　　关键词：后PC时代

　　《Windows8 guide》开篇第一段即言明：“如今超过三分之二的PC是移动设备，比如笔记本、上网本、平板电脑。几乎每一台PC都有无线连接的能力”。所以，win8的设计更多的考虑了移动设备和触控体验，更加的关注的是用户和应用关系，而不是操作系统本身。虽然保留了大部分windows7的基础特性，但win8系统旨在创造更优的触控体验，建立新的良好的生态系统。

　　如果说苹果完成了后pc时代的基础性创新，那win8的出现则意味着传统PC的全面迁徙。以ipad、iphone为代表的无线触摸产品的强烈冲击，让微软意识到PC战场其实也已经彻底转移了，而win8操作系统就是在这种情形下微软的一次再构想。

　　二、 Win8的系统特性

　　Win8系统有很多不同一般的操作体验，这里笔者摘取了一些更能体现其设计理念的特性进行介绍，更多详尽的特点就不在此赘言了。

　　Win as One

　　在win8系统中，程序是以应用的形式存在的，它有应用市场，用户可以进行应用服务的购买，让人不禁联想到，这更像IOS、安卓等无线领域的，但不同在于，win8试图通过系统的平台，将安装在该平台上的所有应用进行有机的联系，强调应用间的协同和共享，给用户带来完整、生态化的体验，也让每一个在此生态系统内的应用“Win as One”。

　　1. Charms(超级按钮)：高于任何应用的系统整合工具栏

　　在任何时候，用户都可通过在屏幕右侧边缘向左滑动或将鼠标悬停至屏幕右侧，呼出Charms。Charms是个枢纽般的系统工具栏，通过这里，用户可以快速的进行搜索、分享、设置等操作。

　　2. 搜索：系统层级的整合搜索，带来更全面快捷的搜索与信息检索体验

　　搜索可查询的范围不再仅限于程序和文件，几乎遍及操作系统和互联网整个环境中。用户不仅可以在一个应用中查询关键字，而且还可以快速切换到其他应用，或者在几个应用直接来回切换搜索结果。简化了用户操作，无需重新输入关键词，就可以直接在新的应用程序下获得不同方面的搜索结果。

　　3. 共享：系统层级的整合分享，使应用之间更开放，信息和内容传递没有界限

　　用户可以在任何时候，把任何内容直接通过分享，分享至支持该内容分享的应用中，使信息得到开放无障碍的流动和扩散。

　　4. 贴靠视图：一屏两用，应用共处之道

　　5. 动态提醒：无处不在，让信息处理更加及时准确

　　Win8的动态提醒机制主要通过两种方式来实现：动态磁贴和系统toast。在start界面你可以设置动态的磁贴以实时显示每个应用里的最新更新，在任何时候你的应用都可以通过实时toast来对用户进行重要信息的提醒或者应用操作的提醒，toast是可以被用户主动滑走消失的，toast中可以直接显示新消息的内容。

　　前卫的触控体验

　　就在最近，当被问及企业用户喜欢Windows 8操作系统的什么特性时，身为微软掌舵人的史蒂夫·鲍尔默给出了非常简洁的回答：触摸、触摸、触摸!

　　Win8非常注重触控体验，排除基本的触控操作不说，其很多关键系统操作都是依靠比较高级手势操作进行的，虽然需要一定的学习成本，但因为是用户不得学习的操作，而且习惯之后确实也会给整体体验带来更加流畅、快捷的感受，这一点笔者本人还是比较欣赏的。另外通过这样的高级手势设定，win8使得用户的操作仅通过触摸屏幕就可以完全掌控，ipad也有类似的手势操作，但那仅仅是作为辅助操作存在，相对而言，win8贯彻的更加彻底，同时也更加流畅和便捷。

　　1. 语义缩放

　　Win8的横向流动界面可以无限延长，加之其内容为主的设计思维，在很多页面用户都不得不面对long long的滑动导航压力，比如win8的start(开始)界面，在这样的界面，系统增加了一步高级手势操作，用户可通过双指捏合，将当前界面缩小为纯导航视图，并进行快速导航跳转。此视图跟正常视图其实是两个界面，应用设计者可以根据自己的情况自行设计该视图的样式和操作。

　　2. 应用切换

　　Win8支持真正的多进程管理，而且是沉浸式操作体验，所以怎样切换应用，又是一个难题。Win8的解决方案是，用户可以通过左侧的边缘向右滑动，可以直接切换为上一个应用程序，整个过度非常流畅、快速。

　　3. 选择操作

　　Win8的选择操作使用了向下拉选的高级手势，选择操作可以在默认界面直接进行，不需要多一个编辑态，也不需要再设置一个多选框，更加直接，但也需要学习成本。

　　4. 关闭程序

　　Win8没有返回的物理按键，提倡沉浸式体验的设计理念，也造成了每个应用都没有关闭或者退出按钮，那么用户怎样关闭一个应用呢?只需要手指从屏幕顶端下划至屏幕下半区，伴随流畅的动画，应用关闭。

　　5. 多进程管理

　　用户可以在屏幕左侧向右滑动一小段距离再向回滑动，呼出当前进程管理。

　　6. 呼出工具栏

　　Win8应用中把大部分操作工具，都放在隐藏的工具栏中，固定的导航也经常放在隐藏的导航栏中，用户可以通过屏幕上边缘下滑或者下边缘上滑，呼出工具栏和导航栏。

　　对传统鼠键操作的平衡考量

　　Win8系统不仅仅有主推触摸体验的metro界面，也保留了Windows之前窗口操作的桌面系统，一方面照顾到windows用户的使用习惯，另一方面也因为在未来不短的一段时间内，win8的很大一部分用户依然会以鼠键操作为主要使用方式。另外，在metro界面的所有触摸操作，均有相对应的鼠键操作实现方式。

　　三、 Win8的交互特性

　　Win8 metro界面沿用了WP7的视觉风格，并且在交互上也继承了其简单、快速、内容为主等等的特质，像动态磁贴之于动态磁贴，横向列表之于全景视图，全局分享和搜索之于HUBS…Win8很多交互形式都是基于WP7的进化和发展。他们在精神上是互通的，在这里偶也易做图的链一下自己去年的一篇文章–《WP7交互特性浅析及APP设计探究》，有兴趣的可以参考阅读哦。

　　其实win8的大部分特色的具体交互形式在上面的系统特性中都已经做了很多介绍，这里主要进行一些交互设计思维上的总结，并结合实例进行说明。

　　1.“Content not Chrome”– 内容优于形式，注重信息而非界面

　　这是win8设计的核心思维，Chrome在设计时候，提出的理念就是让用户更加关注网页内容，而忽视浏览器本身，win8将其拿来主义一番，并进行了发扬，内容为先，其次是界面。我们会看到下面提到的一些交互设计方向，都是以这一核心思想做指导的。

　　举个手机的例子来形容这一点再贴切不过了。在iPhone之前很长一个时

补充：web前端 , HTML/CSS  ,