教你设计原汁原味的Windows Phone应用

合集下载

第7章 Windows Phone设计元素和应用实战

第7章 Windows Phone设计元素和应用实战

Windows Phone 设计原则
第 7 章 Windows Phone 设计元素和应用实战
Windows Phone 界面框架
页面标题
尽管页面标题不是一个交互性的控件,但仍然有特定的 设计规范。页面标题的主要功能是用来清晰地显示页面内容 的信息,如果选择显示标题,那么应该在程序的每个页面中 都保留相同的标题位置, 这可以保持用户体验的一致性。
第 7 章 Windows Phone 设计元素和应用实战
Windows Phone 界面框架
进度指示器
进度指示器显示了程序内正在进行的与某一动作或事件 相关的执行情况,例如下载。进度指示器被整合进了状态栏, 可以在程序的任何页面显示。Windows 应用包括不确定进 度栏、进度环以及确定进度栏。
第 7 章 Windows Phone 设计元素和应用实战
Windows Phone 标准控件
搜索
搜索是用户可以在应用中查找内容的最常用方法之一, 本文中的指南介绍搜索体验、搜索范围和实现的要素,以及 在上下文中搜索的示例。 1.输入:文本是最常见的搜索输入模式,其他常见的输入 模式包括语音和相机。 2.零输入:在用户已激活输入字段之后却未输入文本之前, 可以显示所谓的“零输入画布”。零输入画布通常显示在应 用画布中,以便自动建议在用户开始输入查询时替换此内容。 3.查询规范化/ 自动建议:只要用户开始输入,查询规范 化便开始替换零输入内容。当用户输入查询字符串时,系统 将为他们提供一组不断更新的查询建议或消除歧义选项。
第 7 章 Windows Phone 设计元素和应用实战
Windows Phone 系统特点
通用Windows 应用史
通用 Windows 应用是一种基于通用 Windows 平台 (UWP) 构建的 Windows 体验,它首次作为 Windows 运行 时在 Windows 8 中引入。用户希望其体验在所有设备上均 为移动版,并且希望使用现有的最方便或最高效的设备完成 任务,此理念是通用 Windows 应用的核心。 通过 Windows 10,可以更加轻松地为UWP 开发应用, 并且只需一个API 集、一个应用包和一个应用商店,即可访 问所有 Windows 10 设备,包括PC、平板电脑和手机等。 对许多屏幕大小以及各种交互模型的支持也更加轻松。

第3章构建WindowsPhone开发环境精品PPT课件

第3章构建WindowsPhone开发环境精品PPT课件

图3现有连接的管理
图4“单位URL例外”页
图5“单位URL例外”页
面 “连接”页面上的所有设置,都可以通过XML(Extensible

Markup Language)配置API部署到设备上。
实例—建立自己的连接
❖ 点选“Internet设置”下面的“添加新调制解调器连接 ”来打开“新建连接向导”(如图1所示),您可以在此配 置您的新连接。
图11 IE代理设置 经过以上设置,即可使用手机带PC机上网
使用桌面间接连接
❖Microsoft ActiveSync是一个在桌面 Windows操作系统上工作的应用程序,用于与 运行有Windows Mobile的设备进行连接与同 步。在Windows Vista操作系统中, ActiveSync的外观发生了一些改变,并更名为 Windows Mobile设备中心,但其底层仍然是 ActiveSync的技术。
安装模拟器步骤
❖第一步ActiveSync(Windows XP)或移动设 备中心(Windows Vista/7)
❖第二步Windows Mobile 6 Professional SDK Refresh
❖第三步Windows Mobile 6 Professional Images (CHS)
❖第四步Windows Mobile 6.5 Professional Developer Tool Kit (CHS)
❖ 若配置过网络连接,那么在“设置”对话框的“ 任务”选项卡上,将会出现“管理现有连接”选 项。其会显示一个连接列表(如图3所示),您可 以编辑和删除连接,或者设置默认连接。“自动 选择”选项,使得系统可以为您选择连接。
❖ 在“设置”对话框中“连接”页面的“任务”选 项卡上,“单位网络”区也包含一个与定义拨号 连接类似的选项。在这个区中,您可以创建VPN 连接,其会提供一个现有公共网络连接上的专用 信道。

