为什么要重设计？

理由1——新的起点

首先，最明显的问题是，整体设计非常的不一致，在上一版设计中，缺乏明确地设计语言，没有明确的色彩与字体使用规范，甚至连布局上，有几个页面也非常不一致。VI设计上，也没有很好地延续网站的视觉风格——名片、明信片、海报。历经了很久的磕磕绊绊后，我们决定推倒重来。我们决定创造出高扩展度的界面，同时达成响应式布局，让多平台均可以舒服地浏览。

理由2——品牌更加成熟

第二，我们意识到，我们之前的品牌形象和我们的目标不太相符。随着多方合作不断增多，用户基础不断增加，我们需要更加精致、细腻、专业的品牌形象。

新面貌

阶段1

回到去年11月，我们和我们的朋友Eddie Opara以及他的设计团队开始合作，旨在构建更符合品牌形象的视觉设计。

首先，我们决定先打磨一下Logo，作为改版的核心之一，Logo至关重要。我们慎重的和用户、合作伙伴、老板讨论了之后。我们开始了Logo得重构。

优秀的Logo设计，需要让颜色、字体、图标互补，且一致。而且Logo的重设计，也决定了其他部分的重设计。下面是我们的种种努力，各位可以看一看。

阶段2

在和Pentagram团队（Eddie Opara的设计团队）确定了Logo、字体、图标、颜色后。我们决定将这套样式应用到我们整个网站生态系统中。首先，我们需要构建一套一致的UI设计模式，方便我们重设计时重用元素。我们花了2个周构建了一套可缩放大小的UI套件。

阶段3

这里我们开始了实际设计阶段，很磨人，但是是非常重要的。根据站点地图，我们重设计了70多个页面。我们先规划好任务周期和期限，最终，我们完成了各种里程碑。

阶段4

最后这个阶段，主要是验证阶段。我们开始实施并验证我们的重设计，我们选择了一些用户和版主，邀请他们实时测试，并认真听取反馈并修改。

尚未结束

虽然整体的重设计完了，但是一些小细节上，还是需要打磨，我们会不断推陈出新，让大家更愉快地学习编码。

此次重设计的10大原则

#1单栏

我们的通知页采用了单栏布局

将内容限制在单栏，有助于用户凝聚注意力，同时用户阅读顺序是自然而下的，我们就更方便去进行视觉引导。而且，还有一点，单栏有助于响应式设计的构建，能够很好地适应手机和平板。

#2来自用户的证明

贯穿网站的用户推荐评价卡

我们的网站是为用户而服务的，我们不想做独断专权，强迫用户的人。在重设计中，我们更加注重用户，因为用户来Codecademy都是为了学习的，每一个用户都需要被励志或者励志别人。我们希望用户能把自己在Codecademy中的收获写出来，或是一些哲理的句子，或是自己的成功经历。

#3更多的色彩对照

此次重设计，我们在色彩运用上变得保守，对比感明显的色彩主要在一些行为召唤、悬停状态、按钮和控件中出现，这样用户便能够按照引导来操作，提高效率

#4减少填表域

简化后的注册窗口

填表冗长，用户会感到厌烦众人皆知。因此我们最小化了填表域所需的信息，旨在提高转化率，减少用户输入。

#5保证视觉焦点

具备行为召唤的元素不宜太多，否则会让用户感到认知过载

减少单个页面中行为召唤元素的个数，根据希克定律，选项越多，用户就越难做抉择，因此我们必须保证主要元素具有视觉吸引力，删减次要元素。

#6直接处理

内容卡片，当悬停后，或出现相关的操作项。

我们决定让内容为王，当用户悬停在某个元素上时，我们直接提供与内容相关的操作，而不是进入跳转链接。

#7视觉层次感

这是我们的新博客，展示出较为清晰的视觉层次感。

设计师能力的高低，要看他设计的视觉层次感。通过字体、颜色、图标的布局，我们意图打造清晰的内容顺序和视觉层次感，从而提高文本的可读性。

#8可辨识度

正在处理中得项目卡片，顶部可以实时预览项目

在生理上，人类能够记忆起不久之前的东西。因此我们在整体的生态系统中（个人页，后台）等，均提供了项目快照，让用户对操作的对象更加熟悉，避免误操作。

#9更大的对象

选择填表域的行为召唤感最为强烈

根据费茨定则，目标越大（指针和目标的距离越近),越能快速完成操作。因此，一些主要的、需要交互的UI元素，比如填表域、按钮、卡片、链接。我们都将尺寸提高，同时还方便移动设备的触摸操作。

#10优化初体验

即便用户的使用记录为空，但是依然要打造热忱的欢迎体验。

优化新用户的使用体验，鼓励用户，让他们变得更自信，学的更多，走的更远。