四 20 2012

五步打造优秀网站：吸引目标受众 做关键功能

  优秀网站要素 在过去几年中，我已经帮助2,000多个小商家、创业公司以及企业家规划和建设他们的网站。 我发现，大多数人真的不知道该如何正确规划自己的网站。毕竟，网站是人们首先会看到的东西。打造一家优秀网站的正确途径乃是采取逆向工作策略，具体是通过回答以下5个问题： 1.你将如何吸引人们来浏览你的网站? 更具体地说，你将运用怎样的营销技巧来吸引目标受众?搜索引擎优化?每次点击付费的广告?社交媒体?公关?这一步非常重要，因为它往往能为后面谈到的很多问题提供答案。提示：计算一下哪种营销技巧对网站的作用最好，具体是指搞清楚哪种方法拥有最低的客户获得成本(即为获得一名客户而付出的花费)。 2.谁会来访问你的网站? 你的网站需要手把手地引领各种各样的访问者，帮助他们找到自己正在寻觅的东西。在进入网站的数秒之内，访问者需要知道下一步该做什么。他们需要注册吗?他们是否应该点击链接来了解更多信息?一旦你确定哪些人会来访问，你就能确定他们在进入网站后需要做些什么。提示：不要试图取悦所有人，但网站要向直接访问者清晰地指示出他们需要前往的地方。如果你做得太多，那网站会变得过于繁忙，而且很难进行控制，应该把重点放在那些能够让大多数访问者受益的关键功能上。 3.你的访问者会提出什么样的问题? 我找到正确的地方了吗?你们做这行有多久了?我能负担得起吗?我怎么知道你们的产品或服务是优秀的呢?我怎样才能了解到更多关于你们服务和公司的信息?我如何跟你们联系?提示：试着在访问者提出这些问题前给出答案。举例来说，如果访问者的目的是购买一种你们公司驰誉业界的特定产品，那就把产品放在网站的显眼位置，这样访问者就知道自己来对了地方，并能够迅速查看到产品的详细信息。清晰而简短的信息效果最好。 4.你希望网站的访问者做些什么? 他们应该拿起电话给你致电吗?还是发电子邮件?注册点什么?在线购买你的产品?优秀的网站会引导访问者前往你希望他们去的地方。如果你是在网站上销售产品，那就努力说服访问者下单，并让这个过程变得简便。如果你提供的是一项服务，那就让访问者了解到他们怎样以及为什么能从这项服务中受益。提示：保持简洁明了，不要让访问者自己动脑子。 5.访问者喜欢以什么方式保持联系? 请记住，绝大多数的网站访问者并不会成为你的客户。事实上，互联网上的平均客户转化率大约只有1%，意味着每100名访问者中最终只有1个人会联系你、注册服务或购买产品。你需要找到访问者最喜欢的交流方式，让他们有渠道跟你保持联系：电子邮件、博客、Twitter、Facebook、LinkedIn、Google+、RSS订阅等等。提示：跟客户保持联系是很重要的，因为大多数人并不会在第一次访问网站时就成功转化。通过定位目标受众，设法适应他们所聚集的市场，以此让访问者成为回头客。如果他们是初级专业人士，且一直使用社交媒体，那你也需要在社交媒体上有所活动，并积极地向他们提供回访网站的理由。通过跟访问者进行互动，你就向他们提供了回访以及转化的激励，并且很有可能将他们周围的人也吸引过来。

By 姜勇 • 网站 • 0

四 20 2012

Web开发与设计语言大盘点

在这个 Web 的时代，与 Web 相关的开发技术持续热门，从前端到后端，从标记语言到开发语言，各种技术交相辉映，沉沉浮浮，作为开发者，尤其是初级开发者，如何选择几门适合自己的开发 语言尤为重要。本文是对所有 Web 相关开发语言的一次盘点，并指出其中最有前途的开发与设计语言。 无穷尽的选择   在 Web 开发与设计领域，我们有太多的选择，HTML 还是 XHTML, RSS 还是 Atom, PHP 还是 ASP.NET, SVG 还是 VML, JavaScript 还是 VBS？这样的对决还可以列出很多，然而，它们往往没有固定答案，取决于个人嗜好，在你对各种语言和技术彻底了解之前，你自己也未必有任何清晰的想法。 如何选择 　　答案是，取决于具体情况。不仅要看站点的类型，还要看你希望涉足的技术深度。本文会将 Web 相关的各种开发与设计语言，按不同的类别进行展示，并注明其复杂程度，流程程度以及浏览器支持程度。值得庆幸的是，任何一门 Web 语言都有很好的文档可以参考。 Web 开发与设计语言的层级   Web 语言按层级分，传统上是这样分的，标记层（HTML），修饰层（CSS），客户端脚本层（JavaScript），服务器端（PHP，ASP.NET）。如果按功用分，参看上图，我们可以将它们分为15层，每个层级代表一种功用，比如用户交互，矢量图等等等。当然，并不是所有用户都需要全部掌握这些不同层级的语言。 标记语言   最常用的 Web 标记语言有四种。 　　HTML XHTML XML WML(Deprecated) Others: MHTML and SGMLWeb聚合语言 　　There are two commonly [...]

By 姜勇 • 网站 • 0

四 20 2012

优秀Web设计10项原则：创新实用富有美感

