Windows8应用开发-7 Win8应用设计指南

Windows8应用设计指南通过这一节课，可以使听众对Windows8Style应用的用户体验有一个更深的了解，并且从设计师的角度讲述了整个应用的设计流程，从而避免大家在应用设计过程中出现一些不符合Windows8Style的特征。什么是Windows8Style应用为什么要设计为Windows8Style每个系统都有其独有的风格及特性保持系统的风格统一使整个系统保持一个整体保持良好且一致的用户体验Windows8Style应用的5个特点Windows8Style应用的5个特点Windows8Style的基本设计正确使用Contracts出色的贴靠与缩放仿佛永远在线——活动磁贴和通知快速且流畅Windows8Style的基本设计内容重于形式内容最为重要。用户会沉浸在他们喜爱的内容中屏幕上只留下最相关的元素，以便最大程度地减少干扰传统上，添加形式是为了：1.布局2.交互3.导航布局给内容呼吸的空间特意留出组织内容的空间，让你可以重点关注正确的内容删除多余的线条和框架，仅将内容本身作为一种组织以及分组排版的方式使用Windows8Style排版方式在内容中建立一系列的结构和层次固定的大小、粗细和颜色，向用户传达每块内容的重要信息使用默认样式表获得预定义的Windows8Style样式布局42pt20pt11pt9pt布局让内容从一个边缘流到另一个边缘只在一个轴上移动，创造一种稳定感来支撑模型牢记人体工程学：全屏和竖直视图的Hub页面沿水平方向滚动普通页面可以沿竖直或者水平方向滚动，但是只能沿一个方向贴靠视图沿竖直方向滚动布局利用Windows8Style的剪影创建视觉对齐效果、结构和清晰度用网格对齐元素，以创建结构化和一致的布局使用VisualStudio模板获得布局交互—利用边缘(v=VS.85).aspx通过从顶部边缘或底部边缘轻扫，使用应用栏调出所需的命令使用超级按钮作为搜索、共享、设置和设备Contracts的入口点随时查看程序历史记录，并快速切换。交互—利用边缘演示交互—应用栏大多数应用将使用暂时性应用栏底部应用栏用于命令全局命令在右侧，上下文命令在左侧当选中上下文命令的项目时，可以通过编程调用（例如：DemoStart)如果有单个常用命令，可以将它放置在画布上菜单弹出可以用于显示相关的命令组(例如：DemoPaintPlay)顶部应用栏用于沉浸式视图中的导航（如，返加按钮和标题）交互—超级按钮在整个系统的任何位置都可以调出超级按钮包含5个命令搜索共享Start设备设置弹出框使用轻量级界面导航分类：平面式以及中心辐射式避免使用永久性导航形式，比如tabs利用语义缩放在同一层级中的多个章节之间跳转导航演示导航—中心辐射式导航—平面式导航—语义缩放(v=VS.85).aspx设计缩小的视图，以显示你所在的组的更丰富的信息尝试将内容放在1-3页内在放大和缩小视图时，内容的范围应该保持不变语义缩放不是为了导航层次结构中的不同级别演示正确使用ContractsContracts•1+1=3：通过contracts与其他应用共同完成某些场景•超级按钮提供了一致的调用模型，用户始终可以自信地依靠该模型•从VSItemTemplate（项目模板）开始（可用于搜索、共享、文件选取器扩展）(v=VS.85).aspx搜索利用搜索，使用户可以从Windows的任何位置搜索您的内容搜索与查找搜索（使用Contracts)范围是整个应用的内容集结果通常是一个包含搜索项的项清单。然后，在搜索结果页面中，您可以通过导航查看结果项查找（使用应用内UI)范围在当前视图内（例如：在IE或Word中的Ctrl+F）结果通常已经位于您正查看的页面上。您只是需要帮助定位它们即可(v=VS.85).aspx共享共享源共享在线内容的链接共享实际内容的副本共享目标使交互保持简单使用内联控件处理错误或进度(v=VS.85).aspx设置将所有应用设置放在一个位置下，用户总是期望在这个地方找到它们不要在应用上创建其他进入设置的入口常用设置命令：您的设置类别、帮助、使用条款…保持简单、最少量的设置演示出色的贴靠与缩放设计适用于多视图用户可从事多任务操作。应用可以显示为以下任一布局：宽屏（1366x768)贴靠视图（必需）最小（1024x768)竖直视图演示缩放PC有各种屏幕尺寸和分辨率使用流动的布局（例如，ListView控件）来利用屏幕缩放至最适合的大小（例如，viewbox控件），以获得固定的布局使用来查看您的应用在不同机器上的外观效果系统提供以分辨率为基础的自动缩放使用可缩放的矢量图形，或提供3种图片资源大小（100%、140%和180%）并对位图格式的图像使用资源加载仿佛永远在线——活动磁贴和通知磁贴当关注的内容可固定为磁贴时，在应用栏中提供固定命令磁贴是应用的“窗户”二级磁贴让用户可以在其开始屏幕上提示应用中有趣的内容活动磁贴活动磁贴可以将用户吸引到您的应用您可以选择循环最后5个更新默认磁贴与内容磁贴、小磁贴和宽型磁贴都支持活动更新。通知通知Toast通知提供应用上下文之外的瞬时消息仅将通知用于必须被中断的信息在需要的地方使用快速且流畅有针对性的制作动画动画为Windows8Style的应用带来了活力并使体验有精雕细琢过的感觉所使用的动画特意制造出一种连续的感觉并帮助建立用户对UI的信心使用内置控件免费获得动画！使用AnimationLibrary（动画库）获得预设计的、基于场景的动画动画是有意图的，而不是简单的视觉装饰轻扫进行选择点击为主要操作遵循Windows8触摸语言并只使用规定的手势集：触摸手势设计以触摸为先设计时应考虑到手和手指点击目标的大小和间距应该适合触摸，你的手指并不是一个指针设计时应考虑到舒适性、人体工程学等设计以触摸为先在触摸时提供即时的视觉反馈，并在释放时触发操作应该是可逆的，因此用户可以放心地浏览让思路超越点击，并充分利用滑动交互。内容应该始终直接跟随您的手指即使只平移1个像素，也可以实现选择并提供更加稳定的轨迹深化Windows8Style设计理念——实例Windows8Style应用设计步骤1.应用的前期规划2.设计Windows8Style的基本构图3.正确使用Contracts4.贴靠与竖直视图5.活动磁贴以及通知6.添加主题以及品牌化应用的前期规划优势声明ContosoCookbook应用最擅长于帮助用户浏览菜肴并学习烹饪。ContosoCookbook应用最擅长于_________________。所有使用场景发现一份自己想吃的菜肴食谱查看评价最好的食谱查看食谱的食材，并打印出来，带至菜市场去购买让用户将做出的菜肴照照片，并分享给亲朋好友查看菜肴的分类信息查找擅长做某菜肴的餐厅学会做某道菜肴链接至网上餐厅来购买此菜肴写评论分享做菜经验收藏某个菜肴或餐厅所有使用场景发现一份自己想吃的菜肴食谱查看评价最好的食谱查看食谱的食材，并打印出来，带至菜市场去购买让用户将做出的菜肴照照片，并分享给亲朋好友查看菜肴的分类信息查找擅长做某菜肴的餐厅学会做某道菜肴链接至网上餐厅来购买此菜肴写评论分享做菜经验收藏某个菜肴或餐厅所有使用场景发现一份自己想吃的菜肴食谱查看评价最好的食谱查看食谱的食材，并打印出来，带至菜市场去购买让用户将做出的菜肴照照片，并分享给亲朋好友查看菜肴的分类信息查找擅长做某菜肴的餐厅学会做某道菜肴链接至网上餐厅来购买此菜肴写评论分享做菜经验收藏某个菜肴或餐厅选择正确的使用场景•发现一份自己想吃的菜•学习如何烹饪某个菜肴选择导航模式应用迁移Windows8Style应用网站标题栏：Logo，搜索，社区登录，注册顶部导航栏主要内容其他内容：广告，博客，注册，新闻资讯底部导航栏主要内容设计Windows8Style的基本构图应用LOGO主要内容正确使用ContractsWindows8Style实例分享美味菜肴：ShanghaiNoodleandMeatballSoup.贴靠和竖直视图Windows8Style实例Windows8Style实例竖直视图活动磁贴以及通知磁贴150*150px（必需）150*310px（可选）Windows8Style实例添加主题以及品牌化添加主题以及品牌化•理解什么是Windows8Style设计理念•在设计过程中要注意的Windows8Style五个特点Windows8Style的基本设计正确使用Contracts出色的贴靠与缩放仿佛永远在线——LiveTile&Notification快速且流畅•一个完整示例将Windows8Style应用到实际项目中资源（一）MakinggreatWindows8Stylestyleapps).aspxPlanningWindows8StylestyleappsWindows8StylestyledesignprincipalsUXguidelinesforWindows8StylestyleappsPlanforbranding资源（二）NavigationdesignforWindows8StyleappsCommandingdesignforWindows8StyleappsTouchInteractionDesignRespondingtouserinteractionAssessingusabilityofWindows8Stylestyleapps