BLUEFISH 既然不能飞翔那就尽情游动

转台湾某位设计师的文章，提供大家参考，非常有价值！
而且他们描诉也挺有意思的。

------------------------------------------------------------------------------
第一步：
我的第一步包含下面這些（大致說明一下，也歡迎大家分享自己的第一步） 
我只是把我想得到的，頭一次商談要注意的貼出來 

確認客戶是否真的需要網站： 
我發現，有的客戶只是想要電子郵件，而不是網站。 
所以必須先確定他是否真的需要網站。 

我自己親自談還是業務幫我談： 
親自談有時候甚至可以當下馬上改設計 
業務幫我談就不一樣，因為話經過業務加油添醋，會不一樣 

客戶有沒有自己的行銷企畫： 
企畫書怎麼會交給設計師寫？設計師應該是提案給客戶選吧～ 
客戶有沒有認真去思考「網站」就看他有沒有自己寫一份報告給老闆看過 
難道是為了網站而網站  

客戶有沒有特殊癖好： 
網站風水學？無障礙網站？ 
沒有先搞清楚這些特殊癖好，小心網站做好後才被削 

客戶準備多少資料要做網站： 
千萬不要相信客戶說「資料很多，很齊全」 
因為網站上面要用的資料可不是那麼簡單 
照片一定要，現有的型錄也跑不掉 
涉及健康、生命安全的產品最好有政府檢驗過的報告 
有爭議的網站內容最好別接（如吃下肚子，馬上瘦十公斤的廣告傳單） 
公司簡介、部門組織、地圖、聯絡資料一樣都不能少 
當客戶問起什麼資料要準備時＝還沒準備好要做網站 
這些都沒有，等這些資料都做好了，再做網站吧！ 

購物網站： 
預算不夠的公司，不妨建議他去找PCHOME、YAHOO合作開店 
預算更低的，先玩網路拍賣吧 
購物網站不等於東西就能賣出去 
東西賣不出去，就算有購物網站也一樣 
東西賣得出去，就算沒有購物網站也能賣 

網址註冊、主機、電子郵件： 
客戶有沒有自己的網址？自己的主機？自己的電子郵件？ 
這些都涉及到以後的網站設計好要放哪裡 

展示我的作品： 
作品是有風格差異的，不一樣的設計師做的就不一樣 
難不成要幾米去畫火影忍者（能看嗎？） 
風格不喜歡從客戶眼神及談話內容就能感覺到 
不要隨口答應「沒問題，我能改到你滿意」 
發現客戶要的不屬於自己的風格，可以介紹別的設計師 
設計師應該把重心放在自己擅長的案子上 

平均完稿時間有多久： 
我所謂的完稿是指畫面排好，還沒做 HTML 
只是用繪圖軟體先給客戶看排版，這段時間要花多久 

報價： 
第一步不報價，我通常只會說一個 RANGE 價格範圍 
因為還沒有看到有多少資料要處理，不可能有正確的報價 
報價高低的參考因素可以事先告知 
如資料的處理量多寡、是否包含網址、空間主機、電子郵件等等 

合約書： 
可以先給對方看過，大家先對合約有認識 
不一定要第一次就簽約，不過大家對合約有共識 
適度的修改合約符合雙方實際狀況也很重要 
如：客戶需要開票期三個月～ 

備案： 
第一步談得愉快還好，談不妥得要有備案 
發現客戶的風格喜好不同，可以介紹認識的設計師給客戶 
第一步談案子的立場要放在「幫客戶把網站發包出去」 
所以不一定要你自己接下來做，不對頭的案子可以給別人做 
當然如果能自己接下來做，自然就會賺得比較多 
（介紹別人做也能賺？見仁見智！） 

------------------------------------------------------------------------------

在蓝色景点论坛看到一个帖子，一个没毕业的mm在作业中，给豆瓣改了版，引起了热烈的讨论 好久没有看到这么有意义的讨论了。 一个网站如何定位，美观和功能那个更重要，设计网站的时候应该如何根据客户的体验来制作等等，很发人深省。  特整理如下： 图毕业设计 题目为

