原型設(shè)計(jì)規(guī)范網(wǎng)頁(yè)規(guī)范用戶(hù)體驗(yàn)規(guī)范交互規(guī)范

《原型設(shè)計(jì)規(guī)范網(wǎng)頁(yè)規(guī)范用戶(hù)體驗(yàn)規(guī)范交互規(guī)范》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

原型設(shè)計(jì)規(guī)范網(wǎng)頁(yè)規(guī)范用戶(hù)體驗(yàn)規(guī)范交互規(guī)范482020年4月19日

1文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。用戶(hù)體驗(yàn)產(chǎn)品規(guī)范V1.0目錄1、概述21.1規(guī)范目的21.2規(guī)范人群21.3規(guī)范范圍22、web架構(gòu)22.1web社會(huì)化框架32.1.1AFO方法3首要活動(dòng)3識(shí)別社會(huì)化交互對(duì)象4Feature（功能）-選擇核心功能集。52.2web信息架構(gòu)62.2.1web架構(gòu)62.2.2信息頁(yè)面72.2.2.1*用戶(hù)視覺(jué)習(xí)慣72.2.2.2*頁(yè)面寬度102.2.2.3*一致性112.2.2.4*簡(jiǎn)潔性122.2.2.5*清晰122.2.2.6*當(dāng)前狀態(tài)122.2.2.7導(dǎo)航122.2.2.8平面版式132.2.2.9欄目布局182.2.2.10欄目182.2.2.11分頁(yè)192.2.2.12搜索192.2.2.13文字202.2.2.14圖片212.2.2.15頁(yè)腳信息232.2.3界面內(nèi)部交互482020年4月19日

2文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。242.2.3.1*用戶(hù)的操作習(xí)慣242.2.3.2*用戶(hù)行為自由可控242.2.3.3*容錯(cuò)性252.2.3.4*操作的靈活高效性252.2.3.5*操作提示262.2.3.6*各類(lèi)彈框272.2.4頁(yè)面間交互282.2.5任務(wù)交互（工具類(lèi)）292.3web業(yè)務(wù)架構(gòu)292.4web結(jié)構(gòu)seo292.4.1邏輯結(jié)構(gòu)302.4.1.1邏輯結(jié)構(gòu)的意義302.4.1.2邏輯結(jié)構(gòu)規(guī)范302.4.1.3邏輯結(jié)構(gòu)兩個(gè)要點(diǎn)312.4.1.4邏輯結(jié)構(gòu)圖322.4.2物理結(jié)構(gòu)332.4.2.1物理結(jié)構(gòu)的意義332.4.2.2物理結(jié)構(gòu)的規(guī)范-扁平式342.4.2.3物理結(jié)構(gòu)的規(guī)范-樹(shù)形結(jié)構(gòu)34482020年4月19日

3文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。1、概述1.1規(guī)范目的·在產(chǎn)品規(guī)劃時(shí)，給部門(mén)內(nèi)部的成員提供統(tǒng)一的規(guī)范和指導(dǎo)，有利于保證產(chǎn)品；·解決公司產(chǎn)品的可用性482020年4月19日

4文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。問(wèn)題，即使操作更加人性化，減輕用戶(hù)認(rèn)知負(fù)擔(dān)，改進(jìn)產(chǎn)品的用戶(hù)體驗(yàn)，提升產(chǎn)品的市場(chǎng)競(jìng)爭(zhēng)力；·使產(chǎn)品在表現(xiàn)層面上達(dá)成界面外觀(guān)與操作行為的一致。1.2規(guī)范人群參與產(chǎn)品規(guī)劃的產(chǎn)品部成員。1.3規(guī)范范圍所有互聯(lián)網(wǎng)產(chǎn)品。2、web架構(gòu)如果把一個(gè)網(wǎng)站比喻成一座建筑，那么這個(gè)建筑的結(jié)構(gòu)就是這個(gè)網(wǎng)站的架構(gòu)。建筑的結(jié)構(gòu)決定了人們對(duì)它的第一印象，也決定了它最凸出的個(gè)性。建筑的結(jié)構(gòu)能夠從美的角度、實(shí)用的角度、個(gè)性的角度等方面分析。web架構(gòu)主要能夠從四方面分析：社會(huì)化框架、信息架構(gòu)、業(yè)務(wù)架構(gòu)、結(jié)構(gòu)SEO?？疾爝@四個(gè)方面的都有各自的意義：網(wǎng)站社會(huì)化框架，以提高用戶(hù)粘度為中心；信息架構(gòu)，以滿(mǎn)足用戶(hù)需求為中心；業(yè)務(wù)架構(gòu)，以客戶(hù)賺錢(qián)為中心；為web架構(gòu)seo，以服務(wù)搜索引擎為中心。其中社會(huì)化框架和信息架構(gòu)二者能夠相互促進(jìn)；web架構(gòu)seo相對(duì)獨(dú)立，但它也跟信息架構(gòu)的頁(yè)面鏈接有很大的關(guān)系；信息架構(gòu)和業(yè)務(wù)架構(gòu)有時(shí)候會(huì)有沖突，這時(shí)482020年4月19日

5文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。取決于我們優(yōu)先滿(mǎn)足普通用戶(hù)還是客戶(hù)，或是當(dāng)前產(chǎn)品的正處在的階段決定它們的優(yōu)先級(jí)。2.1web社會(huì)化框架什么是社會(huì)化框架？社會(huì)化設(shè)計(jì)是對(duì)支持社會(huì)交往的網(wǎng)站或應(yīng)用的構(gòu)思、規(guī)劃和構(gòu)建的過(guò)程。社會(huì)化框架即是社會(huì)化網(wǎng)站設(shè)計(jì)時(shí)形成的框架。考察網(wǎng)站社會(huì)化框架，主要是以提高用戶(hù)粘度為中心。2.1.1AFO方法Activity（活動(dòng)）-專(zhuān)注首要活動(dòng)。Object（對(duì)象）-辨識(shí)交互對(duì)象Feature（功能）-選擇核心功能集。首要活動(dòng)我們首先要解決（并伴隨整個(gè)設(shè)計(jì)過(guò)程）的問(wèn)題是——你的用戶(hù)要用你的產(chǎn)品做什么？首要活動(dòng)只有一個(gè)最能吸引人的應(yīng)用，就是讓人出眾完成某個(gè)特定活動(dòng)的應(yīng)用總結(jié)：當(dāng)我們?cè)陂_(kāi)發(fā)一個(gè)新產(chǎn)品時(shí)，我們要解決的最重要的問(wèn)題不是“誰(shuí)要用我的產(chǎn)品”，而是“用戶(hù)要用我的產(chǎn)品來(lái)做什么”！我們平臺(tái)的首要活動(dòng)呢？482020年4月19日

6文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。識(shí)別首要活動(dòng)用戶(hù)的什么行為是網(wǎng)站獲得成功的關(guān)鍵？亞馬遜回答是付款、淘寶呢？微薄目標(biāo)：用戶(hù)希望達(dá)到的最終目標(biāo)購(gòu)買(mǎi)日用品娛樂(lè)賺錢(qián)享受美食與家人保持聯(lián)系……..活動(dòng)：實(shí)現(xiàn)目標(biāo)的一系列任務(wù)的組合往往會(huì)專(zhuān)注于具體的任務(wù)，而忽略更寬泛的活動(dòng)。我們不能盯著付款這個(gè)具體操作，忽略購(gòu)買(mǎi)這個(gè)活動(dòng)任務(wù)：具體的某個(gè)功能識(shí)別社會(huì)化交互對(duì)象每一個(gè)活動(dòng)都與特定對(duì)象相關(guān),確定首要活動(dòng)后的下一步是，用戶(hù)進(jìn)行這些活動(dòng)時(shí)的交互對(duì)象。模擬實(shí)物：Facebook——在哈佛大學(xué)，facebook是一個(gè)真正的本子亞馬遜的禮物愿望單——482020年4月19日

