移动产品设计之导航

导航对于一个应用来说非常重要,以下是常见的几种应用导航方式:

一、标签栏导航
苹果的App Store就是典型,早期的应用多是这种导航,甚至标签栏的高光投影都学的App Store,因为当时App设计属于新事物,大家都没怎么接触过。标签栏的Tab数量最多为5个,否则不好点击,这跟手机屏幕宽度有关。印象中当时大部分应用都是5个Tab,4个的显得尤其特别,包括微信、下厨房、米途订酒店等。标签栏导航的变式:Android中的Fixed Tabs。

二、九宫格导航
如早期的Facebook、大众点评。变式:1、去哪儿、艺龙等不规则的九宫格,重要功能面积更大;2、Zaker、360安全卫士3.0版等类Metro风格。

三、侧边栏导航
如Path 2.0。变式:1、12年突然火爆的两个App:唱吧(5月上线),侧边栏里的项目按方格排列。啪啪(10月上线),侧边栏的项目排在屏幕底部。2、Sparrow有两级侧边栏,右滑出现二级侧边栏,继续右滑出现一级侧边栏。Path 2.5左右边栏都可以滑出。

四、列表导航
如设置。某种程度上,九宫格导航是列表导航的变体,更美观。

五、卡片式导航
如天气,不同页面显示不同城市的天气。

说来很多应用都改过导航,网易新闻、WeicoPro最早是标签栏导航,现在是侧边栏导航;易信第一版、蝉游记测试版是侧边栏导航,现在都已改为标签栏导航;Facebook最早是九宫格导航,后来改过侧边栏导航,现在则是标签栏导航;而苹果的App Store却一直没变。应该说每种导航方式都有自己的特点,网易新闻有一版曾将体育科技等栏目放到侧边栏,首页仅显示头条,但后面又改了回去,相信是发现体育科技等栏目流量大幅度降低,因为用户要多点击一次,即便现在可以右滑打开侧边栏,作为网易新闻的重度用户,我也很少打开。

产品采用哪种导航方式,不是看潮流,也不单单是考虑用户体验,一切源于我们对产品的期许,我们希望它解决用户什么问题,解决公司什么问题,为了达到这些目标我们安排一些功能,这些功能组合在一起,结合产品流程、移动设备交互特点、用户使用我们产品的习惯等自然出现合适的导航方式。其中最主要考量的一点是主流程的数量,1-2个考虑卡片式导航、侧边栏导航;2-5个,考虑标签栏导航、列表导航;大于5个,考虑九宫格导航。

扩展阅读:
1、移动端主要导航模式
2、几种典型的iOS应用界面的交互框架
3、产品经理需要了解的移动交互设计知识
4、说说抽屉式导航
5、导航布局如何简化

iPhone上怎么管理App分组最合理?

一切源于知乎上的一个问题:在iPhone上怎么管理App分组最合理?

以下是我的5s桌面
Dock栏:App Store、设置、照片和微信。
第一页:系统内置App+触宝拨号、印象笔记、Any.DO和播客。(外加一个文件夹放基本不用的系统内置App)
第二页:常用App,如WeicoPro、百度等。(外加两个文件夹,一个放次常用App,一个放近期下载的App)
第三页:按主题,如微博、电影票等文件夹。
第四页:按类别,如社交、摄影等文件夹。
第五页:按公司,如Tencent、Baidu等文件夹。

P.s.
1、越常用的越要最短操作路径,所以优先级Dock栏>前几页>桌面>文件夹;
2、普通用户3页应该足够,页面越多,后几页App的打开率越低;
3、iOS 7的文件夹可以放多页App对桌面的简洁起了很大作用,iOS 5及iOS 6的设备,如果已越狱,可以下载InfinifoldersFolderEnhancer让文件夹可以放多页App。

移动产品设计之加速

我们有时觉得某个App快,某个App运行起来则很慢,这个过程分解开来就是:某个App执行某项任务,在某种网络环境下,被用户感觉到速度快或慢。三个关键词:任务,网络环境,用户感知。

任务:
1、提高任务执行速度
优化App代码质量,这个技术上的思路比较常见。

