黎喃自语-网络营销运营杂记

那些关于未来的想法要自己找解答前进的轨道有多复杂止不住想冒险的想法

日志

关于我

日光倾城·黎

个性嘛,善良、理性、有点率性,但不任性,生活嘛,不太独立,需要别人扶一把,长相嘛,一般般,不承认难看的,朋友说,蛮可爱的　　　　　　　　----------------------------------------　　QQ: 1272102018　　　　　　　　mail: liwenxia.yuki@gmail.com

文章分类

内容页的要点及样式代码－－如何打造优秀网站(原创)

2013-07-02 17:14:00| 分类：网站运营研究 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

又很久很久很久没有好好思考了，有朋友问《网络运营阶段思考篇》后续，捂脸，好吧，我应该好好努力，不偷懒。

很多人问我，你判断一个好的网站的标准是什么，这个，我可能受日本和美国的网站影响过深，对我来说，不管是建站还是传统开店，不管造厂房还是造百货大楼，判断一个企业是不是有文化有品味的标准就是他的外包装，原研哉对于Tsutaya Books案例很好的阐述了这个观点，一个名牌，都有自己的标志，如Tiffany蓝，LV的logo。同理，一个好的企业应该有它的“企业形象识别系统”，我曾在《从标签品牌系统思考实体书店的未来》中提过。

除此之外，网站的美观简单来说就是统一与精致，统一，是指颜色，字体，字号，行间距，段间距，装饰元素等等，都要统一，精致是指企业的logo，企业的图片，尺寸，底色，不要随便拍张照就往上放，就算不会PS，用美图也行，要亮，一般用相机拍的照片都会暗，要修亮，要修成颜色统一，要尺寸正好，不要大图小图显示，尤其是企业照片或产品照片最容易犯此错误。

统一并不是简单的统一，一样的字体就行，而是要选择用户最适宜，最舒服，最愿意继续浏览的样式，这样的样式最大的标准就是不要让用户累，就算你提供最高科技最值得学习的内容，用户看得很辛苦，用户也不愿意看的，就算你写的是他的银行收入，估计他也会打投诉电话。

视觉疲劳中最简单的就是视觉焦点移动过长，我曾在《浅淡视觉焦点与网页布局设计的关系》中提过，人的眼球集中点会以圆的形状向外逐渐模糊，只有盯着看的最中心点是清楚，这个就是视觉焦点。那要看清楚其他的东西，就必须移动人的眼球，如果移动范围超过了眼球移动范围，就需要移动你的脖子了。

示例：请逐字逐字看以下内容，体会感觉

人的眼球集中点会以圆的形状向外逐渐模糊，只有盯着看的最中心点是清楚，这个就是视觉焦点。那要看清楚其他的东西，就必须移动人的眼球，如果移动范围超过了眼球移动范围，就需要移动你的脖子了。视觉焦点的概念最初来源于摄影，视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在网页设计中，引导用户将关注点集中在你想让他关注的区域，这个也是我之前所说的隐形的行为轨迹路线。

当你的脖子移动多次后，人的大脑会受不了震动而发出不适反应，视线对焦文字内容会逐步变得辛苦（有木有辛苦的感觉？o(>﹏<)o）。

其次是字体大小，过小的字体会让人阅读辛苦，但同样，过大的字体造成一行内容变成多行内容显示，人的眼球超量上下运动，又会很辛苦，并感觉文章过长，引起阅读反感。

示例：FONT-SIZE: 9px;

人的眼球集中点会以圆的形状向外逐渐模糊，只有盯着看的最中心点是清楚，这个就是视觉焦点。那要看清楚其他的东西，就必须移动人的眼球，如果移动范围超过了眼球移动范围，就需要移动你的脖子了。视觉焦点的概念最初来源于摄影，视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在网页设计中，引导用户将关注点集中在你想让他关注的区域，这个也是我之前所说的隐形的行为轨迹路线。

