設(shè)計(jì)網(wǎng)頁(yè)要注意什么

第頁(yè)設(shè)計(jì)網(wǎng)頁(yè)要注意什么1、網(wǎng)頁(yè)打開(kāi)時(shí)間不能超過(guò)4秒

頁(yè)面訪問(wèn)只有4秒，如果一個(gè)網(wǎng)站打開(kāi)的時(shí)間超過(guò)了瀏覽者等待的時(shí)間，那么瀏覽者將會(huì)失去興趣，最終的結(jié)果是瀏覽者去別的網(wǎng)站，這就意味著：我們?cè)谥贫ㄊ醉?yè)時(shí)盡可能的簡(jiǎn)化，并加速打開(kāi)網(wǎng)站的速度。所以我們必須省出那些花哨的頁(yè)面，當(dāng)然如果有那些美麗頁(yè)面那更好啊。那前提必須是要在4秒內(nèi)打開(kāi)你的網(wǎng)頁(yè)。

2、首頁(yè)重在引導(dǎo)瀏覽者的目光

首頁(yè)重在引導(dǎo)瀏覽者的目光，不要讓網(wǎng)站用戶進(jìn)了你的網(wǎng)站就像迷了路一樣，找不到了方向。打個(gè)比方，你走進(jìn)一個(gè)房間的時(shí)候，你不可能看到房間里所有的東西。你第一眼注意的是房間里有沒(méi)有人，然后再去注意能吸引你眼球的東西。當(dāng)瀏覽者第一次訪問(wèn)網(wǎng)站也是這樣子的。當(dāng)瀏覽者第一次訪問(wèn)你的網(wǎng)站時(shí)，必須要你來(lái)引導(dǎo)他們來(lái)訪問(wèn)網(wǎng)站。

3、網(wǎng)站的黃金寶地是左上側(cè)

眾所周知，網(wǎng)站的左上側(cè)是瀏覽者最先注意的地方。這是因?yàn)槿藗冮喿x的習(xí)慣造成的(從左上角開(kāi)始閱讀)。再加上早期的網(wǎng)站也是按這個(gè)方式制定的。所以我們經(jīng)常把LOGO放在左上角。當(dāng)然你還可以在這里加入更重要的東西。

4、字母F型的閱讀模式

跟據(jù)一些眼球追蹤的數(shù)據(jù)說(shuō)明，閱讀者在看一個(gè)網(wǎng)頁(yè)的路徑，像一個(gè)字母F。這說(shuō)明瀏覽者最先注重的地方有，頭部，三分之一處，和左側(cè)。所以我們要想一下如何把網(wǎng)站最重要的部分放在這幾個(gè)地方。

5、網(wǎng)站的用戶會(huì)忽視哪些內(nèi)容

瀏覽者會(huì)忽視廣告。他們會(huì)忽視橫幅廣告或文字廣告。因此要避免網(wǎng)頁(yè)的制定看起來(lái)像廣告似的。還有瀏覽者也會(huì)忽視大塊的文本。沒(méi)有人會(huì)有很多的時(shí)間去看那一大部分的文本只為獲得一個(gè)網(wǎng)站的主要內(nèi)容。所以我們要盡量的簡(jiǎn)化文本。在重要的地方加添加一些能吸引人的東西。

6、文本與圖片

這是一個(gè)有趣的事實(shí)。文字比任何靜態(tài)圖形更加吸引瀏覽者的眼球。如果你想給瀏覽者傳遞一個(gè)信息，那么我建議你使用文字來(lái)代替靜態(tài)的圖形。

7、吸引眼球的制定元素

我們來(lái)看一下哪些元素可以吸引瀏覽者的眼球:有鼓動(dòng)性的口號(hào)和按扭(通常使用明亮顏色)，如果你要寫一篇文章，那么你首先要確定好文章的標(biāo)題。好的標(biāo)題可以吸引瀏覽者的目光。便于讓瀏覽者更好的抓住文章的重點(diǎn)。

8、要使用正確的文本格式