他能够为我们使用家用电器的方式掀起一场革命，现在我们仍然把它作为现代世界的设计灵感，最好例子就是Apple。Apple的许多畅销产品的核心功能都采用了Dieter Rams的设计原则。 Dieter Rams最著名的设计思想是优秀设计的10项原则，这些原则通常用来做出好的设计或对其进行归类。这些原则包含了在创建项目的时候设计师需要考虑到的问题，但是这些原则最适用于工业设计，因为Dieter Rams正是在这个领域做出了非同寻常的作品，并得出了这些灵感。 这些原则并不是古板的戒律，并不是不能变通的，这些只是准则，帮助定位一个优秀的设计是什么样的。 70年代中期，Rams开始举办有关设计的讲座，并提出了六项原则，多年来他不断的改进，在80年代中期把这些原则“升级到”10项，现在仍然被人们推崇。 因此，为什么不能把这10项原则运用到像素世界中去呢？为什么不能把他们运用到Web设计中去，同时讨论一下什么事优秀的Web设计呢？ 我通过自己在Web设计领域中8年的工作经验和工业设计领域的背景学历，我虚心地把这10项原则运用到Web设计中，并根据自己的顿悟使其更好的适用于Web设计。 1.优秀的设计应该是创新的 第一项原则同样也是Web设计的基础—创新。设计者必须注意的是，在构思优秀的Web设计，创新能够起到非常重要的作用。以下是两个基本点： 1.在UI和图片设计方面，应该用创新的心态和批判性的思维对待每一个项目，并试图开阔自己的思维，发掘其它的分支。把创造力作为创新工具，来脱颖而出。 2.多和身边的新人保持交流，不管是图片生成工具还是新的编程语言，多接触这些内容 管理创新是一项艰巨的任务，因为它总是不断的变化发展，但是要一直保持开阔的思维，尝试新的方式进行创造，只有像这样你才能够有多种途径做出优秀的Web设计。 2.优秀的设计让产品更加实用 何谓实用性网站，如何使网站具有可用性？ 这一点描述起来有点棘手，因为在不同的人看来网站的可用性是不同，但是我想强调实用性网站的三个方面。 1.有助于访客浏览网站：尽可能使访客毫不费力就找到他们想找的内容，用户界面的细节和信息的显示都能够使网站变得实用。 2.实用的内容：网站的内容是网站最有用的部分，如果不重视网站的内容，你就轻而易举地丢掉了提升网站实用性的一大法宝。 3.实用性网站的最后一点是你怎样编码你的网站，因为你需要考虑到网站优化和性能方面，以使网站实用。 3.优秀的设计富有美感 对于一个网站来讲，美感是可视细节和实用性之间的平衡关系。一个富有美感的网站，不仅给用户提供非同寻常的体验，而且呈现出相关的内容。 单纯从面向设计的视角来看，有三点能够帮助设计者做出优秀且富有美感的Web设计。 1.颜色：谨慎对待色彩方案—它们给所有页面带来馨香。你可以尝试使用不用的组合，但是需要考虑到每种颜色的含义。如果你准备给不同的设备提供不同的体验，显示器上显示出的颜色不会比纸质的或某个物件上的颜色更好控制。 2.网格、空间：在组织网站的基本结构时，你需要决定用户如何看到网站的内容—按照次序或网格，对待空白部分要尤其小心。信息的不同尺寸/对称性/次序决定人们如何解释这些内容。 3.版式：显示文本的方式和字体的选择比一般人想象的更重要，能够阅读并且强调不同的内容取决于你为网站选择的版式。 4.优秀的设计使产品更简单易懂 为了确保网站易懂，你需要清醒地意识到目的，网站为了某些目标而进行设计。你需要保证网站的易用性，对于用户来说，怎样毫不费力地达到了他们的目的。 举个列子，如果你有一家网店，目的就是为了销售，因此，你的设计要尽可能简洁，小心改进浏览商品的体验和访客退出的方式。网站最好是一目了然的。 5.优秀的设计是谦虚的 谦虚的网站必须要注意两大点： 1.单纯从面向设计的观点看，Mies van der Rohe有这么一则非常妙的格言：“少即是多。”的确，设计师很容易在装饰和图片细节中迷失，切记不要这样！保持内容生动易懂—访客必须尽可能理解内容传递的信息，然后理解图片的细节，尽可能营造一种浏览网页的体验，而不是让访客感觉眼花缭乱。设计应该是中性的。 2.另一方面是辅助功能，在设计网站的时候，你必须清楚网站辅助功能的基本规则。   伦敦的设计顾问Bibliothèque 和生产商Vits 最近做了一张7色A0海报来庆祝Rams的10条关于优秀设计的原则。 6.优秀的设计是诚实的 何谓诚实的网站？对于一个网站来说，所谓的诚实就是要对访客保持开放的态度，总是给他们提供几个选项以供选择，不要过分地强调你的设计的重要性。 举个例子：尽可能地阐述清楚某个选项或者按钮的目的，或者使用错误提示信息来指示错误的内容。 一个诚实的网站往往会提供工具来帮助用户达到他们的目的，一系列的选择、可视的链接和其它一些暗示会给用户满足他们所有可能的需要。 7.优秀的设计经得起岁月的考验 对于网站是否经得起岁月的考验这个问题是存在争议的，但是这项原则可以毫不费力的应用到设计方面的趋势中去。换言之，web设计中总存在着最新趋势。不要只跟随潮流，而不考虑你的设计中的根本性的改变。 网站的内容必须时刻保持最新，但是主要结构应该是可持续发展的，因此使用迭代设计来增强视觉体验，使用技术来 在Web设计中，“可持续”跟现实中的“可持续”有些出入。最重要的是能够使用户喜欢你的设计，你也必须一直适应自己的工作，否则，这两方面会导致要重新设计，在我们这个时代，每两年就会出现一次这种情况。 8.优秀的设计考虑周到并且重视每一个细节 这项原则，顾名思义，把你所有的精力都投入到设计中去，就像它是你生命中最重要的一部分。试图从不同的角度来探寻自己的想法，并且小心设计浏览网站的体验。 9.优秀的设计重视环境 这一点做起来有些难度，我只指出优化的方法。在你设计网站的时候，不要大幅度地减少碳足迹，尽可能保留雨林。但是你要记住几点： 1.缩减页面的规模。 2.使用经过Web优化的图片 3.使用尽可能好的办法优化代码，使你的游览器使用更少的损耗正确显示你的网站。 [...]

