UI中切图与命名规范,收藏!

2019-3-14    用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作,减少沟通成本。结合经验与收录的资料,分享给大家。

一. 切图命名英文缩写的三个要求


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

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

3.还有一些特定的英文单词缩写


二. 命名规则


切图命名以模块为前缀,如:模块_类别_功能_状态.png


模块:

登陆页面(login) 公共(common) 需求a(need) 需求b(demand) 发现(discover) 消息(message)    我(me)


类别:

导航栏(nav) 菜单栏(tab) 按钮(btn)  图标(icon)  背景图片(bg)  默认图片(def)


状态:

selected(选中) disabled(不可点) pressed(按下) normal(一般)


举例说明:

IOS:

以750*1334为基稿设计,按实际项目开发为标准,需切出@2x和@3两套图,把在公共页面中的导航栏里面有一个按钮(40x60px)的选中状态切图,直接输出的切图为@2x图,@2x的1.5倍图为@3x。


输出成果为:

common_nav_btn_back_s@2x.png(40x60)和common_nav_btn_back_s@3x.png(80x120);

意思为:公共_导航_按钮_返回_选中


Android:

以720*1280为基稿设计,由于尺寸不同且多样,需要切多套图适配不同机器,分别为mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,直接输出的切图为xhdpi;它们分别对应的倍数关系为1、1.5、2、3、4。


输出成果为:

common_nav_btn_back_s_mdpi.png(20x30)、

common_nav_btn_back_s_hdpi.png(30x45)、

common_nav_btn_back_s_xhdpi.png(40x60)、

common_nav_btn_back_s_xxhdpi.png(60x90)、common_nav_btn_back_s_xxxhdpi.png(80x120);


命名示列:

启动  (default):    

default.png   启动图片;

default_logo.png   启动logo


登陆(login):

login_bg.png   登陆背景图片

login_logo.png   登陆logo

login_input_n.png   输入框

login_input_s.png   输入框选中状态

login_btn_n.png    登录按钮

login_btn_s.png    登录按钮选中状态


注册(register):

login_register_rb_n.png    单选框按钮

login_register_rb_s.png    单选框按钮选中状态


导航栏(nav):

common_nav_btn_menu_n.png    菜单按钮

common_nav_btn_menu_s.png    菜单按钮选中状态

common_nav_btn_back_n.png    返回按钮

common_nav_btn_back_s.png    返回按钮选中状态

common_nav_btn_close_n.png    关闭按钮

common_nav_btn_close_s.png    关闭按钮选中状态

common_nav_btn_eidt_n.png    编辑按钮

common_nav_btn_eidt_s.png    编辑按钮选中状态

common_nav_btn_delete_n.png    删除按钮

common_nav_btn_delete_s.png    删除按钮选中状态

common_nav_btn_message_n.png    消息按钮

common_nav_btn_message_s.png    消息按钮选中状态

common_nav_btn_search_n.png    搜索按钮

common_nav_btn_search_s.png    搜索按钮选中状态


列表(list):

hpcollege_list_collect.png    列表页收藏按钮


左侧导航栏(leftbar):

leftbar_info.png     个人中心


菜单(tab):

common_tab_need_n.png     需求a按钮

common_tab_need_s.png     需求a按钮选中状态

common_tab_find_n.png     发现按钮

common_tab_find_s.png     发现按钮选中状态

common_tab_demand_n.png    需求b按钮

common_tab_demand_s.png    需求b按钮选中状态

common_tab_me_n.png    我的按钮

common_tab_me_s.png    我的按钮选中状态


首页(home):

home_bg.png     首页背景

home_banner.png     首页广告图


点9图(.9):

rounded rectangle.9.png    圆角矩形


常用词语:

selected:选中/s

pressed:按下/pre

disabled:不可点/d

normal:正常/n

common:公共

default:登录页

discover:发现

message:消息

me:我

navigation  bar:导航栏/nav

tab:菜单栏

button:按钮/btn

icon:图标

background-image:背景图片/bg

default-image:默认图片/def

cut-off  rule:分割线/cor

login:登陆

register:注册

list:列表

home:首页

banner:广告

browse:浏览

details:详情

like:喜欢

dislike:不喜欢

search:搜索

content:内容

collect:收藏

eidt:编辑

comment:评论

message:提示信息/msg

ranked:排名

location:定位

tags:标签

left:左

right:右

center:中

popup:弹出/pop

image:图片/img

viedio:视频/vd

audio:音频/ad

title:标题/tit

address:地址/add

number:人数

time:时间

sustem:系统

refresh:刷新

user:用户

more:更多

border:边框

next:下一步

sign:签到

code:密码

clear:清除

scroll:滚动条

hover:鼠标停留

common:公共

hot:热点

zoomin:放大

zoomout:缩小

service:服务

presonal  data:个人资料/Pdata

male:男性

female:女性

report:举报

input:输入/ip

dropdown  menu:下拉菜单/ddm

radio button:单选框/rb

check  box:复选框/cb

progressbar:进度条/pbar

download:下载

arrow:箭头

share:分享

upload:上传

release:发布

tabbar:标签栏

autonym:实名

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档