2016-12-15 ui設(shè)計分享達(dá)人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，?請點(diǎn)這里
一、背景介紹 2015年的時候，我們對阿里BBC線的吉祥物阿牛進(jìn)行了形象升級，第一屆阿牛好代顏吸引大家參與到阿牛設(shè)計的共建中，比賽的優(yōu)秀作品被做成了園區(qū)的實(shí)體吉祥物～
2016年9月，第二季阿牛好代顏——表情設(shè)計大賽開啟，這又一次吸引BBC線同學(xué)來開發(fā)阿牛的新姿勢，活動征集到19套阿牛表情。阿牛的各種新表情興奮地想露露臉，它也希望BBC同學(xué)幫它選出最討喜最可愛的表情。
二、主題創(chuàng)意 那么問題來了——如何讓參賽的阿牛表情包“可見度”更廣？如何讓大家樂于來投選呢？ 我們可以線上發(fā)布讓同學(xué)看完投其所愛，也可以評委評選后將結(jié)果發(fā)郵件To avbody…… But！！ 阿牛表示，它19般花樣被關(guān)注得很不夠??！給人印象也不夠深刻…… 嗯，要有關(guān)注度，要吸引人…… 這么整！把表情包們做成展覽！ 展覽地點(diǎn)和主題呢？ 表情包表情包，剛出爐的表情包……熱騰出爐表情包和食堂場景很貼合?。≌褂[地點(diǎn)放在食堂門口吧！食堂人流量特別大！主題就叫“來一籠表情包”！
三、創(chuàng)意落實(shí) 確定“來一籠表情包”的主題后，為了讓大家和作品更多互動，我們用仿真的模型包子來作為 “選票”，讓觀展的同學(xué)給表情設(shè)計者“投喂”包子來表達(dá)喜歡。 我們還根據(jù)不同評委的特點(diǎn)，精心準(zhǔn)備了多種“口味”的仿真模型小籠包作為評委選票，比如為評委敏芝準(zhǔn)備了“芝麻包”、為內(nèi)心仁厚而豐富的評委準(zhǔn)備了“五仁包”、為評委高峰（江湖人稱之為“峰fengxiong”）準(zhǔn)備了“奶皇包”，給打扮素雅的評委準(zhǔn)備了“素菜包”，還有各種其他對應(yīng)的主題包啊，此處不細(xì)巴啦了……
展廳作為呈現(xiàn)內(nèi)容的“容器”，它直接決定了觀眾對于展覽的第一感覺。展廳應(yīng)該整成啥風(fēng)格呢？為了更好地呈現(xiàn)阿牛表情，我們決定打造簡潔大氣又現(xiàn)代的展廳風(fēng)格。 一周后要開展，展覽需預(yù)留3天物料制作的時間，也就是創(chuàng)意到設(shè)計定稿的時間只有4天！所以我們很快奔著“簡潔大氣又現(xiàn)代”的風(fēng)格去設(shè)計了，以“來一籠表情包”的主題進(jìn)行了主畫面設(shè)計。 主題墻選用了阿牛白模進(jìn)行裝飾，站在展廳入口，可以看到主題，還能看到內(nèi)墻透出的神（啥）秘（表）的（情）阿（都）牛（沒）白（有）模，畫面也很注意“簡潔大氣又現(xiàn)代”的整體氣質(zhì)。
尾墻與主題內(nèi)墻遙相呼應(yīng)。把 “主辦方”調(diào)皮地改成了“主包方”，也根據(jù)物料不同投放地點(diǎn)進(jìn)行了個性化文案設(shè)計。
四、設(shè)計執(zhí)行 作為互聯(lián)網(wǎng)的設(shè)計師，大部分時間都在做平面的設(shè)計，少有做實(shí)體展覽的設(shè)計經(jīng)驗(yàn)。所以執(zhí)行這次展覽設(shè)計面臨了一些新挑戰(zhàn)： 如何把設(shè)計稿落實(shí)為實(shí)體布局？ 如何安排作品展示空間？ 如何引導(dǎo)觀者進(jìn)行投票？
（一）如何安排整體布局 食堂門口展區(qū)空間較小，能用空間大概只有6m x 5.5m。食堂場景比較熱鬧，設(shè)置迷宮型展區(qū)，能隔出相對安靜的空間。下圖是阿里食堂一樓門口的平面圖~
方案一：用五面墻隔出4條觀展道，但算下來觀展道只有1.2m寬了，空間太狹窄，影響同學(xué)觀展。
方案二：用4面墻隔出3條觀展道，觀展道擴(kuò)展到1.7m。但這個布局，觀展者路線是不通暢的，第3條過道那里存在回頭路。觀展者可能不去看第3條過道的作品，且那一道容易形成擁堵。
敲黑板！請聚意！下圖是最終方案 保留4面墻隔3條觀展道，將開口放在展廳左方，既擴(kuò)寬了觀展道路，也保證觀展路線流暢且唯一，觀者走完也就看完了所有作品。
（二）確定單展區(qū)空間大小 大布局確定后便需對單展區(qū)進(jìn)行設(shè)計。在設(shè)計之前，我們需要確定單展區(qū)的空間。 大布局不單決定了展墻的數(shù)量，它和出入口的大小也決定了每面展墻的長度。我們設(shè)定了3面主題墻位置，根據(jù)展墻總長，將19個作品展區(qū)進(jìn)行了安排。 
這個方案反復(fù)推敲了作品之間的疏密關(guān)系，并將投票箱錯開，保持過道空間的疏松。
（三）接下來考慮單展內(nèi)容如何展示 單展區(qū)內(nèi)容包括： 阿牛表情包作品、作者個人信息和作品說明、用于接收“包子”的投票桶。
然后根據(jù)展示內(nèi)容來規(guī)劃它們的位置 不同于平面排版，展區(qū)空間是實(shí)體墻面，表情包應(yīng)放在適于觀者觀看的高度，物料制作方告知展墻高度是2.4m。通過測量，我們設(shè)定了各內(nèi)容的高度： 1.將表情包展示區(qū)定在1m-1.7m之間； 2.作者和作品介紹布置在表情包上方，但不高于2.1m； 3.慮觀者投票便利，投票箱放在地面，高度在0.7m－1m之間。
（四）最后是單展區(qū)的設(shè)計 1.遵循規(guī)劃出的各信息位置，為保證單展區(qū)與單展區(qū)之間不互相“打擾”，將展區(qū)寬度定成0.8m，展區(qū)間的距離定成0.3m；2.用九宮格的形式來呈現(xiàn)，讓觀者能夠集中觀看表情作品；3.考慮19個展區(qū)的區(qū)分和后期統(tǒng)計包子票的便利，給每個展區(qū)編號。平衡展區(qū)底部，增強(qiáng)互動性，加入“做表情不容易，給作者打賞個包子吧”的互動文案。
五、總結(jié) 去年第一季好代顏?zhàn)尠⑴Ｐ旅婵妆淮蠹沂熘?，今年的第二季好代言，我們通過策劃表情設(shè)計比賽，并把比賽作品辦成展覽讓更多人一起來“玩”~我們將主題做成了“來一籠表情包”的設(shè)計展，用了包子這樣一個貼合展覽所處的食堂場景的道具，讓BBC的同學(xué)們覺得有趣且樂于來互動，不同的評委用對應(yīng)ta個性的主題小籠包作為評委票，這些都讓bbc同學(xué)與阿牛的表情展覽有了更多情感聯(lián)結(jié)。
作為策展和設(shè)計執(zhí)行者，我們應(yīng)在展區(qū)布局上規(guī)劃出一條流暢而便于通行和觀展的路線，在單組作品展區(qū)布局上，我們也應(yīng)追求最為合適的安排；簡潔統(tǒng)一的展廳設(shè)計，烘托了19套阿牛表情包的豐富多彩；細(xì)處“設(shè)計表情不容易，給作者打賞個包子吧”，也勾搭著觀展者來與作品互動。
作為阿里BBC線的新人，有幸參與這次策劃展覽和設(shè)計執(zhí)行，讓我有機(jī)會去創(chuàng)意，理性思考布局，鍛煉全局把握并推進(jìn)設(shè)計的能力。最后看到展廳布置如心所想，看到BBC同學(xué)的觀展熱情，還有包子籠速速被拿空的參與度，心里還是很有成就感的。這次展覽思考和執(zhí)行過程分享給大家，希望我們的互動能讓彼此有更多想法，謝謝！
（注：本文轉(zhuǎn)載自阿里巴巴中國站用戶體驗(yàn)設(shè)計博客）
藍(lán)藍(lán)設(shè)計( tweetduck.com?)是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計?、 cs界面設(shè)計?、 ipad界面設(shè)計?、 包裝設(shè)計?、 圖標(biāo)定制?、 用戶體驗(yàn) 、交互設(shè)計、?網(wǎng)站建設(shè)?、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com
