日韩小视频-日韩久久一区二区三区-日韩久久一级毛片-日韩久久久精品中文字幕-国产精品亚洲精品影院-国产精品亚洲欧美云霸高清

下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > 設計趨勢,探討信息可視化的流程和方法(下)

設計趨勢,探討信息可視化的流程和方法(下)

時間:2024-03-07 15:01作者:下載吧人氣:18

信息可視化的設計過程

通過項目中各種痛苦的嘗試,結合信息可視化標準,最終我歸納出這樣一個比較通用的流程:

設計趨勢,探討信息可視化的流程和方法(下)

Step 1:確定表意正確

在上一篇文章中已經提到:“正確”是信息圖最基本的要求,所以這里首先要確保信息圖的內容是正確的。跟據問題的復雜程度不同,一般有兩種做法:

第一種做法:

對于業務比較復雜難理解的產品,可以讓產品經理先根據自己的理解畫一個圖,設計師和產品經理進行溝通,確認雙方的理解是一致的;如果產品經理畫的圖沒能正確的表達清楚內容,那么設計師就在自己理解的基礎上重新完善,然后雙方再度確認,保證圖形正確的傳達了想表達的含義。

設計趨勢,探討信息可視化的流程和方法(下)

比如上面這個圖(“御膳房”子產品數據引擎),產品經理先隨意畫了一個草圖給我看,我沒太看懂,讓產品經理講了一遍他的想法,發現與我自己理解的相差甚遠;然后我跟據產品經理講的內容又重新完善了一個草圖,拿給他看,他指出了其中一些我理解不對的地方,我再修改,直至雙方達成一致。

第二種做法:

如果設計師對產品有大致的了解,也可以自己動手畫草圖。然后產品經理審核看是否正確的表達了產品邏輯,如果有問題則提出,設計師跟據意見進行修改,直至雙方達成一致。

設計趨勢,探討信息可視化的流程和方法(下)

比如上面這個圖(“御膳房”總產品結構圖),就是我跟據自己的理解畫的“御膳房”產品結構圖,產品經理沒有提出異議,于是順利進入到第二個環節。

Step 2:優化展現形式

內容正確還不夠,還要易懂。我們需要在這個步驟里尋找信息圖最優表現形式,讓讀者一目了然,降低理解難度。

《淘寶技術這十年》里有一句話說的好“好的架構圖充滿美感”。淘寶工程師用十年的時間證明了這件事。而其實不僅是技術架構圖,好的流程圖、結構圖、信息圖等都充滿美感。跟據我的經驗,它們往往是對稱、飽滿、和諧的,這難道是巧合嗎?我也不知道,大自然就是如此神奇。如果你繪制的信息圖臃腫、雜亂、不美觀,那可能并不是因為事實雜亂無序,而是你的表達出了問題。

那么怎樣優化信息圖的表達形式呢?如果是一個邏輯比較復雜的結構圖,可以這樣:

設計趨勢,探討信息可視化的流程和方法(下)

比如下面這個圖(“御膳房”子產品數據引擎),我開始是這樣畫的。雖然邏輯沒有錯誤,但是箭頭有交叉,看起來不美觀簡潔,理解起來也比較費勁。那么怎么改良呢?

設計趨勢,探討信息可視化的流程和方法(下)

首先,從這個圖中找出一個最大的完整的事件,也就是圖中橙色的部分。

設計趨勢,探討信息可視化的流程和方法(下)

設計趨勢,探討信息可視化的流程和方法(下)

設計趨勢,探討信息可視化的流程和方法(下)

有意思的是,在圖即將完成時,發現有個地方多了條支線,導致圖形無法完全對稱,非常可惜。最后詢問PD,發現這條支線是由于理解錯誤造成的,本來就應該去掉。

PD是什么?縮寫常識學起來:《小常識學起來!設計師最好知道一下的常用縮寫》

當時的草圖繪制過程:

設計趨勢,探討信息可視化的流程和方法(下)

第一個圖和第二個圖的內容一樣,修改后是不是容易理解多了呢?第三個圖是在第二個圖的基礎上增加了一些細節信息。我們在考慮最優展現形式時,可以先不考慮細節,只考慮基礎的框架結構,這樣更容易發現問題所在。

Step 3:探索視覺風格

在探索視覺風格時要注意抓大放小,先定下來最主要模塊的風格,再做延展。比如我現在在做的御膳房產品,就是要先定下來產品結構圖的視覺風格,再延展到子產品的信息圖上。如果先設計子產品的信息圖風格,就很難延展到總體結構圖上了,會起到事倍功半的效果。

首先先尋找一些競品和素材,發散一下思維,同時也確定一下自己想要的感覺。

我想要的感覺是:科技感的、扁平化的、形式新穎有趣味……

設計趨勢,探討信息可視化的流程和方法(下)

接下來,就進入了視覺設計師最最痛苦的“探索、修改”無限循環的過程了。

第一版(卡通):

視覺設計師第一次嘗試的是卡通版本。這個版本很美觀,但是對產品的表述內容太少,不夠全面。卡通風格也不太適合表現這樣一款大型的阿里大數據官方產品,且風格不好拓展。

設計趨勢,探討信息可視化的流程和方法(下)

第二版(寫實):

吸取了第一次的教訓,視覺設計師第二次嘗試的是寫實版本。這回雖然可以詳細的表達產品內容了,但不夠直觀和一目了然,閱讀起來索然無味。
設計趨勢,探討信息可視化的流程和方法(下)

第三版(突破):

