當(dāng)我們在談 SaaS 的時(shí)候，在談什么？
● 什么是 SaaS
● SaaS 產(chǎn)品的優(yōu)缺點(diǎn)
● SaaS 產(chǎn)品的銷售模式
● SaaS 產(chǎn)品指標(biāo)
● SaaS 業(yè)務(wù)指標(biāo)
● SaaS 收入計(jì)算
一、什么是 SaaS
這個(gè)模式讓軟件變得和水電氣很相似，只需要每月繳納固定的費(fèi)用即可享受服務(wù)。
——馬克·貝尼奧夫（salesforce 創(chuàng)始人）
訂閱模式
SaaS（software as a service），軟件即服務(wù)，是一種軟件交付和銷售方式——訂閱許可模式。
它基于云， 運(yùn)行在遠(yuǎn)程服務(wù)器上，集中托管。因此不需要獨(dú)立部署甚至物理分發(fā)來完成交付和使用，這意味著用戶通過網(wǎng)絡(luò)即可使用。
例如，過去你使用 office，需要買一張光盤或者在線下載，輸入序列號（一次性付費(fèi)），進(jìn)行本地使用。如果要更新你需要重新購買和下載版本。而 SaaS 只需在線登錄即可使用服務(wù)，無需安裝和手動(dòng)升級，并根據(jù)使用時(shí)間付費(fèi)（按月/年）。
規(guī)?；蛷?fù)利
SaaS 采取訂閱付費(fèi)（按月/年）模式，良好留存的情況下，當(dāng)月/年的收入就是下個(gè)月/年的基礎(chǔ)，不斷累加下去（復(fù)合累積收益），形成良好的現(xiàn)金流。
也因此，SaaS 產(chǎn)品的收入具有了經(jīng)常性、可預(yù)測性的特點(diǎn)。這使得，企業(yè)可以根據(jù)現(xiàn)金流進(jìn)行規(guī)劃，甚至通過融資，提前獲取未來的收入，來進(jìn)行產(chǎn)品的增長和擴(kuò)張。
同時(shí)，對于訂閱者而言，無需購買硬件和中間件（前期成本），以及實(shí)施、維護(hù)、更新、運(yùn)維和管理成本（后期持續(xù)投入成本），只需要連接網(wǎng)絡(luò)即可使用，致使決策和投入成本得到了大幅降低。同時(shí)，后期可根據(jù)業(yè)務(wù)的發(fā)展，升級套餐或增加數(shù)量，這些優(yōu)勢致使 SaaS 軟件更容易擁有大量客戶，形成規(guī)模。
從復(fù)利性角度，SaaS 產(chǎn)品的估值是經(jīng)常性收入的若干倍。因此，SaaS 產(chǎn)品的改進(jìn)，不僅僅是提高下個(gè)月的或者長期的收入，而是整個(gè)企業(yè)的市值，可謂“一本萬利”。
開放和靈活
SaaS 會針對不同組織的訴求，提供多種套餐方案，通常在付錢前，用戶可以進(jìn)行免費(fèi)試用，從而更好的判斷是否滿足自身需求。
同時(shí)，SaaS 會開放自己的接口（API），方便與其他軟件集成，從而更好的滿足客戶業(yè)務(wù)。SaaS 廠商也會對接市場上跟產(chǎn)品業(yè)務(wù)相關(guān)的主流軟件，從而提供更加完善的解決方案。
例如，你使用 53KF 云客服進(jìn)行在線服務(wù)，同時(shí)打通 CRM 和訂單系統(tǒng)，以及百度、騰訊、頭條、360 等流量渠道，從而提供更好的客戶支持和流量轉(zhuǎn)化。
先進(jìn)生產(chǎn)力
SaaS 產(chǎn)品的發(fā)展，是不斷驗(yàn)證市場需求（PMF）、優(yōu)勝劣汰的過程，其成功就代表著某種先進(jìn)生產(chǎn)力（工具、流程或方法）。
從更大價(jià)值角度考慮，SaaS 賣的不僅僅只是工具，而是解決方案，融入到生產(chǎn)制造中去，協(xié)助客戶獲取成功。同時(shí)，對于廠商而言，也是更有價(jià)值、更有競爭力、更長久存在的經(jīng)營方式。
從市場而言，SaaS 是一種眾包模式，廠商覺得市場有大量的同類需求且長期存在，開發(fā)成產(chǎn)品進(jìn)行運(yùn)作。也真正有效的節(jié)省了同類訴求其社會資源的多次投入。
由于 SaaS 產(chǎn)品的有利可圖，促使市場的激烈競爭，也鍛造了廠商在其領(lǐng)域的專業(yè)化，提供更加有效的解決方案。
二、SaaS 產(chǎn)品的優(yōu)缺點(diǎn)
優(yōu)點(diǎn)/優(yōu)勢
● 易于訪問。SaaS 通過網(wǎng)絡(luò)提供服務(wù)，用戶可隨時(shí)訪問，且數(shù)據(jù)儲存在云端，實(shí)時(shí)同步。
● 免費(fèi)試用?？梢栽诟犊钋?，進(jìn)行免費(fèi)試用，進(jìn)行多家對比，選擇最合適的。
● 費(fèi)用便宜。使用訂閱模式，價(jià)格取決于用戶數(shù)量，訂閱者無需一次性支付大量費(fèi)用，降低前期購置成本。
● 支付靈活。按月/年進(jìn)行支付，此外，訂閱者可根據(jù)業(yè)務(wù)發(fā)展，增加或升級套餐，減少或降低套餐，甚至隨時(shí)停止使用。
● 良好支持。服務(wù)的好壞決定了客戶的訂閱，所以 SaaS 廠商會提供更加友好、高質(zhì)量的客戶服務(wù)。
● 開放集成。開放的接口（API）可以與其他產(chǎn)品進(jìn)行數(shù)據(jù)打通。
● 立即使用。無需安裝和部署，有網(wǎng)絡(luò)的地方即可使用。
● 無需維護(hù)。SaaS 統(tǒng)一運(yùn)行在廠商的服務(wù)器上，由廠商統(tǒng)一維護(hù)、更新。
缺點(diǎn)/風(fēng)險(xiǎn)
● 數(shù)據(jù)安全。所有數(shù)據(jù)儲存在云端和軟件廠商的服務(wù)器上，可能會引發(fā)泄露等安全問題。SaaS 軟件廠商，通常非常注重?cái)?shù)據(jù)的安全性，因?yàn)閿?shù)據(jù)泄露對于 SaaS 廠商的企業(yè)經(jīng)營而言是致命打擊。有些 SaaS 廠商也提供混合云服務(wù)，將敏感性數(shù)據(jù)儲存在客戶自己的服務(wù)器上。
● 網(wǎng)絡(luò)連接。沒有網(wǎng)絡(luò)，將無法使用 SaaS 產(chǎn)品。同時(shí)，網(wǎng)速深刻影響 SaaS 產(chǎn)品的運(yùn)行速度。
● 服務(wù)中斷。軟件廠商的硬件故障、網(wǎng)絡(luò)攻擊等造成的服務(wù)中斷，會致使產(chǎn)品無法使用。
三、SaaS 產(chǎn)品的銷售模式
通常來說，SaaS 的銷售模式分為三種：
1、非接觸（no-touch）：自助服務(wù)
1、低接觸（low-touch）：交易型銷售
2、高接觸（high-touch）：顧問式銷售
非接觸（no-touch）：自助服務(wù)
理想的 SaaS 銷售模式是客戶自助完成整個(gè)服務(wù)，沒有銷售人員的介入。
這需要產(chǎn)品簡單、價(jià)值明顯、支付容易甚至售價(jià)便宜。同時(shí)，產(chǎn)品本身提供良好的支持（操作引導(dǎo)、使用說明、幫助中心以及反饋入口），從而允許客戶自助完成服務(wù)。
非接觸的 SaaS 產(chǎn)品，通過省去銷售團(tuán)隊(duì)和支持性投入，采用低價(jià)，獲取大量客戶。同時(shí)，也因?yàn)閮r(jià)格便宜，無法支持銷售和支持性團(tuán)隊(duì)的組建。
例如，某 SaaS 產(chǎn)品，10 月/月，一個(gè)銷售人員的底薪 4000 元/月 + 五險(xiǎn)一金和辦公等費(fèi)用，那么至少需要銷售 600 個(gè)客戶才能抵消成本，這是很難完成的。
低接觸（low-touch）：交易型銷售
低接觸的 SaaS 產(chǎn)品，通常采用免費(fèi)試用的方式，進(jìn)行獲客。然后，銷售人員通過在線咨詢服務(wù)（53KF 云客服）或者電話進(jìn)行銷售轉(zhuǎn)化。
同時(shí)，產(chǎn)品在 onboarding 上需要投入大量的資源，從而降低用戶使用摩擦，使得用戶能夠成功的上手并獲取價(jià)值。
低接觸的 SaaS 產(chǎn)品通常采用按月訂閱的模式，其滿意度決定了持續(xù)收入。因此，低接觸的 SaaS 產(chǎn)品的銷售，需要同時(shí)兼任“客戶成功”的職能，提供良好的客戶支持，從而保證客戶持續(xù)的獲取產(chǎn)品價(jià)值而不斷續(xù)費(fèi)。
高接觸（high-touch）：顧問式銷售
高接觸的 SaaS，通常需要大量的人力投入，招標(biāo)、拜訪、出解決方案、商務(wù)談判等等。
高接觸的 SaaS 更多采用年度收費(fèi)的模式。強(qiáng)銷售決定了年收入的上限。因此，高接觸的 SaaS 產(chǎn)品幾乎是圍繞銷售團(tuán)隊(duì)的，市場營銷的主要工作是為銷售團(tuán)隊(duì)獲得足夠多且合格的銷售線索；產(chǎn)品、開發(fā)更多的配合銷售團(tuán)隊(duì)滿足客戶需求；客戶成功團(tuán)隊(duì)接收后期服務(wù)、產(chǎn)品支持、關(guān)系維護(hù)以保證客戶續(xù)費(fèi)。
從我個(gè)人接觸到的，低接觸、高接觸對于產(chǎn)品設(shè)計(jì)而言，在于主導(dǎo)權(quán)方面。
低接觸會考慮更多的價(jià)值面（通用的最大化價(jià)值），從而會拒接沒有未來（可能性和想象力）的單體訴求。
而高接觸，更多來自客戶傳導(dǎo)給銷售，銷售傳導(dǎo)給公司，公司傳導(dǎo)給產(chǎn)品的業(yè)績壓力。所以，高接觸一定是高單價(jià)，低單價(jià)的高接觸在一定層面掙得是辛苦錢，無競爭力的勞動(dòng)輸出，而不是方案輸出。
四、SaaS 產(chǎn)品指標(biāo)（SaaS Product Metrics）
PMF（Product-market fit） 產(chǎn)品市場匹配
SaaS 產(chǎn)品的早期，更多的是驗(yàn)證產(chǎn)品與市場的匹配（Product-market fit，PMF），直白的說就是生產(chǎn)的產(chǎn)品是否具有市場價(jià)值，是否有人愿意花錢購買。
所以 PMF 是不斷確認(rèn)這三點(diǎn)的過程：
1、目標(biāo)客戶是誰
2、目標(biāo)客戶的需求（痛點(diǎn)、爽點(diǎn)、癢點(diǎn)）
3、提供的解決方案是否能掙到錢
PMF 通過早期付費(fèi)客戶來確定有利可圖的細(xì)分市場。和他們不斷交談，收集反饋來迭代產(chǎn)品。
并根據(jù)付費(fèi)客戶特征，尋找客戶共性，從而更緊密的圍繞最佳客戶打造產(chǎn)品、從而更明確的找到目標(biāo)客戶接觸途徑、從而更有效的設(shè)計(jì)市場營銷宣傳策略。
NPS（net promoter score） 凈推薦值
通過 NPS 進(jìn)行客戶滿意度調(diào)查，衡量客戶體驗(yàn)，預(yù)測未來業(yè)務(wù)增長以及預(yù)防客戶流失風(fēng)險(xiǎn)。
NPS 采用 10 分制，讓客戶進(jìn)行打分。
打分者分類：
● 推薦者（dpromoter）：9-10 分，對服務(wù)非常滿意，愿意持續(xù)使用并向他人推薦，從而推動(dòng)產(chǎn)品增長
● 中立者（passive）：7-8 分，對服務(wù)滿意，但忠誠度低不會主動(dòng)對產(chǎn)品宣傳，容易受競爭對手影響
● 貶低者（detractor）：0-6 分，對服務(wù)不滿意，會對產(chǎn)品進(jìn)行負(fù)面評價(jià)和傳播，從而阻礙產(chǎn)品增長
NPS=(推薦者數(shù)/總樣本數(shù))×100%-(貶損者數(shù)/總樣本數(shù))×100%
例如，有 100 客戶打了分，結(jié)果如下：
● 10 分：15 人
● 9 分：20 人
● 8 分：20 人
● 7 分：20 人
● 6 分：10 人
● 5 分： 10 人
● 4 分：5 人
忽略打 7-8 分的人數(shù)，9-10 分人數(shù) 35，6 分及以下 25 人，NPS=35%-25%=+10%
如果 NPS 是負(fù)值，那么業(yè)務(wù)收入可能將會減少，因?yàn)榭蛻粼诓粩嗔魇?。正值?NPS，表明客戶滿意度高，未來具有可持續(xù)增長的潛力。
五、SaaS 業(yè)務(wù)指標(biāo)（SaaS Sales Metrics）
單位經(jīng)濟(jì)收益：CAC：LTV
SaaS 產(chǎn)品的成功與 PMF 高度匹配之外，還需要一個(gè)切實(shí)可行的商業(yè)模式，即客戶價(jià)值（LTV）大于獲取成本（CAC），健康的增長意味有效平衡兩者，從而確定這是一個(gè)有利可圖的市場。
CAC（Customer Acquisition Cost）
獲得客戶的平均成本。
CAC= 銷售和營銷費(fèi)用之和 ÷ 新增客戶數(shù)量
LTV（Customer Lifetime Value）
客戶生命周期內(nèi)（從注冊到流失）平均總價(jià)值。
LTV=（ARPA*毛利率%）÷ 客戶流失率
ROI（Return on investment）
客戶獲取的投資回報(bào)率。
ROI=LTV：CAC
Months to recover CAC
CAC 通過 MRR 收回的平均月份。
Months to recover CAC=CAC÷（ARPA*毛利率%）
ARPA：每個(gè)帳戶的平均收入，你的 MRR 除以客戶數(shù)量，即所有客戶的平均 MRR
毛利率=[（營收-成本）÷ 營收]×100%
David 在《SaaS Metrics 2.0–衡量和改進(jìn)重要內(nèi)容的指南》一文中指出，LTV：CAC ≥3，Months to recover CAC ≤12 月，通常被認(rèn)為是良好的 SaaS 項(xiàng)目。同時(shí)也指出，很多健康 SaaS 在初期可能并不符合，但會在一段時(shí)間內(nèi)通過改善業(yè)務(wù)逐漸接近這兩條準(zhǔn)則。
經(jīng)常性收入：MRR 和 ARR
經(jīng)常性收入（Recurring Revenue）是未來持續(xù)可獲得的收入，就 SaaS 而言，經(jīng)常性收入來自客戶的訂閱，具有穩(wěn)定、可預(yù)測、高度確定的特點(diǎn)。
在 SaaS 業(yè)務(wù)中通常采用按月或按年合同：
● 主要按月合同及少量的年度合同，采用 MRR（Month Recurring Revenue 月度經(jīng)常性收入）。MRR 用于衡量每月訂閱收入，如果有一些年度訂閱，除以 12，再分?jǐn)偟矫吭聛碛?jì)算 MRR
● 按年合同及少量的多年合同 ，采用 ARR（Annual Recurring Revenue 年度經(jīng)常性收入）。多年合同除以合同年限，再分?jǐn)偟矫磕陙碛?jì)算 ARR
在 MRR/ARR 統(tǒng)計(jì)中，并不會計(jì)算一次性的收入。例如，定制功能費(fèi)用。
經(jīng)常性收入會不斷推動(dòng)這 SaaS 廠商的發(fā)展，也是驗(yàn)證產(chǎn)品是否具有可持續(xù)增長的指標(biāo)。
流失（Churn）
SaaS 是訂閱模式，在高留存率下，隨著時(shí)間的推移，意味著更多的客戶、更多的訂閱，持續(xù)收入不斷復(fù)合累積。所以，流失率對 SaaS 廠商是非常重要的指標(biāo)。
在 SaaS 中有兩種計(jì)算流失的角度：
● 客戶流失（Customer Churn），取消訂閱的客戶數(shù)量
● 收入流失（MRR/ARR Churn），取消訂閱的收入損失
那為什么會有兩種計(jì)算方式？
例如，53KF 云客服的業(yè)務(wù)，是按照坐席收費(fèi)，50 元/月。假如我們有 200 個(gè)客戶，100 個(gè)大客戶（每個(gè)大客戶擁有 100 個(gè)坐席），100 個(gè)小客戶（每個(gè)小客戶擁有 10 個(gè)坐席）。
當(dāng)月，我們流失了 10 個(gè)客戶，那么月客戶流失率為 5％。
如果，流失的客戶中，有 8 個(gè)是大客戶，2 個(gè)是小客戶，那么 MRR 流失 45000 元，MRR 流失率為 7.45%。
如果，流失的客戶中，有 2 個(gè)是大客戶，8 個(gè)是小客戶，那么 MRR 流失 14000 元，MRR 流失率為 2.55%。
所以，通過不同的計(jì)算方式，使得我們更加全面、準(zhǔn)確的了解到業(yè)務(wù)中所發(fā)生的事情。
Customer Churn Rate
客戶流失率，客戶取消訂閱的比率。
Customer Churn Rate= 期間流失客戶數(shù) ÷ 期初客戶數(shù)
MRR Churn Rate
月度經(jīng)常性收入流失率，通過降級、取消而損失的 MRR 比率
MRR Churn Rate= 期間流失 MRR ÷ 期初 MRR
Net MRR/ARR Churn
凈 MRR/ARR 流失。
Net MRR/ARR＝期間新增 MRR/ARR 之和 - 期間流失和收縮 MRR/ARR 之和
Net MRR/ARR Churn Rate
凈 MRR/ARR 流失率。
Net MRR/ARR Churn Rate=（期間流失和收縮 MRR/ARR 之和-期間新增 MRR/ARR 之和）÷ 期初 MRR/ARR
當(dāng)收入增長超過流失的損失，在這種情況下，凈 MRR/ARR 流失則為負(fù)值，稱之為負(fù)流失（Negative Churn），表現(xiàn)在財(cái)務(wù)表上的就是收入的不斷增長。
記住，在計(jì)算流失時(shí)，總是在特定的時(shí)間范圍內(nèi)，例如上月客戶流失率是 5%。
六、SaaS 收入計(jì)算
確認(rèn)收入（revenue recognition）
對于 SaaS 而言，確認(rèn)收入是非常重要的財(cái)務(wù)知識，確認(rèn)收入與合同金額、收款金額有很大的區(qū)別。
例如，按年收費(fèi)的 SaaS 產(chǎn)品，年費(fèi) 1200 元，那么：
● 合同金額是 1200 元
● 客戶一次性支付年費(fèi)，收款金額是 1200 元
● 在合同期間的每個(gè)月的確認(rèn)收入則為 100 元。剩下的 1100 元?jiǎng)t為遞延收益
● 從企業(yè)資產(chǎn)負(fù)債表而言，剩下的 1100 元均為負(fù)債。因?yàn)榉?wù)還未完成，還需要投入 11 個(gè)月資源履行服務(wù)義務(wù)，甚至合同可能發(fā)生中止等情況，所以還不是確定的收入，需要通過后期的確認(rèn)收入（損益表中的利潤）來減少資產(chǎn)負(fù)債表上的負(fù)債
* 遞延收益：指尚待確認(rèn)的收入或收益。凡在期間內(nèi)完成的服務(wù)所產(chǎn)生的收入，則為確認(rèn)收入；反之，即使款項(xiàng)提前預(yù)收，但未在期間內(nèi)完成服務(wù)，則不作為確認(rèn)收入。
* 資產(chǎn)負(fù)債表：反映企業(yè)經(jīng)營在一定時(shí)期內(nèi)（月份、年度）財(cái)務(wù)狀況（兩個(gè)方面，一方資產(chǎn)、另一方負(fù)債和權(quán)益）的報(bào)表。
* 損益表：反映企業(yè)經(jīng)營在一定時(shí)期內(nèi)（月份、年度）利潤（收入）或虧損（支出）的報(bào)表
總結(jié)
通過梳理總結(jié)，談了談 SaaS，這是在我當(dāng)前知識體系范圍內(nèi)的總結(jié)，SaaS 是的龐大的體系，關(guān)乎個(gè)個(gè)層面：產(chǎn)品、營銷、銷售、客戶成功、增長、定價(jià)、渠道等等。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
如何通過體驗(yàn)設(shè)計(jì)賦能產(chǎn)品增長，我這里為大家提供2個(gè)方法。
AARRR 模型對應(yīng)著用戶生命周期的 5 個(gè)階段，檢驗(yàn)產(chǎn)品能否有效增長。
案例1: 興趣選擇頁優(yōu)化
設(shè)計(jì)助力增長的一個(gè)有效途徑: 提高界面的轉(zhuǎn)化效率。
1.2 案例：運(yùn)營活動(dòng)的設(shè)計(jì)
設(shè)計(jì)助力: 設(shè)計(jì)簡單有效的運(yùn)營活動(dòng)，快速提升特定的數(shù)據(jù)指標(biāo)。
運(yùn)營活動(dòng)設(shè)計(jì)目標(biāo)：簡單、有效
提升價(jià)值比提高轉(zhuǎn)化更難，需要滿足用戶的功能需求、體驗(yàn)需求、內(nèi)容需求、關(guān)系需求。
2.1 用研和設(shè)計(jì)敏捷配合
2.2 案例: 閱讀書城改版 (用研內(nèi)容見下半場分享筆記)
通過設(shè)計(jì)賦能產(chǎn)品增長有兩種方法:
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
早些時(shí)候，在medium上看到了政府UX設(shè)計(jì)師，Cyd Harrell所寫的以”尊重用戶“為主題的文章，里面提到了尊重用戶的時(shí)間，尊重用戶的能力以及尊重用戶價(jià)值。
閱讀后使我腦海中一個(gè)一直以來都若隱若現(xiàn)的想法逐漸露出一角，從那開始我漸漸關(guān)注用戶、時(shí)間、掌控力、注意力這一組詞語所組成的一個(gè)模糊的概念，這個(gè)概念的核心就是產(chǎn)品如何侵?jǐn)_用戶，過度商業(yè)化然后導(dǎo)致用戶的信息超載情況。
這個(gè)觀點(diǎn)一開始還是很模糊，我并沒有獲得足夠的信息支持我闡述清楚這個(gè)主題，直到后面，我看到NNG（尼爾森諾曼集團(tuán)官網(wǎng)）的一篇關(guān)于”注意力經(jīng)濟(jì)“的文章，終于把這一系列元素組織好，產(chǎn)出了今天這篇文章。（本來以為理清這一個(gè)主題要很久）
首先我要提出一個(gè)詞語，"wicked problems”。在我學(xué)習(xí)國外的設(shè)計(jì)思維課程時(shí)，在前面幾個(gè)章節(jié)中有提到一個(gè)“wicked problems”即棘手的問題這樣一個(gè)概念，也可以翻譯為抗解問題。指的是極為復(fù)雜，嚴(yán)重，上升到社會層面及人類層面的問題。如環(huán)境污染，農(nóng)民工問題，教育問題等。而設(shè)計(jì)思維被發(fā)明出來一個(gè)重要目的或者說任務(wù)就是用于解決一些這樣的問題，用系統(tǒng)思維和創(chuàng)新性的視角來挖掘潛藏的核心問題，以及探索對應(yīng)的最佳解決方案。
我提到這一點(diǎn)不是要對比國內(nèi)國外環(huán)境，也不是要贊美國外的設(shè)計(jì)氛圍，而是想提醒大家，我們設(shè)計(jì)師可以做更多，可以想得更多，可以用設(shè)計(jì)思維，結(jié)合理性和創(chuàng)意去解決很多問題。我一直以來翻譯一些國外的系統(tǒng)理論，設(shè)計(jì)方法論，也是想用自己的力量讓大家了解更多設(shè)計(jì)的可能，除了眼前的屏幕，我們的視野應(yīng)該放的更長更遠(yuǎn)，去思考我們解決的問題，以及我們所設(shè)計(jì)的方案可能會衍生的一系列問題。
我接下來要講的，就是在當(dāng)下環(huán)境下一個(gè)很關(guān)鍵的問題，用戶注意力。
一：用戶的注意力
注意力成為人類的限制因素
大家回憶一下，每天清晨，都有哪些內(nèi)容吸引你的注意力？了解時(shí)間、看一下微信未讀消息、早報(bào)新聞等等等等。到了公司食堂，你看一下周圍有多少人一邊吃東西一遍盯著手機(jī)屏幕？在去工位的路上，又有多少人低頭玩著手機(jī)走路？這還沒完，到了工位上，打開電腦，接收郵件，查看工作事項(xiàng)；打開網(wǎng)站閱讀一些學(xué)習(xí)內(nèi)容；微信突然跳出來一個(gè)紅點(diǎn)，打開網(wǎng)易云音樂挑選一首歌，選著選著看到群聊里一條新鮮軼事，然后騰訊新聞彈出來，忍不住又去點(diǎn)開閱讀下。
沒錯(cuò)，這是我的日常生活，我是一個(gè)選擇恐懼癥患者，但我卻總是忍不住把自己置于一個(gè)同時(shí)處理超多個(gè)事項(xiàng)的情況下。讀這篇文章的你也應(yīng)該一樣。我曾經(jīng)很多次想，這種情況應(yīng)該怪我自己嗎？還是別的什么問題？
OK，這確實(shí)并不單純是人的問題，還有產(chǎn)品、服務(wù)的問題。注意力是當(dāng)下時(shí)代最為寶貴的資源，而產(chǎn)品一直在爭搶的所謂的時(shí)間，也只是注意力的一部分而已。在信息大爆炸甚至工業(yè)革命之前，人類的大部分歷史中，知識、信息都是很寶貴的資源，只有很少部分人能夠閱讀，能夠獲取一定的信息。但在信息大爆炸的今天，我們可以輕易獲得大部分我們想了解的或不想了解的信息，只需要?jiǎng)觿?dòng)手指，只需要睜開眼睛。
我們獲得了巨量的信息，但我們的信息處理能力并沒有產(chǎn)生什么變化，是的我們現(xiàn)在處理信息的總量，和幾百年前的人類祖先并沒有什么區(qū)別。因此，幾百年后的今天，信息資源已經(jīng)不是限制因素了，注意力才是，用有限的注意力，去獲取無限的信息，結(jié)果顯而易見。你在瀏覽文章的時(shí)候是沒有辦法看動(dòng)漫的，當(dāng)然你在作圖時(shí)也無法瀏覽新聞。
分心導(dǎo)致低效
到這里，大家應(yīng)該都清楚，人類的注意力有限，我們無法同時(shí)做很多事情，然而很多時(shí)候，我們卻在同時(shí)進(jìn)行很多事情，因?yàn)橐淮涡酝瓿啥鄠€(gè)任務(wù)，對于我們有著很強(qiáng)的吸引力，然而結(jié)果往往是錯(cuò)誤百出或者是更低的效率。
在《簡約至上，交互設(shè)計(jì)四策略》中專門提到了分心對用戶的影響，有時(shí)候，分心不是用戶自發(fā)的，而是來自產(chǎn)品的錯(cuò)誤引導(dǎo)。產(chǎn)品界面中過多干擾元素，或者誘導(dǎo)元素導(dǎo)致用戶經(jīng)常性的轉(zhuǎn)移注意力，這些東西讓原本簡單的任務(wù)變得異常復(fù)雜。比如閱讀。
如果你經(jīng)常在medium閱讀文章，你會發(fā)現(xiàn)一類文章讀起來效率很低，且經(jīng)常容易令你分心乃至焦慮。那就是在文內(nèi)插入各種鏈接的文章。每一個(gè)鏈接仿佛都在勾引你，快來看一下吧，這里有好東西，然后讀者就打開了一個(gè)、兩個(gè)乃至四五個(gè)網(wǎng)頁，因此讀一篇文章附送了五篇文章，那么讀者需要把這些附加內(nèi)容瀏覽完畢再重新開始閱讀最初的那篇文章嗎？當(dāng)然有些人會憑借頑強(qiáng)的毅力（或者根本不感興趣）跳過那些鏈接并閱讀完整篇文章，那你很厲害，但是大部分人都做不到，尤其是設(shè)計(jì)師，因?yàn)槲覀儗χR始終保持饑渴。
（寫到這里微信突然彈出來幾條消息，然后youtube推了一個(gè)視頻，最后我又想起來長安十二時(shí)辰最后一集我并沒有看，再次回來已經(jīng)是十分鐘后了，這還是我強(qiáng)忍住去看視頻和電視劇的結(jié)果）
這些鏈接分明可以放在文章的結(jié)尾，感興趣的人自然會去擇優(yōu)而讀。除了文內(nèi)鏈接，文章左右兩側(cè)的廣告、彈窗以各種形式挑戰(zhàn)你的注意力，瞥一眼你就會浪費(fèi)幾秒，沒忍住點(diǎn)進(jìn)去則會浪費(fèi)更多時(shí)間，是的我是誰我在哪我在干什么？我只是想閱讀一篇文章而已，所以為什么現(xiàn)在逛淘寶。
各種設(shè)備也在不斷地使我們分心，不僅限于屏幕，還包括聽覺觸覺，如手機(jī)的語音提醒、震動(dòng)。持續(xù)的打斷甚至?xí)谷藗兩习a，可能下一個(gè)消息很重要，我必須看一下，于是你又拿起手機(jī)解鎖然后打開微信，你看個(gè)錘子肯定又是騰訊新聞。不停的打斷會影響我們的正常任務(wù)，可能是學(xué)習(xí)也可能是工作。最終我們可能需要花費(fèi)更多的時(shí)間來完成計(jì)劃事項(xiàng)，且完成的質(zhì)量堪憂。
PS：打游戲應(yīng)該很少分心
在現(xiàn)實(shí)中，人類不會這樣互相打斷，如果我們想要請求某人幫忙，會根據(jù)對方所處的場景狀態(tài)來決定是否打斷對方，也會考慮事件的緊急程度。如果事情很重要比如你的手機(jī)在網(wǎng)吧被偷了（重要），而你在玩游戲（沒那么重要），那我們會選擇打斷對方。
而機(jī)器的問題在于，它不會以人的方式思考，我們設(shè)計(jì)師經(jīng)常提到要以人為中心，但機(jī)器本身只會執(zhí)行指令，企業(yè)的指令，因此不管信息是否重要，它會按照設(shè)定推送給你。事實(shí)上，社交應(yīng)用及各種產(chǎn)品都應(yīng)該區(qū)分信息的重要程度，而不是各種信息不分主次不分場景一股腦推送出來。
我們都知道福格模型B=MAT，想要促成結(jié)果需要對應(yīng)的需求，更確切的說是場景+時(shí)機(jī)+需求。當(dāng)我在公司門口，打開滴滴準(zhǔn)備打車時(shí)自動(dòng)彈出了家的地址，我只需要點(diǎn)擊就能填寫完畢而沒必要重復(fù)輸入，這是一個(gè)很流暢且體驗(yàn)良好的提醒。
而我這樣一個(gè)輕度視頻用戶，偶然打開愛奇藝瞬間收到40多條內(nèi)容推送，要不是因?yàn)殚_了會員我會當(dāng)場卸載??！
分心也是拖延癥的一個(gè)罪魁禍?zhǔn)?，我們拖延的一個(gè)重要原因是注意力被其他事物所吸引，有可能是游戲，有可能是新聞資訊。大部分人都不能按照自己的最初計(jì)劃完美及時(shí)的去完成?？偸且煌显偻?，可能并不是我們想拖延，而是有太多內(nèi)容在吸引我們的注意力。凱利教授的《自控力》中就提到所有人想要擁有自控力，都需要知道我想要、我不想和我要做這三部分內(nèi)容。以便抵制來自生活中的各種吸引力或者說誘惑。
二：注意力經(jīng)濟(jì)的崛起
1997年，Michael H. Goldhaber寫道，“全球經(jīng)濟(jì)正在從物質(zhì)經(jīng)濟(jì)轉(zhuǎn)向基于人類注意力的經(jīng)濟(jì)”。許多服務(wù)都是免費(fèi)提供的，而用戶為服務(wù)需要花費(fèi)的貨幣就是注意力。用戶不用付費(fèi)，只需要支付注意力。
產(chǎn)品爭搶用戶注意力
注意力經(jīng)濟(jì)的最初概念竟然從1997年就被提出，我看到時(shí)相當(dāng)震驚，在二十多年前，企業(yè)就開始低效的使用用戶注意力來變現(xiàn)，國內(nèi)是什么時(shí)候開始的呢，答案應(yīng)該是從爭搶用戶使用時(shí)長的競爭策略開始，占領(lǐng)用戶時(shí)間就等于占領(lǐng)用戶注意力。
我們已經(jīng)沉溺于爭搶注意力策略這個(gè)泥沼中，從各種花費(fèi)巨量時(shí)間的游戲如王者榮耀，到風(fēng)靡至今的各類直播平臺，再到時(shí)下流行的短視頻，我們在不停的花費(fèi)時(shí)間、時(shí)間、時(shí)間，注意力被無意識的“竊取”。用戶不需要花費(fèi)一分錢也可以正常娛樂，而你的參與，你的注意力的參與卻在幫助企業(yè)不斷掙錢。
如果你還不清楚自己是如何被爭搶乃至竊取注意力的話，你可以回憶一下你每天接收到各種推送信息，除了各類應(yīng)用的Push，還有短信、電話、郵件等等。推送提醒你關(guān)注的主播上線了，提醒你的內(nèi)容新聞，提醒你一切可以誘惑你的信息。購房后銷售人員信誓旦旦說不會泄露業(yè)主信息，交房前一年就有各種裝修家居的短信和電話轟炸。淘寶購物沒有一周就各種五星好評的消息請求。這則是另一種層面的竊取用戶注意力了。
如果給你推送的是你想要的內(nèi)容你是應(yīng)該開心呢還是擔(dān)憂呢。因?yàn)槟阌袝r(shí)也會想，關(guān)于你的信息是不是已經(jīng)被泄露到處都是。當(dāng)然并不都是惡意泄露，隨著技術(shù)進(jìn)步我們有了大數(shù)據(jù)技術(shù)，但精準(zhǔn)推薦雖好，用戶隱私是否也應(yīng)該劃入考慮范圍？
畸形的注意力變現(xiàn)策略
我們在上面提到了大數(shù)據(jù)、智能推薦廣告技術(shù)的負(fù)面影響，即侵犯用戶隱私，隨著用戶對這一技術(shù)的感知越發(fā)明顯，抱怨聲會接踵而來，企業(yè)不得不考慮傾聽用戶的聲音，將保護(hù)用戶隱私納入考慮范圍，當(dāng)然這應(yīng)當(dāng)是個(gè)可選項(xiàng)，那些有意識想要擺脫這種隱私暴露問題的用戶，可以選擇關(guān)閉這項(xiàng)技術(shù)在它個(gè)人生活中的應(yīng)用，而并不介意隱私問題的用戶可以繼續(xù)享受智能推薦帶來的便利。
我們雖然一再強(qiáng)調(diào)它導(dǎo)致的隱私問題，但事實(shí)上智能推薦利用現(xiàn)代技術(shù)實(shí)現(xiàn)了精準(zhǔn)投放廣告這一的廣告變現(xiàn)形式，相比其余的商業(yè)模式要委婉的多。
廣告的本意即廣而告之，其目的在于將產(chǎn)品推薦給有需要的用戶，廣告本身是沒有任何貶義的詞匯，但在信息爆炸的當(dāng)下，廣告對于用戶甚至對于廣告投放者本身都變成了一個(gè)帶有貶義的詞，產(chǎn)生這種意識變化的原因就是當(dāng)下廣告的性質(zhì)產(chǎn)生了畸變，廣告已經(jīng)不是一個(gè)雙贏的推薦行為，而是一個(gè)過于干擾用戶的打擾行為。
更多情況下，廣告投放者傾向于用巨量的投放數(shù)量來換取一定比率的轉(zhuǎn)化，這是一種傳統(tǒng)低效的廣告變現(xiàn)手段，當(dāng)然平臺獲得實(shí)實(shí)在在的收益，建立在展示付費(fèi)模式下的廣告不用考慮最終轉(zhuǎn)化率，只需要無腦投放，這導(dǎo)致了廣告信息的總量產(chǎn)生了巨幅的提升。除此之外，更多廣告是建立在吸引注意力這一誘導(dǎo)行為上，更鮮艷的顏色，夸張的動(dòng)效，讓人血脈噴張的文案，H內(nèi)容擦邊球，不論用戶當(dāng)前在執(zhí)行什么任務(wù)，只要他不是瞎子都會或多或少被轉(zhuǎn)移注意力乃至引導(dǎo)到廣告詳情頁面。
除此之外，我們還會利用設(shè)計(jì)思維，預(yù)測用戶行為，根據(jù)用戶習(xí)慣主動(dòng)將干擾性內(nèi)容放置在用戶的核心路徑，從而產(chǎn)生一些誤操作的假象，比如將關(guān)閉按鈕做的微小，比如將banner無限接近按鈕從而引發(fā)誤操作。結(jié)果就是用戶的任務(wù)中斷，不得不重復(fù)的返回修正操作，這樣持續(xù)性的犯錯(cuò)使用戶困擾且失落，卻不知道這是設(shè)計(jì)人員的策略。吸引用戶注意力的變現(xiàn)策略大多建立在犧牲用戶體驗(yàn)的基礎(chǔ)上，我們都能意識到這不是一種可持續(xù)發(fā)展的收益模式，它容易侵害用戶價(jià)值，培養(yǎng)低質(zhì)量用戶，且會衍生一系列其他問題。
目前這種盜竊用戶注意力的變現(xiàn)性質(zhì)主要有以下幾個(gè)方式。
1.引人注目的動(dòng)畫吸引注意力
2.擁擠不堪的界面設(shè)計(jì)，一次性顯示大量信息，期望一定比率的內(nèi)容可以吸引一定數(shù)3量的用戶
3.強(qiáng)迫用戶聚焦的廣告行為，如不可關(guān)閉的視頻
4.網(wǎng)站或應(yīng)用頻繁發(fā)送服務(wù)通知和廣告通知期望用戶重新參與進(jìn)產(chǎn)品
三：注意力爭奪的負(fù)面結(jié)果
低效的廣告效率
還是那個(gè)簡單的邏輯，用戶的注意力有限，同時(shí)各種產(chǎn)品和服務(wù)的廣告通知鋪天蓋地而來，且數(shù)量不斷增加，不僅引用戶反感，更造成廣告?zhèn)鬟_(dá)效率低下的現(xiàn)狀，無論是PC還是移動(dòng)端，人口紅利已經(jīng)消耗殆盡，用戶自身更是形成抗拒廣告的習(xí)慣，這種情況下，繼續(xù)延續(xù)傳統(tǒng)的粗放型廣告投放收益只會持續(xù)下降，不同的廣告商盲目的放量，最終造成的結(jié)果是用戶全部忽略。
用戶事實(shí)上都比較懶，能不去做任何行動(dòng)，就會一直保持原狀。例如郵箱訂閱了幾十家內(nèi)容，每天都會收到數(shù)十封推廣郵件，用戶或許并不會因?yàn)閰挓┒c(diǎn)開每封郵件逐一退訂，但他會直接忽略所有內(nèi)容，不論如何，造成的結(jié)果就是廣告低效乃至無效。與之相反，我們看一個(gè)正面例子，Youtube的廣告模式。Youtube提供一個(gè)五秒的試看期限，超過五秒后用戶可以選擇繼續(xù)看廣告或者直接跳過去瀏覽心儀的內(nèi)容。若是用戶對廣告感興趣，那他可以接受廣告并轉(zhuǎn)化為對應(yīng)的消費(fèi)者，廣告投放者和消費(fèi)者是一個(gè)雙贏的狀態(tài)，這樣不僅考慮了企業(yè)利益，更考慮了用戶價(jià)值，尊重用戶的選擇，使內(nèi)容可控。
再來看國內(nèi)的視頻平臺，體貼的為大家提供了一個(gè)關(guān)閉聲音的按鈕，我不否認(rèn)這也是一個(gè)提升體驗(yàn)的地方，因?yàn)榇蟛糠钟脩舳紝﹂L達(dá)一分鐘的廣告并不感冒，因此經(jīng)常性的操作是關(guān)閉聲音，然后在這一分鐘去做一些其他的事情。這種情況下，廣告的作用并沒有發(fā)揮，而廣告投放者仍然要為之付出對應(yīng)的費(fèi)用，因?yàn)閺V告確實(shí)被展示了，只是用戶沒有看。從用戶的視角，則是我對這則廣告（對應(yīng)的商品）并不感興趣，但我不得不為之浪費(fèi)一分鐘。
當(dāng)然這就是國內(nèi)產(chǎn)品的現(xiàn)狀，當(dāng)其他人都在使用粗放的競爭手段，你就很難與其劃分界限。且企業(yè)往往會考慮到品牌曝光等策略，考慮長遠(yuǎn)投入而不是眼下的轉(zhuǎn)化，那就是另一種情況了。
廣告盲現(xiàn)象
廣告盲現(xiàn)象是由廣告現(xiàn)狀培養(yǎng)出來的用戶習(xí)慣，指的是人們會自動(dòng)忽略一些常用的廣告投放位置的內(nèi)容，自動(dòng)忽略看起來像是廣告的內(nèi)容。這種現(xiàn)象很廣泛和常見，比如百度搜索頂部的前幾條，帶有廣告標(biāo)簽的搜索結(jié)果，用戶一般并不會去點(diǎn)擊，而是選擇下拉瀏覽其他選項(xiàng)，另外在PC兩側(cè)的信息往往容易被忽略，因?yàn)檫@里也是廣告經(jīng)常投放的位置。
若手機(jī)同時(shí)出現(xiàn)三行以上的推送，用戶往往不會仔細(xì)閱讀而是直接清空。甚至連最吸引注意力的彈窗廣告也能第一時(shí)間被識別并關(guān)掉，在彈窗還未加載完畢前。
廣告通常為了爭搶用戶注意力而被刻意做的不一樣，但用戶忍耐力比想象中更好，這個(gè)情況可以參考適應(yīng)性偏見原則，且用戶主動(dòng)屏蔽信息也越來越成為習(xí)慣性行為，尤其是那些看起來花哨、內(nèi)容豐富理應(yīng)很吸引人的banner，正因如此吸引人，用戶能快速分辨并將其定義為廣告然后自動(dòng)忽略，例如我們在線閱讀小說是中間插入的banner，往往只會短暫打斷我們的閱讀進(jìn)程。
與medium的閱讀體驗(yàn)不同，medium的文內(nèi)鏈接更多的是吸引力，用戶能意識到這些鏈接是更具吸引力的內(nèi)容，且是正向的有益的（往往屬于知識性質(zhì)的優(yōu)質(zhì)內(nèi)容），而我們在線閱讀小說中插入的廣告則會使用戶形成誤解——推銷類廣告，沒有任何意義。因此用戶會立即忽略。我們都了解一個(gè)詞即耐受性，事實(shí)上用戶往往比他自己了解的更加能夠忍受一些東西。雖然從商業(yè)角度考慮，各種產(chǎn)品服務(wù)都在爭搶用戶注意力，從而不斷的打斷用戶的工作、思考、學(xué)習(xí)，但人們已經(jīng)逐漸掌握了一定竅門，來主動(dòng)屏蔽一些無益的廣告內(nèi)容，乃至形成廣告盲的行為習(xí)慣。
針對這種情況了，設(shè)計(jì)人員和廣告投放者應(yīng)該怎么辦呢？你可以選擇加大投放數(shù)量，這種做法必然會很快見效，但不是長遠(yuǎn)之計(jì)，更佳的方案是考慮用戶場景、習(xí)慣，通過洞察用戶來提高廣告投放的效率質(zhì)量，智能推薦是一種做法，針對自家產(chǎn)品制定個(gè)性化方案也是一種方法，創(chuàng)意推動(dòng)廣告自傳播也是一種手法，總之，傳統(tǒng)買量放量的投放方式應(yīng)該重新被考慮，如何雙贏來回歸用戶價(jià)值是每個(gè)企業(yè)應(yīng)該認(rèn)真考慮的問題。
我把企業(yè)圍繞注意力經(jīng)濟(jì)不斷爭搶用戶注意力的現(xiàn)象定義為一場戰(zhàn)爭，企業(yè)與企業(yè)，企業(yè)與用戶都被編織在這張羅網(wǎng)中。在這場戰(zhàn)爭中用戶是一個(gè)什么狀態(tài)，我的回答是被掌控、被投入以及被摧毀。
四：被控制的用戶
產(chǎn)品掌控用戶而不是用戶掌控產(chǎn)品
這個(gè)時(shí)代，人仿佛是手機(jī)的奴隸。新技術(shù)的發(fā)展往往會給一批人帶來恐懼，因?yàn)樗匆馕吨叩男?，更方便的生活，也意味著過去的消逝甚至迷失。從工業(yè)化在到信息化，變化一直在發(fā)生，我們迎接新生事物的同時(shí)也迎接來一批同樣數(shù)量的問題。
我們實(shí)際上并沒有被手機(jī)掌控，而是被手機(jī)里的一系列產(chǎn)品所掌控。當(dāng)然，你不會被微信閱讀這樣的產(chǎn)品掌控，大部分人都不會閱讀成癮。但與之對應(yīng)的，社交成癮、游戲成癮、八卦成癮等現(xiàn)象卻屢見不鮮。我們生活在大文娛時(shí)代，來自各方面的欲望、誘惑在不斷地吸引注意力，不斷的打斷正常的任務(wù)目標(biāo)。我們內(nèi)心深處想要學(xué)習(xí)練習(xí)，想要更好的成績，想要更好的工作，但這些從社會價(jià)值和個(gè)人價(jià)值角度更加正向的目標(biāo)卻往往被各種娛樂向產(chǎn)品打斷，且往往過度沉溺，因?yàn)楹苌儆挟a(chǎn)品會提醒你已經(jīng)花了多少時(shí)間，他們只想占領(lǐng)你所有的注意力，然后把注意力貨幣轉(zhuǎn)化為自己的收益。
“慣性”導(dǎo)致的持續(xù)投入
關(guān)于用戶持續(xù)投入進(jìn)一個(gè)產(chǎn)品，而忽略時(shí)間、精力的現(xiàn)象，在當(dāng)下已經(jīng)是常態(tài)。我們都知道沉沒成本和雞蛋理論。但我認(rèn)為這兩個(gè)概念還不夠，因此我引入了一個(gè)慣性的概念，同滾雪球效應(yīng)異曲同工。持續(xù)投入產(chǎn)生慣性，最終導(dǎo)致難以逃離，與之對應(yīng)的用戶行為就是頻繁的卸載又安裝游戲，以及成癮性的過度使用某個(gè)產(chǎn)品，好吧說到這大家都能猜到是什么游戲什么產(chǎn)品。事實(shí)上我沒有針對性，而是講的一個(gè)更普遍的現(xiàn)象。
慣性投入導(dǎo)致的沉迷產(chǎn)品我們?nèi)绾味x的，為何強(qiáng)調(diào)沉迷現(xiàn)象？因?yàn)槌撩栽斐傻慕Y(jié)果是用戶時(shí)間和精力的消耗，從社會價(jià)值考慮過度娛樂而消耗時(shí)間是不被認(rèn)可的行為。設(shè)計(jì)師經(jīng)?？紤]體驗(yàn)層，考慮商業(yè)價(jià)值，但的確很少考慮到用戶價(jià)值，及與之對應(yīng)的社會價(jià)值的實(shí)現(xiàn)。這里面一個(gè)重要因素就是時(shí)間，我之前分享的《用戶體驗(yàn)設(shè)計(jì)基礎(chǔ)》中提到的一套交互設(shè)計(jì)理論中，就把時(shí)間納入考慮范圍，事實(shí)上這是貫穿用戶使用流程中的一個(gè)關(guān)鍵因素，但我們的確很少考慮到，不僅僅是完成任務(wù)的時(shí)間，更有使用產(chǎn)品的總時(shí)長，及會衍生的一系列問題。
我們也曾體驗(yàn)過一些尊重用戶時(shí)間的產(chǎn)品，如閱讀超過2個(gè)小時(shí)會提醒用戶進(jìn)行休息，同時(shí)在沉浸式體驗(yàn)的界面設(shè)計(jì)中仍然保留時(shí)間的展示。
所以現(xiàn)在，體驗(yàn)已經(jīng)不僅限于交互、任務(wù)完成率、可用性易用性這些基礎(chǔ)內(nèi)容，體驗(yàn)還涉及到用戶價(jià)值，尊重用戶，你更可能會獲得用戶的尊重。
越來越多的自控力挑戰(zhàn)
自控力挑戰(zhàn)來自兩方面，一方面是用戶自身，即用戶自我控制能力，另一方面則來源于挑戰(zhàn)，即海量的信息對注意力的爭搶乃至盜竊。當(dāng)然這些挑戰(zhàn)不局限于好壞某個(gè)方面。因?yàn)槲覀兗瓤赡鼙挥螒虻葕蕵讽?xiàng)目吸引，也有可能被學(xué)習(xí)內(nèi)容吸引，更有可能被同時(shí)完成多個(gè)任務(wù)的期望所吸引。
個(gè)人的自我控制能力是天生的，但可以通過后期鍛煉來進(jìn)一步提升。問題在于生活中的誘惑，吸引力的來源變多了，用戶沉迷于各種產(chǎn)品真的應(yīng)當(dāng)歸咎于用戶自身嗎？這個(gè)問題就像是美國核事故操作失誤應(yīng)該完全歸咎于操作人員一樣可笑，畢竟控制開關(guān)的設(shè)計(jì)本身存在更多問題。外在信息的干擾的確在成倍的增加，網(wǎng)絡(luò)小說、游戲、短視頻不斷增加的自控力挑戰(zhàn)都是罪魁禍?zhǔn)?。你期望七八歲的小孩子能有多強(qiáng)大的自控力呢？同理，青年群體就應(yīng)該有很強(qiáng)大的自控力嗎？（成年人很多都沒有如此強(qiáng)大的自控力可以面對社會上的各種吸引力）。
我們還經(jīng)常陷入低效學(xué)習(xí)怪圈，以一個(gè)過于分心的狀態(tài)去學(xué)習(xí)知識。比如同時(shí)收藏了UX體驗(yàn)書籍課程、插畫設(shè)計(jì)課程、動(dòng)效設(shè)計(jì)、C4D等等在學(xué)習(xí)UX時(shí)忍不住想到插畫，學(xué)習(xí)插畫時(shí)又想到C4D，無法掌握自控力的結(jié)果就是分心產(chǎn)生同時(shí)完成多個(gè)任務(wù)的欲望，最終結(jié)果就是注意分散導(dǎo)致的低效率學(xué)習(xí)，投入與產(chǎn)出完全不成正比。
五：設(shè)計(jì)師如何參與到這場戰(zhàn)爭
事實(shí)上我們已經(jīng)參與到了這場戰(zhàn)爭中，當(dāng)作為設(shè)計(jì)支持人員為商業(yè)目標(biāo)而進(jìn)行設(shè)計(jì)時(shí)，我們已經(jīng)在爭搶用戶注意力。雖然存在用戶注意力被過度經(jīng)濟(jì)化的問題，但這是行業(yè)現(xiàn)狀，也不是個(gè)人能夠解決的，它已經(jīng)上升到wicked problem的層面。那么作為企業(yè)一份子的我們必然需要了解如何爭搶用戶注意力，這和企業(yè)盈利掛鉤。這也是目前大部分設(shè)計(jì)師都正在做的事情。另一方面我們應(yīng)該利用設(shè)計(jì)思維探索其他可能，即“戒癮”的可能性。兼顧商業(yè)價(jià)值和體驗(yàn)，最終在保證收益的情況下避免過度爭搶用戶注意力。
打造上癮產(chǎn)品
提到打造成癮的產(chǎn)品，最為人熟知的就是上癮模型，觸發(fā)——行動(dòng)——多變的酬勞——投入。不同于工具類產(chǎn)品，成癮產(chǎn)品大部分發(fā)生在killtime的產(chǎn)品類型中。如游戲、短視頻、直播、新社交產(chǎn)品等。上癮模式最早來源于游戲設(shè)計(jì)，后來逐漸被應(yīng)用于其他產(chǎn)品設(shè)計(jì)中。簡單來說，設(shè)計(jì)師需要了解幾個(gè)核心元素，動(dòng)機(jī)、行為、觸點(diǎn)，洞察用戶需求與動(dòng)機(jī)，創(chuàng)造對應(yīng)的觸發(fā)器，然后使用戶按照預(yù)期的方案進(jìn)行交互，最終將商業(yè)目標(biāo)轉(zhuǎn)化為用戶行為。常見的用法如游戲中的排行榜，利用攀比心理引導(dǎo)用戶付費(fèi)。再如積分商城，利用持續(xù)的投入減少用戶流失的比例，從而創(chuàng)造更多變現(xiàn)機(jī)會。
打造上癮產(chǎn)品關(guān)鍵點(diǎn)在于對用戶心理的把握，這需要一定的敏感度，以及對應(yīng)的心理學(xué)知識如沉沒成本、金發(fā)姑娘效應(yīng)等。同時(shí)也需要對應(yīng)的方法來幫助梳理可能的痛點(diǎn)機(jī)會點(diǎn)。較常用的是用戶體驗(yàn)地圖，我們通常用它來發(fā)掘體驗(yàn)向的問題，但事實(shí)上作為梳理用戶體驗(yàn)流程和對應(yīng)情緒節(jié)點(diǎn)的方法可以適用很多場景，比如上癮點(diǎn)的挖掘。
關(guān)于用戶體驗(yàn)地圖（也叫用戶旅程圖）可以查閱梓暄的這篇文章https://mp.weixin.qq.com/s/SgQUbAhtjadrUqQS9SMI-A。
我接下來提供另一個(gè)方法用來梳理用戶與各種設(shè)計(jì)元素的關(guān)系。這是一種幫助我們系統(tǒng)思考的方法，具體分為五個(gè)步驟。
1.將信息分解為節(jié)點(diǎn)（信息塊 如對象、概念）和鏈接（節(jié)點(diǎn)之間的鏈接和關(guān)系）
2.可視化信息（草繪或?qū)⑺鼈償[在現(xiàn)實(shí)中，黑板上桌子上等等）
幫助了理解信息及關(guān)系。
3.與他人協(xié)作，包括利益相關(guān)者。分享你的思維模式可以幫助其他人在你的想法上繼續(xù)思考，反之亦然。創(chuàng)建物理圖和分組注釋以生成不同的系統(tǒng)模型，允許團(tuán)隊(duì)綜合多個(gè)觀點(diǎn)。
4.快速發(fā)布解決方案以持續(xù)收集反饋，反饋有助于解決我們沒有找到正確答案的問題，收集的反饋越多，下一步中有效指導(dǎo)信息就越多。
5.迭代，每次迭代都能利用反饋來解決一些新的問題，從而最終解決整個(gè)棘手的問題。
能打造出一款真正讓用戶上癮的產(chǎn)品固然很重要，但像我強(qiáng)調(diào)過好多遍的那樣，我們應(yīng)當(dāng)考慮用戶價(jià)值，考慮衍生問題。如果一定要爭搶用戶注意力，也請遵循一個(gè)總的設(shè)計(jì)原則，即下面要提到的總的設(shè)計(jì)價(jià)值，由Cyd Harrell提出，且Cyd Harrell一直致力于此。
總的設(shè)計(jì)價(jià)值
我們所服務(wù)的互聯(lián)網(wǎng)企業(yè)不斷爭搶用戶注意力，都期望用戶停留更多時(shí)間為企業(yè)創(chuàng)造更多價(jià)值，但卻忽略了尊重用戶的時(shí)間、尊嚴(yán)、和能力?！狢yd Harrell
這是我很贊同的一個(gè)總的設(shè)計(jì)原則，即尊重用戶的時(shí)間尊嚴(yán)和能力。如果問你，有沒有一個(gè)全世界通用的大家都認(rèn)可的設(shè)計(jì)價(jià)值？ 我想那就是尊重用戶。
很多時(shí)候，我們設(shè)計(jì)師都無意識的參與到了爭搶用戶注意力的戰(zhàn)爭中，從近些年的設(shè)計(jì)主題由視覺到體驗(yàn)再到商業(yè)，我們可以看出其實(shí)設(shè)計(jì)師仍然處于純粹的為企業(yè)服務(wù)的狀態(tài)，互聯(lián)網(wǎng)設(shè)計(jì)圍繞著企業(yè)機(jī)器運(yùn)轉(zhuǎn)，忽略用戶價(jià)值，忽略用戶注意力承載度，最終導(dǎo)致了廣告盲及各種成癮現(xiàn)象。從社會價(jià)值角度講，用戶應(yīng)該把更多時(shí)間投入到工作學(xué)習(xí)與生活中，而不是在無意義的各種推廣和獵奇信息中沉溺迷失。
借用Cyd Harrell的話，如果不能夠讓一些企業(yè)采取這樣的價(jià)值觀，并將它們運(yùn)用在產(chǎn)品中，僅在我們設(shè)計(jì)領(lǐng)域傳播這種價(jià)值觀是沒有任何意義的。但相信有很多體驗(yàn)設(shè)計(jì)領(lǐng)域的設(shè)計(jì)師都在努力幫助企業(yè)做出正確的選擇，去尊重用戶價(jià)值。很高興的是從王者榮耀的防沉迷策略，到抖音的青年保護(hù)計(jì)劃，我們能看到一些企業(yè)對于這些產(chǎn)品衍生問題進(jìn)行方案探索。
無論是沉迷問題，還是低效率問題都是以用戶注意力為核心的一個(gè)wicked problem，它沒有清晰的解決方案，且會持續(xù)很久，我們無法知道哪種解決方案是最終方案，只有更好的方案和差一些的方案，這也是wicked problem的 一大特性。讀到這文章也要結(jié)束了，我無法提供一個(gè)注意力問題的解決方案，因?yàn)樗w的領(lǐng)域，相關(guān)的利益者實(shí)在太龐雜，不是簡單的處理某個(gè)節(jié)點(diǎn)的問題就能夠解決的。寫這篇文章的目的更多的是讓大家了解到我們目前介入及面臨的一個(gè)現(xiàn)實(shí)存在的問題——注意力問題。同時(shí)希望大家能開始意識到尊重用戶這一設(shè)計(jì)原則的重要性，尊重用戶，尊重用戶的時(shí)間和尊嚴(yán)，這句話對我感觸很大，希望也能觸發(fā)你對于設(shè)計(jì)的另一種認(rèn)識.
最后，我們可能不知道答案是什么，但我們知道我們必須不停的探索。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
大家可能聽過很多關(guān)于想創(chuàng)意要靠靈感的說法，而在設(shè)計(jì)師的日常工作中并不是這樣的，至少絕大多數(shù)的時(shí)候不是。你想想，靈感這個(gè)東西是不可控的，快的時(shí)候可能幾分鐘就有了，慢的時(shí)候可能得等上一兩個(gè)月，如果隨便一個(gè)創(chuàng)意都要靠靈感，那我們的效率得有多低啊。所以，那些說有靈感才創(chuàng)作、沒靈感就去游山玩水的大師，他們通常指的是大創(chuàng)意，而且他們肯定有比較多的創(chuàng)作時(shí)間。而對于日常的設(shè)計(jì)、創(chuàng)意工作，我們絕不能靠靈感出創(chuàng)意，靠什么呢？當(dāng)然是靠方法。蔥爺特意幫大家總結(jié)了 21 種商業(yè)廣告設(shè)計(jì)想創(chuàng)意的方法，希望可以幫你們提高想創(chuàng)意的效率。
比喻在廣告設(shè)計(jì)中一般的用法是，把產(chǎn)品或者能代表產(chǎn)品的元素比喻成具有某項(xiàng)功能的事物，這一手法成立的條件是兩個(gè)元素在外形上要有一定的相似性。
△ 把產(chǎn)品（雞塊）比喻成代表熱辣的火焰
△ 把布匹比喻成紅酒
借用某元素替代另一元素，或者借局部替代整體。
△ 用涂了口紅的嘴唇代替女人
△ 用一只綠色的手代表綠巨人
即把產(chǎn)品或能代表產(chǎn)品的元素?cái)M人化，擬人手法通常還具備幽默效果，其表現(xiàn)形式主要為以下兩種。
1. 外表擬人
即給事物添加人的特征，如五官或動(dòng)作。
2. 文案擬人
這一做法并不需要改變事物的外表，而是在文案上賦予人的特征，比如用形容人的話語形容某事物，或者讓它說話等等。
即模擬攝影中的雙重曝光效果，最常見的用法是在人或物的基礎(chǔ)上疊加與其相關(guān)的場景，具有一定的藝術(shù)效果和視覺沖力。
△ 通過雙重曝光的手法把大象與汽車巧妙結(jié)合起來。
即把產(chǎn)品置于中央，往四周發(fā)散與其相關(guān)的元素，用來表現(xiàn)具有的功能，或包含的服務(wù)。
這種做法可以使視覺主體更集中，同時(shí)能增強(qiáng)畫面的形式感和視覺沖擊力。
比如手機(jī)、銀行卡、書本、手掌等都很適合做成擺放元素的平臺，可以用于表達(dá)該元素上具有什么產(chǎn)品或服務(wù)等等。
比如可以把包含了寬帶、手機(jī)流量的全家共享套餐，包裝成一個(gè)全家桶的概念。
再比如我們可以把一些主題活動(dòng)包裝成 XX 星球，代表一個(gè)新的世界。
△ 《奇葩說》的奇葩星球
即用兩個(gè)或兩個(gè)以上結(jié)構(gòu)相近，但質(zhì)地不同的元素組合成一個(gè)新的整體，這種效果既統(tǒng)一又有對比。
同樣，這個(gè)符號必須是跟主題相關(guān)的，而且該符號不宜太復(fù)雜。
把正常事物或場景中的某個(gè)元素替換成其他元素，用來說明該元素也具有原事物的效果或特征。
△ 用快遞員置換炮彈，來說明送貨快的特點(diǎn)。
△ 用飲料包裝置換樹枝上的水果，以說明該飲料原汁原味。
比如說海洋、草地、房間，這些元素的邊界感不明顯，現(xiàn)實(shí)中不會以一個(gè)獨(dú)立的狀態(tài)出現(xiàn)，但我們可以給它制作一個(gè)邊界，使其從整體中獨(dú)立出來。
比如把 Logo 圖形，或者是能代表產(chǎn)品功能、傳播主題的圖形符號，打造成一個(gè)由相關(guān)元素組成的場景。
西游、三國等典故，超級瑪麗、俄羅斯方塊等游戲經(jīng)常被引用到廣告創(chuàng)意中，可以有效增加消費(fèi)者對廣告的注意力。
如果廣告的核心訴求是某個(gè)數(shù)字，或者是符號，那么也可以把它當(dāng)成核心元素融入到場景中，然后圍繞它來添加相關(guān)元素。
如把功效夸大、把事物的大小比例夸大等等，或者改變事物原本的比例。
這是很直接的一種廣告設(shè)計(jì)形式，把常規(guī)的圖加文結(jié)合為一個(gè)整體，可以增加圖文的關(guān)聯(lián)度，降低傳播成本。
正負(fù)圖形除了在 Logo 設(shè)計(jì)中很常見之外，也是海報(bào)設(shè)計(jì)和廣告設(shè)計(jì)的常用形式，正負(fù)圖形一般比較簡潔、創(chuàng)意巧妙，具有很強(qiáng)的視覺沖擊力。
△ 可口可樂的海報(bào)很喜歡用這種手法
在產(chǎn)品中添加場景，將其功能或特點(diǎn)視覺化。
為了滿足需求，很多廣告設(shè)計(jì)中都融合了兩種或者兩種以上的創(chuàng)意手法。
△ 上圖為置換加比喻
△ 上圖為符號場景化和把文字融入場景
△ 上圖為夸張加元素抽離
凡事都有方法和技巧，即使是藝術(shù)和創(chuàng)意這種看似不可控的事物。方法和技巧雖然不能保證帶給你一個(gè) big idea，但他能為你提供清晰的思路、提高你的效率，并能將你的創(chuàng)意水準(zhǔn)維持在一條基線之上，希望這篇文章能夠?qū)δ阌兴鶐椭?
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
我們常說：設(shè)計(jì)就是在向用戶傳遞信息，在設(shè)計(jì)的日常工作中，傳遞信息的方式大多都是圖文相結(jié)合的形式，而文字作為信息傳遞中最直觀的表現(xiàn)形式，對于整體而言是至關(guān)重要的一環(huán)。很多設(shè)計(jì)師一味強(qiáng)調(diào)追求圖具有吸引力，而忽略了文字的重要性，最終導(dǎo)致圖文無法結(jié)合、虎頭蛇尾。說到文案吸引力，最佳的表現(xiàn)位置就是標(biāo)題字，所以本期就和大家一起分析、總結(jié)一些比較實(shí)用的標(biāo)題文字的處理方式，提升對讀者的吸引力。在文字排版中，想要提升標(biāo)題文字的吸引力，就要與其他非標(biāo)題性文字形成視覺上的反差、對比，進(jìn)而讓標(biāo)題文字在整體排版中更加吸引用戶眼球。這里說的第一個(gè)比較實(shí)用的處理手法就是切割文字筆畫，即：以標(biāo)題文字的筆畫為切入點(diǎn)，在不影響其辨識度的前提下，通過一些特殊的處理手法，提升視覺比重。
切割文字筆畫也可以理解為將文字的筆畫分離字體的本身，然后再以文字筆畫為切入點(diǎn)，進(jìn)行處理，常用的筆畫處理方式：變色、模糊、刪除、陰影，下面我們逐一來看。
1. 分離筆畫 – 變色處理
顧名思義就是有意將分離的字體筆畫進(jìn)行變色處理，提升標(biāo)題文字本身字體上的變化強(qiáng)度，從而提升標(biāo)題對于用戶的吸引力。舉例說明：
上圖中，這兩種標(biāo)題形式在設(shè)計(jì)工作中都是可取的，只是對比而言，案例 1 給人的感覺更加平緩，屬于比較常見、中規(guī)中矩。而案例 2 則更加新穎，在視覺上變化更強(qiáng)烈（主要體現(xiàn)在文字筆畫與筆畫之間），更加吸引用戶眼球，也起到了提升作品設(shè)計(jì)感的作用。
2. 分離筆畫 – 模糊處理
同樣的理解方式，就是將分離的字體筆畫進(jìn)行模糊化處理，目的是通過筆畫與筆畫之間的虛實(shí)對比，營造出視覺上的前后關(guān)系，從而提升標(biāo)題文字在整體文案中的視覺注意力。
上圖案例中通過對比我們發(fā)現(xiàn)：案例 4 相較于案例 3 更吸引人，原因在于其筆畫之間的虛實(shí)結(jié)合使得字體本身就形成了一定的反差感，形式上的多變造就了文字更吸引人，同時(shí)如果感覺文字筆畫之間的變化強(qiáng)度不夠，可以結(jié)合變色+模糊的處理形式，比如：
這樣給人的感覺就更加強(qiáng)烈、也更誘人，但是這種筆畫之間的變化多了，也就意味著掌握的難度提升了，一定要避免過多的效果導(dǎo)致出現(xiàn)凌亂的現(xiàn)象。
3. 分離筆畫 – 陰影處理
可以理解為將文字筆畫分開來看，通過添加陰影的方式，營造視覺上筆畫的前后關(guān)系，從而增強(qiáng)其整體的視覺變化，舉例說明：
上圖中，案例 8 就是通過給文字筆畫添加陰影的形式，使得筆畫與筆畫之間在視覺上形成了很明顯的前后遮擋關(guān)系，將原本平面的文字變得更立體，也更易于吸引用戶眼球。這種處理手法在平時(shí)工作中也很實(shí)用，只需要理清楚筆畫的前后邏輯關(guān)系，通過畫筆涂抹的方式慢慢調(diào)整即可。
4. 分離筆畫 – 刪除處理
刪除筆畫的處理形式相對來說在工作中運(yùn)用較少，因?yàn)橐坏┨幚聿磺‘?dāng)，很容易影響字體本身的辨識度，適得其反，舉例說明：
如上圖所示，刪除了一些筆畫，給用戶留下一些想象的空間，也是比較新穎的處理方式，比較適合一些平面海報(bào)標(biāo)題的設(shè)計(jì)。
這種刪除字體筆畫的處理形式雖然很新穎，但是應(yīng)用的局限性較大，屬于比較難把控的一種。
注意：將文字筆畫單獨(dú)拆分出來進(jìn)行處理的手法，一定不要過于追求變化強(qiáng)烈，否則很容易導(dǎo)致標(biāo)題文字非但沒有起到吸引用戶的作用，反而最基本的辨識度都會被破壞，一定要把握好度。
在日常工作中，通過給標(biāo)題文字添加輔助元素，從而突出標(biāo)題的處理手法是非常實(shí)用的，這里所說的輔助元素可以分為很多種，比如：圖形、肌理、光效等等，目的都是借助輔助元素與標(biāo)題文字的相互結(jié)合，讓文案標(biāo)題的視覺形象更鮮明、更吸引用戶。
添加圖形是屬于比較直觀且應(yīng)用廣泛的一種處理方式，而這里的圖形一般情況下會和標(biāo)題文字在屬性上有所反差，這樣有利于最終效果的呈現(xiàn)更加明顯，舉例說明：
如上圖所示，標(biāo)題文字通過添加下劃線、邊框、形狀等等輔助圖形元素，較常規(guī)標(biāo)題而言，其視覺變化更加強(qiáng)烈，整體豐富度提升了很多。但是這種輔助元素不能添加太多，否則很容易出現(xiàn)亂的現(xiàn)象，要讓這些添加的元素與標(biāo)題形成相輔相成的關(guān)系。
上圖的設(shè)計(jì)案例，通過對比我們發(fā)現(xiàn)，右側(cè)案例視覺更豐富，且標(biāo)題文字添加下劃線后，其在畫面整體的視覺形象更加鮮明、更吸引用戶眼球。
現(xiàn)實(shí)生活中一個(gè)物品如果置身于某一個(gè)環(huán)境內(nèi)，它自身就會受到周圍環(huán)境的影響，而如果我們假定環(huán)境，將標(biāo)題文字看做物品，那么我們就可以給予標(biāo)題文字在環(huán)境中的光影，比如：投影、倒影、發(fā)光、環(huán)境色等等，這樣就間接地增強(qiáng)了標(biāo)題文字的視覺變化，從而起到吸引用戶眼球的作用。
如上圖所示，把文字當(dāng)做處于環(huán)境中的物體，通過投影、倒影、陰影的方式體現(xiàn)其環(huán)境，在視覺上有了更深的層次變化，也能起到強(qiáng)調(diào)、加深印象的作用。這種營造環(huán)境感的處理形式在平時(shí)工作中也很實(shí)用。
再說下發(fā)光的處理手法，這種形式大多用在暗色調(diào)的畫面中，將文字看做一個(gè)發(fā)光體，即受周圍環(huán)境的影響又影響著周圍環(huán)境，舉例說明：
上圖中雖然說左右兩種表現(xiàn)形式文字都比較清晰、明了，但是就視覺感受而言，右側(cè)將文字作為發(fā)光體與周圍環(huán)境相輔相成、融為一體的處理形式更容易吸引用戶眼球，而且更加新穎、有創(chuàng)意。這種表現(xiàn)形式在一些電商海報(bào)中也很常見，比如：
發(fā)光的效果給人的感受很舒服，打破了常規(guī)的單純平面編排文字的現(xiàn)象，將文字場景化，使其更誘人。
還有一些在平時(shí)工作比較實(shí)用的，只不過或多或少在之前文章中都有提過，這里以補(bǔ)充說明的形式展開。
1. 標(biāo)題文字 – 關(guān)鍵詞變色
說到關(guān)鍵詞變色算是比較常用的一種，就是將原本標(biāo)題文字中一些關(guān)鍵詞進(jìn)行變色處理，目的是增加標(biāo)題文字的視覺變化強(qiáng)度。
通過將案例中「免息」一詞變色處理，使得標(biāo)題在視覺感受上更加明顯、有吸引力，而且給人的感覺也很舒服，這種處理手法是非常實(shí)用的，不妨多試試。
2. 標(biāo)題文字 – 描邊
描邊文字在平時(shí)工作中用到的相對少一些，這種處理手法也間接地起到了打破常規(guī)的作用，當(dāng)我們一直按照某一些常規(guī)形式工作時(shí)，偶爾做一些改變也許會得到意想不到的效果。
3. 標(biāo)題文字 – 與主體遮擋
文字與主體營造遮擋關(guān)系也是在日常工作中很實(shí)用的一種，就是將主體與文字相互穿插排放，通過必要位置的陰影進(jìn)行加深體現(xiàn)。雖然元素并不多，但是最終呈現(xiàn)的視覺效果卻很舒服、有吸引力。
這種主體與標(biāo)題穿插表現(xiàn)的形式使得兩者更加整體，對于畫面而言，主體和標(biāo)題都起到了很好的強(qiáng)調(diào)作用。
文章中提到了一些比較實(shí)用的提升標(biāo)題文字吸引力的處理手法，但是需要注意不能過于追求效果而忽略了設(shè)計(jì)的本質(zhì)，要根據(jù)需求選擇恰當(dāng)?shù)姆绞?，不管何種形式，都要保證文字本身的識別性。文章中提到的并非全部，主要還是為大家提供一個(gè)可以參考的方向，要學(xué)會舉一反三、大膽嘗試。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
彈窗在設(shè)計(jì)中運(yùn)用的非常廣泛，基本上每個(gè)應(yīng)用都會涉及到。恰好這段時(shí)間我也在整理公司設(shè)計(jì)組件這一塊，所以就想總結(jié)分享一下。設(shè)計(jì)師都會使用彈窗，但對于彈窗背后的分類及運(yùn)用可能還不是特別了解，在寫這篇文章之前，我查看了很多應(yīng)用及資料，所以下面會有大量的案例，相信大家看完可以對彈窗的認(rèn)識更明確，做設(shè)計(jì)規(guī)范的時(shí)候也能有自己的想法。
現(xiàn)在的彈窗分為兩種，一種是模態(tài)彈窗（重提示），一種是非模態(tài)彈窗（輕提示）。
常見的模態(tài)彈窗：Dialog/Alert、Actionbar、Popover/Popup
常見的非模態(tài)彈窗：Toast/Hud、Tips、Snackbar
一、模態(tài)彈窗
Dialog/Alert 對話框
對話框是我們常用的彈窗，安卓開發(fā)語言是Dialog，iOS開發(fā)語言Alert，它通常出現(xiàn)在頁面的中間，對話框/警示框的類別非常多，對用戶的干擾比較大。前面之所以說模態(tài)彈窗是一種重提示，是因?yàn)樗枰脩糁鲃?dòng)觸發(fā)選擇才可以繼續(xù)當(dāng)前的操作。
① 信息-選擇確定
特點(diǎn)：這類彈窗通常是一些系統(tǒng)功能的授權(quán)、版本更新、消息通知、重要提示等，通常只有1～3個(gè)主按鈕，只需要用戶進(jìn)行簡單的選擇。
下圖舉例分析：
iOS詢問是否刪除APP，就屬于重要提示彈窗，它一般會用在像刪除、確認(rèn)提交...一些比較重要的功能操作中。
小紅書的這個(gè)是否允許使用網(wǎng)絡(luò)彈窗，大家一定在許多APP中都見過，這屬于一個(gè)系統(tǒng)自帶的授權(quán)彈窗。
馬蜂窩與天貓的消息提醒彈窗，一個(gè)屬于初次使用APP時(shí)，系統(tǒng)自帶的彈窗，一個(gè)屬于使用后期APP為了推送消息，主動(dòng)提示你開啟消息通知。
有錢花和愛奇藝的版本升級彈窗，都屬于偏運(yùn)營類的彈窗，這一類的彈窗通常會弱化暫不升級的按鈕，突出升級主按鈕。
② 信息-輸入勾選
特點(diǎn)：這類彈窗通常是輸入一些比較少的信息或者勾選信息，常用于備注輸入、規(guī)格選擇、分組選擇等，通常只有確定和取消兩個(gè)按鈕。
下圖舉例分析：
微博對于已關(guān)注人的分組及備注，都屬于信息輸入及勾選類彈窗，操作通常都比較簡單。
③ 信息-傳達(dá)展示
特點(diǎn)：這類彈窗通常是一些廣告、紅包優(yōu)惠、節(jié)日活動(dòng)等一些運(yùn)營類彈窗，主要是吸引用戶點(diǎn)擊及參加活動(dòng)，這類運(yùn)營彈窗通常會設(shè)計(jì)的比較吸引人，造型各異，會突出領(lǐng)取、查看等大按鈕，弱化關(guān)閉按鈕。
下圖舉例分析：
拼多多和餓了么這類的紅包優(yōu)惠彈窗，就不多說了，大家都懂，它們最主要的目的就是吸引用戶點(diǎn)擊，提升購買率。
美團(tuán)的變黃送好禮彈窗，屬于一次比較大的品牌升級，它主要目的是讓用戶更好的了解并接受品牌色升級。整體的元素及動(dòng)效設(shè)計(jì)都非常清晰，視覺感很強(qiáng)。
支付寶的這個(gè)猜世界杯贏螞蟻積分的彈窗，屬于活動(dòng)彈窗，它的整體設(shè)計(jì)非常貼合主題。
Actionbar操作欄
Actionbar主要分為Action Views和Action Sheets。它們通常是由底部彈出，它的操作及信息會比對話框類型的彈窗更多更復(fù)雜。這種當(dāng)前頁面的下拉彈窗好處就是，可以讓用戶清楚的感知當(dāng)前的操作，比跳轉(zhuǎn)到新頁面更加有安全感。還有一個(gè)特殊的抽屜式彈窗也順便說一下。
① Action Views操作視圖
特點(diǎn)：這類視圖彈窗通常占屏比較多，以文字、圖標(biāo)等形式展示各種功能，也可以說這類的彈窗是一個(gè)小型的頁面。它一般從底部彈出，不太強(qiáng)調(diào)歸屬，大多出現(xiàn)在購買、支付、分享等場景。
下圖舉例分析：
百度云盤的這個(gè)+號擴(kuò)展彈窗比較特殊，它也可以說是浮層，占滿整個(gè)屏幕，它最吸引人的還是它的小動(dòng)效。
京東購買時(shí)的彈窗和支付寶付款時(shí)的彈窗，都是比較典型的，在各種電商產(chǎn)品及付款頁面用的非常多。
轉(zhuǎn)轉(zhuǎn)這個(gè)的鍵盤與輸入為一體的彈窗，設(shè)計(jì)的非常人性化，讓用戶一次就可以輸入多個(gè)價(jià)格。大大提高了用戶的操作效率。
網(wǎng)易云音樂的分享彈窗就是典型的以文字與圖標(biāo)來展示功能的。
微信讀書的底部閱讀設(shè)置彈窗，比較特殊，為了使用戶沉浸閱讀，它是比較隱藏的，而且非常輕量化。
② Action Sheets 操作列表
特點(diǎn)：操作列表相對于操作視圖，它更單一。主要是以文字展示功能按鈕，重要敏感的功能操作一般會用主題顏色或紅色顯示，主要運(yùn)用在一些日常控件、功能選擇、刪除、保存等場景。
下圖舉例分析：
Keep的選擇日期，屬于iOS原生控件，非常常見。
淘寶的選擇地址彈窗，整個(gè)展示的非常清晰全面，而且用戶每選擇一項(xiàng)，就會有相應(yīng)的顯示。
支付寶和天貓超市的兩種列表彈窗，就不多說了，簡單的功能選擇都會采用這種。
③ 抽屜式彈窗
特點(diǎn)：這種抽屜式彈窗一般從左右兩邊彈出，經(jīng)常運(yùn)用在一些導(dǎo)航擴(kuò)展和目錄展示中，它能承載比較多的信息，基本上都是用來放一些不太常用的功能。
下圖舉例分析：
微信讀書及一些其他閱讀類產(chǎn)品，由于目錄很長，而且一般是從上到下瀏覽的，所以基本都采用了這種抽屜式彈窗。
小紅書的這個(gè)抽屜式彈窗，以圖標(biāo)和文字的形式展示了一些不是很常用的功能，為我的頁面節(jié)約了不少空間。
Popover/Popup 浮層
Popover是ios的開發(fā)語言，popup是安卓的開發(fā)語言，浮層是指，用戶點(diǎn)擊某個(gè)功能后浮出一個(gè)臨時(shí)氣泡對其作出補(bǔ)充，它通常會伴隨著半透明的遮罩或者投影襯底，用戶需要點(diǎn)擊功能區(qū)域操作，或者點(diǎn)擊空白處取消，才能進(jìn)入下一步操作。它與上面操作欄的最大區(qū)別就在于，它更強(qiáng)調(diào)歸屬，可以出現(xiàn)在頁面的任何地方，而操作欄一般只出現(xiàn)在底部，不強(qiáng)調(diào)歸屬。
① 指向浮層
特點(diǎn)：這類的浮層一般伴隨有小三角指向，強(qiáng)調(diào)歸屬。氣泡里面的功能通常以單一的文字或文字與圖標(biāo)結(jié)合的形式來展示，主要運(yùn)用在頂部加號補(bǔ)充、復(fù)制、分享轉(zhuǎn)發(fā)等場景。
下圖舉例分析：
支付寶和美團(tuán)的頂部加號補(bǔ)充浮層，展示形式是差不多的，只是UI樣式不一樣，一個(gè)是白色氣泡黑色半透明遮罩，一個(gè)是深灰色氣泡。
微信讀書和微信的選擇文字氣泡，在文字復(fù)制中很常見，通常會與其他轉(zhuǎn)發(fā)收藏小功能一起出現(xiàn)。
② 導(dǎo)航篩選浮層
特點(diǎn)：所謂導(dǎo)航篩選，自然是與導(dǎo)航分不開的，再加上浮層是比較強(qiáng)調(diào)歸屬的，所以它通常會與導(dǎo)航連在一起，一般出現(xiàn)在頂部。
下圖舉例分析：
美團(tuán)的導(dǎo)航篩選，因?yàn)檫x項(xiàng)及開關(guān)很多，所以它的底部會有兩個(gè)主按鈕，一個(gè)完成，一個(gè)重置。
餓了么的這個(gè)只有一個(gè)功能選項(xiàng)，所以它一般是直接選擇就收起浮層了。
③ 引導(dǎo)浮層
特點(diǎn)：引導(dǎo)浮層的作用就是引導(dǎo)用戶更好的使用產(chǎn)品及交互，降低用戶的學(xué)習(xí)成本。它通常會出現(xiàn)在用戶首次進(jìn)入APP的時(shí)候，一般只會出現(xiàn)一次，點(diǎn)擊空白位置或我知道了浮層就會消失。
下圖舉例分析：
QQ音樂與微醫(yī)的引導(dǎo)浮層都是用戶首次進(jìn)入應(yīng)用時(shí)，給出的功能搬家提醒浮層。
二、非模態(tài)彈窗
Toast/Hud 提示框
Hud是ios的控件名詞，Toast是安卓的控件名詞，它們都屬于一種輕提示，給予用戶及時(shí)反饋，讓用戶知道自己當(dāng)前所處的狀態(tài)。
Hud一般只出現(xiàn)在屏幕的中央，以毛玻璃的樣式表現(xiàn)，內(nèi)容展示比較富豐富。
Toast可以出現(xiàn)在屏幕任意位置，通常以黑色半透明的小框來表現(xiàn)，內(nèi)容一般是純文字提示或者文字與圖標(biāo)結(jié)合提示。
① 狀態(tài)提示
特點(diǎn)：狀態(tài)提示的Toast，它們一般都是反饋用戶當(dāng)前操作的狀態(tài)，只出現(xiàn)1到2秒就會自動(dòng)消失，場景一般是關(guān)注成功、密碼錯(cuò)誤、音量提示、靜音、清除緩存等。
下圖舉例分析：
移動(dòng)的屬于操作遇阻提示。
京東的屬于操作成功反饋。
iOS的音量控制屬于毛玻璃Hud。
微信的清除緩存屬于正在操作狀態(tài)。
② 按鍵提示
特點(diǎn)：按鍵Toast提示與狀態(tài)提示不同，它們一般自動(dòng)出現(xiàn)或者點(diǎn)擊觸發(fā)才會出現(xiàn)，用于對功能點(diǎn)的補(bǔ)充說明，讓用戶對功能有更深的了解。
下圖舉例分析：
螞蟻森林里點(diǎn)擊樹木就會出現(xiàn)相關(guān)信息，當(dāng)然它也會自動(dòng)出現(xiàn)，點(diǎn)擊其他區(qū)域也會自動(dòng)消失。
知乎的消息標(biāo)簽不僅有小紅點(diǎn)提示，還會在上方自動(dòng)出現(xiàn)數(shù)字提示。
Snackbar
Snackbar是Android中的一個(gè)控件。它一般會在超時(shí)自動(dòng)關(guān)閉或者在屏幕上滑動(dòng)關(guān)閉，它沒有Toast那么輕量，設(shè)置出現(xiàn)的時(shí)間會比Toast長，而且可以點(diǎn)擊按鈕進(jìn)行交互。
下圖舉例分析：
UC瀏覽器的Snackbar，是在提示用戶上滑，來查看更多內(nèi)容，它需要滑動(dòng)或者超時(shí)才能關(guān)閉。
京東的Snackbar，是在為用戶推薦商品，提示用戶點(diǎn)擊箭頭來查看喜歡的商品，它比UC瀏覽器多了一個(gè)關(guān)閉的按鈕。
Tips提示
Tips與Snackbar最主要的區(qū)別就是：Tips它是內(nèi)嵌在頁面上的，而Snackbar則是浮在頁面上的。Tips一般要讓用戶主動(dòng)觸發(fā)關(guān)閉按鈕或點(diǎn)擊進(jìn)入下級頁面才會消失，一般用于需要用戶感知到的通知信息，或者植入廣告。
下圖舉例分析：
百度云盤在下載視頻時(shí)，就會出現(xiàn)一個(gè)Tips的提示，讓用戶觀看廣告來得到加速下載。這種提示雖說是廣告，但它抓住了用戶的場景及心理，觀看廣告的幾率大大提升。
愛奇藝的Tips提示就屬于重要通知提示了，提示用戶VIP即將到期，續(xù)費(fèi)可優(yōu)惠，它們都有一個(gè)主按鈕及關(guān)閉按鈕，需要用戶主動(dòng)觸發(fā)提示才會消失。
規(guī)范總結(jié)
目前的彈窗樣式非常多，你能想到的，你想不到的基本都可以技術(shù)實(shí)現(xiàn)。但這同時(shí)也帶來一個(gè)問題，那就是“不規(guī)范”。以上提到的彈窗種類，你只需要選擇符合你產(chǎn)品要求的幾個(gè)類型，最好不要在一個(gè)產(chǎn)品中運(yùn)用多個(gè)同種類型的彈窗，否則后期會很難規(guī)范及組件化，當(dāng)然運(yùn)營廣告類彈窗可以另當(dāng)別論。
差不多就寫完了...大家覺得有幫助的話，記得點(diǎn)在看和轉(zhuǎn)發(fā)～
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
在電子商務(wù)界，你的網(wǎng)站設(shè)計(jì)就是一張?jiān)诰€名片。它能幫助你從擁擠不堪的海量信息中脫穎而出，同時(shí)也反映出你的可信度。這是你的用戶通過初次訪問來了解你品牌的地方。如果他們沒有找到自己喜歡的，幾乎80%的人都會選擇離開你的網(wǎng)站。
這就是為什么在構(gòu)建和設(shè)計(jì)網(wǎng)站時(shí)，永遠(yuǎn)不要低估用戶滿意度帶來的影響。
接下來要講的是如何設(shè)計(jì)一個(gè)無可挑剔的、以用戶為中心的網(wǎng)站，來使你的網(wǎng)站轉(zhuǎn)化率飛速上漲。
如果不能引導(dǎo)用戶完成最終購買，那么設(shè)計(jì)再精美的網(wǎng)站都是毫無意義的。用戶沒有選擇在你這里購買的一個(gè)主要原因是復(fù)雜的網(wǎng)站導(dǎo)航。記住，用戶不希望無休止的點(diǎn)擊和滑動(dòng)鼠標(biāo)后才能找到他們想要的產(chǎn)品。如果他們發(fā)現(xiàn)自己正將時(shí)間浪費(fèi)在不必要的操作上，就會棄你而去，到你的競爭對手那里。
這也是你想要阻止發(fā)生的事情。
人們常說不能以貌取人，但我們卻一直都在這么做。在電商的世界中，你的主頁就是顏值。
研究表明，只需0.05秒，一個(gè)用戶就能判斷出你的網(wǎng)站是否能夠滿足他們的需求。而且，如果你不能讓他們相信你的網(wǎng)站是可靠的、安全的或足夠有價(jià)值的，他們就會在眨眼之間拋棄你的網(wǎng)站。
那么，一個(gè)令人驚艷的主頁包含哪些要素呢?
主頁是用來吸引用戶并與他們建立關(guān)系的。但當(dāng)你想把一位訪客變成付費(fèi)用戶時(shí)，體現(xiàn)產(chǎn)品詳情頁重要價(jià)值的時(shí)刻就到了。它們需要為用戶深度展示你的產(chǎn)品，激發(fā)他們的興趣，并讓他們產(chǎn)生點(diǎn)擊“立即購買”按鈕的欲望。那么，讓我們來一起看看產(chǎn)品詳情頁中最重要的元素都有哪些吧。
如果有用戶不確定是否要從你這里購買產(chǎn)品，那他很可能會在深思熟慮前就離開你的網(wǎng)站。你需要向他們證明這是一個(gè)錯(cuò)誤的選擇，而這正是“常見問題“的切入點(diǎn)。
創(chuàng)建一個(gè)頁面去回答用戶最常問的問題，會讓用戶感到高興，將他們的購買焦慮降到，也能夠更快引導(dǎo)他們完成購買。這就是為什么，你需要積極地構(gòu)建FAQ頁面，提供可操作和有用的技巧，甚至通過截圖和圖片的形式來讓答案容易被更多人理解。
一個(gè)可靠的FAQ頁面還可以提升SEO（搜索引擎排名優(yōu)化），特別是在語音搜索SEO和本地化SEO盛行的時(shí)代。數(shù)據(jù)顯示，22%的搜索者會使用語音搜索在網(wǎng)上查找本地企業(yè)。因此，綜合考慮電商SEO實(shí)踐與本地化SEO服務(wù)，對你的電商網(wǎng)站至關(guān)重要。
這就是FAQ頁發(fā)揮首要作用的地方。也就是說，在不損害用戶體驗(yàn)的情況下，它使你有機(jī)會針對搜索時(shí)高頻出現(xiàn)，及具有地區(qū)特征的關(guān)鍵詞，來優(yōu)化FAQ頁面的問題和答案。此外，這也有助于提升你的網(wǎng)站在語音搜索中的排名，因?yàn)楣雀杞?jīng)常使用FAQ頁面作為語音搜索結(jié)果。
你已經(jīng)通過種種努力讓令人驚艷的主頁贏得了用戶的信任，用產(chǎn)品詳情頁頁的優(yōu)質(zhì)文案提升了他們對產(chǎn)品的興趣，現(xiàn)在是時(shí)候激發(fā)他們?nèi)ネ瓿勺詈蟮馁徺I流程了。你千萬不能搞砸了這個(gè)關(guān)鍵環(huán)節(jié)，因?yàn)橘徺I流程是購物流程閉環(huán)的最后一步。
對于電商而言，用戶體驗(yàn)至關(guān)重要。她會為你積累忠實(shí)的老用戶，激勵(lì)新訪客轉(zhuǎn)換為付費(fèi)用戶，并有助于他們向親朋好友傳播關(guān)于你的正面口碑。Jeff Bezos對此有很好的詮釋：
“如果你的確建立了很好的體驗(yàn)，用戶就會口口相傳?？诒牧α渴菬o比強(qiáng)大的?！?/span>
我希望以上的這些秘訣將可以成為你的堅(jiān)實(shí)基礎(chǔ)，助力你在在電商領(lǐng)域取得成功。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
創(chuàng)意動(dòng)畫1. 品牌加載
公眾喜歡有趣，可塑的動(dòng)畫。Airbnb 和 Netfilx 將品牌 logo 動(dòng)畫應(yīng)用到了啟動(dòng)頁和加載頁面。結(jié)合品牌特點(diǎn)、風(fēng)格和符號，融合到產(chǎn)品設(shè)計(jì)中，從而提升視覺的一致性，創(chuàng)造富有特有性格的產(chǎn)品界面。
△ Netflix & Airbnb
2. 圖標(biāo)動(dòng)畫
微交互是建立在移動(dòng)端上微妙視覺效果的小動(dòng)畫，而圖標(biāo)動(dòng)畫是微交互其中的一種。它的目的是吸引用戶，讓用戶感覺順暢、愉悅。
最近，讓我印象深刻的一個(gè)圖標(biāo)動(dòng)畫是 Facebook 的新消息提醒界面，這些由產(chǎn)品所包含的一個(gè)個(gè)小細(xì)節(jié)，創(chuàng)造出了新穎而有趣的設(shè)計(jì)。
△ Facebook Website
在 UI 界面中，最常見的分隔方式是用細(xì)線對模塊進(jìn)行劃分，但隨著設(shè)計(jì)重心趨向簡約，注重內(nèi)容本身，傳統(tǒng)的分隔線方式就略顯多余。
根據(jù)格式塔親密原則，通過留白控制間距大小，可以清晰地劃分模塊層級，同時(shí)界面看起來也更加透氣、富有張力?？梢钥吹?QQ、飛聊、Gmail、Messenger 等應(yīng)用都采用了留白分隔。
△ Gmail & Messenger
1. 品牌形象插畫
一個(gè)好的插畫作品可以為產(chǎn)品帶來極佳的辨識度。Snapchat 的頁面用了很多情感化設(shè)計(jì)和品牌形象，包括開啟通知引導(dǎo)動(dòng)畫、查找好友 landing page、下拉刷新頁、照片回憶等等。
從品牌的個(gè)性化設(shè)計(jì)，尋找一種基于插畫的設(shè)計(jì)語言，把產(chǎn)品塑造成一個(gè)高辨識度的 ID。
△ Snapchat
2. 3D插畫
隨著軟件技術(shù)的提升，3D 插畫在這幾年中大受歡迎，很多應(yīng)用都使用 3D 渲染產(chǎn)品，如：星巴克、Keep、毒App 等等，因?yàn)樗鎸?shí)立體，有著更高的轉(zhuǎn)化率。
△ Starbucks by Wojciech
△ Keep & 毒
圓角代表友好、親和力，而卡片模塊化的布局更為清晰、有效、整潔。
在上周的微信改版《微信 7.0.5 發(fā)布：9個(gè)細(xì)節(jié)提升體驗(yàn)》的文章中，我講到了訂閱號的推送文章去掉了標(biāo)題欄的背景，卡片變得更加簡潔。另外，公眾號詳情頁由原先的列表式，改成了圓角卡片式，彈窗也由直角改成圓角。
△ Broadcasting & 微信
長期以來，圖像在視覺設(shè)計(jì)中起著至關(guān)重要的作用，而視頻能夠更直觀的吸引用戶，傳達(dá)主要的思想。
在移動(dòng)端中，視頻主要用于登錄頁背景，一般可以是幾秒鐘的循環(huán)剪輯視頻，它可以帶來一種身臨其境的體驗(yàn)感受。
△ Lyft & Nike
Toast 是一種輕量級的提示，作為用戶操作后的反饋。UI 形態(tài)上從居中浮層，慢慢趨向于底部通欄樣式。這樣設(shè)計(jì)的好處是不會擋住當(dāng)前界面的內(nèi)容。
舉一個(gè)反例，iOS 的調(diào)整音量提示，大范圍的遮住了界面，特別是對正在玩游戲的用戶非常不友好，直到 iOS 13 這個(gè)設(shè)計(jì)才被修改。
△ Google Earth & Spotify
隨著扁平化設(shè)計(jì)和 Material Design 進(jìn)一步占據(jù)主流趨勢，簡約的界面，明亮，大膽的色彩一直都處于增長趨勢。色彩平鋪已經(jīng)成為清新、酷炫、數(shù)字時(shí)代的代名詞。
△ Snapchat & Spotify
重內(nèi)容、輕 UI，把注意力引導(dǎo)在重要內(nèi)容和功能上。像 Facebook、Instagram 這種以圖片社交為主的 App 都有一個(gè)特點(diǎn)，就是文字都是黑白灰，將彩色交給圖片去傳達(dá)，讓用戶關(guān)注內(nèi)容即可。
△ Facebook for Android
增強(qiáng)現(xiàn)實(shí)的技術(shù)，已經(jīng)出現(xiàn)在很多 Web、App 等領(lǐng)域中。許多平臺開發(fā)者也將增強(qiáng)現(xiàn)實(shí)技術(shù)納入其開發(fā)工具里面，可預(yù)期到這種類型的 App 將會越來越多。
1. 地圖導(dǎo)視界面
地圖+AR，讓你不再盯著二維平面上那個(gè)藍(lán)色的點(diǎn)，而是現(xiàn)實(shí)世界中的箭頭告訴你在哪個(gè)路口轉(zhuǎn)向。
△ Google Map
2. 表情貼紙
Instagram、Snapchat、Messenger 等平臺可用 AR 濾鏡來創(chuàng)作，表情貼紙可以幫助用戶更直白有效地自我表達(dá)、獲取注意力。
△ Spark AR
隨著 5G、車聯(lián)網(wǎng)、人工智能、自動(dòng)駕駛的發(fā)展，車載界面也越來越受重視了。
在今年的 Google I/O 開發(fā)者大會上，針對車載系統(tǒng) Android Auto，推出了新的設(shè)計(jì)語言，它有著更好的可拓展性。在 UI 上，完全重新設(shè)計(jì)了導(dǎo)航欄，能夠更輕松地訪問應(yīng)用、通知，和你的 Google 智能助理，最大限度的幫助駕駛者減少分心，將注意力集中在道路上。
△ Android Auto UI
此外，還開發(fā)了新的系統(tǒng)小部件，在使用地圖進(jìn)行導(dǎo)航時(shí)，仍然可以一鍵控制音樂應(yīng)用，或者正在進(jìn)行的電話，同時(shí)在屏幕上保持地圖的完整視圖。
UI 設(shè)計(jì)的趨勢除了側(cè)重內(nèi)容和情感之外，還會根據(jù)不同設(shè)備載體、新的技術(shù)（3D、AR）而變化。但歸根結(jié)底還是以人為本，借用 Adobe 設(shè)計(jì)副總裁 Jamie Myrold 的一句話：如今設(shè)計(jì)師要思考的，絕不僅僅是設(shè)計(jì)一款 App、網(wǎng)站或設(shè)計(jì)工具。我們要思考的是人類的需求，用戶的需求，打造真正人性化，多元化與包容性的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
我們在日常工作中幾乎離不開扭曲和變形工具，它可以幫助一個(gè)設(shè)計(jì)師校正一個(gè)元素的透視關(guān)系，或者為設(shè)計(jì)好的標(biāo)志貼效果圖。除了這些日常的應(yīng)用以外，扭曲工具還有哪些有趣的應(yīng)用場景呢？我們今天的內(nèi)容就會幫你找到答案。
從宏觀的角度來講，這種扭曲的手法，它設(shè)計(jì)出的版面變化方式是非常多的，我們將比較熟悉的文字進(jìn)行扭曲，是可以呈現(xiàn)出其它的表現(xiàn)形式的。
比如說，最左側(cè)這個(gè)海報(bào)，我們不光能看出來它的文字信息，還具有樓梯的印象；中間的這個(gè)海報(bào)，它把文字變換成了晾衣繩的感覺；我們再看最右側(cè)的這個(gè)海報(bào)，很明顯它就是一把扇子對吧。
這種表現(xiàn)形式它是比較抽象的，再加上它能夠變異成其它的形狀，所以，這種版面風(fēng)格也會傳遞出一種趣味感。
我們在現(xiàn)實(shí)生活當(dāng)中扭曲的圖像，它屬于一種光學(xué)的現(xiàn)象，比方說哈哈鏡，它就是利用了這個(gè)原理，表面凹凸不平的鏡面，反映出人像或者是物體的扭曲面貌，進(jìn)而產(chǎn)生了幽默感。
生活當(dāng)中的望遠(yuǎn)鏡放大鏡顯微鏡，也都是利用了這種凹凸的透鏡原理來實(shí)現(xiàn)的。
我們?nèi)祟愡€處于原始的時(shí)期，就已經(jīng)開始運(yùn)用繪畫來記錄身邊的事物，在經(jīng)過不斷的發(fā)展，藝術(shù)家它們的繪畫技藝也變得越來越逼真，甚至達(dá)到了和照片難辨真假的程度。當(dāng)寫實(shí)的風(fēng)格幾乎走到的時(shí)候，藝術(shù)家為了尋找新的藝術(shù)發(fā)展方向，畫風(fēng)就開始變得扭曲起來，變得抽象起來，從而產(chǎn)生了超現(xiàn)實(shí)的藝術(shù)流派。
我們將本來是圓形的西瓜和籃球限定在一個(gè)圓角矩形的這種做法，也是一種抽象的思維方式。
在這里我們?yōu)榇蠹覄澐至宋宸N常用的表現(xiàn)技巧，這些都是我們?nèi)粘９ぷ鳟?dāng)中經(jīng)常用到的一個(gè)扭曲技巧，我們分別介紹給大家。首先第一個(gè)就是液化這個(gè)工具，液化這個(gè)濾鏡應(yīng)該算是非專業(yè)人員都會知道的美顏功能，這個(gè) ps 濾鏡被用在了各種美艷的 app 里，這種夸張的藝術(shù)創(chuàng)作在漫畫里面是經(jīng)常出現(xiàn)的。
我們來通過網(wǎng)格感受一下液化命令到底是出現(xiàn)了哪些變化，液化的好處就是能夠根據(jù)實(shí)際情況手動(dòng)調(diào)節(jié)畫面的扭曲幅度。它的自由度比較高，但是它的缺點(diǎn)也是自由度比較高，所以難度會比較大一些。
在設(shè)計(jì)的過程當(dāng)中，也可以運(yùn)用這個(gè)功能來刻畫主體，產(chǎn)生一種遮擋的效果。我們也可以通過扭曲讓文字的部分結(jié)構(gòu)變得不容易認(rèn)讀，這就能達(dá)到設(shè)置懸念的作用，我們也可以通過其它不同幅度的扭曲變形，達(dá)到自己想要的狀態(tài)。我們看上圖是日本TDC 的獲獎(jiǎng)作品之一，作者是村上雅士，它運(yùn)用的就是液化功能，將原本很平淡的版面，通過扭曲的變化，達(dá)到了吸引眼球的藝術(shù)效果。
這個(gè)是臺灣設(shè)計(jì)師聶永真，他為2017年金點(diǎn)概念設(shè)計(jì)獎(jiǎng)制作的主視覺海報(bào)，這個(gè)海報(bào)它以不規(guī)則的曲線呈現(xiàn)，并且搭上充滿想象的文案，有耳目一新的形象。
下面我們來看一下球面化的工具，我們大家都知道，杯子中的水具有扭曲光線的作用，我們插到水里的這個(gè)筆它就會產(chǎn)生扭曲的現(xiàn)象，這個(gè)就是光的折射。我們在設(shè)計(jì)當(dāng)中進(jìn)行簡單的圖像合成時(shí)，也需要遵守這個(gè)物理定律。
我們這里通過網(wǎng)格來看一下這種形態(tài)的具體表現(xiàn)，顧名思義球面化的命令就是能夠?qū)⑦x區(qū)內(nèi)的畫面進(jìn)行球面的扭曲。它適合用在圖像合成或者是還原真實(shí)性的場景里面，我們通過調(diào)整不同的幅度，產(chǎn)生不同的魚眼效果。
除了基本的球面化扭曲，我們這個(gè)選擇里還提供了水平和垂直的變化，形成類似圓柱體的表面效果。我們在產(chǎn)品貼圖圖像和形象的領(lǐng)域是經(jīng)常用到這個(gè)東西的，我們調(diào)整不同的扭曲幅度，能夠完美的讓圖像貼合到柱狀的弧形表面上。
這里給大家準(zhǔn)備了一個(gè)案例，我們給它添加一個(gè)氣泡，然后再產(chǎn)生一些光影的效果，如果說我想讓這個(gè)畫面變得更真實(shí)一些，我們在設(shè)計(jì)的時(shí)候就要考慮到物理定律，這個(gè)時(shí)候就可以用球面化的命令。我們讓圓形下面的文字產(chǎn)生光線折射的感覺，調(diào)節(jié)選項(xiàng)中的滑塊，找到那個(gè)最接近真實(shí)的反射效果。
這個(gè)案例是我們研習(xí)設(shè)之前教程里提供的一個(gè)案例，我們看圖中這個(gè)玻璃球和文字的銜接部分，用的就是球面化的效果。我們只看右側(cè)這個(gè)對比圖，你可以明顯感覺出來，底部這個(gè)經(jīng)過修改后的細(xì)節(jié)是更真實(shí)的，文字經(jīng)過玻璃的反射，它一定會產(chǎn)生扭曲的視覺印象。
下一個(gè)給大家介紹一下極坐標(biāo)，極坐標(biāo)這個(gè)詞聽上去會比較陌生一些，但是你會非常熟悉，比如說這個(gè)啟動(dòng)畫面，這個(gè)是PS cc版本的啟動(dòng)插圖，它就是運(yùn)用極坐標(biāo)的命令實(shí)現(xiàn)的效果。除了能夠?qū)崿F(xiàn)從內(nèi)部向外旋轉(zhuǎn)的這個(gè)洞穴效果，還可以表現(xiàn)成類似于球體的效果。
我們繼續(xù)通過網(wǎng)格來看一下它的扭曲原理，這里給大家做了一個(gè)細(xì)節(jié)的變化，是為了方便大家觀察它的扭曲方向，我們給這個(gè)網(wǎng)格添加了顏色，頂部是藍(lán)色，底部是紅色，接下來我們?yōu)樗鼒?zhí)行極坐標(biāo)的命令。
執(zhí)行極坐標(biāo)這個(gè)命令后可以很明顯地看出，原來底部的網(wǎng)格內(nèi)容被扭曲到了圓形的外側(cè)，就是紅色部分，變成了這個(gè)球的外側(cè)，內(nèi)部這個(gè)藍(lán)色，就是之前頂部的藍(lán)色部分。
它也提供了另一個(gè)額外的扭曲選項(xiàng)，扭曲后的效果就是這樣的，這個(gè)效果我們不常用。
我們選擇這張圖來作為演示，讓大家明白極坐標(biāo)是什么原理，我們?yōu)樗砑訕O坐標(biāo)的效果，這個(gè)時(shí)候需要確定什么？就是圖像的朝向問題，因?yàn)檫@個(gè)直接決定了最終的扭曲效果。
頂部的區(qū)域會在圓的內(nèi)部出現(xiàn)，底部的區(qū)域會在圓的外部，我們根據(jù)想要達(dá)到的最終效果，來判斷圖像的具體朝向。這里制作了兩種朝向的扭曲畫面，左邊的是地面在內(nèi)部的球體效果，右邊是地面在外部類似于洞穴效果。
我們在扭曲命令之后，需要手動(dòng)將畫面這個(gè)銜接部分處理掉。你可以用圖章工具處理掉，這個(gè)畫面就做完了。
再舉一個(gè)例子，這個(gè)畫面我要做的是人物在球體表面的效果，我們要考慮到方向，所以我們要將它旋轉(zhuǎn)180度，然后添加極坐標(biāo)命令。
使用修補(bǔ)工具來完成這個(gè)銜接部分，這個(gè)畫面就完成了。
我們再來看下一個(gè)，下一個(gè)就是文字扭曲，也是我們這節(jié)課比較重要的一個(gè)內(nèi)容。這個(gè)命令跟其它命令不同的地方就在于它不是在濾鏡菜單下面，它是在文字編輯欄的右側(cè)，在樣式選擇里，它提供了很多不同的扭曲方法。
這種方法相對于液化或者是自由變換更方便一些，因?yàn)樗倪@個(gè)可操控性很強(qiáng)，頂部提供了兩種扭曲方向，底部選擇則是調(diào)整扭曲的幅度。
這里我們簡單地制作了幾種文字樣式，就是這個(gè)命令，它會讓文字變得更接近圖形化。
下一個(gè)我們來給大家介紹一下置換的扭曲風(fēng)格，它的扭曲原理就是將被置換的元素，再加上需要被扭曲的元素，它們二者相結(jié)合，從而達(dá)到被置換元素一樣的扭曲效果。這個(gè)話有點(diǎn)繞，我們通過下面的例子就明白什么是置換了。置換的幅度不同，扭曲的大小也會發(fā)生相應(yīng)的變化。
比方說我們這里被置換的元素可以是任何圖像，煙霧、絲綢、水波紋、液態(tài)流體或者是火焰，它們都可以當(dāng)成被置換的元素。
比如說這里我們想讓鴿子圖案和旗幟結(jié)合，這個(gè)時(shí)候就需要用到置換的扭曲命令。首先第一步要做到的就是確定好鴿子在旗幟里的比例大小，然后要調(diào)整透視和傾斜角度來適應(yīng)旗幟的表面輪廓。
最后執(zhí)行置換命令，讓鴿子的圖像加入旗幟的扭曲輪廓，這樣就形成了兩者的完美結(jié)合了。界面里水平與垂直的比例，都是可以用數(shù)值來調(diào)整的。
我們再看下一個(gè)，不光是圖形，文字也是一樣的，添加置換命令之后，文字就會置入到了這個(gè)場景里，它的原理和之前是一模一樣的。
我們再來看一下其它使用置換手法設(shè)計(jì)出來的版面，它們都是在表現(xiàn)原有信息的基礎(chǔ)之上，通過置換的扭曲為版面，加入了另一種形態(tài)。左側(cè)的飄動(dòng)絲綢中間的樓梯和右側(cè)的這個(gè)有點(diǎn)類似于紙張扭曲的效果，這些都是用置換這個(gè)命令來表現(xiàn)出來的。
我們來看一下，同樣都是這個(gè)扭曲，用扭曲的這個(gè)思維，它設(shè)計(jì)出來的畫面應(yīng)該是什么樣的。這個(gè)版面里文字信息使用的就是扭曲的變換形式，主體文字周圍圍繞著不規(guī)則的扭曲文字，增加主體形象的形式感。這種手法雖然會減弱文字的識別性，但換來的是視覺吸引力。如果想讓選擇的文字扭曲的話，這個(gè)文字最好是比較大的標(biāo)題性文字。如果是小文字扭曲之后，它的識別性基本就沒有了。
我們再來看下一個(gè)版面，大家應(yīng)該能看出來，它就是運(yùn)用了我們前面講到的液化扭曲命令，思路就是重復(fù)的文字，它能起到強(qiáng)調(diào)作用。但有的時(shí)候你每一個(gè)細(xì)節(jié)都完全一樣，它就會有單調(diào)的感覺，我們通過液化工具在對角線上進(jìn)行扭曲，這樣就會產(chǎn)生變化。
我們再來看下一個(gè)，這個(gè)效果是比較有趣的，它是用什么方式制作的？它是拍攝的。這個(gè)設(shè)計(jì)有的時(shí)候就像拍電影一樣，并不是所有場景都必須依賴電腦，有的時(shí)候?qū)嵕芭臄z也能夠帶來更好的真實(shí)感。
這個(gè)版面用的是置換手法，由于我們沒有辦法找到相同的幕布，這里我們找了一個(gè)類似的作為載體，我們在上方加入文字信息，然后用置換命令，這個(gè)就變成了跟海報(bào)類似的感覺了。
這個(gè)版面和上一個(gè)有一些類似，但是不同的是它沒有背景，它沒有載體。這是因?yàn)榕で牟馁|(zhì)背景直接鑲嵌在文字的輪廓里了。給大家舉一個(gè)例子，很簡單的思路，我們選擇一個(gè)具有扭曲表面的背景圖片，然后將文字放到這個(gè)圖片上方，應(yīng)用置換命令，采用多重曝光的手法。我們將這個(gè)材質(zhì)鑲嵌到文字里面就完成了，這樣就看不到材質(zhì)了。
那么最后，給大家做一個(gè)案例演示，用到的就是扭曲的命令，這是一個(gè)活動(dòng)展覽的項(xiàng)目，它的主題叫流動(dòng)消融。
為了達(dá)到宣傳的目的，這里尋找一個(gè)能夠讓文案中的概念實(shí)體化的載體，就是標(biāo)題，它的標(biāo)題很直接了，那么提取主標(biāo)題作為版面里的視覺元素，讓它變得很大，成為本案的主體。然后我們將文字稍微拉長一些，這個(gè)拉長是手動(dòng)拉長的，所以它會出現(xiàn)橫粗豎細(xì)的現(xiàn)象，這個(gè)時(shí)候就需要修改了，調(diào)整筆畫的粗細(xì)統(tǒng)一，去掉一些不必要的細(xì)節(jié)，這樣這個(gè)主標(biāo)題就刻畫完成了。
然后我們繪制版面的比例關(guān)系，這一步的目的就是確定主體在版面里的大小。然后主體的這四個(gè)字就放在畫面里的上部區(qū)域，底部的這個(gè)紅色區(qū)域，我們來安排其它的文字信息。
接下來把其余的文字信息編排到版面的下方，我們所有文字編排好以后，最后一步，為畫面添加一個(gè)水波紋的細(xì)節(jié)部分。
采用置換命令讓二者結(jié)合，然后把水波紋去掉，鑲嵌到文字里。
這個(gè)版面到這里就完成了，我們來看一下它實(shí)際的應(yīng)用效果。
今天我們一起學(xué)習(xí)了扭曲技巧在版面里的應(yīng)用，也知道了這類風(fēng)格它的五種常用表現(xiàn)技巧，扭曲的這個(gè)版面不但可以和其它形狀結(jié)合，更能為版面帶來豐富的形式感，它是我們做主形象非常好用的一個(gè)手法。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn