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

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

从左到右,将按钮中元素逐渐删除,它功能性开始消失, 以至于变成了装饰或者文字,失去了其可操作特性。 熟悉就是好 我们习惯了通常与动作关联某些形状或者形式。...如果确实需要,可以在设计规范中设定此类规则。 ? 除了用基于网格方式外,我们还可以使用大写字母W来选择按钮安全距离方法。...这样另一个后果就是,用户一怒之下卸载您应用。所以最小按钮尺寸为44X44pt,请务必注意。 ? 移动端按钮尺寸最好在50X50以上。在基于光标的设备中,32X32也应该可以用。...圆角按钮 圆角按钮被认为比锋利边缘按钮更为友好和正面。但是,与此同时,这种做法使围绕它们内容设计变得更加困难。如果你在按钮上方保留了对齐文本,则圆角越圆,在该文本在视觉上将会越小。...请记住以下要点: · 使按钮看起来像一个按钮 · 使标签垂直和水平居中 · 按钮内部有足够空间(或填充) · 如果你使用是图标,请选择正确尺寸和对齐方式 · 根据按钮位置设置合适边框半径

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

用纯 CSS 实现文本打字机效果,一定很酷!

在本文中,你将学习如何使用纯CSS实现打字机效果,使网站文本更加动态和迷人。 打字机效果是文字逐渐显露出来,就好像是在你眼前打字一样。...orange; font-size: 1.6rem; width: 0; } 注意,为了使打字机效果生效,我们添加了以下内容: "overflow: hidden;"和"width: 0;"...为了让这个动画一个字母一个字母地显示我们文本元素,或者像打字机那样以步骤显示文本元素,我们需要将typed-out类包含typing动画拆分为步骤,以便它看起来像是被键入。...我们将在typed-out类规则中包含这个动画,并将其动画方向属性设置为infinite,使光标每隔0.8秒消失一次,然后再次出现: } 调整闪烁打字效果代码 我们可以通过调整光标的右边框使光标变薄或变厚...请确保在一系列设备和视口大小上测试您打字机文本,因为结果可能因平台而异。还要为依赖辅助技术最终用户着想,最好运行一些可用性测试,以确保您没有让用户生活变得困难。

2.4K10

Ubuntu系统提速方法分享

逐渐成为一名经验丰富Ubuntu用户,可能注意到Ubuntu系统速度越来越慢。...这可能是由于逐渐安装了大量应用程序,或者配置设置对于更爽Ubuntu体验来说并非最佳,本篇文章为大家分享一下Ubuntu系统提速几个方法,有需要小伙伴可以参考一下。...你可以通过相似的方法来改变另一个开机启动应用启动时间。 3、安装 preload 来加速应用载入时间 Preload 是一个后台运行守护进程,它分析用户行为和频繁运行应用。...当然,桌面也许没有 Unity 或 GNOME 看起来现代化。那是你必须做出妥协。 10、使用不同应用更轻量可选 这不仅仅是建议和喜好。一些默认或者流行应用是耗资源且可能不适合低端电脑。...免责声明:本站发布内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:zbxhhzj@qq.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容

1.3K10

Photoshop Elements 2023 for Mac(ps简化版)v21.0 激活版

自动编辑选项和分步指导使您可以轻松创建令人惊叹照片。-Adobe Sensei AI技术*自动编辑照片,让您可以专注于创作乐趣。...-在55 Guided Edits帮助下,画出有趣图案、移除不需要对象等等。-通过自动着色使照片焕然一新。3、有趣创作以创造性方式展示您照片,充分利用您回忆。...4、轻松组织消除杂乱,以便轻松查找、查看和欣赏您照片。-自动从数百个神秘文件夹转到可视视图。-查看您最好照片——根据质量、面孔和主题自动整理。由Adobe Sensei提供支持。...6、一键选择您主题想要剪切或添加效果到您照片主题?只需单击一次即可自动选择。由Adobe Sensei提供支持。7、轻松删除不需要对象获取分步帮助,使干扰从您照片中消失。背景会自动填充。...8、替换背景轻松选择照片主题并将其移动到全新场景。9、让人们看起来最好自动抚平皮肤,减少皱纹和瑕疵。由Adobe Sensei提供支持。

91330

终极指南!超全面的UI动效基本规则总结

因此,大而复杂元素动效持续时间更长,看起来也更舒服一点。 ?...缓动加速曲线 通过曲线我们可以看到,物体开始时候初速度比较低,运动缓慢,随后速度逐渐增加,这意味着物体在加速运动。 ?...这种类型元素在 UI界面中最为常见,每当你不知道要在动效中使用哪种运动方式时候,可以试试标准曲线。 ? △ 标准曲线 最好使用不那么对称增速和减速过程,让动效看起来更加真实。...同时大家会更加在意运动结果,曲线末端,也就是运动结束过程最好进行适当强调。 ?...△ 沿着对角线加载 从属交互 从属交互指的是使用一个中心对象作为主体,来吸引用户注意力,而其他元素从属于它来逐步呈现。这样动画设计能够创造更强秩序感,让主要内容更容易引起用户注意。

