2008/10/15

走出千篇一律的网店装修(二):使用属于你的色彩

        纵观目前的网店装修,无论易趣也好,淘宝也好,拍拍也罢,似乎都在走清一色的日韩风潮,可爱的卡通人物,闪闪发光的背景图案,花花世界,乍一看活泼可爱,靓丽多姿,可是时间长了不免感到视觉疲劳。更何况,这种可爱的日韩风格并非适合所有的店铺。很多店主因为单纯的看到店装模版的好看,而忽视了店铺的经营内容,就直接将模版套在了自己店铺的身上,好比看到了一件非常可爱的公主裙,买回家穿在了年迈的长者身上。因此,店主在设计时要将店铺的经营宗旨、商品种类和目标客户群结合起来,创造最适合自己的店铺风格。店铺装修永远没有最好的,有的只是最适合的。而只有适合了,看上去才会感觉更近乎完美。

        今天我先来谈谈店铺的色彩。

        (以下部分内容参考《网页色彩密码》这本书)

        首先,需要针对不同的店铺来进行不同的情感创意,是抓住顾客最有效的方式之一。

        色彩与人的心理感觉和情绪有一定的联系。色彩的直接心理效应,来自于色彩的物理光学刺激,对人的大脑与生理发生的直接影响和变化。心理学家发现,在红色环境中,人的脉搏会加快,血压有所升高,情绪兴奋冲动。在蓝色环境中,脉搏会减缓,情绪较沉静。其实心理学已从哲学转入科学的范畴,我们必须要注重色彩心理的效果和联想的表现。总的来说,人们在日常生活中既需要暖色,又需要冷色,只有这样,我们的生活才能达到心理和情感上的平衡。

        在网店的色彩表现上也是如此,冷色与暖色会带来其它的一些感受与心理的变化,例如:地域感、季节感、性别感、重量感、湿度感等。黄色表示收获的季节,蓝色表示冰冷的冬天;暖色偏重,冷色偏轻;暖色有密度强的感觉,冷色有稀薄的感觉,色彩除了冷暖的变化外我们在这里更关注的是色彩的心理联想与其它变化,如暖色联想到阳光、火焰、亲人等。冷色联想到冷静、文雅、保守等,因为不同的色彩会表达不同的含义,参看下表:

图片 1


        1. 冷暖色彩对人的情感表达
 冷暖色彩给人的心理情感上带来的变化是很丰富的。客观地讲,色彩本身并无冷暖的温度变化,引起冷暖变化的原因,是人的视觉对色彩冷暖感觉引起的心理联想。


        (1)暖色:用户见到红色、橙色、黄色、红紫色、橘红色等颜色后,马上联想到火焰、太阳、炉子、热血等物像,感觉到温暖、热烈等信息。

        销售儿童用品的店铺可采用暖色调来设计,可以给人以一种可爱温馨的感觉。

图片 2

        暖色具有向外辐射和扩张的视觉效果,以暖色调建立起来的网店也很鲜艳夺目,散发出一种照耀四方的活力与生机。例如销售女性商品的网站,采用红色做主调,加之诱人的肤色,给人一种心动的感觉。

coldwatercreek


        销售和休闲、娱乐、运动、节庆用品相关的网店设计也可以暖色调为主,给人心理以“温暖感”和“热烈感”,总之要以与人的心理需求相吻合,引起点击者的情感融入和思想共鸣。


champion

shoes

        (2)冷色:用户见到草绿、蓝绿、天蓝、深蓝等色后,很容易联想到草地、太空、冰雪、海洋等物像,产生广阔、寒冷、理智、平静等感觉。蓝色或绿色是大自然赋予人类的最佳心理镇静剂。

        销售医疗用品、保健品等的网店就可以使用蓝色作为主色调。

PlanetRx

        夏天的浅冷色系明朗而富有青春朝气,为年轻人所钟爱;深蓝色系沉着、稳定,为中年人普遍喜爱的色彩。其中略带暖味的群青色,充满着动人的深邃魅力,藏青则给人以大度、庄重印象。当然,淡蓝、淡绿、蓝白色也是女士的钟爱色彩。

elegance


        像销售夏季用品、职业女装、淑女服饰用品、中老年用品等的网店均可以使用这些浅色系。

appleseeds

        2.色彩对人的情感倾向性表达
 网店所使用的色彩,会使用户产生联想,诱发各种情感,使心理发生变化。但使用色彩来激发人的情感时,应遵循一定的规律。色彩的冷暖感觉,不仅表现在固定的色相上,而且在比较中还会显示其相对的倾向性。
        心理学上的研究认为,在设计食品网站时,不要或少用蓝、紫色彩。宜用橙色、桔红色,可以使人联想到丰收、成熟,从而引起用户的食欲并促成购买的行动。

