焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计 » UI Design

细节魔鬼与精简团队-摘要-转

admin — Thu, 05 Jan 2012 02:29:35 +0000

对此有如下几种常见诠释：

★细节派

-即便是微小的细节愉悦，也能给用户带来惊喜，并提升对产品的信赖感

-在激烈竞争中，核心体验容易同质化，这时细节就成为决定用户倾向度的天平

★大条派

-核心功能需要抠细节，非核心功能无此必要

-主干流程，频发应用情景需要抠细节，分支流程与偶发情景无此必要

表面看上去，这算是细节与大条的两党之争，其实不然。我们常常赞美“细节决定成败”，同时也常常咒骂别人抠细节太无聊，然而这两个极端常常从同一人的嘴巴里讲出来，仅时区不同，让你觉得他简直就是个神经病！换句话说，是否注重细节并不取决于个人偏好，关键是情景判断。不少业内人士在我的微博上对此评论道：

“产品是做给用户使用的，当然要以用户的需求为标准。以自以为是的标准做一款产品，无异于闭门造车。做产品，最起码要读懂人性。”

“产品首先应该是有用、能用的，然后才是易用、想用，现在很多人直接跳到最后2步甚至1步上了。尼玛都不想想这东西有没有用能不能用，搞个P的用户体验。”

“做产品调研时要发散再发散，想到各种可能的方向；做产品设计时要收缩再收缩，重点做最能吸引用户的功能。 ”

“产品体验往往会变成几个人埋头追求完美，用户都感觉不到。在大方向上把握用户真的需要的才比较关键。”

“细节决定成败，是在已经把基础做好的情况下。大面上都过不去，谈何细节。更何况，不是所有的细节都值得去反复推敲。”

这些话是不是都很有道理？

很可惜，所有糖水大道理并不能帮助我们解决实际的问题。在发生争执的时候，每个人都会认为，自己的观点最能够代表用户需求。即便对于何谓“核心功能、主干流程”达成共识，这部分哪些细节该抠，哪些不该抠，也会吵个热火朝天。什么才是“用户真的需要”？什么才是“值得反复推敲的细节”？两边恨不得拿起火箭炮豪快地轰杀对方。毕竟细节判断中的主观个性多于客观共识，如果每份争议都去做用户调研、数据挖掘、AB测试来解决，就会把产品设计变成一场漫长的，气呼呼的拉锯战。

还有同行说，“产品经理应该更关注逻辑，没有必要在页面、交互上面钻牛角尖。”相当于将细节决定权完全赋予了交互设计师。这么做倒也不错，但要吻合几个先决条件：

1、交互设计师长期研究此产品，对用户群特征有较深了解

2、交互设计师长期参与此项目，能及时响应需求

3、交互设计师与产品经理有一定的磨合经历，配合上比较默契

4、交互设计师的才能可信赖

据我所知，符合以上四点的产品项目环境，在业内不足10%。信任感这种东西不是天上掉下来的，而是在适当的土壤中生长出来的。“土壤”本身多半取决于“体制”，个人的力量很难去改变。所以，更务实的方法还是精简团队，加强个人责任感并减少分歧。多多咨询听取意见没错，但在具体参与、决策的产品面上只安排少而精的人。产品设计的“群策群力”演变成“人多嘴杂”，屡见不鲜，又是何必喃？

正如我的一条微博所说：最好的合作方式是，在大局上想法互补，细节上各逞其能。最差的合作方式是，大局思路一致，结果盲点重合，然后在细节上吵得不可开交，各自都气呼呼地坚持“细节决定成败”。

UIDesigner 2.0 – 腾讯CDC

admin — Mon, 05 Dec 2011 06:08:16 +0000

UIDesigner 2.0是由腾讯CDC设计和研发，专为交互设计师、视觉设计师、用研设计师精心打造的全新软件。

①丰富控件类型，自定义控件样式。
②可创建个性化控件，满足不同设计需求。
更多功能，您可透过视频和图片抢先一窥！

由腾讯CDC自主设计和研发的UIDesigner 2.0，目前已开放下载。全新UI界面、可定制的用户视图、十大功能模块，由你来品鉴！UIDesigner 2.0，协同设计时代！

UIDesigner 2.0：| 功能介绍| 腾讯CDC官方主页

Adobe Muse – 零代码网站制作

admin — Tue, 15 Nov 2011 12:36:35 +0000

你可能是一名出色的网页设计师，但如果你不会写代码的话，设计好的网页还要请别人去制作。Adobe打算帮你解决这个问题。

Adobe刚刚发布了一个代号为“Muse{缪斯}”网站开发工具。Muse基于AIR平台，其目的是让设计师把精力放在设计上，让那些不懂代码的设计师也可以制作、发布网站。主要包括四大功能。

Muse提供网站地图、主页面、以及覆盖整个网站的工具，你可以很快完成网站规划，为设计做好准备。

让设计师专注于设计而不是工具。精确控制图片、文本、曲线等元素。

Adobe官方人士称，Muse能让平面设计师，设计和发布专业品质的HTML网站，而无需手工编写代码或仅局限于模板内工作，Muse的口称就是让Web设计师从代码中彻底解脱出来。

Muse支持最新的Web标准，包括HTML5和CSS3。另外，Muse与Adobe InDesign可以很好的相结合，创作出具有交互式内容和各种流行元素的Web站点。

支持嵌入Google地图，Facebook feed等元素，结合内置工具可提高网站互动性。支持拖拽自定义导航菜单、幻灯片、面板等内容。Muse支持最新的Web标准，包括HTML5和CSS3。另外，Muse与Adobe InDesign可以很好的相结合，创作出具有交互式内容和各种流行元素的Web站点。

设计完网站之后，你可以在Muse内部预览上线后的效果，然后对网站进行浏览器兼容性等测试，没有问题的话就可以上线。

前不久Adobe发布了一个新工具{Adobe Edge}，允许设计师通过HTML5、CSS和JavaScript制作网页动画。无需Flash。

