法格（Fogg）教授認為，任何行為的開始都需要具備三個基本要素，這些要素分別是：

1. 使用者需具備足夠的動機（Motivation）
2. 使用者必須具備完成任務的能力（Ability）
3. 必須有觸發（Trigger）來啟動這次行為 

我們可以透過下圖來了解法格行為模型

B ＝ MAT，當動機（M）、能力（A）、觸發（T）三者同時齊備時，使用者就會處發行為。相反如果此公式中任何一個成要素缺失，無法跨越「行動界線」，那麼這次行為便不會發生。

法格認為，設計者若想要提高某項行為產生的可能性，應從使用者最缺乏的部分著手，找到是什麼讓使用者難以達成設計者希望他們完成的行動，在這個要點上，法格提出六項「簡約要素」，描述影響行為難度的關鍵因素，分別是 ：

1. 時間
   完成這件事情需要多少時間，使用者的時間夠用嗎？這件事情要在哪時候處理，使用者在那個時間有空嗎？
2. 金錢
   採取這個行動需要付出多少財物成本，我們的產品定價是不是太高了？
3. 勞力付出
   採取這個行為要花費多少力氣，使用者是否會因此精疲力盡？
4. 腦力運轉
   完成這個任務需要花費多少經歷與專注，我們的產品是否夠容易使用理解？我們的產品是否有清楚的教學或引導？
5. 社會偏差
   其他人能接納這件事情嗎，使用產品的情境正確嗎？使用者會不會感到困擾或尷尬？使用者會不會被當成是怪咖？
6. 不符慣例
   這個行為與使用者平常習慣符合嗎，我們產品會不會打亂使用者平常已經習慣的慣例、行為？

任何行為的發生，必須是使用者具備採取行動的充分能力與動機，且同時受到觸發，才能成立。

身為設計師，在設計一系列產品功能時，應該要常常將這個概念應用到自己的設計流程中，問問自己這些問題：

• 是否足夠了解使用者本身的動機（需求分析、場景分析、數據分析）
• 產品的這些功能需要具備哪些專業知識或語言水平
• 使用者是否有特別文化背景？
• 為什麼使用者需要這些產品？
• 是什麼讓他們開始使用產品？
• 為什麼他是現在需要？
• 是什麼影響使用者做決策？
• 產品、介面上的文案是否通俗易懂？
• 產品是否有設計喚回使用者的提醒機制？
• 頁面中是否有清楚的「行為召喚」按鈕？
• 為什麼非要不可？具備稀缺性？
• 是否提供外在獎賞？免費試用？免費試聽？
• 是否提供內在獎賞？成就感？滿足？
• 提供無後顧之憂的勇氣？無條件退費？
• 提供的選擇的項目是否太多？
• 是否提供多種方案讓使用者比較？讓使用者覺得自己撿到便宜（框架效應）？
• 有沒有考慮到使用者的使用場景？
• 是否任務需要完成的步驟太多了？
• 產品的學習成本是否太高了？
• 產品的一致性是否足夠？
• 用過一次就能掌握並記憶嗎？
• 產品是否提供快捷的功能，例如多選、批次處理？

最後，推薦大家看看這部由法格教授在 2012 年在史丹佛大學的分享

流暢的聊天App視窗轉場特效，以大頭照散開的方式顯示聊天視窗；以手指按住滑動讓內容像被拉出介面般的方式，轉換到列表頁，細膩的轉場特效，帶給使用者不一樣的聊天體驗 😏 👍 靈感來自 Dribbble 設計師 forint
https://dribbble.com/forint

很酷的瀏覽電影App資訊交互，點擊時給予重壓下沉的回饋，滑動時給予傾斜、重疊的回饋，如此細膩的回饋，讓使用者操作起來擁有3D的視覺體驗 B| 💪 👆 靈感來自 Dribbble 設計師 Xer.Lee
https://dribbble.com/xerlee

很不一樣的圖片展示資訊概念，每當看到美美的風景圖時，很想知道圖片裡的景點位在哪裡，只要手指輕輕一滑即可展示位置地圖及座標資訊，是不是很順手、方便 🌄 😍 👆 靈感來自 Dribbble 設計師 Leo Leung
https://dribbble.com/leoleung

好棒的邀請好友視覺回饋體驗，邀請的好友越多，公仔小狗狗就越開心，如此愉悅的氛圍，讓使用者操作起來嘴角都會上揚 🐶 😊 😍 靈感來自 Dribbble 設計師 Jeff Chang
https://dribbble.com/JeffChang

超酷的VPN連線動畫，線連接著固定的地圖與可左右滑動的地名旗幟資訊，當資訊左右滑動瀏覽時，線的兩端依舊會依各中心點為基準，不斷改變連接方向 B| 👍 8-) 靈感來自 Dribbble 設計師 Yura Ugarov
https://dribbble.com/ugarov

不一樣的地圖尋找操作體驗，明確的回饋距離及範圍，並專注顯示設定範圍內的各個美食、景點等等，以卡片的模式瀏覽資訊，大大提高使用者尋找目標的效率 B| 📡 🍻 靈感來自 Dribbble 設計師 Cleveroad
https://dribbble.com/cleveroad

很優美的App註冊載入進度動畫，簡單的介面搭配細細的進度條圍繞在按鈕周圍，大大提升使用者註冊時等待的視覺體驗 ☺ 😊 靈感來自 Dribbble 設計師 Rob Davis
https://dribbble.com/rdcreative

有趣的App下拉刷新動畫，揮竿的同時，溫度數據採快速刷新的方式更新，讓使用者能清楚知道更新狀況，大大提升視覺體驗 👲 ⛳ 靈感來自 ui.cn 設計師 小得
http://i.ui.cn/ucenter/86215.html

不一樣的App聊天模式，除了文字、圖片及位置等資訊交流外，若再加上選擇器的功能，不僅提升使用者的互動模式，也提高使用者的操作性 😏 👍 靈感來自 Dribbble 設計師 Tintins
https://dribbble.com/tintins