t-yokogawa

         化妆品网店一般倾向淡雅、浅色调或者带有色彩倾向的灰色,给人一种柔和陶醉的感觉。

fragrancenet

        3.性别的色彩表现
        你的商品销售对象是男同胞还是女同胞?特定的颜色会让你的网店一目了然。

        (1)男性色彩的表现
 一般来说,形容男性应该是刚强、果断、勇猛、坚韧帅气、英俊潇洒、坚毅、义气、正直、正义感强、强壮、豪放等词语来修饰,符合男性身份的色彩也要体现这些特征信息。男性用品类网店应充分体现男性的丰富内涵,为男土独特而深沉的内心世界做出最好的形象注解。一般而言,在视觉上采用灰色系列、深色系列、对比强烈的色彩等是可行的,很少采用清淡的色彩和对比不明显的色彩。

bridge55

        (2)女性色彩的表现
        亭亭玉立、美丽、温柔、秀外慧中、高雅大方、英姿飒爽等,这些都是来形容女性的。女性色彩一般比较柔和亲切、温顺、雅致、明亮。
 紫色无论深浅,都是具有女性魅力的色相。紫色的华丽、高贵和神秘无人能及,众多设计师对紫色似乎总有着格外的偏好,纷纷选择以代表着强烈欲望的紫色来装点女性网店。
        浅蓝色、浅红色,也是设计师们经常采用的女性流行色。给人一种心胸开阔,祥和博爱的感觉,让你情不自禁地想去触摸、感知和幻想。淡蓝或者淡绿、高雅的淡灰系列、淡黄色、淡红色都可以用来表现女性的美丽。

anntaylorloft

         4.年龄的色彩表现
        网店除了根据自身的产品、目标群体的性别来进行颜色选择外,还需要考虑目标群体的年龄。

        (1)婴儿、儿童色彩的表现
 出生不到一岁的婴儿,由于视网膜没有发育成熟,要避免强烈的色调刺激,基本采用柔和的色调来呵护。婴儿家长往往也有这种心理,所以婴儿用品网店多采用明亮柔和的色调。活泼的性格、充满好奇心的特征,使儿童对纯色的刺激更感兴趣。孩子们喜爱单纯的颜色,红、橙、黄、绿都是孩子们的偏爱,所以儿童用品类网站大多采用这类纯色调。

hotcake

        (2)青年色彩的表现
 青年是社会未来的接班人,青年色彩多为表现阳光、活力和青春的感觉,从充满活力的纯色到强壮有力的暗色,都是年轻人的色彩。城市里的年青人也偏爱冷色,社会规范的约束和信息资源的丰富促使年轻人快速成长起来,也慢慢开始倾向于理性成熟的色彩,当然年轻人的色彩还是要艳丽一些,这样富有朝气。

gap


        (3)中年色彩的表现
 中年人是社会的主要建设者,以中年人为表现内容的网站,色彩更倾向于营造宁静恬淡的生活氛围。中性色彩的各种系列适合成熟的中年人。色调大方、稳重、恬淡、温和,是成熟中年人魅力的色彩表现。

        (4)老年色彩的表现
 暖灰色调是老年人心理上的一种钟爱色彩,也许是因为老年人晚年喜欢平静、健康、素雅的原因。健康、喜庆、热闹,在平静素雅的色彩中加入少许暗红色、中黄、墨绿色更能博得老年人的喜爱。

走出千篇一律的网店装修(一):使用div+css

看到很多介绍店铺装修的文章,的确很有启发。不过就我个人人为,这些设计走的都是千篇一律的套路,而且更多的是模仿淘宝的店铺而来。

其实,像易趣、拍拍这样的店铺本身具有很多自身的优势是淘宝所没有的,其中最吸引我的一点就是他们对div+css的友好支持以及更开放的自定义页面平台。易趣、拍拍的卖家应该更好的利用这个平台创造出更具个性、更为专业的店铺。

今天我先讲一下div+css的设计模式比table的设计模式更为先进和独具优势的地方。

对于目前多数自己进行网店装修的买家来说,大多数人的做法基本都是先在ps里面做好网页样式,然后进行图片切割,然后直接另存为html格式或者将切割好的图片放到自定义的table里面。这种方法没有错,但是,table是很多年前的网页设计主流应用模式,它是基于当时的互联网技术和标准的。但是随着网络的迅速发展和互联网标准的不断更新,table已经成为了一种过时的应用技术,它的优势远远落后于div+css技术。

1.div+css大大缩减页面代码,提高页面浏览速度,缩减带宽成本。就易趣卖家而言,快速的加载速度是对客户的一种更为人性化的体验。