Windows Phone 7设计模板

Windows Phone 7设计模板

Windows Phone 7设计模板Contents应用程序面板和应用程序菜单(application bar & application menu) (2)按钮(buttons) (3)复选框(check box) (6)上下文菜单(context menu) (7)日期选择按钮(date picker) (8)对话框(dialog boxes) (9)编辑框控件(editor control) (11)硬件(hardware) (11)图标(icons) (12)键盘和输入(keyboard & input) (13)列表选择框(list picker) (15)列表控件(list view) (15)全景控件(panorama) (17)全景背景(panorama backgrounds) (17)选择框(picker box) (18)枢轴控件(pivot control) (19)进度指示器(progress indicators) (19)快速跳转网格(quick jump grid) (21)单选按钮(radio button) (22)提示器(reminders) (23)滑动条(slider) (23)开始界面和应用列表(start & app list) (24)启动瓷砖(start tiles) (25)状态栏(status bar) (26)主题(theme) (27)时间选择控件(time picker) (28)土司通知(toast notifications) (29)开关(toggle switch) (30)应用程序面板和应用程序菜单(application bar & application menu)应用程序面板为改进大多数普通任务和应用程序视图提供了一个地方。

至少对于普通任务,应用程序可以包含一个单独的菜单,该菜单可以用于启动该应用。

应用程序菜单不是必须的,但如果你的应用使用了一个菜单,该菜单就必须和应用程序面板结合使用。

Windows Phone app

Windows Phone app

Windows Phone设计过程与其它的网站、移动app或任何设计没有本质不同。

所有的设计师重视设计过程,用他们自有的方式调整、完善设计,并改变适用于每一个项目。

没有项目是相同的,因此非常重要的是以指南(guidelines)理解设计过程而不是规则(rules)。

保持灵活性(flexible)。

理解“设计”,设计不是按快门(one-shot)这类活动。

你不能凭借一次尝试既确定设计,而是像创作雕塑作品,有一个迭代过程。

艺术家拿到一组大理石,他们不会从细节开始,如眉毛、指甲或者头发。

而是第一步先塑造整体的感觉,主要的体感与大块。

接着第二步定义更多的特性区块,如手臂、胸、头与腿。

随后有第三步、第四部与第五步。

达到刻画小细节的程度需要经过许多步骤。

用户体验设计同理。

你不能从细节开始,最终会让你自食其果。

应用程序流程(Application Flow)需要在视觉设计(Visual Design)前定义。

我看到过许多类似事情的发生,他们尝试跳过一些步骤走捷径,而缺乏设计探索(design exploration)最终得到的是随后项目中的暴怒。

应用主题(App T heme)我们从应用主题开始。

这个是第一个可能产生分歧的点。

我只是知道应用主题对于创建接下来的阶段非常重要。

我注意到当开始app设计过程我们通常有两个选择。

1,已经有一个我们想做的、非常清晰的idea;2,我们有一个目标,基于现有的API与Web Service。

但两个途径在我看来都是错的。

如果你有一个清晰的idea,你知道你决定了自己与团队的解决方案,但还没有通过探索验证。

如果你决定创建一个app基于现有的API或者Web Service,你会最变成另外一个Twitter、Yelp!或者Foursquare 客户端或者另一个从Yahoo获取数据的股票软件!金融或者另外一个从CNN获得内的RSS聚合器……从Marketplace上搜索CNN你就知道我正在说什么。

MCTS-5 Windows Phone 7手机程序开发

MCTS-5 Windows Phone 7手机程序开发

