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]

這是我自己定義的一個宏 用來本地化的