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

一、交互设计流程

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

二、交互设计的（de）作用

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

是不是遇到（dào）这些情况就不想（xiǎng）用这款（kuǎn）产品了，更别说转化了。这就是为什么我们要做好（hǎo）交互设计。

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

1、状态可见

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

①过程中反馈-进度条

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

②操作结果反馈

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

③位置可（kě）见

告诉用户处在系统的（de）什么（me）位置，特别是对于新用（yòng）户，需要提供必要的（de）信息（xī），否则（zé）容易迷（mí）惑。比如：导航菜单、面（miàn）包屑、标（biāo）签（qiān）页、步（bù）骤条、分页器等等。

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

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

3、用（yòng）户可控（kòng）

用户（hù）拥有控制权（quán）。用户可以自由的控制返（fǎn）回和去到的地方。

4、一致（zhì）性原则

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

5、防错原则

在错（cuò）误（wù）发（fā）生之（zhī）前就避免它。可以帮助用户排除一些容易出（chū）错的情况，或在用（yòng）户提（tí）交之前给他一个（gè）确认（rèn）的选项。

①重要操作提供二次（cì）确认（rèn）

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

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

给予用户必要的预判性错误（wù）提（tí）示——告诉用（yòng）户，这样走可能会错

③合（hé）理设计

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

④给予正确引导

把简单留给用户，把复杂留给自己：通（tōng）过系统的（de）优良设计约束（shù）和指引（yǐn）用户（hù）的操作，把（bǎ）出现错误（wù）的（de）可能（néng）降到最低（dī）。

⑤引起（qǐ）用户注意（yì）

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

6、易（yì）取原则

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

①智能（néng）获取

通（tōng）过智（zhì）能（néng）读取用户之前填写（xiě）过的信息，或者智能（néng）识别等形式，减少用户记忆负担与操作负担。

②让用户（hù）选择（zé）而不（bú）是填写

比起让用户输入，让用（yòng）户（hù）选择更（gèng）能降低用户（hù）的记忆成本，更好地辅（fǔ）助用户（hù）做决策（cè）。如果，有（yǒu）很多的信息或者选（xuǎn）项是（shì）用（yòng）户高频（pín）率会（huì）选择的，不妨给用（yòng）户提前做好选择，提供默认选项，如下图：

③草稿箱或历史记录

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

④跳转明（míng）确

提（tí）供用户明确（què）的跳转（zhuǎn）入口（kǒu），不（bú）需要用户记忆操作路径

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

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

⑥可视化

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

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

一些快捷操作的功（gōng）能，虽（suī）然会被专家用户忽略，但可能为（wéi）新手用户所（suǒ）使用，并帮助提升其（qí）使用效率（lǜ），因（yīn）此（cǐ），系统需要同时满足新手用（yòng）户和专家用户的需求。

①提供定制（zhì）化（huà）服务

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

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

②“跳过”按钮（niǔ）

通过（guò）用户快（kuài）捷（jié）跳过（guò）的（de）入口，比如常见的：引（yǐn）导（dǎo）页、操（cāo）作手册、还是（shì）开屏广（guǎng）告，有（yǒu）“跳过（guò）”或者”立即进入“按钮（niǔ）真的（de）很贴心。

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

对于用户频（pín）繁使（shǐ）用的部分，提供快（kuài）捷的（de）重（chóng）复使用操作，比如：外卖app，用户可（kě）以快（kuài）捷地再来一单，同时保存上一次操作（zuò）记录。

8、审美和简约设计

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

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

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

②视觉统一

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

9、容错原则

容（róng）错原则是指（zhǐ）帮（bāng）助用户从错误中（zhōng）恢复，将损失降到最低。如（rú）果无（wú）法自动挽（wǎn）回，则提供详尽的说明文字和（hé）指导方向。

①提（tí）供撒销/修改功能

部分系（xì）统可提供撤销操（cāo）作来帮助用（yòng）户减少因自己的冲动而进 行操作带来的后果。

②减少错误（wù）代价

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

③提供解决（jué）方案

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

10、人性化帮助（zhù）

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

①常驻提示

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

②帮助（zhù）文档（dàng）

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

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