发表于: 2018-11-29 21:57:12

1 867


今天完成的事情:


看了一下任务8的知识点,简单做了一下任务8,下载了关于任务的软件。

                
明天计划的事情:  

 

做任务8,讲小课堂。

                    
遇到的问题:   


暂无遇到问题。

                   
收获:


看了UI界面切图命名规范 :

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


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


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

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

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

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


二、命名规则

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

U妹举个栗子:nav_button_search_default.png

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


           启动界面:

启动图片   default.png

启动logo   default_logo.png

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


登录界面(login)

登录背景    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 




返回列表 返回列表
评论

    分享到