作者通過從會(huì)員體系構(gòu)成的4個(gè)核心要素對(duì)“京東、亞朵、支付寶、騰訊理財(cái)通”的會(huì)員體系進(jìn)行拆解,發(fā)現(xiàn)不同類產(chǎn)品中的設(shè)計(jì)會(huì)員體系需要注意的問題。
一款產(chǎn)品要想持續(xù)獲取用戶價(jià)值,前端增長和后端活躍、留存與轉(zhuǎn)化缺一不可。隨著流量越來越貴拉新成本越來越高,多數(shù)互聯(lián)網(wǎng)公司開始將用戶活躍與留存視為產(chǎn)品核心指標(biāo),而會(huì)員體系一直以來都是最有效的活躍留存與轉(zhuǎn)化的運(yùn)營手段之一。
本文對(duì)比4款目前付費(fèi)類產(chǎn)品中比較典型的“京東、亞朵、支付寶、騰訊理財(cái)通”的等級(jí)會(huì)員體系,分別代表4種不同的等級(jí)會(huì)員體系類型。從會(huì)員體系構(gòu)成的4個(gè)核心元素:命名、層數(shù)、成長值計(jì)算、會(huì)員權(quán)益,來快速了解一款產(chǎn)品的會(huì)員體系。
希望通過這篇文章給在做會(huì)員體系抓耳撓腮的你一點(diǎn)啟發(fā)。
會(huì)員命名是品牌文化、用戶群體特征的體現(xiàn),而會(huì)員層數(shù)的多少則反映了產(chǎn)品轉(zhuǎn)化路徑的長短。
京東會(huì)員分為非付費(fèi)會(huì)員(下稱等級(jí)會(huì)員)和付費(fèi)會(huì)員兩個(gè)體系。為了凸顯付費(fèi)會(huì)員,2019.9.15日起,取消了等級(jí)會(huì)員原有的銅銀金鉆制會(huì)員體系,以京享值代替。
至此,從會(huì)員命名的角度,京東的會(huì)員只有付費(fèi)會(huì)員和等級(jí)會(huì)員兩種名稱,等級(jí)會(huì)員會(huì)員之間以京享值的大小進(jìn)行區(qū)分,共分為5層。
亞朵會(huì)員在命名方面充分體現(xiàn)了“舒心微笑”的品牌特征,等級(jí)會(huì)員共分為5級(jí),分別為注冊(cè)會(huì)員(初遇)、銀會(huì)員(識(shí)君)、金會(huì)員(知己)、鉑金會(huì)員(執(zhí)手)、黑金會(huì)員(逍遙)。括號(hào)內(nèi)的短稱分別來對(duì)應(yīng)著兩句詩詞,詳見官網(wǎng)的會(huì)員介紹。
支付寶等級(jí)會(huì)員共分為4級(jí),分別為大眾會(huì)員、黃金會(huì)員、鉑金會(huì)員、鉆石會(huì)員。從級(jí)別數(shù)量來說,支付寶會(huì)員級(jí)別相比于前者少了1級(jí),會(huì)員升級(jí)的難度也加大了。
騰訊理財(cái)通等級(jí)會(huì)員共分為4級(jí),分別為普通會(huì)員、白銀會(huì)員、黃金會(huì)員與鉑金會(huì)員。顏色區(qū)分上,級(jí)別從低到高顏色分別為藍(lán)灰色、銀灰、金色、黑色,通過灰色調(diào)營造理財(cái)產(chǎn)品的嚴(yán)肅和專業(yè)感。
【注:等級(jí)會(huì)員是指,會(huì)員級(jí)別不能直接購買得到,而是要通過完成產(chǎn)品任務(wù)升級(jí)達(dá)到。付費(fèi)會(huì)員是指,用戶通過付費(fèi)購買產(chǎn)品會(huì)員特權(quán),購買的會(huì)員獨(dú)立于非付費(fèi)會(huì)員,不是非付費(fèi)會(huì)員的某一級(jí)】
通常會(huì)員命名會(huì)以金屬作為主線,其中金、銀、鉆石等最為常見。
這是用戶已經(jīng)熟知的命名方式,遵循以上規(guī)則有助于用戶更快的接受會(huì)員身份。但如果產(chǎn)品有特殊的品牌文化和目標(biāo)用戶,可以考慮在命名上加入品牌元素,如亞朵。
付費(fèi)會(huì)員與等級(jí)會(huì)員之間具有重疊性。
高階的等級(jí)會(huì)員分散了用戶對(duì)付費(fèi)會(huì)員的注意力,因此京東最終不得不對(duì)等級(jí)會(huì)員體系采取“除名”做法。
付費(fèi)會(huì)員必然會(huì)導(dǎo)致原等級(jí)會(huì)員體系影響力的削弱,在初始設(shè)計(jì)時(shí)需要綜合考慮付費(fèi)會(huì)員和等級(jí)會(huì)員體系在維系用戶、營銷行為等方面的價(jià)值,做好取舍。
此外,還可以參考亞朵酒店的做法,將等級(jí)會(huì)員的某一級(jí)作為付費(fèi)對(duì)象來售賣,如下圖,亞朵酒店將會(huì)員體系中的第三級(jí)【金會(huì)員】單獨(dú)售賣。
不同產(chǎn)品的會(huì)員層數(shù)不同。
電商等付費(fèi)類產(chǎn)品會(huì)員普遍采用4-5級(jí)的分層、資訊類產(chǎn)品的會(huì)員體系可多達(dá)10級(jí),如趣頭條等;社交、游戲類產(chǎn)品更是根據(jù)玩法的不同,設(shè)置幾十級(jí)的會(huì)員等級(jí)。
會(huì)員定級(jí)層數(shù)主要取決于產(chǎn)品的轉(zhuǎn)化路徑長短:
付費(fèi)類產(chǎn)品轉(zhuǎn)化路徑短,用戶使用產(chǎn)品就一定會(huì)付費(fèi),因此只需要根據(jù)用戶實(shí)際消費(fèi)能力進(jìn)行用戶分層,4-5層即可覆蓋用戶的全部消費(fèi)能力。
但社交類產(chǎn)品轉(zhuǎn)化路徑長,需要用戶長期活躍在產(chǎn)品內(nèi)才有機(jī)會(huì)轉(zhuǎn)化付費(fèi)用戶,會(huì)員級(jí)別需要足夠多,才能保證用戶有動(dòng)力持續(xù)的活躍和留存。
此外,從成本的角度考慮,付費(fèi)類產(chǎn)品的會(huì)員權(quán)益通常為商家的折扣和返利,會(huì)員級(jí)別越高企業(yè)付出成本越高,
級(jí)別過多會(huì)導(dǎo)致企業(yè)難以承擔(dān)成本,而社交、游戲類產(chǎn)品的會(huì)員權(quán)益通常為虛擬的勛章、身份象征等,即使會(huì)員級(jí)別高達(dá)幾十級(jí),也不會(huì)產(chǎn)生過多的成本。
下圖是趣頭條10級(jí)會(huì)員的權(quán)益,可以看到權(quán)益大多數(shù)為榮譽(yù)勛章類虛擬獎(jiǎng)勵(lì),企業(yè)幾乎不需要付出成本。
成長值是用于衡量會(huì)員級(jí)別的刻度,用戶通過獲取成長值來達(dá)到升級(jí)、保級(jí)的目的。成長值的獲取方式體現(xiàn)了產(chǎn)品主要的運(yùn)營動(dòng)作,而計(jì)算公式也根據(jù)業(yè)務(wù)變動(dòng)速度和產(chǎn)品特點(diǎn)有所不同。
分析如下:
京東的主要運(yùn)營動(dòng)作包括以下幾方面:提高用戶消費(fèi),促進(jìn)用戶活躍、收集用戶信息、建立信用評(píng)分體系等。
京東成長值的具體計(jì)算公式并未明確給出,因此可以推斷其業(yè)務(wù)調(diào)整快,變動(dòng)幅度大。不公布具體計(jì)算公式可以靈活的調(diào)整成長值計(jì)算公式,但也犧牲了用戶的確定性體驗(yàn)。
分析如下:
亞朵對(duì)用戶的主要運(yùn)營方向?yàn)橄M(fèi)和互動(dòng),運(yùn)營動(dòng)作主要是圍繞著訂房和相關(guān)服務(wù)展開。
成長值計(jì)算兼容地區(qū)差異:酒店業(yè)務(wù)通常分布在多個(gè)城市,每個(gè)城市的消費(fèi)水平差異很大。若僅僅以消費(fèi)金額來衡量會(huì)員級(jí)別,會(huì)導(dǎo)致大多數(shù)的高級(jí)會(huì)員都集中在高消費(fèi)城市,無法實(shí)現(xiàn)對(duì)二三線城市的用戶激勵(lì)。因此,酒店行業(yè)會(huì)員的成長值通常結(jié)合間夜和消費(fèi)金額綜合計(jì)算。
酒店預(yù)定更加依賴于用戶渠道,包括OTA(美團(tuán)/攜程等平臺(tái))、自營渠道、分銷商等。不同的渠道企業(yè)付出的成本不同,會(huì)員體系通常只給自營渠道的用戶計(jì)算成長值。如亞朵。
分析如下:
支付寶主要的運(yùn)營動(dòng)作包括促進(jìn)用戶消費(fèi)購物、完成生活繳費(fèi)和增加金融理財(cái)。生活繳費(fèi)任務(wù)的成長值獎(jiǎng)勵(lì)較高,可以推測(cè)占據(jù)用戶生活支付場(chǎng)景是主要運(yùn)營方向
支付寶的成長值計(jì)算公式為白盒,這與理財(cái)類產(chǎn)品性質(zhì)相關(guān),由于涉及到用戶的金錢投入,更需要獲取用戶的信任,明確的計(jì)算方式能夠帶給用戶確定感。
分析如下:
騰訊理財(cái)通的主要運(yùn)營動(dòng)作包括促進(jìn)用戶購買理財(cái)、激勵(lì)用戶完善個(gè)人信息。騰訊理財(cái)通的會(huì)員任務(wù)多達(dá)27個(gè),收集用戶信息的任務(wù)占到1/3,可見完善用戶畫像為產(chǎn)品的主要戰(zhàn)略。
理財(cái)通會(huì)員成長值的計(jì)算公式同樣為白盒,清晰的展示用戶完成任務(wù)能獲得的成長值。
(注:數(shù)字標(biāo)記表示用戶級(jí)別,其中高級(jí)會(huì)員擁有低級(jí)會(huì)員的全部權(quán)益)
騰訊理財(cái)通會(huì)員等級(jí)禮遇如下圖所示:
通過分析會(huì)員體系的4個(gè)核心元素:命名、層數(shù)、成長值計(jì)算、會(huì)員權(quán)益,可以迅速讀懂一個(gè)產(chǎn)品的會(huì)員體系。
一個(gè)好的會(huì)員體系能夠通過選擇合適的會(huì)員命名、設(shè)置符合產(chǎn)品轉(zhuǎn)化路徑的會(huì)員層數(shù)、設(shè)計(jì)涵蓋主要運(yùn)營動(dòng)作并能靈活調(diào)整的成長值計(jì)算體系、提供滿足用戶核心需求的會(huì)員權(quán)益。最終形成業(yè)務(wù)閉環(huán),引導(dǎo)用戶價(jià)值逐步提升,實(shí)現(xiàn)用戶價(jià)值的最大化。
文章來源:人人都是產(chǎn)品經(jīng)理
本文分享國際化司機(jī)端首頁改版完整思考過程,化繁為簡(jiǎn)提升司機(jī)使用效率,提升產(chǎn)品用戶體驗(yàn)。
隨著滴滴國際化業(yè)務(wù)腳步不斷加快,司機(jī)端始終是作為承載全球化業(yè)務(wù)運(yùn)力的基礎(chǔ)保障。
同時(shí),在移動(dòng)通信技術(shù)高速發(fā)展的背景下,不同國家間的傳輸速度與硬件設(shè)備差距正在不斷縮小,用戶對(duì)應(yīng)用產(chǎn)品的期望由基礎(chǔ)的可接受、可使用、功能齊全,向更易用、簡(jiǎn)約、更為專注的產(chǎn)品使用體驗(yàn)上轉(zhuǎn)變。
在新階段下,「為全球司機(jī)用戶提供一個(gè)「克制」「可依賴」的產(chǎn)品使用體驗(yàn)」、「為業(yè)務(wù)拓展提供有力的體驗(yàn)支撐」是體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)在新的階段下提出的目標(biāo)。
2018 年 9 月我們與產(chǎn)品同學(xué)深入拉美當(dāng)?shù)貙?duì)司機(jī)側(cè)進(jìn)行為期 2 周的產(chǎn)品體驗(yàn)調(diào)研。雖然在當(dāng)?shù)氐臅r(shí)間較為短暫,但是我們依舊感受到了拉美國家的習(xí)俗文化和人文特點(diǎn)。
相比中國人的含蓄內(nèi)斂,巴西與墨西哥人顯然更加熱情隨和。
在巴西,這個(gè)世界上假期最多的國家,處處體現(xiàn)著人們對(duì)生活的享受才是自始至終的追求。無論是世界杯一個(gè)月狂歡長假,還是周末下午兩點(diǎn)開門的商區(qū),總會(huì)讓人羨慕的同時(shí)刷新你對(duì)享受生活的認(rèn)知。
而娛樂至上的墨西哥人,熱情友好,能歌善舞,我們常說的放飛自我在這里幾乎成為墨西哥人每天的生活常態(tài)。他們喜歡享受當(dāng)下,后天下之憂而憂。他們覺得工作賺錢就是為了更好的休息,大多數(shù)人每天都是開朗樂觀的處世態(tài)度。
同樣,落后的基礎(chǔ)建設(shè)、糟糕的交通狀況、教育水平低下、價(jià)格昂貴的電子產(chǎn)品以及相對(duì)不太穩(wěn)定的社會(huì)環(huán)境,也是它們共同存在的問題。
在當(dāng)?shù)?,我們通過實(shí)地調(diào)研與用戶訪談等方式,針對(duì)產(chǎn)品體驗(yàn)的問題與司機(jī)進(jìn)行面對(duì)面溝通。收集了很多寶貴的用研資料與司機(jī)訴求,如司機(jī)希望平臺(tái)為他們推薦訂單引導(dǎo),司機(jī)希望獲得更多的實(shí)時(shí)動(dòng)態(tài)訊息和司機(jī)每天都可以查看自己的收入狀況等,集中體現(xiàn)在效率、感知、體驗(yàn)這三大方面。
其次,伴隨著業(yè)務(wù)的不斷增長,越來越多的功能使得我們的產(chǎn)品變的更加復(fù)雜,舊版的框架布局早已是不堪重負(fù),無論是現(xiàn)存的體驗(yàn)優(yōu)化問題,還是未來業(yè)務(wù)功能的拓展問題,舊的框架體系都是難以為繼,無法再通過簡(jiǎn)單的修補(bǔ)來滿足用戶和業(yè)務(wù)未來的訴求。
改版升級(jí)對(duì)產(chǎn)品本身來說是一件非常重要的事情,需要對(duì)多方因素進(jìn)行慎重考慮。經(jīng)過多次的溝通討論,權(quán)衡改版對(duì)產(chǎn)品可能產(chǎn)生的利弊關(guān)系,采用小步快跑,快速試錯(cuò),分階段分模塊的方式進(jìn)行。
首頁既作為承載核心功能(發(fā)車)的載體又是其他重要板塊的分發(fā)的入口,在內(nèi)容呈現(xiàn)與用戶感知上都存在很大的體驗(yàn)提升空間;我們通過拆解業(yè)務(wù)中長遠(yuǎn)需求規(guī)劃得知,大多數(shù)重點(diǎn)需求依賴于首頁框架布局,而現(xiàn)存首頁框架無法滿足業(yè)務(wù)訴求;在競(jìng)品的改版中首頁的變化最大,并在司機(jī)群體中取得比較正向的反饋;通過上述分析,決定率先對(duì)首頁進(jìn)行優(yōu)化改造。
首先我們與產(chǎn)品、運(yùn)營側(cè)進(jìn)行深入討論,結(jié)合用戶訪談?wù)淼挠脩粼V求,對(duì)此次首頁改版的目標(biāo)達(dá)成一致。
在舊版的框架體系中,大量信息在首頁呈現(xiàn),功能層級(jí)復(fù)雜,重點(diǎn)功能難以突破和查找,關(guān)聯(lián)較弱的信息架構(gòu)嚴(yán)重影響和分散了司機(jī)的關(guān)注點(diǎn)。隨著業(yè)務(wù)模式不斷擴(kuò)展,首頁新需求類型逐漸增多,一套更加具備靈活的拓展能力和管理能力的首頁框架尤為重要。
首先我們將舊版的首頁布局打破重建,對(duì)現(xiàn)有模塊進(jìn)行整理。功能相似、定義模糊、司機(jī)操作相對(duì)低頻的模塊進(jìn)行合并、刪減。
對(duì)司機(jī)高頻操作模板進(jìn)行場(chǎng)景劃分,將相關(guān)信息進(jìn)行聚合處理,通過對(duì)入口的強(qiáng)化,來明確司機(jī)對(duì)不同模塊的認(rèn)知。
出車管理
將與出車相關(guān)信息進(jìn)行組織聚合,結(jié)合司機(jī)不同的使用場(chǎng)景,將功能與模塊進(jìn)行結(jié)合,加強(qiáng)認(rèn)知,減少司機(jī)多余的思考與判斷,快速響應(yīng),提升工作效率,同樣也為業(yè)務(wù)在有關(guān)出車功能方面提供靈活可拓展的組件框架。
收入管理
通過顯示司機(jī)最關(guān)注的今日收入信息,為司機(jī)提供方便快捷的查看功能,使司機(jī)更專注于工作本身。同時(shí)對(duì)收入管理入口起到了強(qiáng)化認(rèn)知作用。
信息管理
對(duì)關(guān)于個(gè)人相關(guān)的信息通知及功能操作進(jìn)行聚合,方便司機(jī)對(duì)個(gè)人信息進(jìn)行快速查看,提高查看效率。
通過對(duì)框架模塊的標(biāo)準(zhǔn)化定義,后續(xù)的業(yè)務(wù)需求便可以進(jìn)行歸類管理,根據(jù)不同需求的不同屬性,結(jié)合功能使用場(chǎng)景,選擇合適的模塊進(jìn)行展示,提高司機(jī)使用效率同時(shí)增加首頁的業(yè)務(wù)框架擴(kuò)展能力。
通過對(duì)框架的重構(gòu),有效的解決了首頁信息承載壓力過大,功能層級(jí)復(fù)雜的問題,同時(shí)地圖的面積相比舊版首頁也大幅增加,信息呈現(xiàn)更加簡(jiǎn)潔、輕量。
出車操作作為首頁的核心功能,通過調(diào)研得知,司機(jī)普遍反映在舊版首頁中存在出車操作感知弱、收出車狀態(tài)區(qū)分不明顯的問題,對(duì)司機(jī)的操作體驗(yàn)和感知體驗(yàn)造成了比較大困惑。
在首頁改版過程中我們著重對(duì)出車操作進(jìn)行了設(shè)計(jì)分析,基于對(duì)業(yè)務(wù)的了解和競(jìng)品的分析,得出以下三個(gè)結(jié)論:
通過「兩強(qiáng)一弱」,減少司機(jī)困惑提升發(fā)單效率的同時(shí),間接的延長司機(jī)的在線時(shí)長。
完成頁面設(shè)計(jì)后我們發(fā)現(xiàn),操作按鈕通過靜態(tài)視覺角度去表達(dá)收出車空間位置關(guān)系是十分困難的,僅通過 Toast 提示會(huì)造成用戶理解的斷層,于是提出使用動(dòng)效去進(jìn)行「搭線」串聯(lián),搭線發(fā)車前按鈕的點(diǎn)擊和收納后的位置提醒進(jìn)行視覺體驗(yàn)上的串聯(lián),從而達(dá)成感知增強(qiáng),解決視覺體驗(yàn)層面不容易解決的問題。
豐富的訂單獎(jiǎng)勵(lì)活動(dòng)是我們與競(jìng)品相比重要的競(jìng)爭(zhēng)優(yōu)勢(shì),司機(jī)在完成定量訂單的同時(shí)提供了更多的額外收入。查看每日獎(jiǎng)勵(lì)活動(dòng),已成大多數(shù)司機(jī)每日上線必做的事情。
與舊版相比,在新版首頁中通過提升獎(jiǎng)勵(lì)入口層級(jí),縮短了查看獎(jiǎng)勵(lì)活動(dòng)操作路徑,從而方便司機(jī)快速查看。
通過首頁透?jìng)鞯莫?jiǎng)勵(lì)卡片,司機(jī)在首頁即可獲取到推送的獎(jiǎng)勵(lì)相關(guān)信息,及時(shí)獲取到獎(jiǎng)勵(lì)預(yù)告和進(jìn)度,提升了司機(jī)工作效率的同時(shí)加強(qiáng)了司機(jī)對(duì)獎(jiǎng)勵(lì)活動(dòng)的感知。
在經(jīng)歷了快速奔跑的粗放階段,我們也在思考司機(jī)端產(chǎn)品究竟以怎樣的品牌氣質(zhì)傳遞給海外的司機(jī)群體。
在當(dāng)?shù)?,我們?cè)谒緳C(jī)心目中更像是合作伙伴,憑借真誠互利的態(tài)度贏得了當(dāng)?shù)厮緳C(jī)的用戶。
真誠、熱情與融合我想這就是我們想要傳達(dá)的核心品牌情感,而克制、可依賴將作為產(chǎn)品體驗(yàn)的設(shè)計(jì)原則貫穿始終。
顏色系統(tǒng)
司機(jī)端顏色系統(tǒng)在基于現(xiàn)有品牌色基礎(chǔ)上,結(jié)合不同國家顏色文化的理解,新增加符合本地化的輔助色系,以提升產(chǎn)品的親和力,傳遞品牌情感。
文字系統(tǒng)
針對(duì)司機(jī)用戶的操作使用場(chǎng)景,對(duì)文字字號(hào)梯度進(jìn)行提升,通過文字粗細(xì)、顏色、大小加強(qiáng)信息對(duì)比度,使司機(jī)在更多復(fù)雜場(chǎng)景下可快速獲取重要信息,提升閱讀體驗(yàn)。
在此次改版中新引入 Barlow 與 DIN Alternate 字族作為模式數(shù)字展示字體,兩款字體分別為 Android 及 iOS 系統(tǒng)下默認(rèn)包含字體,相比 Roboto 與 SF Pro text 兩款字族,在數(shù)字展示上更為明確、識(shí)別性更強(qiáng),同時(shí)因?yàn)樽陨怼咐w瘦」的特性,在屏幕橫向面積上節(jié)省更多空間。
業(yè)務(wù)在不同的階段有不同的側(cè)重方向及打法,設(shè)計(jì)側(cè)根據(jù)業(yè)務(wù)所處階段應(yīng)及時(shí)的調(diào)整自身的目標(biāo)定位,快速響應(yīng),積極探索設(shè)計(jì)的機(jī)會(huì)和突破點(diǎn),在不同的階段發(fā)揮自身價(jià)值,助力業(yè)務(wù)達(dá)成共同目標(biāo),為用戶創(chuàng)造更便捷的產(chǎn)品使用體驗(yàn)。
首頁改版從立項(xiàng)到設(shè)計(jì)再到研發(fā),多部門同學(xué)緊密配合,在有限的時(shí)間內(nèi)最大化的完成預(yù)期上線效果。
全量上線后,通過問卷對(duì)首頁改版進(jìn)行滿意度收集,司機(jī)對(duì)新版首頁的滿意度平均值高達(dá) 93%。取得的成績(jī)離不開每一位參與改版的同學(xué)支持,也得益于國際化團(tuán)隊(duì)自始至終對(duì)產(chǎn)品體驗(yàn)的重視與認(rèn)同。
作為司機(jī)端體驗(yàn)升級(jí)的第一步,首頁改版只是一個(gè)開始,希望通過不斷的打磨優(yōu)化,秉持初心,為全球司機(jī)提供更克制、可依賴的出行平臺(tái)。
文章來源:優(yōu)設(shè)
首先來解釋一下什么是動(dòng)態(tài)布局:
所謂動(dòng)態(tài)布局就是可以通過修改內(nèi)容實(shí)現(xiàn)關(guān)聯(lián)內(nèi)容自動(dòng)改變的布局方式。
在 sketch 45 之后的版本,我們可以通過 resizing 對(duì)元素的上下左右邊距進(jìn)行固定,來實(shí)現(xiàn)頁面布局的動(dòng)態(tài)響應(yīng)。這種響應(yīng)是被動(dòng)的,需要我們拖拽著它,它才能給出反饋。雖然不是多么的聰明,但是這種被動(dòng)的方式解放了很大一部分生產(chǎn)力,足以讓你鄙視一下 Photoshop 的 UI 設(shè)計(jì)了。
有了被動(dòng)響應(yīng),自然也想要有主動(dòng)響應(yīng),通過改變?cè)貎?nèi)容去改變布局。之前在 sketch 里面一直有一個(gè)功能:文字尾部跟隨(間距在 20px 以內(nèi),后面可跟文字或圖標(biāo))。如圖:
功能雖單一,但在工作效率上帶來了極大的提升。當(dāng)然我們想要的更多
比如:
一個(gè)標(biāo)簽,我希望可以跟隨文字長度而自動(dòng)適應(yīng)。
△ 不是這樣
△ 而是這樣
在 Sketch 58 之前,我們可以通過 kitchen 或者 Anima 等外部插件實(shí)現(xiàn)這類效果。但是這類插件在創(chuàng)建為組件以后會(huì)出現(xiàn)一些莫名的抽搐,可用性不高。在 Sketch 58 之后 Sketch 自身就攜帶了這些技能,可以實(shí)現(xiàn)一些動(dòng)態(tài)布局,不過目前來看它還是存在一定的局限性,它的動(dòng)態(tài)布局是基于 symbol 的。但我們不會(huì)為了布局而刻意去做 symbol,這會(huì)加重組件庫的維護(hù)負(fù)擔(dān),在整體的收益率及效率上不見得能帶來多大的提升。組件庫應(yīng)盡可能的保證干凈、靈活以及它的實(shí)用性。
我們?nèi)¢L補(bǔ)短。所以,這里要講的不是某一個(gè)插件或某一個(gè)功能,而是結(jié)合插件與自身的布局來達(dá)到足夠的穩(wěn)定與,解放雙手,釋放大腦。
這里主要通過介紹 Kitchen、Anima 和 sketch 的布局部分,整合它們各自的優(yōu)勢(shì)來做一系列的動(dòng)態(tài)布局。
對(duì)比一下各個(gè)插件之間的差異
Kitchen
輸入按鈕的上下左右邊距,讓文字與按鈕背景的邊距固定。改變文字寬度,按鈕寬度隨之改變。
Anima Padding
Anima 不需要手動(dòng)輸入邊距,插件會(huì)自動(dòng)保留文字周圍的邊距并生成 padding。
Sketch 布局
sketch 也不需要手動(dòng)輸入邊距,但是需要將想要實(shí)現(xiàn)動(dòng)態(tài)布局的內(nèi)容創(chuàng)建為組件,在創(chuàng)建組件的過程中可以對(duì)它的動(dòng)態(tài)方向進(jìn)行限定。這里一共七種模式(無、水平「從左往右、居中、從右往左」、垂直「從上往下、居中、從下往上」)。文字的對(duì)齊方式最好和布局的動(dòng)態(tài)方向保持一致。
可以看出 Anima 和 Sketch 會(huì)更一點(diǎn)
我們可以讓按鈕再可以復(fù)雜一點(diǎn)。
比如加個(gè) icon:
或者換個(gè)行:
在一個(gè)維度上的動(dòng)態(tài)改變,大家應(yīng)用得都挺好。但 Sketch 組件在文字換行時(shí)并沒有在縱向上去改變高度。
解釋一下:
按鈕、標(biāo)簽等這類元素,我們通常都會(huì)創(chuàng)建為組件,方便我們管理及調(diào)用。接下來我們把剛才做好的動(dòng)態(tài)按鈕組件化,再來看看它們是否能實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)。
Kitchen
Anima
Sketch
在組件化之后,Anima 出現(xiàn)了未知錯(cuò)誤,按鈕并沒有任何變化。在實(shí)際使用中,sketch58 之前的版本可以正常變化。58 及其之后的版本暫時(shí)會(huì)出現(xiàn)問題,把 Anima 更新到 3.2.2 之后,官方更新說修改了 symbol 之后的 padding bug,但是在實(shí)際使用中并沒有帶來改善。
所以在這里不建議用任何第三方插件去做 symbol,即使 Kitchen 在這里沒有出現(xiàn)什么大的問題,但在實(shí)際操作中的響應(yīng)速度及穩(wěn)定性都比較差。此外 sketch 的更新速度很快,大多插件很難即時(shí)跟上它的更新速度,從而導(dǎo)致一些不可預(yù)知的問題。為了組件的可維護(hù)性、自身安全,請(qǐng)盡量用 sketch 的自帶技能去搭建組件。
按鈕或標(biāo)簽這類組件通常會(huì)多個(gè)同時(shí)出現(xiàn),比如這樣:
這樣:
我們可以通過以下幾種方式快速實(shí)現(xiàn)布局:
Kitchen
Anima
Sketch
其中 Kitchen 和 Anima 可以實(shí)現(xiàn)全自動(dòng)的動(dòng)態(tài)響應(yīng),包括復(fù)制、刪除等操作。而 Sketch 需要手動(dòng)去維護(hù)或者創(chuàng)建為組件后才能實(shí)現(xiàn)全自動(dòng)的動(dòng)態(tài)響應(yīng)。
這里傾向于直接利用 Kitchen 或 Anima,不會(huì)產(chǎn)生不必要的 symbol,但同時(shí)也能提升我們的設(shè)計(jì)效率。對(duì)比 Kitchen 和 Anima,Anima 的響應(yīng)速度更快,功能更豐富,在實(shí)現(xiàn)固定間距的同時(shí)可以保證對(duì)齊方式。具體的應(yīng)用場(chǎng)景,我們后面會(huì)講到。
動(dòng)態(tài)的組件,結(jié)合固定間距可以實(shí)現(xiàn)一系列便捷的操作。接下來我們講一些具體的實(shí)現(xiàn)效果。
基于上面的結(jié)論,我們?cè)谶@里的動(dòng)態(tài)組件都會(huì)用 sketch 的布局功能來搭建。
label 在之前的版本中不需要特殊處理,因?yàn)橛形搽S功能。59 版本之后這個(gè)功能被移除,新的布局可以完全取代它了。這里我們手動(dòng)配置一下水平方向的布局。
注意文本的對(duì)齊方式與布局方向要保持一致。
再利用 「Anima-Padding」/「Kitchen-自動(dòng)排版」 實(shí)現(xiàn)動(dòng)態(tài)布局。
Anima 需要合理編組來實(shí)現(xiàn)
圖標(biāo)解釋
△ Padding(內(nèi)邊距)
△ Stack(堆載)
導(dǎo)航欄也是常用的組件之一。
首先創(chuàng)建「選中」與「未選中」兩種狀態(tài)組件。也可以用一種狀態(tài)(選中狀態(tài))通過控制元素隱藏/顯示、修改文字樣式等來實(shí)現(xiàn)狀態(tài)改變。不過操作比較繁瑣,這里就不推薦了。
這里的選中狀態(tài)需要用到 sketch 的水平布局,短橫線才可以跟隨文字動(dòng)態(tài)改變。
置入建立的組件,確定好間距,再次建立組件,保持水平布局。就可以得到一個(gè)動(dòng)態(tài)的導(dǎo)航欄了
也可以用 Anima/Kitchen 的布局去實(shí)現(xiàn)這個(gè)效果。
再次強(qiáng)調(diào):Anima/Kitchen 的最好不要作為組件使用。
通用性強(qiáng),復(fù)用率高的組件建議用 sketch 的布局去建立組件。
如何把大象放進(jìn)冰箱
這里要實(shí)現(xiàn)的效果是「改變文字寬度,保持文字與右側(cè)的線條間距不變」
方法:
序號(hào)、文字、白色背景成組,并水平「從左向右」布局
這樣文字可以推動(dòng)白色背景變寬,與右側(cè)線條始終維持相同間距。
結(jié)合 sketch 的調(diào)整尺寸(resizing)還可以手動(dòng)改變步驟條的寬度。
表單也可以通過 anima 或者 kitchen 來布局,實(shí)現(xiàn)數(shù)據(jù)的快速增刪。
PS: Anima 的 stack 會(huì)默認(rèn)選一種對(duì)齊方式,出現(xiàn)下列這幾種布局效果(下方左對(duì)齊異常的原因和我組件的搭建方式有關(guān))。
左對(duì)齊
居中對(duì)齊
兩端對(duì)齊
右對(duì)齊
6. switch / radioButton
同樣的,利用 sketch 的布局,還可以創(chuàng)建動(dòng)態(tài)的 switch 和 radiobutton。
方法和之前建立動(dòng)態(tài)按鈕類似,不過需要注意的是:這類 tooltip 會(huì)存在一個(gè)最大寬度,在超出這個(gè)寬度后需要換行處理。但是sketch 的動(dòng)態(tài)維度只有一個(gè)象限(x或y)。這個(gè)時(shí)候當(dāng)超出最大寬度后就需要手動(dòng)去換行并調(diào)節(jié)高度(動(dòng)態(tài)高度,手動(dòng)調(diào)節(jié)寬度,可以依據(jù)文字是否換行來判斷邊距是否正確)。
建議:這里我們可以建立兩個(gè)組件,一個(gè)動(dòng)態(tài)高度,一個(gè)動(dòng)態(tài)寬度,根據(jù)文本量的多少去選擇合適的動(dòng)態(tài)方向。上面換行的按鈕也可以這樣處理。
再多說一句:Anima 可以通過拖動(dòng)寬度來改變文字的對(duì)齊方式(自動(dòng)寬度、自動(dòng)高度),結(jié)合自身的 padding 可以實(shí)現(xiàn)兩個(gè)象限的動(dòng)態(tài)改變。但是出于穩(wěn)定性的考慮,我們不推薦用它來做 symbol。
模塊相對(duì)于簡(jiǎn)單的組件結(jié)合了多種布局方法。
以這個(gè)留言版為例展開說明:
這個(gè)留言版由頭像、name、like、dislike、留言內(nèi)容等 5 個(gè)元素組成。從布局上看可以把頭像、name、like、dislike四個(gè)元素作為一個(gè)部分,留言作為一個(gè)部分。在整體上形成一個(gè)上下動(dòng)態(tài)布局的組件。
頭像和 name 固定于左側(cè);頭像鎖定寬高,name 文本自動(dòng)寬度,布局方式從左向右。
like、dislike編組固定于右側(cè),文本自動(dòng)寬度,布局方式從右向左。
留言部分固定左右間距,文本自動(dòng)高度。這樣我們可以通過拖動(dòng)該區(qū)域的寬度去實(shí)現(xiàn)高度的動(dòng)態(tài)改變。
利用 Anima 的 stack,實(shí)現(xiàn)每個(gè)留言版之間的固定間距。此外,在 stack 里面我們可以選中兩邊對(duì)齊的方式。
讓組內(nèi)留言版的寬度保持一致。
分別建立「左上、上、右上、左、中、右、左下、下、右下」等 9 個(gè)單元格組件。通過(左、上邊框+th+td)的方式也可以,這里不細(xì)說。
每一列單元格分別打組,用 Anima(stack 左右對(duì)齊)或 Kitchen 固定垂直間距(間距為 0),組名 tr。無論是單元格的增減,還是單元格高度的變化,都可以在縱向上動(dòng)態(tài)改變。
對(duì) tr 打組,固定左右間距(間距為 0),實(shí)現(xiàn)表格在水平方向上的動(dòng)態(tài)變化。
利用上面的知識(shí)我們來做一個(gè)相對(duì)復(fù)雜的卡片
要點(diǎn)
具體步驟
從上圖可以看出卡片主要分為三個(gè)部分
對(duì)圖片+標(biāo)題編組,命名「banner」,確定標(biāo)題的文本區(qū)域及動(dòng)態(tài)方向,這里的標(biāo)題我希望它在換行時(shí)往上走。這樣可以把文字定為下方固定。如圖:
對(duì)頭像、名字、標(biāo)簽編組,命名「人物簡(jiǎn)介」。固定頭像大小,固定名字位置。對(duì)標(biāo)簽編組,這里標(biāo)簽應(yīng)該是動(dòng)態(tài)的,從左往右布局。
標(biāo)簽高度固定;人物簡(jiǎn)介寬高固定;
固定人物介紹文本與卡片左右間距以及上邊距
對(duì)「海報(bào)」「人物簡(jiǎn)介」「人物介紹」再次編組,確定組內(nèi)各元素間距。編組和背景確定邊距。
這個(gè)過程剛開始可能是一個(gè)漫長的調(diào)試過程,在熟悉后,會(huì)讓調(diào)試有一個(gè)明確的方向,從而縮短時(shí)間。
不對(duì),工作還沒交付給開發(fā)就不算完成。工作中我會(huì)使用藍(lán)湖把設(shè)計(jì)資源交付給開發(fā)。
結(jié)果
Anima 的布局在上傳藍(lán)湖后,藍(lán)湖上顯示正常,但是 sketch 本地布局統(tǒng)統(tǒng)崩潰了。我不禁長嘆一聲,??!
藍(lán)湖官方解釋「兩個(gè)插件在 Sketch 提供的方法調(diào)用是有沖突的,建議在上傳前關(guān)掉 Anima 插件」。
關(guān)掉 Anima 需要在插件中關(guān)掉后并重啟 sketch 才能生效,不然編組的內(nèi)容依舊會(huì)保留 Anima 特性。
接下來重新總結(jié)一下:
結(jié)合以上內(nèi)容為開發(fā)同事做的一個(gè)上線海報(bào),他們可以只關(guān)注內(nèi)容了。
文章來源:優(yōu)設(shè)
一款產(chǎn)品從0到1的設(shè)計(jì)流程,在進(jìn)入開發(fā)前的所有工作。這篇文章以去年做的一個(gè)小項(xiàng)目為例。
1.了解客戶需求,根據(jù)競(jìng)品產(chǎn)生需求
工具:Axure、Mindmanager、Visio、OmniGraffle、PPT
1.1產(chǎn)品初期模型
1.1.1 競(jìng)品收集(應(yīng)用市場(chǎng)、專業(yè)網(wǎng)站、行業(yè)調(diào)查報(bào)告、搜索引擎、)
在應(yīng)用市場(chǎng)、專業(yè)網(wǎng)站、行業(yè)調(diào)查報(bào)告、搜索引擎中尋找競(jìng)品
輸出:
在產(chǎn)品的潛在目標(biāo)用戶尋找競(jìng)品
對(duì)產(chǎn)品的潛在用戶進(jìn)行挖掘,分析核心功能的其他實(shí)現(xiàn)方法,將功能延展擴(kuò)大可獲得不同層面的競(jìng)品。
輸出:
將過程、操作的碎片化處理來尋找競(jìng)品
將產(chǎn)品的結(jié)構(gòu)、使用過程、操作等一步一步的拆開,根據(jù)每一個(gè)碎片信息來尋找競(jìng)品。
輸出:
1.2競(jìng)品選擇
競(jìng)品選擇中最關(guān)鍵的一步,就是對(duì)競(jìng)品進(jìn)行分類。
1. 功能完全相同的競(jìng)品:找出當(dāng)下產(chǎn)品的核心價(jià)值,評(píng)估與我們?cè)O(shè)計(jì)目的與市場(chǎng)上成型產(chǎn)品的一致性;更快更好地借鑒對(duì)方取得成功的地方;有針對(duì)性地尋找差異化競(jìng)品的方向。
2. 核心功能相似的競(jìng)品:通過以點(diǎn)帶面地挖掘價(jià)值點(diǎn)或者創(chuàng)新點(diǎn),將我們自己的產(chǎn)品做到。功能完全相同是一個(gè)點(diǎn)進(jìn)行縱向思考,然后尋找競(jìng)品;核心功能相似則是多個(gè)點(diǎn),排列組合式地進(jìn)行縱向思考,找到的競(jìng)品更加全面,我們能夠借鑒到的價(jià)值點(diǎn)更多。
3. 功能本質(zhì)相同的競(jìng)品:加深對(duì)待設(shè)計(jì)產(chǎn)品的需求本質(zhì)的理解,通過本質(zhì)相同挖掘需求的核心所在,借此來找到相對(duì)應(yīng)的參照物。該類競(jìng)品,往往需要我們進(jìn)行橫向思考,試圖從別的方面,方向入手,其思維廣度大大增加,有可能從其他領(lǐng)域中得到解決問題的啟示。這類競(jìng)品是最容易發(fā)現(xiàn)亮點(diǎn)和突破的。
輸出:1.功能完全相同的競(jìng)品
壁紙制作:可以將喜歡的圖片制作成精美的壁紙,定制專屬于你的高清壁紙。
2.核心功能相似的競(jìng)品
座右銘壁紙:可選擇背景、輸入文字形成自己的鎖屏壁紙。
3.功能本質(zhì)相同的競(jìng)品
livefun:將視頻轉(zhuǎn)換為壁紙,將多張照片合稱為一個(gè)live photo。
1.3 競(jìng)品拆解
競(jìng)品拆解就是用碎片化方法對(duì)競(jìng)品功能進(jìn)行拆解,并最終形成競(jìng)品的功能列表的過程。
形成功能列表后,對(duì)功能進(jìn)行備注,尋找到競(jìng)品使用過程中的不足,從而超越競(jìng)品。
輸出:
接下來還需要和所有必要的相關(guān)人員就產(chǎn)品以及項(xiàng)目的開展方式進(jìn)行多次頭腦風(fēng)暴。
頭腦風(fēng)暴(Brainstorming)是由美國奧斯提出的,一種激發(fā)集體智慧產(chǎn)生和提出創(chuàng)新設(shè)想的思維方法。頭腦風(fēng)暴(Brainstorming)指一群人(或小組)圍繞一個(gè)特定的興趣或領(lǐng)域,進(jìn)行創(chuàng)新或改善,產(chǎn)生新點(diǎn)子,提出新辦法。
頭腦風(fēng)暴可能帶來一套啟動(dòng)計(jì)劃、一個(gè)精簡(jiǎn)的框架和一系列比較早期的概念圖以及模型。
頭腦風(fēng)暴如下圖所示:
2.確定需求
2.1產(chǎn)品定位及如何正確描述需求
前面我們已經(jīng)講述了怎樣搭建初步產(chǎn)品模型,通過梳理產(chǎn)品模型,可以清楚地了解應(yīng)該如何定位一個(gè)產(chǎn)品。產(chǎn)品定位是需求收集的方向。
用戶需求主要包含三個(gè)要素:目標(biāo)用戶、使用場(chǎng)景、用戶目標(biāo)。
經(jīng)過對(duì)產(chǎn)品定位的梳理,就明確了產(chǎn)品的目標(biāo)用戶群體,接下來就可以進(jìn)行需求的收集、分析活動(dòng)了,總體流程包括需求收集、需求分析和篩選,需求優(yōu)先級(jí)排序幾部分。
輸出:
產(chǎn)品定位:以用戶產(chǎn)出內(nèi)容為主的可個(gè)性化推送壁紙應(yīng)用。
用戶場(chǎng)景描述:
陶娟平時(shí)喜歡根據(jù)心情更換不同風(fēng)格的壁紙,但是每次找壁紙都讓她十分頭疼,很難找到有個(gè)性又好看的壁紙(都是用戶制作上傳的壁紙作品)。
陶娟打開8樓壁紙app,登陸后填寫了她的個(gè)性偏好,系統(tǒng)根據(jù)她的喜好個(gè)性化推送壁紙。陶娟選了一款壁紙,還可以看到同時(shí)和她使用同一款壁紙的網(wǎng)友。
2.2需求收集的途徑
1.用戶場(chǎng)景畫像:根據(jù)之前的產(chǎn)品定位和使用場(chǎng)景用戶畫像文檔分析產(chǎn)出需求
2.競(jìng)品分析:找到同類競(jìng)爭(zhēng)產(chǎn)品,深入體驗(yàn)競(jìng)品功能
3.頭腦風(fēng)暴:可以集結(jié)產(chǎn)品經(jīng)理、設(shè)計(jì)師、運(yùn)營、市場(chǎng)、開發(fā)、進(jìn)行頭腦風(fēng)暴,圍繞一個(gè)特定的話題進(jìn)行討論
4.用戶反饋
5.數(shù)據(jù)分析
輸出:
2.3需求分析和篩選
在需求收集過后,已經(jīng)有很多的被選需求了。
如何分析和篩選需求呢?
1.篩掉明顯不合理的需求
哪些是明顯不合理的需求?比如當(dāng)下技術(shù)不可能實(shí)現(xiàn)的或明顯意義不大的,投入產(chǎn)出比低的、無匹配的產(chǎn)品使用場(chǎng)景、明顯不合理的需求等
2.做需求分析
把明顯不合理的需求排除后,就需要一個(gè)一個(gè)對(duì)剩下的需求進(jìn)行分析。首先要了解需求的三個(gè)分類:用戶描述的需求、用戶實(shí)際想要的需求、用戶的潛在需求,這是三件不同的事情,卻有著千絲萬縷的聯(lián)系。我們需要通過用戶描述的需求,找到用戶實(shí)際的需求,再挖掘用戶潛在的需求。
3.需求做減法
有時(shí)候決定不做什么比決定做什么要更重要,產(chǎn)品的需求是無上限的,大量的堆積需求,會(huì)使產(chǎn)品非常臃腫,毫無特色,還會(huì)導(dǎo)致工期過長,拖慢了產(chǎn)品推出市場(chǎng)的進(jìn)度,對(duì)產(chǎn)品百害而無一益。因此,應(yīng)該傾向于做“輕產(chǎn)品”,學(xué)會(huì)做需求的減法。
這就涉及接下來需要討論的問題,如何判斷需求的優(yōu)先級(jí)。
輸出:篩選后的需求列表
2.4需求的優(yōu)先級(jí)
需要對(duì)所有的需求定義一下優(yōu)先級(jí),優(yōu)先級(jí)高的需求優(yōu)先開發(fā),優(yōu)先級(jí)低的需求延遲開發(fā)。
輸出:
2.5 輸出產(chǎn)品功能圖和功能需求列表
用戶需求列表確定之后,先以產(chǎn)品功能的形式展現(xiàn)出來,產(chǎn)品功能圖可以直觀的看出產(chǎn)品的初步功能架構(gòu)。
輸出:產(chǎn)品功能圖
功能需求列表的價(jià)值,一是在于幫助產(chǎn)品經(jīng)理理清思路,二是在于幫助項(xiàng)目團(tuán)隊(duì)的其他成員了解產(chǎn)品功能需求,讓他們提前做好相關(guān)準(zhǔn)備。
輸出:功能需求列表
3.產(chǎn)品架構(gòu)
3.1 產(chǎn)品功能架構(gòu)
結(jié)合之前的市場(chǎng)調(diào)研及產(chǎn)品路徑規(guī)劃,梳理了一下產(chǎn)品架構(gòu)的大模塊
輸出:產(chǎn)品功能架構(gòu)
3.2 流程圖的規(guī)范
流程圖有時(shí)也稱作輸入-輸出圖,某種程度上來說,流程圖是一種溝通性質(zhì)的圖形化語言。一般會(huì)使用一些標(biāo)準(zhǔn)符號(hào)代表某些類型的動(dòng)作,如判斷用菱形框表示,具體的操作行為、活動(dòng)用方框表示,開始和結(jié)束用圓角矩形框表示。
3.3 確定核心功能流程圖
首先我們要設(shè)計(jì)的是產(chǎn)品的核心功能流程,例如登陸的流程就需要前期設(shè)計(jì)好,綁定手機(jī)號(hào)登陸還是直接微信登陸。登陸的流程會(huì)對(duì)后期的功能產(chǎn)生影響。
輸出:功能流程圖
做好了核心功能的流程圖后,我們需要對(duì)app主干做一個(gè)流程圖。保證每一個(gè)功能都可以形成閉環(huán)。
3.4 評(píng)審與確認(rèn)
評(píng)審主要是讓業(yè)務(wù)部門和開發(fā)部門參與,好的流程圖具備清晰易懂、簡(jiǎn)單明了、完整準(zhǔn)確的特點(diǎn)
4. 原型設(shè)計(jì)
4.1 什么是產(chǎn)品原型
產(chǎn)品原型是設(shè)計(jì)方案的表達(dá),是產(chǎn)品經(jīng)理、交互設(shè)計(jì)師的重要產(chǎn)出物之一,也是項(xiàng)目團(tuán)隊(duì)的其它成員(尤其是設(shè)計(jì)師、開發(fā)人員)的重要參考和評(píng)估的依據(jù)。
4.2 低保真產(chǎn)品原型
首先我們要根據(jù)產(chǎn)品架構(gòu)畫出初步的頁面,也就是低保真產(chǎn)品原型。
這樣的原型圖有幾個(gè)好處:
可以快速產(chǎn)出:有時(shí)候一個(gè)需求的開發(fā)周期很短,低保真原型可以快速滿足同事的時(shí)間要求。
修改成本低:一個(gè)產(chǎn)品策劃很可能會(huì)被修改很多次,低保真的原型修改起來很方便。
輸出:低保真原型圖
4.3 高保真產(chǎn)品交互原型
工具:axure、ai、ps
高保真產(chǎn)品原型,則是高功能性、高互動(dòng)性的原型設(shè)計(jì),是忠實(shí)展示產(chǎn)品功能、界面元素、功能流程的一種表現(xiàn)手段。
高保真的好處:
便于梳理產(chǎn)品細(xì)節(jié):制作高保真原型的過程中可以讓產(chǎn)品經(jīng)理提前發(fā)現(xiàn)產(chǎn)品潛藏的各種問題,提前處理風(fēng)險(xiǎn)。
更容易讓其他成員了解產(chǎn)品設(shè)計(jì):有時(shí)候簡(jiǎn)單的線框圖無法讓別人想象出你要做的事情,也不清楚你要放的是哪幾個(gè)字段,而高保真原型就可以。
相對(duì)而言,劣勢(shì)就是制作周期比較漫長,涉及到產(chǎn)品流程的修改,那基本原型就得回爐重造一遍。所以高保真原型可以做一些核心頁面,不重要的頁面可以后期慢慢完善。
輸出:動(dòng)態(tài)交互稿
5. 視覺設(shè)計(jì)
工具:Sketch、Ai
在產(chǎn)品0到1時(shí)候視覺評(píng)審,會(huì)花大量時(shí)間去討論產(chǎn)品的設(shè)計(jì)風(fēng)格和主配色,在確定視覺稿沒有交互問題后,然后就是討論視覺設(shè)計(jì)稿的細(xì)節(jié)。在產(chǎn)品功能迭代的時(shí)候,評(píng)審的都是整體視覺風(fēng)格的繼承性和視覺稿的細(xì)節(jié)。例如對(duì)交互設(shè)計(jì)的理解是否到位,邏輯是否正確,視覺層次是否正確等。
5.1 設(shè)計(jì)組件規(guī)范
5.1.1 為什么做組件規(guī)范
1.保證產(chǎn)品風(fēng)格統(tǒng)一
每個(gè)設(shè)計(jì)師都有自己的審美和風(fēng)格,產(chǎn)品迭代可能是不同的設(shè)計(jì)師來負(fù)責(zé)項(xiàng)目,但是產(chǎn)品的風(fēng)格必須保證是統(tǒng)一的,所以就需要一個(gè)規(guī)范性的文件來作為設(shè)計(jì)標(biāo)準(zhǔn)。
2.提升團(tuán)隊(duì)效率
在sketch里,有一個(gè)好的組件庫,設(shè)計(jì)師就不用重復(fù)去改每一個(gè)頁面上的圖標(biāo)。只需要改動(dòng)一個(gè)就能同步頁面上所有的圖標(biāo)。
3.打磨細(xì)節(jié)體驗(yàn)
在產(chǎn)品長期迭代的過程中,對(duì)每一個(gè)元素都需要對(duì)其場(chǎng)景、狀態(tài)考慮清楚。所以在整理過程中,經(jīng)常會(huì)發(fā)現(xiàn)以前沒有注意到的問題并優(yōu)化。
5.1.2 組件規(guī)范內(nèi)容和分類
不同的項(xiàng)目的規(guī)范內(nèi)容都是不同的,我們需要明確規(guī)范內(nèi)容的分類有哪些??梢韵却_定大體的規(guī)范內(nèi)容,在頁面完善的過程中也不斷的完善規(guī)范。
iOS的設(shè)計(jì)尺寸建議使用一倍圖375*667的尺寸進(jìn)行設(shè)計(jì)。因?yàn)檫@和安卓的常用尺寸360*640的誤差很小。安卓和iOS可以共用字體、圖標(biāo)和間距??梢愿臃奖憷镒龊媒y(tǒng)一的設(shè)計(jì)規(guī)范。
輸出:
文章來源:站酷
運(yùn)營類活動(dòng)是在某一段時(shí)間內(nèi)進(jìn)行的,有明確業(yè)務(wù)目標(biāo)(業(yè)務(wù)轉(zhuǎn)化、品牌傳播)及營銷群體,依賴游戲化手段帶來優(yōu)秀用戶體驗(yàn),從而獲得成功的一類活動(dòng)。
1. 生命周期短
運(yùn)營類活動(dòng)生命周期較短,常在某一段時(shí)間(可能是周期性的),一般跟隨時(shí)節(jié)熱點(diǎn)或者運(yùn)營節(jié)奏來進(jìn)行。較短的生命周期給設(shè)計(jì)、開發(fā)、數(shù)據(jù)等帶來較大挑戰(zhàn),設(shè)計(jì)程式化提供基本設(shè)計(jì)思路,組件化降低設(shè)計(jì)成本。
2. 業(yè)務(wù)目標(biāo)明確
運(yùn)營類活動(dòng)一般以產(chǎn)品營銷、品牌運(yùn)營為目標(biāo),發(fā)放各類優(yōu)惠券大眾目標(biāo)用戶,從而帶來業(yè)務(wù)轉(zhuǎn)化,或者營銷企業(yè)品牌,比如常見的年底 h5。
3. 有一定故事場(chǎng)景及氛圍
運(yùn)營類活動(dòng)需要較強(qiáng)的故事場(chǎng)景。良好的場(chǎng)景設(shè)計(jì)、氛圍營造可以帶來沉浸式的用戶體驗(yàn),與用戶建立情感共鳴。從而提升用戶參與度、帶來好的業(yè)務(wù)轉(zhuǎn)化。
故事場(chǎng)景結(jié)合時(shí)節(jié)熱點(diǎn),同時(shí)考慮活動(dòng)需要營造的體感氛圍。
4. 人群細(xì)分
運(yùn)營類活動(dòng)的特征在發(fā)起之初就有特殊的運(yùn)營目的和特定特征的用戶群體。為實(shí)現(xiàn)最優(yōu)的業(yè)務(wù)轉(zhuǎn)化,需要在設(shè)計(jì)之初明確活動(dòng)覆蓋的用戶人群。同時(shí)在各個(gè)環(huán)節(jié)都能考慮到特定用戶群體的不同需求,尤其是在業(yè)務(wù)轉(zhuǎn)化的過程中,好的人群細(xì)分往往帶來事半功倍的效果。
5. 游戲化
引入游戲機(jī)制及游戲元素。
運(yùn)營類活動(dòng)結(jié)合時(shí)節(jié)熱點(diǎn),通過富有故事性的視覺傳達(dá)(插圖、動(dòng)效、聲音等設(shè)計(jì)元素)帶給用戶沉浸式的體驗(yàn),與用戶建立情感共鳴,從而有效的鼓勵(lì)用戶行為。
沉浸體驗(yàn)的營造對(duì)設(shè)計(jì)師提出了更高要求,可以從活動(dòng)設(shè)計(jì)的故事感、用戶代入感、產(chǎn)品互動(dòng)感、主體差異感幾個(gè)方面來思考入手。
運(yùn)營類活動(dòng)中廣泛應(yīng)用了游戲化機(jī)制和元素,它們是活動(dòng)成功的有效保障。設(shè)計(jì)時(shí)綜合考慮業(yè)務(wù)及用戶需求,從用戶動(dòng)機(jī)激勵(lì)、行為引導(dǎo)的角度出發(fā),將運(yùn)營活動(dòng)游戲化??梢栽诨顒?dòng)參與深度的各個(gè)階段引導(dǎo)用戶操作,從而達(dá)成活動(dòng)目標(biāo)。以下列舉了運(yùn)營活動(dòng)中常見的用戶動(dòng)機(jī),后續(xù)我會(huì)從用戶參與路徑出發(fā),盡可能詳細(xì)的描述在用戶參與的每一個(gè)階段起作用的為動(dòng)機(jī),以及實(shí)現(xiàn)的手段。
大獎(jiǎng)帶來的誘因效應(yīng)
動(dòng)輒百萬的大獎(jiǎng)獎(jiǎng)勵(lì)幾乎已經(jīng)成為運(yùn)營活動(dòng)的標(biāo)配,在動(dòng)機(jī)理論中,用戶行為的產(chǎn)生來源于需要,需要導(dǎo)致內(nèi)驅(qū)力,引發(fā)行為,從而推動(dòng)用戶實(shí)現(xiàn)特定的目標(biāo)。當(dāng)目標(biāo)的誘惑力很大時(shí),即使沒有內(nèi)部驅(qū)動(dòng)也能激發(fā)行為。這也是眾多運(yùn)營類活動(dòng)大獎(jiǎng)存在的理由。
占便宜的心理
愛占便宜是人的本性,從心理學(xué)角度講,占便宜就像是額外得到的驚喜和獎(jiǎng)賞,可以讓人產(chǎn)生滿足感!用戶在這種心理作用下,會(huì)為了小利益去做出設(shè)計(jì)預(yù)設(shè)的行為,將業(yè)務(wù)需求設(shè)置在‘占便宜’的路徑中可有效提高參與、轉(zhuǎn)化率。比如在設(shè)計(jì)中用中獎(jiǎng)動(dòng)態(tài)彈幕來強(qiáng)化用戶參與的動(dòng)機(jī),提高參與率。
有趣和好奇心
人天生具有好奇心,它幫助我們適應(yīng)不斷變化的環(huán)境、發(fā)現(xiàn)新的資源,是一種「無法抗拒」的行為動(dòng)機(jī)。在運(yùn)營活動(dòng)中,用戶會(huì)被有趣的活動(dòng)頁面,未知的規(guī)則設(shè)計(jì)所吸引,從而開始主動(dòng)「探索」。這也是用戶參與的動(dòng)機(jī)之一,設(shè)計(jì)中精致的 UI、有效的頁面信息傳達(dá)保證了用戶好奇的有效性。
即時(shí)反饋及階段性成就
「即時(shí)反饋」是沉迷現(xiàn)象發(fā)生的原因。學(xué)習(xí)之所以痛苦正是因?yàn)槠浞答佹溌诽L,你只有在考試或者應(yīng)用到所學(xué)知識(shí)時(shí)才能獲得反饋,還有可能是負(fù)面的。在活動(dòng)設(shè)計(jì)中,每一次用戶操作都會(huì)有及時(shí)、細(xì)膩的反應(yīng),可以給用戶帶來精神愉悅,同時(shí)設(shè)計(jì)的階段性成就又給用戶帶來成就感,用戶會(huì)不知不覺中在活動(dòng)中越走越遠(yuǎn)。
隨機(jī)獎(jiǎng)勵(lì)的多巴胺效應(yīng)
人類的本能熱衷于冒險(xiǎn),隨機(jī)的、不確定的獎(jiǎng)勵(lì)能夠刺激大腦分泌多巴胺,帶來愉悅感,從而刺激用戶行為的重復(fù)。在活動(dòng)設(shè)計(jì)中,常用到這一理論,比如抽獎(jiǎng)機(jī)制。
所有權(quán)與擁有感
當(dāng)用戶感到他們擁有或控制某樣?xùn)|西時(shí),會(huì)自然而然的強(qiáng)化它的屬性、發(fā)揮其價(jià)值。尤其是通過適當(dāng)?shù)母冻龊妥陨砼?,用戶還可能不合理的高估其價(jià)值。在活動(dòng)設(shè)計(jì)中,常使用戶通過易實(shí)現(xiàn)的行為獲得權(quán)益,通過「幸苦操作」強(qiáng)化了擁有感,提升其心理價(jià)值,從而促進(jìn)用戶對(duì)權(quán)益的使用。
稀缺性與用戶渴望
稀缺性的心理學(xué)原理在于人們想要獲得某樣?xùn)|西的原因僅僅是它太罕見,或者無法立刻獲得。它破滅了人們對(duì)情況的控制感,人們會(huì)為了重獲控制而采取行動(dòng)。設(shè)計(jì)時(shí),可以利用這種心理鼓勵(lì)用戶做出期望的行為。常見的有時(shí)間限制、權(quán)利限制等。
使命感/社交影響/損失規(guī)避……
運(yùn)營類活動(dòng)中數(shù)據(jù)和策略思維是保證活動(dòng)效果最大化的有效手段。活動(dòng)需求提出時(shí),即考慮可能的參與用戶細(xì)分;活動(dòng)開始時(shí),考慮引流途徑和引流方式、物料的差異化;活動(dòng)進(jìn)行時(shí),根據(jù)用戶細(xì)分策略化任務(wù)推送,根據(jù)埋點(diǎn)數(shù)據(jù)監(jiān)測(cè)積極調(diào)整相關(guān)設(shè)計(jì)元素。事無巨細(xì)才能確?;顒?dòng)成功。
文章來源:優(yōu)設(shè)
最近在工作時(shí)發(fā)現(xiàn)了一件很有意思的事情,不知從何開始,國內(nèi)外的設(shè)計(jì)需求分化非常明顯。國內(nèi)的公司在選擇產(chǎn)品平臺(tái)時(shí),從幾年前的 PC 端網(wǎng)站,到如今已有大半的客戶考慮從小程序做起了。然而國外的創(chuàng)業(yè)者仍然以網(wǎng)頁為主,要說變化,大抵是在需求中多要求了響應(yīng)式設(shè)計(jì),以更好地適應(yīng)桌面與移動(dòng)雙端。
所以,今天我們無論坐在這里怎樣討論小程序的優(yōu)劣得失,都不可否認(rèn)的是,小程序確實(shí)給國內(nèi)市場(chǎng)帶來了顯著的影響,而且人們已經(jīng)逐漸接受,在產(chǎn)品初期,小程序是一個(gè)值得考慮的平臺(tái)。
但是到底小程序的市場(chǎng)是一片大好,還是只是一場(chǎng)危機(jī)四伏的狂歡?我將在本文中盡量以客觀的角度闡述,希望能夠給到各位設(shè)計(jì)師一些思考的方向。
同時(shí),這幾個(gè)月來我參考了近 100 款小程序的設(shè)計(jì)模式,保留了500 張截圖和超過 10 分鐘的錄屏作為分析素材,來幫助那些想要邁入職場(chǎng)的設(shè)計(jì)師們,更好的上手小程序設(shè)計(jì),不為信息和技術(shù)所桎梏。
小程序和App的區(qū)別
1. 開發(fā)成本、開發(fā)周期不一致
那么我們作為設(shè)計(jì)師,第一步需要了解的就是,究竟小程序和 App 之間有什么區(qū)別?作為設(shè)計(jì)師,應(yīng)該注意哪些問題,這將是本篇文章前半部分的主要內(nèi)容。
從開發(fā)成本看,小程序和 APP 有較大的區(qū)別。APP 開發(fā)需要兩個(gè)版本來適應(yīng)不同操作系統(tǒng)的手機(jī),產(chǎn)品開發(fā)周期長,開發(fā)人力投入多,因此開發(fā)成本高。而小程序只需要根據(jù)騰訊提供的開發(fā)平臺(tái)就能進(jìn)行開發(fā),無需考慮手機(jī)操作系統(tǒng)的區(qū)別,一次開發(fā)就能適配所有的機(jī)型,開發(fā)周期短,開發(fā)人力投入少,因此開發(fā)成本低。
一款 App 從提出需求到上線,通常的開發(fā)周期是 321 原則,即開發(fā) 3 個(gè)月,測(cè)試調(diào)整 2 個(gè)月,試運(yùn)行 1 個(gè)月。而小程序開發(fā)周期在2 周左右,甚至功能簡(jiǎn)單的 10 天內(nèi)即可上線使用,所以是一種相對(duì)快速的模式。
小程序由于依附于微信,所以我們其實(shí)只需要制作一稿設(shè)計(jì)便可適配絕大多數(shù)的手機(jī),而不像 App 那樣,需要針對(duì)不同的手機(jī)進(jìn)行不同的適配。
事實(shí)上這是小程序相對(duì)于 App 的一個(gè)巨大的優(yōu)勢(shì)。在開發(fā) App 時(shí),很多企業(yè)在初創(chuàng)期,由于成本問題不得不選擇到底是放棄Android 用戶還是 IOS 用戶。然而小程序只需要設(shè)計(jì)+開發(fā)一次的成本,在理論上就獲得了全部微信用戶接觸到產(chǎn)品的機(jī)會(huì)。所以從這個(gè)角度考慮,小程序是非常節(jié)省成本的一種模式。
2. App需要設(shè)置大量的數(shù)據(jù)埋點(diǎn),而小程序則不需要
微信第三方后臺(tái)已經(jīng)集合了諸多的數(shù)據(jù)供小程序方查看,在初級(jí)階段,這些數(shù)據(jù)已經(jīng)足夠產(chǎn)品作為更迭的基礎(chǔ)了。
沒有做過小程序的朋友可能不太了解,微信提供的不僅僅是數(shù)量全面的埋點(diǎn),而是可以自定義埋點(diǎn)位置以及爬取數(shù)據(jù)類型的系統(tǒng)。甚至還自帶一些簡(jiǎn)單的分析系統(tǒng),幫助運(yùn)營人員更好的掌握小程序的總體運(yùn)營情況。
除了已經(jīng)封裝好的數(shù)據(jù)監(jiān)控點(diǎn),運(yùn)營人員還可以自定義分析事件,這幾乎是一個(gè)可以達(dá)到「營銷平臺(tái)」級(jí)別的分析系統(tǒng)了。
同時(shí),簡(jiǎn)單明了的看版系統(tǒng),也非常節(jié)省業(yè)務(wù)人員的數(shù)據(jù)清洗成本,的避免了開發(fā)人員由于機(jī)械重復(fù)性的埋點(diǎn)工作而導(dǎo)致的主觀漏采與錯(cuò)采現(xiàn)象,這也是小程序的優(yōu)勢(shì)所在。
3. 小程序有依附于微信的信息共享機(jī)制
小程序與微信形成的信息共享,可以非常方便的達(dá)到獲客目的。例如注冊(cè)登錄機(jī)制,我們幾乎不需要自己手動(dòng)在小程序上進(jìn)行注冊(cè)登錄。直接通過 Union ID 授權(quán)的方式,即可讓用戶用統(tǒng)一的注冊(cè)賬戶用遍所有的小程序。據(jù)測(cè),用戶進(jìn)入小程序時(shí),同意微信手機(jī)號(hào)碼授權(quán)的轉(zhuǎn)化率大致在 35%,相對(duì)來說是一個(gè)非??捎^的轉(zhuǎn)化率了。
除此之外,微信給小程序廠商提供了諸多接口,不僅僅是方便了小程序廠商,信息風(fēng)向更多的是能夠讓用戶更加快速便捷的在小程序中解決問題。這一塊內(nèi)容會(huì)在之后章節(jié)中詳解。
1. 具有社交裂變屬性
這類具有社交因子的小程序天生適合生存在微信的土壤中,通過微信龐大的社交流量助力優(yōu)質(zhì)社交小程序成為市場(chǎng)的爆品。比如拼多多、蘑菇街利用拼團(tuán)實(shí)現(xiàn)社交電商的突圍。比如小年糕+通過社交場(chǎng)景實(shí)現(xiàn)低成本快速獲客,從而獲得很好的傳播效果,實(shí)現(xiàn)短時(shí)間的大量用戶增長 。
2. 垂直領(lǐng)域頭部
針對(duì)細(xì)分市場(chǎng)的小程序也容易受到傳播,比如汽車類小程序有多個(gè)排名靠前,用戶已經(jīng)把小程序當(dāng)做選車、購車、用車的重要入口,因?yàn)閷儆诘皖l應(yīng)用,沒有必要下載一個(gè) app,如果切入的早,小程序場(chǎng)景的便利性就容易使其升到頭部。
3. 高頻場(chǎng)景喚醒產(chǎn)品
這些場(chǎng)景本身高頻發(fā)生且原有的體驗(yàn)流程存在資源損耗,小程序優(yōu)化解決了很多商家和用戶的痛點(diǎn)。 比如 KFC 小程序解決等位排隊(duì)、點(diǎn)餐、買單付費(fèi)、發(fā)放優(yōu)惠券、客戶消費(fèi)分析、基于 LBS 的信息推送等問題,比如視頻、直播、K 歌等娛樂小程序因?yàn)檩p應(yīng)用的特點(diǎn)給了用戶娛樂多樣化的選擇,并且用戶可以直接將有趣的視頻、 直播等通過微信快速分享給好友,實(shí)現(xiàn)比 App 更好的傳播效果。
4. 不適合作為小程序的產(chǎn)品-工具類產(chǎn)品
相反,我們所推崇的工具類產(chǎn)品,在企業(yè)的角度來說,卻是最不適合做成小程序的產(chǎn)品。張小龍所賦予小程序的意義就是:「有用,不會(huì)給用戶造成打擾」,所以其實(shí)說實(shí)話,基于微信生態(tài)圈工具類的小程序比 App 更容易爆發(fā)。
但是這只是用戶增量提高,工具類 App 短暫的爆發(fā)卻很難維持存量。做工具類小程序和工具類 App 一樣,變現(xiàn)周期會(huì)非常長。從用戶體驗(yàn)的角度來說,微信小程序里面的工具比起 App 的用戶體驗(yàn)會(huì)好很多。
其實(shí)在張小龍的嘴里,我們已經(jīng)得到了答案。他對(duì)于小程序的幾項(xiàng)基本原則已經(jīng)足以說明問題,比如其中的一項(xiàng)就是「用完即走」,其實(shí)這不僅僅是張小龍給到的小程序的定義,而是小程序本身擁有的屬性。在現(xiàn)代這個(gè)時(shí)代,用戶的注意力被越來越分散,我們很多的設(shè)計(jì)其實(shí)都是為了緩解用戶焦慮。
在小程序的官方文檔中也提到了相關(guān)的元素,在現(xiàn)代社會(huì),大家拿到一款新的產(chǎn)品之后都喜歡自己研究而非去研讀說明書。但是實(shí)際上,小程序的官方文檔是非常值得閱讀的內(nèi)容,里面的規(guī)范內(nèi)容目的不僅僅是為了讓小程序整體顯得整齊劃一,更多的內(nèi)容是為了保證小程序能夠有良好的用戶體驗(yàn)。從而增加用戶的留存率。
所以,本篇文章的主要內(nèi)容是在「小程序官方文檔」的基礎(chǔ)之上,來探索更多的小程序設(shè)計(jì)的規(guī)律,建議大家在閱讀之前,可以先自行閱讀小程序官方文檔,再來看本文,才會(huì)有更多收獲。
App 的功能點(diǎn)可以很多,但是小程序的用戶路徑必須單一。
當(dāng)然,這句話只符合想要入局的中小型企業(yè),在建立小程序的初期,沒有額外的流量渠道,那么最好的留存用戶的方式就是讓用戶能夠的解決問題,對(duì)應(yīng)到小程序的框架設(shè)計(jì),即是簡(jiǎn)短的用戶路徑。
不止中小企業(yè)如此,也有很多大型企業(yè),開始從「復(fù)合型小程序」轉(zhuǎn)向小程序矩陣,目的就是為了給用戶提供專一的體驗(yàn)路徑。因?yàn)閺?PC 到 APP,再到小程序,用戶場(chǎng)景和時(shí)間在被不斷切碎,產(chǎn)品功能也要不斷簡(jiǎn)化,更專注,才更能吸引用戶進(jìn)行完整的體驗(yàn)用戶流程。
設(shè)計(jì)一次性引導(dǎo)機(jī)制。
在用戶第一次使用小程序時(shí),一些必要的提示是提升用戶體驗(yàn)的關(guān)鍵因素。
減少特殊的交互模式的設(shè)計(jì),必要時(shí)要進(jìn)行足夠的引導(dǎo)。
運(yùn)用用戶更熟悉的交互模式,更能讓用戶擁有良好的體驗(yàn),更快速的完成整個(gè)路徑與流程。
同樣這個(gè)原理只適用于剛剛布局小程序的企業(yè),而不適用于大廠的小程序設(shè)計(jì)。但其實(shí)在 App 中,為了凸顯品牌調(diào)性,動(dòng)態(tài)元素和裝飾性元素是一定會(huì)出現(xiàn)的。品牌調(diào)性幾乎是 App 設(shè)計(jì)的一個(gè)非常重要的環(huán)節(jié)。
這并不意味著小程序中的品牌調(diào)性不重要,而是說在某些環(huán)節(jié)中,良好的交互體驗(yàn)比品牌調(diào)性重要的多。
即減少頁面跳轉(zhuǎn),能不跳轉(zhuǎn)就減少跳轉(zhuǎn),跳轉(zhuǎn)新頁面會(huì)增加用戶適應(yīng)新頁面元素的成本,同時(shí)小程序的頁面層級(jí)過多,會(huì)讓用戶感覺到繁瑣焦慮。這個(gè)方法可以縮短用戶觸達(dá)產(chǎn)品的路徑,也是小程序用來減少用戶干擾的重要手段。
這樣做的好處就是讓用戶對(duì)小程序的架構(gòu)有更全面的理解。用戶在較少的跳轉(zhuǎn)路徑中,始終清晰的知道自己處在小程序中的位置。這也是增加用戶對(duì)于產(chǎn)品安全感的一種方式。
在小程序初期,還未擁有懸浮窗功能。這個(gè)時(shí)候的表單輸入對(duì)于用戶和產(chǎn)品來說簡(jiǎn)直是噩夢(mèng)。比如用戶需要輸入一個(gè)信息,而這個(gè)信息儲(chǔ)存在手機(jī)中,那么用戶就需要中斷當(dāng)前操作去查看信息。再通過其他的方式回到目前的操作填寫信息。在此過程中,很有可能由于操作過于繁瑣而喪失客戶。
即使增加了懸浮窗功能,用戶輸入信息的操作干擾也還是存在,所以能夠盡量避免信息輸入就要避免,以點(diǎn)選、拖動(dòng)等手勢(shì)操作代替文字輸入。將熱門的、常用的、歷史信息前置,減少用戶的重復(fù)勞動(dòng)。
在其他的小程序?qū)Ρ戎?,我們一樣可以發(fā)現(xiàn)類似的在用戶體驗(yàn)上的差別。
有一次一個(gè)朋友來向我咨詢關(guān)于他司電商小程序轉(zhuǎn)化率如何提高的問題,我便運(yùn)用了這個(gè)理論,去給他們的產(chǎn)品做了一個(gè)梳理,最后切實(shí)的獲得了數(shù)據(jù)上可觀的提高。
小程序官方文檔里花了大量的篇幅去闡述給予用戶「加載狀態(tài)」與「完成狀態(tài)」反饋的重要性,而反饋設(shè)計(jì)的好壞,對(duì)留存率存在著至關(guān)重要的影響。除了「微信官方文檔」中提到的「啟動(dòng)頁加載」「頁面下拉刷新加載」「頁面內(nèi)加載」「模態(tài)加載」「局部加載」「全局加載」外。
另外一種加載狀態(tài)同樣至關(guān)重要,即「預(yù)加載狀態(tài)」。預(yù)加載是一個(gè)老生常談的話題,如果一款產(chǎn)品沒有設(shè)計(jì)預(yù)加載,會(huì)給用戶心理造成很強(qiáng)的不安全感,這點(diǎn)在小程序尤為明顯,所以設(shè)計(jì)預(yù)加載場(chǎng)景是提高用戶體驗(yàn)至關(guān)重要的因素,尤其針對(duì)一些網(wǎng)絡(luò)狀況不好的用戶。
其中以百度云盤的尤為出色,他的預(yù)加載模式是動(dòng)畫效果呈現(xiàn)的,可以讓用戶清晰的了解數(shù)據(jù)正在加載。
如果沒有設(shè)計(jì)預(yù)加載,可以自行設(shè)計(jì)加載模塊,或者用微信提供的通用加載模塊,也是一個(gè)退而求其次的選擇。
而最壞的做法,就是完全不設(shè)計(jì)任何用于提醒的內(nèi)容,這種極差的用戶體驗(yàn)幾乎會(huì)全盤勸退用戶。
想必大家在看完了上述內(nèi)容后,已經(jīng)對(duì)小程序有了一個(gè)初步的概念,上述內(nèi)容主要是一些理論層面對(duì)于小程序設(shè)計(jì)的分析,那么這個(gè)章節(jié)主要就是通過大量的線上案例和截圖來講述一些小程序設(shè)計(jì)的規(guī)律。
小程序的「即用即走」的機(jī)制,同時(shí)也促成了各個(gè)小程序的形成了一套應(yīng)對(duì)機(jī)制,其中之一就是引導(dǎo)收藏小程序機(jī)制,目前這個(gè)機(jī)制幾乎成為了商業(yè)小程序的標(biāo)配,大體分為三種類型:
我們?cè)谠O(shè)計(jì)小程序時(shí)可以酌情參考這三種形式,簡(jiǎn)單來說,用戶粘性高,用戶群體年齡偏高可以采用引導(dǎo)型,反之可以嘗試彈窗型和占位型兩種形式。
類似于「引導(dǎo)收藏小程序」,「導(dǎo)流公眾號(hào)/App」也是只有小程序中存在的一種模式。不同于「引導(dǎo)收藏小程序」,「導(dǎo)流公眾號(hào)/App」的方法可謂是百花齊放,不過渠道卻只有一個(gè),就是客服會(huì)話系統(tǒng)。
在客服會(huì)話中回復(fù)「1」。
在客服會(huì)話中,回復(fù)「小程序」。
客服會(huì)話中的拇指圖設(shè)計(jì)非常有講究,一般的拇指圖設(shè)計(jì)都分為兩段文本,字號(hào)較大的文本用來在上述步驟二中提醒用戶點(diǎn)擊,而字號(hào)較小的文本則是用來在步驟三中提醒用戶點(diǎn)擊鏈接/掃碼來下載 App。
一些小程序會(huì)有彈窗提醒我們關(guān)注公眾號(hào),但為什么我們不能通過這種簡(jiǎn)單的方式讓用戶關(guān)注公眾號(hào),而要用跳轉(zhuǎn)客服這么麻煩的方法。很簡(jiǎn)單,仔細(xì)觀察就可以發(fā)現(xiàn)這是微信的廣告投放(看彈窗的左上角的標(biāo)簽)。小程序即使接了廣告,也只能給別的公眾號(hào)導(dǎo)流。
雖然說小程序有辦法將用戶引導(dǎo)到 App 中,但是小程序和 App 的聯(lián)動(dòng)非常有限,基本上局限于通過小程序引導(dǎo)用戶去下載/打開App,用戶無法在小程序和 App 切換時(shí)仍然保持完整的用戶體驗(yàn)流程。
但是我同時(shí)也發(fā)現(xiàn)了一些產(chǎn)品運(yùn)用巧妙的方式使得用戶體驗(yàn)流程可以延續(xù)的產(chǎn)品。在愛奇藝小程序中,當(dāng)用戶需要觀看一些 App 才能觀看的內(nèi)容時(shí),用戶可以通過復(fù)制一段口令從而在打開 App 時(shí)自動(dòng)跳轉(zhuǎn)到相應(yīng)視頻,使得用戶流程不中斷。
同樣一段內(nèi)容,如果我想看高清版,或者想要給視頻評(píng)論,我需要自行在 bilibili 的 App 中搜索相關(guān)視頻,這種繁瑣的方式幾乎讓我放棄評(píng)論的興趣。
除了引導(dǎo)收藏和導(dǎo)流機(jī)制之外,在小程序里第二個(gè)重要的機(jī)制就是分享機(jī)制。如何做好分享機(jī)制是提高增量的一個(gè)必須要思考的問題。 正常的小程序分享分為兩種渠道,分享給好友和群聊,以及分享到朋友圈中。
分享給好友,一般就是以小程序鏈接的形式分享。因?yàn)樾〕绦虻膬?yōu)勢(shì)就在于依附于微信,其社交屬性被大大增強(qiáng),所以分享按鈕往往要設(shè)計(jì)的引人注目。常見的設(shè)計(jì)方式有以下幾種。
在分享時(shí),會(huì)有彈窗狀態(tài)讓用戶選擇分享的渠道,事實(shí)證明,這個(gè)彈窗也是可以被設(shè)計(jì)的。而其中被大部分小程序所選擇的設(shè)計(jì)感和實(shí)用性兼具的這種樣式。
小程序以圖片形式保存后的樣式,由于就是我們常見的 H5 設(shè)計(jì),所以在此不做贅述,如果有感興趣的朋友,可以站酷私信的方式或者評(píng)論區(qū)聯(lián)系進(jìn)行討論。
分享在聊天窗口的小程序,也是可以被設(shè)計(jì)的內(nèi)容。這種小程序鏈接一般分為兩個(gè)模塊:標(biāo)題文字 + 配圖。標(biāo)題文字可以自定義 22個(gè)字,起一個(gè)有吸引力的文案可以有效增加轉(zhuǎn)化率。
一般配圖的設(shè)計(jì)有以下幾種分類:
很多同學(xué)會(huì)有一種擔(dān)心,覺得小程序既然如此輕便,會(huì)不會(huì)在技術(shù)上也會(huì)受到很多限制,很多特殊的功能無法在小程序當(dāng)中實(shí)現(xiàn)。
這種擔(dān)心有依據(jù),但不全對(duì)。事實(shí)證明,小程序在動(dòng)效方面,確實(shí)被舍棄了很多,很多情況下甚至動(dòng)效與跳轉(zhuǎn)邏輯無法匹配,會(huì)讓用戶體會(huì)到不安的感覺。但是在功能方面,很多已經(jīng)存在的小程序已經(jīng)證明,幾乎可以在 App 里實(shí)現(xiàn)的功能,小程序均可以實(shí)現(xiàn)。
VR看房
貝殼找房和同程藝龍的小程序都可以實(shí)現(xiàn) VR 實(shí)景看房,而且在用戶體驗(yàn)上是可以讓我感受到其真實(shí)用途,而不是我一開始認(rèn)為的噱頭所在。這是我覺得在小程序上最令我吃驚的功能了。
可以發(fā)現(xiàn)的是,兩個(gè) VR 看房的功能都是一家叫「如視」的公司提供的技術(shù)支持,其實(shí)這是一種小程序的發(fā)展趨勢(shì),越來越多的功能模塊被第三方機(jī)構(gòu)所替代,而小程序的持有者只需專注于服務(wù)與流程設(shè)計(jì)。那么小程序的門檻將會(huì)越來越低,小程序的運(yùn)營團(tuán)隊(duì)也會(huì)越來越精簡(jiǎn),推動(dòng)著整個(gè)生態(tài)向良性發(fā)展。
地圖導(dǎo)航
另一個(gè)技術(shù)就是騰訊自家的「騰訊地圖」,可以在小程序端實(shí)現(xiàn)實(shí)時(shí)導(dǎo)航。這也能證明小程序在功能方面的強(qiáng)大屬性。
其實(shí)小程序也能做到很精美,下面我將帶大家看一些優(yōu)秀的小程序設(shè)計(jì)案例:
京東良研通過良好的視覺設(shè)計(jì)、動(dòng)效設(shè)計(jì)和信息展示方式,使得簡(jiǎn)單的投票功能變得生動(dòng)有趣,簡(jiǎn)約明了。
在旅游行業(yè),如何將繁冗復(fù)雜的信息排布的清晰易懂是非常考驗(yàn)設(shè)計(jì)師能力的。
同程藝龍就在不增加頁面跳轉(zhuǎn)的情況下,同時(shí)將信息以良好的視覺展示了出來。而在同樣領(lǐng)域的馬蜂窩的設(shè)計(jì)卻在對(duì)比下顯得混亂,除了設(shè)計(jì)方面的問題,BUG 頻發(fā),諸多的彈窗與廣告也是影響用戶體驗(yàn)的因素之一。
設(shè)置更新用戶數(shù)據(jù)功能。
有些小程序一次登陸后,就會(huì)永久將用戶數(shù)據(jù)定格在此,所以當(dāng)用戶許久后重新打開小程序,陳舊的數(shù)據(jù)會(huì)讓用戶對(duì)小程序產(chǎn)生類似的許久不更新的感覺,所以一個(gè)更新數(shù)據(jù)的按鍵是必要的。
誘人點(diǎn)擊的文案。
有時(shí),我們可以通過一些有趣的方式讓用戶完成流程,「JZ多媒體解決方案」的用戶登錄就是其中之一,不像普通的設(shè)計(jì),它選用「點(diǎn)擊顯示微信頭像」這樣一個(gè)有趣的文案來吸引用戶點(diǎn)擊,從而完成登錄。
外部顯示名稱和小程序本體名稱可以不一致。
同樣的,名稱為「JZ多媒體解決方案」的小程序,外部顯示名稱為「除了干貨其他什么都沒有」。這給我們提供了一種新思路,在初期推廣時(shí),不如把我們的 Slogan 當(dāng)作名稱寫在外部,是一種推廣的更好方式。
小程序的頂部狀態(tài)欄。
我們都知道小程序的頂部狀態(tài)欄,右半部分是不可編輯的,那么怎樣可以既適應(yīng)這個(gè)規(guī)則,又可以保持小程序的設(shè)計(jì)感呢?我在諸多小程序中發(fā)現(xiàn)了這樣兩種特殊的設(shè)計(jì)方法。
將 LOGO 放置在頂部狀態(tài)欄中。KeepLand 將 LOGO 放置在狀態(tài)欄中,既與其他小程序做到了區(qū)分,宣傳了品牌,同時(shí)又保持了整體的設(shè)計(jì)美感。
搜索欄不必要非放置在下方。放置在頂部導(dǎo)航欄的左端同樣可以實(shí)現(xiàn)空間利用的最大化,同時(shí)保持整體的設(shè)計(jì)美感。
將彈窗設(shè)計(jì)成系統(tǒng)樣式。
將彈窗設(shè)計(jì)成系統(tǒng)樣式,可以有效增強(qiáng)小程序的正規(guī)感和用戶對(duì)于品牌的印象,微信讀書就是用這樣的方法,使得用戶在使用小程序時(shí),同樣體會(huì)到與 App 同樣的品牌與視覺感受。
結(jié)束了上半部分的理論分析,那么我們來聊一聊到底我是怎么看待小程序這個(gè)平臺(tái)以及這個(gè)生態(tài)的。
其實(shí)不只是企業(yè)家需要考慮這個(gè)問題,設(shè)計(jì)師同樣也需要考慮這個(gè)問題。前一陣子我一個(gè)朋友就來找我訴苦,說他不想在現(xiàn)在這個(gè)公司做下去了。原因就是,公司布局了五六個(gè)小程序,就是沒有一款 App 的項(xiàng)目提上日程,他以后不想走小程序設(shè)計(jì)這條路,所以不得已跳槽到一家有 App 產(chǎn)品的公司。其實(shí)這個(gè)問題轉(zhuǎn)化出來也很簡(jiǎn)單,就是小程序到底有發(fā)展前景嗎?小程序是否會(huì)成為一個(gè)和蘋果搭建起來的 AppStore 一樣的平臺(tái)?
事先聲明一點(diǎn),我不針對(duì)個(gè)人、企業(yè)或者某家資本,對(duì)這些將要提及的名字也沒有惡意,還是老規(guī)矩,對(duì)于商業(yè),我們不談道德,只看決策。
1. 工具無界限,產(chǎn)品有派系
曾幾何時(shí),我們?cè)诮怄i共享單車時(shí),第一個(gè)打開的就是微信;現(xiàn)如今微信這樣一個(gè)培養(yǎng)了我們使用二維碼習(xí)慣的產(chǎn)品,卻無法成為人們解鎖單車的首選。
北京市面上存在的單車總共有 7 種:美團(tuán)單車,摩拜單車,ofo,青桔單車,小藍(lán)單車,哈啰單車,永安行。但是目前只有舊版的摩拜單車,青桔單車能用微信小程序掃碼解鎖。(小藍(lán)單車小程序已經(jīng)停止運(yùn)營,ofo 雖然沒有停止運(yùn)營,但是在小程序中已經(jīng)無法搜索到單車服務(wù)了)而同樣,摩拜單車和美團(tuán)單車可以通過美團(tuán) App 解鎖,小藍(lán)單車和青桔單車可以通過滴滴 App 解鎖。
可以發(fā)現(xiàn),微信對(duì)于共享單車界的統(tǒng)治力早已不復(fù)存在,現(xiàn)在無論用哪款單車,微信都不是人們首先能想到的入口了。
雖然技術(shù)水平上小程序完全可以承載市面上大部分的工具,但是產(chǎn)品之間的派系分別,導(dǎo)致我們可能永遠(yuǎn)不可能在微信一款軟件上一勞永逸的體驗(yàn)到所有服務(wù)。就像我們永遠(yuǎn)無法在微信小程序中發(fā)現(xiàn)「淘寶」小程序一樣。其實(shí)小程序在這一步上,已經(jīng)不可能像App Store 一樣打造一個(gè)完整的生態(tài)了。阿里一家的存在,就已經(jīng)讓微信失去了電商行業(yè)的半壁江山。
甚至更有趣的是,在小程序熱度排行榜中,位居前十的小程序中有 5 個(gè)是騰訊投資的企業(yè)下屬產(chǎn)品,還有 1 個(gè)是騰訊自身的產(chǎn)品。
但這本身無可厚非,因?yàn)檫@就是正常的商業(yè)競(jìng)爭(zhēng)策略,只是選擇了這種策略生長的小程序,優(yōu)勢(shì)就是可以將流量最大化的向自己的生態(tài)中轉(zhuǎn)化,缺點(diǎn)就是會(huì)有很多產(chǎn)品因此無法融入其中,小程序的生態(tài),終究不會(huì)是一個(gè)全面而完整的生態(tài)。
2. 很多小程序都是完整產(chǎn)品的試用版
很多人曾在小程序風(fēng)靡時(shí)預(yù)言,將來很多的產(chǎn)品都會(huì)入駐小程序,閹割掉次要功能,只保留核心功能在小程序中,這樣才可以既遵循小程序的輕量化原則,又可以讓用戶體驗(yàn)到產(chǎn)品的優(yōu)勢(shì),形成轉(zhuǎn)化。但有趣的是,市場(chǎng)卻形成了另一套完全相反的機(jī)制。
Bilibili 小程序可以便捷的讓用戶隨時(shí)隨地觀看視頻,但是卻機(jī)智的閹割掉了畫質(zhì)選項(xiàng)。這個(gè)小程序確實(shí)解決了一部分用戶對(duì)于觀看視頻的便捷性、分享視頻的傳播性的需求,但在這個(gè)手機(jī)流量多到可以鋪張浪費(fèi)的年代,「高糊畫質(zhì)」無異于加重了用戶被「望梅止渴」欺騙的想法,而更多的轉(zhuǎn)向了下載 App 只為了更高清的畫質(zhì)與更多的操作自由。
微博小程序與 bilibili 小程序的做法如出一轍,雖然微博小程序的功能也很全面,看起來幾乎和微博 App 所具有的功能幾乎一致,但是一旦我們妄圖用微博小程序代替 App 來使用時(shí)就會(huì)發(fā)現(xiàn),微博小程序竟然不能發(fā)帶圖片和視頻的微博。
知乎小程序亦是如此,他幾乎閹割掉了所有用戶和社區(qū)互動(dòng)的渠道,用戶在小程序中只能接受知乎的信息,而無法發(fā)布回答與評(píng)論(只能點(diǎn)贊或者反對(duì))。
甚至從名稱我們就可以看出微博和知乎想要突出的重點(diǎn)(熱門微博與知乎精選),在于讓用戶瀏覽微博和知乎中已經(jīng)存在的信息,而當(dāng)用戶想真正參與進(jìn)整個(gè)社區(qū)時(shí),發(fā)現(xiàn)幾乎所有的入口都被封死。在知乎中甚至連互動(dòng)中的評(píng)論功能都被閹割掉了,完全給用戶一種隔著玻璃罩看珍藏品般的感覺。
所以各個(gè)互聯(lián)網(wǎng)產(chǎn)品不約而同的選擇了同一種方法來運(yùn)營小程序,即小程序永遠(yuǎn)是正規(guī) App 的試玩版。因?yàn)槲⑿诺闹攸c(diǎn)在于社交,而用戶在社交過程中能使用「嗶哩嗶哩」「微博」與「知乎」的場(chǎng)景只有分享社區(qū)中的內(nèi)容這一種場(chǎng)景了。所以所有的互聯(lián)網(wǎng)產(chǎn)品都將社區(qū)中的主要內(nèi)容呈現(xiàn)在了小程序中,而所有與分享無關(guān)的功能,即使?jié)M足「即用即走」的特性,也并沒有在小程序中保留下來。(比如發(fā)帶圖片的微博,這應(yīng)該非常符合即用即走的特性了,但并沒有被小程序保留下來)
3. 流量與格局
張小龍對(duì)于小程序有很多設(shè)想,其中一個(gè)就是打造一個(gè)屬于微信的生態(tài)系統(tǒng),有人曾問我微信小程序生態(tài)系統(tǒng)會(huì)不會(huì)最終能成長為和 IOS 抗衡的力量?
我覺得很難。
2017 年 5 月 18 日開始刷屏,第二天即 5 月 19 日便被微信叫停服務(wù),微信方面給出的理由是,小程序匿名聊聊「涉嫌誘導(dǎo)分享」。這是第一款被騰訊官方明確封殺掉的微信小程序。之后匿名聊聊換殼上線,改名「走心聊聊」。但可惜的是,走心聊聊依然沒有逃過被封殺的悲慘結(jié)局,上線沒過多久,走心聊聊便因違反《即時(shí)通信工具公眾信息服務(wù)發(fā)展管理暫行規(guī)定》,再次被暫停服務(wù)。
如果說「匿名聊聊」觸碰的是微信社交的這塊蛋糕,被封殺是情有可原的。那抖音被微信封殺的過程簡(jiǎn)直是讓很多互聯(lián)網(wǎng)企業(yè)都大失所望。
在第一次封殺 H5 時(shí),微信方給出了明確的回應(yīng)。該 H5 在最后一頁存在誘導(dǎo)分享行為,違反《微信外部鏈接內(nèi)容管理規(guī)范》,因此平臺(tái)對(duì)其進(jìn)行了處理,分享到朋友圈僅自己可見。 但是在微信全面封殺抖音外部鏈接以及切斷使用微信賬號(hào)登陸抖音的功能時(shí),微信方卻完全沒有給出任何官方解釋。
如果說封殺抖音是因?yàn)轭^條系產(chǎn)品(包括今日頭條與抖音)有運(yùn)用 cookie 機(jī)制挖掘用戶在騰訊體系內(nèi)更多好友關(guān)系的嫌疑。但是接下來微信的做法無疑是令眾多互聯(lián)網(wǎng)中小企業(yè)看到了自己依附微信生存的結(jié)局。
據(jù)不完全統(tǒng)計(jì),在短視頻盛行時(shí)期,微信已經(jīng)將 20 多款短視頻類 App 的分享鏈接封殺。
但是此時(shí)微信卻力推騰訊系的短視頻 App – 微視,甚至為了微視打破了自己既定的規(guī)則 —— 開放了在朋友圈上傳 30 秒視頻的權(quán)限。
所以其實(shí)根本就沒有什么「誘導(dǎo)分享」這樣的說法,網(wǎng)絡(luò)上流傳著一句話「微信封殺是中國互聯(lián)網(wǎng)公司躲不過的一道坎兒」。
微信封殺你不需要理由,畢竟微信的違規(guī)內(nèi)容中有一條明確地寫道:通過明示或者暗示的方式誘導(dǎo)點(diǎn)擊。但是回過頭一想,廣告的文案不就兩種,明示或者暗示都被微信說了,你放個(gè)廣告就不能有文字,既然有了文字,你不是明示就是暗示。
在微信規(guī)則范圍內(nèi),其對(duì)于誘導(dǎo)分享的懲戒存在很大的自由裁量權(quán)。所以懲罰你與否,歸根結(jié)底就是看你是否觸動(dòng)了微信的利益,一旦觸動(dòng),你就會(huì)變成微信重點(diǎn)關(guān)照的對(duì)象。
事實(shí)上,微信這樣的做法也不是一兩天了。在三英(聊天寶、多閃、馬桶 MT)戰(zhàn)微信時(shí),三款產(chǎn)品都被微信封殺了分享渠道。我們其實(shí)深知他們很難動(dòng)搖微信的地位,但是還是很快遭到了封殺,甚至不惜動(dòng)用其他渠道的力量,阻斷馬桶 MT 的傳播。這種寧可錯(cuò)殺一千不可放過一個(gè)的行為,使得微信再也無法樹立起與蘋果/微軟等平臺(tái)公司齊平的公正性。
事實(shí)上不僅僅是騰訊如此,中國目前的互聯(lián)網(wǎng)環(huán)境都清晰的告訴我們,企業(yè)之間很難構(gòu)建真正的信任。我一個(gè)美團(tuán)的高管朋友告訴我,美團(tuán)在進(jìn)行設(shè)計(jì)與開發(fā)協(xié)作時(shí),并不會(huì)使用藍(lán)湖,因?yàn)樗麄儾恍湃螄鴥?nèi)企業(yè)。然而在國內(nèi)使用 invision 又會(huì)受限于網(wǎng)速的影響,所以美團(tuán)干脆開發(fā)了一款自己內(nèi)部的切圖與協(xié)作的軟件:印跡,只為協(xié)調(diào)實(shí)用性與保密性。
有朋友可能對(duì)這款軟件比較感興趣,我也同樣如此,就問他美團(tuán)之后會(huì)不會(huì)讓這款軟件開發(fā)注冊(cè),走商業(yè)化道路。他說一開始在研發(fā)時(shí)他們也有這樣的想法,但是由于要提率,所以這款軟件越來越針對(duì)美團(tuán)業(yè)務(wù)邏輯的方向制作優(yōu)化,所以即使公開,也會(huì)很難為他人所用了。
入駐小程序,有時(shí)候也意味著需要將自己的數(shù)據(jù)交給他人管理,在小程序中,所有基于地理位置為用戶提供服務(wù)的小程序,幾乎全部都接入了騰訊地圖。
我雖然不了解其中的運(yùn)作機(jī)制,但是不難看出,很多企業(yè)應(yīng)該跟我抱有類似的想法。當(dāng)所有數(shù)據(jù)集于騰訊一家時(shí),自己是否還有立足于市場(chǎng)的根基呢?
4. 那些已經(jīng)成為平臺(tái)的企業(yè)是如何看待小程序
在 2018 年 11 月 7 日中國烏鎮(zhèn)的互聯(lián)網(wǎng)大會(huì)上馬化騰說,微信現(xiàn)在有超過 100 萬個(gè)小程序,而在同年 4 月份,Appstore 才收錄了210 萬個(gè)應(yīng)用。也就是說從 2008 年到 2018 年,蘋果用 10 年的時(shí)間打造的一個(gè)龐大的應(yīng)用公園,被小程序不到 2 年的時(shí)間就從數(shù)量上追上了一半。這無疑會(huì)讓蘋果與 Google 重新審視小程序這款產(chǎn)品。
事實(shí)上,平臺(tái)與平臺(tái)之間的博弈從來沒有停息過。頭號(hào)玩家需要借助平臺(tái)來壯大自己,平臺(tái)需要頭號(hào)玩家來壯大自己的生態(tài)系統(tǒng),但是也會(huì)忌憚這些頭號(hào)玩家有一天會(huì)強(qiáng)大到自己無法掌控,甚至反噬自己。
我們?cè)趪鴥?nèi)一直看到的微信在自己的平臺(tái)上打壓其他的產(chǎn)品,但是反過來在國際市場(chǎng)上,微信何嘗不是架構(gòu)在別人的平臺(tái)上?所以其實(shí)我們遍歷微信對(duì)待其他產(chǎn)品的策略,反過來,都會(huì)成為蘋果制約微信的策略。
還記得在 2017 年 4 月時(shí),蘋果就根據(jù)自己的《開發(fā)者協(xié)議條款》第 3.1.1 項(xiàng),對(duì)蘋果端微信內(nèi)所有的贊賞內(nèi)容強(qiáng)行征收 30% 的費(fèi)用,雖然最終微信和蘋果雙方都做出了不同程度的妥協(xié),但是微信還是做出了「斷臂」一般的抉擇,裁掉了微信公眾號(hào)的打賞功能。
雖然表面上看是蘋果對(duì)于開發(fā)者協(xié)議條款的嚴(yán)格把控,將公眾號(hào)打賞行為歸結(jié)為 APP 內(nèi)購功能,因此要求微信改用蘋果的 IAP(in-AppPurchase 應(yīng)用內(nèi)付費(fèi)),但實(shí)際上從時(shí)間節(jié)點(diǎn)上看,我們很容易發(fā)現(xiàn),蘋果這次的發(fā)難明顯是針對(duì)小程序以及微信的「鏈接一切」的戰(zhàn)略的,一旦微信將「微信公眾號(hào)、朋友圈、微信支付、小程序」這幾個(gè)核心功能打通,勢(shì)必會(huì)對(duì)蘋果的生態(tài)系統(tǒng)產(chǎn)生較大的影響,蘋果不可能坐視不管。
雖然這件事結(jié)束后,蘋果和微信再?zèng)]有大的爭(zhēng)端,但是外媒卻風(fēng)評(píng)不斷,他們雖然不認(rèn)為小程序會(huì)最終成為制衡 AppStore 的力量,但是卻會(huì)搶占中國市場(chǎng)大部分的 App 開發(fā)人員的資源,使其向小程序設(shè)計(jì)與開發(fā)傾斜,一旦這種現(xiàn)象嚴(yán)重起來,蘋果勢(shì)必不能坐視不管。
興許下一次大戰(zhàn)就是微信與小程序進(jìn)軍國際的那一步。我無法預(yù)測(cè)這場(chǎng)戰(zhàn)爭(zhēng)的結(jié)果,畢竟騰訊做了那么多年的生態(tài),深諳自己是如何通過平臺(tái)一步一步贏到現(xiàn)在,現(xiàn)如今他也站在了劣勢(shì)方的一邊,勢(shì)必也會(huì)做好充足準(zhǔn)備,但是這對(duì)于騰訊也一定是一個(gè)傷敵一千自損八百的戰(zhàn)役,而對(duì)于我們更重要的是,小程序到時(shí)還能不能是我們可持續(xù)發(fā)展的一個(gè)平臺(tái),恐怕誰都不敢保證。
雖然小程序的限制與克制如此之多,但是我并不認(rèn)為這代表著小程序不適合我們?nèi)刖?,相反我覺得微信的克制是一種純粹的理想,只能存在市場(chǎng)的初期,隨著行業(yè)的發(fā)展,越來越多的變量已經(jīng)不在微信的掌控范圍內(nèi)。小程序已經(jīng)不再是微信能夠全權(quán)把控發(fā)展節(jié)奏的產(chǎn)品了,而需要主動(dòng)去迎合時(shí)代做出改變。就像現(xiàn)如今的微信一樣,我們無數(shù)次在公開場(chǎng)合聽到張小龍說,他不希望用戶在微信上浪費(fèi)過多的時(shí)間,但是微信已不可避免的成為一款超級(jí) App,集合了越來越多的使用場(chǎng)景,甚至有時(shí),手機(jī)里只有一個(gè)微信就夠了。
1. 頭部復(fù)合型小程序出現(xiàn),使小程序無法保持初心
小程序發(fā)展到這一步幾乎是小程序團(tuán)隊(duì)和張小龍沒想到的,本來小程序的屬性是「用完即走」,但是由于微信本身的流量龐大,所以在微信內(nèi)部不可避免的會(huì)出現(xiàn)超級(jí)個(gè)體(即流量巨頭),這種復(fù)合型小程序(也可以稱之為「超級(jí)小程序」)幾乎可以不用遵守小程序的規(guī)范一樣可以獲得流量,那么越來越臃腫,幾乎是這類小程序不可避免的現(xiàn)象。
比如說在小程序領(lǐng)域耳熟能詳?shù)摹该榔?,美篇從微信朋友圈只能發(fā)布 9 張圖片的痛點(diǎn)出發(fā),以圖文創(chuàng)作工具切入,成為了當(dāng)時(shí)首屈一指的小而美的工具類產(chǎn)品。但隨著流量逐步增大,美篇開始尋求商業(yè)化變現(xiàn)的道路,從工具類產(chǎn)品向社交類產(chǎn)品轉(zhuǎn)型,最后形成了編輯、分享、閱讀、社交 四大功能的復(fù)合型小程序。
而基于圖文內(nèi)容,以興趣聚合的交流社區(qū),圍繞老師的家長社群,圍繞公務(wù)員的同事社群,圍繞攝影旅行的興趣社群,這些都是普通工具類小程序不具備的,但是卻是小程序發(fā)展的一個(gè)必經(jīng)之路,同時(shí)也是轉(zhuǎn)型的一個(gè)典范。
所以同樣的道理,這就是為什么我不推薦大家在學(xué)習(xí)如何制作小程序時(shí),去參考頭部的那些復(fù)合型小程序。體量大不意味著正規(guī),不意味著遵守規(guī)范。
很多復(fù)合型小程序的設(shè)計(jì)其實(shí)是和小程序的初衷以及適用場(chǎng)景背道而馳的。這對(duì)產(chǎn)品本身并不會(huì)有什么過大的影響,因?yàn)樵谒麄兊目剂糠懂犂铮斜茸袷匾?guī)范優(yōu)先級(jí)更高的事情。但是我們?nèi)绻つ拷梃b,以為這就是小程序的規(guī)范,那么最終得不償失。
所以同類型的小而美的小程序,往往更應(yīng)該成為我們的借鑒對(duì)象。
2. 友商的步步緊逼
雖然從數(shù)據(jù)上看,微信首發(fā)優(yōu)勢(shì)明顯,但是其他平臺(tái)也不容小覷。從 2019 年上半年開始,各大應(yīng)用廠商開始逐步布局小程序。小程序平臺(tái)從一開始的 2 家到現(xiàn)在已經(jīng)覆蓋了 8 個(gè)平臺(tái)。這些平臺(tái)也都在積極的擴(kuò)張小程序:阿里將支付寶小程序擴(kuò)展到整個(gè)阿里系;百度創(chuàng)立了開源聯(lián)盟;騰訊旗下的第二大 App-QQ 也正式上線了小程序。
并且在數(shù)據(jù)上雖然有很大的差距,但是還沒有到達(dá)不可逾越的地步。并且除了微信外,幾乎所有的小程序走的都是中心化流量分發(fā)的模式。這時(shí)由于微信的克制與去中心化,反而讓其他的廠商逐步縮短了差距。
所以,隨著其他平臺(tái)的小程序步步緊逼,微信小程序急需一條出路打破目前的困局。某種程度上說,小程序?qū)ξ⑿艁碚f,是一場(chǎng)只能進(jìn)不能退的戰(zhàn)爭(zhēng),最終也會(huì)迫使微信妥協(xié)很多本來視為底線的規(guī)則。
張小龍?jiān)诠_場(chǎng)合多次提到,他希望小程序廠商能夠?qū)W⒂趦?nèi)容本身,而不要去思考流量紅利和不符合規(guī)定的裂變玩法。但是如果說市面上只有一款「微信小程序」,那么廠商可能還會(huì)更愿意去沉淀自己的內(nèi)容。但是現(xiàn)實(shí)是面對(duì)這么多家平臺(tái)都開放小程序,那么熟悉平臺(tái)規(guī)則與政策,研究對(duì)應(yīng)的策略與玩法,幾乎是必然會(huì)發(fā)生的事情。這基本就意味著,隨著各大平臺(tái)紛紛入駐小程序生態(tài),微信對(duì)于小程序的底線遵守恐怕是越來越難。
3. 小程序已經(jīng)成為一種任何平臺(tái)都可以復(fù)制的商業(yè)模式
小程序已經(jīng)不止代表著「微信小程序」,而是一種任何平臺(tái)都可以復(fù)制的商業(yè)模式,那么去研究小程序的規(guī)則和玩法自然是值得的,因?yàn)樗哂型ㄓ眯浴>拖?,如果我們一般人都?huì)去學(xué)英語而不會(huì)去學(xué)習(xí)都可以法語一樣,因?yàn)橛⒄Z在全世界都可以通用,但是法語基本只能在法國應(yīng)用。
事實(shí)上,已經(jīng)有小程序廠商開始在跨平臺(tái)之間進(jìn)行積極的布局和嘗試了。汽車之家就是其中典型的例子。通過多平臺(tái)布局的方式,大大降低了小程序的開發(fā)與學(xué)習(xí)成本,實(shí)現(xiàn)一舉多得。這也是我覺得小程序值得研究和入駐的原因。
4. 微信仍然是目前的一個(gè)流量巨頭
據(jù)市場(chǎng)研究公司 comScore 稱,智能手機(jī)用戶用在設(shè)備上的所有時(shí)間幾乎都被放在他們使用率最高的 5 款應(yīng)用上,而且?guī)缀跻话氲臅r(shí)間都被用到了使用率最高的那款應(yīng)用上。
所以在中國,這就意味著大部分用戶的時(shí)間都被微信占據(jù),而剩下的 App 則搶占用戶剩余的時(shí)間。所以入局微信對(duì)中小型企業(yè)來說是一個(gè)巨大的蛋糕,很少有人會(huì)不為此觸動(dòng)。
大家可以發(fā)現(xiàn),其實(shí)我所說的不看好小程序的未來,只是不看好微信小程序的未來,但是小程序這種生態(tài)模式,絕對(duì)是未來的一個(gè)趨勢(shì)所在,因?yàn)樗鼡碛刑囟ǖ膽?yīng)用場(chǎng)景,符合人們對(duì)于碎片化,場(chǎng)景化的功能與服務(wù)的期待。
所以我認(rèn)為,小程序的設(shè)計(jì)模式是設(shè)計(jì)師一定要去學(xué)習(xí)的,而企業(yè)也一定要研究自己的產(chǎn)品是否在小程序下有應(yīng)用場(chǎng)景,因?yàn)檎l都不能保證,小程序是否也會(huì)有像 App 一樣,發(fā)生流量井噴的一天,到那時(shí)候如果再上車,真的就為時(shí)已晚了。
很多朋友問我為什么挑選這個(gè)時(shí)間來寫小程序?為什么不趕小程序大火的時(shí)候?qū)??或者為什么不寫一些別的流行趨勢(shì)上的話題?
希望我能一直帶著這樣的態(tài)度給大家?guī)砀嘤幸娴膬?nèi)容。
另外,由于文章的篇幅有限,很多的內(nèi)容其實(shí)經(jīng)歷過了很多次篩選,才最終呈現(xiàn)給大家,希望能幫助到正在研究小程序的你。
文章來源:優(yōu)設(shè)
您最近填寫過在線表單了嗎?
答案應(yīng)該是肯定的。根據(jù)最近的研究,84% 的人每周至少會(huì)填寫一份線上表單。
雖然你可能沒有感受到,但在線填表單已經(jīng)成為我們生活中不可或缺的一部分了。
其實(shí),幾乎每個(gè)把用戶由 A 帶向 B 的線上交互都是一個(gè)網(wǎng)絡(luò)表單:與某個(gè)公司聯(lián)系、訂火車票、購物、訂一晚酒店等等。
網(wǎng)絡(luò)表單最早在 1994 年開始用于在線銷售,第一個(gè)拖拽式表單 2006 年在屏幕上出現(xiàn)。從那時(shí)起,表單已經(jīng)成為線上交互的關(guān)鍵。
企業(yè)和客戶之間需要通過網(wǎng)站進(jìn)行聯(lián)系,小到縣城的官網(wǎng),大到國家政府網(wǎng)站,現(xiàn)在很難想像一個(gè)沒有網(wǎng)絡(luò)的世界。
但為什么線上表單一直備受詬???
當(dāng)然,確實(shí)沒幾個(gè)人喜歡填表,但大多數(shù)人絕對(duì)不會(huì)介意填寫那些清晰、簡(jiǎn)潔、設(shè)計(jì)優(yōu)秀的表單。
其實(shí)這也就是癥結(jié)所在。太多的在線表單冗長、令人迷惑或讓人感到有所冒犯(有時(shí)甚至三者同時(shí)出現(xiàn))。
當(dāng)表單產(chǎn)生讓人迷惑,或提出的要求超出必要范圍時(shí),用戶的放棄幾率就會(huì)大大增加。 有些用戶可能會(huì)放棄填寫,甚至退訂整個(gè)業(yè)務(wù)。無論是以上哪種情況,您都不會(huì)再有第二次機(jī)會(huì)。
在設(shè)計(jì)一個(gè)表單的時(shí)候,我們?cè)趺幢WC用戶能填到最后一步?
「創(chuàng)建一個(gè)表單很簡(jiǎn)單,難的是讓人填完它?!?
在幫助 420 萬用戶創(chuàng)建線上表單后,我們?cè)?JotForm 發(fā)現(xiàn)了一件重要的事情,就是一些小小的改變會(huì)讓整個(gè)事情大有改觀。通常,這些改變都是從那些被放棄的表單中獲得的靈感。
例子:
表單設(shè)計(jì)成什么樣呢?應(yīng)該直觀、簡(jiǎn)單以及體驗(yàn)友好。以下是一些推薦的參考方法。
1. 歡迎填表者:標(biāo)題與介紹
無論是誰,歡迎朋友的時(shí)候難道不會(huì)說「你好嗎?」我們都知道禮貌的重要性,但是在線上卻往往忽略了這一點(diǎn)。
歡迎頁和標(biāo)題讓您有機(jī)會(huì)以一種清晰而友好的方式介紹表單和自己,而且還會(huì)留下一個(gè)良好的第一印象。
看看 BettingExpert 的數(shù)據(jù)吧:通過修改表單標(biāo)題來強(qiáng)調(diào)「注冊(cè)理由」以后,他們的注冊(cè)率提高了31.54%。
標(biāo)題是對(duì)下文最短最精的概括。用戶一般都會(huì)跳過表單內(nèi)容,而且?guī)缀醵疾粫?huì)仔細(xì)閱讀那種特別詳細(xì)的描述。所以用最少的文字說清楚一個(gè)表單的目的尤其重要。
標(biāo)題可以簡(jiǎn)單理解為描述被調(diào)查者對(duì)表格的期望。盡可能保持中立:要確保應(yīng)答者誠實(shí)回答,而不是去滿足出題者的設(shè)想。甚至像陳述一個(gè)目標(biāo)這樣簡(jiǎn)單的事情,也可能會(huì)不知不覺地誘使應(yīng)答者試圖迎合。
而且現(xiàn)在也需要一份清單,說明應(yīng)答者應(yīng)該事先準(zhǔn)備的外部文件,沒人想中途去滿屋子找納稅證明或者護(hù)照。
如果填表需要很長的時(shí)間去完成,一定要提前告知用戶。不過如果是又快又簡(jiǎn)單的?讓用戶感到驚喜吧(但不要冒險(xiǎn)侮辱任何人的智力,以防萬一)。畢竟,他們能夠通過查看進(jìn)度條或字段數(shù)量來推斷出這一點(diǎn)。
2. 放置相關(guān)的標(biāo)題和副標(biāo)題
一個(gè)有趣的事實(shí):人類會(huì)在 50 毫秒內(nèi)形成第一印象。重點(diǎn):由于時(shí)間不夠長,他們無法仔細(xì)閱讀你的作品。
表單用戶很可能就是快速瀏覽一小部分內(nèi)容,忽略大部分內(nèi)容。而且有很大可能是他們正在忙著其他事情,無法集中注意力或者幾乎就沒有什么耐心,只想要快點(diǎn)結(jié)束。
顯然,我們無法阻止用戶,所以只能通過簡(jiǎn)潔明了的標(biāo)題來引導(dǎo)他們。標(biāo)題絕對(duì)是個(gè)得力助手:可以將文本結(jié)構(gòu)化、清晰化、保持用戶的參與度。
用戶應(yīng)該可以看一眼標(biāo)題就知道他們應(yīng)該怎么做,而不是非得把剩下的全部看完。
測(cè)試這一點(diǎn)的最好方法是單獨(dú)閱讀標(biāo)題,是否能讓人看懂呢?
3. 問題之間要有分隔符
分隔符很重要。就傳統(tǒng)表單來說,在視覺上把問題隔開以達(dá)到減少干擾的最好方法,就是使用分隔符。并不需要在視覺上做出很大的區(qū)別,區(qū)別太大反而容易分散用戶注意力。
4. 多頁面表單或單頁表單?
這主要取決于表單有幾個(gè)議題。
如果只有1,2個(gè)議題,單頁表單肯定是最佳選擇。但是如果一個(gè)表單有很多議題,那么就需要多頁表單來呈現(xiàn)。想象一下:用戶在面對(duì)一個(gè)似乎有成千上百議題的表單時(shí),得有多心煩。
5. 強(qiáng)調(diào)「行動(dòng)召喚」(CTAs,Calls-to-Actions)
成功的「行動(dòng)召喚」強(qiáng)調(diào)的是「行動(dòng)」部分:?jiǎn)螕暨@個(gè)按鈕,用戶要執(zhí)行什么操作?類似「發(fā)送」,「注冊(cè)」或者「過程」之類的通用標(biāo)簽并不會(huì)削弱召喚機(jī)制。描述越多越好。
為了消除不確定性,試著從用戶的角度回答一下這個(gè)問題「我想干什么?」舉個(gè)例子,如果是某項(xiàng)服務(wù)的調(diào)查表單,那就應(yīng)該是「我需要免費(fèi)咨詢」。
還需要更多證據(jù)嗎?在這類研究中,Unbounce 發(fā)現(xiàn)只是把「開始你的試用」換成「開始我的試用」,就提高了90% 的點(diǎn)擊率。
6. 標(biāo)明表單中的區(qū)域
這并不是說要弄得花里胡哨的……
單選框、挑選區(qū)域和復(fù)選框之所以有效,是因?yàn)樗鼈兗群?jiǎn)單又常見。表單元素的標(biāo)準(zhǔn)格式等同于更好的可用性。
單選框適用于有很多選項(xiàng)而只有一個(gè)可選的情況。復(fù)選框用在多項(xiàng)選擇的情況下最好。
為了更短的認(rèn)知適應(yīng)過程,要盡可能地使用多選框或者單選框而不是下拉菜單。就像 Luke Wroblewski 說的:「下拉菜單應(yīng)該是 UI中的最后選擇。」
7. 別忘了「感謝」頁面
記住用戶是花時(shí)間的。所以千萬不要唐突結(jié)束,要記得說謝謝。
以下是一些關(guān)于表單書寫藝術(shù)的小建議。
從形式上來說,我們都更喜歡簡(jiǎn)單的語言,尤其是那些學(xué)者,天才和專家。那為什么還有那么多線上對(duì)話像是復(fù)讀機(jī)一樣?
「請(qǐng)接受來自我們最誠摯的道歉。即便如此,我們還是希望能知道您的建議。除此之外……」
像一個(gè)老學(xué)院派那樣說話只會(huì)疏遠(yuǎn)用戶,讓他們瞠目結(jié)舌。
簡(jiǎn)單不意味愚蠢,而是等于可讀性。這意味著最清晰的平白直述。每個(gè)詞語都應(yīng)該是最短,最直接的版本,能用「不過」就別用「盡管如此」。不用行話,不寫復(fù)雜句。
你可以通過大聲朗讀來檢查連貫性。耳朵能夠聽到眼睛看不到的東西,特別是在描述那些冗長復(fù)雜概念的時(shí)候。
一份表單應(yīng)該就像是你和填表者之間的對(duì)話。通過用「我」,「你」,「你的」這些代詞來擬人化。
主動(dòng)語態(tài)的表達(dá)(比如:約翰寫了一封投訴信)比被動(dòng)語態(tài)(比如:一封投訴信由約翰寫出)更加有力。
被動(dòng)語態(tài)會(huì)更冗長,不夠集中。
(譯者注:以下文章中帶橫線的內(nèi)容適用于英語語法,不感興趣的讀者可自行跳過。)
一個(gè)被動(dòng)語態(tài)句子究竟有多糟?這是兩點(diǎn)教訓(xùn):
還是不確定?你可以去查一下微軟 Word 可讀性標(biāo)準(zhǔn),或者普渡大學(xué)語句方法。
許多作者都會(huì)陷入這樣的思維誤區(qū):用的詞越多,就顯得他們?cè)铰斆?。其?shí)不是這樣的。在表單編寫方面,或者說各種寫作中,刪減詞語都要比添加詞語更加有益。
「你刪掉的每一個(gè)詞,都會(huì)為你多增加一個(gè)讀者?!?
在仔細(xì)檢查不必要的詞語后,文章會(huì)更篤實(shí),更連貫,更吸引人。
刪減重點(diǎn):
比起完整形態(tài)(比如 cannot,is not),語句的縮寫形式(比如 can’t,isn’t)能夠讓文章看起來更簡(jiǎn)潔,友好和易讀。
另外,還能節(jié)省文字篇幅。一份優(yōu)秀的表單閱讀性都不錯(cuò)。
What’s 優(yōu)于 What is。很簡(jiǎn)單。
冗長曲折的句子容易讓人難以理解。密密麻麻的文字堆也是如此。
對(duì)于大多數(shù)讀者來說,每個(gè)句子最多 20 個(gè)單詞,每個(gè)段落最多 3 個(gè)句子,是最合適的。把每個(gè)長句都擴(kuò)成兩個(gè)短句。短句實(shí)際上并不遜色。
使用空格,項(xiàng)目符號(hào),表格以及打破繁瑣說明的任何其他元素,都會(huì)使您的讀者松一口氣。
在我寫博客的過程中,我(艱難地)認(rèn)識(shí)到,優(yōu)秀的文章是 30% 的寫作加上 70% 的編輯。
當(dāng)你完善了問題,精簡(jiǎn)了文字和內(nèi)容后,把表格存儲(chǔ)好。隔幾天再回過頭來看,你會(huì)發(fā)現(xiàn)有些之前沒有發(fā)現(xiàn)的地方還可以再改進(jìn)。
大多數(shù)用戶體驗(yàn)的心理學(xué)原理其實(shí)都在人們的潛意識(shí)中,所以難以讓人注意到。
但是每種顏色,字體,線條和按鈕都有其用途。
日常的小規(guī)模設(shè)計(jì)可能不如十億美元的營銷活動(dòng)那么引人注目。但小設(shè)計(jì)也需要花心思。而且,研究令人愉悅的設(shè)計(jì)背后的心理學(xué)機(jī)制很有意思,成本也不高。
以下是一些關(guān)鍵的心理原則,這些原則構(gòu)成了設(shè)計(jì)優(yōu)良的表格的堅(jiān)實(shí)基礎(chǔ)。
我們做出的每一個(gè)決定,從倒垃圾到訂婚,都要經(jīng)過我們頭腦中的自動(dòng)成本收益分析。一項(xiàng)任務(wù)的成本是否值得完成后的收益?
設(shè)計(jì)師的工作是確保用戶在感知上收益是大于成本的。
當(dāng)然,成本與收益是主觀的,填表通常源于義務(wù),而不是受訪者希望從中獲益的行為。除非給受訪者獎(jiǎng)勵(lì),否則無法確保收益。但是我們可以把成本降到。
降低受訪者成本的一些關(guān)鍵策略:
+1-919-555-2743 vs 19195552743.
哪個(gè)電話號(hào)碼會(huì)留在你的腦海里?當(dāng)然是第一個(gè)。那是因?yàn)樗环謮K了。
組塊是一種方便的記憶技術(shù):我們把它用于銀行個(gè)人識(shí)別碼、社會(huì)安全號(hào)碼和儲(chǔ)物柜代碼。它指的是將信息排列成「塊」的過程,使內(nèi)容更容易保留、處理和回憶。
研究聲稱數(shù)字 3 是幫助人們吸收和回憶信息的神奇數(shù)字。所以盡可能使用它:針對(duì)段落,列表,關(guān)鍵步驟等等。
如果可能,避免任意格式化規(guī)則。但如果是必要的規(guī)則,用紅色記號(hào)筆拼寫出來。填表單時(shí),沒人愿意猜。密碼要求、語法規(guī)則、編號(hào)間距等等,如果一個(gè)字段需要特定的輸入,告訴用戶。
席克定律
如果我要舉辦一個(gè)晚宴,我總是選擇從當(dāng)?shù)匾患倚‰s貨店購買我的配料,而不是從一個(gè)雜亂無章的超市購買。那是因?yàn)橛刑嗟倪x擇往往會(huì)讓人感到麻木。這就是席克定律:它指出,隨著選項(xiàng)增加,做出決定的時(shí)間也在增加。
應(yīng)用到用戶體驗(yàn)領(lǐng)域,席克定律簡(jiǎn)直就是去繁求簡(jiǎn)的一劑良方:限制導(dǎo)航選擇,給用戶明確但受限的選項(xiàng)。因?yàn)殡S著設(shè)計(jì)靈活性的增加,它的可用性會(huì)降低。少即是多。
這個(gè)鏈接有什么用?還是右上角的按鈕?如果并沒有增效,那就是減效。每一個(gè)字,每一張圖片,鈴鐺圖標(biāo)或者口哨圖標(biāo)都不是100% 必需的,這些都會(huì)降低你表單的轉(zhuǎn)換率。
尼爾·帕特爾稱只需刪除一個(gè)字段,他的聯(lián)系人表單提交率就可以提高 26%。
正如杜魯門·卡波特曾經(jīng)說過的,「我更相信剪刀,而不是鉛筆?!?
打字是在線表單中最耗時(shí)、最密集的部分,而且經(jīng)常會(huì)導(dǎo)致錯(cuò)誤——尤其是在手機(jī)上。用按鈕、滑塊替換文本框并使用自動(dòng)完成功能,將減少工作量并提高轉(zhuǎn)化率。
根據(jù) Marketing Insider Group 的調(diào)查,有 78% 的互聯(lián)網(wǎng)用戶表示來自品牌的個(gè)人相關(guān)內(nèi)容會(huì)增加他們的購買意愿。而當(dāng)體驗(yàn)與用戶無關(guān)時(shí),營銷活動(dòng)的效果將降低 83%。
因此,感謝條件邏輯!
條件邏輯(或「分支邏輯」)通過允許基于特定響應(yīng)的附加指令——類似:「如果這樣,那么」,簡(jiǎn)化了復(fù)雜的流程。
使用條件邏輯將不會(huì)顯示與用戶無關(guān)的問題,從而減少完成表單的時(shí)間,從而使他們不太可能放棄前面的任務(wù)。
是的,這聽起來像是常識(shí),但是大多數(shù)表單都會(huì)向每個(gè)用戶(無論他們是誰)提出相同的問題。使用條件邏輯是雙贏的,因?yàn)橥ㄟ^明確定義用戶細(xì)分,可以捕獲更干凈,更有用的數(shù)據(jù)。
雙重編碼理論
我說樹時(shí)。您就會(huì)想到樹干、綠葉、樹枝。
我們的大腦就像這樣聰明:它把圖像和文字聯(lián)系在一起。
這是雙重編碼理論背后的關(guān)鍵原則,該理論指出記憶有兩個(gè)不同但相互關(guān)聯(lián)的系統(tǒng),一個(gè)用于文字信息(「樹」),另一個(gè)用于視覺信息(「樹干、綠葉、樹枝」)。
當(dāng)某樣?xùn)|西以兩種方式(圖像和文字)被「編碼」時(shí),它被理解和記住的幾率比僅僅以一種方式(圖像或文字)被編碼的幾率要高。
換句話說,將單詞和圖像配對(duì)會(huì)使它們更容易記憶。兒童書籍充分利用了這一點(diǎn)。在設(shè)計(jì)表單時(shí),有兩種方法可以將雙重編碼理論付諸實(shí)踐。
我們的大腦處理圖像比處理文本快得多。使用圖標(biāo)、照片、形狀等線索——無論什么有助于說明你的觀點(diǎn)——都會(huì)讓用戶體驗(yàn)更加直觀。
表單設(shè)計(jì)應(yīng)該是一致的,但這并不是說就不能加入一些小驚喜。通過使用非標(biāo)準(zhǔn)的界面元素——如可點(diǎn)擊的圖像和切換的滑塊——可以使表單填寫更加愉快和直觀。
你知道嗎:用戶最初對(duì)產(chǎn)品的判斷有 90% 僅僅基于顏色?
實(shí)際上,根據(jù)營銷大師尼爾·帕特爾(Neil Patel)的說法,色彩是「購買特定產(chǎn)品的原因的 85%?!拐_的組合可以使讀者人數(shù)提高 40%,理解力提高 73%,學(xué)習(xí)能力提高 78%。
你不需要成為一名設(shè)計(jì)師來找出哪種配色方案和對(duì)比效果最好。像 Adobe Color CC 和 Paletton 這樣方便的程序可以幫助你選擇一個(gè)能反映你公司形象的調(diào)色板。
我們是膚淺的生物,習(xí)慣于相信有吸引力的設(shè)計(jì)在其他方面也更好:更快、更智能、更易用。這被稱為「審美可用性效應(yīng)」,漂亮的界面增加了我們的耐心和忠誠度,甚至讓我們更有同理心。
如果內(nèi)容或布局不吸引人,38% 的人會(huì)停止使用頁面。換句話說,如果線上表單看起來不漂亮(也不容易填寫),那就是浪費(fèi)時(shí)間。
當(dāng)然,一百個(gè)人心里有一百個(gè)漢姆雷特。但是一個(gè)簡(jiǎn)單的界面、干凈的字體和時(shí)尚的造型絕對(duì)會(huì)贏得用戶歡心。
進(jìn)度條效應(yīng)
如果我們知道我們已經(jīng)取得的進(jìn)展,我們就更有動(dòng)力去完成一項(xiàng)任務(wù)。特別是已經(jīng)領(lǐng)先進(jìn)度的時(shí)候,感知上的工作量會(huì)相應(yīng)減少,最終達(dá)到超預(yù)期效果。美國教授約瑟夫·努內(nèi)斯和澤維爾·德雷澤將這種現(xiàn)象總結(jié)為「進(jìn)度條效應(yīng)」——「當(dāng)人們能看到已付出的努力時(shí),會(huì)更有動(dòng)力完成任務(wù)?!?
問題排列從易到難
如果表單里的問題按照從簡(jiǎn)單到困難的順序排列(而且保持邏輯順序),用戶將快速完成表單的初始階段。這反過來會(huì)觸發(fā)連勝效應(yīng):快速進(jìn)步和動(dòng)力感帶來的滿足感,讓用戶不愿意打破連勝。這意味著,當(dāng)表單變得更加苛刻時(shí),用戶會(huì)繼續(xù)堅(jiān)持下去。
畫出進(jìn)度條
隨時(shí)反映用戶的進(jìn)度。用戶越接近目標(biāo),就越有可能完成。如果表單是多頁的,請(qǐng)指出還有多少頁要完成。
一份來自 Clutch 的研究表明 90% 的用戶希望在線表單能有進(jìn)度條來管控他們的花費(fèi)時(shí)間。
所有的表單的關(guān)鍵都是題目。特別是在頭腦風(fēng)暴討論題目的時(shí)候,最好的就是從目標(biāo)出發(fā),倒推回來。
所以你的第一個(gè)問題就是:你的表單的目的是什么?入職表?反饋意見?研究表單?
盡可能地記下你希望從表格中獲得的信息。把它表達(dá)為題目(以問號(hào)結(jié)尾),而不是靈光一閃。一定留足時(shí)間反復(fù)推敲。
然后,寫下一些可能的答案,這些答案可能會(huì)給你一些靈感。
最后,頭腦風(fēng)暴討論這些題目,這些題目就會(huì)解答剛才提到的第一個(gè)問題。
作為調(diào)查后的回顧,寫下每個(gè)問題的回答百分比。將這些猜測(cè)與你的實(shí)際結(jié)果進(jìn)行比較,會(huì)發(fā)現(xiàn)下一輪要注意的盲點(diǎn)。
這種回顧過程還有助于您的設(shè)計(jì)并節(jié)省您的時(shí)間。
關(guān)于板塊的科學(xué)
根據(jù)表單轉(zhuǎn)換率報(bào)告,表單類型直接影響表單的板塊數(shù)量。仔細(xì)考慮每一個(gè)板塊的每個(gè)問題。
現(xiàn)在,問問自己:你真的、確定、必須要問哪些問題?
多數(shù)情況下都不是必要的。但是,即便我們明白少即是多原則,但是真的有機(jī)會(huì)去用戶的腦子里一探究竟的時(shí)候,我們還是希望問題越多越好。
當(dāng)然,這些問題的答案是很重要。但真的重要到失去用戶都在所不惜么?
你需要用戶的配合。但是每加一個(gè)板塊,他們的耐心就會(huì)失去一點(diǎn)。所以,在你把所有的題目和答案全列出來以后,能刪盡量刪掉??紤]收集數(shù)據(jù)的其他方法,并考慮這個(gè)題目是否可以推導(dǎo)出來,或者以后再說甚至完全排除。
盡量避免可選問題。如果必須,請(qǐng)?jiān)诒韱巫詈罅谐鰜怼?
將線上表單結(jié)構(gòu)化是成功的關(guān)鍵。
在你經(jīng)過頭腦風(fēng)暴討論,修剪精煉得出了最終的問題清單后,就該組織他們了。用一個(gè)「主題」標(biāo)題將它們組織成組和子組,比如說聯(lián)系方式,工作經(jīng)驗(yàn)等。
這樣一來,用戶不用去讀具體的問題就大概知道自己接下來要做什么。
現(xiàn)在要考慮問題的順序了。按照經(jīng)驗(yàn)來看,主題相似的問題,就應(yīng)該放在一起。
每一個(gè)問題,每一個(gè)板塊,都應(yīng)該激勵(lì)用戶到下一步。大跨步似的前進(jìn)會(huì)讓用戶困惑,所以要用一種一步一步引導(dǎo)用戶往前的模式。
用戶會(huì)通過調(diào)節(jié)對(duì)信息的流動(dòng)有一種預(yù)判。比如說,「你叫什么名字?」應(yīng)該在「你住在哪兒?」之前,而「介紹一下你的工作經(jīng)驗(yàn)?」應(yīng)該再往后。
最好的做法是把你的表單只限于必填的問題。選填問題將毫無必要地延長表單并激怒用戶:「你從哪里聽說我們的?」 「你想收到營銷郵件嗎?」
不過對(duì)那些非強(qiáng)制性的但是友好的問題,將它們放在表單的末尾,作為可選的后續(xù)內(nèi)容。這樣,他們會(huì)感覺不那么有侵略性,也不會(huì)影響你的轉(zhuǎn)化率。
雙管齊下的題目會(huì)讓用戶覺得模棱兩可。而且——你已經(jīng)猜到了——模糊的答案無法量化。
看看題目中有沒有用「和」,「或」。找到了嗎?如果有,把這個(gè)題目改成兩個(gè)。
題目越清楚,答案就越清楚。答案越清楚,數(shù)據(jù)就越清晰。
優(yōu)秀的表單描繪了一條清晰的路線,通過線索、提示等引導(dǎo)用戶完成表單。路線越短,用戶完成的可能性就越大,所以盡可能地給用戶提供便利。
以下是比較有用的便利方法:
郵編索引
要求用戶填寫地址的時(shí)候,最好的方式是只讓他們填寫門牌號(hào)和郵編,然后使用郵編索引服務(wù)完成地址信息的其他內(nèi)容。(譯者注:此條比較適用于國外。)
默認(rèn)提示
默認(rèn)文本提示是出現(xiàn)在表單字段中描述其預(yù)期值的淺色文本。只有在存在潛在歧義的情況下,才應(yīng)該使用它。
字段標(biāo)簽
字段標(biāo)簽是出現(xiàn)在字段上面,關(guān)于問題性的文本。它經(jīng)常都會(huì)出現(xiàn),并且不應(yīng)該用占位符提示來替代。人們常常為使用默認(rèn)提示同時(shí)作為字段標(biāo)簽,但卻引發(fā)了可用性的問題。
換句話說,你可以使用字段標(biāo)簽,不用默認(rèn)提示;但是不能在沒有字段標(biāo)簽的情況下只有默認(rèn)提示。
預(yù)設(shè)答案
大家都喜歡做選擇題。它們可以節(jié)省讀者的時(shí)間,并且易于評(píng)估。
你可以通過回答「是/否」、「單選」或「多選」來預(yù)定義答案。如果有一個(gè)你無法預(yù)測(cè)的答案,添加一個(gè)「其他」文本框讓讀者輸入一個(gè)自定義的答案。
搜索預(yù)測(cè)
在要求用戶選擇他們的國家、職業(yè)或具有大量預(yù)定義選項(xiàng)的其他內(nèi)容時(shí),搜索預(yù)測(cè)會(huì)減少所需的打字量(和認(rèn)知負(fù)荷)。
表單只完成了一般的工作。它是被動(dòng)的,不是主動(dòng)的。表單的效果依賴于填表者。它們需要從一開始就嵌入到框架中。
表單是交流的工具。需要兩方來參與。
因此,在設(shè)計(jì)表單時(shí),你還需要從用戶的角度考慮……這從他們的目的和環(huán)境開始。
為什么要有人填寫你的表格?他們的目的是什么?把它們寫下來。
目的和環(huán)境息息相關(guān),所以要讓環(huán)境在你的頭腦中具體化。他們?cè)谀睦镆约叭绾翁顚懕砀??在家嗎?在筆記本電腦上?在手機(jī)上?在地鐵上?
環(huán)境不僅僅是場(chǎng)景。關(guān)鍵是用戶能明白在他們的幫助下你的表單可以實(shí)現(xiàn)什么目的。
表單需要吸引目標(biāo)受眾的注意力——那么,這些受眾由誰組成?
在泛泛人群中思考是沒有意義的。要集中你的注意力,集中在一個(gè)人身上——或者說,一個(gè)「買家畫像」比任何一個(gè)普通人群給你的信息都多。
試著描繪一個(gè)理想的用戶畫像,有工作、個(gè)性、家庭、希望和夢(mèng)想。集中思考這個(gè)理想用戶群體。他們?cè)谀睦锷詈凸ぷ鳎克麄兊挠^點(diǎn)和價(jià)值觀是什么?他們與你的業(yè)務(wù)有什么關(guān)系?
如果你發(fā)現(xiàn)對(duì)這些理想群體來說什么是有意義的,你就離最終給你帶來高價(jià)值數(shù)據(jù)的那些問題又進(jìn)了一步。
這些人就是你需要反復(fù)思考的人。這些人就是會(huì)給你答案的人。
表單視覺和結(jié)構(gòu)
填表單肯定不會(huì)像過生日一樣充滿驚喜。
一致性是保持表單填寫體驗(yàn)順暢的關(guān)鍵。一致就是指顏色要一致、視覺感受要一致、主題調(diào)性要一致。
你的公司形象是什么?什么短語和單詞能概括這一點(diǎn)?你的價(jià)值觀是什么?在 JotForm,我們注重包容性、友好度和腳踏實(shí)地——我們的語言就在傳達(dá)這些主旨。
當(dāng)你定義了品牌調(diào)性后,在所有的表單中保持住——你的用戶應(yīng)該感覺到他們每一步都在和同一個(gè)友好的人互動(dòng)。
視覺一致性同樣重要。在整個(gè)表單中都應(yīng)該用一種視覺風(fēng)格(以后創(chuàng)建的其他表單同樣如此)。
Google 的 UX 研究人員發(fā)現(xiàn),將標(biāo)簽左上對(duì)齊會(huì)減少表單完成時(shí)間,因?yàn)樗枰摹敢曈X注視」更少。
眼動(dòng)研究表明,簡(jiǎn)單的單列布局比并排放置的多列布局要好。
該規(guī)則的唯一例外是要求輸入日期(日,月,年)或時(shí)間(小時(shí)和分鐘)時(shí),其中多個(gè)字段應(yīng)在一行上。
每頁一件事是一種心理技巧,定義為:
「將一個(gè)復(fù)雜的過程分解成多個(gè)小步驟,并將這些小步驟單獨(dú)用一頁來呈現(xiàn)?!?
本質(zhì)上,用戶只需要關(guān)注一件事。一條信息、一個(gè)決定、一個(gè)問題要回答。
整潔的頁面鼓勵(lì)用戶繼續(xù)執(zhí)行任務(wù)。
把輸入框的長度控制到正好能夠包含所有的輸入字符的長度(用戶可以看到填入的完整內(nèi)容)。
輸入框的長度應(yīng)該反映用戶預(yù)期輸入的文本量。郵政編碼或門牌號(hào)等字段應(yīng)該短于地址行。
貝馬爾德研究所的可用性研究發(fā)現(xiàn),如果一個(gè)字段太長或太短,用戶開始懷疑他們是否正確理解了標(biāo)簽。這尤其適用于具有異常數(shù)據(jù)或技術(shù)標(biāo)簽的字段,如信用卡背面的 CVV 碼。
表單設(shè)計(jì)中的錯(cuò)誤和完成路徑
就像生活中一樣,填寫表格時(shí)有可能出錯(cuò)就像生活中一樣,關(guān)鍵問題是發(fā)出錯(cuò)誤信號(hào)并允許快速糾正。
十分之一的男性有一定程度的色盲。
當(dāng)顯示驗(yàn)證錯(cuò)誤或成功消息時(shí),不要依賴使用綠色或紅色文本(因?yàn)榧t綠色盲相對(duì)常見)。使用文本、圖標(biāo)或其他東西。JotForm Cards 用一個(gè)微動(dòng)畫警告用戶,當(dāng)出現(xiàn)錯(cuò)誤時(shí),該動(dòng)畫會(huì)說「錯(cuò)誤」。
向用戶顯示錯(cuò)誤發(fā)生的位置,并說明原因。
如果您必須使用驗(yàn)證,請(qǐng)確保它是內(nèi)嵌的(在字段的右側(cè)),并提前報(bào)告錯(cuò)誤。不要等到用戶點(diǎn)擊提交來報(bào)告驗(yàn)證錯(cuò)誤。但是同樣,內(nèi)聯(lián)驗(yàn)證不應(yīng)該是實(shí)時(shí)的,因?yàn)檫@可能會(huì)在用戶完成字段之前報(bào)告錯(cuò)誤。
你需要一個(gè)電子郵件地址,你會(huì)收到一個(gè)沒有@符號(hào)的回復(fù)。你要求一個(gè)電話號(hào)碼,而你的回答中有一半位數(shù)不夠。
打字錯(cuò)誤不應(yīng)該成為表單可用性的障礙。
使用「字段驗(yàn)證」來確保得到您需要的答案,例如,「答案必須包含__」
JotForm Cards 恢復(fù)錯(cuò)誤輸入域名的用戶的電子郵件地址;約翰@ gnail . com 應(yīng)該是 john@gmail.com。
如果用戶回答的方式有很大差異(例如,用+12345678912、+44 12345678912、012345678912回答「電話號(hào)碼」),請(qǐng)將其轉(zhuǎn)換為一致的格式。
什么是支付表單?
支付表單就是線上的收銀臺(tái)。它授權(quán)在線支付,驗(yàn)證用戶的詳細(xì)信息,檢查資金是否可用,并確保你收到支付。
支付整合有很多優(yōu)勢(shì)。他們幫助你 :
在設(shè)計(jì)支付形式時(shí),遵循最佳實(shí)踐是至關(guān)重要的。以下是一些關(guān)鍵規(guī)則。
1. 限制付款步驟
Baymard 研究所分析了支付表單,發(fā)現(xiàn)支付過程太長或太復(fù)雜是放棄支付的主要原因之一。所以一定要分塊,分得越細(xì)越好。
2. 使用安全視覺提醒
當(dāng)輸入敏感的細(xì)節(jié),如信用卡細(xì)節(jié)時(shí),用戶會(huì)對(duì)任何看起來可疑的東西保持高度警惕。最近的一項(xiàng)研究顯示,出于安全考慮,17%的購物者沒有付費(fèi)就離開了頁面。
專業(yè)的支付形式讓用戶感到輕松,而任何看起來「不舒服」的東西都會(huì)讓他們感到緊張。這就是為什么你應(yīng)該從頭開始構(gòu)建支付表單時(shí)就保持謹(jǐn)慎——即使是最小的錯(cuò)誤或不一致也會(huì)嚇跑用戶。
它還有助于在表單上啟用 SSL 來幫助保護(hù)數(shù)據(jù)。用戶知道所有的互動(dòng)都是加密的,因此可以安心。JotForm 是最安全的數(shù)據(jù)傳輸方式:我們符合支付卡行業(yè)數(shù)據(jù)安全標(biāo)準(zhǔn) (PCI DSS) 1級(jí),并啟用了 SSL。
3. 清楚地解釋你為什么要求敏感信息
人們?cè)絹碓疥P(guān)注隱私和信息安全。如果你要求必須填寫敏感信息,請(qǐng)確保使用字段下方的注釋文本解釋為什么需要這些信息。
4. 保存數(shù)據(jù)
讓用戶可以選擇保存他們的地址和支付信息,可以使這個(gè)過程更快、更簡(jiǎn)單——尤其是在手機(jī)這樣的設(shè)備上。這同時(shí)也會(huì)給回頭用戶一種獎(jiǎng)勵(lì)和忠誠的感覺。
5. JotForm添加支付集成的方式
一切就緒?,F(xiàn)在你可以在網(wǎng)站、博客或社交媒體上輕松銷售你的產(chǎn)品。當(dāng)你完成表單后…萬歲!完成了!但是……等一下。你的表單可能已經(jīng)完成,但現(xiàn)在還不是發(fā)出去的時(shí)候…
還有最后一個(gè)步驟。
6. 發(fā)出前,測(cè)試您的表單
我們都有盲點(diǎn)。所以保持謹(jǐn)慎很重要,畢竟數(shù)據(jù)的質(zhì)量決定了表單的成功。因此,需要事前檢查一下調(diào)研題目,確保答案選項(xiàng)的完整可靠,沒有任何遺漏。
把表單發(fā)送給家人/朋友,并要求他們記錄填寫表單需要多長時(shí)間,以及對(duì)這一連串的問題他們體驗(yàn)如何。這也將有助于你下次評(píng)估表單的設(shè)計(jì)。
文章來源:優(yōu)設(shè)
在涉及體驗(yàn)細(xì)節(jié)的小需求上,避免所有的不周到,方才是周到
其中,個(gè)人認(rèn)為,最為核心的是第二點(diǎn):多體驗(yàn)原型或產(chǎn)品,直到自己覺得周到為止。
文章來源:站酷
自從做設(shè)計(jì)以來經(jīng)常會(huì)看到一些很高大上的理論,例如:格式塔法則、網(wǎng)格系統(tǒng)、黃金分割法等等,這些詞語給人第一印象就是很高大上,很難學(xué)會(huì),也有很多設(shè)計(jì)師看到這些理論就被嚇到,認(rèn)為自己學(xué)不會(huì),也不想學(xué),因?yàn)槔碚撝R(shí)確實(shí)是學(xué)起來很枯燥。對(duì)于初學(xué)者的設(shè)計(jì)師來說,這些理論可以在短時(shí)間不用學(xué)太多,但是對(duì)已經(jīng)工作幾年的設(shè)計(jì)師來說,這些設(shè)計(jì)理論知識(shí)也是必不可少的。
只有掌握設(shè)計(jì)中必要的設(shè)計(jì)知識(shí),才能讓自己的設(shè)計(jì)眼界、技能得到提升。就我個(gè)人而言,我在設(shè)計(jì)初期也是很反感這些所謂的理論知識(shí),對(duì)于我來說簡(jiǎn)單通俗的教學(xué)才是最容易讓人接受的,理論太深?yuàn)W,我真的無法從中體會(huì)到真正的奧秘。但是,越到后面,我越喜歡研究那些設(shè)計(jì)理論知識(shí),因?yàn)槲以絹碓蕉媚切├碚摰闹匾?,?duì)我的設(shè)計(jì)也有很大的幫助。所以今天我采用通俗易懂的方法,教大家去理解和掌握這些高大上的設(shè)計(jì)理論知識(shí)。
今天主要分享我們經(jīng)常聽到的黃金分割構(gòu)圖法。
黃金分割構(gòu)圖法:是一種由古希臘人發(fā)明的幾何學(xué)公式,遵循這一規(guī)則的構(gòu)圖形式被認(rèn)為是「和諧」的,在欣賞一件形象作品時(shí)這一規(guī)則的意義在于提供了一條被合理分割的幾何線段。
黃金分割構(gòu)圖法的基本理論來自于黃金比例 ── 1 : 1.618。
黃金分割構(gòu)圖法運(yùn)用到海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo 設(shè)計(jì)、電視電影、建筑等等領(lǐng)域。在攝影中也經(jīng)常會(huì)引入黃金分割比例,可以讓照片感覺更自然、舒適,更能吸引觀賞者,給人一種賞心悅目的視覺感受。
我們先賞析一些運(yùn)用黃金分割法的優(yōu)秀案例,通過賞析能讓我們體會(huì)到它的美和重要性。
1. 在海報(bào)中的應(yīng)用
從上面的 2 張人物海報(bào)案例中,可以看出都利用了黃金分割螺旋法的技巧,當(dāng)整張圖作為背景時(shí),我們不知道圖片主題位置的掌控時(shí),就可以采用黃金分割法的原則。對(duì)于人物,可以根據(jù)想要突出的人物某一部位,直接采用這種分割方法快速找到版面位置
下面2張海報(bào)是通過圖形和文字的結(jié)合,主題文字排版的位置也都剛剛好是黃金分割的編排,帶給人一種美的、舒適的畫面感,圖片和文字在版面的比例剛好是 1 : 0.618。
2. 在網(wǎng)頁中的應(yīng)用
上面 2 個(gè)網(wǎng)頁都采用了黃金分割的原則,大體將版面分為圖片區(qū)+文案區(qū),比例為 1 : 0.618。上面同時(shí)采用了網(wǎng)格重疊的形式,而下面的就是最基本的黃金分割比例。版面的編排整體給人一種呼吸感、有序的、層次分明的視覺感受,并且瀏覽的順序也是井井有條,如下圖閱讀順序指引:
3. 在繪畫上的應(yīng)用
像我們看熟悉的名畫「蒙娜麗莎」、「維納斯的誕生」等也符合黃金分割的比例。黃金分割比例也在這些作品上經(jīng)過了歷史認(rèn)證,利用黃金分割布局,讓畫面更耐看、更精致。
4. 在攝影上的應(yīng)用
在攝影中也經(jīng)常會(huì)引入黃金分割比例,可以讓照片感覺更自然、舒適,更能吸引觀賞者,給人一種賞心悅目的視覺感受。使用黃金分割的攝影可以制造出一種空曠、寂靜的視覺效果,也可以制造出一種特寫鏡頭的效果。不知道怎么拍照好看,學(xué)會(huì)這一招你的攝影立馬高大上。
5. 在建筑上的應(yīng)用
在建筑設(shè)計(jì)中的運(yùn)用也有很多案例,例如上面的金字塔和泰姬陵的多處布局都能看出黃金分割,第三張中國古建筑也都運(yùn)用了黃金分割構(gòu)圖。自古以來很多文化建筑都采用了這個(gè)構(gòu)圖,讓建筑看起來更加美觀、耐看、精致。
了解了螺旋黃金分割法的用途和好處,我們最主要的是需要知道怎么來畫這個(gè)螺旋黃金圖。
1. 新建畫布
2. 畫正方形
這里畫正方形是最關(guān)鍵的一步,我們只要知道螺旋黃金圖的比例就可以很快的畫出來。
螺旋黃金圖比例為:13 : 8 : 5 : 3 : 2 : 1
只要知道螺旋黃金圖的比例我們就可以開始畫正方形了,簡(jiǎn)單的正方形不用我多說吧。我們按 10 倍的比例來畫圖,簡(jiǎn)單的意思就是前面的螺旋黃金圖比例都乘 10,變?yōu)?130 : 80 : 50 : 30 : 20 : 10,再根據(jù)這個(gè)數(shù)字畫出 6 個(gè)正方形。
正方形畫好后按照這個(gè)轉(zhuǎn)圈的順序排好即可。
3. 畫圓弧線
正方形畫好后,畫圓弧線,可以通過畫正圓得到。
圓弧線為正圓的四分之一,圓的半徑為每個(gè)不同正方形的邊長,通過不同大小的正方形畫出不同大小的圓弧即可。
開始畫圓?。阂源笳叫蔚挠蚁陆菫閳A心畫正圓,注意相切位置,畫好后刪除多余的錨點(diǎn)。
△ 圓心位置
△ 相切位置
△ 刪除多余錨點(diǎn)
△ 圓弧畫完后
到了這一步基本也就出現(xiàn)我們想要的螺旋黃金圖,最后只需要將我們的正方形改成描邊的模式即可。
△ 最終圖形
這里展示一下第二種方法:
螺旋黃金比1 : 1.618在畫面中怎么看?
說了這么多,沒有實(shí)際的操作案例你們是不是也很頭痛,到底拿到這個(gè)技巧怎么去使用呢?在我這里例舉一個(gè)橫版和一個(gè)豎版的案例。
找素材
這里找來幾張圖片,因?yàn)槭亲龇治霭咐?,所以我就選擇我自己喜歡的圖,我選擇的是圖1。
圖片調(diào)整
圖片確定后,我們就需要把圖放到我們的畫布中。
但是問題來了,一般我們的設(shè)計(jì)尺寸基本是不會(huì)和找到的素材是一樣大的,我們到底要怎樣放大圖片呢?圖片中哪些元素可以忽略,哪些需要重視?螺旋黃金分割法就可以用上了。
利用我們的螺旋黃金分割圖,放在我們的版面中。接下來就放大我們的素材圖片,分析圖片結(jié)構(gòu)。圖片上方都是天空,左邊是海和天空,只有右下比較復(fù)雜,有人和零碎的石頭,所以我們這里圖片就以人為畫面中的焦點(diǎn),那么我們的螺旋圖就需要改變一下位置。
調(diào)整圖片大小和位置,將圖片中的人物放在螺旋圖的焦點(diǎn)位置,這樣我們的版面就快速地確定了視覺焦點(diǎn)。
文字排版
將文字排版在畫布中,再根據(jù)文字豎排的樣式,和人閱讀的習(xí)慣,調(diào)整圖的方向和文字位置,使人看向主題文字,給人一種指引的方向。
總結(jié):主要利用螺旋黃金分割法調(diào)整圖片的位置焦點(diǎn),使畫面中心達(dá)到舒適耐看和精致的視覺效果。
標(biāo)記分析圖:
這個(gè)案例我就不做太多的講解,因?yàn)楹芎?jiǎn)單,直接利用螺旋黃金分割構(gòu)圖的方法,將版面按1 : 0.618的比例劃分,然后在這個(gè)比例畫布中排版文案和圖片。
圖片位置排版
素材選擇上面的圖2,這里就做一張豎版的海報(bào)。
將素材圖放在畫布中,準(zhǔn)備好我們的螺旋黃金分割圖,也放在畫布中。根據(jù)圖片本身的特點(diǎn),人物只有上半身,所以將圖片放在底部最為合適。至于人物應(yīng)該靠中間還是靠邊,我們同可以根據(jù)圖片人物本身的姿勢(shì)判斷,根據(jù)人物是微抬頭向上看,角度約 30 度,所以選擇將人物靠邊。
再就是人物具體位置的掌控,我們同樣和上面的案例一樣直接利用螺旋黃金分割圖做參考位置選擇,所以就很快找到合適的位置,如上面右圖。
填充背景和文案
我們將背景顏色填充為天空統(tǒng)一的色彩,建立網(wǎng)格,將文案排版在畫布中,上面主要是海報(bào)中的主要文案及主題文案,文案和圖片的總體比例為1 : 0.618,遵循我們的黃金法則。
根據(jù)圖片的氣質(zhì),圖片中的色彩和人物都屬于文藝氣質(zhì),清新、寂靜、雅致的感覺,所以我們這里可以選襯線體宋體,結(jié)合韓文來體現(xiàn)整體的氣質(zhì)。
效果展示
最后看看海報(bào)效果吧,主要講解螺旋黃金分割圖的使用,所以排版方面講解的比較簡(jiǎn)單,以及主題文字都采用最簡(jiǎn)單粗暴的字體,沒有過多的修飾。
文章分享了螺旋黃金分割構(gòu)圖的用途,很廣泛,包含海報(bào)設(shè)計(jì)、畫冊(cè)設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、繪畫、服裝設(shè)計(jì)、logo設(shè)計(jì)、電視電影、建筑、攝影等等領(lǐng)域,以及分享了黃金分割圖形的畫法,3 個(gè)簡(jiǎn)單的案例實(shí)操,利用黃金分割構(gòu)圖來幫助我們構(gòu)圖和排版,最有利于我們對(duì)圖片焦點(diǎn)位置的選擇和排版分布的掌控。
文章來源:優(yōu)設(shè)
在做項(xiàng)目做產(chǎn)品的過程中,作為互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)師的我們,經(jīng)常會(huì)接到來自 PM/領(lǐng)導(dǎo)/業(yè)務(wù)方等等的各種需求。有的時(shí)候,哪怕一個(gè)小功能、次次次級(jí)頁面都會(huì)爭(zhēng)得不可開交。這個(gè)時(shí)候怎么辦呢?到底應(yīng)該聽誰的呢?哪個(gè)需求優(yōu)先級(jí)高?哪種呈現(xiàn)方法是更靠譜的呢?
今天我們就來聊聊一個(gè)非常實(shí)用的需求分級(jí)方法 — KANO模型。
KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對(duì)用戶需求分類和排序的工具。通過分析用戶對(duì)產(chǎn)品功能的滿意程度,對(duì)產(chǎn)品功能進(jìn)行分級(jí),從而確定產(chǎn)品實(shí)現(xiàn)過程中的優(yōu)先級(jí)。
KANO 模型是一個(gè)典型的定性分析模型,一般不直接用來測(cè)量用戶的滿意度,常用于識(shí)別用戶對(duì)新功能的接受度。幫助企業(yè)了解不同層次的用戶需求,找出顧客和企業(yè)的接觸點(diǎn),挖掘出讓顧客滿意至關(guān)重要的因素。
在 KANO 模型中,根據(jù)不同類型的需求與用戶滿意度之間的關(guān)系,可將影響用戶滿意度的因素分為五類:基本型需求、期望型需求、興奮型需求、無差異需求、反向型需求。
興奮型需求
所謂暗處,用戶意想不到的,需要挖掘/洞察。若不提供此需求,用戶滿意度不會(huì)降低;若提供此需求,用戶滿意度會(huì)有很大的提升。
當(dāng)用戶對(duì)一些產(chǎn)品或服務(wù)沒有表達(dá)出明確的需求時(shí),企業(yè)提供給顧客一些完全出乎意料的產(chǎn)品屬性或服務(wù)行為,使用戶產(chǎn)生驚喜,用戶就會(huì)非常滿意,從而提高用戶忠誠度。
這類需求往往是代表顧客的潛在需求,企業(yè)的做法就是去尋找發(fā)掘這樣的需求,領(lǐng)先對(duì)手。
期望型需求
所謂癢處。當(dāng)提供此需求,用戶滿意度會(huì)提升;當(dāng)不提供此需求,用戶滿意度會(huì)降低。
它是處于成長期的需求,客戶、競(jìng)爭(zhēng)對(duì)手和企業(yè)自身都關(guān)注的需求,也是體現(xiàn)競(jìng)爭(zhēng)能力的需求。
對(duì)于這類需求,企業(yè)的做法應(yīng)該是注重提高這方面的質(zhì)量,力爭(zhēng)超過競(jìng)爭(zhēng)對(duì)手。
基本型需求
所謂痛點(diǎn)。對(duì)于用戶而言,這些需求是必須滿足的,理所當(dāng)然的。當(dāng)不提供此需求,用戶滿意度會(huì)大幅降低,但優(yōu)化此需求,用戶滿意度不會(huì)得到顯著提升。
對(duì)于這類需求,是核心需求,也是產(chǎn)品必做功能,企業(yè)的做法應(yīng)該是注重不要在這方面減分,需要企業(yè)不斷調(diào)查和了解用戶需求,并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。
無差異需求
用戶根本不在意的需求,對(duì)用戶體驗(yàn)毫無影響。
無論提供或不提供此需求,用戶滿意度都不會(huì)有改變。對(duì)于這類需求,企業(yè)的做法應(yīng)該是盡量避免。
反向型需求
用戶根本都沒有此需求,提供后用戶滿意度反而下降。
總而言之,我們做產(chǎn)品設(shè)計(jì)時(shí),需要盡量避免無差異型需求、反向型需求,至少做好基本型需求、期望型需求,如果可以的話再努力挖掘興奮型需求。
KANO 模型分析方法主要是通過標(biāo)準(zhǔn)化問卷進(jìn)行調(diào)研,根據(jù)調(diào)研結(jié)果對(duì)各因素屬性歸類,解決需求屬性的定位問題,以提高用戶滿意度。
1. 明確目的
做之前,必須明白調(diào)研的目的是什么,是否合適用 KANO 模型解決,為什么要用 KANO 模型解決。
例如:企業(yè)為賣家開發(fā)的 CRM 工具,隨著賣家客戶的不斷增長,CRM 系統(tǒng)中需引入一些新的功能滿足其管理需求。而我們作為產(chǎn)品開發(fā)設(shè)計(jì)者,需要知道這些功能哪些是基本功能,哪些是增值功能,功能的優(yōu)先級(jí)又該如何排列等等。
KANO 模型就可以幫助我們很好的貼和業(yè)務(wù)需求,從具備程度和滿意程度這兩個(gè)維度出發(fā),將 CRM 中新增的功能進(jìn)行區(qū)分和排序,從而知道:哪些功能是一定要有,否則會(huì)直接影響用戶體驗(yàn)的(基礎(chǔ)屬性、期望屬性);哪些功能是沒有時(shí)不會(huì)造成負(fù)向影響,擁有時(shí)會(huì)給用戶帶來驚喜的(興奮屬性);哪些功能是可有可無,具備與否對(duì)用戶都不會(huì)有大影響的(無差異因素)。
2. 設(shè)計(jì)問卷
此問卷調(diào)查表劃分維度有兩個(gè):提供時(shí)的滿意程度、不提供時(shí)的滿意程度。而滿意程度被劃分為 5 級(jí)(非常滿意、滿意、一般、不滿意、很不滿意),因?yàn)槿说臐M意程度往往是漸變的,而不是突變的。
滿意程度的文案可根據(jù)實(shí)際問題靈活修改,如使用(非常喜歡、理應(yīng)如此、無所謂、勉強(qiáng)接受、很不喜歡 或者 非常有用、挺實(shí)用、無所謂、不實(shí)用、很不實(shí)用 )更加形象的描述。
例如:在「通訊錄」中,是否需要直接提供「撥打電話」的按鈕?問卷設(shè)置正反兩題:
如果我們?cè)凇竿ㄓ嶄洝沟目蛻袅斜碇?,提供「撥打電話」的按鈕,你的感受是:
A.非常喜歡 B.理應(yīng)如此 C.無所謂 D.勉強(qiáng)接受 E.很不喜歡
如果我們?cè)凇竿ㄓ嶄洝沟目蛻袅斜碇?,沒有提供「撥打電話」的按鈕,你的感受是:
A.非常喜歡 B.理應(yīng)如此 C.無所謂 D.勉強(qiáng)接受 E.很不喜歡
為了更加形象且一目了然,我們可以如下設(shè)計(jì)。填問卷的人只需要在空白處打勾打叉就好了,非常方便。
設(shè)計(jì)問卷的過程中,有幾點(diǎn)要注意:
例如:
3. 清洗數(shù)據(jù)
在收集所有問卷之后,注意清洗掉個(gè)別的明顯胡亂回答的個(gè)例。如全部問題都選擇「我很喜歡」或「很不喜歡」的,這種回答毫無參考價(jià)值。
4. 整理分類
為了能夠?qū)⑿枨髤^(qū)分為基本型需求、期望型需求和興奮需求,需按照正向和負(fù)向問題的回答對(duì)屬性進(jìn)行分類,具體分類對(duì)照下表。
當(dāng)正向問題的回答是「我喜歡」,負(fù)向問題的回答是「我不喜歡」,那么 KANO 評(píng)價(jià)表中,這項(xiàng)功能特性就為「O」,即期望型。
如果將用戶正負(fù)向問題的回答結(jié)合后,為「M」或「A」,則該功能被分為基本型需求或興奮型需求。
其中,R 表示用戶不需要這種功能,甚至對(duì)該功能有反感;I 類表示無差異需求,用戶對(duì)這一功能無所謂。
Q 表示有疑問的結(jié)果,一般不會(huì)出現(xiàn)這個(gè)結(jié)果(除非這個(gè)問題的問法不合理,或者是用戶沒有很好的理解問題,或者是用戶在填寫問題答案時(shí)出現(xiàn)錯(cuò)誤)。
簡(jiǎn)單來說就是:
A:興奮型;O:期望型;M:必備型;I:無差異型;R:反向型;Q:可疑結(jié)果
注意:以上對(duì)照表只是的最常見的一種歸類方式。實(shí)際操作中,可因人而異,因產(chǎn)品、公司、地域而異(尤其是關(guān)于「R」和「O」的定義),因?yàn)闈M意度本身就難以衡量。
判斷 KANO 屬性
記錄所有合理的數(shù)據(jù),計(jì)算出各項(xiàng)占比,填寫在下面的對(duì)照表里面。
從上表中不難看出,「通訊錄中「撥打電話」「這個(gè)功能在 6 個(gè)維度上均可能有得分,將相同維度的比例相加后,可得到6 個(gè)屬性維度的占比總和。 總和最大的一個(gè)屬性維度,便是該功能的屬性歸屬。
可看出「在通訊錄中提供 ‘撥打電話’ 功能屬于興奮型需求。即說明沒有這個(gè)功能,用戶不會(huì)有強(qiáng)烈的負(fù)面情緒,但是有了這個(gè)功能,會(huì)讓用戶感受到滿意和驚喜。
如果你只判斷這一個(gè)需求,那么進(jìn)行到這一步就可以到此為止了。如果涉及到多個(gè)需求的排序分級(jí),你還需進(jìn)行下一步。
計(jì)算 better-worse系數(shù)
Better-worse 系數(shù),表示某功能可以增加滿意或者消除不喜歡的影響程度。
Better,可以解讀為增加后的滿意系數(shù)。Better 的數(shù)值通常為正,代表如果產(chǎn)品提供某種功能或服務(wù),用戶滿意度會(huì)提升。正值越大/越接近 1,則表示用戶滿意度提升的效果會(huì)越強(qiáng),滿意度上升的越快。
Worse,可以叫做消除后的不滿意系數(shù)。Worse 的數(shù)值通常為負(fù),代表產(chǎn)品如果不提供某種功能或服務(wù),用戶的滿意度會(huì)降低。其負(fù)值越大/越接近 -1,則表示對(duì)用戶不滿意度的影響最大,滿意度降低的影響效果越強(qiáng),下降的越快。
因此,根據(jù) better-worse 系數(shù),對(duì)兩者系數(shù)絕對(duì)分值較高的項(xiàng)目應(yīng)當(dāng)優(yōu)先實(shí)施。
其計(jì)算公式如下:
結(jié)果產(chǎn)出
例如:某產(chǎn)品希望優(yōu)化 5 項(xiàng)功能,但是不知道哪些是用戶需要的。通過 KANO 調(diào)研分析,可以分別計(jì)算出 5 項(xiàng)功能的better-worse 系數(shù)。
根據(jù) 5 項(xiàng)功能的 better-worse 系數(shù)值,將散點(diǎn)圖劃分為四個(gè)象限,以確立需求優(yōu)先級(jí)。
在實(shí)際項(xiàng)目中:
結(jié)論:
根據(jù) KANO 模型計(jì)算出的 better-worse 系數(shù)值,說明該產(chǎn)品先滿足功能 5 和 4,再優(yōu)化功能 2,最后滿足功能 1。而功能 3對(duì)用戶來說有或者沒有都無所謂,屬無差異型需求,并沒有必要花大力氣去實(shí)現(xiàn)。
KANO 模型定義了三個(gè)層次的需求:基本型需求、期望型需求和興奮型需求。
根據(jù) KANO 模型建立產(chǎn)品需求分析優(yōu)先級(jí),運(yùn)用到產(chǎn)品設(shè)計(jì)中就是要抓住用戶的核心需求,解決用戶痛點(diǎn)(基本型需求),抓住用戶癢點(diǎn)(期望型需求)。在確保這兩者都解決的前提下,再給用戶一些 high 點(diǎn)(興奮型需求)。
嚴(yán)格來說,KANO 模型并不是一個(gè)測(cè)量用戶滿意度的模型,而是對(duì)用戶需求的分類,通常在滿意度評(píng)價(jià)工作前期作為輔助研究的 典型定性分析模型。
KANO 模型的目的是通過對(duì)用戶的不同需求進(jìn)行區(qū)分處理,了解不同層次的用戶需求,幫助企業(yè)找出提高產(chǎn)品用戶滿意度的切入點(diǎn),或者識(shí)別出使用戶滿意至關(guān)重要的因素。
但需求會(huì)因人而異,會(huì)因文化差異而不同; 也會(huì)隨著時(shí)間變化。可能前段時(shí)間的期望型需求,甚至興奮型需求,到如今已變成了基礎(chǔ)型需求。所以作為產(chǎn)品設(shè)計(jì)者,我們應(yīng)該持續(xù)調(diào)研需求,對(duì)產(chǎn)品進(jìn)行迭代優(yōu)化。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn