目录：

一、什么是单页？

二、单页策划

三、单页设计

    （1、思维    2、技巧      3、构图）

四、单页SEO

    （1、URL    2、TKD）

五、单页统计

    （1、流量统计    2、点击统计）

一、什么是单页？

      单页，简单将其比喻为在一张纸。单页最早出现在平面设计中，设计师通过用不同尺寸、材质的纸张，在仅有的正面和反面上进行自由设计的过程，主要用在折页、宣传单、海报中。

二、单页策划

      web 端的页面，一般包含全站页头、页底这两个公共组件；H5页面，一般包含页头以及页底的版权信息。共同点是专题主题与文案、相关图片素材等。

三、单页设计

1、思维

        要使得“首屏-次屏-内容区间”的视觉更加的连贯和流畅，就要充分利用好“局部对比”和“整体关系”让页面效果更加的完整。

        点：整体页面中的主题，即专题设计的切入点，起到引起注意的作用。

        线：专题页中的主线，具有引导、连接的作用，引出故事情节。

        面：整个页面的完成度，强调的是从头到尾（首屏-次屏-内容区-最底部）、从局部到整体的视觉联系。

单页设计思维

2、技巧

· 一般头图的高度是450〜600px之间，太高浪费空间。

· 首屏与次屏在设计上不要有明显的颜色条分隔、形式分隔、线分隔等。

· 头和尾部的元素要在视觉上做到呼应和一致性，一笔直下、一气呵成。

· 尽量不要用色块对页面内容分区，整体的单页设计大多用的是单一颜色的背景。

· 从排版、字体选择、按钮样式、色彩等方面都要做到一致性，这样的单页才是整体的。

· 保持屏与屏之间的可呼吸性和留白，给人们放松和喘息的空间。

· 在设计中用放大局部来看细节，缩小页面来看整体页面。

· 在构思前，给整体页面设定出一个故事，让页面具有新颖的主题性。

· 利用完美的顺滑的浏览体验，将各个内容间无缝且精巧的连接起来局部某些元素去做分层的动画特效。如 http://philwappler.de/

单页设计技巧

3、构图

      常见的构图方式有：几何切割（简单切割、对称切割、组合切割、多重切割）、主体轮廓、发射与透视、整体场景、流程图。

      在拿到需求的时候，先不着急下手，构思的时候可以大胆尝试，考虑内容和风格，先确定构图，再往里面添加内容，充分考虑到内容的排版，尽量做到让一个专题有大创意的同时又具有小细节，实现整体形式感的完美和谐的统一。

      所谓构图就是将表现主题的各个构成要素按照主次关系放置在画面相应的区域，形成视觉感受，达到设计意图。所有的构图方式追根究底都是为内容服务，构图必须要服从主题表现的要求，设计师在设计的时候要注意在追求创意构图的同时也别影响到用户阅读内容。

1）几何切割

        三角形、正方形、长方形、圆形、几根线条，就可以组成很多有趣的图形。适当的画面切割能够给页面带来动感与节奏感；加入几根线条，几个块面就能令页面起到意想不到的效果，内容区域也能得到有效划分，具体排版可根据内容来处理。

        简单切割：这类构图方式对内容没有过多要求，可随意安排，具体排版可根据内容来处理。用一个形状或者素材切分整个页面，画面瞬时变得有趣生动起来，内容区域也能得到有效划分。

简单切割

      对称切割：这种构图方式的前提一般是内容分主要两部分，并且这两部分是对立关系的情况下，比如说：对战，男女，冷热等等。页面一分为二，内容划分明确也更加具有视觉冲击力。

对称切割

        组合切割：这种构图方式适合那种每个区块中的内容属于平级关系的专题，例如示例中的几个功能点和分类，都是属于同一级的内容，所占的比例也相同，用这种组合的排列能够保持各内容的关系，也能让布局更有创意。集中而规律的排列，从整体上抓住人们的视觉。

组合切割

      多重切割：这种构图方式使用最多的一般是为了体现时尚感，科技感，与锋利感觉的专题，例如时装，家电，以及游戏战斗类的专题等等。不规则的构图，稳定而锐利，干净的排版，易于识别，不规则的构图方式，避免了画面生硬，不易产生审美疲劳。不同的形状和排列，呈现出来的视觉效果也不一样。

多重切割

    实例：

几何切割

2）主体轮廓

        根据专题的主要内容，从整体上构建一个边界或外形线，形成一个大的轮廓，将专题内容巧妙的填充进去，让用户一眼就能了解到一些信息，符合专题主题，并且能够让页面更有设计感，生动且活泼。需要提醒的是，设计的时候将形状尽量轮廓化，加以强调突出，主体不需要太具象，舍弃一些繁琐的、次要的元素，以免影响用户阅读内容。在拿到需求的时候先进行脑暴发散联想，提取出一些有用的信息，再从中挑选出适合元素去寻找一些图片，通过图片素材来激发创意。

主体轮廓

3）发射与透视

      通过整体放射状加透视构图，使画面呈现立体与空间感，视觉焦点明确，画面冲击力强，富有动感。需要注意的是，放射状的排版不太适合文字阅读，要注意文字排版。建议在文字数量较少的情况下选择此种构图。一般游戏激战类的专题会较多的使用这种构图，突出动感。

发射与透视

