NCTU – Computer Vision Research Center

1. 主視覺:方。

  • 由方形的監視螢幕來監控
  • 由方塊構成的電腦分析
  • 以方格來辨識其中模糊的資訊
  • 將格子像素變小亦即代表解析度的提升。

2. 色調:調整過的紅藍綠

  • 紅藍綠三原色乃光的三原色,無論是視覺或是螢幕顯示都可以由三原色來解析,是最符合電腦視覺的三個顏色,微調後使之成為網站設計時的基本顏色。
  • 暗藍色暗喻未知的背景,並利用輔色的紅色框框來顯示掃描、偵測的功能。
  • 亮藍色代表已知的事物,代表研發中心所發展的技術以及內容,都爐火純青且公開透明,歡迎各廠商來洽談。

3. 整體網站編排:

  • 將導覽列設計在下方,有如在操作 Windows 作業系統,左邊的直欄就是開始工作列。
  • 整個中心網站,就像是一部電腦。從研發中心開始,將為您帶來最先進的科技之意。
  • 另外,在版面安排的時候,會考量各區塊的重量配置,希望儘量達到視覺上的平衡,並且期望在各螢幕大小上都有最佳的瀏覽體驗。

Go to site

安心政府 i-Gov

很幸運的跟幾個朋友合作,參加了一秒搞懂政府網站創意競賽,並且在最後獲得了獎項。

安心政府 i-Gov 為一整合多方政府單位資訊的入口網站,網站內容以簡單的介面設計與直覺的圖示標明,讓民眾方便快速操作,滿足日常的使用需求。現今,網路空間已經成為生活資訊的取得來源,然而要從海量網頁與超連結中找到明確的資訊,其實非常困難。而民眾生活面臨的大小事,又與政府單位息息相關,所以政府單位更需要單一整合入口,便於民眾瀏覽與操作。

本網站以使用者角度出發,思考、設計出符合使用趨勢與現代風格的入口網站。

Go to site

JapanEx 制縣傳說

第一次是在這篇IG貼文上看到,沒聽過的人可以參考這個 Android App,無奈我用的是iPhone不能玩,於是心血來潮用SVG自己做一個。先在Illustrator把日本的圖形畫好之後,每個形狀會帶入圖層名稱作為其ID的標籤,於是就可以在HTML裡被使用。多國語言有搭配Vue.js的Template做樣板,動態載入翻譯文字。

至於計分數的方法,考量到分享的用途,又不想大費周章使用資料庫,於是就索性全部塞在網址裡了XD 缺點就是網址變太長,有點醜就是了。

玩法:

  1. 按一下曾到訪過的地區,選擇符合的選項,朝向把47個都道府縣都收集滿的等級235吧!
  2. 可以分享到Facebook上,或者自行保存下來,還可以增加客製化的簽名檔喔。

Go to page

 

2018.05.30 更新:

  1. 縣名更正
  2. 所屬地區修正

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。

Go to page