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