公司在WIN8的时候就有自己的APP，为啥？因为BOSS是微软忠实粉丝啊，哈哈～ 所以随着WIN10的发布，不可避免的又要落入WIN10的UWP设计坑里。为啥说是坑，因为在看了Material Design 的设计规范之后，对于其他平台的设计规范说明都觉得有点头疼。（好吧，我承认自己有点入迷于Material Design）

     步入正题，在初步规划好本公司产品的UWP设计要点以及交互之后，基于初步对于UWP的一些理解，大概给各位说明一下设计规范，主要针对Mobile端，其他平台有空的话再继续补充吧。

布局结构、导航模式及操作控件

首先，我们来看看UWP的层级划分规则（下图），可见不建议跨级跳转页面，这个是因为受限于UWP对于导航、返回等操作的一些定义。

页面的基础框架模块（下图）和iOS/Android大同小异，上面是导航标题等，中间内容，底部是标志性的UWP操作控件

导航主要有下面两种模式，根据自己产品的实际信息框架来定义采取哪种方案

此方案的导航数在2-5个内容，超出这个范围就不建议使用了，通常采取这个模式是基于用户需要比较频繁切换页面

这个其实就是我们非常熟悉的“汉堡包”导航，与上面相反，如果不希望用户频繁切换页面，就采取这种方案

至于内容区域，根据产品属性定义即可，没有太多的规则限制，和iOS/Android大同小异，只是设计细节上不一样，文章后面会补充这一块的知识。

OK，请大家好好看看上面这个小玩意，这个就是UWP标志性的控件，常用于页面底部，也可用于顶部导航区域，请看下图示例

上图中是控件的第二种状态，点击最右边的“•••”产生状态交互

以上是控件的布置，对于Mobile 端来说，首选是在底部设定操作控件，方便用户操作，其他模式要慎重

设计细节及相关素材

首先要做UWP，先解决字体，字体名为：Segoe UI，官网找不到下载，本人是从WIN10系统里面找到的，包含字体文件和iconfont图标字体文件，然后WIN10的设计规范网站上也给出了一些源文件的资源，本人只下了AI文档，大家下载附件就能看到了，或者自己到网站看看自己需要的：

https://developer.microsoft.com/zh-cn/windows/design/assets

先说说模块高度划分，现在新出的WIN10手机没有物理键，所以在制作中也要注意保留按键高度

然后是字体基本的应用规范

更详细的可以看：https://msdn.microsoft.com/zh-cn/library/windows/apps/hh700394

另，附件中的 segmdl2.ttf 就是图标字体，AI 或 PS 里面的 字形 面板找到字体就能看到图标了

对于图标的尺寸规范，和 Material Design 一致，都是 24px 为基础，48px 为点击范围，详见下图

这里补充一点，标题与左边间距是60px

WIN10对于原生的字体图标开发是可以直接用的

详情可以看：https://msdn.microsoft.com/zh-cn/library/windows/apps/jj841126

除此之外，附件资源中的 WindowsControls.ai 有官方的一些控件范例，主要研究一下每个控件对于尺寸、间距等定义方式，以此举一反三

另外还有一个 UWPAppTemplate.ai 的文件，这里主要是各种分辨率的场景，可以根据自己的实际情况应用

本人是采取360x640作为模版制作的，因为 Material Design 就是这个尺寸作为基础，当然因为尺寸太小，在PS里面做的时候可以把DPI改为144来做

UWP基础设计入门基本如上所诉，有什么不明白的大家可以留言，然后有哪里不对的也欢迎各位补充，谢谢 ;P

最后说一点，UWP的设计格调基本都以 方块 作为基础元素，想要 APP 更像 UWP 风格，注意保持这一点

最后的最后，献上本人项目的首页Demo 效果图一张