欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

[p]簡介[/p]
[p]本文從一個網頁設計師的角度介紹了良好的網頁設計必須遵從的幾個原則。里面列舉了許多生動的實例。[/p]
[p]我最喜歡的[i]設計[/i]書籍之一就是《robin williams design workshop》.它深入實際的[i]設計[/i]理論，并且包含許多極棒的設計實例。其中一個值得關注的地方就是4項主要的[i]設計[/i][i]原則[/i]，它們已經在設計中為我所用。這4項[i]原則[/i]就是：反差, 重復, 排列, 和分類。[/p]
[p]本文將討論這4項與web[i]設計[/i]相關的[i]原則[/i]。只要在腦海中牢牢記住了這4項[i]原則[/i]，你就一定可以設計出更加整潔漂亮的網頁。[/p]
[p] [/p]
[p][b]1.[/b][b]反差效果[/b][/p]
[p] [/p]
[p]好的反差效果[i]設計[/i]可以給用戶一個極好的第一印象。如果用戶的眼睛沒有焦點，注意力就會在處處是相同尺寸的元素和排版界面中迷失。設計師需要設計出很明顯的突出視覺元素來引導用戶的體驗。你可以通過選擇圖片、顏色和字體等來形成良好的反差效果。[/p]
[p] [/p]
[p][b]圖片反差[/b][/p]
[p] [/p]
[p]當需要在很多小元素后面展示一個大尺寸的插圖時，這種方法很有效。嗯，我的意思就是，比如：[/p]
[p] [/p]
[b]the invoice machine[/b]
[p] [/p]
[p]這個網頁利用一張大圖片來吸引用戶的注意。而同時網頁很自然的單色又讓很少的藍色應用有了更好的效果。[/p]
[p] [img]http://72color.com/upload/200904281008326716.png[/img][/p]
[p][b][color=rgb(102,102,153)]instabox[/color][/b][/p]
[p] [img]http://72color.com/upload/200904281008376121.png[/img][/p]
[p]當你眼睛看到這個頁面的時候，首先你會注意到什么？最有可能的就是盒子上面的那個星星了。跟 the invoice machine 一樣，它們都是通過用一張大圖片和很少的顏色來制造一個視覺焦點。[/p]
[p] [/p]
[p][b]顏色反差[/b][/p]
[p] [/p]
[p]恰到好處地使用少量顏色，是網頁中另一種制造視覺反差的有效方法。可以在網頁的頭部和文本拷貝中使用不同的顏色，也可以在一張圖片或插圖的顏色里面應用。[/p]
[p] [/p]
[p][color=rgb(102,102,153)]fatburgr[/color][/p]
[p] [img]http://72color.com/upload/200904281008418410.png[/img][/p]
這個網站是極出色的一個所有[i]設計[/i][i]原則[/i]的應用實例。關于顏色反差我們來看看它大大的黃色頭部和小小的淡灰文字。排列、圖片反差、重復和分類這幾個[i]原則[/i]做得都很徹底。
[p] [/p]
[p][color=rgb(102,102,153)]i love typography[/color][/p]
[p] [img]http://72color.com/upload/200904281008493256.png[/img][/p]
[p]一個用來展示排版的網站如果在它自己的頁首就為我們展示了一個極好的排版效果，那讓人覺得多驚奇啊！我喜歡他們所用的字體，也喜歡他們良好的青色和深灰色搭配。[/p]
[p] [/p]
[p][b]字體反差[/b][/p]
[p] [/p]
[p]如果你想通過字體來產生反差效果，就應該避免使用2個很相像的字體外觀和大小。很相像的字體會造成混淆，并讓[i]設計[/i]變得模糊。不過把字體大小弄得很不一樣就會非常有效果，或者是把字體最細和最粗的版本拼合到一起也同樣有效。同樣的，如果你將兩種外形差別明顯的兩種字體排在一塊，就會對它們帶來的視覺沖擊效果感到驚奇。把一個 san serif 字體和一個手寫字體放在一起就是一個例子。[/p]
[p] [/p]
[p][color=rgb(102,102,153)]fixie consulting[/color][/p]
[p] [img]http://72color.com/upload/200904281008512054.png[/img][/p]
[p]哇噻，我真的非常喜歡這個網站上使用的排版和顏色。注意看他們標語的大小和筆畫。頁面上灑水效果和少量藍色的使用，都讓我非常欣賞。[/p]
[p] [/p]
[p][b]2.[/b][b]重復[i]原則[/i][/b][/p]
[p] [/p]
[p]跟web[i]設計[/i]相比，重復[i]原則[/i]在書本設計中應用得更加普遍，不過它在兩者之間都是一樣有效的。重復的設計元素可以使頁面顯得很連貫，還能提升品牌。在web[i]設計[/i]中，可以很好地達到這個目的的一個方式是在網頁的頭部和腳部重復放元素。看看下面這些例子吧。[/p]
[p] [/p]
[p][color=rgb(102,102,153)]ten24 media[/color][/p]
[p] [img]http://72color.com/upload/200904281009035055.png[/img][/p]
[p]ten24 media 在頭部和腳部都使用了很有創意的插畫。[/p]
[p] [/p]
[p][color=rgb(102,102,153)]silverback[/color][/p]
[p] [img]http://72color.com/upload/200904281009142704.png[/img][/p]
[p]這個網站絕對是超贊的！我絕對可以在前面“反差[i]原則[/i]”部分就可以把它作為一個好例子亮出來的，可它在“重復原則”部分也是一個好例子，因為它的界面風格和品牌部分都很明顯地應用了這個原則。仔細看它用香蕉來當做列表前面的圖標，還有頭部、腳部的森林插畫。[/p]
[p] [/p]
[p][b]3.[/b][b]排列[i]原則[/i][/b][/p]
[p] [/p]
你的網站外觀[i]設計[/i]得很業余還是很專業，排列[i]原則[/i]在其中扮演了一個很復雜的角色。最近我很主張在設計網頁時使用格欄。這么做可以讓你的設計很干凈，也可以提供一個很好的設計框架。如果你有興趣想學習更多關于格欄設計的知識，去看看我最近的文章吧（在這王婆賣瓜，自賣自夸一下），
這個網站在
[p]a list apart中使用的可視格欄非常有特色。里面的欄目[i]設計[/i]良好，把所有包含內容都變得易于閱讀。研究表明過寬的欄目會造成嚴重的閱讀困難。在跟隨那么寬的欄目中的文字時，你的眼睛會變得很累。 a list apart[/p]
[p] [/p]
[p][b]4.[/b][b]分類[i]原則[/i][/b][/p]
[p] [/p]
最后一個[i]原則[/i]是分類。只有在將相關元素分組，將無關元素分開的時候才會用到這個[i]原則[/i]。假如你將所有東西都分到同一塊文本塊中，絕對會摧毀用戶的體驗。這就是為什么使用頭部標簽和適當的留空是那么的重要。
[p] [/p]
[p][color=rgb(102,102,153)]envato[/color][/p]
[p] [img]http://72color.com/upload/200904281009302066.png[/img][/p]
[p]這個網站漂亮地將內容規整地組織到三個主要分類下，這些內容的定義既清晰又規整。[/p]
[p] [/p]
[color=rgb(102,102,153)]paradigm reborn[/color]
[p] [img]http://72color.com/upload/200904281009405117.png[/img][/p]
[p]這個網站結構良好。頭部既整潔又簡單明了。空白留的很好，內容分開放得很有邏輯。[/p]
[p] [/p]
[p][b]最終思想[/b][/p]
[p] [/p]
[p]當你腦中時刻惦記著這4個基本[i]原則[/i]時，你會發現你的設計有了不可思議的改進。當然肯定還有許許多多別的東西也需要考慮，但是以反差、重復、排列和分類作為基礎你的設計會取得長足進步。[/p]
[p] [/p]
[p]本文轉自:[url=http://yeeyan.com/articles/view/75357/38221]http://yeeyan.com/articles/view/75357/38221[/url][/p]