那些让网站设计者们深感意外的事情

作为网站设计者，对自己的行业前景，人人都有自己的看法，然而，任何行业都有出人意料的地方。著名的网站开发设计博客 Nope.com 曾向他们的读者做了一个调查，请他们列举网站开发领域那些让他们感到意外的事情，收到了各种各样的反馈，本文就是这次调查的结果与分析。

移动互联网的爆发

移动互联网为网站开发与设计界带来了变革，成为一种时尚与不可逆转的趋势。曾几何时，网站设计者们认为，随着网络带宽的增加以及显示器的变大，我们的 Web 画面会越来越大，那些传统的 960 网格已经显得局促，然而事实却往相反的方向发展，网站开始被放进那些狭窄的小屏幕，人们喜欢这种变化，随时随地用掌上设备访问网站。

我们从中学到的东西是，相对于展示效果，人们更看重方便性。

社会网络主导一切

关于社会网络，曾经的那些质疑声还萦绕在耳，一个140个字符的博客平台有什么出息？社会网络管我什么事？我开的是公司，不是学校。然而，似乎一夜间，社会媒体网络遍地开花并迅速主导一切，老网民热烈拥抱，新网民也一拥而上。我们从中可以学到的是，当网络将人们连接在一起的时候，它所爆发的力量是惊人的。

网站开发与设计已经成为成熟的市场

帮人设计网站曾经是你赚外快的业余职业，是吧，如今，网站开发与设计已经成为非常稳定且成熟的市场，专业的开发设计有大量的需求。

从 XHTML 到 HTML5

拥有严格语法和代码规范的 XHTML 曾被认为是 Web 的未来，然而不是，Web 的未来是 HTML5。当然，导致 HTML5 受宠的不是它松散的语法（XHTML 严格的代码规范仍然是一种很好的习惯），而是它强大的原生功能，原生的媒体播放能力，本地数据库，画布等等。当网页从单纯的文档向应用转变的时候，丰富的原生功能是非常必要的。

苹果与 Flash 之争

Flash 曾是众多网站开发与设计者的最爱，当然，它也惹恼了同样多的人。突然有一天，苹果站出来向 Adobe 发难，乔布斯在众多场合指责 Flash 不稳定，不实用，iPhone 和 iPad 均不支持 Flash，当苹果在移动互联网领域凭借 HTML5 主宰市场的时候，Adobe 风光不再。我们从中得到的教训是，没有任何技术会成为永远的明星。

JavaScript 重放异彩

曾经，JavaScript 是用来让一些画面在网页上飘来飘去的，如今，JavaScript 成了 Web 开发与设计中不可或缺的东西，现在的网站开发者甚至不再考虑用户是否禁用了 JavaScript 这样的问题。当网站逐渐成为一个应用平台的时候，JavaScript 成了这个平台中最强大的工具。

jQuery 成为真正的明星

JavaScript 虽然强大，但很难用，至少在 2006 年之前是这样的，接着，一个叫 jQuery 的 JavaScript 框架面世，这个开源的，跨浏览器兼容的 JavaScript 框架拥有强大的功能与简单的语法，迅速风靡 Web 开发与设计界，并成为真正的明星。如今，运行 jQuery 的著名站点多不胜数。

CSS 动画

CSS是网页式样语言，动画，那不是 JavaScript 的事吗？然而，从2007年开始，Webkit开始尝试 CSS 动画，并最终将这一梦想变成现实。

一个真正的符合 Web 标准的 IE浏览器诞生

在经过 9 个版本更替后，我们终于看到了一个真正符合 Web 标准的 IE 浏览器。在 Web 开发设计界，人们对 IE 的忍耐到达了极限，最终，很多人宣布不再支持 IE 的某些版本，IE9 的出现将改变这一现状，我们从这件事可以学到的东西是，施以压力与时间，任何顽固的东西都会改变。

相关阅读

• 传统网站如何变为响应式设计
• 响应式设计逐渐成为趋势
• 从电子商务网站设计理念谈易用性原则
• 优秀的网站性能归功于专业网站设计
• 移动Web的完美开端：CSS3 Media Queries

传统网站如何变为响应式设计

响应式网站设计已经成为目前主流的网站设计模式，那么对于传统网站，应该如何让它实现响应式设计呢？是否需要进行网页的重构？

WDOPS提倡在XHTML（HTML） + CSS文件里将页面内容、布局、颜色、字体设计等分开，如果在当初进行设计时严格遵守了这一原则，那么在响应式设计中，只需要更改页面布局相关的CSS内容。对于固定宽度和像素的页面，需要按比例换算成百分比模式。

是否需要进行页面重构，这就要看网页在"裸奔"情况下是否可以有序的展示，如果在CSS无效的情况下网页无法有序地展示内容，那么是必须重构的，其实这跟是否进行响应式设计无关，符合W3C的HTML + CSS标准，是对网页结构的最基本要求。

