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

一（yī）、交（jiāo）互设（shè）计流（liú）程

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

二、交互设计的作用

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

是不（bú）是遇到这些情况（kuàng）就不想用这款产品了，更别（bié）说转化了。这就（jiù）是（shì）为什么我们要做好交互设计。

三、交互的（de）十（shí）大可用性原（yuán）则

1、状态（tài）可见

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

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

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

②操（cāo）作结果反馈（kuì）

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

③位置可（kě）见

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

2、环境贴切现实

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

3、用户（hù）可控

用户拥（yōng）有控制权。用户可以自由（yóu）的控制返回和去到（dào）的（de）地方。

4、一致性原则

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

5、防（fáng）错原则

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

①重要操作提（tí）供二次确认

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

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

给（gěi）予（yǔ）用户必要的预判（pàn）性错误（wù）提示——告诉用户，这样走可能会错

③合理（lǐ）设计

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

④给予正确引导

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

⑤引起用户注意（yì）

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

6、易取原则

好记性（xìng）不如烂笔头。尽可（kě）能减少用户回（huí）忆负担，把需要（yào）记忆（yì）的（de）内容（róng）摆上（shàng）台（tái）面

①智（zhì）能获取（qǔ）

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

②让用（yòng）户选择而不是填（tián）写

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

③草稿箱或历史记录（lù）

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

④跳转明确

提供用（yòng）户明确的跳转入口（kǒu），不需要用户记忆操作（zuò）路径（jìng）

⑤行为输入代替字符输入

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

⑥可视化

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

7、灵活高效

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

①提供定制（zhì）化服务

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

还有一种是系统根据（jù）用（yòng）户常用自动整（zhěng）理归纳，以（yǐ）提升使（shǐ）用效率，减少（shǎo）用户多余（yú）操作。

②“跳过”按（àn）钮

通过用（yòng）户快捷跳过的入口（kǒu），比如常（cháng）见的：引（yǐn）导页、操作手册（cè）、还是（shì）开屏（píng）广（guǎng）告，有“跳过”或者”立即进（jìn）入“按钮真（zhēn）的很贴心。

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

对于用（yòng）户频繁（fán）使用（yòng）的部分，提供快捷的重复使用操作（zuò），比如：外卖app，用户可以快捷地（dì）再来一（yī）单，同时保存上一（yī）次（cì）操（cāo）作记录。

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

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

①对重要信息突出显示

用户注意力（lì）资源有限，应该保持信息精炼，突出重要信（xìn）息，弱（ruò）化次要信息。

②视觉（jiào）统一

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

9、容错原则

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

①提供撒销/修改功能

部分系（xì）统可提供（gòng）撤销操作（zuò）来帮助（zhù）用户减少（shǎo）因（yīn）自己的（de）冲动而进 行操作带来的后果。

②减少错误代价

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

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

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

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

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

①常驻（zhù）提示

常驻提示需要一直固（gù）定在某（mǒu）个位置实（shí）时帮助用户。红（hóng）点、数字或文字，一般出现在通（tōng）知图标或头像的右上角，用于显（xiǎn）示需（xū）要处理（lǐ）的消（xiāo）息条（tiáo）数，通过醒目视觉形式吸（xī）引（yǐn）用（yòng）户处理。

②帮助文（wén）档

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

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