一篇文章总结下移动端交互设计规范

时间：2023-09-03 11:54:01 | 来源：网站运营

时间：2023-09-03 11:54:01 来源：网站运营

一篇文章总结下移动端交互设计规范：1.交互设计的基本原则

首先，要考虑一致性 ，一致性可以让界面更容易被预知，可以降低用户的学习成本等等。一致性几乎是设计中最普遍的一条原则，也是缺乏设计经验的团队最容易犯的错误。做可用性评估时，几乎每次都能找出一堆的不一致问题。

视觉一致，在同一产品内，所有的同类界面元素在相同的应用环境下，界面外观在视 觉上应该保持一致；否则，界面外观要予以区分。

操作行为一致，类似场景的界面设计，其操作方式必须保持一致；当操作行为相同时要保持视觉上的一致；当操作行为不同时，在视觉上就一定要有所区别；

外观与使用者的预期一致，保持对象与其行为相符，保持不同作用的对象外观的不同；视觉元素的外观及其操作结果，必须与用户的心理认知相符。

其次，状态可见原则，用户在APP上的任何操作，不论是点击、滑动还是下拉，页面应即时给出反馈。“即时”是指页面响应时间小于用户能忍受的等待时间。

第三，撤销重做原则（容错），为了避免用户的误用和误击，在设计上应提供撤销和重做功能。

第四，人性化帮助原则，帮助性提示最好的方式是：1、无需提示 2、一次性提示 3、常驻提示 ，帮助文档。一次性提示大部分情况下对于新用户来说，例如操作的引导、安装后引导页的设计，这种提示只出现一次，对于比较复杂的APP操作会出现这种操作提示，设计形式有动作的提示、文字的讲解、顺序步骤的点击。

最后，避免干扰和打断，避免干扰是指要明确用户在特定界面中的首要任务和目标，尽可能避免该界面上的视觉噪声和其它干扰。避免免打断是指让用户的操作连贯顺畅，避免使用模态对话框（弹出的独占焦点的对话框）打断用户的工作

2. 通用控件交互的规范

第一，字体样式和颜色

每个系统都有相对应的中文和英文字体， iOS客户端开发人员，编程时使用的默认简体中文字体，就是常用的华文Heiti SC。iOS UI设计人员，使用Photoshop字体是 “黑体-简”或Heiti SC，或者是冬青黑简体、黑体。英文字体是 Helvetica Neue Ultra Light。

在文字颜色方面，APP端很少用红色的文字（排除APP视觉色调为红色的情况），除非是警示信错误或者是特别需要提醒给用户的信息可以用红色文字进行标红处理，红色代表一种警示色，会给用户心理造成不友好的印象。

第二，标题

标题是用于描述整个产品中所有不同层级不同功能的页面应该使用的文字提示，让用户在第一眼就能够了解当前页面的主要功能和信息。在字符上标题字符一般不会超过五个字，首页的标题可以命名为“首页”也可以以产品的名称命名。个人中心页可以设计成没有标题栏的样式，二级页面的标题一般和进入二级页面的入口保持一致或者是二级页面的核心功能的描述。

第三，链接

一般APP中链接分为APP内链接和跳转到APP外的链接，链接文字在设计上用颜色进行区分表示为可点击状态，对于需要进行勾选操作的链接需要设计勾选框，如下图所示：

第四，按钮

按钮的基本构成是点击框+文字提示，在颜色控制上APP一般情况有两种状态：点击状态和不可点击状态，当用户在某些时候不能进行某些操作时，该命令按钮或命令文本（或其它的形式）在外观上应显示为不可用状态（如置灰）。在APP的设计过程中，一般设计形式为只有当用户输入信息完成后，按钮的状态才会变成可点击状态。

在用户体验方面，在设计按钮时设计者要尽量避免确认、取消等万能的按钮文案，这中文字的提示在很多情况下回影响用户对于按钮的功能的理解，应该根据按钮的具体功能来设计按钮的具体文案，例如：点击按钮实现了提交功能，按钮的文案就应该是提交信息。

第五，搜索

APP的搜索具有以下几个特点：