Muse目前还处在免费测试期，点击Adobe官网的“Get Muse”按钮就可以下载试用。

http://muse.adobe.com/

注，这个测试版是air版本的，在线安装后首次打开会提示输入adobeID，如果没有，点右边的create建立一个id，输入相关信息一路勾选+NExt即可完成。

网站用户体验(UE)之量化76条军规

admin — Tue, 16 Aug 2011 02:50:54 +0000

一、感官体验：呈现给用户视听上的体验，强调舒适性。

1. 设计风格：符合目标客户的审美习惯，并具有一定的引导性。
网站在设计之前，必须明确目标客户群体，并针对目标客户的审美喜好，进行分析，从而确定网站的总体设计风格。

2. 网站LOGO：确保logo的保护空间，确保品牌的清晰展示而又不占据过分空间。

3. 页面速度：正常情况下，尽量确保页面在5秒内打开。如果是大型门户网站，必须考虑南北互通问题，进行必要的压力测试。

4. 页面布局：重点突出，主次分明，图文并茂。与企业的营销目标相结合，将目标客户最感兴趣的，最具有销售力的信息放置在最重要的位置。

5. 页面色彩：与品牌整体形象相统一，主色调+辅助色不超过三种颜色。以恰当的色彩明度和亮度，确保浏览者的浏览舒适度。

6. 动画效果：与主画面相协调，打开速度快，动画效果节奏适中，不干扰主画面浏览。

7. 页面导航：导航条清晰明了、突出，层级分明。

8. 页面大小：适合多数浏览器浏览（以15寸及17寸显示器为主）。

9. 图片展示：比例协调、不变形，图片清晰。图片排列既不过于密集，也不会过于疏远。

10. 图标使用：简洁、明了、易懂、准确，与页面整体风格统一。

11. 广告位：避免干扰视线，广告图片符合整体风格，避免喧宾夺主。

12. 背景音乐：与整体网站主题统一，文件要小，不能干扰阅读。要设置开关按钮及音量控制按钮。

二、交互体验：呈现给用户操作上的体验，强调易用/可用性。

13. 会员申请：介绍清晰的会员权责，并提示用户确认已阅读条款。

14. 会员注册：流程清晰、简洁。待会员注册成功后，再详细完善资料。

15. 表单填写：尽量采用下拉选择，需填写部分需注明要填写内容，并对必填字段作出限制。（如手机位数、邮编等等，避免无效信息）

16. 表单提交：表单填写后需输入验证码，防止注水。提交成功后，应显示感谢提示。

17. 按钮设置：对于交互性的按钮必须清晰突出，以确保用户可以清楚地点击。

18. 点击提示：点击浏览过的信息颜色需要显示为不同的颜色，以区分于未阅读内容，避免重复阅读。

19. 错误提示：若表单填写错误，应指明填写错误之处，并保存原有填写内容，减少重复工作。

20. 在线问答：用户提问后后台要及时反馈，后台显示有新提问以确保回复及时。

21. 意见反馈：当用户在使用中发生任何问题，都可随时提供反馈意见。

22. 在线调查：为用户关注的问题设置调查，并显示调查结果，提高用户的参与度。

23. 在线搜索：搜索提交后，显示清晰列表，并对该搜索结果中的相关字符以不同颜色加以区分。

24. 页面刷新：尽量采用无刷新（AJAX）技术，以减少页面的刷新率。

Ajax是新兴的网络开发技术的象征。它将JavaScript和XML技术结合在一起，用户每次调用新数据时，无需反复向服务器发出请求，而是在浏览器的缓存区预先获取下次可能用到的数据，界面的响应速度因此得到了显著提升。

25. 新开窗口：尽量减少新开的窗口，以避免开过多的无效窗口，设置弹出窗口的关闭功能。

26. 资料安全：确保资料的安全保密，对于客户密码和资料进行加密保存。

27. 显示路径：无论用户浏览到哪一个层级，哪一个页面，都可以清楚知道看到该页面的路径。

三、浏览体验：呈现给用户浏览上的体验，强调吸引性。

28. 栏目的命名：与栏目内容准确相关，简洁清晰，不宜过于深奥。

29. 栏目的层级：最多不超过三层，导航清晰，运用JAVAscrip等技术使得层级之间伸缩便利。

30. 内容的分类：同一栏目下，不同分类区隔清晰，不要互相包含或混淆。

31. 内容的丰富性：每一个栏目应确保足够的信息量，避免栏目无内容情况出现。

32. 内容的原创性：尽量多采用原创性内容，以确保内容的可读性。

33. 信息的更新频率：确保稳定的更新频率，以吸引浏览者经常浏览。
34. 信息的编写方式：段落标题加粗，以区别于内文。采用倒金字塔结构。

35. 新文章的标记：为新文章提供不同标识（如new），吸引浏览者查看。

36. 文章导读：为重要内容在首页设立导读，使得浏览者可以了解到所需信息。文字截取字数准确，避免断章取义。

37. 精彩内容的推荐：在频道首页或文章左右侧，提供精彩内容推荐，吸引浏览者浏览。

38. 相关内容的推荐：在用户浏览文章的左右侧或下部，提供相关内容推荐，吸引浏览者浏览。

39. 收藏夹的设置：为会员设置收藏夹，对于喜爱的产品或信息，可进行收藏。

40. 栏目的订阅：提供Rss或邮件订阅功能

41. 信息的搜索：在页面的醒目位置，提供信息搜索框，便于查找到所需内容。

42. 页面打印：允许用户打印该页资料，以便于保存。

43. 文字排列：标题与正文明显区隔，段落清晰。

44. 文字字体：采用易于阅读的字体，避免文字过小或过密造成的阅读障碍。可对字体进行大中小设置，以满足不同的浏览习惯。

45. 页面底色：不能干扰主体页面的阅读。

46. 页面的长度：设置一定的页面长度，避免页面过长而影响阅读。

