移动产品登陆界面设计

首先和大家介绍一下项目背景，它是一个地产客户资源管理的APP，目标人群就是我们公司的销售人员约3000人，以前他们在客户资源管理上主要使用的后台管理系统，但是常常会出现资料跟进不及时，或者资料录入不完善的情况，这次在APP中得到了改善并增加了一些新的功能。

我主要负责这次界面的设计工作，整个界面设计完成还算比较顺利，只是登录界面迟迟不过稿，因为想到咱们的产品是工具类、需要登录之后才能进入界面进行 *** 作，因此登录界面就是大家进入APP看到的第一个界面，在设计上我采用的是全屏大图的商务风格，使用了一个和房产有关和商务类的。

不过后来老板反馈登录界面的背景图像有一层雾，他建议最好是蓝天白云看上去活跃点，不要气死沉沉的。

大家看到蓝天白云可能会笑，这设计出来会不会太low，我开始也是这样想的但是转念一想。老板只是觉得这个界面没有生气不活泼，我们的目标人群本来就是自己公司的销售员工，在设计上一定要是充满朝气。

后来我尝试了多种类型：商务办公、海景房、纯意向类等，觉得都不能很好的表达。这时候同事看到我有点纠结，于是就提醒我我换个思路不一定要设计成这种全屏大图风格，现在很多APP登录界面设计都较为简洁，不用拘泥于一种样式。那还有什么样式较为适合呢？于是晚上回家我对登录界面的设计样式进行了梳理，我主要从三个方面入手：

1、如何进行参考收集？

2、参考收集完后怎么办？

3、如何选择符合产品的设计样式？

如何进行参考收集

参考收集大家也可以理解为寻找参考，不管是样式参考还是版式参考，在设计前期一定是会经历收集的过程。收集可以分为网上资源和项目资源，网上资源也就是大家熟知的花瓣、追波、Behance、站酷、UI中国这些设计平台，大家可以通过这些平台了解当前流行趋势、样式风格、界面分析等内容获取帮助。

除此之外，我们还可以收集各行业优秀的APP、竞品对他们进行分析，因此收集这一步是必不可少的。下图是我手机上常备的觉得还不错的APP：

由于这次做登陆界面，因此我首先将这些APP的登陆界面大体过了一遍，了解每个行业的特点。然后我在搜集了一些资源管理和工具类的APP（竞品分析是必不可少的）。

收集完成后，我们可在每个行业挑选两到三款APP进行截图，到这里收集工作也就完成了。（收集工作虽然简单，但是通过长期积累你会熟知每个行业的设计特点、你知道某个APP更新了，它为什么要更新，更新之后有什么好处等）

参考收集完后怎么办

参考收集完后就需要将上面收集到的截图进行相关的分类（风格样式分类、展示内容分类等），在设计时由于我们的内容已经确定，因此只需要进行风格样式分类即可。这里我将登录界面的样式分为：白色简洁、轻装饰、纯色背景、全屏大图、半屏、插画背景六大分类。通过分类我们可以了解到不同行业他们采用的设计方式。

1、白色简洁

白色简洁风格是目前较为常见的样式，其目的以信息录入为目的，多用于体量比较大的APP中，在设计时没有采用较为复杂的装饰元素，整个界面以简洁设计为主，在设计上主要是信息展示的排版设计。如下图所示：

以得到、土豆、拉勾为例，在展示上出入不大，主要设计是信息的排版，得到和拉勾类似采用线条输入框，居左排版样式。土豆采用椭圆矩形输入框，居中排版，同时还加入Logo体现品牌感。

2、轻装饰背景

轻装饰背景也就是在简洁风格的基础上添加一些品牌装饰元素，相较于简洁风格该设计更能体现界面细节，增加界面品牌感，同时也不影响信息的录入。如下图所示：

轻装饰在设计上可以有四种展现效果：第一类似网易云音乐和网易美学，取产品相关元素进行装饰；第二类似好奇心日报做模糊处理增加界面层次感；第三类似网易云课堂加入意向类的；第四类似优酷、36Kr添加几何元素进行装饰。

3、纯色背景

纯色背景在使用时往往采用品牌色，同时搭配Logo进行设计，体现品牌感。需要注意的是，该方式多用在登陆信息简单，或者以第三方登陆为主的界面中。如下图所示：

