资讯动态-数数App中icon焦点状态

数数App中icon焦点状态

2019-12-06 14:38:59

一、样式一览

用户进入App时，觉得获取内容与期望不同或是感兴趣的时候第一个想知道的问题时：我在哪儿？我要点击哪里去看别的内容？为了快速给到用户反馈，我们需要在相应页面进行对应的焦点提示。

1. 变色 – 填充色

如图，通过改变icon填充色的方式制造焦点· 告诉用户正在浏览位置，这也是比较常见的底部导航样式。

· 给用户操作反馈，常用于收藏夹、喜爱、点赞等交互功能。

设计原则：要求焦点简洁的同时，明显区分别的选项。

2. 变色 – 透明度

如图，改变icon的透明度，通过对比制造焦点。· 常用于同页面、同等级操作反馈，例如登陆对话框；

· 也会用于为满足要求不享用功能，例如某些会员服务页面。

设计原则：同等级操作反馈，提示用户待操作选项。

3. 形变 – 面性与线性相互切换

如图，面性与线性的切换对比较醒目，让icon容易被用户注意到，从而起到提示作用。· 常用于底部&头部菜单栏，等页面切换部位。

设计原则：焦点要醒目，当然也不是越夸张越好。

4. 形变 – 动效切换

更醒目的一种提示，通过icon的交互动效增加趣味性，从而起到提示作用。· 常用于底部&头部菜单栏，通过趣味动效，降低用户等待时的焦虑感。设计原则：焦点要醒目，但因为开发成本较高，运用较为局限。

5. 变形 – 动态提示

动态icon提示，通过动态效果提示用户当前进度及正在进行的内容。· 多用于播放器，例如，QQ音乐的播放按钮，将当前歌曲的播放进度于图标相结合；· 离线下载，通过动态效果减少用户等待的焦虑赶。设计原则：相对切换动效多用GIF代替，开发成本较低，运用广泛。

二、设计误区

1. 焦点的样式要统一么？

设计原则：样式尽量统一。看起来是句废话，但在实际操作中经常会进行过度设计，尤其是动效焦点，是造成不统一的重灾区。要注意同页面或同功能区域不要出现两种以上的动画变形与样式。

2. 找到焦点了嘛？

设计原则：焦点要区别于未选中状态。配图的对比当然是比较夸张的一种错误形式。这里想强调的是，但在实际工作中，我们经常会把自己带入到用户，从而忽略了一些表达形式与为选中的状态的对比程度。这是才是无法区别焦点和未选中状态的根本原因。

总结

用户不知道焦点在哪儿，就没法知道自己浏览的位置；没有接收到操作反馈，就没法知道自己是否操作成功。icon的焦点状态可以有效的解决用户的迷惑，并给予一定的等待安抚。但我们在设计“可操作”元素，仍是要注意每个模块之间的协调性。并不是所有的元素在同一页面都需要突出，也不是所有“可操作”元素都需要同时突出，有些元素例如，离线储存iocn只有在进行时，才需要突出它的焦点状态。

关键词：免费做h5的网站什么是h5技术 h5页面怎么制作