原型設(shè)計規(guī)范、網(wǎng)頁規(guī)范、用戶體驗規(guī)范、交互規(guī)范標(biāo)準(zhǔn)

TOC\o"1-5"\h\z用戶體驗產(chǎn)品規(guī) V1.0目錄\o"CurrentDocument"、概述 3\o"CurrentDocument"規(guī)目的 3\o"CurrentDocument"規(guī)人群 3\o"CurrentDocument"規(guī)圍 3\o"CurrentDocument"、web架構(gòu) 3\o"CurrentDocument"web社會化框架 4\o"CurrentDocument"2.1.1AFO方法 4\o"CurrentDocument"首要活動 4\o"CurrentDocument"識別社會化交互對象 5\o"CurrentDocument"Feature（功能）-選擇核心功能集。 6\o"CurrentDocument"web信息架構(gòu) 7\o"CurrentDocument"web架構(gòu) 7\o"CurrentDocument"信息頁面 7\o"CurrentDocument"*用戶視覺習(xí)慣 7\o"CurrentDocument"*頁面寬度 10\o"CurrentDocument"*一致性 11\o"CurrentDocument"*簡潔性 13\o"CurrentDocument"*清晰 13*當(dāng)前狀態(tài) 13導(dǎo)航 13\o"CurrentDocument"平面版式 13\o"CurrentDocument"欄目布局 18\o"CurrentDocument"欄目 19\o"CurrentDocument"分頁 19\o"CurrentDocument"搜索 19\o"CurrentDocument"文字 20\o"CurrentDocument"圖片 22\o"CurrentDocument"頁腳信息 23\o"CurrentDocument"界面部交互 24\o"CurrentDocument"*用戶的操作習(xí)慣 24\o"CurrentDocument"*用戶行為自由可控 25\o"CurrentDocument"*容錯性 25\o"CurrentDocument"*操作的靈活高效性 25\o"CurrentDocument"*操作提示 26\o"CurrentDocument"*各類彈框 27\o"CurrentDocument"頁面間交互 28\o"CurrentDocument"任務(wù)交互（工具類） 29\o"CurrentDocument"web業(yè)務(wù)架構(gòu) 29\o"CurrentDocument"web結(jié)構(gòu)seo 30\o"CurrentDocument"邏輯結(jié)構(gòu) 30\o"CurrentDocument"邏輯結(jié)構(gòu)的意義 30\o"CurrentDocument"邏輯結(jié)構(gòu)規(guī) 30\o"CurrentDocument"邏輯結(jié)構(gòu)兩個要點 31\o"CurrentDocument"邏輯結(jié)構(gòu)圖 32\o"CurrentDocument"物理結(jié)構(gòu) 34\o"CurrentDocument"物理結(jié)構(gòu)的意義 34\o"CurrentDocument"物理結(jié)構(gòu)的規(guī)-扁平式 34\o"CurrentDocument"物理結(jié)構(gòu)的規(guī)-樹形Z^構(gòu) 341、概述規(guī)目的在產(chǎn)品規(guī)劃時，給部門部的成員提供統(tǒng)一的規(guī)和指導(dǎo)，有利于保證產(chǎn)品；解決公司產(chǎn)品的可用性問題，即使操作更加人性化，減輕用戶認(rèn)知負(fù)擔(dān)，改善產(chǎn)品的用戶體驗，提升產(chǎn)品的市場競爭力；使產(chǎn)品在表現(xiàn)層面上達成界面外觀與操作行為的一致。規(guī)人群參與產(chǎn)品規(guī)劃的產(chǎn)品部成員。規(guī)圍所有互聯(lián)網(wǎng)產(chǎn)品2、web架構(gòu)如果把一個比喻成一座建筑，那么這個建筑的結(jié)構(gòu)就是這個的架構(gòu)。建筑的結(jié)構(gòu)決定了人們對它的第一印象，也決定了它最凸出的個性。建筑的結(jié)構(gòu)可以從美的角度、實用的角度、個性的角度等方面分析。web架構(gòu)主要可以從四方面分析：社會化框架、信息架構(gòu)、業(yè)務(wù)架構(gòu)、結(jié)構(gòu) SEQ考察這四個方面的都有各自的意義：社會化框架，以提高用戶粘度為中心；信息架構(gòu)，以滿足用戶需求為中心；業(yè)務(wù)架構(gòu)，以客戶賺錢為中心；為 web架*Sseo,以服務(wù)搜索引擎為中心。其中社會化框架和信息架構(gòu)二者可以相互促進；web架構(gòu)seo相對獨立，但它也跟信息架構(gòu)的頁面有很大的關(guān)系；信息架構(gòu)和業(yè)務(wù)架構(gòu)有時候會有沖突，這時取決于我們優(yōu)先滿足普通用戶還是客戶，或是當(dāng)前產(chǎn)品的正處在的階段決定它們的優(yōu)先級。