Keep、问卷网、腾讯课堂均采用品牌色进行设计，同时可以看出他们的登陆信息都较少，在视觉设计上也较为简洁。

4、全屏大图

全屏大图也就是在登陆信息下方采用的形式填充，其优势是更容易吸引人的注意力，更容易传递情感引起用户共鸣，如果采用产品相关的图还能够提前给用户有个预期。其缺点是信息和背景融合度较高，对于一些体量较大的产品不太适合，多用在垂直类的APP中。如下图所示：

全屏大图其是整个界面的核心，因此想要找到一个符合产品的是不易的事情，在进行查找时我们也需要有目的性的寻找，比如咕咚、钉钉选择的和产品相关的；每日开眼、随办、企业查用了较为意向的；马蜂窝采用全屏动图让整个登陆界面更加生动（使用动图要慎重，因为用户往往会使用过长的时间查看，拉长登陆时间）。

5、半屏

半屏和全屏类似都可以通过传递产品核心功能、或者通过意向图传递产品品牌感，只是半屏其重点是以登陆信息为主。其缺点是在设计上不容易出彩，目前仅有少部分的APP采用该样式，如下图所示：

小猪短租、NOTHING、蚂蚁短租均使用的是半屏的形式，可以看出其登陆 *** 作模块在界面的黄金位置上，整个界面设计会有一定的分割感。

6、插画背景

相比于设计，插画背景有个优势就是通过自己手绘不需要到处找，也不用担心的版权问题，可以完全根据自身产品进行插画制作。需要注意的是插画设计最好加入品牌识别元素，或者和品牌相关元素，这样才会显得有意义。如下图所示：

印象笔记采用闹钟、文档的方式也让人一目了然知道他的记事功能，in的Slogan就是有趣的人都在in，这幅插画刚好也表现出了这个意思，最右采用品牌章鱼卡通形象，让界面具有可识别性。

如何选择符合产品的设计样式

上面我们已经进行了参考的收集、截图分类并做了简单的样式分析。现在我们就需要将这些样式结合我们实际的产品进行梳理，选出适合我们当前的设计方式。

任何界面的设计都是有理有据的，也就是我们的设计需要根据我们的设计目的、老板预期、竞品分析多方面进行筛选。

1、设计目的

首先我们来看登陆界面的目的主要有哪些？这里我主要归纳了4个方面：个人信息录入、品牌展现、传递信息（商业信息、产品核心作用）、故事或产品的人文情怀。这些目的分别对应着不同的设计样式。

个人信息录入： 主要使用在体量较大的项目中，其主要涉及目的就是高速高效的帮助用户登录，结合上面的样式分析我们可以推出白色简洁样式、半屏展示样式、轻装饰风格是以个人信息录入为主要目的的。

品牌展现： 如果你觉得千篇一律的白色简洁风格没有特点，你也可以根据需要加入品牌识别，比如在界面中添加Logo、添加和产品相关的、插画元素等。结合上面的样式分析，主要有轻装饰风格、纯色背景、插画背景、全屏大图能够更好的提现品牌化。

传递信息： 当你的登陆信息较为简单时，比如仅有第三方或者简单的登陆信息，这时候登陆界面不单单是以个人录入为主，还会起着传递商业信息、产品信息等作用。结合上面的样式分析，主要有轻装饰风格、全屏大图、半屏能够更好的传递产品信息。

故事或产品的人文情怀： 这个比较适合小众的产品，我们知道是最好的传递情感的方式，因此全屏是不错的选择，当然如果产品预算较高，我们也可制作成视频，更能够引起用户的共鸣。

分析完后就需要结合我们产品的设计目的进行选择了，根据前期的需求沟通我们的登陆界面信息简单，同时用户需要登录之后才能进入界面，因此在展现上以品牌展现和传递信息为主，因此我们可以推出我们的产品较为适合轻装饰风格、纯色背景、插画背景、全屏大图。

2、老板预期

有时候你分析的不一定是正确的，你可以将你的分析和经理说，经理会比你更清楚和老板想要哪种。在前言部分我也提到过，老板想要登陆界面较为活跃，体现销售行业的朝气。因此在设计时我们需要考虑这一因素。

3、竞品分析

