设计原汁原味WindowsPhone应用.pdfVIP

设计原汁原味的W indows Phone应用 W indows Pho ne面试也有很长一段时间了 ，其简洁的视觉风格 ，完全区别 iO S及A ndro id的交互 方式受到很多设计师的青睐。 目前Market place中的应用数量相较A pp St o re和Google Market 还是比较少的 ，具有平台特色的创 新交互方式也没有非常成形 ，我们了解这个平台最简单的方式就是先按照最接近原生体验的方式去 设计应用 ，在充分并深入理解这个平台之后再去创造更多新颖的交互方式。 下面就从这个系统所提供的最原生的交互方式出发简单分析一下如何设计一个最为原汁原味 的W indows Pho ne应用。 瓦片 （Tile ）的合理运用 W indows Pho ne中最大的一个特点就是主页面是由一个一个方形或长方形的“瓦片”建起来的。瓦片 可不仅仅是一个ico n ，它还能承载应用想要展示给用户的一些信息 ，所以合理运用瓦片可以展示的 信息将会给我们设计的应用增色不少 ，在用户诸多的选择中脱颖而出。 最基本的 ，可以像系统自带的短信功能那样 ，提供一个未读短消息条数的数字提示。 稍复杂点 ，可以在瓦片中显示一些静态或动态的图片、文字信息。不过要注意一点 ，W indows Pho ne的设计原则就是简洁为主 ，大色块配合尽量少的颜色展示内容比较符合这个系统整体的风格 ，如果把瓦片设计的太过 花哨和复杂就有点背离系统设计初衷了 ，放置在主界面上可能也不会有 特别好的视觉效果。 不仅如此 ，瓦片并不是一个固定的模块 ，系统提供了很多翻转、推动之类的切换效果 ，这意味这我 们可以将其视为正反两面进行看待 ，正面延续之前所说的设计方式 ，主要展示应用名称、logo及一 些必要信息 ，反面就可以灵活放置我们想展示给用户看的内容 ，这就给设计师提供了很广阔的空间 ，想放什么 ？尽情开动脑筋吧。不过也有一点需要注意 ，目前来说 ，瓦片切换的动作及时间间隔是 开发者不可控的 ，所以瓦片背面放置的东西还是应该尽量以简洁为主。 W indows Pho ne 7.5 （芒果 ）系统中提供了一个新的功能 ，就是可以把应用中的操作或内容模块发 送到桌面上形成瓦片 ，方便用户快速进入需要的内容或操作 ，如微博客户端的发微博操作或者某一 分组的微博内容。这就需要设计师在设计前就想好哪些操作用户可能需要快速触发 ，而后告诉研发 同事在相应的地方设置好发送到桌面的操作。 细心的用户还会发现 ，系统自带的联系人功能在瓦片中是以一种很炫的九宫格的方式进行展示的 ， 整个瓦片被拆车3 3的小块 ，以每一个小块为单位进行切换 ，还会将相邻四个小块拼成一张大图。可 惜微软官方没有将这个设计权限开放给开发者 ，可能是考虑到主界面运行效率和整体效果的的因 素吧。这是个小小的遗憾 ，期待之后能用到这个效果设计出比较酷的瓦片展示方式。下图所示即为 九宫格效果 ： 在瓦片效果的使用上 ，USA Today就做得非常出色 ：模拟了九宫格试布局 ，正面使用ico n及新闻图 片的拼接图 ，在反面展示了天气信息 ，效果很好。 全景视图 （Panorama ）的正确使用 全景视图模型展示 USA Today中对 全景视图的使用 全景视图设计上类似 W indows系统中的多窗口事件 ，每个窗口中打开的可以是不同的软件。所以 全景视图中可以放置文字、图片、瓦片等等所有可以承载的内容 ，每个页面中的内容、布局、甚至 操作都可以有所不同 ，每个页面右侧露出的边沿恰恰构成了切换标签的最佳隐喻 （见下图 ）。这样 的特性正好对应 iO S或者A ndro id系统应用最为常见的一级导航 ，所以我们在设计W indows Pho ne应用时完全可以大胆的将这两个平台应用的一级架构直接移植过来。 W indows Pho ne的设计不太推荐一个页面中出现二级标签 （也是可以支持的 ，但是那样就不够原生 ，不在本文讨论范围 ），这就需要设计时将内容尽量扁平化 ，在尽量少的层级内完成相关的操作 ， 这一般是我们设计应用时比较花心思的地方。 全景视图中每个界面中放置的内容也可以有两种展示方式 ，纵向展示多用 内容较多或信息流类 内容 ，纵向理论上可以“无限长” ；横向展示多用 内容量及布局固定 ，希望一次性展示完毕的内容 ，其纵向不可操作 ，横向可做多屏拼接。 如下图 ，X box LIV E栏目使用的即为横向展示方式 （覆盖区域为栏目范围 ，框选区域为一屏显示 范围 ），其他栏目使用的是纵向展示方式。