移动APP界面设计的工作流程是什么

这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸

2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。

这类的解决方案是 我们尽最大努力的去满足用户的情景需求。做到极致和简单。

3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的

这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。

第二点：APP原型图的制作和设计讨论

这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。

常用的APP原型图工具：移动APP原型设计神器 POP 、axure、Foreui等

第三点：APP视觉设计与设计要点

（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等

一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。

另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。

所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。

你必须记住：（1）隐藏设计或者减法设计 （2）分区或分类 （3）帮用户做决策 （4）提高交互创新设计 （5）让人有爽快感和新奇感 （6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）

一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”

2014年 APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！

第四点：APP界面设计流程

（1）. 设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。

（2）. 放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有

（3）. 并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。

（4）. 由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。

（5）. 整个设计过程中不断问自己“真的需要吗？” 。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，

但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。

第五点：APP界面设计测试与预览修正

设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

1.显著性元素的重要性

大家在阅读界面的时候，往往会忽略界面的显著对象，抓不住想要表达的重点，显著性要素主要分为感觉和认知两大类。感觉类的主要体现颜色、位置、大小等物理特征，而认知类的就反映出来物体与人的关系。合理的运用这些元素可以有效的分解观者的注意力，形成和谐统一的界面。在这里要注意采用的元素不要过多，会造成视觉的复杂感。

2.要注意视觉和心理需求

大脑中枢在处理看见的信息时，会根据自己的兴趣对待视觉刺激强度强的事物首先分配注意力，那么这就要求我们在运动appp界面设计时要考虑视觉的需求和心理的需求。也要随着界面的即时性改变设计。

现在为了提高用户的黏度，很多app加了社交的板块，那么我们在处理这个板块的时候应该对这个板块简化，进行合理化设计。平衡工具的使用和社交板块的使用情况。

减轻用户认知负荷，获得良好的用户体验，在信息的布局上要构建科学合理、自然流畅、舒适愉悦的视线流与操作流。视线流是用户视觉焦点在界面上的流动轨迹，操作流是用户操作界面形成的触点移动轨迹。人的视线习惯是从上到下、从左到右，且水平运动快于垂直运动，因此，界面中左上象限比其他象限更容易获得注意，F 型、Z 型布局形式符合视线习惯。此外，格式塔的接近性、相似性原理让界面上的信息以分组的方式呈现，通过将同类元素进行分组，采用一致的视觉风格，也可以创建清晰的信息布局。界面设计就像画画一样，需要有明确的视觉焦点和视觉流程。

3.注意用户的定势和期望

定势指的是某种活动前的心理预备状态，而期望是指对某个事物发展的预设。当用户对界面中某个元素不能产生定势和预期，将会对知觉造成不利影响，也容易诱发视盲。在交互设计的后隐喻时代，拟物化和过度修饰已经成为了过去，用户更期待高效和降低认知负荷，扁平化风格兴起。一味追求扁平化，也会造成界面的同质化问题，因此，界面设计的细节将决定产品的品味和档次。

在扁平化的设计风格中，渐变的颜色可以称之为设计的细节。当界面中一个交互点击按钮控件采用渐变颜色，会让这个控件更具有按钮的隐喻，就好像在提示用户“点击我”，提升了界面的易用性。控件需要有文本或图标来辅助指明其意义，降低用户的认知成本，形成注意定势和心理预期，能更好地获得注意资源的分配。

4.提升用户对界面内容的加工能力

加工能力指的是一个人同时能够注意的刺激或信息的数量。尽量可视化信息有助于减轻认知负担。

如何将运动类 APP 的数据可视化？运动类APP的数据大多采用柱状图、甜圈图、曲线图、表格等统计图表来展示，呈现较为精准的数据量化对比、分布情况、频率高低、比例大小等参数的特征，准确高效地表达数据。考虑到人的信息加工能力有限，会将数据进行分层级聚合，譬如时间序列属性的数据按照日、周、年聚合，让用户进行切换选择。

运动类app界面设计主要考虑以上要素，我们在经过不断优化之后，可以改善软件的应用性，也可以增加用户的黏度，提升体验感，给客户带来视觉享受之外还带来二次关注。