竞品分析往往能够解决我们采用何种样式，我们的项目定位很明显，就是客户资源管理，目标人群也只是本公司销售人员使用，因此可以将其归纳为工具类的APP，在工具类的APP中常见的设计方式主要有：白色简洁、纯色背景、全屏大图。

客户资源管理类的优秀APP几乎很少，因此这里我找了以工具使用为主的APP，贝壳找房面向人群更广，主要为大家提供找房信息，他的用户群体主要是用户，当然他希望用户快速登录为主，因此采用了能够高效 *** 作的白色简洁风格，这个样式我从侧面问过经理，觉得不太适合。最后我们决定做两个风格，纯色扁平风格和商务背景能够很好的提现品牌化。

最后，为了提高过稿率，我将最后得出的纯色背景和全屏大图样式各设计了一稿，提交给老板进行反馈。他们选择的是纯色背景的风格样式，到这里我们就成功过稿了。

这个分析过程大家可能会觉得很繁琐，其实当你将收集之后的分类对比分析时，基本就能够确定采用何种风格了，这里提醒大家，你的分析可能和老板预期会有出入，因此最好能够设计两个版本给老板选择，同时分别阐述使用他的原因，这样就能大大提高过稿率。

总结

今天主要以登陆就界面为例，和大家分享设计没想法时可以通过收集、分类、分析对比三个方面进行梳理，帮助我们有理有据的找到适合产品的设计方案，提高过稿率。

1、收集：平时多收集优秀APP，在你不知道怎么做的时候我们可以结合竞品，将这些APP大致过一遍，了解每个行业的设计特点，为后面的分类做准备。

2、分类：通过分类可以就可以知道有哪些风格样式，了解他们的设计优缺点，可以帮助我们做到心中有数。

3、分析：根据产品设计目的，结合上面的样式分析，选出适合我们产品的设计方式。

以上就是我在项目中遇到问题的总结，希望对大家有帮助，看完你可以找个界面来分析试试，看看是不是这样。

当我们打开一个APP时，从视觉层面分析，影响用户对APP整体感官体验的元素主要有：、文字、色彩、图标、留白等。

的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感，从而为整个的产品体验加分。

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

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

目录

1、，如同一个人的衣着品味；

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

3、色彩，如何成为“色”计师；

4、图标，从会画到画好之间有多远；

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

正文

1、，如同一个人的衣着品味

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

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

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

11、比例有什么讲究

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

通过体验一些主流的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的设计中高度最大值为：848px。

比例选择方式：

a以商品展示效果为准，选择能够充分表现商品特点的展示比例；

b以产品气质为准，选择符合产品内容气质的展示比例；

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

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

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

12、比例的一致性

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

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

13、提高的质量

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

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

很多伙伴儿会觉得都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

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

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

c通过制定运营视觉规范来把控质量，是可以严格把控你对的视觉追求；

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

14、的真实还原

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

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

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

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

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

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

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

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

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

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

设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。

22、预估好信息呈现的最大值

当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。

最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。

23、善于利用提示符进行设计

在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。

很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。

在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。

关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

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

色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。

作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

31、色彩基础知识

色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。

32、建立色彩库

作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。

下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。

a通过各类APP采集色彩

体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，

如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。

b通过Dribbble采集色彩

在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。

c通过摄影作品采集色彩

通过优秀的摄影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打开→存储为Web所用格式→选择GIF格式→颜色选择8→颜色表中双击色块→拾色器

d通过马赛克采集色彩

借助Photoshop滤镜将进行马赛克处理，可以得到优秀作品或者摄影的配色组合，特别适合采集同色系的配色。

采集方式：

Photoshop打开→滤镜→像素化→马赛克→设置单元格大小

e从**中采集色彩

相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。

作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。

33、提高审美，增强感性判断力

配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。

我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。

作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。

34、养成分析的习惯

要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

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

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用→动手设计→规范设计→融入品牌基因等几个阶段，你现在属于哪个阶段呢

41、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。

42、动手设计

对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

43、规范设计

当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

44、融入品牌基因

图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

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

a设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；

b筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；

c进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；

设计小结

1不同的比例反应不同的特征，根据产品特点合理的选择；

2设计中保持相同的比例，不仅使视觉表达一致，也能给后期运营维护带来便利；

