界面设计哪里好?一个App的界面设计流程是如何制作的?
图片的合理使用,清晰的信息层次,舒适的色彩搭配,会提升整个APP的美感,从而为整个产品体验加分。
一个成功的产品,视觉水平只是一部分,但作为一个合格的UI设计师,我们要做的就是把这部分做到极致。
让我们通过图片、文字、色彩、图标、空白等维度来解剖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的画面比例最接近。
X:≤Y瀑布流设计
X:≤Y表示瀑布设计,宽度固定,最大值之间的高度可以自定义。这种设计方法在一些用户没有明确目的,只是喜欢获取尽可能多的信息的情况下采用。
注意X:≤Y的画面比例的高度控制,不要超过屏幕的可显示区域。比如750x1334px的设计中花瓣网的最大高度是848px。
图像比例选择方法:
A.选择能充分展现商品特征的图片比例,以商品展示的效果为依据;
b、根据产品气质,选择符合产品内容气质的图片展示比例;
c、根据产品特点选择合适的常用比例;
d .根据布局灵活定义特定比例值;
e分析→打破→创新,创造符合一定规律或审美观念的比例价值。
1.2,画面比例一致
我们在根据产品特点确定合适的图片显示比例时,需要根据整体布局和图片分布来规范哪些布局可以采用相同的图片显示比例。
在保证视觉效果和交互形式的情况下,同一主题最好以相同的比例呈现在不同的页面中,这样既能保持视觉表达的一致性,又能给后期的运维带来方便。
1.3,提升画质。
越来越多的产品开始注重图片的质量。比如网易YEATION对产品图片的拍摄和处理都有严格的规定,目的是提升产品的气质,打动用户。
我们设计的时候,要用最好的图片来衬托我们的设计稿。图片的质量影响整个界面的风格。
很多伙伴会觉得,图片是运营后期上传的,我设计稿再漂亮也没用。我对这个问题的看法如下:
A.最好的设计输出是设计师特长的体现;
B.把最好的效果呈现给决策者,增加他对你设计能力的印象;
C.通过制定可操作的视觉规范来控制画面质量,可以严格控制你对画面的视觉追求;
D.你的态度会给你带来好运。
1.4,真实还原图片
虽然前面提到了画质的重要性,但是我们也不能为了视觉效果而选择一些与主题无关的图片,这样也会误导决策者。
我们可以提高图片的质量,但是需要保证图片的真实还原,让你的设计作品更加真实合理。
在一些本土产品设计中,使用国外图片素材需要慎重对待。比如案件中的模特形象,文案信息的传播更偏向于国内场景,
如果用的是国外的模型素材,可能会高一些,但是不能真实还原产品场景,会给决策者传达一种错误的认知。
2、正文,我只想知道钥匙在哪里。
文字设计的层次感决定了信息的高效传递。文本信息的层次化处理可以有效帮助用户获取信息,提高用户对产品的操作效率。
2.1,文本信息的层次分化
当我们得到交互原型或其他需求文档时,需要有效区分文本的信息层次,以便用户快速获取和理解所传达的信息。
文本信息可以简单地分为重要信息、次要信息、辅助信息等。在文字排版中,需要清晰地梳理信息之间的层次关系,提高用户的整体体验。
通过对字体大小、颜色、留白、层次划分等的处理。,对属性相同的信息进行分类设计,使整个信息有明确的优先级和层次安排。
为了达到整体界面的视觉平衡,设计师在视觉表达文字时需要减少文字样式的使用,不应该使用过多的表达样式来突出文字信息。
2.2.估计信息呈现的最大价值。
我们在设计界面的时候,初级设计师往往忽略了文字信息的最大价值,只是按照自己的习惯做出一个完美的布局。
终于,当我进入测试阶段的时候,我发现了为什么会有比我预想的多得多的信息。这时候就会出现返工,给整个产品开发进度带来风险。
2.3、善于利用提示进行设计。
在一些文字信息较大的界面设计中,为了提高用户获取信息的效率,我们会根据整体视觉效果选择合适的提示。
很多初级设计师会过分遵循交互原型,往往对大尺度的文字处理过于随意,只美化交互原型,缺乏用户体验的主动性。
在设计产品交互时,有时候产品或交互无法从视觉角度对信息进行梳理和布局。我们需要用自己的特长去优化你认为可以做得更好的东西,也可以在整个产品过程中为你树立专业性。
主要有数字、字母、图形、色块等。只要能有效区分信息层级。
3、色彩,如何成为一名“色彩”策划人?
色彩给人最直观的感觉,不同性格的色彩搭配传达出不同的情感。配色有一些方法,但也有一些感性的判断。
作为视觉设计师,我们需要学习理性的方法和技巧,也需要不断欣赏优秀的作品来提高自己的审美能力。
3.1,色彩基础知识
颜色分为非彩色系列和彩色系列,非彩色系列是指白色、黑色和各种深浅的灰色;色系是指红、橙、黄、绿、青、蓝、紫等颜色。
3.2、颜色库的建立
作为一个初级设计师,我们对色彩搭配的控制不是很稳定。为了提高工作效率,我们需要以一些合理的方式建立大量的颜色库,以满足不同的需求。
下面是一些常用的方法,供大家参考。收集颜色的方法有很多。我们只需要掌握几个适合自己的就可以了。只要养成习惯,长期坚持,哪怕只用一种方式,也会收获很多。
A.通过各种app收集颜色。
体验不同领域的APP,建立不同领域APP色调的选择,为后期项目设计打下基础。根据主色分类,
如红色系列:网易云音乐、JD.COM、网易YEATION、网易考拉等等;也可以按照产品气质分类,比如文艺、时尚、科技、可爱等等。
B.通过Dribbble收集颜色
在Dribbble上,每个作品的右侧都有一个配色文件。如果发现优秀的作品,要养成收集配色文件的习惯。
C.通过摄影作品收集颜色
通过优秀的摄影作品收集色彩也是常用的方法之一。
收集方法:
Photoshop打开图片→保存为Web格式→选择GIF格式→选择颜色8→双击颜色表中的色块→拾色器。
d .通过马赛克收集颜色
借助Photoshop滤镜,可以得到优秀作品或摄影图片的色彩组合,特别适合收集同一色系的色彩组合。
收集方法:
Photoshop打开图片→滤镜→像素化→马赛克→设置单元格大小。
E.从电影中收集颜色
相信大家都喜欢看大片。这部电影之所以能受到大家的追捧,一定有太多值得借鉴的元素。
作为一群神经质的设计师,那些刺激我们神经元的优秀电影场景是绝对不能错过的。
3.3、提高审美,增强感性判断。
虽然配色的能力可以通过一些理性的方法来提高,但是也有一些感性的判断。配色上的细微差异往往是情绪化的判断。
我们需要不断欣赏摄影、绘画、设计作品等等,全面提升自己的审美,才能不断增强自己的感性判断。
作为一个UI设计师,不能只关注界面设计。可以观看平面作品、摄影绘画、影视动画,体验手工艺制作、体育娱乐的每一次变革,细心体验生活。
3.4、养成分析的习惯
要想有好的配色能力,积累的过程很重要。我们看到优秀的作品,要分析色彩搭配之间的对比关系,色彩在色环上的位置关系,HSB值之间的关系等等。
只有不断的分析总结,才能逐渐形成自己的思维方式,提高对不同配色的驾驭能力。
分析的习惯不仅仅用在色彩上,还需要在版式、文字信息处理、图标设计风格、间距等方面不断分析总结。只有掌握了优秀作品的规律,才能形成自己的标准习惯。
4.图标,离知道怎么画还有多远?
图标是APP设计中的点睛之笔,不仅可以帮助传达文字信息,还可以作为信息载体被高效识别。图标也起到一定的界面装饰作用,提高界面的整体美观度。
很多初级设计师会忽略图标的重要性,养成从网站下载素材再利用的习惯。当这种习惯形成后,他们会逐渐失去自己做事的动力,希望找资料下载。工作几年后,他们很快就会遇到自己的瓶颈。
设计师对图标设计的态度和掌控能力,将是拉开你和其他设计师差距的因素之一。
图标设计有几个阶段,下载重用→动手设计→标准设计→融入品牌基因。你现在属于哪个阶段?
4.1,下载重用
下载重用是很多刚入行的设计师熟悉的工作方式之一。由于自身在软件技术、设计技巧、创作能力等方面的不足,无法完成一个合格的图标设计从创意到标准绘制。
缺点:图标设计风格和细节处理完全不一致,这种习惯一旦养成,就会逐渐失去动手能力。
4.2、动手设计
对于大部分追求设计的设计师来说,他们会意识到图标设计的重要性,也会结合产品特点画出风格统一的图标。
注:图标设计风格包括:线性图标、填充图标、平面图标、平面图标、手绘图标、准实物图标。
无论我们选择什么样的表现形式,在设计时都要保持风格的统一。因为图标的大小不同,不同大小的图标视觉平衡也不一样。比如同样大小的正方形会比圆形大。
因此,我们需要根据图标的体积来调整图标的大小。
4.3、标准设计
当设计师养成了自己动手的习惯,恭喜你的进步。保持这个习惯。随着软件技术的成熟,我们需要严格控制自己的随机性,使用标准规范来设计图标。
在标准设计的基础上,充分发挥自己的创造力,并不一定局限于标准,但整体本质需要符合设计规范。
4.4、融入品牌基因
图标设计的差异化已经逐渐模糊。在很多功能相似的情况下,图标的造型设计也差不多。很多更注重设计的产品也开始根据自己的品牌基因定制图标。
带有品牌基因的图标设计具有很强的品牌识别性,不仅能形成独特的视觉差异化,还能增强用户对产品的记忆。
5.留白,我只要足够的空间。
A.设计一个对比稿,将产品需要的方案和你认为完美的方案进行对比;
B.筛选出这样处理的优秀案例,用成功案例说服产品接受你的方案;
C.进行用户测试,选择部分目标用户进行体验,从用户内心设计出最佳方案;
设计总结
1.不同的画面比例体现不同的特点,根据产品特点进行合理选择;
2.在设计中保持图片比例一致,不仅使视觉表达一致,也给后期运维带来方便;
3.通过提高图片质量来提高设计作品的美感,同时也保证图片的真实还原;
4.文字排版需要注意信息的层次、最大信息容量、巧妙运用提示等。
5.养成不断建立和丰富颜色库的习惯;
6.提高审美,增强感性判断,形成分析的习惯;
7.图标设计体验的几个环节:下载重用→动手设计→标准设计→融入品牌基因;
8.适当的留白可以给人更舒适的体验。