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

这里我画了几种移动端常见的页面布局和他们的各自特点：

1，列表式布局

2，陈列式布局

3，九宫格式布局

4，选项卡式布局

5，轮播图式布局

6，伸展式布局

7，抽屉式布局

8，弹出框式布局

9，横向拓展式布局

10、多面板式布局

1，列表式布局

特点：

内容从上向下排列，导航之间的跳转要回到初始点。

优点：

1、层次展示清晰

2、视觉流线从上向下，浏览体验快捷

3、可展示内容较长的菜单或拥有次级文字内容的标题

不足：

1、导航之间的跳转要回到初始点

2、同级内容过多时，用户浏览容易产生疲劳

3、排版灵活性不是很高

4、只能通过排列顺序、颜色来区分各入口重要程度

场景：

列表菜单适合用来显示平级菜单，且较长或拥有次级文字内容的标题

2，陈列式布局

特点：

布局比较灵活，设计师可以平均分布这些网络，也可根据内容的重要性不规则分布，相对列表式，其优点在于同样的高度下可放置更多的菜单，更具有流动性，曝布流就属于其中一种。

优点：

1、直观展现各项内容

2、方便浏览经常更新的内容

不足：

1、不适合展现顶层入口框架

2、容易形成界面内容过多，显得杂乱

3、设计效果容易呆板

场景：

适合以图片为主的单一内容浏览型的展示

3，九宫格式布局

特点：

相比陈列馆式，布局比较稳定为一行三列式布局。

优点：

1、清晰展现各入口

2、容易记住各入口位置，方便快速查找

不足：

1、菜单之间的跳转要回到初始点

2、无法向用户介绍大概的功能，只能点击进去才能获知，初始状态不如列表式明朗

3、容易形成更深的路径

4、不能直接展现入口内容

5、不能显示太多入口次级内容

场景：

适合入口比较多的展示，而且导航之间切换不是很频繁的情况，也就是业务之间相对独立，没有太多的瓜葛。

4，选项卡式布局

特点：

导航一直存在，具有选中态，可快速切换到另一个导航。

优点：

1、减少界面跳转的层级

2、分类位置固定

3、清楚当前所在的入口位置

3、轻松在各入口间频繁跳转且不会迷失方向

4、直接展现最重要入口的内容信息

不足：

功能入口过多时，该模式显得笨重不实用

场景：

大部分放在底部，方便用户操作，切换的时候，选中状态高亮显示，有少数放在顶部。适合分类少及其内容同时展示，导航菜单项数量为3-5个；各导航菜单项之间内容/功能有显著差异；用户在各个导航选项之间需要非常频繁的切换操作

5，轮播图式布局

特点：

重点展示一个对象，通过手势滑动按顺序查看更多

优点：

1、单页面内容整体性强，聚焦度高

2、线性的浏览方式有顺畅感、方向感

不足：

1、受屏幕宽度限制，它可显示的数量较少，需要用户进行主动探索

2、由于各页面内容结构相似，容易忽略后面的内容

3、不能跳跃性地查看间隔的页面，只能按顺序查看相邻的页面

场景：

适合数量少，聚焦度高，视觉冲击力强的图片展示

6，伸展式布局

特点：

能在一屏内显示更多的细节，无需页面的跳转

优点：

1、减少界面跳转的层级

2、对分类有整体性的了解

3、清楚当前所在的入口位置

不足：

分类位置不固定，当展开的内容比较多时，跨分类跳转不方便

场景：

适合分类多及其内容同时展示

内容展示的信息多

7，抽屉式布局

特点：

突出核心功能，隐藏其它功能。

优点：

1、不占用宝贵的屏幕空间，让用户首先能聚焦于内容

2、导航的菜单项目不受数量限制，应用的所有信息组织入口都可以加入到抽屉导航中

3、扩展性强，配置灵活，一些常用的快捷操作功能和低层级界面入口也能直接放置进抽屉导航中

不足：

1、隐藏框架中其他入口、用户需要一定记忆成本

2、对入口交互的功能可见性要求高

3、容易与应用内的其他交互模式冲突，比如侧滑手势操作

场景：

适合功能较多，信息结构较复杂的产品，用户的注意力聚焦在主信息流的浏览上，不用频繁切换“子产品模块”，且扩展性比较好

8，弹出框式布局

特点：

没有跳出感，适合内容比较少和简单操作的呈现。

优点：

1、在原有界面上进行操作，不必跳出界面，体验比较连贯

2、在用户需要的时候才显示（重要提示除外），不主动干扰

不足：

