首頁

我最喜歡這五種色彩組合,色號告訴你了??!

周周

大家好,今天給大家?guī)淼氖桥渖韶浵盗兄谌冢?!超級干貨?。?


前兩期地址傳送門:

1)用我這套方法,配出來的顏色很難不高級!

2)我常用的3個配色方法,搞定專家級配色!



前面兩期,主要分享審美的培養(yǎng)與提升、配色的技巧與習慣。本篇更為實在,主要分析有哪些經(jīng)典的萬金油配色組合,滿足日常工作使用。

看完這篇文章,相信你對色彩的掌握,能更深一步~~干貨建議提前收藏!喜歡記得給咱們公眾號添加星標喔~~


1)經(jīng)典搭配-黃配黑 

色板 顏色組合 

Yellow & Black

黃配黑的色系非常經(jīng)典耐看,普適度也很廣。我在公眾號里寫的一些文章,也經(jīng)常采用這套配色。



這套黃與黑的組合很適合一些生活、社區(qū)、人文、情感等場景進行使用,情緒溫和。如果你的設計,會被頻繁的在這些場景里進行使用,那么不妨使用一下這套黃黑配色試試看。


比如以下這些案例:


這里也給出我經(jīng)常使用的兩組黃黑色板,一組更為活潑鮮艷,更具娛樂化。一組更為內(nèi)斂,充滿文化氣息。


推薦組合色板①:


推薦組合色板②:



2)科技搭配-藍黑白 

色板 顏色組合 

Blue & Black

這套色彩就不多說了,藍色可以說是我非常喜歡的顏色之一了。從咱們公眾號的logo,還有日常發(fā)文的封面,相信大家就能感受到。



藍黑白搭配,可以說顏色是百看不膩,并且藍色色相偏冷,沒那么多情緒傾向,所以更能夠讓人心平氣和的閱讀信息,提升效率。因此也經(jīng)常被用到科技、數(shù)據(jù)、社交、工具等應用場景。


比如以下幾組案例:


關(guān)于藍黑白,我也給大家推薦兩組我很喜歡的色號組合。一組更為明亮,顯得年輕活潑些,而另外一組則更加深沉商務,更為內(nèi)斂。


推薦組合色板③:


推薦組合色板④:




3)CP組合-紅藍配 

色板 顏色組合 

Red & Blue

這套顏色組合,在近幾年可以說是非常流行了。顏色比較淺的,有經(jīng)典的馬卡龍色組合,被廣泛運用到年輕社交等工具場景。而顏色重點的,直播娛樂等秀場平臺,也都大量可見其身影。




紅藍搭配,顏色的相撞導致色彩充滿了熱情與朝氣,社交娛樂化產(chǎn)品的場景,非常適合這套色彩組合。


比如下面這些案例:



這里也給大家分享兩套紅藍搭配的色板,一套略顯溫柔,另外一套則熱情如火。


推薦組合色板⑤:



推薦組合色板⑥:




4)經(jīng)典國潮-赤金組合 

色板 顏色組合 

Yellow & Black

這幾年國潮風格也越來越受到大眾所喜愛,而在國潮色彩的搭配中,赤色金色的搭配。一方面紅色中國味特色濃厚,而搭配上高檔的金色,瞬間濃厚的精致國民畫風,就出來了。

比如每年的集五福,就是非常經(jīng)典的赤金組合,精致的同時,還非常接地氣兒。


關(guān)于赤金,我也從潘通色里挑選出了一組很經(jīng)典高檔的色彩組合,色板色號也分享給大家。


推薦組合色板⑦:


推薦組合色板⑧:


5)尊顯高貴-黑金色 

色板 顏色組合 

Yellow & Black

黑金組合相比其它顏色更顯高貴,在很多知名的APP里面,也都是能看得到,比如淘寶的88vip,京東金融的小金庫。這套色彩組合往往代表著商務、尊貴,高級,既內(nèi)斂又隱蔽,通常被用到各類會員、金融等尊貴體系中。


比如以下這些案例


關(guān)于黑金里面的金色,也分為兩種,一種顏色更為純金,還有種偏向于玫瑰金,玫瑰金的色彩相對要更溫和一些,沒那么冰冷。這兩套色板,我都分享給大家啦~~


推薦組合色板⑨:


推薦組合色板⑩:



6)其它色彩組合 

色板 顏色組合資源下載 

Yellow & Black


除了我上面分享的這五套經(jīng)典配色,還有很多其它的色彩組合,也都非常優(yōu)秀好看,比如上次分享的這些:


這段時間的積累收集,又更新了下面這些新色板。


還有很多,就不一一展示了。方便大家收藏,我把這些色彩組合的圖片+色板文件,都進行了打包,方便大家直接借鑒這些色彩



文章來源:UI中國     作者:UX小學



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


私域構(gòu)建的內(nèi)容場景,是零售業(yè)的“人場貨”

資深UI設計者

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

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

今天,市場上移動互聯(lián)網(wǎng)的流量紅利消失,線下端人口紅利的消失。包括零售業(yè)在內(nèi),大部分行業(yè)的市場性質(zhì),已經(jīng)從增量市場過渡到了存量市場。

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

私域流量作為存量市場的產(chǎn)物,進一步得到發(fā)展的趨勢非常明顯。

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

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

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

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

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

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

私域流量對零售行業(yè)的一些影響

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

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

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

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

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

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

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

比如現(xiàn)在熱門的社區(qū)團購,是私域+傳統(tǒng)零售的典型模式。

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

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

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

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

這是傳統(tǒng)零售很難做到的,因為傳統(tǒng)零售沒辦法更近一步的接近消費者,所以自己手里是拿不到相關(guān)的數(shù)據(jù),于是只能把錢都用在優(yōu)質(zhì)廣告位、優(yōu)質(zhì)區(qū)域位上,搶占消費者的視野。

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

2. 決策形式從重度決策轉(zhuǎn)為輕度決策

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

  • 傳統(tǒng)零售的決策考慮是:功能消費+品牌消費。
  • 新零售的決策考慮是:功能消費+情感消費+內(nèi)容消費+服務消費。

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

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

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

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

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

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

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

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

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

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

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

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

文章來源:人人都是產(chǎn)品經(jīng)理  作者:陽俊Orlo

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


產(chǎn)品經(jīng)理該如何把業(yè)務需求變成產(chǎn)品方案

資深UI設計者

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

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

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

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

我們可以將平常聽到的需求都歸為這三類,產(chǎn)品經(jīng)理需要做的就是將目標需求和業(yè)務需要轉(zhuǎn)化為產(chǎn)品方案,然后交付給開發(fā)團隊。

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

二、定位業(yè)務問題

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

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

球友:

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

場館:

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

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

三、梳理業(yè)務流程

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

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

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

Tips:產(chǎn)品經(jīng)理需要學會做減法,并不是把線下所有業(yè)務搬到線上來,開發(fā)出來后發(fā)現(xiàn)并沒有什么用,又浪費這么多資源。

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

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

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

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

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

Tips:產(chǎn)品經(jīng)理需要定義需求的優(yōu)先級,先把影響業(yè)務正常運行的問題解決掉,再來迭代優(yōu)化。

四、梳理業(yè)務規(guī)則

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

通過調(diào)研我們梳理出以下預訂規(guī)則,但我們需注意以下兩點:

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

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

五、繪制原型

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

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


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

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

六、可用性測試

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

七、撰寫PRD

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

八、總結(jié)

當接到業(yè)務需求時,變成產(chǎn)品的過程是:

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

以上只是個理想化的流程,產(chǎn)品經(jīng)理并不是寫完P(guān)RD扔給開發(fā)就沒事了。包括后面的需求評審、跟進開發(fā)進度和問題、測試上線、迭代優(yōu)化等,都需要產(chǎn)品經(jīng)理主導。

文章來源:人人都是產(chǎn)品經(jīng)理  作者:康力文

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


2021-02篇 | 產(chǎn)品設計細節(jié)剖析,讓你看看大廠是如何做設計的

前端達人

2021年產(chǎn)品體驗日記,小目標365節(jié),第016~030節(jié)。

前言


在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天,APP同質(zhì)化越來越嚴重,使得設計不夠精致、沒有氣質(zhì)及品牌感。一個設計精致APP不應漏過任何一個細節(jié),美觀、可用和的界面設計都需要花費大量的時間從細節(jié)上去打磨,并從多方面鉆研并創(chuàng)造出打動人心的UI/UE設計。





2021 | 第02篇分享目錄(016~030


016.「QQ」手勢力度決定頁面展示范圍

017.「高德地圖」地點打卡-未來回憶曾經(jīng)的足跡

018.「優(yōu)酷」會員轉(zhuǎn)化-擊潰用戶最后一道心理防線

019.「網(wǎng)易云音樂」播放中的歌曲快速定位

020.「boss直聘」多個入口-簡化二次操作流程

021.「菜鳥」備注-快速找到列表中的包裹

022.「蝦米音樂」符合產(chǎn)品特性氣質(zhì)的標簽欄

023.「QQ音樂」觸手可及的選擇性MV播放

024.「微信讀書」提升操作效率的進度條控制

025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕

026.「淘寶」應對意外退出的通道

027.「微信」行為預判-提升操作效率

028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂

029.「京東」送禮物-更是一種神秘和驚喜

030.「叮咚買菜」一頓吃光-減少食材的浪費問題





016.「QQ」手勢力度決定頁面展示范圍


產(chǎn)品體驗:

QQ聊天的表情列表版塊,系統(tǒng)會根據(jù)用戶上滑的力度來確定表情選擇區(qū)域的大小,力度越大,列表區(qū)域占比就越大,同屏可供選擇的表情就越多。

設計思考:

經(jīng)常使用QQ表情包的用戶都知道,其更新頻率非??臁1热缟鐣系淖罱l(fā)生的大事件、互聯(lián)網(wǎng)當前流行的熱詞,甚至在疫情期間,凡是跟疫情相關(guān)的表情包都在不斷變化,從開始的安全防護到后面的線上辦公等,以至于深受廣大用戶的喜愛。

QQ的表情功能其中還有一個細節(jié),用戶在選擇表情時,系統(tǒng)根據(jù)向上滑動的力度來確定表情區(qū)域所展示的范圍。滑動的力度較大時,考慮到用戶可能需要在更多的表情包中選擇的情況,固增大顯示的區(qū)域,便于用戶在同一屏界面中可瀏覽的范圍更大,同屏展示更多的表情包讓用戶在更短的時間內(nèi)找到自己所需,所見即所得,對用戶進行的定性操作十分友好,從細節(jié)處理方面提升了用戶體驗。





017.「高德地圖」地點打卡-未來回憶曾經(jīng)的足跡


產(chǎn)品體驗:

在高德地圖的足跡功能里,可以對我們所在的地點進行打卡,系統(tǒng)就會以亮光形式顯示我們?nèi)ミ^的城市,并留下“???”標記,點擊可以查看自己的打卡時間和具體位置。

