2016-2-24 周周
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
編者按:今天這篇干貨,是筆者Shirley 針對(duì)信息黃頁(yè)類(lèi)產(chǎn)品(美團(tuán)、淘寶、58同城等) 做了大量的競(jìng)品研究和方案嘗試后總結(jié)的經(jīng)驗(yàn),從界面的信息布局到選圖/圖標(biāo)/用色等都有細(xì)致全面的深入分析,強(qiáng)烈建議閱讀。
每年的雙11都格外瘋狂,隨著技術(shù)帶動(dòng)內(nèi)容的豐富化,剛過(guò)去的雙11氣氛在大眾購(gòu)買(mǎi)力的飆升下又刷新高,讓人一夜之間感受到運(yùn)營(yíng)力量的震撼來(lái)襲。在血脈噴張各種搶購(gòu)倒持購(gòu)物車(chē)時(shí)的你,可否留意過(guò)無(wú)形之中的商城裝扮。眾多電商app從整個(gè)界面翻新到內(nèi)部的運(yùn)營(yíng)活動(dòng)抽獎(jiǎng)機(jī)制,堪比一座物欲相抗衡的虛擬不夜城。
這些多樣化而不失秩序的運(yùn)營(yíng)設(shè)計(jì),背后支撐著有序的設(shè)計(jì)原則。如今形式內(nèi)容紛呈的移動(dòng)互聯(lián)列隊(duì)中,充斥著綜合垂直電商、團(tuán)購(gòu)、旅游、生鮮等2C市場(chǎng)應(yīng)用的身影,以豐富化運(yùn)營(yíng)方式攻占聯(lián)結(jié)產(chǎn)業(yè)鏈,而黃頁(yè)類(lèi)生活資訊類(lèi)應(yīng)用相對(duì)顯得務(wù)實(shí),部分app的步伐更是仍停留在信息單向展示的模式。
上半年經(jīng)歷了一輪生活服務(wù)信息分類(lèi)平臺(tái)的改版設(shè)計(jì),探討了綜合信息黃頁(yè)類(lèi)產(chǎn)品究竟是以實(shí)用為主,或是引入運(yùn)營(yíng)化方式。項(xiàng)目位于手Q側(cè)的58同城合作頻道,內(nèi)容基于精選濃縮后的資訊形態(tài),發(fā)現(xiàn)第一版保守傳統(tǒng)的純文字菜單,以任務(wù)功能為主導(dǎo),但顯得蒼白單薄。針對(duì)該類(lèi)綜合信息展示平臺(tái),做了競(jìng)品研究及方案嘗試。
近兩年趕集網(wǎng)、百姓網(wǎng)、58同城三大生活導(dǎo)航服務(wù)類(lèi)的產(chǎn)品廣告宣傳投入之大,綜合生活服務(wù)類(lèi)產(chǎn)品早期在網(wǎng)頁(yè)上大多都是黃頁(yè)名錄,是紙質(zhì)黃頁(yè)的延續(xù)。搜尋了一些國(guó)外的黃頁(yè)產(chǎn)品現(xiàn)狀,不乏一些緊跟互聯(lián)網(wǎng)節(jié)奏的YellowPages產(chǎn)品。例如美國(guó)最有影響力的本地服務(wù)產(chǎn)品YP,從網(wǎng)站到手機(jī)App,服務(wù)門(mén)類(lèi)可作為自定義標(biāo)簽逐個(gè)添加,頂部為生活關(guān)愛(ài)的意向背景圖,把情感化連接到工具里,甚至在Apple Watch上也支持使用,真正做到了擺脫傳統(tǒng)的黃頁(yè)列表。
其他行業(yè)維度的垂直領(lǐng)域產(chǎn)品,齊刷刷以豐富營(yíng)銷(xiāo)的思路去布局組織信息。譬如生鮮類(lèi)應(yīng)用,在供應(yīng)鏈上投入較多的基礎(chǔ)上,不遺余力地去做吸引用戶(hù)促成交易的事情,在眾多行業(yè)中屬于比較典型一類(lèi)。
PC黃頁(yè)時(shí)代近似web1.0的信息單向呈現(xiàn),發(fā)展至移動(dòng)端的黃頁(yè)產(chǎn)品,用戶(hù)可以在平臺(tái)上搜索甚至留下自己的足跡,這個(gè)節(jié)點(diǎn)演變到2.0信息雙向呈現(xiàn)。而web3.0個(gè)性化定制的理念延續(xù)到移動(dòng)端之后,從淘寶到大眾點(diǎn)評(píng)等主流的電商App都有猜你喜歡、個(gè)性化推薦的功能。黃頁(yè)類(lèi)綜合信息平臺(tái)也可以有類(lèi)似機(jī)制,除了為用戶(hù)提供便捷實(shí)用的信息,也可推送一些潛在吸引點(diǎn)的資訊。由此,搭建圖文豐富化運(yùn)營(yíng)的首頁(yè)是改版首要目標(biāo),兼顧被動(dòng)瀏覽和主動(dòng)獲取信息,提升訪(fǎng)問(wèn)人氣。
黃頁(yè)服務(wù)在現(xiàn)實(shí)中都是拆分開(kāi)的業(yè)務(wù)形態(tài),每一個(gè)本地服務(wù)都有其營(yíng)銷(xiāo)模式。來(lái)同城服務(wù)平臺(tái)的顧客,應(yīng)該留給他不僅是快捷服務(wù)的印象,還有其他二手車(chē)、寵物、二手房等推薦資訊,那些購(gòu)買(mǎi)前會(huì)謹(jǐn)慎篩選的顧客會(huì)再次光顧,也就多了平臺(tái)信息曝光的幾率,從而轉(zhuǎn)化率成交量也就相應(yīng)提升。
擬物化雖在視覺(jué)材質(zhì)表現(xiàn)層離我們遠(yuǎn)去,但界面中的信息布局離不開(kāi)現(xiàn)實(shí)的映射。界面中的模塊化設(shè)計(jì),黃頁(yè)類(lèi)和電商類(lèi)APP 有業(yè)務(wù)依賴(lài)的差異,但在線(xiàn)上的展現(xiàn)形式是互通的。線(xiàn)下的體驗(yàn)最常見(jiàn)的屬商場(chǎng)里的標(biāo)識(shí)導(dǎo)視、貨架、易拉寶、優(yōu)惠專(zhuān)區(qū)等,分別對(duì)應(yīng)虛擬界面中的導(dǎo)航欄、商品陳列、廣告位等。
導(dǎo)航是界面中的路標(biāo),起到快捷分流的樞紐中心?,F(xiàn)如今為數(shù)較多的電商資訊類(lèi)都會(huì)采用八個(gè)圓形狀圖標(biāo)版式。當(dāng)被趨勢(shì)潮流帶著走迷失的時(shí)候,設(shè)計(jì)師不妨追溯到現(xiàn)實(shí)生活歷史發(fā)展中去審視本源。導(dǎo)航欄除了體現(xiàn)整體品牌感和個(gè)性展現(xiàn),最首要的是信息語(yǔ)義傳達(dá),用戶(hù)識(shí)別。這塊現(xiàn)實(shí)映射中最有借鑒的是公共導(dǎo)視系統(tǒng),從瑞士國(guó)際主義平面起,運(yùn)用metro圖標(biāo)作為信息傳達(dá)的必要元素。
如今電商平臺(tái)的App界面,大多用到多欄收納的方式去承載展示信息,引用metro UI的靈感說(shuō)法,設(shè)計(jì)理念源自“多寶閣”陳列古玩的清代工藝家具,具備實(shí)用收藏功能與陳設(shè)審美。多寶閣的使用,空間利用寸土寸金。在有限的手機(jī)端界面中,分割格子數(shù)不宜過(guò)多;商品標(biāo)題大小應(yīng)適當(dāng),保證清晰可見(jiàn);商品擺放盡量大氣,撐滿(mǎn)格子。就如線(xiàn)下的體驗(yàn),實(shí)體店鋪里所有的衣服堆積在一處,少了一些尊貴感。相反,精心的收納,帶給顧客優(yōu)待的購(gòu)物感受。因此,建立一套既有序又不單一的櫥窗模板購(gòu)物體驗(yàn),柵格系統(tǒng)也是必不可少。
橫向滑動(dòng)式的卡片越來(lái)越多地被應(yīng)用到界面中,既可充當(dāng)華麗的分割線(xiàn),又讓用戶(hù)帶著翻卡片的愉悅感。如果卡片的圖夠吸引人,例如美麗說(shuō)的橫向banner滑塊,對(duì)于好奇心略重的用戶(hù)對(duì)于美好事物的探究,會(huì)嘗試看盡也無(wú)妨。一般情況下,建議卡片個(gè)數(shù)在5~10個(gè)。
但如果個(gè)數(shù)非常多,又希望用戶(hù)滑完所有卡片,有計(jì)數(shù)的方式不失為一種方法。個(gè)數(shù)少的時(shí)候,用點(diǎn)計(jì)數(shù)足以,個(gè)數(shù)多時(shí),采用N/M表進(jìn)度的計(jì)數(shù)方式,給到了一定的心理預(yù)期。包括滾動(dòng)卡片的長(zhǎng)寬比應(yīng)用也是有講究的,比如卡片長(zhǎng)度遠(yuǎn)大于高度時(shí),扁扁的一條會(huì)增加用戶(hù)手勢(shì)滑動(dòng)的心理負(fù)擔(dān)小,有劃距長(zhǎng)的錯(cuò)覺(jué)。
除了一些常見(jiàn)的列表模式,在時(shí)尚電商的應(yīng)用Polyvore里可以看到一類(lèi)變體列表,還原了現(xiàn)實(shí)中的貨架擺放形態(tài),同時(shí)增加了夸張手法,商品的大小被滿(mǎn)滿(mǎn)得拉大甚至出血排版,平面報(bào)刊排版的魅力所在,收放得體,簡(jiǎn)潔有度,大膽肯定。App內(nèi)的商品喜愛(ài)收藏,組合拼貼的模塊,與時(shí)尚雜志一并相得益彰。
雙11的一些APP店鋪,會(huì)適當(dāng)裝點(diǎn)流星式裝飾元素,試圖打造夜間霓虹燈即視感。夜色里光怪陸離的讓店面更吸引人,搶購(gòu)活動(dòng)一般在雙11前夕,所以霓虹燈的擺設(shè)成全了代入感。除此之外,在有序的卡片瀑布流中,偶爾夾雜幾個(gè)推薦給你的專(zhuān)欄或達(dá)人,也會(huì)特別吸引用戶(hù)的眼球。
當(dāng)你發(fā)現(xiàn)現(xiàn)有的模式都窮盡的時(shí)候,是否創(chuàng)新到了瓶頸,是否再刻意想去創(chuàng)新的時(shí)候,會(huì)違背設(shè)計(jì)的本意,簡(jiǎn)潔優(yōu)雅的體驗(yàn)初衷?那不妨可以突破一下,來(lái)一下混搭組合,會(huì)有不一樣的重置感。在過(guò)去的時(shí)間里,App中的banner廣告位大多用于頭部的類(lèi)燈箱banner、大模塊間的隔斷banner、專(zhuān)題瀑布流的banner?;诹髁矿w驗(yàn)和信息量控制考慮,會(huì)盡量少用大圖。
而近期發(fā)現(xiàn)越來(lái)越多的電商App,不吝嗇使用大面積的banner篇幅,敢于把瀑布流的單元格做重。將banner和九宮格組合,和滑動(dòng)卡片組合,每一個(gè)組合又各成一個(gè)單元,形成這一類(lèi)的瀑布流。
此外,如果你試圖使用精心篩選過(guò)的位圖,圍繞一種主題色去布局,也顯得創(chuàng)新又時(shí)尚貼心感。不按常理出牌,也是眾里博眼球的方法。
在過(guò)去街區(qū)商鋪實(shí)體經(jīng)濟(jì)開(kāi)枝散葉的年代,引入了小額商品通鋪統(tǒng)一價(jià)的概念,“ 5元5元全部5元”的廣播叫賣(mài)聲,成為一種標(biāo)志性的粗暴接地氣的營(yíng)銷(xiāo)方式,在70、80后的回憶里深入人心。
這樣的體驗(yàn)搬到虛擬平臺(tái)上,演化為二手物品的私貨轉(zhuǎn)賣(mài)語(yǔ)音、店鋪老板吐血吆喝,增加真切真實(shí)感,讓現(xiàn)實(shí)中熟悉的場(chǎng)景再現(xiàn),聲音和語(yǔ)調(diào)有它的唯一性,也是能成為主人的加分賣(mài)點(diǎn)。波羅蜜全求購(gòu)的日韓貨海淘App,專(zhuān)門(mén)開(kāi)設(shè)了一欄日韓海外專(zhuān)員導(dǎo)購(gòu)PK的直播頻道,在講求個(gè)性的年代,直播視頻也會(huì)為你積攢一大波可觀(guān)的關(guān)注度。
美麗說(shuō)的Desire頻道彈幕的應(yīng)用,增加購(gòu)買(mǎi)場(chǎng)景下的臨場(chǎng)感,仿佛和一群人在一起購(gòu)物。評(píng)頭論足就差漫天砍價(jià)。
看過(guò)今敏的經(jīng)典動(dòng)畫(huà)《紅辣椒》的小伙伴都知道,這是一部天馬行空文學(xué)意義上腦洞大開(kāi)的神作,全片貫穿了現(xiàn)實(shí)、夢(mèng)境、電影、屏幕4種媒介交錯(cuò)。人們向往夢(mèng)境中的那個(gè)時(shí)空,綺麗科幻美好荒誕共存。在電腦的虛擬構(gòu)建世界里,可以存在各種捷徑bug,除此之外,虛擬與真實(shí)世界的場(chǎng)景體驗(yàn),跨時(shí)空共同演進(jìn),真正意義上達(dá)到媒介互通。
線(xiàn)上到線(xiàn)下存在著反映射模式,線(xiàn)上虛擬體驗(yàn)的成本較低,線(xiàn)下再現(xiàn)更是讓用戶(hù)傾心,如同旅游景點(diǎn)里,游客看到影視劇里主角出入的地方,欣喜不已,跨時(shí)空難以言喻的情懷,類(lèi)似夢(mèng)境里仿佛去過(guò)。
近日無(wú)印良品書(shū)店的崛起,使得很長(zhǎng)一段時(shí)間看衰的紙質(zhì)書(shū)又火了起來(lái)。書(shū)店進(jìn)門(mén)處,都有懸掛每天會(huì)更新的“是日佳句”,書(shū)本的分類(lèi)不再是常規(guī)的普適分類(lèi),而是按照?qǐng)鼍爸黝}去歸類(lèi),甚至任性地以書(shū)的顏色去劃出一個(gè)區(qū)域,這些都是我們平日常見(jiàn)的線(xiàn)上電商社區(qū)運(yùn)營(yíng)手法。
一個(gè)長(zhǎng)頁(yè)面,用戶(hù)最多能接受幾種模塊變換,多少類(lèi)似的模塊出現(xiàn)后,又會(huì)覺(jué)得乏味。打造的體驗(yàn)和運(yùn)營(yíng)豐富化,這兩者并不互斥。在信息模塊多樣穿插的基礎(chǔ)上,元素的形式是構(gòu)成節(jié)奏感的必要因素。在排版、圖形、色彩的構(gòu)建階段,節(jié)奏感的打磨,能讓信息閱讀體驗(yàn)循序漸進(jìn)、不易疲勞。
當(dāng)界面中需要交代更為詳實(shí)的內(nèi)容時(shí),盡量使用實(shí)物圖,抽象的圖形會(huì)拉遠(yuǎn)與用戶(hù)的接收反饋進(jìn)程。用戶(hù)對(duì)于信息的加工,建立在對(duì)對(duì)象的熟悉程度。信息具象直接強(qiáng)于信息抽象、熟悉強(qiáng)于未知、人強(qiáng)于物。所以運(yùn)營(yíng)化必不可少的事,是把熟悉感強(qiáng)、帶有話(huà)題感的事物,建立關(guān)聯(lián)。
一款資訊類(lèi)App通常層級(jí)多,也意味著會(huì)有首頁(yè)和二級(jí)頁(yè)的導(dǎo)航圖標(biāo),也可能會(huì)包含頁(yè)內(nèi)小模塊入口導(dǎo)航圖標(biāo)。前文提到導(dǎo)航的形式表現(xiàn)非常多樣化,對(duì)應(yīng)的圖形表現(xiàn)的設(shè)計(jì)初衷也不同。其中影響因素有產(chǎn)品受眾用戶(hù)群范圍、品牌形象、功能定位(工具或資訊瀏覽或綜合型);圖標(biāo)的圖形構(gòu)成有顏色、點(diǎn)線(xiàn)面形狀、質(zhì)感。
在去強(qiáng)品牌化和去強(qiáng)運(yùn)營(yíng)后,圖標(biāo)的填充剪影型和線(xiàn)型成為最常見(jiàn)的兩種造型手法。但如果以為主要目標(biāo),填充和線(xiàn)型兩類(lèi)起到效果是有差異的。人們的視神經(jīng)感受圖形造型認(rèn)知,有據(jù)可尋。如完型心理學(xué)里所體現(xiàn),肉眼更能第一時(shí)間感知到填充型圖標(biāo),對(duì)于線(xiàn)性的圖標(biāo),則對(duì)視知覺(jué)的沖擊相對(duì)小。線(xiàn)性形態(tài)較圖形剪影的形態(tài)復(fù)雜,畢竟我們現(xiàn)實(shí)中對(duì)物品的印象,是可以簡(jiǎn)化為剪影,而線(xiàn)性的描繪,是后期的藝術(shù)的二次描摹加工。
在同城服務(wù)項(xiàng)目過(guò)程中,針對(duì)頭部的導(dǎo)航欄展現(xiàn)方式做了若干嘗試:
發(fā)現(xiàn)對(duì)于綜合型的信息平臺(tái),導(dǎo)航欄以五彩對(duì)矢量圖標(biāo)呈現(xiàn),較為簡(jiǎn)潔直觀(guān),圖形傳達(dá)訊息語(yǔ)義。在用研設(shè)計(jì)階段,引入對(duì)填充型和線(xiàn)型的圖標(biāo)導(dǎo)航的認(rèn)知反饋的快速測(cè)試。
有效適度地運(yùn)用色彩,能使界面的信息解讀更為清晰,用濃墨重彩去妝點(diǎn)突出的部分。用色要有余韻,如果每處都是強(qiáng)烈的色彩,恐怕用戶(hù)盛情難卻。非但沒(méi)有達(dá)到原本目的,可能會(huì)嚇走本要抓住的目光。如果希望用戶(hù)關(guān)注眼前全盤(pán)托出的信息,可以把握一下用色的節(jié)奏、少一些沖突多一些和諧。節(jié)奏感的巧妙應(yīng)用,讓界面信息更有層次,優(yōu)雅地呈現(xiàn)。
營(yíng)銷(xiāo)只為更上一層
盡量規(guī)避中規(guī)中矩或片面地去對(duì)待一個(gè)業(yè)務(wù)形態(tài),任何一個(gè)產(chǎn)品,你希望呈現(xiàn)給用戶(hù)什么,實(shí)際你是那么做了,并且傳達(dá)給用戶(hù)如是的訊息,并不會(huì)無(wú)中生有。產(chǎn)品人設(shè)計(jì)師需要用開(kāi)放的心態(tài)精心布局設(shè)計(jì),用戶(hù)是能感受到的,這就是產(chǎn)品體驗(yàn)的微妙所在。在無(wú)解說(shuō)或者強(qiáng)引導(dǎo)的情境下,用戶(hù)會(huì)依據(jù)他接收到的訊息,會(huì)是按照你事先預(yù)期的意志又或者相違背地去完成接下去一系列的操作。即使是綜合型信息的平臺(tái),即使是為目的的黃頁(yè),豐富化的信息呈現(xiàn),做好節(jié)奏感和信息層級(jí)輕重緩急,只會(huì)給用戶(hù)更舒心愉悅的隨性體驗(yàn)。
混亂中制造秩序,秩序中暗涌紛擾
長(zhǎng)頁(yè)面單一形式的框架,最好存在于層級(jí)深或功能專(zhuān)注的界面。首頁(yè)的信息復(fù)雜的情況下,建議采用多結(jié)構(gòu)化模塊,包括整體得用色及排版的節(jié)奏感把握。好的產(chǎn)品設(shè)計(jì)就像可玩性強(qiáng)的游戲關(guān)卡一樣,能持續(xù)性地吸引用戶(hù),在有限的空間內(nèi),用恰好地布局、用色、阻隔等元素,讓信息相互和諧相互襯托。當(dāng)然如果模塊多樣化后,規(guī)范化的柵格系統(tǒng)需要去約束混亂,穩(wěn)定秩序,達(dá)到平衡。
細(xì)微觀(guān)察生活,現(xiàn)實(shí)虛擬無(wú)界
從線(xiàn)下過(guò)渡到線(xiàn)上的體驗(yàn)是一條正向遷移軌跡,而將互聯(lián)網(wǎng)虛擬的體驗(yàn)遷移到線(xiàn)下,也能打造扳回一局,甚至雙贏。線(xiàn)上到線(xiàn)下的模式,密室逃脫、真人CS 、餐廳點(diǎn)單自助機(jī)、虛擬現(xiàn)實(shí)技術(shù)、網(wǎng)絡(luò)小說(shuō)真人影視演繹等,這些都是初始形態(tài)源于虛擬網(wǎng)絡(luò)。雖有很多用戶(hù)界面體驗(yàn)中,已包含了源自現(xiàn)實(shí)的體驗(yàn)。但仍有一片未開(kāi)辟的藍(lán)海,等待開(kāi)啟設(shè)計(jì)師的慧眼用心去發(fā)掘更多。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com