Tony-懒得设计

发散后的期望

tony — Mon, 30 Jun 2008 02:22:17 +0800

高层的期望
“3个月内，我希望网站能增加X注册用户，每日的独立IP到Y，网站盈利达到Z……”
作为一个团队的领袖或者产品负责人，这样的期望是根据产品所处的战略环境，自己以往的经验，以及产品的过往数据等等多方面因素提出来的战略期望。
都说高处不胜寒，不管是大公司还是创业小团队，只要是出来混的，都要面临不同的压力，比如说来自竞争对手的压力，资本方的压力，上市的压力，合作方的压力等等。

公司高层的期望会直接渗透到各个部门，面对这样的期望，作为产品团队，需要想的是如何通过产品上的升级或者变动来满足这个期望，而作为产品的调整或者升级，在有效和合理之间，需要找到一个平衡点，比如：
T公司为了向外界展示自己良好的盈利能力，使得刚刚上市的股票能一路走红，给各个市场运营、产品团队分配盈利任务。某产品团队在面临这样的前提下，前面尝试各种方案均收效甚微。到接近年底的时候，给宠物来一次大规模的瘟疫，然后用户掏钱给宠物看病，完成目标。
M公司刚刚起步，期望在3个月内达到30W注册用户，但从前一个月的数据发展来看，要到30W至少需要7个月，但由于不想在推广上花钱，所以只能在产品上做文章，凭着产品团队对中文互联网的理解，弄一个“美女PK大赛”必将缩短这个过程。

产品团队，是介于用户和公司高层之间的“和事佬”，一方面需要考虑用户的接受程度，另一方面需要给出一个比较良好的数据。来自高层的期望往往会决定接下来的产品策略，通过产品间接地传递给用户，不同的期望可能会使得产品的策略不尽相同，与聚合一帮讨论社会民生、学术的知识分子相比，当然是笼络一帮色性男女在数据上要快得多，但其价值以及公司所擅长的事情可能不尽相同（没有褒贬之意，有需求就会有市场）。

设计师（产品经理）的期望
在产品团队通过市场分析得到目标人群，划分好人物角色之后，接下来就是具体的产品架构。
通过产品团队的讨论制定出功能菜单，设计师做每个具体执行的时候，也会有一定的期望：
A 希望用户到这个页面来完成什么样的任务，希望用户能在这个页面中注意哪些模块，点击哪些按钮和链接？
B 用户从什么样的入口到达网站的什么页面，通过搜索引擎来的多少？通过合作网站的链接多少？
C 用户的到达率和注册转化率是多少？
……

很多情况下，实际的情况跟期望是会有冲突的：
A 可能设计师们想用户过来这个完成任务A，但用户对页面的任务B比较感兴趣。
B 由于网站的匿名用户就已经能满足很多用户的期望，所以他们就不注册了。
C 尽管你把某个你非常想用户点击的按钮做得非常显眼，但用户却被网站的其他信息甚至一条广告吸引走了。
…..

好的设计师应该在产品上线之后，持续地跟踪用户的行为，通过数据现象，验证自己的当初的设计思路，如果有出入应该去挖掘分析原因，而不是将完成的产品置之不理，进而到下一个产品开发中去，这样设计师就永远只会在自己的世界里做设计，到最后死都不知道怎么死的。
设计师的期望肯定不能完全地等同于用户的期望，但是如果设计师持续地跟进你的产品，跟进你的用户，分析用户的显性需求和隐性需求，即使设计师本人不是典型用户，但用户撅什么屁股就知道他们要放什么屁，这也就是有经验的设计师和新手的区别，熟知用户的设计师会懂得引导他们的期望而不是被他们的期望牵着鼻子走。

设计规范给什么鬼看（二）

tony — Fri, 20 Jun 2008 02:02:21 +0800

<接上文>

Junchen:
我就成天像个苍蝇一样对前端的说细节问题，这边是”确定”，怎么那边是”提交”？所有表单操作的提交按钮文字都改成”确定”。
然后我对图形的说，这个图是614px，那个图是613px，都给我统一成615px（所有图片的尺寸必须是 5 或者 0 结尾，我的洁癖）。
如果写成规范，那么别妄想着他们看了就会执行，得不断的说。

Sky:
规范的内容应该涵盖界面设计本身以及上下游的接口（上：业务需求和逻辑；下：工程技术实现），不仅仅是给设计师看的。
我的做法是分成三个层面去做规划和内容组织：
信息层：信息架构，数据输入输出，内容组织结构
交互层：Persona，可用性准测，Design Pattern Library（参考YUI），封装好的UI组件
表现层：颜色，字体，材质，尺寸与位置关系，图形元素

