4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則_第1頁(yè)
4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則_第2頁(yè)
4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則_第3頁(yè)
4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則_第4頁(yè)
4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則_第5頁(yè)
已閱讀5頁(yè),還剩2頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則Robin Williams Design Workshop是絕對(duì)是我最喜歡的一本設(shè)計(jì)書(shū)之一。它的設(shè)計(jì)理論更具有實(shí)踐價(jià)值,展示的例子也都很棒。最重要的被崇尚為我的設(shè)計(jì)理念的總管包含有四條,他們是:反差、重復(fù)、排列和分類。本文將討論這4個(gè)優(yōu)秀的網(wǎng)站設(shè)計(jì)原則。只要在腦海中牢牢記住了這4項(xiàng)原則,你就一定可以設(shè)計(jì)出更加整潔漂亮的網(wǎng)頁(yè)。 1.反差效果 好的反差效果設(shè)計(jì)可以給用戶一個(gè)極好的第一印象。如果用戶的眼睛沒(méi)有焦點(diǎn),注意力就會(huì)在處處是相同尺寸的元素和排版界面中迷失。設(shè)計(jì)師需要設(shè)計(jì)出很明顯 的突出視覺(jué)元素來(lái)引導(dǎo)用戶的體驗(yàn)。你可以通過(guò)選擇圖片、顏色和字體等來(lái)形成良好的反差效果。 圖

2、片反差 當(dāng)需要在很多小元素后面展示一個(gè)大尺寸的插圖時(shí),這 種方法很有效。比如: The Invoice Machine 這個(gè)網(wǎng)頁(yè)利用一張大圖片來(lái)吸引用戶的注意。而同時(shí)網(wǎng)頁(yè) 很自然的單色又讓很少的藍(lán)色應(yīng)用有了更好的效果。 Instabox 當(dāng)你眼睛看到這個(gè)頁(yè)面的時(shí)候,首先你會(huì)注意到什么?最 有可能的就是盒子上面的那個(gè)星星了。跟 The Invoice Machine 一樣,它們都是通過(guò)用一張大圖片和很少的顏色來(lái)制造一個(gè)視覺(jué)焦點(diǎn)。 顏色反差 恰到好處地使用少量顏色,是網(wǎng)頁(yè)中另一種制造視覺(jué)反差的有效方法??梢栽诰W(wǎng)頁(yè)的頭部和文本拷貝中使用不同的顏色,也可以在一張圖片或插圖的顏色里面應(yīng)用。 Fatbur

3、gr 這個(gè)網(wǎng)站是極出色的一個(gè)所有設(shè)計(jì)原則的應(yīng)用實(shí)例。關(guān)于 顏色反差我們來(lái)看看它大大的黃色頭部和小小的淡灰文字。排列、圖片反差、重復(fù)和分類這幾個(gè)原則做得都很徹底。 I Love Typography 一個(gè)用來(lái)展示排版的網(wǎng)站如果在它自己的頁(yè)首就為我們展 示了一個(gè)極好的排版效果,那讓人覺(jué)得多驚奇! 字體反差 如果你想通過(guò)字體來(lái)產(chǎn)生反差效果,就應(yīng)該避免使用2個(gè)很相像的字體外觀和大小。很相像的字體會(huì) 造成混淆,并讓設(shè)計(jì)變得模糊。不過(guò)把字體大小弄得很不一樣就會(huì)非常有效果,或者是把字體最細(xì)和最粗的版本拼合到一起也同樣有效。同樣的,如果你將兩種外形 差別明顯的兩種字體排在一塊,就會(huì)對(duì)它們帶來(lái)的視覺(jué)沖擊效果感到

4、驚奇。把一個(gè) san serif 字體和一個(gè)手寫(xiě)字體放在一起就是一個(gè)例子。 Fixie Consulting 這個(gè)網(wǎng)站上使用的排版和顏色,都非常的出色,尤其是他 們標(biāo)語(yǔ)的大小和筆畫(huà),頁(yè)面上灑水效果和少量藍(lán)色的使用,都非常不錯(cuò)。 2.重復(fù)原則 跟web設(shè)計(jì)相比,重復(fù)原則在書(shū)本設(shè)計(jì)中應(yīng)用得更加普遍,不過(guò)它在兩者之間都是一樣有效的。重復(fù)的設(shè)計(jì)元素可以使頁(yè)面顯得很連貫,還能提升品牌。在 web設(shè)計(jì)中,可以很好地達(dá)到這個(gè)目的的一個(gè)方式是在網(wǎng)頁(yè)的頭部和腳部重復(fù)放元素??纯聪旅孢@些例子吧。 Ten24 Media Ten24 Media 在頭部和腳部都使用了很有創(chuàng)意的插畫(huà)。 Silverback 這個(gè)網(wǎng)站絕

5、對(duì)是超贊的!絕對(duì)可以在前面“反差原則”部分就可以把它作為一個(gè)好例 子亮出來(lái)的,可它在“重復(fù)原則”部分也是一個(gè)好例子,因?yàn)樗慕缑骘L(fēng)格和品牌部分都很明顯地應(yīng)用了這個(gè)原則。仔細(xì)看它用香蕉來(lái)當(dāng)做列表前面的圖標(biāo),還有頭 部、腳部的森林插畫(huà)。 3.排列原則 你的網(wǎng)站外觀設(shè)計(jì)得很業(yè)余還是很專業(yè),排 列原則在其中扮演了一個(gè)很復(fù)雜的角色。最近我很主張?jiān)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)使用格欄。這么做可以讓你的設(shè)計(jì)很干凈,也可以提供一個(gè)很好的設(shè)計(jì)框架。 Black Estate Vineyard 這個(gè)網(wǎng)站在960 Grid website上有展示。它的版面排列很連貫也很引人注目。我很欣賞它將主要內(nèi)容整齊地排在左邊的做法,盡管有些大級(jí)

6、別的頭部破壞了這個(gè)規(guī)則并排到了左側(cè) 邊欄里面。對(duì)留空的大量使用和字體反差大小的使用都非常不錯(cuò)。 A List Apart A List Apart 中使用的可視格欄非常有特色。里面的欄目設(shè)計(jì)良好,把所有包含內(nèi)容都變得易于閱讀。研究表明過(guò)寬的欄目會(huì)造成嚴(yán)重的閱讀困難。在跟隨那么寬的欄目中的文字 時(shí),你的眼睛會(huì)變得很累。 4.分類原則 最后一個(gè)原則是分類。只有在將相關(guān)元 素分組,將無(wú)關(guān)元素分開(kāi)的時(shí)候才會(huì)用到這個(gè)原則。假如你將所有東西都分到同一塊文本塊中,絕對(duì)會(huì)摧毀用戶的體驗(yàn)。這就是為什么使用頭部標(biāo)簽和適當(dāng)?shù)牧艨帐?那么的重要。 Envato 這個(gè)網(wǎng)站漂亮地將內(nèi)容規(guī)整地組織到三個(gè)主要分類下,這些內(nèi)容的定義既清晰又規(guī) 整。 Paradigm Reborn 這個(gè)網(wǎng)站結(jié)構(gòu)良好。頭部既整潔又簡(jiǎn)單明了??瞻琢舻暮芎?,內(nèi)容分開(kāi)放得很有邏 輯。 最終思想 當(dāng)你腦

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論