移动端界面设计

设计尺寸

    ios:新建750×1334 分辨率72px       android:720 x 1280px (设计风格Material Design)

    * 在iphone上实时观看效果Ps Mirror安装一个    

字体大小

24px、26px、28px、30px、32px、34px,36px等等     
记住是偶数的  最小字号20px
36px (超大号字号)  :导航、文章页标题           (建议行间距:54px)
32px(大号字号)       :普通标题、重要文字       (建议行间距:48px)
28px( 中号字号)     :文章正文、次重要文字      (建议行间距:42px)
24px(小号字号)       :内容较多的段落、横排应用名称、描述     (建议行间距:36px)
22px(加小号字号)    :名称标注、密集排版区域       (建议行间距:28px)

使用字体

中文用苹方黑体,英文用San Francisco,如果安不上也可以用Helvetica代替

组件尺寸

(750 x 1334 设计稿尺寸)
 基本: 状态栏高度:40 px、导航栏高度:88 px、 底部标签栏高度:98 px   屏幕边距:20px/24px (看项目情况)
 图标: 常见图标尺寸:24px、32px,48px等    (6的倍数比较好)
             启动图标: 1024 x 1024px
             主要大图标菜单:60 x 60px  、 64 x 64px    
 按钮:  按钮尺寸(常规): 高 54px  64px   (点击区域不小于88px )
 banner:首页顶部:750x408px
(android:720*1280)
基本:状态栏高度:50px、  导航栏 高度 :96px、底部标签栏 高度 :96px

细节注意

1、除了广告图片,其他部件最好都用形状工具绘制
2、设计可点击的部件尽量和屏幕四周边框保持一定距离(一般控制在20px的空间)
3、所有部件的尺寸必须是偶数
4、可点击部件不小于88px(以Retain为基准,通常所说的44px是指普通屏幕),实在不够大的切图时空白补足或者让程序控制触点大小

整理

设计完后导出效果图,按模块整理分类到不同文件夹,在文件夹内按步骤顺序命名(xx01,xx02...)文件

猜你喜欢

转载自blog.csdn.net/maomaog16/article/details/82107266