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

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

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

二、交互设（shè）计的作用

目前市面上已（yǐ）经有很多产品，我们看一下平时（shí）在一些H5案例或（huò）APP使（shǐ）用过程（chéng）中，有没有遇到过以下这（zhè）些糟糕的情（qíng）况：

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

三（sān）、交互的（de）十大（dà）可用（yòng）性原则

1、状态可见

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

①过程（chéng）中反馈-进度条

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

②操作结果反馈

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

③位置可见

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

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

字面解释就是系统（tǒng）的信息要与现实环（huán）境表现一（yī）致。使用的语言（yán）、文字（zì）等，需要是用户熟悉的（de）、能（néng）理解、不会有歧义的。减少用户的学习成本，不要认为用户能记住你设计新颖的（de）信息。

3、用户可（kě）控（kòng）

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

4、一致性原则

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

5、防错原则

在错误发生（shēng）之前就避免它。可以帮助用户排除一些（xiē）容易出错的情况，或在用户（hù）提交（jiāo）之前给（gěi）他一个（gè）确认的选（xuǎn）项。

①重要操作提（tí）供二（èr）次（cì）确（què）认

对于（yú）一些（xiē）不可逆或很重（chóng）要的操作（zuò），系统大部（bù）分（fèn）会提供（gòng）二次确（què）认提示（shì），如此可以使用户避免（miǎn）因（yīn）误操作而给自己带来（lái）损失。

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

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

③合理设计

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

④给予正（zhèng）确引导

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

⑤引（yǐn）起用户注意（yì）

利用一些（xiē）视觉元素引起用户注意（yì） ，提供警示作用，如下（xià）图。

6、易取原则

好（hǎo）记性不如烂笔（bǐ）头。尽可能减少用户回忆（yì）负担，把需要记（jì）忆的内容（róng）摆上台面

①智能（néng）获取（qǔ）

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

②让用户（hù）选（xuǎn）择而不是填写

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

③草稿箱（xiāng）或（huò）历史记（jì）录

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

④跳（tiào）转明确

提（tí）供用户明（míng）确的跳（tiào）转入口，不需要（yào）用户记忆操作（zuò）路径

⑤行为输入代（dài）替字符（fú）输入

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

⑥可（kě）视化

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

7、灵（líng）活（huó）高效

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

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

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

还有一种是系统根据用户常（cháng）用自动整理归纳，以提（tí）升使（shǐ）用（yòng）效率，减少用户多（duō）余操作。

②“跳过（guò）”按钮

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

③允许用户重复操作

对于用户频繁使（shǐ）用的部分（fèn），提供（gòng）快（kuài）捷的重复使用操（cāo）作，比如：外卖app，用户（hù）可以快捷地再来一（yī）单，同（tóng）时保存（cún）上一次操作记录。

8、审美和简约设计

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

①对重要信（xìn）息突出显示

用户（hù）注意力资（zī）源有限（xiàn），应该保持信（xìn）息精炼（liàn），突（tū）出重要信息，弱（ruò）化次要（yào）信（xìn）息。

②视觉统一

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

9、容错原则（zé）

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

①提供撒销（xiāo）/修改功能

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

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

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

③提（tí）供解决方案

在出错界面给出解决（jué）方（fāng）案，可以是文字提（tí）醒（xǐng）或者按钮（niǔ）跳转等（děng）形（xíng）式（shì），帮助用户解决问题。比如缺（quē）省页的设计除（chú）了配置（zhì）插（chā）图还会有提示文案与操作按钮，引（yǐn）导用（yòng）户去操作，去（qù）进一步解决问题（tí）。

10、人性化（huà）帮（bāng）助

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

①常驻提示

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

②帮助文（wén）档

最（zuì）后就（jiù）是帮助（zhù）文档了，一般用于解（jiě）释规则或（huò）者热点（diǎn）问题，通常以超（chāo）链接的形（xíng）式存（cún）在于页面中，或者以（yǐ）集（jí）合（hé）形式位于（yú）设置页中，此（cǐ）时（shí）需（xū）要注（zhù）意（yì）要易于检索。

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