请选择 进入手机版 | 继续访问电脑版
查看: 666|回复: 13

良无限:优秀的表格范例

138

主题

221

帖子

425万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4256570
admin 发表于 2015-11-3 15:30:48 | 显示全部楼层 |阅读模式
命题由来:良无限系统中表格目前正在进行优化中,很多互联网产品都带有表格,同时各有不同。淘宝后台,QQ邮箱,招行专业版……而且前台后台都有区别。我们这次来专门对每款产品的表格差异进行分析。他们的用户有什么特点?为什么他们的表格呈现形势不同?对于良无限系统,有没有可取之处。
  我们良无限后台系统现在遇到的问题是,表格里面字段太多,都要通过左拉才能看全,同时操作都在最后,用户使用很不方便,表格展示空间也非常的狭小。继续寻找一种解决方法。
  ▲要改造的对象,随着业务的不断发展,现有的表格已经无法满足当下的需求,内容列字段不断的增加,操作不断的增加,功能需求不断的增加。
  表格的功能有哪些?
  1.多纬度展示
  2.信息归类
  3.比较
  4.搜索
  5.排序
  6.统一操作
  那么有哪些交互方法能够帮助用户使用?这就是这篇博文的重点:
  1.线条的有无
  2.字段的关系
  3.颜色运用
  4.icon和文字的使用
  5.合理的隐藏内容
  下面来通过大众用户使用的软件中发现这些交互手段的体现。
  1.线条的有无——表格中看实际场景考虑到底是行重要还是列重要,还是都需要线,但有不影响浏览。
  到底用横线还是纵线还是都要,还是都不要关键在于,你所要呈现的信息是否关系足够紧密,是否必要让用户方便浏览关键信息。如果字段差异明显,可以去掉线条,如果字段差异不大,可以通过线条进行区分方便识别。
  ▲邮件中,都是一单封邮件为单位的,横线对用户还有指导作用。同时点击表头的列名,会有正列的变暗,方便对比。
  ▲由于所有的内容都是数量,不用列线很难区分于是表格加上了很淡的行线和列线
  ▲当然表格可以做的更加的灵活,可以有些列有列线,有些没有列线,方便用户的区分
  2.字段的关系——关系紧密的字段一定要靠在一起,方便浏览
  ▲我的淘宝是对于关系紧密的字段,除了把他们放在同一个框内,还使用了一个订单上下结构,使得浏览更加的方便。
  3.颜色运用——用户要看到的是表格中的内容,而不是表格本身,所以线条,背景色都要表现的弱一点,同时为了方便用户找得到自己选择,最好有稍强的hover效果
  ▲百度音乐,设计的时候除了歌名饱和度高些,其他都很弱,甚至连文字都不存在了,用户很方便找到自己的内容
  ▲用户在买了足彩想第一时间看到自己的是否中奖,所以在表格设计时,中奖的都用饱和度很高红色来表示,让用户一眼就看到。这个不是hover效果哦
  ▲我的收获地址,默认地址颜色饱和度是最高的,鼠标划过其他行,颜色饱和度都没有他高,不停的提醒用户默认地址的存在性,减少用户的犯错。
  4.icon和文字的使用——一般说来,用ICON的内容一定不是表格的重点内容,重点内容一定是文字,icon的作用是减少表格的空间,让表格主次分明,当然ICON的辨识度是很重要的。
  ▲在这里你看到的文字只有歌名,而其他所有的操作都是用icon来表示的。试听,分项,收藏,下载,视频,更多这些很大众化的icon让用户一看就能明白。相反用了很多留空和收听数量的数据可视化,让表格更加的有层次。
  ▲竞彩页面的数据量非常的大,在中间的奖(各盘口的奖金数据),讯(比赛资讯),同(相同赔率的比赛),带有文字的icon减少了很多的空间。给了很大空间来操作,层次很清晰。虽然用户可能对这些icon不知道,但是点了一次就懂了。
  ▲我的淘宝里面每笔订单都有超过20种信息,这里就通过合理的排版和icon的配合来解决这些问题。天猫商品,旺旺,正品,7天无条件退货,查看评论等都是用icon来实现的。对于评论,采用了hover效果,更加方便了使用。使表单结构非常的清晰
  5.合理的隐藏——也是一种常见的表格操作手段,用来对与主信息关系最远的信息的展示。表现形式有滑过,点击。
  ▲对于订单而言,你对商家的留言,与这个订单的价格等相比是相当次要的,如果单独拿出一列来展示,会很让非空间,同时字数也不好掌握很难排版,所以用了hover效果
  ▲支付宝交易记录,他的操作栏,由于内容多,全部展开会影响表格的主次关系,所以用了影藏的,划过显示次要操作。
  ▲这个icon离价格很近,icon像感叹号,吸引点击,点击之后出现对于价格更加紧密的内容。
  大家收集了这么多优秀的表格范例之后,下一步就是如何更好的运用到我门自己的系统里面,方法就这5点,如何运用他们就靠各位自己的发挥了。相信每个人都对5种方法有自己的一套理解吧!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
