<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          如何快速成長?這5個思維助你完成職場躍遷

          博博

          口述:飛魚船長

          重述編寫: Eireen (個人公眾號:包總學習筆記)

          全文共 7037 字 15 圖,閱讀需要 16 分鐘

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          ———— / BEGIN / ————


          不少剛轉行做運營沒多久的新人,在目前的工作中,經常會遇上這樣的問題:我剛入行做運營,到底要怎么做才能快速進步?


          一、超越預期


          假設一種情況,一家公司同時來了5個能力、天賦、背景都一模一樣的實習生,經過半年的時間,他們的能力都會差不多嗎?


          不會!


          一定會拉開很大的差距。


          這些人最開始不是都差不多嗎?為什么會被拉開很大的差距?


          我們來具體看下,5個人在6個月里會怎么過:


          剛開始由于每個人的經驗尚淺,所以被分配的工作都是比較簡單、基礎的執行工作。


          一段時間后,總會有個難一點的工作,交給誰呢?


          應該是交給一個稍微更信任的一點的人來做,因為TA能做好的概率會稍微大一點。


          這個人因為接手了一個更有難度的工作,比起還在做簡單重復工作的同事相比,TA能力提升的速度也會更快些。


          那么到了下次,還有一個比較有含金量的挑戰型任務,會交給誰呢?


          肯定還是這個人嘛!


          所以最開始的一個小小的差距,就會帶來后續巨大的改變。


          那么,如何獲得最開始的一個小小差距呢?


          那就是不斷超越領導的預期。


          不斷超越領導的預期,從而獲得更多的信任。


          得到更多的信任之后就能獲得更大的權限,從而幫助自己更快的成長,達成正向循環。


          0?wx_fmt=png


          沒有達成正向循環會怎么樣?


          舉個例子,某公司的運營助理小張,他的上司每天交給他的任務就是排版、作圖、制表等簡單工作,偶爾還讓他去打印資料、寄快遞。


          由于每天做事情做的非常雜,所以小張認為自己沒什么提升,慢慢工作開始懈怠了下來;上司看到他這種樣子,也就更加不可能給予他更多的機會,在不知不覺的情況,機會大門早已經被關閉。


          我們如何才能避免出現小張這種情況呢?


          有一個簡單有效的方法:當我們接到一個任務的時候,有意識地去想這件事情如何能做的更好,提高自己的標準,而不是很隨意地完成了手中的任務。


          不要小看這件事,我們在職場中做的每一件事情都是在為我們獲得更多的信任做準備,今天做出超越預期的事情是在為明天獲得更多信任做積累。


          我們做的任何事情都指向一個目的:讓上司知道,我是值得被信任的人。


          0?wx_fmt=png


          職場中的信任跟機會有非常大的聯系,公司會把重要的事情交給信任的人去做,而像小張這種不太靠譜的人自然是繼續打雜。


          有人可能會說:哎呀,我能力不行,做不出來很完美的結果。


          慢著,這里糾正一個問題:超越預期并不是一項能力,而是一項意識。


          「能力和意識有什么區別呢?」


          區別在于能力是顯性的,而意識是隱性的。


          0?wx_fmt=png


          能力很容易通過完成各種任務體現出來,而意識是非常難以察覺的。


          這就導致很多人認為能力比意識要重要,但其實意識反而比能力更加重要,也更難培養,所以我們才需要把能力和意識區分開來。


          如何從生活中的點滴可以培養自己超越預期的意識?


          我們可以強加一些小動作,在電腦桌面上換上“超越預期”的背景,或者在小貼紙寫上“超越預期”四個字,然后貼在電腦上。


          每天提醒下自己:


          0?wx_fmt=png


          當你刻意培養了這種超越預期的意識時,潛移默化你的進步速度就會比那些沒有這種意識的人快上很多。


          為什么?


          因為把一項工作做到60分及格的水準,其實是非常簡單的;稍微好一點的能把事情做到80分,就覺得這件事已經做的很好了,然后就停在這里了。


          更高的自我標準,決定了你更快的進步速度。


          很多時候,我們做任何工作,都只喜歡把事情從0分做到80分,然后就開始做下一件0分到80分的事情。


          但其實很多人都可以把工作從0分做到80分,例如招個大學生來,說不定他也可以把工作從0分做到80分,那對比他,你的優勢其實就蕩然無存了。


          0?wx_fmt=png


          看到這里你可以停下來想一下,自己之前的工作中,是不是很多時候僅僅只是把事情從0分做到80分?


          所以,從今天起就可以開始刻意培養自己超越預期的意識,并且嘗試去做一次超越預期的事情。


          可能從短時間內看不出差距,但是把時間線拉到一年來看的話,差距就會變得非常明顯。


          0?wx_fmt=png


          我相信不管是工作中,還是生活上,你很快會收到正面的反饋。


          從而讓自己從打雜的坑跳出來,去實自己現真正的價值。


          二、差異化意識


          如果有一件事情,能做到的人有很多,那這件事情的價值幾乎為零,人們只會為這種工作付很少的錢。


          比如說洗衣服、打掃衛生、掃大街這類大部分人都能做到的事,這種工作的工資會非常低。


          如果一個工作只有少量的人能夠做到,那么這個人就會很有價值,這個社會也會為他的工作付出很多的報酬。


          比如那些頂尖的程序員、設計師、運營之所以工資這么高,就是因為他們能做到很多其他人都做不到的事情。


          讓自己成為不可替代的人,最重要的因素就是培養自己的差異化優勢。


          那么,如何培養自己的差異化呢?


          互聯網里有一個思維,叫紫牛效應。


          如果你開車到草原上,路旁龐大的牛群吸引了你的目光,一大群黑白相間的奶牛在高速公路旁綿延數十公里。你驚訝的贊嘆:“好美呀!此景只應天上有?!?/span>


          二十分鐘后,牛群已經引不起你的興趣,反正每只黑白相間的牛都一樣。剛才還覺得新鮮趣味的牛群,現在卻已索然無味。


          突然,你的視線中出現了一只紫色的奶牛,你會大吃一驚,“怎么會有紫色的牛,居然世界上會有紫色的牛,太不可思議了??!”


          0?wx_fmt=png


          你的目光會集中在這頭紫色的牛身上,從此留下深深的印象,并且一輩子不會忘記。


          這件事情帶給我們什么樣的啟發?


          與眾不同的事情總能被人們津津樂道,而與眾不同的人也會被公司深刻記住。


          在職場中,你只有作為一頭“紫?!保拍芤鹱⒁?。


          很多人沒有與眾不同的閃光點,自然就沒辦法吸引注意。就像在投簡歷的時候,所有人的簡歷都是千篇一律 ,沒有很突出的特點和優點。


          甚至你可以回想一下自己以前被拒絕過的簡歷,是不是包含了以下的這些詞:工作認真、積極向上、團結友愛。


          每個人都會這么寫,HR憑什么會把精力放在你這份簡歷上呢,要知道HR每天都很忙的。


          TA每天收到幾百份一模一樣的簡歷,TA看完肯定很快會關掉,不會有任何反應,也不會叫你過來面試。


          那什么樣的簡歷會讓TA有反應,并且停下來,去想讓這個人來面試呢?


          這也就回到了我們之前說的“紫牛效應”了。


          一定是這個簡歷有特別突出的亮點,或者有很大的差異化,有好看的背景配圖、有不同的過往經歷、有好看的頭像照片等,才會引起HR的注意,并且讓他停下來,打電話叫你過去面試。


          這句話聽起來是句廢話,但是生活中很多人都沒有養成這種意識。

          什么意識?


          0?wx_fmt=png


          假如沒有這種差異化的意識,在競爭中我們是會處于劣勢的。


          舉個例子:假設兩個能力完全一樣的人同時過來面試,其中一個人在面試前就針對公司運營現狀寫了一份長達8000字分析報告,而另外一個人只帶了一張單薄無比的簡歷過來面試。


          你覺得誰通過面試的可能性會大一些?


          當然是那個準備了分析報告的的面試者,因為他有很明顯的差異化優勢,十分強烈地吸引了面試官的注意力。


          差異化能天然產生注意力,如果大多數人做的事情和呈現的狀態都一樣的話,人們會更關注那些擁有更多閃光點的一方。


          0?wx_fmt=png


          差異化的優勢就在于:在有同等實力的情況下,你比別人多那么一點機會。


          哪怕為了這一點機會,我們都非常有必要去培養自己的差異化優勢。


          具體如何做?


          刻意培養自己的某項能力,讓自己的這項能力顯得非常突出,在這個領域你就是公司里排名第一的。這些能力可以是:


          • 文案寫得特別好

          • 活動策劃得特別有吸引力

          • PPT水平特別高

          • 數據分析能力特別強

            ……


          總找到別人不能替代的點,并加以持續刻意練習。


          三、及時反饋


          在《精益創業》一書中,有個概念叫“MVP”模型,這個概念被廣泛應用在創業的過程中。


          因為有時候創業者都不知道自己的設想不知道能不能最終達到終點,可能有時候我們做的產品不一定是用戶真正想要的。


          有些企業半年才推出一款產品,要么風口已經過了,要么競爭對手已經把市場占領完了。


          所以,有一個辦法能盡快提高創業的成功率,我們要用最有效的方法先做出一個功能不那么完善的雛形,然后把產品盡快推到市場里驗證效果。


          0?wx_fmt=png


          你永遠不知道用戶想要的結果是什么——在汽車推出之前,用戶以為自己想要的是一匹馬,要求再高點充其量是一匹更快的馬,但是但汽車被發明了之后,用戶才知道自己原來要的是一輛汽車。


          假如將精益創業這個概念應用在制造汽車上,會是個什么樣子呢?

          當我們要制造一輛汽車的時候,我們首先要找到構成汽車的最核心部件。


          • 第一步:找到2個輪子,找到桿,一輛最最最簡單的汽車框架就構成了。

          • 第二步:不夠穩,再加點輪子,變成4個輪子。

          • 第三步:加個發動機,讓他能動起來。

          • 第四步:最后加個方向盤,讓汽車能正常行駛。


          看到這里,你可能會問:你不會是在忽悠我吧,汽車制造哪可能這么簡單。


          0?wx_fmt=png


          但這才是一輛汽車,能夠在沒有技術和認知積累的情況下,被發明出來最快速的路徑。


          但現在很多人造汽車,他們在心中對汽車有無限的構想,認為汽車應該是這樣那樣的。


          在還沒開始制作就已經把細節描繪得非常細,腦補用戶一定需要這些功能,等汽車生產出來后發現用戶要的根本不是這些功能,銷量也可想而知非常慘淡了。


          所以我們要快速做最簡化的版本,然后快速獲得反饋,看用戶喜不喜歡,如果用戶說好,我們就繼續造,不好我們就改進。


          「MVP模型」不僅僅可以用于精益創業中,還可以應用在我們的工作上。


          假想這樣一種情況:領導交給你一個做PPT的的任務,你做完后交上去才發現做的方向不對,然后上司說“算了算了,還是我來吧”。


          你不僅耽誤了這件事的進度,還會讓領導對你很失望。


          然而這個過程中,其實你也是很用心和努力,只是你理解的方向和領導想的有偏差而已。


          如何避免這種情況?


          在一開始的時候,你可以做個最初的版本,快速“投放”到領導那里獲得反饋,如果領導說沒問題,那就可以繼續做下去,反之就要進行修改。


          做出一個大概的框架,以確保做出來的東西方向不會錯,或者錯的太多。


          但新人常常會有這樣的一個困惑:假如我經常去找上司核對不會被認為很煩嗎?


          不會。


          因為假如你的工作方向已經偏離了軌道,做出來的東西不是領導想要的,他會付出更多的精力去修補這個錯誤。


          及時反饋看上去是多花了領導的時間,但本質上是節約了領導的時間。


          如果沒有想明白這個問題的話,團隊和個人的效益會非常低,看起來很忙,其實只是做了無用功。


          0?wx_fmt=png


          所以我們需要在偏離不太久時及時調整方向,以縮短我們完成結果的路徑。


          通常情況下,職場新人很難直接就做出老板想要的結果,所以提前確認的好處就在于,你會縮短通往最終目的地的路徑,越早發現方向不對,所浪費的時間越少。


          當你做這件事情做到10%或者30%就可以同步下進度了,不管是口頭上,還是郵件進行溝通。


          職場新人受限于經驗和能力的不足,某些想法會比較幼稚和不成熟,及時反饋也能讓上司更好的幫助到自己。


          把自己的想法及時反饋給上司,他也許就能理清你的思路,幫助你解決目前所遇到的問題,這對助推個人成長有非常大的幫助。


          當然了,及時反饋不是讓你遇到任何問題都直接甩給領導,比如那些網上隨便一搜就能搜到答案的問題。


          而是確定要領導解答前,先給出自己的思考,即使是很淺顯的思考,然后真的不懂了再去問領導。


          而不是讓領導手把手把所有的細節都教給你,如果是這樣的話,那還不如他把所有事情都自己做了算了。


          四、結果導向


          前陣子有個面試者,他做的活動里有一個是花了200萬預算,活動的結果是活動h5獲得了1萬人訪問。


          0?wx_fmt=png


          然后問他,這個活動給公司帶來了什么轉化成果?


          他說這個數據在別的部門,他不知道,而且活動主要是在H5上。

          再問:你給這個活動打多少分?


          他說80分,說有些細節做得不夠好。


          然后船長就馬上告訴他不太合適,結束了面試。


          這個活動對公司業務沒什么正向的轉化,我給負分。有犯過錯誤不可怕,可怕的是不知道自己錯了。


          對了,這個公司不是家拼車業務的公司,而是個查公交信息的App。


          這就是一個結果導向不強烈的例子,花了200萬卻沒有什么具體的結果產出。


          所以說,缺乏結果導向思維是人在做事情的時候有多么可怕!


          你想想,如果你在一條錯誤的路上越跑越快,那會怎樣?


          ——會離目標越來越遠。


          方向正確,你離成功越近;方向錯誤,你離失敗越近。


          所以,在職場中,為了能讓自己更成功,我們做任何事情的時候需要找到正確的方向。


          你可能會問,那我怎么樣來明確自己的做事方向呢?


          先明確自己想要達到的結果。


          養成結果導向的思維,目標即是燈塔,能照亮你的前進方向,并且還讓你不會被各式各樣的因素打擾,從而更好的達成最終目標。


          假如沒有結果導向的思維,就容易把精力放在花拳繡腿的無關緊要事情上,而忽視了最終的結果,撿了芝麻丟了西瓜。


          舉個例子,有一天上司讓小明去寫一篇商品的文案,小明根本沒搞清楚這篇文案要達成什么樣的目的就直接去寫了。


          加班加點認真寫了幾天,但卻自嗨得認為把文筆文筆寫得非常優美、辭藻非常華麗,就能達成好的效果。


          結果這篇文案投放到市場上一點效果都沒有,小明的努力和認真完全白費。


          為什么?


          這是因為這篇文案的目的是其實為了讓商品賣得更好,需要的是極具銷售力的文案,而不是辭藻華麗的文案。


          所以在做一件事情的時候,先要明確做這件事情的目的和意義。


          公司最終只看結果,過程雖然也重要,但其實結果比過程重要太多了,就算我們加班加到凌晨3點,但做出來的事情并不能讓上司滿意,其實就屬于無效工作。


          職場上,不看苦勞,只看功勞。


          假如我們舉辦一場線下活動,你在匯報工作的時候說自己花了多長時間準備,消耗了多少心血。


          但其實這都是沒用的,因為公司只看最終用戶反饋怎么樣,報名人數有多少,這次活動對比上次活動效果有沒有更好,公司盈利有沒有進一步提高。


          誰會關心你花了多長時間?


          沒有任何人會關心,他們只看你做到了沒有。


          我見過結果導向很強烈的人,TA來找船長去講課,雖然我們一次次得拒絕了TA。


          但為了達成目標,TA也沒有放棄,而是堅持了一次又一次想要說服我們,想出各種解決方法、循循善誘地把利益和格局弄好。


          到最后居然也真正辦成了這件事情,而且用非常低的成本撬動了這件事情的發展,這就是TA的價值所在。


          而正常人面對拒絕的第一想法是什么,就是感覺這件事情做不下去了,然后就放棄,但其實事情還沒到完全做不下去的地步。


          但很多人在做一件事情的時候之所以會失敗,不是因為這件事本身不可能成功,而是很多人等不到成功的那一刻,就已經放棄了。


          就像銷售一樣,假如顧客說不買,如果你就停下來什么都不做,這筆訂單可以就真的不會成功了。


          你應該去問下TA為什么不買,是原因不買,是有什么顧慮,如果哪些顧慮得到保障,會不會改變自己的選擇。


          只要不是完全停下來,就還會有成功的可能性。


          所以,結果導向的意識不僅對個人、對公司的益處都是非常非常大的。


          時刻想著為結
          果負責,假如你是結果的負責人,就算老板說不行,你也要問清楚為什么,多問為什么,找到目前的困難和障礙點,掃清你達到最終目的地的所有障礙物。


          為了更好的達成目標,我們需要想盡所有方法,找到更優的解決方案。


          要善于利用外部的力量去幫助自己解決問題(包括團隊的同事),雖然是你在負責,但是可以找團隊討論,頭腦風暴一些問題,可能會比你自己寫的更好。


          做事情、創業、運營本身就是個團隊協作的事情,多一個的思考可以幫助你打開更多的思路。


          我們只要達到結果,任何方法都可以,職場不是考試,沒人會關心你是不是帶了小紙條。


          五、全局意識


          回顧前面的5個意識,之前我們有說到要超越預期,差異化意識,優化意識,其實這些都是建立在擁有全局意識的基礎上。


          什么是全局意識?


          就是在做執行工作的時候可以把層面上升至項目負責人的角度,從項目負責人角度思考項目整體的規劃、協調。


          不斷從整體出發考慮問題,看問題會更加全面,并且增強對這個項目的理解。


          0?wx_fmt=png


          如果沒有全局思維,很多事情其實你根本不知道怎么去做好,比如超越預期,如果你僅僅關注手上的事情,是很難在大的層面上超越上司的預期,也很難讓自己進步。


          只看眼前的工作,就會出現,你覺得沒有事情做,但事實很多事情都還沒有做好的情況。


          假如不僅僅從執行層面上思考問題,當項目遇到困難和阻礙的時候,你會想到很多不同的解決方法,能力的提升會比只局限于單點的人進步更快。


          當我在接到一項任務的時候,我會先把我關于這個項目的想法全部列出來:


          • 拆解工作目標,把維度拆解得足夠細致

          • 用流程圖畫出整個項目的大體流程,再繼續細化

          • 從整體流程中各個點能優化的地方提煉出來,逐個優化

          • 依次拆解各個步驟,具體落實到可執行的操作

          • 把項目所有的執行流程用excel表列出來

            …….


          0?wx_fmt=jpeg

          (我司某實習生推進一個項目時做的全局規劃導圖)


          如果無法培養出這種思維的話,這樣的話你其實就只有基本的執行能力,這種情況下,你與螺絲釘沒有任何區別。


          所以,不要只是覺得把手頭上的事情做得很好就行了,而是要提前培養自己,成為未來可能的項目負責人。


          培養的方法就是,在接到一項任務,刻意思考這幾個問題:


          • 如果我是這個大項目的負責人,我會如何思考和安排現在的項目?

          • 現有大方向所做的事情都已經優化到了嗎?

          • 現有大方向還有哪些可以做的事情,可以讓目前的結果更好?

          • 團隊內部的人力和外部的資源可以怎么去溝通和調用?

            …..


          有全局思維的人會主動推動項目的進展,他會自己去找任何有益于項目進展的事情去做。


          而沒有全局思維的人,一旦把事情做得差不多了,他就覺得沒事做了,被動等待別人給他安排任務。


          而有全局思維的人,有清晰的導向和意識,有一系列的事情可以做去提升目標,而且會清晰地知道要做事情的優先級。


          我們在接到任何一項任務的時候,都需要刻意讓自己從項目整體去思考問題,這會是讓你受益終身的習慣。


          六、結語


          上述說的很多意識,都是為了給我們持續進步做積累,這些積累到了一定程度,便會突然爆發。


          我們努力讓自己變得更好,不是為了去證明什么,而是為了看到,一個更大的世界。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          ———— / END / ————

          你真的明白用戶需求是什么嗎?

          博博

          你真的明白用戶需求是什么嗎?

          人人都是產品經理 2016-03-14 18:26:26

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          來人人都是產品經理【起點學院】,BAT實戰派產品總監手把手系統帶你學產品、學運營。

          文章中的觀點是鄙人在各大運營類網站學習總結的知識,加上本人對運營的一點看法,愚昧之見,還望批評指正。

          你真的明白用戶需求是什么嗎?

          相信很多在互聯網公司工作的朋友們都曉得用戶需求挖掘這件讓人頭疼的事情。產品之所以會被生產出來,其主要目的,就是為了滿足使用者的需求。而使用者的需求是什么?如何去挖掘這些需求?這些繁雜的需求中又有哪些是真,哪些是假等等問題,都是每一個產品/運營人員頭疼的一件事情。

          你真的明白用戶需求是什么嗎?

          產品的存在源于用戶的需求。像汽車的出現,是人們對于更高交通效率的需求,電腦的出現,源于人們對辦公的需求等等。觀察移動互聯網時代下的手機應用市場,各類產品出現的原因也正是源于人們越來越多,越復雜的需求。像滴滴打車滿足了人們方便叫車的需求,餓了么滿足了人們選擇訂餐的需求等等。上面舉的兩個例子只是眾多需求中最基本的需求。而根據馬斯洛需求分析層次理論,人類的需求有五層,在滿足生理與安全需求之后,人們還會往上追求尊重需求社會需求和個人實現需求。這些需求成為產品生產源源不斷的動力。如果把產品看作是一個孩子,那么用戶需求,就可以看作是決定這個孩子形態的DNA。用戶需求不僅對產品的誕生有著決定性的影響,而且在未來,在產品發展的過程中,還會不斷地影響產品的形態,決定產品最終的樣子。 所以產品需求對產品的重要性不言而喻。本文將從用戶需求挖掘的方法,用戶需求挖掘后的選擇,用戶需求挖掘中的誤區三個方面的問題出發進行討論。

          你真的明白用戶需求是什么嗎?

          1.用戶需求挖掘的方法

          (1)需求挖掘的渠道

          A.產品開發前

          1. 市場調研

          任何一款產品的出現都是因為這個市場有需求,需求在哪,大旗就得往哪里揮。所以市場調研,毫無疑問是需求挖掘最重要的事情。設計好調研的問卷,利用網絡渠道,像QQ群,帖吧,社區,微信群等,在線下,通過深入目標用戶的群體進行走訪調查,深入了解目標用戶的需求。線上線下,深入目標人群,獲得足夠多的調查結果,并確保獲得的需求具有一般性。

          2. 產品分析

          現在移動市場的商品已經有很多,可以說目前可以被想到的產品已經有人在做了。所以要開發的產品難免會有類似的競品。這時候就需要我們去分析這些競品,找到共同點即已經被滿足的需求,找到差異點,即未被滿足的空白區。比如如果你想要開發一款社交軟件,那么就要尋找像微信,YY語音,QQ,陌陌等一系列的社交產品作為競品進行分析,在這些競品中找到社交軟件應該有的通用的功能,找到這些社交軟件中沒有的,同時用戶又有需求的功能作為你的產品的差異點。

          3. 數據分析

          隨著大數據時代的到來,數據在決策中的作用越來越大。用戶的很多潛意識或者有意識的行為,都可以通過大數據體現出來。很多情況下,用戶很難清楚地說明他們的實際需求,很多時候他們的判斷與實際的需求是不一致的。顯性的需求沒辦法很好的表達出來,更不要說那些用戶覺察不到的隱藏的需求。所以數據,這個不會騙人的東西,可以很好地幫助我們去分析需求。通過對用戶數據的分析,需求可以較清楚地被表現出來。在產品未開發之前,數據的來源可以有很多方面,各大搜索引擎的關鍵字排行榜,微博熱搜榜,同行的數據報告,或者是一些數據網站的免費或者付費的數據報告,都可以成為我們的數據分析來源。

          你真的明白用戶需求是什么嗎?

          B.產品開發后

          1. 搜索記錄和用戶行徑

          在產品上線后,用戶的搜索行為和用戶的行徑是分析需求的一個重要來源。用戶搜索過程提及的關鍵詞,舉個簡單的例子,比如婚戀產品中,如果搜索詞中“35歲以后”“北京戶口“的搜索頻率很高,那么我們就可以知道用戶對對象篩選有需求,就可以考慮加入對象篩選這個功能。另一個是用戶行徑,哪個功能是重度使用功能,哪個功能使用率不高,哪個功能用戶的中途放棄率最高,都是需求分析中的重要數據。

          2. 用戶日志和用戶數據

          如果擁有大量的用戶日志和用戶數據,那么要好好地利用這筆難得的資源。找一個用戶IP出來,GREP一下,分分鐘就能獲得這個用戶的完整訪問和操作軌跡,分析用戶的操作行為,設身處地的理解用戶的心情,理解用戶的處境,從而理解自己產品和運營中,是不是有一些不合適,不妥當的地方,真正把自己代入到用戶的體驗中,理解用戶的不滿,理解用戶的掙扎,理解用戶在使用中的困惑和障礙。

          3. 用戶反饋

          產品在上線之后,通過各種渠道獲取盡可能多的用戶反饋或者邀請用戶面對面進行產品的評測。通過用戶反饋了解產品還沒有滿足的需求還有產品中的偽需求或者說是冗余的功能是最直接最有效的方式。因為這群用戶是你最珍貴的種子用戶。

          你真的明白用戶需求是什么嗎?

          (2)需求挖掘的思想方法

          A.頭腦風暴法

          在收集產品需求的過程中,最常使用的是頭腦風暴法。讓參與者敞開思想,集體討論,相互啟發、相互激勵、相互彌補知識缺陷,引起創造性設想的連鎖反應,產生盡可能多的創意。

          B.創意分合法

          創意分合法是創意思維訓練方法之一,主要是將原不相同亦無關聯的元素加以整合,產生新的意念、面貌。分為兩種心理運作過程:使熟悉的事物變得新奇(由合而分)、使新奇的事物變得熟悉(由分而合),主要是運用類推(analogies)和譬喻(metaphors)的技術來協助分析問題,并形成相異的觀點。

          C.屬性列舉法

          屬性列舉法即特性列舉法也稱為分布改變法,特別適用于老產品的升級換代。其特點是將一種產品的特點列舉出來,制成表格,然后再把改善這些特點的事項列成表。屬性列舉法是根據設計對象的構造及性能,按名詞、動詞、形容詞等特性提出各種改進屬性的思路,從而萌發新設想的一種方法。

          D.6W3H問題法

          面對龐雜的需求分析工作、不知從何做起時,6W3H分析法不僅有利于較系統和周密的思考問題,使思維具有條理性,也有利于較深入地發掘問題,有針對性地提出更多的可行性設想,幫助產品經理制定有效的目標。

          6W3H分別是:

          1. Who(什么人)產品的目標客戶是誰?是一類群體還是幾類群體?針對產品的用戶群進行分析,了解目前用戶群的年齡、性別、特征、區域、習慣、興趣、愛好、收入、消費等情況。
          2. When(什么時間)用戶可能會在什么時候使用到產品。產品推介的時,必須選擇合適的時機,同時還要考慮用戶的停留時間、使用高峰時間、跳出時間。
          3. Where(什么地方)用戶可能在那些條件和環境使用產品。針對什么樣的環境條件,如,針對不同的操作系統環境、不同的地理位置,要有不同的方案。
          4. Why(為什么)此法主要用于了解設計產品新功能是的目的是什么?是現有產品沒有滿足用戶需求還是為了滿足用戶的新需求、又或者僅僅是跟風湊熱鬧。
          5. What(是什么)產品功能分析。用來分析產品基本功能和輔助功能的相互關系如何,用戶到底需要什么功能?
          6. Which(哪些)除了我們的產品,市場上還有可替代產品嗎?
          7. How do(怎么做)用戶怎么使用產品,使用產品的流程是什么?怎么樣更省力?符合用戶的使用習慣嗎?體驗怎樣?
          8. How much(多少錢)用戶使用產品需要付費嗎?需要付多少?是否超出了用戶的支付能力?
          9. How many(多少次)用戶的使用頻率是怎樣的?經常使用?偶爾使用?還是不定期?

          2.用戶需求挖掘后的選擇

          A. 甄別真假需求

          用戶的需求和用戶的痛點 .需要注意的是,用戶提出的需求不一定是用戶真正的需求。

          • 第一,用戶沒有很強的產品意識,很多都是模棱兩可的感覺。
          • 第二,用戶是貪婪的,他們往往會提很多自私的需求。

          如果能夠躺在床上每天有人送錢送吃的給你洗衣服打掃房間這種需求絕對是強需求,但是可能么?

          有些需求可能是低頻率的需求甚至是違背商業規則的需求,像春聯O2O,一鍵挑選春聯送貨上門,新用戶還能免單哦~~這種需求用戶求之不得,需求可以說是大了去了。但是有企業會做嗎?明顯不可能!所以不要一味地跟著用戶的需求走,不理智的需求分析行為,無疑是一種自殺的行為。

          B.從需求中需找真正的痛點

          在需求分析中,甄別真偽需求,對需求進行抽絲剝繭的分析,剝開表面淺顯的需求,通過邏輯思維分析,代入用戶使用的場景,去尋找造成這些需求下面更深層次的痛點。

          舉個例子:360安全瀏覽器,看起來是好像用戶使用的需求是需要一個安全的瀏覽器,能夠保護他們上網的安全。但是如果給用戶一個絕對安全的,但是很卡的瀏覽器呢?如果我們給用戶一個安全系數較低,但是已經能夠保證隱私等基本信息安全,同時又能夠保證瀏覽速度和瀏覽質量的瀏覽器時,用戶會選擇哪個呢?

          瀏覽器本質還是網上沖浪的工具,核心問題還是使用過程的流暢度,瀏覽體驗。安全性問題,只是因為現在越來越多的信息泄露,用戶擔心自己信息安全而產生的一個附帶需求罷了。

          2007年微軟推出vista時,提高了安全性,但是同時也影響了使用效率。很多用戶由于沒有辦法忍受vista糟糕的操作體驗而放棄使用它而轉用XP系統,即使vista的安全性比xp的要高。所以從這兩個例子我們可以看到,很多時候,我們以為理所當然的需求,其實并不是用戶核心的需求,又或者說,存在這種需求,但是在需求平衡,他并不是占大頭的。所以尋找需求,要求我們抽絲剝繭,發掘最最本質的需求。至于怎么找,這個就要看對產品和所在領域的深挖程度了。

          3.用戶需求挖掘中的誤區

          在需求分析中,常見的錯誤有以下幾個方面:

          1. 分析對象出錯
          2. 分析方法錯誤
          3. 永遠以為自己比客戶更聰明
          4. 不尊重用戶的現實選擇
          5. 客戶和用戶沒有區別來對待對需求的一廂情愿,理解出錯

          很多產品人員對于產品的理解,很大程度上是取決于個人的感覺+身邊人的感覺。但是這種需求理解方式無疑是錯誤的,幾個人并不能代表大多數人的想法,統計學上有個著名的觀點,當數據越來越大時,趨勢將會越來越穩定,某些值將會越來越穩定在某個數值范圍區間,所以要求我們在分析需求時,不能以偏概全,一廂情愿,必須跳出自己的圈子,去目標客戶群那里,跟大量的人接觸,跟他們聊產品。讓他們來評價產品,這樣得到的產品需求,才能夠真正的反映絕大部分用戶的需求。

          你真的明白用戶需求是什么嗎?
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          這些小小的改變,能夠讓UI動效更上一層樓

          藍藍設計的小編

          UI動效現如今在 APP 和網頁中幾乎已經成為了基本的組成部分,經過仔細打磨的 UI動效對于整個界面的提升是顯著的。

          css布局——flex布局

          seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里、

          Flex 是 Flexible Box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。
          任何一個容器都可以指定為 Flex 布局。
          .box{ display: flex;}
          行內元素也可以使用 Flex 布局。
          .box{ display: inline-flex;}
          Webkit 內核的瀏覽器display: -webkit-flex;
          設為 Flex 布局以后,子元素的float、clearvertical-align屬性將失效。

          圖片


          容器屬性:

          flex-direction:(排列方向橫向還是縱向)
          row
          (默認值):主軸為水平方向,起點在左端。
          row-reverse
          :主軸為水平方向,起點在右端。
          column
          :主軸為垂直方向,起點在上沿。
          column-reverse
          :主軸為垂直方向,起點在下沿。

          圖片

          flex-wrap:(如何換行)
          nowrap
          (默認):不換行。

          wrap
          :換行,第一行在上方。

          wrap-reverse
          :換行,第一行在下方。


          flex-flow:(
          flex-directionflex-wrap簡稱,默認值為row nowrap

          justify-content:(橫向對齊方式)
          flex-start(默認值):左對齊
          flex-end
          :右對齊
          center
          : 居中
          space-between
          :兩端對齊,項目之間的間隔都相等
          space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。

          圖片

          align-items:(縱向對齊方式)
          flex-start:交叉軸的起點對齊。
          flex-end
          :交叉軸的終點對齊。
          center
          :交叉軸的中點對齊。
          baseline
          : 項目的第一行文字的基線對齊
          stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

          圖片

          align-content:(多根軸線的對齊方式)
          flex-start
          :與交叉軸的起點對齊。
          flex-end
          :與交叉軸的終點對齊。
          center
          :與交叉軸的中點對齊。
          space-between
          :與交叉軸兩端對齊,軸線之間的間隔平均分布。
          space-around
          :每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍
          stretch(默認值):軸線占滿整個交叉軸。

          圖片

           
          box屬性:


          order:(排列順序)
          數值越小,排列越靠前,默認為0。

          flex-grow:(剩余空間分配,box放大比例,默認為0,即如果存在剩余空間,也不放大)

          圖片

          flex-shrink:(box縮小比例,默認為1,即如果空間不足,該項目將縮小)

          圖片

          flex-basis:(box占據的寬度或高度)

          圖片

          align-self:(單個box的對齊方式,與其他box對齊方式)

          圖片
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          博博

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          人人都是產品經理 2016-04-19 11:20:31



          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里



          來人人都是產品經理【起點學院】,BAT實戰派產品總監手把手系統帶你學產品、學運營。

          初嘗競品分析,能力以及對行業理解有限,暫無法從大的架構上完整支撐起整篇文章。希望能通過自己的親身體驗,從產品結構,產品功能,產品核心功能使用流程等角度上對騰訊課堂和網易云課堂兩款產品加以梳理。之后根據用戶數據調查,定位用戶群,建立用戶使用場景模型。并且根據KANO模型對用戶需求進行歸納。進而站在用戶體驗的角度上給出對比分析,最后給出自己如果自己是PM的建議。期待讀者和前輩拍磚給建議~

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          腦圖太大無法完整顯示,若腦圖不清晰請移步文末網盤鏈接,文中涉及完整報告也保存在網盤中。

          1.產品初體驗

          1.1 產品簡介

          騰訊課堂:騰訊課堂是騰訊推出的依托于QQ群的專業在線教育平臺,以興趣、語言類學習內容見長,聚合了優質教育機構和教師的海量課程資源。并于2014年4月1日上線移動端APP,作為免費的開放式的平臺,騰訊課堂幫助線下教育機構入駐,不參與機構分成,還為其提供流量和功能支持。

          網易云課堂:由陳能干(杭州藍腦教育科技創始人、CEO,知米英語系列產品創始人)聯合丁磊發起,網易成立項目組開發,以偏職業化的學習內容為主。產品于2012年12月上線,以實用技能類內容為主,銜接高等教育和職業應用,打造綜合學習服務平臺。目前有近6000門課程,覆蓋近20個教學領域,百余細致分類,近5萬課程視頻,超過700萬注冊用戶。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          1.2 產品結構

          騰訊課堂產品結構:

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          網易云課堂產品結構

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          從產品結構圖對比來看,兩款產品均從推薦,搜索,分類以及已學習課程四個方面設置入口導向課程學習板塊,分別對應了不同用戶(見下文)在尋求課程途徑上的需求差異:第一類專業類用戶可能搜索比較多,第三類興趣類會關注推薦排行更多,第二類職業類用戶可能更會比較全面使用;同時與豆瓣、知乎等流行的相關產品使用戶養成的習慣一致。

          騰訊課堂醒目的位置設置了學團入口,并且為機構開設單獨的介紹界面,體現了作為免費的開放式平臺,吸引用戶互動和機構入駐的發展策略。

          網易云課堂在首頁設置消息提示,因為用戶與平臺(產品、客服、老師機構)間缺少必要通訊手段,所以將站內消息放在右上角,作為消息通知的必要方式。

          1.3 產品功能

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          1.4 使用流程

          騰訊課堂學習功能使用流程

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          網易云課堂學習功能使用流程

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          從使用流程上看,兩款產品允許在非登陸條件下進行試用,直到用戶找到目標課程,準備學習/付費或者有意使用個人設置時再提醒用戶進行登陸,降低使用門檻,提升了用戶體驗。

          在登陸方式上,騰訊課堂僅支持自家qq及微信登陸,一方面利用自身通訊平臺,方便以消息推送等方式進行推廣宣傳;另一方面保證了用戶與平臺(產品、客服、老師機構)間獲的即時通訊。而網易云課堂采除用自家郵箱外還包括騰訊系列,微博,手機等多種身份驗證方式,滿足習慣不同平臺用戶的需求。

          2.競品分析

          2.1 用戶分析

          根據企鵝智庫發布的《在線教育市場深度報告》,我們可以獲得一系列接受在線教育用戶的核心信息。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          從上圖信息中我們可以分析得出:

          1. 用戶學習學習內容主要為以英語為主的外語學習和其他留學相關學習,其次為興趣類內容學習,以及職業證書、職業技能在內的職業提升類學習。
          2. 用戶學習時間集中在晚上8:00-10:00這一絕大多數個人支配時間段,其次為晚上6:00-8:00這一通常為下班(學)通勤時間段;
          3. 用戶主要集中在北上廣江浙等一二線大城市,身份主要是學生和白領;
          1. 以外企職員和準備出國深造色學生為主進行語言方面學習的群體;
          2. 以都市白領為主的職業從事者,為了提升職業技能或者改變職業方向而學習的群體;
          3. 以都市白領為主為了充實生活進行興趣類學習的群體;

          之后建立用戶使用場景模型:

          1. 一位準備出國/語言考試的學生/外企職員,在結束一天學習/工作之后,利用晚上8:00-10:00這段個人支配時間,打開經過仔細篩選的語言課程,系統地持續學習1-2小時。在此期間認真做好筆記,提醒自己有哪些疑問點和老師布置的作業。

          該類用戶學習意愿較強,自控能力較好,有較強的付費意識。該類用戶的學習內容比較固定,因此需要有優質的學習資源,同時由于語言學習的特點,需要有充足的互動指導。

          2. 一位期望提升職業技能/改變職業方向的職場人員,查找和了解與自己期望提升職場能力相關的課程,在大致規劃好課程范圍后,開始在相關平臺尋找是否有相關配套的課程套餐。在失望的發現沒有完全契合自己規劃內容后,開始按每門課獨立學習的方式學習。

          該類用戶多是迫于找工作和升職的壓力而去學習,需要提升職業技能、明確職業發展,付費意識強,也是學習意愿和自控能力最強的。該類用戶時間有限,工作壓力較大,因此需要學習內容有相當的實用性,能夠快速學習并進行實操。

          3. 一位職場人員/學生在晚上18:00下班/放學后,乘坐地鐵/公交回家,途中打開手機/平板中的在線教育app,選擇感興趣的/正在學習的/隨機推薦的/提前下載完成的課程進行學習。學習15-30分鐘后,由于疲勞/到家結束此段學習。到家忙碌完吃飯、家務、洗澡等事情后開始學習,直到晚上22:00休息。

          興趣類學習用戶多是基于某種業余愛好,利用工作之余進行學習,學習時間短、內容廣泛、學習意愿并不強烈,付費意識弱。該類用戶并不追求學習內容的深入,但是需要多樣化,且更貼近生活和實際。

          2.2 用戶需求分析

          根據《在線教育市場深度報告》,我們從不使用在線學習產品原因、在線學習受關注問題、在線學習產品功能需求、在線產品付費意愿等方面了解用戶需求,并結合KANO法則進行分析。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          我們不妨把不使用在線學習產品原因、在線學習受關注問題所包含的因素看作會使戶滿意度降低因素;把在線學習產品功能需求看作會使使戶滿意度增加因素;把在線產品付費意愿所包含因素看作使用戶滿意度大幅增加因素。由此,根據KANO法則,我們可以列出以下類型功能需求:

          期望因素(一維因素):

          • 展示教學質量和課程內容是否優秀、價格是否合理。除了加強篩選課程質量本身外,為了讓學習者快速了解課程質量和內容,相對應功能可以為:提供課程咨詢、提供與學習該課程的學員交流機會、課程講義大綱預覽、付費課程試用、提供明確收退款流程等等。
          • 互動交流。相對應功能可以為:直播課堂隨堂提問、錄播課堂有相應交流平臺、有問答答疑平臺、與老師有明確聯系方式等等。

          必備因素

          核心學習功能是否完整,使用流程是否清晰流暢,交互界面是否明確友好。相對應功能可以為:推薦、搜索、篩選、收藏分享、學習界面等基礎功能。

          魅力因素:

          學習相關方向的內容豐富程度。相對應功能可以為:提供配套學習資料、相關內容測試題目、行業或考試動態、提供相關內容微博,知乎入口等等。

          2.3 功能對比分析

          2.3.1 期望因素(一維因素)

          2.3.1.1 了解課程:

          該功能主要促使用戶快速得到一些列自己關心的課程信息,進而判斷課程是否適合自己,決策是否值得花費時間金錢學習,打消負面判斷,最終實現課程學習。對于滿足第一類對課程內容十分在意,有較強付費意識的用戶格外重要。

          騰訊課堂:

          優點:與老師直接通過qq交談了解課程,能夠得到及時的回復,交流效率高。用戶處于主動地位,因為消息接收不及時而被冷漠的概率降低,能夠幫助用戶順利獲得必要的信息,做出行動決策。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1.課程介紹的內容過于籠統,不能滿足用戶通過查看介紹來判斷課程是否值得去學的需求,沒能實現將初步的興趣轉化為實際使用的過渡。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          2.評論區不能互動,無法通過回復評論或者私信的方式與已學過課程學員交流,新學員不能在與老學員的互動中得到期望的更適合自己的信息,這與用戶在貼吧、知乎等社區形成的使用習慣相違背,新用戶從老用戶獲得針對性信息的需求沒有被實現。

          3.在付款流程中未提供明確的退款說明,且在移動端上均沒有提供退款功能。用戶可能因為缺少對退款規則和功能的了解,認為盲目付費有一定風險性,而盡可能避免選擇付費課程。尤其對于第三類用戶,進一步減少其付費積極性。

          4.付費課程缺少體驗學習部分,用戶不確定課程質量,會認為盲目付費有一定風險性,提高了付費課程的使用門檻。

          網易云課堂:

          優點:課程簡介內容相對充實,對適合人群有一定劃分,能夠幫助用戶對自身進行定位,用戶能夠快速進行決策判斷是否應該學習該課程。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1.通過站內信與開課老師或機構咨詢,與qq等IM工具相比,溝通效率低,用戶在交流中處于被動等待的地位,容易因為回復不及時被冷漠,而喪失或者轉移付費意愿。并且僅有付費課程和少數免費課程有咨詢功能,但是付費和開始學習之后咨詢功能消失,無法持續與老師交流。

          3.在付款流程中未提供明確的退款說明,且在移動端上均沒有提供退款功能。用戶可能因為缺少對退款規則和功能的了解,認為盲目付費有一定風險性,而盡可能避免選擇付費課程。

          2.3.1.2 互動交流:

          該功能目的在于使用戶與老師及其他學院通過在線交流,實現學習過程中答疑和互動的環節,更有效地達到在線學習的效果。對于第二類用戶更期望主要通過網課取得一定學習效果的用戶會更加在意。

          騰訊課堂:

          優點:

          1.能夠與老師直接通過qq交談進行答疑,與現實學習習慣和行為相匹配,促使用戶能夠在思考和問 題得到解決的過程中獲得知識,滿足在對學習質量需要。

          2.學團功能,提供問答式UGC互動平臺,意在利用已有的老師和用戶資源滿足用戶的針問答需求。目前在一 些專業性不是很強的板塊已經取得了一定的使用量。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1.無論是學習功能還是學團功能,用戶之間無法進行直接交流。這作為現實學習中重要的一環,已成為日常的行為和習慣。用戶間交流不順暢,導致相互分享經驗、解決問題的難度增加,與學習期望不符,使在線學習的體驗和效果變差。

          2.學團功能在運營上有一定欠缺,在某些板塊中提出問題久久不能得到回應,同時缺少優質的推送內容。用戶的對于個性化問答以及相關內容的推送的期望得不到實現,久而久之用戶將會放棄對該功能的進一步使用,造成惡性循環,UGC社區將面臨崩盤。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          從圖中可以看出,作為本應較為熱門的雅思學習學團,并沒有多少參與度,僅有一些平臺推送的相關消息。多少可以反映出該板塊運營不足,缺少優質用戶和資源的問題。

          雖然提供了私信功能,但是僅能收到課程推薦和客服(咨詢)消息。不能實現與老師和學員進行互動交流。雖然網易云課堂強調課程內容,但是相互交流作為現實學習中重要的一環,用戶間交流不順暢,導致相互分享經驗、解決問題的難度增加,使在線學習的體驗和效果變差。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          2.3.2 必備因素:

          2.3.2.1 搜索:

          作為定向指向用戶需求的功能,應為用戶提供準確內容范圍,減少無關選擇量。

          1.顯示熱門搜索和歷史搜索,幫助用戶更快捷得進行搜索,尤其是第一類用戶,需要在不同時間對相同內容進行重復性搜索時,有歷史搜索功能明顯提供便利。

          2.在搜索結果界面提供排篩選序功能,用戶能進一步縮小搜索范圍,能更快捷找到自己的目標課程。

          缺點:

          在搜索結果界面提供分類功能,與搜索功能本身向矛盾,會誤導用戶使其認為能夠在搜索之后繼續進行分類篩查,但使用結果是跳轉到分類界面,徒增麻煩。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          1.搜索界面未顯示搜索歷史,對于需要在不同時間對相同內容進行重復性搜索的用戶會產生繁瑣之感。

          2.搜索結果界面沒有篩選排序功能,用戶在搜索之后需要進行大量的查看比較工作,使找到合適課程的門檻增加,體驗非常不友好。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          2.3.2.2 分類:

          使用戶在內容層面上全面了解產品提供的資源,并且根據預設步驟,引導用戶細化、明確自己目標課程的類別,最終實現目標課程與產品資源的契合。

          采用三級分類,最大化地引導用戶定位和細化目標課程,排除無關課程。起到了分類功能節省用戶時間和精力用來尋找到目標課程的作用。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          入口放在首頁,與推薦板塊結合在一起不明顯。在同一個標簽頁中內容標題上有重復,用戶不能第一時間區分掌握理解內容框架,易產生混淆之感。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          單獨作為一個界面,用戶能第一時間掌握理解完整內容和框架,不會產生混淆。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1. 僅有二級分類,沒有做到最大化地幫助用戶一步步定位和細化目標課程。

          2. 用戶在使用分類功能之后依然需要花費相當精力把無關課程排除掉,找到合適課程的門檻增加,體驗非常不友好。

          3. 篩選排序:把課程按照與用戶需求點相符程度排列呈現給用戶,為其進一步決策提供優先級。

          關鍵詞條目多,滿足了用戶對于價格,時新度,人氣等多方面的篩選需要,有綜合排序,高低排序等更加適應需求多樣化的排序方式。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          不能進行并列排序,用戶每次僅能選擇一個關心的方面進行排列,手段比較單一,與用戶使用最多的購物排序習慣不一致。

          能夠進行并列排序,可以就用戶所關心的價格、時新度等同時排列,與用戶習慣的網購篩選排序功能相似,滿足多樣的排序需求,所呈現結果讓用戶更容易做出決策。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1. 關鍵詞條目單一,價格上僅能選擇收費免費,排列所得結果仍然不夠清晰,用戶仍需要付出一定精力時間自己篩選。

          2.3.2.3 推薦:

          把自身優質內容呈現給用戶,減少決策成本,吸引用戶產生學習行動。因為三類用戶所敏感內容不同可能采取不同推送策略。

          推薦板塊為一級課程分類+二級課程分類+課程,有學習目的用戶可以輕易地理解所推薦內容大致包含信息,進而快速做出決策來判斷是否有必要進一步仔細了解關注。意在吸引第一類第二類對內容質量比較敏感的用戶。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1.此環節顯得與分類環節有重復之感,相同內容重復出現并占用過多空間,使用戶產生疲勞感。

          2.僅僅是內容的分類填充,缺少吸引用戶的點,沒有起到推薦的作用。

          采用用戶關注點作為大標題+推薦課程。相比之下,作為推薦環節網易云課堂更能吸引用戶眼球,抓住用戶需求點,符合推薦板塊應起到的創造用戶需求,吸引用戶產生學習行動的作用。更多的是吸引第二類和第三類,對職場和興趣十分關注的用戶進行使用。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          2.3.2.4 學習界面:

          觀看課程界面中的基礎功能應該扎實完整,讓用戶在整個學習流程核心部分獲得良好的體驗。

          基本功能不完整,缺少主流移動端播放器共有的手勢調節等功能;對于在線學習必備的倍速播放也不支持,比較嚴重地影響用戶的使用效果。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          而網易云課堂

          優點:

          1.有手勢調節音量亮度、清晰度,選擇線路等主流移動端播放器所具備的功能,順應用戶的使用習慣。

          2.添加調整播放速度,退出全屏,一鍵設為已學等功能,更加迎合移動用戶快節奏、使用環境多樣的在線學習需求。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          亮度調節功能,手勢僅能調節音量,不能調節亮度,與用戶習慣相違背,沒有考慮到夜間使用的情況。

          2.3.2.5 收藏:

          騰訊課堂提供添加課程到收藏的功能,可以在我的課程頁面找到已收藏課程。而網易云課堂卻缺少這一基本功能。

          優點:

          滿足用戶找到期望課程,但暫時不想報名的使用情景。比如一些有時效的付費課程,但是暫時沒有足夠的時間學習,用戶可以通過添加到收藏來避免遺忘。

          缺點:

          僅能收藏課程不能收藏機構。當比較關注某一機構的課程時,需要反復搜索或者進入已學習該機構的課程,在詳情界面查看該機構,比較繁瑣。

          2.3.3 魅力因素:

          • 在相關系列課程方面,兩款產品均沒有此功能。但是網頁版網易云課堂推出微專業板塊,提供某一領域的系列課程并頒發證書,相信之后移動端也會普及此功能。
          • 在相關資料方面,兩款產品也均未提供相關功能。在網頁版網易云課堂在計算機、四六級等四個方面提供相關試題,但是這些服務在向移動端的轉移中可能仍需時間。不過據傳騰訊課堂將在下一個版本中加入在線測試題目功能,測試版本已經發出。

          2.3 流程及界面分析:

          (1)整體界面

          騰訊課堂:

          采用上方4個Tab標簽導航,分別對應發現(首頁)、學團、學習計劃、我的四個主要功能板塊??赡芤驗檎J為用戶查看已報名課程是高頻行為,所以將收納用戶報名課程的學習計劃放到醒目的Tab標簽中。學團功能反應了騰訊課堂作為免費的開放式的平臺,建立UGC、PGC社區的發展定位。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          缺點:

          1.雖然Tab標簽放在上方起到顯而易見效果,但是與主流app使用戶養成的下Tab標簽習慣相沖突,同時因為上方藍色區域過大造成視覺上的不協調。

          2.界面顯得粗糙,配圖與課程名稱不相符,圖標大而丑,占據用戶過多視線,在一個屏面里提供給用戶信息較少,用戶需要花費更多時間和耐心去翻屏,影響用戶使用的情緒。

          3.因為要給學團和學習計劃兩個功能讓出空間,分類板塊被放在首頁(推薦)里,而且內容上與推薦的內容有重復,在使用時會對整體框架產生不清晰的感覺。

          4.推薦板塊全部采用固定格式,沒有滾動窗口,導致推送內容單一,更新頻率低(開學后將近兩個月仍然顯示開學前后推送的內容)。

          網易云課堂:

          采用底部三個Tab標簽導航,將首頁(內容)、全部課程、學習中心三個主要功能包含進來,體現了網易云課堂以內容為主,所有功能圍繞著將用戶和課程內容更好連接而建立。

          因為用戶與平臺(產品、客服、老師機構)間缺少必要通訊手段,所以將站內消息放在右上角,作為消息通知的必要方式。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          優點:

          1.底部三個Tab標簽導航與主流應用設置一致,使用起來比較順手,不需要讓用戶重新適應操作方式。

          2.相比之下網易云課堂界面簡潔美觀得多,圖標控制在合適的大小,所配圖片也與主題相符,能夠在一個頁面獲得更多信息,用戶體驗感好。

          3.分類板塊完全歸納在全部課程標簽中,推薦界面完全是推薦內容。用戶使用起來一目了然,整體框架結構十分清晰。

          (2)使用流程

          1.點擊一門課程,轉到課程介紹界面,包含目錄、詳情、評論三個界面。打開目錄后無法直接進入課程,需點擊下方查看任務后,再次得到任務界面的目錄后才能進入課程。

          沒有任何意義地多添加了一個步驟,讓使用過程變得繁瑣,與用戶的在目錄中直接進入學習的習慣相違背。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          2.在詳情界面,提供的目錄摘要和學員評論兩個模塊沒有實質內容,反而徒增用戶閱讀量;在點擊“查看全部”后,又返回目錄和評論環節。

          這種設計不僅與上方標簽欄重復,又增加用戶閱讀無意義信息的數量,掩蓋了本應出現在該環節對課程進行介紹的內容。流程設計上對必要信息和無用信息篩選不當,缺少邏輯感。

          網易云課堂:

          相比之下網易云課堂在目錄界面隨點隨學,雖然只減少一個環節,但是不會因為顯而易見的不必要的繁瑣,使用戶在使用時產生抵觸情緒。同時簡介、目錄、評價三個板塊間沒有相互摻雜,表現出來的無論是內容還是邏輯都更為清晰。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          3期望&改進

          3.1假如我是騰訊課堂PM:

          3.1.1.在期望因素方面:

          提供學生私信功能,尤其是在評論界面增加通過點擊用戶頭像查看用戶界面并可以發送私信的入口,使學習過課程學員所發揮的作用最大化。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          按照相應分類,在課程相關頁面上提供學團功能的入口,以促進用戶了解并使用學團功能。同時加強對學團的運營,首先通過獎賞機制(如根據在學團上提供優質內容情況,為相應老師或者機構增加曝光度)建立優質的知識內容(比如在魅力因素中提到的相關內容),留住一批優質用戶,進而進行推廣,成為真正的UGC答疑平臺。

          提供付費課程試用,課程大綱講義預覽,在付費課程支付界面提供退款相關規則和流程等。使用戶放心地花費時間或者金錢,避免因為信息缺失讓用戶在比較和猶豫過程中流失。

          3.1.2 在必備因素方面:

          解決首頁的推薦和分類兩個模塊的重復性,去掉相對丑陋的大圖標,將分類放在下拉菜單中,點擊相應內容會進行跳轉,在“騰訊課堂”logo處用小三角箭頭作為標識。相比之前在最上面放一堆圖標,然后需要不斷下拉才能看完整推薦,用戶的使用邏輯會更加清楚:點擊騰訊課堂,用戶將快速得到并掌握該產品所包含內容,點擊感興趣的內容跳轉到相應推薦,之后可以繼續進一步查看所有下一級分類進行了解。

          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          完善觀看課程界面的基礎功能,添加手勢調控,倍速播放等一系列視頻必備功能。

          解決課程詳情界面混亂,觀看課程步驟繁瑣的問題:在目錄中提供進入學習界面的入口,去掉”查看任務“改為“立即學習”;在任務詳情界面去掉”目錄摘要“和”學員評論“兩個模塊。

          3.1.3 在魅力因素方面:

          充分利用學團平臺,改變推送內容。對如配套學習資料、相關內容測試題目、行業或考試動態、提供相關內容微博,知乎精華內容入口等等進行整理,作為優質內容進行推送。使用戶除了學習課程內容,愿意花更多時間瀏覽學團提供的相關領域內容,更大化增加用戶粘性。

          3.2 假如我是網易云課堂PM

          3.2.1 在期望因素方面:

          • 強化學員與授課老師的聯系,尤其是長期、付費的課程。在詳情頁面老師頭像出建立聯系老師的入口,采用站內信或者最好能與即時通訊工具以及郵箱賬號相關聯。避免付費/報名后就無法聯系老師的情況。
          • 提供用戶間站內信聯系功能,尤其是在評論界面增加通過點擊用戶頭像查看用戶界面并可以發送私信的入口,使學習過課程學員所發揮的作用最大化。
          • 可以允許通過開課老師或者機構申請,為課程提供專屬網易云協作群,在課程介紹界面提供加入入口,并且在學習中心界面中設立群列表。

          3.2.2 在必備因素方面:

          • 不得不說網易云課堂界面的整體視覺效果基本沒有什么可以挑剔的,只是在基礎功能上還有一些值得優化的地方:首先在搜索結果界面應當加上篩選功能,其次篩選功能應當增加篩選的項目和順序(如價格高低排序) ,同時分類功能需要增加分類層級(如編程語言需要細分成C,PHP等等),最后在課程列表界面去除無意義并且占據大量空間的分類板塊,或者收納入下拉菜單。
          騰訊課堂和網易云課堂產品體驗,從用戶體驗角度進行競品分析

          3.2.3 在魅力因素方面:

          將微專業功能向移動端轉移,利用中國大學mooc網的優勢資源,根據用戶的搜索報名情況,給用戶提供更多優質并且滿足其需求的教育資源,迎合用戶對更多相關信息,更多專業知識的需要。比如在首頁推薦中,增加推薦mooc課程板塊,并且優先推薦用戶關注方向相關課程。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          談談BFC

          周周

          一、什么是BFC
                 BFC(block formatting context)簡單來說,BFC 就是一種屬性,這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。
              中文常譯為塊級格式化上下文。是 W3C CSS 2.1 規范中的一個概念, 從樣式上看,具有 BFC 的元素與普通的容器沒有什么區別,但是從功能上,具有 BFC 的元素可以看作是隔離了的獨立容器,容器里面的元素不會在布局上影響到外面的元素,并且 BFC 具有普通容器沒有的一些特性,它決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。

          、如何觸發 BFC

                上面介紹了 BFC 的定義,那么如何觸發 BFC 呢?
              滿足下面任一條件的元素,會觸發為 BFC :
              1、浮動元素,float 除 none 以外的值
              2、絕對定位元素,position(absolute,fixed)
              3、display 為以下其中之一的值 inline-blocks,table-cells,table-captions
              4、overflow 除了 visible 以外的值(hidden,auto,scroll)

          、BFC布局與普通文檔流布局區別      
              普通文檔流布局規則
              1.浮動的元素是不會被父級計算高度
              2.非浮動元素會覆蓋浮動元素的位置
              3.margin會傳遞給父級
              4.兩個相鄰元素上下margin會重疊

              BFC布局規則
              1.浮動的元素會被父級計算高度(父級觸發了BFC)
              2.非浮動元素不會覆蓋浮動元素位置(非浮動元素觸發了BFC)
              3.margin不會傳遞給父級(父級觸發了BFC)

              4.兩個相鄰元素上下margin會重疊(給其中一個元素增加一個父級,然后讓他的父級觸發BFC)

             下面來說一下BFC的實際使用場景
             場景1:解決子盒子都浮動時 父盒子高度不參與計算問題
              <style>
                .far {
                   border: 10px solid pink;
                   width: 300px;
               }
                .child {
                   border: 10px solid yellowgreen;
                   width:100px;
                   height: 100px;
                   float: left;
              }
               .far{
                   overflow: hidden;
              }
              </style>
              <body>
                  <div class="far">
                       <div class="child"></div>
                       <div class="child"></div>
                  </div>
              </body>

              根據overflow 除了 visible 以外的值(hidden,auto,scroll)就會觸發BFC的原則 計算BFC高度時 ,floatbox也參與其中。


              場景2:box垂直方向的距離 會由margin來決定 相鄰兩個盒子之間margin會重疊 ,這就是margin上下間值合并的原因

              <style>
              p {
                  color: pink;
                  background: #fcc;
                  width: 200px;
                  height:100px;
                  text-align:center;
                  margin: 100px;
              }
              </style>
              <body>
                 <p></p>
                 <p></p>
              </body>

              要解決這個問題我們可以在p外面包裹一層容器,并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC,就不會發生margin重疊了,解決代碼如下。
              <style>
                 .box {
                    overflow: hidden;
                 }
                 p {
                    background: green;
                    width: 200px;
                    height: 200px;
                    margin: 100px;
                }
              </style>
              <body>
                 <p></p>
                 <div class="box">
                     <p></p>
                 </div>

              </body>

              場景3:實現左側固定右側自適應等類似布局
              <style>
                  .out{
                      border: 1px solid red;
                      height: 200px;
                  }
                  .left{
                      width: 200px;
                      height: 150px;
                      background-color: green;
                      float: left;
                  }
                  .right{
                      background-color: pink;
                      height: 250px;
                      overflow: hidden;
                  }
                </style>
                <body>
               <div class="out">
                  <div class="left"></div>
                  <div class="right"></div>
                </div>

          Google設計語言:如何將品牌DNA融入產品

          藍藍設計的小編

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          本文轉自,頭條號的人人都是產品經理,的一個大神。

          Google設計語言:如何將品牌DNA融入產品

          2018年5月9日凌晨1點,Google開發者大會上對 Material Design做了更新的講解,其中令我印象深刻的是Google對圖形語言單獨拿出來做一個模塊來解釋,如下圖我標紅的地方。

          Google設計語言:如何將品牌DNA融入產品

          OLD NEW

          對!就是這個SHAPE的單詞,為什么我會如此看重,大家應該知道構成設計語言的四大基礎原子是:字體/顏色/網格系統/圖形。

          這里的圖形包括圖標和一些輔助圖形,它有什么不同呢?

          大家看之前以往的版本,材質設計語言里面沒有單獨去說形狀這一元素,當然也有做的比較好的產品,比如:韓國的 29cm 和 11街,國內天貓/網易蝸牛讀書等等。

          圖形語言對我們產品影響極其大,之前網上也有這樣的文章,比如:提取logo上面視覺基因,然后運用到圖標里面。對,這個沒錯,但是我覺得不夠好,不全。

          今天和大家一起來分析下Google是如何做的。

          我對圖形的理解

          圖形無處不在,人眼對圖形的識別能力遠遠高于字體,圖形便于記憶、傳播,這就是為何每次做LOGO時候都需要去考慮圖形延展呢?

          目的為了傳播品牌,在用戶心中打造產品形象,比如:可口可樂弧線、阿迪達斯、蘋果logo這些國際性大牌子的logo都是易于記憶與傳播的。

          那么在產品設計中如何體現呢?

          我們常用在圖標里面去展現一些品牌元素,比如:天貓貓頭直接和圖標融合,這是一個很成功的例子。還有韓國的Genie音樂產品,也是直接logo和圖標集合。

          那么僅僅只是這些嗎?

          當然不夠,如果我們想傳達我們產品的品牌理念,深入到用戶心中,只在圖標里運用是不夠的。

          比如:可口可樂每年做產品運營推廣,不斷大量的重復它logo弧線元素,這樣能長期在用戶心中形成記憶點。

          Google是如何做的?

          Google這次讓我們打開眼界,下面Google的原話:

          形狀可以引導注意力,讓用戶易于識別組件,溝通狀態和品牌語言傳達。

          對次有了一些更深刻的認識,形狀其實運用不止我們平常所理解的。我之前寫過一篇文章,就是形狀對布局的影響,里面就是講了形狀的一些基礎作用。

          下圖是來自材質語言的截圖:

          Google設計語言:如何將品牌DNA融入產品

          圖片來自google

          Google的想法非常大膽:一個方形的變化,延伸出不同的形狀,當然并不是單獨一個產品設計里面放這么多形狀,而是運用到不同產品,運用不同的圖形,傳達其特殊品牌調性、大統一,局部戰略調整。

          Google設計語言:如何將品牌DNA融入產品

          比如:上圖凹槽圖形用在主TAB上,形成視覺焦點,容易吸引用戶區關注它,一般核心功能會如此設計。

          Google設計語言:如何將品牌DNA融入產品

          Google已提到了可以用于區分不同組件,這觀點我很贊同,之前我對愛奇藝做了視覺分析,發現它們一級導航和二級導航樣式一樣,那么這樣用戶如何區分呢?

          Google設計語言:如何將品牌DNA融入產品

          圖形可以用于表達某一正在交互的狀態,比如:選中狀態,當然并不是單獨去使用。Google特定強調了:需要和其他視覺元素集合起來使用,比如:顏色。

          其實這一觀點以前就有啦!比如:咱們的check box控件,選中前后狀態不一樣。

          不過Google這個是否略顯夸張些?

          Google設計語言:如何將品牌DNA融入產品

          最后重點來啦!比如:可以用于表達品牌語言,那么圖形來自哪里?用在哪里?

          如:上圖是一個Crane的應用,他們logo是中間一個圖形加外帶橢圓底,這里Google提取了橢圓作為視覺DNA,并沿用到產品的每一個控件。

          Google設計語言:如何將品牌DNA融入產品

          同一產品多終端統一符號語言。

          Google設計語言:如何將品牌DNA融入產品

          如下圖提取LOGO關鍵特殊符號:

          Google設計語言:如何將品牌DNA融入產品Google設計語言:如何將品牌DNA融入產品

          下圖Shrine提取菱形棱角圖形運用到產品設計細節里面。

          Google設計語言:如何將品牌DNA融入產品Google設計語言:如何將品牌DNA融入產品Google設計語言:如何將品牌DNA融入產品Google設計語言:如何將品牌DNA融入產品

          看完你想說什么?我只想冷靜三分鐘?。?!

          其實說實話,對于品牌DNA的延續早在年初的時候就思考過,如何去把品牌語言在產品設計里面體現?

          我當時理解是:首先要了解我們的品牌核心是什么?

          我們的品牌理念是啥?品牌solgan,我們要給用戶傳達一種什么樣的情懷?然后如何去巧妙提取產品logo里面的視覺基因,比如:某一圖形元素;比如:線條/點/某一特殊圖形符號,這圖形一定是易于延展,拓展性強的。

          然后運用到產品的每一個細節里面,比如:圖標、按鈕、異常狀態、啟動頁、運營banner、情感化設計等等,如今大佬Google 已經去這樣做了,而且做得很系統,包括動效都有引子。

          當時也有一些產品已經這樣做了,比如:韓國29cm,設計細節非常好,圖形運用非常到位。國內天貓貓頭運用也是滲透到產品里面去了。

          Google這次又給我我們一些大膽的思考,能運用這么廣的范圍?

          Google設計語言:如何將品牌DNA融入產品

          需要注意點

          Google舉了幾個反面例子,我們在提取圖形或者使用時需要注意的幾點,如下:

          Google設計語言:如何將品牌DNA融入產品

          注意圖形的指向性和觸摸大小,千萬別影響用戶正常使用。

          Google設計語言:如何將品牌DNA融入產品

          同一含義的組建樣式必須一致。

          Google設計語言:如何將品牌DNA融入產品

          別使用形狀來暗示其他含義, 這個對話框的形狀表明它與它背后的卡片相關。

          Google設計語言:如何將品牌DNA融入產品

          總結思考

          Google的本次材質設計語言的更新,我相信后續會有一些產品為了打造一些品牌調性,也會慢慢去融入更多的品牌符號語言進去。

          當然我們一定要克制與統一,這是最難做的一部分,Google雖然此次系統性的解釋圖形的意義及延伸使用,但是某些地方稍微有些過了,所以我們在設計提取DNA時候需要克制與統一。

          那么我們可以從中取學習了解如何才能讓我們產品更加差異化?在同質化的今天,你是如何打造個性化與具有調性的產品呢?

          如今AI已來臨,機器人對設計影響極其大,從Google本次更新迭代中就大量提到了AI對產品的影響,以及如何去學習用戶的習慣,然后預測用戶的下一步需求。

          我們以后產品會越來越智能,越來越了解人性,除了硬件的升級,研發能力加強,我們也要多去思考下:如何打造獨具匠心的產品?如何打造一個無縫體驗、多平臺、跨語言產品視覺統一體驗?

          這方面跨平臺多終端體驗,蘋果已經做得很不錯了,當然還有spotify 音樂產品無縫跨平臺,聽歌/切歌/選歌體驗。相信這只是一個開始,后續會有更多精彩

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          案例講解 | 移動端的長表單應該如何設計?

          博博

          案例講解 | 移動端的長表單應該如何設計? 

          原創 UEDC  2017-10-24

          作者 Echo

          基于業務需求(常見于B端產品),有時候用戶在操作過程中,不可避免的需要填寫很多表單。針對于移動端長表單,我們應該如何去正確的設計呢?

          本文大綱:

          1.三種主方案

          2.主方案1的設計討論

          3.主方案2的設計討論

          4.主方案3的設計討論

          5.總結

          1.三種主方案

          針對長表單的設計,按照設計思路的不同,可以分為三種主方案,如下所示:

          PS:圖中的舉例的關鍵字段僅僅為舉例需要。

          主方案1:我們常見的設計形式,一個界面將所有表單信息展示出來。

          主方案2:將不同的分組表單放在不同的下一級界面,用戶填寫之后返回。

          主方案3:分步操作,一個界面完成一組表單內容,點擊下一步進入下一組表單。

          2.主方案1的設計討論

          主方案1的設計優缺點

          優點:一個界面將所有表單信息展示出來,如果想查找某些填寫的信息也變得更容易,相對于主方案2和3,減少了頁面跳轉操作和查看。

          缺點:基于移動端界面承載能力較弱,一個界面將表單所有展示出來,用戶一次性瀏覽和操作起來壓力較大,容易使操作流程失敗,導致成功率大大降低。

          針對于主方案1,用戶完成表單完成后,提交按鈕有三種主要的設計方法,一種是提交按鈕放在表單最后,一種是提交按鈕放在導航欄上。另一種是,提交按鈕底部懸浮。如下圖所示:

          方案1.0,如果提交按鈕放在表單之后,那么用戶的視覺流和操作感覺是一致的,流暢而自然。但是會出現一個問題,用戶在輸入信息時,鍵盤調用會遮擋到提交按鈕。Android手機上的輸入法都可以點擊輸入法上的按鈕將鍵盤推下去。而iOS 原生輸入法在輸入法中沒辦法推下去,只能點擊其他非編輯區域才能推下鍵盤。這樣就顯得很麻煩,用戶可能會忽略掉提交按鈕。

          方案1.1解決了提交按鈕會被鍵盤擋住的缺陷,但是視覺流和操作行為錯亂,用戶在屏幕底部輸入完成之后,視覺和手指要返回到頂部操作。

          方案1.2提交按鈕底部懸浮,解決了方案1.1的視覺流和操作紊亂的問題,解決了方案1.0提交按鈕被隱藏的問題,但是當輸入文本,調出鍵盤時,依舊會被擋住。

          使用底部懸浮按鈕的場景是操作按鈕非常重要,例如手機淘寶的立即購買和加入購物車。

          同時底部懸浮按鈕不適用于文本操作類。例如文章說的長表單文本輸入。當輸入文本,調出鍵盤時,依舊會被擋住。

          底部懸浮按鈕適用于非文本輸入的使用場景。從手機淘寶、新浪微博可以看出,適用于在界面中非文本輸入、提供一個功能入口或者是界面非文本輸入的選擇信息的確認。

          3.主方案2的設計討論

          主方案2的設計優缺點

          優點:與主方案3相比不同分組表單之前切換查看信息方便快捷。申請流程的首頁簡潔,填寫信息全部隱藏到下一級界面。

          缺點:來回跳轉,操作負荷較大,會把用戶繞暈。

          在方案2.0中用戶填寫完成的分組和未分組填寫分組區分不開,將方案2.0進行優化,例如填寫完成后,會出現已完成的標簽,提示用戶已完成和未完成不同的狀態(如方案2.1)

          4.主方案3的設計討論

          Facebook曾針對分步注冊與非分步注冊做過A/B Test,其結論指出分步注冊的轉化率遠高于非分步注冊。由此可見,非分步注冊強行減少注冊頁面,不如適當拉長戰線,給用戶輕負荷的操作,讓用戶在不知不覺中完成注冊流程。

          主方案3的設計優缺點

          優點:流程分步操作,相對于主方案1,用戶操作成功率大幅度提高。

          缺點:如果用戶操作到了第三步,需要返回第一步確認填寫信息的準確性,那么用戶需要兩次返回。

          用戶填寫的信息做保存(緩存),用戶返回上一步,填寫的數據做保留。H5依舊適用,用戶填寫的數據保存在數據庫,用戶返回上一步時,同時刷新載入數據庫記錄的數據。

          對于方案3.0和3.1 。下一步按鈕不同。究竟采取哪種?方案3.0視覺流和操作流是正常情況,且不存在按鈕被鍵盤擋住,所以方案3.0最佳。

          移動端長表單設計總結

          主方案1、2和3,都有各自不同的優缺點。

          一個交互流程的好壞,一個最重要的標準之一是讓用戶順利完成操作流程,保證操作流程的成功率,才能完成用戶的目標。以此標準來看,主方案3是最好的。

          接下來探討一個細節問題,就是提交按鈕是放在頂部導航欄、信息內容區內還是底部懸浮?

          這里分為4種情況:

          情況1:內容區加上操作按鈕不被鍵盤覆蓋,建議按鈕放在內容區內。

          情況2:必填的內容未被鍵盤覆蓋,非必填被覆蓋,建議操作按鈕放在導航欄上,例如朋友圈、QQ空間和新浪微博。

          情況3:必填的表單超過一屏,建議按鈕放在內容區。不建議放在導航欄上的原因有兩個:

          a.視覺流錯誤,從上往下,信息量很大,用戶滑動瀏覽時,會忽略且很難聯想點擊導航欄上的操作,行業常見放在導航欄上是因為必填的不超過一屏。

          b.當必填項過多時,要滑動屏幕才能填完。 把按鈕放在右上角的導航欄,當用戶還沒填寫完成,那么在按鈕放在導航欄上很容易去點擊,容易引導用戶犯錯。

          情況4:必填超過一屏,且無非文本輸入,建議可使用底部懸浮。


          設計師的知識管理體系怎么建立?只需4個步驟,實現能力價值提升

          博博

          設計師的知識管理體系怎么建立?只需4個步驟,實現能力價值提升 

          設計夾  2018-05-10

          作者 NEPO


          想要知道設計師如何根據行業變化建立知識管理體系,首先要了解行業整體的變化趨勢。

           

          /一/

          行業的發展變化


          國內UI 行業2007年萌芽,至今經歷以下幾個階段:

           

          隨著2007年第一代 iPhone面世,國內進入界面設計時代。iPhone等智能手機的興起,令各個行業迎來移動界面設計的業務和挑戰,不同類型的設計公司承接了相關零散業務。后因為業務量不斷增加,出現了專注于界面設計的工作室,就正式進入了界面設計時代,這一時期持續到2012年左右。

           

          到了2012、2013年,移動互聯網的普及加速了界面設計行業的升溫。業務形態多元化,業務內容不斷增多,UI 設計師崗位供不應求。市場上涌現大量的相關培訓,UI 設計師一度成為掘金崗位。短短兩年內,快餐式培訓培養出大批量UI設計師。


           

          同時,2012到2013年也被稱為交互設計時代的開端。需求方開始從注重界面美觀度轉向更注重產品使用的流暢度,這一時期萌生了交互設計師這一崗位。但由于市場需求大,準入門檻低,行業內怪象叢生。大小設計公司/工作室之間價格戰嚴重,各種壓價,甚至聘請資歷尚淺的實習生負責項目,出品質量參差不齊。

           

          直到2016年,移動互聯網創業熱潮冷卻,行業歸于平靜,進入理性探索期。建立規范,沉淀、收獲,行業發生裂變。加之外部大環境,例如移動互聯網、國家政策、整體經濟形勢等多方面的變化,使得行業走勢不明朗。

           

          在這個時候,對于設計師而言,唯有不斷提升自身能力,找準行業內定位,才能去追趕甚至走在行業變化的前列。


           

          /二/

          設計師價值的演變


          設計師在企業內的角色一直在變化。從以往純粹的業務協同,到今天逐漸能夠通過設計來提升產品和品牌的價值。未來設計師將更加深入業務體系,以設計驅動商業創新,實現業務價值放大。

          在這個過程中,設計師的職能、視野會不斷往上下游延伸,設計師自身要參與到更多的業務體系,對產品和品牌的商業模式有更清晰的認知,與業務部門的同事一起發現問題,將問題轉化為設計問題,進而提出設計策略。


           

          /三/

          設計師的自我成長


          行業趨勢不斷變化,對設計師綜合能力的要求不斷提高。據此,我們梳理出各階段設計師能力價值的模型,將設計師按初級、中級、高級、專家級等四個層級劃分,展現不同的能力需求。

          設計師個人的知識體系建立,則需要圍繞著這個過程進行。


          1、什么是個人知識管理


          設計師構建個人知識管理體系的第一步,是有意識培養收集、整理、思考的習慣。

           

          • 在項目早期有意識地收集各類頭腦風暴的資料,包括照片、資料等;

          • 在項目完成后,對各個時期迭代的設計素材、稿件進行歸納整理,總結;

          • 每隔一個季度,調閱以前的項目進行研究和重新設計。

           

          通過這些習慣的訓練和不斷重復,培養自己的思維,以期在未來的某個時間點量變達到質變。

           

          個人知識管理是一套解決問題的技巧,本身不創造價值。它的意義在于融入你關注的業務領域當中,幫助你獲得分析和解決問題的能力。它是催化劑,必須依附于行業。

           

          2、如何根據設計師價值模型建立個人知識管理體系


          知識的進階應與個人價值模型相匹配。


          初級設計師的定位是協助執行。初級者主要配合切圖、延展類的工作,專注于輸出,依賴于各類資料和參考素材,創新成分10%-30%。而對于很多初級設計師來講,建設素材庫可能是一個無序的過程,需要有意識地通過一些方法、借助一些工具使這個過程有序起來。

           

          中級設計師要能快速進行設計延展,他們專注于推動設計任務,創新成分30%-40%。中級者需要更注重設計規范的建立和應用,使之成為潛意思里的常識。

           

          高級設計師的定位是擁有自己的設計風格,能夠獨立完成提案,創新的成分50%以上。他們能夠將此前所累積的經驗,內化為自己的方法理論,并重復利用這套方法理論,完成高質量的設計作品,除此之外還能夠善于總結和分享。階段的重點在于設計創新和反復打磨方法論。


          專家級設計師的定位在于具有獨創性的設計趨勢和概念,能夠引領行業發展,創新成分80%以上。他們已經完成底層思維的構建,多數是研究者的角色,專注于探索某個行業的未來走向,找出設計能參與并發揮最大價值的節點。他們的研究成果、設計觀點和理念將會對行業產生積極影響并發揮推動作用,甚至引領一個時代。

           

          3、不斷刻意練習

           

          知識的進階需要和設計師價值模型相匹配,同樣需要找到對應的個人知識管理步驟。資源對應“瀏覽、儲存”,“常識”對應“整理、分類”,“方法”對應“課題、分享”,“思維”對應“利用、探索”,一共4個步驟。

          但這不意味我們提倡在對應階段只做對應的事。正相反,即使是一名初級設計師,我們也會建議他盡可能多加練習,爭取能夠完整地完成這4個步驟并不斷重復。只有不斷刻意練習,你才能實現向上一層的躍遷。差別只在于,不同階段不同步驟所花費的時間精力占比不同。

           

          對于設計師相對熟悉的前兩個步驟(瀏覽、儲存),這里就不一一說明。重點講解后面的步驟。

           

          關于整理和分類,我們提倡嘗試多維度分類。這樣能夠快速調用資源,應對不同的設計需求及問題。

          分享前的梳理和復習是鞏固已有知識的大好機會。分享時則是深層次思考的過程,能夠開闊思路,發現問題。當然,分享之后獲得的成就感也是不言而喻的,這種尊重感一方面會驅動自我不斷幫助他人,另一方面激勵自己不斷學習,形成良性循環.

           

          從利己角度來講,分享可以把你的【隱性知識】變為【顯性知識】,從而實現【讓別人知道你知道】的目的,創建個人品牌,提升核心競爭力。

           

          個人知識管理是一個從【海綿式】到【淘金式】的過程。無序瀏覽、收集、分類整理是海綿期,需要如海綿吸水般發散式學習;分享、實踐運用、獨立探索屬于淘金期,需要總結和找到適合自己的方法、理論,而不是一味地吸收。

          中間是轉化期也是轉折點。這個時候選擇比努力更重要。只有找到合適的環境,才能去獨立探索、實踐應用。



          九品也盡力為全員創造更加開放的探索環境。幾周前我們舉辦了關于“如何快速了解一個新領域,并找到設計策略”的研討會,討論了設計師在接觸全新領域及客戶時,該如何快速學習,從哪些維度、用哪些方法和資源去學習;以及,如何找到與客戶的共鳴、發現潛在問題、找到設計策略……

          研討會的熱烈程度超乎每一個人的想象。會議中大家紛紛分享自己的相關經歷和看法,會后也將討論成果帶入到項目中進行實踐和修正。


          未來我們會持續探索新經濟時代下設計師在各個領域的角色定位和價值范圍,優化、深化客戶服務體系,專精、專進地提供服務。

           

          -end-

          使用three.js的著色器通道渲染地球模型

          seo達人

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          我們都知道,three.js庫里面內置了很多著色器通道對象供我們渲染場景,本文將對EffectComposer、RenderPass、FilmPass這三個通道進行學習和實現:

          1.RenderPass這個通道會在當前場景(scene)和攝像機(camera)的基礎上渲染出一個新場景,新建:

          [javascript] view plain copy
          1. let renderPass = new THREE.RenderPass(scene, camera);  

          2.FilmPass這個通道通過掃描線和失真模擬電視屏幕效果,實現的效果超有時代感,新建:

          [javascript] view plain copy
          1. /*四個參數分別為粗糙程度,掃描線強度,掃描線數量,是否轉換為灰度圖*/  
          2. let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
          3. //將渲染結果輸出到屏幕  
          4. effectFilm.renderToScreen = true;  

          3.EffectComposer可以理解為著色器通道容器,著色器通道按照先后順序添加進來并執行,新建:

          [javascript] view plain copy
          1. /*渲染效果組合器,每個通道都按照傳入的順序執行*/  
          2. let composer = new THREE.EffectComposer(renderer);  
          3. composer.addPass(renderPass);  
          4. composer.addPass(effectFilm);  

          本文實現的demo基于three.js_r86(請自行下載),代碼所用js文件和圖片都在下載的那個包里面,請讀者自行引用。

          實現效果:



          代碼:

          [html] view plain copy
          1. <!DOCTYPE html>  
          2. <html lang="en">  
          3. <head>  
          4.     <meta charset="UTF-8">  
          5.     <title>shader_2_earth</title>  
          6.     <style>  
          7.         body{  
          8.             margin: 0;  
          9.             overflow: hidden;  
          10.         }  
          11.     </style>  
          12. </head>  
          13. <body>  
          14. <script src="build/three.js"></script>  
          15. <script src="js/libs/stats.min.js"></script>  
          16. <script src="js/libs/dat.gui.min.js"></script>  
          17. <script src="js/controls/OrbitControls.js"></script>  
          18. <script src="js/Detector.js"></script>  
          19.   
          20. <script src="js/postprocessing/EffectComposer.js"></script>  
          21. <script src="js/postprocessing/ShaderPass.js"></script>  
          22. <script src="js/postprocessing/MaskPass.js"></script>  
          23. <script src="js/postprocessing/FilmPass.js"></script>  
          24. <script src="js/postprocessing/BloomPass.js"></script>  
          25. <script src="js/postprocessing/RenderPass.js"></script>  
          26.   
          27. <script src="js/shaders/CopyShader.js"></script>  
          28. <script src="js/shaders/FilmShader.js"></script>  
          29.   
          30. <div id="stats"></div>  
          31. <div id="container"></div>  
          32. <script>  
          33.     //檢測webgl的兼容性  
          34.    if(!Detector.webgl) Detector.addGetWebGLMessage();  
          35.   
          36.    let scene;  
          37.    let camera, renderer, sphere, controls, stats;  
          38.    let ambientLight, spotLight;  
          39.    let composer;  
          40.    let clock;  
          41.   
          42.    main();  
          43.    render();  
          44.   
          45.    function main() {  
          46.        scene = new THREE.Scene();  
          47.   
          48.        camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);  
          49.        camera.position.set(-10, 15, 25);  
          50.        camera.lookAt(new THREE.Vector3(0, 0, 0));  
          51.   
          52.        renderer = new THREE.WebGLRenderer({antialias:true});  
          53.        renderer.setClearColor(new THREE.Color(0,0,0));  
          54.        renderer.setSize(window.innerWidth, window.innerHeight);  
          55.        renderer.shadowMapEnabled = true;  
          56.   
          57.        controls = new THREE.OrbitControls(camera);  
          58.        controls.autoRotate = false;  
          59.   
          60.        clock = new THREE.Clock();  
          61.   
          62.        ambientLight = new THREE.AmbientLight(0x181818);  
          63.        scene.add(ambientLight);  
          64.   
          65.        spotLight = new THREE.SpotLight(0xffffff);  
          66.        spotLight.position.set(550, 100, 550);  
          67.        spotLight.intensity = 0.6;  
          68.        scene.add(spotLight);  
          69.   
          70.        //創建地球  
          71.        sphere = createMesh(new THREE.SphereGeometry(10, 60, 60));  
          72.        scene.add(sphere);  
          73.   
          74.        document.getElementById("container").appendChild(renderer.domElement);  
          75.   
          76.        /**  
          77.         * 添加渲染通道  
          78.         */  
          79.        //在當前場景和攝像機的基礎上渲染一個新場景  
          80.        let renderPass = new THREE.RenderPass(scene, camera);  
          81.        //通過掃描線和失真來實現模擬電視屏幕的效果  
          82.        let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);  
          83.        //將渲染結果輸出到屏幕  
          84.        effectFilm.renderToScreen = true;  
          85.   
          86.        //渲染效果組合器,每個通道都按照傳入的順序執行  
          87.        composer = new THREE.EffectComposer(renderer);  
          88.        composer.addPass(renderPass);  
          89.        composer.addPass(effectFilm);  
          90.   
          91.        //菜單欄元素  
          92.        let guiFields = {  
          93.            "掃描線數量": 256,  
          94.            "灰度圖像": false,  
          95.            "掃描線強度": 0.3,  
          96.            "粗糙程度": 0.8,  
          97.            "updateEffectFilm": function () {  
          98.                effectFilm.uniforms.grayscale.value = guiFields.灰度圖像;  
          99.                effectFilm.uniforms.nIntensity.value = guiFields.粗糙程度;  
          100.                effectFilm.uniforms.sIntensity.value = guiFields.掃描線強度;  
          101.                effectFilm.uniforms.sCount.value = guiFields.掃描線數量;  
          102.            }  
          103.        };  
          104.   
          105.        //新建一個菜單欄  
          106.        let gui = new dat.GUI();  
          107.        gui.add(guiFields, "掃描線數量", 0, 2048).onChange(guiFields.updateEffectFilm);  
          108.        gui.add(guiFields, "掃描線強度", 0, 1).onChange(guiFields.updateEffectFilm);  
          109.        gui.add(guiFields, "粗糙程度", 0, 3).onChange(guiFields.updateEffectFilm);  
          110.        gui.add(guiFields, "灰度圖像").onChange(guiFields.updateEffectFilm);  
          111.   
          112.        stats = initStats();  
          113.    }  
          114.   
          115.    //創建一個Mesh  
          116.    function createMesh(geometry) {  
          117.   
          118.        //初始化紋理加載器  
          119.        let textureLoader = new THREE.TextureLoader();  
          120.        //加載圖片  
          121.        let uniforms = {  
          122.            planetTexture:{value:textureLoader.load("textures/planets/earth_atmos_2048.jpg")},  
          123.            specularTexture:{value:textureLoader.load("textures/planets/earth_specular_2048.jpg")},  
          124.            normalTexture:{value:textureLoader.load("textures/planets/earth_normal_2048.jpg")}  
          125.        };  
          126.   
          127.        //創建phong材料,并進行相應圖片的貼圖  
          128.        let planetMaterial = new THREE.MeshPhongMaterial();  
          129.        planetMaterial.specularMap = uniforms.specularTexture.value;  
          130.        planetMaterial.specular = new THREE.Color(0x4444aa);  
          131.   
          132.        planetMaterial.normalMap = uniforms.normalTexture.value;  
          133.        planetMaterial.map = uniforms.planetTexture.value;  
          134.   
          135.        //新建一個mesh  
          136.        let mesh = new THREE.SceneUtils.createMultiMaterialObject(geometry, [planetMaterial]);  
          137.   
          138.        return mesh;  
          139.    }  
          140.   
          141.    //渲染更新場景  
          142.   
          143.    function render() {  
          144.        stats.update();  
          145.        let delta = clock.getDelta();  
          146.        controls.update(delta);  
          147.        sphere.rotation.y += 0.002;  
          148.        requestAnimationFrame(render);  
          149.   
          150.        //沒有著色器通道系統默認為WebGLRenderer.render  
          151.        //使用著色器通道后,應使用使用composer.render  
          152.        composer.render(delta);  
          153.    }  
          154.   
          155.    //左上角幀顯示  
          156.    function initStats() {  
          157.        let stats = new Stats();  
          158.        stats.setMode(0);  
          159.        stats.domElement.style.position = 'absolute';  
          160.        stats.domElement.style.left = '0px';  
          161.        stats.domElement.style.top = '0px';  
          162.        document.getElementById("stats").appendChild(stats.domElement);  
          163.   
          164.        return stats;  
          165.    }  
          166. </script>  
          167. </body>  
          168. </html>  
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合