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

一、交互设计流（liú）程

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

二、交互设计的作用

目前市面（miàn）上已（yǐ）经有很（hěn）多产品，我们（men）看一下平时在（zài）一些H5案例（lì）或APP使用（yòng）过（guò）程中（zhōng），有没有遇到（dào）过（guò）以下这些糟（zāo）糕（gāo）的情况：

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

三（sān）、交互的十（shí）大（dà）可（kě）用性原则

1、状态（tài）可见

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

①过（guò）程中反馈（kuì）-进（jìn）度条

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

②操作结（jié）果反馈（kuì）

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

③位置可见（jiàn）

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

2、环境贴（tiē）切现实（shí）

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

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

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

4、一（yī）致（zhì）性原则

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

5、防错原则

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

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

对于一些不可逆（nì）或很重要（yào）的操作（zuò），系统大部（bù）分会（huì）提（tí）供二次确认提示，如（rú）此可以使用户避免因误（wù）操作（zuò）而给自己（jǐ）带来损失（shī）。

②预（yù）判（pàn）错（cuò）误（wù）并告知

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

③合理设计

屏蔽（bì）会引起（qǐ）歧义的设（shè）计、本身不合（hé）理的设计，不让用户（hù）因为（wéi）产品的设计缺陷而（ér）导（dǎo）致（zhì）用（yòng）户犯错（cuò）。让用户频繁（fán）碰壁、产生挫折感的（de）设计，其原因不是用（yòng）户的愚蠢、而是设计（jì）的愚蠢。

④给予正确引导

把（bǎ）简单留给用户，把复杂留给（gěi）自（zì）己：通过系（xì）统的（de）优良设（shè）计约束和指引用（yòng）户的操作，把（bǎ）出现错误（wù）的可能降（jiàng）到最低（dī）。

⑤引起用户注意

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

6、易（yì）取原则（zé）

好记性不如烂笔头。尽可能（néng）减少用户（hù）回（huí）忆负担，把需要记忆的内（nèi）容摆（bǎi）上台面

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

通过智能读取用（yòng）户之前（qián）填写过的信息，或者智能识别（bié）等（děng）形式，减少用户记忆负（fù）担与操作负担。

②让用户（hù）选择而不是填写

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

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

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

④跳转明确

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

⑤行（háng）为输入代替字符输入

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

⑥可（kě）视化

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

7、灵活高效

一些（xiē）快捷（jié）操作的功能，虽然（rán）会被（bèi）专家用户忽略，但可（kě）能为新（xīn）手用户所使用，并帮（bāng）助提升（shēng）其（qí）使用（yòng）效率，因此，系（xì）统需（xū）要同时满足（zú）新手用户和专家用户的需（xū）求。

①提供定（dìng）制（zhì）化服务（wù）

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

还有一种是（shì）系统根（gēn）据（jù）用户常用自（zì）动整理归纳，以提升使（shǐ）用效率，减（jiǎn）少用户（hù）多余操作。

②“跳过”按（àn）钮

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

③允（yǔn）许用（yòng）户（hù）重复操作

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

8、审（shěn）美和简约设计

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

①对重要信息突出显示

用户注意力资源有（yǒu）限（xiàn），应（yīng）该保持信息精炼，突出重要信息（xī），弱化次要信（xìn）息。

②视（shì）觉统一

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

9、容错原则

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

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

部分系统可提供撤销（xiāo）操作来（lái）帮助用户（hù）减少（shǎo）因自己的冲动（dòng）而进 行操作带来的后果。

②减少错误（wù）代价

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

③提供解决方案

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

10、人性（xìng）化帮助

人（rén）性化帮（bāng）助原则的根本目标是用户在（zài）使用（yòng）产品的过程中有所依（yī）循，因为产品（pǐn）已经（jīng）贴心地为他们准备好了帮助方式，或（huò）者即时（shí）提示和反馈，或者（zhě）客服。帮助性提示最（zuì）好的（de）方式是：

①常驻提示

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

②帮助（zhù）文档

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

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