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

一、交互设计流程

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

二、交互设计的作用

目前市（shì）面上已经有很多（duō）产（chǎn）品（pǐn），我（wǒ）们看一下平时在一些H5案例或APP使用过（guò）程中，有（yǒu）没有遇到过以下这些糟糕的（de）情况：

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

三、交互的十大可（kě）用性原则（zé）

1、状态可见

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

①过程（chéng）中反馈-进度条

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

②操作结果反馈

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

③位置（zhì）可见

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

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

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

3、用户可控

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

4、一致性原则

对于用户来说（shuō），同（tóng）样的（de）文字、状态（tài）、按钮，都应（yīng）该（gāi）触发相同的事情（qíng），遵从通用的平台（tái）惯例；也就是，同一用语、功能、操作（zuò）保（bǎo）持一致。轻量（liàng）级反馈统一用toast反馈，重级反馈统一用模态（tài）弹（dàn）框展示。

5、防错原则

在错误发生之前就避免它。可以帮助用（yòng）户排除一些容易（yì）出错（cuò）的情况，或（huò）在用户提交之（zhī）前给他一（yī）个确（què）认的选项。

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

对于一些不可逆或很重要的操作，系统大部分（fèn）会提供二（èr）次确认提示，如此可以使用户避（bì）免（miǎn）因误操作而给自（zì）己带来损失。

②预判错（cuò）误并告知（zhī）

给予用户必要的预判（pàn）性错误提示——告诉用户，这样走可能会错

③合理设计

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

④给予正确引导（dǎo）

把简单留给（gěi）用户（hù），把复杂留（liú）给自己：通过系统的优良设计（jì）约束和指引用户的操作，把出现错误（wù）的可能降（jiàng）到（dào）最低。

⑤引（yǐn）起用户（hù）注意

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

6、易取原则

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

①智能获取（qǔ）

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

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

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

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

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

④跳转明（míng）确

提（tí）供用户明确的跳转入（rù）口，不需要用户记忆操作路径

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

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

⑥可视化

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

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

一（yī）些（xiē）快捷（jié）操（cāo）作（zuò）的功能，虽然会被专家用户忽（hū）略，但可能为新手用户（hù）所使（shǐ）用，并帮助提（tí）升其使用（yòng）效率，因此，系统需要同时满足新手用户和专家（jiā）用户的需求（qiú）。

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

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

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

②“跳过”按钮

通过用户（hù）快（kuài）捷跳过的入口，比（bǐ）如常见的：引导页、操作手册、还是（shì）开屏广告，有“跳过（guò）”或（huò）者”立即进入“按钮真的很（hěn）贴心。

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

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

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

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

①对重（chóng）要信息突出显示

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

②视觉统一

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

9、容错原则

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

①提供撒销/修改功能（néng）

部（bù）分系统可（kě）提供撤（chè）销操作（zuò）来帮助用户减（jiǎn）少因自己的冲动（dòng）而进 行（háng）操作（zuò）带（dài）来的后果。

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

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

③提（tí）供解（jiě）决方案

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

10、人性化帮助

人性化帮（bāng）助原（yuán）则的根本目标是（shì）用户（hù）在使用产品的过程（chéng）中有所依循，因为产（chǎn）品已经贴心地为他们准（zhǔn）备好（hǎo）了帮助方式（shì），或者即时（shí）提（tí）示和（hé）反馈（kuì），或者（zhě）客服。帮助（zhù）性提示最（zuì）好的方式是：

①常（cháng）驻提示

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

②帮助文档

最后就是帮助（zhù）文档（dàng）了，一般用于解释规则或者热点问（wèn）题，通常（cháng）以超链接（jiē）的形式存在（zài）于页面（miàn）中，或者以集合形式位于设置（zhì）页中，此（cǐ）时需要注意（yì）要易于检索。

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