ui设计规范.pptx

UI设计规范为什么要建立规范用户体验一致塑造品牌感利于多人协作方便维护和更新,减少冗余内容如何建立规范·整理产品的组件和复用的内容1基础规范(栅格间距基础网格 颜色字体)2 组件规范(按钮、导航、弹框、缺省图、标签、列表、卡片等等)为什么要建立设计规范?,提高效率在多人团队里,通常不同的设计师负责不同的流程,如果没有设计规范,不同的设计师就会对相同的组件做出不同的方案。产生大量重复工作,效率比较低。而制作设计规范和UIKIT之后,则可以直接利用KIT里的组件快速搭建好页面,把设计师从基础工作中释放出来,大大提升设计效率。,塑造品牌感制作和遵循设计规范,能够保证整个产品的交互效果和视觉风格、乃至文案的统一性,提升用户的体验。,方便维护和更新同类内容使用一样的组件,能够降低输出的内容量,减少冗余的控件和代码。同时也便于维护,在迭代时进行统一的更新和应用。 方便设计团队和其他团队交接,如果团队有人员变动,也方便后续入职的同事能够通过规范迅速熟悉产品,快速上手。规范的适用范围前面的文章我提到过,如果产品处于启动期的话,这个时候最重要的事情是圈到第一波用户,让自己活下去。在这个阶段产品会频繁的改版、验证,迭代非常快,整个团队可能都处于拼命加班的状态。在这种情况下做设计规范文档显然事倍功半,一个是浪费人力资源,另外就算做了,在频繁更新的背景下也很难去执行。因此设计规范文档更适合于那些跨越0-1阶段的产品,这个时候产品已经用有了一定的用户,团队也会扩张。这个时候我们可以选择制作基础的设计规范,比如栅格、配色、字体、图标规范等等。对于成熟期的产品来说,大版本更新的周期是非常长的,这个阶段通常会制作更为详细的设计指南、设计原则、do&don’t、品牌书、图标手册等等。,所以首先需要确定设计的基准尺寸,是基于iphone8?还是iphone8P?或者1080*1920等等……每个公司设计稿的基准都不一样,我们是以一倍图为基准进行设计的,所以我这里的基准尺寸就是375*667,单位为pt。栅格一种情况是制定网格系统,网格系统的话首先要制定最小的设计单位,比如淘宝的最小单位是3,掌阅的最小单位是4,airbnb的最小单位是6……定好最小设计单位之后,界面中所有间距采用最小单位的倍数。假定我们最小单位4的网格,排版时横向和纵向的间距都是4的倍数,比如8、12、24。第二种情况是可以直接建立横向栅格系统,常用的是12栅格,12栅格比较好的地方是能够同时被2、3、4整除,因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化,是不需要这么复杂的栅格的,可以根据需求设置6、4甚至2栅格等等。色彩规范主要表明色彩的色值和使用范围,一般会从品牌色、辅助色、基础色、状态用色等等。如右图所示。重要内容和正文内容要保证文本的可识别度,文本和背景色的对比度需要达到3:1。大家可以通过https:///resources/contrastchecker/ 的颜色对比检查器来核对颜色。这里的品牌色和强调色对比度为3::1,而辅助颜色(比如标签)的对比度则在2-3之间。如果产品常用到渐变的话,需要注明渐变的角度以及渐变色的色值。包括产品如果有夜间模式的话,要额外注明日间和夜间模式下各个颜色的对应色值。当然这里的夜间模式说的是真·夜间,而不是微博那种直接加一个黑色透明度蒙层的伪·夜间。。需要注意的是,要标注上应用场景方便其他人理解。不然其他成员也并不知道到底什么时候应用一级标题、什么时候用二级标题。