每个人对交互设计下的定义都不一样，交互设计的对象是行为，我理解的交互设计是指在交互（hù）系统（tǒng）中，用户使用（yòng）产（chǎn）品的操（cāo）作行为，用户行为（wéi）可能是主动的也可能是被动的，也就是交（jiāo）互设计师、产（chǎn）品经理、设计师等，都需要懂得并熟练运用交互知识（shí）在产品设计上，不（bú）仅要（yào）让产品达到好用、易用、想用的目标，同（tóng）时也要（yào）通过对用户行为的引导来提高页（yè）面的转（zhuǎn）化率。下面，完美和蓝橙（chéng）互动就给（gěi）大家分享（xiǎng）一下H5交互设计（jì）应该怎么做（zuò）。

一（yī）、交互设计流程

H5项（xiàng）目制作流程通常是：产品需求 → 交（jiāo）互设计 → 视觉（jiào）设计 → 开发（fā）。其（qí）中交互设计包含：架构图、流程图、界面（miàn）原型、demo(动态原型)。交互（hù）设计（jì）的核（hé）心要素是用户、场景及任务。通俗的讲就是人在什么时间？什么地点、什么环境、什么心（xīn）理下会使用我们这款产品？那使用产品（pǐn）的目的是什么？要通过什么行为才能达到这个目的？如何高效的引导用户达成目标？……这（zhè）些过程都需要我们思考。

二、交（jiāo）互设计的作用

目前（qián）市面上已经有很多产品，我们看一（yī）下平时在（zài）一些H5案例或APP使用过（guò）程中，有（yǒu）没有遇到过以下这些糟糕的情况：

是不（bú）是（shì）遇（yù）到这些情（qíng）况就不（bú）想用这（zhè）款产品了（le），更别（bié）说转化（huà）了。这就是为什么我们要做好交互设计（jì）。

三（sān）、交互（hù）的十大可用性原则（zé）

1、状态（tài）可见（jiàn）

状态可见是让用户（hù）知道现在的（de）状态，对过（guò）去发（fā）生（shēng）、当前目标（biāo）、以及对未（wèi）来去向有所（suǒ）了解，不致于在产（chǎn）品中迷路（lù）。比如用户在进行刷新，点击，评论，点赞，输入等动作时系（xì）统应该即时反馈让用（yòng）户（hù）知道（dào）自己的操作是有效（xiào）的（de），知道（dào）自己现在自己所处的状态和位置。

①过程中（zhōng）反馈-进度条

当用户进行一些不会马上完成的任务时（shí），系统（tǒng）需要有一个加（jiā）载、校验、查询或计算的过程（chéng）。在这个过（guò）程中，我们（men）必须（xū）让用户的（de）操作得到（dào）恰当的反馈，能让用户能感（gǎn）知到现在的（de）进程是否成功或者进度是什么样（yàng）的。比（bǐ）如进度、内容加载时，增（zēng）加用户掌控感,消（xiāo）除用户的焦虑感（gǎn）。常（cháng）见的（de）场景有：上传、下载、更（gèng）新（xīn）……

②操作结果反馈（kuì）

系（xì）统适当反（fǎn）馈是（shì）用户界面（miàn）设计的最基本准则。当用（yòng）户通过点击（jī）按钮、填写表（biǎo）格等一系列行为并完成最终任务时，设计师需要明确的告知（zhī）用户（hù）任务的结果（guǒ）：失败还（hái）是成功，后续需要做什么。常（cháng）用场景有：提交、增加、保存、收藏、点赞……

③位置可见

告诉用户处在系（xì）统的什么位置，特别是对（duì）于新用户，需要提供（gòng）必要的（de）信息，否（fǒu）则容易迷（mí）惑。比如：导（dǎo）航菜单、面包屑、标（biāo）签页（yè）、步骤条（tiáo）、分页器等等。

2、环境贴切（qiē）现实

字（zì）面（miàn）解（jiě）释就是系（xì）统的信息（xī）要与现实环境（jìng）表（biǎo）现（xiàn）一致。使用的语言、文字等，需要是用户熟（shú）悉的、能理（lǐ）解（jiě）、不会有歧义的。减少用户（hù）的学习成（chéng）本（běn），不（bú）要认为用户能记住你设计新（xīn）颖的信息。

3、用户（hù）可控（kòng）

用户拥（yōng）有控制权。用户可以自由（yóu）的控制返回和去到的地方（fāng）。

4、一致性原则

对于用户来说（shuō），同样（yàng）的文（wén）字、状（zhuàng）态（tài）、按钮（niǔ），都应该触发相同的（de）事情，遵从通用的平台惯例（lì）；也就是，同一用语、功能、操作保持一（yī）致。轻量级反馈统一用toast反馈（kuì），重（chóng）级反（fǎn）馈统一用模态弹框展示。

5、防错原则（zé）

