談 Web 的內(nèi)容（Content）、結(jié)構(gòu)（Structure）與表現(xiàn)（Presentation），現(xiàn)在可能有些晚了，只是正好想起，理理思路，共勉。

　　內(nèi)容是結(jié)構(gòu)的基礎(chǔ)，而非相反。內(nèi)容在一定程度上體現(xiàn)出一定的結(jié)構(gòu)，但并不是全部。原始內(nèi)容就相當(dāng)于數(shù)碼相片的 RAW 格式，未經(jīng)處理，但是即使未經(jīng)處理的內(nèi)容，也包含著一定的結(jié)構(gòu)，比如我們通過閱讀一段文字，可能包含著標(biāo)題、正文、段落（這些屬性是通過閱讀而發(fā)現(xiàn)的，而不是從表現(xiàn)上）等，這就是結(jié)構(gòu)。為了區(qū)分，內(nèi)容體現(xiàn)出來的結(jié)構(gòu)，我把它稱之為內(nèi)結(jié)構(gòu)（內(nèi)容結(jié)構(gòu)）。

　　以上僅針對一段文字而言�；ヂ�(lián)網(wǎng)的基礎(chǔ)是網(wǎng)頁和超鏈接，超鏈接形成了頁面流。這頁面流也是結(jié)構(gòu)的一部分，是交互設(shè)計的重點：對請求（Request）和響應(yīng)（Respond）的處理。這邊談到的結(jié)構(gòu)是不可能由內(nèi)容體現(xiàn)出來的，為了方便我稱之為外結(jié)構(gòu)（交互結(jié)構(gòu)）。

　　由內(nèi)結(jié)構(gòu)和外結(jié)構(gòu)一起形成了 Web 站點的結(jié)構(gòu)。這個結(jié)構(gòu)是所有表現(xiàn)的基礎(chǔ)。沒有這個結(jié)構(gòu)就不會有表現(xiàn)。結(jié)構(gòu)并不是 wireframe，wireframe 是結(jié)構(gòu)的一種可視化表現(xiàn)，是開發(fā)流程中的溝通工具。從內(nèi)容到結(jié)構(gòu)到表現(xiàn)，也是大部分網(wǎng)站設(shè)計的流程。

　　很多文章都忽略了內(nèi)容的重要性。內(nèi)容是網(wǎng)頁的基礎(chǔ)，本文所有涉及內(nèi)容的，僅指文字、圖像（不包括裝飾性的圖片）、音頻、視頻，不從邏輯學(xué)上去解釋這個定義，不然太麻煩了。那么交互過程中的提示反饋算什么？不能把它單獨歸于內(nèi)容或者結(jié)構(gòu)，應(yīng)該是兩者的結(jié)合。

　　通常大家在談及結(jié)構(gòu)與表現(xiàn)的時候，還會提到行為（Behavior），按照我的理解，行為應(yīng)屬于外結(jié)構(gòu)，也就是交互結(jié)構(gòu)。為什么要把行為單獨提出來和結(jié)構(gòu)、表現(xiàn)相提并論呢？我想可能是因為技術(shù)實現(xiàn)上的不同，因為 Web 標(biāo)準(zhǔn)的流行，談的最多的是結(jié)構(gòu)、表現(xiàn)與行為，三者分別由 (X)HTML、CSS 和 JavaScript 實現(xiàn)。在 HTML 中，結(jié)構(gòu)就是各種 HTML 標(biāo)簽和它的屬性，內(nèi)容就是被包含在開始標(biāo)簽和結(jié)束標(biāo)簽中間的數(shù)據(jù)。至于表現(xiàn)，就是 CSS 實現(xiàn)的部分。

　　信息架構(gòu)的工作，就是處理內(nèi)結(jié)構(gòu)和一部分外結(jié)構(gòu)，按照人們的心理（習(xí)慣）去呈現(xiàn)內(nèi)容；交互設(shè)計的工作，就是處理外結(jié)構(gòu)，并且以不影響內(nèi)結(jié)構(gòu)為前提；視覺設(shè)計的工作，就是在不影響內(nèi)容和結(jié)構(gòu)的情況下，處理內(nèi)容和結(jié)構(gòu)的表現(xiàn)。所以信息架構(gòu)師往往和交互設(shè)計師協(xié)同工作或者就是同一個人（往往跟隨著整個設(shè)計流程，包括表現(xiàn)方面的設(shè)計）。而視覺設(shè)計師反而是比較輕易區(qū)分的職位。

　　內(nèi)容、結(jié)構(gòu)與表現(xiàn)關(guān)系到生活、工作的方方面面。做一份 PPT、做一份報表、旅行計劃等，不僅僅是 Web。而更加結(jié)構(gòu)化的內(nèi)容將是 Web 發(fā)展的方向。