用户使用网站界面的行为研究
----对豆瓣网的测试调查


我的个人看法 是这个改版去掉了 豆瓣自身的特有风格而加入了 一些通俗的内容
比如"热门排行"一类的东西,另外一些点缀性的图片太多

她问我:为什么web2.0的网站需要简洁的风格而不需要那些点缀的图片
我回答:因为web2.0的网站都这样......

希望大家能给更好的回答..
--------------------------------------------------------------------------------------------------------- 我想，如果有大量的文字说明，会更有说服力。

所谓web2.0的理念主要是传递有用的信息，我觉得这个MM对web ui/ue理解是有偏差的，她的主要理解还是从视觉出发，没有在功能上考虑。论文标题起的有点大。

logo看起来不错，标题前边“豆瓣状”的icon都很不错，整体视觉效果与品牌一致。

如果是第一次做网站，这个MM很有潜力。
------------------------------------------------------------------------------------------------------- 搜索的位置不是人们习惯的。
大多数的用户，特别是男性用户，再找自已想找的信息时，大多是使用搜索的功能。现在这个网页是一分两列的，搜索放在右边，这样的设计一方面用户不习惯，另一方面就是搜索结果的出现方式可能会有问题，但我不太清楚现在的搜索结果页是什么样的出现方式。
------------------------------------------------------------------------------------------------------- 我看了以后感觉如何：
1〉 这已经不是豆瓣的“改版”了， 而是“再版” 或者是“大陆版” （港台的好电影到大陆公映的时候都变成了大陆版！“黑社会”犹胜，靠剪辑和配音就能把一个“港台片”改成“主旋律影片”）。
2〉 因为这样的改法直接变动的时IA，变了灵魂。所以可以说完全是豆瓣的再版..
3〉 图形风格的变化，交互设计上的改变，和表现细节上的变化实际上只是表层的东西，这个并非是最重要的，  只要符合你的IA和你的“整体风格”他就是合理的。  
4〉 所以她这样的改法我不敢去评判他的这些设计细节 因为我相信“他这么设计一定有她的道理和她认为的合理性”。 我觉得每个设计者都有她的思想和依据，如果她不告诉我她的那个“为什么”我可能没有资格去判断正确如否。
5〉
6〉 我个人很不赞成“web2.0的网站就应该是什么什么样..”的说法...
7〉 如果这个作者真的只是第一次做网站的话确实很棒！  虽然她的理解还只是在表面上，但这样已经很不容易了
------------------------------------------------------------------------------------------------------ 1：这种风格，其实已经证明过失败，仅适用于个人网站的形式。

2：从ue的角度来说，是用户体验为中心，大多数用户是不喜欢看到那些花花草草的。

3：细节上欠缺很多。

4：结构上没有合理的充分运用空间。留白是一种艺术，显然这位MM，在留白这项艺术上把握的不好。 ----------------------------------------------------------------------------------------------------- 想到了web标准下的设计了，好像"传统的中国那些风格"，不存在了，取而代之是欧美的那些simple，简洁，也不知道好不好，应用web标准的中文网页，过多的使用了英文或者文字，而且少了份艺术设计效果。

虽然csszengarden的设计很强悍，可是换成中文，那是一种什么样子？

web2.0也是，给人感觉好像是xhtml+css的网页就是如此似的。

或许原先table布局+PS切割的web用户界面，并不是很合理！修饰过重而忽略了内容。

困惑中.......
----------------------------------------------------------------------------------------------------  或许web2.0更注重内容.

该MM做过用户调查显示大部分人觉得: 豆瓣目前的网站色彩单调,过分的简洁,让人感觉枯燥..或许她调查的大部分群体(美术专业生)更喜欢外表上的东西的缘故把

个人觉得,不管豆瓣如何加修饰,我觉得也只能满足少数人的需要,更多的人会觉得不适.这样看来简洁的风格能尽量让更多的人接受.

(看看Q-ZONE那个界面,就是有些MM喜欢把它弄的花的一塌糊涂,确实也有部分人会觉得那样好看)

