一份最详尽全面的UI界面切图命名规范

2018-5-9 Mechau 前端技术资源

      关于UI界面的切图命名规范,U妹觉得关键是在于团队能够有一个统一的规则,所以这里只介绍一种通用的命名规则,当然大家也可以根据自己的实际情况去制定,这里只提供一种方法与思路,仅供参考。

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

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

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

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

       3.还有一些约定成俗的英文单词缩写

      二、命名规则

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

        U妹举个例子:nav_button_search_default.png

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

     启动界面

        启动图片 default.png

         启动logo default.png

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

  登录界面

   登录背景    login_bg.png

         登录logo   login_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可重复使用按钮)

        一般   normal   btn_xxx_normal.png

        点击  highlight btn_xxx_highlight.png

        不能点击  disabled  btn_xxx_disable.png

        按下  pressed btn_xxx_pressed.png

        选中  selected btn_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文件命名规范常用词

      常用状态 

       正常 normat

       按下 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

       不喜欢 dilike

       用户 user

       首页 hone

       排名 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缩写解释


Powered by emlog 京ICP备12006971号-1 sitemap