※ 本文為 npc 轉寄自 ptt.cc 更新時間: 2014-02-15 06:45:18
看板 Gossiping
作者 標題 [新聞] 「可惡，想用！」中央氣象局也能這麼美
時間 Fri Feb 14 23:04:18 2014
1.媒體來源:
三立
2.完整新聞標題/內文:
「可惡，想用！」中央氣象局網站也能這麼美…
生活中心／綜合報導
天啊，原來政府網站也能這麼美？有民眾為了測試自己的功力，選定中央氣象局網站做為
「醜女大翻身」的目標，在一個晚上就完成網頁版面設計，前後作業時間總共只花了6個
小時，讓民眾看了都大呼美到不行，直說「可惡，想用！」
「醜女大翻身」的目標，在一個晚上就完成網頁版面設計，前後作業時間總共只花了6個
小時，讓民眾看了都大呼美到不行，直說「可惡，想用！」
▲現在的中央氣象局網站設計複雜，難以一眼找出所需資訊。（圖／Taylor Hu提供）
在臺灣科技大學主修視覺設計的Taylor Hu，直言目前氣象局網站首頁有90%是「非必要資
訊」，讓網友很難在第一時間找到需要的東西，因此他從最基本的Logo開始重新設計，並
從這個新的識別系統延伸出一個設計風格，接著再進行網站的版面設計。
訊」，讓網友很難在第一時間找到需要的東西，因此他從最基本的Logo開始重新設計，並
從這個新的識別系統延伸出一個設計風格，接著再進行網站的版面設計。
▲ 如果中央氣象局Logo變成這樣，是不是好看多了？（圖／Taylor Hu提供）
設計師Taylor Hu說：「民眾其實不在乎今天吹的是哪個方向的風，他們只想知道是不是
該多穿件外套出門而已。」所以他把原先複雜的元素拿掉，使用「減法設計」讓網頁的呈
現簡單俐落，看起來既乾淨又一目瞭然。
該多穿件外套出門而已。」所以他把原先複雜的元素拿掉，使用「減法設計」讓網頁的呈
現簡單俐落，看起來既乾淨又一目瞭然。
▲ Taylor Hu重新設計的中央氣象局網站，看起來簡潔有力。（圖／Taylor Hu提供）
為了不讓人感覺氣象資訊冷冰冰，他還將網頁設計成「動態背景」，如果天氣預報現在是
下雨，背景就會同時出現雨天的影片畫面，設計師Taylor Hu也特別強調：「我希望藉由
會動的背景，讓使用者感覺到，自己和大自然界的變化其實是緊緊扣在一起的。」
下雨，背景就會同時出現雨天的影片畫面，設計師Taylor Hu也特別強調：「我希望藉由
會動的背景，讓使用者感覺到，自己和大自然界的變化其實是緊緊扣在一起的。」
▲ Taylor Hu重新設計的中央氣象局網站，有動態背景。（影片／Taylor Hu提供）
看過Taylor Hu設計的氣象局網站，不只令人驚豔台灣人的設計功力，也令人感嘆政府網
站的美感仍不夠力。台灣的公家單位恐怕還得再加把勁，從使用者的角度出發，多看看別
人是怎麼設計，向後生之輩學習。
站的美感仍不夠力。台灣的公家單位恐怕還得再加把勁，從使用者的角度出發，多看看別
人是怎麼設計，向後生之輩學習。
3.新聞連結:
http://www.setnews.net/News.aspx?PageGroupID=1&NewsID=13629&PageType=12
「可惡，想用！」中央氣象局網站也能這麼美…│三立新聞網 SETNEWS.NET
![[圖]]()
天啊，原來政府網站也能這麼美？有學生為了測試自己的功力，選定中央氣象局網站做為「醜女大翻身」的目標，在一個晚上就完成網頁版面設計，前後作業時間總共只花了6個小時，讓民眾看了都大呼美到不行，直說「可惡，想用！」 ...
![[圖]](http://setmoney.blob.core.windows.net/newsimages/2014/02/14/41653-XXL.jpg)
4.備註:
可惜做得出這種網站的人，通常不會被聘用 XDDD
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.128.195.252
推 :可惡，想__1F 02/14 23:04
推 :台科大果然不一樣2F 02/14 23:05
推 :像行動裝置的介面3F 02/14 23:05
推 :標題?4F 02/14 23:05
推 :做這個簡潔 哪來油水5F 02/14 23:05
→ :依法行政的地方不會用6F 02/14 23:05
推 :放心要用也會花大錢做出不知道是什麼的東西7F 02/14 23:06
推 :安卓桌面的widget阿8F 02/14 23:06
推 :想和政府做生意好像不適要有創意 有才華 或是物美價廉9F 02/14 23:06
推 :本來可以作六週養活12個人 你現在六小時一個人 恩...10F 02/14 23:06
→ :設計成那樣. 還不如就直接開app就好了....11F 02/14 23:06
→ :顆顆 要招標發包 裡面門道這麼多 怎麼可能用12F 02/14 23:06
推 :老實說，你沒背景要標什麼案子啊13F 02/14 23:06
→ :總算脫離某種語言的限制了14F 02/14 23:07
→ :公家機關的網頁不是都發包的很精美嗎?15F 02/14 23:07
推 :好看16F 02/14 23:07
推 :我們的政府這麼有錢，你自己做是想餓死多少人XD17F 02/14 23:07
→ :官方網站有時還限定用IE勒 還要簡單好維修 這種只能GG18F 02/14 23:07
推 :沒有成立公司是不可能包到氣象局的案19F 02/14 23:08
→ :可惡個屁20F 02/14 23:08
推 :另外當作手機版的APP可能比較好21F 02/14 23:08
→ :官方網站這樣還可以啦 api寫好讓資料公開取得容易就好22F 02/14 23:09
→ :官方網站有很多「依法必須公告」的東西，以及WCAG P1規範。23F 02/14 23:10
推 :OP質感阿..... 不過...會被用嗎24F 02/14 23:11
推 :跟IOS內建的好像25F 02/14 23:11
推 :誰去提醒他中央氣象局不是weather live...26F 02/14 23:11
→ :光是要符合Section 508標準就足以扼殺掉這些華麗的設計....27F 02/14 23:11
→ :又不是天氣軟體28F 02/14 23:12
→ :漂亮有啥用 氣象局又不是只公布氣象29F 02/14 23:13
推 :這是什麼軟體做的?30F 02/14 23:13
推 :這種設計太多資訊沒被顯露.不太妥善吧...31F 02/14 23:14
推 :只能說政府只給特定標案商，有錢有才華也只是吃土去32F 02/14 23:15
→ :比較適合APP33F 02/14 23:15
推 :氣象網頁可以分簡易版和專業版，預設打開簡易版34F 02/14 23:16
推 :風向對漁民很重要好嗎 講得不重要一樣 = ="35F 02/14 23:16
推 :如果有仔細看, 右上角還有很多連結36F 02/14 23:17
→ :不是那些資訊不重要, 而是"首頁"不應該揭露這麼多訊息
→ :不是那些資訊不重要, 而是"首頁"不應該揭露這麼多訊息
Welcome to GOV.UK
![[圖]]()
GOV.UK - The new place to find government services and information replacing Directgov and Business Link - Simpler, clearer, faster ...
![[圖]](http://i.disp.cc/web/img5/_assets.digitalage-4e469785ca4cc8f8dd18d0627bc43d19.png)
→ :"首頁"就是該符合絕大多數用戶的需求, 揭露基本資訊39F 02/14 23:18
→ :同樣簡單乾淨明瞭～精美不需要太多著墨，資訊傳遞最重要40F 02/14 23:18
→ :我比較喜愛古早V5還是V4版本的氣象局網頁41F 02/14 23:19
→ :其他細節資訊或不太多人, 不常用的, 用其他方式導引42F 02/14 23:19
→ :到其他頁面去, 這其實很考驗使用者介面的設計
→ :到其他頁面去, 這其實很考驗使用者介面的設計
→ :事實上官員想的跟樓上完全相反 科科44F 02/14 23:20
→ :官員想的是, 我東西沒放出來, 被罵怎麼辦45F 02/14 23:21
→ :Section 508 講到需避免使用 CSS46F 02/14 23:22
推 :我常跟行家講，周董是我的偶像47F 02/14 23:22
→ :這樣就少了很多排版的效果48F 02/14 23:22
→ :接著所有的東西跟連結都塞在一頁, 根本難以找起49F 02/14 23:22
Yahoo Weather - Weather Forecasts | Maps | News
![[圖]]()
View the latest weather forecasts, maps, news and alerts on Yahoo! WeatherView the latest weather forecasts, maps, news and alerts on Yahoo! Weather. Find local weather forecasts for the USA and cities throughout the world.. Find local weather forecasts for the Canada and cities throughout the world ...
![[圖]](http://l.yimg.com/bt/api/res/1.2/81I5U991YW6EEaB2Cjd58g--/YXBwaWQ9eW5ld3M7cT04NTt3PTYwMA--/http://l.yimg.com/os/mit/media/m/social/images/social_default_logo-1481777.png){kind=logo}
推 :這不是Yahoo的氣象APP嗎..@@51F 02/14 23:23
→ :某些視障人士操作的設備根本支援Flash/CSS很低。52F 02/14 23:23
→ :官方網頁的設計文本重、華麗介面少不是沒道理的。
→ :官方網頁的設計文本重、華麗介面少不是沒道理的。
→ :新聞自己講自己的 等到真的用了這個 又一堆人一堆意見了54F 02/14 23:24
推 :有點像flex55F 02/14 23:27
→ :常看的網頁資料不都放到書籤或快速連結了 不會每次重找56F 02/14 23:28
推 :有點猛啊57F 02/14 23:29
推 :118 !!!58F 02/14 23:29
推 :自己出來做吧！59F 02/14 23:30
→ :一般人只要知道會不會下雨 幾度就好了 不懂那麼複雜幹嘛60F 02/14 23:31
推 :這是iOS 7的UI吧61F 02/14 23:32
推 :amaki內行62F 02/14 23:32
→ :呵呵 我還嫌CWB放出的資訊不夠多呢63F 02/14 23:33
推 :台灣很多網站真的做超爛 一堆資訊擠在一起難看死了64F 02/14 23:33
推 :90%是「非必要資訊」?? 自己看不懂 不會看 怪氣象局?65F 02/14 23:33
→ :跟國外比起來 我還覺得資訊少了點勒
→ :跟國外比起來 我還覺得資訊少了點勒
推 :90%是「非必要資訊」沒錯啊 90%的資訊一般民眾不會每67F 02/14 23:38
→ :天看
→ :天看
推 :第一眼看不到必要資訊就有問題了 不要寵壞爛政府體系69F 02/14 23:38
→ :而且照你所言 1.第一眼看不到一般民眾需要的資料
→ :而且照你所言 1.第一眼看不到一般民眾需要的資料
→ :很多資訊我會看啊 可是1~2個月看1次 妳都集中在首頁沒71F 02/14 23:39
→ :意義
→ :意義
→ :2.想要詳細資訊的民眾 資訊又比國外少 這不就是爛透了73F 02/14 23:40
推 :這跟Mac OS10.9的桌布根本一樣！只是糊化而已74F 02/14 23:40
推 :不錯 有點像手機的氣象app75F 02/14 23:42
推 :颱風地震才會去氣象局網站 平常看手機更簡潔76F 02/14 23:45
推 :滿好看的.可惜這就不像公家的調性了~~77F 02/14 23:51
推 :那照他設計 首頁就只放台北市嗎? 其他縣市民都不是人這樣?78F 02/14 23:52
→ :現在重要的警特報早設計成一點進首頁就秀出來給你看
→ :現在重要的警特報早設計成一點進首頁就秀出來給你看
→ :哇尻!80F 02/15 00:00
→ :今天有看到..不過氣象局主機撐得住嗎??81F 02/15 00:01
Taylor Hu - 中央氣象局 - 網站設計概念稿
![[圖]]()
試著在一個晚上完成某網站的重新設計，作為練習設計速度的挑戰；我挑選了中央氣象局來練習，因為每天習慣先看氣象決定穿搭的衣物，手機上的功能較為陽春，因此還是會上氣象局網站看當日的氣候。 ...
![[圖]](http://static.squarespace.com/static/529e5d5de4b074789c8cf3a9/52fd46aae4b01646a34c41c0/52fd4fd7e4b0c0844a0eb9cc/?format=500w)
推 :一人六小時做出這樣的成績 你要其他人怎混啊XD83F 02/15 00:11
→ :泣的這新聞真有ettoday的風格84F 02/15 00:15
推 :雖然我覺得質感好，但我去氣象局反而是想看深入點的資85F 02/15 00:46
→ :訊，用這樣的介面純顯示天氣可行，進階資訊該如何呈現
→ :訊，用這樣的介面純顯示天氣可行，進階資訊該如何呈現
→ :回popgsct：使用瀏覽器開啟這頁時，可使用現有的API來偵測87F 02/15 00:53
→ :所在地 這是他網頁有提到的 而不只顯示為台北市
→ :所在地 這是他網頁有提到的 而不只顯示為台北市
推 :中華電信的浮動ip永遠是台北市...89F 02/15 00:55
→ :沒想到一個練習作可以引發這麼多的討論XD90F 02/15 00:56
推 :那又是另一個問題 但基本上它的首頁並非只顯示台北市91F 02/15 00:56
→ :所以說，做設計真的很難，看上頭的評論跟意見就略知1292F 02/15 00:56
推 :政府網站 日本搞得不錯 頁面分類很清楚 中國那種就一堆垃圾93F 02/15 00:56
→ :全部硬擠在一起. 台灣以後外包會不會愈來愈中國化？
→ :全部硬擠在一起. 台灣以後外包會不會愈來愈中國化？
→ :你想太多了 台灣的網頁設計一直都是這麼弱後的95F 02/15 00:58
→ :政府機關的網站你很少看到精簡的東西 大部份都是套版系統
→ :內容幾乎都是用來交差用的，根本不管使用者考量
→ :日本則是天性＋文化素養，就算是官也略知一二
→ :政府機關的網站你很少看到精簡的東西 大部份都是套版系統
→ :內容幾乎都是用來交差用的，根本不管使用者考量
→ :日本則是天性＋文化素養，就算是官也略知一二
推 :本來就一堆垃圾擺在首頁，簡約 才是最美99F 02/15 01:03
推 :看到了 不過這種過於精簡的設計並不適合套在CWB這類的網站100F 02/15 01:04
→ :做為一個觀測各類資訊的公家網站目的不該是追求設計美感
→ :做為一個觀測各類資訊的公家網站目的不該是追求設計美感
電子政府の総合窓口e-Gov［イーガブ］
日本政府の情報ポータルサイト。法令情報検索、行政手続案内、パブリックコメント情報案内、組織制度の概要情報案内、行政文書ファイル管理簿等の情報提供サービス及び電子申請受付サービスを提供。 ...
日本政府の情報ポータルサイト。法令情報検索、行政手続案内、パブリックコメント情報案内、組織制度の概要情報案内、行政文書ファイル管理簿等の情報提供サービス及び電子申請受付サービスを提供。 ...
→ :設計這種東西也是見仁見智 你認為的bad design105F 02/15 01:10
→ :對他們而言是 good，可以行得通的
→ :所以說，設計真的很難
→ :另外就是..會用這類網站的大部分公務員居多
→ :功能比較重要，視覺排版可以其次
→ :就算畫面整個大便色也無所謂
→ :藍天＋綠地＋大字級
→ :對他們而言是 good，可以行得通的
→ :所以說，設計真的很難
→ :另外就是..會用這類網站的大部分公務員居多
→ :功能比較重要，視覺排版可以其次
→ :就算畫面整個大便色也無所謂
→ :藍天＋綠地＋大字級
推 :這不就像是把手機的APP放到電腦上而已112F 02/15 01:28
噓 :一堆酸民 關手機app屁事 那種風格十年前就出現了 當時流行113F 02/15 01:29
推 :主管不會喜歡簡潔風格114F 02/15 01:30
→ :於韓國、中國 再來是才是美國改良的風格 有在玩網頁的都知115F 02/15 01:30
推 :使用瀏覽器開啟這頁時，可使用現有的API來偵測所在地116F 02/15 01:30
→ :道 十年前一堆人在論壇找韓國網站範本 韓國(像)矢量素材117F 02/15 01:32
推 :還蠻像Hㄒㄈ的風格...............118F 02/15 01:33
推 :呵呵 看看日本 想想自己 再看看中國 質感好壞似乎和119F 02/15 01:33
→ :一堆人在抓韓國FLASH網頁模版來套用 連時間順序都搞混還酸~120F 02/15 01:34
→ :政府有多腐敗有關係喔~121F 02/15 01:34
→ :韓國10年前很流行矢量圖網站 後來改成大量的FLASH網站 就是122F 02/15 01:37
→ :就是ios4系統以後的風格 而美國網頁設計師則是擅長全flash
→ :網站 像比較有名的就是www.2advanced.com/ 人家十年前就是
→ :這個水準的時候 ios4, android app 還不知道在哪洗洗睡勒
推 :我已經離開設計界7年了 不然可以推薦更多的國內外FLASH網站
→ :分享上來 每個都嘛海放現在的手機app設計界面...
→ : 糖糖OEC 這種CSS網站也是電爆當代的app風格啊
→ :就是ios4系統以後的風格 而美國網頁設計師則是擅長全flash
→ :網站 像比較有名的就是www.2advanced.com/ 人家十年前就是
→ :這個水準的時候 ios4, android app 還不知道在哪洗洗睡勒
推 :我已經離開設計界7年了 不然可以推薦更多的國內外FLASH網站
→ :分享上來 每個都嘛海放現在的手機app設計界面...
→ : 糖糖OEC 這種CSS網站也是電爆當代的app風格啊
推 :不錯呀推推129F 02/15 04:41
--
(￣︶￣)ｂ BruceX, lunaX19, hippo916 說讚！ (￣︿￣)ｐ sharon0211 說瞎！
4樓 時間: 2014-02-15 02:01:59 (台灣)
→
02-15 02:01 TW
不算高手，不過簡潔有力，使用者經驗是一門很大的學問 過多的資訊反而沒辦法找到真正需要的訊息；重點是如何 整理
回列表(←)
分享