非营利性网站设计: 实例与最佳操作实践

Cameron Chapman

非营利性网站像许多其他网站一样分享一些最佳的操作实践。他们需要的是用户界面友好，易于浏览，使用适当的字体、颜色及其他设计元素。但往往一个非营利网站需要提供的内容比典型的公司网站要多。

一个非营利的网站需要的是用户可以很容易地就找到关于他们的服务范畴、捐款信息，并更多地参与进来。它能方便媒体联络，以便找到他们需要的信息和重要人员的联系方式。所有的这些都是为了能在某种程度上邀请该组织的目标捐助者和志愿者们更多地参与网站的经营。

以下是一些设计非营利网站的最佳实例。

1.让捐助者更方便地使用网站。

捐款对于任何一个非营利组织来说都十分重要。对于捐助者来说，尤其是新的捐助者，您的机构的网站应该是一个非常好的征求捐款的平台。它同时也能使经常性捐助者更方便地增加捐款。在这两种情况下，您希望通过它使人们捐款的过程变得简单而直接。

在创建一个用户界面友好的网站时，有些注意事项。首先，确保捐款者页面链接在主页的显著位置。不管您是用一个特别的条幅广告或者按钮，抑或在站内导航上突出它，都应让捐助者清楚了解在哪里才能完成捐助。

其次，使实际捐赠过程尽可能地便捷。访问者不需要设立一个捐赠账户。捐赠的过程不应该比其他任何网上交易更加复杂。除了必需的信用卡或电子支票的处理信息，不应要求他们提供任何其他资料。尽可能使用单页的捐助申请表，以及一个确认页面。这样的话，使用单页页面能极大地减少浏览器或者连接问题。

2.让媒体更方便地使用起来网站。

引起媒体的关注对非营利组织的影响将会非常巨大。无论是由于媒体的关注而带来更多的直接捐款抑或提升了该组织的形象，吸引到记者、博客主或者其他具有观众群的媒体都是非常重要的。

应当让记者很容易找到该组织的相关资讯，包括董事会、创始人和其他关键人员的信息。确保关键人员的联系方式（电子邮件和电话）包括在内，提供一个可下载的包含所有可打印出的信息的软件包。

在网站提供可下载的图片，而记者和博客主不需要联系您或等待回复便可使用图片。同时应提供可发布新闻的引用，不论是会员的还是董事会的都跟局外人一样，明确记者和其他组织可以发布这些新闻报道而不用与相关组织事先联系获得允许。

3.让志愿者更方便地使用

网站访问者很容易地找到他们如何参与的信息。有很多志愿者可能没有钱来实行捐助但是对该组织从事的事业非常热心。

无论您是直接提供加入志愿活动的详细信息，帮助人们采取行动，或者只是提供志愿者组织者的联系方式，请务必不要忽略这至关重要的一点。

提供多样的联络方式，使志愿者容易取得联系，因此应尽可能提供包括电子邮件地址，电话号码,网络联系表等联络方式。

4. 确保您组织的目标是显而易见的

有多少次你去了一个网站却得不到任何这个网站是关于什么项目的线索？这种情况经常发生，设计师和客户经常想当然地认为网站的访问者已经对他们的组织有了一些了解。

但是请考虑多少信息可以像Twitter 或Facebook那样被分成方便浏览的长度显示在网站内, 没有人知道到底有多少浏览者将会来访问。某些组织根据它的名称就非常容易判断出它是什么样的组织，但是某些就不那么容易了。

把一个简短的使命的陈述放在主页上是其中一个解决方法，另一种方法是把一个显著的链接放在主页的某处，访问者链接到一个页面，找到使用简洁的平实的语言（而不是“营销术语”）来描述该组织的事业的信息。

5. 确保内容占据中心位置

任何网站的设计应当是简明清晰的，特别是对非营利性网站。这并不是说你的网站不能出现有趣的设计，只是设计应围绕着组织活动内容和使命来开展，而不是朝相反的方向，同时把将在网页上提供的信息类型及使用的格式列入考虑范围。

预先考虑哪些多媒体元素将被使用，以及是否会在每一页上或只在专题栏部分使用。如果您计划发布视频和多页的照片，需要确保列宽及其他部分有足够的空间与之匹配。

例如，网站的列宽应足以容纳YouTube视频。否则，任何时候你嵌入一个视频（或类似的元素），您的网站设计会看起来杂乱无章（你的网站内容有可能最终被覆盖）。

6. 确保你的网站与其他宣传材料一致

标志应该使用与其他宣传材料相同的图案和颜色。保持一致的品牌形象将大大增加被认可的机会。网站不需要（也不应该）与印刷宣传资料完全一致，但呼应的外观和感觉会增加品牌的辨识度。

