您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

巧用“核心數(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)的工作效率。

  

Quora Registration

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

  

Kalahari old header

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

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

  

Kalahari new header

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

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




 

[教程作者:阿圖]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di934.html
網(wǎng)頁(yè)設(shè)計(jì)中留白的藝術(shù)
關(guān)于網(wǎng)頁(yè)設(shè)計(jì)師,你該知道的那些事兒
圖趣網(wǎng)微信
建議反饋
×