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

为什么这个按钮在另一个按钮的右边,为什么不在左边?

这个问题涉及到用户界面设计和用户体验的原则。按钮的位置选择应该根据以下几个因素来考虑:

  1. 习惯性因素:在大多数文化中,人们习惯将主要操作放在右侧,因为大多数人是右撇子,右手更容易操作。因此,将主要按钮放在右侧可以提高用户的可用性和操作效率。
  2. 阅读顺序:在大多数文化中,人们习惯从左到右进行阅读,因此在用户界面设计中,通常将主要操作放在左侧,次要操作放在右侧。这样设计可以符合用户的阅读习惯,提高用户的理解和操作效率。
  3. 视觉重点:按钮的位置也可以根据界面的布局和视觉重点来选择。如果界面的重点在左侧,将按钮放在左侧可以更好地吸引用户的注意力。反之,如果界面的重点在右侧,将按钮放在右侧可以更好地突出主要操作。

总结起来,按钮在另一个按钮的右边的设计选择是为了符合用户的习惯、阅读顺序和视觉重点,提高用户的可用性和操作效率。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么我在客户端发送信息的时候按发送按钮无法发到服务器端?

一、前言 前几天在Python白银交流群【无敌劈叉小狗】问了一个Python通信的问题,问题如下:大家能帮我看看为什么我在客户端发送信息的时候按发送按钮无法发到服务器端?...具体的表现就是点了发送但服务器收不到,如下图所示: 二、实现过程 这里【啥也不懂】给了一个指导,他当时在赶车,电脑不太方便,让粉丝截图了代码,直接看图的。这里提出来了几个怀疑的点。...顺利地解决了粉丝的问题。 如果你也有类似这种Python相关的小问题,欢迎随时来交流群学习交流哦,有问必答! 三、总结 大家好,我是Python进阶者。...这篇文章主要盘点了一个Python库下载失败的问题,文中针对该问题,给出了具体的解析和代码实现,帮助粉丝顺利解决了问题。...最后感谢粉丝【无敌劈叉小狗】提出的问题,感谢【啥也不懂】给出的思路,感谢【莫生气】等人参与学习交流。

14310

从苹果按钮说起,交互设计中的那些小细节

苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边*: 苹果的移动设备 苹果的电脑设备 微软说,除了删除之类的负向操作外,不论移动或电脑设备,*确定按钮放在左边...然后再让他们在剩下的图中选择最不喜欢的,再按确定按钮提交。这个实验的关键是,在选择不喜欢的图时,*确定和重置按钮的位置被悄悄替换了*。...用来测试的是一个在iPad上展示的黑白简易网站: 然而,这30人被分成A和B两组,A组先使用放在左边的确定按钮,再使用放在右边的确定按钮;B组先使用放在右边的确定按钮,再使用放在左边的确定按钮。...真正意想不到的是,在第二次选图时,如果按钮从左换到右边(A组),错误率稍有提升达到23.08%;如果确定按钮从右换到左边(B组),错误率竟然从第一步的0%冲到了*66.66%*!...如果不是亲自做的这个实验,我可能不会相信这个结果。 那么,为什么唯独将确定按钮从右换到左时,才有超过一半的人点错呢?

