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

一（yī）、交互（hù）设计流程（chéng）

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

二、交互设（shè）计的作用

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

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

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

1、状态可见（jiàn）

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

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

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

②操（cāo）作结果反馈

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

③位置可见（jiàn）

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

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

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

3、用（yòng）户可控

用户拥有控（kòng）制权（quán）。用（yòng）户可以（yǐ）自由的控（kòng）制返（fǎn）回和去（qù）到的地方（fāng）。

4、一（yī）致性原则

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

5、防错原则

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

①重要操（cāo）作提（tí）供二次确认

对于（yú）一些（xiē）不可（kě）逆（nì）或很重要的（de）操（cāo）作，系统大部（bù）分会提供二次确认提示，如（rú）此可（kě）以使（shǐ）用（yòng）户避免因误操作（zuò）而给自（zì）己带（dài）来损（sǔn）失。

②预判错误并告知

给予用户必要的预判性错误提示——告诉用户，这样走可（kě）能会错（cuò）

③合理（lǐ）设计

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

④给予（yǔ）正确引导

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

⑤引起用户注意

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

6、易（yì）取原则

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

①智能获取

通过智能读取（qǔ）用（yòng）户之前填写过（guò）的信（xìn）息（xī），或者智能识别等形式，减（jiǎn）少用（yòng）户记忆负担与操作负（fù）担。

②让用（yòng）户选择（zé）而不是填写

比起让用户输入，让用户选择更能降低用户的记（jì）忆成（chéng）本，更好地辅（fǔ）助用户做决策。如果，有很多的信息或者选项（xiàng）是用户高频率会（huì）选择的，不妨给用（yòng）户提前做（zuò）好选择（zé），提供默认选项，如下（xià）图：

③草稿箱或历史记录

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

④跳转明确

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

⑤行为输入代替字符输入

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

⑥可视（shì）化

将选择的（de）对象，动作，选项可视化，让用户一看就懂。注（zhù）意图标符号化能让人理解，避免（miǎn）引起误（wù）解（jiě）。

7、灵活高效（xiào）

一些（xiē）快捷操作的功能，虽然（rán）会（huì）被专家用（yòng）户忽略，但可能为新（xīn）手用（yòng）户所使（shǐ）用（yòng），并帮（bāng）助提升（shēng）其（qí）使用效率，因此，系统（tǒng）需要（yào）同时满足新手用户和专家用户（hù）的需求。

①提供定制化（huà）服务

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

还有（yǒu）一（yī）种是系统根据用户常用自动整理归纳，以提（tí）升使用效（xiào）率，减少用户（hù）多余操作。

②“跳过”按（àn）钮

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

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

对于用户频繁使用的部分，提（tí）供快捷的重复使用操作（zuò），比如：外卖（mài）app，用（yòng）户可以快捷（jié）地再来一（yī）单，同（tóng）时保存上一次操作记录（lù）。

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

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

①对重要信息突出显示

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

②视（shì）觉（jiào）统一

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

9、容错原则

容错原则是指帮助用户从错误中（zhōng）恢复，将损（sǔn）失降到最低。如果（guǒ）无法自动挽（wǎn）回，则提（tí）供详（xiáng）尽（jìn）的（de）说明文字和指导方向（xiàng）。

①提供撒销（xiāo）/修改功能

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

②减（jiǎn）少错误代价（jià）

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

③提供解决（jué）方案

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

10、人性化帮（bāng）助

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

①常驻（zhù）提示

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

②帮（bāng）助文档

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

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