定位基准和设计基准的区别
毫无疑问,表格之于B端产品而言是及其重要的一部分,那么,如何系统掌握B端产品中的表格设计呢?本文作者从表格设计规范与交互逻辑两个角度提出了15点建议,干货满满,希望对你有帮助。
![](https://p0.ssl.img.360kuai.com/t01627657c8d405bfba.jpg)
表格作为B端产品中重要的界面组成部分,承载着内容展示、数据记录等多重任务。每家产品的表格看起来构成差不多,但在交互细节上仍然有很多好的地方值得我们仔细思考。
本次通过整理10条B端表格设计规范+5条B端表格交互逻辑,系统掌握B端产品中的表格设计~
一、B端表格规范整理
1. 对齐,高效的信息获取方式表格内的信息通过对齐,会更加规范易理解,给用户视觉上的统一感,且视线流动顺畅,能够让人快速捕捉到所要的内容。
- 文本信息左对齐,因为现代人的阅读方式习惯从左到右,符合正常心智;
- 数据信息右对齐,方便数字大小的直观对比;
- 内容宽度固定居中对齐,更好的信息呈现及表格空间的节省;
- 表头与信息内容对齐方式一致,一致性以达到简化,降低视觉噪音。
![](https://p0.ssl.img.360kuai.com/t018ad8691f6e8ec512.jpg)
默认展示的列数为3-8列,如果需要展示更多列数,则需要优先固定展示重要列,其余的列的内容会以滚动条滑动而展示出来。
有操作时需固定,操作项不固定时无法快速定位会降低操作效率;重要信息固定,有利于快速获取重要的内容。
![](https://p0.ssl.img.360kuai.com/t0196b3d35ad6a038e9.jpg)
宽度的尺寸大小自适应,但需要根据文字的重要性显示,重要文字内容优先完整显示。(如果由于屏幕小表格会出现省略,就要考虑多一个浏览器自带的title提示。)
注:当第一列是序号或多选项时,列宽不需要太宽,这样视觉不会显得空洞。
![](https://p0.ssl.img.360kuai.com/t011018667a319dcf7f.jpg)
字符不要多,如果文字太多,就需要做文字信息精简化。同样,对于专业术语或用户不常见的名词应给予一定的帮助说明。
![](https://p0.ssl.img.360kuai.com/t0182b82cc0961493fb.jpg)
表格内容较多且有长文本时,长文本缩略展示;表格内容较少时有长文本,长文本换行展示。
![](https://p0.ssl.img.360kuai.com/t0160bd045acdbc07c2.jpg)
表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗?明智的做法,使用「-」填充显示。图片为空时使用图片占位符。
![](https://p0.ssl.img.360kuai.com/t01c42ac622f4487e41.jpg)
同一项目中的操作列命名应该保持统一,例如:常规增、删、改、查命名为新增、删除、编辑、详情。
操作项超过三个时,将操作低频折叠收起,可以帮助页面突出更加重要的信息,减轻空间压力,减少干扰。
![](https://p0.ssl.img.360kuai.com/t0124bbb58c06c077a7.jpg)
给数据做升降区分可以快速判断数据的趋势,国内数据升图标默认为红色,降的为绿色。
![](https://p0.ssl.img.360kuai.com/t0104f80b08ad0c3675.jpg)
全局操作为无需选择数据内容即可进行的操作,常见的有新增、导入、筛选。
批量操作就是对表格的多行数据同时操作,常见的有导出、删除。
全局和批量都不属于单个对象因此需要放在表格外,操作具体的位置排放根据操作的重要程度一次从左到右递减。
![](https://p0.ssl.img.360kuai.com/t0145affdc96a10cbac.jpg)
条纹颜色:标题背景色透明度60%左右;(条纹颜色视觉上应该比标题栏弱一点)鼠标hover颜色:主题色透明度10%。
![](https://p0.ssl.img.360kuai.com/t01cc08e6ad7e998845.jpg)
二、B端表格交互整理
1. 固定表头,一目了然当阅读丰富且繁多的表格时,由于屏幕有限,用户不得不拖动横向或纵向滚动条来阅读信息。
固定表头,能够让用户明白当前单元格内信息的属性而不至于不知道该信息的意思。固定表头也是一种界面友好性的体现。
![](https://p0.ssl.img.360kuai.com/t013d60215baf5e877e.jpg)
可以让无序信息内容进行有序排列,排序分为升序和降序,一般用在数据、时间、数量上。
3. 调整列宽度,查看完整数据允许调整列的宽度来查看更加完整的缩略数据。被截断的数据,默认支持鼠标悬停时浏览器自带title显示完整数据。
![](https://p0.ssl.img.360kuai.com/t014a4c432407434ee5.jpg)
呈现大型数据集时,水平滚动是不可避免的,通过横向滚动查看其它数据。将首列进行固定(若包含勾选操作,则一起固定),以便用户将数据与对象进行对应。
![](https://p0.ssl.img.360kuai.com/t01939bdbdeb9641fcd.jpg)
若表格是分页处理的,分页会放在上部、下部或上下部均有,分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。
![](https://p0.ssl.img.360kuai.com/t01b30a6ea53e5faab4.jpg)
作者:谭檀檀
","gnid":"9ad66a51ce110df37","img_data":[{"flag":2,"img":[{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t01627657c8d405bfba.jpg","width":"900"},{"desc":"","height":"418","title":"","url":"https://p0.ssl.img.360kuai.com/t018ad8691f6e8ec512.jpg","width":"1080"},{"desc":"","height":"204","title":"","url":"https://p0.ssl.img.360kuai.com/t0196b3d35ad6a038e9.jpg","width":"1080"},{"desc":"","height":"439","title":"","url":"https://p0.ssl.img.360kuai.com/t011018667a319dcf7f.jpg","width":"1080"},{"desc":"","height":"423","title":"","url":"https://p0.ssl.img.360kuai.com/t0182b82cc0961493fb.jpg","width":"1080"},{"desc":"","height":"204","title":"","url":"https://p0.ssl.img.360kuai.com/t0160bd045acdbc07c2.jpg","width":"1080"},{"desc":"","height":"205","title":"","url":"https://p0.ssl.img.360kuai.com/t01c42ac622f4487e41.jpg","width":"1080"},{"desc":"","height":"413","title":"","url":"https://p0.ssl.img.360kuai.com/t0124bbb58c06c077a7.jpg","width":"1080"},{"desc":"","height":"203","title":"","url":"https://p0.ssl.img.360kuai.com/t0104f80b08ad0c3675.jpg","width":"1080"},{"desc":"","height":"258","title":"","url":"https://p0.ssl.img.360kuai.com/t0145affdc96a10cbac.jpg","width":"1080"},{"desc":"","height":"202","title":"","url":"https://p0.ssl.img.360kuai.com/t01cc08e6ad7e998845.jpg","width":"1080"},{"desc":"","height":"420","title":"","url":"https://p0.ssl.img.360kuai.com/t013d60215baf5e877e.jpg","width":"1080"},{"desc":"","height":"206","title":"","url":"https://p0.ssl.img.360kuai.com/t014a4c432407434ee5.jpg","width":"1080"},{"desc":"","height":"422","title":"","url":"https://p0.ssl.img.360kuai.com/t01939bdbdeb9641fcd.jpg","width":"1080"},{"desc":"","height":"226","title":"","url":"https://p0.ssl.img.360kuai.com/t01b30a6ea53e5faab4.jpg","width":"1080"}]}],"original":0,"pat":"art_src_3,fts0,sts0","powerby":"hbase","pub_time":1681092300000,"pure":"","rawurl":"http://zm.news.so.com/a4f36193b0c21b3a64cd9853ea29b02a","redirect":0,"rptid":"73641cfbe974fdd0","rss_ext":[],"s":"t","src":"人人都是产品经理","tag":[],"title":"15个关键点,掌握B端表格设计规范+交互逻辑
葛冰通1500工艺基准按其作用可分哪几种
逄力妻17232505565 ______ 工艺基准是在工艺过程中所使用的基准.工艺过程是一个复杂的过程,按用途不同工艺基准又可分为定位基准、工序基准、测量基准和装配基准. 工艺基准是在加工、测量...
葛冰通1500什么是基准转换误差 -
逄力妻17232505565 ______ 定位基准与设计基准不重合时,定位基面到设计基面之前的尺寸公差.
葛冰通1500设计基准和工艺基准的概念是什么呢?
逄力妻17232505565 ______ 设计基准:在零件图上用以确定其它点、线、面位置的基准,称为设计基准. 工艺基准:零件在加工和装配过程中所使用的基准,称为工艺基准.工艺基准按用途不同又分为装配基准、测量基准及定位基准.
葛冰通1500设计基准和工艺基准? -
逄力妻17232505565 ______ 设计基准是你设计时候采用的基准,而工艺基准是指由于加工工艺顺序的不同,为了减小误差从而所采用的基准.
葛冰通1500机械加工基准使用原则 -
逄力妻17232505565 ______ 都是我从课本上抄下来的,希望对你有用!费了老劲儿了 基准 机械零件是由若干个表面组成的,研究零件表面的相对关系,必须确定一个基准,基准是零件上用来确定其它点、线、面的位置所依据的点、线、面.根据基准的不同功能,基准可...
葛冰通1500为提高机械的加工质量,在工艺方面就定位基准选择和加工顺序安排应采取哪些措施 -
逄力妻17232505565 ______ 为提高机械零件的加工质量,在工艺方面就定位基准选择和加工顺序建议如下: 一般定位基准按加工零件不同分为粗基准和精基准,使用原则及目的如下: 一.粗基准的选择原则 目 的 1.选择不加工表面为粗基准,尤其应 可保证加工表面与不加...
葛冰通1500工件定位时,用来确定工件在夹具中位置的基准称为() A设计基准B定位基准C工序基准D测量基准 -
逄力妻17232505565 ______ B 定位基准
葛冰通1500设计基准和定位基准重合时,不存在定位误差 对还是错
逄力妻17232505565 ______ 这个说法是错误的,定位误差有多种,你说的两个基准重合时,将不产生产生基准不重合引起的定位误差,但是由于定位制造副制造不准确,引起定位基准相对夹具上定位元件的起始基准发生位移,而产生基准位移定位误差.等等还有别的相关原因引起的定位误差.
葛冰通1500基准重合,基准统一各有何特点?
逄力妻17232505565 ______ 基准统一就是大家都使用同一个基准.优点嘛.打个比方说,有两个孔,他们之间有位置要求.1、如果加工这两个孔,我们都使用同一个基准,那么他们之间的由基准带来位置误差就只有这一个基准的位移误差;2、如果这两个孔,使用不同的两个基准,那么他们之间的由基准带来的位置误差是不是这两个基准的位移误差之和?当然,这也是相对于其他情况不变的情况下来说的,在有的时候,虽然基准统一了,但是基准又不重合了,你就要考虑基准不重合会带来多少误差了.当工件以某一精基准定位,可以比较方便地加工其余各表面时、应尽早地在开始几道工序...采用统一基准的原则有一系列的优点,它不但可以简化工艺过程的制定及统一夹具设计,而且还可以避免基准转换所带来的误差.