翻译:关于完美圆角实现的研究

标签: 外文翻译 border-radius css3 photoshop 圆角 | 发表时间:2013-01-05 21:40 | 作者:张 鑫旭
出处:http://www.zhangxinxu.com/wordpress

by zhangxinxu from http://www.zhangxinxu.com
本文地址: http://www.zhangxinxu.com/wordpress/?p=2904

原文链接: In search of the perfect radius
原文作者:没找到
翻译编辑: 张鑫旭

//zxx: 以下为翻译全文————–
数周前,我碰巧读到 Chris Coyer一篇关于 边框半径嵌套的文章,这触发了我之前一直想做相关研究的蠢蠢欲动的心。

下图中,那个按钮比较正点?你是否曾经有意或无意要设计这样一个按钮,一个圆角矩形嵌套在另外一个圆角矩形中,然后你不知道应该怎么根据给定的外部半径设置内部半径大小,或者反过来根据内部半径大小设置外部大小?这就是我们接下来要探讨的。

哪个按钮看上去比较正点 张鑫旭-鑫空间-鑫生活

创建圆角矩形的四种方式

假设,你需要需要去创建一个内陷的按钮,你可以这样,

  1. 使用看上去靠谱的半径
  2. 内外圆角矩形使用相同的半径
  3. 复制外面的矩形并自由变换创建它
  4. 设置内径大小为外径大小再减去边框宽度

几种嵌套圆角实现方式 张鑫旭-鑫空间-鑫生活

选择哪种方式

因为 轻信我们的眼睛,我们不会指望选项1。从上图看来,显然选项2没什么效果。选项3和选项4看上去算是那么回事,我来在他们之中选择一个合适的~

  1. 对于外矩形,我选择宽度1,外半径3,边框宽度6,并在PhotoShop图层中花了18个矩形。
  2. 对于内矩形,两种处理,一是复制外矩形进行自由变换(选项3);二是内描边大小相等的边框宽度(选项4)。
  3. 坐等结果

不同方式创建矩形示例效果

就是你了,选项4

上面结果清楚地表明,选项4对于所有边框宽度(从1像素到24像素)都表现不错。从Photoshop判断看,也是该结果。因此,公式很简单: 内半径=外半径-边框宽度

研究继续

研究byebye了?恩,一部分吧,不是全部。你有没有注意到这种情况,当边框宽度大于等于外半径时候,内半径就是0,且按钮就是个简单的尖锐的方形?这好看吗?可以改善吗?如果有略微圆润的边角,岂不是会更好看?

进入下一阶段的学习。在机械工程中,这个圆形部分被称作为“圆角( fillet)”,通过机器操作生成这个圆角曲线称之为“角隅填密法( filleting)”(我有机械工程的学士学位:))。在我们这个例子中,角隅填密法会不会让设计更好呢?如果是这样的话,我们应该如何计算应该的圆角半径呢?

边角填充提高设计

为了确认filleting可以提高设计,我选择了下面这些方形的情况,并切出了2, 4, 6以及8像素的圆角半径。下面这个表显示了结果。您可以发现,通过特定大小的圆角半径填塞,设计确实好看些了。
边角填充与设计效果

我想看看,是否半径在小尺寸有用,大尺寸也有用。所以,我就增加了一倍和四倍按钮,结果罗列入表。最好看的圆角半径貌似随着按钮大小而增加。

不同尺寸与效果 张鑫旭-鑫空间-鑫生活

圆角半径的公式是什么

我试图去需找是否有确定最佳圆角半径的公式。这有可能吗?答案是Yes, 如果你给我2刀,我将来给你4刀,你给我6刀我还你12刀,给我25刀我给你50刀,那你可以轻易知道公式。从数学上讲,你可以通过将数据(2-4, 6-12, 25-50)绘制成在图表上的点,然后找到连接这些数据点的直线或曲线的公式,这个过程被称为曲线拟合。

