網(wǎng)站設計必須知道的幾個秘訣,這些你都知道嗎?復雜的設計技巧總是很花時間,也實在是復雜。 高級效果為設計增色不少,但如果用得不對,只會影響用戶對重點內(nèi)容的關注。 高級效果可能正好是一項好的設計的沖擊力所在,但即便如此,也還是需要一些更簡單的效果與其配合。
簡單的效果和技巧是建造當今設計的基石。 比方說,如果你都不知道如何正確選擇顏色和文字效果,燦爛的星光效果又能有什么用?
本著「少就是多」的理念,我們?yōu)槟憔x了十個簡單好用的設計技巧,它們能大大提升你設計的專業(yè)性和感染力。
基礎先行,學會走之前要先學會爬,讓我們從最基礎的簡單有效設計的概念開始。
上面說過,瀏覽者會忽視廣告。當你在設計圖形的時候要確保它們不是太過于繁雜和混亂不理解。人們會覺得繁雜的圖形和色彩豐富的圖形會很難看。所以你要避免這種事的發(fā)生。
在設計圖形的時候要找出一個“point”讓瀏覽者來注意。
很可惜,添加額外的對比是最被忽視和棄用的技巧之一。
技術的發(fā)展為所有想使用漸變的人提供了各種創(chuàng)造漸變的工具。 但漸變真的很好么?
即使上海網(wǎng)站設計的每一個頁面都使用了漸變,也未必能達到?jīng)_擊的沖擊,只有漸變使用的節(jié)制和精妙才是網(wǎng)站設計成功的關鍵,同時,網(wǎng)站制作的大標題,按鈕和背景都要有細微的鏡像的內(nèi)容,以此來強調(diào)內(nèi)容,尤其是漸變的按鈕更為復雜,上海網(wǎng)站設計公司認為這里將是訪客注意的重點。
雖然漸變的類型有很多,但網(wǎng)站設計要采用更為豐富的技巧,才能抓住訪客的眼球。
1)從黑色到灰色的水平線性漸變,位于頁面頂部
2)頁眉處的綠色徑向漸變
3)登陸框背景的「CJ」 標志上方模糊的斜向漸變
4)輸入框背景中淡淡的垂直線性漸變
5)導航條背景的垂直漸變
6)Webinar廣告中明亮的線性漸變
7)另一個垂直線性減弱,用在了大標題處
字符間距,或者稱為字距調(diào)整(kerning),能對標題、段落、logo等文字相關內(nèi)容造成巨大影響。 其遠不止每個字符之間的距離那么簡單。
當網(wǎng)站制作文字圖片的字間距的時候,要盡量縮小,可以使得敘述內(nèi)容顯得更為簡潔有力。
小而無抗鋸齒的字體如果沒有適當?shù)淖址g距,將更加難以閱讀。
如果你以前沒有在意,試試現(xiàn)在對你設計中的字符間距做一些調(diào)整,你會為調(diào)整后帶來的不同而震驚。
改變字母大小寫不過是按一下Shift或者Caps Lock鍵的功夫,但很少有設計師好好利用了這一技巧的潛能。
頁面上方的大橫幅通告,一般用大寫字母寫著「WATCH LIVE(觀看直播)」或者「BREAKING NEWS(最新消息)」 。 這些通告都是非常重要的內(nèi)容,這種方式很好地吸引了訪客的注意。
另外,采用純大寫的按鈕,讓他們的小按鈕足夠清楚易讀。 在這種5像素高的應用里,小寫字母,如a, m, x,可能只有2到3像素高,非常難以辨認。
雖然技術上比較復雜,消鋸齒仍可以歸納為「使邊緣平滑」,在各種設計中都有運用到。 在Web設計的世界里,是否消鋸齒部分決定于文字是要出現(xiàn)在圖片還是HTML文字中。 另有一個讓事情變得復雜的情況,部分瀏覽器或操作系統(tǒng)會自動在一定程度上消鋸齒,但總的來說,HTML文字是不具有抗鋸齒功能的。
混搭是王道! 完美的東西一般都顯得很假或者乏味。 樹木的枝葉并不完全對稱;任何形式的照明都不會產(chǎn)生平衡的影子;照相機鏡頭有時會讓部分景物模糊,以及產(chǎn)生鏡頭光暈…… 有些設計需要干凈的人造風格,另一些則需要混搭一點~
任何人都能在使用一臺電腦十分鐘后告訴你它并不完美。 但在設計過程中,電腦可以為你創(chuàng)造完美的結果。 在你最喜歡的設計工具中使用直線工具時,只需要采用默認設置,你就能畫出特定兩點間的完美直線。
為設計創(chuàng)造藝術風格化的瑕疵比你想像中要容易。 你只需要將素材變成灰色或褐色,再添加一點細節(jié)……
文本和圖片在表達和傳遞信息時各有千秋,你應該合理的選擇文本或圖片。如果你想給瀏覽者傳遞一個信息,那么我建議你使用文字來代替靜態(tài)的圖形。
如果你還在為如何讓內(nèi)容突出、消隱而一籌莫展,請試試各種不同的模糊方式。 通過模糊前景、模糊背景,甚至整個設計,你可以動態(tài)地增加你的項目的沖擊力。 模糊的焦點,需要至少部分地相關聯(lián)。 通過模糊一個元素,焦點被帶向另一內(nèi)容。
壁紙使用簡單的模糊創(chuàng)造平靜的、生機勃勃的感官。 一些明銳的線條用來形成圖像的焦點,而模糊的背景對于壁紙的整體效果至關重要。
模糊亦可形成深度和層次覆蓋的感覺。在網(wǎng)站制作的時候,可以將窗口后面的內(nèi)容模糊掉,形成很酷的漫反射玻璃效果。 使用高斯模糊即可創(chuàng)造類似效果。
即使我們強調(diào)保證整潔和直線,你仍然有需要為你的設計添加一些額外趣味。
更改設計元素的對齊方式可以讓它們更容易被記住,更容易被人們討論起,結果是讓整個設計更高效。
這一技巧并不只是用于文字。 部分設計師在思考一項設計概念時會利用模板化內(nèi)容或者個人工作習慣。 這可以加快給客戶回應的速度,但也經(jīng)常會限制了創(chuàng)意——尤其是在內(nèi)容對齊方面。
現(xiàn)在的網(wǎng)頁大部分是700到900像素寬,一般在瀏覽器中居中,并且是方盒子式的構造。 大部分案例中,這樣做使內(nèi)容安排有序,但也有一些站點,需要設計師考慮跳出盒子,創(chuàng)造特色。
這可能是最重要也最被忽視的設計技巧了。 去掉不必要的部分,也是最難做的部分之一。
通過去掉所有不必要的部分, 只留下了必要部分,可以同時展示7個大廣告(128 * 96像素),,53個favico廣告(16 *16像素) ,以及一大群網(wǎng)站(56個)——全部在頁面上方1000像素內(nèi)! 甚至網(wǎng)站的logo都被削減到了53乘7 像素。
在整個internet中日均頁面訪問只有4秒。這就意味著你沒有足夠的時間來讓瀏覽者加深對網(wǎng)站的印象和互動。你要盡可能精確的來說明你這個網(wǎng)站最主要的功能是什么。如果一個網(wǎng)站打開的時間超過了瀏覽者等待的時間,那么瀏覽者將會失去興趣,最終的結果是瀏覽者去別的網(wǎng)站。
不要把設計元素推雜在一起,要留空白。讓它們之間有呼吸的空間。特別是適用于文本。
如果使用正確的文本格式,那么文本將有更多的機會被讀取。不要害怕使用段落,粗體,斜體,引用文字,下劃線或者大字字母。..。..任何可以讓你的文本更加受吸引的方式。當然有時你需要使用引導語句,來引導讀者的目光。推薦參考文章:網(wǎng)頁設計技巧:頁面排版的3個常見問題
根據(jù)一些眼球追蹤的數(shù)據(jù)表明,閱讀者在看一個網(wǎng)頁的路徑,像一個字母“F”。這表明瀏覽者最先注重的地方有,頭部,三分之一處,和左側。所以我們要想一下如何把網(wǎng)站最重要的部分放在這幾個地方。
瀏覽者會忽視廣告。他們會忽視橫幅廣告或文字廣告。因此要避免網(wǎng)頁的設計看起來像廣告似的。還有瀏覽者也會忽視大塊的文本。沒有人會有很多的時間去看那一大部分的文本只為獲得一個網(wǎng)站的主要內(nèi)容。(我也沒有耐心去看)所以我們要盡量的簡化文本,或者是增加一些圖像裝飾來吸引眼球。
如果你要寫一篇文章,那么你首先要確定好文章的標題。好的標題可以吸引瀏覽者的目光。一個好的標題可以讓瀏覽者更好的抓住文章的重點。
上海網(wǎng)站設計的左上側是瀏覽者最先注意的地方。這是因為人們閱讀的習慣造成的(從左上角開始閱讀)。再加上早期的網(wǎng)站也是按這個方式設計的。所以我們常常把LOGO放在左上角。那么我們來想想能不能再加入些什么東西來引導瀏覽者呢?(登陸鏈接,搜索框,網(wǎng)站的口號。..。..)
當你走進一個房間的時候,你不可能看到房間里所有的東西。你第一眼注意的是房間里有沒有人,然后再去注意能吸引你眼球的東西。當瀏覽者第一次訪問網(wǎng)站也是這樣子的。當瀏覽者第一次訪問你的網(wǎng)站時,需要你來引導他們來訪問網(wǎng)站。比如說一個登陸按扭,一個“more”按扭,新聞。
合理使用顏色很有挑戰(zhàn)性。在挑選完美的色彩組合和為各種色調(diào)找到合適位置的過程中,時間嘩啦啦地就流走了。
網(wǎng)站制作的時候我們會發(fā)現(xiàn),很多404頁面都很單調(diào),當訪客在等待跳轉的時候,會不會因為這些原因而跳出呢?
全譜色彩漸變完美地吸引了人們的注意。 它保持了簡單性,有著灰色的配合,也不會讓眼睛感到不適。 但在一項設計中采用四種或五種以上的顏色通常都顯得太過了。 除非你非常確信你的設計需要那么多顏色,還是采用簡單的四色組合比較好。
當你在設計中克制而明智地使用色彩時,吸引訪客對重要項目的注意力就變得相當容易。
字體的藝術博大精深,遠遠超出我們大部分人的想像。 字體中超出x高度部分(ascenders )和邊位(side bearings)處的創(chuàng)作空間巨大,你可以在此處添加一些有趣的細節(jié)。
以上就是“網(wǎng)站設計必須知道的幾個秘訣”的內(nèi)容了,更多網(wǎng)站建設案例精彩內(nèi)容請關注海淘科技!