标签归档:设计

聊聊产品中的状态设计

前段时间在设计公司产品的交易流程,整理订单状态时走了点弯路,做个总结。

状态是什么?是对事物一段时间状况的总结、描述。换句话说,这个世界不会有任何变化,直到某只蝴蝶煽动翅膀。再换句话说,动作、结果、新动作、新结果。

那产品层面如何抽象呢?先了解业务,互联网产品是现有业务的线上化,当然不一定是 100% 的映射,一方面是部分流程可能暂时无法线上化,没关系,可以继续线下处理,另一方面也存在改造线下流程的情况,比如以前是人找商品,现在更多的是系统根据算法推荐商品给人,以前是人带商品回家,现在更多的是送货上门。

具体设计时,一是考虑状态名称,叫什么最重要的标准是用户好理解,因此一方面,比如某个状态可以叫 “已接单” 或 “待发货” 时,我们一般选择后者,因为告知了事情的后续发展,但在产品需求文档中,我们可以写成 “待发货(已接单)”,方便研发测试理解,另一方面,业务大概率涉及多个角色,我们可以针对同一状态在前端侧做不同处理,比如消费者看到 “待收货”,商家看到 “已发货”;二是精简状态,先梳理清楚在业务的不同时间节点所有参与方分别可以做什么,会导致什么结果,比如 “已取消” 可以是消费者下单后主动取消,也可以是商家主动拒单,还可以是商家接单超时系统兜底自动取消订单。如果业务比较复杂,建议在流程图之外,单独用 visio 画一份状态机,核心的就两部分:箭头(附带说明谁干了什么)+ 方框(显示状态名称);三是看看同行怎么做的,再听听业务方、研发测试有什么意见,查漏补缺,完善方案。

## 扩展阅读

1、文章:产品状态设计看这一篇就够了

移动产品设计之导航

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

一、标签栏导航
苹果的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的“设置”-“隐私”-“定位服务”页面上有这样一句话:“定位服务”使用GPS及众包的无线局域网热点和信号发射塔位置来确定您的大致位置。这说的正是移动设备常见的三种室外定位方式:

1、GPS定位
GPS是全球定位系统(Global Positioning System)的缩写,由美国国防部研制和维护,该系统包括太空中的24颗GPS卫星。最少只需其中3颗卫星,就能迅速确定用户端在地球上所处的位置及海拔高度。除了美国的GPS系统外,目前正在运行的全球卫星定位系统还包括俄罗斯的格洛纳斯(GLONASS)系统和中国的北斗卫星导航定位系统。空间定位的原理是在空间中若已经确定A、B、C三点的空间位置,且第四点D到上述三点的距离皆已知的情况下,即可以确定D的空间位置。A-GPS指的是一种在一定辅助配合下进行GPS定位的运行方式,它利用手机基站的信号,配合传统GPS卫星信号,让定位的速度更快。

2、Wi-Fi定位
Wi-Fi是一种无线局域网技术,它允许电子设备使用无线电波交换数据或连接到互联网。Wi-Fi定位的原理是根据周围Wi-Fi热点的位置(较固定)通过算法算出当前设备所在位置。

3、基站定位
基站是固定在一个地方的高功率多信道双向无线电发送机,如果没有基站,手机就没有信号,打不了电话,上不了网。基站定位的原理和Wi-Fi定位的原理类似,算法上GSM网络和CDMA网络有所不同。

前几年流行一个词叫LBS,当时出了一大批签到应用,包括Foursquare、街旁、切客、网易八方等,目前好像就Foursquare还在,其他基本关门。回想一下,那段时间玩签到就是图个新鲜,也有部分动机是体验产品。签到应用并没有解决我生活中什么实际问题,后来微博微信更流行,也就离开了。

LBS重在Service而非Location,所以绝大部分LBS应用挂了,而另一方面越来越多的应用开始加入地理定位元素。地理定位作为移动设备的基础功能之一是任何移动产品设计者都不能忽略的,但我们需要思考的是自己的产品是否可以和地理定位结合,来为用户提供更好的体验。这方面值得我们学习的是微信的“雷达加朋友”,支付宝的“当面付”,不值得学习的是网易云音乐的“身边”(附近其他人听了什么)。

拓展阅读:
1、LBS应用常见定位方式(含原理和优缺点)
2、GPS和AGPS工作原理和区别
3、LBS应用如何通过Wi-Fi和基站对手机定位?
4、哪个App的基站定位最准确?

移动产品设计之数据可视化

好吧,有点标题党,其实是App设计做久了,总是列表列表,确实很单调,不好看。开始是去豆瓣搜索数据可视化相关书籍,后来发现有些没必要,看下Excel的图表类型,足够解决大部分问题。

Excel中的图表类型包括:柱形图、条形图、折线图、饼图、XY散点图、面积图、圆环图、雷达图、气泡图、股价图。每种图表是一个什么样子,然后适用于哪些情况,先百科,然后下载一些App看下实际效果,还可以逛下花瓣网

