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