web社會化框架什么是社會化框架？社會化設(shè)計是對支持社會交往的或應(yīng)用的構(gòu)思、 規(guī)劃和構(gòu)建的過程。社會化框架即是社會化設(shè)計時形成的框架。 考察社會化框架，主要是以提高用戶粘度為中心。AFO方法Activity（活動）-專注首要活動。Object（對象）-辨識交互對象Feature（功能）-選擇核心功能集。首要活動我們首先要解決（并伴隨整個設(shè)計過程）的問題是 一一你的用戶要用你的產(chǎn)品做什么？首要活動只有一個最能吸引人的應(yīng)用，就是讓人出色完成某個特定活動的應(yīng)用總結(jié)：當(dāng)我們在開發(fā)一個新產(chǎn)品時，我們要解決的最重要的問題不是“誰要用我的產(chǎn)品”，而是“用戶要用我的產(chǎn)品來做什么”！識別首要活動用戶的什么行為是獲得成功的關(guān)鍵?識別首要活動用戶的什么行為是獲得成功的關(guān)鍵?亞馬遜回答是付款、淘寶呢？ 微薄目標(biāo)：用戶希望達到的最終目標(biāo)購買日用品娛樂賺錢享受美食與家人保持聯(lián)系活動：實現(xiàn)目標(biāo)的一系列任務(wù)的組合往往會專注于具體的任務(wù)，而忽略更寬泛的活動。我們不能盯著付款這個具體操作，忽略購買這個活動任務(wù)：具體的某個功能識別社會化交互對象每一個活動都與特定對象相關(guān) ,確定首要活動后的下一步是，用戶進行這些活動時的交互對象。模擬實物：Facebook 在哈佛大學(xué)，facebook是一個真正的本子亞馬遜的禮物愿望單 ——原型是人們用紙寫下并相互分享的禮物愿望單Web應(yīng)用中社交對象不一定要表現(xiàn)真實物品（視頻、音樂、電子狗），他們有時候也是可以抽象的社交對象設(shè)計成功的案例照片書簽博客商品職位電影 視頻新鮮事 消息演示文檔???..為社會化對象分配 URL地址：對象有了URL地址就可以被分享出去對象有了URL地址就更容易被查找和尋回URL讓人可以直接對象搜索引擎能利用URL更好工作

Feature（功能）-選擇核心功能集我們可以從首要活動及交互對象推導(dǎo)出核心功能集。為此我們要解決這些問題：1用戶會對交互對象做哪些操作？2有哪些功能足夠重要，是web應(yīng)用必須支持的?尋找動詞名詞《對象） 動詞［攆作）權(quán)領(lǐng) 播放，停止.ifi輻.存儲.上傳.分享.特施.在博客中戢入文瓊 闌堂.智存1日后閱?引用.情招.療畢.評論.注稗照片 有時.疊青.加人收羸，裁理?璃.悌接,加水分享，Hit在博客中嵌入”打標(biāo)簽書福 加入購衿車,付款，加入禮物反望單'分享.加入驪靖兒時.嬋論.打分.打標(biāo)簽.凈協(xié)留意任何的對象集合，它們通常會成為有價值的功能。其中重要的集合方式是列表下面是搜索對象的幾種常見的來源：禮物愿望單 我的…（照片、評論、書簽）購物車 好友的…收藏夾 項目分享條目AFO的方法指引來搜索亞馬遜提供的社會化功能商品評分 加入禮物愿望單分享個人商品圖片 新婚/新生兒禮物單買了該產(chǎn)品的用戶還買了???買了該產(chǎn)品的用戶還買了???告訴朋友web信息架構(gòu)信息架構(gòu),一般認(rèn)為是根據(jù) 客戶需求分析的結(jié)果，準(zhǔn)確定位目標(biāo)群體，設(shè)定整體架構(gòu)，規(guī)劃、設(shè)計欄目及其容，制定頁面操作流程及頁面交互，以最大限度地符合用戶的需求。web架構(gòu)架構(gòu)的層級架構(gòu)的層級很大程度上決定了，用戶通過首頁需要點擊多少次才可以到達自己想看的容。單純考慮層級，層級越少越好，最佳狀況是層級不超過三層。如果能保證層級不超過三層，就差不多可以保證用戶點擊三次以就可以看到自己想看的容。架構(gòu)的寬度用戶可以見的第一層架構(gòu)寬度主要是導(dǎo)航的數(shù)。用戶短時間的記憶力一般情況是 7±2，因此每個層級下架構(gòu)的寬度都不應(yīng)該太寬，否則會考驗用戶的記憶力。架構(gòu)的平衡度因為現(xiàn)在的大型，尤其是門戶，它們的信息量非常的龐大，通過首頁3次點擊都能到達所有的容已經(jīng)完全無法實現(xiàn)。一定的信息量，架構(gòu)的層級和架構(gòu)寬度是相互對立的，如果層級少則要求架構(gòu)寬度增加，反之毅然。架構(gòu)可以給信息進行分類、組織，讓用戶更清晰地找到自己要找的容，但是分類過多或是層級過深會增加用戶的學(xué)習(xí)成本。在信息量大的時候一定要綜合考慮架構(gòu)的層級和寬度平衡信息頁面頁面是承載信息的載體。*用戶視覺習(xí)慣1、順應(yīng)用戶基本的閱讀習(xí)慣：從左到右、從上到下

