首頁(yè)

B端設(shè)計(jì),我總結(jié)了這些交互設(shè)計(jì)要點(diǎn)

資深UI設(shè)計(jì)者

B 端工作看起來(lái)總是沒(méi)有 C 端工作那么有趣,面臨的限制比較多,面對(duì)客戶(金主爸爸),很多時(shí)候總是左右為難。在實(shí)際工作中,面對(duì)這些情況該怎么辦?筆者根據(jù)自己的 B 端工作經(jīng)驗(yàn),總結(jié)了一些交互設(shè)計(jì)的要點(diǎn)。

從事 B 端 SaaS 行業(yè)已經(jīng)兩年有余,從最開(kāi)始面對(duì)需求的茫然無(wú)措,到現(xiàn)在已經(jīng)有了自己的一些基本方法論,這期間經(jīng)歷了從有人帶到自己摸索的一個(gè)階段。

每天看看文章、看看書,大家講的都是 C 端的產(chǎn)品,C 端的交互和體驗(yàn);每天看同行們分析的不是如何提高用戶活躍量,就是 APP 的設(shè)計(jì)風(fēng)格。這在我一個(gè) B 端交互看來(lái),無(wú)比羨慕啊。

C 端項(xiàng)目的設(shè)計(jì)師感覺(jué)每天和一線用戶打交道,忙得不亦樂(lè)乎,可以與用戶直接對(duì)接,可以添加有趣生動(dòng)的文案。

而對(duì)于一個(gè)做 SaaS 的 B 端來(lái)說(shuō),Boss 常說(shuō)的話就是:

你這個(gè)顏色太鮮艷了。

我們是 B 端,你這種頁(yè)面布局不合適吧。

這個(gè)文案太幼稚了,不適合我們產(chǎn)品的調(diào)性。

中規(guī)中矩就好,不要太跳。

整理了一堆的字段,畫了無(wú)數(shù)的線框和流程圖,卻拿不出 C 端設(shè)計(jì)師才有的豐富多彩的作品集,

盡管如此,設(shè)計(jì)的原則是通用的,無(wú)論是尼爾森十大可用性原則,還是格式塔原理,在設(shè)計(jì)方案的落實(shí)上,都有著相同的方法論。

無(wú)意在此討論 B 端和 C 端之間的差異,僅以此文章來(lái)總結(jié)下我自己的一些工作經(jīng)驗(yàn),如有錯(cuò)誤,敬請(qǐng)指出。

從業(yè)務(wù)需求的對(duì)接,到界面交互的細(xì)節(jié),從功能的設(shè)計(jì)要點(diǎn),再到產(chǎn)品的發(fā)展導(dǎo)向,我總結(jié)出了以下幾個(gè)方面,逐步展開(kāi):

  • 提煉需求
  • 減少出錯(cuò)
  • 提率
  • 提高通用性
  • 中正原則

提煉需求

C 端設(shè)計(jì)師最開(kāi)心的可能就是收到用戶的反饋需求了吧,這樣表示自己的產(chǎn)品還有人在用,然后建個(gè)群讓用戶開(kāi)開(kāi)心心吐槽,完了就從里面提煉適合產(chǎn)品的一些需求和建議。

而對(duì)于 B 端設(shè)計(jì)師來(lái)說(shuō),如何處理需求是其成長(zhǎng)的第一關(guān),尤其是 SaaS 行業(yè),不會(huì)處理需求,產(chǎn)品的功能更新將會(huì)遇到極大的問(wèn)題。

B 端的用戶不像 C 端,雖然可以用用戶畫像來(lái)進(jìn)行歸類和分析。但是由于 B 端的直接用戶是付費(fèi)用戶,付了錢的就是大爺,因此大爺提的需求你敢不應(yīng)?

用戶提的需求亂七八糟,有些是體驗(yàn)問(wèn)題,有些是功能問(wèn)題,有些就是屬于比較極端的需求。那種傳說(shuō)中甲方要你做一個(gè)可以根據(jù)手機(jī)屏顯示顏色而改變手機(jī)殼顏色的需求,在 B 端行業(yè)也是存在的。

那么問(wèn)題來(lái)了,我們?cè)撊绾翁幚砑姺彪s亂的需求呢,我從收集需求-評(píng)估需求-需求落地挨個(gè)講起:

1. 收集需求

如果你也打算像 C 端產(chǎn)品體驗(yàn)群那樣建立一個(gè)群,完了將自己的用戶聚集在那里,靜靜等待需求的話,我勸你三思而后行。你可以這么做,但是應(yīng)該明確群的目標(biāo),可以收集需求,可以是 bug 反饋群,也可以是更新通知群;但是不要將其變成一個(gè)純粹的用戶反饋群,因?yàn)檫@會(huì)導(dǎo)致用戶的吐槽聲音過(guò)大,而讓潛在的用戶流失。

B 端的客戶一旦使用你們的系統(tǒng),就要付出相應(yīng)的金錢和時(shí)間代價(jià),不是說(shuō)想換一家就能換。因此他對(duì)于已經(jīng)使用中的用戶反饋是極其看重的,B 端的產(chǎn)品很大程度是靠著同行間的口碑傳播從而取得了良好的效益。如果一個(gè)新用戶想進(jìn)群了解,結(jié)果一進(jìn)去就發(fā)現(xiàn)大家都在吐槽這個(gè)系統(tǒng)的不足之處,那么可想而知他的選擇是什么。

因此,最好的需求收集方式是通過(guò)運(yùn)營(yíng)、市場(chǎng)以及客服的同事們的反饋,因?yàn)樗麄兪请x客戶最近的人,他們每天都跟客戶打交道,了解這個(gè)行業(yè)從業(yè)者的一些基本情況。很多時(shí)候,客戶回訪和運(yùn)營(yíng)對(duì)接的時(shí)候用戶會(huì)提出一些功能的建議。

通常的一種情況是,在 SaaS 行業(yè),你的一個(gè)客戶的流失意味著你的競(jìng)爭(zhēng)對(duì)手多一個(gè)客戶。因此一般市場(chǎng)都會(huì)有競(jìng)爭(zhēng)對(duì)手的信息,他們會(huì)知曉客戶從我們平臺(tái)流失到其他平臺(tái)的一些原因。最重要的是,他們也為你提供了絕佳的競(jìng)品資料,進(jìn)而可以進(jìn)一步明確需求。

收集好的需求,該怎么處理呢?

工具之前我用的是 trello,很好用,你可以將需求按照類型分為不同的看板,規(guī)劃產(chǎn)品的進(jìn)度。

之后由于團(tuán)隊(duì)的原因,改用 teambition,功能要豐富點(diǎn),可以寫測(cè)試案例等,對(duì)于國(guó)內(nèi)用戶比較友好;可以按照 KANO 模型將需求劃分為不同的類型,用以安排產(chǎn)品。

KANO模型

基本(必備)型需求——Must-beQuality/ Basic Quality

一個(gè)產(chǎn)品應(yīng)該具有的基本功能,能滿足用戶的基本需求,比如,微信的基本功能是即時(shí)通訊。

用戶不會(huì)因?yàn)樵摴δ艿某霈F(xiàn)而覺(jué)得滿意,因?yàn)檫@是基本的、必備的一項(xiàng)功能。如果連這個(gè)都沒(méi)法滿足,用戶滿意度會(huì)大幅下降。

期望(意愿)型需求——One-dimensional Quality/ Performance Quality

用戶迫切希望產(chǎn)品能提供的功能,當(dāng)提供該需求時(shí),用戶滿意度會(huì)大幅上升,當(dāng)不提供該需求時(shí),用戶滿意度會(huì)下降。

比如百度網(wǎng)盤一直為人詬病的下載限速,無(wú)法對(duì)單次下載而付費(fèi)。而需要開(kāi)通會(huì)員,用戶的抱怨恰好說(shuō)明了其痛點(diǎn);當(dāng)提供單次下載付費(fèi)的服務(wù)時(shí),用戶滿意度明顯提升。

興奮(魅力)型需求—Attractive Quality/ Excitement Quality

用戶對(duì)該類型的需求并無(wú)明顯的期望,但是若產(chǎn)品能夠提供該類需求,用戶滿意度會(huì)極大提升,也會(huì)培養(yǎng)用戶的忠誠(chéng)度。

比如,很多產(chǎn)品都有實(shí)驗(yàn)室功能,即對(duì)那些不是必備需求的功能設(shè)計(jì)一個(gè)開(kāi)關(guān),用戶打開(kāi)后可以進(jìn)行使用。對(duì)于有的用戶來(lái)講,這些功能很大程度上會(huì)帶來(lái)驚喜。當(dāng)然,每個(gè)人期望不一樣,實(shí)驗(yàn)室方案也可以視為另類的灰度測(cè)試,用以驗(yàn)證用戶對(duì)于功能的需求。

無(wú)差異型需求——Indifferent Quality/Neutral Quality

產(chǎn)品無(wú)論是否滿足該類需求,用戶的滿意度是不會(huì)變化的,正如用戶不會(huì)因?yàn)槭盏健脯斏?元代金券」而感到開(kāi)心。因此在 B 端行業(yè),開(kāi)發(fā)時(shí)間有限的情況下,無(wú)需為該類需求投入資源。

比如優(yōu)化一個(gè)用戶訪問(wèn)量很少的網(wǎng)頁(yè),也無(wú)需因?yàn)轭I(lǐng)導(dǎo)或者客戶的個(gè)人喜好而改變后臺(tái)頁(yè)面的顏色。無(wú)論使其鮮艷活潑還是穩(wěn)重大氣,后臺(tái)滿足基本的視覺(jué)要求和規(guī)范即可。當(dāng)然,這并不意味著你可以把后臺(tái)設(shè)計(jì)的簡(jiǎn)陋和雜亂。

反向(逆向)型需求——Reverse Quality

當(dāng)提供方向性需求的功能時(shí),會(huì)招致大部分用戶滿意度的大幅下降。比如常見(jiàn)的在搜索中摻加廣告、強(qiáng)制用戶授權(quán)過(guò)多個(gè)人信息以及推送大量無(wú)用的消息等,會(huì)導(dǎo)致用戶的反感。

2. 評(píng)估需求

通常需求的收集不是你一個(gè)人在進(jìn)行,產(chǎn)品經(jīng)理、老板以及其他同事也會(huì)幫助你收集,匯總到你這里的需求會(huì)開(kāi)會(huì)進(jìn)行討論,下一步要做什么。

做之前首先要對(duì)需求進(jìn)行評(píng)估,評(píng)估的原則基本是按照 KANO 模型來(lái),但是也會(huì)有比較特殊的情況。

交互設(shè)計(jì)師需要注意的是,你除了需要關(guān)注用戶體驗(yàn)的問(wèn)題以外,還要與開(kāi)發(fā)一起評(píng)估該需求的實(shí)現(xiàn);你不懂技術(shù)沒(méi)關(guān)系,開(kāi)發(fā)會(huì)告訴你該需求的落地會(huì)出現(xiàn)什么問(wèn)題,在實(shí)現(xiàn)上會(huì)有什么難度。這些在評(píng)估需求的階段都要提出來(lái),并且在交互層面解決掉,否則你畫出了原型以后,開(kāi)發(fā)告訴你這個(gè)頁(yè)面必須要修改,否則開(kāi)發(fā)成本過(guò)大,無(wú)法在排期內(nèi)完成,這個(gè)時(shí)候你再去改交互稿將會(huì)費(fèi)時(shí)費(fèi)力。

評(píng)估完需求,定好下期開(kāi)發(fā)的需求后就結(jié)束了么?

其實(shí)并沒(méi)有,因?yàn)樾枨笫占豢赡苁且粋€(gè)固定的階段,它是漸進(jìn)的、不確定的。因此收集需求和評(píng)估需求會(huì)不斷在實(shí)際工作中疊加和重復(fù),比如你制定好了需求優(yōu)先級(jí),已經(jīng)著手開(kāi)發(fā)了;這時(shí)候老板或者領(lǐng)導(dǎo)突然又增加了一個(gè)優(yōu)先級(jí)很高的需求,所以你得重新安排這些需求。如何在敏捷開(kāi)發(fā)中保質(zhì)保量的完成工作任務(wù),這是一場(chǎng)斗智斗勇的 battle。

3. 需求落地

前面講到需求評(píng)估的時(shí)候,需要與開(kāi)發(fā)人員一起評(píng)估技術(shù)難度。其實(shí)在你將需求落地為交互原型的時(shí)候,也需要持續(xù)溝通,這完全是為了避免因?yàn)榧夹g(shù)問(wèn)題而產(chǎn)生修改設(shè)計(jì)稿或溝通不順暢的問(wèn)題。

如果你是在做的過(guò)程中,持續(xù)與開(kāi)發(fā)人員保持溝通,能了解到他們是如何實(shí)現(xiàn)這個(gè)功能的。當(dāng)然,有些基本的設(shè)計(jì)原則所不允許的事完全不用屈服于他們的「淫威」,畢竟他們得按照你的方案來(lái)。如果開(kāi)發(fā)懶惰而想通過(guò)最簡(jiǎn)單的辦法來(lái)實(shí)現(xiàn),用戶體驗(yàn)又是極其不友好,那么請(qǐng)直接對(duì)其說(shuō)「NO」。

比如常見(jiàn)的刪除的二次確認(rèn)等彈窗,一般最好的體驗(yàn)是在按鈕旁邊彈出;但有些開(kāi)發(fā)懶得寫彈窗,直接調(diào)用瀏覽器的彈窗,即瀏覽器頂部經(jīng)常出現(xiàn)的那種確認(rèn)彈窗,這個(gè)時(shí)候你要堅(jiān)決告訴開(kāi)發(fā),這樣搞是堅(jiān)決不行的。

需求的落地伴隨著競(jìng)品分析,判斷一個(gè)需求是否靠譜、落地方案是否成熟的一個(gè)重要途徑就是競(jìng)品分析,可以通過(guò)調(diào)查研究相關(guān)競(jìng)品是如何進(jìn)行設(shè)計(jì)的。這對(duì)于我們有著非常大的幫助,可以避免很多的彎路,甚至能避免犯錯(cuò),提高交互方案的可靠性。競(jìng)品分析又是個(gè)比較繁雜的事項(xiàng),如果是有特殊要求可以做成報(bào)告的形式,如果僅是去參考對(duì)照的話只需要去體驗(yàn)競(jìng)品即可。

減少出錯(cuò)

B 端的業(yè)務(wù)比較重要,尤其是涉及到數(shù)據(jù)的增刪改查和金額的計(jì)算,一旦出錯(cuò),將會(huì)導(dǎo)致無(wú)法挽回的后果。因此在出錯(cuò)前和出錯(cuò)后,應(yīng)該有相應(yīng)的挽回機(jī)制。

1. 出錯(cuò)前

內(nèi)容編輯類的功能應(yīng)該提供自動(dòng)保存草稿功能,防止沒(méi)有及時(shí)保存而丟失內(nèi)容;刪除、禁止等較重操作應(yīng)該有二次確認(rèn),防止用戶誤刪。

對(duì)于操作流程應(yīng)該建立明確的引導(dǎo)機(jī)制,長(zhǎng)表單可以分開(kāi)按步驟填寫。

提示信息應(yīng)該明確而及時(shí)。比如一個(gè)表單需要登錄才能填寫,在未登錄的狀態(tài)下,應(yīng)該先提示其登錄再填寫否則用戶在填寫大量信息后,因?yàn)橐粋€(gè)錯(cuò)誤而前功盡棄。

系統(tǒng)內(nèi)的禁止信息、警告信息、提示信息建立一套相應(yīng)的規(guī)則。

2. 出錯(cuò)后

  • 應(yīng)該建立回收站機(jī)制,刪除后可以找回;
  • 可對(duì)用戶操作進(jìn)行建立回撤機(jī)制,用戶如果操作失誤,可及時(shí)回撤;
  • 對(duì)系統(tǒng)的操作進(jìn)行記錄,明確到時(shí)間、客戶端、操作者信息、操作內(nèi)容、操作的類型(增刪改)等。

提率

用戶的時(shí)間就是金錢,這對(duì)于 B 端商家角色中尤為重要,大量訂單的處理、表格化的導(dǎo)入和導(dǎo)出、批量管理和網(wǎng)站運(yùn)營(yíng)等方面,對(duì)于效率有著極高的要求,商家通過(guò)可視化界面來(lái)完成某項(xiàng)任務(wù)。

在這其中,影響最大的莫過(guò)于交互方式了,相信各位一定用過(guò)各大銀行的網(wǎng)站,頁(yè)面的導(dǎo)航關(guān)聯(lián)性弱、結(jié)構(gòu)不合理、提示不明確、交互流程過(guò)長(zhǎng),甚至有的網(wǎng)站光是登錄,就得大費(fèi)周章。

如何提率,我認(rèn)為主要從以下幾個(gè)方面著手:

1. 提高易用性

如果你的產(chǎn)品,讓人看一眼就能上手,那么說(shuō)明是非常友好的設(shè)計(jì)。易用性不一定意味著簡(jiǎn)單和低智,依據(jù)復(fù)雜守恒定理(泰勒斯定理),每個(gè)應(yīng)用程序都有自己內(nèi)在的、無(wú)法簡(jiǎn)化的復(fù)雜度。

所以,提高易用性意味著要設(shè)計(jì)合理的交互,易用性分為對(duì)新手(小白用戶)友好和對(duì)老用戶(專家用戶)友好,包括數(shù)量最大的中間用戶。

如果你的界面是僅僅對(duì)于新手友好,那么可能完成的任務(wù)都是簡(jiǎn)單而輕松的。但是對(duì)于老用戶,他需要更復(fù)雜的功能來(lái)處理大量龐雜的任務(wù);因此在設(shè)計(jì)的時(shí)候,既要提供傻瓜式的操作方式,也要對(duì)專家用戶提供提率的工具。

2. 智能化

此處的智能化既包括通過(guò)大數(shù)據(jù)或者人工智能自動(dòng)將操作步驟變得簡(jiǎn)潔,也包括諸如一些字段輸入、自動(dòng)定位、圖片識(shí)別、OCR 等方式來(lái)使用戶的效率得以提升的功能。

以前的用戶要摳圖可能會(huì)在 ps 中操作好幾個(gè)步驟才能完成,但是隨著機(jī)器學(xué)習(xí)技術(shù)的發(fā)展,ps 已經(jīng)可以更加智能的摳圖。當(dāng)然,還包括其他功能的智能化。

在 B 端 SaaS 領(lǐng)域,智能化也是一個(gè)重要的趨勢(shì),針對(duì)不同的商家所面臨的不同的行業(yè)領(lǐng)域,我們或許可以提供更加全面且友好的服務(wù)。

3. 場(chǎng)景化思維

如果你深入了解你的用戶,去觀察他們整個(gè)行業(yè)的運(yùn)作模式,以及他們對(duì)于業(yè)務(wù)的處理方式,你就會(huì)明白你的產(chǎn)品的走向。

你需要深入每一個(gè)場(chǎng)景,比如,在戶外旅游領(lǐng)域,發(fā)布旅游產(chǎn)品線路的可能是在辦公室中的編輯人員,帶隊(duì)出行的是在戶外場(chǎng)景中的導(dǎo)游,現(xiàn)場(chǎng)簽到的可能是集合點(diǎn)的管理人員,而處理訂單的又是另一個(gè)坐在辦公室里的小伙伴。

他們需要協(xié)同工作,才能使各項(xiàng)工作順利展開(kāi),發(fā)布活動(dòng)-用戶報(bào)名-訂單管理-報(bào)名人統(tǒng)計(jì)-活動(dòng)成行-集合點(diǎn)簽到-帶隊(duì)出發(fā)-旅游結(jié)束-活動(dòng)評(píng)價(jià)-領(lǐng)隊(duì)評(píng)價(jià)-交易成功,這一系列流程中,面臨的角色是復(fù)雜的,而意外也是常有的事。比如報(bào)名人無(wú)法參加活動(dòng)而導(dǎo)致的退款、活動(dòng)因?yàn)樘鞖庠蚨鵁o(wú)法成行、戶外活動(dòng)發(fā)生意外等。

你需要做的就是:

  • 站在辦公室編輯人員的角度上,你需要為他提供兼容性很高的編輯器和快捷方便的發(fā)布流程,比如在系統(tǒng)內(nèi)接入微信公眾號(hào)的管理,可以將系統(tǒng)內(nèi)的文章一鍵發(fā)布到微信公眾號(hào)上,也可以通過(guò)系統(tǒng)推送產(chǎn)品信息。你需要為其設(shè)計(jì)友好的相冊(cè)和視頻管理工具以宣傳旅游產(chǎn)品;
  • 站在導(dǎo)游和管理人員的角度上,你需要為其設(shè)計(jì)在戶外場(chǎng)景(移動(dòng)場(chǎng)景)下也能使用的簽到工具、臨時(shí)退款工具、活動(dòng)消息通知工具等;
  • 站在訂單管理員的角度上,你需要為其設(shè)計(jì)規(guī)范的導(dǎo)出表格格式,也需要為其設(shè)計(jì)修改報(bào)名人和訂單信息的功能,有必要時(shí),你還需要為其設(shè)計(jì)單獨(dú)的報(bào)名渠道和特殊的付款方式(線下付款)。

場(chǎng)景化的思維會(huì)讓你設(shè)身處地為一線操作用戶的體驗(yàn)而努力。因此,交互稿完成以后,徹底回退到小白用戶的身份,假裝自己是在某個(gè)場(chǎng)景下要做某件事,通過(guò)你的交互方案,能否順利完成自己的目標(biāo)。

提高通用性

此處的通用性是指,在 SaaS 軟件領(lǐng)域,不同客戶所面臨的行業(yè)有一定的差別,可能這個(gè)功能對(duì)于 A 用戶極其重要,但對(duì)于 B 用戶,該功能并不重要。比如有的客戶想要在前臺(tái)展示某活動(dòng)的報(bào)名人的姓名以增加真實(shí)性,用以吸引用戶參加;但是有的客戶就明確反對(duì)該功能,認(rèn)為這個(gè)功能侵犯了用戶的隱私。

諸如此類的需求相離、甚至相反的情況太普遍了。合適的解決方式是建立兩套開(kāi)關(guān),一套是由 SaaS 服務(wù)提供商的統(tǒng)一后臺(tái)來(lái)配置,用以區(qū)分比較大的行業(yè)差別,比如電商領(lǐng)域中,可以配置店鋪類型為:美妝、服飾、食品、電子產(chǎn)品等;另一套開(kāi)關(guān)在客戶的站點(diǎn)后臺(tái),用以控制不同的站之間的差別,比如前臺(tái)界面樣式、交易流程、相關(guān)字段或菜單的前臺(tái)顯示等。

另外比較重要的一點(diǎn),也是最基本的一點(diǎn),軟件設(shè)計(jì)中存在一個(gè)原則就是高內(nèi)聚低耦合,模塊化設(shè)計(jì),用以提高系統(tǒng)內(nèi)部組件的復(fù)用。

交互設(shè)計(jì)也是同樣的道理,可以將你的商品視為一個(gè)模塊,那么這個(gè)模塊無(wú)論是添加到網(wǎng)站,還是小程序,我只需要?jiǎng)?chuàng)建一個(gè)商品即可,可以同步更新到不同的平臺(tái)。

另外,訂單的管理只需要添加相關(guān)的標(biāo)記即可(比如來(lái)自小程序的訂單標(biāo)記為小程序,淘寶訂單標(biāo)記為淘寶等),一個(gè)平臺(tái)發(fā)布,多個(gè)平臺(tái)同步,有效提高了運(yùn)營(yíng)人員的效率。

同樣的,如果你的 pc 端產(chǎn)品和移動(dòng)端產(chǎn)品沒(méi)有實(shí)質(zhì)性的運(yùn)營(yíng)差異(即當(dāng)成兩種模式來(lái)運(yùn)營(yíng)),那么很多數(shù)據(jù)(如文案、圖片、banner等)的獲取可以采用同一個(gè)數(shù)據(jù)源 。

最后,提高系統(tǒng)內(nèi)的一致性,減少用戶認(rèn)知成本。在同一平臺(tái)內(nèi)的頁(yè)面,樣式和交互上要盡量保持一致性,不要有的地方是總金額,有的地方是總價(jià)格,這會(huì)讓用戶犯迷糊。提高通用性,也意味著你需要關(guān)注并熟悉系統(tǒng)內(nèi)不同功能之間的關(guān)聯(lián)性,盡量做到統(tǒng)一處理。

中正原則

在進(jìn)行商業(yè)化運(yùn)作和產(chǎn)品功能的優(yōu)化時(shí),對(duì)于正向的用戶需要激勵(lì),對(duì)于負(fù)向的用戶需要限制。

這是我在讀完有贊的白鴉寫的關(guān)于有贊產(chǎn)品設(shè)計(jì)原則的文章后,影響最深的一個(gè)原則,他寫到:

我們的使命是幫助每一位重視產(chǎn)品和服務(wù)的商家成功。「每一位」和「商家成功」是我們最重要的關(guān)鍵詞,我們要服務(wù)的是每一位商家,然后幫助每一位商家成功,但是為了整個(gè)生態(tài)的健康,那些不重視產(chǎn)品和服務(wù)的商家,我們是(可以)不服務(wù)的。所以我們?cè)诋a(chǎn)品設(shè)計(jì)原則上,在產(chǎn)品做一些功能的選擇上,如果這個(gè)功能做完了會(huì)導(dǎo)致商家不重視產(chǎn)品和服務(wù),我們是不會(huì)/能做的。

舉個(gè)例子:消費(fèi)者購(gòu)買之后(可以)有一個(gè)評(píng)價(jià),我們的購(gòu)物評(píng)價(jià)是要么開(kāi)啟要么不開(kāi)啟這個(gè)功能。我們不接受商家去刪購(gòu)物評(píng)價(jià),因?yàn)樯碳乙坏┛梢詣h了消費(fèi)者的差評(píng),他就(很可能)不會(huì)那么重視產(chǎn)品和服務(wù)了。所以有贊永遠(yuǎn)不會(huì)提供刪除商品評(píng)價(jià)的功能,商家要么就不開(kāi)啟??梢圆挥?,如果要用就要接受有人說(shuō)你不好,商家可以去跟消費(fèi)者溝通,溝通完了消費(fèi)者自己改,但是我們不提供讓商家刪壞評(píng)價(jià)的功能。所以,這就是最基本的有贊產(chǎn)品設(shè)計(jì)原則,我們只服務(wù)重視產(chǎn)品和服務(wù)的商家,我們所有的產(chǎn)品設(shè)計(jì)原則都是需要這樣。

——《白鴉內(nèi)部培訓(xùn):企業(yè)服務(wù)類產(chǎn)品的底層邏輯和有贊產(chǎn)品設(shè)計(jì)原則》

更多內(nèi)容請(qǐng)看:

我將其概括為一個(gè)產(chǎn)品的中正原則,即中立且保持正向原則。

一方面,對(duì)于企業(yè)未來(lái)的發(fā)展而言,正向的用戶能帶給平臺(tái)無(wú)盡的潛力,平臺(tái)可以和商家一起成長(zhǎng),而負(fù)向的用戶,則會(huì)給平臺(tái)帶來(lái)隱患。比如,淘寶既限制商家的違規(guī)運(yùn)營(yíng)和欺詐客戶,也限制 C 端用戶的惡意薅羊毛,在商家和用戶之間做一個(gè)中立者和調(diào)節(jié)者的角色。

我在做需求的時(shí)候,也遇到過(guò)很多的負(fù)向需求,這在商家看來(lái)是一個(gè)必須的功能,作為平臺(tái)應(yīng)該提供。但是若是提供給商家,則會(huì)對(duì)消費(fèi)者的利益造成損害,刪除差評(píng)就是一個(gè)很好的例子。

看了白鴉對(duì)于有贊產(chǎn)品原則的闡釋,我覺(jué)得每一個(gè)平臺(tái)類的產(chǎn)品,都應(yīng)該保持自己的中正原則:

  • 擁有數(shù)據(jù)的公司不要倒賣用戶的數(shù)據(jù);
  • 搜索公司不應(yīng)該干擾搜索結(jié)果的公正性;
  • 通訊公司應(yīng)該尊重用戶的隱私;
  • 平臺(tái)公司應(yīng)該在商家和消費(fèi)者之間做一個(gè)良好的服務(wù)者和調(diào)節(jié)者的中間角色。

在 B 端行業(yè),口碑傳播是非常重要的一種被動(dòng)營(yíng)銷方式,很多 B 端公司都是低調(diào)的潛行者,堅(jiān)持中正原則,并不會(huì)損害自己的利益,反而會(huì)獲得商家的尊重和消費(fèi)者的信賴。

總結(jié)

啰啰嗦嗦說(shuō)了這么多,比較細(xì)碎,不乏邏輯凌亂的片段,但也算是對(duì)自己兩年以來(lái)對(duì)于 B 端交互的一些心得吧。

其實(shí)交互的原則基本都是通用的,無(wú)非就是根據(jù)平臺(tái)屬性做一定的調(diào)整,不同的是產(chǎn)品所處的行業(yè),每一個(gè)產(chǎn)品都無(wú)法脫離其所處的行業(yè)而存在,這也是使用產(chǎn)品的具體場(chǎng)景。

因此做一個(gè)產(chǎn)品前,一定要了解行業(yè),去熟悉行業(yè)的通用做法,了解行業(yè)的專業(yè)術(shù)語(yǔ)和規(guī)范,研究行業(yè)的所屬群體等,這樣你就會(huì)做出真正適合市場(chǎng)且能讓大多數(shù)用戶滿意的產(chǎn)品。

文章來(lái)源:優(yōu)設(shè)

為了提高閱讀體驗(yàn),總結(jié)了這份中文排印三原則

資深UI設(shè)計(jì)者

給大家看兩張圖,這兩頁(yè)的文字內(nèi)容相同,你更想看哪本?

不出意外的話,大家應(yīng)該會(huì)選右手邊的吧(選左邊的請(qǐng)自覺(jué)去面壁)。(所拍書籍為《西文字體》,高岡昌生 )

