简单页面的华丽变身-Search App Product Design

2012年01月09日

网页端搜索引擎的简单易用一直是网页产品设计中的优秀范例。 它巧妙地利用大片留白,一个搜索框入口,链接排布形式和品牌LOGO的互相搭配,在一个页面里为用户提供了绝佳的用户体验。强大的产品特性也使其成为上网冲浪必不可少的工具之一,帮助用户挖掘到未知的网络世界。

 

随着移动互联网的快速发展,移动信息量也迅猛膨胀,用户对手机搜索引擎的需求也与日俱增。因此搜索引擎也纷纷开始酝酿自己的手机产品。和PC机相比,手机端硬件更加局限,使用场景更加多样,交互形式更加丰富,因此简单的网页页面移植已经不能满足用户对于手机搜索引擎的需求。所以简单页面也开始了华丽变身,纷纷设计了自己的独立客户端。 当将简单的页面转变为客户端软件时,应该如何设计呢?下面将会为您逐步揭晓这些产品设计的攻略。

“组织”产品架构,让品牌特性凸显出来

移动客户端的设计和网页设计不同。由于屏幕大小的限制和移动端性能的影响,产品的结构和网页相比会更复杂, 层次也会更多。产品将面临的挑战是:用户已经习惯了网页排布的使用方式,他们不愿意花费精力去适应一款全新交互的产品。那么当把搜索引擎从PC端移植到展现形式多变的手机端时,如何组织这些结构和层次,让用户能够迅速地摸清产品结构,清晰感知它的品牌特点,就尤为重要。

Google的产品架构主要由4个大部分构成,如上图所示: 搜索区域, 更多应用程序入口, 分类切换以及浏览工具栏。与网页相比,产品的组织结构更多,客户端不能再使用网页端全局静态留白的布局形式。但是设计师巧妙地利用了手势操作进行层与层之间的叠加变化,为搜索区域搭配出了和网页端几乎相同的布局形式。“Google化”的组织方式,让用户在初次使用手机Google搜索产品时就能共用网页端的心智模型,减少了学习成本。

Bing的移动搜索客户端组织方式不仅延续了它在网页上的布局特色,而且也突出了其极具品牌特色的Daily Picture 服务(每日图片推送)。 通过每天向客户端推送一张高清精美图片, 配合着图片上的附注信息, 加强了客户端与用户的互动性,同时也通过其提高了用户对软件的期待度与黏性(比如用户会有期待:明天的图片会是什么呢? 我一定要记得看看) 。

其次Bing 的一些细节上的配色使其非常具有自身移动平台Windows Phone 7的特色。 如上图所示的设置页面, Bing将iOS上的Navigation Bar和List的样式进行了重新组织布局, 和右图WP7的界面对比,是不是有异曲同工之妙呢?这样的组织设计,抓住了品牌拥护者的使用习惯,也从产品设计上体现出了自身的特点。

“拆分”信息层次,提升移动端展现效率

在PC端使用网页搜索引擎时,搜索建议会在用户输入后才展现,其中服务器会根据一定的算法将用户经常搜索的词语和服务器中常被搜索的关键字一起下发作为搜索建议。 但在移动端,因为输入成本的提高,所以, 搜索引擎客户端选择将信息层次进行了拆分。 通过分解用户在不同情况下的不同需求, 将展现的内容分阶段进行展现,实现让用户再一次输入后,有更多选择机会的目的。

Google 在关键字搜索时主要由两种状态构成。 一是触发框后进入输入模式, 此处将会显示带有图标的搜索历史记录; 二是输入关键字后,将显示搜索建议, 单击建议将对相关关键字发起搜索。 而右边的“+”号也实现了拆分搜索建议的目标,通过让合适的关键字上框, 让用户可以获得更多的搜索建议,也能发起更精确的搜索。

Bing的搜索流程与Google类似,也划分为两个阶段, 但对于细节的处理略由不同。 Bing的搜索框被触发后会显示搜索历史记录, 但是在记录是按类别进行划分, 并在底部提供书签和更多历史记录的入口。通过拆分入口的方式,为用户提供更多的点选机会。

当输入关键字后, 含有关键字的搜索历史记录会优先排列在前面并按类型进行划分,服务器下发的搜索建议,对已输入字符和未输入字符进行了高亮区分。 这样的拆分方式,让用户从视觉层面上更容易进行区分。

 

“隐藏”次级功能,让产品任务清晰。

搜索引擎在使用中,除了在搜索文本框里输入关键字后发起搜索,通过切换分类对搜索进行限定,也是搜索引擎里经常使用到的功能。但在手机端,因为屏幕大小的限制和搜索需求的变化,类型功能和主搜索任务相比,优先级会有所降低。所以在产品设计的时候会选择将次级功能隐藏起来, 这样让产品的主任务更加清晰。

 

一般的客户端在隐藏时,都选用下拉列表或者弹出气泡的方式。 而这次新改版的Google搜索客户端创新地将搜索框顶部内容和搜索分类隐藏了起来。 通过向右拨动的手势操作可以调出搜索分类, 让用户可以非常流畅地在任何场景发起搜索,并且实现分类切换的目的。通过“隐藏” 的方法让屏幕内显示的内容层次更加清晰。加强了用户和客户端之间的交互体验。

 

而Bing的搜索分类在其他页面的展现形式则隐藏在了输入框中。当用户在首页里选取了某个分类进行搜索后,那么点击搜索框里的分类可以对分类进行修改。 这种分类的修改方式可以展现较多层次,比如说对于“餐厅”这个搜索分类, 用户还可以更加细化到是通过名字,附近或者是价钱进行搜索。 但是也是因为层次的加多,用户不能预期到下次是否有分类,以及有多少层次的类别。所以对这种设计的方法要非常慎重。

 

“附加”手机产品特性,让客户端移动起来

和PC机相比,手机产品多了语音录入, 拍照摄像以及地理定位的移动产品特征。 而搜索引擎从网页端移植到手机端时,纷纷附加上了这些移动产品的特性,让客户端的搜索方式更加移动化。

 

语音搜索的流程一般是利用手机产品的麦克风触发录入语音,通过声波对比系统识别出想搜索的关键词,并发起搜索。语音搜索的引入降低了用户输入成本,也让用户能在手持客户端的情况下,边走边搜索,而关键词录入的方式更加自然,更加移动化。

