UI基础设计资料

　　UI设计师强调满足于可用性和用户体验的视觉设计。基于合理的交互关系，操作逻辑，排布次序进行满足于眼睛感官效果的外观设计，以形象表达相应元素功能的设计形式。所以UI设计师需要具备较强的专业能力，而不是随随便便简简单单就可以称之为UI设计师的。而在UI设计中，视觉是辅助交互存在的，产品的特质是需要视觉表达出来的，他们通过设计放大产品该有的气质，接下来小编就来分享一些UI基础设计资料，希望能对零基础的朋友有所帮助。

　　UI设计5原则
 

　　一、尊重用户习惯，降低学习成本。对于生活与自然的比拟，学习成本很低。
 

　　二、自主控制，降低使用门槛
 

　　三、了解状态，差异化干扰内容(不可逆操作一定要加确认按钮)
 

　　四、标准化设计，贯穿产品形象和元素
 

　　五、图形化设计、简化设计元素
 

　　UI设计交互规范
 

　　简化操作：能一步完成的交互就不要分两步。
 

　　用户习惯：大部分用户都有固化思维，我们作为设计师应该尊重数据，尊重用户选择。
 

　　减少干扰：减少界面元素的不确定因素，方便用户快速找到自己想要的。
 

　　快速响应：加快用户读取的响应速度，能够避免从远程取数据的，就尽量避免。
 

　　界面友好：除了根据需求提供视觉解决方案以外，在设计的过程中适当地加入一些小细节使交互界面更加友好是设计师的职责所在。
 

　　图片处理规范
 

　　图片统一性
 

　　图片色调色温需统一，例如一个婴儿产品的首页，整体需要搭配暖色调的图片，这样看上去整体才比较统一舒服;图片比例需统一，例如一个卖货的产品详情页，在同一屏的栏目中(页面)所出现的产品或者人物，比例就需要有一个统一的大小比例，这样看上去才比较统一舒服。
 

　　图片细节处理
 

　　图片精度不够、杂色太多可以使用PS内置的CR滤镜处理;图片尺寸建议统一为偶数值，方便前端技术人员开发;图片边缘避免与白色背景融合，可以在边缘位置加色;为了配合标题字体，图片可以局部调亮或调暗。
 

　　动效规范
 

　　不论你的动画有多好看、多吸引眼球，如果成本太高或者过于复杂都是无法落地的，所以我们要遵循简单实用的原则来进行设计，千万不要过度设计;任何交互动作所导致的状态都需要考虑正常状态与异常状态，拿加载动画来说，我们需要考虑加载成功的反馈与加载失败的反馈，并将之注明在输出规范中。
 

　　UI设计需要学习的软件
 

　　如果我们要设计出精美的界面，图标供用户使用，那么我们首先要学习设计软件，来绘制这些界面，图标。一般UI设计要学习以下五款软件：
 

　　一、PS：PS软件在UI设计工作中主要来用做UI设计界面设计、图标设计、负责界面中的视觉设计，是我们第一款要掌握的软件，在以后的工作中60%的内容都是PS来完成。
 

　　二、AI：AI软件在UI设计工作中主要用来做UI界面设计、图标设计、字体设计、插画设计，加快我们的工作效率。
 

　　三、AE：软件在UI设计中主要负责交互动效设计。我们手机解锁动作其实就是一个简单的动效。
 

　　四、ARP：全称：Axure RP 一款交互软件、在UI设计中负责做交互原型图。ARP软件和默刀软件都是做原型图的，可以二选一学习。
 

　　五、XD 或者sketch软件：在UI设计工作中主要用来做图面设计、图标设计、原型设计。
 

　　UI设计师基础职责：
 

　　一、负责用户界面设计，根据产品原型进行具体效果图设计，视觉设计(包括主次界面风格化，版面布局细节处理，icon绘制等)
 

　　二、独立完成UI相关制作，能根据产品的设计思路设计相应配套的UI。
 

　　三、参与产品构思及软件界面优化，提出对产品界面规划，把握产品最终界面实现效果。
 

　　四、结合用户体验，优化完善设计，制定可行的产品品质提升方案。
 

　　五、维护现有的应用产品，不定期收集和分析用户对于GUI的需求等。
 

　　创建层次结构需要考虑以下几点:
 

