新手UI设计师入门基础
01 手机规格规范
Ios系统和安卓系统都提供了一些固定的官方组件规范。遵循其官方组件规范,可以极大提高设计和开发效率,同时降低用户的学习成本。其中最常见的规范化组件包括顶部的状态栏、导航栏、底部标签栏和工具栏。
Iphone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。
状态栏
ios 是 20pt, 安卓是24dp。
导航栏
ios 是 44pt&88px, 安卓是56dp。
标签栏
ios 的高度是 49pt&88px, 安卓标签栏的高度是48dp。
工具栏
工具栏的高度是 44pt&88px,安卓是 48dp 。
ios 中最小点击区域是 88px,因为苹果在纵向尺寸上把 22px 作为一个基础单元,物理尺寸最小空间的高度为 22乘4等于88px,为手指触摸最小的高度。因此导航栏、标签栏、列表、搜索栏和按钮的高度都是 88px,导航栏和标签栏图标为 44px,元素与元素之间的最小间距是 22px。
02 色彩设计规范
我们通过颜色—联想到景象—从而产生情绪,因为色彩本身是没有情感的,我们之所以能感受到色彩的情感,是因为长期生活照一个色彩环境中,积累了许多视觉经验,这些经验与某种色彩刺激呼应时,就会激发某种情绪。
这样的色彩的运用在ui设计中由衷的体现如在电商app中大面积运用的红色(天猫、拼多多、京东)办公工具类软件运用的蓝色(钉钉、支付宝、企查查)。
在确定主颜色之后如何运用色彩呢?以 Ant Design 为例,设计师需要根据调色板上的色值来进行设计稿的制作,而程序员在缺乏设计稿的时候也可以直接在调色板上取色。一般来说在进行设计稿制作的时候,直接使用 Ant Design 的一种基本色彩或与基本色彩相近的颜色作为主色,主色的渐变色可以用于组件的特殊状态,如 hover/active 状态。
选取一个主色作为 5 号色,将主色与纯白色(#fff)混合,主色与纯白色之间分成 100 份, 20/40/60/80 的位置分别分割,得到 4/3/2/1 号色;
将主色与纯黑色(#000)混合,主色与纯黑色之间分成 100 份, 20/40/60/80 的位置分别分割,得到 6/7/8/9 号色;
通过以上方式得到一条完整渐变色板,在选更加深一号的6号色为按钮色3号不可触摸色,7号色为按下色增加整体的连贯性。
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到,合理地选择中性色能够令页面信息具备良好的主次关系,助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。
03 文字排版设计规范
通过合理使用不同的字重、字号和颜色来强调界面中的重要信息,选用字体时需要注意字体保证更高效、清晰等特点。尽可能使用单种字体使得整体界面保持干净和整体性,且在字体使用时要保证满足无障碍阅读的最低标准。
字体
苹果系统中默认的字体是:苹方字体,其中数字字体比较好的字体可以用:Dinner 字体。安卓系统默认的中文字体是:思源黑体。 英文字体是:Roboto 字体。字体的颜色和粗细也大有讲究,标题等文字就是粗体,一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息,进行信息层级的划分。字体颜色很少采用纯黑色,一般用的是深灰色和浅灰色。
行高 行高会影响阅读的体验,英文的基本行高通常是字号的1.2倍左右;中文的基本行高通常是字号的1.45~1.5倍左右。
字号
Headline 1 36px 40pxMedium 导航栏标题,重要标题Headline 2 32px Medium 主层级标题、二级标题Headline 3 28px Medium 三级标题、次级标题Paragraph1 28px Regular 文本内容,控件文字Paragraph2 24px Regular 大部分内容,辅助文字Paragraph3 22px Regular 部分特殊辅助文字说明文字
注:说明文字一般不会小于22,再小就将影响文字的阅读性。
在同一个系统的 UI 设计中先建立体系化的设计思路,对主、次、辅助、标题、展示等类别的字体做统一的规划,再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性,提高字体应用的性价比,减少不必要的样式浪费。
04 UI设计中的排版
由于列跟水槽的宽度是以网格作为基本单位来增加或者减小,所以栅格化的重要一步就是需要先定义好栅格的原子单位“网格”的大小。我们也可以利用 相同网格法来制定产品中的间距,建立相同的间距为一个单位的网格,使用单位的倍数来定义模块的间距与元素的尺寸。
App通常不会超过6列,以750*1624为例,如果边距为40、间距为20,划分成6列,则每列为95,较ios最小点击范围(88px)大一点,如果划分为7列,则每列为78,这么小的尺寸将会影响用户的点击操作。
八倍间距的应用
目前主流桌面设备的屏幕分辨率在竖直与水平方向基本都可以被8整除,使用8作为最小原子足够普适。可以确保不同布局之间的视觉一致性,同时可以灵活的适配多种尺寸的设计。以8为单位符合“偶数原则”。偶数原则可以在页面缩放中最大程度的避免类似于0.5、0.75、1.25等次像素的出现,从而使页面各类元素在大多数场景下都能有比较精致的细节表现。
在网格系统中应该更加注重的是间距,而间距要遵循网格系统(例如使用 4、8、16、24、32 等和 8 具有规律的数字)同时在产品中的各类元素也要遵循这类原则(例如图标大小、组件大小等)。所以布局的水平和垂直节奏和各个组件的节奏会相互重叠,整体的设计将更加完整。
那么假设我们以8为基准的去延展系统间距,得到如下间距系统:8、16、24、32、40、48、56、64、72、80、88、96、192等,这里都是8的倍数或能被 8 整除。
开发工程师使用的前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计,因此如果设计师也使用以8为基本单位的栅格系统,开发与设计师相互对接就会更加方便,开发实现页面时也能更高品质的去还原我们的设计。
包括设计中的提示选项也可以用8为单位的栅格系统为基础原则去设计。
UI页面布局的格式塔原理
格式塔心理学诞生于1912年,是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的:我们的视觉系统自动对视觉输入构建结构,并在神经系统层面上感知形状、图形和物体,而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt,因此这些理论也称做视觉感知的格式塔原理。
创始人提出的5项基本原则:简单、接近、相似、连续、封闭。
其中相似原则指的是在某一方面相似的各部分趋于组成整体,强调内容。而接近强调位置。人们通常把那些明显具有共同特性(如形状、运动、方向、颜色等)的事物组合在一起。
由上图可见,当用户看到这个这个页面的时候,会自觉的把上面5个icon看作一个整体,因为他们的颜色形状都是相同的;文字颜色与字体大小相同会被自然的看作成为一个相同的功能,如同样的红色都是价格,同样的黑色都是商品名称;相同的汽车图片直接清洗的都可以归类为同列表商品。
05 UI设计中的图标原则
在一个APP中会有许多多的图标,他们根据产品需要被设计成不同的尺寸,不同的颜色,不同的风格,有的出现在导航栏中,有的出现在标签栏中,有的则出现在界面内容中。因此我们要花心思来设计如何让图标设计在APP中得到更好的运用。
为了保持图标元素的平衡,尺寸大小需要保持一致,通常我们会建立基础网格尺寸进行图标的绘制,常见的网格尺寸有 16、24、36、48、64、128、512、1024,这些网格尺寸并非固定,也会根据设计中的特殊尺寸而变化。
当一个界面完全由文本构成时,用户被迫阅读每个文字来找到自己想要的信息。而引入图标后,降低了用户的认知负荷,帮助用户更快导航,提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时,也为用户带来了连贯一致的使用体验。
作为一款完整独立的app设计,需要保证整个设计的完整性与独特性,因为这个是给新手设计师写的文章,在这里着重以完整性进行讲解。
所谓整个app的完整性原则,需要保证整个设计整体系统的完整,统一的用色规范、统一的圆角角度、统一的icon形状、统一的icon的粗细与视觉大小。
线性图标主要是通过线条描边勾勒出来的图形,在界面中的尺寸普遍偏小,其线条不能过于复杂,否则将会影响辨识度,看似不多的简单线条搭配不同的色彩,则有很大的调整空间。
同样绘制图标时不宜过于纤细,否则用户难以识别,对图标的局部进行填充同一的颜色,行程统一的色彩联系,通常是提取品牌色。
扁平风格图标主要是由形状的描边、填充进行各种组合搭配来表达不同的含义,并通过不同的色彩体现出不同的视觉效果,最常见配色有以下几种:
单色:简洁、清晰视觉效果,常见于基础功能图标。例如:B端功能入口,移动端个人中心、二/三级页面的工具栏等,也有很多app的金刚区利用底色块衬托反白的图标。
双色:是很常见的功能性图标,至少由两个以上的元素组成,在单色的基础上加以色彩点缀,让本身就不是很突出的元素不再单调,如果融入品牌色,能提升整个界面品牌调性,适用场景跟单色图标相比则范围更广。
多色:至少由三种或以上的形状、颜色组合而成,常用于金刚区、产品分类列表、定制化菜单等。
线面结合:图标既有线段或轮廓、又有填充的色块,相比纯线/面性单一样式的图标则细节更加丰富,如果把控到位,会有更好的视觉效果及信息传达的效率,也不失趣味性。
在这里给大家推荐几个我常用的图标库,在来不及画图标时,可以先用这些迅速建立起一个图标组件库。之后有时间了再慢慢更新为自己的图标。
Iconfont:国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。特点是图标非常丰富。
Remixicon:Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高,图标风格定义为中性风格,以便适用于各种用户群体和风格的项目。与拼凑混搭的图标库不同,Remix Icon 的每一枚图标都是按照统一标准进行设计的,确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易懂。
IconPark: IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库,可以实现根据单一SVG源文件变换出多种主题, 具备丰富的分类、更轻量的代码和更灵活的使用场景;致力于构建高质量、统一化、可定义的图标资源,让大多数人都能够选择适合自己的风格图标。
06 UI设计中的图片原则
在UI设计中,配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计,具有设计感的配图不仅是吸引用户的重要元素,能比原本平淡无奇的文字界面更让人产生点击欲望,还能体现出设计师的品味、以及相关方面的专业性。
保证使用的图片的质量与完整性
高质量的图片、完整的图片、来确保整个app的基础保障,在ui设计中使用模糊的图片,大大加深整个用户使用的调性,整体显得不专业。
在选用符合的图片的同时还需要保证整个图片的整体,保持风格整体的统一性。图片以实用性为准,如果一味的追求漂亮、好看,最终可能形色各异造成视觉的不统一,严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理,以形成统一的视觉。大体上可以从 构图位置、视图角度、背景风格、色彩饱和度、等方向去调整。
对于人物图片的排版,需要保证人物在图片中的位置保证人物整体摆放位置相同,颜色风格相近,人物的视距点相同保证整体性。
配图必须要明确主体,一眼就能看出核心内容,且不可以炫技或好看为主,否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后,后续也要保持统一。
总结
设计师的职业生涯里,肯定有过很多挫折,但是为了终极目标,必须一步一个脚印,踏踏实实的向前努力,不要试图一夜成功,越努力越幸运。
勿忘初心,方得始终~~