Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

候選人頁面各縣市的呈現 #31

Closed
thewayiam opened this issue Nov 11, 2014 · 48 comments
Closed

候選人頁面各縣市的呈現 #31

thewayiam opened this issue Nov 11, 2014 · 48 comments
Labels
UI / UX

Comments

@thewayiam
Copy link
Contributor

目前呈現：
10672437_814052971969324_4266259596812212122_n

網友回饋 可改進方式

想要更改此頁面呈現的話，html 檔
@s890081tonyhsu
Copy link
Contributor

附圖是調整參數後用span6 + margin:0.6410255%;調整結果
（這數值是Bootstrap2給的，Responsive會在width:960~1200處變成單邊排列）
default

@s890081tonyhsu
Copy link
Contributor

第二種呈現方式（PC和手機不同）
default
如果這方案可行，請給我參數去補"鄉鎮數"的部份
例如：有多少鄉鎮、有多少議員之類的資訊

@mireille09
Copy link

這是用PS做的候選人頁面
2014 concil

@thewayiam
Copy link
Contributor Author

@mireille09 的應該是議員席次
下方是各區候選人人數：

county constituency district count
宜蘭縣 1 宜蘭 14
宜蘭縣 2 頭城 4
宜蘭縣 3 礁溪 4
宜蘭縣 4 員山 5
宜蘭縣 5 壯圍 3
宜蘭縣 6 羅東 6
宜蘭縣 7 五結 4
宜蘭縣 8 冬山 7
宜蘭縣 9 三星 2
宜蘭縣 10 蘇澳 6
宜蘭縣 11 山地原住民 4
宜蘭縣 12 山地原住民 2
宜蘭縣 13 平地原住民 3
彰化縣 1 彰化市、花壇鄉、芬園鄉 23
彰化縣 2 鹿港鎮、福興鄉、秀水鄉 10
彰化縣 3 伸港鄉、線西鄉、和美鎮 9
彰化縣 4 大村鄉、員林鎮、永靖鄉 14
彰化縣 5 埔鹽鄉、溪湖鎮、埔心鄉 8
彰化縣 6 社頭鄉、田中鎮、二水鄉 7
彰化縣 7 田尾鄉、埤頭鄉、北斗鎮、溪州鄉 7
彰化縣 8 芳苑鄉、二林鎮、大城鄉、竹塘鄉 8
彰化縣 9 居住彰化縣各鄉鎮市之平地原住民 3
新北市 1 石門區、三芝區、淡水區、八里區 6
新北市 2 林口區、五股區、泰山區、新莊區 13
新北市 3 蘆洲區、三重區 19
新北市 4 板橋區 16
新北市 5 中和區 9
新北市 6 永和區 7
新北市 7 樹林區、鶯歌區、土城區、三峽區 21
新北市 8 新店區、深坑區、石碇區、坪林區、烏來區 8
新北市 9 平溪區、瑞芳區、雙溪區、貢寮區 6
新北市 10 金山區、萬里區、汐止區 6
新北市 11 平地原住民 6
新北市 12 山地原住民 3
新竹市 1 東區 23
新竹市 2 南區 9
新竹市 3 西區 5
新竹市 4 北區 14
新竹市 5 香山區 9
新竹市 6 居住新竹市之平地原民 3
桃園市 1 桃園市 25
桃園市 2 龜山鄉 7
桃園市 3 八德市 14
桃園市 4 蘆竹鄉 8
桃園市 5 大園鄉 3
桃園市 6 大溪復興 10
桃園市 7 中壢市 22
桃園市 8 平鎮市 19
桃園市 9 楊梅市 8
桃園市 10 龍潭鄉 9
桃園市 11 新屋鄉 2
桃園市 12 觀音鄉 4
桃園市 13 平地原住民 8
桃園市 14 山地原住民 4
臺中市 1 大甲區、大安區、外埔區 5
臺中市 2 清水區、梧棲區、沙鹿區 9
臺中市 3 龍井區、大肚區、烏日區 7
臺中市 4 后里區、豐原區 7
臺中市 5 神岡區、大雅區、潭子區 9
臺中市 6 西屯區 8
臺中市 7 南屯區 9
臺中市 8 北屯區 8
臺中市 9 北區 6
臺中市 10 中區、西區 6
臺中市 11 東區、南區 9
臺中市 12 太平區 7
臺中市 13 大里區、霧峰區 12
臺中市 14 東勢區、石岡區、新社區、和平區 3
臺中市 15 平地原住民 6
臺中市 16 山地原住民 2
臺北市 1 北投區、士林區 21
臺北市 2 內湖區、南港區 14
臺北市 3 松山區、信義區 17
臺北市 4 中山區、大同區 14
臺北市 5 中正區、萬華區 15
臺北市 6 大安區、文山區 22
臺北市 7 平地原住民 2
臺北市 8 山地原住民 3
臺南市 1 後壁、白河、東山區 3
臺南市 2 鹽水、新營、柳營區 6
臺南市 3 北門、學甲、將軍區 3
臺南市 4 下營、六甲、麻豆、官田區 5
臺南市 5 七股、佳里、西港區 5
臺南市 6 善化、安定區 3
臺南市 7 大內、山上、新化區 3
臺南市 8 楠西、南化、玉井、左鎮區 2
臺南市 9 新市、永康區 11
臺南市 10 安南區 9
臺南市 11 北區 6
臺南市 12 中西區 2
臺南市 13 安平區 2
臺南市 14 東區 9
臺南市 15 南區 6
臺南市 16 仁德、歸仁、關廟、龍崎區 7
臺南市 17 平地原住民 3
臺南市 18 山地原住民 2
花蓮縣 1 花蓮市 13
花蓮縣 2 新城鄉、秀林鄉 2
花蓮縣 3 吉安鄉、壽豐鄉、鳳林鎮、光復鄉、豐濱鄉、萬榮鄉 14
花蓮縣 4 玉里鎮、瑞穗鄉、富里鄉、卓溪鄉 6
花蓮縣 5 【花蓮市、吉安鄉、新城鄉、秀林鄉】平地原住民 5
花蓮縣 6 【壽豐鄉、鳳林鎮、光復鄉、豐濱鄉、萬榮鄉】平地原 4
花蓮縣 7 【玉里鎮、瑞穗鄉、富里鄉、卓溪鄉】平地原住民 5
花蓮縣 8 【花蓮市、吉安鄉、新城鄉、秀林鄉、壽豐鄉】山地原 3
花蓮縣 9 【鳳林鎮、光復鄉、豐濱鄉、萬榮鄉】山地原住民 2
花蓮縣 10 【玉里鎮、富里鄉、卓溪鄉】、山地原住民 4
高雄市 1 桃源區、那瑪夏區、甲仙區、六龜區、杉林區、內門區、旗山區、美濃區、茂林區 5
高雄市 2 茄定區、湖內區、路竹區、阿蓮區、田寮區 4
高雄市 3 永安區、岡山區、燕巢區、彌陀區、梓官區、橋頭區 8
高雄市 4 楠梓區、左營區 12
高雄市 5 大社區、仁武區、鳥松區、大樹區 9
高雄市 6 鼓山區、鹽埕區、旗津區 8
高雄市 7 三民區 16
高雄市 8 前金區、 新興區、苓雅區 9
高雄市 9 鳳山區 18
高雄市 10 前鎮區、小港區 11
高雄市 11 大寮區、林園區 8
高雄市 12 居住高雄市之平地原住民 2
高雄市 13 居住那瑪夏區、甲仙區、杉林區、內門區、旗山區、茄定區、湖內區、路竹區、永安區、彌陀區、梓官區、楠梓區、左營區、三民區之山地原住民 2
高雄市 14 居住桃源區、六龜區、美濃區、阿蓮區、田寮區、岡山區、燕巢區、橋頭區、鼓山區、鹽埕區、前金區、新興區之山地原住民 3
高雄市 15 居住茂林區、大社區、大樹區、仁武區、鳥松區、鳳山區、大寮區、旗津區、苓雅區、前鎮區、小港區、林園區之山地原住民 2