示例：FONT-SIZE: 25px;

人的眼球集中点会以圆的形状向外逐渐模糊，只有盯着看的最中心点是清楚，这个就是视觉焦点。那要看清楚其他的东西，就必须移动人的眼球，如果移动范围超过了眼球移动范围，就需要移动你的脖子了。视觉焦点的概念最初来源于摄影，视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在网页设计中，引导用户将关注点集中在你想让他关注的区域，这个也是我之前所说的隐形的行为轨迹路线。

第三是字体颜色，过量过刺，反差过大的字会让人阅读辛苦，黑白配，黑红配并不一定让你的网站非常cool，但肯定会让你的用户感觉阅读很辛苦，其实虽然我们常说白纸黑字，但很多国外网站，包括我的blog，使用的字色都不是纯黑#000000，而是#333333，更柔和的字色。看上面的例子，宽度例如长文字使用的字体为纯黑#000000，可以比较一下感觉。下面2个例子比较字体颜色反差较大效果比较。

人的眼球集中点会以圆的形状向外逐渐模糊，只有盯着看的最中心点是清楚，这个就是视觉焦点。那要看清楚其他的东西，就必须移动人的眼球，如果移动范围超过了眼球移动范围，就需要移动你的脖子了。视觉焦点的概念最初来源于摄影，视觉焦点就是在有限的视线范围内快速捕捉你自己认为吸引你的区域。反映在互联网产品设计中，就是指设计的页面上最吸引人注意的地方，视线上集中交汇的地方，这个位置就叫焦点。在网页设计中，引导用户将关注点集中在你想让他关注的区域，这个也是我之前所说的隐形的行为轨迹路线。

第四是行间距，适当的行间距，段间距会让你的文章有明显的前后逻辑感觉，一个好的有逻辑性的文章会给人信服的感觉，哪怕他在胡说，都感觉胡说有理，因为他有逻辑了，相信我，一个好的骗子一个将逻辑分得很清楚，分层次。咦，要不要下次聊聊逻辑，呵呵。

最后是屏幕边距，这点经常被人遗忘，但我非常喜欢强调，因为中国人的阅读习惯已经从左开始，但适当的离用户屏幕左边框远点，离左右栏目分隔框远点，不要贴着，一个居中的页面会给人非常好的感觉。

我自认，我的blog就是严格遵守以上法则，有木有阅读舒服的感觉，考一下，大家知道我上面在说什么吗？

由于网站的首页各有千秋，此篇我仅重点分析我个人最看重的文章内页并分享我最喜欢使用的样式代码。

重点一、左右距离相同
原因：体显网站的专业性和技术性

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

与下图比较品牌认可感觉

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

参考代码
div { margin: 0 auto;}

重点二、文章宽度以600左右为宜
原因：人的视觉一般比较集中，减少让眼球及头部运动，让用户浏览舒服

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

t2

参考代码
div{margin: 0 auto;overflow: hidden;width: 600px;}

重点三、段与段之间距离
原因：段与段之间分隔清明，符合用户浏览习惯

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

t3

参考代码
.p { margin-bottom:10px; margin-left:0; margin-right:0; margin-top:10px; }

重点四、字体大小统一，一般建议14px为宜，我个人超级爱用14px
原因：主流字体大小，字型建议选择最普通的宋体就可，适应用任何客户电脑

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

参考代码
.p { font-size:14px;}

重点五、每段文字首行缩进
原因：首行缩进符合中国文字阅读习惯，并能显示网站的专业性

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

参考代码
.p { text-indent:2em;}

重点六、一段文字的行间距，一般建议23px为宜
原因：不要让读者感觉拥挤为最低要求

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

参考代码
.p { line-height:23px;}

重点七、建议文章标题下面添加网站名，如果更新量可以确保，可以增加文章时间
建议网站名的颜色需要比较鲜亮，吸引浏览焦点
原因：增强网站名的印象，增加用户认知，增加首页的内链及权重