設計思考:

我們在高壓的生活下及忙碌的工作中,曾經(jīng)去過很多地方游玩或者路過,隨著時間不斷的流逝,這些都成了模糊的記憶。當有一天靜下心來細想,好想去過的地方很少,甚至回憶不起來。

高德地圖APP的足跡打卡功能可以幫助我們記錄所去過的每一個地方,分為自動和手動打卡。在設置中開啟自動打卡后,當用戶使用導航的目的地屬于名勝古跡、美食地標建筑等類型的地點,導航結(jié)束后,即可自動完成打卡,如有特別需要,還可以通過手動打卡記錄每一個點。打卡功能雖然在表面上并非用戶硬性需求,但在未來的某個時間看到自己曾經(jīng)的足跡時也略表欣慰,還可以滿足部分用戶的虛榮心,也許在無意間就能撫慰認為自己去過的地方太少、較為傷感的幼小心靈,給與溫暖的安撫與力量。





018.「優(yōu)酷」會員轉(zhuǎn)化-擊潰用戶最后一道心理防線


產(chǎn)品體驗:

優(yōu)酷普通用戶在看影片前面的廣告時,倒計時后面會提示xxx元可關(guān)閉廣告,廣告下方通過展示會員特權(quán)以鼓勵普通用戶升級會員,且定時滾動展示剛剛已加入會員的文字提醒。

設計思考:

不管哪個影視平臺,無論何種設備,非付費會員用戶在看影片前都需要先經(jīng)過長達幾十秒的廣告,這是任何人都無法避免的一堵墻,廣告除了可盈利之外,還能起到激勵普通用戶開通付費會員的用處。

優(yōu)酷視頻激勵普通用戶開通會員的的手段可謂是拍案叫絕。

①、利益引誘:在廣告倒計時的后面直接展示開通會員的金額, 通過優(yōu)惠等利益刺激手段,吸引用戶繼續(xù)完成對產(chǎn)品的消費。較小的金額可以降低用戶的經(jīng)濟成本,同時增加用戶對會員價格的心理接受程度,減少其防備心理,有很大的幾率吸引用戶產(chǎn)生開通會員的動機,促使用戶行動增強轉(zhuǎn)化(除了首次開通連續(xù)付費業(yè)務,所付出的金錢成本較低外,其他情況下價格并無優(yōu)惠,不過一旦讓用戶產(chǎn)生了付費動機,這些都是后話);

②  、增加說服力:  廣告下方羅列了部分比較重要的會員功能,圍繞開通會員后的特權(quán)并強調(diào)效果,以此證明會員內(nèi)容的質(zhì)量與真實性,吸引用戶去了解,為用戶增加開通會員驅(qū)動力;

③、羊群效應:提示****剛剛加入了會員,利用從眾心理,因為用戶的想法和行為容易受到周圍人們的影響,往往會勝過自己的理性認知。通過前面的用戶已做了前驅(qū)和后盾,不斷的引導和刺激用戶去開通會員(羊群效應在現(xiàn)實生活中遇到的很多。比如:大部分用戶出去吃飯,對空無一人的飯店沒有動力,往往會選擇里面已經(jīng)坐了一些人的店鋪;走在外面,哪里圍的人多,就想擠進去看個究竟)。





019.「網(wǎng)易云音樂」播放中的歌曲快速定位


產(chǎn)品體驗:

在網(wǎng)易云音樂播放當前列表的歌曲后,當界面存在上下滑動的操作行為時,右下角會出現(xiàn)定位圖標,點擊可直接定位到正在播放的歌曲位置,如無任何操作,3秒后圖標自動消失。

設計思考:

我們在聽歌時,如果是無目標的行為,基本都會進入到某一個類型的列表或收藏歌單,進行順序播放,比如飆升榜、新歌榜等。如果有興趣,可能會在列表中上下滑動來看看是否有自己熟悉的歌曲,等最后要回到正在播放的歌曲位置時,就尷尬了,需要花費更多的時間來找到,在自己收藏的歌單中就更不用多說了。

網(wǎng)易云音樂在歌曲列表中增加了快速定位按鈕,當系統(tǒng)檢測到正在播放的歌曲列表中有滑動操作時,圖標會自動出現(xiàn),點擊快速定位播放歌曲位置,方便快捷、省時省力。如果你的歌單中添加的歌曲太多,又無法找到播放的歌曲時,不妨試試右下角的定位按鈕吧,此功能真的很人性化。





020.「boss直聘」多個入口-簡化二次操作流程


產(chǎn)品體驗:

在boss直聘求職關(guān)鍵詞頁面,單點復選框選中/取消,底部同時提供已選中關(guān)鍵詞,可進行單個刪除或通過左下方的清除按鈕一鍵刪除。

設計思考:

在用戶的常規(guī)認知里,選項條件為數(shù)不多的復選框操作都是單點選中/取消,這種操作方式基本也成了用戶的慣性思維,若站在用戶體驗角度深挖細節(jié)的話,即使是大眾用戶都認可,其實也沒有最好,都還有上升的空間。

boss直聘的求職關(guān)鍵詞選擇,在這方面就做的更好,除了常規(guī)的單點選中/取消外,其底部還提供了已選中的關(guān)鍵詞條,用戶可在小范圍內(nèi)清楚的知道已選中的內(nèi)容,讓需求更加集中,便于進行統(tǒng)計、對比或刪除等操作,避免在頁面多個目標中尋找而增加時間成本。另外左下角還提供了清除按鈕,需要重新選擇目標的用戶,可一鍵刪除,節(jié)省了之前多次點擊的重復步驟,簡化二次操作流程。





021.「菜鳥」備注-快速找到列表中的包裹


產(chǎn)品體驗:

菜鳥的包裹列表,左滑其中的一個,可通過包裹備注修改名稱,方便用戶在包裹較多時有目標的查看。

設計思考:

網(wǎng)購已成為用戶的日常習慣,沒事的時候淘寶逛一逛、京東走一走、不急用的就在拼多多砍一砍。但網(wǎng)購平臺何其之多。我曾經(jīng)碰到過這種情況,在不同的平臺都買了商品,其中有急/不急用的。最為難熬的就是等待物流了,頻繁的奔波于各大電商平臺個人中心的訂單頁面查看最近物流狀況,步驟繁瑣不說,還浪費大量的時間,手機差的還會閃退卡頓,相信這也是很多網(wǎng)購用戶的苦惱,直到菜鳥包裹的出現(xiàn)......

菜鳥定向的集合各大物流平臺的包裹數(shù)據(jù),通過手機號碼,將單個用戶的包裹歸類到一個地方,非常方便。在使用過程中,還有一個很友好的設計細節(jié),包裹名稱備注。在包列表中,可選中其中的一個包裹左滑,對名稱進行備注,便于用戶包裹過多時需要對其中部分包較急的包裹進行頻繁的查看,備注之后一目了然,能降低因誤點造成重復操作的可能性,快速找到想要的包裹,方便用戶有目標的查看。





022.「蝦米音樂」符合產(chǎn)品特性氣質(zhì)的標簽欄


產(chǎn)品體驗:

蝦米音樂頂部標簽欄的選中狀態(tài),文字放大的同時配合一段起伏較大的音頻波紋動效,彰顯行業(yè)產(chǎn)品特性。

設計思考:

標簽欄是APP界面中較為常見的控件之一,在視覺表現(xiàn)方面,只有選中、未選中兩種狀態(tài),其設計也比較簡單,通常會在文字顏色/字重大小上進行變化,標簽下方加上小長條來區(qū)分兩者的狀態(tài),用戶對于這種表現(xiàn)方式也是高度認可的,如果不想被同質(zhì)化,未在細節(jié)上下足功夫,就很難設計出彩。

蝦米音樂的標簽欄選中狀態(tài)除了文字大小對比非常明顯外,下方是一段音頻波線動效,跳脫出較為常見的設計規(guī)范限制,從行業(yè)屬性中獲取靈感,把用戶在現(xiàn)實世界中物理認知的“聲波”形象來源作為產(chǎn)品特性,提取出具有獨特氣質(zhì)的視覺音頻波紋樣式替代選中狀態(tài)的小長條,這樣能建立起視覺上的聯(lián)系,讓用戶產(chǎn)生由內(nèi)而外的一致感受,既有設計感又符合產(chǎn)品特征。





023.「QQ音樂」觸手可及的選擇性MV播放  


產(chǎn)品體驗:

在QQ音樂播放頁封面圖的右下角,會顯示該歌曲相關(guān)的視頻數(shù)量,點擊則展開視頻列表,通過左右滑動選擇想看的視頻,可直接進入視頻播放。

設計思考:

有人說:聽音樂是一種情緒,也是一種心情,能從不同類型的音樂中聽出共鳴,去發(fā)現(xiàn)一些事物的美好。當我們發(fā)現(xiàn)自己喜歡上一首歌曲時,有沒有想打開該歌曲MV一睹演唱者的風采,或者邊聽邊看去感受歌曲意境和內(nèi)容所帶來的一些理解上的輔助。

QQ音樂將歌曲的MV展示在播放頁封面圖片的右下角并提示數(shù)量,近在咫尺,便于用戶在聽歌的過程中對視頻選擇性的播放。一般音樂類型的應用在都是一首歌對應一個MV入口,需要先通過頁面的跳轉(zhuǎn)才能對視頻進行選擇,QQ音樂的這種交互路徑能避免用戶在聽歌過程中選擇視頻時造成中斷,通過左右滑動選擇想看的視頻,選中即可直接進入視頻播放頁,優(yōu)化了操作路徑,減少操作步驟,觸手可及且不打斷沉浸式的音樂享受。





024.「微信讀書」提升操作效率的進度條控制


產(chǎn)品體驗:

打開微信讀書的進度控制條,點擊游標左右滑動,除了頁面內(nèi)容變化外,進度條上方會顯示當前頁碼/總頁碼,并提示章節(jié)及標題;長按游標可單獨對書本的頁碼進行精準化的切換。

設計思考:

讀書就是和世界各個行業(yè)的人物進行一對一交流的過程,如果想通過讀書收獲成長,就要靠自己看書、學習、思考,并把知識用到自己的工作和生活中,不斷讓自己做出改變,因此也誕生了很多讀書類型的應用,線上看書不僅能適合多樣化的環(huán)境,還能節(jié)省經(jīng)濟成本。曾經(jīng)有人感慨,電子書是線性的,而紙質(zhì)書是立體的,想看前面有聯(lián)系的內(nèi)容就可以隨時返回去再讀,而電子書只能通過目錄和書簽來解決,要經(jīng)過多次的操作和頁面的跳轉(zhuǎn),且書本的內(nèi)容都是通過數(shù)據(jù)傳輸、每次都要刷頁面才能看到內(nèi)容,有可能會打擾用戶看書的思路,相對紙質(zhì)書籍,看書效率和吸收程度就低了許多。

