码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2015-01-15 12:37:05      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

前言

每一个页面都是这个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>
这个定义放在了StyleDictionary.xaml中,这样所有页面的菜单项都会是同一个样式了。

间距与对齐

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

技术分享

每个红色的圆形都表示一个间距(人家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

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

标签:

原文地址:http://www.cnblogs.com/ms-uap/p/4218662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!