APP卡片設計中按壓反饋

在進行網頁設計的時候，我們都知道滑鼠懸浮或點擊是不可缺少的交互狀態，但是在APP設計的過程中，這種按壓的狀態常常會被設計師忽略，今天我們就來總結一下APP中需要焦點狀態的場景，以及各自的設計要點，方便我們需要的時候可以快速輸出符合要求的設計稿。

目錄：

1. 按壓反饋是甚麼

2. APP中常見的按壓狀態應用場景

      按壓反饋概念

簡單來說就是用戶按壓可操作區域時，可操作區域樣式的改變，讓用戶感知到自己對當前操作的有效控制。

比較典型的按壓反饋是IOS的鍵盤，在九宮格的狀態下，當你按壓對應的操作區域時，如果是白色的背景色，顏色會變暗；如果是深色的背景色，顏色會變白；通過這種明顯的顏色反差，讓用戶明確感知到自己所觸發的操作區域，能夠直觀的感受到與界面的溝通和交互。（因為無法截到鍵盤按壓狀態的示例，所以大家自己操作，感受一下~）

IOS原生軟體及國外的一些APP上的按壓狀態做的都挺好的，但是縱觀國內，多數產品其實都沒有做按壓反饋效果，像淘寶、支付寶、天貓等大廠的產品也只是在一些比較重要的操作上才會有按壓效果，整體來說對這個狀態的關註度不是很高；但是像一些平臺/工具類產品（比如ofo、滴滴、Things），因為會更多的關註用戶的操作體驗，會在這些細節交互狀態上下功夫~~

      常見的按壓狀態

經過整理發現APP中設計按壓狀態場景主要有：按鈕、分段控件、圖標、文字、列表、卡片，下面我們分別來看一下他們的設計方式。（以下所有的數值都是對比線上產品得出來的，不是唯一數值，僅可做參考）

1. 按鈕

根據按鈕樣式的不同，有多種呈現形式，分別為：

• 顏色飽和度較高、明度較低的按鈕，降低不透明度，通常為原始按鈕的50%；
• 顏色明度較高的按鈕，在背景上覆蓋20%不透明度的黑色遮罩；
• 淺色塊按鈕（上面可能會包含一個圖標/logo），在按鈕整體上覆蓋50%不透明度的黑色遮罩；
•  灰色線性按鈕，增加淺灰色填充，色值通常為 E******；
• 有顏色的線性按鈕，變為對應顏色的填充，文字顏色變為白色；

2. 分段控件

• 在線框內增加填充，調整不透明度為15%；

3. 圖標

• 顏色明度較高圖標，覆蓋50%不透明度的黑色遮罩；
• 顏色飽和度較高、明度低的圖標，降低不透明度，色塊降低到50%，線性圖標降低到30%；
• 淺灰色面型圖標，加深顏色；
• 操作區域背景變為灰色；

4. 文字

• 有顏色的可操作文字，不透明度變為30%；
• 灰色的可操作文字，不透明度變為50%；

5. 列表

• 在列表上增加灰色背景：一些比較簡單的資訊列表，比如通訊錄、功能入口列表等，通常會選擇的按壓顏色為#D9D9D9（IOS系統列表按壓顏色）；一些比較複雜的資源類列表，通常用的顏色為E*****；
• 將列表的背景變為品牌色，文字反白處理；

6. 卡片

• 卡片整體等比縮小； 

總結：

按壓狀態的設計思路主要有4個：

• 增加黑色遮罩，不透明度通常是50%
• 改變透明度50%或30%
• 顏色加深
• 等比縮小

以上列舉的只是部分常見的需要按壓狀態的場景，像搜尋框、輸入框等等如果考慮細節交互狀態的話也是需要做相應的設計的，就可以根據以上設計思路選擇合適的方案。

想學習更多卡片設計方面的知識可以訪問：http://www.designnow.com.hk/