首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

何在 CSS 设计出漂亮阴影?

如果您无法移动双手,则可以改用房间中参考对象。比较你周围不同阴影。 因为我们在有阴影环境中有如此多经验,所以我们真的不必记住一堆新规则。我们只需要在设计阴影时运用我们直觉。...这在现代硬件上并不是一个大问题,但它可能会在较旧廉价移动设备上减慢渲染速度。 与往常一样,请务必进行自己测试!...这个工具灵感很大程度上来自菲利普·布鲁姆(Philipp Brumm)精彩创作,shadows.brumm.af。 融入设计系统 我们看到阴影需要根据其高程和环境进行自定义。...在一个拥有设计系统和有限设计代币世界里,这似乎适得其反。我们真的能”标记”这些阴影吗? 我们绝对可以!虽然它需要一些现代工具帮助。...它是专门为使用React/Angular/Vue等JavaScript框架开发人员构建。有超过200节课,分布在10个模块。您已经完成了其中之一:本关于阴影设计教程是从课程改编而来

36210

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

*: 微软电脑设备 微软移动设备 为了弄清楚这个问题,我做了一个实验: 试验A组和B组区别只是交换了按钮位置 我一共找了30人,先让他们在九张图中选择最喜欢一张,然后按确定按钮提交。...整个实验过程,唯一被记录只有*点击重置按钮次数*。...所以A组大部分测试者虽然在第一部没有犯错,但因为差点按错按钮而提高了警觉,所以在第二步,虽然按钮位置出现了意想不到翻转,但大部分人还是再次察觉到了按钮位置异常。...相对,B组被测试者因为在第一步走得很顺利,所以在第二步根本不会考虑按钮位置问题,猝不及防地改变了确定按钮位置后,他们大部分人都点错了。...举一个例子,中国人用筷子,西方人用刀叉,要证明筷子和刀叉哪个更加适合人类本能,怎么设计实验?恐怕唯一实验对象只能是还没学会用餐小孩,因为在每个人已经被环境同化情况下,本能影响已经微乎其微了。

1.1K50

慢工出细活,Facebook点赞按钮设计门道

不难猜想,这两件事实施起来会在设计、策划、沟通、迭代上遇到多少困难。 ? 事实上, 点赞按钮并不像我们想象那么简单。...所有好按钮设计,包括facebook点赞按钮,都是不能与对应辅助设计分开来看。所谓“牵一发而动全身”,facebook官方发布点赞按钮设计样式截图仅仅是整个设计流程中极小部分。...即便如此,当所有设计工作完成后,仍需使用Axure、mockplus、Justinmin进行反复迭代更新。 其实这次Facebook更新经验指出在于点赞、分享按钮结合。...要知道,每天都有220亿人会看到Facebook点赞按钮,其中超过一半用户会进行点击操作。点赞和分享按钮综合到同一个按钮,意味着随着分享被激发后二者相互促进,用户将有更多机会更广泛地传递信息。...在Facebook随后测试,新点赞按钮点击率稳定在旧点赞按钮两倍以上。 ? 顺便讲一件趣事。

84970

不得不知UI界面“行为召唤按钮设计秘诀

本篇文章致力于讲解“行为号召(CTA)按钮”,涵盖了他们本质,在直觉导航角色以及它在业务目标重要性。让我们一起来看看是什么让CTA按钮从最佳实践脱颖而出。...由于CTA先前目标是引起用户注意,因此设计师通常会试图让它们在屏幕上其它按钮脱颖而出,特别是通过显著尺寸差别。 尺寸大按钮有很高机会被发现和点击,但你也必须保持一些限制。...传统上,CTA按钮看起来像水平矩形,因为人们习惯将这种形状视为可点击按钮。此外,建议设计具有圆角CTA,因为它们被认为是具有吸引内部注意力按钮。 颜色选择取决于使设计过程更复杂各个方面。...设计师需要充分考虑以下这些因素,作品基本色彩,以及目标受众潜在偏好和心理特征。...考虑到这一事实,设计人员可能会了解最突出可扫描区域,并将行为号召按钮置于用户可视路径

1.1K90

何在“无设计”语境下打磨界面设计极致细节体验?

微博是一款典型信息流产品,早期微博IM复用了信息流一些设计,并且已经很久没做大更新迭代,导致现有的设计与实际场景不符。为了让用户更自然聚焦在对话体验之中,我们对现有界面进行了重新梳理。...我们这次优化工作主要是从三个维度进行: 图形元素:由点、线、面构成一些基本图形表达 界面布局:X轴和Y轴上个体图形和单位模块之间间距、尺寸关系 单位模块:红包、名片、图片、地图、视频、音乐…...从图2-3,调整气泡角指向问题,但该方案运用到图片、红包设计时我们发现,圆角不对称性让人觉得怪异,尤其是红包这种具有中国传统特色设计时更加明显。...最终方案,圆角大小为单行气泡四分之一高度,气泡与头像、气泡角与头像间距都处于1个单位间距,气泡角与圆角转角处,为2分之1单位刚好保护了圆角对称感不被破坏。...多角度,不同因素综合考虑,在美感与实用性寻找平衡,合理运用一些设计法则,与实际用户场景结合,能让界面变得更加舒适、可靠。