btw: 貌似她还真的和豆瓣的负责人员提出改版申请要而坚决的遭到拒绝,或许豆瓣的人员觉得现在的状态才是最合适的.

当初我也是听室友说他认识一个女的要改版豆瓣,和我交流下WEB方面的东西,然后把该MM推荐给偶认识
(我当时心想,还没毕业就改版豆瓣,这MM挺牛B的)
----------------------------------------------------------------------------------------------------- .....什么时候推荐给我咯

豆瓣的定位很明确也让他流失了一部分用户
基本上是打造的针对性很强的网站

这个改版第一个就是太过于花哨而让一些本来可以很简单就完成的东西增加了新的步骤吧.
空间的浪费太严重了..在以资讯类的网站为主的中国来说是不可意思的.尤其是门户
而且整个的风格不适合现在中国的网站国情.中国人更注重内容而不是表现形式,从163,sina.如果还想看的话可以去mop和天涯看看.这些都是些主流的东西.
当然 blog之类的就不算了,那个是展示自己个性的东西.
从他们的风格上可以看的出现在的用户需求到底是什么样子,现有的douban很符合这个形势,改版的话确实是没有必要.在细节上继续修饰就好了

美术专业的眼光有时候也会造成对一些事情的偏执.比如说空白的运用..

嗯.不得不说,我现在理论化太严重了..



greengnn
关于这个我也想过一些.
要真的设计成"传统的中国那些风格"那样应该是可能的.
觉得,绝对有方法可以做出适合WEB2.0的中国传统风格来的.但是方法....可能还要摸索一段不短的时间----------------------------------------------------------------------------------------------------- 在改良这个网站之前,我是做了一番用户调查的,对于现豆瓣网站的单调和页面导航显示的不明晰是很多用户提出来的问题,因此在网站设计的时候有考虑到很多这方面的因素,在页面中加入花花草草并不只是为了点缀,而是考虑到了每个页面的导航提示.以及与豆瓣之名的切合,不过还是要承认在设计过程中,自己太多的对视觉方面的考虑
呵呵,在做用户调查的时候,也看到了斑竹baiya提到的关于是否要做用户调查的文章,也很困惑.
不明白,为什么要看照片呀,晕~~~~ ----------------------------------------------------------------------------------------------------- 我对于你的用户调查有点疑问
你是怎么做用户调查的??
是不是只对你们学校做了调查?
还是是针对很多不同职业不同专业的用户做调查?
另外由于豆瓣的用户针对性很强.你是不是考虑了那些用户群的调查?
还有你做的调查是不是只针对于视觉?
在看了电脑报上的一篇文章提到了"web2.0其实还是一个鼠标的天下","主流的需求仍然是信息的获取,因此要个性化,更要易用.","以用户为中心","让web变得更容易使用,功能更强大"所以在易用性方面你有没有更多的调查?
这些只是疑问...
因为相对于美院的人来说更著重於视觉方面的调查.而一般艺术性很强的网站在实用性上可能会相对弱些.
曾经有人给我推荐过一个网站.纯艺术性的个人主页.结果我找个按钮都找不到,原来按钮和背景颜色很相近,令我花了很多时间在这个上面.....除非我是喜欢艺术的人.否则我会对它很反感.请问下你是不是注意了这些方面的东西?
所以美院的...我还是有以上的疑问

 

-----------------------------------------------------------------------------------------------------

豆瓣是web2.0产品，是web应用程序，是多用户web应用程序，如果从看的角度douban当然不是很好看，但是这不证明不好用，豆瓣的核心在于好用而不是好看，用户来豆瓣不是要做视觉体验的，而是要应用，对于豆瓣这样的网站，那些花花草草的的装饰看上去是很活泼，不过我来网站不是来看这些花花草草的，而是来用豆瓣，来快速，准确找到信息，凭且应用功能，这个是最关键的，大量的图像和过多的颜色，会干扰一个人的思维，会干扰一个人的正常使用，上面人兄说qq-zone就很好看，对没有错qq-zone对于用户来说那些图形就是信息，所有的装饰品对用户来说都是有用的，对于年轻人来说那些东西可以显示个性，宣扬自我等等，对用户又实际的价值在里面．而对于豆瓣来说大量的图像是没有意义的，对于用户来说那些文字信息才是最重要的，不要让用户在花丛中去找信息，哈哈大家想一下，如果吧大街上用的红绿灯上面放点其他颜色小装饰灯是不是效果会更好看，呵呵不过哪就叫霓虹灯了，而不是红绿灯．MM的网站总体来说不错，不过只是一个不错的个人网站，对于UE/UI我觉得更偏向于理工类而不是艺术类．MM很有潜力哈哈以后继续努力
-----------------------------------------------------------------------------------------------------

 