2、后台处理任务
最近使用新浪微博Windows Phone客户端时感受强烈,每次发出微博后可以继续刷微博,过段状态栏会显示发送成功或失败的提示。处理任务的时间并没有变化,使用体验却顺畅许多。

3、提前执行任务
Instagram在你拍完照片填写照片说明、分享信息等时就开始上传了,等你点击“完成”时,照片可能都已经上传好了。仅仅照片说明、分享信息等的上传,时间相对短很多。用户的感觉就是Instagram比别的App快,分享照片很简单!
微信查看他人朋友圈的照片,某张照片加载完成后,会自动加载该照片的前一张和后两张,这是对用户行为的预测。

4、提前显示任务结果
发iMessage时,点击“发送”后,输入的内容就会移入对话列表中,此时导航栏上还在显示着发送进度。一段时间后,如果发送失败,所发送消息右侧会显示红色的叹号,点击可再发送一次。
Instagram中点“赞”时,“赞”按钮会立即变为“赞了”,而实际此时赞的请求正在进行。
微信更极端,没有网络时朋友圈发的照片也会进入内容列表中,但实际是没有发出去的,短时间内微信会在有网络时自动上传,长时间的话,微信会提示“照片发送失败”,可轻触以再次发送。

5、细化为多个任务
大多数App采取的分页加载数据就是一个例子,像新浪微博“首页”每次加载50条微博,“消息”中每次加载20条消息。

6、降低任务难度
随享中查看微博图片,先显示质量稍低的图片,点击“原图”才会加载原始图片。

网络环境:
1、不同网络环境不同处理
新浪微博根据网络,在Wi-Fi下大图模式,在3G/2G网络下小图模式。

2、避免陷入3G/2G网络环境
视频、音乐类App的离线功能,豌豆荚的追剧功能。

3、与运营商合作推出类定向流量包
搜狐视频的联通15元每月6G流量包,豆瓣FM的联通免流量包月服务,微信和广东联通推出“微信沃卡”等。

用户感知:
1、及时反馈
用户不了解情况,就会更加着急。

2、分步加载
网易新闻查看新闻详情时,先加载文章标题和内容,再加载配图。

3、先显示部分元素
已有布局,打开iPhone备忘录,先显示导航栏和列表分割线
已知内容,新浪微博从列表进入某条微博正文,先显示列表页已知的头像、昵称、时间、微博内容等。

4、利用缓存
让人感觉快,新浪微博每次进入,“首页”都显示上次刷新时的微博。
实际确实更快,微信在没网的时候也可以访问之前已经访问过的页面。

5、页面转场、动画效果
页面转场、动画转场效果是消耗时间的,这个时间会被用来处理任务。

6、减少系统默认loading动画的使用
看着就烦,现在携程、美团等App都已经自定义了。

7、有趣、酷的元素
转移用户注意力,四次元加载图片时的loading动画有点像Pac-Man,iOS 7 下载App从在桌面上显示到安装完成的一系列动画就很酷。

8、视错觉
打开Gmail时的蓝色进度条,理论上会让我们感觉读取速度快了11%
以上只是细节的归纳,宏观地看,优化流程,缩减层级,减少输入等也会让用户感觉快,因为用户使用App是为了解决一个问题,所以让App加速是一件系统的事情。

拓展阅读:
1、Instagram 速度快的秘密何在?
2、让等待更加美好
3、通过设计让APP变快的6个方法
4、移动应用“快”体验设计方法

iPhone应用推荐之Bump

Bump 最早是一款手机间交换名片的 App,只要两个手机碰一下,名片就传过去了。随着发展,Bump 现在可以传照片、视频、音频、文件(包括 Dropbox 文件)、应用程序(限 Android)和联系人。

Bump 除了支持两个手机间互传文件外,还支持手机和电脑间互传文件,那么 Bump 传文件的原理是什么呢?

使用 Bump 的过程中发现三个关键点:一是设备振动;二是网络可用;三是移动设备和浏览器都要启用定位服务。再根据网上的一些资料,大致推出原理:将同一时间同一位置的请求回传给各个设备,然后用户自己配对,配对后就可以将文件通过网络传给对方。

