今儿个心血来潮，我就琢磨着要研究一下AECOM设计公司的官网，看看人家是怎么弄的。为啥挑这个？简单得很，之前上班时听人老提这家公司设计搞得我就想学学，没准能用到自己博客上。

动手开搞阶段

我打开电脑浏览器，直接搜了AECOM官网进去瞅瞅。进去一看，哇塞，第一眼就发现页面挺干净的，颜色用的是那种深蓝配白色，感觉特专业。我就开始使劲翻页，上下划拉，发现菜单在顶部排得整整齐齐的，点开啥都容易找到。

• 首页部分：弄了个大图轮播，显示各种建筑项目，图片切换还挺顺滑的。
• 内容板块：接着往下划，看到分了几个区，比如说公司介绍、服务项目啥的，每个区都用小图标标出来，挺省事的。

模仿和折腾过程

看完人家样子，我也手痒，就在本地电脑上新建了个文件夹，开始抄作业。打开代码编辑器，先搞首页结构。复制菜单栏？不行不行，得自己弄。我就用div标签堆叠，弄了个简单的导航栏，把项目列表排一排。结果，一开始排得乱七八糟，左边挤右边空，看得人头疼。

中间还有个坑，图片加载老卡住。网站用的图都挺大的，我试着自己加了个背景图，页面刷开慢成蜗牛。赶紧查资料，发现可能是尺寸太大。我就用工具压缩图片，压缩完再丢进去，加载就快多了。

• 用户体验：后面发现手机看时布局崩了，我就手动调CSS，一点点挪位置，总算能让它在小屏幕上也能整齐显示。
• 互动元素：官网有几个悬停按钮，我一试，鼠标放上去会变颜色。我也跟着捣鼓，写了个hover效果，加了个变色动画，搞了半小时才搞定，累个半死。

实现后的感想和小故事

折腾一整天，整个页面模子终于有点样子了，学到的就是设计不是瞎堆砌，得讲究简洁和实用性。可这让我想起以前在设计公司打工的日子。那会儿老板天天催进度，我正弄个客户网站，改来改去改到半夜。客户突然加新需求，说要个动态效果，我熬通宵搞出来，结果第二天老板说“不用了”，白忙活。

最气人的是，有回公司聚餐，老板举杯说“大家多学学AECOM”，转头就骂我设计难看。我当场就掀桌辞职了，现在自己做博主，想研究啥就研究自由得很。前阵子那老板还打电话想拉我回去，直接拉黑拉黑，爱谁谁。这种事教会我，实践才是硬道理，闷头干就对了。