视觉引导不太好，失去了重点。视线没有落脚点。被背景牵引去了太大的注意力。并且，画面资源的浪费有些严重了。这个设计基本能在第一屏显示的内容好像只有导航和logo了。并且在板块的划分上有些乱了。没有系统的表现方式。不能使用户形成使用习惯。总之，用户用上去，会恨不得其所。对网站不明确。上哪里才能找到用户想要找到的信息不明确。单说背景的修饰也是有些过了。使用花纹的背景对于信息摄取是一种严重的干扰。可以使用颜色，但是颜色需要用在有用的地方。不过单从对于花纹的设计上看，倒是很清爽~MM继续加油~

-----------------------------------------------------------------------------------------------------

豆瓣的目标用户群并不是平均分配在我们的身边的，很有可能你调查的用户对豆瓣的功能完全是抱着远观的态度，而不是一个喜欢豆瓣功能的使用者。用某样东西，不等于就适合用这样东西。上豆瓣网也是一样。豆瓣的针对性注定了它只适合一部分人，如果为了其他并不是非常喜欢豆瓣的功能的人而改动豆瓣根本性的东西，就太失败了。

比如QQ空间，我也在用，但是是被迫的，因为我不少朋友都只用这个玩意儿。问到我对它的态度，那只能是极端讨厌。如果我想对QQ空间改版，那么我所调查的用户群基本上会和我自己的想法出入不大，因为这是由人的交际圈决定的。那么我会得出QQ空间需要简洁、实用、不花哨的错误认识。实际上QQ空间现在用户群那么广，就是因为它针对目标用户作的很到位。

个人性质的用户调查是不可能作到客观的，甚至有可能误导调查者得到与事实完全相反的结果。这都和调查者的交际圈、调查行为的潜意识有密切关系。调查就象钓鱼，用鱼竿钓鱼，是无法确定钓到多少鱼的。只有用大面积的渔网，才能得到想要的结果。
-----------------------------------------------------------------------------------------------------

比较认同 “南风神之剑” 的这句话：
“简洁不等于简单，像豆瓣那样风格的页面，也是经过精心设计后的产品。”

总结上面的讨论，一句话：艺术设计与用户体验如何更好的结合？
如果在用户体验的基础上，进行视觉上的适当设计，作品会不会更好？难度应该在于如何处理两者的矛盾，如何在两者中做取舍的问题。不同的专业人员做些交流应该可以解决吧。

 

 上上周拍的片子了，一直没空拿出来show~文字稍后补上

 

 

 

 

 

 

先贴图，后说话~

做好一个网站，不仅要在服务及功能上胜人一筹，而且网站的整体设计也是一个不可获缺的重要因素，一个设计漂亮的站点通常能在第一时间吸引人的眼球，用户回访机率也就更大。因为我本人对设计这一块也很感兴趣，所以经常在浏览一些网站的时候，非常在意它们的设计效果，下面这十个web2.0网站的设计堪称经典，值得我们去学习。

1) Cork’d - 是一个分享好酒、酒文化、酒故事的网站。深棕色和淡棕色的颜色搭配很协调，再配上漂亮的插画，显得整个布局更加充实。

2) Newsvine - Newsvine是一个社会性新闻站点，它是一个用来阅读、撰写和分享新闻的场所。

3) digg - digg也是一个社会性新闻网站，它的网站创意不仅吸引了很多的人，而且它设计也非常大气，以致于越来越多的网站来模仿它的设计。