一般而言，出于展示的原因，移动设备不太适合内嵌网页地图等元素，这就需要在CSS文件里面做相应的调整。另外，若从用户的手机流量和网速方面考虑，大页面最好还是进行重构，以减小用户向服务器请求的数据量。因为过大的数据请求一方面会增加用户在手机流量上的开销，更重要的一方面会降低页面的加载速度，导致移动设备的用户体验变差。

支持响应式网站设计的条件

响应式设计之所以会产生是由于新出现的各种设备(如智能手机、Pad、Tablet、宽屏电视、普通电脑显示器等)的浏览器(或浏览器模块，如android系统的webView等)支持对CSS3 Media Queries的解析。

响应式网站设计无法普及到传统的非智能手机，但是对于采用主流移动操作系统的手机都是可以支持的。对于将来的新设备，只要其中的浏览器支持CSS3特性，那么它依然可以支持响应式设计。

响应式网站设计是大势所趋

响应式设计是在展示设备日趋多样化这一背景下产生的，可以预见，只要设备生产厂商一日不统一，响应式设计就会一直发展以满足不同规格设备的页面展示，如此看来确实给我们呈现出一种时代产物的感觉。

我们在这里提及响应式网站设计中两个紧密的伙伴： HTML5和CSS3，HTML5是最新的标准，用来做一些性能出色的Web应用。而响应式设计利用CSS3的特性可以弹性布局页面上的元素，对HTML5开发的Web应用而言是最好的协助。二者的结合已经成为当前网站设计的趋势。

相关阅读

• 响应式设计逐渐成为趋势
• 从电子商务网站设计理念谈易用性原则
• 优秀的网站性能归功于专业网站设计
• 移动Web的完美开端：CSS3 Media Queries
• 从用户体验角度谈网站设计理念

响应式设计逐渐成为趋势

现今，无论是移动设备还是平板电脑亦或是PC屏幕，屏幕大小各不相同，若是针对每个屏幕大小单独设计一个解决方案，则会大幅增加网站建设的复杂程度和运营成本。响应式Web设计的概念就是可以让网页根据用户的使用环境进行自动调整，有效的改善用户体验。

什么是响应式设计？

响应式设计的概念由著名网页设计师 Ethan Marcotte 在2010年5月份提出，其目标是要让设计的网站能够响应用户的行为，根据不同终端设备自动调整尺寸。通俗地讲，响应式设计是指可以自适应屏幕宽度、并做出相应调整的网页设计。一个网站能够兼容多个终端(iphone、ipad、android)，而不是为每个终端做一个特定的版本，这样就可以不必为不断到来的新设备做专门的网站版本设计了。

响应式设计的基本原理

网页的宽度使用百分比制以及利用CSS3 Media Queries语句事先设定各种分辨率下的页面布局。相当于对同一个网页，设计师要进行好几份设计(例如宽屏下的三栏设计、普通屏幕下的两栏设计以及移动设备上的单栏设计等)。但现在似乎还没有一个比较统一的CSS框架或设计模式来减少CSS设计师的工作量。

响应式设计的用户体验

一个网站若是没有良好的用户体验，即便有诱人的内容也无法很好的吸引用户。响应式设计虽然可以合理的呈现给我们想要的内容，但并不是将整个网页完美的缩放给我们。由于移动设备屏幕大小的限制，在其上进行显示的内容一般是经过精心筛选的。过多的内容会使页面看起来杂乱不堪，用户也很难找到自己想要的东西，根据WDOPS的经验，比较好的做法是留下少部分最重要的内容直接进行展示，其余的部分可以先隐藏起来，用户点击时再展开。这样信息都保留在了页面上，但是不会一次性的全都推到用户面前，用户可以按需索取想要了解的内容。对于移动设备流量上的考虑，可以设计成AJAX模式，而不是预先加载所有的页面数据，这样可以节省一部分的流量。

响应式设计对于SEO的影响

相对传统的网页设计来说，响应式设计对搜索引擎更加友好。Google的官方建议也是优先采用响应式设计。https://developers.google.com/webmasters/smartphone-sites/

响应式设计正成为通行的趋势

越来越多的公司开始采用响应式设计，今年微软也开始重新设计自己的网站。

WDOPS为您建设的网站采用响应式设计

我们依据"一次设计，普遍适用"的原则，让您的网站能自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout），能同时适应个人电脑，平板电脑，手机等各种的平台，提供优秀的用户体验。

响应式设计逐渐成为趋势：http://www.wdops.com/zh-cn/blog/2013/7/31/responsive-design

从电子商务网站设计理念谈易用性原则

