第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)(4)

时间:2017-09-25 14:24来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
打开这些软件做个圆角试试看,人眼对于直线在某个点开始转成曲线非常敏感,软件确实使用了一个完美的正圆来做圆角,但是给人的感受就是生硬且不自

  打开这些软件做个圆角试试看,人眼对于直线在某个点开始转成曲线非常敏感,软件确实使用了一个完美的正圆来做圆角,但是给人的感受就是生硬且不自然。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  我们拿那个视觉正圆来手动做个圆角比比看。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  生硬的过渡瞬间消失,用非正圆画出来的圆角非常丝滑。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  这枚非正圆因为胖了一些,多出来的那点正好给予了一定的过渡,让直线向曲线的改变更加平顺。这也是更接近 iOS 圆角的圆角制作方法。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  我们把两个圆角画法放到一起比较。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  圆角按钮也同样适用。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  你的眼睛肯定能够察觉得出来右手边的那组按钮的圆角看起来更圆,更自然,也更悦目。

  这个技法在 App 的 icon 的制作上也有大量的使用空间,在深入分析之前,我们来看看下面两个 icon。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  左边是 Sketch 正圆圆角直出,右边是非正圆手动制作的 icon。很明显,右边那个更像 iOS 的 icon,看起来非常悦目,非常舒服。业界内也将绘制出这样的圆角的曲线称为 Lamé 曲线 (Lamé curve),由一位法国数学家, Gabriel Lamé 发现并命名。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  这种曲线的方程式如下,从 iOS7 起,iPhone 所有的 icon 都基于此进行设计。除了那些 blingbling 的细节以外,除了这一种说法之外,还有说是由连个堆成的羊角曲线拼出来的。iOS 还有很多这些内涵深厚的细节,不得不感叹用户界面设计真是一门精深的学问。

  上面提到的参考线在这儿都有科普:《新手科普文!每个设计师都该懂的参考线完全手册》

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  后面人们又根据黄金分割等理论加上了一些必要的参考线,最后就形成了 iOS App icon 的设计规范。

  

进阶高级!视觉误差对UI设计的影响和解决方案(附50+案例)

  记住这些点

  完美的正圆画出来的圆角会有因过渡生硬而产生非常明显的不自然感。

  要做出 iOS 的圆角矩形的那种高端圆角需要一顿手动操作。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