超全面的UI设计规范整理,你值得收藏!(下)

10月21日 收藏 1 评论 6 UI/交互

超全面的UI设计规范整理,你值得收藏!(下)

750x1334向上适配1125x2436px(@3x)
与苹果之前发布的iOS设备相比,iPhone X的像素分辨率发生了变化,为1125x2436px(@3x),在实际工作中为了方便向上和向下的适配,我们仍然可以选择熟悉的iPhone 7(750x1334px)的尺寸作为模版进行设计,只是高度增加了290px;设计尺寸为:750x1624px(@2x)。设计完成之后将设计稿的图像大小拓展1.5倍即可得到1125x2436px(@3x)尺寸的设计稿。在适配的时候需要注意,状态栏由之前的40px增加到88px,标签底部预留68px用于放置主页指示器,如下图所示:

关于主页指示器的适配涉及到两种情况:底部出现标签栏、工具栏等操作设计时,需要将底色下延68px并填充原有颜色,这样的处理可以让底部设计更佳简洁舒适,没有功能操作时,页面底部不需要填充颜色,只需盖住主页指示器即可。

对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

09.切图规范
当界面设计定稿之后,设计师需要对图标进行切片提供给开发工程师,通常我们只需要对icon进行切图即可,文字、线条和一些标准的几何形状是不需要切图的,例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可,开发工程师可以用代码实现这种效果。

输出切片
先将设计稿中的图标重新排列在一张新的画布中,保证同样尺寸的图标间距相同,这样做的好处是为图标建立一个控件库,有利于图标的整理。给每一个图标建立好参考线之后,用PS自带的切片功能,沿着建立好的每个图标的参考线画框即可,注意最后要输出PNG格式的切片(PNG格式拥有更多的颜色和细节并且支持透明)。在具体操作时首先要将画布背景色去掉,让画布变成透明,做好切片后执行“文件-存储为Web所用格式,在对话框中选择PNG格式,点击“存储”即可。

注:图中标签栏图标的底色块是为了保证统一的切片尺寸,可以根据色块建立参考线,具体切图时要将色块去掉。
命名格式
众所周知,一个大型项目会分很多模块,每个模块由不同的设计师来独立完成,还有人会专门管理公共的组件,如tabbar、navbar等等,这种情况下就会分为两种切图,一种是通用类型的切图,还有一种就是各个模块特有的切图。
通用切片命名格式:
组件_类别_功能_状态@2x.png
举例:tabbar_icon_home_default@2x.png
(对应中文:标签栏_图标_主页_默认@2x.png)
模块特有切图命名规则:
模块_类别_功能_状态@2x.png
举例:mail_icon_search_pressed@2x.png
(对应的中文为:邮件_图标_搜索_ 默认@2x.png)
当然这两个例子都是比较基本的情况,有很多时候可能一个单词并不能清楚的描述功能,比如有两个名字相同的搜索图标,大小不一,那这种情况你就可以这样命名:mail_icon_search_big_default@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(注释)
有些人会觉得写这么多英文太麻烦,但其实为了自己专业能力的提高,这种规范的命名方式是必须要经历的过程,当你习惯了这样的命名方式后,你的成就感会油然而生。
10.设计稿标注
当界面设计定稿之后,设计师需要对界面进行标注给开发工程师在还原界面时进行参考。借助一些专业的标注工具有利于我们提高工作效率,常用的标注工具有Mark Man或PX Cook。在一份设计稿中需要标注的内容是文字的字号大小、粗细、颜色、不透明度;界面的背景颜色、不透明度;各个图标、列表、文字之间的间距。

界面标注的作用是给开发工程师提供参考,因此在标注之前需要和开发工程师进行沟通,了解他们的工作方式,标注完成之后宣讲你的注意事项,以更快捷高效的完成工作,并且最大限度的完成视觉高的还原。
总结
本文整理汇总了包括界面尺寸、控件间距、版式设计规范、文字设计规范、设计适配、标注、切图等等一些列的移动端UI设计规范,在此期间查阅了大量的资料,希望为刚刚从事UI设计的设计师们提供入门级别的帮助。至于为什么只总结了iOS系统设计规范,而没有Android系统的设计规范,在这里说明一下,本来安卓系统设计规范也是要涵盖的,但通过查阅资料发现安卓设计规范介绍少之又少,并且标准不统一,借鉴意义不大,所以省略了这部分规范的编写。

C 6条回复 评论
wyj

上完课拿到想要的offer了!!谢谢大拿老师!

发表于 2021-12-26 21:00:00
0 0
你是闰土我是猹

感谢分享!!!!

发表于 2021-11-30 22:00:00
0 0
鹜落霜洲

只有懂得基本原理和协议规范的程序员才能摆脱搬砖码农这个束缚。

发表于 2021-09-12 18:40:00
0 0
墨色槐

写的不错 共勉~,最近也在开始写博客。大佬们来翻牌啊!

发表于 2021-09-11 09:40:00
0 0
上帝之手028

终于弄懂这个知识点了!!!

发表于 2021-09-10 19:25:00
0 0
嘉名

这节课还挺好懂的

发表于 2021-09-10 10:30:00
0 0