发布时间：2022-4-16 分类： 电商动态
当我们打开一个应用程序时，从视觉水平分析来看，影响用户整体感官体验的元素是：图片，文字，颜色，图标，空白等。
合理使用图片，清晰的信息层次和舒适的色彩匹配将增强整个应用程序的美感，从而为整体产品体验增加点数。一个成功的产品，视觉水平只是其中的一部分，但作为一个合格的UI设计师，我们要做的是做出一些极端的东西。
下面我们使用图片，文本，颜色，图标和空白的尺寸来剖析APP设计并发现那些微妙的细节。只需要比其他人增加1px的细节，你的应用程序设计将更加精致。
内容1，图片，就像一个人的服装品味; 2，文字，我只是想知道重点在哪里; 3，颜色，如何成为“颜色”，算分; 4，图标，从绘画到绘画到底有多远; 5，空白，我只想要足够的空间。
身体1，图片，就像一个人的服装味道图片在APP中很常见，图片的形式和图片的质量会影响用户对产品的感官体验。图片的定位就像一个人的服装品味。不同的着装风格会让别人对你做出不同的判断，并用不同的社会属性来标记你。让我们来看看APP设计中图像需要注意的关键点。它将分析宽高比，一致性，图像质量和真实性。
1.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像素。
以上列表仅是对一些常用比例的分析和描述。这里有更多的比例。分享的目的是让每个人养成分析的习惯，并根据自己产品的特点选择合适的图片比例。
图像比例选择方法：a。根据产品的显示效果，选择能够充分表达产品特性的图像显示比例;湾根据产品气质，选择符合产品内容气质的图像比例; C。选择合适的产品特性常用比例; d。根据布局布局灵活性定制特殊刻度值;即分析与拉力; Break↠创新，创造符合某种法律或美学概念的比例价值观。
1.2。图像比率的一致性当我们根据产品特性确定合适的图像显示比例时，我们需要映射整体布局和图像分布，并标准化可以使用相同图像显示比率的布局。在确保视觉效果和交互形式的情况下，相同的主题优选地以不同页面中的相同比例呈现。这种优势不仅保持了视觉表达的一致性，而且便于以后的操作和维护。
1.3。提高图片质量越来越多的产品开始注重图片的质量。例如，网易对产品图片的拍摄和处理有严格的规范。目的是改善产品的气质和用户心中的印象。在设计时，我们应该使用我们最好的图片来突出我们的设计。图片的质量会影响整个界面的风格。
我的很多朋友都会认为图片是通过后期操作上传的。让我的设计草稿很漂亮是没用的。我对这个问题的看法是：a。最好的设计输出是设计师专业的体现;湾向决策者展示最佳成果，增加他对您的设计能力的印象; C。控制图片质量的视觉规范是严格控制您对图片的视觉追求; d。你的态度会给你带来好运。
1.4。图片的真实还原虽然上面提到了图片质量的重要性，但我们不能选择一些与视觉效果主题无关的图片，这也会给决策者带来误导。我们可以提高图片的质量，但我们需要确保图片的真实再现，以使您的设计工作更加真实和合理。
在一些本地产品设计中，需要谨慎对待外国图片材料的使用。例如，在模型图像的情况下，复制信息的通信更偏向于家庭场景。如果使用外来模型材料，它可能更高，但它无法恢复产品场景，这将给决策者一个错误的错误。认识。
2，文本，我只想知道分层设计的关键点，确定信息的有效沟通，通过文本信息的分层处理可以有效地帮助用户获取信息，提高用户的运营效率。
2.1。文本信息的层次区分当我们获得交互式原型或其他需求文档时，我们需要有效地区分文本的信息级别，以便用户可以快速获取和理解信息的内容。文本信息可以简单地分为重要信息，辅助信息，辅助信息等。在文本布局中，有必要清楚地理清信息之间的层次关系，以改善用户的整体体验。通过字体大小，颜色，空白，层次划分等处理，将相同属性的信息分类为设计，使整个信息按主次序排列，层次清晰。
当设计者在视觉上表达文本时，为了实现整个界面的视觉平衡，还必须减少文本样式的使用，并且不可能采用过多的表达样式来突出显示文本信息。
2.2。估计信息呈现的最大值当我们设计界面时，初级设计师倾向于忽略文本信息的最大值，而只是根据自己的习惯执行完美的布局。如果您期望这么多话，那么您将在此时返工，这将给整个产品开发进度带来风险。
作为一名合格的UI设计师，我们需要估计信息呈现的最大价值，而不是随意采取最小值或设计，这将在实施过程中遇到更多无法控制的风险。
2.3，善于使用提示设计在某些界面设计中会出现大文本信息，为了提高用户对信息的访问权限，我们会根据整体视觉效果选择合适的提示设计。许多初级设计师会过多地关注交互式原型，经常处理大文本太随意，只做美化交互式原型，缺乏用户体验的主动性。
在设计产品交互时，有时无法对产品或交互进行视觉梳理和布局。我们需要利用自己的专业知识来优化您认为可以更好的产品，并在整个产品链中为您提供优化。建立专业精神。
提示的设计表达主要包括数字，字母，图形，颜色块等，只要可以有效地区分信息层次即可。
3，色彩，如何成为“色彩”，色彩是最直观的，不同的色彩表达不同的情感。有一些方法可以找到颜色匹配，但有一些情绪判断。作为视觉设计师，我们需要学习理性的方法和技巧，以及不断欣赏优秀的作品和提高我们的审美能力。
3.1，颜色基本知识颜色分为无彩色和彩色系统，无彩色指白色，黑色，各种灰度;彩色系统是指红色，橙色，黄色，绿色，蓝色，蓝色，紫色等颜色。
关于颜色的更多理论知识不在这里进行。每个人自己的大脑都补充了颜色，纯度，亮度，对比度，个性等理论知识。
3.2。建立颜色库作为初级设计师，我们在控制颜色匹配方面不是很稳定。为了提高工作效率，我们需要以合理的方式建立大量的色库来应对不同的需求。
以下是个人参考的一些更常见的方式。收集颜色的方法有很多种。我们只需要掌握一些更适合自己的东西。只要我们养成习惯并坚持长期坚持，即使只使用一种方法，它也是非常有益的。丰。
一个。通过各种APP收集不同领域的色彩体验APP，建立不同领域APP色彩组合的选择，为以后的项目设计奠定基础。根据主要颜色分类，如红色系列：网易云音乐，京东，网易严格选择，网易考拉等;也可以根据产品气质进行分类，如文学，时装，科技，可爱等。
湾通过Dribbble在Dribbble上收集颜色。每件作品的右侧都有一个颜色文件。结果发现，优秀作品应养成收集彩色文件的习惯。
C。通过摄影作品收集色彩通过优秀的摄影作品收集色彩也是常用的方法之一。
收藏方法：Photoshop打开图片→存储Web格式→选择GIF格式→颜色选择8→颜色表双击颜色块→颜色选择器
d。通过马赛克收集颜色通过使用Photoshop滤镜来拼接图像，您可以获得优秀作品或摄影图片的颜色组合，尤其适合收集相同颜色的颜色。
收集方法：Photoshop open image→过滤器→像素化的→马赛克→设置单元格大小
即从电影中收集颜色我相信每个人都喜欢看大电影。这部电影之所以能够被大家追捧的原因在于必然会有许多值得学习的元素。作为一群神经敏感的设计师，我们总是会错过刺激神经元的优秀电影场景。
方法不仅仅是习惯和持久性
3.3。提高美感，增强感知判断虽然通过一些合理的方法可以提高配色能力，但也有一定的情绪判断。颜色匹配的细微差别通常是明智的判断。我们需要不断欣赏摄影，绘画，设计作品等，全面提升自己的审美观，以不断提高判断的敏感性。
作为UI设计师，您不能只关注界面设计。您可以观看平面作品，摄影和绘画，电影和电视效果，体验工艺，体育和娱乐，并仔细体验生活中的每一个变化。
3.4。发展分析的习惯为了具有良好的配色能力，积累过程非常重要。当我们看到优秀的作品时，我们需要分析颜色之间的对比，颜色在彩色圆圈上的位置，HSB值之间的关系等等。只有通过不断的分析和总结，我们才能逐步形成自己的思维方式，提高控制不同色彩组合的能力。
分析的习惯不仅适用于颜色，还需要对布局的布局，文本信息的处理，图标设计风格，间隙的间距等进行不断的分析和总结，以及优秀作品的规则可以形成自我的标准习惯。
4，图标，从绘画到绘画，在APP设计中，图标是画龙点睛的距离，不仅可以帮助文本信息传输，还可以有效地识别为信息载体。该图标还具有一定的界面装饰效果，以提高界面的整体美感。
许多初级设计师会忽略图标的重要性，并养成下载和重用材料网站的习惯。当这种习惯发展时，它将逐渐失去自己的驱动力。什么元素希望找到下载的材料，工作几年后，我遇到了自己的瓶颈期。
设计师对图标设计的态度和控制将成为打开你和其他设计师之间差距的因素之一。图标设计有下载重用和rarr;动手设计→规范设计→进入品牌基因和其他阶段，你现在属于哪个阶段？
4.1。下载和下载重用和重用是许多设计人员进入该行业的惯常工作方法之一。由于缺乏软件技术，设计技能和创造能力，因此无法完成从创意到标准绘图的合格图标。设计。
缺点：图标设计风格和细节处理完全不一致。一旦养成这种习惯，它就会逐渐丧失动手能力。
4.2。实践设计对于大多数有设计追求的设计师而言，他们将意识到图标设计的重要性，并将根据产品功能绘制统一的风格图标。
注意：图标设计样式包括：线性图标，填充图标，面部图标，平面图标，手绘样式图标和工件图标。无论我们选择哪种表达形式，我们都必须在设计时保持风格的一致性。由于图标的体积不同，不同尺寸的图标在相同尺寸下的视觉平衡也不尽相同。例如，相同大小的正方形将比圆形更圆。形状很大。因此，我们需要根据图标的大小调整图标的大小。
4.3。标准设计在设计师开发出自己的动手习惯之后，祝贺您的进步并保持这种习惯。随着软件技术的成熟，我们需要严格控制自己的随意性，并使用标准规格进行图标设计。在标准设计的基础上，我们可以使用自己的想法，我们不必局限于标准，但总体要素必须符合设计规范。
4.4。品牌图标设计的差异化逐渐变得模糊。由于许多功能的相似性，图标的设计几乎相同。许多更注重设计的产品也根据自己的品牌基因进行定制。 。整合到品牌基因中的图标设计具有强烈的品牌认知度，不仅可以形成独特的视觉差异化，还可以增强用户对产品的记忆。
5，空白，我只需要足够的空间来保持适当的白色空间，使你的界面更加精神，在信息之间保留更多空间，同时也能更好地表达信息之间的分层，比拥挤的信息布局更舒适。
当设计师愿意被产品或操作“想要提出更多内容”的空白时，作为设计师，我们可以尝试从不同的方向表达我们的意见：a。设计比较草案以满足产品需求将解决方案与您认为完美的解决方案进行比较;湾筛选出这种治疗的优秀案例，说服产品成功接受您的计划; C。进行用户测试，选择一些目标用户体验，从用户心中设计最佳解决方案; d。更多的沟通方式正在等待您的探索，最终目标是制作更好的产品。
总结1.不同的图像比例反映了不同的特征，根据产品特性进行合理选择; 2.在设计上保持相同的图像比例，不仅使视觉表达一致，而且为以后的操作和维护带来方便; 3.通过改善画面设计的质量来改善设计的美感，同时也保证了画面的真实再现; 4.文本布局需要注意信息的层次，最大的信息容量，巧妙的使用提示; 5.发展和建立色彩库的习惯; 6.提高美学，增强感性判断，养成分析习惯; 7.图标设计经验中的几个链接：下载重用和rarr;动手设计→规范设计→融入品牌基因;适当的白色空间可以给人们带来更舒适的体验。
有许多方法可以提高设计质量。我们需要继续学习和总结。没有办法实现它。这是分析，推翻和创新以找到合适方式的唯一方法。
最后，祝大家好运！
作者：黑马青年（的黎波里）文章由黑马青年@原创出版。未经许可，禁止复制。
