app启动页加版权

A. app引导页和启动页有什么区别

我们在打开APP时候总会跳出一些页面，有人说是启动页也有人叫开机图，各种叫法让人傻傻分不清楚。那么在启动APP的时候我们看到的页面到底是什么，又有什么区别呢？下面就是关于启动页、闪屏、引导页的简单的归纳和总结，希望对大家有所帮助。

UI基础知识：启动页、闪屏和引导页的区别
01 启动页 (launch screen )
1. 定义
当app被用户打开时，在app启动过程中被用户所看到的过渡页面（或动画）都被我们统称为启动页。

2. 作用
APP在用户打开过程中需要一定的时间，启动页的展示是为了给用户一个过渡页面，缓解用户打开app时等待的焦虑心情。类似于在app在加载过程中loading动画一样，都是为了通过设计的手段来解决用户的焦虑情绪。

3. 主要分类
规范型和品牌推广型

（1）规范型

根据 iOS 和MD 的官方定义来，用户打开应用能立即使用是最好的体验，例如苹果系统自带的一些应用，是没有闪屏的；或者把闪屏设计的和首页很像，类似 国外的instagram

UI基础知识：启动页、闪屏和引导页的区别
（2）品牌推广型

国内很多APP为了体现产品的品牌，强化用户对品牌的记忆，一般启动页会由：产品名称+产品形象（logo）+产品广告语（slogan）组成。闪屏设计多数较为精简，主要目的是为了突出产品特点，不宜内容太多，太过复杂，且不易经常更换，打断用户对品牌的认知记忆，类似国内的淘宝、优酷等。

4. 交互方式
启动页为一张静态图片，不可点击，不可跳过

02 闪屏(splash screen )
UI基础知识：启动页、闪屏和引导页的区别
1. 定义
闪屏页约等于启动页，又叫做开机广告。由于闪屏主要用于活动推广，商业上的广告宣传，容易造成用户排斥心理，所以这类闪屏多数有倒计时和跳过的功能。该页面出现在启动页之后，类似京东、爱奇艺等国内大多数应用，在冷启动出现启动页之后有时候紧接着还会出现广告闪屏。

2. 主要分类
广告推广型、活动推广型、节日关怀型。

UI基础知识：启动页、闪屏和引导页的区别
（1）广告推广型

产品为了通过流量变现，在此区域给一些商家提供广告宣传。

UI基础知识：启动页、闪屏和引导页的区别
（2）活动推广型

有时候产品在运营过程中会策划一些行销活动，该区域就作为活动的宣传口。活动推广型闪屏着重体现活动的主题，用户利益点，以及营造活动氛围。

UI基础知识：启动页、闪屏和引导页的区别
（3）节日关怀型

在节假日到来时，很多APP会通过营造节日气氛来体现人文关怀。目的主要是通过情感化得设计给用户带来节日祝福，提升用户的对产品的好感度，提升产品本来的品牌调性。且此类闪屏多采用插画类的手法，对设计师的表现力比较强的需求。

UI基础知识：启动页、闪屏和引导页的区别
3. 交互方式
引导页可以为一张静态图片，也可以是个动态短视频，有倒计时和可以跳过，跳过后进入app首页。

03 引导页（onboarding screen）
1. 定义
用户第一次安装app或者app更新后首次启动时展示的3-5个可滑动的页面。主要是向用户展示产品的功能和产品亮点。

2. 主要分类
功能介绍性、推广介绍型、问题解决型

（1）功能介绍性

通过简洁明了的设计和通俗易懂的文案提炼产品特色功能，把产品信息传达给用户。需要注意的是保证信息展示一针见血，切记啰嗦反复，引导页数控制在5张以内，避免过多的页面造成用户反感。

（2）推广介绍型

主要目的是传达产品的思想和态度，告诉用户产品的使命和情怀。这一类的引导页需要做到吸引用户注意，引发用户的共鸣。

（3）问题解决型

问题解决类通过描述在实际生活中会遇到的问题，直击用户痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。

3. 交互方式
可以左右滑动切换页面，一般最后一页有引导按钮，可以寄点击进入app。