在错误发（fā）生之前就避（bì）免它。可以（yǐ）帮（bāng）助用（yòng）户排（pái）除（chú）一些容易出（chū）错的情况（kuàng），或（huò）在用户提交之前（qián）给他（tā）一个（gè）确（què）认的选项（xiàng）。

①重要（yào）操作提供二次（cì）确认

对于一些不可逆或很重要的操作（zuò），系统大部分会提供二次（cì）确认提示，如此可以使用户避（bì）免因误操作而给（gěi）自己带来（lái）损失。

②预判错误并（bìng）告（gào）知

给予用（yòng）户必（bì）要的预判性错误提示（shì）——告（gào）诉用户，这样走可能会错

③合理设计

屏（píng）蔽（bì）会引起（qǐ）歧义的设计、本身不合理的设计（jì），不让用户因为产品的设计缺陷（xiàn）而导致用户犯错。让用户（hù）频繁碰壁、产生挫折感的设计，其原因不是（shì）用户的愚（yú）蠢、而是设计的愚蠢。

④给予正确（què）引导

把（bǎ）简单留给用户，把复杂留给自己：通过系统（tǒng）的优良设（shè）计约（yuē）束和指引用户的操作，把出现错（cuò）误（wù）的可能降到（dào）最低（dī）。

⑤引起用户（hù）注意

利用一些视觉元（yuán）素引起用（yòng）户注意 ，提供（gòng）警示作用，如下图。

6、易取原（yuán）则

好记性不如烂笔头。尽可能减少用（yòng）户回忆负担（dān），把需要记（jì）忆的内容摆（bǎi）上台面

①智能获取

通过智能读取用（yòng）户之前填写过的信息，或者智（zhì）能识别等形（xíng）式，减少（shǎo）用（yòng）户记忆负担（dān）与操作负担。

②让用户（hù）选择而不是（shì）填写

比起让用（yòng）户输入，让（ràng）用（yòng）户选（xuǎn）择（zé）更能降低用户的记忆成本（běn），更好地辅助用户做决策。如果，有很多的信息或者选项是用户高频率会选择的，不妨给用（yòng）户提前做好选择，提（tí）供（gòng）默认选项，如下图：

③草稿（gǎo）箱或（huò）历史记录

作为用户，你不记得的操作，系统可（kě）以帮你记录。为用户（hù）提供（gòng）历史记录，文本创作的过程中（zhōng）自（zì）动保存（cún）草稿，让用户方便查询自己（jǐ）的进程，这就是（shì）信息易取原则的设计。保留历史（shǐ），最为常见的就是（shì）为（wéi）用户保留历史搜索和历（lì）史浏（liú）览（lǎn）、储存（cún）账号和密码（mǎ）。视频（pín）APP会详细记录用户的（de）观看（kàn）记录，当用户没有看完某（mǒu）部（bù）电影时，下次进入直接（jiē）从断（duàn）点续播上次播（bō）放的位置，无需用户记忆上次看到哪里（lǐ）了。

④跳转明确

提供用户（hù）明确（què）的跳（tiào）转（zhuǎn）入口，不需要用户记忆操（cāo）作路径

⑤行为（wéi）输入（rù）代替字（zì）符输入

这（zhè）一点其实也非（fēi）常（cháng）好理解，一个简单的（de）动作，比（bǐ）打字（zì）要轻（qīng）松（sōng）得（dé）多，常见的就是在设备解锁的时候（hòu），用手势解锁替代密码解锁。随着技术发（fā）展，有了更（gèng）多的（de）行为（wéi）代（dài）替输入的方式，比（bǐ）如指纹识（shí）别和面部（bù）识别（bié），用（yòng）简单的（de）操作（zuò），就可以达到进入系（xì）统的目的，这（zhè）就避免了用户需要（yào）较多的操（cāo）作和密（mì）码的记忆。

⑥可视化

将选择的对象，动（dòng）作，选项可视化，让用（yòng）户一看就懂。注意图标符号化能让（ràng）人（rén）理（lǐ）解（jiě），避免引起误解。

7、灵（líng）活高效

一些快捷操（cāo）作的（de）功能，虽然会被专家用（yòng）户忽略，但可能为新手用户所使用，并（bìng）帮助提升其使（shǐ）用效率，因此，系（xì）统需要同（tóng）时满（mǎn）足新手（shǒu）用户和（hé）专家用户的需（xū）求。

①提供定制化服务

让用户灵活定制（zhì），最典（diǎn）型的（de）例子是各类软（ruǎn）件和（hé）App的配置功能，基本（běn）上（shàng）所有软件都会提供定化（huà）功能，从（cóng）快捷键（jiàn）设置，到页面布局，再到自定（dìng）义参数，软件系统会尽量提（tí）供全面的个性化置功能，来满足不（bú）同用（yòng）户的使用诉求和习惯（guàn），提（tí）升用户（hù）的使用效率和体（tǐ）验。

