2015-7-8 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( www.88yangsc.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中,請(qǐng)點(diǎn)這里
1. 用戶不同,數(shù)據(jù)不同
任何時(shí)候設(shè)計(jì)一套復(fù)雜的系統(tǒng),都不可避免要為很多用戶和角色進(jìn)行設(shè)計(jì)。總裁、經(jīng)理和分析師是幾個(gè)常見(jiàn)角色,每個(gè)都有自己的工作流程和對(duì)數(shù)據(jù)的需求。
定義好角色,產(chǎn)生不同視角,這本身就是一種藝術(shù)。我就不在此詳細(xì)解釋了。如果你對(duì)此有興趣,請(qǐng)看Cooper的這篇有用的文章。
關(guān)于角色,重要的一點(diǎn)是預(yù)先確定好,圍繞它們來(lái)組織信息結(jié)構(gòu)與線框圖。
下面是我們?nèi)ツ曜龅囊豢罱】祱?bào)告應(yīng)用的最終成品。這套系統(tǒng)有著不同的用戶群,他們各自都需要不同的數(shù)據(jù)管理。創(chuàng)建了關(guān)鍵角色后,我們每次評(píng)審會(huì)將它們放在旁邊。
注意畫(huà)板上的那些角色。我們的客戶都接受這種方式。
在滿屋子客戶面前展示作品是件難事。無(wú)論是在解釋線框圖、流程圖,還是就視覺(jué)設(shè)計(jì)進(jìn)行討論,都很難讓每個(gè)人跟上你的觀點(diǎn)。
通過(guò)角色來(lái)組織作品,會(huì)防止你(和客戶)在這些討論中跑題。
我多年所用的一個(gè)技巧,是制作頁(yè)面模型。核心點(diǎn)很簡(jiǎn)單:
首先為用戶呈現(xiàn)他們需要的,再將頁(yè)面余下的信息根據(jù)用戶故事或信息層級(jí),進(jìn)行結(jié)構(gòu)化處理。
制作頁(yè)面模型的概念,正是寫(xiě)散文(和其他很多種溝通形式)的核心原則,我在寫(xiě)過(guò)一本書(shū)之后就對(duì)它了如指掌了。多年來(lái),我花費(fèi)大量時(shí)間在這本書(shū)《樣式:清晰與優(yōu)雅的基本要素》上。它除了作為絕佳的寫(xiě)作參考之外,還清晰闡明這項(xiàng)觀點(diǎn):
如果一開(kāi)始就使人分心,那么用戶不僅難以分辨每個(gè)元素是什么,也難以集中精力于整個(gè)流程。
這是進(jìn)行用戶體驗(yàn)設(shè)計(jì)時(shí)需要牢記的一項(xiàng)準(zhǔn)則。下面是制作頁(yè)面模型的兩個(gè)常用方式。
給畫(huà)板創(chuàng)建某種結(jié)構(gòu)。問(wèn)問(wèn)自己——通過(guò)這些信息要講述怎樣的故事?
我在behance和dribbble上看到很多儀表板和數(shù)據(jù)畫(huà)報(bào)項(xiàng)目,(視覺(jué)上)設(shè)計(jì)得很漂亮,但通常都使人眼花繚亂、過(guò)目即忘。它們要么是各種圖表組件以缺乏層級(jí)的瀑布流形式排列,要么視覺(jué)上過(guò)度設(shè)計(jì),并不適合這項(xiàng)數(shù)據(jù)。
左圖展示的就是眼花繚亂的數(shù)據(jù)畫(huà)報(bào)。右圖例子則是裝飾物分散注意力,注意不到數(shù)據(jù)。
在上面的圖中(左圖),這個(gè)數(shù)據(jù)面板用了控制臺(tái)的方式來(lái)呈現(xiàn)信息……相當(dāng)有壓迫感。為避免如此,我們?cè)囍?strong>組織信息的方式處理這類界面,讓人們感覺(jué)像是在閱讀雜志文章。
并不是說(shuō)控制臺(tái)式的界面就沒(méi)有用武之地……我個(gè)人愿意設(shè)計(jì)成那樣。但多數(shù)情況下,沒(méi)有必要時(shí)刻看見(jiàn)所有信息。
最關(guān)鍵的一點(diǎn)——避免創(chuàng)造出令人一知半解的圖形。為頁(yè)面信息建立模型,首先給用戶呈現(xiàn)關(guān)鍵信息,然后才是支撐內(nèi)容。
在美學(xué)方面,有很多(太多了)設(shè)計(jì)都在誤用圖表。
最糟的是——這些“壞習(xí)慣”似乎在成倍增加。隨處可見(jiàn)本應(yīng)是餅形圖的面積圖,還有本應(yīng)該是柱狀圖的曲線圖。讓我們一起來(lái)制止這些設(shè)計(jì)……下面這些建議有助于你正確對(duì)待數(shù)據(jù):
未經(jīng)處理的原始數(shù)據(jù)表格一點(diǎn)也沒(méi)有吸引力。但它是最佳的起點(diǎn)。它幫你開(kāi)始思考數(shù)據(jù)中有哪些變量可用,這些變量數(shù)據(jù)如何關(guān)聯(lián)。
原始數(shù)據(jù)的單調(diào)特性,會(huì)幫你思考系統(tǒng)中各種變量間的關(guān)聯(lián)。
除了從空白數(shù)據(jù)行列入手,等待靈感忽然進(jìn)入你意識(shí)。你還可以更積極一些,通過(guò)下面這些很棒的資源,幫你揭示出有趣的關(guān)聯(lián):
在整個(gè)過(guò)程中,這部分并沒(méi)有靈丹妙藥。別對(duì)深入研究數(shù)據(jù)心存恐懼,試著混合搭配不同變量,創(chuàng)建基本圖表。這需要時(shí)間,但它是值得的。我想到的一些絕妙點(diǎn)子,都來(lái)自這些原始數(shù)據(jù)文件的拼拼湊湊。
我花了很長(zhǎng)時(shí)間才意識(shí)到這點(diǎn),有些圖表比其他更能表達(dá)你的數(shù)據(jù)。在創(chuàng)作中很容易陷入這樣的境地,選擇一種好看的圖表,然后指望它能發(fā)揮作用。我經(jīng)常這么做(我挺喜歡散點(diǎn)圖),并為此感到內(nèi)疚。
有些圖形比其他更好,這取決于你所處理的數(shù)據(jù)類型。選擇合適圖表的方法之一,是評(píng)估你手中的數(shù)據(jù)。有兩種主要數(shù)據(jù):
離散數(shù)據(jù)——數(shù)值可清晰計(jì)數(shù)。比如進(jìn)球數(shù)或Facebook點(diǎn)贊。
柱狀圖最適合表現(xiàn)離散數(shù)據(jù)
連續(xù)數(shù)據(jù)——任何范圍值。比如一季的降雨量,或一個(gè)人的身高體重。
曲線圖最適合表現(xiàn)連續(xù)數(shù)據(jù)
簡(jiǎn)單說(shuō),曲線圖最適合表現(xiàn)連續(xù)數(shù)據(jù),柱狀圖最適合表現(xiàn)離散數(shù)據(jù)。
Dona Wong的一項(xiàng)資源《華爾街日?qǐng)?bào):信息圖指南》幫我凝練了其中精髓。真希望幾年前我就有這本書(shū)。這是本無(wú)價(jià)的參考書(shū),幫你選用合適的圖表,闡明信息展現(xiàn)的行為準(zhǔn)則。
http://www.amazon.com/Street-Journal-Guide-Information-Graphics/dp/0393347281
最后,作為這些海量數(shù)據(jù)系統(tǒng)的設(shè)計(jì)師,你得反復(fù)問(wèn)自己“我應(yīng)該選擇非常規(guī)方式來(lái)定制化設(shè)計(jì)?還是使用久經(jīng)考驗(yàn)的圖表來(lái)展現(xiàn)信息?”
最近無(wú)意中讀到這篇來(lái)自37 Signals的文章——?只要3種圖表就夠了。作者強(qiáng)烈表達(dá)一個(gè)觀點(diǎn),圖形的“有效性”勝過(guò)它的視覺(jué)特征。我非常贊同文中這一觀點(diǎn)。不過(guò),我覺(jué)得他的觀點(diǎn)代表著一種極端實(shí)用主義的視角。我相信定制化的圖形通常也能提升數(shù)據(jù)的易用性,同時(shí)獨(dú)具一格引人入勝。
基本柱狀圖的例子
對(duì)我來(lái)說(shuō),有“一種尺寸通行”的圖表,還有“適用于最佳尺寸”的圖表。表格、曲線圖和柱狀圖就很好,可以容納各種類型的數(shù)據(jù),但它們也非常普通(一種尺寸通行)。作為專業(yè)的設(shè)計(jì)師,我希望我的作品看起來(lái)和感覺(jué)上是獨(dú)特且有用的。
比如,紐約時(shí)報(bào)做得很好,通過(guò)定制化的交互式圖形,來(lái)為他們的文章添彩??梢栽谶@里看到更多他們的作品。我們來(lái)看一些完美的定制化圖表案例:
這個(gè)案例對(duì)曲線圖做了調(diào)整,讓人“一睹”那些支撐圖表的基本數(shù)據(jù)。
http://www.nytimes.com/interactive/2013/03/29/sports/baseball/Strikeouts-Are-Still-Soaring.html?_r=0
在這個(gè)3D圖表中,透視角度的改變?cè)谝曈X(jué)上非常有沖擊力,也讓用戶更好理解數(shù)據(jù)間的關(guān)聯(lián)。
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=0
Selfiecity.net的這個(gè)例子做得很好,用了真實(shí)內(nèi)容來(lái)創(chuàng)建圖表。
http://selfiecity.net/
最后,來(lái)自我們?yōu)镃NN做的一個(gè)項(xiàng)目。我們用了顏色編碼來(lái)展表現(xiàn)政黨偏好,同時(shí)立體突起在視覺(jué)上表現(xiàn)人口統(tǒng)計(jì)信息。
http://truthlabs.com/work/cnn
作為首要準(zhǔn)則——數(shù)據(jù)與技術(shù)所需,我們需要嘗試各種定制化圖形。但我們還是要有備選計(jì)劃,以防設(shè)計(jì)并不奏效,或者客戶喜歡相對(duì)保守的方式。
我們?yōu)槭裁匆阉羞@些數(shù)據(jù)放在頁(yè)面上?答案是:這樣人們才能使用——做決策、調(diào)研、預(yù)測(cè)未來(lái),什么都行。關(guān)鍵是,用戶不會(huì)沉浸于你所選的漂亮色彩,他們是來(lái)工作的。
我的建議是——在你排布好頁(yè)面一切就緒后,問(wèn)問(wèn)自己“那又如何?”。看看每個(gè)圖表、組件、表格,仔細(xì)考慮人們從中能獲取到什么。通常你會(huì)得出這樣的結(jié)論,“這些都不重要”,這就意味著要減少或是重新思考。
這在我身上發(fā)生過(guò)好幾次——我創(chuàng)作了復(fù)雜漂亮的儀表板,包含了一系列時(shí)尚的圖表、餅形圖,還有成千上萬(wàn)數(shù)據(jù)點(diǎn)構(gòu)成的地圖。但總是被客戶質(zhì)疑“我只想知道這樣有效嗎……我要的東西在哪?”還有“我只要3樣?xùn)|西……X、Y和Z。哪里可以看到它們?”
哎,這時(shí)候你才會(huì)意識(shí)到自己迷失在雜草叢中,遺失了重點(diǎn)。
我會(huì)有個(gè)辦法,嘗試使用文字來(lái)表達(dá)人們所要的東西。
在重要信息上,文字總結(jié)可能比圖表更有效。
上面的圖來(lái)自我們最近的兩個(gè)項(xiàng)目。兩者都通過(guò)文字展現(xiàn)用戶所需的信息,并沒(méi)有依賴需要解釋說(shuō)明的圖表。
這個(gè)方法使我們的客戶產(chǎn)生共鳴,尤其在重要信息上。但我之前提過(guò),總要考慮各種角色,所以要用在適當(dāng)?shù)牡胤健?
就像其他所有形式的設(shè)計(jì)一樣,它也需要一種平衡。
力求使你的數(shù)據(jù)與眾不同,但是要避免過(guò)度設(shè)計(jì)和無(wú)謂的分心。
為數(shù)據(jù)選擇正確的圖形,但別忘了有層次地構(gòu)建頁(yè)面。
無(wú)論多么單調(diào)、令人沮喪,還要打磨每個(gè)小細(xì)節(jié)……還有別忘了問(wèn)自己,“那又如何?”
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com