不要害怕使用段落，粗體，斜體，引用文字，下劃線或者大字字母任何可以讓你的文本更加受吸引的方式。當(dāng)然有時(shí)你必須要使用引導(dǎo)語(yǔ)句，來(lái)引導(dǎo)讀者的目光。

9、慎重用圖片

上面說(shuō)過(guò)，瀏覽者會(huì)忽視廣告。當(dāng)你在制定圖形的時(shí)候要保證它們不是太過(guò)于繁雜和混亂不理解。人們會(huì)覺(jué)得繁雜的圖形和色彩豐富的圖形會(huì)很難看。所以你要避免這種事的發(fā)生。

10、留出空白空間

不要把制定元素推雜在一起，要留空白。這特別是適用于文本。

2手機(jī)網(wǎng)頁(yè)制定排版必須要注意的幾個(gè)事項(xiàng)

1.安全寬度與擴(kuò)大區(qū)域讓頁(yè)面適應(yīng)主流分辨率

與PC上網(wǎng)頁(yè)的做法一樣，確定一個(gè)安全寬度，把重要信息控制在640PX寬度內(nèi)(以iphone分辨率為安全寬度。目前主要瀏覽器在iphone4S下的首屏高度如下,可以依據(jù)具體頁(yè)面投放的渠道做相應(yīng)的首屏高度。

2.控制圖片的大小

專題的頭圖一般有很強(qiáng)的視覺(jué)，關(guān)于手機(jī)用戶來(lái)說(shuō)，加載一張圖片的等待時(shí)間比PC上成本大很多，如果一個(gè)頁(yè)面加載時(shí)間超過(guò)5秒，70%的用戶會(huì)選擇關(guān)閉，那么再出彩的專題也沒(méi)辦法浮現(xiàn)再用戶面前了,所以必須要對(duì)制定稿做折中的處理。

在做頭部的延展區(qū)域(超出640px范圍)，推舉使用純色，漸變，可以平鋪的素材，以便于減少頭圖的大小，提升加載速度，并且延展區(qū)域可以無(wú)縫連接。模糊的背景可以最大限度的壓縮圖片質(zhì)量。

3.字體

手機(jī)中的字號(hào)一般上〔電腦〕中的兩倍，一般在電腦中用的12px的字體在手機(jī)網(wǎng)頁(yè)中就該使用24px。在制定的過(guò)程中，也要使用iOS和安卓默認(rèn)渲染的字體，以便更真實(shí)的還原真實(shí)環(huán)境。在規(guī)范的專題中，主要字號(hào)控制在3個(gè)，大中小都有一個(gè)區(qū)間。避免隨意用字體字號(hào)，并且字號(hào)必須上整數(shù)。

4.控件交互區(qū)域合適觸控

手機(jī)專題的主按鈕高度大于80px，并且依據(jù)活動(dòng)的必須求放在首屏內(nèi)。文字鏈接上下的間距大于80px，手指在屏幕上熱區(qū)最小感應(yīng)是44px。

5.移動(dòng)端網(wǎng)頁(yè)少用跳轉(zhuǎn)

手機(jī)用戶的網(wǎng)絡(luò)環(huán)境不如PC用戶，頁(yè)面的跳轉(zhuǎn)會(huì)對(duì)用戶產(chǎn)生更大的心理效力，如果在手機(jī)頁(yè)面中能把信息合理的展示在一個(gè)頁(yè)面中最正確。如果非要跳轉(zhuǎn)，咱們可以用些假裝不是跳轉(zhuǎn)的方式，比如展開(kāi)，浮出等。減少用戶產(chǎn)生的不安全感。

3網(wǎng)站制定必須要注意的事項(xiàng)

1、搜索引擎不友好

搜索引擎關(guān)于難以處理和識(shí)別的打字稿、復(fù)數(shù)、連字號(hào)等等各種各樣的問(wèn)題，搜索的準(zhǔn)確度會(huì)降低。顯然，如果搜索引擎刻意去迎合這種錯(cuò)誤使用的話，會(huì)傷害到所有的搜索使用者。

一個(gè)相關(guān)的問(wèn)題是，搜索引擎區(qū)分結(jié)果是依靠文檔的重要性，而只是按照內(nèi)容關(guān)聯(lián)次數(shù)簡(jiǎn)單地進(jìn)行結(jié)果區(qū)分。

當(dāng)找不到信息的時(shí)候，搜索是用戶的救生索。即使有高級(jí)搜索功能，建議還是使用簡(jiǎn)單搜索，搜索形式應(yīng)該是一個(gè)簡(jiǎn)單的錄入框，就像我們常見(jiàn)的那一種。

2、使用PDF文件做為在線閱讀

用戶討厭在瀏覽的時(shí)候跳出PDF文件，因?yàn)槟菚?huì)打斷用戶的瀏覽過(guò)程，因?yàn)橐话愕臑g覽器按鈕無(wú)法工作，因此即使如打印或儲(chǔ)存文檔這樣簡(jiǎn)單的事情也會(huì)變得復(fù)雜。由于其版面制定是基于紙張優(yōu)化的，因此文字的字體很少會(huì)和用戶的流量其窗口相適應(yīng)。沒(méi)有了平滑的滾動(dòng)瀏覽，有的只是超小號(hào)的字體。