总结
启动页打开app时，展示的第一个页面，不可点击，无交互
闪屏在app启动后出现的第2个页面，如app没有配置开机图，则不显示，直接从启动页跳到app首页；如果配置了开机图（闪屏），一般有倒计时，可以跳过进入首页，也可以点击跳转到相应的活动或专题页
引导页时用户在安装或者更新后初次打开app出现的3-4张类似产品说明书似的介绍页面，可以左右切换，并在最后一个页面有引导按钮跳转到首页。（退出后，再次打开app则不再出现该页面，除非卸载重装）
本文由 @Sevenmoon 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

B. 如何实时更新app启动页

苹果官方对启动页的定义是：让用户觉得你的APP已准备好给用户使用，减少用户打开启动到正常使用的焦虑感。

所以一个启动页设计的最基本原则是不能影响用户正常使用的。

不过对于现在国内的现状来说，APP启动页越来越作为产品表达自身状态，以及产品对用户情感传递的主要手段。启动页也根据产品当前的所处的阶段，进行实时更换。比如，天猫在双十一期间的启动页。

C. iOSAPP一定需要默认的启动页才能上架吗

1.在网络比较Bad的情况下，在请求超时之前是会停留在开机启动画面，请求超时就会回调错误方法 2.app会有默认的启动页思路没有问题，不过你可以把请求超时时间设置小一些 7-10秒

D. 如何为APP添加满屏启动页

|1、首先，我们创建一个布局splash.xml；
[html] view plain print?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/splash">
</ImageView>
</LinearLayout>
2、再者，创建一个新类SplashActivity.java；
[java] view plain print?
public class SplashActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.splash);
Handler hd = new Handler();
hd.postDelayed(new splashhandler(), 800);
}
class splashhandler implements Runnable {
public void run() {
startActivity(new Intent(getApplication(), MainActivity.class));
SplashActivity.this.finish();
}
}
}
3、在manifest中配置我们的启动入口；
[html] view plain print?
<activity android:name="x.x.x.SplashActivity"
android:configChanges="mcc|mnc|locale|touchscreen|keyboard|keyboardHidden|navigation|orientation|screenLayout|uiMode|screenSize|smallestScreenSize|fontScale"
android:label="@string/app_name"
android:launchMode="singleTask"
android:screenOrientation="landscape" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<category android:name="android.intent.category.LEANBACK_LAUNCHER" />
</intent-filter>
</activity>
最后不要忘了要首屏的图片资源drawable/splash.png；
综上，我们APP的启动页已经做好了。雷达下载更专业。

E. 请问怎么设计APP软件启动页呢

一、规范来型
启动页应该自是不打扰用户，利用进入应用后的第一个界面的框架截图来做启动页，这里的截图是去掉里面的内容的。它的作用就跟上面说的一样，降低用户焦虑感。
更多APP设计知识，请咨询华南电脑学校。
二、品牌推广型
这类启动页其实就是在规范型的基础上做了一点扩展，帮助品牌做一些宣传。
在做这类页面时，要注意风格的搭配，不要太突兀，影响了产品整体的视觉效果。虽然这只是一个过渡的页面，但是它毕竟是用户打开产品之后看到的第一个画面，所以还是值得花点心思做的。
我的建议是，如果没有商业需求，有品牌名称和LOGO就足够了，代入感也强，不会犯错。
三、商业需求型
再来说说商业需求型的启动页，它就是产品利用这块区域为商家做广告，从而获得收益，这种平时应该经常会看到。通常这类启动页的展示时间在3到5秒不等，是用户最不喜欢的一种。

F. 如何配置 app ios icon 启动页

图标的圆角和光晕效果
1.图标的圆角效果是系统自动加上的，且是我们无法控制的。
2.光晕效果虽然也是系统加上的，但可以通过程序中设置app的光晕参数UIPrerendedIcon来是否需要内建光晕效果。
方法：在info.plist里面添加一条记录UIPrerenderedIcon，新版的XCODE 会自动识别为Icon already includes gloss effects 打上勾就OK了。如果没有识别的右边栏写上YES就可以。
启动画面
虽然苹果建议开发者使用app的“空白”界面作为启动画面。但若要让启动画面显得漂亮，可先让app的界面漂亮；App的界面漂亮，那app的“空白”界面也漂亮；App的“空白”界面漂亮，那启动画面也就漂亮了。

