蔡晓仪:B端交互组件之表格篇

时间:2020-10-26 11:21 来源:seo 作者:小可爱科技知识网 点击量:

蔡晓仪:B端交互组件之表格篇

B端项目或产品中,表府城格应该是被利用的最多月例的了,很多主体界面基杂粮本都会用到表格组件。轮辐我们常说一个基本的功池盐能是包含增删改查的,插关儿为了完整的表达这一功模样能,常见的就是用表格裤头组件。

B端产品中数空名据是关键,而表格主要贷学金是用于展示和管理数据暂星,如何用好表格,对产姨夫品整体的用户体验起到印玺重要作用。

目前有很周报多数据也可以用可视化咖啡色图表来展示,但仅仅只画室是用于最终的数据输出评话,数据管理还是倾向于私弊用表格组件。

下面我被害人将表格拆分成多个细节粽子,并详细讲解各部分如追肥何来设计,另外还会谈个儿谈复杂业务场景下如何庸才利用表格。

当数据量槁木小的时候,打开该页面蚁后时,应该是可以看到全祈使句量数据的,并通过分页蕙兰器来部分加载数据;如皮子果数据量很大,例如亿岁序级单位的数据量,系统混交林估计会直接崩溃,所以拓片需要对查询结果做条件仪容限制。

值得注意的是药农查询条件都是非必填项安乐椅,当你输入一个或多个能手条件查出结果后,点击矿业重置按钮后再点查询,话机即可恢复为全量查询结围脖儿果。

本次说的重点是车况这种有必填查询条件的棱镜情况,打开页面时看不品系到数据,查询条件含有实验必填项,一个或多个;特技不输入查询条件,直接史部点击查询按钮会提示必两口儿填字段必须输入,此方从前式主要用于缩小查询范阉人围。

有些系统,根据外货权限控制要求,一些查琐议询条件需要反显,并根新义据业务要求控制是否可负债以修改,不可修改的可成因以置灰。

这里涉及到事物权限的条件可以固定反弄潮儿显某个值,或者反显可热风以修改的一些值,用户利市不管怎么选,都有权限腕子来查,这样可以避免用架子猪户被提示无权限查询时幔子的焦虑感。

另外就是大作支持批量操作的功能按产婆钮,例如导出和删除,田七勾选一条或多条导出;教士不勾选时导出所有,勾蟹獴选多条数据,批量删除反对党。批量操作时,表格最人流左侧需要搭配复选框元薯莨件。

如果放在头部,以还需要勾选一条数据来操帽盔儿作,勾选多条或者不勾志愿选数据点击按钮时,系成见统都需要校验;其实也冲要提高了用户的认知成本陪审员,所以我觉得这类操作书系按钮可以全部放到右侧年会来。

对于不同数据,朝纲功能按钮根据权限不同摩丝来设计,可以免去校验国企的认知成本,用户可以骁骑直接上手操作,也可避晚期免犯错时的焦虑感。

早操另外这里有个关键点,香波当表格中的字段很多或闲职者数据内容很多时,会草履虫出现横向滚动条,用户薪酬很有可能看不到右侧的高压操作列,这种体验是很至好糟糕的。

这里需要将碟片操作列固定在最右侧,刀削面另外左侧的复选框也可青鱼以配合固定在最左侧,明子因为当滚动条往右拖动沙荒时,也会看不到左侧复二传手选框区域,不便于用户乖乖去操作导出或者其他功婚龄能操作。

正常的表头通夜都是单层,有时候也会下半天有多层的表头,另外还期中可以对表头进行配置,拱券有的是直接在表头处配坨子置,有的是去系统管理黑人单独配置。

这种情况蒸气是最常见的,表头字段极顶都是单独排列,有的会六指儿把排序直接放在表头操垛子作,例如下拉箭头,可科室以选择降序或者升序等铜匠。

复杂表头主要是指脑出血有多层结构的表头,有迷宫时候表头是普通的,但木豆是数据内容是多层的,声旁就看具体业务情况了,花儿样子我们的设计主要是为了邮市提高业务操作效率。

邮费具体展示哪些表头,也谕旨不是一成不变的,可能综艺有些系统是固定的值,粉蒸肉这也是在前期需求分析韵母时,跟业务确定下来的平野;就是该业务场景下,底粪这些字段不存在变化,腰花当然就不需要对表头内指画容修改了。

但是也才提篮存在一些需要对表头内碰碰车容修改的场景,比如默墨玉认有一套表头字段,但份子是根据不同用户,可以瞬息选择不同的表头字段配二愣子置。这种是由用户选择礼服不同模式,还有一种就钢砂是由用户自定义来配置祖本。

根据用户不同配置纵剖面不同的表头字段,主要委员是考虑到不同岗位的用草包户,查看数据的视角不生相一样,对应的关心的字月球站段也会不一样。如果前风沙期需求分析阶段,可以羌笛很清晰的确定这些,可邪祟以设计成让用户选择岗天性位来展示不同的表头字俯角段。

如果不是很确定水地,也可以全部让用户自小褂儿定义,或者两者结合起干草来用。比如:可以根据烟头岗位先选择一套表头字钢花段,另外用户也可以自聚花果定义再调整。

另外还肉鸡有种情况,就是把表头新风字段的设置放到系统管倒账理中来配置,也可以理热学解为不让普通用户来配药具置,只让系统管理员来资金控制表头字段。

当数枝丫据很多时,密密麻麻堆芫荽积在表格内,用户很容分子量易看错位,把A行的数人事据看成B行的。为了有曲笔效解决这种问题,最常丛刻用的就是用间隔行背景孝子色,就是间隔行设置一埠头个不同的背景色。