这样的划分，首先是出于规范的灵活性考虑（分离表现层和结构层的好处，相信做过前端的人都有所认识），其次可以便于团队中不同的角色在长期工作中可以落实到责任制地对规范进行长期的建设。
另外为了更加灵活的推广和使用，在规范中可以引入优先级的权重概念，我划分了三个级别，标准（必须遵循，比如公司/产品VI相关的规定），推荐使用（一些久经考验的解决方案），参考资料（在新产品的设计中仅供参考）。
另外关于流程和管理，我觉得必须是强制规定，并且要注重规范的与时俱进。

路人周:
我觉着吧，要认真搞规范，这个顺序做比较实在，产品设计责任制 - 产品设计原则 - 设计评估手段 - 设计规范。
一开始就操家伙整规范不太好，规定的任何元素都是有修改的可能的，因为连产品方向都是可以更换的，中国公司搞游击战搞惯了，市场压力和客户压力都大，不是哪个公司都敢像西门子一样，花6年开发一个产品。

中国的产品经理最大的特点就是人浮于事，你搞出来的东西一旦和他的想法有出入，一则拒绝执行，二则磨洋工。

要搞规范，不但要决策层下力度支持，也要下面具体执行的人积极配合，但是这个很难办。如果你CEO（或者对整个产品负责的大PM）开个全体会议说：”这个规范我和设计部XXX讨论了，决定在全公司范围执行，谁不执行就是不给我面子，后果自负，下午3点前大家会收到公司发文邮件。”那力度肯定够了，但是会这样么？一般来说不会，除非你的规范有保证说，对效益，对控制成本，对用户满意度有绝对的数据支撑。

再说下面执行的人，我就喜欢拿FW做图，存成PNG，你非要规定我PS做图存成PSD,是我设计还是你设计啊？设计师很容易有抵触情绪，在半瓶水的设计师中间更是如此，总觉得除了他自己谁都不懂设计，谁都是SB，这样就麻烦了。团队当中有朵花，香味只有领导知道，团队当中有驼屎，那就是遗臭万年，会影响甚广，所以我说，搞规范最重要还是先把人搞好。

我们原来8个人小团队做手机方案设计的时候，根本不要什么”规范”，我就做一套输出模板，交下去大家伙用，用得不爽了，觉得有问题了直接找我。我不规定你什么风格，个性化，色彩取向，你就给我记住四个字”漂亮，好用”。

要不搞个规范就搞个半年，黄花菜都凉了，弄得不好，上下受夹板气，索性你也皮实了”算求，这规范爱谁谁，我不做了，你们自己泥腿子去吧。”

帅哥甲:
1.视觉规范确实比交互规范相对好整理，因为前人有很多可以借鉴的经验。
但是如果一个公司有多线产品的应用：如新闻资讯、SNS、IM…
其实就视觉规范这种表现层的在后期推行起来也很难。
特别是遇到没规范就上线已经赚钱的产品，只能折中的推每个产品实际应用规范。
而由于这些产品，设计的时候就严重没按照规范走，
现在要改，”这些人”会觉得在给他们找麻烦，增加工作量，还不能保证赚钱效果。
连根拔起几乎不现实也不可能。

2.而没上线的产品我觉得强制起来比较容易。权力够大的话不规范不让上线。

3.而上线了但是很烂没赚钱的产品，也麻烦。
做产品的这些人都在混，不专业
你咋还能有效的去推行规范哦。要么强制扣钱、开除几个人。
但是一段时间内有人反抗了，有人工作没人做了…
然后又要招新人,时间一秒一秒地过去了。
在这个过程里很小公司慢慢消失了。

Sky:
一个人建规范那就成独裁了，规范这种东西要结合团队现有的人员构成去做的，这样才能有的放矢。

路人周:
上面我那个案例要修正一下，那个是在团队搭配不平均的时候运用的，如果大家都不了解这个东西如何设计执行，那么这个时候需要一个人来挑头做，但是做出来的东西必须经过团队讨论认可和落实执行，同时要报决策层批准。

一个人独裁式的建设规范是大忌，因为最容易出现的情况是，你会发现规范中的内容和他自己没关系，他根本不参与其中，是推卸责任的做法。

