2010年07月31日

转载:http://www.mobanku.com/blog/post/34.html

网页模板设计中的字体是个特殊的个例,要符合显示器屏幕和技术的规范,就必须清楚网页字体的使用问题,在【浅谈网页设计规范】一文中我们讲过像素字是怎么回事。这次我总结了关于字体在网页中的规范性问题。特别对侧栏菜单的字体设计进行详细的分析,包括对比行距与段距各种设置对于侧栏菜单设计的影响。本文会让你看到很多字体方面的规范与侧栏菜单的设计。

网页字体分为自由字体,和“无”像素字。自由字体顾名思义,就是任意选择大小和字形,以艺术的排版方式出现,设计师可以自由发挥。而像素字体充满了包豪斯式的数字美感,段与段之间的距离,行与行之间的距离,惊喜到不同数字塑造不同的节奏,紧凑或专业,浪漫或严谨,这要看对数字比例的不断试验。

  • 自由的字体使用范围

1 – 押题图片中用字

例如下面这套建筑公司网站模板


2 – 广告图片中用字
备注:押题图片在套用FLASH的情况下,按套用FLASH的规定使用字体。例如下面这套媒体公关网站模板:

 

  • “无”字体(网页像素字)的使用范围:

一般称为网页像素字,他们的特点是在电脑屏幕上这种字体最清晰,利于技术控制。像素字的设置方法是“宋体”“无”。(如下图)

(由于PS版本和图片像素问题,几乎每隔段时间PS的字体大小就出问题,9-14磅不等。最基本的参照物就是桌面状态栏的字体大小,这个大小我们称为最小磅)

  1. 导航菜单中的字体     导航菜单使用比最小磅大一磅的字,例如正文是9磅,那导航菜单字体就是10磅加粗。
  2. 侧栏菜单中的字体      行距和段行距各常见数值对比如下图:

            

其中黑点的制作方法:

实例看看各种侧栏的表现形式:

  • 一级菜单 在大类下有一级分类,具体为:产品列表(总类)  —  专业音响、专业功放…(一级)

段行距为24,行距为18点的侧栏设计,在总类和一级菜单有两种表现方法 ,无论是加入色块还是加入图标,只要总类和一级菜单区别出来即可。而且,总类属于标题,设为粗体更好识别。这类型侧栏风格偏:散漫、自由、亲和


 

下图的侧栏设计直接在所在栏目位置做出标示,清楚明了。行距为18点,这类型侧栏风格偏:亲和、清新


在所在一级栏目加入并不抢眼的色块,调和差异又起到点名栏目的效果,这类型设计比较常见,比较适合严谨、讲究专业和亲和力的企业。行距和段距都有不同。特别是第一个侧栏设计,行距很大,大概是在32点。这类型侧栏风格偏:专业、亲和


加入抢眼的色块适合于强调特色、强调硬朗的企业,例如重型机械、设计行业、CSS真人野战娱乐活动、野外活动等。这种网站模板类型侧栏风格偏:个性、严谨:

  • 二级菜单 在大类下有二级分类,具体为:解决方案(总类)  —   虚拟化(一级) –  应用虚拟化、桌面虚拟化、服务器虚拟化(二级)

第一个侧栏菜单有三种行距段距,总类和一级类别间有28点,而一级类别与二级类别间有18点,二级间的行距则是14点。这样的设置显得错落有致,菜单的一二级分类很清楚。 这类型侧栏风格偏:专业


 这类型侧栏风格偏:专业


 这类型侧栏风格偏:专业


 这类型侧栏风格偏:专业、亲和


  这类型侧栏风格偏:专业、严谨


   这类型侧栏风格偏:专业、严谨

2010年07月29日

设计师做企业网站是在为企业服务,首先为企业考虑用户的需求、引导用户的行为。美学上的设计是加强这些需求的体现,而不是仅仅凭借设计师虚妄的“感觉”行事,设计前调查在每做一个新行业的时候都做,本文就讲述,这些调查的目的是什么,如何去总结这些调查,转化成设计的要素。有了这方面的调查,能让你更了解企业、了解客户。

在做一套网站模板前的设计调查步骤包括

(1) 了解企业产品  —  通过搜索引擎查找产品关键词,了解该产品所属行业、功能、特色、产品使用范围,特别是使用人群的调查会影响你的设计。
目的:确定网站的图片素材方向

例如下面从产品与用户方面都考虑的房地产公司网站模板设计:,房产公司面对的用户是高收入人群,相当一部分人还具有一定的学历素质,年龄在26-45岁左右。购置房产是一件很慎重的事情,他们希望得到的是专业以及信任。这款模板的设计方向就是除去偏激的色彩,强调的是专业与希望。并且在押题图片中使用了小孩吹蒲公英的图片。打造一个有实力,有关怀的房产企业。首页内容量大,属于中型网站,这是偏介绍型的企业网站。

