时尚互动杂志的 Windows Phone 开发感触

时尚互动杂志的 Windows Phone 开发感触

时尚互动杂志是最早跟进 Windows Phone 平台的应用之一,作为第一批进行 Windows Phone 平台开发的媒体,同时也是 Windows Phone 的先驱开发者,时尚互动杂志的开发经验,对同行来说有着难得的参照价值。以下是来自时尚集团的工程师刘琳琳对时尚互动杂志开发经验的分享。

移动设备上的时尚与互动

新时代新定位

杂志在大众生活中占据着一个很重要的地位,时尚杂志更是扮演着引领大众消费意趣、社会文化的分解与融合,并让读者体会多彩生活之美的重要角色。而随着时尚内涵的不断扩展,时尚杂志的定位也从以前的服装服饰化妆及女性杂志延申至基于美容居家美食以及书影音的物质与精神都包含的生活方式与态度。

新设备新难题

时尚杂志新的定位也带来了新的难题,那就是如何在当今各种新颖的移动设备上满足读者需求,将感受和体验提升至能够展示出时尚杂志核心竞争力的位置。例如在手机杂志上看到一款时装图片后,如何查看这种时装的颜色搭配、特色是什么、模特身上其他配饰是什么等信息。时尚互动杂志的解决方法师通过点击和展开交互按钮来完成这些操控。

这一点是传统杂志无法做到的,因为交互元素可以让读者以一种有控制权的方式出现,同时改变读者作为信息接收者的传统地位,还可以给读者提供一种更富于乐趣的探索过程。而对于信息发布者来说,可以利用交互杂志来与读者进行互动传播,同时还可以与读者进行及时的交流,及时的沟通,这种与读者之间的连动性不仅可以消除与读者之间的隔膜还可以扩大规模效益。

时尚互动杂志在 WP7 平台的产品特点

刘琳琳表示 Metro UI 风格其实就是一个比较简洁高效的方式让用户更直接的获取自己所需要的信息,因此首先要摒弃传统杂志的那种导航模式,采用Metro 风格的这种目录,这样才能用最短的时间提供更高的效率。

 时尚芭莎 Windows Phone 客户端

Metro UI 的三个特色

1. 全景视图

全景视图可以通过清爽的排版和视觉焦点的引导给人以身临其境的感觉(使用 Panorama 控件)

2. 活动格窗

活动格窗可以让核心内容取代形式,给用户更加直观的视觉效果,显示效率更高。

3. 无边框设计

通过改变字体大小、前后颜色无边框设计配以留白的展现方式可以让杂志内容以一种自发性质的风格来分割开,不仅简洁美观,更使得读者有更广阔的视野并减少思考和检视成本。

Metro UI 互动效果

刘琳琳认为 Metro UI 的互动效果能够给用户提供丰富的信息量并带来强烈的视觉听觉冲击。主要表现在以下三个方面。

1. 页面交互:淡入淡出、惯性滑动、擦拭效果、3D翻转
2. 媒体元素:音频、视频、网页、微博
3. 交互控制:按钮、手势

此外刘琳琳还提到在设计用户互动效果的时候还要遵循简单原则,即进行设计的时候首先要考虑的就是简单明了,让用户不需要任何指导就可以通过交互元素图片信息来获取关于这些交互来操作这个交互元素。

时尚互动杂志在 Windows Phone 平台的开发经验

1. 使用 Panorama 控件

突出简洁排版和视觉焦点的引导给人以身临其境的感觉。(全景视图)

2. 动态加载

摒弃一次性把所有需要的资源全部加载进去的做法,而是根据用户的阅读操作实现动态加载相应页面(与 lazyload 类似),及时销毁过期及不用的资源,这样可以一定程度上减少系统消耗,同时不影响用户的阅读体验。

3. 事件广播机制

采用平台所提供的委托代理机制,建立一个统一的事件广播中心来派发事件,实现各个互动元素间的交互,让程序看起来层次更加分明,对后期维护及功能完善也更简单便捷。

4. 内嵌媒体播放

刘琳琳提到她们原本是想用 Windows Phone 系统自带的视频播放器来做视频效果的,但是由于它无法设置属性是水平还是数值,因此最终用 Media Element 控件来自建了一个简易视频播放器来实现媒体播放和 Web 浏览等功能。

时尚互动杂志在 Windows Phone 平台开发感触

1. Windows Phone 兼备了 iPhone 和 Android 平台优点,同时摒弃了 iPhone 的硬件独立性和 Android 的版本混乱问题;

2. 可视化的界面编辑器 Visual Studio 和 C# 技术快速易学,界面简洁,效率颇高;(互动杂志两个人开发一个月完成)

3. 深度整合微软服务,开发工具兼容性好,资源丰富,技术支持度高。

整理自时尚集团工程师刘琳琳在第 26 期极客活动上的分享,点击观看视频

极客活动时尚集团
下载极客公园客户端
iOS下载
反馈