47. 分页浏览：对于长篇文章进行分页浏览。

48. 语言版本：为面向不同国家的客户提供不同的浏览版本。

49. 快速通道：为有明确目的的用户提供快速入口。

四、情感体验：呈现给用户心理上的体验，强调友好性。

50. 客户分类：将不同的浏览者进行划分（如消费者、经销商、内部员工），为客户提供不同的服务。

51. 友好提示：对于每一个操作进行友好提示，以增加浏览者的亲和度。

52. 会员交流：提供便利的会员交流功能（如论坛），增进会员感情。

53. 售后反馈：定期进行售后的反馈跟踪，提高客户满意度。

54. 会员优惠：定期举办会员优惠活动，让会员感觉到实实在在的利益。

55. 会员推荐：根据会员资料及购买习惯，为其推荐适合的产品或服务。

56. 鼓励用户参与：提供用户评论、投票等功能，让会员更多地参与进来。

57. 会员活动：定期举办网上会员活动，提供会员网下交流机会。

58. 专家答疑：为用户提出的疑问进行专业解答。

59. 邮件/短信问候：针对不同客户，为客户定期提供邮件/短信问候，增进与客户间感情。

60. 好友推荐：提供邮件推荐功能。

61. 网站地图：为用户提供清晰的网站指引。

五、信任体验：呈现给用户的信任体验，强调可靠性。

62. 搜索引擎：查找相关内容可以显示在搜索引擎前列。

63. 公司介绍：真实可靠的信息发布，包括公司规模、发展状况、公司资质等。

64. 投资者关系：上市公司需为股民提供真实准确的年报，财务信息等。

65. 服务保障：将公司的服务保障清晰列出，增强客户信任。

66. 页面标题：准确地描述公司名称及相关内容。

67. 文章来源：为摘引的文章标注摘引来源，避免版权纠纷。

68. 文章编辑作者：为原创性文章注明编辑或作者，以提高文章的可信度。

69. 联系方式：准确有效的地址、电话等联系方式，便于查找。

70. 服务热线：将公司的服务热线列在醒目的地方，便于客户查找。

71. 有效的投诉途径：为客户提供投诉或建议邮箱或在线反馈。

72. 安全及隐私条款：对于交互式网站，注明安全及隐私条款可以减少客户顾虑，避免纠纷。

73. 法律声明：对于网站法律条款的声明可以避免企业陷入不必要的纠纷中。

74. 网站备案：让浏览者确认网站的合法性。

75. 相关链接：对于集团企业及相关企业的链接，应该具有相关性。

76. 帮助中心：对于流程较复杂的服务，必须具备帮助中心进行服务介绍。

其实对一个网站做一次用户体验分析是很细很累的活，但是意义却很大，尤其对年销售额上千万级的电子商务网站而言，用户体验做好了，转化率能增加千分之一那就能促进数百上千万的销售额，必须引起足够重视。

网站开发人员应该知道的62件事

admin — Fri, 26 Nov 2010 23:57:31 +0000

有人在Stack Overflow上发问，动手开发网站之前，需要知道哪些事情？不出意料地，他得到了一大堆回答。通常情况下，你需要把所有人的发言从头到尾读一遍。但是，Stack Overflow有一个很贴心的设计，它允许在问题下方开设一个wiki区，让所有人共同编辑一个最佳答案。于是，就有了下面这篇文章，一共总结出六个方面共计62条”网站开发须知”。

我发现，这种概述性的问题，最适合这种集合群智、头脑风暴式的回答方式了。这也是我第一次觉得，Stack Overflow做到了Wikipedia做不到的事。（难怪它最近挤进了全美前400大网站。）

在我的印象中，关于网站开发，这样全面的概述性文章非常少见，因此也就非常有用。大家不妨看看，62件事情中你做到了多少？

一、界面和用户体验（Interface and User Experience）

1.1

知道各大浏览器执行Web标准的情况，保证你的站点在主要浏览器上都能正常运行。你至少要测试以下引擎：Gecko（用于Firefox）、Webkit（用于Safari、Chrome和一些手机浏览器）、IE（你可以利用微软发布的Application Compatibility VPC Images进行测试）和Opera。同时，不同的操作系统，可能也会影响浏览器如何呈现你的网站。

1.2

除了浏览器，网站还有其他使用方式：手机、屏幕朗读器、搜索引擎等等。你应该知道在这些情况下，你的网站的运行状况。MobiForge提供了手机网站开发的一些相关知识。

1.3

知道如何在基本不影响用户使用的情况下升级网站。通常来说，你必须有版本控制系统（CVS、Subversion、Git等等）和数据备份机制（backup）。

1.4

不要让用户看到那些不友好的出错提示。

1.5

不要直接显示用户的Email地址，至少不要用纯文本显示。

1.6

为你的网站设置一些合理的使用限制，一旦超过门槛值，就自动停止服务。（这也与网站安全相关。）

1.7

知道如何实现网页的渐进式增强（progressive enhancement）。

1.8

用户发出POST请求后，总是将其重导向（redirect）至另外一个网页。

1.9

不要忘记网站的可访问性（accessibility，即残疾人如何使用网站）。对于美国网站来说，有时这是法定要求。WAI-ARIA有一些这方面很好的参考资料。

二、安全性（Security）

2.1

阅读《OWASP开发指南》，它提供了全面的网站安全指导。

2.2

了解SQL注入（SQL injection）及其预防方法。

2.3

永远不要信任用户提交的数据（cookie也是用户端提交的！）。

2.4

不要明文（plain-text）储存用户的密码，要hash处理后再储存。

2.5

不要对你的用户认证系统太自信，它可能很容易就被攻破，而你事先根本没意识到存在相关漏洞。

2.6

了解如何处理信用卡。

2.7

在登录页面及其他处理敏感信息的页面，使用SSL/HTTPS。

2.8

知道如何对付session劫持（session hijacking）。