4) Blurb - Blurb 提供图书设计及出版软件。

5) FireFox - Firefox不仅由于出色的功能，从而可以与IE进行对抗，而且它的网站设计也漂亮得没话说，给人的感觉非常清新。

6) 9rules - 9rules是一个blog network，以设计为主，他的成员基本上都是顶尖设计人员，不言而喻，从这些人里设计出来的网站那当然是非常漂亮。

7) Snap - snap是最近发布的一个搜索引擎，他利用了AJAX技术，搜索结果以缩略图方式来显示，主页非常干净简洁，搜索结果的界面提供大量了动态效果，给人的总体印象是干净利落。

8) Simply Hired - Simply Hired 一个职位搜索网站。它采用了明亮颜色配方，使用起来也非常简单方便。

9) Blogger - Blogger是google旗下一个BSP网站，它不像国内的很多BSP，在首先放满了各式各样的栏目和图片，而是非常简洁，只放置了登录注册框和动态显示一篇blog文章标题。

10) Pandora - Pandora提供音乐共享服务，它基本上把功能都放在一个页面中，非常的独特，设计创意非常新颖。

    每瓶绝对伏特加（ABSOLUT VODKA）都产自瑞典南部的小镇 ÄHUS 。那里特产的冬小麦赋予了绝对伏特加（ABSOLUT VODKA）优质细滑的谷物特征。经过几个世纪的经验已经证实，绝对伏特加选用的坚实的冬小麦能够酿造出优质的伏特加酒。

绝对伏特加采用连续蒸馏法酿造而成。这种方法是由“伏特加之王”Lars Olsson Smith，于1879年在瑞典首创的。酿造过程的用水是深井中的纯净水。正是通过采用单一产地、当地原料来制造使绝对伏特加公司（V&S Absolut Spirits）可以完全控制生产的所有环节，从而确保每一滴酒都能达到绝对顶级的质量标准。所有口味的绝对伏特加都是由伏特加与纯天然的原料混合而成，绝不添加任何糖份。

  绝对伏特加家族拥有了同样优质的一系列产品，包括绝对伏特加（ABSOLUT VODKA），绝对伏特加（辣椒味）ABSOLUT PEPPAR，绝对伏特加（柠檬味）ABSOLUT CITRON，绝对伏特加（黑加仑子味）ABSOLUT KURANT ，绝对伏特加（柑橘味）ABSOLUT MANDRIN，绝对伏特加（香草味）ABSOLUT VANILIA，绝对伏特加（红莓味）ABSOLUT RASPBERR以及绝对伏特加ABSOLUT APEACH（蜜桃味）

1979年推出的绝对伏特加（ABSOLUT VODKA）口感丰厚，并富有谷物顺滑的特征。

1986年推出的绝对伏特加（辣椒味）ABSOLUT PEPPAR的口味混合着芬芳和些许辛辣。它综合了辣椒中的辣的成分以及特别的墨西哥辣椒的味道。

1988年推出的绝对伏特加（柠檬味）ABSOLUT CITRON取材于桔类水果，其中以柠檬为主，而加入其他的柑橘口味，使得ABSOLUT CITRON拥有了更加丰富的味道——独特的柠檬口味中夹杂着酸橙的丝丝甜味。

1992年推出的绝对伏特加（黑莓味）ABSOLUT KURANT原料为黑醋栗（葡萄家族的一种）。那是一种气味芬芳的深色浆果，在灌木丛中能长到6尺高。带有浓烈黑醋栗口味的ABSOLUT KURANT的口感酸甜，清新爽口。

1999年推出的绝对伏特加（柑橘味）ABSOLUT MANDRIN取料于柑桔类植物。为了使其口味更加丰满，其他桔子类口味水果亦被添加，丝丝甜味，口感丰富。

2003年推出的绝对伏特加（香草味）ABSOLUT VANILIA由天然的香草制成。为了获得丰富的香滑口味，取材时选用完整的香草。因此，ABSOLUT VANILIA的独特口味中还混合着点点奶油香果和黑巧克力的味道。

