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