2020年立項金課-UI元素圖形創(chuàng)意設(shè)計第5章引導(dǎo)頁設(shè)計分為6個部分010203040506了解引導(dǎo)頁設(shè)計優(yōu)秀引導(dǎo)頁設(shè)計范例靜態(tài)引導(dǎo)頁設(shè)計原則引導(dǎo)頁的類型引導(dǎo)頁的設(shè)計步驟引導(dǎo)頁設(shè)計項目實戰(zhàn)引導(dǎo)頁是在用戶首次進入移動終端應(yīng)用程序之前出現(xiàn)的引導(dǎo)提示頁面，數(shù)量通常為兩屏或以上，可滑動。引導(dǎo)頁的初始功能是為了緩解用戶啟動APP時等待的焦慮情緒，并且傳遞產(chǎn)品的服務(wù)理念。引導(dǎo)頁是為帶領(lǐng)消費者快速、清晰、愉悅地進入APP而設(shè)計,是對產(chǎn)品本身的介紹、概括、指引。好的引導(dǎo)頁設(shè)計能夠激發(fā)消費者的好奇心，吸引用戶對產(chǎn)品進行使用。引導(dǎo)頁通常有3~5個頁面，且尾頁設(shè)有進入產(chǎn)品的按鈕，每個頁面之間的風(fēng)格應(yīng)當(dāng)保持統(tǒng)一，內(nèi)容應(yīng)當(dāng)與產(chǎn)品的主題相呼應(yīng)。引導(dǎo)頁設(shè)計的概念5.1一組關(guān)于雙十一引導(dǎo)頁的案例。通過一些經(jīng)典的ip形象，清晰明了的文案，引起用戶的注意力，利用六個頁面，分別介紹了雙十一購物節(jié)的六個主要特征。引導(dǎo)頁設(shè)計-已上線5.2引導(dǎo)頁的設(shè)計以用戶閑置物品太多這個痛點著手，提出了轉(zhuǎn)賣閑置物的概念，從而引出咸魚APP平臺。整個頁面的設(shè)計能夠體現(xiàn)產(chǎn)品的亮點，也能夠引起用戶的共鳴，既拉近了用戶與產(chǎn)品的距離，也強化了品牌的認知和記憶。引導(dǎo)頁設(shè)計-已上線5.2500px引導(dǎo)頁，當(dāng)用戶第一次使用這個產(chǎn)品，會進入到一種全屏遮罩狀態(tài)，開啟引導(dǎo)操作的模式，引導(dǎo)用戶學(xué)習(xí)這個軟件的必要操作，同時在每個引導(dǎo)頁中設(shè)置了登錄注冊的通道，用戶可以在任何一頁中登錄這個軟件，進入首頁面，這非常適合再次使用這個產(chǎn)品的用戶。引導(dǎo)頁設(shè)計-已上線5.2SketchesHelp是一款草圖輔助設(shè)計的軟件，這個軟件的核心就是用戶利用軟件操作實現(xiàn)草圖的繪制，所以學(xué)習(xí)操作是用戶的必經(jīng)之路，軟件將其核心功能通過引導(dǎo)頁的方式讓用戶學(xué)習(xí)，減少了用戶在產(chǎn)品中的嘗試成本，也提高了產(chǎn)品的利用率。引導(dǎo)頁設(shè)計-已上線5.2引導(dǎo)頁的文字呈現(xiàn)應(yīng)當(dāng)具有言簡意賅的特征。每一頁精練的文字共同闡述一個目的。引導(dǎo)頁廣告的文字可以按照內(nèi)容進行層級劃分，通常會劃分為兩個層次:主標題與副標題，通過字體、字號、字色進行兩個標題的劃分。合理的劃分文字的層級，有利于用戶更快捷地接收產(chǎn)品的信息。5.3.1文字信息層級梳理原則APP引導(dǎo)頁設(shè)計原則5.3與傳統(tǒng)的版式設(shè)計不同的，引導(dǎo)頁廣告的篇幅受到手機屏幕的影響，故而多個視覺元素的排布通常采用中心擴散的方式，聚焦點的視覺面積最大，同時與擴散的元素拉開對比。這樣用戶能清晰地看到核心文案信息與文案對應(yīng)的視覺表現(xiàn)元素。在一個版面中，視覺中心位置位于幾何中心位置的上方。版面視覺中心是一個版面的黃金位置，通常在這個位置放置最重要的內(nèi)容。5.3.2合理化構(gòu)圖APP引導(dǎo)頁設(shè)計原則5.3每個產(chǎn)品的引導(dǎo)頁雖然都為獨立的頁面，但是之間應(yīng)當(dāng)具有一定的延續(xù)性，例如通過同樣的色彩、同樣的構(gòu)圖或者具有相關(guān)聯(lián)的某種元素。5.3.3多頁面之間的延續(xù)性APP引導(dǎo)頁設(shè)計原則5.3引導(dǎo)頁通常由3-5個頁面構(gòu)成，因此頁面中應(yīng)當(dāng)有合理的位置指示標識。指示圖標通常有兩個狀態(tài):當(dāng)前瀏覽頁面狀態(tài)和非當(dāng)前瀏覽頁狀態(tài),當(dāng)前瀏覽頁的指示圖標需要高亮、突出顯示，通常通過明度、色彩、大小的變化來進行兩種狀態(tài)的區(qū)分。最常見的翻頁指示圖標為圓形的排列，放置在引導(dǎo)頁的底部中間。最后一頁應(yīng)當(dāng)具有進入產(chǎn)品內(nèi)部的按鈕。5.3.4頁面滑動指示設(shè)計APP引導(dǎo)頁設(shè)計原則5.3這種類型的引導(dǎo)頁會選擇產(chǎn)品的截圖或者是實景圖，結(jié)合文字呈現(xiàn)產(chǎn)品的主題。利用模特海報結(jié)合了文字，體現(xiàn)了產(chǎn)品是修圖制圖的主題，非常清晰明確地向用戶介紹了產(chǎn)品的品牌與功能。5.4.1圖片結(jié)合文字引導(dǎo)頁類型5.4MBE插畫的特點就是簡潔、圓潤、可愛，斷點和周圍的小點綴加上一些微微的光澤感，是它的標志。引導(dǎo)頁類型5.45.4.2MBE插畫立體插畫類引導(dǎo)頁，顧名思義是在界面中采用2.5D或者3D的風(fēng)格，在二維的空間里表現(xiàn)出三維的事物，讓扁平的界面能夠呈現(xiàn)出立體感，吸引用戶的注意力。引導(dǎo)頁類型5.45.4.3立體插畫類MBE基礎(chǔ)練習(xí)引導(dǎo)頁類型5.4扁平插畫類用簡單線條或者色塊概括的外部輪廓,繪制出“平”的感覺。扁平化引導(dǎo)頁畫風(fēng)簡潔明了，突出重點，能夠快速的讓用戶了解內(nèi)容，當(dāng)然由于市場上過多的產(chǎn)品均采用這種形式呈現(xiàn)，在視覺上難以讓用戶有深刻的體驗。引導(dǎo)頁類型5.45.4.4扁平插畫類扁平化結(jié)合立體化基礎(chǔ)練習(xí)引導(dǎo)頁類型5.4合理的動態(tài)效果能夠打破頁面的沉寂感，并且能夠以更為直觀的形式讓用戶感受產(chǎn)品的功能，讓用戶充滿沉浸的視覺感受。引導(dǎo)頁類型5.45.4.5動效結(jié)合文字引導(dǎo)頁設(shè)計步驟5.5>>>1234搜集現(xiàn)實具象實物圖片構(gòu)思頁面中呈現(xiàn)元素繪制草圖設(shè)計引導(dǎo)頁效果圖1搜集現(xiàn)實具象實物圖片

