Bsport体育:新版UI设计规范(完整版)
栏目:公司新闻 发布时间:2024-02-14
 无论是学习Sketch,还是搜插件、Bsport体育找素材,都是Sketch使用者的优选项。  Sketch是OS X平占,需要下载Sketch可以到这个网站去下载。  我个人是很推荐使用Sketch做UI设计的,软件本身已经提供了大量的IOS和Android系统设计资源,配合各类插件,几乎无所不能。  相比于Sketch来说,体型胖了点,在UI设计上略逊一筹。不过因为Sketch是OS X独

  无论是学习Sketch,还是搜插件、Bsport体育找素材,都是Sketch使用者的优选项。

  Sketch是OS X平占,需要下载Sketch可以到这个网站去下载。

  我个人是很推荐使用Sketch做UI设计的,软件本身已经提供了大量的IOS和Android系统设计资源,配合各类插件,几乎无所不能。

  相比于Sketch来说,体型胖了点,在UI设计上略逊一筹。不过因为Sketch是OS X独占,所以因为平台限制的原因,用PS设计也没有问题。

  全称为Adobe Experience Design;这是一款集原型、设计和交互于一体的小清新时代风格的设计软件。虽然有人说,Adobe XD将会是Skech的劲敌。然而在windows系统当中,Adobe XD的确是产品原型设计领域最顺手的设计软件。它使用简单,界面整洁,虽然之前一直使用的是Axure 8.0,但看来,Adobe XD在界面、素材以及设计操作上的确甩了Axure好几条街,至少它成功的吸引到了我。