Google的语音搜索在此基础上考虑了移动输入的环境特点。 用户一般在移动的情况下发起语音搜索, 因此可能会因为周围环境音的影响造成语音搜索的结果不准确。 因此在搜索结果页里,允许用户更换相近发音的词语重新进行搜索, 或是对语音输入的词语进行编辑后发起搜索。更加提高了移动搜索中,语音搜索的准确性。

拍照搜索则允许用户通过手机摄像头拍照后发起搜索。用户对一张图片拍照后,拍照搜索可以从三个维度对图片进行识别, 一个维度是图片上的物体,对物品发起相关搜索,如购物搜索或者地点搜索;二是相同或相近的图片,主要是从颜色和图片主题进行搜索; 三是图片上的文字信息,选择这一维度,用户可以选择对文字信息进行翻译或者搜索等垂搜操作。 拍照搜索帮助用户将搜索图片化,用户可以走到哪里拍到哪里,搜到哪里。让搜索可以无处不在。

综上所述。当搜索引擎从网页端移植到手机做客户端软件时,对于产品设计的考虑不仅要符合手机移动的特性,而且要在此基础上提升用户在移动端的搜索体验。因此简单的网页页面纷纷进行了华丽的变身来更加适合移动平台的发展特性。via

如何了解我们的用户–无线终端用户理解工作方法分享

2012年01月09日

一、前言

来到腾讯以后,做过iPhone阅读器、iPad阅读器、iPad音乐播放器的用户理解,目前正在做iPhone QZone的用户理解工作。做得次数多了,方法在不断改进,也积累了一些经验,与大家一起分享,希望帮助我们更了解用户。

首先介绍一下目前北分wsd(无线研发部用户体验组)用户研究工作流程:我们的用研需求来自项目组和用研组需求池,为控制节奏和质量,对承接项目组需求的工作流程进行严格把控,我们针对项目组需求,制定了用研工作流程图,用户理解也在这个框架之内。

二、        用户理解方法和经验

2.1 概念解释

用户理解是用研基本工作之一,目的是帮助大家看清我们的产品是给谁,包括用户的人口学属性,使用产品的目标、行为、动机,以及用户价值观,以及用户对某些事物的倾向等。

2.2 基本思路

界定需求→梳理现有问题→寻找用户→定性研究→输出阶段性报告→定量研究→输出最终报告→汇报→结果跟进→后续用研。

这里有些工作可以并行,有些工作在特殊情况下会反复迭代,这个需要根据项目具体情况灵活处理。

2.3要点介绍

下面按照用户理解基本思路介绍一下各项工作中的要点和经验:

ü  需求界定要明确,具有可执行性

产品侧过来的需求一般都是大而全的,想知道用户是什么样的,想知道用户怎么使用产品,想知道产品的视觉风格怎么确定,想知道现有版本有哪些问题,想知道新版本用户使用会不会有问题,想知道的事情还有很多。用研人员会与需求方进行沟通,了解需求提出的背景,帮助需求方梳理需求,当然有一些需求在一次用研中是无法完成的,我们会建议需求方分割成几次用研。 双方对需求达成一致后,需求方会发邮件提需求,用研组接口人承接。 这部分在刚才介绍的用研团队工作流程规范中有明确规定。

下面是我们梳理需求的一个例子,供大家参考:

    ü  梳理现有问题,对现状达成共识

为了避免用研报告输出的结果都是大家知道的,为了提升用研的质量,在动工之前梳理一下现有资源中暴露出来的问题很重要,项目组会有这方面的资源。就无线客户端而言,我们一般会通过自己的几个平台寻找、挖掘现有问题。当然还有其他的渠道,比如app store、论坛等,但有一定局限性。

了解现有问题之后,会跟需求方沟通,对已知现状达成共识。

ü  寻找用户,权衡各渠道样本差异性

要做用户理解,一定要找到用户才行,寻找典型用户一直是个难题,我们目前主要还是在QQ以及产品相关的入口去找。

调研公司也是一种途径,但存在周期长、用户不一定符合要求、到场率低等问题。另外,不同入口还会影响最终的数据结果,他们之间的差异性可以作为基础用研来研究。

另外,产品经理也会有一些用户积累,在做用研的时候,我们也会注重创建用户池,对于快速调研,这些渠道很有用。

有时用户不会这么直接送上门来,我们必须在茫茫人海中一遍一遍筛选,比如之前给QQ音乐(symbian+java)做的流失用户研究,后台无法提取到定义中的流失用户,必须得从手机QQ用户中筛选出symbian和java的用户,在筛选出音乐用户,再筛选出流失用户。

ü  定性研究,寻找背后的原因

定性研究的主要目的是确定“选项”和挖掘深度,比如要了解用户使用某产品的场景,定性阶段解决的问题是:用户都在哪些场景使用该产品,用户为什么在这些场景下使用该产品,在每个场景中用户的需求是什么。

定性研究主要通过访谈、可用性测试、焦点小组、问卷等形式完成,定性阶段挖掘出来的内容与一个用研人的素质和从业经验有很大关系,要时刻思考用户表述的背后的原因,挖掘深层次的需求,这也是创新概念产生的源泉。需要注意的是:如果有其他人跟你一起进行访谈等工作,每次访谈结束后,一定要对一遍结果,确定没有误解和遗漏。

ü  输出阶段性报告,为最终结果做铺垫

这个不是必须的,我们输出这个报告主要是和项目组同步阶段性成果,配合迭代节奏。

ü  定量研究,注重总结自己的技巧

定量研究的主要渠道是问卷(PC tips/手机tips/产品反馈入口),电话外呼。比较特殊的是“电话外呼”,我只用过一次,好处是样本损失率很低,坏处是费时费力。

提高问卷回收率是有一定技巧的,下面介绍一下各种渠道的问卷回收率及技巧:

通过pc tips投放问卷一般回收率是0.5%,但设计好图片,标题和说明语可以大大提高回收率,我做过最好的是投放40W,回收18538份,4.6%。手机tips的点击率大概是5%,回收率很难预测,跟投放时间点和时间长度有很大关系,我之前投放过的一次大约0.6%。电话外呼要看数据来分,数据有效性高、用户配合度高的话,60%-70%都有,低的话不到10%,voc有电话外呼业务,但一般不会承接超过100个有效数据的需求,再多工作量太大了。

ü  输出最终报告,细节决定成败

