UI组件你用对了么广州合创视觉.docx

UI组件你用对了么优漫动游随着信息及其处理的进步，收集数据的手段也在不断发展，UI组件你用对了么，我们 可以从其设计中学到一些技巧文字栏位剖析文本字段允许用户在UI中输入文本。它们通常显示在表单和对话框中。文本字段组件 设计应为交互提供明确的承受力，使字段在布局中可发现，高效填充且可访问。InputAnatomy以下是基本Text字段的关键元素1 .容器可交互输入的区域2 .输入文本在文本字段中输入3 .标签文本-告诉用户给定表单字段中属于什么信息4 .占位符文本-是所需信息的描述或示例，被输入文本替换在用户提供之后5 .帮助程序或验证文本（可选）提供其他上下文或验证消息6 .前导图标（可选）描述文本字段所需的输入类型7 .尾随图标（可选）一对输入的文本的附加控制，例如清除，隐藏/显示等文字栏位类型它们中的大多数基于基本文本字段，这些文本字段经过修改以更好地处理特定类型的信 息，例如信用卡号。以下是我们创建的整个UI中最常用的输入类型的一些示例：TypesBakusevychSearch fMdTe«t inputUkratnet. x AttMKta M. XMutb-Mtoct MpvtNumber only inputCredit cent9888 nn 34S3 454ft WM对你收集的数据使用适当的输入类型为请求的数据提供正确的文本字段类型将帮助用户以正确的格式输入信息并避免错误, 从而使过程尽可能简单高效。Full NarneAlbertPhon. 4380-6Credit Card Numb*>9888 1212 34Comment UMfultipUse appropriate input type for data you collectingFull MameAlbert EinsteinPhonw380-622-8862Credit Card Numb«fCommentDont文本字段必须根据状态和用户交互来更改其外观这可以通过提供视觉提示来传达文本字段的状态来完成。输入文本字段可以具有以下状 态之一：不活动，悬停，禁用，集中，验证，错误。所有州应清楚地区分，并在整个表格和 申请中保持一致。最好遵循最佳实践，以不挑战形成的用户思维模型。InputStatesAccount nameAccount nsmt Account nameAlb|InactiveHoverAccount nameAlbert EinsteinFocus/active/ V«rficalon.Validation选择最佳的文本字段样式通常，你将使用三个主要的标签定位选项：顶部，左侧和右侧对齐。最佳的样式取决于 关键目标和表单的大小，组件库和设计平台。它们都有优点和缺点。InpetLabel position and stylesFuU NameAlbert EinsteinUnderlineAlbert EinsteinOutlined (adaptive label)FuU NameAlbert EinsteinFilledFuU Nam* Albert EinsteinOutlined (contained label)