博客园客户端UAP开发漫笔 - App UI设计的三大纪律八项注意

前言

每一个页面都是这个App的门面，尤其是主页面，看上去干净整洁清爽宜人容易操作，那么你的App就成功了一半。这也反映出了你这个开发团队的基本审美素质和设计理念。如果你不是一个团队，而是一个个人开发者，建议你好好读读以下心得体会，相信会帮助你做出好看而实用的App。用一堆拥有丑陋UI的App充斥Window Store，不是我们高大上的程序员所为，被其他手机开发平台的开发者们耻笑。

三大纪律：

1）不乱用颜色。一个页面内不要超过3种颜色

2）不乱用大图片当背景。你是想让用户看你的背景图片呢，还是看你的内容？

3）不乱填充内容。页面元素如果太满，给读者压抑感，无所适从。

八项注意：我们从字号，字体，颜色，导航栏，标题栏，内容区，菜单栏，间距与对齐等八个方面介绍了我们开发App的心得体会。

字体

推荐一律使用Segoe WP字体。在特殊的显示符号的地方，可以使用其它字体，如：Segoe UI Symbol。有些字体在设计时可以呈现，但是在deploy到手机上后毫无效果，原因是手机上没有你指定的字体。

文字大小

在WP的设置中，有一项文字大小设置：

缺省时，文字最小，slider处于最左侧的位置。但是看邮件时太费劲啦，尤其是英文邮件，再加上喜欢坐城铁，基本上看几分钟我的K金狗眼就瞎了。所以我一般会把这个文字调到上图的大小。这时，WP内置的“节电模式”应用会这样：

看那个“节电模式”四个字，比上面的“设置”两个字大一些吧，这个页面的其它所有文字也都比正常要大。我不知道这是by design呢，还是bug呢？反正其它的内置App不这样。 这一点会被大多数人遗忘，以至于一些很有名头的App，或者是上述WP自带的App本身都掉入此坑。这个如何避免呢？

在Page中加入这么一句话即可：

<Page
......
    IsTextScaleFactorEabbled="False">

这个定义是告诉WP：我的App忽略那个文字大小调整的影响。否则，你所有的文字相关的控件，都会变得巨丑无比，整个UI就毁了。

在Windows 8.1中没有这个设置，因此以上代码只能在Windows Phone Project中编译通过，因此这句话要写在Page中，而不能写在任何Shared Project的XAML中。

主题色

看到应用商店中的很多简单的App都使用了黑色作为主题色，无非是以下几个原因之一：

1）是一个简单的App，没有designer，没仔细设计过，干脆用黑色的

2）看到Windows Phone自带的App都是黑色，以为黑色就是官方指定的

3）黑色上显示白色的字，天经地义，不用做特殊设置

4）黑色是万能搭配色

以上这些都可以理解。但是一个纯正的第三方App绝不可以用黑色，一个是避免和WP自带的App混淆，一个是避免别人以为你偷懒用个黑色在这里充数。反正我个人没见过哪个口碑好的App是用黑色的。如果是自己用黑色做个App随便玩玩也就罢了，一旦上传到应用商店去，就只能说明又多了一个屌丝了，注意素质。

最简单的避免成为屌丝的方法很简单:

1）定义一个主题色（比如就用红色怎么啦，和IT之家似的），用于标题栏，可点击文字（带link）等场合

2）定义一个浅主题色（可选），用于菜单栏

3）用一个白色或浅灰色（假设主题色是深色）做大字体颜色（比如标题栏之内的文字）

4）用一个深灰色做大量文本的颜色（在白色背景下）

反正一共就4种颜色就够了，足以展示程序员的素质了。如果要精益求精，还需要更多一些的颜色，比如作者/发布时间的颜色，摘要的颜色，以及下方attribution的颜色（推荐/阅读/评论）。

主题色也应该在Page中这样定义：

<Page
......
    RequestedTheme="Light"
......>

这样你就省去了在code中写this.RequestedTheme = Light的麻烦，这是为了做日间模式和夜间模式的切换。

状态栏

状态栏，就是Windows Phone顶部的那个大概有25像素高的横条，平时显示网络状态，时间，电池状态等等。下图中黑色的部分就是状态栏。

原则：不要轻易决定隐藏状态栏，除非你是在做一个游戏。因为在大多数情况下，用户是希望能随时看到自己的WIFI网络状态、电池状态和当前时间的。节省25个像素而用于显示更多的应用内容的想法有点儿小气。

如何隐藏状态栏呢？在Silverlight中，是在Page的XAML设置一个属性（忘记是什么了），但是在Win RT SDK中，目前知道的必须用code做这件事：

await Windows.UI.ViewManagement.StatusBar.GetForCurrentView().HideAsync();

一旦在一个页面内调用了上述语句，那么在该App本次的以后使用过程中，顶部状态条都不会再显示了，除非你再调用ShowAsync()来显示它。

如何让状态栏和你的App的色调搭配和谐呢？你应该在Page里这样定义：

<Page
......
    Background="{ThemeResource MyAppThemeColor}">

这里假设你在StyleDictionary.xaml里设置了MyAppThemeColor的值。这样的话，这个页面的状态栏也会被刷成应用主题色，一般来说会和你的这个页面的顶部标题栏颜色一致，看上去比较顺眼的啦。

