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之前很长一个时期内，手机的设计最重要的是硬件外观设计，奇形怪状，人们买手机的时候也非常注重外观的美丑，而发展到现在，每一台手机只有一个大屏幕，人们更加注重的却是屏幕里面的东西了，对手机的外形已经不再那么关系，当有一天，手机渐渐无形了，我想我们也不会那么奇怪。其实界面的设计也是这个道理，一切的形式都是为了更好呈现内容并让用户愉快的去接受而存在的。Win8将这一点作为其设计的指导思路。
2. 流动的导航，清晰的内容流向，继续或者回头
以内容为主导的交互界面，win8更希望通过内容的流动去带动或者吸引用户的使用，希望通过用户的潜意识去引导用户。所以它的导航是和内容在一起的，用户感知的下一步是去向什么样的内容，而不是怎样去走下一步。
3. 沉浸式的浏览与操作体验，隐藏式的工具与导航操作
Win8的设计提倡给予用户沉浸式的体验，在有限的屏幕中，将内容最大化的呈现给用户，同时将固定的导航和工具隐藏在上下边缘的工具栏和导航栏中。Windows不再是窗口，而是世界。
4. 横屏浏览带来的扁平架构
Win8的页面最大的特色就是流畅的横屏浏览，基于内容的导航架构，使win8的导航不在重要，而是直接把可能在其他平台需要二级页面的呈现的内容，直接呈现出来。另外，横屏空间的良好扩展性，也使得整个系统的架构更加扁平并且可用。
5. 横屏操作体验大部分情况下明显优于竖屏操作
Win8的设备比例，大部分设备使用情景以及横向滑动的系统操作等原因，造成了win8系统大部分情况下横屏操作的体验要由于竖屏操作。
风险
这不是微软的软文，所以win8还是有很多风险和问题的：
l 用户的潜意识最容易迷失
Win8提倡以内容去引导用户的浏览，希望通过用户的潜意识去引导用户。但其实，一旦内容的展现形式处理不够好，用户很容易在千篇一律的内容面前迷失自己。
l 高昂的学习成本
各种高级手势的运用，需要用户很高的学习成本，过高的操作门槛，在佩服其勇气的同时，也不得不为其担忧。
l 内容也会疲劳
Win8的生命力在于内容，好的内容能够在win8平台上得到很棒的呈现，但对形式的过分忽视，也会造成其对内容的要求更加苛刻，因为很难在win8平台上用不一样的表达方式来弥补某些内容本身的不足。外对高质量内容的持续要求，也可能会造成后期的疲软以及用户的审美疲劳。
l 触控与键鼠的混乱不堪
Win8十分激进的注重触摸体验，但又不得不考虑大部分用户的设备门槛和使用习惯，直接将Modern UI界面和Windows界面糅合在一起，造成不小的困扰。在设计每个触摸体验的同时，又要考虑键鼠用户的操作，也给设计本身带来了很多困难。
四、 Win8 的视觉特性-Metro进化
从WP7开始的Metro风格引发了铺天盖地的口水战。有人说这是微软最后的挣扎，也有人说这是不能回避的未来样式。看起来WP7和Win8好像是iPhone和iPad的区别，但其实Win8的平板更大程度上代表了所谓的Metro风格，哦，应该叫Modern UI或Windows 8 style。
贯穿始终的精髓
灵感来源：
• 现代设计 — 包豪斯（简洁、实用，减少元素，以突显本质）
• 国际主义平面设计风格 — 瑞士平面设计风格 （清晰强烈的栅格设计，强调版式设计，用文字的大小和层次来控制页面的节奏）
• 动态设计 — 电影艺术（世界级的动画，用以激发用户情感）
这样的设计思路清晰的铺开了“内容高于形式”的主题，简洁而又无边界、抛弃繁复的无质感元素，完美的诠释了Metro风格的设计精髓。
经典风格的进化
虽然在Win8的设计上微软依旧提供大量的“设计建议”，但微软渐渐放开了设计师的手脚，在经典的Metro风格上做了大量的改进，这一切也是为了更好传递与展示信息。
• 轻质感 — 方形、色块、直角看起来依旧是Win8的主要视觉风格，但在越来越多的应用中我们看到了渐变、投影、半透明以及轻量的拟物。
• 更多的分辨率尺寸 — 与WP7的单一尺寸不同，Win8的设备分辨率最小是10‘’（1024×768），推荐尺寸是11‘’（1366×768）及以上。微软提供了动态布局方式，可以缩小、放大或重新排列控件元素，从而适应各个设备的可用视觉空间。
• 优秀的栅格系统 — 在推荐的1366×768分辨率上，栅格的sub-unit为5px，1 unit为20px，所有的间隔与区域划分都以此为基础。针对不同的分辨率，栅格系统也分为3种基本尺寸：1倍、1.4倍、1.8倍。这也要求在提供位图资源的时候提供3种尺寸。
• 动态磁贴 — Win8的动态磁贴提供了两种尺寸、多种排版方式，设计师可以针对不同的推送内容，选择最有效的方式。你可以展示最新上传的照片、正在听的音乐、你的新提及、新邮件。用户既可以直接在瓦片中阅读提示信息，也可以对磁贴进行选择、删除等操作。它会不断吸引用户回到你的沉浸体验中，是一扇吸引和激励用户的门。
• 导向设计，从物理回归界面 — WP7的物理后退键是一条连续的路径， Win8的按键则全部移到了界面中。除了后退按钮，还有语义缩放、超级按钮、切换程序和关闭程序的手势这一些列精彩纷呈的路径选择方式。当然，在设计的时候，要利用视觉元素更有效的明确层级转换的关系，降低用户迷失的风险。
• 沉浸式体验 — WP7中还保留着状态栏和工具栏，在Win8中这一切都被隐藏起来。Win8风格希望用户能够沉浸内容本身，而不是让用户去考虑每个按钮的作用，让用户用自己的潜意识行为去操作。
五、 腾讯微博MS首版的设计思路
所有的应用都是在解决用户的问题，所有的设计都是在解决应用和用户的问题。这次腾讯微博MS首版设计的分享，我们决定以问题的形式呈现出来，解决了这些问题，我们也完成了该应用的设计。
？腾讯微博MS呈现的核心内容是什么
每一个win8的应用设计之初都会被问及这样一个问题：“This app is the best app in its category at____?”。我们的应用擅长什么？我们的用户能用它来做什么？我们该提供怎样的功能和内容？在这个核心想好之后，再去以此延伸去设计交互或视觉的呈现方式。
毫无疑问，我们所要做的就是将微博的信息完整、快速的呈现给用户，并提供给用户互动以及扩展微博关系链的核心体验。
明晰了用户需求和产品内容的关系之后，我们所面对问题也就变成了产品设计本身和平台的契合，以及用户易用性与产品细节的打磨。
? 纠结的主页设计：流动的导航与无尽的微博主页的关系
微博是个消息汇合的地方，最核心的部分是用户的Timeline,这里的消息数量是无尽的，用户在此获取内容的操作也是连续的。在win8平台，最传统的信息组织形式莫过于，将微博Timeline以呈现部分内容的方式作为主页的一部分进行呈现，如要获取更多，则需要进入下一级详情页（如下图），这样好处在于我们可以在首页上展现更多的内容以吸引用户。但是却发现，我们的核心内容却没有得到很好展示。
于是，我们放弃了最初的想法，尝试了第二种结构。为了呈现核心内容，我们果断放弃广场、频道等内容的干扰，直接去除。为了方便用户能够尽快的处理自己的个人信息，我们在最开始的view保留用户的个人中心，在其后则将所有的微博以相对规则的顺序进行排列，用一个个矩形承载每条微博的信息（如下图）。
这样的好处在于我们能将用户timeline的微博全部呈现，不必担心被打断。但是，由于矩形的相对规则排序，造成了我们不能保证每条微博都完整呈现，用户还是需要点进每一条微博去浏览他的内容，增加了用户的操作压力。另外，在横屏浏览的信息流中，上下排布的微博信息，也给用户的单向浏览造成了困扰。
于是，我们改进并实现了第三种方案。时间轴的设计让无尽的微博主页看上去更加活泼，却又如此理所当然。用户可以在首页就能完整的浏览每一条微博消息，单向的内容浏览使用户的行为更加的顺畅自然。甚至，我们可以很自信的去掉首页的LOGO，当我们返璞归真的思考内容本质的东西，你就会发现，你希望给用户呈现的将不再是某种形式，而是某种气质。
？怎样在茫茫Win8应用中寻找自己的独特气质
我们先来看看商店里的一些应用，在其他平台的风格中，Win8风格堪称先锋，但当铺天盖地的方块、直角迎面而来，用户就很难记住那些看起来差不多的应用了。那么，在视觉设计中我们又该怎样体现自己的独特气质呢？
1. 主页的进化
设计初期，我们保守的尝试了经典Win8风格。我们发现自己的目光被那些绚烂的大色块夺走了。同时，这样的布局，对微博的文字阅读也不是一种很好的
方式。在第二、第三稿的时候，我们去掉了渐变，调整了背景色，将微博以规整统一的无渐变方形呈现。内容虽然明显了，但微博阅读的完整性以及图片的优势却依旧没有充分体现出来…
在心理学中，人类对图片的短时记忆会比文字更快速，阅读的时候一张配图会让人更快速的定位到上次阅读的位置，而如果是简单的文字语句则很难做到这点。于是在最终的时间轴方案中，我们充分的考虑了Win8的大尺寸屏幕，为微博的文字和图片呈现方式制定了特殊的策略：按时间顺序排序的每块微博区块为固定宽度，图片均以固定宽度无边界显示。微博区块的高度则根据屏幕进行自动适应，保证文字全部显示，图片高度则根据屏幕高度和文字高度进行相应裁剪。同时也设定了最小高度，避免微博区块出现太过于强烈的高低落差。
个人中心的排版也抛弃一般的色块，大尺寸的头像，三围页的list排布，用高亮色的数字和强对比色的提示来高效的展示信息。
2. 蓝色，延续的DNA
在设计上我们延续了腾讯微博的经典色调蓝色，但针对整体思路我们将蓝色的明度降低，用清透的效果营造出一种舒适柔和的氛围，减少环境色对阅读的干扰。
3. 细节，简洁与简陋的一步之差
极简风格最怕的就是看起来像没有设计过，为了避免这种现象的出现，我们用简单的样式配合独特的排版方式，在视觉和交互上都增加更多考究的细节。
l Timeline的不同 — 用时间线贯穿始终；采用了圆形头像平衡画面；配合时间轴的旋转刷新动画；大尺寸展示的图片策略。
l 搜索页、个人资料页 — Tab页减少层级跳转；去除不必要的边框等Chrome元素。
？让架构层次处理更扁平，给用户更少的全屏跳跃
在win8中能让用户迷失的除了流动不做区分的内容，还有就是太多的全屏跳转。沉浸式体验不应该存在于应用的每个页面，在合理的信息区分之后，扁平化的架构处理才更加符合win8的用户。
？触控与PC的抉择
写操作是微博的核心体验之一，考虑了用户在Win8平台进行写操作时，更加有可能选择使用键盘输入微博内容，我们在进行提及多人以及插入话题功能时，同时考虑了触屏输入和键盘输入两种模式下的不同操作反馈，借鉴了PC端微博写操作的操作体验。
在win8的设计中，键鼠的操作设计并不作为主要设计因素，但是却必须要考虑。很多时候我们多考虑一点，用户就会方便很多。
六、 Win8 平台应用设计建议
l 不要过分遵守win8的设计指引，指引里的一切都是建议或者不建议，应用的设计应该做综合的考虑，平衡用户、平台和自己的内容，再去做抉择。
l Win8应用为内容而生，设计之前请先想清楚你的应用能给用户带来什么，然后合理的安排你的内容层次。
l Win8的导航是流动的，但也是易迷失的，所以我们更应该在内容的呈现形式上做不同的区分，以此来增加用户对其的辨识和聚焦，减少迷失。
l Win8的工具栏和固定导航栏都是隐藏的，但并不是说界面上就不应该出现这些，应用的核心操作以及用户最常用的操作，还是建议适当的在应用界面就予以呈现。
l Metro UI不是大方块，让那些言论见鬼去，在保持轻量和内容为主的前提下，适当的增加界面视觉层次和其他图形或者无图形的展现，是有利于用户对内容的辨识以及舒适阅读的。
l 在主要满足的触摸体验的同时，也适当考虑下鼠键用户的操作体验，这能给你带来口碑。
l 尽量减少操作的层级，win8的横向浏览已经带来了更加扁平的信息架构的机会，不要挥霍掉。
l 沉浸式体验没错也很好，但并不是说就要做各种的全屏页面跳转，合理安排信息的主次，使交互操作更加轻量和可预期，请为用户省点力。
l Win8的操作系统一般都可以提供比较可靠的硬件平台，所以请保持你的应用的动态与流畅。
l 谨慎考虑竖屏操作，可以为爱选择放手。
七、 小结
整体的感觉win8操作系统还是非常快速、流畅、直接的，这是一次尝试，微软试图把人们对PC的操作习惯向更触摸更移动的方向迁移，但还有比较长的路要走。但是win8的设计哲学还是很应该得到认可的，也希望在不久的将来，大家说到简单、直接、快速这几个词的时候，联想到的不仅仅是李小龙，还有这样一个敢于尝试的操作系统。
(本文出自 Tencent MXD Blog，转载时请注明出处)
© 推荐 for 互联网的那点事, 2013. |