2004年推出的绝对伏特加（红莓味）ABSOLUT RASPBERRI选用新鲜多汁的覆盆子的成熟果实，富有浓郁、丰厚的野果口味。

2005年推出的绝对伏特加（蜜桃味）ABSOLUT APEACH口感顺滑，口味醇美；具有浓郁而优雅的蜜桃味。

第一部分：豪华游轮的线条技术处理
大部分的初始线条都是基于Adobe Illustrator矢量创建的。而最后的着色工作多数是由Adobe Photoshop来完成的。此实例指南中的技巧适用表现任何三维空间透视图，无论有所图画有多大和多么复杂。

这个创作是一个很大的挑战。当着手与这个创作的时候，这条现实中的船正在德国即将完工。没有涉及这条船的照片或CAD图样，手上仅有的就是下面你所看到的设计蓝图。为了使船在投入运行的时候有宣传册，必须在两个月内完成这个插图的创作。

第一个步骤是制定船体占用的实际空间。建立地平线和消逝点后，一个可以展示船体最多细节的角度被发掘出来。这种角度一般处于画面的3/4处。想要了解更多用于机械图和建筑物解剖图等透视图画法技巧的，请参考两点透视画法指南。

下一个步骤是利用预先制定好的坐标比例展示甲板正面和横截面图。

整体布局设计完成以后，开始单个的甲板的设计。在根据如下蓝图（A）设计时，每一个舰板都要用Adobe Illustrator在俯视图（B）上重画两次。为了加快步骤，在完成的剖视图中只重现了详细资料中有的部分，像墙壁、栏杆、家具、地板样式和坐标比例等项目基于他们共有的属性被集合起来。


当所有的14个甲板在统一的比例下完成后，使用Adobe Illustrator的自由变换工具统一将他们形变到主透视单元格中。主透视单元格为他们提供了一个符合透视画法的平面图。连接和集合在一起的物体和室内陈设品被升高到他们正常的高度。用形变后的平面图作为模板，把所有垂直面和三维空间物体又重新画了一遍。

下一个步骤是确定船体外部哪些需要裁切成圆角以及怎样在个别甲板表面最好的表现公共空间的重要细节。

使用形变后的平面图作为向导，象墙体表面、楼梯、柱子、栏杆等的垂直高度决定于主透视单元格视图中的纵坐标尺寸。

所有处于同一海拔高度的陈设品和基础设施被联系在一起，从而他们可以用Adobe Illustrator的命令被一同提升。

在透视图中联系在一起的陈设物体在导入到主透视单元格后再把其余分离的物体移到他们正确的y轴位置。

在每一个陈设品被移动到他们正确的坐标位置后，一个透视图的框架显现了出来。每一个陈设品一定要最终确定它们的艺术线条。

现在所有的线条创作都完成了，然后把这个矢量文件转化为Photoshop的分图层的文件。可以把文件转化为灰度级文档，用以加快转化输出文件的速度，尽管如此还是需要9个小时的转化时间。最后转化好的线条文件如下所示。最终的Illustrator的文件被分成22个不同的图层。

下面显示的例子是一个线性工作大致完成后的状态。图的实际尺寸应该是12英寸。

第二部分：使用Photoshop后期绘图
在所有的线条设计工作完成之后，接下来进行颜色绘制阶段。在这个阶段需要参考图片。第一步复制所有的平面图。下面显示的图像是这艘船阳光浴室的砖地。所有坚硬的地板表面都是用矢量做出来的。

这些Illustrator的矢量文件被自由变换工具转换成正确的主透视图，然后再把他们输入到Photoshop中。

依据客户提供的地毯图样，我运用Photoshop和Illustrator把他们制作出来。地毯的材质是用Photoshop中的像素化和模糊这两个滤镜表现出来的。

地毯的图案被按一定的顺序摆列成模板，陈列到他们正确的位置上。然后用Photoshop的自由变换工具把整个甲板地面转换成透视平面。

最后的绘图阶段我们得到了一个包括29个图层和6个线层的大小为988M的文件。这个文件精简成包括14层的更易于管理的文件，用来提供给客户。








查看最终完整效果大图