7文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。原型是人們用紙寫(xiě)下并相互分享的禮物愿望單Web應(yīng)用中社交對(duì)象不一定要表現(xiàn)真實(shí)物品（視頻、音樂(lè)、電子狗），她們有時(shí)候也是能夠抽象的社交對(duì)象設(shè)計(jì)成功的案例照片書(shū)簽博客商品職位電影視頻新鮮事消息演示文檔…..為社會(huì)化對(duì)象分配URL地址：對(duì)象有了URL地址就能夠被分享出去對(duì)象有了URL地址就更容易被查找和尋回URL讓人能夠直接鏈接對(duì)象搜索引擎能利用URL更好工作Feature（功能）-選擇核心功能集我們能夠從首要活動(dòng)及交互對(duì)象推導(dǎo)出核心功能集。為此我們要解決這些問(wèn)題：1用戶(hù)會(huì)對(duì)交互對(duì)象做哪些操作？2有哪些功能足夠重要，是web應(yīng)用必須支持的？尋找動(dòng)詞482020年4月19日

8文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。留意任何的對(duì)象集合，它們一般會(huì)成為有價(jià)值的功能。其中重要的集合方式是列表下面是搜索對(duì)象的幾種常見(jiàn)的來(lái)源：禮物愿望單我的…（照片、評(píng)論、書(shū)簽）購(gòu)物車(chē)好友的…收藏夾項(xiàng)目分享?xiàng)l目AFO的方法指引來(lái)搜索亞馬遜提供的社會(huì)化功能商品評(píng)分加入禮物愿望單分享個(gè)人商品圖片新婚/新生兒禮物單買(mǎi)了該產(chǎn)品的用戶(hù)還買(mǎi)了…告訴朋友…2.2web信息架構(gòu)信息架構(gòu)482020年4月19日

9文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。,一般認(rèn)為是根據(jù)客戶(hù)需求分析的結(jié)果，準(zhǔn)確定位網(wǎng)站目標(biāo)群體，設(shè)定網(wǎng)站整體架構(gòu)，規(guī)劃、設(shè)計(jì)網(wǎng)站欄目及其內(nèi)容，制定網(wǎng)站頁(yè)面操作流程及頁(yè)面交互，以最大限度地符合用戶(hù)的需求。2.2.1web架構(gòu)架構(gòu)的層級(jí)架構(gòu)的層級(jí)很大程度上決定了，用戶(hù)經(jīng)過(guò)首頁(yè)需要點(diǎn)擊多少次才能夠到達(dá)自己想看的內(nèi)容。單純考慮層級(jí)，層級(jí)越少越好，最佳狀況是層級(jí)不超過(guò)三層。如果能保證層級(jí)不超過(guò)三層，就差不多能夠保證用戶(hù)點(diǎn)擊三次以?xún)?nèi)就能夠看到自己想看的內(nèi)容。架構(gòu)的寬度用戶(hù)能夠見(jiàn)的第一層架構(gòu)寬度主要是導(dǎo)航的鏈接數(shù)。用戶(hù)短時(shí)間的記憶力一般情況是7±2，因此每個(gè)層級(jí)下架構(gòu)的寬度都不應(yīng)該太寬，否則會(huì)考驗(yàn)用戶(hù)的記憶力。架構(gòu)的平衡度因?yàn)楝F(xiàn)在的大型網(wǎng)站，特別是門(mén)戶(hù)網(wǎng)站，它們的信息量非常的龐大，經(jīng)過(guò)首頁(yè)3次點(diǎn)擊都能到達(dá)所有的內(nèi)容已經(jīng)完全無(wú)法實(shí)現(xiàn)。一定的信息量，架構(gòu)的層級(jí)和架構(gòu)寬度是相互對(duì)立的，如果層級(jí)少則要求架構(gòu)寬度增加，反之毅然。架構(gòu)能夠給信息進(jìn)行分類(lèi)、組織，讓用戶(hù)更清晰地找到自己要找的內(nèi)容，可是分類(lèi)過(guò)多或是層級(jí)過(guò)深會(huì)增加用戶(hù)的學(xué)習(xí)成本。在信息量大的時(shí)候一定要綜合考慮架構(gòu)的層級(jí)和寬度平衡482020年4月19日

10文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。2.2.2信息頁(yè)面頁(yè)面是承載信息的載體。2.2.2.1*用戶(hù)視覺(jué)習(xí)慣1、順應(yīng)用戶(hù)基本的閱讀習(xí)慣：從左到右、從上到下2、F型布局.尼爾森眼動(dòng)發(fā)現(xiàn)，大多數(shù)用戶(hù)瀏覽頁(yè)面時(shí)的視覺(jué)熱點(diǎn)是”F”布局她們記錄了232位用戶(hù)瀏覽上千個(gè)網(wǎng)頁(yè)的方式，發(fā)現(xiàn)對(duì)于不同的站點(diǎn)和任務(wù)，用戶(hù)的主要閱讀行為是相當(dāng)一致的。這種F型的閱讀模式有三個(gè)組成部分：首先，用戶(hù)橫向運(yùn)動(dòng)閱讀，一般是網(wǎng)頁(yè)內(nèi)容區(qū)域的上半部分；接著，用戶(hù)視線(xiàn)下移一點(diǎn)，開(kāi)始第二次橫向閱讀，一般這一次涵蓋的區(qū)域會(huì)比前一次短；最后，用戶(hù)會(huì)縱向滴瀏覽網(wǎng)頁(yè)內(nèi)容的左邊部分482020年4月19日

11文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。對(duì)產(chǎn)品設(shè)計(jì)的啟發(fā):.用戶(hù)不會(huì)從頭到尾看完頁(yè)面.首頁(yè)首屏的前面位置應(yīng)該傳達(dá)網(wǎng)站的重要的信息（同理其它頁(yè)面的頭兩段應(yīng)該傳達(dá)重要的信息，特別是第一段）.用戶(hù)從上到下瀏覽左側(cè)的信息時(shí)，她們會(huì)注意標(biāo)題、段落和要點(diǎn)信息，這些區(qū)塊的頭兩個(gè)詞要包含重要信息，因?yàn)橛脩?hù)可能很少看第三個(gè)詞。3、區(qū)塊人們天然就有將信息分類(lèi)的認(rèn)知需求。網(wǎng)站信息以方塊呈現(xiàn)的效率最高：用戶(hù)能夠經(jīng)過(guò)區(qū)塊來(lái)分辨這個(gè)區(qū)域的信息是否是自己需要的，能夠迅速縮縮小范圍、進(jìn)行仔細(xì)尋找或是瀏覽下一個(gè)區(qū)塊482020年4月19日

12文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。4、水平注意力來(lái)自Nielson的報(bào)告：.網(wǎng)絡(luò)用戶(hù)花69%的時(shí)間看左半部分，花30%的時(shí)間看右半部分，看左半部分的時(shí)間大概是右半部分時(shí)間的兩倍。剩下的時(shí)間花在需要水平滾動(dòng)才能看到的頁(yè)面部分，因此，絕對(duì)要避免水平滾動(dòng)5、垂直注意力來(lái)自Nielson的報(bào)告：482020年4月19日

