DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：我同意屎大師所指出的這個問題，但我認為屎大師沒有在該問題最典型的情景中展開他的陳述，從而削弱了觀點的說服力。他所提出的這個問題，在他所舉案例（門戶資訊首頁）的嚴重程度，遠不及該問題在功能型頁面中的嚴重性。下面分別從他認為會造成的兩處問題做出反駁。

屎文陳述了門戶網站在文字視覺呈現上的一個現象：
同一行文字中，可能包含兩條新聞鏈接，而這兩條鏈接之間的語義關系可能很多樣，但並未通過視覺呈現來直觀表現這些關系。  
圖1：網易首頁“新聞”豆腐塊中的鏈接

如圖1所示，在短短的幾行新聞中，雖然視覺上統一用空格做分割，但至少有四種語義上的差異。

綜合屎文和屎大師的原話，這種“不做任何事情”的視覺表現，會導致以下問題：

1. 對用戶：降低閱讀速度&增加理解成本。
不同語義關系都用同一種視覺表現，無法預期何時出現哪種關系，只能掃視整行，且增加思考負擔。若做圖2的視覺處理（字體縮小、顏色差異），用戶知道後半句是對前面的解釋，那麼如果看了前半句不感興趣，TA大可不必費神看後半句。

 

圖2：網易新聞中心的鏈接形式

2. 對網站：降低更多鏈接條目的可發現性。
同行塞入多條鏈接是為了有效利用版面，增加點擊率，但沒有視覺差異，會使某些內容或功能被忽略，浪費資源位。如圖3中，“專題”、“圖集”很可能被忽略。

 

圖3：網易新聞中心的鏈接形式

屎大師進而根據網易的設計，提出了三種視覺處理方案：用字號、用顏色（圖2）、用符號（圖4）。

 

圖4：用符號分隔

我同意屎大師所指出的這個問題，但我認為屎大師沒有在該問題最典型的情景中展開他的陳述，從而削弱了觀點的說服力。他所提出的這個問題，在他所舉案例（門戶資訊首頁）的嚴重程度，遠不及該問題在功能型頁面中的嚴重性。下面分別從他認為會造成的兩處問題做出反駁。

1. 對用戶：
首先，屎大師所認為的閱讀效率問題，是基於他認為我們都是一整行地掃視的。但在實際閱讀中，我們更多是跳著、挑關鍵字閱讀。其次，對於行寬這麼窄的一個版塊，空格前後的兩段文字可能同時就進入視域了，視覺焦點的移動也可能是在1秒以下級別的。屎大師舉的正例來自網易新聞中心，但為何網易首頁的新聞排版沒有用同一種模式，而是任其混亂？比較一下兩個頁面會發現，首頁一行的行寬，等於新聞中心一行的一半。也就是說，即使不做任何視覺處理，對用戶在這麼窄的板塊裡閱讀並不會有多少影響。

而理解成本問題，對於普通網民來說，面對一大堆文字鏈，我不認為TA會花時間或需要理解，空格分隔開的文字間是什麼關系。這是比較高級的思維活動，多數人可能看到吸引的關鍵字就點開來看看了。

做視覺處理，有時候還可能導致理解成本的上升。這是因為：
1）無法保證各大網站在符號系統上的一致性，而符號有時是需要理解成本的，在不同的網站難道還都去理解並記住它們？
2）使版面整體很混亂。由於新聞的及時更新性，意味著會有各種語義關系的新聞鏈接堆放在一起。如果分別搭配一種視覺形式，獨立來看關系是清晰了，但綜合起來會不會一片混亂？

也許，真正會影響到用戶閱讀體驗的，還是在於整體版面的視覺語言。這也是網易之所以出色的地方。

2. 對商業
首頁的作用是即時將最新的新聞呈現出來，這意味著編輯應只需要顧及基本的文章標題編輯原則。如果強加給TA一些規定（如為了看起來整齊而統一每句字數），反而大大影響效率。從另一個角度來說，有時候故意混淆鏈接之間的關系，反而會對點擊率有所幫助。