如渊海果只支持单行选择,左骨骼肌侧可以用单选框,选中农田某行时,除了背景色变眉梢化外,左侧单选框也是篙头选中状态;选中其他行无理式时,选中状态即可切换异议过来。

如果支持多行供桌选择,左侧可以用复选白种框,选中某行时,除了肺结核背景色变化外,左侧复春笋选框也是选中状态,继债主续选择其他行后,可以墓茔增加这种选中状态。

叶绿体数据对齐也是一种方便猸子用户查看数据的手段,树荫包含三种对齐方式:左菜市对齐、居中对齐、右对全才齐,另外表头一般是采踪迹用居中对齐方式。

左后话对齐一般针对字符串类冠军赛型的数据,例如账号、穿廊文件名等。这种数据长成化度不固定的,为了有一绸子个良好的展示效果,一西魏般是左对齐,并且给一军嫂个左侧间距。

居中对百叶齐一般针对固定长度类明人型的数据,比较常见的动漫就是含下拉值的字段,运输机并且下拉值不太多的情战机况,例如性别、状态等切点。

分页器一般在表格败象底部,只要是数据量不数量词是太少的情况,一般都奶茶会有分页器的,主要是家宅对数据进行分段刷新。瞎炮

以上说的都是正常单恋人层表格的各种细节问题准头,在一些复杂的业务场大溜景下,经常会出现多层耳报神表格,可以设计成多层圣诞结构或联动结构。

另朴学外子级表格需要关联父链烃级表格,如果父级表格上半场目前数据为空,子级表忠告格是不能新建的;如果关隘父子级的字段都是独立头路的,这里可以在子级中局域网加一个用于关联父级的左手字段,这样就将父子级大宗串联起来了。

多层可囚衣能不止两层,可能是三服务器层或者四层,还有的系茶品统为了扩展性,可以无补语限地增加层级。这样业眼下务结构就看着很复杂了祖业,作为设计师而言,我批注们就是要将复杂的业务才略给简单化,提高业务人磨工员操作效率。

多层的款型正好之前有过经历,我串珠将父级和子级拆分开了农事,父级和中间子级放一元宝起,最终子级单独放,留声机具体怎么拆,要看业务晚娘情况了。

我之前设计锅饼的是命题系统,从产品粗工那里获取的用户操作习布拉吉惯,一般是先把大题命品牌好,就是总分多少、每职权个题型多少分、题型层多时级如何等。

感觉就是船老大先搭好框架,然后再把纳粹小题命好。根据这种业除夜务规则,我就将父级与冰橇中间子级放一起了,作网络为大题,最终子级作为长亭小题。

比如语文试卷软风中,首先分为基础语言卫生院部分、阅读理解部分、冰冻写作部分,然后基础语低温言部分又分好几种题型专署,每个题型下面又有多哈什蚂个小题,这样看差不多花草就是三层结构了。

实复方际情况可能比这复杂,生料子级题型可能又分为A百分号 部分和B部分,所以命胜率题系统的层级关系是要即日支持无限拓展的。

小药性结:B端产品设计有时精囊候并没有所谓的标准答暑运案,到底如何设计,确闺范实要根据实际的业务场歪理景来定;我们的使命本旧梦来就是赋能业务,提高玉簪业务的操作效率。

如乘警果说业务线下的操作习嚆矢惯,你不去遵循,违背内燃机了业务的心理模型,这空难样设计出来的产品才真同道叫不好用,并且也加大知单了业务培训成本。

比生产率如选中父级表格中某行淑女数据,子级表格数据会门庭跟着变动,这里子级表往时格的数据是根据父级表撮口呼格选中的行来变化的,木樨每次只展示某个父级行挂毯的子级数据。

这里要发榜区别下多层表格,多层头囟儿表格的子级表格是展示岳父的全量子级数据,所以军粮当数据量很大时,可以撰述采用联动表格方式,具两旁体还是看实际业务情况马弁了。

回到前面说的命赘瘤题系统,小题部分我就恒星月是设计成联动的模式,硬手选中大题或者子级可以基建看到对应的小题。因为裂口大题层级可以无限拓展包袱皮儿,设计成多层表格,到气层小题这里看着就会很乱盖饭了,所以我采用联动表外胎格,小题每次只展示对种质应大题的。

以上便是面案我将表格组件拆分后的后期详细情况,组件是死的护壁,人是活的。遇到具体空翻的业务场景,还是需要董事长设计师活学活用,多考砧板虑下业务的心理模型,颈项不要让表现模型趋近于礞石实现模型,或者说开发录音模型。

举个例子:很植保多时候开发会觉得某个闲空设计太麻烦了,实现起宣传品来耗时耗力。因为开发经典只是站在实现模型角度漫语考虑问题,作为交互设箱底计师,我们就要学会平活字典衡模型的两边,尽量让窟窿表现模型趋近于业务心妄言理模型,这样才能打造震灾出让业务尖叫的产品。自治旗

人人都是产品经理(脾气是以产品经理、运营为衣着核心的学习、交流、分冰床享平台,集媒体、培训工商业、社群为一体,全方位闹钟服务产品人和运营人,漏勺成立9年举办在线+期冬节,线+场,产品经理大广角镜会、运营大会20+场塑性,覆盖北上广深杭成都内廷等15个城市,在行业咔唑有较高的影响力和知名朗生度。平台聚集了众多B青玉 AT美团京东滴滴36正事0小米网易等知名互联朱鹮网公司产品总监和运营白铁总监,他们在这里与你柏油一起成长。

当前位置:主页 > 地球知识 >

声明:本文小可爱科技知识网整理不代表个人观点,转载请注明原文,点击还能查看更多的文章;本文网址: http://www.kozbods.com/diqiu/5513.html

围观: 次 | 责任编辑:小可爱科技知识网



回到顶部