吸取了前兩次的教訓,設計師開始尋找一些更趣味、更科技感的表現形式。但這個版本易讀性一般,尤其是左邊的樣式很不好拓展。但是左邊這張圖給人感覺很貼合大數據那種高科技、前衛的感覺,這和我想要的感覺十分接近。

設計趨勢,探討信息可視化的流程和方法(下)

第四版(改良):

雖然前面這幾版都沒有被采用,但方向卻越來越清晰了。我們決定在左上圖的基礎上做改進,去掉一些瑣碎的視覺元素,突出主體,使之更易讀。但改完后我覺得整體效果并不好,顯得很單薄,而且易讀性依然不好。所以需要換個思路再繼續嘗試。

設計趨勢,探討信息可視化的流程和方法(下)

第五版(終稿):

結合前面的經驗教訓,視覺設計師認真聽取了大家的感受和建議,重新整理了思路,這次一氣呵成。這版雖然沒有特別驚艷的感覺,但是綜合分數高:無論是美觀度、還是易讀性、正確性、拓展性都比較好。所以最終敲定了這版。

設計趨勢,探討信息可視化的流程和方法(下)

Step 4:完善細節

探索視覺風格時,并不需要做的非常細,可以先不考慮細節,只考慮主要框架,這樣效率會高一些。視覺風格確定后,可根據需要添加、完善細節。

設計趨勢,探討信息可視化的流程和方法(下)

Step 5:風格延展

我在上一篇講過:“一致”的視覺設定有助于用戶理解,也能更好的提升品牌形象。所以主風格確定后,我們需要把它延展到其它有需要的頁面上。那么如何延展呢?需要先做一個簡單的視覺風格設定,就像界面規范一樣。

設計趨勢,探討信息可視化的流程和方法(下)

比如在產品結構圖中,四個子產品用的不同的顏色,那么我們在其它頁面或相關的圖形內容中,也要用這四種色系來代表這四種產品。定義深淺是考慮到面積、視覺層次的不同來靈活調整,使界面整體和諧統一。這樣既保持了整體風格的一致性,又賦予每種產品獨特的個性,增強信息的識別度。

設計趨勢,探討信息可視化的流程和方法(下)

寫在最后:經驗總結

由于這是我第一次比較系統的接觸信息可視化相關內容,所以犯錯誤在所難免,我把這些教訓記錄下來,希望能讓其他初學者避免我犯的錯誤:

當設計一整套圖形,或相互有關聯的圖形時,要注意先從整體考慮,抓大放小。我當時就是沒有系統的考慮,子產品的圖確定了,就讓視覺設計師趕緊做,結果發現和主圖難以配套統一,浪費了很多時間,也增加了視覺設計師的工作量。信息可視化不光是讓視覺設計師畫幾幅圖這么簡單,規劃環節必不可少。我開始以為信息可視化是視覺設計師的事情,跟交互設計師沒有關系,后來才慢慢發現,把希望全部寄托在視覺設計師身上是不切實際的。信息可視化要想做好既需要透徹理解產品,也需要很強大的交互技能,更需要激情與責任心。需要產品經理、交互設計師和視覺設計師密切配合,而不是互相推脫,把壓力全留給視覺設計師。好的信息圖充滿美感,它們往往是對稱的、和諧的;先完成最小事件的圖形,再逐漸補充。我開始就忽略了這點,以為把信息準確表達清楚了,再讓視覺設計師稍加美化就行了,沒有想要去探索最佳的圖形展現形式,直到有一天看到了一位運營在PPT中畫的產品圖才驚呼:原來還可以這樣!所以做信息可視化永無止境,永遠有發揮的空間。注意細節的匹配、一致性。這點作為一個交互設計師,我自然很注意,但我發現其他人未必在意。比如兩個子產品的結構圖,可能一個圖有邊,一個圖沒邊;或者同樣放標題的位置,顏色或樣式不一樣;同樣性質的標簽陰影的角度和方向不一樣……這些問題簡直無窮無盡。也許這些都是微不足道的小事情,但是品牌無小事,細節確定成敗,我堅信這一點。
標簽劉津,ps基礎教程,理論教程,ps理論,ps知識,ps技巧

相關下載

查看所有評論+

網友評論

網友
您的評論需要經過審核才能顯示

公眾號

主站蜘蛛池模板: 亚洲日本韩国在线 | 日韩免费毛片全部不收费 | 午夜美女影院 | 成年美女黄网站色大 | 国产成人综合网在线观看 | 欧美成人免费在线 | 操亚洲| 亚洲精品在线免费观看视频 | 在线成人免费观看国产精品 | 国内精品免费一区二区观看 | 图片区偷拍区小说区 | 成人做爰视频www网站 | 国产孕妇孕交大片孕 | 久久国产精品夜色 | 国产精品免费视频一区 | 日韩欧美一区二区三区在线观看 | 日韩精品小视频 | 日韩亚洲欧美在线 | 中文字幕日韩精品在线 | 看久久 | 欧美一级毛片一级 | 日韩一区二区精品久久高清 | 日韩欧美在线观看视频一区二区 | 成人黄色一级视频 | 久久99国产精品久久欧美 | 国产成人a大片大片在线播放 | 国产成人精品一区二区 | 中文字幕国产专区 | 亚洲成人影院在线观看 | 男女视频免费网站 | 久久伊人精品热在75 | 中文字幕一区二区三区精彩视频 | 一级毛片免费不卡夜夜欢 | 日韩中文字| 国产高清a毛片在线看 | 精品国产欧美一区二区三区成人 | 久久精品视频在线 | 91热在线观看精品 | 亚洲天堂男人在线 | v片在线看| 日韩精品一区二区在线观看 |