您現在的位置是:電腦技術吧?>? 編程技術 ??>??怎樣讓無用的信息提醒,乃懼距無用而讓有用也??>??正文詳情

怎樣讓無用的信息提醒,乃懼距無用而讓有用也

聞人秀越2019-11-14 04:41:08 人圍觀
簡介醫生讓你做無用的檢查認為指南頁面的存在只是一個簡單的新功能列表嗎?那是個大錯誤。一個優秀的導購頁面不僅可以幫助用戶識別產品,打造品牌,甚至產生情感共鳴。如何逐步實

以為引導頁的存在僅僅是簡單的新功能羅列?那就大錯特錯了,優秀的引導頁不僅能幫助用戶認知產品,打造品牌,甚至能產生情感共鳴。

如何一步步做到這3個要求?接下來騰訊的同學通過一些案例并結合來電的引導來告訴你如何煉成人見人愛的好引導。

  前言  在接觸一款新應用的時候用戶常常會看到一些引導頁,但在操作的時候直接當透明的就快速滑過或跳過了,這種時候,大家一定會有這些引導好無用啊的無力感,目前甚至有著如果一個產品需要引導,說明該產品缺乏友好的元素這樣的說法,看似有理,但我覺得這并不能一概而論,在不少的app中,除了引導用戶操作,引導還影響用戶對產品第一印象的好壞,只要這引導設計得好,人見人愛之余,還對整個app中的體驗感受能起到巨大作用!來電是一款基于語音溝通的應用,作為一款不斷探索并創新的應用,也有不少需要用到引導的地方,接下來我們通過一些案例并結合來電的引導來告訴你如何煉成人見人愛的好引導。

  好的APP引導是怎樣的?

  現在,引導的種類形式隨著硬件和系統的拓寬有了更多的表現空間,引導頁、缺省引導、視頻引導、H5引導等都能起到引導用戶認識或者使用新應用的作用。

一方面從產品的角度考慮,產品希望用戶能夠方便得理解產品的特性,減少對產品的陌生感;另一方面,從用戶角度來看,一個應用里好的引導不僅能使他們對一個應用有好感,也可能更容易得留住他們。

但不論什么形式的引導,好的引導都能夠讓用戶對產品有一定的認知并拉近用戶與產品的聯系,通過對不少做得好的引導(這里主要討論的是頁面形式的引導和H5)進行分析,我們發現大家喜歡的app引導都會有一些共性,通過歸總提煉,得出以下幾個用戶看了都喜歡的原則:  通俗易懂  一個APP的引導不論什么類型,它們的目的都是為了讓用戶更好得去使用APP,就好比一個貼心的管家或者朋友,給你介紹或者教你使用一個新事物,減低認知和摸索學習的門檻。

但如果這個朋友說得太多太雜,你可能就會記不住他說了什么;而如果這個朋友為了想更凸顯這個新事物的逼格而形容得深不可測(自嗨型引導),那么就很可能讓你因為聽不懂而失去興趣了解下去。

簡單不復雜、信息表達通俗易懂的引導可以讓用戶抓取到我們想傳達的信息并更容易理解APP的特性或操作,比如以下的案例:

  界面來自Dropbox  Dropbox的缺省引導是我比較喜歡的一組引導,在用戶一開始使用這個app的時候,通過在初始缺省頁(空白頁)上結合操作去引導用戶,大大避免了一進去空空如也的尷尬感。

而且這組引導的文案不是生硬的功能講解,而是通過一些通俗易懂的語句配合與之相對應有趣的圖示傳達相關的的信息,讓用戶在看和操作的過程中感受輕松,而且這套引導整體風格都保持一致,讓人對產品印象穩固起來,倍顯親和。

  具有一致性  好的引導在多個方面都是具有一致性的。

視覺風格的塑造、表達的產品理念和產品特點都應該和它所屬的產品、定位與品牌相符合,這樣用戶在使用產品的時候就會對產品有一個大致的基調認識和感受。

