以前經常吃公司旁邊的食堂，人多，排隊。夏天的時候，我們總要找一個靠窗口通風好的地方坐，沒有空調只有風扇，風扇很多，開關都集中在一個地方，應該是方便操作人員統一管理，有時自己頭上的風扇沒開，當我要去開這個風扇時，麻煩來了，很多排的風扇開關，到底哪個是我頭上的呢？

生活中有很多總讓我們感覺莫名其妙，或者停下來需要思考的情況，有時不得不求助，到了互聯網上，可能很多情況發生了也沒什麼求助的方法，只能自己猜，不猜了就只好關掉。

網頁上每項內容都有可能迫使我們停下來，進行不必要的思考。比如內容信息看不懂，操作功能不明確。例如，文案。常見的罪魁禍首是那些很酷或者自以為 很聰明的名字、帶有營銷傾向的名字、和具體公司有關的名字以及生僻的技術名詞。（Don’t Make Me Think第一章）

當我們訪問Web的時候，每個問號（讓用戶不明白的地方）都會加重我們的認知負擔，把我們的注意力從要完成的任務上拉開。這種幹擾也許很輕微，但它們會累積起來， 有時候這樣的干擾不用太多，就足以讓我們抓狂。況且，人們通常不喜歡苦苦思索背後的原理。建造網站的人沒有讓它們明白易懂（而且容易使用）會讓我們對這個 網站以及網站的發布者失去信心。
按用戶心智模型去設計產品，下面列出一大堆訪問者在訪問網站時不應該花時間思考的事，例如：

• 我在什麼位置？
• 我該從哪裏開始？
• 他們把××放在什麼地方了？
• 這個頁面上最重要的是什麼？
• 為什麼他們給它取這個名字？

不讓用戶思考過多，原則上就是設計符合用戶心智模型。大致可以從下面幾個方面來講：

1、文案：需要讓人容易理解，快速記憶。根據不同產品定位，找到恰當的切入點，文案過長或者使用用戶不理解的情景，如技術用詞， 營銷用詞等，都會使人不知所雲。

省略多餘的文案，比如過分修飾，歡迎語，多餘指示性語句，這些羅嗦的詞語會影響用戶對關鍵信息的閱讀理解和判斷，必須幹掉。

2、圖形：好的圖形表達是優於文字的，但是圖形沒有把內容表示明確，反而適得其反，給用戶造成理解上的困擾。

很多情況下，我們好像都很喜歡做一些很炫的icon來表達某些內容，這些是會起到吸引性，但要記住一點，你的圖形是不是很好的闡釋了內容，如果做不 到，那就去掉吧。不如放大標題來的更好。
每個網站需要有它的獨特性來吸引用戶，但表達這些獨特性的元素，例如圖形，一定不能對用戶理解內容產生幹 擾。很重要的一點，我們設計是要表達什麼，為了什麼，怎樣更好的幫助用戶來理解這些表達，是我們一定要做到的。
網站不是炫技場，設計要為內容服務。

3、信息：信息其實是文案、圖形等形式的混合體。信息之間，是否建立了相應的關聯度，不相關聯的信息之間是否產生了幹擾。

大量的信息是否進行了合理的分類，以減輕用戶的尋找時間。信息分類處理上，有個深廣度問題，廣度站點因為層級少，可以讓用戶不需要點擊過多就可以到 達底層；深度站點需要點擊更多次，但它在每一層次上可以做到讓人的思考最小化。關於信息的深廣度，詳細見這 裏。
所以，有效合理的信息分類可以幫助用戶快速准確瀏覽和完成任務。

4、引導：通過菜單，導航，面包屑等手段有效引導用戶行為路徑，讓用戶方便去他想去的地方，回他想回的地方。

在路邊，我們希望有路牌指示；在雜志上，我們希望前面有目錄，在每頁我們還希望有頁碼，在網站設計中，我們引導好用戶需要瀏覽的內容；在用戶需要的 時候給予網站工具來方便完成任務，在這點上，很多時候我們總是希望上新功能，把功能做的突出，殊不知用戶是不是也這樣想，他到底在這裏需要什麼。

5、操作方式：充分順應用戶的心理思維，來設計功能的操作，可以使用戶快速上手。

汽車方向盤往左打，汽車就往左開；插排電源按下去燈亮；相關內容旁邊放置相關操作，操作尖頭朝下說明有下拉內容，等等。這些操作方式都是要符合用戶 心智模型的。

6、一致性：設計在同產品（甚至同類產品）中保持一致性，可以大大降低用戶理解成本，使用戶快速上手，增加用戶的使用率。

