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

一篇文章读懂UI按钮设计细节与规范

与平面化的按钮相比,带有阴影的按钮也可以让用户有更强的点击欲望,并且更快的注意到这个按钮。在按钮中添加一个微妙的阴影,可以让它从背景中脱颖而出。关于按钮阴影的最佳实践将在本章稍后讨论。 ?...圆角按钮 圆角按钮被认为比锋利边缘的按钮更为友好和正面。但是,与此同时,这种做法使围绕它们的内容设计变得更加困难。如果你在按钮上方保留了对齐文本,则圆角越圆,在该文本在视觉上将会越小。...太会让你感觉左边距和上方文本不在同一个位置上(也就是说没有对齐)。 ? 对齐图标 在按钮上进行良好的图标对齐是一件很困难的事情。在很多情况下,字体粗细,图标粗细之间的关系都会影响到对齐。...但是,有一条简单而有用的规则,在大多数情况下都适用。 ? 根据按钮的圆角半径,我们来创建一个圆或者正方形,其大小等于按钮的高度。在这个图形中,我们创建另一个形状来容纳图标。...这个图形应该在一个视觉形状中有填充,以便与我们的文本高度相同。然后,将图标放置在较小的形状中。 如果是人字形图标,那么最高使其与文本高度相同,并且您还可以根据字体的宽度检查线宽。

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

    科学瞎想系列之一一四 同步电机的功率圆图

    其横坐标表示无功功率,纵轴表示有功功率,其标尺均为功率的标幺值,功率的基值为额定视在功率(额定容量)SN。...当转子直轴与定子磁场对齐时,θ=0,根据功角特性,Pem=0,只有无功功率,此时电机可看作是一个大电感,此时的定子电流全部是直轴无功电流,由于定子磁场与直轴对齐时电感最大,电流最小,这就是“失励圆”与横轴的右交点...,即在没有励磁的情况下同步电机能够输出的最小无功功率;当转子交轴与定子磁场对齐时,θ=90º,根据功角特性,此时同样Pem=0,只有无功功率,但由于定子磁场对齐交轴时电感最小,电流最大,这就是“失励圆”...与横轴的左交点,也就是说,在失励情况下,定子磁场对齐交轴时,电机输出的无功功率最大。...⑦ 通过L点作横轴垂直线。从O1作任意直线O1D与上述垂直线交于D点,并与失励圆交于C点。截取线段DE使之等于O1C。重复此过程所得E点轨迹即为“理论稳定极限线”。

    3.7K40

    三名高中生,为近百年的分形定理带来了新证明

    在他们的导师、多伦多大学数学家 Malors Espinosa(以下简称 Malors) 的帮助下,他们证明了一条关于扭结和分形(knots and fractals)的新定理。...Menger 虽然已经证明,你可以在海绵中找到一个圆。但在某种意义上,与圆等价的物体又如何呢? 考虑数学上的一个扭结:一根绳子被扭成一团,然后两端闭合形成一个环。从外面看,它可能看起来像一团乱麻。...但一只蚂蚁沿着它爬,最终会回到起点,就像在圆上一样。这样一来,每个扭结都等价于圆,或「同胚于」圆。 每个扭结都「同胚于」圆,这意味着可以将点从一个点映射到另一个点,同时满足一组简单的条件。...要创建一个扭结,首先要了解扭结的线如何在彼此前面或后面穿过。然后应用一组规则将这些信息转换为网格上的一系列点。网格的每一行和每一列都将包含两个点。 用水平线和垂直线连接这些点。...如果没有将这些面直接对齐,他们将扭结穿过该分形的方法就不再有效。

    6000

    OpenCV:霍夫直线变换和霍夫圆变换

    一条线可以表示为 y = mx+c 或以参数形式表示为 ρ = xcosθ+ysinθ $,其中ρ是从原点到该线的垂直距离,而θ是由该垂直线和水平轴形成的角度以逆时针方向测量(该方向随如何表示坐标系而变化...任何垂直线将具有0度,水平线将具有90度。 现在,看一下霍夫变换如何处理线条。任何一条线都可以用(ρ,θ)这两个术语表示。因此,首先创建2D数组或累加器(以保存两个参数的值),并将其初始设置为0。...这样一来,最后,单元格(50,90)的投票数将最高。因此,如果在累加器中搜索最大票数,则将获得(50,90)值,该值表示该图像中的一条线与原点的距离为50,角度为90度。...您使用的霍夫变换仅返回线与原始线的角度和距离。所以额外的计算是从原点垂直于这条线找到一条线的交点,这样它就可以识别这条线上的某个点。但它不知道这条线应该有多长。所以它沿着这条线从那个点延伸了这条线。...但是线本身的方向与该方向成 90 度,其角度由 给出-1/tan(theta) = -cos(theta)/sin(theta) = -a/b or a/-b。

    63030

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

    下面是带有辅助线标记的版本。 ? 我们再来看一张相似的图片。 ? 是不是发现它们的视觉权重变得相似了?不要奇怪,这是因为我增加了圆的直径。 如果感受不够明显的话,我们将两张图片的形状重叠。 ?...而在右图中,由于输入框有实线描边,所以我们将它与其他文本对齐,并且将对应的文本内容进行了缩进处理。“发送”按钮有一个三角形的边,并且向右移动了一点,以与上面的矩形输入元素保持平衡。 ?...我们再来看视觉对齐的另外一种情况——文字与按钮的对齐。看看下面按钮中的文本,它们看起来都居中是吗? ? 诀窍是,我右边按钮的文本向左移动了一点,因为右边的边是三角形的。...播放按钮也是一样,如果你直接对齐这些形状,那么它们看起来会很奇怪。 ? 如果你想让三角形的位置在视觉上更平衡,那么就把它圈起来,然后将这个圆与按钮背景对齐。 ?...- 要点: 具有尖锐边缘的形状应该更大或更长,以便与相邻的矩形保持平衡。 用大写高度对齐法通常是对齐文字与背景按钮的有效方法。 要让三角形图标与按钮对齐平衡,可以用其外接圆与背景按钮对齐。

    2.5K40

    日本提出EUV光刻新方案:光源功率可降低10倍,成本将大幅降低!

    △ASML与德国光学公司蔡司(Zeiss)合作,由该蔡司来生产反射镜,以使得EUV光线经过多次反射后能够精准的投射到晶圆上。...250W光源功率所带来的最终工作功率提升了一倍,这也提升了其EUV光刻机的每小时处理晶圆数量的能力。...)排列在一条直线上。...不过,新的双反射镜光学系统的挑战在于,防止光学像位差,并确保高效率的光传输。对此,需将这些镜子对齐成一条直线,确保系统维持较高的光学性能,不会出现与EUV光线相关的扭曲现象。...为了解决这些问题,Tsumoru Shintake教授通过将两个轴对称镜与一条直线上的微小中心孔对准,实现了其卓越的光学性能。

    14110

    canvas详细教程! ( 近1万字吐血总结)

    其中,弧线的起点是“开始点所在边与圆的切点”,而弧线的终点是“结束点所在边与圆的切点”。arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。...,弧线是∠ABC与半径为100像素的圆相切的部分,如图: 蓝色线为辅助理解的线 5...., 180, 320, 400) 设置文本样式 .font方法可以设置文本大小和字体; .textAlign:设置文本的对齐方式,可选left/right/center/start.../end,对齐方式是以文本对strokeText()方法中坐标参数为参考的水平方向对齐方式。...ctx.globalCompositeOperation = 'xor' ctx.fillStyle = 'pink' ctx.fill() 解释一下:中间显示粉色是因为蓝色圆与黄色圆重叠之后为透明的了

    3.8K22

    自学cad 零基础_零基础自学吉他的步骤

    选择绘图-构造线,或单击二维绘图面板中的构造线按钮或在命令行中输入xline 五种绘制构造线方法: ①水平H ②垂直V ③角度A(创建一条与参照线或水平轴成指定角度,并经过指定一点) ④二等分B(创建一条等分某一角度的构造线...) ⑤偏移O(创建平行于一条基线一定距离的构造线)   7.弧线 比较复杂的平面图形中基本都会涉及到弧线的绘制。...提供三种绘制正多边形方法: a内接圆法:多边形的顶点均位于假设圆的弧上,需要指定边数和半径。 b外接圆法:多边形各边与假设圆相切,需要指定边数和半径。 c边长方式:直接指定多边形上的大小和方向。...④圆环 圆环是填充环或实体填充圆,即带有宽度的闭合多段线。要创建圆环,需要指定它的圆心和内个直径。 ⑤椭圆 选择绘图-椭圆命令,或单击椭圆按钮,或在命令行中输入ellipse来执行命令。...角度:下拉文本框控制颜色渐变的方向。 其余选项功能与图案填充一样。

    3K20

    结构建模设计——Solidworks软件之草图镜像阵列功能总结及进阶绘制小挖土机草图实战

    目录 0 引言 1 实体镜像阵列 1.1 镜像 1.2 阵列 2 草图进阶绘制实战 3 总结 0 引言         此次博文总结下草图绘制中另外两个比较常用的功能:镜像与阵列,同时结合上面几篇博文的草图绘制基础总结...——在草图绘制区域画出一个圆和一条直线 ——点击镜像实体按钮 ——左侧属性栏中,默认蓝色激活了的是要镜像的实体,此时选择圆,选择后圆就会在该列表中显示 ——再点击属性栏中激活镜像轴,然后点击直线 ——最后确认...,可以看到得到一个相对直线镜像的圆 1.2 阵列         阵列,就是将已经画好的草图元素以阵列的方式复制出来,下面以复制上面画好的镜像圆为例,做一个阵列。...然后使用三点圆弧,在直线的端点绘制圆弧 ——再分别选取圆弧与两侧的直线,设置相切属性 ——从圆弧的圆心处开始画一条垂直的构造线,设置两侧的直线与构造线对称 ——使用智能尺寸工具标注尺寸 (3)上臂与固定架连接部分...——以固定架中的圆中心为圆心,使用圆弧画弧 ——再使用直线及三点圆弧绘制轮廓,并设置相切 ——智能尺寸标注草图 (4)上臂部分 操作方式都是用直线、3点圆弧绘制,此处不再详细录制操作步骤了,画完完全定义的草图如下

    1.3K40

    Canvas 实现 progress 效果

    既然是HTML5的特性,那必须是只有支持HTML5的浏览器才能使用,兼容性如下图: 使用到的API 参考资料~W3School beginPath 定义:开始一条路径,或重置当前的路径。...context.beginPath(); arc 定义:创建弧/曲线(用于创建圆或部分圆)。...参数 text:要测量的文本 fillText 定义:在画布上绘制填色的文本 context.fillText(text, x, y, maxWidth); 参数 text:规定在画布上输出的文本...x:开始绘制文本的 x 坐标位置(相对于画布)。 y:开始绘制文本的 y 坐标位置(相对于画布)。 maxWidth:可选。允许的最大文本宽度,以像素计。...1,画出带有透明度的内圆 context.beginPath(); //设置透明度,样式与线条宽度 this.extend(context, { globalAlpha

    2K00

    基于Python利用OpenCV实现Hough变换的形状检测

    霍夫空间 但是我们有一个问题,当 y = mx + b 时,我们不能表示一条垂直线,因为斜率是无限的。所以我们需要一种更好的参数化方式,极坐标(ρ 和 θ)。...霍夫空间 ρ:描述直线与原点的距离 θ:描述远离水平线极坐标的角度 线极坐标 不过,一个非常重要的观察结果是,当我们在一条线上取多个点,然后我们变换到我们的霍夫空间时,会发生什么呢?...霍夫空间中的点线关系 图像空间上的单个点转化为霍夫空间上的曲线,其特殊性是图像空间上一条直线之间的点将由具有单个接触点的多条曲线表示。 这将是我们的目标,找到一组曲线相交的点。 什么是霍夫变换?...使用 OpenCV 检测圆 该过程与直线的过程大致相同,不同之处在于这次我们将使用 OpenCV 库中的不同函数。...需要注意的是,参数必须有所不同,因为我们无法使用与用于线的相同参数化来描述圆,而是需要使用类似 (x - x0)^^2 + (y - y0)^^2 = r^^2的方程.

    2.5K10

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

    以物理尺寸的角度来看,它们绝对对齐了,因为这两个长条是一样长的。但是,由视觉的角度来看,上面那一条是不是看起来比下面那一条长一点? ? 我们修改下长度再看看。 ?...以下这种彩带样式的图相信大家都做过,要让整个图看起来平衡、整齐,就要利用上这种现象,有意识地加长需要加长的部分,才能做到对齐。 ? 我们再看一个实验例子,带背景的文本要如何进行对齐。...如图所示,我们要让黑色背景与文本对齐,而放置于黑色背景之内的文本要有一定程度的缩进,这样才能达到视觉对齐的效果。 ?...与浅色背景不同,深色背景的视觉重量本身比较重,要让文本看起来更加一体的话,就一定要这样做。否则抓眼的背景会过分突出,让看起来对齐的感觉消失。 ?...这种现象与排列原则最常应用于按钮与输入框。 ? 左边的浅色背景输入框框体不会与标签文字对齐,框内文本才会与标签对齐。右侧的深色边框的输入框的框体就要与标签文字对齐,而框内容无需与标签文字对齐。

    1.3K10

    3D特征点概述(2)

    (2)对于每个点,Pi通过沿着法线看它来创建一个小图像补丁。法线是图像块的局部坐标系的Z轴,其中Pi位于(0,0)。 Y轴是世界坐标系Y轴。 X轴相应对齐。...RSD (Radius-based Surface Descriptor) 是一种局部特征点 输入格式: (1)由一组带有方向信息点P组成的点云。带有方向意味着所有点都具有正常的n法线。...(5)由于查询点Pi可以是多个圆的一部分,其邻居仅保持最小和最大半径并将其分配给Pi作为输出。该算法接受最大半径参数,在该参数之上,点将被视为平面。 ?...简短概述 (1)对于P样本中的每个点Pi,Pi周围的所有k个邻居。 (2)根据距离d和无向法线的角度将所有邻居分配到直方图。 (3)假设与每个邻居的Pi对描述一个圆(见图)。...(4)对于三元组,建立一个三角形并计算两侧之间的角度,并将角度的一侧分为三角形(IN,OUT,MIXED)。增加A3的IN,OUT或MIXED子组合图中的相应角度箱。

    1.6K50

    绘制圆环图雷达图星形图极坐标图径向图POLAR CHART可视化分析汽车性能数据

    我发现的两个主要问题是,极坐标的变化会使你的路径弯曲成圆形,而且雷达无法与geom_bin结合使用来填充背景。 这就是为什么我通常在笛卡尔坐标系统中使用。更像是一种数学解决方案。...add_rownames\[1:12,\] 绘制数据映射 为了映射我想绘制的任何列的值,我创建了函数。它基本上会检查您想要绘制多少个变量并为 x 和 y 值绘制正弦曲线。...创建 x、xend、y 和yend 数据点以绘制其间的线段。...但是为了简单地将所有轴文本和轴标签设置为blank,我构建了一个可以使用 text 绘制的数据框。...有一点 -1/num 偏移以使该部分正确对齐。在这里,您提出了您要为其着色的因子变量。当然,您还可以更改代码以根据变量更改每个条的“高度”。

    3K20

    计算几何算法概览

    计算两条共线的线段的交点 计算线段或直线与线段的交点 求线段或直线与折线、矩形、多边形的交点 求线段或直线与圆的交点 凸包的概念 凸包的求法 三、算法介绍   矢量的概念:   如果一条线段的端点是有次序之分的...如果线段和多边形的某条边内交(两线段内交是指两线段相交且交点不在两线段的端点),因为多边形的边的左右两侧分属多边形内外不同部分,所以线段一定会有一部分在多边形外(见图a)。...计算线段或直线与线段的交点:   设一条线段为L0 = P1P2,另一条线段或直线为L1 = Q1Q2 ,要计算的就是L0和L1的交点。  1....求线段或直线与折线、矩形、多边形的交点:   分别求与每条边的交点即可。   求线段或直线与圆的交点:   设圆心为O,圆半径为r,直线(或线段)L上的两点为P1,P2。   1....如果L平行于X轴,做法与L平行于Y轴的情况类似;   4. 如果L既不平行X轴也不平行Y轴,可以求出L的斜率K,然后列出L的点斜式方程,和圆方程联立即可求解出L和圆的两个交点;   5.

    1.6K40

    【python-opencv】绘图(目标检测框及其置信度等)

    一些常见的参数,如下所示: img:您要绘制形状的图像 color:形状的颜色。对于BGR,将其作为元组传递,例如:(255,0,0)对于蓝色。对于灰度,只需传递标量值即可。 厚度:线或圆等的粗细。...cv.LINE_AA给出了抗锯齿的线条,看起来非常适合曲线。 要绘制多边形,首先需要顶点的坐标。将这些点组成形状为ROWSx1x2的数组,其中ROWS是顶点数,并且其类型应为int32。...在这里,我们绘制了一个带有四个顶点的黄色小多边形。...只需创建要绘制的所有线条的列表,然后将其传递给函数即可。所有线条将单独绘制。与为每条线调用cv.line相比,绘制一组线是一种更好,更快的方法。...向图像添加文本: 要将文本放入图像中,需要指定以下内容。 - 您要写入的文字数据 - 您要放置它的位置坐标(即数据开始的左下角)。

    1.8K10
    领券