web2.0 :我一直聽到說這個時髦的詞,不管是喜歡還是討厭web2.0,它都是這種特定的web2.0設(shè)計(jì)風(fēng)格的一個主要的部分。這個指南的目的是想給一些設(shè)計(jì)新 手一些參考,或者是做為一個清單,給那些還在掙扎著適應(yīng)著好多社會性網(wǎng)絡(luò)/社會性媒體網(wǎng)站風(fēng)格的頁面圖形設(shè)計(jì)師們。
首先我們知道web2.0有很多技術(shù)定義,比如新媒體或者分享信息或者媒體等等。我不準(zhǔn)備講那些繁雜的東西,因?yàn)槲覀冎灰P(guān)注web2.0的圖形設(shè)計(jì)就好了。
web2.0常見的屬性:
簡單設(shè)計(jì) simple design
是什么阻礙了你的設(shè)計(jì)?也許是太多無用的元素?在進(jìn)行一個設(shè)計(jì)的時候,我經(jīng)常會發(fā)現(xiàn)我自己在使用一個元素后,立刻問自己一個問題這個設(shè)計(jì)元素的目的到底是什么,問過之后我發(fā)覺我不需要那個元素。
大面積留白 lots of white space
注 意留白(空白的地方可以讓你的作品呼吸,如果你愿意的話)是web2.0設(shè)計(jì)風(fēng)格當(dāng)中很重要的。恰當(dāng)?shù)牧舭讜鬼撁嬖馗映霾剩瑫r也給眼睛一個休息的 地方。我通常都在960柵格設(shè)計(jì)用20-35px的留白來襯托設(shè)計(jì)。這個模式給了我一個很好的框架,也讓里面的文字看起來真的很贊。
更大的文字 larger text
設(shè) 計(jì)之前一個主要的步驟是想到不要用那些很久之前用的像素字了,然后說我覺的28號字很好。另外一個用h1這種大字體做標(biāo)題的或者頭部字的優(yōu)點(diǎn)是,將會給你 的站點(diǎn)SEO帶來很好的優(yōu)化效果。 其中一個主要因素是訪問者可以迅速知道你的站點(diǎn)是講什么的。大的字體可以讓訪問者快速的抓住要點(diǎn)。
所以總結(jié)一下:大的字體做為標(biāo)題是很好的,試著給SEO一些更加精簡有效的關(guān)鍵字,但也不要全篇的都是28號字,不然訪客會很不開心的哦。
漸變 Gradients
當(dāng)漸變處理恰當(dāng)?shù)臅r候看上去效果好極了。它們可以增加一個乏味設(shè)計(jì)的深度。就漸變本身而言,它們可以使布局、文本、甚至logo都會變得更加豐富。
集中的布局Centered layout
集中的布局在頁面設(shè)計(jì)中做為一個整體已經(jīng)越來越流行了,不僅在web2.0是這樣的。集中的布局被認(rèn)為是更加直白的,并且這個方式也非常適合標(biāo)榜著前衛(wèi)、幽默的web2.0的調(diào)調(diào)。
更少的分欄 Less columns
使用了大號字體和漂亮的留白之后,你是不是還想用14的列寬?
簡單的設(shè)計(jì)等同于較少的布局。為了布局而對內(nèi)容進(jìn)行排版設(shè)計(jì),在很多設(shè)計(jì)中都能看到使內(nèi)容的風(fēng)格布局不瑣碎的趨勢。
分割頭部 Seprarate top section
分割頭部把一些號召行動和核心區(qū)分開來。如果我是個新訪客,我才不會關(guān)心你們的股票期權(quán),我只想知道你們公司是干啥的,有什么值得我關(guān)心的。分離的頭部就會提供給我一些我想要的基本信息,直到我對這些基本信息滿意,才會想要關(guān)注更詳細(xì)的問題。
簡單的導(dǎo)航 Simple navigation
第一點(diǎn)內(nèi)容就告訴我們一個問題,一個新的訪問者很可能因?yàn)閷?dǎo)航很爛就離開了你的站點(diǎn)。導(dǎo)航應(yīng)當(dāng)在網(wǎng)站中一直堅(jiān)持容易識別的原則,并且要組織得當(dāng)哦。
醒目簡潔的LOGO Bold simple logos
你是誰。這個問題logo就可以回答了。web2.0風(fēng)格使用了大量的醒目簡潔的logo。這里有些關(guān)于簡潔大方的LOGO的最佳案例。
詼諧的標(biāo)題簡介 Witty title intros
準(zhǔn)確的定位并且了解每一位XX個是使你的站點(diǎn)或公司個性化的主要方式,。使用互聯(lián)網(wǎng),你就不需要和人進(jìn)行面對面的進(jìn)行互動。但注意使用幽默的招呼方式會讓你的訪問者感覺訪問你的網(wǎng)站更輕松。
鮮明的色彩 Strong colors
很多web2.0網(wǎng)站經(jīng)常大量的使用中性色,偶爾用一兩種醒目的顏色,F(xiàn)在的這個Blog就是個例子。
豐富的表現(xiàn) Rich surface
當(dāng)設(shè)計(jì)師們瘋狂的尋找最佳的紋理好像木紋、磚塊、布紋等等的時候,紋理素材網(wǎng)站就應(yīng)運(yùn)而生了。
在photoshop里可以往背景和文字上疊加元素,如果他們被恰當(dāng)使用的話,也的確可以給設(shè)計(jì)帶來一些情趣。如果你不是很確定是否過度使用了這個Web2.0的特征(或者其他特征),那就試著把設(shè)計(jì)貼到設(shè)計(jì)論壇里面尋求反饋吧。
反光 Reflection
著名的蘋果水晶按鈕讓一種設(shè)計(jì)風(fēng)格流行起來了。
反光在很多web2.0的設(shè)計(jì)風(fēng)格中逐漸開始有了立足之地。這個設(shè)計(jì)風(fēng)格的關(guān)鍵是注意降低不透明度,這會使整個設(shè)計(jì)看起來效果很好。
閃耀的圖標(biāo) Bling icons
我喜歡好的圖標(biāo),可愛的圖標(biāo)的確能為一個平淡的設(shè)計(jì)帶來層次和亮點(diǎn)。
Everaldo創(chuàng)建了一個自己的水晶圖標(biāo)集,同時也激發(fā)很多有天賦的圖標(biāo)設(shè)計(jì)師的靈感。
web2.0 的徽章 \ 價格標(biāo)簽
web2.0的徽章和最近流行的價格標(biāo)簽可以用來吸引游客的注意力。
大部分的徽章都是反光的(閃閃發(fā)光的),而價格標(biāo)簽卻普遍是灰暗的。
灰色的字 Gray-text
灰色的字是什么?
使用灰色字體可能導(dǎo)致屏幕看起來有些混亂。盡管灰字可以讓它看起來更漂亮,
但是某些設(shè)計(jì)犯了個錯誤,總是把字的顏色弄的很淺,太淺了以至于我們不得不選中文字使其高亮才能閱讀。
這種不友好的設(shè)計(jì)和挫敗感會使訪問者遠(yuǎn)離你的網(wǎng)站,同時也會給打印帶來一些問題(除非你使用獨(dú)立的CSS來控制打。。
注意:如果你的顯示器的亮度下調(diào)10%,你的站點(diǎn)上的字消失了,那你可能就是犯了這個錯誤。
|