1、搜索框内显示出搜索的图标，明确提示用户用于搜索功能。

2、用户点击搜索框的时候，会出现近期的搜索列表，便于用户直接选择搜索项，省略输入。

3、根据APP的行业种类在搜索中显示出显示可搜索的名称。

4、APP点击搜索都会隐藏搜索框所在的页面内容，弹出热门搜索和近期搜索的内容项，可供用户进行选择。

搜索的基本样式设计：

点击搜索后基本样式：（弹出输入键盘同时出现取消按钮）

热门搜索和近期搜索样式：（另起一页出现热搜、历史和清空历史）

第六，下拉列表

iOS一般采取的方式都是从下方出现需要选择的内容项目，最常见的例如iOS的闹钟设计。（在用户体验上，如果选项不多，不超过四个可以将选择项罗列出来供用户选择，可以预见用户的选择，对选项进行默认的操作。）

第七，列表框

一般列表的设计形式包括下面几个形式，如图所示：图文列表（一般应用于商品展示居多），icon + 标题列表（一般情况下应用于个人中心居多），列表具有以下特点：1、保持列表高度一致并排列对齐。2、行与行之间用1PX的线条或者灰色的矩形框隔离。3、在每列的右端需要有一个“>”的箭头提示，用于提示用户操作跳转。

第八，文本输入框

文本输入框是最常见的输入控件，一般APP的文本输入框会是标题+输入框（方形框或者是线条的样式），在输入框通过灰色文字返显提示输入信息，提示用户应该输入的内容，当用户输入的信息很多时，为了保证整个页面的简洁些，一般不在输入框中返显提示输入信息，只有标题即可，当用户输入时，提示输入文字消失，一般输入框样式如下图所示：

标题和输入框平级或者上面标题，下面是输入框

文本框需要输入时，对于可以提供的输入信息选项则尽量提供选项进行选择代替输入，能自动获取的信息或者用户授权后可以获取的信息直接通过用户授权后显示信息（例如访问地理位置或者通讯录），如果能够提供合理的默认选项，则可以在输入框省略用户进行输入操作，如下图所示：

3.交互信息规范

交互提示规范主要用于规定在交互过程中交互的方式及其信息提示，主要有下面几类：

第一，预先提示用户需要操作的内容以及信息，用户在操作前需要充分提供给用户预先应该知道的提示信息，主要分类有下面几种情况：


a.表单提交类

表单提交的步骤，按照每个表单项的输入要求需要给用户显出提示信息。（如密码的输入规则，搜索框鼓励输入的内容。）

b.谨慎类操作

APP中某些操作对用户来说需要慎重操作的。如拒绝审批通过的用款、删除账户、扣除积分。需要预先提示。（如：拒绝审批的用款后弹出确认框防止用户误触，扣除积分的操作需要预先提示扣除积分的数目，以及当前积分是否足够等。）
 c.差异化规则

当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示或者给出帮助链接。

第二，操作信息提示，在APP设计中，对于影响结果的操作需要在交互过程中需要提供操作相关的提示。

a.操作确认提示

用户操作涉及数据删除等需要谨慎操作的用户行为需要给出删除确认提示框，让用户进一步进行确认操作。

b.操作错误提示

当用户的操作不符合操作的规则，需要给出操作提示。（如评论字数为0或超过限制字数，搜索框未输入内容时提交，相当于校验信息提示）


第三，结果信息提示，用户在最终提交或者是进行查询后，需要给出结果反馈并给出适当的提示。


a.查询类结果

任何信息列表、查询结果，当对应信息无结果的时候需要给出有无结果状态提示。

b.保存类结果

用户提交或者是保存数据时需要明确提示用户操作的结果。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。

c.附加类结果

用户操作造成数据进行附加展示的需要跳转到数据展示页面，例如提交评论等，提交成功后应直接跳转到操作产生的结果展示部分。

4. 信息提示规范（语气及文字定义）

APP的信息提示包含了错误信息提示，警告信息，确认信息，选项卡，滑块，进度条，联想搜索等

从用户体验考虑，对用户的信息提示一般遵循以下几个特点：

