设计文件的命名

其实很早之前就有查过这方面的资料,可惜一直没有总结。当时因为每天写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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,903评论 22 665
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,548评论 25 708
  • 时间恍恍惚惚,不掐手指头算不出来我已经高考了几年,是14年吗?生活中不知道分不清第几年和几年了的人多不多?but ...
    路人乙1118阅读 260评论 0 0
  • 妞最近语言爆发。会说出很多词儿,也会说句子了。作为麻麻,很高兴。 有一天早上,妞坐在沙发上,目朝前方,一本正经说:...
    空心龙卷阅读 134评论 0 0
  • 2012玛雅预言的世界末日没有降临,而我却把青春向上的自己落在了那年夏天。 中考失利后的这几年,在静默的时光中间挣...
    李木子的七年阅读 489评论 1 0