幫你完成創(chuàng)意十足的網(wǎng)頁(yè)設(shè)計(jì)的小技巧

2014-4-4    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   yvirxh.cn  )是一家專注而深入的界面設(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)這里

作為一名UI設(shè)計(jì)師,每年都會(huì)沉浸在一些新的界面設(shè)計(jì)趨勢(shì)中興奮不已。接下來(lái),我們將探尋2014年的設(shè)計(jì)趨勢(shì),這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢(shì),緊跟時(shí)尚潮流。

這些新趨勢(shì)讓設(shè)計(jì)變得妙趣橫生。但是很多專家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的設(shè)計(jì)。當(dāng)然,響應(yīng)式設(shè)計(jì)不僅去年是熱點(diǎn),今年依然還會(huì)被人們重視。同樣,柵格化設(shè)計(jì)作為最基本的設(shè)計(jì),也會(huì)被繼續(xù)延續(xù)下去。

這次,藍(lán)藍(lán)設(shè)計(jì)想探索一下那些逐漸發(fā)展起來(lái)的設(shè)計(jì)潮流。也許過去我們只是偶爾嘗試一下這些界面設(shè)計(jì)風(fēng)格,但是今年我們會(huì)真正關(guān)注它們。

更多留白/負(fù)空間

I think I might -

ithinkimight

Shun Cutlery

Shun Cutlery

Nate Hanson

Nate Hanson

我們要更簡(jiǎn)潔的設(shè)計(jì)。去年我們狂熱追捧極簡(jiǎn)主義和對(duì)應(yīng)的簡(jiǎn)潔的視覺設(shè)計(jì)。從logo到名片再到網(wǎng)站,每一處都將簡(jiǎn)潔進(jìn)行到底。今年,UI設(shè)計(jì)師會(huì)在視覺設(shè)計(jì)中增加更多留白,這毫無(wú)疑問會(huì)將簡(jiǎn)潔設(shè)計(jì)推向另一個(gè)高潮。

負(fù)空間是一種重要的藝術(shù)設(shè)計(jì)方法,很多人也認(rèn)為不必將元素填滿畫布的每一個(gè)角落。將負(fù)空間應(yīng)用在web設(shè)計(jì)中會(huì)產(chǎn)生很棒的效果,因?yàn)椴恍枰獙⒛敲炊嘣囟汲尸F(xiàn)在界面上,人們也在逐漸適應(yīng)這一點(diǎn)。當(dāng)我們?cè)L問網(wǎng)站時(shí)很清楚自己需要什么。希望不怎么搜索就能找到目標(biāo)信息。

建議:別總想著如何通過設(shè)計(jì)創(chuàng)造空間。進(jìn)行常規(guī)設(shè)計(jì)然后將頁(yè)面上的內(nèi)容進(jìn)行刪減,通過這樣的方式你也能得到期望的設(shè)計(jì)效果。

桃紅色和淺橙色

Handcrafted websites, mobile apps and brands - Manos

manoscrafted

6

etchapps

7

fhoke

我們仔細(xì)研究過很多web設(shè)計(jì)中的流行色。藍(lán)色是最流行的顏色之一。從企業(yè)網(wǎng)站到娛樂站點(diǎn),用點(diǎn)藍(lán)色好像就能設(shè)計(jì)出一個(gè)不錯(cuò)的網(wǎng)站。甚至一度(也許會(huì)持續(xù)下去),我們也喜愛暗黑主題的網(wǎng)站。重要的是,這么多顏色,關(guān)鍵時(shí)刻你能有所借鑒。

今年的流行色是肉色、粉色、淺橙色。我認(rèn)為這些顏色能夠與任何彩色和無(wú)彩色搭配,它們顯得既沉靜又不單調(diào),既有魅力又不張揚(yáng)。我認(rèn)為很多人今年將會(huì)(應(yīng)該會(huì))在設(shè)計(jì)中運(yùn)用到這些顏色。

建議:想嘗試一下這些神奇的顏色嗎?試試 #F97743 和 #F38268吧!

大塊頭有大效果

- dmvA Architecten -

dmva-architecten

Allan Yu

allanyu

10

ryanmichaelkelly