但是这导致了一个问题：如果你的App有下方的命令栏（Command Bar）而且是淡蓝色背景，在页面切换动画时，能看到命令栏后面的深蓝色背景一闪而过，不太协调，原因是上面那个设置把整个页面都设置成了深蓝色，包括底部命令栏的后背景。这个虽然不是大问题，但作为程序员的我们一定要知道当有人Challenge这件事时，我们如何解决。

为了避免这个问题，我们可以只设置状态栏的背景色，而不设置页面背景，用code做：

Windows.UI.ViewManagement.StatusBar statusBar = Windows.UI.ViewManagement.StatusBar.GetForCurrentView();
statusBar.ForegroundColor = CNBlogsThemeColor;

但是别忘了去掉上面Page里的Background设置。

标题栏

博客园的标题栏设计如下：

特简单。注意了吗，页面上没有“博客园”或“CNBlogs”字样。同学们一般习惯把“博客园”字样作为Pivot的Title放在本页的最上方，但是仔细想想那有什么意义呢？人家用你这个App的人，知道你这是博客园，为何一定要占据宝贵的空间来展示自己的自恋情结呢？

另一个页的标题栏设计如下：

高度/颜色/字体等和其他页完全一致，切换页面时无跳跃感。和Android的App的最大区别是：由于Windows Phone有特定的底部Command Bar来放置命令按钮和菜单，所以顶部的标题栏一定不要再放任何可以操作的东西啦，而只能用于信息展示。比如上图，告诉你当前页面显示了热门博客的前20条。那个“2日内阅读排行”是一个辅助手段，告诉你当前页的具体展示类别。这么多字在标题栏里放不下，所以放在这里会随着ListView的滚动而上移从而隐藏。

内容区

内容区不要太杂，最好只放一类东西，除非你是在做那个叫做“找你妹”的游戏。如果只有一类内容，那么我们一般用ListView就搞定了。如果有两类以上的内容要显示，最好放在两个页面内；如果非要在一个页面内，就用这种方式：

用一个蓝条分开了不同种类的内容，而且每类内容可以单独展开或收起。这里你还可以选择用ListView的分组方式展示数据，第一个分组标题是“分类”，第二个分组标题是“博主”等等，但是不是最佳选择，因为两类内容的模板不一致，需要写很多code来实现。

菜单栏

菜单栏也有几个小技巧可以分享，看下图：

1）我们使用了主题色来显示菜单项和按钮(Foreground = CNBlogsThemeColor)

2）用淡雅主题色来作为菜单背景（在Flyout Menu的弹出式菜单中也是如此）(Background = CNBLogsThemeLightColor)

3）使用标准ICON做按钮，如果不够用，在Segoe UI Symbol中基本上可以找到你要的东西，就不要麻烦designer再去画了。如果非要自定义的话，就画一个25x25 png，放在40x40的png内。你可以试试其它尺寸，很难看的。

4）重要操作放在上面的按钮中（最多4个），不重要的放在菜单中，这个你自己定吧。

这个菜单栏的样式定义如下：

<Style TargetType="CommandBar">
    <Setter Property="Background" Value="{ThemeResource CNBlogsThemeLightColor}"/>
    <Setter Property="Foreground" Value="{ThemeResource CNBlogsThemeColor}"/>
</Style>

间距与对齐

间距是屌丝程序员经常忽视的问题，但其实它是隐藏最深的能影响用户体验的关键元素之一。我们举例说明吧，看下图：

每个红色的圆形都表示一个间距（人家Designer给的设计叫做Redline，用红色直线表示），对称位置的两个间距要保持一致，整个界面才能好看。比如1和2，3和4，5和6，7和8，都要保证数值一样。

从对齐上看，标题区的WinRT/Metro的左边距，ListViewHeader的左边距，以及每篇博客的左边距都是一致的。

再比如设置页面，也是丝毫不能马虎，看那些红色的线条的长度，必须保证一样长：

小结

Windows 8.1上的App对审美的要求其实更高，因为它的显示面积大，不像Windows Phone上可以随便用点儿什么手段就能填满屏幕。我们会有专门一篇Blog介绍博客园 UAP的Windows 8.1版本的界面设计。

作为同样屌丝的我，实在是写不出什么更好的东西，只是在和designer接触过程中学了些皮毛，让大家见笑了。总之几句话概括一下：注意颜色，注意字体，注意间距，注意内容。让我想起了解放军的三大纪律八项注意，违纪者扣6分罚200！把自己的脸整容成雷锋也不行！呵呵，又扯远了…

分享代码，改变世界！

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

GitHub open source link:

https://github.com/MS-UAP/cnblogs-UAP

MSDN Sample Code:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

MS-UAP

2015/1/12

9楼四弦木头

学习了~

8楼zl860628

学习啦

7楼vbfool

哈哈，对于主题和间距我都是看着差不多就行了。，重要的是要有功能。

6楼Snail #176;

果断下载来看看

5楼风花雪夜

好东西必须顶啊

4楼yonghu86

学习了

3楼一宿下一娃

学习了，谢谢开发者为WP付出的努力

2楼清风送明月

不超过3种颜色，难，第3个图就6种颜色了。不过lz的文章很好！

1楼h82258652

黑色背景无限躺枪…………，谁借我个美工妹子-_-|||

Re: MS-UAP

@h82258652，呵呵，不好意思，让你躺枪了。上一篇的ListView使用，其中那个右对齐部分的Strech mode，是采用了你的建议。特此感谢！