网页推广（精选4篇）
网页推广 篇1
在开始聊我在阿里四个月的网页推广设计之前，我想先来说说我对平面设计和网页设计的认识，
它们之间的交集。
1.它们都是集艺术创作、电脑技术和数字技术于一体的，以“视觉”(包括符号、图片和文字)作为沟通和表现方式的一种创造过程。设计师一般会利用字体排印、视觉艺术、版面编排(page layout)等方面的专业技巧，来达成创作计划的目的。
2.它们都讲求视觉上的快速、正确、有效的信息传达，都在诉说一个理念或品牌，都具有商业价值，它们的目标是信息、提示、促销和产生连锁反应等。
同时他们之间的区别也是显而易见的，主要表现在
1.设计实现的介质不同
平面设计实现的载体具有多样性，纸、塑料、布、木头、金属等，一般都与印刷有关，因此它受到印刷的限制最大，例如对印刷纸张的材质、规格的要求，对字种字号的要求等，最明显的是印刷的最小字体普遍使用识别性较好的有衬线字体。平面设计给人的体验主要来自视、触觉两个方面。
网页设计通过屏幕的显示来实现，它与平面设计最大的区别是介入了多媒体技术的应用，但同时受网速的制约。在文字处理上，屏幕的像素化显示要求最小的文字必须设置消除锯齿来保证文字的识别性。网页设计通过视听被用户感知。
2.信息的承载量不同
平面设计的产出物包括海报、宣传册、杂志、包装、广告等，它们每一次所承载的内容是相对有限的，而网页设计每屏的信息承载量比平面设计大很多(因为网页的滚动条可以无限拖动)。
进阿里近两个多月时做的推广设计，我一直在范本末倒置的错误。为了突出推广产品的品质感，我把对优质的产品图，合适的人物、场景图的选择看作推广视觉表达的最重要的环节。某天有个同事在我身后说：设计与绘画一样，当你停下来的任何时候它都应该是完整的!因为这句话，我逐渐对推广设计的要点进行了归纳、分析，下面这几点是我这段时间做网页推广设计的认识。
1.正确地理解需求的诉求点，并尽快达成共识
当我们接到一个需求demo时，设计师会先独立地解读，包括：对需求诉求点的明确，页面的整体氛围的感受等，接下来就是对网页设计新人而言比较有挑战性的环节——需求沟通，
由于知识结构的不同，设计师和需求方对于同一个效果的认识会不尽相同，这时我们可以进入到下一个环节，
2.明确页面设计的主题，投放的环境等，确定设计的氛围和色调
这个过程中我们应该尽量多地让需求方来描述她们所认为的这个活动想传达给人的感觉，设计师借此把这种感觉用关键的文字与需求方达成共识，
3.主题文字的重中之重的确定，交互稿子的审核
经过这两步，设计师可以花半个到一个小时的时间勾勒下这个页面的框架，包括构图，主题文字、元素的组合，行动点的安排等等，把第一个大致的稿子给需求方过一遍，进一步的沟通和明确以后可以开始设计了。这样做的好处是，设计的方向相当明确，
4.合理有效地编排设计。
网页设计不同于平面设计，它的显示空间完全依赖显示器的大小，因此网页设计的第一屏给人的印象直接决定了用户下一次还会不会再光顾，这就要求设计师必须同时合理安排好页面的各个板块的布局和衔接，保证信息传达的快速、准确、有效性，做到明确而自然。这里要强调一点的是过度渲染视觉效果的热闹而让客户不知所云的设计是没有价值的。
最后，当我们的页面有了重点，细节塑造以后，我们需要对页面进行最终的整合，页面左右上下是不是均衡，色调，光线是不是统一等等，做一些轻微的调整。
下面是我毕业这几个月做的一些推广banner,包括活动营销推广、商品营销推广、邮件/论坛帖。
从我这几个月的设计感受来说，对于一个刚毕业的设计师，在沟通方面的能力提高最重要，要学会换位思考。对需求的认识和理解要及时与需求方探讨，挖掘需求的诉求点进行突出表现。在技术上要坚持不断地练习、探索，尝试用不同的表现风格(可爱、炫酷、手绘、简约、雅致等)，不断提高专业技能，使创意和技术达到完美结合。
——在这里我要谢谢所有在生活工作上给予我帮助的人，谢谢大家!
F形状网页浏览模式网页设计 篇2
在美国长期研究网站可用性的著名网站设计工程师杰柯伯·尼尔森在年4月发表了一项《眼睛轨迹的研究》报告，报告发现，人们大多不由自主地以“F”字母形状的模式来阅读网页。尼尔森指出，网页的阅读模式和人们从学校里养成的读书习惯迥异。这份研究报告是从232名读者阅览几千张网页的实验中得出这个结论的。研究者发现，读者的阅读行为在浏览不同性质的网站和肩负不同的阅读任务时候都表现出基本上恒定的习惯。这种有压倒性的阅读模式就宛如英文字母F的形状，并且包括下面三个方面：
第一， 读者的眼睛首先是水平运动，常常是扫过网页内容的最上半部分。这样就形成了一条横向的运动轨迹。这就是F字母的第一条横线。
第二， 读者的眼光略微下移，很典型地扫描比第一步范围较短的区域。这就又画了F字母中的第二条横线。
第三， 读者朝网页左边的部分进行垂直扫描。有时候，这个举动很慢而且很有系统性，这样就画了F字母中的一条竖线。
下面这三张的热度图用来表明眼睛的运动轨迹并且用色彩来显示眼光聚焦程度的高低。越高的地方，颜色越热，分别为红色（最热），黄色（较热），蓝色（不热）和灰色（没有温度），如图1，图2，图3所示。
图片来源:F-Shaped Pattern for Reading Web content,www.useit.com/alertbox/reading_pattern.html
这三张是三种不同性质的网页。第一张是一般的说明性网页，第二张是个电子商务网页，而第三张则是Google搜索结果页。其结果都显示出F字母的轮廓。在第三张Google搜索结果页面的第二条红色横线比较长，是因为排名第二的标题比较长，所以目光扫过的距离也长，所以这个F的下面横线比上面长，
二.F形状模式的意义
F形状模式对网页设计的含义很透彻，也就是网页的设计和推广要有下面五个重要考虑。
第一， 读者不会非常仔细地一个字一个字看网页的内容。很少有人通篇在看。所以，每页不一定要填充非常多的内容，也就是说，每个网页不要过长。
第二， 网页的头两段非常重要，读者们基本上最关注这个部分。所以，这两段的写作好坏能直接影响读者是否有兴趣继续待在在此页吸收信息。
第三， 将重要的关键词尽可能地及早在标题、副标题和段落的前部显示给读者。这个安排内容的方法对搜索引擎也同样重要，因为搜索引擎的阅读方式是在模仿人。搜索引擎对网页的标题和前面段落非常重要，所以，网页的优化要充分考虑这一点。
第四， 人们对搜索引擎，比如Google的搜索结果页面的反应也是F型的。在图3中，我们可以看到，人们的眼光普遍注意搜索结果的自然排名（或者叫左侧排名）最前面1～3个搜索结果，而对4～10的搜索结果是一带而过。就是人们往下看搜索结果，也是“勉强”的。换句话说，将你网站排名在搜索结果页的前一两位直接决定了你网站受关注的程度。
第五， 搜索引擎竞价广告，除非能被放置在搜索结果页的最顶端和右边广告区的第一位，否则无法得到搜索者的关注。然而，获得最顶端和右边第一，往往点击的费用是很贵的。如果资金不足，只能做到右边两位以下，广告不易受到关注。另外，即使竞价广告获得最顶端和右边第一，从图上看得出，广告的关注度也远远不如搜索引擎结果的自然排名的前一两位。所以，搜索引擎优化是最能提高网站曝光度的办法。
本文来自：www.dmworld.com.cn/blogger/?p=443
相关阅读：
网页推广 篇3
（六）第六章 区块性质的ＣＳＳ
本 章 Ｃ Ｓ Ｓ 的 主 要 作 用
本章介绍的是区块性质的ＣＳＳ指令以及它 们的应用与特性，可以设定与控制区块的位置，大小及边缘宽度等性质。本章也将分成 两个部份为您介绍，第一部份要讲的是区块各部份名称与概念的介绍，对于区块有一点概念后，第二部份才再进入区块性质的ＣＳＳ指令的介绍。
区 块 各 部 份 名 称 与 概 念
其实我们还可以把所谓的「区块」细分成如 下面图形所表示的几个部份。
由外而内为您作介绍：
MARGIN： 边缘，虽然是通透的部份，但是可以藉由边缘宽度的调整来达到内容元素位置调整的目的。
BORDER： 边框，就是外框的部份，经由ＣＳＳ指令您可以控制边框的宽度、颜色和样式，不再死板！
PADDING： 补白，也就是内容元素与框架之间的这段距离与空间，也可以利用ＣＳＳ指令去控制大小。
元素： 内容元素，也就是您放置于该区块内的内容，或为文字，或为图形，或为所有其它元素。
附带一提的是，所谓的区块宽度是指整个包含边缘在内的宽度，而元素宽度指的只 是内容元素的宽度。有了这些对区块各部份的基本概念与认识之后，接下来就要来介绍控制区块各部份分别的的ＣＳＳ指令了！
区 块 性 质 的 Ｃ Ｓ Ｓ 指 令
margin-top
设定上边缘宽度 margin-right 设定右边缘宽度
margin-bottom 设定下边缘宽度 margin-left
设定左边缘宽度
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
百分比，相对于元素宽度大小
auto 使用浏览器预设值
预设值：0 继承性：无
一般范例：DIV { margin-top : 20pt } 同轴范例： margin 综合设定边缘宽度
支 持：ＩＥ３、ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边缘宽度
{1,4} 百分比，相对于元素宽度大小
auto {1,4} 使用浏览器预设值
预设值：无 继承性：无
一般范例：DIV { margin : 20pt 15pt 10pt 5pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边缘；如果只 有指定一个合法设订值，则会统一套用于四个边持；若只有指定二或三个合法设定值，则未指定的边缘会套用对边的宽度设定值。
DIV { margin: 20pt } →top=20pt;right=20pt;bottom=20pt;left=20pt DIV { margin: 20pt 15pt } →top=20pt;right=15pt;bottom=20pt;left=15pt DIV { margin: 20pt 15pt 10pt } →top=20pt;right=15pt;bottom=10pt;left=15pt border-top-width
设定上边框宽度 border-right-width 设定右边框宽度
border-bottom-width设定下边框宽度 border-left-width
设定左边框宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
thin < medium < thick thin 统一的绝对单位，因浏览器而异
medium 统一的绝对单位，因浏览器而异
thick 统一的绝对单位，因浏览器而异
预设值：medium 继承性：无
一般范例：DIV { border-top-width : 2pt } 同轴范例： border-width 综合设定边框宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框宽度 thin {1,4} 统一的绝对单位，因浏览器而异
medium {1,4} 统一的绝对单位，因浏览器而异
thick {1,4} 统一的绝对单位，因浏览器而异
一般范例：DIV { border-width : 4pt 3pt 2pt 1pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的宽度设定值。
DIV { border-width: 2pt } →top=2pt;right=2pt;bottom=2pt;left=2pt DIV { border-width: 2pt 3pt } →top=2pt;right=3pt;bottom=2pt;left=3pt DIV { border-width: 2pt 3pt 4pt } →top=2pt;right=3pt;bottom=4pt;left=3pt border-top-color
设定上边框颜色 border-right-color 设定右边框颜色
border-bottom-color 设定下边框颜色 border-left-color 设定左边框颜色
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
预设值：color性质之值 继承性：无
一般范例：DIV { border-top-color : BLUE } 同轴范例： border-color 综合设定边框颜色
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框颜色
预设值：无 继承性：无
一般范例：DIV { border-color : RED GREEN BLUE YELLOW } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的颜色设定值；若无指定此一性质，则套用color性质之设定值。
DIV{border-color:RED } →top=RED;right=RED;bottom=RED;left=RED
DIV{border-color:RED GREEN } →top=RED;right=GREEN;bottom=RED;left=GREEN DIV{border-color: RED GREEN BLUE} →top=RED;right=GREEN;bottom=BLUE;left=GREEN border-top-style
设定上边框样式 border-right-style 设定右边框样式
border-bottom-style 设定下边框样式 border-left-style
设定左边框样式
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
none 不显示边框
dotted 虚线（ＩＥ４、ＮＣ４浏览器当作实线）
dashed 短直线（ＩＥ４、ＮＣ４浏览器当作实线）
solid 实线
double 双直线
ridge ３Ｄ凸线
groove ３Ｄ凹线
outset ３Ｄ隆起（ＩＥ４不显示）
inset ３Ｄ嵌入（ＩＥ４不显示）
预设值：none 继承性：无
一般范例：DIV { border-top-style : inset } 同轴范例： border-style 综合设定边框样式
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素 可能值：
依序设定top,right,bottom,left的边框样式 none {1,4} 不显示边框
dotted {1,4} 虚线（ＩＥ４、ＮＣ４浏览器当作实线）
dashed {1,4} 短直线（ＩＥ４、ＮＣ４浏览器当作实线）
solid {1,4} 实线
double {1,4} 双直线
ridge {1,4} ３Ｄ凸线
groove {1,4} ３Ｄ凹线
outset {1,4} ３Ｄ隆起（ＩＥ４不显示）
inset {1,4} ３Ｄ嵌入（ＩＥ４不显示）
预设值：无 继承性：无
一般范例：DIV { border-style : ridge groove outset inset } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个边框；如果只 有指定一个合法设订值，则会统一套用于四个边框；若只有指定二或三个合法设定值，则未指定的边框会套用对边的样式设定值。
DIV{border-width:outset} →top=outset;right=outset;bottom=outset;left=outset DIV{border-width:outset inset} →top=outset;right=inset;bottom=outset;left=inset DIV{border-width:outset inset ridge} →top=outset;right=inset;bottom=ridge;left=inset border-top
综合设定上边框性质 border-right 综合设定右边框性质
border-bottom 综合设定下边框性质 border-left
综合设定左边框性质
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
预设值：无 继承性：无
一般范例：DIV { border-top : 2pt solid BLUE } 同轴范例： border 综合设定边框性质
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
预设值：无 继承性：无
一般范例：DIV { border : 2pt solid BLUE } 同轴范例：
要附带说明的是，这个指令只能指定一组设定值，也就是说，上右下左四个边框都将套用同一组的设定值，而不能作个别边框的设定值变化。
padding-top
设定上方补白宽度 padding-right 设定右方补白宽度
padding-bottom 设定下方补白宽度 padding-left
设定左方补白宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：
百分比，相对于元素宽度大小
预设值：0 继承性：无
一般范例：DIV { padding-top : 5pt } 同轴范例： padding 综合设定补白宽度
支 持：ＩＥ４、ＮＣ４ 适 用：区块元素
可能值：依序设定top,right,bottom,left的补白宽度
{1,4} 百分比，相对于元素宽度大小
预设值：无 继承性：无
一般范例：DIV { padding : 2pt 5pt 2pt 5pt } 同轴范例：
要附带说明的是，如果指定了四个合法设定值，则会依序套用于四个补白；如果只有指定一个合法设订值，则会统一套用于四个补白；若只有指Ｑ291911320定二或三个合法设定值，则未指定的补白会套用对边的宽度设定值。
网页推广 篇4
究其原因。除了JunChen提到的“难以维护”以外，对设计和开发人员精力的消耗也是一个重要方面。
让我们来看一个典型的流程：
用户研究员进行用户研究，根据结果编写了研究报告（比如角色模型和使用场景）；
交互设计师按照用户研究报告，设计了线框图；
视觉设计师拿到线框图，和交互设计师讨论并沟通后，进行视觉设计并输出高保真视觉原型；
前端开发工程师拿到视觉原型，在和交互设计师及视觉设计师沟通后，进行编码工作，输出HTML文件；
用户研究员开始可用性测试，并将问题反馈给交互设计师；
回到第一步，直至用户研究员（或其他的什么人）认为质量合格。
这一看似合理的流水线作业存在什么问题呢？让我们来仔细分析一下：
1. 困惑的交互设计师
用户研究是一个渐进式接近真相的过程，其结果不可能一步到位。尤其在研究初期，哪些因素会对产品设计有较大影响，哪些因素实际无足轻重，这是没有办法事先准确预估的。这就造成当交互设计师在依照研究结果设计时，发现研究结果不能给自己的设计以有力的支撑。
比如，当两种交互方式都可以达到同样目的、而从已有的数据中又无法判断用户会喜欢哪种时，交互设计师就会犹豫不决。从资源的角度来考虑，请研究员再一次制订计划、招募用户并实施研究，是不太可能的；更不用说设计两种原型并分别测试了。因此此时交互设计师只能依据自己的经验，或者进行押宝。
此外，交互设计师还面临一个颇为尴尬的问题：由于处于流程中的中间环节，缺少坚实的硬性产出，他很难、甚至没办法证明自己的工作价值。一方面，交互设计是一种偏“软”的技能，它目前没有、将来也很难产生一个标准化的量尺来考量其自身的质量。可用性测试可以做到部分量化，比如完成时间、出错次数等，但十几个人（一般甚至更少）的数据在统计学上是没有任何意义的。而且，有多少用户能理解那种低保真的原型呢？另一方面，就算用Axure等软件制作可操作的原型然后拿去做测试，各个业务部门会相信测试结果么？没错，你可以强硬一些，比如采取“如果业务部门不参与观察测试，就算自动放弃决策时的发言权”这样的办法，可这只能说你有工作方法，这实在无益于专业技能的提升。而且有多少设计师可以强势到让所有的业务部门闭嘴的？
实施社会分工的目的之一，就是实施标准化的作业。而当流水线中某一环节的产出物质量，是随着其作者的经验而变化时，也就是说质量并不能定量控制时，分工的意义就不复存在，这一生产方式也就不可能按简单复制的方式扩张规模。
2. 交互、视觉和前端间的沟通成本，和可能的不愉快
在交互设计师和视觉设计师交接工作时，沟通不可避免。视觉设计师要充分领会交互设计师的意图，这需要沟通；反过来视觉设计师给交互设计师的线框图提意见，这也需要沟通，
尤其在整个部门缺乏UI规范时，沟通成本可能会高得吓人。比如交互设计师认为某处需要用3级标题（比如h3），到了视觉这里直接用了一行红字。所以常常觉得“有那时间费力沟通，还不如直接改了算了”。结果改完了交互设计师心里会想“你怎么也不和我打声招呼就改了”，不愉快就这么来了。
到了前端开发那里，问题就更复杂了。首先，前端开发需要实现所有细节，而出于资源上的考虑，这些细节未必都会由交互和视觉设计师的产出物覆盖到（比如同一页面上仅有一处文字有微小变化，那么线框图和视觉稿要分别做两份吗？），那么前端开发就需要经常和前面两者沟通；其次，如果前端开发发觉设计稿的实现难度或成本太高，那么情况就更为棘手，最麻烦的莫过于要重新设计交互原型。
当然，上述问题基本都能靠沟通解决，问题是，你愿意花多少时间去沟通呢？从这个角度来说，敏捷开发的沟通成本是最低的，因为沟通就是产出。而反过来上述流程的沟通成本很高，因为沟通是用来解释产出的，是产出成本之外的“额外成本”。
3. 瀑布模型与生俱来的缺陷
上述流程是一个典型的瀑布模型，一旦在可用性测试阶段发现问题，就需要重新再走整个流程，其效率之低可想而知。此外，由于涉及到的环节和人员不少，流程走得次数越多，出问题的机会也越多。最常见的是各个环节的产出物版本控制困难，甚至根本没有版本控制，结果往往造成项目组中每个人拿到的产出物（如Demo）都不一样，这是一个非常可怕的风险，会给项目过程和质量带来非常严重的影响。
我对这个问题采取过“文档管理＋版本控制＋减少分工”的方法，效果很好。这个后文会阐述，这里先不展开。
4. 无技术含量可言的重复劳动
在一些页面调整不大的日常项目中，交互设计师用2小时做的原型，到了前端那里可能半个小时就把HTML搞定了，如果用CSSEdit那样的工具，实现过程甚至更快、更惬意。那么，为什么要把原本一件很小的工作硬生生地拆成两部分来做呢？
举一个非常常见的例子：业务部门提需求说要改某某宣传文案，如果按照上述流程，交互先做线框，给到视觉确认，然后到前端修改，往最快了说也得半小时吧。而若交互设计师直接改HTML，十分钟搞定。
有人说找到相应的模板还要时间呢，这好办，做个可搜索的模板库就好了。我们曾参考DocBlock规范做过VelocityDoc，效果很好。
5. 破坏了网页设计工作本身的美感
网页设计是技术和艺术的结合，一个优秀的设计师不仅大量吸收传统的设计知识（如平面设计），更懂得如何利用合适的技术去带来艺术上的创新。这个过程是相辅相成的，硬性拆开只会限制设计师的创造力。
这就好像搞油画的必须要掌握不同染料和画布的性质，搞雕塑的既要有创意又有能动手（你能想象出一个雕塑家只管创意而从不亲自去实现吗）一样，使用技术来展现艺术，借助艺术去探究可能的技术。
据说Apple的工业设计师都要清楚地理解各种材料的特点的，如果只让他们画图，Unibody这样的杰作又如何诞生？
说了半天问题，下篇中我们来看怎么解决。