2、F型布局.尼爾森眼動發(fā)現(xiàn)，大多數(shù)用戶瀏覽頁面時的視覺熱點是 “F”布局他們記錄了232位用戶瀏覽上千個網(wǎng)頁的方式， 發(fā)現(xiàn)對于不同的站點和任務(wù)， 用戶的主要閱讀行為是相當(dāng)一致的。這種F型的閱讀模式有三個組成部分：首先，用戶橫向運動閱讀，通常是網(wǎng)頁容區(qū)域的上半部分；接著，用戶視線下移一點，開始第二次橫向閱讀，通常這一次涵蓋的區(qū)域會 比前一次短；最后，用戶會縱向滴瀏覽網(wǎng)頁容的左邊部分對產(chǎn)品設(shè)計的啟發(fā).用戶不會從頭到尾看完頁面.首頁首屏的前面位置應(yīng)該傳達的重要的信息 （同理其他頁面的頭兩段應(yīng)該傳達重要的信息,尤其是第一段）.用戶從上到下瀏覽左側(cè)的信息時，他們會注意標(biāo)題、段落和要點信息，這些區(qū)塊的頭兩個詞要包含重要信息，因為用戶可能很少看第三個詞。3、區(qū)塊人們天然就有將信息分類的認(rèn)知需求。信息以方塊呈現(xiàn)的效率最高：用戶可以通過區(qū)塊來分辨這個區(qū)域的信息是否是自己需要的,可以迅速縮縮小圍、進行仔細(xì)尋找或是瀏覽下一個區(qū)塊4、水平注意力來自Nielson的報告:網(wǎng)絡(luò)用戶花69%的時間看左半部分，花30%的時間看右半部分，看左半部分的時間大概是右半部分時間的兩倍。剩下的時間花在需要水平滾動才能看到的頁面部分， 因此，絕對要避免水平滾動PixelsfromtheLehEdge如版慣例格咚把號航位用放出7邊,:人九建常去左邊尋找選項列表把上PixelsfromtheLehEdge如版慣例格咚把號航位用放出7邊,:人九建常去左邊尋找選項列表把上要內(nèi)存放也尚顯左邊稍微訂饅距離的地行把最重要的內(nèi)容放在頁由橫向"3到1/2上間的地力；國力這里是罰戶收入最去掙怠力的區(qū)域把次要的內(nèi)容放在彳邊立子一個頁面，用戶簫T艮看到的總主力內(nèi)容岫第一行.而不會行無士關(guān)”6航diEpv妙UQVUJsid5、垂直注意力來自Nielson的報告:

S0.3%?ELLMcw!，+O芒3J?&Ab^etheFoldFeld19.7%PiwIcFromth*Top4I-UWR■旦二S0.3%?ELLMcw!，+O芒3J?&Ab^etheFoldFeld19.7%PiwIcFromth*Top4I-UWR■旦二?5--■艮二■009二BrOK」x-J用戶目6兆公天在員田忸的內(nèi)容應(yīng)像放在一眼可見的頁面內(nèi)善內(nèi)容很多,那么將更面諛計去戰(zhàn)衲鼓動枷言的徉式.首頁內(nèi)容的階值將使用戶決定是話向卜簫動:KL最正工放上希坐用戶卻道的信息垂直注意力大部分集中于一眼可見的頁面容：.用戶通常花80%的時間看頁面上直接可見的容， 只花20%的時間去看需要滾動才能看到的部分."pagefold”概念，將最有價值的信息放在首屏在網(wǎng)頁設(shè)計最早的年代，用戶根本不會滾動頁面，他根據(jù)第一眼可以可見的信息判斷是去還是留，但是很快，網(wǎng)絡(luò)用戶就適應(yīng)了滾動，可用性原則也隨之變化，但是，通常用戶還是會依據(jù)自己可見的信息判斷是滾動還是離開。.不要設(shè)計太長的頁面，用戶的注意圍是有限的。用戶喜歡那些他們能迅速找到信息的，減少需要輸入字?jǐn)?shù)，減少滾動.但是，滾動優(yōu)于翻頁，如果長篇幅的文字，還是設(shè)計成一個滾動頁面更合適些.首頁的容仍然很重要，因為用戶依據(jù)在首頁頁面上看到的信息來判斷頁面下滾的信息是否有價值.倒數(shù)第一行信息獲得的注意力優(yōu)于倒數(shù)第二行信息，近因效應(yīng)*頁面寬度最新顯示器分辨率比率調(diào)查結(jié)果:目前主流分辨率 1366*768在此狀態(tài)下,默認(rèn)使用960的頁面寬度，與騰訊網(wǎng)首頁統(tǒng)一尺寸。特殊情況：.信息量或是圖片量過大的事情，可以考慮加寬承載，給出來年改革尺寸985（paipai,Qbar）1175（Qqshow游戲產(chǎn)品等）.搜索類信息頁面，采用自適應(yīng)屏幕方式（比如soso搜索產(chǎn)品）不同瀏覽器，不同分辨率下網(wǎng)頁第一屏最大可視區(qū)域：靛可視區(qū)域（地Px）府幕1-HOT(001024順138010241陳Q779(*2b43217蜘1蜥（咽r顏1-1Wf1259(+31)&那一用j7；9［凹J452⑴回I0D3(+21>儂1413>1醐(+21)S76CM?it'd1-12.0如日力41?廿星”麗㈣I2631+J7)841(+183)L網(wǎng)物肥外*網(wǎng)1361M9)B851+1391說明：比如1024*768下IE的可視面積是（1024-21）*（768-148）1336*768在各個類瀏覽器 *一致性一致性的意義：良好的一致性，可以減少用戶學(xué)習(xí)成本，可以更快培養(yǎng)用戶習(xí)慣，也可體現(xiàn)產(chǎn)品設(shè)計的嚴(yán)謹(jǐn)。如果有不同，應(yīng)作相應(yīng)的區(qū)別處理，特別是視覺表現(xiàn)上要予以區(qū)分什么是一致性？在相似的情景下，應(yīng)在幾個方面保持一致性：視覺表現(xiàn)、交互行為、操作結(jié)果。同一元素在不同頁面應(yīng)盡量是一樣的（換句話說用戶在不同頁面看到都知道這個元素代表同一種含義），如果因為其他因素導(dǎo)致很難一樣，也應(yīng)該最大程度保持它們的相似度。同時也要求同一元素應(yīng)該是代表一種或是一類含義，不可隨意變更元素用途。相同屬性的元素保持統(tǒng)一，并且它們在不同頁面都保持統(tǒng)一。標(biāo)識同一種標(biāo)識在不同頁面必須保持完全一致（但尺寸可以放大或是縮?。┌粹o到達相同頁面或是同一狀態(tài)的按鈕文字完全一樣，如果因為視覺層次需要，形式可以不一樣。一個平臺上的按鈕依據(jù)重要程度，可以分出幾個層級來，同一層級的按鈕尺寸、形狀一樣。文字同一平臺上的同一層級的信息的字體應(yīng)盡量保持一致，如標(biāo)題的字體大小、顯示字?jǐn)?shù)的長短都一定的規(guī)，最好不要超過 3種規(guī)格。圖片同一類型的圖片在不同的位置應(yīng)保持長寬比率的一致，這樣可以保持圖片的美觀性。圖片的上的alt標(biāo)簽的格式一致，來源一致。提示信息提示信息在擺放的大體方位（如：都放在輸入框的右側(cè)、或是下方等）；信息提示的形式：如：主體形式都是主題加關(guān)鍵字，以及提示信息的字體等都應(yīng)該保持一致。*簡潔性少即是多，盡可能精簡界面上的元素。當(dāng)設(shè)計出原型，先將元素減半， 然后再看能否再簡化。保證主要任務(wù)流程順利完成，消減其余不相關(guān)元素的干擾。簡潔體現(xiàn)在四個方面：減輕視覺干擾、精簡文字表述、簡化操作步驟。*清晰*當(dāng)前狀態(tài)導(dǎo)航.字體一般用黑體或微軟雅黑。要斟酌全體用戶不同情形都適應(yīng)的字體，而不是只雅觀。.對于主導(dǎo)航，要設(shè)置a標(biāo)簽，并且不同的屬性要有不同的值，這樣很明白能否點擊。.從導(dǎo)航都必須是有效，后的頁面一定要有基本的功能。主導(dǎo)航一定不能有生 （生指失效的）.主導(dǎo)不要用JS,因為搜索引擎是不讀取的。.有些從用戶體驗角度考慮，用圖片做導(dǎo)航，這樣最好在圖片的下方設(shè)放上文字，同時在圖片上加上正文。否則搜索引擎無法抓取。平面版式版式的基本類型網(wǎng)頁版式的基本類型主要有骨骼型、滿版型、分割型、中軸型、曲線型、傾斜型、對稱型、焦點型、三角型、自由型十種。.骨骼型網(wǎng)頁版式的骨骼型是一種規(guī)的、 理性的分割方法，類似于報刊的版式。常見的骨骼有豎

