同步技术的应用趋势

年中Apple发布了icoud,基于原有的MobileMe功能全新改写而成,提供了原有的邮件、日历和联络人同步功能。可见其中重要的功能就是同步,越来越多的手机和应用程序中都在应用同步,那同步的技术原理和未来应用趋势是什么呢?

同步可以理解为保持多个设备中数据一致,需求可能来源于以下几种常见场景:

1.用户频繁地使用USB导入和导出数据,比如图片、电影和音乐等文件数据。

2.用户需要保证多设备之间的数据一致,随时调用最新的数据。多人也可以协同编辑同一文件。

3.设备遗失或者更新之后,数据可能也随之丢失。数据同步到网络服务器,可以保证数据的安全。

随着数据本身和用户多设备的增加,同步的需求越来越为强烈。而数据同步并不是一件简单的数据传输过程,涉及到复杂的算法。数据同步算法的重点是提高效 率和节约网站宽带。对于单一文件的同步容易实现,只有文件的上传和下载,当文件增多和文件本身可编辑时,数据不可以整块处理。

技术原理简单描述是 :

1.文件切分,将分割成连续不重叠的固定大小数据块。

2.切分数据块信息描述,对分割的数据形成描述文件。

3.差异编码,两端比对文件差异。

4.差异编码信息描述,将差异转化为文件。

5.文件同步,根据差异描述文件传输不同的数据。

数据同步可以分为Pull和Push两种应用模式。Pull是将远程数据同步到本地,而 Push是将本地数据同步到远程。配合使用可以实现数据的自动同步,如icloud本身并没用复杂的操作,并不像数据库备份一样形成多个版本,自动化保持所有终 端的数据一致。

同步可以作为应用程序的一项功能,如日历同步,平台开放自己的接口,让开发者在此基础上作出更多更丰富的应用程序。而同步也可以作为一项单独的产品。

按用户需求和功能的重点,个人将同步产品只要分以下几种:

1.以应用程序的数据同步为主,再逐步发展为平台型产品,如icloud。

早期同步只是ios应用程序中的一个功能,ios5之后将同步功能多消息、邮箱和图片等应用中提炼出来,形成一个统一的产品形象icloud,先满足用户的媒体文件和终端数据的同步需求:音乐、照片、应用程序、日历和文档,之后再强化云存储等功能,为未来的云计算做铺垫。icloud可以开放开发者做数据备份和存档,如交易数据,log数据和用户访问的数据等。

2.而Evernote、麦库和有道笔记以笔记资料为主,快速捕捉生活和工作中的零碎信息。 这类产品提供丰富并且快速的录入方式,数据本身体积也不大,比如网站截取、 拍照,手写和手动输入等。根据用户的使用方式,扩展成为工作笔记、信息备忘和知识管理等工具。

3.以存储和同步为主,Dropbox和金山快盘等网盘直接和PC端的文件夹打通,不分特定类型的数据。

因为与系统文件互通,操作方式也与系统文件一致,学习成本非常低。面前采用类似于Flickr的免费使用加高级收费模式,比起以上的同步产品,更注重存储空间。对于已经从Dropbox得到方便的用户来说,当同步需求增加时,他们比起全部转移文档,更倾向于付费来继续使用。

Dropbox的发展和icloud一样有逐步发展的过程。如早期展示的二进制差异同步,只能实现非压缩格式的图片bmp的同步,而不支持jpg等格式的图片,还有限定只能同步一个文件夹,而同期的Syncplicity试图支持多格式图片和多文件,但是由于短时间内无法完全规避复杂产品逻辑带来的bug。

当Syncplicity支持了Windows,发布之后众多高端用户只使用Mac。Dropbox限制自己产品的特性,保持简单和专注,一时抢尽了风头。因为云存储将资源集中管理,成本在众多用户之间分摊,Dropbox的存储成本将被无限降低,目前正以年增长10倍的速度快速成长。

4.面向企业用户的以存储为主要需求的产品,如box。虽然和Dropbox看起来比较相似,但切入点和目标用户群不一样,box偏向于多人协作和分享的企业用户,而Dropbox等网盘是面向个人的数据同步、存储和分享。

5.数量级更高的云存储产品。除了面向用户不同,云存储和网盘功能上存在一定差异。

在功能上,云存储专门提供数据对象的存放和读取功能,但不负责帮助用户组织数据。云存储的目标很简单:保存用户的数据,保证可靠、准确,以及服务可用,云存储的的数量级比网盘高的多。

