超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

開發(fā)人員應(yīng)該知道5個設(shè)計技巧

2014-3-13    藍藍設(shè)計的小編

轉(zhuǎn)載藍藍設(shè)計(   www.miumiuwan.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

優(yōu)秀的編碼和優(yōu)秀的設(shè)計之間是相輔相成的。不幸的是,視覺設(shè)計能力偏弱的人通常會覺得自己缺乏天賦,換句話說,就是人們要么覺得自己具有出眾的美學(xué)天賦,要么就是這方面的白癡。對這個說法,我可不敢茍同。

如果你在一個小團隊里面身兼數(shù)職,卻又沒有多少美學(xué)基礎(chǔ)。又或者你覺得你們的項目在視覺上還有更多發(fā)揮的空間,那么這篇文章就是寫給你的。藍藍設(shè)計將談到傳統(tǒng)的5個消除丑陋藝術(shù)設(shè)計的元素和原則(或者至少能夠進行一定程度的掩蓋)

1.來點留白

大多數(shù)的UI設(shè)計開發(fā)者并不在意添加空白的像頁邊距,填充,行高,或者其他任何增加空白的CSS屬性。識別出開發(fā)者設(shè)計的界面設(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 " 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>

可以看到,在上面的盒子中,文本緊緊地擠向了盒子的邊緣,每一行之間也沒有空白。相比之下,第二個就要易讀多了,而且能夠看得出是經(jīng)過精心規(guī)劃的。

在藝術(shù)領(lǐng)域,元素之間的這個區(qū)域就被稱之為負空間,盡管在設(shè)計的其他領(lǐng)域,通常被稱作“空白空間”。負空間能夠使得瀏覽者迅速地識別設(shè)計的不同部分。同時也讓文字更易讀。

下面是幾點小建議:

  • 確保文本有足夠的“呼吸”空間。在區(qū)域的四邊上都應(yīng)該有合適的填充。文本不應(yīng)該碰到元素的邊緣。
  • 注意“盒中盒”。當頁面的元素之間是使用邊框而不是頁邊距時,你得到的就是矩形的嵌套。下一次給元素添加邊框的時候,試著添加邊距來進行替代。
  • 額外建議:給元素的下邊緣添加一點點額外的空白。通常這樣可以制造一些視覺上的抬升,使得這些元素在頁面上看起來更輕。當藝術(shù)家在制作襯邊時,他們通常會采用這一招來進行襯邊以使底邊看起來比其他邊更大。僅僅合理地使用留白這一個方法,就已經(jīng)能夠讓你比其他嘗試做視覺設(shè)計的開發(fā)者做得好出100%了。

2.設(shè)置明暗以增加對比

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

The symbols for various dynamics in music.

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

明暗配合,一個用以描述顏色明暗的術(shù)語。把明調(diào)和暗調(diào)放到一起的時候,就形成了對比。比如說,一個表單中的指示文本可能沒有表單的標簽?zāi)敲粗匾?,因此,你就?yīng)該使用更小的字號或者灰色來顯示相關(guān)的文本,而不是搶眼的黑色。如果表單用黑色加粗顯示Email標簽欄,你可能需要在底部添加一些補充說明,以讓用戶相信不會使用被提供的地址來干一些非法的事情。這一段提示性文字相對沒有那么重要,因此要設(shè)置得比其他的稍“輕”一些。

Screenshot of the profile URL input box on the Treehouse website.

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

視覺上的重量感不是你要注意的唯一一件事。你還得確保明暗的正確搭配,這樣的話屏幕上的元素就可以很容易地被區(qū)分開來。這是一種很常見的設(shè)計思路,因為較之色彩來說,人類的眼睛實際上對色彩的明暗更為敏感。

幾點建議:

  • 與編寫代碼要先進行測試一樣,你也應(yīng)該先對你的設(shè)計進行測試。在放出你的新設(shè)計版本以前,試著先用灰度模式來瀏覽你的網(wǎng)頁。這樣你就可以立馬看出顏色最深和最淺的區(qū)域是哪兒了。如果每一樣?xùn)|西看起來都是一樣的的話,那就該添加更多的明暗來增加對比了。單純的色彩是不足以把不同的設(shè)計元素區(qū)分開來的;明暗配合更重要。
  • 把你的網(wǎng)頁截屏下來,然后使用像Photoshop這樣的圖片編輯工具調(diào)整曲線,色階(level),看一下不同的效果。有時候,你會發(fā)現(xiàn)使用CSS進行一些細微的調(diào)整便能夠讓設(shè)計看起來更賞心悅目。幾乎在每一種設(shè)計形式中,初學(xué)者都會禁不住誘惑而去調(diào)高明暗對比。將明暗調(diào)低是成熟的標志,同時也有助于突出設(shè)計中的重要部分。