雖然大家不是專業(yè)做文字排印的,但對(duì)文字排版的感知力,其實(shí)是生而有之的。

中文也是如此,優(yōu)秀的出版社(譯林出版社、廣西師范大學(xué)出版社等),為了讓閱讀體驗(yàn)順暢、版面舒適,在文字排印上做了許多工序。

正是這些工序,提升了書籍正文的閱讀體驗(yàn)。想要在閱讀軟件上打造優(yōu)秀的閱讀頁(yè),這些工序正是我們需要借鑒的。

通過(guò)設(shè)計(jì)師與開(kāi)發(fā)的共同努力,我們最近完成了這一文字排版能力的建造,讓閱讀頁(yè)的效果能夠更上一層樓。

最終效果如下:

本文將從以下幾個(gè)部分說(shuō)明這些工序存在的理由、實(shí)現(xiàn)的邏輯等。

細(xì)致的來(lái)看,文章包括以下內(nèi)容:

優(yōu)秀的文字排印三原則與實(shí)現(xiàn)工序

通過(guò)前期的大量學(xué)習(xí)與調(diào)研(專家觀點(diǎn):小林章先生、鳥(niǎo)海修先生、劉慶先生等人關(guān)于字體排印 or 字體設(shè)計(jì)的講座、W3C 中文排版需求(強(qiáng)烈建議大家看這個(gè))、孔雀計(jì)劃的文章、字體排印的專著:《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》、《字體排印》、《西文字體》等;本次改版幾乎所有的功能與邏輯都參照了以上專著與文章。)

文字排印要遵循的三個(gè)原則

我們把文字書排版時(shí)的工序,總結(jié)為「文字排印要遵循的三個(gè)原則」:

1. 盡量保證字間距恒定

原則說(shuō)明

中文排版中,字與字之間的間距被稱為「字間距」。

文字間距會(huì)影響閱讀節(jié)奏。字間距大的文章,閱讀速度會(huì)變慢。因此,散文、詩(shī)歌在排版時(shí),會(huì)刻意調(diào)大字間距。

下面的圖,僅憑自己感受,選一張更好的:

不出意外的話,應(yīng)該是覺(jué)得下圖更好看。

嘗試默讀一下,你會(huì)發(fā)現(xiàn),上邊的圖片,最后兩行字間距被拉大,閱讀速度放慢;而這不是作者的本意,換言之,這會(huì)破壞閱讀節(jié)奏。

因此,我們把「保證字間距恒定」作為首要原則,來(lái)保障閱讀節(jié)奏感。

備注(建議第二次看文章的時(shí)候再讀):需要說(shuō)明的是,部分字面較大的字體(方正博雅宋、蘭亭黑等)在書籍排版時(shí)為了契合書籍內(nèi)容的調(diào)性,有時(shí)會(huì)刻意設(shè)置字間距,這與「字間距保持恒定」的原則并不沖突。在電子閱讀軟件中,由于無(wú)法針對(duì)特定書籍進(jìn)行調(diào)整,因此本次設(shè)計(jì)實(shí)際上是保持「密排」(字與字之間沒(méi)有額外添加字間距,保留字體原始的間距)。

工序

行長(zhǎng)是字號(hào)的整數(shù)倍。相同字號(hào)下,漢字字寬固定(就是字號(hào)本身),漢字標(biāo)點(diǎn)的字寬同樣也是字號(hào)本身(除了個(gè)別標(biāo)點(diǎn)之外,例如破折號(hào))

漢字排版時(shí),沒(méi)有額外字間距的情況下,是上圖所示的字面框依次密排。

因?yàn)橹形臅恼呐虐娉S脙啥藢?duì)齊,如果行長(zhǎng)不是字號(hào)的整數(shù)倍,則漢字之間會(huì)有異常的行間距出現(xiàn)。

更嚴(yán)重的是:閱讀軟件字號(hào)可變的情況下,行長(zhǎng)不可能做到適應(yīng)所有字號(hào)且字間距不會(huì)被拉大。

行長(zhǎng)是字號(hào)的整數(shù)倍是中文字體排印中標(biāo)點(diǎn)擠壓等的前提。
——《孔雀計(jì)劃》,原文鏈接:https://thetype.com/2017/07/12513/

在閱讀軟件中,隨著字號(hào)調(diào)整,如果沿用「版心寬度固定」的思路,難免存在字間距被拉大的情況。
對(duì)此,我們調(diào)查了國(guó)內(nèi)外知名中文閱讀軟件,發(fā)現(xiàn):KindleAPP 能隨著字號(hào)變化自由變動(dòng),但這會(huì)導(dǎo)致:改變字號(hào)大小時(shí),版心寬度略微變化。

有此顧慮,我們做了一個(gè)測(cè)試。結(jié)果證明,大家不會(huì)發(fā)現(xiàn)版心寬度有變化。這說(shuō)明用戶投入到閱讀當(dāng)中、調(diào)整字號(hào)時(shí),并不會(huì)因?yàn)榘嫘膶挾茸兓胁贿m,甚至不會(huì)感知。通過(guò)測(cè)試,打消了我們的顧慮。
最終我們大膽采取了「版心寬度跟隨字號(hào)調(diào)整而變化」,來(lái)確?!感虚L(zhǎng)是字號(hào)的整數(shù)倍」。

雖然「版心寬度跟隨字號(hào)變化」并沒(méi)有不適,但我們需要保證在多種屏幕尺寸、字號(hào)下,版心占據(jù)屏幕的區(qū)域都舒適。

面對(duì)這個(gè)問(wèn)題,我們制定了一個(gè)公式,可根據(jù)屏幕大小、字體大小等,自動(dòng)調(diào)整版心寬度。確?!感虚L(zhǎng)是字號(hào)的整數(shù)倍」的同時(shí),保證頁(yè)面美觀。

標(biāo)點(diǎn)符號(hào)「優(yōu)先推入式避頭尾」。如圖所示,為宋抄本《孫子算經(jīng)》;在古代,書籍排版可以做到字間距恒定,原因是古代不存在「標(biāo)點(diǎn)」,也就沒(méi)有「標(biāo)點(diǎn)避頭尾」導(dǎo)致的種種問(wèn)題。

而現(xiàn)代漢語(yǔ)存在標(biāo)點(diǎn)符號(hào),有的標(biāo)點(diǎn)不能放在行首,有的不能放在行尾。

我們把不能放在行首的標(biāo)點(diǎn)叫做避頭標(biāo)點(diǎn),如逗號(hào)、頓號(hào)、句號(hào)等;把不能放置在行尾的叫做避尾標(biāo)點(diǎn),如前引號(hào)、前括號(hào)等。

「推出式」避頭尾是大部分閱讀軟件的做法:

以避頭標(biāo)點(diǎn)為例,若此標(biāo)點(diǎn)被排到了行首,「推出式」 的做法是從上一行拉一個(gè)字放在本行。如下圖所示:

然而這么做的話,上一行的字間距被拉大,打斷了閱讀節(jié)奏(閱讀節(jié)奏放慢)。

我們發(fā)現(xiàn)專業(yè)的排版軟件(Indesign)和出版社(廣西師范大學(xué)理想國(guó)系列、人民文學(xué)出版社、譯林出版社等知名出版社)的做法是「優(yōu)先推入式避頭尾」,這種方式可以很好地解決「僅推出式」造成的問(wèn)題。如下圖所示:

△ 《少數(shù)派報(bào)告》譯林出版社

通過(guò)「優(yōu)先推入式避頭尾」,上圖中標(biāo)出的雙引號(hào)的寬度被擠壓了一半,如果它保留為「全寬」,就沒(méi)辦法排在這一行,這就是「優(yōu)先推入式避頭尾」的最終效果。

以避頭尾標(biāo)點(diǎn)為例,「優(yōu)先推入式」避頭尾在這種情況下會(huì)將本行內(nèi)標(biāo)點(diǎn)寬度擠壓,為避頭尾的標(biāo)點(diǎn)騰出空間,如下圖所示:

上面的圖可以看到:通過(guò)「優(yōu)先推入式標(biāo)點(diǎn)擠壓」,第一行的字間距沒(méi)有被拉大,保持了密排。

通過(guò)將本行內(nèi)的標(biāo)點(diǎn)寬度進(jìn)行擠壓后,騰出了空間給本來(lái)排不到的逗號(hào),確保了字間距的恒定。然后只有在本行內(nèi)標(biāo)點(diǎn)無(wú)法壓縮出足夠空間時(shí),才會(huì)選擇「推出式」的處理方式。

因此這種處理方式叫做「優(yōu)先推出式」標(biāo)點(diǎn)避頭尾。

行內(nèi)標(biāo)點(diǎn)擠壓。因?yàn)橄噜彉?biāo)點(diǎn)擠壓、行首段首擠壓,會(huì)出現(xiàn)部分標(biāo)點(diǎn)符號(hào)占據(jù)半寬的情況。這種時(shí)候,一行的末尾可能正好有漢字或標(biāo)點(diǎn)軋?jiān)诹诉吙蛏?,如下圖所示,為漢字軋?jiān)谶吙虻那闆r:

遇到這種情況,通過(guò)擠壓行內(nèi)標(biāo)點(diǎn)寬度,從而騰出空間給最后一個(gè)字。這種做法叫做「行內(nèi)標(biāo)點(diǎn)擠壓」

標(biāo)點(diǎn)懸掛的邏輯和配套內(nèi)容。存在另外一種處理方式來(lái)避頭,叫做「標(biāo)點(diǎn)懸掛」,即將標(biāo)點(diǎn)懸掛在文本框外。

然而這種采用「標(biāo)點(diǎn)懸掛」,需要配套做「行尾強(qiáng)制半寬」,如下圖所示:

然而行尾強(qiáng)制半寬帶來(lái)的問(wèn)題是字間距被拉大,違反了原則一(盡量保證字間距恒定),對(duì)于寬度有限的手機(jī)屏幕,盡量不要改動(dòng)。因此最終我們沒(méi)有采用標(biāo)點(diǎn)懸掛的處理方式。
Type is Beautiful 網(wǎng)站中對(duì)此有詳盡的思考,如有興趣請(qǐng)看:https://thetype.com/kongque/

2. 版心灰度均衡

原則說(shuō)明

書籍排版中,文字所在的范圍稱為「版心」。

經(jīng)驗(yàn)老道的文字排印設(shè)計(jì)師,檢查正文排版效果時(shí),最常用的方法是:離遠(yuǎn)看頁(yè)面,就像蒙上一層磨砂玻璃一樣,檢查整個(gè)頁(yè)面是否疏密均衡(《字體排印》,高岡昌生先生),也叫做「灰度均衡」(龜倉(cāng)雄策先生稱之為「濃淡勻稱」,from《疾風(fēng)迅雷》)。灰度均衡的版心可以讓整個(gè)頁(yè)面美觀的同時(shí),也保證了讀者閱讀中不會(huì)被突然的空白打斷。

如下圖所示,第一張圖因?yàn)橐恍┰驅(qū)е铝隧?yè)面中有許多「窟窿」,顯得零碎,灰度明顯不均衡。而第二張圖,通過(guò)「標(biāo)點(diǎn)擠壓」將這些「窟窿」填上,整個(gè)版面更像是一個(gè)整體,灰度更均衡。

看倒數(shù)第二行的「乃跪地罪曰:‘大人何故’」兩個(gè)標(biāo)點(diǎn)連續(xù)的地方,從整體的角度看,會(huì)不會(huì)覺(jué)得這里有一個(gè)窟窿?

總的來(lái)說(shuō),灰度均衡的版面整體感更強(qiáng)、視覺(jué)上更舒適,因此也是相當(dāng)重要的原則。
工序:

相鄰標(biāo)點(diǎn)擠壓

眾所周知的,漢字是方塊字,在字體設(shè)計(jì)時(shí)會(huì)被放在一個(gè)方形里;中文標(biāo)點(diǎn)同樣也會(huì)被放置于同等大小的方框之中,如下圖所示。

如上圖所示,中文標(biāo)點(diǎn)所占體積一般遠(yuǎn)小于漢字,因此當(dāng)多個(gè)標(biāo)點(diǎn)符號(hào)連續(xù)排列時(shí),會(huì)讓版面在這里好像有一個(gè)窟窿。專業(yè)的中文排版中會(huì)做的事情是「相鄰標(biāo)點(diǎn)擠壓」。如下圖所示:

如上圖所示,有連續(xù)標(biāo)點(diǎn)存在時(shí),通過(guò)壓縮標(biāo)點(diǎn)所占的寬度,從而補(bǔ)上「窟窿」。

3. 版面齊整

原則說(shuō)明

與西文書籍的左側(cè)對(duì)齊不同,中文書籍(橫排)傳統(tǒng)而言是講究?jī)啥藢?duì)齊。這是被大多數(shù)國(guó)人認(rèn)可的中文排版方式,因此不再贅述。

工序

行首段首標(biāo)點(diǎn)擠壓。當(dāng)行首出現(xiàn)標(biāo)點(diǎn)符號(hào),會(huì)感覺(jué)左側(cè)不齊:

可以看到,處理前版心左側(cè)因?yàn)橛袉我?hào),看起來(lái)第一行沒(méi)有和第二行左對(duì)齊,處理后效果回歸正常。同樣的,段首的標(biāo)點(diǎn)也需要擠壓。

實(shí)際落地時(shí)的經(jīng)驗(yàn)與產(chǎn)出

知道了以上內(nèi)容,我們需要把它變成開(kāi)發(fā)需要的邏輯。具體如下:

1. 相鄰標(biāo)點(diǎn)擠壓邏輯

在 W3C 的《中文排版需求》中,對(duì)相鄰標(biāo)點(diǎn)擠壓的具體做法為:

  • 依照中國(guó)大陸的常見(jiàn)的排版規(guī)則,當(dāng)結(jié)束夾注符號(hào)出現(xiàn)在頓號(hào)、逗號(hào)、句號(hào)之后時(shí),縮減兩者間二分之一個(gè)漢字大小的空白;而在港臺(tái)則不會(huì)做此調(diào)整。
  • 當(dāng)頓號(hào)、逗號(hào)、句號(hào)出現(xiàn)在結(jié)束夾注符號(hào)之后時(shí),縮減其間二分之一個(gè)漢字大小的空白。
  • 當(dāng)開(kāi)始夾注符號(hào)出現(xiàn)在頓號(hào)、逗號(hào)、句號(hào)之后時(shí),縮減其間二分之一個(gè)漢字大小的空白。
  • 當(dāng)開(kāi)始夾注符號(hào)出現(xiàn)在結(jié)束夾注符號(hào)之后時(shí),縮減其間二分之一個(gè)漢字大小的空白。
  • 當(dāng)兩個(gè)(或以上)開(kāi)始夾注符號(hào)連續(xù)排列時(shí),縮減其間二分之一個(gè)漢字大小的空白。
  • 當(dāng)兩個(gè)(或以上)結(jié)束夾注符號(hào)連續(xù)排列時(shí),縮減其間二分之一個(gè)漢字大小的空白。
  • 當(dāng)間隔號(hào)出現(xiàn)于結(jié)束夾注符號(hào)之后時(shí),縮減其間四分之一個(gè)漢字大小的空白。
  • 當(dāng)間隔號(hào)出現(xiàn)于開(kāi)始夾注符號(hào)之前時(shí),縮減其間四分之一個(gè)漢字大小的空白。

通過(guò)梳理,我們將其簡(jiǎn)化描述為 4個(gè)邏輯(實(shí)際邏輯與 W3C 基本一致):

  • 「1個(gè)結(jié)束夾注符」后面是:開(kāi)始夾注符、結(jié)束夾注符、頓、逗、句(包括全寬句點(diǎn))、冒、分,就擠。
  • 「1個(gè)開(kāi)始夾注符」后面是:開(kāi)始夾注符,就擠。
  • 「頓、逗、句(包括全寬句點(diǎn))」后面是:開(kāi)始夾注符、結(jié)束夾注符,就擠。
  • 「分、冒」后面是:開(kāi)始夾注符,就擠。

備注:成對(duì)出現(xiàn)的標(biāo)點(diǎn)叫做夾注符,如雙引號(hào)、書名號(hào)等;其中細(xì)分為開(kāi)始夾注符與結(jié)束夾注符。
此外,我們注意到,一些出版書在以上邏輯之外,把問(wèn)號(hào)與嘆號(hào)與[頓、逗、句]歸為一類,實(shí)際效果良好,因此出于問(wèn)號(hào)與嘆號(hào)同樣占據(jù)字面不多的邏輯,采用了這種分類法。然而隨后在走查階段發(fā)現(xiàn)線上部分字體的問(wèn)號(hào)與句號(hào)占據(jù)字面的位置不同。

這促使我們關(guān)注到標(biāo)點(diǎn)在字面中占據(jù)的位置,我們梳理了客戶端所有字體的中文標(biāo)點(diǎn)。

發(fā)現(xiàn)漢儀樂(lè)喵、方正蘭亭黑、漢儀啟體等幾款字體的問(wèn)號(hào)字面占據(jù)異常,如果進(jìn)行相鄰標(biāo)點(diǎn)擠壓可能會(huì)造成標(biāo)點(diǎn)粘連的情況,因此最終我們決定保持問(wèn)號(hào)與嘆號(hào)不參與相鄰標(biāo)點(diǎn)擠壓。

2. 避頭、避尾標(biāo)點(diǎn)匯總表:

以上邏輯實(shí)施需要首先讓程序判定哪些標(biāo)點(diǎn)是避頭尾標(biāo)點(diǎn),因此我們梳理了所有漢字標(biāo)點(diǎn)并分為避頭、避尾兩類(部分標(biāo)點(diǎn)即避頭又避尾)。

漢字標(biāo)點(diǎn)符號(hào)與西文的標(biāo)點(diǎn)符號(hào)許多時(shí)候僅憑肉眼難以分辨(如,與,前者是西文標(biāo)點(diǎn)中的逗號(hào),后者是中文標(biāo)點(diǎn)中的逗號(hào)),因此我們使用Unicode 碼為每一個(gè)標(biāo)點(diǎn)精準(zhǔn)劃分,確保不會(huì)造成錯(cuò)誤。

3. 行內(nèi)標(biāo)點(diǎn)擠壓與「優(yōu)先推入式避頭尾」邏輯:

「行內(nèi)標(biāo)點(diǎn)擠壓」與「優(yōu)先推入式避頭尾」其實(shí)本質(zhì)上都是對(duì)行內(nèi)標(biāo)點(diǎn)寬度進(jìn)行壓縮,因此在邏輯上歸為一類。根據(jù)具體解決邏輯的不同將其分為以下四類:

針對(duì)這四種情況要做的具體事項(xiàng)補(bǔ)充在右側(cè):

至于推出邏輯,則稍簡(jiǎn)單些,書籍中有時(shí)候會(huì)遇到連續(xù)幾個(gè)標(biāo)點(diǎn)符號(hào)都是避尾標(biāo)點(diǎn)的情況(或連續(xù)避頭標(biāo)點(diǎn)),因此對(duì)推出的邏輯設(shè)定為:

備注:國(guó)內(nèi)知名的字體設(shè)計(jì)與排印網(wǎng)站 Type is Beautiful 中有介紹,行內(nèi)標(biāo)點(diǎn)擠壓的方式有多種,「開(kāi)明式」「全部半寬式」「平均式」等等…我們選擇了「平均式」(有權(quán)重),開(kāi)發(fā)難度會(huì)稍小些、效果也更可控制,不再贅述。

4. 整體邏輯流程圖

但是僅僅通過(guò)文字性質(zhì)的描述還不夠,我們需要能讓程序理解的邏輯。

由于部分處理方式之間互相干擾,因此根據(jù)這四種方式影響的內(nèi)容不同,以「對(duì)其他處理方式的干擾程度」從高到低排序,并串聯(lián)成整整體的邏輯圖,以保證整體邏輯簡(jiǎn)單、不重復(fù),如下圖所示。

在此基礎(chǔ)上,我們將文章中第二部分所梳理的邏輯細(xì)節(jié)填充進(jìn)流程圖內(nèi),并合并重復(fù)流程,最終獲得如下流程圖,方便開(kāi)發(fā)理解和工作:

5. 小結(jié)

通過(guò)「避頭尾標(biāo)點(diǎn)列表」「可擠壓標(biāo)點(diǎn)與擠壓空間」「廣義的推入邏輯具體說(shuō)明」「整體邏輯流程圖」四個(gè)文件,我們可以順暢的將設(shè)計(jì)要求傳達(dá)給開(kāi)發(fā)。

最終,通過(guò)這些工序,我們可以在最大限度上保證字間距恒定、版面齊整和內(nèi)容灰度均衡。提升閱讀流暢性和閱讀頁(yè)的體驗(yàn)。

總結(jié)

文字排印作為一個(gè)古老的技藝,從排版工人操作實(shí)體字模的時(shí)代,經(jīng)歷了照排時(shí)代,來(lái)到了數(shù)字排版的當(dāng)下,排版的自由度和效率已然成倍提高,然而由于許多原因至今這些排版的工序只在出版社等專業(yè)領(lǐng)域流通。

相對(duì)于紙質(zhì)書籍,電子閱讀在易攜帶性、閱讀方便性、多媒體輔助閱讀上有得天獨(dú)厚的優(yōu)勢(shì),然而最基礎(chǔ)的閱讀體驗(yàn)有時(shí)候不如紙質(zhì)書籍,我們希望通過(guò)我們的努力,電子閱讀在未來(lái),能夠讓讀者獲得全面超過(guò)紙質(zhì)書籍的閱讀體驗(yàn)。

當(dāng)然,文字在移動(dòng)端的體驗(yàn)上限遠(yuǎn)不止如此,一些產(chǎn)品僅靠網(wǎng)格系統(tǒng)與字體排印加上優(yōu)秀的字體,已經(jīng)做出了令人驚艷的體驗(yàn)。

如上圖所示,通過(guò)優(yōu)秀的明朝體、網(wǎng)格系統(tǒng),物書堂出品的幾個(gè)詞典 APP 的界面讓人驚艷,文字之美還有很多可能,這也是我們的努力方向。我們也知道,當(dāng)前客戶端內(nèi)中英混排、英文排版等方面,依然有進(jìn)步空間,未來(lái)也會(huì)進(jìn)一步完善。

文章來(lái)源:優(yōu)設(shè)

移動(dòng)端 Banner 設(shè)計(jì)指南

資深UI設(shè)計(jì)者

根據(jù)遇到的問(wèn)題,總結(jié)的一些小經(jīng)驗(yàn),個(gè)人的一點(diǎn)薄見(jiàn),歡迎大家交流。

國(guó)內(nèi)國(guó)外運(yùn)營(yíng) Banner 設(shè)計(jì)

最近有小伙伴接到了國(guó)外的運(yùn)營(yíng)外包項(xiàng)目,發(fā)現(xiàn)國(guó)外和國(guó)內(nèi)對(duì)于運(yùn)營(yíng)的需求是有差別的,這篇文章就談?wù)剣?guó)內(nèi)外:中國(guó)、韓國(guó)、歐美,它們運(yùn)營(yíng)設(shè)計(jì)的各自特點(diǎn)和里面的門道。

主要從以下三方面來(lái)說(shuō):

1. 風(fēng)格特點(diǎn)

三個(gè)地區(qū)文化差異大不相同。

中國(guó)從古到今講究遵循傳統(tǒng),過(guò)年過(guò)節(jié)講究氣氛,營(yíng)造一種氛圍。用紅包來(lái)表達(dá)祝福和心意;其次,就是社會(huì)環(huán)境,中國(guó)人喜歡「熱鬧」,逢年過(guò)節(jié),一幫人聚到一起才熱鬧,別人都買、賣的火的肯定就是好的,所以就「跟風(fēng)效仿」。

韓國(guó)建國(guó)很晚,歷史相對(duì)比較短。所以文化氛圍比較年輕,偶像文化在韓國(guó)盛行,傳統(tǒng)的東西相對(duì)較少,都是比較年輕化的:年輕化的偶像,年輕化的文化,年輕化的價(jià)值觀。

歐美整個(gè)文化環(huán)境受移民的影響,比較開(kāi)放國(guó)際化,體現(xiàn)的文化也是比較多元的,包容性、簡(jiǎn)潔、時(shí)尚是這些它最直接的特點(diǎn)。

接下來(lái)分別談一下三個(gè)地區(qū)運(yùn)營(yíng)推廣的設(shè)計(jì)特點(diǎn)差異化:

中國(guó)

中國(guó)的運(yùn)營(yíng)突出的是優(yōu)惠:送紅包、滿減、優(yōu)惠券等;必須要喜慶,鮮艷的色彩:以紅色、橙色、黃色居多,來(lái)刺激消費(fèi)。就好像進(jìn)了賣場(chǎng)「瞧一瞧看一看,季末打折滿100減99」

韓國(guó)

韓國(guó)的文化里「社交」這一關(guān)鍵詞體現(xiàn)的尤為重要,「Line」這款A(yù)PP對(duì)韓國(guó)影響比較大,里面的矢量涂鴉風(fēng)格的插畫深入人心,Line 官方設(shè)計(jì)可愛(ài)且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個(gè)形象也很有特點(diǎn),所以Line的「IP屬性」和「矢量涂鴉」就成為了韓國(guó)主流設(shè)計(jì)風(fēng)格。

2. 整體構(gòu)圖

而韓國(guó)的偶像明星文化也頗具影響力,在推廣時(shí)也會(huì)用到明星來(lái)制造效應(yīng)。

我們從整體構(gòu)圖解析一下三個(gè)地區(qū)的設(shè)計(jì)細(xì)節(jié)。首先把一個(gè)運(yùn)營(yíng) banner 按照組件層級(jí)進(jìn)行拆分,分別來(lái)看一下。

分為:文字層、主體物層、裝飾層、背景層

文字層

從文字層可以看出中國(guó)的文字層級(jí)劃分更加清晰。運(yùn)用「格式塔」原理,主文案和副標(biāo)題的突出,能讓用戶對(duì)信息提取更加準(zhǔn)確直觀。

中文結(jié)構(gòu)的復(fù)雜性,排版上必須嚴(yán)格區(qū)分,所以在層級(jí)劃分上裝飾線的運(yùn)用也是比較常見(jiàn)的。(后面有針對(duì)性字體設(shè)計(jì)形式,詳細(xì)解讀,這里就不細(xì)說(shuō)了)

韓文的本身的圖形特質(zhì),為保證識(shí)別度,文案提煉精簡(jiǎn),信息層級(jí)相對(duì)較少。文字層級(jí)一般分為兩層。

有意思的是韓文由于字形結(jié)構(gòu)的單一,排版上很多時(shí)候會(huì)搭配字體形式的變化來(lái)增加排版樣式的變化,裝飾線的運(yùn)用也比較多變。

英文排版上本質(zhì)上和韓文相同——符號(hào)化,通過(guò)字形的特點(diǎn)來(lái)特出主要信息。

排版的優(yōu)勢(shì)性,讓其排版變化上自帶韻律感,加上裝飾線的運(yùn)用,本身字形的符號(hào)特性視覺(jué)呈現(xiàn)很有設(shè)計(jì)感。

主體物層

為了輔助信息傳達(dá),往往采用圖文結(jié)合,注意主體物的構(gòu)圖布局朝向,主題物對(duì)主要文字起到視覺(jué)引導(dǎo)作用,用戶的聚焦點(diǎn)一定是主文案,而不是主體物。

下圖里「手」作為整個(gè)畫面的「支點(diǎn)」,把模特的臉部向主要文案指引,最終達(dá)到活動(dòng)的最核心。

下圖里「眼睛」為整個(gè)畫面的「支點(diǎn)」,利用眼睛視線,把用戶向文案核心指引。

利用周圍的物體形成三個(gè)「支點(diǎn)」,把視覺(jué)中心聚焦到中間主文案。

裝飾層

點(diǎn)線面是運(yùn)用最多的元素,中國(guó)把平面設(shè)計(jì)的三大構(gòu)成運(yùn)用到了。

為了營(yíng)造構(gòu)圖的穩(wěn)定性,在設(shè)計(jì)里加入點(diǎn)和線的元素讓畫面占比更加平衡,同時(shí)彌補(bǔ)畫面中空白的地方,減少負(fù)空間,讓構(gòu)圖更加飽滿。

同時(shí)點(diǎn)和線的元素也是為了輔助襯托主體元素,分布要合理,避免過(guò)多,造成使畫面的擁擠。

面簡(jiǎn)單的理解成形狀,用形狀配合主體物,達(dá)到聚焦視覺(jué)中心,來(lái)突出主題,但是形狀不易過(guò)于復(fù)雜,「格式塔原理」——「簡(jiǎn)單」原則(我們的眼睛在觀看時(shí),眼腦并不是在一開(kāi)始就區(qū)分一個(gè)形象的各個(gè)單一的組成部分,而是將各個(gè)部分組合起來(lái),使之成為一個(gè)更易于理解的統(tǒng)一體),用戶更容易理解。

三角形——利用穩(wěn)定的特點(diǎn)來(lái)達(dá)到視覺(jué)的平衡

圓形——最簡(jiǎn)單直接有效的圖形元素,視覺(jué)聚焦更明確

多邊形——豐富畫面,多邊形的邊角多的特點(diǎn)也多用做突出設(shè)計(jì)的高逼格

形狀流體在營(yíng)銷中突出了活動(dòng)的促銷感和氣氛,在重大活動(dòng)中經(jīng)??吹?,色彩上也比較鮮艷。相較歐美、韓國(guó),中國(guó)電商運(yùn)用比較多,這也側(cè)面反映出出中國(guó)運(yùn)營(yíng)推廣競(jìng)爭(zhēng)的殘酷性映射出來(lái)的「浮夸」。

背景層

中國(guó)設(shè)計(jì)里最多變的就屬背景了。可以利用多彩漸變、放射的線、還有圖案疊加,讓畫面迎合表達(dá)的主體基調(diào)

韓國(guó)的設(shè)計(jì)分為涂鴉放射背景和純色背景簡(jiǎn)單幾何形狀

