APP设计中按压反馈-Press

APP设计中按压反馈-Press

在进行网页设计的时候,我们都知道鼠标悬浮或点击是不可缺少的交互状态,但是在APP设计的过程中,这种按压的状态常常会被设计师忽略,今天我们就来总结一下APP中需要焦点状态的场景,以及各自的设计要点,方便我们需要的时候可以快速输出符合要求的设计稿。


目录:

1. 按压反馈是什么

2. APP中常见的按压状态应用场景 


      按压反馈概念      


简单来说就是用户按压可操作区域时,可操作区域样式的改变,让用户感知到自己对当前操作的有效控制。


比较典型的按压反馈是IOS的键盘,在九宫格的状态下,当你按压对应的操作区域时,如果是白色的背景色,颜色会变暗;如果是深色的背景色,颜色会变白;通过这种明显的颜色反差,让用户明确感知到自己所触发的操作区域,能够直观的感受到与界面的沟通和交互。(因为无法截到键盘按压状态的示例,所以大家自己操作,感受一下~)


IOS原生软件及国外的一些APP上的按压状态做的都挺好的,但是纵观国内,多数产品其实都没有做按压反馈效果,像淘宝、支付宝、天猫等大厂的产品也只是在一些比较重要的操作上才会有按压效果,整体来说对这个状态的关注度不是很高;但是像一些平台/工具类产品(比如ofo、滴滴、Things),因为会更多的关注用户的操作体验,会在这些细节交互状态上下功夫~~



      常见的按压状态      


经过整理发现APP中设计按压状态场景主要有:按钮、分段控件、图标、文字、列表、卡片,下面我们分别来看一下他们的设计方式。(以下所有的数值都是对比线上产品得出来的,不是唯一数值,仅可做参考)


1. 按钮

根据按钮样式的不同,有多种呈现形式,分别为:

  • 颜色饱和度较高、明度较低的按钮,降低不透明度,通常为原始按钮的50%;

  • 颜色明度较高的按钮,在背景上覆盖20%不透明度的黑色遮罩;

  • 浅色块按钮(上面可能会包含一个图标/logo),在按钮整体上覆盖50%不透明度的黑色遮罩;

  •  灰色线性按钮,增加浅灰色填充,色值通常为 E******;

  • 有颜色的线性按钮,变为对应颜色的填充,文字颜色变为白色; 

APP设计中按压反馈-Press


2. 分段控件

  • 在线框内增加填充,调整不透明度为15%; 

APP设计中按压反馈-Press


3. 图标

  • 颜色明度较高图标,覆盖50%不透明度的黑色遮罩;

  • 颜色饱和度较高、明度低的图标,降低不透明度,色块降低到50%,线性图标降低到30%;

  • 浅灰色面型图标,加深颜色;

  • 操作区域背景变为灰色; 

APP设计中按压反馈-Press


4. 文字

  • 有颜色的可操作文字,不透明度变为30%;

  • 灰色的可操作文字,不透明度变为50%; 

APP设计中按压反馈-Press


5. 列表

  • 在列表上增加灰色背景:一些比较简单的信息列表,比如通讯录、功能入口列表等,通常会选择的按压颜色为#D9D9D9(IOS系统列表按压颜色);一些比较复杂的资源类列表,通常用的颜色为E*****;

  • 将列表的背景变为品牌色,文字反白处理; 

APP设计中按压反馈-Press


6. 卡片

  • 卡片整体等比缩小; 

APP设计中按压反馈-Press


总结:

按压状态的设计思路主要有4个:

  • 增加黑色遮罩,不透明度通常是50%

  • 改变透明度50%或30%

  • 颜色加深

  • 等比缩小

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

APP设计中按压反馈-Press

原文始发于微信公众号(海盐社):APP设计中按压反馈-Press

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码