2023年B端UI界面交互基础组件-文本_第1页
2023年B端UI界面交互基础组件-文本_第2页
2023年B端UI界面交互基础组件-文本_第3页
2023年B端UI界面交互基础组件-文本_第4页
2023年B端UI界面交互基础组件-文本_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

B端UI界面交互基础组件-文本本章介绍的是“文本”组件的交互规范。

一、标题/标签

1.需求场景

需要用户快速区分内容分区。需要用户快速理解内容分区含义。2.内容与布局

标题使用简短的语句标明模块，用于描述内容的主要包括内容和主旨。标题标签尽量避开换行显示。标题与其他内容组合显示时，其他内容应换行缩进显示。

文本框需要依据不同语言做自适应。当标题涉及国际化时，依据当前语言版本动态显示文本宽度。在同一个产品界面中，允许存在多级标题。不同层级标题供应缩进，需要有样式上的区分标题、分级标题以及分类标签使用左对齐”属性“相关文本居左对齐

二、内容描述

1.需求场景

用户通过阅读内容理解相关信息与数据。用于显示或说明产品相关信息。2.内容与布局

描述文本左对齐在特定场景下允许换行。一般内容描述遵循自然换行，而在某些特定场景下换行有助于将内容描述更清晰。如界面布局限制而无法换行，则可依据国际化中最长字符串语言版本进行宽度适配。有交互响应的文本需支持颜色变化，如可点击大事。

3.交互行为

1）支持点击大事响应的文字，当鼠标移入内容区域后供应受范性指示（如鼠标手型变化，文字颜色或样式发生变化）。

举个例子:

以下是不支持点击大事的响应文本：

以下是支持点击大事的响应文本：

2）支持点击大事响应的文字可依据业务特性标注颜色，鼠标移入后需要供应受范性指示（鼠标手型变化、文字颜色透亮     度发生变化）。

举个例子：

下面是鼠标移入前：

下面是鼠标移入后：

三、备注

1.需求场景

需要内容补充说明，

帮助用户更简单地理解、操作界面内容。界面内容在正常状况下需尽量避开对用户的日常使用造成干扰。2.内容与布局

备注文本默认使用左对齐，如有特别需要也可依据业务需要右对齐。支持换行显示。因界面布局缘由不允许使用换行显示时，涉及国际化则以最长字符串最长的语言版本进行宽度适配。显示效果需弱于标题文本与描述文本。备注文本一般通过字体或颜色与描述文本进行区分。

四、组合文本

1.需求场景

在实际的业务场景中，各类文本需要组合显示。在标签文本与描述文本展现时，为便利用户理解可供应对应的备注信息。2.内容与布局

1）属性展现：标签文本与内容描述组合展现，文本内容局左对齐。

标签文本+内容描述：

标签文本+

内容描述+

备注文本（备注文本在内容描述后换行显示）：

2）多级文本内容组合展现：

标签文本与内容描述组合展现，使用上下排列，文本均左对齐，如在信息描述中有属性展现，对应布局以属

人人文库> 全部分类> 应用文书 > 资格认证

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论