歐美撞色對(duì)比和性冷淡純色底,也會(huì)運(yùn)用視錯(cuò)覺(jué),來(lái)吸引用戶眼球

3. 營(yíng)銷推廣層面

文案是營(yíng)銷第一要素,想辦法突出運(yùn)營(yíng)信息,是所有運(yùn)營(yíng)必須要注意的,這就有了根據(jù)活動(dòng)氣氛進(jìn)行字體設(shè)計(jì)。

中國(guó)字體的復(fù)雜和文化的久遠(yuǎn)特殊性,對(duì)于字體我們是有很深的研究和造詣,表現(xiàn)空間也很大。另外由于中文字形的復(fù)雜,導(dǎo)致字庫(kù)設(shè)計(jì)成本比較大,字體種類相對(duì)較少,為了避免字體版權(quán)問(wèn)題,多采用一些設(shè)計(jì)變形來(lái)達(dá)到營(yíng)銷推廣目的。比如針對(duì)字形進(jìn)行改變、針對(duì)筆畫進(jìn)行加工、針對(duì)體積和質(zhì)感進(jìn)行變化等。

層次疊加——提取等比重的筆畫,變現(xiàn)字體的體積和空間感

筆畫鏈接——讓文字直接更緊湊,空間運(yùn)用更整體合理

筆畫裝飾——增加文字設(shè)計(jì)感,突出表現(xiàn)風(fēng)格

厚度層次——讓字體突出,增加厚重感

字形改變?cè)O(shè)計(jì)——考慮到字體版權(quán),對(duì)字體進(jìn)行再設(shè)計(jì),結(jié)合主題進(jìn)行宣傳

字體內(nèi)部裝飾——字體呼應(yīng)主題的一種簡(jiǎn)單方式

韓國(guó)字形相對(duì)簡(jiǎn)單,變化不是很多,運(yùn)用厚度體積和筆畫裝飾來(lái)表現(xiàn)字體

歐美的西文字體更多的是運(yùn)用和主體物穿插、和字形搭配的變換,和復(fù)古風(fēng)字體厚度設(shè)計(jì)

4. 小結(jié)

可以看到不同的國(guó)家地區(qū)根據(jù)本國(guó)習(xí)慣、審美、風(fēng)格不同,都有各自不同的設(shè)計(jì)。中國(guó)營(yíng)銷快速簡(jiǎn)單直接出效果;韓國(guó)偶像路線,不管是對(duì)于模特的選擇,還是網(wǎng)紅形象的選擇,把粉絲效應(yīng)運(yùn)用到了;而歐美則簡(jiǎn)單兼顧設(shè)計(jì)創(chuàng)意表現(xiàn)。

淺談學(xué)習(xí)Banner

隨著教育在大趨勢(shì)下崛起,很多學(xué)習(xí)類產(chǎn)品開(kāi)始出現(xiàn)。很多在做教育的小伙伴求助,學(xué)習(xí)類的運(yùn)營(yíng) banner 無(wú)從下手,思路不清晰,那么我稍稍的屢了一下思路,淺談一下學(xué)習(xí) banner 的個(gè)人薄見(jiàn)。

在很多設(shè)計(jì)師剛開(kāi)始縷思路的時(shí)候,總因?yàn)闊o(wú)從下手而著急盲目,下意識(shí)的認(rèn)為「我不會(huì)啊」!那復(fù)雜的不會(huì),就從簡(jiǎn)單的開(kāi)始縷。從設(shè)計(jì)開(kāi)始,我構(gòu)圖都沒(méi)想好,設(shè)計(jì)啥設(shè)計(jì)?那再簡(jiǎn)單點(diǎn),從構(gòu)圖開(kāi)始吧,我思路都沒(méi)想好,構(gòu)啥圖?繼續(xù)再簡(jiǎn)單點(diǎn),一步一步往前推,直到推到最簡(jiǎn)單的細(xì)節(jié),從最初第一步開(kāi)始做。你會(huì)發(fā)現(xiàn),首先第一步就是先建立一個(gè)符合主題的思路。

談到學(xué)習(xí)類 banner,光聽(tīng)一聽(tīng)就覺(jué)得頭大甚至很討厭的事情。因?yàn)楸緛?lái)學(xué)習(xí)就是讓人很拒絕的,如何引導(dǎo)用戶主動(dòng)做一個(gè)不想做的事,就得用到一些特殊的手段了。

咱們這次主要從以下方面來(lái)多維度探討:

1. 主題定位方向

K12教育

K12 也就是九年義務(wù)教育和三年高中,所以人群定位青少年,年齡 7-18 歲。這個(gè)年齡段非常單純。

大家可以回想一下我們小時(shí)候,在這個(gè)年齡最享受的是什么?那就是「滿足感」和「參與感」,我們小時(shí)候玩積木、做游戲,最重要的不是贏了能得到什么東西,而是參與到其中享受快樂(lè)。所以建立一種參與感,參與進(jìn)來(lái)「一起玩」的感覺(jué),就會(huì)得到滿足。

我們看到下面這類 APP,為了能夠吸引這一部分用戶,大多都以有趣好玩為主,「游戲性」是最大的特點(diǎn),所以情感化設(shè)計(jì)是非常好的選擇,通過(guò)豐富的「體積感插畫」用游戲的思路激發(fā)興趣,讓他們感覺(jué)有參與感,從而吸引他們「想看」并「點(diǎn)擊」。

知識(shí)付費(fèi)

而對(duì)于成年人來(lái)說(shuō),學(xué)習(xí)需求變成一種「插件思維」,能夠快速學(xué)會(huì),或者說(shuō)是能夠收獲很多的干貨,突出不枯燥、學(xué)會(huì)、能懂。這類的情感化設(shè)計(jì)相對(duì)于少兒學(xué)習(xí)插畫,更多的突出主題所以,以更極簡(jiǎn)的設(shè)計(jì)形式。

有時(shí)候文字作為主視覺(jué)中心更加直觀,整體設(shè)計(jì)風(fēng)格可能更加簡(jiǎn)單,對(duì)于成年人來(lái)說(shuō),這種設(shè)計(jì)更能直達(dá)我們需求本身,更容易理解。

高端知識(shí)分享

對(duì)于這部分人來(lái)說(shuō),定位跟上面兩類完全不同,從所處層級(jí)來(lái)說(shuō)就不同。首先這類人,學(xué)習(xí)的可能就不只是干貨了,更多的需求是職場(chǎng)環(huán)境帶來(lái)的。比如,我怎么跟同事、朋友、下屬更好的相處,如何具有更好的說(shuō)服力,或者是想進(jìn)修一下,就有了學(xué)習(xí)需求,基于「馬斯洛金字塔」里的,這里學(xué)習(xí)需求可能也是更高層次的,為了體現(xiàn)自己的價(jià)值。

所以更關(guān)心的是,這是誰(shuí)講的課;通過(guò)設(shè)計(jì)情緒版,映射出當(dāng)前課程的專業(yè)、嚴(yán)謹(jǐn)、課程的價(jià)值高,這些關(guān)鍵點(diǎn)。

課程的品質(zhì)感的體現(xiàn),顏色不能太多,插畫設(shè)計(jì)元素少,更多的利用文字排版和少量圖形來(lái)突出主題。

總之,根據(jù)所代表的用戶來(lái)針對(duì)性設(shè)計(jì)。就好像剪頭發(fā),Tony 老師肯定不會(huì)給一個(gè) 20 多歲的年輕人理一個(gè)小平頭;穿衣服也一樣,你上班肯定不會(huì)穿個(gè)背心褲衩就去了,但在海邊放松你也不可能穿個(gè)西裝、牛仔,我相信大家都能明白這個(gè)道理。

2. 構(gòu)圖結(jié)構(gòu)

良好的構(gòu)圖,目的是能夠讓用戶易懂,首先結(jié)構(gòu)要清晰、簡(jiǎn)單,主要構(gòu)圖比如:居中、左右。

居中結(jié)構(gòu)

突出活動(dòng)文案,居中構(gòu)圖是個(gè)很好的選擇,不足就是體現(xiàn)不了有趣好玩的調(diào)性。直白說(shuō)主要就是明確干什么。所以用戶的視覺(jué)焦點(diǎn)會(huì)聚集在重心區(qū)域,忽略掉周圍的東西,在設(shè)計(jì)的時(shí)候,周圍元素主要是襯托,不能搶主視覺(jué)重心。

所以說(shuō)運(yùn)用插畫風(fēng)格的話,簡(jiǎn)單輪廓插畫和剪影插畫是最適合的。

設(shè)計(jì)的時(shí)候注意幾點(diǎn):一,主體物要突出飽滿,太小容易畫面太空;二,弱化輔助元素并不是要把它做的粗糙。

左右結(jié)構(gòu)

左右結(jié)構(gòu)分為兩種,一種是左圖右文,左文右圖。兩種構(gòu)圖的秘密在于,用戶的瀏覽順序是「從左至右」,如果圖在左邊,圖在表意性不明顯的情況下,我們需要看一遍文字,再看一遍圖,這樣圖相當(dāng)于重復(fù)瀏覽了兩次;文字在左邊就減少了重復(fù)閱讀,提高了閱讀效率,在運(yùn)營(yíng)推廣「3秒原則」里,是首先要考慮的因素。而插畫設(shè)計(jì)本身也是為了烘托氣氛,表意性不是很明顯,所以突出文案尤為重要。

所以,市面上大部分的學(xué)習(xí)知識(shí)類左右構(gòu)圖的,更傾向第二種左文右圖。

左右構(gòu)圖受限于屏幕顯示內(nèi)容,所以,有一個(gè)明確的主體物至關(guān)重要。比如:像 VIPKID 和噠噠英語(yǔ),會(huì)有一個(gè)自己的 IP 主形象,比較生動(dòng)突出了品牌特征,還能讓用戶有代入感;還有像一些知識(shí)分享的,就會(huì)有一個(gè)明確的講師或者人物,體現(xiàn)專業(yè)權(quán)威性,在設(shè)計(jì)上一切都以突出主人物來(lái)展開(kāi),就不要設(shè)計(jì)太過(guò)于復(fù)雜。

不同于電商的模特,主人物首先穿著上不能太花哨,要正式;周圍裝飾上不要太浮夸,要精簡(jiǎn),甚至像高端知識(shí)分享的,背景就一個(gè)簡(jiǎn)單顏色來(lái)襯托。

衍生結(jié)構(gòu)

還有以上面構(gòu)圖衍生的構(gòu)圖形式,比如傾斜構(gòu)圖,受限于 banner 尺寸高度,過(guò)大的傾斜角度會(huì)讓畫面失衡,負(fù)空間留白不均,會(huì)讓畫面不協(xié)調(diào)。

構(gòu)圖比例合理

注意畫面整體構(gòu)圖比例,文案占比永遠(yuǎn)都是大的,不要讓主要畫面輔助元素過(guò)大搶了文案的風(fēng)頭,因?yàn)榧词箞D形輔助再精彩,用戶更關(guān)心的是「你能給他看什么」。

文案和輔助元素大概是六四開(kāi),黃金分割比例能讓焦點(diǎn)更多的關(guān)注內(nèi)容,有些小伙伴可能在做的時(shí)候過(guò)多的沉浸在放大的畫布里,由于沒(méi)有直觀感受,錯(cuò)誤的預(yù)估當(dāng)前構(gòu)圖的合理性,所以做圖的時(shí)候多縮小畫布離遠(yuǎn)看是個(gè)非常不錯(cuò)的方法。還有一個(gè)就是,做完了 banner 導(dǎo)出圖片,雙擊打開(kāi)圖片,把圖拖小到無(wú)法拖動(dòng)為止,再看當(dāng)前實(shí)際尺寸大小,用實(shí)際尺寸來(lái)檢查。

更多構(gòu)圖形式:《文案超多的海報(bào)設(shè)計(jì)該怎么排版?16個(gè)實(shí)用模板送給你!》

3. 文案文字

文案選字

文字的選擇也是衡量當(dāng)前產(chǎn)品用戶定位的標(biāo)準(zhǔn),首先文字結(jié)構(gòu)不能太過(guò)于復(fù)雜,K12 教育因?yàn)楸旧碛脩裟贻p化的特點(diǎn),字形簡(jiǎn)單而且飽滿有趣,所以一些藝術(shù)手寫可愛(ài)字體比較適合。

免費(fèi)商用可愛(ài)字體推薦:沐瑤軟筆手寫體、站酷快樂(lè)體、鄭慶科黃油體、站酷小薇 LOGO 體、銳字真言體。

其他可愛(ài)字體推薦:漢儀唐美人、漢儀糯米團(tuán)、漢儀鑄字童年體、漢儀小麥體、方正胖娃體、方正字跡新手書、造字工房童心、文悅方糖體。

如果是高端知識(shí)分享和知識(shí)付費(fèi),體現(xiàn)高端。文字就要簡(jiǎn)單,字形不要那么隨意,一些黑體和簡(jiǎn)單的襯線體就比較合適。

免費(fèi)商用黑體襯線體推薦:思源黑、思源宋、站酷文藝體、方正書宋簡(jiǎn)體。

其他黑體襯線體推薦:漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時(shí)代體、造字工房尚雅體。

文案排版

當(dāng)用戶人群比較年輕,意味著所有的呈現(xiàn)方式都要直接,文案精簡(jiǎn)并且排版直觀,提煉關(guān)鍵主標(biāo)題,信息層級(jí)要拉開(kāi)明顯,如果信息層級(jí)不清楚,識(shí)別性是很差的,先看下面的案例:

看這兩個(gè),明顯右邊的對(duì)于我們識(shí)別,和對(duì)當(dāng)前功能的認(rèn)知更清晰,還有一個(gè)明顯的視覺(jué)引導(dǎo),突出了最主要的交互點(diǎn);而左邊的由于信息比較密集,導(dǎo)致我們無(wú)法短時(shí)間反應(yīng)出關(guān)鍵信息是什么,這是比較糟糕的,運(yùn)營(yíng)同樣如此,而運(yùn)營(yíng)比較尷尬的一點(diǎn)是,如果用戶看不懂或不感興趣,是根本不會(huì)點(diǎn)擊、不予理睬的。那么流量入口的意義就沒(méi)有了,設(shè)計(jì)的再精美,都是一個(gè)非常差的作品。

提煉文案是很有必要的,下面兩個(gè)同樣的設(shè)計(jì),右邊對(duì)于文案的認(rèn)知就更明顯。

有的時(shí)候往往文案的關(guān)鍵信息比較多,我們?cè)谂虐娴臅r(shí)候第一個(gè)重要點(diǎn),就是排版怎么拉開(kāi)信息對(duì)比,同時(shí)又讓排版緊湊?有時(shí)需要增加一些特定圖形,或按鈕。但是又會(huì)考慮,加了這些特殊圖形和文案又顯得相對(duì)獨(dú)立不整體;還有就是關(guān)鍵點(diǎn)該怎么取舍,強(qiáng)化那些文案、弱化哪些,或是主文案是重要的,同時(shí)關(guān)鍵的數(shù)字也要突出怎么辦?

左圖,左邊主文案放大了關(guān)鍵點(diǎn),由于右邊文案文字比較粗,所以層級(jí)拉開(kāi)還是不夠突出,如果想拉開(kāi)對(duì)比的話那就讓他們截然不同。右圖,字體選擇上拉開(kāi)強(qiáng)弱,讓右邊的文字比劃選擇細(xì)一些;左圖的關(guān)鍵數(shù)字不夠突出,通過(guò)提亮改變顏色,來(lái)強(qiáng)化;按鈕在左邊畫面顯得太獨(dú)立,和文案沒(méi)有形成統(tǒng)一關(guān)系,反而按鈕看起來(lái)變得要比文案重要,那么把按鈕插到里面。

現(xiàn)在所有的信息,一環(huán)插一環(huán),并且突出的文案明顯,關(guān)鍵數(shù)字也明顯;最后讓他們整體在畫面構(gòu)圖中面積比例放大,改版后是不是舒服很多。

還有一些小伙伴可能覺(jué)得親密性原則不就是距離相近么,然后沒(méi)有把控好各個(gè)部分的文字距離,導(dǎo)致反而該拉開(kāi)的沒(méi)有拉開(kāi),該近的沒(méi)有近。

上圖這個(gè)案例里,主文案分為了兩行,但左邊由于主文案行距比較寬,而跟輔助信息的距離太近,導(dǎo)致親密性不夠,而由于副標(biāo)題文案又比較孤立,上半部的信息和下半部信息太散,整體統(tǒng)一度不夠。

右圖改進(jìn)后,調(diào)整合適行距,并且加裝飾線,協(xié)調(diào)一下輔助信息比較短的問(wèn)題,同時(shí)也起到分割的作用讓上下文案有關(guān)聯(lián)和統(tǒng)一。

文案排版的其他細(xì)節(jié)還有錯(cuò)位排版時(shí),注意錯(cuò)位的大小,太大會(huì)丟失掉排版的平衡性;注意文案排版對(duì)齊,往往有的時(shí)候不注意,會(huì)讓你的作品看起來(lái)不夠精細(xì);文案做傾斜處理的時(shí)候,一般情況都是往右邊傾斜,第一,右邊都是我們的主要習(xí)慣方向;第二,往右可以很好的把用戶引導(dǎo)到關(guān)鍵信息上,這些也是做 banner 排版里經(jīng)常犯的錯(cuò)也是要規(guī)避的一些坑。

4. 顏色技巧

顏色傾向

如果是代表年輕化,多用綠色和黃色,綠色代表活力、生機(jī)、積極向上;黃色系代表溫暖、希望、舒服。

這兩個(gè)顏色由于是臨近色的關(guān)系所以也會(huì)搭配出現(xiàn)在畫面中,色環(huán) 90° 角的顏色搭配所以是最舒服的配色,還有就是顏色對(duì)比非常和諧。

由于藍(lán)色是綠色的鄰近色、是黃色的對(duì)比色,紅色是綠色的互補(bǔ)色、黃色的鄰近色,所以綠、黃、藍(lán)、紅這些會(huì)在畫面中組成主色、輔色、點(diǎn)綴色。

注意協(xié)調(diào)好每部分顏色之間占比,主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。

如果是代表科技、互聯(lián)網(wǎng),就會(huì)以藍(lán)色為主,顏色也不會(huì)像上面那樣豐富,顏色體現(xiàn)的設(shè)計(jì)也沒(méi)有那么活潑,代表冷靜、自然、科技。

一般畫面在2-3種顏色,以藍(lán)色為主,再搭配紫色。因?yàn)樽仙退{(lán)色是鄰近色,不會(huì)像暖色調(diào)一樣太沖撞,所以我們經(jīng)常會(huì)看到藍(lán)紫這種「好基友」的搭配。

知識(shí)分享類,分為普通的講師分享和高端知識(shí)分享。講師分享顏色要亮一些,顏色搭配大概是 1-2 種。

而高端知識(shí)分享,要體現(xiàn)知識(shí)的稀缺性和專屬感,代表尊貴、品質(zhì)、價(jià)值,顏色大多用暗色或消色(消色就是黑白灰),大概也是 1-2 種。

顏色方面我總結(jié)幾點(diǎn)坑需要避開(kāi)的:一,如果用插畫表現(xiàn),一定要避免顏色的灰和臟,因?yàn)閷W(xué)習(xí)代表著積極向上的,灰色不適合。顏色選取的時(shí)候大概要避開(kāi)「顏色警示區(qū)」的位置。

二,插畫風(fēng)格避免選擇紫和一些冷色調(diào),以暖色調(diào)為主,才能貼合情緒版定位;三,同樣的道理,顏色不要過(guò)于艷麗、過(guò)于刺激,反差明顯了,反而閱讀體驗(yàn)不好,影響觀感;四,所有的顏色最終都要定位到主題上,做完后,反向推倒檢查一下,顏色呈現(xiàn)符合當(dāng)前文案定位嗎?符合面向的用戶人群?jiǎn)??根?jù)主題當(dāng)前配色合適嗎?

更多電商配色方法:《這是一篇不看會(huì)后悔的配色干貨》

5. 小結(jié)

最后我想說(shuō)的是,所做的東西把自己當(dāng)成模擬用戶自檢一下,自己如果看到這個(gè) banner 會(huì)點(diǎn)擊么?會(huì)吸引到你么?能直觀感受到么?會(huì)讓你舒服么?如果連自己都無(wú)感,那是相當(dāng)失敗的。

如何使Banner中主體物更突出

運(yùn)營(yíng)專題在設(shè)計(jì)的時(shí)候,我們要考慮的是針對(duì)運(yùn)營(yíng)需求,給特定需求的用戶傳達(dá)零成本閱讀體驗(yàn),很多設(shè)計(jì)師做的 banner 畫面特別亂,原因是畫面中沒(méi)有突出主體元素。

所以在 banner 設(shè)計(jì)上要考慮貼合當(dāng)前傳達(dá)的主題,所謂設(shè)計(jì)的「言之有物」。下面來(lái)詳細(xì)的談一下運(yùn)營(yíng)設(shè)計(jì)時(shí)如何突出主體元素,其中的言之有物。

運(yùn)營(yíng)活動(dòng)最終想給用戶快速傳達(dá)文案信息,也就是「三秒閱讀」體驗(yàn),配合輔助文案的主體圖形更能方便用戶去理解。

可以看到下圖左為了讓畫面豐富,設(shè)計(jì)師往往會(huì)加一些輔助元素或圖形;而圖右糟糕的元素添加反而會(huì)過(guò)度設(shè)計(jì),干擾用戶對(duì)于運(yùn)營(yíng)活動(dòng)本身的理解和其表意性。

那么,如何突出視覺(jué)主體物,而達(dá)到最理想的設(shè)計(jì)作品的表意性呢?

我們從以下五方面細(xì)談:

1. 圖形化輔助元素

流暢線條的運(yùn)用

我們?cè)诳匆魳?lè)類運(yùn)營(yíng) banner 的時(shí)候發(fā)現(xiàn)線條運(yùn)用非常普遍,特別是利用 illustrator 里的「混合工具」來(lái)實(shí)現(xiàn)兩條線之間的復(fù)制混合。

人物涂鴉剪影

往往為了表現(xiàn)特定的主題:比如年輕化、個(gè)性化,通過(guò)錯(cuò)位移動(dòng),添加亮色來(lái)使人物突出,往往更多的表現(xiàn)在:音樂(lè)、設(shè)計(jì)、嘻哈接頭文化的電商運(yùn)營(yíng)宣傳中。

這類設(shè)計(jì)個(gè)性鮮明,所以做之前考慮好,所要傳達(dá)的特定的人群是不是符合當(dāng)前的審美認(rèn)知。

簡(jiǎn)單幾何形狀

有時(shí)候?yàn)榱俗寕鬟_(dá)主題更加明確,簡(jiǎn)潔化設(shè)計(jì)很有必要「少即是多」,所以比如學(xué)習(xí)和知識(shí)付費(fèi)類的設(shè)計(jì),干脆就用簡(jiǎn)單的圓形、方形、波浪曲線。

下面這個(gè)案例,設(shè)計(jì)者為了使這幾個(gè)人物不會(huì)太散,用圓形包裹,目的也是為了更加整體,試想一下,如果把圓形去掉,人物不僅會(huì)顯多,畫面也顯得既單調(diào)又亂。

立體幾何載體

讓風(fēng)格調(diào)性顯得品質(zhì)高,同樣讓設(shè)計(jì)少而精。需要注意的是,品質(zhì)感高逼格的設(shè)計(jì)所用的圖形相對(duì)要規(guī)整一些,盡量不要顯得太隨意,多用方塊形狀和立體幾何載體。

比如網(wǎng)易嚴(yán)選,為了突出「所賣東西都是精挑細(xì)選」,會(huì)采用立體幾何載體襯托的方式,所表現(xiàn)的就是「隆重和百里挑一」,我們不一樣~(會(huì)唱的朋友們一起唱)

多邊圖形

運(yùn)用模特表現(xiàn)的時(shí)候,高品質(zhì)感會(huì)用一些規(guī)則多邊形,比如:四邊形、多邊形等。多邊的形狀會(huì)給我們帶來(lái)穩(wěn)重感,「尊貴感與眾不同」往往是這類商品想傳達(dá)給我們的。

不規(guī)則流體

促銷類電商營(yíng)造促銷的氛圍,激發(fā)購(gòu)買欲,會(huì)用到多色彩的不規(guī)則流體,目的為了傳達(dá)「降價(jià)、折扣、滿減、超值、限時(shí)」等 ,往往會(huì)為圍繞主體物四周,突出主體元素。

小結(jié)

圖形化元素是最簡(jiǎn)單也是最實(shí)用的一種突出主體元素的表現(xiàn)方式,不管是用哪種,一定要想明白所表現(xiàn)的主題:符不符合當(dāng)前主題;推廣所屬對(duì)應(yīng)的用戶群體:心理認(rèn)知上能不能贊同;滿足這兩點(diǎn),所加的圖形才有意義。任何圖形都是為了輔助突出主體元素,記住這一點(diǎn),你就不會(huì)盲目的進(jìn)行設(shè)計(jì)。

2. 文案裝飾襯托

文字鋪底

直接把相關(guān)文字鋪底是最常見(jiàn)的一種方式,用當(dāng)前所對(duì)應(yīng)主題的人物名字、相關(guān)文案、對(duì)應(yīng)英文等。

文字與主體穿插

利用文字與主體的穿插營(yíng)造出空間感,也是在平面設(shè)計(jì)中經(jīng)常用到的手法,同樣也是在保證文字基本的識(shí)別度前提下。

注意文字顏色與主體顏色之間要拉開(kāi)反差,不要糊成一坨,就適得其反了,適當(dāng)?shù)臅r(shí)候加一點(diǎn)點(diǎn)陰影還是很有必要的。

小結(jié)

不管是什么形式,所加的文字要有意義,跟主題相關(guān)。任何加的文案一定要能襯托主體物,也要有很強(qiáng)的表意性,畢竟文案才是最重要的。

3. 顏色對(duì)比的運(yùn)用

主體物吸色襯托

從主體物上之間選取,作為背景顏色搭配,來(lái)襯托主體物簡(jiǎn)直不要太完美,前提是主體物的顏色相對(duì)夠和諧舒服。需要襯托的背景顏色相對(duì)要弱一點(diǎn),以突出主體。

顏色對(duì)比

我們一想到顏色對(duì)比,馬上想到「紅配綠賽狗屁」這句話,這句話的意思不是說(shuō)紅配綠不行,而是說(shuō)錯(cuò)誤的紅配綠不行,聽(tīng)不懂???來(lái),舉個(gè)栗子…李子…梨子…例子!

左圖的紅綠顏色占比可以看到是比較平均的,大概1:1的比例,但是紅色作為一個(gè)比較刺激的顏色,顏色很鮮艷,如果搭配的綠色也一樣飽和度很高,兩個(gè)撞到一起沒(méi)有一個(gè)突出色,畫面就不會(huì)那么和諧了。

右圖如果我們把紅色的占比相應(yīng)的減少,飽和度不變,而綠色降低飽和度,從而面積占比增大,起到襯托的作用,畫面之間是不是舒服很多。

下圖其他的顏色對(duì)比同樣如此。

小結(jié)

顏色對(duì)比的口訣是:主體如果是亮色,背景就用冷色;主體用重色,背景用亮色;主體用純色,背景用灰色;不管哪種對(duì)比,主體物的顏色一定是面積最小的那一個(gè),無(wú)論如何拉開(kāi)顏色對(duì)比反差是王道。

4. 主體物局部打光

人物面部打光

人物面部是最容易辨識(shí),也是視覺(jué)焦點(diǎn)部分,所以讓面部從畫面凸現(xiàn)出來(lái)尤為重要,讓光源聚焦到臉部,主體人物顯得更加有質(zhì)感和飽滿度。

物體亮部打光

物體和人物相比相對(duì)簡(jiǎn)單,亮部高光部分為視覺(jué)焦點(diǎn),讓物體顯得有質(zhì)感,只需要給亮部特殊光源即可。

小結(jié)

光線能在突出主體物的同時(shí),讓構(gòu)圖更加豐富和飽滿,切記光線不要過(guò)亮,看起來(lái)會(huì)很不舒服。

