app界面设计怎么做（如何设计app界面）

如何优雅的设计APP页面

小密圈被封了一段时间后终于重见天日了，这篇文章就来回答小密圈里的一个提问：如何设计一个APP页面。

看到这种提问，内心一般是抗拒的，因为产品设计是一个系统工程，单独拧出来其中一个流程来讲，都是割裂的，但在实际中又必须割裂出来，因为只有割裂出每个流程，把每个流程都想通想透，才能组成完整的产品设计的知识体系。那怎么来权衡整体和局部，系统和部件，也是一门大学问。

1.明确页面设计在整个产品设计中的位置

互联网产品设计的流程大致是：产品定位——需求分析——信息架构设计——流程设计——页面框架设计——设计说明——输出设计文档。可以看到页面设计是处于整个流程的后期，所以前期必须去和产品经理或者用研人员反复沟通，明确产品定位、明确需求、了解业务流程，然后再梳理信息架构、产品的导航形式、任务流程和页面流。不管产品经理还是交互或UI，都要去了解这些，并反复沟通，这是基础，所有的设计脱离了用户和需求都是耍流氓。

其实这也是我在以前文章中反复强调的，只要你从事的是产品设计的工作（目前涉及到的分工主要有产品经理、交互设计师、视觉设计师），都要从产品设计整体去思考问题，产品经理不要只想着需求，交互也不能只想着体验，视觉也不能仅仅思考美不美观，这种眼界的提升，会直接影响到设计方案。

如果你已经建立了整个产品设计的知识体系，这只是之一步，下一步你还有考虑产品运营，考虑商务、考虑资本，这些都是需要设计师去了解的。周末和朋友聊天的时候，他打了个很好的比喻，把公司比作一个人，那么不同的职位就相当于每个人的感官和外在，产品相当于一个人的大脑，视觉相当于一个人的衣品，商务相当于一个人的沟通能力...。你如果只了解人的一个部分，就永远没办法理解这个人。

我目前就在深耕产品设计的基础上，在学习产品运营的知识。

2.确定页面目的和目标

明确了页面设计的上游的流程，接下来要做的，是确定页面的目的和目标。

目的和目标是两个概念，目的是你为什么要设计这个页面，目标是设计这个页面想要达成什么。例如，电商的商品详情页目的是介绍商品、帮助用户进行购买决策，目标就是提高用户下单的转化率。

作为同样的商品详情页面，不同的目的和目标，直接影响到设计形式。例如京东是自营商品，用户一次性购买的越多，其客单价会更高、运营成本也会更低，所以它的商品详情页的主要目标是提高加入购物车的转化率。而 *** 作为一个平台，单独购买一件商品和一次性购买多件商品都很重要，所以它的加入购物车和立即购买的优先级是同等重要的。

记住：明确页面目的和目标，这是你设计一个页面的指导思想。

3.确定页面的来源和去处

任何单独的页面都只是用户完成某个任务的其中一环，这个页面从哪来？能去哪？影响着页面的导航设计、以及工具栏上按钮的摆放。

为了延续性，继续拿 *** 详情页来举例。

返回页面按照设计规范，基本会放在标题栏的左侧，也有一些小众APP考虑到单手操作放在页面底部，其它如分享和更多一般会放在标题栏的右侧。另外针对当前页面的一些操作会放在工具栏上，例如 *** 的 *** 、店铺、收藏、加入购物车、立即购买；例如资讯类APP的留言、点赞、收藏等。

在考虑页面的去处的时候，一般有二级页面的形式和临时框的形式，临时框又有模态和非模态的区别。例如 *** 的立即购买就用了模态临时框，而没有采用二级页面，这能减少用户在完成一个任务时的跳转步骤，提高转化率。

4.确定页面内容和优先级

经过前面三个步骤，页面框架基本成型，现在就要往这个框架填充内容。根据信息架构设计，基本会确定这个页面需要包含哪些内容（关于信息架构设计，可以参考 《90%的设计师都不知道的信息架构知识》 ）。

