好久没有更新blog了,之前忙于新环境的熟悉和项目设计,后来回校后又是看书写论文,8,9月确实很忙很充实。长假过后,看了一些《移动设备交互设计》这本书,论文里的文字稍有点内涵了,突然想想应该把之前移动项目的一些想法写个分享更新下blog。

之前参与了一个重要且有趣有影响力的项目,是关于android 3.0平台平板电脑的某IM竖屏方案设计,在这里记录下自己的一些思考。

当App需要这样的切换时候

 

设计过程中参阅了一些资料,发现国内对横竖屏切换的交互上还没有人写过相关文章,android3.0设计规范里有一页大概说了下:

 

 

其设计规范的布局建议大致有三种方式:

1、直接切换为竖状,例如Gmail;

2、把横屏时候的侧边栏放置于竖屏下方,例如Calendar;

3、在竖屏时候,隐藏不必要的列表,例如Google Reader;

 

这样的规范只阐明了纯界面布局问题,我觉得采用怎样的布局,需要考虑用户为什么需要横竖屏切换,他们是环境变化了,还是姿势累了,还是心情需要改变?他们的使用环境是怎样的?用户对产品的需求是否有所改变?我们的产品应该怎样规划?

横屏和竖屏下,用户使用的心情?环境是怎样的?

有调查显示,用户使用平板电脑更多处于休闲轻松的环境,例如星巴克、床上、沙发…在这样的环境里,用户容易进入沉浸式体验,横屏很适合观赏电影,竖屏适合文字阅读。

我们考虑产品在竖屏时候,可以为用户带来什么?还是不断地切换聊天,还是不断地滚动看SNS,又或者是选择音乐欣赏?如果竖屏它的先天优势是阅读,用户“竖”过来的深层需求是舒服的阅读体验,那么,我们在考虑竖屏方案时候,是否只把阅读体验做好,而去除一些干扰性因素。如果是这样的考虑,设计布局可能偏向于第3点,隐藏不必要的列表,去除干扰,用户有足够的时间和心情去back,再click,在这个情况下,效率并不是最重要的。

横屏和竖屏下,用户会以什么样的方式持有设备?

横屏时候,由于重心问题,也许更多的时候,用户会两手持扶使用;或者靠在桌上,一手持扶,另一手操作。用户对宽大的屏幕更多是横向扫描。

然而,当竖屏时候,用户会左手托住设备,右手操作,就像我们在看一本杂志时候的感觉。

这个时候,我们考虑切换后,哪个区域是用户最容易点击,最容易被发现的,然后放置最重要的操作区。

横屏和竖屏下,设备具有不同的特征,是否可以加以利用,把单方面优势发挥到极致?

通常观赏一部电影,用户会使用横屏来观看,因为16:9的比例看电影,在横屏下处于最大屏幕,那么,观看图片时候用户也有这样的需求。通常看一篇文章,看一本电子书,用户使用竖屏来观看,因为在竖屏时候,16:9的9宽度,用户对一行文字的阅读不会有记忆缺失,不容易出现误跳行。(因为通常新闻、电子书不是列表,没有斑马线)

所以,如果我们在处理一个新闻或者SNS feeds时候,里面有文章,又有图片和视屏,在横屏和竖屏下,它们应该“长的”不一样。竖屏时候,我们可以把对文字的阅读做得最好,图片和视屏可以使用Popup来提高它们的观看面积;横屏时候,我们可以使用幻灯片或者照片墙形式,把图片和视屏浏览做得最好,文字阅读次之。

如上便是项目中对移动设备的app在横竖屏环境下的设计考虑因素,提供参阅。

 

几个比较典型的app它们横竖屏下的处理方式:

 

 

by 布多budoued.com

 

近期在做一个模块——“结算中心”,结算中心是为淘宝第三方服务商(ISV)提供服务账单展示,资金结算的平台。它位于pay.taobao.com的一级类目“我的账户”类目下,地址:http://pay.taobao.com/account/pay_for_account.htm。
我的账户下目前有“账户充值”、“优惠券”、“账户记录”三个类目。要加入结算中心的关于 账户查询、账单查询、提现和各种设置类目,单纯的增加tabs会造成分类混乱,下属类目与原来类目有同属交叉,可能造成用户困扰。所以,与PD沟通,我们决定重新进行分类。

原来的类目:

 

需要加入的类目:

 

做卡片分类,有两种方法,一是自己靠认知和经验,把一级类目分好,然后用卡片分类来验证其分类。另一是不存在一级类目,然后让用户把所有类目进行归类。本次分类,我对其一级分类有一定预知,所以,打算用第一种方法。

