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

一、交互设计（jì）流程

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

二、交互设计的作用

目前市面上已经有（yǒu）很多（duō）产品，我们看一下平时在一（yī）些H5案例或（huò）APP使用过程中，有没（méi）有遇到（dào）过以下（xià）这些糟糕的（de）情况：

是不是（shì）遇到（dào）这些（xiē）情况就不想用这款（kuǎn）产品了，更别说转化了。这就是为什么我（wǒ）们要做（zuò）好（hǎo）交（jiāo）互设计。

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

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

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

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

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

②操作结（jié）果反（fǎn）馈

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

③位置可见（jiàn）

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

2、环（huán）境贴切现实

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

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

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

4、一（yī）致性原则

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

5、防（fáng）错原则（zé）

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

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

对于（yú）一些不可逆（nì）或（huò）很重（chóng）要（yào）的操作，系统大部（bù）分（fèn）会提（tí）供二次（cì）确认（rèn）提示，如此可以使用户避免因误（wù）操作而给自己带来损失（shī）。

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

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

③合（hé）理设（shè）计

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

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

把简单留给（gěi）用户，把复杂（zá）留给自己：通过系统（tǒng）的优良设计（jì）约束和指引（yǐn）用户的操作，把出现错误（wù）的可（kě）能降（jiàng）到最（zuì）低。

⑤引起（qǐ）用户注意

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

6、易取原则

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

①智能（néng）获取

通过智能读取用户之前填（tián）写过的信息，或者智能识（shí）别（bié）等（děng）形式，减（jiǎn）少用户记忆负担（dān）与操作负（fù）担（dān）。

②让用（yòng）户（hù）选择而不是填写

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

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

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

④跳转明确

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

⑤行为输（shū）入代替字符输（shū）入

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

⑥可视化

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

7、灵活高效

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

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

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

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

②“跳过”按（àn）钮

通过用户（hù）快捷跳过的入口，比（bǐ）如常见的：引导页、操作手册、还是（shì）开屏广告，有“跳过”或者”立即（jí）进（jìn）入“按钮真的很贴心。

③允许用户重（chóng）复操（cāo）作

对于用户频繁使用的（de）部分，提供快捷的重复使用操作，比如：外卖app，用户可以快捷（jié）地再来（lái）一（yī）单，同（tóng）时保存（cún）上一次操（cāo）作记录。

8、审美和（hé）简约（yuē）设计

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

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

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

②视觉（jiào）统（tǒng）一

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

9、容错原则（zé）

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

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

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

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

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

③提供解决（jué）方（fāng）案

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

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

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

①常驻提示

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

②帮助文档

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

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