前阵子手上专案的一项任务是重新设计一个网站的SEO 页面与SEM 页面，不看还好，一看吓死人，页面上只有满满的文字，篇幅长到我高速卷动了老半天还看不见底。

身为设计师的本能就是 —  删东西！将一切简化到只提供使用者所需的资讯量，见到冗长的页面，我只想去芜存菁，删掉广告、删掉重复的内容、删掉满满的连结，再将内容切割成数篇文章，而不是全塞在单一页面。

虽然SEO 的重点就是玩文字游戏，互动设计并不是网页设计的核心，营销才是，毕竟重点在于流量与点击，产品设计师能施展手脚的地方并不多。

因此，我对于SEO/SEM 的了解也就仅止于内容为王、广告投放等关键字，在接到修改SEO/SEM 页面的任务时立刻冒出一堆问题：

SEO 跟SEM 有什么不一样？为什么SEO 页面一定要那么长？

为了找出SEO/SEM 页面背后的原理，我开始研究两者之间的差别，并且试图找出设计这些网页时的最佳典范（best practices）与守则。我相信一定有方法达到SEO/SEM 的目的，同时让使用者在浏览网页时拥有优质的体验。

我并不是营销人，营销圈的专家们对于网路内容行销一定有更多高明的见解，本文的目的是以设计师的观点研究网页设计与行销守则的甜蜜点。

SEO、SEM 傻傻分不清楚

搜寻引擎营销（Search Engine Marketing, SEM）

SEM的最终目的是经由付费广告推销网站以增加曝光率，所以SEM页面的本体就是大家最不喜欢的广告，一旦停止付费投放，效果就会立刻消失。

最常见的渠道是Google Adwords，百度凤巢，搜寻结果有广告二字。

边栏广告：会根据使用者浏览的网页内容投放相关广告（例如：你在读设计相关的文章，边栏广告可能会投放Sketch优惠价格）。

视频广告：由于SEM 有清楚的投放目标，以及可量化的成效，自然而然衍伸出像搜寻引擎结果页、PPC以及PFI等专有名词，方便营销人员或PM 追踪广告投放成果。

搜寻引擎优化（Search Engine Optimization, SEO）

SEO的最终目的是透过自然排序以提升网页的能见度，听起来跟SEM好像没两样，但SEO是免费的！

聪明的你应该猜得到，天底下没有白吃的午餐，免费自然是有代价的。

要做到真正成功的SEO，内容营销人员和工程师需要熟悉搜寻引擎算法的运作方式，照着它的游戏规则玩以获得更高的排名，并且持之以恒，这也是为什么每当百度算法一更新，SEOer们就会集体崩溃。

SEO 最佳化的方式可以粗略分成两大类：

技术导向
使用者看不到的努力，例如写命名与阶层明确的程式码，或是埋关键字在URL里头等

内容导向
也就是最近很红的内容营销，着重于提供使用者丰富的资讯，建立声望并产生黏着度

研究之后发现，SEM 与SEO 并行才是最有效的成长方式，当你的品牌或产品仍默默无名的时候，运用SEM 页面吸引新用户的目光，让大家有机会认识你、知道你的存在；再运用SEO 让这些用户更容易留下来，并在想到相关主题时会立刻想到你，以增加长期的曝光率。

至于SEO 页面为什么要那么长，事实上只要内容符合使用者的需求，永不终止的文字其实是好的，与其让使用者不断在多个页面上跳转，不如让他们知道他们所需要的资讯全都在此页。

对于企业而言，网页的留存率和转换率是最重要的，这些数字背后意味着$$$。然而站在使用者的角度，丰富有用的资讯、浏览流畅不会卡住、视觉享受等才是重点。

站在企业需求与使用者经验的交叉口，并理解SEO 的逻辑后，（勉强地）接受了SEO 页面势必会落落长的前提，我开始到处搜集能协助冗长页面成立的网页互动设计范例。

导航Navigation

导航列NavBar

