数据行的视觉设计
2.2.1行宽:
用特殊的行宽可以起到分隔区域的作用。
|
七年级总课表 |
| ||||
|
星期一 |
七(1)班 |
七(2)班 |
七(3)班 |
七(4)班 |
|
|
第1节 |
语文 |
英语 |
数学 |
语文 |
|
|
第2节 |
数学 |
语文 |
语文 |
数学 |
|
|
第3节 |
英语 |
数学 |
生物 |
英口 |
|
|
第4节 |
生物 |
体健 |
历史 |
思品 |
|
|
第5节 |
信技 |
书法 |
英语 |
地理 |
|
|
第6节 |
历史 |
劳技 |
体健 |
阅读 |
|
|
第7节 |
思品 |
生物 |
思品 |
劳技 |
|
|
星期二 |
七(1)班 |
七(2)班 |
七(3)班 |
七(4)班 |
|
|
第1节 |
数学 |
英语 |
语文 |
数学 |
|
|
第2节 |
语文 |
数学 |
英口 |
语文 |
|
|
第3节 |
英语 |
信技 |
阅读 |
体健 |
|
|
第4节 |
体健 |
音乐 |
数学 |
英语 |
|
|
第5节 |
地理 |
历史 |
体健 |
思品 |
|
|
第6节 |
生物 |
语文 |
劳技 |
体健 |
|
|
第7节 |
劳技 |
地理 |
生物 |
历史 |
|
|
星期三 |
七(1)班 |
七(2)班 |
七(3)班 |
七(4)班 |
|
|
第1节 |
英语 |
数学 |
数学 |
语文 |
|
|
…… |
…… |
…… |
…… |
…… |
|
颜色
隔行不同背景色的数据,就会使用户不易看串行
方向
线具有方向:在数据界面中,作为界面的“线”的意义的数据行只有2类:水平线和垂直线。在电子表格系统的概念中有时可理解为“行”和“列”。
线的不同特性在界面上的隐喻有所不同,比如:两种物质用“行”显示时,似乎没有什么关系,就像日月星辰一样,按照各自的轨道运行。
两种物质用水平方向显示“行”时
|
食物/100克 |
能量/kal |
蛋白质/克 |
糖类/克 |
脂肪/克 |
水分/克 |
纤维/克 |
|
…… |
|
|
|
|
|
|
|
番茄 |
19 |
0.9 |
3.5 |
0.2 |
94.4 |
0.5 |
|
苹果 |
52 |
0.2 |
12.3 |
0.2 |
85.9 |
1.2 |
|
…… |
|
|
|
|
|
|
然而,将它们“转置”的时候,
|
食物/100克 |
番茄 |
苹果 |
…… |
|
能量/kal |
19 |
52 |
|
|
蛋白质/克 |
0.9 |
0.2 |
|
|
糖类/克 |
数据行视觉设计技巧
本文探讨了通过调整数据行的宽度、颜色及方向等元素来改善用户体验的方法。以中学课程表为例,展示了如何利用特殊行宽区分不同区域,并通过改变背景色避免用户混淆数据行。此外,还对比了水平与垂直方向展示数据时对用户感知的影响。

被折叠的 条评论
为什么被折叠?