更多设计知识，设计学习资源，设计书籍，欢迎浏览我的主页资料，感谢你的阅读，祝你生活愉快！

1、app界面设计需要用户拥有设计知识和编程知识，手机主题设计并没有对编程知识的需求。

2、手机主题设计只需要对部分应用的图标进行设计，app界面设计需要对app的每个界面和全部的按钮进行设计。

当我们打开一个APP时，从视觉层面分析，影响用户对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 拥抱黄金比例

黄金比例就像金字塔上的明珠，越接近她越有魅力，反之会魅力减弱，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、对文字信息进行层级区分

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1、色彩基础知识

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

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

3.2、建立色彩库

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

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

a. 通过各类APP采集色彩

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

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

b. 通过Dribbble采集色彩

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

c. 通过摄影作品采集色彩

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

采集方式：

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

d. 通过马赛克采集色彩

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

采集方式：

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

e. 从电影中采集色彩

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

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

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

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

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

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

3.4、养成分析的习惯

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

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

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

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

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

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

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

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

4.1、下载复用

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

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

4.2、动手设计

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

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

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

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

4.3、规范设计

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

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

4.4、融入品牌基因

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

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

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

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

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

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

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

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

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

设计小结

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

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

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

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

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

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

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

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

PPI(Pixels per inch)：每英寸所拥有的像素数，即像素密度。

DPI(dots per inch)：即每英寸上，所能印刷的网点数，一般称为像素密度。ppi计算公式：ppi = 屏幕对角线像素数/屏幕对角线英寸数，通过勾股定理计算屏幕对角线像素数。

Screen Size(屏幕尺寸)：手机屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是对角线的长度。

DIP（device independent pixel）：即dip/dp，设备独立像素。 1px = 1dp density(由dpi决定)

Resolution(分辨率)：指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800，指该设备垂直方向有800个像素点，水平方向有480个像素点。

px(Pixel像素)：相同像素的ui，在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真，大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次： 120 dpi、160 dpi、240 dpi、320 dpi ，具体见如下表格。

实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。

也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的公倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。鉴于以上各种原因， 标准dpi=160

谷歌官方对dp的解释如下：

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

简单来说，以160dpi的设备为准，该设备上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2个像素)。在app开发时，最好用dp来做界面的布局，以保证适配不同屏幕密度的手机。

dp和px的换算公式：

我的理解，该公式表示px的数值等于dp的数值*（设备dpi/160）

注意，px、dp是单位，但density没单位。

applyDimension的源码如下，可参考：

android的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

app启动图标为48*48dp，对应各dpi设备，图像资源像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|48 48px|72 72px|94 96px|144px 144px|

操作栏图标为32*32dp，对应各dpi设备，图像资源像素如下：其中图形区域尺寸是24*24dp，可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|32 32px|48 48px|64 64px|96px 96px|

通知栏图标为24*24dp，对应各dpi设备，图标像素如下：

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|24 24px|36 36px|48 48px|72px 72px|

某些场景需要用到小图标，大小应当是16*16dp，其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|16 16px|24 24px|32 32px|48px 48px|

通过对市场分析、竞品分析、用户分析等过程，确定APP整体的开发方案，明确用户使用这款APP的需求什么？如何满足用户这方面的需求？需要怎么设计功能模块等问题。

可以先从大的功能模块入口，然后细分小的功能，再梳理业务流程、用户体验流程等等，对功能模块的重要性、时序进行排序。

第二步：制作草图

按照前期规划的APP功能模块、时序图、用户体验流程等，通过线框的形式，制作出的APP的草稿图。自己可以用纸画，也可以使用办公软件。

第三步：制作原型图利用专业的原型设计软件，对草图进行细节完善，设计出整体的APP原型图。

第四步：风格设计

每个人都有着不同的个性，APP设计也是如此，我们需要为APP打造出独具特色的风格。

这可以寻找同行的APP作为参考，然后设计出几套不同风格的样品提供选择。

第五步：页面设计

根据确定好的风格、原型图，对APP的页面进行效果图的设计。

包括logo、启动页、内页、页面元素、填充页、动态的产品页、活动页等等，完成APP界面设计。

同时也要给出切图标准，方便后续的编程开发。