豎向分欄為多。這向通欄、雙欄、三欄、四欄和橫向的通欄、雙欄、三欄和四欄等。一般以豎向分欄為多。這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。Ldu匚，Hoc—ServfccManaqwm^entill（；的步脾n|KoupGileeBedWebHankeB??一,Cur^uskdltMfedleirSululiuritAcccuntrn防ta?rLDmm.nncda'ji^j-oductrECT-MPfiultarrtv就ciTeateeladdIOiptegrato-rMgrLdu匚，Hoc—ServfccManaqwm^entill（；的步脾n|KoupGileeBedWebHankeB??一,Cur^uskdltMfedleirSululiuritAcccuntrn防ta?rLDmm.nncda'ji^j-oductrECT-MPfiultarrtv就ciTeateeladdIOiptegrato-rMgr-tiYueriag^geftruiken七箕plcwtad廿電vanmodernetechnologicmeteenhoogwaardilgaanbodvand4?rkstenenwodwwi"Sy?to-m□LlteeL^nceertnLeuweInternetsite】di?kirfchrs""Kat以呼臺“看5/s4三5工F&wf各，vemitu^de##b4：rt?Cke?liw#Ot!ftonornifj.deitenunl?ni^f1Qp? LgVtmitvwdt VMCite*ivege;aa-Devemie-jvideEltteinlisal，e±n:ednjfip&rtaai：ingericl^..Achtsr二。二0v二。rd。or^ifsekGit&a^ech^strwksnformistieuitm*ths*r-lantBFl.穗fi：電11kHitS3hfecimbrwfRlikhX產(chǎn)白：rurn?crW*vetencvcrdeCrteeN>aUfflcba>q^優(yōu)點：理性、條理、規(guī).滿版型頁面以圖像充滿整版。主要以圖像為訴求點，也可將部分文字壓置于圖像之上。 視覺傳達效果直觀而強烈。滿版型給人以舒展、大方的感覺。隨著寬帶的普及，這種版式在網(wǎng)頁設(shè)計中的運用越來越多。

