Re: [請益] 疏朗的感覺

看板Web_Design作者elan (IE是最棒的瀏覽器)時間19年前 (2006/08/07 10:23)推噓5(5推 0噓 24→)

留言29則, 6人參與討論串3/3 (看更多)

我提出一些不一樣的看法 ... ※ 引述《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

推

banco

08/07 12:51, , 1^F

08/07 12:51, 1^F

→

banco

08/07 12:54, , 2^F

08/07 12:54, 2^F

→

banco

08/07 12:55, , 3^F

08/07 12:55, 3^F