1、显示的内容有限

场景：

适合内容较少的显示

9，横向拓展式布局

特点：

节省空间，可使用箭头，圆点或显示不全的图片告诉用户还有更多的内容可查看。

优点：

1、查看更多内容不必跳出界面，体验连贯。

2、节省空间。

不足：

横屏宽度有限，更多的内容有数量上限制。

场景：

适合图片或信息组块更多的展示方式。

10、多面板式布局

特点：

能同时呈现比较多的分类及内容。

优点：

1、减少界面跳转的层级

2、对分类有整体性的了解

3、分类位置固定

4、清楚当前所在的入口位置

不足：

1、界面比较拥挤

场景：

适合分类多及其内容同时展示

内容展示的信息不多

以上都是基本布局，在实际的设计中，我们需要结合具体的数据结构特点选用合适的布局，把不同的布局像搭积木一样组合起来完成复杂的界面设计，要考虑信息结构、重要层次以及数量上的差异，提供最适合的布局，以增加产品的易用性和交互体验。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、android篇

1、android分辨率

Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi

注意，ppi、dpi 是密度单位，不是度量单位 ：

dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。

ppi的运算方式是：PPI = √（长度像素数² + 宽度像素数²） / 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。

以iphone5为例，其ppi=√（1136px² + 640px²）/4 in=326ppi（视网膜Retina屏）

对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近 320 dpi （xhdpi模式），480 x 800 的手机很可能接近 240 dpi （hdpi模式），而320 x 480 的手机则很接近 160 dpi（mdpi模式）。

2、单位换算方法

android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。

简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。

为什么要把sp和dp代替px？ 原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。

根据单位换算方法，可总结出：

当运行在mdpi下时，1dp=1px ：也就是说设计师在PS里定义一个item高48px，开发就会定义该item高48dp ；

当运行在hdpi模式下时，1dp=1.5px ：也就是说设计师在PS里定义一个item高72px，开发就会定义该item高48dp ；

当运行在xhdpi模式下时，1dp=2px ：也就是说设计师在PS里定义一个item高96px，开发就会定义该item高48dp ；

当你的app需要适配多个dpi模式的时候，请参考图1的比例进行换算 。

3、设计稿基本元素的尺寸设置

为了适应多分辨率的手机，理想的方式是为每种分辨率做一套设计稿，包括所用到的icon、设计稿标注等。但在实际开发中，这种方法耗时耗力。所以通常会选择折中的方法。

方法一 ：在标准基础上（比如xhdpi）开始，然后放大或缩小，以适应到其他尺寸。不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。

方法二： 以最高分辨率为基准设计，然后缩小适应到所需的小分辨率上。缺点是，图标等若都最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。

结合友盟的分辨率占比数据、也为了方便换算到android开发中的尺寸单位， 推荐设计稿的画布尺寸选用 720x1280 ，分辨率仍旧为72ppi（像素/英寸）。

在android规范中对于导航栏、工具栏等的尺寸没有明确的规定。但根据48dp原则，以及一些主流的android应用的截图分析，总结一下尺寸要求：

状态栏高度 ：50 px

导航栏、操作栏高度 ：96 px=48dp x 2

主菜单栏高度 ：96 px

内容区域高度 ：1038 px （1280-50-96-96=1038）

Android最近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，高度也和菜单栏一样为：96 px

4、图标和字体大小（来自官方规范文档）

a、启动图标（home页或app列表页）

整体大小为48 x 48 dp

b、操作栏图标，代表用户在app中可以使用到的最重要的图标

整体大小为32 x 32 dp ，图形实际区域为 24 x 24 dp

c、小图标/场景图标，提供操作或特定项目的状态。

比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ，图形实际区域为 12 x 12 dp 。

d、通知图标

如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。

注：android规范提供的尺寸单位是dp，若设计稿尺寸设为720 x 1280 ，图标大小需在规范要求的尺寸数字上乘以2。比如操作栏图标32 x 32 dp ，则设计稿上应该是64 x 64 px 。

e、字体大小

Android规范中的要求如下：

前面提到Android开发中的字号单位是sp，而换算关系是 sp*ppi/160 = px 。所以720 x 1280尺寸的设计稿上，字体大小可选择为 24px 、28px 、32px 、36px ，主要根据文字的重要程度来选择，特殊情况下也可能选择更大或更小的字体。

f、其他尺寸要求

通常把48dp作为可触摸的UI元件的标准。

为什么要用48dp呢？一般来说，48dp转化为一个物理尺寸约9毫米。通常建议目标大小为7-10毫米，以方便用户手指能准确并且舒适触摸目标区域 。

