文案

在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。在使用和书写文案时有以下几点需要注意：

从用户角度出发
表述一致
重要的信息放在显著位置
专业、精准、完整
精简、友好、正面

语言

在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。

清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，同时让用户体验更加友好。

明确表述立足点

在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。

既然以用户为中心，文案就应该尽量以用户为主体来写作。

注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。

精简语句

省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。

尽量提供简短、易于快速获取的内容。

使用用户熟悉的语言

使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。

间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。

表述一致

描述同一个事物的词汇要保持统一;
上下文的语法、语种、语序要保持统一;
操作的名称和目标页面标题的名称保持一致。

重要的信息放在显著位置

让用户第一眼看到最重要的内容，不用到段落中寻找。

注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式

完整、直接得阐述信息

当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。

报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。

用词精准完整

通用基本用词要规范，不要写错字，词语表达要完整。

专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。

语气

拉近彼此的距离

语言定义的是内容，而情绪和气氛更多的是通过语气来表达，并且同样的内容面对不同的用户我们可以使用不同的语气来表达；例如，我们对应专业的运维人员和小白用户应有不同的表达方式。

直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。

注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。

友好、尊重用户

多给用户支持与鼓励，不要命令和强迫用户。

如果你想留住你的用户，当出错的时候就不要责怪用户。专注于解决问题，而不是指责。

表述不应过于极端

不要使用过于绝对的表述，这样会让用户觉得不适。

大小写和标点符号

英文名词大小写规范

产品名称全称，首字母大写。产品名称缩写需要全部大写

eg：ESC、SLB 等；

注：整个单词都大写不利于阅读和识别，应尽量避免这种用法。

正确使用专有名词的大小写规范。

统计数据使用阿拉伯数字

这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。

省略不必要的标点

为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。

以下元素单独出现时可以省略标点：

标签
标题
输入框下的提示
悬停文本中的提示
表格中的句子

以下元素单独出现时需要加上标点：

多句或多段的文案和列表内容。
任何文字链前的句子。

谨慎使用感叹号

感叹号会让文案显得过于激动，容易让气氛变得过于紧张。

注：当向用户表达问候或祝贺时，使用『！』是合理的语境，例如『欢迎回到社区！』。

基本标点规范

正确得使用标点符号会让句子看起来更清晰和具有可读性。

具体使用请参考1995年中国标准出版社出版的《标点符号用法》，右图为重点列出的在设计中需要注意的部分。

尽可能提供标识、上下文线索，避免用户迷路；
保持导航样式和行为一致或者减少导航数量，降低用户学习成本；
尽可能减少页面间的跳转（例如：一个常见任务需要多个页面跳转时，请减少至一到两次），让用户移动距离保持简短。

导航菜单是将内容信息友好地展示给用户的有效方式。在确定好网站的信息架构后，应当按需选取适当的导航菜单样式。

顶部导航菜单

顶部导航菜单的形式就是把超链接连成一行，信息内容层级比较简单明了，适用在浏览性强的门户性质以及比较前台化的应用。一级类目建议在 2-7 个以内。标题长度 4-15 个字符长度为好，中文字长 2-6 个。

侧边导航菜单

垂直导航较横向的导航更灵活，易于向下扩展，且允许的标签长度较长。类目数量不限，可配合滚动条使用，适合信息层级多、操作切换频率高的管理性质的应用。

面包屑（Breadcrumb）

面包屑导航的作用是告诉用户当前页面在系统层级结构中的位置以及父子级页面间的关系。

注意事项：

层级过深时，建议做隐藏处理，页面显示保持在三级以内，最多不宜超过五级；
尽可能不使用面包屑，尤其是当前页面的导航能清晰的告诉用户他在哪里时。

标签页（Tabs）

标签页把大量信息进行分类展示，用户可以方便地切换标签，而不必跳转页面进行比较浏览，可以在有限的显示区域内展示更多信息。

分类可根据业务类别、业务状态或者操作类型等并列关系来分，分类标题长度为 2-6 个中文字。

基本样式

引领整个页面的内容，用于主功能切换。

卡片样式

用于页面中局部展示，包裹型容器能很好的和其它内容隔离。

胶囊型样式

用于卡片内的选项切换，经常和其它组件结合使用，让用户快速切换对应内容。

竖状样式

用于分类较多的选项，可以不限制分类数量，具备更好的扩展性。

步骤条（Steps）

步骤条是引导用户按照流程完成任务的导航条，可以帮助用户对操作流程长度和步骤有个预期，并且知道自己当前在哪个步骤，同时也可以对用户的任务完成度有明确的度量。当任务复杂或者存在先后关系时，将其分解成一系列步骤。

横向流程步骤条

