IOS的设计规范及分辨率尺寸 UI设计教程

来源:网络   作者:热心网友   发布时间:2017-06-13    浏览次数:472

IOS的设计规范及分辨率尺寸


一:iphone设计规范(以750*1334px为准)

画布:750*1334px (4.7英寸)


布局: statusbar:状态栏:40px

navigationbar:导航栏:88px

Tab bar:菜单栏:98px



d65f59192f1db5b3086ed445f3ef.jpg



字体:中文:苹方 英文:San Francisco

状态栏:24px

标题栏:36px 返回按钮:44*44px

按钮文字,小标题:28px

正文:28px / 26px

底部菜单栏:22px 菜单图标:44*44px

提示信息,小文字:24px / 22px

(这只是自己的一些规范,具体的字体大小需根据设计来定)



335b59193017a801216a3e3fd8e2.jpg




按钮: 普通屏幕中所有能点击的按钮/图片,最小可点击区域为:44x44 px;Retia屏幕中所有能点击 的按钮/图片,最小可点击区域为:88x88px;

按钮状态及样式:按钮状态主要分为普通(normal)、选中(selected)、按下 (highlighted)、不可点(disabled)四种,大部分按钮 都包含了这4种状态。

按钮样式包括三种:第一种是直角;第二种是圆角(圆角为8px);第三种是全圆角。






图标logo: 画布:1024*1024px

切图大小:44*44px58*58px75*75px 80*80px114*114px120*120px

1024*1024px



7d39591930a7a801216a3e248e06.jpg




切图和标注:750*1334px:@2X 在此基础上面标注与切图,目前只需切@2X,@3X

命名常用的单词:

normal(正常)、pressed(按下)、selected(选中)、disabled(禁用)、visited(已访问)、hover(悬停)、btn(按钮)、icon(图标)、sign(标记)、list(列表)、menu(菜单)、view(视图)、panel(面板)、sheet(薄板)、bar(栏)、statusbar(状态栏)、navbar(导航栏)、tabbar(标签栏)、toolbar(工具栏)、switch(切换开关)、slider(滑动器)、radio(单 选框)、 checkbox(复选框)、bg(背景)、mask(蒙版/遮罩)




附:以其他分辨率设计的规范 :




889859195490a801216a3e43345d.jpg




二:分辨率

750*1334px(4.7英寸)——iPhone 6,6S,7

320*480px(3.5英寸)——iPhone1G,3G,3GS

640*960px(3.5英寸)——iPhone4,4S

640*1136px(4英寸) ——iPhone5,5S , 5C , SE

1242*2208px(5.5英寸)——iPhone6 Plus,6S Plus , 7Plus (开发应按照1242x2208适配)

iphone3以前都是@1X ;

iphone4,5,5s,6,6s,7都是@2X;

iphone6 plus,6s plus ,7plus都是@3X




9d935919472fb5b3086ed4207f7e.jpg




三:其他ios设备



bf9f591955a9a801216a3e499f3f.jpg




联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:规范适配

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6039.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通