[原文地址:http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm]
我使用“ Web 2.0設計”來形容目前占主導優(yōu)勢的網(wǎng)頁設計風格, 很多人用這個詞來形容:
- 網(wǎng)絡經(jīng)濟的復蘇
- 網(wǎng)站和用戶之間更高水平的交互
- 或一種社會想象,由新型的網(wǎng)上社區(qū)和社會網(wǎng)絡而形成
Web2.0 式網(wǎng)頁先睹為快
如果您沒有足夠的資源創(chuàng)建自己的2.0式的網(wǎng)站,TemplateMonster 剛發(fā)布的web2.0模版頻道可以幫到你。當然,購買的模版不一定能完美的契合你的目標,但是為用戶定制的設計也常常不能保證。
簡介
我將帶你過一下目前優(yōu)秀的網(wǎng)頁設計特征,仔細分析最突出的特色,講解每個點優(yōu)秀的原因,并向你展示如何將他們使用在你自己的網(wǎng)站上。
如果讓我用一個詞來總結(jié)web2.0,那將是“簡單”,那我們就從這開始說起。
我是簡單的極力支持者,我認為它是網(wǎng)頁設計未來的方向。目前簡單、大膽、優(yōu)雅的網(wǎng)頁設計用少來傳遞更多:
- 通過引導用戶視線只瀏覽少量但精心選擇的視覺元素,使設計師能直接瞄準網(wǎng)站的目標
- 它們用更少的語言來表達更多信息,同時精心選擇的圖片設計去創(chuàng)造看的欲望
- 它們認為,我們能猜測用戶期望從網(wǎng)站得到什么
一、簡單
網(wǎng)頁設計比起以前風格更簡單,這是一件好事。
2.0風格設計代表著聚焦、干凈和簡單,但那并不代表著要極簡主義,我們應該用少量但必需的元素去達到我們的目標; 有個原則是我一直堅持的:假如解決某個問題有兩種方案,那么更簡單的就是更好的。
這里有一些例子,注意他們把不必要的元素都剔除了,也許每個頁面都可以有更多的元素,但是那樣能使頁面變得更強大嗎?
結(jié)果你會感覺不由自主地去看主體內(nèi)容,你發(fā)現(xiàn)自己與頁面的元素互動正是設計師所希望的,而且你并不介意這種簡單,同時又達到了你的目的。
為什么簡單更好
·網(wǎng)站和每個頁面都有目標
·用戶的注意點是有限的資源
·幫助用戶找到他們想要的(或讓用戶注意我們希望他們看的內(nèi)容)是設計師的職責
·屏幕上的元素吸引眼球,元素越多,用戶去關注的各種不同的事情就越多,同時他去關注重要內(nèi)容的幾率就下降了
·所以我們需要很確定的交流方式,也需要把信息噪音減少到最少,那代表著我們要找到一個盡可能少用元素的解決方案,那就是節(jié)約元素即簡單
何時/如何讓你的設計簡單
1、何時 始終如此
2、如何做 有兩個方面能讓你成功做到簡單
1)在不影響效果的情況下,去掉多余的元素
2)能達到同樣效果的可行方案中,選擇更簡單的
看起來達到完美的結(jié)果,不是沒有東西可再添加,而是沒有任何東西可被去除的時候,每當你設計的時候,有意識的把去除多余的視覺元素作為準則。
不要把注意力特別集中在和頁面目標相關性比較小的區(qū)域,因為用戶視線在關注這些時會分散在主要內(nèi)容和導航的注意力。利用視覺細節(jié)如線條、文字、形狀和顏色去傳達信息,而不僅僅是為了裝飾。
這里有個設計的例子,由于不夠簡單而深受其害:
Yaxay 的界面用了很多像素,但是大多數(shù)都是修飾性的,一部分是頁面的背景。相對少的像素被用來讓用戶找到或理解信息或被站點吸引。
想想這個頁面看上去東西可真多啊,但是能使真正的導航、內(nèi)容和交互特征清晰的元素實在太少了。
愛德華?托佛特用“數(shù)據(jù)墨水”(如可以傳遞信息的細節(jié))和“非數(shù)據(jù)墨水”(如只是修飾的細節(jié))來形容這一現(xiàn)象。
托佛特的衡量信息設計(圖形,圖表,演示等)有效性的一種標準是數(shù)據(jù)墨水和非數(shù)據(jù)墨水的使用比例,數(shù)據(jù)墨水使用的比例越高,設計的有效性可能就越高。
以Yaxay第二幅的細節(jié)圖為例,它有太多被稱為“繁忙”的元素,比如大量的邊緣、色調(diào)、顏色變化、形狀、線條……很多要看的元素,但是在這個細節(jié)真正有用的是:
- 網(wǎng)站的logo
- 導航按鈕上的標簽文字:art gallery
剩余的其他“繁忙”元素:背景上的形狀、界面上的斜線、網(wǎng)格、漸變……所有這些噪音都是非數(shù)據(jù)墨水,因為它們都不能傳達信息。
我并不反對網(wǎng)站設計的豐富、復雜或美感性
簡單的意思:無論采用什么方式,只要是為了讓信息傳達更順利的元素是越多越好,當然,通常你要傳達的不是硬數(shù)據(jù),而是軟數(shù)據(jù);
硬數(shù)據(jù):指事實,如新聞、股票價格、列車時間或你銀行賬戶的存款……
軟數(shù)據(jù):涉及信息傳達的質(zhì)量,如公司給人的第一印象,服務提供者是否親切,一種產(chǎn)品是否適合你……這些都是同樣重要的。
無論你要傳達的是硬數(shù)據(jù)還是軟數(shù)據(jù),你都應該有意識并謹慎的使用元素數(shù)量。
以下圖為例:
Alex Dukal的站點很豐富、有趣、吸引人,它用了一系列視覺技巧來引起你注意,讓你感覺有趣,對Alex的工作給你一種溫暖的感覺。但是它也是簡單的,因為它謹慎而敏感的使用像素、墨水或繁忙元素,它并非是沒必要的,而是節(jié)儉而豐富的。
無論怎么說,當你使用墨水、像素時要明智的選擇,用它來傳達首要的信息,同時,問問自己用少量的元素能否有效的傳達信息,如果可以,就這樣做。[未完待續(xù)……]
第一次翻譯專業(yè)性文章,有不得到之處歡迎指正:)