三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个。据统计,只有4%的app会被使用一年以上。

所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有裨益。一个实用的app可以让用户高度参与,以此来降低卸载应用的机会。更好的使用体验,用户留存时间增长,也是能让app口耳相传的主要原因之一。毕竟,除了在应用商店被发现,52%的用户来源是亲朋好友的互相安利。

下面分享五个技巧,可以帮助你设计出更好的移动端app。

01 实用性和用户目标

设想一下,当你站在一个陌生城市的陌生街道上,突然一阵妖风,开始下起了暴雨。你打开了朋友强烈安利的一款打车app,此时此刻你最需要的是什么?

“我想尽快呼叫到一辆出租车。”

 
用户的首要目标是什么?

如果你们的用户可能遇到这样的情况,那就根据他们的需求来设计产品。创建一个用户体验流程——能让他们在最短的时间,以最简便的步骤预订到出租车。没有噱头或者花里胡哨的东西——就是简简单单满足用户期望!

 
你会想先评价司机还是先打车?

当你打开app准备叫车时,干嘛要弹出一个窗口让你给之前的司机打分? 再比如,为什么app只在你想找附件的车时突然提醒你余额不足? 对于这些时间点的问题,打车app可以继续优化。我们不能强迫用户去应对那些不是他们最大痛点的问题。

简单的设计很容易被忽略,但如果实施得当,则非常有效。~Himanshu Khanna

02 “行动按钮”清晰明确

“行动按钮”,也就是常说的CTA(Call-to-action)。

 
  上面哪种按钮更清晰明确,一目了然

设计“行动按钮”时候需要注意:一,明确行动是什么。在这款打车app中,行动按钮是“打车”(Request a Cab),而不是“提交”(Submit)。这样才更明确地表达行动目标。

二,“行动按钮“要明显可触。对于惯用右手的用户而言,你让他去点击屏幕的左上角,自然就十分费力,或者得用双手才行。你自己握住手机,观察下自己的拇指能轻松碰触的区域,这就是适合放置“行动按钮”的地方。

03 为胖手指设计

想象一下下面这种场景:

打车app为用户提供了两辆可选的出租车,两辆车是以小圆圈的样子并列显示在屏幕下方。如果这个用户手指很粗的话,他本想点击第二辆车,结果却误点了第一辆 …… 这样就尴尬了。

 

右图的设计更佳:有更大的“行动按钮”,更合理的距离

只有当“行动按钮“足够大(当然也不能过度)时,才会避免这种错误和挫败感。设计更大的“行动按钮“并让它们保持一定距离,使用体验会更好。

04 为用户节省流量

流量也是花钱的。影响移动app用户体验的另一个因素是流量的高消耗。限制运行时需要下载的信息。后台服务也会消耗大量流量。

因此,为app里的多种任务设计可重复使用的平面素材,比如用一个出租车图标表示城市里所有可选的出租车。在加载一些信息、平面素材、图片、视频之前,给用户下载的选择权。

另外,优化字体、图像和视频,来减少移动端的流量消耗。 我们可不能因为流量让“打车”更贵对吧。

05 不要耗尽电池

在2018年11月,谷歌在Android Dev Summit上透露了智能手机如何耗费电池寿命。他们分享说,电池消耗的最大因素是屏幕亮度和屏幕颜色。

谷歌承认他们犯了一个错误。自Google的Material Design计划启动以来,他们一直鼓励设计师将白色作为所有应用和界面的主要颜色。

 
  每种颜色都有不同程度的电池消耗  
 
谷歌可能会继续在其应用中使用“暗模式”

如果app的运算或者导航较为复杂,那让电池耗尽的可能性更高。比如像定位这样的后台服务就很费电。

身处一个陌生城市,下着暴雨,此时用户最不想碰到的事儿就是“手机没电了”。因此,产品设计中要尽量保证UI的简洁,暗色调,更短的导航路径,以及有限的后台服务。

希望以上这些技巧可以帮助您改善app的用户体验设计,提高用户留存。

本文由墨刀编译自Sparklin 的 5 UX tips to design better mobile apps