对于竞争日益激烈的电子商务网站而言，如何让用户尽可能快而简单的完成购买，用户体验的设计尤为重要，有时候，网站设计理念中一些小小的改进可能带来巨大的改变。本文阐述了在电子商务网站设计理念中，用于改善用户体验的部分易用性原则：

用户无需注册直接购买

很多公司喜欢让用户注册，但注册过程实在冗长，尤其对那些临时光顾的用户，强迫注册会将他们吓跑。让用户直接往购物车里添加货物，在结算前，另外提供一个注册选项以方便他们的下一次购买是一个很有效的方法，在任何时候都要明白，实现销售比收集一堆电子邮件地址更有价值。

注册要简单

你希望注册用户给你提供多少信息？也许是越多越好，然而实际上，你用不了那么多，你真正需要的也许只是简单的联系方式和一个密码。尽可能使用邮件地址作为用户名，因为用户名容易混淆，而邮件地址是唯一的，更容易记忆。

告诉用户他们所处的步骤

面包屑导航条是任何大型电子商务站点的必需，用户需要随时知道他们目前所处的步骤，以及后面余下的步骤，否则，用户会觉得茫然，甚至半途放弃。另外，面包屑导航条还可以帮助用户自由后退，返回，以便在需要的时候对前面的操作进行修改，如果面包屑导航条不容易实现，那你至少对每一步操作进行编号标识，如，第一步/共四步。

让用户有安全感

用户对安全非常在意，尤其当他们需要输入信用卡号的时候，在用户购买的任一步骤，你都需要让他们有安全感，并且让他们知道你会保护他们的安全与隐私，最好的办法是在网站上部署 SSL。

避免隐匿费用

隐匿费用比任何东西都让客户愤怒，一定将价格，税，快递费用，以及可能有的优惠明明白白地显示给用户，而且越早越好，人们喜欢在添加货品到购物篮之前就知道它们需要多少钱。如果在结算之前发现多出来很多额外费用，他们会放弃订单且不会再来。

订单确认

确认页对一个电子商务网站的易用性来讲非常必要，不仅可以让用户对前面操作的内容进行确认，也避免了用户因不确定而不断向你查询。

一个有效的确认操作包含以下三个部分：

订单处理的最后一步，让用户进行确认，确认页应该包含所有必要的信息，订单概要，总价格，发货信息，以及订单取消按钮。订单一旦确认，用户会看到订单确认信息以及订单号，这些信息可以保存和打印。同时应该使用电子邮件将订单确认信息发给用户留档。

列出相关产品

如果处理得当，列出相关产品可以带来交叉销售，比如，用户购买电子产品的时候，可以列出与该产品相关的电池，线缆等配件，实践证明该方法十分有效。

搜索功能

任何电子商务网站需要一个随时可见的搜索框，用户可以对结果进行筛选，搜索功能可以让用户更好地查找商品，提供更愉快的体验。如果你的商品种类繁多，搜索应该支持按类别筛选。允许用户按颜色，尺码进行搜索也不失一个好方法，另外，也可以让用户定制自己的搜索结果，如每页显示多少条结果。

行动按钮清晰，随处可见

购物车应当随时可见，应当浮显在右上方。这样用户不必滚动页面去浏览里面的货品和总价。为了更好地体现易用性，应当允许用户在任何时候都可以修改，添加或移除货品。"结算按钮"应当直接放在购物车内，方便快速访问。

不要低估了那些行动按钮的力量，"添加到购物篮"，"注册"，"结算"一类的按钮可以提高你的成交率和易用性。要想让这些按钮吸引人，需要在字体，颜色，措辞，位置等方面仔细揣度，按钮应该足够大，清晰，色彩应该同背景形成对比。在措辞方面，应该使用"添加到购物篮"，而不是"立即购买"，后者会吓跑某些用户。应该考虑使用本地化语言，比如，美国用户更习惯"添加到购物车"，而英国用户习惯"添加到购物篮"。如果可能，可以使用 IP 区分客户的来源以便针对不同地区的用户，提供不同的本地化语言。

最后，准确的满足用户

对于电子商务网站而言，网站设计理念的精髓同样具有普适价值，在简单中展现优雅，准确的满足用户。意味着改善用户体验的关键，正是要尽可能的降低用户的理解成本和记忆负担，避免无用的信息、花哨的背景干扰到用户的判断：

• 尽可能减少用户的输入
• 简洁表达必要信息
• 避免不必要的交互
• 有策略地向用户提请求

转载自团队博客：http://www.wdops.com/zh-cn/blog/2013/7/5/commerce-website-design-concept

从用户体验角度谈网站设计理念

网站建设中用户体验尤为重要，如果说内容是一个网站最有价值的部分，那么网站设计则是内容的载体，体现了一个网站的素养，然而并不是说您应当过分设计，网站设计风格应结合您的行业，原则上应该简洁，清新，优雅，平和，网站的界面设计仅仅是在用户浏览您的内容时获得一种外在印象，不可喧宾夺主。网站设计应遵循以下原则：

