互動設計案例:突出重點一目瞭然,簡單而不簡陋

來源:互聯網
上載者:User

文章描述:互動設計案例:突出重點一目瞭然,簡單而不簡陋.

看到這張照片,我們一眼能夠看到天宏(圖中這位UED俊男)的眼睛。我們能從他的表情裡讀出一些他的性格。一張好的攝影作品,最重要的一點,就是這個照片是否有焦點,照片的主題是否一目瞭然。而攝影作品的用光、構圖、景深等等手法,其實就是在讓一個照片能夠有其焦點,並且利用這些藝術手法來烘托氣氛,提升主題。 一個優秀的頁面亦如此:應當突出重點,一目瞭然。相信大家也知道,一個使用者在瀏覽網頁的過程中,只是掃描頁面,而不會像是在看書似的閱讀每一處地方,每一行文字。一個網頁呈現在使用者面前的時候,應該在5秒之內,就能理解:這個頁面是幹什麼的?我大致能通過這個頁面做些什嗎?接下來我該去哪裡? 我們網站上的每個頁面都可以是任務流上的一個點。這個點上包含著使用者需要的資訊,也許是繼續找到任務流的下一個點的資訊(例如導航),也許是使用者想找到的最終內容。而一個頁面上存在著上百甚至上千個連結(淘寶的寶貝詳情頁面通常有700多個連結),要在這樣茫茫大海中找到使用者需要的連結,可見,“突出重點,一目瞭然”是多麼重要。

測試您的頁面

測試您的頁面是否達到“突出重點,一目瞭然”,能夠讓使用者在短時間內找到他們所需要的資訊,其實可以是個低成本的小型測試。fivesecondtest.com 這個有趣網站是一個專門做5秒測試的網站。測試者上傳一張網站的截圖,然後被試觀看截圖5秒,然後說出剛才看到了哪些東西。另外一種方式是被試看到截圖,在5秒的時間中,點擊他所關注到的所有焦點,最後給出每個焦點他認為的描述。

下圖是本文開篇的時候,8個使用者的測試結果:

這種測試比起眼動議來說,測試的成本要低得多,而且能夠明確得測試出你的頁面的瀏覽者是否能在第一時間發現他們所需要的內容,並且可以比較出,這是否符合你的設計的初衷。

達到“突出重點,一目瞭然”

那麼,如何達到這樣的“突出重點,一目瞭然”呢?據鄙人不完全歸納,可以有以下方法:

為掃描而設計,不是閱讀

你幾乎需要把每個使用者都想象成大忙人——他們沒有時間停留在你精心設計的頁面上,去閱讀每一行你辛苦撰寫的問題,去欣賞你精心設計的高光與圓角——他們想要的只是儘快地找到有用的資訊。如果找不到,互連網上也許有很多替代品,可能是你的競爭者,使用者可以輕而易舉地到其他網站上去尋找他們需要的資訊。《點石成金》這本書也比較詳盡地描述了這個要點。相信大家都應該閱讀過了。《點石成金》裡談到關於“為掃描而設計,不是閱讀”時,

給出了幾種方法:

盡量符合使用者習慣的設計,讓人接受陌生的東西需要代價,除非我們覺得這個代價是必須的。

在頁面把越重要的東西越突出,建立清楚的視覺層次。

可以點擊的地方必須突出,讓人明顯知道可以點擊。

把頁面劃分成明確定義的地區

省略多餘的文字

Yahoo Small Bussiness的頁面改版很具有代表性。 改版前:

兩次改版後:

我們可以發現,改版後的頁面視覺層次得到了很大的提升。白色內容地區、淺藍色右側邊欄和深藍色的註冊地區漸漸遞進,深藍色背景上的強烈反差的黃色按鈕“Sign Up”,引導著這個頁面的主要目的,亦是重點。另外,大家可以發現,內容文字部分比先前的老版本少了一半一半再一半再一半。。。相應的,使用列點和大圖的方式傳遞了相同的資訊。“Sign Up”顯而易見,而且視覺上有突起的漸層效果也馬上讓人知道,那是個按鈕。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。