第一，使用用户熟悉的、容易理解的字眼，避免专业化的词语

第二，界面上的文字要清晰而简洁

文字短小、直接。对于最重要的信息，简要地将其表达出来，还要突出地展现出来，让用户不需要全部读完全部内容，就可以找到他们想要的信息和告诉他们接下来要做什么的指引。

避免使用居高临下的措辞，例如避免使用「我们、我们的、我、我的」（比如我们的使用说明、我的训练），这有时会给人侮辱感和居高临下感。

第三，尽量用非正式的、友好的语气表达。

非正式的、和蔼可亲的表达方式，拉近产品和用户之间的距离。

用户应该直接知道每个按钮的含义，当给按钮或其他交互元素定义文字时，要用动词，比如连接、发送、添加。

5. 导航规范

APP中导航是对用户对于查找信息的引导，所以不同导航方式入口需要对APP的信息进行分类，使得用户能够更快的查找到用户需要的信息。

常见导航方式：

标签导航：标签式的导航一般用于APP的一级导航，将整个APP的信息进行分类产生三个标签，用户根据标签信息在这几类信息进行频繁的切换。

舵式导航：两侧是其他操作按钮。当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口，就可以采用这种APP导航模式。

抽屉导航：点击入口即可像拉抽屉一样拉出菜单，这种导航的优点是节省页面展示空间，让用户将更多的注意力聚焦到当前页面。适合于不那么需要频繁切换内容的应用，例如对设置、关于等内容的隐藏。

宫格导航：将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大。

列表导航：通常用于二级页，通常app不会在首页使用它。列表导航结构清晰，易于理解。同时列表项目可以通过间距、标题等进行分组。

Tab导航：用于二级页，本质和标签导航相同，当应用层级较多的情况下，可以采用tab导航，典型场景是用于改变的当前的视图，或对当前页面内容进行分类查看。

轮播导航：轮播导航能够最大程度的保证应用的页面简洁性，操作也是最方便的。但是缺点是不能够快速的定位对应的分页内容。

6. 弹出窗口规范

弹出框在分类上可以分为以下四类：

第一，系统自动弹出的提醒 — 系统提示

第二，帮助用户快速做选择 — 操作引导

第三，对用户的操作给予反馈 — 信息反馈

第四，广告 — 广告弹框

第五，弹出窗口引用

用户在刚开始下载安装APP的时候，系统需要对用户弹出一系列的消息通知，用户需要对这个提示进行操作和设置，弹窗是一个为激起用户的回应而被设计、需要用户去与之交互的浮层。它可以告知用户关键的信息，要求用户去做决定，抑或是涉及到多个操作。

在设计弹窗过程中一般需要遵循以下规则：

第一，尽量避免不必要的提醒框（alert，在屏幕正中间出现）。

提醒框是一种强大的反馈机制，一般适用于传达特别重要的信息的情况下，并可以在弹出框中含有有可操作项的信息，例如取消、确定等信息操作提示。

第二，尽量以自然而不招摇的方式把状态和其他类型的反馈融入界面中

理想情况下，用户不操作或者不被打断就能获取重要信息，例如用户在填写信息到某一个过程中在APP的顶端或者是低端弹出输入信息提示，不采用弹出层的形式就能够完成信息提示。

弹出窗的布局

APP弹出窗主要包含有三类信息：按钮操作、弹出窗的内容显示和内容操作、关闭弹窗区域。

弹出窗的样式

弹出窗的样式设计多种多样，需要根据弹出的内容设计弹出窗的样式，例如活动送红包设计成红包的形式，提示升级或者是奖励，一般弹出窗的图形化设计都是矩形框的变形。

7. APP的用户反馈

用户反馈是用户主动操作或者通过系统提示而被动进行操作（对APP进行评分）的一种行为，用户反馈的设计具有以下特点：

第一，意见反馈几种入口类型：在个人中心、在个人中心的设置界面、在个人中心设置界面的关于我们界面中。

第二，为了提高用户体验，对于可预见的反馈意见可以设计成选项，使得用户通过选择的方式来代替用户输入意见。

第三，意见反馈页面一般会设计通话链接，用户可以联系客服反馈问题。