其實并非全是如此,微信讀書考慮到體驗方面,針對用戶在讀書過程中可能出現(xiàn)的前后頻繁翻頁的問題,在進度條控制細節(jié)上做了很多便捷化的設計。用戶可通過點擊或長按控制條上游標,根據(jù)自己的實際需求進行前后長/短距離的滑動,就能輕松滿足自己所需要的頁面轉(zhuǎn),并伴隨明顯的小窗文字提醒。此功能相對紙質(zhì)書籍雖然不能堪稱完美,但足以解決用戶線上讀書時最基本的需求,讓操作流程變的更加簡單,大幅度的提升了操作效率,節(jié)約時間成本并提成產(chǎn)品的易用性。





025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕


產(chǎn)品體驗:

在嗶哩嗶哩看《信條》電影,播放到時間發(fā)生逆向片段時,彈幕的文字及方向也發(fā)生逆轉(zhuǎn),即逆向彈幕,兩者結(jié)合在一起非常應景,網(wǎng)友幾乎被“驚掉下巴”。

設計思考:

有很多用戶喜歡開著彈幕看視頻,彈幕有可能是視頻內(nèi)容的良好補充,大部分視頻是不能牢牢抓住觀眾,也不需要觀眾死死盯著看的。各種神彈幕、刷屏本身就是內(nèi)容的重要組成部分,所以看著彈幕可以給我們在看視頻的過程中帶來更好的氛圍及愉悅的體驗(部分不愛開彈幕的用戶除外)。

最近被一個腦洞的彈幕方式吸引到了-逆向彈幕。B站在《信條》電影里隱藏了一個很有趣的彩蛋,正負時間線穿插(片頭也逆向了)的情節(jié)發(fā)展,設計了讓人驚艷的逆向彈幕,跟電影的逆向片段組合在一起時非常應景,神奇且趣味化的彈幕方式讓用戶幾乎“驚掉下巴”,看完電影后仍能記憶猶新。有人直言“當時在電影院看完信條后,是不是倒著走出來,影院就把買票的錢給退了”。





026.「淘寶」應對意外退出的通道


產(chǎn)品體驗:

在淘寶的其他功能頁面發(fā)生閃退或意外結(jié)束應該進程時,再次進入首頁,會提供“打開上次訪問的頁面”的快捷入口,如無需要,幾秒后入口自動消失。

設計思考:

智能時代,每個人的手機中應該都裝有不下幾十個APP軟件。當我們正沉浸在某個APP當?shù)膬?nèi)容時,因設備或其他原因意外的結(jié)束了應用進程,當再次打開時,需要憑借自己的記憶多番操作才能回到原來的內(nèi)容處,甚至永遠無法找到,為此真的是很苦惱。

淘寶針對軟件意外退出的情況則留了一手,當用戶在使用過程中,APP因意外情況退出時,下次進入,可通過首頁提供的“打開上次訪問的頁面”入口,快速回到原先失蹤的頁面,再也不用擔心內(nèi)容丟失了,看似一個簡單的入口,但通過細微的改進能給用戶帶來更好的操控感和易用性,便于用戶通過短時間記憶還原。





027.「微信」行為預判-提升操作效率


產(chǎn)品體驗:

我們在手機的其他界面發(fā)生截圖行為時,打開微信對話框的工具欄,系統(tǒng)會把剛剛截取的圖片以縮略圖的方式展示在右側(cè),暗示詢問用戶是否有發(fā)送此圖片的需求,幾秒后會自動消失。

設計思考:

我們不管使用何種應用,在交流過程中有發(fā)送圖片的需求時,除了應用本身提供的圖片之外,其他都繞不開系統(tǒng)相冊功能。如若深究用戶體驗,進入相冊的操作路徑是可以減少的。

從微信對話框頁面打開工具欄,如在相近的時間內(nèi)系統(tǒng)檢測到有截屏行為時,會把剛剛截取的圖片以縮略圖的方式展示在屏幕右側(cè),點擊即可發(fā)送,通過行為感知并幫助用戶解決可能有發(fā)送此圖片的需求,提前預判用戶的操作,以提升選擇效率。若無此需求,幾秒后自動消失,絲毫不影響用戶的其他操作。





028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂


產(chǎn)品體驗:

在抖音搜索較為極端且消極的關(guān)鍵詞時,比如:抑郁、服毒、不想活了等,系統(tǒng)會出現(xiàn)較為溫馨的愛心畫面,并通過情感化的文案鼓勵以及提供心理援助渠道,以此來提高用戶的積極情緒。

設計思考:

人們通常會借助于歡樂、開心來表達自己的愉悅,同時也會面臨悲傷、憂慮的情況,需要表達心中的苦悶。如果沒有得到有效的疏解、排遣,使得內(nèi)心一直處于郁悶狀態(tài)無疑是很糟糕的。尤其是目前處于高度壓力下的年前人群,在環(huán)境因素、心理與生理創(chuàng)傷、家庭環(huán)境等情況的影響下,導致一些人因為心中的苦悶,得不到很好地宣泄、發(fā)泄,走上了極端的想法,其解決問題的方式不管是線下、線上都是從心理上入手。

抖音APP在面對極端且消極的關(guān)鍵詞搜索時,并非跟其他應用的搜索結(jié)果雷同,而是以情緒激勵的統(tǒng)一樣式展示結(jié)果。首先通過溫馨的愛心畫面緩解較為消極的用戶情緒,并通過積極正向的文案鼓勵用戶;其次,基于用戶在心情低落時要得到安慰或鼓勵的需求,平臺提供了心理援助熱線以及消極心理的疏導建議,幫助用戶進行緩解或改善消極行為。作為一個短視頻平臺,雖然沒有明確的義務去撫慰用戶,但這種做法可以用溫暖的方式傳遞愛與力量,也撫慰每一個被情緒困擾過的靈魂,讓用戶感受到親切放松的氛圍,是鞏固用戶粘性與忠誠度十分巧妙的方式。





029.「京東」送禮物-更是一種神秘和驚喜


產(chǎn)品體驗:

在京東商城購物禮物時,可以通過商品詳情頁的“送禮物給TA”,節(jié)省很多中間步驟,直接在線上完成包裝、賀卡、寄語和快遞等“一條龍”服務,將禮物送到對方手中。

設計思考:

部分用戶在特殊情況下,都有送禮物的小習慣,不管是禮尚往來、男女朋友還是送基友,有時甚至不需要理由,只想把最好的東西送給TA們。這時候可能去會店里(線上/線下)買一個對方喜歡的東西,然后經(jīng)過包裝+寄語,再快遞給對方,因為整個流程的復雜,有時候不可避免會出現(xiàn)一些突發(fā)性的狀況,難免造成尷尬。

在京東APP購買禮物則省去了一些列的麻煩,只需要選好禮物,即可完成從包裝、賀卡、寄語和快遞等“一條龍”服務,免去不必要的麻煩以降低出錯的可能性,將操作流程和路徑都進行了簡化,讓整個送禮的過程更。通過選擇合適禮物的包裝風格,制造出禮物的神秘感,送出的不僅僅是禮物,更是一種浪漫和驚喜。





030.「叮咚買菜」一頓吃光-減少食材的浪費問題


產(chǎn)品體驗:

在叮咚買菜分類的“一頓吃光”列表中,菜品會根據(jù)專業(yè)廚師建議一頓的常規(guī)用量進行組合搭配包裝,包括分量較小的調(diào)味品類也進行了小份裝的貼心組合,避免食材偏多造成浪費或損耗。

設計思考:

“一粥一飯,當思來之不易”,勤儉節(jié)約,珍惜糧食是我國的傳統(tǒng)美德。隨著互聯(lián)網(wǎng)帶來的便利,很多人足不出戶便可在線上平臺完成食材的購買,但買菜也存在的很多困擾,比如買少了不夠吃,買多了又浪費,沒有一個確切的方案可以讓買的一頓食材剛剛好,因此會造成食材的浪費和更多的金錢成本。

叮咚買菜推出的“一頓吃光”欄目,用倡導勤儉節(jié)約的用餐理念與生活方式,篩選出用戶經(jīng)常購買的食材搭配,再根據(jù)專業(yè)廚師對食材配比,進行分量、包裝及動態(tài)調(diào)整,以最大化滿足消費者需求,減少食材的損耗,在很大程度上解決了買菜很難確定食材分量的問題,不僅讓用戶每餐都吃得新鮮健康的同時,盡可能地減少食物浪費。





結(jié)語:


設計師需要養(yǎng)成體驗產(chǎn)品的好習慣并將優(yōu)秀的產(chǎn)品細節(jié)記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結(jié)能力,也為日后輸出優(yōu)秀的作品當鋪墊,對自己的能力提升以及未來的職業(yè)發(fā)展帶來便利。


本期產(chǎn)品設計細節(jié)分享結(jié)束,我們下期再見。




轉(zhuǎn)自:站酷

作者:大漠飛鷹CYSJ


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

2020工作項目-小程序設計

前端達人

收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏
收藏



轉(zhuǎn)自:站酷

作者:chuting97


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

mg動效練習

前端達人

mg動效練習

收藏
收藏
收藏



轉(zhuǎn)自:站酷

作者:眼中英雄夢


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

體驗度量專題|易用度在企業(yè)級中后臺產(chǎn)品的探索和實踐

ui設計分享達人

作為產(chǎn)品設計者,經(jīng)常遇到一個備受靈魂拷問的問題:怎么衡量我們設計的產(chǎn)品,用戶體驗是過關(guān)的?

今年,我們在內(nèi)部中后臺產(chǎn)品進行嘗試,發(fā)現(xiàn)「易用度」可以作為合適的度量指標,并成功推廣到 35 個產(chǎn)品,幫助PD、設計師、工程師等產(chǎn)品設計者去衡量產(chǎn)品體驗現(xiàn)狀,發(fā)現(xiàn)改進機會點。實踐證明,易用度,相比滿意度、尖叫度、NPS,更適合技術(shù)類產(chǎn)品的體驗度量。結(jié)合用戶行為數(shù)據(jù),可以為用戶畫像、改進方向、運營策略提供更準確的決策依據(jù)。


1. 中后臺體驗度量現(xiàn)狀


在公司內(nèi)部,技術(shù)類產(chǎn)品種類繁多,有很大一部分是開發(fā)、運維人員使用的中后臺產(chǎn)品,且以從 0-1 階段為主。由于這部分同學本身工作復雜度高,又必須依賴內(nèi)部產(chǎn)品來完成,所以長期以來“簡單易用”成為大家追求的產(chǎn)品體驗標準,他們也把“如絲般順滑”作為終極目標。但現(xiàn)實情況是, 上手門檻高是使用技術(shù)類產(chǎn)品最大的痛點。 

