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

一、交互设计流程

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

二、交互设计的作用

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

是不是遇到这些情（qíng）况就不想用这款（kuǎn）产品（pǐn）了，更别说转化了。这就（jiù）是为（wéi）什么我们要做好（hǎo）交互设计。

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

1、状态可见

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

①过程中反（fǎn）馈-进度条

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

②操作结果反馈

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

③位（wèi）置可见

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

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

字（zì）面解释就是系（xì）统的信息要与现实环境表（biǎo）现（xiàn）一致。使用的语言、文（wén）字等，需要是用户熟悉的、能理解（jiě）、不（bú）会有（yǒu）歧（qí）义的。减少用户的学习（xí）成本，不（bú）要认（rèn）为用户能记住你设计新颖的信息。

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

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

4、一致性原则

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

5、防错原（yuán）则（zé）

在错误发生之（zhī）前就避免它。可以帮助用户排除一些（xiē）容易出错的情况，或在用（yòng）户提（tí）交之前给他一（yī）个确认的选项。

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

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

②预（yù）判错误并告知

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

③合理设计（jì）

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

④给予（yǔ）正确（què）引导

把简（jiǎn）单留给用（yòng）户，把复（fù）杂留给自己：通过系统的优良设（shè）计约（yuē）束和指引用户（hù）的操（cāo）作，把出现错误的可能（néng）降到（dào）最低。

⑤引起用户（hù）注意

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

6、易取原则（zé）

好记性不如（rú）烂笔头。尽可（kě）能减（jiǎn）少（shǎo）用户回（huí）忆负担，把需要记忆的（de）内容摆上台面（miàn）

①智（zhì）能获取

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

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

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

③草稿箱或历史记录

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

④跳转明（míng）确

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

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

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

⑥可视化

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

7、灵活高效

一（yī）些快捷操（cāo）作的功（gōng）能，虽然会被专家用户忽略，但可能（néng）为新手用户所（suǒ）使（shǐ）用，并（bìng）帮助提升其使用效率（lǜ），因此，系统需要同时满足新手用户和专家用户的需求（qiú）。

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

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

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

②“跳过”按钮（niǔ）

通过用户快捷跳过（guò）的入口，比如（rú）常见的：引导页、操作手册、还（hái）是开屏广（guǎng）告，有（yǒu）“跳（tiào）过”或者（zhě）”立即进入（rù）“按钮真（zhēn）的（de）很（hěn）贴心（xīn）。

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

对于用户频繁（fán）使用的部分，提（tí）供（gòng）快捷的（de）重复使（shǐ）用操作，比如：外卖app，用户可以快捷地再来一单，同时保存上一次操作（zuò）记录。

8、审美和简约设（shè）计

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

①对重要信息突出显示

用（yòng）户注意力资源有（yǒu）限（xiàn），应该保持信息精炼，突出（chū）重要信息（xī），弱化次（cì）要信息。

②视（shì）觉统一

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

9、容错原则

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

①提供撒销/修改功（gōng）能

部（bù）分系统（tǒng）可（kě）提供撤销操作来帮助（zhù）用户减少（shǎo）因（yīn）自己的冲动而进 行操作带（dài）来的后果（guǒ）。

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

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

③提供解决（jué）方案（àn）

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

10、人性化帮助

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

①常驻提示（shì）

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

②帮助文档

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

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