By 姜勇 • 网站 • 0

四 20 2012

面向未来Web设计：内容与外层分离 渐进增强

  现在终端设备种类繁多对WEB设计提出更多要求 是时候考虑针对未来，设计出体验友好的Web了。现在终端设备种类繁多，如台式机、笔记本、上网本、平板电脑、多功能手机、智能手机等等，而这仅仅是一个开始。技术更新换代的速度在加快，我们的工作流程、标准及基础设施正在触及它们所能承受的极限。这个相互联通的时代不断创造着新的挑战，同时也酝酿着巨大的机会。 谁也无法预知，在未来将会发生什么。如果有人说可以创造出永不过时的事物，这又将是多么愚蠢的事啊。虽然我们无法提前预知应对这种多样化发展的解决方案，但作为Web的创造者，我们可以做一些准备来更好地应对未来。 首先，我们必须承认和拥抱未来的这种不可预知性，从而以友好地态度面对未来。我们不应该存在侥幸的假设：这种混乱只是暂时的，一段时间之后，一切将回归正常。伴随着每天越来越多连接设备的出现，我们正进入一个多样化长存且持续变化的时代。这些事实要求我们重新思考我们所创造的内容、产品与用户交互的环境及我们所提供服务。 推出与用户密切相关的服务 人们闲扯的精力正在快速减少。据研究报告显示平均每个美国人一天可消费掉34GB有价值的内容，所以出于需要，每个人正寻找各种方法减少噪音的干扰。自动转帐服务减少了实体邮箱中过往的垃圾。通过DVR、Netflix Instant、Ad Block Plus和BitTorrent，用户不必再受节目空档时间及广告的干扰，还可以自由选择内容。像Instapaper、Readability、Safari Reader和Flipboard之类的工具可以帮助用户远离纷杂的社交工具、Blogroll、广告及讨厌的Overlay。 移动也是该相关性的巨大推动力。大部分美国人睡觉前最后接触的是手机，而他们醒来后做的第一件事同样是拿起手机。我们与移动设备有着密切的关系，所以我们希望它们可以成为我们自身的延展。我们希望它们仅发布我们需要的内容与功用。单单没有足够的时间、宽带、屏幕面积等，我们仍受到很多外在困扰。 作为Web设计者，我们应该拥抱这些发展趋势，尊重用户的时间，去创造有价值地体验。 专注于用户最关心的事 设备将会越来越多样化，而用户关注范围也将逐渐缩小，对此，我们应当如何应对呢？要想更好地适应未来，可能我们需要做的最重要的事便是“专注”。我们必须精准地找到对用户和客户来说最重要的事。 在过去几年里，我们只是一味地增添内容和功能，而忽视了对网站结构的梳理。最终导致网站和服务变得十分臃肿、笨重，而无法适应当前快速发展的需要。页面超慢的加载速度、凌乱而繁琐的导航条、杂乱的工具栏，还有一些不太完善的功能，让用户备受煎熬。 要想解决这些问题，我们必须对所提供的服务内容进行深入分析，并建立强大的内容策略以保证我们所提供的内容对用户和客户来说有切实地意义。产品新增的每个功能、每行代码及所包含的角本，都应该目的明确，且与网站的内容架构息息相关。我们必须果断地去除糟粕，提供强大的、以用户为中心的体验。 前福特和克莱斯勒CEO Lee Iacocca每当要决定汽车的某项性能、附属产品或计划是该继续还是该放弃时，他都会问“它可以发挥怎样的作用？”。当我们考虑添加某项内容和功能时，我们也应该学着向Iacocca先生那样追问“它可以发挥怎样的作用？”，以测试我们的产品与服务。这样真得可以增强用户体验吗？通过怎样的方式可以使我们的商业更好？ 甩掉一些无用负载，从中解放出来开发更具核心地位、用户确实需要的功能，从而让我们的产品在竞争中脱颖而出。从用户的愿景出发，提供更简洁、更快速、更流畅的使用体验。 “用户的耐性是有限的，更何况面对小屏幕的移动设备。除非你专注于设计，否则用户可能还没来得及了解你的产品，就已经放弃了它。”—Marcos Lara 如果我们想更敏捷地跟上各种变化发展的步伐，我们就要甩掉一些包袱。专注于我们的用户体验，让它变得更简单。 设计出如“水”般的产品 无论你准备好与否，用户已经开始在多设备上与我们的产品交互了。而很多情况下，这些设备，在我们设计这些产品时，还没有出现。而这也促使了移动交互设计专家Josh Clark表示，我们应该把我们的产品想象成水，它可以倒入多种不同的容器中。 不要试图覆盖所有平台 很多情况下，企业只会单纯地应对摆在面前的问题，比如新的设备、浏览器、本地平台、社交媒体渠道等等。这样我们就会像流水线上的工人一样，忙乱地迁移到不断增长的各种渠道上。我们不应追赶蜂拥而至的各种平台，更应意识到我们的产品内容需要拓展到更多领域，并在内容的基础架构上做投资。而这是对未来的一种投资。 内容与表示层分离 实现平台无缝迁移 要创造更具响应性的内容，就需要舍弃以前所见即所得、Web页文字编排工具，换用更加模块化、跨平台、富含元数据的系统。更好的内容管理工具、更强大的API能产生更便携的数据内容，不依赖某种特定技术，更容易适应未来的发展。 “内容的可移植性，保证了其移植到所有平台上可以存活并繁荣发展。”——Daniel Jacobson NPR的COPE（Create Once Publish Everywhere）系统已经成为下一代内容管理系统的典范。它可以将内容与表示层分离开来，从而使内容可以在Web页、本地应用及各种环境中展示。开发者仍可使用标记语言来编写内容，但最终会被CMS转换成一种跨平台的语言进行保存。该系统避免了存储标记语言、表示层样式，并将内容加以模块化，这样内容更轻便，并能以最好的样式去适应某一特殊环境。更重要的是，NPR不必一一在出现的平台上对他们的系统进行全方位的测试。 提供更简洁、更灵活的数据，可以使我们的产品及服务在未来有一个更好的生存机会。 渐进增强——新的方法论 “如水般的内容”正影响着Web用户体验的设计及建设。人们正使用着不同种类的设备，而种类也将越来越多，这也注定了产品在各设备上的性能、元素样式及解决方案无法达成统一、标准化。 根据摩尔定侓，随着时间的迁移，器件会越来越快、越来越强大，其成本也将大大降低。用户也将获得低成本，性能“足够好”的Web终端设备。 “技术专业人士都知道摩尔定侓，但通常会忘记一个重要方面：在性能增长的同时，其成本也会降低。” ——Scott Jenson 终端设备领域的门槛很低（免费的操作系统、廉价的硬件），将导致大量廉价的互联设备涌入市场。正如iPad 5肯定比iPad 2具有更好的性能，我们需要考虑提供不同性能的产品：优秀的、粗糙的，及介于两者之间的性能状态。因为这些屏幕背后的是希望获得交互、探索、学习、享受的人。 为了满足这种多样化，我们需要将渐进增强的能力提高一个等级。除了探索新特性，我们还需再进一步，产品要能基于设备屏幕的大小、宽带、JavaScript支持情况及设备性能的情况进行自我适应、渐进增强。放弃某些安逸的假设，以移动优先为设计思想，构建一种核心体验，我们便能构建一个稳定的基础去支持更多的平台。在很多情况下，最核心的体验获得了较好的效果，渐进增强将帮我们把产品推给更多的用户。 结构化的内容可适应未来多平台环境 一切将从标记语言开始。即便是最讨厌的浏览器也能识别标记语言。HTML5为增强用户体验敞开了大门。面对众多的移动设备不断发生的变化，我们意识到根本的、简洁的、强大的标记语言是跨众多平台开发最好的利器。 “移动设备市场正不断发生着变化。性能也在持续改变。可能只有结构化的内容可以移值到未来的平台上。”——Stephen Hay 具有灵活性的样式，可适应多屏幕 现在我们已经意识到，Web页的宽并非只能限定在960px大小，我们正逐渐回归Web所具有的流动特性。多亏有响应式Web设计，它提供了具体的技术去适应各种尺寸大小的屏幕，同时保证设计布局和表现样式保持在同等水平。可能更重要的是，响应式设计提供了我们急需的开发语言，依靠它，我们在讨论设计方案时不必再单独考虑屏幕的大小及硬件环境。 [...]

