最近越來越多在博客上寫些UX相關(guān)的內(nèi)容作為分享，就涉及到跟普通博文不一樣的文章建構(gòu)問題。文章內(nèi)容固然很重要，但排版、組織也是提高可讀性和用戶體驗(yàn)的關(guān)鍵呢。于是乎在比較著名的幾個(gè)UX博客/網(wǎng)站上找了些值得學(xué)習(xí)的地方。

一、開篇

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

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

---

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

---

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

---

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

---

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

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

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

---

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

---

2. 圖片

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

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

---

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

---

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

---

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

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

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

---

3. 引用

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

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

---

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

---

圖13 ：引用讓累牘有喘息的機(jī)會(huì)

---

4. 其他

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

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

---

三、結(jié)束部分

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

圖15 ：Smashing Magazine上的延伸閱讀

---

圖16 ：UX Booth上的延伸閱讀

---

圖17 ：良好的參考文獻(xiàn)

總而言之 ……

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

來源：如何優(yōu)化UX博文的用戶閱讀體驗(yàn)？