跳到主要内容

手机端设计规范(750*1334)

管

管理员

前端

2020年09月24日 5,845 次阅读
本页目录

 

以750*1334为例     统一字体:苹方

一、文本

1.主题类:

  • 展示标题:小字号 36 加粗 行距50   大字号  40  加粗行距58
  • 主标题:大字号  32  加粗  小字号28  中等
  • 副标题:大字号30  加粗   小字号  24  中等

2.文本类:

  • 主文本:字号36  中等  行距58
  • 辅文本:字号60  行距48  中等
  • 次要文本:字号24   中等

3.按钮:

  • 实心大按钮 (圆角矩形   圆角 8)  88*560     字号36
  • 实心小按钮/ 空心线框性小按钮(圆角矩形  圆角4)  140*55   字号24   中等

4.系统图标

  • 大图标:44*44
  • 中图标:36*36
  • 小图标:24*24

5.导航图标

  • 大号:96*96(使用首页导航)
  • 小号:72*72(使用分页导航)

6.头像:

112*112 (使用用户中心)   小:72*72(用户评论)

7.标签:

(圆角线框  13.5像素圆角)80*28(宽度没有唯一标准)   字号20

8.悬浮操作按钮:

112*112(圆) 投影(距离0 大小8  不透明40)  悬浮按钮可加44*44的大图标

9.缩略图:

  • 比例  4:3  16:9   1:1
  • 232*174(三图)    350*196(2图)      710*398(1图)
  •  左右结构 320*270(1图)

10.列表:

  • 上下结构:1图  2图  3图
  • 左右结构:1图

11.搜索框:

750*88  (500*60  圆角30)


banner尺寸:  750*260

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码