ui设计规范模板-UI设计规范,方法,一致性要全部遵守么

对于UI设计师而言,在设计中掌握并遵循一定的设计规范是非常重要的,这样不仅可以提升工作效率,还能减少设计工作中的失误。但是很多新手UI设计师并不了解这些规范,下面,就给大家介绍一下,在杭州UI设计学习要遵守哪些设计规范。

一、提前开发在设计工作进行中,设计师可能会面临一些突发情况,因此对于一些我们经常用到的,如颜色、分割线、tab、表单等组件,如果提前设计统一好,能大大减少重复性设计,让设计师专注提高设计的质量。二、明确设计原则UI设计师需要知道的是,我们产品需要传递给用户的设计特征和原则是什么,以及相关平台的基本设计规范是什么。并且需要根据基本规范进行后续的设计工作,尽可能做出和基本原则比较匹配的UI设计。三、多平台统一我们现在处于一个各种设备的时代,各种屏幕尺寸、平板电脑、笔记本、各种安卓机器,各种厂商自定义的系统等等,我们的设计需要在这些平台上运行,就必须保证设计的统一性,使之看起来更加一致。四、一致性在整个平台中创造一致性,颜色、按钮、字体、品牌一致性,能够让用户在实际的操作过程中更具安全感与熟悉感,同时能够帮助解决设计师因为个人特征导致界面不统一问题,从而提升UI界面的整体效果。

综上所述,设计师不仅需要保证界面的一致性,还要保证设计的多平台统一,并且在一定程度上明确设计的基本原则,提前做好设计组件准备工作,从而提升设计的准确性,减少不必要的设计难题。

智能设备的普及使得界面设计工作被重视起来,其实软件界面设计就像工业产品中的工业造型设计一样,是产品的重要卖点,一个产品拥有美观的界面会给人带来舒适的视觉享受,拉近人与商品的距离,是建立在科学性之上的艺术设计,那么,UI设计的规范标准有哪些呢?

一、轴

轴在UI设计中是最基本、最常见的概念,也是用来组织界面结构的重要核心。简单说来,轴是在设计的时候组织一系列元素的假象线,在下面的设计图中,轴以虚线的方式被标注出来。

1、对齐轴最常见于对称元素的使用,当元素被布置成轴对称的布局的时候,会给人有序感。就像生活中绝大多数的事情一样,我们更倾向于享受有序的的东西,它们令人感觉平稳、舒适、平易近人。最简单的一个例子就是iTunes程序中的专辑列表的设计,所有的专辑列表在界面的左侧保持对齐,围绕虚线轴轴对称。

2、强化虽然轴是一条假想的线,但是如果周围的元素的边缘控制得足够整齐,这跳线会在视觉中变得更加“明显”的。最好的例子是城市中的路灯构成了道路两旁建筑物之间的轴,如果一边有建筑一边没有,那么这种轴线的感觉不会那么强烈。从产品设计的角度上来看,Twitter的时间线设计就是一个很好的案例,左侧的头像和右侧的推文共同塑造出缝隙中轴线的感觉。3、运动当我们碰到某先线条的时候,视觉会很自然地沿着这些方向运动,就如同我们站在街上,会自觉地沿着街道的两头走动。两个端点决定了线,界定了开始和结束的地方,线或者说轴线的存在会引导和提示运动的方向。SoundCloud中,音轨沿着一条既定的水平轴线运动,随着音乐的播放,音轨自然地自左向右匀速运动(具体可查看马海祥博客《如何利用动效设计吸引访客的注意力》的相关介绍)。

4、连续性如果终点是不确定的,那么你通常会沿着轴线的方向浏览/运动,直到你找到感兴趣的东西,或者感到厌倦并关闭应用。在建筑学中,未清楚界定的终点非常少见,因为建筑的修建通常没法永远持续下去,但是UI设计则不一样,无限地滚动下去是无比受欢迎的设计手法。Pinterest的APP中就是这样做的,持续不断的图片沿着中轴线的方向持续不断地滚动下去,只要你有兴趣一直观看下去。

二、对称

当元素被均匀地放置在轴线的两侧之时,他们构成了对称的关系。当元素被精准地在轴线两侧一一对应之时,它们就形成了完美对称。

1、平衡对称令整个设计更加平衡,当元素与控件在轴线两侧处于相同位置之时,会给人以协调和谐的设计感。当我们在规划街道两侧的房屋建设的时候,如果左右两侧都是5间大小一致的房子,当你走在街上的时候这种平衡的设计会令人非常舒适,这是平衡给人的感受。Rdio的APP设计就遵循着这样的设计规则,屏幕两侧的控件是相同的规格,这类布局很适宜阅读,用户会自觉地自上到下,从左向右查看。

