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

一（yī）、交（jiāo）互设计（jì）流程（chéng）

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

二（èr）、交互设计的作用（yòng）

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

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

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

1、状态可见

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

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

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

②操作结果反馈

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

③位置可见

告诉用户处（chù）在系统的什（shí）么位置，特别是对于新（xīn）用户，需要提供必要的信息，否则容易迷惑。比如：导航菜单、面（miàn）包屑、标（biāo）签页、步骤条（tiáo）、分页（yè）器等等。

2、环境贴（tiē）切现（xiàn）实

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

3、用户可控

用户拥有控制（zhì）权。用户可以自由的控制返回（huí）和去到的（de）地方。

4、一致性原（yuán）则

对于用户来说，同样的文字（zì）、状态、按钮，都（dōu）应该触（chù）发相同的事情，遵从通用的平台惯（guàn）例（lì）；也就是，同一用语、功能、操（cāo）作（zuò）保持一致。轻量（liàng）级反馈统（tǒng）一用（yòng）toast反馈（kuì），重级反馈统（tǒng）一用模（mó）态（tài）弹框展示。

5、防错原则

在错误发生之前就避免（miǎn）它。可以帮助用户排除一些容易出错的情况，或（huò）在（zài）用户提交之前给他一个确认的选项。

①重要操作提供（gòng）二次确认（rèn）

对于一（yī）些不可逆或很重要（yào）的操（cāo）作（zuò），系统大部分会提供二次确认（rèn）提示，如此可以（yǐ）使用户避免（miǎn）因误操（cāo）作而给自己（jǐ）带来损失。

②预判错误并告知

给予（yǔ）用户必要的预判（pàn）性错（cuò）误（wù）提示（shì）——告诉（sù）用户，这样走可能会（huì）错

③合理设计

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

④给予正确引导（dǎo）

把（bǎ）简单留给（gěi）用（yòng）户，把复杂留给自己（jǐ）：通过系统的优良设计约（yuē）束和指引（yǐn）用户的（de）操作，把出现错（cuò）误的可能降到最低。

⑤引起用户注意

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

6、易取原则（zé）

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

①智能获（huò）取

通（tōng）过（guò）智能读取用户之前（qián）填（tián）写过的信息，或者智（zhì）能识别等形式（shì），减少用户记（jì）忆负担与（yǔ）操（cāo）作负（fù）担。

②让用户选择而不是填写

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

③草稿箱或历史（shǐ）记（jì）录

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

④跳转明确

提供用户（hù）明确的跳（tiào）转入口，不需要用户记（jì）忆操作路径

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

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

⑥可视化

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

7、灵活（huó）高效

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

①提供定制化服务（wù）

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

还有一种是（shì）系统根（gēn）据（jù）用户常用自动整理归纳（nà），以提升使用效率，减（jiǎn）少用户多余操作。

②“跳过”按（àn）钮（niǔ）

通过（guò）用户快捷跳过的入口，比如常见的：引导页、操（cāo）作手册、还是开屏广告，有“跳过”或（huò）者”立即进入（rù）“按钮真的很贴（tiē）心。

③允许用户重复操作

对（duì）于用户频繁使用的部分，提供快捷的重复使用操作，比如：外卖app，用户（hù）可以快捷地再（zài）来一单，同时保（bǎo）存上（shàng）一次操作记录。

8、审美和简约设计

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

①对重要信息突出显（xiǎn）示

用户注意力资（zī）源有限，应（yīng）该（gāi）保持（chí）信（xìn）息（xī）精炼，突出重要信（xìn）息，弱（ruò）化次（cì）要信息。

②视觉统一

好的原型是黑白灰的，很多（duō）产品经理喜（xǐ）欢用图片原件、用各种颜色块去“让自己的（de）原型（xíng）变的（de）美（měi）观（guān）”，没必要。那我的原型（xíng）中会（huì）出（chū）现（xiàn）不同级别的内容和文（wén）字，怎么体现呢（ne）？黑和灰都有不同的色（sè）度，颜色饱和（hé）度的（de）高低可以直接（jiē）让用户知道内容的优先级。

9、容错原（yuán）则

容错（cuò）原则是指帮助（zhù）用户从（cóng）错误中恢复，将损失降（jiàng）到最低。如果（guǒ）无法自动挽回，则提（tí）供（gòng）详尽的说明文字和指导（dǎo）方向。

①提供撒销/修改功能

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

②减少（shǎo）错误代价

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

③提供解（jiě）决方案（àn）

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

10、人性化（huà）帮助

人性化帮助（zhù）原则的根本目标是用户在使（shǐ）用产品的过（guò）程中有所依循，因为（wéi）产品已经贴心地为他（tā）们准备好了帮助方式，或者即（jí）时（shí）提（tí）示和反馈，或者（zhě）客服。帮助性（xìng）提示最好的（de）方（fāng）式是：

①常驻（zhù）提示

常驻提（tí）示需要（yào）一直固定在某个位置实时帮助用户。红点、数字或（huò）文字，一般出现在通（tōng）知图标或头像的右上角，用于显示需要（yào）处理的（de）消息条数，通过（guò）醒目视觉形式吸引用户处理（lǐ）。

②帮助文档

最后就是帮助文档了，一般用于解释规（guī）则或者热点问题，通（tōng）常以（yǐ）超链接的形式存在于页面中，或（huò）者以集合形（xíng）式位（wèi）于设置页中，此时需要注意要易（yì）于检（jiǎn）索。

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