好的让我们开始吧！

检视页面

首先我们先检视一次整个页面，可以发现一些显而易见的问题，比如说颜色众多、资讯架构杂乱、一些 Icon 并没有统一，还有比较严重的跑版没有处理等等，我们一一来分析。

Frontend 面

先就前端工程面而言，会看到底下这几个问题：

1. 导览列有很明显的破版。长度不够宽，所以新闻稿（press release）被挤到底下去了。转成中文後导览列长度一短就好很多。

2. 页面中出现了两个 Logo 。当滑鼠 hover 上去时是呈现 cursor 的状态，但观察原始码连结是空的，这样可能会让使用者误会。另外，以网页设计的角度而言，Logo 应该只能有一个，若要使用两个 Logo 可能要区分一下主次关系，就像是人有姓名和小名。

3. 第三个是转换成不同的语系之後，卫星云图这边就有明显的破版，标题因为换成较庞大的中文字被挤压到最上面了。比起制作 RWD 时需要注意的版面问题，「语系转换」导致的破版其实很难一时之间察觉，或根本没有想到，这也很值得注意喔。

4. Icon 被横向拉宽变形。在网页中的图片使用width: 100% 真的要很注意，小 Icon 尽量给他一个 width和 min-width。
   

Design 面

前端面就不多探讨了，设计的部分开始罗。

1. 网页的横向对齐只有三种，置中、置左、置右，内容呈现方形块状，尤其是这种资讯量较大的网页，尽量不要有脱板行为。
   

   这个 Icon 群组看不出是要对齐左边的字，还是右边的输入框。

2. 底下的蓝底红字配色会使易读性降低：导览列的配色蓝字在红笔上是一个对於用户非常不友善的配色，不仅难以阅读而且红底本身是有点刺眼的，其实可以降低它的饱和度或是改用白字
   

3. 再来看底下的 icon。
   左边地图中的icon跟右边选单里面的icon是不统一的样式，单色、多色、立体、线段等等参杂，统一後会让整个使用体验会更加的一致。