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

一、交互设计流程

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

二、交互设计的作用（yòng）

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

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

三、交互（hù）的（de）十大可（kě）用性原则

1、状态（tài）可见

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

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

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

②操作结果反馈

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

③位置可见（jiàn）

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

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

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

3、用户（hù）可控（kòng）

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

4、一致性（xìng）原（yuán）则

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

5、防（fáng）错原（yuán）则

在错误发生（shēng）之前就避免它（tā）。可以帮（bāng）助用户排（pái）除一些容易出错的情（qíng）况，或在用户提（tí）交之前给他一个确认的选项。

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

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

②预判错误并告知

给（gěi）予用（yòng）户必要的预（yù）判（pàn）性（xìng）错误（wù）提示——告诉用户，这（zhè）样走（zǒu）可（kě）能会错

③合理设计（jì）

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

④给（gěi）予（yǔ）正确引（yǐn）导（dǎo）

把简（jiǎn）单留给用户，把复杂留给自己：通过系统的优良（liáng）设（shè）计约束和指引（yǐn）用户的操作，把出现错误的可能降到（dào）最低。

⑤引起用户注意

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

6、易取原则

好记性不如烂笔头。尽可能减少用户回忆负担，把需要记忆的内容摆上台面

①智（zhì）能获（huò）取（qǔ）

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

②让用户选择而不是填（tián）写

比起（qǐ）让（ràng）用户（hù）输入，让（ràng）用户选择更能（néng）降低用户的记忆成本，更好地（dì）辅（fǔ）助用户做决策。如果，有很（hěn）多的信息或者（zhě）选项是用（yòng）户高频率会选择的（de），不妨（fáng）给用户（hù）提前做好选择，提供默认选项，如（rú）下图：

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

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

④跳（tiào）转明（míng）确

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

⑤行为（wéi）输入代（dài）替字符（fú）输（shū）入

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

⑥可视化

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

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

一些快捷操作的（de）功能，虽（suī）然会被（bèi）专家用户忽略，但可（kě）能为新（xīn）手（shǒu）用户所使用，并帮助提升其使用（yòng）效率，因此（cǐ），系统需要（yào）同时（shí）满（mǎn）足新手用户和专家用户（hù）的（de）需（xū）求。

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

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

还有一种是系统根据用户常用（yòng）自动（dòng）整理归（guī）纳，以（yǐ）提升使用效率，减（jiǎn）少用（yòng）户（hù）多（duō）余操作。

②“跳（tiào）过（guò）”按钮

通过用户快捷跳过的入口（kǒu），比如（rú）常见的：引（yǐn）导页（yè）、操作手（shǒu）册、还是开屏广告，有“跳过（guò）”或（huò）者”立（lì）即进入“按（àn）钮真的（de）很贴心。

③允许（xǔ）用户重复操作

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

8、审美（měi）和（hé）简约设计（jì）

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

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

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

②视觉统一

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

9、容错原则

容错原（yuán）则是指帮助用户从（cóng）错误中恢复（fù），将损失降到（dào）最低。如果无法自（zì）动挽回，则（zé）提供（gòng）详尽的说明文字和指导方向。

①提供（gòng）撒销（xiāo）/修改功能（néng）

部分系统可提供撤销操作来帮助（zhù）用户减少因（yīn）自己（jǐ）的冲动（dòng）而进（jìn） 行操作带来的后果（guǒ）。

②减少错误代价

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

③提供解决方（fāng）案（àn）

在出（chū）错界面给出解决方案，可（kě）以是文（wén）字（zì）提醒或者按钮跳转等形式，帮助用户解决问题。比如缺省页的设（shè）计（jì）除了配置插图还会有提示（shì）文案与操作按钮，引导用户去操作，去进（jìn）一步解决问题。

10、人性化帮助

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

①常驻提示

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

②帮助文档

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

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