　　尺寸 元素越大，就越容易引起注意，人们首先看到的是更大的物体，包括文本和图像。使用尺寸层次结构背后的想法是为了给视觉旅程提供一个焦点。
 

　　如果从一个文本到另一个文本的跳转更小，阅读顺序就会变得更困难，可能会创建一个效率较低的层次结构。和其他设计一样，平衡是关键。
 

　　颜色
 

　　明亮的颜色比柔和的色调更突出。色彩是一种强大的视觉资源，它的正确使用可以有效地分离屏幕上的元素来优先或优先考虑它们。在界面设计中，通常最强烈的色彩是交互，因为用户需要采取行动或从系统接收反馈。
 

　　创建层次使用颜色的三种方法:
 

　　色调:有些颜色比其他颜色更突出。这种色调可以为人类的视力造成几种类型的冲突，红色和绿色，蓝色和黄色，或蓝绿色和棕色。
 

　　饱和:饱和的颜色比灰色更突出。灰色和他们的尺度总是倾向于降级的颜色极大的饱和，这甚至给用户更多的亲密感。在灰色背景上使用红色就是一个例子。
 

　　亮度:明亮的颜色比黑暗的颜色更突出，反之亦然。在黑暗的背景上使用明亮的元素创造了一个直接的层次，这也适用于我们有白色背景和一些黑暗的元素。
 

　　接近
 

　　靠近的元素比遥远的元素更能吸引人的注意力。在创建阅读顺序时，让组使用距离是一个非常可行的资源。人类的视觉倾向于对元素进行分类，因此，使这种分类基本上有利于使用者的脑力工作。接近性是设计中创建连接和关联的对象分组。当事物比较接近时，通常意味着它们一定是相关的。如果事情发生在更远的地方，这应该意味着它们可能没有联系。简而言之，邻近性创造了这些关系，并为信息带来组织和层次。
 

　　对齐
 

　　任何与其他元素相分离的元素都会引起注意。这是因为对齐在元素之间创造了秩序，这条规则的任何改变都会引起人类的兴趣，并因此而引人注目。在界面设计中，元素的对齐对于创建视觉一致性非常重要，因为它允许为屏幕上的元素分配相关性，并建立特定元素的开头和结尾，无论是交互的还是信息性的。
 

　　重复
 

　　重复的样式给人的印象是这些元素是相关的。这种层次结构包括重用接口中相同或类似的元素。重复也提供了一些优势，基于视觉模式。在界面设计中，重复创造了一种统一性和一致性的感觉。
 

　　负空间
 

　　元素周围的空间越大，它产生的关注就越多。负空间是显示空白画布的区域，不仅可以在周围找到，而且可以在同一元素之间和内部找到。它不适合单一的颜色，而是采用了背景的颜色，给人一种空间的错觉。带有大量封闭元素的设计会导致界面饱和，并且没有层次结构来指示哪个元素更重要，从而导致用户的困惑和不知所措。元素越重要，它周围的负空间就越多。将一个元素与其他元素隔离不仅是创建层次结构的良好资源，而且还可以为设计提供支持结构。它创建了必要的空间，使得视图可以以一种流畅的方式从一个元素传递到另一个元素，而没有视觉干扰。

　　纹理
 

　　多变和复杂的纹理比平面纹理更能吸引人的注意。墙的平面比人行道的平面更突出。这是因为复杂性总是比极简主义更能吸引用户的注意力。纹理的使用也融入了其他重要的设计元素，如风格和氛围。UI设计中的照片可能是纹理层次结构的最好例子。它们的形状、颜色和渐变总是比平面元素传达更多的感觉。滥用纹理最终会分散而不是通知，或者可能导致不必要的压缩。纹理往往会与其他层次资源(包括大小)重叠，因此在合并纹理化元素之前，必须考虑到整个组合和用户在设备屏幕上看到的所有内容。再次强调，平衡是关键。在UI设计中，没有什么是美学的，而视觉层次无疑是我们拥有的指导用户体验、重新推动设计标准和提供通向界面目标的直接路径的最佳武器之一。
 

　　Hierarchy层次结构
 