13文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。垂直注意力大部分集中于一眼可見(jiàn)的頁(yè)面內(nèi)容：.用戶(hù)一般花80%的時(shí)間看頁(yè)面上直接可見(jiàn)的內(nèi)容，只花20%的時(shí)間去看需要滾動(dòng)才能看到的部分.“pagefold”概念，將最有價(jià)值的信息放在首屏在網(wǎng)頁(yè)設(shè)計(jì)最早的年代，用戶(hù)根本不會(huì)滾動(dòng)頁(yè)面，她根據(jù)第一眼能夠可見(jiàn)的信息判斷是去還是留，可是很快，網(wǎng)絡(luò)用戶(hù)就適應(yīng)了滾動(dòng)，可用性原則也隨之變化，可是，一般見(jiàn)戶(hù)還是會(huì)依據(jù)自己可見(jiàn)的信息判斷是滾動(dòng)還是離開(kāi)。.不要設(shè)計(jì)太長(zhǎng)的頁(yè)面，用戶(hù)的注意范圍是有限的。用戶(hù)喜歡那些她們能迅速找到信息的網(wǎng)站，減少需要輸入字?jǐn)?shù)，減少滾動(dòng).可是，滾動(dòng)優(yōu)于翻頁(yè)，如果長(zhǎng)篇幅的文字，還是設(shè)計(jì)成一個(gè)滾動(dòng)頁(yè)面更合適些.482020年4月19日

14文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。首頁(yè)的內(nèi)容依然很重要，因?yàn)橛脩?hù)依據(jù)在首頁(yè)頁(yè)面上看到的信息來(lái)判斷頁(yè)面下滾的信息是否有價(jià)值.倒數(shù)第一行信息獲得的注意力優(yōu)于倒數(shù)第二行信息，近因效應(yīng)2.2.2.1*頁(yè)面寬度最新顯示器分辨率比率調(diào)查結(jié)果：當(dāng)前主流分辨率1366*768在此狀態(tài)下默認(rèn)使用960的頁(yè)面寬度，與騰訊網(wǎng)首頁(yè)統(tǒng)一尺寸。特殊情況：1.信息量或是圖片量過(guò)大的事情，能夠考慮加寬承載，給出來(lái)年改革尺寸985（paipai，Qbar）1175(Qqshow游戲產(chǎn)品等)2.搜索類(lèi)信息頁(yè)面，采用自適應(yīng)屏幕方式（比如soso搜索產(chǎn)品）不同瀏覽器，不同分辨率下網(wǎng)頁(yè)第一屏最大可視區(qū)域：482020年4月19日

15文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。說(shuō)明：比如1024*768下IE的可視面積是（1024-21）*（768-148）1336*768在各個(gè)類(lèi)瀏覽器2.2.2.1*一致性一致性的意義：良好的一致性，能夠減少用戶(hù)學(xué)習(xí)成本，能夠更快培養(yǎng)用戶(hù)習(xí)慣，也可體現(xiàn)產(chǎn)品設(shè)計(jì)的嚴(yán)謹(jǐn)。如果有不同，應(yīng)作相應(yīng)的區(qū)別處理，特別是視覺(jué)表現(xiàn)上要予以區(qū)分。什么是一致性？在相似的情景下，應(yīng)在幾個(gè)方面保持一致性：視覺(jué)表現(xiàn)、交互行為、操作結(jié)果。即同一元素在不同頁(yè)面應(yīng)盡量是一樣的（換句話(huà)說(shuō)用戶(hù)在不同頁(yè)面看到都知道這個(gè)元素代表同一種含義），如果因?yàn)槠渌蛩貙?dǎo)致很難一樣，也應(yīng)該最大程度保持它們的相似度。同時(shí)也要求同一元素應(yīng)該是代表一種或是一類(lèi)含義，不可隨意變更元素用途。相同屬性的元素保持統(tǒng)一，而且它們?cè)诓煌?yè)面都保持統(tǒng)一。1.標(biāo)識(shí)482020年4月19日

16文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。同一種標(biāo)識(shí)在不同頁(yè)面必須保持完全一致（但尺寸能夠放大或是縮小）2.按鈕到達(dá)相同頁(yè)面或是同一狀態(tài)的按鈕文字完全一樣，如果因?yàn)橐曈X(jué)層次需要，形式能夠不一樣。一個(gè)平臺(tái)上的按鈕依據(jù)重要程度，能夠分出幾個(gè)層級(jí)來(lái)，同一層級(jí)的按鈕尺寸、形狀一樣。4.文字同一平臺(tái)上的同一層級(jí)的信息的字體應(yīng)盡量保持一致，如標(biāo)題的字體大小、顯示字?jǐn)?shù)的長(zhǎng)短都一定的規(guī)范，最好不要超過(guò)3種規(guī)格。5.圖片同一類(lèi)型的圖片在不同的位置應(yīng)保持長(zhǎng)寬比率的一致，這樣能夠保持圖片的美觀(guān)性。圖片的上的alt標(biāo)簽的格式一致，來(lái)源一致。6.提示信息提示信息在擺放的大致方位（如：都放在輸入框的右側(cè)、或是下方等）；信息提示的形式：如：主體形式都是主題加關(guān)鍵字，以及提示信息的字體等都應(yīng)該保持一致。482020年4月19日

17文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。2.2.2.1*簡(jiǎn)潔性少即是多，盡可能精簡(jiǎn)界面上的元素。當(dāng)設(shè)計(jì)出原型，先將元素減半，然后再看能否再簡(jiǎn)化。保證主要任務(wù)流程順利完成，消減其余不相關(guān)元素的干擾。簡(jiǎn)潔體現(xiàn)在四個(gè)方面：減輕視覺(jué)干擾、精簡(jiǎn)文字表述、簡(jiǎn)化操作步驟。2.2.2.2*清晰2.2.2.3*當(dāng)前狀態(tài)2.2.2.4導(dǎo)航1．字體一般用黑體或微軟雅黑。要斟酌全體用戶(hù)不同情形都適應(yīng)的字體，而不是只雅觀(guān)。2．對(duì)于主導(dǎo)航，要設(shè)置a標(biāo)簽，而且不同的屬性要有不同的值，這樣很明白能否點(diǎn)擊。3．從導(dǎo)航都必須是有效鏈接，鏈接后的頁(yè)面一定要有基本的功能。主導(dǎo)航一定不能有生鏈接（生鏈接指失效的鏈接）4．主導(dǎo)不要用JS鏈接，因?yàn)樗阉饕媸遣蛔x取的。5．有些網(wǎng)站從用戶(hù)體驗(yàn)角度考慮482020年4月19日

18文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。，用圖片做導(dǎo)航鏈接，這樣最好在圖片的下方設(shè)放上文字鏈接，同時(shí)在圖片上加上正文。否則搜索引擎無(wú)法抓取。2.2.2.1平面版式版式的基本類(lèi)型　網(wǎng)頁(yè)版式的基本類(lèi)型主要有骨骼型、滿(mǎn)版型、分割型、中軸型、曲線(xiàn)型、傾斜型、對(duì)稱(chēng)型、焦點(diǎn)型、三角型、自由型十種。1.骨骼型　　網(wǎng)頁(yè)版式的骨骼型是一種規(guī)范的、理性的分割方法，類(lèi)似于報(bào)刊的版式。常見(jiàn)的骨骼有豎向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。482020年4月19日