网盘有频繁的数据修改等操作,必须提供完整的数据组织模型。但因为引入复杂的数据组织模型,网盘的数据可靠性、数据一致性和服务可用性与云存储存在数量级的差别。而云存储将数据存储和数据组织分开,从云存储获取存储服务,从数据库实现数据组织,保证数据的可靠性和可用性。

技术理解可能有误,欢迎指正

浅析手机Web App的交互设计

HTML5为提高手机网页的体验提供了诸多的可能性,交互效果越来越接近原生App,故而成为Web App,有望将APP功能引向浏览器,让移动平台的竞争由系统平台转向了浏览器之间。

Web App比起原生App和wap有着自身的优缺点,先简单了解下其特点,掌握设计趋势,也便于以后在设计中应用。

离线存储

离线存储的意思是第一次访问是下载网页,以后在无网络的情况下也可以使用。一个离线应用程序就是一个URL列表–HTML,CSS,JavaScript,图片,或者其他类型的资源。访问时探测到服务器列表的缓存名单时,会触发下载事件,根据名单下载指定的文件存储到本地。

 

在下载的同时,浏览器将会周期性的触发进度事件,此事件包含了诸如多少文件已被下载,多少文件仍然处于下载队列等信息。当缓存名单中所有列出的资源被成功下载后,浏览器触发下载完成事件。

当再次访问时,浏览器会再次检查网站的缓存名单,通过对比名单和本地的资源,得知是否需要加载新资源。新版本加载完成之后不会立即被使用。后台可以下载新网页,也不会强制用户打断当前操作流程,重新刷新页面。

如果此过程中的任何一点出现可怕的错误,你的浏览器将会触发一个错误事件,并立即终止。类似于安装应用程序,中途不可以出错。

 

Web App可以利用存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。

而离线存储但也不是Web App特有的问题,浏览和阅读类App也有离线的使用需求,用来应对随时可能出现的网络问题。如离线模式是利用网络闲暇时间下载内容,当用户打开App时立即开始阅读。或者是网络不佳情况下保存用户的操作记录和加载相对重要的文字内容,之后再依次上传已更新的数据,如微博的发送队列机制。

交互操作

手机网页的操作发送只有点击,点击链接和控件,交互方式非常单一,而Web App 的操作将越来越接近应用程序。

1.Web App的建立离不开网络速度的提升,加载更多的内容,图形元素更为丰富。同时更多的JS交互,便于用户操作和形成扁平化的信息架构。

 

图标取代文字链接,界面更为美观,便于识别的。点击区域不限于元素的视觉区域,便于用户点击。同时排版不受限制,可以达到原生App的视觉效果。

 

增加标签栏,首页呈现更为的内容,减少界面的层级关系,页面关系更为明确。

 

界面可以部分更新,在需要时再呈现,减少界面的刷新,保存视觉的稳定性。

气泡框可以减少页面跳转,适合消息提醒等微任务的处理。信息架构上越来越接近原生App,有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。

 

2.识别更多的手势操作,如下拉刷新和右滑存档等平移手势。操作不必全部呈现在界面中,和平台操作保证一致。

3.调用系统硬件,如重力感应等传感器,不过在手机端还鲜有应用案例,离大规模应用还有一定的距离。

 

总之,交互上可以按照原生App的设计方式,效果将越来越接近,主要区别在于:

1.设计中要考虑到浏览器地址栏和工具栏的占有空间,和其对App的操作存在一定的影响。

2.暂时不适合调用系统底层接口,更适合web网站适配手机做的分支版本。

3.由于HTML的限制,交互的细节上存在一定的差异。

4.动效还没大规模的应用,但Web App界面操作将更为流畅,界面跳转时的平滑移动已经可以实现,以后还有更多的动效得到应用。

5.现阶段信息架构还混杂着原生App和wap两种架构方式。

参考资料:

W3C HTML5

Mobile Web Application Best Practices

HTML5离线存储

Making It a Mobile Web App

Css iPhone

Developing Mobile Web Applications and Mobile Widgets

Getting Started with iOS Web Apps

Youtube Mobile Web App

[IBM developerworks]HTML5 Web app

[晓生采访第一期]包季真:我的交互设计之路

@包季真(宗羲, 老包)

《触动人心:设计优秀的iPhone应用》译者,脉可寻客户端总监,独立电子商务用户体验咨询师。曾供职于大众点评、淘宝网和Diigo,专职的用户体验菜鸟和摄影匠。

1.先简单介绍下自己吧。