所有分类如下:

类目中包括账户钱相关信息:账户查询,充值,提现,子账户等;

账务账单信息:账务明细,账单记录等;

相关设置和其他:例如提醒设置和优惠券;

这些是我们的相关预期,然后把它们做成卡片,做几个一级分类的容器,让用户放置,验证是否准确。

我用ppt做成卡片,然后打印出来,裁剪出卡片



其中四张是四个一级分类,用回形针别在几个纸上,作为容器

 

让MM来分类~多正儿八经的

 

另一位MM也在分~

 

根据分类的结果,有一个分类与预期的不一致,用户把“账户记录”放在里账务明细下,他们认为查询账户收入支出情况应该属于账务相关。

后来,拿掉容器,再请用户来分类,结果大致相同:

无一级分类的归类测试

 

根据这次体验,我总结的经验如下:

1、如果标签命名已经存在,在做分类的时候,可以适当改动。

例如,有三个标签:账户记录,账户提现,账户充值。一级分类定为账户信息,如果这样做卡片分类,用户面对这三个命名都为账户XX的标签,肯定会把其分为一类,这样并不能对标签的真实功能性做成正确判断。所以,可以在标签上隐藏命名,改装命名,然后用描述性语言作为辅助说明。

去掉了“账户”二字,下方写上功能说明

2、用户群体的选择,有一定的讲究。

由于结算中心的用户群是ISV服务商,所以,如果有条件,应该尽量让他们来做测试。如果不行,就得考虑对标签的命名和辅助说明做详细,用更加易懂的描述性语言做功能性定义。

 

By 布多 2011-06-19

 

27th May

临安十门峡
admin Post in 摄影 No Comments »

5月14日,临安十门峡游,挺不错的地方,有山有水有瀑布,人工开发痕迹较少,很自然。

景区地址 浙江省杭州市临安市清凉峰镇浙川村龙瀑路18号
★自驾线路 沪杭高速公路(A8)—杭州北进入绕城高速—留下出口下—02省道—过临安—颊口—抵达景区。
★公交线路 从杭州西站坐车至昌化,然后换乘昌化至马啸的公交车即可到达景区。

 

View Larger Map

 

 

 

 

其他见——> 网易相册

刚收到PD的邮件,很嗨皮,年前做的线下代购搜索模块,终于,千盼万盼,要上线了。。

年前做的项目,对搜索的交互摸索了一番,有点感触~

淘宝的搜索,入口为简单搜索条,为用户提供很简单,无需思考的条子。

然后,进入搜索详情页,搜索详情页的定位为:“为搜索结果添加高级条件”,以筛选出更加符合条件的结果!

 

然后,我们看淘宝的搜索,模块里可以添加各种条件,但这里一个比较疑惑的是: 关键字:【  】,输入框。在这里填写关键字,上方的搜索条子会相应的更新。那这个模块还属于“条件添加”模块吗?

高级搜索产品我们用过,这里更加类似一个高级搜索产品,其实它可以脱离搜索条了,在这个模块里可以使用关键字,添加条件,完成一次搜索。但是高级搜索产品通常不会与 简单搜索条 共存。

参考下其他电商搜索,在筛选条件模块里没有出现可以输入关键字这样的条件,所以,对淘宝的搜索产品有些不理解。产品之间关系混淆了~

回到自己的产品,年前做的线下代购搜索模块,增加了筛选条件的功能,左右纠结了下,把这个模块做成筛选条件的模块,不再添加关键字这样的框,当前页面搜索条与筛选模块共存,一起配合使用,不要两个入口共存,也许能减少疑惑。看了PD的邮件,会在上线后前阶段做 ABtest,看看用户反馈,希望能得到一些意见。

 

项目时候的一些思维导图,分享下:

分析可能的场景

指定店铺搜索情景发生少,把它作为高级功能

这只是在做搜索项目时对淘宝搜索模块的一些疑惑,不知道搜索团队的同学是否有其他原因的考虑,特意把产品做成这样的?

欢迎拍砖~

 

作一段时间了,项目做了几个,日常需求修改无数,遇到很多次面对需求方,PD,开发,三方讨论这个功能点到底做不做,做到什么程度的情况。所以,有时候感觉我们不是在做产品,不是在做设计,不是在为用户考虑,是在协调事情,满足所有人~

需求方比谁都能说,理由很充分:我们经常会遇到XX问题,如果有这个功能就能…;