实际碰撞中发现,两个设备并非一定要接触到,比如两手各握住一个设备,然后仅仅是中指、无名指和小指碰到也能连接上,甚至两手都不接触,隔空摇动设备,也能出现确认连接的提示框。之前不知道这个,iPhone 左右上角都磕出凹痕了,心疼!该死的 Bump 不讲清楚(刚发现,实际是我没看清楚)。后面想明白,设备的碰撞只是增加趣味性,改成点击按钮触发也是可以的,Bump 在手机和电脑间互传文件时,就是敲击电脑键盘空格键触发的。另外我尝试三个手机互碰,但每次都只有两个手机能配对,所以 Bump 的原理修正为:将同一时间同一位置的请求传给服务器,然后服务器根据算法将两个最可能在碰撞的设备配对,当双方都点击“连接”按钮后,就可以互传文件了。
 

P.s.
2013 年的最后一天,Bump CEO David Lieb 在官方博客宣布 Bump 将会在 2014 年 1 月 31 日从 App Store 和 Google Play 移除,这距离 Bump 被推出过去了将近 5 年。对于 Bump,作为用户,我不懂原理,也不关心原理,我只在意能否解决我的问题,如果能,而且还是以一种很有意思的方式,我就喜欢。那么 Bump 为什么没在国内火起来呢?互传文件,包括图片、联系人等,一方面不是高频需求,当有需求时要求双方都安装了 Bump,这个难度较大,临时下不大可能;另一方面不是刚需,图片的分享比存储更重要,传到 Qzone、朋友圈,好友来赞或评论下就够了。

微信银行设计浅思

不管是Web、App、还是微信公众号,本质上都是满足用户需求,解决用户问题的,所以微信公众号上做哪些功能考验产品设计者的判断力。PC/MAC,手机/平板,微信作为载体,每个载体都有自己的特点,用户也会有自己的习惯,那基于微信做公众号也要符合微信平台的特点和风格,这也会影响功能的选择。

从App的角度来看,微信一级菜单(3个),二级菜单(每个一级菜单下面最多5个),三级菜单(会话中的链接,点击去到HTML页面)。即使对于绝大多数App来说,这也足够了。不过最好的方式还是通过对话解决,这样用户的操作成本最低,比如语音/文本:“账单”,立即返回我本月账单情况,不行再去到HTML页面,不行再引导用户通过安装App解决。

从输入的角度,除了自定义菜单,微信还有语音、文字、拍摄(照片)、位置。
语音:通过语音识别,语意分析,然后给用户问题的答案。
文字:做语意分析,然后给用户问题的答案,作为语音的补充。
拍摄:暂无。
位置:发送地理位置,显示附近营业网点、ATM网点。
扫一扫、摇一摇未来如果开放,那到时微信银行又可以跟其做什么结合呢?

从输出的角度,可以是文字、图片、语音、视频,可以是卡片(图文消息),也可以是HTML页面。

从推送的角度,固定的如交易提醒、账单、还款提醒;非固定的如银行业务公告、优惠活动等。

最后再回到开头,解决用户的问题是目的,中间的所有都是手段,而手段中大到产品架构,小到一个页面的文案,考验的都是产品设计者的能力!

拓展阅读:
1、招商银行首推智能“微客服”平台
2、微信公众平台「订酒店」的订房功能是如何实现的?
3、2013移动互联网创新大会 — 微信 I/O 论坛

简洁为美系列之触宝拨号

我大概是5月份开始用触宝拨号的,iPhone自带“电话”有两个问题:一是查找联系人太慢,虽然可以滑动索引;二是删除联系人操作过于隐蔽。触宝拨号很好地解决了这两个问题。

1、拨号:
(1)支持姓名全拼、简拼混合搜索,并即时显示搜索结果(这个已经满足大部分需求了);
(2)支持电话号码全段、部分号段查找联系人;
(3)经常联系的人在搜索结果里自动排前面。

2、删除联系人:
iPhone自带“电话”要想删除联系人,需要你在通讯录找到某个联系人,然后点击“编辑”,再滑动到底部,才出现“删除联系人”按钮。另外从“最近通话”和“信息”App里进入联系人简介页面,点击“编辑”,底部是不出现“删除联系人”按钮的。这样的逻辑有些奇怪,之前一位设计师同事就曾因iPhone删除联系人难找而抓狂,相比触宝就易用多了。

