2024年4月12日发(作者：娄莱)

Windows Phone 8 UI 设计指南

最近在准备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。

小贴士： 在调试模式运行应用时，你可以查看由25*25红色方块组成的半透明网格。

这些方块是以24px边距填充页面的，并且他们之间的距离是12px，这也恰恰体现了windows

phone设计方块的魔力。这些网格可以帮助你迅速找出任何对齐的问题。

当列表的字段与数值成对出现时，应以两组左对齐的队列出现，或是像系统联系人应用

中详细信息页面的设计那样，标题在内容的上方。

2. 元素间距

元素的间距应该在水平和垂直两个方向上保持一致。建议元素以12px的间距出现，以

遵循设计网格。

2024年4月12日发(作者：娄莱)

Windows Phone 8 UI 设计指南

最近在准备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。

小贴士： 在调试模式运行应用时，你可以查看由25*25红色方块组成的半透明网格。

这些方块是以24px边距填充页面的，并且他们之间的距离是12px，这也恰恰体现了windows

phone设计方块的魔力。这些网格可以帮助你迅速找出任何对齐的问题。

当列表的字段与数值成对出现时，应以两组左对齐的队列出现，或是像系统联系人应用

中详细信息页面的设计那样，标题在内容的上方。

2. 元素间距

元素的间距应该在水平和垂直两个方向上保持一致。建议元素以12px的间距出现，以

遵循设计网格。