3通过提高的质量来提高设计作品的美感度，但是也要保证的真实还原；

4文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；

5养成不断建立和丰富色彩库的习惯；

6提高审美，增强感性判断力，养成分析的习惯；

7图标设计经历的几个环节：下载复用→动手设计→规范设计→融入品牌基因；

8适当的留白可以给人更加舒适的体验。

APP界面设计经验总结

当我们打开一个APP时，从视觉层面分析，影响用户对APP整体感官体验的元素主要有：、文字、色彩、图标、留白等。

的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感，从而为整个的产品体验加分。

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

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

目录

1、，如同一个人的衣着品味；

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

3、色彩，如何成为“色”计师；

4、图标，从会画到画好之间有多远；

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

正文

1、，如同一个人的衣着品味

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

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

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

11、比例有什么讲究？

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

通过体验一些主流的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 分析→打破→创新，创造出符合某种规律或者美学概念的比例值。

12、比例的一致性

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

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

13、提高的质量

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

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

很多伙伴儿会觉得都是后期运营上传的，我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的：

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

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

c 通过制定运营视觉规范来把控质量，是可以严格把控你对的视觉追求；

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

14、的真实还原

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

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

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

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

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

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

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

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

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

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

设计师在对文字进行视觉表现时，为了达到整体界面的视觉平衡也需要减少对文字样式的运用，不可为了突出文字信息而采用过多的表现样式。

22、预估好信息呈现的最大值

当我们在进行界面设计时，初级设计师往往会忽略文字信息的最大值，只是按照自己的习惯进行完美的布局。

最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息，此时就会出现返工的情况，给整体的产品开发进度带来风险。

作为一名合格的UI设计师，我们需要预估好信息呈现的最大值，而不是取最小值或者随意进行设计，这样将会在执行的过程中遇到更多不可控的风险。

23、善于利用提示符进行设计

在一些会出现大篇幅文字信息的界面设计中，为了提高用户对信息的获取效率，我们会根据整体视觉效果选择合适的提示符进行设计。

很多初级设计师会过于遵循交互原型，往往对大篇幅文字的处理过于随意，只做着交互原型的美化，缺乏对用户体验的主动性。

在进行产品交互设计时，有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局，我们需要利用自己的专业来优化你觉得可以更好的地方，也能为你在整个产品环节中树立专业性。

关于提示符的设计表现形式主要有数字、字母、图形、色块等等，只要能有效的区分信息层级即可。

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

色彩给人的感受是最直观的，不同性格的配色传达不同的情感。关于配色有一些方法可寻，但是也存在一定的感性判断。

作为视觉设计师，我们需要学习理性的方法技巧，也要不断欣赏优秀的作品，提高自身的审美能力。

31、色彩基础知识

色彩分为无彩色系和有彩色系，无彩色系是指白色、黑色、各种深浅不同的灰色；有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。

关于色彩的更多理论知识这里不做展开，大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。

32、建立色彩库

作为初级设计师我们对配色的把控不是很稳定，为了提高工作效率，我们需要通过一些理性的方式建立大量的色彩库，应对不同的需求。

下面列举部分个人比较常用的方式供大家参考，色彩收集的方法有很多，我们只需要掌握几个比较适合自己的即可，只要养成习惯并长期坚持，哪怕只运用一种方式，也是收获颇丰的。

a 通过各类APP采集色彩

体验不同领域的APP，建立不同领域对APP色彩组合的选择，为后期项目设计奠定基础。根据主色进行分类，

如红色系列：网易云音乐、京东、网易严选、网易考拉等等；也可以根据产品气质分类，如文艺、时尚、科技、可爱等等。

b 通过Dribbble采集色彩

在Dribbble上面，每一幅作品右侧都有该作品的配色文件，发现优秀的作品要养成这种采集配色文件的习惯。

c 通过摄影作品采集色彩

通过优秀的摄影作品采集色彩也是常用的方法之一。

采集方式：

Photoshop打开 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器

d 通过马赛克采集色彩

借助Photoshop滤镜将进行马赛克处理，可以得到优秀作品或者摄影的配色组合，特别适合采集同色系的配色。

采集方式：

Photoshop打开 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小

e 从**中采集色彩

相信大家都喜欢看大片，这部片子之所以能得到大家的追捧，必定有太多值得大家学习的元素。