如果你设计的元素高和宽至少48dp，你就可以保证：

（1）触摸目标绝不会比建议的最低目标（7mm）小，无论在什么屏幕上显示。

（2）在整体信息密度和触摸目标大小之间取得了一个很好的平衡。

另外，每个UI元素之间的空白通常是8dp 。

二、iOS篇

1、分辨率

iPhone 界面尺寸：

iPad 界面尺寸：1024×768、2048×1536

（以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都只要 72 ppi）

2、单位换算px、pt

这里需要先区分pt、px，pt(磅值)是物理长度单位，指的是72分之一英寸。手机上看来同一大小的字磅值是一样的，但是换算成不同分辨率手机的字号px值不一样。（px=pt*ppi/72）

iPhone在出retina屏(也就是4S)之前的屏幕像素是320x480px，屏幕密度是163ppi，4S的屏幕像素是640x960px，屏幕密度是326ppi，翻了一倍。iPhone5的ppi没有变化，兼容性方面要增加类似首屏画面等程序上的判断。

在iPhone界面上元素的定位、尺寸是通过一个单位point，而非px，屏幕上固定有320x480pt，retina屏两倍的分辨率改变的只是pt和px之间的比例而已，这样就能实现不改变程序，只上传两套图片就兼容两个分辨率。

****在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用 640×960 或者 640×1136 的尺寸设计。其中设计稿的画布分辨率设为默认的72ppi（此时1px=1pt ），所以设计师可以统一采用px为单位。

开发拿到设计稿时，将上面标注的以px为单位的字号大小、图像尺寸除以2，就是非retina屏上的pt值，这样在retina屏上也可以根据此pt值换算对应的px大小，以确保不同的分辨率下有合适的效果。****

3、基本元素的尺寸设置

iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域。

这里取用 640×960 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：

状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40 px

导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px

主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px

内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px=960-40-88-98

以上尺寸适用于 iPhone 4、4S，iPhone5/5s 的 640×11136 的尺寸，其实就是中间的内容区域高度增加到：910 px，其他尺寸也同上。

4、常用图像、图标大小（来自官方规范文档）

单位：像素

5、字体大小

iOS交互设计规范文档上，对字体大小没有做严格的数值规定，只提供了一些指导原则：

单位：点pt

– 即便用户选择了最小文字大小，文字也不应小于 22 点。作为对照，正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。

– 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。

– 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。

– 标题和正文样式使用一样的字体大小。为了将其和正文样式区分，标题样式使用加粗效果。

– 导航控制器中的文字使用和大号的正文样式文字大小（明确来说，是 34 点）。

– 文本通常使用常规体和中等大小，而不是用细体和粗体。

百度用户体验做过的一个小调查：

单位：像素px

还有个方法就是找你觉得好的APP应用，手机截图后放进PS自己对比调节字体大小。

        在界面视觉设计中，色彩的设计是带有一定主观因素的，它是否受到欢迎，与产品的目标用户群体的主流感觉和审美文化相关。但色彩信息是一眼就能识别的信息，因此相较界面视觉元素中的形状、大小等其他元素信息，色彩信息处于视觉关注的第一层级。俗话说“万绿从中一点红”在树丛中分辨花朵要比分辨大小叶片要容易得多。在考虑颜色的选择时，绝对不能基于主观想象的，要首先融入用户的目标、环境、内容和品牌定位等先决条件来考虑，再考虑的才是颜色本身。如此才能保证情感化设计的顺畅交流。

（一）主色风格要突出。色彩首要是要有统一性，在一个界面中，特别是次层级界面，很忌讳用太多不同颜色。色块的大小很容易引导人的视线走向。在界面设计中，这色调的颜色选择一般和品牌的 logo 色保持一致。大色块有助于稳定整体界面的主题或是渲染气氛，小面积的色块用来点缀丰富画面。这样的色彩运用，不仅可以加强界面的易用性，使要找的东西一目了然，达到信息交互的顺畅性。并且能够使得用户通过色彩能够对品牌有一定的记忆性，增加品牌对用户的印象度。

（二）个性化辅助色。在界面设计中，常常说色不过三，色彩的使用越简约越好，因为过度的颜色会硬性的分割界面的信息分区，会导致信息导向混乱。但也不是说完全只用单一色来设计，如果单一用色，会让交互情感交流过程略显得乏味，也使得界面缺少个性。也可以适当使用冷暖对比色或是互补色来辅助主色，这样的界面色彩往往能达到很和谐的效果，让人觉得舒服。