1.4K20

我们和Pornhub开发者聊了聊

Beacon:在IOS上存在pageHide事件无正常工作问题 Fetch:没有下载进度,也没有提供拦截请求方法 WebRTC:如果分辨率不够大,则即使进行屏幕共享,Simulcast层也会受到限制...触觉在你们网站上WebVR中有起到作用吗? 我们正在研究webXR以及如何最好地适应新兴空间计算用例,作为最大发布平台,我们需要支持创作者和用户,无论他们想体验我们内容如何。...对于前端,我们主要运行原生Javascript,我们逐渐摆脱了jQuery,我们才刚刚开始使用框架,主要是Vue.js。...从局外人角度来看,成人网站通常看起来很相似:很多视频缩略图,聚合视频内容,摄像头表演,广告。作为从事这些工作的人,使成人网站与众不同特征是什么?...色情片永远不会消失事实也使工作稳定得到了保证! 就最终产品而言,分享下你在成人网站上工作可能与在本地互联网公司上工作不同。你会羞于告诉朋友,家人和熟人在成人网站工作吗?

1.9K20

我采访了 PornHub 一位开发者!

在成人网站上工作期间,你如何看待前端未来变化?哪些新 Web API 使生活更轻松?...触觉在你们网站上 WebVR 中有起到作用吗? 我们正在研究 webXR 以及如何最好地适应新兴空间计算用例,作为最大发布平台,我们需要支持创作者和用户,无论他们想体验我们内容如何。...对于前端,我们主要运行原生 Javascript,我们逐渐摆脱了 jQuery,我们才刚刚开始使用框架,主要是 Vue.js 从局外人角度来看,成人网站通常看起来很相似:很多视频缩略图,聚合视频内容...作为从事这些工作的人,使成人网站与众不同特征是什么? 我们非常努力地为每个品牌赋予不同层次独特性;内容库,UX 和功能集,以及许多不同算法。...事实证明,这很快就成立了,我第一次工作成果上线了,我感到非常自豪,我的确告诉所有朋友去看看!色情片永远不会消失事实也使工作稳定得到了保证!

2.3K31

Pornhub Web 开发者访谈

在成人网站上工作期间,你如何看待前端未来变化?哪些新 Web API 使生活更轻松?...触觉在你们网站上 WebVR 中有起到作用吗? 我们正在研究 webXR 以及如何最好地适应新兴空间计算用例,作为最大发布平台,我们需要支持创作者和用户,无论他们想体验我们内容如何。...对于前端,我们主要运行原生 Javascript,我们逐渐摆脱了 jQuery,我们才刚刚开始使用框架,主要是Vue.js 从局外人角度来看,成人网站通常看起来很相似:很多视频缩略图,聚合视频内容,...作为从事这些工作的人,使成人网站与众不同特征是什么? 我们非常努力地为每个品牌赋予不同层次独特性;内容库,UX 和功能集,以及许多不同算法。...事实证明,这很快就成立了,我第一次工作成果上线了,我感到非常自豪,我的确告诉所有朋友去看看!色情片永远不会消失事实也使工作稳定得到了保证!

2.9K41

快速原型法入门指南:用 7 分钟了解一切

从一张纸面上粗糙草图到一个看起来栩栩如生可交互仿真程序,原型可以展现为各种形式。这篇指南面向是想了解原型是怎么一回事纯初学者。 什么是快速原型法?...在迭代过程中,原型“保真度”也将随着包含内容增加逐渐被细化。 但是“保真度”到底是个啥呢? 原型保真度指的是什么? 保真度指原型和最终产品/解决方案匹配程度。...内容 (无意义假数据 vs. 真实内容) 在原型制作早期阶段,利用合适“无意义假数据”,可以有效避免用户分心 – 使之更关注反馈功能而不是对修改文字评头论足。...低保真:类似纸笔草图低保真方法产生静态原型,只保留低程度视觉效果和内容保真度,以利于快速容易更改。这种方法目的是让用户“聚焦于功能”,关注其如何使用产品,而非让其关注产品长什么样。...大部分时候,最好是从一个粗糙草图开始评估设计,然后依据系统复杂度和需求逐渐往更高保真度迁移。 有时需要根据客户需求或聚焦局部来做出选择。

2.2K20

创建华丽 UI 7条规则  第二部分 (2019年更新)

