
下面就讓我按照筆記內容節錄當天的一些重點

天下雜誌是1981年起家的,從創刊理念開始講起,還沒進入網路時代的讀者跟現在的TA,重新檢視過後,其實沒有太大的差別,因為「人有興趣的東西其實一樣,是閱讀的工具不同了!」
維持 "紙本" 帶進來的氣質,很多基本的排版方式是不變的,Ex: 網格、文字的設計...等。

經由 New York Times 帶來的啟發,天下雜誌學會把故事講的更好!隨著時代的變化數位內容不是只有文字,視差滾動 Parallax Scrolling 的網頁設計可以帶來更豐富的體驗!
(嘗試快速筆記的方式紀錄這個範例。)
安倍晉三再造日本
http://topic.cw.com.tw/2013japan/p1.htm

更值得一題的是會後,編輯展示了安倍晉三這個專題的主視覺,希望能營造出一種"生活"的步調,採用了影片的方式當作背景。
http://topic.cw.com.tw/2013japan/


再來介紹了另一個有趣的例子:雙面中國,故事本身有兩個角度切入,該怎麼呈現兩個不同的角度,不同的面向閱讀,有著不同的感受,配合互動清楚的資訊圖表說明,難怪會得獎阿!
雙面中國
http://topic.cw.com.tw/2013china/

這是其中一個互動圖表的範例


接下來講到原則,好的視覺化設計原則:Attractive、Clear、Simple、Flow、Wordless。
Story-Telling 組成,故事 > 知識 > 資訊 > 資料。
再來說到有名的資訊圖表 GAPMINDER World 2012
當我手邊有很多資料,該怎麼視覺化?如果多一個向度,我該怎麼做?
BBC Four 的影片 The Joy of State 演示了多一個向度的作法

接下來有兩個例子
我買了國家公園?!
http://topic.cw.com.tw/2013nationalpark/pc.aspx

這個例子中有一個今昔照片1986年跟2013年的照片,利用左右拖拉的方式可以前後對照,非常有趣!

台灣是富人的低稅天堂
http://topic.cw.com.tw/tax/
點擊率頗高的一個圖表


天下雜誌到底怎麼做的?
1. 題一個好的問題
2. 搜尋資料
3. 分析資料
4. 設計資料呈現方式:故事的重點、起承轉合;表現方式文章、圖表、slide、影音。
5. 執行與發佈
6. 觀察回應與分析
為什麼打了個星號,因為我最想了解的其實是這塊,會後我去找了編輯詢問,他們小組編制當然也是編輯、設計、程式設計師都有,他覺得最重要的是他們每週都會花時間去找新東西,去學去看,大家分享,才能不斷激出火花。

Q&A 時間 (節錄幾個我覺得重要的)
※ 流程時間大約多久? 2週左右 ,雜誌出刊時間差不多,也是要看內容的多寡
※ 如何co-work? 編輯決定文章的分段,決定好 Layout 跟設計討論。
※ 資料的資訊圖表呈現方式很多種,當使用者測試後,版本數據都差不多會怎麼選擇? 選比較炫的。
※ 先紙本才會做網頁嗎? 是。未來可能會調整
※ IE版本支援? IE8 但是,IE不是大問題,平板才是。
================ 工作坊時間 =========================
利用幸福指數大調查來發想天下雜誌下一週的主題
參考方式:
http://city.cw.com.tw/2012/chart3.aspx



一個小時的工作坊,怎麼從桌上都是數據的資料中找出有趣的主題去分析。
從數據中觀察到什麼?
有沒有故事可以說?
大家會不會有興趣?
可能想要的呈現方式?
.jpg)
說真的,對於工作坊我不太有經驗,小組討論會不小心太發散,不過真的挺好玩的!
.jpg)
有深入分析組

有主題逗趣組
希望下次有空可以再參加類似的工作坊!
沒有留言:
張貼留言