我提出一些不一樣的看法 ... ※ 引述《ACQVV (機會是給隨時準備好的人)》之銘言： : (恕刪) : 前面推文 有部分版友提到關於瀏覽器支援的問題 : 那是跟部分程式相關 在這邊就不多提 : 以下是小的針對網頁排版美工部分粗淺的見解 : 1. 首先 目前電腦螢幕的呈現大部分的使用者都開始邁向1024*768 : 但是仍有部分使用者習慣800*600 : 所以如果是使用表格製作框架 : 可以一開始拉一個兩欄總寬度為900-1000之間的表格 : 置中以後將左邊的欄寬設定為800 : 這樣 你可以將比較重要的東西放在左欄中呈現 : 次要的東西放在右欄中(例如小廣告小說明或者是比較次要的消息) : 這樣一來可以增加你表現的空間 二來可以塞進去更多資訊 : 可以讓整體空間 視覺上更寬闊 也顧慮到不同的使用者 這點我覺得以原po的網站來看還好 他做的網站並非像商業網站或portal網站一頁之中有相當密集的資訊要呈現(還要加廣告) 排版雖然是三欄式 但左右兩欄僅是放網站主要瀏覽選單和某內容的次要選單 中間那欄是放各式出版文章表列及特定文章內容 他以總寬度760px配合上選定的字型大小(字型大小方面基於其他原因我也是覺得要再往下調整) 區塊之間也有適當margin(但三欄各自的寬度要再做調整) 以版面整體看來我覺得 他設的總寬度已經足夠了 不論是在800*600或是1024*768都ok : 2. 關於字體的部分 可以做部分的改小 改粗 分出層次等級 : 我們來研究一下YAHOO的新首頁 : http://tw.yahoo.com/preview.html : 第一 用色統一 那是風格的差異 我覺得多點顏色也沒什麼不對 原po的網頁也不是用了相當混亂的配色 且用的顏色也蠻素雅的 彼此對比還蠻調和的 : 第二 字體偏小 我也是同意字的大小可以往下調整 但我不會拿yahoo的新網頁來做例子(因我的理由和回文者不一樣) yahoo是個portal 它的網頁是典型資訊密集度相當高例子 視覺上通常以多個並列的小box來呈現資訊 大部分box裡面都是一列簡短敘述及連結 考慮到整體版型和最重要的:資訊搜尋的效率, 的確會網頁字體會偏小(但也不會小到失去可讀性) 我認為原po原來字型大小和整體版型的搭配上倒是沒有問題 但為什麼他的老闆會覺得不夠'舒朗' 為什麼我覺得他的字型可以再縮小 我是覺得是和中間欄位主要內容的legibility和閱讀其內容的使用者之閱讀效率有關 這些考量牽涉到了內容的字型, 字型的大小, 邊界, 一行的字數, 以及行距 (我並未學過和排版有關的理論 這些是我看了一些歐美針對網頁legibility和usability的研究報告 及自己試驗的結果所得到的心得 不知道中文世界有沒有一樣的研究 如果我有錯誤的地方請 本科專業人士糾正) 原po的網頁不夠'舒朗'原因之一我想可能是出在一行的字數不夠長 歐美的研究是說一行的最適閱讀字元數大概是在40至60個character之間(大概是11~15個單字) 我也看過說是50至80個character的結論 (當然 結論前提是基於在螢幕上可閱讀的最適字體大小) 中文內容當然不能以此套用 我自己的經驗是在螢幕適當字體大小下一行少於30個字就讀起來不太舒服了 (或許原po可去參考一般平面書籍的中文排版) 所以建議原po適度縮小字體增加一行的字數 另外 版型兩側的欄位寬度也可縮小一點 增加中間欄位內文可容納的字數 (尤其是右側欄位 看起來是寬了一點 首頁中的黏貼相片效果也過度侵佔到內文的空間) 再來可能是原po未對內文設置適當的行距 原po網頁每一行文字都擠在一起的確會造成閱讀的舒適感(不夠舒朗)及效率的降低 建議以css的line-height來做調整適當的行距的動作 : 因此建議 可以主要標題使用粗體 深色 : 內容用同級的字體 淺色 #333333 #666666 #999999 都是可以充分表現質感又好搭的色 我相當同意標題與內容字體顏色以深淺做劃分 但我覺得列舉的顏色值不太恰當 他沒有考慮到與內文的背景色搭配所產生的可讀性問題 原po網頁內文底色是純白(#ffffff) #333333的確不錯 其他兩個#666666和#999999與純白背景對比差異有點過小 我認為容易造成閱讀者眼睛的疲累 加上原po首頁外其他網頁內文還有帶背景圖(這點我倒是覺得有點多餘了) 也不宜將顏色弄的太淺 : 因為你的版面 字體都等大 等粗 : 光是排版上就分不出主客 給人一下子重點太多 讓人覺得不夠分明 百分百同意 : 可以參考這個網站公告的部分(notice) 就是使用這種手法 分出主客和層次 : http://www.dooreedu.com/ : 另外一種方式是原PO有使用的圖片標題 : 因為原PO有使用在這邊就不多說明 : 建議的部分是 : 圖片標題的美工 : 其實 不一定要用到強烈的圖騰 色彩來突顯 : 因為這個版面的色很多(下一點會深入說明) : 建議可以使用跟底色相同的色來當底 然後再加上一點點的小變化 : 可以繼續參考剛剛那個網站(NOTICE V.S. FIND FILE)看起來既大方又乾淨 : 很適合想做清爽版面的人參考 我到不會覺得標題的顏色太強烈 還蠻素雅的 也清楚了劃分了網頁內的段落 您說得例子我覺得也是風格不同而已 3. 網頁用色 : 首先 我必須先澄清 我不是惡意批評 : 只是 我個人的淺見 : 第一眼開啟網頁看到的一定是色彩 : 所以 主色會帶給使用者很多訊息(關於色彩心理學就太複雜了 請自行上網查閱) : 但是我個人覺得原PO使用太多強烈色調 : 因為這個版面比較小 想提供的訊息又如此繁多 : 顏色就是很重要的關鍵了 : 首先黑色是很容易讓人產生印象的顏色 : 因此 一個頁面盡可能不要使用大量的黑色 : 除非你是黑底 那就需要很多很強烈的色彩來豐富面板 不會吧 用色還均勻 我看的感覺還蠻ok的 成功的帶出中國文學風 (我覺得只要不是給人過於混亂或是錯誤的印象 用色的style是蠻見仁見智的) : 因為原PO老闆需求比較偏向清爽 乾淨的感覺(個人推測) : 因此 建議前面所提 次要文字的部分改成更淺的顏色(不要淺到看不見就可以) : 框架內的每一個點 前面又使用不同色的方塊 : 原PO本來是好意區隔 在這邊卻顯得畫蛇添足了 : 其實還是可以用不同色 但建議使用淺色 : 以下這個網站提供參考他的配色 : 一樣的主客分明 並利用淺色塊作區隔 : http://www.audi.co.kr/ : 4. 另外 因為不知道原PO使用什麼編輯器 : 如果有使用Dreamweaver可以多使用圖層的功能 建立出畫面的層次 : 可以讓畫面更有立體感和變化 : 如果會flash當然更好 : 可以把上面的logo改成具有小部分flash的動畫 讓整體畫面更加分 整體畫面會不會加分及有沒有必要加flash我到是有點懷疑 原po的logo很好看也帶出了網站主題 其實這個網站最重要的我相信是作家本人的寫作內容 畢竟這不是個強調視覺設計或是在賣視覺的網站 加flash也不會對網站的內容傳達有實質上的助益 (加上我還看過一些研究有關使用大header網站使用者的瀏覽行為的文章 觀察結果是說大部分的使用者通常會只會看一眼就直接略過這個大header去瀏覽網頁中的 主要內容 如果又用加上無謂的flash動畫在這個header上 豈不是分散閱讀者的注意力) 所以加上flash我覺得可能有點過於賣弄也浪費頻寬和loading time : 下面這個網站提供參考http://www.bukp.or.kr/ : 關於flash的部分有flash版可以參考 : 網路上也有不少論壇 : 這樣的效果 對自學者來說 不算太困難 多爬點文就會了 : 5. 最後 關於網頁開啟的部分 : 希望原po能將內置框架內的連結改掉 : 不太適合在內置框架內開啟 : 可以選擇 開啟新視窗target="_blank" : 如果不想開啟過多視窗可以使用target="_parent" 在同頁開啟這類的語法 : 我想應該比較恰當^^ 除了視覺排版以外 我覺得原po網頁結構的問題還比較大 像首頁中每個段落的內容為何要分別放置於個別的iframe中 以及只用大張圖來做網站選單和次選單 ... 等等 這都會造成usability和accessibility的問題 ---------------------------------------------------------------------- 以上純屬個人淺見 ..... --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.131.20.143 ※ 編輯: elan 來自: 220.131.20.143 (08/07 13:00)