現在社會，同類產品競爭越演越烈。用戶對產品的第一映像往往決定了一切。而用戶的第一印象又起始於引導頁。也就是說，引導頁的好壞，很大程度上直接影響用戶是否最終使用或購買產品。所以，如若設計師能夠一開始就添加引人入勝的引導頁設計，產品吸引和說服用戶使用和購買的機率就會更大。
因此，本文將結合真實的設計案例，爲大家介紹引導頁相關構成和設計技巧，和大家一起探討引導頁如何設計，才能短時間內留下最好的第一印象，提供最佳用戶體驗。
那我們就一起來看看吧！
什麼是引導頁？
首先，我們先了解一下“引導頁（onboarding）”這一基本術語。引導頁（Onboarding page），最初來源於招聘和人力資源領域，用於指代一切能夠幫助新員工快速上手、適應環境的流程、技術和方法。大家都知道，剛入職的員工多少都會有些壓力，需要努力學習和適應，纔能有所改善。而這些來自企業層面的引導流程和協助方法，不僅能夠快速緩解他們的焦慮和緊張情緒，還能夠有效提升他們的自信心，讓他們更加高效地學習、工作和交往，從而快速爲企業創造價值。
其次，用戶體驗設計領域迅速吸收了這一術語，用於指代網頁或App設計中，能夠安慰用戶並簡單介紹產品的一系列交互設計和設計技巧。
考慮到用戶（尤其是第一次使用產品的新用戶），並不會花費太多時間瞭解產品的工作原理，用戶引導頁設計，首先需要解決的問題就是：明確設計優先級。畢竟，用戶願意學習產品的時間和能夠記住的內容都是有限的。 所以，即使產品信息確實很多，也千萬不要嘗試在引導頁展示所有細節。正確的方法應該是給各個信息設定優先級，由產品相關人員共同決定產品信息展示的先後順序。當然，在此需要注意的是，教程、嚮導、提示以及說明之類都是產品最基本的信息，需要優先進行考慮。
引導頁的作用是什麼？
然後，我們一起了解一下產品引導頁的三個主要作用：
-
歡迎用戶。優秀的引導頁，往往會以一種非常自然、且富有吸引力的方式，開啓產品與用戶之間的溝通和交流。利用引導頁首先問候歡迎用戶，就是其中非常不錯的一種方式。
-
介紹產品。在此階段，清晰介紹產品將如何爲用戶提供便利也十分重要。
-
吸引用戶。引導頁的首要作用就是尋求用戶情感共鳴，吸引和激勵他們繼續瞭解、學習和使用產品。
所以，從以上主要作用我們可以看出，引導頁應該是專爲新用戶而設立，而非那些已經使用產品，並對產品有所瞭解的用戶。
引導頁構成元素有哪些？
一般而言，各類引導頁的構成部件大不相同。但爲方便大家瞭解和學習，我們大致爲大家總結了以下幾個常用的：
-
首次使用引導
一般由一系列頁面構成，旨在快速爲新手介紹產品，並說服他們試用。
-
歡迎信息
直接展示在歡迎或啓動頁上的短信息，用以及時問候歡迎用戶，也是引導頁尋求情感共鳴的最常用方式。而且，在具體案例中，設計師們一般還會加入CTA按鈕設計，方便用戶直接點擊按鈕，瞭解產品詳情。
-
進度條和加載指示器
這是基於人們總是希望能夠完成任務的想法，而總結出來的設計技巧。界面添加進度條或加載指示器設計（例如常用的加載圓點或破折號等設計），能夠有效激勵用戶完成引導流程，讓用戶清晰地知道自己所處的產品階段。
- 產品介紹視頻
通過視頻，更加生動形象地介紹產品功能和特色。
-
產品提示
爲特定組件、佈局或用戶操作提供解釋說明，以引導用戶順利使用該產品。
-
空狀態提示
這些提示大都出現在需要用戶填寫內容的區域。在用戶填寫之前，類似的提示信息能夠爲用戶解惑，並提供填寫引導。
-
操作清單（Checklists）
和進度條一樣，都是爲了激勵用戶完成某項操作而添加。此外，更重要的是，類似的設計還能提供遊戲般的趣味性體驗，加深用戶對產品的印象。簡單來講，當用戶按照清單完成某些操作之後，就能直接獲得一定獎勵或開啓更多的產品功能，跟遊戲裏逐步闖關吃雞一樣，有趣而富有參與感。
Behance就利用了類似的操作清單設計，引導用戶逐步完成個人頁面信息填寫。
-
熱點設計
這點設計旨在將用戶注意吸引到產品的重要區域、控件或功能上。不然，一些新用戶很有可能會直接忽略掉他們。
-
個性化引導
此類設計是基於用戶填寫的喜好而設定。通常會在擁有很多內容交互的產品中找到，例如大家熟知的Behance和Pinterest。
Perfect Recipes個性化引導設計，幫助用戶根據各自需求設定減重目標和限制，更加人性化。
當然，這並不意味着，以上羅列的所有部件都必須添加到任何產品中。具體情況應該具體分析。UX/UI設計師需要根據實際的使用情景，有效平衡和取捨，注意用戶研究和產品可用性測試，從而打造出最理想的產品，提升產品銷量。此外，對產品和用戶的全面研究，也能幫助設計師們更加深入地瞭解用戶需求和痛點，更加清晰的瞭解何時、何地爲他們提供幫助和引導，纔會更有效。
實用設計技巧分享
藉助圖片製作教程
人們對圖片的感知和理解遠遠快於文字。 這也使得插畫類設計理所當然地成爲製作教程，並快速介紹產品信息的重要工具。在教程或插畫設計中，無論是寫實的照片，還是手繪圖像， 都能夠生動有效地解釋產品信息。更重要的是，它們還爲設計師提供了更多的設計選擇，從簡單的圖標樣式設計，到美觀複雜的藝術品般的設計等等。
總之，這類插畫設計是提高產品界面可用性、最大限度地減少複雜文案設計的有效途徑，也被廣泛應用到兒童和青年類產品網頁或App設計之中。
此款Finance Tracker的UI設計，就採用定製的插畫設計，時尚吸睛，值得學習。
而且，近幾年網頁或APP設計熱門的流行趨勢，也有力佐證了插畫在UI/UX設計中的重要地位。軟件教程也成爲各類插畫設計的搖籃。在很多情況下，插畫設計甚至成爲教程設計的核心，它們以一種更具魅力、更易理解的方式，展示着產品特色功能和優勢。
當然，除了插畫，另一個有效的方式就是使用吉祥物。通過使用虛擬角色，模擬產品與用戶之間的真實溝通交互流程，建立牢固的情感紐帶。
文案簡潔實用
用戶界面UX寫作的過程中，文案就是力量。當然，具體文案設計過程也需要注意兩點。首先，文案設計需儘量簡短實用。事實證明，簡短且內容豐富的文案設計，要遠比長篇大論更加高效。設計師必須添加儘量簡潔易懂的文案設計，不浪費用戶投入教程學習或閱讀產品提示的任何時間。
總之，不管你是不是專業的UX文案寫手，都需要投入時間和精力打造真正簡潔幹練、準確易懂、且富有吸引力的文案設計。此外，設計好文案之後，也需要儘可能的多測試，力求將設計打磨到最佳的狀態。
正如UX大牛在其《點石成金》中寫到的那樣：“關於使用說明，你要知道，在人們反覆嘗試卻總是失敗後之後，他們纔會耐心去閱讀它。”這一點大家必須謹記。當你希望在UX文案設計中展示才能時，切忌不要做得太過。至少，工具提示、教程以及使用說明並不是你發揮寫作才能的地方，請儘量讓他們簡潔易懂，高效實用。
而另外值得注意的一點就是：文案設計，不僅提供產品信息，還是產品界面的重要視覺元素。和界面的圖標、字段、按鈕、插畫、開關以及其它佈局元素一樣，文案設計也佔用一定的界面空間，影響着產品界面的整體視覺風格。而且，優秀的文案設計之所以“優秀”，除了能夠高效傳遞的產品信息和內容之外，還取決於其視覺呈現方式，例如選用的外在樣式和字體排版、背景，甚至文本位置等，所有這些因素都會影響到界面文案的可讀性。所以，文案設計過程中，所有相關因素都需要考慮在內，儘可能確保文案設計簡潔高效，意義深遠。
My Baby App的引導頁，就採用簡潔幹練的文案搭配吸睛3D背景的設計，即清晰交代軟件的主要功能，又成功吸引了用戶注意。
關注用戶需求
你曾經看到過父母介紹他們的孩子嗎? 當他們開始講述自己孩子的成績、特長和優點時，他們往往很難停下來。而設計師們向新用戶介紹產品時，也是如此。因爲產品就是他們過去一段時間內，設計構想、時間、金錢以及價值的體現和集合。毫無疑問，談到該產品，他們總是抑制不住想要分享更多，從而最終在引導頁中添加越來越多的內容。但這樣卻是非常不正確的。因爲對用戶而言，該產品僅僅只是諸多軟件中的一個而已，可有可無。爲了快速吸引他們停留並試用，引導頁應該根據用戶的真實需求進行內容展示。而非一股腦全盤脫出，嚇跑他們。
Bee Exchange的引導頁設計，文案簡潔有力，視覺層次結構清晰，直觀高效地展示用戶最關心的產品內容。
利用動畫，提升界面活力
另一個能夠有效提升趣味性和用戶參與度的方法，就是在引導頁中添加動畫。好的動畫設計，不僅能夠讓人機交互更加生動自然，還能爲界面注入活力，輕鬆打造出讓人眼前一亮的視覺效果。更重要的是，動畫還能有效突出一些重要的細節。當然，類似的設計也會增加界面加載難度。所以，設計師需要謹慎評估，向開發瞭解相關技術可行性之後，再考慮是否添加。
吸睛的3D動畫設計，能夠有效提升引導頁的趣味性和吸引力。
允許跳過
引導頁設計，也需提供跳過選擇。因爲並非所有用戶都需要使用引導。事實上，根據大量產品設計實踐證明，即使是第一次使用產品的新用戶，也可能想要直接跳過教程引導。所以，是否添加類似功能，也需要設計師反覆測試和分析之後，再決定。
添加提示設計
工具提示是幫助用戶體驗界面功能的重要方式。它們在用戶一步步探索界面功能的過程中，逐一展示，提示按鈕或界面功能，突出產品特色，是用戶使用產品的重要引導性設計。
Amazon工具提示設計，引導非註冊用戶及時註冊登錄。
考慮空狀態設計
對於那些需要用戶填充信息的產品，設計師則需要考慮空狀態的設計。因爲在用戶添加任何個人信息或內容之前，它們往往都是空白的。此時界面該如何佈局才能留住用，就變得至關重要。例如， 某些產品設計中的願望清單、項目集合以及用戶反饋等界面，雖然它們暫時是空白的，但確是獲取用戶反饋和提升用戶參與度的重要方式，不容忽視。
Dropbox的收藏項目模塊的空狀態設計，就通過添加有趣的插畫和簡短的提示文案設計，引導用戶如何選擇和使用該功能模塊。
注意情感化設計
富有情感的產品，擁有獨特的魅力，能夠快速與目標用戶建立牢固的情感聯繫。而情感化設計，就是實現這一目標最靈活有效的方式之一。設計師需在充分調查和了解用戶之後，確定整體的感情基調，然後再開始設計。在未確定產品與用戶交流應該使用的基本語氣、語調以及感情色彩之前，千萬不要貿然開始撰寫任何文案。
此外，切忌不要幽默過度。尤其是那些面向多國售賣產品的企業，需要特別注意。因爲很多在我們看來十分趣味幽默的設計，在他國用戶看來，可能一點都不幽默，有時甚至可能會冒犯到他們，最終影響產品銷量。總之，情感化設計，也需要設計師把握好度。
避免過度設計
老實說，並不是所有用戶都需要使用引導或幫助。所以，設計過程中，也不要過分突出引導性或幫助性設計。事實上，在以下情境中，引導頁設計甚至會帶來反效果：
-
引導性內容太多
-
引導性內容太分散用戶注意
-
引導性內容不夠清晰
-
用戶無法跳過或取消引導設計（例如並未提供“不再提示”之類的設置選項）
-
引導性內容並未提供任何有用信息
總之，設計師需要注意平衡和取捨，及時測試，不斷優化。
結語
綜上所述，優質的引導頁設計是產品與用戶之間不可或缺的溝通橋樑，能夠快速與用戶建立牢固的情感聯繫，清晰展示產品特色同時，輕鬆給用戶留下最好的第一印象，從而提升產品銷售量。設計師們需要格外重視。