2、不对称如果轴线两侧的控件布置不再是一一对应尺寸相近,那就是不对称的设计,不对称的设计会给人明显的失衡感,可能会令人不舒服,但是也能造就残缺美,当然这要看你具体怎么做。虽然Pinteret的APP设计在整体上是沿着中轴线对称的(宽度一致),但是两边的界面控件并非是对称的,它们的高度并不一致,位置也是错落的,稍微一点的落差都会被眼睛捕捉到,而这样的差异让用户无法准确地左右顺序阅读,不对称设计打破了设计的平衡性和舒适性,但是也可以缓解了规律性设计带来的视觉疲劳。

三、层级

当某个元素出现在比其他元素更重要的位置的时候,层级就出现了。

1、尺寸如果一个设计元素在尺寸上比其他的控件更大,就会区分出层级。毫无疑问,我们查看某个设计的时候,通常会被最大的元素吸引到。如果一个建筑物有5个出窗户,其中一个是其他四个的两倍大,我们的注意力自然而然会被吸引过去。通过尺寸来区分文章列表层级的典型就是稍后读应用Pocket,顶部的轮播文章拥有更大的图片,它的位置和尺寸会令我们一眼注意到(具体可查看马海祥博客《详解移动端设备页面尺寸设计原理》的相关介绍)。

2、形状如果一个控件在形状和形态上同其他的不一样,也可以让它独立出一个层级,不规则的设计同样会令人侧目,建筑物的正面拥有五个相同的窗户和一闪大门,你会立刻注意到门的独特之处。在Instagram的个人信息页中,圆形的个人头像在方形的图片中别具一格,非常抓人眼球。它会让人意识到,这个独特的东西,更为重要。

3、位置位置的存在同样能彰显层级的不一样,在圆圈之内,中心位置的东西比边缘部分的看起来更重要,位于轴线顶端的控件会显得比其他部分的优先级更高。以设计应用Path的设计为例,时间轴顶点处的用户头像就明显比时间轴上的其他部分更重要,而这个地方正好展示的也是用户头像。

四、韵律

UI设计和建筑设计同样有着韵律之美,重复的模式会营造出独特的节奏之美。

1、模式理解韵律最直接的方式就是听歌,音乐拥有节奏感,绝大多数的音乐遵循着相同的节拍,节拍就是音乐模式的一部分。这方面最典型的APP是Airbnb,APP列表中每一间房子都占据一个模块,模块中有着大小相同的图片,价格、位置和房东信息和图片的相对位置一定,且排版匀称舒服,两个模块之间的间距也相同,当你浏览的时候,熟悉的节奏会让你清楚地知道上哪看关键信息。

2、间断当节奏被间隔打断的时候,会形成不同的层级,听歌的时候,均匀的节奏被其他的音乐元素打断的时候,你会意识到这是比较特别的部分。在Twitter的APP中,推文和推文保持着相同的样式,均匀的节奏,但是其中的“推荐用户”一项有着不同的样式,它插入到推文列表中,打破了整个信息流的节奏,凸显出不同的层级,会很快抓住你的注意力。

设计规范对于设计师来说并不陌生,日常工作中也经常使用。统一的设计规范不仅有利于设计师提升效率,同样可以帮助产品、开发、运营、测试等相关人员对产品的体验有更好的认知。

什么是UI设计规范

通俗来说,设计规范是围绕在某种风格或者大型设计项目下形成可视化、数据化的标准,针对相对独立的体系建立的统一遵守条款。

UI即UserInterface(用户界面),UI设计规范是基于用户界面产品而制定的一套可复用设计库,也是为了方便设计师、开发和测试人员共同协作,而遵循的规律和法则。

产品要有可遵循的标准来规范视觉呈现和元素定义,保证日后的迭代可以延续产品所传递的思想和价值,能最大限度保证产品的一致性。

为什么要做设计规范

统一产品风格

对于同一个产品的多个页面来说,统一的设计规范能够使得产品视觉风格保持一致。同时可以保障良好的用户体验。

一个大型项目的视觉稿,往往会有几十个甚至是上百个页面。哪怕自己一手包办全部页面,恐怕也很难统一各个控件的样式,因为在设计过程中很容易产生细微的出入,时间长了也会忘记部分参数,导致每个控件都可能会有细微的差别。

更何况多个设计师共同合作,如果没有及时制定规范,每个人自由发挥,同一个控件便会出现不同的样式。

例:同一个产品中,设计师A的按钮是2px圆角,设计师B的按钮做成了8px,同时设计师C页面的按钮又做成了全圆角。

提高开发效率、解决代码冗余问题

通过设计规范,程序员可以了解到哪些控件是可以一次性写好并能重复调用,同时在规范的辅助下,程序员在搭建全局共用元素时规则更会加清晰。

例如icon、按钮、行间距、字体大小、色值等等。这样既可以提高开发效率,又可以减少客户端安装包的大小。

帮助新人快速上手

当新人刚加入团队时,对产品的风格和基调可能不太熟悉或者理解不透,可能无法快速进入设计工作,这时设计规范就可以帮他们快速上手,提高工作效率,并且也能保持产品风格和控件的统一性。

如何制定UI设计规范

第1步:明确设计原则