方法四:模糊图片 使文本内容清晰一个神奇方法,是将背景图像一部分变得模糊。 ? 苹果确实让背景变得模糊了,尽管它是在 Windows 系统中最先实现。 ?...方法五:Floor Fade Floor Fade 指的是图片靠近底部地方逐渐变黑,然后接着把白字填在上面。...哦,还有一件事——为什么图像底部逐渐变暗? 关于这个问题答案,上篇讲规则1——灯光通常是从上面照下来。为了让我们眼睛看起来更自然,图像底部稍微暗一点,就像我们所见过其他事物一样。...使文本层次分明 让文本看起来美观和合适通常做法是以对比方式设置样式 - 例如,更大但更轻。 在我看来,创建一个漂亮用户界面最困难部分就是文本样式 - 当然不是因为不熟悉这些属性。...底部元素就是“down-pop”。字体小,对比度低,并且字体较细。 以下是非常重要内容。 这个页标题是仅有的用上了所有 up-pop 方法文本。

1.1K30

一份详细LSTM和GRU图解

编译:yxy 出品:ATYUN订阅号 在这篇文章中,我们将从LSTM和GRU背后直觉开始。然后我(Michael)将解释使LSTM和GRU表现良好内部机制。...因此,如果你尝试处理一段文本进行预测,RNN可能会遗漏开头重要信息。 在反向传播期间,RNN存在梯度消失问题(梯度用于更新神经网络权重值)。梯消失度问题是当梯度反向传播随着时间推梯度逐渐收缩。...如果你是这样,那么其他单词就会从记忆中逐渐消失。 ? 这就是LSTM或GRU作用。它可以学习只保留相关信息来进行预测,忘记不相关数据。在这种情况下,你记得单词让你判断麦片是好。...你可以看到某些值如何爆炸增长,导致其他值看起来微不足道。 ? 没有tanh矢量变换 tanh函数确保值在-1和1之间,从而调节神经网络输出。你可以看到上面的相同值通过tanh函数保持界限之间。...这有助于更新或忘记数据,因为任何数字乘以0都是0,使消失或者说被“遗忘”。任何数字乘以1都是相同值,因此值保持相同”。网络可以了解哪些数据不重要可以被遗忘,或者哪些数据需要保存。 ?

3.5K20

Refactoring UI

但如果没有, 简化决定一个好方法就是看看你想接触的人所使用其他网站。 只是尽量不要过多借鉴直接竞争对手东西, 以免看起来像其他东西二流版本。...三级操作应易于发现,但不引人注目,将这些操作设计成链接样式通常是最好方法 当你采用层次优先方法来设计页面上操作时,用户界面就不会那么忙乱,而且能更清晰地传达信息 # 破坏性行为 具有破坏性或高度严重性并不意味着按钮一定要又大又红又粗...如果破坏性操作不是页面上主要操作,那么最好将其放在二级或三级按钮上处理 将其与确认步骤相结合, 其中破坏性操作实际上是主要操作,并在此处使用大红色粗体样式 # 布局和间距 # 开始时留白过多 清理设计最简单方法之一就是给每个元素多一点呼吸空间...好调色板可以分为三类 灰色 文本、背景、面板、表单控件--界面中几乎所有的东西都是灰色 你需要有 8-10 种色调可供选择 真正黑色看起来会很不自然,所以从深灰色开始,然后逐渐过渡到白色...第二个阴影更紧凑、更暗,垂直偏移更小,模糊半径也更小,模拟是物体下方阴影区域,即使环境光也很难照射到该区域 # 深度计算 当物体离表面越来越远时,由于环境光线不足而产生小黑影就会慢慢消失

33930

Web浏览器滚动方案一览| rAF等

最好不要问。这些不一致来源于远古时代,而不是“聪明”逻辑。获取当前滚动获取文档或DOM元素当前滚动状态是前端开发中很常见需求。...例如:window.scrollTo({ top: 100, behavior: 'smooth'});scrollTo 方法对整个页面和单个元素都起作用,常用于点击某个按钮后滚动到页面指定位置,或者滚动元素内部内容...如果 top=false,页面滚动,使 elem 出现在窗口底部。元素底部边缘将与窗口底部对齐。亦或是接受一个包含以下属性对象:behavior:定义滚动是立即还是平滑动画。...这个方法缺点是会使滚动条消失。如果滚动条占用了一些空间,它原本占用空间就会空出来,那么内容就会“跳”进去以填充它。这看起来有点奇怪,但是我们可以对比冻结前后 clientWidth。...如果它增加了(滚动条消失后),那么我们可以在 document.body 中滚动条原来位置处通过添加 padding,来替代滚动条,这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同。

7110

程序员自我欺骗 9 个谎言