我在04年大学时期开始创业,最开始的一年内主要接外包项目,后来开始做一些自主产品,包括手机客户端和当时非常时髦的SNS和RSS Reader。06年底,我们工作室最终被Diigo公司收购

在这段创业期间,曾和学校的心理学博士后合作过项目,对心理学发生了兴趣,后又逢国内UCD理念兴起,从此走上了交互的道路。

大学除了创业,05年迷上摄影,一直在用摄影去表现生活和意识(我的博客),一开始走的路线就和大家不同。

摄影中的我暗沉、低调和颓废,和现实中的我有着极大的反差。很奇怪,呵呵,我自己也不知道为什么。

2.六年工作中是如何学习交互设计的?遇到过什么困难?

我自学了很多理论知识。刚开始是看书, 后来看了不少博客。早期在设计PK的过程中,大家都觉得我是学院派,理论一大套。后来慢慢通过实践的结合弥补了这一缺陷。另外,在淘宝的时候,认认真真写了一段时间专业文章,组织设计师写了《交互设计实用指南》,提升也很大。

交互这个东西说实话是积累,还要权衡。不但要补充理论知识,多看,还要多实践。我看到很多设计师在这三个方面可能只做到了两点甚至一点,这样的学习方式会遇到瓶颈。

3.交互设计师的缺点是什么?应该如何避免?

我从两方面来说交互设计师最常见的缺点:

一个是外在因素:交互设计师可能过多考虑用户端,对商业和技术考虑欠缺或缺乏基本常识。我们知道,一个产品的三个互相牵制的要素既是:用户、商业和技术。成功的产品必定是三个要素兼备的产品。所以作为优秀的交互设计师,我们也应该去了解商业和技术,这能极大地提升我们的思维高度和沟通能力。

第二个是内在因素:交互设计师可能不了解自己的用户。虽然我们站在用户这端,但往往不了解自己的用户是谁,他们需要什么,他们会怎么做,他们什么时候在什么样的环境中做。很多成功的产品,如果你仔细去观察,就会发现,他们对自己的用户出奇的了解,才铸就了成功。

4.什么样的交互设计师成才最快?或者说交互设计师应该具备什么样的素质?

正如我刚才提到的:补充理论知识,多看别人怎么做,多实践自己动手做。 并在紧密的团队协作,对结果负责的情况下,设计师的成长最快。

5.如何看待交互设计师和产品经理的工作职责和矛盾?

实际上,两个职位的本质都是要把产品做好。所以两者的目标并不矛盾。

刚才我提到产品的三大要素, 用户、商业和技术。交互设计师站在用户的角度,开发人员站在技术的交互,产品经理站在全局+商业的角度,于是难免会有一定的职责冲突。实际上很多时候你会发现争执到最后仅仅是为了抬杠。所以,最重要的是,当矛盾发生时,双方都可以让步,要有结论验证机制。当你(也许是产品经理)在结论验证后发现“你总是对的”,那么今后你也就有了更多话语权。还有一点很重要,谁对结果负责,谁就有拍板权。

6.你做过网页和手机交互设计,这两者之间的有哪些区别?喜欢做网页还是手机交互设计?为什么呢?

最大的不同在于本质上,两者的用户场景有很大不同。进而使得硬件上也有很大不同。虽然两者在不断得接近中,并且未来,网页和手机应用之间的界限也会越来越模糊。手机上的场景更多定位在随时随地、短暂、移动。

个人更喜欢手机交互,因为其挑战更大。网页设计这么多年来已经相对成熟,而手机交互尤其是在国内还处于萌芽状态,大有可为。

7.网页交互设计的知识和经验对你做手机应用程序有帮助吗?

有!相当有帮助。其实交互设计原理是融会贯通的。知其然,并知其所以然,你才能在任何平台上都游刃有余。

8.国内LBS在年初时涌现大量的签到类产品,但用户逐渐对其失去兴趣,而国外的foursquare发展势头良好,如何看待这一现象?

我在产品经理高峰论坛的演讲中提到过这个问题,LBS到底是LBSocial还是LBService。国内很多公司热衷于抄袭,当看到别人都做得时候,屁股坐不住也要跃跃欲试。感觉没个LBS就不好意思和别人打招呼了。

LBS是Service,是服务,是工具,是完成任务的手段,不是目的。 国外每款成功的LBS,必定有它本身的目标所在,他们看准目标,专心在一个焦点上,就有成功的道理。但是国内很多公司仅仅是效仿,常常是“做了再说”。所以没有目标,更别想用户能够有兴趣来使用。

