app界面设计(app界面设计用什么软件)

如何做APP界面设计？

第一点：了解你的目标客户群的心态\x0d\x0a1、做微任务的目标客户群(如随时随地看看新闻，听听歌，看看电影，聊聊八卦之类)：\x0d\x0a这类的解决方案是设计的app最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸\x0d\x0a2、喜欢当工具来使用的目标客户群：比如找地图，看天气，查数据等。\x0d\x0a这类的解决方案是我们尽最大努力的去满足用户的情景需求。做到极致和简单。\x0d\x0a3、无聊的客户群，用来打发消磨时间的：无需求，漫无目的的\x0d\x0a这类的解决方案是尽可能展示用户感兴趣的东西，帮助客户来打发消磨时光。\x0d\x0a\x0d\x0a第二点：APP原型图的制作和设计讨论\x0d\x0a这个环节是必不可少的。需要根据设计需求认认真真的来画画原型图。\x0d\x0a常用的APP原型图工具：移动APP原型设计神器POP、axure、Foreui等\x0d\x0a\x0d\x0a第三点：APP视觉设计与设计要点\x0d\x0a（1）大概设计板块有APP启动页面设计，APP界面设计的尺寸规范，app图标设计等\x0d\x0a一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。\x0d\x0a另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。\x0d\x0a所以，设计师必须用减法设计，这个过程需要花时间思考、简化元素。\x0d\x0a你必须记住：（1）隐藏设计或者减法设计（2）分区或分类（3）帮用户做决策（4）提高交互创新设计（5）让人有爽快感和新奇感（6）在设计中浸入情感，把握用户的心理。（谈谈如何进行产品设计以及产品情感化设计）\x0d\x0a一位大师这样说过“真正的简约设计是：作品必须不断的被简化，一改再改，直到设计最终成形。”\x0d\x0a2014年APP设计风格趋向扁平化和卡片化。卡片，扁平化都会是移动app设计的趋势！认为卡片设计确实同时兼具了“拟物”和“极简”2种优势！\x0d\x0a\x0d\x0a第四点：APP界面设计流程\x0d\x0a\x0d\x0a（1）.设计APP界面时，学会从优秀APP界面设计作品中寻求灵感，以前的艺术大师，用少量的资源做了大量的设计。\x0d\x0a（2）.放下工作，休息一下很有帮助。扁平和简约设计的一切均关乎到细节的差异。因此小憩片刻后再回到工作，带着全新的眼光工作，比长时间冥思苦想更有\x0d\x0a效。\x0d\x0a（3）.并排比较各个版式同样有帮助。哪怕花20分钟前将一个线条下移各5个像素分别保存，对比两个版式就能很快分清孰好孰坏。\x0d\x0a（4）.由于实物展示的相对比例至关重要，所以要及早在不同的目标设备上测试。\x0d\x0a（5）.整个设计过程中不断问自己“真的需要吗？”。支撑项目时候，找一些讨巧的办法，例如，添加一些有趣的元素、样式会这样会很容易也会很吸引人，\x0d\x0a但必须始终注意剔除不必要的元素，不断精简。甩掉你费尽心血的部分总是难以割舍，但修改过程必须挑剔。\x0d\x0a\x0d\x0a第五点：APP界面设计测试与预览修正\x0d\x0a设计完成之后，我们可以把设计图导入手机测试或者是校正。之前发布的在线测试工具：快速在移动终端上预览APP界面设计效果图的方法最后：好的APP界面设计作品必然是要经过不断升级、重复迭代的。

运动类APP的界面设计有哪些元素？

现在处于日益发展的社会中，全民健身的理念深入人心。应运而生的运动类app也成为了炙手可热的软件。那么今天我就来给大家说一说作为设计小白，运动类app界面设计的要素。

1.显著性元素的重要性

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

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

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

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

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

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

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

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

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

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

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

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

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

如何做好一个APP界面设计

第一步：用户分析

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

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

第二步：制作草图

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

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

第四步：风格设计

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

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

第五步：页面设计

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

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

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

app设计页面一般能进多少层

app设计页面一般能进4层。现有新版手机的页面可以分为背景层、内容层、悬浮层、弹出层四个层级。app界面设计，又称为UI设计。是一种针对软件的人机交互、操作逻辑、界面美观的整体设计。

App登录界面的设计

一 背景

1.纯色背景

整体上看起来非常的干净

app界面设计(app界面设计用什么软件)

2.毛玻璃效果

要控制好效果，注意颜色搭配，否则会看来有点“脏”

3.渐变色

4.蒙版背景图片

要注意背景图片的选择及蒙版的透明度，否则容易造成输入框和按钮辨识度降低

app界面设计(app界面设计用什么软件)

二 上半部分（即输入框的上面）

当前主流的App登录界面一般不显示标题栏，界面整体显示大方，空间感强，

上半部分一般展示图片（可能是应用的logo）、文字（应用的名称或一个体现App的短句）或者图片加文字的方式

三 输入框和登录按钮

1.纯输入框，里面有输入内容的提示文字

2.输入框增加一个小图标，用来标识需要输入的内容

3.输入框前或输入框中带title

这种方式用的越来越少，因为icon和引导文字足以说明需要输入的内容，加上title纯属多次一举

输入按钮一般紧跟在输入框下面，用户输入完成后可直接点击按钮登录。

登录按钮的长度可以和输入框长度一致或者小于输入框的长度，一般使用有背景色的按钮。

有些App登录按钮会采用其他形式

四 注册

只要两种表现形式：按钮和文字。位置一般在登录按钮下方。

个人更倾向于按钮，因为使用频率比较高。

五 忘记密码

大都采用文字展示，毕竟这个功能的使用频率较低，相对于登录和注册是最不重要的功能

一般会放在登录按钮的下方，部分App会放到登录按钮和文字框之间，居左放。

app界面设计(app界面设计用什么软件)

六 联合登录

一般会放在登录界面的最底部，有些App会放在登录按钮之下，注册按钮的上方（毕竟联合登录也属于登录）

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

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

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



第一步：交互流程设计

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

第二步：风格定位

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

第三步：功能icon设计

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

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

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

第五步：应用icon设计

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

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

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

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

android app界面设计规范(dpi,dp,px等)

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|