2.结构清晰,容易被搜索引擎搜索到,天生优化了seo。虽然现在针对网店有很多的搜索引擎优化的方法,但是基于网页本身的这种最基础而且直接有效的优化方式是易趣卖家绝对不应该忽视的。

3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。虽然易趣的店铺涉及不到城百上千的店铺,但是即使只有4、5个页面能够迅速的修改完成也是一种效率的提高。

4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了,有了CSS,我们不再需要用FONT标签或者透明的1
px GIF图片来控制标题,改变字体颜色,字体样式等等。

5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。

6.提高易用性。使用CSS可以结构化HTML,例如:<p>标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。

7.可以一次设计,随处发布。你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。

8.更好的控制页面布局。

9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,你可以减少未来网页无效的可能。

10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking),这对易趣卖家来说绝对是个利好。

11.Table
布局灵活性不大,你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。

12.Table
中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div 更能体现样式和结构相分离,结构的重构性强。

13.在几乎所有的浏览器上都可以使用。要知道,不是所有的人都在使用垃圾IE,现在更多的人都在使用更加高端,更符合互联网标注的浏览器,如firefox、opera和safari等,易趣的卖家千万不要因为页面浏览出现问题而丢失这些重要的客户。

14.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面,这也是为什么我会强烈推荐使用div+css,要知道单靠图片拼接出来的页面加载速度过慢,会使客户失去等待的耐心,从而转到其它卖家那里。

15.使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

16.你可以轻松地控制页面的布局

17.你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。



好了,看到div+css有如此多的优势,你是否决定试一试了呢?



 最后,我还是想提醒一下易趣、拍拍的卖家,不要受淘宝网店的影响,应充分利用平台的自身优势,充分发挥你的想像力,让你的店铺更具个性和特性。

2008/10/14

15款检测网站流行度的工具

作为一个网页设计师或开发人员,当你正在建设网站的时候,首先应该对类似的网站加以分析来帮助你对设计和开发策略做决定。清楚的了解类似网站的运作情况将会对你的设计元素,网站特性以及网站内容提供参考和灵感。

本文将向你介绍15款高质量的、免费的、简单的网页工具来帮助你详尽的了解一个网站。

1. Yahoo! Site Explorer

Yahoo! Site Explorer - screen shot.

Site explorer 是一款基于search API的反向链接查询工具,人们可以通过它查看哪些URL已被Yahoo!搜索收录或是提交还没被收录的URL。该工具可以通过统计一个网站被链接的数量来显示该网站的流行程度。

2. Compete

Compete - screen shot.

Compete 是一款基于网页的分析工具,可以帮助你同时比较3个网站的通信量统计以及趋势。它可以评估一个网站的唯一访问者数量和页面浏览次数以及网站的流行度增长率。

3. Quantcast

Quantcast - screen shot.

Quantcast 不仅可以统计网站流量,pv值等,它能够提供一份更加完整的访问者报告,甚至可以统计访问者的性别,年龄和受教育程度。

4. Alexa

Alexa - screen shot.

成立于1996年的Alexa是目前最流行的网站流量排名统计服务商。它能提供网站的流量统计,并通过这些数据进行一系列的排名。

5. Feed Compare

Feed Compare - screen shot.

测试一个网站流行度的有效途径就是查看该网站的RSS的订阅量。如果一个网站使用FeedBurner(一款主流的RSS订阅服务商),你可以使用Feed Compare查看网含的订阅趋势并且同时对4个网站的订阅量增长率进行比较。

6. popuri.us

popuri.us - screen shot.

popuri.us 是一个提供网站流行度、网站综合信息在线检测查询服务的网站。使用非常简单,无需注册,只要输入你想检测的网址即可。帮助你查询出网站的RANK值(比如Google PR、Alexa Rank等)、在网络书签网站中的被收藏连接数(比如del.icio.us等)及RSS阅读器中的订阅数(比如Bloglines等)。另外,它还提供了一个Widget应用,可在你的网站上直接显示Google PR、Alexa Rank等值。


7. socialmeter

socialmeter - screen shot.


socialmeter是一个网页链接分析工具,通过输入一个网页地址就可以得知此网页在一些主要的社会性网站中的链接情况,如Digg、del.icio.us、Google、Technorati和Yahoo My Web等等共11个网站。可以用来查看自已在这些大型网站中的链接情况。

8. TweetVolume

TweetVolume - screen shot.

另一种检测网站流行度的方式就是查看Twitter的人们是否在谈论该网站。TweetVolume 可以通过输入关键字和词来查看这些内容被多少Twitter使用者提及。

9. Quarkbase

Quarkbase - screen shot.


