020-29815005
预约专线时间:09:00-23:59

【UI设计培训】2022APP界面设计经验技巧总结

新闻来源:本站 日期:2022-02-08
当我们打开一个APP时,从视觉层面分析,影响用户对APP整体感官体验的元素主要有:图片、文字、色彩、图标、留白等。一个成功的产品,视觉层面只是其中的一部分,但是作为一个合格的UI设计师,我们要做的就是把这其中的一部分做到极致。
  当我们打开一个APP时,从视觉层面分析,影响用户对APP整体感官体验的元素主要有:图片、文字、色彩、图标、留白等。图片的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感,从而为整个的产品体验加分。

  一个成功的产品,视觉层面只是其中的一部分,但是作为一个合格的UI设计师,我们要做的就是把这其中的一部分做到极致。


【UI设计培训】2022APP界面设计经验技巧总结


  下面我们通过图片、文字、色彩、图标、留白这几个维度来解剖APP设计,发现那些微妙的细节。只需要比别人多提高1px的细节,你的APP设计就会更精致。

  1、图片,如同一个人的衣着品味;

  2、文字,我只想知道重点在那里;

  3、色彩,如何成为“色”计师;

  4、图标,从会画到画好之间有多远;

  5、留白,我只想要足够的空间。

  1、图片,如同一个人的衣着品味

  图片在APP中是非常常见的,图片的展现形式和图片的质量都影响着用户对产品的感官体验。

  图片的定位就如同一个人的衣着品味,不同的穿衣风格会使别人对你作出不同的判断,为你打上不同社会属性的标签。

  下面我们一起来看看图片在APP设计中需要注意的关键点,将会从图片比例、一致性、图片质量与真实性等方面进行分析。

  1.1、图片比例有什么讲究?

  不同比例的图片所传达的信息主体不尽相同,根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。

  通过体验一些主流的APP,我们会发现一些比较常用的图片比例,如1:1、4:3、16:9、16:10等等;

  也会发现一些打破常规比例的设计,我们需要分析它们的性格,结合自身产品的特点,才能在自己的APP设计中合理的加以运用。

  1:1强调主体的存在感

  1:1的图片比例是比较常见的一种设计比例,利用此长宽比更容易将构图归整得简单,突出主体的存在感。

  常用于产品展示、头像、特写展示等场景,在电商类APP中尤为常见。

  4:3图像紧凑、更易构图

  4:3的图片比例可以使图像更紧凑,更易构图,方便设计师发挥。由于手机屏幕容量较小,作为全屏展示时,该比例在App设计布局上面占用空间较大。

  16:9电影场景般的效果

  16:9的图片比例可以呈现电影场景般的效果,多用于横向构图,是应用非常广泛的尺寸比例之一,能给用户一种视野开阔的体验。

  在很多影视娱乐类APP设计中运用广泛,如腾讯视频、网易云音乐等。

  16:10拥抱黄金比例

  黄金比例就像金字塔上的明珠,越接近她越有魅力,反之会魅力减弱,16:10的图片比例最为接近。

  设计没有绝对的标准,我们可以遵循一些优秀的经验规则,但是也要敢于突破规则,尝试更多的可能性。

  X:≤Y瀑布流设计

  X:≤Y代表宽度固定,高度在最大值之间自定义的瀑布流设计,在一些用于用户没有很明确的目的,只是喜欢获取尽量多的信息的情况下采用这种设计方式。

  X:≤Y的图片比例要注意高度的控制,不要超出屏幕可显示区域的范围,如花瓣网在750x1334px的设计中高度最大值为:848 px。

  以上列举的仅为部分常用比例的分析与说明,还有更多的比例这里就不一一演示,分享的目的是让大家养成分析的习惯,结合自身产品特点选择适合的图片比例。

  图片比例选择方式:

  a.以商品展示效果为准,选择能够充分表现商品特点的图片展示比例;

  b.以产品气质为准,选择符合产品内容气质的图片展示比例;

  c.结合产品特点选择合适的常用比例;

  d.根据版面布局灵活的自定义特殊的比例值;

  e.分析→打破→创新,创造出符合某种规律或者美学概念的比例值。

  1.2、图片比例的一致性

  当我们结合产品特点确定合适的图片展示比例以后,需要针对整体的布局与图片分布情况,规范出那些布局可以采用相同的图片展示比例。

  在保障视觉效果与交互形式的情况下,相同的主体,在不同的页面中最好采用相同的比例呈现,这样的好处不仅可以保持视觉表达的一致性,也能给后期运营维护带来便利。

  1.3、提高图片的质量

  越来越多的产品对图片质量开始加以重视,比如网易严选对产品图片的拍摄与处理都有严格的规范,目的就是为了提升产品气质和在用户心中的印象。

  我们在设计的时候更要以最佳的图片来烘托我们的设计稿,图片的质量影响着整个界面的格调。

  很多伙伴儿会觉得图片都是后期运营上传的,设计稿做得再精美最终也是没用的。 

  a.最佳的设计输出是设计师专业的体现;

  b.把最好的效果呈现给决策者,增加他对你设计能力的印象;

  c.通过制定运营视觉规范来把控图片质量,是可以严格把控你对图片的视觉追求;

  d.你的态度会给你带来好运。

  1.4、图片的真实还原

  虽然前面提到图片质量的重要性,但是我们不能为了视觉效果选择一些与主题无关的配图,这样也会给决策者一种误导。

  可以提高配图的质量,但是需要保证图片的真实还原,这样才能让你的设计作品更加真实合理。

  在一些本土的产品设计中,对于国外图片素材的运用,需要谨慎对待。如案例中的模特形象,文案信息的传达更加偏向于国内的场景,

  如果运用一张国外的模特素材也许逼格更高,可是却无法真实的还原产品场景,会给决策者传达一种错误的认知。

  2、文字,我只想知道重点在那里

  文字设计的层次感决定了信息的高效传达,通过对文字信息的层次处理可以有效的帮助用户获取信息,提高用户对产品的操作效率。

  2.1、对文字信息进行层级区分

  当我们拿到交互原型或者别的需求文档时,我们需要对文字的信息层级进行有效的区分,这样才能让用户快速的获取和理解信息传达的内容。

  文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时,需要明确的梳理好信息之间的层级关系,提高用户对产品的整体体验。

  通过对字体大小、颜色、留白、层级划分等处理,把相同属性的信息归类设计,让整个信息排列主次分明,层级清晰。


       以上就是优漫教育小编为大家介绍的“【UI设计培训】2022APP界面设计经验技巧总结”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 !