On the way to User Experience.

此範例應用到的功能：

1.座標、大小設定

2.圖片置入方法

3.動態面板(Dynamic Panel)設置

4.物件動作設定

備註：此範例來源為「網站藍圖 使用 Axure RP速成高擬真網頁」一書，有興趣可至博客來頁面購買。

在開始前，請先準備好欲切換的圖片。

(大圖：W414 H262；下方小圖W103 H83 各四張)

步驟一：

從物件區拖拉「dynamic pannel」至操作畫面中，設置X:20 Y20; W414 H286，並使用滑鼠連點兩下，開啟dynamic pannel 的設置視窗。

步驟二：

可看到視窗僅有一個State，此處State表示幻燈片的數量，

我們例子有四個畫面做切換，故點加號增加至四個State。

步驟三：

點選State1進入編輯頁面(可看到頁籤顯示State1)，也可看到有條藍色框線，框顯表示超出此處的物件，回到主頁是看不到的。

於物件區拖拉「image」至工作區，並將座標設為X:0 Y:0。

步驟四：

雙擊「image」開啟視窗選取預備好的圖片，圖片可自行調整或保持原尺寸，因圖片是事前準備好的，剛好與籃框位置一樣。

依照一樣的步驟依序將State2~State4設定好。

步驟五：

設定好後，回到Home頁籤，拉入四個「image」物件，分別設定座標為X: 21 Y:306； X: 124 Y:306； X: 227 Y:306； X: 329 Y:306 (與photoshop上的座標相對應，可幫助更快速製作) 。

雙擊「image」物件置入預先做好的圖片。

步驟六：

接著要設定image與Dynamic Panel裡各State的連結。

此處做的效果為滑鼠移過去便會切換圖片，故選擇OnMouseEnter做設置，雙擊開出設定視窗。

步驟七：

將每個圖片對應的State對應設定好，

並選擇是否要轉場動畫(有淡出，由右進入等動畫可選擇)

步驟八：

設置好事件後，可看到圖片上會出現黃色的小方框，表示這個物件有做事件的設定，接著就可以按F5匯出專案，並且可以在瀏覽器上預覽囉~

完成!

答案是在畫面下拉來更新 (Pull Down to Refesh)!

這應該智慧型手機使用者不須思考就會進行的動作。

下拉更新是一種適用於按照時間排列內容的應用，在使用者看完舊的內容時，會很自然地下拉來看更新的內容；下拉更新的操作直覺、合理，且已被大量的app採用，所以使用者們都非常的熟悉。

    下拉式更新是由Tweetie （Twitter的第三方軟體）的創辦人羅倫.布理契特（Loren Brichter）所發明，後來Twitter在2010年收購該公司時，也就順其自然的得到了這項技術的權利。雖然說目前下拉式更新是Twitter的專利，但他們並沒有限制其他開發者不能使用這個操作方式，有興趣的可參考這篇文章：http://www.bnext.com.tw/article/view/id/27903。

一開始介紹的Facebook是以文字告知下拉可更新內容，雖然簡潔，但缺少了動畫的活潑性，下面介紹幾款有創意又有趣的下拉更新動畫~

  Twitter

Twitter的logo大家都很熟悉，它的下拉更新更讓人覺得相當有趣，一開始是一顆轉動更新的雞蛋→鳥兒破蛋而出飛翔著→更新完成，雖然是單色的簡單動畫，但是相當生動。

  觀看影片：https://www.youtube.com/watch?v=IZBrekX9rjI

Google+

Google+利用了品牌色系─黃紅綠藍來做文章，下拉時像出現了像彩帶一樣的四個色系，讓我忍不住想知道可以拉得多長(笑)，放開後四個彩帶顏色會稍稍有變化，讓使用者知道正在更新中。

觀看影片：https://www.youtube.com/watch?v=MJxCmpOtZlg

  MOLOME (a photo sharing social network)

MOLOME是一個社群app，它有一個吉祥物─MOLO，MOLO會帶領使用者使用這個app裡的功能，更把他加進了下拉動畫中，下拉更新時，會把MOLO拉得長長的再放開(這個就更想知道可以拉多長呀!)，放開在Loading時，LOMO因為被拉的頭昏眼花，眼睛還會轉呀轉的，非常可愛逗趣!

觀看影片：https://www.youtube.com/watch?v=yvcm4Z-sge8

Polar

Polar一樣也是一款社群app，同樣的在吉祥物北極熊上做文章，下拉時會看到兩隻北極熊非常害怕掉下去的樣子，還是快點鬆開手讓他們回去吧~~

觀看影片：http://www.lukew.com/ff/entry.asp?1643

  以上所介紹的有趣下拉動畫，都是利用品牌的Logo、品牌元素、吉祥物...等去發揮，這些下拉更新動畫，讓這個空白畫面更加生動活潑，每次更新一次，就傳達一次商品價值、品牌理念，也不失為公司的品牌形象宣傳的好手段!

看了一場精采的電影？

沉浸於電動遊戲世界中？

這些都是我們平常很容易接觸到的生活經驗，那我們應該如何將經驗轉換成好的設計體驗呢？

讓我們先來看看實際運用生活經驗的設計案例：

書籍閱讀v.s 電子書翻頁效果

  因為電子書沒有一般書籍紙的質感，許多人還是偏好閱讀傳統書籍，但目前電子書市場日益龐大，電子書市場的發展勢不可擋，許多電子閱讀軟體，都模仿了紙質書翻頁的效果，讓電子書翻頁更貼近人原有的生活經驗，而這樣的小細節設計，也讓人更容易接受。

彈弓操作方式v.s Angry Bird遊戲方式

小時候應該都有玩過彈弓，甚至用竹筷子綁上橡皮筋，就成為簡易自製彈弓，可以說是很多人童年的回憶，所以當Angry bird一上市時，大家都很直覺的知道該如何操作這個遊戲，將繩子往後拉，再放開，上面的小鳥就會被彈飛出去，可以說是不用學習就能上手的最佳典範之一。

文件夾分類標籤 v.s  Evernote 文件分類

分類資料夾也是我們日常生活很常用到的，Evernote就運用了標籤分類，讓使用者可自行創立標籤，更能快速的從分類中找到資訊，是不是又方便又貼近生活呢?