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

一、交互设（shè）计流程（chéng）

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

二、交互设计的（de）作用

目前市（shì）面上（shàng）已经有很多产（chǎn）品，我们看一下平时在（zài）一些（xiē）H5案例或APP使用过程（chéng）中，有没有遇到过以（yǐ）下这些（xiē）糟糕的情况：

是（shì）不是遇到这（zhè）些情况就（jiù）不想用这款产（chǎn）品了，更别说转（zhuǎn）化了。这就是为什（shí）么我们要（yào）做好交互设计。

三、交（jiāo）互的十（shí）大（dà）可用性原则

1、状态可见

状态可见是让（ràng）用户知道现（xiàn）在的状态，对（duì）过去发生（shēng）、当前目（mù）标、以及（jí）对未（wèi）来去（qù）向有（yǒu）所了解，不致于在（zài）产品（pǐn）中迷路。比如用户在进行刷新，点（diǎn）击，评论，点赞（zàn），输入等动作时系统应该即时反馈让用户知（zhī）道自己的操作是有效的，知道自己现在自己（jǐ）所（suǒ）处的状（zhuàng）态和位置。

①过程中反馈-进度条（tiáo）

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

②操作结（jié）果反馈

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

③位置可见

告诉用户处在系统的什么位（wèi）置，特别是对于新用（yòng）户，需要提供必（bì）要的信（xìn）息（xī），否（fǒu）则容易迷惑。比如：导航菜单、面包屑、标签页、步骤条、分页器（qì）等等（děng）。

2、环境贴切现实

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

3、用户（hù）可控

用户拥（yōng）有控制权。用（yòng）户（hù）可以自由的控（kòng）制（zhì）返回和去到（dào）的地方（fāng）。

4、一致（zhì）性原则（zé）

对于（yú）用户来说，同样的文字、状态、按钮，都应该触发相同的事（shì）情，遵从通用的平台惯（guàn）例（lì）；也（yě）就是，同一用语（yǔ）、功能、操（cāo）作保持一致。轻量级反馈（kuì）统一用toast反（fǎn）馈，重级反馈统一用模（mó）态弹框展示。

5、防错原则

在错误（wù）发（fā）生之（zhī）前就（jiù）避免它。可以（yǐ）帮（bāng）助用户排（pái）除一些（xiē）容易（yì）出错的情（qíng）况，或在用户（hù）提（tí）交（jiāo）之前（qián）给他一个（gè）确（què）认的（de）选项。

①重要操作提供二次确认

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

②预判错误并告（gào）知（zhī）

给予用户必（bì）要的预判性错误（wù）提示——告诉（sù）用户，这（zhè）样走（zǒu）可能会错（cuò）

③合理设计

屏蔽会引起（qǐ）歧（qí）义的设计（jì）、本身不合理的设计（jì），不让用户因为产品的（de）设计缺（quē）陷而导致（zhì）用户犯错。让用户（hù）频繁碰壁、产生挫折感的设（shè）计，其原因不是用户的愚蠢、而（ér）是设计的（de）愚蠢。

④给予（yǔ）正确引导

把简单留给用户（hù），把复杂留给自己：通过（guò）系统的优良（liáng）设计约（yuē）束和指引用户（hù）的操作（zuò），把出现错误的可能降到最低（dī）。

⑤引起用户注意

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

6、易取原则

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

①智能获（huò）取

通过（guò）智能读取用（yòng）户之前填写过的信息，或者智能（néng）识别等形式，减少用户记忆负担与操作负担。

②让用户选择（zé）而不是填写

比起让用户输入，让用户选择更能降（jiàng）低用户（hù）的记忆成本，更（gèng）好地辅助用（yòng）户做决策。如果（guǒ），有很多（duō）的（de）信息或者（zhě）选项是用户（hù）高频率（lǜ）会选择的，不妨给（gěi）用户提前做好选择，提（tí）供默认选项，如下（xià）图：

③草（cǎo）稿箱或历（lì）史记录

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

④跳转明（míng）确

提供用户明确的跳转入口，不（bú）需（xū）要（yào）用户记忆操作路径

⑤行为输入（rù）代替字符输入（rù）

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

⑥可视化

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

7、灵（líng）活高效

一些（xiē）快捷操作的功能，虽然会（huì）被专家用户忽略，但可能为新（xīn）手用户所使用（yòng），并帮助（zhù）提升其使用效率，因此，系统需要同时满足新手用户和专家用（yòng）户的需求。

①提（tí）供定制化服（fú）务

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

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

②“跳过”按钮

通（tōng）过用（yòng）户快（kuài）捷跳过的入口，比如常见的（de）：引导页、操作手册、还是开屏广（guǎng）告，有“跳过（guò）”或者”立即（jí）进（jìn）入（rù）“按钮真（zhēn）的很贴心。

③允许用（yòng）户重复操作

对于用户频（pín）繁使用的部（bù）分，提供快捷（jié）的重复使用操作，比如：外卖（mài）app，用户（hù）可以快捷地再来一单，同（tóng）时（shí）保存上一（yī）次操作记录。

8、审（shěn）美（měi）和简约（yuē）设计

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

①对重要（yào）信息突出显示

用户注（zhù）意力（lì）资（zī）源有限，应该保（bǎo）持信息精炼，突出重要信息，弱化次要信（xìn）息。

②视觉（jiào）统一

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

9、容错原则

容（róng）错原则是指帮助用户（hù）从错误中恢复，将损失降到最（zuì）低。如果无法自（zì）动挽回，则提供详尽（jìn）的（de）说明文字和指导方向。

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

部分系统可提供（gòng）撤销操（cāo）作来帮助用户（hù）减少因自己的冲（chōng）动而进 行操（cāo）作带（dài）来的后果。

②减少错误（wù）代（dài）价（jià）

防错原则（zé）有一个非常重要的点（diǎn）“发现错误，及时反馈”，当用户已经（jīng）操作错误（wù）的时候，系统需要及时提醒用户（hù）当前操作错误（wù），可通过文字说明和（hé）颜色辅助的方式提醒，而不是等到用户全部操作完（wán）了之后（hòu）再（zài）提醒，这样会影响（xiǎng）用户体验。

③提供解决方案

在出错界面给出解决方案（àn），可以是文字提醒或者（zhě）按钮跳转等形式，帮助用户解决问题。比如缺省页的设计除了配（pèi）置插图还会有提示（shì）文（wén）案与操作按钮，引导用（yòng）户去操作，去进一（yī）步解决（jué）问题。

10、人性化帮助

人性化帮助原则的根本目标是用户（hù）在使用产（chǎn）品的过程中有所（suǒ）依循，因为产品已经贴心地为他们准备好了帮助（zhù）方式，或者即时提示和反馈，或者客服。帮助性提示最（zuì）好的方式是：

①常驻提示

常驻提示需要（yào）一（yī）直固定（dìng）在某个位置实时帮助用户。红点、数字（zì）或文字（zì），一（yī）般出现（xiàn）在通知图标或头像的右上角，用于（yú）显示需要处理的消（xiāo）息条数，通过醒目视觉形式吸（xī）引用户处理。

②帮助文（wén）档

最后（hòu）就是帮助文档了，一般用（yòng）于解释规则或者热点（diǎn）问题，通常以超链接的形式存在于页面中，或者以集合（hé）形式（shì）位于设置页（yè）中（zhōng），此时需要注意要易（yì）于检索。

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