网站首页
手机版

从这5个维度出发,让你的APP设计更精致!

更新时间:2022-04-17 13:48:59作者:佚名

从这5个维度出发,让你的APP设计更精致!

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

  

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

  

  图片在App中是非常常见的,图片的展现形式和图片的质量都影响着用户对产品的感官体验。图片的定位就如同一个人的衣着品味,不同的穿衣风格会使别人对你作出不同的判断,为你打上不同社会属性的标签。

  

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

  

  1. 图片比例有什么讲究?

  

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

  

  通过体验一些主流的App,我们会发现一些比较常用的图片比例,如 1:1、4:3、16:9、16:10等等;也会发现一些打破常规比例的设计,我们需要分析它们的性格,结合自身产品的特点,才能在自己的APP设计中合理的加以运用。

  

  1:1 强调主体的存在感

  

  1:1 的图片比例是比较常见的一种设计比例,利用此长宽比更容易将构图归整得简单,突出主体的存在感。常用于产品展示、头像、特写展示等场景,在电商类APP中尤为常见。

  

  4:3的图片比例可以使图像更紧凑,更易构图,方便设计师发挥。由于手机屏幕容量较小,作为全屏展示时,该比例在App设计布局上面占用空间较大。作为设计师来说,这个比例经常接触,站酷、UI中国的作品封面、Dribbble作品展示等都采用这个比例。

  

  16:9的图片比例可以呈现电影场景般的效果,多用于横向构图,是应用非常广泛的尺寸比例之一,能给用户一种视野开阔的体验。在很多影视娱乐类APP设计中运用广泛,如腾讯视频、网易云音乐等。

  

  黄金比例就像金字塔上的明珠,越接近她越有魅力,反之会魅力减弱,16:10的图片比例最为接近。设计没有绝对的标准,我们可以遵循一些优秀的经验规则,但是也要敢于突破规则,尝试更多的可能性。

  

  X:≤Y代表宽度固定,高度在最大值之间自定义的瀑布流设计,在一些用于用户没有很明确的目的,只是喜欢获取尽量多的信息的情况下采用这种设计方式。X:≤Y的图片比例要注意高度的控制,不要超出屏幕可显示区域的范围,如花瓣网在750x1334px的设计中高度最大值为:848 px。

  

  2. 图片比例的一致性

  

  当我们结合产品特点确定合适的图片展示比例以后,需要针对整体的布局与图片分布情况,规范出那些布局可以采用相同的图片展示比例。在保障视觉效果与交互形式的情况下,相同的主体,在不同的页面中最好采用相同的比例呈现,这样的好处不仅可以保持视觉表达的一致性,也能给后期运营维护带来便利。

  

  3. 提高图片的质量

  

  越来越多的产品对图片质量开始加以重视,比如网易严选对产品图片的拍摄与处理都有严格的规范,目的就是为了提升产品气质和在用户心中的印象。我们在设计的时候更要以最佳的图片来烘托我们的设计稿,图片的质量影响着整个界面的格调。

  

  4. 图片的真实还原

  

  虽然前面提到图片质量的重要性,但是我们不能为了视觉效果选择一些与主题无关的配图,这样也会给决策者一种误导。我们可以提高配图的质量,但是需要保证图片的真实还原,这样才能让你的设计作品更加真实合理。

  

  在一些本土的产品设计中,对于国外图片素材的运用,需要谨慎对待。如案例中的模特形象,文案信息的传达更加偏向于国内的场景,如果运用一张国外的模特素材也许逼格更高,可是却无法真实的还原产品场景,会给决策者传达一种错误的认知。


本文标签: 标签  简介  app  

为您推荐

excel表格怎么大批量筛选(excel表格怎么大批量筛选重复项并快速删除)

1、在选中单元格后,点击排序和筛选。2、在展开的界面中,点击筛选。3、在单元格界面中,点击全部显示。4、在展开的界面中,点击确定即可。

2023-03-21 15:30

Word2007文档水印怎么去除(word2007文档如何去除水印)

Word2007文档水印怎么去除 Word2007文档水印怎么去除 方法一 页面布局-页面背景-水印-删除水印,文档中的水印被删除. 方法二 页面布局-页面背景

2023-03-15 00:31

Word2003文档中的回车符怎么隐藏(怎样隐藏word里的回车符)

Word2003文档中的回车符怎么隐藏 Word2003文档中的回车符怎么隐藏 隐藏回车符 1.单击菜单栏"工具"下的"选项",在打开的窗口中取消勾选"视图"选

2023-03-15 00:30

Word2007自动滚动怎么设置(如何设置word自动滚动)

Word2007自动滚动怎么设置   Word2007自动滚动怎么设置 1.首先打开一篇长篇文档,单击其左上角的"office按钮"在弹出的快捷菜单中选择"Wo

2023-03-15 00:29

Word2013文档中大纲视图如何使用(word2007大纲视图)

Word2013文档中大纲视图如何使用 在Word 2013中,用户可以使用大纲视图来查看并编辑文档的大纲结构,同时可以对正文进行处理.在大纲视图模式下,文档的

2023-03-15 00:29

Word怎么用快捷键快速修改文字格式 word快捷键修改

Word怎么用快捷键快速修改文字格式   Word怎么用快捷键快速修改文字格式 1.电脑上新建word文件,例如命名为"word技巧" 2.双击"word技巧"

2023-03-15 00:27