@mireille09
Copy link

謝謝 @thewayiam 提供完整應選人數

@kiang
Copy link
Contributor

kiang commented Nov 13, 2014

https://github.com/kiang/elections/tree/master/Console/Command/data/2014_areas

我把選舉黃頁上面各種選舉類型的資料匯出了，欄位說明如下：
id - 選舉黃頁uuid
url - 選舉黃頁網址
election - 選區
quota - 應選人數
quota_woman - 婦女保障名額
population - 人口
population_electors - 選舉人數量（滿 20 歲）
areas - 行政區 (
id - 選舉黃頁uuid
name - 名稱
ivid - https://github.com/g0v/twgeojson 的行政區編號
code - 主計處的行政區編號
url - 選舉黃頁網址
)

@mireille09
Copy link

點一下縣市會出現右邊選區
不過我只會PS不會程式
01

@s890081tonyhsu
Copy link
Contributor

我很喜歡這樣的設計，但這設計相當於兩層的選單
網站本身的架構不是合用這種
因為縣市頁面不適合再去顯示鄉鎮的詳細資料

目前進度如圖
default

如果有嚴格要求要正方形的話我會再用用看

@thewayiam
Copy link
Contributor Author

@s890081tonyhsu ++
美美的！

兩個小建議：
字跟方塊邊界的 padding稍微加大一點點
席次改為參選人數，可能比較不會誤會

