看到這張照片，我們一眼能夠看到天宏（圖中這位UED俊男）的眼睛。我們能從他的表情里讀出一些他的性格。一張好的攝影作品，最重要的一點(diǎn)，就是這個(gè)照片是否有焦點(diǎn)，照片的主題是否一目了然。而攝影作品的用光、構(gòu)圖、景深等等手法，其實(shí)就是在讓一個(gè)照片能夠有其焦點(diǎn)，并且利用這些藝術(shù)手法來烘托氣氛，提升主題。 一個(gè)優(yōu)秀的頁面亦如此：應(yīng)當(dāng)突出重點(diǎn)，一目了然。相信大家也知道，一個(gè)用戶在瀏覽網(wǎng)頁的過程中，只是掃描頁面，而不會(huì)像是在看書似的閱讀每一處地方，每一行文字。一個(gè)網(wǎng)頁呈現(xiàn)在用戶面前的時(shí)候，應(yīng)該在5秒之內(nèi)，就能理解：這個(gè)頁面是干什么的？我大致能通過這個(gè)頁面做些什么？接下來我該去哪里？ 我們網(wǎng)站上的每個(gè)頁面都可以是任務(wù)流上的一個(gè)點(diǎn)。這個(gè)點(diǎn)上包含著用戶需要的信息，也許是繼續(xù)找到任務(wù)流的下一個(gè)點(diǎn)的信息（例如導(dǎo)航），也許是用戶想找到的最終內(nèi)容。而一個(gè)頁面上存在著上百甚至上千個(gè)鏈接（淘寶的寶貝詳情頁面通常有700多個(gè)鏈接），要在這樣茫茫大海中找到用戶需要的鏈接，可見，“突出重點(diǎn)，一目了然”是多么重要。

測(cè)試您的頁面

測(cè)試您的頁面是否達(dá)到“突出重點(diǎn)，一目了然”，能夠讓用戶在短時(shí)間內(nèi)找到他們所需要的信息，其實(shí)可以是個(gè)低成本的小型測(cè)試。fivesecondtest.com 這個(gè)有趣網(wǎng)站是一個(gè)專門做5秒測(cè)試的站點(diǎn)。測(cè)試者上傳一張站點(diǎn)的截圖，然后被試觀看截圖5秒，然后說出剛才看到了哪些東西。另外一種方式是被試看到截圖，在5秒的時(shí)間中，點(diǎn)擊他所關(guān)注到的所有焦點(diǎn)，最后給出每個(gè)焦點(diǎn)他認(rèn)為的描述。

下圖是本文開篇的時(shí)候，8個(gè)用戶的測(cè)試結(jié)果：

這種測(cè)試比起眼動(dòng)議來說，測(cè)試的成本要低得多，而且能夠明確得測(cè)試出你的頁面的瀏覽者是否能在第一時(shí)間發(fā)現(xiàn)他們所需要的內(nèi)容，并且可以比較出，這是否符合你的設(shè)計(jì)的初衷。

達(dá)到“突出重點(diǎn)，一目了然”

那么，如何達(dá)到這樣的“突出重點(diǎn)，一目了然”呢？據(jù)鄙人不完全歸納，可以有以下方法：

為掃描而設(shè)計(jì)，不是閱讀

你幾乎需要把每個(gè)用戶都想象成大忙人——他們沒有時(shí)間停留在你精心設(shè)計(jì)的頁面上，去閱讀每一行你辛苦撰寫的問題，去欣賞你精心設(shè)計(jì)的高光與圓角——他們想要的只是盡快地找到有用的信息。如果找不到，互聯(lián)網(wǎng)上也許有很多替代品，可能是你的競(jìng)爭(zhēng)對(duì)手，用戶可以輕而易舉地到其他網(wǎng)站上去尋找他們需要的信息�！饵c(diǎn)石成金》這本書也比較詳盡地描述了這個(gè)要點(diǎn)。相信大家都應(yīng)該閱讀過了�！饵c(diǎn)石成金》里談到關(guān)于“為掃描而設(shè)計(jì)，不是閱讀”時(shí)，

給出了幾種方法：

盡量符合用戶習(xí)慣的設(shè)計(jì)，讓人接受陌生的東西需要代價(jià)，除非我們覺得這個(gè)代價(jià)是必須的。

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

可以點(diǎn)擊的地方必須突出，讓人明顯知道可以點(diǎn)擊。

把頁面劃分成明確定義的區(qū)域

省略多余的文字

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

兩次改版后：

我們可以發(fā)現(xiàn)，改版后的頁面視覺層次得到了很大的提升。白色內(nèi)容區(qū)域、淺藍(lán)色右邊欄和深藍(lán)色的注冊(cè)區(qū)域漸漸遞進(jìn)，深藍(lán)色背景上的強(qiáng)烈反差的黃色按鈕“Sign Up”，引導(dǎo)著這個(gè)頁面的主要目的，亦是重點(diǎn)。另外，大家可以發(fā)現(xiàn)，內(nèi)容文字部分比先前的老版本少了一半一半再一半再一半。。。相應(yīng)的，使用列點(diǎn)和大圖的方式傳遞了相同的信息。“Sign Up”顯而易見，而且視覺上有突起的漸變效果也馬上讓人知道，那是個(gè)按鈕。

標(biāo)簽： 設(shè)計(jì)探討 交互設(shè)計(jì)實(shí)用指南 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。