App原型设计规范

cabdff1b168b3265b9c15e62d31603dd.jpeg

一、界面尺寸

1.ios分辨率

22d317a60a1fd31690caa444e9f2c76e.jpeg

2.android界面尺寸

① 安卓分辨率

e01073b2bddb685164a6a5d85c9225b9.jpeg

②常见安卓手机分辨率及尺寸

5bbdd3e51a8124648dc6e83981611014.jpeg

一般情况下大家在设计app端原型的时候,由于现在ios和安卓慢慢在趋向一致,所以基本上都只会设计一套原型,尺寸方面一般都是按照iphone6的750*1344(2倍率)进行设计,原型尺寸=实际分辨率/2,故手机原型的尺寸为375x667。如果要单独设计安卓的话,原型尺寸为360*640

二、其他尺寸及规范

1.其他内容大小规范

4039312dde21389f2f4ab9a51a8779db.jpeg

2.字体大小及样式

①样式

ios:

iOS中文字体:苹方/PingFang SC;

iOS英文字体:San Francisco Pro

安卓:

5.x以上版本:思源黑体/Noto Sans Han

5.0以下版本:Droid Sans Fallback

英文、数字:Roboto

②大小

a.一般都均采用偶数进行设置,字体大小采用4作为梯度

标题:16px;描述:12px

b.详情页,标题与正文间距,一般采用4作为梯度

12px,16px,20px

c.行间距,一般采用1.5一1.6倍

d.导航栏文字大小一般采用16px-20px

3.导航栏

427464d06d6138b752869e4d65603604.jpeg

ff3370a63cc4a31d48bc82c47fe761e3.jpeg

4.标签栏

49265fab665ff6d96f4c5a6510051010.jpeg

45f5b958a140e2fd3592ff4c7e3a0627.jpeg

5.分类入口

d961bec6a8a1c2467cf7a83a279d9e46.jpeg

b1813706243225b4ebd49a373bbab4a9.jpeg

注:

①移动端每行能同时显示的图标数目不超过5个

②图标大小双数

6.板块间距

66f24567d52616baad307af6d31045e0.jpeg

间距大小10-15px,常见为12px

7.搜索框

aede433e95686c4535a8f5957391c323.jpeg

字体大小一般为14px

8.输入框

8c7c109afef7a7ce0810a9ae2d237656.jpeg

 

输入框大小:20-25px

 

9.文字颜色(安全色)

765a283508ca1a953aabbccacda0174c.jpeg

975d8519719814af66070386e998183b.jpeg

10.导航栏下的提示栏

①颜色建议要鲜艳

②大小:28px

以上为app端绘制原型时,涉及到的一些规范及尺寸,希望能够帮助到大家,如有任何疑问或者建议,可在评论区交流

 

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

产品阿强

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值