MCTS-5 Windows Phone 7手机程序开发培训目标:掌握SilverLight应用程序的开发知识掌握数据访问应用程序的基本原理和使用掌握WindowsPhone7应用程序开发掌握Visual Studio 2010中建立和调试、发布WindowsPhone7应用程序课程大纲:第一章:Windows Phone7应用程序开发简介目的:理解WindowsPhone7系统的基本原理,掌握手机应用程序的基本技术和架构1WindowsPhone 7手机配置2框架与技术组成3Metro设计语言4屏幕与输入设备第二章:WindowsPhone7开发环境目的:学习Visual Studio 2010和Expression Blend4 环境的使用1开发环境选择2Visual Studio 2010 Express For Windows Phone 概述3Expression Blend 4概述4WP模拟器的使用第三章:WP7程序布局设计目的:了解WindowsPhone7手机的界面设计原则1红线准则”2创建手机屏幕的布局3各种控件的使用4资源,样式和主题第四章:动画效果目的:了解WP7程序的动态效果实现技术1视觉与动画效果管理2行为模式3动画的创建4动画控件,全景与枢轴第五章:手机方位管理目的:理解手机程序的方向概念了解手机程序的输入处理和应用程序栏的创建和使用1设备方向的概念2屏幕输入设备3应用程序栏4系统托盘与设备管理第六章:屏幕导航目的:理解WP7程序的屏幕导航机制,学习页面布局和架构的设计及后台处理技术1页面布局与架构定义2屏幕导航3后台处理第七章:图标与通知目的:掌握屏幕平铺图标的显示与管理,了解手机推送通知机制1平铺图标的设置与显示2程序通知处理3错误处理第八章:WP7 中的任务管理目的:掌握WP7 程序中的典型任务处理机制,了解基本的手机功能实现1应用程序与任务处理2手机照相功能3电话管理和短信息管理4后台程序和自启动服务第九章:触屏技术和输入技术目的:理解手机屏幕的触屏技术,掌握建立友好界面的用户体验,了解单点触控和多点触控技术1手机的用户体验2屏幕与触屏技术3单点触屏与多点触屏4输入与管理第十章:重力感应和震动机制目的:理解WP7应用程序的震动管理和摇晃处理机制1加速度计2震动的设计与实现3WP7 重力感应机制第十一章:音频处理程序目的:理解WP7程序的音频与媒体播放的概念,掌握在WP7程序中实现媒体播放和控制1媒体播放2录音与音频管理3收音机与FM调谐第十二章:GPS功能目的:理解手机的卫星定位机制和原理,创建基于地图的GPS应用程序1地理位置服务概述2调用bingMap功能第十三章:与Web 的交互目的:掌握WP7中的网络连接技术,实现Web功能1管理连接状态2使用WebBrowser3使用MultiScaleImage控件4手机上Web的身份验证机制第十四章:使用云服务目的:掌握云服务的概念,实现用WP7程序连接服务器1WP7的HTTP请求2使用WCF/ASMX服务3实现数据通信功能第十五章:数据处理目的:掌握WP7的数据处理和绑定功能,实现交互式数据应用1数据绑定于显示2基于数据的设计和处理3数据的转换第十六章:数据存储目的:掌握WP7的数据存储机制,实现数据缓存和同步1WP7的数据存储机制2独立数据存储的实现3数据缓存4同步数据第十七章:常用框架目的:理解MEF,MSAF等应用框架,利用现有的框架组件应用1Managed Extensibility Framework概述2组合应用程序3MSAF框架的使用4测试与维护第十八章:WP7程序安全性目的:掌握WP7的中的数据保护机制,了解传输数据的安全性开发1设备的安全性管理2传输的数据安全性3身份验证机制第十九章:XNA游戏开发目的:理解XNA机制与实现,掌握实用XNA进行游戏开发的基本原理和技术1XNA简介2XNA程序的图形动画处理3游戏中的3D效果实现第二十章:程序调试与发布目的:掌握在开发环境中调试WP7程序,实现WP7程序的发布和部署1设备调试技术2应用程序迁移3程序兼容性设计4性能优化技术5程序的发布和更新。

设计原汁原味的Windows Phone应用

设计原汁原味的Windows Phone应用

USA Today中对于全景视图的使用全景视图设计上类似于Windows系统中的多窗口事件,每个窗口中打开的可以是不同的软件。