優(yōu)點：舒展、大方。缺點：網(wǎng)速加載會比較的慢。網(wǎng)頁例子：.thepixel./blog/.分割型把整個頁面分成上下或左右兩部分， 分別安排圖片和文案。兩個部分形成對比：有圖片的部分感性而具活力，文案部分則理性而平靜?？梢哉{(diào)整圖片和文案所占的面積， 來調(diào)節(jié)對比的強弱。例如：如果圖片所占比例過大，文案使用的字體過于纖細(xì)，字距、行距、段落的安排又很疏落，則造成視覺心理的不平衡，顯得生硬。倘若通過文字或圖片將分割線虛化處理，就會產(chǎn)生自然和諧的效果優(yōu)點：精致、簡潔、明了網(wǎng)頁實例：stripes-優(yōu)點：精致、簡潔、明了網(wǎng)頁實例：stripes-design.pl/4.中軸型沿瀏覽器窗口的中軸將圖片或文字作水平或垂直方向的排列。平靜、含蓄的感覺。垂直排列的頁面給人以舒暢的感覺。水平排列的頁面給人穩(wěn)定、66、傾斜型s々zFocruting.s々zFocruting.helloZE回回5l*Bdhag .&JCMJnT^TtaT,kiMnn'ATjHnur..uv.■ffw-Fw4iv4??|lAwu.EdMilAQur*.JTMOOfT'irijbuRptL￡|MM澗■/“'!■■■?4B*ib*-rivijwidiawwlHr餐;科hfL*w*iQ0IS優(yōu)點：穩(wěn)定、平靜、含蓄實例：2d-arts./5.曲線型圖片、文字在頁面上作曲線的分割或編排構(gòu)成，產(chǎn)生韻律與節(jié)奏。優(yōu)點：平滑、柔和網(wǎng)頁實例：.novita.co.kr/特點：頁面主題形象或是多幅圖片，文本容傾斜編排，形成不穩(wěn)定感或是強烈的動感,引人注目。優(yōu)點：視覺沖擊力強、個性突出網(wǎng)頁實例：/y460/7、對稱型特點：對稱型的頁面給人以穩(wěn)定、嚴(yán)謹(jǐn)、理性、莊重的感覺。對稱分為絕對對稱和相對對稱，一般采用相對對稱，可以避免呆板。優(yōu)點：穩(wěn)定、嚴(yán)謹(jǐn)、理性、莊重實例：./8、焦點型：特點：焦點型的網(wǎng)頁版式通過對視線的誘導(dǎo)，使頁面具有強烈的視覺效果。焦點型又分為三種類型：①中心以對比強烈的圖片或是文字置于頁面的中心。②向心視覺元素引導(dǎo)瀏覽者向頁面中心聚攏，形成一個向心的版式。③離心視覺元素引導(dǎo)瀏覽者視線向外輻射，形成一個離心的網(wǎng)頁版式。實例：.floridaflourish./9、三角形特點：網(wǎng)頁個視覺元素呈三角形，正三角最具穩(wěn)定性，倒三角則產(chǎn)生動感，側(cè)三角構(gòu)成一種均衡的版式，既安定又具有動感。優(yōu)點：穩(wěn)定而不是動感實例：10、自由型特點：自由型的頁面具有輕松活潑、輕快的風(fēng)格。優(yōu)點：自由、舒展實例：.ktgardens.cz/

欄目布局.人們天然就有將信息分類的認(rèn)知需求.網(wǎng)頁設(shè)計中的“方塊“.信息以方塊呈現(xiàn)的效率最高，用戶可以通過區(qū)塊來分辨這個區(qū)域的信息是否是自己需要的,這樣可以迅速縮小圍、進行細(xì)致尋找或是瀏覽下一個區(qū)域。用戶可以分辨出明顯的4大區(qū)域，每個區(qū)域里又有小的區(qū)塊劃分版式區(qū)塊的原則：同類合并原則確定中心原則臨近原則要點方塊感越強能給用戶方向感方塊越少越好盡量用留白做視覺區(qū)分檢查方法：將的背景圖片，線條全部去掉，看是否還能保持層級和區(qū)塊感0欄目欄目的主要作用一般分兩類： 1.推薦可見的容或是功能； 2.通過推薦可見的信息，引導(dǎo)用戶點擊更多 >>瀏覽與推薦容相關(guān)的信息。通常一個欄目的推薦應(yīng)是屬于某一頻道或是某一列表的容，因此呈現(xiàn)在欄目的信息最好是最新、最吸引用戶的容。分頁.長文章分頁呈現(xiàn)嗎？一般來說不要簡單地將一篇長文章分成 1、2、3?…貞并不好，如果僅僅通過“繼續(xù)”或“下一頁”那么還不如用一頁顯示，用滾動來代替翻頁。.向?qū)降慕换コ?，比如電子商?wù)的支付環(huán)節(jié)，分頁是最好的呈現(xiàn)方式，因為每個步驟一個工作流程，必須完成上一步才能進入下一步.分頁后各個頁面的容從某個角度應(yīng)該是屬于同一類的搜索.基礎(chǔ)規(guī).文本框搜索框文本框的長度應(yīng)適中，至少應(yīng)提供顯示 10個漢字字符的寬度；搜索框組件中適應(yīng)文本框必須為單行文本框；文本框的長度不得少于130個像素高度不得低于18個像素；.分類選擇分類標(biāo)簽提示一般放在搜索框的上方，或是搜索按鈕的前面.幫助信息a.幫助信息一般包括三塊容：分類標(biāo)簽提示、提示性文字、熱門關(guān)鍵詞提示等；b.”提示性文字”可設(shè)置灰色（#cccccc）顯示，點擊輸入框后提示文字消失。提示文字應(yīng)簡明扼要，文字一般用于容、用途、搜索圍等用戶有 真正幫助的提示 ?！罢堓斎腙P(guān)鍵字”這樣的提示不應(yīng)出現(xiàn)。

c.“熱門關(guān)鍵詞提示”c.“熱門關(guān)鍵詞提示”般放在搜索框下面a.搜索按鈕一般包含圖標(biāo)形式或者文字形式兩種b.使用圖標(biāo)形式時只能使用放大鏡的圖標(biāo)，采用其他元素時需謹(jǐn)慎。c.搜索按鈕上的文字最好為搜索，避免其他描述。d.圖標(biāo)形式（放大鏡）和文字形式搭配使用，會出現(xiàn)如下三種情況:.應(yīng)用場景強表現(xiàn)方式:.加大搜索框的顯示，輸入框采用大字體（ 14號）.突出搜索button的表現(xiàn)形式，更直觀，更有點擊欲.位置放在頁頭的中間或是右側(cè)比較好3文字總體原則：提高文字的辨識性和頁面的易讀性1.字體大?。航ㄗh使用12號+14號字體的混合搭配，13號也可酌情考慮，因為13號字體的不對稱性，目前非主流中申中申中申Ld號 1汨 1端.需突出的容部分、新聞標(biāo)題、欄目標(biāo)題等多使用14號字體.廣告容、輔助信息或是介紹性文字等多使用 12號字體.不要用太大的字。因為版面是寶貴，有限的，粗陋的大字體不能帶給訪問者更多信息。