產品的定位會決定引導的方向和路線,以及最終引導的表現形式上,所以引導是最能體現產品基調和品牌性的地方。

引導的一致性除了保證了產品與使用體驗相互一致,同時也能進一步強化用戶對產品的認知以及延續品牌印象。

如下例:

  界面來自Telegram  從一致性來看,Telegram的前置引導是我覺得比較有代表性的,這組引導頁面里,每一頁元素看似簡單但是很有細節,圖示風格統一,主標題都是一個詞,表達很干脆簡練。

這組引導頁整體與Telegram的產品所透露的特性一致,高效,干凈,這種傳達出來的氣質貫通整個產品。

特別是每個圖示都做了小動畫,讓用戶更加直觀得感受到它所傳達的信息,這種細節更容易觸動到用戶,獲得用戶對產品品質的認可。

  產生共鳴  前面有提到一個應用里好的引導不僅能使他們對一個應用有好感,也可能更容易得留住他們,而這里的關鍵就是能夠讓用戶產生共鳴。

通過對產品自身的深刻了解并洞察目標用戶心理,結合產品特性與用戶的痛點,進而以視覺和文案渲染出氛圍從而傳達出相關的理念,勾起用戶情感打動用戶。

讓用戶產生共鳴,有利于用戶對產品在情感上的認同,這種認同感會增進用戶對產品的進一步使用和探索。

如下面這例子:

  界面來自【留白】  這是留白APP的引導,之前這款應用被稱為最美應用之一,作為一款極具文藝范兒的應用,它的引導也延續了它的文藝氣息。

除了好看的圖和與之搭配的字體所渲染的氛圍,這組引導里面,文案占據了很重要的比重,也正是這些文案使得這組引導上了一個檔次,文案用的字詞通俗,讓用戶覺得不疏遠,引導中不僅說明了產品特性一邊強調了格調同時也宣揚美好,十分走心,后面的文案更是帶起了情懷,讓人動容。

  根據上面所說,可以大概得出好的APP引導應該具有通俗易懂、產生共鳴、具有一致性這3個原則,這3個原則之間的關系如下圖。

有這3個原則,引導也就具備人見人愛的特性~當然,這3個原則僅僅是個大概參考,應用引導的好壞與否并不能一概而論,其中還有很多其它的影響因素,但是篇幅有限,在本文暫不作細說了。

  來電的引導是怎么樣的?

  通過上面得出的相關原則,我們回觀來電的引導是怎么做的。

作為一款依然在不斷探索的應用,來電經歷了幾輪方向的變化和調整,產品的方向變化也影響著來電的設計,由于這些原因,來電的引導設計在整體的一致性上面有所不足,但是在此之外,來電的引導遵循著另外2個原則(通俗易懂、產生共鳴),結合產品的特性,并以此形成了它自身的特點,那就是直觀和具有情感。

  這上面是來電的缺省頁引導。

第一張是無痕聊天的缺省引導,無痕聊天(也就是閱后即焚)在國內對不少用戶來說還是個比較陌生而且略為抽象的概念,為了讓用戶更易于理解這個概念,我們通過把這個概念細解,轉化發散,然后收攏成一個在大家認知中較為熟悉的具象事物-碎紙機,使得用戶可以通過它對無痕聊天有個通感式的理解,達到直觀的效果,結合文案給了用戶使用后有什么好處的理由,使得激勵用戶去點擊找朋友聊聊進行操作;第二張是來電AIO內的缺省引導,這里的主要作用是告知用戶可以調整無痕聊天內容的消失時間,這里可以說是對之前無痕聊天概念的補齊,初次使用進到AIO,這個圖會進行動畫縮小到左下角對應的鐘表位置,告知用戶操作的位置,直觀得引導用戶進行操作,讓用戶一看就明白。

  這一組是引導用戶開放權限的引導頁。

