其实很早之前就有查过这方面的资料，可惜一直没有总结。当时因为每天写CSS，需要命名的地方比较多。
目前主流的切图命名方式：
控件位置 > 控件类别 > 控件详情描述 > 控件状态
在移动端，可以看成是
所属页面 > 控件类别 > 做什么的 > 状态
用下划线"_"分开
有些控件叫法，安卓和iOS略有不同，比如底部标签安卓叫button navigation底部导航，而iOS叫做底部标签tab。具体操作还是按照自己（团队）的习惯来。我这里尽量以安卓为准。
对于一些在多个页面通用的部件，我建议用“common”作为前缀。
模块
通用 common
启动页面 default
顶部导航 nav
左侧导航 leftbar
底部导航 bottom navigation
底部纸张 bottom sheet
工具栏 toolbar
顶部标签 tab
个人资料 porfile
设置 setting
内容 content
主页 home
登陆 login
注册 register
控件
背景 bg
按钮 button
浮动按钮 floating action button
卡片 card
标签 chip
数据表格 data table
对话框 dialog
网格列表 grid list
菜单 menu
进度条 progress
选择控件 selection control
滑块 slider
小提示 snackbar
步骤 stepper
输入框 text field
列表 list
弹出 pop
刷新 refresh
模式
数据表格 data format
空状态 empty state
错误 error
手势 gesture
指纹 fingerprint
启动页面 launch screen
加载图片 loading image
搜索 search
文字
标题 title
副标题 subheading
主体文字 body
说明 caption
提示信息 msg
内容
照片 photo
图片 img
图标 icon
用户 user
返回 back
删除 delete
编辑 edit
下载 download
链接 link
注释 note
标志 logo
更多 more
取消 cancel
添加 add
状态
常用状态 nor
网页设计的悬浮状态 hover
点击时的状态 pressed
选中以后的状态 selected
不可用状态 disabled
网友评论