UI命名规范

2020-04-28  本文已影响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(页脚)

上一篇 下一篇

猜你喜欢

热点阅读