@s890081tonyhsu
Copy link
Contributor

最終截圖*2
default
default

如果今天(11/13)十二點以前沒有特別的想法我叫要送request上去囉

隨手附上responsive for mobile、responsive for tablet共兩張
default
default

@thewayiam
Copy link
Contributor Author

@s890081tonyhsu ++ @mireille09 ++

@mireille09
Copy link

@s890081tonyhsu 很美歐~
建議方塊上下距離可以小一點. 縣市的選區與席次有沒有辦法放在一行呢?
最後是選區能否有完整市鄉鎮與選區序
有些選區含蓋鄉鎮很多...這比較麻煩一點

@s890081tonyhsu
Copy link
Contributor

@mireille09

  1. 結果如圖一
  2. 選區和參選人數在三個一列或五個一列的時候會相互擠到
  3. 你看到的名稱就是從資料庫直接拿出來的結果（參見圖二，排的不整齊的原因是資料長度不一，仍在想方法）

圖一
image

圖二
image

@mireille09
Copy link

@s890081tonyhsu 了解 謝謝你 速度真快
選區字太多能不能把框框也變大呢?
資料庫的選區可以直接修改嗎? 可以的話我就去弄
02

@s890081tonyhsu
Copy link
Contributor

或許是不錯的想法，但瀏覽器寬度是未知數
所以標題會不會從一行變成兩行這點我也不知道
就算可以預估得到，如果遇到下面這筆資料就會出包

A, B, C, D, E：單欄、F, G, H：雙欄

排版表格

A B C D
E F F
G G H H

先謝謝你的想法贊助
三欄和五欄的高度我好像有方法可解（剛翻文件）

@mireille09
Copy link

@s890081tonyhsu+ 正方形或長方形(俗稱黃金比例)應該都會很美
接下來看看顏色能否小變化, 真不好意思一直麻煩你~
選區的問題我在想想看, 有些選區鄉鎮超級多, 字也會超多
03

@s890081tonyhsu
Copy link
Contributor

顏色變化請給我色單（網址：http://paletton.com/）
在拉出適合的色單時，複製網址給我（有uid的）
如果要弄新的色單請記得清除uid在重連即可

顏色的部份我真的不熟悉，如果可以還請你多指教ww

@mireille09
Copy link

http://paletton.com/#uid=33i0u0ko0K+dGUmjjPFsPFTAyvi
我用PS顏色代碼輸入的, 三角形比較活潑, 四角型也不錯, 有win8感
顏色只是要讓呈現出來的結果不要太單調而已, 我也是新手.
文字是用白色的話, 基本上不要用太亮的顏色就好了 辛苦了

s890081tonyhsu added a commit to s890081tonyhsu/councilor-voter-guide that referenced this issue Nov 13, 2014
@s890081tonyhsu
Council Condidate card ui.
8dde410 
Issue: g0v#31

Thank for
	@mirelle09 to give me idea
and
	@thewayiam to tell me the parameters about the data.