设计师要清楚的知道,产品需要传递给用户的设计特征和原则是什么,以及整个平台的约束是什么。

在facebook的设计语言原则里面,强调了他们的设计价值观:通用、人性、干净、统一、有用、快速、透明,在facebook所有设计中,都将这些要点作为他们设计的指导准则。

苹果的设计规范包括:完整性、一致性、直接操作、反馈、隐喻、用户控制等。

设计语言系统可以让产品在不同终端、不同场景中的表现保持一致性,也有机会通过植入品牌基因的方式形成视觉锤,提升产品的识别度以及消费者对品牌的认知。

因此,我们在建立设计规范的第一步,是根据公司战略布局,结合此产品的终极目标和产品定位,建立设计准则,明确设计原则,以保证整个设计体系的高效率和一致性,并以此来检验设计的标准性,为具体的设计问题提供解决方案。

第2步:制定基础规范

任何一款产品都需要制定基础规范来保持整体的一致性。基础规范包含栅格系统、色彩、字体等最基础的内容,此次以移动端为例来进行说明:

栅格系统

建立横向栅格系统,常用的是12栅格,12栅格比较好的地方能够同时被2、3、4整除。因此能够根据具体需求灵活的设计各种模块。当然如果产品比较轻量化,可以根据需求设置6、4甚至2栅格等。

还有一种是网格系统,制定最小的设计单位,界面中所有间距必须采用最小单位的倍数,包括模块之间的间距、文本之间的间距等。比如制定最小单位为4,那么排版时横向和纵向的间距都是4的倍数,比如8,12,24。根据最小单位制定间距,包括模块之间间距、文本之间间距等。

色彩

色彩规范要标明色彩的色值和使用范围,包含主色、辅助色、状态用色、文本色等。

如果使用到渐变色,需要标注渐变色的色值和角度。

夜间模式需要额外注明日间和夜间模式下各个颜色的对应色值。

字体

字体规范需要提取出各个场景下用到的字号,加以整理和说明,需要让其他设计师清晰的理解什么样的场景用什么样的字号。各个字号的行高也需要标明,否则容易出现参差不齐的行间距,影响阅读体验。

第3步:制定控件规范

控件相当于由色彩、文字、图形等组成的一个个小元素,遵循基础规范,包含图标、按钮、标签、分页器、气泡、提示框等。控件部分已经是一个比较庞大的内容,所以以下我只做一小部分的示范。

图标

为保证不同形状的图标在视觉上保持大小一致,需要制作一个图标绘制模板和图标制作说明。说明中标明图标的圆角、描边的粗细等。

按钮

按钮根据主次关系,通常分几种不同的尺寸与类型,需要标明在什么样的场景下使用哪一种按钮。按钮的颜色、字体字号都遵循该产品的色彩规范、字体规范。按钮通常有三种状态:常规状态、点击状态和失效状态,部分情况下可能会存在加载状态,因此需要标明按钮在这些状态下的样式。

第4步:制定组件规范

组件由多个控件组合而成,因此需要在基础规范和控件规范比较完善的情况下再去制定。组件通常包含导航、表单、弹窗、浮层、加载、缺省状态等。同样以下只做一小部分的示范。

导航

导航分为顶部导航栏、底部导航栏、分段器、楼层定位等。

以顶部导航栏为例,标题需要注意文字的极限值,图标位置和间距要考虑最小可点击区域,热区之间不能重叠。

UI设计规范注意点

规范建立时机

规则从无到有的制定并非一日完成的,也并非先制定了设计规范再着手进行界面改动,两者应该同时进行。

在经过一次版本升级后,才有一个确定的设计规范,否则很可能被所谓的规范束缚住手脚,到头来还是东拼西凑毫无可遵循的标准可言,那制定设计规范的意义就不存在了。

最佳时机是在完成风格定位后开始着手基础规范和控件规范,根据基础控件进行其他页面拓展,然后建立组件规范,并后期逐步完善规范,这样可以承上启下高效完成工作。

规范的尺度与范围

有时做新页面,如果很死板的100%遵循规范,做出来的视觉效果可能不是很好,太过全面的规范会影响设计师发挥。

一些特殊场景下,规范需要灵活变通。

例:部分强烈营销活动场景中,顶部导航、主内容的上下左右间隔可遵循统一的设计规范,其他根据不同场景进行了自由发挥,从而给用户带来截然不同的视觉感受。

优秀的设计规范既能统一方向和基本参数,又能预留无数的可能性来保证扩展性。因此适当地把控好设计规范的尺度与范围,需要在制定规范的过程中,将必须遵循的部分需要进行详细说明。

及时迭代规范

在完成v1.0版规范后,产品还会一直迭代,产品改版过程中必定会不断优化设计。因此,在产品迭代过程中需要对旧规范进行更新优化,不合适的、过时的规范需要及时同步归纳,并及时通知到项目相关人员。要不然,陈旧的规范无法帮助设计工作的开展,反而会造成一种负面影响。