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

一、交互设计流程

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

二（èr）、交互设计（jì）的作（zuò）用

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

是不是遇到这些情况就不想用这款产（chǎn）品了，更别说转（zhuǎn）化了。这就是为什么我们要做好交互设计。

三、交互（hù）的十大可用性原（yuán）则（zé）

1、状态（tài）可见

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

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

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

②操作结果反（fǎn）馈

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

③位置可见

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

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

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

3、用户可控（kòng）

用户拥有控制权（quán）。用户（hù）可以自（zì）由的控制返（fǎn）回和去（qù）到的地方。

4、一致性原则

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

5、防错原（yuán）则

在错（cuò）误发生之（zhī）前就避免（miǎn）它。可以（yǐ）帮助用户排除一些容易出（chū）错的情（qíng）况，或（huò）在（zài）用户提交之前给他一个确认的选项。

①重要操作（zuò）提（tí）供二次确认（rèn）

对于一些不（bú）可（kě）逆或很重要的操作，系（xì）统大部分会提供二次确认（rèn）提示，如此（cǐ）可以使用户避免因误操作而给自己带（dài）来（lái）损失。

②预判错误并告知

给予用户必要的（de）预（yù）判性错（cuò）误提示（shì）——告诉（sù）用户，这样（yàng）走（zǒu）可能会错

③合（hé）理设计

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

④给予正确引导

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

⑤引起（qǐ）用（yòng）户（hù）注（zhù）意

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

6、易取原则

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

①智（zhì）能获取

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

②让用户选择而（ér）不是填写

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

③草稿箱或历史记录

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

④跳转明确

提供用户（hù）明确（què）的（de）跳转（zhuǎn）入口，不（bú）需（xū）要用户记忆（yì）操作路径

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

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

⑥可视化

将选（xuǎn）择的对象，动作，选项可视化，让用（yòng）户（hù）一（yī）看就懂。注意图标符号化能让人理解，避免引起误解。

7、灵活（huó）高（gāo）效（xiào）

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

①提供定制化服务

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

还有一种（zhǒng）是系统根据用户（hù）常用自动（dòng）整理归纳，以提升使（shǐ）用效率（lǜ），减（jiǎn）少用（yòng）户多（duō）余操作。

②“跳过”按（àn）钮（niǔ）

通（tōng）过用（yòng）户快捷跳过的入口，比如（rú）常见的：引（yǐn）导（dǎo）页、操作手册、还是（shì）开屏广告，有“跳（tiào）过”或者（zhě）”立即进（jìn）入“按钮真的（de）很贴心。

③允许（xǔ）用户重复操（cāo）作

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

8、审美（měi）和简约设计

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

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

用户注意（yì）力（lì）资（zī）源有（yǒu）限，应该保持信息精炼，突出重要信息，弱化次要（yào）信息。

②视（shì）觉统一

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

9、容错（cuò）原则

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

①提供撒销/修改功能

部分（fèn）系统可提供撤销操作来帮助用户（hù）减少因自己的冲动（dòng）而进 行操作带（dài）来的后果（guǒ）。

②减（jiǎn）少（shǎo）错误代（dài）价

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

③提供（gòng）解决方案

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

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

人性化帮助原（yuán）则的根本目标是用户在使用产品的过程中有所（suǒ）依循（xún），因为产（chǎn）品（pǐn）已经（jīng）贴心地（dì）为他们准备好了帮助方式，或（huò）者即时（shí）提示和反（fǎn）馈，或（huò）者客服。帮助性提示最好的方（fāng）式是（shì）：

①常驻提示

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

②帮（bāng）助文档（dàng）

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

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