每個前端開發人員都應該知道五個設計技巧

優秀的開發人員和優秀的設計師在工作中必須要默契配合,不幸的是,針對審美能力較弱的開發人員來說,他們通常會覺得自己缺乏天賦,或者壓根就對設計這事提不起興趣。換句話說,大家可能都有這麼一個觀點:如果沒有與生俱來的美學天賦,那麼就必然沒有審美能力。然而,對這個說法,我會在接下來的文章裏幫您扭轉過來。

你只要稍微思考一下就會發現:如果你5歲的時候就停止寫作,那麼你對寫作可能就是一團糟,對於藝術設計,道理是一樣的。大多數人都是在他們開始掌握畫畫的時候就停止創作藝術了。

幸運的是,學習永遠都不晚。並且從事實來講,日漸成熟的你將更容易從主觀觀點中學習到客觀的知識。

如果你在一個小團隊裏面身兼數職,又或者你覺得你的項目可以取得成功,並且還有空間可以發揮的更完美的話,那麼這篇文章就是寫給你的。我們將談到傳統的5個消除惡俗設計的原則方法(當然我們也不迷信,但我保證至少能在現基礎上,提升一個檔次)

1. 是時候來點留白了

大多數的開發者並不在意添加空白的像頁邊距,填充,行高,或者其他任何增加空白的CSS屬性。識別出開發者設計的界面是很容易的:文本都是緊緊地挨着邊緣的,沒有任何留白,而且屏幕元素之間是通過直線來實現分割的,而不是空白。

可以看到,在上面的盒子中,文本緊緊地擠向了盒子的邊緣,每一行之間也沒有空白。相比之下,第二個就要易讀多了,而且能夠看得出是經過精心規劃的。在藝術領域,元素之間的這個區域就被稱之爲負空間,儘管在設計的其他領域,通常被稱作“留白”。負空間能夠使得瀏覽者迅速地識別設計的不同部分。同時也讓文字更易讀。

下面是幾點小建議:   

● 確保文本有足夠的“呼吸”空間。在區域的四邊上都應該有合適的填充。文本不應該碰到元素的邊緣。   

● 注意“盒模型”,當頁面的元素之間是使用邊框而不是頁邊距時,你得到的就是矩形的嵌套。下一次給元素添加邊框的時候,試着添加邊距來進行替代。   

● 額外建議:給元素的下邊緣添加一點點額外的空白。通常這樣可以製造一些視覺上的擡升,使得這些元素在頁面上看起來更輕。當藝術家在製作襯邊時,他們通常會採用這一招來進行襯邊以使底邊看起來比其他邊更大。僅僅合理地使用留白這一個方法,就已經能夠讓你比其他嘗試做視覺設計的開發者做得好出100%了。

2. 設置明暗以增加對比

在音樂中,有一個概念,叫做力度(Dynamics,指隨音樂強弱變化而變化的舞蹈動作或情態)。通過播放低聲播放輕柔的部分,這樣使得高音部分聽起來更高亢,這樣來增加情感,反之依然。在設計中的道理是一樣的。當所有的東西都是重點的時候,就沒有重點了。

這些字符是表示不同音樂力度的符號,從輕柔到高亢:弱,中弱,中強,強。在設計中,你可以通過顏色的明暗來調整視覺比重。圖片下方的漸變被稱之爲價值量表。

當你在Treehouse編輯你的個人資料時,你可以爲自己添加一個個性域名。深色的文本顯示了你獨特的名稱,淺色的文字是URL的其他部分。

一些建議:   

● 與編寫代碼要先進行測試一樣,你也應該先對你的設計進行測試。在放出你的新設計版本以前,試着先 用灰度模式來瀏覽你的網頁。這樣你就可以立馬看出顏色最深和最淺的區域是哪兒了。如果每一樣東西看起來都是一樣的的話,那就該添加更多的明暗來增加對比 了。單純的色彩是不足以把不同的設計元素區分開來的;明暗配合更重要。   

● 把你的網頁截屏下來,然後使用像Photoshop這樣的圖片編輯工具調整曲線,色階(level),看一下不同的效果。有時候,你會發現使用CSS進行一些細微的調整便能夠讓設計看起來更賞心悅目。幾乎在每一種設計形式中,初學者都會禁不住誘惑而去調高明暗對比。將明暗調低是成熟的標誌,同時也有助於突出設計中的重要部分。

3. 使用紋理增強設計感

真實世界中的絕大多數東西都並非是完全平整光滑的。紋理會給你的界面帶來多樣性。即使你沒有嘗試使用擬物化(skueomorphism)來複制真實的表面,在不同的地方添加一些紋理也不失爲一個好主意。紋理的靈感來源四處都是,紙張,金屬,石頭,都行。甚至連大塊的文字也可以被認爲是紋理化的。通常一點隨機的噪點就能夠把你的設計和其他那些平庸乏味的設計區分開來。

紋理能夠讓平淡無奇的對象變得具有自身的特點和生命力。

一些關於紋理的建議:   

● 無論是象徵意義上還是字面上,紋理都可以添加視覺上的豐富程度,同時還能讓頁面開起來更有深度。   

● 如果你使用了漸變,或者許多細緻的顏色過渡,那麼你真的應該在頂部使用一些輕度的紋理,因爲這樣可以減少顏色的條帶效應(Banding),讓顏色過渡得更自然。CSS3中的Multiple backgounds 可以輕鬆實現這一點。   

● 在CSS3裏面使用多層背景也意味着能以最小的文件大小來實現紋理化。你可以用一個充滿噪點的小方形重複來填充整個頁面。然後,你還可以把這個小方塊用到其他很多地方去。

4. 千萬別忽略了形狀的使用

在網頁設計中,最容易被忽略的藝術元素就是形狀。世界上二維的形狀似乎有很多,但是在HTML和CSS 的世界裏面更傾向於矩形。事實上,盒模型是CSS中需要掌握的最重要的概念。當你埋頭寫代碼,正在試圖連接一個數據庫,或者正在調整背景的合適位置的時 候,很容易就會將這樣基礎的東西拋擲腦後。在頁面中,非矩形可以讓重要元素吸引足夠的注意力。

iOS中的這個箭形的返回鍵不但吸引力注意力,而且還能表達按鈕實際功用。

我爲什麼慫恿你使用形狀:   

● 很多物體都是以矩形爲基礎設計的:電視機,桌子,房間,等等。即使你沒有下意識去注意他們,彎曲的和不規則的對象更容易吸引眼球。試一試用獨特的形狀來代替像用顏色,明暗配合,或者簡單地讓元素在頁面中顯得更大這樣的方法。        

● 一個設計優秀的圖標或者LOGO就可以被看作一個簡單的形狀,比如說蘋果索尼公司的LOGO一樣。在設計圖標和LOGO的時候,第一步從一個純粹的黑色形狀開始。然後就可以自由發揮,添加任何顏色,任何形狀。   

● 額外建議:如果你在你的WebAPP中試圖增加交互,但是訪問者卻不去點擊你得按鈕,試試使用不同的形狀來進行A/B測試,例如,嘗試用箭頭來替代矩形按鈕。或許剛剛開始的時候,看起來會有點彆扭,但是這樣可能能夠吸引足夠注意力。相似的,永遠不要讓工具限制了你的想象力。先天馬行空的大膽設計,然後再逐步做減法把那些真的對用戶有幫助的設計挑選出來。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章