效率至上—全新微云

设计立交桥是一个很大的挑战。有着不同背景和知识的司机,从四面八方进入立交桥,然后在短短几秒内决定从哪个出口出去。如果错过了出口,就可能去往完全相反的方向。留给司机做决定的时间非常短,以至于无暇思考,必须不假思索就能做出正确决定。

如果司机因为思考而减缓车速,整个立交桥的通行效率都会下降,形成交通拥堵。

我们在设计移动APP时,当然没有设计立交桥这么紧迫。如果说有相似的地方,可能目标都是让用户能够不假思索做出正确的行为,不要走到相反的方向上去,也不要思考过久。

本文我就以全新改版的微云来讲讲怎样设计效率至上的移动APP。

产品定位

微云是面向个人的智能云存储服务,可以不加思索地进行备份、查看和整理内容。我们深入了解移动端的功能特点,从交互、设计和布局上进行一些优化,从而提高用户使用效率。

用户在微云APP中的主要行为路径包括:

1、上传和备份

2、浏览照片和文件列表

3、搜索文件

4、预览PDF等文件

产品存在的问题  

我们深知我们的一些基础功能需要打磨,预览效率偏低和一些操作程序繁琐。所以我们的主要目标是提高使用效率。

更一致

上传入口是一个比较常用的操作,在右上角区域单手操作时不容易点击到。而且在文件页出现选择操作时,会将入口向左挤开,使得位置不稳定。

针对这种情况,我们决定将它移动到底部中央固定位置。

这样的好处一方面是将常用操作放在更显眼的地方,另一方面是在固定的位置操作,适应拇指的记忆。

上传入口固定在底部

更突出

左图中的顶部背景色过重,干扰用户预览内容。列表页的高度不够会显得很拥挤。

针对这种情况,我们决定对两个区域做出调整。框架上弱化背景色,把大面积蓝色换成没那么刺眼的白色,调整列表高度从112px调整到132px,内容标题文字由原来的34px调整到36px,缩略图大小从80px调整到100px等等。

这样可以让用户更清晰、更聚焦内容本身。

列表页改版后内容更突出、更容易聚集内容

更简洁

当文档中有大量文件时,难以分辨文档类型,线框对文档识别产生了干扰,图形变的比较复杂。

我们决定对图形进行简化、强化图标本身的形状。根据文档本身的颜色去定义颜色的使用。这样可以让文档内容图标更简洁,图形符合用户对它本身的认知,这样更容易识别。

新版文档类型图标识别性更强

更易用

在上传界面中,操作项和信息区域混在一起难以辨识,而关闭入口在右上角难以触达。

我们把这个页面整体分成两个区域,顶部是信息区域,底部常用功能操作区域。

这样可以让上传页面改成全屏更好地利用空间对页面的布局进行调整,顶部重要的的每日流量信息提示更明显,常用的操作功能更易用。

上传页面信息区分更清晰

更快捷

预览页基础功能不够完善,预览、查找文档内容比较麻烦。

在文档预览页内增加关键词检索功能,PDF文档预览过程中添加页码定位。

改版后在文档预览中可以快速检索关键词,定位内容更快捷。PDF可以在页码缩略图中快速定位到你想要找的页面。

日常生活中用户想对一些书籍扫描电子化、各种票据的信息采集、名片上的关键信息提取都比较麻烦,需要一个个的字去输入在手机里。

微云移动端与优图合作接入了OCR文本识别技术,可以实现对拍照图片与名片中的文本进行识别。

简化名片的入录流程,并可以快捷的拨号、发短信、邮件等功能。为用户提供了高效、智能、便捷的个性化解决方案,提升了对图片上文本的阅读和记录效率。

OCR文本识别可快速入录信息

总结

用户喜欢使用移动APP的主要原因是内容本身,而不是设计装饰。

设计师可以通过多种方式给用户更好的体验。比如在排版上更明确,辅助性图形进一步明确含义,去掉无用装饰,在控件使用中保持统一性,让常用的功能更容易触达等等。最终,通过这些细节的优化让用户更高效地触达内容。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2017-08-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。

1412
来自专栏加米谷大数据

数据分析之20个大数据可视化工具推荐

Tableau 是一款企业级的大数据可视化工具。Tableau 可以让你轻松创建图形,表格和地图。 它不仅提供了PC桌面版,还提供了服务器解决方案,...

2334
来自专栏walterlv - 吕毅的博客

在 Windows 10 上为 WPF 窗口添加模糊特效(就像开始菜单和操作中心那样)

发布于 2017-10-01 16:14 更新于 2018-02...

7913
来自专栏数据小魔方

瀑布图

今天要跟大家分享的图表是瀑布图! ▽▼▽ 瀑布图图在诸多图表中算是比较复杂的图表,因而在excel2013及以下版本中并没有办法直接制作,不过最近更新的exce...

3106
来自专栏Web行业观察

设计师神器PixelMator Pro初体验

得益于订阅官方新闻,第一时间入手了 Pixelmator Pro( 下文称专业版 ),经过几天的简短试用,说说感想.

1763
来自专栏逍遥剑客的游戏开发

Valve: The Lab Renderer for Unity

4647
来自专栏司想君

2017年前端开发手册(二)-2017前端技术展望

1. Web Assembly, 获取刚刚到达顶峰。 2. `import`可能仅仅被用在`<script></script>`中。 3. 通用JavaScri...

3586
来自专栏做全栈攻城狮

安卓一步步从基础到精通自学教程,纯实战,纯干货(五)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活。提供程序员技术及生活指导干货。

1372
来自专栏程序员宝库

现代前端开发路线图:从零开始,一步步成为前端工程师

编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到...

1546
来自专栏腾讯社交用户体验设计

那些年苹果做错的设计

1303

扫码关注云+社区

领取腾讯云代金券