對于前臺業(yè)務的設計者,經(jīng)常會使用「人+錢」,也就是「流量+付費」來衡量產(chǎn)品效果。通過成功率、轉(zhuǎn)化率等指標,可以快速看到用戶行為上的反饋,來指引后續(xù)優(yōu)化。但對于技術(shù)類產(chǎn)品,尤其是強流程、工具型產(chǎn)品,很難找到一套契合業(yè)務特點的度量方式。理論上,使用「成本+效率」是比較合適的衡量維度,實際操作下來,找到設計和產(chǎn)品效果之間的因果關(guān)系,并非易事。 

我們做了一個內(nèi)部調(diào)查,發(fā)現(xiàn)產(chǎn)品設計者經(jīng)常容易遇到這些問題: 
  • 體驗度量是一個繞不開的話題。天貓、阿里云、華為、京東都有嘗試提出解決方案,但沒有統(tǒng)一的衡量維度。 
  • 設計方案與產(chǎn)品的市場反饋,需要一個可以解釋關(guān)聯(lián)關(guān)系的抓手,這對迭代方向的指引至關(guān)重要。 
  • 產(chǎn)品團隊逐漸重視用戶用戶,但缺乏有說服力的指標。 

業(yè)界在體驗度量上的方案,大致分為 3 個派別: 
  • 客觀衡量法:通過數(shù)據(jù)埋點監(jiān)測用戶行為數(shù)據(jù)。例如經(jīng)典的 PULSE 模型,還有大家熟悉的運營指標,活躍用戶數(shù)、留存率、ARPU、LTV等等。這對于還未商業(yè)化、用戶基數(shù)少的產(chǎn)品不適用。 
  • 主觀衡量法 收集用戶主觀打分。經(jīng)典的滿意度、尖叫度、NPS,可用性測試量表(如SUS),美國客戶滿意度指數(shù)ACSI。 
  • 主觀+客觀衡量法:把用戶行為數(shù)據(jù)和主觀打分結(jié)合起來,多數(shù)用歸一化方式得出一個總分,把分數(shù)劃分成不同檔次作參考。Google 經(jīng)典的 HEART 模型,內(nèi)部 的 PTECH 模型,阿里云 QoUE 模型 ,華為云的用戶體驗模型。 

在掌握了這些信息之后,我們在內(nèi)部的技術(shù)類產(chǎn)品上,進行了一輪新的探索。經(jīng)過半年時間的試點,結(jié)合業(yè)界的解決方案、內(nèi)部產(chǎn)品的業(yè)務特性,我們最終選擇主觀衡量法,并使用「易用度」這個衡量指標。


2. 易用度指標


易用度,英文 Customer Effort Score ,簡稱「易用度」,也有譯成「費力度」,指的是用戶使用某個產(chǎn)品/服務來解決問題的難易程度。目的是 消除或減少用戶使用產(chǎn)品過程中的障礙。


該定義來自 2010年 《哈佛商業(yè)評論》發(fā)表的文章《Stop Trying to Delight Your Customers》。2013年,Gartner 子公司 CEB 發(fā)布易用度2.0版本的測量方法,定義為“解決問題的難易程度”(make it easy to handle my issue)。 

它的源頭可以追溯到美國用戶研究專家 Jeff Sauro(2009)提出的單項難易度問卷(Single Ease Question,SEQ),在可用性測試之后,用戶需要對一個問題進行打分,問法是“整體上,這個任務是非常困難-非常容易(7分制)”。 

為什么說「易用度」更適合技術(shù)類的產(chǎn)品?主要基于技術(shù)類產(chǎn)品的三大特點。 



衡量維度

總體指標
易用度:使用**產(chǎn)品完成**工作的容易程度。 

影響因素
  • 主要因素:產(chǎn)品及設計給用戶操作帶來的復雜度,我們稱之為「基礎(chǔ)體驗」,包括幫助引導、功能入口、概念術(shù)語、任務流程、操作反饋。 
  • 次要因素:用戶特征對使用易用度的調(diào)節(jié)作用,也稱之為「調(diào)節(jié)因素」。不同特點的用戶,會影響易用度分數(shù),包括操作熟練度、先驗知識、行為習慣。 



量表開發(fā)

大家肯定要問,這些影響因素是怎么確定的,如何證明它們的合理性?這就要提到量表開發(fā)方法,基本上可以分為幾個步驟: 

step1.理論借鑒
從相關(guān)領(lǐng)域查找經(jīng)典量表,站在巨人的肩膀上,經(jīng)過實踐檢驗的量表更可靠。我們首先從 15種國際可用性測試量表中借鑒,抽出了一些關(guān)鍵的衡量維度。另外,易用度創(chuàng)始人Matt Dixon(2014)在《the effortless effort》書中,總結(jié)了在客戶服務場景,費力的關(guān)鍵因素: 
    1. 信息分類不恰當,反復描述問題(82%) 
    2. 需要多次求助(62%) 
    3. 幫助指引不清晰(59%) 
    4. 找不到相關(guān)入口,頻繁切換溝通渠道(59%) 

step2.實踐總結(jié)
我們盤點發(fā)現(xiàn),技術(shù)類產(chǎn)品,絕大部分屬于工具型產(chǎn)品,強調(diào)任務流程,也是用戶痛點集中的地方。匯總多條業(yè)務線近1年的調(diào)研結(jié)果。除了功能、性能問題外,根據(jù)對完成任務的阻礙程度,無論是0-1階段,還是1-N階段,高頻體驗問題分布都集中在5個維度: 
  • 幫助引導 
  • 操作反饋 
  • 任務流程 
  • 概念術(shù)語 
  • 功能入口 


step3.數(shù)據(jù)分析
通過整理歸納的影響因素,需要經(jīng)過信效度驗證,才能有說服力。簡單來說,信度就是“可信與否”,指的是結(jié)果的一致性、穩(wěn)定性及可靠性;效度就是“命中與否”,指的是結(jié)果反映所想要考察內(nèi)容的程度。通過統(tǒng)計學的探索性因子分析,驗證性因子分析,我們確定 5 個維度可以有效測量易用度分數(shù)的變化。詳細可查閱《如何找到影響用戶體驗的關(guān)鍵因素?》。 

與滿意度、尖叫度、NPS的區(qū)別

從易用度-滿意度-尖叫度-NPS,是一個用戶預期的漸進變化。從中可以看出,易用度更關(guān)注的是基礎(chǔ)體驗,也就是“簡單好用”。 


為什么易用度相比其他指標更適合技術(shù)類產(chǎn)品呢?主要有 3 個原因:

1.內(nèi)部試點發(fā)現(xiàn),滿意度無法準確衡量技術(shù)類產(chǎn)品體驗
  • 滿意度不能很好衡量真實體驗,分數(shù)虛高。我們在一些產(chǎn)品上,同時使用「易用度」和「滿意度」作為總體指標,發(fā)現(xiàn) 43% 的用戶滿意度評分,高于易用度評分,可以理解為“產(chǎn)品我滿意但不好用”。此外,易用度分數(shù)與滿意度分數(shù)相關(guān)性高達0.77,具備很高的可替代性。 
  • 易用度更接近用戶真實體驗。對任務難易程度作出評價,用戶在判斷時會更直接,考慮使用過程中付出的腦力、時間等成本。對滿意度作出評價,除了考慮產(chǎn)品本身的易用性,內(nèi)部用戶還會考慮其他主觀因素,例如: 
    1. 合作關(guān)系:你是研發(fā),我是用戶,擔心給你滿意度打低分了,之后就不滿足我的需求了。 
    2. 中庸傾向:滿意度調(diào)查,已經(jīng)是人盡皆知的評分,國人都傾向于打中上。 
    3. 評價范圍:易用度問的是完成工作的容易程度,范圍更小,用戶評價的時候更聚焦。滿意度問的是整體是否滿意,范圍更大,用戶會綜合考慮很多因素,例如上面提到的服務支持、上下游協(xié)作、需求響應等等。 


2.行業(yè)實踐表明,易用度比 NPS 更能預測用戶留存和成本變化
  • 易用度更能預測用戶留存?!豆鹕虡I(yè)評論》(2010年)發(fā)表易用度時,調(diào)研7500多名用戶,數(shù)據(jù)顯示易用度低的客戶,94%的有復購意愿,88%表示會增加支出,僅1%表示會對公司持負面態(tài)度。Garter(2013)發(fā)布報告,基于49000多名用戶數(shù)據(jù)發(fā)現(xiàn),易用度分值從1分提升到5分,可以使用戶忠誠度提高22%。Oracle(2015)發(fā)布服務云易用度白皮書發(fā)現(xiàn),當用戶表示使用產(chǎn)品付出了更少的努力,忠誠度提高18%。相反,從滿足用戶預期到超出用戶預期,用戶忠誠度的變化并不明顯。 
  • 易用度更能預測成本變化。Gartner(2019)對100+公司、12.5w用戶的調(diào)研發(fā)現(xiàn),易用度從高分到低分,可以降低37%的成本。 

3.行業(yè)實踐表明,尖叫度更適合成熟度較高的產(chǎn)品類型
  • 目前在市場上,至少在國內(nèi),ToB 產(chǎn)品沒有達到飽和,定位也各有不同。在企業(yè)用戶心中,并沒有足夠清晰的心智和經(jīng)驗去判斷。例如企業(yè)微信和釘釘,基本上很少有用戶會同時使用這兩個產(chǎn)品,那用戶就無法準確評價二者的好壞。 
  • 更關(guān)鍵的是,很多 ToB 產(chǎn)品,用戶多數(shù)是被動接受使用的,極少有選擇余地。普遍的高技術(shù)門檻,也把他們嘗試的意愿和可能性大打折扣。 


優(yōu)劣對比

對比滿意度、尖叫度、NPS指標,易用度的優(yōu)勢在于: 
  • 關(guān)注用戶完成任務過程中的阻礙,重視基礎(chǔ)體驗; 
  • 適合去度量特定的用戶接觸點和任務流程,以便了解用戶解決問題的難易程度。 
劣勢在于: 
  • 對于分數(shù)過高或過低的情況,沒有通用的基線,需要區(qū)分行業(yè)、產(chǎn)品類型、產(chǎn)品復雜度來衡量分數(shù)是否合格; 
  • 側(cè)重基本體驗,無法衡量用戶的總體滿意度。 



3. 易用度基線


