魚 » 設計記

情迷Chocolate

Tue, 20 Jul 2010 07:39:59 +0000

“Chocolate”这个词可以让人联想起许多词，如：黑，白，牛奶，热，甜，辣等。但有没有尝试过和网页设计联系在一起？我们做了。我们尝试着去搜索任何和“Chocolate”相关的网站，并且发现这个搜索结果是值得收集以及展示的。然而有趣的是，你永远不会偶然发现这些结果里面的其中一些网站。所以下面的内容将可以给你提供一个独特的视角并且能刺激您的创意源泉源源不断。

正如人们所期望的，“Chocolate”的网站经常使用的开胃褐色为主色。如果你花时间看看它的配色，你会发现有很多的组合工作得很好。除此之外，每个站点都是特别的而且都会根据它的内容而有着自己的个性的。

我们来轻松随意地探讨以下网站的设计特色。其中有一些是flash展示产品的好例子，有些很优雅，有些则很艺术，不过，他们有着一个共同点特点：它们都有着让人着迷的甜味

“Chocolate”在网站设计的异同:

我们发现在这些与“Chocolate”相关的网站中，似乎有三个共同的特点一次又一次的重现着。它们就是，大多数的网站都是用了水平的导航，漂亮的产品以及内容图片，以深褐色为主结合其他明快和强烈的颜色作为搭配。

CharlesChocolates：
明亮的蓝色使得网站的颜色搭配显得有趣和新鲜，但厚重的页脚导航才是CharlesChocolates网站真正出彩的地方。

这一类的导航模式已经很普遍并且方便，不过，我们也注意到有一些极少不常见的导航菜单。有趣的是，我们看到的是3两个死板沉闷的模板。显然，大多数“Chocolate”网站和“Confectionery”网站的设计者的确很在意他们的品牌以及产品在网络上独特的展示方式。事实上，很多网站尽量做到娱乐性，营造一个用户有参与的，互动的，并且难忘的体验。当然，这并不包括每一个行业的网站，譬如，医疗网站。

水平顶部导航：

因为“Chocolate”网站有着鲜明突出的产品和原料的图片，于是饱满了网站很大一部分的布局以及视觉效果，所以，水平的顶部导航来得十分合适。导航的选项一般有5个到9个不等（不包括每个选项的下级链接选项）。通常链接会去到“Chocolate”的描述页面，售卖“Chocolate”的店铺的介绍页面，以及用户可以订购“Chocolate”作为商务礼物、婚庆礼物的“礼物”页面，等等。有时，导航链接也会包括一些食谱的选项。

Jeff de Bruges：

Godiva Chocolatier：

Jacques Torres Chocolate：

TCHO: Buy Dark Chocolate and Gifts：

Chocri chustomized chocolate bars：

Daskalides：

Cadbury: Cadbury Chocolate：

漂亮的产品以及内容图片：

“Chocolate”网站上的产品摄影图片的质量是非常高的。通常以横向或者纵向的大图为主导。事实上，“Chocolate”尤其是美味的“Chocolate”在视觉上是很吸引的。而深入地去探究它也是非常美妙的事情。因此，这对于一个售卖“Chocolate”的网站来说，很多设计师都会选者用令人垂涎的形象来包装“Chocolate”。

Festival Internacional de Chocolate de Obidos：

Green & Blacks Organic Chocolate：

Dagoba Organic Chocolate：

Mindy’s Hot Chocolate：

Patrick Roger：

Toblerone：

Haigh’s Chocolates：

Chocomize：

深褐色为主结合其他明快和强烈的颜色的配色方案：

很明显，深褐色色调主宰巧克力的网站。然而搭配方案中往往会加上有跳跃的鲜明的颜色，例如，红色、绿色等等。一般来说，大多数“Chocolate”网站都会使用暗色调，并经常会使用与主题相关的平铺或者是摄影图片作为背景。

Dove Chocolate：

Divine Chocolate：

Valrhona：

Hemmankonditor：

Promise Me Chocolate…：

The Cocoa Tree：

Brookside Foods：

独特的设计：

某些“Chocolate”网站使用了非常鲜明的设计元素和非常规的导航来刺激用户的眼球。如下的一些例子，在这种情况下，给站长还有用户带来的都是难忘的体验。

Max Brenner：

Bloomsberry：

Pierre Marcolini：

Wispa：

Chocolate Research Facility：

更多的“Chocolate”网站例子：

zchocolat：

Kommunarka：

Ps：以上是自己翻译的，凑合着看。

想看原帖的，在这里。

剛剛完成的專題設計

Wed, 27 Jan 2010 01:33:33 +0000

資料就只有一份工單（如下），一堆人頭和一堆樓盤圖，

還有一個excel表寫明經紀人和樓盤鏈接。
還有一個他們原來公司制作的廣告banner，如下：

一開始思維定勢，用了紅色。
一開始內容太少，只有人頭和樓盤圖，
于是我自作主張地在右面添加了，“樓盤資料”和“投資分析”這兩項，
因為只有頭像和樓盤圖，專題根本就沒有可看性，含金量也直線下降；
希望通過溝通，他們分公司可以幫忙提供
做了下面這個版本，自己其實也覺得這樣的紅色比較刺眼…

后來把設計稿給了iam分公司看過后，他們愿意提供更多些信息，
在他們搜集信息的同時，制作了金色的這個版：

最后，確定用金色的這個版本。
在專題上線的同時，做了專題的焦點圖：

專題鏈接：http://html.mytophome.com/gz/bazhu/
嗯，如果文字能更飽滿些就更好了。
(童鞋們這個有版權的哦。)

戴着锁链跳舞–【转】