51shopnc非常好
回复

使用道具 举报

0

主题

7

帖子

26

积分

shopnc小学生

Rank: 1

积分
26
cafdc 发表于 2015-11-6 04:42:17 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

0

主题

67

帖子

157

积分

shopnc初中生

Rank: 2

积分
157
shamo 发表于 2016-1-20 18:32:19 | 显示全部楼层
激动人心,无法言表!强烈支持51shopnc
回复 支持 反对

使用道具 举报

9

主题

165

帖子

3716

积分

土豪会员

Rank: 8Rank: 8

积分
3716
462548187 发表于 2016-6-27 16:10:04 | 显示全部楼层
我只是路过打酱油的。
回复 支持 反对

使用道具 举报

0

主题

293

帖子

690

积分

shopnc大专生

Rank: 4

积分
690
QQ
ykhrt 发表于 2019-12-9 15:44:02 | 显示全部楼层
支持一下吧!登入注册有888大红包赚钱   http://www.w888w888.com
回复 支持 反对

使用道具 举报

0

主题

4

帖子

13

积分

shopnc小学生

Rank: 1

积分
13
QQ
欧美幼幼42 发表于 2019-12-15 07:55:46 | 显示全部楼层
呦呦资源论坛开放注册了!!限时开放注册

iujlb2.com
回复 支持 反对

使用道具 举报

0

主题

31

帖子

91

积分

shopnc初中生

Rank: 2

积分
91
QQ
abguo 发表于 2019-12-23 16:27:02 | 显示全部楼层
终于看完了~~~












沈阳妇科
沈阳人流
沈阳凤凰医院
沈阳无痛人流专科医院
沈阳妇科医院排行榜
沈阳人流医院
沈阳妇科医院哪里最好
沈阳无痛人流医院排名
沈阳无痛人流
沈阳凤凰妇科医院
沈阳妇科医院
沈阳正规人流医院
沈阳无痛人流
沈阳妇科最好的医院
沈阳无痛人流多少钱
沈阳最好的妇科医院
回复 支持 反对

使用道具 举报

0

主题

12

帖子

34

积分

shopnc小学生

Rank: 1

积分
34
QQ
jhznu 发表于 2020-1-6 17:36:22 | 显示全部楼层
看帖子的都发表一下看法












沈阳好的妇科医院
沈阳妇科
沈阳妇科医院
沈阳凤凰妇科医院怎么样
沈阳凤凰医院怎么样
沈阳妇科医院哪家好
沈阳妇科专业医院
沈阳妇科专科医院
沈阳妇科医院排行榜
沈阳正规的妇科医院
沈阳正规妇科医院
沈阳人流医院
沈阳无痛人流医院
沈阳人流
沈阳人流价格
沈阳人流定点医院
沈阳哪家医院人流好
沈阳好的人流专业医院
沈阳治疗妇科医院
沈阳人流重点医院
沈阳省医失眠抑郁研究院
沈阳SEO公司
沈阳公司注册
沈阳SEO
沈阳网站优化
儿童美术加盟
LED灯厂家
LED线条灯
沈阳环氧富锌底漆
沈阳家具厂
沈阳搬家公司
张家界旅行社
有机硒
回复 支持 反对

使用道具 举报

0

主题

275

帖子

659

积分

shopnc大专生

Rank: 4

积分
659
QQ
dbrmq 发表于 2020-1-10 22:40:39 | 显示全部楼层
支持一下吧!登入注册有888大红包赚钱   http://www.w888w888.com
回复 支持 反对

使用道具 举报

0

主题

275

帖子

659

积分

shopnc大专生

Rank: 4

积分
659
QQ
dbrmq 发表于 2020-1-15 06:04:41 | 显示全部楼层
支持一下吧!登入注册有888大红包赚钱   http://www.w888w888.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则