經(jīng)過半年的實踐,我們采集了 35 個技術(shù)類產(chǎn)品的易用度,根據(jù)產(chǎn)品類型、產(chǎn)品階段來區(qū)分。 結(jié)合內(nèi)部試點和行業(yè)調(diào)研,我們把技術(shù)類產(chǎn)品的易用基線,設定為 5.5 分。主要發(fā)現(xiàn): 
  • 產(chǎn)品類型越復雜,易用度越低。試點產(chǎn)品中,ToC 產(chǎn)品易用度均值 5.46,ToB 產(chǎn)品易用度均值 5.32,ToD 產(chǎn)品易用度均值 5.07。 
  • 產(chǎn)品階段越早期,易用度越低。試點產(chǎn)品中,0-1 階段的產(chǎn)品易用度均值 5.09,1-N 階段的產(chǎn)品易用度均值 5.28。 

內(nèi)部實踐

如圖所示,易用度有很好的區(qū)分度,不同產(chǎn)品類型的不同產(chǎn)品階段分數(shù)呈現(xiàn)出差異性,我們可以根據(jù)這個數(shù)據(jù),去評估自己的產(chǎn)品所在位置。 



為什么總體上選擇 5.5 分作為“易用”標準?

我們在這 35 個產(chǎn)品上進行易用度的嘗試,最終收集了 4000+ 問卷數(shù)據(jù),得出了技術(shù)類產(chǎn)品的體驗基線: 
  • 總體均值 5.07 分,中位數(shù) 5 分。具體分布如圖所示,認為“比較容易”(5-7分)的用戶占 69%。 
  • 但由于內(nèi)部的技術(shù)類產(chǎn)品,大多處于 0-1階段,以現(xiàn)在的狀態(tài)作為“易用”基線,顯然不合理。 



業(yè)界標準

因此,我們需要結(jié)合業(yè)界的實踐作為參考。我們收集到 2 家用戶研究領(lǐng)域的老牌公司 Nicereply 和 HotJar 的數(shù)據(jù)。Nicereply 是一家咨詢公司,它服務的對象既包括 C 端用戶,也包括 B 端用戶。HotJar 是一家專做用戶行為監(jiān)控的公司,它服務的對象主要是 C 端用戶。因此, 我們傾向于采納  Nicereply 發(fā)布的基線 5.5 分,作為參考。
  • Nicereply 公司在2018 年發(fā)布的易用度  benchmark(鏈接),基線為 5.5 分。 
  • HotJar 公司在 2019 年發(fā)布的易用度 benchmark(鏈接),基線為 6.09 分。 



分析思路

很多設計者會想,不就是一個問卷嘛,能發(fā)揮多大的作用?實際上,當問卷數(shù)據(jù)+用戶行為數(shù)據(jù),它將發(fā)揮更大的價值。 
  • 現(xiàn)狀描述:對產(chǎn)品當前的功能、體驗、性能的在用戶心中的水位進行摸底,通過數(shù)據(jù)和主觀反饋找到原因。 
  • 對比差異:技術(shù)型產(chǎn)品往往有多個角色共同使用,并且有上下游協(xié)作關(guān)系,可以通過問卷和數(shù)據(jù)發(fā)現(xiàn)不同角色的偏好,找出差異化的改進方向。 
  • 影響關(guān)系:當發(fā)現(xiàn)某些模塊用戶評價低時,需要下鉆找到最相關(guān)的影響因素,這時需要用到相關(guān)分析,找到此消彼長或相輔相成的變化關(guān)系,以及用到回歸分析,找到可能的因果關(guān)系。 
  • 聚類分析:結(jié)合問卷數(shù)據(jù)和用戶行為數(shù)據(jù),我們可以對典型用戶進行分層,也就是我們通常說的“用戶畫像”,可以結(jié)合經(jīng)典的 RFM 模型,找到高頻、忠誠、高付費且評價好的用戶。 



現(xiàn)狀描述

以某個技術(shù)類產(chǎn)品 A 為例,通過現(xiàn)狀描述,可以發(fā)現(xiàn)低分人群抱怨的問題集中在哪里,提出問題優(yōu)先級排序。 



對比差異

通過對比差異,把用戶根據(jù)人口學、行為特征進行單維分類,與易用度分數(shù)做交叉分析,找出人群之間的差異,有針對性改進。 



影響關(guān)系

通過影響關(guān)系分析,可以找到影響產(chǎn)品 A 易用度分數(shù)的主要原因,也就是用戶為什么覺得好用/不好用。 



聚類分析

通過聚類分析,結(jié)合問卷數(shù)據(jù)和用戶行為數(shù)據(jù),可以發(fā)現(xiàn)典型人群,制定差異化的運營策略。 



現(xiàn)象與洞察

在 35 個技術(shù)類產(chǎn)品上的實踐,我們發(fā)現(xiàn)了一些常見現(xiàn)象和經(jīng)驗性的洞察,它并非都是普適的,卻有很高的參考價值。 



結(jié)論

基于內(nèi)部技術(shù)類產(chǎn)品的體驗度量實踐,我們得出以下結(jié)論: 
  • 實踐證明, 易用度指標衡量技術(shù)類產(chǎn)品更有效。技術(shù)類產(chǎn)品降本增效的商業(yè)目的、降低技術(shù)門檻的用戶訴求、流程復雜上手難的痛點,決定了體驗度量要關(guān)注基礎(chǔ)體驗。滿意度、尖叫度、NPS去衡量都不太準確。 
  • 易用度的衡量維度,包括 5 個部分的基礎(chǔ)體驗。即 幫助引導、功能入口、概念術(shù)語、任務流程、操作反饋。
  • 結(jié)合內(nèi)部試點和行業(yè)調(diào)研,我們把 技術(shù)類產(chǎn)品的易用基線,設定為 5.5 分。當前內(nèi)部技術(shù)類產(chǎn)品的易用度基線是 5.07分,行業(yè)技術(shù)類產(chǎn)品的易用度基線是 5.5 分,產(chǎn)品類型(ToC/ToB/ToD)、產(chǎn)品階段(0-1階段,1-N階段)也會有所差異。 
  • 結(jié)合行為數(shù)據(jù),易用度可以進行描述、分類。使用現(xiàn)狀描述找出低分人群的高頻問題,使用對比差異找到多角色的不同訴求,分析影響關(guān)系找到影響易用度的主要因素,結(jié)合用戶行為數(shù)據(jù)進行聚類找到典型人群。


    文章來源:站酷  作者:Ant_Design

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

如何構(gòu)建品牌體系?網(wǎng)易智企品牌體系化建設實錄

資深UI設計者

導讀

品牌體系的長期價值是什么?如何構(gòu)建完整品牌體系?

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 網(wǎng)易智企-品牌設計體系

目錄

  • 背景:從產(chǎn)品走向事業(yè)部
  • 研究:品牌體系的不同構(gòu)建方式
  • 策略:選擇合適的品牌體系構(gòu)建策略
  • 設計:從品牌字體到框架規(guī)范
  • 標準化:設計文檔與流程規(guī)范化
  • 推進:發(fā)起會議正式確立體系
  • 成長:體系的不斷自我成長
  • 傳承:網(wǎng)易品牌設計
  • 生態(tài):品牌體系的長期價值
  • 資料獲取

背景:從產(chǎn)品走向事業(yè)部

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

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

至此,網(wǎng)易智企的品牌架構(gòu)由兩個獨立的產(chǎn)品品牌,逐漸變成了事業(yè)部品牌+多個子品牌的品牌架構(gòu)。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 網(wǎng)易智慧企業(yè)現(xiàn)狀(2019 年初)

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

如何改變現(xiàn)狀?我們是否能夠主動去推動事業(yè)部進行整體的品牌升級?能否通過設計去構(gòu)建一個完整的體系,以滿足網(wǎng)易智企未來的發(fā)展需要?

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

研究:品牌體系的不同構(gòu)建方式

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

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

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

1. Free Standing 自由家庭式

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ Free Standing 自由家庭式

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 聯(lián)合利華集團-品牌體系

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

我們可以總結(jié)一下自由家庭式品牌體系的優(yōu)劣勢。

優(yōu)勢:

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

劣勢:

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ Gene Delivery 基因家庭式

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

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 雀巢公司-品牌體系

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 美國聯(lián)邦快遞-品牌體系

進階版:提取母品牌關(guān)鍵特征,融入子品牌中

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 亞馬遜-品牌體系

高階版:提取母品牌基因,通過重構(gòu)形成子品牌

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ Google-品牌體系

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

我們可以總結(jié)一下基因家庭式品牌體系的優(yōu)劣勢。

優(yōu)勢:

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

劣勢:

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ Clone Family 克隆家庭式

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ Apple-品牌體系

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

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

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

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

我們可以總結(jié)一下克隆家庭式品牌體系的優(yōu)劣勢。

優(yōu)勢:

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

劣勢:

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

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

1. 確定策略

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

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

這種品牌策略的主要優(yōu)勢有:

整體品牌感強,品牌基因容易延續(xù)。

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

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

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

2. 可行性調(diào)研分析

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

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

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

構(gòu)建:從品牌字體到框架規(guī)范

1.  品牌字體設計

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

在此期間,我開始著手設計一款全新的專屬字體,也就是之后的網(wǎng)易 B 端產(chǎn)品的統(tǒng)一品牌字體。

通過對于網(wǎng)易智企品牌調(diào)性的分析,以及未來發(fā)展的需要,我確定了品牌字體的基本調(diào)性:現(xiàn)代、簡約、剛正、大氣、品牌基因的融入。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

因此,在字形的結(jié)構(gòu)上采用了較為剛正的框架,干脆利落的同時,在轉(zhuǎn)角帶有一定的弧度。方中帶圓,剛中帶柔,形成美學上的互補。而在遵從中文字體結(jié)構(gòu)的同時,也對筆畫本身進行了適當?shù)暮喕ū热绻?,用切割式的筆畫代替上勾,但感知上仍然是勾),讓字體更具現(xiàn)代感與簡潔感。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

標準化:設計文檔與流程規(guī)范化

1. VI 設計文檔

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 封面樣式

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 目錄樣式

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 內(nèi)容框架

2. 品牌展示規(guī)范

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 品牌圖形單獨展示

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 橫式標準組合

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 豎式標準組合

3. 為新品牌制定 VI 系統(tǒng)

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 網(wǎng)易云信-VI 視覺識別系統(tǒng)

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 網(wǎng)易七魚-VI 視覺識別系統(tǒng)

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

推進:發(fā)起會議正式確立體系

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

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

1. 提前與關(guān)鍵相關(guān)方溝通,對齊目標

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

2. 發(fā)起會議,正式推出方案

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

最后,隨著網(wǎng)易智企的快速發(fā)展,智慧企業(yè)的子品牌會越來越多,而品牌聯(lián)合推廣的頻次將會越來越高。這意味著品牌 Logo 設計混亂的現(xiàn)狀將會產(chǎn)生越來越大的影響力,而我們的修正成本將會越來越高。

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

如何建立品牌體系?

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 品牌升級會議 PPT

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

