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

如何快速提升设计感

Pinterest(下图2)将搜索框钉在页面顶部,不随内容的滚动而滚动,以此建立搜索优先的视觉层级。Pinterest有意将搜索框作为页面内的第一优先级元素。...要提升我们的App或网站视觉效果,最简单的方式就是保证元素的对齐,它能让我们App或网站瞬间好看10倍。 图片来源 让我们再看另一个对齐的案例,这次我们选择medium.com。...我们首先看这张图: 这是我从medium.com截图后做过调整的图。看起来是不是布局混乱,摸不清层级? 再看下一张图: 注意看上下两张图的对齐边缘线,它们看起来如何?...我将上图的边缘线标记出来,看起来像弯曲的河流,下图我只是简单地将主要内容对齐 对比下面两张图的最终效果(图一对齐混乱,图二清晰有序) 图一 图二 5.合理的字体大小和行距 适当增加字体大小和间距可以提高内容的可读性...合理的字号vs不合理的字号图片来源 6.如果顺序很重要,结果展示请用列表视图。 大部分手机App或网页会有各种样式的搜索,因此设计界可能也存在一些“如何在屏幕上展示结果”的良性探讨。

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

    Python 基于 selenium 实现不同商城的商品价格差异分析系统

    因为这 2 个网站使用搜索功能时没有登录验证需要,可简化本程序代码。 使用 selenium 在首页的文本搜索框中自动输入商品关键字,然后自动触发搜索按钮的点击事件,进入商品列表页面。...打开京东首页后,先定位定位文本搜索框和搜索按钮。...使用浏览器的开发者工具,检查到文本框的源代码是一段 input html 片段,为了精确地定位到此组件,一般先试着分析此组件有没有独有的属性或特征值,id 是一个不错的选择。...刚开始是在首页窗口操作,现在要在搜索结果窗口中进行操作,所以要切换到刚打开的新窗口。使用负索引得到刚打开的窗口(刚打开的窗口一定是最后一个窗口)。...,同样以 CSV 格式存储。

    1.7K20

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

    以下是使用UseSystemPasswordChar属性的示例:// 创建一个密码输入框TextBox passwordBox = new TextBox();passwordBox.UseSystemPasswordChar...= true;在上面的示例中,创建了一个TextBox控件并将UseSystemPasswordChar设置为true,这将导致用户输入的密码字符被替换为系统默认的密码字符。...1.9 WordWrapWordWrap属性是在Winform的TextBox控件中使用的。该属性将文本框中的文本自动换行,以适应文本框的宽度。...搜索:将TextBox控件作为搜索框,用户可以在其中输入关键字,搜索框下方显示搜索结果。文本编辑:将TextBox控件作为文本编辑器,用户可以在其中编辑文本,包括格式、字体、大小等。...3.具体案例以下是一个简单的Winform项目,演示如何使用TextBox控件:创建一个新的Winform项目。在窗体上添加一个TextBox控件。在窗体上添加一个Button控件。

    56623

    关于Shape 的两个问题

    形状的包围框以形状的参照系为中心,与参照系具有相同的方向(x轴、y轴和z轴与包围框的边缘具有相同的方向)。包围框完全包含形状。...当点击这个项目时(之前必须选择一个形状),坐标框将被计算出来,以产生一个边界与世界参考坐标系轴线对齐的边界框(即绝对坐标系)。...如果形状看起来离一个规则和精确的圆柱体太远,操作可能会失败。...Shading angle(遮光角度):遮光角度是不同面之间的角度。这只影响一个形状的视觉外观。一个小角度使一个形状看起来尖锐,有许多边,一个大角度使一个形状看起来光滑,有较少的边。...这是特别有用的像使用“污垢”一样的无缝纹理(我理解成做旧),以使物体看起来更真实。 Clear textures (selection)(清除纹理(选择)):从所有选择的形状中移除纹理。

    90010

    JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)

    事件的功能就是,某些组件被执行了某些操作后,触发某些代码的执行,如何绑定事件?...特点:1、不需要创建对象,可以直接使用,window.方法名(); 2、window引用可以省略,方法名(); 【举例】:轮播图的实现,实现思路: 页面上使用img标签展示图片; 定义一个方法,修改图片对象的...td的文本为文本框的内容 * 4、创建tr,将td添加到tr中 * 5、获取table,将tr添加到table中 2)删除表格的实现思路: * 1、确定点击的是哪一个超链接 * 2、再删除 的文本为文本框的内容 * 4、创建tr,将td添加到tr中 * 5、获取table,将tr添加到table中 * 删除: *...以上的方式看起来效果不错,但是,各位看官别急,我们使用innerHTML的方式来实现,效果更佳,代码更精简: <!

    2.2K40

    从登陆到爬取:Python反反爬获取某宝成千上万条公开商业数据

    不知从何时起,开始享受上了爬取成千上万条数据的感觉! ? 本文将运用Python反反爬技术讲解如何获取某宝成千上万条公开商业数据。...这里再说一下浏览器驱动器如何安装(以谷歌浏览器为例介绍): 首先,下载浏览器驱动器WebDriver chrom浏览器的驱动器下载地址:http://npm.taobao.org/mirrors/chromedriver...-10/ 以谷歌浏览器为例,需要首先知道浏览器的版本号 ?...keyword = input('请输入您要搜索的商品名字:') driver.find_element_by_id('q').send_keys(keyword) # 根据“检查”的id值精确定位淘宝网搜索框并传入关键字...值精确定位淘宝网搜索框并传入关键字 driver.find_element_by_class_name('btn-search').click() # 根据class标签'btn-search'

    1.1K21

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

    如果将Twitter和Pinterest的图标放大一些,看起来就能和Facebook和Instagram的图标保持平衡了。 ? 视觉平衡的另一个例子就将是一个文本框和一个圆形按钮放在一起。...在左图中,由于输入框是浅色背景,所以背景框是完全可以超出其他输入文本的。而由于“发送”按钮的颜色较深,视觉重量更大,所以与输入背景的右边缘完全对齐。 ?...而在右图中,由于输入框有实线描边,所以我们将它与其他文本对齐,并且将对应的文本内容进行了缩进处理。“发送”按钮有一个三角形的边,并且向右移动了一点,以与上面的矩形输入元素保持平衡。 ?...第一个是在Sketch中创建的圆角矩形,第二个是勾选了“平滑圆角”的圆角矩形,也称作Lamé曲线。这是法国数学家加布里埃尔·拉姆发现的规律,这套公式可以解决从四角星形到圆角矩形的的平滑问题。 ?...应该将多个SVG组合在一起,在代码中包含特殊的公式或脚本,或者使用像Apple的应用程序图标一样把png放在一个统一的蒙版上。

    2.5K40

    目标检测中的 Anchor 详解

    点击上方“小白学视觉”,选择加"星标"或“置顶” 重磅干货,第一时间送达 直观上,我们如何预测图像中的边界框?第一个最明显的技术是滑动窗口。我们定义一个任意大小的窗口,并在图像中“滑动”它。...我们不需要到处搜索;我们只需检查每个模板(锚框)是否适合(或接近适合)一个物体。然后,我们的模型学会调整这些模板(锚框)以完美匹配它找到的物体。...CNN的早期层仍然具有高分辨率,这意味着像这样的小汽车仍然可以被检测到。 在这一层使用一个小锚框(例如16×16像素)以匹配物体大小。...我们如何确保检测到小而远的物体和大而近的物体? 为了捕捉不同尺度和形状的物体,我们使用一组多样化的锚框。这些框需要仔细选择以与数据集中常见的物体对齐。 如何选择锚框?...锚框细化(回归+分类) RPN预测调整(回归)以细化锚框,使其与实际对象对齐。 它还分类每个锚框是否包含对象。 只有最有希望的框(称为区域提议)被传递到下一步。

    7710

    使用Selenium WebDriver,Python和Chrome编写您的第一个Web测试

    准备好WebDriver后,让我们编写第一个Web测试!测试将是一个简单的DuckDuckGo搜索。DuckDuckGo是一个不跟踪用户数据的搜索引擎。...让我们看看这些调用是如何工作的。 URL = 'https://www.duckduckgo.com' 该测试将DuckDuckGo主页的URL声明为变量,以提高可读性和可维护性。...上面的CSS选择器可以找到所有这样的结果链接div。请注意,“元素”是复数–此调用将返回一个列表。 assert len(link_divs) > 0 测试必须验证搜索词是否确实出现了结果。...assert len(phrase_results) > 0 像先前的断言一样,此断言确保至少找到一个元素。这是一个简单的健全性检查。...页面从搜索页面更改为结果页面。即使元素看起来相同,也有所不同,并且还需要一个新的定位器。因此,我们需要重新获取它。

    2.4K10

    深度 | 用于图像分割的卷积神经网络:从R-CNN到Mark R-CNN

    输入:图像 输出:边界框+图像中每个目标的标注 但是我们如何找出这些边界框的位置?R-CNN 做了我们也可以直观做到的——在图像中假设了一系列边界,看它们是否可以真的对应一个目标。 ?...在高级别中,选择性搜索(如上图所示)通过不同尺寸的窗口查看图像,并且对于不同尺寸,其尝试通过纹理、颜色或强度将相邻像素归类,以识别物体。 ?...正如我们所知,检测目标位置的第一步是产生一系列的潜在边界框或者供测试的兴趣区域。在 Fast R-CNN,通过使用选择性搜索创建这些提案,这是一个相当缓慢的过程,被认为是整个流程的瓶颈。 ?...以这种方式,我们创建 k 这样的常用纵横比,称之为锚点框。对于每个这样的锚点框,我们在图像中每个位置输出一个边界框和分值。...这是必要的,因为像素级分割需要比边界框更细粒度的对齐。

    1.8K60

    如何简便快捷使用python抓爬网页动态加载的数据

    一个例子是,我们打开京东主页,在搜索框输入关键词”乌鸡白凤丸“在返回的页面上显示的商品条目有60条,如下图: ?...代码负责获取这些数据,然后通过类似逆向工程的方式研究它如何构造http请求,然后自己模拟去发送这些请求来获取数据。...如何才能简单方便的获取动态加载的数据呢。...chromedriver', chrome_options = op) driver.get('https://www.jd.com/') 运行上面代码后就可以启动浏览器并看到他打开京东主页,此时我想自动在搜索框中输入关键词该怎么做呢...,通过html源码发现搜索框对应的id叫”key”因此我们可以通过下面代码把关键词模拟人手输入的方式输入到搜索框,然后再模拟点击回车按钮实现搜索请求: search_box = driver.find_element_by_id

    2.1K10

    YOLO v3有哪些新特点?

    这不是一个解释YOLO是什么的文章。 我假设您知道YOLO v2是如何工作的。如果情况并非如此,我建议您查看Joseph Redmon等人的论文,了解YOLO如何运作。...YOLO v1 YOLO v2 一篇不错的关于YOLO的博文 YOLO v3: 更好,但没有更快,更强 YOLO v2纸的官方命名为“YOLO9000:更好,更快,更强”,看起来像一种儿童喝的健康牛奶饮品...在每个尺度上,每个网格可以使用3个锚来预测3个框。由于有三个尺度,所以总共使用的锚点框数量为9个,每个尺度3个。 损失函数的变化 早些时候,YOLO v2的损失功能看起来像这样。...我不打算解释COCO基准测试是如何工作的,因为它超出了本文范围,但COCO 50基准测试中的50是衡量预测的边界框与物体的真正框的对齐程度。这里50对应于0.5 IoU。...这是YOLO被RetinaNet超越的地方,因为它的边框不像RetinaNet那样对齐。下面是一个详细的更多基准测试表格。

    1.3K30

    【学习】教你用R的Inkscape制作数据图表

    但随着可视化变得越来越重要,我认为仅仅只是数据传递是不够的,现在,一个可视化的视觉吸引力是必不可少的。 意识到这一点,我开始研究如何使信息图表可视化。甚至用了相当难用的工具像d3.js等去研究学习。...我们可以移动框,以确保它们不重叠。使用节点工具(F2)选择,然后用选择工具(F1)来移动它。 现在,让我们取消一切组合。...在Inkscape 里,涉及到像移动和删除东西的组视为一个单一的对象,而我们想要删除的灰色背景。使用选择工具选择的灰色框,然后点击鼠标右键,点击“取消组合”。...一旦做到这一点,我们就可以在空白的任意位置单击,并调整图像的大小,以适应到页面。如果有你想移动的标题框,右键点击在白色的空间,并使得能单独移动元素。 ? 左对齐一切。...如果有什么东西想要看起来是透明的,你可以调整底部的白色框。 结论:Inkscape是一个令人难以置信的强大的R编辑图表工具。视觉冲击力大的图表往往笔缺乏吸引力的有效得多。 ?

    2K70

    C# —— 点击按钮动态打开ComboBox

    网上搜索了好多资料,大多是重绘ComboBox或者使用自定义控件创建一个全新的ComboBox(并非基于window的ComboBox)。...对于菜鸟的我,实现太麻烦,有些代码理解起来困难,但是项目比较急,所以就投机取巧,简单的做了一个比较粗糙的看起来像那么回事。...三、配置Panel属性 1.把Panel拖到ComboBox上方,右边缘和ComboBox对齐,需要把ComboBOx下拉三角形完全覆盖掉; 2.把Panel的背景图片换成自己想要的按钮; 3.绑定Panel...的Click事件如下,当点击Panel时,使ComboBox下拉框展开 private void panelUsers_Click(object sender, EventArgs e)...四、美化ComboBox 但是每次选者下拉框后,显示区域总是伴随蓝色底色,不好看。

    2.9K10

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

    这就是为什么让输入字段看起来像输入字段,而不是按钮或任何其他UI元素,这个是至关重要的。 ?...不要让搜索看起来像按钮的输入字段 根据应用程序的UI设计,为容器选择对应的视觉样式 应该为容器使用圆角或方角吗?这个问题没有一个标准的答案。应该选择最适合你应用程序的视觉风格的产品。 2....前导图标 虽然在某些情况下,前导图标是可选元素,但可以通过在输入框旁边引入相关图标来创建更好的用户体验。好的图标可帮助用户一目了然地了解该字段的含义(用户无需阅读标签)。 ?...附注:良好的错误消息不应仅仅说明用户输入无效的事实;它应该提供有关如何解决问题的上下文说明。 ? 眼睛图标 对于收集密码的输入字段,你可以显示“眼睛”图标,以允许用户查看他们键入的内容。 ?...相关阅读: 2019最佳弹窗/弹出框设计20例【附教程】 插图设计正流行,10大理由告诉你如何靠它增强用户体验 全栈设计师必须拥有的Mac软件推荐

    2.4K20

    最新iOS设计规范四|3大界面要素:视图(Views)

    栏(Bars) 栏,可以告诉用户在APP中当前在所在的位置、能提供导航,还可能包含用于触发操作和传递信息的按钮或其他元素。包括6种:导航栏、搜索栏、侧边栏、状态栏、标签栏、工具栏。...你不必为执行这些内置任务而去创建自定义活动。活动视图还显示其他APP的共享和操作扩展。 ? 设计简单的模板图像来展示自定义的活动。模板图像使用Mask来创建图标。...无意义的布局更改可能会使APP看起来不可预测且难以使用。如果由于布局改变而改变了用户的使用语境,用户可能会觉得迷失。...请注意,系统可能会调整浮层的大小,以确保它适合屏幕。 确保自定义的浮层与系统提供的浮层类似。尽管可以自定义浮层,但是也应该避免创建看起来都不像是浮层的设计。当浮层接近系统浮层时,往往效果最好。...八、滚动视图(Scroll Views) 滚动视图主要被用户用来去浏览那些像文档中的文本,集合中的图像等比显示区域要大的内容。

    8.5K31

    高职考技能提升教程006期 textbox文本框综合运用 VB语言 高考信息技术必备

    创建一个“标准EXE”工程,将其窗体文件和工程文件分别以“test1.frm”、“test1.vbp”为文件名保存。 2.(14分)参照图1完成界面设计:按表1添加相关对象并设置相关属性。...(每个属性1分,共14分) 3. (4分)单击单选按钮控件数组中的任一个按钮触发一个共享事件(单击“左对齐”,文本框显示“文字左对齐”,单击“居中”,文本框显示“文字居中”,单击“文字右对齐”,文本框显示...“文字右对齐”); 4. (4分)单击组合框中的“黑体”,文本框显示“字体设置为黑体”,单击组合框的“幼圆”,文本框显示“字体设置为幼圆”,单击组合框的“楷体”,文本框显示“字体设置为楷体”; 5. (...总结 1、界面设计要颜色按照题目要求 2、文字的对齐方式有简便方法 3、combobox控件的下拉点击事件用的click 4、读题的细节方面重要! 软件设计界面: ?...更多视频教程,可以到“西瓜视频”搜索“ 刘金玉 ”。

    1.1K20
    领券