原文标题How Simple Web Design Helps Your Business
很多电子商务网站喜欢在登陆页面负载过多信息。这些电子商务网站如此糟糕设计的原因很简单:页面中]]>产品越少,关注越多 很多网络公司忘记了电子商务的基本法则:网络购买者希望干扰尽可能少。在亚马逊网站(Amazon.com)上点击几次鼠标就能购买DVD,这要比开车去商店购买简单得多。如果购买体验简单快捷,用户甚至愿意在网站上停留更长时间,进行更多消费。 apple.com 苹果擅长设计简洁首页。登陆其首页,只会看到三样东西: • 简洁的页首导航 • 页面主体展示一个产品 • 特色产品图片下方有信息性链接 除标准页脚导航外,首页仅仅包括三部分。下图是点击一个产品链接(比如iPhone)后进入的页面。 apple.com 即使在产品页面,你马上就能明白页面主题:iPhone。产品本身占据了页面主要部分,周边信息是新款iPhone的应用和特色。更重要的是,观察iPhone页面没有什么内容: • 无关产品 • 无关广告 • 很多文字 • 杂乱无章 苹果网站以令人满意的方式有效展示了足够信息。提供大量信息没有错,只要不让人感觉信息过多就行。这里所有信息、链接和图片全部围绕iPhone本身及其相关信息展开。页面上没有分散注意力的广告、无用信息和其他产品。 简洁网站设计原则的主要方面就是“只显示完成销售需要的信息”,其他什么都不要。这并不是说不需要给用户很多信息。只是要搞清他们是否要看到更多信息。Apple网站使用“Learn more”链接来达到此目的。 设计师和网站工程师可是利用几个可靠方法保证页面布局不会因为杂乱无章而导致访问者离开: 1.只显示需要的 2.减少点击。购买产品所需的点击越少,回头客就越多。别让客户买产品像跳铁环一样困难。 3.“祖母”法则。如果你的祖母(或任何老人家)都能理解如何在网站上购买产品,你设计页面可能真的不错。不需要的信息会让祖母迅速离开。 4.减少栏目。页面上每增加一个栏目,内容空间就会越小。这会减少对主要产品的关注,而购物者的注意力会转到额外的东西上。 5.减少选择。让购物者选择会增加其负担。归根到底,买家购物时希望思考的时间越少越好。以消除多余思考时间及决定的方式展示产品会使购买过程流线化,客户觉得更轻松自得。 6.让设计整洁。整洁的设计会让访问者心情愉悦。花些时间来确保网站布局在美学上让人愉悦,会吸引更多回头客。 直觉网站设计意味着站在潜在客户的立场思考问题。你会在自己的网站上购物吗? 其他优秀的电子商务网站设计 bell.ca Bell.ca网站使用了很少的颜色来设计品牌,并只向访问者提供主导航栏。Shop、Support导航项以及Personal和Business区域的设计恶非常巧妙。设计简洁,访问者不用被强迫浏览整个导航项,就清晰了解导航分布。页面顶部的产品导航设计得多精妙啊。用户没有点错的可能。 shoeguru.ca Shoeguru.ca网站展现了以“用户中心”和“产品中心”的设计。产品似乎就在访问者眼前的展台上。设计仅仅陈列了产品,而没有其他任何东西,甚至没有导航。 etsy.com Etsy网站很好的说明了如何在页面上放置很多信息而不显杂乱。Etsy产品列表很长,然而设计得自然、放松。首页设计得有用、而不使人分心并不简单。 crupress.campuscrusadeforchrist.com Crupress是个简洁明快的书籍网站,没有很多无关栏目。首页有很多文字,但没惹烦用户。页首导航突出,但不扎眼。所有设计元素非常流畅。 crupress.campuscrusadeforchrist.com Tokyocube是一个有趣时髦的小网站,销售日本产品。产品直接呈现在眼前,而不是用很多空间解释网站是卖什么的。使用大量留白使产品仿佛从屏幕中跳出来。你会情不自禁点击其中一个玩具查看详情。 furioustees.com Furious Tees网站比前面的网站使用了更多的图片,有助于两件事: 1. 表现网站的趣味性 2. 明确标明每件T-shirt只卖19.99美元 产品就在眼前,绝不会搞不清Furious Tees在卖什么。首页上展示所有产品,特别适用于出售新奇产品的网站。 但首页上放置大量产品可能会造成页面杂乱。Furious Tees没有这个问题。页面没有额外的工具条和广告分散访问者对T恤本身的关注。关注点集中在衬衣和有趣的设计上。 basecamphq.com 找不到比37 Signal的产品管理工具Basecamp网站更好的例子,来诠释如何综合不同类型信息来销售产品。给出完成销售所需信息“刚刚”足够。设计时权衡了每个单词、每张图片。如果信息不够,用户不会花时间弄明白产品能做什么。但信息太多又会让用户不知所措。 高质量标题背景和公司标志的设计让每一个细节都能被关注到。不同媒体类型结合起来,占据足够空间,用户不会在同一时间被大量图片和文字“轰炸”。 你只有几秒 每个网站都希望用与众不同的布局、设计、文字来销售产品。设计师可通过以下方式达到“少即是多”的目的: • 权衡每个单词 • 去除不需要的元素 • 使用有品味的的颜色和留白 • 限制购买者一次可看到的信息量 记住,互联网买家是善变群体。他们不是“光看不买”的逛街。他们使用搜索引擎缩小到很小的范围。如果不喜欢看到的产品,他们就会离开。网站主只有很少的时间争取潜在用户。高品质、整洁的设计方便购买者迅速发现所需产品。