2.9

避免”跨站点执行“（cross site scripting，XSS）。

2.10

避免”跨域伪造请求“（cross site request forgeries，XSRF）。

2.11

及时打上补丁，让你的系统始终跟上最新版本。

2.12

确认你的数据库连接信息的安全性。

2.13

跟踪攻击技术的最新发展，以及你使用的平台的最新安全漏洞。

2.14

阅读Google的《浏览器安全手册》（Browser Security Handbook）。

2.15

阅读《网络软件的黑客手册》（The Web Application Hackers Handbook）。

三、性能（Performance）

3.1

只要有可能，就使用缓存（caching）。正确理解和使用HTTP caching与HTML5离线储存。

3.2

优化图片。不要把一个20KB的图片文件，作为重复出现的网页背景图案。

3.3

学习如何用gzip/deflate压缩内容（deflate方式更可取）。

3.4

将多个样式表文件或脚本文件，合为一个文件，这样可以减少浏览器的http请求数，以及减小gzip压缩后的文件总体积。

3.5

浏览Yahoo的Exceptional Performance网站，里面有大量提升前端性能的优秀建议，还有他们的YSlow工具。Google的page speed则是另一个用来分析网页性能的工具。两者都要求安装Firebug。

3.6

如果你的网页用到大量的小体积图片（比如工具栏），就应该使用CSS Image Sprite，目的是减少http请求数。

3.7

大流量的网站应该考虑将网页对象分散在多个域名（split components across domains）。

3.8

静态内容（比如图片、CSS、JavaScript、以及其他cookie无关的网页内容）都应该放在一个不需要使用cookie的独立域名之上。因为域名之下如果有cookie，那么客户端向该域名发出的每次http请求，都会附上cookie内容。这里的一个好方法就是使用”内容分发网络”（Content Delivery Network，CDN）。

3.9

将浏览器完成网页渲染所需要的http请求数最小化。

3.10

使用Google的Closure Compiler压缩JavaScript文件，YUI Compressor亦可。

3.11

确保网站根目录下有favicon.ico文件，因为即使网页中根本不包括这个文件，浏览器也会自动发出对它的请求。所以如果这个文件不存在，就会产生大量的404错误，消耗光你的服务器的带宽。

四、搜索引擎优化（Search Engine Optimization，SEO）

4.1

使用”搜索引擎友好”的URL形式，比如example.com/pages/45-article-title，而不是example.com/index.php?page=45。

4.2

不要使用”点击这里”之类的超级链接，因为这样等于浪费了一个SEO机会，而且降低了”屏幕朗读器”（screen reader）的使用效果。

4.3

创建一个XML sitemap文件，它的缺省位置一般是/sitemap.xml（即放在网站根目录下）。

4.4

当你有多个URL指向同一个内容时，在网页代码中使用。

4.5

使用Google的Webmaster Tools和Yahoo的Site Explorer。

4.6

从一开始就使用Google Analytics（或者开源的访问量分析工具Piwik）。

4.7

知道robots.txt的作用，以及搜索引擎蜘蛛的工作原理。

4.8

将www.example.com的访问请求导向example.com（使用301 Moved Permanently重定向），或者采用相反的做法，目的是防止Google把它们当做两个网站，分开计算排名。

4.9

知道存在着恶意或行为不正当的网络蜘蛛。

4.10

如果你的网站有非文本的内容（比如视频、音频等等），你应该参考Google的sitemap扩展协议。

五、技术（Technology）

5.1

理解HTTP协议，以及诸如GET、POST、sessions、cookies之类的概念，包括”无状态”（stateless）是什么意思。

5.2

确保你的XHTML/HTML和CSS符合W3C标准，使得它们能够通过检验。这可以使你的网页避免触发浏览器的古怪行为（quirk），而且使它在”屏幕朗读器”和手机上也能正常工作。

5.3

理解浏览器如何处理JavaScript脚本。

5.4

理解网页上的JavaScript文件、样式表文件和其他资源是如何装载及运行的，考虑它们对页面性能有何影响。在某些情况下，可能应该将脚本文件放置在网页的尾部。

5.5

理解JavaScript沙箱（Javascript sandbox）的工作原理，尤其是如果你打算使用iframe。

5.6

知道JavaScript可能无法使用或被禁用，以及Ajax并不是一定会运行。记住，”不允许脚本运行”（NoScript）正在某些用户中变得流行，手机浏览器对脚本的支持千差万别，而Google索引网页时不运行大部分的脚本文件。

5.7

了解301重定向和302重定向之间的区别（这也是一个SEO相关问题）。

5.8

尽可能多得了解你的部署平台（deployment platform）。

5.9

考虑使用样式表重置（Reset Style Sheet）。

5.10

考虑使用JavaScript框架（比如jQuery、MooTools、Prototype），它们可以使你不用考虑浏览器之间的差异。

六、解决bug

6.1

理解程序员20%的时间用于编码，80%的时间用于维护，根据这一点相应安排时间。

6.2

建立一个有效的错误报告机制。

6.3

建立某些途径或系统，让用户可以与你接触，向你提出建议和批评。

6.4

为将来的维护和客服人员撰写文档，解释清楚系统是怎么运行的。

6.5

经常备份！（并且确保这些备份是有效的。）除了备份机制，你还必须有一个恢复机制。

6.6

使用某种版本控制系统储存你的文件，比如Subversion或Git。

6.7

不要忘记做单元测试（Unit Testing），Selenium之类的框架会对你有用。
（完）

原文网址：http://stackoverflow.com/questions/72394

如何引导客户

admin — Thu, 30 Sep 2010 08:29:59 +0000

