導航:首頁 > 軟體資訊 > app引導頁怎麼做

app引導頁怎麼做

發布時間:2023-08-04 20:19:40

① 如何做好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 引導頁設計1-引導頁的分類

因工作原因,筆者體驗過很多APP,其UI是筆者比較關注的一部分,畢竟UI是第一印象嘛,大部分APP,引導頁作為其的第一個入口,新裝時啟動都會先顯示引導頁,介紹其功能特性。APP體驗多了,逐漸有點心得,這里筆者對市面上APP的引導頁做下歸類,細數歸納下對引導頁的所見所想。

根據引導頁的目的、出發點不同,可以將其分為功能介紹類、推廣類、問題解決類、賣萌搞笑類,一般引導頁不會超過5頁,下面看看各類精彩紛呈的引導頁。

1.功能介紹類

這樣的引導頁最直白的就是截圖展示功能特點,或者用形象化的物體(如下圖QQ改版升級,其引導頁就用代表性的企鵝來表現APP的主要功能。)

用戶需要一針見血,在這樣一個網路化的時代,人們停留的時間越來越短,瀏覽你的APP界面時間不會超過3秒,在這樣寶貴的3秒里,你需要用簡要明白、通俗易懂的文案和界面呈現,突出重點即可,展示我們的功能展示頁面。

2.推廣類

推廣類引導頁除了有一些產品功能的介紹外,更多是想傳達產品的態度,讓用戶更明白這個產品的情懷,並考慮與整個產品風格、公司形象相一致。這一類的引導頁如果做的不夠吸引人,用戶只會不耐煩地想快速劃過。而製作精良、有趣的引導頁,用戶會駐足觀賞。

以淘寶旅行為例,淘寶旅行通過清新、生活化場景的插圖營造產品是一款樂享生活、跟著感覺走的出行應用,在你出行前就幫你計劃好所有的行程安排,只要一個行李箱,說走就走,與產品的理念相契合。而另外一款應用,選用恬靜、安逸的照片配以簡潔的文字來渲染產品的基調。

3.搞笑賣萌類

不知道怎麼概括,就是說一個故事?通常會配合一些動畫效果來輔助展示。

4 、問題解決類

問題解決類通過描述在實際生活中會遇到的問題,直擊痛點,通過最後的解決方案讓用戶產生情感上的聯系,讓用戶對產品產生好感,增加產品粘度。例如QQ瀏覽器的引導頁設計,通過形象的插圖直接明了地說明了QQ瀏覽器解決了其他瀏覽器所遇到的問題(搜不到小說、看小說花錢、小說更新需要等)。

以上已經針對引導頁的目的差異以及表現方式進行了相關歸類,在具體的設計中還得注意一些原則,它們會讓你的設計更加吸引人,信息傳達的效果更好。

#本文同步發布到 pm263.com ,pm263為你提供更多更全的產品經理干貨,歡迎大家訪問。

③ APP啟動頁設計詳解

下面所寫啟動頁內容,包含啟動頁、開屏廣告、引導頁、品牌展示等。

1)按能否跳過啟動頁分類:

2)按啟動頁頁數分類:

3)按啟動頁更新頻率分類:

4)按照是否跳出啟動頁分類:

動態圖片類型的APP啟動頁,多見是企業logo或slogan動態載入,例如滴滴出行、優步。

短視頻形式的啟動頁,時間基本上已經超過2-3秒,故很少有APP啟動頁是採用短視頻的。

引導頁建議由前端載入顯示,不需要在後台上傳推送給前端

PS: 展示頻率規則參考

用戶第一次打開當前版本展示,後續打開不再展示,當檢測到有新版本更新時再展示(根據業務需求調整展示頻率),引導面一般採用3-4個頁面為佳,因每個頁面需要手動滑動所以用戶每次啟動都展示會造成用戶的反感,增加進入首頁成本。

④ 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前置引導頁設計

用戶初次使用該移動產品時,給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個產品的功能與具體操作方式。

◇ 前置型的引導: 在用戶還沒有正式開始使用這個產品時給出的一系列幫助內容。主要的設計方式為引導頁的設計。

◇ 過程中的引導: 在用戶使用產品的過程中給出的一系列幫助內容。主要的設計方式有空白頁的內容引導,loading等等待狀態中的引導,拆分包袱的逐步引導,巧設默認值的功能引導,tips引導,浮點引導,遮罩聚焦式引導,觸發式引導,任務演練式引導等。

帶領用戶更快速達到使用目標,在用戶使用產品過程中及時給予幫助,排除適用障礙。

最核心的設計技巧有4點: 精簡與合理使用 & 細致編排 & 有效的注意力 & 構建特色。

