H5 App设计者需要注意的问题

我们通常在做H5 APP设计的过程中,遇到很多看似很小,且很容易被忽略的问题,正是这些小问题,一次次的撩拨用户的耐心,让用户对你的APP心生怨念。现在WeX5君呕血为大家整理出H5 APP设计的21条禁忌,希望与H5 APP设计者的您共勉。

1. 不要在没有流程图之就前开始设计或者画线框图

即便一个简单的H5 APP也要有一个思虑周全的流程图,以确保在H5 APP有合乎逻辑的、合理的导航结构。跳过流程图直接进进入开发会让开发变得复杂、不可控,很容易让用户迷茫,最后选择关掉或者卸载你的 App。

2. 分工要明确不要忽略开发预算

一个计划好的H5 App可能有一个搜索框,设计师预想的是一个产生实时结果的键入搜索,但设计师不能是做这个重大决定的唯一决策人。

3. 不要随意使用介绍动画

如果你打算使用介绍动画,那要让动画时间尽可能短,设计尽可能精细以及足够吸引人,值得用户花费时间等待。

App 加载过程中会先展现图片,再过渡至动画。要确保这个过度是平滑的,贴切自然的。有的 App 从加载图片过渡至介绍动画设计的非常蹩脚,这就很无趣了。

4. 别让用户空等

App 加载时间过长很容易让用户以为出现了什么故障,也会带来糟糕的用户体验。App 加载的时候不要让用户看到空白的屏幕,使用加载指示条或者小动画让用户知道 App 处于正常运行当中。

5、菜单层次太深

菜单项以5~7个为宜,如果有二级菜单,就要注意合理的菜单分类,不能有太多层级的菜单,否则很难预期,也很难找到,寻找和返回都会变得很麻烦。

6、交互流程分支太多

做交互的时候一定要有一个任务流程的概念贯穿始终,用户是为了完成某个任务而使用软件的,交互设计师除了关注界面元素、跳转逻辑和交互反馈之外,还要关注用户任务,分得清主要任务和次要人物,给主要任务一个畅通无阻的清晰流程,不要给予太多可能的分支,干扰主要流程。

7、相关的选项离的很远

相关选项一定要具有操作上的延续性,如果手机上相关选选离得很远的话,用户一是容易迷失,找不到下一步操作,二是需要移动手指,到屏幕另一端触发操作。

8、一次载入太多的数据

如果你的应用不能合理的帮助用户节约流量、电量,提升浏览速度和浏览体验,保证应用的稳定性能,就不要谈什么用户体验。

9、把所有的操作都暴露出来

H5 APP产品交互设计要经历缩减、隐藏、附加、组织的过程,千万不要妄图把什么功能、什么操作都暴露出来,以彰显强大。你需要把自己应用的所有功能所有操作做个优先级设定,那些常用的20%的功能,放在界面的主要位置上,其他80%的操作,放在次要位置或合理归类组织后,隐藏起来就可以了。

10、没有空数据界面设计

我们在做设计的时候,往往是提供理想化的场景,用户都已经进来了,我们怎么玩。但是,往往应用刚推出的时候,是没有用户的,甚至当应用有了一定用户基础的时候,新进来的用户打开应用的时候,应用仍然可能是一种没有数据的状态,再或者当用户清楚了全部数据,这三种情况下,用户都可能遇到空数据的界面。

11、用户引导的滥用

如果是通用的功能、非重点的模块,根本就不需要引导;如果是功能告知,只需呀轻量级的引导;如果是版本更新说明,说明书式的引导可以采用,但是要言简意赅。

12、无加载中状态

H5 APP产品只要是需要联网,需要交换数据,都需要提供一个加载中状态的,无论是菊花转还是Toast还是对话框,且要考虑到加载时间过长、网络开关没有打开、网络不通等情况分别怎么去处理。

13. 不要忘记手势但不要滥用

不是每个元素都是可视化的,比如 iPhone Mail app 的删除进程。在收件箱内,用户可以猛击屏幕显示删除按钮,用户就不用点击“编辑”,选择信息然后再删除信息。

14. 不要觉得每个用户有着跟你一样的 App 使用方式

可用性测试是必须的,不管你的 App 看起来多么好。找值得信任的人(或者有经验的设计师)进行小范围封闭测试,在公开发布之前更新下界面。另一个简单易行的获得用户反馈的方法是在分类网站张贴广告招募合适的人进行焦点小组测试。

15.上线前测试的重要性

对H5测试来说,与app测试项并没有什么区别,主要都是终端机的配饰问题,特别是不同终端浏览器系统和分辨率,但一样的是,app有安装、启动等步骤,相对简单。但在UI自动化测试,功能遍历测试并没什么不一样。

原文地址:https://www.cnblogs.com/lsongyang/p/9545275.html

时间: 2024-10-19 13:46:07

H5 App设计者需要注意的问题的相关文章

