网站专题页面设计技巧 网站专题页面设计技巧分享

无论是搜索引擎的SEO还是用户的习惯，对专题页面的导航设计都有一定的要求，在专题页面的导航中，有三个导航是一定要具备的：全站导航、主导航、页脚导航。下面介绍网站专题页面的设计技巧，希望对您有帮助。

如果你的网站是一个大型的网站，那么在建设的过程中，肯定会有很多的专题页面。例如在国庆节期间，各大网站肯定都会有国庆专题页面的出现。那么专题页究竟有什么内容的呢?其实网站建设中的专题页主要是针对页面的内容对网站想要表达的风格。今天我们要说的专题页主要是以节日为主的。

第一、节日专题页面的内容一般都是些什么内容呢?一般是节日的放假时间以及拼假攻略，节日主题并且与网站的产品进行结合的一些文字或者图片相关的内容。模块不一样可以调用不同的产品，并且要将产品相关的内容设置在显眼的位置上。一些固定的、静态化的文字是一定要有的。而且在制作这些文字内容的时候，要结合网站SEO的引导性。要将节日的主题、联系方式、评价、产品相关的介绍等等都是在专题页面中有所体现。

第二、专题页面中的链接设计。导入链接一般分为两种，站内导入以及站外导入。站内导入的链接一般都是以锚文本的形式存在的，而且在锚文本中会有固定的关键字，因为这种设计有利于网站关键字权重的提高。而站外导入的链接可以是多种方式存在的。例如锚文本链接、常规方式的超链接，纯文本方式的链接、跳转链接等等，这几种链接的出现一般是以5:1:2:1的比例出现，这种比例有利于专题页面整体权重的提升，并且可以保证外链的自然存在。

第三、专题页面的导航设计。无论是搜索引擎的SEO还是用户的习惯，对专题页面的导航设计都有一定的要求。而在专题页面的导航中，有三个导航是一定要具备的：全站导航、主导航、页脚导航。全站导航包含网站所有的栏目，而主导航是专题页面相关的一些页面，页脚导航主要是针对SEO的优化。

第四、专题页面中图片的设计。这个主要是美工方面的要求。节日不同，所设计的主题也是不一样的，主题不一样，所表达的方式也是不一样的。所以，在节日专题页的设计来说，要从节日的来源、习俗、庆祝方式、颜色的运用等等选择合适的方式，而这些元素都将在banner图片上展示出来，这样就会给用户一个深刻的靠前印象。还要注意一个方面图片的风格要与页面的风格保持一致。

1. 让他可读性高

无论如何你的网站上的文本必须使人容易阅读。如果一个网站的文字阅读起来很有挑战，用户很显然不会去看它，这意味着你将失去潜在的客户。在移动端屏幕变小，还有各种反光和倒影会让文字更难读。移动端文字有它固有的标准(如：一般在2×的设计稿中文字最小可读是24PX)，文字不能过于单薄也不能有太多色彩，所有的“手段”都必需使文字更加容易阅读。

2. 建立视觉层次

访问者一般用快速扫描的方式查看你的网站。在视觉设计上用一些技巧告诉用户那些文本是最重要的，他们应该集中注意力看。

你可以突出你的网站优势，因而让用户去关注你希望他们关注的内容上。那怕是在移动端，用户再如何快速的扫描信息，也不致于忽略关键内容，一旦产生兴趣，他们就能成为潜在客户，产生购买、成为会员、或者你会收获更多。

3. 考虑用户

想想用户使用网站的场景，您的网页设计元素应该让他们感到温馨。

如果他们习惯了网站上使用那些现代而精致的字体，如果突然出现其他字体，他们会觉得蹩脚或不知所措。

你的网站的字体选择应该有一个基调，让访问者舒适，并熟悉。

4. 对比的创意

在平面设计中 玩对比已经是一种常见的方式。您必需使用对比色，来增加可读性。如果文字的色彩很重，那么配色浅色的背景会更加易读，背景和字体色彩过于相似会难以阅读，或者背景过于花哨也会显得阅读困难和档次低。

也可以在排版中用文字玩对比(如粗细对比、大小对比和疏密对比等)，如果所有的文字都很相似，你的作品将失去视觉层次，并显得很平庸。

5. 使用同一套风格的字体去设计

网页设计中字体的选择是一件困难的事情，那么多的字体可选，会让人困惑。

最好的组合方式是使用同一个系列的字体，或者是由同一个设计师设计的字体。

在一些情况下，字体并没有粗体和多个字体样式供我们使用，这个时候你可以找找同一个设计师做的字体，它们可能拥有相似的特性，让你的设计显得更加“和谐”。

6. 限制字体的种类

不管你如何使用字体设计和排版，有一条不变的法则，不要使用太多字体，专家建议使用2到3种适宜。

虽然这条建议非常好，但是也不是绝对，一些情况下，多种字体也能做出特殊效果。但是大多数情况下，过多的字体意味着缺乏设计和乱。