引导客户是个细活，也有不少设计师认为这就是商务人员的工作，其实在今天的商业合作关系中，设计师早就被拎出来作为pre-sales的挡箭牌了，因此行业的压力迫使我们需要掌握一些商业沟通和合作的技巧。
那么为什么要引导客户呢？客户者，衣食父母也。抓不住客户，就搞不来现金，搞不来现金大家都要集体回家数键盘按键，这点在设计公司中尤为明显，而在一个企业的设计部也是一样的道理，这里的客户转变为了公司强势部门和领导层。引导客户无非三个目的：体现自身价值、阐述设计意图和思路、更快的确认设计成果。

潜规则说得好，先统一人心，再集体办事。引导客户的终极目的也在于此，把客户先拉帮结伙，思维同化，有助于下一步工作的开展。那么人都是有思想的，因此你的介入性引导，也有可能不会得到预期的效果，这都依靠你在引导过程中的经验和手法。这就像你去按摩一样，第一次总是觉得像被揍，以后越来越舒服，都是一个技术层面的东西。
1. 强行引导会有反效果
什么叫强行引导呢？我相信客户方最有发言权，就是一个不怎么样的设计师和公司来推荐，或者不太成熟的内部团队做演示，设计出来的玩意外行看了都认为有点问题，他（们）自己还在说得眉飞色舞，什么“国际化风格”，“大气磅礴”，“精美绝伦”能用上的花言巧语全用上了，最后让人感觉像个小丑。
引导的过程中，从见面的第一刻起就回避客户的眼光，或者看得要把客户吃掉一样，客户一有意见就说“根据我们的成功经验，你的这个看法是。。。。。”,基本上这种作风的引导方式只会带来恶劣的反效果。自信应该表现在做人做事的细节和缜密，而不是行为和语言的攻击性上。
2. 增加对待客户的同理心
客户花钱让你设计，就是为了节约时间，获得更好的市场反响，以及更好的推动效果。千万不要喧宾夺主，不要以为客户是应该来求你的，设计师的关注点也不应该一开始就集中于设计费用和时间周期上，设计引导的重点可以确定在产品和服务上，如何低成本高效率的完成产品的设计遗漏问题。
从客户的角度出发，生活中也有不少的例子，比如你去餐馆吃饭，无良的餐馆的服务生总是会推荐餐牌上的招牌菜（多半是价格昂贵的），而有一点同理心的餐馆会从客户角度出发建议你点什么，点多少，甚至我还遇到过根据你的用餐目的（约会，朋友相聚，宴请亲友）来定制点菜和服务的 — 可惜，这不是我国本土餐馆。
增加对待客户的同理心是赢取客户信任的第一步，也是引导的第一个开端。
3. 客户关注的也许是设计以外的事
也许你不相信，大多数传统行业客户在听你的设计提案的时候，根本搞不清你在干嘛，他们关注的是你的语言流畅程度，关注你用什么笔记本电脑，关注你的着装，关注你的自我介绍。。。。。。直到，对，直到你提及他们的产品名称，价格，市场占有率，利润率，品牌影响程度和深度的时候，他们的耳朵才会竖起来。
设计师放了太多精力在我们的设计过程中了，其实客户更关心的是“你这个设计究竟是怎么得来的？”“为什么要这么设计？”“用了这个设计产品就能好卖么？”“你的设计为什么这么贵？” — 好了，这同你去旅游一样，如果景色不磅礴，路途不遥远，人烟不稀少，文化不异域，你会认为旅行的意义没有那么的厚重。
4. 了解客户的底线和背景
无论你怎么引导，怎么沟通，客户一定是有底线的，你的设计不能太好，也不能太坏，不能太贵，也不能太贱，这是一个拿捏的过程。如何了解客户的底线？去拜访客户，去到他的地盘看他的山头插的什么旗。
公司的规模，人员的素质，前台的相貌，使用的办公文件夹值多少钱，会议室多大，客户的西装什么牌子，他们的市场在哪里，他们是否有专业的产品经理。。。。。。。这一切都在透露着客户的底线和心理价位，最重要的，还有对设计的认知程度。
有时候你的客户并不是一手客户，他的背后还有人，因此你还要深入的观察和询问真正对设计有着决定和执行权的那层，或许他们的信息才是真正需要在设计中实践的部分 — 所以我强调，对于设计合作的引导应该从最高层的领导开始，或者从对项目有着决定意义的单位开始。
5. 不要扮演商务人员的角色
有部分刚被一脚踢进社会的设计师，不小心误入了山寨的路线，认为“引导客户”就是和客户“搞关系”，有部分很不幸，真的搞出了关系。。。。。。陪吃陪喝，风花雪月其实不是我们设计师的擅长，也不必要。
设计师必然是需要一些格调的，你和客户打成一片其实也未必就能让他对你的设计俯首称臣，设计需要交际，但是也需要挑客，你不能是个菜就捡进篮子里 — 我这么说确实现实了点，但现实远比这还卑鄙。
如果你坚持要做设计行业的口碑，就绝对不要和山寨客户坐到一桌推杯换盏 — 但是我还是想赚他们的钱怎么办？请雇佣专业的商务人士出面解决你的尴尬。
6. 你的设计可能没有那么好
当然，你的客户未必都是不懂设计的，所谓没吃过猪肉也见过猪跑，如果你的客户花费了3个月，看尽了各种花俏的提案，参加了上百场的设计推荐会后，相信他的审美和设计理解也可以有一点改观和提升。那么，你在小处着眼的那些花花肠子不见得能起作用了，作为设计师，你至少应该保证自己的见识和作品是客户“意料以外”的，有时候引导客户的关键就在于作品创意和客户认知之间的落差。
如果可以的话，你想法了解一下共同争取客户的竞争对手的作品，找一找自己的差距，在任何方法都失效的情况下，也许问题就出在自己的身上，这是我们可以接受，并且要修正的。

2010web 发展趋势

admin — Thu, 30 Sep 2010 05:59:00 +0000

Purists will say that great design is timeless. Yes, in an ideal world, we should ignore trends.

Pragmatically speaking, though, there is a lot of value in monitoring and incorporating design trends, especially with regard to websites.

Let’s face it: the web changes at a rapid pace. Unlike in other media, design trends on the web are not just driven by aesthetics.

