H5游戏制作
H5游戏制作
H5游戏制作
H5案例
H5开发
扫一扫
h5定制
h5定制

回到顶部

产品必备的H5交互设计知识分享

H5交互设计 2022年12月13日

每个人对交互设计下的定义都不一样,交互设计的对象是行为,我理解的交互设计是指在交互系统中,用户使用产品的操作行为,用户行为可能是主动的也可能是被动的,也就是交互设计师、产品经理、设计师等,都需要懂得并熟练运用交互知识在产品设计上,不仅要让产品达到好用、易用、想用的目标,同时也要通过对用户行为的引导来提高页面的转化率。下面,蓝橙互动就给大家分享一下H5交互设计应该怎么做。

 

一、交互设计流程

 

H5项目制作流程通常是:产品需求 → 交互设计 → 视觉设计 → 开发。其中交互设计包含:架构图、流程图、界面原型、demo(动态原型)。交互设计的核心要素是用户、场景及任务。通俗的讲就是人在什么时间?什么地点、什么环境、什么心理下会使用我们这款产品?那使用产品的目的是什么?要通过什么行为才能达到这个目的?如何高效的引导用户达成目标?……这些过程都需要我们思考。

 

H5交互设计


二、交互设计的作用

 

目前市面上已经有很多产品,我们看一下平时在一些H5案例APP使用过程中,有没有遇到过以下这些糟糕的情况:

 

H5交互设计

 

是不是遇到这些情况就不想用这款产品了,更别说转化了。这就是为什么我们要做好交互设计。

 

三、交互的十大可用性原则

 

1、状态可见

 

状态可见是让用户知道现在的状态,对过去发生、当前目标、以及对未来去向有所了解,不致于在产品中迷路。比如用户在进行刷新,点击,评论,点赞,输入等动作时系统应该即时反馈让用户知道自己的操作是有效的,知道自己现在自己所处的状态和位置。

 

过程中反馈-进度条

 

当用户进行一些不会马上完成的任务时,系统需要有一个加载、校验、查询或计算的过程。在这个过程中,我们必须让用户的操作得到恰当的反馈,能让用户能感知到现在的进程是否成功或者进度是什么样的。比如进度、内容加载时,增加用户掌控感,消除用户的焦虑感。常见的场景有:上传、下载、更新……

 

H5交互设计


操作结果反馈

 

系统适当反馈是用户界面设计的最基本准则。当用户通过点击按钮、填写表格等一系列行为并完成最终任务时,设计师需要明确的告知用户任务的结果:失败还是成功,后续需要做什么。常用场景有:提交、增加、保存、收藏、点赞……

 

H5交互设计


③位置可见

 

告诉用户处在系统的什么位置,特别是对于新用户,需要提供必要的信息,否则容易迷惑。比如:导航菜单、面包屑、标签页、步骤条、分页器等等。

 

H5交互设计


2、环境贴切现实

 

字面解释就是系统的信息要与现实环境表现一致。使用的语言、文字等,需要是用户熟悉的、能理解、不会有歧义的。减少用户的学习成本,不要认为用户能记住你设计新颖的信息。

 

H5交互设计


3、用户可控

 

用户拥有控制权。用户可以自由的控制返回和去到的地方。

 

H5交互设计


4、一致性原则

 

对于用户来说,同样的文字、状态、按钮,都应该触发相同的事情,遵从通用的平台惯例;也就是,同一用语、功能、操作保持一致。轻量级反馈统一用toast反馈,重级反馈统一用模态弹框展示

 

H5交互设计


5、防错原则

 

在错误发生之前就避免它。可以帮助用户排除一些容易出错的情况,或在用户提交之前给他一个确认的选项。

 

重要操作提供二次确认

 

对于一些不可逆或很重要的操作,系统大部分会提供二次确认提示,如此可以使用户避免因误操作而给自己带来损失。

 

H5交互设计


②预判错误并告知

 

给予用户必要的预判性错误提示——告诉用户,这样走可能会错

 

H5交互设计


③合理设计

 

屏蔽会引起歧义的设计、本身不合理的设计,不让用户因为产品的设计缺陷而导致用户犯错。让用户频繁碰壁、产生挫折感的设计,其原因不是用户的愚蠢、而是设计的愚蠢。

 

H5交互设计


④给予正确引导

 

把简单留给用户,把复杂留给自己:通过系统的优良设计约束和指引用户的操作,把出现错误的可能降到最低。

 

H5交互设计


引起用户注意

 

利用一些视觉元素引起用户注意 ,提供警示作用,如下图。

 

H5交互设计


6、易取原则

 

好记性不如烂笔头。尽可能减少用户回忆负担,把需要记忆的内容摆上台面

 

①智能获取

 

通过智能读取用户之前填写过的信息,或者智能识别等形式,减少用户记忆负担与操作负担。

 

H5交互设计


②让用户选择而不是填写

 

比起让用户输入,让用户选择更能降低用户的记忆成本,更好地辅助用户做决策。如果,有很多的信息或者选项是用户高频率会选择的,不妨给用户提前做好选择,提供默认选项,如下图:

 

