365-237 <教學>設計模式-同頁作業

網頁程式設計第三課：同頁作業

如果沒有看過前兩篇的人，可以先去參觀一下=D

365-235 <教學>設計模式-操作直接性

365-236 <教學>設計模式-保持輕質

同頁作業，顧名思義就是在同一頁中做完所有的事情

避免使用者在頁面間切換而搞混，更慘的是會不耐煩

尤其是分頁越開越多，有時候連原本那一頁在哪都不記得了！

有以下幾種方法：

•覆蓋視窗

•嵌入視窗

•虛擬頁面

•程序流程

1.覆蓋視窗

有小的覆蓋視窗和大的覆蓋視窗

小的覆蓋視窗是局部的

或是對話型覆蓋視窗，把整個畫面都蓋起來，達到”雖然在同一頁，仍有分頁的效果”

這樣的作法避免使用者忘記自己其實在同一頁，且集中專注力，可以用“燈箱效果”

大家熟知的Facebook照片也是這樣的作法

在無法提亮中間的部份(螢幕就那麼亮，是要怎麼亮)，所以將四周變暗而提亮中間的部份

*永遠使用「對話型覆蓋視窗」取代瀏覽器彈出式視窗
*如果沒有必要還是請盡量避免使用

另外要特別注意：

•捕鼠夾：避免讓詳情型覆蓋視窗的啟動太過容易
•多此一舉的亮相：使用者不需要覆蓋視窗以慢速開啟
•滑過即覆蓋：覆蓋視窗的內容完全相同於頁內原有的資訊

輸入型覆蓋視窗，就是可以輸入資料的覆蓋視窗拉=D

2.崁入面板

有點介於覆蓋視窗和彈出式視窗，他是會跑出來但會“擠掉”其他資訊

例如校園資訊系統，點開信之後會把其他信擠到下面，也例如Facebook的留言，他會把較舊的狀態擠到下面，但不會覆蓋到其他狀態

欄標，例如Yahoo首頁，可以選擇不同的新聞類別的標籤

3.虛擬頁面

支援虛擬頁面的模式：

•虛擬捲動(Virtual Scrolling)：卷軸

•直接分頁(Inline Paging)：有頁碼，可以點選想去的頁數

•捲動分頁(Scrolled Paging)：利用捲動的方式來翻頁，也可以說沒有頁碼

例如這個網誌點擊圖片後，會有的投影片播放

也或者Facebook的永遠捲不完，噗浪的時間軸也是一樣的處理方式

•虛擬平移(Virtual Panning)：可以平面移動，例如Google地圖

噗浪的時間軸，可以算半個平移吧

•可縮放使用者介面(Zoomable User Interface)：可以縮放圖片

其實ctrl+滾輪，每個網頁都可以縮放

但有的網頁本身有些部份是可以縮放來觀看的，大家可以參考hardrock這個網頁

4.程序流程

有時需完成的任務並不常見或很複雜，需要藉由「程序流程」逐步引導使用者。

這樣的流程時常出現，但如何更符合使用者的習慣呢？

噗浪其實會用不同的顏色告訴你應該先填這個部份，然後那個地方

不過其實還是需要學習和摸索，所以不夠好的說~

今天的教學好長，希望大家看得懂=D