每日分享:2.设计规范—UI设计规范

  • 经验类型规范/资料
  • 经验属性好文转载
  • 经验版权不使用原创授权
9281 0 6 2019-10-10

MD规范等设计规范还包括了对开发的规范,细节完善但冗长。一般UI设计师在工作中输出的设计规范并不需要如此详细。以下是UI设计师输出设计规范的常规框架:

Image title

——————————————————————————————————


以下是一些案例:


案例一:


一些设计规范




——————————————————————————————————


案例二:


Image title



——————————————————————————————————


案例三:

Image title


——————————————————————————————————


除了设计规范,切图命名规范、准确、易识别也是一个设计师专业的基本素质。


下面是设计师切图命名规则手册:


(该文写得很详细:https://www.uisdc.com/slice-rename-in-ui-design

以下是重点摘抄:


切图命名格式

通用切片命名格式:

组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png
(对应中文:标签栏_图标_主页_默认@2x.png)

模块特有切图命名规则:


模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png
(对应的中文为:邮件_图标_搜索_ 默认@2x.png)



常用英文单词表:


bg(backgrond 背景)
nav(navbar 导航栏)
tab(tabbar 标签栏)
btn(button 按钮)
img(image 图片)
del(delete 删除)
msg(message 提示信息)
pop(pop up 弹出)
icon(图标)
selected(选中)
disabled(不可点击)
default(默认)
pressed(按下)
back(返回)
edit(编辑)
content(内容)
left/center/right(左/中/右)
logo(标识)
login(登录)
refresh(刷新)
banner(广告)
link(链接)
user(用户)
download(下载)
note(注释)


——————————————————————————————————


PS, 之所以做每日分享,其实除了分享给大家,同时督促自己总结。其中很多是来自于网络的知识,在之前收集资料的过程中并未标明出处,若不小心用了大家的内容,请联系我,侵删。


全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票