Wed, 02 Sep 2009 19:18:54 +0000

戴着锁链跳舞作者：小li

　　在网页设计初期，我们会先收集大家对设计方向的期许，我们经常收集到这样的建议：
　　产品经理：要易用，要简洁
　　设计总监：要特色，要亮点
　　部门经理：要大气，要统一
　　……

　　设计师要三头六臂，左右逢源，顾此又顾彼。
　　首先，对网站而言，视觉和体验是一体的，相辅相成携手共赢。视觉上的统一要求体验上的一致，体验上的创新也要求视觉上的突破，然而某些需求的字眼本身就是自相矛盾或难以捉摸的，如何又简洁又特色又兼顾统一？对工具类网站的设计，大方向是力求简洁精炼的，作为辅助手段引导用户操作，在易用性和美观性之间拿捏火候，恰到好处的展现出来。
　　产品上线，无论好坏，就已持有自身固有的特色呈现给大家。我们看搜索类网站：google、baidu、soso、yahoo、包括设计感十足的bing，虽然各雷同产品的雷同设计比比皆是，可圈可点，但每个产品仍努力不懈的追求标新立异，无论是从体验还是设计都希望跳出竞争对手的圈圈，做出差异化，拉开距离。

　　再看SNS类网站：

　　对于信息量大，实用性强的此类网站要求轻松入门，低成本高效率的满足用户需求。可各个产品的属性雷同，怎么更吸引用户停驻呢？一方面是功能的完善和拓展，像客户端的体验一样便捷（facebook以此闻名）；一方面是设计的趣味性，在细节体验上呵护用户的感受（白社会乃后起之秀）。　　每个产品要持有自身的特色，才能脱颖而出。
　　QQ校友和城市达人在产品规划初期就保持了视觉的统一性，强化腾讯SNS类产品的品牌特征，在今后不断的优化过程中，更注重用户体验细节上的趋于统一。

　　回想一下5年前的设计，我们大多接触的是产品海报式的宣传网站，将传统技法和网页设计结合，光效,水墨、纸艺等等，如今更是发挥的炉火纯青

　　可今天的产品官网往往不允许这样大张旗鼓的设计，这其中考虑的因素很多，统一性、易用性、流量、广告收入等等等等。。。在种种束缚的条件下如何展示个性化，既留住目标用户，又吸引潜在用户，让他们在体验的过程中不失乐趣?这是对网页设计师最大的挑战。
　　smashingmagazine上有很多流行趋势分析的文章，包括很多设计原理的追溯，不得不佩服老外的归纳总结能力和有板有眼的理论化探讨，结合不同的实际案例，我们的设计师都在有意无意的在尝试一些能够使页面舞动的小技巧：
　
页面细节修饰
　　首先是透明效果的应用：
　　常见于导航或者页头和页尾，及banner效果等　　范例：QQ秀导航区

　　范例：microsoft产品展示区

　　除此之外还有渐变、光效、模糊等等技巧：
　　模糊效果常结合透明一起使用，营造一种纵深的感觉。
　　色彩光谱的渐变，更吸进人们的注意，方法简单并且具有很强的视觉冲击力。　　范例：http://www.realmacsoftware.com/

　
产品展示区域　　首先介绍多媒体的应用
　　随着宽带的发展，越来越多的丰富内容在线上展示，很多产品借助多媒体方式来展示他们的产品特性，全方位快捷有效的传达内容,这应该是产品欣赏和功能演示的最佳方式啦　　范例：microsoft产品

　　可惜目前国内还比较少见，毕竟宽带的普及有限，另外也不是所有人都喜欢观看视频。但多媒体展示确实开启了一片新天地。
　　除此之外，我们还可以在网页中内嵌全flash的效果展示，对图文动画的配合要求很高。
　　范例：http://www.bkwld.com

　　如果你的产品经理全部毙掉了这些酷炫的表现手法，要求网速第一。那么还可以将展示图片做到淋漓尽致的精美，让它成为烘托整个网站的点睛之笔。
　　范例：CDC内部资源网

　
增强对比
　　有时候要吸引用户关注页面上的重点内容，高亮出这些模块或点缀，采用色块对比不仅仅是丰富页面视觉效果，更重要的是增加页面的导读性：
　　范例：wordpress

　　范例：CDC内部期刊

　　类似的细节修饰，还有其他的表现方式，比如打破传统的手写体，字体艺术博大精深，不同的字形带来不一样的感受，增加一些有趣的细节，强化对比：

　
排版技术
　　网页设计中越来越多的采用传统工艺（印刷技术），从模块排列到图文搭配，甚至到文字的对齐方式都与传统印刷技术形似。栅格化设计日益普及，尤其对于多栏布局，栅格用来保证结构的平衡和层级的划分。
　　基础网格的简单示意：

　　范例：

alt="" width="729" height="323" />
　　每一个新的idear总伴随着对固有模式的挑战，打破原有的束缚，折衷考虑创意与可用性之间的平衡。我们的设计师在不断的探索和学习，研究每一款产品的特色，吸纳他们的亮点，提升对细节的把控能力。
　　页面上能够舞动的小细节很有很多，诸如此类的惊喜不断，比如
　　moko的卡通人物（http://www.moko.cc）
　　designmind的图片倒角处理（http://designmind.frogdesign.com）
　　yoho上超cool的大头像（http://www.yoho.cn）

　　等等等等，结合自身的网站特点，挖掘出更精彩的亮丽。设计师应该不断提升敏锐度和想象力，用心体会每一个优秀网站的细小设计。就不会苦于无从下手从哪里完善细节啦！
　　参考网站：www.smashingmagazine.com