原文标题Tips on site search box design
虽然很多在线购物者更愿意用导航链接浏览网站,但我们不应当忽视搜索框的重要作用。
如果来访的购物者清楚的知道想要什么,他们会很明确的使用搜索框。这种情况下购物者显示出了明确的购物意图,因此搜索框能够把该意图转变为真实的购买行为。
根据Fast Search提供的数据 (pdf),30%的购物者进入电子商务网站后会立刻使用搜索框,超过30%的人通过导航没有找到需要的物品后转而使用搜索框。
那么,如何让这一切变得更加容易一些?以下是些小诀窍:
搜索框大小
允许用户输入较长的搜索请求,比如两个或者两个以上的词,这是现在的流行做法。那些查找具体电视机型号或者笔记本电脑型号的用户会倾向于使用较长的搜索请求。这意味着我们需要较长的搜索框。
理想的文本框应当能够容纳约30个字符,即5个单词左右。如果用户输入了更长的搜索请求,就无法看到全部文本。这不算糟糕,但如果搜索框能长一些,用户会更容易修改搜索内容中的拼写错误。
以Kelkoo为例,该网站为搜索框提供了足够的输入空间:
kelkoo
显化搜索框
搜索框应出现在页面的显著位置。许多网站倾向于将其放置在页面右上角,但将其安排在中间,购物者会更容易发现。
Comet网站最近发布了新版首页,更加突出了搜索框(同时加大了搜索框)。Comet网站发现搜索框是有效的转化工具,所以做出了此变更。
旧版搜索框被放在了页面右边,如下图:
comet
新版中,搜索框被明显突出:
comet
提供搜索预测
搜索框中输入关键词时,用户必须用几个词来描述产品,并猜测电子商务网站会如何呈现该产品。
让搜索变得更加容易的绝佳方式,是在用户输入搜索项时给与搜索建议,正如Google Suggest。用户能用最小的投入获取想要的东西。
Borders.co.uk网站最近升级增加了这一功能:
borders.co.uk
允许用户缩小搜索范围
如果用户搜索的产品数量非常巨大,用户更愿意通过缩小目标限定搜索范围。
Amazon网站就是如此。你可以通过其18个目录缩小搜索范围,以呈现更加相关的搜索结果:
amazon
用标签明确标识搜索框
大多数的购物者很容易找到搜索框,但我们不应当让那些对网络不是特别熟悉的人为此花不必要的精力。
Waterstones网站虽然将搜索框放在页面左侧,但它清晰明确的标记出其搜索工具:
waterstones
页面载入后,光标默认定位在搜索框内
这是个小细节,但能够让顾客更加容易开始搜索。Google及其他主要搜索引擎都是如此,这能帮助用户更加迅速的达成目标。
但并非所有电子商务网站都是如此。Kelkoo和Amazon网站载入页面后,都将光标默认定位在搜索框内,但在M&S和Next等网站中,用户必须移动鼠标进行定位,才能输入搜索项。
移除搜索框中现有文字
许多网站和下例中的Marks & Spencer网站一样,在搜索框中写入文字解释功能。点击搜索框时,文字自动消失,你可以自由输入搜索项。
如果搜索框中的解释文字无法消失,用户会感觉沮丧,他们必须删除文本再输入搜索项。值得庆幸的是,很少有网站犯这个错误,而迪斯尼英国网店恰恰犯了这个错误。
marks & spencer

原文标题Top Ten Web Typography Sins
虽然许多设计师能很快接受网络标准,但让人惊讶的是他们常常忽视了基本的排版标准。以下是必须避免的十个致命问题:
问题1:使用连字符,而非长破折号。

如果需要中断,使用长破折号而非一组减号。该问题让无数的编辑感觉头疼。
问题2:使用句号而非省略号。

为了保证排版整洁,大多数字体提供了专门的省略号字符。省略号字符的3个点仅使用一个字母宽度,非常适合印刷。
问题3:使用直引号(Dumb Quotes)。

这些在html中使用的直引号不应当用于写作文本中,除非在内容中用于标记英尺或英寸单位。
问题4:句子之间使用两个空格。

由于网络排版的应用,句子之间使用两个空格的老式排版方式似乎终于退出了历史舞台。几年前,人们还必须手动插入一个ASCII空格以解决这个字体问题。现在,一些内容管理系统会自动加上两个空格。千万不要这样做!一个空格即可。
问题5:临时制作版权标记。

临时制作的版权标记不仅难看、松散,将大写C和括号强行组合在一起也不符合法律标准。使用正式的版权标记“©” (代码©),让顾客为额外的法律建议买单。
问题6:使用过多强调方式。

加粗文本,调整为斜体,加下划线。若真的需要让人全部理解你的观点,甚至可以采用全部大写。每次只要使用一种强调方式就可以了。
问题7:下划线穿越下行字母。

下划线穿越下行字母会造成阅读困难。使用border-bottom: solid 1px #00f,而非text-decoration: underline的方式,在文本下方划线,而非穿越文本中的下行字母。
问题8:用Photoshop制作字体。

如果字体库中没有(或者你买不起)粗体、斜体、小号大写字母,不要用Photoshop制作。可能有时候这些通过Photoshop制作的字体在打印时侥幸没那么糟糕,但在网站中显示时会一塌糊涂。
问题9:不使用异国字符。

书写异国字符很让人很困扰(尤其是编写宜家家具文章的时候)。但如果某人的姓名包括异国字符,有礼貌的写出来。
问题10:应用大写效果时不使用CSS。

随意的使用大写并无意义,但如果出于装饰方面的原因,需要使用大写(或者小写字母)时,确保在CSS构架中使用text-transform属性。这会为以后修改避免很多麻烦。