设计Metro风格的应用
《设计Metro风格的应用(Designing Metro style apps)》作为官方指导,其中的一些思路和操作实践都值得我们借鉴。本来这篇文章攒到今天发的,结果早上看到了腾讯CDC团队的《为设计Metro风格的应用准备着—Windows 8设计指南翻译》,顿时感觉到了团队的效率。有兴趣的,可以点击此处下载译文文档。
【特此说明,《规划Metro风格应用》为官方中文指导说明,已于2012年2月29日随Windows 8 Consumer Preview一起修改发布。】
规划Metro风格的应用时,少想些你需要包含的特点,多考虑些你需要提供给用户的体验。如果你还不太了解,建议你先阅读一下《什么是Metro风格应用?》。
1. 确定你的用户体验目标是什么
假设你要创建一个照片应用,那么你需要思考用户拍摄、保存和分享照片的动机。然后你就会知晓,他们想重现美好时光,通过照片来与他人产生联系,保护照片的安全。这些就是你的应用所关注的,你需要应用那些用户体验目标来引导你的设计流程。
常见技巧:头脑风暴(brainstorming)、关系图(association diagrams)和思维导图(mind mapping)
应用的关注点是什么? 开始时概念可能很宽泛,你可以罗列出应用能帮助用户解决的所有事务。例如,假设你想创建一款应用来帮助用户规划旅行行程。下面是一些你可能描绘的想法:
应用好在哪儿? 回头看看上述想法,想想是否还有一些特殊场景需要补充。试试砍掉列表中的功能点,直到剩下一个你想关注的应用场景。在这个过程中,你可能又会冒出很多想法,但是只有学会说“不”才能更加专注——把一个点做精了你就成功了!
选定了一个专注点后,你可以思考一下如何只写一句话就能让每个人明白你的应用好在哪儿。例如:
这是你应用的“亮点”陈述,它能指导许多设计决策,并权衡所构建的应用。专注于你想突出的点,同时避免过度设计,例如演变为一个功能列表。专注于你的用户能做什么,而不是考虑你的应用能做什么,切忌本末倒置。
2. 确定用户的交互动作和流程
流程即用户使用你的应用达成个人目标的相关交互集。每一个流程应该是紧密契合你的“亮点”陈述,帮助用户达成应用所满足的特定场景。优秀的应用,其流程往往都是易学且具有最短的交互路径。
技巧:
用户能做什么?例如,旅行应用在于“能让我和朋友们一起协同创建团体旅行行程”。列出我们想突出的流程:
3. 确定应用的界面设计
打好基础很重要。既然你已经知道了应用的亮点以及想要支持的流程,那么你需要开始思考基础架构。
如何组织UI内容?大多数应用内容能以分组或框架的形式组织。你所选内容的顶层信息需要与你的“亮点”陈述相吻合。
拿旅行应用来说,有多种方式来组织行程。如果应用的焦点是发觉有意思的目的地,那么你可能基于兴趣来组织内容,比如冒险、日光浴或浪漫之旅。然而,由于应用的关注点在于和朋友一起规划旅行,基于家庭、大学好友或工作等社交圈子来组织行程更加合理。
选择如何组织内容能帮助你进行决策,例如应用中需要什么样的页面或视觉效果。集成在Microsoft Visual Studio 11 Express for Windows Developer Preview中的项目模板符合一般应用的布局模式,能满足大多数内容的需要。
你需要什么样的UI外观和命令操作?温习一下早先定义的流程。每个流程都可以针对用户的步骤粗略地勾画出大纲。
我们可以看看“分享行程给好友和家人,以便follow”流程。假设用户已经创建了一个旅行计划,分享行程需要这些步骤:
在这个过程中,你看到你所需要创建的UI以及你需要理解的额外细节信息(例如,为初次使用该应用的用户绘制一个标准的邮箱样板)。你也能开始减少一些多余的步骤。例如,用户实际上在分享前不需要看到旅行计划的详细信息。流程越简洁,使用越方便。
更多如何使用不同外观的信息,可以查看Choosing the right UI surfaces。
如何组织操作命令?根据用户的操作步骤提炼出可能需要设计出的操作,同时斟酌一下这些命令操作如何摆放。
App bar中:你应该将大多数操作放置于app bar(App bar通常处于隐藏状态,除非用户将其呼出来);
App画布上:如果用户在页面或视图里有单一的目标,你可以直接在画布上提供命令操作按钮——当然,这些操作尽可能少;
上下文菜单(context menus)中:你可以使用上下文菜单来进行剪贴板操作(例如剪切、复制、黏贴),或者内容中无法选择的操作命令(例如为地图上的某个按钮添加push pin操作);
确认每个视图如何布局。Windows Developer Preview支持横屏(landscape)、竖屏(portrait)、切屏(Snap Views)和Fill Views。用户可以随意放置应用视图,这意味着你需要规划每个特定视图中的UI元素布局,并将每个视图状态映射到相应的布局状态中。当你这样做后,你的应用UI能够流畅地变换,满足用户的需求和个人喜好。
更多信息,可以查看Sopporting views,Choosing a layout和Guidelines for snapped and fill views。
4. 确定流程中所使用的应用和Windows特性
如何让你的应用与众不同?如何让你的应用在Windows Developer Preview中体验流畅?
既然你知道用户想要什么以及如何帮助他们,那么你可以你工具箱里的“装备”。探索Windows 平台并将其特性与应用的需求联系起来。需要确认的是,每个特性都需要参照规范指导。
常见技巧:
App contracts 你的应用通过app contracts来达到跨应用和跨功能的用户流程。
更多信息,可浏览Windows application contracts和File Pickers。
不同视图和规格 Windows Developer Preview将你的应用放在了用户面前。你想让你的应用UI在任何设备、任意方向、任何用户使用情境下出类拔萃。更多信息查看designing for different form factors。
触摸优先(Touch first) Windows Developer Preview提供一套独特、出众的触控体验,明显优于鼠标操作。
例如,语义变焦(semantic zoom)是针对大规模内容集导航的触控体验不断优化的结果。用户既可以通过平移或滚动来浏览各类别内容,又可以通过缩放特定类别来浏览更详细的信息。对比传统的导航和类似标签(tabs)的布局模式,这样的方式让呈现的内容更具触感、视觉和信息特征。
当然,你可以充分利用一系列交互方式,譬如旋转(rotate)、平移(pan)、擦(swipe)、交叉幻灯片(cross-slide)等。更多信息浏览touch features。
新颖且引人入胜 确认你的应用够新颖且通过以下标准体验引人入胜:
个性化
设备适配 确认你的应用能够充分适配当前的多个设备。
我们重新思考一下旅行应用案例。为了达成“能让我和朋友们一起协同创建团体旅行行程”的目标,可以使用一些特性,这里仅仅罗列一些:
正如你所看到的,Windows Developer Preview帮助你创建新的、令人愉悦的体验。探索更多信息,可见Developing Metro style apps和Differentiating Metro style apps部分。
5. 令人愉快的第一印象
思考一下第一次打开应用时所需要传达给用户的信息。看看你的“亮点”陈述,即时你没机会当面告诉每个用户你应用的功能,你也应该利用第一印象来传达相应的信息。可以利用这些:
瓦片(Tile)——瓦片就是应用的脸面。在Start页面的应用万花丛中,凭什么让用户打开你的应用呢?利用网片来点亮应用,展示出应用的功能特点。充分利用瓦片式通知来使你的应用更具新鲜感和相关性,吸引用户频繁回到你的应用中。
启动画面(Splash screen)——应用初始化时启动画面是另一个突出品牌的时机——充分利用它来传达应用的个性化。
初次使用(First launch)——在用户初次登录或添加内容前他们将看到什么?获取用户信息前可以着重诠释应用的价值。提交信息前可以展示一些推荐内容,引导用户去理解应用的愿景。
首页(Landing page)——首页是用户每次启动应用时看到的界面。首页内容需要有清晰的聚焦,而且能够展现应用的主旨。首页专注地做好一件事情,相信人们会探索应用的其他内容。首页需要合理规避干扰问题,而不是突出可发现性。
6. 确认设计符合规范和要求
实际开发之前,你需要验证你的设计或原型,避免后续的返工重做。每个功能特点都有一系列的用户体验规范指导来帮助你打磨应用,且需遵守一系列Windows Store规则。你可以使用Windows App Certification Kit来按照商店需求进行技术测试。
了解重要特性,可查看Checklist for design。
建议继续学习:
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:hoowolf 来源: 胡太狼,你在哪儿?
- 标签: Metro
- 发布时间:2012-04-07 21:48:27
- [40] 界面设计速成
- [35] Oracle MTS模式下 进程地址与会话信
- [32] 如何拿下简短的域名
- [32] IOS安全–浅谈关于IOS加固的几种方法
- [32] 视觉调整-设计师 vs. 逻辑
- [31] 程序员技术练级攻略
- [31] 图书馆的世界纪录
- [30] 【社会化设计】自我(self)部分――欢迎区
- [30] android 开发入门
- [27] 读书笔记-壹百度:百度十年千倍的29条法则