H5 App如此强悍,要降薪的恐怕已不只是iOS程序员

2015年的最后几天,移动开发圈里最为火爆的话题之一无疑是"iOS程序员月薪降至12K"这则报道. 有人认为这是O2O创业遇冷所致,也有人认为这是iOS生态过于封闭致使智能硬件等新领域对iOS开发者的需求量不足所致.还有人认为是相关培训机构过多导致的结果等等. 其实,以上这些原因分析都只停留在了现象层面,未能触及本质. 当前是一个由技术来驱动社会变革的时代,所有社会和产业变革的根本驱动力一定都来自于某种技术变革.同样,所谓iOS开发者降薪这个业界现象,背后的根本原因依然是技术变革:移动

App开发中甲乙方冲突会闹出啥后果?H5 APP 开发可以改变现状吗

随着各种应用的全面App化,因App而起的合作纠纷也日益增多,其中不乏最终对簿公堂的情形.WeX5(html5开发工具)为您汇总了三个典型的真实案例,方便您体会甲乙方冲突情景. 在围观别人争吵之余,您是否有了足够的警觉?是否想到了方法去规避这些争议? 围观之一:手机APP到底能干嘛?两万款是“打水漂”了吗? 据广州市高小姐讲诉,自己2014年初与一家信息科技公司签了合约,委托他们开发手机APP,并当场支付2.7万元.后来怀疑是骗局,想要追回预付款,却遭拒绝. 2014年1月20日,高小姐参加了一

H5+app -- 关于ajax提交问题

1.前阵子在做系统的h5+ app为满足手机端也能进行业务操作,例如:提货,扫描入库之类的.所以就要将做接口,从手机端调用后台系统的方法. 2.例如这样的请求格式,但是呢,每次请求它都直接跳到error,刚开始还以为是网络问题,就连上wifi试了试,发现还是直接跳error.然后就开始怀疑请求格式了... 如下: function openScan(data) { mui.ajax(OPENSCAN, { data: data, dataType: 'json', type: 'post', t

在H5 App中实现自定义Token的注意事项

我们在写Hybird App时,一般都是利用Token来代替Cookie实现用户会话. 如果是发布成app的话,由于app自带了webview环境,运行时与后端服务器的关系相当于Server 2 Server,因此一般不涉及跨域的问题. 但如果发布成H5 App的话,因为是直接在终端的浏览器里运行,就会涉及到CORS(跨域资源共享)的处理问题. 关于CORS的解决办法,主要就是三个方面: 1.简单请求:不涉及Header的附加信息,直接添加以下头部响应即可: response.setHeader

H5+App的认识

读两遍官方对H5+这个技术的概述以及自家Hbuilder如何和H5+进行一个生态结合的,总结下自己的认识和一些疑问吧. 1.H5+是什么? 文档原话: HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能. 字面上看也很清楚,我们在编写APP的时候用的是,WEB语言,也就是所说H5,但是我们希望和移动设备进行一些交互,调用手机上一些原生的东西,这

H5+ app自动更新思路

第一种是一次自动更新 1.在服务器需要一个json或html文件,json最好 1 { 2 "state":"yes",//是否自动更新 3 "mark":"1.0.6",//版本号 4 "url":"http:\/\/xx\/appproject\/mm.apk"//更新的应用下载地址 5 } 2.自动更新函数 t是你当前正在运行的app的版本号 //检查自动更新 function s

H5+ app 记录一个坑 希望有缘人可以解决这个问题

最新少主在开发一款公益的web APP  用的是h5 +  然后打包的 少主两部手机 拿来测试 发现有一部手机出了问题 应用没有缓存 一离开应用就注销了 之后才知道 原来是自己设置了一个东西 在开发者模式 应用 [不保留活动 ] 这个不要开~~~ 开了 应用就没有缓存了 然后再进入就重新开发了 然后假如有授权登陆的话 直接授权不了~~~ (OK 已经解决 部分手机设置了 不保留活动 在开发者选项 应用 用户离开后即撤销每个活动 这个不能开~~!!) 原文地址:https://www.cnblog

ionic + cordova+angularJs 搭建的H5 App完整版总结

为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题 和感悟.哈哈,放张集体照.嘿嘿,项目所有的不同的team的小伙伴,一群优秀的小伙伴(大多都来自高校211,985)么么哒.下面介绍下我们组的产品和问题. 项目已放在github上:https://github.com/foreverjiangting/myApp/tree/master/myApp/myApp 一:项

Android通过Chrome Inspect调试WebView的H5 App出现空白页面的解决方法(不需要FQ)

调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能. Google提供的调试Android上WebView的步骤: 开启手机上的USB调试功能 打开Chrome浏览器,地址栏输入:Chrome://inspect,回车 Chrome会自动检测手机上打开的App,并列出可调试的WebView页面,如图: 点击Inspect,弹出开发者工具进行调试 问题就出现在这里,对于国内的程序猿来说,由于