更糟糕的是，PDF文件內(nèi)容是分塊的，很難瀏覽。

PDF是關(guān)于印刷及發(fā)行手冊(cè)等和其他必須要打印的大文件來(lái)講是很合適的，使用它的目的只是為了保留它的信息使其網(wǎng)頁(yè)上瀏覽成為現(xiàn)實(shí)。

3、未改變已訪問(wèn)鏈接的顏色

一個(gè)好的瀏覽歷史能夠幫助你了解目前的位置，因?yàn)槟鞘悄銥g覽的起點(diǎn)。知道過(guò)去和現(xiàn)在的位置反過(guò)來(lái)使得決定下一步去哪里變得容易了。鏈接是這些瀏覽過(guò)程中的一個(gè)關(guān)鍵因素。用戶可以不去訪問(wèn)那些沒(méi)有用處的地址，相反，他們會(huì)訪問(wèn)那些對(duì)他們有幫助的鏈接地址。

最重要的是，他們知道哪些網(wǎng)頁(yè)已經(jīng)訪問(wèn)過(guò)了，這樣就不必一次又一次訪問(wèn)同一個(gè)歷史頁(yè)面。

但是這些好處只是基于一個(gè)重要的假設(shè)：由于網(wǎng)站提供不同的顏色顯示，用戶可以分辨出哪些鏈接訪問(wèn)過(guò)，哪些鏈接沒(méi)有訪問(wèn)過(guò)。如果訪問(wèn)一個(gè)鏈接后顏色沒(méi)有發(fā)生變化，那么用戶很可能會(huì)感到困惑并無(wú)意中反復(fù)訪問(wèn)同一歷史頁(yè)面。

4、文字未排版

將所有文字堆積在一起是一種可怕的體驗(yàn)，瀏覽這樣的文字將是痛苦的經(jīng)歷。

在線寫作，并不是為了打印，必須要讓用戶能很好地閱讀，下面是幾個(gè)改善的要點(diǎn)：

使用子標(biāo)題

使用列表

特別關(guān)鍵字

使用小段落

反金字塔結(jié)構(gòu)

簡(jiǎn)單的寫作風(fēng)格

5、固定字體大小

CSS樣式不幸讓網(wǎng)站有權(quán)禁止瀏覽器的"改變字體大小'的功能，并使得網(wǎng)站有一個(gè)固定的字體大小。關(guān)于大多數(shù)人的年齡超過(guò)40歲的人來(lái)說(shuō)，這個(gè)固定地文字大小實(shí)在太小了。

尊重用戶的喜好，讓他們按照自己的必須要修改文字的大小，同時(shí)，明確字體大小是相對(duì)的，而非絕對(duì)顯示像素的數(shù)量多少。

