網(wǎng)站設(shè)計必須知道的幾個秘訣

網(wǎng)站設(shè)計必須知道的幾個秘訣，這些你都知道嗎？復(fù)雜的設(shè)計技巧總是很花時間，也實在是復(fù)雜。 高級效果為設(shè)計增色不少，但如果用得不對，只會影響用戶對重點內(nèi)容的關(guān)注。 高級效果可能正好是一項好的設(shè)計的沖擊力所在，但即便如此，也還是需要一些更簡單的效果與其配合。

簡單的效果和技巧是建造當(dāng)今設(shè)計的基石。 比方說，如果你都不知道如何正確選擇顏色和文字效果，燦爛的星光效果又能有什么用?

本著「少就是多」的理念，我們?yōu)槟憔x了十個簡單好用的設(shè)計技巧，它們能大大提升你設(shè)計的專業(yè)性和感染力。

基礎(chǔ)先行，學(xué)會走之前要先學(xué)會爬，讓我們從最基礎(chǔ)的簡單有效設(shè)計的概念開始。

1、使用清爽而干凈的圖形

上面說過，瀏覽者會忽視廣告。當(dāng)你在設(shè)計圖形的時候要確保它們不是太過于繁雜和混亂不理解。人們會覺得繁雜的圖形和色彩豐富的圖形會很難看。所以你要避免這種事的發(fā)生。

在設(shè)計圖形的時候要找出一個“point”讓瀏覽者來注意。

2、增加對比

很可惜，添加額外的對比是最被忽視和棄用的技巧之一。

3、漸變

技術(shù)的發(fā)展為所有想使用漸變的人提供了各種創(chuàng)造漸變的工具。 但漸變真的很好么?

即使上海網(wǎng)站設(shè)計的每一個頁面都使用了漸變，也未必能達(dá)到?jīng)_擊的沖擊，只有漸變使用的節(jié)制和精妙才是網(wǎng)站設(shè)計成功的關(guān)鍵，同時，網(wǎng)站制作的大標(biāo)題，按鈕和背景都要有細(xì)微的鏡像的內(nèi)容，以此來強(qiáng)調(diào)內(nèi)容，尤其是漸變的按鈕更為復(fù)雜，上海網(wǎng)站設(shè)計公司認(rèn)為這里將是訪客注意的重點。

雖然漸變的類型有很多，但網(wǎng)站設(shè)計要采用更為豐富的技巧，才能抓住訪客的眼球。

1)從黑色到灰色的水平線性漸變，位于頁面頂部

2)頁眉處的綠色徑向漸變

3)登陸框背景的「CJ」 標(biāo)志上方模糊的斜向漸變

4)輸入框背景中淡淡的垂直線性漸變

5)導(dǎo)航條背景的垂直漸變

6)Webinar廣告中明亮的線性漸變

7)另一個垂直線性減弱，用在了大標(biāo)題處

4、字符間距

字符間距，或者稱為字距調(diào)整(kerning)，能對標(biāo)題、段落、logo等文字相關(guān)內(nèi)容造成巨大影響。 其遠(yuǎn)不止每個字符之間的距離那么簡單。

當(dāng)網(wǎng)站制作文字圖片的字間距的時候，要盡量縮小，可以使得敘述內(nèi)容顯得更為簡潔有力。

小而無抗鋸齒的字體如果沒有適當(dāng)?shù)淖址g距，將更加難以閱讀。

如果你以前沒有在意，試試現(xiàn)在對你設(shè)計中的字符間距做一些調(diào)整，你會為調(diào)整后帶來的不同而震驚。

5、大小寫

改變字母大小寫不過是按一下Shift或者Caps Lock鍵的功夫，但很少有設(shè)計師好好利用了這一技巧的潛能。

頁面上方的大橫幅通告，一般用大寫字母寫著「WATCH LIVE(觀看直播)」或者「BREAKING NEWS(最新消息)」 。 這些通告都是非常重要的內(nèi)容，這種方式很好地吸引了訪客的注意。

另外，采用純大寫的按鈕，讓他們的小按鈕足夠清楚易讀。 在這種5像素高的應(yīng)用里，小寫字母，如a, m, x，可能只有2到3像素高，非常難以辨認(rèn)。