Quarkbase 是一款综合的网络工具,可以显示一个网站的许多信息。它有一款“Social Popularity”标签可以显示一个网站在一些社会媒体网络如Digg, Stumbleupon以及Delicious上的流行度相关信息。


10. BlogPulse Profiles

BlogPulse Profiles - screen shot.


如果你对一个博客网站的相关信息感兴趣,logPulse Profiles 这款工具可以帮助你。它是一个简单的网络应用,提供博客的排名,被其它博客提及的频率以及其它相关信息如该博客的文章发布频率,与其类似的博客等。


11. Technorati Blogging Central

Technorati Blogging Central - screen shot.,


Technorati是一款占有主要地位的博客搜索引擎。它的Blogger Central allows允许你查看一个流行博客在世界范围内的排名。Technorati是通过一个博客的反向链接来统计博客流行度的。


12. Statbrain.com

Statbrain.com - screen shot.

Statbrain.com 是一款十分简单的工具,用来统计每天的页面访问量。


13. Cubestat

Cubestat - screen shot.

Cubestat 也是一款简单的网络工具,提供一个网站的日访问量。不过它的一个独特的地方就是它有一个网站价值评估(美元),价值越高,说明网站越流行。


14. dnScoop

dnScoop - screen shot.

dnScoop 是一个网站相关信息,网站价值查询工具,能够查询的内容包括:域名年限,Google Pagerank,所有指向此域名的网页数,Alex信息,主机IP信息,还可以查看此IP上面其他停放的网站等。


15. WebsiteOutlook


WebsiteOutlook - screen shot.

WebsiteOutlook 通过对一个网站的估值、日浏览量以及网站收益等来判定网站的流行度。

2008/10/13

介绍6款基于网页的图像编辑工具

基于网页的图像编辑器相对于其桌面产品具有许多优势,最明显的一点就是允许你在任何一台装有浏览器的电脑上使用该图像工具。在多数情况下,你可以在线保存,而无须安装桌面程序,并且和其它一些网络服务具有接口,如Flickr,Picasa等。本文将向你介绍6款好用的、免费的图像编辑工具,它们可以替代诸如Adobe Photoshop或GIMP这样的桌面产品。

1. Pixlr

Pixlr - screen shot.

Pixlr是一款功能强大,基于flash,和Photoshop具有类似用户界面的图像编辑工具。Pixlr 提供了API接口让你可以将Pixlr和你的博客、网页应用或者网站直通,不过该API接口还是很早以前的。Pixal具有一款智能魔棒工具,可以自动选择相同或相邻的像素(和Photoshop的魔棒工具类似)。

2. Splashup

Splashup - screen shot.

Splashup是一款多功能的图像编辑软件,它整合了一些流行的网络相册共享服务商,如Flickr, Picasa,以及Facebook,允许你远程访问你的照片。Splashup包括一些超酷的功能,如图层混合模式,从网络摄像头抓取照片,以及多种图层效果和滤镜。

3. Phoenix

Phoenix - screen shot.

Phoenix是Aviary下的一款功能强大、基于网页的图像编辑工具,也是桌面图像编辑软件的最大竞争对手。你可以通过官网上的教程列表来领略这款工具的魅力。你需要进行注册来访问Phoenix,不过这并需要多少时间,而且还可以访问其它的Aviary工具和服务,如PeacockToucan

4. pixer.us

pixer.us - screen shot.

如果你正在寻找一款能够满足你进行简单照片处理的工具,你可以查看pixer.us,一款免费的,基于网页的照片编辑工具。它有一个相当直观的简易界面和一些使用的照片编辑功能,如剪裁、大小调整以及旋转等。它还具有一些颜色调整的选项,如饱和度、亮度、对比度等。你可以将你的照片存储成4种常用的数码照片格式,PNG,JPG, GIF以及BMP。

5. FotoFlexer

FotoFlexer - screen shot.

FotoFlexer是一款免费的,基于网页的照片编辑工具,具有相当丰富的功能,不过使用起来非常简单。你可以上FotoFlexer的演示页面查看它的一些实用功能。当然,FotoFlexer也具有一些非常出色的照片处理功能满足使用者的基本需求,如剪裁、大小调整以及旋转。它还整合了一些流行的网络服务商,如Flickr,Picasa, Photobucket, Facebook以及MySpace等。

6. SUMO Paint

SUMO Paint - screen shot.

SUMO Paint是一款免费的在线图像处理工具,你可以进行编辑,也可以进行全新的创作。它有一款图形工具可以让你绘制出许多独特的形状,笔刷工具可以绘制出难以想像的高质量图像,变形工具可以让你按比例缩放、移动以及旋转图像。当然,它还有许多其他的功能