By 姜勇 • 网站 • 0

四 20 2012

设计元素最少的网站Quora怎样谈产品设计？

Quora第一名员工、产品设计师日前在Web2.0大会上介绍了Quora的产品设计，并将其演讲内容发布在Quora上（quora.com/Rebekah-Cox/Design-Quora-Web2-0-Expo-Presentation），以下为详细内容：   我是丽贝卡·考克斯（Rebekah Cox）。我是Quora的第一名员工，是目前Quora的四个产品设计师中的一个。Quora是一个让你交流专业知识的地方，它覆盖了很多你感兴趣的主题。 设计很重要 现在是成为设计师的好时机，特别是在硅谷，人们非常支持设计，对设计也很感兴趣。因为作为一个明显的竞争优势，设计已经为自己赢得了一席之地。   Quora爱设计 在Quora，我们对设计充满热情。我们从一开始就非常重视设计。Quora的文化鼓励优秀的设计并培养优秀的设计师，这对我们来说非常重要。 然而，Quora似乎是互联网上设计最少的网站之一。它使用黑色、红色和大量文字。创建了设计元素如此之少的产品，我们怎么还能声称自己关心设计呢？   设计是什么? 要明白，人们对设计这个词的定义常常是非常直觉化的。有些人认为设计在于审美，有些人认为它意味着互动，有些人则认为它是指logo标志。 在Quora ，设计是指什么？ 理解如何对于不同的人来说设计可以有很多不同的含义，意味着我最开始在Quora工作时，最重要的任务与Python或CSS或JavaScript没有半点关系；这个任务就是确立一个简单的定义：在Quora设计意味着什么？ 设计就是关于产品的一套决定 我们对设计的定义是：设计就是关于产品的一套决定。它不是一个界面或一种审美观，它不是一个品牌或一种颜色。设计是真正决定。 好处 这个定义包含了很多内容，它在很多方面塑造了我们的方法。用这种方法思考带来了很大的好处： 明确了产品及其界面之间的关系 首先，它明确了产品及其界面之间的关系。你的产品的最终样子不是突然出现的大结局，而是你做的所有小决定的总和。 一个下拉组合框的位置，表达了它存在的原因 所以要重视这些小决定……它不只涉及下拉组合框的位置，也涉及它为什么要存在的原因。一个人如何使用你的产品去完成一项任务，其驱动力是这个人为什么必须采取某一步行动。 把注意力集中到最重要的地方：用途和目标 其次，这个定义让我们把注意力集中到最重要的地方：一个具体产品的用途和目标。你以做的事情有很多。但设计应该是搞清楚你应该做什么的过程。 真正酷的事情：创作出有用的东西 你可以做出世界上样子最酷的产品，但是如果它对人们没有用处和吸引力，那它就没有意义。你需要关注你的目标，在目标上花最多的时间，并总是提供价值。     责权平衡的公司中的角色 最后，这个定义是让设计人员在责权平衡的公司里充当一个角色的载体。它提倡了积极的、早期的设计参与。 设计师不是粉刷匠 设计师应该有机会做更多的事，而不只是粉刷成品。我们应该尽量集中精力分析问题的来源，并有威信来确保采取最佳的解决方案，不管解决方案以何种形式出现。 伟大的设计 这样做的理由很简单：伟大的设计就是你不会要求产品使用者来做的事情，你不会要求别人来做的所有决定，因为你已经花了无数小时来确定最佳决定。 选择问题很重要 这是我们的挑战。作为设计师，我们的工作是让世界变得更美好，既通过创建好的工具，也通过理解问题。我们决定要解决哪些问题，跟我们解决它们的方式一样重要。 你对设计的想法会影响细节 设计本身可以是很多东西，它也可以采取很多种形式。有时我们的产品会变得“过分装饰”，设计也可能同样如此。但你对设计的想法影响到每一个微小的细节，而这些细节最终将构成你的产品。 设计就是关于产品的一套决定 在Quora我们就是这样定义设计的：设计是关于一个产品的一套决定。这些决定构成了一个产品，因为它们最为重要——这些决定推动一切向前进。 Quora设计师推动产品前进 因此在Quora，设计师们正在推动产品前进。他们直接与工程师合作，解决极为困难的问题，并把来自不同背景的人们聚集在一起，让他们与世界公开分享他们的知识。 谢谢大家给我时间来分享Quora设计的定义。如果你有任何疑问，你可以在Quora上找到我。谢谢。

