2012-4-26 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
購安卓版_011.jpg "QQ網(wǎng)購安卓版_01")
團(tuán)隊(duì)幾個(gè)月的緊張奮戰(zhàn)，QQ網(wǎng)購安卓版在歷經(jīng)幾個(gè)迭代之后終于灰度發(fā)布了。在不斷摸索與嘗試和架構(gòu)的不斷挑戰(zhàn)與革新后，終于展現(xiàn)出了一定的端倪新貌，體驗(yàn)也在不斷優(yōu)化提升。然而這才只是萬里長征剛剛邁出的一小步，這里謹(jǐn)將所積甚少的設(shè)計(jì)心得總結(jié)整理如下：
2011年國內(nèi)電子商務(wù)的硝煙可謂是彌漫濃烈，在移動(dòng)端也毫不例外。項(xiàng)目啟動(dòng)初期，各類型的電商移動(dòng)端應(yīng)用早已充斥市場，這些自然就成了一個(gè)個(gè)競品分析的對象，但在眾多對比和分析后，縱觀國內(nèi)電商應(yīng)用，并沒有特別完美的范例，區(qū)別于娛樂或SNS應(yīng)用，如何更好地把握好并體現(xiàn)出電商應(yīng)用的運(yùn)營感與功能性無疑是我們所面臨的最大挑戰(zhàn)?？偨Y(jié)競品分析后，我得出了國內(nèi)電商應(yīng)用的設(shè)計(jì)風(fēng)格，特別是閃屏方式和首頁結(jié)構(gòu)有如下特征：
但這些并不是所有，更為關(guān)鍵的還是要融匯移動(dòng)端的交互特點(diǎn)，特別是針對安卓平臺，我們又研究了電子商務(wù)較為成熟的韓國市場所占主流的電商應(yīng)用，例如CJmall、11街、EDGEBOOK和daum、naver旗下的應(yīng)用等等，基于觸屏下的操作特點(diǎn)，并以建立起一個(gè)電商平臺型應(yīng)用為目標(biāo)，由此而制定了側(cè)重功能入口型的九宮格首頁結(jié)構(gòu)，并以順暢化購物流程、減少購買中斷的體驗(yàn)標(biāo)準(zhǔn)。
再回到QQ網(wǎng)購Web端的設(shè)計(jì)，我們同樣對整體風(fēng)格樣式進(jìn)行了研究和剖析，在Web端與移動(dòng)端一致性上的把控，我們考慮并總結(jié)出下列四點(diǎn)，做為設(shè)計(jì)風(fēng)格上的方向指引：
綜上所做競品分析的橫縱研究，我們明確了以下兩個(gè)方面做為我們在交互和視覺上的方向指引，并在此基礎(chǔ)上展開進(jìn)一步的具體設(shè)計(jì)和制作。
QQ網(wǎng)購LOGO是平面化、剪影式的紅色購物袋，并配有白色QQ企鵝剪影，簡潔明了地傳遞了騰訊電商的品牌特性，并能夠很直觀地展現(xiàn)在頁面和印刷制品當(dāng)中?，F(xiàn)QQ網(wǎng)購安卓版的圖標(biāo)設(shè)計(jì)是延續(xù)這一主體標(biāo)識的創(chuàng)意，在原Logo的造型和色彩基礎(chǔ)之上，本著做為網(wǎng)購LOGO附屬圖標(biāo)的目的，進(jìn)一步細(xì)化和渲染而成，簡單增強(qiáng)了光影和透視的細(xì)節(jié)表現(xiàn)，做為移動(dòng)平臺下QQ網(wǎng)購APP的一個(gè)專屬ICON。
結(jié)合ICON進(jìn)行閃屏的設(shè)計(jì)，做為啟動(dòng)畫面，出現(xiàn)時(shí)間很短，故在突出品牌的基礎(chǔ)上，不斷做減法，以網(wǎng)購ICON為主體，加強(qiáng)光影效果，配合動(dòng)畫展現(xiàn)，利用有限的幾秒鐘來突出網(wǎng)購的品質(zhì)感。
首頁的設(shè)計(jì)優(yōu)化是最為關(guān)鍵，從最初側(cè)重功能入口為主的九宮格結(jié)構(gòu)（如上）以及后期逐步導(dǎo)向以運(yùn)營為主的方式，首頁的展示方式不斷在摸索和嘗試中前進(jìn)，尤其在運(yùn)營側(cè)接入后，確立營銷點(diǎn)配合加強(qiáng)運(yùn)營為關(guān)鍵。
搜索頁面所承載的功能是頗為重要的，特別是有眾多關(guān)鍵操作，在從界面視覺表現(xiàn)上來講，操作是密集和繁多的，邏輯性也甚為復(fù)雜，總的來分為兩類：
一般情況下會(huì)以做減法或入口化的方式減少這些操作的同時(shí)展現(xiàn)，但實(shí)際對于購物搜索環(huán)節(jié)來講，以上兩類操作都是很關(guān)鍵的，減少也會(huì)增加操作的層級成本；在另一方面，偏理性用戶（特別是有選品目標(biāo)的人群）往往側(cè)重2的搜索操作，而偏感性用戶（尤其是女性）卻更喜歡在1的操作基礎(chǔ)上切換不同的排序和展現(xiàn)方式。因此后面的優(yōu)化也都是在此基礎(chǔ)上進(jìn)行邏輯分類來卻別兩類操作，并按此進(jìn)行布局。
時(shí)間倉促，整理凌亂，說到這里，發(fā)布前的設(shè)計(jì)過程總結(jié)至此，后面我們要對產(chǎn)品的持續(xù)優(yōu)化和改進(jìn)還有很長的路要走，在此特別感謝整個(gè)團(tuán)隊(duì)的給力支持和每一位同學(xué)為此而付出的辛勤汗水。目前版本灰度發(fā)布還存在諸多的不足，但我們會(huì)扎實(shí)每一步，不斷提高和完善每個(gè)細(xì)節(jié)與體驗(yàn)。在此還請每一位同學(xué)多提寶貴意見！^_^
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com