结构性消除了编码寿命痛苦,直至其逐渐消失。...这一发现乐趣在几行新代码中逐渐消失,因为数据结构经常存在信息漏洞。人们将表单上行留空、有时数据还不可用。然后,您需要一些谓词来确定元素是否为空。 如果元素是字符串,需要测试长度是否为零。...一种字体看起来可爱东西,在另一种字体中可能看上去晦涩而令人不舒服。...人类语言是一致 开发人员提供方法之一是在文本字段中供用户录入内容,注释部分是为人类编写,很少由算法解释,因此它们不是问题一部分。 真正问题在于带有文本结构化字段。...时间使程序员生活变得令人讨厌,如您可能认为每天有 24 个小时,但最好不要马上就动手编写代码,前提假设总是正确

67430

Android 十年之路: 主屏与导航

例如,在早期,我们图标趋向拟物风格,也就是模仿实体世界中事物。随着人们对 Android 逐步熟悉,图标逐渐演变成更抽象、更简明形态。...随着系统功能逐渐强大,Android 手机上一些元素甚至消失了。 第二,互动。高度浓缩且具有一致性 UI 外观与手势交互逻辑使得与界面的交互更加直观和可预测。...那些看起来相似的元素,表现起来也符合人们预测。因此,即使是要去做之前从未做过事情,也变得容易多了。 最后,人们完成工作方式。这是我们近年来开始关注内容。...曾经作为主色调黑色和蓝色逐渐消失了,因为我们启动了 “去蓝色化” 工程 (de-bluing, 当时我们在这件事上投入了不少心力) 。我们转而使用较浅颜色,并提升了整个 UI 透明度。...将快速搜索框移到底部还让我们找到了一种在手机上进行导航方法: 在将搜索功能紧密地集成到操作系统中之后,用户可以快速找到他们想要应用和内容

70010

PHP生成器(generator)和协程实现方法详解

不过我认为新特性迟早会因为旧版本逐渐消失而变得越发重要,尤其是 PHP 7 正式版出来后,因此本文目的就是为了在这之前,帮助一些 PHPer 了解一些他们从没有了解东西。...它最简单调用形式看起来像一个 return 申明,不同之处在于普通 return 会返回值并终止函数执行,而 yield 会返回一个值给循环调用此生成器代码并且只是暂停执行生成器函数。...我们为了使程序不会无限执行,手动调用 current 方法获取值。 上述例子已经足以表示 yield 在那一个位置作为双向传输 工具,已具备实现协程条件。...PHP 自 5.4 到如今愈发稳定 PHP 7,可以看到许多新特性令这门语言愈发强大和完善,逐渐从纯粹 Web 语言变得有着更为广泛适用面,作为一枚 PHPer 的确不应当止步不前,我们依然有很多东西需要不断学习和加强...虽然 “PHP 是世界上最好语言” 这句话只是个调侃,但不可否认 PHP 即使不是最好,但也在努力变好事实,对吧? 希望本文所述对大家PHP程序设计有所帮助。

71720

HenCoder Android 自定义 View 1-6:属性动画(上手篇)

最好顺便也练一下代码) ObjectAnimator 使用方式: 如果是自定义控件,需要添加 setter / getter 方法; 用 ObjectAnimator.ofXXX() 创建 ObjectAnimator...视频里已经说过了,这个是一种最符合现实中物体运动 Interpolator,它动画效果看起来就像是物体从速度为 0 开始逐渐加速,然后再逐渐减速直到 0 运动。...用途:就像上面说,它是一种最符合物理世界模型,所以如果你要做是最简单状态变化(位移、放缩、旋转等等),那么一般不用设置 Interpolator,就用这个默认最好。...动画开始时候是最高速度,然后在动画过程中逐渐减速,直到动画结束时候恰好减速到 0。 ?...因为内容不能出现分身术呀),而且每一个时间完成度点上都必须要有对应动画完成度(因为内容不能在某段时间段内消失呀)。所以,下面这样 Path 是非法,会导致程序 FC: ?

78620

机器学习研究人员需要了解8个神经网络架构(下)

如果动态是嘈杂,它们从隐藏状态产生输出方式是嘈杂,那么我们永远无法知道它的确切隐藏状态。我们能做最好是推断隐藏状态矢量空间概率分布。这种推断只适用于2种隐藏状态模型。...使用这种计算方法一个简洁方法是将记忆作为神经网络能量最小值。 使用能量最小值来表示内存给出了内容可寻址内存。一个项目只需知道其内容一部分即可访问。它对硬件损坏很有效。 ?...这两种类型描述超出了本文范围。 8.深度自动编码器 ? 最后,我们来讨论深度自动编码器。由于以下几个原因,它们总是看起来像是一种很好非线性降维方法:因为它们提供了两种方式灵活映射。...随着初始重量较小,后向传播梯度消失。我们现在有更好方法来优化它们; 要么使用无监督逐层预训练,要么像在回声状态网中一样仔细地初始化权重。...对于预训练任务,实际上有3种不同类型浅自动编码器: 1.RBM是一种自动编码器:当我们用一阶对比散度训练RBM时,它试图使重构看起来像数据。

47610
领券