http://www.mobanku.com/cssdiv/01426.asp

(2) 通过同行业网站 分析设计方向  —  通过搜索引擎查找相关企业网站,在打开搜索引擎第一至第二页的网站,关闭设计相对差的网站后剩下10-20个网站。

目的:总结首页结构大小的分布。
1 – 颜色倾向(例如:工业–清爽严谨蓝色      设计公司–色彩强对比      农业 — 希望的绿色    机械 – 严谨专业的灰蓝)

机械网站模板,采用了不锈钢的灰色与专业的蓝色搭配。强调了不锈钢这种材质的行业属性,加强设计的感官。


2 – 首页栏目内容设置(查找出该行业首页最常展示的栏目,每个行业的产品与服务不同,诉求也不相同,要站到企业和用户的角度考虑问题)

(3) 结合相匹配的网站截图  —  在截图的基础上,结合同行业网站分析进行设计,页面不够长或太短、等问题相应改动,结合实际操作调整。

2010年07月23日

这篇文章将用茶叶网页模板实例对茶叶行业进行全方位分析,包括茶叶企业站、商城站。他们各自的特点和设计风格决定你要设计一个什么样的网站。

一:茶庄、茶叶销售公司的企业站

  • 特点:首页内容量偏少
  • 设计风格:营造主题氛围(古典传统、绿色、古朴、豪华、现代、雅致、等等…) 

             首页内容形式:公司简介 + 最新产品       

             设计风格:古典雅致

这款茶叶网站模板在产品展示那块设置了滚动动画,可以在首页展示更多的产品,在古典的设计风格里多了点现代的动感元素。

二:茶叶商城

  • 特点:首页内容量大,产品展示多。
  • 设计风格:营造主题氛围(古典传统、绿色、清新、古朴、豪华、热情、等等…)

             首页内容形式:公司简介 + 新闻 + 最新产品  

              设计风格:热情,清新活力又具有亲和力

这款茶叶网站模板的菜单条采用了现代的橘红色,这个色彩令人感觉振奋,加入绿色的调剂,缓和了激动的程度显得非常有亲和力。多行产品展示,激发用户的购买欲望。

三:茶叶周边(茶叶包装、茶具)

  • 特点:首页内容量偏少
  • 设计风格:营造主题氛围(古典传统、绿色、古朴、豪华、等等。。。)

 

             首页内容形式:形象图片 展示      

             设计风格:古朴典雅

这款茶叶网站模板强调的是典雅的设计氛围,适合强调与用户沟通感情、公司形象传播的企业网站。

Tags: 茶叶网站模板  设计分析  http://www.mobanku.com/blog/post/25.html

2010年07月22日

企业网站模板设计最重要的是产品展示这部分,如何让一个企业的产品丰富多彩的展现在浏览者前面,进而给访问者留下印象,这个体验非常重要。

下面是一个国外网站的产品展示部分,截图分析:

点击 图中 1 如下图:

以上图标示的3点仅仅是一个产品列表页面,但用户体验很好,一下子让我记忆很深刻。

上面仅仅是一个企业网站的产品列表页分析,以后会逐步把企业页面也借鉴分析过了。

相关阅读“关于我们”页面的各种常见设计形式

转自:http://www.mobanku.com/blog/post/22.html

2010年07月18日

网站模板设计师无论他是出身平面还是程序,还是半路出家,对一些行业的设计多多少少还是有死角,像日常生活的视野里,很难明白有机试剂和无机试剂的区别是不是就一个是有另一个是无。做一个陌生行业的网页模板前还是对该行业做个高清无码攻略的好:

这次做灯饰网站模板设计前准备:

A- 搜索关键词“灯”

为何不详细指定某种灯的原因是,广泛的“灯”能把各种各样热门的细分产品列在搜索引擎结果的前几页,这样你就知道到底是做LED灯泡还是路灯,或者工艺灯了。

B-灯具的总类粗分:

1-小型灯具(办公室照明、家居照明、工业照明)

2-大型灯具(户外照明:园林景观灯、大型建筑景观灯、路灯、荧光灯)

3-灯具周边、灯具配件(灯头、灯泡、灯座等等)

C-灯具的设计风格:

1-小型灯具(办公室照明、家居照明、工业照明)

办公室照明:一般这类型产品推向的是企业、写字楼,企业形象要求要专业严谨,另外一点就是科技感。办公室照明的外观往往都是比较严谨的,很少出现卡通活泼的外形,他们的产品也就决定了网站的形象:专业严谨。有两种风格比较适合:

一:现代时尚风格

现代风格首先给人的印象是某个领域的先锋,可能是产品造型、企业理念、或者材料,先锋是具有冲击力的。

