維基百科討論:2012年首頁設計建議/草案/Kuailong

設計簡介

大體上融合了英文Pretzels（包括Shizhao、林卯改版）的設計，另外每日圖片部分參考了越南維基人Mxn的設計。主要是細節上的微調，陰影基本都去掉了，社區版面是比較大的改動。

個人技術所限，有一些想法暫時沒有實現（實現也不美觀），比如希望把特色、優良條目展示合併在同一個板塊顯示，提供類似tab的切換。另外還有標題板塊的修飾。

由於本人很不喜歡混亂的字號和行距，也很討厭繁雜的連結，所以不會在這方面修改。

還請大家多指教。 --Kuailong™ 2012年12月19日 (三) 13:13 (UTC)

(＊)提醒：由於設計在不斷變動，下面提供幾個穩定版本：

優良、特色板塊分離，特色條目無背景圖的版本

推薦內容部分採用特色條目圖片做背景圖的版本

--Kuailong™ 2012年12月20日 (四) 06:13 (UTC)

已知問題：（1）IE兼容模式下排版（基本完成）和漸變效果（未完成）的問題；（2）高解像度下圖片兩段留白問題（無法解決）。--Kuailong™ 2012年12月21日 (五) 11:20 (UTC)

意見收集

(！)意見：挺好，感覺頭部和今日圖片都比之前更協調了，或許今日圖片那個白色漸變可以窄一點？草案可以像Shizhao那個一樣加個白底，因為正式首頁顏色和這個還不大一樣。--Danielinblue（留言） 2012年12月19日 (三) 13:34 (UTC)

對今日圖片做了修改。老版本的今日圖片移步[1]。--Kuailong™ 2012年12月19日 (三) 13:36 (UTC)

「已有『XXX』位註冊用戶參與編纂」…－多啦A夢^220‧284－世界末日將到來！（大誤） 2012年12月19日 (三) 14:23 (UTC)

 已修復--Kuailong™ 2012年12月19日 (三) 14:30 (UTC)

優良往下移動一點？--鐵鐵的火大了（留言） 2012年12月19日 (三) 16:07 (UTC)

原因？--Kuailong™ 2012年12月19日 (三) 16:16 (UTC)

首頁一上來就放兩篇文章太單調了，倒不如FA下面放DYK的各種提問有意思。而且GA不是「質量最好」的條目，不需要放太上面。--鐵鐵的火大了（留言） 2012年12月20日 (四) 01:15 (UTC)

DYK質量更差吧…… --Kuailong™ 2012年12月20日 (四) 01:24 (UTC)

(！)意見：貼士一詞可能需要加上地區轉換，該詞似乎不是各地區皆通用的詞彙。--Alexchris（留言） 2012年12月19日 (三) 16:58 (UTC)

大陸、香港貌似還挺常用的，不知台灣是否常用？或者直接改回「提示」吧。--Kuailong™ 2012年12月20日 (四) 01:33 (UTC)

台灣基本上好像不存在這種用法，我第一次看到。--Alexchris（留言） 2012年12月20日 (四) 05:31 (UTC)

 已修復--Kuailong™ 2012年12月20日 (四) 06:13 (UTC)

(！)意見：不錯，頁首右邊的三個按鈕或許居中對齊會好一些？ 另外社群信息的分隔條可能也是淺灰色吧。（個人覺得Pretzels原來的淡陰影邊框其實還好，會比實線柔和些。另外是不是今日熱門放最上有些太吸引讀者注意了... 今日熱門的條目質量很難說，首頁最好還是引導閱讀社群選出的優良內容吧）--Ericmetro（留言） 2012年12月19日 (三) 18:16 (UTC)

 已修復，按鈕居中是我的疏忽，感謝指正。個人不是很喜歡現在這個按鈕的樣式，不過不知道修改成什麼樣子。--Kuailong™ 2012年12月20日 (四) 01:24 (UTC)

(＋)支持：木有違和感啊！的確柔邊效果較佳，要不要做個試試看？ [伸手（誤）] :》 @assanges [阿桑奇士] ‧ ^{(talk | cont | uploads)} 2012年12月19日 (三) 20:48 (UTC)

引入陰影效果見User:Kuailong/sandbox2。--Kuailong™ 2012年12月20日 (四) 01:33 (UTC)

(！)意見，補充：右上三顆按鈕會否出現不兼容現象，因本人先所見之按鈕均向左偏移。有何解決妙方？ @assanges [阿桑奇士] ‧ ^{(talk | cont | uploads)} 2012年12月19日 (三) 21:31 (UTC)