1、移动app界面设计的技巧——重叠

重叠的字体、图形和颜色不仅让界面看起来更生动，还创造了空间感。这就是为什么在不同的应用程序用户界面设计中，设计者广泛使用重叠元素的原因。

此外，在某些情况下，相同元素的重叠，加上阴影，可以使应用程序界面的整体设计更加令人兴奋。

2、移动app界面设计的技巧——颜色渐变

在过去的几年里，许多设计师使用了移动应用程序界面设计的技术，颜色梯度，试图设计标志，按钮和应用程序界面的背景。如果你问为什么，答案很简单——即使你只选择一种颜色，你也可以通过创建丰富的色彩梯度和不同的图像层次来创建一个令人愉快的图像。

3、移动app界面设计的技巧——不透明度

在调整或重置透明度后，相同的元素可以产生不同的效果。因此，在设计一个应用程序界面时，设置不同元素的不透明度是创建一个好的设计工作的好方法。

此外，不同的颜色或形状的透明度设置也可以创建彩色玻璃纹理的效果。这就是为什么设计师将这种方法应用到他们的标志设计中。

简而言之，无论您如何将不透明度应用到您的应用程序的用户界面设计中，设置不同元素的透明度将在您的设计中发挥重要作用。这招永远不会过时。

4、移动app界面设计的技巧——简单曲线和几何

越来越多的移动应用界面设计技巧倾向于在应用界面中采用更简单、更自然的设计风格，而不是复杂多变的用户界面设计风格。例如，使用大量简单曲线、几何图形和按钮的用户界面设计可能比包含各种颜色、图形、按钮、图像、动画和更复杂元素的应用程序界面更容易关注应用程序的基本和主要功能。

5、移动app界面设计的技巧——对比颜色或字体以提高可读性

强烈的颜色或字体对比也可以帮助设计师创建一个吸引用户注意力的良好用户界面。例如，添加不同的样式、类型和字体大小也可以传达层次感和空间感。不同类型和风格的色彩搭配也会形成鲜明的对比，使整个设计更加丰富多彩，引人注目。

6、移动app界面设计的技巧——人格图

个性化插图在应用程序界面设计中也扮演着重要的角色。在app界面上有多种插画风格，有手绘的，简约的，剪纸的，还有著名的插画。这些插图样式的使用不仅使应用程序更加有趣和不同，而且也赋予了应用程序个性。在无穷无尽的应用程序流中，用户会更加印象深刻。

7、移动app界面设计的技巧——功能动画与交互

在app的图标、字体、照片和按钮中，添加动画或交互对用户有积极的影响，因为它可以让用户体验更加愉快。

手机应用程序界面设计的诀窍是在应用程序界面的细节上添加更多的交互设计，使用户能够轻松使用应用程序并快速获得反馈。这绝对是一个好的设计趋势。有抱负的设计师应该顺应这一趋势，在未来丰富自己的应用界面设计。

8、移动app界面设计的技巧——语音控制功能

应用程序的声控界面简化了用户的操作。和Siri一样，该应用程序可以通过语音命令启动或登录，而不需要点击按钮或输入密码。

当然，除了语音控制，指纹控制将继续在未来的移动应用界面设计中发挥重要作用。

环球网校小编为大家整理的《有哪些移动app界面设计的技巧，可以令ui设计变得更加精彩?》到这里就结束了，如果你希望能将这篇文章灵活应用，还需多加练习，如果你还想学习更多有关UI设计的技巧或知识，可以点击本文其他文章进行学习。

任何一款App都是有共同的特点的，或者叫共同的结构、功能、规则，我总结了就四个字：栏、图、控、框。

“栏”指的是App界面中存在着很多栏：

（1）状态栏：一般位于界面顶部，我们在手机上看到的手机信号、时间、通知、电量等都是位于状态栏；

（2）导航栏，也叫标题栏：多数情况下，App每个页面仅次于状态栏下会有导航栏，告诉用户你现在处于什么位置，当然有些App的一些界面并没有导航栏，其实并不是没有导航栏，只是留有位置没有文字而已；

（3）标签栏：有很多新人容易把标签栏和导航栏搞混了，这也许是受Web端产品中“导航”所影响，App中一般位于底部或者顶部的，用于大版块切换的栏，就是标签栏；