所以全景视图中可以放置文字、图片、瓦片等等所有可以承载的内容,每个页面中的内容、布局、甚至操作都可以有所不同,每个页面右侧露出的边沿恰恰构成了切换标签的最佳隐喻(见下图)。

这样的特性正好对应于iOS或者Android系统应用最为常见的一级导航,所以我们在设计Windows Phone应用时完全可以大胆的将这两个平台应用的一级架构直接移植过来。

Windows Phone的设计不太推荐一个页面中出现二级标签(也是可以支持的,但是那样就不够原生,不在本文讨论范围),这就需要设计时将内容尽量扁平化,在尽量少的层级内完成相关的操作,这一般是我们设计应用时比较花心思的地方。

全景视图中每个界面中放置的内容也可以有两种展示方式,纵向展示多用于内容较多或信息流类内容,纵向理论上可以“无限长”;横向展示多用于内容量及布局固定,希望一次性展示完毕的内容,其纵向不可操作,横向可做多屏拼接。

如下图,Xbox LIVE栏目使用的即为横向展示方式(覆盖区域为栏目范围,框选区域为一屏显示范围),其他栏目使用的是纵向展示方式。

全景视图中可以模拟主屏幕中的瓦片及动作效果,不过微软没有把1*2的长方形瓦片使用权限开放给开发者,对此我们可以使用自己绘制的方式进行效果模拟。

全景视图中不同界面内容及操作不同,则其对应的功能菜单肯定也有一些区别,解决这个问题可以在界面之间切换时设置一个操作菜单收起的动作,到下一界面再次展开时显示该界面对应的操作即可。

枢轴视图(Pivot)的正确使用枢轴视图设计上类似于Windows系统中的多任务事件,在一个软件中开启多个并列任务,每个任务。

windowsphone开发定制控件

今天我们来探讨如何制作一个不同以往的Button控件,姑且称之为:ImageButton。

在编写Windows Phone 7 应用程序的时候,我们经常会遇到这样的需求,就是要制作一些图片型按钮。

相信有些朋友一定尝试过把Image控件当做标准Button控件的Content,但结果如何呢?应该不尽如人意了吧。

最大的问题在于,系统默认的Button的风格,会让按钮在被按下去的时候,让填充的颜色取系统的前景色,造成按钮中的图片不可见,并且有令人不适的“闪烁”效果。

既然这样的需求比较普遍,我们不如专门自定义一个控件出来。

在开始动手之前,我们先看一看实际运行后的效果:整个按钮的效果就是:当用户点击按钮时,按钮图标略微变小、变淡,与此同时,按钮的背景处有另一个图标一边扩散、一边淡出。

接下来,我们就开始动手制作这样一个ImageButton 控件。

第一步:编写自定义控件类制作一个自定义的控件,首先要从编写控件的类开始。

既然我们要做的是一个按钮控件,就让它继承自标准的Button控件,从而获得Button已实现的诸多功能(例如:Button 的Click 事件)。

在Visual Studio里,创建(或打开)一个Windows Phone 7 项目,添加一个类。

代码如下:01 public class ImageButton : Button02 {0 3 public static readonly DependencyPropertyImageSourceProper ty =4DependencyProperty.Register(05 "ImageSource",06 typeof(ImageSource),07 typeof(ImageButton),08 null);0910 public ImageSourceImageSource11 {1 2 get { return (ImageSource)GetValue(ImageSourceProperty ); }13 set { SetValue(ImageSourceProperty, value); }14 }15 }在上面定义的ImageButton 类里,我们只声明了一个属性,就是ImageSource,它是用来为我们的ImageButton 控件指定图片资源的。

Windows Phone 云应用开发实践之(一)Windows Azure

Windows Phone 云应用开发实践之(一)Windows AzureWindows Phone 云应用开发实践(一)Windows Azure平台概述Windows Azure TM是一个云服务操作系统,为Windows Azure 平台提供开发、服务托管和服务管理环境。