.避免大面積使用加粗字體.不要使用不停閃爍的文字。想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。匕二12城翻#m燈1.星jEt-例宙諸喇力隨件市遍1的都肝胭.做物-1H匕二12城翻#m燈1.星jEt-例宙諸喇力隨件市遍1的都肝胭.做物-1H瞅小上菰同屋醐日就北悌單獨為由年期域幽#盛市胸牌價群底下防現(xiàn)行五庫7款推3F再］匹＞耀.刁民.斗”號露Q落鼻珅尚點第?購翼硒都自蝴取潸啞翻展現(xiàn)幗自信賽始迎!謝中里早嗎公平碩才士摩一翻厚翻人空嬖者埠城F廨蟲戍*43號” 而雎隹:然用日至甫好A撮Ma會'印醫(yī)一孥箭由厘下競劇B宅所.［2號竽憶-awf-.r

行品注睛■〕銳鴻期謂號酈!艇小仁?也2塞亞的岫小耳的加罰MfB的也后和瞪左方XK十口頂目保顏M￡ 1南"派群;W，短：IL喊］伯身J日?^,'_'i之一KS528E『性?：且&占%txtm圭施；?制之雪耳煢通弓后機U正嬴工翻加爆片=1,患兒英hlfl^'51U”-in=--甲f/if乜姆I①跋*m「艇搐心睜u?巴卜旦IPjk^M甯力更手唱U..一.原則上標(biāo)題的字體較正文大，顏色也應(yīng)有所區(qū)別。.中、英文標(biāo)準(zhǔn)字體：中文標(biāo)準(zhǔn)字體為宋體，英文標(biāo)準(zhǔn)字體為arial或Verdana。不要使用超過3種以上的字體。字體太多則顯得雜亂，沒有主題。.文字語百：除設(shè)計修飾、或是文章標(biāo)題，其他地方均采用中文。.對齊和間距：字距小于行距，行距小于段距，段距小于塊距。檢查的方法：將的背景圖片，線條全部去掉，看是否還能保持層級和區(qū)塊的感.文字的可讀性：呈現(xiàn)用戶熟悉的簡易、通俗的文字。避免使用生僻或是拗口的文字。另外：可以因為用戶的特殊打破這個常規(guī)，如老年用戶、兒童用戶、殘障用戶等4圖片同一類型的圖片保持一樣的尺寸規(guī)格，頁面上圖片的像素依據(jù)顯示區(qū)域的大小來定，像素太低影響視覺效果，太高視覺效果也不會提高，并且影響頁面的加載速度。同一圖片在不同頁面應(yīng)保持寬/高的比例一致。圖片的信息都要帶alt屬性，并規(guī)定alt值，取自那里，以及他們的格式。 title屬性為設(shè)置該屬性的元素提供建議性的信息，非必需。Alt屬性為不能顯示圖像、窗體或applets的用戶代理（UA）,alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。包含文字的圖像圖片設(shè)置替換文字是最簡單的，圖像中包含的文字一般來說就可以作為 alt屬性值。Alt屬性值得長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。我把它理解為“盡可能短，盡需要長”。title 屬性為設(shè)置該屬性的元素提供建議性的信息。title屬性可以用在除了base,basefont,head,html,meta,param,script和title之外的所有標(biāo)簽。使用title屬性提供非本質(zhì)的額外信息。title是對圖片的說明和額外補充，如果需要在鼠標(biāo)經(jīng)過圖片時出現(xiàn)文字提示應(yīng)該用屬性 title。title屬性有一個很好的用途，即為添加描述性文字，特別是當(dāng)連接本身并不是十分清楚的表達了的目的。這樣就使得訪問者知道那些將會 帶他們到什么地方，他們就不會加載一個可能完全不感興趣的頁面。另外一個潛在的應(yīng)用就是為圖像提供額外的說明信息，比如日期或者其他非本質(zhì)的信息。title屬性值可以比alt屬性值設(shè)置的更長。不過要注意的是，有些瀏覽器會截斷過長的文字（比如工具提示或其他）。比如Mozilla核心的瀏覽器只能顯示最先的60個字符。這被認(rèn)為是一個Mozillabug,這是要注意的。title屬性的優(yōu)先級高于 alt。但由于錯誤的引導(dǎo)，很多設(shè)計就在 img標(biāo)簽只加了alt屬性。alt和title對訪問者都很重要（alt對搜索引擎會更重要一些），所以在定義img對象時，最好將alt和title屬性都寫全，保證在各種瀏覽器中都能正常使用。在alt和title中包含關(guān)鍵字，并且二者容最好不一樣。不要在alt和title中堆積關(guān)鍵字，否則可能會導(dǎo)致搜索引擎懲罰舉例：I、<imgsrc="nt12343.jpg"alt="低平板半掛車 倉欄半掛車 輕型特種半掛車廂式半掛車 "/>、<imgsrc="nt12343.jpg"alt="低平板半掛車 "/>、<imgsrc="nt12343.jpg"alt="17.5米低平板半掛車在鵝頸和車橋處進行雙層加固"/>從這三個例子來看，III的描述是最好的。I只是單純的堆積關(guān)鍵詞，而且會被搜索引擎認(rèn)為是 blackhat作弊，II只是一個關(guān)鍵詞，對與型號、結(jié)構(gòu)等 未做描述，用戶體驗方面來說稍差一些。通過正確的進行圖片 ALT代替屬性的書寫，可以幫助獲得一個好的關(guān)鍵詞排名，所以 SEOer一定要重視這一點5頁腳信息?頁腳信息按照從上到下的排列次序為：部導(dǎo)航外部導(dǎo)航各類許可證、授權(quán)聲明英文信息“copyright”中文信息各類網(wǎng)絡(luò)安全/工商證明/技術(shù)支持LOGO