如今,我們不僅僅設(shè)計(jì)傳統(tǒng)的電腦顯示屏,也設(shè)計(jì)平板電腦和手機(jī)。網(wǎng)站設(shè)計(jì)即使在巴掌大小的空間也要清晰可見。很多UI設(shè)計(jì)師在進(jìn)行web設(shè)計(jì)時(shí)都采用增大字號(hào)和圖片的方式,但是這些方式還不夠新穎、大膽。

現(xiàn)在,是時(shí)候做更大膽的設(shè)計(jì)了!我們一直都在進(jìn)行常規(guī)的設(shè)計(jì),但是現(xiàn)在的分辨率越來(lái)越高,支持的像素也越來(lái)越高。事實(shí)上,很多印刷媒體中的經(jīng)驗(yàn)已經(jīng)被應(yīng)用到顯示設(shè)計(jì)中。是時(shí)候?qū)⒍呓Y(jié)合、回歸web設(shè)計(jì)了。

超大設(shè)計(jì)能夠吸引人們的注意力,這和簡(jiǎn)潔設(shè)計(jì)有異曲同工之妙。如果有什么大塊兒頭的東西,吸引我的注意力,我一定會(huì)先看它!這也許是讓我們擺脫平日里各種信息干擾的另外一種途徑。

建議:我們已經(jīng)嘗試過大尺寸的圖片,現(xiàn)在試試大小在64px到72px之間的文字吧!建議使用FitText這樣的工具,這樣文字就能自適應(yīng)不同尺寸的屏幕。

動(dòng)態(tài)圖片

11

socialdesignhouse

12

teehanlax

13

patrikervell

隨著技術(shù)的不斷發(fā)展,在web設(shè)計(jì)中添加動(dòng)態(tài)圖片和視頻變得越來(lái)越容易, 而這并不會(huì)占用很多空間。因此,在web設(shè)計(jì)中上述元素會(huì)逐漸成為一種常態(tài)。想想,誰(shuí)不希望自己訪問的網(wǎng)站像是從霍格沃茲魔法學(xué)校來(lái)的?

動(dòng)態(tài)效果能夠強(qiáng)有力地吸引人們的注意力,能讓那些普通的圖片和滾動(dòng)條變得富有魅力?,F(xiàn)在進(jìn)行界面設(shè)計(jì)的時(shí)候設(shè)計(jì)師不僅可以使用靜態(tài)圖片,還能使用動(dòng)態(tài)圖片,這無(wú)疑為設(shè)計(jì)師開啟了一片廣闊的天地。動(dòng)態(tài)效果是我最期待的設(shè)計(jì)趨勢(shì),不知道誰(shuí)能將它運(yùn)用到?

建議:找一些html5有關(guān)視頻部分的教程,好好學(xué)習(xí)一下,開啟你不一樣的UI設(shè)計(jì)吧!

不要再用圖片庫(kù)了

14

italiokitchen

15

neuarmy

16

artifactcoffee

人們?cè)缇筒幌『膘拍康臅r(shí)尚大片了,他們希望看到真實(shí)的產(chǎn)品信息。那種將產(chǎn)品照片疊在純白背景上的風(fēng)格也已經(jīng)過時(shí),人們想要了解產(chǎn)品的個(gè)性和背后的故事。
網(wǎng)站依然是維系公司和客戶之間的重要紐帶,因此產(chǎn)品展示的真實(shí)性對(duì)于目標(biāo)客戶就顯得十分重要,所以總用那些單純的產(chǎn)品照片或者經(jīng)過修飾的時(shí)尚大片并不是個(gè)好主意。
雖然大部分web設(shè)計(jì)師不能完全決定使用怎樣的圖片,但是在線展示品牌的個(gè)性與形象還是非常重要。我期待看到更多的網(wǎng)站敢于使用展示產(chǎn)品真實(shí)面貌的圖片并通過信息的整合來(lái)講述產(chǎn)品設(shè)計(jì)背后的故事。
建議:買一部相機(jī)或者與一位攝影師配合,這樣才能獲得與web設(shè)計(jì)理念相匹配的圖片。這能幫助公司提升產(chǎn)品銷量。

結(jié)論

Web設(shè)計(jì)和時(shí)尚設(shè)計(jì)有很多相似之處,那些看似遙遠(yuǎn)的設(shè)計(jì)理念可能很快就會(huì)付諸實(shí)踐。融入潮流之中,共享設(shè)計(jì)之美,嘗試新鮮事物,開創(chuàng)未來(lái)風(fēng)格。

日歷

鏈接

個(gè)人資料

存檔