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