四、 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以呈现部分内容的方式作为主页的一部分进行呈现,如要获取更多,则需要进入下一级详情页(如下图),这样好处在于我们可以在首页上展现更多的内容以吸引用户。但是却发现,我们的核心内容却没有得到很好展示。
于是,我们放弃了最初的想法,尝试了第二种结构。为了呈现核心内容,我们果断放弃广场、频道等内容的干扰,直接去除。为了方便用户能够尽快的处理自己的个人信息