◇ 精簡與合理使用

  只做必要的引導頁內容。沒必要的引導內容會增加信息的冗餘性,沖淡真正需要用戶關注的信息的注意力與精力。適合與否的依據主要是在真實的使用場景中,用戶是希望能對這個產品有個大致的了解,還是希望快速啟動產品立即使用,在使用的過程中再慢慢學習。

◇ 細致編排

講建立與用戶使用情景匹配的場景,讓用戶能建立一種熟悉的感受,能讓用戶對引導的功能點感同身受。

串聯的故事一般而言都是多頁的形式。一步拋出一個需告知的點,循序漸進的解說。故事可以只圍繞一個功能點來敘述,也可以將多個功能點串聯起來變成一個故事。形成一個完整的故事。由於每次一個告知點,多會採用聚焦的設計手法,把視覺注意力吸引到每個告知點上。

痛點渲染,建立一個用戶在實際生活中會遇到的類似的不便的場景,讓用戶能感受到共鳴,喚起用戶對所述功能的需要感。然後給出該產品能給出的解決方案,可以讓用戶感覺,戳痛點的手法比較適用於實用的工具性的功能引導。

◇  有效的注意力

1、 注意力是記憶力的基礎,記憶力是注意力的結果。沒有良好的注意力就沒有良好的記憶力,良好的記憶力是建立在良好的注意力基礎上的。

當界面中的信息聚焦在某一點上時,用戶能快速准確定位到需要閱讀的信息內容上,達到消化信息的目的。

聚焦的設計手法有很多種,如通過光影的方式,將亮光的部分打在最需要用戶關注的信息上;虛化背景的方式,突出前面的信息內容;放大鏡方式,將需要用戶關注的部分作為放大突出。當然除了所舉案例中的常見手法,還可以運用其他的方式來聚焦,只要可以達到效果即可。

2、圖片傳遞信息,人類對於圖片信息的閱讀能力是遠大於對於文字信息的理解的。圖片可以更加直觀地讓用戶感知到所要傳遞的信息。在不同的圖片中,人們對人臉,美女,笑容,具有動感的照片更容易引起用戶的注意。

3、現在的引導頁的設計多為靜態的視覺頁面。人類對於動態內容的注意力> 對於靜態內容的注意力。所以除了靜態圖片的方式,我們完全可以通過適當增加動態內容來吸引用戶的注意力。

4、控制文案字數,人類對於內容的短時記憶的容量有限,一般為7 ± 2項目,一般為7 ± 2,即5 ~ 9個項目,這也就是平常我們所說的記憶廣度。)超過9個字元,用戶是很難記憶的且容易受到干擾而發生遺忘。

如果精簡後依然超出極限字元數,那麼可以對文案內容分層次。通過排版的方式,突出需要用戶記憶的字元,弱化其他字元。一般而言突出的字元為2-7個是比較容易記憶的。通過斷句的方式,將長的文案變為短的子單元,這樣可以擴大短時記憶的容量。斷句可以通過打標點,留空格,斷行的方式來實現。

◇ 構建特色

背景圖片的攝影角度或風格/後期處理/色調;版式編排的設計風格/版式布局/配色方案;文案的行文風格;多屏切換方式也可以考慮

構建特色並不需要對所有內容的元素都進行,即使只在一個內容點上進行特色構建也是可以的,但是需要做到的是這個點上的特色要非常明顯,用戶容易感知到。

引導頁適合闡述產品的概況內容(如具有產品的概念,產品的核心功能,具有競爭力的功能點或用戶痛點,以及會影響到初次使用的操作方式的內容),建立起用戶對產品的大致認知;而不太適用於闡述過於細節的產品內容,因為此時用戶還無法進行相應的信息匹配,細節內容會不容易理解。

閱讀全文

與app引導頁怎麼做相關的資料

熱點內容
廣聯達加密鎖怎麼看到期 瀏覽:172
cad軌跡命令 瀏覽:979
同事刷到女程序員自媒體視頻 瀏覽:571
校驗演算法的缺點是什麼 瀏覽:717
PHP商品分類功能實現 瀏覽:330
php取字元串中間 瀏覽:430
程序員經常用工具 瀏覽:835
降服主力指標源碼主圖 瀏覽:500
python實用庫 瀏覽:692
電腦默認7個文件夾 瀏覽:11
新唐單片機安裝c51後編譯錯誤 瀏覽:530
紅包源碼引流神器 瀏覽:235
學生初中畢業撕書解壓 瀏覽:747
命令方塊刷銅點教學 瀏覽:690
php郵件訂閱系統 瀏覽:997
柱樑底加密箍間距 瀏覽:30
pythonjavascript對比 瀏覽:741
什麼動漫app是大陸字幕 瀏覽:286
android查看activity棧 瀏覽:918
x86固件編譯 瀏覽:166