很視覺化的開關按鈕體驗，按鈕開啟時，背景以按鈕為中心向外釋放顏色，關閉時，按鈕會將背景色由四面八方吸回，提供使用者有趣的視覺及操作體驗 🎩 🌙 ☀ 靈感來自 Dribbble 設計師 Ramotion
https://dribbble.com/Ramotion

有趣的下拉選單動效體驗，有別以往區塊式的呈現，加上流暢的滑出、隱藏及細膩的細節處理，讓使用者有不一樣的視覺、操作體驗 B| 👻 靈感來自 Dribbble 設計師 TUBIK
https://dribbble.com/Tubik

很不一樣的聊天訊息傳送動畫特效，像泡泡一樣，帶有沾黏的特性浮出水面，給聊天者不一樣的使用體驗 B| 👻 靈感來自 Dribbble 設計師 Jakub Antalík
https://dribbble.com/antalik

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

流暢的時間軸轉場動畫體驗，隨著內容的滾動，時間軸由白天轉換成夜晚，再加上與內容相呼應的卡通圖示，給使用者不一樣的瀏覽體驗 ⚽ 🏠 🍔 🎥 靈感來自 Dribbble 設計師 Sergey Valiukh
https://dribbble.com/SergeyValiukh

很彈性的轉場動畫特效，左右切換登入及註冊畫面時，漁夫、海洋、雲朵等物件，隨著作用力循序漸弱左右擺動，大大提升使用者視覺及操作體驗 🚤 🐠 🐟 🐡 靈感來自 Dribbble 設計師 Mari Kostrova
https://dribbble.com/mari-kostrova

簡單流暢的登入及註冊動畫體驗，向泡泡一樣左右滑動切換 😍 🎈 設計靈感來自 Dribbble 設計師 Sergey Kamashkin
https://dribbble.com/kamashkin

很棒的視差滾動導覽體驗，火箭、UFO及雷達依著介面滑動的同時飛進飛遠，讓導覽介面呈現不一樣的動畫效果，為視覺及交互體驗加分 😍 👍 設計靈感來自 Dribbble 設計師 ali griffin
https://dribbble.com/aligdanger

超酷的app標記概念，標記不再用於相片，透過影片標記，可隨時隨地觀看特定某人的特集，不用再拉著滑桿尋找某人的經點位置，是不是很有趣 😏 8-) 設計靈感來自 Dribbble 設計師 Isil Uzum
https://dribbble.com/isiluzum

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

上一期我們介紹了「有效預覽並選擇字體」的小技巧，透過文章介紹的快速鍵與技巧，提高不少畫圖的效率！今天我們來分享我們在 Sketch 中，幾種選取 Artboard 的有效率的方式。

方法一：點擊 Artboard 名稱

方法二：點擊左側圖層列表名稱

方法三：點擊 Artboard 任意圖層，按下鍵盤 ESC 按鍵

有時候我們需要輸出整個 Page 的所有 Artboard，以前我會使用 Shift 一個一個選取，後來發現 Shift + ⌘ + A 這個快速鍵可以直接選全畫面中的所有圖層，在匯出設計圖特別有用！

以上就是本期的分享啦，大家趕緊去試試看囉！

如果你喜歡我們的分享，分享給更多的朋友知道，關注我們的粉絲團，隨時掌握重要的設計的資訊！下一期我們會介紹【Sketch 小技巧 - 複製 Artboard 設定其他 Artboard】

流暢的滑塊產品展示體驗，順暢的轉場，並採用相似的背景色，大大提升視覺及操作體驗 🍎 🍆 🍊 靈感來自Dribbble 設計師 Gabriel Faucon - FIF7Y
https://dribbble.com/FIF7Y

很酷的轉場動畫特效，球拍及手依著介面滑動的同時，各自往視窗的四周退去，有別以往同一方向，大大給使用者不一樣的體驗 B| 🏆 ✋ 靈感來自Dribbble 設計師 Joe Mortell
https://dribbble.com/mortell

有趣的載入動畫特效體驗，登入後飛機飛進中央等待載入，完成再次飛出去 😊 ✈ ✈ ✈ 靈感來自Dribbble 設計師 Kevin Yang
https://dribbble.com/eatsleepvector

流暢的轉場動畫特效，小小人隨著頁面左右轉換而順勢有不一樣的運動姿勢 B| 🚲 靈感來自Dribbble 設計師 Mari Kostrova
https://dribbble.com/mari-kostrova

很讚的網站註冊互動體驗，不管鼠標在視窗中央徘徊或是接近關閉按鈕，大熊會採取不一樣的反應回饋給使用者，如此有趣的互動，讓使用者有不一樣的註冊體驗 😍 🐻 👍 靈感來自Dribbble 設計師 Minh Pham
https://dribbble.com/phamduyminh

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

上一期我們介紹了「圖片背景填滿」的小技巧，除了圖片的使用外，在 Sketch 文字圖層也是十分常用的功能，這一期讓我們來分享怎麼樣更有效的使用文字圖層吧！

設計師常常透過不同的字型，讓介面設計呈現出不同的風格，在 Sketch 中我們常常透過這樣的方式來選擇、套用文字的字型，如下：

如果電腦上安裝了非常多的自己這樣找其來非常的累人，使用搜尋功能可以更快找到想要的字體

但是這樣還是很沒有效率，我們來試試更快的方式！首先點擊快速鍵 ⌘ + T ，然後輸入想要的字體，例如Open Sans，點擊鍵盤方向鍵選擇，最後點擊 Enter，如下：

你可以使用方向鍵預覽每種字體的效果，例如想要測試電腦上所有明體的效果，我們可以點擊 ⌘ + T 開啟選單，輸入 sans，接著使用方向鍵預覽，如下

未來任何時候你想要調整字體，就點擊 ⌘ + T 吧！