步骤多于 2 步时使用, 但建议不超过 5 步，每阶段文字长度保持在 12 个字符以内。

竖向流程步骤条

一般居页面左侧，悬浮固定，可追加多行文字描述，适合较多步骤或步骤数动态变化时使用，例如：时间步骤跟踪描述。

分页器（Pagination）

当有大量内容需要展现时进行分页加载处理，分页器可以让用户清楚的知道自己所要浏览的内容有多少、已经浏览了多少、还剩余多少。

标准样式

当页数超过 5 页时，可以提供快速跳转页面的功能。当信息条目较多的时候，可以允许用户自定义每页的行数，以提高用户查看和检索信息的效率和灵活性，常与表格、卡片搭配使用。

迷你样式

一般用于卡片或者浮层。

简易样式

一般用于卡片或者统计类表格展示，在 10 页之内。

数据录入

数据录入是获取对象信息的重要交互方式，用户会频繁的增加、修改或删除信息。多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验。设计者应当注意这几点：

为初级用户／偶尔访问的用户提供简单易懂的文案作为『标签（Label）』；为领域专家提供专业术语作为『标签（Label）』。

当需要用户提供敏感信息时，通过『暗提示』来说明系统为什么要这么做，例如：需要获取身份证号码、手机号码时；

让用户能在上下文中获取信息，帮助他完成输入。

使用『良好的默认值』、『结构化的格式』、『暗提示』、『输入提醒』等方式，避免让用户在空白中猜测输入。

文本录入

输入框为用户提供了编辑文本的控件，是录入数据最基础和常见的方式。

文本框（Input）

输入较少的字符总数，使用单行的输入形式。

注：可以对一些文本（如数字和网址）运用特别的样式。详见输入框（Input）。

文本域（Textarea）

录入长篇幅的单一的文本使用多行的文本区域。

提示与帮助

为提升数据录入效率，通常可以在输入框内增加暗提示以帮助提醒用户。

注：输入框通常与标签（label）搭配使用，标签（label）默认放于输入区域的左侧，当文案过长或英文环境下也可放于在上方，但同个系统中需保持统一。

搜索（Search）

搜索可以让用户在巨大的信息池中缩小目标范围，并快速获取需要的信息。

选择录入

让用户在一个预定的范围中进行选择。

单选框（Radio Button）

单选按钮允许用户从多个选项中选择一个选项。Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

注：单选框（Radio Button）一定多于 2 个，一般少于 5 个。

复选框（Checkbox）

复选框用于在一组可选项中进行多项选择时。

注：

复选框（Checkbox）一般用于状态标记，需要和提交操作配合；
单个复选框可以表示两种状态之间的切换。

开关（Switch）

用于切换单个选项的状态。『开关』的内联标签应该显示清楚，

例如：禁用/启用，不允许/允许等。

注：当用户切换『开关』按钮将直接触发状态改变。

选择列表（Dropdown）

选择列表（通常称为下拉菜单）允许用户从列表中选择一个选项或多个选项，为用户在选项的数量上提供了更多的灵活性。

注： 1. 当选项多于 5 项时使用； 2. 列表选项按照逻辑排序，并尽量让内容显示完整。

滑块选择（Slider）

滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。

这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。

注：在不要求精准数值的场景下用户使用『连续滑块』可得到更灵活便捷的操作；在用户需要精确数值时，可与『数字输入框』搭配使用。

穿梭框（Transfer）

穿梭框用直观的方式在两栏中移动元素，完成选择行为。

日期选择器（DatePicker）

日期选择器为用户提供了一种可视化的方式去浏览和选择一个日期或者日期范围。

文件上传（Upload）

上传是将本地的相应信息(包含本地和云储存)通过网页或者上传工具发布到远程服务器上的过程。

简单点击上传

一般用于单个上传且不需要预览效果的文件上传，点击按钮弹出文件选择框。

显示缩略图上传

一般用于图片文件上传，用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

拖拽上传

把文件拖入指定区域，完成上传，同样支持点击上传。

注：文件上传需要提供明确的文件大小和文件格式

例如：请选择大小不超过 5M 的文本文件（支持 PDF.ZIP.EXL），上传时需要有明确的进度提示。

数据展示

合适的数据展示方式可以帮助用户快速地定位和浏览数据，以及更高效得协同工作。在设计时有以下几点需要注意：

依据信息的重要等级、操作频率和关联程度来编排展示的顺序。
注意极端情况下的引导。如数据信息过长，内容为空的初始化状态等。

表格（Table）

表格被公认为是展现数据最为清晰、高效的形式之一。

它常和排序、搜索、筛选、分页等其他界面元素一起协同，适用于信息的收集和展示、数据的分析和归纳整理、以及操作结构化数据。

