Bsport体育

　　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的金刚区利用底色块衬托反白的图标。双色：是很常见的功能性图标，至少由两个以上的元素组成，在单色的基础上加以色彩点缀，Bsport体育让本身就不是很突出的元素不再单调，如果融入品牌色，能提升整个界面品牌调性，适用场景跟单色图标相比则范围更广。多色：至少由三种或以上的形状、颜色组合而成，常用于金刚区、产品分类列表、定制化菜单等。线面结合：图标既有线段或轮廓、又有填充的色块，相比纯线/面性单一样式的图标则细节更加丰富，如果把控到位，会有更好的视觉效果及信息传达的效率，也不失趣味性。在这里给大家推荐几个我常用的图标库，在来不及画图标时，可以先用这些迅速建立起一个图标组件库。之后有时间了再慢慢更新为自己的图标。Iconfont：国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。特点是图标非常丰富。Bsport体育Remixicon：Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高，图标风格定义为中性风格，以便适用于各种用户群体和风格的项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是按照统一标准进行设计的，确保每一枚图标在拥有完美像素对齐的基础上风格一致且简洁易懂。IconPark：IconPark图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一SVG源文件变换出多种主题， 具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数人都能够选择适合自己的风格图标。06 UI设计中的图片原则在UI设计中，配图的好坏将直接影响着界面的品质及用户的视觉体验。纵观如今高质量的界面设计，具有设计感的配图不仅是吸引用户的重要元素，能比原本平淡无奇的文字界面更让人产生点击欲望，还能体现出设计师的品味、以及相关方面的专业性。保证使用的图片的质量与完整性高质量的图片、完整的图片、来确保整个app的基础保障，在ui设计中使用模糊的图片，大大加深整个用户使用的调性，整体显得不专业。

　　在选用符合的图片的同时还需要保证整个图片的整体，保持风格整体的统一性。图片以实用性为准，如果一味的追求漂亮、好看，最终可能形色各异造成视觉的不统一，严重影响用户体验。设计师在选图时需要对风格精准把控或后续稍加处理，以形成统一的视觉。大体上可以从 构图位置、视图角度、背景风格、色彩饱和度、等方向去调整。

　　对于人物图片的排版，需要保证人物在图片中的位置保证人物整体摆放位置相同，颜色风格相近，人物的视距点相同保证整体性。

　　配图必须要明确主体，一眼就能看出核心内容，且不可以炫技或好看为主，否则会被多余的元素、效果影响主体视觉导致没有重点。但确定好一张图片的风格及色系后，后续也要保持统一。

　　总结设计师的职业生涯里，肯定有过很多挫折，但是为了终极目标，必须一步一个脚印，踏踏实实的向前努力，不要试图一夜成功，越努力越幸运。勿忘初心，方得始终～～