PD是资源协调人,面对谁都会笑眯眯地说:好,确实不错,”但是”~我们时间很紧啊,赶着时间点发布啊,等下一期,3.0怎样?或者提日常来满足你们要求怎样?…理由可以有很多,而且字里行间都要让大家过得去。

有时候,站在别人的角度,为他想想,然后平衡下自己想要做的体验,有80%能满足我们的用户,有20%满足各个需求方,那事情产品就不错了,能快速推进了。

最佳的思考方向应该是以目标为导向的设计,为自己的设计寻找理由和原来来说服别人,并且把事情想透彻,不要露出连自己都没想明白,就想说服别人的状态。

以目标为导向可以支持我们产品快速推进,特别是在一些立项会议时,会议上大家类似脑暴的场景会催发各个人闪出各种点子,而且很多点子没有经过深层思考就说出来,作为交互设计师,我们可以用心去聆听,但不要在会议上持支持观点,因为往往这样的想法在会后仔细想想会发现逻辑错误,或者与产品目标偏移;也不要持反对观点,因为在没想好充足的理由之前要驳倒他人不简单,而且容易得罪人。

说了一大堆,还是拿些遇到的案例来说话吧:

一、

印象最深的一件事是我们在做”订阅中心2.0″的时候。订阅中心的首页要改版,在布局上曾经一直困扰着我:按照类目的排列,某些热门的活动,或者做的比较好的活动,产生订阅量较大的或者放在最上方,这样会造成订阅量大的会越来越大,热门的会更热门。而某些放在最下方的活动,会永远埋没~

所以,在2.0成功上线后,业务方对这个问题提出了他们的想法,希望把后台的类目做成可以配置位置的功能。后来,在2.0修改日常评审的时候,有经验的PD根叔说到这个点子上了,他的理由很简单:

“我们订阅中心产品的目标在于管理用户的所有订阅,而不去给用户推销活动和类目,我们更多的订阅量都来自于各个类目发布的活动上面埋的点,不信可以去查订阅来源数据。

产品的设计目标是 管理工具 ,订阅来自于活动页面,可以用数据验证。这些理由足于解决我之前的纠结点,在这个问题上之前我还一直考虑怎样通过页面设计或者交互方法来满足要求,看来是自己没想明白产品的目标。所以,以目标为导向的设计很重要!

淘宝订阅中心:http://dingyue.taobao.com

二、

第二个案例跟之前差不多,是“线下代购”需要做个首页,业务方的目的在于有个统一管理的首页,里面有搜索功能的引导模块,代购业务的各个管理入口,快捷工具箱,推销商品或活动模块。

分析这样的需求,本来线下代沟页面是隐藏tab,它嵌在“我的淘宝”后台里。

只有线下代沟商通过 qudao.taobao.com 登录才能访问到。目前对其它买家、卖家都用不到。

为了满足业务方提出的这些需求,我们会去考虑整个页面的结构设置,是单独作为一个频道设计,还是保持原来的嵌在 我的淘宝 下面的一个tab呢?

因为这个是特殊卖家的后台,用于各种管理的入口和快捷工具页面,目的在于管理和引导,所以,我想法是需要偏向管理,而促销应该弱化。而且,淘宝线下渠道有另外一个推广页面,是 1.taobao.com 。与PD沟通后知道许多促销信息会在这个页面推广,所以,更加坚定了我把它做成管理型的页面。当然,需求方其中有个要求是页面里需要有商品推荐,活动推荐的模块,而且面积占了很大一部分,所以,要解决管理与推广的矛盾问题。

最后,我采用左边这样的布局,理由如下:

1、保持线下代购还是我的淘宝下面的一个tab,因为根据“线下代购”业务方一直以来的设想,他们希望以后的代购业务可以深入所有人,所有的买家卖家都可以为别人代购商品,线下代购可以作为 我的淘宝 下面永久存在的tab,这里当然可以引入很多流量。这样的理由,无形中支持了业务方未来的业务考虑,同时,她们也会同意我采用放在我的淘宝下面的一个tab的架构了,岂不是一箭双雕:)

2、业务方支持我把它做成我的淘宝下面的子类后,我们就有理由把它的结构跟我是买家、我是卖家统一起来,因为它们同属于 我的淘宝 下面的tab。这样,我之前设想把它做成管理型页面也能满足到了,因为我是买家,我是卖家就是一个偏向管理的页面。

3、保持之前的我的淘宝子类的结构符合用户长期积累的习惯,因为左侧菜单还是原来的布局,不至于让用户找不到入口吧,符合用户习惯也是我们这样设计的理由。

