案例学习:Perch改版全过程
本文是对外文《Case Study: Perch Redesign》的编译内容,全文如下:
文中Rachel和Drew是Perch的两大主管,Paddy是参与本次改版过程的设计师。
设计目标
在针对某事物进行设计时,你可能犯的最大错误之一就是在开始没有很好地定义设计目标。
“让它更美观”还不够,你还要知道你要传达什么信息,及你当前站点有哪些不足之处。
Rachel,请简单介绍一下Perch是一个怎样的网站。这次改版,你们想达到什么目的?
![]() |
Perch是一个内容管理系统,意在使设计者更容易地为自己的网站增加CMS。你可以直接为站点增加CMS,而不用围绕CMS来构建整个网站。与很多类似系统不同,它是自主托管的,用户只需购买Perch,将它安装在自己的服务器上即可,而不是作为服务软件。 三年前,我们发布了Perch。起初,我们以为用户只会将它应用到很少的网站上。但结果显示,用户开始把它用到具有大量内容的大型网站上。它的扩展性可以,但管理UI界面是针对小型网站设计的,大型网站面临着可用性问题。 这是我们希望在Perch2中解决的问题,它要简洁,CMS容易使用,同时不影响用户网站规模的扩大。 所以,网站的改版是解决该问题的一部分。Perch正快速发展,我们想要一个更流畅、更与时俱进的响应式网站,与我们更成熟的产品相匹配。同时也希望网站继续保持以往的趣味与友好性。 |
预备工作&美术指导
前期调研阶段对任何一项设计项目来说都是必要的。有时这个过程会在设计师(或客户)的头脑的进行,有时会借助一些工具(如线框)、情绪版(Mood board) 。

Paddy的初步草图
你如何着手处理这个项目呢?在你脑中有没有特别的想法,或者你有没有探索一些其他不同的可能性?
![]() |
我们在Skype上进行了几次交流,以仔细了解他们进行网站改版的意图。因为Perch已成长了三年时间,Rachel和Drew认为该网站要作一个升级。对于网站中体现品牌的部分需要保持。他们也愿意听取我的新意见,愿意尝试一些改变。 经过最初的交谈后,我开始通过草图绘制出最初的一些想法。我们进行了一些情绪版的练习,以期建立一种让客户与我都会感到兴奋的视觉和体验。在完全投入到设计之前,我们还创建了大量线框。 |

通过“便利贴”搭建起网站的架构
该设计中用到了大量插图,它们是怎么产生的?一开始你就想到要用它们吗?
![]() |
Perch一开始就是一个有趣的品牌,整个网站包含有很多简单地插图。我希望把它提升一个水平,通过首页中引人入胜的体验来吸引用户进入,同时还能继续保持大多人喜爱的Perch小鸟形象。 |
![]() |
最初的设计已经用到了插图,我们的目的是赋予Perch一种友好、非技术的感觉。我们试图让从未用过CMS的用户可以迅速上手,所以避免了一些令人有负担的技术画面。 |
同样的,这个网站以吉祥物——金黄色的小鸟作为特色。之前你们就一直用这个吉祥物吗?它的名字是什么?在网站的整个形象中,它起着怎样的作用?
![]() |
这个小鸟吉祥物很早就存在于Perch上,由Kev Adamson设计。它已经很流行了,所以我们希望继续保持它。 它们还没有名字(很长一段时间内,我们称它们为小鸟1、小鸟2)。它们在打造与众不同的Perch上面起着非常重要的作用。 |
内容&讲故事
为网站创造好的内容是一个棘手的事。一方面,设计者有能力创造漂亮的布局,但常常因为不了解业务而无法自己写出好的内容。
另一方面,客户了解他们自己的业务,但却没有必要的设计技巧而无法协调内容和样式。
Paddy和Rachel是如何解决这个特殊问题呢?
“关于我们”页面包含了大量内容,既有设计又有文本。Paddy也参与到内容的制定工作中吗?你是如何决定该页面的大体布局呢?
![]() |
讲故事是一个策略,我们把它应用到了整个网站上。在各种网站中,像“关于我们”这样的页面时常是后来添加上的,文字只是简单地堆积在上面。我们希望用这些页面来吸引用户,用更有效的方法向他们介绍Perch的体验。 内容来自Rachel和Drew,我们共同对内容进行了排序,同时我还从视觉角度提出了建议。事实上,Rachel和Drew在“关于我们”之类的页面上花费了大量时间,目的只是为了证明他们在他们的产品上花了很多心思。 |

“关于我们”页面
![]() |
Paddy促使我们思考整个网站的内容,尤其是“关于我们”页面。我和Drew作为“作家”编写了大量的文字。但我们不是设计师。Paddy帮助我们删减了网站的冗余内容,对于一些我认为对客户有用的的内容提供了视觉方面的指导。 |
新设计获得了哪些反馈?它满足了你们的目标了吗?
![]() |
来自客户的反馈非常积极,如我们之前期望的那样,该网站很容易被客户识别出。它简洁,没有过多冗余,显示了使用Perch的好处。 在开始改版时,我们还有些小小的担心,已经喜欢Perch的用户会不会认为我们正背离最初的产品,最终该网站在原有基础上有了很大发展——仍保持其有趣的风格,看起来不像一个技术类、吓人的网站。从这个角度来说,它仍遵循着产品自己所开创的路线。 该网站还明确地增添了一种感觉:Perch已“长大成人”。客户给出的如此评论,让我们感觉到我们改版成功了。 我们希望找到一个设计师,他不怕挑战我们,建议我们做出改变,或尝试新鲜事物。 |

最终的页面
![]() |
Rachel和Drew在该项目上投入了绝对的热情。Perch是他们的孩子,但他们不担心在设计上进行某些改变,在网站上尝试新鲜事物,并做出大胆决定。从一开始,我们的目标就是为Perch产品做出一些伟大的、让我们都自豪的事来。 |


