android 图片圆角遮罩_圆角矩形可有设计哲学？

最新推荐文章于 2024-08-18 00:21:40 发布

老滚的笼中鼠

最新推荐文章于 2024-08-18 00:21:40 发布

阅读量267

点赞数

文章标签： android 图片圆角遮罩

本文链接：https://blog.csdn.net/weixin_29466397/article/details/112408835

版权

▲ 圆角矩形设计图文排版 / 文风这是「文説」的第176篇原创 1. 为什么是圆角？ 打开手机，我们会发现这几年的屏幕边角，不再是方方正正，而是圆角矩形。如果细心留意，会发现这个圆角矩形设计，早已体现在三个方面：第一个，设备硬件是圆角矩形的。圆润的边角，使用上更为方便安全，它免去了直角带来的磕碰危险，不用担心顶坏设备或者顶伤自己；第二个，屏幕边角是圆角矩形的。源于消费者对真全面屏的需求，既然外在已经是圆角，从外到内，屏幕做成圆角贴合，才能提高屏占比；第三个，界面和图标(主流设计风格)都是圆角矩形的。因为圆角矩形自带的观感，要比其他形状「好看」。上面三个圆角矩形设计，第一个是为了符合人体工程学，第二个是近几年中小设备(手机、平板)对于全面屏的刚需，当然设备屏幕越大(例如显示器和电视)，就没必要使用圆角矩形；第三个则是一种设计风格，目前比较主流。 可以说，三个圆角矩形的出现，是从外到内、从内又到外、相互相成、相得益彰的时代产物。 设备硬件和屏幕边角做成圆角矩形很好理解，而用户界面和图标为何？首先，一般 UI(用户界面) 或者 ICON(图标) ，无非这几种形状：矩形、圆形、圆角矩形、多边形(三角形、星型、菱形、梯形)和不规则图形……常用并且适合用来展示信息的，一般前三种。矩形特点是方方正正、简单好用、空间利用率高；圆形特点是圆润可爱、亲切无害、兼容万物。而圆角矩形，兼并了两者特点，既方正又圆润、既清晰又和谐。所以说在观感上，它更适合拿来设计，因为它更「好看」，这里的「好看」，字面意思，美。 UI 和 ICON 设计的目的，还在于传达信息。所以另一个「好看」，在于它更加符合阅读的视觉动线，读起来不费劲，容易阅读，适合阅读，用户容易读到重点。不信打开手机界面，一页图标全是圆角矩形(圆润方正)、一页全是方形(整齐严肃)、一页全是圆形(活泼可爱)、一页全是不规则图形(个性十足)，哪种页面看起来更加和谐，观感上认知障碍更少？因此，圆角矩形设计，得以全面在手机端以及小型设备上铺开。这是因为它好看，又好用。

2. 不适用场景和注意事项？ 首先看圆角矩形的特点，它是在矩形基础上再倒圆角，有点麻烦而且倒走了一些边角，并且自带圆润可爱属性，因此在一些诸如控制成本需求和展示信息的设计上，不宜使用，比如说图库。 矩形圆角虽然「好看」，但是它更适合用作手机界面和图标边框，而不是一切元素边框都必须首选圆角。 另外，圆角矩形的半径，对于观感也有影响。倘若圆角不明显，即等于无；圆角过于大，又会太可爱(幼稚)。所以具体操作，看使用场景。同时需要注意的是，圆角矩形底下的图片，还是以方形为主，大家可以点击下面这张图看看，现在看边角是有圆角矩形的(因为加了代码效果)，但点击之后单独看，边角还是直角的。所以，不管手机界面看是刘海屏、水滴屏还是挖孔屏，那只会影响观感，但不影响底部已经存在的图片，截屏时候保存的是完整图片(边角也是完整的)，可以将圆角矩形理解为一个蒙版一个遮罩。这给我们的启示，设计时，一些关键文字信息和图案等等，需要考虑边角和顶部位置。

3. 方圆之争? 矩形和圆形，就是方圆之争。词条解释：方，是规矩、框架，是做人之本；圆，是圆融、老练，是处世之道。无方，世界没有了规矩，便无约束；无圆，世界负荷太重，将不能自理。为人处世，当方则方，该圆就圆。表现在设计上，没有说哪个形状最好，只有说这次觉得圆合适，下次觉得方合适，而现在刚好圆角矩形更合适。争论是没有尽头的，正如选择了圆角矩形，还会有圆角半径的争论，选择了灰色，还会有50°灰的选择纠结。 一切设计，看市场、看客户、归根到底，看人。设计的目的，都是为了人，更好地使用产品，更好地接收信息。 柏拉图在《理想国》写道：“当美的灵魂与美的外表和谐地融为一体，人们就会看到，这是世上最完善的美。” 鲁迅也说：“凡是总须研究，才会明白。”(鲁迅：我真说过。) 好的设计，就是好看好用，而不存在硬生生的设计感。甚至，有时候连设计的痕迹都察觉不到。当然，圆角矩形只是目前的主流设计(审美)。未来如何，等硬件有了新的形态，也不得而知。