Blog 文章大多會有圖片作輔助
我長期寫文章的習慣是圖片不允許點選
不能點選,又無法改變大小其實會造成小小的問題
在太小的解析度下,你的文章版面會破版
在太大的解析度下,圖片太小,會看不清楚
讓我來三個可以點選的例子給大家參考
1. Desiring Clicks 是一個中文討論 UX/UI、設計心理學等相關資訊的好網站 (同事 aco 推薦的)
但我在閱讀網站文章時,一直會遇到一個不太方便的設計問題
以下面的文章為例:連結使用者熟悉的生活經驗
我是一個繪圖筆使用者,使用習慣會點選後拉動整體的頁面
並非滾動滑鼠滾輪 (筆電觸控面板也是類似的使用情境)
所以當我閱讀下面的文章時,偶爾會點到圖片
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLmCTIhn_LdU0eb9-izKJeypiUP-dxbZvdIAsfFIuRRLFZaSMcJuB_oMXs_8TWIFpORizRkBRQSByUmYqNuv7Z8zv26MDcCCp8JQjnPHkxzRENfdUATzlIGqD5FVuZXeKXGi2bGTjv4Skh/s640/20120821_121006.jpg)
但當我點到圖片時,會直接開啟圖片 (原頁)
我必須回到上一頁,才能繼續完成閱讀
而圖片呈現的大小就是文章裡面原本的大小
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwzwfS-YCBJCdggjxTFpW1xywV8cODnuTpD37wn8Tq8LPTBS_R13YjVGiJvnruMM25MHV0bvlJ-ieJHpEcWeAuSMOQ5uwa8USdCgK7uKb_EoDdvH81XnIEwW31Tgt4DYh-z-_wpPA8PQld/s640/20120821_121026.jpg)
這樣的互動算有問題嗎?
只有一個小小的問題,讓我們看第二個例子就知道
2. 這個例子是 Google 官方的Blog
http://googleblog.blogspot.tw/2012/08/the-self-driving-car-logs-more-miles-on.html
Google 官方的 Blog 版面都很一致,文章中圖片的大小也有限制
互動也跟第一個例子相同,當你點選圖片的時候,會直接開啟圖片
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQnVs64hAmEOoBvYwPUPSY1TJ48-sW23P42CWbeKdLjvEamz84vqHVnhdNPOjZm33nyqyERx_wzzFncg_DG2UimqZU0_RrNtM3sOhZ8DaYvRHsZTc8NWLGnnpgtXfQ9OVvjoKY_Z5l037K/s640/20120821_121112.jpg)
但是注意了!圖片大小是有差別的
這個 Blog 的圖片可以點選
主要目的是為了讓你點選圖片後可以看到較大較清晰的圖片
所以當我不小心點到的時候,比較沒有第一個例子那種"被打斷"的感覺
反倒會稍微看了一下大圖,再點選 [前一頁] 回到文章中繼續閱讀
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_XHJmNPZlQ3tv-1IDO8d5UtrJnY4X3Mkbr4VRkJhwH6hRlapE_jCL7-MZuGsUSYKwG4bX2LTPivY68ieMSoUeMR-92WD5_qWhER5ZXYpZMbJszmc7KVh4U3maJs806MPyHSNTVrWlguat/s640/20120821_121122.jpg)
再來,讓我們看一下第三種
3. 最後這也是 Google 官方的 blog 之一
Inside Search 主要講跟 Search 相關的新聞跟互動等資訊
http://insidesearch.blogspot.tw/2012/07/make-your-mark-on-google-with-handwrite.html
如果你的 Blog 文章的圖片有需要放大且願意讓讀者點選的話
這種才是最好的方式,使用 Lightbox (但個人覺得背景不要太黑會更好)
當我點選中間那張圈起來的圖片時
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWOlbgQvD-41kOfbqHHFXgZtvh2QNDn4qEZuAjgcQ6IJ3bLCUa2TU1a2CPgUpnevE_ZE5GRMv_8hjKSL9RxIurKKQseWMiZq-Hr7EAfrdLT3rhWYFby0JnMKGeyHisWCwwhkpYbxvMlxk/s640/20120821_121210.jpg)
使用Lightbox的方式開啟,不會有中斷閱讀的感覺,還可以放大看清楚預設的選項
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMyCaKP8HiXf19cW9bgqzEKyw_3vxhiaA44hXL3Clabm5_u6aTmwJlY0TE48dLDROw1JI03bvDamMAO6gbQafxxp6mSSZPRQjL5mQh8pX8OI3sZv6JLAPU5n8NVWMZbo2c7IszYO0bQ_d/s640/20120821_121227.jpg)
最後,還是想推薦 Desiring Clicks 這個網站,很多有關 UX/UI 的好文章。
沒有留言:
張貼留言