1.	Resetting bootstrap 2 grid from 1-10-1 to 10-offset1
2.	Use card ui to links (with district count and candidate count).
3.	Semantic doubling grid to links. (mobile-1, tablet-3, PC-5)
4.	Import some color class ready to use.
@s890081tonyhsu s890081tonyhsu mentioned this issue Nov 13, 2014
Merged
@s890081tonyhsu
Copy link
Contributor

@thewayiam 這Issue結果我已經弄成 #42 ，但因為操作不當所以close掉了，有空請幫我看一下

@thewayiam
Copy link
Contributor Author

收到，我以為你想要再改一下XD

@thewayiam
Copy link
Contributor Author

Merged
雖然很漂亮，但感覺還是有點難找到自己的縣市

image

@mireille09
Copy link

@thewayiam
很漂亮喔~
我會建議顏色可能用兩個相似色系就可以了, 上面那種是淺一點的, 下面那種是深一點的,
不好意思我比較龜毛一點, 縣市文字的陰影顏色可以深一點嗎? 或者字大一點
縣市可不可以重新排列順序呢?
直轄市、台灣省北中南東這樣排下來
06

@s890081tonyhsu
Copy link
Contributor

我整理一下

顏色可能用兩個相似色系就可以了, 上面那種是淺一點的, 下面那種是深一點的

這一點恐怕還要再討論，因為這是動態排列的（mobile一行一個、tablet一行三個、desktop一行五個）

縣市文字的陰影顏色可以深一點嗎? 或者字大一點

如果可以，可以給數據是最快解法

大小單位給px
陰影請給顏色、不透明度、角度、間距、尺寸

縣市可不可以重新排列順序呢?
直轄市、台灣省北中南東這樣排下來

這點是資料提供方的問題，如果他們有排列過的話應該可以

@mireille09
Copy link

微軟正黑體 字型大小24
陰影- 黑色(色彩增值), 不透明75%, 角度 120, 間距 2像素, 尺寸 5像素

基本上兩種顏色看起來叫清爽, 一行3個或5個就是交錯也是耐看的
我是覺得色相不要對比太大這樣

@thewayiam
Copy link
Contributor Author

縣市排列順序問題
目前縣市越來越完整
之後我可以試著直接寫死在 html，不用再從 db輸出

@s890081tonyhsu
Copy link
Contributor

如果這東西要Open到國外的話，還是幫縣市建立個ID，用ID排列吧....

@s890081tonyhsu
Copy link
Contributor

效果如圖
網頁沒有色彩增值，所以黑色就黑色吧
image
image

@s890081tonyhsu s890081tonyhsu mentioned this issue Nov 15, 2014
Merged
@mireille09
Copy link

@s890081tonyhsu ++
很美喔就是這感覺~~
我注意到選區跟參選人數列出來是排在中間那行
不知道能不能放在下面那一行呢?

thewayiam added a commit that referenced this issue Nov 16, 2014
@thewayiam
#31: use bluegrenn, add br
a1fc921
@thewayiam
Copy link
Contributor Author

@s890081tonyhsu : 兩層都用 bluegreen哦
@mireille09 : 空行感覺如下，目前是空一行，這樣的感覺OK嗎？不知道為什麼 #00CCCC變得比較深？?

image

image

@mireille09
Copy link

@thewayiam ++ 不錯喔~ 可以空兩行看看嗎
色表是繪圖軟體的, 跟網頁計算的可能會有不同吧
陰影的不透明度可以調成50%看看嗎?
網頁顏色可以試試看用這個調 http://www.huecode.com/
ex: 輸入00cccc, 再調亮一點, 會變成02e8e8之類的東西

@thewayiam
Copy link
Contributor Author

字的陰影改50%
兩色塊目前分別是#02E8E8, #00CCCC
@mireille09 : 我美感不好，但感覺有比較漂亮 :)

image

@mireille09
Copy link

@thewayiam +++
水喔

thewayiam added a commit that referenced this issue Nov 16, 2014
@thewayiam
#31: reduce db query
905c6a4
@mireille09
Copy link

那個..選區跟參選人數也可以給陰影嗎?不透明30%就好. 或者字大一點這樣

