首度揭秘滴滴地圖標(biāo)注的換裝設(shè)計(jì)過(guò)程

滴滴出行 App 中除了慣例滴滴地圖標(biāo)注小車，類似新年舞獅的 icon 換裝規(guī)劃現(xiàn)已做過(guò)很屢次了。在嚴(yán)重節(jié)日或發(fā)作熱門新聞時(shí)，經(jīng)過(guò)icon 換裝的辦法來(lái)協(xié)作運(yùn)營(yíng)活動(dòng)烘托活動(dòng)氣氛。
圣誕節(jié)的時(shí)分，小車變成了圣誕老人，駕著馴鹿雪橇帶著滿滿的禮物飛奔在地圖上;奧運(yùn)會(huì)火炬?zhèn)鬟f的時(shí)分，小車成了高舉火炬奔馳的火炬手，傳遞著奧運(yùn)精力;北京市7月暴雨的那天，小車成了一艘艘小舟，協(xié)助需求出行的人們航行在城市道路上…… 本年的新年 icon 規(guī)劃就是文章最初看到的舞獅了。做了屢次的換裝規(guī)劃后積累了一些辦法和經(jīng)歷，現(xiàn)在借新年伊始大吉大利的機(jī)會(huì)，以本次新年舞獅規(guī)劃為例，和咱們一同聊聊一個(gè)換裝 icon 規(guī)劃是怎樣一步步煉成的。
地圖小車換裝規(guī)劃全流程
換裝 icon 的規(guī)劃進(jìn)程分為7個(gè)階段，是不斷地發(fā)散、聚合、再發(fā)散的進(jìn)程。
首要從活動(dòng)運(yùn)營(yíng)方接到需求，剖析審閱需求是否存在不合理或難以產(chǎn)出規(guī)劃的部分。經(jīng)過(guò)這一步，為后續(xù)規(guī)劃的順暢履行奠定根底，前期的需求剖析交流也能讓項(xiàng)意圖上下游快速到達(dá)共同，防止后續(xù)發(fā)作疑問(wèn)導(dǎo)致規(guī)劃的重復(fù)影響進(jìn)展。
需求斷定后，依據(jù)活動(dòng)主題發(fā)散相關(guān)元素，進(jìn)行腦筋風(fēng)暴尋覓構(gòu)思點(diǎn)，這也是整個(gè)階段里最張狂的部分。發(fā)散的意圖是增大構(gòu)思的可能性，正如萊納斯·鮑林所說(shuō)，「為了有個(gè)好主意，必須要先有許多主意?！?br /> 然后結(jié)合規(guī)劃的終究輸出環(huán)境，明晰履行應(yīng)戰(zhàn)有哪些，將發(fā)散的構(gòu)思點(diǎn)逐個(gè)經(jīng)過(guò)這些應(yīng)戰(zhàn)進(jìn)行挑選，決議計(jì)劃規(guī)劃計(jì)劃方向。隨后就是細(xì)化計(jì)劃重復(fù)推敲，到達(dá)高質(zhì)量的輸出規(guī)范。
由于滴滴出行多事務(wù)形狀的形式，規(guī)劃計(jì)劃需從一個(gè)計(jì)劃延展至多條事務(wù)線，并確保一切事務(wù)線計(jì)劃既全體一致又契合事務(wù)特性。計(jì)劃斷定后輸出切圖元素，推進(jìn)落地發(fā)布上線，并進(jìn)行盯梢反應(yīng)。
整個(gè)規(guī)劃的進(jìn)程就是發(fā)散和聚合的規(guī)則替換，每個(gè)重復(fù)的進(jìn)程與前一次比較都會(huì)更聚集，也更重視細(xì)節(jié)。在發(fā)散階段，新挑選會(huì)呈現(xiàn)，在聚合階段則恰恰相反，要淘汰選項(xiàng)保留最合適的挑選。這種規(guī)劃流程可遍及適用于構(gòu)思類的規(guī)劃需求。
接下來(lái)就對(duì)7個(gè)階段逐個(gè)詳細(xì)介紹。
1. 剖析活動(dòng)需求
換裝規(guī)劃需求一般是由商場(chǎng)運(yùn)營(yíng)活動(dòng)或?qū)嵤聼衢T活動(dòng)建議，期望經(jīng)過(guò) icon 烘托活動(dòng)氣氛，招引用戶重視。從前也由規(guī)劃師建議過(guò)換裝需求，意圖是經(jīng)過(guò) icon 的視覺改變營(yíng)建節(jié)日氣氛，添加產(chǎn)品的情感染表達(dá)拉近與用戶的距離。
但很快咱們發(fā)現(xiàn)，純視覺的 icon 改變?cè)诋a(chǎn)品運(yùn)用中是斷層的，激烈招引了用戶留意，沒(méi)有活動(dòng)解說(shuō)，沒(méi)有后續(xù)操作，且不能為用戶帶來(lái)實(shí)踐收益，這反而引發(fā)一些用戶的疑問(wèn)，也讓咱們考慮怎么體現(xiàn)換裝規(guī)劃的價(jià)值，所以擬定了需求審閱規(guī)范。
首要，需求要有多維度的運(yùn)營(yíng)活動(dòng)布景，icon 換裝作為線上展示的活動(dòng)部分，一般還會(huì)有運(yùn)營(yíng)對(duì)話框，運(yùn)營(yíng)卡片等對(duì)活動(dòng)進(jìn)行解說(shuō)，引導(dǎo)用戶操作。其次，規(guī)劃需求的履行性強(qiáng)，不損壞地圖小車自身的功用屬性。第三，活動(dòng)均為正向心情的表達(dá)，并為用戶遍及認(rèn)知事件。只要需求滿意了這三點(diǎn)才可進(jìn)行下一步。
換裝需求分為4類，熱門類、氣候類、節(jié)日類、商業(yè)類。每一類對(duì)規(guī)劃的要求也不太相同。
時(shí)勢(shì)熱門類，要求規(guī)劃師能夠快速產(chǎn)出規(guī)劃計(jì)劃，精準(zhǔn)匹配新聞發(fā)作的時(shí)刻段。
氣候類需求在時(shí)刻上具有不斷定性，比方不斷定本年的初雪是哪一天，要結(jié)合運(yùn)營(yíng)戰(zhàn)略提前準(zhǔn)備預(yù)案，防止臨時(shí)規(guī)劃時(shí)刻不足。
節(jié)日類需求時(shí)刻固定，且較慣例，可依據(jù)運(yùn)營(yíng)活動(dòng)排期提前2-3周準(zhǔn)備。本次新年舞獅 icon 規(guī)劃，就歸于節(jié)日類換裝規(guī)劃。
商業(yè)類是商業(yè)協(xié)作來(lái)往，具有直接的商業(yè)收益，但商業(yè)需求要和滴滴的品牌氣質(zhì)高度契合才可。
2. 尋覓最佳構(gòu)思
這一步是整個(gè)規(guī)劃流程最要害的步驟，咱們期望用戶看到換裝 icon 時(shí)能夠快速感知其代表的活動(dòng)寓意。
從活動(dòng)主題出發(fā)，不斷在網(wǎng)絡(luò)上和腦海中收集提煉新年相關(guān)的要害元素，發(fā)散收集需求多重復(fù)幾回，查找材料并和身邊的朋友交流交流，盡可能全面多視點(diǎn)的進(jìn)行羅列，然后對(duì)其分類整理。此次咱們收集與整理了這些要害元素：
立體物體：燈籠、壽桃、元寶、祥云、葫蘆、布老虎、財(cái)神、門神、龍、鳳凰、生肖、年獸、舞獅、壽星、魚。
平面物體：對(duì)聯(lián)、福字、年畫、賀卡、窗花、臉譜。
代表色彩：赤色、金色。
裝修紋樣：傳統(tǒng)斑紋、標(biāo)志符號(hào)、祥云。
不同類別的要害元素之間還能夠進(jìn)行相關(guān)組合，比方金色帶傳統(tǒng)斑紋的元寶。
3. 明晰履行應(yīng)戰(zhàn)
進(jìn)行了需求剖析，和廣泛的構(gòu)思發(fā)散后，接下來(lái)就是要整理規(guī)劃的約束與應(yīng)戰(zhàn)，從而對(duì)發(fā)散的構(gòu)思元素進(jìn)行聚合收斂。經(jīng)過(guò)了屢次地圖小車的換裝規(guī)劃，規(guī)劃團(tuán)隊(duì)總結(jié)出了以下幾點(diǎn)規(guī)劃應(yīng)戰(zhàn)：尺度約束、視角約束、要求認(rèn)知的普適性、要求可擴(kuò)展性。
體現(xiàn)面積小，小車圖標(biāo)尺度大約只要88*48 px
小車圖標(biāo)規(guī)劃最大的難點(diǎn)就是尺度過(guò)小，一般慣例功用性圖標(biāo)的巨細(xì)約為40*40 px，而滴滴小車則是要在大約兩個(gè)功用性圖標(biāo)巨細(xì)的面積里，畫出一個(gè)充溢細(xì)節(jié)的寫實(shí) icon，要確保明晰地表達(dá)出小車的形象、光影以及配飾細(xì)節(jié)等內(nèi)容。
例如制作代駕 icon 中具有體積光感的眼睛細(xì)節(jié)，就要求僅運(yùn)用4個(gè)像素表達(dá)出來(lái)，許多優(yōu)異的構(gòu)思構(gòu)思，可能都會(huì)由于面積過(guò)小的原因而被拋棄。
小車圖標(biāo)需求仰望展示，并標(biāo)明方向
因地圖為仰望視角，地圖上的小車也需求仰望展示。一起地圖上的小車要求確保用戶辨認(rèn)實(shí)在車輛的行進(jìn)方向和實(shí)時(shí)狀況，所以圖標(biāo)規(guī)劃要能夠辨明頭尾，以指明前進(jìn)方向。
有時(shí)分 icon 仰望視點(diǎn)太難以體現(xiàn)其內(nèi)容，咱們也會(huì)測(cè)驗(yàn)做成正面平視視點(diǎn)，并將360度旋轉(zhuǎn)方向去掉，改為地圖上平移前進(jìn)，但這樣對(duì)用戶的習(xí)慣認(rèn)知有所影響，所以不到非必要條件不會(huì)采納這種辦法。
圖標(biāo)的意象要契合認(rèn)知
以此次新年小車變裝為例，小車形象要凸顯新年氣味，并表達(dá)準(zhǔn)確、契合群眾認(rèn)知，不會(huì)發(fā)作錯(cuò)誤聯(lián)想或地區(qū)差異化對(duì)立。此外假如 icon 的意象自身和交通工具有所結(jié)合就更好了。
能夠支撐六個(gè)事務(wù)線的差異化規(guī)劃
滴滴出行是一個(gè)調(diào)集多事務(wù)形狀的產(chǎn)品，比方重視功率的快車、出租車、小巴，重視效勞和質(zhì)量的專車、豪華車等。這些事務(wù)線的小車圖標(biāo)在體現(xiàn)辦法上是附近的，但傳達(dá)特性上又要傳達(dá)差異性。在做圖標(biāo)換裝規(guī)劃時(shí)，會(huì)先挑選一個(gè)事務(wù)線快車為基準(zhǔn)，做出通用計(jì)劃后再延展至一切事務(wù)線上，因而計(jì)劃的可擴(kuò)展性就成了應(yīng)戰(zhàn)之一。
明晰了規(guī)劃應(yīng)戰(zhàn)后，結(jié)合以上約束與應(yīng)戰(zhàn)，對(duì)上一步的廣泛構(gòu)思方向進(jìn)行挑選。此次新年小車的規(guī)劃要群眾認(rèn)同、直白明晰清楚明了、可履行可體現(xiàn)，終究挑選了傳統(tǒng)斑紋噴漆、車頂張貼福字、新年舞獅舞龍這幾種開始構(gòu)思方向。
4. 決議計(jì)劃規(guī)劃方向
明晰了履行條件，有了開始的構(gòu)思，接下來(lái)就要快速出草圖、出計(jì)劃，樹立點(diǎn)評(píng)規(guī)范決議計(jì)劃構(gòu)思的可行性，挑選出終究的規(guī)劃方向。
畫草圖的進(jìn)程就是將信息化的構(gòu)思轉(zhuǎn)化為圖示的視覺規(guī)劃的進(jìn)程，而草圖的潛力在于從紙面經(jīng)過(guò)眼睛到大腦，然后返回紙面的信息循環(huán)之中。理論上信息經(jīng)過(guò)循環(huán)的次數(shù)越多，改變的機(jī)會(huì)也越多，隨機(jī)記錄、表達(dá)、評(píng)論規(guī)劃構(gòu)思意向的草圖，能夠最大極限地解除計(jì)劃構(gòu)思思維的表達(dá)捆綁。經(jīng)過(guò)草圖的測(cè)驗(yàn)后，進(jìn)一步產(chǎn)出計(jì)劃進(jìn)行點(diǎn)評(píng)與快速測(cè)驗(yàn)。
對(duì)計(jì)劃的點(diǎn)評(píng)主要有3個(gè)維度：圖像明晰、表意直觀、空氣營(yíng)建。在團(tuán)隊(duì)內(nèi)部對(duì)待選計(jì)劃從以上維度進(jìn)行打分點(diǎn)評(píng)。其間斑紋計(jì)劃在尺度中無(wú)法清楚看到車身上的細(xì)節(jié);福字計(jì)劃在空氣營(yíng)建上比較保存;舞龍計(jì)劃由于和端午節(jié)龍舟感覺類似，不能明晰節(jié)日空氣;舞獅計(jì)劃總體上更契合規(guī)范，且更具空氣感與情感染。
除了以上幾個(gè)維度的點(diǎn)評(píng)，針對(duì)幾個(gè)計(jì)劃，還在公司打開小范圍查詢，舞獅也是更多非規(guī)劃搭檔更喜愛的一個(gè)計(jì)劃。歸納專業(yè)性的點(diǎn)評(píng)和快速的用戶測(cè)驗(yàn)，終究新年小車的規(guī)劃方向?yàn)槲瑾{主題。
5. 深化規(guī)劃細(xì)節(jié)
經(jīng)過(guò)上面幾步現(xiàn)已能夠得到一個(gè)牢靠的開始規(guī)劃計(jì)劃，現(xiàn)在就要從形狀、光影、原料、色彩四個(gè)方向進(jìn)行細(xì)化，完善其視覺表達(dá)。
形狀
icon 形狀上選用提取與重構(gòu)的規(guī)劃辦法，提取具有代表性的物體特征，轉(zhuǎn)化為視覺元素，將其不斷組合改進(jìn)，從頭刻畫為新的規(guī)劃。
此次視覺化的進(jìn)程中，提取了舞獅頭部、舞獅腳步、面部表情、新年元素等，將元素不斷交融調(diào)整，要做到形狀即全體調(diào)和又豐厚生動(dòng)。舞獅的腳盡管小到看不清，但仔細(xì)看仍是有著功夫步在里面的。別的舞獅的背上添加了新年祝愿文字，使 icon 更具趣味性，并且不管舞獅以正反方向前進(jìn)的時(shí)分 icon 中都有了能夠閱覽的視覺內(nèi)容，這也是此次計(jì)劃的一個(gè)亮點(diǎn)了。
因地圖上常會(huì)呈現(xiàn)多輛小車相互疊壓的狀況，需求 icon 形狀仍是堅(jiān)持在一個(gè)塊狀的幾個(gè)形體中，即堅(jiān)持 icon 自身的全體性，也便利車輛之間進(jìn)行區(qū)別，確保界面的舒適性。
地圖 icon 選用仰望視點(diǎn)最合理，但仰望視角下許多事物辨認(rèn)難度加大，所以此次舞獅 icon 將正視的獅頭與仰望的身體結(jié)合，既確保了認(rèn)知度，還堅(jiān)持了仰望視點(diǎn)的功用性。這樣不同視點(diǎn)的形狀組合，對(duì)不適合純仰望的元素十分適用。
光影
因 icon 是頂視圖且會(huì)360旋轉(zhuǎn)，所以光影體現(xiàn)以頂視光為主，這樣多輛車不同視點(diǎn)的呈現(xiàn)在界面中時(shí)，光源仍是一致的。別的 icon 和地圖之間會(huì)有淡淡的一圈暗影，讓 icon 和地圖有所區(qū)別，但又調(diào)和的停留在地圖上，這些暗影的深淺巨細(xì)只能靠一遍遍測(cè)驗(yàn)才干找到最佳程度。
色彩
icon 自身尺度較小，又有多個(gè) icon 疊壓的狀況，所以需盡量確保 icon 在一個(gè)色彩系統(tǒng)內(nèi)，色彩一致能夠直觀的確保 icon 的全體感。一個(gè)主色彩配輔佐色體現(xiàn)活動(dòng)氣氛，拿捏好色彩份額，做到全體不花哨即可。
原料
地圖小車一直選用立體寫實(shí)的辦法來(lái)體現(xiàn)，經(jīng)過(guò)玻璃反光，車頂高光，突變肌理等帶給用戶實(shí)在感，從而對(duì)界面中的車輛信息感受到實(shí)在可信賴。頂視光源下要體現(xiàn)icon的立體感和原料感是檢測(cè)技法的，需求詳盡調(diào)查和耐心打磨。
完結(jié)這一步后，就得到了一個(gè)以快車為根底的通用計(jì)劃，其它事務(wù)線的計(jì)劃基調(diào)也就奠定了。
6. 延展規(guī)劃計(jì)劃
經(jīng)過(guò)與各事務(wù)線的洽談交流，此次斷定六個(gè)事務(wù)線推出新年換裝規(guī)劃，因事務(wù)線都集中于一個(gè)使用中，就要求地圖換裝 icon 既能夠堅(jiān)持全體風(fēng)格一致，還能表達(dá)事務(wù)特性。
咱們聯(lián)想到了08年奧運(yùn)福娃的規(guī)劃，兩者都是多個(gè)一致又獨(dú)立的形象延展，其主要是經(jīng)過(guò)色彩來(lái)進(jìn)行區(qū)別，輔佐部分做差異化調(diào)整。
依據(jù)這樣的思路，快車是滴滴用戶量最大的事務(wù)，運(yùn)用了最具新年氣味的赤色，出租車連續(xù)運(yùn)用了金黃色彩，專車與豪華車重視搭車質(zhì)量與效勞，別離運(yùn)用了藏青色以及黑色，凸顯其高端顯貴的氣質(zhì)且堅(jiān)持與事務(wù)線品牌色系共同，一起將豪華車 icon 的眉毛進(jìn)行夸張化，更杰出其豪華顯貴的形象，小巴重視價(jià)格實(shí)惠連續(xù)了原有 icon 的色彩，用高檔灰作為其主色彩，而代駕也不能短少新年的氣味，代駕師傅們就換上了赤色的新年唐裝。
別的每個(gè)舞獅的背上都添加了新年祝愿文字，不同的文字既能夠讓舞獅代表不同的新年祝愿，也代表了不同的事務(wù)線的氣質(zhì)差異，使形象更具趣味性。
7. 推進(jìn)計(jì)劃落地
規(guī)劃到了這個(gè)階段，就算是進(jìn)入收尾環(huán)節(jié)了。接著將計(jì)劃切圖輸出，并確保和已有的方向、尺度共同，便利替換。設(shè)定好上線時(shí)刻與上線城市，后臺(tái)配置完結(jié)后，新年的舞獅就準(zhǔn)時(shí)活潑在每個(gè)滴滴出行用戶的界面里了。
上線后還要對(duì)計(jì)劃進(jìn)行盯梢反應(yīng)，一般會(huì)從微博、脈脈等平臺(tái)中重視用戶輿情，把用戶點(diǎn)評(píng)按「欠好，影響打車」、「一般，沒(méi)感覺」、「不錯(cuò)，有意思」分類整理，由此評(píng)判此次計(jì)劃是否展示了其價(jià)值。
小結(jié)
回憶整個(gè)規(guī)劃旅程，規(guī)劃師經(jīng)過(guò)發(fā)散—聚合—再發(fā)散的辦法，快速了解需求找到爆發(fā)點(diǎn)，鋪開思路探究構(gòu)思的可行性;接著提煉規(guī)劃的應(yīng)戰(zhàn)與約束，并反向使用約束條件來(lái)推進(jìn)考慮，得到開始構(gòu)思;再經(jīng)過(guò)規(guī)劃的快速測(cè)驗(yàn)與不斷試錯(cuò)，完結(jié)方向的決議計(jì)劃;細(xì)化打磨計(jì)劃并發(fā)掘計(jì)劃的延展性;在終究規(guī)劃落地發(fā)布后，堅(jiān)持繼續(xù)的盯梢與反應(yīng)。
從中咱們所收成的，不僅是完結(jié)一次次小車換裝規(guī)劃使命，還為往后的構(gòu)思類規(guī)劃需求提煉了規(guī)范化的流程與辦法，更好的確保規(guī)劃功率與質(zhì)量。