6、消鋸齒

雖然技術(shù)上比較復(fù)雜，消鋸齒仍可以歸納為「使邊緣平滑」，在各種設(shè)計中都有運用到。 在Web設(shè)計的世界里，是否消鋸齒部分決定于文字是要出現(xiàn)在圖片還是HTML文字中。 另有一個讓事情變得復(fù)雜的情況，部分瀏覽器或操作系統(tǒng)會自動在一定程度上消鋸齒，但總的來說，HTML文字是不具有抗鋸齒功能的。

混搭是王道! 好的東西一般都顯得很假或者乏味。 樹木的枝葉并不完全對稱;任何形式的照明都不會產(chǎn)生平衡的影子;照相機(jī)鏡頭有時會讓部分景物模糊，以及產(chǎn)生鏡頭光暈…… 有些設(shè)計需要干凈的人造風(fēng)格，另一些則需要混搭一點~

7、制造瑕疵

任何人都能在使用一臺電腦十分鐘后告訴你它并不好。 但在設(shè)計過程中，電腦可以為你創(chuàng)造好的結(jié)果。 在你最喜歡的設(shè)計工具中使用直線工具時，只需要采用默認(rèn)設(shè)置，你就能畫出特定兩點間的好直線。

為設(shè)計創(chuàng)造藝術(shù)風(fēng)格化的瑕疵比你想像中要容易。 你只需要將素材變成灰色或褐色，再添加一點細(xì)節(jié)……

8、文本VS圖片

文本和圖片在表達(dá)和傳遞信息時各有千秋，你應(yīng)該合理的選擇文本或圖片。如果你想給瀏覽者傳遞一個信息，那么我建議你使用文字來代替靜態(tài)的圖形。

9、模糊

如果你還在為如何讓內(nèi)容突出、消隱而一籌莫展，請試試各種不同的模糊方式。 通過模糊前景、模糊背景，甚至整個設(shè)計，你可以動態(tài)地增加你的項目的沖擊力。 模糊的焦點，需要至少部分地相關(guān)聯(lián)。 通過模糊一個元素，焦點被帶向另一內(nèi)容。

壁紙使用簡單的模糊創(chuàng)造平靜的、生機(jī)勃勃的感官。 一些明銳的線條用來形成圖像的焦點，而模糊的背景對于壁紙的整體效果至關(guān)重要。

模糊亦可形成深度和層次覆蓋的感覺。在網(wǎng)站制作的時候，可以將窗口后面的內(nèi)容模糊掉，形成很酷的漫反射玻璃效果。 使用高斯模糊即可創(chuàng)造類似效果。

10、對齊

即使我們強(qiáng)調(diào)保證整潔和直線，你仍然有需要為你的設(shè)計添加一些額外趣味。

更改設(shè)計元素的對齊方式可以讓它們更容易被記住，更容易被人們討論起，結(jié)果是讓整個設(shè)計更高效。

這一技巧并不只是用于文字。 部分設(shè)計師在思考一項設(shè)計概念時會利用模板化內(nèi)容或者個人工作習(xí)慣。 這可以加快給客戶回應(yīng)的速度，但也經(jīng)常會限制了創(chuàng)意——尤其是在內(nèi)容對齊方面。

現(xiàn)在的網(wǎng)頁大部分是700到900像素寬，一般在瀏覽器中居中，并且是方盒子式的構(gòu)造。 大部分案例中，這樣做使內(nèi)容安排有序，但也有一些站點，需要設(shè)計師考慮跳出盒子，創(chuàng)造特色。

11、消除累贅

這可能是最重要也最被忽視的設(shè)計技巧了。 去掉不必要的部分，也是最難做的部分之一。

通過去掉所有不必要的部分， 只留下了必要部分，可以同時展示7個大廣告(128 * 96像素),，53個favico廣告(16 *16像素) ，以及一大群網(wǎng)站(56個)——全部在頁面上方1000像素內(nèi)! 甚至網(wǎng)站的logo都被削減到了53乘7 像素。

