做最酷的Windows Phone应用

简介:

 

        应用程序的UI至关重要,应用程序开发者与用户的接触,始于UI也止于UI。用户界面就是我们的脸面。我们都想把最完美的UI呈现在用户面前,那么我们到底该怎么做呢?做了这么久的WindowsPhone相关工作,积累了些许的感悟,下面就和大家谈谈对如何做出最酷的WindowsPhone应用的一些体会。
 
         WindowsPhone 是一个全新的智能手机操作系统,它有着自己独特的系统UI风格和操作要求,因此一个优秀的WindowsPhone应用至少应该从以下9个方面着力。
 
一   Tile
         Tile通常被称为窗格,它是WindowPhones7系统的一个独特设计。应用程序的Tile可以PIN到主界面,并在上面显示图片,数字或者文字信息。基于Metro简洁性的要求,Tile至少应该是纯色的方块,在此基础上,我们可以添加背景图片,数字和文字信息,但不可过分修饰(如图1左侧所示)。例如,3D字体,渐变色,圆角都是不可取的(如图1右侧所示)。除此之外,Tile不能是没有含义的图片,应该是应用程序相关的一个标志。由于WindowsPhone系统主题有“深”和“浅”两种,所以Tile也应该是在这两种主题下都能清晰显示的,这也意味着白底黑景的Tile不是好的设计。

图一

 

二   定制启动页
         启动页是应用程序启动时显示的第一个页面,也是一个可以修改的页面。启动页是位于工程目录下的一个名为SplashScreenImage.jpg的图片。只要用自己的图片替换掉系统默认图片,并使用相同的名字,当应用程序在此启动时,就可以在启动页看到自己的图片了(如图二)。另外,启动页面停留的时间不可太长,应在5秒内结束,转入应用程序页面。否则的话,用户有可能会用脚投票,关掉你的应用。

图二

 

三  布局对齐
         在应用程序界面中的文字内容,很多时候会是一种多行布局模式,在这种布局下要求屏幕上所有的文字左对齐,每行的第一个文字元素距离屏幕边缘24像素(如图三所示)。这种布局的典型用例就是全景视图和枢轴视图。

 

图三

四  使用深浅两主题

         幕的文字配色应该与系统的主题背景“深”或者“浅”相适应(如图四所示)。例如黑色字体在“深”主题背景下看不清,白色字体在“浅”主题背景下也会不清晰(如图四所示).总之,你要管理好你的主题,使其与系统的色彩规范相适应。

图四

五  触碰

         相对于PC屏幕,手机的屏幕要小得多,可很多时候,我们总想把大量的内容放进去,其结果就是图片,文字尺寸都比较小,且间隔也很小。这就会产生一个问题:当你用手指点击某一元素的时候,很可能会触碰到与其相邻的其他元素。为了解决这一问题,设计出具有更好用户体验的UI,我们建议:
·         字体最小15pt.
·         建议触碰区域9mm以上
·         最小触碰区域7mm以上
·         元素间最小间距2mm
·         视觉目标尺寸是触碰目标大小60%-100%
·         发生触碰时提供反馈

图五

六  反馈与交互
         好的用户体验,要求应用对用户的操作提供及时的反馈与交互。例如,当应用在执行大数量的任务时,应该在界面给用户以提示,可以是一个进度条或者是不断变化的数字等(如图六所示)。这里需要提一下,在WindowsPhone下的进度条有两种动画效果,一种是渐变式的,另一种是循环滚动,大家可以根据自己的需求选择合适的动画效果。

图六

七  控件
         WindowsPhone为大家提供了很多好用的控件,可如果使用不当的话,也会产生反效果。例如使用Silverlight控件,尽量避免使用内嵌Web控件,当应用必须内嵌Web内容时,关闭平移和缩放等触碰功能,确保内容完全可读。在全景视图和枢轴视图中,避免使用开关控件,避免使用游标控件,因为这容易导致手势操作冲突。
         此外,为了降低用户在向TextBox输入内容时的复杂度,WindowsPhone针对不同的输入状态提供了有针对性的屏幕键盘。例如针对数字输入的键盘针对拨号输入的键盘,针对登录输入的键盘等。在输入时弹出哪种类型的键盘,由TextBox的InputScope属性决定。需要注意的是,屏幕键盘可以自动弹出,但建议仅当页面中不多于两个文本框时才自动弹出,且要避免挡住屏幕的其他元素(如图七所示)。