5. 主體元素?cái)[放技巧

人物截取范圍

截取擺放人物的時(shí)候注意,為了讓視覺(jué)焦點(diǎn)集中、有辨識(shí)度。具有代表性的人物和明星一般截取一半左右,大約胸部以上部位;而電商模特為了展示所賣衣服,一般露出大約三分之二。

萬(wàn)萬(wàn)不要切頭部

讓人物完美的呈現(xiàn)在畫面之中,讓畫面能夠看起來(lái)舒服些,構(gòu)圖也相對(duì)完整,反之把頭部一刀切,會(huì)使畫面負(fù)空間變小,構(gòu)圖擁擠,而觀看者對(duì)于人物的識(shí)別度也隨之降低,閱讀成本變高。

多人物擺放要求

多人物組合時(shí),整體人物處理要基本保持一致,特別是眼睛視線要盡量保持統(tǒng)一的視覺(jué)基準(zhǔn)線,不然會(huì)顯得雜亂不堪。

多物體的擺放

表現(xiàn)美食產(chǎn)品的時(shí)候,文字居中構(gòu)圖,物體散點(diǎn)擺放要注意,角度的統(tǒng)一,統(tǒng)一俯視角度,不要有俯視有平視,保證統(tǒng)一度。

6. 案例帶練示例

案例分析

這是一個(gè)小伙伴做的醫(yī)美類的運(yùn)營(yíng) banner,當(dāng)看到這個(gè)設(shè)計(jì)的時(shí)候我的內(nèi)心是崩潰的,我們分析一下問(wèn)題。

問(wèn)題一,首先主體物沒(méi)有突出,主體人物偏灰,背景也灰;問(wèn)題二背景太亂,沒(méi)有視覺(jué)焦點(diǎn);問(wèn)題三,文案識(shí)別度完全丟失掉了,排版也太亂;好下面我們來(lái)改一下。整體看下來(lái),并沒(méi)有表現(xiàn)出醫(yī)美要體現(xiàn)的「變美」,用戶完全沒(méi)有視覺(jué)感受。

調(diào)整改動(dòng)

前后對(duì)比

最后我們來(lái)看看對(duì)比效果,是不是好很多。

無(wú)論什么樣的設(shè)計(jì),加什么樣的元素,目的只有一個(gè)就是要有理有據(jù)、有道理,所有的運(yùn)營(yíng)設(shè)計(jì)都是為了輔助主體文案。不要讓你的設(shè)計(jì)無(wú)用,或者減分,把設(shè)計(jì)元素最大化發(fā)揮它的作用才是設(shè)計(jì)的最終目的,你就說(shuō)是不是吧!

我以前在阿里巴巴的流量方法論

資深UI設(shè)計(jì)者

作者從自身經(jīng)驗(yàn)出發(fā),結(jié)合實(shí)際案例,分享了流量獲取過(guò)程中非常有價(jià)值的知識(shí),值得運(yùn)營(yíng)人細(xì)讀精讀,一起學(xué)習(xí)。

大家好,我是國(guó)平。我做流量已經(jīng)有16年了,2010年之前主要在阿里巴巴國(guó)際站負(fù)責(zé)免費(fèi)流量增長(zhǎng),把海外B2B免費(fèi)流量的日UV做到幾百萬(wàn)。后來(lái)成立了一家乙方公司叫光年實(shí)驗(yàn)室(以前叫杭州光年),是攜程、阿里云等40多家主流的大型互聯(lián)網(wǎng)公司的流量顧問(wèn)。另外這些年也沒(méi)少折騰其他項(xiàng)目,其中做過(guò)電商(外貿(mào)獨(dú)立B2C網(wǎng)站)、做過(guò)電商系統(tǒng)(類似有贊)、 做過(guò)移動(dòng)端APP (社交方向)。

來(lái)“群響”這段時(shí)間,只要能參加的聚會(huì)都參加了,聽(tīng)過(guò)大家分享很多非常有意思的流量玩法。先不說(shuō)不同行業(yè)的“隔行如隔山”,就是在流量領(lǐng)域,可能有很多種細(xì)分領(lǐng)域,大家之間的資訊都是隔離得很厲害的。流量的渠道和玩法是永遠(yuǎn)在變的,不過(guò)也有一些不變的東西,如平臺(tái)和內(nèi)容創(chuàng)造者的博弈、大家仰視平臺(tái)的心態(tài)(其實(shí)沒(méi)必要)、以及各種流量玩法的底層模式等。

我首先分享的是過(guò)去一個(gè)很主流的流量渠道–搜索引擎,看看在現(xiàn)在這個(gè)移動(dòng)互聯(lián)網(wǎng)時(shí)代和新媒體時(shí)代還能如何獲取流量。

第一個(gè)議題就是:現(xiàn)在是否還值得做搜索引擎營(yíng)銷

結(jié)論是:值得做,不過(guò)如果不了解現(xiàn)在國(guó)內(nèi)百度的現(xiàn)狀生態(tài),99%的人ROI一定會(huì)很差的。至于海外的Google,它依然是大部分人的第一大流量來(lái)源。

首先說(shuō)為什么值得做。

大家可能不知道的是,在搜索引擎,也是65%以上的流量來(lái)自移動(dòng)端,所以不要認(rèn)為搜索引擎是PC流量的代表。百度的DAU是沒(méi)有下降的,DAU在3億多,大家在手機(jī)上也是會(huì)搜索的。

我喜歡把流量分為“搜索流量”和“社交流量”,分別對(duì)應(yīng)“人找信息”和“信息找人”。我的觀點(diǎn)是這兩種大家獲取信息的模式?jīng)]有主次之分。

只是在國(guó)內(nèi),百度的相對(duì)市場(chǎng)份額是一路下滑的,先是淘寶、去哪兒等分走了很多垂直搜索的流量,接著又有微博、微信、抖音等社交平臺(tái)相繼崛起,百度沒(méi)有以前那么重要了。

我們服務(wù)的好幾家頭部互聯(lián)網(wǎng)公司每天的總UV(包括APP)當(dāng)中,還有超過(guò)四分之一的流量來(lái)自搜索引擎。 客戶不能拿來(lái)作為案例,不過(guò)有公開(kāi)的渠道可以查到的一個(gè)例子:知乎某段時(shí)間的每天的總UV有四千多萬(wàn)的情況下,來(lái)自搜索引擎的UV有一千三百萬(wàn)。

搜索引擎流量的轉(zhuǎn)化率,一直都是所有流量渠道里面最高的。因?yàn)樯缃幻襟w的流量的性質(zhì)是“逛”,而搜索引擎流量是主動(dòng)“搜”。搜索引擎流量在關(guān)鍵詞和內(nèi)容匹配的情況下,有不少做到過(guò)10%左右轉(zhuǎn)化的例子。

然后搜索引擎流量相對(duì)穩(wěn)定可控,而且像SEO自然排名這樣的流量還不要花錢,這也是頭部互聯(lián)網(wǎng)公司比較重視這塊的原因。不說(shuō)它們,就是那種中型的以賣流量為商業(yè)模式的互聯(lián)網(wǎng)公司,如融360、土巴兔就是其中的代表,每天都從百度獲取百萬(wàn)UV以上SEO免費(fèi)流量。

最后就是目前還存在一些以前很少有人知道的紅利,這是今天后面要講的重點(diǎn)。

那為什么說(shuō)大部分人做搜素引擎流量的人ROI會(huì)很差,要從自然排名(SEO)和 競(jìng)價(jià)排名 (PPC)兩塊來(lái)看所謂的內(nèi)情。

搜索引擎營(yíng)銷分為自然排名和競(jìng)價(jià)排名兩塊,自然排名就是非廣告排名,是由系統(tǒng)按照一定的算法來(lái)決定誰(shuí)應(yīng)該排在最前面。競(jìng)價(jià)排名就是買排名(PPC。即Pay Per Click),根據(jù)你花錢的多少以及用戶更喜歡誰(shuí)的廣告把你的廣告排在前面去,當(dāng)然在百度主要是看誰(shuí)花的錢多。

對(duì)于自然排名來(lái)說(shuō),它的回報(bào)周期應(yīng)該是一年以后,而很多人期望幾個(gè)月就有好效果;然后是整個(gè)行業(yè)的無(wú)論是甲方公司還是乙方公司都沒(méi)有很專業(yè)的人,搜索引擎營(yíng)銷服務(wù)商行業(yè)總體來(lái)說(shuō)是一個(gè)逆淘汰的行業(yè)。還有百度自己的頁(yè)面在搜索結(jié)果中占了快三分之一,而剩下的流量頭部效用明顯,也就是只有大網(wǎng)站才能獲得不錯(cuò)的流量;在這么一種糟糕的情況下,百度對(duì)優(yōu)秀內(nèi)容的判斷嚴(yán)重失控,很多人通過(guò)一些作弊的方法快速獲取了很多流量。

而競(jìng)價(jià)排名這種花錢買排名的方式,對(duì)于很多人是雞肋一樣的存在了。我個(gè)人覺(jué)得百度的價(jià)值觀不是很正,他們?cè)谝婚_(kāi)始就用錯(cuò)誤的方法在引導(dǎo)大家投放廣告。 這個(gè)可能有點(diǎn)危言聳聽(tīng),也就是在指責(zé)百度為了自己的利益,這十幾年以來(lái)一直在誤導(dǎo)大家去花更多的錢。

這是由于競(jìng)價(jià)排名的模式就決定了,只有大家都共同認(rèn)為某些關(guān)鍵詞的流量很大才會(huì)去競(jìng)爭(zhēng)這個(gè)詞,而大眾都是拍腦袋來(lái)認(rèn)為哪些詞重要與否的,比如任何一個(gè)賣口紅的都認(rèn)為“口紅”這個(gè)詞要是不投的話,好像搜索引擎流量就不要做了,百度也就順?biāo)浦圩尨蠹矣眠@種思維模式去投廣告。

具體案例:我給大家兩張圖,假設(shè)客戶是在賣“阿膠”:

為了讓大家有直觀的感受,我先考一下大家:假設(shè)你是這個(gè)賣阿膠的商家,你去百度投廣告,你們會(huì)決定買什么關(guān)鍵詞呢?

 

 

這張是曾經(jīng)百度給客戶培訓(xùn)的關(guān)鍵詞選詞方法:

這種方法就是大家去定義一些和你的業(yè)務(wù)相關(guān)的核心詞,如阿膠、滋補(bǔ)品等,再定義一些前綴和后綴等,然后再排列組合。這樣出來(lái)的詞就是:

上海阿膠電話

北京阿膠電話

上海阿膠網(wǎng)站

……

由于大家選詞方法一樣,就會(huì)產(chǎn)生競(jìng)爭(zhēng),一定可以把少部分大家能想到的詞的價(jià)格抬上去。

而這張是我們一直以來(lái)用的關(guān)鍵詞選詞方法:

這里是通過(guò)很多數(shù)據(jù)挖掘工具,先把整個(gè)行業(yè)用戶正在搜索什么都列出來(lái),必須要窮盡整個(gè)行業(yè),越多越好,然后按照核心詞再分成不同的組,這個(gè)時(shí)候用戶的需求就明明白白列在你面前了。

從這份數(shù)據(jù)能看到,“阿膠”這個(gè)代表整個(gè)類目的詞語(yǔ),每天的搜索量也只有8078。搜索引擎上所有的行業(yè)都是這樣的,用戶搜索的80%的詞,字?jǐn)?shù)都是很多的。其實(shí)大家想一想也不難理解,即使一個(gè)初級(jí)網(wǎng)民,也明白用“阿膠”這樣的詞語(yǔ)是搜索不到自己想要的東西的,大部分來(lái)搜索引擎搜索都帶有明確的需求而來(lái),大部分人的需求都有個(gè)性化和獨(dú)特的地方。

但是在商家投放廣告的時(shí)候,就陷入了一個(gè)思維上的誤區(qū),以為“阿膠”這個(gè)詞語(yǔ)特別特別重要。實(shí)際上,一個(gè)品類重要,不意味著代表這個(gè)行業(yè)的某個(gè)行業(yè)關(guān)鍵詞就重要。

比如“iphone11 價(jià)格“這個(gè)詞語(yǔ)的搜索量遠(yuǎn)遠(yuǎn)超過(guò)”手機(jī)“這個(gè)詞語(yǔ);”163郵箱“這個(gè)詞語(yǔ)的搜索量一天是十多萬(wàn),而”免費(fèi)郵箱”這個(gè)詞語(yǔ)的搜索量是三千多?!靶≌f(shuō)” 這個(gè)詞搜索量不高,“TXT全本小說(shuō)下載” 這個(gè)詞每天有160多萬(wàn)的搜素量。

百度也就沒(méi)有糾正大家的誤區(qū),讓大家按照這個(gè)思維定勢(shì)去買關(guān)鍵詞。十多年來(lái),很多人也是這樣按照這個(gè)誤區(qū)在做著SEO。

第二張圖是我從百度于2019年10月28日獲取的數(shù)據(jù),每天百度上真實(shí)地搜索“阿膠”相關(guān)的關(guān)鍵詞基本都在這里了。無(wú)論你怎么想破腦袋,你也想不出用戶是這樣在搜索的。圖二的數(shù)據(jù),即使有些從事了10年搜索引擎流量運(yùn)營(yíng)的人,從來(lái)都沒(méi)看到過(guò)的。

我前面所說(shuō)的流量紅利,就是這么多年以來(lái)行業(yè)里都在用錯(cuò)誤的方法做搜索引擎流量,所以以至于到了今天,搜索引擎上還有一大半的流量沒(méi)有人要的。我再發(fā)幾張圖,大家自行去搜索就知道了。

(這里的日搜索量是指查詢這個(gè)數(shù)據(jù)的那天再往前30天的流量總數(shù)除以30天,就得出最近一個(gè)月的日均搜索量。數(shù)據(jù)是有時(shí)效性的,所以要用的數(shù)據(jù)。)

以下是稍舊一些的數(shù)據(jù)。

投資理財(cái):

汽車行業(yè):

第二個(gè)議題:搜索引擎營(yíng)銷是一個(gè)什么樣的流量世界

搜索引擎營(yíng)銷已經(jīng)有一幫人做了十多年,現(xiàn)在來(lái)看這是一個(gè)什么樣的流量世界呢?

首先搜索引擎是“長(zhǎng)尾理論”的最佳實(shí)證, 在搜索引擎做流量要深刻的理解長(zhǎng)尾效用。Google曾經(jīng)公布過(guò)一個(gè)數(shù)據(jù):google每天的十幾億次搜索中,如果匹配用戶搜索的那個(gè)幾個(gè)詞語(yǔ),有15%的搜索詞是過(guò)去1年從來(lái)沒(méi)有人這么搜索過(guò)的。比如類似搜索 “ how to make an automatic door in minecraft ”,這樣的詞的組合, 每天有15%的詞過(guò)去1年都沒(méi)人這么組合在一起搜索。這樣的情況,不光Google和百度是如此,淘寶、小紅書、微信搜索里都是這樣。

如果真是情況是這樣的,你根本就沒(méi)法做到說(shuō)我要“做某幾百個(gè)詞的排名”這樣的事情,因?yàn)槊刻煸~語(yǔ)都在變。我看過(guò)太多團(tuán)隊(duì)其實(shí)就拿著幾十個(gè)自己想出來(lái)的詞在那里做投放和做SEO。這種情況十年前是這樣,現(xiàn)在也還是這樣。

很多人問(wèn)過(guò)我怎么找搜索引擎營(yíng)銷方面的人。我的建議是只要他們問(wèn)面試者一個(gè)問(wèn)題就可以結(jié)束面試了。那就是問(wèn)對(duì)方在做搜索引擎營(yíng)銷的時(shí)候目標(biāo)關(guān)鍵詞是多少個(gè)。

分這么幾個(gè)水平段:

  • 少于1千個(gè)詞—-還沒(méi)有入門;
  • 1千到3萬(wàn)個(gè)詞—-大部分是標(biāo)準(zhǔn)教程培訓(xùn)出來(lái);
  • 3萬(wàn)到10萬(wàn)個(gè)詞—-只有這個(gè)階段才能考慮錄用 ;
  • 10萬(wàn)到50萬(wàn)個(gè)詞—-對(duì)于一個(gè)非常小業(yè)務(wù)范圍的品類是合格的;
  • 50萬(wàn)到500萬(wàn)個(gè)詞—-這樣的人大概一年都面試不到一個(gè)。

在搜索引擎上,找到50萬(wàn)個(gè)屬于某個(gè)行業(yè)詞絕對(duì)是一種很強(qiáng)的能力。實(shí)際光找足50萬(wàn)這個(gè)數(shù)量還不夠,如果要做好投放,還要找到最佳性價(jià)比、鮮的詞?,F(xiàn)場(chǎng)如果有在投放搜索引擎廣告的人,對(duì)比看一下自己公司后臺(tái)有多少關(guān)鍵詞在投就知道你們目前所處的階段了。

搜索引擎其實(shí)有廣泛匹配的機(jī)制,但是如果你投的詞太少,廣泛匹配機(jī)制也并不能挽救你,而且這樣會(huì)有很多沒(méi)有轉(zhuǎn)化的詞在浪費(fèi)錢。

現(xiàn)場(chǎng)目前做的是新媒體行業(yè)居多,假設(shè)你是一個(gè)做美妝的,你的目標(biāo)就是要小紅書上的美妝KOL推廣你的產(chǎn)品。假設(shè)小紅書官方在后臺(tái)把所有的美妝達(dá)人都拉一份數(shù)據(jù)統(tǒng)計(jì)有2萬(wàn)個(gè),而你們現(xiàn)在只有20多個(gè)KOL在投,你的對(duì)手卻有1000多個(gè)。(這里先忽略1000多個(gè)KOL的操作成本,和紅人KOL營(yíng)銷不同,買某個(gè)詞的流量在搜索引擎上操作成本很低。)這個(gè)和在搜索引擎上做投放是一模一樣的。

類似的,不知道大家同不同意,現(xiàn)在還在找大V合作的,如果是做效果廣告的話,就是那種以前在搜索引擎上買“阿膠” 這種關(guān)鍵詞的人,ROI很低。

阿里巴巴的流量增長(zhǎng)團(tuán)隊(duì)是2002年成立,現(xiàn)在在搜索引擎這塊的投放水平可以看一個(gè)網(wǎng)頁(yè):https://www.alibaba.com/showroom/showroom.html

大家點(diǎn)一下A字母,這里都是以A開(kāi)頭的關(guān)鍵詞,一頁(yè)是120個(gè)詞,A字母下有22429頁(yè)。A到Z一共是2千多萬(wàn)個(gè)詞。

以前這是我負(fù)責(zé)的,我能確定每個(gè)詞每天的流量都達(dá)到了一定的搜索量,也就是說(shuō)都是比較重要的詞語(yǔ)。那時(shí)候我們的口頭禪就是“加詞等于加流量”。記得當(dāng)時(shí)從國(guó)外一家專門賣詞的公司買了3萬(wàn)多個(gè)優(yōu)質(zhì)的詞,然后我們一個(gè)季度的KPI就完成了。

順便提一下, 其實(shí)這種方法也可以用來(lái)做產(chǎn)品。

比如旅游行業(yè),當(dāng)時(shí)有個(gè)知名網(wǎng)站,我們把整個(gè)旅游行業(yè)的詞挖掘到了大概有500萬(wàn)左右,然后像前面那樣分組分類,就知道了這個(gè)行業(yè)大部分用戶的訴求。

當(dāng)你在搜索引擎上能分析的詞達(dá)到500萬(wàn)的時(shí)候,已經(jīng)基本上是全量數(shù)據(jù)了,這些數(shù)據(jù)至少可以代表這個(gè)行業(yè)一半以上的人的訴求。這可以成為大數(shù)據(jù)的一次很好的應(yīng)用。后來(lái)通過(guò)這批數(shù)據(jù),發(fā)現(xiàn)旅游行業(yè)只要你去做攻略類產(chǎn)品是一定會(huì)活得不好的,因?yàn)楣ヂ灶愋枨笳急扰旁诤芎竺?。結(jié)果現(xiàn)在大家也看到有些做攻略類的APP至今掙扎在盈利邊緣。

然后大家看前面的汽車行業(yè)的詞庫(kù)數(shù)據(jù),從2015年起, “SUV”和“七座”一直是這個(gè)行業(yè)真正的熱點(diǎn),但還是很多汽車互聯(lián)網(wǎng)公司不知道這個(gè)。

然后看在阿里巴巴的一個(gè)頁(yè)面:https://www.alibaba.com/showroom/mp3.html

這里列出了MP3的一些屬性,有按“功能”、“屏幕” “充電時(shí)間” “風(fēng)格” 和 ”顏色”, 這里的屬性分類以及每個(gè)分類里的那些項(xiàng)目,完全是按搜索引擎里用戶的搜索量從高到低排序的。這樣做的結(jié)果就是轉(zhuǎn)化率和粘度非常高,比當(dāng)時(shí)產(chǎn)品經(jīng)理做的頁(yè)面提高了4倍。

具體很多細(xì)節(jié)可以在線下聚會(huì)可以分享。

第三個(gè)議題:怎么做好SEO和PPC

做好SEO和PPC最重要的事情就是關(guān)鍵詞挖掘,不做這個(gè)事情基本是沒(méi)法搞好搜索引擎流量的。大家要明白這么一個(gè)場(chǎng)景:在搜索引擎上,你的流量是通過(guò)一個(gè)個(gè)的關(guān)鍵詞作為載體傳播出去的,沒(méi)有太多詞傳播你的流量,總的流量怎么可能多呢。

具體的關(guān)鍵詞工具,我先介紹我們開(kāi)發(fā)的一個(gè):

https://mp.weixin.qq.com/s/M1VCCFqNb9xSBnmD2hktFg

一個(gè)行業(yè)里,光靠人腦是想不出這么多詞的,這個(gè)工具可以幫你自動(dòng)挑出很多詞。光年實(shí)驗(yàn)室正在做一個(gè)SAAS平臺(tái),還有更多的關(guān)鍵詞工具會(huì)出來(lái)。

注意一點(diǎn),詞語(yǔ)的數(shù)據(jù)一定要有時(shí)效性,最好就是最近幾天的。前面說(shuō)過(guò)Google的15%的搜索詞是過(guò)去1年從來(lái)沒(méi)有人這么搜索過(guò)的,如果數(shù)據(jù)沒(méi)有時(shí)效性是沒(méi)什么意義的,很多一個(gè)星期前流量大的詞現(xiàn)在可能就不是的了。

對(duì)于很多人來(lái)說(shuō),最能去執(zhí)行的就是去百度做PPC投放。如果你們可以搞好關(guān)鍵詞挖掘,百度對(duì)你來(lái)說(shuō)依然是一個(gè)非常有紅利的流量渠道。

不過(guò)要遵循一些基本規(guī)則:

1. 為了防止收不回成本,第一批投放的詞必須是沒(méi)有任何人和你競(jìng)爭(zhēng)的

在百度,如果這個(gè)詞沒(méi)有人和你競(jìng)爭(zhēng),點(diǎn)擊價(jià)格只要3毛錢就可以。

所以一開(kāi)始的策略就是買別人沒(méi)有投的詞,我們所有投出去的詞都要查一下有沒(méi)有人在投,但凡有一個(gè)競(jìng)爭(zhēng)對(duì)手就不投了。大家可能想不到的是,即使這樣你竟然還是可以投很多詞的。

2. 做好廣告組和落地頁(yè)面的優(yōu)化

我個(gè)人覺(jué)得搜索引擎是最早教會(huì)國(guó)內(nèi)互聯(lián)網(wǎng)人什么是轉(zhuǎn)化率、落地頁(yè)、復(fù)購(gòu)這些基本概念的,在它之后成熟的淘寶只是進(jìn)一步把它普及給了更多的人。 而北美在90年代中期就有了第一波商業(yè)化的互聯(lián)網(wǎng)公司,它們更早更系統(tǒng)的研究很多東西,可以去補(bǔ)課,比如《Landing Page優(yōu)化權(quán)威指南》這種最基本的書。

很多淘系的培訓(xùn),由于它是一個(gè)封閉系統(tǒng),速成技巧居多,系統(tǒng)的東西不多。廣告組和落地頁(yè)面的優(yōu)化,稍微科學(xué)地做一下改進(jìn),可能可以提升好幾倍的ROI。

至于那種最基本的事情都無(wú)法做到的公司,比如:你們的投放人員投放的關(guān)鍵詞少于100個(gè);以及無(wú)論什么關(guān)鍵詞的流量都跳轉(zhuǎn)到首頁(yè)等這種業(yè)余行為,應(yīng)該立即關(guān)掉搜索引擎投放,去拓展現(xiàn)在的微信、快手和抖音等渠道。沒(méi)有專業(yè)投放就只能放棄這個(gè)渠道了,但要我說(shuō)這里真的很多流量沒(méi)人要。

我曾經(jīng)見(jiàn)過(guò)兩家在海外競(jìng)爭(zhēng)的中國(guó)互聯(lián)網(wǎng)公司,同樣的APP,一家的獲客成本是1美元多,另一家是10多美元,而第二家一直以為本來(lái)就要這么多,直接決定了后面一家公司一年后在這個(gè)賽道出局。

不專業(yè)的投放就是在給公司放血,我見(jiàn)過(guò)很多不專業(yè)的投手害死公司。

3. 不要找外包公司,靠自己的團(tuán)隊(duì)打造自己的流量競(jìng)爭(zhēng)力

特別是那種代為操作帳號(hào)的公司。這個(gè)句話得罪很多人,但是事實(shí)。流量獲取、用戶增長(zhǎng)應(yīng)該要成為一家公司的核心競(jìng)爭(zhēng)力,怎么可能靠一家第三方公司拿到這個(gè)競(jìng)爭(zhēng)力呢? 搜索引擎流量外包這是一個(gè)逆淘汰行業(yè),好的公司已經(jīng)出局。(像我們這樣的顧問(wèn)型公司也只適合成熟的流量團(tuán)隊(duì))

例如現(xiàn)在上市的某家流量外包的公司,曾經(jīng)我們?cè)谵k公室把他們的方案當(dāng)作笑話在傳閱的。 當(dāng)他們的收益來(lái)自于你投放廣告金額的百分比的時(shí)候,你投放的金額越多,他們收入越高,利益相悖,怎么可能會(huì)有精細(xì)化優(yōu)化的動(dòng)機(jī)。由于甲方帳號(hào)太多、而這些帳號(hào)基本都是實(shí)習(xí)生在操作的外包公司不要太多。

以我有限的創(chuàng)業(yè)經(jīng)驗(yàn), 產(chǎn)品和流量,應(yīng)該是要公司高管要花最多時(shí)間的部分。我這么多年看過(guò)很多好的用戶增長(zhǎng)團(tuán)隊(duì),很大程度上他們成就了那些公司。例如,我比大家更早知道今日頭條的張一鳴,在2006年他們做酷訊的時(shí)候流量是做得特別好,甚至有一種方法成了后來(lái)行業(yè)慣用的方法。

當(dāng)時(shí)酷訊做火車票查詢,他們從一個(gè)固定的火車查詢數(shù)據(jù)里把很多站站查詢、車次查詢生成了幾十萬(wàn)個(gè)不同的網(wǎng)頁(yè),而這些網(wǎng)頁(yè)都命中了很多查詢“上海到南京火車票”這樣的流量,從前面的案例大家可以推算,這種流量偏偏是大頭,而“火車票“這種太泛的詞流量沒(méi)大家想象的那么高,所以酷訊的搜索引擎流量是很好的。

這種做法即使是十年后被“欣欣旅游網(wǎng)“抄了一遍依然獲得了大量流量。

操作方法具體看:http://huoche.cncn.com/

這種方法后來(lái)被總結(jié)為:當(dāng)你的行業(yè)有一些從固有數(shù)據(jù)庫(kù)能查詢到的數(shù)據(jù),請(qǐng)把它網(wǎng)頁(yè)化,去命中搜索引擎的關(guān)鍵詞,然后這些流量就是你的。

后來(lái)有人把QQ號(hào)碼、郵政編碼、手機(jī)號(hào)碼、天氣預(yù)報(bào)等等都網(wǎng)頁(yè)化一遍,都是大量的流量。

最開(kāi)始今日頭條APP在推出后,一個(gè)多月就做了900萬(wàn)的裝機(jī)量,這是擅長(zhǎng)流量的團(tuán)隊(duì)才能完成的業(yè)績(jī)。而“今日頭條”這個(gè)APP早期對(duì)5千多個(gè)網(wǎng)站抓取內(nèi)容再去做流量的做法,和早期站長(zhǎng)的那些站群方式是何其相似。大家想想抖音這個(gè)APP本身是怎么火的,怎么可能沒(méi)有流量增長(zhǎng)團(tuán)隊(duì)在后面做了大量工作。

SEO這塊,要充分利用百度把近三分之一的流量給了自己的產(chǎn)品這個(gè)狀態(tài)。百度問(wèn)答、百度貼吧、百度文庫(kù)、百家號(hào)甚至百度網(wǎng)盤等等全家桶里,全部要有你的內(nèi)容。當(dāng)你有了上面那樣的詞庫(kù),詞庫(kù)里都是用戶的搜索需求,搜索量哪些高哪些低已經(jīng)全部告訴你了。然后再在百度這些渠道里鋪內(nèi)容就只需要一些常識(shí),只要去琢磨如何把你的內(nèi)容合理放上去就可以了。

最近的流量紅利是百度小程序,這和以前的百家號(hào)一樣,是優(yōu)先排名的。我個(gè)人覺(jué)得這是百度最后一波紅利了。

百度也給了很多大站很高的權(quán)重,如知乎、搜狐自媒體、CSDN(你沒(méi)看錯(cuò))等,這一點(diǎn)在海外的Google也是這樣的趨勢(shì),這不是搜索引擎偏心,而是經(jīng)過(guò)很長(zhǎng)時(shí)間的進(jìn)化,上面會(huì)聚集更多好的內(nèi)容創(chuàng)造者。我們可以去上面鋪內(nèi)容并轉(zhuǎn)化用戶。

大家要放棄一定要用自己的網(wǎng)站去做流量的觀念,流量肯定是越來(lái)越集中到頭部去的,那種把自己的網(wǎng)站也要打造成流量中心的想法越來(lái)越不現(xiàn)實(shí)了,特別是啥優(yōu)勢(shì)也沒(méi)有的小站。所以可以安心地做一個(gè)別人平臺(tái)上的內(nèi)容貢獻(xiàn)者,在這些平臺(tái)上貢獻(xiàn)內(nèi)容,轉(zhuǎn)手再把這些頁(yè)面拿去任何其他平臺(tái)上去引流。我以前一直說(shuō)的方法就是要“讓內(nèi)容在渠道中間流動(dòng)”。

還是以“阿膠“為例,可以這樣操作:

從上面的詞庫(kù)可以看出:“阿膠糕適合什么人吃“有2萬(wàn)多一天的搜索量,去百度一下這個(gè)詞,我現(xiàn)在在杭州搜索,發(fā)現(xiàn)是一個(gè)廣告都沒(méi)有人投的。(不排除其他地方有或者當(dāng)你看的時(shí)候可能會(huì)有)

這個(gè)時(shí)候,應(yīng)該去知乎、百家號(hào)、搜狐自媒體、百度知道、百度小程序等等渠道里出現(xiàn)你的一篇軟文,里面在推薦你的產(chǎn)品。這樣做完后,你要和現(xiàn)在這些排在前面的網(wǎng)頁(yè)去競(jìng)爭(zhēng)排名,只要一些簡(jiǎn)單的SEO技巧比如“錨文本轟炸”或“外部鏈接”,甚至最原始的“關(guān)鍵詞密度”,你排上去的幾率非常大,然后這些流量就是你的了。當(dāng)然最后,這個(gè)詞如果被別人挖掘到,那也也會(huì)變成紅海,所以你的應(yīng)對(duì)方法就是去發(fā)現(xiàn)更多其他藍(lán)海詞語(yǔ),或者直接硬搶也是沒(méi)幾個(gè)人在競(jìng)爭(zhēng)的。還有,圖片中那幾個(gè)排名前三的百度問(wèn)答,你即使現(xiàn)在再去回答一下也會(huì)有很多流量的。

