商务服务
手机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/ , 查看更多   
最新文章
LG 推出三款 OLED GX9s 智能显示器:21:9 曲面屏,内置 webOS
IT之家 4 月 21 日消息,LG 电子本月 3 日向美国市场发布了三款 LG UltraGear OLED GX9s 系列智能显示器。这三款显示器均采用
北斗导航苹果版北斗导航手机版下载「北斗导航苹果版」
北斗导航苹果版是一款专业的手机导航软件,使用的是中国自有的地基授时系统进行定位导航,可在全球范围内全天候、全天时为各类用
盒马、京东、拼多多,官宣放大招!
4月11日,盒马宣布,面向中国外贸企业开放入驻通道,绿色通道24小时专人加急处理,简化认证流程,缩短审核认证周期。除了24小时
买手机要看哪些配置?怎么挑选手机主要看什么?手机配置「买手机要看哪些配置?怎么挑选手机主要看什么?」
网购消费查券省钱上【百佣】App,只需3步操作,同一个商品用券更便宜。在购买手机时,了解手机配置是非常重要的。本文将介绍买手
给力!长沙县、长沙经开区政企合力放大招,就地过年成优选长沙手机「给力!长沙县、长沙经开区政企合力放大招,就地过年成优选」
记者获悉,为深入贯彻落实党中央、国务院、省、市关于2021年春节期间疫情防控“就地过年”倡导,1月22日,长沙县人民政府、 长沙
戈雅夏日皮肤突袭,铠无双限定皮肤巨帅,瑶双喜临门
最近王者荣耀给公孙离出了一款新皮肤,公孙离的这款新皮肤,也是一款FMVP皮肤。这款皮肤的质量还是非常不错的,而且价格也不贵,
阅见伊犁|广州读书月公布广州、伊犁等六地共读书单
四月的风拂过珠江,木棉的火焰点燃了岭南的春意;同一阵风掠过天山,伊犁河谷的杏花正以漫山遍野的雪白回应。4月1日,在“书香羊
红米Turbo4发布,性价比是否能超越真我Neo7?红米手机4「红米Turbo4发布,性价比是否能超越真我Neo7?」
近日,红米正式发布了其最新中端手机——红米Turbo4,起售价1999元。这款手机在多方面进行了升级,尤其在防尘防水、定位技术和电
应对手机没电的实用技巧与应变策略分享手机没电了怎么办「应对手机没电的实用技巧与应变策略分享」
  在这个信息化的时代,手机几乎成了我们生活中不可或缺的一部分。无论是工作、学习,还是社交、娱乐,手机都扮演着重要的角色