恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
界面中的那些圆角
0.0°
2020-02-10 原创文章 经验/观点 举报 1863 4 4 0

我们的周围具有圆角的矩形到处都是

乔布斯曾经说过:“我们的周围具有圆角的矩形到处都是!”,苹果产品在之后的设计也无从不在的运用这个设计元素。在后面的实践中,我们也逐渐体验到了圆角的魅力。


为什么我们要使用圆角


1.  圆角更容易处理信息


直角尖锐的角会让我们产生视线的中断,当路线改变的时候,会出现停顿。圆角的弧度却可以引导着我们的视线继续往下走。




2.  圆角更容易辨认


圆角带来的流畅视线引导,使我们在视觉处理减轻了负担。巴罗神经学研究所在对圆角进行的科学研究中也证实了:角的感知与角的角度呈线性关系,角越容易感知,其识别性越弱。




3.  圆角更安全、具有亲和力


根据我们在生活中的经验,尖锐的东西总会带来危险,圆角的东西则会让我们觉得可以规避掉这些危险。因此圆角带来的是更安全和亲和的感受。



4.  硬件和软件上的视觉统一


近几年,手机外形对圆角也显得愈发的青睐,很多的手机厂商都采用了圆角的设计,追求无边框设计的风潮也使得屏幕自然而然的采用了圆角。为了更好的视觉体验,在ui设计师们上也尽量使用圆角来实现于硬件上的视觉统一。



如何使用圆角


1.  分隔区域时使用


很多时候圆角矩形会作为一个大的容器,来装同类型的信息。和通栏分隔相比较,圆角矩形会使视线更加聚焦到里面的信息。


以淘宝改版前后为例,改版前的个人中心采用通栏设计,沉浸式体验更好,模块间分隔不是突出 。改版后模块间留白变多,界面更显透气,模块之间的区分也更显明显。




2.  圆角的大小


浏览追波和behance会发现圆角卡片的设计越来越多,圆角的角度也越来越大,但界面中圆角卡片的圆角大小都没有超过最外层画板圆角的大小(即屏幕自身圆角的弧度)。



如果容器内部的矩形圆角过大会产生什么样的结果呢?应该就会像下图一样,在视觉上产生突兀的感觉。



下图依次模拟了10-120px(@2情况下)不同圆角大小,在iPhonex的屏幕下的情况;



一般使用  30-80px 作为圆角卡片的弧度最为合适;

10px、20px圆角显示不是很明显,100px以上开始出现圆角弧度过大带来的突兀感。

( 想自己尝试实验一下的同学可以在文末获得样机哟~)


淘宝的个人中心页的卡片圆角则使用的是40px



3.  让圆角更加自然


从ios7后,苹果公司对其圆角启动图标做了一些改变,图标的圆角部分过渡得更加自然了。


按照我们常用的做圆角的方式,直接对矩形赋一个圆角值,就是下图a的样子,圆角到直线的部分是一个骤变的过程,圆角弧度稍微大一点,就会有矩形的四周有稍稍向里凹陷的错觉。使用连续曲率圆角,如图b,则让圆角过渡显得更加的自然,也减少了向内凹陷的感觉,图形显得更加饱满。




网易出品的蜗牛读书就是采用了这种特殊的圆角哟~



4.  让圆角更加可爱一点


在关于儿童方面的app中,使用圆角似乎显得更加理所当然了,大弧度的圆角完全符合儿童萌萌的感觉。在一些app中为了更突显这一特性,还会对页面中的圆角矩形的四边向外拓展一部分,让圆角矩形显得更加饱满可爱。


关注公众号“七七的设计手札”,回复【样机】,即可获取iPhone x 样机


END ...


更多分享,欢迎关注公众号:七七的设计手札

Powered by Froala Editor

更新:2020-02-10

收藏

4人已收藏

  • 10

    作品

  • 3

    粉丝

  • 1

    关注

  • 我的某一天
  • 再见2019,你好2020
  • 水果系列插画总结
  • 设计icon你需要注意什么?

    猜你喜欢

      2020-02-10 原创文章 经验/观点 举报 1863 4 4 0

      界面中的那些圆角

      0.0°

      你确定要举报界面中的那些圆角

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年02月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录