寫在後面，關於字體的管理，我們團隊有使用一款非常方便的字體管理軟體「RightFont」，這款軟體在管理、預覽字體效果、設計軟體直接支援上都做的非常好，甚至還提供像是 Font awesome 這類型的字體圖示（Font Icon）的支援，我們會在未來的介面設計小技巧 系列文章中來介紹！

本期 Sketch 小技巧就介紹到這啦，大家趕緊去試試看囉！

下一期我們會介紹【Sketch 小技巧 - 快速選取 Artboard 的幾種方式】

還記得我們第一篇分享的「Sketch 小技巧 - 如何快速設定圖片背景」嗎？這幾天我們突然發現這個小技巧還有進階版的使用技巧，今天趕緊跟大家分享！

在上次的選單中我們介紹透過簡單的拖曳就能夠定背景圖片

後來我們發現，除了這樣的方式以外，原來我們還可以使用 ⌘ + V 貼上的方式來設定背景，方法十分容易！

首先點選任意圖片右鍵，接著選擇複製圖片（在某些軟體中你可以直接選取圖片然後 ⌘ + C）接著趕僅回到 Sketch 開啟圖層的 Fill 選單，滑鼠左鍵點擊 Fill 選單預覽外框（也就是那個正方形外框），接著使用鍵盤 ⌘ + V 貼上！

這個小技巧除了可以搭配很多不同的軟體使用以外， 我們還可以在 Sketch 內部使用，把已經設定過的圖片背景複製給其他圖層（註：複製整個圖層樣式有時候也能達到這樣的需求，但是你會一起把外框線、陰影也都複製），讓我們來看看怎麼使用！

本期 Sketch 小技巧就介紹到這啦，

以上就是本期的分享啦，大家趕緊去試試看囉！

如果你喜歡我們的分享，分享給更多的朋友知道，關注我們的粉絲團，隨時掌握重要的設計的資訊！下一期我們會介紹【Sketch 小技巧 - 快速套用想要的字型】

上一期我們介紹了「自訂 Sketch 圖層的預設樣式」，今天來跟大家一組超好記而且超實用的快速鍵「0-9」，具體這些快速鍵有哪些妙用，讓我們繼續看下去！

在設計介面，我們時常會透過透明度的調整製作出深淺、漸層、模糊等效果，在細節調整的時候，我們常常都需要嘗試著這種透明值的效果，以前我會在 Opacity 上輸入我想要的數值，不斷修改來達到這個目的

某次點擊數字鍵 0-9 意外發現更快速設定透明度的方法

我時常拿這個功能來取得某個顏色在淺 10%-90% 的顏色色碼

或者快速把一群透明的圖層透明度還原（點擊 0）

本期 Sketch 小技巧就介紹到這啦，大家趕緊去試試看囉！

下一期我們會介紹最近才發現的超棒技巧【更快速設定圖片背景】

在設計介面的時候我們常常有這樣的體驗，在畫面拖曳一個圖層，取消外框、修改背景色、修改圓角、修改....等，Sketch 預設拖曳出來的圖層樣式往往不是我們想要的。今天我們要介紹 Sketch 提供的一個非常方便的功能Set Style as Default。

顧名思義Set Style as Default能夠讓我們自己設定 Sketch 中圖層的預設樣式，譬如說我個人非常喜歡 Open Sans 這個字體，然後顏色是 #333030，然後通常會使用 16px 字體大小，然後行距是...，然後段距是...，如果這樣的設定超級常用的，這時候我就會使用 Set Style as Default 將他設定成預設文字圖層樣式，如下動畫說明

首先將要成為未來預設樣式的圖層拖曳並設定好想要的樣式

接著點擊選單上的 Edit > Set Style as Default 選項

試著新增更多空白的圖層

你可以隨時根據專案的需求，重新定這些預設選項。很多 Sketch 老手會透過其他更有效率的方式來處理這樣的問題，例如共用樣式、共用元件等等，我們也會再接下來得文章中來介紹！

本期 Sketch 小技巧就介紹到這啦，大家趕緊去試試看囉！

下一期我們會介紹【Sketch 小技巧 - 鍵盤 0 - 9 的妙用】

上一期與大家分享在 【官方不提供的快速鍵，我們自己來設定】，夠過幾個簡單的步驟，提升我們的工作效率。

今天我們想和大家分享在 Sketch 中很好用的功能「Covert to Outline」，這個功能通常我們會用在兩個情境：

1. 將文字轉成向量圖
2. 將圖層框線 (Border) 轉換成填滿 (Fill)

這個功能在哪裡？

Covert to Outline 功能屬於圖層相關的功能，所以我們可以在選單 Layer 中找到它，如果你忘記藏在哪裡，你可以使用系統幫助選單找到它。

除了功能選單以外，你也可以在自訂工具列中找到它，名稱為「Outline」，現在把它拖曳至 Sketch 的工具列。

1. 將文字轉成向量圖

有時候我們會使用某些字體樣式作為基礎，調整細節來製作為標題、強調文字，在 Sketch 中我們可以透過 Covert to Outline 來達到這個目的，如下：

2. 將圖層框線 (Border) 轉換成填滿 (Fill)

將外框轉換為填滿圖層功能我們再製作小圖示時也非常的常用，例如我們想要製作一個空心且外框寬度為 20px 的圓形圖示，可以這樣做：

寫在後面，最後一個動畫中，我有偷偷按了一個快速鍵，眼尖的朋友不曉得有沒有發現呢？（容我在之後的文章來解答 :D）

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，關注我們的粉絲團，隨時掌握重要的設計的資訊！

下一期預告【自訂 Sketch 圖層的預設樣式】

很可愛的視覺化購買機位 App 操作體驗，隨著座位等級的提升，位子的舒適度經由動畫展示的惟妙惟肖，最後小小人逗趣的抬腳特效，大大提升選購機位的體驗 ✈ 💺🚹 靈感來自Dribbble 設計師 Gleb Kuznetsov
https://dribbble.com/glebich