(！)意見，公告欄這個很不錯。不過說把「XXX個頁面需維基化」放在首頁是否合適？--耶葉爺♥VC XC 2012年12月20日 (四) 02:03 (UTC)

只是放置在那裏做個樣子，我個人其實希望做成類似ASN那樣的滾動顯示（每次2條）。至於什麼適合放在首頁，這就見仁見智了，而且也不是首頁設計的討論重點。--Kuailong™ 2012年12月20日 (四) 02:32 (UTC)

嗯知道了。此外我個人還是比較喜歡有特色條目背景圖片的那個版本，看上去十分震撼。有些問題可能也是無法避免的，像是優良條目版面被削弱，以及特色條目的背景圖片與「你知道嗎」的附圖之間的樣式看上去不太協調。--耶葉爺♥VC XC 2012年12月20日 (四) 06:58 (UTC)

「你知道嗎」當然也可以做成這樣，但是我覺得有濫用的嫌疑。優良條目我個人是傾向於削弱的，畢竟首頁上展示條目的板塊已經夠多了（FA、GA、DYK）。或者我建議特色條目和優良條目交叉輪展，考慮到現有特、優比例大致為1:4，以5天為周期，1個特色配4個優良。--Kuailong™ 2012年12月20日 (四) 07:28 (UTC)

話說有個小問題是有時推薦內容的圖片不一定有大圖，可能放大作背景後圖像質量會降低。 --Ericmetro（留言） 2012年12月20日 (四) 10:20 (UTC)

推薦內容和每日圖片的這種設計，想法不錯。但是問題也不少：一、二個欄目展示效果幾乎一樣，看不出差別（一個是展示條目，一個是展示圖片，現在幾乎沒差了）；二、如果沒有合適的解像度圖片怎麼辦？那樣會看起來很糟糕；三、沒有右對齊。習慣上是左右對齊，下對齊差一點反而影響不大，但是不能右對齊，看起來會比較糟糕--百無一用是書生 (☎) 2012年12月20日 (四) 11:22 (UTC)

我當然考慮過解像度的問題，但用幾張解像度一般的特色條目圖片測試發現效果還是可以接受的，所以就這樣用了。如果實在是沒有合適的圖片時，可以換用特色圖片。（或者直接就展示特色圖片算了？反正連特色列表都登錄首頁了。）右對齊那條沒看懂。--Kuailong™ 2012年12月20日 (四) 13:14 (UTC)

請比較特色條目（配圖）、特色條目（不配圖）+特色圖片、特色條目（配圖）+特色圖片。--Kuailong™ 2012年12月20日 (四) 14:34 (UTC)

(！)意見：神作啊！作者很好地理解了現代操作介面的發展趨勢。如果能消除下方空白（建議下移文字，既填補空白又使文字清晰），修正「你想參與嗎？」斷行問題，基本完美了。--H2NCH2COOH（留言） 2012年12月20日 (四) 12:45 (UTC)

您說的問題估計是解像度導致的吧。--Kuailong™ 2012年12月20日 (四) 13:19 (UTC)

(！)意見，使用chrome觀看效果非常好，但不知能否改善IE的瀏覽效果。--Gakmo（留言） 2012年12月20日 (四) 15:30 (UTC)

借了電腦看了一眼……果然很糟糕。用IE10看是沒有問題的，兼容模式下就會很錯亂，個人技術水平有限，不知道誰能解決兼容問題。或者專門為這些已經過時了的瀏覽器做一個去掉部分效果的首頁版本，根據user-agent判斷跳轉？--Kuailong™ 2012年12月21日 (五) 06:54 (UTC)

這個每日圖片效果贊！——但寬度鎖定了？感覺上下不順暢。如果一定要鎖定寬度，間距扯開一些，從視覺上分離開如何？(我的解像度是1920×1080)--林卯（留言） 2012年12月21日 (五) 03:43 (UTC)

圖片大小好像只能設置成固定值，寬度不鎖就只能看着留白，這點實在是很矛盾。當然間距拉開的話……跟Google+一樣引發大家吐槽空白嗎？--Kuailong™ 2012年12月21日 (五) 11:18 (UTC)

• 字小。請把左右欄互換看看效果。多換兩個POTD試試看。萬一POTD是圖形那就毀了，必須先禁止圖形的FP上首頁。右欄請再斟酌，現在這樣並不好看。--達師 － 218 － 372 2012年12月22日 (六) 17:20 (UTC)

這個設計會讓以後更新首頁的管理員很痛苦，必須確定每一張圖片的主體部分並相應計算偏移量。Liangent（留言） 2012年12月22日 (六) 18:17 (UTC)