这部分主要跟大家分享报告的一些细节,我的经验来看,这些细节决定最终汇报的质量,影响本次用研工作获得的认可度,关于细节,主要介绍三点:标题,报告结构,人物画像的展现形式(如果有)。

      标题:

我习惯为报告起一个主标题,一个副标题。下图是一些之前报告的标题。


      报告结构:

      结构一般包括:用户画像(用户基本属性、目标、行为、观点等)、定量的数据结论(产品的使用场景、习惯、行为数据等)、相关的影响因素分析(不同用户群、类别、因素等在产品使用中的差异性和相关性分析)、用研建议、后续用研计划。

 

      人物画像展现形式:

这个我还在摸索中,目前大家比较倾向于在一张图片中展现任务的照片,基本信息,价值观,生活描述等,感觉堆积了很多文字,信息可读性不强,没几个人会认真研读的。现在大家都很注重数据可视化,人物画像的形式也该优化一下了。

自己的项目中尝试用卡通人物+动画的形式,但卡通人物不真实,无法全面反映任务的特点,后来还是用真实用户的照片了。

    ü  汇报

我的经验是汇报要选择关键人有空的时候,除了事先沟通,在订会议室的时候也要留意

对于汇报形式,我的经验是一定要很正式,我们越重视,参会的人员也会越重视,对用研结果的推行有很大帮助。 报告结果的关键关注人一定要到场 ,现场尽可能多一些互动和反馈。

 

ü  结果跟进和后续用研计划省略。

三、后记

用户理解是一项耗时耗力的用研工作,但给最终产品形态带来的价值却是无法直接评估的,这取决于我们选择呈现的数据与产品设计的关系,那些数据会影响到产品的形态,哪些数据是无关紧要的,还取决于对数据的挖掘深度和用研结果的推行。

via

iPad应用的敏捷设计流程

2011年12月30日

本文翻译自《Computer Arts》中对Sarah Parmenter的访谈录。

关于Sarah Parmenter
英国艾塞克斯(英国英格兰东南部的郡)Youknowwho设计工作室的创始人,Sarah Parmenter专注于网站,iPhone和iPad应用的设计。设计工作室创立于2003年。查看更多设计案例请点这里

Sarah Parmenter在访谈中介绍了她在设计列车时刻表app时的流程和设计原则。
对设计师来说,iPhone和iPad是全新的平台。相比图形和网站设计的经验积累,在iPhone和iPad上的设计进化还都处于萌芽期。
在这里,Sarah跟大家分享了简单明了的火车时刻表软件设计流程和基本原则,可能对你自己的设计项目有所启发。为了简化过程,我们假设获取火车运行数据的API是现成的。

 

1.首先,要确定你的创意还没有人做过。如果你发现已经有类似的app,那你需要比它做的更好,有一些独特的优化设计。最好的调查方式是到iTunes Store上搜索已有的iPad程序。

2.当有了创意,你还需要有个明确的定位,它会在后续的设计过程中决定app的设计要点。app定位可以通过苹果的人机界面指南(Human Interface Guidelines)图来确定。
距离图中坐标原点位置越远的app,特点越明显,越需要精美易用的界面设计,让他们与其他竞争者明显区分开来。在这个案例中,我们把app定位在原点位置,即简单使用的辅助工具。

3.确定app定位后,接下来需要聚焦app的核心功能。在团队合作设计时,这一点尤其重要。团队在提出各种功能需求时,很容易陷入哪些功能要包含在第一个版本中的争论。Apple把这个过程叫设计ADS(Application Definition Statement),或者叫设计精简的ADS。

4.走到这一步,很多人会认为对app的设计已经想的很清楚,可以直接开始设计图形界面甚至编码了。实际上,前面的过程,仅仅设计的导入阶段。我们接下来要做的,是产品草图设计。一般我们用纸和笔来画,它们是最简单,学习成本最低的工具。按照我们的设计经验,勾画出用户需要用到的界面,包括像按钮之类的界面交互元素;筛选出核心用户最常用的,最适合移动应用场景的功能。

5.我们要设计的是辅助工具软件,通常,它只需要主界面,和一个在背面显示相关信息的辅助界面,它通过信息按钮触发后翻转显示。如果你设计的是其他app,可能还需要更多的界面。重点是要设计界面与界面之间的切换方式,这一点在设计交付给开发人员时会显得尤其重要。我们把这个过程叫做app功能穿越(App Functionality Walkthrough)。

6.现在,开始app的低保真原型设计。重点是不要陷入过多的细节,低保真只是把你纸面上的草图数字化,便于在电脑上持续的改进。所以,尽量使用黑白,粗糙的线条和图形来制作低保真,别在细节上纠结,浪费时间。

7.低保真原型完成后,开始设计注重细节和精度的高保真原型。我使用PhotoShop,你可以选用自己熟悉的其他工具。一般,我会为iPad设置尺寸为1024X768的画布,然后根据低保真原型进行细节设计。

8.当我们设计app的主界面时,显示列车时刻表是设计的重点。它不需要包含所有功能,应着重显示列车到达时间,出发时间,列出延误或者取消等必要信息。

9.鉴于Apple提倡有质感,有仿真度的图形界面,我们让app的界面设计尽量接近用户熟悉的火车站时刻表。在配色上,使用灰色,黑色,亮黄和红色,配合一些个性化的图标来表示迟到和取消状态。

10.很重要的一点是,app所展现的信息,必须简洁明了,没有多余的文字。所以,在界面设计上,我们没有引入任何华丽的图形或者其他的信息来干扰用户,让他们能一眼就看明白app的用途。在数据条目之间使用间隔色,用醒目的字体显示到达和出发时间,这些都是很好的设计体现。主界面背后的相关信息界面,使用Apple的标准界面即可,为用户提供搜索列车后加入关注的功能。

11.我使用了很多细微的渐变和一些材质,重要的是,确保所有的信息都一目了然,不隐晦,不误导用户。

12.现在可以开始考虑icon的设计。这将决定app在appstore上的辨识度。你可以从简单的轮廓设计开始设计,先把核心创意表现出来。

13.除非有必要,你的icon最好不要包含文字,尽量使用跟你的app图形界面一致的材质和渐变。你如果想给用户呈现高质量的UI设计,别忘了把icon设计成29×29,72×72,和512×512三种尺寸。

14.如果你自己不开发app的功能,还需要把清晰的设计指南交付给开发人员。我会把界面和描述集中到一张大图,并尽可能的把所有可遇见的情况都给开发人员描述清楚。

