美文网首页
交互学习——button

交互学习——button

作者: 乔溪 | 来源:发表于2017-07-30 13:53 被阅读24次

    button样式

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

    位置+大小:

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

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

    点击反馈

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

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

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

    相关文章

      网友评论

          本文标题:交互学习——button

          本文链接:https://www.haomeiwen.com/subject/liejkxtx.html