流暢的轉場特效，平順的由遠拉近，大大提升視覺及操作體驗 🐾 😊 🐾 靈感來自Dribbble 設計師 FΛNTΛSY
https://dribbble.com/Fantasy

有趣的動畫特效，隨著視窗的上下左右移動，圖釘則以彈性的動效方式尾隨跟上 😝 🗻 靈感來自Dribbble 設計師 RALLY
https://dribbble.com/rally

很細膩的等待更新動畫特效體驗，像氣球一樣緩緩上升，當更新完成時，線的末端因拉力斷掉而反彈，如此細膩的動畫特效，帶給使用者不一樣的視覺體驗 🎈🎈 😍 靈感來自UI.CN 設計師 Pan_yq
http://i.ui.cn/ucenter/239028.html

很不一樣的登入動畫特效，輸入好帳號密碼後，按下登入按鈕，門會快速升起讓卡車進入 🚧 🚚 😏 靈感來自Dribbble 設計師 Rustem Sirazetdinov
https://dribbble.com/corlisy

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

昨天與大家分享在 【使用系統的幫助功能加快設計速度】，文章提到的技巧讓我們可以使用鍵盤輸入的方式執行某項功能，非常的便利。

如果某些功能每天要用上百次，上一篇的作法就顯的沒效率了！所以今天要跟大家介紹所有 Mac 電腦都提供的「自訂應用程式快速鍵」功能。

在 Sketch 中有很多常用功能並沒有提供快速鍵，也有很多功能的快速鍵不容易點擊（組合鍵超難記），讓我們請出「自訂應用程式快速鍵」功能，來解決這個問題吧！

首先，開啟「系統偏好設定（Preference）」

接著進入「鍵盤」設定

在畫面上方選擇「快速鍵」選項

接著點選昨方的「App 快速鍵」選項

點擊 ＋

在應用程式選項中選擇 Sketch.app，並依照下方規則輸入選單名稱

選單名稱的規則 : 第一層選單名稱->第二層選單名稱
例如 Scale 功能可以這樣輸入： Edit->Scale...

然後在快速鍵部分設定你想要的按鍵組合方式

然後回到 Sketch 看看設定的結果是否成功了！

附上幾組常用的幾個快速鍵設定

• 收合左側所有圖層⌘ +5 View->Layer List->Collapse Artboards and Groups
• 兩圖層垂直置中⌘+Shfit+[Arrange->Align Objects->Vertically
• 兩圖層水平置中⌘+Shfit+] Arrange->Align Objects->Horizontally

自訂快速鍵是 Mac 本身提供的功能，所以你也可以把這個技巧用在任何的 Mac 軟體中，趕緊自己試試吧 XD

下一期預告【Sketch 小技巧 - 如何將文字區塊轉換成向量圖】

昨天與大家分享在 【 Sketch 中如何快速設定圖片背景】，今天我們來分享在 Mac 系統中一直存在的好用功能「幫助選單」。

什麼是幫助選單？

說到 Mac 的幫助選單，可能有許多朋友從來沒用過它，簡單來說，他是 Mac OS 提供給使用者的一個查找選單功能在哪裡的貼心功能（原先我們也以為就這麼單純）。

先來看看這個功能它藏在哪裡！首先開啟我們手上的 Sketch，然後查看電腦螢幕的選單最右側有一個 Help 選項

點擊我們會看到這個畫面

試著在輸入幾個在 Sketch 功能名稱，例如 Layout、Scale、Copy ，如下圖

我們發現，Help 選單可以幫我們找到任何功能的所在位置！知道這個訊息後我們要如何利用這個功能加快我們的速度呢？讓我們繼續看下去

使用幫助選單快速鍵，隨時開啟想要的功能

如果我們希望更快速的開啟 Help 選單，我們可以這樣做，點擊 ⌘ + Shift + ? ，你會發現選單自己打開了，而且它處於等待輸入的狀態。

來看看怎麼把這個小技巧實際應用在 Sketch 設計上吧！

直接啟動圖層縮放功能

設定版面的 Grid

最重要的是還可以呼叫任何插件的功能，以超實用的 Content Generate 插件為例

Help 選單其實不是 Sketch 本身提供的功能，也就是說，你幾乎可以把這個技巧用在任何的 Mac 軟體中，趕緊自己試試吧 XD

寫在後面，現在有一款插件叫做 Sketch Runner，俗稱 Sketch 界的 Alfred，也可以做到差不多的功能，我們之後也會寫一篇文章專門介紹這個插件，手養的朋友可以自行研究囉。

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，關注我們的粉絲團，隨時掌握重要的設計的資訊！

下一期預告【Sketch 小技巧 - 官方不提供的快速鍵，我們自己來設定】

從今天開始，奥革團隊會開始撰寫一系列設計教學、技巧文章。首先我們會從 Sketch 實用小技巧開始，每一篇文章都會提到我們團隊使用 Sketch 時發現的小撇步，讓我們趕快開始吧！

設計使用者介面（UI）時，我們會使用各式各樣的圖層設計介面，特別是將圖片影像放入設計之中，在 Sketch 中我們有兩種方式可以來放置圖片，分別是：

1. 圖片圖層（Image）

2. 使用填滿（Fill）

若你時常再做這件事情，你就會發現這兩種方法都會碰到非常惱人且相當花費時間的檔案選擇視窗，它的缺點有很多，例如我們必須很清楚知道圖片在電腦的哪個位置，然後一步一步的點擊過去，又或著是我們需要的圖片檔案不在電腦上時，就要先下載下來

讓我們改變這個現狀吧！其實 Sketch 有提供更有效率的方式來處理這件事情，那就是 直接將圖片拖曳到 Fill 功能位置中，當你將圖片拖曳到這個區域時，Sketch 就會自動幫我們把圖片放上來，瞧瞧下圖：

這個功能除了電腦上的檔案，還支援其他應用程式拖曳過來的圖片！

搭配我們自己習慣的圖片素材管理工具來使用，效果更明顯（我們團隊習慣 Inboard App 來管理圖片資源）

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，關注我們的粉絲團，隨時掌握重要的設計的資訊！