确保内容也是一致的，校对和编辑网站的内容就像在做印刷材料。虽然更容易改变网站上的内容，但错漏百出的网站会给人负面的印象。

7. 预先知道网站的目标

组织的领导人（或该组织网站项目负责人）在项目开始设计之前，应该列出网站的目标。主要是为了让现有的成员了解最新动态？是为了主动征求捐赠？是为了吸收新的志愿者或成员？还是为了提高了公众的认识？

不管你的目的是什么，预先了解并在设计阶段与设计师沟通，将在项目进行过程中省心省力。确保每个人都有相同的愿景，这样你不需要在中途做出不必要的修改，从而节省了时间和金钱。

8.要有公众新闻或博客

有博客或公众新闻对非营利网站非常有优势。首先，它是人们回访网站的理由。如果有提供与组织相关的消息和事件，有兴趣的人会定期回访（或通过订阅RSS）。这样可以使网站浏览率提高，并有可能在未来的日子使他们更多地参与（如果他们已经参加将会保持参与活动）。

其次，博客和公众新闻经常被其他博客和新闻网站引用。这增加了网站曝光率，并可能会为网站带来更多流量。

第三，不断更新的内容，使网站的搜索引擎排名靠前。这使得人们更容易动态地找到与网站相关的信息从而最终搜寻到网站。

20 个优秀的非营利网站的范例

Greenpeace USA  http://www.greenpea ce.org/usa/

The Greenpeace 网站提供了很多正确的范例。为捐助而设的链接及如如何成为一个志愿者都在他们的站内导航占据了专门而显著的位置；他们的媒体中心页面也凸显在网站的首页；网站以幻灯片及录像的形式显示了综合多媒体的内容， 同时也提供了博客和公众新闻部分。

Kiva  http://www.kiva. org/

Kiva网站有一个非常简单而直接的设计。就在页面的顶部，他们准确地解释Kiva所从事的事业，同时他们为浏览者提供了便捷的捐助方式。他们也将该组织的企业家信息放在首页，进而鼓励更多的人加入。同时还提供一个“关于”链接突出显示在标题栏，浏览者可以通过它链接到海量信息，其中包括一个新闻中心。

New York City Coalition Against Hunger  http://www.nyccah. org/

纽约市反饥饿联盟提供了一个优秀的网站。志愿者和捐赠的链接就在主页显示；在站内导航的顶部提供了显著的链接通往“媒体”和“关于”部分。来自NYCCAH Hunger博客的最近更新的内容也显示在主页上。

ASPCA   http://www.aspca. org/

The ASPCA 网站通过首页上与组织相关的图片及小部分的文字描述让该组织从事的活动一目了然。捐赠链接不但在首页的主要内容区域显示出来了，同时在站内导航的顶部也突出显示了。“新闻中心”和“关于”的链接也包含在导航的顶部，通往其他资源的链接也在首页突出显示。

One   http://www.one. org/us/

这是我最喜欢的非盈利性网站之一。一个多媒体幻灯片上突出地显示在主页上，展示特色的内容。更多信息的链接，包括该组织感兴趣的事物、如何参加及如何可以采取行动的链接都在导航的顶部及首页的其他地方凸显出来，该网站还包括一个博客（显示在主页上）。

The Michael J. Fox Foundation for Parkinson’s Research   http://www.michaelj fox.org/

The Michael J. Fox Foundation 网站提供了一个非常好的主页，其中有条理地包含了大量的信息。帕金森患者、基金会、研究项目、以及如何提供帮助的链接都显著地显示在页面中间；捐赠的链接也包括在顶部导航。帕金森综合症及基金会的新闻也突出显示在主页。

Save the Children  http://www.savethec hildren.org/

The Save the Children 网站是一个在小空间中提供大量井然有条的信息及友好的用户界面的优秀范例。捐赠或如何资助一名儿童的链接在导航的顶部和首页的幻灯片的下方都有显示，更多的信息和其他的参与方式也突出的显示。信息通过简明的用户界面友好的方式来体现，大量信息用易于阅读的版块提供给人们。

Oxfam America  http://www.oxfamame rica.org/

美国乐施会

美国乐施会网站在主页上通过颜色凸显出捐赠按钮。网站的其它大部分内容都设计成淡绿色，只有“捐赠”按钮设计成橘色，这样并不刻意地就凸显出了“捐赠”按钮。在主页上突出了新闻和乐施会工作内容的一些信息。

Natural Resources Defense Council   http://www.nrdc. org/

自然资源保护委员会

自然资源保护委员会网站也是通过颜色来区别网站的不同板块。“捐赠”和“马上行动”链接为橘色，“博客”为绿色，其它的包括“关于”和“政策”等链接都是蓝色。多媒体内容及最近的新闻都在主页上突出表现出来。

