fi 原稿

今天主要分以下几种情况为大家介绍如何制作时间轴页面。

/ 1 /
文字较多页面

我们一页页来看，首先是这样一个文字较多但时间数量较少的页面：
看原稿的第一感觉就是文字太小看不清楚，另外虽然使用了横向排列的布局，但“时间轴”的感觉并不明显，没有很好的突出时间关系。

那么这样的一个页面该如何修改？对待时间轴页面，我们一般的处理方式是使用点线等元素，按从左到右的顺序呈现时间关系。

当然，如果觉得过于单调的话，我们可以从点线元素入手，添加渐变等效果。也可以从背景入手，进行美化。

点线元素制作起来特别困难？没关系，对于这类文字较多的时间轴，我们还可以尝试纵向的布局，

针对文字内容较多的情况，还可以采用蜂巢式的布局方式，将内容以最清晰的方式呈现在大家面前。这些设计我觉得大家都可以做一个参考。

/ 2 /
文字较少页面

第二页是这样一个文字较少但时间数量很多的页面：
原稿给人的感觉就是密密麻麻一堆文字挤在一块，很难体现其中的时间关系，那应该怎么修改呢？

我们仍然可以采用常规的横向布局结合点线元素来呈现时间轴页面，

所有内容放在一页上呈现可以嘛？

当然通过这几个页面也不难发现问题，由于时间数量较多，横向的排版容易导致内容放不下，出现文字过小的情况。

因此在内容较多的情况下，我们可以尝试一些其他的布局方式，例如九宫格，

合理运用版面，还可以这样做，

是的，内容较多的情况下，我们不一定死板的采用横向布局，合理利用空间，同样能做出不错的效果。

/ 3 /
发展历程页面

第三个案例，是海尔的一个发展历程：

原稿虽然有体现时间关系但是呈现效果并不好看，因而通过这个案例我希望给大家分享一些设计感很强的设计思路。

如何修改呢？不妨采用了一个刻度线的效果，同时结合海尔品牌的UI色，整体风格非常清爽。

类似的，也可以采用了一个进度条的效果，同时黑金的配色显得非常有质感，

将进度条与背景图片本身做一个融合，同样起到了非常好的效果。

除了创意设计外，我们还可以增强点线元素的效果，我们来看这样一个设计。

/ 4 /
日程表页面

除了发展历程，我还准备了这样一个日程表的页面：

这类页面内容本身并不复杂，主要的工作量集中在设计美化上，我们同样可以采用基础的横向布局，

相对来说，纵向的布局也许会更加清晰一些，

再比如结合时间这个关键词，我们可以设计一个纵向布局的页面，

其实这类页面由于内容简单，自由度也非常高，我们最后看这样一个扁平化的设计。