這裏的一致性包括顏色，形狀，內容，操作方式。比如紅綠燈如果各地都不一樣，外地人來了豈不會導致交通混亂。同一個網站也應該有這樣的一致性，有些 都可以保持行業的一致性，比如頁面上使用一樣的翻頁等，既可以降低制作成本，又對用戶的使用有良好的認知幫助。到一定程度，也會提升一個品牌的認知，比如 阿迪達斯到處使用的三道杠。

下面看個例子：這個是某期寶貝傳奇的宣傳頁面，進來以後甚是讓人看不懂！沒有很好的根據用戶心裏預知和相關內容的合理放置來設計。這只是一個活動， 如果是一個長期產品，用戶接受程度可想而知。

我們都 知道別讓我思考最經典的頁面是google首頁：logo起到網站認知作用，搜索框緊跟logo並最大化使其最容易被使用，其他信息按歸類放置，並根據等 級高低依次減弱。雖然大多產品都有其他商業性需求考慮，但設計師不能被這些沖昏頭腦，機械性的表現內容。多花心思把繁雜信息理清楚，要知道，設計師都不是 很清楚信息的關系，用戶就更不會明白。

1、構圖。要注意畫面裏有前、中、遠景，層次感才更好；

2、用光。順光容易使畫面顯得平板，而側光、逆光的層次就豐富些；

3、曝光。曝光准確的圖片，高光部分、陰暗部分細節都能保留，層次自然豐富細膩。

以下圖為例：

好的作品要注重與適宜的環境相結合，會使你的作品更吸引人。但請注意符合視覺的合理性。

1.訪客的體驗

網站改版首要考慮的即是網站用戶的訪問體驗，用戶第一，網站沒有了用戶那麼改版就沒有意義了。如果對網站的各種應用及功能做了非常大的改動，致使訪客對原有的已經熟悉了的一些網站功能因改版後不能使用或者說使用方法有了非常大的改變，那麼這勢必會讓訪客感到無所適從，甚至對網站產生抵觸心理。在這個問題上必須認真考慮，做好規劃，否則因改版而帶來的流量損失就得不償失了。

2.版面的設計

一般來說，網站改版都要對版面做一個全新的設計，相當於是從頭到尾重新架設了一個網站，這自然是無可厚非的，但在追求完美的同時還應該兼顧到網站整體的風格設計，這是非常重要的。試想，改版後的網站相對於舊版的網站風格迥異，幾乎是扯不上邊，相當於做了一個龐大的整容手術，完全沒有了昔日的影子，這將會涉及到整個網站的形象。理所當然，這也將會是一個失敗的改版方案。

3.搜索引擎的因素

搜索引擎是網站最重要的流量來源，網站改版尤其要在這個方面多加考慮，如果對網站進行了較大的改動，搜索引擎會需要一段時間對改版後的網站進行觀察。至於具體時間，這取決於網站所做改動的程度，如果改版後的網站從主題和內容上與舊版網站相比有著很大的區別，那麼這甚至有可能導致被搜索引擎放棄對網站的收錄。

4.關鍵字的因素

每一個網站都有自身的關鍵字，而這也往往和網站的價值息息相關。如果一個網站擁有質量很高的關鍵字，那麼當你著手對網站改版的時候必須要考慮到這個因素。如果貿然對網站改版而未對所存在的關鍵字以及各種流量來源數據進行詳細分析，那麼網站改版後很容易會丟失某個關鍵字所帶來的流量。例如，“千盟網絡”這個關鍵字每天可以為你帶來300個意向訪客，如果網站改版的時候沒有將這個關鍵字的因素考慮進去，那麼網站改版後很可能會失去“千盟網絡”這個關鍵字所帶來的流量，這對於網站的損失是不可估量的。

5.反鏈接的因素

外鏈接在某種程度上來講會對網站的權重有著至關重要的影響，一個有著廣泛的反連接的網站會比相對於反連接較少的網站能獲得更大的權重，而權重較大的網站對於在搜索引擎的索引排名上有著舉足輕重的影響。如果改版不慎，造成大量的無效鏈接或者丟失掉一些權重高排名好的鏈接，這也並非什麼好事。

在做網站改版方案的時候應三思而後行，前期規劃必須要做好，當然，對於改版後的網站也應該准備好足夠的耐心等待訪客和搜索引擎的接受和認同。如果因為改版而致使網站失去信任、影響形象，那麼改版就沒有了意義，不管你改得有多麼的完美，充其量也只是一個雞肋而已。

雖然已經是個很古老的議題了，不過感覺依然有很多站長朋友在做網站的時候並不是非常注意這種細節，使用target=_blank並非絕對錯誤，不過為了提高網站的可訪問性，應該分場景探討如何減少新開窗口。

拋開某些不合邏輯意圖不論，為什麼大量使用彈出頁面？因為設計師擔心用戶迷失方向。為什麼用戶會迷失方向？因為導航系統不夠好。為什麼導航系統不夠好？因為產品功能太多太亂。為什麼功能太多太亂？因為需求沒控制好。為什麼需求沒控制好？因為提需求的人自己也沒想清楚。