4、为了满足业务方推广的模块存在,我还是把推进商品和活动模块做上去了。但是稍微弱化了些,把搜索和快捷方式这些突出管理的模块做突出。这样既满足了业务方的需求,也满足我们产品的深层要求。

最后,把做好的mockup放看看:

 

写了那么多,其实重要的是要:沟通,思考。

始终把握产品目标和导向,与需求方沟通,与PD沟通,挖掘深层需求,在各方之间做点平衡,你有充分理由让别人信服,或者站在别人角度考虑问题,照顾他们的考虑,就比较容易推动产品设计。

 

西湖春天很美,夕阳又无限好~热爱生活,放弃杂念!开心点!

 

其他在相册里,看看吧:)  ——>    《曲院风荷-春》

 

春意怏然,江南的春到处感觉很清新,想让自己也清晰起来,不会混沌,朦胧。不知道我想要什么,只想自由快乐,与那些美,或者不算美,或者有趣的玩意儿的距离,偶尔记录记录,找点生活的乐趣~

More… »

最近一直在搞“设计模式”,包括之前的总结分享和后来的运用设计模式文章,在设计模式差异一章中有一个案例,是分析Apple iOS与Android模式差异的,最新查阅了某些资料,发现有这么一说:Android的功能切换键(Tab)一般置于上方,而iOS设置在下方,原因是:可能Android的设计师认为浏览顺序是从上至下,所以把功能切换做在上方更能被识别到,而Apple的设计师认为把功能切换置于下方,距离拇指更近,更方便被操作到。(如图)

这样的说法似乎都挺合理。一个是从浏览角度看,另一个是从操作人机性角度考虑。

后来查阅了相关资料,发现Android在后期的版本改变了这一模式,切换操作也移到了下方,我想几年来,很多人使用Nokia手机,而它的操作选项,返回通常位于下方,所以这样的操作习惯延续了很久,Android这样的改动挺合理。

不过我认为对于信息分类相关的切换,置于上方会比较符合浏览网页的习惯,比如说在Android里开发一款音乐云端软件,界面中需要呈现诸如“民谣,流行,摇滚”这样的分类让用户切换选择不同的音乐,这些分类tab我认为可以置于上方,这跟用户浏览网页上的行为一致。而对于切换功能性的分类tab,可以置于下方,特别是一些用户常用的操作,例如网页浏览软件里,可以在下方放置“后退,主页,搜索,设置”这样的功能性按键。她们常用,而且用户使用它们不是从浏览行为而来,而是目的性地去寻找而操作。

功能性的按钮置于下方

 

信息类的切换可以置于上方

 

总之,根据Android最新的设计模式去设计平台产品是最有效的!

在很久很久以前,有个UED菜鸟叫DD,他带着无限的激情思考、挣扎,终于完成一套交互原型,后来,悲剧接踵而至…

Boss提出:这个流程貌似跟我想的不一样,我首先更关心xxx啊!

前端工程师提出:这个模块操作给了我很大的工作量,你能不能想一个更好的啊?

开发的同学:这个Shine里有没有可以直接拿来用的啊?

热心的同学:这个操作在那些网站里是长那样的,你为什么这样做啊?

… …

后来,DD苦思猛想:我那样的设计可以解决问题的啊,为什么大家有疑意?… …

又后来,他猛然发现了“模式”这个词,开启了——无敌模式:)

More… »

感谢碳酸饮料会望海同学把axure 6发布的消息带给我,然后通过这次对6版本的了解,我非常兴奋,这不是一次面对新生事物而兴奋地心情,而是在自己有所期望,心里预知它会这样去改变而给我带来的喜悦。

因为在之前的版本及其练习中,我发现某些功能我们确实有那样的需求,但axure老版本确实做不到,例如变量累加,计算,条件判断的类型太少,交互操作的形式太少等不足。随着互联网各种产品的发展,通过js可以实现很多种交互过程,因为Js本身是一种可扩展的语言,没有做不到,只有想不到。交互设计师做出新的交互,js能办到,交互设计师工具越是强大,越能够发挥自己交互创造想法,也可以减少跟其他开发人员的沟通成本,所以本次的axure6,我们猛然发现它给我们带来很多惊喜,我可以去享受它的功能,更多的是去利用它来表达我们的想法。

先不说了,看看尹广磊的一篇axure6新增功能介绍文章里,哪些点我认为是我之前预见到并盼望它增强的:

More… »

 
回到顶部