3. 以規(guī)范對事業(yè)部 Logo 進行升級

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

之后,我們同樣為網(wǎng)易智慧企業(yè)主品牌制定了詳細的 VI 識別系統(tǒng)。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

△ 網(wǎng)易智慧企業(yè)-VI 視覺識別系統(tǒng)

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

4. 發(fā)送郵件,全員通知并規(guī)范使用

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

1. 不斷豐富的品牌矩陣

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

有了品牌設計體系后,大家對品牌設計的態(tài)度也發(fā)生了明顯的改變。

每當有新的產(chǎn)品需要進行品牌設計時,大家便會自覺地去遵循這個體系——“按照品牌體系的標準設計即可”?!拔覀冎恍枰凑阵w系來就行了,剩下的圖形創(chuàng)意工作就交給你們了”。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

2. 英文品牌規(guī)范的加入

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

3. 周年數(shù)字品牌規(guī)范

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

但是,周年品牌規(guī)范的統(tǒng)一,并不意味著每個活動獨特性的缺失。我們?nèi)耘f可以圍繞數(shù)字+主題發(fā)揮出強有力的創(chuàng)意,為每次活動創(chuàng)造豐富的主視覺。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

傳承:網(wǎng)易云商品牌設計

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

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

1. 品牌字體設計

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

比如網(wǎng)易云商的品牌字體中,“網(wǎng)“”易”“云”三個字已經(jīng)出現(xiàn)過,則直接取用,根據(jù)規(guī)范進行“商”字的設計即可。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

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

2. 品牌圖形設計

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

3. 品牌基因的延續(xù)

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

同時,整個圖形又像一個 DNA 雙螺旋基因,互相環(huán)繞增長。寓意網(wǎng)易云商,將成為企業(yè)的增長基因這一概念。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

最后,通過統(tǒng)一的品牌框架規(guī)范,將品牌圖形與品牌字體進行結(jié)合,形成了最終的完整方案。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

4. 制作完整品牌 VI 識別系統(tǒng)

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

生態(tài):品牌體系的長期價值

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

1. 自我成長的字體庫——網(wǎng)易正體

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

需要說明的是,雖然我們將字體的設計權(quán)交給設計師,但我們?nèi)耘f會對每個字體進行評審。除了字體風格的統(tǒng)一之外,我們對字體本身的基本要求也同樣嚴格,比如字形結(jié)構(gòu)的正確性、字體美感是否達到標準等。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

3. 圍繞品牌體系的內(nèi)部生態(tài)

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

隨著品牌體系的完善,我們的推設計廣體系、產(chǎn)品設計體系才有了建設的基礎(chǔ)。圍繞市場側(cè),我們建立了統(tǒng)一的推廣體系,用以規(guī)范線上線下的推廣輸出規(guī)范,產(chǎn)品官網(wǎng)的規(guī)范以及活動頁等規(guī)范。而圍繞產(chǎn)品側(cè),隨著品牌體系的認同,F(xiàn)ishDesign 的統(tǒng)一使用得以有了“群眾基礎(chǔ)”,并基于樣式組件化+規(guī)范體系化建立了產(chǎn)品設計體系。

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

2020 年下半年,網(wǎng)易智慧企業(yè)的中文名已經(jīng)正式升級為網(wǎng)易智企,歡迎關(guān)注我們的產(chǎn)品~

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

我們?yōu)槭裁匆⑵放企w系?

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

設計不僅僅是純粹的創(chuàng)意性,也不是片面的規(guī)范性。

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

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

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

如何構(gòu)建品牌體系?來看網(wǎng)易智企品牌體系化建設實錄!

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

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

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

文章來源:優(yōu)設  作者:Jady13_劍杰

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

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

資深UI設計者

什么是選擇器

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

選擇器的類別

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

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

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

點擊選擇器

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

  • 立即觸發(fā)式:

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

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

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

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

  • 再次確認觸發(fā)式:

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

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

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

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

滑動選擇器

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

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

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

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

多聯(lián)動選擇器

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

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

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

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

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

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

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

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

切換開關(guān)選擇器

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

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

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

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

可搜索選擇器

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

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

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

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

地圖選擇器

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

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

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

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

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

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

2. 多選選擇器

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

點擊多選選擇器

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

建議:從用戶的角度來講盡量不要強制用戶選擇數(shù)量或者默認全部數(shù)量;多選項時觸碰區(qū)域不能太小,以免造成誤操作。

舉例:小紅書在選擇感興趣的內(nèi)容時就采用了點擊多選選擇器,不過在選擇興趣時它就強制用戶至少關(guān)注4個興趣,而對于單興趣或者少興趣的用戶來講,這無疑會造成用戶體驗的不佳,被逼再次從中選擇次要的興趣。

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

滑動多選選擇器

特別注明:從用戶的角度來看,它可以選擇多個區(qū)域段的內(nèi)容,所以我把它分為多選選擇器中。

特點:當系統(tǒng)給出的選項不在自己的選擇區(qū)間時,可以很好的自定義選擇區(qū)間,把定義權(quán)限交在用戶手里。同樣,它需要再點擊別的觸發(fā)類組件(如保存按鈕)后,再執(zhí)行操作。

建議:在用戶滑動操作期間要有明確的操作提示,讓用戶時刻感知目前處于的狀態(tài);滑動區(qū)域盡量不要超過100刻度,如果刻度距離太小,用戶在滑動時也很難精準的選擇范圍。

舉例:在汽車之家APP中,當我要選擇汽車價格范圍時就會出現(xiàn)此選擇器,我們可以用手指滑動來選取它的價格區(qū)間,相對于上半部分的單選價格拓展性更強,用戶可以自行選擇上半部分的單選選擇器,也可以選擇滑動多選選擇器,給予用戶更多的選擇。

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

選擇器的十大應用要點

1. 簡單易懂

標題易懂:

在選擇器中標題一定要簡單明了,很快的讓用戶知道他在為什么做選擇(如:當你關(guān)注某烹飪的APP后,它會讓你勾選喜歡的菜譜,你的標題就可以用“選擇菜譜”四個字,簡單明了)

文字標簽易懂:

一般使用短語而不是句子,也并不需要用標點符號來結(jié)尾。(如:當選擇想要的菜譜時,菜譜后的文字不需要加入標點符號)

選取狀態(tài)易懂:

用戶能夠明確感知什么是選中狀態(tài),什么是未選中狀態(tài),什么是禁用狀態(tài)。(如:選中狀態(tài)為高亮顯示,未選中為普通顯示,禁用狀態(tài)為灰度顯示)

反饋提示易懂:

當你在選擇中遇到選項限制或是否需要確認操作時,反饋提示一定要一目了然。(如:當你選擇某衣服時,S碼不能選擇,則會用灰度顯示的文字代替,甚至可以用中橫線劃過文字,明確告訴用戶不能選擇)

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

2. 基本排序

從邏輯順序:

邏輯排序能讓用戶很快很準的找到自己需要的選項,特別是對于選擇地址/時間/個數(shù)等常規(guī)的選項時,可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時,就是按照A-Z字母排序,這樣可以大大節(jié)省用戶選擇的時間。

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

從產(chǎn)品利益角度排列順序:

當然為了產(chǎn)品自身的利益也可以自己優(yōu)化排序方式,選項的順序可以說服用戶進行選擇,用戶可能因為第一個選項在列表中的位置而選擇了第一個選項;可以輔助用戶,也可以讓用戶向著產(chǎn)品所希望的方向傾斜。例如你在選擇菜譜時,產(chǎn)品為了讓用戶選擇更加優(yōu)質(zhì)的菜譜,就會把用戶評價高的菜譜放在前列;當然商家也會這么做,例如你要去買某款商品,商家會在選項中把熱門、優(yōu)質(zhì)的產(chǎn)品放在最上方,讓你優(yōu)先選擇。

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

從用戶體驗排列順序:

從用戶角度來說哪些對用戶體驗好,那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位,而把用戶量最少的輕客放在了最后一位;同樣它在汽車品牌選擇中,單獨列出了熱門品牌把它放在前列,讓用戶進行快速選擇。

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

3. 一致性

視覺布局一致:

每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態(tài)的視覺體現(xiàn)。一般情況下移動端更傾向于左對齊,這樣有利于快速讀取選擇內(nèi)容,可以提高用戶的瀏覽效率并減少錯誤。

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

圖片/插畫風格統(tǒng)一:

在圖文結(jié)合的選擇器中,我們一定要保證圖片(插畫)的優(yōu)質(zhì)以及風格的統(tǒng)一。

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

4. 合理運用默認選項

默認選項是選擇器的開始狀態(tài)。在不同的選擇器中有不同的默認方式。

默認未選中:

這是最常見的一種狀態(tài),特別是對于選擇年齡、生日這些個人隱私信息,系統(tǒng)也沒有辦法進行默認選擇。

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

默認選中其中一個選項:

要想默認其中一項,必須考慮兩點因素,因素一:你想要潛意識的像用戶傳達信息,在單選選擇器中默認選擇一項后,就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產(chǎn)品的傾向,例如此產(chǎn)品的性別9成都是女性,那么建議默認選項為女性。

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

默認選中全部:

其實默認選中全部在用戶體驗上來講真的不是那么的友好,例如微博這個選擇器界面,剛進這個界面時已經(jīng)全部勾選中,并且當你沒注意習慣性的點擊下面的按鈕時會生立即生效,沒有返回的余地。(吐槽:有些APP甚至沒有一鍵取消功能,要一個個的點擊取消…)這也是為了產(chǎn)品犧牲掉了部分用戶體驗吧!

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

5. 給用戶更多選擇

單選選擇器的更多選擇:

如果用戶不想做出選擇,那么應該提供一個中立選項,為用戶提供一個明確的方向,中立選項比勉強選擇要好。例如在選擇行業(yè)領(lǐng)域時,以上并沒有你所處的領(lǐng)域或你不確定你的領(lǐng)域,你就可以選擇“不限”或“其他”。

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

多選選擇器的更多選擇:

在多選選擇器中,如果不能把控到用戶的準確選項區(qū)間,那么可以考慮滑動多選選擇器,讓用戶有更多的選擇區(qū)間,不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。

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

6. 控件狀態(tài)

選擇控件在操作過程中必須更改其狀態(tài)/外觀,要明確讓用戶知道是否能選中,是否被選中??丶顟B(tài)一般分為三種:未選中、選中、禁用。

未選中

選擇器的開始狀態(tài),向用戶表明,可對該選擇控件進行操作。

選中

用戶操作選取狀態(tài),選擇控件處于被選中的狀態(tài)。

禁用

一般情況會為灰色顯示,用戶將無法與選項進行交互。

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

7. 操作提示