99390

DevExpress控件gridcontrol表格控件,如何在属性设置某一列显示为图片(图片按钮

DevExpress控件gridcontrol表格控件,如何在属性设置某一列显示为图片(图片按钮)?效果如下图: ? 通过属性设置,而不用写代码。...由于此控件属性太多了,就连设置背景图片属性都有好几个地方可以设置。本人最近要移植别人开发项目,找了好久才发现这个属性位置。之前一直达不到这种效果。...然后点击Columns添加列,点击所添加列再按照如下步骤设置属性: 在属性中找到ColumnEdit,把ColumnEditTextEditStyle属性设置为HideTextEditor;  展开...ColumnEdit,把ColumnEditButtons展开,将其Kind属性设置为Glyph; 找到其中Buttons,展开,找到其中0-Glyph,展开,找到其中ImageOptions...注:本人用控件是17.2.7版本,其他版本不知道是否一样,仅作参考。

5.9K50

【Flutter】自定义滚动开关

工作就像房子电源开关。 本文中,我们将探讨Flutter **Custom Rolling Switch in Flutter。...pub地址:https://pub.dev/packages/lite_rolling_switch 介绍 在Flutter,开关是一个小部件,用于在两种选择(ON或OFF)之间进行选择。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动创建自定义滚动开关。...它显示了在用户按下按钮进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关时将更改图标和文本。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

33.3K60

【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

文章目录 一、音高自动修正功能 二、节拍自动修正功能 一、音高自动修正功能 ---- 仔细观察编辑面板音符 , 很少有处于正中心位置音符 , 大部分音符音准都不准确 , 这里建议使用自动修正功能...; 如果是制作音源 , 那么必须是 100\% ; " 修正音高补偿 " 用于控制声音颤动 , 表示是去除颤音深度 , 0 是留下所有的声音颤动 , 100 表示 删除所有声音颤动...; 二胡 / 小提琴 等弦乐揉弦等操作 , 这些颤动一般不会超过半音程 , 这些颤动尽量留在声音上 , 这种情况下 修正音高补偿 设置低一些 , 尽量保留颤音 ; 歌手由于气息不稳定造成声音发颤...; 上述对话框 , 调节完毕后 , 点击 " 确定 " 按钮 , 自动校准后效果如下 , 所有的音符都处于标准音高位置 ; 二、节拍自动修正功能 ---- 选择 菜单栏 " 编辑 / 量化时间 "...确定 " 按钮后 , Melodyne 会自动检测出最适合音符长度 , 进行修正 ; 也可以选择不同 节拍设置 , 让音符进行相应节拍对齐 ; \cfrac{1}{4} T 表示 四分音符三连音

8.3K10

错误提示毁了你设计!如何在UI界面优雅展示“错误”信息?

静电说:用户讨厌看到错误提示,因为这对于任何人来说都是非常沮丧和受挫。写得不好错误消息可能会彻底破坏您用户,甚至损害您品牌。...今天我们就来分享一些小技巧,让各位设计师能更好将错误提示展示出来,从而让用户更好避免操作错误,或者至少,让你用户不那么沮丧。 为什么错误提示非常重要?...编写第一条错误消息的人以抽象方式将其框定为问题陈述。这将责任归咎于用户,并不是特别有用。相反,可以简单地要求用户做你要求他们做事情——这在第二个例子很清楚。...了解你用户(而不是你自己) 查看第一条错误消息,这可能是由一个开发人员为另一个开发人员编写。但是,大多数最终用户对这些“火星文”不感兴趣。即使是“确定”按钮也似乎对实际发生事情感到困惑。...其实我们发现,很多提示消息都是文案问题,对于设计师来说,文字设计也是我们工作一部分,因此不要忽略这些内容,一个优秀设计师可以设计好这一切~

1.7K30

斯坦福与苹果基于Apple Watch检测心率异常,0.5%人群被检出,其中84%患有房颤

心房颤动(简称房颤)是最常见持续性心律失常,房颤患病率与冠心病、高血压病和心力衰竭等疾病有密切关系。...作为研究一部分,如果发现不规则心律,参与者会收到Apple Watch和iPhone通知,与医生进行远程医疗咨询以及心电图(ECG)补片以进行额外监测。 ?...帮助患者和临床医生了解Apple Watch等设备如何在检测心房颤动等疾病中发挥作用。 0.5%人群被检出,其中84%患有房颤 ?...在收到心律不齐通知,并在一周后使用心电图贴片进行随访受试者,只有三分之一(34%)的人检测到患有房颤。研究人员称,由于心房颤动是一种间歇性疾病,因此在随后心电图补片监测未检测到它并不奇怪。...将手表脉搏检测与同步心电图贴片记录进行比较,研究人员发现,脉冲检测算法阳性预测值为71%,84%受试者在接受不规则脉冲通知时发现房颤。

3.8K10

我们是如何在 IDE 设计 AutoDev AI 编程开发智能体语言与框架?

在这个需求,我们发现在复杂软件开发任务,需要动态生成 高质量上下文,以让 AI 能在对应问题域中生成对应代码。...接下来,让我们从实际需求出发,以三个例子来看看日常编码可以如何设计: 验证生成代码是否工作? 进行安全代码信息提交? 探索自动化问题辅助修复?.../patch 指令来 示例步骤 3:自动化问题辅助修复 接下来,我们挑战就是如何在 IDE 获取运行结果,并根据结果来进行对应操作。...于是,我们在 AutoDev 设计了一个 DevInsProcessProcessor 来 处理 DevIns 指令执行结果: when { event.exitCode == 0 -> {...其它 我们依旧还在设计适用于 IDE 自动开发框架与 DevIns 语言,如果大家有兴趣,可以参与到我们开发来。

19720

“类MainForm可以进行设计,但不是文件第一个类”

错误分析: C#允许在某命名空间下一个代码文件定义多个类,比如在一个主窗体MainFormcs文件除了定义窗体本身类外,还可以定义全局变量类,如下: public class...PublicValue { public static List mainlist = new List(); } 这样一个类变量就是全局变量...,可以在该命名空间下任何窗体和类访问,访问方式为通过“.”运算符: PublicValue.mainlist 但是这个类只能放在主窗体类后面定义。...对于有设计控件都要求控件所在类是排在第一个。主窗体中有控件。...解决办法: 把主窗体定义代码public partial class MainForm :Form放在最前面,其余类定义放在后面。

82310

Qt 水平布局 QHBoxLayout

: 图片 当你拉伸窗口时,按钮也回跟随窗口变化,如下图: 如果你不希望拉伸窗口时控件跟随着变长,那么你可以调用 addStretch() 函数,增加一个“弹簧”,如下代码所示: // 在布局添加一个弹簧..., 2); // 占整个窗口 2/n _layout->addWidget(_button3, 3); // 占整个窗口 3/n // 在布局添加一个弹簧,让控件不会跟随窗口变大而变大..._layout->addStretch(1); // 占整个窗口 1/n 我们在 addwidget() 函数增加了第二个参数,设定了控件比例,注释所写,按钮 1 占用了...1/n 比例,按钮 2 占用了 2/n 比例,按钮 3 占用了 3/n 比例,最后一个插入“弹簧”占用了 1/n 比例,此时相当于在一个水平布局 n = 7,那按钮 1 就是占用 1/7...比例,按钮 2 占用了 2/7 比例,依次类推,效果就是下图这样了: 【在其他控件中间插入控件】 以上是比例相关解释,下面我们来看一下如何在这些按钮插入一个按钮

35730

按钮位置如何设计?看这篇足够了

本篇文章大纲如下: 1、按钮几种布局 2、导航栏布局 3、跟随内容布局 4、偏向底部布局 5、底部悬浮布局 6、布局总结 1、按钮几种布局 按钮布局大致分为四种,分别为:导航栏布局、跟随内容布局、偏向底部布局和底部悬浮布局...图片 图片 2、导航栏布局 我们平时看到导航栏布局有很多,发朋友圈和发QQ动态。 图片 为什么要将「发表」按钮放在导航栏右侧?...用户输入文字之后,直接可以点击附近「发表」按钮,快捷方便。 能否将「发表」按钮放在页面呢?答案是:不行!...目前来看,微信「发表」按钮位置设计是最优解。 3、跟随内容布局 常见于表单字段填写时,如下图所示。 图片 那么能不能将操作按钮放在导航栏右侧呢?答案是不行!...放在表单下方是正常从上往下操作流。 有些设计觉得将按钮底部区域,离大拇指更近,更方便操作,如下图。 图片 但是因为是表单填写,会调起键盘,将提交按钮给挡住,所以按钮跟随表单之后,更加科学。

1.3K30

Flutter 流体滑块

地址:https://pub.dev/packages/flutter_fluid_slider 简介 流体滑块是一种流体设计滑块,其工作原理与“滑块”材料小部件非常相似。它用于从一系列值中进行选择。...下面的演示视频显示了如何在颤动创建流畅滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...**在setState,我们将添加一个等于新值变量。...当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建另一个FluidSlider()。...当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。 img 现在,我们将创建第三个“流体”滑块。

11.6K20
领券