說白了，很多場合都不僅僅是設計師的問題，因此只能選擇不斷妥協用劣質方案堆砌豆腐渣結構體系。快節奏中有些事情沒法避免很正常，但設計師應該盡責做到迭代式的全局統籌重構。

應該強制target=_blank

1.文件下載鏈接

2.文件打印鏈接

3.非主線任務並打斷進程的鏈接

以上參考淘寶的老包同學在08年總結符合國情的鏈接新窗口打開中的應用場景。下載各種文件、打印各種文檔，需要前後對比的幫助，注冊表單的隱私條款都有必要target=_blank。

能夠定論target=_blank必然提升用戶體驗的場景很少，並且個人認為隨著客戶端技術的發展，會被逐步取代。比如lightbox這個 ajax應用，給設計師帶來了“查看大圖不用再新開窗口”的全新設計理念，這在以前是不可想象的。

可選擇target=_blank

1.跨域名鏈接

2.跨應用平台鏈接

3.布局改變鏈接

主域名更換比如友情鏈接、網志內嵌的關鍵詞外部鏈接等，而跨應用平台的鏈接通常也得更換二級域名。如果全部不新開窗口，為了避免意外跳出，應該先提醒用戶這是外部鏈接；如果部分新開窗口，那麼應該有統一規則進行約束，並明確告知將opens new window。見過三類案例：

msdn例子，icon告知用戶這是站外鏈接。

gblog例子，icon告知用戶這是站外鏈接，同時可以點擊target=_blank。

egloos（韓國）例子，觸發時才icon告知用戶這是站外鏈接，也可以點擊target=_blank。

來自sitepoint的Neil Turner文章補充了三種形式，大同小異。值得一提的是，有個使用title提示open in new window的案例，其實也符合使用Title提升可訪問性中提到“操作指引”的應用。

版面改變如列表頁與內容頁的區別，用戶需要在內容頁長時間閱讀，每次都返回列表進入其實更不方便。最典型是Google大概在06年初做出的改進，給搜索結果列表鏈接默認target=_blank，這個例子幾乎同時滿足以上三個條件，並且提供默認設置自定義改回去，100%保險。

不能強制target=_blank

1.導航鏈接

2.tab條目鏈接

3.返回操作鏈接

4.翻頁鏈接

5.表單

特殊的網站地圖、索引表也屬於導航，都應該給用戶最大的控制可能。不管全局導航、局部導航、輔助導航、上下文導航，還是友好導航，都建議杜絕 target=_blank。比如wordpress程序的sidebar容器內，幾乎所有站內鏈接都是導航，target=_blank會嚴重影響可訪問性的流暢感。

tab是很常見的頁面內容組織形式，但不管直接隱藏顯示、異步加載顯示，還是類似導航的跳轉，都不建議target=_blank，因為此時用戶更加期望模塊內的變化，或者在當前窗口載入新頁。

另外，導航鏈接與返回操作鏈接有部分重合，比如面包屑導航，分級往回點其實就是返回操作。在任何頁面進行返回操作都代表當前頁面已經不需要了，因此不能新開窗口。這個返回包括點擊logo返回首頁，同時也是能碰到的典型錯誤之一。

表單的場景比較寬泛，比如注冊、登錄、搜索都應該杜絕target=_blank。大量字段的數據表單提交有條很重要的可用性規范，點擊返回應該能保留數據，這點wordpress後台錄入很出色。

總結

基本可以廣義概括為只要影響訪問、操作流暢度的鏈接，都不建議target=_blank。其實不管什麼規則，只要沒有清晰邏輯傳達給用戶，都會造成意外。只不過設計難點在於，無法准確判斷這個意外是否在用戶所期待的可接受范圍之內。

既然用戶所期待是否需要target=_blank的場景不好判斷，但是應該強制、不能強制這兩類常見錯誤場景相對容易達成共識，因此個人認為還是容易找到解決問題的思路。簡單例子不再贅述，有機會另補充。

Lecene框架

二、緩存

實現頁面級的URL緩存

三、生成靜態文件

比如說，一個首頁可能會員由多個部分組成，每個模塊生成一個靜態文件，然後才用服務器端包含SSI技術進行組裝，其默認的後綴是.shtml

四、靜態文件分布存儲於獨立的服務器

CSS，JS，圖片，文件等，用一個Apache服務器來處理請求

五、分布式開發

各服務器間的數據同步，像新浪一樣發區域的服務器數據的同步；便於使用服務器的集成，服務器可分為：WEB服務器、Session服務器、數據庫服務器、靜態文件服務器等等，一個WEB服務就可能由幾十台機器集成後共同提供服務，負載均衡器的使用