Sky:
规范建立的目的在于：
1. 设计与设计实现的平衡
2. 设计工作的基准和参考
3. 有效的沟通
4. 成本控制
5. 良好用例的重用
如果花时间去建立一个规范，而不能达到这些目的，不如不建立。
每个公司和团队在设计和研发上都应该去找适合自己的流程和管理，并不是仅仅设计规范一种方法。

白鸦:
很遗憾，今天一直在开会，错过了这个群P的机会。。。
认真看到大家的讨论，我总结了最重要的一点：
规范不能是一个人也不是一个”团队”建立起来的，应该是所有人一起搞的。包括设计的人没有规范总是咨询设计师的人、用规范的人、老板一起参与。只有这样才好执行下去。不然只能给鬼看。（就算老板强压大家也都很忙，不执行..）

<全文完>

设计规范给什么鬼看（一）

tony — Fri, 20 Jun 2008 01:55:07 +0800

该文章是ucdchina内部邮件组关于设计规范的话题的讨论整理，本来应该发到话题里面的，但因为时间拖太长了，已经过了该期话题，所以整理发到自己博客里面。建议读者阅读本文之前先看该期话题。

注1：这个群P有点长，分两篇发。
注2：希望读者有兴趣讨论在文后跟帖，对于说“顶”、“好文”、带攻击和辱骂性的语言，以及没有意义的回复将一并删除。

<对话开始>

小兔子:
正在用onenote整理视觉规范的制定和更新维护

Junchen
发了一篇文章《规范没有规范》

白鸦:
junchen在跟我抬杠。我说一个人要规范是说为了备忘。只是一个txt文件作为备忘即可。如果你们公司有两个以上的产品，半年以后你再去做那个半年没管的产品你就知道备忘的作用了。

Junchen:
因为我更倾向于再次把产品用一遍,另外txt文件的重要性和备忘的时效性很成问题

小兔子:
一个人需要规范，主要是整理归档和备忘的作用；
一旦一人以上，就有协作的需要，这样自然就需要规范。不过人数少，规范的形式和内容可以灵活精简嘛

白鸦:
其实这个问题就像在交互复杂的网站中，我只给工程师一套可以点击的html原型是不够的，还需要给他们简单的流程图。
不反对让他点着去体验，而且支持一定要再用一遍，体验是必须的。但只用是不够的，仍需要一个备忘作为给他的指引。这样熟悉”规范”的效率更高，针对性更强。当然”备忘”需要记得更新。txt只是一个”比如”，不一定必须用txt。

Junchen:
规范在设计领域（尤其是网站）远没有其他领域来的那么重要，另外就是规范的执行成本很高。

白鸦:
这个观点完全赞成。规范在很多领域都比在设计领域更重要。

Sky:
规范可以做的很好，很有说服力，但是执行的时候就是不按照规范走，或者执行的力度不够，那有规范和没有规范其实也差不多了（甚至有时候会更糟）。
所以规范不应该只是一个单纯的文本或者文档，还有有比较成熟的运作和管理体制去保证规范的实施与更新，不然规范就是个死的东西，也就只有鬼才会去看了。

子条:
比较成熟的运作和管理体制是怎么样的？强制执行，还是天天去磨？

白鸦:
如果一定要二选一，我选择强制执行。

Tony:
将规范放到网站的管理后台，以HTML的形式呈现。
这样相比其他的文档类型，相对容易查询。
里面内容会包括：
效果展示（图片）
简单描述
常犯的错误
代码-供开发人员引用

Junchen:
规范是双重成本的，做要成本，执行要成本。
并且在网站这个领域中，变数过多，变化过快，成本相应增加，收益相应减少。

小兔子:
给开发的文档里就有交互设计，把效果图也打包给他们。设计会给标注主要尺寸的效果图，
在这个基础上，我们再整视觉和通用的交互，以及文字规范。

帅哥甲:
因为我参与过XX公司的规范设计。而我后期提出的就是和TONY一样的做法。
做成WEB的形式容易查询。其实这是参考微软以及一些大公司的传统做法。
但结果就是这个部门会去产品经理磨。执行力度肯定不强。

然后目前我在试着编写一个新的创业公司的规范，经历从无到有的过程。
我先制定了一个简单可行的，比如几大主流浏览器的测试，页面尺寸，大小，CSS等等初级问题。
现在遇到的问题是，执行力度仍然非常差，几乎没有，我编的规范就相当于在给鬼看。

如果在XX公司，肯定是磨啊磨，没有明显的感觉改观效果，甚至磨失败。
在这里呢，有感觉强制不出来，所有去执行的人都很忙，公司赚钱是放在现实的第一位。
忙不过来还管那么多规范，出了东西再说。
所以感觉结果又是磨啊磨。
最后….都是问题啊。

