forked from maylogger/design.iing.tw
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
15 lines (15 loc) · 20.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html><html class="no-js" lang="zh-TW"><head><meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"><meta charset="utf-8"><meta content="width=device-width, initial-scale=1" name="viewport"><link href="/images/favicon.png" rel="icon" size="32x32"><link href="/images/iostouchicon.png" rel="apple-touch-icon" sizes="152×152"><link href="/stylesheets/all.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/vendor/icomoon/style.css" media="screen" rel="stylesheet" type="text/css" /><script src="/vendor/modernizr-custom.js" type="text/javascript"></script><!--[if IE]><link href="/stylesheets/ie.css" media="screen" rel="stylesheet" type="text/css" /><![endif]--><!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script><![endif]--><title>點亮台灣・設計規範 Web Design Guideline</title><meta content="點亮台灣 設計規範 Web Design Guideline 蔡英文 陳建仁 總統 副總統 選舉" name="keywords"><meta content="這是點亮台灣 — 蔡英文・陳建仁總統候選人競選官網所制訂的網站設計規範。我們將以往製作台灣百大商業網站的經驗與流程，透過一系列的討論與設計，轉換為適用於台灣選舉網站的設計規範。" name="description"><meta content="點亮台灣・設計規範 Web Design Guideline" property="og:title"><meta content="點亮台灣・設計規範 Web Design Guideline" property="og:site_name"><meta content="http://design.iing.tw" property="og:url"><meta content="http://design.iing.tw/images/og-image.png" property="og:image"><meta content="這是點亮台灣 — 蔡英文・陳建仁總統候選人競選官網所制訂的網站設計規範。我們將以往製作台灣百大商業網站的經驗與流程，透過一系列的討論與設計，轉換為適用於台灣選舉網站的設計規範。" property="og:description"><meta content="website" property="og:type"><meta content="612130717" property="fb:admins"></head><body class="off-canvas"><div class="page"><div class="header"><div class="header-top"><h1 class="logo"><a href="#">點亮台灣設計規範 Web Design Guideline</a></h1><button class="btn menu-btn">目錄</button></div><div class="menu off-canvas-menu scrollable" id="scrollable"><button class="close-btn"><div class="close-btn-line"></div></button><div class="menu-title">目錄</div><ul class="menu-list"><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#guideline-summary">規範簡介</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#principle">設計原則</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#color-guideline">色彩規範</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#logo">標誌與文字排列</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#website-icon">網站圖示</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#icon">台灣縣市圖示</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#basic-ui">基礎使用者介面</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#article-list">文章列表</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#hero">重點區塊</a></li><li class="menu-list-item"><a class="menu-list-item-title smooth-scroll-link" href="#chart">圖表</a></li></ul></div><div class="off-canvas-mask"></div></div><div class="guideline-cover"></div><div class="content"><div class="demo-block" id="guideline-summary"><p class="demo-block-text">這是<a href="http://iing.tw" target="_blank">點亮台灣 — 蔡英文・陳建仁總統候選人競選官網</a>所制訂的網站設計規範。我們將以往製作台灣百大商業網站的經驗與流程，透過一系列的討論與設計，轉換為適用於台灣選舉網站的設計規範。<span class="share-btns"><a class="share-btn" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdesign.iing.tw" target="_blank"><span class="share-btn-icon icon-facebook"></span>Share</a><a class="share-btn" href="https://twitter.com/intent/tweet?button_hashtag=LightUpTaiwan&text=點亮台灣・設計規範 Web Design Guideline&url=http%3A%2F%2Fdesign.iing.tw" target="_blank"><span class="share-btn-icon icon-twitter"></span>Tweet</a></span></p></div><div class="demo-block" id="principle"><h2 class="demo-block-title">設計原則</h2><div class="grid grid_1-2-2"><div class="grid-item"><h3 class="demo-block-subtitle" id="mobile-experience">行動裝置體驗</h3><p class="demo-block-text">任何元件都必須符合 Responsive Web Design 的需要，在不同裝置上設計時，除了需在乎設計面積的大小以外，也要將使用該裝置的情境考慮進去。</p></div><div class="grid-item"><h3 class="demo-block-subtitle" id="high-dpi">高解析度</h3><p class="demo-block-text">所有的元件與圖形盡量使用 HTML/CSS 或 SVG 打造，特殊字型使用 Webfont 技術，讓任何解析度下，網站都能夠以最高解析呈現。</p></div><div class="grid-item"><h3 class="demo-block-subtitle" id="simple-is-best">簡單易用</h3><p class="demo-block-text">UI 元件必須使用最通用、簡易的方式來設計，元件之間的距離必須能夠讓使用者清楚辨別關連性，UI 外觀必須能夠清楚知道點擊後是一個動作或是連結。在良好設計下，盡可能的增加點擊的面積。</p></div><div class="grid-item"><h3 class="demo-block-subtitle" id="guideline-is-flexible">規範是活的</h3><p class="demo-block-text">規範本身能讓所有設計師方便取用共同的色彩、元件，以及程式碼。但針對不同的情境允許自由修正，或是產生新的設計規範貢獻回來。</p></div></div></div><div class="demo-block" id="color-guideline"><h2 class="demo-block-title">色彩規範</h2><p class="demo-block-text">取自 <a href="https://www.facebook.com/somekidding/photos/pb.114982431900107.-2207520000.1452277153./901366819928327/" target="_blank">永真急制 workshop 設計之視覺識別顏色規範</a>，並改作為網站需要的配色。</p><h3 class="demo-block-subtitle" id="main-color">主色調</h3><p class="demo-block-text">使用在明亮、主要裝飾以及主要動作按鈕與連結。</p><div class="demo-block-content"><div class="grid grid_3-3-3"><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #88C8AB;"><div class="color-code">#88C8AB</div></div><div class="color-item-bottom" style="background-color: #50B584;"><div class="color-code">#50B584</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #89C693;"><div class="color-code">#89C693</div></div><div class="color-item-bottom" style="background-color: #55B36C;"><div class="color-code">#55B36C</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #E7E879;"><div class="color-code">#E7E879</div></div><div class="color-item-bottom" style="background-color: #A7CD6B;"><div class="color-code">#A7CD6B</div></div></div></div></div></div><h3 class="demo-block-subtitle" id="dark-color">深色調</h3><p class="demo-block-text">使用在需要高對比的環境區塊與背景。</p><div class="demo-block-content"><div class="grid grid_3-3-3"><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #0D353F;"><div class="color-code">#0D353F</div></div><div class="color-item-bottom" style="background-color: #0B2229;"><div class="color-code">#0B2229</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #817E93;"><div class="color-code">#817E93</div></div><div class="color-item-bottom" style="background-color: #433F57;"><div class="color-code">#433F57</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #918871;"><div class="color-code">#918871</div></div><div class="color-item-bottom" style="background-color: #464237;"><div class="color-code">#464237</div></div></div></div></div></div><h3 class="demo-block-subtitle" id="strong-color">醒目、強調色調</h3><p class="demo-block-text">使用在警告、錯誤訊息以及重大決策的按鈕與連結。</p><div class="demo-block-content"><div class="grid grid_2-4-4"><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #E65E50;"><div class="color-code">#E65E50</div></div><div class="color-item-bottom" style="background-color: #CB5246;"><div class="color-code">#CB5246</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #FAC339;"><div class="color-code">#FAC339</div></div><div class="color-item-bottom" style="background-color: #E1AF31;"><div class="color-code">#E1AF31</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #4ABEB2;"><div class="color-code">#4ABEB2</div></div><div class="color-item-bottom" style="background-color: #3CA59A;"><div class="color-code">#3CA59A</div></div></div></div><div class="grid-item"><div class="color-item"><div class="color-item-top" style="background-color: #A079B4;"><div class="color-code">#A079B4</div></div><div class="color-item-bottom" style="background-color: #7E5F8E;"><div class="color-code">#7E5F8E</div></div></div></div></div></div><h3 class="demo-block-subtitle" id="rectangle-gradient">矩形漸層</h3><p class="demo-block-text">使用在讀取圖片前的暫代區塊、或各種標頭</p><div class="rectangle-gradient"></div><h3 class="demo-block-subtitle" id="circle-gradient">圓形漸層</h3><p class="demo-block-text">若文字疊在圖片上方，則使用此圓形漸層作為凸顯、區隔文字之用</p><div class="demo-block-example"><img alt="" src="/images/blur.png"></div></div><div class="demo-block" id="logo"><h2 class="demo-block-title">標誌與文字排列</h2><p class="demo-block-text">取自 <a href="https://www.facebook.com/somekidding/photos/pb.114982431900107.-2207520000.1452277153./901366823261660/" target="_blank">永真急制 workshop 設計之視覺識別組合規範</a>，並改作為網站需要的各種標誌與文字排列，讓不同情境使用時皆能取得一致的設計觀感。（<a href="/download/iing-logo.zip" download="download">檔案下載</a>）</p><div class="demo-block-example"><div class="demo-logo"><img src="/images/logo/logo-zh-mobile.svg"></div><div class="demo-logo"><img src="/images/logo/logo-en-mobile.svg"></div><div class="demo-logo"><img src="/images/logo/logo-es-mobile.svg"></div><div class="demo-logo"><img src="/images/logo/logo-jp-mobile.svg"></div><div class="demo-logo"><img src="/images/logo/logo-zh.svg"></div><div class="demo-logo"><img src="/images/logo/logo-en.svg"></div><div class="demo-logo"><img src="/images/logo/logo-es.svg"></div><div class="demo-logo"><img src="/images/logo/logo-jp.svg"></div><div class="demo-logo"><img src="/images/logo/vlogo.svg"></div><div class="demo-logo"><img src="/images/logo/sign_logo.svg"></div></div></div><div class="demo-block" id="website-icon"><h2 class="demo-block-title">網站圖示</h2><p class="demo-block-text">代表這次系列網站的圖示（<a href="/download/website-icon.zip" download="download">檔案下載</a>）</p><div class="demo-block-example"><div class="grid grid_2-4-4"><div class="grid-item"><div class="site-logo site-logo_main"></div><div class="site-name">競選官網</div></div><div class="grid-item"><div class="site-logo site-logo_donate"></div><div class="site-name">小額捐款</div></div><div class="grid-item"><div class="site-logo site-logo_melody"></div><div class="site-name">台灣美樂地</div></div><div class="grid-item"><div class="site-logo site-logo_hope"></div><div class="site-name">在地希望</div></div></div></div></div><div class="demo-block" id="icon"><h2 class="demo-block-title">非等比台灣縣市圖示</h2><p class="demo-block-text">可在同等的區塊大小內平均、清楚的顯示縣市圖示 （<a href="/download/taiwan-map-icon.zip" download="download">檔案下載</a>）</p><div class="demo-block-example taiwan-icon"><ul class="demo-icon-list"><li><span class="icon-map-taiwan"></span><span class="icon-name">台灣</span></li><li><span class="icon-map-keelungcity"></span><span class="icon-name">基隆市</span></li><li><span class="icon-map-taipei"></span><span class="icon-name">台北市</span></li><li><span class="icon-map-newtaipeicity"></span><span class="icon-name">新北市</span></li><li><span class="icon-map-taoyuan"></span><span class="icon-name">桃園市</span></li><li><span class="icon-map-hsinchucity"></span><span class="icon-name">新竹市</span></li><li><span class="icon-map-hsinchu"></span><span class="icon-name">新竹縣</span></li><li><span class="icon-map-miaoli"></span><span class="icon-name">苗栗縣</span></li><li><span class="icon-map-taichung"></span><span class="icon-name">台中市</span></li><li><span class="icon-map-nantou"></span><span class="icon-name">南投縣</span></li><li><span class="icon-map-changhua"></span><span class="icon-name">彰化縣</span></li><li><span class="icon-map-yunlin"></span><span class="icon-name">雲林縣</span></li><li><span class="icon-map-chiayi"></span><span class="icon-name">嘉義縣</span></li><li><span class="icon-map-chiayicity"></span><span class="icon-name">嘉義市</span></li><li><span class="icon-map-tainan"></span><span class="icon-name">台南市</span></li><li><span class="icon-map-kaohsiung"></span><span class="icon-name">高雄市</span></li><li><span class="icon-map-pingtung"></span><span class="icon-name">屏東縣</span></li><li><span class="icon-map-taitung"></span><span class="icon-name">台東縣</span></li><li><span class="icon-map-hualien"></span><span class="icon-name">花蓮縣</span></li><li><span class="icon-map-yilan"></span><span class="icon-name">宜蘭縣</span></li><li><span class="icon-map-penghu"></span><span class="icon-name">澎湖縣</span></li></ul></div></div><div class="demo-block" id="basic-ui"><h2 class="demo-block-title">基礎使用者介面</h2><div class="demo-block-example"><div class="grid grid_1-4-4"><div class="grid-item"><button class="btn">一般按鈕</button></div><div class="grid-item"><button class="btn btn_primary">閱讀更多</button></div><div class="grid-item"><button class="btn btn_danger" onclick="alert('叫你不要按還按？我喜歡')">不要按</button></div><div class="grid-item"><button class="btn is-disabled">暫停開放</button></div></div><div class="grid grid_1-2-2"><div class="grid-item"><input class="form-control" placeholder="請輸入文字" type="text"></div><div class="grid-item"><select class="form-select"><option disabled="disabled" selected="selected" value="">請選擇你的身份</option><option value="Taiwan NO.1">Taiwan NO.1</option><option value="孤獨的踩雷家">孤獨的踩雷家</option><option value="布丁三姊弟">布丁三姊弟</option><option value="淡水阿嬤">淡水阿嬤</option><option value="其他...">其他...</option></select></div></div><div class="grid"><div class="grid-item"><div class="pagination"><span class="pagination-item first"><a href="###">«</a></span><span class="pagination-item prev"><a href="###" rel="prev"> ‹</a></span><span class="pagination-item"><a href="###" rel="prev"> 1</a></span><span class="pagination-item current">2</span><span class="pagination-item"><a href="###" rel="next"> 3</a></span><span class="pagination-item gap">...</span><span class="pagination-item next"><a href="###" rel="next"> ›</a></span><span class="pagination-item last"><a href="###"> »</a></span></div></div></div></div></div><div class="demo-block" id="article-list"><h2 class="demo-block-title">文章列表</h2><h3 class="demo-block-subtitle">圖片讀取前、後</h3><div class="demo-block-example"><img src="/images/loading.png"><img src="/images/right-article.png"></div><h3 class="demo-block-subtitle">左右側設計</h3><div class="demo-block-example"><img src="/images/left-article.png"><img src="/images/right-article.png"></div><h3 class="demo-block-subtitle">全版面設計</h3><div class="demo-block-example"><img src="/images/middle-article.png"></div></div><div class="demo-block" id="hero"><h2 class="demo-block-title">重點區塊</h2><h3 class="demo-block-subtitle">文章重點區塊（圖片讀取前、圖片讀取後）</h3><div class="demo-block-example"><img src="/images/article-hero-loading.png"><img src="/images/article-hero.png"></div><h3 class="demo-block-subtitle">競選官網首頁重點區塊</h3><div class="demo-block-example"><img src="/images/flagblock.png"></div></div><div class="demo-block" id="chart"><h2 class="demo-block-title">圖表</h2><p class="demo-block-text">包含進場畫面的圖表，使用向量方式生成，支持跨裝置瀏覽，由<a href="http://muyueh.com/" target="_blank">李慕約公司</a>設計、GPL v2 開源釋出。（<a href="https://github.com/sheethub/2016electionchart" target="_blank">Github 原始碼</a>）</p><h3 class="demo-block-subtitle">原力佈局 (Force Layout)</h3><p class="demo-block-text">原力佈局 (Force Layout)，適合拿來做為「人口統計分佈」的圖表，背後使用撞擊測試演算法，來模擬粒子互動的物理限制</p><div class="demo-block-example"><div class="chart-force"></div></div><p class="demo-block-example-tip" style="text-align: center;"><small>資料來源：<a href="http://www.hakka.gov.tw/np.asp?ctNode=1893" target="_blank">客委會 客語使用情況調查101-102</a></small></p><h3 class="demo-block-subtitle">甜甜圈圖</h3><p class="demo-block-text">有進場畫面的甜甜圈圖 (Donut Chart)，適合做比例的比較</p><div class="demo-block-example"><div class="grid grid_3-3-3"><div class="grid-item"><div id="donut1" style=""></div></div><div class="grid-item"><div id="donut2" style=""></div></div><div class="grid-item"><div id="donut3" style=""></div></div></div></div><h3 class="demo-block-subtitle">直條圖</h3><p class="demo-block-text">有進場畫面的直條圖 (Bar Chart)，適合做跨項目的比較</p><div class="demo-block-example"><div class="chart-bar"></div></div><h3 class="demo-block-subtitle">折線圖</h3><p class="demo-block-text">有進場畫面的折線圖 (Line Chart)，適合做跨時間的比較</p><div class="demo-block-example"><div class="chart-line"></div></div></div><div class="demo-block"><hr><h3 class="demo-block-subtitle">有任何設計上的問題？</h3><p class="demo-block-text">如果對這份設計規範有任何意見，請聯絡 <a href="http://m.me/evenwu/" target="_blank">Even Wu</a></p><p class="demo-block-text">© 2016 蔡英文陳建仁競選辦公室<br>本設計規範以<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh_TW" target="_blank">創用 CC by-nc-sa 授權條款</a>釋出</p></div></div></div><a class="back-to-top smooth-scroll-link" href="#top">回到頂部</a><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="/vendor/sticky.min.js" type="text/javascript"></script>
<script src="/vendor/smooth-scroll.js" type="text/javascript"></script>
<script src="/vendor/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="/vendor/d3.min.js" type="text/javascript"></script>
<script src="/vendor/colorbrewer.v1.min.js" type="text/javascript"></script>
<script src="/vendor/prelude-browser-min.js" type="text/javascript"></script>
<script src="/javascripts/chart.js" type="text/javascript"></script>
<script src="/javascripts/all.js" type="text/javascript"></script><script type="text/javascript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-63343044-7', 'auto');
ga('send', 'pageview');</script></body></html>