Windows Azure通过微软的数据中心为开发人员提供以按需的计算能力和存储能力去托管、扩展和管理互联网上的应用程序。

Windows Azure平台是微软数据中心托管的云服务平台,提供可高度扩展的处理和存储功能、关系数据服务和可用于构建Windows Phone应用程序的高级数据订阅。

Windows Azure 是一个可扩展的平台,它支持多种语言并且和你现有的内部部署环境集成在一起。

在Windows Azure上创建应用程序和服务, 开发人员可以利用他们现有的Microsoft Visual Studio®专长。

同时,Windows Azure支持流行的标准、协议和语言,包括SOAP、REST、XML、Java、PHP和Ruby。

有关构建使用Windows Azure中云服务的手机应用程序的资源,请下载Windows Azure for Windows Phone工具包。

工具包中包括用于Windows Phone和Windows Azure的Visual Studio项目模板、为在手机上使用而优化的类库、示例应用程序和文档。

下载地址: / 。

要运行工具包中的项目模板和示例解决方案必须安装下列组件:l Microsoft Visual Studio 2010 Professional (or higher) or both Microsoft Visual Web Developer 2010 Express and Microsoft Visual Studio 2010 Express for Windows Phonel Microsoft MVC 3l Windows Phone SDK 7.1 Release Candidatel Silverlight for Windows Phone Toolkitl Internet Information Services 7 (IIS7)l Windows Azure SDK for .NET –November 2011l Windows Identity Foundation Runtimel Microsoft SQL Server 2008 R2 Express (or higher)l Entity Framework 4.1 Code Firstl Internet Explorer 9 (or any other modern Web browser supporting HTML5)注意:工具包中包含配置向导,配置向导检查和安装以上列出的组件。

Windows Phone开发入门教程_wdxtub_CodePlane


CodePlane
- 27 - 29 - 29 - 29 - 30 -
WINDOWS PHONE 7 高级主题
传感器 加速计 Compass Gyroscope Vibration 计划任务 不支持的 API 需要注意的 API 限制 后台代理 闹铃与提醒 后台传输与后台音乐 本地数据库 开发流程 Database Schema Upgrades 性能和最佳实践
注册成为学生开发者
为什么需要注册成为学生开发者呢,因为只有注册成功了,才能在市场上发 布应用。针对学生微软提供了一些优惠,例如不用交每年 99 美元的注册费用, 虽然我们不能发布收费的应用,但是有一个市场,让用户去检验我们的应用, 也 很不错了。具体的注册和发布教程可以查看下面这两个网页: /zh-cn/hh678673 /zh-cn/hh678674 都注册好之后,我们就准备开始真正进入 Windows Phone 7 的大门吧!
CodePlane & MAD -4SYSU
Windows Phone 7 开发入门教程
CodePlane
面,并且基于 silverlight 的机制,我们获得了类似 ios 的沙盒的机制,一个应用 程序只能访问自己的东西,相当于每个应用都有自己独立的文件系统。 好了,如果遇到不明白的缩写,上网搜搜吧,相信大家很快就能明白了。
Silverlight 介绍
可能大家对于 silverlight 不甚了解,不过真正做开发的时候,似乎我们也并 不需要特别去在意这个问题, 但是因为我们是在这个上面进行开发,最好还是要 了解一点相关的东西。 Silverlight 是 WPF 的一个子集, 准确的来说, 是一个更加适应 Web 的 WPF 子集。问题又来了,WPF 是什么?能吃么? 不能吃,WPF 的全称是 Windows Presentation Foundation,是微软推出 的基于 Windows Vista 的用户界面框架。这话太空了,总而言之,言而总之, 就是换了一个绘图引擎的图形界面,从原来的底层 API 换成了现在的 DirectX, 并且可以比较容易的实现界面和代码的分离。 好,这才是重点,重点就是界面和代码的分离。无论是 android 的 xml 还 是 ios 的 xib,都是为了解决同一个问题,就是实现 MVC 的模型,MVC 在我看 来的精髓就是各个组件的独立, 可以分别进行开发,而不是像一锅粥一样牵一发 而动全身,现在可以做到后台代码不改变但是界面部分天翻地覆,这就是关键所 在。 言归外传,Silverlight 在 Windows Phone 7 上又是一个比较特别的集合, 大部分是原本 silverlight 的子集,而又根据手机平台的特殊性,加入了一些原 来本不属于 silverlight 的东西,所以对于 silverlight,我们真正用到的并不是其 本身,而是 silverlight for windows phone。再具体一点,我们用这个来做界