9.什么样的LBS产品有发展前景?

服务的,满足用户需求的,解决用户问题的。

比如大众点评的“附近”功能,通过LBS,帮助用户切实解决找餐馆,找商户难的问题,提供了充足的内容,它是有价值并且有发展前景的。

产品的思路应该从需求出发,然后再回头来看有什么技术能够解决需求。而不是说今天我们要做LBS,然后开个会大家使劲想要做什么LBS呢?这就好像先去家具城随意买了个橱柜,搬回家里,再慢慢想,看是放锅碗瓢盆好还是裘皮大衣好,这明显是不靠谱的。

10.现有的手机交互设计资料非常有限,你是如何学习的?

一开始还是书。最初是HIG。建议每一做手机交互的同学都要认真阅读。后来看到了Josh的《触动人心》,确实“触动人心”了一把,学到了很多。

说实话,应用我可能看的没有某些产品经理多,但是我坚信一样也能做出好产品来。我在前面提到了几点,多看只是其中一点。很多国外应用的设计很有创意,但是每看一款应用,你都要认真去想为什么,而不是看完了事,囫囵吞枣,就像你看很多外语片,你没有基础,看多了也只能习惯听音调,没有更多特别的收获。如果你看完,吃透,并且正确地应用在你的设计中,我相信看一款应用比看十款应用要来得更加有收获。

11.为什么会翻译《触动人心》,翻译过程中最大的收获是什么?

正如你提到的,国内的手机交互资料非常少,国内的应用做得也是参差不齐。我想让国内同行们一起成长,这样大家设计出来的应用才能互相提高,最后收益的是我们自己和所有用户。

12.手机适合执行什么样的操作?你认为什么样的iPhone应用称得上是优秀?

其实最重要的是场景。经过一年多的成长,我们会了解到手机应用要符合断续的时间碎片,要了解应用场景可能是用户正在移动或需要完成某项紧急任务(微任务) 。但是最核心的是,你要了解你目标用户的使用场景。比如阅读应用,可能用户会全身关注,不受干扰地来阅读(睡前的床上),那么你的设计可能就会和其他应用设计千差万别。

一句废话,满足用户需求和期望的iPhone应用就称得上是优秀的应用。谁都知道,说起容易,做起难。

13.为什么会选择创业?

我的骨子里流着创业的血。个人兴趣爱好多,对互联网的方方面面,从服务器、数据库到创业融资都有所了解。我坚信这样的我更适合创业,而不是在大公司里开会,当“革命的螺丝钉”。

动效的交互作用

随着手机性能的提升,系统和应用程序中的动效越来越丰富,其丰富的视觉细节对于交互设计有着诸多的辅助作用,有效保证富交互的实现效果。ios和Android动效比Symbina丰富,WP7比ios简洁但更为有效和连贯,这也是Metro的优势之一。

基于PC端和网页动效设计及现有手机中动效的应用趋势,个人简要总结动效的交互作用有以下几个方面:

提供反馈。交互最为关注的是操作,而动效可以逐步展现用户的操作结果,这是动效的最主要作用。这些操作可以是:移出、添加、删除、平移、放大、缩小等等。你可以针对每项操作各个平台中找到案例。

使用动效比起文字信息反馈更为自然,比如页面滑至底部反弹,而不是弹出对话框提醒用户。


表示状态。进度条是最为常见的状态动效,确定性进度条可以表示:
1.一个耗时的操作已经开始,需要用户等待。
2.操作正在进行,没有卡死。
3.当前完成的进度,和预计可以完成的时间。

长按ios主界面,图标拖动表示当前界面处于编辑状态。或者魅族M8的充电粒子从底部进入电池内部,表示充电状态。

引导用户操作。反馈的动效需要符合用户的预期和避免引起用户过多的关注,当界面中内容很重要时,会通过闪烁和弹出等动效吸引用户注意力,比如弹出新通知和没有输入内容时输入框左右抖动的效果。

展现界面之间的组织关系。动效可以帮助用户界面界面的组织关系,比如移动时界面左右有弹性的滑动,WP7进入上下级时围绕左轴的翻转效果和ios的左右移动。

增强界面的流畅度。当内容过多需要逐步加载时,动效可以让界面看起来流畅些,减少闪屏的几率。性能容许的情况下,流畅的动效使得界面看起来更为精致。每一个元素的出现和消失都有过程。视觉设计时将界面精确到像素,而动效是将界面元素的变化精确到毫秒,毫秒中每个界面元素的位置、大小、颜色和透明度如何变化。