最近越來越多在博客上寫些UX相關(guān)的內(nèi)容作為分享，就涉及到跟普通博文不一樣的文章建構(gòu)問題，

高效優(yōu)化博客的用戶閱讀體驗

。文章內(nèi)容固然很重要，但排版、組織也是提高可讀性和用戶體驗的關(guān)鍵呢。于是乎在比較著名的幾個UX博客/網(wǎng)站上找了些值得學(xué)習(xí)的地方。

    一、開篇

    如果你的文章內(nèi)容較長，開篇給出一個小總結(jié)、簡介或內(nèi)容綱要是不錯的做法。

    圖1：Nielson的文章全部一個板式，開首必不可少Summary

   

    圖2：Smashing Magazine的文章，一開始除了有內(nèi)容簡介，還會擺出相關(guān)文章。

   

    圖3：A List Apart的文章一開頭肯定在簡介旁邊配圖，風(fēng)格跟紐約時報很像

   

    圖4：很長的文章，像Usability Post這篇文章這樣給個綱要比較好呢，還能幫助直接跳轉(zhuǎn)。

   

    二、正文1. 標(biāo)題的樣式

    這是首要解決的問題，因為標(biāo)題是表示文章層次結(jié)構(gòu)的最佳手段。可以通過調(diào)整字體顏色、大小，加入分割線等來實現(xiàn)。好的CSS是一勞永逸的基礎(chǔ)哦~~~

    圖5：UX Booth用不同的字體顏色、大小表示層及關(guān)系

   

    圖6：Smashing Magazine 優(yōu)雅的二級標(biāo)題，以及一級標(biāo)題的分割線

   

    2. 圖片

    好的圖片能讓文章增色不少，必須是讀圖時代嘛。貼圖，也有點兒學(xué)問哦～～

    圖7：UX Matters的文章，圖題都在上方，且有清晰的標(biāo)識

   

    圖8：除了圖題還有說明文字？可參考下圖做法

   

    圖9：用框線將圖題與圖片裝在一起也不錯，不過比較花功夫吧

   

    除了做好圖題，保持全文圖表對齊的一致也是值得參考的做法，

管理資料

《高效優(yōu)化博客的用戶閱讀體驗》(http://www.lotusphilosophies.com)。

    另外，在文章開始以圖表意（如圖3所示），也是添加趣味性的做法哦

    圖10：Johnny Holland Magazine上的文章，開始都是一幅圖

   

    3. 引用

    我發(fā)現(xiàn)這是國外UX博文蠻常見的做法呢。中間穿插一些引用，可以適當(dāng)減低長篇閱讀的疲乏感哦！

    圖11：A List Apart文章中的引用

   

    圖12：UX Matters文章中的豆腐塊引用很經(jīng)典。有時候只看豆腐塊就夠了

   

    圖13：引用讓累牘有喘息的機會

   

    其他

    行與行之間的留白、恰當(dāng)使用編號列表都是提高博文可用性的重要手段。另外，Nielson還有愛用的一招是加粗關(guān)鍵字，也不妨學(xué)習(xí)學(xué)習(xí)。

    圖14：Nielson自己的研究表明，人們閱讀網(wǎng)絡(luò)文獻都是跳著挑字眼看的

   

    三、結(jié)束部分

   

    對于長文來說，給出個小結(jié)總是必要的。除此之外，“延伸閱讀”是一篇好的UX博文應(yīng)有的部分，讓你的讀者可以按圖索驥。如果有參考其他文章，請給出“參考文獻”部分，為你文章的專業(yè)程度加分~~~

    圖15：Smashing Magazine上的延伸閱讀

   

   

    圖16：UX Booth上的延伸閱讀

   

    圖17：良好的參考文獻

   

    總而言之……

    以上幾點不是什么八股的東西，畢竟文章個性很重要。不過作為本身研究UX的人，多多考慮讀者的用戶體驗嘛，也是應(yīng)該哈。當(dāng)然，最最重要的，還是內(nèi)容本身。