15.最后,我们把低保真原型,所有的图形界面设计图(一般是PSD)和图标打包在一起,做上清楚的标注,发送给开发人员。有时候,你可能还需要对PSD进行切图,存成PNG,方便开发人员直接使用。

译后感: 

Sarah所讲述的设计流程,跟我们设计传统web软件的流程没有太大差别,都是基于统一的设计方法论。但是,appstore开创了一个全新的软件生态系统,它不仅改写了软件的交付和消费方式,也对软件的设计产生着显著的影响。

appstore上成功的应用,绝大部分都是面向个人的软件,它们功能简单(相对于传统的B/S或者C/S软件来说),注重满足用户的核心需求,设计上极力追求完美,我把他们叫做微应用。由于这个微字,要求这些应用的设计过程要比传统的UCD过程更敏捷;同时,微字带来了appstore超过30万的应用(截至2010年12月),也造就了赢家通吃的生存法则。

成功的app设计,要求在上线第一天就能够吸引用户。如果你上市的第一个月没有进入排行榜,那马上会在第二个月死亡。 微应用把Release soon, Release often法则打破了,它执行的是苹果法则,Release awesome, Release incredible

Sarah的设计流程,可以归纳为以下的步骤:

市场定位 —》App定义(ADS) —》概念草图 —》低保真原型 —》高保真原型 —》设计交付物说明和整理 —》外包开发

在这个流程中,并没有传统UCD方法论中强调的用户分析,场景分析,信息架构设计等环节,他们已经变成基本原则,融入到具体的原型设计过程中去了。为什么会这样?还是因为微应用的特性决定的。软件足够小,不需要也不可能承受冗长的基础分析和设计过程所带来的成本,它需要的是更敏捷的设计流程,用尽量完美的设计,来满足用户的特定需求。

同样的,敏捷设计流程,逼迫设计团队必须裁剪需求,才能更好的适应赢家通吃法则。一个小软件的失败,损失的可能只是4周的工作时间,这并不是什么大不了。你完成可以通过另一个新产品来获得成功。

这篇访谈给我最大的启发,就在于敏捷设计对于app设计的重要性,还有老外在面对微应用时,对于设计流程的坚持。via

 

情绪版(Mood board)操作流程的新思考

2011年12月29日

情绪版这种方法在国外的应用已经有一定的历史了,它诞生于上世纪的非信息时代,通常参与者被要求从日常的报刊杂志中挑选出符合“某种心情意境或关键词”的图片,把图片减下来,然后粘贴在一起。但时代在变,如今我们正经历着信息爆炸的网络时代——google、百度各种图片搜索引擎的进入了我们的生活;Shutter Stock、全景图等国内外专业图片素材网站的异军崛起——这不得不让我思考,“情绪版”这种方法是不是也能感受一下党中央的号召,“与时俱进”一下呢?

在今年10月份的安卓客户端设计研究的项目中,我们组织用户参与尝试了这个研究方法,并且对该方法的操作实施细节分析过程进行了一些小小的改良。希望通过这边文章,与大家分享一下整个方法的流程。

1 传统意义上,情绪版的定义和意义

MOOD BOARD(情绪版),是指对要设计的产品以及相关主题方向的的色彩,图片,影像或其他材料的收集,从而引起某些情绪反应, 以此作为设计方向或者是形式的参考。帮助设计师明确视觉设计需求,用于提取配色方案、视觉风格、质感材质,以指导视觉设计,为设计师提供灵感。

2 传统情绪版的操作方法

2.1 首先,综合用户研究结果、品牌/营销策略、内部讨论等方式明确体验关键词,可以得出体验关键词(Experience Keywords)。通常,这也会是一个商业决定。

2.2 其次,可邀请用户、设计人员或决策层参与一段时间的素材收集工作。通常会从日常接触的报刊杂志中选取并粘贴到一起。

2.3 再次,会针对每个人的情绪版收集起来,配合以定性的访谈,了解选择图片的原因,挖掘更多背后的故事和细节。

2.4 最后,将素材图按照关键词聚类,提取色彩、配色方案、机理材质等特征,作为最后的视觉风格的产出物。

3 改良版MOOD BOARD

在安卓客户端视觉风格研究中所尝试的方法流程——


3.1 第一步,原生关键词。

与传统操作方法(上一段所介绍的2.1)没有差异。

3.2 第二步,衍生关键词。

在这个研究中,我们对传统情绪版流程进行了一些改变允许参与者使用图片搜索引擎素材网站查找图片的。但是,如果仅通过单纯对原生关键词的搜索,很容易导致不同参与者提供的图片素材出现同质化的问题。所以,在搜索图片之前,插入了“衍生关键词”这个步骤。我们要求参与者首先头脑风暴画出关键词的思维导图(如下图)。一方面,合理地引导调研对象发散思路,另一方面,也在过程中深挖原生关键词在他们心中的定义。

衍生关键词诞生访谈:

  • 自由发散问题——看到“简洁”你想到了什么?
  • 引导发散问题——如果“简洁”是一种颜色,你觉得是什么?为什么?如果“简洁”是一种食物,你觉得是什么?为什么?如果“简洁”是……

3.3 第三步,图片搜索,提取图片生成情绪版。

在这阶段,要求用户使用“原生关键词”和“衍射关键词”,通过网络渠道,收集了大量的对应的素材图并配合定性访谈。

3.4 第四步,衍生关键词的分析——分维诠释

在生成情绪版的同时,用研将所有衍生关键词”按照三个维度去分类整理。这个过程的目的是帮助项目组成员从用户的角度去理解“抽象关键词”的“具象诠释”。所有的关键词可按照以下三个维度分类——

  • 视觉映射
  • 心境映射
  • 物化映射

3.5 第五步,对情绪版进行“色彩分析”和“质感分析”

很多传统的情绪版调研方法可能在情绪版生成后就结束了,这种做法很可能导致研究和最后的设计产出的脱节。因为,设计者们往往停留在自己的主观消化和感触中,再开展设计,缺少较客观的度量方法。在这次的调研中,我们最终生成的产出物之一是相应的配色方案。

电子化的情绪版对后期的“色彩分析”也是比较方便。

一方面,我们将情绪版在PS中进行高斯模糊,再使用颜色滴管提取大色块。当然,现在已经有很多用户配色方案提取的网站和软件,这样更事半功倍。

