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

一、交互设计流程

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

二、交（jiāo）互设计的（de）作用（yòng）

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

是（shì）不是（shì）遇到这（zhè）些情况就（jiù）不想（xiǎng）用这款产品了，更别说转（zhuǎn）化了。这就是（shì）为什么我们（men）要做好交（jiāo）互设（shè）计。

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

1、状态可见

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

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

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

②操作结果反馈

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

③位置可见

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

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

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

3、用户可控

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

4、一致性（xìng）原则

对于（yú）用（yòng）户来说，同样的文（wén）字、状态、按钮，都应该（gāi）触发相同（tóng）的事（shì）情，遵（zūn）从通用（yòng）的平（píng）台惯例；也就是，同一用语（yǔ）、功能、操作（zuò）保（bǎo）持一（yī）致（zhì）。轻量级反馈（kuì）统（tǒng）一用toast反馈，重级反馈统一（yī）用模态弹框展示。

5、防错原则

在错误（wù）发生之前就避免（miǎn）它。可以帮助（zhù）用户排除一（yī）些容易（yì）出错的情况，或在用户提交之前给他一个确认（rèn）的选项。

①重要操作提供二次确认

对于一些（xiē）不可逆或很重要的操作，系统大部分会提供二次确认提（tí）示，如此可以使用户避免因误操（cāo）作而给自己带（dài）来损（sǔn）失（shī）。

②预判错误并告知

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

③合（hé）理设计（jì）

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

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

把简（jiǎn）单留给用（yòng）户，把复杂留（liú）给自己：通过（guò）系统的优良设计约束和（hé）指引用户的操作，把出现错（cuò）误的可（kě）能降到最低。

⑤引起用户注意

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

6、易取原则

好记（jì）性不（bú）如烂笔头（tóu）。尽可能减少用（yòng）户回忆负担，把需（xū）要记忆的内容摆上台面

①智能获取

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

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

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

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

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

④跳（tiào）转（zhuǎn）明确

提供用户明确（què）的跳转入口，不需要用户（hù）记忆操作路径

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

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

⑥可视化

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

7、灵活高效

一（yī）些快（kuài）捷操作的功能，虽然会被专家（jiā）用户忽略，但可（kě）能为新手用户所使用，并帮助提升其使用效率，因此（cǐ），系统需要同时满足新（xīn）手用户和专家用户的需求。

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

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

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

②“跳过”按钮（niǔ）

通过用户快捷跳过的入口，比如常见（jiàn）的（de）：引导（dǎo）页、操作手册、还是开屏（píng）广告，有（yǒu）“跳过”或者”立即进入“按钮真（zhēn）的很贴心。

③允许用户重复（fù）操（cāo）作

对于用（yòng）户频繁使用的部分，提（tí）供（gòng）快（kuài）捷的重复使用操作，比如：外卖app，用户可（kě）以快捷地再来一单（dān），同时保存上一次操作记（jì）录。

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

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

①对重要信息突（tū）出显（xiǎn）示（shì）

用户注（zhù）意力资源有限，应该保持信息精炼，突出重要信息（xī），弱化次（cì）要（yào）信（xìn）息（xī）。

②视觉统一（yī）

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

9、容错原则

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

①提供撒销/修改功能（néng）

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

②减少错误代价

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

③提供解决（jué）方案

在出错界面（miàn）给出（chū）解决方案，可（kě）以是（shì）文字提醒或者按钮跳转（zhuǎn）等形式，帮助用户解决问题。比如缺省页的设计除了配置（zhì）插图还会（huì）有（yǒu）提（tí）示文案与操（cāo）作按钮，引（yǐn）导用户（hù）去操作，去进一步解决（jué）问题。

10、人性化帮助

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

①常驻提示

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

②帮助文档

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

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