IOS前端规范Word文档下载推荐.docx
- 文档编号:18696451
- 上传时间:2022-12-31
- 格式:DOCX
- 页数:12
- 大小:428.16KB
IOS前端规范Word文档下载推荐.docx
《IOS前端规范Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《IOS前端规范Word文档下载推荐.docx(12页珍藏版)》请在冰豆网上搜索。
如果不清楚你该怎么标,一定要和工程师沟通!
每个工程师实现效果的方法不同,我在这里所说的,是我的标注习惯,但应该适用于大部分的设计师和工程师。
不需要每一张效果图都进行标注,你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可;
标注颜色是使用16进制,还是RGB:
都用得到,要看实现什么东西,建议标注颜色时,两种色值表达都标上(16进制&
RGB)。
你需要标注的内容有:
1.文字需要提供:
字体大小(px),字体颜色;
2.顶部标题栏的背景色值,透明度;
3.标题栏下方以及Tabbar上方其实有一条分割线,需要提供色值;
4.内容显示区域的背景色(如果是全部页面白色,那就和工程师说一句就行);
5.底部Tabbar的背景色值。
下面的是一个比较普通的首页页面,但是基本上一款APP中应该标的元素都有了~
一般页面你需要标注这些地方:
所有元素统一距离屏幕最左24px(全局性的数据可以直接和工程师沟通,也可以标注,推荐标注出来)
1.标题栏:
背景色,标题栏文字大小,文字颜色(不再赘述);
2.Banner:
所有撑满横屏的大图,不需要横向尺寸,把高度标出了就可以了;
3.菜单图标:
图标的大小和图标的可点击区域不一定一致
也就是说,图标可以做的很小,但是为了保证点击的准确性和流畅性,工程师可以把可点击区域设置的很大,这样标注和切图的时候就要注意,标注的是可点击区域的大小,切图切的也是可点击区域的大小,也就是用透明区域去补上,否则图片会模糊。
在设计的时候就要考虑可点击区域的范围,比如X宝购物车页面左侧的小圈,可点击区域要比实际小圈尺寸大很多。
这种类型的图标需要标注图标点击区域大小,图标距离屏幕最左最右以及上下的距离。
至于图标的间距,因为有些时候可能
设计师不能完全做到1px不差,所以我基本不标,交给工程师让他们去处理,其实等距排列的图标不需要标间距,因为工程师还要动态适应不同的屏幕,标了间距也是白标(还是要和你的搭档沟通怎么去标注);
4.模块间隔:
这个位置其实不是太重要,我习惯标注上这里,麻烦能少则少。
5.图片+文字:
这个应该比较常见,只标注一个单位(图+文)就可以了。
图片需要标注宽高,因为工程师要设置图片区域,从后台调取,可以这么说,软件里除了横屏撑满的图,基本上所有的图片都要标注宽高。
图片距离上下左右的距离,文字大小颜色,这里的文字其实算两个控件,标题文字以及说明文字,需要单独标出。
TabBar:
这个位置其实比较特殊,你可以单独标注图标大小+文字大小;
还可以图标文字算作一个控件,整个切出来;
我们工程师的习惯是用整个的,也就是图标+文字算作一个ICON,所以我基本不怎么标注单独的图标(这里可以和你的搭档去沟通一下,看他是什么开发习惯)。
关于列表页类型的标注问题
普通的列表有两种方法(去问你的搭档,他喜欢用什么方法):
1.标出行高,行内元素居中;
2.标出行内元素,元素上下间距,确定行高;
每种元素的位置如何确定:
通常标注的都是元素距离屏幕最左侧的距离,比如上图的图标元素距离左侧24px,文字元素距离左侧100px。
标注这个东西没有固定的方法,工程师的开发习惯不同,标注方法也不同。
该怎么标注虽然可以在网上找到方法,但那不一定适合你,一定和自己的搭档勤沟通,方法是死的,人是活的……
所有的页面标注总结起来就是:
标文字,标图片,标间距,标区域;
(上述图标出现了45px的单数,因为软件自动吸附上去了显示了图标本身的尺寸,切图的时候记得输出个偶数尺寸的切片)
Part4
切片资源的输出
切之前务必要和你的工程师搭档沟通一下,该如何去切才能配合他的开发。
全局性的切图常见问题
①
你的所有设计尺寸,包括图形效果,应该尽量使用偶数。
技术开发使用的尺寸是设计稿像素尺寸的一半,也就是说,如果你用24px的字体,技术那边就是设置为12px;
所以标注的时候务必使用偶数,为了保证最佳的设计效果,避免出现0.5像素的虚边。
②
切图尺寸应该提供几套?
ico_car.png
IPhone2G,3G,3GS使用(好像没人用这手机了吧)
ico_car@2x.png
IPhone4,5,6优先加载此尺寸图片(不是必须使用这个尺寸,是优先加载调用这个尺寸)
ico_car@3x.png
IPhone6plus使用的尺寸
可以简单的理解为倍数关系(其实是为了满足不同分辨率,我觉得不用过于深究),如果你使用IPhone6尺寸做设计稿,那么切片输出就是@2x,缩小2倍就是@1x,扩大1.5倍就是@3x了。
理论上,为了达到最好的视觉效果,你应该输出三套尺寸,推荐输出三种尺寸的切片资源。
我的工程师搭档要求我给两套尺寸就可以,也就是@1x@2x的两种尺寸,因为我们没有6plus的测试机,所以看不到效果,据他说应该不会太失真,但是为了保证效果,我还是给三套尺寸。
另外现在几乎看不到3GS了,所以需不需要提供一倍图,还是要和工程师讨论一下~
@1x
@2x
@3x是开发工具Xcode软件需要的UI资源,命好名称后,IOS设备会自动的选取合适尺寸。
③共用资源的图片,输出一张就可以
类似这种重复的按钮之类的,只要提供一张共用的资源就可以了;
上面的文字是技术写上去的。
理论上按照最佳视觉效果,你应该提供多尺寸的图片;
但通常我只提供最大尺寸的一张图片即可,这一点要和你的搭档沟通好,却问他需要什么方式。
④切片的输出格式
文件→存储为Web所用格式
位图格式:
PNG24,PNG8,JPG
在JPG和PNG两种格式图片大小相差不是很大的情况下,推荐使用PNG;
如果图片大小相差很大,使用JPG。
欢迎页面,ICON一定要使用PNG格式,在不影响视觉效果的前提下,可以考虑使用PNG8;
矢量图格式:
PDF,SVG
IOS原生支持的两种矢量图片格式,但是支持的一般,并不能保证100%把所有图片效果渲染出来;
为了保险起见,我通常不使用这两种格式,推荐还是使用位图,如果以后技术提升,100%支持SVG和PDF这种矢量格式图,那个时候也许不用提供这么多套尺寸了~
⑤图标的点击区域
最小点击区域问题:
IOS人机指导手册里推荐的最小可点击元素的尺寸是44*44point(点),在设备上1point等于1像素,所以转换成像素就是44*44像素,换算成物理尺寸大概是7mm左右吧(人机工效学研究中得出的结论:
用食指操作,触击范围在7mm左右合适;
用拇指操作,范围在9mm左右合适)。
据说这个尺寸下,不容易出现误操作,误点击;
小于这个尺寸,点击就会变的有些不太准确,一向注重用户体验的苹果公司定义这个最小点击尺寸也不是没根据的……
所以现在做设计,为了图标精致,你可以把图标做的小一些,但是切图输出的时候,要考虑用户点击难易度的问题,所以,切图的时候,涉及到需要点击的小图标的时候,普通屏幕还是切44px大小,高清屏就需要切88px,不够的地方用透明区域补全,否则用户点击的时候会比较困难,会很不灵敏。
⑥图片图标的不同状态
每种图标或者图片如果有不同状态,每一种不同的状态都需要进行切片输出。
比如按钮有正常(normal),按下(pressed),选中(selected),禁用(disabled)等多种状态,
最常出现的就是normal→pressed→normal;
某些特定按钮控件会出现选中状态,具体情况具体分析吧。
这里显示的是你要知道按钮可能有几种状态……
切片的命名规则
命名并不是统一的规范,不同的公司不同的工程师有着自己不同的命名规范和命名习惯,但是大致还是有迹可循的,一般是:
切片种类+功能+图片描述(可有可无)+状态.png
名称应使用英文命名(中文不识别,推荐小写字母),不要以数字或者符号当作开头,使用下划线进行连接。
举个例子:
一个首页的处于正常状态的确定按钮
btn_sure_nor.png
btn_sure_nor@2x.png
切片种类是按钮(btn);
功能是确定(sure);
状态是normal(正常)
我通常是以这种命名方式进行命名,如果你的公司有设计文档,去看看之前留下的命名规范,如果没有,那就去问工程师吧。
TabBar(底部栏)
说说Tabbar这里,因为比较特殊。
如果单纯的只有图标,自然是只切图标就好了;
早上和工程师沟通,这里该怎么切,工程师给的建议是
图标+文字的模式,图标最好单独切,文字后面程序加上去。
另外记住,同一模块的图标切片大小保持一致,上图的四个图标本身尺寸并不相同,但是切图的时候你需要切出相同尺寸的阴影大小,便于工程师开发使用。
该怎么切图,还是要和你的工程师搭档去沟通一下;
以下是常用命名,这是我的命名习惯,并不是规范,所以要灵活,如果实在不知道英文,就用拼音代替也行。
Part5
工作常用数据
你需要使用的字体:
如果是用Mac设计的小伙伴,直接就用苹果黑体字就好了;
不过用Windows的就没那么幸运了,PC上还没和IPhone默认字体效果完全一样的字体,通常都是拿其他字体代替。
苹果丽黑
HiraginoSansGBW3(普通)/W6(粗体)
比较接近IPhone字体的一款字体,这是我之前一直使用的设计字体。
黑体-简
STHeitiSC-Light
Mac里面拷出来的苹果黑体,比较贴近IPhone手机字体,目前在用。
我会把这两款字体上传,有需要可以下载。
关于字体大小的问题
顶部操作栏文字大小
38px
标题文字大小
30-34px
正文文字大小
26px
辅助性文字大小
24px
Tabbar文字大小
20px
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- IOS 前端 规范