让网站调用系统字体不仅仅影响网站的视觉外观而且会对WEB页面的性能有巨大影响，英文最好使用woff (Web Open Font Format)，可惜中文由于字体数量大导致文件体积过大，不适合做woff。

字体太多 = 较慢的加载时间，一个网站加载时间过长则意味着用户的流逝。

7. 不要忘记测试体验一下

如果你不去实践，任何的规则和理论都是没有意义的。

用各种移动设备去试试你的网页，看看文本阅读是否流程，在小屏幕可读性还是否OK。什么样的设计概念都是用来打破的，一旦你运用到实践中，可能你就需要有调整，以便于获取最佳效果。

专题是一种推广方法，在你所运营的网站中，既可以将专题视为推广着陆页、也可视为优质内容输出方法!好专题不仅能为你带来流量，更能增加网站粘度、为网站品牌锦上添花，尤其在医疗网站、教育类、教程类、知识问答类等网站更是如此。

为了深度体现一个主题，我们通常会利用一个点、一件事、一个主题来策划一个页面或一个活动的流程页面，该页面会包含网站的相应模块、频道所涉及的功能和该主题事件的内容展示。本文主要是总结专题页的一些方法与技巧!

一、专题页的重要性

SEM一共就几块内容，账户操作、数据分析、效果优化。账户操作是最基础的，没啥可说;数据分析，外行听起来感觉高大上，其实是SEM里最简单的事情，因为3-5天的新手，可以做的跟老手一模一样，只是速度慢点而已;效果优化，无非做三件事：

1、账户的基础调整，依然是账户操作，例如结构、创意、细节设置等;

2、基于数据分析的调整，就是将分析的结论进行运用，将钱花在更高效的地方;

3、就是营销策划的尝试，其中重点就是专题页策划。

将上面提到的这些做个梳理，我们会发现，真正决定企业之间SEM差异的，不是账户操作、不是数据分析、而是效果优化里的专题策划。悲哀的是，专题策划居然是很多SEMer未曾到过的地方，很多人依然在账户和数据里勤奋着。

所以我经常说，要想成为SEM高手，请把精力更多放在专题页策划上。

二、如何策划专题页

专题策划是有章法可循，并不是凭空拍脑门的，这里介绍个一般逻辑，供大家参考。逻辑非常简单，四步走：引入-痛点-产品-呼吁。

1、引入环节，页面第一屏，首先抓住浏览器着眼球，如果内容相对复杂，可以继第二屏，总体先将浏览者稳住，让TA继续看后续内容。

2、痛点环节，卖产品如果直接说产品，一般而言就太突兀，所以需要挖掘一下，受众是需要刺激的，不然也许TA不够痛，从而就会轻易离开。

3、产品环节，前面的铺垫，主要就是为了引出产品，满足客户的需求，解决其痛点，这个环节一般篇幅较多，会将产品从各个角度隆重介绍。

4、呼吁环节，也是常说的CTA(Call To Action)，专题页面不是让浏览器看的玩的，是有目的的，最后一定会再次重点声明，呼吁浏览器完成某个动作，例如点击咨询、拨打电话、关注扫码、填写表单等。

这种逻辑很简单，再重复下四步走：引入-痛点-产品-呼吁。

三、专题策划中：画出架构，搜集信息

信息已经搜集妥当，在心里也已经打好腹稿，先花上1个小时的时间将专题信息架构画出来，关于专题的信息架构思路来源，也有几个技巧：

1、在图书目录中获得，一本书的目录，是全书的主题线索。可在电商站上搜寻到目录，然后将目录进行再浓缩，套用在你的专题架构中。

2、在网络上下载专题主题相关文档PPT，这也会为你的专题架构增光添彩的。

3、去专题相关网站掳掠信息架构，必有意想不到的收获。

4、博主文章中攫取。好的文章，不仅仅要仔细研读，还要总结精华观点。

专题信息架构搭好了，接下来的事情就水到渠成了!

四、如何高效管理专题运营工作

1、建立专题运营流程表：规范每个专题需要经过的流程以及每个环节的负责人和职责。

2、建立专题时间进度表：由专题运营负责人将专题每个流程预计的时间和当前进度及时记录以及时掌控每个专题当前的时间进度。

3、使用项目管理方法：每个专题指定项目负责人，参与项目的人员通过建立专题项目，将任务分配给专题各环节的负责人，每个环节的负责人完成系统任务后及时在系统中置任务状态并通知到相关人等。

4、高效管理专题文档：在知识库中建立专题文档资料库，及时汇总当前专题的各项资料以及归档以往各期专题。

5、利用OSS后台有效专题管理：如长期制作有交互效果的专题，例如通过专题客户报名、客户积分、客户参与调研、客户采取某项行为等，可以采取OSS后台建立相关功能用于记录哪些用户报名、参与调研、参与活动等，便于跟踪并及时处理，形成线上的管理模式。

1. 决定品牌形象

在很多建设网站的理由中，传递出特定的感情这一信息是很常见的。所以在这时，选择好颜色就显得尤为重要。你想传递出什么样的感情，不用通过阅读内容，用户都能很好的理解。