其次就要确定页面信息的优先级，确定优先级的判定依据就是之一步所说的当前页面的目的和目标，以及在做需求分析的时候，公司价值和用户价值两个价值维度的考量。而优先级对设计的影响有一下几点：

①用对比的手法，明确信息层级，优先级越高信息表现越突出。例如上图格和销量字段的对比；

②优先级更高的放在用户之一眼能看到的位置（页面的之一屏）。例如将商品图片、标题、价格放在之一屏的位置，评论则放在第二屏的位置；

③优先级低的要弱化、甚至是隐藏或删除。 *** 、店铺和收藏的按钮相对于加入购物车和立即购买，很弱，消息、帮助、我要反馈则更弱，所以被收起在右上角更多的icon中。

5.考虑技术的局限性

上次在做阅读APP的时候（pad平台），需要在E-Ink屏上的阅读页面增加竖屏模式，这种模式会更利于用户进行阅读的，类似于kindle的阅读体验。但是因为下屏没有做G-senser，所以是不支持竖屏的，只好放弃。如果我实现不去了解这点，做出来的方案只是浪费时间。

现实做设计的过程中还有很多类似的例子，不管是交互还是视觉，总是会想到一些创新好玩的设计形式，每当这个时候一定要去和相关技术人员沟通，确保设计方案的可行性。此外还要考虑项目周期，如果上线时间紧迫，其实是不允许设计师把设计形式做得很重的，只需要出一个简单的保底方案即可。

我自己就有在做设计之前和相关技术沟通想法的习惯，真的帮助很大。

还是文章前面的那句话，页面框架设计只是整个产品设计中的一环。不要把眼界局限在这一环，也不要只站需求、只站在交互、只站在视觉上思考问题，这样你永远是个美工，而不是一个设计师。设计师是一个能用设计语言提供系统性解决方案的人，而不是简单画图的人。

如何做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界面设计作品必然是要经过不断升级、重复迭代的。

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

现在做设计，如果说你是平面设计师，不足为奇，如果说你是网页设计师，哎哟，不错哦，如果是你是设计APP界面设计师的，那也许听着就有点不让人明白了，后来看看他们手机上安装的各种应用，才明白，移动APP界面设计师是做什么的。

本文不讲述移动界面设计师的介绍，总体来说是针对移动端APP应用做的界面设计，但是很多人不清楚移动APP界面设计师的工作流程是怎样的，在此，北大青鸟ui培训老师带你一步一步了解。

之一步：交互流程设计

APP的交互流程设计，简单来说就是构造框架，像造房子一样，有了清楚的平面图纸才可以增砖添瓦，设计交互流程时应该对应用的功能需求有清晰的把握。

第二步：风格定位

比如说图片分享类应用图片是最重要的视觉元素，应用的设计风格应当符合视觉流程，table需要引导用户操作。

第三步：功能icon设计

功能图标即在你的应用中，充当表达某一操作或功能示意的图形，功能图标设计应极可能形象，简洁，以准确表达其代表的功能。

第四步：界面视觉效果整体优化

选用图片的时候，应该尽量按照应用的风格选取，比如这APP主打是图片分享，那么可以选取视觉靓丽，有冲击力的图片添加分享。

第五步：应用icon设计

对这款APP进行最终的icon设计，能够更优化的，最靓丽的代表这款APP的特色，品牌等形象。

第六步：完稿交接软件工程师

我们做移动界面设计，做的是各个页面的形象，具体功能实现是需要与软件工程师沟通的，在能够完成软件开发的情况下，进行一步步的界面设计，更大化增加用户体验，吸引用户，最终完美的完成这份设计。

以上内容是作者对我们学习UID培训课程的同学在以后的移动界面工作当中的一个工作流程的简单介绍，以后学员如果在UID培训课程当中学习到第三阶段的界面设计课程的话，一定要好好研究，老师对于界面设计的操作流程一定会更加的细致讲解。