该选择哪些数据对呢?其中一个是圆角半径;圆角半径在我看来是最好的(这不科学,我知道,但是那不属于我们现在的范围)。那另外一个呢?看上去像外半径,但谁知道呢,甚至边框宽度都能扮演一个角色。所以我绘制了两个图表,一个是找出(最佳)内半径是如何随着外半径变化的,另外一个是找出内半径是如何随着边框半径变化的。下面就是图表。注意:如果你通过选择最佳圆角半径重复该实验,结果可能不一样,因为在某些情况下,并不清楚哪个圆角半径是最佳的,因此,您就会选择相邻的圆角半径。

内半径大小和外半径大小之间关系 张鑫旭-鑫空间-鑫生活

内半径大小和边框大小之间的关系 张鑫旭-鑫空间-鑫生活

内半径的增加似乎既跟外半径又跟边框宽度同步,但不是很流畅。据我所知,只有当曲线遵循模式的时候,曲线拟合可以产生有意义的公式。该模式既可以是一条直线,抛物线,正弦波等。但是,我怀疑它是否有规律,绘制的曲线实在是太锯齿状了。

我基于自己生锈的数学知识做了整个实验。我可能错过了一些东西,或者我绘制的点不是足够的多,如果谁更加见多识广做了这个实验,绘制了更多的点,我很乐意看到结果。到目前为止,毕竟我们必须依靠我们的眼睛找到最好的圆角半径。我不入地狱谁入地狱。圆角半径公式正在躲猫猫。

总结

下次你想创建内嵌圆角矩形,遵循下面要求会有最佳结果:

  1. 内半径=外半径-边框宽度
  2. 如果内半径为0,圆角之。通过目测找到最好的圆角半径(基本上,外半径小于100像素,最佳圆角半径是1-15像素中任意位置)

//zxx: 以上为翻译全文————–

译者结语

上面内容是不是有不知所云的感觉,确实,但这也是理所当然的。一些拓荒者,希望身体力行尝试些新的东西,这些东西的成果往往都是纯粹的实验结果,或者总结的可能并不准确的理论。对于实用主义者而言,这些似乎是很枯燥的。

还有一类人属于实践者,他们总敏锐捕捉到一些新颖的理论或实验结果,然后尝试性地应用在实践中。可能这些实践并不完美,也有可能成为了该方法的创造者。

还有一类人属于求知者,时刻关注新技术的发展与脉动,于是他们成为了一些新方法飞推广者。

还有一类人属于跟风者,这个技术大牛或某大网站使用了,于是,不假思索地,葫芦画瓢地也应用上了,于是,成就了所谓的流行技术。

本文译文内容,可能原本是针对网页设计师而言,如何在Photoshop中把握内外圆角的大小,以实现最佳的内外圆角矩形嵌套效果。但是理论这东西往往是相通的,于是,我们在实现网页一些UI效果的时候,也可以应用文章所述的结论,例如:

1. 内半径=外半径-边框宽度
如下测试代码(内borderRadius = 外borderRadius – padding值 → 10=30-20):