為了能夠讓用戶迅速接收產(chǎn)品的主題，引導(dǎo)頁中抽象的元素必須基于用戶現(xiàn)實生活的認知。因此我們第一步是要搜集與主題相關(guān)的現(xiàn)實產(chǎn)品。例如在旅游的過程中，我們需要搜集的內(nèi)容可以分為交通、旅館、人物、行李以及經(jīng)典景點等重要元素。2構(gòu)思頁面中呈現(xiàn)元素

前文中我們提到，每一個引導(dǎo)頁都必須呈現(xiàn)一個明確的主題，且多個引導(dǎo)頁應(yīng)當(dāng)具有延續(xù)性，故而我們每個頁面的元素只能具有同樣的主題，與主題無關(guān)的相關(guān)元素應(yīng)當(dāng)予以篩除。3繪制草圖

根據(jù)上一步選擇出的元素，用草圖的形式繪制版式，對元素進行抽象畫處理。4設(shè)計界面

根據(jù)線稿圖，結(jié)合產(chǎn)品的品牌特征，繪制完整的引導(dǎo)頁面詳情頁和個人頁項目實戰(zhàn)5.6項目要求：參考旅游類APP的引導(dǎo)頁，提取旅行元素，設(shè)計一款針對年輕人旅行的APP引導(dǎo)頁。要求主題鮮明，構(gòu)圖合理。5.6.1項目相關(guān)知識學(xué)生需要掌握下列幾項知識點：5.6.1.1引導(dǎo)頁的設(shè)計原則，具體請參看5.35.6.1.2引導(dǎo)頁的類別，具體請參看5.45.6.1.3設(shè)計構(gòu)思，并畫出草圖，具體請參看5.55.6.1.4設(shè)計效果圖，軟件操作技能，具體請參看5.4.45.6.1項目準備與設(shè)計APP圖標項目實戰(zhàn)3.5這個階段，先要讀懂題目要求，根據(jù)題目查找相關(guān)引導(dǎo)頁的范例作為參考，整理范例的內(nèi)容，考慮頁面中需要表達的主題與元素。根據(jù)題目，尋找范例，觀察范例

引導(dǎo)頁設(shè)計實戰(zhàn)5.6APP引導(dǎo)頁項目實戰(zhàn)5.6項目實戰(zhàn)根據(jù)項目的要求，我們梳理總結(jié)出引導(dǎo)頁中應(yīng)當(dāng)包含的元素包括：建筑物、人物、自行車以及遠山、白云等意象。根據(jù)元素，找到對應(yīng)的具象物品。APP引導(dǎo)頁項目實戰(zhàn)5.6項目實戰(zhàn)根據(jù)找到的具象元素，提取其明顯的特征，通過草圖結(jié)合AdobeIllustrator軟件，將每一個元素都獨立呈現(xiàn)。APP引導(dǎo)頁項目實戰(zhàn)5.6項目實戰(zhàn)通過之前學(xué)習(xí)的引導(dǎo)頁構(gòu)圖的原理，我們