<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>

          首頁

          “老字號”互聯網產品的年輕化之路

          ui設計分享達人

          一、項目背景

          百度文庫APP是一個在線文檔分享平臺,上線已有十余年的時間,是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入,時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中,我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現,文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。

          二、由內而外,打造年輕化感知

          通過對年輕市場進行洞察,我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求,他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高,也更愿意去探索產品新的玩法,與產品進行沉浸的情感互動。

          所以此次年輕化改版不能只是對“產品的外表”進行升級,要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。



          三、“老字號”互聯網產品的煥新之路

          2.1 視覺升級-更好看















          2.2 體驗升級-更好用









          寫在最后

          從UI設計誕生初期,設計師在屏幕上模擬現實世界的交互方式,用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉,設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。

          未來,我們也會保持好奇心和探索欲,不斷打磨產品體驗,與用戶共同成長。

          作者:百度MEUX

          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          怎樣分層理解用戶需求

          ui設計分享達人

          要做好用戶體驗設計,就必須要了解用戶多種多樣的需求,否則就會經常發生“會錯了用戶的意”的情況。這種情況多了,別說用戶體驗有沒有做好了,產品的生存可能都要成問題了。

          那么,我們知道,人性的表現是多種多樣的,所以構建體驗設計的關鍵脈絡,就是要看如何用產品設計抓住人性、抓住用戶需求。比如:

          · 為什么有的品牌會擁有很高的忠誠度,而有的品牌用戶用完就走。

          · 為什么有的用戶會為很多社群貢獻內容,完全沒有物質回報也可以堅持。

          · 為什么有的產品看上去很棒,但卻一波過去就消失得無影無蹤。

          · ……

          為了解決這些問題,應該對用戶的需求進行分層。當然,每個產品人都有自己為用戶需求分層的方法。根據我的經驗,往往會把用戶的需求分成三類:解決痛感、刷好存在、滿足好奇。



          這三類用戶需求對于產品設計來說,打法完全不同。

          第一類:解決痛感

          解決痛感是人最底層的需求。每個人獲取生活的資源、衣食住行相關的硬性基礎效率性剛需,都屬于這個維度的需求。

          比如,滴滴其實是有三個最內核的產品定位,即:效率、經濟和安全。

          · 效率就是打得到車,并且越快越好。

          · 經濟就是性價比高,盡量讓用戶感覺很值得。

          · 安全就是出行安全,盡量降低事故率。

          而其他的所有衍生出來的需求,都是這上面的延展。

          所以,他們的核心就是要讓用戶經濟、效率、安全地打車,解決用戶安全效率經濟出行的基礎痛點。在出行平臺的早期階段,打到車是核心,所以所有的出行平臺都在努力地發補貼獎勵司機,因為誰的司機多,誰就有更好的用戶體驗,用戶可以打到車,這就是出行工具的網絡效應。

          接下來,做好訂單的匹配、分發、價格計算的算法和各種運營的策略,就是做好效率打車的第二步,同時也要盡量做好價格的計算和調價策略,來協調供給的分配。比如,在高峰時段多發補貼,讓司機愿意多拉單,滿足用車用戶在高峰期的需求。另外,我們也要根據不同地區的不同呼叫量,采取用流量和補貼的手段來協調司機去到不同的地方等等。

          而安全則更是出行產品的重中之重,只有保證了安全,同時還保證了效率,那才是好的出行體驗。

          所以可以看到,一個出行產品想滿足用戶的基礎剛需,也是要做非常細致的工作才能達到一個運轉順利的要求。

          其實,除了滴滴這款出行產品,任何產品都是用戶生活里的各種痛點的解決方案。這一個品類里面,誰能最大程度地、最低成本地撫平用戶的痛點,誰就會成為用戶最終的選擇。

          在找尋用戶痛點、判斷自己的產品要滿足哪些痛點時,還要注意一個問題:不能本末倒置,一定要分清楚主次。就比如說,滴滴就算是司機服務做得再好,但如果打不到車,也留不下用戶;或者一個餐飲店營銷得再花哨或者服務再好,但做出來的東西就是不好吃,那用戶也很難留下。

          所以痛點一定要夠痛,而且要做好優先級排序。只有這樣,才能抓住一個產品最基本的核心。

          第二類:刷好存在

          在解決了用戶的痛點之后,產品要解決的就是要讓用戶滿足好自己的存在需求、意義需求,也就是讓用戶能夠刷好存在感。比如,王者榮耀里的排行榜,微信計步器上的排行,社交網絡中的話語權,等等。這個時代的我們,正在經歷一種排位稀缺和意義稀缺。

          在很多社區里,會發現人們會因為被點贊和被認可而去努力地創造好內容。人們在尋找到群體認同的時候,會有很大的滿足感,尤其是被我們認可的群體認同時。

          在滿足用戶刷存在感這一方面,抖音就做得非常出色。抖音的生產工具和分發工具,不僅會幫助每一個內容創作者都能創造出好內容,而且會高效率地把創作的內容分發給有可能喜歡他們的人。這樣一來,抖音就滿足了好內容創作者的需求。

          也學你看到很多 C2C 二手平臺會有疑問,經常會問:“賣一個二手產品并沒有賺到太多錢,人們為什么還喜歡做?” 得到的很多回答都是:“這讓我有一種掌控生活的感覺?!?掌控生活,也就是踐行自己生活意義的一種,是自我存在的一種認定。所以,每個人都需要團體和自己對自我的認可。而每個注重品牌和體驗的產品,都在通過品牌和體驗或多或少地滿足用戶的此類需求。

          每個用戶在使用產品的同時,都在通過這個產品發出的信號意義來獲取認同,而這種認同,就是一種人生存在感的體現:成為那個我期望中的、被認可的自我。

          所以,產品非純功能性的需求,也是要被我們關注的。

          第三類:滿足好奇

          除了解決痛點和刷好存在外,人們還有向未知探索的需求。

          如果刷抖音的話,經常會有一種感覺,一下子幾個小時就過去了。產生這種感覺的原因也很簡單,就是因為小視頻這種濃縮新奇體驗的產品,大大滿足了我們獵奇的需求。更進一步地,抖音的生產工具,正好能夠幫助生產者生產海量卻又非常個性的短視頻,再配合音樂的情緒渲染,最終交付給我們的體驗就是,最快速度地滿足自己探索世界的好奇心。

          電影、戲劇、旅行、密室逃脫等等產品,在這個時代備受歡迎,其實都是因為解決了用戶探索新奇體驗的需求。

          那么,所有產品要取得成功,是不是都要滿足這三類需求呢,是不是都要等比例地滿足呢?在我看來,任何產品都是這三類需求的集合,只是每類所占的權重不同而已。這也就意味著,要想做好產品的用戶體驗設計,就必須得弄清楚滿足用戶的哪層需求是最最主要的。

          就好像奢侈品其實并不僅僅是包,有名作家的作品也不僅僅是作品好,它們都還帶有信號感。也就是我用什么產品,讀誰的作品,發出了怎樣的信號。而信號,就是存在感的一種表達。

          所以結合解決痛感、刷好存在和滿足好奇這三類用戶需求,再結合我們自己的產品品類,就不難看出:我們產品在哪些層面上做得好,哪些層面做得不好;哪些層面是重要的,哪些層面相對來說是不那么重要的。

          生物中心主義

          那說到這里,你其實會發現,人才是產品體驗的尺度。

          用戶體驗設計一旦落到“人”這個維度上,就成了一個關乎人類學、生物學和心理學的復合行業。在近幾年的中國體驗設計行業,都在提一種理念叫做生物中心主義:通過更深刻地理解人的身體、大腦的運行機制,設計出更適合人性的產品,來幫助人們獲得更珍貴的體驗。

          生物中心主義的設計理念,在迪士尼早年的體驗設計中就開始踐行了。關于這一點,在《絕佳體驗》這本書中有如下介紹:

          人類大腦中有四種主要情感驅動型化學物質,分別是:內啡肽、多巴胺、血清素和后葉催產素。內啡肽提升人的驅動力和耐受力;多巴胺在人完成目標后給予激勵;血清素帶來的是驕傲和自信;后葉催產素則催生了愛和善意的行為。

          所以,迪士尼會通過種種流程設計,來讓用戶產生這些化學物質而向前探索、消費、留下美好回憶、傳播好的體驗,從而流連忘返。

          比如,通過尋找興奮感,來促使用戶內啡肽的分泌。在排隊的時候,增加互動游戲,增加視頻和圖片去解釋和塑造氣氛,讓人們產生享受樂趣的預期。

          比如,通過特別獎勵,以及達成的任務獎勵,去促使用戶產生多巴胺而獲得成就感和自豪感。

          比如,通過服務來讓每個人都感受到自己是重要的客人而產生血清素,甚至讓他們認為自己就是表演的一部分,拍下他們參與的照片。

          比如,讓員工、IP 和顧客之間培養出一種愛與歸屬,讓大家開始有團體意識,相互溝通,讓用戶覺得迪士尼不僅僅是一個目的地,還是一種社區,以至于在離開的時候,都能產生一種流連忘返的感覺而不得不帶走一頂米老鼠耳帽。這就要歸功于后葉催產素的分泌了。

          所以,在迪士尼的氛圍設計和體驗用戶地圖的設計中,都會加入類似的抑揚頓挫的體驗。小到一個排隊的細節,大到一個拜見米奇國王的儀式感,都會從這四個方面下功夫去進行設計。但是,所有的交易、復購、傳播都是結果,迪士尼真正的關鍵交付,是顧客與迪士尼的情感鏈接和體驗沉淀。

          所以,如果把人理解為一種機制,并知道這些機制是如何運作的,那么自然就會設計出更符合人性的產品來。

          那些不斷滿足人短期快感的產品就好嗎?或者我們無限度地努力創造用戶時長,是對的做法嗎?這就是我們產品價值觀的探究,好產品應當為人謀幸福,而不應該消耗人生。好的產品設計,會激發人性的善,創造長期價值。壞的產品設計,會刺激人性的惡,去做出自我傷害和傷害他人的事情來。技術是中性的,但產品不是。產品總會存在著某種鼓勵,把人引向某處。

          所以,生物中心主義,里面也包含了對人類社會性的探索。

          小結

          這篇文章主要就是為了幫助我們在面對客戶的時候該怎么去分析需求,怎么去理解他們。

          首先,用戶的需求多種多樣,但總結起來就是解決痛點、刷好存在和滿足好奇這三類。任何產品滿足的都是這三類需求的復合系統,只是滿足的權重不同而已。

          然后,生物中心主義:圍繞對用戶的生物性進行分析,從而創造更好的體驗出來。應當把用戶理解為一種機制,站在更高維度的一個視角去看待用戶在我們創造出來的產品中的種種反應,而不是簡單地用善惡好壞去加以評判。只有基于系統設計和價值平衡以及文化判斷的設計,才有可能真正地解決問題,萬物都是機制的平衡。

          在用戶體驗驅動商業的時代,我們不應該僅僅看到產品提升了什么效率,還要看一個產品在文化上、藝術上、體驗上為人帶來了什么價值。畢竟藝術,是人性的效率。這,也就是體驗設計最有趣的地方。

          作者:設悟
          轉載請注明:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          如何才能找到正確的用戶價值理解?

          ui設計分享達人

          企業的壁壘到底是什么?

          我們在去年發布的第一篇研究中就說過:理論上,我們認為企業沒有絕對的壁壘。技術,產品,供應鏈,商業模式等等都并不是壁壘。市面上流傳的那些主流的關于壁壘的說法:網絡效應,規模效應,品牌等,這些幾乎都是企業發展的結果,而并不是驅動企業成功的特質。

          如果一定要說壁壘的話:企業唯一的壁壘,是對用戶價值的理解。

          對用戶價值的理解的不同:

          • 決定了:同樣是在做社交,電商,飲料,汽車,醫院,企業服務,美妝,人工智能;不同的企業最終走出了截然不同的路徑;
          • 決定了:外在功能極其相似的同類產品,最關鍵的內核的不同在哪里;
          • 決定了:獲取客戶的效率;決定了產品研發的效率;決定了資金使用的效率。

          這一核心理念,貫穿了我們過往發布的每一篇對企業和行業的研究中:

          —— 這就是為什么我們說White Claw是最好的商業樣本,其打法本質上無比的傳統和陳舊(如果你覺得打法新的話,那你接收的認知基本上落后于行業的全球共識至少10年),依然創造了近200億(30億美金)的銷售額,并幾乎把所有全球最大的飲料和酒精行業的巨頭拋在身后。

          —— 這就是為什么所有海倫司被質疑的地方:環境,價格,產品(酒),我們認為都根本完全無法動搖其成功的根基;而被詬病最多的產品(酒)不夠好的部分,我們認為反而是其極具競爭力的表現:其在酒的產品上對用戶價值的理解幾乎吊打所有酒館行業的創業公司+所有低度酒行業的創業公司。

          —— 這就是為什么高舉產品主義大旗的元氣森林,帶領著幾乎所有飲料公司都開始去使用赤蘚糖醇,但我們認為其銷量上的巨大成功跟赤蘚糖醇的關系實際上可以說是微乎其微。而準備靠提升產品品質打翻身仗的江小白,我們反而認為,在戰略上存在巨大的風險隱患。

          基于這個核心的原則,我們過往出品的每一篇研究,幾乎都收獲了較大的反響,公眾號得到了大量的消費行業的創始人和投資機構的合伙人的關注和推薦。而隨之而來的,是在這一理念被越來越多人接受之后,當我們在跟很多消費行業的客戶,各位創始人/投資人/研究員等從業者進行交流的時候,時不時的會被問到一個問題,叫做:我認同你們所提出的,用戶價值理解是最核心的決定性因素,

          那么,如何才能找到正確的用戶價值呢?

          通常情況下,我都很難去回答這個問題,因為我并沒有辦法給你一套“公式”。

          這是一個有巨大價值的問題,但同時這幾乎是一個不可能被回答的問題。愛因斯坦曾經有過一個說法,大概是,你定義問題的能力決定了你思考的水平。類似的表達在咨詢行業很流行,叫做,提出一個好的問題的能力,要遠遠超過給出回答的能力。

          從這個角度來說,“如何才能找到正確的用戶價值”這個問題,絕對不是一個好問題,因為它幾乎等于在問:“請問,如何能夠成功?”。

          但在我們被問這個問題的次數變得越來越多時,我理解這的確困擾了很多人。同時我也觀察到很多人在錯誤的路上拼命的努力著,結果導致路越走越偏。

          于是我們還是決定試著去給出一些建議,尤其是,要避免哪些思維方式。這不是一套公式,不是一個handbook(當然因為我本身就不相信所謂“公式”),如果你需要補齊“術”的維度,商業歷史上有無數經典;而我認為商業上,所有存在著標準和方法論的“術”的東西,一個聰明人理論上應該能夠毫無障礙的在幾周內甚至更短的時間內掌握。而真正難的是,在分析問題的時候,即使在面對同樣的數據,同樣的信息,同樣的現象,不同的人會得出不同的結論,而如何做到得出正確的那個。

          我們接下來給出的很多建議,更多的是思考問題的方式,其中很多可能也并非商業維度,這些思想其中一些來自于很多領域的殿堂級大師,他們中很多人并不來自商界,但我在他們的身上學到非常多讓我受益匪淺的東西。它無法guarantee你一定能夠成功的找到正確的用戶價值,但它應該可以讓你能夠one step closer,離發現真正的用戶價值更近一點。

          這些建議在我們之前發布的對不同企業的系列研究中,都曾或多或少的作為論證的一部分而提到過一些,在這里,我們試著將它們匯總起來,并且來做一個更為詳細而全面的解讀。

          一、避免產生Bias最核心的關鍵:是認識到“自我感受”并不重要

          如果問,阻擋在大部分人和正確的用戶價值理解中間,最大和最難的障礙是什么?

          我的答案會是:

          絕大部分的人都太過看重“自我感受”了。

          相比于其他的因素,這一障礙,常見的程度及根深蒂固的程度都位列首位,極難被改變。我在過往所見到的各式各樣的人當中,不論經驗多少,能力高低,年紀大小,幾乎很少有人在看待問題的時候,能夠把”自我感受”從問題中切割的很徹底,尤其是在與”自我感受”相沖突的時候。

          絕大部分人,在面對一個跟“自我感受”不一樣的現象的時候,經常性的反應不是好奇,而是質疑;而最常見的論據是:“我/我身邊的人都不是xxxxx”,當然有的人比較直接,有的人則試圖把它包裝的比較理性。

          而更糟糕的是:在跟“自我感受”相沖突的并非是觀點,而是事實的情況下;絕大多數人卻依然選擇了“自我感受”優先,而非事實優先:

          于是就有了一眾很荒謬的現象:

          某些產品明明很多用戶主動選擇,他們覺得“根本不會有人需要,未來一定完蛋”,彷佛那些貢獻了真實銷量的上億用戶不是活生生的人類;

          而某些產品明明根本賣不動,銷量慘淡,但他們卻覺得“這一定是未來的大勢所趨,只是還沒找到途徑”。

          甚至我看過最荒謬的一個采訪是:某新消費燕麥奶品牌,一邊覺得燕麥奶是未來最大的機會,一邊說他們面臨最核心的問題,是如何找到消費者需求的痛點。一個企業連最核心的用戶需求是什么都不知道,到底是什么支撐了這信誓旦旦的“未來一定”。

          而殊不知,商業世界上的大勢所趨,從來都只有一個:就是用戶的主動選擇。但很多時候,即使用戶已經做了選擇,卻依然有很多人會選擇性的視而不見。

          世界頂尖認知心理學家,心智計算理論學派的奠基人,哈佛大學的Steven Pinker教授,在其去年年底所出版的最新著作《How to Be More Rational》中提出:“myside bias”是影響人類做出非理性抉擇的最核心三大因素之一,如果加上另一個因素“motivated reasoning”,幾乎就構成了人性中最難以避免的非理性思維,這是根植在人類基因中的缺陷,人類總是傾向于defend自己的想法。而一個人應該做的,是努力的fight against這種思維缺陷,而不是選擇go with it,這樣才能迫使自己能夠真正的做出理性的決策。

          基于一“motivated reasoning”,去論證一個“myside bias”,是大部分非理性的錯誤結論的來源。在商業層面上的表現就是:

          當自我的體感感受被所謂的,選擇性的“行業大趨勢”所“證明”了的時候,絕大多數人就幾乎很難再認識到正確的事實了。于是,自我生活的世界就等于真實的世界,自我的需求就成為了產品需求合理性的論證。然而,根深蒂固的認知偏見,往往就此出現。

          因為但凡只要做過一天數據分析的人,就應該知道,只要你想,用所謂的“數據”和“案例”,去“客觀”的論證一個“想要得出的結論”,甚至看起來邏輯自洽,實在是太輕而易舉的事情了。

          而當基于“自我感受”決策的創業者,給出的“用戶價值理解”,與基于“自我感受”決策的投資人,在認知的維度上產生了共鳴的時候,madness happens。而這正是極其容易出現的場景,畢竟“精英們”對世界的共鳴方式很容易一致,不僅對自己體感所處的世界,看待另一個世界的視角也很容易一致,而當共鳴產生的時候,想要用什么行業分析的方法去“客觀論證”一個“想要得出的結論”是極其容易的。人類有無數種合理化自己決策的辦法,而尤其是在商業這類非科學的領域內,簡直信手拈來。

          知名的物理諾貝爾獎得主,發明了著名的“費曼學習法”的Richard Feynman一次在談到歷史上發生的科學謬誤時曾說:人最重要的是,不要欺騙自己,而你自己正是最容易被欺騙的人。

          費曼說他從來不會在實驗跟自我判斷出現沖突的時候,試圖去維護自我判斷。這本應該是一個基本的常識,但是歷史上有無數的延續了很多年的科學謬誤,都是由于一眾本應極其理性的科學家,在實驗結果與自我判斷發生沖突時,試圖合理化這一沖突,進而維持了原有的自我判斷。在嚴謹的物理科學領域尚且如此,在商業領域則更是慘不忍睹。

          在個人選擇的層面,從來就沒有對錯,任何選擇都應該被尊重,自我感受當然可以始終排在第一位。但在商業決策的層面,自我感受則根本一點都不重要。所以每當在進行一個商業層面的討論時,當我聽到對方以“我/我身邊的人xxxx”為開頭的言論時,我大概就知道,這個討論基本上就宣告結束了,后面的討論就不太可能有任何有建設性的結論了。當然,這肯定并不絕對,但我會在當下瞬間立下一個警惕的flag,提醒自己不要去針對“我xxxxx樣”來發表意見,因為你幾乎無法給出任何“正確”的答案。

          一直以來,我始終堅持的一個最重要的原則就是,做最大的努力去避免用個人感受去代表用戶的選擇 (而實際上,我在商業上的判斷也經常是跟我的個人感受截然相反的 )。我從來不會在”自我感受”跟真實狀況出現沖突的時候,試圖去defend我的想法,因為贏了沒有任何價值,也并不會讓我的生活變得更好,因此我通常都會毫不猶豫的拋棄我基于我個人體感的結論。

          當你能夠開始毫不猶豫的將“自我感受”從問題的分析中切割出去,對你看明白事情真相的幫助是巨大的??辞逡患虑榈暮诵哪芰?,正是需要能夠將“自我”從事情中抽離出來的能力;因為當你置身其中的時候,你就只能去祈禱,你的自我感受最終能夠被證實是人類的普世需求。

          然而最吊詭的地方是,這么一個聽起來無比簡單的事情,要做到卻無比的困難。在大量的交流中,我感受到越來越深的是,讓一個人接受知識極其容易,讓一個人接受跟自己感受相反的事實,卻無比的困難。

          美國知名的普利策獎得主,在100多年前幾乎靠著一己之力,推動了今天極具地位的美國FDA的成立和歷史上第一版《美國食品安全法》的作家Upton Sinclair,說過一句話:當一個人的生計依賴于對某件事的特定判斷時,要讓他客觀理解這件事是非常困難的。

          相反,更奇怪的是:現在竟然有一種趨勢,是創始人在標榜,自己就是自己產品的一個典型用戶,以此來當作產品是真實的用戶需求的佐證。竟然還有很多人buying it,而這極其荒謬:

          創業者們洞察到一個全新的機會,基本上有兩類來源:一類是,自身的需求觸發,比如,寶寶樹的創始人當初做母嬰;Keep的創始人當初做健身等等;一類是,對外部世界的觀察,這一類就更加不勝枚舉( 抓風口/看報告這一類不在討論范圍之內,如果一個創業者的核心洞察來自于一堆寫報告的人給出的趨勢判斷,或來自于所謂的”行業共識”,很難不認為,它將會是一個極其平庸的洞察 ) 。

          當然以上2類不管是哪一類,都需要輔以深入的行業分析以及商業邏輯驗證。

          這2類洞察機會的來源,在本質上沒有優劣之分,因為它們起到的是啟發的作用。最終能否成功則取決于,自身的需求也好,外部世界的觀察也好,能否被驗證是一個絕大多數人類的普世需求。因此,會把自己本身是產品的典型用戶,當作產品是符合用戶需求的佐證,是一個極其荒謬的行為,你是你自己產品的需求來源,不能說明任何問題,你要做的是去證明這是一個符合主流用戶的普世需求。

          我在越來越多的交流中,開始逐漸傾向于更看好,基于對外部世界的觀察而產生洞察的創業者。因為當一個人自身并不是目標用戶的情況下,卻依然能夠擁有無比精準的洞察,是極其難得的;而與之相反的是,基于自己需求的人,當被證實這一需求并非適用于絕大多數人的時候,能夠承認并及時轉向就變得極其挑戰,而這正是大量“motivated reasoning”行為產生的時候。

          這也從另一個角度說明,為什么有一個段子叫做:“普通人創業是從0開始,咨詢顧問們創業是從負100開始,請先去補行業認知”。因為咨詢顧問最常見的工作方式之一,是先make assumption,然后去驗證這個假設。但這個所謂驗證的過程,很多時候其實都是motivated reasoning,而他們對于商業分析的嫻熟,使得他們可以很危險的讓一個false conclusion看起來仿佛頭頭是道。

          因此,我們花了大量篇幅試圖給出的第一條也是我們認為最重要的一條,這個看似最像常識的建議,因為我們切身的看到大量行業經驗深厚的人,依然很難做到。

          從這個角度上來說,張一鳴的一直說的那句“做一個ego小的人才能格局大”,是一個極其被低估的建議,因為能做到的人寥寥無幾??赡苡泻芏嗳硕加X得這是一句跟商業決策關系不大的雞湯式人生建議而沒有重視,甚至我最近還看到一種很荒謬的觀點叫做,“鼓吹做一個ego小的人,是為了讓人失去自我,更好的為公司奉獻,是字節壓榨員工的表現”,而諷刺的是,這個觀點本身就充滿了”過于在乎自我感受”的味道。我只能建議,不要那么被害妄想癥,無論字節是不是壓榨員工的公司,你的人生都有無數選擇。

          而內心真正強大的人,才能夠真正做到“ego小”,因為一個強大的內心自我,是輕易不會被任何單一事件所影響的。你永遠不會因為拋棄了一點“自我感受”就受到威脅,一個人之所以能夠毫無障礙的接受任何跟“自我感受”相沖突的事實,就是“幾乎沒有任何事情有能力傷害到你”的強大內心的最佳證明,所以你根本毫無必要在“自我感受”層面defend yourself。

          二、人類最基本的人性,是你理解用戶最核心的根基

          我經常被問到的一個問題,相信很多人也被問到過,就是:“xxxx在美國很成功,你覺得,在中國能不能行得通?”。類似的,還有:“你覺得xxx會不會僅僅只是一個區域性的產品,還是能成為全國性的?”。

          對于每一個具體的產品,當然有不同的答案,需要不同的分析。同時我的原則也是,不會給出任何基于我的”體感”的答案。但我會有一個統一的最核心的判斷標準:不是這個產品的產品元素和功能,而是這個產品到底打動的是人性的哪一部分?而這一部分,是不是人類主流的共通的特性,以此決定了是否在不同市場有同樣的機會。

          簡單舉2個例子:

          White Claw在美國成為現象級的成功,一騎絕塵,吊打所有的酒類巨頭,那中國會不會有蘇打酒的市場?你要先知道White Claw賣的是什么,跟hard seltzer低不低度,氣不氣泡一點關系都沒有。White Claw的巨大成功對應的核心是“飲料化+男性的guilty pleasure”。

          那么,飲料化是不是人類普遍的共通需求,——嗜甜是刻在基因里的;guilty pleasure是不是人類普遍的共通特質,——人類社會永遠無法忽略社會評價。

          因此沒有道理認為,在這個產品上,中美市場會存在差異。但如果你只是看到了低度,氣泡的產品元素,就跑去做了一個空殼產品,能不能成功,那答案必然不能。但你不能因為你沒看明白本質,做了一堆愚蠢的氣泡酒,于是說White Claw不是中美市場共通的需求。

          植物肉在美國好像還勉強過得去,那在中國會不會有植物肉的市場?你要先知道植物肉賣的是什么,跟健康,好吃之類的一點關系都沒有。植物肉賣的是低碳,環保,動物權益,買的是能夠讓這些人feel good about themselves的精神價值的興奮劑,那這部分精神價值是不是能讓所有人feel good呢?

          并不能,這部分人群即使在美國,樂觀估計,也頂多占人群的20%,大體上就約等于Democrats中的Progressive派,甚至都不是Democrats全部。當然,自我催眠的“精英主義”們都一廂情愿的覺得未來會成為100%,畢竟媒體們,好萊塢們,新富人們,這些掌握了大眾主流話語權的人,大多是其中一員,于是呈現的就是一種好像所有人都這么認為的全人類共識的虛假繁榮的假象。如果美國只占大約人群中的~20%,中國是多少呢?大概0.2%吧。

          同樣,我們在元氣森林的分析中也說過,元氣森林對應的是從來不是健康,而是”外表管理”,對應的是人性中亙古不變的對”美”的追求。除此之外,還有什么?是人性中最普遍的對”不勞而獲”的期待,想走捷徑的心理。

          明白哪些是根植在人性中的基本特征,哪些是人類共通的需求,哪些不是;哪些是被杜撰出來的,至關重要。所以,所有說什么“xx產品的人均消費量中國僅為美國的多少分之一,因此中國市場就有了巨大的增長空間”的都是胡扯,你要知道在具體不同的領域,驅動這人均消費量背后的是什么,打動的是人的什么需求,它們是否具有同樣的土壤:

          星巴克創始人霍華德·舒爾茨說:星巴克的成功是因為,深植于星巴克的DNA里滿足人類與生俱來的交流聯系的需求,咖啡是實現這一需求的載體。人類與生俱來的社交需求是整個人類基礎的共通的人性,在中國和美國自然都make sense,所以星巴克在中美都獲得成功。但星巴克的成功,并不能抹平中美消費者在咖啡消費行為層面的差異,更不能說明中國的人均咖啡消費可以達到美國水平,因此還有多少倍的增長空間。中國當然的確有咖啡市場,但咖啡對于美國人是生活的一部分,對于中國人是生活方式的一部分,了解這其中微妙的差異。

          再比如運動健身,拿中美人均健身的巨大差異來證明中國巨大的潛力同樣是荒謬的,Peloton或Mirror完全不能說明Fiture也有同樣的機會。美國人從小是在”運動員站在校園鄙視鏈頂端,只會讀書的人是nerd”的語境中成長,中國人是在“打什么球打球,別人都在家好好學習”的語境中成長。難道覺得這個是靠什么國務院出臺的《全民健身2030》政策或者中考給體育占個50分的政策能改變的么。同樣,美國精釀啤酒的市場也完全不能說明中國市場具有相同的潛力,等等不勝枚舉。

          所以,為什么我們之前說,很多企業方/投資方說,我寄一批樣品,你看看。我都會說,我很難通過產品試用,去判定企業價值。產品試用只能證明,產品的功能和質量如何,而產品質量過關只是及格線,并不是決定性因素。重要的是做出這個產品背后的intention是什么,這個產品是基于你們什么樣的用戶價值的理解做出來的。

          所以我往往非常喜歡看企業的PR稿,比試用產品有效得多,因為先不管企業做不做得到PR稿中鼓吹自己的部分,你看得出它在努力標榜自己的哪一部分。而這某種程度上透露了,企業對于用戶和市場的理解是什么。然后你就會發現,即使在拼命夸自己的PR稿中,很多公司甚至不知道該夸自己什么,也意味著其對用戶的理解是存在巨大偏差的。

          美國最近發生了一件幾乎是動搖美國社會政治根基的事件,美國的最高法院草案有史以來的第一次被提前泄露,而案件本身的重要程度,并不如其背后代表的對美國最高憲法的認定:也就是最高法院的所擁有的權限與各州自治的準則之間的邊界。我們這里并不打算詳細討論這件事,但其中我看到了一個有趣的argument:針對一些極端的”憲法過時論”的說法,一個最好的回應是:“憲法不是針對某件具體事情的法,憲法是在抑制人的意志和欲望”。

          憲法沒有過時的最核心原因正是,憲法是基于最基本的人性制定的,而最基本的人性是幾乎亙古不變的,而人性不變的底色來自于基因的不變。

          另一個最佳的佐證,來自于內容行業。為什么50年前的影視作品,依然有大量00后擁簇?為什么100年前的文學作品,依然有大量的00后熱愛?因為真正打動用戶的作品,都是在最底層的基礎人性產生共鳴,而人性是不變的。所以消費行業有非常值得跟內容行業學習的部分,當然學習的方式,肯定不是現在市場上充斥的那些所謂”品牌應該努力做好內容”那種學習(這個我們會開一篇新的來寫)。

          最近一個關于10后的交流方式讓人看不懂的文章火了,各種數字代碼,各種拼音縮寫,各種emoji。但同樣的故事發了無數遍:說00后的時候也說看不懂,說90后的時候也說看不懂,說80后的時候也說看不懂;甚至我現在50多歲的阿姨,我記憶中小時候,外婆在她年輕的時候對她說的最多的就是看不懂她。

          每個時代的年輕人話語體系都些許不同,看不看的懂一點也不重要。因為那不代表人性,那只是人類眾多外在的表達方式之一。年輕人在是一個年輕人之前,首先更重要的,是一個人。而大部分人的問題根本不在于看不懂年輕人,而是對人性一無所知,想看懂年輕人,請先學會看懂人。

          開始把用戶當人看,用最基本的,最底層的人性去理解用戶,才是你開始能夠擁有正確用戶理解的第一步。之前看到過一個段子,叫做世界上有一個最神秘的群體,叫做年輕人,這些人被冠上了極其臉譜化的特征,他們的喜歡如此一致,每天都有無數人替他們發聲。這種臉譜化的”洞察”不僅不能作為你在乎用戶的表現,反而是你從未把用戶當作人的表現。我之前說過2個同樣18-25歲的年輕人之間的差別,可能比人和動物之間差別都大。

          很多商業分析,在所有的邏輯的維度,都沒有任何問題;而唯一最大的問題,是他們忽略了人性,在他們的分析中,人只是構成商業系統中的一個基本元素而已,而當驅動用戶做出決策的最主要的因素“人性”被忽略的時候,所有的分析都將是空中樓閣。

          三、尊重用戶,而不是“引領”用戶;而實際上也不存在“引領”用戶的可能

          市場營銷學中,有一個很常見的詞,其實非常具有誤導性,它叫做“educate consumer教育用戶”,但實際上,用戶是幾乎無法被教育的。你所看到的那些好像“成功教育了用戶”的現象,其實是因為“發現了一個用戶本就想要,但沒有人知道的點”。

          所謂的被大家稱作“教育用戶”的行為,實際上如果你仔細看,只是試圖在告訴用戶,“我的產品如何能夠很好的/創新的滿足你的需求”,而永遠無法替用戶產生一個他本不存在的需求。

          而商業世界,最可怕的是抱著“我是為你好的”家長心態,從而制造出一種“你媽覺得你冷”的荒誕產品思維。

          我們一直說,用戶是唯一的答案,這是評斷一切的最高準則:不要自說自話,不要替用戶做決定,不要俯視心態,不要傲慢的精英主義。

          為什么國內精釀啤酒沒有做大的機會,跟價格什么根本沒有關系,很簡單,因為大部分中國用戶就是不喜歡喝。

          為什么國內植物肉根本就沒有一點機會,跟價格,口感根本沒什么關系,因為大部分普通用戶根本就找不到任何一個理由去吃,not even one single reason.

          為什么精品咖啡的市場天花板低,跟價格什么也沒有關系,大部分用戶根本不在乎你們神神叨叨的豆子,咖啡風味,水洗,烘培程度這些東西。

          然后有一個頭部機構的投資人問我說:

          難道,你不覺得可以引領用戶么?

          我的答案是,不能。而相較之下,企業更應該做的,是尊重用戶。尤其是,在用戶明明已經做出反應的情況下。

          我聽到過無數的“我們在定義下一個時代的產品/我們在引領用戶進入xxx的全新時代”,這個口號本身沒什么問題,ambitious對于一個企業家也是一個挺不錯的特質。但問題在于,很多人都誤會了“引領”用戶的真實含義:

          很多人所說的“引領”用戶的潛臺詞是:用戶在一個錯誤的路上,他們不知道什么好,我在用我廣博的行業認知和技術積累去提供一個更好的解決方案,用戶只是還不理解我提供的xxx產品的價值,我要轉變他們的錯誤認知,引領他們選擇更好的解決方案。這正是最典型的“你媽覺得你冷”式的產品思維。

          你看,每個人在自己的生活中,都無比的抵觸家長”你媽覺得你冷”的行為,然而當進入了商業世界之后,就完全的失去了作為一個人的最基本的instinct。

          但實際上,當用戶表現出對你的產品沒有感知的時候,就意味著你所謂的“更好的解決方案”,只是生產思維下的好,你并沒有在用戶的基本的人性中找到任何共鳴。而用戶永遠沒有辦法通過“教育”或“引領”,從對產品沒有感知變成對產品喜愛。你認為用戶錯了的時候,往往都是你的用戶理解產生了偏差。

          這個世界上沒有什么產品的成功,是用戶本來對其毫無感知,然后通過不停的convince用戶獲得成功的。而相反的是,商業歷史上所有真實發生過的,那些真正實現了”引領”用戶的成功案例,都是做了一個“用戶本就想要,但之前沒有人知道并提供”的產品。

          所有的“引領”用戶都是尊重用戶本就存在的需求而發展出的結果,而不是通過教育用戶的舉措而實現的:

          福特創立福特汽車,蘋果推出iPhone,星巴克開啟現代咖啡店,從洗發水進化到護發素,對應的都是,用戶不知道自己要的是汽車,不知道自己要什么樣的智能手機,不知道自己要的是跟朋友交流的咖啡廳,不知道自己除了洗干凈頭發之外還有保養頭發的需求。

          星巴克創始人舒爾茨的說法是:雖然用戶不知道他們要的跟朋友交流的咖啡廳,但當你把它做出來交給用戶時,他們幾乎在第一時間就愛上了。iPhone也是一個道理,用戶是當下就明白這是我想要的東西,而不是求著用戶,自說自話覺得自己在引領用戶。( 回想一下,最近五年的所謂”科技熱點”,其中有多少,是產業屆自己在那邊high的不行,用戶們無比冷靜,無動于衷 )。

          這些都是原本就根植在他們人性中想要的,只是他們不知道,但當你把產品做出來,他們就立刻趨之若鶩。而不是,你做了一個產品,拼命講,拼命夸,用戶也不知道你在講些什么。但你覺得這個產品是真的好,是一次產業革命,是一次技術飛躍,用戶還沒get到,還需要被教育,被引領。而用戶的選擇從來就沒有對錯,尤其在生活層面。而即使用戶真的錯了,也不是一個商業行為能夠改變的 ( 這個我們會在下一篇講到,關于所謂zeitgeist產生的影響 )。

          引領用戶的思維,是精英主義的傲慢,是產業思維的自high,是從未從內心根本性的尊重過用戶的表現。而這樣的思維的人,將永遠無法真的做好產品。

          我們之前說過,只有好的“用戶價值理解”才能真正定義好的產品,不是更好的原料,更好的工廠,更好的技術,更好的供應鏈,用戶從來不需要一款所謂更好的產品。為什么你覺得你明明做了一個質量改良,技術提升,性價比更高的產品,營銷效果那么差,獲客效率那么低,渠道動銷極其可憐,就算砸錢產品都賣不動,賣給了嘗鮮用戶然后也沒有復購。

          因為你做的根本不是用戶想要的東西,你所謂的“更好”,你所謂的技術提升,品質升級,根本用戶的感知度為0,是一種生產思維下的產物。

          一個好的產品創新,從來不是什么技術創新,不是質量改良,是你打中了用戶人性中的某個原本就存在的需求,哪怕只是一個微妙的變動,哪怕只是輕微的技術含量,做出了一個“用戶本就想要的東西,只是之前沒有人知道并提供”。

          而一個用戶本就想要的東西,應該是營銷效果好,獲客效率高,渠道動銷快的。

          四、Being Right ≠ Being True,拒絕那些“大而正確”的概念

          說“正確”的話,是很容易的;說“聽起來正確”的話,那就更容易了。

          然而“正確”的話,往往比錯誤的話危害更大。因為那些一下子就很容易被認定是錯誤的話,當然也就因此沒人會注意了;但那些極具迷惑性的“正確而無用”的話,往往更危險,正因為它們看上去“沒有錯誤”,所以很容易被當作正確的認知被相信,而這正是災難的開始。

          這些“大而正確”的概念,攜帶著巨大的聲量,充斥著輿論世界。但實際上,你不僅不應該聽之任之,反而應該充滿警惕。我將這些“大而正確”的概念存在的問題大概分為2類:

          一類是,聽起來“無比正確”,但其實是錯的;抑或是“正確但并非真實的狀況”,being right ≠ being true;而這才是常常被忽視的;

          一類是,不管正確與否,“大而正確”的概念并無法幫助你產生任何有價值的認知。

          而不管是哪一類,相信了這些,都會讓你持續做出糟糕的決策,并且離發現真正正確的用戶價值越來越遠。

          先來看第一類問題,我們簡單舉一個例子:“新一代消費者變得越來越在乎健康”。

          新一代消費者并沒有更在乎健康。相反,如果你是一個年輕人,你稍微把自己回歸到一個人的身份中,你就會意識到,你的父母一輩一直以來都比你更在乎健康這件事,你的生活在他們看來跟自殺沒什么分別。你認為無傷大雅的食物或行為,他們覺得無比的不健康;你隱約覺得不那么健康的,他們覺得可能是毒藥一個級別了。

          而另一方面,人類對健康的在意程度是亙古不變的,存在于基因里的,占據了某一定程度的,并不存在什么巨大的LEAP。

          不然,為什么父母那一代人當年會捧火蜂蜜蜂王漿等等的一眾營養產品?

          不然,為什么祖父母那一代人中會花無數的錢買一堆詐騙的保健品保健儀?

          不然,為什么古代人那么執著于煉丹制藥,強身健體,延年益壽?

          那么問題出在哪,不是有很多例證么?

          • 因為gluten-free的飲食開始風靡歐美,而它能避免乳糜瀉;
          • 因為oatly燕麥奶為代表的植物基奶開始流行,而它能夠避免乳糖不耐;
          • 因為white claw開創了硬蘇打酒的巨大成功,而它低度又低卡能夠健康飲酒;
          • 因為元氣森林引爆了無糖氣泡水市場,而它的“0糖,0脂,0卡”是健康的代表;

          綜上所述,就好像得出了一個看似無比合理的strong argument:消費者越來越在乎健康。

          然而,真實情況是:gluten-free存在了幾十年了,它在避免乳糜瀉這一functional層面的作用始終如一,卻始終不溫不火,因為本身有這個需求的人據估計占全球人類的1%。它是什么時候火起來的呢?大概在2000年之后,被瘋傳是好萊塢明星與運動選手的瘦身秘方,突然爆火歐美飲食屆,無論有沒有乳糜瀉困擾的人,都瘋狂加入。

          OATLY的創始人20多年前創立的時候,就是為了解決乳糖不耐;20多年來,產品functional層面的功能屬性始終如一從未改變,而最初的十幾年,始終不溫不火,因為在乎乳糖不耐的人在人類中的比例極低。它是什么時候火起來的呢?在新CEO上任之后,它不再是健康的功能飲品,它變成了向竟然膽敢飼養奶牛,虐待奶牛,增加碳排放的十惡不赦的牛奶企業的斗士,成了環保,保護動物福利的人的精神興奮劑。

          White Claw的空前成功,跟什么低卡,健康飲酒的關系微乎其微。我們之前已經專門分析過了,感興趣可以看《案例研究 | 空前成功的White Claw和一地雞毛的中國低度酒學徒們》。White Claw也曾經明確表示過,第一,它們從來不曾想要什么滿足消費者健康飲酒的期待;他們從消費者那邊獲得了明確的反饋,增加酒精的度數將提高消費者的購買意愿;并據此推出了更高度數的版本。第二,在一個有別于誤差極大的問卷調查和focus group的消費者研究的模擬消費中發現,健康這一要素在影響購買決策的比例極低。

          元氣森林我們也專門分析過,跟健康的關系更是幾乎為0。感興趣可以看《深度研究 | 不太一樣的元氣森林解讀:成功與隱憂》。元氣森林的核心賣點是:瘦。換言之,如果依然可以瘦,但沒那么健康;我們對銷量一樣樂觀??纯幢=∑沸乱幒托聫V告法之前那個時候的碧生源的驚人銷量就知道了。如果只有健康,沒有瘦,那銷量有今天1/10就偷著樂吧。另外,在前面的Rule 2中,我們也提到了除此之外,還有擊中了人性中根深蒂固的不勞而獲的心理。

          到這里,你就看出問題在哪里了。我們之前說過,每一個產品身上都有無數種元素,分析問題的關鍵,是明白什么是承擔核心作用的要素。然而,商業分析中最大的謬誤之一:就是僅僅從產品身上所具有的某個要素,在找到所謂”共性”之后,就仿佛發現了真理,立刻從現象jump into conclusion. 而實際上,每一個組成這些”共性”的背后,核心的驅動力都各不相同,”共性”只是大家的一廂情愿。

          這個list我們可以無限的列下去:

          年輕人買益生菌,是健康么?益生菌什么時候開始火的?在尹正暴瘦的故事在小紅書上徹底引爆,全網爆紅,讓他的熱度一度躋身頂流。人們深扒他暴瘦的故事,帶火了他吃的益生菌。

          年輕人瘋狂買黑芝麻養生丸,是在乎健康么?年輕人為什么買黑芝麻養生丸?是看重黑芝麻的”潤五臟、益氣力”么?是防脫發??!防脫發的目的是什么?是美??!跟健康有什么關系?如果今天世界以禿頭為美了,誰還買黑芝麻丸?

          但我們還想借由“元氣森林的火爆為什么完全無法說明消費者變得更在乎健康”,去闡述我們在前面Rule 3中提到,并沒有展開的另一個概念:zeitgeist。這個詞,在詞典中被翻譯成“時代精神/時代思潮”,我覺得太過宏大,我傾向于把它理解為“一個時代的話語共識”。

          元氣森林跟健康幾乎沒有半毛錢關系,跟赤蘚糖醇的關系更是微乎其微。僅僅是因為“0糖,0脂,0卡”的概念,就贏了90%。But Why ?

          50年前,說到體重,占據話語體系的是什么?

          是高脂肪。于是,低脂產品大行其道(背后的故事,已經被無數人講了無數遍了,美國糖業協會和商業巨頭們對科學的刻意歪曲)。

          20年前,說到體重,占據話語體系的是什么?

          是高熱量。于是,低卡產品大行其道(熱量虧空理論盛行,計算食物熱量盛行,仿佛向更科學的方法邁進了一點點)。

          而現在,說到體重,占據話語體系的是什么?

          是糖,是高碳水。這個世界已經夸張到談糖色變,碳水幾乎承載了所有的罵名。而美國官方營養協會也正式在居民膳食推薦中,將牛奶推薦從脫脂牛奶變為全脂牛奶。

          也就是說:一個人,如果他的減重需求程度在過去50年,一絲一毫的從未變過。如果他的健康的重視程度在過去50年,一絲一毫的從未變過。但他的消費行為也將產生巨大的變化。

          這個變化是這個時代的zeitgeist的變化導致的,即使消費者對于健康的偏好程度保持exact the same level。

          而zeitgeist的變化,是幾乎無法被某一個企業所改變的。一個更好的案例,來自全球最大的消費品巨頭之一的Unilever:

          聯合利華在去年330億出售立頓所在的茶業務,在中國市場引起了廣泛的討論和關注,當然主要因為立頓在中國的知名度。但其實,有一筆金額更大,意義更重的業務在2018年同樣被出售,在國內引起的關注卻相對較低,而這正是我們這里想要講的:

          2018年,聯合利華正式以530億,出售了其成立以來,歷史最久的“起家”業務,年營收超過200億的人造黃油和涂抹醬業務。這一部分的業務的出售決定合情合理,因為業績低迷已經很多年了,甚至2015年聯合利華還對此業務進行大刀闊斧的改革,依然沒能挽回頹勢。

          關于人造黃油業務的出售的原因,分析界對此空前一致:消費者對于“人造食品”的負面看法越來越嚴重,更加偏好自然界的產品,認為其更加健康。當然這不是什么rocket science,原因很容易找到。反映到市場上就是,歐美市場的人造黃油銷量持續下滑,相反的,天然黃油銷量開始持續的上升。

          然而,是不是“消費者認為人造黃油不健康”就因此能夠推導出“消費者越來越在乎健康呢”?

          這里面有一個很重要的部分被忽略掉了,可能是因為年代太過久遠;如果我們持續向前追溯,你知道人造黃油在一開始為什么會成功么?

          它的之所以會成功的賣點竟然是:比天然黃油更健康,并且靠著這個比天然黃油更健康的賣點暢銷了幾十年。

          諷刺的部分就是,當年的賣點成了今天的掣肘;而其背后的核心原因是:不是消費者變得更在乎健康,而是zeitgeist的變化。

          其中一方面就是,這些年來科學界持續為脂肪正名,從之前的談脂肪色變,到今天對優質脂肪補充的提倡。黃油作為最佳的天然脂肪來源之一,成為了推崇而不是災難。媒體界的傳播也發生了極大的轉彎。而這一切都不是任何一個企業能夠改變的,即使是像聯合利華這種全球消費巨頭。

          因此,一個消費者在過去幾十年,即使它對于健康的在意程度未曾發生一絲一毫的變化,始終保持在exact the same level,他在黃油的消費行為也會發生巨大的轉變。

          同樣的,除了鼓吹健康之外,什么“今天的消費者從悅人到悅己的轉變”,“消費者將越來越在乎環?!?,“消費者的消費從功能性到精神性轉變”,幾乎每一個都是胡扯。就不一一展開了,我們挑其中一個,用來闡釋我們下一個重要的觀點。

          “今天的消費者從悅人到悅己的轉變”。

          消費者不是在今天從悅人到悅己的轉變。

          早在100多年前,香奈兒第一次創立CHANEL的時候,是對消費者實現了從”悅人”到”悅己”的啟蒙,而自此消費者已經“悅己”了上百年了。

          實際上你只肯要稍微花一秒鐘,用一個普通人的視角看看人類的整個消費行為,就可以發現很多消費從Day1都是為了愉悅自己的?!睈偧骸笔歉畹俟痰目淘谌祟愖运降幕蚶锩娴模皇墙裉觳懦霈F的。

          但即使這樣,人類更永遠不可能擺脫“悅人”的行為,社會評價對人的影響也幾乎是刻在人類基因里的,腦神經科學的專家已經指出,別人的評價是會立刻點亮你大腦神經中的興奮區的,這個作用是無比巨大。然而,你不應該需要知道這些知識,僅依靠一個普通人的常識就應該知道,到底內心多強大的人才可以擺脫“悅人”的消費行為,不要給出一個自欺欺人的答案。除非你的產品target consumer是人類的0.001%,這個胡說八道的洞察對你一點用都沒有。

          你閉著眼睛也猜得出,這類的consumer insight是怎么得出的。它背后對應的價值體系,無非是人的“獨立”,“自主”,“做自己”;因此,在消費行為上更悅己?!白鲎约骸边@個話聽起來無比正確,但毫無價值。

          抖音上,隔三差五就會有一個話題沖上全網熱搜,每次名字都不太一樣,一會叫“拒絕容貌焦慮”,一會叫“與素顏和解”。如果你點開參與列表,按照點贊高低排序往下滑,劃到你手指抽筋,你也只會看到幾乎所有參加的人都是比普通人好看很多的人,幾乎看不到任何真正容貌焦慮的人參與。

          “做自己”是一個極其荒謬的提倡,它就是如此的毫無道理,又如此政治正確。

          而這個得到糟糕洞察的過程中存在的巨大問題,就是我們這部分最核心的觀點:

          Being Right ≠ Being True,因為人類幾乎從來不是”正確的”在生活。

          人類從來都不是靠著做出正確決策每天生活的。那些無比正確的話,之所以無法成為真正的用戶理解和洞察,就是因為他們太過正確。

          大部分人,小時候不好好學習,長大了不好好工作,結婚了不好好經營家庭:想想你讀大學的時候,多少小學同學還有在繼續讀書;想想你在了一個每年招幾千個那么多人的BAT都竟然被大部分人莫名認為是“精英”;大部分人類在人生重大決定上面都無法做出正確的決策,你期待他們在消費娛樂上做出正確決策?想想你自己的生活里做過多少錯誤的決策。人類是一個會持續做出一些錯誤決策的生物,只要這個錯誤的不是在生物層面上危害到基因的存在。

          人類的行為也幾乎從來都不是fact驅動的;陰謀論,神話,玄學,迷信,故事,幾乎每一個都比fact對人類更有效。

          美國社會現在有一個很糟糕的現象叫:We’re so sick ofpeople being offended。你幾乎很難跟人進行正常的對話,因為你必須保證你說的話正確,但做到這無比困難。如果正確是人類的自然的生活方式,為什么困難?就是因為,人類無法”正確”的生活,people are not born flawless。

          我一度最不認同的一個詞,叫做“智商稅”。如果你曾經在任何商業研究層面,而非個人生活層面,使用過“智商稅”這個詞,那么,你幾乎從未看懂過消費行業,甚至整個2C行業。因為being irrational is not stupid,it’s human.

          你要能夠意識到:

          • 迷信 vs 科學, 永遠是迷信勝利;
          • 陰謀論 vs 理性,永遠是陰謀論勝利;
          • 放縱 vs 自律, 永遠是放縱勝利;
          • Keep vs 元氣森林,永遠是元氣森林勝利;
          • 拖延 vs 準時,永遠是拖延勝利;
          • 立flag vs 付諸行動,永遠是立flag勝利。

          因此,當你看到什么“消費者會越來越在乎環?!?,“消費者會越來越悅己”,“消費者會越來越在乎健康”,“消費者會越來越理性”etc,充滿著無比正確的意味,但卻毫無“人味”的洞察,你應該做的不是相信,而是警惕。

          除非你想做的不是那些目標人群是主流人類的生意,而是那些the loud minority的生意,in that case,完全沒有問題;但千萬不要騙自己,說這就是主流用戶的需求。更加不要騙自己說,這是做了多少個用戶問卷調查的結果。

          要知道:能夠在問卷調查中得到什么樣的答案,幾乎在當你確定了如何phrase your question的時候,就已經幾乎90%的決定了你會得到什么樣的答案了。

          作者:人本商業評論
          轉載請注明:人人都是產品經理

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          如何做好用戶故事?學會讓用戶幫你“帶貨”

          ui設計分享達人

          其實用戶故事還是由人物故事演化而來。

          傳統的人物故事主人公一定是一個響當當的名人,至少是做出了某種貢獻的,并且這類的內容傳播目的并不在于轉化或“帶貨”,而是為了傳遞某種價值觀。

          或許我們可以把傳統的人物故事稱為“名人傳記”。

          到現在,越來越多的企業、品牌,甚至是個人IP都在做用戶案例故事,而這類內容與傳統人物故事恰恰相反:

          1. 主人公可能是個名不經傳的小人物
          2. 除了體現正向價值觀,還另有目的
          3. 內容調性更接地氣

          那么,如何讓用戶幫你的產品講好故事,賣得更好?接下來從三點展開說說。

          一、明確做用戶案例故事的目的

          以目的為導向,在決定做用戶故事/用戶案例分享前,首先要明確:

          • 為什么要做用戶案例故事的項目?
          • 希望通過用戶故事達到什么目的/效果?

          一般做用戶故事,我們所期望達到的效果不外乎是以下三種:

          1)品牌宣傳

          通過用戶故事達到品牌曝光和宣傳的效果,讓用戶知道我們的品牌、知道有這么一個產品。

          B端產品,且對接客戶是比較有名的公司,會比較適合使用客戶故事來進行品牌宣傳。

          比如:影刀RPA、三維家。

          內容結構一般是某大公司使用了我們的產品,解決了什么問題,達到了一個怎樣的驚人效果。

          2)產品介紹

          這類產品的功能或許比較多,借助用戶故事來介紹產品及其功能的使用場景,并根據不同的用戶使用場景來給出具體的解決方案。

          比如:印象筆記、訊飛智能錄音筆。

          一般內容結構是用戶在某類場景下遇到什么難點,如何使用產品,達到了什么目的/收獲了什么。

          3)種草營銷

          如果是為了營銷,讓用戶種草某類產品而輸出用戶故事,那么此類故事要深究用戶的痛點和爽點,這樣才能精準打動用戶,促使用戶進行下一步的使用、購買等轉化動作。

          比如:微眾銀行(理財產品)、人人都是產品經歷(付費課程)。

          值得一提的是,像小紅書的種草筆記也是很不錯的素材,但對于種草軟文來說篇幅略短,需要擴寫。

          一般內容結構是用戶使用產品前后的對比、反轉,給人一種出其不意的效果,讀者看了后會覺得很爽,也想達到一樣的效果。

          二、如何收集用戶素材并策劃用戶故事?

          用戶故事的素材來源一般有以下幾個方式:

          1)用戶投稿

          最簡單快捷的方式就是由用戶自行撰寫,當然如果能提前跟用戶溝通好主題、確認好內容框架,并且用戶文筆還不錯,那自然是最好的。但這個方式對用戶的門檻還是比較高的。

          如果用戶故事想要追求真實性、接地氣,這類素材是最合適的。要是真能遇到一個很不錯的故事,還可以由官方再次編輯再進行傳播。

          素材收集渠道:官方自有投稿渠道、用戶外部平臺分享(如小紅書、微博、豆瓣等)。

          2)征稿活動

          策劃征稿活動,明確內容主題、內容要求,由用戶輸出,再由官方進行二次創作。

          二次創作的方式一般有2種:

          ①一篇長文

          長文形式一般是在用戶原創的基礎上(此類用戶的創作水平一般,文案多以流水文形式呈現),對排版、邏輯、結構進行打亂重建,讓文章結構整體更具邏輯性及可讀性,并突出產品優勢,必要時可能需要加上一些“夸張手法”。

          ②一個專題

          從大量稿件中篩選一批有相同點的精彩內容,由官方匯總成專題,并加上官方導語、前言或結語等。這種形式的工作量會輕松很多,并且豐富性更強。

          征稿方式:公眾號、官方社區、核心用戶群等官方自有陣地發布征稿活動。

          3)征集話題

          以話題形式征集用戶案例素材,官方借用相關案例進行原創輸出。

          手段跟征稿活動的方式差不多,但活動形式較后者更輕。話題討論對用戶和運營方的壓力都不大,并且對運營方來說可創作的自由性更大。

          形式同樣可以長文或專題的結構來呈現,如果是專題,只需要把比較精彩的內容呈現出來即可;如果是長文,需要提煉主觀點,再結合產品進行小觀點的闡述。

          征集方式:公眾號、官方社區、核心用戶群等官方自有陣地發布話題征集活動。

          4)核心用戶采訪

          這類素材是最真實、最有說服力的,但同時操作難度也是比較大的,并且還有一個隱形問題,就是你辛辛苦苦做了人物采訪,好不容易輸出了一篇自認為很優秀的用戶故事,但讀者卻不這樣認為,各項數據可能都不會太好看。

          但這類用戶故事是最適合做品牌宣傳的。因為你做了一個很高大上的東西出來,無論是掛在公司網站首頁,還是用來推廣產品,這都可以作為一個品牌的門面。

          在方式上來說,可以采用問卷的形式,最終文稿還是由官方撰寫。問卷的形式最簡單便捷也是使用互聯網工作風格的。

          對于使用產品的核心用戶,他們既不會自行撰寫,也不會參與任何的話題討論,但是典型的使用用戶,那么可以根據他們對產品的使用習慣,提出相關的問題,以問卷或邀約訪談的方式進行了解他們對產品的使用感受。

          三、我們能給到用戶什么?

          對于提供案例故事的用戶,最好能由官方給與一定的獎勵,哪怕是由用戶自發輸出的內容,也應當給與一定的回應,會顯得品牌方更有人情味。

          當然獎勵不一定非要實物獎勵或金錢獎勵,有時候一個肯定或感謝也能讓用戶感到很暖心。

          一般回饋用戶不過就是“老四樣”:

          1)金錢獎勵

          根據用戶參與的程度、提供素材的豐富度、故事的完整度等設定不同等級的金錢獎勵標準。

          2)物質獎勵

          對于參與的用戶,可以獎勵一些產品周邊、紀念品等實物。

          3)榮譽獎勵

          設置一些徽章、頭銜名稱給到用戶,比如xx代言人,xx宣傳官等。

          4)流量獎勵

          給與一些運營位、廣告位宣傳參與的用戶或其公司,類似異業合作,此類獎勵適用于小有名氣的kol或商家用戶;

          如果是B端產品的用戶,還可以有“人脈獎勵”,即搭建核心用戶社群或舉辦線下交流會,定期舉辦一些課程、培訓等,不僅能幫助用戶搭建人脈橋梁,還能讓用戶有收獲知識的快感。

          作者:啊懶運營筆記
          轉載請注明:人人都是產品經理

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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

          基于智能座艙場景的用戶體驗設計

          seo達人


          一、座艙體驗的三要素

          用戶體驗設計首先字面意思是用戶+體驗。

          圖片

          圖片

          01 座艙內的用戶除了駕駛員還要考慮非駕駛員, 非駕駛員也有多種角色:老人/兒童/青年。

          圖片

          02 體驗:用戶發生使用操作的感受。

          但實際用戶體驗一定是脫離不了場景的,場景是用戶發生行為的一個大環境。

          03 考慮場景的時候除了考慮的當下現實場景還有未來場景。

          圖片

          場景案例:充電全屏展示充電信息

          圖片

          場景案例:導航交互體驗,先展開詳細信息,然后再收起信息

          圖片

          場景案例:蔚來的360泊車系統開啟時不能喚醒nomi

          圖片

          而且產品的研發和功能創新,用戶的體驗都是依據場景體系建立的。所以HMI設計過程當中,場景體系化的建立尤為重要。

           

           

          二、智能座艙的場景體系化搭建

          1、搭建流程

          圖片

          01 場景發掘:競品分析、用戶畫像定位、產品定位、用戶旅程圖

          場景發掘首先要把場景和使用的用戶做定位,結合實際項目進行用戶畫像定位,確定場景主題,尋找到目標用戶進行實車訪談和拍攝。

          圖片

          02 場景數據細化:網絡數據、用戶訪談、實車測評數據、常見高頻數據

          這一步主要是把用戶訪談收集上來的數據,進行拆分和細化,然后篩選出有價值的數據進行錄入。

          用戶訪談數據錄入到數據庫里,產品經理和設計師會針對收集上來的用戶反饋,進行痛點/和爽點的挖掘。提出需求解決方案。

          圖片

          03 場景應用設計:原型設計、界面設計

          基于場景的應用設計會分為兩個步驟、一個是原型設計、一個界面設計、原型設計時我們更多是組內評估、找專家來提供指導性意見,到了界面設計時候除了專家評審、可以做出demo給用戶進行測試來獲得反饋。

          圖片

          04 場景走查還原場景

          在設計方案產出完成之后,給用戶還原到我們發掘的場景去進行走查,根據用戶旅程圖查看有沒有遺漏的用戶場景和不同的用戶反饋。

          圖片

           

          2、搭建工具

          整個智能座艙的場景體系化搭建需要幾個工具,競品分析、用戶畫像定位、產品定位、用戶旅程圖。

          用戶調研方法有很多,我們需要掌握(調查問卷、用戶畫像、用戶體驗地圖、用戶訪談、焦點小組、)

          今天核心介紹使用頻率最高的三種用研方法。

          2.1 用戶旅程圖

          關注用戶在駕駛階段的行為、方式、心情、痛點、期待。

          關鍵步驟:

          ① 設定場景、目標、期望(用戶畫像)

          ② 確定行為路徑

          ③ 建立核心地圖

          ④ 包裝地圖

          ⑤ 繪制故事板

          圖片

          2.2 可用性測試

          可用性測試已經成為獲得用戶反饋的流行手段,主要因為他們上手快,能快速反應出問題。

          關鍵步驟:

          ① 明確測試目的

          ② 問卷框架的設計

          ③ 投放調研問卷

          ④ 組織測試

          ⑤ 整理輸出結論

          圖片

          2.3 5W+1H法則

          5W+1H 是選定的項目、工序或操作,可以從原因(Why)、對象(What)、地點(Where)、人員(Who)、時間(When)、方法(How)等六個面進行思考。

          ① 原因—立項背景?

          ② 對象—什么功能?

          ③ 地點— 什么場景下?

          ④ 人員–駕駛員?/非駕駛員?

          ⑤ 時間–什么時機?哪個流程之后?

          ⑥ 如何–什么方式操作?

          圖片

           

           

          三、細化座艙用戶體驗的三階段

          1、用戶體驗的三階段

          體驗的時間性有三個主要組成成分,及熟悉程度、功能依賴和情感依賴。

          圖片

          1.1 初識體驗:

          我們在產品使用初期的階段,都會對產品有個使用預期。例如期望產品能提供一個好的體驗,或者怕產生不好的體驗。

          圖片

          1.2 使用體驗:

          使用體驗分為兩個階段:使用產品初期和使用產品深度期

          進入到車內試駕或者試乘,試駕員和銷售除了會讓用戶體驗車機的基礎功能外,主要介紹的就是和競品車型的競爭功能。

          產品深度體驗期的時候,長期的可用性變得更加重要,而不是最初的易學性。從而產品的實用性成為影響我們整體評估判斷的主要因素。

          1.3 獲得體驗:

          最后,當我們接受了產品,在我們的日程生活中它參與了我們的社交活動。成為了生活當中的固定解決問題的工具,這個階段產品體驗就具有可識別性了。

           

          2、體驗的三條路線

          圖片

          2.1 體驗線路是感官線

          我們現在座艙內的交互感官有、觸感、聽感、視覺、嗅覺、語音。用戶在人機交互的時候第一時間獲得直觀感受。

          2.2 體驗線路是情感線

          情感線是諾曼強調感情在塑造體驗中的重要性。比如燈光秀、寵物模式、和擬人化的汽車助手。帶給用戶都是情感上的滿足。這些情感構成了與汽車的首次互動體驗。

          圖片

          2.3 體驗線路的流暢

          就像C端和B端一樣,我們交互體驗的線路效率和流暢程度,能給用戶增強駕駛樂趣?;蛘咦畲笙薅葴p少信息元素的干擾,讓駕駛員沉浸在當下。

          圖片

           

          3、把握用戶體驗的多樣性

          3.1 個人價值觀的差異

          首先個人的因素,因為我們成長的環境不同,造成了對價值觀的差異,有的人喜歡刺激新穎的產品,有的人喜歡乏善可陳的產品。

          圖片

          3.2 產品屬性問題

          第二可能是產品屬性的問題,游戲產品帶給用戶就是不斷的快感刺激,工具類型的產品用戶使用流程流暢會更好。

          圖片

          3.3 跟隨時間線的體重心變化

          用戶的使用體驗對于時間的變化,通過用戶旅程圖,他們對產品的關注點會產生變化,例如用戶剛開始對產品互動中更關注新的功能和刺激的體驗。但在使用過一段時間后他們可能不會再關注他的新穎程度,更關注產品的實用性和效率。所以需要我們在不同的使用階段重新幫助用戶提升體驗。

          圖片

           

          原文地址:七醬設計筆記

          作者:郝小七

          轉載請注明:學UI網》基于智能座艙場景的用戶體驗設計

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。


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



          圍繞應用生命周期的編排設計

          純純

          什么是圍繞應用生命周期的編排設計

          圍繞應用生命周期的編排設計是一種企業級技術產品設計策略。

          它的核心是要解決設計師很難上手企業級技術產品,且更加難以找到體驗設計機會點的問題。我們是一群工作在企業級技術產品領域里的設計師,同時也是掘金者,這篇分享即是我們在企業級技術產品領域里探索的一些方法總結。

           


          當設計遇上技術

          工作現狀

          在我們日常工作中,和技術產品 PD 聊需求是一件非常痛苦的事情,他們講的每一個字都認識,但是組合起來就不知道是干什么的了,因此設計師也很難去想象用戶是怎么在用這些功能。

          因此相較于 C 端產品來說,B 端的技術產品目前還處于基本可用的狀態,更談不上什么體驗了。

           

          分析原因

          究其原因,我們總結有三點:

          ① 這些產品大多數都是由技術來主導,功能優先

          ② 設計在整個流程中都處于非常被動的狀態

          ③ 設計與技術之間存在一定的專業壁壘,技術往往比較抽象難以理解

          同時,我們的用戶并不是客戶,用戶不能根據自己的意愿喜好選擇產品。用戶隱藏在企業內部,設計師日常中很難接觸到真實用戶。另一方面,用戶的技術專業背景與設計師的專業存在鴻溝,這使得設計師對用戶需求的理解也不夠深,所以說在這種環境隔離和語境不通的狀態下,設計師其實難以和用戶構建同理心。

           

          能做的事

          在這種狹小的設計發揮空間里,我們能做什么呢?

          其實我們設計師有明顯的優點:

          比較擅長找規律找方法,有破局意識,從而能夠發現設計的機會點。


           

          企業級技術產品設計探索

          發現規律

          所以我們回過頭看一下之前做過的這些產品和功能,從它們的作用對象、出現時間、用戶目標、用戶行為這四個維度對他們進行歸納和總結。

          我們發現這些產品具有很強的階段性,通過不同的產品來支撐各個階段下的用戶目標。用戶通過產品的功能來實現各種編排動作,例如對應用本身代碼的編排、對應用依賴的底層資源的編排,從而支撐用戶應用的生命周期。

          因此企業級技術產品具有以下四個特點:

          • 階段性

          • 驅動性

          • 流程性

          • 抽象性


          提出策略-圍繞應用生命周期的編排設計

          首先我們要針對這四個特性進行一輪判斷,了解這個產品的場景,場景下對應的角色,每個角色執行的是單線還是多線任務流,以及任務流是由哪些功能支撐。經過這層判斷之后再定位具體問題:

          ① 每個階段的目標是什么

          ② 階段下每個角色各自的小目標又是什么

          ③ 任務要對應用還是應用相關的內容進行編排

          ④ 產品的功能是如何實現的


          當找到這些問題的答案以后,我們就可以對產品的上下游場景進行編排,明確各階段的側重以及上下游場景的限制條件;對角色進行權限分配以及協作觸點的確定;將任務流從起點到過程再到結果進行梳理;以及最后通過對底層技術的理解,合理編排產品信息架構和界面內容。

          為了能夠更加高效的完成以上信息的收集和處理,我們沉淀了 CMTD 四個小工具。

           

          策略詳解

          C 是 Collaboration,協同場景,主要回答四個問題:When、What、Who、Where。

          ① When:用以明確產品所處階段以及上下游階段,以全鏈路的視角看用戶的完整使用場景,因為產品往往可能只是解決用戶部分場景的問題

          ② What:定義當前場景的階段目標以及要做的事情

          ③ Who:當前階段的事情由哪些角色參與

          ④ Where:這些角色在線上或線下是如何配合協作的

          例如我們要做一個技術產品,通過 Collaboration,我們知道它覆蓋了發布階段、日常運維階段,目的是把經過測試的應用發布上線并進行日常維護,主要是運維人員配合研發人員和發布經理完成線上的問題排查和線下配置文檔的交接,我們就能比較清楚的知道我們要做的是一個運維平臺。

           

          M 是 multi-role,多角色,主要用以分析產品是由哪些角色共同協同驅動的。

          與 C 端產品不同的是,我們除了對核心角色的自然人屬性進行洞察,還要定義清楚該角色的目標有哪些,目標對應的任務流以及支撐的功能和權限。并且企業級技術產品往往都不是一個角色就能完全執行完成,所以該角色的上下游角色也要摸清之間的協作觸點在哪里。

          多角色的信息我們可以通過在客戶現場或者用戶訪談來收集,并沉淀為用戶角色庫。

          基于收集來的用戶信息,來定義我們產品的角色:

           

          T 是 Task flow,任務流。任務流一定是基于一個用戶角色的某個目標,來定義任務的起點-過程-結果。

          起點就是界面上用戶的操作入口,過程需要包含觸發操作、自操作、條件判斷以及是否有協作角色參與進來,在結果處除了提供結果反饋還要提供下一任務的去向入口,幫助用戶把流程串聯起來。

          任務流可以借助現有流程的走查或按照 T 模型來梳理任務流信息,從而幫助我們更好的定義一條用戶的任務流是如何執行的。

          例如我們要做的運維平臺的產品,核心角色是運維,他其中的一個目標是為應用創建工作空間。按照 T 模型,我們可以很方便的將這條任務流定義出來。

           

          D 是 deep ,深化。主要從兩個維度展開:技術架構和邏輯原理。這是兩個在做技術產品的過程中經常會接觸到的兩個概念。

          在分析技術架構時,我們可以重點關注兩個點:看由哪些功能模塊構成,這些功能之間的靜態結構,是包含關系還是依賴關系。分析邏輯原理,一是了解這些功能產生的實例,是一對一的關系還是一對多的關系,信息或流量在這些功能模塊之間如何流轉。通過這些分析,我們可以把掌握的功能特征和邏輯規律。

          舉例來說,運維平臺的核心角色運維人員需要為應用創建工作空間,按照梳理出的任務流,用戶需要經過3次跳轉7步完成,那這個是否還有優化空間呢?

          我們可以從 Deep 深化的角度入手,看這條任務流是由哪幾塊功能支撐的。例如工作空間內包含網絡和安全組,安全組內包含負載均衡和虛擬機。就像我們了解汽車的制動裝置,看到裝置內包含氣室,氣室內包含活塞體、密封墊,密封墊連接在推桿上。

          再從邏輯原理圖入口,了解流量會先按照工作空間進行隔離,從工作空間走專有網絡還是經典網絡,網絡將流量分發到安全組,安全組里的負載均衡會負責調配流量到虛擬機。他們之間層層遞進互相依賴。就像汽油從油箱到達制動裝置,在發動機里和空氣一起被壓縮燃燒后能量轉化轉送到動力裝置一樣。

          通過上面的分析我們了解到這幾個功能其實是緊密關聯的,用戶沒有必要分散到不同的地方進行添加和創建,完全可以借助流程表單和抽屜把他們串聯在一起。

          因此我們找到優化體驗的機會點,把之前需要三次跳轉7步完成的任務流,優化到1個入口5步完成。

           


          總結回顧

          企業級技術產品有四個特性:階段性、驅動性、流程性、抽象性。通過 C、M、T、D 四個小工具來幫助我們收集和歸納信息,實現對上下游場景的編排、角色的定義、任務流的編排以及界面的編排。



          作者:Ant_Design    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          間距篇 | 設計師必看的保姆級間距控制規范!

          純純

          前言

          很多時候,我們發現自己精心設計的作品總是亂亂的感覺,究其根本,大部分都是文字、圖形、色彩處理不當,后續的優化調整也都圍繞著這幾點進行,這也是為什么設計師在制定設計規范的時候,會把文字(標題、正文、提示的字號)、色彩(主色、輔助、點綴、漸變的使用場景)規范分的很細。然而,有時候即便用好了規范,依然沒達到理想的視覺效果,這里就要提到設計規范中很少有人關注、且非常容易被忽視的「間距」問題。
          優秀的界面設計應該體現在每個維度,間距在設計中也是不可缺少的部分,尤其是界面元素較為密集時,需要對間距的使用掌握得當,合理的利用間距留白,能將信息更高效的傳達給用戶。
          文字、圖形、色彩是UI設計的三大組成元素,間距即是這幾種元素結合的媒介,如何通過間距給用戶帶來更舒適的視覺體驗是設計過程中極其重要的一環,那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用?筆者進行了整理總結,通過本篇文章揭曉。

          分享目錄

          一、間距在UI中的重要性
          二、定義文字間距
          三、定義元素/組件間距
          四、定義模塊間距
          五、間距的使用技巧及原則
          六、結語

          一、間距在UI中的重要性

          1.什么是間距?

          間距指的是界面各元素彼此相隔的距離,可以是文字自身的行距、與圖片、與組件、與模塊的間距,或是界面兩側的安全距離(如網頁的寬度為1920px,內容區為1400px,那么安全距離為兩側各260px)等。
          作為UI設計師,在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距,利用各間距之間的規律來組織界面內容,確保信息的節奏性,給用戶輕松、預約的瀏覽體驗。


          2.間距的實際作用

          間距可以讓界面信息更有節奏,提升內容的可讀性,還能通過不同的疏密程度來闡述各元素之間的關系,以吸引用戶的注意力,所以在控制界面間距時,一定要有“較真”的心態,任何一次的改動與調整都要先考慮清楚為什么,能給產品和用戶帶來什么。要做好間距,不能僅停留在視覺層面,需要進行多方面思考。
          設計師層面:規范的定義間距,不必每個元素都去考慮間距的大小,有效減少決策和思考時間,提升效率。
          開發層面:開發可以按照基礎間距去定義變量,長期如此,雖然不能煉成像素眼,但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量,在使用8px、16px、24px、32px、48px...等,開發直接使用基礎間距x1、x2、x3...,以此類推,在開發眼中,肉眼定然看不出1px的差別,但卻能區分出8px的差距,不必每次都去測量,還能減少誤差,高度還原設計效果。
          用戶層面:有節奏且具備一致性美感的界面效果,信息的有效傳遞變的輕松,用戶體驗能得到很大程度的提升。


          3.間距的統一性

          設計規范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理,間距也是設計規范中非常重要的一環,它作為規范中的最小單元,如果沒有遵循統一,將會直接影響界面整體的版式和布局,信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師,開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的,毫無規律可循。
          統一的間距能讓界面的視覺效果更有節奏,設計師在設計某些相似的模塊時可直接復用組件,即便是多人共同完成同個項目或更換成員,也不會因間距不統一的問題造成整個APP的風格混亂。
          對開發來說,如果清楚間距的使用規律,即便有小的誤差,也能自行更正,例如使用8px增量,8、16、24...按倍數規律以此類推,若出現9的間距,開發會更正為8、15則會更正為16,自行多退少補,雖然設計師需要細心、盡量不出現這種小的出入,但任何事情都沒法做到絕對,統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通,能進一步提高開發效率。


          ▲ 從上圖可以看出,間距不規范、信息就像一鍋粥,而規范的使用間距就能將信息自動分組。

          二、定義文字間距

          文字是UI設計中非常重要的信息元素,雖然大多數設計師對文字的屬性比較了解,但在真實設計中總會因其他信息的干擾不能合理運用,與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單,但實際上有很多因素要考慮,例如字間距、行高、段落等,下面帶大家一起了解。

          1.字符間距

          字符間距一般都是設計工具的默認數值,無需調整。當碰到多行文字需要避開頭尾的標點符號時,使用工具中的避頭尾功能即可自動調整字間距,如無此功能,則需手動調整,這里并沒有所謂的技巧與方法,頭尾避開標點符號即可。
          另外,在設計卡片、瓷片區的標題時,有時需要通過調整字符間距來提升界面的舒適度,間距數值自行定義,但相同層級的內容標題字間距一定要保持一致。


          2.文字行高

          行高是指上邊框+下邊框+字號的高度之和,這里主要針對多行文本。在平面設計中,行高沒有一定的標準,如無特別需要,使用系統默認的行高即可。
          在UI設計中,文字會有5~6個不同的等級,為便于用戶閱讀,一般會設定行高標準,尤其是新聞資訊類型的應用本身就以文字內容為主,不同的行高對文字的易讀性會產生較大的影響。
          文字行高一般會設定為字號的1.2~1.5倍,具體值跟字號有很大關系,文字越小,行高就越大。例如,我們可以設定字號32px為中間值(非絕對),小于或等于32的字體、行高為字號的1.5倍,大于32的為1.2倍。另外,也可以直接將所有行高固定在字號的1.5倍,不難發現,字體越大其折行的概率就越低,試想一下,如果將48px的文字折成幾行,界面還能剩下多少空間?


          3.文字段落

          文本段落間距的重要性在移動UI界面中并不明顯,更多體現在網頁設計中。需要著重糾正一點的是,部分設計師在設置段間距時習慣性的多敲一次回車鍵,這種方式并不可取,會造成間距過大、內容脫節。
          如有需要,一定要手動設置段間距,這里沒有固定的數值和規律,視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍,例如字號為30、段間距為15,字號為40、段間距為20,僅供參考。


          三、定義元素/組件間距

          定義間距其實并沒有一個絕對的標準,主要取決于最小單位,例如4px、5px、6px、8px都是可以的,到底使用哪個數值還得根據產品自身定位及內容組織形式,前提是所有間距都要遵循最小單位并基于倍數形成規律。
          在設計界面時,需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系,這就是為什么當我們打開新聞資訊、電商類應用會發現信息非常緊湊,而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎;基數越大、頁面的留白就越多,使用不同的基數,呈現出來的視覺效果也形態各異。
          筆者在工作中通常以8px作為基數,以此衍生出8、16、24、32、48、64這6個間距數值,完全能夠滿足絕大多數的使用場景。當然,針對信息較少的頁面也會使用到120、160、200...其他間距數值,例如缺省頁、登錄頁面等。不難看出,上述以8px為基數定義間距數值時,沒有40、56這兩個數值,難道他們不是8的倍數嗎?我們以8和16做對比,后者是前者的2倍,其間距的變化尤為明顯;但如果用56和64做對比,后者是前者的1.14倍,其間距的差別微乎其微。敲重點,設計師在定義間距時,需要遵循倍數規則,但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規則,當間距數值越大時,根據基數所跳躍的倍數就越大,其實設定字號也是相同的邏輯(后期詳解)。


          四、定義模塊間距

          從信息層級角度來看,等級權重越高、間距就越大,在現實世界中也是如此,一個物體周圍的空間越大,就越容易吸引人們的注意力。
          模塊間距分為塊內間距(同一模塊中不同元素或信息組之間的距離)和塊外間距(同一個頁面中不同模塊的之間的距離),為了更好的區分信息層級,塊外間距一定會大于塊內間距,也能保持塊內信息的親密性。
          如下圖所示,將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊,每個模塊內元素的間距都會比各模塊之間的間距小很多。


          五、間距的使用技巧及原則

          1.接近性原則

          需要通過各元素的間距來體現出信息的關聯性,格式塔原理中的“接近性”原則告訴我們,相互靠近的物體被認為比相互距離較遠的物體更有關聯性,因此,相關聯的元素之間靠的越近,用戶越能感知到信息的關聯,同時更能了解整個界面中各模塊信息的邏輯關系。


          2.利用留白強調

          很多時候,想讓一個元素變的突出,可以用加大字號、修改色值或后加粗等方式進行強調,但這并不是突出信息的唯一方式,當所有元素都變的突出,那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出,留白也是一種強調信息的方式,它能引導用戶將注意力集中在特定的內容上。

          3.使用柵格系統

          善用柵格系統(上述有詳細說明),通過最小間距值進行遞增,讓整個界面看起來更協調。柵格系統可以讓設計師在元素的親疏關系上更快作出決策,后續不管是迭代還是更換設計成員,都能保持統計的間距規范。


          4.文字行高規則

          這個問題在很多團隊中都是硬傷,甚至在設計驗收時還被直接忽略。在主流UI設計工具中,添加文本元素時,都會有默認行高,在前面的內容中有講過多行文本的行高為字號的1.2~1.5倍,那么單行文字的行高到底是需要手動設置還是遵循默認,筆者認為都是可以的,但一定要與開發保持一致。
          行高決定著文字邊緣與定界框的間距,而開發只能看到定界框與其他元素的間距。

          1)默認行高
          默認行高值會隨著字號的變化基于一定的倍數自動增減,需要將此規律或倍數告知開發,開發將此規則植入代碼方能最大化還原設計效果。另外在設計界面時,尤其是多組文字元素的上下間距,需要通過計算(文字邊緣到定界框的間距+文字元素間距=實際間距)或手動測量才能達到精準狀態,下圖為例:

          2)手動設置行高
          手動設置即字號是多少、就將行高設置為多少,確保文字邊緣緊貼定界框,在設計過程中調整間距時,無需計算,根據設計工具的智能提示調整即可。


          5.間距值數量設定

          在同一APP應用中,根據最小基數定義的間隔值數量不易過多,一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等,以5px的基數為5、10、15、25、40、60等。數量過多會導致界面不同元素、模塊的間距差異化不夠明顯,數量太少無法滿足多元素、模塊使用場景,也會導致間距跨度較大。


          6.明顯相鄰間距值

          設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時,用戶很難感知到界面中信息之間的邏輯關系,我們需要根據柵格系統中間距值的增大、設置更大的區間值,讓相鄰間距值之間的視覺差異更加明顯。


          7.跳出間距的束縛

          當界面中的信息較為密集、間距不足以滿足信息的突出程度時,需跳出純粹的間距規范束縛,換種方式或許更好。例如:給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等,需知「此消彼長」的道理。


          六、結語

          如果在處理界面信息層級時,改來改去還是覺得很亂,不防從間距角度出發,或許會有不一樣的收獲。雖然在剛開始的時候,規范間距帶來的效果甚微,但隨著團隊規模不斷擴大、界面數量越來越多、內容越來越復雜時就會發現,所有內容統一間距規范,不管是構建一致性界面視覺效果、還是對開發和設計師來說,既能提升用戶體驗、還能提高團隊的工作效率。
          間距是否規范使用,決定著界面是否規整、信息傳達是否清晰,即便如此,間距也只是解決信息層級方式的其中之一,切不可讓其限制設計師的發揮和思考空間。制定設計規范有助于項目的高效運轉,間距也好、色彩也罷,設計師依然需要從實際用戶場景出發,通過不斷的思考和經驗總結,打磨出更合理、更符合項目需求的設計規范。

          作者:大漠飛鷹CYSJ    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何通過空狀態留住用戶

          純純

          在交互設計、用戶體驗設計中,每一個細小環節都至關重要。比如說,空狀態 ( The Empty State ) 是許多應用程序設計開發過程中忽略的一點,卻也有著優化用戶體驗、改善應用程序的潛力。

           

          一.什么是空狀態?

          空狀態:顧名思義就是空白的狀態,空狀態是對沒有數據頁面的補充,一種對零數據的設計形式(如下圖所示:無網絡、訂單為空、沒有關注的人以及無法連接網絡等等這些頁面就是所謂的“空狀態”。)

          空狀態是APP設計中不可或缺的一部分,特別是新用戶初次接觸到產品APP時,必然會面對很多空狀態。

           

                 undefined     

          二:空狀態的分類

          第一:根據空狀態產生的路徑,可以將空狀態分為3類

           

          系統層:本地請求異常;如:無網絡、服務器異常等

          信息層:請求成功,數據異常;如內容已刪除、已下架等;

          空白層:請求成功,無數據;最常見的空頁面或空狀態;

           

                 undefined     

           

          第二:根據空狀態的出現場景又可以將其分為4大類:

           

          初體驗:初次注冊登錄的用戶很多功能都沒有熟悉

          無信息/無結果:某些功能還未使用過

          完成任務:完成某項功能后反饋的結果

          出錯:因為各種原因導致的錯誤頁面

           

                 undefined     

          初體驗時,根據不同的產品,我們可以為用戶提供不同的引導

          · 創作平臺→引導用戶創造內容、推薦相關內容、開啟權限……

          · 工具類app→介紹相關功能、添加相關人、相關功能……

          ·學習類app→收集用戶目標、推薦相關課……

                 undefined     

           

          無信息/無結果時,告知用戶該如何解決問題,或者給用戶其他選擇

          ·購物車為空時→讓用戶購買或者給用戶推薦商品

          ·無收藏時→應到用戶去收藏

          ·搜索為空時→告知用戶換一個詞試一試

          ·無評論時→讓用戶搶個沙發

                 undefined     

           

           

          任務完成后,鼓勵或獎勵用戶

          ·郵件全部回復完→祝用戶擁有美好的一天

          ·書看完時→讓眼睛放松一下

          ·打卡成功→獎勵用戶勛章等等

                 undefined     

           

          程序出錯后,緩解用戶情緒,告知用戶解決辦法

          ·網絡出錯→檢查網絡/刷新頁面

          ·404頁面→讓用戶反饋情況到后臺、報錯等

                 undefined     

          三:設計空狀態頁面的好處

           

          據調查顯示:“平均下來,APP在被下載之后的前3天時間里,日活躍用戶(DAU)數量下降了77個百分點。30天內,下降比例達到80%”。用戶會嘗試多個同類APP,然后在接下來的3到7天內決定其中的哪些不合適。這時候就需要通過更多好的設計和體驗來留住用戶

           

          當然一個產品的好與壞不能全靠空狀態,但是空狀態對于新用戶的留存是很重要的。

           

          Spotify的用戶體驗專家Tamara Hilmes提醒設計師們時說,空狀態是一個展示產品個性化的機會,因此,在進行空狀態設計時,需要認真考慮品牌用戶的目標和背景。

           

           

           

          四:空狀態設計原則


                 undefined     

          4.1基本原則 


          準確:空狀態需要清晰明確地將當前系統狀態傳達給用戶

          直觀:簡言之就是畫面要“小而美”→簡單

          高效:提供用戶快速有效地擺脫空狀態的方法

           

          準確

          準確原則要求在文字描述上做到清晰地闡述系統當前的狀態。

          下圖為例,如果僅以“獲取不到數據”作為收件箱空狀態提示文字,用戶不清楚是系統異常、網絡異常還是僅僅因為收件箱沒有郵件而出現當前狀態。準確地將系統狀態及操作結果告知用戶是空狀態設計中十分重要的目標。

                 undefined     

           

           

          特殊原因導致的空狀態,也可以在附加文字中告知用戶其原因,例如郵箱賬號未登錄而導致收件箱為空的情況。

           

          直觀:

          空狀態不僅要講究視覺的美感,還要講究體驗的“美感”,要讓用戶在不用思考的情況下,  獲得最大的價值,

                 undefined     

           

          高效

          若空狀態在系統中可以通過觸發操作離開,建議在空狀態的文字或操作上進行展現。

          以站內信空狀態為例,系統存在用戶可執行的解決方案,在設計上也要體現。上面提到的賬號未登錄導致站內信為空時,考慮附加文字提示‘登錄賬號即可開始’。若系統存在直接觸發操作的方案,可通過鏈接或按鈕的形式提供入口給用戶,便于用戶快速有效地回到功能主流程中。

                 undefined     

           

           

          4.2進階原則undefined       

          有趣:有趣又易用,符合用戶的心理預期

          品牌:介紹并強化品牌元素,通過恰當的方式、形式呈現

          記憶:有創意或幽默色彩,呈現形式新穎,體現專業同時創造正面情緒

           

          有趣

          空狀態的設計在滿足了基本的設計原則后,還可根據產品的品牌特征進行優化。一般對空狀態的圖片、文案來著手進行品牌化設計。

          采用含著關懷情感的文案“哎呀,網絡好像出了點問題”代替“網絡未連接”這樣冰冷無感情的提示文字,同樣達到告知用戶系統狀態的目的,但修改后的文案明顯更能貼合服務工具型軟件的品牌形象。

           

          同時結合文案主題,用有趣的插畫吸引用戶,達到緩解用戶焦慮、負面情緒的目的

          例如下圖的刷新一下試試,企業IP作為粉刷匠在刷新Wi-Fi,比起一個失聯的行星就更有意思

                 undefined品牌

          當空狀態滿足了用戶的基本需求后,就可以考慮如何樹立品牌形象了!

          目前最簡單且有效的辦法是——企業IP+插畫+文案,雖然被很多人吐槽套路、片面,但是作為剛起步的創業類的app,這不失為一種好辦法

           

                 undefined     

           

          設計專屬吉祥物形象,對產品進行擬人化表達,避免極其復雜的插畫,保障界面簡潔明快;

          由于插畫不可交互,盡量與背景融合為一部分,避免使用明亮的色彩,誤導用戶點擊。

           

           

          記憶

          文章的開頭講過,空狀態對留住新用戶有著很關鍵的作用,那么空狀態在用戶使用的幾秒鐘內一定要給用戶留下足夠深刻的印象才有可能留住這些新用戶,所以空狀態一定要有新意,甚至是要給用戶出其不意的視覺感受,這個階段考慮的問題要更多一些,受眾人群的特點、品牌的調性、想要達到的效果、解決問題的手法、還要注意對用戶而言是否直接有效并且準確。

           

          阿里旗下“躺平”app的空狀態打破常規,非常優秀的抓住了用戶人群的特性,解決了用戶的需求的同時,還給用戶樹立了非常深刻的品牌印象。

                 undefined     

          產品所有能傳遞情緒的場景都應該與品牌情緒一致。采用負面情緒的空狀態有一定風險,可能會起到消極作用。

          用戶更容易代入場景化的故事,產生情感共鳴。構思場景,需研究產品目標用戶群的特質,設計他們的共同回憶,將有關的場景、片段、元素進行拼貼、組合、關聯,再找到最能勾起情緒沖動的突破口,豐滿場景。

          避免正面刻板的形象(一眼就能看到底的設計),盡可能簡單有趣、不落俗套,讓用戶看到這個畫面后可以有更多想象的空間,從而吸引用戶,驅動用戶的好奇心。

           

          五、總結

          簡單總結了一些設計空狀態時整體的設計流程,如下:

           
          功能入口:提供相關功能的入口和動作按鈕,解釋服務的功能和優點,引導用戶到其他頁面查看內容

          1. 標題文案:說明當前狀態,解釋當前問題出現原因,介紹功能概要

          2. 解說文案:如何走出當前狀態,如何解決當前問題,補充說明功能的屬性

          3. 推薦數據:提供熱門數據、個性化推薦數據讓用戶選擇;如電商搜索無結果、購物車等頁面,推 薦用戶感興趣的商品,能有效地提升購買轉化率

          4. 操作引導:提供相關操作的示意和引導,讓用戶能刪除或替換內容

          5. 完成指導:送上任務達成的祝賀語,鞏固用戶的成就

           

          細節備注:

          文字和圖形一樣,也是一種情緒的載體,注意文字的魅力,加注重文字的情緒表達,更易調動觀者的心。

          底部標簽欄全面解析

          純純

          一、標簽欄是什么?


          標簽欄也叫Tab Bar,是移動端應用程序中最常用的UI元素之一。標簽欄出現在應用程序屏幕的底部,可以讓用戶在應用程序中的不同部分之間快速切換。標簽欄可以是半透明的,也可以具有背景色,在所有屏幕方向上都保持相同的高度,并且在顯示鍵盤時被隱藏。標簽欄可以包含任意數量的標簽,但是可見標簽的數量根據設備的大小和方向而變化。如果由于水平空間有限而無法顯示某些選項卡,則最終的可見選項卡將變為“更多”選項卡,該選項卡將在單獨屏幕上的列表中顯示其他選項卡。


          標簽欄在任何目標頁面中的高度是不變的,iOS 規定它的高度為98px(iOS @2x)。但因為 iPhone X 之后的全面屏手機引入了 Home Bar ,所以在進行界面適配的時候,請務必要加上 Home Bar 自身的68px高度。別讓Home Bar遮擋標簽欄中標簽的展示,這會讓兩個控件發生操作手勢沖突。




          二、為什么標簽欄要放于底部?


          史蒂文·霍伯(Steven Hoober)在對移動設備使用情況的研究中發現,人們會根據自己的設備,需求和背景以多種方式觸摸手機,觸摸手機屏幕或按鈕的用戶分三種基本方式:抱著手機的人占36%、兩只手使用手機的人占15%,而49%的人依靠一只手在手機上完成事情,除此之外75%的用戶僅用一個拇指觸摸屏幕。



          在下圖中,出現在手機屏幕上的圖表是近似覆蓋圖,其中的顏色表示用戶的拇指可以接觸到哪些區域以與屏幕交互。綠色表示用戶可以輕松到達的區域;黃色,需要伸展的區域;紅色區域,要求用戶改變握持設備的方式。



          這意味著:

          將常用的“行為”放在屏幕底部很重要,因為只需一鍵式的交互即可輕松到達這些“行為”。



          三、標簽欄的三大原則


          底部標簽欄設計應當遵循三大原則:結構合理、位置清晰、可預測行為


          3.1 結構合理

          為了讓標簽欄表現清晰,兩大平臺在規范里都對標簽數量給出了相同的建議:建議標簽欄內的標簽個數為3個至5個。因為標簽過多會使每一個單元標簽的可觸空間降低,人們在物理上(手指)難以點擊或誤觸,除此之外還會增加應用程序結構的復雜性。



          注:如果你因為產品結構非常繁雜,標簽數量想要達到更多,那么在 iOS 中就會給你強硬處理,iOS 人機交互規范告訴產品設計者們:標簽欄雖然可以包含任意數量的標簽,但可見標簽的數量會根據設備的大小(平板或手機)和方向(豎屏或橫屏)而自適應變化。如果由于水平空間有限而無法顯示某些標簽時,最后的一個可見標簽將被會被系統強行轉換為“更多”選項,需要用戶點擊“更多”選項之后,系統才將在單獨屏幕上的列表中顯示其他被隱藏的標簽。


          3.2 位置清晰

          “我在哪里?” 是用戶成功導航所需要回答的一個基本問題,我們應當采用適當的視覺提示讓用戶知道目前所處的位置(選中狀態)。在APP應用中我們常見的處理方式有4種:改變圖標樣式、改變大小、改變顏色、改變展示樣式。它們并不一定是獨立存在的,可以同時作用于一個標簽。



          3.3 可預測行為

          選取每個底部導航選項都有通向它的目的地,底部導航應當將用戶直接引導到相關頁面,不應該打開菜單或其他窗口。如果在某些情況下可以使用標簽,但在其他情況下則無法使用,則應用程序的界面將變得不穩定且不可預測。我們要確保所有選項卡始終處于啟用狀態,并說明為什么選項卡內容不可用。例如造作新家APP,當用戶處于未登錄狀態時,就不能查看底部標簽“我的”信息,當我點擊標簽“我的”,就會彈出快捷登陸界面,這樣就能讓用戶明白不能使用的原因是賬號未登陸,從另一層面講也很好的引導了用戶注冊與登陸。



          注:不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件,如果需要提供控件,請使用工具欄。



          四、標簽欄的基礎規范


          在設計標簽欄前我們首先要了解它的基礎規范,在保證基礎規范合理的情況下再去進行設計。


          4.1 圖標視覺大小

          為了保證圖標的尺寸大小一致性,我們往往會建立基礎的網格尺寸來進行繪制圖標,下面就以常用的24x24為大家舉例:



          網格包含2px出血位。這樣可以確保圖標在導出時將保留其所需的比例和周圍的空白區域,同時還能夠很好的平衡圖標的視覺重心。



          最后加入圖標的keyline,keyline由圓形,正方形,矩形,正交,三角形和對角線組成。它可以為您提供圖標集中基本形狀或比例的一致大小。這使創建視覺上的穩定變得更加容易,并有助于在設計相似比例的圖標時有共同的參考準則。


          在24尺寸下的keyline構成如下(24尺寸下的出血區域為2):



          當把圖標畫在網格上時可以很好的規范圖標,讓它們從整體的視覺上看著統一規范。



          4.2 標簽欄布局

          標簽的數量以及標簽的展示形式決定了標簽的布局形式,標簽的常見布局一共有2種:屏幕等分、圖標左右間距相等。


          4.2.1 屏幕等分

          屏幕等分是最常見的標簽布局形式,因為不管它存在多少圖標,都可以用它進行屏幕劃分,計算方法也十分簡單,屏幕的寬度除以標簽個數就是每列寬度。采用此等劃分的案例有:懂車帝、今日頭條。



          4.2.2 圖標左右間距相等

          圖標左右距離相等多用在標簽數量為3個的情況下,計算方法是先去除中間圖標的尺寸,然后再左右平均劃分等距。相對于屏幕等分,圖標左右間距相等劃分更為緊湊。



          4.3 標簽欄熱點區域

          根據菲茲定律,使用指點設備到達一個目標的時間,與當前設備位置和目標位置的距離(D)和目標大?。⊿)有關。標簽欄作為向用戶展現產品框架的關鍵控件,熱點區域(可點擊區域范圍)的設定一定要合理。底部圖標尺寸較小,如果將圖標作為熱點區域,那么可點擊區域就偏小,很可能出現用戶點擊不到的情況,正確的做法是以標簽欄的布局作為基礎設定,在標簽相鄰的部分劃出一定區域作為不可點擊區域,以免用戶誤操作,參考如下,紅色為可熱點區域,藍色為不可點擊區域:




          五、標簽欄的圖標樣式


          在產品設計中,不同樣式的圖標會給人不同的感受,隨著APP風格越來越簡潔化,標簽欄圖標風格緊緊地跟著界面的風格而改變。經過長時間的沉淀,標簽欄圖標常見的默認設計樣式一共可分為四類:線性圖標、面性圖標、線性+面性圖標、輕質感圖標。


          5.1 線性圖標

          線性圖標通過線來塑造輪廓,在圖標設計中使用的線有粗細之分,常用的App圖標設計線的粗細一般有2px、3px、4px,不同的線條粗細所帶來的視覺感受也不同,我在“如何讓你的圖標具有說服力”文章中提到過,線條越粗那么圖標的性格就越活潑、粗曠,線條越細圖標性格就越精致、商務,圖標使用描邊的粗細可以根據產品的氣質來決定。



          選中狀態:當選中狀態為高亮線性圖標時,選中狀態的圖標顏色會與默認狀態的圖標顏色形成較強的反差,但由于線和線的差異性并不強,線性圖標沒有面性圖標更具吸引力(引導性),即使加入了高亮色識別度也不及面性強。airbnb在處理線性圖標選中狀態時就考慮到了這一點,選中狀態下不僅對圖標的顏色做了較大變化,還加大了圖標及文字的描邊粗細,從一定程度上加強了圖標的引導性。(注:線性狀態的圖標選中狀態也可以變為面性圖標或線性+面性圖標)



          5.2面性圖標

          面性圖標是通過面來塑造形體的圖標,采用了剪影的設計形式,通過線或者面去切割基礎輪廓面,通過分型來塑造圖標的體積感,面性圖標的承載信息相對與線性圖標來說更重,更具有引導性。

          選中狀態:面性圖標的選中狀態為高亮面性圖標,顏色可以為純色、也可以為漸變、透明。愛奇藝的選中狀態就采用了高亮面性圖標的展現方式,除了把圖標底色及文字的顏色加深以外,還加入了品牌色,甚至為了讓“會員”標簽更加突出,還單獨對“會員”標簽的顏色進行了修改。



          5.3線性+面性圖標

          線面結合圖標相較單一的線性圖標或單一的面性圖標樣式更加豐富、也更富有趣味性。從設計的角度上說,由于元素的多樣化,設計更容易獲得好的效果。相反,如果運用不當會顯得圖標非常雜亂,如何有效的把控好兩者之間的過度是關鍵。

          選中狀態:線性圖標的選中狀可以為高亮的線性+面性圖標。懂車帝在處理標簽選中狀態時就把圖標底部加入了高亮黃色圓形塊狀,即保存了線性也添加了面,加深了選中狀態的視覺重量,更加明確的讓用戶感知自己所處的位置。



          5.4輕質感圖標

          輕質感圖標層次簡單,用色素雅干凈,采用輕投影、輕漸變的方法設計,這類圖標具有一定的立體感,能給人輕盈、簡潔、精致的感覺。輕質感圖標在標簽欄中運用的較少,在特殊情況下才會使用,例如盒馬,就把輕質感圖標用在了首頁標簽與盒馬小鎮標簽,首頁標簽的引入是為了讓用戶加強對品牌形象的認知,而盒馬小鎮標簽的引入則是為了加強圖標的引導性。



          *圖標樣式的常用變化(選中與未選中)

          在我調研上百種應用程序中,發現主流的APP標簽欄樣式變化大致分為六種:線性-線性、線性-面性、線性-線+面、面性-面性、面性-線+面、線+面-線+面。雖然標簽的樣式變化繁多,但是使用率最多的是“由線性轉面性”標簽。




          六、標簽欄的展示形式


          標簽欄的不同展示形式會給用戶帶來不同的使用習慣和使用感受,常見的標簽展示形式有四種:圖標+文字、純圖標、純文字、舵式。


          6.1圖標+文字

          圖標+文字是最常見的標簽展示形式,為了讓用戶能夠很好的明白圖標的意圖,所以在圖標下方會配有文字提示,這樣就能大大的降低誤讀的可能性。正因為有文字提示,所以沒有必要過于擔心圖標的識別性問題,那么圖標就可以得到更深的延展,可以做的更有趣,更具有產品氣質,甚至可以代入更深層次的動效。

          例如東家·守藝人APP,專門售賣各種手藝人的親手制作的各種藝術品,面向的對象是喜歡傳統文化的人群,在這樣的背景下東家結合宋體的筆畫(筆畫拆分)把圖標設計的更加傳統、古樸,創造出具有東方韻味且極具形式感的圖標設計。



          6.2純圖標

          采用純圖標展示形式的產品比較少見,純圖標樣式的最大缺點就是識別性低,沒有文字說明會導致用戶很難找到自己想要去的位置,也不明確自己所處的狀態。所以我們如果要設計純圖標形式,那么必須要考慮到圖標的識別性問題,間接的舍棄掉圖標更多的延展性,讓圖標變得更規矩。(識別性的提升我之前寫的圖標文章中提到過,主要可以從大眾認知隱喻與真實世界映射兩個方向出發去提升)

          使用純圖標樣式的產品特征:產品單一、領域垂直、小眾化、用戶群體接受度高。即使滿足這些條件下產品使用純圖標標簽,用戶第一次使用往往也是比較迷茫,需要等用戶熟悉后才會得到好轉,所以一定要慎用。除此之外不太建議用于電商、視頻、學習、社交等領域。

          對于我們設計師來說使用純圖標樣式的產品中最為熟悉的就是花瓣了。



          6.3純文字(部分含標識)

          采用純文字展示形式能夠更直觀的讓用戶進行操作,遵循簡單易用的原則。適合用戶群體跨度較大的產品,多用于直播類、內容類、簡單工具類APP中。缺點也顯而易見,圖標樣式比較單一,沒法加入更多趣味化、具有產品特性的元素到標簽中。

          采用純文字展示形式的產品有很多,最熟悉不過的就是抖音,抖音的標簽默認狀態下采用了純文字形式,選中狀態則把文字高亮顯示,并且底部加入了圓角矩形,對于用戶群體跨度較大的產品,這樣的展現形式再好不過了。(抖音在途中改用過圖標+文字格式,不過后面也放棄了,我當時用著圖標+文字類型的抖音,的確感覺太奇怪?。?/span>



          6.4舵式

          舵式標簽可以看為底部標簽式導航的一種變體。它在后者的基礎上,突出強調了一個標簽并且放在中間的位置,樣子看起來像攢了一個舵,所以取名為舵式標簽。一般舵式標簽的顏色、大小等視覺表現會被設計得和其他普通標簽有所差異,通過視覺對比的方式吸引用戶關注。舵式標簽通常和產品框架體現無關,大多數應用程序使用舵式標簽是用來承載系統功能。起初是因為社區類APP為了激勵和方便用戶隨時隨地地輸出UGC內容,所以把觸發用戶創作/發布的功能按鈕放置在標簽欄中。

          因為舵式標簽可以很好地承載產品的重要功能,而被許多的應用程序設計所采用,經過越來越多的應用采用舵式標簽,使用的形式也越來越多樣,它現在并不再單一地用于承載產品功能,而是配合營銷場景、付費場景,給產品的變現、拉新賦能。拼多多就把它拉新的主要入口作用到了舵式圖標上,并且為了讓圖標更加顯目,甚至把圖標做成了輕質感的形式體現,同時也通過2像素的線性圖標減弱其他4個標簽的引導性。




          七、賦予標簽更多內容


          標簽欄不僅是向用戶展現產品框架的關鍵控件,還可以貫穿整個產品的商業價值的體現,它是連接著整個產品最重要的頂層信息。如果想要讓標簽變得更加豐富,想要標簽內容中含有更多的情感需求、 商業需求、運營需求,那么我們可以重點從這兩個層面考慮:視覺層面、交互層面。


          7.1視覺層面

          在視覺層面上我們可以迎合用戶的偏好與期望,通過豐富視覺體驗的方法來增加內容的觀賞性,這樣不僅能夠很好的向用戶傳遞著產品調性還能吸引用戶關注以及引導用戶進行操作。


          7.1.1設計裝飾性圖標

          裝飾性圖標僅僅是用來提升整個界面的視覺體驗,通過豐富視覺體驗的方法來增加內容的觀賞性,這樣不僅可以吸引并留住用戶,還可以讓整個用戶體驗更加積極。


          &整體裝飾圖標

          整體裝飾性圖標的出現往往是為了滿足情感需求與商業需求,整體裝飾圖標并不是一直存在的,它的特點是季節性與周期性,并且它并不具備任何功能性。

          從情感需求出發設計裝飾圖標:例如世界杯火熱進行時,優酷為了滿足用戶的情感需求,就把標簽欄的圖標全部替換為帶有世界杯元素的圖案,讓用戶與其產生情感的共鳴。



          從商業需求出發設計裝飾圖標:現在的年貨節,之前的雙十二、雙十一、618等,每到節日促銷活動的時候,很多電商應用都會換上裝飾性圖標,例如一號店,在過年前就把標簽欄圖標全部改為含帶過年氣息的元素,提前來預熱活動,引導用戶消費。



          &單個裝飾性圖標

          單個裝飾性圖標的出現大部分都是為了滿足運營需求,運營為了推出某個活動或功能,往往會單獨裝飾某個圖標的設計視覺,以便于提高圖標的引導性,最直接的例子就是我剛才提到過的拼多多。



          7.1.2加入品牌基因

          我們可以在標簽中加入更多的品牌基因,讓其與品牌產生聯動性,這一形式是大部分應用程序都在做的,我們可以從這6個層面加入品牌基因:品牌顏色、品牌LOGO、品牌元素、品牌名稱、品牌性格、品牌吉祥物。


          &品牌顏色

          色彩是圖標設計中重要的構成元素之一,我們可以直接提取品牌色作為圖標設計視覺元素。例如站酷,站酷的品牌色是黃色,標簽欄的圖標(選中狀態)就提取了品牌的黃色,讓其與品牌調性高度一致。



          當然品牌顏色除了可以直接用外,還可以在提取時適當調整色彩的飽和度、明度,做更多的形式變化。例如懂車帝,就在原有的黃色基礎上做了些許調整,圖標采用黃色透明漸變的處理方式,在與品牌顏色呼應的同時,使得整個圖標更加精致、有活力。



          &品牌LOGO

          提取品牌LOGO是最常用的使用方式,我們從品牌中提取出來的圖標一般運用在APP首頁標簽。因為首頁是APP中最重要的頁面,也是進入APP默認的頁面,把首頁圖標替換成品牌LOGO,能反復加強了用戶對App的LOGO印象,這樣不但使App內外形成了視覺聯系,同時也二次傳遞了品牌形象。例如大眾點評,它的首頁標簽就用了品牌LOGO,同時也使用了品牌顏色。



          &品牌元素

          我們可以在品牌中提取它識別性較強的局部元素作為圖標。例如虎牙直播,它就提取了品牌卡通形象的外輪廓作為首頁圖標。



          品牌提取的元素并不只是所見到的品牌視覺形象,還可以提取與品牌內容強相關的元素。例如QQ音樂,它并沒有把它的品牌LOGO直接放于其中,而是通過大眾所熟知的音符作為首頁圖標。



          &品牌名稱

          如果你的品牌還不為大眾所熟知,那么為了強化用戶對品牌名稱的認知,可以把品牌名稱直接放入標簽欄中。例如MONO,就把它的名稱分為四個字母分別放在了4個標簽內,需要注意的是這類圖標不能單獨出現,因為它本身不具備識別性與引導性,必須配合文字一起出現,這樣才能讓用戶理解標簽的真正功能,我們不能為了設計而設計。



          &品牌性格

          圖標風格可以與品牌性格保持一致,一套帶有濃厚品牌感的圖標,會讓人記憶猶新。例如:每日故宮,它的圖標就非常具有特色,結合了品牌的性格以及定位,加入了眾多的古代中國元素,整體看起來有股濃濃的古韻之風。



          &品牌吉祥物

          現在大部分品牌都會含帶吉祥物,我們可以在設計圖標時提取吉祥物的外形,把它用于產品的標簽中。例如盒馬,它就把吉祥物做為了底部標簽,不過需要我們注意的是如果吉祥物的風格與我們的圖標風格差別較大,我們就需要對它做風格化的處理,不然看起來就十分突兀。(盒馬對吉祥物做了輕質感的風格化處理)



          7.1.3讓用戶自定義

          讓用戶自定義的標簽現在越來越常見,而每個產品對其思考的層面也都有所不同。自定義標簽往往出現在個人中心,它會根據用戶上傳的頭像或用戶的捏臉生成圖標。


          &用戶頭像

          目前市面上很多APP都把用戶上傳的頭像作為了個人中心標簽展示,例如我們常用的百度網盤就采用了此方案,當用戶注冊未上傳用戶頭像時,會默認顯示系統標簽,當用戶上傳完后就會顯示用戶頭像,并且如果你是會員,還會把會員標示顯示在標簽的右上方,彰顯會員用戶的尊貴性。

          我們可以很明顯的發現百度網盤的底部標簽默認狀態為線性圖標,而個人中心不管默認狀態還是選擇狀態都為面性圖標,所以如果你想要加強個人中心的引導性,那么可以采取此方案。



          &捏臉

          捏臉功能作為SOUL的一大特色,捏臉的虛擬形象賦予了真實人格屬性,加強了社交的傳播性,所以SOUL決定把用戶自定義的捏臉放于個人中心標簽中。


          7.2交互層面

          除了對標簽做視覺的提升外,我們還可以對其加入合理的交互效果,一方面可以提升用戶在使用產品過程中的樂趣,另一方面還可以為用戶提供更多便利,從而增強用戶體驗。


          7.2.1標簽功能切換

          在不同的狀態下點擊標簽的功能也不一樣,一個標簽可承載2到3個功能,可以滿足不同狀態下的用戶需求。


          &承載2個功能案例

          SOUL的廣場標簽(進入選取頁+刷新)

          SOUL的廣告標簽承載了2個功能,當你處于其他標簽時,點擊廣場標簽則直接進入到廣場頁面;當你處于廣場頁面中時,再次點擊標簽則會刷新整個頁面。



          有貨的發現標簽(進入選取頁+上傳圖片)

          有貨的發現標簽也承載了2個功能,在設計上運用的非常巧妙,當你處于其他標簽時,點擊發現標簽則進入到發現頁面;當你在發現頁面時你的發現標簽則變為了上傳圖片標簽,可以點擊上傳圖片。



          &承載3個功能案例

          淘寶首頁標簽(進入選取頁+刷新+置頂)

          淘寶的首頁標簽同時承載了3個功能,當你處于其他標簽中,點擊首頁標簽則直接進入到首頁頁面;當你在首頁頁面第一屏時,你點擊首頁標簽則會刷新整個頁面;當你滑過3分之1屏時,首頁標簽的功能則變為置頂。所以在不同狀態下首頁標簽也會具備不同的功能,并且每種狀態下的標簽樣式也是不同。



          愛奇藝首頁標簽(進入選取頁+到達指定位置+置頂)

          愛奇藝的首頁標簽也是同時承載了3個功能,不過它與淘寶有些許不同,愛奇藝并不能刷新頁面,而作為替換的功能是直接到達指定位置“猜你喜歡”。



          7.2.2觸覺與聽覺

          我們做的設計不要僅限于視覺所看到的,還要考慮到所觸摸的、所聽到的,我們可以利用觸覺與聽覺去輔助用戶確認自己的選擇,當然我們一定要合理利用,反之則會讓用戶感到十分反感。


          &觸覺

          西瓜視頻與今日頭條在點擊標簽欄圖標時手機就會發出輕微的震動,給予了用戶很好的點擊反饋。



          &聽覺

          SOUL點擊星球標簽時手機就會發出戀愛鈴聲,在SOUL的產品報告中,SOUL主要面對女性用戶,女性用戶約為男性用戶的2.4倍(女人更偏感性),并且它的主要需求是滿足測試、匹配、交友,所以戀愛鈴聲能夠很好的引起用戶的情感共鳴。不過鈴聲有利有弊,當你在特定場景下使用SOUL時,點擊到星球標簽周圍人也都能聽到戀愛鈴聲,實屬尷尬,所以我在特定場景下使用SOUL時都會默默的關掉聲音。



          7.2.3標簽動畫

          精彩的圖標動畫,對整體的設計具有畫龍點睛的作用,降低標簽切換時的枯燥感,提升操作的愉悅度和期待感。甚至可以通過 tab 的動畫設計給用戶傳達出整個 APP 設計的品牌及理念。標簽動畫往往都比較簡單,主要有:縮放、旋轉、顏色過渡、位移、抖動、填充、線性軌跡、結合容器、元素介質等。接下來我們來看看SOUl、虎牙、汽車之家是怎么做的。


          &SOUL-彈性縮放+結合容器+線性軌跡

          SOUL的底部標簽欄運用到了彈性動畫、結合容器以及線性軌跡。帶有彈性縮放的標簽反饋,讓整體的設計更加具有趣味性,相比線性縮放也更有視覺沖擊力。圖標的運動規則:先從 0 放大到最大(數值根據實際情況設定),然后再回彈至正常大小。除了彈性動畫外,它還結合了容器的元素對內部進行了顏色的替換以及單線條的軌跡動畫。這樣的處理不僅趣味性十足,還強化了選中當前狀態,整體標簽切換的一致性也較高。



          &虎牙-抖動+趣味表達

          虎牙一直是我比較喜歡的直播平臺,它的底部標簽動畫也是非常值得借鑒,運用到的動畫形式是抖動與趣味表達。抖動是通過圖標的左右、上下快速位移或旋轉形成,整體的動畫效果節奏較快,具有一定的速度感,使整個標簽切換的情緒表達較為俏皮、可愛。除了抖動外還在切換過程中代入了更多小元素的趣味表達,賦予了圖標更多的性格,對我們的設計進行再升華,從而提高整體設計的質感和趣味。



          &汽車之家-結合容器+細節晃動

          因為用戶群體的不同,汽車之家在標簽動畫的設計上也相對簡單、嚴謹,它的動畫形式主要是結合容器與細節晃動。選中效果由線切換為面,并加入了品牌底色,這樣能夠清晰的給用戶傳達當前頁面。并且為了不使整體的切換效果變得生硬,在切換過程中采用了透明度與彈性縮放,讓其過渡的相對柔和。在細節的處理上也是非常用心,每個圖標都帶有笑臉的形狀,間接的給用戶傳達“笑臉”信息,在選取標簽時內部形狀會輕微晃動。整體來看汽車之家的標簽動效雖然偏向嚴謹,但是在細節上也給予用戶傳達了更多的情感。




          作者:黑獅力    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          中后臺加載-被忽略的體驗細節

          純純

          undefined

          大部分設計師應該都遇到過這種場景:在做設計前并沒有考慮到加載,但在進行還原度走查或者驗收的時候才發現,由于某些頁面數據請求較慢,導致在頁面中會出現空屏狀態。這時才想起需要在這些頁面添加動畫來承載頁面的過渡。

          歸根結底是因為設計師在設計過程中,更多關注頁面本身,而很少去思考頁面在呈現過程中何時會出現白屏狀態,都是后知后覺去補充完善。加載作為必備的一環,卻總是被忽略。目前很多B端產品在這方面都沒有一個系統合理的規劃,導致系統的加載體驗缺失或者不統一。

          因此希望這篇文章能夠講清楚中后臺加載出現的場景和規則,對需要深入了解加載以及在制定加載規則的設計師朋友們帶來一些幫助。


          undefined

          加載通俗來講就是用戶從觸發頁面操作,到頁面最終呈現的一個等待過程。這個過程始終存在不可避免,只是時間有快有慢??斓募虞d只需要幾百毫秒就結束,但慢的加載就可能會達到幾秒甚至十幾秒,讓人產生焦慮。

          而為什么會有如此大的差距,這就需要從頁面渲染的整體過程來進行說明。當我們從瀏覽器輸入網址,再到我們看到完整頁面的這個過程,網頁到底經過了哪些步驟呢。經過資料查詢和與前端確認,整體過程可以闡述如下:

          從這里我們可以看到頁面的呈現是程序經過了一系列操作才最終呈現到我們面前的。在這里可以將其簡化為四個階段:用戶操作功能→頁面向服務器發送請求→服務器接受并返回數據→頁面呈現。

          而決定整個頁面加載快慢的就在于請求與數據這里。一般我們可以將頁面的數據分為2種類型:靜態資源和動態資源。


          靜態資源:前端的固定頁面,這里面包含HTML、CSS、JS、圖片等等,不需要查數據庫也不需要程序處理,直接就能夠顯示的頁面??梢院唵卫斫鉃槟?strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">頁面上的固定字段和結構。這種頁面一般加載速度比較快,比如我們看到的展示型官網一般都是前端寫好的靜態資源。


          動態資源:而對于頁面上的動態變化的,需要程序處理或者從數據庫中讀數據,能根據不同的條件在頁面顯示不同的數據,比如表格數據、統計數據等稱為動態資源,這種都需要調用后臺接口來進行返回,因此加載速度相比于靜態資源就會更慢。

          而它們的區分點用下圖可以表示:

          可以看到靜態資源基本是直接返回,而動態資源還需要連接數據庫調取資源,尤其是在遇到數據庫調取較慢時就會花費更多時間。而我們加載緩慢的大多數問題,也基本上更多出現在動態資源的獲取上。


          undefined

          當我們清楚加載形成的原因,接下來要做的就是在需要加載的地方對其進行處理。這也是在設計過程中我們經常遺漏的地方。我們先看一下目前常見的2種處理方式:「默認處理」和「使用進度指示器」


          2.1程序默認處理方式:直接顯示

          當我們對加載過程不進行任何處理時,程序就會以默認的方式進行-即根據資源獲取速度一步步呈現。可以看到嘿店后臺的處理過程就是一種默認處理方式:

          但是這種做法就會導致我們在頁面加載過程中會出現空屏狀態,比如上圖切換到概覽時出現了空屏狀態,尤其是當遇到了網絡緩慢的情況,會造成在加載時頁面停留在當前狀態下不動,往往會讓用戶陷入到「系統故障」的錯覺。


          2.2通用處理方式:進度指示器

          這個名詞說起來可能比較陌生,它指代的就是我們平時經??吹降募虞d動畫、骨架屏或者進度條等。進度指示器的作用就是告知用戶當前頁面并沒有故障,而是正在讀取數據。

          通過添加進度指示器來對空屏狀態進行承載,能夠減輕用戶的焦慮感。目前很多B端產品更通用的形式是添加動畫來過渡。

          但是在體驗過程中很容易發現一個問題,就是在產品的整體加載過程中,某些空屏狀態是沒被加載動畫覆蓋到的。當這些沒被覆蓋到的加載過程過長時,很容易出現焦慮感。比如神策數據在左側列表切換時的加載過程就沒被覆蓋:

          想要更全面的把加載動畫覆蓋到所有頁面,我們就需要弄清頁面在哪些狀態下會出現空屏狀態,從而制定統一的加載動畫規則。這個問題可以先思考一下,后面解答。


          undefined

          在制定統一加載規則之前,我們需要明確一個概念,就是加載的模態與非模態。


          3.1模態加載

          模態加載的含義就是當前加載會中斷用戶其余操作,用戶在這個期間只能等待加載而不能進行其他操作(有的模態會提供取消按鈕)。如果你的頁面涉及到以下2種情況,可以考慮使用:

          1.用戶當前的操作本身不能與其他操作同時進行。比如系統更新,或者工具類的導入導出相關操作,我們只能等待更新、導出完成才能繼續進行后續的操作。這時候可以使用模態加載來承載,比如protopie的導入操作;

          2.當用戶進入到一個全新的頁面時,這個時候頁面什么都沒有,我們只能等待頁面加載完成才能進行后續的操作,因此在這種情況下也可以采用模態加載,比如我們剛進入Asanan產品頁面看到的首屏加載動畫:

          除了上述2種情況外,你也可以根據你的業務場景來進行模態加載的選擇,但建議是盡量少用模態加載,其會對用戶的打斷和干擾性比較強。


          3.2非模態加載

          非模態加載的話,這種加載通常只會出現在需要加載的部分,不會中斷用戶其他操作。對用戶干擾比較小。比如我們常見的功能切換加載、數據篩選加載等都屬于非模態加載。

          非模態加載相比于模態加載會更輕量,因為用戶隨時都可以打斷也不會影響到其他操作。因此建議在大部分情況下都可以使用非模態彈窗來進行承載,比如飛書的左側欄切換操作:


          undefined

          接下來我們進入正題,在這里我從加載的角度將網頁整體加載過程分為呈現加載規則操作加載規則。

          我們先談頁面呈現規則。前面已經明確加載產生的原因和類型后,我們就可以開始為我們的產品制定統一的加載規則,以保證后續頁面加載的一致性。


          4.1 頁面的加載過程拆解

          在拆解頁面的加載過程前,我們進一步闡述之前提到的渲染原則,從前文中提到最后會經過「解碼」和「渲染」2個步驟,這也是決定了我們看到的頁面的最終呈現順序:


          1.頁面渲染順序

          我們看到的頁面是由HTML、CSS和JavaScript來進行構成的。HTML可以看作最簡單的框架、CSS則是賦予了框架樣式,JavaScript則是負責頁面中的交互(當然JS也可以控制樣式,這里只描述主要功能)。

          頁面在「解碼」階段,拿到的HTML文檔會被解碼為DOM樹,同時將CSS文件解析成CSSOM,這兩者結合后一起渲染頁面,JS一般是在最后渲染。所以邏輯上就是框架和樣式一起渲染,最后渲染交互。視覺的角度來講就是先看到元素樣式,然后才能進行對應操作。


          2.頁面呈現的視覺順序

          由于瀏覽器渲染順序一般會根據代碼的順序進行渲染,而代碼在頁面中的構建一般也是按照頁面的上下和左右的順序去寫的,因此我們看到的頁面的視覺呈現順序也是遵循從上到下,從左到右。

          所以幾乎所有的產品都是先看到頂欄,然后左側邊欄,然后其他內容。因此我們可以通過這個原則來拆解對應的頁面,我們按照頁面常規結構可以將其分為三個加載部分:頂欄、左側導航欄、內容區域。而其加載順序如圖所示:

          當知道對應頁面的渲染順序后,我們就能夠清楚在頁面渲染的過程中哪些地方會出現空屏了。因此將頁面加載過程拆解為如下順序:

          undefined

          我們的加載動畫需要承載的就是上述這些白屏的地方,從而將加載細化為三種場景的拆分:全局加載+局部加載+內部加載。如圖所示:

          undefined

          通過這三種加載就可以涵蓋頁面所涉及到的所有部分。接下來詳細闡述一下這三種類型的定義和用法。


          4.2 全局加載

          如上圖所示,全局加載的目的是為了覆蓋用戶從輸入網址到頁面的資源渲染的這個中間過程的空屏狀態而存在的。而這種狀態會涉及三種場景:

          1.通過網址進入到一個新的頁面時;

          2.通過鼠標右鍵或網頁刷新按鈕對該頁面刷新時;

          3.通過頁面操作需要新開頁面時。

          該全局加載的動畫構成為:

          1:覆蓋整個頁面的加載,由純白色+加載動畫構成;

          2:加載類型為模態加載,因為用戶在這種頁面狀態下并不能進行其它操作。

          undefined

          但在這里我們需要注意全局加載的開始和結束時間:

          開始時間:當進入頁面時立即呈現加載動畫;

          結束時間:當頁面加載出頂欄的時候,此時停止加載。


          為何要這么處理結束時間,原因其實圖中已經給出了。這里再解釋一下原則:只要有頁面資源返回,我們的全局加載動畫就會結束,隨后啟用局部加載來承接后續的狀態,避免用戶在當前狀態長時間等待。而頂欄在一般情況下都是最先加載出來的,所以以頂欄出現作為結束全局加載的標準。當然如果你的結構沒有頂欄,可以以左側欄來作為結束標準。


          4.3 局部加載

          局部加載是用在頁面整體框架加載的過程中,承接在全局加載后。局部加載的使用場景可以概括如下:

          1.頂欄加載結束后,用在剩余框架的加載效果(具體體現為左側邊欄和右側內容區域);

          2.對于涉及到局部頁面的切換操作都會進行局部加載(比如左側邊欄的切換);

          光看文字可能不是特別清晰,在這里可以舉一個動態的例子來幫助理解:


          上述展示的是在頁面呈現的時候一個完整的局部加載。在這里需要注意的是我們首次渲染和第二次渲染在加載動畫上是可以有區分的,可以通過程序控制讓這種加載動畫只在初次加載時出現。


          第一次加載時出現是因為我們需要有加載動畫來承接框架首次加載的空屏時間:

          但第二次的時候由于有緩存(緩存會加載我們的靜態資源,能夠讓我們的頁面框架在第二次時更快顯示),這樣在讀取框架時基本不需要加載,我們就可以通過程序來直接去掉其中的局部加載動畫,直接顯示框架來進行呈現。

          undefined

          目前在飛書和釘釘等B端產品后臺均采用了這種處理方式。可以看到圖中我在第一次切換到角色管理時是有碰撞小球的局部動畫存在的,而第二次再次進入時則直接出現框架。這樣既能夠保證加載動畫能夠覆蓋所有的空屏狀態,又避免了局部加載動畫的頻繁出現。


          4.4 內部加載

          內部加載是用在頁面內部不同模塊數據間的加載。當框架都已經加載結束,但某些數據由于接口比較慢,此時還沒有返回,這時我們就可以用內部加載來進行承載。這應該是我們更常見的加載情況:

          在進行內部加載的時候,需要注意,內部加載的時候一般標題是存在的,因為標題基本都是固定的,所以能夠很快被拉取。比如Zoho的內部加載,加載時標題已經出現了:

          通過這三種類型的加載,能夠覆蓋從用戶輸入網址,到頁面渲染完成這個頁面呈現過程中的全部加載場景。


          undefined

          說完頁面的呈現規則,再談頁面操作加載規則。頁面的操作其實對應的是頁面控件的反饋。而我們的常用的控件比如有按鈕、tab切換等。我們不僅需要考慮控件本身的加載狀態,而且需要考慮到控件影響的其他頁面范圍。


          5.1需要考慮控件本身加載

          控件的加載并不是隨時都需要,我們要根據實際的數據量大小及業務場景來選擇性使用。目前我們需要考慮的控件及其加載狀態主要有如下:

          undefined

          比如圖中的按鈕的加載狀態是必備的,在很多場景下都會用到。但是下拉列表和級聯列表,在一般的場景下都不太需要進行加載,當遇到列表中的數據特別多或者調取特別慢時就可以考慮為其加上加載狀態。


          5.2當控件操作會影響到頁面其他元素

          這種控件比如日期篩選、表格篩選或者保存等操作,當你切換篩選條件后所有與其相關的頁面元素都會發生變化。在這種情況下我們需要考慮到被影響元素的狀態。目前的設計實現上有兩種做法:

          1.被影響元素不可被操作,且該區域有遮罩+加載動畫來覆蓋;

          2.被影響元素可進行操作,無任何動畫,但操作并不會影響之前提交的結果;


          這兩種方案一種是利用遮罩防止用戶無效操作,另一種則是保持了足夠的操作自由性。個人在這里更傾向于處理方式1,我認為被影響的元素是需要有遮罩+動畫的,來避免用戶在加載期間對其進行無效操作,比如示例中方案2后面修改的名稱是沒有被系統保存的。

          需要注意的是如果在產品中使用方案1,我們的遮罩區域只需要覆蓋被影響的元素就可以了(保存這種可以將按鈕一起覆蓋),比如通過篩選導致圖表數據發生變化,這時只需覆蓋圖表區域,而不用覆蓋篩選區域。這樣的好處是當某些篩選數據出現加載過慢問題時,用戶可以通過切換篩選項來打斷當前加載。

          上述描述的操作都是針對于當前頁加載。當控件導致頁面刷新或者跳轉時,則整體遵照頁面呈現的規則進行加載。


          undefined

          上面闡述的加載已經完全能夠覆蓋我們頁面整體的加載,但是還是需要提及一下骨架屏和進度條這兩種加載形式。

          undefined

          先說骨架屏。實際上骨架屏的使用效果體驗是優于加載動畫的體驗的(骨架屏的加入使用會讓用戶感覺網頁出現的更快)。那么為什么在大部分的B端業務頁面中沒被用到呢,主要有2點原因:

          1.每種骨架屏都需要進行對應的定制開發,需要與加載后的頁面框架保持一致,這會增加了開發成本。

          2.中后臺的業務界面對來說固定結構的頁面會較少,這對于骨架屏的使用機會就相對較少。

          個人認為在前期可以以統一加載體驗為主,在后期業務相對成熟后,可以針對固定結構,通過骨架屏的使用優化加載體驗。


          再說進度條。我理解的進度條的使用條件:對于加載時間較長的規定場景可以考慮用進度條來承載,比如我們常見的游戲加載中進度條就用得比較多,因為游戲一般資源比較大。還比如figma在進入設計文件的過程中也采用了進度條加載也是因為設計文件可能會很大。

          進度條在特定場景下能夠緩解用戶焦慮,讓用戶知道進展。但進度條在多數情況下都抓取不到程序的真實進度,這也會導致有時候我們看著加載到99%,那最后的1%遲遲加載不出來的的原因。目前很多中后臺產品對于進度條加載使用相對較少的原因,很大程度是沒有那種加載特別長的場景。


          因此這兩種加載場景的使用會更加定制化,如果需要使用請根據具體的業務場景來進行選擇。


          如果把加載動畫等比作頁面加載的外在,那么緩存和加載策略則是頁面加載的內核,合理使用緩存和加載策略可以從根本上提升我們頁面的加載速度,讓用戶更快速地看到頁面。


          7.1 關于頁面的資源緩存

          大家肯定聽過緩存這個概念,前后端都可以使用緩存。緩存就是數據交換的緩沖區(稱作Cache),是存貯數據(使用頻繁的數據)的臨時地方。在這里主要講一下瀏覽器緩存:

          undefined

          從這張圖可以看出,服務器在請求數據時,會進行緩存的判斷,如果有緩存則首先讀取緩存,如果沒有則從服務器中拿取。調取緩存會在很大程度上提升頁面的加載速度,縮短了從服務獲取數據的時間。通常瀏覽器會主動對頁面的靜態資源進行對應的緩存,這也就解釋了我們第二次進入頁面會比初次進入頁面時加載快的原因。


          但程序其實也可以對動態資源(也就是需要從數據庫等拿到的資源)進行緩存的,并且可以設置緩存的過期時間(比如設置過期時間為1小時,那么1小時過后就會重新拉取新資源)。對于某些動態資源拉取過慢并且更新頻率不高的我們可以采用動態資源緩存的策略,從而提升整體的頁面加載體驗。


          7.2 加載策略的正確使用

          現階段我們常用的主要有下列6種加載策略:

          加載策略的本質就是通過對應的加載設置來縮短產品與服務器交換數據的時間,接下來我們詳細看一下每種加載策略的具體使用策略:


          7.2.1懶加載

          懶加載是當內容落入視窗被用戶看到時,才會進行加載。這種比較節省資源和減輕服務器壓力。對于當前頁面內容很多的可以采用這種加載策略。而這種加載策略的設計,能夠讓用戶更快看到當前屏幕內的內容,減少等待時間。

          比如蘋果官網的加載策略就采取了這樣的一種方式。我們可以看到右側的資源只有在我們向下滾動出現在屏幕中時才會進行對應的加載,這樣能夠保證用戶在進入網頁第一時間看到首屏內容,并且用戶幾乎感知不到這種加載延遲。


          7.2.2預加載

          預加載是在頁面空閑的時候就把用戶即將用到的資源加載完存到緩存中,等用戶需要使用時,通過緩存直接調用呈現。比如用戶在看A頁面的時候,就可以通過預加載來準備用戶需要的B頁面資源。當用戶需要B頁面的時候,立刻就可以呈現。

          比如某些頁面在實際中加載比較慢,這個時候就可以考慮是否用預加載的策略來提升網頁整體加載速度。比如知乎的視頻和文字在都進行了對應的預加載。即使當你處于斷網狀態(圖中我將頁面網絡切換為斷開狀態),可以看到依舊可以點擊全文進行查看和視頻的部分預覽。


          7.2.3分步加載

          當頁面中有文字和圖片時,優先加載占用網絡資源小的,比如文字資源,然后再進行占用資源較大的加載,比如圖片資源。通過分步加載也能有效減少頁面等待時間。比如大眾點評等圖片很多的網站往往會采用這種加載策略。


          7.2.4分頁加載

          分頁加載是我們目前很常見的方式,比如我們常用的百度和谷歌等搜索引擎都是使用的分頁加載,分頁適用于數據量比較大的內容,比如表格數據或者大數據搜索場景可以使用。

          分頁加載可以理解為當前獲取到100條數據,但是將100條數據分別拆成5頁每頁20條數據提供給用戶,這樣也可以讓用戶減少等待時間:

          在目前還有一種滾動分頁的加載,就是不提供視覺上的分頁,而是當用戶進行滾動時,自動加載一定數量的內容,這樣從用戶的視角看就是一個連續不間斷的數據展示。比如一些資訊類的網站就是采用的這種加載策略,有的也把這種滾動分頁的方式稱為自動加載。


          7.2.5延遲加載

          這里講的延遲加載更多的是一種防護加載機制,一般延遲設置的時間為300ms。這里的延遲加載有2種使用,第一種多用于搜索,通過延遲加載能夠讓用戶更好進行連續輸入,避免搜索結果被高頻率刷新,同時緩解服務器壓力。如下圖,可以看到我在輸入1后會有個延遲才出現加載列表,并且我在連續輸入12306的過程中是沒有對結果進行更新的,當我輸入完后才更新。

          第二種則是通過延遲加載可以更好防止反復操作。當用戶在同一組件上面進行切換時,如果該操作小于300ms,則只記錄最后的點擊操作。這種情況可以用在我們的表格翻頁和開關等狀態上,防止用戶瘋狂點擊導致數據反復請求和屏幕閃爍的情況。我們可以通過下面這個組件演示例子來進行對應的感知:

          延遲加載更多用于上述2種場景,對于其他情況的加載,直接加上就可以了,并不需要刻意設置延遲。


          7.2.6后臺加載

          這里想要表達的含義是當用戶在操作后,客戶端立即反饋操作成功,然后把請求放到后臺與服務器交互,這一過程用戶不需要了解,不需要等待。無論在什么網絡環境下你基本上都能操作成功。比如微信的朋友圈發布就是這樣的操作,即使你在斷網的情況下都能夠立刻發布,但實際上這個時候并沒有發送成功,還需要上傳到服務器后才你的朋友們才能看見。


          這樣的好處是用戶使用起來非常流暢,但是壞處就是,當操作不成功時,用戶并不能及時進行感知,仍然以為操作已經成功了。所以這種場景我們也需要根據場景進行對應的判斷和選擇。對于復雜的B端場景個人建議慎用或者不用這種操作,畢竟很多發布的功能會同時影響很多業務線。


          這里就拿微信的朋友圈發布來進行舉例,下方手機狀態都為斷網狀態,可以看到微信立即發布,而貼吧在這種狀態下提示網絡錯誤。

          通過這些加載策略的選擇性使用,能夠在特定環境下提升我們系統的整體使用體驗。因此我們需要對這些加載策略有一個比較全面的認識,這樣我們不僅知道加載慢的原因,還可以利用加載策略去提升頁面性能。



          在整體的加載過程中,別忘了考慮加載異常的情況。在通常情況下我們會我們會遇到網絡速度過慢或者突然斷網這兩種狀況讓頁面一直加載不出來,這時我們需要考慮對長時間的加載過程進行處理。

          通常做法是我們要對加載狀態有一個最長時間的限制,一般為加載不超過10s,超過最長時間后就進行異常狀態顯示(提示語+刷新按鈕)。這樣用戶可以選擇重新加載或者離開此頁面,而不是一直等待。

          在這里還想到一點,就是對于編輯頁面,我們應當加入網絡連接是否異常的判斷,比如當進入到編輯頁面后,如果遇到網絡斷開,需要在頁面的頂部加上常駐提示條【當前網絡連接斷開】,這樣用戶能夠及時進行察覺并修復。避免在無網環境下繼續輸入。這對于某些需要輸入很多內容且并不提供本地保存的頁面來講是非常有必要的。


          加載在設計中是非常容易被忽略的模塊,因為在大部分情況下網絡速度都較快,人們很難深刻地感受到加載過程。但加載卻在產品運行中起著不可或缺的作用。通過這篇文章想要告訴大家的有幾個點:

          1.我們需要明白加載為什么會出現,這個過程是怎么樣的;

          2.加載的通用處理手段是怎么樣的,非通用處理方式有哪些;

          3.通過緩存和對應加載策略能夠讓頁面加載速度有本質上的提升。


          這樣當我們在頁面上遇到加載速度慢的問題時,在為其加上動畫承載過渡的同時,還應該思考其加載緩慢背后的原因,是因為數據量太大還是加載策略的相關問題,是否可以將其進行懶加載或者分步加載,這時我應該去找前端或者后端如何溝通。從源頭上解決加載時間長的問題,才是后續產品設計過程中的長久思路。


          作者:蒙東東    來源:站酷

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加藍小助,微信號:ben_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系01063334945。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          日歷

          鏈接

          個人資料

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

          存檔

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