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

一、交互设（shè）计流程

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

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

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

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

三、交互的十大可（kě）用性原（yuán）则

1、状态可见

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

①过（guò）程中反馈（kuì）-进度条

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

②操作结（jié）果反馈（kuì）

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

③位置可见

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

2、环境贴切现（xiàn）实

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

3、用户可控（kòng）

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

4、一致性原则（zé）

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

5、防错原则

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

①重要（yào）操作提（tí）供二（èr）次确认（rèn）

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

②预（yù）判错误并告知

给予用户必要的（de）预判性（xìng）错误提示（shì）——告诉用户，这样走可能会（huì）错（cuò）

③合理设计

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

④给予（yǔ）正确引导

把简单留给（gěi）用户（hù），把复杂留给自己：通（tōng）过系统的优良设（shè）计约束和指引用（yòng）户的操作，把（bǎ）出现错（cuò）误的可能降到（dào）最低。

⑤引起用户注意

利用一些（xiē）视觉元素引起用户注（zhù）意 ，提供警示作用，如下图。

6、易取原则

好记性不如烂笔（bǐ）头。尽可能减少用户回忆负担（dān），把需要记（jì）忆的内容摆上台（tái）面（miàn）

①智能获取（qǔ）

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

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

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

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

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

④跳转明确

提供用户明（míng）确的（de）跳转入口，不（bú）需要用户记忆操作路径

⑤行为（wéi）输（shū）入代替字（zì）符输入

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

⑥可（kě）视化

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

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

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

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

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

还（hái）有一种是系统根（gēn）据用户（hù）常用自动整理归纳，以提升使用效率，减少用户（hù）多余（yú）操（cāo）作。

②“跳过”按钮

通过用户快捷跳过的入口，比（bǐ）如常见的：引导页、操（cāo）作手册、还是开屏广告，有“跳过”或者”立即进（jìn）入“按（àn）钮真的很贴（tiē）心（xīn）。

③允许用（yòng）户（hù）重复操（cāo）作

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

8、审美和（hé）简约设计

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

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

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

②视（shì）觉统一（yī）

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

9、容错原则

容错原则是（shì）指帮助用户从错误中恢复，将损失（shī）降到最低。如果（guǒ）无法（fǎ）自动挽回，则提供（gòng）详尽的说（shuō）明文字和（hé）指导方向。

①提供撒销/修改功能

部（bù）分系统可提供撤销操作来帮（bāng）助用户减少因自己的冲动而（ér）进 行操作带来的后果。

②减少错（cuò）误代价（jià）

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

③提供解（jiě）决方（fāng）案

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

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

人性化（huà）帮助原（yuán）则的根（gēn）本（běn）目标是用户在（zài）使（shǐ）用产品的过程中（zhōng）有所依（yī）循（xún），因为产品已经贴（tiē）心地为他们准备（bèi）好了帮助（zhù）方式，或者即时提示和反馈，或者客（kè）服。帮助性提示最好（hǎo）的方式是：

①常驻提示

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

②帮助文（wén）档（dàng）

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

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