3.用紋理增加多樣性

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

A photograph of rust and dirt.

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

一些關(guān)于紋理的建議:

  • 無論是象征意義上還是字面上,紋理都可以添加視覺上的豐富程度,同時還能讓頁面開起來更有深度。
  • 如果你使用了漸變,或者許多細致的顏色過渡,那么你真的應(yīng)該在頂部使用一些輕度的紋理,因為這樣可以減少顏色的條帶效應(yīng)(Banding),讓顏色過渡得更自然。CSS3中的Multiple backgounds 可以輕松實現(xiàn)這一點。
  • 在CSS3里面使用多層背景也意味著能以最小的文件大小來實現(xiàn)紋理化。你可以用一個充滿噪點的小方形重復(fù)來填充整個頁面。然后,你還可以把這個小方塊用到其他很多地方去。

4.用形狀來表達

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

A screenshot of the arrow-like settings button in iOS.

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

僅僅因為我們大多數(shù)的工具是以矩形為基礎(chǔ)的,這并不意味著我們不能打破常規(guī),制作其他的形狀。事實上,CSS讓你稍作努力就能做出相對復(fù)雜的形狀來。

你為什么應(yīng)該使用形狀:

  • 很多物體都是以矩形為基礎(chǔ)設(shè)計的:電視機,桌子,房間,等等。即使你沒有下意識去注意他們,彎曲的和不規(guī)則的對象更容易吸引眼球。試一試用獨特的形狀來代替像用顏色,明暗配合,或者簡單地讓元素在頁面中顯得更大這樣的方法。
  • 一個設(shè)計優(yōu)秀的圖標或者LOGO就可以被看作一個簡單的形狀,比如說蘋果索尼公司的LOGO一樣。在設(shè)計圖標和LOGO的時候,第一步從一個純粹的黑色形狀開始。然后就可以自由發(fā)揮,添加任何顏色,任何形狀。
  • 額外建議:如果你在你的WebAPP中試圖增加交互,但是訪問者卻不去點擊你得按鈕,試試使用不同的形狀來進行A/B測試,例如,嘗試用箭頭來替代矩形按鈕?;蛟S剛剛開始的時候,看起來會有點別扭,但是這樣可能能夠吸引足夠注意力。相似的,永遠不要讓工具限制了你的想象力。先設(shè)計,然后再去尋找那些可能的東西。

5.尋找平衡

在你花數(shù)小時時間去安排像素點進行頁面細節(jié)設(shè)計之前,回過頭去看看整體效果是很重要的。視覺平衡是用直接的語言很難傳達的一個東西,但是又是一種能夠被很快培養(yǎng)起來的才能。

The Starry Night

在《星夜》中,梵高在畫面的右邊使用了一條上升的水平線來平衡左邊的暗色形狀。新月的光亮和獨特形狀控制住了右上角,和左下角的暗色空白相呼應(yīng)。

平衡是思考設(shè)計構(gòu)圖和布局的一種方式。它是指在整個設(shè)計中不同區(qū)域的視覺重量的不同分布。正確應(yīng)用這一點是很重要的:不平衡的頁面會讓人產(chǎn)生緊張感。在極少的情況下,你可以應(yīng)用平衡來有意地制造緊張,比如為恐怖電影設(shè)計的網(wǎng)站,但是在大多數(shù)網(wǎng)頁應(yīng)用中,都應(yīng)該避免這種情況的產(chǎn)生。

通常稍微看一眼就能看出頁面的一邊是不是比另一邊顯得更重。可能相比于設(shè)計中的另一邊,一邊的元素太多了,對比太重了,色彩太多了,等等。哪怕就是有頁面的垂直滾動,考慮考慮頁面中的上下平衡也是很重要的,不過這一點倒沒有水平方向的平衡那么重要。

讓頁面具有平衡感的幾點建議:

  • 畫出一直延伸到頁面中部一條垂直的線。是不是現(xiàn)在覺得這一邊比頁面的另一邊看起來多了一些東西?設(shè)計不需要是對稱的,但是至少左右應(yīng)該有相同的比重。
  • 從上到下瀏覽頁面。這樣可以阻止你的眼睛去閱讀文本,解釋UI小部件的作用。相反,你應(yīng)該去關(guān)注頁面中的大多數(shù)元素的堆放位置。如果你還不是很確定的話,也可以和第一點結(jié)合起來。

總結(jié):

這些基本的元素和原則讓你能夠更容易地理解設(shè)計。他們當然不能賦予你某種神秘的藝術(shù)特異功能,但是卻能夠幫助你制作出一些優(yōu)雅的頁面。如果你還有一些類似的建議的話,我也很樂意從評論中看到。

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