Blog文章的圖片點選互動問題

Blog 文章大多會有圖片作輔助
我長期寫文章的習慣是圖片不允許點選

不能點選，又無法改變大小其實會造成小小的問題
在太小的解析度下，你的文章版面會破版
在太大的解析度下，圖片太小，會看不清楚


讓我來三個可以點選的例子給大家參考

1. Desiring Clicks 是一個中文討論 UX/UI、設計心理學等相關資訊的好網站 (同事 aco 推薦的)
但我在閱讀網站文章時，一直會遇到一個不太方便的設計問題

以下面的文章為例：連結使用者熟悉的生活經驗

我是一個繪圖筆使用者，使用習慣會點選後拉動整體的頁面
並非滾動滑鼠滾輪 (筆電觸控面板也是類似的使用情境)
所以當我閱讀下面的文章時，偶爾會點到圖片


但當我點到圖片時，會直接開啟圖片 (原頁)
我必須回到上一頁，才能繼續完成閱讀
而圖片呈現的大小就是文章裡面原本的大小


這樣的互動算有問題嗎？
只有一個小小的問題，讓我們看第二個例子就知道





2. 這個例子是 Google 官方的Blog
http://googleblog.blogspot.tw/2012/08/the-self-driving-car-logs-more-miles-on.html

Google 官方的 Blog 版面都很一致，文章中圖片的大小也有限制
互動也跟第一個例子相同，當你點選圖片的時候，會直接開啟圖片


但是注意了！圖片大小是有差別的
這個 Blog 的圖片可以點選
主要目的是為了讓你點選圖片後可以看到較大較清晰的圖片
所以當我不小心點到的時候，比較沒有第一個例子那種"被打斷"的感覺
反倒會稍微看了一下大圖，再點選 [前一頁] 回到文章中繼續閱讀


再來，讓我們看一下第三種





3. 最後這也是 Google 官方的 blog 之一
Inside Search 主要講跟 Search 相關的新聞跟互動等資訊
http://insidesearch.blogspot.tw/2012/07/make-your-mark-on-google-with-handwrite.html

如果你的 Blog 文章的圖片有需要放大且願意讓讀者點選的話
這種才是最好的方式，使用 Lightbox (但個人覺得背景不要太黑會更好)

當我點選中間那張圈起來的圖片時



使用Lightbox的方式開啟，不會有中斷閱讀的感覺，還可以放大看清楚預設的選項







最後，還是想推薦 Desiring Clicks 這個網站，很多有關 UX/UI 的好文章。