Technology is changing that can drastically alter the capabilities of the medium.

In 2010, we’re seeing designers continuing to push the boundaries of web design, setting the following clear trends…

有人会说，伟大的设计是永恒的。是的，在一个理想世界中，我们不用关注这些新的趋势。
实话讲，有很多网站都值得我们关注，分析趋势，特别是某些网站。
网络的变化太快是我们不得不面对的现实。不像在其他媒体，Web的设计原始动力不只是美学。
技术是不断变化的，可以大大加强媒体的能力。
2010年，我们看到设计师继续推进网页设计的发展，以下明显的趋势…

Print Design

Print design has always been a source of inspiration for the web. Web design has been around long enough now to cultivate a strong core of designers who have never worked in print. As a result, we are seeing more inspiration drawn from print, as these designers look beyond the web.

Serif Fonts

One of the most important issues of typography is legibility. Print designers have always favored serif fonts because the edges improve visibility and make letterforms easier to recognize.

Sans-serif fonts have generally been considered easier to read on the screen. But with more users browsing at high resolution and the improvements in font-smoothing technology, serif fonts have become very legible for body text.

平面设计
平面设计一直是Web的灵感来源。我们看到很多的灵感是来自平面设计，这些设计师想法似乎超越了Web。
衬线字体
字体的最重要问题之一是可读性。平面设计师们总是倾向于衬线字体的边缘，因为提高知名度，使字符表单更容易识别。
无衬线字体，一般被认为更容易阅读在屏幕上。但是，随着更多的用户在浏览高分辨率和字体平滑技术的改进，衬线字体已经变得非常清晰的正文文本。

Big Headings

Print designers have been using big headings to grab attention for ages. Print material has had to be high impact if it was expected to be read at all. If you saw a dull brochure sitting on a desk, would you bother to pick it up? Probably not.

This trend started in 2009 and has only grown in popularity. Large headings have been proven to grab attention and communicate clearly.

大标题
平面设计师一直在使用大标题，以争取不同年龄层用户注意。印刷材料的可读性已经很高了。如果你看到一个沉闷的小册子上一坐在办公桌前，你会不嫌麻烦捡起来？我猜你不会。
这一趋势在2009年开始，并开始在普及。大标题意味着更高的关注和更清晰的意图。

Multi-Column Layouts

Designers have to work within the constraints of their medium. Unlike the web, print offers no option for scrolling, being bound as it is by the dimensions of the paper. Using several columns allows you to fit more content in the same space.

Now, with increased screen resolutions and the advent of grid layouts, more designers are adapting this method to the web to make websites easier to use and to fit in more content.

多列布局
一般设计人员在其工作中有很多限制。使用多列可让你在同一个空间展示更多的内容。
现在，以增加屏幕分辨率和网格布局的到来，更多的设计师正在适应这种方法的网站，使网站更容易使用，并适应更多的内容。

Big Lead Image

A picture is worth a thousand words. While it may be a while before a photograph has the same impact on the web as it does in print (which has much higher resolution), the adoption of broadband access has made big photographs more feasible.

We are seeing more websites use large, high-impact images to draw users in and create an immersive experience.

大引导图像
一张图片胜过千言万语。虽然在Web展示上会耗掉一些时间加载，因为它确实在效果方面比单使用文本的要好（其中有比较高分辨率的），宽带接入取得了很大的照片，采用更为可行。
我们看到更多的网站使用大，符合意境的图像来吸引用户，创造一个身临其境的体验。

Diagrams and Infographics

Print designers have been using graphics to convey complex information for years. This is seen most commonly in magazines and annual reports.

Graphics can communicate complex relationships and ratios in a way that is too difficult to do with plain text. Infographics tend to have a simple yet visually rich appearance, and more designers are adopting infographics or mimicking the style in their designs.

图表和信息图像
设计师一直使用图形来传达复杂的信息多年。普遍认为这是最常见的杂志和年度报告。
图形比纯文本更能表达相对比较困难的事或复杂的关系和比例。信息图像往往有一个简单而丰富的视觉外观，越来越多的设计师都采用或者模仿信息图像的设计风格。

Simplicity

Antoine de Saint-Exupery once said, “Perfection is achieved not when there is nothing more to add but when there is nothing left to take away.” The advantages of simplicity in design are many.

Hick’s Law tells us that the time required to make a decision increases with every option. Additionally, the signal-to-noise theory tells us that anything that doesn’t add to the message or function of a website (the signal) gets in the way and makes the design less effective (the noise).

Simple designs are easier to use and understand, and they allow for greater clarity in communicating messages.

Minimalist and Grid Design

Minimalism is powerful yet difficult to master. It contains nothing but the essentials. Everything else is removed, resulting in maximum impact of the elements that are present.

Minimalist designs require a strong grid system to be effective. Naturally, they will have plenty of white space, and so without that grid, a minimalist design would feel disconnected and sloppy. The grid gives it organization and structure.

简单
Antoine de Saint-Exupery曾说过，“实现完美并不是要加更多的东西，而是精简到不能再精简。”在设计简单的优点很多。
Hick’s法则告诉我们，每增加一个选项都会增加作出决定所需的时间。
简单的设计更容易使用和理解，使信息传播更加清晰。

精简和网格设计
极简主义比较难以掌握。它只包含的基本要素。其他一切都要被删除，在该元素是目前最大的影响造成的。
极简设计需要使用一个强大的网格系统才有效。若是有足够的空白，没有这种网格，一个简约的设计会感到零散。网格赋予页面一个组织结构。

One-Page Layouts

There are several ways to simplify. A one-page layout exhibits two of these ways: hiding and removing.

Effective one-page layouts hide any elements that are not a priority. If a user wants to see one of those elements, they can click to uncover it. This is much more effective than leaving everything visible, which would make the page complicated and overwhelming.

