目錄：
一恩急、什么是單頁？
二纪蜒、單頁策劃
三衷恭、單頁設(shè)計
? ? （1、思維? ? 2纯续、技巧? ? ? 3随珠、構(gòu)圖）
四、單頁SEO
? ? （1杆烁、URL? ? 2牙丽、TKD）
五、單頁統(tǒng)計
? ? （1兔魂、流量統(tǒng)計? ? 2烤芦、點擊統(tǒng)計）
一、什么是單頁析校？
? ? ? 單頁构罗，簡單將其比喻為在一張紙。單頁最早出現(xiàn)在平面設(shè)計中智玻，設(shè)計師通過用不同尺寸遂唧、材質(zhì)的紙張，在僅有的正面和反面上進(jìn)行自由設(shè)計的過程吊奢，主要用在折頁盖彭、宣傳單、海報中。
二召边、單頁策劃
? ? ? web 端的頁面铺呵，一般包含全站頁頭、頁底這兩個公共組件隧熙；H5頁面片挂，一般包含頁頭以及頁底的版權(quán)信息。共同點是專題主題與文案贞盯、相關(guān)圖片素材等音念。
三、單頁設(shè)計
1躏敢、思維
? ? ? ? 要使得“首屏-次屏-內(nèi)容區(qū)間”的視覺更加的連貫和流暢闷愤，就要充分利用好“局部對比”和“整體關(guān)系”讓頁面效果更加的完整。
? ? ? ? 點：整體頁面中的主題父丰，即專題設(shè)計的切入點肝谭，起到引起注意的作用。
? ? ? ? 線：專題頁中的主線蛾扇，具有引導(dǎo)攘烛、連接的作用，引出故事情節(jié)镀首。
? ? ? ? 面：整個頁面的完成度坟漱，強調(diào)的是從頭到尾（首屏-次屏-內(nèi)容區(qū)-最底部）、從局部到整體的視覺聯(lián)系更哄。
2芋齿、技巧
· 一般頭圖的高度是450?600px之間，太高浪費空間成翩。
· 首屏與次屏在設(shè)計上不要有明顯的顏色條分隔觅捆、形式分隔、線分隔等麻敌。
· 頭和尾部的元素要在視覺上做到呼應(yīng)和一致性栅炒，一筆直下、一氣呵成术羔。
· 盡量不要用色塊對頁面內(nèi)容分區(qū)赢赊，整體的單頁設(shè)計大多用的是單一顏色的背景。
· 從排版级历、字體選擇释移、按鈕樣式、色彩等方面都要做到一致性寥殖，這樣的單頁才是整體的玩讳。
· 保持屏與屏之間的可呼吸性和留白涩蜘，給人們放松和喘息的空間。
· 在設(shè)計中用放大局部來看細(xì)節(jié)熏纯，縮小頁面來看整體頁面皱坛。
· 在構(gòu)思前，給整體頁面設(shè)定出一個故事豆巨，讓頁面具有新穎的主題性。
· 利用完美的順滑的瀏覽體驗掐场，將各個內(nèi)容間無縫且精巧的連接起來局部某些元素去做分層的動畫特效往扔。如 http://philwappler.de/
3、構(gòu)圖
? ? ? 常見的構(gòu)圖方式有：幾何切割（簡單切割熊户、對稱切割萍膛、組合切割、多重切割）嚷堡、主體輪廓蝗罗、發(fā)射與透視、整體場景蝌戒、流程圖串塑。
? ? ? 在拿到需求的時候，先不著急下手北苟，構(gòu)思的時候可以大膽嘗試桩匪，考慮內(nèi)容和風(fēng)格，先確定構(gòu)圖友鼻，再往里面添加內(nèi)容傻昙，充分考慮到內(nèi)容的排版，盡量做到讓一個專題有大創(chuàng)意的同時又具有小細(xì)節(jié)，實現(xiàn)整體形式感的完美和諧的統(tǒng)一。
? ? ? 所謂構(gòu)圖就是將表現(xiàn)主題的各個構(gòu)成要素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域藕各，形成視覺感受瘾蛋，達(dá)到設(shè)計意圖。所有的構(gòu)圖方式追根究底都是為內(nèi)容服務(wù)启搂，構(gòu)圖必須要服從主題表現(xiàn)的要求，設(shè)計師在設(shè)計的時候要注意在追求創(chuàng)意構(gòu)圖的同時也別影響到用戶閱讀內(nèi)容。
1）幾何切割
? ? ? ? 三角形纤虽、正方形、長方形绞惦、圓形逼纸、幾根線條，就可以組成很多有趣的圖形济蝉。適當(dāng)?shù)漠嬅媲懈钅軌蚪o頁面帶來動感與節(jié)奏感杰刽；加入幾根線條菠发，幾個塊面就能令頁面起到意想不到的效果，內(nèi)容區(qū)域也能得到有效劃分贺嫂，具體排版可根據(jù)內(nèi)容來處理滓鸠。
? ? ? ? 簡單切割：這類構(gòu)圖方式對內(nèi)容沒有過多要求，可隨意安排第喳，具體排版可根據(jù)內(nèi)容來處理糜俗。用一個形狀或者素材切分整個頁面，畫面瞬時變得有趣生動起來曲饱，內(nèi)容區(qū)域也能得到有效劃分悠抹。
? ? ? 對稱切割：這種構(gòu)圖方式的前提一般是內(nèi)容分主要兩部分，并且這兩部分是對立關(guān)系的情況下扩淀，比如說：對戰(zhàn)楔敌，男女，冷熱等等驻谆。頁面一分為二卵凑，內(nèi)容劃分明確也更加具有視覺沖擊力。
? ? ? ? 組合切割：這種構(gòu)圖方式適合那種每個區(qū)塊中的內(nèi)容屬于平級關(guān)系的專題胜臊，例如示例中的幾個功能點和分類勺卢，都是屬于同一級的內(nèi)容，所占的比例也相同区端，用這種組合的排列能夠保持各內(nèi)容的關(guān)系值漫，也能讓布局更有創(chuàng)意。集中而規(guī)律的排列织盼，從整體上抓住人們的視覺杨何。
? ? ? 多重切割：這種構(gòu)圖方式使用最多的一般是為了體現(xiàn)時尚感，科技感沥邻，與鋒利感覺的專題危虱，例如時裝，家電唐全，以及游戲戰(zhàn)斗類的專題等等埃跷。不規(guī)則的構(gòu)圖，穩(wěn)定而銳利邮利，干凈的排版弥雹，易于識別，不規(guī)則的構(gòu)圖方式延届，避免了畫面生硬剪勿，不易產(chǎn)生審美疲勞。不同的形狀和排列方庭，呈現(xiàn)出來的視覺效果也不一樣厕吉。
? ? 實例：
2）主體輪廓
? ? ? ? 根據(jù)專題的主要內(nèi)容酱固，從整體上構(gòu)建一個邊界或外形線，形成一個大的輪廓头朱，將專題內(nèi)容巧妙的填充進(jìn)去运悲，讓用戶一眼就能了解到一些信息，符合專題主題项钮，并且能夠讓頁面更有設(shè)計感班眯，生動且活潑。需要提醒的是烁巫，設(shè)計的時候?qū)⑿螤畋M量輪廓化鳖敷，加以強調(diào)突出，主體不需要太具象程拭，舍棄一些繁瑣的、次要的元素棍潘，以免影響用戶閱讀內(nèi)容恃鞋。在拿到需求的時候先進(jìn)行腦暴發(fā)散聯(lián)想，提取出一些有用的信息亦歉，再從中挑選出適合元素去尋找一些圖片恤浪，通過圖片素材來激發(fā)創(chuàng)意。
3）發(fā)射與透視
? ? ? 通過整體放射狀加透視構(gòu)圖肴楷，使畫面呈現(xiàn)立體與空間感水由，視覺焦點明確，畫面沖擊力強赛蔫，富有動感砂客。需要注意的是，放射狀的排版不太適合文字閱讀呵恢，要注意文字排版鞠值。建議在文字?jǐn)?shù)量較少的情況下選擇此種構(gòu)圖。一般游戲激戰(zhàn)類的專題會較多的使用這種構(gòu)圖渗钉，突出動感彤恶。
4）整體場景
? ? ? 專題內(nèi)容不多，要突出趣味性鳄橘，又怕用戶無聊声离，那就設(shè)計成一副美妙的插畫吧！讓用戶迅速置身在搭建的場景中瘫怜，帶動情緒术徊，參與互動，直觀獲取有用信息宝磨。這種處理方式會使頁面信息表現(xiàn)的更加準(zhǔn)確順暢弧关，快速有效的把目標(biāo)用戶帶入到頁面氛圍當(dāng)中盅安。不過需要注意的是場景搭建對素材的要求比較高，明暗世囊，陰影别瞭，透視以及層次感，體積都需要用心處理株憾。這類專題大多都會搭配動畫一起實現(xiàn)蝙寨，在帶入感上更進(jìn)一層。在設(shè)計的時候嗤瞎，對專題內(nèi)容頭腦里要有畫面感墙歪，先搭建大的畫面關(guān)系，再往里頭添細(xì)節(jié)和內(nèi)容贝奇，切記場景不要搶了內(nèi)容的視覺焦點虹菲，在適當(dāng)?shù)臅r候做些減法。
5）流程圖? ? ? ?
? ? 專題是漸進(jìn)以及流向又或者是展示各節(jié)點的內(nèi)容掉瞳，用別的形式總感覺不夠具象毕源，那何不干脆做成一個個性化的流程圖？俗話說陕习，千言萬語不如一張圖霎褐，專題運用這種構(gòu)圖方式能夠?qū)⒉襟E，關(guān)系该镣，各個節(jié)點以及整體流向展示清楚冻璃，配合圖片展示，一個枯燥的流程瞬間變得個性十足损合，用戶瀏覽簡單又明了省艳，并且充滿了趣味性。
四嫁审、單頁SEO
1拍埠、URL
? ? ? 統(tǒng)一資源定位符（Uniform Resource Locator）是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示，是互聯(lián)網(wǎng)上標(biāo)準(zhǔn)資源的地址土居≡婀海互聯(lián)網(wǎng)上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它擦耀。
? ? ? 基本URL包含模式（或稱協(xié)議）棉圈、服務(wù)器名稱（或IP地址）、路徑和文件名眷蜓，即“協(xié)議://授權(quán)/路徑?查詢”分瘾。
? ? ? 如：http://www.aipai.com/tuijianpiao.html
? ? ? 1）http://：是協(xié)議，也就是HTTP超文本傳輸協(xié)議吁系，也就是網(wǎng)頁在網(wǎng)上傳輸?shù)膮f(xié)議德召。? ? ? ? ?
? ? ? 2）www：是服務(wù)器名白魂，代表著是一個www服務(wù)器。
? ? ? 3）aipai.com：這域名上岗，是用來定位網(wǎng)站的獨一無二的名字福荸。
? ? ? 4）www.aipai.com：是網(wǎng)站名，由服務(wù)器名+域名組成肴掷。
? ? ? 5）/：這個是根目錄敬锐，通過網(wǎng)站名找到服務(wù)器，然后在服務(wù)器存放網(wǎng)頁的根目錄呆瞻。
? ? ? 6）tuijianpiao.html：是根目錄下的指定網(wǎng)頁台夺。
? ? ? 7）http://www.aipai.com/tuijianpiao.html：叫做URL，用于定位網(wǎng)上的資源痴脾。
2颤介、TKD
1）含義
? ? ? TITLE元素僅可在 HEAD 元素內(nèi)使用。位于 TITLE 開閉標(biāo)簽之內(nèi)的文本都會在瀏覽器的標(biāo)題欄和 Microsoft Windows 的任務(wù)欄上顯示赞赖。對于 Web 頁买窟，“Internet Explorer”會被自動追加到標(biāo)題后。而在 HTML應(yīng)用程序(HTA)中薯定，僅會顯示指定的標(biāo)題。要使用腳本在程序中設(shè)置標(biāo)題瞳购，請使用 document.title 而不是設(shè)置 title 對象的 innerHTML 屬性话侄。
? ? Keywords又叫關(guān)鍵詞、關(guān)鍵字学赛，其就是一個網(wǎng)站管理者給網(wǎng)站某個頁面設(shè)定的以便用戶通過搜索引擎能搜到本網(wǎng)頁的詞匯年堆，關(guān)鍵詞代表了網(wǎng)站的市場定位。網(wǎng)站的首頁關(guān)鍵詞至關(guān)重要盏浇。首頁網(wǎng)站關(guān)鍵詞代表了網(wǎng)站主題內(nèi)容变丧，內(nèi)頁和欄目頁的關(guān)鍵詞一般緊扣頁面主題，代表的是當(dāng)前頁面或者欄目內(nèi)容的主體绢掰。
? ? Description出現(xiàn)在網(wǎng)頁的痒蓬；之間meta標(biāo)簽之一，可稱為“內(nèi)容標(biāo)簽”滴劲，“描述標(biāo)簽”或“內(nèi)容摘要”可以預(yù)見在以后的用戶搜索中Description會扮演越來越重要的技術(shù)之一攻晒。
2）格式
五、單頁統(tǒng)計
1班挖、流量統(tǒng)計
? ? ? 可通過CNZZ鲁捏，由前端在頁面上添加統(tǒng)計代碼，從而得到頁面的流量數(shù)據(jù)萧芙。主要有以下數(shù)據(jù)：
1）PV给梅，page view假丧，頁面訪問。所有訪問者在24小時（0點到24點）內(nèi)看了某個網(wǎng)站多少個頁面或某個網(wǎng)頁多少次动羽。PV是指頁面刷新的次數(shù)包帚，每一次頁面刷新，就算做一次PV流量曹质。度量方法就是從瀏覽器發(fā)出一個對網(wǎng)絡(luò)服務(wù)器的請求（Request）婴噩，網(wǎng)絡(luò)服務(wù)器接到這個請求后，會將該請求對應(yīng)的一個網(wǎng)頁（Page）發(fā)送給瀏覽器羽德，從而產(chǎn)生了一個PV几莽。那么在這里只要是這個請求發(fā)送給了瀏覽器，無論這個頁面是否完全打開（下載完成）宅静，那么都是應(yīng)當(dāng)計為1個PV章蚣。
2）UV：unique visitor，獨立訪客數(shù)姨夹。指訪問某個站點或點擊某個網(wǎng)頁的不同IP地址的人數(shù)纤垂。在同一天內(nèi)，UV只記錄第一次進(jìn)入網(wǎng)站的具有獨立IP的訪問者磷账，在同一天內(nèi)再次訪問該網(wǎng)站則不計數(shù)峭沦。UV提供了一定時間內(nèi)不同觀眾數(shù)量的統(tǒng)計指標(biāo)，而沒有反應(yīng)出網(wǎng)站的全面活動逃糟。通過IP和cookie是判斷UV值的兩種方式：用Cookie分析UV值：當(dāng)客戶端第一次訪問某個網(wǎng)站服務(wù)器的時候吼鱼，網(wǎng)站服務(wù)器會給這個客戶端的電腦發(fā)出一個Cookie，通常放在這個客戶端電腦的C盤當(dāng)中绰咽。在這個Cookie中會分配一個獨一無二的編號菇肃，這其中會記錄一些訪問服務(wù)器的信息，如訪問時間取募，訪問了哪些頁面等等琐谤。當(dāng)你下次再訪問這個服務(wù)器的時候，服務(wù)器就可以直接從你的電腦中找到上一次放進(jìn)去的Cookie文件玩敏，并且對其進(jìn)行一些更新斗忌，但那個獨一無二的編號是不會變的。
3）IP：IP可以理解為獨立IP的訪問用戶旺聚，指1天內(nèi)使用不同IP地址的用戶訪問網(wǎng)站的數(shù)量飞蹂，同一IP無論訪問了幾個頁面，獨立IP數(shù)均為1翻屈。但是假如說兩臺機器訪問而使用的是同一個IP陈哑，那么只能算是一個IP的訪問。
IP和UV之間的數(shù)據(jù)不會有太大的差異，通常UV量和比IP量高出一點惊窖，每個UV相對于每個IP更準(zhǔn)確地對應(yīng)一個實際的瀏覽者刽宪。
①UV大于IP：這種情況就是在網(wǎng)吧、學(xué)校界酒、公司等圣拄，公用相同IP的場所中不同的用戶，或者多種不同瀏覽器訪問您網(wǎng)站毁欣，那么UV數(shù)會大于IP數(shù)庇谆。
②UV小于IP：在家庭中大多數(shù)電腦使用ADSL撥號上網(wǎng)，所以同一個用戶在家里不同時間訪問您網(wǎng)站時凭疮，IP可能會不同饭耳，因為它會根據(jù)時間變動IP，即動態(tài)的IP地址执解，但是實際訪客數(shù)唯一寞肖，便會出現(xiàn)UV數(shù)小于IP數(shù)。
2衰腌、點擊統(tǒng)計
? ? ? 可通過CNZZ對頁面添加熱力圖新蟆，從而查看該頁面的點擊情況。