为网站初次访问者传递专业的第一印象

好的网站设计会给初次访问者带来难忘的第一印象，然而网站设计的好与坏从来都是仁者见仁，智者见智的，没有统一标准，如果硬要设置一条标准，就是优秀的网站设计应给人以专业感，所谓的专业感，通俗地讲，就是设计的要象个样子，不妨拿您的网站和世界500强的作个对比，您就会知道专业感是个什么样子。

网站设计要遵循优雅原则

一些粗鲁的设计会让用户觉得受到侵犯，所谓优雅，举个例子，您的网页顶部放着20个五颜六色跑马灯在那里不停闪烁就绝对不是优雅，优雅的设计显得有礼貌，有品位，有艺术感，让用户受到尊重，且不可让用户觉得您是在对他们大喊大叫。

网站设计遵守平和原则

不应该使用过分强烈的色彩或字体对比让用户感到不安，或感到疲劳，好的设计是把自己的网站设计理念平平常常地展现出来，而不是总害怕人看不到，用户可能感觉不到您的良苦用心，而觉得不舒服，您就是在以平和的心态设计。

网站设计不能喧宾夺主

或者说，不可过度设计，您需要始终记住，用户来到您的网站，他们真正想看的是内容，而不是您的网站设计，何况，所谓设计，更多是一种主观的东西，随着这个世界的流行趋势而变，现在的网站设计风格多以简洁为美，一定不要将您的网站搞得象古典艺术品。

面向行业的网站设计

如果您是机械行业，使用粉红色系作页面的配色就不恰当，不同的行业有不同行业的风格，您的网站在设计上应符合这个行业的风格，不同行业的网站，设计风格一般以不同行业的消费群体的口味而定，这就好比以专业摄影师为目标市场的相机一般都是以黑色，结实，手感沉重为卖点，而消费类相机则以银色或彩色，轻薄时尚为卖点。如果您不知道您的行业风格是什么，不妨看看您的成功的竞争对手的企业网站。

专业网站设计应包含醒目的Logo

在现代商业化日趋极致的营销环境中，您的企业网站Logo要非常醒目，它们是您的视觉标志，不要把它们埋藏到一些乱七八糟的色彩中。

网站要包含一套非常吸引人的企业网站Banner

企业网站Banner是指一组图片或其它视觉元素，放在网站的上部，一般在Logo下方，导航条附近，用来展示企业的形象或动态，它类似广告Banner 但只用于展示企业自身。企业网站Banner 要有良好的设计，体现企业的商业造诣，或文化、价值观，要定期更新。

企业网站Banner应当定期更新

企业网站Banner应该是您的网站中最醒目的部分，对于长期访问用户，它们应该成为用户注意力的中心，比如，微软每次有新产品，新动向，都会设计全新的企业网站Banner 放在首页，如果您的公司有时间或精力定期对网站内容进行大规模更新，更新企业网站Banner 并与企业动态结合起来，会让人觉得您的网站一直在活跃地更新。

企业网站Banner体现企业动态

如果您有一个大型展览会要举办，或者参加某项活动，或者在行业获得某个成就，奖励，或者有重大产品的发布，都可以用企业网站Banner的形式告诉来用户，如果您自己对这些动态重视，您的用户也会。

合理安排网页页面重心，不可有头重脚轻的感觉

人类能接受的最佳构图是三角构图，重心位于页面的左侧偏下，然后重心向右，向上逐渐减轻。否则会有画面不稳的感觉。因此需要注意，如果在页面顶部罗列太多的视觉元素，网站设计可能会给人头重脚轻的感觉。

全站遵守一致的网站设计风格

全站的配色与页面布局应该是一致的，要给人以连贯感，避免网页之间有太突兀的变化。

对图片进行优化

对于网站内容优化和用户体验而言，图片在整个网站设计中的地位也非常重要，适当地使用图片元素可以较好的诠释您的主题，图片比文字更容易理解，但您必须在网页内容更新前准备好优化处理过的图片，否则图片的体积将使您的网站变得非常缓慢笨重。优秀的网站设计师在图片处理方面也颇有造诣，Photoshop工具的"保存为Web专用格式"功能就可以很好地帮助您对图片进行优化。图片优化的原则是，应该保持图片的视觉正常，避免拉伸和压缩。对于颜色比较丰富细腻的照片，应以 JPG 格式保存，适当选择压缩比例（一般是60%至80%之间，一个 400x400 像素的图片以 JPG 保存时的尺寸应低于 30K 才合适；对于大色块的图形，以 GIF 格式或PNG保存比较好，可以考虑适当降低颜色数以显著降低图片尺寸。

转载：http://www.wdops.com/zh-cn/blog/2013/5/30/website-design-concept