By 姜勇 • 网站 • 0

四 20 2012

女性购物网站蘑菇街App获最佳UI设计

在刚刚落幕的中国互联网创新年会上，女性购物网站蘑菇街在众多App应用评比中，获得了最佳UI设计和用户体验大奖。这个奖项是网友在移动社交、生活类、移动通讯、手机游戏等十二个领域公开投票产生的最受欢迎的前三名应用。 蘑菇街移动业务负责人高琦介绍，女性的喜好在设计环节中被特别重视。女性是视觉动物， 因此App的色彩搭配显得尤其重要，采用柔和的粉色与绿色，能够让女性用户在浏览过程中心情愉悦。同时，用户会发现蘑菇街App经常会发生一些细节和气氛的变化，但不用更新App版本。高琦称“我们的工程师开玩笑说蘑菇街的App是属变形金刚的，还真的是，在不同的节日可以呈现不同的界面，而且几乎所有的界面图片都可以在服务器更新，这样不用更新App就能让女生感到新鲜和温暖，这很重要。”   “蘑菇街的UI设计师和工程师全部是男生，可是正因为男生，才创造了给女生的惊喜。”高琦透露。 与此同时，蘑菇街在此次评选中从500多家创业公司里脱颖而出，拿到了最佳创业公司奖项。 蘑菇街是目前最火的女性购物网站之一，以“社区化电子商务 ”为主要特征。蘑菇街App让女性用户在上面挑衣服、晒搭配、交流扮靓秘笈，分享购物心得，给女性用户提供随时随地逛街的平台。蘑菇街iOS版App自去年上线，曾在苹果AppStore社交类应用排第四名。目前Android版本发展也很迅猛，iPad版也即将发布。

By 姜勇 • 网站 • 0

四 20 2012

B2B网站首页设计：营造第一印象 少用Flash

