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