六、數據庫的拆分

數據庫表的拆分和數據庫表字段的拆分

七、搜索引擎優化

SEO

八、訪問監控

JMS

九、單元測試，高並發訪問測試

十、開發文檔的制作

E-R圖，類關系圖，需求說明書，詳細設計說明書，數據字典等

十一、動態部署

Ant等工具的使用

十二、表單提交驗證

客戶端驗證和服務器端驗證，有一點要注意和說明的是：通過服務器端驗證失敗後，要返回到客戶表單提交前的頁，並把客戶提交前輸入所有的信息顯示出來，提示客戶出錯的地方以便其進行修改。最好是可以定義一些全局的驗證規則，如果E-mail的驗證

十三、AJAX異步調用技術的使用

遮罩層的使用，應用於部分數據的驗證如果登錄名，加載等待信息的提示

十四、各項數據的備份

有獨立的備份服務器，做到數據的同步備份

最近的調查顯示有超過47%的大眾用戶更喜歡亮色調的網頁設計。內容的可讀性是主要原因。大多數的用戶不喜歡亮文字內容顯示在深背景上，這樣的對比 效果是比較刺眼的，給人不舒服的感覺。相比之下，有10%的設計師通常選擇深色調來設計網頁，同時36%的人認為應該根據網頁的具體風格要求進行選擇。

這片文章，我們將討論一些如何讓你的下一個深色調網頁設計更能吸引、打動廣大瀏覽者的方法和技巧，真正做到讓你的設計表達你的創意。

多使用留白

或者應該叫“留黑”？合理有效的使用留白對於任何風格的設計來說都是非常重要的。但對於深色調的網頁設計來說它則是必須的。

深色調的網頁設計給人總體的感覺是“沉重的”，如果整體布局結構淩亂更增強了給人沉重的感覺。下面展示了一些比較受大眾喜歡的深色調網頁設計，他們 合理使用了留白達到很好的設計效果。

Black Estate是 互聯網裏深色調網頁設計的一個而已，設計確實很棒並值得我們研究學習。設計自始自終都在合理、有效的使用留白，如何在設計元素周圍有效的使用了留白，從而 設計出了這樣講究的網頁。

logo標志周圍留有大量的“留白”，作為瀏覽者我們首先看到的就是它，其次看到的才是主要內容與右邊的瓶子。正如你所看到的，留白是用來突出瓶子 上的亮文字內容與內容標題。

Tictoc的主要特 點就是它在內容、裝飾圖片周圍留用了大量的“留白”，當我們繼續往下瀏覽時，我們看到使用了很少的留白，從而將我們的注意力 集中在到下面的具體內容上面。

這裏的關鍵是，留白起到了引導的作用，逐步引導用戶瀏覽這個頁面。

網站通過使用大量的留白從而增加了深色調設計的層次，留白僅僅是為了實現深色調的效果而已

Mark Dearman網 站的框架結構自始自終采用靈活的、均勻的分布式布局進行留白。

留白為每一個相鄰的內容板塊裏面的內容提供了大量呼吸、停頓的空間。當進入到下一板塊內容的時候，它們之間的留白是一個很好的休息地點。

留白對於深色調網頁設計來說是必須的，它不但有助於解決布局的淩亂、散亂，同時也是網頁設計增強整體感很重要的元素。

最早看到這張圖的時候，還覺得能產生這個不可思議，因為當時是在創業型公司，而且之前經曆的即使是大公司也都是創業型的產品，小團隊的好處 就是勤溝通，常交流，從設計到開發階段，每個人都在參與和思考，目標一致，所以一直覺得這個圖片算是誇張誇大了信息的傳達，直到今天有了教訓，開始思考。 其實問題本沒有這麼大，不過對於這類問題，寧願放大了想。

上面的這個結果一定是最糟最壞的，也是所有人都不願意看到的

產品本身就是失敗的了
浪費了大量的人力物力
對每個人的打擊也都是很大的
耽誤了時間，浪費了市場機會
但是如何產生的？我開始問自己，靜下心來想想可以理出來幾點原因，當然，回憶原因的目的是為了更好的解決問題，從避免到杜絕這種問題的產生。

