中后台产品的表格设计,看这一篇就够了(原型规范下载)

2018-01-25 22:01 来源:易采站长用户投稿 作者:admin 点击: 评论:

A-A+

原标题:中后台产品的表格设计,看这一篇就够了(原型规范下载)

  颠末了快要一年的背景产物阅历,踩了许多坑,试了许多错,也进修到了许多工具,今朝也构成了本人的一套标准。本文将此中的部门播种汇总成文,期望可以对各人有所协助。

  

 

  背景产物有一个很主要、常睹的元素,便是表格。表格负担着详情进口、数据展现的功用,看似简朴,实在内里的细节出格多。正在以服从为最主要的需供的背景产物中,怎样设想一个可以下服从天停止检察战编纂的表格,磨练着每个背景产物司理的根本功。经由过程本文的解说,根据本文的标准去设想表格,根本上能够做出一个没有会堕落的表格。

  表格次要负担着检察战编纂两个根底功用。怎样可以让用户便利、下效、温馨天检察数据战编纂数据,需求设想许多的帮助功用。上面,我们便环绕着那两年夜功用,便详细的功用面去停止讨论。

  本型预览:http://www.pmgrow.top/sheet/

  本型下载:https://pan.百度.com/s/1eTxGbHg

  第一部门:检察

  1、止

  (1)默许每页止数

  该止数太多时,会招致页里减载速率变缓;止数太少时,会招致用户需求不竭翻页,阅读服从低落。默许每页止数需求按照用户的实践利用场景去肯定,稳妥的做法是利用20或50。

  (2)默许每屏止数

  每屏能显现的止数。该止数太多时,会招致止下值较小,单止的检察结果好;该止数太少时,会招致用户需求不竭转动页里,阅读服从低落。该止数战页里分辩率有闭,需正在思索到次要用户的利用场景(条记本借是台式、屏幕巨细、次要分辩率)落后止肯定。

  (3)每页止数多于每屏止数时的处置方法

  年夜大都状况下,每页止数是多于每屏止数的。正在那样的场景下,用户利用的时分会发明那样一个成绩:背下纵背转动页里检察表格内容,转动到页里中部或底部时,表头是没法看到的。用户正在看到一个数据时,是不克不及够曲不雅天晓得那是哪项数据,从而需求背上转动检察表头。特别是面临列数较多的表格时,那样的场景会常常发作,页里不竭天高低转动,检察服从及其低下。

  处理那个成绩,凡是有两种处置方法:

  牢固表头:表头正在转动到页里顶部时,初末牢固正在该地位,用户可以便利天看到表头战数据的对应干系。

  表格的横背转动条:为表格增加横背转动条,经由过程拖动横背转动条检察表格内容。表头是没有会被拖动影响的。

  2、列

  (1)列躲藏、排序

  表格的列数较多时,正在一屏内是没法展现局部列的,用户需求经由过程横背的转动条去拖动检察差别的列。差别的用户正在差别的场景下,存眷的列是没有尽不异的。为了满意那一需供,我们需求许可用户对列的自界说:包罗哪些列展现出去,哪些列排正在前里。用户能够把本人没有体贴的列躲藏,把体贴的列放到最右边,从而可以正在一进进页里时便能看到本人最体贴的内容。

  (2)牢固列

  最少有一列是没有许可用户对其停止躲藏战排序的。该列凡是是表格数据的独一区分项,如定单列表的定单号等。

  (3)列宽

  列宽需求肯定一个开理的默许值,从而使表格内容有好的展现结果。不克不及太窄,年夜量数据会显现没有完好;不克不及太宽,年夜量留黑会让阅读服从低落。

  列宽值确实定普通顺从以下本则:

  表头不克不及换止,列宽应最少年夜于表头。

  列内容的少度牢固时,如脚机号(11位数字)等,列宽应年夜于该牢固宽度。

  列内容的少度没有牢固时,招考虑年夜大都状况下的少度状况。如本性署名,我们会许可10~50个字符,但颠末数据阐发发明,年夜大都本性署名的少度是正在20之内的,我们能够设定列宽为20,从而包管年夜大都状况的完好显现。

  正在较少状况下,我们设定的默许列宽出能满意数据的完好显现,而该数据的完好显现关于用户是比力主要的。针对那一状况,我们供给自界说列宽的功用,许可用户对列宽停止调解,从而到达本人念要的展现结果。

  (4)数据截断

  正在数据少度年夜于列宽度时,我们需求对数据内容停止截断处置。截断当前,开端减……鼠标移进时正在四周显现浮层显现完好内容。

  浮层的地位:数据正在纵背上的分离严密时,浮层显现正在阁下;数据正在横背上分离严密时,浮层显现正在高低。那样可以制止浮层对需求分离去看的数据形成遮挡。

  3、分页

  分页的功用较为简朴,普通满意那些功用便能够了:上一页、下一页、尾页、终页、快速跳转到某一页、每页数目的调解(20,50,100,200)

  

 

  4、排序

  (1)初初排序

  页里载进后,数据布列的次第,叫做初初排序。初初排序应为用户最体贴的排序。如正在时效性较强的列表,默许排序便该当是工夫降序。金额比力主要的列表,默许排序便该当是金额降序。

  (2)排序切换划定规矩

  当表格内的多列皆具有排序功用时,需求思索排序切换的逻辑。同时只能使用一种排序,正在使用新的排序时,旧排序该当生效。

  排序需经由过程单击停止激活战切换。激活新排序时,默许是降序借是降序,需求按照用户的存眷面去肯定(普通默许用降序)。新排序激活后,经由过程单击切换降降序,排序应正在“降序降序”中停止轮回切换。

  (3)差别字段的降降序逻辑

  字段范例凡是包罗文本、数值、日期。文本降序以“数字-特别标记-a-z-A-Z-汉字-其他字符“去施行,数值则以数值巨细去施行,日期以工夫值前后施行,降序反之则能够。需求留意的,有一些数值的降降序逻辑是需求特别处置的,如排名。一般的数值的降序时年夜数正在前,小数正在后,但排名的降序应是小数正在前,年夜数正在后。

  5、查找

  

 

  (1)查找范畴

  查找值需求婚配的范畴。如一个表格具有定单号、支件人两个字段,我们能够设置查找范畴为那两个字段。输进查找值后,能够查找到定单号或支件人能战查找值婚配的内容。

  (2)婚配方法

  查找值战查找到的内容之间的婚配干系,包罗准确、恍惚、前缀等。一样是查girl,准确只会查到girl,恍惚能够查到girl friend、pretty gril等,前缀只能查到pretty girl。

  (3)排序划定规矩

  当我们利用恍惚查找girl时,能够会查找到许多契合的内容。假如我们只是念找girl,能够需求翻页来找到girl。为理解决那个成绩,一种计划是许可用户挑选本次查找是准确借是恍惚;另外一种计划是用恍惚查找后,将完整一样的成果放到尾止,其他内容按本有方法排序。

  6、对齐方法

  为了使表格内容的展现更美妙战下效,我们需求肯定表格内容的对齐方法。凡是利用文本左对齐、数值左对齐的方法。

  7、详情进口

  表格偶然候会负担详情进口的做用。表格展现扼要数据,经由过程面击进进新的页里检察详情数据。以是,我们需求设想一个面击地区,让用户面击后触收进进详情页的操纵。普通有两种处理计划:1、以具有区分性的字段为链接(视觉上要有所差别),如定单号。2、正在表格内设置零丁的“检察”进口。前者节流空间,但存正在感强;后者存正在感强,但需求占用零丁空间。我们需求按照详细场景去肯定计划。

  

 

  8、挑选

  表格默许凡是展现一切数据。当我们只需求查找契合某些前提的内容时,便需求利用到挑选了。

  挑选凡是由多个前提组成。

  

 

  (1)前提

  利用【字段】-【比力干系】-【值】的方法去组成。如【定单金额】【年夜于】【100】,

  【支件人】【是】【张3、李四】等。比力干系凡是包罗 是,没有是,正在,没有正在,年夜于,小于,即是,年夜于即是,小于即是,介于等。

  (2)组开挑选

  挑选由多个前提组成,我们施行一个挑选需求增加多个前提。当那个挑选内的前提是比力牢固,常常利用的状况下,每次皆从头挑选前提皆比力低效了。以是,我们需求供给挑选的保留功用。挑选正在设置好后,能够保留下去,下次利用无需从头编纂便可使用。挑选保留需求供给定名、重定名、编纂前提的共同功用。

  (3)挑选的可睹性

  挑选当前,需求将利用的前提让用户可睹。用户可以曲不雅天正在挑选前提战挑选后的内容之间构成对应干系。固然,挑选前提较多时,会占用比力年夜的页里空间,我们也该当供给躲藏挑选的功用。

  第两部门:操纵

  1、单项操纵

  对单项的操纵,如删除、启动、久停等。那些操纵应安排正在最表格左侧,为牢固列。假如操纵比力多时,需将过剩的操纵合叠为‘更多’,外表上只保存1到2个经常使用操纵。

  

 

  2、编纂

  正在阅读表格内容时,有些数据我们正在检察当前是需求停止编纂的。此时,我们需求供给给用户快速的编纂方法。假如需求编纂的项较少时,我们能够正在鼠标移进编纂项时显现编纂款式,单击编纂项时

  进进编纂形态,间接修正保留便可。当需求编纂的项较多时,能够正在操纵栏安排编纂。面击编纂,使一切编纂项进进编纂形态。修正后,面击保留,同一保留。值得留意的一面是,最好可以呼应键盘操纵,键盘的enter可以触收保留操纵。

  

 

  3、勾选

  (1)齐选

  齐选选中后,能够对局部项目停止批量选中。但正在多页的状况下,齐选凡是有两种需供:选中当前页战选中局部。我们应供给给用户挑选,能够别离真现那两种挑选。

  

 

  (2)跨页挑选

  有些时分,我们需求勾选的项目正在差别页。正在第一页勾选几项后,翻页再来勾选其他项时,常常没法快速获知已选项的状况。以是,我们正在跨页勾选时,正在切换到其他页里时,需求正在表格顶部显现已选项的状况,许可删除此中某一项战浑空一切。

  

 

  (3)勾选形态的连结

  正在一些场景下,我们需求对统一批勾选项停止多个操纵。以是,勾选完成后,施行第一个操纵当前,我们需求连结勾选形态,以便施行接下去的操纵。

  4、按钮

  正在表格顶部安排按钮,施行经常使用操纵,普通劣先放正在左边(勾选当前停止操纵的鼠标挪动途径短)。假如按钮较多,需求按照按钮范例,将具有不异功用的按钮合叠组开。有一些按钮是共同着勾选停止批量操纵的,当出有勾选项时,需求禁用该按钮。

  5、导出数据

  表格凡是用去展现数据,用户常常会有将数据导出的需供。导出数据的功用设想时,我们需求思索那些。

  (1)文件格局

  凡是利用xlsx。该格局展现结果好,兼容性好,便于前期处置。但当数目量较年夜的状况下,基于导出速率的思索,能够利用csv格局。

  (2)文件名

  文件名要可以表达数据内容,凡是利用【页里】【表名】【工夫】等字段去肯定表名。

  (3)模板

  导出的文件的模板。凡是状况下,我们导出局部列的数据,纵使页里上展现的是部门列的数据。部门状况下,我们需求对模板停止一些款式上的处置,以到达美妙的结果。

  (4)导出耗时

  导出数据的历程是师长教师成该数据,然后正在下载该数据。当导出的数据量较年夜的状况下,死成数据耗时较少,我们需求思索导出耗时。一种简朴的设想办法是,面击导出数据后,变成导出中,以见告用户数据正正在导出。

  结语

  肯定标准的意义,正在于可以削减合作中的相同本钱。当产物、UI、前端皆对统一套标准告竣共鸣时,开辟服从会成倍的进步。产物正在本型图中无需增加通例的交互操纵,也不消思索前真个可真现性。UI战开辟正在看到您的本型图时,能疾速天按照之前的标准,大白您念表达的意义。那样,产物的精神便能更多天放正在需供上。

  正在进修的历程中,年夜量参考了蚂蚁设想。保举各人能够来理解一下。

  本文有年夜量内容是从交互设想角度阐明的。因为我之前是不断专注于需供,关于交互上的常识没有是很充实,成果招致开辟出去的产物的交互体验太好。以是本人来自动进修了相干的内容。关于中背景产物司理,特别是团队内的开辟资本没有是很充足的状况下,引进一套标准去真现自产业品的尺度化,是很有做用的。假如您的团队曾经有成型的标准,请对本文中的内容恰当接纳。产物司理的次要精神借是该当放正在需供上。

  本文由 @流风 本创公布。已经答应,制止转载。

  题图去自 Unsplash,基于 CC0 和谈