Likewise, the principle behind one-page layouts makes additional pages unnecessary. With the availability of powerful JavaScript libraries and faster connections, many websites now have little need for several pages. Designers can easily fit information on one page, without bothering the user with a hierarchy.

单页面布局
有几种方法简化。一个单页布局展品这些方法2：隐藏和删除。
有效办法是隐藏的那些优先级没有那么高的页面布局元素。如果用户希望看到这些元素之一，他们可以按一下来发现它。这比一切可见更为有效，不过这将使本页面复杂。
同样，单页布局后面的原则，使其他网页变得不重要。随着强大的JavaScript库和更快的连接，许多网站现在必要的页面已经没有几页了。设计人员可以轻松地容纳在一个页面上的信息，而没有打扰用户。

Massive White Space

In the early days of web design, we didn’t have much screen real estate to work with, and so we didn’t show much white space. If you’ve ever tried to design a website for a 640×480 resolution, you’ll know exactly what I’m talking about.

Now that we have higher resolutions and the ability to hide and reveal elements with JavaScript, harnessing white space is much easier.

White space is critical to good design. It gives the eye a place to rest. It naturally improves the quality of a design. And it shows which elements are related to each other by way of proximity.

Typographic Layouts

Whereas we used to be confined to a few select “web-safe fonts” with very little control over how they were displayed, we now have a wide range of tools to enrich our typography.

Web designers have long enjoyed using type as a subtle tool to communicate messages. With increasing control and capabilities, we’re seeing more designers focus on typography as the primary design element.

我们以前在适合Web使用的字体方面只限于少数选择，我们现在有很多工具来丰富我们的排版。
Web设计者一直喜欢使用typography这个微妙的工具来沟通。我们将看到更多的设计师聚焦在typography上并把它作为主要设计元素排版。

CSS3 Techniques

Not sure you can take advantage of CSS3 yet? Think again. Web pioneers such as Andy Clarke and Jeremy Keith have long preached about “progressive enhancement” in web design.

Progressive enhancement is about designing websites so that they are usable on older browsers, while being “enhanced” for users who commit to the latest technology.

Designing in this camp lets you take advantage of CSS3 properties such as rounded corners, border backgrounds and text and box shadows. Users on modern browsers will see the nicer version, and those on older technology (cough ¦ IE6 ¦ cough) will see the basic version.

CSS3 Animation

Animation on the web has gone through many stages. Initially, we could only animate with GIF image files. Then, we were pretty much limited to Flash. Now, we can select from Flash, Silverlight, GIF, JavaScript and even CSS3. Subtle animation can be memorable, and CSS3 makes it lightweight and easy.

CSS3技术
不肯定你可以采用CSS3吗？再想想。Web先锋如Andy Clarke和Jeremy Keith长期呼吁“逐步改进”Web设计。
“逐步改进”是关于Web设计，让他们在老的浏览器可用，同时要考虑那些喜欢使用新技术的用户。
你可以利用对CSS3属性，如圆角，边框背景和文本框阴影。在现代浏览器的用户将看到更好的版本，并且对喜欢用旧技术（IE6的）将看到的基本版本。
CSS3动画
在Web上，动画经历了很多阶段。起初，我们只能用动画的GIF图像文件。然后，我们几乎限于Flash。现在，我们可以选择从Flash，Silverlight的，以及GIF，JavaScript和甚至对CSS3。微妙的动画，可令人难忘的，且CSS3更轻量级，简单。

Rounded Corners

The Web 2.0 style of 2005 and 2006 made rounded corners popular, to the point of being annoying. At the time, creating them was difficult. There was no set way to create truly rounded corners. Instead they were simulated with CSS, JavaScript hacks and image files.

CSS3 now allows us to generate rounded corners directly in the browser, making them not only easier to create but also much more efficient, because the user doesn’t have to download additional images or JavaScript files.

Designers are increasingly taking advantage of this new browser capability in 2010.

圆角
在2005年和2006年的Web 2.0风格让圆角变得受欢迎，这是个恼人的问题。那时，他们创造了麻烦的事情。没有固定的方法来建立真正的圆角，只好利用CSS，JavaScript hack 来模拟。
现在让我们使用CSS3直接产生在圆角，使他们不仅轻松地创建，而且更有效率，因为用户不必下载额外的图片或JavaScript文件。
设计师正越来越多地在2010年这个新的浏览器功能的优势。

Box and Text Shadows

Using shadows to create a sense of depth has been done (and sometimes overdone) since the earliest days of the web. But it was not always practical. To add shadows to text, you had to use images, which increased loading time and made maintenance more difficult. Box shadows required several images and CSS tricks like “sliding doors.”

CSS3 has highly customizable shadow capabilities, which allow for a wide range of creative effects, including not only drop shadows but inner shadows, too. Creative designers have already been using these CSS3 effects to simulate both embossed and imprinted effects.

Box 和文本阴影
利用阴影，以创造一种深度感已经完成，因为在Web最早的时候（有时过头了）。但它并不总是可行的。要添加阴影的文本，使用的图片，从而增加加载时间，使维护更加困难。框阴影需要一些图像和Css技巧，如“滑动门”。
Css3具有高度定制的阴影的能力，这是非常有创造性的，不仅包括阴影，而且还包括内部的阴影。有创意的设计师已经开始使用这些CSS3，模拟浮雕和印迹效果。

RGBa and Opacity

For years, working with opacity and transparency on the web was near impossible. You had three choices: simulate transparency using flat images, deal with PNG’s cross-browser incompatibilities, or struggle with CSS’ basic transparency selectors and filters.

CSS3 gives designers much better consistency and freedom in using opacity with the RGBa property. While you can take advantage of transparency in countless ways, one area that it has helped particularly is with complex backgrounds overlaid with semi-transparent colors. Previously, this effect was impractical or impossible to create without resorting to complex PNG images.