1.前期思考的不到位：在單頁面複雜交互的時候，單純的靜態demo無法完整的顯示全部的邏輯，包括各種分支。過去在做產品的時候對於複雜的頁面都會做一個單頁面的邏輯圖，用來校驗整體的邏輯設計，交互設計。但是現在看看，這個方式對於更複雜的交互可能多少還是力不從心。
2.信息表達的不到位：如何通過合理的方式來展示出交互邏輯依然是一個值得思考和嘗試的問題，及時通過axure可以實現部分交互，但是在更多複雜的情況下是無法滿足的，同時大量的制作和維護成本無法適應快速調整和變化的設計節奏。後面還是需要考慮更有效的表現方式。
3.信息傳遞的不到位：產品的設計完成只能是50%,，設置是小於50%。其他的比重是開發和實施階段。這個階段實現的方式和質量的保重尤為 重要。真實的實現產品的功能邏輯，同時需要考慮未來產品功能的擴展，對運營市場等活動的支持等，需要多方考慮。同時如何有效的傳達功能的邏輯是需要考慮 的。
4.需求變更後的驗證：需求的變更和調整是一定會存在的，記得一句話：唯一不變的就是變化。變化是無法完全避免的，但是發生變化之後，調整產品之後還是需要完整和細致的重新檢驗一下新的設計，在滿足變化的同時，是否增加或者複雜了操作方式。
5.前端技能的缺失：雖然具備一些前端技能的基礎，但是對於AJAX的了解依然不夠深入和系統，否則應該可以在異步同步數據處理方式上盡早的發現一些問題和隱患，盡早避免問題的產生。
6.沒有盡早的投入到測試當中：產品人員需要盡早的投入到產品的測試當中，在研發的時候就需要與開發人員進行緊密的溝通，尤其是影響產品的關鍵環節
7.多項目並行：多項目並行導致思考的內容和方式在不斷的轉換，中間容易產生“斷檔”，導致前後思考的方式方法不一致，最終會影響到產出的質量。雖然有時“對產品麻木了，可以放一段時間回來看，能發現問題”，但是這個方式一般是對產品整體流程或單個“靜態”的點是有效的。
總結一下，發現比較理想的環節就是：設計->驗證設計（自我）->表達設計->驗證設計（開發/產品/其他相關）->開發->驗證設計->測試。提高驗證設計的頻率和調整驗證設計的環節是很關鍵和必要的，同時配合前端技能的提升。

一、注重產品細節

知乎模仿的是“Quora”，這是無需證明的。但是，正如Keso所說，創新不等於無中生有，山寨也不等於全盤照搬。知乎並不是全盤照搬Quora，而是在細節方面做了很多改進：

1、知乎可以在首頁“不感興趣”一個問題

2、在一些答案比較少的問題中，知乎默認推薦了一些潛在的回答者

3、知乎會給新問題推薦一些可能的話題

4、知乎針對漢字閱讀體驗方面做了很多本地化工作

知乎在細節的追求上簡直到了苛刻的地步。舉兩個例子：

1、打開知乎首頁的時候右上角不會馬上彈出問答或者關注的提醒，需要等幾秒或者刷新一次才能顯示，原以為是知乎的Bug，一問之下，才知道是知乎的產品設計師有意為之，就是讓用戶一開始就將注意力集中在問答上，不讓任何外在因素幹擾。

2、在知乎的問題頁面，如果你點了一下回答問題的框，即使你沒有輸入任何一個字，知乎也會自動為你保存為草稿，之所以這樣做，是因為知乎的產品設計師認為，既然你點了回答問題的框，就說明有回答的欲望，至少對這個問題比較關注，所以為你保存草稿。

二、從零開始打造高質量社區

至少就目前來說，知乎上的問題和回答水平是很高的，這在論壇式灌水之風盛行的中文互聯網實屬不易，為什麼知乎的內容質量能如此之高？這裏面有2個原因：

1、提高用戶門檻

“能給我一個邀請碼嗎？”

這幾乎成了近期IT業內聽得最多的話。沒錯，知乎從一開始就采用了邀請碼制度，提高了用戶加入社區的門檻。

采用這樣的機制，對打造高質量的社區有很大的好處。一方面獲得邀請的人會珍惜這一來之不易的名額，會大量參與社區活動；另一方面，通過嚴格的控制，將潛在的“潛水者”隔開，從而提高整個社區的用戶活躍度。

2、社會認同心理

看到一群人看著天，也會跟著去看；看到乞丐碗裏有很多錢，就會跟著去放錢；看到一個地方很幹淨，就會自覺地講究衛生……這就是社會認同原理，或者叫做從眾心理。

知乎的前輩用戶們已經營造了一個很好的、高質量的問答氛圍，知乎用戶諶斌一句“談笑有鴻儒，往來無白丁，無微博之亂耳，無SNS之勞形”形象的描繪 了知乎的社區氛圍。給我邀請碼的老師一再叮囑，一定要高質量問答，要活躍，我唯唯諾諾，問問題之前，先Google一下看有沒有答案，回答問題之時，仔細 檢查有無錯漏之處，知乎的從眾效應由此可見一斑。

