网页类产品的基本交互方式

基本交互

字体:对字体进行统一的规范

边框:对边框进行统一额规范,可用于按钮、卡片、弹窗等组件里

边框:实线、虚线

圆角:无圆角、小圆角(2px)、大圆角(4px)、圆形圆角(30px)

投影样式:基础投影、浅色投影

按钮:默认按钮、朴素按钮(颜色朴素)、按钮禁用(按钮不可用状态)、文字按钮(没有边框和背景色的按钮)、图标按钮(带有图标的按钮可增强辨识度)

文字链接:可用文字链接和不可用文字链接

交互样式

单选框:有一组备选项中进行单选,由于选项默认可见,不宜过多,选择过多建议使用选择器

多选框:一组备选项中进行多选,适用于多个勾选框绑定同一个数组的情景,通过是否勾选来表示这一组选项中选中的项

输入框:通过键盘输入字符;

基本输入框、禁用输入框、可清空、密码框、带icon的输入框、文本域、可自适应文本高度的文本域(根据文本内容自动进行调整)、复合型输入框(前置或后置元素、一般为按钮或者标签)、带输入建议(根据输入内容提供对应的输入建议)、输入长度限制

计数器:仅允许输入标准的数字值,可定义范围

可以定义递增递减步数和精度

选择器:当选项过多时,使用下拉菜单展示并选择内容

基础的单选、有禁用选项、禁用状态(选择器不可用)、可清空单选(选择器清空为初始状态)、基础多选(可以选择多个内容)、分组(备选内容进行分组展示)、可搜索(利用搜索功能快速查找选项)、远程搜索(从服务器搜索数据,按照输入关键字进行查找)

级联选择器:当一个数据有清晰的层级结构时,可通过级联选择器逐级查看并选择

可清空(设置输入框可清空)、仅显示最后一级(仅在输入框中显示最后一级的标签,而不是选中项所在的完整路径)、多选(开启多选模式)、选择任意一级选项(单选模式只可以选择叶子的节点,多选模式下勾选父节点真正选中的都是子节点,开启任意功能后,父子节点关联性取消,可以选择任意一项)、可搜索(可以快捷搜索选项并选择)、级联面板

开关:表示两个相互对立的状态间的切换,多用触发开关

滑块:通过拖动滑块在一个固定区间内进行选择

基础用法(在拖动滑块时显示当前值,可以使用默认初始值,也可以进行自定义初始值)、离散值(选项是离散的,可以选择显示或不显示离散点)、带有输入框(通过输入框设置精确数值)、范围选择(支持选择某一数值范围)

时间选择器:用于选择或输入时间

固定时间点(提供几个固定点供用户选择)、任意时间点、固定时间范围(开始时间和结束时间为固定时间)、任意时间范围

日期选择器:用于选择或输入日期

选择日(以日为基本单位,可以带快捷方式如今天、昨天、一周前)、其他日期单位(可以选择周、月、年等)、选择日期范围

日期时间选择器:在同一个选择器里选择日期和时间

日期和时间点(默认的日期和时间点、带有快捷方式的选择、设置的默认日期时间点)、日期和时间范围、

上传:通过点击或者拖拽上传文件

点击上传(上传图片列表缩略图、上传文件列表控制)

评分:给出功能的相关评分

默认不通过颜色区分,可以通过颜色区分、辅助文字区分、其他icon区分

穿梭框:对多个备选内容进行选择,可以通过搜索对数据进行过滤

表单:由输入框、选择器、单选框、多选项等交互控件组成,用于收集、校验、提交数据

表单的对齐方式:右对齐、左对齐、顶部对齐

表单验证:在防止用户犯错的前提下,尽可能让用户更早发现并纠正错误

数据

表格:用于展示多条结构类似的数据,可对数据进行筛选、排序、对比等操作

表格的展示:带斑马纹表格(使用斑马纹可以清晰区分不同行的数据)、带状态的表格(方便区分状态标识)

表格的操作:固定表头(纵行内容过多时)、固定列(横向内容过多时)、固定列和表头、流体高度、多级表头、单选、多选、排序、自定义列、展开行(当行内容过多并且不想显示横向滚动条时,可以使用行展开)、表尾合计行

标签:用于标记和选择

进度条:用于展示操作进度,告知用户当前状态和预期

线形进度条(百分比内显,可用于文件上传等场景)

环形进度条

树形展示:用清晰的层级结构展示信息,可展开或折叠

树形展示:全部展示、手风琴模式(同一级节点,每次只能展开一个)、节点过滤

树形选择:单选、多选

自定义节点内容:增加或者修改节点内容

分页:当数据量过多时,使用分页分解数据

分页展示:页数较少时、页数较多时、跳转页、跳转每页显示条数

标记:出现在按钮、图标旁的数字或状态标记

标记:用于展示新消息的数量,可以自定义最大值

头像:对图标、图片或者字符的形式展示用户或事物信息。

注意

警告:用于页面中展示重要的提示信息。

加载:加载数据时展示动效,在表格等数据中加载数据时显示。

消息提示:用于主动操作后的反馈。

弹框:用于消息提示、确认消息和提交内容

通知:悬浮出现在页面交流,显示局部的通知提醒消息

导航

导航菜单:为网站提供导航功能的菜单

展示方式:顶栏、侧栏以及折叠

标签页:分隔内容上有关联但属于不同类别的数据集合

展示位置:top、right、left、bottom

操作:动态增减标签页、自定义标签页

面包屑:显示当前页面路径,快速返回之前的任意页面

页头:通过页头的返回等操作直接返回上层页面

下拉菜单:将动作或菜单折叠到下拉菜单中

步骤条:引导用户按照流程完成任务的分布导航条,可根据实际场景设定步骤,步骤不得少于两步

步骤条中可以包含状态、描述等

其他交互

对话框:在保留当前页面状态的情况下,告知用户并承载相关操作

文字提示:常用于展示鼠标悬停(hover)的提示信息

弹出框:和文字提示类似

气泡确认框:点击元素,弹出气泡确认框

卡片:将信息聚合在卡片容器中展示

走马灯:在有限的空间内,循环播放同一类型的图片、文字等内容

展示:指示器(指示器显示在容器外部)、切换箭头、卡片化

折叠面板:通过折叠面板收纳内容区域

时间线:可视化地呈现时间流信息

分割线:区域内容分隔

日历:显示日期

图片:图片容器,支持懒加载、自定义占位、加载失败等

回到顶部:返回页面顶部的操作按钮

无限滚动:滚动至底部时,加载更多数据

抽屉:呼出一个临时的侧边栏,可以从多个方向呼出

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352