天天看點

Panoramic 控件設計舉例

        在開發者社群,我被問的最多的一個問題就是“你能給我們一個關于Panoramas的例子嗎?”在之前的一些文章中,我們稱呼“Panoramic 控件”為“hub”,或者簡單的稱之為卷軸視圖,該控件使用一個水準的且長度超出螢幕大小限制畫布來呈現内容,非常獨特。這個形象化模型是WP平台的标志性元素,是以所有的應用程式都能用到它。事實上,在大多數情況下,panorama控件是使用者進入應用程式的時候首先看到的地方,這也賦予了這個控件更多的意義。

    首先,我們可以把panorama想象成雜志的封面。同樣的,panorama允許使用者浏覽那些突出顯示的,相對重要的内容,并且,那些突出的内容應該是進一步操作的入口。Panorama應該聚焦于一些為數不大的新鮮的,動态 的并且是引人矚目的任務。在你的應用程式中,panorama既不應該是單獨互動的,也不應該是鋪天蓋地,密密麻麻,無所不包。

    基于上述内容,我将給大家展示一些遵循上述規範的例子。

   Facebook展示了一種很好的混合格式,該格式把使用者感興趣 的幾種内容混合在了一起。Twitter也是這樣,盡管在其上顯示的内容隻是一些簡單的清單。

<a target="_blank" href="http://blog.51cto.com/attachment/201108/142858945.png"></a>

<b>使用背景圖檔</b>

   Panoramas可以有一個背景圖檔(固定的或者是可更新的),這個背景幫助使應用程式強調主題,或者添加一個良好 的觸感去增加螢幕感染力。你可以使用一個包含應用程式圖示或者相關照片的紋理或者圖檔來實作這個效果。在這兩種情況下要確定背景圖檔有足夠的對比度,以便于文字或其他内容能夠很容易被識别出來,而不至于和背景圖檔混在一起,無法識别。背景圖檔也應該淡化處理,不應該比内容更加吸引使用者。

   下面是幾個非常恰當的使用背景圖檔的例子。

<a target="_blank" href="http://blog.51cto.com/attachment/201108/142921155.png"></a>

<b>瓷磚格式</b>

   大多數情況下Hub包含一些能連結到相關内容的瓷磚,那些内容可能是照片,名片,新聞或者電影。在你的panorama裡使用瓷磚沒有太多的限制。幾乎隻要符合網格布局的要求就能使用。矩形适合于電影海報,正方形适合于畫像,全景視圖可以作為新聞标題或者風景投影,甚至作為不同尺寸的圖形的混合物也能很好工作,就像是一個拼貼畫風格的桌面(請檢視本文開頭部分的Facebook Hub)。

下面是一些使用了不同尺寸和風格的瓷磚的例子。

如何在不同格式的部分使用滾動功能?

    注意上面的一些例子中在滾動部分混合使用了不同的方法,圖檔的滾動隻能是水準進行的,文字清單的滾動隻能是垂直進行的。

    同一部分内容不能使用兩種滾動方式,在一些Hub中我們常見的一種錯誤是在包含瓷磚的部分既能水準移動,也能垂直移動,以至于迫使使用者使用搖動代替了滾動。搖動不是預期的結果,這破壞了使用者的心理模型,是他們不能看到本部分的全部内容。

    如果你正在開發一個非常随意的使用panoramic控件的應用程式,你可以通過本章節的例子去擷取靈感。如果你有資源或者才能,并且想出了一種合乎要求的并且是非常獨特的使用方法,請告訴我。在以後的文章中我們将展示一些更加具有創造性或不合正常的使用panoramic控件的例子。

繼續閱讀