簡單的縮圖規則

簡單的縮圖規則

在現在的網站上,多媒體資料佔了許許多多的資訊空間,許多時候我們都會需要製作縮圖(Thumbnail)來增加可以容納圖片的空間,或是減少圖片的檔案大小,以增加網站的整體速度。但是許多網站在製作縮圖的時候,都缺少考慮圖片的可讀性,讓這些原本包含許多資訊的圖片,在縮圖之後就變得無法辨識。當然,越容易辨識的圖片越容易讓使用者瞭解,也越能增加圖片的點擊率和瀏覽率。接下來,我們利用上面這張照片來解釋縮圖與可讀性的關係。

一般而言,我們將縮圖的方式分為兩種:縮小(Resize)與切割(Crop)。縮小是將整張圖直接縮至我們所需要的大小,切割則是切除圖片四周我們不需要的部份,只留下我們需要的大小。以上面這張圖為例,下圖的左邊使用的方法是縮小,右邊的方法則是使用切割。我們可以很明顯的看出來,使用縮小的時候,照片裡面的吉他手整個都縮小了,我們失去了許多重要的線索,甚至我們也無法看清楚吉他手的性別,但縮小可以保留圖片四周的環境與背景。如果使用切割,圖片中吉他手的的大小則不會有改變,可是四周的背景消失了,我們無法判斷他到底是一個人在演奏,還是旁邊有其他的樂手,四周的環境與背景也都被切割掉了。

比較好的方法是,如果我們需要製作 1/10 的縮圖,先進行 0.32 的縮小,然後進行 0.32 的切割。換句話說,如果你要縮小一張圖至 1/10,那麼你應該先縮小 sqrt(1/10),然後切割 sqrt(1/10):

縮圖 A = 縮小 sqrt(A) x 切割 sqrt(A)

結果就如同下圖所示:

如此一來,我們便可以同時保留大部分的畫面細節與環境資訊,讓使用者能夠容易得取得圖片的內容,以提高這張照片的可讀性,也能夠大大的提高網站的整體使用性,方法雖然簡單,卻也容易被忽略,許多重要的問題都是從這種小細節裡面產生的呢!

Image via garryknight, CC License.

對設計師而言,準確地掌握作品最後呈現在觀賞者眼前的效果是控制品質很重要的一個環節,如果是平面設計,從一開始的設計、選紙、打樣調整、輸出…都是為了讓最...
Apple 公司於 2012 年 9月 2 日於舊金山發表了 iPhone5 手機,首次更改螢幕尺寸的動作讓許多開發人員與使用者與之嘩然,還記得 iPhone5...
清單視圖(List view)為一常見又方便的介面控制元件,它主要是利用清單的方式來呈現一堆具有相似格式的資訊, 使用者可以輕鬆透過它預覽大量資訊,找尋有興趣的...
視覺設計在產品組成中佔了極為重要的成分,它直接影響了使用者對於該產品最初的觀感、使用時的體驗以及最後留下的印象等等。甚至在許多時候,產品的成敗與否,往往就取決於...
突現的動態效果在介面中能夠有效的吸引使用者的注意,可引導使用者點擊並開啟特定功能或訊息,常用於逐步的使用教學與訊息提示中,但當動態效果過多的時候,不但對使用者除...
巴普洛夫(Ivan Pavlov)是個俄羅斯的科學家,他利用狗做實驗:每天搖鈴鐺,然後讓狗看見食物流口水。重複了幾天之後,只要搖鈴鐺,狗就會開始流口水。鈴鐺就是...
© 2013 Desiring Clicks. All Rights Reserved.
Top