指的是用戶在操作中讓用戶得到相應的反饋,用戶根據(jù)這些反饋可以判斷當前狀態(tài)以及操作后狀態(tài)。在選擇器中,操作提示一般用輔助文案提示及非模態(tài)彈窗提示。

輔助文案提示(選擇前與選擇中):

輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明,例如下面是地區(qū)選擇,我在選擇不同層級的區(qū)域時,它的上方會出現(xiàn)輔助提示文案,讓你明確的知道你上一層級選擇的是什么。

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

同樣,當我在選擇價格區(qū)間時,滑動選擇器的左上方一樣有文字類的提示:

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

非模態(tài)彈窗提示(選擇后):

非模態(tài)彈窗一般出現(xiàn)在用戶操作完的跳轉(zhuǎn)頁面中,為了讓用戶感知所選的選項在頁面的狀態(tài),如下,非模態(tài)彈窗告知用戶一共有7輛車符合標準。

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

當然除了非模態(tài)彈窗外,還有模態(tài)彈窗,但是用戶體驗極差,目前很少使用,所以就不列出來了。

8. 合理使用操作區(qū)域

擴大點擊區(qū)域:

在選取按鈕類的操作時,容易出現(xiàn)點擊不到或誤操作的現(xiàn)象,我們可以通過擴大點擊區(qū)的交互區(qū)域來提高易用性,例如下圖,雖然按鈕在左邊,但是可以把橫向區(qū)域都列為可點擊區(qū)域。

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

當然我們也可以從設計的角度來擴大視覺范圍,從而也提高了點擊范圍,這樣的處理不僅提升了視覺層面,還提升了交互體驗。(圖文結(jié)合方式)

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

注意交互間距:

在元素與元素之間一定要有合理的交互間距,不然很容易出現(xiàn)誤選的情況。

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

合理利用有效區(qū)域:

在選項較多的選擇器中,我們可以利用好選擇主體控件之外的區(qū)域,例如在選擇城市/品牌時,我們可以做A-Z index式字母交互區(qū),幫助用戶快速找到想要的選項。

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

9. 趣味性

讓用戶選擇本來就是一件枯燥乏味的事情,如果讓這件事變得有趣那么會極大的提升用戶體驗。

從文本層面:

例如當用戶填寫性別信息時,你給予用戶的文字信息并不是“男”/“女”,而是“帥氣的boy”與“酷酷的girl”,這樣會讓用戶覺得這是一件比較有趣的事情,而不是被動選擇。(注:這樣的取名一定要符合產(chǎn)品的特性)

從視覺層面:

加入可玩兒性的選項,例如汽車之家的頭像切換,可以選擇自己喜歡的頭像。(頭像并不是強制選擇的,如果不進行操作則是默認選項)

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

從交互層面:

讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒,在未選擇狀態(tài)他的人物會360度圍繞著轉(zhuǎn)動,當然你也可以快速拖拽,或者放大縮小,可玩兒性十足,并且在內(nèi)部設定了最匹配/新人的高亮顯示,協(xié)助用戶去選擇。

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

10. 合理使用選擇器

不同的產(chǎn)品在使用選擇器時都各有不同,因為每個選擇器都有它的利弊,而真正要怎么去選擇還要根據(jù)產(chǎn)品本身來定。

那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊:

多聯(lián)動選擇器(平鋪式)

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

貨車幫采用的是多聯(lián)動平鋪式選擇器,它最大的特點就是能夠一眼就看清楚所有地址,不過地址多時需要花時間去找,只是當你經(jīng)常使用此功能時便會形成記憶,再此搜索的時候就能形成記憶點擊,效率很高,并且在操作外還有路徑提示,不僅可以幫助你記住層級選項,還可以實時返回路徑進行重新選擇。

手勢操作:點-點-點

多聯(lián)動選擇器(列表跳轉(zhuǎn)式)

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

閑魚采用的是多聯(lián)動列表跳轉(zhuǎn)式選擇器,這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內(nèi)容,那么就又要切換到上一級,閑魚采用它的原因是因為它只有二級聯(lián)動,不存在遺忘現(xiàn)象,不過這樣列表式的選擇效率并沒有平鋪的效率高,人眼習慣掃視橫向內(nèi)容,所以橫向的內(nèi)容獲取往往要比縱向的多,在地址選擇器上我個人是不太建議采用多聯(lián)動列表跳轉(zhuǎn)式,因為并不也不直觀。

手勢操作:滑-點-點

多聯(lián)動選擇器(列表式)

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

轉(zhuǎn)轉(zhuǎn)采用的是多聯(lián)動列表式選擇器,它的優(yōu)點是可以根據(jù)右側(cè)字母來找城市,數(shù)據(jù)偏大也能夠很快的查找。不過如果在層級的選項中出現(xiàn)錯誤,同樣就要切換到上一級,并且在操作中沒有輔助信息提示。

手勢操作:滑/點-滑/點

多聯(lián)動選擇器(下滑式)

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

安居客采用的是多聯(lián)動下滑式選擇器,這種形式的選擇器不會遮擋后面的主要內(nèi)容信息,在選擇完地址之后能立即看到地址的篩選結(jié)果。優(yōu)點是能快速選擇多級地址,并且層級分明,擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。

手勢操作:點-滑/點-點

地圖選擇器

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

美團外賣采用的是地圖選擇器,這個選擇器一般用在需要精準定位的生活類APP中,它的優(yōu)點就是能夠快速精準定位,并且自動錄取定位信息,它的缺點也顯而易見,不能含帶層級并且對范圍也有約束。

文章來源:優(yōu)設  作者:黑獅力

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

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

資深UI設計者

在BAT、TMDJ等一線互聯(lián)網(wǎng)企業(yè),決策平臺又稱決策支持平臺、管理會計平臺。但實質(zhì)都是實現(xiàn)業(yè)財一體化后,提取業(yè)務、財務數(shù)據(jù),自動生成各種管理報表、財務報表,智能預警風險、預報業(yè)務前景,通過Dashboard或駕駛艙的形式展現(xiàn)給管理層、決策層,本文作者暫以管理會計平臺展開討論。

一、定義與范圍

1. 何謂“管理會計”

管理會計,從定義來看有狹義與廣義之分。狹義的“管理會計”通常是指財務會計概念,包含“成本管理”和“管理控制系統(tǒng)”兩部分。

而廣義的“管理會計”則是指運用一系列的分析手段,通過挖掘財務數(shù)據(jù)、業(yè)務報告等中潛在信息,對企業(yè)財務狀況、經(jīng)營成果、現(xiàn)金流量和產(chǎn)品競爭力進行分析,輔助經(jīng)營者進行決策,指出業(yè)務、財務風險隱患,預測未來趨勢,賦能業(yè)務,以數(shù)據(jù)驅(qū)動企業(yè)發(fā)展。本次討論的后者,即廣義的管理會計。

管理會計目標的實現(xiàn),不是簡單的某一個系統(tǒng)或產(chǎn)品能承載的,需要設計一系列的產(chǎn)品矩陣,包括基礎(chǔ)的核算系統(tǒng)如ERP、成本結(jié)算系統(tǒng)、預算系統(tǒng)、報表系統(tǒng),這個矩陣就是管理會計平臺(以下簡稱管會平臺)。

管會平臺的主體或用戶的不同使得所產(chǎn)出的管理報表(以下簡稱管報)指標也有所不同。用戶一般分為外部和內(nèi)部2個大維度。

1)外部用戶

投資人偏向于分析企業(yè)的盈利能力和資本保值增值能力,如凈利潤率、資本保值增值率等指標;債權(quán)人則側(cè)重分析資產(chǎn)負債水平和償債能力,如資產(chǎn)負債率、利息保障倍數(shù)、權(quán)益乘數(shù)等指標。

2)內(nèi)部用戶

應收會計崗則側(cè)重應收賬款的質(zhì)量、收入的趨勢,如應收賬款周轉(zhuǎn)率、收入環(huán)比或同比、速動比率等指標;資產(chǎn)會計崗偏向于分析資產(chǎn)的利用率、所帶來的價值,如資產(chǎn)周轉(zhuǎn)率等指標;而企業(yè)管理層或決策層會關(guān)注企業(yè)經(jīng)營活動和財務活動的一切方面。

管會平臺在設計時應考慮滿足這些不同用戶的需求,并通過權(quán)限、角色實現(xiàn)千人千面的效果,不同用戶展示不同指標集和報表。

2. 意義

管理會計不僅屬財務一個分支,更是財務在企業(yè)管理中應用的升華,財務的4個功能層次形象筑起管理會計的堅實基礎(chǔ):

  • 【看得見】:是指基礎(chǔ)核算功能,經(jīng)濟業(yè)務活動應及時反映在財務數(shù)據(jù)中;
  • 【說得清】:強調(diào)數(shù)據(jù)的可靠性,財務是業(yè)務的反映,業(yè)務與財務是一個閉循環(huán),不是憑空而來。結(jié)合業(yè)務,分析業(yè)務問題所在;
  • 【管得住】:則是預算系統(tǒng)在財務流程中的具現(xiàn),并實現(xiàn)費用控制;
  • 【指得準】:是指趨勢預測,通過管理會計平臺指明業(yè)務發(fā)展方向,實現(xiàn)賦能業(yè)務、數(shù)據(jù)驅(qū)動的最高境界。

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

做好管理會計,核算是基礎(chǔ),分析是關(guān)鍵,管控是抓手,賦能是核心。

分析不僅僅是傳統(tǒng)的報表分析,而是基于大數(shù)據(jù)、機器學習、AI等高科技手段,自動化、準確、智能的實現(xiàn)風險預警、趨勢預測,引領(lǐng)、驅(qū)動企業(yè)發(fā)展。

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

舉個栗子:每月關(guān)賬后財務都要做財務分析,收集各種業(yè)務、財務數(shù)據(jù),結(jié)合相關(guān)指標,以發(fā)現(xiàn)業(yè)務中的問題。如做杜邦分析法,分析凈資產(chǎn)收益率。

繼而計算總資產(chǎn)凈利率,權(quán)益乘數(shù),銷售凈利率、總資產(chǎn)周轉(zhuǎn)率……通過實際與預測的橫向?qū)Ρ?、基期與歷史的縱向?qū)Ρ?,找出各種指標異動原因,實質(zhì)是分析企業(yè)的贏利能力、營運能力、償債能力。

但這些通用的指標需結(jié)合企業(yè)實際情況、歷史數(shù)據(jù),并體系化形成產(chǎn)品,才能分析出癥結(jié)點所在,這也是管理會計平臺建設的意義與努力的方向。

二、產(chǎn)品架構(gòu)

如何搭建管理會計平臺(以下簡稱管會平臺)呢?互聯(lián)網(wǎng)管理會計平臺,其實并不是一個單一的平臺,而是由眾多關(guān)聯(lián)子系統(tǒng)構(gòu)成,通過多個子系統(tǒng)間協(xié)同合作完成管理會計目標的系統(tǒng)集。