下一期我們會介紹【Sketch 小技巧 - 使用幫助選單功能加快設計速度】

放暑假啦！來看看很棒的旅遊日記閱讀體驗，地圖隨著文章紀錄的地點不同而同步移動路徑 🚲 B| ☀ 靈感來自Dribbble 設計師 Samuel Medvedowsky
https://dribbble.com/sammedve

『讓Onboarding閱讀體驗變的更有趣！』簡單的介面，搭配上細膩的煞車反作用力特效，小小特效，改變了使用者閱讀感受，增添不少樂趣 😏 🙏 😏 靈感來自Dribbble 設計師 Kristofor
https://dribbble.com/kristofor

很棒的視覺化捐款體驗，捐款的錢越多，能搭配的配備也就越齊全 靈感來自Dribbble 設計師 Minh Pham
https://dribbble.com/phamduyminh

很棒的視覺化捐款體驗，捐款的錢越多，能搭配的配備也就越齊全 靈感來自Dribbble 設計師 Minh Pham
https://dribbble.com/phamduyminh

超酷的視頻商務體驗，網路配件商品以往皆僅展示商品，若有個虛擬機器人展示穿戴的感覺，不僅能促進購買人的慾望，也大大提升視頻的體驗 B| 8-) 😍 靈感來自Dribbble 設計師 Isil Uzum
https://dribbble.com/isiluzum

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

很可愛的App空狀態動畫體驗，不一樣的場景不一樣的體驗 ❤ ❤ 靈感來自Dribbble 設計師 Jeff Chang
https://dribbble.com/JeffChang

童趣的下拉更新體驗，當你下拉時，小精靈會快速吃豆子，讓使用者在等待時能懷舊童年的體驗，可惜的事，下拉更新太快，小精靈還來不及吃到大豆子就結束了 :v 靈感來自Dribbble 設計師 Vehbi Köksal
https://dribbble.com/veydue

今天再來體驗不一樣的下拉更新畫面，細膩的動畫特效，加上快更新完畢時，船伕還會加速退場，是不是很令人會心一笑 靈感來自Dribbble 設計師 Olga Mikhailenko
https://dribbble.com/om

細膩的交互體驗，向右滑大家一起向右看，向左滑大家一起向左看 靈感來自Dribbble 設計師 Ramotion
https://dribbble.com/Ramotion

氣象 App 彈跳的轉場動畫特效體驗，隨著手指的滑動，介面就像布丁般被拉出來，放手時還會有反作用力的回彈視覺回饋，小小的動效，給人帶來不一樣的感受 靈感來自Dribbble 設計師 Denis Klyuchnikov
https://dribbble.com/Ditch

有別以往的App導航概念，將開啟路徑層層堆疊，然而往右一划，就能展開所有路徑 😍 👍 靈感來自Dribbble 設計師 Steffen Nørgaard Andersen
https://dribbble.com/noergaard

流暢的轉場動效體驗，點選後，細膩的退場及展開特效，讓介面更加乾淨😊 🌃 靈感來自Dribbble 設計師 Clément Brichon
https://dribbble.com/ClementBrichon

很不一樣的網站登入及註冊頁面切換動畫體驗，有別以往點擊後換頁模式，大大提升使用者登入或註冊的方便性 B| 👍靈感來自Dribbble 設計師 Deepak
https://dribbble.com/yadav

隨著3C產品的快速迭代，未來的介面經由投影技術突破設備既有框架，讓使用者擁有不一樣的體驗，現今的科幻電影場景再也不會是空想的事 B| :|] 📡 靈感來自Dribbble 設計師 Ramotion
https://dribbble.com/Ramotion

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

很俏皮的下拉刷新體驗，流暢的拋竿、拉竿動畫特效，加上細膩、生動的臉部表情，魚上鉤的同時資訊也刷新，這不下拉刷新個幾回怎麼行 (^^^) ✌ 靈感來自Dribbble 設計師 truojie很俏皮的下拉刷新體驗，流暢的拋竿、拉竿動畫特效，加上細膩、生動的臉部表情，魚上鉤的同時資訊也刷新，這不下拉刷新個幾回怎麼行 (^^^) ✌ 靈感來自Dribbble 設計師 truojie https://dribbble.com/truojie

很細膩的標籤切換轉場動畫特效， 隨著標籤左右切換，列表也跟著左右進場 8-) 靈感來自Dribbble 設計師 Andrew Munoz
https://dribbble.com/Andrewmunoz

細膩的轉場特效體驗，點選日期後，以弧線的路徑滑至上方後再展開內容，魔鬼藏在細節裡，一點點的改變，讓使用者有不一樣的體驗 B| B| 靈感來自Dribbble 設計師 Vitaly Silkin
https://dribbble.com/colder

很有感的金額選擇體驗，選擇一千跳出一張紙鈔，一萬跳出好幾張紙鈔， 金額越高，紙鈔數也越多，比起數字，圖示更吸睛 靈感來自Dribbble 設計師 Adil Siddiqui
https://dribbble.com/adilsiddiqui

實用的大量編輯設計概念，清楚的呈現於介面上，操作流程簡單，需要的時候在開啟多選模式，同時兼顧瀏覽的簡潔與編輯效率 B| 靈感來自Dribbble 設計師 Morgan Allan Knutson
https://dribbble.com/morgan

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

俏皮的Marvelapp 404錯誤畫面體驗，拉把一拉不是出現777 反而是出現💀💀💀，讓使用者會心一笑 😁 http://gph.is/1Ppb4n9

非常直覺的導航設計，依據內容的大小縮圖，同時在使用者滑動時定位，讓使用者清楚知道自己所觀看的位置 靈感來自 Dribbble 設計師 Aurélien Salomon
https://dribbble.com/aureliensalomon

