巧用“核心數(shù)據(jù)像素”打造出彩的網(wǎng)頁設(shè)計

數(shù)據(jù)印記是不可或缺的圖像的核心，數(shù)據(jù)變化和趨勢通過不重復(fù)的印記的排列展現(xiàn)出來。在網(wǎng)頁設(shè)計上，我們可以把數(shù)據(jù)像素認(rèn)為是引導(dǎo)用戶瀏覽的最簡單的單位。這些像素構(gòu)成了屏幕的‘專注模式’，引導(dǎo)用戶的網(wǎng)頁導(dǎo)航。

Edward Tufte 和他的數(shù)據(jù)-印記理論

　　作者一直對Edward Tufte 的視覺化數(shù)據(jù)理論很感興趣。其中《The Visual Display of Quantitative Information / 量化信息的視覺呈現(xiàn)》是作者最喜歡的書籍之一，他從中找到了網(wǎng)頁設(shè)計可以借鑒的理論。

舉一個簡單的實例：在一個款項支付界面上，核心數(shù)據(jù)像素是：

　　1.信用卡號輸入框

　　2.文字標(biāo)識

　　3.支付發(fā)送按鍵

　　僅此而已。網(wǎng)頁當(dāng)然還是需要臺頭，支付內(nèi)容，支付提示，信用協(xié)議等等，但是核心數(shù)據(jù)是以上3個。

　　從‘核心數(shù)據(jù)’出發(fā)，你可以添加其他內(nèi)容。這個就是Tufte的理論。為了確保核心數(shù)據(jù)像素的主導(dǎo)和突出，以及網(wǎng)頁的美觀，作者認(rèn)為重新設(shè)計網(wǎng)頁的任務(wù)可以具化到找到適當(dāng)?shù)?ldquo;核心數(shù)據(jù)像素率”。

準(zhǔn)則1：首先設(shè)計數(shù)據(jù)像素

　　更新一個網(wǎng)頁， 指導(dǎo)理論是 每一個頁面都應(yīng)該專注在核心數(shù)據(jù)和由這些核心數(shù)據(jù)指引的你需要用戶去做的事情. 其他的數(shù)據(jù)像素都是噪音，只有在核心數(shù)據(jù)像素設(shè)計好之后才需要考慮。這個概念在Craig Mod的文章“我們未來書籍的形象”一文中提到：他描寫了kindle從睡眠狀態(tài)中醒來的設(shè)計(和iPad比較)更加像本實體書。讓人有安全感，是一種“無聲的信用保證”：

　　這種“無聲的信用保證”可以應(yīng)用在數(shù)據(jù)上。具體來說，在設(shè)計用戶體驗的時候，我們展現(xiàn)數(shù)據(jù)的方式應(yīng)該讓用戶感覺不到他們在刻意地讀取或者使用數(shù)據(jù)。

　　這個不是在暗示一種乏味的設(shè)計或者說唯美主義不重要。這個意味者我們需要考慮到任何附加在核心像素上的設(shè)計都是服務(wù)核心功能的，而不能把用戶的注意力吸引到這些輔助設(shè)計上。

準(zhǔn)則2：合理縮減非核心數(shù)據(jù)像素

　　在核心像素的基礎(chǔ)上，添加輔助像素;如何找到合理的核心像素率?

　　第一步，是刪除非核心像素 - 非核心像素，就是頁面元素中不服務(wù)于網(wǎng)頁主要功能的設(shè)計部分。這些像素不能引導(dǎo)用戶去使用網(wǎng)頁的主要功能, 具體來說是：

　　色彩：不支持視覺傳承的色彩對比

　　字體：特殊的字體設(shè)計，會分散用戶注意力。

　　分段圖像：避免使用過渡圖像，盡量用空白自然地隔開段落和功能區(qū)間。

　　頁面排版：段落對齊，字體大小 和 顏色反差：避免不必要的刻意設(shè)計。 (例如，端落縮進(jìn)，較大的圖標(biāo)或者顯目的顏色都會分散用戶的注意力)

　　如果訪問doHome的頁面，這種分散注意力的設(shè)計的壞處非常凸顯. 導(dǎo)航目錄上的反光設(shè)計, 沒有明確目的的影像, 導(dǎo)致的結(jié)果是沒有足夠的內(nèi)容讓人一目了然它是做什么的。

