技术开发 频道

如何做好Windows Phone8应用程序设计

  【IT168 现场直播】2013年12月5日消息,作为IT业界的顶尖技术年度盛会,以“创新、开放、社区”为主题的TechEd 2013微软技术大会于12月5日-6日在北京国家会议中心举行,预计有162名国内外技术专家登台演讲,140余场讲座、50余场动手实验室,以及数千位微软专业技术人员、合作伙伴、行业权威、专业人士共同打造国内优异技术分享盛宴。

微软贺乐斌:技术人员是时代的引领者
▲更多精彩请点击IT168直播专题
···

  在众多的移动应用平台中,WindowsPhone8应用以其独特的视觉展现和交互体验给用户带来焕然一新的感觉,本课程将介绍最实用的WindowsPhone应用设计原则,以及由参与众多成功案例的知名创业者带来的精彩应用设计故事分享,帮助您的应用设计更有想象力、平台移植更便捷快速。

如何做好Windows Phone8应用程序设计
▲微软MVP李靖楠

  微软中国用户体验布道师朱宏,负责宣传普及Metro设计规范,Windows8/Windows Phone8中文英语设计开发合作,中国各地区Win8/Windows phone 8的workshop。

  微软设计语言综述

  微软的设计语言不仅仅是颜色的方块这么简单。微软设计语言的灵感,Metro是地铁,是一种交通工具,使用最简单的语言方式传达信息,路边的广告和指引不应该太花,影响用户准确的获得核心信息。用户只需要通过核心的设备完成核心的工作,电子设备是辅助完成工作,提高工作的效率,Metro的设计语言就是最快的从设备中获得重要信息。

  微软设计语言的起源

  最早在媒体播放器和Zone等地方都已经用到了这种设计理念,而不是在Windows phone开始使用。设计的灵感最早来自于8 Street Studio,用到的是最简单最直接的图标,帮助你最快的执行操作,漂亮并是不最核心的要素。很多设计师都会通过各种纹理、光线等等设计非常好的图标。秉承的是国际通用的,使用效率最高的文字。文字是在各种材质之上,识别度最高。

  微软设计语言的进化

  一开始的第一个阶段是被大家熟知的Metro;后来变成了Modern UI,考虑到非常现代的设计方式;再后来成为了Windows UI,考虑到Windows的设计界面也在使用;目前官方称谓是Microsoft Design,设计语言在微软不同的设备上使用,改成了微软设计的语言。

  微软设计语言的跨平台一致性

  微软设计语言的精髓:

  1、国际通用的符号识别语言,运用在国际通行的风格之上。2、内容重于形式,不过多的考虑外形,而是产品本身如何吸引用户,这是产品的核心竞争力。3、传递信息,而不是传递符号。

  导航设计:

  充分使用微软的设计规则,那么做出来的界面会非常符合微软风格:全景图、枢轴视图。

  微软的界面结构:

  1、底层的App Bar;2、顶层的状态栏;3、中间的内容区域。

  不建议出现永久不动的导航方式,超出框架的区域,让用户感觉界面是在动的,内容是连贯的。导航随着模块一起没打散到了内容之中。全景视图的核心是背景图是一个整体图,全景是漂浮在背景之上。底层没有App Bar

  枢轴视图的内容区域内容是居中对其,内容之间是分开的,左右两侧留白是一样的。底层是可是使用App Bar。建议每一个模块和模块之间使用不相同的设计。

  微软并没有要求用户何种的应用使用全景视图还是枢轴视图。功能性的使用枢轴视图效果更好一些,可以方便切换。

  部分二:如何让你的Windows Phone界面动起来

  通过设计和Coding的方式实现动态效果,

  动画包括:逐帧动画和关键帧动画。

  要素:属性、耗时、始末值。属性是要改变什么东西,耗时是用来解答动画花费多长时间。始末值是解决动画从哪到哪。

  动画词汇

  位移(横向、纵向);旋转(X轴、Y轴、Z轴)。Windows phone的开机动画就是Y轴和X轴动画的结合,有一个动态的效果;缩放(固定比例、X轴、Y轴);透明度变化(淡入、淡出),随着内容越来越多,内容的展现方式需要很好的处理,而透明度变化是很好的解决方式。

  色变

  形变

  为了更好的考虑到应用的性能,由于色变和形变不受显卡加速,会出现界面卡住的情况,因此不建议过多的使用。

  动画属性

  锚点(影响缩放和旋转),如果您在设计的过程中发现旋转没达到自己的预期效果,可能是锚点出了问题。

  变速曲线,建议使用,模仿自然的运动规律,让你的动画设计非常的自然。

  自动反转:两个重复的动画也可以通过自动旋转实现来回的重复过程。

  重复次数:比如旋转一周算是一个单位,可以通过设定重复次数在达到重复的动画效果。

  总结

  学习微软UX Design Pattern & Guideline;学习非常好的的案例(参考->消化->转化);不能简单的照搬,显得很山寨。参考:网络文章《聊聊哪些令人愉快的动画》;最后应该注意动画的一致性,顺序性,连贯性,避免无中生有,以功能、交互为依据。

1
相关文章