Bsport体育:新版UI设计规范(完整版)

  合理规划好设计版本,进行明确的文件归档工作,有助于提高设计师的工作效率。

  手机屏幕的像素点数。比如750*1334、720*1280等等,细分还有物理分辨率和逻辑分辨率,这里不扩展讲解了,想了解自行百度吧。

  手机对角线的物理尺寸,单位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……

  下面是屏幕密度的计算方法,范例是5英寸,分辨率为1920*1080的手机:

  屏幕密度牵扯最多的是安卓系统,安卓手机屏幕本身的密度种类非常多,这也是导致了安卓系统需要提供多套切图的原因。(使用SVG格式图片可以解决多套切图和适配的问题,这个我们下面会提到)

  这里有持续更新的最新设计规范和资源模板,虽然是全英文的,但并不影响阅读。

  设计师应该学会从官方获得设计资料,这比其他途径获得的资料更加全面和权威。

  只推荐750*1334的尺寸来做设计稿,这是向上向下都最容易适配的尺寸,包括用这个尺寸去适配Android版。

  除了IPhone X的比例特殊外,其他的IPhone比例几乎差不多的,比较容易适配。

  APP应用图标,建议使用1024*1024尺寸去做,逐级缩小去应用到各种场景中。

  SKetch已经提供了IOS和Android系统的APP尺寸图标模板,直接使用就可以了。

  程序内部的功能界面:这种界面通过写成自适应的界面可以很好的适配各种机型;如果有特殊的布局要求,也可以让开发根据特定机型去调整,不需要单独为各类机型再做设计稿。

  覆盖全屏类的界面:比如闪屏、启动页、引导界面、插画页面等等,这类覆盖全屏的界面必须要单独为IPhone X的比例重新绘制或者调整设计稿。

  其他的IPhone机型,遇到这种界面,整体放大缩小、微调之后按照各机型的设计尺寸输出对应的切图就可以了。

  IPhone X的安全区域:IPhone X的安全区域就是扣除顶部刘海状态栏和底部虚拟home键之后,中间的内容显示区域。如果你不得不使用IPhoneX的尺寸做设计稿,请一定设置好参考线,不要把内容做进这两块区域内部。

  下图是IOS开发工具Xcode里的一个空白页面,图片的文字标注请仔细阅读。

  本质上,开发写APP界面和设计做设计稿是一样的,只不过两者实现方法不同。

  在Xcode里都有对应的控件,设计元素必须使用对应控件,才能在APP的界面里显示出来。

  至于标注在上篇文章有详解:一款APP从设计到切图标注适配全记录,这里就不累赘了!

  如今使用本地化插件Sketch Measure,几乎不用手工标注,标注导出HTML后,扔给开发,他们想看什么属性自己点击查看就是了,所以我们这里了解下标注原理就行。

  而一些线上工具的插件,比如蓝湖、墨刀等等,功能更加丰富,各位根据自身情况灵活运用吧。

  IOS目前常用的还是输出2套PNG图片。@2x、@3x的后缀,是为了在Xcode导入图片资源时,识别对应机型所用的图片。

  WebP 安卓的图片格式,同等质量图片积非常小,非常推荐给安卓使用;

  前提:同一类型、位置的切图,请保证切图尺寸、规格一致,图片尺寸为偶数大小。

  但对开发来说,可操作和不可操作的图标是两种类型的控件,图标的样式不过是传给该控件的显示图片罢了。

  对控件来说,如果不在代码里明确固定控件的大小、点击区域等等各类属性,设计师传给我多大的图,这个控件就会被这张图撑到多大。

  你给我一张40*40的按钮切图,如果开发什么都不做,那这个UIButton在手机界面里就被撑到40*40的大小。

  我也可以在Xcode里写几行代码,固定图片的大小就是40*40,扩大UIButton这个控件的大小变成88*88,这样这个控件的点击区域也扩大了。

  这类切图,对应的是UIImageView控件,就是一张图片,无操作,只是占位和显示。

  有朋友问:一定要切正方形的吗?如果图标都是30*20的,那我统一切30*20的行不行

  答案是:可以,这个没有完全的硬性规定。虽然我是设计师,但也会去写一些IOS程序。正方形规格切图就是为了方便开发,当然还是推荐你使用正方形规格来切图。

  不要使用中文、特殊字符,请使用英文、下划线、数字对切图命名,数字不要打头。

  Android不整理各类机型的尺寸规范了,数据零散,难以整理。所以我们从屏幕密度这里理解设计规范就可以了。

  上文我们提过屏幕密度的计算方式,安卓手机因为各种屏幕尺寸和分辨率,导致如果单纯按照数值计算,可能屏幕密度种类会多到让设计师崩溃。

  所以为了解决这个问题,安卓手机出厂时,屏幕有自己初始的固定密度,系统会根据这些屏幕密度自行适配,下图是对应的屏幕密度表:

  正因为Android手机分辨率多样,为了保证同一设计在不同屏幕密度的手机上显示效果一致,Android系统使用了下面两个单位:

  dp:android开发单位,相当于比例换算单位。使用该单位,可以保证控件在不同密度的屏幕上按照比例解析显示成相同视觉效果;

  sp:android开发文字单位,和dp类似,也是为了保证文字在不同密度的屏幕上显示相同的效果。

  按照上面两个公式的换算,同样dp大小的图片在不同屏幕密度的手机上如下图所示,

  通过上面的分析,在xHDPI这个密度等级下,倍数关系为2,推荐使用720*1280尺寸做设计稿,换算方便,适配容易。

  不过目前的现状是,如果公司的产品有IOS和Android两个版本,基本上设计师只会做IOS的版本,然后套用给Android,这样做也是可以的。两者的切图,在这个设计尺寸之下是可以通用的。

  推荐使用dp和sp进行标注。但是呢,如果你用720*1280做设计,使用像素单位标注,现在也不会影响什么。

  理论上,对于Android系统来说,如果你想完美适配各种机型,应该为不同的屏幕密度提供不同尺寸大小的切图,而Android的开发工具也为不同的屏幕密度提供了对应的资源文件夹。

  但实际上,并不需要提供上面密度表那么多套的切图,程序安装包的大小基本就是由于图片占用了太多的位置。

  所以需要提供多少套图片,请和公司的开发沟通,确定你们的产品实际支持哪些屏幕密度。

  我个人是推荐现在为Android系统使用WebP格式,体积小,显示效果好;

  而SVG这种矢量图片格式完美解决了Android多套切图的问题,一套切图,完美适配各种屏幕密度。

  48dp:这和IOS的最小点击区域性质是一样的,都是考虑到手指点击的灵敏性的问题,设计可点击控件的时候要考虑到这一点。

  如今的移动UI设计行业已经很成熟了,针对移动UI设计的便捷工具层出不穷;移动UI设计的理论体系知识也已经渐渐完善。但这些都是外部因素,社会发展了,我们跟着一起向前适应就好了;

  但对于设计师工作能力的提升,还需要有明确的方法体系,更要有清晰的职业规划!

  目前我工作5年,就从我自身的体会来分享我自己的方式,当然资深的、精英设计就别跟我较线%还在向上努力爬的普通设计师~

  工作能力,不仅仅指的是自身的专业技术水平,还包含了各种综合性能力,请务必对自己有明确的职业规划和能力发展轨迹。

  这个阶段对于新人来说,是一个设计能力和工作经验的快速积累过程,不夸张的说,这两年内的经验可以决定你之后的职业发展道路是否顺利。

  这个阶段就别想着一专多能了,先把那个“一专”搞好就可以了,当然不是不让你学习别的知识,而是说重心应该发在提升目前的专业能力上。

  另一方面,业余时间务必进行大量的作品练习,无论是临摹、还是重设计都可以,目的就是一个:量大 从优!

  临摹请用高质量作品,临摹一堆垃圾还不如不做,临摹请务必做到99%以上的相似度,不然那不叫临摹,临摹的过程是考验软件功力、设计技法能否完美复制的过程。

  重设计请使用成熟知名产品,不要重设计一堆垃圾应用,成熟产品每个界面的布局、样式、功能、逻辑都是经过深思熟虑后呈现给你的。

  人人都是PM、UI中国、25学堂等等很多这类网站都是学习理论知识的好地方。

  通过前两年的积累,对于UI设计本职工作已经可以胜任了,接下来的要考虑的是个人的职业发展规划了。

  这个阶段可以考虑“一专多能”的多能了,作为UI设计师,可以学习的东西实在太多了,交互、动效、产品设计、开发等等。

  不要求你达到那些专业从业者的地步,你要学到专业程度,还干什么UI设计啊。

  目的是为了拓展自己的技能树,为自己提供更多的竞争力,这个习惯要一直保持伴随之后的工作……

  设计师最怕的就是迷茫,如果说前两年因为刚入行,对行业,对自身都不完全了解,那情有可原。但工作两年后,对自身的情况再不清醒那就说不过去了。

  是始终坚持在一线岗位的设计技术大牛,还是想做设计管理者,亦或者想从UI设计师转职成交互设计、产品设计等等。

  工作两年已经对自身,对行业有理解了,自己的能力是否适合设计岗位,对设计的热爱是否能经久不变都可以作为参考调节了。

  这阶段可以为大厂准备一下,当然不是让你工作两年多就去面试啊,如果你的能力特别突出,就当我放屁吧~

  千万别以为就在小公司将就着干吧,反正拿的钱也差不多,大公司的滋味你是体会不到的。

  拿同样的薪水,在小公司和大公司的感受可是完全不同的,小公司对个人的眼界、人脉、能力提升的帮助都不可能和大公司相提并论。

  3到5年的设计师,如果你真的用心工作了,一个人可以实实在在的顶起来一个项目。

  我们上面说,为进入大厂做准备。在这个阶段,可以考虑进入一些中大型企业,提升个人的综合能力、拓展人脉。

  部分企业也比较喜欢要这个阶段的设计师,有工作能力,职业道路又刚开始,搞不好可以在公司培养起来。

  说实话,即使是互联网行业,搞技术除了要保证自身技术过硬之外,会不会发展人脉,能不能提升综合能力才是最后职业道路能不能走远走高的决定因素。

  与各部门的沟通能力、对设计资源的协调能力、在公司业务上的话语能力、对项目的把控能力等等,都算综合能力,这是对内部的能力。

  这样的设计师,也许你可以踏踏实实当个接需求的小设计,但你永远也只是一个这类的设计,对于有更高更强的职业追求的人来说,没有帮助。

  所以,张开嘴、迈开腿,一步一步尝试去推动自身进步吧,这个没什么技术性方法,必须要自己亲自去做。

  人脉对个人职业道路的帮助,远远要比专业能力的帮助要大的多,这是对外的能力。

  设计师的圈子,说实话不算大。搞技术的,本身就坐办公室,而做设计的人本身性格也有一部分原因,但还是请你努力拓展自己的人脉。

  对于自身的专业圈子,努力分享自己的设计经验、工作心得,总结自己的体会,发布到各类设计专业论坛上,积极的帮助别人,这都算一种拓展方式。

  时间久了,就会结识非常多的设计界朋友,设计大牛也会逐渐注意到你,这些都是你职业道路上的宝贵资源。

  这也是我写的最后一篇关于基础规范类文章,也算是整理一下工作到现在的基础常识类内容,以后不再写这类基础文章了。

  以后发的内容都是我做过的实际商业项目,我会把设计经验和工作方法融入到这些作品实例里来写,这总比我单纯讲理论知识要强。

  全链路UI设计师了解一下万字干货!这可能是最全面的交互基础知识总结近两万字的干货!最全面的网页设计基础知识全攻略