　　层次结构，就像其传统含义一样，是按项目的重要性或权重在屏幕上的排列顺序。视觉层次结构说明了我们如何有效地组织内容和设计元素。视觉上更具分量的元素很容易引起用户的注意。因此，在进行产品设计时，衡量设计布局成为了重要的步骤：在设计内容与元素之间建立视觉上的联系，为每个设计元素添加不同的视觉权重，最终创造出平衡的视觉层次，引导用户的视线。
 

　　构建视觉层次结构中的4个基本元素：
 

　　大小
 

　　大小是重要的工具，尤其是在文本的情况下。人们倾向于认为更大的文字意味着更重要的内容。较大的元素更引人注目，因此，设计人员应了解屏幕上每个元素的优先级，并据此调整大小。
 

　　颜色
 

　　颜色在层次结构创建中起着有效的作用，就连最基本的黑色也会对用户的浏览模式产生巨大影响。用户在情感上与色彩联系在一起，因此可以巧妙地使用不同的组合来指导用户对整个数字产品采取预期的操作。
 

　　对比
 

　　对比是建立视觉层次结构的重要一环：我们使用颜色，字体重量，字体大小等来创建对比度。
 

　　留白
 

　　留白是视觉设计元素中的一种，如果使用得当，它将有助于创建出色的界面。它可帮助用户理解各个设计元素之间的关系，给予适当的负空间来传达正确的信息。
 

　　对比Contrast
 

　　对比是另一个重要原则，可帮助我们设计更好的界面。这不仅只涉及到浅色和深色的对立，也涉及到大小和尺寸的对比。对比可以帮助我们更好地组织设计内容，也可以帮助用户视线专注于某些元素。但是，不平衡的对比可能会使用户感到困惑，因为它可能会创建许多焦点，导致用户很难采取预期的行动。
 

　　对比涉及到的内容包括：尺寸，颜色，重量，样式，衬线字体和无衬线字体，填充，相似性Proximity，平衡Balance，对比，密度，单色，相近色 ，互补色 。
 

　　图标规范
 

　　图标与品牌标志一样，在设计时都需要做适当的减法，应该尽量用简约的线条去表达其含义，应该尽量避免出现线条结构过于复杂的设计。而且整体的图标都需要保持风格一致，例如图标的线条粗细、边角弧度、图标高度宽度比例、风格等等。
 

　　像素对齐需要严格的做到像素对齐，尤其是在做较小尺寸的图标时，如果不严格的遵循像素对齐，那最终的显示效果就会出现问题。多用布尔运算在做图标的时候，能用基本图形进行布尔运算的时候，尽量不要使用钢笔，这样做的好处有如下几点：让你的图标更加规范吗，对图形结构理解更加深刻，后期更改形状更加方便。独特的风格在做系列图标的时候，一定要在前期给图标设定一个风格及原则，使之看起来与众不同。
 

　　在做线性图标时，一定要保证描边粗细相同、圆角相同，视觉大小统一在进行图标设计的时候，我们会使用栅格辅助线来帮助我们更加严格谨慎，但一定不要被辅助线困住，学会灵活运用，保持视觉上的大小统一。要把品牌中的抽象的概念变成具象化的图形，把品牌主副色调应用到图标设计中。
 

　　标注规范
 

　　标注主要是以下四种不同属性的内容：尺寸、文字、间距、颜色。
 

　　在进行标注时，首先去除导航栏和标签栏，因为这些控件通用性非常强，需要单独拿出来进行统一标注，这里我们只对内容区来进行标注示例。
 

　　尺寸——我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是：有圆角的地方，需要将圆角半径标出。对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。
 

　　一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。很多没有经验的设计师不理解适配的原理，所以很容易将一些控件给出固定的尺寸大小，如果你将这个按钮的宽度和高度都标注出来。开发就会将这个按钮的大小写死，一旦遇到屏幕(白色区域)较宽的时候，按钮还是固定大小，就会影响视觉效果。所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。
 

　　文字——需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。
 

　　关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。
 

　　间距——有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。
 

　　颜色——需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项：切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。
 

　　这是一些UI设计中的基础规范，可能没有接触过UI设计的朋友会觉得这样看起来好像挺难的，确实，说难也是真难，不过，说简单也可以简单，进行系统的学习后肯定就简单了，AAA教育在UI设计专业培训上有十多年的教学经验，完整的课程培训体系，专业的UI老师倾囊相授，一定会让你收获颇丰的。