這么多年了,百度依然還有很多流量沒(méi)人要。這點(diǎn)百度其實(shí)是自己把自己作死的。你看,雖然百度讓很多人出高價(jià)買了詞,收入也很多,但是百度的很多流量沒(méi)有賣出去。相當(dāng)于流量還有很多庫(kù)存,流量沒(méi)有充分被商業(yè)化,而廣告主卻在高價(jià)流量中沒(méi)有獲得好的ROI,這是雙輸?shù)?。今日頭條在這一點(diǎn)上就做得好很多,本來(lái)信息流的流量比百度還集中,頭條的巨量引擎現(xiàn)在開(kāi)始開(kāi)發(fā)很多的功能讓大家的投放盡量錯(cuò)開(kāi)不要撞車。

如果你們是APP且內(nèi)容很多,一定要找個(gè)前端工程師把內(nèi)容網(wǎng)頁(yè)化并做基本的SEO,可以白撿很多流量。比如今日頭條的SEO在我看來(lái)還是做得不夠好,內(nèi)容也是重復(fù)的,但是應(yīng)該在百度獲得上百萬(wàn)日UV不是問(wèn)題。

還有很多的技巧實(shí)在無(wú)法短時(shí)間說(shuō)明白,影響SEO排名的因素有幾十個(gè)現(xiàn)在一個(gè)都沒(méi)怎么講,但這些也并不重要,剛才提到的3個(gè)都是隨便一查就能找到的技術(shù)。 這么多年,在流量領(lǐng)域有技術(shù)算法派也有策略派,最后都是策略派勝出。這點(diǎn)也可以給正在做抖音、微信、快手的人一些啟示。

這里再順便說(shuō)一下,“阿膠糕適合什么人吃“這個(gè)詞如果你有把握用3毛錢的PPC成本可以收回投資的話,直接買一輪流量先。

第四: 基于關(guān)鍵詞和基于關(guān)系鏈的流量方法

接下來(lái)我跟大家分享一種我多年來(lái)積累的流量體系,這是我最想分享的,它是很多方法的來(lái)源。

我個(gè)人的觀點(diǎn),流量一直只有兩種載體:關(guān)鍵詞 和關(guān)系鏈。很多渠道里的流量傳播都是這兩個(gè)基本載體中的一種,或者是變種、混合。

這是我們以前在阿里流量團(tuán)隊(duì)的方法論,它的推導(dǎo)是這樣的:

流量的背后,是我們大家對(duì)信息的需求,不管你是找一個(gè)笑話段子、還是看一篇教你做飯的文章、或者是純粹無(wú)聊打發(fā)時(shí)間隨便刷刷。

人類目前為止傳播信息的模式,要么通過(guò)文字、要么通過(guò)人和人的關(guān)系。

這個(gè)在原始社會(huì)甚至沒(méi)有文字的時(shí)候都是這樣的,比如一個(gè)部落發(fā)現(xiàn)了獵物要去捕獵,這個(gè)信息也是通過(guò)大家早就形成的語(yǔ)言以及人和人之間的關(guān)系網(wǎng)傳遞出去。

而假設(shè)我們回到20多年前沒(méi)有互聯(lián)網(wǎng)的時(shí)代呢?也是這樣的。

我是80后,經(jīng)歷過(guò)沒(méi)有互聯(lián)網(wǎng)的時(shí)代。我舉一個(gè)例子,那時(shí)候我有一個(gè)親戚在船廠工作,他聽(tīng)人說(shuō)有一種水下焊接的技術(shù),但不知道具體是怎么實(shí)現(xiàn)的。在今天面對(duì)這樣的情況你搜索一下就可以知道。

但是在沒(méi)有互聯(lián)網(wǎng)的時(shí)代,他也有兩種方法可以去解決這個(gè)問(wèn)題:一是去一家盡可能大的圖書館去查資料,以前的圖書館有個(gè)重要職能就是大家去查資料的地方;二是去問(wèn)他的師傅或其他朋友,通過(guò)他們的關(guān)系網(wǎng)去找信息。很有意思的是,Google這個(gè)搜索引擎就誕生在1996年兩位創(chuàng)始人在斯坦福大學(xué)給校方做電子圖書館的基礎(chǔ)上的。

圖文、視頻他們傳播的時(shí)候一定要用關(guān)鍵詞給他們做索引的,比如抖音的算法就是給每段視頻和每個(gè)人打標(biāo)簽,標(biāo)簽就是關(guān)鍵詞,然后把人的關(guān)鍵詞和視頻的關(guān)鍵詞做匹配,這是屬于變種。

我們先看關(guān)鍵詞為載體的流量渠道。

搜索引擎、淘寶和APP應(yīng)用商店是關(guān)鍵詞主導(dǎo)的流量渠道,這個(gè)自不必說(shuō)。即使微信這個(gè)以關(guān)系鏈為載體的流量渠道,它首屏的搜索流量也非常大,所謂的WSO(微信搜索優(yōu)化)也有了一些成功案例。而在微信小程序搜索里,如果你搜索“股票”,有幾千個(gè)小程序都寫著股票的標(biāo)題,但是你搜索“股價(jià)”,卻只有3個(gè)小程序?qū)懼蓛r(jià)的標(biāo)題,你只要是第4個(gè),也能每天來(lái)很多用戶。僅僅整個(gè)股票證券行業(yè),至少還有上萬(wàn)個(gè)這樣的詞沒(méi)有人去關(guān)注。

在美國(guó),有組織統(tǒng)計(jì)過(guò)所有搜索流量和所有社交流量,是非常巧合的1:1的比例,前面說(shuō)過(guò):“信息找人” 和 “人找信息” 這兩種大家獲取信息的模式?jīng)]有主次之分,這里就有第一個(gè)數(shù)據(jù)上的證明了。

對(duì)于我們獲取流量的人來(lái)說(shuō):人多的渠道要多圈人,詞多的渠道要多占詞。

我用一個(gè)例子開(kāi)啟大家的用關(guān)鍵詞做流量的視角。 有一家做家裝互聯(lián)網(wǎng)的公司是這樣獲客的:在搜索引擎上把這個(gè)行業(yè)最熱門的幾千個(gè)關(guān)鍵詞都搜集起來(lái),買了十多個(gè)QQ號(hào)碼,然后每個(gè)QQ號(hào)最多可以建500個(gè)群,他們建立的大量QQ群的群名稱都是那幾千個(gè)關(guān)鍵詞中的一個(gè),有軟件可以批量維護(hù)群的活躍度,所以當(dāng)QQ用戶在用這些關(guān)鍵詞去搜索QQ群的時(shí)候,他們的QQ群排在比較前面。這樣十多個(gè)QQ號(hào)碼每天能讓八千到一萬(wàn)左右的QQ號(hào)碼加入他們的群,然后再用微信私域的方法轉(zhuǎn)化用戶。

關(guān)鍵詞為載體的流量都可以總結(jié)為一個(gè)這樣的方法論: 在任何渠道里做流量,都可以觀察這個(gè)渠道里是不是有些流量是通過(guò)關(guān)鍵詞分發(fā)的。如果有,就去搶以關(guān)鍵詞作為載體的流量。

至于關(guān)鍵詞的來(lái)源,百度是一個(gè)普及程度很高的搜索引擎,只要那里熱搜的關(guān)鍵詞,在你要做流量的渠道里大概率也是熱搜的。你都要做到大批量占領(lǐng)你所在行業(yè)的關(guān)鍵詞,我們以前阿里的流量團(tuán)隊(duì)把這個(gè)方法叫“關(guān)鍵詞占領(lǐng)”。

比如:微信好物圈,這是一個(gè)流量通過(guò)關(guān)鍵詞分發(fā)的渠道;你占據(jù)了一批好的關(guān)鍵詞命名的圈子,你就天然獲得大量流量。

比如飛聊,也是一樣的通過(guò)關(guān)鍵詞分發(fā)的渠道,如果你認(rèn)為這個(gè)平臺(tái)會(huì)崛起,是一定要去里面建很多你包含這個(gè)行業(yè)的熱門關(guān)鍵詞為標(biāo)題的小組,以后小組火了流量就是你的。目前飛聊的DAU也有幾百萬(wàn)。

比如抖音這樣的算法分發(fā)的平臺(tái),如果你的視頻都打上很多行業(yè)熱門詞的標(biāo)簽,額外獲得很多流量不是問(wèn)題,更別說(shuō)抖音是可以搜索的。去搜索一些熱門關(guān)鍵詞,很多排在前面的視頻流量很大,但是他們可能不是靠?jī)?nèi)容精彩獲得的流量,只是靠標(biāo)簽命中熱門詞流量就可以。

你只需要篤定一點(diǎn):只要人類還在用文字傳播信息,“關(guān)鍵詞占領(lǐng)”的方法就會(huì)一直有效。

還有就算花錢購(gòu)買流量的渠道都是能讓關(guān)鍵詞發(fā)揮作用的,比如今日頭條的巨量引擎后臺(tái)是開(kāi)放了用關(guān)鍵詞定位人群的投放的。

關(guān)于這個(gè)信息流投放,很多時(shí)候我們投放信息流,時(shí)間點(diǎn)很接近、人群屬性可能都是25-45女性、高收入年齡什么的,大家的定向條件其實(shí)高度集中,所以廣告展現(xiàn)是要靠提價(jià)的。但假如大家是用關(guān)鍵詞定向,就不會(huì)撞車這么嚴(yán)重,也能觸達(dá)到很多平常大家觸達(dá)不了的用戶, 平臺(tái)流量得到充分利用,廣告主ROI更好看,是多方共贏的。

關(guān)于關(guān)系鏈的流量,我在線下聽(tīng)過(guò)大家分享過(guò)很多好方法,特別是內(nèi)容驅(qū)動(dòng)、私域社群的很多玩法等。有時(shí)候很有感慨的,今天大家做的很多內(nèi)容十多年前也有一批人和你們是同樣的心態(tài)和狀態(tài),只是平臺(tái)變了,但很多討論的內(nèi)容都是如出一轍。淘寶當(dāng)年用一種仰視平臺(tái)(163/網(wǎng)易/搜狐)的心態(tài)去拉流量,今天又有那么多商家用仰視淘寶的心態(tài)去獲取流量,想想很有意思。

和關(guān)鍵詞的玩法不一樣,關(guān)系鏈的玩法我覺(jué)得國(guó)內(nèi)是遠(yuǎn)遠(yuǎn)領(lǐng)先國(guó)外的。

不過(guò)國(guó)外有一批同行也是做社交關(guān)系鏈流量的,他們比我們更早把社交關(guān)系鏈的方法系統(tǒng)化一些,他們是怎么做的呢?

這里插述一下,像微信公眾號(hào)這樣的平臺(tái)我覺(jué)得其實(shí)是抄襲自Facebook。這個(gè)一個(gè)很另類的觀點(diǎn),我借這個(gè)機(jī)會(huì)說(shuō)一下。

大家看一張截圖,F(xiàn)acebook在2009年就推出了一個(gè)產(chǎn)品叫 Facebook Pages,如:https://www.facebook.com/pages/ (需要翻**墻)

商家、公司、公眾人物、社群可以給自己生成一個(gè)頁(yè)面,這個(gè)頁(yè)面大家可以關(guān)注,然后如果商家發(fā)布什么消息可以更新到你的信息流上。這和微信公眾平臺(tái)是完全一定的定位和功能,只是早了4年多。他們很多商家在Facebook做營(yíng)銷也是要拼命漲粉的,如Amazon的Facebook Pages有了快3千萬(wàn)粉絲。

而2013年,現(xiàn)在這樣定位的微信公眾平臺(tái)才正式進(jìn)入大家視野。所以如果我們借鑒吸收國(guó)外同行的方法也有一些有意思的角度。

基本上那時(shí)候的方法論是這樣的:如果傳播流量的載體是關(guān)系鏈,那就去優(yōu)化這4個(gè)點(diǎn): 即,傳播信息的人的數(shù)量、傳播信息的人的影響力、傳播信息的速度、傳播信息的美譽(yù)度。

國(guó)內(nèi)是把傳播信息的速度做到了的,相信不用我復(fù)述那些方法。然后做各種帳號(hào)矩陣的人也是把傳播信息的人的數(shù)量做得非常好了,比如至今微博上的很多明星的流量運(yùn)營(yíng)團(tuán)隊(duì)。

國(guó)內(nèi)嚴(yán)酷的競(jìng)爭(zhēng)環(huán)境造就了大家各種奇招百出。我分享幾個(gè)我們做社交關(guān)系鏈流量的玩法,看看我們是如何按國(guó)外的社交流量方法論做國(guó)內(nèi)的平臺(tái)的。

在“傳播信息的人的數(shù)量“上,我舉快手APP的例子。

快手APP上官方是分均分發(fā)流量的邏輯,也就是你打開(kāi)快手,會(huì)把你附近的一些人推薦在你的快手主頁(yè)。為了迎合這種分發(fā)邏輯,我們肯定是要做多帳號(hào)分發(fā)的。比如直播是這樣操作的:我們開(kāi)發(fā)了一個(gè)自己的群播系統(tǒng),長(zhǎng)下面這個(gè)樣子,

它的視頻信號(hào)是用一個(gè)攝像頭來(lái)拍的,視頻內(nèi)容輸入這個(gè)系統(tǒng)后,可以把這個(gè)視頻分發(fā)到無(wú)數(shù)個(gè)其他快手帳號(hào)上,每個(gè)帳號(hào)模擬不同的地理位置,這樣只要一個(gè)直播內(nèi)容就可以出現(xiàn)在全國(guó)各個(gè)不同的地方。

當(dāng)然它也可以把同一個(gè)視頻信號(hào)同時(shí)在快手、抖音、騰訊、斗魚(yú)等APP上跨平臺(tái)同時(shí)直播??焓质遣惶矚g相同的內(nèi)容的,所以這個(gè)攝像頭拍攝的畫面的背景是綠幕,這個(gè)系統(tǒng)可以實(shí)時(shí)渲染出不同的背景,這樣看起來(lái)就是不同的內(nèi)容了。(沒(méi)有破解app等非法操作。)

在社交關(guān)系鏈的傳播方法里,環(huán)境很惡劣,你是被逼著要這么做的,在場(chǎng)的大家應(yīng)該都知道,因?yàn)槠渌藭?huì)去布局更犀利的事情。有些我們都知道的大公司,私底下也很多類似的操作。在其他條件相同的情況下,如果傳播人數(shù)別人比你多個(gè)幾十上百倍,你也就沒(méi)法安心地靠?jī)?nèi)容驅(qū)動(dòng)了。

在增長(zhǎng)黑客的很多成功案例里,以及現(xiàn)在我們?cè)谑忻嫔峡吹降某晒Ξa(chǎn)品,有大量依靠人數(shù)取勝的例子。

那怎么做到“傳播信息的人的影響力“ 呢?我們打造了這么一個(gè)系統(tǒng),這個(gè)系統(tǒng)的原理和“企查查”的原理差不多,就是打造一個(gè)聚合爬蟲(chóng)(合法的爬蟲(chóng),從不同的數(shù)據(jù)源爬取數(shù)據(jù)聚合在一起),這樣做的結(jié)果就是:指定任何一個(gè)行業(yè),每天都能找到幾千個(gè)這個(gè)行業(yè)下的優(yōu)質(zhì)KOL,并有他們的個(gè)人微信二維碼等聯(lián)系方式。

如下圖就是金融領(lǐng)域每天抓取到的數(shù)據(jù):

會(huì)按各種指標(biāo)給每個(gè)KOL打分,分?jǐn)?shù)低于一定的值就先不考慮聯(lián)系。但還是每天都有這么多的KOL,這又怎么來(lái)大量聯(lián)系呢?我們也偷了個(gè)懶,是用企業(yè)微信批量聯(lián)系的。

由于企業(yè)微信一天加上萬(wàn)個(gè)人都不是問(wèn)題,所以我們就做了一套企業(yè)微信的群控系統(tǒng),可以批量把這些人加為好友,然后群發(fā)話術(shù)來(lái)溝通,粗篩一遍后再人工溝通。在別人都在批量“洗”終端用戶時(shí),我們?cè)谂俊跋础毙袠I(yè)內(nèi)的KOL。

以下是我們的微信群控軟件的演示版,企業(yè)微信類似:

大部分人都沒(méi)注意企業(yè)微信的功能,這個(gè)企業(yè)微信大家一定要重視的,非常好用。過(guò)一段時(shí)間我們會(huì)推出一個(gè)企業(yè)微信的工具出來(lái)。

很多人不知道企業(yè)微信官方就有群發(fā)接口,不要再用那些山寨的群發(fā)功能了,然后每天加人不會(huì)輕易被封,加人還沒(méi)有總數(shù)限制,而且你能相信騰訊官方在企業(yè)微信里竟然還開(kāi)發(fā)有“活碼”這種東西嗎?

從策略上來(lái)說(shuō),如果騰訊官方專門希望你用企業(yè)微信來(lái)做私域,你哪有還不趕快用的道理,只會(huì)越來(lái)越順應(yīng)大家的需求的。只是注意一點(diǎn),企業(yè)微信目前還沒(méi)有朋友圈,微信群功能也受限(有消息說(shuō)11月底都會(huì)放開(kāi)),所以一定是要探索一套新的不同于個(gè)人微信私域運(yùn)營(yíng)的流量玩法。

這種玩法還特別適合產(chǎn)品冷啟動(dòng),大家在冷啟動(dòng)的時(shí)候最缺的就是種子用戶,這類聚合爬蟲(chóng)的方法可以讓你迅速獲得你想要的用戶從而冷啟動(dòng)成功,我們自己就有過(guò)很多冷啟動(dòng)成功案例。

說(shuō)起這個(gè)群控系統(tǒng),我們做了兩套不同技術(shù)原理的系統(tǒng)。大家知道基于xposed的群控系統(tǒng)在今年618的時(shí)候已經(jīng)被微信嚴(yán)打,以前我們也認(rèn)為xposed這種群控方案侵入性太強(qiáng),我如果是微信官方也會(huì)非常不喜歡別人把我的APP改得亂七八糟。兩套系統(tǒng)用的是別的解決方案,只是用它替代人工,不要非法破解使用就行,目前這兩套方案都是比較安全的。

有些時(shí)候我們用這些系統(tǒng)能形成比較大的優(yōu)勢(shì),但是越是這樣我們反而越會(huì)想辦法做好內(nèi)容。畢竟我們是從大平臺(tái)出來(lái)的,我們并不想在任何平臺(tái)出于搞流量的需求而制造內(nèi)容垃圾的。

為了防止帶偏大家,我再多說(shuō)一句。對(duì)于很多這樣做流量的方法看起來(lái)很激進(jìn),但做起來(lái)是有底線的。應(yīng)該要像阿里巴巴內(nèi)部的那種做事風(fēng)格,那就是:初心要正,但是做事要狼性。

我們從事的互聯(lián)網(wǎng)行業(yè)是個(gè)信息產(chǎn)業(yè),所以要盡可能地“傳遞高質(zhì)量的信息”,把內(nèi)容做到盡可能地好。而在分發(fā)這些內(nèi)容的時(shí)候卻要無(wú)所不用其極地、想盡一切辦法去傳播這些內(nèi)容。

最后我們?cè)賮?lái)說(shuō)一下“傳播信息的美譽(yù)度”。我們國(guó)內(nèi)真的非常不重視這個(gè),而歐美的同行是很重視這個(gè)的,在這塊做得非常好。

舉個(gè)例子,我2011年曾經(jīng)去瑞士日內(nèi)瓦培訓(xùn)過(guò)一家公司,他們有個(gè)業(yè)務(wù)是專門幫瑞士本國(guó)的那些品表在新浪微博上做傳播。他們的工作之一竟然是把一個(gè)微博帳號(hào)歷來(lái)所有人的評(píng)論全部人肉分析一遍,用Excel全部統(tǒng)計(jì)好。分成正面評(píng)價(jià)和負(fù)面評(píng)價(jià),而正面負(fù)面的評(píng)價(jià)又會(huì)分為好幾個(gè)維度,具體到了是哪些角度是正面的,也有哪些維度是負(fù)面的。

而且讓我吃驚的是這一切那時(shí)候竟然是人肉操作的,而操作這個(gè)的人也只學(xué)過(guò)3年中文,為了理解文字內(nèi)容還要去翻詞典。

社交媒體是最應(yīng)該重視美譽(yù)度的。我們國(guó)內(nèi)現(xiàn)在有了傳播深度這個(gè)概念,美譽(yù)度就決定了每一層傳播的時(shí)候的你的勢(shì)能是加百分之幾十的還是減百分之幾十,按照數(shù)學(xué)公式計(jì)算,后面的結(jié)果天差地別。

今天的分享就到這里,希望對(duì)大家有啟發(fā)。最后我建議大家去看一部電影叫《社交網(wǎng)絡(luò)》,講的是Facebook的創(chuàng)立歷史。電影里前面十分鐘在宿舍那段其實(shí)講了馬克·扎克伯格做增長(zhǎng)黑客的方法,如果你能看懂的話非常有意思。

其實(shí)我所知道的增長(zhǎng)黑客文化正是來(lái)源于Facebook,F(xiàn)acebook的歷史上也有很多不能說(shuō)的隱秘的獲取流量的方法的。

文章來(lái)源:

用超多案例,總結(jié)了 10 個(gè)讓登錄體驗(yàn)更好的小技巧!

資深UI設(shè)計(jì)者

看似簡(jiǎn)單的登錄框,暗藏了多少值得推敲的用戶體驗(yàn)?這10個(gè)細(xì)節(jié),就是你和設(shè)計(jì)高手的區(qū)別。

技巧1:更明顯

你不應(yīng)該讓你的用戶到處尋找登錄區(qū)域。他們找的時(shí)間越長(zhǎng),就會(huì)越沮喪。他們?cè)骄趩剩罱K登錄的可能性就越小。

一個(gè)很好的例子就是 Gmail 的登錄頁(yè)面。

你可以確切地知道你需要在何處登錄,以及要在輸入?yún)^(qū)域輸入什么內(nèi)容,上面的例子,如果你沒(méi)有 Gmail 帳戶,它允許你通過(guò)單擊「創(chuàng)建帳戶」來(lái)輕松地創(chuàng)建一個(gè)帳戶。

好的用戶體驗(yàn)是使你的登錄區(qū)域明顯,使你的用戶盡可能容易地進(jìn)行登錄操作。

技巧2:使用第三方登錄

第三方登錄正迅速成為用戶登錄賬戶的方式,理由很充分。為不同的產(chǎn)品創(chuàng)建多個(gè)賬戶既耗時(shí)又令人困惑。很難記住一堆不同的密碼和用戶名。

通過(guò)允許用戶使用用戶的第三方賬戶中的信息來(lái)創(chuàng)建一個(gè)賬戶,可以解決所有關(guān)于這些問(wèn)題。

讓我們來(lái)看看下面的石墨文檔和MONO登錄時(shí)的選擇方式:

甚至還有更方便的注冊(cè)登錄方式,手機(jī)短信驗(yàn)證碼在注冊(cè)的同時(shí)登錄:

一些產(chǎn)品在用戶點(diǎn)擊第三方注冊(cè)登錄時(shí)還需要用手機(jī)號(hào)進(jìn)行短信登錄,從用戶的角度看,這很明顯是一個(gè)不好的體驗(yàn),但是產(chǎn)品的角度去思考就不一樣了,產(chǎn)品為了獲取用戶更多的信息,則需要這樣來(lái)設(shè)計(jì)流程。

這種設(shè)計(jì)流程該不該用,這需要在產(chǎn)品和用戶之間進(jìn)行權(quán)衡,第三方與手機(jī)短信驗(yàn)證碼登錄,在提高用戶體驗(yàn)的同時(shí),可以提高用戶的效率,使界面更加直觀。

技巧3:更簡(jiǎn)單

因?yàn)榄h(huán)境不同,在中國(guó)很多網(wǎng)頁(yè)端的網(wǎng)站,第三方登錄很的產(chǎn)品很少。

例如,如果你的 QQ 沒(méi)有在電腦端登錄,因?yàn)榧词惯x擇第三方 QQ 登錄,你也要拿出手機(jī)—打開(kāi) QQ —打開(kāi)掃一掃,進(jìn)行掃碼登錄等一些列的操作。

又或者,當(dāng)你想要登錄 behance,只要瀏覽器有記錄之前的第三登錄,點(diǎn)擊第三方登錄即可直接進(jìn)入該網(wǎng)站,甚至不用注冊(cè)。

可以看下面的騰訊網(wǎng)與 behance 的網(wǎng)頁(yè)登錄:

好的登錄體驗(yàn)應(yīng)該只有賬號(hào)、密碼兩個(gè)輸入字段,或者手機(jī)號(hào)碼、短信驗(yàn)證碼兩個(gè)字段,以及使用第三方登錄的選項(xiàng)。在簡(jiǎn)單、的同時(shí),并為用戶提供了很好的體驗(yàn)。

技巧4:區(qū)分注冊(cè)與登錄

如果一個(gè)用戶來(lái)到你的網(wǎng)站進(jìn)行注冊(cè),或者想他們返回登錄界面,這就需要讓用戶清楚的知道他在何處,下一步應(yīng)該去哪里。

我們通過(guò)使用登錄字段與注冊(cè)字段的區(qū)別來(lái)幫助他們,讓我們看看下面的 dribbble 注冊(cè)界面:

創(chuàng)建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁(yè)面上注冊(cè),而返回的用戶可以使用最上面右上角的登錄兩字??吹缴厦妗竤ign in 」字段了嗎?

dribbble 使用了不同的顏色、布局去區(qū)分注冊(cè)按鈕與登錄的入口,這樣更加清晰明了。

同時(shí)可以看看 dribbble 的主頁(yè)面,他們會(huì)把 sign in 與 sign up 的進(jìn)行區(qū)分,在 sign up 加上微邊框,讓用戶能更快區(qū)分兩者的不同。

技巧5:跳過(guò)用戶名

讓用戶用他們的用戶名來(lái)進(jìn)行登錄真的不是一和很明智的做法,為用戶省去記錄你產(chǎn)品的用戶名的麻煩,應(yīng)該讓他們使用他們的電子郵件地址或電話號(hào)碼注冊(cè)來(lái)進(jìn)行代替用戶名。

ins 讓用戶有機(jī)會(huì)用他們的電話號(hào)碼或電子郵件地址登錄。

反例:

盡可能讓用戶同時(shí)用手機(jī)號(hào)碼或郵件地址來(lái)登錄,因?yàn)橛脩艨赡軙?huì)忘記他們用來(lái)登錄你的產(chǎn)品的電子郵件地址,所以這時(shí),用戶能使用手機(jī)號(hào)碼進(jìn)行登錄。

技巧6:密碼可顯示

給用戶提供可顯示密碼的按鈕,減少用戶輸錯(cuò)密碼的操作,當(dāng)輸錯(cuò)的同時(shí),可進(jìn)行對(duì)錯(cuò)的字段進(jìn)行糾正,不用全部刪掉重新來(lái)。

讓我們來(lái)下面的脈脈和片刻:

技巧7:記住用戶信息

還有什么比再次到你之前登錄的網(wǎng)站或 app,卻發(fā)現(xiàn)你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?

當(dāng)你的用戶返回到你的網(wǎng)站時(shí),請(qǐng)確保他們已經(jīng)登錄了,或者為了方便登錄,提前為他們預(yù)先填充賬戶和密碼等字段。

谷歌在這方面做得很棒。每當(dāng)用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時(shí),他們的登錄信息都會(huì)被記住,使登錄過(guò)程更加簡(jiǎn)單。

盟友銀行允許用戶勾選 「保存用戶名」 復(fù)選框,允許網(wǎng)站在用戶到達(dá)網(wǎng)站時(shí)默認(rèn)記住用戶名。這是記住用戶信息的另一個(gè)好方法,展示形式可以多樣化,可根據(jù)自己產(chǎn)品與用戶需求來(lái)進(jìn)行把控。

技巧8:輕松恢復(fù)密碼

有時(shí)你的用戶會(huì)忘記他們的登錄信息。當(dāng)這種情況發(fā)生時(shí),盡量讓恢復(fù)過(guò)程盡可能的輕松。

公眾號(hào)的賬戶密碼輸入欄有記住密碼復(fù)選框,以防用戶忘記他們的用戶名和密碼,不用每次進(jìn)來(lái)都輸入賬戶密碼進(jìn)行登錄。

印象筆記對(duì)他們的密碼做了一些巧妙的處理,讓用戶知道他們多久以前更改了密碼。

這個(gè)小小的提示可以喚起用戶的記憶,幫助他們記起密碼。

如果用戶忘記了他們的登錄信息,要讓他們清楚應(yīng)該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪,你的用戶將因此會(huì)喜歡上你的產(chǎn)品。

技巧9:讓用戶知道大寫鎖定已開(kāi)啟

我們都有過(guò)這樣的經(jīng)歷:令人沮喪地輸入和重新輸入你的密碼都無(wú)濟(jì)于事,結(jié)果卻發(fā)現(xiàn)你一直開(kāi)著大寫鎖定鍵。

可以通過(guò)警告你的用戶,防止這種情況發(fā)生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時(shí)打開(kāi)大寫鎖定時(shí)打開(kāi)通知。

技巧10:無(wú)密碼登錄

讓你的移動(dòng)用戶使用無(wú)密碼登錄,現(xiàn)在很多特別是金融類 app,都可以讓用戶進(jìn)行指紋登錄,因?yàn)椴幌衿渌?app 一樣可以一直保持用戶已登錄狀態(tài),在保障安全的同時(shí)能更便捷。

以上的設(shè)計(jì)技巧與案例希望能幫助各位讀者提高產(chǎn)品的用戶體驗(yàn)。

歡迎關(guān)注作者的微信公眾號(hào):「設(shè)計(jì)探」

雙11大屏——情緒的超級(jí)機(jī)器