Retina
iPhone4和ipod Touch4有一个新特性：在屏幕尺寸不变的前提下，分辨率提升一倍（320x480=>640x960）。此特性苹果命名为Retina。
因此如果app要支持Retina，就要提供分辨率宽高各增一倍的图片，且为了兼顾没有Retina的设备，原来低分辨率的图片仍然要提供 。针对不同分辨率的相同图片，苹果规定的命名规则是：高分辨率的文件名比普通分辨率的文件名多“@2x”字样。
格式和尺寸
图标和启动画面的图片格式：推荐使用PNG格式，可以是标准的24位色，外加alpha通道的8位。不要在app图标上使用透明色。
图标的尺寸：苹果有一份完整的文档，列出了app所需的全部图标尺寸，和其各自的使用环境。

G. 为什么国内大部分app都会在启动页加广告

广告的目的是利用比其他方式更经济、快速、涵盖更为广泛的做法，去执行部分的沟通任务。 其次，广告的成败取决于它是否能在恰当的成本下，在恰当的时机，对适当的人沟通广告主所期望传播的讯息和态度。

H. App 启动页的动画怎么做

首先定下目标，我们要实现的是启动引导画面中的一种——多层次动画。然后我们需要设定一个动画的主题，我们需要表达我们的情感，或者抒情~或者动人~或者逗比~。当然这大部分是设计师的工作。

好吧，既然是demo，而我又不懂设计又不懂美学又不懂PS大法，那么，就大概也许做成一个这样子的把~~~

总结一下最终目标要有几个要点：

1、4个页。

2、每个页都可能有若干分层，动画速度不同。

3、整个滑动的手感应该是顺滑并且是页面式的。

三. 用什么控件做？

开头我讲过，这是要探索，而不是为了实现，所以绝对不能借助任何3rd的library来完成。最大限度的利用apple的原生控件，是解决问题之道。

So，我们当然选用UIScrollView咯~~~除非你是个手工控。。。就要用最基本的UIView实现一个类似的滑动效果的UIScrollView。

啥？你问我UIScrollView是啥？

。。。。。。

下面是UIScrollView的几个关键属性，我相信你是明白的。需要注意的是，伴随着scrollview的左右拖动，contentOffset是在一直变换的。数值范围:(0,0) – (320 * 3, 0)。而这个属性，是我们需要使用的关键数值。

uiscrollview_callouts_2x.png

四. 怎么做？

上面我啰嗦了半天，最后告诉大家要用UIScrollView做，那么问题来了，挖掘机技术哪家强？啊不，到底应该怎么做？下面是干货~

1. 首先我们要把我们承载整个动画场面的scrollView造出来

如下，需要设置scrollView的几个关键属性：frame, contentSize, alwaysBounceHorizontal, paginEnabled(这个如果是NO，那么页面间的弹性效果就没了), delegate(需要设置从而获取scrollview的滚动状态)等等。

//初始化 scrollview

- (void)initScrollView

{

CGSize screenSize = [UIScreen mainScreen].bounds.size;

_scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, screenSize.width, screenSize.height)];

//我们的scrollView的frame应该是屏幕大小

_scrollView.contentSize = CGSizeMake(screenSize.width * 4, screenSize.height);

//但是我们希望我们scrollView的可被展现区域是4个屏幕横排那么大

_scrollView.alwaysBounceHorizontal = YES;//横向一直可拖动

_scrollView.pagingEnabled = YES;//关键属性，打开page模式。

_scrollView.delegate = self;

_scrollView. = NO;//不要显示滚动条~

[self.view addSubview:_scrollView];

}

现在我们已经准备好了动画的画布，下面开始将每一页的元素加上去。

2. 加入页面元素

还是不要全篇幅贴代码了，以第一页为例把。

前面掉渣天的蛇鸡屎（我）的demo图已经表明，第一页，我们要有3个UILabel，一个UIImageView。

那么好，这些元素我们就给他声明出来。

@interface ViewController ()

@property (strong, nonatomic) UIScrollView *scrollView;//这是基本！

@property (strong, nonatomic) UIImageView *girlImageView;

@property (strong, nonatomic) UILabel *label_page1_1;

@property (strong, nonatomic) UILabel *label_page1_2;

@property (strong, nonatomic) UILabel *label_page1_3;

@end

然后把第一页的元素，加进来~

