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

一（yī）、交互设计流程

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

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

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

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

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

1、状态（tài）可见

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

①过程中反馈（kuì）-进（jìn）度条

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

②操作结果反馈

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

③位置可见

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

2、环境贴切现实（shí）

字（zì）面解（jiě）释就是系统的信息（xī）要与现实（shí）环境表现（xiàn）一致。使用（yòng）的语言、文字等，需要是（shì）用户（hù）熟悉的、能理解、不会（huì）有歧（qí）义的（de）。减少用户的学（xué）习成本，不要认为（wéi）用户能（néng）记住（zhù）你设计（jì）新颖的信息。

3、用户可（kě）控

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

4、一致（zhì）性原则

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

5、防错原（yuán）则

在错误发生之前就（jiù）避免它。可以帮助（zhù）用户排除一些容易出错的情况（kuàng），或在用户提交（jiāo）之前给他一个确（què）认的选项（xiàng）。

①重要操作提供二次（cì）确认

对于一些不（bú）可逆或很重要的操（cāo）作，系统大部分会提供二次确认提示，如此可以使（shǐ）用户（hù）避（bì）免因误操作（zuò）而给自己带来损失。

②预判（pàn）错误并告知

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

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

屏蔽会（huì）引起（qǐ）歧义的设计、本身不合（hé）理的设计，不（bú）让用户因（yīn）为产品的设计缺陷而导致用户犯错。让用户频繁（fán）碰壁、产生挫折感的设计（jì），其原因不是用户的（de）愚蠢、而是设计的愚蠢（chǔn）。

④给予正确（què）引导

把简（jiǎn）单留给用户，把复杂（zá）留给自己（jǐ）：通过系统的优良设计约（yuē）束（shù）和指引（yǐn）用（yòng）户的（de）操作，把出现错误的可（kě）能降到最低。

⑤引起用户注意

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

6、易取（qǔ）原（yuán）则

好记性不如烂笔头。尽（jìn）可能减少用户回忆负担，把需（xū）要（yào）记忆的内（nèi）容摆上台面

①智能获取

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

②让用户选择而不是填写

比起让用（yòng）户输入，让用户选择更能降低用（yòng）户的（de）记忆（yì）成本，更好地辅助用户做决策。如果，有很多的信息（xī）或者选项是用（yòng）户高频率会选择的，不妨（fáng）给（gěi）用户提前做好选择，提供默认选项，如下图：

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

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

④跳转明确

提供用户明（míng）确的跳转（zhuǎn）入（rù）口（kǒu），不需要（yào）用户记（jì）忆操作路径

⑤行为输入代替字符输入（rù）

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

⑥可视化

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

7、灵活高（gāo）效

一些（xiē）快捷操作（zuò）的功（gōng）能，虽然会被专家用户忽略，但可（kě）能为新手用户所使用，并帮助提升其（qí）使用效率，因此，系统需（xū）要（yào）同时（shí）满（mǎn）足（zú）新手用（yòng）户和专家用户的需求。

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

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

还有一种是（shì）系统根据用户常用自（zì）动整理归纳，以提升使用效率，减少用户多余操作（zuò）。

②“跳过（guò）”按钮

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

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

对于用（yòng）户频繁使用的部分，提供快捷的重复使用（yòng）操作，比如（rú）：外卖app，用户（hù）可以快捷地再来一单，同时保存（cún）上（shàng）一次操作记录（lù）。

8、审美和简（jiǎn）约设计

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

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

用户（hù）注意力资源有限（xiàn），应（yīng）该保持信息精炼，突（tū）出重要信息，弱化次要信息。

②视觉统一

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

9、容错原则

容错原则是指帮助用（yòng）户从错误中恢复，将损失降到最低。如果（guǒ）无（wú）法自动（dòng）挽回，则提（tí）供详（xiáng）尽的（de）说明文字和（hé）指（zhǐ）导方向。

①提（tí）供（gòng）撒销/修改功能

部（bù）分系统可提供撤销操作来帮助（zhù）用户减少因自己的冲动而进 行操作（zuò）带来的（de）后果（guǒ）。

②减少错（cuò）误代价

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

③提（tí）供解决方（fāng）案

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

10、人性化帮助

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

①常驻提（tí）示

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

②帮助文档

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

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