![](http://1.bp.blogspot.com/-QaiZUv5_-tY/UwwR8CIuv4I/AAAAAAAAowA/0aoK0RV8KB0/s1600/1604974_748363628515417_1360798637_n.jpg)
下面就讓我按照筆記內容節錄當天的一些重點
![](http://2.bp.blogspot.com/-64ooobcRnNI/UwwQ98t4i4I/AAAAAAAAou4/IVGaVqyMmLg/s1600/IxDA+20140222+P1.png)
天下雜誌是1981年起家的,從創刊理念開始講起,還沒進入網路時代的讀者跟現在的TA,重新檢視過後,其實沒有太大的差別,因為「人有興趣的東西其實一樣,是閱讀的工具不同了!」
維持 "紙本" 帶進來的氣質,很多基本的排版方式是不變的,Ex: 網格、文字的設計...等。
![](http://4.bp.blogspot.com/-j95e4-hC0Uc/UwwQ-GtvBtI/AAAAAAAAovE/2eArNwQ8js0/s1600/IxDA+20140222+P2.png)
經由 New York Times 帶來的啟發,天下雜誌學會把故事講的更好!隨著時代的變化數位內容不是只有文字,視差滾動 Parallax Scrolling 的網頁設計可以帶來更豐富的體驗!
(嘗試快速筆記的方式紀錄這個範例。)
安倍晉三再造日本
http://topic.cw.com.tw/2013japan/p1.htm
![](http://2.bp.blogspot.com/-whKXac_Hl4k/UwwT4HigvoI/AAAAAAAAowM/HTAmUT93vdI/s1600/20140225_115348.png)
更值得一題的是會後,編輯展示了安倍晉三這個專題的主視覺,希望能營造出一種"生活"的步調,採用了影片的方式當作背景。
http://topic.cw.com.tw/2013japan/
![](http://3.bp.blogspot.com/-nwDLTdQ8vS8/UwwU40cf0kI/AAAAAAAAowU/LiKYSH8rWFE/s1600/20140225_115649.png)
![](http://1.bp.blogspot.com/-TVltvs5OekE/UwwQ915igSI/AAAAAAAAou8/j3M_wzaMtGA/s1600/IxDA+20140222+P3.png)
再來介紹了另一個有趣的例子:雙面中國,故事本身有兩個角度切入,該怎麼呈現兩個不同的角度,不同的面向閱讀,有著不同的感受,配合互動清楚的資訊圖表說明,難怪會得獎阿!
雙面中國
http://topic.cw.com.tw/2013china/
![](http://2.bp.blogspot.com/-vfukk0epFVw/UwwVtaDGZoI/AAAAAAAAowg/szZaxGVRujw/s1600/20140225_120136.png)
這是其中一個互動圖表的範例
![](http://1.bp.blogspot.com/-3UG6MFPevgw/UwwWkXj68_I/AAAAAAAAows/fpzwTnCaTKc/s1600/20140225_120427.png)
![](http://4.bp.blogspot.com/-xw3_9J3BI-4/UwwQ-yqu29I/AAAAAAAAovQ/WMAyCqKBJfQ/s1600/IxDA+20140222+P4.png)
接下來講到原則,好的視覺化設計原則:Attractive、Clear、Simple、Flow、Wordless。
Story-Telling 組成,故事 > 知識 > 資訊 > 資料。
再來說到有名的資訊圖表 GAPMINDER World 2012
當我手邊有很多資料,該怎麼視覺化?如果多一個向度,我該怎麼做?
BBC Four 的影片 The Joy of State 演示了多一個向度的作法
![](http://1.bp.blogspot.com/-GN7htzlGlSk/UwwQ_PcUZ4I/AAAAAAAAovM/pP6zL3w9UTE/s1600/IxDA+20140222+P5.png)
接下來有兩個例子
我買了國家公園?!
http://topic.cw.com.tw/2013nationalpark/pc.aspx
![](http://4.bp.blogspot.com/-ri39E5cG3wU/Uww34mGyirI/AAAAAAAAoyk/6umE8NMrNc8/s1600/20140225_142644.png)
這個例子中有一個今昔照片1986年跟2013年的照片,利用左右拖拉的方式可以前後對照,非常有趣!
![](http://2.bp.blogspot.com/-Nzpb1Dx6YBU/Uww4_edMo_I/AAAAAAAAoyw/9gAHt-cCscE/s1600/20140225_143209.png)
台灣是富人的低稅天堂
http://topic.cw.com.tw/tax/
點擊率頗高的一個圖表
![](http://4.bp.blogspot.com/-9cRuB4TCqGE/Uww5g_WqaEI/AAAAAAAAoy4/U7e2ndbT5do/s1600/20140225_143417.png)
![](http://3.bp.blogspot.com/-VG0YNbxBoHk/UwwQ_TxNwtI/AAAAAAAAovY/zEs4M393iXY/s1600/IxDA+20140222+P6.png)
天下雜誌到底怎麼做的?
1. 題一個好的問題
2. 搜尋資料
3. 分析資料
4. 設計資料呈現方式:故事的重點、起承轉合;表現方式文章、圖表、slide、影音。
5. 執行與發佈
6. 觀察回應與分析
為什麼打了個星號,因為我最想了解的其實是這塊,會後我去找了編輯詢問,他們小組編制當然也是編輯、設計、程式設計師都有,他覺得最重要的是他們每週都會花時間去找新東西,去學去看,大家分享,才能不斷激出火花。
![](http://4.bp.blogspot.com/-pMArT__9FYM/UwwQ_3aFobI/AAAAAAAAovk/xIAfx3OZsOI/s1600/IxDA+20140222+P7.png)
Q&A 時間 (節錄幾個我覺得重要的)
※ 流程時間大約多久? 2週左右 ,雜誌出刊時間差不多,也是要看內容的多寡
※ 如何co-work? 編輯決定文章的分段,決定好 Layout 跟設計討論。
※ 資料的資訊圖表呈現方式很多種,當使用者測試後,版本數據都差不多會怎麼選擇? 選比較炫的。
※ 先紙本才會做網頁嗎? 是。未來可能會調整
※ IE版本支援? IE8 但是,IE不是大問題,平板才是。
================ 工作坊時間 =========================
利用幸福指數大調查來發想天下雜誌下一週的主題
參考方式:
http://city.cw.com.tw/2012/chart3.aspx
![](http://2.bp.blogspot.com/-fZzgl_NajbQ/Uwwdo5jA7II/AAAAAAAAow8/loQCyu9KU7c/s1600/1899875_10202048200381461_251110715_n.jpg)
![](http://3.bp.blogspot.com/-H454wLcYp4c/UwwRAJMjaDI/AAAAAAAAovo/50QEA6PSQuE/s1600/IxDA+20140222+P8.png)
![](http://1.bp.blogspot.com/-n1nwa6rjILQ/Uwwg-bQueuI/AAAAAAAAoyM/Mn7IGI9J2FU/s1600/IxDA+20140222+P9.png)
一個小時的工作坊,怎麼從桌上都是數據的資料中找出有趣的主題去分析。
從數據中觀察到什麼?
有沒有故事可以說?
大家會不會有興趣?
可能想要的呈現方式?
![](http://3.bp.blogspot.com/-7DSmEIy8nkc/UwwgGpKDwaI/AAAAAAAAoxw/WX6v3AJ-TBg/s1600/2014-02-24+(2).jpg)
說真的,對於工作坊我不太有經驗,小組討論會不小心太發散,不過真的挺好玩的!
![](http://1.bp.blogspot.com/-ghLtTypT75s/UwwgGnxHtjI/AAAAAAAAox0/qt5Dyq1t7Jw/s1600/2014-02-24+(1).jpg)
有深入分析組
![](http://2.bp.blogspot.com/-ouW36mObybU/UwwgGnOv0bI/AAAAAAAAoxs/zEcApeAqjx4/s1600/2014-02-24.jpg)
有主題逗趣組
希望下次有空可以再參加類似的工作坊!
沒有留言:
張貼留言