H5交互设计


③草稿箱或历史记录

 

作为用户,你不记得的操作,系统可以帮你记录。为用户提供历史记录,文本创作的过程中自动保存草稿,让用户方便查询自己的进程,这就是信息易取原则的设计。保留历史,最为常见的就是为用户保留历史搜索和历史浏览、储存账号和密码。视频APP会详细记录用户的观看记录,当用户没有看完某部电影时,下次进入直接从断点续播上次播放的位置,无需用户记忆上次看到哪里了

 

H5交互设计


④跳转明确

 

提供用户明确的跳转入口,不需要用户记忆操作路径

 

H5交互设计


⑤行为输入代替字符输入

 

这一点其实也非常好理解,一个简单的动作,比打字要轻松得多,常见的就是在设备解锁的时候,用手势解锁替代密码解锁。随着技术发展,有了更多的行为代替输入的方式,比如指纹识别和面部识别,用简单的操作,就可以达到进入系统的目的,这就避免了用户需要较多的操作和密码的记忆。

 

H5交互设计


⑥可视化

 

将选择的对象,动作,选项可视化,让用户一看就懂。注意图标符号化能让人理解,避免引起误解。

 

H5交互设计


7、灵活高效

 

一些快捷操作的功能,虽然会被专家用户忽略,但可能为新手用户所使用,并帮助提升其使用效率,因此,系统需要同时满足新手用户和专家用户的需求。

 

①提供定制化服务

 

让用户灵活定制,最典型的例子是各类软件和App的配置功能,基本上所有软件都会提供定化功能,从快捷键设置,到页面布局,再到自定义参数,软件系统会尽量提供全面的个性化置功能,来满足不同用户的使用诉求和习惯,提升用户的使用效率和体验。

 

H5交互设计

 

还有一种是系统根据用户常用自动整理归纳,以提升使用效率,减少用户多余操作。

 

H5交互设计


②“跳过”按钮

 

通过用户快捷跳过的入口,比如常见的:引导页、操作手册、还是开屏广告,有“跳过”或者”立即进入“按钮真的很贴心。

 

H5交互设计


③允许用户重复操作

 

对于用户频繁使用的部分,提供快捷的重复使用操作,比如:外卖app,用户可以快捷地再来一单,同时保存上一次操作记录。

 

H5交互设计


8、审美和简约设计

 

内容框中不应包含无关或很少用到的信息。在内容框中每增加一个信息,就意味着降低了主要信息的相对可见性。此原则根本目标是让用户快速找到界面的重要信息,引导用户的视线及操作行为。


对重要信息突出显示

 

用户注意力资源有限,应该保持信息精炼,突出重要信息,弱化次要信息。

 

H5交互设计


②视觉统一

 

好的原型是黑白灰的,很多产品经理喜欢用图片原件、用各种颜色块去“让自己的原型变的美观”,没必要。那我的原型中会出现不同级别的内容和文字,怎么体现呢?黑和灰都有不同的色度,颜色饱和度的高低可以直接让用户知道内容的优先级。

 

H5交互设计


9、容错原则

 

容错原则是指帮助用户从错误中恢复,将损失降到最低。如果无法自动挽回,则提供详尽的说明文字和指导方向。

 

①提供撒销/修改功能

 

部分系统可提供撤销操作来帮助用户减少因自己的冲动而进 行操作带来的后果。

 

H5交互设计


②减少错误代价

 

防错原则有一个非常重要的点“发现错误,及时反馈”,当用户已经操作错误的时候,系统需要及时提醒用户当前操作错误,可通过文字说明和颜色辅助的方式提醒,而不是等到用户全部操作完了之后再提醒,这样会影响用户体验。

 

H5交互设计


③提供解决方案

 

在出错界面给出解决方案,可以是文字提醒或者按钮跳转等形式,帮助用户解决问题。比如缺省页的设计除了配置插图还会有提示文案与操作按钮,引导用户去操作,去进一步解决问题。

 

H5交互设计


10、人性化帮助

 

人性化帮助原则的根本目标是用户在使用产品的过程中有所依循,因为产品已经贴心地为他们准备好了帮助方式,或者即时提示和反馈,或者客服。帮助性提示最好的方式是:

 

H5交互设计


①常驻提示

 

常驻提示需要一直固定在某个位置实时帮助用户。红点、数字或文字,一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

 

H5交互设计


②帮助文档

 

最后就是帮助文档了,一般用于解释规则或者热点问题,通常以超链接的形式存在于页面中,或者以集合形式位于设置页中,此时需要注意要易于检索。

 

H5交互设计


总的来说,尼尔森十大可用性原则可灵活运用于各个地方,可以是交互设计,也可以是界面设计,深入了解该设计原则,可以找到更好的解决方案,提高用户的使用体验。要注意的是,这10项原则是启发式(heuristics)的、广泛的经验法则,而不是具体的规定。



联系QQ:2899301896

蓝橙互动·致力于为企业提供更高效的开发服务