1.1K50
  • 一件交互设计大事,确定按钮放在左还是右?

    苹果说,不论移动或电脑设备,行动按钮(Action button)都放在右边,也就是说*确定按钮放在右边*: 苹果的移动设备 苹果的电脑设备 微软说,除了删除之类的负向操作外,不论移动或电脑设备,*确定按钮放在左边...用来测试的是一个在iPad上展示的黑白简易网站: 然而,这30人被分成A和B两组,A组先使用放在左边的确定按钮,再使用放在右边的确定按钮;B组先使用放在右边的确定按钮,再使用放在左边的确定按钮。...真正意想不到的是,在第二次选图时,如果按钮从左换到右边(A组),错误率稍有提升达到23.08%(3/13,注:减去了第一次出错的人);如果确定按钮从右换到左边(B组),错误率竟然从第一步的0%冲到了*66.66%...如果不是亲自做的这个实验,我可能不会相信这个结果。 那么,为什么唯独将确定按钮从右换到左时,才有超过一半的人点错呢?...估计那些没点错的少部分人中,不少人都是差点按错,在最后时刻才发现并纠正的。 所以,得出结论,只有确定按钮放在右边时,使用体验才是最顺畅的吗? 这个结论,无法轻易得出。

    1.8K70

    UI界面视觉平衡的终极指南

    可以发现左边的正方形比圆形面积大,视觉权重也更大。而右边的圆形和正方形的面积是是相等的,它们的视觉效果也更平衡。 我们也可以用方形和三角形来见证同样的效果。...图标按钮的情况与文本按钮略有不同。我们把“发送”图案放在一个圆形按钮的背景上。你认为哪种图标在视觉上更平衡? ? 你应该已经注意到左边的不平衡了,这是因为不同的对齐方法。...所以从视觉上来说,左边那种被修改过的圆形会比右边的几何圆形看起来更加圆润。 ? 我们如何利用这一原理?当然是圆角!...可以发现右边的按钮有更平滑的圆角,而且视觉效果也更好。 APP 图标也是如此,用标准的圆角是不能达到完美效果的。在深入讨论这个话题之前,我们先来看看两个不同的圆形。 ?...Marc Edwards提出了拉姆曲线的公式,使得形状在视觉上光滑而完美。ios7的桌面图标就基于此公式。 ? 后来这个形状通过黄金分割网格进行了修改。其思想是不变的,不过这是另一个故事了。 ?

    2.5K40

    iOS 与 Android 的APP 设计差异

    左边是iOS标准日期选择器; 右边是Android标准日期选择器 左边是iOS标准选择器;右边是Android标准选择器 IOS和Android中的按钮样式 在Android设计规范中有2种不同样式的按钮...左边是标准的Android按钮;右边是标准的iOS按钮 还有一种非常有特点的按钮类型——在Android上叫做浮动按钮,在iOS上叫做活动按钮。浮动按钮用来展示应用的主要操作。...例如,在邮件APP中写邮件,或者在社交APP中发状态都会用到这个浮动按钮。...正是因为有差异,所以需要密切关注不同平台的排版和布局规范。 左边是Android字体; 右边 是iOS字体 交互细节差异 给用户的第一印象通常都是建立在设计层面。...左边是iOS版的Gmail,右边是Android版的Gmail 左边是iOS版的Instagram,右边是Android的Instagram 但其实显而易见——使用两个平台系统自身的组件设计应用,流程要快很多

    3.5K10

    真·佛系研究:日本开发佛像情绪识别器,还能寻找你的“真命天佛”

    比如,三面六臂的阿修罗,如果从右边看,有点悲伤;如果从左边看,稍显喜感。 传统上,佛像不应该附有年龄和情感,也不应该有性别,当然守护神除外。...尽管如此,学者们认为,雕塑家往往受到他们时代的品味和风格的影响,以及那些佛陀雕塑委托人的愿望。例如,欢乐的表情在一个时期流行,而愤怒的表达在另一个时期受到青睐。...点击同意以后会出现两个按钮。 左边是上传,右边是摄像头拍照。 点击左边的。 点击上传和拖拽都可以。 这次我们试着上传一张Lecun的照片试试,Lecunの霸气笑顔!...继续滚轮往下,识别出情感后,出现一个吊胃口画面,“和你结缘的佛像是...”。 这个时候不要傻傻地等它结果出来,你会发现怎么等都出不来(别问我为什么知道)。直接滚轮往下,于是得到了和自己匹配的结果了。...可以看到,大多佛像都是中立的表情,这也符合佛像雕刻的讲究,佛像为了体现出超然,没表情更好。 拉到底,还有一些更具体的分析,文摘君就不在此一一赘述啦。

    44220

    Pycharm交互式开发环境【图文讲解】

    关于这个环境长什么样子以及怎么用,可以跟着我的步骤来看看。...一、使用Python Console 交互式开发环境 打开Pycharm界面,然后单击界面最下面的Python Console这个按钮,单击后会调出一个控制台,这个控制台将自动加载已经调试过的解释器。...在这个控制台里,程序员可以在三个绿色箭头>>>后面直接书写代码,在不加print的时候也行输出数据,当然print在这里也是可以用的。左边书写代码,右边显示数据。...1.png 左边书写代码,右边显示数据,数据类型也会显示出来 2.png 到底是怎么快速的展示结果给程序员呢,下面看看展示步骤 在绿色箭头后面直接输入变量名a,然后回车一下就可以得到变量a的结果是Python...为什么不推荐复杂的数据写在Python console开发环境中,因为这里写的代码是临时存储在内存当中,并不会真实的写在硬盘中,要是想要后期留存代码就比较麻烦了。

    1.1K20

    JavaFX之Scene Builder的使用(开发一款GUI小工具原来这么简单)

    三、Scene Builder的使用 下载完后打开,选择Basic Application就行,助于理解 打开完后应该是这个界面 中间的就是咱们要设计的桌面程序的UI界面了,左边Library就有JavaFX...说白了就是控制这个界面的文件,可以理解为界面的代码表示~~ 为什么需要Controller类文件?...4.3 自定义界面 下面随意做个栗子: 1.随便拉一个button控件到白色区域 2.然后可以在右边的properties属性栏更改这个按钮的样式,外观等等,例如我这里随便改了个hehe。...3.下面还有个code代码栏里面,可以设置这个按钮的id,点击事件等等,例如我这里也改成了hehe,你们也可以改成xxxbutton,这样便于开发 4.点击上方有个preview按钮可以预览我们当前设置好的界面...拿上面的按钮例子来解释一下标签中的属性是干嘛的吧~ fx:id指的就是这个控件的id值,为的是在Controller类中控制这个控件 onAction指的是点击这个按钮就能实现什么功能 text指的就是这个按钮的文本

    11.4K31

    pycharm交互式编程_环境影响因素有哪些

    一、使用Python Console 交互式开发环境 打开Pycharm界面,然后单击界面最下面的Python Console这个按钮,单击后会调出一个控制台,这个控制台将自动加载已经调试过的解释器。...在这个控制台里,程序员可以在三个绿色箭头>>>后面直接书写代码,在不加print的时候也行输出数据,当然print在这里也是可以用的。左边书写代码,右边显示数据。...左边书写代码,右边显示数据,数据类型也会显示出来 到底是怎么快速的展示结果给程序员呢,下面看看展示步骤 在绿色箭头后面直接输入变量名a,然后回车一下就可以得到变量a的结果是Python自学网。...为什么不推荐复杂的数据写在Python console开发环境中,因为这里写的代码是临时存储在内存当中,并不会真实的写在硬盘中,要是想要后期留存代码就比较麻烦了。...Console按钮。

    21920

    WinCE平台下的按钮控件没有MouseUp等事件

    先在PC机上的XP环境下写了一个测试控制程序,里面有如下效果:在按下按钮时云台开始动作,放开按钮时云台停止。在XP环境下很容易实现,一个是按钮的MouseDown事件,一个是按钮的MouseUp事件。...后来想直接移植到WinCE平台下,但是突然发现WinCE下的按钮的事件没有MouseDown和MouseUp事件,如下图所示,左边为WinXp下的按钮事件,右边为WinCE下的按钮事件:     ...一直在想,为什么会存在这种差异,后来才突然想到,因为WinCE作为一种移动平台,很我时候都是用的触屏,而现在简单的单点触控技术,还不能产生MouseUp这样的事件,可能微软是了为考虑软件的兼容性,就去掉了这些按钮事件吧

    62840

    Emlog模板设置插件使用教程及开发规范

    一直以来,emlog走的轻量级路线,没有集成模板后台设置,于是很多功能强大的模板不得不在需要的时候,修改文件以改变设置。...那么,有了这个插件以后,就可以不用如此纠结了,只要模板按照开发规范来开发,就可以使用本插件在后台进行设置了。...重点强调,本插件是辅助插件,所有设置依赖于模板的功能,而不是插件本身,因此不要问我为什么没有blabla功能,请去寻求模板作者。...其中type属性和name属性必选,name是设置项名字,而type用来指定设置项的类型,支持的类型如下: radio: 单选按钮 checkbox: 复选按钮 text: 文本 image: 图片 page...对于radio和chexkbox,values属性用来设置各个按钮的值和显示名称。

    53910

    Android之自定义View:侧滑删除

    我们这次要实现的控件叫做EasySwipeMenuLayout,内部主要分为三部分: 内容区域 左边菜单按钮区域 右边菜单按钮区域 当我们向右滑时,通过scroller将左边按钮区域滚动出来...当我们向左滑时,通过scroller将右边按钮区域滚动出来 实现的思路滤清了,那么我们就开始动手吧 具体实现 首先,网上类似的轮子有很多,但为什么我们还要自己写一下呢,当然是为了学习,所谓知其然而知其所以然也...在开始前,我还想再说一点,网上有很多类似的轮子,但是我发现个特点,他们要求控件内的子布局的顺序相对呆板,不够灵活,也就是所谓通过约定来实现。...如下可以看到,就是通过id来绑定,让EasySwipeMenuLayout知道哪个childView是现实内容的,哪个是左边的菜单布局,哪个是右边的菜单布局。 ?...为什么要这样子设计的,我的想法是,这样子更灵活,我不用规定里面的子布局的顺序。 以上仅代表个人观点,当然,肯定有更好的设计方案。

    1.3K30

    详解视觉误差对UI设计的影响和解决方案

    在画 icon 的时候,一定要把视觉尺寸这个无法用数字进行衡量的维度考虑进去。视觉重量小的元素要放大,视觉重量大的元素要缩小。...再看看发送按钮,左边的发送按钮与浅色背景的输入框为了达成视觉对齐故意地做短了一点点,右边的发送按钮也因为形状的缘故被故意地做长了一点,达成视觉对齐。 ?...它们看起来是居中对齐的,但实际上并不是,右边箭头形状的按钮中的文字在物理上并未居中对齐,它距离左右两边的边距是不一样的,这种形状的按钮文字必须靠左一些才能看起来对齐。 ?...好吧,希望你能够看出来左边那颗按钮是有问题的,实际上我在画这枚按钮的时候确实点了对齐,但是为什么还会出问题呢?跟文字按钮对齐一样,对齐的方式选错了。...这个技法在 App 的 icon 的制作上也有大量的使用空间,在深入分析之前,我们来看看下面两个 icon。 ? 左边是 Sketch 正圆圆角直出,右边是非正圆手动制作的 icon。

    1.3K10

    提升UI产品体验的14个细节!你都知道吗?

    特别是在“功能说明和条款条件”或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)...线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。(彩云注:左边的表单UI不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)...图片07按钮要正确合理从菲茨定律(Fitt's Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。...此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)...(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

    78620

    Django_rest框架实践项目(二) 为什么很少的代码就可以实现增删改查?rest框架如何实现分页?页面实现登录按钮?权限控制

    之前已经创建了helloworld项目,并且我们只是写了很少的一点代码,就实现了对数据库的增删改查,为什么我们写了一点的代码,就可以实现增删改查呢? 之前的界面是 ?...为什么很少的代码就可以实现增删改查? 因为rest框架的路由,我们看我们写的路由 ?...经过以上的创建,就可以在启动项目后,在浏览器里面出现连接数据库的界面, 首先我们看到的就是根目录,这个就是我们urls.py里面的路径 ?...对,只要在setting里面配置了那个,那么在浏览器页面就会出现分页的按钮。 实现登录按钮 我们现在看我们的页面 ? 顶部什么也没有,现在我们配置一下路由 ?...要实现登录的按钮,那么在url里面要加一句代码 api-auth这个名字是随便起的,后面就是规定好的 url(r’^api-auth/’, include(‘rest_framework.urls’

    92010

    ConstraintLayout_1:可视化拖拽布局

    image.png 我们可以看到,现在主操作区域内有两个类似于手机屏幕的界面,左边的是预览界面,右边的是蓝图界面。...这两部分都可以用于进行布局编辑工作,区别是左边部分主要用于预览最终的界面效果,右边部分主要用于观察界面内各个控件的约束情况。...其实这个需求很常见,比如说在应用的登录界面,都会有一个登录按钮和一个注册按钮,不管它们是水平居中也好还是垂直居中也好,但肯定都是两个按钮共同居中的。...12.gif 可以看到,我们给登录按钮的右边向Guideline添加约束,登录按钮的下面向底部添加约束,并拖动按钮让它距离底部64dp。...然后给注册按钮的左边向Guideline添加约束,注册按钮的下面向登录按钮的下面添加约束。这样就实现了让两个按钮在水平方向上居中显示,在垂直方向上都距离底部64dp的功能了。

    1.4K20

    项目需求讨论 — ConstraintLayout 详细使用教程

    题外话 关于ConstraintLayout的文章网上一抓一大把,而且ConstraintLayout在16年就已经出来了,但是我一直没有试着去使用(别问我为什么不去使用,当然是因为懒啊)。...绿色的矩形B我们可以告诉它:你的右边靠着外面界面的右边,你的底边靠着外面界面的底边(然后B就处在了现在这个位置)。 所以基本操作就是:确定某个控件二个边的位置(比如靠在哪个控件旁边)。...比如我们A按钮已经确定好位置了。我们现在要放B按钮,就像我们上面说的,我们B按钮的二个边的位置,我们可以设置让B按钮的左边靠着A按钮的右边(相当于B按钮的左边与A按钮的右边处于同一位置)。...,让按钮的右边与父布局的右边对齐。...这时候因为不是单纯的一边对齐,而是相同直线上的二个边都被约束了。所以按钮无法紧靠着左边的或者右边的其中一个边界,所以这时候,这个按钮就会居于二个约束边界的中间位置。如下图所示: ?

    1.7K20

    面向所有人的 UI 编程 :透过点按弹窗初尝 SwiftUI

    ,而且上下左右请留出边距;对了,选中后要弹出一个选项,左边是复制,右边是一个复制的图标;啊,对了对了,英语字体最好是圆体字,而且两段文字都要加粗,就是小标题加粗的那种感觉。...下图就是它们在 Xcode 中的预设。 ?...现在我们来观察上述代码的结构,你会发现整段代码由一个名叫 VStack 的视图和众多 Modifier 组成。 ? 那么 VStack 是什么呢?它的里面为什么会包着两个 Text 呢?...在按钮中,我们需要设置两个点:按钮的动作,也就是 action,里面的两行代码会将名言文字复制到剪贴板;另一个点是下面的 HStack ,表示一个水平排列的 View。...其左边是一个文字,右边是一个图标。这里关于 Button 的解释若你不熟悉编程可能会有点晕,没关系,我会在其它文章详细讲解。 ? 在上图中,你会发现背景变成蓝色的了,为什么?

    2.1K40

    nicegui布局细节补充——绝对定位,固定定位

    只在滚动到指定位置才出现 点击按钮,即可立刻回到页面顶部,并且按钮消失 本节使用的 nicegui 版本为 1.4.21 绝对定位 专栏惯例:先说原理细节,再给出一个封装好的便捷方法。...行6:为什么特意在卡片里面又套一个 column ?...比如 bottom:0; right:0 就是下边缘和右边缘距离为0,就是右下角了 稍微修改位置属性,就可以放到卡片的上方靠中间: 位置属性可以用百分比,表达的是容器高宽的百分比。...卡片上方的空白,是我们设置的 padding 但是,定位的是元素左边缘和上边缘,现在我们希望元素本身往左边移动自身宽度的一半。...通过另一个属性,可以控制元素的移动: transform:translateX(-50%) ,x轴,就是水平位置。这里的百分比的参照物是元素本身的宽度。

    1K10
    领券