1 首页整体风格要符合用户习惯 B2B行业网站首页整体风格很重要，用户的访问，很大一部分是从这些页面开始的，即使用户从搜索引擎搜索内页到网站，如果用户对这个网站感兴趣，想收藏和进一步了解这个网站，大部分访问者都会访问网站的首页。设计师要让用户的第一感觉就觉得这个网站与他经常访问的优秀网站差不多，当然也要有自己的特点，但是不能差异太大，要遵守用户习惯，这个在前面章节进行过详细的介绍。设计师要去参考各个行业最好的B2B行业门户网站，挑选20家左右。不必要从设计风格上追求多大的标新立异，越是新的东西，风险越大，也许一部分人很认可，另外一部分人可能就不认可，如果我们水平不够好，求稳还是最好的。作为首页，更多表现设计水平的工作还是放在对内容的排版布局上比较好，毕竟用户来网站还是想找到更多有价值的内容。 2 首页用色分析及举例说明 B2B行业门户网站首页不适合用一种颜色做渐变，再配合黑色的文字。虽然不花哨，但是也显得太单调了，这样的用色方法可以作为企业商铺、个人空间、专题页面设计时的用色方案。首页用色一般都是选择一种颜色作为主色，再选择1种对比色，结合万能搭配色：灰色和黑色来设计更好。比如阿里巴巴首页就只用了3种颜色：主色调橙色、蓝色，和万能搭配色：黑色。   图（78） 阿里巴巴首页截图（截图日期：2011-10-5） 从图片上可以看出，阿里巴巴使用了蓝色、橙色、黑色三种颜色。一般来讲，无论我们使用什么颜色来做网页，黑色是必须要用到的，以及和黑色同色系的灰色来搭配，基本成了所有商业门户网站首页设计的标准。 3 首页标题栏设计及排版 B2B行业网站首页标题栏一般不要用太多种，一般做3-5种不同类型的标题栏即可，太多了就会显得太乱，根据实际情况，可以做一些细节上的改变。而且标题栏背景图片不能太突出，可以突出标题栏上的文字，用户只要看文字就知道这个模块里体现的是那个方面的内容，是否是自己需要的，这样的设计方法是现在商业门户网站设计时最常用的。一般是从上到下统一标题栏的，比如首页为左中右框架，那么左边的标题栏都是一样的，如果中间变换结构，标题栏的样式可以发生变化。正如我在《B2B行业门户网站设计开发实战研究报告》第三章第7节讲过的，同类型的内容也可以统一标题栏，这样让用户看起来更加和谐统一。也可以不统一，但是注意不能太乱，不能太花哨。 4 首页整体框架结构及页面宽度设计 B2B行业网站首页常用通栏、左右、左中右3种框架结构，使用左右或左中右框架的时候，上下宽度一般要保持一致，看起来才不会显的太乱，左右标题栏要对齐，由于多种原因使设计对不齐的时候，要和网站策划者沟通，加点或减少点内容，使标题栏左右对齐。首页的框架看起来尽量和谐、统一、规范，使整个网站看起来更严肃、高端一些。框架的宽度目前还是以990PX左右为主，800PX的宽度已经完全不考虑了，目前电脑宽屏越来越多。从2008年以后新出来的电脑，屏幕绝大部分都比1000PX要宽，所以以后可能会采取更宽的页面，不过目前绝大部分的主流门户还是使用990PX左右的宽度。程序也可以判断用户的屏幕，如果用户使用的是宽屏，可以左右加2个对联广告。 5 首页各种广告排版及设计 B2B行业网站首页是广告最多的一个页面，就象杂志一样，大家都想做前彩页和封面。所以首页广告的排版就显的尤其重要，广告排版不好，显得杂乱无章。这个部分的内容，我在《B2B行业门户网站策划实战研究报告》第七章第7节：“网站厂商广告策划要点也做了详细说明”。如果广告放的太少，用户体验虽然很好，但是销售人员又没有广告位卖，影响网站的收益。所以网站既需要有许多广告位，又要保证用户的体验，设计师就要遵守一些广告排版设计的标准。 A 广告的高度不要太高：一般首页的广告，绝大部分的广告高度尽量在60PX及以下，本人认为50PX是最好的，为未来考虑。当广告比较少的时候，可以用更长的广告来吸引眼球，如果开始的时候高度太高了，广告就放不了太多，会影响销售额。少数几个广告的高度可以更高一些，但是不要超过75PX为最佳。一级栏目的大广告可以更高一些，因为广告更少，更不值钱，但是不要超过90PX为最好。 B 尽量少采用Flash设计：由于一些B2B行业网站首页广告比较多，如果都采用Flash来设计，会使首页打开非常慢，因为Flash很占资源。对于一些宽度比较长的广告，可以使用Flash来设计，但是首页广告中Flash广告尽量在10个左右，更多的小广告，使用GIF动画来设计更好，也可以放一个图片。 C 广告排版要整齐统一：由于首页广告可能比较多，所以要考虑好用户体验，最好是把内容和广告分开排，比如一排广告，一排内容。或者一排内容，两排广告。这样用户不至于在广告里找内容，看起来也更加和谐统一，用户想看广告的时候，自己再去找。而且广告与内容间隔开来放，还会让广告更有效果。   图（79） 中国建材网首页广告排版 从图上可以看出，广告放在上下两个内容中间，放的两排，高度60PX，长度235PX，一排正好可以放4个，广告既能放的比较多，也还能有效果，用户在看上下两个部分的内容时，都可能看到客户的广告，为客户广告带来更好的效果。B2B行业网站的首页设计就讲这么多，标题栏、导航条、搜索框、按钮、内容链接等具体元素的设计方法在前面都讲的很清楚了，是可以通用的，在此不再赘述。大家一定要明白，设计好B2B行业网站首页非常重要，一级栏目及整个网站的大部分设计都要参考首页，与首页保持统一。设计师在真正的设计过程中至少要参考20个以上相似行业做的最好的网站，绝对不能闭门造车。

