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

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

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

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

舉一個(gè)簡(jiǎn)單的實(shí)例：在一個(gè)款項(xiàng)支付界面上，核心數(shù)據(jù)像素是：

　　1.信用卡號(hào)輸入框

　　2.文字標(biāo)識(shí)

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

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

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

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

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

　　這種“無(wú)聲的信用保證”可以應(yīng)用在數(shù)據(jù)上。具體來說，在設(shè)計(jì)用戶體驗(yàn)的時(shí)候，我們展現(xiàn)數(shù)據(jù)的方式應(yīng)該讓用戶感覺不到他們?cè)诳桃獾刈x取或者使用數(shù)據(jù)。

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

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

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

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

　　色彩：不支持視覺傳承的色彩對(duì)比

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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