在以生态为基础的公司的网站上，配色的灵感就来自于自然;如果是以销售玩具为主的公司、就需要选择有趣，鲜艳的配色。每一个被使用的颜色，在它背后所包含的意义是十分重要的。

在品牌推广时使用的颜色要和公司LOGO设计的颜色要是相同的，这一点非常重要。对于网页设计师来说，在线销售的销售额增加，让人联想到什么样的传统或者概念，如何利用有效果的照片都是值得思考的一件事情。

虽然有很多种方法可以让用户在网页上进行购买时也能获得和在实体店一样的感觉，但网站的运营者则需要让网页设计师也注意到这一点，革新的新型网页也同样，或者说可以获得在这之上的购物体验。

最终的目标、就是给用户提供舒适的感觉。因此，在更新最新信息的时候，一定要注意要具有统一的品牌意识。

2. 决定你要传递的信息

给消息使用华美的颜色，或者让它变得特别有吸引力，在单独比较的时候又有独特的魅力，给用户提供这样有趣的体验。如果你已经知道你面向的是那些用户、考虑它们的喜好就不是很难、这也算是一个非常好的消息了。

3. 直观的导航菜单栏

当你看到一个网站的时候，或许你会有很多很棒的点子，但你也需要遵守导航菜单的一些规则。用户是一个接一个、按照顺序直观的去观看的，除去基本的动作之外，要防止出现让用户感到迷惑的动作。

想引导用户到达特定的区域，有好几种视觉效果可供选择，用配色方案来凸显出对比效果就是典型的方法。利用对角线上的布局，被称为对角线平衡(英： Diangonal Balance)、它特别惯用于从上到下的布局、我们可以在右上角的基本设定菜单中找到它，这在欧洲和美国的网页中经常用到的技术。

利用相反的配色，让每个选项的层次感凸显出来，用户在这些项目中就知道可以点击什么。

4. 决定什么是重点

用户可不知道，你有什么重要的情报和消息。在这种情况下你就需要在屏幕的中间，使用鲜艳的颜色来告诉它们。这么做的话，用户就会尝试着优先去看这一部分。

为了让用户去关注它们，也有用白色背景上使用黑色文字这样布局的网站。为了打破单调的外观，如果你利用了强调色，那将变得非常简单。也有这样的原因，为了表现出文本和超链接、使用非常鲜艳的颜色，这也是现在非常流行的设计趋势。

5. 考虑信息的重要性

在网站中、我们希望将【注册】或者【购买】这样的要素突出。而类似【取消】这样的按钮则希望用户尽可能的不去注意到它，因为它们并不是主要的要素、用一些通常的设置来控制它们就可以了。

我们可以用字体很小的文字或者和照片颜色相接近的自然的配色来设计按钮，从而让用户不去注意【取消】。如果将原本在右上角的【注册】按钮放在屏幕的正中间，那它所达成的效果也自不必说。通过调整按钮的大小，以及明确的写出它们的做用，用户就能很准确的理解你所表达的意思。

同时，为了突出主要要素按钮，你需要去注意它们的大小和颜色的对比，这样可以防止用户忘记按下按钮。

6.考虑图片的颜色

为了给用户界面提供更加有趣的体验，你也可以将配色同图片相结合。从填满整个屏幕的背景图、到你想出售的产品的缩略图、将它们考虑到构图之中，将用户的视线集中起来。

事实上，更加专业、精致大气的网站上，红色和绿色还有蓝色最好不要使用。由单色制作出来的网站，信息的传递往往会更好，这也作为一个特殊的效果，被很多网页设计师所采用。

7. 限制使用颜色的数量

如你所见、有些用户的眼睛是弱视的，而有些则是什么颜色都看不见的。而大多数情况下，色盲中红绿色盲居多，如果你的设计作品中运用了大量的红色和绿色，就会让它们感到混乱。

从这个设计师可以看出、在这个界面设计中它是以大量的红色作为主要要素，这样就可以避免红色和绿色难以区分这一问题。

8. 决定什么是最重要的

例如代表国家或者宗教的符号，颜色所代表的意思，因为各地的文化不同而不同。作为设计师，首先应该了解自己所面向的用户是那一类、在考虑配色的时候，应当要考虑到这些问题，从而确保传达出的意思不会被误解。

有时、颜色的意思相近(在中国红色代表幸运(英： Luck)，在美国则代表了爱(英： Love))就显得不是那么重要，但像白色或者黑色这样因为宗教的原因而导致的意思不同，就会将你的设计从整体上破坏，这一点请务必注意。

最后

正如我们这次所看到的、理解配色的意思是十分重要的。不管是创建一个直观的界面、还是将它利用在品牌上，您都可以准确的传达出它的意思。正确的利用颜色，就好像魔法一般，将你的设计准确的反映出来。

如果想要了解颜色的意思，则需要长时间的学习，当然这也会更好的让用户了解到你的设计作品中所包含的趣味。