最近在進修一些 UI / UX 的書
對於使用者經驗很有感觸
以我部落格的教學文舉例
左邊是以前的版本，遇到圖片是白底時，圖片內的文字會干擾閱讀，很容易造成使用者在閱讀上的不連續
現在修正成右邊的版本
在圖片上面用一個黑框，讓讀者很明確的知道這是一張圖，圖片的範圍到哪裡，圖片上的文字不是我打的教學文，黑框的下面才是我打的教學文，還有若單純只加上黑線，四邊會有尖銳的角出現，所以改成小圓角的方式，可以修飾這樣強烈的視覺衝突感，讀文章時會比較輕鬆一點，另外框線避免用純黑色的，因為太深的黑色會干擾到圖片內的圖文，搶過圖片的主題，所以我選擇淺灰色的線，降低干擾，使圖片與框線可以更和諧一點
以上小小心得分享給大家
還好略懂 #CSS 語法，不然光是改圖，我就要少睡好幾個小時了
設定的方式可以參考我另外寫的這篇