我還以為是自動計算的，如果不是的話我反對。--馬呵說念誒多嘩鐸★愛生活愛蘿莉塔 2012年12月23日 (日) 03:04 (UTC)

這個能用機械人解決麼？感覺整體效果很好。--Makecat 2012年12月23日 (日) 07:48 (UTC)

如果每一張圖片都可以直接顯示同一個位置那倒沒問題，但即使不考慮達師提到的圖形FP（File:History of Beijing Subway.gif），來換一張圖試試看：[2]，顯示出來一片黑[3]（沒辦法，圖片上部本來就是全黑的）。這時管理員必須編輯首頁[4]改像素偏移，才能展示「地出」圖像[5]。Liangent（留言） 2012年12月23日 (日) 10:48 (UTC)

把圖像顯示區拉大，然後上下去掉同樣百分比的區域，這樣應該可以適用絕大部分圖片吧？(當然地出這張只要遮住下半部分都會很尷尬的樣子……)--Kuailong™ 2012年12月23日 (日) 11:21 (UTC)

還有長寬比特殊的圖片的問題：圖呢？還是得改一下，可這樣傳輸的圖片大小太恐怖了，比較實際的解決方法可能是為首頁展示專門製作一批大小內容適當的圖片。Liangent（留言） 2012年12月23日 (日) 14:26 (UTC)

快雪時晴帖…… -_____-||| 這樣的根本就沒辦法在首頁展示啊。我已經去除掉了特色圖片的偏移，尺寸正常的圖片應該是無需再調整位置的。--Kuailong™ 2012年12月23日 (日) 14:36 (UTC)

話說我覺得把下面的梯度塊也連結到圖像好一些，不過……bugzilla:43361。Liangent（留言） 2012年12月23日 (日) 14:52 (UTC)

清明上河圖還不是FP呢 --達師 － 218 － 372 2012年12月26日 (三) 04:48 (UTC)

(！)意見：效果不錯，但我認為每日圖片欄目用這種方式展示已足夠，特色內容的圖片還是以正式方式展示與特色條目相關的圖片較好。另外雖然我用1280x1024解像度看來很好，但也擔心使用1920x1024或其他主流解像度看時的效果會否正常。--沙田友（留言） 2012年12月26日 (三) 06:58 (UTC)

(！)意見，特色圖片太大，不一定與特色條目配對，但現在的感覺好像特色條目與特色圖片是相關的，建議分割兩個欄目，或用特色條目對應的圖片代替現在的圖片——Sakamotosan 2012年12月26日 (三) 13:11 (UTC)

之所以使用特色圖片是擔心特色條目圖片質量。請比較特色條目（配圖）、特色條目（不配圖）+特色圖片、特色條目（配圖）+特色圖片。感謝兩位的意見。--Kuailong™ 2012年12月27日 (四) 03:08 (UTC)

欄目的題頭配圖設計是一個不錯的想法，但是可能並不適合維基百科目前的UI設計。目前維基百科頁面內容部分不是定寬的（只有左側導航欄是定寬的），因此首頁的設計左右兩欄中只能有一列定寬，而且必須是採用題頭配圖的那列用定寬，現在幾個採用題頭配圖的設計都正好反過來，題頭配圖的那列不是定寬的，或者採用的是百分比的分配方式。這樣做將會造成不同解像度下題頭配圖的樣式相差很大。例如本設計在1280x600下看起來恰到好處，而到了1920x900下，題頭圖片則變成了置中，距離欄目兩側的位置出現大幅空白，欄目標題也跑到了圖片下面，而每日圖片由正常的小圖蓋大圖，變成了分別兩個圖放置。而在更小的解像度下，可能會造成文字太多位於圖片上，圖片顯示不全、圖片所佔比例太大等問題--百無一用是書生 (☎) 2012年12月31日 (一) 06:52 (UTC)

• (！)意見：1. 左欄過寬，右欄過窄。 2. 圖片上「推薦內容」和「每日圖片」兩個字的 text-shadow 需要修改，目前版本的不是很好看，下面 alt 版本的也還是需要再改改的。3. 針對圖片大小問題可以嘗試試用 CSS3 的 background-size:cover 解決？（缺點就是不兼容 IE ） Zeray Rice 2013年1月9日 (三) 07:04 (UTC)

為了IE兼容性妥協了很多，沒辦法。--Kuailong™ 2013年1月10日 (四) 14:13 (UTC)

• (！)意見：第一張圖片和圖下文字沒有關係那不如分開。--Qa003qa003（留言） 2013年1月16日 (三) 11:39 (UTC)