手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
最后，前面说到的关于文字字号的设定，结合控件的规范，就能在下一节中决定组件的设计尺寸，缺一不可。
多做针对性练习，以提升对控件和文字的掌握熟练度是很有必要的。建议多做一些简单界面的临摹，并套用前面提到的元素尺寸，这样很快就能适应这种高效规范的方式了。
四、界面图标的尺寸要怎么定？
这一节要讲讲关于图标的尺寸，应该是最容易的地方，因为前面的内容中，应该已经习惯使用 4 的倍数，在图标中同样遵循这样的原则。从相关的图标素材下载网站就可以发现这种规律，如 iconfont、iconsearch 等等。
1. 图标的权重
在设置具体的尺寸前，我们还是要谈谈权重的问题。正常的 APP，通常会包含大量的图标，而这些图标，大小并不会完全一样。如下面的案例：
之所以这些图标的大小不一样，和它们代表的功能和权重分不开关系。我们可以简单将应用内会出现的图标分成 3 类，代表不同级别的权重。
最高：页面中重要的功能入口
中等：底部导航栏用的图标
最低：一般的工具类图标
当然，这是我简化过的逻辑，类似淘宝、京东、携程这类大型应用，就还可以划分出更细致的权重类型。而不同的权重实际上就对应了不同尺寸的图标，如果有 3 种权重，那么我们在设计的过程里就会设计三种尺寸的图标。
2. 图标的尺寸
首先划重点，图标的尺寸，主要指的是图标在应用中占据的矩形区域，而不是图标本身图形的区域。
我们在设计具体图形前，是先通过确定矩形区域的尺寸，再制作参考线然后进行设计的。而不是随意设计了图标再对应缩放到指定的位置。
例如，设计快速入口，一开始我们定义出的这个组件为分割成两行四列的卡片，每个入口的实际大小。
所以，下面就是我对矩形尺寸定义的建议：
- 最大：64、56、48
- 中等：44、36、32
- 最小：28、24、20
根据图标所处区域的上下间距，从上方挑选合理尺寸即可，过程与字号设置是一样的，这里就不多做演示了。
还需要注意，在一套 App 中，图标出现的尺寸数尽可能减少，尤其对于新手，只需要应用 2-4 套不同的尺寸即可，否则也会对视觉体验带来明显的破坏。
五、UI 的组件设计
最后，就要说说组件的尺寸是怎么设置了。
相关文章
常用照片尺寸有哪几个？我们经常说一寸照片，二寸照片，这些照片的尺寸是怎么计算的？下面我们就来看看照片标准尺寸/像素对照表汇总2021-08-06
在设计产品图纸的时候，有些设计师太注重效果图而忽视了落地的效果，这都是对于平面设计常用标准尺寸和印刷常识不太了解造成的，下面我们就来看看产品尺寸与印刷常识对于设2021-08-04
PS如何设计GO立体图标？PS可以制作出很多有趣的图标，今天，小编为大家带来了ps制作立体GO图标教程。感兴趣的朋友不妨阅读下文内容，参考一下吧2021-01-25
ai怎么设计互联网高科技网页ui？ai中想要设计一款互联网的网页，互联网电脑是少不了的元素，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下2020-09-03
ai怎么设计UI英国国旗标志？ai中想要绘制一款英国国旗矢量图，该怎么绘制呢？下面我们就来看看ai绘制ui英国国旗的教程，需要的朋友可以参考下2018-11-14
ai怎么设计UI芯片标志的logo？ai想要设计电脑芯片logo，该怎么设计矢量的logo呢？下面我们就来看看ai画UI芯片标志的教程，需要的朋友可以参考下2018-11-09
ai怎么画UI效果的韩国国旗？ai中想要设计一款韩国国旗，该怎么绘制韩国国旗呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-11-09
ai怎么设计UI云上传下载logo标志？想要设计一款矢量的云上传下载的图标，该怎么设计呢？下面我们就来看看详细的设置教程，需要的朋友可以参考下2018-11-07
最新评论