小兔子:
规范怎样去保证落实？貌似是个很挑战的问题啊
PM不管吗？确切说，设计主管之类的来管吧？

XXXX:
现在XX公司没有专门做视觉和交互设计的人员，都是产品经理靠感觉做，但不同产品有不同的产品经理，他们对一些字体、颜色按钮、链接样式、输入框尺寸和样式这些问题，经常跑来打搅我问我要意见。
同时还有很多开发人员，他们只注重功能的bug，他们也懒得写CSS。
原因主要就是这样，想提高效率。节省前端人员、UI设计师的时间。
这个事是长期的，不需要专门花2周或者一段时间来做，而是持续添加、修改、整理的过程。
好的规范不存在执行的压力，如果有这规范，产品经理和开发人员再来问我界面上的视觉和交互问题，我会给他个链接。如果规范里面没有的，我会想能否加一条。
但现在我在工作中的问题是，信息架构需要规范，这个没有达成一致的话，各个产品经理都有理由坚持不执行交互规范，而且你很难去说服他们。
视觉规范相对好整理。

<未完待续>

概念性产品设计

tony — Tue, 10 Jun 2008 00:39:45 +0800

互联网的真正算得上成功的产品屈指可数，每年都有成千上万个新网站出现，同时也有成千上万的网站死去，而那些算得上成功的产品，无不是从这些尸骨堆里面爬上来的，正所谓一将成名万骨枯。

每个网站在萌芽的阶段，都会有一个概念，不管这个概念够不够创新，是不是原创，是否有需求，有没有商业前景。

我们时常都能听到很多很美好的励志故事，比如99年IM在当时互联网里面，只能算是一个概念（即时聊天），马化腾在当初创立腾讯的时候道路是多么地艰难；又比如01年时的电子商务，也是一个概念（网上购物），马云的淘宝的是如何从内有土匪外有帝国主义的夹击下，技压群雄。可以说，一个成为大众化应用的产品，必然是需要一个成长的过程，在这个过程中肯定少不了反对和质疑的声音。

千万不要死在明天黎明前的晚上！
马云的这句话我不知道已经成为多少互联网公司的精神兴奋剂，每个创业者都会拿这些故事去告诉他们的员工，贵在坚持，黎明很快就到来。这就好像买彩票，刺激彩民们心灵的永远是那些中了头奖的名单。但实际上，坚持和意志只是必要不充分条件，是否有竞争力只会体现在产品里面。

现在facebook火了，我们惊讶地发现，很多创业者会说，这个概念我在X年前就想过类似的。那么来看看这些在很早以前就有的概念吧。

个人门户
其实最冤枉的可能就是yahoo，很早的时候就花很大的力量在推动个人门户的概念。每个人都将有一个网上的“家”，成为网民上网的第一站，yahoo当初想以此与微软抗衡，因为把重心放在那，给了google机会，搜索引擎的概念正悄然地深入人心，blog的低成本管理和简单易用也抢尽了当时的风头，等yahoo后来回过神来做搜索的时候，facebook实现了当初yahoo的概念。
当初中国也有在做这样的事情的公司，比如中搜。

Widgets
又是yahoo，在03年的时候，为了配合自己的个人门户战略，信息终将会模块化，花了很大的力气，从1.0到现在的版本，API开放地也足够地成熟。直到google、微软都跟进出自己的widgets平台，包括像igoogle、netvibes、pageflakes等等，都有足够完善的API来整合各种各样的服务和信息。

WebOS
现在的facebook无疑就是一个网页版本的OS，尽管我们知道他是以人与人的关系起家，但最终的他并没有成为一个单纯的交友网站，微软愿意花那么大的价钱买facebook的股份，其实更看重的是facebook的扩展性，但在此之前，已经有不少的国内国外的团队都在所谓的网络操作系统方面做过探索，当然，这些更多地像是网络版本的windows或者mac，如果能抛弃那些花哨的界面，以及多余的js和复杂的用户体验流程，单纯从概念角度，目标跟现在的facebook基本是一码事。

虽然facebook的异军突起跟这些概念性的产品没有直接的联系，但这些概念属于前期人们的愿景和期望，最终的表现会有一些差异，历史选择了一个叫做facebook的网站。从很多细节我们也不难发现，在产品的设计上，facebook或多或少都有那些概念性产品的影子。只是他抓住了吸引人的关键因素。