4）整体场景

      专题内容不多，要突出趣味性，又怕用户无聊，那就设计成一副美妙的插画吧！让用户迅速置身在搭建的场景中，带动情绪，参与互动，直观获取有用信息。这种处理方式会使页面信息表现的更加准确顺畅，快速有效的把目标用户带入到页面氛围当中。不过需要注意的是场景搭建对素材的要求比较高，明暗，阴影，透视以及层次感，体积都需要用心处理。这类专题大多都会搭配动画一起实现，在带入感上更进一层。在设计的时候，对专题内容头脑里要有画面感，先搭建大的画面关系，再往里头添细节和内容，切记场景不要抢了内容的视觉焦点，在适当的时候做些减法。

整体场景

5）流程图       

    专题是渐进以及流向又或者是展示各节点的内容，用别的形式总感觉不够具象，那何不干脆做成一个个性化的流程图？俗话说，千言万语不如一张图，专题运用这种构图方式能够将步骤，关系，各个节点以及整体流向展示清楚，配合图片展示，一个枯燥的流程瞬间变得个性十足，用户浏览简单又明了，并且充满了趣味性。

流程图

四、单页SEO

1、URL

      统一资源定位符（Uniform Resource Locator）是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

      基本URL包含模式（或称协议）、服务器名称（或IP地址）、路径和文件名，即“协议://授权/路径?查询”。

      如：http://www.aipai.com/tuijianpiao.html

      1）http://：是协议，也就是HTTP超文本传输协议，也就是网页在网上传输的协议。         

      2）www：是服务器名，代表着是一个www服务器。

      3）aipai.com：这域名，是用来定位网站的独一无二的名字。

      4）www.aipai.com：是网站名，由服务器名+域名组成。

      5）/：这个是根目录，通过网站名找到服务器，然后在服务器存放网页的根目录。

      6）tuijianpiao.html：是根目录下的指定网页。

      7）http://www.aipai.com/tuijianpiao.html：叫做URL，用于定位网上的资源。

2、TKD

1）含义

      TITLE元素仅可在 HEAD 元素内使用。位于 TITLE 开闭标签之内的文本都会在浏览器的标题栏和 Microsoft Windows 的任务栏上显示。对于 Web 页，“Internet Explorer”会被自动追加到标题后。而在 HTML应用程序(HTA)中，仅会显示指定的标题。要使用脚本在程序中设置标题，请使用 document.title 而不是设置 title 对象的 innerHTML 属性。

    Keywords又叫关键词、关键字，其就是一个网站管理者给网站某个页面设定的以便用户通过搜索引擎能搜到本网页的词汇，关键词代表了网站的市场定位。网站的首页关键词至关重要。首页网站关键词代表了网站主题内容，内页和栏目页的关键词一般紧扣页面主题，代表的是当前页面或者栏目内容的主体。

    Description出现在网页的；之间meta标签之一，可称为“内容标签”，“描述标签”或“内容摘要”可以预见在以后的用户搜索中Description会扮演越来越重要的技术之一。

2）格式

TKD的格式

五、单页统计

1、流量统计

      可通过CNZZ，由前端在页面上添加统计代码，从而得到页面的流量数据。主要有以下数据：

1）PV，page view，页面访问。所有访问者在24小时（0点到24点）内看了某个网站多少个页面或某个网页多少次。PV是指页面刷新的次数，每一次页面刷新，就算做一次PV流量。度量方法就是从浏览器发出一个对网络服务器的请求（Request），网络服务器接到这个请求后，会将该请求对应的一个网页（Page）发送给浏览器，从而产生了一个PV。那么在这里只要是这个请求发送给了浏览器，无论这个页面是否完全打开（下载完成），那么都是应当计为1个PV。

2）UV：unique visitor，独立访客数。指访问某个站点或点击某个网页的不同IP地址的人数。在同一天内，UV只记录第一次进入网站的具有独立IP的访问者，在同一天内再次访问该网站则不计数。UV提供了一定时间内不同观众数量的统计指标，而没有反应出网站的全面活动。通过IP和cookie是判断UV值的两种方式：用Cookie分析UV值：当客户端第一次访问某个网站服务器的时候，网站服务器会给这个客户端的电脑发出一个Cookie，通常放在这个客户端电脑的C盘当中。在这个Cookie中会分配一个独一无二的编号，这其中会记录一些访问服务器的信息，如访问时间，访问了哪些页面等等。当你下次再访问这个服务器的时候，服务器就可以直接从你的电脑中找到上一次放进去的Cookie文件，并且对其进行一些更新，但那个独一无二的编号是不会变的。

3）IP：IP可以理解为独立IP的访问用户，指1天内使用不同IP地址的用户访问网站的数量，同一IP无论访问了几个页面，独立IP数均为1。但是假如说两台机器访问而使用的是同一个IP，那么只能算是一个IP的访问。

IP和UV之间的数据不会有太大的差异，通常UV量和比IP量高出一点，每个UV相对于每个IP更准确地对应一个实际的浏览者。

①UV大于IP：这种情况就是在网吧、学校、公司等，公用相同IP的场所中不同的用户，或者多种不同浏览器访问您网站，那么UV数会大于IP数。

②UV小于IP：在家庭中大多数电脑使用ADSL拨号上网，所以同一个用户在家里不同时间访问您网站时，IP可能会不同，因为它会根据时间变动IP，即动态的IP地址，但是实际访客数唯一，便会出现UV数小于IP数。

2、点击统计

      可通过CNZZ对页面添加热力图，从而查看该页面的点击情况。