Amnesty International   http://www.amnesty. org/

大赦国际

大赦国际网站是成功使用颜色的典范，他们在页面顶部使用了亮黄色，配合浅黑和浅灰的主体。在主页上通过幻灯片显示最新的新闻和研究。在侧边栏上突出了“加入”、“捐赠”以及“采取其它行动”的链接，在顶部增加了多媒体信息的链接。主页上在主要内容的下方也提供了一些当前的新闻和资源。

The Nature Conservancy  http://www.nature. org/

大自然保护协会

大自然保护协会主页上的幻灯片是我见过最好的幻灯片之一。幻灯片上，他们突出了他们支持的一些项目和倡议。网站的主页上也包括了一些多媒体内容。在侧边框上通过高亮的黄色凸显出“捐赠”、“成为会员”以及“提供其他帮助”的链接，这样就让人们在整个网站中很容易找到这些内容。

Witness  http://www.witness. org/

见证

见证的网站有点不同，因为现金捐赠不是他们的重点。他们通过自己的网站征求关于世界上不同国家侵犯人权的的视频。在网站的顶部导航链接了“新闻”、“媒体档案”以及“参与方式”（包括培训）等内容。

Product (Red) http://www.joinred. com/Home. aspx

产品（红色）

产品（红色）网站在主页上通过幻灯片的形式展现了支持这个组织的产品。同时在侧边框也提供了其他参与方式，博客和学习资源等的链接。网站是由红、灰和白颜色组成的，所以整体感觉很简单。

Susan G. Komen for the Cure  http://ww5.komen. org/

苏珊科曼乳腺癌基金会

苏珊科曼乳腺癌基金会网站很成功地使用了页面顶部的空间来突出重点的链接，包括最近确诊为乳腺癌的妇女应该怎样做、如何做出改变、以及分享自己的乳腺癌故事等。捐赠链接使用亮粉色放在顶部，其余部分都是灰色的。这是另外一个在主页通过幻灯片的形式展现重点的网站。

Take The Walk http://www.takethew alk.net/

步行

步行网站使用了大胆的图形设计并在主页通过幻灯片迅速抓住访客的注意力。主页上主要通过图形显示了已经走完多少英里，要到目的地还需要走多少英里。这个图形的下方是不同的捐赠方法以及捐赠的用途。

Change.org  http://www.change. org/

Change.org

Change.org 是一个不同类型的非营利性质网站。他们的目标是提高人们基于不同原因采取行动的意识。正因为如此，他们的网站主要凸显出“原因”是什么。这些原因在主页的主要内容和网站的顶部导航都突出显示出来。另外一个突出的重点是提供帮助人们从自己本身的原因开始采取行动的工具。

charity: water  http://charitywater .org/

上善若水

上善若水的网站采用了简单而大胆的设计并产生了巨大的冲击效果。捐赠按钮是红色的，网站其他部分都采用了黑色或者深灰色。三张链接到不同资源的图片构成了主页的主要内容，这样在简洁与自然中形成了很大的冲击效果。链接包括多媒体、参与方式等其他资源也很容易在顶部导航找到。

The Breadline Africa Worldwide Blogger Bake Off  http://www.bloggerb akeoff.com/

The Breadline Africa Worldwide Blogger Bake Off网站是我见过的更为符合Web 2.0设计模式的网站中的一个。在主页上很容易找到项目的信息，包括事件各方面的简要介绍。网站凸显了参与网站、捐赠及一些其他资源的链接，另外网站设计了计数器统计截止目前的捐款数额。

Blog Action Day http://www.blogacti onday.org/

博客行动日

博客行动日网站每年都会根据博客关注事物的不同来进行变化（博客也会伴随事件的开始和结束不断更新）。目前，网站的主题是回顾关注贫困的2008年博客行动日。主页的重点是统计（包括就某件事情来说每天所有博客的关注百分比），同时也有链接介绍博客行动日究竟是一个做什么事情的组织。主页上也包括更新组织下一关注事物、新闻信息以捐赠信息的地方。

Ducks Unlimited  http://www.ducks. org/

野鸭基金会

野鸭基金会网站更多关注的是提供有用和相关的内容。侧边栏上有很多链接，包括：怎样参与、相册、通讯、常见问题以及其他相关信息等。一个“参与”按钮在顶部凸显出来，但是并不有损网站的整体设计。顶部的导航是更多的是该组织提供的资源的链接。

更多资源

How Do I Create a Web Site for My Organization?

(Some) Best Practices for Nonprofit Web Site Design

关于作者

卡梅伦·查普曼是一个有六年经验的专业的网页和平面设计师。她写了很多博客，她自己的博客地址是 Cameron Chapman On Writing.。