Infographic & Website Design - 飲料狂的糖度習題
簡報link: https://goo.gl/Zr1KHd
開啟這個企劃的契機，是基於自己想要完成一份完整的資訊圖表的決心，還有對於手搖飲料的熱愛跟關注。
資訊圖表廣泛地運用在數位跟平面媒介上，能夠將複雜的資料以視覺化的方式簡明易懂地呈現出來，資訊統合，編輯能力跟設計力都會以從這裡展現。因此我挑選了自己喜歡的項目---手搖飲料作為資訊圖表的項目。
主題
但要以手搖飲料的什麼資訊作為主題呢？ 我試著從品項/熱量/成分/糖度/品牌作為發想，搜集了飲料店的公開資訊，發現除了連鎖手搖飲料店的資訊是較為公開的，所以將「連鎖手搖店」當作目標，再做一次資訊搜集。
若是從品項或是成分作為研究主題，因為範圍過大，且能夠聚焦討論的資訊不多，也牽涉到成分的來源，可能要耗費太多時間搜集跟整理資訊，所以暫不考慮。熱量比較也難以拿到所有成分的熱量標示，篩選過後，就以糖度再做發想。
台灣喝手搖飲料的民眾人數眾多，食安跟健康的關注度也在提升，糖的來源跟品項的差異，我想這是吸引人且較易發揮的題目，所以「手搖飲料店的糖度」就成為主軸了。
“你想表達的是什麼？”
問題（痛點）
不同的手搖飲料店有各自不同的用糖以及用糖量，並沒有統一，所以顧客不知道各個店家確切的用糖量。
- 不同飲品的用糖量
- 不同店家的用糖量
- 選用何種糖
將以大量的資訊比較作為主題。
需求方
常喝連鎖店手搖飲料，關心飲料用糖量之民眾。
搜集資料
- 不同飲料店用糖基準（全/半/微/無）
- 大眾飲料品項及其用糖量
- 用糖品牌及種類
- 糖類資訊比較
- 成年人一天用糖量標準
篩選資料
最多人喝的連鎖手搖飲料店有哪些？ 我從ptt，臉書跟dcard查看討論度，也問身邊朋友們的意見，約10家左右的連鎖飲料店是分店遍及全省，也較為人所知。最後根據店家資料提供的完整度，篩選了8家。
飲料種類的挑選：
除了純茶類之外，珍珠奶茶跟果茶也是較大眾的品項，鮮奶茶跟水果茶是近來較為火紅的品項，但提供水果茶的店家並不多，作為糖度比較資料仍嫌不足，就不以採納。
版面規劃
此次的資料圖表打算以網頁、簡報及海報的方式呈現。
簡報會放在臉書的相簿中，所要注意的是尺寸：手機與桌機用戶皆要兼顧，若以1280x720來設計，字體在手機上閱讀可能會偏小，最後選擇1:1的尺寸來製作，就不會有裝置直橫放的問題。
而海報所要注意的是排版的整齊度跟視覺平衡，還有閱讀字體與圖的視線動線。
網站則是landing page一頁式的網頁，是手機跟電腦上都是要能閱讀的RWD網頁，以Bootstrap作為框架，用HTML+SCSS+Javascrpt寫出來的。
簡報的wireframe
海報與網頁的wireframe
網頁版，詳細請見： https://drinkaholic.website/
“圖表的實際用途比美感重要，更應將用戶使用情境列入設計考量。”
視覺設計
簡報的視覺設計重點是簡單明瞭，且目標群眾為年輕及中年人為主（因為老年人較不喝手搖飲料），所以資訊不能太過複雜難懂，也不能過於簡化或是用太過獨特的小眾語彙。使用者可能會在非閒暇時段閱讀，所以每一頁的資訊量不能太大，要能很快看懂，持著手機閱覽也能快速了解重點。
並在簡報後面放上重點總結，讓人最後能聚焦簡報所要提供的資訊。
簡報的視覺設計改版過數次，初次版本在風格上較為正經，在圖表的設計上也用了過多的顏色（因為堅持品牌色）反而失去易讀性，且在結尾的地方沒有結論，也會讓使用者忘記自己閱讀了哪些重點。
二次的改版就針對了資訊易讀性跟連貫性做修正，新增一些註解及結論，並調整顏色。
網頁設計的重點是要讓人有耐心跟興趣往下閱讀，所以必須要有互動，但也不能太過複雜，因為使用者可能沒有時間操作網頁。所以我以問答跟滾軸，以及輪播幻燈片的形式呈現資訊，讓使用者能輕易投入其中。
簡報初版
簡報更新
