天天看點

十個簡單好用的設計技巧

複雜的設計技巧總是很花時間,也實在是….複雜 (-_-||)。 進階效果為設計增色不少,但如果用得不對,隻會影響使用者對重點内容的關注。進階效果可能正好是一項好的設計的沖擊力所在,但即便如此,也還是需要一些更簡單的效果與其配合。

  簡單的效果和技巧是建造當今設計的基石。比方說,如果你都不知道如何正确選擇顔色和文字效果,燦爛的 星光效果又能有什麼用?

本着“少就是多”的理念,我們為你精選了十個簡單好用的設計技巧 ,它們能大大提升你設計的專業性和感染力。

  基礎先行。 學會走之前要先學會爬,讓我們從最基礎的簡單有效設計的概念開始。

1. 增加對比

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

十個簡單好用的設計技巧

  Joost de Valk 采用了細的高對比度邊線,讓訪客能更容易區分頁面的不同區域。在上圖中放大了的部分,你可以看到,大多數時候這種對比隻是一條1像素的高亮線挨着1像素的暗線。

  話說回來,這個頁面上的“More”和“Go”按鈕與周圍的對比度太小,即使你刻意在找也很容易被忽略掉。

十個簡單好用的設計技巧

  WordPress 為頁面中最受歡迎的連結 “Download(下載下傳)” 使用了對比色。 這種紅色在冷灰色調的頁面中自己跳了出來。但這紅色在明度方面有所收斂,避免了影響頁面整體效果。

  如果你對于該不該使用對比猶豫不決,就把這一決定過程當做是化妝。你要做的不是讓人們大吼“看呐,對比色!”,你需要的是自然而然的吸引他們注意頁面中重要的内容,高亮出已經存在的重點。

2. 漸變

  技術的發展為所有想使用漸變的人提供了各種創造漸變的工具。但漸變真的很好麼?

十個簡單好用的設計技巧

  Media Temple 網站的每一個頁面都使用了漸變,不過其漸變使用的節制和精妙才是設計成功的關鍵。logo,大标題,按鈕和背景都有細微的或者鏡像的漸變,以強調内容。最複雜的漸變用在了那些簡單的120像素寬的按鈕(子頁面中的“ACTIVATE”和“LEARN MORE”)上,因為它們是需要訪客注意的重點。

十個簡單好用的設計技巧

  Commission Junction的漸變運用遠沒有Media Temple的細緻,而且采用了過于豐富的漸變類型:

1.從黑色到灰色的水準線性漸變,位于頁面頂部

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

3.登陸框背景的“CJ” 标志上方模糊的斜向漸變

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

5.導覽列背景的垂直漸變

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

7.另一個垂直線性減弱,用在了大标題處

  這種設計有點冒險,大部分漸變式有用的,但還是存在一些問題。最突出的一點是,設計喪失了一緻性。同選擇可辨性強的色彩組合一樣的道理,設計師也需要為每個項目選擇合适的漸變組合。

  例如,大的水準漸變(1)引導眼睛橫向注視頁面。這本沒有什麼問題,但就在此漸變的正下方又出現了把視線吸引到中心的徑向漸變(2)和把視線引導到右下角的斜向漸變(3)。這會給訪客造成困擾,起伏變化的視覺流(visual flow)也削弱了可讀性。

使用漸變時,保證好的視覺流很重要:請保守而精緻地使用漸變。最重要的一點,僅當對整體設計有幫助時才使用漸變。

3. 色彩

  合理使用顔色很有挑戰性。在挑選完美的色彩組合和為各種色調找到合适位置的過程中,時間嘩啦啦地就流走了。

十個簡單好用的設計技巧

  Realmac Software 大膽地在404頁面采用了全色系漸變。這樣做有以下原因:首先,Realmac已經将頁面背景設成了中性灰色,更重要的是,頁面其餘部分沒有明顯的色彩的,除了藍色的文字連結和一些零星的毫無沖擊力的色彩。

  全譜色彩漸變完美地吸引了人們的注意。它保持了簡單性,有着灰色的配合,也不會讓眼睛感到不适。但在一項設計中采用四種或五種以上的顔色通常都顯得太過了。除非你非常确信你的設計需要那麼多顔色,還是采用簡單的四色組合比較好。

十個簡單好用的設計技巧

  當你在設計中克制而明智地使用色彩時,吸引訪客對重要項目的注意力就變得相當容易。在 Interspire的 “About Us(關于我們)” 頁面中,訪客的注意力被迅速吸引到頁面頂部LOGO那紅色的一點上,然後是标題,然後是頁面右邊的LOGO照片。

  在字型上花點功夫。字型的藝術博大精深,遠遠超出我們大部分人的想象。字型中超出x高度部分(ascenders )和邊位(side bearings)處的創作空間巨大,你可以在此處添加一些有趣的細節。不過還是運用接下來的一些技巧更重要。

4. 字元間距

  字元間距,或者稱為字距調整 (kerning),能對标題、段落、logo等文字相關内容造成巨大影響。其遠不止每個字元之間的距離那麼簡單。

十個簡單好用的設計技巧

  Krop’s 的新作品集建立器,在處理文字的時候,十分吝啬空間。該網站上大部分基于文字的圖檔中的字元間距都很小,使叙述内容顯得更為簡潔有力。