它结构简单，分隔归纳明确，使信息之间更易于对比，大大提升了用户对信息的接收效率和理解程度。

注： 1. 表格中的时间、状态、操作栏需保持词语完整不过行。 2. 当数据为空时，可使用『- -』来表示暂无数据。

折叠面板（Collapse）

折叠面板通过对信息的分组和收纳，指引用户递进式的获取信息，使界面保持整洁的同时增加空间的有效利用率。

这类组件在导航中大量使用，同时也适合冗长的、无规则的内容管理。

注：若折叠内容彼此之间关联度较低时，可使用更为节省空间的『手风琴』模式——『手风琴』是一种特殊的折叠面板，只允许单项内容区域展开。

卡片（Card）

如页面内容加载过慢时，可采用『预加载』或『分步获取』的方式来缓解用户在等待时间中的焦虑感。卡片是一种承载信息的容器，对可承载的内容类型无过多限制，它让一类信息集中化，增强区块感的同时更易于操作；卡片通常以网格或矩阵的方式排列，传达相互之间的层级关系。适合较为轻量级和个性化较强的信息区块展示。

注： 1. 卡片通常根据栅格进行排列，建议一行最多不超过四个 2. 在有限的卡片空间内需注意信息之间的间距，若信息过长可做截断处理。例如『Ant Design 适用于中台…』

走马灯（Carousel）

作为一组平级内容的并列展示模式，常用于图片或卡片轮播，可由用户主动触发或者系统自动轮播。适合用于官网首页、产品介绍页等展示型区块。

注： 1. 轮播的数量不宜过多以免造成用户厌烦，控制在 3~5 个之间为最佳 2. 建议在设计上提供暗示，让用户对轮播的数量和方向保持清晰的认知

树形控件（Tree）

『树形控件』通过逐级大纲的形式来展现信息的层级关系，高效且具有极佳的视觉可视性，使得整体信息框架一目了然。

用户可同时浏览与处理多个树状层级的内容。适用于任何需要通过层级组织的信息场景，如文件夹、组织架构、生物分类、国家地区等等。

时间轴（Timeline）

垂直展示的时间流信息，一般按照时间倒叙记录事件，追踪用户当下以及过去做了什么。

每一条信息以时间为主轴，内容可涵盖主题、类型、相关的附加内容等等。适用于包括事件、任务、日历标注以及其他相关的数据展示。

反馈

为了帮助用户了解应用当前要做什么，也给用户的下一步行为做参考，以及了解操作后所产生的结果，当用户和系统需要交互时，使用不同的模式来反馈信息或结果。当设计者使用反馈或者自定义一些反馈时，请注意：

为用户在各个阶段提供必要、积极、即时的反馈；
避免过度反馈，以免给用户带来不必要的打扰，能够及时看到效果的、简单的操作，可以省略反馈提示。

提示信息

任何一个产品，即使用户界面做的再好，也离不开用户引导和信息提示。提示信息是用来告诉用户需要知道什么、采取什么样行动的内容。

警告

警告提示（Alert）

是一种非阻碍式的信息展示，它不打断用户的当前操作，一般停留至页面某个位置（优先顶部），非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

注：关闭按钮可根据业务需要增加或隐藏。

通知

通知提醒（Notification）

较为复杂的通知内容时使用。系统主动推送的重要的全局性通知信息，在系统右上角显示。

徽标数（Badge）

当有 icon 的情况时一般居于 icon 右上角；无 icon 的情况下一般位于标题后侧。用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。

注：相对重要和用户关联度更高的信息提示，使用数字精准提示；权重不高和不是用户特别关心的消息提示，使用红点做提示。

帮助

气泡卡片（Popover）

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

注：和 Tooltip 的区别是，Popover 可以承载更复杂的内容，比如链接或按钮等。

文字提示（Tooltip）

用于精确地描述被指向的对象，例如图标、图形、链接等，鼠标移入则显示提示，移出消失，不承载复杂文本和操作。

过程反馈

操作过程中尽可能将状态的反馈给用户，即时的响应会给用户增加信赖感。

加载状态进度反馈

当用户不必等待较长时间的加载时使用。在操作需要一段时间（一般为超过2秒）完成时系统应即时给予提醒，明确告知加载的状态或加载进度条，保持与用户的沟通。

注：若加载时间较长，应提供取消操作。

录入反馈

操作过程中可通过不同的校验规则和形式，让用户及时发现并纠正错误。

注：反馈文字紧跟着要说明的区块（反馈内容一般是错误说明），不自动消失（当用户进行相应的交互操作后才消失）。

气泡确认框（Popconfirm）

和全屏居中模态对话框相比，交互形式更轻量。目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。

结果反馈