作為初始引導,因為開放權限有時候需要用戶多次反復操作,所以這是一個容易讓用戶感覺到厭煩甚至反感的地方,為此在這組引導的設計上,我們創造了一個小雪人形象,結合產品的需求以及引導的目的,塑造出一些小場景讓這組引導更具有情感,加上目的清晰的文案,營造出輕松的氛圍,讓用戶在看到頁面的時候具有共鳴感,以此感到親和,減少反復操作帶來的厭煩感。

  案例分析

  前面大概得講了好的app引導的一些原則以及來電的引導特點,接下來我們針對一個實踐案例來細說來電引導的設計過程。

這次的案例是叫班級通訊錄的h5引導,班級通訊錄是來電團隊通訊錄功能的傳播式推廣引導,通過引導來電用戶發起,分享到微信、空間、QQ等平臺,讓來電用戶可以通過鏈接引導去了解并使用這個功能,非來電用戶則引導去下載達到拉新的目的。

  定位  在之前,通過手機QQ平臺進行了一輪大范圍推廣,直到9月份之后,來電的用戶進度放緩,我們開始思考有沒有更好的推廣方式引導用戶去進行新一輪的用戶增長。

通過和產品童鞋的討論分析,我們也從大量的競品中去挖掘一些其它的推廣方式,將目標聚焦定位在熟人推廣這一塊。

關于熟人,其中也能分出好幾塊人群,由于這次的推廣需要通過熟人關系拉動用戶參與,并且最大程度得拉起新用戶,那么這就需要熟人之間的信任度高并且這個人群的人數要多。

對此我們對每個可以想到的人群進行了發散和分析:

  通過分析,我們對每個人群的信任度還有人數進行了對比(如上圖),可以看出在對比值中,同學是2者中都相對較高,落差最小的人群,加上推廣時間是在9月左右,正值開學的時間,因此我們就聚焦在同學這個人群里,延伸去拓展和設計。

  設計方向  確定定位之后,我們開始進入到設計前期。

首先確定交互流程,通過發起分享、接受者進行注冊參與形成閉環,如下(由于本文主要講訴引導部分,篇幅有限,流程部分不在此細講):

  這一套引導里面一個流程下來起到重要作用的就是發起頁和接受頁,這2個頁面一個需要引導用戶分享出去,另一個需要用戶參與并引導用戶去進行接下來的操作。

因為具有運營與功能結合的性質,因此它比起一般的引導頁需要更多的包裝,以此來吸引用戶。

  風格包裝  我們對這套引導進行主題包裝,使其富有情感特點,這是來電引導的特點之一,讓用戶具有情感的認同。

這一套引導是為了結合團隊通訊錄這個功能來進行推廣的,而且加上同學這個人群,我們得出班級通訊錄這一個概念,針對這個概念,我們需要挖掘這個相關的特點與印象元素,發散后我們收攏出一個風格主題:Party。

  班級通訊錄在我們看來就讓失去聯系或者久不聯系的同學再一次聯系回來的概念,因此我們希望營造出一種聚會的氛圍感受,擺脫一般通訊錄干巴巴的冰冷感,讓用戶在感受上是歡快愉悅的,因此在設計的風格上,我們傾向用一種歡快的party主題來表達,以此觸動用戶情緒。

  具體設計  有了方向和主題,接下來就是進行更為具體的設計。

在這之前,我們需要思考產品的目的以及這個頁面所要起到的作用,再結合上面提到的3個原則以及來電自身的特點,使得這組引導有來電的DNA并達到產品目的。

首先從交互稿分析下我們是怎么考慮這2個引導的:

  文案  首先要強調一點,在引導中,文案是特別重要的,因為它是直接獲取引導信息的關鍵。

發起頁的引導是要讓來電用戶去主動發起邀請傳播,一方面我們要清楚告知用戶要做什么,引導用戶去操作,另一方面,我們通過一些獎勵刺激用戶積極性,增加用戶參與率,所以我們把發起頁文案定為創建同學錄 領1000分鐘通話時長。