就好像当初早期很多科学家试图去发明永动机一样，后来能量守恒定律告诉我们，永动机只是一个梦想，但是，在这个探索的过程中，给人类科学探索的进步做出的贡献是无可厚非的。

先学会为自己做设计

tony — Sun, 01 Jun 2008 00:26:00 +0800

记得有一期ucdchina书友会里面，聊过一次大家的工作习惯问题，现在回想起来很有意思，特整理这篇文章分享给大家。

关于photoshop
1 经常用photoshop的朋友不知道有没有遇到这样的情况，photoshop工具栏顶部有个adobe网站的链接，在使用photoshop的时候，经常会误点，然后程序会启动浏览器，然后打断你的工作。

2 photosop快捷键ctrl+shift+N是新建一新图层，但你是否会操作成ctrl+shift+M，然后启动ImageReady。

3 我们的图片库里面肯定会少不了TIF、PNG等等这样的图片，如果你装了photoshop的话，双击是会启动photoshop打开的，而不是用windows图片查看器。

我发现这些问题很多设计师都会遇到，有些设计师会想办法去解决，有些置之不理。

关于分类和信息整理
1 大家经常都会在电脑里面找文件吧，有的时候你明明知道它肯定在电脑里面，但你不知道你给那个文件命了什么名字，放在什么地方，很让人抓狂。

2 白鸦说的gtalk好友分类，如果只有50个人以下，可能问题不大，有200以上的好友呢？

3 我们平时会处理很多文件，同时也会生产很多新文件，尤其是一些文件是有版本号的，我开始喜欢把文件名定成XXX1、XXX2…XXX8，可是若干时间要整理文档的时候，发现你根本分不清楚它们，你只能挨个点开看。

上面说的这些问题可能都是个人的一些使用习惯，当然不是什么大事，但是作为设计师，为别人节约时间提供方便，那为什么要那么委屈自己呢？
如果你在使用的时候遇到了麻烦，是否会考虑，别人也会在此遇到跟你一样的麻烦？

最近有个朋友要去4A公司面试，他给我看他的作品集，我发现很多几个图片的文件名很有意思：《飞机稿副本4》《效果图6》，这种文件待在自己电脑里面关系不大，但如果面试官看到这样的设计师，我相信印象不会太好的。
尤其是在流程化的团队作业的时候，你的交付物的信息传递得是否准确，会影响效率。

我始终坚信：设计师的先要会懂得为自己设计，才能更好地为别人设计。

儿童节快乐:)

doubanclaimd37789f34dbaf7b3

见人说人话，见鬼说鬼话

tony — Sat, 03 May 2008 23:00:33 +0800

有些朋友问我：为什么你做的(视觉)设计都是那么素？没有设计感？
这篇文章写写我做视觉设计的方法和思路。视觉设计就好像一门无声的语言，设计师要学会见人说人话，见鬼说鬼话。
相信很多设计师都遇到过这样的情景：
设计师：看看这个橙色的设计？
老板：我觉得我们这个网站应该用蓝色，蓝色我觉得清爽一些。
马屁甲：嗯，橙色有点太艳了。
马屁乙：我觉得也是蓝色比较好，google、百度这样的大网站都是用蓝色。
设计师：好吧，我再改改…
……
问题就出在没有人问一句：在为谁做设计？
视觉设计难道真的是一门感性的学问吗？
我觉得不是，是因为大家都忽略了用户，一个好的产品流程肯定是会把用户研究和市场研究都做得充分了，才会让视觉设计师动手。我在做(视觉)设计的时候，一般会问：
谁用这个网站？用户是谁？
他们的年龄，职业等等特征？
竞争对手是哪些？
这些用户还喜欢上些什么网站？用什么样的产品，哪怕是非网站产品？
……

中国大部分做设计都“抄”，当然，灵感不会是凭空冒出来的：
1 抄竞争对手或者相关网站
2 抄一张插画或者美术作品的配色和图形
3 抄一个好的摄影图片
4 甚至抄一个工业设计，比如手机、MP3
……

我一般会找到这些相关的产品，看看他们在设计上有什么共性，用户喜欢它们，用它们吗？尤其是在颜色方面，不同的色系会迎合不同的人群，同一个色系也一样可以表达不同的视觉效果。颜色是深一点的还是浅一点？虽然是“抄”，但看你抄的是表面还是抄地有理有据。今天回母校看了下今年的毕业设计，想起当初有个低年级的朋友问我毕业设计怎么做，我觉得最重要的就是多看优秀的设计，把好的东西转化成自己的。