被动提交意见一般的设计形式是通过弹出层的形式，例如对APP进行评分，因为对APP进行评分是需要跳转到商店进行评分的，这是对用户操作行为的一种阻断，一般不会频繁的弹出该评分框，希望用户评论一般弹出比较讨喜的文案，降低用户的排斥性，如下图所示：

8. Loading 规范

页面loading动画是APP界面必不可少的元素，增加loading提示可以给用户明确的反馈表示资源和功能正在加载，减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc，让APP更生动、活泼；或者使用logo口号加强APP的品牌形象。一般加载的设计有下面几种方式。

• 动画+Loading

• 动画+提示文字

• 动画（角色加载）

• Loading+外框

• 动画+品牌广告语

当内容在加载中的时候，一个空白或者静止的页面会让APP看起来像卡住了，导致用户疑惑甚至失望，有可能让用户离开你的APP，当出现内容加载一段时间必须出现加载的的提示时，一般采取生动的加载方式来吸引用户的目光，降低用户等待过程中的失落感。

加载过程中，尽可能让加载过程明确、透明。至少，展示一个活动的「转菊」表示一直有进度。更好一点的话，告诉用户明确的进程/进度，让他们知道还需要等多久。

加载过程中，可以教育或者娱乐用户。

试试展示一些游戏提示、一系列好玩的视频、有趣的占位图形。

设计个性化的加载界面。

虽然标准的进度条通常是够用了，但有时还是会让用户感觉出戏。考虑使用些跟APP或者游戏契合的自创动画和元素，打造一种沉浸式的体验。

尽快给出内容。不要在给出用户预期的界面前，就让用户一直等着，而是要尽快把界面展示出来。

用户在点击内容后心里直观就是要立即看到展示的内容，由于网络或者加载资源的原因需要加载一段时间才可以看到内容，解决这种用户等待的过程可以在未加载的地方使用占位的文字、图形或者动画，当内容加载完毕后再替换掉这些占位符。

目前很多APP在点击启动icon时候都设计有启动页，启动页延迟了用户进入APP的时间这是对资源加载的一种权衡，如果还出现引导页并且引导过多的话需要在引导页上设计一个跳过的操作。

9. 页面加载失败和内容为空（NPC、文案、按钮）

APP在加载页面过程中会存在加载失败或者内容为空的状况，对于加载失败的界面一般设计方式：NPC+文案+按钮。当页面为空时，为了保证界面在视觉上美观并降低用户的失落感一般采用的方式有NPC+文案或者NPC+文案+按钮的设计方式。

10. 权限请求和设置

只有用户批准后，APP才能获取隐私信息，包括当前位置、日历、通讯录、提醒事项和照片，尽管APP利用这类数据后会给用户带来方便，但同时用户也会希望对隐私数据有所控制。

只有在你的APP明确需要个人数据时，再发出请求。

当用户使用该功能时再提醒开启，而非一进入应用就各种弹出打断用户的正常使用，确保只有当用户在使用那些明确需要私人信息的功能时，再请求批准。比如，只有当用户开启了追踪定位路线的功能时，才请求用户批准获取位置信息。

当必要性不明显的时候，向用户解释为什么需要个人数据。

你可以在系统自带的请求提示框内添加自定义文字，文字要具体，短小而礼貌，这样用户才不会有压迫感。例如：打车类APP会定义更好的司机接送服务需要访问地理位置，外卖配送会提示推送周边美食和上门送餐访问地理位置等。

从系统获取你需要的信息。

如果你需要有关用户、设备或者环境的信息，尽量向系统查询，而不是问用户。比如，当你想要求用户输入邮政编码来展现本地信息时，还不如向用户请求获取定位信息。

把不常变化的设置项放到系统设置APP中。

「设置」APP是全系统做设置操作的中心，只不过配置时用户必须离开你的APP，去手机的设置中心进行设置。而那些常用的设置项直接在你的APP内进行设置要方便得多，一般情况下会在APP个人中心中设计一个设置的选项，将常用的设置项放在该设置选项中，合适的时候，提供前往「设置」APP的快捷路径。