thewayiam added a commit that referenced this issue Nov 18, 2014
@thewayiam
#31: font size larger and 0.3 shadow
dce8050
@thewayiam thewayiam mentioned this issue Nov 19, 2014
Closed
@thewayiam
Copy link
Contributor Author

如 #96 提到的問題
不知道如何讓數量資訊部分靠底部，又不影響目前整個方塊都可按的功能
程式碼所在處

@mireille09
Copy link

我的建議-把選區跟參選人數兩行取消掉
因為點進去會看到選區
參選人跟應選人可以併到標題後面
看是要文字就好還是怎樣
08
大概就是這樣吧...
色塊上面的字型大小改成16看看

試著把 #02E8E8換成深一點(ex #1bd6d6)也許就不那麼刺眼了
不知道把背景做灰的(ex #d8dada、#e3e3e3)如何?

@s890081tonyhsu
Copy link
Contributor

看一下程式碼，大概了解是怎回事了....

<div>&nbsp;</div>
<br>
<br> <!--這兩行相當於用Enter排版-->

選區和參選人數要保留--可以，我CSS做得到；要挪到子頁面，也可以，只是資料要拿得到

至於粗體字我覺得是排版問題，理論上可以不要卡到位的說

@s890081tonyhsu
Copy link
Contributor

選區與參選人數保留調整（鄉鎮）
image

s890081tonyhsu added a commit to s890081tonyhsu/councilor-voter-guide that referenced this issue Nov 19, 2014
@s890081tonyhsu
fixed the county-sub and districts-sub
0558145 
Refer g0v#96, g0v#31 has demo image
@s890081tonyhsu s890081tonyhsu mentioned this issue Nov 19, 2014
Merged
@s890081tonyhsu
Copy link
Contributor

剛剛看到議案頁面，是不視野需要做類似的變更
議員投票指南 -- 找議案

@thewayiam
Copy link
Contributor Author

是的，HTML位置如下
找議員HTML、找議案HTML、找表決HTML

@mireille09
Copy link

顏色參考-提供紫色、藍色、橘黃三組
色碼已用http://www.huecode.com/ 試過，顯色ok，可做調整
09

@s890081tonyhsu
Copy link
Contributor

其他頁面依序配色
找議員--藍色pair, 找議案--紫色pair, 找表決--橘色pair
image
image
image

@s890081tonyhsu s890081tonyhsu mentioned this issue Nov 20, 2014
Merged
@mireille09
Copy link

那個..我不知道要在哪裡問.現在的頁面有修改了
但是有些縣市字體仍是白色的
可以改成黑色嗎?謝謝

@s890081tonyhsu
Copy link
Contributor

縣市的字體會白色是因為連結的一系列效果都沒有更正，所以就只有一般狀態下是黑色

@mireille09
Copy link

放了縣市政府logo很失焦.....

@s890081tonyhsu
Copy link
Contributor

你是指首頁縣市logo嗎？
我是一直在想到底哪裡奇怪，如果可以請做解釋...

@mireille09
Copy link

舉例而言報紙頭版會有一個頭條，跟其他新聞
他們會排出最重要的一個焦點，換言之頭條只會有一個
今天改這樣看似全部都是重點，但實際上卻變成沒有重點了
設計的細節在於每個設計只有一點點、小小的，等主題出來就可以襯托

我的建議是...
點進去的頁面顯示縣市府Logo不變
首頁的建議:
1.Logo拿掉
2.滑鼠移到上面才顯示Logo
3.Logo刷成黑灰白, 不至於看起來像大雜燴

設計到後來當東西越來越多的時候
less is more, 少即是多

@mireille09
Copy link

然後我個人是有個建議...
這個網站在選舉結束之後可以持續更新...
往後像是某南部直轄市老是被砍預算這種事可以列頭條這樣...
只是會很麻煩!!!

@s890081tonyhsu
Copy link
Contributor

縣市預算的部份我覺得要到其他專案發展了，因為這專案的核心就只是選舉查閱工具
不排斥裡頭的預算整理，但如果將這功能抽出來再做或許會更好
這就要看接下來有沒有人要開始新的專案了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
UI / UX
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@kiang @s890081tonyhsu @thewayiam @mireille09