在进行网页设计的时候,我们都知道鼠标悬浮或点击是不可缺少的交互状态,但是在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%
-
颜色加深
-
等比缩小
以上列举的只是部分常见的需要按压状态的场景,像搜索框、输入框等等如果考虑细节交互状态的话也是需要做相应的设计的,就可以根据以上设计思路选择合适的方案。
原文始发于微信公众号(海盐社):APP设计中按压反馈-Press
评论0