By 姜勇 • 网站 • 0

四 20 2012

改善网站效益需解决17个问题

据国外媒体报道，你的网站就是你的“门面”。如果你有一个实体店面，你肯定会花心思考虑怎么摆放它的橱窗。你也应该花同样多的心思在虚拟店面上。网站需要吸引客户，并让他们成为回头客。 打开你的网站，假装自己是一个新的潜在客户，问自己以下这些问题。最好是找一些之前从来没有见过你的网站的人，请他们来回答这些问题： 1.你的目光首先看向了哪里？ 网站访问者的注意力通常只会持续几秒钟。这意味着你的网站必须在这几秒钟时间内“钩”住他们。请确保他们看到/注意到的第一个东西有趣到足以为你赢得更多时间。 2.你马上就能发现这个网站是做什么的吗？ 你必须在有限的时间内传达你的讯息。如果网站上有太多让人分心的东西，访问者可能不知道你是在卖什么。 3.重要的信息放在“头版”了吗？ 大多数访问者都希望不用太费力气就能了解到细节。如果他们需要向下拖动滚动条才能找到重点，很可能就会提早离开你的网站。请确保清楚明示你的独特销售主张（Unique Selling Proposition）。独特销售主张是指一条信息，以一个句子或几个词的形式，说明为什么人们应该从你这里买东西。请在你网站上突出显示这一信息。（注：above the fold ，“头版”或“一屏”， 是网页的一部分，在页面载入时可以在浏览器窗口中最先见到它，不需要向下拖动滚动条。） 4.你能很容易地发现这个产品/服务的好处是什么吗？ 访问者希望尽可能多地了解你的产品或服务的好处。网站的功能很重要，但访问者可以带走的最重要的东西是一种感觉——他们感觉这种产品或服务将对他们的生活产生影响，让他们的生活变得更美好。 5.网站上有明确的行动召唤元素吗？ 如果客户喜欢你的产品和服务，让他们快速行动起来就很重要了。网站上应该有一个突出的、清晰的行动召唤元素。它可以是“立即购买”，可以是“参加免费试用”，也可以是“查看更多”。确保你没有使用过多的行动召唤元素让客户不知所措。选择一个或两个最重要的，把它们放在容易看到的地方。 6.颜色和图像美观吗？ 如果你的网站看上去密密麻麻，不够悦目，你就会失去访问者。花一点时间来协调色彩，配上能够给你想传达的讯息增色的高质量图片。 7.字体易于阅读吗？ 确保你的字体容易阅读，不会让人分心。不要太过花哨；坚持用一个简洁的、无衬线的，颜色与背景形成对比的字体。 8.页面上是否有大段文字？ 访问者可能会跳过大段大段的文字。请尝试把它们分解成可以迅速传达讯息的小段落。 9.菜单项可以明确地告诉你，它们将把你带到何处吗？ 网站的设计和可用性是需要认真考虑，但却往往被忽视的东西。想想看，如果你访问这个网站，你想找到什么样的信息，然后相应地安排你的菜单。“关于我们”和“联系我们”页面不可缺少。 10.是否有一种简单的方式来联系公司？ 不出意外的话，你的网站可能会吸引一些感兴趣的潜在顾客，他们想要了解更多或仅仅是想提几个问题。请确保为他们提供一个联系你的简单方法。潜在客户也想知道，在未来有需要的时候，比如需要保修服务还是客户支持时，他们能不能找得到你。 11.你可以了解到该公司雇主或员工的更多情况吗？ 访问者常常想知道他们是在跟真人打交道。提供“关于我们”页面，是一个向世界展示为什么你是处理这件事的最佳选择的好方式。页面上也需要有照片——每个人都喜欢把生意和面孔联系起来。 12.你感受到人情味了吗？ 感受到人情味的访问者更有可能再三访问你的网站，并成为你的顾客。请讲讲你的事情，并告诉访问者为什么选择你会是正确的。你可以通过表现诚意，使用对话式的写作风格，并列出其他客户的真实见证，来让访问者感受到你的人情味。 13.文案是公司式的，还是对话式的？ 冠冕堂皇的公司文体对大公司来说很合适。但一个小企业不应该假装成一个大型的、正规的、和公众存在距离的实体。你对客户有多大的亲和力，是他们为什么最终会选择你的一个重大原因——请立刻开始以一种吸引力人的、对话式的风格来写文案吧。 14.网站“头版”里有Web表单吗？ Web表单是用来获得网站访问者销售线索的唯一方式。请把它放在头版上的显眼之处。它看上去越精美，就会有越多的人填写它。 15.产品或服务的吸引力大到足以让你留下电邮地址吗？ 你的Web表单也应该含有一个激励元素，以便引发访问者的兴趣，并说服他们把自己的信息留给你。确保这个回报具有吸引力—— 它可以是有用的贴士，操作性强的建议，或者是能够立刻使用的特别优惠。 16.网站上有多媒体吗？ 多媒体是一个给网站增添特色和萌点的好方式。你可以利用视频、播客、教程以及其他多媒体，用一种非常吸引人的方式把你的讯息展示给访问者。 17.是否有社交媒体链接？ 社交媒体既可以让你与潜在客户沟通，也能让他们进行互相沟通。请放上你的博客链接、Facebook、Twitter以及其他社交媒体帐户的连接，让大家能够轻松容易地在社交媒体上找到你。像这样，访问者即使不填写你的Web表单，也可以选择以某种方式关注你。 在确定了网站需要改进的方面之后，你就制定一个计划，然后开始实施。改善不必一次性全部到位，可以分批进行，逐渐你就会有一个令你感到自豪的，可以持续带来销售收入的网站了。

