7、響應(yīng)式設(shè)計(jì)技術(shù)的資源
8、配對(duì)響應(yīng)式設(shè)計(jì)和移動(dòng)優(yōu)先設(shè)計(jì)
9、優(yōu)先內(nèi)容和功能
移動(dòng)優(yōu)先方法并不是默認(rèn)使用桌面版本的網(wǎng)站，而是稍后嘗試將所有內(nèi)容和導(dǎo)航填充到小格式中，而是從最關(guān)鍵的內(nèi)容和功能中逐漸形成，并隨著空間允許逐漸添加輔助材料和功能。這種以移動(dòng)優(yōu)先為重點(diǎn)的方法很好地適應(yīng)了響應(yīng)式設(shè)計(jì)技術(shù)，以及強(qiáng)調(diào)不斷關(guān)注高優(yōu)先級(jí)目標(biāo)和功能的敏捷項(xiàng)目管理。
CSS布局可以使用你對(duì)各種語(yǔ)義HTML容器（完全控制<header>，<main>，<nav>，<article>，<section>，<aside>）或其他<div>容器放置在屏幕移動(dòng)斷點(diǎn)上。
根據(jù)內(nèi)容和導(dǎo)航優(yōu)先級(jí)制定布局決策，而不是簡(jiǎn)單的布局公式。
普遍接入
從內(nèi)容和功能開(kāi)始
我們的建議是在最小的移動(dòng)環(huán)境中制作必備項(xiàng)目的“短名單”，并從那里建立起來(lái)。在紙上或白板上勾畫(huà)出主要屏幕的核心功能和內(nèi)容區(qū)域，然后將這些粗略草圖翻譯成簡(jiǎn)單的框圖，以便頁(yè)面編碼人員可以使用這些框圖創(chuàng)建實(shí)際響應(yīng)的HTML和CSS模型以供學(xué)習(xí)。
使用最佳做法
使用有效的，廣泛支持的HTML5和CSS3來(lái)構(gòu)建您的網(wǎng)站。
利用HTML5和詠嘆調(diào)的新語(yǔ)義，為您的內(nèi)容添加含義，可訪(fǎng)問(wèn)性和搜索可見(jiàn)性。
在整個(gè)布局和排版中使用百分比和ems等比例度量。
根據(jù)觀眾的需求，觀看設(shè)備的可能范圍以及特定內(nèi)容的性質(zhì)，計(jì)算您的響應(yīng)式斷點(diǎn)和媒體查詢(xún)的使用情況。
采用基于移動(dòng)優(yōu)先的方法，建立在最小的基礎(chǔ)體驗(yàn)基礎(chǔ)上。
隨著屏幕空間，帶寬和瀏覽器功能的允許，逐步增強(qiáng)移動(dòng)優(yōu)先體驗(yàn)。
使用瀏覽器優(yōu)先的開(kāi)發(fā)周期，遠(yuǎn)離復(fù)雜的，面向桌面的Photoshop組件和靜態(tài)圖形設(shè)計(jì)?；ㄉ诘撵o態(tài)設(shè)計(jì)模型是一種古老的思維方式，完全與現(xiàn)代網(wǎng)絡(luò)現(xiàn)實(shí)脫節(jié)。
10\頁(yè)面結(jié)構(gòu)組件
構(gòu)建一個(gè)頁(yè)面
頁(yè)眉和網(wǎng)站身份:為您的內(nèi)部和外部Web系統(tǒng)開(kāi)發(fā)一致的企業(yè)身份標(biāo)準(zhǔn)
讓您的軟件采購(gòu)團(tuán)隊(duì)參與進(jìn)來(lái)，并確保他們了解接口和企業(yè)身份問(wèn)題
堅(jiān)持要求每個(gè)軟件供應(yīng)商遵守本地身份，可訪(fǎng)問(wèn)性，圖形和用戶(hù)界面互操作性標(biāo)準(zhǔn)，以使其產(chǎn)品適合您的一般企業(yè)網(wǎng)絡(luò)體驗(yàn)
首頁(yè)鏈接:
如果您的標(biāo)題中沒(méi)有使用徽標(biāo)或圖片，則至少應(yīng)在頁(yè)面左上角附近放置一個(gè)“主頁(yè)”鏈接，其中99.9％的用戶(hù)期望找到它。
全球?qū)Ш?
用性：全球鏈接是用戶(hù)最期待看到的地方。
語(yǔ)義邏輯：全局鏈接的集合應(yīng)該標(biāo)記為一個(gè)列表，因?yàn)樗且粋€(gè)列表。
輔助功能：鏈接的列表格式出現(xiàn)在代碼清單的早期，應(yīng)包含在HTML5 <nav>元素中。
搜索可見(jiàn)性：鏈接在代碼清單頂部的主要導(dǎo)航關(guān)鍵字集合是搜索引擎優(yōu)化的理想選擇。
在較小的移動(dòng)視口設(shè)計(jì)中，通常的做法是將頁(yè)面頁(yè)眉中的主要導(dǎo)航列表正常折疊成較小的“navicon”或“trigram”符號(hào)以節(jié)省空間（HTML字符）。
》》》面包屑導(dǎo)航：
集成到標(biāo)題中的面包屑最好在標(biāo)題的頂部，
面包屑導(dǎo)航的另一個(gè)流行位置位于標(biāo)題導(dǎo)航下方，位于主頁(yè)<h1>標(biāo)題和內(nèi)容的正上方。
搜索:
一個(gè)27個(gè)字符長(zhǎng)的盒子可容納90％的搜索查詢(xún)。亞馬遜的搜索框擁有兩倍以上（五十七個(gè)字符）。
購(gòu)物車(chē):
廣告:“橫幅失明”
側(cè)欄欄:將頁(yè)面區(qū)域細(xì)分為功能區(qū)域是現(xiàn)代平面設(shè)計(jì)的基本特征。
對(duì)網(wǎng)絡(luò)用戶(hù)期望的研究現(xiàn)在支持在左欄中定位導(dǎo)航鏈接的常見(jiàn)做法 - 特別是節(jié)或?qū)Ш?。右?cè)邊欄通常用于廣告，因此請(qǐng)確保您放置在那里的任何圖形內(nèi)容看起來(lái)不像廣告，否則您的讀者可能會(huì)忽略該區(qū)域。
側(cè)邊欄也可用作網(wǎng)頁(yè)搜索框的位置，郵寄地址和聯(lián)系信息，以及其他更小但必要的頁(yè)面元素。研究表明，在本地導(dǎo)航鏈接下的左側(cè)掃描列是大多數(shù)用戶(hù)在查看右側(cè)標(biāo)題區(qū)域后查找搜索功能的第二位。
左側(cè)或右側(cè)導(dǎo)航欄？
喜歡左側(cè)導(dǎo)航的設(shè)計(jì)師經(jīng)常會(huì)引用英語(yǔ)閱讀習(xí)慣和古騰堡圖（見(jiàn)圖8.15），但該圖表明盡管左上角受到讀者最多的關(guān)注，但右上角并不太落后。廣告在右側(cè)欄更為常見(jiàn)，所以用戶(hù)經(jīng)常會(huì)忽略該區(qū)域。由于這是最常見(jiàn)的做法，因此我們通常贊成左側(cè)導(dǎo)航欄，并且利用已建立的慣例是一件好事。
主要內(nèi)容
網(wǎng)頁(yè)內(nèi)容標(biāo)題：不要埋頭。每個(gè)頁(yè)面都需要靠近頂部的可見(jiàn)名稱(chēng)，標(biāo)記為<h1>標(biāo)題。對(duì)于各種邏輯，編輯，可訪(fǎng)問(wèn)性，搜索可見(jiàn)性和常識(shí)性原因，請(qǐng)使用<h1>頁(yè)面頂部的標(biāo)題讓用戶(hù)知道該頁(yè)面的內(nèi)容。確保你的重要內(nèi)容關(guān)鍵字在第一<h1>。
面包屑導(dǎo)航：內(nèi)容區(qū)域的頂部是面包屑導(dǎo)航的常用位置。
跳轉(zhuǎn)到頂部的鏈接：跳轉(zhuǎn)鏈接對(duì)于長(zhǎng)頁(yè)面來(lái)說(shuō)是一個(gè)不錯(cuò)的改進(jìn)。這些鏈接不需要精心制作 - 只要頁(yè)面頂部的鏈接就可以完成，但一個(gè)小箭頭圖標(biāo)可以提供很好的強(qiáng)化。
規(guī)則：這些水平圖形元素很容易被過(guò)度使用，并導(dǎo)致混亂的設(shè)計(jì)。使用CSS來(lái)保持頁(yè)面規(guī)則盡可能不顯眼，非常薄，顏色比周?chē)挠∷⑽淖忠p得多。更好的主意：跳過(guò)規(guī)則并使用一點(diǎn)空白區(qū)域創(chuàng)建可視內(nèi)容分組或分隔。
分頁(yè)導(dǎo)航：在多頁(yè)序列中，在頁(yè)面的頂部和底部有簡(jiǎn)單的文本鏈接以方便將閱讀器移動(dòng)到序列中的前一頁(yè)或下一頁(yè)。在較長(zhǎng)的序列中，提供描述它們?cè)谙盗兄械奈恢玫男畔⑹怯袔椭模纭暗?頁(yè)，共8頁(yè)”。
日期：發(fā)布和更新日期通常對(duì)評(píng)估內(nèi)容的貨幣和相關(guān)性至關(guān)重要。在新聞和雜志網(wǎng)站上，出版日期應(yīng)該顯示在頁(yè)面頂部。其他網(wǎng)站應(yīng)在內(nèi)容區(qū)域的底部顯示最近更新的日期（見(jiàn)圖6.12）。
頁(yè)腳
頁(yè)腳主要是關(guān)于家務(wù)和法律事務(wù)，盡管它們有時(shí)也可以用于非必要的導(dǎo)航。這些元素需要放在頁(yè)面上，但將它們放在某個(gè)位置：
網(wǎng)頁(yè)作者，或者在大型企業(yè)網(wǎng)站中擔(dān)任責(zé)任方
版權(quán)聲明
聯(lián)系方式，特別是電子郵件
鏈接到相關(guān)網(wǎng)站或更大的企業(yè)
冗余導(dǎo)航鏈接，長(zhǎng)頁(yè)面或額外導(dǎo)航。
頁(yè)腳也可用于重復(fù)全球站點(diǎn)鏈接。由文本鏈接組成的擴(kuò)展頁(yè)腳幾乎不增加頁(yè)面的大小，但提供了一個(gè)不顯眼的地方列出精心挑選的鏈接。ibm精心設(shè)計(jì)的導(dǎo)航頁(yè)腳幾乎就像每個(gè)頁(yè)面底部的站點(diǎn)地圖。
優(yōu)化頁(yè)面以實(shí)現(xiàn)快速交付
盡管移動(dòng)網(wǎng)絡(luò)和無(wú)線(xiàn)網(wǎng)絡(luò)速度不斷提高，但移動(dòng)網(wǎng)絡(luò)計(jì)算仍然受到頁(yè)面加載速度相對(duì)較慢的限制。移動(dòng)設(shè)備上的網(wǎng)絡(luò)緩慢導(dǎo)致iOS和Android應(yīng)用程序爆炸式增長(zhǎng)，以提高移動(dòng)設(shè)備上的網(wǎng)絡(luò)服務(wù)性能。
盡管移動(dòng)網(wǎng)絡(luò)和無(wú)線(xiàn)網(wǎng)絡(luò)速度不斷提高，但移動(dòng)網(wǎng)絡(luò)計(jì)算仍然受到頁(yè)面加載速度相對(duì)較慢的限制。移動(dòng)設(shè)備上的網(wǎng)絡(luò)緩慢導(dǎo)致iOS和Android應(yīng)用程序爆炸式增長(zhǎng)，以提高移動(dòng)設(shè)備上的網(wǎng)絡(luò)服務(wù)性能。
這并不意味著您必須從您的網(wǎng)頁(yè)中刪除所有媒體，但這確實(shí)意味著開(kāi)發(fā)人員和設(shè)計(jì)人員需要從頁(yè)面開(kāi)銷(xiāo)中擠出每個(gè)字節(jié)，特別是那些被移動(dòng)用戶(hù)大量使用的字節(jié)。諸如使用HTML5 srcset屬性或<picture>元素來(lái)指??定圖像的幾種尺寸（思考小，中，大），以根據(jù)屏幕尺寸傳遞合適尺寸的圖像，壓縮每個(gè)圖像的壓縮率，使用gif格式來(lái)繪制小的幾何圖形和圖標(biāo)，以jpeg格式，避免使用許多二十四位透明背景PNG圖像，盡可能使用SVG圖形，并使用緊湊符號(hào)字體來(lái)有效傳送圖標(biāo)圖形，這些都是通常用于將不必要的位壓出網(wǎng)頁(yè)圖形的。
11、圍繞“折疊”設(shè)計(jì)
“折疊之上”的頭版報(bào)道是報(bào)紙和網(wǎng)頁(yè)中最重要和最顯眼的。
用戶(hù)必須主動(dòng)滾動(dòng)才能看到的網(wǎng)頁(yè)部分的視圖有明顯的下降。
網(wǎng)頁(yè)的頂部約有80％的關(guān)注度（嚴(yán)格來(lái)說(shuō)，網(wǎng)頁(yè)上的眼動(dòng)追蹤凝視）只有20％的注意力留在頁(yè)面區(qū)域用戶(hù)必須滾動(dòng)顯示的“低于折疊”。
如果您認(rèn)為頁(yè)面的頂部始終是最明顯的區(qū)域，那么這聽(tīng)起來(lái)有點(diǎn)違反直覺(jué)：頁(yè)面頂部并非頁(yè)面最可靠的部分。由于頁(yè)面很復(fù)雜，而且加載速度通常較慢，因此急躁的用戶(hù)通常會(huì)在頁(yè)面頂部完全呈現(xiàn)之前開(kāi)始向下滾動(dòng)頁(yè)面。用戶(hù)也很清楚，頁(yè)面頂部通常用于廣告，因此是尋找信息的不太有用的地方。
選擇向下滾動(dòng)頁(yè)面的網(wǎng)頁(yè)閱讀者往往花費(fèi)的時(shí)間比“上面的折疊”區(qū)域多，這表明當(dāng)讀者發(fā)現(xiàn)頁(yè)面內(nèi)容引人注目時(shí)，他們會(huì)繼續(xù)閱讀該頁(yè)面。
“折疊”不是一種在充分關(guān)注和不重視之間的堅(jiān)硬路線(xiàn)，折疊上方的底部可見(jiàn)區(qū)域受到高度重視，并且可怕的“折疊線(xiàn)”可能較少比以前認(rèn)為的設(shè)計(jì)重要。
選擇向下滾動(dòng)頁(yè)面的網(wǎng)頁(yè)閱讀者往往花費(fèi)的時(shí)間比在“上方”區(qū)域更多，這表明當(dāng)讀者發(fā)現(xiàn)頁(yè)面內(nèi)容引人注目時(shí)，他們會(huì)繼續(xù)閱讀該頁(yè)面。
12、設(shè)計(jì)信息屏幕
大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)可以垂直劃分為具有不同功能和不同圖形和文本復(fù)雜程度的區(qū)域。隨著垂直滾動(dòng)逐漸顯示頁(yè)面，新內(nèi)容出現(xiàn)，上面的內(nèi)容消失。每次閱讀器向下滾動(dòng)頁(yè)面時(shí)都會(huì)建立一個(gè)新的圖形上下文。因此，網(wǎng)頁(yè)布局不應(yīng)該通過(guò)將整個(gè)頁(yè)面視為一個(gè)單元來(lái)進(jìn)行判斷，而應(yīng)該將頁(yè)面劃分為視覺(jué)和功能區(qū)域，并判斷每個(gè)信息屏幕的適用性。
頁(yè)面模板
始終啟動(dòng)您的頁(yè)面模板或CMS主題內(nèi)部頁(yè)面，因?yàn)閮?nèi)部頁(yè)面模板將主導(dǎo)網(wǎng)站。
內(nèi)部頁(yè)面模板必須建立這些重要功能：
提供全球和本地站點(diǎn)導(dǎo)航：使它們?cè)谶壿嬌吓c您的站點(diǎn)的信息架構(gòu)和結(jié)構(gòu)組織一致，適用于小型屏幕的桌面和響應(yīng)式移動(dòng)變體。
建立一個(gè)定期，重復(fù)的設(shè)計(jì)框架：這將在整個(gè)網(wǎng)站內(nèi)一致地組織內(nèi)容。
設(shè)置圖形色調(diào)：這建立了網(wǎng)站的外觀和風(fēng)格，理想情況下，系統(tǒng)由一致的視覺(jué)元素統(tǒng)治，但具有足夠的靈活性以在大型網(wǎng)站內(nèi)創(chuàng)建不同的區(qū)域。
為內(nèi)部頁(yè)面創(chuàng)建模板
輔助頁(yè)面模板
大多數(shù)網(wǎng)站都以多層次的層次結(jié)構(gòu)組織起來(lái)，包括垂直維度（主頁(yè)，輔助頁(yè)面，內(nèi)部頁(yè)面）和橫向分布的不同內(nèi)容區(qū)域，這些區(qū)域以圖形和組織方式幫助讀者導(dǎo)航。輔助頁(yè)面模板應(yīng)與內(nèi)部頁(yè)面模板密切相關(guān)，但必須包含這些附加功能：
建立標(biāo)題標(biāo)簽的層次結(jié)構(gòu)，設(shè)置輔助頁(yè)面與主頁(yè)和大型企業(yè)站點(diǎn)以及內(nèi)部頁(yè)面之間的關(guān)系。
提供獨(dú)特的外觀，將輔助頁(yè)面標(biāo)識(shí)為特殊的“子主頁(yè)”，并建立明確的內(nèi)容主題。
輔助頁(yè)面模板有助于創(chuàng)建具體的網(wǎng)站垂直維度，并可在主頁(yè)和內(nèi)部?jī)?nèi)容頁(yè)面之間的層級(jí)中執(zhí)行各種功能，例如與廣告活動(dòng)或宣傳相關(guān)的特殊目的“登錄頁(yè)面”，您希望讀者到達(dá)您的網(wǎng)站，并立即收到與將廣告帶入您的網(wǎng)站的廣告相關(guān)的信息。
導(dǎo)航和子菜單頁(yè)面
備用“前門(mén)”或“著陸頁(yè)”
部門(mén)或節(jié)目主頁(yè)
為主頁(yè)設(shè)計(jì)一個(gè)模板
但如果您已經(jīng)考慮到了網(wǎng)站導(dǎo)航的基本原理，并且已經(jīng)完成了創(chuàng)建內(nèi)部和輔助頁(yè)面模板的艱苦工作，那么您將有一個(gè)良好的開(kāi)端。最后設(shè)計(jì)主頁(yè)布局允許您確認(rèn)主頁(yè)的獨(dú)特介紹性角色，但將設(shè)計(jì)牢牢地放置在網(wǎng)站的更大導(dǎo)航界面和圖形上下文中。
主頁(yè)有四個(gè)主要元素：
身分
導(dǎo)航
及時(shí)性或內(nèi)容重點(diǎn)
工具（搜索，目錄）
確定你的優(yōu)先事項(xiàng)，并建立一個(gè)主頁(yè)，讓用戶(hù)對(duì)主題和優(yōu)先級(jí)有清晰的認(rèn)識(shí)。
下拉菜單
主題導(dǎo)航與路徑分割
課堂提問(wèn)：
6、響應(yīng)式布局：導(dǎo)航欄的變化
避免公式化的移動(dòng)頁(yè)面設(shè)計(jì)：將側(cè)邊欄內(nèi)容放置在主內(nèi)容欄下面。如果你的側(cè)邊欄有重要內(nèi)容，請(qǐng)?jiān)贑SS中將它設(shè)計(jì)在更高的視覺(jué)位置。
7\Responsive breakpoints
隨著手機(jī)網(wǎng)民的日益增長(zhǎng)，人們希望有更完整的手機(jī)沖浪體驗(yàn)(實(shí)用性與美觀兼?zhèn)洌Ｍ謾C(jī)網(wǎng)頁(yè)更加“原生”而不是僅有基本功能的附屬品。
由于HTML5的支持（響應(yīng)式設(shè)計(jì)）以及現(xiàn)在JavaScript/CSS/DOM等性能和穩(wěn)定程度越來(lái)越高，Web越來(lái)越與原生APP靠近。
8、Breadcrumb trails面包屑導(dǎo)航
面包屑導(dǎo)航不會(huì)占用太多空間，同時(shí)提供了一種方便持久的方式，讓你可以做你最常做的兩件事：回退一個(gè)層次、返回主頁(yè)。對(duì)于層次深的大型網(wǎng)站來(lái)說(shuō)，它們是最有用的。
面包屑導(dǎo)航設(shè)計(jì)中的最佳實(shí)踐：
把它們放在最頂層
這讓它們看起來(lái)像是頁(yè)面的補(bǔ)充機(jī)制，如書(shū)本和雜志的頁(yè)碼一樣。
使用“>”對(duì)層級(jí)進(jìn)行間隔
最好的分隔符就是大于號(hào)，因?yàn)樗谝曈X(jué)上暗示了沿著層級(jí)向前移動(dòng)的動(dòng)作。
加粗最后一個(gè)元素
最后一個(gè)元素是當(dāng)前頁(yè)面的名稱(chēng)，加粗讓它得到應(yīng)有的突出，而且因?yàn)檫@是當(dāng)前頁(yè)面，因此不用添加鏈接。
9、Optimizing Pages For Fast Delivery?優(yōu)化快速交付的頁(yè)面
10、Conversion rates vs. load time?轉(zhuǎn)換率 與 加載時(shí)間
11、網(wǎng)頁(yè)需要加載更多的媒體內(nèi)容，但是網(wǎng)頁(yè)制作者提高頁(yè)面加載速度的方法并不是減少這些媒體內(nèi)容，而是利用各種方法壓縮網(wǎng)頁(yè)字節(jié)大小?？梢圆捎玫募夹g(shù)如，使用HTML5的srcset屬性或<picture>標(biāo)簽設(shè)置幾個(gè)固定的圖片大?。ù蟆⒅?、?。鶕?jù)屏幕分辨率讓瀏覽器自行選?。皇褂肑PEG或GIF格式的圖標(biāo)及圖片，避免使用24位的PNG格式作為背景圖片；更可以將網(wǎng)頁(yè)的所有圖形內(nèi)容都改為SVG格式。
這些從點(diǎn)點(diǎn)滴滴提高頁(yè)面加載速度的方法，在經(jīng)常被用戶(hù)在手機(jī)中訪(fǎng)問(wèn)的網(wǎng)頁(yè)來(lái)說(shuō)尤為重要。
12、“ABOVE THE FOLD” 原則??！
1994年始，各界便開(kāi)始研究網(wǎng)頁(yè)分屏與用戶(hù)瀏覽行為的關(guān)系。通過(guò)“眼球追蹤技術(shù)”及大量實(shí)驗(yàn)數(shù)據(jù)，就電腦屏幕來(lái)說(shuō)，不同尺寸大小及不同瀏覽器樣式的屏幕，用戶(hù)一定會(huì)看到的高度在約0~1000px之間，而隨著分屏的增加，第二屏、第三屏...的內(nèi)容被用戶(hù)瀏覽的幾率會(huì)遞減。
據(jù)研究顯示，第一屏（“above the fold”）的內(nèi)容被用戶(hù)看到的幾率是80%，而第一屏之下的內(nèi)容（“below the fold”）只有20%幾率。
然而，隨著手機(jī)等移動(dòng)設(shè)備的興起、網(wǎng)頁(yè)承載更多媒體元素、以及網(wǎng)站設(shè)計(jì)者們制作出更多樣式豐富新穎的網(wǎng)站，研究顯示出網(wǎng)站“第一屏”原則已經(jīng)被打破了。
GOOGLE的一項(xiàng)著名研究顯示，大約有一半網(wǎng)站用戶(hù)將注意力用在第一屏之下（高度大于900px）。這個(gè)結(jié)果似乎與人們之前認(rèn)為“放得越高的內(nèi)容越容易受到用戶(hù)關(guān)注”有所不符，這很大可能是因?yàn)榫W(wǎng)站第一屏內(nèi)容形式多樣、數(shù)量多，用戶(hù)會(huì)滑到下一屏先行瀏覽，等待第一屏加載完成后再返回查看；另外一個(gè)原因是，用戶(hù)開(kāi)始意識(shí)到網(wǎng)站首屏常常放置一些廣告內(nèi)容（廣告盲點(diǎn)Banner Blindness）。這種“非首屏原則”的情況在手機(jī)中更甚，用戶(hù)能夠輕松滑動(dòng)查看且分屏概念更輕。
我們?nèi)匀豢梢越o出一個(gè)結(jié)論：“信息屏”仍然是轉(zhuǎn)換率的重要節(jié)點(diǎn)，對(duì)電腦屏幕和平板屏幕來(lái)說(shuō)，最重要的內(nèi)容仍然不應(yīng)放置在低于600-700px的位置。
13、不要讓主頁(yè)綁架了你的設(shè)計(jì)步驟
請(qǐng)先設(shè)計(jì)你的內(nèi)頁(yè)（網(wǎng)站或CMS都是如此），因?yàn)閮?nèi)頁(yè)才是主宰你的網(wǎng)站生命力的元素。設(shè)計(jì)好你的內(nèi)頁(yè)，然后根據(jù)內(nèi)頁(yè)來(lái)設(shè)計(jì)二級(jí)頁(yè)面、首頁(yè)。（試想你如何在網(wǎng)內(nèi)頁(yè)會(huì)被你的用戶(hù)訪(fǎng)問(wèn)成千上萬(wàn)次，內(nèi)頁(yè)的導(dǎo)航設(shè)計(jì)、交互設(shè)計(jì)、響應(yīng)式設(shè)計(jì)、圖形設(shè)計(jì)都是影響用戶(hù)體驗(yàn)的重要部分。頁(yè)上搜索一部電視??？）
請(qǐng)確保你的內(nèi)頁(yè)做到以下幾點(diǎn)：
- 提供全局導(dǎo)航和次級(jí)導(dǎo)航
導(dǎo)航功能：告訴我們這里有什么、告訴我們?nèi)绾问褂镁W(wǎng)站、給了我們對(duì)網(wǎng)站建設(shè)者的信心 - 規(guī)律的設(shè)計(jì)框架
- 統(tǒng)一的樣式與基調(diào)
二級(jí)頁(yè)面設(shè)計(jì)要素
請(qǐng)確保你的二級(jí)頁(yè)面做到以下幾點(diǎn)：
清楚展示二級(jí)頁(yè)面與內(nèi)頁(yè)、與首頁(yè)的層級(jí)關(guān)系
使用標(biāo)簽、tab導(dǎo)航欄等表明清楚二級(jí)頁(yè)面與內(nèi)頁(yè)和首頁(yè)的層級(jí)關(guān)系
https://v.qq.com/tv/給二級(jí)頁(yè)面獨(dú)特的樣式
二級(jí)頁(yè)面要有清楚的內(nèi)容主題（如：教務(wù)教學(xué)、學(xué)院設(shè)置、電視劇、綜藝等）；
二級(jí)頁(yè)面的樣式要有別于主頁(yè)，但也要兼具首頁(yè)的指引、導(dǎo)航功能。
主頁(yè)設(shè)計(jì)要素
主頁(yè)必須有四個(gè)要素：
標(biāo)識(shí)（身份）
導(dǎo)航
重點(diǎn)內(nèi)容
工具（搜索、購(gòu)物車(chē)、字典等）
優(yōu)秀網(wǎng)站首頁(yè)都要包含如上要素，但要素的重要性及顯眼程度不必均等，如何設(shè)計(jì)擺放由你的網(wǎng)站的內(nèi)容、風(fēng)格決定。比如，亞馬遜主頁(yè)幾乎都在做內(nèi)容導(dǎo)航，耶魯大學(xué)官網(wǎng)主頁(yè)大量篇幅在做自我標(biāo)識(shí)，GOOGLE主頁(yè)都是工具。一個(gè)有效的網(wǎng)站，不可能對(duì)所有人都面面俱到，找出你的網(wǎng)站最重要的目的是什么，進(jìn)而放大這個(gè)元素，讓你的網(wǎng)站擁有明確的主題與內(nèi)容的優(yōu)先級(jí)。
HTML5新結(jié)構(gòu)標(biāo)簽、內(nèi)容標(biāo)簽
