大家好,今天給大家帶來的是配色干貨系列之第三期?。〕壐韶洠。?
前兩期地址傳送門:
前面兩期,主要分享審美的培養與提升、配色的技巧與習慣。本篇更為實在,主要分析有哪些經典的萬金油配色組合,滿足日常工作使用。
看完這篇文章,相信你對色彩的掌握,能更深一步~~干貨建議提前收藏!喜歡記得給咱們公眾號添加星標喔~~
1)經典搭配-黃配黑
色板 顏色組合
Yellow & Black
黃配黑的色系非常經典耐看,普適度也很廣。我在公眾號里寫的一些文章,也經常采用這套配色。
這套黃與黑的組合很適合一些生活、社區、人文、情感等場景進行使用,情緒溫和。如果你的設計,會被頻繁的在這些場景里進行使用,那么不妨使用一下這套黃黑配色試試看。
比如以下這些案例:
這里也給出我經常使用的兩組黃黑色板,一組更為活潑鮮艷,更具娛樂化。一組更為內斂,充滿文化氣息。
推薦組合色板①:
推薦組合色板②:
2)科技搭配-藍黑白
色板 顏色組合
Blue & Black
這套色彩就不多說了,藍色可以說是我非常喜歡的顏色之一了。從咱們公眾號的logo,還有日常發文的封面,相信大家就能感受到。
藍黑白搭配,可以說顏色是百看不膩,并且藍色色相偏冷,沒那么多情緒傾向,所以更能夠讓人心平氣和的閱讀信息,提升效率。因此也經常被用到科技、數據、社交、工具等應用場景。
比如以下幾組案例:
關于藍黑白,我也給大家推薦兩組我很喜歡的色號組合。一組更為明亮,顯得年輕活潑些,而另外一組則更加深沉商務,更為內斂。
推薦組合色板③:
推薦組合色板④:
3)CP組合-紅藍配
色板 顏色組合
Red & Blue
這套顏色組合,在近幾年可以說是非常流行了。顏色比較淺的,有經典的馬卡龍色組合,被廣泛運用到年輕社交等工具場景。而顏色重點的,直播娛樂等秀場平臺,也都大量可見其身影。
紅藍搭配,顏色的相撞導致色彩充滿了熱情與朝氣,社交娛樂化產品的場景,非常適合這套色彩組合。
比如下面這些案例:
這里也給大家分享兩套紅藍搭配的色板,一套略顯溫柔,另外一套則熱情如火。
推薦組合色板⑤:
推薦組合色板⑥:
4)經典國潮-赤金組合
色板 顏色組合
Yellow & Black
這幾年國潮風格也越來越受到大眾所喜愛,而在國潮色彩的搭配中,赤色與金色的搭配。一方面紅色中國味特色濃厚,而搭配上高檔的金色,瞬間濃厚的精致國民畫風,就出來了。
比如每年的集五福,就是非常經典的赤金組合,精致的同時,還非常接地氣兒。
關于赤金,我也從潘通色里挑選出了一組很經典高檔的色彩組合,色板色號也分享給大家。
推薦組合色板⑦:
推薦組合色板⑧:
5)尊顯高貴-黑金色
色板 顏色組合
Yellow & Black
黑金組合相比其它顏色更顯高貴,在很多知名的APP里面,也都是能看得到,比如淘寶的88vip,京東金融的小金庫。這套色彩組合往往代表著商務、尊貴,高級,既內斂又隱蔽,通常被用到各類會員、金融等尊貴體系中。
比如以下這些案例
關于黑金里面的金色,也分為兩種,一種顏色更為純金,還有種偏向于玫瑰金,玫瑰金的色彩相對要更溫和一些,沒那么冰冷。這兩套色板,我都分享給大家啦~~
推薦組合色板⑨:
推薦組合色板⑩:
6)其它色彩組合
色板 顏色組合資源下載
Yellow & Black
除了我上面分享的這五套經典配色,還有很多其它的色彩組合,也都非常優秀好看,比如上次分享的這些:
這段時間的積累收集,又更新了下面這些新色板。
還有很多,就不一一展示了。方便大家收藏,我把這些色彩組合的圖片+色板文件,都進行了打包,方便大家直接借鑒這些色彩。
文章來源:UI中國 作者:UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
疫情之下,很多零售商都開始經營私域流量,私域流量+傳統零售的新模式似乎成為了保持市場增長的新藥方,私域流量也對零售業進行了重新改造。本文將從三個方面對此展開分析,希望對你有幫助。
研究零售行業中的私域流量,有一個問題值得思考:是什么刺激了零售私域流量的發展?
今天,市場上移動互聯網的流量紅利消失,線下端人口紅利的消失。包括零售業在內,大部分行業的市場性質,已經從增量市場過渡到了存量市場。
整個存量市場中,依賴過去傳統的獲客方式,獲客成本在不斷升級,導致商戶之間的競爭激烈。即便各個平臺之間沒有形成自己的流量壁壘,各個商圈中的區位沒有形成壟斷。成本的不斷升級,最終還是會刺激私域流量取代傳統的獲客,成為一種市場成交的新方式。
私域流量作為存量市場的產物,進一步得到發展的趨勢非常明顯。
一部分原因是受到了零售商品的屬性影響,大部分的零售商品都是針對特定的用戶人群需求設計,服務定向人群為主。所以大部分的產品有針對性,買一次A商品和買十次A商品的人,大概率是同一批人。
因為這種情況,讓一個新客戶買一次產品的成本,是要比讓老客戶再多買一次產品的成本,高得多。
增量時期,大部分商家都沒注意老客戶的運營,當產品慢慢觸達到了市場邊際,積累了一定的市場體量后,下個階段更具有性價比的方向,就是前期一直被忽略了的定向人群的精細化運維,可提升復購性。
零售行業中,傳統模式的消費者和商戶的接觸,往往是離不開:人、場、貨的。同時一片區域內的線下超市和商店,只能服務這塊區域的客流量,存在地域流量壁壘。
傳統零售,消費者如果不去店鋪、超市里面,看不到商品的陳列,就可能不會買牛奶、買飲料,就沒辦法形成交易發生。所以傳統零售通過總代、分代、批發商,到零售商,開更多的線下店鋪,打通更多的線下代理渠道,實現獲客和成交。
但是私域流量+傳統零售的新模式,會讓市場重新審查傳統零售人貨場的模型。讓重點經營的方向也會瞄準老客戶線索的激活和運營,讓老客戶復購和帶新。
購物場景從線下(低頻率)轉到線上的可重復性。
私域流量模式內,用戶和商戶之間的觸點發生了改變,從線下遷移到線上。實體場景代入了內容場景,沒有實體店,照樣可以賣東西。
從一開始的人、場、貨模式,變成了一種可重復性的“叫賣”模式:一個消費者在社群中、朋友圈、小程序看到了信息推送,正好刺激了購買欲望,就會產生交易。生意的本質是人與人之間的供需鏈接。傳統零售和消費者的“觸點”是線下店,私域流量+零售的模式的觸點是線上的方式。
類似企業微信這種線上的方式,就幫助商戶綁定了客戶線索。不僅是縮短了商戶和消費者之間的距離,這中間還帶有社交屬性,幫助客戶更好地了解消費者需求,做好用戶需求的細分。
這種邏輯我們叫做“觸點營銷”,和用戶做朋友,讓熟人關系變成賣貨的渠道。
觸點,是商戶和消費者之間接觸點,通過接觸點傳遞信息和提供服務。(現在線上端習慣,用社群鏈接和服務消費者)
比如現在熱門的社區團購,是私域+傳統零售的典型模式。
原來小區小賣部的老板,觀察到小區的住戶每次都嫌棄買菜的時候,耗時長、不新鮮的問題,于是自己做團長經營私域流量,建立企業微信拉了一個買菜群,幫助小區住戶們“便捷買菜”
因為更加近距離的服務住戶,老板還可以記錄自己老顧客的喜好,做好SCRM的標簽處理:
一段時間之后,老板可以提前幾天進行這些日用品貨物的銷售,給住戶發一條信息:“你好鄰居,今天的豬肉6折,剛從XX現宰的,你看要給你留一點嗎?”這就是利用企業微信這線上端的觸點聯系,建立可重復性的模式。
這是傳統零售很難做到的,因為傳統零售沒辦法更近一步的接近消費者,所以自己手里是拿不到相關的數據,于是只能把錢都用在優質廣告位、優質區域位上,搶占消費者的視野。
那些年為了公域流量瘋狂燒錢的平臺:
傳統零售場景中,消費者買東西要么認功能,要么認牌子。但是私域模式的零售場景就不一樣,今天的消費者情感消費顆粒度比以前更細,決策情況在發生變化。
情感和服務因素,會使決策發生的更加快。你身邊的朋友和普通一個銷售,向你推薦同樣的一個物品,正常情況下,你選擇相信你朋友的概率是要大過于選擇銷售的。
還是用小區小賣部老板的例子,當老板服務多幾次住戶的時候,老板和住戶之間的信任程度會慢慢上升。(情感消費)
老板了解到消費者的采購米的喜好,可以嘗試給他推薦同品類,但是高單價、味道好吃的大米。在有原來信任基礎的前提下,肯定是有部分消費者愿意嘗試下,因為消費者追求“美味”的需求比較大眾化。
這種時候消費者的決策程度會由重度決策轉向輕度決策,一句話概括就是:你辦事我放心。
私域流量中,客戶和商戶的聯系變得非常密切,人即流量,關系即渠道,熟人變熟客。雖然要成為好朋友這個門檻比較難,但是在消費者的決策中,中間的情感因素會影響到消費者的決策。讓決策變的更加的輕度。
重要的是,信息觸達的成本也降低了很多。據「加一私域」官方統計:以大眾客戶運營每年發12次短信類比,同樣100萬私域客戶的群發觸達每年至少節省20多萬元營銷成本。再加上朋友圈運營,每發送一條朋友圈價值3-5萬元(按騰訊朋友圈廣告1000人曝光 / 30 – 50元為例計算)
消費者在對商品進行購買決策的時候,有一個很大的通?。哼x擇困難癥。所以在傳統的零售中,商品的陳列擺放也成了一門學問。貴的、銷售額好的基本上都放在了展架的上面的位置。
同時很多的零售廠商為了博消費者的眼球,各種商品的包裝也是非常講究的。
這樣做是為了讓商品,第一時間出現在消費者的面前,提高成交轉化的概率。大部分的消費因為有選擇困難癥,往往第一眼被看到的商品,這些商品的成交率比較高,這就是商品的“C位”效應。
在私域+零售的模式中,沒有了線下店鋪,內容是私域中商品的唯一的展柜。通過內容構建一個消費場景,實現“貨找人”模式。
像很多的微商的朋友圈內容,就是構建這樣的“貨找人”場景。朋友圈和社群中的場景,營造的是一種“即時成交”,通過內容構建一種“沖動型的消費場景”,讓交易的發生短、平、快(時間短、速度快、產品平民化)
私域模式中“貨找人”,就要站在客戶視角,與人近,就會離增長更加近。私域流量模式不是要一下干件大事,而是做對一系列小事;要做對一系列的小事,就要不停的細分,挖細節,挖每一個和消費者接觸的點。
文章來源:人人都是產品經理 作者:陽俊Orlo
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品經理日常工作中最常聽到的詞就是需求,而產品經理的核心工作也就是把需求變成可使用的產品。那當我們接到需求時,我們是如何把它轉化成產品呢?本文將從七個方面進行分析,希望對你有幫助。
首先我們先了解一下,在產品開發過程中所溝通的“需求”到底指的是什么。我們先舉幾個我們工作中常常聽到的需求:
我們可以將平常聽到的需求都歸為這三類,產品經理需要做的就是將目標需求和業務需要轉化為產品方案,然后交付給開發團隊。
接下來我們將以羽毛球館訂場地這個業務需求,來拆解一下整個過程,看它是一步步變成產品方案的。
場館運營部門提出一個需求,我們需要實現線上訂場地。
業務需求的提出,肯定是為了解決某些業務問題。通過調研,現在純線下訂場的方式存在以下問題:
球友:
場館:
業務問題定位了,后面的設計就要圍繞這些問題展開,設計完后要回過來看有沒有解決這些問題,否則一切都是徒勞的。
流程是產品設計的關鍵,梳理流程能讓你對整個過程更清晰。梳理過程前,先要明確下訂場有幾個場景,因為每個場景的流程可能不太一樣。通過調研和分析得知,訂場主要有以下幾種場景:
這里就要思考一下,我們這次設計是否要滿足這5個場景呢?我們回到定位業務問題這一步,問題都是在想要運動的球友在訂場時存在的,而方式e在線下的處理暫時并沒有多大問題,再深入一步調研可了解到,包場都是直接線下談好價格,這個價格也是可浮動的,然后將錢線下轉給場館,放到線上反而不靈活,所以我們就先不考慮線上實現這個場景。
Tips:產品經理需要學會做減法,并不是把線下所有業務搬到線上來,開發出來后發現并沒有什么用,又浪費這么多資源。
將待實現場景確定下來后,我們需梳理每個場景的業務流程,這樣才能對整個過程清晰。因為我們這次只是講方法,所以就只拿場景a來舉例,繼續下面的分析過程。
我們梳理出線上訂場流程圖后,這時我們需要分析一下,這些環節哪些需要做到線上?
入場前:訂場、付款、鎖場肯定是需要做到線上的,產品的目標就是為了解決訂場效率低的問題;
前臺接待:出示訂場憑證、校驗訂場憑證、開燈、放行這些環節并沒有太大的影響效率。出示訂場憑證、校驗訂場憑證可通過報手機號的形式解決。開燈和放行涉及到智能燈控和智能閘機的對接,沒有這些東西業務也能跑的通,也能正常營業,這期也先不考慮在線上實現;
入場后:到點提示也涉及到智能設備的對接,先可人工提示。
Tips:產品經理需要定義需求的優先級,先把影響業務正常運行的問題解決掉,再來迭代優化。
業務規則是運營部門為使業務正常運行而定義的,就算沒有系統也是存在的。產品經理需要做的是把這些業務規則梳理出來,然后用產品的語言把它描述出來。還是以線上訂場舉例,場地什么時候可以訂?訂的時候有沒有時間限制?價格會由哪些因素影響?可不可以退場?會員有沒有什么特殊權限?這些規則聽著是不是很亂,這就需要產品經理一條一條梳理清楚,梳理規則的同時還需要多問為什么要這樣做呢,一來以后方便和開發等同事說清楚為什么這樣設計,二來也能加深自己對業務的了解。
通過調研我們梳理出以下預訂規則,但我們需注意以下兩點:
以上只列舉了線上訂場的預訂規則,還有退訂規則、價格方案規則、會員權限等規則都需要一條一條梳理出來,這里就不一一列舉出來了。
業務流程和業務規則都梳理出來后,就可以畫原型了。這一步對產品經理來說,即簡單又困難。簡單是因為去想象具象的軟件操作比思考抽樣的業務邏輯更容易,難是因為畫的原型最終要符合業務流程和業務規則,并且還要符合常規交互原則。
從業務流程分析,整個訂場環節涉及到球友和場館,那肯定要有球友訂場端和場館管理端。球友訂場端剛開始也沒必要做APP,做個H5放在微信公眾號就可以了,還能引流到公眾號。確定好用什么來實現后,我們要梳理一下線上訂場有哪些頁面,不要想到一個畫一個,這樣很容易漏頁面。
Tips:剛開始設計原型時,盡量不要添加一些和主流程無關的頁面,比如你覺得別人做了個VR查看場館,你也要做一個,但是前期最重要的是把業務跑通,再來添加一些附加功能。
工具類產品原型設計多參考一下美團、淘寶等移動端產品,因為移動端產品發展到現在,已經培養了用戶的操作認知,我們不用去發明輪子,讓用戶再重新去學習。
產品的原型出來了,可以給客戶演示,讓客戶跑一遍整個流程,看先前提的業務問題有沒有得到解決。如果有問題,再進行調整。其實讓客戶跑一遍流程也不能發現所有問題,只有在真正使用的時候才會暴露出問題來,但這一步也是不可少了。
PRD全稱為Product Requirement Document,中文名為“產品需求文檔”。其核心目的是幫助開發、測試、運營、產品人員理解該需求的背景和具體要求,減少產品實現過程中諸多不必要的重復解答,從而提升整體項目推進效率。當業務規則、業務流程、原型圖都出來后,我們需要把它交付給我們的開發團隊去實現,交付的形式就是PRD。這里就不闡述PRD怎么寫了。
當接到業務需求時,變成產品的過程是:
以上只是個理想化的流程,產品經理并不是寫完PRD扔給開發就沒事了。包括后面的需求評審、跟進開發進度和問題、測試上線、迭代優化等,都需要產品經理主導。
文章來源:人人都是產品經理 作者:康力文
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年產品體驗日記,小目標365節,第016~030節。
前言
在互聯網產品日趨成熟的今天,APP同質化越來越嚴重,使得設計不夠精致、沒有氣質及品牌感。一個設計精致APP不應漏過任何一個細節,美觀、可用和的界面設計都需要花費大量的時間從細節上去打磨,并從多方面鉆研并創造出打動人心的UI/UE設計。
2021 | 第02篇分享目錄(016~030)
016.「QQ」手勢力度決定頁面展示范圍
017.「高德地圖」地點打卡-未來回憶曾經的足跡
018.「優酷」會員轉化-擊潰用戶最后一道心理防線
019.「網易云音樂」播放中的歌曲快速定位
020.「boss直聘」多個入口-簡化二次操作流程
021.「菜鳥」備注-快速找到列表中的包裹
022.「蝦米音樂」符合產品特性氣質的標簽欄
023.「QQ音樂」觸手可及的選擇性MV播放
024.「微信讀書」提升操作效率的進度條控制
025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕
026.「淘寶」應對意外退出的通道
027.「微信」行為預判-提升操作效率
028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂
029.「京東」送禮物-更是一種神秘和驚喜
030.「叮咚買菜」一頓吃光-減少食材的浪費問題
016.「QQ」手勢力度決定頁面展示范圍
產品體驗:
QQ聊天的表情列表版塊,系統會根據用戶上滑的力度來確定表情選擇區域的大小,力度越大,列表區域占比就越大,同屏可供選擇的表情就越多。
設計思考:
經常使用QQ表情包的用戶都知道,其更新頻率非常快。比如社會上的最近發生的大事件、互聯網當前流行的熱詞,甚至在疫情期間,凡是跟疫情相關的表情包都在不斷變化,從開始的安全防護到后面的線上辦公等,以至于深受廣大用戶的喜愛。
QQ的表情功能其中還有一個細節,用戶在選擇表情時,系統根據向上滑動的力度來確定表情區域所展示的范圍?;瑒拥牧Χ容^大時,考慮到用戶可能需要在更多的表情包中選擇的情況,固增大顯示的區域,便于用戶在同一屏界面中可瀏覽的范圍更大,同屏展示更多的表情包讓用戶在更短的時間內找到自己所需,所見即所得,對用戶進行的定性操作十分友好,從細節處理方面提升了用戶體驗。
017.「高德地圖」地點打卡-未來回憶曾經的足跡
產品體驗:
在高德地圖的足跡功能里,可以對我們所在的地點進行打卡,系統就會以亮光形式顯示我們去過的城市,并留下“???”標記,點擊可以查看自己的打卡時間和具體位置。
設計思考:
我們在高壓的生活下及忙碌的工作中,曾經去過很多地方游玩或者路過,隨著時間不斷的流逝,這些都成了模糊的記憶。當有一天靜下心來細想,好想去過的地方很少,甚至回憶不起來。
高德地圖APP的足跡打卡功能可以幫助我們記錄所去過的每一個地方,分為自動和手動打卡。在設置中開啟自動打卡后,當用戶使用導航的目的地屬于名勝古跡、美食地標建筑等類型的地點,導航結束后,即可自動完成打卡,如有特別需要,還可以通過手動打卡記錄每一個點。打卡功能雖然在表面上并非用戶硬性需求,但在未來的某個時間看到自己曾經的足跡時也略表欣慰,還可以滿足部分用戶的虛榮心,也許在無意間就能撫慰認為自己去過的地方太少、較為傷感的幼小心靈,給與溫暖的安撫與力量。
018.「優酷」會員轉化-擊潰用戶最后一道心理防線
產品體驗:
優酷普通用戶在看影片前面的廣告時,倒計時后面會提示xxx元可關閉廣告,廣告下方通過展示會員特權以鼓勵普通用戶升級會員,且定時滾動展示剛剛已加入會員的文字提醒。
設計思考:
不管哪個影視平臺,無論何種設備,非付費會員用戶在看影片前都需要先經過長達幾十秒的廣告,這是任何人都無法避免的一堵墻,廣告除了可盈利之外,還能起到激勵普通用戶開通付費會員的用處。
優酷視頻激勵普通用戶開通會員的的手段可謂是拍案叫絕。
①、利益引誘:在廣告倒計時的后面直接展示開通會員的金額, 通過優惠等利益刺激手段,吸引用戶繼續完成對產品的消費。較小的金額可以降低用戶的經濟成本,同時增加用戶對會員價格的心理接受程度,減少其防備心理,有很大的幾率吸引用戶產生開通會員的動機,促使用戶行動增強轉化(除了首次開通連續付費業務,所付出的金錢成本較低外,其他情況下價格并無優惠,不過一旦讓用戶產生了付費動機,這些都是后話);
② 、增加說服力: 廣告下方羅列了部分比較重要的會員功能,圍繞開通會員后的特權并強調效果,以此證明會員內容的質量與真實性,吸引用戶去了解,為用戶增加開通會員驅動力;
③、羊群效應:提示****剛剛加入了會員,利用從眾心理,因為用戶的想法和行為容易受到周圍人們的影響,往往會勝過自己的理性認知。通過前面的用戶已做了前驅和后盾,不斷的引導和刺激用戶去開通會員(羊群效應在現實生活中遇到的很多。比如:大部分用戶出去吃飯,對空無一人的飯店沒有動力,往往會選擇里面已經坐了一些人的店鋪;走在外面,哪里圍的人多,就想擠進去看個究竟)。
019.「網易云音樂」播放中的歌曲快速定位
產品體驗:
在網易云音樂播放當前列表的歌曲后,當界面存在上下滑動的操作行為時,右下角會出現定位圖標,點擊可直接定位到正在播放的歌曲位置,如無任何操作,3秒后圖標自動消失。
設計思考:
我們在聽歌時,如果是無目標的行為,基本都會進入到某一個類型的列表或收藏歌單,進行順序播放,比如飆升榜、新歌榜等。如果有興趣,可能會在列表中上下滑動來看看是否有自己熟悉的歌曲,等最后要回到正在播放的歌曲位置時,就尷尬了,需要花費更多的時間來找到,在自己收藏的歌單中就更不用多說了。
網易云音樂在歌曲列表中增加了快速定位按鈕,當系統檢測到正在播放的歌曲列表中有滑動操作時,圖標會自動出現,點擊快速定位播放歌曲位置,方便快捷、省時省力。如果你的歌單中添加的歌曲太多,又無法找到播放的歌曲時,不妨試試右下角的定位按鈕吧,此功能真的很人性化。
020.「boss直聘」多個入口-簡化二次操作流程
產品體驗:
在boss直聘求職關鍵詞頁面,單點復選框選中/取消,底部同時提供已選中關鍵詞,可進行單個刪除或通過左下方的清除按鈕一鍵刪除。
設計思考:
在用戶的常規認知里,選項條件為數不多的復選框操作都是單點選中/取消,這種操作方式基本也成了用戶的慣性思維,若站在用戶體驗角度深挖細節的話,即使是大眾用戶都認可,其實也沒有最好,都還有上升的空間。
boss直聘的求職關鍵詞選擇,在這方面就做的更好,除了常規的單點選中/取消外,其底部還提供了已選中的關鍵詞條,用戶可在小范圍內清楚的知道已選中的內容,讓需求更加集中,便于進行統計、對比或刪除等操作,避免在頁面多個目標中尋找而增加時間成本。另外左下角還提供了清除按鈕,需要重新選擇目標的用戶,可一鍵刪除,節省了之前多次點擊的重復步驟,簡化二次操作流程。
021.「菜鳥」備注-快速找到列表中的包裹
產品體驗:
菜鳥的包裹列表,左滑其中的一個,可通過包裹備注修改名稱,方便用戶在包裹較多時有目標的查看。
設計思考:
網購已成為用戶的日常習慣,沒事的時候淘寶逛一逛、京東走一走、不急用的就在拼多多砍一砍。但網購平臺何其之多。我曾經碰到過這種情況,在不同的平臺都買了商品,其中有急/不急用的。最為難熬的就是等待物流了,頻繁的奔波于各大電商平臺個人中心的訂單頁面查看最近物流狀況,步驟繁瑣不說,還浪費大量的時間,手機差的還會閃退卡頓,相信這也是很多網購用戶的苦惱,直到菜鳥包裹的出現......
菜鳥定向的集合各大物流平臺的包裹數據,通過手機號碼,將單個用戶的包裹歸類到一個地方,非常方便。在使用過程中,還有一個很友好的設計細節,包裹名稱備注。在包列表中,可選中其中的一個包裹左滑,對名稱進行備注,便于用戶包裹過多時需要對其中部分包較急的包裹進行頻繁的查看,備注之后一目了然,能降低因誤點造成重復操作的可能性,快速找到想要的包裹,方便用戶有目標的查看。
022.「蝦米音樂」符合產品特性氣質的標簽欄
產品體驗:
蝦米音樂頂部標簽欄的選中狀態,文字放大的同時配合一段起伏較大的音頻波紋動效,彰顯行業產品特性。
設計思考:
標簽欄是APP界面中較為常見的控件之一,在視覺表現方面,只有選中、未選中兩種狀態,其設計也比較簡單,通常會在文字顏色/字重大小上進行變化,標簽下方加上小長條來區分兩者的狀態,用戶對于這種表現方式也是高度認可的,如果不想被同質化,未在細節上下足功夫,就很難設計出彩。
蝦米音樂的標簽欄選中狀態除了文字大小對比非常明顯外,下方是一段音頻波線動效,跳脫出較為常見的設計規范限制,從行業屬性中獲取靈感,把用戶在現實世界中物理認知的“聲波”形象來源作為產品特性,提取出具有獨特氣質的視覺音頻波紋樣式替代選中狀態的小長條,這樣能建立起視覺上的聯系,讓用戶產生由內而外的一致感受,既有設計感又符合產品特征。
023.「QQ音樂」觸手可及的選擇性MV播放
產品體驗:
在QQ音樂播放頁封面圖的右下角,會顯示該歌曲相關的視頻數量,點擊則展開視頻列表,通過左右滑動選擇想看的視頻,可直接進入視頻播放。
設計思考:
有人說:聽音樂是一種情緒,也是一種心情,能從不同類型的音樂中聽出共鳴,去發現一些事物的美好。當我們發現自己喜歡上一首歌曲時,有沒有想打開該歌曲MV一睹演唱者的風采,或者邊聽邊看去感受歌曲意境和內容所帶來的一些理解上的輔助。
QQ音樂將歌曲的MV展示在播放頁封面圖片的右下角并提示數量,近在咫尺,便于用戶在聽歌的過程中對視頻選擇性的播放。一般音樂類型的應用在都是一首歌對應一個MV入口,需要先通過頁面的跳轉才能對視頻進行選擇,QQ音樂的這種交互路徑能避免用戶在聽歌過程中選擇視頻時造成中斷,通過左右滑動選擇想看的視頻,選中即可直接進入視頻播放頁,優化了操作路徑,減少操作步驟,觸手可及且不打斷沉浸式的音樂享受。
024.「微信讀書」提升操作效率的進度條控制
產品體驗:
打開微信讀書的進度控制條,點擊游標左右滑動,除了頁面內容變化外,進度條上方會顯示當前頁碼/總頁碼,并提示章節及標題;長按游標可單獨對書本的頁碼進行精準化的切換。
設計思考:
讀書就是和世界各個行業的人物進行一對一交流的過程,如果想通過讀書收獲成長,就要靠自己看書、學習、思考,并把知識用到自己的工作和生活中,不斷讓自己做出改變,因此也誕生了很多讀書類型的應用,線上看書不僅能適合多樣化的環境,還能節省經濟成本。曾經有人感慨,電子書是線性的,而紙質書是立體的,想看前面有聯系的內容就可以隨時返回去再讀,而電子書只能通過目錄和書簽來解決,要經過多次的操作和頁面的跳轉,且書本的內容都是通過數據傳輸、每次都要刷頁面才能看到內容,有可能會打擾用戶看書的思路,相對紙質書籍,看書效率和吸收程度就低了許多。
其實并非全是如此,微信讀書考慮到體驗方面,針對用戶在讀書過程中可能出現的前后頻繁翻頁的問題,在進度條控制細節上做了很多便捷化的設計。用戶可通過點擊或長按控制條上游標,根據自己的實際需求進行前后長/短距離的滑動,就能輕松滿足自己所需要的頁面轉,并伴隨明顯的小窗文字提醒。此功能相對紙質書籍雖然不能堪稱完美,但足以解決用戶線上讀書時最基本的需求,讓操作流程變的更加簡單,大幅度的提升了操作效率,節約時間成本并提成產品的易用性。
025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕
產品體驗:
在嗶哩嗶哩看《信條》電影,播放到時間發生逆向片段時,彈幕的文字及方向也發生逆轉,即逆向彈幕,兩者結合在一起非常應景,網友幾乎被“驚掉下巴”。
設計思考:
有很多用戶喜歡開著彈幕看視頻,彈幕有可能是視頻內容的良好補充,大部分視頻是不能牢牢抓住觀眾,也不需要觀眾死死盯著看的。各種神彈幕、刷屏本身就是內容的重要組成部分,所以看著彈幕可以給我們在看視頻的過程中帶來更好的氛圍及愉悅的體驗(部分不愛開彈幕的用戶除外)。
最近被一個腦洞的彈幕方式吸引到了-逆向彈幕。B站在《信條》電影里隱藏了一個很有趣的彩蛋,正負時間線穿插(片頭也逆向了)的情節發展,設計了讓人驚艷的逆向彈幕,跟電影的逆向片段組合在一起時非常應景,神奇且趣味化的彈幕方式讓用戶幾乎“驚掉下巴”,看完電影后仍能記憶猶新。有人直言“當時在電影院看完信條后,是不是倒著走出來,影院就把買票的錢給退了”。
026.「淘寶」應對意外退出的通道
產品體驗:
在淘寶的其他功能頁面發生閃退或意外結束應該進程時,再次進入首頁,會提供“打開上次訪問的頁面”的快捷入口,如無需要,幾秒后入口自動消失。
設計思考:
智能時代,每個人的手機中應該都裝有不下幾十個APP軟件。當我們正沉浸在某個APP當的內容時,因設備或其他原因意外的結束了應用進程,當再次打開時,需要憑借自己的記憶多番操作才能回到原來的內容處,甚至永遠無法找到,為此真的是很苦惱。
淘寶針對軟件意外退出的情況則留了一手,當用戶在使用過程中,APP因意外情況退出時,下次進入,可通過首頁提供的“打開上次訪問的頁面”入口,快速回到原先失蹤的頁面,再也不用擔心內容丟失了,看似一個簡單的入口,但通過細微的改進能給用戶帶來更好的操控感和易用性,便于用戶通過短時間記憶還原。
027.「微信」行為預判-提升操作效率
產品體驗:
我們在手機的其他界面發生截圖行為時,打開微信對話框的工具欄,系統會把剛剛截取的圖片以縮略圖的方式展示在右側,暗示詢問用戶是否有發送此圖片的需求,幾秒后會自動消失。
設計思考:
我們不管使用何種應用,在交流過程中有發送圖片的需求時,除了應用本身提供的圖片之外,其他都繞不開系統相冊功能。如若深究用戶體驗,進入相冊的操作路徑是可以減少的。
從微信對話框頁面打開工具欄,如在相近的時間內系統檢測到有截屏行為時,會把剛剛截取的圖片以縮略圖的方式展示在屏幕右側,點擊即可發送,通過行為感知并幫助用戶解決可能有發送此圖片的需求,提前預判用戶的操作,以提升選擇效率。若無此需求,幾秒后自動消失,絲毫不影響用戶的其他操作。
028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂
產品體驗:
在抖音搜索較為極端且消極的關鍵詞時,比如:抑郁、服毒、不想活了等,系統會出現較為溫馨的愛心畫面,并通過情感化的文案鼓勵以及提供心理援助渠道,以此來提高用戶的積極情緒。
設計思考:
人們通常會借助于歡樂、開心來表達自己的愉悅,同時也會面臨悲傷、憂慮的情況,需要表達心中的苦悶。如果沒有得到有效的疏解、排遣,使得內心一直處于郁悶狀態無疑是很糟糕的。尤其是目前處于高度壓力下的年前人群,在環境因素、心理與生理創傷、家庭環境等情況的影響下,導致一些人因為心中的苦悶,得不到很好地宣泄、發泄,走上了極端的想法,其解決問題的方式不管是線下、線上都是從心理上入手。
抖音APP在面對極端且消極的關鍵詞搜索時,并非跟其他應用的搜索結果雷同,而是以情緒激勵的統一樣式展示結果。首先通過溫馨的愛心畫面緩解較為消極的用戶情緒,并通過積極正向的文案鼓勵用戶;其次,基于用戶在心情低落時要得到安慰或鼓勵的需求,平臺提供了心理援助熱線以及消極心理的疏導建議,幫助用戶進行緩解或改善消極行為。作為一個短視頻平臺,雖然沒有明確的義務去撫慰用戶,但這種做法可以用溫暖的方式傳遞愛與力量,也撫慰每一個被情緒困擾過的靈魂,讓用戶感受到親切放松的氛圍,是鞏固用戶粘性與忠誠度十分巧妙的方式。
029.「京東」送禮物-更是一種神秘和驚喜
產品體驗:
在京東商城購物禮物時,可以通過商品詳情頁的“送禮物給TA”,節省很多中間步驟,直接在線上完成包裝、賀卡、寄語和快遞等“一條龍”服務,將禮物送到對方手中。
設計思考:
部分用戶在特殊情況下,都有送禮物的小習慣,不管是禮尚往來、男女朋友還是送基友,有時甚至不需要理由,只想把最好的東西送給TA們。這時候可能去會店里(線上/線下)買一個對方喜歡的東西,然后經過包裝+寄語,再快遞給對方,因為整個流程的復雜,有時候不可避免會出現一些突發性的狀況,難免造成尷尬。
在京東APP購買禮物則省去了一些列的麻煩,只需要選好禮物,即可完成從包裝、賀卡、寄語和快遞等“一條龍”服務,免去不必要的麻煩以降低出錯的可能性,將操作流程和路徑都進行了簡化,讓整個送禮的過程更。通過選擇合適禮物的包裝風格,制造出禮物的神秘感,送出的不僅僅是禮物,更是一種浪漫和驚喜。
030.「叮咚買菜」一頓吃光-減少食材的浪費問題
產品體驗:
在叮咚買菜分類的“一頓吃光”列表中,菜品會根據專業廚師建議一頓的常規用量進行組合搭配包裝,包括分量較小的調味品類也進行了小份裝的貼心組合,避免食材偏多造成浪費或損耗。
設計思考:
“一粥一飯,當思來之不易”,勤儉節約,珍惜糧食是我國的傳統美德。隨著互聯網帶來的便利,很多人足不出戶便可在線上平臺完成食材的購買,但買菜也存在的很多困擾,比如買少了不夠吃,買多了又浪費,沒有一個確切的方案可以讓買的一頓食材剛剛好,因此會造成食材的浪費和更多的金錢成本。
叮咚買菜推出的“一頓吃光”欄目,用倡導勤儉節約的用餐理念與生活方式,篩選出用戶經常購買的食材搭配,再根據專業廚師對食材配比,進行分量、包裝及動態調整,以最大化滿足消費者需求,減少食材的損耗,在很大程度上解決了買菜很難確定食材分量的問題,不僅讓用戶每餐都吃得新鮮健康的同時,盡可能地減少食物浪費。
結語:
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。
本期產品設計細節分享結束,我們下期再見。
轉自:站酷
作者:大漠飛鷹CYSJ
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為產品設計者,經常遇到一個備受靈魂拷問的問題:怎么衡量我們設計的產品,用戶體驗是過關的?
今年,我們在內部中后臺產品進行嘗試,發現「易用度」可以作為合適的度量指標,并成功推廣到 35 個產品,幫助PD、設計師、工程師等產品設計者去衡量產品體驗現狀,發現改進機會點。實踐證明,易用度,相比滿意度、尖叫度、NPS,更適合技術類產品的體驗度量。結合用戶行為數據,可以為用戶畫像、改進方向、運營策略提供更準確的決策依據。
在掌握了這些信息之后,我們在內部的技術類產品上,進行了一輪新的探索。經過半年時間的試點,結合業界的解決方案、內部產品的業務特性,我們最終選擇主觀衡量法,并使用「易用度」這個衡量指標。
為什么易用度相比其他指標更適合技術類產品呢?主要有 3 個原因:
結合行為數據,易用度可以進行描述、分類。使用現狀描述找出低分人群的高頻問題,使用對比差異找到多角色的不同訴求,分析影響關系找到影響易用度的主要因素,結合用戶行為數據進行聚類找到典型人群。
文章來源:站酷 作者:Ant_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
品牌體系的長期價值是什么?如何構建完整品牌體系?
本文將以網易智企品牌設計體系的建立過程為案例,與大家分享一下品牌體系化過程中的經驗和總結。
△ 網易智企-品牌設計體系
目錄
網易智企是一站式企業服務提供商,依托 23 年 AI、大數據、通訊音視頻技術,以 PaaS、SaaS 為主,提供智能化、數據化、場景化的企業服務解決方案。
網易智企的前身,是網易云信和網易七魚兩個的產品。2019 年初,網易集團決定整合 B 端資源,成立一個新的事業部——網易智企,并在此之后陸續打造了網易定位、網易互客等多個優秀產品。
至此,網易智企的品牌架構由兩個獨立的產品品牌,逐漸變成了事業部品牌+多個子品牌的品牌架構。
但是,因為原有的兩個品牌(即云信、七魚)已經運營多年,在設計上并不統一。而事業部品牌為新設計的品牌,再加上其他的子品牌,最終造成了多個品牌在設計上“各自為政”的現狀。
并且隨著網易智企的快速發展,子品牌不斷的變多,我們與市場部同學便逐漸發現了一些問題。下圖是市場部同事在 2019 年發表在朋友圈的一張圖,便是當時品牌的現狀。
△ 網易智慧企業現狀(2019 年初)
雖然產品線愈發豐富,整個事業部也在不斷成長中。但是,若是品牌設計體系不夠清晰,將會對未來的品牌傳播造成非常多的問題,之后的修正成本也會越來越高。
如何改變現狀?我們是否能夠主動去推動事業部進行整體的品牌升級?能否通過設計去構建一個完整的體系,以滿足網易智企未來的發展需要?
因此,在發現這個問題后,我們便馬上開始了品牌設計體系的構建工作。結合之前的品牌經驗,并在查閱大量資料進行研究后,逐步制定了完整的解決方案。之后與市場部同學一起合作,共同推進了品牌體系的構建與落地工作。
在企業的成長過程中,隨著業務的不斷拓展,自然而然地會產生越來越多的子品牌。在這個過程中,許多優秀的企業通過長期的實踐,通過不同的方式,逐步構建了屬于自己的品牌體系。比如聯合利華、大眾企業集團、蘋果、雀巢、谷歌等等。
品牌體系一共有哪些構建方式?他們分別適用于哪種情況?而我們又應該用何種方式去構建品牌體系呢?
帶著這些問題,我開始進行了品牌體系構建的研究。通過大量的案例分析與調研,我總結了以下幾種最常用的品牌體系構建方式:
自由家庭式,顧名思義,一切皆為 Free Style。子品牌與母品牌幾乎無關聯系性,完全自由地進行各自發展,因此品牌在設計上和基本毫無關聯性。
這種品牌模式,通常適用于強子品牌戰略的集團公司。不同的子品牌之間并無依存關系,也不需依靠其他子品牌、母品牌進行背書。而是各自在領域中獨立運營,甚至形成差異化競爭,以擴大在單領域的品牌豐富程度,占據更大的市場份額。
△ Free Standing 自由家庭式
比如聯合利華集團,所有子品牌幾乎均采用自由家庭式,在不同的細分領域擁有多個子品牌。比如個人護理用品領域,主要品牌有旁氏、多芬、Iluminage、卡玫爾、清揚、凌仕、中華、力士、夏士蓮、舒耐、凡士林等。食品系列品牌有家樂、老蔡、立頓、四季寶、凈水寶、可愛多、夢龍、和路雪等品牌。
很多品牌你甚至意想不到這是出自聯合利華之手(或者被收購了),但仔細查看產品介紹,均會發現聯合利華的身影。而在產品廣告的最后 1 秒,也會快速出現聯合利華這個“爸爸”的身影 。
△ 聯合利華集團-品牌體系
再比如 VOLKSWAGEN(大眾汽車集團),所有子品牌也均采用自由家庭式。旗下有奧迪、斯柯達、賓利、西雅特、布加迪、保時捷、蘭博基尼、大眾、斯堪尼亞、杜卡迪等眾多子品牌。通過差異化競爭,在汽車行業的不同領域(家用車、豪華車、摩托車、重型卡車、巴士等)的不同級別中,均占據了不錯的份額。
面對不同的消費群體和階層,品牌需要承載不同的品牌概念,解決不同的問題。因此,只有采用自由式家庭式的品牌家庭,才能在不同的領域中有針對性地進行品牌的建設。
當然,這種方式也具有一定的負面作用。如果當兩個子品牌在同一領域重疊性較大時,容易導致品牌在“內部競爭”中逐漸弱化,比如斯柯達汽車的定位與大眾汽車重疊性過大,定位區分不明顯,而與大眾的三大件又是相同的,因此逐漸在市場中被邊緣化。
△ 大眾汽車集團-品牌體系
我們可以總結一下自由家庭式品牌體系的優劣勢。
優勢:
劣勢:
基因家庭式,即母品牌與子品牌擁有部分相同的元素或風格特征,并通常具有延續性,而這種元素被稱為品牌基因。
基因家庭式是品牌體系中最為常見的表現方式,它通常適用于強母品牌的集團企業。此類公司通常在母品牌發展成熟后,基于母品牌進行其他領域的拓展,逐漸形成不同的子品牌。因此,子品牌需要延續母品牌的基因作為背書,從而提升子品牌的知名度與信譽。
△ Gene Delivery 基因家庭式
而基因家庭式這個大的方向中,按照基因傳遞的方式進行細分,又可以歸納為以下 3 種最典型的形式:
基礎版:將母品牌圖形直接融入到子品牌中
比如雀巢公司的部分重要子品牌中,都將母品牌的品牌文字融入到品牌圖形中,而這也是雀巢母品牌最容易識別的部分。
通過這種方式,子品牌既保持了相當程度的自由度,同時用戶也能直觀地通過品牌基因識別出子品牌與雀巢母品牌的關聯性。
△ 雀巢公司-品牌體系
以及美國聯邦快遞 FedEx,則是以母品牌為基礎,通過改變局部顏色、增加品牌文字等方式來構建其不同的子品牌。保證了一定的差異化的同時,與母品牌形成了強關聯,達到了比較強品牌延續性。
△ 美國聯邦快遞-品牌體系
進階版:提取母品牌關鍵特征,融入子品牌中
比如亞馬遜公司,將其標志性的“箭頭笑臉”提取出來,與各自不同的子品牌字體組成了新的品牌。這種方式相對于基礎版又提高了更高的靈活性,但同時也保持了相當程度的品牌延續性。
△ 亞馬遜-品牌體系
高階版:提取母品牌基因,通過重構形成子品牌
比如 google 公司的新品牌與其各子產品的關系。通過提取統一的顏色以及扁平化的紙片效果,經過重組以后得到不同的圖形,形成自由度極高,但又擁有高度統一性的品牌體系。
△ Google-品牌體系
但是,這種方式在設計上的要求較高。如何在差異化的同時,保持一定的品牌關聯性,需要非常精準的把控。
我們可以總結一下基因家庭式品牌體系的優劣勢。
優勢:
劣勢:
克隆家庭式,即子品牌直接使用母品牌的品牌圖形與品牌字體。子品牌通常與母品牌在品牌上毫無差異,或者保持圖形、顏色、字體等特征的高度統一性,只進行文字內容的更換。
△ 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 年的上半年,已經有多個品牌開始使用這套標準化流程進行品牌升級與規范輸出,比如網易易盾、網易輕舟、網易疾風等。
品牌設計體系更大的價值在于——幫助品牌快速建立秩序,將時間留給創意。而體系本身,也會因為每次的創意,變得更豐富、更完善。通過不斷地正向循環、自我迭代,最終成為一個更大生態。
在無序中尋找秩序,在秩序中尋找創意,讓世界變得更有序、更有趣、更美好。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
選擇器是一個輸入字段, 用戶必須在其中選擇一個(或多個)選項,這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單,復選框,切換按鈕,滑塊等都是不同類型的選擇器,但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量:一個或多個。
單選選擇器按效果又可以分為:點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。
特點:同一時間只能選擇一個選項,當你已經選擇完一項后,準備選取另一項,那么后選的一項會立刻使先選的一項被取消選擇。
點擊選擇器
點擊選擇器可分為兩種狀態,狀態一為立即觸發,當你點擊后會立即跳到下一步操作;狀態二為再次確認觸發,當選中某項時,不會立即觸發操作,而是需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
特點:直接進入,并沒有再次確認的按鈕,可以讓你快速到達想要的目的。
建議:雖然目的能快速達到,不過也很可能會造成誤操作,所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離,同時正因為是直接跳轉,所以應當加入一些操作提示。
舉例:汽車之家在用戶選擇二手車時就會出現此選擇器,當我在汽車之家想要選擇二手車時,它會彈出立即觸發式選擇器控件,我們在控件上可以看到有7個圓形選項,分別為:汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車,當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面,為了讓用戶知道自己選擇后的狀態,在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。
特點:這是最為常見的選擇器類型,當所在選項選上,除了選擇另一個選項之外,便沒法取消選中狀態。(選且只能選擇一個選項)
建議:在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項,甚至是否考慮給出一個重置按鈕。
舉例:我剛注冊小紅書時,在小紅書填寫信息頁面中,它的默認選項是“男”,我點擊“女”,則會自動取消掉“男”,它們兩者并不能同時存在,并且只有我點擊下一步按鈕時才會正式確認我選擇完成。
滑動選擇器
特點:滑動選擇器是將需要選中的內容滑動至中部,然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。
建議:滑動選擇器的展示區域有限,部分選項會被隱藏,最好是當用戶對所有選項都比較熟悉、有預期的時候,才使用它。為了保證手機屏幕觸控精度,以免發生誤觸,滾輪選擇器建議控制在5列以內。
舉例:在小紅書填寫年齡信息時,我們只需用手指在區域內滑動即可選擇想要的選項。
多聯動選擇器
特點:多聯動選擇器是由兩個或兩個以上的中繼器制作而成,第一個中繼器選擇后,一般會對第二個中繼器進行篩選,不過因為顯示的區域有限,所以當你要切換時,還只能挨個切換,效率低下。
建議:可以通過數據以及功能來減少選擇時間,例如在選擇地區時,根據當前GPS定位地理位置,定位相關省級信息及名稱,減少滑動操作。
舉例:如下,當我選擇了內蒙古自治區,那么2級內容就應該篩選掉內蒙古以外的城市,比較適用于省份-城市或者品牌-產品這種類似的選擇,當然下面第一張多聯動選擇器也結合了滑動選擇器。
△ 選擇城市時,我們必須要先選擇省份,再選擇城市,最后才能選擇縣;
多聯動選擇器展示的方式非常多,不僅可以用滑動形式展示,還可以用點擊、平鋪列表等形式展示。
上圖則沒有先后順序,不過當你首先選擇顏色時,如果沒有相同尺碼的衣服,缺貨的尺碼則不會被選中,先選擇尺碼也是相同道理。
切換開關選擇器
特點:切換開關選擇器有且只有兩種選項,用來在開和關兩種狀態之間切換。開關屬于觸發類組件,撥動開關時,它所指揮的某個操作會立即生效,常見的使用就是授權。開關的默認狀態并不都是關閉的,還要從產品本身的設定上來決策。
建議:如果某開關的功能是用戶經常使用的狀態,那么可以在默認狀態下打開開關,不過需要注意的是在某些特殊的開關按鈕需要打開時,必須要提前告知用戶。
舉例:當我打開UC瀏覽器的設置時,它的輔助功能就使用了切換開關選擇器,切換的開關只需要點擊即可。
可搜索選擇器
特點:可搜索選擇器一般用于選擇項較多時,特別是對于電商購物類的APP搜索選擇器是必不可少的,搜索選擇器會根據用戶輸入的內容,對中繼器進行模糊的搜索,讓用戶快速找到并選擇內容。
建議:在搜索區域輸入文字時,可給予用戶更多的文字提示以及以及引導類信息。
舉例:小紅書在搜索時就會出現數字化的信息提示,這樣能夠很好的引導用戶進入到想要的搜索結果:筆記或者商品頁面。
地圖選擇器
特點:作為最特別的選擇器,它的功能是復雜的,它的操作方式也是多樣化的,地圖選擇器的操作可點擊、可拖拽、可放大縮小等等,它多用于生活類APP。
建議:可以在選擇器中加入更多趣味、互動、可感知的設計,如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。
舉例:打車類APP必用的地圖選擇器,滴滴出行的用戶可以實時看到車輛信息,可以采用點擊、拖拽、放大等操作來選取上車地點,選取后還有文字信息提示,讓用戶確認操作是否正確。
貝殼APP則用地圖選擇器來讓用戶選擇二手房,同時也采用了聯動式的效果,第一步是查看區域,可以明確看到區域的售房套數,點擊選擇區域后我們可以看到每個路段的房子套數,點擊路段后就可以看到每個樓盤的套數以及均價,直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況,有更好的對比性與選擇性。
當單選選擇器不能滿足用戶需要時,這時我們就可以采用多選選擇器,一般常用的多選選擇器都是采用點擊的方式,當然也有滑動類型的多選選擇器。
點擊多選選擇器
特點:當用戶想要選擇多個類別的情況下,我們就可以用點擊多選選擇器來展示提供給用戶選擇,通過屏幕點擊選中或取消選中該選項,它不會立即觸發操作,需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
建議:從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量;多選項時觸碰區域不能太小,以免造成誤操作。
舉例:小紅書在選擇感興趣的內容時就采用了點擊多選選擇器,不過在選擇興趣時它就強制用戶至少關注4個興趣,而對于單興趣或者少興趣的用戶來講,這無疑會造成用戶體驗的不佳,被逼再次從中選擇次要的興趣。
滑動多選選擇器
特別注明:從用戶的角度來看,它可以選擇多個區域段的內容,所以我把它分為多選選擇器中。
特點:當系統給出的選項不在自己的選擇區間時,可以很好的自定義選擇區間,把定義權限交在用戶手里。同樣,它需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。
建議:在用戶滑動操作期間要有明確的操作提示,讓用戶時刻感知目前處于的狀態;滑動區域盡量不要超過100刻度,如果刻度距離太小,用戶在滑動時也很難精準的選擇范圍。
舉例:在汽車之家APP中,當我要選擇汽車價格范圍時就會出現此選擇器,我們可以用手指滑動來選取它的價格區間,相對于上半部分的單選價格拓展性更強,用戶可以自行選擇上半部分的單選選擇器,也可以選擇滑動多選選擇器,給予用戶更多的選擇。
標題易懂:
在選擇器中標題一定要簡單明了,很快的讓用戶知道他在為什么做選擇(如:當你關注某烹飪的APP后,它會讓你勾選喜歡的菜譜,你的標題就可以用“選擇菜譜”四個字,簡單明了)
文字標簽易懂:
一般使用短語而不是句子,也并不需要用標點符號來結尾。(如:當選擇想要的菜譜時,菜譜后的文字不需要加入標點符號)
選取狀態易懂:
用戶能夠明確感知什么是選中狀態,什么是未選中狀態,什么是禁用狀態。(如:選中狀態為高亮顯示,未選中為普通顯示,禁用狀態為灰度顯示)
反饋提示易懂:
當你在選擇中遇到選項限制或是否需要確認操作時,反饋提示一定要一目了然。(如:當你選擇某衣服時,S碼不能選擇,則會用灰度顯示的文字代替,甚至可以用中橫線劃過文字,明確告訴用戶不能選擇)
從邏輯順序:
邏輯排序能讓用戶很快很準的找到自己需要的選項,特別是對于選擇地址/時間/個數等常規的選項時,可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時,就是按照A-Z字母排序,這樣可以大大節省用戶選擇的時間。
從產品利益角度排列順序:
當然為了產品自身的利益也可以自己優化排序方式,選項的順序可以說服用戶進行選擇,用戶可能因為第一個選項在列表中的位置而選擇了第一個選項;可以輔助用戶,也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時,產品為了讓用戶選擇更加優質的菜譜,就會把用戶評價高的菜譜放在前列;當然商家也會這么做,例如你要去買某款商品,商家會在選項中把熱門、優質的產品放在最上方,讓你優先選擇。
從用戶體驗排列順序:
從用戶角度來說哪些對用戶體驗好,那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位,而把用戶量最少的輕客放在了最后一位;同樣它在汽車品牌選擇中,單獨列出了熱門品牌把它放在前列,讓用戶進行快速選擇。
視覺布局一致:
每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊,這樣有利于快速讀取選擇內容,可以提高用戶的瀏覽效率并減少錯誤。
圖片/插畫風格統一:
在圖文結合的選擇器中,我們一定要保證圖片(插畫)的優質以及風格的統一。
默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。
默認未選中:
這是最常見的一種狀態,特別是對于選擇年齡、生日這些個人隱私信息,系統也沒有辦法進行默認選擇。
默認選中其中一個選項:
要想默認其中一項,必須考慮兩點因素,因素一:你想要潛意識的像用戶傳達信息,在單選選擇器中默認選擇一項后,就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向,例如此產品的性別9成都是女性,那么建議默認選項為女性。
默認選中全部:
其實默認選中全部在用戶體驗上來講真的不是那么的友好,例如微博這個選擇器界面,剛進這個界面時已經全部勾選中,并且當你沒注意習慣性的點擊下面的按鈕時會生立即生效,沒有返回的余地。(吐槽:有些APP甚至沒有一鍵取消功能,要一個個的點擊取消…)這也是為了產品犧牲掉了部分用戶體驗吧!
單選選擇器的更多選擇:
如果用戶不想做出選擇,那么應該提供一個中立選項,為用戶提供一個明確的方向,中立選項比勉強選擇要好。例如在選擇行業領域時,以上并沒有你所處的領域或你不確定你的領域,你就可以選擇“不限”或“其他”。
多選選擇器的更多選擇:
在多選選擇器中,如果不能把控到用戶的準確選項區間,那么可以考慮滑動多選選擇器,讓用戶有更多的選擇區間,不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。
選擇控件在操作過程中必須更改其狀態/外觀,要明確讓用戶知道是否能選中,是否被選中。控件狀態一般分為三種:未選中、選中、禁用。
未選中
選擇器的開始狀態,向用戶表明,可對該選擇控件進行操作。
選中
用戶操作選取狀態,選擇控件處于被選中的狀態。
禁用
一般情況會為灰色顯示,用戶將無法與選項進行交互。
指的是用戶在操作中讓用戶得到相應的反饋,用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中,操作提示一般用輔助文案提示及非模態彈窗提示。
輔助文案提示(選擇前與選擇中):
輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明,例如下面是地區選擇,我在選擇不同層級的區域時,它的上方會出現輔助提示文案,讓你明確的知道你上一層級選擇的是什么。
同樣,當我在選擇價格區間時,滑動選擇器的左上方一樣有文字類的提示:
非模態彈窗提示(選擇后):
非模態彈窗一般出現在用戶操作完的跳轉頁面中,為了讓用戶感知所選的選項在頁面的狀態,如下,非模態彈窗告知用戶一共有7輛車符合標準。
當然除了非模態彈窗外,還有模態彈窗,但是用戶體驗極差,目前很少使用,所以就不列出來了。
擴大點擊區域:
在選取按鈕類的操作時,容易出現點擊不到或誤操作的現象,我們可以通過擴大點擊區的交互區域來提高易用性,例如下圖,雖然按鈕在左邊,但是可以把橫向區域都列為可點擊區域。
當然我們也可以從設計的角度來擴大視覺范圍,從而也提高了點擊范圍,這樣的處理不僅提升了視覺層面,還提升了交互體驗。(圖文結合方式)
注意交互間距:
在元素與元素之間一定要有合理的交互間距,不然很容易出現誤選的情況。
合理利用有效區域:
在選項較多的選擇器中,我們可以利用好選擇主體控件之外的區域,例如在選擇城市/品牌時,我們可以做A-Z index式字母交互區,幫助用戶快速找到想要的選項。
讓用戶選擇本來就是一件枯燥乏味的事情,如果讓這件事變得有趣那么會極大的提升用戶體驗。
從文本層面:
例如當用戶填寫性別信息時,你給予用戶的文字信息并不是“男”/“女”,而是“帥氣的boy”與“酷酷的girl”,這樣會讓用戶覺得這是一件比較有趣的事情,而不是被動選擇。(注:這樣的取名一定要符合產品的特性)
從視覺層面:
加入可玩兒性的選項,例如汽車之家的頭像切換,可以選擇自己喜歡的頭像。(頭像并不是強制選擇的,如果不進行操作則是默認選項)
從交互層面:
讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒,在未選擇狀態他的人物會360度圍繞著轉動,當然你也可以快速拖拽,或者放大縮小,可玩兒性十足,并且在內部設定了最匹配/新人的高亮顯示,協助用戶去選擇。
不同的產品在使用選擇器時都各有不同,因為每個選擇器都有它的利弊,而真正要怎么去選擇還要根據產品本身來定。
那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊:
多聯動選擇器(平鋪式)
貨車幫采用的是多聯動平鋪式選擇器,它最大的特點就是能夠一眼就看清楚所有地址,不過地址多時需要花時間去找,只是當你經常使用此功能時便會形成記憶,再此搜索的時候就能形成記憶點擊,效率很高,并且在操作外還有路徑提示,不僅可以幫助你記住層級選項,還可以實時返回路徑進行重新選擇。
手勢操作:點-點-點
多聯動選擇器(列表跳轉式)
閑魚采用的是多聯動列表跳轉式選擇器,這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容,那么就又要切換到上一級,閑魚采用它的原因是因為它只有二級聯動,不存在遺忘現象,不過這樣列表式的選擇效率并沒有平鋪的效率高,人眼習慣掃視橫向內容,所以橫向的內容獲取往往要比縱向的多,在地址選擇器上我個人是不太建議采用多聯動列表跳轉式,因為并不也不直觀。
手勢操作:滑-點-點
多聯動選擇器(列表式)
轉轉采用的是多聯動列表式選擇器,它的優點是可以根據右側字母來找城市,數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤,同樣就要切換到上一級,并且在操作中沒有輔助信息提示。
手勢操作:滑/點-滑/點
多聯動選擇器(下滑式)
安居客采用的是多聯動下滑式選擇器,這種形式的選擇器不會遮擋后面的主要內容信息,在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址,并且層級分明,擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。
手勢操作:點-滑/點-點
地圖選擇器
美團外賣采用的是地圖選擇器,這個選擇器一般用在需要精準定位的生活類APP中,它的優點就是能夠快速精準定位,并且自動錄取定位信息,它的缺點也顯而易見,不能含帶層級并且對范圍也有約束。
文章來源:優設 作者:黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在BAT、TMDJ等一線互聯網企業,決策平臺又稱決策支持平臺、管理會計平臺。但實質都是實現業財一體化后,提取業務、財務數據,自動生成各種管理報表、財務報表,智能預警風險、預報業務前景,通過Dashboard或駕駛艙的形式展現給管理層、決策層,本文作者暫以管理會計平臺展開討論。
管理會計,從定義來看有狹義與廣義之分。狹義的“管理會計”通常是指財務會計概念,包含“成本管理”和“管理控制系統”兩部分。
而廣義的“管理會計”則是指運用一系列的分析手段,通過挖掘財務數據、業務報告等中潛在信息,對企業財務狀況、經營成果、現金流量和產品競爭力進行分析,輔助經營者進行決策,指出業務、財務風險隱患,預測未來趨勢,賦能業務,以數據驅動企業發展。本次討論的后者,即廣義的管理會計。
管理會計目標的實現,不是簡單的某一個系統或產品能承載的,需要設計一系列的產品矩陣,包括基礎的核算系統如ERP、成本結算系統、預算系統、報表系統,這個矩陣就是管理會計平臺(以下簡稱管會平臺)。
管會平臺的主體或用戶的不同使得所產出的管理報表(以下簡稱管報)指標也有所不同。用戶一般分為外部和內部2個大維度。
1)外部用戶
投資人偏向于分析企業的盈利能力和資本保值增值能力,如凈利潤率、資本保值增值率等指標;債權人則側重分析資產負債水平和償債能力,如資產負債率、利息保障倍數、權益乘數等指標。
2)內部用戶
應收會計崗則側重應收賬款的質量、收入的趨勢,如應收賬款周轉率、收入環比或同比、速動比率等指標;資產會計崗偏向于分析資產的利用率、所帶來的價值,如資產周轉率等指標;而企業管理層或決策層會關注企業經營活動和財務活動的一切方面。
管會平臺在設計時應考慮滿足這些不同用戶的需求,并通過權限、角色實現千人千面的效果,不同用戶展示不同指標集和報表。
管理會計不僅屬財務一個分支,更是財務在企業管理中應用的升華,財務的4個功能層次形象筑起管理會計的堅實基礎:
做好管理會計,核算是基礎,分析是關鍵,管控是抓手,賦能是核心。
分析不僅僅是傳統的報表分析,而是基于大數據、機器學習、AI等高科技手段,自動化、準確、智能的實現風險預警、趨勢預測,引領、驅動企業發展。
舉個栗子:每月關賬后財務都要做財務分析,收集各種業務、財務數據,結合相關指標,以發現業務中的問題。如做杜邦分析法,分析凈資產收益率。
繼而計算總資產凈利率,權益乘數,銷售凈利率、總資產周轉率……通過實際與預測的橫向對比、基期與歷史的縱向對比,找出各種指標異動原因,實質是分析企業的贏利能力、營運能力、償債能力。
但這些通用的指標需結合企業實際情況、歷史數據,并體系化形成產品,才能分析出癥結點所在,這也是管理會計平臺建設的意義與努力的方向。
如何搭建管理會計平臺(以下簡稱管會平臺)呢?互聯網管理會計平臺,其實并不是一個單一的平臺,而是由眾多關聯子系統構成,通過多個子系統間協同合作完成管理會計目標的系統集。
從前端用戶的視角來看,獲取管理報表是一個很簡單的動作:查詢相關主體公司管理報表或分析結果即可,但從系統角度來說,管理會計的建設過程實際涉及了眾多財務子系統的協同、及復雜的系統邏輯。
一個典型的財務產品架構如下圖,涉及多個子系統。典型管理會計產品分為生產端與消費端,架構圖如下:
在簡要介紹各子系統功能前,可以先看以下簡化版的管會平臺產品架構圖,典型的管會平臺產品架構可以劃分為四層結構:支撐層、數據層、核心層、應用層:
用來支持管會平臺的基礎服務和基礎設施,包括容器云、安全服務、存儲服務、消息引擎、任務高度、短信服務、證書服務等。
匯集業務、財務數據,以大數據或數據湖的形式承載基礎數據,包括ETL、BI、大數據等。
管會平臺的核心模塊,分為清結算、財務中臺、ERP、預算、管報中心五大塊;
1)清結算
主要由計價、清分、結算、對賬組成,是業務活動在財務的2個反映之一,解決互聯網業態中的成本費用結算,與傳統企業的成本計量方法不同的是,一般是按個別計價法對不同時間段可以階段性、階梯性等復雜業態成本計量。
2)財務中臺
主要針對業務中非審批類的收入、資產折舊、攤銷,自動對賬、生成分錄,并傳遞至ERP,主要包括:入賬規則、數據校驗、分錄生成、主數據等。
3)預算模塊
預算功能,包含預算編制、執行等,結合BPM審批流,實現費用控制。
4)ERP
財務核心入賬平臺,包括總賬、應收、應付、資產、財報等。
5)管報中心
管會平臺核心輸出層,包括生產端和消費端2部分,生產端分為指標集、規則引擎、模板、預處理、智能診斷等模塊。消費端主要是管報產出結果的展示即駕駛艙、手工確認或修正。
管報中心是核心中的核心,后面第三章會詳細展開。
通過支撐層、數據層、核心層提供的服務組合起來,對最終用戶、運營管理人員提供的系統。在產品架構層面體現為前端展示層、業務域和過程域。前端展示層主要是結果展示的形式,如PC端的web頁面、移動端的APP或H5、小程序等。
業務域是上游的各業務系統,而過程域是管會平臺所依賴的流程工具、特征數據,如供應商、ORG、BPM等。
管報中心由生產端和消費端組成:
生產端流程圖如下:
【指標集】:配置各種指標,如“速動比率”、“產品成本費用率”等。一旦配置不得刪除,只可修改或禁用。上游是科目與計算規則,但校驗關系不在此模塊。
【模板】:指標、預警或診斷信息的集合,可導入或手工增加。在預處理和結果展示時,將會調用此模板。
【規則引擎】:由“科目規則”、“計算規則”、“指標規則”、“預警規則”四部分組成。
在每一層指標中,有實際值、預測值,二者之間的偏離度,就是預警條件;“好”、“差”就是簡單的信息模板,可把具體原因也納入進來。
主因判定實質是一個由上到下的遞歸過程,如此例中,A公司獲利能力(即資本報酬率)相對較差(3.08%<7.41%),這是第1層判斷。
再往第2層,經過分析可知這不是因為總資產凈利潤差(2.55%>2.37%),而是財務融資能力差(1.21<3.21)。如此類推,直至分析至底層科目級指標。
【預處理】分為“重分類”、“平衡試算”、“定時任務”、“結果存儲”四部分,是報表產出的運算過程。其中“平衡試算”屬前置數據校驗,檢查數據是否達到報表可用程度。“定時任務”與“結果存儲”屬技術性過程,“重分類”根據會計要求設置,具體由財務確定。
【智能診斷】是對具體的報表進行分析,由“診斷開始(數據準備)”、“規則判斷”、“預警判斷”、“結果確認”四部分。其中結果確認包含結果展示、消息分發、手工修正等?!耙巹t判斷”與“預警判斷”是對【規則引擎】中的“指標規則”、“預警規則”的具象應用,實際應用中可引入AI、TensorFlow(機器學習)等技術手段提升診斷的準確度。
在生產端準確、及時生產出數據后,消費端就不愁無米下鍋了。一般通過Dashboard或駕駛艙展示,這一塊通常需要BI或數倉部門的協助,效果圖如下:
綜合以上,管會平臺的每個子系統并非孤立的,通過產品架構相互關聯。產品架構與技術架構相輔相成,產品架構決定需求和設計,技術架構決定技術框架和性能。包括AI在智能診斷上的應用、數據域的實現等。
好的產品架構將這些不同用途的功能進行聚類整合,因此,【才聽途說】建議將管會平臺拆分成多個子系統,明確業務邊界,減少系統間的耦合,提供優質、的管理決策支持服務。
并根據前端業務場景的需求隨時進行調整變化以適應業務的發展,如規則引擎部分基本可由前端配置即可,減少后端開發與產品上線時間。
不同互聯網公司,業務體量甚至有成千上萬倍的差距,如京東集團內不同BU的體量及發展速度造就其系統復雜度也差異巨大,高度復雜的管會平臺甚至需要數百人的技術團隊來設計、開發、維護。
不過,對于體量較小的互聯網公司來說,幾人的團隊即可搭建一套系統并維護日常運營。
互聯網企業作為金融科技業界引領者,建議在系統開發前期(從0到1),以MVP形式,小步快跑,快速迭代,盡快上線、降低開發成本,優先開發主要需求、及較重要的子系統,或并行實施幾個子系統,如ERP的實施、清結算的開發、管報中心的開發可以并行。再做次優級子系統,逐步迭代。
隨著訂單量的提升及業務復雜度的增加,不同BU甚至不同BGBU的接入,管會平臺復雜度將指數及上升,系統處理起來會越來越吃力,若無良好的規劃,各子系統耦合度越來越高,雜糅在一起,系統靈活性越來越差,無法跟上業務的發展。
因此,管會平臺的中長期發展(從1到100、到∞),極其考驗我們的業務梳理能力,及對業務進行拆分、產品架構的能力。
特別是目前行業內還沒有體系化的管會平臺建設經驗可參考時,更考驗我們的綜合能力,包括財務專業知識、業務理解力、產品規劃能力。
但萬事不要怕,只要抓住產品設計精髓,即設計的產品應滿足邏輯完整、業務功能明確、可擴展(發展方向明確但業務邊界清晰)、靈活(非耦合)等特點,一切將會迎刃而解。
藍藍設計的小編 http://www.syprn.cn