資深UI設(shè)計(jì)者

雙11所帶來(lái)的巨大能量與共振,需要一塊巨大的屏幕來(lái)承載這份共情——這并不是一條統(tǒng)計(jì)數(shù)據(jù),抑或一張圖表就可以完成的。

數(shù)據(jù)大屏的設(shè)計(jì)有什么不同?

數(shù)據(jù)大屏的設(shè)計(jì),并非是傳統(tǒng)意義上的設(shè)計(jì)師或產(chǎn)品經(jīng)理就能完成的。它需要將藝術(shù)家、科學(xué)家與企業(yè)家的能力集于一身,需要擁有對(duì)動(dòng)態(tài)數(shù)據(jù)的把握能力、對(duì)產(chǎn)業(yè)經(jīng)濟(jì)與供應(yīng)鏈的結(jié)構(gòu)方法、對(duì)社會(huì)議題的捕捉與構(gòu)造,以及宏觀的視野和細(xì)致入微的匠人用心??梢暬尡涞臄?shù)據(jù)產(chǎn)生溫度。


1.雙11為什么需要數(shù)據(jù)大屏?


數(shù)據(jù)大屏是一個(gè)凝聚情緒的超級(jí)機(jī)器。

數(shù)據(jù)大屏不講述傳奇,它就是傳奇本身。



在這塊巨幕上,數(shù)據(jù)是公開(kāi)透明的,它的變化在實(shí)時(shí)的體現(xiàn)著每一筆消費(fèi)的數(shù)字。每個(gè)人都能看到,也會(huì)被傳遞到全世界每個(gè)角落。雙11所帶來(lái)的巨大能量與共振,我們需要一塊巨大的屏幕來(lái)承載這份共情——這并不是一則新聞播報(bào)、一條統(tǒng)計(jì)數(shù)據(jù),抑或一張圖表就可以完成的。在這樣一個(gè)狂歡的日子里,手機(jī)、個(gè)人電腦、電視機(jī)這些面向個(gè)人的設(shè)備,全都需要融入到這個(gè)巨型的超級(jí)情緒機(jī)器之中。


2.導(dǎo)演、故事與設(shè)計(jì)


從宣傳與商業(yè)作戰(zhàn)的角度講,數(shù)據(jù)大屏需要兼顧故事性和震撼性兩重特點(diǎn)。通過(guò)故事腳本與內(nèi)容框架的設(shè)計(jì),讓觀眾層層抽絲撥繭,從表層的情緒,看到內(nèi)核的戰(zhàn)略。


1. 內(nèi)容規(guī)劃:故事與腳本設(shè)計(jì)

2019數(shù)據(jù)大屏的內(nèi)容框架大致分為三個(gè)層次。


情緒層:GMV的節(jié)節(jié)攀升滿足了媒體不斷推升的情緒高潮。在日益蕭條的國(guó)際環(huán)境中,中國(guó)的經(jīng)濟(jì)仍能屢創(chuàng)新高,每一位在雙11買買買的中國(guó)人背后是一種愛(ài)國(guó)主義與中國(guó)信心的體現(xiàn)。


業(yè)務(wù)層:阿里的自我表達(dá)。阿里經(jīng)濟(jì)體在城市中繼續(xù)深化的服務(wù)我們的消費(fèi)者,數(shù)據(jù)成為城市可持續(xù)發(fā)展的新資源;而商業(yè)操作系統(tǒng)隨著數(shù)字經(jīng)濟(jì)時(shí)代的到來(lái),開(kāi)始系統(tǒng)的服務(wù)我們的品牌與商家,在新的時(shí)代續(xù)寫“讓天下沒(méi)有難做的生意”。


戰(zhàn)略層:企業(yè)與國(guó)家發(fā)展同行。阿里的改變,反射了社會(huì)關(guān)系和社會(huì)結(jié)構(gòu)。點(diǎn)擊購(gòu)物車就能買到全世界的東西,而對(duì)于國(guó)內(nèi)市場(chǎng),精準(zhǔn)的人群定位、產(chǎn)業(yè)帶的建設(shè)都讓拉動(dòng)內(nèi)需變成一個(gè)大眾都能參與的事情。


2. 情緒規(guī)劃:情緒鏈路與鏡頭設(shè)計(jì)

依據(jù)數(shù)據(jù)表現(xiàn),雙11當(dāng)天的情緒高潮會(huì)集中0點(diǎn)和24點(diǎn)前后。24小時(shí)內(nèi),情緒的跌宕起伏,媒體向世界專遞著這種情緒?,F(xiàn)場(chǎng),根據(jù)數(shù)據(jù)和情緒的變化,我們開(kāi)始導(dǎo)演數(shù)據(jù)大屏在不同的時(shí)間段出現(xiàn)的鏡頭:GMV的彎道超車緊張窒息,晚飯過(guò)后是觀看城市夜經(jīng)濟(jì)的最佳時(shí)機(jī),還有“買遍全球的購(gòu)物車”、“小鎮(zhèn)青年”等進(jìn)20個(gè)鏡頭。


3. 核心理念:新商業(yè)文明是中國(guó)的彎道超車

為什么是彎道超車?

大航海時(shí)代是貿(mào)易全球化的開(kāi)端,也是當(dāng)代中國(guó)繼續(xù)擴(kuò)大開(kāi)放,用一帶一路、進(jìn)博會(huì)等等新模式,承接人類當(dāng)今世界發(fā)展的新格局所在?;ヂ?lián)網(wǎng)與移動(dòng)互聯(lián)時(shí)代的到來(lái),讓中國(guó)得以彎道超車占據(jù)世界領(lǐng)先地位,而隨之到來(lái)的數(shù)字經(jīng)濟(jì)時(shí)代正式開(kāi)始了人類歷史上的新商業(yè)文明。馬老師說(shuō):打造新商業(yè)文明的時(shí)機(jī)已經(jīng)到來(lái)。數(shù)字時(shí)代是我們面臨的最大機(jī)遇,這個(gè)新時(shí)代最大的風(fēng)險(xiǎn)就是錯(cuò)失機(jī)會(huì)。



我們將這個(gè)核心理念融入GMV大屏的設(shè)計(jì),正如逍遙子所說(shuō)的那樣“消費(fèi)不是商業(yè)的終點(diǎn),通過(guò)消費(fèi)者來(lái)提升生產(chǎn)端生產(chǎn)契機(jī),優(yōu)化生產(chǎn)決策?!睘榇?,我們導(dǎo)演了新商業(yè)文明的數(shù)據(jù)大戲:GMV屏中的賽道,3個(gè)鏡頭穿越了大航海時(shí)代、互聯(lián)網(wǎng)時(shí)代,數(shù)字經(jīng)濟(jì)時(shí)代彎道超車的新商業(yè)文明,快進(jìn)了商業(yè)文明的發(fā)展。

11.11當(dāng)天的數(shù)據(jù)也被融入其中,賽道上奔跑著餓了么、盒馬配送線和菜鳥(niǎo)的物流線,空中飄散的氣泡是實(shí)時(shí)產(chǎn)生的交易熱力。


△2019雙11數(shù)據(jù)大屏-GMV彎道超車&3個(gè)視角切換


3.雙11數(shù)據(jù)大屏設(shè)計(jì)概覽


1. GMV:11剁手鑄就中國(guó)信心

2019年,即使是在國(guó)際經(jīng)濟(jì)大環(huán)境衰退的今天,阿里的雙11仍舊創(chuàng)造了新的商業(yè)奇跡:2684億人民幣的GMV的背后,是中國(guó)人為了家庭與自己而歡樂(lè)剁手,也是中國(guó)消費(fèi)者面對(duì)全球大環(huán)境下對(duì)中國(guó)的強(qiáng)大信心。從2009年的電商大促,到11年后的全球狂歡節(jié),阿里伴隨著中國(guó)經(jīng)濟(jì)海洋的形成而不斷掀起巨浪。李克強(qiáng)總理就曾經(jīng)用雙11的銷售數(shù)據(jù),來(lái)解答那些對(duì)中國(guó)經(jīng)濟(jì)感到不解的人們,讓他們瞬間懂得中國(guó)經(jīng)濟(jì)是汪洋大海。


△2019雙11數(shù)據(jù)大屏-歷年GMV增速


2. 全球化:買遍全球的購(gòu)物車

中國(guó)經(jīng)濟(jì)與中國(guó)消費(fèi)者的貢獻(xiàn),是對(duì)全球經(jīng)濟(jì)的貢獻(xiàn)。消費(fèi)者購(gòu)物車?yán)锊刂篮蒙畹脑妇?,打開(kāi)了世界消費(fèi)的新空間。天貓國(guó)際把來(lái)自全球78個(gè)國(guó)家和地區(qū)的品牌和商品帶進(jìn)中國(guó),滿足消費(fèi)者的品質(zhì)消費(fèi)需求。買遍全球的購(gòu)物車,更為世界經(jīng)濟(jì)增長(zhǎng)貢獻(xiàn)拉動(dòng)力。越來(lái)越多國(guó)際品牌青睞中國(guó)市場(chǎng),通過(guò)天貓國(guó)際滿足中國(guó)消費(fèi)者的需求。


△2019雙11數(shù)據(jù)大屏-全球化


3. 服務(wù)夜生活點(diǎn)亮城市夜經(jīng)濟(jì)地圖

隨著政策的推動(dòng),全國(guó)經(jīng)濟(jì)進(jìn)入夜生活消費(fèi)時(shí)代,大量的城市開(kāi)始準(zhǔn)備成為一座座不夜城。在這個(gè)新的消費(fèi)增長(zhǎng)領(lǐng)域,新商品、新商機(jī)、新消費(fèi)模式、新空間與新玩法都層出不窮。在未來(lái),理解夜晚的中國(guó),或許比理解白天的中國(guó)更為重要。


△2019雙11數(shù)據(jù)大屏-杭州經(jīng)濟(jì)體服務(wù)網(wǎng)絡(luò)


△2019雙11數(shù)據(jù)大屏-天貓商超網(wǎng)絡(luò)


△2019雙11數(shù)據(jù)大屏-杭州城市夜生活


4. 相信不起眼的改變:小鎮(zhèn)青年與那些你不知道的族群

14億的中國(guó)人口、巨大的地域差異與文化差異意味著,每一種類型的消費(fèi)人群都是海量的,都擁有現(xiàn)有經(jīng)濟(jì)理論所無(wú)法囊括的巨大潛力。小鎮(zhèn)青年、銀發(fā)一族、95后作為新消費(fèi)崛起的代表族群,正悄悄改變著社會(huì)的消費(fèi)結(jié)構(gòu)。通過(guò)數(shù)據(jù)我們清晰看到:族群的喜好千差萬(wàn)別,數(shù)字化的新消費(fèi)使得商家能針對(duì)消費(fèi)者需求創(chuàng)造新供給。


△2019雙11數(shù)據(jù)大屏-新人群,新消費(fèi)


5. 品牌榜:千里江山圖

天貓創(chuàng)造的價(jià)值是真正支持品牌的數(shù)字化轉(zhuǎn)型,不僅僅贏得今天的業(yè)務(wù),更在于決勝未來(lái)。國(guó)潮席卷而來(lái),智能商業(yè)魅力無(wú)限,全球供應(yīng)鏈在動(dòng)蕩與智能化中全面轉(zhuǎn)身。全方位重構(gòu)產(chǎn)品創(chuàng)新、品牌建設(shè),強(qiáng)化天貓與品牌之間的合作,這便是我們想在雙11這天展現(xiàn)的萬(wàn)里品牌江山畫卷。


△2019雙11數(shù)據(jù)大屏-品牌榜


4.結(jié)束語(yǔ)


當(dāng)GMV越來(lái)越逼近2684億人民幣時(shí),炸裂感給每個(gè)人的沖擊是:中國(guó)又誕生了一個(gè)新的奇跡!即使在全球經(jīng)濟(jì)放緩的今天,中國(guó)人民對(duì)于天貓雙11全球狂歡節(jié)的熱情絲毫不減。在這背后,是數(shù)字經(jīng)濟(jì)時(shí)代下的阿里巴巴,向新商業(yè)文明邁進(jìn)了一大步。

文章來(lái)源:站酷

「手勢(shì)交互」的知識(shí)點(diǎn)

資深UI設(shè)計(jì)者

業(yè)內(nèi)有很多人覺(jué)得手勢(shì)交互沒(méi)必要拿出來(lái)深究,覺(jué)得用戶使用產(chǎn)品的過(guò)程中,自然而然就會(huì)去使用拇指,進(jìn)行手勢(shì)操作。但這種說(shuō)法,就跟「用戶心理模型」類似。當(dāng)然,對(duì)于用戶來(lái)說(shuō)沒(méi)必要深究手勢(shì)交互,但作為設(shè)計(jì)師,如果不了解其背后的邏輯,那么就無(wú)法解決產(chǎn)品設(shè)計(jì)背后的一些問(wèn)題。

所以我們今天,好好聊一聊手勢(shì)交互這件事。你會(huì)發(fā)現(xiàn),原來(lái)你以往觀察或以為的設(shè)計(jì)問(wèn)題,都是手勢(shì)交互在作祟。

手勢(shì)的意義

我們以前經(jīng)常聽(tīng)到「以用戶為中心做產(chǎn)品設(shè)計(jì)」這句話,意思是產(chǎn)品需依附于目標(biāo)用戶的真實(shí)場(chǎng)景來(lái)設(shè)計(jì)。與此同時(shí),其實(shí)還有一句話在提醒著交互設(shè)計(jì)師如何做產(chǎn)品設(shè)計(jì),就是「以觸摸屏為中心做產(chǎn)品設(shè)計(jì)」。

為什么呢?因?yàn)橛脩魪氖贾两K都是在跟觸摸屏做接觸,不管換了什么設(shè)備,他們都是要通過(guò)屏幕與產(chǎn)品進(jìn)行交互的。

我們可以在這里思考一下手勢(shì)的意義。

手勢(shì)的出現(xiàn)改變了什么?可以回想一下 iPhone 4 發(fā)布的時(shí)候,當(dāng)看到這樣一臺(tái)屏幕上沒(méi)有任何按鍵的設(shè)備,是不是會(huì)覺(jué)得不可思議?鍵盤,電話接聽(tīng)按鍵等都消失不見(jiàn)了。

人們?cè)谑褂?iPhone 這樣的產(chǎn)品時(shí),不再需要去強(qiáng)行記憶任何固體按鍵。觸摸屏與手勢(shì)的結(jié)合,幫助我們隱藏不必要的元素,幫助用戶聚焦于內(nèi)容,在有限的物理空間獲得更多的信息。

所以用戶通過(guò)觸摸屏與產(chǎn)品進(jìn)行交互,跟通過(guò)鍵盤按鍵與屏幕進(jìn)行交互是完全不同的。手勢(shì)交互更自然且更。

手勢(shì)操作對(duì)我們來(lái)說(shuō)如此自然和直觀的主要原因是因?yàn)樗鼈冾愃朴谂c真實(shí)對(duì)象進(jìn)行直接交互。譬如你用遙控器控制電視上的按鍵,需要通過(guò)上下左右這樣的操作來(lái)定位指示器,而觸摸屏直接就可以通過(guò)手指點(diǎn)擊內(nèi)容進(jìn)行操作。這是完全不同的概念。

綜上所述,我們能知道,手勢(shì)的三個(gè)要素:簡(jiǎn)潔、易用、直觀。

所以我們通過(guò)一些常見(jiàn)的手勢(shì)行為,就可以在產(chǎn)品界面上很輕松的完成任務(wù)。

常見(jiàn)的手勢(shì)行為:

  • 點(diǎn)擊:?jiǎn)沃付虝河|摸表面;
  • 雙擊:?jiǎn)沃缚焖賰纱斡|摸表面(通常是縮放);
  • 拖動(dòng):沿表面移動(dòng)而不會(huì)破壞接觸;
  • 捏/展開(kāi):用兩根手指觸摸表面以移入(捏合)或移出(展開(kāi));
  • 按下:?jiǎn)沃赣|摸表面并按?。?
  • 滑動(dòng):快速手勢(shì),不需要觸摸目標(biāo)。

當(dāng)然,我們經(jīng)常也會(huì)遇到一些背離手勢(shì)交互的產(chǎn)品設(shè)計(jì),雖然也是點(diǎn)擊、拖動(dòng)等等,但操作起來(lái)總是不那么順心。這里面有一個(gè)關(guān)鍵點(diǎn)就是,手勢(shì)直觀性。

有數(shù)據(jù)表明,蘋果的 3D Touch 使用率非常低,就是因?yàn)橹庇^性太差,用戶不知道通過(guò)這個(gè)操作能帶來(lái)什么結(jié)果,且使用它需要長(zhǎng)按,經(jīng)常會(huì)同時(shí)呼出「卸載」,那么效率也就會(huì)降低。久而久之,用戶就不去使用了。

正面例子如下圖,滑動(dòng)與文案結(jié)合。

這樣一看,用戶馬上就能知道這個(gè)操作行為如何觸發(fā),緊接著就產(chǎn)生行動(dòng),然后會(huì)反饋結(jié)果。

這也是手勢(shì)交互的核心:觸發(fā),行動(dòng),反饋。

對(duì)比 3D Touch,觸發(fā)沒(méi)有提示,行動(dòng)后時(shí)常有兩種反饋結(jié)果,相比起來(lái)就不那么友好了。

除了上面聊的這些,手勢(shì)交互還能從另一方面來(lái)提升效率,就是拇指操作區(qū)域。

拇指驅(qū)動(dòng)設(shè)計(jì)

我們都知道,現(xiàn)在手機(jī)屏幕越來(lái)越大,甚至比最早屏幕大了一倍以上。但是很多設(shè)計(jì)師并沒(méi)有轉(zhuǎn)換思維,跟進(jìn)這個(gè)趨勢(shì)的變化。

這里給大家普及一個(gè)知識(shí):大部分人誤以為,手指在屏幕上的熱區(qū)是永恒不變的,但其實(shí)手指熱區(qū)會(huì)根據(jù)設(shè)備的變大而縮小。因?yàn)槭终浦卧O(shè)備的重心靠后走了,所以拇指操控屏幕的范圍也就變小了。如下圖。

結(jié)果是,手機(jī)屏幕變大,雙手持機(jī)的用戶變多,但依然還有 75% 的用戶是使用拇指來(lái)觸摸屏幕的。因此,術(shù)語(yǔ)「拇指驅(qū)動(dòng)設(shè)計(jì)」應(yīng)運(yùn)而生。

我們上面說(shuō)到,在使用一些產(chǎn)品的時(shí)候,經(jīng)常會(huì)遇到使用起來(lái)不順心的情況,然后說(shuō)了「手勢(shì)直觀性」的概念。但這里,還有個(gè)更重要的原因,就是「拇指操作區(qū)域」。

拇指操作區(qū)域被分為三塊內(nèi)容,分別是:易于觸達(dá),難以觸達(dá),以及介于兩者之間的區(qū)域。

看下圖。

所以在設(shè)計(jì)界面時(shí),要注意界面的主要操作元素是否處于用戶易于觸達(dá)的范圍之內(nèi)。

如果你仔細(xì)觀察并思考過(guò),也會(huì)發(fā)現(xiàn),iOS 的產(chǎn)品界面中,「返回」按鈕就位于「難以觸達(dá)」的區(qū)域。原因是產(chǎn)品人員本身也不想用戶返回或退出,而是讓用戶聚焦于當(dāng)前頁(yè)面,想要返回,那就需要付出一點(diǎn)成本,什么成本?操作成本。

有人會(huì)說(shuō),由于 iOS 可以從手機(jī)的左邊緣向右側(cè)輕掃以獲得返回效果,因此在大多數(shù) iOS 產(chǎn)品中,返回都不需要太大的操作成本。但是,并不是所有 iPhone 用戶都知道這一點(diǎn),也不是所有產(chǎn)品都支持這一特性的。而且手勢(shì)交互的進(jìn)化本來(lái)也就是為了提升用戶操作的效率,所以本質(zhì)上他們并不矛盾,只是相比以前,我們現(xiàn)在的操作更快了。并且「右滑」返回,本身在手勢(shì)操作中相比「點(diǎn)擊」也是更具操作成本的。

當(dāng)了解了手勢(shì)的一些意義,以及拇指操作區(qū)域?qū)τ诋a(chǎn)品設(shè)計(jì)的重要性之后,我們就可以通過(guò)一些案例來(lái)做一個(gè)全局分析了。

1. 內(nèi)容在上,操作在下

許多人設(shè)計(jì) App,但是沒(méi)人研究過(guò) App 為什么要這么設(shè)計(jì)。

比如,為什么起初要把標(biāo)簽欄放底下呢?關(guān)于這個(gè)問(wèn)題,當(dāng)初我也是問(wèn)了許多人,而基本都只是說(shuō)這是官方設(shè)計(jì)規(guī)范。這相當(dāng)于是一句廢話。

通過(guò)翻閱多方資料,我發(fā)現(xiàn)在工業(yè)設(shè)計(jì)領(lǐng)域有一條重要的基本設(shè)計(jì)原則:內(nèi)容在上,操作在下。

比如在使用電腦的時(shí)候,操作在下意味著使用者在操作過(guò)程中,手指始終處于界面下方,而內(nèi)容在上面,就不會(huì)出現(xiàn)手指遮擋內(nèi)容的情況。

如下圖的鍵盤操作提示:

基于此,相信你也知道為什么標(biāo)簽欄在下方了吧?

另外,為什么 iOS 設(shè)計(jì)規(guī)范建議將「編輯」按鈕放置在界面右/左上方的位置呢?

界面右/左上角的位置對(duì)拇指來(lái)說(shuō)顯然是不友好的。然而,這樣做的原因也是顯而易見(jiàn)的:編輯功能會(huì)讓數(shù)據(jù)發(fā)生變化。將這類控件放在難以操作的位置上(與左上角的返回是一個(gè)道理),就是一種防御性的設(shè)計(jì)策略,可以在一定程度上避免因?yàn)樘菀桩a(chǎn)生誤操作而導(dǎo)致的破壞性的結(jié)果。

通過(guò)這一小段之前聊過(guò)的內(nèi)容,你們會(huì)發(fā)現(xiàn),手勢(shì)與拇指操作其實(shí)在驅(qū)動(dòng)著產(chǎn)品設(shè)計(jì)。下面我們來(lái)聊個(gè)大的案例。

漢堡包菜單的消失解析

漢堡包菜單,也就是側(cè)邊欄導(dǎo)航,F(xiàn)acebook 早期測(cè)試顯示側(cè)邊欄導(dǎo)航讓用戶使用率降低了一半。

我們一起來(lái)看看市面上給出的三類說(shuō)法。

1. 可見(jiàn)性太低

默認(rèn)狀態(tài)下,用戶是看不見(jiàn)側(cè)邊欄的,除非點(diǎn)擊了側(cè)邊欄的彈出按鈕。所以這種情況下,里面的功能都是用戶腦袋里已知的,但很可能都想不起來(lái)。比如,現(xiàn)在你回想一下知乎底部 5 個(gè)標(biāo)簽分別是什么?或者微信右上角「+」里面有哪些功能?是不是要想一會(huì)兒,才能記起來(lái)?甚至還是想不起來(lái)。

之前我在文章里寫過(guò),用戶對(duì)于功能的使用一定是「所見(jiàn)即所得」,而不是「心向往之」。用戶只會(huì)注意自己看到的信息,而不是憑借記憶或想象來(lái)使用產(chǎn)品。

底部標(biāo)簽欄就很好的解決了漢堡包菜單的「可見(jiàn)性」問(wèn)題。

2. 效率較低

效率較低主要在于操作頻率,大家看下面兩組圖的對(duì)比。

第一張圖,當(dāng)用戶從首頁(yè)進(jìn)入到個(gè)人信息頁(yè)面,只需要兩步;而第二張圖,則要三步。

這里多一步看起來(lái)似乎影響不大,但如果現(xiàn)在要從個(gè)人信息頁(yè)面到「標(biāo)簽 3」的話,第一張圖也只需要兩步,第二張圖還是需要三步,當(dāng)頻繁去使用這樣的產(chǎn)品后,用戶的整體效率就會(huì)下降,體驗(yàn)也會(huì)隨之降低。

3. 與平臺(tái)模式?jīng)_突

大家應(yīng)該知道,在 iOS 的操作頁(yè)面中,通過(guò)手勢(shì)可對(duì) tab 進(jìn)行左右切換,而側(cè)邊欄除了通過(guò)點(diǎn)擊菜單按鈕展開(kāi)之外,也可以通過(guò)右滑彈出。這里面有什么沖突呢?看下圖。

當(dāng)頁(yè)面聚焦在「標(biāo)簽 2」時(shí),右滑除了能回到「標(biāo)簽 1」,同樣也很可能會(huì)切出側(cè)邊導(dǎo)航欄。

這樣的手勢(shì)沖突,導(dǎo)致頁(yè)面層級(jí)與功能導(dǎo)航的優(yōu)先級(jí)混亂了。

無(wú)論是導(dǎo)航還是控件,當(dāng)它們組成一個(gè)頁(yè)面后,它們的操作就會(huì)有優(yōu)先級(jí)。比如下面這個(gè)例子。

如果你對(duì)標(biāo)紅的分段控件比較熟悉,就知道,它是可通過(guò)屏幕滑動(dòng)進(jìn)行切換的。但是在「短信」里,它是不能通過(guò)滑動(dòng)屏幕進(jìn)行切換的,因?yàn)橛脩艨蓪?duì)單條信息進(jìn)行左滑做刪除或其他操作。所以當(dāng)頁(yè)面操作模式存在矛盾時(shí),我們會(huì)將子層級(jí)操作優(yōu)先于父層級(jí)操作。

譬如你進(jìn)入朋友圈,是不能馬上回到首頁(yè)的,這時(shí)候頁(yè)面層級(jí)較深,產(chǎn)品人員要將用戶聚焦于頁(yè)面本身,如果直接能返回到首頁(yè),頁(yè)面層級(jí)和產(chǎn)品架構(gòu)就會(huì)混亂。

類似的例子還有很多,我這里就不繼續(xù)列舉了。

所以從「短信」的例子可以看出,當(dāng)控件與控件之間的手勢(shì)發(fā)生沖突時(shí),我們要考慮優(yōu)先級(jí),將內(nèi)容優(yōu)先于頁(yè)面來(lái)處理。那么回到上面的例子,分段控件與漢堡包菜單的手勢(shì)發(fā)生沖突時(shí),很明顯我們要優(yōu)先分段控件的操作,而禁止掉漢堡包菜單的右滑手勢(shì)。結(jié)果就是,效率又低了。

4. 小結(jié)

這三類,如果你認(rèn)真思考里面的關(guān)系,其實(shí)就會(huì)發(fā)現(xiàn),它們的共通點(diǎn)就是與拇指的聯(lián)系過(guò)于被動(dòng)或直接被切斷了。

  • 第一個(gè)「可見(jiàn)性太低」的例子,菜單被隱藏,拇指不能直接與菜單產(chǎn)生關(guān)系,并且距離過(guò)遠(yuǎn),拇指難以觸達(dá)。
  • 第二個(gè)「效率太低」的例子,用戶需要通過(guò)拇指來(lái)回操作,導(dǎo)致效率降低,這就跟使用遙控器控制電視機(jī)一樣,用戶無(wú)法直接觸達(dá)內(nèi)容。
  • 第三個(gè)「手勢(shì)沖突」的例子,其實(shí)就很清晰了,就是說(shuō)標(biāo)簽欄的優(yōu)先級(jí)可能會(huì)被頁(yè)面的其它控件所取代,那么拇指就無(wú)法直接對(duì)其產(chǎn)生作用,從而禁止當(dāng)前頁(yè)面的手勢(shì)交互行為。

它們的核心點(diǎn)就是拇指與觸摸屏的關(guān)系。

如果你現(xiàn)在還不能深刻理解漢堡包菜單的劣勢(shì),那就想一下去看一下現(xiàn)在的產(chǎn)品,其中「我的」、「?jìng)€(gè)人中心」或「更多」其實(shí)都是變相的漢堡包菜單。

在「我」這個(gè)標(biāo)簽頁(yè)里,這一系列功能列表,無(wú)非就是另一種模式的漢堡包菜單,只是這里呈現(xiàn)的都是不重要的功能,并不影響用戶使用這個(gè)產(chǎn)品?;叵胍幌?,你是不是很少,甚至從來(lái)沒(méi)用過(guò)這里的某幾個(gè)功能?再跟手勢(shì)結(jié)合,就會(huì)發(fā)現(xiàn),「我」所處區(qū)域并不是容易點(diǎn)擊的區(qū)域,這就是它效率低下的原因了?,F(xiàn)在能懂了么?

彈框的操作路徑

當(dāng)傳統(tǒng)的確認(rèn)彈窗逐漸被手勢(shì)操作取代,大家就應(yīng)該察覺(jué)到:以往從電腦遷移到移動(dòng)設(shè)備上的交互行為已逐漸被改善。

我曾經(jīng)寫過(guò)一篇文章,叫「取消按鈕的設(shè)計(jì)邏輯」,講了「左取消,右行進(jìn)」這個(gè)原理。意思就是當(dāng)我們?cè)谠O(shè)計(jì)彈框的時(shí)候,用戶已經(jīng)習(xí)慣這樣的操作路徑,所以不要輕易更換位置以混淆用戶的認(rèn)知。再?gòu)氖謩?shì)的角度來(lái)說(shuō),就是右邊更容易點(diǎn)擊。

后來(lái)有同學(xué)說(shuō)到,但是有些特殊場(chǎng)景,譬如刪除資料,而產(chǎn)品人員不希望用戶刪除,于是把刪除放在左邊,取消放在右邊。畢竟右邊更容易點(diǎn)擊,所以位置換了會(huì)比較合理。

這是錯(cuò)的!

我們不能通過(guò)改變用戶使用產(chǎn)品的常識(shí)來(lái)將產(chǎn)品人員的想法置于用戶之上。當(dāng)用戶已經(jīng)形成「左取消,右行進(jìn)」的認(rèn)知之后,違反這樣的一致性,去換位置是很危險(xiǎn)的。所以出現(xiàn)了 action sheet,來(lái)解決一些產(chǎn)品關(guān)于 alert 無(wú)法解決的問(wèn)題。

