交互学习——button

button样式

无论是纯文字,icon,还是button,都需传递出这里是可点击的,运用线框、投影、文字颜色、动效表现

位置+大小:

(1)越大越易点,越容易引起注意,越近越易点。如果是一系列的操作,考虑样式、位置的一致性,如多个授权弹窗连续出现,则尽量保证确定键位置一致(比如chrom 浏览器,关闭多个窗口时位置保持一致,非常方便),如有多个连续动作,前后动作按钮操作连贯性(如退出按钮和确认退出按钮)。如果是相反的操作,考虑两个按钮的差异性,避免误触(比如新增和清除)(2)考虑使用手机场景,单手操作多不多、移动操作还是静态操作。关于手机操作热区没有找到非常权威,适用于亚洲人的调研,仅根据周围12个人的小样本体验得出(手机尺寸:5.5寸、5.2寸、4.7寸):随着屏幕越来越大,单手操作舒适区中等偏下,顶部区域最难点击,左上角几乎无法触达。

(3)如果页面有滑动操作,考虑滑动后按钮的位置。随时需要的功能,采用悬浮状态;反之,跟随页面滑动、或隐藏,以留出更多空间展示其他信息。

点击反馈

(1)点击后跳页面、唤起新图层、适用于复杂功能

(2)左右开关型button,点击后左右滑动,明确表示状态,适用于功能的状态判断不是非常明确的功能,


(3)简单button,通过视觉语言传达状态,适用易理解的设置,设置后马上可见的功能,比如夜间模式、无图、设置即可见易于理解。


你可能感兴趣的:(交互学习——button)