WP7系统交互设计与视觉设计.docxVIP

一、WP7视觉设计风格WP7的UI是基于一个叫Metro的内部项目。灵感来源于机场和地铁的指示系统。Metro UI是来源于美国华盛顿州金县都会交通局（King County Metro）的标识设计，这种风格大量采用硕大突兀的字体，能吸引读者的注意力。微软认为Metro设计主题应该是：“光滑、快、现代”。求本溯源，20世纪50年代期间，一种崭新的平面设计风格终于在联邦德国与瑞士形成，被称为“瑞士平面设计风格”，由于这种风格简单明确，传达功能准确，因此很流行与全世界，成为二战后影响最大，国际最流行的设计风格，因此被称为“国际主义平面设计风格”。图片加图形或文字的形式也是WP7的主要视觉风格之一Metro UI是一种界面展示技术，和苹果的iOS、谷歌的Android界面最大的区别在于：后两种都是以应用为主要呈现对象，而Metro界面强调的是信息本身。三种常用元素：明显的色块 /象形的图形 /简短的文字 五点原则：干净，轻量，开放，快速 要内容，而不是质感 整合软硬件 世界级的动画 生动，有灵魂 二、Wp7的交互特性(1) lock wall开场WP7整体的视觉风格非常简单轻量化。锁屏界面由一张可更换的墙纸和若干提示信息构成，仅有时间信息和状态栏是必然存在的。第一次点击，墙纸会做上下运动，带来了很好的使用引导。用户根本不需要关心手指点触的位置，只需要轻轻向上滑动超过1/3就可以完成开锁任务，墙纸会像大幕一样拉开。相比iPhone来说，整体视觉感官上也更加舒适。(2) WP7的结构框架Start view （主屏）用户自定义快捷入口，可以是APP，可以是某个文件，可以是某个集合，可以是某个订阅,你可以“pin whatever you want”App list （应用列表）所有app的集合，mango增加了快捷检索和搜索Panorama（全景视图）适用于多功能整合的综合性app,原生系统用它来实现了自带的5个hub:ZUNE,PICTURE,LIVEBOX,PEOPLE,OFFICE,MARKET PLACEPivot（枢轴）适用于内容丰富，但是功能结构不是很深的app或做app的子层级:原生系统用它来实现了短信\日程表\邮箱\设置list适用于内容和功能简单的app或做app的子层级:原生系统用它来实现了通讯录Tools适用于功能比较纯粹app或做app的子层级:原生系统用它来实现了闹钟\计算器\相机\浏览器(3) WP7的设计特性Start sreen（主屏）Start sreen 是用户进入后直接面对的第一屏，也是在任何情况下，点击物理HOME键即可回归的主屏。它的主要组成元素只有一种，就是Live tiles（瓦片）。其本质类似于PC 操作系统的快捷方式，但是承载的信息更多，更加动态，也更加自由和个性化。Metro风格的指向箭头会把用户清楚的引导向APP list。另外就是被弱化功能的状态栏。live tiles（瓦片）Tiles（瓦片）其实是一种快捷方式和推送机制的结合体。它是实时的，动态的，内容丰富的。它可以是一个原生的APP快捷方式+实时的更新信息提示?它可以是一个第三方应用的快捷入口?它可以是某个联系人的快捷入口?他可以是一首歌的快捷入口?一个列表或者榜单的快捷入口?一个游戏的某一关，一个特别关注的微博，一个相册?似乎任何手机上的信息，只要用户有需要，只要我们的app上给用户授权，都可以在Start screen有一个入口。这样深层次的定制化逻辑，给用户带来了更加个人化的使用体验。Live tiles的表现形式是多样化的：他们都是tiles，其实他们的结构都是相同的。一个Tiles（瓦片）是由正反两个面构成的，开发者可自行选择是否全部采用。正面：一张底图（可以是图片或图标或图片加图标）、标题、更新通知反面：一张底图（可以是图片或没有）、标题、内容Tiles正反两面的元素，开发者自行进行选择元素的存留。加之背景的差异，瓦片在视觉上的差异化，使得整个Start screen显得不会呆板平淡。动画形式：翻转：平推：Tiles的功能除了提供入口之外，还担当着更新本地动态，显示推送服务的角色。Tiles上的背景，和反面的内容都是可以实时更新的，正面和反面可以通过两种动画进行切换，在加之更新提示，使得tiles出色的承载了更多的信息，同时给系统带来了灵魂和生机。这也是WP7系统一种特色的通知形式，Tile Notification。Tiles（瓦片）让用户拥有了更多的个人化个性化的定制空间，同时也给用户提供了更深层次的快捷入口。动态的推送提醒机制，各种随时而动的小动画，可以让用户第一时间知道最新的变化，也为整个系统带来的生机和灵魂，同时为更多信息的承载，提供了条件。WP7希望用这样方式达到快速、个人化的目的，而我们在做相关AP