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

表单的 9 种设计技巧【上】

技巧 1:选择合适的输入框标签对齐码匠中标签根据标签与输入框的位置关系,可以设置位置和对齐方式:图片每种标签对齐都有自身的优点与局限性,根据不同的场景选择合适的标签对齐,能提高用户填写速度,同时还能降低信息填写时的错误率...以下为该研究中捕捉到的用户在填写三种对齐方式的表单时的眼动轨迹(圆圈越大,注视时间越长):图片图片图片可以看到,在顶部左对齐的设计中,用户能够在单次视线移动中同时获取标签和输入字段,可以更快理解表单。...注意对齐的一致性,所有标签在整个表单中都应该遵循相同的对齐方式。...如下图,在搜索栏中使用占位符来说明输入的内容: 图片 虽然占位符文本可以很好地扩展标签信息,但不应该用它来取代标签本身,因为较浅的文本颜色很难引起用户的注意,而且一旦用户开始输入,占位符就会消失。...人们理解图像和符号的速度比文本快得多,因此在输入框的前缀或后缀中添加表情符号可以大大提高用户体验,比如可以通过 表示搜索、 ☎️ 表示电话等。

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

    pptx:Python的PPT操作库

    读取PPT文档内容 先了解下PPT基本结构在python分别是什么含义: Slide:幻灯片,就是演示文稿中每一页的页面。 Shape:方框,在每页幻灯片内插入的方框,可以是形状,也可以是文本框。...subtitle 副标题类型的占位符 body 正文类型的占位符 3)向占位符内填写内容 shape.text = 字符串 prs.save(文件路径.文件名) #同文件夹内可以省略文件路径 绝对文件路径如...shape.placeholder_format print(f'{phf.idx}--{shape.name}--{phf.type}') shape.text = f'{phf.idx}--{phf.type}' #在占位符中填写...“占位符id号--占位符类型” prs.save('向占位符内填写内容.pptx') 写入前: 写入后: 4)修改占位符的内容 slide.placeholders[占位符ID] [变量名].text...:底端对齐 tf.word_wrap = True # 框中的文字自动换行 prs.save('文本框样式的调整.pptx') 2)文本框背景颜色调整 from pptx.dml.color import

    94960

    2019年最全的UI设计之输入字段剖析

    以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器。 今天,我想谈谈UI设计中最常用的一个设计元素 - 输入字段。输入字段允许用户在UI中输入文本。...前导图标 虽然在某些情况下,前导图标是可选元素,但可以通过在输入框旁边引入相关图标来创建更好的用户体验。好的图标可帮助用户一目了然地了解该字段的含义(用户无需阅读标签)。 ?...标签文本不应占用多行 如果你需要在字段的上下文中提供其他信息,请考虑使用帮助文本。 4. 占位符/输入文本 占位符是用户在与字段交互之前看到的文本。输入文本是用户在文本字段中输入的文本。...注意占位符文本的使用 为占位符选择正确的文本非常重要。例如,如果你要求用户提供城市,请不要将城市名称用作占位符。它会误导用户认为占位符文本是一个条目。 ?...右:占位符中提供了正确的格式 在某些情况下,最好使用自动格式化 - 该字段会自动调整用户提供的信息(根据格式)。它使得在表单中验证信息变得更加容易。 ?

    2.4K20

    python入门-2-55个案例吃透python字符串格式化

    主要是有4种方式: %:占位符的格式化 format()函数的格式化:重点掌握 f-string格式化:重点掌握 字符串模板函数string template 占位符% 常见格式符 格式化符号其实是为真实的值预留出一个空位...常见的不同的占位符如下: %s: 字符串 (采用str()的显示),常用 %r: 字符串 (采用repr()的显示) %c: 单个字符,格式化字符及其ASCII码 %b: 二进制整数...主要是用来显示数字的千位分隔符,在货币金额中使用的比较多: b = 1003005000600 print("{:-^20}".format(b)) # 不用逗号 print("{:-^20,}"...和format中的千位分隔符相同,主要是用于金融货币中,自带金钱属性呀。...格式整理 整理下关于对齐、精度、数值类型的符号等知识点: 对齐 对齐(数值默认对齐方式) >:左对齐(字符串默认对齐方式) ^:居中 符号 +:负数前加负号(-),正数前加正号(+) -:负数前加负号

    30620

    用户不填表?那是因为你没用好这7个设计准则

    一旦用户点击文本框,标签将消失,因此用户无法仔细检查他/她写的是什么确实是为了被写入。占位符文本是视觉标签一个贫穷的替代品。 ?...另一件事是,当用户看到一个文本框里面写的,他们可能会认为它已经在预先填写并可能因此忽略它。 为什么要左对齐字段标签对无线端表单设计是不好的 左对齐字段标签的主要问题涉及手机显示屏尺寸和宽高比。...如果一个左对齐标签在字段前面所使用的,窄屏幕离开左为场本身的空间非常小。这是一个创建可用性的问题,因为表单字段通常不足够宽,以显示用户的整个输入。...占位符文本默认情况下显示,但一旦一个输入字段被窃听和输入文本占位符文本淡出和顶部对齐的标签的动画。...如果正在要求用户输入的数字信息(诸如电话号码)转换成一种形式,是柔性的,和设计的屏幕,可以解释多个输入格式和显示的方式,很容易可扫描的信息(人类,而不是机器)中为了防止出错。不要使用固定的输入格式。

    1.9K60

    python中实现格式化输出 %用法

    当我们在python中需要打印出特定格式的内容时可以用到这个方法,方法介绍如下: 例如我们现在要收集用户的一些个人信息,这时候我们的代码如下: name=input("name: ") age=int(...salary) 最后输出结果就会是这样:jack 18 student 1000 这时候我们可以优化前边的代码,使打印出的内容更加规范化,格式化,清晰化,需要用到格式化输出的内容,在python中格式化输出有两种方法...字符串占位符%s %10s——右对齐,占位符10位 %-10s——左对齐,占位符10位 %.2s——截取2位字符串 %10.2s——10位占位符,截取两位字符串 二....十进制整数占位符%d %10d——右对齐,占位符10位 %-10d——左对齐,占位符10位 三.浮点数占位符%f %10f——右对齐,占位符10位 %-10f——左对齐,占位符10位 %.3f——保留到小数点后三位...%10.2s——10位占位符,保留到小数点后两位 下面我们就可以用%的方法优化这段代码:

    87420

    Python中关于list、tuple、

    split(seq=None,maxaplit=)是从左至右进行切割,可以指定分割字符串,在不指定的情况下默认是空白字符左分割符,还可以指定分割的次数,-1表示遍历整个字符串         rsplit...段和分割符的元组        partition(seq):从左至右,遇到分割符就把字符串分割为两部分,返回头,分隔符,尾三部分的三元组,没有找到分割符,就返回头,空的分割,空尾的三元组。...在指定的区间[start,end]从左至右,查找字串sub,和index使用一样         len()   返回字符串中字符的个数         count(sub[,start[,end]])...花括号表示占位符,{}表示按照顺序匹配位置参数,{n}表示取位置参数索引位n的值。{XXX}表示在关键字参数中搜索名称一致的。{{}}表示打印花括号。     ...          可以直接使用对齐方式:                     左对齐                     >右对齐                     ^居中对齐

    81210

    python字符串格式化输出

    格式化表达式 格式化表达式类似于printf的风格,在字符串中使用%作为占位符。本文只是介绍python中的一些特性,如有需要请自行搜索printf用法。...替换目标还可以使用字典,这时在字符串中的%占位符可以以key的方式来引用: >>> "%(name1)s with %(name2)s" % {"name1":"longshuai", "name2":...Your age is 23 字符串格式化方法:format() 使用format()来格式化字符串时,使用在字符串中使用{}作为占位符,占位符的内容将引用format()中的参数进行替换。...例如,下面的会报错: template.format(name1='long', "shuai", name3='gao') 因为字符串中的占位符是直接引用format中的参数属性的,在占位符处可以进行索引取值...,左对齐,^表示居中对齐,并且可以使用0来填充空格。

    1.5K20

    Python字符串格式化

    最后的f表示浮点数。 示例4: "%-*.*f" % (10,5,18.3) 将和上面的示例俄得到一样的结果,可以猜测出,这里的*起到了占位符的作用,使得最小长度在后面的Data区指定。...这里用到了列表,并用%(key)作为占位符,后面接转换类型d,后面的Data区用一个含有key的字典。可以直接得到相应的value。...这里的d还可以换成上面复杂的格式模板,如"-10.5f" 扩展形式 上面的示例都是使用的%表示Data区,并且格式相对稳定,只是比C中多了一个字典的方式,其他的区别不大。...示例6: "{0},{2},{1}".format(one,2,3) 结果为"one,2,1",这个过程是使用{index}作为占位符,后面的args列表中相应下标的数据会替换之。..., 1.30000,string " 在原有的基础上加上冒号和标准形式中定义的格式转换符即可,但是这里要注意了,其对齐不在用“+”和“-” 而是 对齐 > 左对齐 ^ 两边对齐 在上面对齐格式前面加字符表示填充符

    97930

    Python 占位符格式化详解

    占位符,顾名思义就是插在输出里站位的符号。占位符是绝大部分编程语言都存在的语法, 而且大部分都是相通的, 它是一种非常常用的字符串格式化的方式。...指定占位符宽度 - 左对齐 print (“Name : %-10s, Age : %-9d, Height : %-8.2f”%(“Yao Ming”, 37, 2.29)) Name : Yao...Ming , Age : 37 , Height : 2.29 注: 格式化可选标志符, 可选参数 右对齐;正数前加正好,负数前加负号; 左对齐;正数前无符号,负数前加负号; 空格 右对齐;正数前加空格...,负数前加负号; 0 右对齐;正数前无符号,负数前加负号;用0填充空白处 如: -10s, 表示10个字符串位置, 左对齐,后面用空格填充 指定占位符 - 用0当占位符 print (“Name : %..., 也非常实用, 它可以很好的帮助我们解决一些字符串格式化的问题, 变换出多种用法, 一些常用的占位符大家可以记住, 以便提升编程效率。

    82020

    【自然语言处理】NLP入门(二):1、正则表达式与Python中的实现(2):字符串格式化输出(%、format()、f-string)

    字符串格式化输出可以使用不同的格式规则,如占位符、格式化指令、模板字符串等方式来指定变量或常量嵌入到目标字符串中的方式。...3 种模式 (1)% (2)format() (3)f-string 3.1 %符号格式化字符串   %符号格式化字符串是一种传统的格式化方法,通过在字符串中使用占位符 % 和格式化字符串中的参数来实现格式化输出...3.2 format()方法格式化字符串 format()方法是一种更加灵活和易读的字符串格式化方法,它使用 {} 占位符和format()方法中的参数来进行格式化。 1....()方法中,使用 {} 占位符指定插入变量的位置,可以在占位符中指定参数的顺序,也可以使用索引指定参数的顺序。...对齐方式 '{0:*>10}'.format(18) # 右对齐 输出:‘********18’ '{0:*左对齐 输出:‘18********’ '{0:*^

    16410

    Python学习 :格式化输出

    方式一:使用占位符 % 常用占位符:% s   (s = string 字符串)           % d   (d = digit 整数(十进制))         %  f   ( f = float...:format()函数(推荐使用) format()函数通过传入的字符串作为参数,并使用{}大括号作为占位符 format(a , b) 变量a 对应{0}  变量b 对应{1} 注意:Python从0...开始计数,意味着索引中的第一位是0,第二位是1 位置的匹配:       (1)不带编号,即“{}”       (2)带数字编号,可调换顺序,即“{0}”、“{1}”       (3)带关键字,即“...一些符号的含义: {0}        —— { 0 }      表示第一个位置          {0:10}   —— { :10}    表示有10个字符那么长并且左对齐(默认为左对齐)...") # 左对齐,字符串的长度为10个字符 print(a) >>> I love sing and dance . a = " I love {0:^10.3} and {1:^

    66130

    【愚公系列】2023年11月 Winform控件专题 TextBox控件详解

    默认情况下,当用户按下回车键时,文本框会将焦点移动到下一个控件,而不是在文本框中插入回车符。如果要允许在文本框中输入回车符,则将AcceptsReturn属性设置为true。...默认情况下,当用户按下Tab键时,文本框会将焦点移动到下一个控件,而不是在文本框中插入制表符。如果要允许在文本框中输入制表符,则将AcceptsTab属性设置为true。...属性是用来控制文本对齐方式的,可以设置为左对齐、右对齐、居中对齐等。...在Visual Studio的设计器中,选择控件后,在属性窗口中找到TextAlign属性,可以通过下拉列表选择对齐方式。...、右对齐、居中对齐外,TextAlign属性还支持如下的对齐方式:ContentAlignment.BottomCenter:底部居中对齐ContentAlignment.BottomLeft:底部左对齐

    56323

    printf和scanf的介绍以及VS解决scanf报错问题

    一、printf和scanf的介绍和占位符1.占位符1.1printf中的占位符介绍printf可以在输出文本中指定占位符,所谓“占位符”,就是这个位置可以用其他值代入。...%s —— 字符串return 0;}占位符的第一个字符一律有百分号%,1个文件中可以有多个占位符。...下列举出几个scanf中特例占位符:% :在方括号中指定一组匹配的字符(比如:%0-9),遇到不在集合之中的字符,匹配将会停止。上面所有占位符之中,除了%c以外,都会自动忽略起首的空白字符。...printf("%-5d\n",123);//这里的负号就会改变对齐方式为左对齐。...3、scanf问题解决详情1.在eyething中搜索newc++file.cpp,选择地址中有2022的路径。

    9110

    CSS相关知识点

    5、较少功能使用较少代码(a代替ui>li>a) 6、如果盒子都是左对齐的话,最后一个盒子在右边的位置不够的话,会掉下来,如果第一个盒子A比第二个盒子B高,那么最后一个盒子C掉下来后跟第二个盒子B左对齐...,而不是跟第一个盒子A左对齐。...如果最后一个盒子C后面还有一个盒子D的话,D盒子的顶端跟C对齐。(下图 JD logo 是 A 盒子, 搜索框是 B 盒子, 周杰伦的歌是 C 盒子,我的购物车是 D 盒子。) ?...7、标准流中的文字不会被浮动的盒子盖住。所以一个大盒子中的小盒子要么都浮动要么都不浮动。 ? 8、父盒子高度为0 ,子盒子如果是浮动的话不占位置,下面的标准流盒子将会跑到子盒子下面。...(不要让浮动的盒子超出父盒子) 11、浮动盒子的相互影响,不管是否在一个大盒子里面(蓝盒子是包含在粉红盒子里面的,紫盒子和粉红盒子是并列的)。 ? ? 12、谷歌浏览器不支持12号以下字体大小。

    56240

    Python 中的字符串操作

    首先,我们可以发现,字符串中有两个地方用了:{a:bcde} 这种形式的表示方法。其实这个就相当于C语言里面的 ‘%’ 占位符,只不过比C语言里面的占位符更加灵活。...参数 c 代表内容的对齐方式。‘左对齐,‘>’代表右对齐,‘^’ 代表居中对齐,如果没有参数 c ,那么默认右对齐。...对齐方式为左对齐,内容占用的宽度是 5 位,如果内容宽度小于 5 位,用‘-’符号填充。数据类型为字符串类型。对于第二个 ‘{1:-的。...其实对于字符串的格式化,也可以用类似于C语言 printf 函数中的占位符 ‘%’来完成,不过没有format 方法灵活,逐渐被 format 方法取代了。...在第2步中,我在元组参数中添加了一个整型值 2,Python 报错,意为:序列中项目一,需要的是 str 实例,然而发现的是 int 类型。 好了,关于 Python 的字符串操作就先到这里了。

    93320

    html学习

    --只有1-6级标签,设置h7会不识别,而当作普通文字进行解析--> p 划分段落,自动在段前段后自动加空行 align段落的对齐方式,默认为居左 hr 分隔符标签,会在页面上显示一条分割线 size属性...height:高度;可以是像素也可以是百分比 align:水平对齐方式 常用left center right;都可以设置 valign:垂直对齐方式 常用 top middle bottom;valign...--一个div在效果中默认占满一行--> 我是div111111111111 我是div222222222222 的最大长度,一般用于显示文本框中文本内容的长度 placeholder:占位符属性,用于设置文本框的占位符:提示信息 选项标签 select name属性:发送到服务器的名称...,get相对不安全 ,get提交数据量有限 Post不会将数据拼接到地址栏将数据上传到请求体中 相对安全,理论上是无限的 尽量使用post方式提交表单 提交表单的注意事项 ①需要提交服务器中的数据,必须都要放到

    1.5K10
    领券