與之相反，MailChimp 的核心數(shù)據(jù)像素率把握的很好. 言簡意賅介紹網(wǎng)頁的功能; 大塊的輸入框和明確的指示文字標(biāo)識保證用戶能夠很快地填寫完注冊頁面; 準(zhǔn)確的文字提示告訴你注冊的具體內(nèi)容; 然后注冊按鍵顯目：大，顏色鮮明對比。

極端的例子像Squarespace’s：注冊頁面上把可能分散注意力的像素全部去除，保證了零幾率注意力分散，注冊成功率大大上升. 在登錄頁面，用戶一旦點(diǎn)擊“注冊”，背景圖案完全消失，如圖所示：零分散

Google+也是一個“非核心像素最小化”設(shè)計的典型例子. 就像 Oliver Reichenstein說的 :

　　設(shè)計一個簡練的用戶界面非常的困難：干凈，沒有多余的線條，框架和裝飾。內(nèi)容的傳承明確，用色準(zhǔn)確，一致。

　　這里列舉了些許網(wǎng)站是為了具體介紹這個抽象概念的落實：必須準(zhǔn)確地分析視覺元素。把分散注意力的像素去除。

　　準(zhǔn)則3：合理縮減重復(fù)數(shù)據(jù)像素

　　“重復(fù)數(shù)據(jù)像素”是指被毫無理由和目的地反復(fù)重復(fù)的視覺元素.

　　如圖所示，下表是小時收費(fèi)的停車場價目表。好的設(shè)計應(yīng)該是一行字“10元/小時”。網(wǎng)頁設(shè)計要能夠概括網(wǎng)頁內(nèi)容并把它們簡練、美觀地呈現(xiàn)。

　　如何鑒別必要的重復(fù)?回到我們之前的支付頁面實例，如果頁面過長 (需要滾動操作)，那設(shè)計上必須要有兩個“支付”按鍵。一個在最上面，另外一個在最下面，這樣可以提高用戶的效率，避免了不必要的滾動操作?？偨Y(jié)來說，重復(fù)信息可以使用在強(qiáng)調(diào)品牌承諾和提高用戶效率上，僅此而已。

　　準(zhǔn)則4：合理最大化數(shù)據(jù)像素率

　　每個像素都要有存在的理由，而這個理由就是它包含新的信息

　　– Edward Tufte, The Visual Display of Quantitative Information / 量化信息的視覺呈現(xiàn)

　　當(dāng)設(shè)計已經(jīng)消除了噪音像素和重復(fù)像素，接下去就是要分析是不是遺漏了核心像素。

　　在設(shè)計上添加像素 必須需要理由, 通常是能提高用戶使用效率的必要的信息和功能. 例如:

　　提示用戶所在頁面的視覺元素：前進(jìn)/后退多次之后，用戶還可以輕松地找到信息.

　　唯美設(shè)計：色彩，字體和頁面排版 - 保證品牌認(rèn)可和網(wǎng)頁展示之間的一致性。

　　適當(dāng)提示: 指引用戶使用頁面功能。

　　一個比較好的實例就是字里行間的錯誤提示。我們來看一下 Quora 的注冊頁面：頁面設(shè)計簡單，沒有分散注意力的像素. 當(dāng)你輸入名字的時候，錯誤信息提示“需要輸入全名”。換句話講，本來可以作為提示文字的“請輸入全名”，現(xiàn)在只有在輸入錯誤時顯示，精簡了頁面設(shè)計，又提高了使用效率。并且這種實時檢測用戶名，也提高了后臺的工作效率。

　　以下是對于一個頁面通過“數(shù)據(jù)像素”鑒定后的前后設(shè)計比較(我們來看一下kalahari.com )

　　首先找出頁面上的非核心像素: 左下方過大的彎度, 導(dǎo)航目錄底色過于明亮，分散了注意力, 等等.

　　然后，作者使用了這里介紹的“核心數(shù)據(jù)像素”最大化方法，把吸引力放在了核心功能：搜索。下圖是結(jié)果：

　　準(zhǔn)則5：編輯和修訂

　　最后，設(shè)計師們需要再根據(jù)以上4個步驟對自己的最終設(shè)計產(chǎn)品進(jìn)行修訂。用戶界面設(shè)計可以說是一個不斷進(jìn)步的過程，希望通過每一次修訂的積累最終能夠推出一款完美的產(chǎn)品。