而接收頁的目的是引導用戶接受邀請進行下一步操作,那么,這需要用戶對這個頁面有足夠的信任,才會接受邀請,因此這里的引導文案需要真實信息作為支撐,而這些真實信息來源于發起人通過引導所填寫的內容,2者的結合使得這套引導完整流暢。

  畫面  這一塊是最能體現情感化特點的地方,主題風格的渲染也能帶動用戶情感共鳴,這一塊決定了頁面能否在感覺上吸引用戶。

根據party的主題,要突出的是集體感以及歡快的氛圍,在發起頁面我們做成拍班級集體照一樣排排站的效果,凸顯同學會的感覺;在接受頁,我們則是做成有種開歡迎party的感覺,歡迎同學的加入,整體營造歡快感,小人和發起頁呼應,產生聯系。

發起頁在來電應用發起,所以和顏色和來電app融合些,而接受頁則用來電自身品牌色為主體來突出品牌感。

設計過程中的草圖如下:

  操作  最后是操作,在這組引導里面,操作的作用很關鍵,特別是在發起頁。

發起頁里面的操作部分會直接影響到接收頁的被信任度,因此這里需要填寫學校班級信息的文案引導用戶填寫真實信息,這些真實信息會作為接收頁的文案顯示,關系到用戶看到這個頁面(接收頁)會不會接受邀請;而接收頁的操作則是以我要加入給予用戶代入感,刺激用戶點擊欲望,增加參與率。

  通過上面幾個層面的考慮打磨,我們不斷的比較和考慮,從顏色、字體、元素等等對每一個細節都斟酌一輪并調整優化,才有最終的輸出,如下。

這就是這個案例的流程和思考。

  感想與小結  這一段時間,我除了運營和基礎之外,引導相關的設計還是做了不少的。

雖然來電上線一段時間了,但一直在不斷得摸索前行,這其中碰撞出不少火花,也有不少新的東西出現,也因此使得來電不少的地方需要引導。

先不討論引導的實用與否,但就從設計的角度而言,每個細節都應力求做到最好,并讓用戶可以感受到。

通過這段時間的工作,在做引導相關設計的時候,有些小經驗和感觸,和大家分享一下:  1. 要清楚確定產品的要求和引導的目的  引導的類型雖然不少,但是針對不同的產品要求和引導目的,選用的引導類型也不一樣,因此一定要清楚產品的需要,是為了展示產品、讓用戶學習操作、還是為了推廣,只有清晰的方向才能選擇最合適的方式和風格去進行引導,產品方向的多變容易讓產品的引導變得不一致,不利于固化整個產品的具體印象,影響品牌化。

  2. 要多觀察生活的每個細節  能夠打動用戶的設計一定是和生活、和身邊的人事物相關的,因為相關,所以才不突兀。

好的引導是怎樣的,在前面已經細說,但起說到底,它的核心還是做到自然。

這個自然是通過它符合人對事物的常識理解、符合生活經歷、符合內心感受等共同作用的,因此,設計師需要對生活有敏感的洞察。

  3. 文案!文案!文案!  重要的事情說三次。

在不少的文章中都已經強調了文案的重要性,而在引導中,文案更是直接作用于用戶的操作和對整個產品的理解,對此,引導的文案一定要多打磨,好的文案可以省去不少事情。

  4. 能不用引導的話就不用引導  雖然我認為引導圖是有存在必要的,但是若一個app內引導太多的話,用戶會對整個產品的體驗有質疑,另一方面也打擊用戶使用產品的積極性,物極必反。

所以若非是新功能上線,大版本更改以及必要的缺省頁引導,能不做引導的話就不做。

  好的app都是能夠善用引導這一塊利器,為用戶服務之余更是把品牌和產品的氣質傳達給用戶,來電在這一塊也在不斷得思考,一方面保持自己的特點,另一方面也在學習并彌補自己的不足,更加得完善自身讓用戶有更好的體驗。

版權聲明:本文由 聞人秀越 整理編輯。