视觉规范
一个企业的好设计都会有自己的视觉规范，这完全是由传统的平面设计延伸到互联网，从coca-cola到yahoo，从颜色的运用到图形的设计，每个细节都会让用户想起它对应的品牌。再比如说flickr，只要用过它的人一见到那个蓝色和红色，会很自然地跟那个网站联系起来。

当然，品牌的积累不是一朝一夕，也不是单纯地靠好的视觉设计就能赢得的东西，互联网的产品跟一张海报、一张画不一样，解决问题永远要比好看重要，甚至相比传统的产品，视觉设计相对也要弱很多，但这仅仅是因为互联网的历史还不够长，等互联网真正地全面渗入人们的生活的时候，视觉规范一定会被全面地重视起来。

我想还是解释一下为什么之前的设计风格都是那么素，包括我的blog主题：我认为用户来到我设计的界面里面为的是阅读信息，我不想把多余地视觉元素去干扰阅读，这样的设计需要有包容性，需要中性，这个界面既可以和任何颜色的图片放在一起都和谐。因为我的界面就是让你更好地集中精力阅读，没有创意的设计也能是好的设计，就好像你天天吃的米饭一样。
如果界面的功能是寻找信息而不是阅读，用一些色彩、图标去引导用户是很需要的。再比如要给一个很有特征的用户群做设计，比如说女性，儿童，或者老人等等，我觉得自己也会用一些视觉元素去迎合他们，做适合他们的设计。

设计师不是艺术家，不必刻意去形成自己的风格，而是迎合用户，迎合企业。就好像宜家的口号一样，为大众做设计。所以，我不想别人定义我的设计风格，要是方法而不是风格，我希望能胜任所有的设计。

UCDChina-workshop

tony — Sun, 20 Apr 2008 02:59:32 +0800

我缺席了上午的内容。
这是第二次参加工作坊，项目由车载音乐改成了比价购物，当然，这只是虚拟的课题，目的是熟悉产品由无到有的流程。因为之前参加一个工作坊的演习，所以本文主要谈谈一些心得和在实战中的一些帮助。

1 了解了产品设计的团队组建和角色分工，尤其是在后来私下跟千鸟聊天的时候，知道了在产品流程能扮演什么样的角色以及怎么跟其他角色配合，以及自己的适合做什么样的角色。

2 如何做市场分析，数据从什么地方来，怎么去获取关键的、对产品有用的数据。

3 做用户的分析，怎么提取出对产品设计有用的属性和关键因素，分解用户需求，并且划分需求的重要程度以及商业价值。通过定性和定量的用户研究方法，抽象出具体的人物角色。

4 竞品分析的方法。

5 根据上面的数据和分析结果做概念设计，画产品大的流程图和结构图。

6 列出功能清单。

7 制作低保真或者高保真的产品原型。

8 测试。

最后补充推荐千鸟的一个文档，相信参加过工作坊的朋友下载看一下能让你思路更加清晰，并且更加清楚流程中环节的交付物。

了解这些流程和概念，会让你在工作中更加有谱，知道接下去应该做什么，怎么去检验你的工作结果，通过什么样的途径去发现问题并且解决问题。其实工作坊只是一种概念性的设计，怎么让这个流程结合运用到你具体的设计里面，个人的心得如下：
1 活学活用，根据你项目的性质，团队的状况，以及可用的资源，和产品的开发效率。不要过于拘泥流程,流程并不是万能的。并不是你会了这个流程就一定能把产品做好，只能让你减少犯错的几率，属于方法论的东西。

2 分析数据，挖掘需求的能力。其实很多成功的网站并没有专业的产品设计人员，只是凭着“网感”发掘了一些关键因素，有些时候你的网站只需要一两个“亮点”就可以决胜千里。

3 加法重要，减法更重要。头脑风暴能让你获得很多很多创意和想法，需求会非常多。有的时候做着做着就出来一大摊子，回头发现你的产品已经脱离了你的核心用户了。在整个流程中，要放得开也要收得回。牢牢把握产品的核心竞争力，产品不是靠功能多取胜。

通过下午的讨论和分析，因为大部分人没有电子商务、图片搜索等等的背景知识，虚拟了数据分析以及没有经过竞品分析的过程，加上思考的时间比较短，最终得出来的分析结论都很单薄，同时也缺乏能让产品出奇制胜的“亮点”。

