设计一个出彩的Win8应用
应当如何设计出一个好的 Windows 8 的应用呢?
Windows 8 应用现状
虽然 Windows8 刚上市只有半个月多一点,但 Win8 之父,同时也是 Windows 和 Windows Live 部门的总裁、微软下一代 CEO 热门人选的史蒂芬?辛诺夫斯基却已经离开了微软(以后将很难看到作为光头党的他和鲍尔默、贝佐夫同时刷极客早知道的屏了:( ), Windows 8 的设计语言名称也从最初的 Metro 先是变为 Modern 接着变为 Windows 8 Style,最后变为目前微软中国官方所称的 Mrot Design(本文依旧延用旧名称 Metro 表示 Microsoft Design Language/Style),但 Windows 8 依旧在按照之前微软的规划一步步往前走着,Windows 应用商店的数量从最初的几百个应用迅速增长到了目前的接近 1.5 万,虽然到今天增长已经趋缓但依然强劲,预计十一月底能达到 2 万个。
虽然数量一直在持续增长着,但优秀出众的应用到现在依旧是屈指可数,随便问一个 Windows 8 用户几乎回答不出有哪几个做得特别好。当然这也与 Windows 8 本身设计语言的特色有关,看起来的简约实际是需要设计师去用心精雕细琢的,不然做出来永远是简陋,还是之前 Windows 8 传统桌面的 Metro 化中所认为的那样“Metro 风格不是让程序员都跑来顶替设计师的”,相反它更加考验设计师。
虽然是被称为“Windows 8 应用”,但它与 iOS 应用、Andriod 应用以及相近的 Windows Phone 应用还是有着很大的不同,在界面设计上它更加偏向于网页、平媒等所在的平面设计领域,在交互设计上也是更加偏向比较大的屏幕操作交互。在设计过程中需要认清这一点。
如何设计一个好的 Windows 8 应用?
我们都知道一个应用只有适配该应用所在平台本身的风格才能被称为好的应用,因为只有这样用户在使用的时候才能保持好的用户体验。那么面对一个全新的开始界面,全新的用户体验界面与全新的应用布局,应该如何才能设计出一个好的 Windows 8 应用呢?
1. 好的动态开始画面
开始画面是用户认识一个应用的开始,如果有一个好的开始画面可以给用户留下一个很好的印象,同时也是一个好的 Windows 8 应用必须有的。
开始画面细分可以分为启动画面和登陆、加载画面。对于启动画面,微软官方的规定比较死,所以你看到几乎都是清一色的单色前景 LOGO,这样的话除非你的 LOGO 很吸引人否则只能说是中规中矩,毕竟你不能靠一个旋转菊花让用户对你印象深刻吧。所以最好可以将限定的启动画面时间缩短,多在后面的登陆界面与加载界面下功夫,在这方面 腾讯QQ, Cookbook, 网易云阅读等做的比较好。
如何设计一个好的 Windows 8 应用?
我们都知道一个应用只有适配该应用所在平台本身的风格才能被称为好的应用,因为只有这样用户在使用的时候才能保持好的用户体验。那么面对一个全新的开始界面,全新的用户体验界面与全新的应用布局,应该如何才能设计出一个好的 Windows 8 应用呢?
其中 QQ for Windows 8 的登陆界面与其最新的 2013 桌面版类似,背景是干净的天空,有一朵云动态的飘来飘去。而 Cookbook 和网易云阅读是动态加载跳转,三者其实都是是以动态效果见长,而动画效果在 Windows 8 中最为常见,它是营造 Metro 动感的主要手段。因此如果要设计一个好的 Windows 8 应用,打造一个让人感觉流畅、大气舒缓的动态启动画面是可以加分的。
2. 好的背景/图片/图像
在一个应用中背景图片可能就是伴随用户使用该应用的整个过程(贴靠除外),它的重要性要超过开始画面。在平面设计中,和谐、有效的图底关系可以让整个构图活跃起来,从而增强视觉冲击力和感染力。在设计 Windows 8 应用中亦是如此,选择一个合适的整体背景图像不仅可以吸引用户的注意,促使他们留下来去探究其他部分,还可以为页面布局服务。而选择一个不搭调的背景图像的话,不仅使界面变得刺眼,对用户获取信息造成干扰,还有可能使用户烦躁。如下面这个美国白宫应用。
只有一个星的评分是有原因的
再来看一个比较好的背景 Love Windows
另外在背景图像的选择上可以去参考一下平面设计,如用渐变背景增加应用清爽感;用插画、涂鸦等增加现代感和活泼度;用圆形多的图像来增强波普风,使其风格更加切近 Windows 8 的整体风格。对于大多数背景为灰色的应用来说,背景中加入一些不规则的图案可以一定程度上消除略显土气的负面效果。
3. 好的设计界面
界面包括主界面(中心页)、内容界面(部分页)与详细信息页等各级页面。那么什么是好的设计界面呢?
1. 严谨的排版布局
在平面设计中,有一个隐形的构图指导,它就是网格系统。网格可以帮助用户从视觉上来组块信息集,而设计师则使用网格来组织信息的内容,以保证其清晰度。在一定程度上可以说网格布局影响着一个作品的最终外观、心理感受和可用性。
而在 Windows 8 中,Metro 应用的一大特点就是内容形式化,因此对于占据着 Windows 应用商店绝对主流地位的是各种信息内容类的应用来说,如果一个应用有着严谨的网格布局,那么就可以说这个应用不会太差,即使它是由一个个方块堆砌起来的。因为在 Windows 8 应用设计中网格依旧会是结构的基础,它引导着元素的布局,将文本、图形和图表组织成设计的骨架。它可以保证一个应用内的信息有着基本的清晰度,不会凌乱 。
2. 优秀的排版布局
就像上一条所说的,由于从 Windows Phone 到 Windows 8 微软的“示范作用”,造成了很多中规中矩的“方块应用”,甚至快成了一种模版。到现在相信很多人对 Metro 主界面的印象还是一个个方块或矩形框堆砌吧。
3. 优秀的版面设计
与整体的排版布局不同,版面设计是对图像金额文字等设计原色在空间中的安排,可以看作是内容在局部排版上的细化。好的版面设计应该是可以利用颜色、间隔、定位及其他设计手段营造出视觉焦点吸引读者的注意力,并保持下去。在整体上应当是视觉焦点尽量的少,能够让用户关注应该关注的地方,并保持新鲜感。
虽然是取巧于官方 Mail 但 Nextgen Reader 仍不失去一款版面设计优秀的应用
如采用方块堆砌的话,可以说整个屏幕没有视觉焦点,也可以说满屏幕上每个方块都是视觉焦点,再叫上方块本身充斥感更强,留白少以及中文字体默认的微软雅黑等各种原因造成整个界面让人感觉有压迫感并无从下手,信息间没有层次感和关联感。所以在版面设计上应当注意在合理留白、合适选择字体和合理配色这三个地方来改进。