「milk香港版」交互设计漫谈(2)——社会化分享

为什么分享的图形是“心”?不应该是三点网络还是别的什么??
因为,人在用心分享!用心。

晚上忽然些许感触。一年前的晚上舜日对那个分享定义,略显激动地解释。
不想在这儿考究用户体验抑或是通用习惯,感觉苍白。
只是说,我们有一种态度,让产品设计与生活走得更近。

在这篇文章发布的几天里,milk香港版iPhone迭代了一个版本,再次被推送在官方新品推荐以及热门推荐。
几周前,milk香港版Android首次面世,新品热门推荐。
零推广。

1.2版本的迭代开发,主要功能是社会化分享。

分享的意义
社会化分享,是指在社会化媒体中,基于其分享功能,将信息网络化输入输出,加速组织传播。博客、微博客、WIKI、博客、社交网络、内容社区等,是可以常见到的社会化媒体形式。在国内近两年,社会化分享的传播量又以QQ空间、新浪微博、腾讯微博势头最猛。
社会化媒体最大的特点是赋予了每个人创造并传播内容的能力。
Twitter平等的信息网络,使得每一个独立个体变得真实。
虽然国内的类twitter产品有变质,人与人多了一层等级关系,信息传播也不再充分流畅。但人们依旧乐于低成本的表达自己,传播感兴趣的内容。
最后在这个项目里,我们确定将新浪微博、腾讯微博做为第一批分享通道。
定位与设计探索
milk香港版的前后两个功能版本迭代间隔两个月。
保持良好的迭代节奏、并达成对用户有参与感的互动体验提升,是分享功能的两个产品考量因素。
设计定位
1. 迭代版本的分享功能,需要在视觉交互中引起用户注意。
2. 分享功能的显示与操作方式,沿用已有的设计,减少用户认知成本。
3. 操作流程简化、流畅,层级关系易理解。
功能ux流程探索
简述:入口->(过渡)->分享UI->(过渡)->完成
在当前的UI框架中,我们有三个区域,放置功能入口。分别是:
(点击放大)
头部条,Getit弹出区域,底部条。
头部条
——优点:规范标准设计
——缺点:游离在milk设计之外 不具有一致的美感
Getit弹出区域
——优点:易引起关注
——缺点:增加手势误操作的可能性
底部条
——优点:规范标准设计 易引起关注
——缺点:占用过多空间 增加手势误操作的可能性
权衡的设计,选择Getit弹出区域的非标准设计,统一在已有的信息框架。
这符合用户对第一个版本的认知——弹出区域是被推荐的互动内容。
(点击放大)
如上图,这是一个最终设计的mockups截图罗列。
接下来的分享通道,将提供2个入口,以及允许回退操作的取消按钮。
验证登录,将提供一个webview供用户填写登录。登录失败将停留在这个页面,允许继续尝试,或回退。
登录成功将填写分享信息,详细的分享内容由应用自动填写,包括关联的图像(隐藏)、slogan 、关联的资讯内容,用户可修改。并通过右上角的按钮进行发布。
更多的细节:更换账户的功能集成在该页面,允许用户的快速回退操作。超出140个字符的内容,将红色提示,默认灰色标示。
上传的过程将提供应用状态。并允许因为网络或其它问题的用户回退操作,回退的关闭按钮与提交按钮位置一致,易于理解。
分享成功会提示成功并进入分享前的初始资讯UI,失败将重新回到填写分享信息UI。
通常情况下,用户完成一个分享操作会经历三次操作,分享入口->分享渠道->提交。
视觉设计与交付
将视觉设计与交付合并,是因为沿用了前期版本的设计,不需要探索新的视觉风格,整个过程会十分高效。
保持标识元素的可识别与简约,皮质底纹。
(点击放大)
iPhone资源,基于640×960与320×480分辨率,@2x标识了retina适用的图像。
Android资源,按480×800分辨率导出,以_ad为区分。
(点击放大)
同样针对每个UI的redlines,为开发提供参考。
碎片的设计
默认的API错误alert反馈,只是在debug版本里才会出现。弹框消息提示是个恶心的设计,并且在这个场景里对用户没有帮助。
为什么小按钮没有pressed的状态设计?它们太小巧了,以至于手指按下后,眼睛看不到这个按钮……
应用提交iTunes时的Special设计……更新的应用截图,丰富的颜色与物品。

后记
这是第四篇编号为2的系列文章。。。- -。。。太懒鸟。。太不知道说什么鸟。。。多去看书体验生活咯。。

5 comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注