如圖。

大家要記住的是,當(dāng)頁(yè)面邏輯與手勢(shì)操作產(chǎn)生邏輯沖突時(shí),我們不是去否定以前已經(jīng)被驗(yàn)證且正確的內(nèi)容,而是通過(guò)創(chuàng)新,來(lái)解決這個(gè)沖突。這就是拇指驅(qū)動(dòng)設(shè)計(jì)的一種方式。

包括我們以前在移動(dòng)設(shè)備上選擇刪除某項(xiàng)數(shù)據(jù),都會(huì)彈出警告框,詢問(wèn)我們是否確認(rèn)刪除。這種方式會(huì)打斷我們的操作行為,久而久之,用戶已經(jīng)對(duì)此交互方式習(xí)以為常,或者說(shuō)免疫了,但這種彈框的方式始終被認(rèn)為是不好的一種交互手段。所以側(cè)滑刪除,已經(jīng)被更多產(chǎn)品功能用來(lái)取代沒(méi)必要彈框的操作。

也許很多人沒(méi)思考過(guò)底層原因,或者僅僅只是覺(jué)得其相比彈框顯得更友好。其實(shí)這個(gè)行為是基于手勢(shì)交互做了相應(yīng)的優(yōu)化,讓用戶操作起來(lái)更加方便。

Banner

到了這里,我再舉個(gè)所有人都熟悉的例子,就是輪播圖了。

輪播圖最早出現(xiàn)于網(wǎng)頁(yè)端,后來(lái)被大量商家模仿,以至于到移動(dòng)端還備受各產(chǎn)品設(shè)計(jì)人員的歡迎。但其實(shí)很多人對(duì)輪播圖的使用方法都是錯(cuò)誤的。

下面來(lái)看輪播圖與手勢(shì)的關(guān)系。

試想:你的輪播圖有 6 張 Banner,你要翻到第 4 張,無(wú)論是往前翻還是往后翻都要產(chǎn)生 3 次交互行為。而大部分產(chǎn)品的用戶在界面停留的時(shí)間不會(huì)這么久,更不會(huì)看完你 Banner 的內(nèi)容。以至于有研究表明,大部分產(chǎn)品里,除了第一張 Banner 的點(diǎn)擊率能達(dá)到 83% 之外,其余的點(diǎn)擊率都非常低。

有人說(shuō)可以點(diǎn)擊下面的原點(diǎn)指示器做跳轉(zhuǎn),這么小的點(diǎn),你覺(jué)得點(diǎn)擊它現(xiàn)實(shí)么?所以手勢(shì)交互與輪播圖是相互矛盾的一種設(shè)計(jì)方式。

所以當(dāng)運(yùn)營(yíng)策劃了一個(gè)活動(dòng),而你就往頂部的輪播圖里塞,這個(gè)行為就已經(jīng)注定這個(gè)活動(dòng)的用戶參與度是很低的了。除了個(gè)別電商產(chǎn)品,他們以賣廣告位給商家作為盈利點(diǎn),但即便如此,我相信這個(gè)廣告位除了第一張圖的點(diǎn)擊量稍高外,其他圖片的點(diǎn)擊量相對(duì)于產(chǎn)品本身的用戶體量比較而言還是很低的。這也是為什么部分產(chǎn)品把輪播圖規(guī)則改為用戶進(jìn)入首頁(yè)隨機(jī)展示輪播圖頁(yè)面,而不是強(qiáng)制指定于顯示第一張的原因。

畢竟輪播圖在頂部,用戶需要通過(guò)拇指長(zhǎng)時(shí)間的在「延伸區(qū)域」進(jìn)行操作,那么使用率自然就降低了。

如果你的產(chǎn)品有很多活動(dòng)是在同時(shí)期進(jìn)行的,那么我給部分產(chǎn)品的建議是放一個(gè)活動(dòng)主題入口,如下圖。(當(dāng)然,這要視情況而定,并不是通用的。)

搜索框的變化

我們現(xiàn)在看到的搜索框基本都是放在屏幕頂部。

為什么呢?

市面上對(duì)這個(gè)問(wèn)題的解釋是這樣的:用戶已經(jīng)被現(xiàn)在的產(chǎn)品訓(xùn)練得在界面的頂部必須看到一個(gè)搜索框,設(shè)計(jì)師打破這個(gè)常規(guī)就要承擔(dān)風(fēng)險(xiǎn)。

看完這篇文章,你就已經(jīng)知道,對(duì)于用戶來(lái)說(shuō),由于屏幕頂部離拇指很遠(yuǎn),處于難以觸達(dá)的區(qū)域,在體驗(yàn)上很不好。所以搜索框成了認(rèn)知上應(yīng)該在頂部,但操作體驗(yàn)上又不應(yīng)該在頂部的一個(gè)設(shè)計(jì)。

但是回想一下,會(huì)發(fā)現(xiàn)大多數(shù) App 的主要內(nèi)容都是位于易于觸達(dá)的區(qū)域。所以當(dāng)看到高德地圖把搜索框移動(dòng)到下面來(lái)之后,就能知道,拇指驅(qū)動(dòng)設(shè)計(jì)的概念被越來(lái)越多的人認(rèn)識(shí)到其重要性。

地圖類產(chǎn)品把搜索框移到下面來(lái)的首創(chuàng)應(yīng)用不是高德,應(yīng)該是 Lyft。

瞧,拇指驅(qū)動(dòng)設(shè)計(jì),多酷~

總結(jié)

《上癮》里有句話:當(dāng)人們不由自由地做出下一個(gè)舉動(dòng)時(shí),新的習(xí)慣就會(huì)成為他們?nèi)粘I畹囊徊糠帧?

當(dāng)手勢(shì)充分地發(fā)揮了作用,輔助用戶操作或?qū)崿F(xiàn)功能,它就成了用戶不可分割的一部分。

今天通過(guò)對(duì)手勢(shì)意義的解讀,以及拇指驅(qū)動(dòng)設(shè)計(jì)的解析,再加上這些案例的拆解,我相信你能更好地理解為什么手勢(shì)交互這么重要了。

交互設(shè)計(jì)師對(duì)于「觸摸屏」,必須有深刻的認(rèn)識(shí),才能理解設(shè)計(jì)背后的邏輯。

如果這篇文章對(duì)你有幫助,記得點(diǎn)個(gè)贊,后面我好持續(xù)輸出。

文章來(lái)源:優(yōu)設(shè)

互聯(lián)網(wǎng)生活的底層邏輯:連接、賦能、破界

資深UI設(shè)計(jì)者

互聯(lián)網(wǎng)的底層邏輯就是以一種更的形式來(lái)滿足了我們的需要,讓我們的生活和生產(chǎn)更加的智能和。

底層邏輯是什么?如果給它一個(gè)釋義的話,那應(yīng)該是:最初的意圖或做一件事情原始的出發(fā)點(diǎn)。

互聯(lián)網(wǎng)的底層邏輯

我們生活在一個(gè)網(wǎng)絡(luò)時(shí)代??梢岳镁W(wǎng)絡(luò),購(gòu)物,打車,叫外賣,娛樂(lè),辦證,學(xué)習(xí)等需要??墒窃跊](méi)有網(wǎng)絡(luò)的年代里,做任何事情都是需要跑腿和親力親為。

我們對(duì)比沒(méi)有網(wǎng)絡(luò)年代?;ヂ?lián)網(wǎng)給我們生活帶來(lái)了極高的便利和效率。

我認(rèn)為互聯(lián)網(wǎng)的底層邏輯是:用一種更的形式來(lái)滿足我們生活生產(chǎn)而產(chǎn)生的需要。

我們拿買衣服,購(gòu)買外套舉例。

  • 進(jìn)店購(gòu)買:詢問(wèn)導(dǎo)購(gòu)–找到外套–挑選–決定買不買
  • 網(wǎng)上購(gòu)買:搜索外套–屏幕展示外套–挑選–決定買不買。

經(jīng)過(guò)對(duì)比發(fā)現(xiàn):

進(jìn)店購(gòu)買和網(wǎng)絡(luò)購(gòu)買最初的意圖都是滿足穿衣服。兩種形式的心理活動(dòng)邏輯一樣。都是店鋪找到外套,然后作出購(gòu)買決定。只是兩種方法的獲取形式和途徑是不一樣的。

  1. 實(shí)體店詢問(wèn)導(dǎo)購(gòu),變成了我們線上自主搜索。
  2. 口頭說(shuō)出外套變成輸入關(guān)鍵詞“外套”。
  3. 獲取到的結(jié)果由導(dǎo)購(gòu)帶到引導(dǎo)變成外套信息數(shù)據(jù)展示

互聯(lián)網(wǎng)技術(shù)的讓購(gòu)物,讓買衣服多了一種途徑,多了一種形式并且有別于我們傳統(tǒng)的購(gòu)買方式。

再如直播賣貨,直播賣貨在網(wǎng)絡(luò)上火了一把??诩t一哥李佳琦直播賣貨,1分鐘售罄14000支唇膏、打破“30秒涂口紅”吉尼斯記錄、5個(gè)半小時(shí)帶貨353萬(wàn)……最高時(shí)段3000萬(wàn)人在線圍觀。

現(xiàn)在我們要聊的并不是網(wǎng)絡(luò)紅人的偉大數(shù)據(jù)。而是網(wǎng)絡(luò)直播這個(gè)事。想一下,網(wǎng)絡(luò)直播是否在真實(shí)生活情景有原型。

看到上面的情景,是不是覺(jué)得熟悉了。

  • “瞧一瞧,看一看”
  • “廠家做活動(dòng),回饋消費(fèi)者,不要1999,不要1599,只要999”
  • “走過(guò)路過(guò)不要錯(cuò)過(guò)”
  • …..

我們暫時(shí)稱這些情景為現(xiàn)場(chǎng)直播,現(xiàn)場(chǎng)叫賣。由于互聯(lián)網(wǎng)技術(shù)的成熟,直播平臺(tái)的成熟。將現(xiàn)場(chǎng)直播搬到了網(wǎng)絡(luò)直播。網(wǎng)絡(luò)直播底層邏輯就是現(xiàn)場(chǎng)叫賣的另一種形式。

我們可以發(fā)現(xiàn),互聯(lián)網(wǎng)很多項(xiàng)目其實(shí)都是可以從現(xiàn)實(shí)生活中找到原型:

  • 購(gòu)物–電商
  • 線下地推–網(wǎng)絡(luò)直播
  • 電話叫餐–外賣
  • 培訓(xùn)–網(wǎng)課
  • 閱覽館–電子書
  • 辦證跑腿提交紙質(zhì)資料–網(wǎng)上提交電子檔資料
  • ……

互聯(lián)網(wǎng)如何讓生活生產(chǎn)變得更為?

1. 連接,跨空間,跨地域連接人

假如沒(méi)有網(wǎng)絡(luò),我們?nèi)伺c人之間的生產(chǎn)活動(dòng)大多只存在于本地圈子。例如:

  • 在當(dāng)?shù)匚幕W(xué)習(xí),與當(dāng)?shù)赝g人成為同學(xué)。
  • 信息和話題交流閉塞,對(duì)外界信息獲取滯后。
  • 和當(dāng)?shù)厝俗錾?,把貨品賣給當(dāng)?shù)氐南M(fèi)者。

有了網(wǎng)絡(luò):

  • 在抖音快手,我們可以看到其他城市的面貌,了解更多的人文民俗。
  • 在網(wǎng)絡(luò)課程上學(xué)習(xí)平時(shí)接觸不到的知識(shí)。比如:理財(cái),攝影,寫程序,做會(huì)計(jì)。
  • 還可以通過(guò)電商將生意做到全國(guó)各地。

網(wǎng)絡(luò)連接能突破界限,跨地域、跨空間,將不同省份,不同城市的人,通過(guò)互聯(lián)網(wǎng)聯(lián)系起來(lái)。然后將我們的信息,個(gè)人技能,社會(huì)信息放大到更多地方。

2. 賦能,釋放能量,價(jià)值最大化

以前有種現(xiàn)象。那就是信息不平衡,需求與被滿足不平衡。

比如:A想采購(gòu)一批水果加工儀器,但當(dāng)?shù)剞r(nóng)業(yè)為主,別說(shuō)售賣水果加工儀器,即便是詢問(wèn)他人也鮮有人知道。

但在網(wǎng)絡(luò)時(shí)代,我們只要百度或者阿里巴巴搜索。總會(huì)得到我們想要的線索或者結(jié)果,總能找到加工儀器供應(yīng)商的信息。

再如:十八線縣城要學(xué)習(xí)IT編程語(yǔ)言,一般來(lái)說(shuō)要去大城市培訓(xùn)機(jī)構(gòu)學(xué)習(xí)。有了網(wǎng)絡(luò),直接在一些課程平臺(tái)上購(gòu)買課程就可以了。

上面的例子想說(shuō)明的就是互聯(lián)網(wǎng)可以放大社會(huì)資源的利用率,將價(jià)值更大化,讓更多人參與參與到社會(huì)資源的共享當(dāng)中。消除局限和阻隔,將知識(shí)課程提供千千萬(wàn)萬(wàn)的人可以學(xué)習(xí)使用。

滴滴平臺(tái)一方面解決了人們打車難的問(wèn)題,另一方面也將閑賦私家車全部利用起來(lái),給打車這和私家車車主同時(shí)滿足需求和創(chuàng)造價(jià)值。

幾年前我們看著小卡片的菜單和電話叫外賣,現(xiàn)在我店家再也不用通過(guò)發(fā)傳單來(lái)招攬生意了,只要用戶有需要打開(kāi)app就可以實(shí)現(xiàn)足不出戶享受用餐。

互聯(lián)網(wǎng)將社會(huì)資源效率更大化。無(wú)論是外賣平臺(tái),學(xué)習(xí)平臺(tái),電商平臺(tái)都是將原來(lái)局限在小范圍的服務(wù)放大到全國(guó)各地的人群使用。這些都是互聯(lián)網(wǎng)技術(shù)賦予的能量。

3. 破界,突破界限,讓不可能成為可能

在那個(gè)守著電視機(jī),聽(tīng)廣播看報(bào)紙,用著紙幣的年代。怎么也不會(huì)想到今天我們可以拿著手機(jī)看新聞,追劇,刷抖音;用手機(jī)乘公交,乘地鐵;手機(jī)當(dāng)錢包,網(wǎng)紗購(gòu)物,線下消費(fèi)。所以很多老人好像有點(diǎn)不能理解年輕人的生活方式。

所以技術(shù)可以讓滿足我們需求的方式發(fā)生改變,甚至是顛覆的。

從前我們看的也并不是電視本身,而是看聲情并茂的畫面;報(bào)紙也不是報(bào)紙而是信息;使用紙幣是為了完成交易。電視,報(bào)紙,紙幣這是一個(gè)時(shí)代的載體。

互聯(lián)網(wǎng)技術(shù)的發(fā)展讓這些載體發(fā)生了變化,打破了刻板印象。讓我們知道了很多東西其實(shí)只是個(gè)物體,這些物體幫助實(shí)現(xiàn)我們內(nèi)心產(chǎn)生的需要。

今天只是這些物體被新的物體替代了,就好比手機(jī)替代了一部分看電視的需求。在十幾年前我們?cè)趺匆膊粫?huì)想到今天那么多東西都被改變和替代。也許我們現(xiàn)在不切實(shí)際的想法,在將來(lái)的某一天也終將會(huì)被替代和成為現(xiàn)實(shí)。

互聯(lián)網(wǎng)把我們每一個(gè)人連接在一起。放大了市場(chǎng),提升了效率,突破了界限。用一種新的形式滿足人們?nèi)招略庐惖男枨笊?jí)。

互聯(lián)網(wǎng)繼續(xù),5G來(lái)襲,展望未來(lái)。

互聯(lián)網(wǎng)已經(jīng)滲透到了各行各業(yè)。大到與我們生活息息相關(guān),也可以小到陌生領(lǐng)域。人們都說(shuō)互聯(lián)網(wǎng)的發(fā)展已經(jīng)到了瓶頸,我更愿意相信是互聯(lián)網(wǎng)是暫時(shí)進(jìn)入到了它的發(fā)展周期。

技術(shù)只會(huì)不斷的向前,不斷的用新的更好的方式來(lái)突破替代的舊的形式。隨著5G網(wǎng)絡(luò)的到來(lái),肯定會(huì)有新一輪的技術(shù)革命到來(lái)。

第5代移動(dòng)通信網(wǎng)絡(luò)比4G網(wǎng)絡(luò)的傳輸速度要快10倍以上,一部1G的電影可在8秒之內(nèi)下載完成,我相信這絕對(duì)又是一個(gè)新的起點(diǎn),很期待5G時(shí)代給我們帶來(lái)的驚喜。

4G時(shí)代連接人與人,是服務(wù)業(yè)的升級(jí)

不難發(fā)現(xiàn),4G網(wǎng)絡(luò)應(yīng)用大多數(shù)屬于服務(wù)范疇。像電商,外賣,打車,餐飲其實(shí)都是服務(wù)員行業(yè)。4G時(shí)代提高了服務(wù)效率,實(shí)現(xiàn)了跨距離,跨空間服務(wù)。

視頻聊天可以穿越見(jiàn)面時(shí)空對(duì)話;電商可以讓你在一個(gè)地方買遍全國(guó)甚至全球;新零售可以實(shí)現(xiàn)不出門買菜做飯。4G網(wǎng)絡(luò)連接人與人,大大提高了人與人之間服務(wù)的效率和數(shù)量。

5G時(shí)代連接人與物,交互體驗(yàn)升級(jí)

隨著5G網(wǎng)絡(luò)的到來(lái)及速度效率的提升,我們可以實(shí)現(xiàn)更加多元化的連接。

5G可以做到4G想做但有無(wú)法實(shí)現(xiàn)的事情,例如擴(kuò)展到人與物之間的連接;也可以在4G基礎(chǔ)上實(shí)現(xiàn)更加精準(zhǔn)的計(jì)算,又如精密的醫(yī)療,更加精準(zhǔn)和快速的大數(shù)據(jù)。

5G網(wǎng)絡(luò)將繼續(xù)升級(jí)改變我們生活,它將繼續(xù)改變娛樂(lè),交通,醫(yī)療,智能家居等等領(lǐng)域。我們可以試著猜想:

  • VR技術(shù),讓看電影能夠有更佳的3D體驗(yàn)。
  • 網(wǎng)上購(gòu)物不在需要看圖片。而是有更好的體驗(yàn),身臨其境在虛擬的店鋪中??梢詫?duì)商品有觸摸和移動(dòng)等虛擬的互動(dòng)體驗(yàn)。
  • 無(wú)人駕駛技術(shù)
  • 智能家居。不在家或者在外地對(duì)家居進(jìn)行操作,比如:關(guān)窗,開(kāi)空調(diào),掃地等。
  • 智能醫(yī)療。如;遠(yuǎn)程手術(shù)。由于5G網(wǎng)絡(luò)有著更加精準(zhǔn)的效率。支持醫(yī)生運(yùn)用機(jī)器跨醫(yī)院操作手術(shù)等。

技術(shù)的進(jìn)步會(huì)給我們的生活帶來(lái)改變,我們期待新的形式來(lái)滿足我們的需求,期待我們的生活和生產(chǎn)更加的智能和。

 文章來(lái)源:人人都是產(chǎn)品經(jīng)理

如何把產(chǎn)品的癢點(diǎn)變成爽點(diǎn)?

資深UI設(shè)計(jì)者

新康眾用戶體驗(yàn)設(shè)計(jì)部 – 伊格:在細(xì)節(jié)(體驗(yàn))決定「成敗」的今天,設(shè)計(jì)該如何尋找支點(diǎn)撬動(dòng)產(chǎn)品體驗(yàn),甚至于是行業(yè)體驗(yàn)?

2007年1月9日,史蒂夫·喬布斯在 MacWorld 大會(huì)上正式推出了第一代 iPhone,至今已過(guò)去近 13 年了。為了帶來(lái)更好的用戶體驗(yàn),第一代 iphone 在硬件的設(shè)計(jì)上,摒棄了以往的物理鍵盤,開(kāi)發(fā)了「虛擬鍵盤」結(jié)合手勢(shì)交互用于信息輸入,無(wú)疑是當(dāng)時(shí)智能手機(jī)行業(yè)內(nèi)的一大顛覆式改革。

我們聚焦于「虛擬鍵盤」本身來(lái)分析,「虛擬鍵盤」在日常生活的輸入場(chǎng)景中已經(jīng)做得足夠的「好用」、「」,甚至于近乎完美。在「體驗(yàn)經(jīng)濟(jì)」愈演愈烈的今天,各行各業(yè)為了打造更好的輸入體驗(yàn),都圍繞著「虛擬鍵盤」并結(jié)合行業(yè)特性做著一些個(gè)性化的設(shè)計(jì)嘗試,比如我們今天要講的「汽車行業(yè)」。

行業(yè)聚焦

說(shuō)到了「汽車行業(yè)」,我們首先從「汽車」本身開(kāi)始說(shuō)起,目前汽車共擁有兩個(gè)「身份信息」,一個(gè)是車架號(hào)(VIN碼)、一個(gè)是車牌號(hào),在日常生活中我們最常接觸的就是車牌號(hào),其次才是車架號(hào)。

從互聯(lián)網(wǎng)興起至今,各行各業(yè)為了營(yíng)造更好的服務(wù)體驗(yàn),都走上了「互聯(lián)網(wǎng)+」/「移動(dòng)互聯(lián)網(wǎng)+」的戰(zhàn)略路線,當(dāng)然「汽車行業(yè)」也不例外。圍繞汽車本身衍生出了眾多對(duì) B 端以及對(duì) C 端客戶的汽車服務(wù),如常見(jiàn)的「智慧停車、違章繳費(fèi)、維修、保養(yǎng)、保險(xiǎn)、車聯(lián)網(wǎng)等」一系列汽車服務(wù),均可以在線上場(chǎng)景中體驗(yàn)到。

我們?cè)诰€上體驗(yàn)汽車服務(wù)的同時(shí),首先需聚焦于汽車本身,其核心要素之一就是「汽車身份信息」,在體驗(yàn)流程中首先需要將車牌信息錄入系統(tǒng),才能便于我們后續(xù)更好的對(duì)服務(wù)進(jìn)行體驗(yàn)(如:線上停車?yán)U費(fèi)、違章繳費(fèi)、維保預(yù)約、保險(xiǎn)理賠等眾多與汽車相關(guān)的場(chǎng)景)。

那么在「汽車行業(yè)場(chǎng)景」中使用「系統(tǒng)鍵盤」輸入車牌信息是否依舊能達(dá)到「好用」及「」的體驗(yàn)?zāi)???jīng)過(guò)測(cè)試后得出了結(jié)論:在使用「系統(tǒng)鍵盤」輸入車牌信息時(shí),雖然能夠完成輸入任務(wù),但相較于日常生活中的輸入體驗(yàn),使用「系統(tǒng)鍵盤」輸入車牌信息就顯得不是那么的「好用」及「」了。

痛點(diǎn)解析

我們回到車牌本身來(lái)分析一下,使用「系統(tǒng)鍵盤」輸入車牌信息,從輸入體驗(yàn)的角度來(lái)衡量,在「行業(yè)場(chǎng)景」下,「系統(tǒng)鍵盤」為何只被評(píng)定為「能用」?

基于上述問(wèn)題我們先從車牌開(kāi)始說(shuō)起,路面上常見(jiàn)的車是「私家車」和「警車」,從「國(guó)家車牌行業(yè)標(biāo)準(zhǔn)文件」中分析得出,常見(jiàn)的標(biāo)準(zhǔn)車牌是由「省份、城市、序號(hào)」三者組合而成的,其中具體信息又是由「漢字、英文、數(shù)字」構(gòu)成的。

在「行業(yè)場(chǎng)景」下使用「系統(tǒng)鍵盤」輸入車牌信息,不夠好用、的兩個(gè)主要原因如下。

痛點(diǎn)一:輸入操作繁瑣

使用「系統(tǒng)鍵盤」在進(jìn)行車牌信息輸入時(shí),需要在漢字、英文、數(shù)字三者之間來(lái)回切換才能完成車牌信息的輸入任務(wù)。

痛點(diǎn)二:無(wú)法達(dá)到標(biāo)準(zhǔn)化輸入

使用「系統(tǒng)鍵盤」輸入的車牌信息是否有效、是否符合國(guó)家標(biāo)準(zhǔn)最終還需要在輸入任務(wù)完成后,依靠系統(tǒng)的校驗(yàn)機(jī)制來(lái)驗(yàn)證其有效性。

上面所述的問(wèn)題,雖然還稱不上是「痛點(diǎn)」,但是對(duì)于那些每天與車打交道的用戶而言也算是一個(gè)「不痛不癢」的問(wèn)題,在細(xì)節(jié)(體驗(yàn))決定成敗的今天,細(xì)微的體驗(yàn)問(wèn)題我們也應(yīng)當(dāng)盡可能的讓其變得「完美」。

設(shè)計(jì)策略

基于上述問(wèn)題,通過(guò)洞察分析我們發(fā)現(xiàn)了「設(shè)計(jì)機(jī)會(huì)點(diǎn)/發(fā)力點(diǎn)」,以「虛擬鍵盤」為抓手,明確了設(shè)計(jì)策略,開(kāi)始著手設(shè)計(jì)符合行業(yè)特性的「專用輸入組件 」。 在「行業(yè)場(chǎng)景」下通過(guò)「專用輸入組件」輸入車牌信息,圍繞「」(提高輸入效率)、「防錯(cuò)」(定義防錯(cuò)機(jī)制使得輸入的信息符合國(guó)家標(biāo)準(zhǔn))兩個(gè)目標(biāo)進(jìn)行設(shè)計(jì),從而使其在「行業(yè)輸入場(chǎng)景」下達(dá)到「好用」及「」的體驗(yàn)。

目標(biāo)與方法

基于上述的設(shè)計(jì)策略,我們明確了本次設(shè)計(jì)的核心目標(biāo) :解決輸入效率(提效)、解決輸入出錯(cuò)(防錯(cuò)機(jī)制)。那么接下來(lái)我們分析一下國(guó)家對(duì)于汽車行業(yè)車牌標(biāo)準(zhǔn)的相關(guān)政策與規(guī)則,從中挖掘達(dá)到設(shè)計(jì)目標(biāo)的方法。

1. 認(rèn)識(shí)車牌

在做分析之前我們需要對(duì)其關(guān)鍵因素(車牌)有一定的認(rèn)知,下面所展示的車牌基本涵蓋了目前我國(guó)所有的車牌類型。其中包括常見(jiàn)的如「普通藍(lán)牌」、「普通黃牌」、「新能源車牌」、「教練車牌」、「警用牌」等。

2. 車牌分類

為了使車牌信息變得更具條理性,我們對(duì)其進(jìn)行一次分類,分類的依據(jù)「是基于他們相互之間的組合規(guī)則與共性特征而決定的」。我們將其分為四大類:「普通車牌」、「特種車牌」、「新能源車牌」、「特殊類車牌」。

具體分類細(xì)則如下:

  • 普通車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母」 構(gòu)成的,這類車牌屬于 7 位數(shù)牌照。
  • 特種車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母/漢字」 構(gòu)成的,并且序號(hào)中 「漢字必須是車牌號(hào)的最后一位」 ,這類車牌屬于 7 位數(shù)牌照。
  • 新能源車牌:由 「省份/城市/序號(hào)」 組成的,其序號(hào)是由 「數(shù)字/字母」 構(gòu)成的,這類車牌屬于 8 位數(shù)牌照。
  • 特殊類車牌:這類車牌因無(wú)共性規(guī)則,我們將其定義為特殊類。(這類國(guó)家特殊單位的車在我們的日常生活中/汽車行業(yè)內(nèi)的工作中接觸到的機(jī)會(huì)也不會(huì)很多)。

3. 定義設(shè)計(jì)范圍

分類完畢后,我們定義一個(gè)設(shè)計(jì)范圍,因?yàn)樵谠O(shè)計(jì)時(shí)我們往往很難通過(guò)一套設(shè)計(jì)方案來(lái)滿足所有車牌的輸入場(chǎng)景,所以在設(shè)計(jì)時(shí)我們會(huì)圍繞那些有規(guī)則的、有共性特征的車牌進(jìn)行組件的設(shè)計(jì),從而滿足大部分的輸入場(chǎng)景。

根據(jù)車牌的分類規(guī)則,我們將「普通車牌」、「特種車牌」、「新能源車牌」三大類,定義在行業(yè)輸入組件的設(shè)計(jì)覆蓋范圍內(nèi)。特殊類車牌雖然在日常生活中接觸到的概率較少,但是我們也應(yīng)當(dāng)盡可能的滿足其輸入場(chǎng)景,通過(guò)自定義車牌號(hào)的方式,調(diào)用「系統(tǒng)鍵盤」來(lái)完成其輸入任務(wù)。

4. 共性&差異

在明確了分類細(xì)節(jié)與設(shè)計(jì)范圍后我們對(duì)范圍內(nèi)的三類車牌做一次共性與差異化的具體分析,以便于在組件設(shè)計(jì)時(shí)根據(jù)規(guī)則定義一些防錯(cuò)機(jī)制。(為了便于理解,防錯(cuò)機(jī)制將會(huì)在Demo階段展示)

普通牌 & 特種牌:共性特征(組合規(guī)則一致、二者都屬于7位數(shù)牌照)差異(特種牌的序號(hào)中多了一個(gè)「漢字序號(hào)」,并且漢字序號(hào)必須是車牌號(hào)的最后一位)。

特種牌 & 能源牌:

  • 共性特征:組合規(guī)則一致;
  • 差異:特種牌屬于 7 位數(shù)牌照,且存在漢字序號(hào);能源牌屬于 8 位數(shù)牌照,且不存在漢字序號(hào)。