當然，社會認同也不是萬能的，一旦有人從中灌水，就會引發一連串的連鎖反應，這就是破窗效應。知乎應該早就意識到這種威脅，所以，一方面繼續采用嚴 格的邀請制度，另一方面采取了許多措施來抑制破窗效應。比如對提問類型進行了限制，允許用戶舉報重複、低質量的問題和隱藏“沒有幫助”的答案等。當然，破 窗效應的威脅依然存在，如何在用戶數量和質量之間找到一個很好的平衡點是知乎下階段面臨的一個難題。

三、滿足用戶分享的欲望與建立威望的需求

知乎幾乎沒有任何激勵機制，沒有積分、沒有相應的等級提升體系，更沒有任何形式的物質獎勵，但用戶的參與度卻是很高，為什麼？

因為知乎滿足用戶分享的欲望，同時滿足了個人建立威望的人性需求。

知乎抓住了人性中的一個優點：分享。人其實是渴望分享的動物，有件趣事沒有人分享就好比女人穿著件漂亮衣服卻沒有人問她在哪裏買的一樣難 受，Keso說他之所以在知乎上如此活躍是因為“中國互聯網在滿足像我一樣的人的需求方面，做得太少”，而知乎，正好給了他們一個高質量的分享舞台。

當然，分享的前提，是高質量的問題，最好是激起你回答的欲望乃至不回答都不舒服的問題。再者，這個分享其實也是有回饋的，他能讓你建立威望。你回答 得越多，就越顯得你知識淵博，你的威望就越高。這恰好滿足了馬洛斯的需求金字塔中最高層次的需求——自我實現的需求。猶太裔人本主義心理學家亞伯拉罕·馬 斯洛（Abraham Maslow）提出的需求層次理論，將人的需求劃分為五個層次。

如果說微博、SNS等產品是滿足了人的社交（社會關系）需求的話，那麼，知乎等問答社區則是滿足了人的最高層次的兩個需求：尊重（社會承認）和自我 實現的需要求。尤其是在這個“往來無白丁”的精英社區，回答的問題被精英、名人所“贊同”和“感謝”，頂層需求的強烈滿足感比其他任何激勵措施都更加持續 有效。

四、社會化問答服務還有很多地方值得探索

這篇文章僅僅從產品層面出發，簡單闡述知乎值得我們關注的3點。如果剝離知乎這個表體，我們更多的是在討論社會化問答服務。

包括Quora、知乎在內的社會化問答服務正在運用群體智慧為未來的語義網架設一個“話題層”。《商業價值》的“Quora改變了什麼”有一段能很 好得闡述社會化問答服務的價值：如果Google在某種程度上被替代，就像它替代雅虎等模式一樣，那麼替代它的一定是更經濟而高效地為用戶提供答案的公 司。正是沿著Google的車轍，我們現在同樣看好社會化問答的商業前景。只要它能把建構語義網上“話題層”這一件最重要的事情和方法繼續發揚光大，它也 許就是下一代搜索引擎和電子商務的入口。有一天，它的市值會超過亞馬遜和eBay。

響應網頁設計的關鍵特征
認為網頁設計是“響應”的，需要有三個關鍵牲。網頁設計師和開發者Ethan Marcotte——提出響應網頁設計的人——將這些特征描述如下：

網站必須以靈活的網格為基礎構建。
設計中包含的圖片也必須是靈活的。
在不同的環境中必須可以通過媒體查詢擁有不同的視圖。
CSS-Tricks根據瀏覽器窗口的大小改變它的網頁布局。

重要的是要注意所有這三個特征都必須實現，以使真正的響應網頁設計生效。

任何缺少這些特征的設計都不是一個響應網頁設計。它是不可改變的。

接下來，讓我們來深入研究這三個特征，以更好的理解它們如何融合並給我們帶來完整地響應網頁設計。

靈活的網格

網格這個術語對於網頁設計來說變得很含糊。說你的網站必須由靈活的網格組成並不意味著你被限制於從幾十個現有的很棒的網格系統中選擇一個。

對於列，間距和容器定義自己的參數對於網頁設計來說往往是最好的方案，並且可以與任何現存的系統一樣靈活。

事實上，大多數存在的網格系統都限制於使用CSS類來定義大小，間距和排列。試著附加這些限制到一個響應網頁設計上可能會很棘手並且比寫自己的布局更浪費時間。

不管你是使用預置的網格系統還是使用自定義的解決方案，靈活網格系統真正重要的地方是你的布局大小和間距的機制。

對於網頁設計者，這意味著要放棄我們心愛的像素，並用百分比和em這樣的相對測量單位的網頁布局代替它們。

當然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，Fireworks等）中使用像素。取而代之的是，增加的一個需要簡單的數學計算的步驟成為網頁設計過程的一部分，因為我們要將我們的像素轉化為使用相對單位的網頁布局。

St Paul’s School網站使用了靈活的網格布局，它可以根據瀏覽器的窗口大小改變布局，布局的改變以平滑的動畫來展示。

靈活的圖片

