您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

WINDOWS PHONE 8 UI 设计指南

作者:佚名    责任编辑:admin    更新时间:2022-06-22

 WINDOWS PHONE 8 UI 设计指南 三联

  @TerryFan (思科云协作部门用户体验设计师):最近在准备Windows Phone 8的设计工作,寻找资料时看到这篇文章,感觉有点像是MSDN里design guide的总结,是快速入门WP设计的绝佳文献,由于本人对WP的理解还不够深,而文章中有很多WP的专有词汇和描述,所以翻译难免有误,希望大家指正。

  欢迎关注我的微信公众号“开卷有译”获得新文章推送。

  ========================== 我是设计的分割线 ==========================

  这段为文章引言,可以直接无视

  我很羡慕Windows 8的团队,他们有自己专属的设计指南,指引人们构建出完美的Windows商店应用。因此,我决定要成为先行者,为Windows Phone 8做点类似的事情。这有一个推荐清单,列出了那些你在搭建windows phone应用时应该考虑的事情。此清单并不详尽,仅做参考。这篇文章是参考了多处资源整理而来,大多来自WPDPS (windows phone depth partner support),它们基于大量的应用审核和案例研究,这是一个非常好的资源库。而正是因为我发现这里的东西并非公开共享的,才促成我整理这些资源外加写一些小贴士来分享给大家,它们并不是什么新的东西,只是不易被看到或是了解。再次感谢WPDPS,也期待有越来越多这种有用的资源可以体现到windows phone的开发中心。

  1. 元素对齐与边距

  所有的页面都应遵循左边距12px或24px。

  内容,标题,标头以及标头的图标也应左对齐,距离左边界为12px或是24px。

  如果有需要进行右对齐,右边距也应该是12px或是24px。

UI设计师干货!Windows Phone 8设计指南

  小贴士: 在调试模式运行应用时,你可以查看由25*25红色方块组成的半透明网格。这些方块是以24px边距填充页面的,并且他们之间的距离是12px,这也恰恰体现了windows phone设计方块的魔力。这些网格可以帮助你迅速找出任何对齐的问题。

UI设计师干货!Windows Phone 8设计指南

  当列表的字段与数值成对出现时,应以两组左对齐的队列出现,或是像系统联系人应用中详细信息页面的设计那样,标题在内容的上方。

UI设计师干货!Windows Phone 8设计指南

  2. 元素间距

  元素的间距应该在水平和垂直两个方向上保持一致。建议元素以12px的间距出现,以遵循设计网格。

UI设计师干货!Windows Phone 8设计指南
UI设计师干货!Windows Phone 8设计指南

  3. 控制点击响应

  当使用诸如按钮、列表项等标准控件时,应该使用系统标准的倾斜效果

  不要使用背景、前景或是外框颜色变化

  其他控件,不采用动画或是颜色的变化是允许的

  在点击时,任何信息的颜色变化都是不允许的。

  4. 列表

  列表项被点击时,都应以倾斜动画表明。

UI设计师干货!Windows Phone 8设计指南

  除了在选取器中,列表项都不应该有选中状态。

  请在应用中使用一致的字体,列表项的文字至少应有12像素的高度,并且是容易点击的,同时确保文字在所有角度和大小下的可阅读性。

  背景

  不建议使用背景,尽管他们可以传达品牌并且增加一些对比度。取而代之,你可以给文字前景加一些相关元素。

  布局

  用文字的大小和颜色建立列表项的层级

  列表增强

  例如在菜单中,不要使用列表增强的设计。除非他们之间需要有明显的差别。有条经验法则:在圆圈里的图标意味着操作而不在圆圈里的往往只有指示作用。

UI设计师干货!Windows Phone 8设计指南

  可滚动内容

  如果在页面中有可滚动的内容,你需要在内容的底端留出95px的距离,这样内容就不至于贴着页面的最底端。

  例如,下图就是一个只比可视区域高出一点点的页面

UI设计师干货!Windows Phone 8设计指南

  当用户滚动到页面的最底端时, 会出现橡皮筋的效果,内容会被稍稍拉离页面底部。当滚动动作结束时,内容会重新弹回页面的边界。

UI设计师干货!Windows Phone 8设计指南

  虽然这样可行并且看起来还尚可,但是把内容一直伸展到页面底部并不是完美的。最快解决的办法就是在页面底部设置95px的距离,为内容模块与底部边界腾出一些空间——不管是针对手机屏幕还是底部的菜单栏。这样看起来会更顺眼。

UI设计师干货!Windows Phone 8设计指南

  在系统的联系人应用中的介绍或是历史页面,你都能看到同样的底边距。还有在日历应用中的新建邀请页面,亦或是IE浏览器的设置页面,也是一样的处理。说到设置,你可以到系统的设置应用中试试滚动到底部。

  5. 枢轴

  枢轴页面

  所有的枢轴使用至少需要两个页面

  枢轴页面中的禁用控件

  拨动开关

  滑动条

  地图控件——除非它们是静态的(例如缩放和平移手势应被禁用)

  浏览器控件——除非它们是静态的(例如缩放和平移手势应被禁用)

  手势冲突

  提供水平滚动区域或是水平滑动手势的控件都是不允许在枢轴页面中应用,因为水平滑动的手势已被枢轴页面间的切换占用。

UI设计师干货!Windows Phone 8设计指南

  空的枢轴页面

  如果某个枢轴页面的内容显示取决于用户的操作,应该使用占位符文本/图片来提示用户。例如,当“未读邮件”的枢轴页面中没有内容时,页面不该被移走,保留的同时应该显示简单的信息来说明当前没有可用的内容。

UI设计师干货!Windows Phone 8设计指南

  更多细节请查看:Windows Phone枢轴页面设计指南

  6. 全景

  全景页面中的禁用控件

  拨动开关

  滑动条

  地图控件——除非它们是静态的(例如缩放和平移手势应被禁用)

  浏览器控件——除非它们是静态的(例如缩放和平移手势应被禁用)

  菜单栏

  在菜单栏中应当有如刷新,搜索及设置等常用操作

  菜单栏里可用的选项可以随着全景面板变化

  全景中应当避免使用浮动按钮或是尽量少使用

  手势冲突

  提供水平滚动区域或是水平滑动手势的控件都是不允许在全景页面中应用,因为水平滑动的手势已被全景页面间的切换占用。

  滚动面板

  全景面板的滚动应当选择水平或垂直方向,不能两者皆有。

UI设计师干货!Windows Phone 8设计指南

  在全景页面中,不可将所有的面板设置为都可垂直滚动,如果使用场景要求这样的,枢轴页面更为合适。

  采用多样化的全景面板(水平与垂直向滚动交替使用)可以提升总体的体验并且更易浏览。

  导航

  避免使用浮动按钮。如果必要的话提供一个导航模块,提供给用户寻找更深内同的入口

  系统提供的图片应用以及音乐&视频应用就是全景导航使用的绝佳案例。常规任务的操作应该放在菜单栏里。

UI设计师干货!Windows Phone 8设计指南