前端开发UI设计元素标准,命名标准

前端的开发总结文档怎么写
前端怎么和后台如何合作开发
前端开发 怎么赚外快

偶然在知乎中看见这篇文章,顺便也记录一下,分享在此给大家。

转载:https://zhuanlan.zhihu.com/p/26475253

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。U妹建议要竟可能用最少的字符而又能完整的表达标识符的含义。

一、 切图命名英文缩写的3个原则

  1. 较短的单词可通过去掉“元音”形成缩写
  2. 较长的单词可取单词的头部几个字母形成缩写
  3. 还有一些约定俗成的英文单词缩写

二、命名规则

模块_类别_功能_状态.png

U妹举个栗子:nav_button_search_default.png

释义为:导航_按钮_搜索_默认.png

启动界面

启动图片:default.png

启动:logodefault_logo.png

如:default.png\defoult@2x.png\defauLt-568@2x.png

登录界面(login)

登录背景:login_bg.png

登录:logologin_logo.png

输入框:login_input.png

输入框选中状态:login_input_pre.png

登录按钮:Login_btn.png

登录按钮选中状态:Login_btn_pre.png

导航栏按钮 (nav)

命名nav_功能描述.png

如:nav_menu.png\nav_menu_pre.png

(同按钮选中前后两种状态命名 )

按钮命名(btn可重复使用按钮)

一般:normalbtn_xxx_normal.png

点击:highlightedbtn_xxx_highlighted.png

不能点击: disabledbtn_xxx_disable.png

按下: pressedbtn_xxx_pressed.png

选中 : selectedbtn_xxx_selected.png

做为复数选择出现机会不高

btn:_功能属性或色彩均可.png

如:btn_blue.png\btn_blue.9.png 蓝色按钮

其他命名

图标:icon_xxx.png

图片:pic_xxx.png或是img_xxx.png

照片:pho_xxx.png

左侧导航

命名leftbar_功能描述.png

如:leftbar_info.png\leftbar_info_pre.png 个人中心

底部选项卡按钮(TabBar)

命名Tab_功能描述.png

如:tab_set.Png\nav_set_pre.png 设置

主页命名

命名home_功能属性+描述.png

如:home_menu_recommended.png 热门推荐

ps:描述可用英文或拼间开头字母组合等

列表页命名规则

命名List_功能属性+描述.png

如:list_menu_collect.png 列表页收藏按钮

UI文件命名规范常用词

常用状态正常:normal

按下:pressed

选中:selected

禁用:disabled

已访问:visited

悬停:hover

控件&部件

控件:较独立的可操作界面元素

部件:描述属于某控件一部分

按钮(可点):Btn

图标:Icon不可点、非点击主体、图案部件

标记:Sign

列表:List

菜单:Menu

视图:View

面板:Panel

薄板:Sheet 底部弹出菜单

栏:Bar

状态栏:StatusBar

导航栏:NaviBar

标签栏:TabBar

工具栏:ToolBar

切换开关:Switch

滑动器:Slider

单选框:Radio

复选框:CheckBox

背景:Bg

蒙版、遮罩:Mask

收藏:collect

评论:comment

广告:ad

时间:time

音频:audio

视频:viedio

不喜欢:dislike

用户:user

首页:home

排名:ranked

搜索:search

标志:logo

进度条:progress bar

默认图片:def_

分隔图片:seg_

选择:sel_

关闭:close

返回:back

编辑:eidt

内容:content

左 中 右:left center right

提示信息:msg

个人资料:porfile

弹出:pop

删除:delete

下载:download

登录:login

注册:regsiter

标题:title

注释:note

链接:link

图片:image(img)

刷新:refresh

常用补充描述

顶部:Top

中间:Middle

底部:Bottom

第一:First

第二:Second

最后:Last

页头:Header

页脚:Footer

三、 总结

关于切图命名规范就到这里了,最后还是想和大家说,有什么不懂的、不明白的地方,要多去和开发的同事请教和沟通,这样才能省时省力,事半功倍,更加高效的完成工作。

前端开发怎么进行可视化
前端开发周志怎么写
前端开发是怎么分工的
» 本文来自:前端开发者 » 《前端开发UI设计元素标准,命名标准》
» 本文链接地址:https://www.rokub.com/8143.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!