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

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

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

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

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

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

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

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

2、增加對(duì)比

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

3、漸變

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

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

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

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

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

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

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

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

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

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

4、字符間距

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

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

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

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

5、大小寫

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

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

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

6、消鋸齒

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

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

7、制造瑕疵

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

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

8、文本VS圖片

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

9、模糊

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

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

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

10、對(duì)齊

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

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

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

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

11、消除累贅

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

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

12、4秒的時(shí)間(我們?cè)谠O(shè)計(jì)首頁(yè)時(shí)盡可能的簡(jiǎn)化，并加速打開網(wǎng)站的速度

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

13、留白

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

14、文本格式

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

15、“F”閱讀模式

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

16、瀏覽者忽視有哪些?

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

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

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

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

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

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

當(dāng)你走進(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)站。比如說(shuō)一個(gè)登陸按扭，一個(gè)“more”按扭，新聞。

20、色彩

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

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

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

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

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

分享標(biāo)題：網(wǎng)站設(shè)計(jì)必須知道的幾個(gè)秘訣
鏈接分享：http://www.muchs.cn/news/169761.html

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

廣告

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