『壹』 APP 引導頁設計1-引導頁的分類
因工作原因，筆者體驗過很多APP，其UI是筆者比較關注的一部分，畢竟UI是第一印象嘛，大部分APP，引導頁作為其的第一個入口，新裝時啟動都會先顯示引導頁，介紹其功能特性。APP體驗多了，逐漸有點心得，這里筆者對市面上APP的引導頁做下歸類，細數歸納下對引導頁的所見所想。
根據引導頁的目的、出發點不同，可以將其分為功能介紹類、推廣類、問題解決類、賣萌搞笑類，一般引導頁不會超過5頁，下面看看各類精彩紛呈的引導頁。
1.功能介紹類
這樣的引導頁最直白的就是截圖展示功能特點，或者用形象化的物體（如下圖QQ改版升級，其引導頁就用代表性的企鵝來表現APP的主要功能。）
用戶需要一針見血，在這樣一個網路化的時代，人們停留的時間越來越短，瀏覽你的APP界面時間不會超過3秒，在這樣寶貴的3秒里，你需要用簡要明白、通俗易懂的文案和界面呈現，突出重點即可，展示我們的功能展示頁面。
2.推廣類
推廣類引導頁除了有一些產品功能的介紹外，更多是想傳達產品的態度，讓用戶更明白這個產品的情懷，並考慮與整個產品風格、公司形象相一致。這一類的引導頁如果做的不夠吸引人，用戶只會不耐煩地想快速劃過。而製作精良、有趣的引導頁，用戶會駐足觀賞。
以淘寶旅行為例，淘寶旅行通過清新、生活化場景的插圖營造產品是一款樂享生活、跟著感覺走的出行應用，在你出行前就幫你計劃好所有的行程安排，只要一個行李箱，說走就走，與產品的理念相契合。而另外一款應用，選用恬靜、安逸的照片配以簡潔的文字來渲染產品的基調。
3.搞笑賣萌類
不知道怎麼概括，就是說一個故事？通常會配合一些動畫效果來輔助展示。
4 、問題解決類
問題解決類通過描述在實際生活中會遇到的問題，直擊痛點，通過最後的解決方案讓用戶產生情感上的聯系，讓用戶對產品產生好感，增加產品粘度。例如QQ瀏覽器的引導頁設計，通過形象的插圖直接明了地說明了QQ瀏覽器解決了其他瀏覽器所遇到的問題（搜不到小說、看小說花錢、小說更新需要等）。
以上已經針對引導頁的目的差異以及表現方式進行了相關歸類，在具體的設計中還得注意一些原則,它們會讓你的設計更加吸引人，信息傳達的效果更好。
#本文同步發布到 pm263.com ，pm263為你提供更多更全的產品經理干貨，歡迎大家訪問。
『貳』 移動APP界面設計的工作流程是什麼
現在做設計，如果說你是平面設計師，不足為奇，如果說你是網頁設計師，哎喲，不錯哦，如果是你是設計APP界面設計師的，那也許聽著就有點不讓人明白了，後來看看他們手機上安裝的各種應用，才明白，移動APP界面設計師是做什麼的。
本文不講述移動界面設計師的介紹，總體來說是針對移動端APP應用做的界面設計，但是很多人不清楚移動APP界面設計師的工作流程是怎樣的，在此，北大青鳥ui培訓老師帶你一步一步了解。
第一步：交互流程設計
APP的交互流程設計，簡單來說就是構造框架，像造房子一樣，有了清楚的平面圖紙才可以增磚添瓦，設計交互流程時應該對應用的功能需求有清晰的把握。
第二步：風格定位
比如說圖片分享類應用圖片是最重要的視覺元素，應用的設計風格應當符合視覺流程，table需要引導用戶操作。
第三步：功能icon設計
功能圖標即在你的應用中，充當表達某一操作或功能示意的圖形，功能圖標設計應極可能形象，簡潔，以准確表達其代表的功能。
第四步：界面視覺效果整體優化
選用圖片的時候，應該盡量按照應用的風格選取，比如這APP主打是圖片分享，那麼可以選取視覺靚麗，有沖擊力的圖片添加分享。
第五步：應用icon設計
對這款APP進行最終的icon設計，能夠最優化的，最靚麗的代表這款APP的特色，品牌等形象。
第六步：完稿交接軟體工程師
我們做移動界面設計，做的是各個頁面的形象，具體功能實現是需要與軟體工程師溝通的，在能夠完成軟體開發的情況下，進行一步步的界面設計，最大化增加用戶體驗，吸引用戶，最終完美的完成這份設計。
以上內容是作者對我們學習UID培訓課程的同學在以後的移動界面工作當中的一個工作流程的簡單介紹，以後學員如果在UID培訓課程當中學習到第三階段的界面設計課程的話，一定要好好研究，老師對於界面設計的操作流程一定會更加的細致講解。
『叄』 APP 引導頁設計3-優秀的引導頁
引導頁，雖是每個app必備，在實際的使用中，其設計的效果並不容易達不到預期，用戶常常不會仔細瀏覽這些引導的信息，對於引導的內容信息的接收程度會打折扣，很難全部吸收；還有不少情況下用戶會跳過引導，忽略引導想提供的幫助信息。那如何使引導頁引起用戶的興趣，讓他們花費一點精力去吸收引導的內容信息呢？什麼是優秀的引導頁呢？
失敗的理由有很多，成功的理由就那麼幾個，在筆者看來，成功的引導頁歸納起來，具備以下特點：有趣，格逼，情懷，態度。
有趣：就是令人眼前一亮，展現與用戶息息相關的圖文，把用戶吸引其中，加入點小游戲，讓用戶覺得有趣好玩。
情懷：情懷是目前的流行語，人文關懷的代名詞，具備人文關懷的引導頁，可以讓用戶產生共鳴，煩躁的心情變得恬靜，舒適，用戶自然會往下翻。
格逼、態度：有格逼有態度的引導頁，表現出APP的獨特氣質，與眾不同。
OK，說了這么多，下面展示下案例，欣賞下優秀的引導頁，看看他們是怎樣表現有趣、情懷、格逼和態度的。
1、還記得微信6.1的引導頁么？不得不說微信6.1的引導頁文案非常精彩，前兩頁像一個小游戲，統計你送出和收獲的點贊數，吸引你往下翻，後兩頁點贊太容易，當面誇太難，畫龍點睛，充滿人文關懷，令人眼前一亮。
2、在微信在推出4.0版本的時候，新增加了類似Path和Instagram一樣的相冊功能，並且可以把相冊分享到朋友圈。這個功能的加入拓展了之間僅是溝通聊天工具的產品定義。在4.0版本的新功能引導中，它非常成功的講訴了一個關於相冊功能的故事，並且在設計內容時非常注意建立聯系。在故事闡述中它一直強調用戶可以怎麼樣，讓用戶能明確感覺到與自己的關系。
3、Vida的引導頁，對於一個新概念的新產品，用戶需要對這些新的概念或內容有所理解才能更好的使用產品。
4、Between 令人眼前一亮的引導頁面，講建立與用戶使用情景匹配的場景，讓用戶能建立一種熟悉的感受，能讓用戶對引導的功能點感同身受。
5、知乎的引導頁，每頁拋出一個需告知的點，讓用戶感覺到產品與自己是有關系的，現在所說的內容是與我相關的，我需要花費精力來關注一下。
6、CSDN引導頁，快速簡潔，每頁8個字，干擾少，清晰明了。
#本文同步發布到 pm263.com ，pm263為你提供更多更全的產品經理干貨，歡迎大家訪問。
『肆』 app引導頁設計注意事項有哪些
好的引導在多個方面都是具有一致性的。視覺風格的塑造、表達的產品理念和產品特點都應該和它所屬的產品、定位與品牌相符合，這樣用戶在使用產品的時候就會對產品有一個大致的基調認識和感受。產品的定位會決定引導的方向和路線，以及最終引導的表現形式上，所以引導是最能體現產品基調和品牌性的地方。引導的一致性除了保證了產品與使用體驗相互一致，同時也能進一步強化用戶對產品的認知以及延續品牌印象。如下例：
界面來自Telegram
從一致性來看，Telegram的前置引導是我覺得比較有代表性的，這組引導頁面里，每一頁元素看似簡單但是很有細節，圖示風格統一，主標題都是一個詞，表達很乾脆簡練。這組引導頁整體與Telegram的產品所透露的特性一致，高效，干凈，這種傳達出來的氣質貫通整個產品。特別是每個圖示都做了小動畫，讓用戶更加直觀得感受到它所傳達的信息，這種細節更容易觸動到用戶，獲得用戶對產品品質的認可。
產生共鳴
前面有提到一個應用里好的引導不僅能使他們對一個應用有好感，也可能更容易得留住他們，而這里的關鍵就是能夠讓用戶產生共鳴。通過對產品自身的深刻了解並洞察目標用戶心理，結合產品特性與用戶的痛點，進而以視覺和文案渲染出氛圍從而傳達出相關的理念，勾起用戶情感打動用戶。讓用戶產生共鳴，有利於用戶對產品在情感上的認同，這種認同感會增進用戶對產品的進一步使用和探索。
『伍』 如何做好App的引導頁
一、 目的區分
根據引導頁的目的、出發點不同，可以將其分為功能介紹類、使用說明類、推廣類、問題解決類，一般引導頁不會超過5頁。
1.功能介紹類
功能介紹類引導頁主要是對產品的主要功能進行展示，讓用戶對產品主功能有一個大致的了解。採用的形式大多以文字配合界面、插圖的方式來展現。
以易信為例，採用文字與水彩插圖結合的方式，文字分為2個層次，大標題與小標題，大標題是對主功能的概括，小文字是對其功能模塊的詳細描述或進一步補充說明。
2、使用說明類
使用說明類引導頁是對用戶在使用產品過程中可能會遇到的困難、不清楚的操作、誤解的操作行為進行提前告知。這類引導頁大多採用箭頭、圓圈進行標識，以手繪風格為主。以蝦米音樂的引導頁為例，對於較難發現的播放隊列、歌詞的操作方式進行的箭頭引導來說明。
3、推廣類
推廣類引導頁除了有一些產品功能的介紹外，更多是想傳達產品的態度，讓用戶更明白這個產品的情懷，並考慮與整個產品風格、公司形象相一致。這一類的引導頁如果做的不夠吸引人，用戶只會不耐煩地想快速劃過。而製作精良、有趣的引導頁，用戶會駐足觀賞。
以淘寶旅行為例，淘寶旅行通過清新、生活化場景的插圖營造產品是一款樂享生活、跟著感覺走的出行應用，在你出行前就幫你計劃好所有的行程安排，只要一個行李箱，說走就走，與產品的理念相契合。而另外一款應用，選用恬靜、安逸的照片配以簡潔的文字來渲染產品的基調。
4、問題解決類
問題解決類通過描述在實際生活中會遇到的問題，直擊痛點，通過最後的解決方案讓用戶產生情感上的聯系，讓用戶對產品產生好感，增加產品粘度。例如QQ瀏覽器的引導頁設計，通過形象的插圖直接明了地說明了QQ瀏覽器解決了其他瀏覽器所遇到的問題(搜不到小說、看小說花錢、小說更新需要等)。
二、表現方式
1、文字與界面組合
這是最常見的引導頁面，簡短的文字+該功能的界面，主要是運用在功能介紹類與使用說明類引導頁。這種方式能較為直接地傳達產品的主要功能，缺點在與過於模式化，顯得千篇一律。
2、文字與插圖組合
文字與插圖的組合方式也是目前常見的形式之一。插圖多具象，以使用場景、照片為主，來表現文字內容。
3、動態效果與音樂
除了靜態頁面外，開始流行具有動態效果的頁面。在單個頁面採用動畫的形式，考慮好各個組件的先後快慢，打破原有的沉寂，讓頁面動起來。同時結合動效可以考慮頁面間切換的方式，將默認的左右滑動改為上下滑動或過幾秒自動切換到下一頁。在瀏覽引導頁的時候，可以試著加入一些與動效節奏相符合的音樂，會是一種更加新穎的方式。
4、視頻展示
在打開後通過播放視頻的方式來介紹產品或傳遞一種理念，這種方式多見於偏生活記錄類的應用，如拍照、運動類應用，給人傳達青春活力、積極樂觀的生活態度。優點：直觀，動感，生活化。缺點：應用較大，視頻播放會出現卡頓的情況。
三、 總結
以上已經針對引導頁的目的差異以及表現方式進行了相關歸類，在具體的設計中還得注意一些原則,它們會讓你的設計更加吸引人，信息傳達的效果更好。
1、文案言簡意賅，突出核心。
根據愛爾蘭哲學家漢密爾頓觀察發現的7±2效應，一個人的短時記憶至少能回憶出5個字，最多回憶9個，即7±2個。因此展示的文案要控制在9個字以內，超過後用戶容易遺忘、出現記憶偏差。如果表達起來困難，可以輔助一小段文字進行解釋或補充。因此在最終文案的確定上，要突出重點，多餘的文字盡可能地進行刪減。如果文案刪減後字數還是過多，因考慮對文字進行分層，通過空格或逗號或換行的方式進行視覺優化。
精準貼切的文案也十分重要，將專業的術語轉換成用戶聽得懂的語言。尤其對於通過照片來表現主題的引導頁設計，文案與照片的吻合度，直接影響到情感傳達的效果。
2、視覺聚焦
在單個引導頁中，信息不宜過多，只闡述一個目的，所有元素都圍繞這個目的進行展開。視覺聚焦包括兩部分，一是文案的處理，要注意層次，主標題與副標題要形成對比;二是引導頁中的界面、場景、文案具象化元素，要有一個視覺聚焦點，多個視覺元素的排布採用中心擴散的方式，聚焦點的視覺面積最大，同時與擴散的元素拉開對比。這樣用戶能清晰地看到核心文案信息與文案對應的視覺表現元素。同時結合視線流動的規律，從上到下，從左到右，從大到小。因此可以根據這個視線流的規律來進行引導頁的設計。
如下圖為天貓客戶端的引導頁，分析其視覺流發現，瀏覽的順序從插圖到主文案，再到輔助文案，缺點在首次看到的是插圖而不是文案，插圖相對文字理解相對困難，因此未能快速地獲取該頁的主要信息，可以考慮將文案與插圖的位置進行互換，這樣會好一些。
3、富於情感化
A、文案具象化
通過具體的元素、場景來表現文案，採用寫實、半寫實的方式進行表現，有些應用還會配以水彩風格。以天貓為例，天貓是一款購物應用，在設計上通過商場、店鋪的實際場景的具體描繪，渲染輕松、歡快的購物過程。
B、頁面動效、頁面間交互方式的差異化
之前對於表現方式的歸類已經講到了動畫及頁面切換方式，如果增加了頁面動效，利用動效，包括放大、縮小、平移、滾動、彈跳，表現形式更加多樣化，會讓引導頁更有趣，注意力更為集中。
而頁面間的切換方式除了傳統的卡片左右滑動的方式外，可以結合線條、箭頭等進行引導，通常會配合動效。例如網易新聞客戶端、印象筆記·食記，它們在引導頁的設計上採用了線條作為主線貫穿整個引導頁面，小圓點顯示當前的瀏覽進度，滑動的過程中有滾動視差的效果。
4、與產品、公司基調相一致
引導頁在視覺風格與氛圍的營造上要與該產品、公司形象相一致，這樣在用戶還未使用具體產品前就給產品定下一個對應的基調。產品的特性決定了引導頁的風格，產品是消費類、娛樂類、工具類還是其他，根據不同的產品特性決定了引導頁是走輕松娛樂、小清新，還是規整、趣味性的風格，在最終的表現形式上也就會有完全不同的展現，是插圖、界面、動畫還是其他。如淘寶的娛樂、豆瓣的清新文藝、網路的工具、蟬游記的休閑等等，通過對比就能發現他們在引導頁設計上的差異。
這樣一方面有利於產品一脈相承，與產品使用體驗相一致;另一方面也會進一步強化公司形象。
以來往為例，來往是一款針對個人用戶的及時通訊應用，主打扎堆、閱後即焚、敲門等與微信不一樣有趣的功能，也是想給用戶創造不一樣的IM溝通方式。因此在引導頁的設計上通過趣味性、甚至有點搞怪的動作與表情來表現來往是這樣一款有趣、歡樂多的產品。
又如網易彩票，引導頁的主色選用了與網易自身的紅色相一致的紅色，在公司產品系統性上保持高度的一致性。
總之：想做好引導頁的設計，在理解用戶對引導頁需求的基礎上，懷揣熱愛產品的情懷，依靠精緻的布局，巧妙的構思，貼切的氛圍渲染，再加一點點特色。當然光講是枯燥的，還是需要設計師在具體的設計中不斷實踐，總結出新的觀點與方法，探索出別具一格的引導頁設計。
『陸』 移動APP前置引導頁設計
用戶初次使用該移動產品時，給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個產品的功能與具體操作方式。
◇ 前置型的引導： 在用戶還沒有正式開始使用這個產品時給出的一系列幫助內容。主要的設計方式為引導頁的設計。
◇ 過程中的引導： 在用戶使用產品的過程中給出的一系列幫助內容。主要的設計方式有空白頁的內容引導，loading等等待狀態中的引導，拆分包袱的逐步引導，巧設默認值的功能引導，tips引導，浮點引導，遮罩聚焦式引導，觸發式引導，任務演練式引導等。
帶領用戶更快速達到使用目標，在用戶使用產品過程中及時給予幫助，排除適用障礙。
最核心的設計技巧有4點： 精簡與合理使用 & 細致編排 & 有效的注意力 & 構建特色。
◇ 精簡與合理使用
只做必要的引導頁內容。沒必要的引導內容會增加信息的冗餘性，沖淡真正需要用戶關注的信息的注意力與精力。適合與否的依據主要是在真實的使用場景中，用戶是希望能對這個產品有個大致的了解，還是希望快速啟動產品立即使用，在使用的過程中再慢慢學習。
◇ 細致編排
講建立與用戶使用情景匹配的場景，讓用戶能建立一種熟悉的感受，能讓用戶對引導的功能點感同身受。
串聯的故事一般而言都是多頁的形式。一步拋出一個需告知的點，循序漸進的解說。故事可以只圍繞一個功能點來敘述，也可以將多個功能點串聯起來變成一個故事。形成一個完整的故事。由於每次一個告知點，多會採用聚焦的設計手法，把視覺注意力吸引到每個告知點上。
痛點渲染，建立一個用戶在實際生活中會遇到的類似的不便的場景，讓用戶能感受到共鳴，喚起用戶對所述功能的需要感。然後給出該產品能給出的解決方案，可以讓用戶感覺，戳痛點的手法比較適用於實用的工具性的功能引導。
◇ 有效的注意力
1、 注意力是記憶力的基礎，記憶力是注意力的結果。沒有良好的注意力就沒有良好的記憶力，良好的記憶力是建立在良好的注意力基礎上的。
當界面中的信息聚焦在某一點上時，用戶能快速准確定位到需要閱讀的信息內容上，達到消化信息的目的。
聚焦的設計手法有很多種，如通過光影的方式，將亮光的部分打在最需要用戶關注的信息上;虛化背景的方式，突出前面的信息內容;放大鏡方式，將需要用戶關注的部分作為放大突出。當然除了所舉案例中的常見手法，還可以運用其他的方式來聚焦，只要可以達到效果即可。
2、圖片傳遞信息，人類對於圖片信息的閱讀能力是遠大於對於文字信息的理解的。圖片可以更加直觀地讓用戶感知到所要傳遞的信息。在不同的圖片中，人們對人臉，美女，笑容，具有動感的照片更容易引起用戶的注意。
3、現在的引導頁的設計多為靜態的視覺頁面。人類對於動態內容的注意力> 對於靜態內容的注意力。所以除了靜態圖片的方式，我們完全可以通過適當增加動態內容來吸引用戶的注意力。
4、控制文案字數，人類對於內容的短時記憶的容量有限，一般為7 ± 2項目，一般為7 ± 2，即5 ~ 9個項目，這也就是平常我們所說的記憶廣度。)超過9個字元，用戶是很難記憶的且容易受到干擾而發生遺忘。
如果精簡後依然超出極限字元數，那麼可以對文案內容分層次。通過排版的方式，突出需要用戶記憶的字元，弱化其他字元。一般而言突出的字元為2-7個是比較容易記憶的。通過斷句的方式，將長的文案變為短的子單元，這樣可以擴大短時記憶的容量。斷句可以通過打標點，留空格，斷行的方式來實現。
◇ 構建特色
背景圖片的攝影角度或風格/後期處理/色調;版式編排的設計風格/版式布局/配色方案;文案的行文風格;多屏切換方式也可以考慮
構建特色並不需要對所有內容的元素都進行，即使只在一個內容點上進行特色構建也是可以的，但是需要做到的是這個點上的特色要非常明顯，用戶容易感知到。
引導頁適合闡述產品的概況內容(如具有產品的概念，產品的核心功能，具有競爭力的功能點或用戶痛點，以及會影響到初次使用的操作方式的內容)，建立起用戶對產品的大致認知;而不太適用於闡述過於細節的產品內容，因為此時用戶還無法進行相應的信息匹配，細節內容會不容易理解。
『柒』 uniapp開發App引導頁
App的引導頁是當用戶第一次打開一款App時所展示的3-5精美的圖片，用於告知用戶產品的功能及特點。好的引導頁會促使用戶對產品增加更多的興趣，當然這是UI設計的能力體現了，盡管很多人都會快速的滑過。對於開發人員怎麼去添加這幾張圖片只有在用戶第一次打開app時展示呢。
以uniapp開發的項目為例：在onLaunch函數中，檢查flag是否為false，如果為false,則跳轉到引導頁面，在引導頁中可設置跳轉到首頁。注意，最好用reLaunch，避免，用戶物理按鍵返回；為true，則存儲flag到本地。原理既是如此；但是實際開發時，會發現，存在閃屏現象，這樣用戶的體驗就不太好，所以比較關鍵的地方就在於這塊，還是以uniapp為例，需要在uniapp的源碼視圖下將splashscreen的設置進行修改，將autoclose改為false，在onLaunch中通過設置延遲時間調用plus.navigator.closeSplashscreen方法來關閉啟動圖。delay設置為0。這樣啟動圖的設置就ok了。
以下封裝了檢查是否進入引導頁的方法，僅供參考下：
Tip:在多次的應用中發現，如果在手機本身比較卡的情況下，用戶在第一次開啟app時，還是會存在首頁在引導頁之前出現，這種情況的處理方式是將引導頁默認設置為主頁，即在路由管理中，將引導頁寫在第一個，然後通過flag去判斷是否跳轉到首頁；
以上的引導頁開發只是提供一種思路，還有很多其他的方式，比如後端去控制是否展示引導頁，引導頁的動態變化。當然問題本身不難實現，關鍵在於實際應用時所存在的問題。
『捌』 如何App實現引導頁和歡迎頁
歡迎頁：這個在我們的微信裡面就有這個，我們每一次打開微信的時候都有一個地球，那麼這樣就是歡迎頁。歡迎頁具有良好的數據緩存作用。
引導頁：就是我們沒次安裝一個app的時候，前面都有幾個圖片。那麼這個引導頁有哪些作用，第一：它有教我們怎麼使用這個app和接受這app。第二：有宣傳的作用。
我們在這個功能中用到的知識點有ViewPage、ViewPage的適配器PageAdapter、ViewPage的滑動改變事件、、RadioGroupRadioButton的點擊事件。
好，現在我們接下來上代碼了。
這個就是我的項目結構。其中WActivity.class是歡迎頁、FActivity.class是引導頁、MyAdapter.class是ViewPage的適配、BasePageListen實現頁面滑動的介面。
第一個我們先寫WActivity這個類。
package com.example.office.startapp;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class WActivity extends AppCompatActivity {
private SharedPreferences sp;
private boolean isFirst;
//歡迎頁面
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_w);
//獲得共享參數對象
sp=getSharedPreferences("first", Context.MODE_PRIVATE);
//參數二 如果sp文件中沒有記錄的話 返回的默認值
isFirst=sp.getBoolean("isFirst",true);
//這裡面的判斷就是 如果是第一次進入app 那就跳轉引導頁
//不是第一次就跳到主頁面
new Handler().postDelayed(new Runnable() {
SharedPreferences.Editor editor;
Intent intent;
@Override
public void run() {
if(isFirst){
intent =new Intent(WActivity.this,FActivity.class);
startActivity(intent);
WActivity.this.finish();
//把數據保存到sp裡面
//獲取可以向sp裡面寫入數據的對象
editor=sp.edit();
editor.putBoolean("first",false);
//提交我們的數據
editor.commit();
}else {
intent=new Intent(WActivity.this,MainActivity.class);
startActivity(intent);
WActivity.this.finish();
}
}
},1500);
}
}
下面我們就寫MyAdpter這個類
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
/**
* Created by OFFICE on 2016/8/9.
*/
public class MyAdapter extends PagerAdapter{
private List< ImageView > list;
private Context context;
public MyAdapter(Context context, List<ImageView> list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
//裡面有一個方法必須刪除super.不刪除會報錯
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
我們寫BasePageListen這個類
import android.support.v4.view.ViewPager;
/**
* Created by OFFICE on 2016/8/9.
*/
public class BasePageListen implements ViewPager.OnPageChangeListener{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
最後我們寫FActivit
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
//引導頁
public class FActivity extends AppCompatActivity {
private List<ImageView> list;
private RadioGroup radioGroup;
private ViewPager viewPager;
private ImageView imageView1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_f);
viewPager= (ViewPager) findViewById(R.id.viewPage);
radioGroup= (RadioGroup) findViewById(R.id.radiogroup);
imageView1= (ImageView) findViewById(R.id.image) ;
initView();
imageView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(FActivity.this, MainActivity.class);
startActivity(intent);
FActivity.this.finish();
}
});
MyAdapter myAdapter=new MyAdapter(this,list);
viewPager.setAdapter(myAdapter);
//viewPage變動RadioButton也在變動
viewPager.addOnPageChangeListener(new BasePageListen(){
@Override
public void onPageSelected(int position) {
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(position);
radioButton.setChecked(true);
if(position==list.size()-1){
imageView1.setVisibility(View.VISIBLE);
}else {
imageView1.setVisibility(View.GONE);
}
}
});
//當點擊RadioButton的時候，viewpage也在改變
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
viewPager.setCurrentItem(checkedId);
}
});
}
private void initView(){
int [] images={R.mipmap.yd1,R.mipmap.yd2,R.mipmap.yd3};
list=new ArrayList<ImageView>();
for(int i=0;i<images.length;i++){
ImageView imageView=new ImageView(this);
imageView.setImageResource(images[i]);
list.add(imageView);
RadioButton radioButton=new RadioButton(this);
//設置radioButton的id
radioButton.setId(i);
//把ReaioButton放在group
radioGroup.addView(radioButton);
}
//設置默認選中的第一個按鈕
//獲得下標為0的按鈕對象
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(0);
radioButton.setChecked(true);
}
}
好了，復制上去就可以實現上面的效果。
『玖』 html5 做app引導頁怎麼做
H5e教育Html5開發為您解答：
1、製作html5引導頁面。
2、把做好的頁面放入Android工程中assets文件夾下。
3、利用WebView載入asset文件夾下的html文件。
4、在引導頁最後一頁的按鈕上捕捉點擊事件，結束引導頁，進入程序。
『拾』 App用戶引導頁如何引人入勝
引導頁是用戶在首次安裝並打開應用後，呈現給用戶的說明書。目的是希望用戶能在最短的時間內，了解這個應用的主要功能、操作方式並迅速上手，開始體驗之旅。既然是說明書那難免不受待見，因為我們的用戶總是傲嬌，他們不喜歡被教育、被說明，他們喜歡一口氣劃過引導頁，直接上手，但是在碰到問題、遇到挫折的時候又會各種別扭。所以這就需要設計師非常用心的去處理引導頁的設計。豐富多彩、風格迥異的引導頁設計 有些引導頁則沉穩大氣，適合資訊類的應用，給人以可信賴感。例如搜狐新聞客戶端的引導頁設計，摒除了所有多餘的設計，用干凈的界面及有力的文字體現了整個應用真實可信的媒體平台的定位。 有些引導頁則輕松、活潑，適合日常工具或者休閑類的應用，讓用戶感受到貼心和放鬆。例如UC手機瀏覽器，由用戶使用瀏覽器常見的下載麻煩的情景來穿起整個引導頁，像一副四格漫畫一樣讓用戶帶著瀏覽漫畫的心情，輕松地閱讀完整個引導頁，同時也強調了使用UC瀏覽器下載的輕松便捷。還有一些引導頁則富有生活情趣，適合一些文藝、小清新的應用，因為這部分應用的用戶不一定喜歡標新但一定立異，不喜歡隨大流。一套好的引導頁的構成，怎樣做到引人入勝？好的引導頁設計是從展示內容到設計風格再到語言文字都經過細致考究並與應用整體氣質符合的。 1. 展示內容要簡明扼要，只撿最重要的說，用戶雖然傲嬌但是我們也不能一味的去貶低用戶的理解能力及手機使用經驗，如果只是新功能的推薦我們完全可以只告訴用戶入口，而不是事無巨細的詳細列明每一步的操作，把一個好好的引導頁活生生做成一個幫助教程頁。如果是新的交互及操作方式，我們也可以只展示最核心、關鍵的操作，要留給用戶探索和發現的餘地。2. 展示內容應當連貫有一定的邏輯關系，所有的內容都按照一定的順序有機的排列。如先是亮點模塊的介紹再是應用整體呈現，或者按照一個主打功能的操作流程介紹。總之做到有主有次，再到最後靜靜等待用戶點擊「開始體驗」那一刻。3. 每頁只放一個內容。有時候想表現得東西太多，不妨拆分成幾頁，因為引導頁使用情景決定了，它是用戶在下載完應用後急切地想見到主界面使用應用前的絆腳石，極有可能的場景是用戶很快速的劃過引導頁，一頁上太多信息，只會讓用戶更快速的劃過引導頁。如果我們保證每一頁的內容都非常簡潔的話，用戶就算走馬觀花的劃過也能記下一些東西。每一個畫面都有一個重點。可能是文字也可能是圖。4. 設計風格，正如上面說到引導頁的設計風格要與產品的氣質保持一致，如果是一本正經的新聞資訊類應用。那它的引導頁風格也是穩重、正統的。而娛樂類的應用可能有更情感化的表現形式，例如漫畫形象的應用或者是大幅背景照片的運用。在設計細節上，現在也有越來越多的引導頁運用到線描的插畫，這樣既可以更方便、准確的傳達操作方式、使用場景等復雜信息又可以增加親和力減少說教帶來的用戶反感。還有局部放大、手繪箭頭等也功能介紹時常用的表現手段。5. 在文案上也是需要非常考究的，要使用用戶聽得懂的詞，不要讓用戶脆弱的自尊受到傷害。比如「點擊Title Bar，您可以…」(Title Bar是什麼東東，欺負老娘不懂英文么 ！！！！)不如換成「點這兒試試呢，您還能…」 總之，好的引導頁設計，不是一本冷冰冰的說明書，不是讓用戶脆弱的自尊飽受凌辱，而是讓用戶由里及表、由內而外的感受到自己受到非常良好的對待。這需要設計師真正從用戶的角度去理解用戶對於引導頁的需求及用戶閱讀引導頁的場景。