從前端用戶的視角來看,獲取管理報表是一個很簡單的動作:查詢相關(guān)主體公司管理報表或分析結(jié)果即可,但從系統(tǒng)角度來說,管理會計的建設過程實際涉及了眾多財務子系統(tǒng)的協(xié)同、及復雜的系統(tǒng)邏輯。

一個典型的財務產(chǎn)品架構(gòu)如下圖,涉及多個子系統(tǒng)。典型管理會計產(chǎn)品分為生產(chǎn)端與消費端,架構(gòu)圖如下:

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

在簡要介紹各子系統(tǒng)功能前,可以先看以下簡化版的管會平臺產(chǎn)品架構(gòu)圖,典型的管會平臺產(chǎn)品架構(gòu)可以劃分為四層結(jié)構(gòu):支撐層、數(shù)據(jù)層、核心層、應用層:

1. 支撐層

用來支持管會平臺的基礎(chǔ)服務和基礎(chǔ)設施,包括容器云、安全服務、存儲服務、消息引擎、任務高度、短信服務、證書服務等。

2. 數(shù)據(jù)層

匯集業(yè)務、財務數(shù)據(jù),以大數(shù)據(jù)或數(shù)據(jù)湖的形式承載基礎(chǔ)數(shù)據(jù),包括ETL、BI、大數(shù)據(jù)等。

3. 核心層

管會平臺的核心模塊,分為清結(jié)算、財務中臺、ERP、預算、管報中心五大塊;

1)清結(jié)算

主要由計價、清分、結(jié)算、對賬組成,是業(yè)務活動在財務的2個反映之一,解決互聯(lián)網(wǎng)業(yè)態(tài)中的成本費用結(jié)算,與傳統(tǒng)企業(yè)的成本計量方法不同的是,一般是按個別計價法對不同時間段可以階段性、階梯性等復雜業(yè)態(tài)成本計量。

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

2)財務中臺

主要針對業(yè)務中非審批類的收入、資產(chǎn)折舊、攤銷,自動對賬、生成分錄,并傳遞至ERP,主要包括:入賬規(guī)則、數(shù)據(jù)校驗、分錄生成、主數(shù)據(jù)等。

3)預算模塊

預算功能,包含預算編制、執(zhí)行等,結(jié)合BPM審批流,實現(xiàn)費用控制。

4)ERP

財務核心入賬平臺,包括總賬、應收、應付、資產(chǎn)、財報等。

5)管報中心

管會平臺核心輸出層,包括生產(chǎn)端和消費端2部分,生產(chǎn)端分為指標集、規(guī)則引擎、模板、預處理、智能診斷等模塊。消費端主要是管報產(chǎn)出結(jié)果的展示即駕駛艙、手工確認或修正。

管報中心是核心中的核心,后面第三章會詳細展開。

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

4. 應用層

通過支撐層、數(shù)據(jù)層、核心層提供的服務組合起來,對最終用戶、運營管理人員提供的系統(tǒng)。在產(chǎn)品架構(gòu)層面體現(xiàn)為前端展示層、業(yè)務域和過程域。前端展示層主要是結(jié)果展示的形式,如PC端的web頁面、移動端的APP或H5、小程序等。

業(yè)務域是上游的各業(yè)務系統(tǒng),而過程域是管會平臺所依賴的流程工具、特征數(shù)據(jù),如供應商、ORG、BPM等。

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

三、管報中心

管報中心由生產(chǎn)端和消費端組成:

  • 生產(chǎn)端:諸如“成本費用率”、“速動比率”等指標集實現(xiàn)可視化、配置式的增加、禁用,再關(guān)聯(lián)規(guī)則引擎的會計科目、計算規(guī)則,提供給預處理模塊消費,并通過智能診斷產(chǎn)出相關(guān)指標的因果解析或預警信息;
  • 消費端:以駕駛艙的形式將相關(guān)結(jié)果展示給用戶。如對結(jié)果疑義時,還可手工修正。

1. 生產(chǎn)端

生產(chǎn)端流程圖如下:

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

【指標集】:配置各種指標,如“速動比率”、“產(chǎn)品成本費用率”等。一旦配置不得刪除,只可修改或禁用。上游是科目與計算規(guī)則,但校驗關(guān)系不在此模塊。

【模板】:指標、預警或診斷信息的集合,可導入或手工增加。在預處理和結(jié)果展示時,將會調(diào)用此模板。

【規(guī)則引擎】:由“科目規(guī)則”、“計算規(guī)則”、“指標規(guī)則”、“預警規(guī)則”四部分組成。

  • 科目規(guī)則,依賴主數(shù)據(jù)的會計科目,在此設置科目間依賴關(guān)系、重分類關(guān)系、借貸方向。如應收賬款與,余額應在借方;如果出現(xiàn)貸方,則可能是預付賬款,重分類時應放在預付賬款。如流動資產(chǎn)由貨幣資金、銀行存款、短期投資、應收票據(jù)、應收賬款和存貨構(gòu)成。
  • 計算規(guī)則,簡單的如加減乘除、取模、求余等,復雜的如貝葉斯推理。后臺預設,前端界面可自定義設置各種指標的計算規(guī)則。
  • 指標規(guī)則,指標與指標之間的邏輯關(guān)系,如“總資產(chǎn)凈利率 = 銷售凈利率 * 總資產(chǎn)周轉(zhuǎn)率”、“ 銷售凈利率 = 凈利潤/主營業(yè)務收入凈額”等等。
  • 預警規(guī)則,包括觸發(fā)開關(guān)、預警信息模板,預警條件、主因判定等。如下圖杜邦分析法對A公司進行分析預警:

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

在每一層指標中,有實際值、預測值,二者之間的偏離度,就是預警條件;“好”、“差”就是簡單的信息模板,可把具體原因也納入進來。

主因判定實質(zhì)是一個由上到下的遞歸過程,如此例中,A公司獲利能力(即資本報酬率)相對較差(3.08%<7.41%),這是第1層判斷。

再往第2層,經(jīng)過分析可知這不是因為總資產(chǎn)凈利潤差(2.55%>2.37%),而是財務融資能力差(1.21<3.21)。如此類推,直至分析至底層科目級指標。

【預處理】分為“重分類”、“平衡試算”、“定時任務”、“結(jié)果存儲”四部分,是報表產(chǎn)出的運算過程。其中“平衡試算”屬前置數(shù)據(jù)校驗,檢查數(shù)據(jù)是否達到報表可用程度?!岸〞r任務”與“結(jié)果存儲”屬技術(shù)性過程,“重分類”根據(jù)會計要求設置,具體由財務確定。

【智能診斷】是對具體的報表進行分析,由“診斷開始(數(shù)據(jù)準備)”、“規(guī)則判斷”、“預警判斷”、“結(jié)果確認”四部分。其中結(jié)果確認包含結(jié)果展示、消息分發(fā)、手工修正等?!耙?guī)則判斷”與“預警判斷”是對【規(guī)則引擎】中的“指標規(guī)則”、“預警規(guī)則”的具象應用,實際應用中可引入AI、TensorFlow(機器學習)等技術(shù)手段提升診斷的準確度。

2. 消費端

在生產(chǎn)端準確、及時生產(chǎn)出數(shù)據(jù)后,消費端就不愁無米下鍋了。一般通過Dashboard或駕駛艙展示,這一塊通常需要BI或數(shù)倉部門的協(xié)助,效果圖如下:

互聯(lián)網(wǎng)企業(yè)管理會計(決策)平臺的產(chǎn)品設計

四、總結(jié)

綜合以上,管會平臺的每個子系統(tǒng)并非孤立的,通過產(chǎn)品架構(gòu)相互關(guān)聯(lián)。產(chǎn)品架構(gòu)與技術(shù)架構(gòu)相輔相成,產(chǎn)品架構(gòu)決定需求和設計,技術(shù)架構(gòu)決定技術(shù)框架和性能。包括AI在智能診斷上的應用、數(shù)據(jù)域的實現(xiàn)等。

好的產(chǎn)品架構(gòu)將這些不同用途的功能進行聚類整合,因此,【才聽途說】建議將管會平臺拆分成多個子系統(tǒng),明確業(yè)務邊界,減少系統(tǒng)間的耦合,提供優(yōu)質(zhì)、的管理決策支持服務。

并根據(jù)前端業(yè)務場景的需求隨時進行調(diào)整變化以適應業(yè)務的發(fā)展,如規(guī)則引擎部分基本可由前端配置即可,減少后端開發(fā)與產(chǎn)品上線時間。

不同互聯(lián)網(wǎng)公司,業(yè)務體量甚至有成千上萬倍的差距,如京東集團內(nèi)不同BU的體量及發(fā)展速度造就其系統(tǒng)復雜度也差異巨大,高度復雜的管會平臺甚至需要數(shù)百人的技術(shù)團隊來設計、開發(fā)、維護。

不過,對于體量較小的互聯(lián)網(wǎng)公司來說,幾人的團隊即可搭建一套系統(tǒng)并維護日常運營。

互聯(lián)網(wǎng)企業(yè)作為金融科技業(yè)界引領(lǐng)者,建議在系統(tǒng)開發(fā)前期(從0到1),以MVP形式,小步快跑,快速迭代,盡快上線、降低開發(fā)成本,優(yōu)先開發(fā)主要需求、及較重要的子系統(tǒng),或并行實施幾個子系統(tǒng),如ERP的實施、清結(jié)算的開發(fā)、管報中心的開發(fā)可以并行。再做次優(yōu)級子系統(tǒng),逐步迭代。

隨著訂單量的提升及業(yè)務復雜度的增加,不同BU甚至不同BGBU的接入,管會平臺復雜度將指數(shù)及上升,系統(tǒng)處理起來會越來越吃力,若無良好的規(guī)劃,各子系統(tǒng)耦合度越來越高,雜糅在一起,系統(tǒng)靈活性越來越差,無法跟上業(yè)務的發(fā)展。

因此,管會平臺的中長期發(fā)展(從1到100、到∞),極其考驗我們的業(yè)務梳理能力,及對業(yè)務進行拆分、產(chǎn)品架構(gòu)的能力。

特別是目前行業(yè)內(nèi)還沒有體系化的管會平臺建設經(jīng)驗可參考時,更考驗我們的綜合能力,包括財務專業(yè)知識、業(yè)務理解力、產(chǎn)品規(guī)劃能力。

但萬事不要怕,只要抓住產(chǎn)品設計精髓,即設計的產(chǎn)品應滿足邏輯完整、業(yè)務功能明確、可擴展(發(fā)展方向明確但業(yè)務邊界清晰)、靈活(非耦合)等特點,一切將會迎刃而解。

文章來源:人人都是產(chǎn)品經(jīng)理  作者:B端老頭

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



日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