在進行網頁設計的時候，我們都知道滑鼠懸浮或點擊是不可缺少的交互狀態，但是在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/
留言列表
