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

          首頁

          B端產品設計的潛規則

          資深UI設計者

          那些關注用戶體驗的人們經常問我一個問題:什么是B端的用戶體驗?它與C端的用戶體驗有何不同?作為一名過去5年多主要從事B端IT產品的設計師,在這里給大家講述一些我的想法。

          首先,B端產品通常有2種類型:企業內部產品(Internal Solutions)和企業對企業的服務產品(B2B)。

          企業內部產品的用戶體驗設計有一些獨特性:

           

          你的工作(可能)永遠與你的作品集無緣

          很遺憾,幾乎所有企業內部產品或項目都被嚴格的保密協議(NDA)保護著。

          絕大多B端項目都是為特定用戶提供的專門內部流程。這意味著除了那些每天盯著它用的用戶,其他任何人都可能不會看到你的設計。即使你設法獲得了將其放入自己作品集的權限,也需要抹掉所有敏感的數據才行。

          不過幸運的是,大多數有足夠能力來構建自己的定制IT解決方案的公司通常規模很大,而且它們的品牌可能帶有足夠的“影響力”,這樣,項目身價得以抬高,也能讓設計師進入面試的下一步流程。

           

          測試對象雖然意愿很高,但總是很忙

          設計企業內部所用產品的優點:你的未來用戶將會是你的同事們。因此,在進行可用性研究時,你無需擔憂任何層面的法律問題。另外,由于大多數內部項目都是為了優化和改進現有的工作流程,你的用戶往往會非常愿意配合你的調研工作。因為設計不當的產品讓他們的工作飽受折磨,因此盡早獲得反饋對他們來說是最有利的。

          但這其中的弊端是,由于你的同事們需要平衡全職工作,你很可能無法占用他們的寶貴時間。如果你能解決這個問題,他們通常會提供比您預期更多的反饋。

           

           

          關于B2B的一些潛規則

          您可能無法(完全)滿足最終用戶

          對于C端產品,如果太丑或不好用,消費者可以拒絕使用。而B端產品即使學習成本比較高,但企業仍然可以“命令”所有員工學習這些用于開展業務的專用軟件。

          B2B產品最終將出售給業務決策者,然后再推給(最終)用戶。他們更關心的是量化提升效率(efficiency)和安全性(security),同時預防錯誤(preventing errors)。大多數組織都在尋找一種解決方案來替代和/或優化現有流程。

          這并不是說企業軟件不應以用戶友好為目標,但通常情況下,只要能夠實現某些被企業視為至關重要的目標,其他能省則省。對底線(bottom line)的影響有時會成為最重要的因素。

          全球各大企業的用戶體驗設計領導者仍在爭奪一席之地,以證明優質設計的價值。不幸的是,許多企業的用戶體驗設計師只能在滿足業務目標、技術要求和用戶需求之間無奈徘徊。

          像在大多數項目中一樣,在企業領域里,如果可以證明更好的用戶體驗可以量化地提升生產率,比如可以節省金錢,這樣你就有了一個絕佳的機會和挑戰。

           

          被“鯨魚用戶”左右

          如果你在B2B領域工作,可能會很熟悉“鯨魚用戶(whales)”的概念。通常,他們是帶給我們最多收入的客戶,因此在某個特定產品的路線圖中擁有極大的影響力。由于較少的鯨魚用戶簡化了需求收集和確認過程,有時你的工作會非常順暢,但不幸的是,這也可能導致你忽視掉很大一部分用戶群體的意見。

          我們見過諸多“被需要”的功能看起來并不適合大多數工作流程的案例(因為這是鯨魚用戶的特性)。通常,決策只是為了“去執行”,因為銷售團隊已經在下一個版本中承諾了這一點,而這個核心客戶占產品收入的40%。這通常會使得產品對于其他用戶而言就有些隨機且不合邏輯了。

          通常而言,在設計師進入管理層之前,他們很難影響到銷售團隊等強大的利益相關者的決策。潛在的利益沖突無疑是需要整個設計團隊共同去面對的,大家需要平衡產品的長期愿景和立竿見影的“快速制勝”二者之間的沖突,以便為產品提供可拓展的設計和構建道路。

           

          企業總是在舊版系統上運行

          幾乎所有財富500強的公司都是通過并購而成長為龐然大物的。

          每一次的并購,都會將一個完全不同的系統和工作流程修補到現有的系統和工作流程中。很多開發于90年代的軟件仍在諸多大型公司中運行。盡管從概念上看,“整合一切(consolidate everything)”似乎很容易,但是協調數據庫和系統的過程著實很繁瑣,且需要足夠的時間。

          B端用戶體驗的大部分工作是將用戶從一套舊版(有時是手動)的工作流程中解放出來的艱巨工作。這涉及到對用戶目標及多個系統的深入了解,需要我們列出規劃,識別冗余和協同效應,然后將其與邊緣案例相結合,以檢驗它產出的結果是否與當前操作模式的產出一致(如果不能優化的話)。

          盡管過程并非總是如此艱難,B端軟件依舊比C端復雜得多,因為即使其概念是“從0開始做新系統”,其數據還是全部來自于一堆與之配套的舊系統。在系統級別上思考流程、提出正確的問題并有效記錄文檔的能力是此類項目中最有用的技能。

          我不是開發人員,所以我不知道我從Google里找的這張圖片是否是能夠準確展示典型的后端體系結構。

          我所知道的是,對于每個項目來說,開發人員都會創建一個外觀相似的圖表,該圖表展示了數據的來源和去向,它非常復雜,并且在提取,存儲和推送數據時可能受到一系列限制。

           

          條款和規則

          大多數企業或組織需要遵循一套嚴格的政策法規,并且通常受到各種管理要求的約束。

          常見的例子包括:法律/隱私要求(例如GDPR),國際化要求(例如日期格式,語言),無障礙(例如WCAG&ARIA),安全性等等。

          這些規則中的每一條都來自于某領域的專家、某類別的檢查清單(checklist)抑或是一系列更為模糊情景下的最佳實踐(這些實踐基于特定的方案和用例)。C端APP監管日漸常規化,同時,由于諸多企業或組織掌握的敏感數據極具貨幣價值,其受到的監管和審查也在不斷增加。

          當然,這個問題的答案顯而易見,你的確切問題是存在第三方解決方案的,但是由于某些規則或規定,你可能根本無法使用它。

          由于必須滿足很多這樣或那樣的標準,對于用戶來說,最終的設計往往不太理想,雖然乍一看可能并不明顯,但這也是歷史上許多政府軟件的設計看起來很蠢的原因之一。

           

          慢慢改進

          與上面的觀點類似,B端產品用戶的獨特之處在于他們對變化的抗拒心理。這意味著你需要認真思考工作流程改變后的結果,諸如使用不同的顏色,或是調整頁面內某個按鈕的位置等簡單變化。

          我們甚至還沒有談及信息架構。當你開始做信息架構時,卡片分類研究可能會告訴我們現有的導航設計是完全錯誤的,或是導航里的某些分類實際上應該嵌套到其他地方。不過你很快就會發現,當實際執行這些變化時,你將面臨巨大壓力。

          知道何時依賴自己的研究和專業知識,何時推進,何時放慢步伐是很關鍵的,這樣你才可以避免疏遠過多的用戶。畢竟對于這些用戶來說,過去幾年的工作流程已經根深蒂固,他們需要時間、資源和指導來學習或重新學習這些系統的使用。

          盡管他們可能會拒絕改變,但這絕對不代表我們作為UX專業人士就無法引領他們擁抱變化,我們要做的便是了解他們的痛點并在設計時時刻考慮到用戶的最大利益。

           

          信息密度

          許多舊版的B端app產品都有一個共同點,那就是它們的信息密度非常高。

          理想的解決方案也許是隱藏所有不必要的信息,僅顯示剛需的信息,但是“隱藏掉錯誤內容”的風險可能非常巨大,以致于不得不將其保留在不斷增加的的實體屏幕上。

          這就容易導致打包的屏幕設計極大增加了用戶的認知負擔。而這些負擔之所以被用戶“接受”,就是因為他們必須且只能“學習”如何使用該軟件來完成工作任務。

          此外,對于許多管理或監控類的產品,用并別模式查看信息進行比較和參考是非常重要的。復雜的非線性(Complex non-linear)的工作流使得界面設計更具挑戰性,因為許多選項都需要既可隨時訪問又不能妨礙其他操作。

          有個很好的例子:為什么Bloomberg(上圖)的UI看起來比Robinhood(下圖)復雜1000倍?

          結論便是,B端產品的界面里,需要犧牲留白空間以展示更多信息的情況并不少見,因為用戶經常需要查看更多信息以便完成更復雜的任務。

           

          你的機遇

          隨著公司或組織越來越依賴技術,B端產品的用戶體驗設計將成為許多公司的主要競爭優勢。

          如果你具有擁抱復雜性、平衡多個利益相關方觀點,并在約束內進行創新的能力,你便能輕而易舉的殺入B端軟件設計領域。

          隨著機器學習等諸多振奮人心的新技術出現,各種業務會帶著其龐大而雜亂的數據庫排隊等候。UX將站在如何產生有價值的見解的最前沿,以便弄清用戶想要從這些數據中獲取什么以及如何對其進行操作和訪問。

          雖然在很長一段時間里,dribbble(追波)上的精美視覺設計仍將占有一席之地,但更繁重的任務還會落在那些不起眼的B端設計師身上:比如設計電子表格、數據集、草圖原型、投入調查以及數小時與用戶和利益相關者的交談和測試。

          最終出現在用戶面前的內容可能并不完全整潔和簡單,但請你相信,在成為備受矚目的明星B端產品前,其每一處基準點都經過了UX設計師的嚴格審查。我們的用戶已經全力以赴地使用這些產品努力工作,我們的產品也通過清除一些障礙來減輕用戶的負擔,這已經很不錯了。

          翻譯:April.H  審校:戴貓子 |   UXRen翻譯組 #366譯文
          作者:Yichen He
          原文標題:《Designing for enterprise vs. designing for consumers》

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

          高精地圖開啟量產博弈

          資深UI設計者

          高精地圖是自動駕駛的必要支撐,高精地圖數據的創建、使用、更新與分享可能會帶來全新的商業模式。本文作者梳理了高精地圖的行業發展情況以及當前存在的問題,并對其發展前景進行了展望,一起來看看~

          乘著自動駕駛的東風,國內高精地圖行業逐漸進入發展的快車道。在L3級別自動駕駛技術的推動下,高精地圖技術在無人駕駛位置感知、路徑規劃等方面的應用愈發廣泛。

          隨著高精地圖行業的快速發展,布局該領域的企業,都想要通過規?;慨a來爭奪市場。在此背景下,高精地圖市場的量產博弈也愈演愈烈。

          01 高精地圖黃金發展期來臨

          自2013年BAT開啟地圖大戰之后,國內數字地圖產業就開始逐步興起。近幾年AI、大數據、衛星定位、自動駕駛等技術的爆發,更讓高精地圖在數字地圖市場中的主流地位愈加凸顯。

          比如在市場方面,2020年智能汽車行業產銷量的暴漲,進一步打開了高精地圖的市場需求。例如,在L3級別及更高級別的自動駕駛技術應用中,高精地圖具備的環境信息數字化能力,可以將高速路等場景的地圖信息直接傳達給智能汽車,實現部分替代激光雷達的作用,能夠極大地節省自動駕駛技術的應用成本,進而推動自動駕駛的商業化落地。

          在技術應用方面,衛星定位系統的進步,也為高精地圖行業發展提供了強大動力。近幾年來,隨著格洛納斯、GPS、北斗等定位系統技術不斷升級進步,目前民用導航誤差直接降低至10m以下,這為高精地圖的發展提供了底層技術支持。

          此外,AI、5G、大數據技術的進步,也從數據制作等方面提升了精度地圖的精準度。這種情況下,高精度導航地圖就成了業內各方企業擴展市場的角逐焦點。

          在此背景下,國內高精地圖市場需求不斷增長,市場規模也在不斷擴大。據中信證券研究部數據顯示,2020年全球高精地圖市場規模將會達到21.15億元,預計2030年全球市場規模將超過200億美元,未來增長潛力巨大。

          巨大的市場潛力,很快便吸引了一批新創企業入場,和BAT等巨頭競爭。而在這些新創企業入場后,國內高精地圖行業的量產博弈也開始升級。

          02 開啟量產博弈

          在國內高精地圖市場爭奪戰中,量產是各家企業“搶灘”高精地圖的關鍵。自百度拉開高精地圖免費戰的帷幕后,行業對高精地圖規?;男枨笥悠惹小?

          隨著免費成為高精地圖行業主題,業內企業被迫通過擴展其他商業模式來實現盈利。不過,對于行業量產的布局,早期入場的BAT、寬凳等初創企業,則選擇了截然不同的模式。

          具體來看,BAT在高精地圖數據收集中,采取了集中制圖的量產模式。比如百度采取的“激光雷達+高精度地圖+人工智能控制系統”的路線,就是使用搭載激光雷達、IMU、GNSS等設備的專業采集車,將環境信息轉化為地圖數據,阿里、騰訊也基本沿用了這種制圖模式。

          而極奧、寬凳等初創企業,則采取了眾包制圖的模式。這種模式是制圖企業通過和整車廠等汽車相關行業合作,借助這些汽車的攝像頭、激光雷達等設備,將地圖數據上傳至云端,然后通過大數據技術解析并完成地圖的制作。

          對比來看,這兩種制圖模式各有優劣。BAT采取的集中制圖模式,在數據精度、性方面表現更佳,但其制圖成本極高,僅一輛基礎采集車的成本就達到了1000萬元,需要極大的資金支持。而初創企業采取的眾包制圖模式,雖然有周期短、靈活性高、成本相對較低等優勢,但也存在數據亂、精度差等不足。

          制圖模式之間的差異,給制圖企業在市場的發展帶來了不同的影響。不過,在行業整體處于發展階段的情況下,規模化依舊是各家企業需要共同面對的難題。

          03 規模化并不輕松

          目前制圖企業通過小規模制圖的方式生成局部高精地圖,仍是業內主流的制圖方式。但這種制圖模式,在實際應用中卻面臨多方面的問題。

          第一,制圖效率問題。在自動駕駛落地過程中,數以千萬計的道路測繪,往往需要耗費制圖企業極高的成本。而在當前分米級地圖的測繪車,每天能完成500公里測繪路程,而厘米級地圖測繪車,每天僅能完成100公里的道路測繪,這意味著制圖企業想要迅速擴展其測繪地圖規模,必然會花費難以估量的時間和資金成本。

          第二,場景應用問題。在汽車實際行駛過程中,障礙物遮擋、網絡通信不穩定等不利狀況,都會產生衛星定位誤差的問題,使地圖導航出現錯誤。而在路況復雜的情況下,這種誤差會對汽車的正常行駛則會產生更大影響,極大地阻礙了高精地圖的應用落地。

          第三,更新問題。在車載高精度地圖使用中,更新頁是至關重要的一環。實際行車過程中,道路的情況復雜多變,并且存在不少意外狀況,而這就需要高精地圖做到實時更新,才能保障行車的效率和安全。但在實際應用中,高精地圖卻常難以實現及時更新。

          由于這些問題的阻礙,使得國內高精地圖產業的規?;l展受到不少限制。不過,面對市場存在的諸多問題,寬凳、高德地圖等企業,也正在通過各自的方式解決這些難題。

          04 離量產還有多遠?

          在自動駕駛行業的推動下,高精地圖在市場的應用愈發廣泛,市場潛力也在不斷增長。這種背景下,各家企業推進行業規模化就愈加迫切。

          而對于行業規?;媾R的效率、更新等問題,BAT、寬凳、極奧等企業也正在積極應對。比如資金實力較強的BAT,也在通過眾包制圖的模式提升制圖效率。目前阿里旗下的高德地圖,已經實現了由行業車輛、公眾車輛進行數據采集的采集方式,這樣的采集方式不僅能夠提升高德地圖拓展市場的速度,還能緩解高精地圖因更新延遲帶來的問題。

          而采取眾包制圖模式的初創企業,則通過引入專業采集車、大數據技術應用,來解決數據精度問題。一方面,行業內的寬凳等新創企業,也開始建立自己的專業采集車隊,來提升制圖數據精度。

          另一方面,新創企業也開始通過AI、大數據技術,突破眾包模式的數據精度瓶頸。比如中海庭常務副總經理羅躍軍就曾表示,通過高精度傳感器技術、數據挖掘技術、AI等技術手段,能夠解決眾包模式下數據精度存在的很多問題。據悉,目前中海庭已經通過AI技術應用使其地圖精度得到了明顯提升,并正在以此破解高精地圖量產難的問題。

          由此可見,高精地圖量產的這道坎,也并非不可跨越。而在這個問題得到解決后,國內自動駕駛行業也將會因此受益,高精地圖行業也有望走上一個更高的臺階。不過,從高精地圖行業目前的發展現狀來看,行業要想實現真正的規?;?,仍需要很長的一段路要走。


          文章來源:人人都是產品經理  作者:韭菜財經

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

          服務設計概述及國內外案例分析

          資深UI設計者


          我們常說,現在是體驗至上的時代,用戶對產品的使用不再是單純的需求滿足,更要獲得滿意的體驗。服務設計的發展為我們改善用戶的體驗提供了新的思路,從本質出發,任何產品都是在提供某種服務,服務的質量從根本上決定了用戶的體驗。



          什么是服務設計


          服務設計一直在我們的生活中,我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構31 Volts是這樣描述服務設計的:“如果有兩家緊挨著的咖啡店,出售同樣價格的咖啡時,服務設計是讓你走進其中一家而不是另一家的原因?!边@個描述很生動,同時也說明了服務設計的作用。


          其實服務設計的定義還有很多,行業內不同的專家和學者都有自己的理解和解讀,不管定義如何,重要的是服務設計的思維方式,可以幫助我們從全局改善服務體驗。




          服務設計的原則及案例說明


          2010年在《This is Service Design Thinking》一書中,作者首次提出了5個服務設計基本原則,這些原則之后也被廣泛使用,但隨著服務設計的不斷發展,其中的一些原則也需要重新去審視和思考,因此在2017年作者將其更新修訂為6項。


          a.以人為中心(Human-centered)


          以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用,服務設計當然也沒有例外,以人為中心就是要站在用戶的角度上看待和思考問題,考慮所有被服務影響的人。


          在日本,農產品市場存在這樣一個問題,農產品批發商無法及時從種植者處了解農產品的相關狀況、收獲量等信息,因此他們也就無法與要購買農產品的人進行談判,這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC(Nippon Jimuki Co. Ltd.)發現了這一問題,他們希望利用自身能力(軟件方面的優勢)去解決這一問題,因此將目標設定為:創建一個可以提供有用數據而又不給農民或農產品批發商帶來負擔的系統。


          最終的產出的結果是Fudoloop這個應用程序,通過Fudoloop,批發商可以提前一天從農民那里收到信息,進而協調買家的各種要求。Fudoloop的使用者分為兩種,一種是需要更新農產品信息的農民,一種是從Fudoloop上獲取農產品信息的批發商,Fudoloop分別為兩種用戶進行了設計。

          圖片來源:Fudoloop



          在設計Fudoloop時存在這樣一個問題,農產品市場中的相關從業人員普遍年齡較大、受教育程度低、軟件使用經驗很少,面對這樣的用戶,顯然通常的軟件設計并不符合他們的需求,因此Fudoloop的界面設計非常簡單且信息突出,從事農產品相關工作的人員可以輕松的使用Fudoloop完成農產品信息的更新,而不會因為學習產生很大的壓力。Fudoloop還在大型農業貿易展覽會邀請了一些行業內的人員和用戶參與到了產品的體驗中,并收集了他們反饋的建議,以改善產品。

          圖片來源:IDEO


          NJC在設計Fudoloop時充分堅持了以人為中心的原則,考慮到服務涉及的不同用戶,并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的:“當簡單、以人為本的思想匯聚在一起時,創新就會發生”。



          b.協作(Collaborative)


          這條原則說的是,不同背景和職能的利益相關者應該參與到服務設計流程中,收集多方訴求,發現不同看待問題的角度,才會更好的解決問題。


          在美國舊金山,有一所學校和Revolution Foods這家餐飲公司合作,為學校內的人員提供豐富的、營養的午餐,但是實際來餐廳就餐的人數與預期相差很大,數據顯示,有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經過調查發現其中的原因,很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐,因此他們選擇了去校外享受午餐的時間。


          為了改善這種情況,這所學校請來了全球頂尖的設計咨詢公司IDEO,他們與1300多名學生、父母、營養人員、董事會專員、校長、老師和社區團體等利益相關者一起工作,重新去設計了學校的午餐,并且制定了針對三種年齡的就餐體驗的建議,完成了飲食、就餐空間、新技術使用等多方面的優化和設計。

          圖片來源:IDEO


          最終,學校完美的改善了午餐服務的體驗,這其中包含了所有利益相關者的想法和工作,因此設計成果也被人們所接受,越來越多的校內人員會選擇學校的午餐,之后,這種設計模式也被舊金山的許多學校采納和推出。


          所以,服務中涉及到的利益相關者有很多,多收集他們的想法與建議,甚至讓他們參與到服務設計中去,問題會得到更好的解決。


          c.迭代(Iterative)


          迭代是一個不斷接受反饋不斷優化的過程,如此重復執行,讓產品變得越來越好。服務設計也需要迭代,不要避免犯錯誤,而是從錯誤中學習和改變,同時也要不斷的收集各方的反饋信息,這些信息是服務進行迭代的核心所在。隨著互聯網的發展,迭代的思維早已滲透到每一個互聯網產品,此處就不再過多解釋。


          d.有序(Sequential)


          服務設計應該是一系列相互關聯的活動,并且是按照順序進行的,精準的把控服務每一個環節的節奏,用戶才能獲得更愉悅的體驗。


          以外賣為例,用戶的使用過程包含訂外賣時的商家選擇到下單過程,下單后配送外賣,用戶收到外賣和用餐后這幾個過程,而服務的提供者主要包括商家、平臺和外賣小哥,為了保證用戶能夠獲得流暢的服務體驗,需要各個服務提供者在服務展開的不同環節推出優質的服務,如下圖。


          在訂外賣時,平臺會為用戶推出“超值優惠”“限時秒殺”等優惠活動,商家推薦、訂單歷史等商家選擇渠道,以及不同的篩選條件,以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后,進入到選擇商品并下單的過程,一方面,商家會推出優惠的活動、推薦菜品等,另一方面,平臺也會給出自己的優惠。


          下單后,用戶面臨的是一個配送過程中的等待時間,為了緩解用戶在等待過程中的焦慮情緒,平臺會及時更新和推送外賣小哥的狀態,如到達商家、取餐中、與用戶的距離等,同時會給出用戶預期的送達時間,若超過預期時間用戶還可進行催單,商家可以聯系用戶表達歉意,整個過程用戶對配送狀態是可視的。


          用戶收到外賣時首先會與外賣小哥接觸,包括與外賣小哥提前確定取餐的時間地點,取外賣時的短暫對話等,這些都會影響用戶對服務的印象,因此外賣小哥需要保證服務態度的禮貌和友好。收到外賣后,食品包裝首先給到了用戶對商家的第一印象,然后是餐品是否符合用戶預期,讓用戶滿意。


          在用戶就餐后,首先平臺要提供給用戶評價的功能,用戶可以分享自己就餐的感受,商家也可以通過平臺為用戶提供更多的優惠,引導用戶能夠再次回到商家訂餐。


          從外賣的案例中我們可以看到,服務是一個過程,是需要有序展開的,每一個環節的體驗都會影響到用戶對服務的印象,在恰當的環節提供恰當的優質服務,才能確保用戶的整體體驗。


          e.真實(Real)


          服務本質上是無形的,應該用“物理元素”來可視化,這樣可以用戶的服務記憶,增強用戶對他們所接受服務的感知。


          同樣以上述外賣為例,商家為用戶提供餐食,這部分是借助美團這個平臺和外賣小哥來完成的,用戶和商家的接觸僅僅是送達的餐食,因此無法通過像到店體驗一樣,讓用戶感知到商家提供的更多服務。


          為了讓服務變得更加“有形化”,商家就需要花費更多的心思,如圖,商家為了增強用戶對服務的感知,一般會在在包裝上花費很多功夫,精致的包裝讓商家的形象更好且更加值得信任,一些有趣的包裝還可能讓用戶的心情變得愉悅。另外,商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務,通過這樣的手段,即使用戶并沒有真的接觸到商家,體驗也會變得很好,商家的形象也會提升很多。

          圖片來源:古田路9號


          f.整體(Holistic)


          整體就是要著眼于整個用戶旅程,考慮用戶與服務的每個觸點(觸點的概念后文會進行介紹),并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗,考慮服務環境的方方面面,沒有任何遺漏。這個原則實施起來并不是那么簡單,從整體角度思考問題會使問題變得復雜。不過在服務設計中,是有一些方法和工具是可以幫助我們完成整體思考的,比如服務藍圖。




          服務設計的常用方法-服務藍圖


          a.服務藍圖簡介


          服務藍圖是一張圖表,通過列出在每個階段發生的、不同角色執行的所有活動,顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例,垂直方向上展示服務中的利益相關者,水平方向上為用戶的歷程,也就是用戶經歷的不同階段。在服務藍圖中有兩條線,一條是可見線(line of visibility),可見線上方為用戶可與之交互的服務,也可以稱之為“前臺”,可見線下方代表的是后臺進程,用戶無法看到但需要給用戶提供支持,后臺進程還可以存在內部交互線,用來表示內部人員的聯系。用戶與前臺服務之間存在另外一條交互線(line of interaction),用來表示用戶與服務之間的接觸。

          圖片來源:Service Design Tools


          明確了服務藍圖的大致框架之后,還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段,用戶和產品、服務、后臺產生的接觸,每個觸點也是服務可以進行展開和優化的方向。


          b.Uber服務藍圖繪制


          為了明確服務藍圖的繪制和分析過程,下面將結合下圖所示的Uber服務藍圖進行說明。

          圖片來源:Medium


          (1) 明確用戶歷程


          用戶使用Uber打車服務主要可以簡單分為以下三個階段:注冊(下載APP - 新用戶注冊),乘車階段(下單 - 等待車輛到達 - 乘車 - 到達目的地)、乘車后(付款 - 評價)。


          (2) 明確利益相關者


          用戶與之產生互動的前臺服務人員為司機,而設計師、開發人員、項目經理等負責后臺的服務支持,以保證Uber按照預期的目標運作。


          (3) 明確前后臺活動


          一方面,需要明確和用戶接觸的前臺活動有哪些,Uber打車服務中和用戶產生接觸的主要為司機及車輛,因此需要確保司機是合格的、車輛內部的環境是干凈舒適的,同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流,滿足用戶在乘車過程中的要求,完成乘車費用的收取,提醒用戶離開前帶好隨身物品,以及評價乘客等。


          另一方面,用戶對后臺的流程可能并不了解,但需要明確哪些后臺活動和支持會對用戶產生影響。比如在用戶下單時能夠自動獲取用戶定位,告知用戶預期的時間和價格,以及發送給用戶司機的狀態等。


          在明確前后臺活動時,我們可以以用戶歷程為線,分步驟進行分析,確保每個環節中涉及到的前后臺活動沒有被遺漏。


          (4)明確關鍵觸點


          在服務藍圖中我們可以標注用戶與服務的主要接觸點,針對觸點進行設計是提升服務體驗的一個重要和有效的手段。


          在Uber打車服務中還有一些需要注意的觸點,一是等待時間,這包括用戶發起乘車請求后、付款時以及評價司機時,等待時間是造成用戶體驗較差的一個原因,因此需要注意標注出這些觸點,并想辦法優化,在服務設計中需要注意相關環節的應盡量簡單,減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點,如司機態度不友好、乘客下車時忘記帶隨身物品等,可能造成失敗的服務體驗的觸點應該精心地去設計,避免這樣的情況發生。


          通過以上過程我們完成了Uber服務藍圖的繪制,從中可以獲取到Uber打車服務的整體概貌及其相互關系。



          ///


          結語


          服務設計的思維能夠幫助我們從全局的角度去審視和思考,發現更多改善服務的可能性,從而為用戶提供更好的體驗。因此對于產品和設計等相關人員來說,不能僅僅把目光放在產品本身,而是要從服務的角度去正確看待產品和用戶的關系,以用戶為中心,找到用戶與產品的每一個接觸點來進行服務設計,這樣才能保證用戶在整個流程中都能得到好的體驗。


          文章來源:站酷  作者:百度MEUX

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

          張小龍:“簡單”和“連接”,兩個詞描述微信十年

          資深UI設計者

          微信已經十歲了,如今很多人會用微信作為人與人之間的聯系方式,“加個微信”也成了一種社交方式;微信這十年不斷地創新,開發出越來越多的功能,從社交聊天工具到現在的視頻號以及直播;本文是2021年微信公開課中張小龍的演講內容,我們一起來了解一下。

          2021年微信公開課,如約而至。

          今年有些特別,他在視頻號上開了直播,和更多人線上見——“我覺得直播特別簡單,我都做了好幾場。”

          微信十年了。張小龍回顧了當初做微信的初心——“出發點很簡單,想做一款產品給自己用。”

          他也感謝了微信平臺上的每一位創作者,因為有他們,微信才能有今天的活力。

          張小龍在視頻號里,講了視頻號。當初為什么想做視頻號,視頻號的意義是什么,視頻號的推薦機制是怎么考量的,視頻號有哪些新的可能等等。

          除了視頻號,他還強忍著想劇透的心,提前透露了即將到來的微信新版本。微信表情的新玩法、可以更新你的微信狀態變成你個人“活”的名片、下拉有更多驚喜……

          究竟有哪些驚喜,歡迎往下拉:

          各位朋友,晚上好!

          謝謝來到公開課現場的朋友們,讓我感受到這是一個面對面的交流,而不是一個人面對屏幕的直播。

          2020,對很多人來說都是很不容易的一年,包括我們的公開課,也改為線上進行了;雖然在幾年前的一次公開課上,我說公開課應該線上開就好了,效率最高,但沒有想到今天是因為疫情的原因被迫做到了。

          去年這個時候我們也沒有想到,這次我們已經通過視頻號來進行直播了。

          張小龍:“簡單”和“連接”,兩個詞描述微信十年(附萬字全文)

          因為疫情,很多公司的年會都改線上了,所以這個時候,我的同事們正在努力給視頻號直播加一個能力,就是只有白名單的人才能進入直播間的企業內直播,希望能給需要線上開年會的企業一些幫助吧。

          回頭看十年前,當時的想法只是,希望有一個適合自己的通訊工具來用。

          于是就開始了微信的第一版。但當時絕對沒有想到,十年后的微信會是現在這個樣子;對此,我自己感覺特別幸運,我想我一定是那個被上帝選中的人,因為光靠個人努力是做不到這一點的。

          我分享一組數據吧,到今天,每天——

          • 有10.9億用戶打開微信,3.3億用戶進行了視頻通話;
          • 有7.8億用戶進入朋友圈,1.2億用戶發表朋友圈,其中照片6.7億張,短視頻1億條;
          • 有3.6億用戶讀公眾號文章,4億用戶使用小程序;
          • 還有很多,包括微信支付,企業微信,微信讀書,搜索等,就不一一說了。

          如微信支付,它就像你以前的錢包一樣,已經變成了生活常用品;而微信,也真的成為了“一個生活方式”。

          今天是公開課,應該有很多的創作者參與,所以,也在這里感謝微信平臺的每一個創作者,公眾號的、小程序的、視頻號的創作者;因為你們的創作,讓微信的生態充滿活力。

          大家知道視頻號今年的變化特別大。這里也想分享一下視頻號的一些想法。

          一、視頻號的起源

          可能在2017年吧,我跟公眾號的團隊說,我們現在公眾號只適合少數人寫長文章,但是大部分人寫不了文章;我們應該在朋友圈下面加一個“非朋友圈”,只能發短文或者照片視頻。

          但后來就不了了之了,確實是很大的工程,因為帳號體系可能都完全不同了,就完全是個新的比公眾號還復雜的系統。

          隨著時間的推移,視頻化表達其實越來越成為普通人的習慣。

          來看幾個數據,最近5年,用戶每天發送的視頻消息數量上升33倍,朋友圈視頻發表數上升10倍;這時候,我們再思考短內容的時候,就會想,不應該基于短文字來做,而是應該基于視頻化內容來做了。

          視頻化表達應該是下一個十年的內容領域的一個主題,雖然我們并不清楚,文字還是視頻才代表了人類文明的進步,但從個人表達,以及消費程度來說,時代正在往視頻化表達方向發展。

          于是在2019年,我們組織了一個特別小的小團隊,開始了視頻號的開發;我們也沒有問公司要什么資源專門去做,甚至沒有在公司開會立項,就自己悄悄做了;我覺得這很微信風格啊,基本上微信做東西,都是成立小團隊開始做起,而不是大規模的兵團作戰。

          并且我說,我們要做,就一定要做成、做大。

          這并不是公司給的任務,因為完成任務是枯燥無味的,并且會因此動作變形,應該說是我們要給自己一些挑戰性的目標,不然工作會顯得很無聊。

          二、視頻號是什么?

          視頻號是一個人人都可創作的短內容平臺。

          所以它是公開領域的內容平臺,就不能基于微信號來創作了。

          因此遇到的第一個問題是,需要有一種新的ID(身份)。

          長期以來,微信的最大價值是每個人的微信ID,比如微信支付能很順暢,因為錢包跟著個人ID走,這是非常自然的,就像你現在只拿身份證也能取錢一樣;但這個ID是通訊和社交領域的,因此是私密的。

          因此,微信的用戶并不能公開對非好友說話,即便評論了,別人也無法聯系你,這對于社交領域當然沒有問題;但對于公開領域,需要新的身份;而在一個產品里,承擔兩個身份,其實是很有挑戰的。

          而這個新的ID,還必須特別方便,不至于在各個場景里遇到身份的沖突,所以處理得不好,雙ID會讓系統變得非常復雜;比如你評論,就需要選擇用哪個ID來評論。

          但是這個ID的意義又特別大,一旦走出這一步,意味著微信不再局限于社交領域,而是進入到公開信息領域。

          因此視頻號的意義,與其說是視頻,不如說是“號”,因為有了一個公開的號,意味著每個人都有了一個公開發聲的身份。

          比如,直播,在視頻號里做得很順利;在視頻號之前,我們是沒法做直播的,最多做到群內直播,那還是屬于群通信的范疇;但有了視頻號這個ID,每個人可以迅速開通自己的直播。這里,ID才是基石,它可以承載視頻內容,可以承載直播,可以承載小程序等。

          我記得當時有個方案是,每個進視頻號的人要創建一個視頻號ID,用這個ID來瀏覽和評論內容。我說不對,瀏覽者應該是微信身份,而不應該強迫每個人開一個新的身份才能看和評論。

          幸好當時選擇了這樣一條路徑,不然就沒有后來的社交推薦體系了。其實產品的迭代是由無數這樣的選擇組成的。

          ID還有一個重要的意義是針對機構的。

          大家知道PC時代每個機構都有一個官方網站,其實微信一直在尋找PC時代的“官方網站”的替代物;做公眾號的時候,我們希望公眾號就是一個機構比如企業的官網。做小程序的時候,我們希望小程序就是官網。

          現在,我們希望視頻號是每個機構的官網。這是合理的,官網是需要進化的。所以未來視頻號會承接一個機構的很多服務內容,并不局限于視頻;比如一個企業的服務,可以通過小程序的方式,展示在視頻號下面。

          所以我開玩笑說,如果有一天我們在每一個廣告牌下面,都能看到廣告主的視頻號的二維碼,那就說明視頻號做成了想要的官網了。

          第一個版本其實只是搭建了這樣一個ID體系。和公眾號的很類似,但是比公眾號的門檻低很多,普通微信用戶可以立即開通它。

          內容表現上,只是一個簡單的信息流,混合了關注的,朋友匿名點贊的,和系統推薦的內容在里面。

          但這樣的效果并不好。因為是灰度,量不大,因此也吸引不到大量的創作者來貢獻內容,因此推薦的內容也一般般。

          但即使如此,我們還是希望推薦的質量能夠好起來。我們組建了三個做推薦算法的團隊,每個團隊十幾個工程師。希望各自用不同方法去找到推薦的最優解。

          應該說我們在算法領域沉淀應該還是很深的,搜一搜背后是個幾百工程師的搜索技術團隊,同時我們自己研發的語音識別和機器翻譯,都是國內的一流水準。

          對了,外界一直有人說我們的語音識別用的是第三方的技術,其實我們從未用過第三方的,一直都是我們自己研發的?,F在微信里面的語音識別每天翻譯的語音條目在五億條以上。

          雖然搜索團隊有很強的算法技術人員,但是,我還是把他們從搜索團隊抽調出來進入到視頻號團隊來工作。因為閉環的小團隊才能迅速迭代。

          推薦團隊很努力,但頭幾個月的滾動特別困難,似乎陷入了死結,就是內容不好看就沒有瀏覽量,就導致沒有人貢獻內容,所以推薦系統也推不出好內容,然后繼續沒有好的內容看。

          5月份的時候,我們做了視頻號最重大的一個改變。

          因為經過幾個月的灰度,表明在現有的內容下,基于機器推薦是走不通的。對比朋友點贊的內容,雖然當時朋友點贊還是匿名的,和機器推薦的內容來對比,我發現,機器推薦的遠不如人工(或者說朋友)推薦的精彩。既然這樣,就應該以實名點贊的社交推薦為主,機器推薦為輔。

          當時我給的理由是,我們所看的書,大部分是因為周圍有人推薦而去看,而不是網上書店推薦的書。你少看幾個機器推薦的內容不會覺得可惜,但錯過了朋友們都在看的內容會覺得可惜。這是視頻號能借助社交推薦起來的理由。

          于是五月份開始了變更最頻繁的兩周,幾乎每兩天就要更新一個版本。然后發布了基于朋友點贊的新的灰度版本,終于看到了上揚的數據,用戶的留存非常高。

          所以6月視頻號的用戶到了一個量級。數字其實不重要,但對于一個內容形態的產品來說,一定量級的用戶意味著解決了生死問題,即流量的循環起來了。

          這是一種典型的微信style的產品方法,即通過產品而非運營的方法,找到事情的撬動點,通過產品能力讓事情運轉起來。

          有這個用戶基數說明生存下來了,這時候就可以開始做基礎功能的完善了,比如直播能力等。沒有過生死線的話,做再多功能也是白搭。

          在這里,是社交推薦發揮了作用,當時機器推薦的占比非常小,留存也非常低,我們也差點就放棄了機器推薦。但是,并不是說機器推薦沒有用,而是要在內容豐富的情況下才能發揮作用。

          插一個小故事,6月份的時候,那時社交推薦的新版還在開發吧,我在黑板上寫下一個斷言:未來有一天,視頻的播放量,關注,好友推薦,機器推薦的消耗比例,應該是1:2:10。即,一個人應該平均看10個關注的視頻,20個朋友贊的視頻,100個系統推薦的視頻這樣的比例。

          當時是這么解釋的:

          內容分兩種,一種是你需要花腦力去理解的知識性信息,是學習;一種是不需要花腦力的思維舒適區的消費類的信息,是娛樂。

          朋友贊是朋友強迫你去獲取你未必感興趣的知識性信息,屬于學習類的;機器推薦,是系統投其所好而讓你很舒服的瀏覽你喜歡的消費性信息,屬于娛樂類的。關注里面兩種信息都有。

          因為關注的東西你已經知道大概會是什么了,反而不會太有吸引力,因此是1。朋友贊雖然看起來累,但是不能錯過,所以是2。而系統推薦,符合懶人原則,是大多數人都更容易消費且獲得舒適感的信息,所以是10。但是我們現在的大盤數據,并不是這個比例。現在朋友贊產生的整體vv,是機器推薦的2倍。

          于是我讓數據同事統計了一下,只拿有關注的用戶來看。有關注的用戶目前極少,屬于活躍用戶,所以代表了未來活躍用戶的行為。

          前幾天的數據是,有關注的用戶,人均在三個tab產生的vv,差不多是1:2:9。

          拿到這個結果時我非常吃驚。它只是一種粗略的估計,并不是說預測特別準確,而是說我們做東西的習慣是,如果這樣做,應該先推理出來一個結果,然后用數據去驗證,才能檢驗方向是不是對的。

          我估計未來這個9還會變得更大。因為這是和內容豐富度相關的。

          說到這里,可能會有人說當機器推薦這個9變得越來越大,不是不符合用完即走嗎。用完即走跟時間長短無關,跟效率有關。

          我們從來不會關注用戶在微信里停留的時長,那不是我們的目標。當用戶想要看內容的時候,不管是文章還是視頻,如果他花了很多時間看,只能說明微信里面有很多值得看的內容,而不是要刻意去消耗他的時間。

          三、什么是視頻?

          過程中還解決了另一個問題,即究竟什么是視頻的問題。

          說到視頻,大家會想到手機相冊里面的視頻文件。就像朋友圈,只能上傳相冊的視頻。我們也確實是通過這個方式,來希望朋友圈里的視頻更多的是用戶自己拍攝的視頻。

          但視頻文件其實是會消失的。

          從Windows轉到蘋果手機的用戶,都會遇到一個問題,以前的文件和文件夾去哪里了。在iOS里,沒有了文件的概念。文件被各個應用自己定義了。這是把文件應用化了,即文件不能脫離應用而存在,一旦脫離了,就是沒有意義無法解釋的數據。

          這是一種很好的觀念。

          原始視頻只是數據,它沒法關聯到其他信息,如創作者,觀眾數,評論等。它還需要存在本地,數據丟了就丟了。

          因此未來的視頻應該是一種結構化數據。它存在云端,有所有的創作者信息,有觀眾的互動信息,能夠很方便的分享。

          文字和視頻等內容,存在的價值在于有人看到,也就是分享。而分享,如果還需要copy整個原始數據,是很落后的。分享應該只是一個鏈接的傳遞。

          這會讓我反思,朋友圈里面上傳視頻,以后會一直用這種原始方式嗎?

          所以在6月的時候,我們需要把視頻號內容分享到朋友圈來,遇到一個問題,它應該長得像一個鏈接呢,還是像一個本地視頻呢?其實是歸類,它應該歸類到文章鏈接,還是一個視頻文件。

          我的答案是,云端化的結構化的視頻,才是視頻,本地的視頻文件,反而是裸數據,是應該被淘汰的。所以你看到的朋友圈里的視頻號的視頻,和現在的本地視頻的展現沒什么區別。

          在這里,視頻號是結構化的視頻內容的載體。我相信以后微信里面流通的視頻,越來越多的會以視頻號視頻的形式存在,而不是視頻文件的方式。這種變化,其實在公眾號體系里體現過一次。公眾號是一個文章的載體。

          它讓文章因為分享而變得有價值。并且,公眾號定義了文章的展現形式,是所有的用戶在閱讀不同的文章時,能以一種相對一致的體驗來閱讀和互動。在我看來,這是對網頁時代閱讀體驗的一次大的體驗提升。

          不管是文章還是視頻,他們存在的價值在于被人看到,或者說被分享。顯然,文章和視頻需要一個載體來傳播。

          如果你能理解公眾號對于文章分享的價值,那么,可以用同樣的思路去理解視頻號對于視頻分享的價值。

          載體的含義還體現在,我們自己不做內容,也不會去買內容。我們不關注具體的內容是什么。我們只做內容的承載和傳遞。

          四、長視頻和短視頻

          我們也遇到了超過一分鐘視頻的問題。自然而然地,大家會認為長視頻和短視頻是兩種東西,因此應該設計成兩種不同的內容對象。

          中間有個版本確實是視頻號有專門的長視頻這一欄的,甚至長視頻和短視頻的評論點贊還是分開的。

          但如果仔細思考,在微信號體系里,是不應該做這種區分的。長短視頻的區別只是消費的場景不一樣。短視頻適合碎片時間的連續消費,而長視頻適合有一大段時間來看。

          對視頻號來說,簡化這個問題的方法,是把一分鐘以內的視頻是為短視頻,一分鐘以上的視頻的開頭一分鐘視為這個視頻的摘要或簡介。我把它稱為封面。這樣的話,視頻號不區分長視頻短視頻,但是又能兼容短視頻的體驗。

          關于長視頻,我希望視頻號逐漸積累越來越多的長視頻,成為長視頻的云端倉庫。

          將來有一天,也許我們會提供一個檢索或推薦入口,這樣用戶可以找到豐富的長視頻內容。

          這個其實也是未來非常有想象力的。

          五、視頻號和個人的關系

          視頻號的初衷是讓人人都能很容易通過視頻化的方式去公開表達內容。但做產品的人都知道,讓用戶去發表內容去表達是最困難的。

          現階段我們也并沒有做到讓很多人在視頻號去發表自己的日常。但我們有個舉措,讓我們能看到希望。

          我們上線了將自己的視頻號內容關聯到自己的微信名片的功能。我們發現結果比預料的要好很多,到現在已經有非常多人在名片展示了自己的視頻號內容,并且還在持續增長。這是個很好的趨勢。

          這里有一個很有意思的話題,有的時候大家會覺得微信做東西特別保守。其實并不是保守,而是說很多東西是不對或不應該做的。

          舉個例子,我們可以把視頻號的內容掛在名片上,我們以前為什么不做一個類似這樣的展示自己的一些精選的照片和視頻的功能?

          我們內部討論過好多次,因為很多人朋友圈設置了三天可見,越來越多了,我們打開名片有的時候幾乎看不到東西。為什么不給他們提供一個可以把一些照片精選放在那里的功能,這樣朋友進來至少可以看到一些。

          之前我們不愿意做這個功能是因為,一旦這樣做了,你可能只是把你歷史上最好的照片放到那里,永遠就不去修改它了。

          這次我們愿意這樣做是因為,如果你關聯到你的視頻號的內容,那它就是活的,因為你會不停地更新你的視頻號內容,而不是說我選幾個歷史上最好的照片作為精美的裝飾就永遠不變了。

          畢竟,視頻號希望的是人人都能表達,而不是只有網紅和大v的表演。

          六、信息展現的方式

          信息展現形式一直是互聯網產品里的最基礎部分,也是爭議最大的。這里說的是指對信息列表的展現形式。

          常見比如有瀑布流,通俗稱呼的信息流,以及全屏。他們的區別是一屏里放多少條內容合適。全屏就是一屏只放一條內容。

          以我自己的經驗來說,我把這些式樣的選擇總結為一個粗略的規律,就是——

          一屏里的內容條數,應當跟命中率成反比。

          命中率是指用戶可能感興趣的內容條數的比例。比如10個郵件,只有一個是我想要看的,命中率是10%。

          以朋友圈舉例,因為你并不是要看每一個朋友發的內容的,所以命中率并不高,如果改為全屏,就是災難。同時,如果你添加的好友越來越多,命中率還會降低,因此就更不能增加每條內容的顯示面積。

          如果我們要增大顯示面積,就必須提高命中率。但朋友圈的命中率是很難提高的,因為朋友圈的命中率取決于朋友跟你的關系,而非他發的內容,而我們很難知道你對哪個朋友更感興趣。

          而往往關注內容越多的人,命中率就越低。所以公眾號改版的時候,其實是一屏里的內容條數變少了,雖然帶來了點擊次數的減少,但關注多的人還是會抱怨,因為選擇的難度增大了。但對于關注少的人,閱讀量是上升了,因為只關注了幾個號的話,命中率本來就高。后來我們在訂閱號的頂部增加了常讀號的展示,其實是提升了命中率。

          視頻號的上半年,平臺的內容豐富度不夠,命中率是很低的。所以當時半屏式的信息流是合適的,一屏顯示超過一項內容,用戶有選擇的余地。那時候如果直接上全屏,可能死的很快。

          到下半年,內容開始豐富了,命中率開始提高了。并且全屏對于單個視頻的展現效果當然也會比半屏要好,我們開始灰度的切換到全屏模式。

          這里說個有意思的數據。我們把關注和機器推薦灰度切換到全屏,并且和沒有灰度全屏的用戶來對比觀察。發現全屏后,關注tab的人均vv(video view,視頻播放量)下降了,推薦tab的上升了。這應該可以推導出來,關注tab的命中率不夠高,以至于全屏后帶來了輕微的選擇困難。

          我們在公眾號里在給關注的號的內容做排序,以及在視頻號里,也會通過算法對關注的內容做排序,也是為了提高命中率。

          特別是全屏之后,因為用戶的選擇余地是零了,更需要算法來做排序。

          七、直播

          互聯網歷史上,個人在公開領域的表達方式一直在演變。

          最早的時候,需要你會寫HTML來做網頁。后來有了博客,博客之后是微博這樣的短文字。現在是圖片和短視頻。

          演變的方向是往更能被普通人生產和消費的方向去走的。所以會體現為更短更碎片化。

          所以我在想,還有什么內容形態是比短視頻更能被更多人接受的。

          我覺得直播有這個機會。直播比短視頻的生產更容易,是因為拍一段短視頻是需要有內容準備的。

          而直播,是不需要準備內容的,它就是日常聊天。這是一個非常巨大的差別,直接降低了直播的門檻。這是一種輕松的表達,普通人也能夠去生產出來,朋友也更愿意去消費。

          雖然直播已經發展了很多年,大家對直播的認知還是帶貨的領域,這是作為內容形態的方式來思考,就是個人表達的形態方面來思考的。

          所以,直播在未來有可能會成為一種很多人在用的個人表達方式。

          做一個未來的設想,很久以后,每個人的微信名片應該是活的,意思是,我打開你的名片,如果你剛好戴了一個可以直播的眼鏡正在直播,那我就能直接看到你看到的東西。這可能是個人直播的終極形態。

          前不久有一場流星雨的直播,有超過100萬人觀看了,有點超出我們的意料了。因為,我們并沒有做任何中心化的流量分發去推它,它自然就吸引了100萬人。

          在這里,是社交推薦在發生作用,通過朋友圈,群聊等進行了人群的擴散。當然,在視頻號和直播的入口里面,我們還是會用機器推薦來給用戶推薦適合的直播。

          當直播多了以后,除了你的朋友,我們也希望系統能告訴你哪個直播值得你看一下,這是我們的機器推薦有更大的考驗。但社交推薦,仍然會是非常重要的傳播途徑。

          其實我們現在還沒有直播的入口,下一個版本可能就有了。我們現在有一個附近的直播和人,把它調一下,可能叫直播和附近。

          我們也在豐富直播電商的能力,包括直播里可以掛接到第三方的小程序。

          春節快到了,我們都習慣了在群里發紅包搶紅包來拜年了。但其實線下傳統的拜年是走家串戶面對面的行為。

          直播其實更能模擬出線下拜年這種傳統方式。

          所以我們今年在直播這里也做了一點小小的東西,我們希望今年的春節能夠有一些人通過直播的方式來拜年,那就特別好。

          八、關于創作者

          很多人會關心平臺會給創作者什么樣的支持。

          如上面提到的,我們更希望做視頻的載體,并且讓視頻號成為個人和機構的官網。平臺在這里的角色是連接,而不是做內容。

          但和以前的官網不一樣的地方在于,微信體系里的官網,內容是能自己流通的。因此你不用太擔心做了官網也沒有人訪問。

          我剛剛說到微信里集合了很多產品可能沒法嘗試的東西,比如說對于信息訪問,我們可能會有關注關系可以獲得,有搜索,有推薦,有系統推薦和社交傳遞這樣一些方式,所以不用太擔心自己的內容在這里沒有人會看。

          剛開始我們去邀請一些明星進來,明星會說有沒有簽約費。我們的回答是,我們希望你進來,因為你應該經營自己的粉絲,最終你會實現盈利,但不會平臺出面來購買內容。

          所以視頻號這里,我們沒有花一分錢去購買內容。將來也不想這么做。倒不是為了省錢,而是,當我們不花錢買內容的時候,創作者還愿意進來,才說明創作者能靠自己的努力獲得回報,才說明我們建立了一個能自行運轉起來的生態。

          同時,我相信普通人的創作力是巨大的,相反,購買的內容反而不一定能打動人。

          微信的歷史上,我們一直不強調強運營,也是這個原因。

          系統和規則會比運營的效率高太多了。就像我們現在看到微信支付,其實已經覆蓋面非常大,但是我們微信支付的人數并不算多,對于支付這樣一個需要跟線下接觸的行業來說,我們每個行業微信支付里可能就一兩個人在負責整個行業。

          公眾號的那一個slogan照樣可以用在視頻號上,再小的個體,也有自己的品牌。

          其實你現在放在視頻號上也是很適用的。

          九、一些有趣的實驗性項目

          我們也有一些有趣好玩的實驗性項目在進行中。

          前面提到,做產品其實是個驗證想法的過程。

          如果你腦袋里突然冒出一個想法,可能很不靠譜,但又似乎有意思。然后繼續往深里去想,如果能經過很多次選擇,最終能變為實現,就會體會到做產品的樂趣。

          我就經常會有一些異想天開的想法。

          比如,如果你能拍一下一個人的頭像會怎么樣,如果你能朝跟你聊天的朋友扔一個炸彈在屏幕上炸開嚇他一跳會怎么樣,如果你在聽一首歌的時候能看到其他聽歌的人眼前的畫面會怎么樣,如果你失眠的時候也能看到其他的失眠的人然后大家一起數羊會怎么樣。

          甚至,如果給一個畫布,每個人上去畫一個點,如果有一千萬人輪流去每人依次畫一個點,到最后會不會形成一個圖案?如果在沒有組織的情況下,一千萬人居然畫出來一個圖案,那又意味著什么?

          所有這些都是很有趣的事情。所以做產品絕不是枯燥無味的。雖然大多數想法都會是行不通的,但有少數的能行得通,就非常好了。

          這里,我就簡單描述下微信新版本會有的幾個功能。

          所有的功能在被用戶實際驗證之前,都不能說一定會受歡迎,但是只要思路的方向沒有問題,就可以不斷改進。有些功能也會經歷灰度,完善了才放出來。所以不要抱以太高的期望。這里分享下這些好玩的功能的思考點。

          一個是表情。

          表情是表達方式中的一個基本元素。

          說到表達方式的基本元素,這讓我想起拍一拍。

          很多人會不喜歡被拍,還有很多人因為誤觸而拍錯了人很尷尬。但仍然有1.2億人設置了拍一拍的尾巴,每天幾千萬人在用拍一拍。

          拍一拍也是表達的一種基本元素,并且不同于其他所有方式,它是模擬人類的現實生活中的行為動作,用最簡單的一個身體動作來完成了一次信息傳遞。

          有次內部開會我開玩笑說,未來人們的生活會越來越線上化,人們會懷念這種古老的人和人之間的交互方式的。

          說回到表情。

          人們的表情反映出情緒越來越強烈了。以至于必須經常“裂開”了。

          我的想法可能比裂開更暴力。有一天我跟開發同學說,幫我做一個功能,我扔出一個炸彈,對方的屏幕就裂開來。當然,是動畫效果的裂開,但要求很逼真。

          實現是可以的,但是真的當作一個表情功能的時候,還是會遇到很多坎。

          我說尋找基本元素,即這種表情必須是底層基礎的,而不是一種特殊的。最終我們做到了。

          一個是狀態。

          現在大家打開一個朋友的微信名片,往往除了名字頭像,什么也看不到。朋友圈也很多人設置了時效。

          但事情不應該是這樣的,每個名片,應該是活生生的才對。名片就是我們線上化生活的自己,它應該反映自己真實的狀態。

          我們之前嘗試用視頻動態表達一個人的狀態,但視頻化表達在這個地方其實挺困難的,因為確實拍個視頻讓所有的好友看到,這個壓力還是挺大的,所以視頻動態不算成功,每天大概有100多萬的人在發視頻動態,我們也會把它升級一下。

          升級以后的話,我們希望走到視頻的另外一面。

          以前我說以前每個人發文字是很困難的,其實有一個前提,發一段讓很多人都看的文字是很困難的,其實自己隨便說一句話其實并不困難,狀態就是隨便說一句話這樣一個東西。

          所以我們會走到視頻的另外一面,通過你隨便說一句話,隨便寫幾個字來表達自己的狀態。

          并且,在某一時刻,一定還有其他的人跟你處在同一種狀態里,你會希望看到他們。看到在打同一個游戲的人,同一個咖啡吧的人,同一個景點旅游的人等,甚至是,同一種心情的人。

          我一直認為,社交的本質是找到同類。

          狀態,是用來給人看到的,最好還是給同類的人看到。

          所以這一次,我們基于簡單的文字來組織狀態這樣一個功能。

          我不知道結果會怎么樣。對于社交產品,因為它是群體互動來導致結果的,所以很難預料社交功能交給用戶群體后的反應。

          但是,這樣的嘗試是應該的。

          因為,個人的狀態表達的需求沒有被滿足。哪怕是簡單的一句“我今天很郁悶”,你不會發朋友圈,也不會跟朋友專門去說,那么,總需要一個地方可以說的。

          十、歌曲

          還有一個新的嘗試是關于聽歌的,在座有一位聽眾跟我聊過怎樣看見一首歌,歌不是用來聽的,是用來看的。

          自從有了網絡、移動互聯網以后,我感覺是很多人聽歌變得少了,只有在開車的時候才會聽歌,因為在任何其他時候,你會寧愿去看視頻了。

          微信其實是一個包含信息種類特別多的一個東西,但我一直不太滿意的一點是在微信里面聽歌的體驗不太好,比如說我其實特別不理解為什么所有播放器都是一個電唱機在那里轉,因為電唱機在我讀中學的時候,我家里有一個,我還自己去買唱片,但是我想應該大部分用戶不會經歷過那個時代,那為什么他們要看不認識的物品,一個唱盤在那里轉。

          我們在聽歌的時候應該看見什么?

          很多人說我們在聽歌的時候不應該看見什么,而是應該聽就好了,但我希望聽歌的時候能夠看到一點東西,因為聽歌的時候有一點想象力,我們之所以希望在開車的時候聽,是因為你的眼睛能看到很多的東西,讓你的想象比平時更活躍了。

          如果這些東西,聽同一首歌的人往往有很多人,舉個例子,你可以想象你在這里聽這首歌,另外一個人在另外的場景,還有很多類似的人,如果把他們聽歌的眼前畫面都連起來的話,總有一些人的畫面跟你是非常類似的,他能夠打動你的,所以從這個點上出發,我們就把聽歌的體驗做了一個視覺化的展現。

          但這個難度其實特別大,因為技術還沒有到那一步,我們的眼球都有一個攝像頭實時傳到云端,未來遲早會到那一步。

          所以目前只能通過別的產品方式才能做到這一步,就是說有一些熱心的用戶可能會愿意說,我能夠把某一首歌變成一個制作得很精美的,類似MV這樣一個東西,可以分享給更多的人看到。

          十一、浮窗

          我其實一直很不喜歡浮窗,因為它就像狗皮膏藥,這也是PC時代大部分網頁瀏覽的體驗都不好的一個原因。

          為了解決一篇文章要很久才看完,而中途要不斷處理微信消息的需要,我們有了浮窗功能。但它并不完美。

          很多時候,一篇文章,一個長視頻,是要分很多次才看完的,如果每次都要先拖到浮窗,也是很繁瑣的。

          現在,微信提供了一個尚未看完的內容的列表,方便可以隨時找回這些內容繼續看完。

          尤其是對于長視頻,更加需要隨時可以切走,然后又能快速找到。

          直播也一樣需要。

          十二、輸入法

          還有一個可以提一下的新的研發中的產品,是團隊正在研發的輸入法。

          我們會經常收到投訴,說剛剛在微信里聊到什么,就在其他app里看到這個東西的廣告,是不是微信在出賣我的聊天記錄給廣告主。其實并不會。

          我們從來不會去分析用戶的聊天記錄,即便因此損失了很多廣告收入。

          所以當我們的技術團隊,就是機器語義理解的團隊,說我們自己做輸入法可能會做的更好的時候,我當然很贊成。

          因為至少,在安全性方面,我們可以做的足夠好。

          我們的目標不是一下子獲取多少用戶。

          因為輸入法是文字表達的入口,并且輸入法必然越來越智能,可能出現新的輸入形態,所以還是值得投入去做的。

          十三、團隊

          很多人說視頻號迭代速度特別快,事實上在微信的頭兩年,我們都是這個速度,后來有時快有時慢,其實我認為做產品就是應該快的。

          我經常說的一句話是,如果一個問題,三天沒有想出答案的話,那么三個月也想不出來,因此要么三天內找到解決方法,要么放棄,去尋找新的路徑,而不是耗在那里。

          孫子兵法說到,行軍打仗應該要“其徐如林,其疾如風”,做產品也是這樣,要么沒有想清楚,那不如什么都不做;如果要做,就要非??焖俚牡?。

          視頻號團隊到目前為止也就一兩百人,其中還包括了三個算法團隊,前后臺開發,產品運營等。

          這很微信風格。

          互聯網產品是關于創造力的,而不是拼人數。

          如果一個一百人的團隊做不出來一個產品,給一千人也照樣做不出來,甚至做的更差,因為一千人的內耗太大了。

          十四、關于產品

          微信十年,如果非要用兩個詞來描述微信,我想,一個是連接,一個是簡單。

          連接是很美的。

          因為世界的運行就是靠萬事萬物的連接而進行的。對產品來說,做連接,意味著做服務的底層設施,因為基于連接可以演變出來的結果是最豐富的。

          很多的社交產品可能也做連接,但它止步于人,微信的連接范疇更大,公眾號、小程序目標都是連接,連接人和內容、人和服務,包括微信支付也可以認為是一種貨幣的連接,視頻號的目標也是連接。

          重心不是在做內容,而是在做底層的連接,這很重要。這也是為什么我們會提“去中心化“,因為連接和中心化是有些排斥的。

          再說簡單。

          我用簡單來作為美觀,實用,合理,優雅的代名詞。

          簡單是很美的。從一個物理公式到一個日常用品,往往是簡單的是更好的。實現同樣一個目標,有一千種方法,但只有最簡單的方法是最美的。正是因為有一千種方法存在,所以要真正做到簡單是很難的。

          以前在飯否,看到很多產品越做越復雜,我吐槽說,“一個產品,要加多少功能,才能成為一個垃圾產品??!” 不是說加功能會讓產品不好,而是加了不必要的功能,或者加功能的方式不對。

          十年來,微信加了很多功能。

          我很慶幸的是,現在的微信,還幾乎和十年前的微信一樣簡單;雖然比十年前多了非常多功能,但這些功能,都已經是用的最簡單的辦法了,所以增加的復雜度會小。

          簡單才會好用,特別是一個產品有十億人在用的時候。

          有時候也會想,很多用戶其實并不一定很在意產品是否簡單,粗制濫造的產品,也可能照樣會有很多人用的;但是我們還是會追求簡單,因為總有部分人,會認同這種簡單背后的美感。

          微信雖然是這么大用戶量的產品了,并且經歷了10年之久了;但我還是希望,它能一直保持自己的風格,一直像一個小而美的產品一樣,有自己的靈魂,有自己的審美,有自己的創意,有自己的觀念。

          而不僅僅是數字的奴隸,這樣的話,我和團隊,才會為我們的工作而感到驕傲,并且覺得有意義,這是我對微信十年在今天的最后一個總結。


          文章來源:人人都是產品經理  作者:紙盒小卡車

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


          B端產品彈窗以及設計方法

          資深UI設計者

          彈窗作為應用的輔助窗口之一,在B端產品中占據重要作用,很多產品甚至大部分功能都需要在彈窗中完成。有些彈窗會被用來承擔復雜的設置、有些彈窗會被頻繁調用、有些彈窗需要提供更詳細和更結構化的信息,如何處理好彈窗在整個任務流中的交互對UI來說非常重要,因此本文主要探討B端產品中的彈窗設計和規范。文末會提供可供調研學習的B端網站。


          如果你想了解B端系統圖標的設計方法,可以瀏覽上一篇《小白適用:如何快速掌握系統圖標的設計方法》,歡迎討論指正。


          一、彈窗、對話框、窗口,你分清了嗎?


          1、彈窗(popup)


          不知道你們有沒有思考過“對話框”和“彈窗”的區別,我們平常所稱呼的“彈窗”主要著眼于動作,意思就是彈出來的窗口,是泛指,在GUI(Graphical User Interface)屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。


          在常用的兩個前端網頁開發組件Ant Design和ElementUI中,沒有單獨命名為“彈窗”的組件,都是細分在各個功能分類中。比如Ant Design中相關的細分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認框等,而ElementUI中則又是不一樣的細分法,除了分類方法和命名不一樣,歸根結底達到的目的是一樣的,以上我們都可稱之為“彈窗”,當然在工作中用細分的稱呼會更專業更明確。


          2、窗口(window)


          這里的“窗口”對標“對話框”和“彈窗”的概念,窗口是承載應用程序的區域,應用程序的窗口被打開,則表示該應用程序正在運行中。窗口可以移動、可以放大縮小,主要有二種姿態,一種是“獨占式”,一種是“暫時式”。顧名思義,“獨占式”就是需要占據大部分屏幕的應用,ps、ai的窗口就是“獨占式”窗口,而“暫時式”則大部分時間在后臺運行,比如音樂播放器、殺毒軟件等,只需在必要時打開即可。



          一個應用通常由一個主窗口和若干輔助窗口構成,彈窗就是典型的輔助窗口之一。


          3、對話框(dialog)


          對話框強調了用戶與計算機進行對話的過程,是疊加在應用主窗口上的彈出框,一般在對話中它會給出消息或要求輸入。當對話完成后,即可關閉對話框。說人話就是,對話框一般需要用戶進行操作,當用戶輸入或者點擊“確認”、“取消”等按鈕時,計算機會根據指令進行工作,這是一個人機“對話”的過程,因此稱之為“對話框”。



          無論在現實中還是界面交互中,我們都不希望對話被打斷,所以對話框通常是模態的(下文會解釋模態和非模態的定義)。


          梳理完三個容易混淆的概念之后,接下來主要從彈窗的二個角度展開討論:彈窗的分類和應用場景;彈窗的設計細節和技巧。


          二、彈窗的分類和應用場景


          1、彈窗的分類


          彈窗可分為兩大類型:“模態彈窗”和“非模態彈窗”。


          模態彈窗:用戶必須給予彈窗反饋,除非點擊關閉或者操作完成,否則彈窗會一直在。形式上來說就是給當前頁面添加蒙層,使用戶將注意力集中在彈窗上。上文提到,無論在現實中還是界面交互中,我們都不希望對話被打斷,模態彈窗不會輕易被打斷,所以對話框通常也都是模態彈窗。



          模態彈窗的常見場景:你打開了一個應用的模態彈窗后沒有管它,然后切換到其他應用程序中去,等你忙完回到原來的應用時,那個當初的模態彈窗仍舊在那兒等你。這就是模態彈窗,雖然看起來僵硬死板,但是它的目的和使用范圍通常是非常清晰的。


          非模態彈窗:不需要給出反饋,不影響用戶的其他操作,主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。


          下圖紅框中就是典型的非模態彈窗,它們可以同時開啟且互不影響,不會影響主程序的進程。



          非模態彈窗的另一個特點就是:實時生效。點開非模態彈窗的同時仍然可以看見主界面,主界面會根據你的操作實時變化,你可以隨心所欲地不斷選擇、改變、選擇、改變,而模態彈窗則無法在你點擊其中一個表單的當下立即做出改變。


          下圖例子就是非模態的屬性配置彈窗。



          2、模態彈窗的應用場景


          1)通知公告類彈窗(通常是重要的信息,需要加強用戶關注度)


          營銷彈窗

          出于營銷目的,這類彈窗都會第一時間出現在你面前,直到手動關閉,它的特點就是不用登錄也會出現,提高曝光率,便于拉新和轉化。


          公告通知彈窗

          主要是為了將一些重要信息通知給用戶,這些信息要么來自一些被觸發的事件,要么來自應用開發者的信息,一般在用戶登錄后第一時間彈出,確保用戶不會錯過。需要注意的是,在應用的通知中心一般也需要保留這類重要或者高級別的通知,以便用戶可以隨時查看回顧。



          提示類消息彈窗

          提示類彈窗是由應用程序主動彈出的消息,主要有三種狀態:錯誤、警告、確認。通常是用戶進行某項操作后給出的反饋信息,會中斷當前工作流,屬于阻塞型提示。



          以上都屬于通知公告類的“模態彈窗”,特點就是一般不需要用戶具體操作,用戶將其關閉或者點擊“確認”等按鈕即代表用戶已經接收到該消息,彈窗就完成了它的任務。


          2)操作配置(B端應用中大部分的模態彈窗都為這種類型)


          簡單配置(表單少,操作清晰)


          “簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入,交互清晰明了。比如創建項目、分享鏈接、更改名稱等操作。



          標簽頁彈窗


          有些應用的功能配置中有很多復雜的屬性,簡單平鋪的彈窗無法滿足需求,需要分層分類歸納,于是從20世紀90年代開始出現了選項卡/標簽頁彈窗。它的優點是合理利用了空間,也能讓用戶更好的理解信息層級。


          mac os 8.5系統的彈窗(發布于1998年10月)


          monday.com的配置彈窗(簡潔的標簽頁)


          標簽頁彈窗的設計必須合理且適度,找到信息之間的因果關系,仔細斟酌并加以連接整理。同時,單個彈窗中的標簽頁不宜過多,一般不超過五個(動態可增減的標簽頁除外)。



          如果你的標簽頁過度堆疊,你需要嘗試改變交互方式,重新整理信息。一種辦法是增加標簽頁的深度,將能夠歸納在一起的內容盡量整合,放置在單個標簽頁中;另一種辦法是拆分信息,分成多個簡單的彈窗。


          下圖中的例子就是第一種辦法,整個彈窗有三個標簽頁,但是單個標簽頁中又劃分了更詳細的結構化信息,是一個典型的標簽頁少但信息量大的彈窗。



          流程步驟彈窗


          流程步驟彈窗與標簽頁彈窗接近,區別就是步驟彈窗需按順序進行,一般上一步未完成之前無法進入下一步,用戶注冊常用這種方式。


          3、非模態彈窗的應用場景


          1)屬性配置彈窗


          屬性配置彈窗主要為了讓用戶改變某一對象的屬性,可以是局部屬性也可以是全局屬性。


          屬性配置也可以用模態彈窗,如何選擇用“模態”還是“非模態”?當你需要讓用戶實時看到界面的變化或者表單項簡單的時候可以選擇“非模態”,如果操作復雜或者信息加載比較耗時,則采用“模態”更合理。


          下圖為實時生效的日期選擇彈窗

          2)下拉菜單


          下拉菜單幾乎都是非模態,它的優勢明顯,沒有復雜操作和各種表單,只需要鼠標劃過點擊即可,快速。


          3)消息提示


          上文中應用級的消息提示通常是模態彈窗,而非模態的消息提示彈窗則通常從頁面的頂部或者右側彈出,這類彈窗可以長時間駐留在屏幕邊緣,也可以一段時間后自動消失。


          4)氣泡框


          點擊按鈕時,彈出氣泡式的彈窗就是氣泡框,氣泡框可以針對元素進行簡單的操作,尺寸也會根據內容大小不一。


          5)Tooltips


          Tooltips跟上圖的氣泡框很類似,區別在于Tooltips更輕量,屬于頁面中最小的彈窗類型,用于功能的提示說明,通常都是文字,背景用深色來與主界面拉開層次。


          三、彈窗的設計細節和技巧


          1、標題


          一般來說,如果是明確的屬性配置彈窗都應該有一個標題來說明用途或功能,以及關聯的動詞來方便理解。比如“創建列表”、“刪除列表”、“修改配置”、“配置參數”等,不同標題對應不同的功能場景,前提是方便理解。另外,動詞在名詞前面或者后面都可以,注意統一規范即可,不要一會兒在前一會兒在后。


          標題字號一般比默認文本字號大2px或4px,也有應用為了突出標題,選擇使用更大的字號,但大的字號也應該符合文字規范,而不是隨意使用。



          2、關閉


          模態彈窗應至少包含一個以上的關閉方式,常見的彈窗關閉方式有4種:(1)、右上角的關閉按鈕;(2)、彈窗底部的“取消”按鈕;(3)、彈窗外的任意區域;(4)、一段時間后自動消失。


          1)關閉按鈕(彈窗外、彈窗內、彈窗上)



          “關閉”按鈕在彈窗外:常見于營銷彈窗,一方面按鈕遠離彈窗,比較隱蔽,拖延用戶關閉彈窗的時間,提高信息的曝光率。


          “關閉”按鈕在彈窗上:版式設計中有一個“破型”的概念,是一種打破規矩的設計技巧,能讓畫面快速吸引眼球,所以營銷類彈窗經常采用這種設計方法。這種概念可以理解為,我們希望用戶關注于被強調的部分,常見的場景就是ios系統批量刪除App的時候,應用圖標左上角會出現“移除”按鈕。這種方式強調了“關閉”按鈕,視覺上增加層次外,用戶的關閉體驗也更佳,減輕干擾性彈窗對用戶的負面情緒。


          “關閉”按鈕在彈窗內:這是應用最廣泛最不容易出錯的方式,對用戶來說,固定在彈窗右上角的“關閉”按鈕代表了安全感,在誤操作或者想中斷操作時我們會自然而然地去右上角點擊“關閉”。


          2)彈窗底部的“取消”等指令性按鈕


          彈窗底部的按鈕一般有2種功能:(1)、取消或者確認;(2)、進入下一步流程?;诖蠖鄶涤脩粲沂终莆帐髽说牧晳T,一般按鈕居右下角的設計方式更廣泛。這些按鈕上的文字大不相同,代表了對計算機的不同指令,但相同的結果都是關閉了當前彈窗。


          有些應用也會采取按鈕居左的設計,這種方式有一個優點就是減少誤操作,讓按鈕遠離鼠標點擊熱區。



          3)、彈窗外的任意區域


          這種方式一般用于模態彈窗,除了彈窗中的關閉按鈕外,點擊彈窗外的任意區域關閉體驗更佳。操作配置類彈窗不建議采用這種方式,容易誤操作導致正在配置中的彈窗被關閉。


          3、字號


          B端彈窗的標題字號通常比內容文本大2px或4px,常用字號為12px、14px、16px,14px為默認文本字號,12px為輔助說明字號,也有緊湊型頁面將12px作為常規字號。無論選用何種字號,都應跟主界面的字體規范保持一致。


          4、排版


          左對齊:彈窗中應用最多的對齊方式,適合表單較多的配置類彈窗。


          居中對齊:常見于消息提示類彈窗,適合圖文結合或者信息較少時的排版方式。


          兩邊對齊:兩邊對齊的方式讓彈窗看起來更規整,適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式,一方面左對齊比兩邊對齊看起來更有層次,另一方面多表單時兩邊對齊會使彈窗看起來冗長。


          除了對齊方式,表單的排列是B端彈窗中最令人頭疼的一塊內容了,在一些復雜的操作彈窗中,常常包含各種類型的表單,例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項,很容易讓表單看起來凌亂,也影響了交互操作。


          單行一個表單項:常見的表單排列,適用于表單較少的排版方式。


          單行多表單并排:在復雜場景中,單行只排列一個表單項會讓彈窗超長,因此會采用多個表單并列分布的方式。這種方式存在2個問題:(1)、如果表單的標題長短不一,看起來參差不齊,下圖中的表單標題一樣長是最理想的場景;(2)、橫向距離長,導致彈窗過大。


          標題與表單分行排列:越來越多的應用采用這種表單排版方法,這種方法可以兼顧更多場景,可拓展性也更高。這種方法會增加縱向空間的占用,不過眼睛焦點的縱向瀏覽比橫向瀏覽獲取信息效率更高,所以在表單復雜的情況下,相比于上一種方法也是一種更優解。


          表單的排版不只局限于一種,我們需要根據表單內容來設計。但是需要注意3點:

          (1)、當表單標題長短不一,上下無法等距排列時,我們要盡量將標題和表單分行排列;

          (2)、一行不要出現太多的表單項,一般來說彈窗中最多一行排列三個;

          (3)、表單的靈活性很強,哪些需要寬度固定,哪些需要根據內容可擴展可換行,我們都要在設計中加以規范說明,多考慮可能會出現的樣式問題,提前規避。


          5、彈窗尺寸


          彈窗是一個容器,容器的大小取決于放置其中的內容物。這里主要討論場景復雜的對話框的尺寸規范,其他例如Tooltips之類可作為單獨的組件在需要的場景直接調用即可。


          對話框的大小主要根據內容而定,B端應用中,一個尺寸無法滿足所有類型的彈窗需求,所以我們要設定幾種常規尺寸,一般可設定為4種:S(通知提示類)、M(配置簡單)、L(配置復雜或者擴展詳情)、特殊(根據實際情況而定)。pc的小屏幕分辨率為1024*768,所以高度盡量控制在600px以內(除去導航欄、工具欄高度),寬度控制在1000px以內,如果你所設計的B端產品在某個固定的場景中使用,也可以根據使用場景而定,原則就是要讓彈窗能夠一屏展示完全。


          6、設計技巧:巧用sketch組件


          這里主要分享一個小技巧,對于彈窗來說很實用。sketch右側屬性面板有一個“調整尺寸“功能,非常適合各種組件化的應用。不同場景下我們會需要不同尺寸的彈窗,有了這個功能,我們不需要每個彈窗都畫一遍,只需要創建一組基本的彈窗規范,其他尺寸可以根據所需場景調整。



          未調整過的組件不能隨意更改尺寸,否則將變形不可用。


          創建彈窗組件時,把彈窗里需要固定不便的尺寸參數設置好。(設置方法:靠左的左邊固定,靠右的右邊固定,對角的靠兩個邊固定,分割線高度固定,文字圖標寬高都固定)。


          設置好后的彈窗組件即可在設計稿中隨意調整大小,固定參數不會發生變化,因此我們在設計規范中只需要做一種或二三種常見的彈窗樣式即可,不需要把設計稿中的每種尺寸都放到設計規范中。


          表單同理,在組件中設置好參數后,調用時可以根據情況替換圖標、文字和寬高,非常方便。

          結語


          在B端設計中,隨著數據量的增加和業務線的擴大,設計師在設計時,常常需要考慮到交互的可擴展性,我們設計的交互至少要滿足未來半年到一年的產品應用。因此作為使用頻率很高的彈窗,我們在設計時尤其需要考慮全面,不只為了滿足當前的場景,也要考慮未來可能應用的場景。


          最后碎碎念一下,這是一篇從2020年跨越到2021年的文章,加上拖延癥,寫了很久...原本只打算簡單的分享和總結,結果越寫越多,越寫越擴展。其中很多內容是自己在實際工作中遇到的坑中摸索出來的,做個總結也便于自己的成長,歡迎各位大佬們批評指正。


          文章來源:站酷  作者:time不休 

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

          私域構建的內容場景,是零售業的“人場貨”

          資深UI設計者

          疫情之下,很多零售商都開始經營私域流量,私域流量+傳統零售的新模式似乎成為了保持市場增長的新藥方,私域流量也對零售業進行了重新改造。本文將從三個方面對此展開分析,希望對你有幫助。

          研究零售行業中的私域流量,有一個問題值得思考:是什么刺激了零售私域流量的發展?

          今天,市場上移動互聯網的流量紅利消失,線下端人口紅利的消失。包括零售業在內,大部分行業的市場性質,已經從增量市場過渡到了存量市場。

          整個存量市場中,依賴過去傳統的獲客方式,獲客成本在不斷升級,導致商戶之間的競爭激烈。即便各個平臺之間沒有形成自己的流量壁壘,各個商圈中的區位沒有形成壟斷。成本的不斷升級,最終還是會刺激私域流量取代傳統的獲客,成為一種市場成交的新方式。

          私域流量作為存量市場的產物,進一步得到發展的趨勢非常明顯。

          一部分原因是受到了零售商品的屬性影響,大部分的零售商品都是針對特定的用戶人群需求設計,服務定向人群為主。所以大部分的產品有針對性,買一次A商品和買十次A商品的人,大概率是同一批人。

          因為這種情況,讓一個新客戶買一次產品的成本,是要比讓老客戶再多買一次產品的成本,高得多。

          增量時期,大部分商家都沒注意老客戶的運營,當產品慢慢觸達到了市場邊際,積累了一定的市場體量后,下個階段更具有性價比的方向,就是前期一直被忽略了的定向人群的精細化運維,可提升復購性。

          零售行業中,傳統模式的消費者和商戶的接觸,往往是離不開:人、場、貨的。同時一片區域內的線下超市和商店,只能服務這塊區域的客流量,存在地域流量壁壘。

          傳統零售,消費者如果不去店鋪、超市里面,看不到商品的陳列,就可能不會買牛奶、買飲料,就沒辦法形成交易發生。所以傳統零售通過總代、分代、批發商,到零售商,開更多的線下店鋪,打通更多的線下代理渠道,實現獲客和成交。

          但是私域流量+傳統零售的新模式,會讓市場重新審查傳統零售人貨場的模型。讓重點經營的方向也會瞄準老客戶線索的激活和運營,讓老客戶復購和帶新。

          私域流量對零售行業的一些影響

          購物場景從線下(低頻率)轉到線上的可重復性。

          私域流量模式內,用戶和商戶之間的觸點發生了改變,從線下遷移到線上。實體場景代入了內容場景,沒有實體店,照樣可以賣東西。

          1. 零售行業的私域流量,朋友圈的內容文案即終端,內容營造的場景即門店

          從一開始的人、場、貨模式,變成了一種可重復性的“叫賣”模式:一個消費者在社群中、朋友圈、小程序看到了信息推送,正好刺激了購買欲望,就會產生交易。生意的本質是人與人之間的供需鏈接。傳統零售和消費者的“觸點”是線下店,私域流量+零售的模式的觸點是線上的方式。

          類似企業微信這種線上的方式,就幫助商戶綁定了客戶線索。不僅是縮短了商戶和消費者之間的距離,這中間還帶有社交屬性,幫助客戶更好地了解消費者需求,做好用戶需求的細分。

          這種邏輯我們叫做“觸點營銷”,和用戶做朋友,讓熟人關系變成賣貨的渠道。

          觸點,是商戶和消費者之間接觸點,通過接觸點傳遞信息和提供服務。(現在線上端習慣,用社群鏈接和服務消費者)

          比如現在熱門的社區團購,是私域+傳統零售的典型模式。

          原來小區小賣部的老板,觀察到小區的住戶每次都嫌棄買菜的時候,耗時長、不新鮮的問題,于是自己做團長經營私域流量,建立企業微信拉了一個買菜群,幫助小區住戶們“便捷買菜”

          因為更加近距離的服務住戶,老板還可以記錄自己老顧客的喜好,做好SCRM的標簽處理:

          1. 買菜的頻率
          2. 買米的頻率
          3. 買油鹽醬醋茶的頻率
          4. 家里幾口人
          5. 平時買什么類型的菜會多一點

          一段時間之后,老板可以提前幾天進行這些日用品貨物的銷售,給住戶發一條信息:“你好鄰居,今天的豬肉6折,剛從XX現宰的,你看要給你留一點嗎?”這就是利用企業微信這線上端的觸點聯系,建立可重復性的模式。

          這是傳統零售很難做到的,因為傳統零售沒辦法更近一步的接近消費者,所以自己手里是拿不到相關的數據,于是只能把錢都用在優質廣告位、優質區域位上,搶占消費者的視野。

          那些年為了公域流量瘋狂燒錢的平臺:

          2. 決策形式從重度決策轉為輕度決策

          傳統零售場景中,消費者買東西要么認功能,要么認牌子。但是私域模式的零售場景就不一樣,今天的消費者情感消費顆粒度比以前更細,決策情況在發生變化。

          • 傳統零售的決策考慮是:功能消費+品牌消費。
          • 新零售的決策考慮是:功能消費+情感消費+內容消費+服務消費。

          情感和服務因素,會使決策發生的更加快。你身邊的朋友和普通一個銷售,向你推薦同樣的一個物品,正常情況下,你選擇相信你朋友的概率是要大過于選擇銷售的。

          還是用小區小賣部老板的例子,當老板服務多幾次住戶的時候,老板和住戶之間的信任程度會慢慢上升。(情感消費)

          老板了解到消費者的采購米的喜好,可以嘗試給他推薦同品類,但是高單價、味道好吃的大米。在有原來信任基礎的前提下,肯定是有部分消費者愿意嘗試下,因為消費者追求“美味”的需求比較大眾化。

          這種時候消費者的決策程度會由重度決策轉向輕度決策,一句話概括就是:你辦事我放心。

          私域流量中,客戶和商戶的聯系變得非常密切,人即流量,關系即渠道,熟人變熟客。雖然要成為好朋友這個門檻比較難,但是在消費者的決策中,中間的情感因素會影響到消費者的決策。讓決策變的更加的輕度。
          重要的是,信息觸達的成本也降低了很多。據「加一私域」官方統計:以大眾客戶運營每年發12次短信類比,同樣100萬私域客戶的群發觸達每年至少節省20多萬元營銷成本。再加上朋友圈運營,每發送一條朋友圈價值3-5萬元(按騰訊朋友圈廣告1000人曝光 / 30 – 50元為例計算)

          3. 消費場景從消費者找貨的模式,變成貨找消費者

          消費者在對商品進行購買決策的時候,有一個很大的通?。哼x擇困難癥。所以在傳統的零售中,商品的陳列擺放也成了一門學問。貴的、銷售額好的基本上都放在了展架的上面的位置。

          同時很多的零售廠商為了博消費者的眼球,各種商品的包裝也是非常講究的。

          這樣做是為了讓商品,第一時間出現在消費者的面前,提高成交轉化的概率。大部分的消費因為有選擇困難癥,往往第一眼被看到的商品,這些商品的成交率比較高,這就是商品的“C位”效應。

          在私域+零售的模式中,沒有了線下店鋪,內容是私域中商品的唯一的展柜。通過內容構建一個消費場景,實現“貨找人”模式。

          像很多的微商的朋友圈內容,就是構建這樣的“貨找人”場景。朋友圈和社群中的場景,營造的是一種“即時成交”,通過內容構建一種“沖動型的消費場景”,讓交易的發生短、平、快(時間短、速度快、產品平民化)

          私域模式中“貨找人”,就要站在客戶視角,與人近,就會離增長更加近。私域流量模式不是要一下干件大事,而是做對一系列小事;要做對一系列的小事,就要不停的細分,挖細節,挖每一個和消費者接觸的點。

          文章來源:人人都是產品經理  作者:陽俊Orlo

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


          產品經理該如何把業務需求變成產品方案

          資深UI設計者

          產品經理日常工作中最常聽到的詞就是需求,而產品經理的核心工作也就是把需求變成可使用的產品。那當我們接到需求時,我們是如何把它轉化成產品呢?本文將從七個方面進行分析,希望對你有幫助。

          一、對“需求”這個詞的理解

          首先我們先了解一下,在產品開發過程中所溝通的“需求”到底指的是什么。我們先舉幾個我們工作中常常聽到的需求:

          • 老板:現在經營效率太低了,我們要上個系統,提率(目標需求);
          • 財務:每筆費用報銷都要走審批,加強對費用支出的管理(業務需求);
          • 運營:日常經營數據需要支持導出功能,好進行加工分析(功能需求)。

          我們可以將平常聽到的需求都歸為這三類,產品經理需要做的就是將目標需求和業務需要轉化為產品方案,然后交付給開發團隊。

          接下來我們將以羽毛球館訂場地這個業務需求,來拆解一下整個過程,看它是一步步變成產品方案的。

          二、定位業務問題

          場館運營部門提出一個需求,我們需要實現線上訂場地。

          業務需求的提出,肯定是為了解決某些業務問題。通過調研,現在純線下訂場的方式存在以下問題:

          球友:

          • 想運動,但不知道哪里有合適的場館?
          • 不知道場館是如何收費的?
          • 場館有沒有空閑的場地?
          • 場館的有哪些項目?有沒有停車場、淋浴等設施?

          場館:

          • 球友打電話過來,詢問場地價格和空余等情況耗費時間;
          • 新球友訂場交定金麻煩,不交定金又可能爽約,造成場地未預定出去的損失;
          • 人工登記場地預定情況,易產生失誤,導致一場多訂等情況,極大影響客戶體驗;
          • 場地預定情況很難統計成分析數據,對運營決策無法提供幫助;

          業務問題定位了,后面的設計就要圍繞這些問題展開,設計完后要回過來看有沒有解決這些問題,否則一切都是徒勞的。

          三、梳理業務流程

          流程是產品設計的關鍵,梳理流程能讓你對整個過程更清晰。梳理過程前,先要明確下訂場有幾個場景,因為每個場景的流程可能不太一樣。通過調研和分析得知,訂場主要有以下幾種場景:

          • 線上訂場—球友在微信或者APP上訂場;
          • 線下訂場—球友直接到場館前臺臨時訂場;
          • 電話訂場—打電話給場館前臺,讓前臺預留場地;
          • 長期球友固定訂場—有些企業會固定在某個時段訂場,比如周三的18:00~20:00,一次預訂即可,定好有效期,不用每次臨時預訂;
          • 包場—企業搞團建時會包下整個場館;

          這里就要思考一下,我們這次設計是否要滿足這5個場景呢?我們回到定位業務問題這一步,問題都是在想要運動的球友在訂場時存在的,而方式e在線下的處理暫時并沒有多大問題,再深入一步調研可了解到,包場都是直接線下談好價格,這個價格也是可浮動的,然后將錢線下轉給場館,放到線上反而不靈活,所以我們就先不考慮線上實現這個場景。

          Tips:產品經理需要學會做減法,并不是把線下所有業務搬到線上來,開發出來后發現并沒有什么用,又浪費這么多資源。

          將待實現場景確定下來后,我們需梳理每個場景的業務流程,這樣才能對整個過程清晰。因為我們這次只是講方法,所以就只拿場景a來舉例,繼續下面的分析過程。

          我們梳理出線上訂場流程圖后,這時我們需要分析一下,這些環節哪些需要做到線上?

          入場前:訂場、付款、鎖場肯定是需要做到線上的,產品的目標就是為了解決訂場效率低的問題;

          前臺接待:出示訂場憑證、校驗訂場憑證、開燈、放行這些環節并沒有太大的影響效率。出示訂場憑證、校驗訂場憑證可通過報手機號的形式解決。開燈和放行涉及到智能燈控和智能閘機的對接,沒有這些東西業務也能跑的通,也能正常營業,這期也先不考慮在線上實現;

          入場后:到點提示也涉及到智能設備的對接,先可人工提示。

          Tips:產品經理需要定義需求的優先級,先把影響業務正常運行的問題解決掉,再來迭代優化。

          四、梳理業務規則

          業務規則是運營部門為使業務正常運行而定義的,就算沒有系統也是存在的。產品經理需要做的是把這些業務規則梳理出來,然后用產品的語言把它描述出來。還是以線上訂場舉例,場地什么時候可以訂?訂的時候有沒有時間限制?價格會由哪些因素影響?可不可以退場?會員有沒有什么特殊權限?這些規則聽著是不是很亂,這就需要產品經理一條一條梳理清楚,梳理規則的同時還需要多問為什么要這樣做呢,一來以后方便和開發等同事說清楚為什么這樣設計,二來也能加深自己對業務的了解。

          通過調研我們梳理出以下預訂規則,但我們需注意以下兩點:

          • 這些規則都是比較容易通過調研得到的,還有一些隱性的規則,調研的時候很難得到,可能在產品上線一段時間后才能想到。例如訂場后要在一定時間內支付,不支付就將場地變成空閑狀態。產品上線后這種規則缺失一定會暴露出來的,但產品經理最好能提前考慮到這種規則,盡量避免損失。
          • 這些規則僅僅為一個場館的規則,為將產品的適用更多的場館,也為防止以后場館的業務規則變動,盡量做成可配置的。

          以上只列舉了線上訂場的預訂規則,還有退訂規則、價格方案規則、會員權限等規則都需要一條一條梳理出來,這里就不一一列舉出來了。

          五、繪制原型

          業務流程和業務規則都梳理出來后,就可以畫原型了。這一步對產品經理來說,即簡單又困難。簡單是因為去想象具象的軟件操作比思考抽樣的業務邏輯更容易,難是因為畫的原型最終要符合業務流程和業務規則,并且還要符合常規交互原則。

          從業務流程分析,整個訂場環節涉及到球友和場館,那肯定要有球友訂場端和場館管理端。球友訂場端剛開始也沒必要做APP,做個H5放在微信公眾號就可以了,還能引流到公眾號。確定好用什么來實現后,我們要梳理一下線上訂場有哪些頁面,不要想到一個畫一個,這樣很容易漏頁面。


          Tips:剛開始設計原型時,盡量不要添加一些和主流程無關的頁面,比如你覺得別人做了個VR查看場館,你也要做一個,但是前期最重要的是把業務跑通,再來添加一些附加功能。

          工具類產品原型設計多參考一下美團、淘寶等移動端產品,因為移動端產品發展到現在,已經培養了用戶的操作認知,我們不用去發明輪子,讓用戶再重新去學習。

          六、可用性測試

          產品的原型出來了,可以給客戶演示,讓客戶跑一遍整個流程,看先前提的業務問題有沒有得到解決。如果有問題,再進行調整。其實讓客戶跑一遍流程也不能發現所有問題,只有在真正使用的時候才會暴露出問題來,但這一步也是不可少了。

          七、撰寫PRD

          PRD全稱為Product Requirement Document,中文名為“產品需求文檔”。其核心目的是幫助開發、測試、運營、產品人員理解該需求的背景和具體要求,減少產品實現過程中諸多不必要的重復解答,從而提升整體項目推進效率。當業務規則、業務流程、原型圖都出來后,我們需要把它交付給我們的開發團隊去實現,交付的形式就是PRD。這里就不闡述PRD怎么寫了。

          八、總結

          當接到業務需求時,變成產品的過程是:

          • 定位業務問題;
          • 梳理業務流程;
          • 梳理業務規則;
          • 繪制原型;
          • 可用性測試;
          • 撰寫PRD。

          以上只是個理想化的流程,產品經理并不是寫完PRD扔給開發就沒事了。包括后面的需求評審、跟進開發進度和問題、測試上線、迭代優化等,都需要產品經理主導。

          文章來源:人人都是產品經理  作者:康力文

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


          如何構建品牌體系?網易智企品牌體系化建設實錄

          資深UI設計者

          導讀

          品牌體系的長期價值是什么?如何構建完整品牌體系?

          本文將以網易智企品牌設計體系的建立過程為案例,與大家分享一下品牌體系化過程中的經驗和總結。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 網易智企-品牌設計體系

          目錄

          • 背景:從產品走向事業部
          • 研究:品牌體系的不同構建方式
          • 策略:選擇合適的品牌體系構建策略
          • 設計:從品牌字體到框架規范
          • 標準化:設計文檔與流程規范化
          • 推進:發起會議正式確立體系
          • 成長:體系的不斷自我成長
          • 傳承:網易品牌設計
          • 生態:品牌體系的長期價值
          • 資料獲取

          背景:從產品走向事業部

          網易智企是一站式企業服務提供商,依托 23 年 AI、大數據、通訊音視頻技術,以 PaaS、SaaS 為主,提供智能化、數據化、場景化的企業服務解決方案。

          網易智企的前身,是網易云信和網易七魚兩個的產品。2019 年初,網易集團決定整合 B 端資源,成立一個新的事業部——網易智企,并在此之后陸續打造了網易定位、網易互客等多個優秀產品。

          至此,網易智企的品牌架構由兩個獨立的產品品牌,逐漸變成了事業部品牌+多個子品牌的品牌架構。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          但是,因為原有的兩個品牌(即云信、七魚)已經運營多年,在設計上并不統一。而事業部品牌為新設計的品牌,再加上其他的子品牌,最終造成了多個品牌在設計上“各自為政”的現狀。

          并且隨著網易智企的快速發展,子品牌不斷的變多,我們與市場部同學便逐漸發現了一些問題。下圖是市場部同事在 2019 年發表在朋友圈的一張圖,便是當時品牌的現狀。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 網易智慧企業現狀(2019 年初)

          雖然產品線愈發豐富,整個事業部也在不斷成長中。但是,若是品牌設計體系不夠清晰,將會對未來的品牌傳播造成非常多的問題,之后的修正成本也會越來越高。

          如何改變現狀?我們是否能夠主動去推動事業部進行整體的品牌升級?能否通過設計去構建一個完整的體系,以滿足網易智企未來的發展需要?

          因此,在發現這個問題后,我們便馬上開始了品牌設計體系的構建工作。結合之前的品牌經驗,并在查閱大量資料進行研究后,逐步制定了完整的解決方案。之后與市場部同學一起合作,共同推進了品牌體系的構建與落地工作。

          研究:品牌體系的不同構建方式

          在企業的成長過程中,隨著業務的不斷拓展,自然而然地會產生越來越多的子品牌。在這個過程中,許多優秀的企業通過長期的實踐,通過不同的方式,逐步構建了屬于自己的品牌體系。比如聯合利華、大眾企業集團、蘋果、雀巢、谷歌等等。

          品牌體系一共有哪些構建方式?他們分別適用于哪種情況?而我們又應該用何種方式去構建品牌體系呢?

          帶著這些問題,我開始進行了品牌體系構建的研究。通過大量的案例分析與調研,我總結了以下幾種最常用的品牌體系構建方式:

          1. Free Standing 自由家庭式

          自由家庭式,顧名思義,一切皆為 Free Style。子品牌與母品牌幾乎無關聯系性,完全自由地進行各自發展,因此品牌在設計上和基本毫無關聯性。

          這種品牌模式,通常適用于強子品牌戰略的集團公司。不同的子品牌之間并無依存關系,也不需依靠其他子品牌、母品牌進行背書。而是各自在領域中獨立運營,甚至形成差異化競爭,以擴大在單領域的品牌豐富程度,占據更大的市場份額。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ Free Standing 自由家庭式

          比如聯合利華集團,所有子品牌幾乎均采用自由家庭式,在不同的細分領域擁有多個子品牌。比如個人護理用品領域,主要品牌有旁氏、多芬、Iluminage、卡玫爾、清揚、凌仕、中華、力士、夏士蓮、舒耐、凡士林等。食品系列品牌有家樂、老蔡、立頓、四季寶、凈水寶、可愛多、夢龍、和路雪等品牌。

          很多品牌你甚至意想不到這是出自聯合利華之手(或者被收購了),但仔細查看產品介紹,均會發現聯合利華的身影。而在產品廣告的最后 1 秒,也會快速出現聯合利華這個“爸爸”的身影 。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 聯合利華集團-品牌體系

          再比如 VOLKSWAGEN(大眾汽車集團),所有子品牌也均采用自由家庭式。旗下有奧迪、斯柯達、賓利、西雅特、布加迪、保時捷、蘭博基尼、大眾、斯堪尼亞、杜卡迪等眾多子品牌。通過差異化競爭,在汽車行業的不同領域(家用車、豪華車、摩托車、重型卡車、巴士等)的不同級別中,均占據了不錯的份額。

          面對不同的消費群體和階層,品牌需要承載不同的品牌概念,解決不同的問題。因此,只有采用自由式家庭式的品牌家庭,才能在不同的領域中有針對性地進行品牌的建設。

          當然,這種方式也具有一定的負面作用。如果當兩個子品牌在同一領域重疊性較大時,容易導致品牌在“內部競爭”中逐漸弱化,比如斯柯達汽車的定位與大眾汽車重疊性過大,定位區分不明顯,而與大眾的三大件又是相同的,因此逐漸在市場中被邊緣化。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 大眾汽車集團-品牌體系

          我們可以總結一下自由家庭式品牌體系的優劣勢。

          優勢:

          • 子品牌更靈活,更有利于差異化競爭。
          • 可以針對同一行業進行不同層次的用戶獲取,提升單品類占有率。
          • 子品牌危機,對母品牌營銷較小。

          劣勢:

          • 品牌一致性差,用戶難以感知整體品牌感,不適合弱子品牌型企業。
          • 用戶難以形成整體品牌歸屬感,無法通過母品牌進行有效地用戶遷移。
          2. Gene Delivery 基因家庭式

          基因家庭式,即母品牌與子品牌擁有部分相同的元素或風格特征,并通常具有延續性,而這種元素被稱為品牌基因。

          基因家庭式是品牌體系中最為常見的表現方式,它通常適用于強母品牌的集團企業。此類公司通常在母品牌發展成熟后,基于母品牌進行其他領域的拓展,逐漸形成不同的子品牌。因此,子品牌需要延續母品牌的基因作為背書,從而提升子品牌的知名度與信譽。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ Gene Delivery 基因家庭式

          而基因家庭式這個大的方向中,按照基因傳遞的方式進行細分,又可以歸納為以下 3 種最典型的形式:

          基礎版:將母品牌圖形直接融入到子品牌中

          比如雀巢公司的部分重要子品牌中,都將母品牌的品牌文字融入到品牌圖形中,而這也是雀巢母品牌最容易識別的部分。

          通過這種方式,子品牌既保持了相當程度的自由度,同時用戶也能直觀地通過品牌基因識別出子品牌與雀巢母品牌的關聯性。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 雀巢公司-品牌體系

          以及美國聯邦快遞 FedEx,則是以母品牌為基礎,通過改變局部顏色、增加品牌文字等方式來構建其不同的子品牌。保證了一定的差異化的同時,與母品牌形成了強關聯,達到了比較強品牌延續性。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 美國聯邦快遞-品牌體系

          進階版:提取母品牌關鍵特征,融入子品牌中

          比如亞馬遜公司,將其標志性的“箭頭笑臉”提取出來,與各自不同的子品牌字體組成了新的品牌。這種方式相對于基礎版又提高了更高的靈活性,但同時也保持了相當程度的品牌延續性。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 亞馬遜-品牌體系

          高階版:提取母品牌基因,通過重構形成子品牌

          比如 google 公司的新品牌與其各子產品的關系。通過提取統一的顏色以及扁平化的紙片效果,經過重組以后得到不同的圖形,形成自由度極高,但又擁有高度統一性的品牌體系。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ Google-品牌體系

          但是,這種方式在設計上的要求較高。如何在差異化的同時,保持一定的品牌關聯性,需要非常精準的把控。

          我們可以總結一下基因家庭式品牌體系的優劣勢。

          優勢:

          • 整體品牌感強,用戶容易進行感知,并進行品牌遷移
          • 靈活性、豐富性較高,可針對不同產品進行差異化設計
          • 擴展性強,后期延續更輕松

          劣勢:

          • 需要母品牌有較強的影響力
          • 品牌基因的延續上,需要平衡統一性與差異性,需要精準把控
          3. Clone Family 克隆家庭式

          克隆家庭式,即子品牌直接使用母品牌的品牌圖形與品牌字體。子品牌通常與母品牌在品牌上毫無差異,或者保持圖形、顏色、字體等特征的高度統一性,只進行文字內容的更換。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ Clone Family 克隆家庭式

          比如蘋果公司與其所有子產品的品牌,直接沿用蘋果的主圖形,并配合統一的色值、字體、間距等品牌規范,僅在文字進行相應的命名。通過幾乎一致的品牌表現,當你識別任何一個子品牌時,便能感受幾乎一致的品牌傳遞,甚至是各種細節,比如包裝風格、說明書等等。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ Apple-品牌體系

          當然,嚴格意義上來說,你可以認為他們只是同一個品牌。但當一個單一屬性的品牌需要擴張到更多品類時,就必須帶上相應的屬性。你可以認為“iPhone”、“MacBook”、“TV”只是品牌的附加說明,但當他們組合在一起并出現在新的品類中時,便是一個新品牌的概念了。

          這種品牌體系通常適用于企業在同一個的領域中,開拓不同的細分領域。他們傳遞的品牌概念與價格定位是一致的,比如蘋果的所有產品都代表科技感、細節完美、設計精良,在價格上也通常占據比較高的層級。

          但是,這種方式也具有一定的局限性。因為你必須保證所有子品牌所傳遞的上述所有特性,都與母品牌是一致的。如果某一項有差異,則品牌母品牌所蘊含的一切將不能被子品牌的用戶群體所接受,這也是當時 iPhone 4C、5C 失敗的原因。當你的價格定位與母品牌存在差異時,你的用戶便不再認同這個子品牌,以及背后傳遞的一切。

          為什么小米要開拓紅米系列、華為要開拓出榮耀系列,為了他們放棄克隆家庭式而轉向自由家庭式?就是這個道理——你不可能靠一個品牌傳遞不同的聲音。

          我們可以總結一下克隆家庭式品牌體系的優劣勢。

          優勢:

          • 統一感強,用戶無需更多的記憶,可直接進行品牌印象遷移
          • 低成本,可以無需更多的設計與推廣活動

          劣勢:

          • 同一種品牌圖形,不一定適合不同的產品
          • 缺乏變化,用戶難以感知與產品間的關聯
          • 容易引起品牌層級的混亂,致使整個品牌家庭崩潰

          策略:選擇合適的品牌體系策略

          1. 確定策略

          通過網易智企品牌現狀的分析,并結合智企未來的發展需要,我們最終確定——使用基因家庭式-進階版(即提取母品牌的關鍵特征,融入到子品牌中)的品牌體系是最為合適的。因為這種方式既能保證品牌設計的整體統一性,又能保持足夠的靈活性,以適應不同品牌的需要。

          但是,提取什么樣的品牌基因是最合適的?

          網易七魚、網易云信原本就擁有多年的產品歷史,如果只提取一方的基因,顯然不太合適。如果大改品牌圖形,則會對原有用戶的認知產生較大影響,并不是一個理想選擇。

          最終,我們決定了一個大膽品牌策略——以品牌字體作為品牌基因的承載物,并通過標準化的框架規范使品牌的整體一致性得到的統一。通過這種方式,也可以將品牌圖形的自主設計權留給子品牌。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          這種品牌策略的主要優勢有:

          整體品牌感強,品牌基因容易延續。

          后續可將品牌設計流程標準化,提升設計與一致性。

          原有品牌可只升級品牌字體和框架規范,保持原有品牌圖形,從而不影響用戶認知。

          通過這種方式,我們可以對原有的網易七魚、網易云信,以及網易智企的品牌做一個統一的升級,小幅優化品牌圖形、統一品牌結構,并以全新的字體風格重構品牌字體。這樣,我們既能夠達到設定的目標,又能夠最小程度的對品牌認知造成影響。

          2. 可行性調研分析

          這種構建策略是否可行?想要讓相關人員理解這個策略,僅僅依靠設計方案是不夠的。因為大家的視角不同,并不一定能夠從設計的角度去理解。因此,我們必然要充分地進行論證,并拿出相關的案例去佐證,才能讓設計體系的的推進更具實踐性。

          通過市場調研,我們分析了最近 10 年中優秀的品牌升級案例。在這其中,騰訊的品牌升級案例與我們的策略非常契合。

          2017 年 11 月,為慶祝即將到來的 20 周年,騰訊發布了一款新字體——“騰訊字庫”,并借此機會對部分品牌進行了升級,以此來加強整體品牌感。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          通過發布全新的品牌字體,騰訊公司構建了以品牌字體為核心的品牌體系,并取得了良好的效果。而這種品牌體系的構建方式,與我們的設想不謀而合。

          因此,我們認為以品牌字體為核心的品牌體系構建策略是完全可行的。但是,這種方式所需要投入的資源是巨大的,且周期通常比較漫長。

          我們又如何克服這個問題?

          雖然無法得到如此多的資源,但我們可以通過合理的計劃與推進策略,逐步去構建整個體系。不斷地進行策劃、構建、落地、完善,形成一個完整的閉環,通過不斷實踐去提升、豐富這個體系,最終讓這個體系變得越來越完整。

          確定策略之后,我們開始著手進行品牌體系的構建工作。

          構建:從品牌字體到框架規范

          1.  品牌字體設計

          品牌設計體系的構想雖始于 2019 年初,但真正的準備工作則始于兩年前。在我剛接觸網易七魚和網易云信時,便發現了品牌中存在的一些問題。雖然沒有合適的時機進行品牌升級,但研究和嘗試則不斷地進行中。

          在此期間,我開始著手設計一款全新的專屬字體,也就是之后的網易 B 端產品的統一品牌字體。

          通過對于網易智企品牌調性的分析,以及未來發展的需要,我確定了品牌字體的基本調性:現代、簡約、剛正、大氣、品牌基因的融入。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          作為科技類企業品牌的字體,它應該是有現代感和設計感。其次,為了適應不同的產品調性,同時傳遞出信任感,我希望它是剛正、大氣的。最后,作為品牌體系的載體,它必須具備專屬的品牌特征,才能以此為基礎形成統一的品牌體系。

          因此,在字形的結構上采用了較為剛正的框架,干脆利落的同時,在轉角帶有一定的弧度。方中帶圓,剛中帶柔,形成美學上的互補。而在遵從中文字體結構的同時,也對筆畫本身進行了適當的簡化(比如勾,用切割式的筆畫代替上勾,但感知上仍然是勾),讓字體更具現代感與簡潔感。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          而整個字體的靈魂,則是將網易的特征以筆畫特征的形勢融入字體中。貫穿始終、恰到好處,使其作為統一的品牌基因延續在品牌家庭中。

          網易的建筑風格在所有公司的大樓中,都是屬于非常有識別性的。除了深邃而低調的色彩外,整個建筑從外形到地板、再到每個細節中,都將擁有獨特切角的菱形融入其中。因此,我將這獨有的菱形的四個邊單獨拆分,作為字體的基本筆畫。通過簡單的移動,四個邊正好形成了網易的首字母“W”。繼續移動,將其從兩邊的翅膀往中間壓,則形成了一個網狀的 XX 形狀——這不正是網字中間的圖形嗎?

          網易建筑風格——網易的“W”——網易的“網”,網易的基因就這樣融入到字體中。而另一個更重要的特征,則是這四個筆畫與水平線相交,所呈現的統一傾斜角度——80度切角。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          2. 初步制定框架規范,預先進行品牌升級

          完成字體風格的定義后,下一步就是以品牌字體為核心,進行原有 2 個品牌升級的方案設計。

          首先進行的是網易云信的品牌預升級。將網易云信的品牌字體以全新的字體風格進行重新繪制,并結合品牌圖形制定了全新的品牌框架。比如品牌圖形與品牌字體的間距,確定為字體高度的 1/2,而安全距離則定義為與字體高度相等間距等一系列規范。

          通過初步的框架制定,一套圍繞著品牌字體的初步規范便制定完成了。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          完成云信的品牌預升級后,又進行了網易七魚的品牌預升級。因為原有的品牌圖形存在一定的優化空間,除了品牌字體重新繪制與標準規范外,還對品牌圖形和品牌色做了升級,讓品牌圖形保持原有識別性的基礎上,更加圓潤、靈動,顏色也更具科技感。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          通過兩個品牌的預升級,除了初步對整體框架規范進行了制定,也對品牌字體的品質和實用性也得到了良好的驗證,為接下來品牌升級工作的推進奠定了一個比較好的基礎。

          標準化:設計文檔與流程規范化

          1. VI 設計文檔

          品牌設計不僅僅是完成圖形的設計,更重要的是使品牌在后續使用中更加規范,而品牌 VI 識別系統是其中最重要的工具。文檔的初衷并非約束設計,而是使品牌設計的流程更加標準化,提升非關鍵環節的工作效率,讓設計師將時間真正聚焦于的品牌創意階段。

          因此,我們制定了適用于不同場景的 VI 設計標準文檔。整個文檔的設計準則:一致性(整體框架、頁面結構高度一致)、專業性(文字表述、規范演示高度專業)、靈活性(允許在框架中的尋求靈活創新)。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          封面樣式:推薦的默認為標準品牌色+Logo 圖形樣式,除此之外還提供了背景圖,在保持框架一致的基礎上,也具備了一定的靈活性。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 封面樣式

          目錄樣式:提供基礎版的 2 個模塊版式和 3 個模塊的版式。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 目錄樣式

          內容框架:文字說明的區域與版式,內容區域的不同分割模式,盡可能地適應不同的內容需求。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 內容框架

          2. 品牌展示規范

          在品牌的傳播和使用中,VI 識別手冊相對專業性會更強一些,而在平時的展示中,更多的會進行單獨的品牌展示。因此,我們也為此制定了不同場景下品牌的單獨展示規范,以及在標準尺寸(1920×1080)下的頁面布局、圖形顯示比例等規范。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 品牌圖形單獨展示

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 橫式標準組合

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 豎式標準組合

          3. 為新品牌制定 VI 系統

          完成標準化的 VI 設計文檔后,下一步便開始著手進行新品牌的 VI 識別手冊的設計工作。按照我們已經制定完成的設計文檔,品牌 VI 識別規范的輸出效率得到了較大的提升。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 網易云信-VI 視覺識別系統

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 網易七魚-VI 視覺識別系統

          最終,我們完成了兩個品牌的 VI 視覺識別系統,為后續的體系化推進做好充分的準備。

          推進:發起會議正式確立體系

          通過全新品牌字體與品牌規范的確立,并完成了 2 個品牌升級、1 個新品牌設計以后,我們將完整所有的準備工作整理成一個完整的提案。

          下一步,就可以發起正式的品牌升級研討會了。會議目的是通過整體的背景分析與方案呈現,讓各相關方都能夠達成一致意見,最終完成正式的品牌體系落地。

          1. 提前與關鍵相關方溝通,對齊目標

          在準備好充足的方案后,如何推進并最終落地?

          這是非常關鍵的一步,也是許多設計師比較不擅長的領域。想要順利的推進項目,光靠一個好的解決方案是不夠的,還需要在正確的時間點,尋求各相關方的支持。

          因此,首先就需要了解各相關方對于品牌現狀的看法,并通過現狀的分析,初步對齊我們的“項目目標”——即解決長期的品牌混亂問題,而這也是我解決問題的初衷。只有對齊了目標,我們才能站在共同的出發點,并在合適的事件拋出解決方案。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          下圖是當時與其中一個市場側關鍵相關方溝通的過程。當我們分析完目前的現狀后,相關方對目前的現狀表示認可,并期待解決方案。這個時候,我們再將已經成熟的方案展示出來,才能讓相關方站在同一角度去思考問題,并最終認可解決方案。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          之后,我以相同的方式詢問起產品側和其他側的相關方。大家在對齊目標以后,都有一個比較清晰的認知,也對我提出的解決方案非常認可。這時候,我們的項目便有了進一步推進的基礎。

          2. 發起會議,正式推出方案

          通過提前的溝通,確定了各相關方的態度,同時了收集了一些小小的意見,并對方案進行了微調。之后便與各相關方正式地發起了品牌升級會議。下面是這次會議的簡要過程:

          會議開始后,我們首先進行背景分析。

          為什么需要進行品牌升級?簡要分析 2019 年初智慧企業的品牌現狀,以及智慧企業未來的品牌發展方向:整體品牌感弱,品牌一致性過差,無法滿足智慧企業長期的發展需要。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          同時,我們也對目前現有的品牌設計進行分析,發現了較多的問題。比如品牌字體的風格不統一、比例不一致、色值不統一等問題。而這些問題可以也可以通過品牌升級進行解決。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          最后,隨著網易智企的快速發展,智慧企業的子品牌會越來越多,而品牌聯合推廣的頻次將會越來越高。這意味著品牌 Logo 設計混亂的現狀將會產生越來越大的影響力,而我們的修正成本將會越來越高。

          為了解決這幾個方面的問題,我們推出了最終解決方案——進行品牌升級,并建立網易智企品牌設計體系。

          如何建立品牌體系?

          通過策略分析與市場調研,以及未來網易智企發展的前瞻性思考,我們最終確定使用基因家庭式-進階版的品牌體系是最為合適的,即提取母品牌的關鍵特征,融入到子品牌中。通過這種方式,我們對網易七魚與網易云信進行了整體的品牌升級,并為所有新品牌制定了詳細的 VI 識別系統。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 品牌升級會議 PPT

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          經過這套完整的方案闡述,大家在會議中一致通過了網易七魚和網易云信品牌升級的方案,并對以品牌字體+品牌規范為核心的品牌設計體系表達了正式認可。

          3. 以規范對事業部 Logo 進行升級

          品牌設計體系經過各方認可以后,推進主品牌的升級就輕松多了。由于原有事業部的品牌字體和品牌色存在一定的設計問題,在確定了品牌體系的標準字體與規范后,我們便順勢對事業部的品牌進行升級。

          當一個體系被認可后,遵循這個體系就變成了理所應當。因此,網易智企主品牌升級的工作也得到大家的認同,并順利推進下去。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          之后,我們同樣為網易智慧企業主品牌制定了詳細的 VI 識別系統。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          △ 網易智慧企業-VI 視覺識別系統

          至此,我們已經完成了現有的主品牌進行了整體的升級,網易智企的品牌矩陣已經初步形成。對比原有的品牌矩陣,整體品牌感得到了極大地提升。同時,也將會對之后的新品牌形成良好的規范,并促使這個體系不斷地成長。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          4. 發送郵件,全員通知并規范使用

          通過會議并得到各相關方確認后,最后一步便是發送正式的品牌升級郵件了。

          通過發送郵件,正式宣布品牌升級,并通知每一個關鍵相關方。這就相當于合同的最后一步,整體體系便正式地得到了確認、生效。同時也將 VI 手冊和設計文檔同步給大家,引導各方正確地進行品牌使用。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          成長:體系的不斷自我生長

          1. 不斷豐富的品牌矩陣

          隨著網易智企的快速發展,我們的品牌也逐漸增多。從 2019 年初進行品牌預升級,到 2019 年底,我們一共推動了 4 個產品進行品牌升級,并以新的規范進行了 4 個新品牌的設計。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          有了品牌設計體系后,大家對品牌設計的態度也發生了明顯的改變。

          每當有新的產品需要進行品牌設計時,大家便會自覺地去遵循這個體系——“按照品牌體系的標準設計即可”。“我們只需要按照體系來就行了,剩下的圖形創意工作就交給你們了”。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          在此之后的每個新品牌設計,我們都按照標準化的設計流程進行,將重點的工作投入在圖形的創意上,而不是反復地去嘗試各種風格。我們的品牌設計效率得到了極大的提升,而各方對于品牌方案的確定也變得順利多了,因為大家只需要判斷圖形是否符合產品特點即可,無需反復對比各種品牌風格。

          2. 英文品牌規范的加入

          隨著品牌設計體系的不斷發展,我們的品牌將不僅僅局限于中文,也會涉及到單獨的英文品牌。經過我們的長期實踐,英文品牌規范應運而生。

          MCtalk 是網易發起,由網易智慧企業部主導的科技活動品牌:通過匯聚深度思維(Mind) 和頂尖創意(Creativity)來打造價值集合與傳遞的平臺。包含 MCtalk Forum 論壇、MCtalk Conference 峰會、MCtalk Live 分享、MCtalk Park 開放日和 MCtalk Academy 私享會等系列活動。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          3. 周年數字品牌規范

          隨著不同產品線周年慶,許多品牌會設計專屬的周年組合樣式。為了因為不同周年 Logo 而影響產品統一性,同時減少了不必要的工作,我們設計了品牌+數字周年的品牌規范。

          每個品牌都可以應用統一的周年組合形式。讓不同品牌在周年組合中,也能擁有統一的品牌感。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          但是,周年品牌規范的統一,并不意味著每個活動獨特性的缺失。我們仍舊可以圍繞數字+主題發揮出強有力的創意,為每次活動創造豐富的主視覺。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          傳承:網易云商品牌設計

          隨著品牌設計體系的設計規范與標準化文檔已經逐步成型,這份文檔可能會發送給許多設計師進行使用。但是,具體設計時,許多設計師可能會產生一些疑問,導致字體設計、圖形設計上面會出現問題。

          那么,如何使用這份框架規范,正確地進行品牌設計呢?下面,我將以網易云商的品牌設計過程為例,大致演示一下這個流程。

          1. 品牌字體設計

          品牌字體的設計,我們在文檔中給出了統一的字體風格,以及目前已經設計完成的品牌字體。如果字體已經存在,則可以直接獲取,無需重復設計。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          比如網易云商的品牌字體中,“網“”易”“云”三個字已經出現過,則直接取用,根據規范進行“商”字的設計即可。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          字體的設計,大概有三個步驟:

          確定字體的骨架:字體設計,首先要保證字形的結構準確,遵循漢字的書寫規律。否則,將會影響字體的易讀性,讓字體看起來不夠自然。這一步,推薦多去借鑒已有的一些優秀字體,網易正體的字形結構,參照了“方正正中黑簡體”和“黑體”這兩個字體,在設計時可以先研究相同字形的筆畫結構。

          融入品牌基因:品牌基因,包含了橫線末端 80 度切角,折角處的圓角,勾、點的簡化處理等統一風格。同時,筆畫帶有細微的圓角,使字體本身剛而不銳。

          整體調整,細節優化:最后一步,則需要憑借字體設計經驗,對筆畫進行優化,使其遵循字形結構的前提下,更嚴謹、更具設計感。這一步,若沒有相關經驗,建議與我或者有字體經驗的設計師進行探討。每個字體力求嚴謹、優美、更有設計感,以便未來其他設計師使用。

          2. 品牌圖形設計

          品牌圖形的設計,是品牌設計中最為關鍵的一個部分。設計師需要在契合品牌理念的基礎上,設計出最符合需求的品牌圖形。也需要讓品牌圖形在風格上保持相對一致。

          在網易智企品牌體系中,推薦以平面化的圖形進行品牌設計。這樣能夠保證圖形足夠簡潔,并適應不同的場景使用。同時,品牌圖形應盡可能地與母品牌保證一定傳承、關聯性。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          通常情況下,設計師需要在充分理解概念的基礎上,進行多個方向的嘗試。最終逐漸縮小范圍,直至最終方案的確定。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          網易云商的核心概念是,成為企業的商業增長服務平臺。因此,“增長”這個概念應該貫穿于品牌圖形中。而云商的產品皆為 SaaS 產品,而“商”的首字母是“S”,因此,S 也成為云商的一個標志之一。云商的目標,希望打通企業營銷全鏈路,因此,全鏈路也成為附屬的概念之一。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          因此,整個品牌圖形呈現的是一個向上增長的字母“S”,它像火箭一樣向上發射。而整個圖形,則由三段線條構成流暢的“S”線條,寓意三個品牌所形成“營銷全鏈路”的概念。

          為了讓整個圖形更嚴謹、細節更完善,在大致確定品牌圖形后,設計師還需要巧妙地通過輔助線,去完善和優化整個品牌圖形。為了避免切角過于尖銳,也同樣在轉角處加入了細微的圓角,使其優雅而柔和,并且更好地與品牌字體相契合。

          3. 品牌基因的延續

          網易云商是網易智企旗下的商業增長服務平臺, 旗下包含網易七魚、網易定位、網易互客三大產品。因此,品牌的傳承性顯得尤為重要,如何巧妙地表現出其中的關聯性,是品牌圖形能否承載更多含義的關鍵。

          在品牌圖形的風格中,網易云商的圖形使用了與網易智企相同的線形風格。同時,線條的傾斜角度,也延續了網易智企品牌圖形的 25 度傾斜。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          在品牌圖形本身,則巧妙地融入原有的 3 個子品牌特征。比如線條末端傳承了七魚的魚形尾部,上下兩個線條傳承了互客的“互手相連”圖形,而線條前部的尖角則傳承了定位“精準尖頭”的圖形。

          雖然這三個原有的品牌,之后將逐漸融合成新的品牌。但是,它們并沒有消失,而是以另一種方式進行了延續。有延續、有情感、有溫度,才能讓用戶更有記憶度,也更能讓陪伴了這么多年的圖形有一個精神的傳承。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          同時,整個圖形又像一個 DNA 雙螺旋基因,互相環繞增長。寓意網易云商,將成為企業的增長基因這一概念。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          最后,通過統一的品牌框架規范,將品牌圖形與品牌字體進行結合,形成了最終的完整方案。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          4. 制作完整品牌 VI 識別系統

          最后一步,便是按照 VI 標準文檔,快速進行品牌 VI 識別手冊的設計。標準文檔中已經覆蓋了基礎的品牌使用規范,如果需要增加規范,可以按照相同的版式進行手冊內容的新增。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          生態:品牌體系的長期價值

          隨著更多品牌的加入,品牌設計體系的大家族也變得愈發豐富了。我們不僅獲得了一個高度體系化的品牌矩陣,同時也形成了一套更、更規范的企業品牌設計流程。并且,隨著我們的影響力不斷擴大,逐漸也吸引了更多品牌加入到這個體系中…

          1. 自我成長的字體庫——網易正體

          在每次新品牌設計的過程中,都會遵循統一的字體風格進行新字體的繪制,品牌字庫也因此不斷豐富。我們希望它最終將成長為一款完整的品牌字體,并對其進行了正式的命名——網易正體。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          我們并不刻意去“生產”字體,而是讓其自然地隨著新品牌的加入不斷的成長。

          需要說明的是,雖然我們將字體的設計權交給設計師,但我們仍舊會對每個字體進行評審。除了字體風格的統一之外,我們對字體本身的基本要求也同樣嚴格,比如字形結構的正確性、字體美感是否達到標準等。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          隨著品牌體系的影響力越來越廣泛,我相信我們的品牌字庫也會越來越豐富、完善。我們也歡迎更多的內部品牌遵守這套規范,一起加入網易 B 端品牌設計體系、網易正體的“共創計劃”中。

          2. 標準化的設計流程,更高的設計效率

          通過對于整個設計流程的優化,我們將品牌的框架規范設計、品牌字體設計、品牌 VI 規范這幾個流程進行了標準化,以此來提升整體的設計效率。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          設計師可以將更多的精力專注于前期的品牌圖形與概念的創意上,而之后的工作可以用這個標準化的流程來完成。更重要的是,這并不是單純設計層面的流程,二是經過整個團隊確認的流程。 因此,只要圖形創意獲得通過,那么后續的流程便可以快速完成可出產出,無需再次與各方確認。

          通過實際的測算,對于傳統的設計流程,我們可以將品牌字體的設計時間提升越 60%(如果字庫足夠豐富,那就是 100%了),整體規范輸出效率提升 80%。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          最終,我們通過這套標準化的規范節約了大量的時間,同時逐步構成了非常完整的品牌體系。我們也希望這套標準化流程能夠幫助更多的品牌。

          3. 圍繞品牌體系的內部生態

          我們通過不斷的品牌設計與升級工作,通過不斷成長的品牌、不斷完善的標準化流程,最終完整了網易智企的品牌設計體系的建設工作。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          基于所有的 VI 規范都是同一標準的,所有場景的規范可以任意組合、替換,這使得我們可以以統一標準輸出給市場、產品人員,并逐步去建立后續的統一規范。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          隨著品牌體系的完善,我們的推設計廣體系、產品設計體系才有了建設的基礎。圍繞市場側,我們建立了統一的推廣體系,用以規范線上線下的推廣輸出規范,產品官網的規范以及活動頁等規范。而圍繞產品側,隨著品牌體系的認同,FishDesign 的統一使用得以有了“群眾基礎”,并基于樣式組件化+規范體系化建立了產品設計體系。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          總而言之,品牌體系是所有體系化的基礎,也是智慧企業設計體系的核心。只有頂層品牌的統一,才能在頂層認知上影響每個產品線,并逐步去引導中層、底層規范的統一。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          2020 年下半年,網易智慧企業的中文名已經正式升級為網易智企,歡迎關注我們的產品~

          4. 更大的影響力,“B 端品牌體系”共創計劃

          我們為什么要建立品牌體系?

          回到最初的原點,除了幫助網易智企解決當前階段的品牌問題外,還有另一個原因——在網易內部建立一套指導性品牌設計規范與流程。

          設計不僅僅是純粹的創意性,也不是片面的規范性。

          體系的目的并非強制性的規范(我個人并不推崇毫無意義的統一)。體系的目的在于引導性、在于選擇性。我們希望提供的是一個基礎標準和流程。也許某個產品的設計師并不擅長品牌設計,也許大家有這套體系需求,那么大家可以有一套高品質、的品牌設計與落地流程。

          也許某個產品線覺得這套體系不夠滿足目前的現狀,但對于品牌的基本標準不清楚,對于品牌設計流程不夠清晰。那也可以這套體系的基礎上進行創新,借鑒這套設計流程。

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          如何構建品牌體系?來看網易智企品牌體系化建設實錄!

          基于這個目標,我們已經將品牌規范與標準文檔進行了小范圍的開放試驗。截止到 2020 年的上半年,已經有多個品牌開始使用這套標準化流程進行品牌升級與規范輸出,比如網易易盾、網易輕舟、網易疾風等。

          品牌設計體系更大的價值在于——幫助品牌快速建立秩序,將時間留給創意。而體系本身,也會因為每次的創意,變得更豐富、更完善。通過不斷地正向循環、自我迭代,最終成為一個更大生態。

          在無序中尋找秩序,在秩序中尋找創意,讓世界變得更有序、更有趣、更美好。

          文章來源:優設  作者:Jady13_劍杰

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

          移動端選擇器正確使用指南

          資深UI設計者

          什么是選擇器

          選擇器是一個輸入字段, 用戶必須在其中選擇一個(或多個)選項,這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單,復選框,切換按鈕,滑塊等都是不同類型的選擇器,但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量:一個或多個。

          選擇器的類別

          • 單選選擇器
          • 多選選擇器
          1. 單選選擇器

          單選選擇器按效果又可以分為:點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。

          特點:同一時間只能選擇一個選項,當你已經選擇完一項后,準備選取另一項,那么后選的一項會立刻使先選的一項被取消選擇。

          點擊選擇器

          點擊選擇器可分為兩種狀態,狀態一為立即觸發,當你點擊后會立即跳到下一步操作;狀態二為再次確認觸發,當選中某項時,不會立即觸發操作,而是需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。

          • 立即觸發式:

          特點:直接進入,并沒有再次確認的按鈕,可以讓你快速到達想要的目的。

          建議:雖然目的能快速達到,不過也很可能會造成誤操作,所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離,同時正因為是直接跳轉,所以應當加入一些操作提示。

          舉例:汽車之家在用戶選擇二手車時就會出現此選擇器,當我在汽車之家想要選擇二手車時,它會彈出立即觸發式選擇器控件,我們在控件上可以看到有7個圓形選項,分別為:汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車,當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面,為了讓用戶知道自己選擇后的狀態,在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。

          6000字超長干貨!移動端選擇器正確使用指南

          • 再次確認觸發式:

          特點:這是最為常見的選擇器類型,當所在選項選上,除了選擇另一個選項之外,便沒法取消選中狀態。(選且只能選擇一個選項)

          建議:在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項,甚至是否考慮給出一個重置按鈕。

          舉例:我剛注冊小紅書時,在小紅書填寫信息頁面中,它的默認選項是“男”,我點擊“女”,則會自動取消掉“男”,它們兩者并不能同時存在,并且只有我點擊下一步按鈕時才會正式確認我選擇完成。

          6000字超長干貨!移動端選擇器正確使用指南

          滑動選擇器

          特點:滑動選擇器是將需要選中的內容滑動至中部,然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。

          建議:滑動選擇器的展示區域有限,部分選項會被隱藏,最好是當用戶對所有選項都比較熟悉、有預期的時候,才使用它。為了保證手機屏幕觸控精度,以免發生誤觸,滾輪選擇器建議控制在5列以內。

          舉例:在小紅書填寫年齡信息時,我們只需用手指在區域內滑動即可選擇想要的選項。

          6000字超長干貨!移動端選擇器正確使用指南

          多聯動選擇器

          特點:多聯動選擇器是由兩個或兩個以上的中繼器制作而成,第一個中繼器選擇后,一般會對第二個中繼器進行篩選,不過因為顯示的區域有限,所以當你要切換時,還只能挨個切換,效率低下。

          建議:可以通過數據以及功能來減少選擇時間,例如在選擇地區時,根據當前GPS定位地理位置,定位相關省級信息及名稱,減少滑動操作。

          舉例:如下,當我選擇了內蒙古自治區,那么2級內容就應該篩選掉內蒙古以外的城市,比較適用于省份-城市或者品牌-產品這種類似的選擇,當然下面第一張多聯動選擇器也結合了滑動選擇器。

          6000字超長干貨!移動端選擇器正確使用指南

          △ 選擇城市時,我們必須要先選擇省份,再選擇城市,最后才能選擇縣;

          多聯動選擇器展示的方式非常多,不僅可以用滑動形式展示,還可以用點擊、平鋪列表等形式展示。

          6000字超長干貨!移動端選擇器正確使用指南

          上圖則沒有先后順序,不過當你首先選擇顏色時,如果沒有相同尺碼的衣服,缺貨的尺碼則不會被選中,先選擇尺碼也是相同道理。

          切換開關選擇器

          特點:切換開關選擇器有且只有兩種選項,用來在開和關兩種狀態之間切換。開關屬于觸發類組件,撥動開關時,它所指揮的某個操作會立即生效,常見的使用就是授權。開關的默認狀態并不都是關閉的,還要從產品本身的設定上來決策。

          建議:如果某開關的功能是用戶經常使用的狀態,那么可以在默認狀態下打開開關,不過需要注意的是在某些特殊的開關按鈕需要打開時,必須要提前告知用戶。

          舉例:當我打開UC瀏覽器的設置時,它的輔助功能就使用了切換開關選擇器,切換的開關只需要點擊即可。

          6000字超長干貨!移動端選擇器正確使用指南

          可搜索選擇器

          特點:可搜索選擇器一般用于選擇項較多時,特別是對于電商購物類的APP搜索選擇器是必不可少的,搜索選擇器會根據用戶輸入的內容,對中繼器進行模糊的搜索,讓用戶快速找到并選擇內容。

          建議:在搜索區域輸入文字時,可給予用戶更多的文字提示以及以及引導類信息。

          舉例:小紅書在搜索時就會出現數字化的信息提示,這樣能夠很好的引導用戶進入到想要的搜索結果:筆記或者商品頁面。

          6000字超長干貨!移動端選擇器正確使用指南

          地圖選擇器

          特點:作為最特別的選擇器,它的功能是復雜的,它的操作方式也是多樣化的,地圖選擇器的操作可點擊、可拖拽、可放大縮小等等,它多用于生活類APP。

          建議:可以在選擇器中加入更多趣味、互動、可感知的設計,如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。

          舉例:打車類APP必用的地圖選擇器,滴滴出行的用戶可以實時看到車輛信息,可以采用點擊、拖拽、放大等操作來選取上車地點,選取后還有文字信息提示,讓用戶確認操作是否正確。

          6000字超長干貨!移動端選擇器正確使用指南

          貝殼APP則用地圖選擇器來讓用戶選擇二手房,同時也采用了聯動式的效果,第一步是查看區域,可以明確看到區域的售房套數,點擊選擇區域后我們可以看到每個路段的房子套數,點擊路段后就可以看到每個樓盤的套數以及均價,直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況,有更好的對比性與選擇性。

          6000字超長干貨!移動端選擇器正確使用指南

          2. 多選選擇器

          當單選選擇器不能滿足用戶需要時,這時我們就可以采用多選選擇器,一般常用的多選選擇器都是采用點擊的方式,當然也有滑動類型的多選選擇器。

          點擊多選選擇器

          特點:當用戶想要選擇多個類別的情況下,我們就可以用點擊多選選擇器來展示提供給用戶選擇,通過屏幕點擊選中或取消選中該選項,它不會立即觸發操作,需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。

          建議:從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量;多選項時觸碰區域不能太小,以免造成誤操作。

          舉例:小紅書在選擇感興趣的內容時就采用了點擊多選選擇器,不過在選擇興趣時它就強制用戶至少關注4個興趣,而對于單興趣或者少興趣的用戶來講,這無疑會造成用戶體驗的不佳,被逼再次從中選擇次要的興趣。

          6000字超長干貨!移動端選擇器正確使用指南

          滑動多選選擇器

          特別注明:從用戶的角度來看,它可以選擇多個區域段的內容,所以我把它分為多選選擇器中。

          特點:當系統給出的選項不在自己的選擇區間時,可以很好的自定義選擇區間,把定義權限交在用戶手里。同樣,它需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。

          建議:在用戶滑動操作期間要有明確的操作提示,讓用戶時刻感知目前處于的狀態;滑動區域盡量不要超過100刻度,如果刻度距離太小,用戶在滑動時也很難精準的選擇范圍。

          舉例:在汽車之家APP中,當我要選擇汽車價格范圍時就會出現此選擇器,我們可以用手指滑動來選取它的價格區間,相對于上半部分的單選價格拓展性更強,用戶可以自行選擇上半部分的單選選擇器,也可以選擇滑動多選選擇器,給予用戶更多的選擇。

          6000字超長干貨!移動端選擇器正確使用指南

          選擇器的十大應用要點

          1. 簡單易懂

          標題易懂:

          在選擇器中標題一定要簡單明了,很快的讓用戶知道他在為什么做選擇(如:當你關注某烹飪的APP后,它會讓你勾選喜歡的菜譜,你的標題就可以用“選擇菜譜”四個字,簡單明了)

          文字標簽易懂:

          一般使用短語而不是句子,也并不需要用標點符號來結尾。(如:當選擇想要的菜譜時,菜譜后的文字不需要加入標點符號)

          選取狀態易懂:

          用戶能夠明確感知什么是選中狀態,什么是未選中狀態,什么是禁用狀態。(如:選中狀態為高亮顯示,未選中為普通顯示,禁用狀態為灰度顯示)

          反饋提示易懂:

          當你在選擇中遇到選項限制或是否需要確認操作時,反饋提示一定要一目了然。(如:當你選擇某衣服時,S碼不能選擇,則會用灰度顯示的文字代替,甚至可以用中橫線劃過文字,明確告訴用戶不能選擇)

          6000字超長干貨!移動端選擇器正確使用指南

          2. 基本排序

          從邏輯順序:

          邏輯排序能讓用戶很快很準的找到自己需要的選項,特別是對于選擇地址/時間/個數等常規的選項時,可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時,就是按照A-Z字母排序,這樣可以大大節省用戶選擇的時間。

          6000字超長干貨!移動端選擇器正確使用指南

          從產品利益角度排列順序:

          當然為了產品自身的利益也可以自己優化排序方式,選項的順序可以說服用戶進行選擇,用戶可能因為第一個選項在列表中的位置而選擇了第一個選項;可以輔助用戶,也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時,產品為了讓用戶選擇更加優質的菜譜,就會把用戶評價高的菜譜放在前列;當然商家也會這么做,例如你要去買某款商品,商家會在選項中把熱門、優質的產品放在最上方,讓你優先選擇。

          6000字超長干貨!移動端選擇器正確使用指南

          從用戶體驗排列順序:

          從用戶角度來說哪些對用戶體驗好,那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位,而把用戶量最少的輕客放在了最后一位;同樣它在汽車品牌選擇中,單獨列出了熱門品牌把它放在前列,讓用戶進行快速選擇。

          6000字超長干貨!移動端選擇器正確使用指南

          3. 一致性

          視覺布局一致:

          每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊,這樣有利于快速讀取選擇內容,可以提高用戶的瀏覽效率并減少錯誤。

          6000字超長干貨!移動端選擇器正確使用指南

          圖片/插畫風格統一:

          在圖文結合的選擇器中,我們一定要保證圖片(插畫)的優質以及風格的統一。

          6000字超長干貨!移動端選擇器正確使用指南

          4. 合理運用默認選項

          默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。

          默認未選中:

          這是最常見的一種狀態,特別是對于選擇年齡、生日這些個人隱私信息,系統也沒有辦法進行默認選擇。

          6000字超長干貨!移動端選擇器正確使用指南

          默認選中其中一個選項:

          要想默認其中一項,必須考慮兩點因素,因素一:你想要潛意識的像用戶傳達信息,在單選選擇器中默認選擇一項后,就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向,例如此產品的性別9成都是女性,那么建議默認選項為女性。

          6000字超長干貨!移動端選擇器正確使用指南

          默認選中全部:

          其實默認選中全部在用戶體驗上來講真的不是那么的友好,例如微博這個選擇器界面,剛進這個界面時已經全部勾選中,并且當你沒注意習慣性的點擊下面的按鈕時會生立即生效,沒有返回的余地。(吐槽:有些APP甚至沒有一鍵取消功能,要一個個的點擊取消…)這也是為了產品犧牲掉了部分用戶體驗吧!

          6000字超長干貨!移動端選擇器正確使用指南

          5. 給用戶更多選擇

          單選選擇器的更多選擇:

          如果用戶不想做出選擇,那么應該提供一個中立選項,為用戶提供一個明確的方向,中立選項比勉強選擇要好。例如在選擇行業領域時,以上并沒有你所處的領域或你不確定你的領域,你就可以選擇“不限”或“其他”。

          6000字超長干貨!移動端選擇器正確使用指南

          多選選擇器的更多選擇:

          在多選選擇器中,如果不能把控到用戶的準確選項區間,那么可以考慮滑動多選選擇器,讓用戶有更多的選擇區間,不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。

          6000字超長干貨!移動端選擇器正確使用指南

          6. 控件狀態

          選擇控件在操作過程中必須更改其狀態/外觀,要明確讓用戶知道是否能選中,是否被選中??丶顟B一般分為三種:未選中、選中、禁用。

          未選中

          選擇器的開始狀態,向用戶表明,可對該選擇控件進行操作。

          選中

          用戶操作選取狀態,選擇控件處于被選中的狀態。

          禁用

          一般情況會為灰色顯示,用戶將無法與選項進行交互。

          6000字超長干貨!移動端選擇器正確使用指南

          7. 操作提示

          指的是用戶在操作中讓用戶得到相應的反饋,用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中,操作提示一般用輔助文案提示及非模態彈窗提示。

          輔助文案提示(選擇前與選擇中):

          輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明,例如下面是地區選擇,我在選擇不同層級的區域時,它的上方會出現輔助提示文案,讓你明確的知道你上一層級選擇的是什么。

          6000字超長干貨!移動端選擇器正確使用指南

          同樣,當我在選擇價格區間時,滑動選擇器的左上方一樣有文字類的提示:

          6000字超長干貨!移動端選擇器正確使用指南

          非模態彈窗提示(選擇后):

          非模態彈窗一般出現在用戶操作完的跳轉頁面中,為了讓用戶感知所選的選項在頁面的狀態,如下,非模態彈窗告知用戶一共有7輛車符合標準。

          6000字超長干貨!移動端選擇器正確使用指南

          當然除了非模態彈窗外,還有模態彈窗,但是用戶體驗極差,目前很少使用,所以就不列出來了。

          8. 合理使用操作區域

          擴大點擊區域:

          在選取按鈕類的操作時,容易出現點擊不到或誤操作的現象,我們可以通過擴大點擊區的交互區域來提高易用性,例如下圖,雖然按鈕在左邊,但是可以把橫向區域都列為可點擊區域。

          6000字超長干貨!移動端選擇器正確使用指南

          當然我們也可以從設計的角度來擴大視覺范圍,從而也提高了點擊范圍,這樣的處理不僅提升了視覺層面,還提升了交互體驗。(圖文結合方式)

          6000字超長干貨!移動端選擇器正確使用指南

          注意交互間距:

          在元素與元素之間一定要有合理的交互間距,不然很容易出現誤選的情況。

          6000字超長干貨!移動端選擇器正確使用指南

          合理利用有效區域:

          在選項較多的選擇器中,我們可以利用好選擇主體控件之外的區域,例如在選擇城市/品牌時,我們可以做A-Z index式字母交互區,幫助用戶快速找到想要的選項。

          6000字超長干貨!移動端選擇器正確使用指南

          9. 趣味性

          讓用戶選擇本來就是一件枯燥乏味的事情,如果讓這件事變得有趣那么會極大的提升用戶體驗。

          從文本層面:

          例如當用戶填寫性別信息時,你給予用戶的文字信息并不是“男”/“女”,而是“帥氣的boy”與“酷酷的girl”,這樣會讓用戶覺得這是一件比較有趣的事情,而不是被動選擇。(注:這樣的取名一定要符合產品的特性)

          從視覺層面:

          加入可玩兒性的選項,例如汽車之家的頭像切換,可以選擇自己喜歡的頭像。(頭像并不是強制選擇的,如果不進行操作則是默認選項)

          6000字超長干貨!移動端選擇器正確使用指南

          從交互層面:

          讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒,在未選擇狀態他的人物會360度圍繞著轉動,當然你也可以快速拖拽,或者放大縮小,可玩兒性十足,并且在內部設定了最匹配/新人的高亮顯示,協助用戶去選擇。

          6000字超長干貨!移動端選擇器正確使用指南

          10. 合理使用選擇器

          不同的產品在使用選擇器時都各有不同,因為每個選擇器都有它的利弊,而真正要怎么去選擇還要根據產品本身來定。

          那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊:

          多聯動選擇器(平鋪式)

          6000字超長干貨!移動端選擇器正確使用指南

          貨車幫采用的是多聯動平鋪式選擇器,它最大的特點就是能夠一眼就看清楚所有地址,不過地址多時需要花時間去找,只是當你經常使用此功能時便會形成記憶,再此搜索的時候就能形成記憶點擊,效率很高,并且在操作外還有路徑提示,不僅可以幫助你記住層級選項,還可以實時返回路徑進行重新選擇。

          手勢操作:點-點-點

          多聯動選擇器(列表跳轉式)

          6000字超長干貨!移動端選擇器正確使用指南

          閑魚采用的是多聯動列表跳轉式選擇器,這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容,那么就又要切換到上一級,閑魚采用它的原因是因為它只有二級聯動,不存在遺忘現象,不過這樣列表式的選擇效率并沒有平鋪的效率高,人眼習慣掃視橫向內容,所以橫向的內容獲取往往要比縱向的多,在地址選擇器上我個人是不太建議采用多聯動列表跳轉式,因為并不也不直觀。

          手勢操作:滑-點-點

          多聯動選擇器(列表式)

          6000字超長干貨!移動端選擇器正確使用指南

          轉轉采用的是多聯動列表式選擇器,它的優點是可以根據右側字母來找城市,數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤,同樣就要切換到上一級,并且在操作中沒有輔助信息提示。

          手勢操作:滑/點-滑/點

          多聯動選擇器(下滑式)

          6000字超長干貨!移動端選擇器正確使用指南

          安居客采用的是多聯動下滑式選擇器,這種形式的選擇器不會遮擋后面的主要內容信息,在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址,并且層級分明,擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。

          手勢操作:點-滑/點-點

          地圖選擇器

          6000字超長干貨!移動端選擇器正確使用指南

          美團外賣采用的是地圖選擇器,這個選擇器一般用在需要精準定位的生活類APP中,它的優點就是能夠快速精準定位,并且自動錄取定位信息,它的缺點也顯而易見,不能含帶層級并且對范圍也有約束。

          文章來源:優設  作者:黑獅力

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

          互聯網企業管理會計(決策)平臺的產品設計

          資深UI設計者

          在BAT、TMDJ等一線互聯網企業,決策平臺又稱決策支持平臺、管理會計平臺。但實質都是實現業財一體化后,提取業務、財務數據,自動生成各種管理報表、財務報表,智能預警風險、預報業務前景,通過Dashboard或駕駛艙的形式展現給管理層、決策層,本文作者暫以管理會計平臺展開討論。

          一、定義與范圍

          1. 何謂“管理會計”

          管理會計,從定義來看有狹義與廣義之分。狹義的“管理會計”通常是指財務會計概念,包含“成本管理”和“管理控制系統”兩部分。

          而廣義的“管理會計”則是指運用一系列的分析手段,通過挖掘財務數據、業務報告等中潛在信息,對企業財務狀況、經營成果、現金流量和產品競爭力進行分析,輔助經營者進行決策,指出業務、財務風險隱患,預測未來趨勢,賦能業務,以數據驅動企業發展。本次討論的后者,即廣義的管理會計。

          管理會計目標的實現,不是簡單的某一個系統或產品能承載的,需要設計一系列的產品矩陣,包括基礎的核算系統如ERP、成本結算系統、預算系統、報表系統,這個矩陣就是管理會計平臺(以下簡稱管會平臺)。

          管會平臺的主體或用戶的不同使得所產出的管理報表(以下簡稱管報)指標也有所不同。用戶一般分為外部和內部2個大維度。

          1)外部用戶

          投資人偏向于分析企業的盈利能力和資本保值增值能力,如凈利潤率、資本保值增值率等指標;債權人則側重分析資產負債水平和償債能力,如資產負債率、利息保障倍數、權益乘數等指標。

          2)內部用戶

          應收會計崗則側重應收賬款的質量、收入的趨勢,如應收賬款周轉率、收入環比或同比、速動比率等指標;資產會計崗偏向于分析資產的利用率、所帶來的價值,如資產周轉率等指標;而企業管理層或決策層會關注企業經營活動和財務活動的一切方面。

          管會平臺在設計時應考慮滿足這些不同用戶的需求,并通過權限、角色實現千人千面的效果,不同用戶展示不同指標集和報表。

          2. 意義

          管理會計不僅屬財務一個分支,更是財務在企業管理中應用的升華,財務的4個功能層次形象筑起管理會計的堅實基礎:

          • 【看得見】:是指基礎核算功能,經濟業務活動應及時反映在財務數據中;
          • 【說得清】:強調數據的可靠性,財務是業務的反映,業務與財務是一個閉循環,不是憑空而來。結合業務,分析業務問題所在;
          • 【管得住】:則是預算系統在財務流程中的具現,并實現費用控制;
          • 【指得準】:是指趨勢預測,通過管理會計平臺指明業務發展方向,實現賦能業務、數據驅動的最高境界。

          互聯網企業管理會計(決策)平臺的產品設計

          做好管理會計,核算是基礎,分析是關鍵,管控是抓手,賦能是核心。

          分析不僅僅是傳統的報表分析,而是基于大數據、機器學習、AI等高科技手段,自動化、準確、智能的實現風險預警、趨勢預測,引領、驅動企業發展。

          互聯網企業管理會計(決策)平臺的產品設計

          舉個栗子:每月關賬后財務都要做財務分析,收集各種業務、財務數據,結合相關指標,以發現業務中的問題。如做杜邦分析法,分析凈資產收益率。

          繼而計算總資產凈利率,權益乘數,銷售凈利率、總資產周轉率……通過實際與預測的橫向對比、基期與歷史的縱向對比,找出各種指標異動原因,實質是分析企業的贏利能力、營運能力、償債能力。

          但這些通用的指標需結合企業實際情況、歷史數據,并體系化形成產品,才能分析出癥結點所在,這也是管理會計平臺建設的意義與努力的方向。

          二、產品架構

          如何搭建管理會計平臺(以下簡稱管會平臺)呢?互聯網管理會計平臺,其實并不是一個單一的平臺,而是由眾多關聯子系統構成,通過多個子系統間協同合作完成管理會計目標的系統集。

          從前端用戶的視角來看,獲取管理報表是一個很簡單的動作:查詢相關主體公司管理報表或分析結果即可,但從系統角度來說,管理會計的建設過程實際涉及了眾多財務子系統的協同、及復雜的系統邏輯。

          一個典型的財務產品架構如下圖,涉及多個子系統。典型管理會計產品分為生產端與消費端,架構圖如下:

          互聯網企業管理會計(決策)平臺的產品設計

          在簡要介紹各子系統功能前,可以先看以下簡化版的管會平臺產品架構圖,典型的管會平臺產品架構可以劃分為四層結構:支撐層、數據層、核心層、應用層:

          1. 支撐層

          用來支持管會平臺的基礎服務和基礎設施,包括容器云、安全服務、存儲服務、消息引擎、任務高度、短信服務、證書服務等。

          2. 數據層

          匯集業務、財務數據,以大數據或數據湖的形式承載基礎數據,包括ETL、BI、大數據等。

          3. 核心層

          管會平臺的核心模塊,分為清結算、財務中臺、ERP、預算、管報中心五大塊;

          1)清結算

          主要由計價、清分、結算、對賬組成,是業務活動在財務的2個反映之一,解決互聯網業態中的成本費用結算,與傳統企業的成本計量方法不同的是,一般是按個別計價法對不同時間段可以階段性、階梯性等復雜業態成本計量。

          互聯網企業管理會計(決策)平臺的產品設計

          2)財務中臺

          主要針對業務中非審批類的收入、資產折舊、攤銷,自動對賬、生成分錄,并傳遞至ERP,主要包括:入賬規則、數據校驗、分錄生成、主數據等。

          3)預算模塊

          預算功能,包含預算編制、執行等,結合BPM審批流,實現費用控制。

          4)ERP

          財務核心入賬平臺,包括總賬、應收、應付、資產、財報等。

          5)管報中心

          管會平臺核心輸出層,包括生產端和消費端2部分,生產端分為指標集、規則引擎、模板、預處理、智能診斷等模塊。消費端主要是管報產出結果的展示即駕駛艙、手工確認或修正。

          管報中心是核心中的核心,后面第三章會詳細展開。

          互聯網企業管理會計(決策)平臺的產品設計

          4. 應用層

          通過支撐層、數據層、核心層提供的服務組合起來,對最終用戶、運營管理人員提供的系統。在產品架構層面體現為前端展示層、業務域和過程域。前端展示層主要是結果展示的形式,如PC端的web頁面、移動端的APP或H5、小程序等。

          業務域是上游的各業務系統,而過程域是管會平臺所依賴的流程工具、特征數據,如供應商、ORG、BPM等。

          互聯網企業管理會計(決策)平臺的產品設計

          三、管報中心

          管報中心由生產端和消費端組成:

          • 生產端:諸如“成本費用率”、“速動比率”等指標集實現可視化、配置式的增加、禁用,再關聯規則引擎的會計科目、計算規則,提供給預處理模塊消費,并通過智能診斷產出相關指標的因果解析或預警信息;
          • 消費端:以駕駛艙的形式將相關結果展示給用戶。如對結果疑義時,還可手工修正。

          1. 生產端

          生產端流程圖如下:

          互聯網企業管理會計(決策)平臺的產品設計

          【指標集】:配置各種指標,如“速動比率”、“產品成本費用率”等。一旦配置不得刪除,只可修改或禁用。上游是科目與計算規則,但校驗關系不在此模塊。

          【模板】:指標、預警或診斷信息的集合,可導入或手工增加。在預處理和結果展示時,將會調用此模板。

          【規則引擎】:由“科目規則”、“計算規則”、“指標規則”、“預警規則”四部分組成。

          • 科目規則,依賴主數據的會計科目,在此設置科目間依賴關系、重分類關系、借貸方向。如應收賬款與,余額應在借方;如果出現貸方,則可能是預付賬款,重分類時應放在預付賬款。如流動資產由貨幣資金、銀行存款、短期投資、應收票據、應收賬款和存貨構成。
          • 計算規則,簡單的如加減乘除、取模、求余等,復雜的如貝葉斯推理。后臺預設,前端界面可自定義設置各種指標的計算規則。
          • 指標規則,指標與指標之間的邏輯關系,如“總資產凈利率 = 銷售凈利率 * 總資產周轉率”、“ 銷售凈利率 = 凈利潤/主營業務收入凈額”等等。
          • 預警規則,包括觸發開關、預警信息模板,預警條件、主因判定等。如下圖杜邦分析法對A公司進行分析預警:

          互聯網企業管理會計(決策)平臺的產品設計

          在每一層指標中,有實際值、預測值,二者之間的偏離度,就是預警條件;“好”、“差”就是簡單的信息模板,可把具體原因也納入進來。

          主因判定實質是一個由上到下的遞歸過程,如此例中,A公司獲利能力(即資本報酬率)相對較差(3.08%<7.41%),這是第1層判斷。

          再往第2層,經過分析可知這不是因為總資產凈利潤差(2.55%>2.37%),而是財務融資能力差(1.21<3.21)。如此類推,直至分析至底層科目級指標。

          【預處理】分為“重分類”、“平衡試算”、“定時任務”、“結果存儲”四部分,是報表產出的運算過程。其中“平衡試算”屬前置數據校驗,檢查數據是否達到報表可用程度。“定時任務”與“結果存儲”屬技術性過程,“重分類”根據會計要求設置,具體由財務確定。

          【智能診斷】是對具體的報表進行分析,由“診斷開始(數據準備)”、“規則判斷”、“預警判斷”、“結果確認”四部分。其中結果確認包含結果展示、消息分發、手工修正等。“規則判斷”與“預警判斷”是對【規則引擎】中的“指標規則”、“預警規則”的具象應用,實際應用中可引入AI、TensorFlow(機器學習)等技術手段提升診斷的準確度。

          2. 消費端

          在生產端準確、及時生產出數據后,消費端就不愁無米下鍋了。一般通過Dashboard或駕駛艙展示,這一塊通常需要BI或數倉部門的協助,效果圖如下:

          互聯網企業管理會計(決策)平臺的產品設計

          四、總結

          綜合以上,管會平臺的每個子系統并非孤立的,通過產品架構相互關聯。產品架構與技術架構相輔相成,產品架構決定需求和設計,技術架構決定技術框架和性能。包括AI在智能診斷上的應用、數據域的實現等。

          好的產品架構將這些不同用途的功能進行聚類整合,因此,【才聽途說】建議將管會平臺拆分成多個子系統,明確業務邊界,減少系統間的耦合,提供優質、的管理決策支持服務。

          并根據前端業務場景的需求隨時進行調整變化以適應業務的發展,如規則引擎部分基本可由前端配置即可,減少后端開發與產品上線時間。

          不同互聯網公司,業務體量甚至有成千上萬倍的差距,如京東集團內不同BU的體量及發展速度造就其系統復雜度也差異巨大,高度復雜的管會平臺甚至需要數百人的技術團隊來設計、開發、維護。

          不過,對于體量較小的互聯網公司來說,幾人的團隊即可搭建一套系統并維護日常運營。

          互聯網企業作為金融科技業界引領者,建議在系統開發前期(從0到1),以MVP形式,小步快跑,快速迭代,盡快上線、降低開發成本,優先開發主要需求、及較重要的子系統,或并行實施幾個子系統,如ERP的實施、清結算的開發、管報中心的開發可以并行。再做次優級子系統,逐步迭代。

          隨著訂單量的提升及業務復雜度的增加,不同BU甚至不同BGBU的接入,管會平臺復雜度將指數及上升,系統處理起來會越來越吃力,若無良好的規劃,各子系統耦合度越來越高,雜糅在一起,系統靈活性越來越差,無法跟上業務的發展。

          因此,管會平臺的中長期發展(從1到100、到∞),極其考驗我們的業務梳理能力,及對業務進行拆分、產品架構的能力。

          特別是目前行業內還沒有體系化的管會平臺建設經驗可參考時,更考驗我們的綜合能力,包括財務專業知識、業務理解力、產品規劃能力。

          但萬事不要怕,只要抓住產品設計精髓,即設計的產品應滿足邏輯完整、業務功能明確、可擴展(發展方向明確但業務邊界清晰)、靈活(非耦合)等特點,一切將會迎刃而解。

          文章來源:人人都是產品經理  作者:B端老頭

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



          日歷

          鏈接

          個人資料

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

          存檔

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