還有一天！就能放連假嘍，來看看有趣的下拉刷新等待體驗，等待的時後來杯咖啡，迎接新的訊息到來 ☕ ☕ Dribbble 設計師 Yup Nguyen
https://dribbble.com/yupnguyen

很方便的機票預訂APP體驗，操作簡單，介面資訊清楚，且能清楚知道座位實際位置，但若轉場特效能再快點就好了 ✈ 靈感來自Dribbble 設計師 Alexander Tsibulski
https://dribbble.com/tsibulski

清楚易閱讀的瀏覽體驗，透過視覺比重、深淺細節處理，即使卡片及地圖同時呈現在視窗上，也能讓使用者專注於卡片上，同時又能知道所在位置 B| 靈感來自Dribbble 設計師 Leo Leung
https://dribbble.com/leoleung

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

順手又實用的信件分類體驗，推翻以往繁雜的步驟，加速使用者移動信件😍 📩 靈感來自 Dribbble 設計師 Tob Siripak
https://dribbble.com/Tobs

很人性化的App支付體驗，操作範圍、按鍵皆考慮到使用者大拇指能所觸及的範圍，讓使用者操作起來更加容易 👍 靈感來自 Dribbble 設計師 Samuel Medvedowsky
https://dribbble.com/sammedve

魔鬼藏在細節裡，同樣的跳動，在不同的動畫曲線下，帶來不同的體驗 8-) 👍 靈感來自 Dribbble 設計師 Yimbo Escárrega
https://dribbble.com/yimbo

很童趣的下拉更新體驗，下拉更新時飛機飛出去尋找，飛機飛回來時新的訊息也來了 😍 😍 😍 靈感來自 Dribbble 設計師 Zee Young
https://dribbble.com/zeeyoung

快樂禮拜六竟然要上班，來看看這人性化的披薩食材搭配app體驗，依照自己喜歡的食材搭配出獨特的披薩口味，而且圖示還會跟著挑選食材點擊次數而加量，是不是很棒！ 😏 😏 😏 靈感來自 Dribbble 設計師 Saptarshi Prakash
https://dribbble.com/saptarshipr

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

列表常見的使用情境

• 概觀 瀏覽較多的的資訊時，列表可以提供一種概觀性的的方式來呈現內容。
• 逐一瀏覽項目
  使用者可能逐一或隨機的的閱讀資訊，就像是Facebook動態資訊。
• 搜尋
  使用者可能在清單上尋找他們想要的資訊，就像是Google搜尋結果。
• 分類與過濾
  使用者可能正在分類資訊或者使用一些方式（檔案大小、名稱）過濾內容。
• 項目的整理、新增、刪除與分類
  使用者正在整理資訊，此時很有可能需要多選、搬移的輔助功能。

列表的設計模式

1. 雙面版選擇器

雙面板列表是一種將列表區分為兩個區域的一種設計模式，使用者可以自由在第一個面上選擇項目，第二個面版上會顯示面板一選擇的項目內容。

優點

• 操作非常的有效率，不需要來來回回的在不同列表切換。
• 減少使用者記憶與認知的負擔，使用者不必瞭解內容在列表上的位置，也不需要學習如何返回列表。

缺點

設計要點

請務必清楚的標示在面板一被選取的項目

 

 

 

2. 單視窗深入

會使用一個基本的列表顯示內容，當使用者點選某個項目時，會使用新的畫面顯示內容，新的畫面會取代列表畫面。

優點

缺點

• 整體效率較低，需要不斷的進入、離開
• 無法一次處理多個資訊

設計要點

• 因為整個畫面都被新的畫面取代，請確保在詳細頁面中有清楚的返回按鈕，小心使用者迷失方向了
• 返回列表時，請務必恢復到前一個的狀態

 

 

3. 清單嵌板

列表會在原地展開/收起，用來顯示該項目的詳細資訊。

優點

• 能夠同時看到多個展開的內容資訊，方便比較。
• 因為詳細內容與列表呈現在同一個畫面，能輕鬆的閱讀資訊

缺點

• 容易與上下項目容易搞混
• 詳細內容太多的時候，不容易操作與定位（scrolling）

設計要點

• 務必將展開/收起狀態設計的清楚
• 使用圖示+/v搭配文字的方式隱喻

 

 

4. 縮圖分格

將列表是用網格縮圖的方式呈現，讓使用者可以使用視覺圖片的方式瀏覽內容。

優點

• 圖像比文字還容易辨識，而且更容易的區分。
• 因為詳細內容與列表呈現在同一個畫面，能輕鬆的閱讀資訊

缺點

• 容易單調乏味，也許可以把較推薦的內容放大展示
• 依賴文字來尋找的內容，不適合使用，因為使用者必須不斷跳躍瀏覽（相較於垂直列表）

設計要點

• 注意圖片縮放後的比例與解析度
• 避免沒有圖片的項目，可以在適當的時候給予預設縮圖。

 

 

 

 

5. 旋轉木馬

將一組項目使用水平弧線或水平排列的呈現方式，允許使用者向左或向右檢視內容，通常當前（中間）的項目會較大顯示。

優點

• 因為使用到空間z軸，可以省下更多的空間
• 能夠讓使用者把注意力放在正中央的內容上

缺點

• 無法一次呈現較多的資訊
• 相較於中央資訊，其他資訊無法完整的展示

設計要點

• 如果要用來展時較多的項目時，可以使用Scrollbar或前後的按鈕來設計
• 旋轉木馬與Slider非常相似，旋轉木馬用來一次多個項目。

Safari在Mac OSX 10.9之前時也使用這樣的方式展示Top Sites，在10.9版後改用縮圖列表的方式

 

6. 斑馬列表

使用兩種不同的色彩作為列表項目的背景，使項目容易被區分出來。利用色塊的方式將列表轉換成合理的視覺物件（完形心理學 — 封閉性）

優點

• 使用者可以輕易辨識列表項目，減少認知與視覺搜尋的時間

設計要點

 

7. 字母標記捲軸

