APP界面切图命名和文件整理规范

  • 经验类型规范/资料原作者:我是小编

  • 经验属性好文转载
  • 经验版权不使用原创授权
68474 43 622 2015-11-13

最近一直在找一个比较好的切片命名的方式,找了好久,觉得这篇还不错,转载过来,大家一起学习。

Image title



       


规范的命名方式可以提高客户端程序员的开发效率和团队协作。个人觉得标识符命名原则:尽可能的用最少的字符而又能完整的表达标识符的含义。

切图命名英文缩写三个原则:



1 较短的单词可通过去掉“元音”形成缩写

2 较长的单词可取单词的头几个字母形成缩写

3 此外还有一些约定成俗的英文单词缩写.  


第一部分:iOS APP界面设计切图命名规范  


以上切图命名规范信息图来源:http://www.zhangruisheng.com/post/e5517_260065b  感谢张瑞生的无私分享。


第二部分:手机APP切图文件整理和技巧分享

Image title

第三部分;Android编码规范建议18条,非常不错! 适合手机app设计师和android 工程师阅读。


1.java代码中不出现中文,最多注释中可以出现中文

2.局部变量命名、静态成员变量命名 只能包含字母,单词首字母除第一个外,都为大写,其他字母都为小写

3.常量命名 只能包含字母和_,字母全部大写,单词之间用_隔开

4.图片尽量分拆成多个可重用的图片

5.服务端可以实现的,就不要放在客户端

6.引用第三方库要慎重,避免应用大容量的第三方库,导致客户端包非常大

7.处理应用全局异常和错误,将错误以邮件的形式发送给服务端

8.图片的处理

9.使用静态变量方式实现界面间共享要慎重

10.Log(系统名称模块名称接口名称,详细描述)

11.单元测试(逻辑测试、界面测试)

12.不要重用父类的handler,对应一个类的handler也不应该让其子类用到,否则会导致message.what冲突

13.activity中在一个View.OnClickListener中处理所有的逻辑

14.strings.xml中使用%1$s实现字符串的通配

15.如果多个Activity中包含共同的UI处理,那么可以提炼一个CommonActivity,把通用部分叫由它来处理,其他activity只要继承它即可

16.使用button+activitgroup实现tab效果时,使用Button.setSelected(true),确保按钮处于选择状态,并使activitygroup的当前activity与该button对应

17.如果所开发的为通用组件,为避免冲突,将drawable/layout/menu/values目录下的文件名增加前缀 18.数据一定要效验,例如:字符型转数字型,如果转换失败一定要有缺省值;  服务端响应数据是否有效判断



全部评论:43条

  • 六月pony

    2019-01-04 23:53

    @UNTIL_世界盡頭: 我一般在44-48px之间

  • UNTIL_世界盡頭

    2018-07-30 11:53

    底部tab栏的icon也是切88x88px还是和tab栏等高切,如果icon下有文字的连文字一起切吗?

  • cc_涅飞

    2018-06-12 11:20

    @清柠新檬: 点击区域88*88px

  • 六月pony

    2018-05-02 16:33

    @Sunaokei: 就是sketch切图插件maesure

  • Sunaokei

    2018-04-28 11:29

    神器是什么啊

  • 六月pony

    2017-11-20 16:15

    @清柠新檬: 两种切图方法 一种的直接按照返回键 的大小正方形来切 一种是直接按照导航栏的高度切

  • 清柠新檬

    2017-07-28 16:38

    @六月pony: 不是,我问的是返回那个导航栏的切图尺寸

  • 六月pony

    2017-07-28 14:39

    @清柠新檬: 你问的是tab那边的icon切图尺寸吗

  • 清柠新檬

    2017-07-23 12:30

    大神,我想问,第四点切图时注意点击区域这块的ICON尺寸应该是多少?切的可点击区域的尺寸又是多少?

  • 六月pony

    2017-07-04 09:53

    @1805601474: 只用切图 @2x @3x的就可以

  • 六月pony

    2017-02-06 14:10

    @1805601474: 一般做中间的图 向上和向下都不会模糊

  • 1805601474

    2017-02-02 11:03

    ui中x1 x2 x3切图是要三套对应的分辨率设计图吗?表示初学者很不懂

  • freehorse

    2016-06-07 14:56

    学习,谢谢

  • 六月pony

    2016-04-26 11:14

    @乐小圈儿: 我没有地址呀 你可以去淘宝看看 这种的淘宝卖的很便宜,估计5元钱

  • 六月pony

    2016-04-26 11:12

    @Jessica_L: 是的,因为他们的比例是一样的,如果你们要求很严格 你做了iOS一套图之后 只改变设计图的画板尺寸,字段 其他的间距行距大小不用变,iOS和安卓的弹窗很不一样 然后你可能要重新做一套安卓的弹窗

  • Jessica_L

    2016-04-22 15:54

    @六月pony: iOS和安卓可以只设计一张设计稿吗?安卓可以用2x的?

  • 六月pony

    2016-04-12 09:53

    @乐小圈儿: 我没有 网上应该有 不过我听说中文版的翻译对使用有影响 其实英文版的你只要记住几个快捷键 icon在AI里面画 还是很不错的,中文版的难免更新不及时

  • 乐小圈儿

    2016-04-11 11:07

    @六月pony: 有地址吗,中文版的,可以发给我下吗

  • 六月pony

    2016-04-11 11:04

    @乐小圈儿: 只有苹果才可以装,有中文版的 不过我没有用过

  • 乐小圈儿

    2016-04-08 11:53

    sketch的话是不是只有苹果电脑才能装呢?还有有没有中文版的?

  • 六月pony

    2016-03-23 09:36

    @Jessica_L: 错了 sketch也可以做安卓的设计图哦! 我一般设计iOS 750*1334,安卓720*1280,两者的比例大概是一样的。然后切片就是只切iOS@2x和@3x的图,安卓也用iOS的@2x图,是可以的

  • Jessica_L

    2016-03-22 11:13

    用sketch怎么切安卓的图?sketch只有iOS的啊

  • 阿扎芭芭拉

    2016-03-07 16:13

    @六月pony: 好哒,么么哒~

  • 六月pony

    2016-01-18 15:19

    @阿扎芭芭拉: 直接用sketch做就不会糊涂,很好上手,

  • 六月pony

    2016-01-04 17:25

    @阿扎芭芭拉: 就是一般的切图的命名方式 你可以先强迫自己做一次 以后就回习惯了

  • UI小白

    2015-12-07 15:00

    @阿扎芭芭拉: 做过了就不会糊涂了,那可能是因为你没接触过

  • 阿扎芭芭拉

    2015-12-06 16:49

    新手看的稀里糊涂的。。看到后面就已经完全凌乱了

  • 望乡阁

    2015-12-02 22:16

    不错不错

  • 六月pony

    2015-12-02 10:20

    @Jackylingli: cutman 或者自己动手用ps切

  • 六月pony

    2015-11-30 17:22

    @JerryKKK: 觉得的对自己用 就拿过来自己看了塞!觉得应该挺适合好多人的,就分享了一下,这个我觉得没什么吧,只要有用,可以学习就可以

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票