这5个实用技巧,教你设计出更好的App的更多相关文章

  1. 9个步骤:教你设计出优秀的MMORPG副本关卡

    转自:http://www.gameres.com/664485.html 副本的定义 以一张场景地图为原型,针对单个玩家.队伍或者团队生成的一个实例,包含完整的开启关闭.怪物刷新.进度记录等逻辑. ...

  2. Java 11 正式发布,这 8 个逆天新特性教你写出更牛逼的代码

    美国时间 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Java 8 扩 ...

  3. 热心网友设计出更美的Windows 10开始菜单

    开始菜单应该算是Windows操作系统的标志之一,Win8时微软曾做了大刀阔斧的改革,没想到招致一片负面评价,最终紧急推出了Win8.1系统. Win10推出后,微软等于整合了磁贴和传统风格,但也做不 ...

  4. 几个你所不知道的技巧助你写出更优雅的vue.js代码

    1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...

  5. Java 11 这 8 个逆天新特性教你写出更牛逼的代码!

    美国时间2018年 09 月 25 日,Oralce 正式发布了 Java 11,这是据 Java 8 以后支持的首个长期版本. 为什么说是长期版本,看下面的官方发布的支持路线图表. 可以看出 Jav ...

  6. Java 11正式发布,这几个逆天新特性教你写出更牛逼的代码

    就在前段时间,Oracle 官方宣布 Java 11 (18.9 LTS) 正式发布,可在生产环境中使用! 这无疑对我们来说是一大好的消息.作为一名java开发者来说,虽然又要去学习和了解java11 ...

  7. PowerDesigner实用技巧小结(3)

    PowerDesigner实用技巧小结(3) PowerDesigner 技巧小结 sqlserver数据库databasevbscriptsqldomain 1.PowerDesigner 使用 M ...

  8. 移动周报:十款最实用的Android UI设计工具

    上一周可以说是一个不断Mark周,从最实用的Android UI设计工具.免费移动应用测试框架推荐,到HTML5开发框架等等,各种开发工具.框架精彩丰呈,看得小伙伴们是不亦乐乎.当然,还有不容错过的M ...

  9. c++实用技巧

    原地址:http://www.cnblogs.com/easymind223/articles/2576904.html 晚上的时间总是习惯性的在cnblogs逛街,今天又看到了好文章,其c++味道浓 ...

随机推荐

  1. 快速入门 WePY 小程序【转】

    一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...

  2. 异类查询要求为连接设置ANSI_NULLS和ANSI_WARNINGS选项

    在查询分析器中,先输入两句    set   ansi_nulls   on    set   ansi_warnings   on    执行然后再    Create   Proc   存储过程  ...

  3. Android WebRTC开发入门

    在学习 WebRTC 的过程中,学习的一个基本步骤是先通过 JS 学习 WebRTC的整体流程,在熟悉了整体流程之后,再学习其它端如何使用 WebRTC 进行互联互通. 申请权限 Camera 权限 ...

  4. 运营商挂时长神器,批量导入账号,导出账号状态,随机修改MAC地址

    话不多说,直接上图 可批量导入账号,同时修改广域网口MAC地址 导出账号状态,包括在线时长,MAC,IP地址等等

  5. Web容器初始化过程

    一.SpringMVC启动过程 Spring的MVC是基于Servlet功能实现的,每个web工程中都有一个web.xml文件,web容器在启动的时候会加载这个配置文件,当一个web应用加载到web容 ...

  6. Oracle 行列转置

    两种简单的行列转置 1.固定列数的行列转换如student   subject    grade--------- ---------- --------student1  语文       80st ...

  7. C++学习 —— 住着魔鬼的细节

    13周的C++课程转眼就学完了5周,C++的标准基本上已经覆盖到了.再加上coding了上百行,总算是对C++有了一个基本的了解.接下来的学习会是关于STL的,所以在此对目前所学做一个小的总结. th ...

  8. 简单工厂模式(Java与Kotlin版)

    Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...

  9. vue.config.js

    const path = require('path'); const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟 ...

  10. H5常用技巧

    工作每天都是接触移动的,特将平时工作中常用的技巧整理总结. 一.@support断定浏览器支持情况定义不同样式 @1像素边框 @supports (-webkit-backdrop-filter:bl ...