?各間隔統(tǒng)一使用“|”：?建議采用12號字，禁止使用加粗字體I刊HIIAboutTmurtllMUrIFtl?I觸圄11班例■泅造國腫心I啞神I橘樹箱 --幅聊有烹JI信且舉謂I陽1?it色同咯工堡I瞄觸澈而it引I厚I；和Mil御睢iI I赭箴EH的午可怔|二『同t：折:府王-—植用期［粵府布區(qū)口UB瀉女做［2DC4］0m崛酶曲卸m二型W錯用值第止持我量函由2-20D4O331藥輻息JE黜品< 球加疝t叩湖iK0朔白?卻施TantentInc.NlRig旭以的相d< 而EJ揖信息段I網(wǎng)辭就答辛方,聞星受段I網(wǎng)辭就答辛方,聞星受=誹二舲.第11AboutTsncBMlIftM1-【郡.I的苜I崎劭聊胞*——除播

CocTqht11,為［ Texe-iheAitightsRe時加 ——,黑遵封簿電稻i=_?-：與三⑻口 . 中文黃積福育舒爵lawTm5rtlM鋁讖irtei#茜血強|菩協(xié)心用玷號斷馴F師網(wǎng)f附前,I通」赭'曰￡國「門7號u博部軻2.2.3界面部交互并且還要能體現(xiàn)主次關(guān)系。即小區(qū)塊的界面部的交互：添加交互后還應(yīng)保持頁面的區(qū)塊性,交互不能比它所屬的大區(qū)塊的交互還凸顯。并且還要能體現(xiàn)主次關(guān)系。即小區(qū)塊的*用戶的操作習(xí)慣

*用戶行為自由可控用戶的行為是可以按照自己的意愿控制的。系統(tǒng)不得強迫用戶執(zhí)行任何操作。.如亮色按鈕點擊一定有響應(yīng)，所有文字和圖片都可用.任何一個頁面都有清晰離開本頁的按鈕.不要欺騙用戶，如：明明是關(guān)閉按鈕，點擊后卻是進入另一個頁面.用戶可以取消絕大部分操作：如用戶可以注銷他的賬號，刪除上傳的照片，編輯回復(fù)等等。在設(shè)計功能的時候一定要考慮用戶的刪除功能。*容錯性用戶在使用產(chǎn)品過程也是一個探索過程， 產(chǎn)品應(yīng)該允許用戶犯錯，而且必須給用戶重新嘗試的機會，讓用戶處于放松的心態(tài)。設(shè)計過程中，首先要幫助用戶避免出錯，比如采用合適的控件（相同情況下選擇控件比輸入控件出錯機會更?。?，給予輸入幫助或啟示。用戶出錯后，需要提供撤銷或返回功能，使用戶返回到上一步操作重新探索。 出錯反饋要親和，避免責(zé)備用戶或魯莽的打斷或推出產(chǎn)品，要禮貌的指出錯誤所在并提供有用的補救建議。把用戶經(jīng)常容易犯的錯都考慮到常規(guī)操作流程里，把可以確定的誤操作，給其正確的操作結(jié)果。讓用戶犯錯不知不覺。*操作的靈活高效性.優(yōu)化操作流程：依用戶習(xí)慣的流程去設(shè)計操作流程，把相關(guān)的操作放在一起，不斷優(yōu)化操作流程，以主要任務(wù)為中心，圍繞完成這個任務(wù)設(shè)置相應(yīng)的操作，去掉多余或是無關(guān)操作.減少誤操作：容易誤操作的按鈕盡量不要放在一起.批量操作：重復(fù)的操作可以考慮做成批量操作.鍵盤操彳如Enter,Esc等