19文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。優(yōu)點(diǎn)：理性、條理、規(guī)范2.滿(mǎn)版型　　頁(yè)面以圖像充滿(mǎn)整版。主要以圖像為訴求點(diǎn)，也可將部分文字壓置于圖像之上。視覺(jué)傳達(dá)效果直觀(guān)而強(qiáng)烈。滿(mǎn)版型給人以舒展、大方的感覺(jué)。隨著寬帶的普及，這種版式在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用越來(lái)越多。優(yōu)點(diǎn)：舒展、大方。缺點(diǎn)：網(wǎng)速加載會(huì)比較的慢。網(wǎng)頁(yè)例子：3.分割型482020年4月19日

20文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。　　把整個(gè)頁(yè)面分成上下或左右兩部分，分別安排圖片和文案。兩個(gè)部分形成對(duì)比：有圖片的部分感性而具活力，文案部分則理性而平靜。能夠調(diào)整圖片和文案所占的面積，來(lái)調(diào)節(jié)對(duì)比的強(qiáng)弱。例如：如果圖片所占比例過(guò)大，文案使用的字體過(guò)于纖細(xì)，字距、行距、段落的安排又很疏落，則造成視覺(jué)心理的不平衡，顯得生硬。倘若經(jīng)過(guò)文字或圖片將分割線(xiàn)虛化處理，就會(huì)產(chǎn)生自然和諧的效果優(yōu)點(diǎn)：精致、簡(jiǎn)潔、明了網(wǎng)頁(yè)實(shí)例：4.中軸型482020年4月19日

21文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。　　沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。水平排列的頁(yè)面給人穩(wěn)定、平靜、含蓄的感覺(jué)。垂直排列的頁(yè)面給人以舒暢的感覺(jué)。優(yōu)點(diǎn)：穩(wěn)定、平靜、含蓄網(wǎng)站實(shí)例：5.曲線(xiàn)型　　圖片、文字在頁(yè)面上作曲線(xiàn)的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。482020年4月19日

22文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。優(yōu)點(diǎn)：平滑、柔和網(wǎng)頁(yè)實(shí)例：6、傾斜型特點(diǎn)：頁(yè)面主題形象或是多幅圖片，文本內(nèi)容傾斜編排，形成不穩(wěn)定感或是強(qiáng)烈的動(dòng)感，引人注目。優(yōu)點(diǎn)：視覺(jué)沖擊力強(qiáng)、個(gè)性突出網(wǎng)頁(yè)實(shí)例：7、對(duì)稱(chēng)型特點(diǎn)：對(duì)稱(chēng)型的頁(yè)面給人以穩(wěn)定、嚴(yán)謹(jǐn)、理性、莊重的感覺(jué)。對(duì)稱(chēng)分為絕對(duì)對(duì)稱(chēng)和相對(duì)對(duì)稱(chēng)，一般采用相對(duì)對(duì)稱(chēng)，能夠避免呆板。482020年4月19日

23文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。優(yōu)點(diǎn)：穩(wěn)定、嚴(yán)謹(jǐn)、理性、莊重網(wǎng)站實(shí)例：8、焦點(diǎn)型：特點(diǎn)：焦點(diǎn)型的網(wǎng)頁(yè)版式經(jīng)過(guò)對(duì)視線(xiàn)的誘導(dǎo)，使頁(yè)面具有強(qiáng)烈的視覺(jué)效果。焦點(diǎn)型又分為三種類(lèi)型：①中心以對(duì)比強(qiáng)烈的圖片或是文字置于頁(yè)面的中心。②向心視覺(jué)元素引導(dǎo)瀏覽者向頁(yè)面中心聚攏，形成一個(gè)向心的版式。③離心視覺(jué)元素引導(dǎo)瀏覽者視線(xiàn)向外輻射，形成一個(gè)離心的網(wǎng)頁(yè)版式。網(wǎng)站實(shí)例：9、三角形特點(diǎn)：網(wǎng)頁(yè)個(gè)視覺(jué)元素呈三角形，正三角最具穩(wěn)定性，倒三角則產(chǎn)生動(dòng)感，側(cè)三角構(gòu)成一種均衡的版式，既安定又具有動(dòng)感。優(yōu)點(diǎn)：穩(wěn)定而不是動(dòng)感網(wǎng)站實(shí)例：10、自由型482020年4月19日

24文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。特點(diǎn)：自由型的頁(yè)面具有輕松活潑、輕快的風(fēng)格。優(yōu)點(diǎn)：自由、舒展網(wǎng)站實(shí)例：2.2.2.1欄目布局.人們天然就有將信息分類(lèi)的認(rèn)知需求.網(wǎng)頁(yè)設(shè)計(jì)中的“方塊“.網(wǎng)站信息以方塊呈現(xiàn)的效率最高，用戶(hù)能夠經(jīng)過(guò)區(qū)塊來(lái)分辨這個(gè)區(qū)域的信息是否是自己需要的，這樣能夠迅速縮小范圍、進(jìn)行細(xì)致尋找或是瀏覽下一個(gè)區(qū)域。用戶(hù)能夠分辨出明顯的4大區(qū)域，每個(gè)區(qū)域里又有小的區(qū)塊劃分版式區(qū)塊的原則：同類(lèi)合并原則確定中心原則臨近原則482020年4月19日

25文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。要點(diǎn)方塊感越強(qiáng)能給用戶(hù)方向感方塊越少越好盡量用留白做視覺(jué)區(qū)分檢查方法：將網(wǎng)站的背景圖片，線(xiàn)條全部去掉，看是否還能保持層級(jí)和區(qū)塊感2.2.2.1欄目欄目的主要作用一般分兩類(lèi)：1.推薦可見(jiàn)的內(nèi)容或是功能；2.經(jīng)過(guò)推薦可見(jiàn)的信息，引導(dǎo)用戶(hù)點(diǎn)擊更多>>瀏覽與推薦內(nèi)容相關(guān)的信息。一般一個(gè)欄目的推薦應(yīng)是屬于某一頻道或是某一列表的內(nèi)容，因此呈現(xiàn)在欄目的信息最好是最新、最吸引用戶(hù)的內(nèi)容。2.2.2.2分頁(yè).長(zhǎng)文章分頁(yè)呈現(xiàn)嗎？一般來(lái)說(shuō)不要簡(jiǎn)單地將一篇長(zhǎng)文章分成1、2、3……頁(yè)并不好，如果僅僅經(jīng)過(guò)“繼續(xù)”或“下一頁(yè)”那么還不如用一頁(yè)顯示，用滾動(dòng)來(lái)代替翻頁(yè)。.482020年4月19日

26文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。向?qū)降慕换コ?，比如電子商?wù)的支付環(huán)節(jié)，分頁(yè)是最好的呈現(xiàn)方式，因?yàn)槊總€(gè)步驟一個(gè)工作流程，必須完成上一步才能進(jìn)入下一步.分頁(yè)后各個(gè)頁(yè)面的內(nèi)容從某個(gè)角度應(yīng)該是屬于同一類(lèi)的2.2.2.1搜索1.基礎(chǔ)規(guī)范.文本框a.搜索框文本框的長(zhǎng)度應(yīng)適中，至少應(yīng)提供顯示10個(gè)漢字字符的寬度；b.搜索框組件中適應(yīng)文本框必須為單行文本框；c.文本框的長(zhǎng)度不得少于130個(gè)像素高度不得低于18個(gè)像素；.分類(lèi)選擇分類(lèi)標(biāo)簽提示一般放在搜索框的上方，或是搜索按鈕的前面.幫助信息a.幫助信息一般包括三塊內(nèi)容：分類(lèi)標(biāo)簽提示、提示性文字、熱門(mén)關(guān)鍵詞提示等；b.”提示性文字”可設(shè)置灰色（#cccccc）顯示，點(diǎn)擊輸入框后提示文字消失。提示文字應(yīng)簡(jiǎn)明扼要，文字一般用于內(nèi)容、用途、搜索范圍等用戶(hù)有真正幫助的提示?！罢?qǐng)輸入關(guān)鍵字”這樣的提示不應(yīng)出現(xiàn)。c.“熱門(mén)關(guān)鍵詞提示”一般放在搜索框下面.搜索按鈕a.搜索按鈕一般包含圖標(biāo)形式或者文字形式兩種482020年4月19日