（4）工具栏：用于执行针对当前页面的操作的栏，比如留言框、收藏、分享、点赞等按钮所处的栏；(一般打开具体内容页面时才存在，也就是微观页面上才有），

（5）筛选栏：筛选栏并不是所有App都会有，一些信息维度比较多的App，比如招聘类App，会有筛选栏，支持按条件筛选，一般位于导航栏下方；

（6）搜索栏：这个很直观了，就是执行搜索功能的栏，一般和导航栏重叠或者位于导航栏下侧。（现在很多时候位于导航栏一行）

“图”即“视图”，请注意“视图”不是界面，而是代表着一种视图结构。视图分为宏观视图结构和微观视图结构。

宏观视图结构 分为集合视图和列表视图

微观视图结构

例如：列表视图中每组信息可以是文本视图（纯文本）、图文视图（纯图片）、文本+图片视图，在一些较个别的App中还存在“卡片视图”，比如探探，一个界面就一个视图，可以以卡片形式，通过滑动切换视图内容。

“控”指的是“控件”，说起控件，App里面的控件真是太多了，不说具体的，就按照类别划分：最常见的各种 按钮控件、轮播控件、文本控件、分段器控件、选择控件、计数器控件、加载控件 等。

“栏”、“图”原本都是静态的，可是为什么能有交互，就是因为在旁边或者上面添加了控件。

“框”要比前面三种元素出现的频率低，一般在特殊情况下才会出现。这也符合多数情况下，App应用是稳定的、安全的，少数情况下会出现波动或者风险的实际情况。当我们要删除一条信息，会有对话框提示，当网络不佳时页面加载缓慢或者失败，会有toast提示，当需要注册时会有注册框等等。目前，用的最多的就是对话框和toast，ios中对话框叫做“Alert View”，安卓系统中对话框叫做“dialog”。

讲到这里，一款App，不管它的定位、性质、功能是什么样的，基本都离不开以上四部分，换句话说，以上四部分组成了App的界面，有了这四部分，你的App可能还不是很完美，但起码算是完整了。对于已经有多年产品经验的老人来说，这确实不够，但是对于新人来讲，掌握“栏”、“图”、“控”、“框”这四字要诀，你在设计App界面时不会丢三落四，不会找不到着眼点。

想象一下，你在设计App的首页时，从上往下要有状态栏、导航栏、搜索栏（可选）、标签栏，安插了轮播控件的banner位，以列表形式结合图文形式的视图界面，每个图文视图安插了按钮控件，下拉或者上拉或者点击标签栏“首页”按钮出现了加载或刷新插件。

1、移动app的界面设计技巧——无限滚动的魔力

对于移动应用程序设计来说，这个预测实际上是相当大胆的。但随着流行的配色方案、大图和现代字体的新鲜元素，设计师们越来越接受这种方法。不过，值得注意的是，如果用户不能从一个页面导航到另一个页面，他们可能会为所花的时间而烦恼。这可能是无限滚动页面设计本身的简便性的缺点，而这正是吸引用户的地方。

2、移动app的界面设计技巧——大胆的字体应用程序

每个应用程序都试图吸引用户的注意力，而粗体字体应用程序就满足了这一需求。在目前的市场形势下，大屏手机和平板电脑是主流，这是一个非常重要的后台使用。移动应用程序上的大字体会为特定元素赋予界面层更多的视觉分量，让它们令人难忘。字体大小、优雅性、唯一性和适配性也可以提高页面的质量和特性，这是移动应用程序设计的另一个重要机会。

3、移动app的界面设计技巧——简单的配色

简约美是近年来最流行的设计理念。更简单的配色方案也符合这个想法。新IOS中流行的霓虹灯色彩的影响已经减弱。现在用户更喜欢微妙和有质感的颜色。整洁和清洁是艳丽的色彩，它们凌驾于时尚之上。

环球网校小编为大家整理的《身为一名ui设计师，要了解哪些开发移动app的界面设计技巧?》到这里就结束了，如果你希望能将这篇文章灵活应用，还需多加练习，如果你还想学习更多有关UI设计的技巧或知识，可以点击本站的其他文章进行学习。