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

一（yī）、交（jiāo）互设（shè）计流程

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

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

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

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

三、交（jiāo）互（hù）的十大（dà）可用性原则

1、状态可见（jiàn）

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

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

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

②操作结果反馈（kuì）

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

③位置可见（jiàn）

告诉用户处在系统的什（shí）么（me）位置，特别是对于新用户（hù），需要提供必要的信息，否则容（róng）易迷惑。比如：导航菜单、面包屑、标签页、步骤条、分页器等等。

2、环境贴切现实

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

3、用户可控

用户拥（yōng）有控制权。用户可以自由的控（kòng）制返回和去（qù）到的地方。

4、一致（zhì）性（xìng）原则

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

5、防错原（yuán）则

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

①重要操作提供（gòng）二次确认

对（duì）于一（yī）些不（bú）可逆（nì）或（huò）很重（chóng）要的（de）操作，系统（tǒng）大部分会提（tí）供二（èr）次确认提示，如此可以使用户避免因误操作而给自己带来损失。

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

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

③合理设（shè）计

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

④给（gěi）予正确引导

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

⑤引起用户注意

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

6、易取（qǔ）原则（zé）

好记性不如烂笔头。尽可能（néng）减少用户回忆负（fù）担（dān），把需要记忆（yì）的内容摆上台面

①智能获取

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

②让（ràng）用户选择而不是填写（xiě）

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

③草（cǎo）稿箱或历史记录

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

④跳转明确

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

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

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

⑥可视化

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

7、灵活高效

一（yī）些快捷（jié）操作的功能（néng），虽然会被专家（jiā）用户忽略，但可（kě）能为新手用户所使（shǐ）用，并帮助提升其使用（yòng）效率，因此，系统（tǒng）需要同时满足新手（shǒu）用（yòng）户和专（zhuān）家（jiā）用户的需求。

①提供定制化服务（wù）

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

还有一种（zhǒng）是系统根据（jù）用户常（cháng）用（yòng）自动整理归纳（nà），以提升使用效率，减少用户多余（yú）操作。

②“跳过”按钮（niǔ）

通过用户快捷跳过（guò）的入口，比如（rú）常见的：引（yǐn）导页（yè）、操（cāo）作（zuò）手册、还（hái）是（shì）开屏广告，有“跳过”或者”立即进入（rù）“按钮真（zhēn）的很（hěn）贴心。

③允许用户重复操作

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

8、审美和简约设计（jì）

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

①对重要信息突出显（xiǎn）示

用户注意力（lì）资源有（yǒu）限，应（yīng）该保（bǎo）持信（xìn）息精（jīng）炼，突出（chū）重要信（xìn）息，弱化（huà）次要信息。

②视觉统一

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

9、容错原则

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

①提供撒销（xiāo）/修（xiū）改功（gōng）能

部分（fèn）系统可提供撤销操作（zuò）来帮助用（yòng）户减少因自（zì）己的冲动而进 行操作带来的（de）后（hòu）果。

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

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

③提供解决（jué）方案

在出错界面给出（chū）解（jiě）决方案（àn），可以是文字提醒或（huò）者按钮跳转等形式，帮助（zhù）用户解（jiě）决问题。比如缺（quē）省页（yè）的设计除（chú）了配（pèi）置插图还会有提（tí）示文案与（yǔ）操作按钮，引导（dǎo）用户去操作（zuò），去进（jìn）一步解决问（wèn）题。

10、人性化（huà）帮助

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

①常驻提示

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

②帮（bāng）助文档

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

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