圖片隨著我們的靈活的網格移動和縮放是響應網頁設計的更一個關鍵特征。靈活的圖片常常讓網頁設計者有些頭疼。加載一個區大的，超出大小的圖片，並在 更小的瀏覽設備我們需要更多的空間來顯示內容時使用HTML的width和height屬性來縮小它不是一個加快網頁加載速度的很好實踐。

當然，這個問題有多大取決於圖片對你的網站帶來的壓力有多大。隨著網頁設計發展，我們看到網站越來越少的使用沒有必要的圖像和圖片庫。可能這是一個好機會去評估你的網頁設計是否需要像現在這樣多的圖片。

另一個縮放圖片的方法是使用CSS裁剪它們。CSS的overflow屬性（比如說overflow:hidden）讓我們能夠動態地裁剪圖片，並使得周圍的空間能夠適合新的顯示環境。

我們也可以在服務器上有多個版本的圖片，並且根據用戶agent等服務器或客戶端特征檢測技術動態地使用不同大小的版本。

最後我們可以完全隱藏圖片，如果我們真的希望關注無圖的內容，可以在樣式表中將圖片設置為display:none。

Think Vitamin中的圖片元素是靈活的，它們根據瀏覽器窗口大小縮放。

媒體查詢

媒體查詢對於響應網頁設計無疑是最令人興奮（也是對於不熟悉它們的人最可怕的）特征。

人們時常會對媒體查詢有錯誤的理解，把它當作是一個響應設計的核心部分而認為靈活是可有可無的。真實的情況是，如果沒有實現包括靈活網格和靈活圖片在內的堅實的HTML和CSS基礎，媒體查詢幾乎是沒有用的。

媒體查詢允許設計者使用相同的HTML文檔創建多個布局，通過基於用戶agent特性（如瀏覽器窗口大小）來選擇不同的樣式來實現。其它參數有方位，屏幕方案，顏色（即屏幕可以渲染多少種顏色）等等。

下面是媒體查詢根據窗口寬度來選擇樣式的例子：

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

媒體查詢沒有明確是移動解決方案還是平板方案。取而代之的是，媒體查詢和響應設計允許我們跳出屏幕大小或方案來思考，並且開始創建一個靈活的適應所有不同媒介的網站。

響應網頁設計到底是什麼

雖然我們研究了響應網頁設計的三個特征，但是好像真的沒什麼值得興奮的。事實上90%構成響應網頁設計的是良好的網頁設計的開頭。組織良好的 HTML和靈活的布局對於現代網頁設計來說是日常工作的一部分。Marcotte提倡響應網頁設計所做的事就是向我們展示一種新的方法來實現我們不管如何 都本應該做到的良好設計實踐。在現代環境下，提供靈活的布局更加有必要，這樣我們可以更好的適應現存的多樣的瀏覽情況，我們要設計得更流暢和靈活。

響應網頁設計讓我們關注於花時間去做正確的事，不僅僅是我們如何寫代碼，而且是構思新想法和執行新的設計。

這還不夠

任何有過創建靈活內容和媒體查詢經驗的人都會意識到這並不是創建適應每一個用戶agent網站的最終的，一切的解決方案。用戶通過不同的瀏覽設備瀏覽網站通常會有不同的需求，這取決於他們使用的設備。

移動瀏覽器用戶可能最關心的是可以盡快地訪問到最核心的信息。對於酒店來說，可能是菜單，服務電話號碼，物理地址以及樓層等。對於這樣的情況，下載整個網站並顯式的隱藏90%的內容並不是一個完美的方案。

正確的方向

響應網頁設計是正確方向上的一步。許多網站堅持從響應設計中獲取很多好處，並且每一個設計師肯定應該能夠執行這個方案並尋找優化他們的設計的方法。

當設計者地在適應各種設備和情況的解決方案上不斷進步，設備也盡可能地努力在顯示網頁上尋找最完美的和直接的方法。

兩者相輔相成，我們就必然會有越來越多的機會來創建更動態，更有魅力並且更美麗的Web世界。

而那就是值得奮的事情了

就所提問題而言，我目前還是堅定的“不空格”派系，我不否認“空格”後效果的提升，但不能完全解決問題，有利有弊。既然效果並不十分理想，再綜合工 作量、可維護性而言，我認為意義實在有限。或者更悲觀的認為，要想達到完美的效果，必須手動調整，沒有完美的可控程序邏輯。道理如同圖書排版，真正排版出 色的好書，都是一頁頁手工定制的，排版效果必須跟著內容走。

這個問題在專業網頁設計上講，我認為可歸類於“內容排版”，與用戶體驗中“可讀性”直接相關。平面設計裏好像叫“字體排印”，我認為同樣應該用“可 讀性”指標來衡量質量。但受限於網頁構成原理，我認為在網頁中，空格影響的不僅有“內容排版”，還有“頁面版式”問題也很典型。“內容排版”主要指內容層 面，“頁面版式”主要指結構層面，下邊分開來討論。