所以在设计可以大胆使用大面积的灰色和黑色,搭配明亮的彩色(红、黄、绿等亮色),这个对比的颜色一般是延续企业LOGO的主色调。整个网站很现代时尚中带有商务办公的严谨气氛。

二:正统、平实风格

这类型风格迎合的是口味比较传统的客户,不会在网站中出现太多现代风格的设计(例如强烈的字体排版、颜色对比等),网站强调的是平实的令人信任的企业形象。

 

 2-大型灯具(户外照明:园林景观灯、大型建筑景观灯、路灯、荧光灯)

综合、平实风格

可能由于是大型工程的原因,要求企业首先具备可靠、可信任感。所以很少用很现代的设计风格,综合使用的多.

例如以下这款灯具网站模板:

 

3-灯具周边、灯具配件(灯头、灯泡、灯座等等)、

综合

灯具周边的企业网站更多需要的是展现产品,所以一般首页多设置产品展示的行数。 

转载:灯具网站模板全方位高清无码分析

2010年07月16日

转载:http://www.mobanku.com/blog/post/20.html

网页模板设计里“关于我们”是经常做的一个页面。“关于我们”是网站中介绍企业基本资料的页面,为了美观,常常要求图文混排的版式,这篇文章来列举几种常见的设计形式:上下型、左右型、穿插型,以及三种版式的各种组合型。

1-上下型

行业设备网站模板: 这款模板采用上下型版式,内容长短都适合这种版式。图片的选择上尽可能符合企业形象、行业形象,在设计中加入企业口号加强用户对企业的印象。

酒店网站模板:这款也是上下组合型,把口号放在最上,而把形象图片放在底部,这种形式比较适合内容量小的页面。

家政网站模板:该模板采用上下型版式,图片选择上尽可能美观,营造网站所需的形象。

 

2-左右型

酒店网站模板: 这种左右侧分布的版式在切图上比较方便,可以在图片上放入公司口号、公司理念等等,由于字体可以重新安排颜色大小,在视觉上都是焦点,有助于传达企业最期望的信息。

灯饰网站模板:这款灯具网站模板是左右+上下型,组合型的版式的原因是内容比较长,左右侧放入很长的图片不是很美观,所以就加入下侧的图片组合,口号也是放到下侧,加深用户对企业理念的理解。

3-穿插型

设计公司网站模板:这款设计类的网站模板在关于我们页面介绍企业理念,内容多行设置,在每段重点都加入标题,加重理解主要的内容,在内容侧则放入便于理解的图片,图文相呼应。

2010年07月12日

网页模板设计里,我们做了各种各样的按钮,也体会到了在茶叶模板里按钮非常重要,这是引导消费者购买的重要导航关键。在购物接下来的步骤里,按钮把用户一步步引导直至消费购物流程顺畅完成,而按钮需要怎么设计?首页按钮的目标就是做的清晰、令人一眼找到按钮的位置。按钮的整体风格是要符合网站的格调的,可以是对比色,也可以是同一色系。

1- 字体的选择

无论你选择什么字体,首先就是要记得要让内容清晰可见,

“立即订购”按钮使用了黑体,但是没加效果,使得立即订购这个重要的词组并没有凸显出来

“立即购买”也使用了黑体,并且加入了雕刻效果,使得字体立体又与整个按钮风格统一。

“加入购物车”这一按钮的问题是使用了综艺体,这种装饰过多的字体会模糊字体的结构,在网站里,如果让用户仔细研究这个按钮是指向哪里,容易导致用户不耐烦而关闭窗口,或者是停止下一步。

无论在按钮选择什么字体,最重要的都是如何让字体既符合美观又显眼。

 2-字体效果

 三个按钮分别是加入阴影和没加阴影,加入效果要合理的当,黑色的字体情况下又实用黑色的阴影,那只会模糊整个按钮,显得“脏”

白色加阴影的按钮显“脏”的原因是阴影的距离太大,这样与背景差太远就会让人眼产生模糊感。

“产品详细”这按钮也是采用了黑色,在深色背景下又采用黑色字,也是容易让按钮显“脏”的因素之一。而不够深的按钮背景下使用白色字体,又不明显眼的情况下,就应该加入深色的外发光,使得字体立体起来。

按钮都尽量达到这样的效果:字体立体,阴影合适、颜色统一。

2010年07月09日

网页模板设计的首先要做的就是了解你要做什么网站,如何做。查找资料就是了解企业的过程。这样才能做到设计中心里有底,不脱离实际闭门造车。首先是在搜索引擎上查找该产品关键词,对于做儿童玩具网站模板来说(虚拟客户的情况下)提取的关键词越模糊越好,例如儿童玩具就不能单以“轮滑板”这样来搜索企业,最好是以“玩具”为搜索,最有竞争力玩具企业都会在首页。从而进行比较概括的分析:

玩具生产商网站分析(企业站)    

一:类型

(1)传统、严谨的生产商网站(内容量少)

(2)活泼、亲和力强的卡通型网站(内容量大)

(3)走简洁兼严谨与亲和力为一体的简洁综合型网站(内容量少)

三种类型网站的首页内容分析:

严谨型:公司简介、合作伙伴、最新产品

活泼型:产品列表、公司简介、产品展示、联系我们、合作伙伴、新闻或者知识

简洁综合型:最新产品

[二]产品主要分类与分析:

1-游乐设施(橡胶、塑料、充气、木质)

属于大型玩具,厂家较多,网站多走传统型与活泼型,首页内容量大。

2-娱乐玩具(轮滑、滑板、小汽车)

偏男孩硬朗风格,多走广告型网站,介绍型内容量多,页面稍长,图片也稍大。

3-毛绒玩具

偏温馨可爱风,内容偏小,走简洁综合与活泼风格较多。

【三】设计元素

押题图片元素:卡通形象、游乐场、卡通风景、儿童人物、太阳、彩虹

设计风格:水晶、圆角、描边

颜色:橙、绿(嫩草绿)蓝色、紫色

转载: 儿童玩具网站分析(企业站)

2010年07月04日

目前网上卖商品已经屡见不鲜,如何在流量不变的情况下,提高自己产品的转化率,是每个电子商务站都要考虑的问题之一。本篇结合模板库的销售网页模板的实例和大家共同探讨本问题。

对于电子商务网站,我们应该怎样做,才能改善我们的电子商务网站? 我的意思是改善和提高用户体验,并不是立即销售。 有了良好的用户体验,访问者可以在未来的某个时间和地点进行购买,而不是去其他网站。

1、 使网站看起来更可信
由于电子商务网站涉及立即付款,访问者需要判断您的网站是不是安全的。通常客户会看各种各样的认证,或者行业证书,营业执照等等。如果您的网站有这些,可以放上去,并且可以连接到官方网址,别人可以查看到,这样无疑会增加很多可信度。

2.  想方设法让浏览者访问更多产品
一句话,就是让客户看更多的产品,进行比较,然后进行选择,如果一两个产品不能满足客户,客户很容易走掉。模板库目前每个详细页面,都会有6-8个相关模板,即使客户不喜欢当前的,也可以打开其他6-8个进行浏览,而其他6-8个又会有另外6-8个供选择,无疑增加了客户的浏览量,增加了客户选择的机会。这样成交的几率大了很多。

3. 允许交叉销售及特别优惠
有些人来到网站甚至不知道他们在寻找什么。 如果是这种情况,让尽可能多的选择,显示他们尽可能不破坏整个“探索”的过程。


 亚马逊提供任更多要点击链接的产品。

4. 提供越来越详尽的产品咨询,比如图片
人们无法触摸产品时,网上购物,只有通过高清晰的图片来进行参考,在这方面,我们的电子商务网站应提供产品照片,这是一个很好的方法来可视化产品。这点给我最深的是台湾的东森购物网站,里面的产品介绍,我认为值得大家借鉴。

5.  付款体验轻松
提供各种付款方法,让客户轻松付款,目前支付宝,银联都很方便,所以能放在网站上都放上。

以上几点是个人心得,还希望和大家共同探讨。

2010年07月01日

转载:http://www.mobanku.com/blog/post/15.html

字体由于负载了网站内容,总是希望能引人注意、所谓引人注意,并不是说只要显眼就好,配色优美、舒朗、字体间大小设置有序都是可以让整个画面协调、有层次的设计。

网页模板设计里面,字体有三种状态:

1-含在图片里的文字表现,这时候文字其实是作为图形存在,适用各种字体。

 

2-在标题的字体(在“无”的状态下,不可设置斜体),标题与正文相互依存,正文的小字体与标题的稍大或是加粗都能显示对比。

3-正文字体,(在“无”的状态下,不可设置斜体)正文字体是不加粗的,只有颜色上和大小上的变化。

 

下面我们对字体在栏目的设计上做个对比:

  • 加粗的9磅标题 与 加粗的10磅标题

  

  • 10磅正文:

  • 使用黑色标题和正文 与 使用红色标题和黑色正文

  

黑色的标题在深绿色的背景下并不显眼,而红色的标题则对比太强,显得刺眼。在这深色的背景下,只有白色也许是最好的选择。

而正文上使用黑色反而不如使用绿色显得舒畅,因为深绿色的正文延续了背景、边框的绿色,使得风格统一:

上图这个版本的字体设计可能是比较合理的。

  • 在标题背景偏浅的情况下如何设置字体颜色

 

 背景浅就是用偏深的字,但注意的一点是:字体色彩上的使用就要与背景相搭配。例如浅绿色配上深绿色比黑色的要好看。