6.網(wǎng)頁(yè)標(biāo)題搜索引擎不友好

搜索是用戶發(fā)現(xiàn)網(wǎng)站的最重要途徑，搜索用戶找到一個(gè)獨(dú)立網(wǎng)站的最重要的方法。網(wǎng)頁(yè)的標(biāo)題是你吸引新用戶或老用戶從搜索列表中定位到你網(wǎng)站的主要工具。

4網(wǎng)站制定模板結(jié)構(gòu)要注意哪些

網(wǎng)站結(jié)構(gòu)規(guī)劃應(yīng)該注意哪些問(wèn)題?

1.URL制定。URL也是可以包涵關(guān)鍵詞的，比如你的網(wǎng)站是關(guān)于電腦的，你的URL中可以包涵"PC'，因?yàn)樗谒阉饕嫜劾锿ǔＪ?電腦'的同義詞。URL不要太長(zhǎng)，層次盡量不要超過(guò)4層，這個(gè)就點(diǎn)到為止。

2.欄目制定。欄目通常是與導(dǎo)航相關(guān)聯(lián)的，制定時(shí)應(yīng)該合計(jì)網(wǎng)站整體的主題，用戶可能會(huì)對(duì)哪些內(nèi)容感興趣，欄目名稱最好是網(wǎng)站的幾個(gè)主關(guān)鍵詞，這樣也方便利用導(dǎo)航的權(quán)重。

3.關(guān)鍵詞布局。理論上每一個(gè)內(nèi)容頁(yè)都應(yīng)該有它的核心關(guān)鍵詞，同一個(gè)欄目下的文章，盡可能圍繞欄目關(guān)鍵詞展開(kāi)。一個(gè)簡(jiǎn)單粗暴的辦法就是直接用欄目關(guān)鍵詞的長(zhǎng)尾詞。

有的客戶可能關(guān)于網(wǎng)站的結(jié)構(gòu)規(guī)劃不知道是什么東西，反正網(wǎng)站可以打開(kāi)，可以用就可以了，其他就不想管了，也不知道怎么樣去處理!其實(shí)一個(gè)網(wǎng)站的規(guī)劃是非常重要的，如果一開(kāi)始定位不對(duì)，后面又要推倒重建，這樣浪費(fèi)的是時(shí)間和金錢!規(guī)劃做得好的網(wǎng)站，后期還是有很多的拓展空間的!

模板制定應(yīng)該注意哪些細(xì)節(jié)?

1.權(quán)重結(jié)構(gòu)順序。整個(gè)頁(yè)面的html中(注意是html，而不是顯示出來(lái)的版面)，越靠前的位置，權(quán)重越高。由此引申出來(lái)，"title'、keyword、description三個(gè)標(biāo)簽，因?yàn)樽羁壳?，?quán)重最高。其次通常是導(dǎo)航，也是基本上是最靠上的，權(quán)重也非常高。再次就是文章標(biāo)題和正文。這是依據(jù)html的前后來(lái)排序的。

2.因?yàn)樗阉饕媸紫纫裱璚3C標(biāo)準(zhǔn)，所以，W3C定義的一些本來(lái)就是用來(lái)表示重要信息的標(biāo)簽，權(quán)重自然就高，比如，特別是h1，用來(lái)表示當(dāng)前頁(yè)面最重要的信息，一般每個(gè)頁(yè)面只能有一個(gè)，其權(quán)重估計(jì)與title相當(dāng)，也通常是用來(lái)放當(dāng)前頁(yè)面的標(biāo)題，當(dāng)然也有為了提升首頁(yè)權(quán)重，用h1來(lái)放置logo或首頁(yè)鏈接，都是可以的。另外還有em、strong這樣的標(biāo)簽，用來(lái)表示強(qiáng)調(diào)，一般認(rèn)為strong權(quán)重高于標(biāo)簽，同樣也是加粗作用，但我們認(rèn)為從SEO的角度看是沒(méi)有權(quán)重強(qiáng)化的。

3.css或