5個熱門技巧幫您輕松搭建一個優雅得體的網站
5個熱門技巧幫您輕松搭建一個優雅得體的網站
發布日期：2018-06-21
瀏覽次數：3605
優秀的編碼能力和偉大的設計總是相輔相成的。不幸的是具備一般視覺設計技巧的設計師總是認為自己缺少與生俱來的一些"神力"。換句話說，人們普遍認為一個人要么生來就具有超然的審美能力，要么天生就沒有。這是依靠后天的努力無法獲取的。我實在無法認同這樣的觀點。簡單想一下：如果你在5歲時就停止了書寫，那么你后面的書寫可能就會很糟糕。藝術和設計也是一樣。如果你很早就放棄了設計練習，那么你是很難掌握這種能力的。不過，任何時候開始學習都不會太晚。事實上，客觀來說，當一個人越成熟時，他在學習新事物上也會更加容易。
如果你希望通過找尋一些技巧讓網站設計更加成功，這篇文章絕對是你的不二之選。在這有5種有關網站設計的準則，掌握了它們，你可以有效避免丑陋的設計（或者說讓網站沒有那么丑）。
1. 使用負空間 (Negative space)
大多數網站設計師很容易忽略一些能夠增加間距的CSS屬性，比如外邊距、內邊距、行高等。因此我們在設計完成的頁面上，很容易看見這樣的現象：文本通常緊靠著邊框，文本之間沒有足夠的間距，行與行之間也沒有空白。下面就是一個栗子，下圖的第一個文本框和第二個文本框形成了鮮明的對比，第一個文本框中文字貼緊邊框，也沒有設置行距，而第二個文本框就給人一種精心設計的感覺，訪客在閱讀時也會更加舒服。
在藝術設計和攝影領域里，各種設計元素之間區域就被稱為“負空間”。這聽上去可能有點專業，不過它在其他領域中的叫法你肯定聽過，那就是"留白"。負空間可以讓讀者迅速識別設計的不同部分， 這也能夠提高文本的可讀性。
使用建議：
- 確保文本有充分的呼吸空間。文本的四周應該設置合適的內邊距，絕對不能緊挨著元素的邊緣。
- 注意框內框的布局。如果頁面元素是通過邊框而不是外邊距來區別的話，很容易出現大量邊框嵌套的情況。所以，當你下次想要添加邊框區分元素時，不妨考慮使用一些外邊距。
- 額外福利：嘗試在元素的底部添加一些額外的空間。有時這在視覺上會有提升感還會讓這些元素在頁面上看起來更突出。藝術家在打磨作品通常也會使用這個視覺技巧。
其實只要簡單用好空白，你在網頁設計上已經比其他的網站開發者強不少了。
2. 通過不同值來建立對比
音樂中有個概念叫強弱法，當你演唱完一首歌的音調輕柔的部分，然后演唱強音，那么強音會聽上去更加響亮，反之亦然。在網站設計方面也是一個道理。如果一個網頁上的所有字體都是加粗的，那么加粗就一點意義都沒有了。
上圖中的字母是音樂強度的不同，從左到右依次為：弱、中弱、中強、強。而在設計中，你可以通過使用光與暗的顏色來調整視覺沖擊力。上圖底部的灰度圖也被稱為值尺度。
"值"是一個術語，用于描述一種顏色的亮度或暗度。當一個淺色和一個深色放在一起時，它就形成了一個對比。對比可以幫助訪客了解信息的不同重要程度。例如，一個表單元素的說明文字可能沒有一個表單的標簽重要，那么這些說明文字你就應該使用一種更小的字體，或者使用灰色字體來修飾，而不是粗黑體。如果你在表單標簽上用黑色粗體字給出了一個電子郵件，你可能需要在后面添加一些說明文字，讓訪客知道你不會濫用他們的信息。這些補充說明的文字并沒有那么重要，所以你應該使它們比其它的文字更"低調"些。如下圖，當你在Treehouse 網站上編輯個人信息時，你可以為你自己輸入一個特定的URL。其中黑色標識的文本是你的唯一標識符，而URL其余部分使用淺色，可以讓你知道你的網址最終是什么樣的。
在網站設計中，我們不僅僅需要注意文本的突出程度，還要確認設計中亮色和暗色的搭配，以讓訪客可以輕松識別出設計中的各個元素。這是一種有用的視覺工具，因為相對于識別出不同顏色的差異，人眼更易于識別出不同的對比度值的差異。
使用建議：
- 與測試代碼一樣，你也應該測試下設計。在發布下一個更新版本的設計時，先看下它的測試效果。如果一眼看過去你能很快感知到最暗區域和最亮區域，那就沒有什么問題。但如果所有的元素看上去都是同樣的灰度，那么就需要增加一些對比色。對比色可以很好的區分網站中各個設計元素。
- 給網頁截個圖，并用圖像編輯工具（如Photoshop)來調整（灰度的)曲線和級別值。有時你也許會在無意之間發現簡單的CSS調整就可以做出更好的設計。
幾乎在各種形式的設計中，初學者往往認為所有的元素都應該很突出，不顧一切提高"值"。其實不然，"值"的降低有時候更是成熟的一種表現，而且有助于突出網站中最重要的部分。
3. 使用紋理增加多樣性
現實世界中的大多數事物都不是完全平坦光滑的。紋理可以給界面帶來多樣性。即便你不打算通過擬真設計模擬一個逼真的表面，在某些位置添加一點紋理也是比較好的做法。有關紋理的靈感無處不在，紙上、金屬上、石頭上、設置是塊狀的文字。大部分時候，一點點的隨意的紋理便足以讓你的設計從其他平淡無趣的頁面中脫穎而出。紋理可以給平凡無奇的事物賦予豐富的個性和厚重的歷史感（見下圖）。
使用建議：
- 紋理可以增加視覺豐富度，并且可以讓頁面看上去更有深度。
- 如果你在網站中使用漸變或者過渡色，那你最好在上面加一些紋理，這會減少色差，讓不同色彩更容易融合。CSS3 的多重背景樣式就能輕易實現這一點。
- 使用CSS3的分層背景使得紋理的文件尺寸不需要很大。你可以畫一個小的方塊（大概256*256就夠了），填充一些雜色，然后背景采用平鋪（css中允許repeat）。這樣實現圖片的復用。
4. 形狀設計
在網頁設計方面，我們一直強調"內容為皇",也因此我們很容易忽視形狀這種藝術元素。事實上，世界上存在著大量的各種二維圖形，但HTML 和 CSS 卻相當傾向于矩形。事實上，"盒子模型”就是一個需要掌握的最重要的 CSS 概念之一。當你淹沒在代碼中，試圖去獲取一個數據庫連接程序開始工作，或者努力調整背景的放置位置時，你很容易忘掉一些最基本的東西--形狀。非矩形形狀可以引起訪客對重要頁面的足夠關注。下圖就是ios系統中使用類似箭頭的返回按鈕的栗子，這種形狀能夠引起用戶的注意，起到交互的作用。
雖然我們的設計工具最開始是為了矩形而設計的，但這并不意味著我們不能打破規則，制作出一些其他的形狀。
為什么要使用不同的形狀：
- 生活中很多物體都是用矩形設計的，比如電視機，桌子，房子等等。不管你有沒有意識到，相比矩形，彎曲的或不規則的形狀往往更能起到突出的作用。如果你無法使用顏色、色彩對比或讓一個設計元素變得更大突出一個元素，那么你可以嘗試使用一種特別的形狀。
- 優秀的肖像設計或 Logo 設計可以使用一個簡單的形狀，蘋果公司或迪尼斯公司的 logo都是很好的栗子。圖標或 logo的設計通常都是從純黑色的圖形開始的，陰影或其他色彩可以或許再添加上去。
- 附加提示：如果你想要提高網站的用戶轉化率，而訪客遲遲不點擊行為引導按鈕，你可以嘗試改變一下CTA按鈕的形狀（比如，用一個箭頭狀的按鈕而不是矩形的）。也許剛開始看上去可能有點不習慣，沒準能夠獲得更多的關注哦！
順便提一句，永遠不要讓現有的工具禁錮了你的想象力。設計為先，想好設計以后再看看怎樣可以實際落實貫徹下去。
5. 視覺平衡
在你花時間調節像素、調整頁面細節之前，你還有一件重要的事情要做，那就是縱覽全局，看看網站是否實現了視覺上的平衡。視覺平衡這個概念比較復雜，很難用言語講明白，但它是一種可以很快開發出來的直覺能力。以梵高的《星空》為例，他實現了左側沉重黑影和右側地平線的平衡，上空的明亮和獨特形狀也與下面的空白相對。
視覺平衡是考察網站布局的一種方式，它是指一片區域的元素數量相對于另一區域上的視覺加權數。我們必須了解視覺平衡的重要性，不平衡的頁面會帶來一種糟糕的緊張感。雖然在極少數情況下，我們可以有意的調整視覺平衡營造一種緊張的氛圍（比如恐怖電影的網站），大部分網站在實際應用都要避免視覺的不平衡。通常情況下觀察和認定一個頁面是否左重右輕（或右重左輕）是比較容易的，可能就是相對于另一區域這邊的元素更多、對比效果更強、著色更密等。考慮一下上下區塊的平衡度也十分重要，盡管這垂直滾動的網站頁面上，這可能沒有水平方向的平衡那么重要。
使用建議：
- 在頁面的正中間畫一條豎直的線，察兩側的元素是否平衡。當然，設計時不可能做到完成的對稱相等，只要內容等看上去差不多就好。
- 試下將頁面倒過來看看。如此一來你就不會盯著上面的文本和想搞明白上面的UI組件有什么用。相反，這時你就會忍不住關心上面的大部分頁面元素是否布局合理。要是還有疑問，你也可以將這一條與上面的技巧一起用。
結論
以上這些基本的原理和原則會使設計變得更加得容易。它們可能不會給你帶來化腐朽為神奇的效果，但卻能有助于你創建一些舒適得體的網頁。如果你還有一些實用的技巧，歡迎留言！
出自：開源中國社區 Oschina.net