12、4秒的時間(我們在設(shè)計首頁時盡可能的簡化，并加速打開網(wǎng)站的速度

在整個internet中日均頁面訪問只有4秒。這就意味著你沒有足夠的時間來讓瀏覽者加深對網(wǎng)站的印象和互動。你要盡可能精確的來說明你這個網(wǎng)站最主要的功能是什么。如果一個網(wǎng)站打開的時間超過了瀏覽者等待的時間，那么瀏覽者將會失去興趣，最終的結(jié)果是瀏覽者去別的網(wǎng)站。

13、留白

不要把設(shè)計元素推雜在一起，要留空白。讓它們之間有呼吸的空間。特別是適用于文本。

14、文本格式

如果使用正確的文本格式，那么文本將有更多的機(jī)會被讀取。不要害怕使用段落，粗體，斜體，引用文字，下劃線或者大字字母。..。..任何可以讓你的文本更加受吸引的方式。當(dāng)然有時你需要使用引導(dǎo)語句，來引導(dǎo)讀者的目光。推薦參考文章：網(wǎng)頁設(shè)計技巧:頁面排版的3個常見問題

15、“F”閱讀模式

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

16、瀏覽者忽視有哪些?

瀏覽者會忽視廣告。他們會忽視橫幅廣告或文字廣告。因此要避免網(wǎng)頁的設(shè)計看起來像廣告似的。還有瀏覽者也會忽視大塊的文本。沒有人會有很多的時間去看那一大部分的文本只為獲得一個網(wǎng)站的主要內(nèi)容。(我也沒有耐心去看)所以我們要盡量的簡化文本，或者是增加一些圖像裝飾來吸引眼球。

17、吸引眼球的設(shè)計元素

如果你要寫一篇文章，那么你首先要確定好文章的標(biāo)題。好的標(biāo)題可以吸引瀏覽者的目光。一個好的標(biāo)題可以讓瀏覽者更好的抓住文章的重點。

18、網(wǎng)站的“黃金地段”(左上側(cè))

上海網(wǎng)站設(shè)計的左上側(cè)是瀏覽者最先注意的地方。這是因為人們閱讀的習(xí)慣造成的(從左上角開始閱讀)。再加上早期的網(wǎng)站也是按這個方式設(shè)計的。所以我們常常把LOGO放在左上角。那么我們來想想能不能再加入些什么東西來引導(dǎo)瀏覽者呢?(登陸鏈接，搜索框，網(wǎng)站的口號。..。..)

19、引導(dǎo)瀏覽者的目光

當(dāng)你走進(jìn)一個房間的時候，你不可能看到房間里所有的東西。你第一眼注意的是房間里有沒有人，然后再去注意能吸引你眼球的東西。當(dāng)瀏覽者第一次訪問網(wǎng)站也是這樣子的。當(dāng)瀏覽者第一次訪問你的網(wǎng)站時，需要你來引導(dǎo)他們來訪問網(wǎng)站。比如說一個登陸按扭，一個“more”按扭，新聞。

20、色彩

合理使用顏色很有挑戰(zhàn)性。在挑選好的色彩組合和為各種色調(diào)找到合適位置的過程中，時間嘩啦啦地就流走了。

網(wǎng)站制作的時候我們會發(fā)現(xiàn)，很多404頁面都很單調(diào)，當(dāng)訪客在等待跳轉(zhuǎn)的時候，會不會因為這些原因而跳出呢?

全譜色彩漸變好地吸引了人們的注意。 它保持了簡單性，有著灰色的配合，也不會讓眼睛感到不適。 但在一項設(shè)計中采用四種或五種以上的顏色通常都顯得太過了。 除非你非常確信你的設(shè)計需要那么多顏色，還是采用簡單的四色組合比較好。

當(dāng)你在設(shè)計中克制而明智地使用色彩時，吸引訪客對重要項目的注意力就變得相當(dāng)容易。

字體的藝術(shù)博大精深，遠(yuǎn)遠(yuǎn)超出我們大部分人的想像。 字體中超出x高度部分(ascenders )和邊位(side bearings)處的創(chuàng)作空間巨大，你可以在此處添加一些有趣的細(xì)節(jié)。

網(wǎng)站題目：網(wǎng)站設(shè)計必須知道的幾個秘訣
文章URL：http://www.bm7419.com/news11/169761.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)