列表使用字母的方式進行排列，在列表上使用英文字母的方式作為列表的捲軸，通常在電話簿、字典、音樂等列表上會看到這種模式。

使用情境

使用者不曉得項目的完整名稱，但瞭解項目的開頭字母，可以使用此模式進行快速定位。

設計要點

• 讓字母捲軸支援拖移的操作方式
• 在捲軸上高亮顯示目前列表位置對應的字母

 

 

8. 頁碼標籤

面對大量的列表資料時，將列表使用分頁的方式切成多個頁面閱讀，一次閱讀一頁。

優點

• 使用者能夠記憶項目的頁次，對於瞭解資訊的位置、事後的尋找有很好的幫助
• 一次只載入一些資料，減少流量及載入的等候時間

缺點

• 體驗不順暢，瀏覽完一些資訊又必須重新點擊頁碼載入新的內容

設計要點

• 必要時讓使用者可以決定每頁的項目數量大小
• 可以的話，顯示總共的頁次，讓使用者能稍微瞭解共有多少資訊
• 除了頁碼外，使用較大的按鈕或連結顯示上下頁按鈕

關於分頁顯示與無限滾軸兩個模式，會在之後的文章中進行詳細的分析與比較

 

 

9. 分層清單

使用多層的列表呈現內容，用來表顯出內容與內容之間的階層關係。

優點

• 高效且具有極佳的視覺可視性，能夠一眼看出整體資訊架構
• 能夠同時瀏覽與處理多個階層的內容

缺點

• 較小螢幕時，此模式不容易操作
• 不適合使用在簡單清楚的資訊架構中

設計要點

 

10. 樹狀清單

允許在列表結構中，展開出樹狀的階層結構關係，此模式與分層清單不同，樹狀清單能夠一次展示多個項目裡頭的階層關係。

優點

• 高效且具有極佳的視覺可視性，能夠一眼看出整體資訊架構
• 能夠同時瀏覽與處理多個樹狀階層的內容

缺點

• 某階層內容特多時，此模式不容易操作
• 不適合使用在簡單清楚的資訊架構中

設計要點

• 階層與階層間可以使用間距從視覺上表示彼此間的關係
• 務必清楚的顯示展開/收和的狀態

 

11. 可編輯的列表

一種快速且直覺的方式新增/修改列表內容。

 

如何管理一份長清單

• 頁碼標籤
• 無限清單
• 無限清單變化版
• 字母標記捲軸
• 搜尋

參考資料 操作介面設計模式（2e） 行動介面設計模式 UI-Pattern

細節決定成敗，今天來談談動畫在用戶體驗上扮演哪些重要的角色。隨著裝置效能的提升，越來越多的應用程式開始加入動畫到應用裡，利用動畫的效果，透過各種各式各樣的動畫，事情更容易理解、焦慮的心情減少了、枯燥的狀態變的有意思了

本文章會先從動畫的任務開始，瞭解動畫如何應用在介面設計上，接著會從卡通瞭解如何設計更真實自然的動畫，最後會提出一些使用動畫要注意的事項。

動畫的任務

動畫能夠幫助使用者瞭解物體的狀態，及狀態之間的因果關係，如果使用的恰當，動畫能夠大幅度的減少使用者在狀態認知的負擔，並建立正確的心智模型（Mental Model）。
以下，我們將介紹動畫的所帶來的幫助：

一、解釋狀態之間的變化

使用者的操作通常會造成介面狀態的改變，利用動畫可以清楚的讓使用者瞭解介面狀態改變的因果關係。例如在電腦上，使用者點擊縮小視窗的按鈕，系統會利用動畫將視窗縮小到工具欄上，使用者點擊應用程式，視窗會使用同樣的動畫顯示被縮小的是窗。

 

 

 

 

二、吸引使用者的注意力

在一些時後，我們需要必須吸引使用者的目光，告訴他一件事情發生了或者期望使用者做些事情，在這時候我們可以利用一些適當的動畫，讓使用者能夠輕易的注意到。
假設我們正在一個安靜的鄉村街道上，突然間出現了一輛跑車呼嘯而過，這時候大家的目光肯定會被吸引過去，一樣的，當使用者在一個靜止狀態的頁面中，突然有個會動的物體出現，使用者的注意力就會放在這上面。

 

 

三、告訴使用者應該做什麼

使用者常常打開一個應用程式後，就不曉得接下來該作什麼事情，特別是在初次使用或者極限狀態發生的時候，在這些情況下，除了使用文字與清楚的顏色提示使用者外，使用動畫更能引導使用者進行操作。
在 Flipboard 應用中，剛啟動的頁面會在畫面右測，紙張會不時的翻起，提示你可以向左翻閱。
在 Path 應用中，在第一次使用時，右方的導航列也會不時的滑動，提醒使用者這邊有個抽屜能夠滑開來。

 

四、操作反饋

使用者正在與介面進行互動，他們可能點擊、滑過、拖拉，適時的提供及時的反饋讓使用者清楚的得到回饋，讓操作的過程更清楚更簡單。

 

 

 

五、減少使用者的焦慮

當系統需要載入資料時，提供有趣的載入動畫，吸引使用者的目光，會讓等待產生的焦慮減少許多。

 

六、突顯顯重要的功能

利用動畫效果，可以清楚的提示使用者重要的功能在哪裡，並吸引他們去碰觸這些功能，如80/20法則，除了透過對比的方式凸顯重要的元素外，利用動畫可能會是個不錯的方式。

七、幫助使用者建立心智模型

應用程式常都是由多個頁面組成，產品的設計者與開發者當然很清楚的知道每個頁面之間的關係，可是使用者不瞭解。使用動畫，可以更直覺的瞭解每個頁面之間的關係，從而幫助使用者建立應用程式的心智模型。

 

 

八、手勢的引導

手勢操作帶來非常便利的操作體驗，然而手勢操作卻不像按鈕一樣顯而易見，使用者沒辦法很容易的知道哪些介面可以使用什麼手勢。動畫是解決這個問題的好方法，我們可讓介面像是紙張一樣浮起來，讓介面看起來可以移動。又或者可以利用手勢提示的方式，提示使用者可以滑動。

 

 