Windows Phone 8 UI 设计指南

Windows Phone 8 UI 设计指南最近在准备Windows Phone 8的设计工作,寻找资料时看到这篇文章,感觉有点像是MSDN里design guide的总结,是快速入门WP设计的绝佳文献,由于本人对WP的理解还不够深,而文章中有很多WP的专有词汇和描述,所以翻译难免有误,希望大家指正。

我很羡慕Windows 8的团队,他们有自己专属的设计指南,指引人们构建出完美的Windows商店应用。

因此,我决定要成为先行者,为Windows Phone 8做点类似的事情。

这有一个推荐清单,列出了那些你在搭建windows phone应用时应该考虑的事情。

此清单并不详尽,仅做参考。

这篇文章是参考了多处资源整理而来,大多来自WPDPS (windows phone depth partner support),它们基于大量的应用审核和案例研究,这是一个非常好的资源库。

而正是因为我发现这里的东西并非公开共享的,才促成我整理这些资源外加写一些小贴士来分享给大家,它们并不是什么新的东西,只是不易被看到或是了解。

再次感谢WPDPS,也期待有越来越多这种有用的资源可以体现到windows phone的开发中心。

1. 元素对齐与边距所有的页面都应遵循左边距12px或24px。

内容,标题,标头以及标头的图标也应左对齐,距离左边界为12px或是24px。

如果有需要进行右对齐,右边距也应该是12px或是24px。

小贴士:在调试模式运行应用时,你可以查看由25*25红色方块组成的半透明网格。

这些方块是以24px边距填充页面的,并且他们之间的距离是12px,这也恰恰体现了windows phone设计方块的魔力。

这些网格可以帮助你迅速找出任何对齐的问题。

当列表的字段与数值成对出现时,应以两组左对齐的队列出现,或是像系统联系人应用中详细信息页面的设计那样,标题在内容的上方。

2. 元素间距元素的间距应该在水平和垂直两个方向上保持一致。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Windows Phone面试也有很长一段时间了,其简洁的视觉风格,完全区别于iOS及Android 稍复杂点,可以在瓦片中显示一些静态或动态的图片、文字信息。

不过要注意一点,
不仅如此,瓦片并不是一个固定的模块,系统提供了很多翻转、推动之类的切换效果,这意味这我们可以将其视为正反两面进行看待,正面延续之前所说的设计方式,主要展示应用名称、logo 及一些必要信息,反面就可以灵活放置我们想展示给用户看的内容,这就给设计师提供了很广阔的空间,想放什么?尽情开动脑筋吧。

不过也有一点需要注意,目前来说,瓦片切换的动作及时间间隔是开发者不可控的,所以瓦片背面放置的东西还是应该尽量以简洁为主。

Windows Phone 7.5(芒果)系统中提供了一个新的功能,就是可以把应用中的操作或内容模块发送到桌面上形成瓦片,方便用户快速进入需要的内容或操作,如微博客户端的发微博操作或者某一分组的微博内容。

这就需要设计师在设计前就想好哪些操作用户可能需要快速触发,而后告诉研发同事在相应的地方设置好发送到桌面的操作。

细心的用户还会发现,系统自带的联系人功能在瓦片中是以一种很炫的九宫格的方式进行展示的,整个瓦片被拆车3*3的小块,以每一个小块为单位进行切换,还会将相邻四个小块拼成一张大图。

可惜微软官方没有将这个设计权限开放给开发者,可能是考虑到主界面运行效率和整体效果的的因
素吧。