作为神经敏感的设计师群体，那些刺激到我们神经元的优秀影片场景总是不能错过的。

33、提高审美，增强感性判断力

配色能力虽然可以通过一些理性的方法提高，但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。

我们需要不断的欣赏摄影、绘画、设计作品等等，综合的提高自身的审美，才能不断增强感性的判断力。

作为UI设计师，你不能只关注界面设计，你可以看平面作品、摄影绘画、影视动效，体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。

34、养成分析的习惯

要想拥有良好的配色能力，积累的过程是很重要的。当我们看到优秀的作品，要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。

只有不断的分析和总结才能逐步形式自己的思维方式，提高不同配色的把控能力。

分析的习惯不只是运用在色彩上面，对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结，掌握优秀作品的规则才能形成自我的标准习惯。

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

图标是APP设计中的点睛之笔，既能辅助文字信息的传达，也能作为信息载体被高效的识别。图标也有一定的界面装饰作用，提高界面整体的美观度。

很多初级设计师都会忽略图标的重要性，也养成去素材网站下载复用的习惯，当这样的习惯养成后便会逐步丧失自己动手的驱动力，什么元素都希望能找到素材下载，工作数年之后很快就遇到了自己的瓶颈期。

设计师对图标设计的态度与把控能力，将会是拉开你与其他设计师差距的因素之一。

图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段，你现在属于哪个阶段呢？

41、下载复用

下载复用是很多初入行业的设计师习惯的工作方式之一，由于自身对软件技法、设计技巧、创意能力等方面的不足，无法从创意到标准制图完成一个合格的图标设计。

缺点：图标设计风格与细节处理都完全不统一，这样的习惯一旦养成就会逐步丧失自己的动手能力。

42、动手设计

对于大部分有设计追求的设计师，都会意识到图标设计的重要性，也会结合产品特点绘制统一风格的图标。

注意事项：图标设计风格有：线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。

无论我们选择何种表现形式，在进行设计的时候都要保持风格的统一性，由于图标的体量不同，相同尺寸下不同体量的图标视觉平衡不尽相同，例如相同尺寸的正方形会比圆形显大。

因此，我们需要根据图标的体量对其大小做出相应的调整。

43、规范设计

当设计师养成自己动手的习惯以后，恭喜你已经进步了，保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性，运用标准的规范进行图标设计。

在标准设计的基础上面我们可以发挥自己的创意，也不一定要局限在标准里面，但是总体的本质需要符合设计规范。

44、融入品牌基因

图标设计的差异化逐渐变得模糊，随着很多功能的相似性，图标的造型设计也几乎雷同，很多对设计比较讲究的产品，也开始根据自身品牌基因，进行图标定制化。

融入品牌基因的图标设计具有很强的品牌识别性，不仅可以形成独有的视觉差异化，也可以增强用户对产品的记忆。

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

适当的留白可以让你的界面更有灵性，给信息之间预留更多的空间，也能更好的表达信息之间的层次感，相比拥挤的信息布局更能给人舒适的体验。

当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时，作为设计师我们可以从不同的方向试着表达自己的观点：

a 设计出对比稿，把产品需要的方案和你觉得完美的方案进行对比；

b 筛选出这样处理的优秀案例，以成功的案例说服产品接受你的方案；

c 进行用户测试，选择一些目标用户进行体验，从用户心声入手设计最佳的方案；

d 更多沟通的方法有待你去挖掘，最终的目的都是希望做出更好的产品。

设计小结

1 不同的比例反应不同的特征，根据产品特点合理的选择；

2 设计中保持相同的比例，不仅使视觉表达一致，也能给后期运营维护带来便利；

3 通过提高的质量来提高设计作品的美感度，但是也要保证的真实还原；

4 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等；

5 养成不断建立和丰富色彩库的习惯；

6 提高审美，增强感性判断力，养成分析的习惯；

7 图标设计经历的几个环节：下载复用 → 动手设计 → 规范设计 → 融入品牌基因；

8 适当的留白可以给人更加舒适的体验。

以上就是关于移动产品登陆界面设计全部的内容，包括:移动产品登陆界面设计、界面设计哪里好，一个App的界面设计流程是怎么产生的、如何做好APP界面设计等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！