APP设计中按压反馈-Press

在进行网页设计的时候，我们都知道鼠标悬浮或点击是不可缺少的交互状态，但是在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%

• 颜色加深

• 等比缩小

以上列举的只是部分常见的需要按压状态的场景，像搜索框、输入框等等如果考虑细节交互状态的话也是需要做相应的设计的，就可以根据以上设计思路选择合适的方案。