十個簡單好用的設計技巧

  上圖表現了字元間距對你的設計可能産生的負面影響。小而無抗鋸齒的字型如果沒有适當的字元間距,将更加難以閱讀。

  如果你以前沒有在意,試試現在對你設計中的字元間距做一些調整,你會為調整後帶來的不同而震驚。推薦圖檔中使用“Myriad Pro” 字型,HTML文字中使用“Trebuchet MS”字型進行嘗試。

5. 大小寫

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

十個簡單好用的設計技巧

  MSNBC’s 對大小寫的使用很值得參考。logo是全小寫的,頁面其他部分的字型大小寫更有着微妙的變化。頁面上方的大橫幅通告,一般用大寫字母寫着“WATCH LIVE(觀看直播)”或者 “BREAKING NEWS(最新消息)” 。這些通告都是非常重要的内容,這種方式很好地吸引了訪客的注意。

  另外,采用純大寫的按鈕,讓他們的小按鈕足夠清楚易讀。 在這種5像素高的應用裡,小寫字母,如a, m, x,可能隻有2到3像素高,非常難以辨認。

十個簡單好用的設計技巧

  繼續關注新聞站點, CNN 在字型大小寫上缺少變化來平衡頁面。導覽列是全部大寫的,但頁面中的其餘部分則很傳統地幾乎全部采用了首字母大寫。

6. 消鋸齒

  雖然技術上比較複雜,消鋸齒仍可以歸納為“使邊緣平滑”,在各種設計中都有運用到。在Web設計的世界裡,是否消鋸齒部分決定于文字是要出現在圖檔還是HTML文字中。另有一個讓事情變得複雜的情況,部分浏覽器或作業系統會自動在一定程度上消鋸齒,但總的來說,HTML文字是不具有抗鋸齒功能的。

十個簡單好用的設計技巧

  Stockxpert 非常聰明地在廣告頁面中部分使用消鋸齒,而部分文字不消鋸齒。大部分文字都有平滑邊緣,但頁面頂部和底部的小字則保留了鋸齒。同上面說的MSNBC按鈕一個道理,5像素高的文字需要有盡量銳利的邊緣來保持可讀性。這種情況中的模糊或平滑邊緣會讓眼睛很累,最終放棄閱讀。

  混搭是王道! 完美的東西一般都顯得很假或者乏味。樹木的枝葉并不完全對稱;任何形式的照明都不會産生平衡的影子;照相機鏡頭有時會讓部分景物模糊,以及産生鏡頭光暈…… 有些設計需要幹淨的人造風格,另一些則需要混搭一點~

7. 制造瑕疵

  任何人都能在使用一台電腦十分鐘後告訴你它并不完美。但在設計過程中,電腦可以為你創造完美的結果。在你最喜歡的設計工具中使用直線工具時,隻需要采用預設設定,你就能畫出特定兩點間的完美直線。

十個簡單好用的設計技巧

  這個懷舊Ace牌的教程提供了很多步驟來讓這張牌看起來不完美。不得不說,這一過程并不簡單。不過其中的概念十分簡單——讓事物顯得老舊,創造不完美,給你的作品以獨特的肌理。

十個簡單好用的設計技巧

  這張蝴蝶照片看起來就像是20世紀中期拍攝的,另一個不完美的例子。其實它是用數位相機拍攝的,使用了一些濾鏡和顔色調整,賦予其懷舊效果。

  為設計創造藝術風格化的瑕疵比你想象中要容易。你隻需要将素材變成灰色或褐色,再添加一點細節……

8. 模糊

  如果你還在為如何讓内容突出、消隐而一籌莫展,請試試各種不同的模糊方式。通過模糊前景、模糊背景,甚至整個設計,你可以動态地增加你的項目的沖擊力。模糊的焦點,需要至少部分地相關聯。通過模糊一個元素,焦點被帶向另一内容。

十個簡單好用的設計技巧

  Ios V2 桌面使用簡單的模糊創造平靜的、生機勃勃的感官。一些明銳的線條用來形成圖像的焦點,而模糊的背景對于桌面的整體效果至關重要。

十個簡單好用的設計技巧

  模糊亦可形成深度和層次覆寫的感覺。 Windows Vista的Aero效果将視窗後面的内容模糊掉,形成很酷的漫反射玻璃效果。使用高斯模糊 即可創造類似效果。

9. 對齊

  即使我們強調保證整潔和直線,你仍然有需要為你的設計添加一些額外趣味。

十個簡單好用的設計技巧

  這個示例标志中的“logo”幾個字母被提到了右上角。更改設計元素的對齊方式可以讓它們更容易被記住,更容易被人們讨論起,結果是讓整個設計更高效。

  這一技巧并不隻是用于文字。部分設計師在思考一項設計概念時會利用模闆化内容或者個人工作習慣。這可以加快給客戶回應的速度,但也經常會限制了創意——尤其是在内容對齊方面。

十個簡單好用的設計技巧

  Icon Designer通過旋轉某些元素讓自己與衆不同。這一頁面很容易成為稀松平常的無聊之作,但簡單的幾個旋轉讓它趣味十足。

  現在的網頁大部分是700到900像素寬,一般在浏覽器中居中,并且是方盒子式的構造。大部分案例中,這樣做使内容安排有序,但也有一些站點,需要設計師考慮跳出盒子,創造特色。

接下來,最重要的是…

繼續閱讀