原標題:手作讓無用發光,兩頭讓人呼不中八面威風也無用

轉載注明出處:http://www.dn9ww09s.icu/program/12049.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 電腦如何安裝雙系統,電腦如何上網連接

    電腦如何安裝雙系統,電腦如何上網連接 相關圖片臺式電腦雙硬盤安裝現在配置計算機主機。在存儲方面,主流建議使用SSD硬盤。由于讀寫速度快,在SSD系統上安裝系統只需10多秒,網友不禁問如何安裝雙硬盤?win7的小編輯器會告訴你...

  • 電腦無法更改系統日期,電腦開機如何更改日期

    電腦無法更改系統日期,電腦開機如何更改日期 相關圖片電腦時間在哪里更改我們通常想在使用計算機時查看詳細的日歷信息。有時我們使用電腦的時候,電腦的日期會亂七八糟,比手機的時間晚了兩分鐘,或者日期不對。然后我們需要重新...

  • 尤克里里新手入門自學,ps入門教程我要自學

    尤克里里新手入門自學,ps入門教程我要自學 相關圖片java入門自學教程在規范中,不僅涉及到可視化規范元素規范等,還涉及到很多交互設計原則。因此,作為一個好的UI,您不僅應該理解接口級別的規范,還應該理解交互。交互是另一個...

  • 電腦無網絡什么原因,電腦沒網絡可能是啥原因

    電腦無網絡什么原因,電腦沒網絡可能是啥原因 相關圖片有網,但是打不開瀏覽器用戶詢問沒有互聯網的電腦有什么問題?試了很多方法,換了網線,換了插頭,換了路由器,換了交換機,或者挑一臺電腦連接到網絡上。小編也遇到了這種情況...

  • 說服的技巧,說服他人的七個技巧

    說服的技巧,說服他人的七個技巧 相關圖片什么是說服如果你像大多數同行一樣致力于銷售或說服性的產品設計,你會想嘗試盡可能多的工具來讓用戶做出你想要的決定。當然,你可以用不道德和黑暗的方法欺騙、勒索或誤導用...

  • 恢復電腦上刪除的文件,電腦不小心誤刪文件怎么恢復

    恢復電腦上刪除的文件,電腦不小心誤刪文件怎么恢復 相關圖片怎樣找回電腦硬盤刪除的文件有時,由于我們的疏忽或想再次使用一個文件,我們發現這些文件已經消失,去回收站,但他們已經被自己清空。我們該怎么辦?如何恢復錯誤刪除的文件...

  • swf格式,swf格式用什么軟件打開

    swf格式,swf格式用什么軟件打開 相關圖片swf 文件怎么看SWF文件是flash動畫文件,默認情況下需要flash播放器打開。其實,一般的播放器也可以打開,比如風暴音頻、快速播放、QQ音頻、雷霆播放器。那么SWF文件可手機打開swf格式...

  • 什么是臨時文件,如何找到臨時文件

    什么是臨時文件,如何找到臨時文件 相關圖片怎么恢復臨時文件Dreamweaver使用臨時文件將一些未保存的數據傳輸到其他應用程序,例如,用戶可以在其他瀏覽器中預覽Dreamweaver正在編輯的軟件許多應用程序都使用臨CAD臨時文件...

  • 重裝系統桌面文件可以恢復嗎,重裝系統如何恢復桌面文件

    重裝系統桌面文件可以恢復嗎,重裝系統如何恢復桌面文件 相關圖片win10重裝系統提示恢復win7一鍵重裝的過程是先格式化system C盤,然后寫入大量的系統數據。這個過程是一個覆蓋性質的過程,會對原C盤的數據造成一定程度的破壞。寫入了多少數據,相...

  • 內容被改變,意識改變的內容

    內容被改變,意識改變的內容 相關圖片如何改變圖片部分內容的顏色Void quick call TForm1:: sethtml (tcppwebbrowser * WebBrowser, AnsiString HTML) 三個沒有變具體內容...