九、狀態提示

一個良好的介面設計，應該要能夠清楚顯示當下的狀態，在 Nielsen 的可用性原則中，也有提到系統狀態可見性（Visibility of system status）的重要姓。我們可以利用動畫的方式，讓介面的狀態更為清楚，在現實生活中，捷運站的地板也有類似的設計，透過不斷的閃爍，讓我們知道車子要來了。

 

 

動畫要符合真實性

物體不會憑空出現

在現實中，所有實體從來不會憑空出現，操作介面上應該避免物體突然出現在畫面上的情況。

預先動作

就好像跳遠前需要助跑一樣，在動畫開始之前，使用一個預先動作，讓整個動畫顯的自然且順暢。約翰・拉賽爾（John Lasseter）曾說過，」沒有先兆的動畫會顯的突然、僵硬與不自然」。

移動具有加速度

使用加速度而不是固定速率，真實的物體不會在開始就有一定的速度，肯定需要一段加速階段，動畫設計上特別需要注意這點。

需要注意哪些事情

• 避免使用不重要的動畫
• 用動畫把使用者的注意力引導到重要且不容易被發現的地方上
• 通過適當的動畫，讓使用者者理解介面的變化
• 利用適當的動畫，幫助使用者者建立心智模型

相關閱讀

Google Material Design 中也提到了非常多的動畫設計上的細節，值得我們細細品嚐研究。 [http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-visual-continuity]
設計之下 — 搜尋新聞客戶端的用戶體驗設計
行動設計之鑰
親愛的介面

每當記帳時還在回想、翻收據帳單嗎？一個介面簡單、操作容易的記帳app是首選條件，讓每筆花費能以高效率的方式紀錄 😍 📝 靈感來自 Dribbble 設計師 Artkai
https://dribbble.com/artkai

超科幻的指紋辨識器，大大提升使用者的交互體驗及視覺享受 B| :|] B| 靈感來自 Dribbble 設計師 Mariusz Onichowski
https://dribbble.com/malkowic

很細膩的填表體驗，填完資訊馬上回饋給使用者資料是否正確，以及顯示目前完成度，讓使用者不在迷茫，能安心填表 8-) 👍 靈感來自 Dribbble 設計師 Leonardo Zakour
https://dribbble.com/leozakour

你餓了嗎？有多餓呢？快來看看漢堡堡可視化交互下單體驗，漢堡堡隨著Size加大，厚度也隨之長高 🍔 🍔 🍔 靈感來自 Dribbble 設計師 Gal Shir
https://dribbble.com/galshir

很棒的電影介紹APP體驗，流暢的轉場特效，及易操作的卡片式的介面，大大提升使用者瀏覽電影體驗 B| B| B| 靈感來自 Dribbble 設計師 Alex Huang
https://dribbble.com/ahuang

小朋友一定會愛上的單字學習 App 🐨🐯🐰 可愛的風格以及直覺的操作方式，讓學習變得好好玩！
設計靈感來自 Dribbble 設計師 Angela
https://dribbble.com/angerka

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

看到喜歡的顏色，還不知怎麼收藏嗎？來看看一款操作簡易的取色APP，即拍即挑，既可知道顏色的色碼，是不是超級方便 😍 🎉 🎉 🎉 靈感來自 Dribbble 設計師 Marin Begović
https://dribbble.com/marinb

俏皮的運動APP空狀態體驗，輕鬆的卡通風格介面加上細膩的動畫特效，如晃動的肚子，讓運動更加有趣 😜 👟👟 靈感來自 Dribbble 設計師 Adhrian
https://dribbble.com/afputra

細膩的動畫特效，卡片的抽換、添加愛心等流暢的動畫特效外，又添加彈簧細膩般的跳動，提升了使用者交互體驗 😊 👍 靈感來自 Dribbble 設計師 Cuberto
https://dribbble.com/cuberto

很酷的App刷新動畫，3D箱型原地選轉的刷新效果，增加了刷新的視覺享受跟使用體驗 😁 😤 靈感來自 Dribbble 設計師 JIE LIU
https://dribbble.com/JACKonboat

很棒的APP搜尋體驗，簡單多樣的輪廓圖形依序循著掃描針掃過，忽隱忽現，讓等待的畫面增添交互體驗 📡 👽 📡 靈感來自 Dribbble 設計師 Clay
https://dribbble.com/clayglobal

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！

好棒的App評分效果，隨著分數的高低，即時回饋臉部表情，讓以往單調的評分體驗變得更有趣，更有參與感 😖 😔 😊 😃 靈感來自 Dribbble 設計師 Andrew J. Lee
https://dribbble.com/lee_aj

超人性化的果汁訂購APP，多樣選擇，多重搭配，調配出獨一無二專屬自己的果汁，在炎熱的夏天，來杯天然冰涼的果汁是一大享受😊 🍉🍓🍊 靈感來自 Dribbble 設計師 Chuan²
https://dribbble.com/woodmouse

Oh Yayy! 這麼寫實、貼切的住房評分動畫特效，讓房客內心的滿意程度在評分時都顯現出來，既給屋主也給房客最棒的售後回饋 🙌 😄 😄 🙌 讓靈感來自 Dribbble 設計師 Saptarshi Prakash
https://dribbble.com/saptarshipr

飛吧！如此細膩的刷新體驗，寫實的臉部表情及整體反彈動效，讓體驗更有趣 😍 🚀 😍靈感來自 Dribbble 設計師 Delacro
https://dribbble.com/Delacro

創意十足的選單開啟效果，原來選單來可以這樣玩 👋👋 設計靈感來自 Dribbble 設計師 Mariusz Onichowski
https://dribbble.com/malkowic

以上就是本期的分享啦，如果你喜歡我們的分享，分享給更多的朋友知道，或者關注我們的粉絲團哦！