实际算来,我只用触宝的两个功能:一是拨号,二是编辑、删除联系人。至于宣传的其他IP拨号、设置忙闲状态、交换名片、收藏夹等,基本没用过。触宝拨号iPhone 4.3版在拨号键盘上增加了“切换键盘”和“粘贴”两个按键,把软件搞得复杂了,推荐安装4.2版

Android手机App推荐(二)

一、娱乐类
1、百度音乐:之前我非常推荐百度音乐(那时还叫百度ting),因为里面都是正版音乐,不过现在觉得这个并非那么重要。一是用户未必搞得清百度音乐和QQ音乐的不同,都可以听歌啊;二是Android端用户的使用习惯可能更接近于PC,下好歌后复制到手机里。

百度音乐2.0版越做越复杂了,建议:一是功能上进行一些精简,均衡器、专辑图片、最近播放、最近添加等都去掉,可能满足了部分用户的需求,但得不偿失;二是界面上重新组织下,标签栏上面那个快捷播放条真的碍眼,本地音乐也改为列表。最后由于版权在手,暂时还是看好百度音乐,推荐安装1.6版

2、搜狐视频:之所以推荐,一是有些剧只有搜狐有,比如前段在看的《浮沉》;二是“播放记录”功能不错,可以记录你在搜狐视频各平台的播放历史,理论上可以PC上看《浮沉》后,晚上心里放不下,然后打开手机躺在床上继续看,不过这播放记录的同步貌似不是很稳定;三是支持高清播放,这是一个新的需求。现在,搜狐视频已经成为了我看视频的第一选择。

3、豆瓣FM:印象中最早出摇一摇切歌的,离线加过红心的歌曲功能也不错,不过一直有个问题就是私人电台听来听去就那么几首。

二、社交类
1、Qzone:看看同学、朋友的状态。Qzone网站自从升6.0后就不能只看好友的状态了,Timeline里面总有些乱七八糟的东西,而手机端Timeline相对纯粹。
2、陌陌:就冲这篇文章,也应该装下陌陌,期待陌陌3.0!顺便送陌陌一个slogan:陌陌,不只是那啥啥啥…

三、工具类
1、快图浏览:系统自带的图库不给力,这款软件小巧且浏览图片速度快。
2、ShootMe:方便测试时截图,不过后来在电脑旁都用豌豆荚截图了。另外Android 4.0后,可以直接通过电源+音量键实现屏幕截图。
3、手电筒:不愿开灯找东西时可以用用,软件做得不错,很简单,如果能改进以下两点就更好了!一是默认打开就亮灯,现在是需要主动设置;二是各种灯的图标下加行标题,单纯图标,未必能一下搞明白什么意思。
4、系统程序卸载器:现在Android手机买来大多预装了一些软件,不喜欢的就可以用系统程序卸载器卸载掉,不过需要先Root。

四、效率类
1、触宝拨号:快速查找联系人,拨号利器!
2、iReader:上下班地铁中可以看看电子书。
3、小米便签:简单的记事软件,记点小东西。小米便签在一年多未更新的情况下,还在gfan市场“事务管理”类App里排名第三(几个月前,排名第四,当时下载285159次),这不得不值得我们反思,Stower的评论很有意思:很简易,我觉得够用就好了。

五、生活类
1、大众点评:找附近的饭馆。
2、布丁优惠券:吃麦当劳、真功夫时可以用用。
3、下厨房:跟下厨房学做菜,唯有美食与爱,不可辜负!
4、美图秀秀:爱拍照的人必备。

六、游戏类
1、Fieldrunners:一款塔防游戏,看到这条微博后下载下来玩的,还不错。
2、屏幕水雾(Steamy Window):对着麦克风吹气,屏幕就结满水雾,用手指在上面涂写,让人想起小时候冬天在教室窗户上涂鸦。之所以推荐是这款App很手机化,水滴的下落利用了重力感应原理;对着麦克风吹气实现雾气效果利用了声音感应原理。BTW,还有一款类似的游戏:吹裙子(PUFF!),不过要适度噢,否则可能就跟这哥们一样悲剧了。

 

