WIN10新规范之UWP

大概解说一下UWP的制作方式,避免大家掉坑。

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

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

Image title


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

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

Image title

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

Image title

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

Image title

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

Image title

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

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

Image title

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

Image title

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

Image title

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


设计细节及相关素材

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

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

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

Image title

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

Image title

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

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

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

Image title

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

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

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

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

Image title

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

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

Image title


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

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

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

Image title

2 4 收藏 3 评论

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部