問題概述

  使用者想放大圖片以便在更高解析度下檢視細節資訊。

示例

用途

• 用於當正常尺寸顯示的圖片解析度不夠高，使用者無法瞭解圖片中的細節資訊時；
• 用於當下載全部圖片的全尺寸及詳細版檔案比僅下載感興趣圖片的同樣檔案佔用更多頻寬時[1]；
• 用於當顯示圖片的全尺寸及詳細版檔案不符合網站設計思路時；
• 用於當顯示圖片的全尺寸及詳細版檔案妨礙使用者概覽圖片時；
• 用於當下載每個圖片的全尺寸及詳細版檔案所花的時間與給使用者的價值不成比例時。不是所有的圖片對使用者都有相同的吸引力，僅在需要時才顯示高解析度圖片。

解決方案

  提供方式讓使用者能縮放圖片以便檢視圖片的細節資訊。   從服務商的角度看，重要目標之一是僅在需要時才載入高解析度的圖片，不要預先載入，這樣才能節省頻寬。   一種直觀的方法是允許使用者點選圖片上任意位置，使用者點選圖片進行放大，網站就預載入該圖片的高解析度版本檔案。   在圖片上提供圖形或文字方式的放大方式，僅是圖片本身並不支援縮放功能[2]。

說明

  允許使用者放大圖片，探索圖片中的細節資訊。考慮到縮放因素，一開始就顯示整個高解析度影象無法讓使用者概覽整個圖片，因此使用者也無法瞭解圖片細節資訊的背景[3]。   有了圖片縮放功能，使用者可以放大圖片上其感興趣的某片區域，這樣就不會被圖片上的其它細節資訊所幹擾。

原文地址：http://ui-patterns.com/patterns/ImageZoom [1]原文：Use when downloading full-sized and detailed versions of a all images takes up more bandwidth than you’re interested in sharing. [2]原文：Provide graphics or text about zooming in on the image; a bare image will not suggest zoom functionality to the user in itself. [3]原文：Depending on the zoom factor, showing the entire high resolution image from the beginning will not provide the user with an overview of the entire image thus removing the context of the details viewed.