//为了更方便的初始化UILabel,我为UILabel增加了一个简易的类方法。是为了让代码更简洁可读。

+ (instancetype)labelWithText:(NSString *)text font:(UIFont *)font color:(UIColor *)color origin:(CGPoint)origin

{

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(origin.x, origin.y, 1000, 20)];

label.text = text;

label.font = font;

label.textColor = color;

[label sizeToFit];

return label;

}

//然后我们将第一页的元素加进来。

self.label_page1_1 = [UILabel labelWithText:@"我要买iPhone6！" font:[UIFont systemFontOfSize:18.0f] color:[UIColor redColor] origin:CGPointMake(140, 200)];

[self.scrollView addSubview:self.label_page1_1];

self.label_page1_2 = [UILabel labelWithText:@"我要看医生演唱会~~~~" font:[UIFont systemFontOfSize:18.0f] color:[UIColor blackColor] origin:CGPointMake(140, 240)];

[self.scrollView addSubview:self.label_page1_2];

self.label_page1_3 = [UILabel labelWithText:@"我要去大理！" font:[UIFont systemFontOfSize:18.0f] color:[UIColor orangeColor] origin:CGPointMake(140, 280)];

[self.scrollView addSubview:self.label_page1_3];

self.girlImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image_girl"]];

self.girlImageView.frame = CGRectMake(100, kScreenHeight - 200 - 50, 100, 200);

[self.scrollView addSubview:self.girlImageView];

3. 让第一页动起来~~

在第一页刚刚显示的时候，我们就希望第一页的元素能够有一个动起来的效果。那我们在上面刚刚加入第一页元素之后，可以紧接着做下面的事情：

self.girlImageView.transform = (-200, 0);

self.label_page1_1.transform = (- 100, 0);

self.label_page1_2.transform = (100, 0);

self.label_page1_3.transform = (- 120, 0);

[UIView animateWithDuration:0.7

animations:^{

self.girlImageView.transform = (0, 0);

self.label_page1_1.transform = (0, 0);

self.label_page1_2.transform = (0, 0);

self.label_page1_3.transform = (0, 0);

}];

可以看到，我们分别给第一页的四个元素不同的水平位移，然后希望它用0.7秒的时间，移动到之前init他们时候的位置。这样就完成了第一个4层的错位动画。

然后，我们希望在手指滑动scrollview 的时候，第一页的四个元素可以有相应的分层错位动画，那么我们第一需要拿到当前scrollView的位移量，也就是前面提到的很重要的contentOffset。这个值，在：

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

中，可以实时的获取。

具体来看，怎么做。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

CGFloat currentX = scrollView.contentOffset.x;

if (currentX <= kScreenWidth)