熱評文章

  • win7怎么查看登錄密碼,怎么看到已登錄的電腦的密碼

    win7怎么查看登錄密碼,怎么看到已登錄的電腦的密碼 相關圖片怎樣知道電腦的密碼是多少很多用戶的電腦都設置了win7登錄密碼,但是當我們忘記密碼時,如何檢查win7登錄密碼呢?這么多重要的文件在電腦里,如果我們忘記了win7的登錄密碼,我們...

  • 講故事思維,幕思維講故事

    講故事思維,幕思維講故事 相關圖片故事化思維一個朋友經常問起橫幅的背景。所以,在這篇文章中,我提供了一些總結性的想法,希望能對大家有所啟發。最后,由于參考了場景合成,很多人會需要很多免費的圖片素材...

  • 向日葵遠程控制軟件,向日葵遠程控制軟件怎么用

    向日葵遠程控制軟件,向日葵遠程控制軟件怎么用 相關圖片向日葵遠程控制電腦怎么用沒有遠程喚醒的遠程控制軟件是個流氓。所有遠程控制的前提是被控制機器是在線的,但往往當我們有遠程控制要求時,對方就關機了,所以遠程喚醒的重要...

  • 超酷圖像,超酷背景圖像

    超酷圖像,超酷背景圖像 相關圖片霸氣超酷頭像有很多使用flash制作相冊的教程!別再啰嗦了!充分發揮你的想象力,相信自己!你可以!然后會出現旋轉相冊的超酷視覺效果讓我們簡單地告訴您制作1的步驟。首先,修...

  • 怎么連接遠程桌面,連接遠程桌面

    怎么連接遠程桌面,連接遠程桌面 相關圖片遠程桌面連接哪個好用些TeamViewer遠程控制軟件是一款專業的遠程桌面連接軟件,安裝時間短,操作方便。完善的界面設計、強大的監控功能和穩定的系統平臺滿足了客戶實現遠程桌面連...

  • 旋轉效果,pr怎么做旋轉效果

    旋轉效果,pr怎么做旋轉效果 相關圖片三維旋轉樣式閃光燈可以使任何圖片快速旋轉!您可以通過本教程掌握此方法。本教程只是一個簡單的例子。你可以自己發揮更好的效果!你也可以使用動作SCTIP控制,讓它慢到快!生產...

  • 電腦字體怎么設置,下載的字體如何添加到電腦

    電腦字體怎么設置,下載的字體如何添加到電腦 相關圖片字體怎么安裝到電腦上有時我們沒有足夠的電腦字體來做辦公室工作,也沒有足夠的字體來畫畫,特別是在一些廣告領域。由于這種工作或學習要求,我們需要使用一些字體,在計算機...

  • 電腦藍屏代碼0x0000050,怎么還原電腦bios設置

    電腦藍屏代碼0x0000050,怎么還原電腦bios設置 相關圖片開機藍屏0x0000007b在計算機的運行過程中,不可避免地會遇到藍屏的情況,也不可避免地需要為計算機建立一系列的BIOS。所以當我們有藍屏的時候該怎么辦?下面簡要介紹由于BIOS設置后...

  • 動畫卡通人物,動畫卡通人物圖片

    動畫卡通人物,動畫卡通人物圖片 相關圖片動畫卡通人物簡筆畫動畫中經常使用動畫人物眨眼。接下來,介紹了flash動畫中閃爍效果的實現方法和技巧,具體分析了如何實現這種效果的動畫分析:1。眉毛不動,只占一層;2。睜眼...

  • 怎樣用手機設置電腦定時斷網,如何讓電腦定時斷網

    怎樣用手機設置電腦定時斷網,如何讓電腦定時斷網 相關圖片電腦設置自動斷網有些家長想知道什么方法能讓電腦自動切斷網絡,讓孩子不沉迷于網絡游戲,不能讓孩子看到軟件控制在重啟電腦后無法上網。接下來,小編將與大家分享設置下班時...

關注微信

变脸官网查询