SEO篇：网站专题页设计规则
2019-01-10 来源：SEO研究协会网
不是所有的专题页面做出来，都能达到为网站带来大量流量的结果，对于这类型页面，有一些优化技巧，以下是详细说明。
一：不能使用搜索引擎无法识别的网页元素来构建专题页。
哪些元素对搜索引擎是不友好的呢？典型的有Javascript，还有大量的未加alt属性的图片。
重要的事情说三遍，千万不要使用js，千万不要使用js，千万不要使用js。
如果必须使用图片，就必须要给图片加alt标签并设置必要的文字属性。关于图片优化，推荐阅读“seo基础教程：网站图片收录与展现的维度”。
下面是摘自百度站长平台的相关反例。
这个页面看似正常，实际上全部都是图片，且没有未图片设置alt。对于用户来讲，没有问题，可以看明白；但对于搜索引擎来讲，这就是空白内容。
另外，这个专题页面想达成暑期游轮这个关键词的排名，但这个词仅仅在标题和描述中出现了，在内容中没有出现，没有seo设置，没有百度一直强调的相关性原则，因此，从搜索引擎优化的角度来讲，这个专题页面是失败的。
二：专题页url不宜波动需稳定。
某些热点会周期性出现，因为这个原因导致很多站长每年都会制作同一个热点的专题，但在设置url的设置上，每年都不同。实际上，这样的方法很欠妥。一个url的价值是会受到反向链接，历史数据，点击数据的影响的。如果url不一致，就会导致各url的价值分散掉，得不偿失。
正确的做法是url保持不变，内容上更新积累即可。
三：标题需把握用户的主要需求。
用户需求是方方面面的，用户需求是通过关键词体现出来的。在为专题页设置标题的过程中，需要把握大部分用户的需求而不是小众。
例如：大范围强降水与暴雨在人们的理解中，是相通的。但搜索暴雨这个关键词的人数会大于大范围强降水，这个关键词更口语化而非专业术语，如果选择做这类型的专题页，那么选择暴雨作为标题比另外一种要更妥当。
以铁艺大门为例，这个词是专业术语，知晓的人相对较少。搜索庭院大门或者别墅大门，甚至于铁大门的人数会明显的更多。因此，假设要制作“铁艺大门”主题页，那么设置为“铁大门”的效果也许会更好。
以上的三个点是部分专题页的seo优化技巧，其他的还有诸如链接建设，引流点击，整站优化等，欢迎补充与交流。
认识专题
页面特性：产品页面简洁易用，专题页面绚丽视效印象深刻。
在页面设计当中，产品页面（如facebook 微博 twitter 微吧等）的设计。注重功能，交互，设计要考虑用户长时间的浏览体验。视觉上侧重间距、布局、按钮和logo、及icon样式。注重规范和视觉识别性。样式通常简洁易用，绚丽元素少，视觉上并不强调冲击力。
专题页面时效性有限（大多专题是有推广及活动时间限制的，过了这个时间，就很少会有人再访问该页面。），多为活动推广和吸引用户等内容，能在限定的时间的吸引最多用户才能形成有力的推广，需要强有力的视觉效果，和有趣的浏览体验，来达到吸引用户的特点。在规范和布局甚至交互上可以适当放宽要求。
用抢眼的视觉吸引户并留下深刻印象是专题设计的首要！
传统产品页面，简洁注重功能和图标等视觉设计
专题页面突出视觉效果，华丽丰富
微博专题多为各种微博活动和推广内容设计。内容较多，在设计好头图这种主视觉的同时，大量内容和栏目的排版布局也要注意。针对专题视觉设计的特点着手，才能实际出优秀的页面。
设计专题 确立UE，沟通需求。
需求方的UE稿（产品文档）是专题设计的前提，需要设计师和需求方一起进行沟通。设计师可以在早期就对专题需求提出自己的创意和方案，再由需求方形成UE稿。设计师再根据设计稿进行设计。由于专题设计往往没有专门的交互设计支持，很多时候，UE稿只明确了该专题所要展现的内容，设计师需要自己对UE进行一些交互上的调整和优化。（要注意对UE的优化设计往往是递进式的，贯穿设计专题的整个过程，未必一蹴而就的去翻新整个专题UE）。
专题结构
大多数的专题结构可分为头图部分和内容部分，传统的专题一般只有一个主页面，复杂的则有若干的二级页面组成，视专题的规模而定。一些特别的专题则有着特殊的表现方式，包括类似用flash制作 minisite，以及一些异形的特殊专题。采用何种结构要看谁能更好的服务于需求。
专题尺寸
微博专题通常都有较多内容，会使得页面的高度过高，（很多专题的高度都达到了3000px）。设计时需要适当的缩短栏目的间距，尽可能的减少页面高度。专题的页面的宽度和微博主站相同为950PX，采用这个宽度是为了能兼容最广泛的显示器分辨率（1024px*768px），但由于专题的设计更加注重视觉效果，而且目前的很多年轻用户（年轻用户往往是专题的核心用户）的显示器分辨率早已超过1024px很多，所以我往往会将专题的主视觉和专题内容保证在950px之下，而头图的实际设计效果会在1600px宽度时做最好的展示。
600px是我们定义的微博专题的首屏高度，也就是大多数用户第一屏能够看到的区域。在这个区域内，我通常将头图的比例做到280px-400px左右，这样做的目的是为了在突出专题主视觉的同时也要让用户在第一屏就可以浏览到部分专题内容。（而通常产品页面的头部视觉在高度上要小很多，产品页面本身特性所决定的。）
设计头图
结构确立接下来后就开始头图的设计，优秀的头图是专题设计的灵魂。
设计头图首先要考虑的是头图的设计风格，根据不同的题材，选择不同风格的视觉设计。一般我会事先在纸上或是脑中勾勒一个大概，有些专题没有具象的视觉元素那么就从专题的文字入手，如果实在不带感，可以将一些与专题相关的元素先拼凑在画布上，然后尝试各种组合，也许一会就能擦出火花。
头图风格
关于微博专题的头图设计风格大致分为：写实类，卡通插画，大标题突出等。写实类头图多需要人物出场涉及版权，所以这种实类的风格的偏少，大部分还是后两种。如果需求方对设计风格认可，我喜欢在头图的设计中放入一些自己绘制的视觉元素，尽量减少素材使用。
写实风格头图，多由人物构成
卡通绘制类头图
大标题为主的头图
头图构图
在某种程度上，专题头图的设计有点类似一个更大的banner，但也有着很多的不同。它需要考虑如何巧妙的与下面的内容衔接，而且尺寸更大，细节更多，构图可以变化，如果只是千篇一律的采用规则的构图，会让专题显得单调，呆板，视觉效果不好。
圆弧形的割头图和内容区域的构图
头图标题
好的专题头图，除了有精美的视觉元素外，头图的大标题要重点强调，它通常需要设计师花费专门的精力来制作字体的变形和特效。好的字体效果其实可以成为专题的主视觉，成为最亮眼的一部分，同时也是最直接体现专题主旨的方式。
一般的头图设计只是专题视觉元素的体现，而有的头图本身就承载专题内容，这要视专题的内容和需求而定。即便如此还是要注意在样式上美观。
头图本身即承载内容功能
头图部分的设计是整个专题的重点，也是专题最需要突出的亮点，头图可以确立整个专题的基调。
优秀的头图应该紧贴专题内容，美观，吸引用户停留。
专题内容区的设计
形式多样，巧妙衔接
内容区与头图的衔接要巧妙，忌生硬。形式可以有很多变化，与专题整体的视觉要素结合，或可以继承头图中的视觉元素，设计出不同的样式，让内容区的展现更生动。让专题页面的视觉效果更佳的统一，整体~！
用桌布菜单来打造餐饮专题的结合部分
桌布托起头图，本身也成为内容的背景
内容清晰，布局合理
虽然是突出视觉样式的专题设计，但让用户能够关注专题内容还是基本。不能因注重头图的设计而有所怠慢，不一定要遵守栅格化的理论，但通常为了后续的制作方便我通常以5px的倍数进行间隔区分，个别情况可以例外，只要间距在视觉上保持规整即可。除了一些”PK性质”的专题模块，要注意模块栏目分布的权重，内容的主次要清晰，排布在逻辑上有关联性。
特色模块，视觉突出
一些重点突出的模块要和其他栏目模块做区别设计，做到突出而不突兀。
标题栏和模块的细节也应该注重视觉效果，较产品页面而言可以做一些修饰，但不可喧宾夺主。
为获奖模块设立单独的样式
标题栏的也可以根据主题设计细节
专题二级页和系列专题
通常二级页面的头图都是复用主页，但也要适当的为每个页面增加视觉元素予以一定的区别。要注意的是增加的样式也不易过繁，因为头图的存在会显得凌乱。
如果需要打造系列专题，就要注意规划设计复用元素，比如相同的logo标题，和为强调系列感的统一视觉风格。以此强化用户的对系列专题的印象和认知。
系列专题的元素logo复用以及风格统一
专题设计细节注意的若干点
• 头图要有延展性，要注意宽屏分辨率下的显示特点。
• 专题交互细节，为按钮翻页等交互元素设计各种状态，会有更好的体验效果。
• 专题自身的视觉设计的延展和统一，包括专题附属的弹层，对话框等的细节设计。
• 交付物的规范。专题图层众多，题设计完毕后交付前端的同事时，应该对图层进行分组。文件体积大就要删除或隐藏无用的图层。
• 专题设计稿提交时，尽量可能采用不同的图片，数目参差的正文，来替代设计稿中的模拟内容，这样有时够发现一些忽略的问题（如文字过多溢出，以此来进一步调整间距等），重要是可让他看上去更像是一个即将上线的真实页面，更好的展现你设计的最终面貌。有时会觉得多此一举且低效，但这能让我们显得更专业。
• 良好的沟通：设计师可以提出更好的风格意见，视觉创意，然而满足需求方的推广需求才是前提，所以通过良好的沟通加深对专题需求的理解，可以更准确的把握专题需求，避免返工等问题出现。
• 字体的问题。受浏览器的限制的，目前微博专题的主要字号还是14和12号的宋体（设备字体）
做正文基本可以保证清晰锐利，但如果用来做标题栏时候就不那么美观了。这时应该和需求方、前
段的同事沟通，在不频繁更改文案的情况下尽量使用图片来制作标题栏的文字效果，达到应有的视觉效果。
• 前端的规范与限制，如果需要复杂的圆角和半透明页面效果，最为稳妥的方法是为设计两套适应高低级浏览器的视觉解决方案，如果条件不允许，就要看前端同事对浏览器支持的策略，总之前端实现的问题，作为设计师应该主动沟通并推动其解决。（这还包括专题上线后的跟踪反馈。）
好的专题设计，有创意，整体效果和谐，用户印象深刻，内容传达有效，视觉元素有延续和继承。整个页面衔接不生硬。这都需要设计师动脑去巧妙构思和发挥，有时工期紧迫，不能做到事无巨细，我也无法全部按照自己所写这样去设计专题。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
