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

一、交互设计流程

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

二、交互设计的作用

目（mù）前市面上已经有很多产品（pǐn），我们看一下平时在一些（xiē）H5案例或APP使用过程中，有没有遇到过以下这（zhè）些糟糕的情况：

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

三、交（jiāo）互的十大可（kě）用性原则

1、状态可见（jiàn）

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

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

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

②操作结（jié）果反馈

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

③位置可见

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

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

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

3、用户可（kě）控

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

4、一致（zhì）性原则（zé）

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

5、防错原则

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

①重要操作提供二次确（què）认

对于一些不可逆或（huò）很重要的（de）操作，系统大部分会提供二（èr）次（cì）确认（rèn）提（tí）示，如此可（kě）以使用户（hù）避免因误操作而给自己带（dài）来损（sǔn）失。

②预判错误并告（gào）知

给予（yǔ）用户必要的（de）预判性错误提示——告诉用户，这样走（zǒu）可能会错

③合理设计

屏蔽会引起歧义的设计、本身不合理的（de）设计，不让用户因为产（chǎn）品（pǐn）的（de）设计缺陷（xiàn）而导致用户犯错（cuò）。让用户频繁（fán）碰壁、产生挫折感（gǎn）的（de）设计（jì），其原因不是用户的愚蠢（chǔn）、而是（shì）设计（jì）的愚蠢。

④给予正确引导

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

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

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

6、易取原则

好记性不如烂笔头（tóu）。尽可能减少用（yòng）户回（huí）忆负担，把需要记忆（yì）的内容（róng）摆上台面（miàn）

①智能获取

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

②让用（yòng）户选（xuǎn）择而不是（shì）填写

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

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

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

④跳转明（míng）确

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

⑤行为输入代替字（zì）符（fú）输（shū）入

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

⑥可视化

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

7、灵活（huó）高效

一些快捷操作的功能，虽然（rán）会被专家用户忽略，但可能为新手用（yòng）户所使用，并帮助（zhù）提升其使用效率，因（yīn）此，系统需要（yào）同时满足（zú）新手用户（hù）和专家用（yòng）户的需（xū）求。

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

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

还有一种是系统根据（jù）用户常用自动整（zhěng）理归（guī）纳，以提（tí）升（shēng）使用效率，减少用户（hù）多余操作（zuò）。

②“跳过”按钮

通过用户（hù）快（kuài）捷跳过的入口（kǒu），比如常见的（de）：引导页（yè）、操（cāo）作手册（cè）、还是开（kāi）屏广告，有“跳过”或者”立即进入“按钮真的很贴心。

③允许用户重（chóng）复操作

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

8、审美和简约设计

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

①对（duì）重要信息突（tū）出显（xiǎn）示

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

②视觉统一

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

9、容（róng）错原则

容错原则是（shì）指帮助（zhù）用户从错误中恢复，将损失（shī）降到（dào）最（zuì）低。如果无（wú）法自动挽回，则（zé）提供详尽（jìn）的说明文字（zì）和指导（dǎo）方向。

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

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

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

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

③提供解决方案

在（zài）出错界面给出解（jiě）决方案，可以是文字提醒或者按钮跳转等形式，帮助用户解（jiě）决问题。比如缺省页的设（shè）计除了配置（zhì）插图（tú）还会有（yǒu）提（tí）示文案与操作按钮，引导用户去操作，去进一（yī）步解决问题。

10、人性化帮助

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

①常（cháng）驻提（tí）示

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

②帮助文档

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

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