还有一种是系统根据用户常用（yòng）自动整理归纳，以提升使用（yòng）效率，减（jiǎn）少（shǎo）用户多余操作。

②“跳过”按钮

通过用（yòng）户快捷跳过（guò）的入口，比（bǐ）如常见（jiàn）的：引导页、操作手册、还是开屏广告，有“跳过”或者”立即进入“按钮（niǔ）真的很（hěn）贴心。

③允许用户（hù）重复操作

对于用户频繁使用的部（bù）分，提供快捷的重复使用操作，比（bǐ）如：外（wài）卖app，用（yòng）户可（kě）以快捷地再来一单，同时保存上一（yī）次操作记录（lù）。

8、审美和简（jiǎn）约（yuē）设计

内容框中不（bú）应包含无关或很少用到的信息（xī）。在内容框中每增加一个（gè）信息，就（jiù）意味着降低了（le）主要信息的相对可见性。此原（yuán）则（zé）根本（běn）目标是让用户快（kuài）速找到界面的重要（yào）信息，引（yǐn）导用户的视线及操（cāo）作行为（wéi）。

①对重（chóng）要信息突出显示（shì）

用户注意力（lì）资源有限，应该保持信息精炼，突出重要（yào）信（xìn）息，弱化次（cì）要信息。

②视觉统（tǒng）一

好（hǎo）的原型是黑白灰的，很多产（chǎn）品经理（lǐ）喜（xǐ）欢用（yòng）图片原（yuán）件（jiàn）、用各（gè）种颜色块去“让自己的原（yuán）型变的美观”，没必要（yào）。那我的（de）原型中会出现不同级别的（de）内（nèi）容和文字，怎么体现（xiàn）呢？黑和灰都有不同的色度，颜色饱（bǎo）和（hé）度的（de）高低（dī）可以直接让用户知道内容的优先级。

9、容错原（yuán）则

容错原则（zé）是指帮助用户从错误中恢复，将损（sǔn）失降到最低。如果（guǒ）无（wú）法自动挽回，则提供详尽的说明文字和（hé）指导方向。

①提（tí）供（gòng）撒销/修改功能

部分系统可提供撤销操作来帮（bāng）助用（yòng）户（hù）减少因自己的冲动而进 行操作带来的后果。

②减少错误代价

防错原（yuán）则有一（yī）个（gè）非常重要的点“发现错误（wù），及时反馈”，当用户已经（jīng）操作错误的（de）时候，系统需要及时（shí）提醒（xǐng）用户当前操作错误，可通（tōng）过（guò）文（wén）字说明和颜色（sè）辅助（zhù）的方（fāng）式提醒，而不（bú）是等到（dào）用户全部操作（zuò）完了之后再提醒，这样会（huì）影响用户体验（yàn）。

③提供解决方（fāng）案（àn）

在出错界面给（gěi）出（chū）解决方案，可（kě）以是文（wén）字提（tí）醒或者按钮跳（tiào）转（zhuǎn）等形式，帮助用（yòng）户解决问题。比如缺省页（yè）的设（shè）计（jì）除了配置插（chā）图（tú）还（hái）会（huì）有提示文案（àn）与操作按钮，引（yǐn）导用户（hù）去操作，去进一（yī）步解决（jué）问题。

10、人（rén）性（xìng）化帮助

人性化帮助原（yuán）则的根本目标（biāo）是用户（hù）在（zài）使用（yòng）产品的过程中有所依循，因为产品（pǐn）已经贴心地为他们准（zhǔn）备好了（le）帮助方式，或者即时提（tí）示（shì）和反馈，或者客服。帮助性（xìng）提（tí）示最好（hǎo）的方式是（shì）：

①常驻（zhù）提示（shì）

常驻提示需要一直固定在某（mǒu）个（gè）位置实时（shí）帮助（zhù）用户。红点、数（shù）字或文字，一般出（chū）现在通知图标或头像的右上角，用于（yú）显示需（xū）要（yào）处理的消息条（tiáo）数，通过醒目视觉形（xíng）式吸引（yǐn）用户（hù）处理。

②帮助文档

最后就是帮助（zhù）文（wén）档（dàng）了，一般用于（yú）解释规则或者热点问题，通常以超链接的形式存在于页面（miàn）中，或者以集合形（xíng）式位于（yú）设置页（yè）中，此时需（xū）要注（zhù）意要易于检索（suǒ）。

总的来说，尼尔森十大可用性原（yuán）则可灵活运用于各个地方，可以是交互（hù）设（shè）计，也可以是界（jiè）面（miàn）设（shè）计，深入了（le）解该设（shè）计原（yuán）则，可以（yǐ）找到更好的解决（jué）方案，提高（gāo）用户的使用体验。要（yào）注意的是（shì），这10项原（yuán）则（zé）是启发（fā）式（heuristics）的（de）、广（guǎng）泛（fàn）的经验法（fǎ）则，而不是具体的规定。