這是 unfold group 展開集合點亮台灣 — 蔡英文・陳建仁總統候選人競選官網所制訂的網站設計規範。我們將以往製作台灣百大商業網站的經驗與流程,透過一系列的討論與設計,轉換為適用於台灣選舉網站的設計規範。

設計原則

行動裝置體驗

任何元件都必須符合 Responsive Web Design 的需要,在不同裝置上設計時,除了需在乎設計面積的大小以外,也要將使用該裝置的情境考慮進去。

高解析度

所有的元件與圖形盡量使用 HTML/CSS 或 SVG 打造,特殊字型使用 Webfont 技術,讓任何解析度下,網站都能夠以最高解析呈現。

簡單易用

UI 元件必須使用最通用、簡易的方式來設計,元件之間的距離必須能夠讓使用者清楚辨別關連性,UI 外觀必須能夠清楚知道點擊後是一個動作或是連結。在良好設計下,盡可能的增加點擊的面積。

規範是活的

規範本身能讓所有設計師方便取用共同的色彩、元件,以及程式碼。但針對不同的情境允許自由修正,或是產生新的設計規範貢獻回來。

色彩規範

取自 永真急制 workshop 設計之視覺識別顏色規範,並改作為網站需要的配色。

主色調

使用在明亮、主要裝飾以及主要動作按鈕與連結。

#88C8AB
#50B584
#89C693
#55B36C
#E7E879
#A7CD6B

深色調

使用在需要高對比的環境區塊與背景。

#0D353F
#0B2229
#817E93
#433F57
#918871
#464237

醒目、強調色調

使用在警告、錯誤訊息以及重大決策的按鈕與連結。

#E65E50
#CB5246
#FAC339
#E1AF31
#4ABEB2
#3CA59A
#A079B4
#7E5F8E

矩形漸層

使用在讀取圖片前的暫代區塊、或各種標頭

圓形漸層

若文字疊在圖片上方,則使用此圓形漸層作為凸顯、區隔文字之用

網站圖示

代表這次系列網站的圖示(檔案下載

競選官網
小額捐款
台灣美樂地
在地希望

非等比台灣縣市圖示

可在同等的區塊大小內平均、清楚的顯示縣市圖示 (檔案下載

  • 台灣
  • 基隆市
  • 台北市
  • 新北市
  • 桃園市
  • 新竹市
  • 新竹縣
  • 苗栗縣
  • 台中市
  • 南投縣
  • 彰化縣
  • 雲林縣
  • 嘉義縣
  • 嘉義市
  • 台南市
  • 高雄市
  • 屏東縣
  • 台東縣
  • 花蓮縣
  • 宜蘭縣
  • 澎湖縣

基礎使用者介面

文章列表

圖片讀取前、後

左右側設計

全版面設計

重點區塊

文章重點區塊(圖片讀取前、圖片讀取後)

競選官網首頁重點區塊

圖表

包含進場畫面的圖表,使用向量方式生成,支持跨裝置瀏覽,由李慕約公司設計、GPL v2 開源釋出。(Github 原始碼

原力佈局 (Force Layout)

原力佈局 (Force Layout),適合拿來做為「人口統計分佈」的圖表,背後使用撞擊測試演算法,來模擬粒子互動的物理限制

資料來源:客委會 客語使用情況調查101-102

甜甜圈圖

有進場畫面的甜甜圈圖 (Donut Chart),適合做比例的比較

直條圖

有進場畫面的直條圖 (Bar Chart),適合做跨項目的比較

折線圖

有進場畫面的折線圖 (Line Chart),適合做跨時間的比較


有任何設計上的問題?

如果對這份設計規範有任何意見,請聯絡 unfold group 展開集合

© 2016 蔡英文陳建仁競選辦公室
本文件內容以創用 CC 姓名標示-非商業性-相同方式分享 4.0 國際 授權條款釋出

返回頂部