27文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。a.使用圖標(biāo)形式時(shí)只能使用放大鏡的圖標(biāo)，采用其它元素時(shí)需謹(jǐn)慎。b.搜索按鈕上的文字最好為搜索，避免其它描述。c.圖標(biāo)形式（放大鏡）和文字形式搭配使用，會(huì)出現(xiàn)如下三種情況：1.應(yīng)用場(chǎng)景強(qiáng)表現(xiàn)方式：.加大搜索框的顯示，輸入框內(nèi)采用大字體（14號(hào)）.突出搜索button的表現(xiàn)形式，更直觀(guān)，更有點(diǎn)擊欲.位置放在頁(yè)頭的中間或是右側(cè)比較好2.2.2.1文字總體原則：提高文字的辨識(shí)性和頁(yè)面的易讀性1.字體大?。航ㄗh使用12號(hào)+14號(hào)字體的混合搭配，13號(hào)也可酌情考慮，因?yàn)?3號(hào)字體的不對(duì)稱(chēng)性，當(dāng)前非主流.需突出的內(nèi)容部分、新聞標(biāo)題、欄目標(biāo)題等多使用14號(hào)字體.廣告內(nèi)容、輔助信息或是介紹性文字等多使用12號(hào)字體482020年4月19日

28文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。.不要用太大的字。因?yàn)榘婷媸菍氋F，有限的，粗陋的大字體不能帶給訪(fǎng)問(wèn)者更多信息。.避免大面積使用加粗字體.不要使用不停閃爍的文字。想讓瀏覽者多停留一會(huì)兒的話(huà)，就不要使用閃爍的文字。.原則上標(biāo)題的字體較正文大，顏色也應(yīng)有所區(qū)別。1.中、英文標(biāo)準(zhǔn)字體：中文標(biāo)準(zhǔn)字體為宋體，英文標(biāo)準(zhǔn)字體為arial或Verdana。不要使用超過(guò)3種以上的字體。字體太多則顯得雜亂，沒(méi)有主題。2.文字語(yǔ)言：除設(shè)計(jì)修飾、或是文章標(biāo)題，其它地方均采用中文。482020年4月19日

29文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。1.對(duì)齊和間距：字距小于行距，行距小于段距，段距小于塊距。檢查的方法：將網(wǎng)站的背景圖片，線(xiàn)條全部去掉，看是否還能保持層級(jí)和區(qū)塊的感2.文字的可讀性：呈現(xiàn)用戶(hù)熟悉的簡(jiǎn)易、通俗的文字。避免使用生僻或是拗口的文字。另外：能夠因?yàn)橛脩?hù)的特殊打破這個(gè)常規(guī)，如老年用戶(hù)、兒童用戶(hù)、殘障用戶(hù)等2.2.2.1圖片同一類(lèi)型的圖片保持一樣的尺寸規(guī)格，頁(yè)面上圖片的像素依據(jù)顯示區(qū)域的大小來(lái)定，像素太低影響視覺(jué)效果，太高視覺(jué)效果也不會(huì)提高，而且影響頁(yè)面的加載速度。同一圖片在不同頁(yè)面應(yīng)保持寬/高的比例一致。圖片的信息都要帶alt屬性，并規(guī)定alt值，取自那里，以及她們的格式。title屬性為設(shè)置該屬性的元素提供建議性的信息，非必須。Alt屬性為不能顯示圖像、窗體或applets的用戶(hù)代理（UA），alt屬性用來(lái)指定替換文字。替換文字的語(yǔ)言由lang屬性指定。482020年4月19日

30文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。包含文字的圖像圖片設(shè)置替換文字是最簡(jiǎn)單的，圖像中包含的文字一般來(lái)說(shuō)就能夠作為alt屬性值。Alt屬性值得長(zhǎng)度必須少于100個(gè)英文字符或者用戶(hù)必須保證替換文字盡可能的短。我把它理解為“盡可能短，盡需要長(zhǎng)”。title屬性為設(shè)置該屬性的元素提供建議性的信息。title屬性能夠用在除了base，basefont，head，html，meta，param，script和title之外的所有標(biāo)簽。使用title屬性提供非本質(zhì)的額外信息。title是對(duì)圖片的說(shuō)明和額外補(bǔ)充，如果需要在鼠標(biāo)經(jīng)過(guò)圖片時(shí)出現(xiàn)文字提示應(yīng)該用屬性title。title屬性有一個(gè)很好的用途，即為鏈接添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表示了鏈接的目的。這樣就使得訪(fǎng)問(wèn)者知道那些鏈接將會(huì)帶她們到什么地方，她們就不會(huì)加載一個(gè)可能完全不感興趣的頁(yè)面。另外一個(gè)潛在的應(yīng)用就是為圖像提供額外的說(shuō)明信息，比如日期或者其它非本質(zhì)的信息。title屬性值能夠比alt屬性值設(shè)置的更長(zhǎng)。不過(guò)要注意的是，有些瀏覽器會(huì)截?cái)噙^(guò)長(zhǎng)的文字（比如工具提示或其它）。比如Mozilla核心的瀏覽器只能顯示最先的60個(gè)字符。這被認(rèn)為是一個(gè)Mozillabug，這是要注意的。482020年4月19日

31文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。title屬性的優(yōu)先級(jí)高于alt。但由于錯(cuò)誤的引導(dǎo)，很多設(shè)計(jì)就在img標(biāo)簽內(nèi)只加了alt屬性。1.alt和title對(duì)訪(fǎng)問(wèn)者都很重要（alt對(duì)搜索引擎會(huì)更重要一些），因此在定義img對(duì)象時(shí)，最好將alt和title屬性都寫(xiě)全，保證在各種瀏覽器中都能正常使用?！?.在alt和title中包含關(guān)鍵字，而且二者內(nèi)容最好不一樣?！?.不要在alt和title中堆積關(guān)鍵字，否則可能會(huì)導(dǎo)致搜索引擎懲罰舉例：I、II、III、從這三個(gè)例子來(lái)看，III的描述是最好的。I只是單純的堆積關(guān)鍵詞，而且會(huì)被搜索引擎認(rèn)為是blackhat作弊，II只是一個(gè)關(guān)鍵詞，對(duì)與型號(hào)、結(jié)構(gòu)等未做482020年4月19日

32文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。描述，用戶(hù)體驗(yàn)方面來(lái)說(shuō)稍差一些。經(jīng)過(guò)正確的進(jìn)行圖片ALT代替屬性的書(shū)寫(xiě)，能夠幫助網(wǎng)站獲得一個(gè)好的關(guān)鍵詞排名，因此SEOer一定要重視這一點(diǎn)2.2.2.1頁(yè)腳信息·頁(yè)腳信息按照從上到下的排列次序?yàn)椋?.內(nèi)部導(dǎo)航2.外部導(dǎo)航3.各類(lèi)許可證、授權(quán)聲明4.英文版權(quán)信息“copyright”5.中文版權(quán)信息6.各類(lèi)網(wǎng)絡(luò)安全/工商證明/技術(shù)支持LOGO·各鏈接間隔統(tǒng)一使用“|”：·建議采用12號(hào)字，禁止使用加粗字體482020年4月19日

