2014-3-13 藍藍設計的小編
轉載藍藍設計( m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供有效的 BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
來源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
優秀的編碼和優秀的設計之間是相輔相成的。不幸的是,視覺設計能力偏弱的人通常會覺得自己缺乏天賦,換句話說,就是人們要么覺得自己具有出眾的美學天賦,要么就是這方面的白癡。對這個說法,我可不敢茍同。
如果你在一個小團隊里面身兼數職,卻又沒有多少美學基礎。又或者你覺得你們的項目在視覺上還有更多發揮的空間,那么這篇文章就是寫給你的。藍藍設計將談到傳統的5個消除丑陋藝術設計的元素和原則(或者至少能夠進行一定程度的掩蓋)
大多數的UI設計開發者并不在意添加空白的像頁邊距,填充,行高,或者其他任何增加空白的CSS屬性。識別出開發者設計的界面設計是很容易的:文本都是緊緊地挨著邊緣的,沒有任何留白,而且屏幕元素之間是通過直線來實現分割的,而不是空白。
<IMG style="BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; FONT: 12px/21px Arial, Helvetica, Arial, sans-serif; MAX-WIDTH: 100%; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; HEIGHT: auto; COLOR: #525252; VERTICAL-ALIGN: middle; BORDER-TOP: 0px; BORDER-RIGHT: 0px; WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" alt="'Two examples of space. The first box reads " src="http://uisdc.qiniudn.com/wp-content/uploads/2013/04/space.png" frontier.??? final The ?Space... reads, box second you?? on in closing are walls the like feel ever you Do>
可以看到,在上面的盒子中,文本緊緊地擠向了盒子的邊緣,每一行之間也沒有空白。相比之下,第二個就要易讀多了,而且能夠看得出是經過精心規劃的。
在藝術領域,元素之間的這個區域就被稱之為負空間,盡管在設計的其他領域,通常被稱作“空白空間”。負空間能夠使得瀏覽者迅速地識別設計的不同部分。同時也讓文字更易讀。
在音樂中,有一個概念,叫做力度(Dynamics,指隨音樂強弱變化而變化的舞蹈動作或情態)。通過播放低聲播放輕柔的部分,這樣使得高音部分聽起來更高亢,這樣來增加情感,反之依然。在設計中的道理是一樣的。當所有的東西都是重點的時候,就沒有重點了。
這些字符是表示不同音樂力度的符號,從輕柔到高亢:弱,中弱,中強,強。在設計中,你可以通過顏色的明暗來調整視覺比重。圖片下方的漸變被稱之為價值量表。
明暗配合,一個用以描述顏色明暗的術語。把明調和暗調放到一起的時候,就形成了對比。比如說,一個表單中的指示文本可能沒有表單的標簽那么重要,因此,你就應該使用更小的字號或者灰色來顯示相關的文本,而不是搶眼的黑色。如果表單用黑色加粗顯示Email標簽欄,你可能需要在底部添加一些補充說明,以讓用戶相信不會使用被提供的地址來干一些非法的事情。這一段提示性文字相對沒有那么重要,因此要設置得比其他的稍“輕”一些。
當你在Treehouse編輯你的個人資料時,你可以為自己添加一個個性域名。深色的文本顯示了你獨特的名稱,淺色的文字是URL的其他部分。
視覺上的重量感不是你要注意的唯一一件事。你還得確保明暗的正確搭配,這樣的話屏幕上的元素就可以很容易地被區分開來。這是一種很常見的設計思路,因為較之色彩來說,人類的眼睛實際上對色彩的明暗更為敏感。
真實世界中的絕大多數東西都并非是完全平整光滑的。紋理會給你的界面帶來多樣性。即使你沒有嘗試使用擬物化(skueomorphism)來復制真實的表面,在不同的地方添加一些紋理也不失為一個好主意。紋理的靈感來源四處都是,紙張,金屬,石頭,都行。甚至連大塊的文字也可以被認為是紋理化的。通常一點隨機的噪點就能夠把你的設計和其他那些平庸乏味的設計區分開來。
紋理能夠讓平淡無奇的對象變得具有自身的特點和生命力。
在網頁設計中,最容易被忽略的藝術元素就是形狀。世界上二維的形狀似乎有很多,但是在HTML和CSS的世界里面更傾向于矩形。事實上,盒模型是CSS中需要掌握的最重要的概念。當你埋頭寫代碼,正在試圖連接一個數據庫,或者正在調整背景的合適位置的時候,很容易就會將這樣基礎的東西拋擲腦后。在頁面中,非矩形可以讓重要元素吸引足夠的注意力。
iOS中的這個箭形的返回鍵不但吸引力注意力,而且還能表達按鈕實際功用。
僅僅因為我們大多數的工具是以矩形為基礎的,這并不意味著我們不能打破常規,制作其他的形狀。事實上,CSS讓你稍作努力就能做出相對復雜的形狀來。
在你花數小時時間去安排像素點進行頁面細節設計之前,回過頭去看看整體效果是很重要的。視覺平衡是用直接的語言很難傳達的一個東西,但是又是一種能夠被很快培養起來的才能。
在《星夜》中,梵高在畫面的右邊使用了一條上升的水平線來平衡左邊的暗色形狀。新月的光亮和獨特形狀控制住了右上角,和左下角的暗色空白相呼應。
平衡是思考設計構圖和布局的一種方式。它是指在整個設計中不同區域的視覺重量的不同分布。正確應用這一點是很重要的:不平衡的頁面會讓人產生緊張感。在極少的情況下,你可以應用平衡來有意地制造緊張,比如為恐怖電影設計的網站,但是在大多數網頁應用中,都應該避免這種情況的產生。
通常稍微看一眼就能看出頁面的一邊是不是比另一邊顯得更重。可能相比于設計中的另一邊,一邊的元素太多了,對比太重了,色彩太多了,等等。哪怕就是有頁面的垂直滾動,考慮考慮頁面中的上下平衡也是很重要的,不過這一點倒沒有水平方向的平衡那么重要。
這些基本的元素和原則讓你能夠更容易地理解設計。他們當然不能賦予你某種神秘的藝術特異功能,但是卻能夠幫助你制作出一些優雅的頁面。如果你還有一些類似的建議的話,我也很樂意從評論中看到。