Infographics信息图形化.doc

产品设计与支持部门设计分享 gaojianmingInfographics信息图形化-哪个是好的信息呈现？ 用户需要的是什么？ 好的视觉设计能最把有效的的信息提炼出来 -如果你看下美国大选的例子你就会明白信息图形化的重要性了。你能从哪一个图中更能快速的多维度获取信息呢？信息或数据的视觉化分析的设计：在我们的日常工作学习中，大量的信息是人们难以从中筛选有用的信息，此时信息视觉化，信息体验化，通过特别的信息导航，使用户能够从中得到更深层次的理解，更快的作出决定。如图，刚刚结束的美国2004大选中，有大量的信息和报道充斥着人们的耳目，TIMES通过一个网络终端把各种数据视觉化，再提供清晰的导航给人们提供信息，使人们可以快速的获得信息，并直观的理解信息并作出决定。/rvdb/JAVA/election2004/蓝色是为民主人士, 红色是为共和党人。/rvdb/JAVA/election2004/以下是网络产品Infographics概念实际应用的案例1. 视觉化的电影/歌手搜寻方式- / 另一个视觉化的资讯显示方式，可以搜寻你所喜爱的歌手或团体、电影或导演。可以查看Legend的部分看看这整个系统图示所代表的意思。不同的色彩代表不同的分类，圆圈大小也代表受欢迎的程度，相关的连线也会显示出所有相关的资讯，你也可以将你喜欢的任一个连结加到你的书签当中。 如果你有在上C|NET News你可能回发现，他们在每个文章的右边都加上了the big picture视觉化资讯设计的功能，类似原liveplasma的视觉化图形介面，另外在首页每个大分类的首页，他们也加上了一个whats hot，类似“newsMap”。Entry-Code Flash+Blog的标题索引系统 /mt/entry_code.html这是一个Flash+Blog的标题索引系统，放眼一看尽是日文和大大小小长短不同的长条以及数字，怎么看都不像是部落格的东西。其实他整个介面用了infographics的一些概念。透过条状色块的长短来区分内文字数的多寡，宽窄来区分点阅数，还有用条状间的间距和条状的颜色来区分不同的投稿时间，数字则代表有几个回应文章。上方则有Text/Time/Help三个功能选择，可以切换不同的辅助模式。1.滑鼠靠左右移动就可以看到同一月份不同的文章，左上角则可以切换月份。是一个很特别的流览部落格方式。2. 互动地图Color code /resources/loop/loop9/colorprojectMartin Wattenberg所做的互动地图，将数万个英文单字赋予不同的颜色，所有的颜色皆依据Yahoo图片搜寻的结果而产生出来，字与字间的关系则根据WordNet database，程式则是以Java为基础所写，所产生出来的结果，则是一个英文字的色彩地图。你可以点选任一个色块然后按show images for去看Yahoo搜寻中那一类别的图片。They rule /这学期Infogeaphics课老师给予我们看的另一个范例，可以看各大公司内部的高层组织，全部用图表方式呈现。你可以删除任何图表上的高层或公司，或者搜寻该高层人物或公司在网路上的相关报导，各个元件都可以拖拉，你可以找出你要的公司组合，把图表存起来。若要查企业资讯，这是另一种挺另类的方式，不过该资料目前是2004年的资料，所以有部分可能已有变更。设计公司:Future Farmer3. AmazType http:/amaztype.tha.jp/之前yogop的另一个吓死人作品，因为这也跟Interactive infographics有相关，因此再度拿出来。另类的搜寻方式。先将你想在亚马逊找的书籍或DVD、音乐的名称输入，接下来程式就会将所有相关物品的图片一一列出，然后还会组成你所打的那个字。列出来的物品还不是好看而已，全部都跟资料库有串连，你还可以更进一步点选每一个物件，看更详细的资讯。yogop的东西，每次看完都觉得自己是白痴真的很讨人厌! /4. HistoryWired(Infographics) /继续介绍Infographics的另一个范例是HistoryWired的一个介面，用来介绍不同分类的相关历史资讯。当你滑鼠移动到区块时，则会有连线连至相对应的分类，时间轴上的时间也会随着作品不同而改变，当你点击区块后，则可以更深入的去看细分类，或者叫出另一个视窗来了解该历史资讯Plus:/apps/newsmap/newsmap.cfm5. WikiMap Linz http:/wikimap.hotspotlinz.at/从Maxray看到的WikiMap，让我想起上学期上infographics(真是无所不在)这堂课时老师给我们看的那众多以地图为形式的范例。WikiMap中将地理位置和BBS(或者说文字、图片、音乐、影片)结合的概念我很喜欢，更多相关内容请看Maxray Blog。via:Maxrays Blog6. Visual Thesaurus //视觉化的学习方式一直是很多教育学家在鼓励使用的，研究报告指出视觉化能帮助人更有效率和有创意的去学习。学英文也是，市面上常常有很多英文学习丛书，在教你学习各种单字的同时，会告诉你相关的字词或字义，然而光列出来还是很难去记忆，如果没有加以组织整理，在大脑里还是只是一堆破碎的记忆片段，如果能够以infographics的方式将之呈现，会更有助于呈现字与字的关系。Visual Thesaurus则是把此观念发扬光大，以视觉化的方式，将相关的英文字展现出来，在你学习这单字的同时，也能藉由图表连线学会其他类似的单字，右方则有你所选择单字的各种意思(名词、动词、形容词)还有提供发音的功能，让你能够清楚的了解到正确的发音。也提供上一步下一步让你回到你之前所选的单字。最后你可以将之列印或寄给朋友。目前只能试用其功能，想要下载执行档或者完全的使用其所有功能，则需要付费。相信有玩过Flickr的人应该都知道Flickr Graph这东西，概念也是很像，透过类似的组织图展开再展开，一层层的去探索。關聯網站:Flickr Graph7 G /今天上课老师所列出一堆精采网站中的其中一个-Grokker，一个视觉图形化的搜寻引擎。这是一个将资讯以图形化方式做有系统呈现的好例子。在现今互动多媒体甚至许多日常生活的设计上，都可以看到infographics的存在。你可试试用此搜寻引擎搜寻你的名字(中文也通)、者公司名称，甚至任何东西都行，藉由Yahoo的搜寻引擎找出符合或类似的资料。有趣的是他不像google是以条列式的列出资料，他采用infographics的方式图型化呈现，不同的属性搜寻结果放在不同的圈圈当中，当你所提供的关键字够准确时，资料会以同心圆的方式出现；当有许多类似的结果时，则会有数个圆圈围绕，你可以将你不要的结果加以删除，最后你甚至可以储存这个地图，传给别人看。有时后，你会搜寻到你几百年前放在网路上不可见人的作品、帮客户做的案子、所留言的讨论、或者搜寻到你的客户或朋友，搜寻的结果总是让人感到惊奇。我试了自己的中文名字、英文名字、作品集网站和部落格名称，其中以的搜寻结果是完全准确，若光只有lezplay则会有其他相关或完全不相关的资料出现。(输入你朋友的名字或者你的网站名称看看，这会比Google搜寻出现的好玩)还有很多很赞很有趣的Infographics相关网站，会不会介绍完呢?我也不知道.。(.最近没啥人愿意交换些资讯和网站，让自己发文章的动力也减少很多。那群会跟我交流的朋友及忠实读者，感谢+感谢!)8baby name voyager /namevoyager/lnv0105.html之前在flashforward的文章/index.php?p=482所提到的baby name graph,終於找到網址你可以輸入你的英文名字看看是不是菜市場名以及名字在各個時期的被使用率非常有趣的圖表(必需安裝Java)我的英文名字本來是一個德國名Erich(讀音同Eric請不要念成e-rich這還是在英文名字典找到的後來才知道這是德國名),事實上就是Eric只是在英文名字典裡的解釋稍有不同(Erich有著偉大領導者的意思,是中古歐洲的一位君王)近代幾乎無人使用了9 。NY Times-Income Mobility flash圖表 /packages/html/national/20050515_CLASS_GRAPHIC/index_03.htmlIncome MobilityFlash除了是很好的網站製作工具和簡報工具外，其在圖表呈現(infographics)上也有很多優勢。這是The New York Times所做的一個的flash interactive infographic，算是非常好的範例。不妨親自去點選各種不同的項目，看看這些互動圖表如何顯示資訊，是否有比文字或靜態圖表更為清楚易懂?P.S.靜態的圖表部分，我最喜歡看Wired和時代雜誌上的圖表，常常可以看到很有創意的呈現方式；大家有空不妨去書店翻翻看。/這個網站是在Danger那邊看到的，Crew 9算是一個人力資源的網站，主要是讓廠商能夠有效率的找到適合的實習生。這個RIA把每個人當作商品處理，可以做以不同的條件排序、過濾，偶而還會有對話泡泡出現，說出他的的心聲。/10x10.html10x10每個小時會把世界上發生的大事彙整，以100個詞、100個影像呈現出來。過去的新聞也會記錄下來，隨時可以回去看看過去的某段時刻，世界上發生了什麼事。此外10x10有把他們彙整的資訊提供出來給Developer做其他的應用。/cultureguide/flash_content/index.htmlAIGA: Vancouver Culture Guide是為了第十屆美國平面設計學會 (AIGA)研討會而建立的溫哥華互動地圖。可以用類型、價錢與所在地區篩選出觀光點，點選之後地圖會自動移到該觀光點。這是我用過最棒的互動地圖之一，清楚而容易使用的使用者介面令人印象深刻。http:/www.nagaoka-id.ac.jp/gallery/gallery.htmlYugop大師幫NEC作的環境保護網站,使用者可以上網發表他們對環境保護的想法與關心,這些留言藉由一個一個的延伸,豐富成為一顆徐徐如生的樹,很棒的一個想法/index_en.html/apps/flickrgraph/利用Flickr的網路好友Tag,把你的好友全部連起來,清楚的呈現每個人的好友網絡,感覺真的是網路無國際.uk/英國下一世代教育協會 (Next Generation Foundation.)網站當中有個教育專案資料庫，這個資料庫的以視覺化的方式呈現搜尋與過濾的結果，比傳統的資料庫反應更快，更具親和力。Thinking Machine是一個普通的西洋棋遊戲，特別的是電腦思考過程的視覺化。每個棋子的影響範圍會在棋盤上以波紋的方式呈現。當電腦思考的時候，會把考慮過的路徑畫出來，視覺效果出奇的好。Aaron Jasinski的個人網站的導覽介面非常有創意，繪畫部份的導覽介面是一條條的色塊，點選之後色塊會慢慢展開呈現出作品來。音樂的部份則是以圓作為設計元素，點選一個圓之後，會彈出一個圓型的音樂播放器，非常有趣的設計。Yugo新作品http:/sweet.tfm.co.jp/sweet.htmlhttp:/sweet.tfm.co.jp/sweet.htmlContext Viewer http:/www.kanshin.jp/hakodate/index.php3?mode=top/mappr.phtml?tag=flowerMapper是一個以地點為基礎的flickr相簿。如果照片的tag包含了地點名稱，它就會把這張照片貼到地圖上的那個位置。非常有趣的應用！/v2/yab_fr.htm/比利時攝影師Carl de Keyzer的個人網站，上面蒐藏了超過1000張的照片。簡單、流暢的導覽介面，完全展現出設計師高超的功力。fes.jfn.co.jp/Yugo又有新作品了，每次看到他的作品總是讓我嚇的目瞪口呆。這次的FM FESTIVAL 04日本音樂地圖也不例外，完全是另一個層次的作品。音樂地圖把所有的演唱活動和時間、地點聯結了起來，網友對歌手或樂團的回應也能夠依照日期一一播放、並顯