图例：

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

参考代码
<a href="http://www.xxxxxx.com" style="color: #CC3366;" title="企业名">企业名</a>

其他主流网站的代码样式，点击图片可以看大图

新浪	QQ	网易
文章宽度560 margin:15px 0 line-height: 23px;	文章宽度640 font-size: 16px; line-height: 28px margin-bottom: 29px;	文章宽度580 margin:26px 0 line-height: 24px; font-size: 14px;

sohu	凤凰
文章宽度647 margin: 24px auto 0; font-size: 14px; line-height: 24px;	文章宽度600 line-height: 24px; font-size: 14px; margin-bottom: 25px; text-indent: 28px;

最后，文章旁边的空白处千万不要放弃了，不要简单的一个左列表，内容为什么企业介绍，产品介绍，联系我们，放点与文章相关的内容，如企业是卖锅子的卖调料，文章除发产品介绍，企业介绍，企业要新闻外，可以发菜谱，旁边放上其中用到的产品介绍，产品特价，产品视频，让用户有购物的欲望，不要忘记我的《传统企业主建站关注面》，文章页的目标不是只是放一篇文章，或者增加搜索引擎收录数，或做SEO排名用，文章不是为了PV，不是为了PR，而是将兔子（潜在的还不认识企业的购物者）变成购买者，最终成忠实用户。别把客户领进门了，去挡在付费室外面，这样太可惜了。

内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记

评论这张

转发至微博

阅读(624)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087064085086082074092086087069072087086064085082085071082086',
              blogTitle:'内容页的要点及样式代码－－如何打造优秀网站(原创)',
              blogAbstract:' \r\n<DIV align=\"center\"    \>\r\n<DIV style=\"FONT-SIZE: 14px; COLOR: #333333; WIDTH: 625px;\"     \>\r\n<P\><IMG title=\"内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记\"     alt=\"内容页的要点及样式代码－－如何打造优秀网站(原创) - 日光倾城·黎 - 黎喃自语-网络营销运营杂记\"     src=\"http://img2.ph.126.net/MrZxicztyhm3o2_uOnHm6w==/6597666801471995450.png\"     \></P\>\r\n<P style=\"LINE-HEIGHT: 23px; TEXT-INDENT: 2em;\"     align=\"left\"    \>又很久很久很久没有好好思考了，有朋友问《网络运营阶段思考篇》后续，捂脸，好吧，我应该好好努力，不偷懒。</P\>\r\n<P style=\"LINE-HEIGHT: 23px; TEXT-INDENT: 2em;\"     align=\"left\"    \>很多人问我，你判断一个好的网站的标准是什么，这个，我可能受日本和美国的网站影响过深，对我来说，不管是建站还是传统开店，不管造厂房还是造百货大楼，判断一个企业是不是有文化有品味的标准就是他的外包装，原研哉对于Tsutaya Books案例很好的阐述了这个观点，一个名牌，都有自己的标志，如Tiffany蓝，LV的logo。同理，一个好的企业应该有它的“企业形象识别系统”，我曾在《</P\></DIV\></DIV\>',
              blogTag:'',
              blogUrl:'blog/static/17314346020136232657794',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1483518069324,
              publishTime:1372756440036,
              permalink:'blog/static/17314346020136232657794',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'个性嘛,善良、理性、有点率性,但不任性,生活嘛,不太独立,需要别人扶一把,长相嘛,一般般,不承认难看的,朋友说,蛮可爱的　　　　　　　     　----------------------------------------　　QQ: 1272102018　　　　　　　　mail: liwenxia.yuki@gmail.com',
              hmcon:'0',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/17314346020136232657794">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

黎喃自语-网络营销运营杂记

导航

日志

内容页的要点及样式代码－－如何打造优秀网站(原创)

历史上的今天

最近读者

热度

评论

页脚