33文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。2.2.3界面內(nèi)部交互界面內(nèi)部的交互：添加交互后還應(yīng)保持頁(yè)面的區(qū)塊性，而且還要能體現(xiàn)主次關(guān)系。即小區(qū)塊的交互不能比它所屬的大區(qū)塊的交互還凸顯。2.2.3.1*用戶(hù)的操作習(xí)慣2.2.3.2*用戶(hù)行為自由可控用戶(hù)的行為是能夠按照自己的意愿控制的。系統(tǒng)不得強(qiáng)迫用戶(hù)執(zhí)行任何操作。1.如亮色按鈕點(diǎn)擊一定有響應(yīng)，所有文字鏈接和圖片鏈接都可用2.任何一個(gè)頁(yè)面都有清晰離開(kāi)本頁(yè)的按鈕3.不要欺騙用戶(hù)，如：明明是關(guān)閉按鈕，點(diǎn)擊后卻是進(jìn)入另一個(gè)頁(yè)面4.用戶(hù)能夠取消絕大部分操作：如用戶(hù)能夠注銷(xiāo)她的賬號(hào)，刪除上傳的照片，編輯回復(fù)等等。在設(shè)計(jì)功能的時(shí)候一定要考慮用戶(hù)的刪除功能。482020年4月19日

34文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。2.2.3.1*容錯(cuò)性用戶(hù)在使用產(chǎn)品過(guò)程也是一個(gè)探索過(guò)程，產(chǎn)品應(yīng)該允許用戶(hù)犯錯(cuò)，而且必須給用戶(hù)重新嘗試的機(jī)會(huì)，讓用戶(hù)處于放松的心態(tài)。設(shè)計(jì)過(guò)程中，首先要幫助用戶(hù)避免出錯(cuò)，比如采用合適的控件（相同情況下選擇控件比輸入控件出錯(cuò)機(jī)會(huì)更?。?，給予輸入幫助或啟示。用戶(hù)出錯(cuò)后，需要提供撤銷(xiāo)或返回功能，使用戶(hù)返回到上一步操作重新探索。出錯(cuò)反饋要親和，避免責(zé)備用戶(hù)或魯莽的打斷或推出產(chǎn)品，要禮貌的指出錯(cuò)誤所在并提供有用的補(bǔ)救建議。把用戶(hù)經(jīng)常容易犯的錯(cuò)都考慮到常規(guī)操作流程里，把能夠確定的誤操作，給其正確的操作結(jié)果。讓用戶(hù)犯錯(cuò)不知不覺(jué)。2.2.3.2*操作的靈活高效性.優(yōu)化操作流程：依用戶(hù)習(xí)慣的流程去設(shè)計(jì)操作流程，把相關(guān)的操作放在一起，不斷優(yōu)化操作流程，以主要任務(wù)為中心，圍繞完成這個(gè)任務(wù)設(shè)置相應(yīng)的操作，去掉多余或是無(wú)關(guān)操作.減少誤操作：容易誤操作的按鈕盡量不要放在一起.批量操作：重復(fù)的操作能夠考慮做成批量操作482020年4月19日

35文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。.鍵盤(pán)操作：如Enter，Esc等.快捷按鈕：如返回頂部，返回底部，團(tuán)購(gòu)的浮動(dòng)分類(lèi)等.簡(jiǎn)單的判斷：用戶(hù)操作盡可能是不需要思考的，如果點(diǎn)擊一個(gè)按鈕需要思考3秒以上才確定則肯定不合格.響應(yīng)時(shí)間：點(diǎn)擊首頁(yè)響應(yīng)的時(shí)間不要超過(guò)5秒，其它頁(yè)面的響應(yīng)時(shí)間應(yīng)短些。有研究表明超過(guò)10秒絕大部分大部分用戶(hù)會(huì)閃人的。2.2.3.1*操作提示1.預(yù)先信息提示所有交互進(jìn)行前需要提供給用戶(hù)預(yù)先應(yīng)該知道的提示信息。a.表單提交類(lèi)表單提交的步驟，每個(gè)表單項(xiàng)的要求需要給出提示信息。（如密碼要多少多少位。實(shí)時(shí)提示密碼的強(qiáng)度等）b.謹(jǐn)慎類(lèi)操作如果一個(gè)操作導(dǎo)致的結(jié)果會(huì)涉及到用戶(hù)利益的，如扣除金幣等。都需要預(yù)先特別提示。（如：扣除金幣的操作需要預(yù)先提示扣除金幣數(shù)目，以及當(dāng)前金幣是否足夠。等等。）c.差異化規(guī)則當(dāng)一個(gè)功能的規(guī)則與用戶(hù)習(xí)慣的規(guī)則具有一定的差異或比較復(fù)雜時(shí)，需要給出提示?；蛘呓o出幫助鏈接。2.所有交互進(jìn)行中需要提供操作相關(guān)的提示。a.操作確認(rèn)提示482020年4月19日

36文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。一個(gè)操作涉及數(shù)據(jù)刪除，等需要謹(jǐn)慎操作的操作需要給出刪除確認(rèn)提示框。b.操作錯(cuò)誤提示當(dāng)用戶(hù)的操作不符合操作的規(guī)則，需要給出操作提示。（如評(píng)論字?jǐn)?shù)為0或超過(guò)限制字?jǐn)?shù)，搜索框未輸入內(nèi)容時(shí)提交）3、結(jié)果信息提示交互進(jìn)行后給出結(jié)果反饋。a.查詢(xún)類(lèi)結(jié)果任何信息列表、查詢(xún)結(jié)果，當(dāng)對(duì)應(yīng)信息無(wú)結(jié)果的時(shí)候需要給出有無(wú)結(jié)果狀態(tài)提示。b.保存類(lèi)結(jié)果一個(gè)表單是用戶(hù)提交保存數(shù)據(jù)的。如設(shè)置個(gè)人資料。提交保存后需要給出提示。成功綠色、失敗紅色、普通灰色。c.附加類(lèi)結(jié)果一個(gè)表單是對(duì)其它數(shù)據(jù)進(jìn)行附加的，如評(píng)論等。提交成功后應(yīng)直接跳轉(zhuǎn)到操作產(chǎn)生的結(jié)果展示部分。（如提交評(píng)論后應(yīng)該直接展示給用戶(hù)她提交的評(píng)論）2.2.3.1*各類(lèi)彈框彈框以不遮蓋與彈框信息相關(guān)原頁(yè)面用戶(hù)可能需要核對(duì)信息482020年4月19日

37文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。為基本原則，彈框與原信息放在相近的位置，并保真用戶(hù)可見(jiàn)且易操作。確認(rèn)框：常見(jiàn)于刪除或批量操作，再次確認(rèn)使用。交互規(guī)則：直接顯示對(duì)話(huà)框，點(diǎn)擊按鈕后直接消失。標(biāo)題：操作+目標(biāo)，例如刪除日志，刪除照片專(zhuān)輯，解除好友關(guān)系……按鈕：確定+取消把取消放在更容易點(diǎn)擊的位置操作框：常見(jiàn)于進(jìn)一步操作，入口較小，但操作步驟較多時(shí)，比如加好友，設(shè)隱私等。交互規(guī)則：直接顯示對(duì)話(huà)框，確認(rèn)完畢后，變?yōu)橥ㄖ?。?biāo)題：操作+目標(biāo)，一般為入口的名字，例如新建照片專(zhuān)輯，修改真心話(huà)，添加選項(xiàng)……按鈕：保存(行為)+取消，行為例如加為好友，添加，分享……把保存放在更容易點(diǎn)擊的位置通知框：482020年4月19日