內容排版的空格

目前互聯網上內容裏，中英文混雜已經非常普遍，並且可以放大理解為“中西文混排（自己基本只用英文，所以後續都寫“中英文混排”）”。不僅僅是英文單詞的使用，各種英文術語和縮寫已經完全融入了普通人生活。尤其在信息爆炸的互聯網上，此問題表現的比較突出。

我最早看到和自己寫的中英文內容，全部都是連著寫，不會考慮加空格。後來是在一些很專業的網站上發現，原來還有在中文、英文之間加空格的說法，尤其 翻譯過來的技術參考裏。很容易想到，這種寫法是為了更好的區別不同語言，以免造成閱讀上的“粘連”障礙，加空格後確實極大提升了“可讀性”。（梁海更專業 的觀點原文“文字的交界處應該是個盡量平滑的過渡，盡量滿足雙方文字的需求，並且讓文本的節奏盡量平穩。”）

但同時我發現，影響“中英文混排”效果的原因其實很多，在網頁設計中不僅僅只有“加空格”手段來優化。比如更改字體，因為在計算機系統裏英文的選擇其實很多，不比中文“宋體”的單調。不同的英文字體，不僅對比中文的大小比例不一樣，而且前後粘連的距離也不一樣。

2003年前後，我最常用的字體是Arial, Tahoma, Verdana，對比同樣字號可以發現，Arial最小而Verdana最大。於是在我們當時的理解裏，中英文混排最好用Verdana，如果沒記錯當時 的微軟官方網站用的就是，我特地到一些外企中文網站驗證過。

2005年，我開始大量閱讀Blog後，我發現Wordpress默認風格的“中英文混排”效果不錯，查後得知人家用的是Lucida Grande字體，此後我開始有意識的關注“中英文混排”效果不錯的個人Blog，以便提取“可讀性”更好的字體，這個事情如要自己實驗會很麻煩。但請注 意，當時Wordpress其實沒多少人用，甚至還沒有Movable Type的用戶多。

其實一開始我也嘗試過給英文兩邊加空格，但確實麻煩。而且有個細節不知是否有人關注過，某些字體（具體哪些字體未深入測試）定義“空格”的寬度會因 左側是中文或者英文而不一樣。也就是說，給一個單詞兩邊加上空格後，會出現左邊寬、右邊窄的效果，這點我也無法接受的。而在有了通過“字體”解決的思維方 式後，更完全拋棄了“加空格”的想法。再往後，又先後認識了Helvetica, Calibri等等優秀字體，所以用起來還算綽綽有餘。

單就字體而言，學問很大，還有清晰度、襯線等方面的可讀性影響因素，而且在不同客戶端瀏覽器下表現也可能有差異。比如我知道不同字體的下劃線也會很 影響可讀性，Tahoma的下劃線就是緊挨文字的。這裏只談空格，我也不是專業搞研究的，所有結論均出於實踐經驗。目前我個人網站上用的就是 Calibri，個人博客上還是Lucida Grande，我認為混排效果都不錯。

頁面版式的空格
結構層面的空格主要在HTML結構代碼裏，很多時候我們需要針對不同標記的內容做間隔。之前我的做法，都是自然空格，就是在HTML代碼裏敲入一個 空格。但慢慢我發現，第一不易做像素級的精確控制，第二不同客戶端下的空格寬度解析不一致，這在做跨瀏覽器兼容時很重要。而且我很快意識到，代碼裏做空格 不符合“結構、表現”分離的原則。於是，後來我把所有需要“空格”效果的內容全部用CSS的margin定義解決，想空就空，想空多少隨時可以改。

很快問題又來了，通常高保真原型裏沒有的空格，但研發工程師做的測試原型裏卻有。這是因為在客戶端代碼裏，換行就算一個空格。工程師在做應用層開發 時，往往不那麼注意，通常為了看代碼方便而隨意空行。還有類情況是可能使用了某種控件或者特殊語句，甚至還有查不出來的情況，這這種事我也碰到不少。

當然，這種雞毛蒜皮的細節問題，往往不會放多高的優先級，但多了確實影響效果。其實也不是沒有解決辦法，可以通過CSS語句word-spacing:-3px;來定義讓空格失效，通過局部控制靈活應對，最近試的效果還是挺不錯。

回到前文“內容排版”的問題，如梁海所提，通過結構層處理統一為英文加上標記，如<span lang=”en”>Manual of Style</span>，我認為是不可取的。第一太過麻煩，第二理論上可以用JS直接判斷中英文。總的來說，我認為單獨控制“內容排版”中 的英文都有點多此一舉。