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

一、交互设计流程

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

二（èr）、交（jiāo）互设计的作用

目前（qián）市面上已经有（yǒu）很多产品（pǐn），我们看一下（xià）平时（shí）在一些H5案例或APP使用（yòng）过程中，有没有遇到（dào）过以下这些糟糕的情况：

是不是遇到这些（xiē）情况就不（bú）想用（yòng）这（zhè）款产品了，更别说转化了。这就是为什么我（wǒ）们要做好交互设计。

三（sān）、交互的十（shí）大可用性原则

1、状态可见

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

①过（guò）程中反馈-进度（dù）条

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

②操作结果反馈

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

③位（wèi）置（zhì）可见

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

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

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

3、用户可控

用户拥（yōng）有（yǒu）控制权。用户可以自（zì）由（yóu）的控制返回和去到的地方。

4、一致性原则（zé）

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

5、防错原（yuán）则

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

①重要操作提供二次确认

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

②预判错（cuò）误并告知（zhī）

给（gěi）予用户必要（yào）的（de）预（yù）判性错误提示——告诉用户，这样走可能会（huì）错（cuò）

③合理设计

屏蔽（bì）会引起歧义的（de）设计、本身不合理的设计（jì），不让用户因为（wéi）产品的设计（jì）缺陷而导致用户犯错。让用户频繁碰壁、产生挫折感的设计，其（qí）原因不是用户的（de）愚蠢、而是（shì）设计的（de）愚蠢。

④给予正确引导

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

⑤引起用户注意

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

6、易取原则

好记性不如（rú）烂笔头（tóu）。尽可能减（jiǎn）少用户回忆负担，把需要记忆的内（nèi）容摆（bǎi）上（shàng）台面

①智能获取

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

②让（ràng）用户选（xuǎn）择而（ér）不是填（tián）写（xiě）

比起让用户输入（rù），让用户选择更能降低（dī）用户的记忆成本，更（gèng）好地（dì）辅助用户做（zuò）决策。如果，有很多的信息或者选项是用户（hù）高（gāo）频（pín）率会选择的，不妨给用户（hù）提前（qián）做（zuò）好选择，提供默（mò）认选项，如下图：

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

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

④跳转（zhuǎn）明确（què）

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

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

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

⑥可视（shì）化

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

7、灵活高效

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

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

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

还有一种是系（xì）统根据用户常用自动整理归纳（nà），以提升使用效率，减少（shǎo）用户多（duō）余操（cāo）作。

②“跳过”按钮

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

③允（yǔn）许用户重复（fù）操作

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

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

内（nèi）容框（kuàng）中不应包含无关或很少（shǎo）用到的信息。在（zài）内容框中每（měi）增加一个信息，就意味着降低了（le）主要信息的相对可（kě）见性。此原（yuán）则根本目（mù）标是让用（yòng）户快速找到界面的重要（yào）信息，引导（dǎo）用户（hù）的视线及操作行（háng）为（wéi）。

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

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

②视觉统一

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

9、容错（cuò）原（yuán）则

容错原（yuán）则是（shì）指帮助用（yòng）户从错误中恢（huī）复，将（jiāng）损（sǔn）失降到最低。如果无法自动挽回，则提供（gòng）详（xiáng）尽（jìn）的说明文（wén）字和指（zhǐ）导方向。

①提供撒销/修改功能

部分系（xì）统（tǒng）可（kě）提供撤销操作来帮助用户减少（shǎo）因（yīn）自己的冲（chōng）动而进 行操（cāo）作带来（lái）的后果。

②减少错误代价

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

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

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

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

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

①常驻提示

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

②帮助文档

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

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