38文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。常見(jiàn)于確認(rèn)框和操作框的確認(rèn)后，通知用戶(hù)結(jié)果，一般只有一個(gè)按鈕。交互規(guī)則：點(diǎn)擊按鈕立即消失，如果不點(diǎn)擊按鈕，1秒后漸隱消失。標(biāo)題：沿用之前操作框的標(biāo)題并加上結(jié)果按鈕：關(guān)閉把按鈕放在最容易點(diǎn)擊的位置提示框：常見(jiàn)于表單提交后的驗(yàn)證，通知用戶(hù)哪些信息不完整或者操作步驟不對(duì)。多條信息提示使用1、2、3……的序號(hào)排列標(biāo)題：提示按鈕：確定（或知道了）把按鈕放在最容易點(diǎn)擊的位置未保存提示框：常見(jiàn)于表單未保存就跳轉(zhuǎn)的提示，提示用戶(hù)未保存信息是否需要保存。標(biāo)題：未保存+目標(biāo)，例如未保存日志，未保存?zhèn)€人檔案，未保存隱私設(shè)置……按鈕：保存+不保存+取消把保存放在最容易點(diǎn)擊的位置操作框快捷鍵：482020年4月19日

39文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。支持鍵盤(pán)的enter操作框上的主操作，一般為”確定”"保存”等，支持鍵盤(pán)的esc操作框上的取消/關(guān)閉操作，一般為”取消”"關(guān)閉XX”等。2.2.3頁(yè)面間交互1、用于規(guī)定頁(yè)面鏈接是采用新窗口打開(kāi)還是本窗口打開(kāi)的規(guī)則。首頁(yè)所有鏈接的頁(yè)面一般情況都是新頁(yè)面打開(kāi)，除非首頁(yè)的重要功能在其它頁(yè)面都也有，這時(shí)候能夠是在當(dāng)前頁(yè)面打開(kāi)。一般情況往一下級(jí)頁(yè)面都是新頁(yè)面打開(kāi)，往上級(jí)頁(yè)面當(dāng)前頁(yè)面打開(kāi)。2、不常規(guī)的鏈接，點(diǎn)擊時(shí)應(yīng)給出提示信息。如:其它頁(yè)面中的logo,鼠標(biāo)移入時(shí)應(yīng)提示“返回首頁(yè)”3、在沒(méi)有導(dǎo)航的頁(yè)面需要放上面包屑導(dǎo)航。4、頁(yè)面鏈接規(guī)則：主頁(yè)鏈接所有的頻道主頁(yè)主頁(yè)一般不直接鏈接內(nèi)容頁(yè)，除非是推薦的內(nèi)容所有頻道主頁(yè)都鏈向其它頻道主頁(yè)頻道主頁(yè)都鏈回網(wǎng)站主頁(yè)頻道主頁(yè)也鏈向?qū)儆谧约罕旧眍l道的內(nèi)容頁(yè)頻道主頁(yè)一般不鏈向?qū)儆谄渌l道的內(nèi)容頁(yè)所有內(nèi)容頁(yè)都鏈向網(wǎng)站主頁(yè)482020年4月19日

40文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。2.2.3任務(wù)交互（工具類(lèi)）.完成任務(wù)的流程:采用用戶(hù)一般的思考先后順序作為參考流程，并輔助其它要素形成最終的流程。如：現(xiàn)實(shí)生活中完成這個(gè)任務(wù)的先后順序、時(shí)間順序、從主要到次要、從簡(jiǎn)單到復(fù)雜、從必須步驟到可選步驟等。.任務(wù)的分解：以為相對(duì)有區(qū)隔的子任務(wù)劃分步驟，而且這個(gè)步驟是在一個(gè)頁(yè)面能夠操作完成的。每個(gè)步驟用戶(hù)完成的操作方式最好一致，這樣操作更通暢，效率更高。.可返回操作：當(dāng)前步驟應(yīng)有返回上一步的按鈕，上一步后能夠?qū)ι弦徊襟E重新編輯。.實(shí)時(shí)保存信息：當(dāng)頁(yè)面中用戶(hù)編輯的信息量較大時(shí)，應(yīng)考慮撤銷(xiāo)和保存功能，這樣用戶(hù)萬(wàn)一操作被中斷時(shí)，仍能夠找回之前填寫(xiě)的信息。2.3web業(yè)務(wù)架構(gòu)業(yè)務(wù)架構(gòu)482020年4月19日

41文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。,以客戶(hù)賺錢(qián)為中心。網(wǎng)站的架構(gòu)服務(wù)用戶(hù)的同時(shí)也需要加進(jìn)去商務(wù)信息，預(yù)留推商務(wù)信息的位置。每一塊推的商務(wù)信息是針對(duì)哪些心理的用戶(hù)群，以及哪種方式她們才更容易接受所推的商務(wù)信息。2.4web結(jié)構(gòu)seoweb結(jié)構(gòu)seo,以服務(wù)搜索引擎為中心2.4.1邏輯結(jié)構(gòu)邏輯結(jié)構(gòu)，網(wǎng)頁(yè)內(nèi)部鏈接所形成的邏輯或鏈接的網(wǎng)絡(luò)圖。它本身由網(wǎng)頁(yè)鏈接決定，經(jīng)過(guò)鏈接的網(wǎng)絡(luò)圖能夠更直觀(guān)的檢查網(wǎng)站的鏈接是否合理。2.4.1.1邏輯結(jié)構(gòu)的意義邏輯結(jié)構(gòu)有兩方面的意義：一方面是用戶(hù)在瀏覽頁(yè)面時(shí)，方便用戶(hù)經(jīng)過(guò)鏈接跳轉(zhuǎn)到相關(guān)頁(yè)面；另一方面是方便搜索引擎的蜘蛛爬蟲(chóng)抓取信息。搜索引擎抓取的是一張張的網(wǎng)頁(yè)，鏈接就等同于投票，別人的網(wǎng)頁(yè)鏈接了你的網(wǎng)頁(yè)，就等于那個(gè)網(wǎng)頁(yè)告訴搜索引擎它支持這個(gè)網(wǎng)頁(yè)，不同的外部鏈接權(quán)重也是不一樣的!做個(gè)簡(jiǎn)單的比喻，現(xiàn)在參加老畢的《星光大道》，里有很多的觀(guān)眾(比喻為內(nèi)部鏈接)，還有評(píng)委老師(外部鏈接)482020年4月19日