另一方面,结合衍生关键词的分析结果,讲情绪版中较高频物化纹理和材质提取出来。

via

2012年移动应用交互设计趋势

2011年12月29日

2011年涌现出诸多优秀设计,随着操作系统的更新和硬件性能的提升,交互设计又被提升到一个新的高度。不再是将内容从互联网搬至移动设备,而是解决设备本身的问题,根据用户需求从操作方式、信息架构和内容呈现等各个方面挖掘设计的可能性,为用户带来新颖的交互体验。

本文汇总今年热门产品的界面案例,希望能从中总结出未来一年需要重点关注的设计趋势。

突出主要功能

对于信息架构的不同,主界面也会有很大区分,以某一功能吸引用户,如拍照分享。

专注是从众多相似产品中脱颖而出的产品策略。有数据表明,如果界面某项功能在视觉上最明显,那也将提高用户使用的机率,而从主界面点击超过三次才能操作的功能被使用机率则非常低。

integram在视觉上“share”按钮的样式区分去其他标签,强调分享,而不是拍照功能

语音交互

设备硬件为取代其他终端产品和实现新颖的功能提供了技术基础,用户与设备之间的交互方式不仅局限受触摸屏,语音和拍摄在2011年的移动应用中发挥了巨大的作用,促成微信和Instagram等热门产品。

Siri被誉为革命性产品,不管其是否夸大其词,它成功将语音交互引入到移动设备中,比起语音命令更为智能。

百度手机浏览器Android率先引入语音搜索,解放双手,提供更为自然的操作方式,但需要交互辅助解决识别率和使用环境嘈杂等问题。

语聊可能是今年最火的功能,音频让用户沟通更为方便,在此基础之上还能衍生出更丰富的语音交互方式,比如语音表情等等。

语音输入是语音识别的基础应用,有望广泛实现在手机的输入法中。

摄像头交互

摄像头的潜力同样让人兴奋,除了拍照和拍视频还有很多料想不到的功能,比如类似于kinect的操作,在屏幕上方移动手掌可以操作手机。

裸眼3D利用前置摄像头探测用户和设备的相对位置,在屏幕上显示立体化的图形,不需要戴眼镜可以看到3D的效果,这项技术可能优先使用在游戏中。

摄像头还可以捕捉眼球的位置移动,取代触摸屏操作,计算出用户的视觉注意力在屏幕哪部分区域,页面可以随着眼球的移动,当眼球的注意力集中在某个图标上2秒钟可以触发点击操作。

 

Galaxy Nexus的脸部识别功能,利用前置摄像头将成熟技术应用在移动端,视频通话也将在未来几年得到普及。

手势操作

以N9为代表,滑动手势取代Home键,滑动操作将非常频繁地出现在触摸屏操作中,设计中使用滑动手势取代点击有诸多优点,比如避免点击区域导致的误操作问题、操作流畅和隐藏控件等。

N9手机

uc浏览器双指滑动可以新建或者切换界面,有助于提高操作效率。

iPhone版Flipboard向上滑动实现翻页,不过效果过于强烈,视觉上并不连贯。

百度手机浏览器WP7版单指滑动工具栏可以缩放页面,随意控制页面比例。

动效

随着手机性能的提升,系统和应用程序中的动效越来越丰富,其丰富的视觉细节对于交互设计有着诸多的辅助作用,有效保证富交互的实现效果,应用形式有转场、控件交互、操作效果和提供反馈等。

 

翻页和点击单个元素进入新页面时,专场效果让界面看起来更为流畅。

Path控件的动效成为今年流行设计元素,越来越多的应用为针对ios5增加动效。

侧边栏

当界面结构比较复杂,类似Pad的侧边栏有助于减少界面的层级关系,充分利用显示空间,或者让目录型数据便于操作。

 

Facebook&Path

 

全局显示

移动设备的屏幕越来越大,但还是要减少不必要视觉元素干扰用户,特别是对于浏览类产品,更注重扩大主体显示区域。

WP7浏览器将地址栏放置底部,增加显示空间,同时让用户的操作集中在界面底部。

 

唐茶阅读尽量屏蔽了无关的视觉元素,代表 了最好的中文阅读体验。

 

百度手机浏览器WP7版单指滑动工具栏可以缩放页面,这也是动效的应用案例之一。

近距离交互

近距离交互是个人杜撰出来的词汇,意指实现近距离的设备与设备之间的交互,移动设备中数据可以像物品一样被随时随地的交换,包括用户的身份信息。

摇手机换名片应用到LBS和重力感应,实现“碰撞”设备交互数据,如通讯录、照片和应用程序等等。

 

Square可以查找到周围的移动设备,发送支付清单,实现线上支付。

移动设备自带的NFC功能,包含用户各种卡类信息,从而可以取代用户的银行卡、饭卡、公交卡和门卡等等。

Path2.0-从分享照片到分享更多

2011年12月22日

2010年11月,一个免费分享私密照片的移动应用Path发布。沉淀一年之后,Path厚积薄发推出了2.0版。新版本Path完全颠覆了1.0版,在视觉、交互、功能上均有所改变,从一个分享照片视频改变成为一个分享更多生活经历的应用。

功能:

Path2.0的核心功能全部包含在左下角的红白色加号按钮中,点击后会出现6类功能, 依次是:拍照、和谁在一起、当前地点、在听的音乐、在想的事情、以及睡眠,使用起来得心应手,十分方便。其中比较有趣的是分享睡眠时间,你可以记录每天睡觉和起床的时间,也可以看到朋友们起床和睡觉的时间从而猜测他们近期的生活状况。

你不仅可以和Path好友分享,还能把你的分享发布到Facebook或Foursquare等网站上。同之前的版本相比Path2.0从侧重照片分享走向分享一切,好友上限从50人增加到150人;长途旅行以后,Path还会自动利用位置功能帮你发布“已达某地”信息(可在设置里关掉)。经过测试,已达某地的信息非常精准,竟然能精准到公司具体某个会议室。

但是正是因为功能增多,刷新时的耗电量也比1.0版大很多,照片视频加载也感觉比以前速度降慢。

 

交互:

