交互学习——button

button样式

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

位置+大小:

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

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

点击反馈

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

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


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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,925评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,267评论 4 61
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,840评论 1 92
  • 初入职场,不可避免的会遭遇很多工作“陷阱”,小心驶得万年船,可是稍有不慎,就有可能掉进“大坑”。虽说吃一堑,长一智...
    人生反之亦然阅读 1,057评论 2 10
  • 晚间。外面下雨,连云港的风,吹的人难受。 刚刚结束了班会,提前过中秋。我还是小透明,即使什么都知道,也...
    东隅Ryan阅读 254评论 0 1