• WAP手机版 RSS订阅 加入收藏  设为首页
教育·综合

同颖传媒:掌握UI设计中切图命名规范 高效率提高UI设计工作

时间:2017/3/14 15:53:46   作者:王宝珠   来源:中国培训之家   阅读:1059   评论:0

    在日常设计工作中,为了降低设计师和程序开发之间的交流成本,避免造成一些不必要的麻烦。今天同颖文化传媒的老师们给大家普及一下设计中切图的命名标准。

 

    iOS为例,一般将设计的命名文件名分成三部分:

    第一部分:图片的逻辑归属分类;

    第二部分:图片的表现内容;

    第三部分:图片的内容的类型;

   (有些图片还会有第四部分:表示图片表现的状态。)

    首先有几个规则是:

    用英文命名,不用拼音

    每一部分用下划线分隔

    图片名中两倍图在名字最后要加@2x,三倍图在名字最后要加@3x

 

逻辑分类

 

    逻辑分类即是这张图片所属的分组,在 iOS 中大多的项目是以 Tab bar 的形式进行逻辑上的分组,以下图为例:

 

同颖传媒:掌握UI设计中切图命名规范_高效率提高UI设计工作
 

    这张图就是使用Tab bar进行分组的,可以看出设计内容分成了五个部分:Home,Categories,Live TV,My List 和Search。

 

    例如在这个界面中,右上角的设置按钮,那么它的切图命名的 第一部分就是Home。

 

    但是仔细看看上面这个界面的话有一些图其实是不属于某个分类的,比如Tab bar中的图标文件和 Navigation Bar中的图标,对于这两种内容来讲,它们命名的规范是第一部分显示的是 navigationbar或者是tabbar。

 

表现内容

 

    图片表现的内容,还是同样以上图为例,界面中右上角的按钮表现的是设置按钮,那么它的表现内容就是设置,所以这个按钮在第二部分显示的就是settings。

 

    而在上图的Tab bar中第二部分的名字就是它们在程序中显示的名字,而Navigation Bar中的图标的第二部分命名因为表现的内容就是Showtime,所以显示的就是showtime。

 

内容类型

 

    同样以上面的图为例,在Navigation Bar中的图标,它的内容类型是icon,所以这个图片文件的两倍图完整命名就是navigationbar_showtime_icon@2x.png。而右上角的设置按钮的话,它的类型是按钮,所以第三部分即是 button 的缩写 btn,即是navigationbar_settings_button,下面五个Tab bar的图片名分别是:

    tabbar_home_icon

    tabbar_categories_icon

    tabbar_livetv_icon

    tabbar_mylist_icon

    tabbar_search_icon

 

图片状态

 

    对于某些类型的切图,它可能代表的只是某个控件的一种状态,以按钮为例,正常的状态就是 normal,而点击中的状态是highlighted,选中的状态则是selected。图中,右上角的设置图标是正常的状态,所以加入图片的状态之后,它的两倍图的完整命名应该是 navigationbar_settings_btn_normal@2x.png。而下方的Tab bar来讲,选中的是Home,那么当前这张图片的两倍图的完整命名就应该是tabbar_home_icon_selected@2x.png

 

    好了,经过同颖文化传媒老师的讲解,大家以后是对自己设计的页面命名不再迷茫了?在设计中有什么想说的想问的,意见或者建议,可以关注同颖文化传媒微信公众号:toonying,同颖文化传媒的老师们会一一给大家回复!


投稿邮箱:418526785@qq.com  如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
声明:网站登载此页内容出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。文章内容仅供参考。 闽ICP备13009482号