图七.A

图七.B

八  全景视图
         Panorama控件是WindowsPhone中一个非常重要的控件,提供跨越多屏的全景式视图(如图八所示)。Panorama控件可以设置背景,要求背景480×800像素到1024×800像素之间,太小会被拉伸,太大会被自动裁切。此外,背景图片要与主题内容相适应,背景太绚丽会过分吸引用户注意,起到喧宾夺主的反效果,背景颜色与主题颜色太接近,会掩盖主题内容。Panorama的每一个Section比例16:9,Section中缩略图如果不加文字描述的话,可以一行放置两个,并且建议一行最多只放置两个。Panorama的屏数最好不要超过4屏。Panorama的每一屏的内容可以超出屏幕范围,但一定要慎重使用,否则会呈现很不好的用户体验。
 
 

 

图八.A
 

 图八.B

九  导航

         在做WindowsPhone开发时,我们应该尽量利用手机硬件本身给我们提供的资源,减少开发复杂度。就应用的导航操作来说,所有的WindowsPhone都有一个“返回”键,当我们需要从一个页面返回之前的页面时,直接操作“返回”键就可以了。如果当前页面是应用的第一个页面,操作“返回”键之后,我们应该退出应用。我们不需要在自己的应用中添加“返回”图标,用以提供返回上一页功能,这实际是浪费资源(如图九所示)。同时,除了购物车等复杂场景,很少应用真正需要使用Home键(如图九所示)。

图九

 

 
         说了这么多算是抛砖引玉,开发者还是要结合自己的产品,去实际验证一下如何做一个最酷的应用。愿应用开发者在Windows Phone平台上开发出最酷的应用,和最精彩的用户体验。

 

本文转自 

飞雁 51CTO博客,原文链接:http://blog.51cto.com/felixyan/690374 ,如需转载请自行联系原作者

相关文章
|
5月前
|
应用服务中间件 nginx Windows
windows下DOS命令杀掉Nginx应用进程
windows下DOS命令杀掉Nginx应用进程
|
3月前
|
API Python Windows
python3应用windows api对后台程序窗口及桌面截图并保存的方法
python3应用windows api对后台程序窗口及桌面截图并保存的方法
89 1
|
1月前
|
数据可视化 数据库 C++
Qt 5.14.2揭秘高效开发:如何用VS2022快速部署Qt 5.14.2,打造无与伦比的Windows应用
Qt 5.14.2揭秘高效开发:如何用VS2022快速部署Qt 5.14.2,打造无与伦比的Windows应用
|
2月前
|
安全 Linux iOS开发
上传 iOS 应用变得更加容易 - 在 Windows 上架 iOS APP 的工具介绍
上传 iOS 应用变得更加容易 - 在 Windows 上架 iOS APP 的工具介绍
|
3月前
|
存储 Kubernetes 安全
虚拟机测试Windows Server 2016原地升级2019,应用和数据完美保留
Windows Server 2016可以无缝升级到2019版本,确保应用程序和数据在原地升级过程中完整保留。
102 0
|
3月前
|
Linux iOS开发 Windows
windows 如何上架 ios 应用到 app store
windows 如何上架 ios 应用到 app store
|
3月前
|
消息中间件 Java Kafka
windows下kafka的环境配置及rdkafka库的应用
windows下kafka的环境配置及rdkafka库的应用
|
8月前
|
开发工具 git Windows
太阳当空照-Windows服务化方式NSSM应用
太阳当空照-Windows服务化方式NSSM应用
122 0
|
4月前
|
C# Windows
C#安装“Windows 窗体应用(.NET Framework)”
C#安装“Windows 窗体应用(.NET Framework)”
50 0
|
5月前
|
TensorFlow 算法框架/工具 异构计算
YOLO实践应用之搭建开发环境(Windows系统、Python 3.8、TensorFlow2.3版本)
基于YOLO进行物体检测、对象识别,先和大家分享如何搭建开发环境,会分为CPU版本、GPU版本的两种开发环境,本文会分别详细地介绍搭建环境的过程。主要使用TensorFlow2.3、opencv-python4.4.0、Pillow、matplotlib 等依赖库。
97 0