㈠ 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去判斷是否跳轉到首頁;
以上的引導頁開發只是提供一種思路,還有很多其他的方式,比如後端去控制是否展示引導頁,引導頁的動態變化。當然問題本身不難實現,關鍵在於實際應用時所存在的問題。
㈡ html5 做app引導頁怎麼做
要使用HTML5創建應用引導頁,首先需要製作一個HTML5引導頁面。這個頁面應該包括一系列介紹應用功能和特點的步驟,以引導新用戶熟悉應用界面和操作。
完成頁面設計後,下一步是將該頁面整合到Android項目中。具體來說,需將製作好的HTML5頁面放入Android工程的assets文件夾下,確保其路徑正確。
接下來,使用WebView組件來載入存放在assets文件夾內的HTML5文件。在Android開發中,WebView是顯示網頁內容的視圖組件,能夠載入和顯示HTML文檔。通過設置WebView的載入路徑,可以輕松實現引導頁的展示。
為了實現引導頁的流暢過渡,需在引導頁的最後一頁設置一個按鈕。當用戶點擊該按鈕時,應觸發相應的邏輯,如結束引導頁並跳轉至應用程序的主界面。這通常涉及到編寫JavaScript代碼來與Android的Java代碼進行交互,通過監聽按鈕點擊事件來實現引導頁的退出。
在實現點擊事件時,可以使用WebView的loadUrl方法載入JavaScript代碼,從而在引導頁的最後一頁觸發點擊事件。這樣,當用戶完成所有引導步驟後,點擊按鈕將自動結束引導頁,啟動應用程序的主界面。
值得注意的是,確保所有的HTML5文件和JavaScript代碼都能正確載入和執行,以保證引導頁的流暢性和用戶體驗。同時,優化載入速度和減少頁面切換時間,將有助於提高用戶的滿意度。
通過以上步驟,您可以成功創建一個HTML5引導頁,並將其整合到Android應用程序中,為用戶提供一個友好的入門體驗。
㈢ 移動APP前置引導頁設計
用戶初次使用該移動產品時,給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個產品的功能與具體操作方式。
◇ 前置型的引導: 在用戶還沒有正式開始使用這個產品時給出的一系列幫助內容。主要的設計方式為引導頁的設計。
◇ 過程中的引導: 在用戶使用產品的過程中給出的一系列幫助內容。主要的設計方式有空白頁的內容引導,loading等等待狀態中的引導,拆分包袱的逐步引導,巧設默認值的功能引導,tips引導,浮點引導,遮罩聚焦式引導,觸發式引導,任務演練式引導等。
帶領用戶更快速達到使用目標,在用戶使用產品過程中及時給予幫助,排除適用障礙。
最核心的設計技巧有4點: 精簡與合理使用 & 細致編排 & 有效的注意力 & 構建特色。
◇ 精簡與合理使用
只做必要的引導頁內容。沒必要的引導內容會增加信息的冗餘性,沖淡真正需要用戶關注的信息的注意力與精力。適合與否的依據主要是在真實的使用場景中,用戶是希望能對這個產品有個大致的了解,還是希望快速啟動產品立即使用,在使用的過程中再慢慢學習。
◇ 細致編排
講建立與用戶使用情景匹配的場景,讓用戶能建立一種熟悉的感受,能讓用戶對引導的功能點感同身受。
串聯的故事一般而言都是多頁的形式。一步拋出一個需告知的點,循序漸進的解說。故事可以只圍繞一個功能點來敘述,也可以將多個功能點串聯起來變成一個故事。形成一個完整的故事。由於每次一個告知點,多會採用聚焦的設計手法,把視覺注意力吸引到每個告知點上。
痛點渲染,建立一個用戶在實際生活中會遇到的類似的不便的場景,讓用戶能感受到共鳴,喚起用戶對所述功能的需要感。然後給出該產品能給出的解決方案,可以讓用戶感覺,戳痛點的手法比較適用於實用的工具性的功能引導。
◇ 有效的注意力
1、 注意力是記憶力的基礎,記憶力是注意力的結果。沒有良好的注意力就沒有良好的記憶力,良好的記憶力是建立在良好的注意力基礎上的。
當界面中的信息聚焦在某一點上時,用戶能快速准確定位到需要閱讀的信息內容上,達到消化信息的目的。
聚焦的設計手法有很多種,如通過光影的方式,將亮光的部分打在最需要用戶關注的信息上;虛化背景的方式,突出前面的信息內容;放大鏡方式,將需要用戶關注的部分作為放大突出。當然除了所舉案例中的常見手法,還可以運用其他的方式來聚焦,只要可以達到效果即可。
2、圖片傳遞信息,人類對於圖片信息的閱讀能力是遠大於對於文字信息的理解的。圖片可以更加直觀地讓用戶感知到所要傳遞的信息。在不同的圖片中,人們對人臉,美女,笑容,具有動感的照片更容易引起用戶的注意。
3、現在的引導頁的設計多為靜態的視覺頁面。人類對於動態內容的注意力> 對於靜態內容的注意力。所以除了靜態圖片的方式,我們完全可以通過適當增加動態內容來吸引用戶的注意力。
4、控制文案字數,人類對於內容的短時記憶的容量有限,一般為7 ± 2項目,一般為7 ± 2,即5 ~ 9個項目,這也就是平常我們所說的記憶廣度。)超過9個字元,用戶是很難記憶的且容易受到干擾而發生遺忘。
如果精簡後依然超出極限字元數,那麼可以對文案內容分層次。通過排版的方式,突出需要用戶記憶的字元,弱化其他字元。一般而言突出的字元為2-7個是比較容易記憶的。通過斷句的方式,將長的文案變為短的子單元,這樣可以擴大短時記憶的容量。斷句可以通過打標點,留空格,斷行的方式來實現。
◇ 構建特色
背景圖片的攝影角度或風格/後期處理/色調;版式編排的設計風格/版式布局/配色方案;文案的行文風格;多屏切換方式也可以考慮
構建特色並不需要對所有內容的元素都進行,即使只在一個內容點上進行特色構建也是可以的,但是需要做到的是這個點上的特色要非常明顯,用戶容易感知到。
引導頁適合闡述產品的概況內容(如具有產品的概念,產品的核心功能,具有競爭力的功能點或用戶痛點,以及會影響到初次使用的操作方式的內容),建立起用戶對產品的大致認知;而不太適用於闡述過於細節的產品內容,因為此時用戶還無法進行相應的信息匹配,細節內容會不容易理解。
㈣ APP 引導頁設計1-引導頁的分類
因工作原因,筆者體驗過很多APP,其UI是筆者比較關注的一部分,畢竟UI是第一印象嘛,大部分APP,引導頁作為其的第一個入口,新裝時啟動都會先顯示引導頁,介紹其功能特性。APP體驗多了,逐漸有點心得,這里筆者對市面上APP的引導頁做下歸類,細數歸納下對引導頁的所見所想。
根據引導頁的目的、出發點不同,可以將其分為功能介紹類、推廣類、問題解決類、賣萌搞笑類,一般引導頁不會超過5頁,下面看看各類精彩紛呈的引導頁。
1.功能介紹類
這樣的引導頁最直白的就是截圖展示功能特點,或者用形象化的物體(如下圖QQ改版升級,其引導頁就用代表性的企鵝來表現APP的主要功能。)
用戶需要一針見血,在這樣一個網路化的時代,人們停留的時間越來越短,瀏覽你的APP界面時間不會超過3秒,在這樣寶貴的3秒里,你需要用簡要明白、通俗易懂的文案和界面呈現,突出重點即可,展示我們的功能展示頁面。
2.推廣類
推廣類引導頁除了有一些產品功能的介紹外,更多是想傳達產品的態度,讓用戶更明白這個產品的情懷,並考慮與整個產品風格、公司形象相一致。這一類的引導頁如果做的不夠吸引人,用戶只會不耐煩地想快速劃過。而製作精良、有趣的引導頁,用戶會駐足觀賞。
以淘寶旅行為例,淘寶旅行通過清新、生活化場景的插圖營造產品是一款樂享生活、跟著感覺走的出行應用,在你出行前就幫你計劃好所有的行程安排,只要一個行李箱,說走就走,與產品的理念相契合。而另外一款應用,選用恬靜、安逸的照片配以簡潔的文字來渲染產品的基調。
3.搞笑賣萌類
不知道怎麼概括,就是說一個故事?通常會配合一些動畫效果來輔助展示。
4 、問題解決類
問題解決類通過描述在實際生活中會遇到的問題,直擊痛點,通過最後的解決方案讓用戶產生情感上的聯系,讓用戶對產品產生好感,增加產品粘度。例如QQ瀏覽器的引導頁設計,通過形象的插圖直接明了地說明了QQ瀏覽器解決了其他瀏覽器所遇到的問題(搜不到小說、看小說花錢、小說更新需要等)。
以上已經針對引導頁的目的差異以及表現方式進行了相關歸類,在具體的設計中還得注意一些原則,它們會讓你的設計更加吸引人,信息傳達的效果更好。
#本文同步發布到 pm263.com ,pm263為你提供更多更全的產品經理干貨,歡迎大家訪問。