Path2.0的titlebar上新增了两个按钮,分别为设置和添加好友。点击按钮或直接左右滑动可以进入下级页面。设置页中的内容和1.0版中bottombar上的类似:home(主页)path(个人页) activity(活动) settings(设置) signout(登出)。对于Path的老用户来说,设置页中的内容都已经十分熟悉了。进入“添加好友页”可直接看见所有好友,编辑好友以及通过通讯录、Facebook添加,或通过邮件邀请好友。

主界面中cover的概念被引入,将近1/2的面积被一张封面所覆盖,仿佛一张专属墙纸,你可以替换成你拍得最骄傲的照片,或是想时常看到的家人的合影。分享的照片不再需要点击后查看而是直接显示,点击可全屏显示。

向上向下滑动后,会出现一个时间轴 (timeline),方便地提示你当前查看的Path(即自己或好友的分享)是何时发出的。伴随着时间轴滚动会显示一个小时钟和具体的时间,有意思的是小时钟的指针会随着时间的变化而变化,十分精致有趣。在每条分享信息的右侧显示的数字表明多少人浏览过该信息,点击后可以发表情、评论。

虽然新的交互增加了用户的学习成本,开始使用会有障碍,但是经过一段时间的熟悉,交互体验还是比较流畅的。

 

视觉:

伴随着产品定位的改变,我们可以看到Path的icon从最初的叠起来的相纸变为一本书,体现出Path从单纯分享照片到如今分享更多生活琐事的理念。整体界面虽然沿用了之前的红色,但是红色更加深沉,体现了产品迈向成熟。

新Path里添加了很多圆的元素,圆的添加按钮、圆的贴纸效果小icon、圆的小时钟和圆的表情,使界面更加生动和友好,也体现着share moment这个贯穿Path的理念。虽然功能增多导致视觉元素增多,但是我们欣喜地发现新Path的界面更加精致漂亮。

 

思考:

截止到今年10月Path共有100万用户,而6月的时候只有50万。用户量的不断扩大促使Path从50好友的小圈子扩大到150好友的大圈子,分享也从app内部到facebook等网站。虽然分享对象的选择权在于用户,但是这样的Path还是有些变味。Path更新后产品的确迎来新一轮的活跃期,但是陌生人加好友的情况也逐渐多了起来。不仅私密分享逐渐变味,Path的自动发布(Auto post feature)用户地点的功能也让一部分用户感到不安,尽管可以设置关闭。新的Path会不会因其公开性而丧失一定的用户?还是会因为更全面有趣的功能吸引更多新用户?这个我们不得而知。

好在尽管Path2.0功能增多,分享人群扩大,但是仍然坚持产品最初的一个理念:分享“生活时刻”(Share moment),这也是区分它和facebook产品的差异点。Path的公司把2代产品称为明智之旅(Smart journey),他们认为每个人每天所经历的生活都是由很多片段组成的。“像一个美好的旅程一样,你可以通过Path记录给自己看,或者分享给别人。”

via   doubanclaimd4d50fab89e855a3

参考文献:

http://www.businessinsider.com/path-2-walkthrough-2011-11

http://www.wired.com/gadgetlab/2011/11/path-version-2-smart-journal/

http://www.digitaltrends.com/social-media/path-2-0-relaunches-as-your-personal-social-network/

新版飞信(iPhone版)使用体验

2011年12月22日

更新了iphone版的飞信,顿时找不到通讯录,才发现被扔到了左侧的分组标签的最下面,郁闷。

手机端的分组可以直接读取PC端的分组,将分组标签单独放在左侧,首先不能清楚的传达具体的分组信息(分组名称),其次用户用多动一次手指(向右滑动,没有向右的提示),用户可以长按好友头像并拖动到左侧的分组内,给好友分组似乎不是手机端用户的强烈需求,这个功能显得有些鸡肋,用户希望更快更方便的找到想要联系的好友,让用户花时间给若干好友分组,即使交互做的再好玩再炫,对于用户来说,很难买账。QQ的交互就容易简单的多,我可以查看全部好友,可以查看未分组好友,可以查看分组好友,简单直接,一目了然。飞信之前也是类似的布局,新版有画蛇添足之嫌。

再说通讯录,飞信因为可以利用流量发短信,那么手机通讯录对于用户来说是比较关键的,想让飞信好友不再是手机通讯录的子集,用户一定会基于手机通讯录帮助飞信进行邀请推广,当我的飞信好友集与通讯录好友集接近重合时,传统短信与彩信的功能已经可以被飞信所取代,而这一过程的推动力正是基于发送内容的多样性,包括文字、图片、语音以及其他。

聊天窗口的表情按钮,指向上方,但是却从下方出现表情图标,可能交互希望是在上方弹出一个表情窗口吧。相册和拍照按钮还不能使用。

 

不是总结的总结,基于通讯录的用户关系似乎更加能够帮助飞信。

NUI自然用户界面(Natural User Interface)

2011年12月21日

NUI不是一个新名词。
只是经历近年的一些新产品,有了更贴切的感受。
特别是消费电子终端界面CLI、GUI、NUI的变化。在桌面端,对象通常是显示固定的屏幕,设计师专注于键鼠驱动下的视觉效果。到了移动端,拥有更多传感器与交互方式,便携使得移动设备不限时空,传统专注于固定场景与操作的设计思路不合时宜。
NUI的概念恰好touch到这一变化(并不局限于消费移动设备)。
设计亦不存在创新,只是发现。

社区 http://nuigroup.com/forums
Wikipedia NUI定义 http://en.wikipedia.org/wiki/Natural_User_Interface
自然用户界面自然在哪儿 http://blog.sina.com.cn/s/blog_4caedc7a0102dzpk.html
NUI视频集(proxy)http://vimeo.com/channels/nui

概念

“自然用户界面”(NUI)是下一个的人机交互(MMI/HCI)的模式转变。基于传统的人类本能的交互模式,如触觉、视觉、声音、运动和较高的认知功能,如表达、理解和记忆。自然用户界面的目的,是利用了一种沟通方式,更广泛的权力,利用有广泛技能的人才,通过传统的物理相互作用收益。

笔记

作为一个学科;NUI目标在于探索研究受到自然启发的计算技术,另一层面,尝试根据信息处理与交互模型理解我们周围的世界。通过它们的学习我们复制真实世界的环境,利用新兴科技与传感技术,获得在物理与数字客体间更精确与优化的交互。