其他
1 认识了很多新朋友：第一次见到思域，子狼，李真等等还有很多叫不上名字的美女和帅哥，还认识了一个叫朱斌的tony（握手庆贺）。当然还有一些老朋友：老岳，discuz的lushnis。由于下午才过去，还有很多朋友都叫不上名字，还有27日可以再认识，呵呵。

2 我拍了一些照片，地址在这里，我就不单独传了。

3 感谢叽歪友情赞助-叽歪的办公室很好很强大。

4 白鸦、angela辛苦了。

网站中视觉元素的设计

tony — Fri, 18 Apr 2008 13:25:03 +0800

这篇文章所说的视觉元素是指：在一个网站中除去内容(文本、图片、视频、音频等）之外的一些元素。比如图标，背景色，以及背景图案。

视觉元素的设计是配合产品的架构意图并且引导用户交互
前文在聊到文字设计的时候，内容本身的应该是简洁、直接了当。其实视觉元素同样如此，好设计不会拖泥带水，在版式设计中，我说到很多时候可以利用留白来划分位置感，比如我的博客主题，区块直接的划分完全使用留白+对齐。但是，对于大多数的网站来说，页面空间寸土寸金，不可能有那么多“白”让设计师挥霍，这时，我们就会利用图标，背景图案、颜色来给予用户位置感，传递产品架构的逻辑关系。

图中是华南理工大学的学生网站，整个网站的视觉可谓一马平川，虽然在布局的划分中，也用到了一些视觉元素，比如区块中的小方块图标，右侧的绿色背景，但是效果非常不明显。假设将绿色背景放在标题文字下面，标题文字反白并且加粗显示，相信效果会好一些。多参看一下一些成熟的门户网站在这方面设计的方法和手段。

视觉元素的一致性
很多设计师有个习惯，在做视觉的时候，会参看大量的“漂亮”网站或者该领域成功的网站，并且借鉴其中的一些视觉元素，但是往往这样东拼西凑的设计往往会影响细节体验。

中华玻璃网在视觉设计中大量借鉴了淘宝的设计风格，向好的网站借鉴本身没有错，但要把细节借鉴到位了，并且融合自己网站的定位。来看玻璃网中的图标，各种颜色、形状非常地丰富。再看看淘宝是怎么做的：小圆角是整个网站的设计风格，不仅仅在页面的模块中用了圆角的设计，在图标的设计上，也都是圆形的设计，颜色也只用了主色调的橙色和灰色。借鉴本身不是坏事，但是要注意保持自己页面风格，品牌风格的一致性。

那些多余的视觉元素
很多网站单纯地为了“漂亮”而设计，比如在每个标题前面都要带个小图标，或者在按钮里面加小图标。给每个模块都加上一样的背景颜色等等。
再比如麦田老师的蚂蚁网，首页中的那个背景图案让我就很费解，更像是一个个人空间的模板而不是一个“平台性”的网站。在页面的布局上面，也让人感觉不够清晰，没有层次感。

PS：渐渐地有些朋友发邮件让我给贵站提建议，而且数量越来越多，不能一一作答，望见谅，而且有些网站连一些基本的视觉概念都没有，问题确实太多，不太好作答，希望这几篇视觉设计的文章对大家有所帮助。还有的用table布局，建议改用div。
这系列文章也仅仅代表我个人的一些观点和经验，希望能和设计师朋友一起讨论。

em和px

tony — Mon, 14 Apr 2008 11:30:45 +0800

在这系列视觉设计的文章间隙插一篇字体单位的文章。

前文说了，字体单位应该用em而不用px，原因简单来说就是支持IE6下的字体缩放，在页面中按ctrl+滚轮，字体以px为单位的网站没有反应。px是绝对单位，不支持IE的缩放，em是相对单位。
我在调整本blog的时候，发现不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。

怎么将px换成em呢？特地转jorux06年12月的一篇文章，因为中文站用px的太多了，如果你是对代码不敏感的纯设计师，可以向技术人员或者页面制作人员请教：

em是何物？
em指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。em有如下特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

重写步骤：
1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，然后换上em作为单位；
简单吧，如果只需要以上两步就能解决问题的话，可能就没人用px了。经过以上两步，你会发现你的网站字体大得出乎想象。因为em的值不固定，又会继承父级元素的大小，你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明，也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

诡异的12px汉字(原因待查)
本人在完成em转换时还发现了一个诡异的现象，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题我已经解决，你只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。阅读本篇的读者还有其他解释吗？
本现象只发生在12px的汉字，英文不存在此现象。你可以在这里下载到此表现此现象的文件。下载后请读者用IE打开sample.htm，可以看到第一段文字明显长于第二段。然后你可以用编辑器打开style.css，看看究竟发生了什么。解决方法就是把style.css中的62.5%换为63%。演示链接

还可以做哪些改进

为什么还需改进：
1. 你的网站css过于复杂，以至于不知道元素的从属关系，很难重写css；
2. 绝大部分人看了本文之后仍然不会重写css；
3. 很大部分人不知道浏览器可以调整页面的字体大小。

所以你需要一个诸如本站信息框中的字体大小调整控件。
相信本站读者的英语能力，这里就不再罗嗦了，请参看：The Text Changer

Important reference:
1. How to size text using ems
2. The Text Changer

网站中文字的视觉设计

tony — Sun, 13 Apr 2008 02:23:12 +0800

可能很多人都要问，网站的文字还需要设计吗？
对于很多的网站来说，字在整个网站的内容中占了80%以上甚至更多，或者换个角度上说，网站可以没有颜色，没有图片，但唯独不能没有文字。
一个产品团队，有一个角色叫做Content Design，ucdchina有过一期话题叫做注意界面上的文字，非常精彩，我在写本文之前，再次通读一遍，一方面是学习，另一方面，是避免写重复的内容。如果你按照里面的观点对照你的网站，相信一定会有所帮助的。
那期话题只有潇潇重点说的是文字的视觉方面，那篇文章非常精彩，也是该期话题的“浏览冠军”，本文是延续性的一些想法。

先看看网站以外的中文字体设计，英文的正文字体有很多可以选择，但中文的正文字，总的来说就两种：宋体和黑体。在传统的版式设计中，设计师们都喜欢做英文的排版，为什么？从视觉上来看，英文的组合很容易形成线和面的关系，而且字母有节奏感，比如aby这三个字母放一起有高矮区别。中文字相对来说，单调、孤立、不流畅。

回到网站中文字的设计，设计师基本上不用考虑在字体上做选择，只有宋体。前文说：单个字成点，一行字成线，一段字成面。这是版式设计最基本的原理，我们需要做的就是强化这样的感觉。拿微软雅黑和宋体来举例子，本人非常喜欢微软雅黑的设计。

将12号的宋体和雅黑放大，注意以下细节：
1 雅黑要比宋体宽一像素
2 雅黑让每个笔画往四周撑，比如“是”上面的“日”，雅黑显得就要饱满
这么做的目的只有一个，让中文字体更容易形成线，从而读起来更流畅。我们可以看到，尽管雅黑不是真正的正方形，但它看起来要比宋体方一些。

看完上面这个例子，我的观点也就出来了：别把你的文字看成字，而是看成点，文字的视觉设计其实就是处理点线面的关系。

下面是具体设计方面的点：
1~~字体的单位用px而不用em，尽管12px和0.8em大小差不多。~~
updete:感谢网友Dreamcolor推荐文章95%的中国网站需要重写CSS，该文很详细的解释了px和em的差别和原理。这点写之前是我想当然了，没有深入理解em单位。只看到很多用em的视觉效果不好看，现在明白了，是因为没有把em单位和px对上号。结论是应该用em而不是px，但需要把em的值设置好。
2 在css文件body中的font-family里面保证”宋体”前面有Arial或者verdana，个人推荐这么写：font-family:Helvetica,Georgia,Arial,sans-serif，宋体。这样能保证你界面中的字母、数字、符号看上去美观一些，更重要的是更加易读。
3 子条说：12号宋体时，我们一般使用18-20像素的行距。14号宋体通常使用22-24像素的行距。
很赞同，这个行距大小随着单行字数的多少而上下浮动。我认为12px字如果单行字数少的话，17也是可以接受的。
4 正文一行字数最好不超过50，首页的标题文字以8-20字为佳。
5 12和14px字相对来说最精致，13px在需要的时候可以做正文字，word里面默认的字的大小相当于网页的13px字。
6 对于一段文字，尤其是正文部分，保证左右至少有15px的留白，便于用户换行时不受到干扰。
7 文字和背景对比要足够明显，保证最弱文字的可读性。

PS1：给Denis的可爱的女儿晨晨设计的wordpress主题今天出炉了，细节方面还需要再调。那丫头着实地可爱！

PS2：有一些朋友给我来邮件让我给贵站提建议，我在写完这系列视觉设计的文章之后，统一给予回复。我觉得可以从文章观点中，是否能得到一些帮助呢？尤其是可以看看ucdchina的话题。