By 姜勇 • 网站 • 0

四 20 2012

详解网站设计趣味性：吸引用户 增强网站黏性

作为一个Web设计师和开发者，我们所设计的每个项目都有特定的目标与需求。但同时也有一个共同的目标，即要给用户留下深刻的印象，让他们难以忘记。富有趣味性的体验，往往可以给人带来愉悦的感受，而愉悦的感受往往让人难以忘怀。所以要想设计出让人印象深刻的网站，增添一些趣味性元素便是设计方法之一。 Jeremy Girard在Smashing Magazine上发表了《A Fun Approach To Creating More Successful Websites》一文，其中例举了一系列成功网站，它们巧妙利用趣味性元素，取得了很大的成功——打动了用户的心，并给用户留下了深刻的印象。CSDN对该文进行了编译，内容如下： 从The Fun Theory网站谈起 前段时间，我收到The Fun Theory网站的链接（它是大众汽车投资的项目）。该网站以某个大赛为主要内容，鼓励用户重新设计或思考他们在日常生活中遇到的事情——同时要向其中增加一些趣味性。设计的作品要足够有趣，吸引更多的人方便地使用它们。 在该网上发布的众多视频中，我最喜欢一个名称为“Piano Staircase”的视频。在这个视频中，设计对象是地铁里的一段楼梯。在该楼梯旁边有一个电梯，正如我们预想的那样，平时大部分的人在往返的过程中都会使用电梯，而不会光顾楼梯。   The Fun Theory网站 某天晚上，该地铁站点关毕后，这段电梯变成了一个巨大的钢琴琴键，人踩上去还会伴有音乐声。第二天，当行人再次经过该站点时，他们被这个巨大的钢琴楼梯吸引了，很多人优先选择尝试这个“钢琴”，而放弃了使用电梯。事实上，自楼梯被重新设计以后，其增加了66%以上的使用者——这是一个令人惊讶的增长值啊。 为我们的网站也增添一些乐趣 看了该视频之后，我首先想到的是，作为Web设计专业人员，我们如何利用上面成功案例的经验，为我们的作品增加一些乐趣呢。 通过增加趣味性，来营造一种愉悦的用户体验，用户不仅会乐于使用、印象深刻，同时他还会把这个体验分享给其他的人。 首先，对趣味性进行定义 为网站增加趣味性，并不是建议把客户的网站做成一个马戏团（当然，除非你的客户就是一个马戏团）。而仅仅是建议在设计的元素及交互过程中，增加一些趣味性，以帮助网站可以在相当长的时间内中，为用户提供一种愉悦的体验，从整体上更容易让人记住。 “趣味”并不代表“幼稚”。你为产品增加一些愉悦的用户体验，但不应该让你的客户看起来很幼稚、很不专业。 下面可以看一些成功的Web网站，看看他们是如何利用“趣味性”为用户创造一种愉悦、难忘的体验 。 提高单个常规页面的趣味性 几乎所有的网站都由很多网页组成。选择一个特定的网页或体验（比如“关于我们”、“联系我们”等页面），让它更有趣，并给用户留下深刻的印象，这个普通页就会从该网站脱颖而出。 拿上文提到的“关于我们”页面为例。Mutant Labs是一个英国设计与开发公司。该公司网站上的“About US”页面，不仅有趣，还加入了一些个性化的元素。只要把鼠标移动到团队成员上，对应的成员就会跳出来做一个“招牌”动作。这使原本枯燥的公司简介变得十分有趣了。   Mutant Labs的“About US”页面 那对于“联系我们”页面呢？English Workshop是一个提供英语语言学习机会的组织机构。该网站将提交反馈信息的页面设计成了机器的控制面板样式，以试图它可以更好的贴合“工作坊”的主题。   English Workshop的“联系我们”页面 寻找一些方法，为网站中有希望提供特殊体验的普通页面增添一些趣味性，这样就会给网站的访问者带来难忘的、独一无二的印象。 为“404 error”页面增添趣味性 对于大部分页面，另一个特殊页面是“404 error”页面。在该页面添加一些新的、个性化的元素，可以帮助你驱散该页所给用户带来的挫败感。从Smashing Magazine以前的文章中可以看到很多有趣的实例页面。 除了上面提到的，一个好的“404 error”页面还应该包含指向关键页面的链接，这些页面应该是用户最有可能访问的。准确定位这些页面，用户会送你一个微笑，同时可以很容易返回到他们想找的有价值的内容。   [...]

By 姜勇 • 网站 • 0

四 15 2012

春色

By 姜勇 • 好色 • 0