从经验来定义自然交互:人们自然地沟通是经由手势、表情、运动,通过观察与操作物理客体来探索世界;主要假设是他们应该被允许与技术的交互,如同与日常真实世界的交互。自然用户界面的特色是一种新的建筑美学,关于如何在物理空间伴随人类感官,迁移计算到真实世界、创建沉浸式体验。

Shneiderman(1983)解释了用户控制的核心思想,包括:

可视的客体与操作
迅速的、可逆的、渐增操作
通过直接、使人感兴趣的可视化操作,替代复杂的命令语言语法

相关的关键字与领域

Open Source
开源
Cognitive Science
认知科学
Human Computer Interaction
人机交互
Computer Vision
计算机视觉
Linguistics
语言学
Multi-Touch
多点触控
Design (…)
设计
Artificial Intelligence
人工智能
Brain Hacks
Human Factors
人机工程
Interaction Design
交互设计
Usability
可用性
Information Visualization
信息可视化
DIY (Do it yourself)
DIT (Do it together)
Psychology
心理学
Philosophy
哲学
Physics
物理学
Natural Computation (http://en.wikipedia.org/wiki/Natural_computation)
自然计算

相关的人体传感技术

Voice recognition
声音识别
Finger identification
手指触摸鉴定
Gaze vector
Facial expression
面部表情
Handheld device movement
手持设备动作
Biometrics (body temp, heart rate, skin impedance, pupil size)
生物测定(体温、心率、皮肤抗阻、瞳孔大小)

相关的产品

Apple iPhone
Microsoft Surface
Microsoft Natal
Microsoft Roundtable
Microsoft Windows 7
Amazon Kindle
Reactable
Pulse Pen
Nintendo Wii

via

客户端与报业网站可能成为报业新媒体盈利渠道

2011年07月19日

渠道和内容:两个观点两条道路

对这个问题的看法代表着报业悲观主义和乐观主义。认为渠道为王的人对报业内容的廉价和容易复制,及渠道强势的现实有正确认识,他们很容易对报业未来不抱希望。而认为内容为王的人依然对报业内容充满信心。

新媒体战略,根基还在于报纸本身,依靠的还是报纸的品牌影响力。必须坚定内容为王,不赞成渠道为王。随着新媒体自身的成熟和传统媒体应对能力的增强,“渠道”变得越来越多,要想在激烈的媒体战中脱颖而出,“内容”可能仍是媒体生存和发展的重要法宝。

在相当长一 段时期,内容为王还是渠道为王根本不值得争辩。但新媒体尤其是移动运营商的壮大,使得人们越来越怀疑做好内容还是不是王者之道。成都传媒集团总编辑何冰认 为,传统媒体人往往自诩有庞大的内容生产力,其实别人也可以做内容生产,有的博客文章一点不比纸媒的评论写得差,因此传统媒体要应对新媒体竞争,首先要建 立强大的传播渠道。2008年1月,湖南红网传媒有限公司成立由《潇湘晨报》、红网等斥资1200万元共同创立,主攻楼宇电视。与分众传媒主打广告不同, 红网传媒的定位是“电梯新闻中心”,主要内容是晨报和红网的新闻、图片,以集网络、电视、触摸屏、高清全彩翻屏等诸多功能于一体的红网传媒•政府公共资讯 互动框架网为产品载体,由上屏的互动网和下屏的框架网两部分组合而成。目前,红网传媒在长沙设立了1500个终端,在益阳、株洲等周边市州也有近500 个,2010年已开始盈利。这种新兴的渠道代表了报业发展新媒体的一个新的动向。

广州日报报业集团社长认为:“内容为王还是渠道为王,关键取决于二者谁更强势。内容提供商实力更强,在利润谈判中就具有主动权;渠道运营商实力更强,内容为王就难以成立。不同的阶段,还会有不同的体现,实力有可能此消彼长,不可能一成不变。我更赞成品牌为王。”

有些人的观 点则更现实些。南方报业传媒集团社长说:“内容为王,渠道也为王,在新传播技术条件下,内容为王越来越靠不住。布局新媒体就是为了探索合适的盈利模式和商 业模式,大家都在摸索当中。哪一块商业模式比较成熟,就加大力气去做。”比如现在报业做得比较多的LED显示屏项目。

这两种观点 具体落实到新媒体的实践中也是截然不同的两种做法,坚持渠道为王的就会努力去发展报业的新渠道,比如创办各种各样、五光十色的新媒体;比如成都传媒集团就 创办了数量众多的新媒体形态,并积极利用资本运作等手段向各种新媒体进军。而坚信内容为王的总是喜欢“通讯社模式”,习惯通过“媒介融合”来实现新闻内容 的共享和多媒体使用,要做未来的内容提供商。他们代表的是报业在新媒体竞争时代的两种选择,最后究竟是哪条道路是正确的,谁都不清楚。也可能最后的结果是 两种思路都在传媒竞争中拥有一席之地,成功肯定不止一条道路。

报业未来的渠道:会不会是iPhone、iPad?

坚信渠道为王的报社在积极地寻找可以合作的渠道,还试着创造渠道。

谁能成为未来的报业渠道,报纸新闻网站、手机报、电子阅读器……好像都不是,因为实践已经证明报业运用他们的前景很渺茫。会不会是iPhone、iPad。

iPhone、iPad是2010年各家报社最火的东西,大家纷纷与其建立合作关系,在iPhone、iPad上建立下载客户端。《现代快报》比较看重在 iPad上的发展。其网民周刊《草莓派》现在已经开发出iPad版。《草莓派》通过对中文网络各种信息的抓取、编辑、加工,再呈现,使之变成轻松幽默的电 子读本。免费阅读,已经上线2个月,据介绍,现在在中文新闻类产品里已经排名前五名。已经有客户提出发布广告,《现代快报》认为,再过一段时间就可以实施 收费订阅了。《扬子晚报》和《金陵晚报》等很多报纸也分别开发了iPad和iPhone4产品终端。

最让一些报人坚信iPhone、iPad能成为未来报业的救星的是一则关于默多克推出的iPad报纸《日报》的消息。

但我们认为,iPhone、iPad对于报业的意义和价值可能并没有大家想象的那样巨大。

首先是赢利 模式的问题,现在iPhone、iPad客户端主要也是发展了两种赢利模式,一是订阅收费、二是广告赢利,这两种赢利模式与传统媒体好像也并没有多少不 同。受制于iPhone、iPad屏幕的限制,以及人们对于网络广告一种天然的抗拒,可能广告效果并不是很理想,即使你是可移动的;而受制于缺乏独具特色 的内容和激烈竞争的因素,订阅模式一旦开启,可能会出现大量退订。因此,在我们调研采访的这么多媒体中,对iPhone、iPad的态度可能依然是“玩 票”,一旦涉及到具体赢利模式,好像都没有。

关键的因素 还是同质竞争又从纸质很快转移到iPhone、iPad上,那么多媒体都在积极响应,热切进入。那么多的客户端,竞争的激烈程度远比同城报纸间的竞争。报 人常常对新闻门户网站无偿或一点点代价占用他们的新闻内容而愤愤不平,其实这些都是他们自己抢着送给新闻门户网站的;并由此诞生过抵制新闻门户的著名的 《南京宣言》;真的很担心iPhone、iPad会成为报业竞相喂饱的第二个“新闻门户网站”,即使有赢利模式,苹果公司不但要分成订阅费的30%,还要 加上40%的报纸广告收益。目前,苹果公司虽然没有生产任何媒体内容,但已经有50亿美元收入来自于媒体内容营销,占其总收入的30%。报业好像是在培养 自己的第二个掘墓人。

而且,报纸 iPhone、iPad客户端还不单单是跟报纸间竞争。在介绍他们的产品时,我们非常好奇地注意到,他习惯于用在中文新闻类产品中排名多少多少来介绍他们 的成就。而从来没有一家报社老总敢说,在iPhone、iPad客户端的排名多少。报纸的iPhone、iPad终端必须面对几大竞争对手:游戏客户端、 微博等社会化媒体终端,这些东西远比新闻类终端有意思多了,也更具吸引力。

iPhone、iPad可能在2011年还会热闹一阵,但由于赢利模式及竞争程度等因素的制约,很可能会成为像报业发展的其他终端一样,只能为报纸影响力提高出那么一点点力,并不能够承担拯救报业的重担。

报业网站:区域门户网站

报纸网站的发展一直是报业的一块心病,几乎没有哪家网站是赢利的。但是最近几年,报纸网站除了脱离报纸像19楼、舜网这样的社区网站模式外,都在主打区域新闻门户网站的概念。

我们知道, 报纸发行受区域的限制,但同时也受区域的保护;而网络则不受区域限制,但同时也不受区域的保护。因此,这种区域新闻门户网站的理念一直是被质疑的。但很多 报人不这么看,杭州网总经理沈杰认为,“一个地方发生事情如果在杭州网的论坛上说,共性很大,因为事关大家利益。”沈杰认为,地方门户网站的发展思路是回 归,因为像杭州网这样有党报集团背景的网站,政府对其的定义是官网,要把这个体现出来。按照这一思路,2009年12月杭州网开办“杭网议事厅”板块,集 议事、办事、投诉于一身。普通民众在论坛上反映的内容成为网站深入跟踪的线索。在具体运作上,开设杭州城市建设征集意见平台、热点问题反映平台等分板块, 邀请政府官员访谈,使其成为政府与百姓对话的平台。

我们已经用实践证明了区域门户网站的商业价值。很多广告比如房地产都是区域性质的。广告必须强调区域属性,区域网站贴近当地网民的生活需求,具有用户黏度,广告的千人成本较低,对客户具有较好的广告回报。

悟空互动是一家专门为媒体提供手机客户端产品的服务商,专注于专注于iPhoneiPadAndroid应用程序开发以及定制,有需要的朋友可以联系悟空互动

国外十个在线音乐网站的竞争策略(下)

2011年03月14日

6、mFlow

按他们自己的描述,mFlow 就是 Twitter 与 iTunes 的混合,他们既可以让用户分享音乐,也可以购买音乐。于是,它是个音乐探索服务加社交网站。

在 mFlow 上免费建个帐号,再把它和你的种种社交网站关联起来,然后就可以开始搜索音乐了。如果找到了喜欢的,那么你就可以分享到那些网站上,你分享的前十首歌都可以免费下载。除此之外你也可以购买那些歌曲。

这个应用最酷的一点就是你会因为你的分享而获得回报。如果你的朋友买了你分享的歌,你就能获得积分供你自己以后买歌用。

而不幸的是,这个服务在美国还没有完全展开。你可以收听并下载那10首歌曲,但是还不能购买更多的歌曲。在2011年年底的时候,这一服务有望在美国全面铺开。

7、Disrupt.fm

Disrupt.fm 建立在音乐剽窃似乎很常见这一前提之下,这一状况使得音乐人们无利可图。为了解决这一问题,Disrupt.fm 提出了免费音乐下载的另一思路。

简单来说,音乐家可以把他们的作品传到 Disrupt.fm 上面供人们免费下载。而实际上,这一流程并没有随着歌曲进入用户的 iTunes 而结束。这一应用鼓励人们把他们的帐号与 Facebook 关联,此后用户们下载的音乐就会通过 Facebook 自动分享给他们的朋友。

8、SoundCloud

这是一个企图替代 MySpace 的网站。SoundCloud 是一个艺术家可以上传歌曲并与粉丝们互动的网站。尽管不是上面所有的音乐都是免费的,但是乐队们其实还是很愿意上传单曲供人们下载的。

你还可以在上面加你喜欢的乐队为好友,并关注他们的最新动态,或者加入各种讨论组。这要比前面提到的应用更加积极主动。但是那些死忠粉丝显然会推迟 MySpace 老去以及人们向 SoundCloud 转移的过程。

9、OverClocked Remix

你曾经挖掘过那些在游戏里不经意间出现的无名乐队么?如果你有过,那么 OverClocked Remix 就很适合你。这是一个致力于提供免费游戏音乐 Remix 的网站。

各种各样的乐队都会向上面发布他们为各类游戏贡献的作品,而人们就可以免费的获得它们。

10、Ex.fm

人们都喜欢音乐博客上的那些免费MP3,但是又不是每个人都有精力去读上面的每一篇文章。于是 Ex.fm 这个 Chrome 插件就可以帮你搜刮博客里的MP3文件,并帮你建立播放列表。于是你只需要上上网,扫一扫各类博客,上面的音乐就通通归你所有了。

但是你得知道这个应用不会帮你下载歌曲,所有歌曲都只能在线收听。但是很多博客上都有不错的音乐收藏,能把他们都听一遍也是一种享受了。via

本文编译自 Mashable,原文地址

无觅相关文章插件,快速提升流量