首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

按钮位置如何设计?看这篇足够了

设计界面时,页面中都会有操作按钮。 不同的使用场景,对应的按钮位置布局不同。按钮位置如果放错,会导致用户操作不畅,甚至操作失败。 本篇文章就讲讲这个知识点,让平时没注意的人彻底掌握按钮位置逻辑。...其他操作例如选择所选位置、提醒谁看、谁可以看,同步到朋友圈,都是次要操作且不会调起键盘。 用户输入文字之后,直接可以点击附近的「发表」按钮,快捷方便。 能否将「发表」按钮放在页面中呢?...图片 将「发表」按钮放在页面,当输入文字时,会导致键盘遮挡操作按钮,无法快速点击「发表」操作。 除非是「发表」按钮附近有很多需要键盘输入的必填表单,不然不能这么做。...目前来看,微信的「发表」按钮位置设计是最优解。 3、跟随内容布局 常见于表单字段填写时,如下图所示。 图片 那么能不能将操作按钮放在导航栏右侧呢?答案是不行!...有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。 图片 但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

1.3K30

PHP短视频源码,按钮拖拽

Camera-Lens-Phone_hg1jkuVdgzSi (2).jpeg bt.setOnTouchListener(object : OnTouchListener {             //上次view的坐标位置...bt.width                     }                     MotionEvent.ACTION_MOVE -> {                         //移动时记录相对上次的坐标...dx                         var bottom = v.bottom + dy                         //如果left < 0,则是左移,右边框上次位置加上左移部分...                    }                 }                 return false             }         }) 以上就是 PHP...短视频源码,按钮拖拽相关的代码,更多内容欢迎关注之后的文章

1.2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    PyQt5 技巧篇-按钮隐藏并保留位置,设置按钮的可见度,设置按钮透明度

    设置按钮可见度为0 每种控件都有3种设置可见度为0的方法,下面来拿按钮的来举例了。...我们习惯嵌套在一些横向和纵向布局里,但是这种布局只要是里面的控件不可见,就相当于没有了,所以会重新分配各个组件的位置,这样我们的整体布局就会有所变化。...设置按钮透明度,保留原位置 透明和不可见可不一样,透明是一种颜色。...还提供一种思路,比如,我设置布局里每个按钮自己单独包裹一层布局,可以设置布局的最小宽度和高度,这样标准的隐藏的按钮看不到按钮了,但是仍然还保留着位置的,因为这里还有一个有最小值的布局给占着位置呢!...实例展示 如图,我想隐藏左边的录制脚本按钮。 左边的这组按钮嵌套在一个横向布局里。 ? 这是设置可见度为0的效果,发现布局已经变了。 ?

    3.3K20

    皕杰报表如何在web页面调节大小和位置按钮

    皕杰报表工具中报表在页面显示的大小和位置可以通过在URL后面添加servlet参数的方式来控制。...rptwidth否报表在web上的输出宽度整数或百分比750rptheight否报表在web上的输出高度整数或百分比500控制工具条位置的是 toolbardisplay,他有四个参数值,top-在表格上方显示...toolbardisplay否工具条在页面上的显示位置top-在表格上方显示below-在表格下方显示bottom-在表格底端显示none-不显示工具条见注3控制报表在页面位置的参数有一个,hlayout...xlsbtn否工具条中是否显示整页导出Excel按钮true或falsetruexlsbtn1否工具条中是否显示分页导出Excel按钮true或falsetruepdfbtn否工具条中是否显示导出PDF...按钮true或falsetruedocbtn否工具条中是否显示导出DOC按钮true或falsetruecsvbtn否工具条中是否显示导出csv按钮true或falsefalse

    66230

    第127天:移动端-获取触摸点的位置

    一、移动端轮播图滑动 1、先获取手指在轮播图元素上的滑动方向(左右) (1)手指触摸开始时记录手指所在的坐标X (2)获取界面上的轮播图容器 var $carousels=$('.carousel')...next':'prev'); javascript代码 1 //移动端轮播图滑动 2 3 //1、先获取手指在轮播图元素上的滑动方向(左右) 4 //手指触摸开始时记录手指所在的坐标...next':'prev'); 40 41 42 43 } 二、移动端获取触摸点的方式说明 1.touchstart事件        手指头触摸屏幕上的事件 2.touchmove...touchstart、touchmove、touchend三种事件下的鼠标位置点获取: (1)touchstart事件下获取:e.originalEvent.targetTouches[0].pageX...由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的 意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以 e.originalEvent.targetTouches[0],所以位置

    1.5K20

    【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

    背景图片 1、简介 2、代码示例 一、插入图片 ---- 1、简介 插入图片 : 插入图片方式 : 在 HTML 中 , 使用 标签可以插入一张图片 ; 插入图片适用场景 : 显示 内容 , 按钮...*/ margin-left: 50px; margin-top: 50px; 来设置图片的位置 ; 代码示例 : <!...: 通过修改 背景位置 background-position 修改图片显示位置 ; 代码示例 : div { /* 设置盒子大小 */ width: 400px; height.../image.jpg) no-repeat; CSS 样式 , 设置背景图片 , 通过修改 背景位置 background-position 修改图片显示位置 /* 通过修改 背景位置 background-position...修改图片显示位置 */ background-position: 50px 50px; 来设置图片的位置 ; 代码示例 : <!

    1.7K10
    领券