【易采站长站编辑:秋军】

App 里狂弹评分让你很郁闷?这样做就不同了 App 里狂弹评分让你很郁闷?这样做就不
A 君导读:上周灵感早读的一篇文章,跟大家分享了让人怒删 App 的三大理由,其中就包含弹出窗口。市面上很多 App 不厌其烦
弹框体系总结 弹框体系总结
弹框是一种重要的交互方式,主要用于完成信息传递和用户反馈两大功能。弹框很常见,但并不见的每一个设计师都可以10
为什么有些人做营销的样子那么讨厌? 为什么有些人做营销的样子那么讨厌?
“你真的待客户如初恋?” 很多人认为,做营销要让用户拿钱,那么......被用户抛来几个厌恶的眼神,甚至被咒骂几句都是
阿里3分钟破100亿,AliExpress 给了出海电商哪些启示 阿里3分钟破100亿,AliExpress 给了出海电
3 分 01 秒, 100 亿! 13 点 09 分 49 秒, 1207 亿!超过 2016 年双 11 全天成交额! 11 月 11 日,共完成交易额 1682 亿! 我们不得不
如果把网页设计成这样,你一定喜欢看 如果把网页设计成这样,你一定喜欢看
A 君导读: AppSo (微信公众号 AppSo )之前分享了丹麦籍设计师提出的几个设计原则,其中有一篇文章关于「避免功能蔓延」和「
为什么标题党总是有效? 为什么标题党总是有效?
来源 | 槽边往事(ID:bitsea) 作者 | 和菜头 首先,我要重申一个事实:大多数情况下,标题党总是有效的。 和大多数人的想
千人千面,称霸游戏武林的广告变现秘籍 千人千面,称霸游戏武林的广告变现秘
如今的游戏江山,各种游戏百家争鸣,加上广告的横空出世,一款游戏想要撇开广告而独善其身,结果就是淘汰。不想赚钱的
DataStory解锁品牌营销新趋势,迎接精准营销时代 DataStory解锁品牌营销新趋势,迎接精准
2017 年 11 月 24 日在上海虹桥万豪酒店,DataStory联合xx与 100 多家企业一起聚焦探讨企业和品牌应当如何以大数据分析为依托,
一文看懂国外视频网红们如何赚钱 一文看懂国外视频网红们如何赚钱
Youtube头号网红MichellePhan 据Cisco Forecast预测,到 2017 年底,视频流量会占全网流量的69%,并且在未来两年会继续增长, 2019 年
Facebook看重的UI/UX设计师技能 Facebook看重的UI/UX设计师技能
我的朋友Cynthia是一个不热衷社交网络的人,除了偶尔玩玩FB,你很难在任何圈子找到她的身影。前天她突然跟我说,她爱上了