.radius1{width:200px; padding:20px; background:#a0b3d6; border-radius:30px;}
.radius1_in{height:200px; background:#fff; border-radius:10px; }
<div class="radius1"><div class="radius1_in"></div></div>

效果如下(现代浏览器,如果您看不到效果,可能是在RSS或是其他网站查看,原文地址: http://www.zhangxinxu.com/wordpress/?p=2904):

1. 内半径<0 ,边框40宽度像素对照上面的图表,估计4像素内半径
如下测试代码:

.radius2{width:160px; border-radius:30px; border:40px solid #a0b3d6; background:#a0b3d6;}
.radius2_in{height:160px; background:#fff; border-radius:4px;}
<div class="radius2"><div class="radius2_in"></div></div>

于是,就有了最佳内外圆角大小。

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]
本文地址: http://www.zhangxinxu.com/wordpress/?p=2904

(本篇完)

有话要说,点击 这里发表评论。

相关 [翻译 完美 研究] 推荐:

翻译:关于完美圆角实现的研究

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2904. 原文链接: In search of the perfect radius. //zxx: 以下为翻译全文————–. 数周前,我碰巧读到 Chris Coyer一篇关于 边框半径嵌套的文章,这触发了我之前一直想做相关研究的蠢蠢欲动的心.

翻译:清除各个浏览器中的数据研究

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2630. 原文地址: http://www.stevesouders.com/…/clearing-browser-data/. ——–最近较忙,直接进入正题以下为翻译全文——. 对于快速Web APP,缓存四赢得性能的关键.

微软研究院:语音机器翻译达到同声传译标准

- - WPDang
往往在大型的国际会议中,经常会因为不同国家参会者语言不通而必须由同声传译者进行即时的翻译和传达,但这种方式因为人的某些不可预见的因素某些时候也会出现偏差. 不过因为机器翻译会出现巨大的偏差,所以现有的所有国际性会议依旧在依赖着人工翻译的传统方式. 不过微软研究院所研发的最新成果,可能将会在未来的同声传译领域带来革命性的突破和改变.

微软研究院 NUI 新进展:实时语音机器翻译

- - LiveSino 中文版
微软首席研究官 Rick Rashid 博士在天津举办的“ 21 世纪的计算 – 自然而然”会议上展示了他们实时语音机器翻译(属于 自然用户界面 NUI 的一部分)最新进展,相比之前的方法,新语音识别方法的错误率下降了 30%,7、8 个单词中仅有 1 例错误. Rashid 提到,”大约在两年前,微软研究院和多伦多大学的研究员取得了重要突破.

十年研究发现电子是近乎完美球形

- aviot - Solidot
伦敦帝国学院的科学家历时十余年,完成了迄今最精确的电子形状测量,发现电子几乎是完美的球形. 研究发表在最新一期《自然》期刊. 研究发现,电子与完美圆形的差异小于0.000000000000000000000000001 cm. 如果把电子放大到太阳系大小,那么它与完美球形的差别比人头发的直径还小. 帝国学院冷物质中心的研究人员利用高精度激光,仔细测量了氟化镱分子内的电子运动.

研究人员从中药中发现完美的避孕药

- - Solidot
加州伯克利的研究人员从中药雷公藤中发现了完美的避孕药. 研究报告发表在 PNAS 期刊上. 这种避孕药不含激素,100% 天然,没有任何副作用,不会伤害卵子和精子,可以长期或短期服用,还允许在怀孕前后服用. 这种避孕药通过大幅降低精子的活性,使其无法抵达和穿透卵子,阻止受精. 现有的基于激素的避孕药通常会伴随着副作用.

翻译《The rsync algorithm》

- AWard - CSDN博客推荐文章
     最近在学习Rsync工具,在对Rsync算法大加赞赏之余,决定将《The rsync algorithm 》翻译,有不正之处 还请指正. 安德鲁Tridgell 保罗马克拉斯  部计算机科学 澳大利亚国立大学 堪培拉,ACT 0200,澳大利亚.        本报告介绍了将一台计算机上的文件内容同步到另一台机器上的文件的算法(同步后保证文件内容需要一致).

闲谈翻译

- Frank - 乱象,印迹
算起来,我也算有一些翻译经验的人了,最近接连做了两次关于翻译的分享,发现对翻译有兴趣的人很多,索性,将自己关于翻译的经验做个总结,发在这里. 我是因为很偶然的机会接触翻译的. 当时还在学校,考完了TOFEL和GRE,美国对伊拉克动武,国内的报道非常奇怪,为了在论坛上争论,我开始翻译一些外国媒体的报道,发在论坛里.

翻译:WebKit for Developers

- - TaoBaoUED
Paul Irish 大湿为我们带来了这篇开年大作,文章深入浅出的阐述了各 Webkit port 的迥异,文笔细腻,是一篇不可多得的 Webkit 入门开胃菜. 为了让大家第一时间更好的品尝这道大菜,一丝特别邀请了几位 Webkit 专业开发人士作为本文的翻译顾问,在此表示由衷的感谢. 原文链接:  http://paulirish.com/2013/webkit-for-developers/.

翻译与字体

- Chenta - Apple4.us
胡天翼今天在 Twitter 上说:. 这次关于《乔布斯传》的讨论怎么都在讲翻译. 我以前从来没见过大家对一本书的翻译那么痛心疾首且富有参与精神地讨论,以至于产生了两种幻觉:1. 以前人们读的译本都很好,这次的翻译烂到让人不能相信;2. 这么多年头一次读厚书一定要抓紧机会多叫几声. 我认为这个设问的答案很明显,但不在于上述两点.