42文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。，你要首先獲得觀(guān)眾的支持，雖然每個(gè)觀(guān)眾投的一票只等于一份，可是觀(guān)眾人數(shù)很多，加起來(lái)，票數(shù)就很多了，評(píng)委老師都是權(quán)威人士，她們的投票權(quán)重自然比觀(guān)眾更有用，可是一共只有三位評(píng)委，她們的一票能夠抵得上觀(guān)眾十票。因此這下大家就應(yīng)該明白大型網(wǎng)站的內(nèi)部鏈接為何如此重要了，一張網(wǎng)頁(yè)如果自己站內(nèi)的兄弟網(wǎng)頁(yè)都不支持，你讓搜索引擎怎么相信這是一張好網(wǎng)頁(yè)?因此網(wǎng)站里一定要組織好內(nèi)部鏈接。2.4.1.2邏輯結(jié)構(gòu)規(guī)范鏈接的構(gòu)成部分：導(dǎo)航結(jié)構(gòu)、網(wǎng)站地圖、相關(guān)性鏈接頁(yè)面鏈接走向：主頁(yè)鏈接所有的頻道主頁(yè)主頁(yè)一般不直接鏈接內(nèi)容頁(yè)，除非是你非常想推的幾個(gè)特殊的頁(yè)所有頻道主頁(yè)都鏈向其它頻道主頁(yè)頻道主頁(yè)都鏈回網(wǎng)站主頁(yè)頻道主頁(yè)也鏈向?qū)儆谧约罕旧眍l道的內(nèi)容頁(yè)頻道主頁(yè)一般不鏈向?qū)儆谄渌l道的內(nèi)容頁(yè)所有內(nèi)容頁(yè)都鏈向網(wǎng)站主頁(yè)所有內(nèi)容頁(yè)都鏈向自己的上一級(jí)頻道主頁(yè)內(nèi)容頁(yè)能夠鏈向同一個(gè)頻道的其它內(nèi)容頁(yè)482020年4月19日

43文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。內(nèi)容頁(yè)一般不鏈向其它頻道的內(nèi)容頁(yè)內(nèi)容頁(yè)在某些情況下，能夠用適當(dāng)?shù)年P(guān)鍵詞鏈向其它頻道的內(nèi)容頁(yè)頻道形成分主題2.4.1.3邏輯結(jié)構(gòu)兩個(gè)要點(diǎn)內(nèi)部鏈接保障的兩個(gè)要點(diǎn)：一是鏈接的廣泛度，保障每一個(gè)頁(yè)面曝光度，二是保護(hù)重點(diǎn)頁(yè)面，網(wǎng)站里有一些頁(yè)面需要重點(diǎn)保護(hù)，比如新出來(lái)的頁(yè)面，一些關(guān)鍵字排名高，關(guān)注度高的頁(yè)面。頁(yè)面的曝光度就是蜘蛛進(jìn)入你的網(wǎng)站能夠最大面積的抓取頁(yè)面，這樣所有頁(yè)面都不會(huì)被冷落!具體哪些做法呢：1、網(wǎng)站全站導(dǎo)航針對(duì)網(wǎng)站，特別是門(mén)戶(hù)，全站性的導(dǎo)航一定是必不可少的，讓蜘蛛接入后，首先必須接觸的就是各個(gè)欄目2、TAG標(biāo)簽這也是web2.0時(shí)代非常重要的產(chǎn)品之一，利用標(biāo)簽，把各類(lèi)內(nèi)容組織在一起，更有利于內(nèi)容龐大的大型網(wǎng)站進(jìn)行內(nèi)容的組織和導(dǎo)航。3、“上一篇，下一篇"導(dǎo)航482020年4月19日

44文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。這樣就把你網(wǎng)站里的文章全部組織在一起了。就如下圖一般，文章就如同鎖鏈組織在了一起。4、網(wǎng)站地圖建議你的網(wǎng)站地圖，讓搜索引擎更快的抓取你的頁(yè)面,針對(duì)google可進(jìn)行專(zhuān)門(mén)的google的xml格式的站點(diǎn)地圖，然后登陸google管理員工具進(jìn)行地圖提交。5、文本地圖因?yàn)榫W(wǎng)站的其它頁(yè)面的URL，頁(yè)面的干擾代碼都比較多，因此建立了這個(gè)文本地圖，讓搜索引擎有一個(gè)快捷的抓取頁(yè)面的入口。要保護(hù)好重點(diǎn)頁(yè)面重點(diǎn)頁(yè)面，一般來(lái)講，一是新頁(yè)面，二是有排名的，又關(guān)注度的的頁(yè)面。新頁(yè)面由于剛剛產(chǎn)生，因此我們必須確保這項(xiàng)新頁(yè)面的曝光度，讓她們盡快被搜索引擎收錄，并獲得排名。比如以下我們非常常見(jiàn)的最新文章，比如每篇文章頁(yè)面的右側(cè)都出現(xiàn)這個(gè)，那么代表，所有文章向搜索引擎推薦了這些新頁(yè)面。一些有權(quán)重的頁(yè)面，比如類(lèi)似以上的最新文章，會(huì)有一個(gè)推薦文章，熱門(mén)文章之類(lèi)的。對(duì)于大型網(wǎng)站來(lái)說(shuō)，內(nèi)鏈非常重要，組織不好內(nèi)鏈，SEO事倍功半2.4.1.4邏輯結(jié)構(gòu)圖482020年4月19日

45文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。網(wǎng)站內(nèi)部鏈接圖（1）482020年4月19日

46文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正。網(wǎng)站內(nèi)部鏈接圖（2）2.4.1物理結(jié)構(gòu)物理結(jié)構(gòu)，網(wǎng)站的物理結(jié)構(gòu)就是網(wǎng)站的實(shí)際目錄結(jié)構(gòu)，就是你網(wǎng)站的文件和文件夾組成的目錄。2.4.1.1物理結(jié)構(gòu)的意義對(duì)seo來(lái)說(shuō)目錄的深度越淺越好，應(yīng)為你的目錄太深了會(huì)加大url的長(zhǎng)度，url太長(zhǎng)百度不喜歡。物理結(jié)構(gòu)類(lèi)型分為平鋪型和樹(shù)型兩種，做seo推薦使用平鋪型的物理結(jié)構(gòu)。平鋪型的物理結(jié)構(gòu)生成的url短，可是如果網(wǎng)站的文件太多的話(huà)后期不好維護(hù)，只適合小型網(wǎng)站。樹(shù)型物理結(jié)構(gòu)生成的url長(zhǎng)，后期好維護(hù)，一般大型網(wǎng)站都是樹(shù)型結(jié)構(gòu)。目錄的命名必須站在用戶(hù)的角度命名的，不應(yīng)該站在產(chǎn)品開(kāi)發(fā)的角度，否則出來(lái)的url地址用戶(hù)會(huì)看不懂。比如頻道頁(yè)√，而我們現(xiàn)在許多的資訊頻道目錄有的寫(xiě)的是資訊模版×2.4.2.2物理結(jié)構(gòu)的規(guī)范-扁平式扁平式的（適合小型網(wǎng)站），也就是所有網(wǎng)頁(yè)都存在網(wǎng)站根目錄下，沒(méi)有任何層級(jí)關(guān)系482020年4月19日

47文檔僅供參考，不當(dāng)之處，請(qǐng)聯(lián)系改正?！?2.4.2.3物理結(jié)構(gòu)的規(guī)范-樹(shù)形結(jié)構(gòu)樹(shù)狀結(jié)構(gòu)的（適合大型網(wǎng)站），也就是根目錄下分成多個(gè)頻道，或者叫類(lèi)別，目錄等，然后在每一個(gè)頻道下面再放上屬于這個(gè)頻道的網(wǎng)頁(yè)。不論名稱(chēng)是什么，同一層級(jí)的目錄都是在網(wǎng)站中是相同的級(jí)別，比如這個(gè)目錄要不全放一級(jí)頻道要不全放二級(jí)頻道。根目錄下放頻道的網(wǎng)頁(yè)……在頻道下再放入具體的內(nèi)容網(wǎng)頁(yè):……482020年4月19日