发布时间：2019-7-28 分类： 电商动态
当我们打开应用程序时，从视觉级别分析，影响用户整体感官体验的元素是：图片，文本，颜色，图标，空白等。
合理使用图片，清晰的信息层次和舒适的色彩匹配将增强整个应用程序的美感，从而为整体产品体验增加点数。一个成功的产品，视觉水平只是其中的一部分，但作为一个合格的UI设计师，我们要做的是做出一些极端的东西。
下面我们使用图像，文本，颜色，图标和空白的尺寸来剖析App设计并发现那些微妙的细节。只需要比其他人增加1px的细节，你的应用程序设计将更加精致。
目录
这张照片就像一个人的服装味道。
文字，我只是想知道重点在哪里。
颜色，如何成为“颜色”米。
图标，从绘画到绘画有多远。
把它留空，我只想要足够的空间。
一张照片，就像一个人的衣着味道
图像在App中非常常见，图像的显示和图像质量会影响用户对产品的感官体验。图片的定位就像一个人的服装品味。不同的着装风格会让别人对你做出不同的判断，并用不同的社会属性来标记你。
让我们来看一下图像在应用程序设计中需要注意的关键点。它将分析宽高比，一致性，图像质量和真实性。
1.图像比例是多少？
不同比例的图片传达的信息主体是不同的。根据产品属性，我们将选择图片的比例以匹配整体框架布局。
通过体验一些主流应用程序，我们将找到一些常用的图像比例，如1: 1,4: 3,16: 9,16: 10等;我们还会发现一些打破传统规模的设计，我们需要对它们进行分析。该角色结合其自身产品的特性，可以在其自己的APP设计中合理使用。
1: 1强调主语的存在
1: 1的比率是相对常见的设计比率。使组合物简单易行，并突出主题的存在更容易。常用于产品展示，头像，特写显示等场景，尤其是电子商务APP。
4: 3小巧且易于构图
4: 3图像比例可以使图像更紧凑，更易于编写，便于设计人员播放。由于移动电话的屏幕容量很小，当屏幕显示为全屏时，该比例占用应用程序的设计布局中的大空间。作为设计师，这个比例经常被联系，比例用于Station Cool，UI China的封面和Dribbble工作。
16: 9电影场景效果
16: 9图片比例可用于呈现电影场景的效果，主要用于景观构图，是广泛使用的尺寸比例之一，为用户提供了广泛的开放体验。它广泛用于许多电视和娱乐应用，如腾讯视频和网易云音乐。
16: 10拥抱黄金比例
黄金比例就像金字塔上的珍珠。它越接近她，它就越有吸引力。相反，魅力会被削弱。 16: 10的比率是最接近的。没有绝对的设计标准，我们可以遵循一些优秀的经验规则，但我们必须敢于突破规则并尝试更多的可能性。
X：≤ Y瀑布流程设计
X：≤ Y代表瀑布流设计，具有固定宽度和最大值之间的高度。这种设计用于某些用户没有明确目的但只想获得尽可能多的信息的情况。 X:≤ Y图像比例应注意高度控制，不要超过屏幕显示区域的范围，如花瓣网在750x1334px设计高度最大值：848像素。
以上列表仅是对一些常用比例的分析和描述。这里有更多的比例。分享的目的是让每个人养成分析的习惯，并根据自己产品的特点选择合适的图片比例。
图像比例选择方法：
根据产品展示的效果，选择能够充分表达产品特性的图像显示比例。
根据产品的气质，选择与产品气质相匹配的图像比例。
根据产品特性选择合适的公共比率。
根据布局布局灵活性自定义特殊比例值。
分析→打破→创新，创造符合某种法律或美学概念的比例价值。
2.图像尺度的一致性
当我们根据产品的特性确定合适的图像显示比例时，我们需要映射整体布局和图像分布，并标准化那些可以使用相同图像显示比例的布局。在确保视觉效果和交互形式的情况下，相同的主题优选地以不同页面中的相同比例呈现。这种优势不仅保持了视觉表达的一致性，而且便于以后的操作和维护。
3.提高图片质量
越来越多的产品开始关注图片的质量。例如，网易对产品图片的拍摄和处理有严格的规定。目的是增强产品的气质和用户心中的印象。在设计时，我们应该使用我们最好的图片来突出我们的设计。图片的质量会影响整个界面的风格。
我的很多朋友都会认为图片是通过后期操作上传的。让我的设计草稿很漂亮是没用的。我对这个问题的看法是：
最好的设计输出是设计师职业的体现。
向决策者展示最佳成果，增加他对您的设计能力的印象。
通过开发操作视觉规范来控制图片质量，可以严格控制您对图片的视觉追求。
你的态度会给你带来好运。
4.真实的图片恢复
虽然上面提到了图像质量的重要性，但我们不能选择一些与视觉效果主题无关的图片，这也会给决策者带来误导。我们可以提高图片的质量，但我们需要确保图片的真实再现，以使您的设计工作更加真实和合理。
在一些本地产品设计中，需要谨慎对待外国图片材料的使用。例如，在模型图像的情况下，复制信息的通信更偏向于家庭场景。如果使用外来模型材料，它可能更高，但它无法恢复产品场景，这将给决策者一个错误的错误。认识。
2.文字，我只是想知道焦点在哪里
文本设计的分层决定了信息的有效沟通。文本信息的分层处理可以有效地帮助用户获取信息并提高用户的操作效率。
1.对文本信息进行分层区分
当我们获得交互式原型或其他需求文档时，我们需要有效地区分文本的信息级别，以便用户可以快速获取和理解信息的内容。
文本信息可以简单地分为重要信息，辅助信息，辅助信息等。在文本布局中，有必要清楚地理清信息之间的层次关系，以改善用户的整体体验。
通过字体大小，颜色，空白，层次划分等处理，将相同属性的信息分类为设计，使整个信息按主次序排列，层次清晰。
当设计者在视觉上表达文本时，为了实现整个界面的视觉平衡，还必须减少文本样式的使用，并且不可能采用过多的表达样式来突出显示文本信息。
2.估计所提供信息的最大值
当我们设计界面时，初级设计师倾向于忽略文本信息的最大值，而只是根据自己的习惯执行完美的布局。当他们最终进入测试环节时，他们会发现为什么有比预期的单词数量更多的信息。此时，将进行返工，对整个产品开发计划构成风险。
作为一名合格的UI设计师，我们需要估计信息呈现的最大价值，而不是随意采取最小值或设计，这将在实施过程中遇到更多无法控制的风险。
3.善于设计提示
在一些会出现大文本信息的界面设计中，为了提高用户获取信息的效率，我们将根据整体视觉效果选择合适的提示进行设计。许多初级设计师会过多地关注交互式原型，经常处理大文本太随意，只做美化交互式原型，缺乏用户体验的主动性。
在设计产品交互时，有时无法对产品或交互进行视觉梳理和布局。我们需要利用自己的专业知识来优化您认为可以更好的产品，并在整个产品链中为您提供优化。建立专业精神。
提示的设计表达主要包括数字，字母，图形，颜色块等，只要可以有效地区分信息层次即可。
3.颜色，如何成为“颜色”仪表
颜色给人以最直观的感觉，不同角色的颜色传达不同的情感。有一些方法可以找到颜色匹配，但有一些情绪判断。作为视觉设计师，我们需要学习理性的方法和技巧，以及不断欣赏优秀的作品和提高我们的审美能力。
1.颜色基础
颜色分为无彩色和彩色系统，无彩色是指白色，黑色和各种灰色;彩色系统是指红色，橙色，黄色，绿色，青色，蓝色和紫色等颜色。
关于颜色的更多理论知识不在这里进行。每个人自己的大脑都补充了颜色，纯度，亮度，对比度，个性等理论知识。
2.创建颜色库
作为初级设计师，我们对色彩匹配的控制不是很稳定。为了提高工作效率，我们需要以合理的方式建立大量的色库来满足不同的需求。
以下是个人参考的一些更常见的方式。收集颜色的方法有很多种。我们只需要掌握一些更适合自己的东西。只要我们养成习惯并坚持长期坚持，即使只使用一种方法，它也是非常有益的。丰。
通过各种应用收集颜色
体验不同领域的APP，建立不同领域APP颜色组合的选择，为后期项目设计奠定基础。根据主要颜色分类，如红色系列：网易云音乐，京东，网易严格选择，网易考拉等;也可以根据产品气质进行分类，如文学，时装，科技，可爱等。
使用Dribbble收集颜色
在Dribbble的顶部，每件作品的右侧都有工作的配色方案，并且发现优秀的作品必须养成收集彩色文件的习惯。
通过摄影收集颜色
通过优秀的摄影收集色彩也是常用的方法之一。
收集方法：
Photoshop open image→商店网页格式→选择GIF格式→颜色选择8→颜色表双击颜色块→颜色选择器
通过马赛克收集颜色
通过使用Photoshop滤镜来拼接图像，您可以获得优秀作品或摄影图像的颜色组合，尤其适合收集相同颜色的颜色。
收集方法：
Photoshop Open Image→过滤器→ Pixelated↠马赛克→设置单元格大小
从电影中收集颜色
我相信每个人都喜欢看大电影。这部电影之所以能被大家追捧，是因为必须有太多值得学习的元素。作为一群神经敏感的设计师，我们总是会错过刺激神经元的优秀电影场景。
方法不仅仅是它，而是习惯和持久性
3.提高美感，增强情绪判断力
虽然通过一些合理的方法可以提高配色能力，但也有一定的情绪判断。颜色匹配的细微差别通常是明智的判断。我们需要不断欣赏摄影，绘画，设计作品等，全面提升自己的审美观，以不断提高判断的敏感性。
作为UI设计师，您不能只关注界面设计。您可以观看平面作品，摄影和绘画，电影和电视效果，体验工艺，体育和娱乐，并仔细体验生活中的每一个变化。
4.养成分析习惯
为了具有良好的配色能力，积累过程非常重要。当我们看到优秀的作品时，我们需要分析颜色之间的对比，颜色在彩色圆圈上的位置，HSB值之间的关系等等。只有通过不断的分析和总结，我们才能逐步形成自己的思维方式，提高控制不同色彩组合的能力。
分析的习惯不仅适用于颜色，还需要对布局的布局，文本信息的处理，图标设计风格，间隙的间距等进行不断的分析和总结，以及优秀作品的规则可以形成自我的标准习惯。
4.从绘画到绘画的图标有多远？
该图标是App设计中的点睛之笔，可以帮助传输文本信息，并且可以被有效地识别为信息载体。该图标还具有一定的界面装饰效果，以提高界面的整体美感。
许多初级设计师会忽略图标的重要性，并养成下载和重用材料代购源码网站的习惯。当这种习惯发展时，它将逐渐失去自己的驱动力。什么元素希望找到下载的材料，工作几年后，我遇到了自己的瓶颈期。
设计师对图标设计的态度和控制将成为打开你和其他设计师之间差距的因素之一。图标设计有下载重用和rarr;动手设计→规范设计→进入品牌基因和其他阶段，你现在属于哪个阶段？
1.下载并重复使用
下载重用是业内许多设计师的习惯之一。由于缺乏软件技术，设计技能和创造能力，因此无法完成从创意到标准绘图的合格图标设计。
缺点：图标设计风格和细节处理完全不一致。一旦养成这种习惯，它就会逐渐丧失动手能力。
2.动手设计
对于大多数有设计追求的设计师而言，他们会意识到图标设计的重要性，并且还会根据产品功能绘制统一的风格图标。
注意：图标设计样式包括：线性图标，填充图标，面部图标，平面图标，手绘样式图标和工件图标。无论我们选择哪种表达形式，我们都必须在设计时保持风格的一致性。由于图标的体积不同，不同尺寸的图标在相同尺寸下的视觉平衡也不尽相同。例如，相同大小的正方形将比圆形更圆。形状很大。因此，我们需要根据图标的大小调整图标的大小。
3.规格设计
在设计师开发了自己的动手习惯之后，祝贺你的进步并保持这种习惯。随着软件技术的成熟，我们需要严格控制自己的随意性，并使用标准规格进行图标设计。在标准设计的基础上，我们可以使用自己的想法，我们不必局限于标准，但总体要素必须符合设计规范。
4.与品牌基因整合
图标设计的差异化逐渐变得模糊。由于许多功能的相似性，图标的设计几乎相同。许多更注重设计的产品已经开始根据自己的品牌基因定制图标。整合到品牌基因中的图标设计具有强烈的品牌认知度，不仅可以形成独特的视觉差异化，还可以增强用户对产品的记忆。
V.留空，我只想要足够的空间
适当的消隐可以使您的界面更加精神，在信息之间保留更多空间，更好地表达信息之间的分层。与拥挤的信息布局相比，它可以提供舒适的体验。 。
当设计者的空白意愿被产品或操作拒绝“希望增加更多内容”时，作为设计师，我们可以尝试从不同的方向表达我们的观点：
设计一个比较草案，将您的产品所需的解决方案与您认为完美的解决方案进行比较;
筛选出这种治疗的优秀案例，并说服产品接受您的计划成功案例;
进行用户测试，选择一些目标用户体验，并根据用户的声音设计最佳解决方案;
更多的沟通方式等待开采，最终目标是制造更好的产品。
总结
不同的图像比例反映了不同的特征，并根据产品特性合理选择。
在设计中保持相同的图像比例不仅使视觉表达保持一致，而且为后来的操作和维护带来便利。
通过提高图像质量来改善设计的美感，同时也保证了图像的真实再现。
文本布局需要注意信息的层次，信息容量的最大值，巧妙的使用提示。
养成不断建立和丰富色库的习惯。
改善美学，增强情绪判断力，养成分析习惯。
图标设计经验的几个方面：下载重用和rarr;动手设计→规范设计→进入品牌基因。
适当的白色空间可以给人们带来更舒适的体验。
有许多方法可以提高设计质量。我们需要继续学习和总结。没有办法实现它。这是分析，推翻和创新以寻找正确方法的唯一途径。
最后，祝大家好运！
