app啟動頁設計
『壹』 手機App安裝後首次啟動的引導頁該怎麼設計為佳
個人覺得如果真想要引導頁，那麼就小清新一些，不要去考慮功能，只去做美的東西。要是用戶不看引導頁就不會用，那就是自己的產品做的傻逼了……
不要指望用戶去看那些亂七八糟的箭頭和無用的文字。他下載了這個應用，就表示有用的渴望。就跟初夜一樣，大部分新手還是願意去自己親身嘗試，哪怕無功而返，哪怕走錯了路，那也值了……
『貳』 怎麼製作app啟動頁
APP啟動頁設計方案：
組合法 根據行業背景來設計，選取行業元素做一個圖形化組合或者圖形化標志等，襯托突出APP的icon或LOGO下面舉例就是主流電商APP的啟動頁、社區APP的啟動頁等。也有一些是採取製作字母組合成的文字圖案效果。
『叄』 請問怎麼設計APP軟體啟動頁呢
一、規范型
啟動頁應該是不打擾用戶，利用進入應用後的第一個界面的框架截圖來做啟動頁，這里的截圖是去掉裡面的內容的。它的作用就跟上面說的一樣，降低用戶焦慮感。
更多APP設計知識，請咨詢華南電腦學校。
二、品牌推廣型
這類啟動頁其實就是在規范型的基礎上做了一點擴展，幫助品牌做一些宣傳。
在做這類頁面時，要注意風格的搭配，不要太突兀，影響了產品整體的視覺效果。雖然這只是一個過渡的頁面，但是它畢竟是用戶打開產品之後看到的第一個畫面，所以還是值得花點心思做的。
我的建議是，如果沒有商業需求，有品牌名稱和LOGO就足夠了，代入感也強，不會犯錯。
三、商業需求型
再來說說商業需求型的啟動頁，它就是產品利用這塊區域為商家做廣告，從而獲得收益，這種平時應該經常會看到。通常這類啟動頁的展示時間在3到5秒不等，是用戶最不喜歡的一種。
『肆』 app引導頁和啟動頁有什麼區別
最大的區別：身份不同，承載的含義也不同
APP啟動頁面是一個APP的優雅的開場禮或者是見面禮。
APP引導頁是一個新用戶的專屬禮。引導新用戶了解APP的一個過程。同時也是每一次迭代新版APP之後的標識身份。
『伍』 如何快速設計出一款用戶體驗最佳的App啟動頁
關於產品定位 1、一句話產品定義：用一句話概括產品的定位：包括使用人群、產品特色和主要功能 2、三種用戶畫像：思考APP的目標用戶類型。簡潔的例舉三種用戶。例：天天宅寢室的大學生 3、三種使用場景：思考APP的使用場景
『陸』 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做，那麼問題來了，挖掘機技術哪家強？啊不，到底應該怎麼做？下面是干貨~
首先我們要把我們承載整個動畫場面的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工程師，想要在移動浪潮中立於不敗之地，不斷嘗試更多新的可能遠比實現更多的功能更加重要。
『柒』 如何開始設計app界面
1、 開發復的App軟體制主旨要明確
優秀的App軟體的界面設計必須得明確得傳達這個App應用的主旨，讓用戶看到這個App產品就知道是用來干什麼的。App界面設計必須是一個優雅的整體，從內到外都必須做到統一、協調，快速傳達App應用的功能。
2、 開發的App軟體要有特點
優秀的App界面設計必須具有自己的特點，而且這個特點還能夠吸引到用戶。因為，用戶在沒使用App應用時，第一眼看到的是你這個App軟體的界面，所以界面設計的好壞直接決定了App軟體的存亡。
3、 開發的App軟體界面風格多樣且不重復
優秀的App視覺設計還得是風格多樣的，這樣才能滿足不同用戶的需求。用戶不同，需求也是不同，而且還會隨著時間的變化而有所改變。
4、 開發的App軟體應從用戶角度出發
App軟體的界面設計要多從用戶的角度去考慮，多想想用戶要的是什麼，聽聽用戶的聲音。
『捌』 哪個網站可以 在線製作 App應用圖標和啟動頁
用金和吧
『玖』 如何做APP界面設計
第一點：了解你的目標客戶群的心態
1、做微任務的目標客戶群(如隨時隨地看看新聞，聽聽歌，看看電影，聊聊八卦之類)：
這類的解決方案是設計的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界面設計作品必然是要經過不斷升級、重復迭代的。