能源牌 & 普通牌:

  • 共性特征:組合規(guī)則一致;
  • 差異:能源牌屬于 8 位數(shù)牌照,普通牌屬于 7 位數(shù)牌照。

5. 分析總結(jié)

通過(guò)上述的幾步分析,我們對(duì)國(guó)內(nèi)的車牌有了一定的了解,并為其進(jìn)行了歸納細(xì)分,定義了設(shè)計(jì)范圍,分析了范圍內(nèi)各類車牌的共性以及差異,最后我們結(jié)合「國(guó)家車牌行業(yè)標(biāo)準(zhǔn)文檔」與上述幾步的分析結(jié)果,得出以下結(jié)論:

  • 常見(jiàn)的標(biāo)準(zhǔn)車牌號(hào)是由「省份、城市、序號(hào)」組成的,省份位的字符必須是漢字(各省、自治區(qū)、直轄市簡(jiǎn)稱),城市位的字符必須是英文(發(fā)牌機(jī)關(guān)代號(hào):A~Z),序號(hào)位的字符必須是數(shù)字/字母組合(A~Z / 0~9),特殊序號(hào)位的字符必須是漢字(港、澳、掛、學(xué)、警)且漢字序號(hào)必須是車牌號(hào)的最后一位。
  • 行業(yè)輸入組件定義為兩種:省份輸入組件(因國(guó)內(nèi)省份較多所以將其作為一個(gè)獨(dú)立的組件)、車牌號(hào)輸入組件(該組件由英文、數(shù)字、漢字序號(hào)組成)。
  • 特殊類車牌:這類車牌雖無(wú)共性規(guī)則,但需要滿足其輸入場(chǎng)景,通過(guò)自定義車牌號(hào)的方式,調(diào)用系統(tǒng)鍵盤來(lái)完成其輸入任務(wù)。

具體方案 – 省份輸入組件

省份輸入組件的結(jié)構(gòu)分為兩部分。

第一部分是文字按鈕,點(diǎn)擊后調(diào)用「系統(tǒng)鍵盤」輸入自定義車牌信息。

  • 滿足特殊類車牌號(hào)的輸入場(chǎng)景;
  • 滿足一些自定義信息的輸入場(chǎng)景。例如我們通過(guò)調(diào)研了解到,汽車維修行業(yè)他們有時(shí)候不單單會(huì)錄入車牌信息,偶爾還會(huì)錄入一些特殊的車牌代號(hào),比如灑水車001、警車003等。

第二部分是車牌號(hào)的省份簡(jiǎn)稱(各省、自治區(qū)、直轄市簡(jiǎn)稱)。簡(jiǎn)稱部分采用了國(guó)家地理行政區(qū)的劃分原則,對(duì)各區(qū)域內(nèi)省份依次排序(排名不分先后)。

下面說(shuō)明一下按照行政區(qū)劃分原則做為省份排序的好處。

以華東區(qū)為例,該區(qū)域包含了山東、江蘇、安徽、浙江、福建、上海這幾個(gè)城市,在同一個(gè)行政區(qū)內(nèi)必然會(huì)有一/多個(gè)經(jīng)濟(jì)體系相對(duì)發(fā)達(dá)城市。城市一發(fā)達(dá),附近省份的外來(lái)車輛就會(huì)相對(duì)較多,例如在江蘇地區(qū)總會(huì)看到安徽地區(qū)的車輛一樣 。

現(xiàn)在的軟件基本都使用了定位技術(shù),我們?cè)谕馐∵M(jìn)行車牌信息的錄入時(shí),系統(tǒng)是會(huì)自動(dòng)獲取并填寫當(dāng)前所在地區(qū)的省份簡(jiǎn)稱,以降低用戶使用鍵盤的輸入次數(shù)。如果我們是外地牌照車輛則需要將當(dāng)前省份簡(jiǎn)稱刪除,再修改為車牌的實(shí)際省份簡(jiǎn)稱。

按照行政區(qū)作為省份排序的好處:在修改省份簡(jiǎn)稱時(shí),相鄰的省份在排序上會(huì)比較接近,這樣用戶在查找、選擇對(duì)應(yīng)省份時(shí)比起按首字母排序/其他方式的排序,查找效率會(huì)相對(duì)更快。

具體方案 – 車牌號(hào)輸入組件

車牌號(hào)輸入組件分為三部分,第一部分是自定義車牌號(hào)的文字按鈕 + 完成操作按鈕;第二部分是漢字序號(hào) + 數(shù)字序號(hào)的按鍵;第三部分是英文序號(hào)以及刪除按鍵。

其中英文字母按鍵是由 25 個(gè)字母組成,缺少了字母 i ,因?yàn)榇髮懽帜?i 與數(shù)字 1 的字體設(shè)計(jì)及其相似,導(dǎo)致兩者很難辨別,所以在「行業(yè)標(biāo)準(zhǔn)文件」中明確指出,字母 i 不可用于組成車牌信息。

當(dāng)然「行業(yè)標(biāo)準(zhǔn)文件」中還指出了另一個(gè)字母,也不可用于組成車牌信息,他就是字母 O ,原因與字母 i 一樣,大寫的字母 O 與 0 及其相似,導(dǎo)致兩者很難辨別。

那么為什么我們的組件中還要包含字母 O 呢?因?yàn)樵谶^(guò)去字母 O 是作為公務(wù)車專用代號(hào),存在于車牌號(hào)的第二位(城市代號(hào)位)俗稱「O牌特權(quán)車」。隨著 O 牌泛濫,特權(quán)肆意,有的省份就將 O 牌由公務(wù)專用改為了普通民用,還有的省份直接取消了 O 牌,當(dāng)然還有部分省份保留著 O 牌作為公務(wù)用車專用代號(hào),所以我們?cè)诮M件設(shè)計(jì)中保留了字母 O。

DEMO – 演示

為了更好的展示設(shè)計(jì)方案,以及便于大家理解其中的設(shè)計(jì)細(xì)節(jié),下面我們通過(guò) DEMO 的方式,定性的模擬幾種輸入場(chǎng)景,通過(guò)「專用輸入組件」并結(jié)合防錯(cuò)機(jī)制進(jìn)行車牌號(hào)的錄入。

場(chǎng)景一:車牌號(hào)省份簡(jiǎn)稱修改

基于地理定位技術(shù),進(jìn)入信息填寫頁(yè)面系統(tǒng)會(huì)默認(rèn)獲取到當(dāng)前地區(qū)的車牌省份簡(jiǎn)稱,此時(shí)如果是外省車輛,則需要對(duì)省份簡(jiǎn)稱做修改變更。其實(shí)車牌號(hào)第二位也能通過(guò)定位技術(shù)獲取到,但是目前我國(guó)存在一個(gè)城市擁有多個(gè)發(fā)牌代號(hào)的場(chǎng)景,例如蘇州市發(fā)牌機(jī)關(guān)代號(hào)「蘇E」、「蘇U」,包括一些直轄市也存在這種情況,所以這也是城市代號(hào)不默認(rèn)獲取的直接原因。通過(guò)定位技術(shù)獲取信息本身是一種提效的策略,但是基于上述場(chǎng)景反而可能會(huì)適得其反,

場(chǎng)景二:輸入第2~5位車牌號(hào)

車牌號(hào)的第二位必須是英文,此時(shí)數(shù)字序號(hào)按鍵與特殊漢字序號(hào)按鍵為禁用狀態(tài)。當(dāng)?shù)诙卉嚺铺?hào)輸入完畢時(shí),數(shù)字序號(hào)按鍵變?yōu)榭捎脿顟B(tài),此時(shí)無(wú)論輸入的第二位車牌號(hào)是否為字母 O 都必須將其禁用,因?yàn)樽帜窸只會(huì)存在于車牌號(hào)的第二位。

場(chǎng)景三:輸入第6~7位車牌號(hào) – 完成普通車牌的輸入場(chǎng)景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào)。當(dāng)?shù)?7 位車牌號(hào)輸入了英文/數(shù)字時(shí),禁用特殊漢字序號(hào),至此普通車牌號(hào)輸入完畢。

場(chǎng)景四:輸入第6~7位車牌號(hào) – 完成特種車牌的輸入場(chǎng)景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào),因?yàn)樘厥鉂h字序號(hào)只會(huì)存在于車牌號(hào)的第 7 位。當(dāng)漢字序號(hào)輸入完畢后,刪除按鍵以外的其余按鍵全部禁用,因?yàn)闃?biāo)準(zhǔn)的特種車牌只有 7 位,至此特種車牌號(hào)輸入完畢。

場(chǎng)景五:輸入第6~8位車牌號(hào) – 完成新能源車牌的輸入場(chǎng)景

當(dāng)?shù)?6 位車牌號(hào)輸入完畢時(shí),激活特殊漢字序號(hào)。當(dāng)?shù)?7 位車牌號(hào)輸入了英文/數(shù)字時(shí),禁用特殊漢字序號(hào)。當(dāng)?shù)?8 位車牌號(hào)輸入了英文/數(shù)字時(shí),刪除按鍵以外的其余按鍵全部禁用,因?yàn)闃?biāo)準(zhǔn)的新能源車牌只有8位,至此新能源車牌號(hào)輸入完畢。

場(chǎng)景六:演示特殊類車牌號(hào)的輸入方法

特殊車輛在我們的日常生活中/汽車行業(yè)相關(guān)業(yè)務(wù)中接觸到的概率較少,但我們也應(yīng)當(dāng)盡可能的滿足其輸入場(chǎng)景。點(diǎn)擊自定義按鈕后,彈出系統(tǒng)默認(rèn)鍵盤,此時(shí)車牌號(hào)輸入框中內(nèi)容清空,文案變?yōu)椤刚?qǐng)輸入自定義內(nèi)容」,用戶將信息輸入完成后系統(tǒng)不做強(qiáng)制校驗(yàn)。

最后,我們又通過(guò)定性的方式,基于兩個(gè)輸入場(chǎng)景對(duì)組件的輸入效率進(jìn)行了模擬預(yù)估,得出結(jié)論:使用「專用組件」輸入車牌信息,相比較于使用「系統(tǒng)鍵盤」輸入效率均大幅度得到了提升。

總結(jié)

俗話說(shuō)「藝術(shù)產(chǎn)生情緒,設(shè)計(jì)解決問(wèn)題」。設(shè)計(jì)是需要基于一定的規(guī)則體系之內(nèi),倘若設(shè)計(jì)脫離了商業(yè)/行業(yè)規(guī)則,缺少了解決問(wèn)題的能力,那么其結(jié)果就可能變成了一個(gè)耐人尋味的藝術(shù)品。

在細(xì)節(jié)(體驗(yàn))決定成敗的今天,如何將「癢點(diǎn)」變?yōu)椤杆c(diǎn)」,如何通過(guò)細(xì)微的設(shè)計(jì)優(yōu)化改良產(chǎn)品的用戶體驗(yàn)甚至于影響到整個(gè)行業(yè)的體驗(yàn),這正是我們作為產(chǎn)品人、體驗(yàn)設(shè)計(jì)師該深耕發(fā)力的地方。

文章來(lái)源:優(yōu)設(shè)

交互設(shè)計(jì)師如何梳理業(yè)務(wù)需求?

資深UI設(shè)計(jì)者

需求整理的現(xiàn)狀

寫這篇文章的初衷,是在實(shí)際工作中遇到 PRD & DRD 文檔,對(duì)于一些交互設(shè)計(jì)圖,會(huì)產(chǎn)生不理解,或者說(shuō)在實(shí)際落地畫圖的時(shí)候會(huì)發(fā)現(xiàn)一些前后不一致的問(wèn)題,解釋過(guò)于冗余,不清晰。在接觸新的業(yè)務(wù)時(shí),很難把新理解的內(nèi)容從上至下的消化完整。所以希望通過(guò)這篇文章幫助剛接觸交互的同學(xué)更好地開(kāi)展交互設(shè)計(jì)工作。

在傳統(tǒng)瀑布式需求分析流程中,我們?cè)O(shè)計(jì)師往往拿到的是已成型的信息架構(gòu)圖&產(chǎn)品結(jié)構(gòu)圖&關(guān)鍵業(yè)務(wù)流程圖,只是了解一下大概是什么類型的產(chǎn)品,很難發(fā)現(xiàn)企業(yè)產(chǎn)品中真正關(guān)鍵的流程價(jià)值點(diǎn)在哪里,或者說(shuō)也不清楚后續(xù)發(fā)展的走向,只能卯足了勁去做圖做說(shuō)明,整理完整。時(shí)間緊迫壓力大,又要照顧整個(gè)項(xiàng)目。往往決定產(chǎn)品成功與否的,是產(chǎn)品 20% 的主要功能(二八原則)。所以在面臨初期產(chǎn)品設(shè)計(jì)中,應(yīng)該將主要精力放在重要功能流程中。

目前,在互聯(lián)網(wǎng)產(chǎn)品中,敏捷開(kāi)發(fā)是所有產(chǎn)品設(shè)計(jì)者最推崇的。原因在于,能夠?qū)I(yè)務(wù)、設(shè)計(jì)、開(kāi)發(fā)更有前瞻性&敏捷性。

理解業(yè)務(wù)需求,是做好交互的首要條件

產(chǎn)品交互的成功一定是建立在業(yè)務(wù)需求提煉清晰的基礎(chǔ)上。業(yè)務(wù)需求的價(jià)值提煉,也是設(shè)計(jì)師需要參與完成的。業(yè)務(wù)需求是一個(gè)比較大的任務(wù),來(lái)源可能是老板的要求,可能是產(chǎn)品提出的,也可能是用戶的反饋。通過(guò)業(yè)務(wù)需求,我們要分析出相關(guān)的業(yè)務(wù)目標(biāo)。有個(gè)偶然的機(jī)會(huì),了解到彩色 UML 的設(shè)計(jì)方法,在具體實(shí)踐中,感覺(jué)這個(gè)方法能夠快速適應(yīng)任何業(yè)務(wù)流程,簡(jiǎn)單方便,易懂,并能快速發(fā)現(xiàn)業(yè)務(wù)流程中的問(wèn)題,加以修正完善。

彩色UML建模

有幸認(rèn)識(shí)王海鵬老師,他推薦了早年他翻譯的彩色 UML 建模一書,作者 Peter Coad,是將彩色和企業(yè)組件集成到建模技術(shù)之中的第一本書的主要作者,是世界上經(jīng)驗(yàn)豐富的建模人員之一,他所創(chuàng)建的模型幾乎涉及到所有行業(yè)。

此書是第一本介紹用彩色來(lái)表達(dá)軟件設(shè)計(jì)的著作。作者用 4 種顏色來(lái)代表 4 種架構(gòu)型,給定一種顏色,你就知道這個(gè)類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構(gòu)建塊能創(chuàng)建更好的模型,并獲得應(yīng)有的認(rèn)可。彩色和架構(gòu)型僅僅是開(kāi)始。作者更進(jìn)一步將這些架構(gòu)型發(fā)展為 12 個(gè)類的領(lǐng)域無(wú)關(guān)組件。作者在過(guò)去 10 年中創(chuàng)建的每個(gè)模型,都遵循這個(gè)組件所表達(dá)的基本形狀和職責(zé)。

筆者利用彩色 UML 建模的設(shè)計(jì)方法,用于業(yè)務(wù)梳理工作,達(dá)到了意想不到的效果。以下為彩色 UML 建?;靖拍睿ń厝〔噬?UML 建模書中的介紹)。

△ 《彩色UML建模書》第9頁(yè)

△ 《彩色UML建模書》第10頁(yè)

△ 事例會(huì)員注冊(cè)

交互設(shè)計(jì)中常用圖

1. 實(shí)體關(guān)系圖(又稱ER圖)

定義:ER 圖是用來(lái)描述現(xiàn)實(shí)世界中的實(shí)體關(guān)系模型,所謂實(shí)體是指客觀上或者邏輯上存在并且可以區(qū)分的人事物。

作用:促使你以最適合技術(shù)理解實(shí)現(xiàn)的方法,來(lái)規(guī)范的描述功能模塊的核心要素,其實(shí)就是數(shù)據(jù)庫(kù)的物理結(jié)構(gòu)。而這種描述是無(wú)二義的,最清晰傳達(dá) PM 的設(shè)計(jì)思想。

2. 功能結(jié)構(gòu)圖

功能結(jié)構(gòu)圖就是按照功能的從屬關(guān)系畫成的圖表,在該圖表中的每一個(gè)框都稱為一個(gè)功能模塊。功能模塊可以根據(jù)具體情況分得大一點(diǎn)或小一點(diǎn),分解得最小功能模塊可以是一個(gè)程序中的每個(gè)處理過(guò)程,而較大的功能模塊則可能是完成某一個(gè)任務(wù)的一組程序。用通俗的話來(lái)說(shuō),功能結(jié)構(gòu)圖就是以功能模塊為類別,介紹模塊下各功能組成的圖表。

作用

  • 梳理需求,以鳥(niǎo)瞰的方式對(duì)整個(gè)產(chǎn)品頁(yè)面中的功能結(jié)構(gòu)形成一個(gè)直觀的認(rèn)識(shí)。
  • 思考并明確產(chǎn)品的功能模塊及其功能組成。
3. 信息結(jié)構(gòu)圖

信息架構(gòu)屬于用戶體驗(yàn)的結(jié)構(gòu)層,是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代,否則不會(huì)大改。

作用

  • 幫助 PM 梳理復(fù)雜內(nèi)容的信息組成,避免信息內(nèi)容在展示過(guò)程中出現(xiàn)遺漏、混亂、重復(fù);
  • 作為開(kāi)發(fā)工程師建立數(shù)據(jù)庫(kù)的參考依據(jù)。

信息結(jié)構(gòu)圖構(gòu)成要素

  • 導(dǎo)航:網(wǎng)頁(yè)訪問(wèn)者的訪問(wèn)途徑。
  • 頻道:某一個(gè)同性質(zhì)的功能或內(nèi)容的共同載體,也可稱為功能或內(nèi)容的類別。
  • 子頻道:某頻道下細(xì)分的另一類別。
  • 頁(yè)面:?jiǎn)蝹€(gè)或附屬某個(gè)頻道或分類下的界面。
  • 模塊:頁(yè)面中多個(gè)元素組成的一個(gè)區(qū)域內(nèi)容,可以有一個(gè)或多個(gè),也可以循環(huán)出現(xiàn),如:文章列表。
  • 模塊元素:模塊中的元素內(nèi)容,以文章列表舉例,文章標(biāo)題、文章摘要、文章發(fā)布時(shí)間,這些都是元素,都是組成模塊的內(nèi)容,同時(shí)他們也是可以循環(huán)出現(xiàn)的。元素的類型可以是:文字、圖片、鏈接等等。
4. 產(chǎn)品結(jié)構(gòu)圖

定義:產(chǎn)品結(jié)構(gòu)圖是綜合展示產(chǎn)品信息和功能邏輯的圖表,簡(jiǎn)單說(shuō)產(chǎn)品結(jié)構(gòu)圖就是產(chǎn)品原型的簡(jiǎn)化表達(dá)。

作用:它能夠在前期的需求評(píng)審中或其他類似場(chǎng)景中作為產(chǎn)品原型的替代,因?yàn)楫a(chǎn)品結(jié)構(gòu)圖相較于產(chǎn)品原型,其實(shí)現(xiàn)成本低,能夠快速對(duì)產(chǎn)品功能結(jié)構(gòu)進(jìn)行增、刪、改操作,減少 PM 在這個(gè)過(guò)程中的實(shí)現(xiàn)成本。

5. 業(yè)務(wù)流程圖(泳道圖)

業(yè)務(wù)流程圖,不是操作流程圖也不是頁(yè)面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程,直接和業(yè)務(wù)掛鉤,可以說(shuō)是產(chǎn)品的核心流程。

作用

通過(guò)業(yè)務(wù)流程圖,鉆研關(guān)鍵事件的流程,分析為什么要這么做,探索出更深層次的問(wèn)題,從而對(duì)現(xiàn)有不合理的業(yè)務(wù)流程進(jìn)行重組優(yōu)化,進(jìn)而制定優(yōu)化方案,改進(jìn)現(xiàn)有流程;闡述在項(xiàng)目中各個(gè)角色是如何產(chǎn)生相關(guān)聯(lián)系的。

繪制規(guī)范/建議

  • 讓涉眾參與,不要閉門造車:與業(yè)務(wù)流程圖包含的各個(gè)參與角色代表適時(shí)確認(rèn)事情的原本流程。
  • 恰當(dāng)?shù)膶哟畏纸?,不要將所有的環(huán)節(jié)都鋪到一張圖上。
  • 逐漸深入,先抓枝干:切忌一開(kāi)始就陷入細(xì)節(jié)。
  • 流程一定有開(kāi)始和結(jié)束:切忌交出來(lái)的流程圖,讓讀者問(wèn):流程的開(kāi)始點(diǎn)是什么?用清晰的代表開(kāi)始和結(jié)束的符號(hào)來(lái)完成第一步和最后一 步。
  • 流程圖符號(hào)繪制排列順序:由上至下,由左至右。
  • 同一流程圖符號(hào)大小宜相對(duì)一致。
  • 編號(hào):這是讓溝通效率更高的優(yōu)化措施。當(dāng)你有了編號(hào)系統(tǒng),相當(dāng)于對(duì)你的流程圖都賦予了唯一識(shí)別身份證號(hào)。負(fù)責(zé)流程規(guī)則審核和優(yōu)化的部門能夠清楚在郵件里傳達(dá) H5.1 流程優(yōu)化,大家就更明確指的是什么。
  • 路徑符號(hào)應(yīng)避免互相交叉。
6. 任務(wù)流程圖

任務(wù)流程圖就是通過(guò)圖形化的表達(dá)形式,闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個(gè)功能時(shí),會(huì)產(chǎn)生的一系列操作和反饋的圖標(biāo)。

作用:基于業(yè)務(wù)流程,進(jìn)行任務(wù)流程梳理,闡述角色和程序發(fā)生交互的流程,你如何進(jìn)行操作,系統(tǒng)如何進(jìn)行反饋。

任務(wù)流程與需求文檔中的業(yè)務(wù)流程并不一樣。雖然它們都是流程圖,但業(yè)務(wù)流程更偏向于業(yè)務(wù)限制、后臺(tái)邏輯等,并不過(guò)分注重用戶的操作邏輯。而任務(wù)流程則需要關(guān)注用戶如何操作、界面如何反饋等,從而引導(dǎo)用戶完成用戶目標(biāo)。

7. 頁(yè)面流程圖

定義:指電子產(chǎn)品具體所呈現(xiàn)的頁(yè)面跳轉(zhuǎn)流程圖。其承載了業(yè)務(wù)流程圖所包含的業(yè)務(wù)流轉(zhuǎn)信息。

作用:

  • 交互設(shè)計(jì)/原型設(shè)計(jì)的底子,基本依據(jù)。
  • 站在用戶視角,代表用戶所有可能的操作過(guò)程,頁(yè)面流程能快速發(fā)現(xiàn)體驗(yàn)問(wèn)題。
  • 突出頁(yè)面元素與邏輯關(guān)系,提升原型設(shè)計(jì)的效率。

8. 線框圖/原型圖

定義:頁(yè)面的模塊、元素、人機(jī)交互的形式,利用線框描述的方法,將產(chǎn)品脫離皮膚狀態(tài)下更加具體跟生動(dòng)的進(jìn)行表達(dá)。

作用:用例闡釋者,用來(lái)了解用例的用戶界面;系統(tǒng)分析員,用來(lái)了解用戶界面如何影響系統(tǒng)分析;設(shè)計(jì)員,用來(lái)了解用戶界面如何施加影響及它對(duì)系統(tǒng)「內(nèi)部」的要求;類測(cè)試人員,用來(lái)制定測(cè)試計(jì)劃活動(dòng)。

構(gòu)成要素

  • 頁(yè)面標(biāo)題:即每一個(gè)頁(yè)面的對(duì)應(yīng)標(biāo)題,一般就是導(dǎo)航欄標(biāo)題。
  • 頁(yè)面內(nèi)容:以黑白為主,保證信息規(guī)整易讀。
  • 交互說(shuō)明:用標(biāo)簽將其對(duì)應(yīng)起來(lái),包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則等等。
  • 主流程線:只需要畫出主流程線即可,千萬(wàn)不可太多太雜,時(shí)刻考慮讀者的感受。
9. 線框圖/原型圖交互說(shuō)明的幾種類型

限制

包含范圍值、極限值等。

范圍值主要指數(shù)據(jù)的取值范圍。比如,當(dāng)你的界面上出現(xiàn)了下拉菜單、篩選按鈕、滑塊等控件時(shí),你必須標(biāo)注清楚它們的選擇范圍,否則開(kāi)發(fā)人員就不清楚該如何設(shè)定,如圖所示。

極限值主要指數(shù)據(jù)的顯示限制。比如,最多應(yīng)該顯示多少字?jǐn)?shù),過(guò)時(shí)如何顯示,是否折行等,如圖所示。

狀態(tài)

包含默認(rèn)狀態(tài)、常見(jiàn)狀態(tài)、特殊狀態(tài)等。

「默認(rèn)狀態(tài)」主要指默認(rèn)顯示的文字、數(shù)據(jù)、選項(xiàng)等。這些內(nèi)容需要注明,否則開(kāi)發(fā)人員可能難以意識(shí)到這是用戶填完的效果,還是默認(rèn)就有的。

「常見(jiàn)狀態(tài)」主要指針對(duì)某一個(gè)模塊,經(jīng)常遇到的一些狀態(tài)。這些狀態(tài)都需要在原型上表述出來(lái)。比如一個(gè)普通的積分模塊,一般會(huì)出現(xiàn) 3 種狀態(tài):未登錄狀態(tài)、登錄后未簽到狀態(tài)、登錄后已簽到狀態(tài),如圖所示。

「特殊狀態(tài)」一般指非正常情況下的樣式、文案、說(shuō)明等,如圖所示:

操作

包含常見(jiàn)操作、特殊操作、誤操作、手勢(shì)操作等。

「常見(jiàn)操作」主要指正常操作時(shí)得到的反饋狀態(tài)。比如一個(gè)普通的翻頁(yè)控件,在經(jīng)過(guò)不同操作后會(huì)立即出現(xiàn)如下的狀態(tài)。

「特殊操作」主要指一些極端情況下的操作。一般,用戶不會(huì)這么操作,但是一旦遇到極端情況,還是要想好應(yīng)對(duì)措施,因?yàn)閷?duì)于開(kāi)發(fā)人員來(lái)說(shuō),不管是正常的還是極端的操作情況,他們都要去編寫對(duì)應(yīng)的代碼。如下圖,是填寫用戶信息的例子,當(dāng)不寫交互說(shuō)明時(shí),開(kāi)放往往會(huì)遇到很多問(wèn)題:如果已經(jīng)勾選了 2 個(gè)人,再勾選第 3 個(gè)人,怎么辦?如果勾選了「張XX」,下面區(qū)塊中會(huì)相應(yīng)地出現(xiàn)張XX的信息,那么這時(shí)候允許修改張XX的身份證信息嗎?假如允許的話,修改后「張XX」還保持勾選狀態(tài)嗎?表單提交后要新增一個(gè)被保險(xiǎn)人信息嗎?若修改的是除身份證號(hào)碼以外的信息,「張XX」 還保持勾選狀態(tài)嗎?提交表單時(shí)是覆蓋原存儲(chǔ)信息嗎?若修改后出生日期、性別與身份證號(hào)碼不吻合怎么辦?等等。

面對(duì)各種復(fù)雜的情況,一方面要和開(kāi)發(fā)人員積極探討,看看有沒(méi)有其他的解決方法可以簡(jiǎn)化各種邏輯判斷;另一方面,在得出結(jié)論后,要把交互說(shuō)明寫清楚,避免出現(xiàn)讓開(kāi)發(fā)人員感到棘手的情況。

「誤操作」主要指當(dāng)用戶操作錯(cuò)誤時(shí)的情況。不過(guò)我們?cè)谠O(shè)計(jì)時(shí)要盡量避免有用戶犯錯(cuò)的機(jī)會(huì)。如圖所示,提示中已告訴用戶「庫(kù)存5件」,如果這個(gè)時(shí)候用戶在「數(shù)量」一欄中輸入「6」會(huì)怎么樣呢?系統(tǒng)會(huì)自動(dòng)幫用戶將其改為「5」省去用戶手動(dòng)修正的操作。

「手勢(shì)操作」主要指用戶使用移動(dòng)產(chǎn)品時(shí)的操作方式。常見(jiàn)的有點(diǎn)擊雙擊、長(zhǎng)按、捏、伸、滑動(dòng)等等。

反饋

用戶操作后得到的反饋動(dòng)作,包含提示、跳轉(zhuǎn)、動(dòng)畫等。

「提示」主要指操作后,系統(tǒng)反饋給用戶的文字說(shuō)明等,如圖所示。

「跳轉(zhuǎn)」主要指點(diǎn)擊某個(gè)鏈接后,頁(yè)面跳轉(zhuǎn)到哪里。設(shè)計(jì)師需要在原型上注明跳轉(zhuǎn)時(shí)是「原頁(yè)面刷新」還是「新頁(yè)面打開(kāi)」。如果是做手機(jī)應(yīng)用的話,需要注明跳轉(zhuǎn)時(shí)的轉(zhuǎn)場(chǎng)方式,如圖所示。

「動(dòng)畫」主要指用戶操作后,系統(tǒng)通過(guò)動(dòng)畫的方式反饋給用戶。動(dòng)畫給人的感覺(jué)比較友好、趣味性較強(qiáng),是非常常見(jiàn)的一種反饋形式。比如刪除某條信息,該信息以漸變消失的形式告訴用戶:這條信息已經(jīng)被刪除了。在移動(dòng)應(yīng)用中,動(dòng)畫反饋的形式更為常見(jiàn)。因此設(shè)計(jì)師一定要在原型上表述清楚動(dòng)畫的形式,必要時(shí)可以制作 domo 動(dòng)畫演示效果給開(kāi)發(fā)人員。

文章來(lái)源:站酷

日歷

鏈接

個(gè)人資料

存檔