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

一（yī）、交互设计流程

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

二、交互设计（jì）的作用

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

是不（bú）是遇到这（zhè）些情（qíng）况就（jiù）不想用这款产品了，更别（bié）说（shuō）转化了。这就（jiù）是为什么我们要做好交互设（shè）计（jì）。

三、交互的（de）十大可用性原则

1、状态可（kě）见

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

①过程中反馈-进度条

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

②操作结果反馈（kuì）

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

③位置可见

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

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

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

3、用户（hù）可控

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

4、一致（zhì）性原则

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

5、防错原则

在错误（wù）发生（shēng）之前（qián）就避免它。可以帮助用户排除一些容易（yì）出错的情况，或在用户提交之前给他一个确（què）认的选项。

①重要（yào）操作提供（gòng）二次确（què）认

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

②预判错误并告知

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

③合理设计（jì）

屏蔽会引起歧义（yì）的设计、本身不合理的设计，不（bú）让（ràng）用户（hù）因为产品的设计缺（quē）陷而导（dǎo）致用户犯（fàn）错。让用户频繁碰壁（bì）、产生挫折感的设计，其原因不（bú）是用户的愚蠢、而是设计的愚蠢。

④给予正确引导

把简单留（liú）给用户，把复杂留给自（zì）己（jǐ）：通（tōng）过系统的优良设计约束（shù）和指引（yǐn）用户（hù）的操（cāo）作，把出现错误的可能降到最低。

⑤引起用户注意

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

6、易（yì）取原则

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

①智（zhì）能获取

通过（guò）智（zhì）能（néng）读（dú）取用户之前填写（xiě）过的信息，或者智（zhì）能识别（bié）等形式，减少（shǎo）用（yòng）户（hù）记忆负担与（yǔ）操作负担（dān）。

②让用（yòng）户选（xuǎn）择而（ér）不是填（tián）写

比起让用户输入，让用户选择（zé）更能降低用户的记忆成本，更好地辅助（zhù）用户做决（jué）策。如果，有很多的信息或者选项是用户高频率会选择的，不妨给用户提前做好（hǎo）选择，提供默（mò）认选项，如（rú）下图：

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

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

④跳转明确

提（tí）供用户明确（què）的跳转入（rù）口，不需（xū）要用户（hù）记忆操作路（lù）径（jìng）

⑤行为输入代替字符输入

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

⑥可视化

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

7、灵活（huó）高效

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

①提供定制化服务

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

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

②“跳过”按（àn）钮

通过用户快捷跳（tiào）过的入口，比如常（cháng）见的：引导页、操（cāo）作手册（cè）、还是开屏广告（gào），有“跳过”或者（zhě）”立即进入“按钮真的很贴心。

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

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

8、审美和简约设计

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

①对重要信息突出显示（shì）

用（yòng）户注（zhù）意力（lì）资（zī）源有限，应该保持信息精炼，突出重要（yào）信息，弱化次要信息。

②视觉（jiào）统一

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

9、容错原则（zé）

容（róng）错原则是指（zhǐ）帮助用户从错（cuò）误中恢复，将损失降到最低。如果（guǒ）无法自（zì）动（dòng）挽回，则提供详尽的说明（míng）文（wén）字和指导方向。

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

部（bù）分系统可提（tí）供（gòng）撤销操作来帮助用户减少（shǎo）因自己的冲动而进（jìn） 行操作带（dài）来的后（hòu）果。

②减少（shǎo）错（cuò）误代价

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

③提供解决方案

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

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

人性化帮助原则的根本（běn）目标是用户在使用产品的过程中有所依循，因为产品已经（jīng）贴（tiē）心地为（wéi）他们准备（bèi）好了帮助方式，或者即（jí）时提（tí）示和反馈，或者客服。帮助（zhù）性提示最好的方式是：

①常驻提示（shì）

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

②帮助文档

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

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