美文网首页
UI命名规范

UI命名规范

作者: 肖旭晖 | 来源:发表于2020-04-28 11:22 被阅读0次

启动页面

default.png(启动图片)

default_logo.png(启动logo)

登录界面(login)

login_bg.png(登录背景)

login_logo.png(登录logo)

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-n.png

点击(highlight):btn-xxx-n.png

不能点击(disabled):btn-xxx-d.png

选中(selected):btn-xxx-s.png

btn_(功能属性或色彩均可).png

其他命名:

图示:icon-xxx.png

图片:pic-xxx.png

照片:pho-xxx.png

左侧导航:

leftbar_(功能描述).png

如:leftbar_info.png\leftbar_info_per.png(个人中心)

TabBar(底部选项卡按钮)

如:tab_set.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(导航栏)

toolbar(工具栏)

switch(切换开关)

slider(滑动器)

radio(单选框) checkbox(复选框)

bg(背景) mask(蒙板、遮罩)

常用补充描述

top(顶部)

middle(中间)

bottom(底部)

first(第一)

last(第二)

header(页头)

footer(页脚)

相关文章

  • 自用命名规范

    UI命名规范 普通UI命名 控件类型_ui名称 UI绑定脚本命名 控件类型简称_ui绑定脚本名称_bind 文件规...

  • UI命名规范

    启动页面 default.png(启动图片) default_logo.png(启动logo) 登录界面(logi...

  • UI命名规范

    启动页面 default.png(启动图片) default_logo.png(启动logo) 登录界面(logi...

  • 代码规范

    iOS编码规范 命名 变量命名 首字母小写,驼峰法则UI控件(描述+控件类型) priceLabel或price...

  • 批量修改文件名的脚本

    前言 做RN游戏 有些图片是png图片. uI给的命名 不规范, 通过脚本给图片重命名

  • UI切图命名

    2017-3-04 UI文件命名规范常用字 正常:normal 选中:selected ...

  • 安卓的切图规范

    Android UI 切图命名规范、标注规范及单位描述 很多UI设计师做APP切图都会有两套,一套是Android...

  • unity中UI切图规范

    总结一下针对Unity的UI切图规范 一、切图命名规范 只能使用英文大小写,数字和下划线命名,禁止出现空格,文中,...

  • 途度

    1.首页 2.出国圈 3.申请 4.我的 项目切图命名规范 项目UI设计规范

  • 适合各厂使用的 MySQL 团队开发规范,太详细了,建议收藏!

    数据库对象命名规范 数据库对象 数据库对象全局命名规范 数据库命名规范 表命名规范 字段命名规范 索引命名规范 视...

网友评论

      本文标题:UI命名规范

      本文链接:https://www.haomeiwen.com/subject/jwcvwhtx.html