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

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

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

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

如何一步步做到這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/14659.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 原版的uxthemedll,comctl32dll怎么還原

    原版的uxthemedll,comctl32dll怎么還原 相關圖片gdiplus.dll丟失怎么辦你見過win7系統的用戶嗎?當計算機啟動歡迎界面時,資源管理器無法啟動uxtheme.dll,該文件將丟失。單擊“確定”,計算機將顯示為黑屏!在這種情況下我該怎duili...

  • PDF轉換Excel,怎么將excel轉換為pdf

    PDF轉換Excel,怎么將excel轉換為pdf 相關圖片免費pdf轉excel轉換器超人編輯注意到,PDF轉換成excel后,經常會有小伙伴用空白文件,這主要是由于與轉換軟件的關系。如何解決PDF轉換成excel后的空白問題電腦pdf怎么轉換成excel...

  • 六邊形元素,六邊形元素構成

    六邊形元素,六邊形元素構成 相關圖片不規則六邊形基本造型運用得當,創意靈感不可或缺。此前,騰訊設計師金小燕曾用簡單的圓、正方形和三角形舉例,并借助形狀本身的特點創造性地加以運用,做出了快速有效的貢獻...

  • word格式,word文件格式

    word格式,word文件格式 相關圖片word清除格式現在我們可以把一些文件下載到手機上,這樣我們就可以隨時隨地觀看它們。在手機上查看文檔常用的格式是電子書。然后,當我們想要修改電子書的內容時,我們需要將其...

  • 京東app如何使用白條閃付,白條閃付怎么開通不了

    京東app如何使用白條閃付,白條閃付怎么開通不了 相關圖片京東白條如何微信付款為了感謝用戶的支持,促進消費,京東推出了線下支付神器京東白條閃付。據網友介紹,京東的用戶可以通過白條的flash支付進行在線或離線實時支付。目前,京東...

  • 產品設計,產品設計好嗎

    產品設計,產品設計好嗎 相關圖片產品設計流程產品設計過程有一個相對固定的周期。但是,如果你能加快整個流程的運行速度,并在更頻繁的反饋中獲得更好的結果,你還會使用當前的設計流程嗎?為了在更短的時間...

  • excel轉換word,word怎樣轉換為excel

    excel轉換word,word怎樣轉換為excel 相關圖片excel轉word去除表格Excel在制表方面比word更具說服力和方便性。因此,當我們需要制作表格時,大多數人都會選擇excel,但顯然word有更多的功能。很多時候我們需要制作exc電子表格轉換w...

  • 設計師,室內設計師的一天

    設計師,室內設計師的一天 相關圖片設計師是干什么的羅馬尼亞UI設計師Paul Flavius nechita今年6月29日開始了為期100天的UI挑戰賽。他為自己設定了一個目標,每天設計一個UI界面,每天花大約ui設計師資格證...

  • 海航通信充值,海油卡充值

    海航通信充值,海油卡充值 相關圖片海星云充值海國在線是一款財富管理應用程序,操作簡單,只需幾個簡單步驟就可以用于金融投資。那么如果你有閑置資金投資海國在線,海國在線怎么能充值呢?今天超人給你帶來海...

  • 進階之路,進階之路什么意思

    進階之路,進階之路什么意思 相關圖片強者之路進階材料今天的面試設計師@LBE小生,畢業于江南大學,是最早的移動交互設計師之一。畢業后,他從互動設計師升為百度高級設計師、愛奇藝高級設計經理,現為LBE安全大師產...

熱評文章

  • 提現,比心怎么提現

    提現,比心怎么提現 相關圖片微信提現怎么提現匯是一款非常實用的辦公金融軟件。用戶可以通過這個軟件賺取利潤。那么,我需要采取什么步驟來收取現金呢?現在,超人軟件將為您帶來一本收藏現金的教程,希...

  • 網頁設計代碼案例,網頁設計案例

    網頁設計代碼案例,網頁設計案例 相關圖片網頁設計案例下載Webgl技術可以實現一些很酷的二維/三維圖形。與flash不同,webgl可以在主流瀏覽器中運行,而無需安裝插件。因為3D效果,設計師又有了一個創作靈感。通過網頁設計哪...

  • 關閉Windows更新,怎么關閉windows更新

    關閉Windows更新,怎么關閉windows更新 相關圖片怎么關閉win7自動更新我不知道Windows 7的用戶是否注意到,如果他們將任何軟件的窗口拖動到Windows 7系統下的屏幕邊緣,那么它們將自動最大化窗口。當然,接近屏幕的邊緣是正Windows D...

  • 軟件undefined是什么意,下載undefined是什么意思

    軟件undefined是什么意,下載undefined是什么意思 相關圖片undefined吧我首先想到的是如何設計出各種新穎的圖形、紋理和界面,追求潮流和創意。但后來發現,設計中最困難的部分是平衡各方面的因素,并在制約因素中尋找解決辦法,需要規章...

  • 電腦怎么新建系統,win10系統新建用戶

    電腦怎么新建系統,win10系統新建用戶 相關圖片新建用戶win7系統中有一個很好的工具庫。起初,很多用戶并不習慣,但現在圖書館已經被用戶使用了,通過它可以很方便地搜索和匯總文件。我們能根據自己的需要建立一個新的數據庫...

  • 摩拜單車余額退還方法,摩拜單車如何退余額

    摩拜單車余額退還方法,摩拜單車如何退余額 相關圖片ofo共享單車怎么退余額現在摩比自行車已經成為這個城市的一道風景線。除押金外,安卓版摩比自行車還需支付車費。如果你不想用自行車,你可以退還定金。摩比自行車的余款可以退...

  • 人機界面是啥,人機界面

    人機界面是啥,人機界面 相關圖片人機界面由什么組成審美完整性的設計原則審美完整性并不能判斷視覺設計的應用,也不能用來描述應用的風格特征。審美完整性是指一個應用程序的視覺表達、交互行為和功能的結合...

  • win7如何關閉端口,win7關閉端口

    win7如何關閉端口,win7關閉端口 相關圖片windows關閉135端口勒索病毒2.0是最新的變種,已經在中國的許多行業引發了攻擊。勒索病毒通過入侵端口傳播,主要是445端口。用戶可以通過關閉445端口有效防止勒索病毒。下面重點介紹...

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

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

  • 如何關閉445端口詳解,如何查看電腦端口是否關閉

    如何關閉445端口詳解,如何查看電腦端口是否關閉 相關圖片怎么關閉135端口135端口主要用于遠程過程調用,普通用戶很少使用。相反,它經常被黑客用來入侵計算機。先前的沖擊波病毒使用135端口。因此,為了您自己的計算機安全,1網絡支付接...

關注微信

变脸官网查询