• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 微云使用效率大幅提高的背后,腾讯设计师这样做改版!

微云使用效率大幅提高的背后,腾讯设计师这样做改版!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含App改版,改版设计,经验分享等相关知识,希望在学习及工作中可以帮助到您

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

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

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

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

产品定位

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

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

  • 上传和备份
  • 浏览照片和文件列表
  • 搜索文件
  • 预览PDF等文件

产品存在的问题

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

更一致

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

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

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

△ ?上传入口固定在底部

更突出

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

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

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

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

更简洁

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

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

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

更易用

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

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

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

△ ?上传页面信息区分更清晰

更快捷

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

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

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

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

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

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

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

总结

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

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

「最近有哪些值得关注的改版?」

  • 《超过10亿人使用的FACEBOOK改版了,新版的设计细节都在这儿!》
  • 《天猫APP 首页迎来史上最大改版,背后的设计过程是这样的!》
  • 《我用目标导向设计法,完成了爱奇艺PC站风云榜的改版设计》

原文地址:腾讯ISUX

优设大课堂

您可能想查找下面的文章:

  • 高手实战!腾讯公益设计改版项目总结
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 从“免费试用”模块设计反思UI的设计思路
  • 项目复盘思路:产品上线后要如何做复盘?
  • 上亿人使用的唱吧APP V8.6 改版设计过程揭秘
  • 上亿人使用的百度网盘,是这么做改版设计的
  • 实战案例!人气APP 最右4.0 全新UI 升级背后的设计思路
  • 微云使用效率大幅提高的背后,腾讯设计师这样做改版!
  • 用58同城的实战案例,带你认识完整的改版流程!
  • 实战改版经验!我们是怎样设计Foursquare Swarm 5.0的?

相关文章

  • 2018-08-23超实用!UX团队如何给设计原则做优先级排序?
  • 2018-08-23怎么做私单才能又快又赚钱?来看老司机的私藏流程!
  • 2018-08-23AI+AE教程!手把手教你绘制可爱的螳螂小动画
  • 2017-08-06页面重构技能-内容篇
  • 2018-08-23想引导用户?来学习UX中的承诺和行为一致性原则
  • 2017-08-06CSS实现单行、多行文本溢出显示省略号的实现方法
  • 2018-08-23「从硅谷回国,我没有任何犹豫」: 专访 Airbnb 中国设计经理 Vivian Wang
  • 2018-08-23产品设计过程中,异常流程设计的那些事儿
  • 2017-08-06方正字库中英文、文件名对照表
  • 2017-08-06WEB中文字体应用指南

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • ie8,chrome中table的宽度固定方法
    • 2018 阿里巴巴 UCAN 回顾!日本设计大师深泽直人:「设计环境与细节」
    • 3 步提升文案转化率,写出叫好又叫座的文案
    • 想成为云计算交互设计师,该具备哪些能力?
    • web前端技巧整理(个人实战经验)
    • 如何做好提示设计?我从3个角度完成了这篇超全面的总结!
    • 视觉设计师如何做竞品分析?来看这份超全面的指南!
    • 超全面!从0到1正确开启UX项目的方式
    • 提高设计说服力!来学习这个腾讯内部的设计效果检验方法
    • 看完这篇基础科普,别再说你不会用点九图了!

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有