RGBA颜色和不透明度
多年来，与不透明性和透明度，在Web几乎不可能的。你有三种选择：使用PNG图像模拟的透明度，不过这并不能跨浏览器，再或者使用CSS的选择器和过滤器的基本透明度处理。
对CSS3使设计师更好的一致性和使用的不透明的RGBA属性的自由。虽然你可以在很多方面透明度的优势，特别是半透明的颜色叠加的复杂的背景方面。此前，这种效果是不切实际的，若果没有PNG图像的话。

Mobile-Compatible Design

The mobile web has given millions of users the ability to check their bank account while waiting in line, look up the latest scores on the subway and update their Twitter status while driving. (Which one of these is a dangerous habit?) And the mobile web continues to grow rapidly.

We have gotten to the point that every company has to consider whether their website will be used on the go, and if so how. Innovative companies have already invested heavily in useful and user-friendly mobile versions of their websites.

兼容移动设计
移动Web已让百万计的用户在银行排队时能够查看他们的银行帐户，能在地铁里查看最新比分和在驾驶时更新自己的Twitter。（这其中之一是一个危险的习惯？）和移动Web正在快速增长。
每一个公司都有自己的网站，考虑它是否将用于在旅途中，如果是的话如何，可以设计一个Web版本。创新公司已经投入巨资开发一个有用和友好的移动版本。

Creativity

The explosive growth in use of social media is proof that people want to connect and share things they are passionate about.

In the design field, we have seen large growth in the sharing and browsing of other people’s work. As designers, we are now bombarded by everyone else’s creativity. Not only does this raise the standard of quality of design, but it encourages ideas to be shared, which contributes to a culture of creativity and innovation.

Clean Illustrations

If you’re like me, you grew up watching Disney movies, admiring all the effort that went into creating each frame of animation. We are well past the days when illustration was done in ink and markers, and this evolution in tools has led to some very creative approaches to design.

Many designers are learning that smooth, clean, crisp illustrations create a distinctive feel that can’t be replicated by photography or simple clip art. The result is a wide range of professionally illustrated designs that are engaging and inviting.

创新
从社会媒体使用的爆炸性增长能看出来，人们很希望共享那些东西充满热情的东西。
在设计领域，我们已经看到在共享方面以及查看他人工作的需求大幅度增长。我们现在被别人的创造力不停的轰炸。不仅提高了设计质量标准，而且它鼓励要共享，这也促进了创造力和创新文化理念。
简洁插图
如果你像我一样，看迪斯尼电影长大的，佩服那些每个帧的创造动画。我们能很容易识别那些使用墨水或标记的插图，而这样插图慢慢演进出一些非常有创意的设计方法来。
许多设计师正在学习光滑，干净，那些不能由摄影或简单的剪贴画复制的清晰的插图创建一个独特的感觉。一个专业插图设计师，会得到广泛邀请。

Textured Backgrounds

Textured backgrounds are nothing new on the web. But this technique has seen an interesting variation in the last few months. I refer to it as “micro-textures”which are subtle, barely noticeable textures in the background.

纹理背景
Textured backgrounds纹理背景，对于Web并不是新的。但是，这种技术在过去几个月已经出现了有趣的变化。我指的是把它当成“微型纹理”，这是在微妙的背景，几乎明显纹理。

Thumbnails

You may be saying, “Thumbnails have been around since the dawn of the web. How is this a trend?” True, they have always been used, but only very simply. You would have a thumbnail that you could click on to get a bigger image. It did the job but was boring.

In the last few months, designers have started asking, “How can we make thumbnails more exciting?” This has led to an upswing in thumbnails that are both clever and usable.

缩略图
你可能会说，“Web最初就使用了很多缩略图。这怎么会是趋势？”是的，缩略图一直被使用，但很简单。你有一个缩略图，您就可以得到一个更大的图片点击。它实现了功能，但有些乏味。
在过去的几个月里，设计师们开始问，“怎样才能使缩略图更精彩？”这导致了缩略图使用上更进了一步，可用性也得到了上升。

Watercolor

As the web evolves, we are seeing more designers being inspired by a variety of sources and media. No surprise that the fine arts are among these sources.

One of the styles that has emerged is the simulation of watercolors. The soft elegant look of this style is distinct and calming.

水彩
随着Web的发展，我们看到更多的设计师展现了各种来自各种媒体的灵感。毫不奇怪，其中美术方面灵感来源。
风格之一是水彩模拟。这种风格独特和优雅的外观是平静的。

Handwriting

Handwritten and script fonts are abused the most. For this reason, many designers steer clear of both types either out of disgust or because of a fear of looking amateurish. But lately, many designers have found that, when used properly, the handwritten style conveys a sense of craft and planning. Used in the right context, it is a powerful way to communicate.

手写
手写和原件字体是滥用情况很严重。基于这个原因，许多设计师避开这两种类型，以免造成厌恶出或业余的恐惧。但最近，许多设计师都发现，如果使用得当，手写风格能传达一种结构规划意识。在正确的上下文中使用，它是一个功能强大的交互方式。

Social Media

With people spending more time on Facebook than Google now, no wonder designers are looking for innovative ways to integrate social media on their websites.

Some designers have gone so far as to publish their content on social media networks and then use their websites to aggregate it.

It is safe to say that as 2010 progresses, we will see more designers find creative ways to integrate social media onto their websites in order to better engage users.

随着人们在Facebook上花更多的时间比谷歌多，难怪设计师是创新的方法来整合社会化媒体在其网站上寻找。
有些设计师在Web上公布他们的社会化媒体的内容，然后利用他们的网站来做聚合。
这可以说是2010年的增长，我们将看到更多的设计师创造性地整合到他们的社会媒体网站，以便更好地吸引用户。

Fixed Elements

Now that browsers better support the position: fixed element, we are seeing cleverer uses of it.

There are plenty of situations in which a fixed element (such as persistent navigation) could serve the owner’s business objectives and make the website more usable.

Fixed elements are memorable and enhance the user experience. They have countless creative uses, and we will continue to see designers take advantage of them.