商务服务
手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南手机界面设计「手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南」
2025-02-08 14:52

菜单的宽度正常情况下与默认状态相同,而高度根据里面包含的选项数量决定。单行选项,高度是不大于默认的选项框的。新手很容易在弹出菜单中设定过小的高度,使整个控件看起来会非常的别扭。

5. 开关

开关也是按钮的一种形式,通常出现在设置页的列表中,上方就是它主流的几种样式。在设计开关的时候,要先确定一个矩形区域,高度使用 24-32pt,宽度则用 1:2 的比例。如高度使用 28pt,那么宽大致可以使用 56pt。之后再将细节填入。

6. 滑块

滑块形式接近开关,通常在中间有一个操作节点,下面有一个用来表示区间的线条。实际上我们该做的就是分别决定它们的尺寸。

节点如果做的太小,不仅会显得难看,而且会让人觉得很难操作。它的直径应该在 16-28pt 之间。而下面的横线,宽度由所在内容区域的宽决定,高度一般在1-4pt 之间。

7. 指示器

指示器用来展示元素序列,虽然在 APP 中没有太重要的作用,但既然我们加进去,就要让它看起来和谐。大多数人在定义指示器时,不是太大,就是太小,可以只从后面提供的尺寸中选择,就能保证指示器的尺寸不会出错。

指示器主要是圆形和矩形两种形式:

  • 圆形:8、10、12
  • 矩形:14×2、16×2、20×3

8. 提示红点

提示红点也是大多数应用会使用的一个控件,它的大小应该在 24-32pt 之间。作为一个圆形,这个控件设计起来很容易,但设计师往往忽略一件事,那就是如果中间的数值超过 10 变成 2 位以后,要怎么处理。

在设计这样的元素时,我们要用一个矩形元素来表现,即画一个正方形,然后将圆角设成最大,那它看上去就是一个圆形。那么每增加一位字符,我们就需要为这个矩形增加该字符的宽度,可以用左右间距判断。

因为相同字号下,不同英文、数字的宽度都是不一样的,我们要根据实际输入的内容所增加的宽度,去增加圆点的宽度。

9. 分页控件

最后一个控件,就是分页控件了,安卓中的 Tabs。这个元素在设计时也受到排版空间的影响,较为宽松的排版风格,高度就比较大,若拥挤则反之。

下面是高度:

  • 高权重:40-48
  • 低权重:28-36

分页控件主要应用在头部和页面中部的组件中,如下方的案例:

虽然很多时候分页器是没有背景色的,但是背景矩形是必须画出来的,即隐藏填充和描边,这样我们就可以通过垂直居中的方式,来确定中间文字的位置。

一个完整的分页控件,里面会包含两个或以上的选项,所以定义每个选项的宽也是必要的。通常,我们有两种定义方法,一种是选项少时,直接进行均分显示,另一种是选项较多,采取定宽模式,宽度最小建议在 64pt 以上,才不会显得过度拥挤。

分页控件选项处于选中状态时,有的设计是修改背景色,有的是修改文字属性,但今天最常见的就是加入下划线。这个元素如果定义得不好,会让整个控件看起来非常粗糙,它需要在样式中能起到画龙点睛的作用。

下划线分为两种,一种是贴在控件底部的,另一种是在文字下方悬浮。两种方式线条应该使用的高度都应该不大于 2pt。宽度的定义,第一种和每个选项背景区域相等,第二种则可以在 8-16pt 间(小于文字总宽)。下面是正确设计效果:

10. 总结

前面说到了不少元素的尺寸,那么真实应用的效果会如何呢?下面我就用原型的方式,不考虑样式与色彩将它们组合到完整的页面中去。

可以看到,模块大小很均衡,看上去不会觉得哪些地方太大或太小,只要稍加填充样式,那么就可以变成完整的设计稿了。

这些参数虽然不能覆盖所有特殊的状况和需求,但至少可以保证这些控件不会被设计得很奇怪。当你们没有对于特殊化风格设计的控制能力时,就先学会正确的使用上面的这些参数吧。

上面将的是 UI 元素尺寸的基础规范,及控件尺寸的定义。下面我们就来介绍文字设置,图标的尺寸,UI 的组件设计了。

文字的尺寸至关重要,但先理解了控件再思考文字,会更容易一些,它们之间也有一些有趣的联系。

    以上就是本篇文章【手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南手机界面设计「手机UI设计尺寸有哪些? 超全面的UI元素尺寸设置指南」】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/news/34193.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多   
最新文章
知欢xda智能手机网「知欢」
知欢是很受欢迎的社交app了,这里没有那么多烦人的广告,采用了全新的地图交友模式,让你可以认识来自不同地区的不同朋友,你可
淦,今天浅谈下手机的主板布局!手机主板「淦,今天浅谈下手机的主板布局!」
三段式是什么鬼?iPhone的三段式很高贵?我们今天就谈谈手机的主板布局吧!建议阅读时间:10min放眼全世界厂商,手机品牌多到触
如何解决OPPO手机电量不准确的问题?oppo手机怎么设置呼叫转移「如何解决OPPO手机电量不准确的问题?」
如何解决OPPO手机电量不准确的问题?随着科技的不断进步,智能手机已经成为我们生活中必不可少的一部分。然而,有时候我们可能会
苹果手机强制关机重启的全攻略:让你的设备恢复活力苹果手机如何强制重启「苹果手机强制关机重启的全攻略:让你的设备恢复活力」
在我们日常使用苹果手机的过程中,难免会遇到一些技术问题,如手机卡顿、应用崩溃或设备无响应等。这时,强制关机重启往往是解决
许多观众追捧的动漫电影免费高清完整版,值得一看!神马电影手机「许多观众追捧的动漫电影免费高清完整版,值得一看!」
在琪琪网,观众能够轻松获取到最新一季的电视剧,涵盖了各类题材。无论你是喜爱青春爱情、悬疑推理,还是古装剧等,都能在这里找
ARK: Survival Evolved(方舟生存进化2.0.12最新版)方舟手机版「ARK: Survival Evolved(方舟生存进化2.0.12最新版)」
方舟生存进化2.0.12最新版是手机上的中文版本,拥有全新的玩法和动植物。大家期待已久的地牢系统全面开放,不断的捕猎和驯服恐龙
真我手机搬家安卓版手机搬家下载「真我手机搬家安卓版」
真我手机搬家安卓版是一款专为android用户设计的手机数据迁移工具,由广东欢太科技有限公司开发。这款软件以其高效、安全、便捷
走路计步器怎么开启手机自动计步器「走路计步器怎么开启」
在现代健康生活的追求中,走路计步器成为了许多人日常监测运动量的得力助手。无论是智能手表、手机应用还是专门的计步器设备,都
汽车手机无线充电WPC手机无线充电原理「汽车手机无线充电WPC」
汽车手机无线充电WPC        各大品牌手机支持无线充电,带动了汽车手机无线充电市场的爆发,目前国内汽车品牌东风日产、吉
新零售模式拥抱线下手机行业零售店手机营销「新零售模式拥抱线下手机行业零售店」
  自新零售模式风靡各行,转型的品牌已经数不胜数,目前手机零售的形式主要有手机连锁店、运营商营业厅、大卖场、零售店、校园