P.s.
1、推荐大家Wi-Fi下用安卓市场安装软件,PC端用豌豆荚安装。
2、@kentzhu 最近在极客公园分享的“玩法变了,移动产品设计新思路”很值得学习,地址:演示文稿现场视频

Android手机App推荐(一)之装机必备

有些人说Android是未来,我相信。曾经用过一段时间Android,写下我推荐的软件:

1、Evernote
如果手机上只能保留一个应用的话,我会选Evernote。Evernote是一款笔记软件,如果你在电脑旁,就用PC端记录,在外面,就用Evernote手机端记录,可以同步,超方便。

Evernote免费帐户每月是60M的容量,一般足够了。前段Evernote推出了中文版-印象笔记,不过建议大家继续使用国际版,新用户也最好注册国际版(印象笔记与Evernote International的差别见此),主要是数据安全考虑。手机上登录时,记得点击页面底部的“切换到Evernote International”。今年5月中旬Evernote推出了Android 4.0版,加入大量ICS元素,不过还是觉得3.6.3版更好用!

2、百度输入法
Android端目前最好用的输入法!输入是一个追求效率的东西,百度输入法词语匹配的准确率和淡雅的皮肤,都是非常好的。送百度输入法一个slogan:百度输入法,让输入随心所欲!

记得2.2版有个改动“增加锁定九宫数字面板功能”,当时很不适应,差点把百度输入法卸载掉,还好发现可以设置。后来3.0版的默认皮肤也很不适应,至今也不觉得比2.1版优多少。总之,输入法最核心的还是首选词准确率,是提高输入速度,其他都是浮云。BTW,最新版本三维词库那个三角标志挺碍眼的,有一个云输入的云标志就够了。

3、网易云相册
可以把照片无损备份到云端,再也不怕丢失了。我的教训是当时懒于备份,结果因为更换手机卡,几百张截图全部丢失。类似的事,我后来在iPhone上也发生过,因此真心建议大家安装网易云相册并及时备份。

4、微博
相对Weico等来说,官方版还是最适宜阅读的,不过上月发布的微博3.0版真是令人失望,增加了一些不重要的功能,关键是影响了之前的使用,推荐安装2.9.1版

5、微信
移动时代最火的软件之一,一直想用来替代短信来着,不过貌似最近更多的是回复QQ离线消息。Android版的微信我一直停留在2.4版,因为特别喜欢这一版的“找朋友”界面,而且后面几个版本的新功能并不是太需要。关于微信4.0,某人说的“Qzone与QQ的结合既默契,逻辑上又清晰,微信社交反之。”让人印象深刻。

BTW,微信还可以备份通讯录。微信里的“通讯录安全助手”、QQ通讯录里的“通讯备份”和QQ同步助手使用相同云端存储。如果只是想备份通讯录,微信就可以了;如果还想备份短信,就用QQ通讯录;如果还想备份软件、浏览器书签、通话记录等就用QQ同步助手。三者备份的通讯录都在同一个地方,支持网页端管理。

6、安卓优化大师
最早就用它干两件事,一是用它的开机加速功能,禁止一些软件开机启动;二是软件卸载,因为可以按软件名称、大小、安装时间排序,不过后来这个被安卓市场取代了,因为安卓市场操作更直观、方便。另外之前一直用360手机卫士的“系统清理”功能,降低内存占用,刚发现安卓优化大师也可以做,就不推荐360了。

7、安智市场
之前用安卓市场较多,因为可以下载某个软件的历史版本,但自从安智市场升3.0后,这个功能也有了,且UI、UE好安卓市场不是一点点。反观安卓市场,本来3.0版绿色基调的新界面挺好看的,结果3.1版改得难看了,然后3.2版又改了,虽然实际并没有多少提升。八卦下,是不是3.0版的设计师被人挖走了?:-P