.快捷按鈕：如返回頂部，返回底部，團購的浮動分類等.簡單的判斷：用戶操作盡可能是不需要思考的，如果點擊一個按鈕需要思考3秒以上才確定則肯定不合格.響應(yīng)時間：點擊首頁響應(yīng)的時間不要超過 5秒，其他頁面的響應(yīng)時間應(yīng)短些。有研究表明超過10秒絕大部分大部分用戶會閃人的。*操作提示.預(yù)先信息提示所有交互進行前需要提供給用戶預(yù)先應(yīng)該知道的提示信息。表單提交類表單提交的步驟，每個表單項的要求需要給出提示信息。（如密碼要多少多少位。實時提示密碼的強度等）謹(jǐn)慎類操作如果一個操作導(dǎo)致的結(jié)果會涉及到用戶利益的，如扣除金幣等。都需要預(yù)先特別提示。（如：扣除金幣的操作需要預(yù)先提示扣除金幣數(shù)目，以及當(dāng)前金幣是否足夠。等等。）差異化規(guī)則當(dāng)一個功能的規(guī)則與用戶習(xí)慣的規(guī)則具有一定的差異或比較復(fù)雜時，需要給出提示。或者給出幫助。.所有交互進行中需要提供操作相關(guān)的提示。操作確認(rèn)提示一個操作涉及數(shù)據(jù)刪除，等需要謹(jǐn)慎操作的操作需要給出刪除確認(rèn)提示框。操作錯誤提示當(dāng)用戶的操作不符合操作的規(guī)則，需要給出操作提示。（如評論字?jǐn)?shù)為0或超過限制字?jǐn)?shù)，搜索框未輸入容時提交）3、結(jié)果信息提示交互進行后給出結(jié)果反饋。查詢類結(jié)果任何信息列表、查詢結(jié)果，當(dāng)對應(yīng)信息無結(jié)果的時候需要給出有無結(jié)果狀態(tài)提示。保存類結(jié)果一個表單是用戶提交保存數(shù)據(jù)的。如設(shè)置個人資料。提交保存后需要給出提示。成功綠色、失敗紅色、普通灰色。附加類結(jié)果一個表單是對其他數(shù)據(jù)進行附加的，如評論等。提交成功后應(yīng)直接跳轉(zhuǎn)到操作產(chǎn)生的結(jié)果展示部分。（如提交評論后應(yīng)該直接展示給用戶他提交的評論）*各類彈框彈框以不遮蓋與彈框信息相關(guān)原頁面 用戶可能需要核對信息為基本原則，彈框與原信息放在相近的位置，并保真用戶可見且易操作。確認(rèn)框：常用于刪除或批量操作，再次確認(rèn)使用。交互規(guī)則：直接顯示對話框，點擊按鈕后直接消失。標(biāo)題：操作+目標(biāo)，例如刪除日志，刪除照片專輯，解除好友關(guān)系……按鈕：確定 +取消 把取消放在更容易點擊的位置操作框：常用于進一步操作，入口較小，但操作步驟較多時，比如加好友，設(shè)隱私等。交互規(guī)則：直接顯示對話框，確認(rèn)完畢后，變?yōu)橥ㄖ颉?biāo)題：操作 +目標(biāo)，一般為入口的名字，例如新建照片專輯，修改真心話，添加選項 按鈕：保存（行為）+取消，行為例如加為好友，添加，分享……把保存放在更容易點擊的位置通知框：常用于確認(rèn)框和操作框的確認(rèn)后，通知用戶結(jié)果，一般只有一個按鈕。交互規(guī)則：點擊按鈕立即消失，如果不點擊按鈕，1秒后漸隱消失。標(biāo)題：沿用之前操作框的標(biāo)題并加上結(jié)果按鈕：關(guān)閉把按鈕放在最容易點擊的位置提示框：常用于表單提交后的驗證，通知用戶哪些信息不完整或者操作步驟不對。多條信息提示使用1、2、3……的序號排列標(biāo)題：提示按鈕：確定（或知道了）把按鈕放在最容易點擊的位置未保存提示框：常用于表單未保存就跳轉(zhuǎn)的提示，提示用戶未保存信息是否需要保存。標(biāo)題：未保存+目標(biāo)，例如未保存日志，未保存?zhèn)€人檔案，未保存隱私設(shè)置……按鈕：保存 +不保存 +取消 把保存放在最容易點擊的位置操作框快捷鍵：支持鍵盤的enter操作框上的主操作，一般為”確定”"保存”等，支持鍵盤的esc操作框上的取消/關(guān)閉操作，一般為“取消""關(guān)閉XX'等。2.2.4頁面間交互、用于規(guī)定頁面是采用新窗口打開還是本窗口打開的規(guī)則。首頁所有的頁面一般情況都是新頁面打開，除非首頁的重要功能在其他頁面都也有，這時候可以是在當(dāng)前頁面打開。通常情況往一下級頁面都是新頁面打開，往上級頁面當(dāng)前頁面打開。、不常規(guī)的，點擊時應(yīng)給出提示信息。如 :其他頁面中的 logo,鼠標(biāo)移入時應(yīng)提示“返回首頁”3、在沒有導(dǎo)航的頁面需要放上面包屑導(dǎo)航。4、頁面規(guī)則：主頁所有的頻道主頁主頁一般不直接容頁，除非是推薦的容所有頻道主頁都鏈向其他頻道主頁頻道主頁都鏈回主頁頻道主頁也鏈向?qū)儆谧约罕旧眍l道的容頁頻道主頁一般不鏈向?qū)儆谄渌l道的容頁所有容頁都鏈向主頁2.2.5任務(wù)交互（工具類）.完成任務(wù)的流程 :采用用戶通常的思考先后順序作為參考流程，并輔助其他要素形成最終的流程。如：現(xiàn)實生活中完成這個任務(wù)的先后順序、時間順序、從主要到次要、從簡單到復(fù)雜、從必須步驟到可選步驟等。.任務(wù)的分解：以為相對有區(qū)隔的子任務(wù)劃分步驟，并且這個步驟是在一個頁面可以操作完成的。每個步驟用戶完成的操作方式最好一致，這樣操作更通暢，效率更高。.可返回操作：當(dāng)前步驟應(yīng)有返回上一步的按鈕，上一步后可以對上一步驟重新編輯。.實時保存信息：當(dāng)頁面中用戶編輯的信息量較大時，應(yīng)考慮撤銷和保存功能，這樣用戶萬一操作被中斷時，仍可以找回之前填寫的信息。web業(yè)務(wù)架構(gòu)業(yè)務(wù)架構(gòu),以客戶賺錢為中心。的架構(gòu)服務(wù)用戶的同時也需要加進去商務(wù)信息，預(yù)留推商務(wù)信息的位置。每一塊推的商務(wù)信息是針對哪些心理的用戶群，以及哪種方式他們才更容易接受所推的商務(wù)信息。web結(jié)構(gòu)seoweb結(jié)構(gòu)seo,以服務(wù)搜索引擎為中心邏輯結(jié)構(gòu)邏輯結(jié)構(gòu)，網(wǎng)頁部所形成的邏輯或的網(wǎng)絡(luò)圖。它本身由網(wǎng)頁決定，通過的網(wǎng)絡(luò)圖可以更直觀的檢查的是否合理。邏輯結(jié)構(gòu)的意義邏輯結(jié)構(gòu)有兩方面的意義：一方面是用戶在瀏覽頁面時，方便用戶通過跳轉(zhuǎn)到相關(guān)頁面；另一方面是方便搜索引擎的蜘蛛爬蟲抓取信息。搜索引擎抓取的是一的網(wǎng)頁，就等同于投票，別