{

self.girlImageView.transform = ((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

self.label_page1_2.transform = (- 200 * currentX / kScreenWidth, 0);

}

}

呵呵，是不是看不懂，那就对了。。。

下面解释下，首先抛出两个定理：

定理一：在scrollview的滑动过程中，视觉上看，scrollview上的元素的移动方向与手指滑动方向相反，并且移动的距离与手指滑动的距离相等。但所有元素在scrollview上的物理位置并未改变。

定理二：在scrollview的滑动过程中，当且仅当scrollview上的元素的物理移动距离与手指滑动距离相等并且移动方向相反时，scrollview的元素视觉位置保持不变。

然后我们有两个需求：

第一，希望那个小女孩跟随手指滑动的时候，视觉上不是向左移动一直到消失，而是向右移动，待滑动到第二页的时候，小女孩出现在屏幕右侧。

我们应该明确，小女孩的移动，只能是在scrollview上位置的移动。根据定理二，我们知道，如果保持视觉上小女孩位置不变，小女孩在scrollView上的实际物理位移应该是：

公式 4.3.1 baseDistance = kScreenWidth 屏幕宽度

那么如果我们希望在移动到第二页之后，小女孩的视觉位置右移了100像素，那么小女孩在scrollView上的实际物理位移应该是：

公式 4.3.2 distance = baseDistance + 100

第一页到第二页，scrollView一共位移是 kScreenWidth ，当前scrollView位移是 contentOffset.x ,可以得出，当前位移的比例：

公式 4.3.3 status = scrollView.contentOffest.x / distance

由 4.3.1 4.3.2 4.3.3可得，我们设置小女孩位移的方式：

self.girlImageView.transform = ((kScreenWidth + 100.0f) * currentX / kScreenWidth, 0);

第二个需求，希望第一页中，第二个label的向左移动速度快于其他两个label。

根据定理二，和类似于上面的推倒(推导)方式，也易得第二个label的位移方式：

self.label_page1_2.transform = (- 200 * currentX / kScreenWidth, 0);

五. 总结

综上所述，我们知道了分层动画的基本原理。如果使用更多的图层，更多的位移或者角度变化，就能组合出更加复杂的分层动画。

可以看到，分层动画的基本原理并不复杂，但是为什么那么多人倾向于借助3rd的library来实现呢？一个字，懒。

现如今移动开发领域对于美感和交互的要求越来越高，而开发出一款精美的app，设计师所需要付出的灵感和努力也越发显得重要。作为一个不怎么有美感的iOS工程师，想要在移动浪潮中立于不败之地，不断尝试更多新的可能远比实现更多的功能更加重要。

I. APP设计中启动页，引导页等用别的字体算侵权吗

只要不是商业字体就可以，对于不同字体的开源使用权限等等的详情都可以咨询这个字体开发者

J. xcode7怎么给app添加启动页

此处 是自己封装了一个独立的引导页，在任何项目中均可独立引用
首先看.h

[objc] view plain
<span style="color:#666666;">#import <UIKit/UIKit.h>

/**
* App首次开机引导页
*/
@interface GuideView : UIScrollView<UIScrollViewDelegate>

@end</span><span style="color:#ff4647;">
</span>

接着.m

[objc] view plain
#import "GuideView.h"

/**
* 引导页张数
*/
#define DEF_GUIDE_COUNT 3

@implementation GuideView

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.bounces=NO;
self.contentSize = CGSizeMake(DEF_WIDTH(self)*DEF_GUIDE_COUNT, DEF_HEIGHT(self));
self.backgroundColor = [UIColor blackColor];
self. = NO;
self.pagingEnabled = YES;
self.delegate=self;
self.backgroundColor = [UIColor clearColor];

for (int i=0; i<DEF_GUIDE_COUNT; i++)
{
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(DEF_SCREEN_WIDTH*i, 0, DEF_SCREEN_WIDTH,DEF_SCREEN_HEIGHT)];
[imageView setBackgroundColor:[UIColor redColor]];
[imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"Guide%d",i]]];
if ([UIScreen mainScreen].bounds.size.height == 480) {
[imageView setImage:[UIImage imageNamed:[NSString stringWithFormat:@"Guide%d-480",i]]];
}
[self addSubview:imageView];
if (i==2) {
UIButton*button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0,0, DEF_SCREEN_WIDTH, DEF_SCREEN_HEIGHT);
button.alpha = 0.5;
[button addTarget:self action:@selector(beginClick) forControlEvents:UIControlEventTouchUpInside];
imageView.userInteractionEnabled = YES;
[imageView addSubview:button];
}
}
}
return self;
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.x>DEF_SCREEN_WIDTH*3+20) {
[UIView animateWithDuration:0.3 animations:^{
self.alpha = 0.0;
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];

}
}
#pragma mark - 点击事件

- (void)beginClick
{
self.userInteractionEnabled = NO;
[UIView animateWithDuration:0.3 animations:^{
self.alpha = 0.0;
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}

引导页上 有的是点击的，有的是需要滑动进入主页的，这两个根据自己的需求来，例子中这两种情况都满足，具体的还得根据自己的需求来，

使用方法也十分简单

[objc] view plain
//引导页
if (![DEF_PERSISTENT_GET_OBJECT(@"showGuide") boolValue])
{
[self makeui];
DEF_PERSISTENT_SET_OBJECT([NSNumber numberWithBool:YES], @"showGuide");
GuideView *guide = [[GuideView alloc] initWithFrame:self.window.bounds];
[self.window addSubview:guide];
}

/**
*
取出永久存储的对象
*
* @param key 所需对象对应的key
* @return key所对应的对象
*/
#define DEF_PERSISTENT_GET_OBJECT(key) [[NSUserDefaults standardUserDefaults] objectForKey:key]

这是我自己定义的一个宏 用来本地化的