导航是网站的路标，网站越复杂的话导航的存在就越重要，理想的导航应该是清楚明了并且永远可触及的，避免让使用者感到无处可去而离开网站。新颖的网站设计倾向于回收再利用导导航的空间，在使用者卷动页面时让导航条像百变怪一样改变造型与用途。

一、黏着

既然要永远可触及，那直接把它永远黏在原本位置上就好了吧！这大概是最简单直觉的解法。

二、隐藏

比黏着再进阶一点的解法，根据使用者滑动的方向决定是否显示导航条，预先假设使用者往上滑动很大机会是想navigate 到其它页面。

三、进度条

开始重新利用导航条的空间，辅助使用者追踪阅读进度，需要导航条时并不需要知道进度，故两者可以在相同位置进行切换。

四、文章名称

在一个网站上读太多内容之后，往往会忘记自己正在读的是哪篇文章。阅读时保有文章名称的能见度能辅助使用者了解自己身在何处，并且加强对此文章主题的印象。

参考：网站导航应该怎么做？

单页目录

像是迷你版的导航条，在单一页面的长度破表时使用，让使用者方便在感兴趣的章节之间跳转，而不是无止尽的卷动页面。

一、黏着

跟黏着的导航条一样，这是最简单明了的方式，让使用者在阅读时永远触及得到目录。

二、回到顶部

如果将目录放在页面最上方的话，黏着的回到顶部按钮就能带使用者自由跳跃于不同段落之间。

三、伪导航

利用使用者普遍惯用的导览方式介绍页面目录。

微互动

轮播Carousel

当有多个同质资讯需要展示时，为了避免无限重复的内容，不如将他们组在一起，善用轮播的方式轮流使用一个空间。

一、图片轮播

二、横向轮播

三、无格线按钮

Hover

一、显示CTA

预设hover 代表想要进一步动作，到时候再出现CTA 即可，避免让使用者看到无数个重复的CTA 在页面上，从而造成视觉噪音。

二、显示其他内容

当单一物件有多种形式时，避免一次将全部重点都放在同张图，反而在hover 时才将次要重点显现出来，充分利用空间。

三、鼠标变换

这是我最喜欢的hover 设计，鼠标本身的用意单纯是指向。当鼠标在hover 到不同物件上时转化成即将执行的动作，提供使用者比鼠标多一层意义，资讯量倍增！

四、显示影像

很新颖的做法，跟一般网页default 显示图片然后hover 才显示文字完全相反。让我想起主管曾说过他很不喜欢一般网页的设计，因为他hover 过去就是因为对那张图有兴趣、想看得更仔细，图片却被盖住或是直接消失，很不合理。

单页内容

除了互动设计之外，单一页面的内容呈现方式是体验的核心，优质的导航与微互动都是为了让使用者更能够沉浸在浏览内容的心流。

一、纯文字

并不是所有文案都需要多媒体影像辅助才是好内容，有效运用文字本身建立视觉阶级，就算只有纯文字也能让使用者阅读起来很舒服。

二、引用文字

适时引用文字也能让文案产生跃动感，让读字读到有点倦了的使用者感到些许新意，重新投入阅读体验中。

三、影像

现今常见的手法，熟悉网路媒体的受众偏好吸收影像，如果在文字之间辅以图像或影片能让使用者更容易投入文案中。

四、资讯图表

当文案内容牵涉到需要比较获释庞大的资讯量，运用资讯图表能够协助使用者快速、直觉地吸收内容，同时也少去文案人员书写几个大段落的力气。

五、综合

上述几个元素彼此不相冲突，设计师或营销人员能混搭使用文字、影像、资讯图表等让单一页面充满惊喜。

参考：单页面优化方法

结语

在搜集这么多例子之后，虽然仍觉得身为产品设计师能做得有限，但还是能提供几个让网页更亲近使用者的原则：

让使用者清楚理解自己身在何处，不会迷失方向感，对于冗长的页面，随时可触及的目录表尤其重要，让使用者能轻易在页面各章节跳转。