如何构建 Web 端设计规范之文本与选择器 - 优设网 - UISDC

如何构建 Web 端设计规范之文本与选择器

2018/04/23 12921评论区

Echo :根据组件的用途,可以分为六大类,Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。

表单在网页中主要负责数据采集功能;用户需要填写输入数据并且提交到数据库,则这种组件就是表单类。

本文主要讲解表单中的文本和选择器,其中文本分为 input 短文本、InputAutocomplete 短文本联想和 InputMultiline 长文本。

一、input 短文本

定义:用于用户文本输入,并以字符串的方式提交到数据库。

使用场景:

  • 用户需要输入字符时。
  • 通过鼠标键盘输入内容。
  • 输入的文本通常置于输入框。

例如网易考拉优惠券兑换的表单填写,就是短文本输入组件,前面是标题,后面是文本输入框。

input 短文本组件的展示形式可以分为三类:

  • 标题和输入框左右排列;
  • 标题和输入框上下排列;
  • 不需要标题的排列。

标题和输入框左右排列时,短文本组件存在的状态有初始态、激活态、报错态、完成态和禁用态。

常见的表单类排版都是左右排版,同时表单之间,标题采用左对齐,输入框左对齐的情况比较多。有时候标题名字过长的话,左右排列就不够好,这时候需要采用上下排列。

标题和输入框上下排版时,存在状态和左右排列是一致的。

当没有标题时,存在状态同左右排列的规则和逻辑。

二、InputAutocomplete 短文本联想

定义:用户用于文本输入,在输入过程中会联想匹配文本选项,并以字符串的方式提交到数据库。

使用场景:

  • 需要用户输入文本时。
  • 提供联想匹配文本,减少用户输入成本。
  • 在输入过程中根据用户输入的内容,出现匹配选项,提交的数据是文本而非枚举项。

例如百度搜索,在输入框输入关键词时会出现对应的联想匹配文本。

和 input 短文本组件相比,InputAutocomplete 短文本联想唯一的不同就是新增了联想匹配选项,并且提交的是文本而非枚举项。

标题和输入框左右排列时,InputAutocomplete 短文本联想组件存在的状态有初始态、激活态、报错态、完成态和禁用态。

上下排列的状态和规则逻辑同左右排列。

不含标题的状态和规则逻辑同左右排列。

三、InputMultiline 长文本

定义:用户用于长文本输入,并以文本的方式提交到数据库。

使用场景:

  • 多段文字输入。
  • 需要换行。
  • 输入的文本通常置于输入框中。

例如新浪微博,在输入框发微博时,就是长文本输入,可以换行。

标题和输入框左右排列时,InputMultiline 长文本存在的状态有初始态、激活态、报错态、完成态和禁用态。在输入过程中一般有字数统计,超过限制字数,不允许用户输入。

上下排列逻辑和规则同左右排列。

不含标题的逻辑同左右排列。

四、select 选择器

定义:用户通过选择枚举项,提交到服务器。后端存储为枚举项。

使用场景:

  • 弹出一个下拉选项给用户选择操作。
  • 当选项少时(少于5项),建议直接将选项平铺,使用 Radio 是更好的选择。

例如淘宝卖家后台筛选订单的状态时,点击选择器,出现下拉列表。这就是一个常见的选择器,选择器分为多选和单选两大类。

下图为选择器基本样式,就是简单的下拉选项,不可进行关键词的搜索。

下图是可以搜索的选择器,当输入框处于激活态时,浮出下拉列表。在输入过程中,出现匹配枚举项,点击枚举项,则输入的关键词清空,同时下拉选项收起。输入框出现选择的选项。

有时候存在一个场景,用户对需要填写的选项设为空选项,则需要空值的选项。

有时候存在一个场景,用户选择了一个选项,但是后面想去掉选择的选项,不进行选择。

选择器多选组件中需要注意的一点就是,用户在输入关键词中,选择对应下拉选项,则输入的字符串清空,同时出现该选项 tag。

欢迎关注作者的微信公众号:「UEDC」

「文本框的细节设计」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/web-design-specification-text-selectors

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里