最后让我们重新思考一下整个问题,为什么要用图表,初衷是避免单调,让App更美观,但细细思量,本质上是替数据找寻最合适的展现形式,让用户更直观地理解。

拓展阅读:
1、制图基本知识
2、移动应用“形形色色”的数据可视化
3、数据可视化-信息图背后的心理学
4、推荐App:Making of Making Powered by NIKE MSI

移动产品设计之降低输入成本

受限于屏幕尺寸,嘈杂的环境以及自身的状态,移动端输入成本很高,错误的概率也很高,那么我们如何降低输入成本呢?

一、提高输入效率
1、保证输入框的宽度和高度,准确明了的提示文字,调用合适的键盘(iOS键盘类型),限制输入字符的类型和长度,自动插入空格,提供清空按钮,准确及时的反馈等,比如支付宝中的添加银行卡。
2、内置第三方输入法或增加自定义按键,比如Weico内置百度、搜狗输入法,Chrome输入网址时增加了“.”、“/”、“.com ”,随享增加了“#”、“@”、“☺”。
3、提供输入建议和历史,比如微博登录时输入邮箱名自动补全后缀,百度地图输入搜索词后即时显示可能的搜索地点。

二、换用其他交互方式,减少输入
1、选择,比如天猫、支付宝手机充值的选择充值金额,充值号码调用通讯录。
2、单击,比如天猫对商品购买数量的输入处理。
3、滑动,QQ音乐的定时关闭,就是滑动选择长短时间。
4、语音输入,比如百度音乐的语音搜歌。
5、摄像头读取,比如有道词典的摄像头查词,支付宝的扫描输入银行卡号,微信的个人/群二维码(前段在Instagram上关注了近100个用户,累得我想死!)
6、摇一摇,有次微信加好友就是用的摇一摇,懒得问帐号输帐号。
7、长按,比如微信的“一起按,加朋友”,支付宝的“一起AA”(原理)。
8、声音交互,比如Chirp的鸟鸣传输文件(原理),支付宝的当面付,虽然官方表示声波代表的不是支付宝账号,背后是一串交易号,但客观上确实减少了支付宝账号的输入。

三、优化产品流程,不用输入
1、输入一次后,记住内容/用户名等,比如iPhone的信息会保留上次未发送的内容,微信退出登录后会默认显示上次登录的用户,支付宝手机充值中默认填着该账户绑定的手机号。
2、以其他信息形式代替文字,比如微信中的聊天表情,赞,语音,视频,以前我们跟朋友短信(SMS)拜年,后来我们微信语音拜年,过段我们将视频拜年。
3、本身已满足用户需求,比如微博的复制微博功能,大众点评的“最近浏览”和商户收藏功能。

前面讲的都是文本的输入,但输入仅限于文本吗?

地理坐标:聚会,堵车,想告诉朋友自己现在的位置,早前我们一般是告诉他们自己周边某个标志性建筑的名称,但现在我们可以直接微信自己的位置。再比如初到厦门,刚出车站,想上厕所,之前要自己去找,现在我们可以直接打开地图App搜索肯德基,然后地图App根据上送的经纬度返回周边的肯德基店。经纬度获取的基础是手机里的GPS模块以及Wi-Fi、基站等定位技术。(这里表扬一下腾讯地图,搜索“厕所”,结果中有肯德基/麦当劳店)

音频:逛商场突然听到某首歌,旋律很好听,想知道歌名,最早我们可能问店员或同行的人,或者听出歌词然后百度,但现在可以用QQ音乐、百度音乐的“听歌识曲”或微信的“摇一摇搜歌”来识别歌曲。可以这样的基础是麦克风(声波传感器)以及加速度传感器(摇一摇用到)。

图形图像:本来图形图像的需求场景不是那么明显,可是Line首创将ID转为二维码(实际是QR码),然后摄像头(影像传感器)扫描直接识别添加,很好地解决了原来加好友需要输入ID搜索,再添加,并且碰到长且不规律的ID比较麻烦的问题。后来,微信也跟进了,并对二维码在国内的普及功不可没,现在视频网站每个视频下面都有个类似“用手机看”的功能,就是把网址转成了二维码。

文本信息只是输入的一部分,还有很多其他类型的信息,原本这些我们需要先翻译成文字,然后告诉计算机,但随着技术的发展,我们可以直接捕捉,捕捉的基础是各种硬件传感器。如果我们能深入理解用户需求,同时善加利用各种基于传感器的技术,就能很好地降低用户输入成本。

拓展阅读:
1、好的体验从降低输入成本开始
2、惊艳呈现-百度搜索手机客户端
3、简化输入 — 让网页表单更亲切
4、一个文本框搞定信用卡相关信息的输入
5、HTML中怎样触发不同类型的键盘

移动产品设计之加速

我们有时觉得某个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、移动应用“快”体验设计方法

微信银行设计浅思

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

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

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

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

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

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

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