不过对于产品人员,还是建议安装安卓市场(3.0版)。安智市场虽然也可以下载历史版本,但一是在“历史版本”里,你不知道自己当前安装的是哪个版本;二是不能点进去查看某个旧版本的详情,看不到更新说明和截图。而研究某个产品,了解其演变的过程更重要。

8、百度(原百度搜索)
百度搜索2.0有个重大更新:支持全局搜索功能,无需切换搜索类型。很Spotlight,不错的学习!不过最新的3.0版做得不好,推荐安装百度搜索2.0.1版。我自己用百度搜索iPhone版有几个月了,当时还挺想要一个加书签功能的,不过用了一段时间新版后,觉得什么智能主页、书签、多标签页多窗口都没必要,只是把App搞得复杂。搜索是搜索,不是浏览器,也不是导航。换句话说,App应该专注于解决某些特定场景下的问题。

9、金山快盘
金山快盘我是写这篇blog时才装的,但还是把它排了进来,它能解决我们数据备份以及设备间数据同步的问题。比如PC端下载一个小说,放到快盘里,然后打开手机端快盘,下到手机上继续看;比如跟朋友拍了几张照片,上传到快盘里,然后到电脑上压缩下,再邮件给他们。

10、百度地图
最初用的Google地图,因为定位慢,就改用百度地图了。记得一次用百度地图(2.0版)时,发现人大整个区域被用灰色背景和周边区别开来了,着实让我惊喜了一下。前段更新的3.0版有个功能非常好,就是收藏地点和路线可以在PC端和手机端同步,这对于旅游或去到一个新地方尤其适用。

BTW,地图类App都应该强化查公交功能,因为查公交往往是在查路线,而查路线往往又是从当前位置到某个地方去,这一切都适合由地图App来完成。话说8684公交下载量真高!

X地图

说到手机地图App,最早的时候当然是用Google地图,后来Google慢,百度地图更快,就一直用百度了。平时用得不多,直到前段组织同学去玩,以及自己去了两个陌生的城市,百度地图是我那段用得最频繁的App之一。

使用中遇到的一些小问题:
1、收藏夹分类不明显。当时还说路线呢,明明收藏了,用户使用App时的环境并不是冷静的。
2、支持公交线路报错。在苏州时,有条公交线路的数据过期了,应该提供一个报错的机会。
3、收藏的路线里,“我的位置”后面是否可以加个括号说明下具体位置?
4、增加测距功能。当时带同学从长城回来,特想知道自己的位置到八达岭车站要走多远。

基于以上经历以及这四天的研究,在搜狗地图的基础上画了个地图App的主要原型图。里面会有一些不合理的地方,因为对地图的理解还不够深,也缺少实际的调研和数据分析,但想说的都在原型图中。

改动包括:
1、凸显主要功能。
路线放入标签栏,城市、收藏夹放入更多等。

2、简化流程。
包括对搜索,对路线的简化。

3、强化公交查询功能。
8684公交在hiapk下载次数:4865301,旅行·地图类里排名第五。搜狗地图下载次数:1028494,排名18。
8684公交在gfan市场下载:1901392,交通导航类里排名第九。搜狗地图下载:247207,排名18。
(2012.8.22的数据)

 

P.s.
原型图下载:HTML文件(解压后点击start),rp文件(用Axure打开)
思维导图下载:png文件xmind文件(用Xmind打开)

一款云笔记App构思

市面上的笔记App总不能让人满意,就自己动手用Balsamiq Mockups画了一个我所期待的笔记App的原型。

一、设计理念
1、简单易用。
最快地让用户记好笔记,因为只是记个笔记而已,而且灵感转瞬即逝。
2、看重整理。
笔记最终是要整理的,不整理的笔记没有意义,在整理中收获更多。移动端进行简单、琐碎的编辑,PC、Web端进行系统的整理。

二、功能点
主要:
1、新建笔记:文字是最常用的,是最终形态;音频方便,有时文字来不及;照片是特定需要。
2、多终端同步:智能终端的丰富,数据同步才有了需要。

次要:
1、查看:浏览,搜索
2、整理:编辑,删除,移动

再次要:
1、分享:邮件、短信、新浪微博
2、安全:密码锁定

 

P.s.
App原型png图片下载地址,bmml文件下载地址