<
>

表格行高如何设定?来看腾讯设计师的总结!

2017-12-01 17:00:56 来源:易采站长用户投稿 作者:admin

  表格的止下能够间接影响到一屏能够展现几止疑息,即对疑息稀度有所影响;除此以外,表格的止下也影响着全部表格的易读性。以是本文将从疑息稀度战易读性两个圆里去会商一下止下该当怎样定。

  一. 疑息稀度

  1. 一屏显现几止对用户到底有无影响?

  要念从疑息稀度动手研讨止下,便先要弄分明一个成绩:一屏显现几止对用户到底有无影响?要念答复那个成绩,便必需要晓得用户终究是怎样利用表格的,即用户正在差别利用场景下皆有哪些止为。

  以腾讯云掌握台的表格场景为例,表格次要可以供给三种功用,展现疑息、操纵办理、详情进口。按照那三种功用的差别组开,构成了掌握台中差别的表格范例取场景。

  (1) 进口型表格

  展现疑息、操纵办理战详情进口三种功用皆包罗,次要用正在一级页里,用于展现真例列表。

  正在那种场景下,止数超越20条的用户数目没有小,且皆是年夜客户,以是那种场景没有容无视。我讯问了卖力差别营业的交互设想师,也联络了几个腾讯云的实践用户停止了访道,以理解用户正在此场景下的止为。

  

 

  正在此场景下用户的次要目的有两种:处理明白的成绩战自动检察利用状况。而次要的止为有:

  对置顶的成绩项逐条处置

  审视列表寻觅明白的条目或标白的非常项

  搜刮要寻觅的条目

  (2) 设置型表格

  包罗展现疑息战操纵办理功用,次要用于两级页里,做为设置列表利用。

  用户本人设置的划定规矩也常常会有许多,以是止数许多的场景也时有存正在。正在此场景下用户次要的目的有:增加新设置、删除/修正过往设置。次要的止为有:

  停止增加操纵

  审视列表寻觅要删除/修正的内容

  搜刮要删除/修正的内容

  (3) 杂记载型表格

  只要展现疑息的功用,经常使用于展现操纵日记、使命办理、数据详情等内容,此范例表格检察的频次较低。

  (4) 被动死成型表格

  包罗展现疑息战详情进口的功用,用户不克不及本人新删或删除,此范例表格里的数据是正在别处做了设置,正在此处为展现干系而被动死成的,那品种型的表格十分少。

  正在那四种差别范例的表格顶用户的次要目的取止为以下图所示:

  

 

  从上图能够看出用户借是常常要对表格停止审视的。因而一屏显现几止对用户的确有所影响,它会影响用户审视的服从。但终究有多年夜的影响,借需求我们进一步研讨。

  2. 一屏显现几止对用户有多年夜影响?

  虽然说如今那个时期愈来愈趋势于年夜屏化,但利用条记本的用户数目也很多。以腾讯云为例,利用腾讯云的用户的装备分辩率散布以下图所示:

  

 

  能够看出固然年夜屏用户占比最多,但1366×768的小屏用户也借是有必然数目的。正在1920×1020的尺寸下,以腾讯云中最多见的表格为例,尾屏能够显现11止。年夜屏用户暗示,他们对一屏显现几止并出有几感知。

  但关于小屏用户,正在表头战页足牢固的状况下,一次只能看到6止阁下,对审视的服从的确有所影响。可是假如没有牢固表头战页足,转动时没有限制地区而是齐屏转动的话,一屏也能够看到10止的内容。

  3. 怎样进步用户审视的服从

  止下当然能够影响到用户审视的服从,但其实不是次要影响,为了提拔审视服从借有多种有用的方法:

  (1) 只管整屏转动,供给更年夜的阅读空间

  正如方才所举的例子,牢固表头战页足后,正在牢固的小地区内转动会十分狭隘,并且地区转动战齐屏转动同时存正在时体验也很欠好。固然某些状况下的确需求牢固表头以协助用户辨认疑息的话,正在齐屏转动上来后牢固表头也没有是不成以。

  

 

  (2) 分页组件的「每页显现n止」只管供给更多挑选

  正在用户操纵时,转动鼠标的本钱要比面击一个按钮的本钱要小,以是分页组件中「每止显现n止」的选项应包罗50、100那样较年夜的数值,制止用户正在多止内容中查找内容时需求频仍的翻页。

  

 

  (3) 凸隐主要内容的视觉重量

  果为用户尾先会浏览最具视觉重量的内容,因而,对用户判定有决议计划做用的主要内容能够只管凸隐。比方形态上的非常能够用下明色标出等。表格中也能够用图形化的情势去协助用户快速搜刮疑息,比方正在表格中利用进度条去表白用量等疑息。

  

 

  (4) 将枢纽疑息放正在最左边

  按照用户F型审视的风俗,能够只管将用以辨认全部条目标枢纽疑息放正在最左边,比方称号等独一标识性疑息。

  (5) 只管供给排序挑选功用

  合时的排序挑选功用也能够协助用户正在年夜量的疑息中根据次第找到本人念要的疑息,或快速挑选出本人念要的疑息。

  (6) 将非常情况置顶显现

  关于有非常的条目,最好能够标白置顶显现,让用户一进进页里便能快速留意到非常情况。

  

 

  两. 易读性

  1. 包管易读性的常睹做法

  表格的止下影响的另外一个圆里,便是每止疑息的易读性。关于表格易读性的研讨我真正在出有找到甚么材料,但关于笔墨疑息排版的易读性,倒是有一些经常使用风俗的。

  正在笔墨排版中,止下的挑选普通为字号的1.2~1.8倍,段间距凡是利用一个止下的间隔。止下的界说以下图所示,开辟同窗正在真现设想稿时,凡是也是根据止下去写的,而没有是像设想同窗一样根据笔墨的尺寸去计较间距。

  

 

  正在思索表格的止下时,我以为能够参考笔墨排版的经常使用做法,将全部表格的止下分红笔墨止下、笔墨取朋分线间间隔,即高低间距两部门去思索,笔墨止下能够设定为字号的1.2~1.8倍,笔墨取朋分线间间隔能够设定为字号的1~1.5倍。分为那样的两部门也比力契合开辟同窗写代码时的风俗。

  2. 按照常睹做法,我那边给出了几个保举的止下值

  表格止下48px,字号12px,笔墨止下是字号的1.5倍即18px,高低间距是字号的1.2倍即15px,笔墨取朋分线的实践间距为字号的1.5倍18px。利用那种止下全部表格会比力透气,正在小屏下整屏能够显现9止,关于审视服从影响没有年夜。

  表格止下42px,字号12px,笔墨止下是字号的1.5倍即18px,高低间距是字号的1倍即12px,笔墨取朋分线的实践间距是字号的1.2倍即15px。利用那种止下的表格间距较为适中,正在小屏下整屏能够显现10止。

  表格止下32px,字号12px,笔墨止下是字号的1.3倍即16px,高低间距是字号的0.6倍即8px,笔墨取朋分线的实践间距是10px。那种表格比力松散,能够用取卡片中的小型表格等空间比力小的处所。

  

 

  3. 闭于止下的更多做法

  除将笔墨止下设定为字号的1.2~1.8倍,将高低间距设定为字号的1~1.5倍那样的做法中,闭于表格的止下的设定借有更多的一些做法,去包管各分辩率、各场景下获得疑息的服从取易读性。

  (1) 差别分辩率利用差别止下

  为了给年夜分辩率战小分辩率用户皆供给较好的体验,能够设想两套差别的止下,正在年夜分辩率下显现较下的止下,给数据间供给更多吸吸的空间;正在小分辩率下显现较小的止下,使一屏内能够看到更多的止下。Gmail便是那样设想的,以下图所示:

  

 

  (2) 差别场景下利用差别止下

  为了包管差别场景下的体验,也能够正在差别场景下利用差别的止下。比方正在有多卡片的概览页,某个卡片中有表格,正在那种场景下,卡片的尺寸皆很小,空间有限,此时便能够利用较小的止下,包管此场景下的体验。比方谷歌 analytics的dashboard中的表格,以下图所示:

  

 

  (3) 用户可自止设置止下

  真正在出法子判定如何的止下对用户去道是适宜的时分,能够把挑选交给用户,让用户本人设置表格止下,固然道只管给用户供给少的挑选能够削减用户的考虑,但正在表格没有隐眼的处所供给那种无伤风雅的小挑选,对用户没有会形成甚么滋扰,反而用户发明时会以为是个小欣喜,会以为正在细节上设想师思索了许多,以是正在开辟资本能够满意的时分,也能够测验考试那种方法,以下图(去自Andrew Coyle的文章)所示:

  

 

  经由过程此次表格止下的研讨我发明,设想便是一个压服本人的历程。正在研讨的历程中我经常抓狂的问本人为何要研讨那样的成绩!那成绩看起去仿佛其实不是一个成绩,出有人写过本人的表格止下终究是怎样定的;那成绩很小,便只是定一个数字罢了;那成绩又太易,不管我怎样定那个数字,我皆念反问本人,您凭甚么那么定?

  每当我念要抛却,念要随意定一个数字的时分,我皆以为我真正在是出法压服我本人。跟着我采访其他设想师、采访实践的用户、研讨笔墨排版的止下设定,我才渐渐有了一面底气,才渐渐晓得本人设定的那个小小的数字是从那里去的。固然终极也出有一个肯定的谜底,但正在那个历程中我的确是正在不竭的找证据去压服本人。

暂时禁止评论

微信扫一扫

易采站长站微信账号