这是个小小的遗憾,期待之后能用到这个效果设计出比较酷的瓦片展示方式。

下图所示即为九宫格效果:
在瓦片效果的使用上,USA Today就做得非常出色:模拟了九宫格试布局,正面使用icon及新闻图片的拼接图,在反面展示了天气信息,效果很好。

全景视图(Panorama)的正确使用全景视图模型展示
USA Today中对于全景视图的使用
全景视图设计上类似于Windows系统中的多窗口事件,每个窗口中打开的可以是不同的软件。

所以全景视图中可以放置文字、图片、瓦片等等所有可以承载的内容,每个页面中的内容、布局、甚至操作都可以有所不同,每个页面右侧露出的边沿恰恰构成了切换标签的最佳隐喻(见下图)。

这样的特性正好对应于iOS或者Android系统应用最为常见的一级导航,所以我们在设计Windows Phone应用时完全可以大胆的将这两个平台应用的一级架构直接移植过来。

Windows Phone的设计不太推荐一个页面中出现二级标签(也是可以支持的,但是那样就不够原生,不在本文讨论范围),这就需要设计时将内容尽量扁平化,在尽量少的层级内完成相关的操作,这一般是我们设计应用时比较花心思的地方。

全景视图中每个界面中放置的内容也可以有两种展示方式,纵向展示多用于内容较多或信息流类
内容,纵向理论上可以“无限长”;横向展示多用于内容量及布局固定,希望一次性展示完毕的内容,其纵向不可操作,横向可做多屏拼接。

如下图,Xbox LIVE栏目使用的即为横向展示方式(覆盖区域为栏目范围,框选区域为一屏显示范围),其他栏目使用的是纵向展示方式。

全景视图中可以模拟主屏幕中的瓦片及动作效果,不过微软没有把1*2的长方形瓦片使用权限开放给开发者,对此我们可以使用自己绘制的方式进行效果模拟。

全景视图中不同界面内容及操作不同,则其对应的功能菜单肯定也有一些区别,解决这个问题可以在界面之间切换时设置一个操作菜单收起的动作,到下一界面再次展开时显示该界面对应的操作
即可。

枢轴视图(Pivot)的正确使用
枢轴视图设计上类似于Windows系统中的多任务事件,在一个软件中开启多个并列任务,每个任务的结构、布局、操作方式都非常接近。

枢轴视图中内容占据全屏位置,标题位置展示之后的一个或几个页面对应的内容。

这个特性可以对应到iOS或者Android系统应用的二级导航或标签切换,
是Windows Phone应用中经常出现的效果。

枢轴视图中,点击上部的标签或者左右拖动屏幕均可进行标签之间的切换,每个标签下所对应的内容在结构布局上最好保持较高的一致性。

交互逻辑上的控制
之前讨论过,Windows Phone的架构要求我们在设计时尽量扁平化,尽量压缩架构的层级,但很多操作需要到三级或者更深层级有时也是不可避免的,那么尽量让用户使用尽可能少的操作就回到更高层级的交互逻辑就显得比较重要了。

方案一:合理规划“返回”
微软推荐开发者引导用户使用实体返回键而不是返回按钮进行返回操作。

返回键触发的操作可以定义为“返回上一状态”或“返回上一层级”,在合理的前提下,将枢轴视图或最终内容浏览状态下的返回操作都定义成“返回上一层级”,就会大大压缩返回操作的触发次数。

方案二:直接返回主页面的按钮
如果页面跳转的层级很深甚至产生循环嵌套,不妨在对应页面的操作菜单中直接加入一个“返回主页面”的按钮,方便用户完成操作后快速回到主页面。

以上分析是基于一个比较宏观的范围,实际设计中肯定还会有很多细节方面需要不断推敲完善,也有很多实际情况需要特殊的处理方式。

这些需要我们在设计的过程中深入的思考,不断的分析,最终形成完善合理的设计方案。

写的比较肤浅,如果有不准确的地方,欢迎大家指出。

人人都是产品经理()中国最大最活跃的产品经理学习、交流、分享平台。

相关文档
最新文档