如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
AR的特點(diǎn)
AR的場景多種多樣，其中在手機(jī)設(shè)備的AR體驗(yàn)中，有一種基本且常見的場景：通過手機(jī)攝像頭，用戶在環(huán)境中放置虛擬物體（模型），用戶與它有一些具體的互動操作，如移動、旋轉(zhuǎn)等。
我們將這類場景統(tǒng)一稱為放置類AR場景：放置對象可以是一扇虛擬場景的任意門，用戶可走入門中互動；也可以是一件家居商品，用戶可預(yù)覽商品是否與室內(nèi)環(huán)境搭配等。針對不同的放置對象和場景，設(shè)計(jì)側(cè)重點(diǎn)也會有所不同。
基于真實(shí)環(huán)境放置虛擬模型，并與模型進(jìn)行交互的AR場景。
無論放置的對象類型如何，用戶打開相機(jī)，在屏幕中放下具體模型和進(jìn)行互動的過程具有共性。我們把中間的完整流程拆分為了以下部分：
用戶打開放置類AR功能后，進(jìn)入環(huán)境識別前的過程，均屬于初始啟動的范圍。放置類AR為何需要有初始啟動環(huán)節(jié)，用戶不直接進(jìn)入AR場景進(jìn)行體驗(yàn)？
由于技術(shù)和產(chǎn)品的需要，放置類AR初始啟動承載幫助用戶理解、AR素材準(zhǔn)備，為用戶帶來更優(yōu)的AR體驗(yàn)。
初始啟動的流程中，包括啟動頁、引導(dǎo)頁、加載頁三個(gè)部分節(jié)點(diǎn)，三個(gè)節(jié)點(diǎn)可同時(shí)存在，也可只存在一個(gè)或兩個(gè)節(jié)點(diǎn)，具體需要根據(jù)設(shè)計(jì)需求來決定。
啟動頁的定義及設(shè)計(jì)形式
在啟動頁游戲AR應(yīng)用中比較常見，只有短暫停留。頁面起到品牌露出的作用，或在啟動APP后渲染氛圍，迅速將用戶帶入。設(shè)計(jì)手段包含：音樂、音效、視覺、文字、動效，具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下兩種設(shè)計(jì)內(nèi)容：
啟動頁雖然不傳遞明確的含義和信息，但不同的設(shè)計(jì)手段可以給用戶傳遞出不同的品牌調(diào)性和場景氛圍感，其中音效和動效形式的應(yīng)用會增加啟動頁設(shè)計(jì)的吸引力，下面將結(jié)合案例具體說明。
引導(dǎo)頁的定義及設(shè)計(jì)形式
引導(dǎo)頁促進(jìn)用戶進(jìn)入后續(xù)的核心體驗(yàn)流程，傳達(dá)有關(guān)體驗(yàn)的明確內(nèi)容，根據(jù) APP 的類型，引導(dǎo)內(nèi)容有所不同。但不涉及后續(xù)具體細(xì)節(jié)操作。常見的引導(dǎo)包含：內(nèi)容介紹、安全警告、體驗(yàn)建議、環(huán)境要求、玩法介紹、新手引導(dǎo)等。設(shè)計(jì)手段包含：語音、音樂、音效、視覺、文字、動效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定?？梢詤⒖家韵挛宸N設(shè)計(jì)內(nèi)容：
引導(dǎo)頁有明確內(nèi)容，根據(jù)設(shè)計(jì)需求可以考慮從產(chǎn)品介紹、展示輔助信息、在體驗(yàn)時(shí)的建議或要求等。每種設(shè)計(jì)內(nèi)容有各自的適用場景、設(shè)計(jì)形式及優(yōu)缺點(diǎn)，將結(jié)合具體的案例進(jìn)行說明。
加載頁定義及設(shè)計(jì)形式
加載頁需要用戶等待，加載時(shí)長根據(jù)加載內(nèi)容的大小而變化。過程可能包含素材下載、模型加載、材質(zhì)渲染、界面UI等。設(shè)計(jì)手段：文字、視覺、動效、音樂、音效。具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定?？梢詤⒖家韵挛宸N設(shè)計(jì)形式：
建議使用Jigspace、Lego AR、AliceARQuest等AR應(yīng)用進(jìn)行體驗(yàn)。
整個(gè)初始啟動環(huán)節(jié)包含啟動頁、引導(dǎo)頁和加載頁，整體的設(shè)計(jì)原則可總結(jié)為：
初始啟動設(shè)計(jì)第一步是根據(jù)應(yīng)用類型選擇設(shè)計(jì)內(nèi)容和形式
不管是啟動頁還是引導(dǎo)頁的設(shè)計(jì)，都需要根據(jù)應(yīng)用的類型去決定以何種形式給用戶展現(xiàn)必要的信息。例如：游戲類注重用戶的沉浸感，引導(dǎo)以故事介紹+體驗(yàn)建議為主?？破疹惖男枰ㄟ^界面+三維的形式展示更多信息給用戶，引導(dǎo)以產(chǎn)品介紹和信息補(bǔ)充為主。
啟動頁設(shè)計(jì)目標(biāo)導(dǎo)向，不拖沓不無聊
根據(jù)APP類別選擇恰當(dāng)?shù)男问?，盡量簡單直接，盡快進(jìn)入后續(xù)內(nèi)容頁。游戲類可形式豐富，時(shí)長稍長。
引導(dǎo)頁設(shè)計(jì)簡單直接，使用多維度設(shè)計(jì)手段增加引導(dǎo)信息的豐富度
不管引導(dǎo)的內(nèi)容是產(chǎn)品介紹，還是試玩引導(dǎo)，簡單直接始終是目標(biāo)，不在引導(dǎo)的部分占用用戶過長的時(shí)間。另外也不能為了節(jié)約時(shí)間而使必要信息缺失，因此可以選擇豐富的設(shè)計(jì)手段，讓必要信息充分暴露。
加載頁設(shè)計(jì)優(yōu)先考慮無感知加載，否則根據(jù)加載時(shí)長使用不同形式
如無法無感知，則根據(jù)加載時(shí)長選擇加載的設(shè)計(jì)形式。例如：時(shí)長較短的加載過程需要簡單明快，不打擾用戶。時(shí)長較長的加載過程需要過程明晰，給用戶明確的預(yù)期。盡可能避免阻斷式的加載過程。通過設(shè)計(jì)方法增加長時(shí)間等待的愉悅感，減少不耐煩。
AR應(yīng)用啟動后，經(jīng)歷完內(nèi)容引導(dǎo)加載的過程，便正式進(jìn)入了AR場景搭建環(huán)節(jié)。從技術(shù)的角度來說，想讓模型穩(wěn)定地融合于真實(shí)世界，我們首先需要讓手機(jī)攝像頭認(rèn)識周圍的環(huán)境，即為場景搭建的第一環(huán)節(jié)：環(huán)境的感知識別（環(huán)境識別包括平面識別、圖片識別、物體識別等，本文聚焦在環(huán)境中的平面識別）。確定平面之后才能繼續(xù)進(jìn)行模型放置，直至用戶成功把模型在真實(shí)環(huán)境中放下。
平面識別指通過對環(huán)境特征的感知，確定一個(gè)基于真實(shí)環(huán)境的平面。確定放置平面后，即可構(gòu)建虛擬世界的坐標(biāo)系，在虛擬世界中放置模型。平面識別是放置類AR體驗(yàn)的第一步，是后續(xù)所有體驗(yàn)內(nèi)容存在的基石。因此在設(shè)計(jì)中我們需要保證平面識別的成功率，保證用戶的順暢體驗(yàn)。
這個(gè)環(huán)節(jié)本質(zhì)上是個(gè)技術(shù)驅(qū)動的環(huán)節(jié)。程序啟動后，系統(tǒng)以手機(jī)攝像頭為原點(diǎn)建立了3D世界坐標(biāo)系。相機(jī)界面打開后，系統(tǒng)開始識別拍攝到的真實(shí)環(huán)境。通過檢測所捕獲的圖像之間的視覺差異點(diǎn)（即特征點(diǎn)），系統(tǒng)可以確立一個(gè)平面，并在世界坐標(biāo)系中賦予平面一個(gè)位置信息，自此3D世界坐標(biāo)系與真實(shí)環(huán)境中的平面建立了聯(lián)系。找到平面后，系統(tǒng)仍會持續(xù)進(jìn)行檢測、更新平面的信息。
平面識別的成功需要用戶將手機(jī)攝像頭對準(zhǔn)平面并移動手機(jī)，從而獲得更多平面的特征點(diǎn)、確定平面。因此在設(shè)計(jì)中，首先需要引導(dǎo)用戶做此動作配合；同時(shí)在用戶動作中，應(yīng)對識別狀態(tài)給予實(shí)時(shí)反饋，讓用戶有把控感；識別失敗時(shí)，有效的容錯(cuò)設(shè)計(jì)可以減少用戶挫敗感，提升識別成功率。設(shè)計(jì)節(jié)點(diǎn)可總結(jié)為以下幾點(diǎn)：
動作引導(dǎo)定義及設(shè)計(jì)形式
動作引導(dǎo)需要引導(dǎo)用戶做出配合的動作從而成功識別到平面。主要的引導(dǎo)內(nèi)容是：引導(dǎo)用戶將手機(jī)朝向一個(gè)平面任意方向移動，從而識別到平面。
表現(xiàn)用戶動作的引導(dǎo)形式有多種，如：文字、圖片、動圖、語音以及這些方式的組合方案等等。每種單提示形式都有其各自的優(yōu)缺點(diǎn)。如文字可準(zhǔn)確傳達(dá)信息但閱讀時(shí)間較長；動圖傳達(dá)直觀，但準(zhǔn)確性不夠等。因此建議使用組合方案的形式進(jìn)行動作提示，結(jié)合單提示形式的優(yōu)點(diǎn)，同時(shí)規(guī)避其缺點(diǎn)?？梢詤⒖家韵?種：
動作引導(dǎo)建議使用組合方案來進(jìn)行提示，可以根據(jù)產(chǎn)品類型和場景選擇合適的方案。結(jié)合具體案例以說明：
平面識別中的定義及設(shè)計(jì)形式
程序識別平面的過程中，所花費(fèi)時(shí)間往往受用戶所處環(huán)境的影響，環(huán)境較復(fù)雜時(shí)，識別時(shí)間可能較長。因此建議在平面識別的過程中，反饋?zhàn)R別的狀態(tài)，幫助用戶了解系統(tǒng)的行為，知道自己所處的狀態(tài)。狀態(tài)反饋有兩種建議的方式：
平面識別中的狀態(tài)反饋可以讓用戶了解系統(tǒng)行為，明晰所屬狀態(tài)。該步驟通常會和下一步合并設(shè)計(jì)。結(jié)合案例進(jìn)行說明：
平面識別成功的定義及設(shè)計(jì)形式
平面識別成功后，建議可視化檢測到的平面，給用戶成功的反饋，同時(shí)讓用戶知道即將放置模型的平面在哪里。
平面識別成功的反饋是平面識別環(huán)節(jié)完成的節(jié)點(diǎn)，該步驟可能與之后的模型放置結(jié)合設(shè)計(jì)。結(jié)合案例進(jìn)行說明。
平面識別異常的原因及設(shè)計(jì)
前文提到平面識別主要依賴對環(huán)境特征的檢測，在一些情況下會很難識別到平面。當(dāng)出現(xiàn)異常時(shí)，如何引導(dǎo)用戶解決異常也是體驗(yàn)設(shè)計(jì)的重要內(nèi)容之一。經(jīng)過前期技術(shù)調(diào)研，平面識別異常的情況主要有以下幾種：
我們可以對每種異常進(jìn)行具體的提示，也可以給出綜合提示。這里建議的異常提示策略主要有兩種：
進(jìn)行提示內(nèi)容話術(shù)設(shè)計(jì)時(shí)需注意：
另外異常提示的設(shè)計(jì)形式也有多種：文字、圖片、動圖、語音、組合方案等等。在設(shè)計(jì)時(shí)需要結(jié)合「動作引導(dǎo)」的設(shè)計(jì)形式進(jìn)行整體提示的組合方案設(shè)計(jì)。例如動作引導(dǎo)是文字+動圖的形式，異常提示就不應(yīng)該出現(xiàn)語音形式；動作引導(dǎo)是文字+語音形式，異常提示同樣使用語音的形式更一致。
平面識別的設(shè)計(jì)原則及建議
平面識別的設(shè)計(jì)原則及建議：
確定了放置平面后，下一步就是放置模型。模型放置指：通過一定的放置方式，讓模型出現(xiàn)在平面的某個(gè)位置上。
在模型放置模塊中，我們需要定義和設(shè)計(jì)放置方式以及放置位置。放置方式可以是自動放置，也可以是手動放置。放置位置可以是給用戶體驗(yàn)效果最好的一個(gè)坐標(biāo)點(diǎn)，即最佳放置位置；也可以是一片區(qū)域的任意一個(gè)坐標(biāo)點(diǎn)，即可放置區(qū)域。
1. 放置方式的定義及設(shè)計(jì)形式
模型的放置方式主要有兩大類：
可以參考以下三種設(shè)計(jì)形式：
模型的放置方式主要有自動放置與手動放置，可根據(jù)不同場景設(shè)定適宜的放置方式，以下結(jié)合案例具體說明。
2. 放置位置的設(shè)計(jì)內(nèi)容及建議
放置模型時(shí)，模型即將放置的位置需要根據(jù)具體互動場景進(jìn)行設(shè)計(jì)，以保證用戶的視覺體驗(yàn)和互動體驗(yàn)。如果模型放置過近，用戶無法看到模型全貌；過遠(yuǎn)，需要用戶走動才能進(jìn)行互動的應(yīng)用會增加互動難度。可以參考以下兩種設(shè)計(jì)內(nèi)容：
在做具體的放置位置設(shè)計(jì)時(shí)，需要考慮以下幾方面的因素：
藍(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
即使是進(jìn)的技術(shù)，也通常有一個(gè)非常原始的起點(diǎn)。從最初的手機(jī)到如今大規(guī)模普及的智能電話，其實(shí)經(jīng)歷了差不多30年的演變。
隨著硬件設(shè)備和各種技術(shù)的逐步成熟，每個(gè)人都想知道技術(shù)的下一個(gè)變革在哪里。在諸多被廣泛關(guān)注的革命性技術(shù)當(dāng)中，AR，也就是現(xiàn)實(shí)增強(qiáng)技術(shù)領(lǐng)域所發(fā)生的變化，是最引人矚目的。
隨著蘋果、谷歌和亞馬遜這樣處于排頭的公司開始在 AR 領(lǐng)域發(fā)力，這種技術(shù)正在逐步成為主流。
「AR能夠?qū)⑷说谋憩F(xiàn)力放大，而不是孤立起來」——Tim Cook
雖然 AR 和 VR 經(jīng)常會被混淆，但是兩者其實(shí)并不相同。從關(guān)系上來講，AR 和 VR 并非是對立的敵人，更像是血脈相近的堂兄弟。兩者之間的區(qū)別其實(shí)很簡單：在 VR 中，我們眼中的物理現(xiàn)實(shí)世界被計(jì)算機(jī)所生成的數(shù)字世界給徹底取代了。相比之下，AR技術(shù)讓數(shù)字信息直接疊加在我們可見的物理世界中。如今很多人都已經(jīng)借助類似 Snapchat 濾鏡之類的東西感受到 AR 在現(xiàn)實(shí)生活中的運(yùn)用。
這種集成于各種攝影和即使通訊類軟件中的AR濾鏡，和如今 iPhone 在設(shè)計(jì)和研發(fā)上隱約一脈相承。
Tim Cook 在接受采訪的時(shí)候曾經(jīng)提及，AR 在他眼中并非是一種孤立產(chǎn)品，而是一種核心技術(shù)。對于這一技術(shù)，Cook 是這樣評論的：「智能手機(jī)是給每一個(gè)人的，我們沒有必要將它孤立而片面地放在某一國家、地區(qū)或者某個(gè)垂直市場中來看待，它是面向每一個(gè)人的。我們認(rèn)為 AR 是一個(gè)宏大的技術(shù)范疇，對此我感到非常振奮，因?yàn)樵诖嘶A(chǔ)上可以從方方面面來改善人們的生活?！?
根據(jù) Deloitte 所發(fā)布的一份報(bào)告，在年?duì)I收超過1億美元的企業(yè)中，近 90% 都已經(jīng)在其業(yè)務(wù)或者APP 中開始應(yīng)用AR或者VR技術(shù)。就目前的數(shù)據(jù)來看，他們這方面的財(cái)務(wù)狀況也相當(dāng)樂觀。到2023年，AR 和 VR 相關(guān)的全球市場估計(jì)將會達(dá)到944億美元。
當(dāng)然，另外一方面企業(yè)和品牌也在竭盡全力地挖掘在未來商業(yè)領(lǐng)域的潛力，這也是他們推動AR技術(shù)的諸多原因之一。
接下來，我們可以深入討論一下 AR 的內(nèi)涵外延，以及它會如何改變我們和世界的互動方式。
我們生活在一個(gè)大數(shù)據(jù)所驅(qū)動的世界當(dāng)中，大型的結(jié)構(gòu)化和非結(jié)構(gòu)化的數(shù)據(jù)，包裹著我們地每一個(gè)動作。這些數(shù)據(jù)本身就已經(jīng)是一個(gè)很大的話題了。設(shè)計(jì)師和技術(shù)革新者們一直在思考如何理解這些信息，并且合理地運(yùn)用它們。
那么AR 將會如何切入到其中呢？
簡而言之，數(shù)據(jù)是二維的。它存在于計(jì)算機(jī)屏幕上，而物理世界是三維的，這兩個(gè)世界將會怎樣協(xié)調(diào)一致？AR 的作用就在這個(gè)時(shí)候發(fā)揮出來了。
基本上， AR 技術(shù)所充當(dāng)?shù)木褪菍?shù)字和物理現(xiàn)實(shí)接駁在一起的那個(gè)接口。AR 所帶來的是一個(gè)全新的技術(shù)范例。在這個(gè)新領(lǐng)域當(dāng)中，數(shù)據(jù)的復(fù)雜性將會被分析和轉(zhuǎn)化，以更加直觀的交互式圖形和動畫所替代，覆蓋在現(xiàn)實(shí)世界層以上。
在這一點(diǎn)上，AR同法國哲學(xué)家鮑德里亞所夢寐以求的超現(xiàn)實(shí)主義在精神內(nèi)核上高度統(tǒng)一。對于有想象力的技術(shù)革新者和科技企業(yè)而言，AR 技術(shù)的潛在應(yīng)用場景是無止境的。這一技術(shù)將會被大規(guī)模普及開來，在未來，你不必像現(xiàn)在這樣僅僅只能在游戲中體會這一技術(shù)。當(dāng)然，像亞馬遜和 Facebook 這樣的商業(yè)巨頭也開始認(rèn)真探索如何更有意義、以更有影響力的方式來使用 AR 工具。
而這也是大勢所趨。下面我將會拿出一些更為創(chuàng)新的方式，為你呈現(xiàn) AR 技術(shù)是如何具體地改變我們的生活的。
原本在游戲中作為噱頭的 AR 技術(shù)逐漸脫穎而出，在通信、商業(yè)和建筑領(lǐng)域開始展現(xiàn)出無盡的潛力。
而最能感受到AR的這種影響力的，是在品牌和營銷市場上。
由于 AR 能夠承載復(fù)雜的數(shù)據(jù)，并且將它們轉(zhuǎn)化為可同現(xiàn)實(shí)世界進(jìn)行溝通的交互，身為用戶，我們能夠從中吸收更多的信息。換句話說，AR 將可以更好、更快更加有效地影響用戶的決策機(jī)制。我們?nèi)缃癯Ｒ姷纳缃幻襟w和大量的信息，已經(jīng)讓人疲勞了，而 AR 這種全新的切入方式，將可以改變營銷，進(jìn)而影響世界。品牌能夠在 AR 的協(xié)助下以前所未有的方式來宣傳自己和產(chǎn)品。
舉個(gè)簡單的例子。AR 所帶來的體驗(yàn)并非傳統(tǒng)的二維平面的圖像，它讓用戶可以走進(jìn)商店，嘗試產(chǎn)品，幫你判斷產(chǎn)品的實(shí)際效果，它用 X射線一般的視覺幫你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度無死角的視覺。
「在后網(wǎng)絡(luò)時(shí)代，AR就是狼來了的故事——大家早已聽說過，但是很少見到足夠優(yōu)秀的呈現(xiàn)形式?！埂狾m Malik
對于一線的設(shè)計(jì)師而言，AR 技術(shù)是一件聽起來非常令人興奮的事情。但是事情的前后邏輯我們確實(shí)需要仔細(xì)捋一下。Pokemon Go 的成功到底是源于AR技術(shù)的加成，還是源自于品牌本身原有的吸引力？
另一方面，AR 技術(shù)改變生活各方面的巨大潛力直到現(xiàn)在才剛剛顯現(xiàn)。別忘了，移動端設(shè)備的普及和成熟是經(jīng)歷了超過10年的醞釀，直到今天才說得上是比較成熟了。對于 AR 而言，想要立竿見影地看到某種效果，你可能要求有點(diǎn)高。
AR 是一種全新的媒介。設(shè)計(jì)師面對的最主要的挑戰(zhàn)，是要進(jìn)入三維空間進(jìn)行思考。在接下來用戶要如何同APP進(jìn)行交互？他們會做出什么樣的動作？附近會有其他的人和物體嗎？這種情況下用戶會做什么？它并非看起來那么簡單，本質(zhì)上這是一次概念上的徹底飛躍。設(shè)計(jì)師需要在腦海中開始反思這件事情了。
當(dāng)然，只有時(shí)間能夠最終證明 AR 是否會成為 iPhone 一樣劃時(shí)代的產(chǎn)物。一切是會因?yàn)?AR 徹底改變嗎？又或者像 Hi-Fi 一樣進(jìn)入小眾市場，逐漸收縮？可以確信的是，AR 技術(shù)是有相當(dāng)大潛力的，這就是為什么你會聽到越來越多相關(guān)的傳聞。一旦一項(xiàng)技術(shù)開始每天都被提及，那么一切就皆有可能。我們很可能將會在未來以一種截然不同的方式來體驗(yàn)這個(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
1.字號的設(shè)置
2.根據(jù)需求隨意組合
3.英文的行高
4.英文的行間距
5.中文的行高
6.中文的行間距
7.行高的禁忌
8.標(biāo)題行高
9.正文行高
10.混合編排
11.字體選擇
1.字號的設(shè)置
字號就是字體的大小，文字從大標(biāo)題H1-H7、小標(biāo)題、正文、注釋都要配置相對應(yīng)的字號。頁面的字號我是以4為基數(shù)進(jìn)行遞增的，最好采用偶數(shù)。像14號字的正文和13號字的注釋，這種比較小的字可以不以4為基數(shù)來做。不管設(shè)計(jì)師怎么去定義字號，只要視覺上美觀大方并具有關(guān)聯(lián)性，采用哪種規(guī)則去約束它都可以。
另外所有的字體都要調(diào)試出深色和淺色兩種配色，并分別應(yīng)用在白色底色和黑色底色當(dāng)中。黑色底色展示效果不好就不做展示了。
2.根據(jù)需求隨意組合
當(dāng)我們定義好字號，標(biāo)題和正文就可以根據(jù)實(shí)際項(xiàng)目需求進(jìn)行自由搭配了。在給標(biāo)題和正文選擇字號時(shí)要注意它們之間的對比關(guān)系，字號差異越大它們的層級關(guān)系就越明顯，但它們之間的差異又不能太大，差異過大會影響整體的視覺平衡性，給人一種不和諧不自然的感覺。
例如：標(biāo)題字號20px搭配正文字號12px；標(biāo)題字號24px搭配正文字號16px。選用哪種標(biāo)題搭配哪種正文也是由設(shè)計(jì)師的美感決定的。
3.英文的行高
在設(shè)置文本行高的之前，需要理解一下“行高”與“行間距”的差別。前端DIV+CSS和設(shè)計(jì)Affinity Designer等繪圖軟件都是以“行高”來進(jìn)行定義的。在CSS-Style line-height屬性是行高，值分別以百分比、數(shù)值和像素來表示。例如：h1.test {line-height:112px}，那標(biāo)題h1的行高就是112像素了；繪圖軟件中控制行上下距離的也是行高。好的言歸正傳，中文的行高與英文行高會有一些差異，英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，如下圖所示。
基線是英文字體結(jié)構(gòu)中的概念，先簡單了解一下它吧，以后講到字體的時(shí)候再講它吧。我們在繪圖軟件填寫行高的數(shù)值時(shí)，改變的就是上圖所示的這段距離。
4.英文的行間距
英文的行間距就沒有行高那么復(fù)雜，也不用畫基線。英文的行間距跟中文相同，指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實(shí)也可以簡單的理解為“行與行之間的距離”并稱之為行間距。另外英文底部和頂部都有對應(yīng)的專有名詞的，在英文字體結(jié)構(gòu)中最頂部/最底部隱性的兩條線稱為“上沿線/上限線”和“下沿線/下限線”。這塊的知識先了解一下就行，以后在字體結(jié)構(gòu)中會講到。
5.中文的行高
接下來理解下中文的行高。上面講到說英文的行高是由基線決定的，但中文字體與英文字體結(jié)構(gòu)不一樣，中文里沒有基線的概念，那該怎么定義行高呢。中文的結(jié)構(gòu)屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字體結(jié)構(gòu)中沒有上沿線/上限線和下沿線/下限線的概念，它們只存在于英文字體結(jié)構(gòu)中。
6.中文的行間距
中文的行間距就比較好理解了，跟英文的行間距的道理相同。是指一行中文的最底部與下一行中文的最頂部之間的距離。也可以理解為行與行之間的距離。
雖然說行高與行間距的差別不太好區(qū)分，而且還有些繞，但理解它們還是很有必要的。
7.行高的禁忌
不管是標(biāo)題、正文還是注釋，他們的行高都不宜過高，行高過高會導(dǎo)致內(nèi)容不易閱讀，文字之間的整體性也會被打散。標(biāo)題的字號越大行高應(yīng)該越小，正文的字號越小行高應(yīng)該越大。當(dāng)然這些規(guī)則都是相對的，行高大小要合理把控，不能太大或過小。那要如何合理設(shè)置行高呢，往下看。
8.標(biāo)題行高
標(biāo)題的行高由字號決定的。平面設(shè)計(jì)中有時(shí)候可以把行高設(shè)置與字號相同，例如120pt的字號設(shè)置120pt的行高是沒有問題的。在頁面中行高是這么計(jì)算的，字號x倍數(shù)=行高。例如下圖所示，大標(biāo)題H3設(shè)置的字號是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字號與行高的倍數(shù)是一點(diǎn)點(diǎn)測的，因?yàn)樽痔柵c行高的比例不會小于1.0（1倍），我就根據(jù)自身審美進(jìn)行測試，從1.0/1.1/1.2/1.3....開始測，直到測出自己滿意的行高。如下圖所示，帶顏色數(shù)字的是倍數(shù)。
最終的行高還是由設(shè)計(jì)師直觀判斷決定的。所以做設(shè)計(jì)要理性中夾雜感性，規(guī)則與創(chuàng)意并存才是一個(gè)優(yōu)秀設(shè)計(jì)師需要兼?zhèn)涞钠焚|(zhì)。那我就拿中文字號36px和英文字號24px來舉個(gè)例子，這樣大家好理解一些。如下圖所示：
從測試結(jié)果中找到自己滿意的行高就可以了。字號x倍數(shù)=行高，這里也不怕倍數(shù)小數(shù)位太多的問題。在繪圖軟件中是以像素為單位，但有時(shí)候前端代碼會用父繼承單位“em”。例如：大標(biāo)題H3的字號是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那轉(zhuǎn)換為前端代碼就是h3.test{line-height: 1.3em}，直接做約等于就行了，差一點(diǎn)點(diǎn)看不出來的。
9.正文行高
來接著往下講。正文行高與標(biāo)題行高相同，差異就字號的不同選擇的行高也不同。標(biāo)題行高倍數(shù)大概1.0-1.6不等，正文行高倍數(shù)大概1.6-2.4不等，這也沒有一定的標(biāo)準(zhǔn)，還是得根據(jù)項(xiàng)目情況與實(shí)際效果綜合來看。如下圖所示，帶顏色的數(shù)字是行高的倍數(shù)。
說到這里，經(jīng)常有人問我正文的行高的值應(yīng)該怎么設(shè)置，大家在做設(shè)計(jì)時(shí)都會采用1.5/2倍關(guān)系，但這不是絕對的，行高的倍數(shù)也是受字號大小影響的。像新浪新聞的正文，字號是18px，行高設(shè)的是32px，即字號（18px）x1.777（倍數(shù)）=32px（行高），如果行高倍數(shù)設(shè)置2倍以上，字與字之間的距離變大，就不太好閱讀了。
10.混合編排
好的，完全理解上述所有知識就可以把標(biāo)題、正文和注釋進(jìn)行混合編排了。大標(biāo)題字號40px、正文字號20px、正文行高40px、注釋字號18px、注釋行高32px、標(biāo)題與正文的間距88px、正文與注釋的間距64px。
11.字體選擇
選擇字體就沒有什么技術(shù)含量了。做頁面常用字體就只有那幾種，微軟雅黑、宋體、Verdana、arial、Times New Roman，就不舉例說明了。中文網(wǎng)站最常用的就是微軟雅黑+Arial，瀏覽器兼容性也最好。讀到這里有人可能就會問了，載入其他字體也可以啊，是的做企業(yè)網(wǎng)站可以載入其他字體，但像做功能頁面啊、后臺頁面啊，載入其他字體幾乎就不可能了。所以還是要估計(jì)實(shí)際項(xià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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
隨著折疊屏手機(jī)的發(fā)布，我們看到未來手機(jī)的形態(tài)可能會朝著柔性手機(jī)方向發(fā)展，那么，讓我們來思考一件事：如何在折疊屏手機(jī)上做交互設(shè)計(jì)呢？最近三星、華為和柔宇各發(fā)布了一款折疊屏手機(jī)，它可以把一臺8英寸的平板電腦通過折疊的方式變成一臺方便攜帶的6英寸手機(jī)。折疊屏手機(jī)屬于新的手機(jī)品種，也是我目前最看好的手機(jī)形態(tài)之一（未來手機(jī)的形態(tài)應(yīng)該是柔性手機(jī)，現(xiàn)在已知有柔性電路板的存在了）。通過幾天的觀察和思考，我認(rèn)為折疊屏手機(jī)有以下好處：
以上基于「展開」態(tài)的想法，在折疊狀態(tài)下還有一些不錯(cuò)的想法供大家思考。
華為在MWC2019上演示了一個(gè)名叫「鏡像智拍」的功能，它可以讓被拍攝的人實(shí)時(shí)看到拍攝效果，并調(diào)整面部表情與姿勢。用自己最了解的角度及構(gòu)圖使得拍攝事半功倍，妹子們再也不用擔(dān)心自己的男朋友把自己拍得很丑了。
在折疊狀態(tài)時(shí)可以把背面當(dāng)做一個(gè)附加的交互空間，實(shí)現(xiàn)一些簡單的交互操作，例如打吃雞游戲時(shí)我們可以考慮在背面屏幕增加一些手勢操作進(jìn)行8倍鏡的縮放，這種背部觸控方式并不是什么新鮮事，在2011年索尼旗下的掌上型游戲機(jī) PSV 已經(jīng)在背部增加了電容式多點(diǎn)觸控面板。
除了附加的交互空間，我們真的可以把它當(dāng)做第二塊屏幕進(jìn)行使用。在平時(shí)我們可以通過兩塊屏幕同時(shí)運(yùn)行兩個(gè)不同的應(yīng)用程序，例如我們可以用主屏幕玩游戲，在加載游戲時(shí)翻轉(zhuǎn)屏幕刷個(gè)微博，操作起來十分方便。
折疊屏當(dāng)然不只有展開和折疊兩個(gè)狀態(tài)，還有翻折狀態(tài)，它區(qū)別于傳統(tǒng)手機(jī)和平板的獨(dú)立狀態(tài)。最直接的效果就是它可以不需要支架就立在桌面上，實(shí)現(xiàn)中遠(yuǎn)距離的自拍；同時(shí)它可以進(jìn)行多角度拍攝，成為制作 VR 內(nèi)容的利器。在玩法上，翻折狀態(tài)可以通過兩面屏幕的不同內(nèi)容引入多人互動的概念，但這種應(yīng)用場景比較難想象。
相比外折疊設(shè)計(jì)，內(nèi)折疊設(shè)計(jì)玩法相對較少，在這里我只想到了任天堂NDS 的概念：在翻折狀態(tài)時(shí)它就是兩塊獨(dú)立屏幕，它可以獨(dú)立顯示不同的內(nèi)容，例如上屏顯示內(nèi)容，下屏顯示操作區(qū)域，打游戲時(shí)翻折狀態(tài)明顯要比其他狀態(tài)舒服。
個(gè)人觀點(diǎn)：從以上案例來看，外折疊設(shè)計(jì)在交互和玩法上都比內(nèi)折疊設(shè)計(jì)好，未來很有可能以外折疊設(shè)計(jì)為主。
當(dāng)折疊屏從小屏模式轉(zhuǎn)變成大屏模式時(shí)不應(yīng)該只是畫面的等比例變大，而是要考慮響應(yīng)式布局設(shè)計(jì)。
描述響應(yīng)式設(shè)計(jì)最著名的一句話就是「Content is like water。如果將屏幕看作容器，那么內(nèi)容就像水一樣」。在以前響應(yīng)式設(shè)計(jì)更多用在PC Web設(shè)計(jì)上，但現(xiàn)在手機(jī)也應(yīng)該考慮響應(yīng)式設(shè)計(jì)，以下是設(shè)計(jì)時(shí)需要考慮的細(xì)節(jié)。
它不是簡單的響應(yīng)式設(shè)計(jì)。從上文得知，「展開」態(tài)時(shí)要考慮是平板模式還是雙屏幕模式，如果是平板模式，那么內(nèi)容應(yīng)該在一個(gè)整體里；若是雙屏幕模式則可以考慮不同屏幕展示不同內(nèi)容。設(shè)計(jì)時(shí)需要根據(jù)實(shí)際需求和場景進(jìn)行模式選擇。
考慮通過 Fragment（片段）來設(shè)計(jì)。Fragment 是 Android3.0提出的 API，出現(xiàn)的初衷是為了 UI 更靈活地適應(yīng)大屏幕的平板電腦。以下是 Android 對 Fragment 的官方介紹：「Fragment 表示 Activity 中的行為或用戶界面部分。您可以將多個(gè) Fragment 組合在一個(gè) Activity 中來構(gòu)建多窗格 UI，以及在多個(gè) Activity 中重復(fù)使用某個(gè) Fragment。（ Activity 可以理解為一個(gè)頁面，Android 開發(fā)中最重要的概念之一）」
參考微軟的 UWP 設(shè)計(jì)概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用應(yīng)用平臺）。UWP 應(yīng)用的理念并不是為某一個(gè)終端而設(shè)計(jì)，而是同一套代碼和設(shè)計(jì)可以在所有 Windows 10設(shè)備上運(yùn)行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的響應(yīng)式設(shè)計(jì)的設(shè)計(jì)技巧包括以下6點(diǎn)：
調(diào)整位置：你可以改變 UI 元素在不同屏幕上的位置。比如下面這個(gè)例子：為了確保同時(shí)展示兩個(gè)元素，在手機(jī)上我們必須采用縱向滾動界面，而在平板電腦上，我們可以調(diào)整框架的位置，變?yōu)闄M屏滾動界面。如果你用網(wǎng)格設(shè)計(jì)這些位置，你也可以不改變內(nèi)容框架，但其他 UI 元素可以使用響應(yīng)式設(shè)計(jì)。
調(diào)整尺寸：你可以通過調(diào)整空白和 UI 元素的尺寸來優(yōu)化框架，比如下面這個(gè)例子，可以通過簡單的增大內(nèi)容框架尺寸來提升大屏幕的閱讀體驗(yàn)。
調(diào)整順序：通過調(diào)整 UI 元素的順序和方向，優(yōu)化內(nèi)容顯示效果。舉個(gè)例子，在大屏上運(yùn)行時(shí)，可以再添加一欄，并且加入分類列表，這些都是合理的。這個(gè)例子展示了在手機(jī)上使用一欄縱向滾動，而在平板上使用兩欄橫向滾動的優(yōu)化。
展現(xiàn)：你可以基于屏幕的真實(shí)大小，設(shè)備支持的功能，特定的情況或者屏幕方向展示界面。下圖是媒體播放器的例子，小屏幕上這些按鈕通常是被刪減的，但在大屏幕上這些按鈕是被完全保留的。PC 上的媒體播放器比手機(jī)上的有更多的功能。
換位：這項(xiàng)技巧是為特定屏幕尺寸或屏幕方向切換特定的界面。下面這個(gè)例子是導(dǎo)航菜單：小屏幕上他是隱藏在漢堡菜單中縱向排列的，但是在大屏幕上，更大的 Tab 是更好地選擇。
改變結(jié)構(gòu)：你可以為特定的設(shè)備優(yōu)化特定的結(jié)構(gòu)。下面這個(gè)例子就是兩種不同的接合結(jié)構(gòu)。
以上6點(diǎn)引用了Windows 開發(fā)人員中心 《Design Basics：Responsive design 101 for UWP apps》
考慮用戶翻轉(zhuǎn)折疊屏幕時(shí)的場景和動機(jī)是什么，從而優(yōu)化現(xiàn)有界面及交互流程，舉幾個(gè)例子。
以 RPG 游戲?yàn)槔?。?dāng)玩家使用小屏模式時(shí)我們可以收起所有功能界面，使游戲的沉浸感更強(qiáng)；當(dāng)玩家采用大屏模式時(shí)，我們可以認(rèn)為玩家需要獲取更多信息，這時(shí)候把聊天、裝備等相關(guān)功能界面展示出來。
當(dāng)用戶在微信里查看定位信息有新消息提醒時(shí)，手機(jī)變成大屏模式時(shí)應(yīng)該同時(shí)存在地圖界面和聊天界面。
相關(guān)注意事項(xiàng)
Google 在2018年11月就宣布了對折疊屏的支持，包括多窗口支持、不重啟適配等等。如果想要在折疊屏手機(jī)上設(shè)計(jì)良好的用戶體驗(yàn)，必須考慮以下兩個(gè)方面：生命周期管理以及轉(zhuǎn)場動效。
生命周期管理
目前大部分手機(jī)應(yīng)用為了有更流暢的體驗(yàn)會做適量的生命周期管理，例如退出頁面時(shí)會釋放相關(guān)內(nèi)存。因此設(shè)計(jì)師在設(shè)計(jì)折疊屏交互時(shí)要考慮哪些頁面不能被銷毀，一定要讓用戶進(jìn)行展開、折疊等操作， 應(yīng)用任務(wù)不中斷重啟，產(chǎn)品可以自動適應(yīng)各種屏幕下的靜態(tài)布局規(guī)格。
轉(zhuǎn)場動效
從目前 Google 公布的新版 Android系統(tǒng)來看，已經(jīng)可以做到當(dāng)折疊/展開設(shè)備的時(shí)候，頁面、內(nèi)容從一個(gè)屏幕自然地切換至另一個(gè)屏幕。設(shè)計(jì)師在設(shè)計(jì)時(shí)應(yīng)該基于 Google 的技術(shù)規(guī)范考慮內(nèi)容、組件等模塊的轉(zhuǎn)場效果。
參考案例：
華為基于HUAWEI Mate X發(fā)布的折疊屏官方適配方案，相關(guān)鏈接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
藍(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
看過或聽過一大堆理論知識的你，有沒有被很多自相矛盾的設(shè)計(jì)原則搞混過？比如你把做好的設(shè)計(jì)發(fā)給總監(jiān)看，然后他告訴你太亂了，要統(tǒng)一，于是你苦苦調(diào)整了一番。當(dāng)再發(fā)給他看時(shí)，他卻說太平淡了，要有對比。你心想，一會要統(tǒng)一，一會要對比，這不是自相矛盾嗎？當(dāng)然不是，其實(shí)你自己心里明白，只是你不知道如何平衡這兩者的關(guān)系。類似這種「矛盾」的設(shè)計(jì)原則還有好幾對，接下來蔥爺要把它們一一理清，讓這些理論知識能真正指導(dǎo)設(shè)計(jì)實(shí)踐。
對齊是版式設(shè)計(jì)最基礎(chǔ)的原則之一，具體指版面中的字與字、字與圖、圖與圖要對齊，常用的對齊方式有左對齊、右對齊、上對齊、下對齊、居中對齊、兩端對齊等。對齊的目的是為了使版面更整潔，更便于閱讀，比如下面這些作品都用到了大量的對齊關(guān)系。
我們來舉個(gè)實(shí)例，假設(shè)你現(xiàn)在要設(shè)計(jì)一則手機(jī)banner圖，目的是宣傳某款手機(jī)的拍照功能，文案如下：
這種圖不難做，你打算直接用一部手機(jī)和幾張攝影作品作為畫面的主視覺，于是去圖片網(wǎng)站找了幾張能體現(xiàn)該手機(jī)拍照功能好的圖片：
圖片找好后，你把其中一張圖片填充到手機(jī)里作為屏幕背景，其余圖片分散在手機(jī)周圍，然后你把整個(gè)視覺主體放在了版面中央，文字則按主次排在了兩側(cè)，大致效果如下：
你盯著畫面，正琢磨著還要加點(diǎn)什么的時(shí)候，總監(jiān)不知何時(shí)出現(xiàn)在了你身后，他面無表情地盯著你的電腦，嘴里慢吞吞地吐出幾個(gè)字：「太亂了，好LOW」，之后就消失了。你很聰明，立刻明白了總監(jiān)是想要自己排得更整潔、更有序一點(diǎn)。
在目前的版面中雖然個(gè)別元素之間有對齊關(guān)系，但是缺乏整體的對齊，且圖片采用了自由式排版，所以會顯得混亂。于是你嘗試把圖片對齊排列，文字則以圖片為基準(zhǔn)進(jìn)行對齊。
△ 左邊的文字部分與右邊的圖片部分保持上下對齊，標(biāo)題與內(nèi)文為左右兩端對齊，icon 與文字則是左對齊。
上圖很「完美」地執(zhí)行了對齊原則，整個(gè)版面干凈、整潔了許多，視覺流程也更簡單了。這下總可以了吧，然而事情并沒你想的簡單。因?yàn)榭偙O(jiān)不知何時(shí)又出現(xiàn)在了你的身后，他癟著嘴一臉嫌棄地說道：「太呆板了，有點(diǎn)變化好不好？」
變化？難道又要調(diào)回改之前那種狀態(tài)?。慨?dāng)然不是，你其實(shí)是要在現(xiàn)有的基礎(chǔ)上做一些變化。排版的難點(diǎn)和精妙之處就在這里，既要對齊，又不能機(jī)械地對齊；既要整潔有序也要靈活有變化。如何做到這一點(diǎn)呢？我的理解是：要在對齊中制造一點(diǎn)變化，在變化中找到對齊關(guān)系。比如下面這些作品：
現(xiàn)在你知道了，上面的方案之所以死板主要是因?yàn)槲淖植糠峙c圖片部分對得太整齊，所以需要改變其中一個(gè)版塊。該版面的視覺主體是圖片，所以調(diào)整圖片更合適。由于文字是呈水平排列的，那么圖片部分是不是可以傾斜擺放形成一定的反差呢？這樣既可以制造變化還能加強(qiáng)版面的空間感。
△ 除了把圖片傾斜之外，LOGO也與內(nèi)文錯(cuò)開移到了左上角，最下邊的直線也可以延伸到了版面之外。
我們現(xiàn)在再回過頭來看看這件作品是否符合前面我說的，「要在對齊中制造一點(diǎn)變化，在變化中找到對齊關(guān)系」這一要素。
從上圖中可以看出，圖片雖然做了傾斜，卻是在對齊的基礎(chǔ)上做的變形扭曲。版面中的元素雖然不是都對齊了某條直線，但是沒有哪一個(gè)元素是孤立的，每一個(gè)元素都與版面中的其他元素有對齊關(guān)系。更重要的是，左邊文字版塊的視覺重心與右邊圖片版塊的視覺重心也是呈水平對齊的，所以整個(gè)畫面才得以平衡。
雖然設(shè)計(jì)的構(gòu)成要素只有文字、圖片、色彩，但是每一個(gè)要素都有無數(shù)種表現(xiàn)形式，不同的字體、字號、色值、質(zhì)感、風(fēng)格、圖片、方向等等。如果在一個(gè)版面內(nèi)含有太多不同的東西，會顯得很雜亂，從而讓人心生厭煩，所以，需要通過某種方式把這些「不同」統(tǒng)一起來，以達(dá)到舒適、協(xié)調(diào)的效果。
以一則運(yùn)動品牌的輪播圖設(shè)計(jì)為例，文案如下：
這類設(shè)計(jì)以運(yùn)動員作為主體最容易出效果，所以我們需要找一個(gè)正在奔跑的人物圖片。
△ 這個(gè)人的姿勢不錯(cuò)，就他了。
運(yùn)動品牌最重要的是要設(shè)計(jì)出動感和時(shí)尚感，所以我把背景分割成一紅一藍(lán)兩個(gè)傾斜的色塊，然后把人物放在畫面中央，文字分布在左右兩邊，以制造出強(qiáng)烈的視覺沖擊。
由于有一個(gè)動感十足的模特和背景，所以整體看來還是比較符合運(yùn)動海報(bào)的調(diào)性，但視覺上有點(diǎn)亂，因?yàn)橛泻芏嗉?xì)節(jié)沒有統(tǒng)一，比如人物傾斜的角度和背景色塊、標(biāo)題傾斜的角度不一樣，主要文字的字體風(fēng)格不一樣（NIKE和JUST DO IT的字體比較硬朗，而蓄勢待發(fā)的字體相對較柔），元素的風(fēng)格也不統(tǒng)一（圓角的了解更多按鈕與整體風(fēng)格不搭），還有各元素的顏色也缺少聯(lián)系等等。
那該怎么辦呢？這里就需要用到統(tǒng)一的原則了，我們可以試著把上面提到的不統(tǒng)一的地方都統(tǒng)一起來，如下圖：
△ 調(diào)整后的方案二，字體都是簡潔有力的黑體字，而且把左右兩邊的字體進(jìn)行了水平對齊、背景色改為單一的漸變色、人物和文字的傾斜角度也統(tǒng)一了，「了解更多」的按鈕也改成了平行四邊形色塊、顏色更是被縮減到了三種。
調(diào)整之后確實(shí)不亂了，但是也有了新的問題，因?yàn)楦髟靥^統(tǒng)一使得畫面缺乏層次和對比，該突出的信息也沒有得到突出。這時(shí)候就需要用到與統(tǒng)一對立的另一個(gè)原則——對比。
對比，是把具有明顯差異、矛盾和對立的雙方安排在一起，進(jìn)行對照比較的表現(xiàn)手法，目的是為了使設(shè)計(jì)更有層次、增加視覺沖擊力。設(shè)計(jì)中常見的對比有大小對比、字體對比、色彩對比、空間對比、方向?qū)Ρ?、長短對比、粗細(xì)對比、曲直對比、輪廓對比、虛實(shí)對比等等。
想要處理好統(tǒng)一與對比的關(guān)系，需要記住兩個(gè)要領(lǐng)：
順著這樣的思路，我們來給上圖增加一些對比關(guān)系，例如方案二的標(biāo)題傾斜角度太大，不美觀，所以我干脆把它的傾斜方向改為垂直傾斜，既保留了動感也增強(qiáng)了對比，更加美觀。在文字的字號上，我選擇突出品牌名縮小廣告語，加強(qiáng)了大小對比，并且還恢復(fù)了之前把背景一分為二的做法，只是增加了一點(diǎn)空間感，并把人物服裝的顏色與背景色做了統(tǒng)一。調(diào)整后的效果如下：
我們可以觀察一下，方案三確實(shí)比方案一更協(xié)調(diào)，比方案二更有層次和視覺沖擊力，且整體調(diào)性依然年輕、時(shí)尚、有動感，這里就是運(yùn)用了統(tǒng)一與對比的原則。
簡單應(yīng)該是大家聽得最多的設(shè)計(jì)原則，簡約、極簡風(fēng)格的設(shè)計(jì)也非常受歡迎，但是我們也很困擾，因?yàn)樽约鹤龅乃^極簡設(shè)計(jì)經(jīng)常會被人說太單調(diào)、不夠豐富；而那些自我感覺很豐富的設(shè)計(jì)又會被說成是雜亂。為什么會這樣呢？我們先來正確地認(rèn)識一下簡單與豐富。
簡單并不是指做設(shè)計(jì)要用最少的元素、不做任何修飾，而是指設(shè)計(jì)主旨要簡單，視覺流程要清晰，視覺要聚焦，主次要分明。
△ 上圖的設(shè)計(jì)雖然元素和色彩都很多，但整體給人的感覺也還是簡單的。
而豐富也不是指畫面中一定要有很多元素或疊加一堆的效果，而是指有細(xì)節(jié)、有層次、有品質(zhì)感。
△ 上圖的設(shè)計(jì)雖然整體看來很簡單，但是并不會顯得單調(diào)。
為了方便理解，我們還是來舉個(gè)例子：一款農(nóng)產(chǎn)品冊子的封面設(shè)計(jì)。該封面的必要元素很簡單，只有一個(gè) Logo 和一句文案，因此，我們很容易想到做個(gè)極簡風(fēng)格的設(shè)計(jì)。白色背景加一個(gè) Logo 和一行文字，再配一款特種紙，做點(diǎn)工藝，就可以顯得很高大上，很多大品牌也是這么做的。
這也是一種還過得去的解決方案，但表現(xiàn)手法確實(shí)太過簡單，既體現(xiàn)不出設(shè)計(jì)師的設(shè)計(jì)功底，也沒有體現(xiàn)出農(nóng)業(yè)品牌的調(diào)性和特色，且缺乏吸引力，所以我們需要做加法，讓其變得更加豐富。
怎么豐富呢？最直接的辦法就是引入圖片和色塊，由于品類為農(nóng)產(chǎn)品，且文案重在強(qiáng)調(diào)健康和安全，所以我們可以找一張綠色、生態(tài)的圖片。
為了與狹長的版面保持統(tǒng)一，我把圖片也裁剪成了豎版的矩形，并與一個(gè)同樣大小的綠色色塊結(jié)合在一起，組成版面的主視覺，logo放在圖片左側(cè)，如下圖：
這么做還是有些設(shè)計(jì)感的，也增加了品類屬性，不過缺少細(xì)節(jié)、不耐看，所以還需要加點(diǎn)東西。當(dāng)然，新增加的元素只能作為輔助，不能太過搶眼，圖片方面我很快想到了葉脈，葉脈與圖片中的葉子元素也能產(chǎn)生關(guān)聯(lián)，且適合做底紋，于是我又找來了一張葉脈的圖片。
把葉脈圖片放在圖層最底部作為背景處理，這里會遇到三種情況，一是如果把葉脈紋完全平鋪的話，整個(gè)版面就沒有留白了，所以會顯得壓抑；二是把整片葉子都顯示出來，但這么處理會顯得很小氣。所以我只用葉脈紋覆蓋了一半左右的版面，與圖片部分形成呼應(yīng)，這樣的效果看起來是比較舒服的。
圖片部分得到了改善，但現(xiàn)在畫面中還缺少一點(diǎn)小的裝飾元素，增加一點(diǎn)文案是個(gè)不錯(cuò)的思路，所以我把文案和品牌名的英文加了進(jìn)來。
做完加法后整個(gè)畫面變得豐富了不少，層次也拉開了，而且給人的感覺依然比較簡單，既不雜亂也不壓抑，因?yàn)楦髟刂鞔畏置?，既有?lián)系又沒形成干擾。不過做加法的時(shí)候也要把握度，例如下圖就有點(diǎn)堆砌過度了，看起來很繁雜、不精致。
想要處理好簡單與豐富的關(guān)系，需要注意兩點(diǎn)：
規(guī)范與打破是存在于版式設(shè)計(jì)中的一對矛盾原則，規(guī)范是指把版面中的元素要按某種規(guī)律，或是在特定的范圍內(nèi)設(shè)計(jì)布局，目的是為了讓畫面更有條理和秩序，也更像一個(gè)整體。
△ 上圖的主要元素都規(guī)范在一個(gè)矩形中，然后各個(gè)小矩形又組合成一個(gè)大矩形，看起來很整體，很有設(shè)計(jì)感。
與規(guī)范對立的是打破，指打破規(guī)范、打破束縛、打破平靜，目的是為了使畫面看起來更靈活、更有動感、更具視覺沖擊。
△ 用色塊或圖片來創(chuàng)造束縛感，然后把部分元素沖出色塊，是規(guī)范與打破的一個(gè)經(jīng)典組合形式。
可以說經(jīng)過了嚴(yán)格規(guī)范而變得很好看的優(yōu)秀設(shè)計(jì)很多，而有些設(shè)計(jì)卻選擇了打破規(guī)范，也得到了很驚艷的效果。那什么時(shí)候該嚴(yán)格遵守規(guī)范？什么時(shí)候應(yīng)該打破規(guī)范呢？其實(shí)在一件完整的設(shè)計(jì)中最好兩者都要有，而平衡這兩者的要領(lǐng)就是：先規(guī)范后打破，即在規(guī)范好的基礎(chǔ)上選擇一些局部來打破。
蔥爺還是以一個(gè)畫冊的封面設(shè)計(jì)來作為講解案例。這是一本中國移動云服務(wù)平臺方案介紹的冊子，文案如下：
很明顯該封面的視覺調(diào)性應(yīng)該要有科技感，要能體現(xiàn)互聯(lián)網(wǎng)、信息、大數(shù)據(jù)這些關(guān)鍵詞，所以我找了一張看起來很有科技感的圖片。
這類畫冊的版式通常應(yīng)該偏向簡潔、規(guī)矩，所以我決定用網(wǎng)格系統(tǒng)來輔助排版。以圖片作為封面的主視覺，除了Logo，所有元素都排列在矩形圖片內(nèi)，并且所有文字都按照網(wǎng)格的設(shè)定保持左對齊，所有元素的高度、寬度，以及各元素之間的間距，都嚴(yán)格按照網(wǎng)格來排版。
△ 經(jīng)過規(guī)范的版面整體看起來十分嚴(yán)謹(jǐn)。
不過這么做也造成了版面缺少變化、太過規(guī)矩等問題，所以我們可以嘗試在此基礎(chǔ)上做一些「打破」。
比如原本的 LOGO 與圖片靠得太近，顯得很壓抑，這里就不必完全按照網(wǎng)格來排版，我們可以根據(jù)自己的感覺將 LOGO 與圖片分得更開一些；中文標(biāo)題、短線、英文標(biāo)題這三者也太擁擠了，可以挪開一點(diǎn)；文字部分不一定全部都在圖片范圍內(nèi)，所以我給英文標(biāo)題加了一個(gè)藍(lán)色塊，并把色塊移出了圖片區(qū)域；以及把最下面的公司名稱排在了圖片下方等。調(diào)整后的效果如下：
△ 調(diào)整后的方案，構(gòu)圖也相應(yīng)發(fā)生了變化，之前為上下構(gòu)圖，現(xiàn)在變成了對角構(gòu)圖。
在規(guī)范的基礎(chǔ)上做了打破之后，我們可以看到，版面的整潔性依然在，整體的調(diào)性也依然簡潔、嚴(yán)肅，但相比調(diào)整之前顯得更靈活、更有設(shè)計(jì)感。
設(shè)計(jì)不是簡單的加減法，也不是只要做到對齊、統(tǒng)一這些很簡單，方向很明確的原則就可以了，因?yàn)楦静淮嬖谑裁丛瓌t可以讓我們直接通向設(shè)計(jì)的終點(diǎn)，但是我們的目標(biāo)是明確的，就是要做有效的設(shè)計(jì)，所有的設(shè)計(jì)原則、設(shè)計(jì)手段都要為這個(gè)目標(biāo)服務(wù)。
藍(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
目錄
引言
一、對設(shè)計(jì)的認(rèn)識
二、設(shè)計(jì)觀念
三、設(shè)計(jì)原則
四、設(shè)計(jì)思維
引言
前段時(shí)間在學(xué)習(xí)python語言的時(shí)候，我了解到在程序界有一種叫做“算法”的存在，其實(shí)“算法”就像武俠片里面的內(nèi)功心法，內(nèi)功心法越好就能激發(fā)越強(qiáng)的武功招式。在程序編寫時(shí)大部分的程序語言都可以使用“算法”來優(yōu)化程序的流暢度。比如，當(dāng)大量用戶同時(shí)使用程序時(shí)，“算法”就可以合理配置服務(wù)器資源防止服務(wù)器的崩潰。在設(shè)計(jì)的過程中其實(shí)也存在這樣的通用心法，事理學(xué)的認(rèn)識論其實(shí)就有點(diǎn)類似于“算法”，所以這一期我的分享題目叫《設(shè)計(jì)心法》。
一、對設(shè)計(jì)的認(rèn)識
·內(nèi)部因素與外部因素：
設(shè)計(jì)中我們可以將設(shè)計(jì)問題化分為外因（人，時(shí)，地，事）與內(nèi)因（技術(shù)，工藝，材料等），在上一期文章中我們談到設(shè)計(jì)可以定義為：人有目的創(chuàng)造活動，往往現(xiàn)代生活中設(shè)計(jì)的目的不是唯一的，這就好比佩戴手表時(shí)我們可能不僅僅是為了查看時(shí)間，還可能是為了在潛水時(shí)防止手表被泡壞。因此，物“應(yīng)該是什么樣”表現(xiàn)的是對不同人與環(huán)境的適應(yīng)，就如同生物多樣性表現(xiàn)了對環(huán)境的適應(yīng)一樣。
除卻外部的環(huán)境因素，我們還要考慮的制作產(chǎn)物時(shí)所需要技術(shù)、工藝、材料、形態(tài)、結(jié)構(gòu)。內(nèi)部的因素其實(shí)代表了一種可能性，是一種可變通的元素組合。比如同樣是防水手表，我們可以采用耐浸泡的材料，也可以運(yùn)用防水工藝。（ps：在《事理學(xué)論綱》中內(nèi)部因素沒有成本，但是小胖認(rèn)為成本其實(shí)也算是設(shè)計(jì)中應(yīng)該考慮到的內(nèi)在因素，所以在這里我也將其歸納了進(jìn)來。）
總的來說外部因素代表了限定性，而內(nèi)部因素代表了可能性。設(shè)計(jì)的過程中應(yīng)當(dāng)了解外部的需求與限定，然后組織內(nèi)部結(jié)構(gòu)。在內(nèi)外因素之間找出一個(gè)契合點(diǎn)，設(shè)計(jì)就發(fā)生在這個(gè)契合點(diǎn)上。
·目標(biāo)與目標(biāo)系統(tǒng)
窗簾、太陽鏡、電焊面罩、等等這些看似風(fēng)馬牛不相及的物品，卻有著共同的目標(biāo)—— 遮擋強(qiáng)烈的光。在實(shí)際設(shè)計(jì)過程中目標(biāo)往往是抽像的，而目標(biāo)系統(tǒng)是具體的。目標(biāo)系統(tǒng)既包含特定的外部因素的限制也包含內(nèi)部因素的選擇。
同樣是手表，同樣是為了看時(shí)間，從技術(shù)到外觀在使用因素的限制下，也就決定了其品種的千差萬別。建立目標(biāo)系統(tǒng)是對實(shí)現(xiàn)目標(biāo)的外部因素限制的研究過程，也是從外部角度觀察、分析、歸納實(shí)現(xiàn)目標(biāo)條件的認(rèn)知過程、敘述過程。設(shè)計(jì)師應(yīng)將抽象的目標(biāo)轉(zhuǎn)化為目標(biāo)系統(tǒng)，完善的目標(biāo)系統(tǒng)才是優(yōu)秀設(shè)計(jì)的創(chuàng)意源泉。
·“使用”的意義
在“使用”物品的過程其實(shí)包含兩個(gè)方面，一是使用者——人的動作：二是被使用者——物的動作。人的動作是人生理結(jié)構(gòu)和生存需要指示下的延伸，在動作的引導(dǎo)下人的大腦對外界的刺激作出反應(yīng)，留下印象，形成經(jīng)驗(yàn)，儲存信息，成為意識。當(dāng)再次遇到類似的問題是，人會逐漸總結(jié)經(jīng)驗(yàn)并形成知識的遷移。物的動作是人使用過程中人的動作在物上的反應(yīng)，這就包括器物的變形、移動、或是其他信息（比如聲音，燈光等等）。
在人使用物的過程中，為了使物更加符合人意志，自然要對物進(jìn)行改進(jìn)，使物更加適合人的生理結(jié)構(gòu)和需求目標(biāo)。比如在原始社會原始人類為了更有效地的獲取獵物，在原有的石頭上進(jìn)行敲擊加工使之更加符合使用習(xí)慣。在“使用”中人和物不斷磨合，這一過程實(shí)則就是產(chǎn)品迭代的過程。“使用”的意義在于它是一種積極的思維方法，是一種能啟發(fā)創(chuàng)造的設(shè)計(jì)起點(diǎn)。
·方式與合理
方式在設(shè)計(jì)中不是指的具體的某一個(gè)動作，而是使用時(shí)產(chǎn)生的一系列動作，人的行為與各動作相對應(yīng)的物與物組成的環(huán)境組成了一個(gè)特定的社會現(xiàn)象，我們稱為“方式”。物是動作對象，環(huán)境是行為條件。同樣，動作使物有用行為使環(huán)境具備社會意義。
合理是指合乎客觀規(guī)律，合乎時(shí)代觀念，合乎社會準(zhǔn)則，合乎人類理想。合理是人類經(jīng)驗(yàn)、教訓(xùn)的總結(jié)，是認(rèn)識的升華、沉淀；是道德、行為、情操的法庭；也是在歷史的基礎(chǔ)上對未來的規(guī)劃。當(dāng)人在追求欲望的過程中，合理更像是一種約束人類行為的標(biāo)準(zhǔn)，通過合理的約束來引導(dǎo)人類的行為方向。
綜上合理的使用方式其實(shí)是設(shè)計(jì)的原則，通過合理的評估系統(tǒng)和反饋可以制約不合理的設(shè)計(jì)行為，在的設(shè)計(jì)活動中，以“創(chuàng)造合理的生存方式”作為第一原則才能促進(jìn)人類往更好的方向發(fā)展
二、設(shè)計(jì)的觀念
·設(shè)計(jì)生態(tài)觀
自然界的生態(tài)系統(tǒng)是一個(gè)封閉的、可以自給自足的系統(tǒng)。在此系統(tǒng)中沒有開始也沒有結(jié)束，任何一環(huán)的在生態(tài)環(huán)境中都扮演著至關(guān)重要的角色。反觀現(xiàn)代設(shè)計(jì)生態(tài)卻并不存在這樣的循環(huán)。
現(xiàn)代經(jīng)濟(jì)學(xué)被認(rèn)為是研究人類需求與稀缺資源之間關(guān)系的學(xué)科。經(jīng)濟(jì)學(xué)中的生產(chǎn)者（企業(yè)）將有限的資源整合變成可盈利的“商品”，而消費(fèi)者是在有限收入下實(shí)現(xiàn)“效用最大化”的行為個(gè)體。消費(fèi)者購買行為發(fā)生后進(jìn)入“使用”階段，直至使用的物品失去使用價(jià)值?！拔铩睆馁Y源直到被銷毀經(jīng)歷了四個(gè)階段，這四個(gè)階段分別是產(chǎn)品、商品、用品、廢品。
現(xiàn)代市場經(jīng)濟(jì)下人的物質(zhì)需求被極大滿足，市場經(jīng)濟(jì)的增長依賴消費(fèi)增長，反觀人類的自然資源總體上卻在急劇減少。設(shè)計(jì)者除了的滿足生產(chǎn)者、消費(fèi)者、使用者的需求之外，還應(yīng)該思考如何將“廢品”分解利用形成設(shè)計(jì)生態(tài)閉環(huán)。
·設(shè)計(jì)美學(xué)觀
人類文明的發(fā)展大致經(jīng)歷了三個(gè)階段，這三個(gè)階段即古典主義、現(xiàn)代主義、和后現(xiàn)代主義。這三種文明的美學(xué)觀也可稱之為再現(xiàn)主義、表現(xiàn)主義和共生美學(xué)。這三種美學(xué)觀點(diǎn)的發(fā)展是相互交錯(cuò)的，只是主體上有區(qū)別。
當(dāng)代設(shè)計(jì)和藝術(shù)是以思考、感召、聯(lián)想的手法，以同觀眾、使用者共同創(chuàng)造為目的，以多種美學(xué)觀重疊、并行、綜合為基礎(chǔ)的共生美學(xué)觀為審美取向。技術(shù)與藝術(shù)共生，技術(shù)與各種美學(xué)觀共生，這就是當(dāng)代設(shè)計(jì)——后現(xiàn)代主義的美學(xué)特征。
三、設(shè)計(jì)原則
·有限理性原則
在藝術(shù)的創(chuàng)作中美可以被分為很多種，梵高的油畫是美的，米開朗基羅的雕像也是美的。其實(shí)任何事物，任何美都是相對的，在不同的時(shí)代背景和使用場景下我們對于美的定義都不同。
類比設(shè)計(jì)，衡量設(shè)計(jì)的標(biāo)準(zhǔn)不是對與錯(cuò)，而是相對滿意與不滿意。設(shè)計(jì)應(yīng)該遵循“有限理性”的原則，即設(shè)計(jì)的目的并不是尋找“最優(yōu)解”，而是“滿意解”?！白顑?yōu)化理論”只適合作為設(shè)計(jì)中的一種技術(shù)方法使用，而且只有當(dāng)目標(biāo)屬性十分明確，可以用數(shù)量化衡量時(shí)才可運(yùn)用。
·適應(yīng)性原則
上文說過設(shè)計(jì)就發(fā)生在內(nèi)部因素和外部因素的“關(guān)系”中，而這其中的“關(guān)系”其實(shí)就是適應(yīng)的過程，設(shè)計(jì)還可以理解為是以一定的目的、一定的方式來達(dá)到與客觀條件內(nèi)部關(guān)系相適應(yīng)的人為適應(yīng)系統(tǒng)。設(shè)計(jì)的內(nèi)部因素、外部因素和設(shè)計(jì)目的是設(shè)計(jì)過程中應(yīng)當(dāng)遵守的具體內(nèi)容。
多數(shù)時(shí)候外部因素在適應(yīng)系統(tǒng)中是人們行為方式的主要決定因素。系統(tǒng)的復(fù)雜行為主要是其所處外部的復(fù)雜性的表現(xiàn)，而內(nèi)部因素少量限定屬性的制約，這才是完整的適應(yīng)性系統(tǒng)。
四、設(shè)計(jì)思維
設(shè)計(jì)思維實(shí)際上是圍繞著“問題”來展開的。所謂“問題”是指設(shè)計(jì)各要素交織在一起時(shí)，所產(chǎn)生的關(guān)系矛盾。好的設(shè)計(jì)一定是“問題”的良好協(xié)調(diào)統(tǒng)一體。研究“問題”的方法通常是通過觀察問題——分析問題——?dú)w納聯(lián)想——評價(jià)修正的模式來鞏固的。
觀察問題其實(shí)是在用戶調(diào)研中最常用的方法，定性調(diào)研中研究人員常常會使用觀察法來記錄用戶的行為，之后用研人員會使用“五問分析法”來抽象出用戶的真實(shí)需求。其實(shí)在事理學(xué)中也提出了類似的觀點(diǎn)。
觀察法的幾個(gè)原則:
1. 目標(biāo)明確——從現(xiàn)象到本質(zhì)（五問分析法）
2. 忠實(shí)于對象——感官+體驗(yàn)
3. 擴(kuò)延、比較——搜尋同類比較共性
4. 由表及里、去粗取精——總體到局部再到整體
需求分析中有一塊人物畫像的部分，其中情景分析和故事板就是分析人物使用產(chǎn)品的外因和內(nèi)因，撰寫故事版時(shí)不妨按照以下路徑來展開。
分析問題中應(yīng)當(dāng)結(jié)合設(shè)計(jì)中的基本路徑來分析：
1. 尋找“物”存在的外在限制——人、環(huán)境、時(shí)間、條件等制約。
2. 析出“物”的內(nèi)因與外因的邏輯“關(guān)系”——尋找現(xiàn)象依據(jù)
3. 比較相似“物”的內(nèi)、外因的關(guān)系——透析共性基礎(chǔ)上的個(gè)性
具體的歸納、聯(lián)想和創(chuàng)造都應(yīng)該明確設(shè)計(jì)“目的”，結(jié)合實(shí)際中遇到的外部因素來具體創(chuàng)意創(chuàng)造。最后我們通過建立評價(jià)體系，優(yōu)化設(shè)計(jì)產(chǎn)物在設(shè)計(jì)生態(tài)中的體驗(yàn)和循環(huá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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
作為視覺設(shè)計(jì)師你是否會遇到這樣的問題，當(dāng)需要做一個(gè) loading 或者其他動效的時(shí)候，總會或多或少的出現(xiàn)一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉(zhuǎn)到 AE 制作動效，如何不再受 GIF 導(dǎo)出的失真問題困擾，如何讓開發(fā)完美還原我們的動效設(shè)計(jì)稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。AEUX 是由 Google 團(tuán)隊(duì)推出的，運(yùn)用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個(gè)畫板一鍵導(dǎo)入到 AE 里，同時(shí)能在 AE 里解決圖形分組和分層的問題，減少導(dǎo)出圖片或者轉(zhuǎn)入 Illustrator 處理帶來的不必要的重復(fù)動作。
以下是我做的一個(gè)簡單小案例，通過此次案例將介紹怎么更好的使用這個(gè)插件：
首先在 Sketch 內(nèi)將圖層進(jìn)行分組，在多圖層的情況下，需要在前期進(jìn)行動效構(gòu)思，根據(jù)構(gòu)思在 Sketch 里對圖層進(jìn)行分組，所做的分組將會是你在 AE 里的合成分組。
方法一：直接復(fù)制選中圖層
安裝好插件后，打開 AEUX，選擇你將導(dǎo)入到 AE 里的圖層，點(diǎn)擊 Send selection to Ae，同時(shí)在AE里打開安裝的 AEUX插件，在 BUILD COMP 區(qū)域出現(xiàn)了從 Sketch 導(dǎo)入的圖層數(shù)量，勾選 Precomp groups，點(diǎn)擊將自動加載入 AE 合成里。
方法二：導(dǎo)出json文件
從 Sketch 的 AEUX 面板里點(diǎn)擊 Export AEUX.json 導(dǎo)出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導(dǎo)出的 json 拖入到 BUILD COMP 區(qū)域，或者點(diǎn)擊「曲別針」icon打開 json 文件。
這樣導(dǎo)入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。
如果在 sketch 內(nèi)，分組圖層不在同一組內(nèi)，導(dǎo)入 AE 后會出現(xiàn)變形和位移的情況。
如果 sketch 內(nèi)形狀圖層有投影/漸變/point type 的編輯形狀時(shí)，導(dǎo)入 AE 后將出現(xiàn)投影消失，漸變消失，形狀變形的情況，在遇到這種情況時(shí)，會通過導(dǎo)出圖片的方式處理。
導(dǎo)入 AE 的 AEUX 面板時(shí)如果沒有勾選 Precomp groups，多圖層導(dǎo)入的情況下，組內(nèi)的圖層都會生成在 AE 中的同一個(gè)合成中。
1. Detach symbols
這是一個(gè)解除 symbol 的功能，在 sketch 內(nèi)如果沒有解除 symbol，導(dǎo)入到 AE 里將出現(xiàn)圖形位移和變形的情況。
2. Flatten shapes
AEUX 支持布爾運(yùn)算，但是在一個(gè)組中混合不同的運(yùn)算符（如添加然后減去）對于Ae來說比較困難。點(diǎn)擊 Flatten shapes 可以合并布爾運(yùn)算圖形。
3. Images to symbols
Sketch 只能導(dǎo)出它在畫板上看到的內(nèi)容。如果在 sketch 內(nèi)圖像的一部分超出畫板邊界，復(fù)制到 AE 內(nèi)部的圖像將出現(xiàn)位移的情況。導(dǎo)出前點(diǎn)擊 Images to symbols 不會發(fā)生被裁剪和位移的情況。
1. Come size multiplier：切換倍數(shù)
可以設(shè)置 sketch 畫板的倍數(shù)合成。
2. Auto build artboards：自動構(gòu)建合成
導(dǎo)入前勾選此功能，在 sketch 的 AEUX面板中復(fù)制圖層后，在 AE 里不需要任何操作，它會自動復(fù)制圖層導(dǎo)入到創(chuàng)建合成中。
3. Convert to precomp：創(chuàng)建合成
同時(shí)選中單一圖層，可以將他們建立一個(gè)新的合成。
4. Un-Precomp group：解除合成分組
點(diǎn)擊可以解除合成的分組，變成單一的一個(gè)一個(gè)的圖層
5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層
6. Delete group layers：刪除父級圖層
雖然現(xiàn)在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習(xí)慣用 sketch 畫插圖的設(shè)計(jì)師提高動效制作效率，減少不必要的操作步驟。
在動效制作好后，通常我們會導(dǎo)出 mov 然后導(dǎo)入 PS 里生成 gif 格式，但是 gif 會出現(xiàn)質(zhì)量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團(tuán)隊(duì)開發(fā)的 lottie 動效可以完美的解決這些問題，而實(shí)現(xiàn) lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生動畫的形式在移動設(shè)備上渲染播放，在制作動效時(shí)導(dǎo)出 json 文件直接給到開發(fā)，可以幫助提高實(shí)現(xiàn)動效效率，同時(shí)提高動效質(zhì)量。
1. 它還有很多的優(yōu)點(diǎn)
2. 在使用中有幾點(diǎn)注意
3. 所需軟件
ZXP installer
下面是一組之前做的頁面加載loading效果，開發(fā)小哥哥反饋：實(shí)現(xiàn)挺。
4. 步驟
下載ZXP installer：https://aescripts.com/learn/zxp-installer/
下載bodymovin：https://github.com/airbnb/lottie-web
下載之后，點(diǎn)開剛下載的 ZXP，點(diǎn)開頂部 file-open，打開 bodymovin插件。
當(dāng)出現(xiàn)以下界面時(shí)代表已經(jīng)安裝成功。
意外情況：在用 ZXP 安裝 bodymovin插件的時(shí)候出現(xiàn)以下提示。
原因是沒有通過 Adobe Creative Cloud 下載 AE，需要重新通過 Adobe Creative Cloud 下載。
打開AE，After Effect CC – 首選項(xiàng) – 常規(guī)，勾選允許腳本寫入文件和訪問網(wǎng)絡(luò)。
打開窗口 – 擴(kuò)展查看是否添加成功。
調(diào)出 Bodymovin 面板，選擇需要導(dǎo)出的合成。
點(diǎn)擊你要保存的 json文件地址，點(diǎn)擊 Render。
點(diǎn)擊 Brown 載入剛導(dǎo)出的 json文件，檢查動效是否有誤。
這時(shí)候就可以把 json 文件給到開發(fā)，如果 AE 合成中有圖片，需要把圖片放在文件夾內(nèi)一起提供給開發(fā)，同時(shí)也會給到一個(gè) gif文件，如果實(shí)現(xiàn)有不一樣的地方，開發(fā)可以詢問設(shè)計(jì)師。
如果想在移動端上瀏覽可以打開網(wǎng)址：https://www.lottiefiles.com/，下載安裝移動端客戶端（ios/Android）
注冊登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導(dǎo)出的 json文件。
藍(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡，讓用戶看到全部創(chuàng)作中他最想看到的那一面。在B端產(chǎn)品的設(shè)計(jì)過程中，我深切體會到動效能在很多體驗(yàn)領(lǐng)域起到四兩撥千斤的作用。于是我將自己這些年來做動效的思考，結(jié)合B端產(chǎn)品的一些固有特點(diǎn)，來和大家聊一聊動效設(shè)計(jì)在B端產(chǎn)品體驗(yàn)設(shè)計(jì)中的意義。
既然是談B端產(chǎn)品的體驗(yàn)設(shè)計(jì)，那么就免不了要與C端產(chǎn)品做對比。在我看來，B端產(chǎn)品與C端產(chǎn)品在大的體驗(yàn)趨勢上是趨同的。對于大多數(shù)用戶而言，都希望自己在工作與生活中是順利、愉悅的，而用戶體驗(yàn)就是為了讓用戶順利、愉悅而生的。也就是說，不管是B端產(chǎn)品還是C端產(chǎn)品，其體驗(yàn)的本質(zhì)都是圍繞著使用的效率與愉悅感為核心展開的。那么這次我們就將目光聚焦在B端產(chǎn)品，來看看在這個(gè)領(lǐng)域都有哪些亟待解決的設(shè)計(jì)難點(diǎn)。
針對這四個(gè)特點(diǎn)，我沉淀出一套解決B端產(chǎn)品體驗(yàn)問題的方法，它們分別是：信息折疊、路徑梳理、提升效率、概念物化。接下來，我將通過具體的案例，來詳細(xì)展現(xiàn)動效在B端產(chǎn)品體驗(yàn)設(shè)計(jì)中的意義。
涉及案例簡述：
案例1:
問題分析：初次進(jìn)入 Dataphin，我們會提供一張業(yè)務(wù)流程圖來解釋 Dataphin 的工作流程。為了降低理解成本，我們對每個(gè)流程都添加了文字說明。然而由于流程本身已經(jīng)很復(fù)雜，頁面排版中加入說明性文字會使得流程的排版拉長，用戶很難通過一屏瀏覽完整的功能流程，體驗(yàn)不佳。
解決方法：我們發(fā)現(xiàn)用戶一開始關(guān)注業(yè)務(wù)的全流程展示，然后才會仔細(xì)查看每個(gè)業(yè)務(wù)的詳細(xì)說明。當(dāng)用戶將注意力放在查看詳細(xì)說明的時(shí)候，是顧不上看全流程的。因此我們將「看流程」和「看說明」的場景區(qū)分開，共用同一塊區(qū)域，從而優(yōu)化信息排布。
案例2：
問題分析：在QuickBI中，同一套 icon 需要應(yīng)對兩種不同的使用場景，當(dāng)用戶沒有選中任何圖表的時(shí)候，點(diǎn)擊任意類型的圖表icon，即可新建一個(gè)圖表；當(dāng)用戶選中某一創(chuàng)建好的圖表時(shí)，再點(diǎn)擊圖表icon，則是為該圖表切換類型。所以為了確保用戶的認(rèn)知清晰，我們需要將兩套使用場景區(qū)分開。
下圖中，我們嘗試了靜態(tài)的布局思維，雖然可以區(qū)分場景，但也造成了導(dǎo)航條過高，導(dǎo)致空間冗余，壓縮了創(chuàng)作空間。
其實(shí)這個(gè)問題不止我們家有，用過 AE 的同學(xué)應(yīng)該清楚，AE里面的形狀工具體驗(yàn)也很鬼畜，用戶不選擇任何圖層的時(shí)候，使用形狀工具可以新建形狀，當(dāng)用戶選中某個(gè)圖層的時(shí)候，使用形狀工具是針對該圖層創(chuàng)建蒙版，兩種不同的功能卻沒有任何樣式或操作上的區(qū)分，對新手用戶來說是相當(dāng)不友好的。
解決方法：用戶創(chuàng)建圖表和切換類型是兩種不同的場景，不可能同時(shí)存在，在布局上沒有必要讓兩套 icon 同時(shí)存在于界面。因此使用切換式，利用鼠標(biāo)對圖表的點(diǎn)擊、失焦可以靈活切換兩套使用場景。
問題分析：圖1是用戶在 Dataphin 中所創(chuàng)建的一張邏輯表，我們需要保證用戶在屏幕內(nèi)盡可能多的獲取信息，因此邏輯表中的空間利用就顯得很重要。在原有交互中，我們?yōu)橛脩籼峁┝怂阉鞴δ?，同時(shí)我們也在思考有沒有更優(yōu)的信息布局方案，可以為用戶展示更多的數(shù)據(jù)。
解決方法：在圖2中，我們需要在頂部區(qū)域?qū)ふ遗c用戶搜索操作不重合的場景，并把它們重疊起來。這里我用到交疊式的思路，即將搜索框收起來，只在頂部保留搜索入口，這樣在布局上就可以讓搜索與標(biāo)題交疊使用同一塊區(qū)域，優(yōu)化了布局。
問題分析：在下圖中，側(cè)邊導(dǎo)航的信息過多，壓縮了創(chuàng)作區(qū)域，我們需要為導(dǎo)航「瘦瘦身」。
解決方法：通過用戶調(diào)研，我們發(fā)現(xiàn)導(dǎo)航的名稱對于新用戶來說很有必要，但隨著用戶對產(chǎn)品的逐漸熟悉，名稱重要性漸漸下降。我們需要通過動效，找到合理的展示形式，來兼顧新老用戶的使用需求。
通過動效優(yōu)化信息布局，既保證了單位面積內(nèi)盡可能多的展示有效信息，又避免了信息過載帶來的干擾與閱讀疲勞，使得用戶每次只需要專注眼前的使用場景，提高了獲取數(shù)據(jù)的效率，這便是視覺設(shè)計(jì)師在項(xiàng)目中的價(jià)值。
問題分析：在 Dataphin 中一共包含了80多個(gè)功能點(diǎn)，我們將這些功能點(diǎn)梳理歸納成5個(gè)大類目和20個(gè)子類目。因此我們既希望用戶能明確每個(gè)類目下包含的子類目，又希望用戶在選中子類目的同時(shí)，也能明確感知自己處在哪個(gè)大類目下。
下圖中，用戶從首頁切換到數(shù)據(jù)資產(chǎn)版圖，我們想要讓用戶明確信息的嵌套層級，靜態(tài)的思維只能用雙Tab 形式展現(xiàn)。雖然解釋了層級關(guān)系，但也使得導(dǎo)航高度過高，壓縮內(nèi)容區(qū)域，加之案例中的資產(chǎn)版圖本身還包含三個(gè)子類目，于是，同一個(gè)頁面出現(xiàn)了三層 Tab。
解決方法：將嵌套路徑通過動效的方式展現(xiàn)，運(yùn)動軌跡可以暗示用戶子類目從哪里展開，其余類目被收到了哪里，用動效的方式解釋了層級嵌套路徑。明確了層級嵌套關(guān)系，節(jié)約了為解釋嵌套路徑而鋪展出的信息所浪費(fèi)的頁面空間。
在 Dataphin 中，用戶在創(chuàng)建邏輯表之前，會經(jīng)過一系列繁瑣的配置工作，如下圖中，用戶需要經(jīng)過「定義維度」-「定義主鍵&來源邏輯」-「定義層級」三個(gè)步驟。由于操作流程復(fù)雜，我們?yōu)橛脩粼O(shè)計(jì)了鉛筆線動效，讓用戶時(shí)刻明確自己操作所處的位置，也方便回退操作。
通過動效梳理路徑，使得B端產(chǎn)品復(fù)雜的產(chǎn)品邏輯更為清晰，降低用戶的理解成本，縮短因查找路徑浪費(fèi)的時(shí)間，提升工作效率。同時(shí)，將操作路徑巧妙地隱藏在運(yùn)動路徑當(dāng)中，可以節(jié)約為了展示路徑關(guān)系而浪費(fèi)的頁面空間。
問題分析：在 QuickBI 儀表板中，用戶需要導(dǎo)入已有的數(shù)據(jù)集以配置圖表內(nèi)容。數(shù)據(jù)集由用戶自行創(chuàng)建，一般來說，B端產(chǎn)品用戶文件命名比較偏長，正常情況下下拉框很難直接把名稱顯示完全，用戶還需要將鼠標(biāo)hover 到名稱上才能查看完整的名稱，操作路徑被拉長了。
解決方法：我們在側(cè)邊欄展開的一瞬間向兩側(cè)借一部分空間，使得名稱獲得了更多展示空間。盡可能多的展示信息，縮短操作路徑，提率。
問題分析：在 QuickBI 儀表板中，用戶創(chuàng)建圖表的操作為，先拖動字段進(jìn)入對應(yīng)軸區(qū)，軸區(qū)便能讀取字段內(nèi)的信息并生成數(shù)據(jù)可視化。這一所見即所得的操作對老用戶而言是的，但對于新用戶而言認(rèn)知成本卻有些高。
設(shè)計(jì)思路：我們需要通過響應(yīng)式的設(shè)計(jì)來引導(dǎo)用戶學(xué)會這樣一個(gè)操作。首先，用戶的鼠標(biāo)滑過字段，字段會高亮響應(yīng)，提示用戶此處可點(diǎn)擊，從而吸引用戶學(xué)會點(diǎn)擊拖動字段。接下來，我們通過軸區(qū)內(nèi)的文字提示，告訴用戶字段可以被拖入該軸區(qū)。用戶將字段拖入軸區(qū)的時(shí)候，對應(yīng)的軸區(qū)會高亮響應(yīng)告訴用戶字段可以被拖入軸區(qū)，同時(shí)字段會根據(jù)拖入路徑是否正確給出響應(yīng)。如果正確，字段會劃入軸區(qū)；如果錯(cuò)誤，會給出錯(cuò)誤提示；如果用戶執(zhí)意操作，字段會彈回原處。這樣我便構(gòu)建了一套完整的響應(yīng)流程。通過層層響應(yīng)的方式，減少用戶在每一步操作上的困惑時(shí)間，幫助用戶快速掌握這一操作手法，提升工作效率。
工具型產(chǎn)品中很多操作是相互關(guān)聯(lián)的，而且這樣的關(guān)聯(lián)關(guān)系通常是細(xì)微的，因此需要我們通過動效強(qiáng)化元素之間的關(guān)聯(lián)關(guān)系。案例中圖表的每一列指標(biāo)可以自由配置，通過微動效，讓用戶一眼就能找到新增的指標(biāo)，提升操作效率。（蘋果在新版的 Mac 系統(tǒng)中也有采用類似的設(shè)計(jì)，體驗(yàn)很棒）
聯(lián)動關(guān)系在框架層面也同樣適用，比如導(dǎo)航區(qū)域與創(chuàng)作區(qū)域之間就存在拉伸聯(lián)動。這樣的動效前提，建立一整套元素的適配規(guī)范，便于開發(fā)與團(tuán)隊(duì)協(xié)作。這個(gè)過程會很繁瑣，也是B端產(chǎn)品看不見的巨大工作量。
每一個(gè)微小細(xì)節(jié)的打磨才能匯聚成的用戶體驗(yàn)。提升效率的點(diǎn)小而且零散，總結(jié)起來即是用戶的操作是強(qiáng)反饋的，從而增加用戶嘗試的信心；用戶的操作是有引導(dǎo)性的，即增加用戶繼續(xù)探索的信心；用戶的操作路徑是盡可能被縮短的，以節(jié)約時(shí)間。滿足這三點(diǎn)均可被看作是設(shè)計(jì)在提升效率方面的價(jià)值。
問題分析：QuickBI 中有一個(gè)叫「創(chuàng)作區(qū)」的模塊，是用來介紹 QuickBI 產(chǎn)品能力的。我們需要在這個(gè)區(qū)域向用戶展示 QuickBI 所具備的能力與工作流程。由于 QuickBI 是面向行業(yè)分析師的 BI工具，其所要傳達(dá)的概念對于新用戶來說比較生澀復(fù)雜，這就需要我們在產(chǎn)品流程展示設(shè)計(jì)上盡可能簡單易懂。
下圖是1.0版本中的效果，其對流程的設(shè)計(jì)僅停留在圖形的堆砌，對業(yè)務(wù)的表述不夠清晰，也就很難向用戶傳遞我們的產(chǎn)品價(jià)值。
那我們來看看視覺設(shè)計(jì)是如何物化抽象的概念的。
首先我梳理出 QuickBI 工作的四個(gè)步驟：獲取數(shù)據(jù)、創(chuàng)建數(shù)據(jù)集、數(shù)據(jù)分析、數(shù)據(jù)展示。
接下來我們思考一下，當(dāng)我們需要對某人講述一個(gè)很復(fù)雜的概念的時(shí)候，我們通常會打個(gè)比方。那么我接下來要做的，就是為這套抽象的概念「打個(gè)比方」，因此我要為它們構(gòu)建一個(gè)有故事性的場景，那么這四個(gè)步驟應(yīng)該是某種靜止且持續(xù)運(yùn)轉(zhuǎn)的工廠，它們之間需要某些動態(tài)的介質(zhì)將其串聯(lián)起來。
于是我進(jìn)一步挖掘視覺樣式，構(gòu)建出了場景原型圖。
進(jìn)一步完善視覺效果，得到了最終的成品：零散的代碼被收集車間收集，產(chǎn)出數(shù)據(jù)表進(jìn)入加工工廠，工廠將其加工成數(shù)據(jù)集，運(yùn)輸進(jìn)分析臺，分析臺通過「儀表板、電子表格、數(shù)據(jù)全屏」三種方式對數(shù)據(jù)進(jìn)行可視化分析，最后將分析結(jié)果通過數(shù)據(jù)門戶和郵件訂閱的方式對外分享。
通過動效設(shè)計(jì)，將抽象的概念具象化，將復(fù)雜的流程簡單化，大大降低了新用戶的學(xué)習(xí)成本，使之可以快速上手。
最后，我將我的動效設(shè)計(jì)方法沉淀成一套以方盒為載體的方法論——方盒理論：「置身于三維空間下，信息的體量是無窮的，我們需要為其尋找合適的載體，在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡。即讓用戶看到全部創(chuàng)作中他最想看到的那一面?！惯@即是我所構(gòu)建的以六面方盒為基礎(chǔ)的信息載體，并為我的一切動效解決方案提供了理論支點(diǎn)。
B端產(chǎn)品并非大家印象中那樣的索然無味，其中有很多體驗(yàn)是值得深挖的。動效僅僅是其中的一個(gè)層面。隨著近幾年B端領(lǐng)域功能點(diǎn)逐步完善，用戶對體驗(yàn)提出了更高的要求，B端產(chǎn)品的體驗(yàn)設(shè)計(jì)需求也會漸漸升溫，也希望有更多這個(gè)領(lǐng)域的優(yōu)秀設(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)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
為什么是第一性原理最早提出這個(gè)概念的是亞里士多德。他說：在任何一個(gè)系統(tǒng)中，存在第一性原理，是一個(gè)最基本的命題或假設(shè)，不能被省略，也不能被違反。
后來「硅谷鋼鐵俠」埃隆·馬斯克在一次采訪中提到「第一性原理」：
我們運(yùn)用第一性原理，而不是比較思維去思考問題是非常重要的。我們在生活中總是傾向于比較，對別人已經(jīng)做過或者正在做的事情我們也都去做，這樣發(fā)展的結(jié)果只能產(chǎn)生細(xì)小的迭代發(fā)展。第一性原理的思想方式是用物理學(xué)的角度看待世界，也就是說一層層撥開事物表象，看到里面的本質(zhì)，再從本質(zhì)一層層往上走。
所以，我希望用第一性原理的思維方式，發(fā)現(xiàn)交互設(shè)計(jì)的本質(zhì)，從而更好地理解和運(yùn)用它。
交互設(shè)計(jì)，又稱互動設(shè)計(jì)（英文Interaction Design，縮寫 IxD 或者 IaD）是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域。人造物，即人工制成物品，例如，軟件、移動設(shè)備、人造環(huán)境、服務(wù)、可佩帶裝置以及系統(tǒng)的組織結(jié)構(gòu)。交互設(shè)計(jì)在于定義人造物的行為方式（the「interaction」即人工制品在特定場景下的反應(yīng)方式）相關(guān)的界面。——百度百科
讀完上面關(guān)于交互設(shè)計(jì)的權(quán)威解釋，相信有讀者和我一樣，在短時(shí)間內(nèi)很難弄明白：到底什么是交互設(shè)計(jì)？
下面，我們一起用第一性原理，拆解和分析交互設(shè)計(jì)的本質(zhì)。
小學(xué)語文老師教會我們一種名次解釋的方法——拆詞法，那么，交互設(shè)計(jì)可以拆解成：交互層和設(shè)計(jì)層。
交互，即交流與互動。具體點(diǎn)說，在某個(gè)場景下，一個(gè)對象為了某個(gè)事件目標(biāo)，與其他對象產(chǎn)生信息的交流與互動。在筆者看來，交互的本質(zhì)是信息的交流與互動，包含用戶、目標(biāo)、場景，它們共同構(gòu)成交互設(shè)計(jì)的交互層，這是交互設(shè)計(jì)的前提。
而用戶、目標(biāo)、場景，也正是辛向陽教授定義的交互設(shè)計(jì)5要素其中的3個(gè)。
案例1：我們?yōu)椤覆蛷d點(diǎn)餐」這個(gè)事件進(jìn)行交互設(shè)計(jì)，那首先要知道這個(gè)案例的交互層是什么，也就是信息的交流與互動是怎樣的。
這個(gè)例子的交互層是：用戶（我們）需要在某個(gè)場景（餐廳），與其他對象（餐廳/服務(wù)員）產(chǎn)生信息的交流與互動，才能達(dá)到目標(biāo)（完成點(diǎn)餐）。
案例2：我們?yōu)椤傅罔F上聽音樂」這個(gè)事件進(jìn)行交互設(shè)計(jì)，按照上面的思路，我們知道這個(gè)事件的交互層是：用戶（我們）需要在某個(gè)場景（地鐵上），與其他對象（音源）產(chǎn)生信息的交流與互動，才能達(dá)到目標(biāo)（聽音樂）。
我小結(jié)一下，幫你理解交互設(shè)計(jì)的交互層。
當(dāng)我們?yōu)槟硞€(gè)事件進(jìn)行交互設(shè)計(jì)時(shí)，首先要知道自己在一個(gè)什么樣的事件前提下開展交互設(shè)計(jì)，而這個(gè)前提就是我所說的交互層，即用戶在某個(gè)場景下，與其他對象產(chǎn)生信息的交流與互動，從而達(dá)到目標(biāo)。
所以，在交互設(shè)計(jì)里的交互層，本質(zhì)是信息的交流與互動，包含用戶、目標(biāo)、場景，主角是信息交流互動的雙方或多方。
在說交互設(shè)計(jì)的設(shè)計(jì)層之前，我們先來看「什么是設(shè)計(jì)」。
設(shè)計(jì)是把一種設(shè)想，通過合理的規(guī)劃、周密的計(jì)劃、通過各種感覺形式傳達(dá)出來的過程?！俣劝倏?
現(xiàn)在我們將上述解釋放到「交互設(shè)計(jì)」里去理解。交互設(shè)計(jì)里的設(shè)計(jì)，就是在交互層的前提下，為一個(gè)事件合理的規(guī)劃/計(jì)劃（行為），并傳達(dá)（媒介）出各種感覺（用戶體驗(yàn)）。
所以，在交互設(shè)計(jì)里的設(shè)計(jì)層，本質(zhì)是找到解決問題的手段，包括媒介和行為，主角是設(shè)計(jì)媒介和行為的設(shè)計(jì)師。
我們繼續(xù)用前面的兩個(gè)案例，理解交互設(shè)計(jì)的設(shè)計(jì)層。
案例1：為了完成「餐廳點(diǎn)餐」的交互設(shè)計(jì)，我們依據(jù)交互層這個(gè)前提，開始找到解決問題的手段，并為之設(shè)計(jì)媒介和行為。
在一些餐廳，用戶還是通過紙質(zhì)菜單，用口述的方式完成點(diǎn)餐。這里的媒介是紙質(zhì)菜單和服務(wù)員，行為是口述。
在另外一些餐廳，用戶用手機(jī)掃碼點(diǎn)餐、下單、結(jié)賬、評價(jià)等。這里的媒介是餐廳點(diǎn)餐的二維碼和用戶的手機(jī)，行為是用手機(jī)掃碼、點(diǎn)餐、結(jié)賬等一系列動作。
案例2：為了完成「地鐵上聽音樂」的交互設(shè)計(jì)，在非智能手機(jī)的時(shí)代，我們基本上是通過一個(gè)可存儲的音樂播放設(shè)備和耳機(jī)完成這個(gè)目標(biāo)的，那時(shí)候的媒介是播放器和耳機(jī)，行為是打開播放器播放音樂、在播放器調(diào)整音樂。
隨著互聯(lián)網(wǎng)和智能手機(jī)的普及，藍(lán)牙傳輸技術(shù)的升級（aptX/LDAC等），以及用戶訴求的升級和多樣化，我們可以設(shè)計(jì)出更多貼近交互層（用戶、目標(biāo)、場景）的媒介和行為。比如音樂APP、藍(lán)牙播放器、藍(lán)牙耳機(jī)、線控耳機(jī)等。
此外，筆者認(rèn)為：媒介和行為是相輔相成的關(guān)系，二者在交互設(shè)計(jì)的過程中會互相促進(jìn)和限制。舉個(gè)例子，一些帶線控的藍(lán)牙耳機(jī)自動連上手機(jī)后，按一下耳機(jī)上的播放鍵，就能直接啟動音樂APP 開始播放了。這個(gè)「開始播放」的行為就可以設(shè)計(jì)在耳機(jī)上，而不僅僅是音樂APP里。
用第一性原理，我將交互設(shè)計(jì)拆解成交互層和設(shè)計(jì)層，并結(jié)合辛向陽教授定義的交互設(shè)計(jì)5要素，得出結(jié)論：交互的本質(zhì)是信息的交流與互動，由用戶、目標(biāo)、場景構(gòu)成；設(shè)計(jì)的本質(zhì)是找到解決問題的手段，由媒介、行為構(gòu)成。
交互設(shè)計(jì)的本質(zhì)：設(shè)計(jì)師為用戶設(shè)計(jì)出在某個(gè)場景下信息交流與互動的媒介和行為，從而達(dá)成目標(biāo)。
1. 把握交互設(shè)計(jì)的行業(yè)差異化
本文從我個(gè)人的角度和經(jīng)驗(yàn)，給大家分享了我對交互設(shè)計(jì)這個(gè)底層概念的理解，在我研究的過程中，最大的體會是，交互設(shè)計(jì)不僅僅表現(xiàn)在屏幕上，其實(shí)在線下場景下，同樣有很多體現(xiàn)，比如現(xiàn)在熱門的服務(wù)設(shè)計(jì)，我覺得它是對交互設(shè)計(jì)的場景化應(yīng)用和延伸。
由此看來，交互設(shè)計(jì)會因行業(yè)和產(chǎn)品形態(tài)的不同，而存在差異化。拿B端產(chǎn)品來說，用戶行為是完成某一項(xiàng)規(guī)范化的工作，而這項(xiàng)工作，往往具備行業(yè)和崗位專業(yè)性，設(shè)計(jì)師需要更好地理解行業(yè)和專業(yè)，才能貼近交互層（用戶、目標(biāo)、場景），設(shè)計(jì)出好的媒介和行為。
2. 具備相關(guān)思維
項(xiàng)目思維。交互設(shè)計(jì)師的工作往往貫穿調(diào)研、需求、設(shè)計(jì)、研發(fā)、測試等環(huán)節(jié)，我們需要把每一個(gè)設(shè)計(jì)Case 當(dāng)成自己的項(xiàng)目一樣去對待，而項(xiàng)目經(jīng)理就是自己，充分發(fā)揮主動解決問題的意識和能力。
用戶思維、產(chǎn)品思維、邏輯思維等。這3個(gè)思維網(wǎng)絡(luò)上有很多解釋，在這里就不贅述了。
3. 充實(shí)知識儲備
點(diǎn)擊下方標(biāo)題，查看已更新的知識篇文章：
4. 提升專業(yè)技能和底層能力
《從今天起培養(yǎng)這5個(gè)好習(xí)慣，讓你在 2019 年快速成長！》
本文從構(gòu)思到寫完，斷斷續(xù)續(xù)有1個(gè)多月了，總希望找到一個(gè)合適的方式去解讀交互設(shè)計(jì)，把這個(gè)概念說明白，但事實(shí)是越研究越覺得復(fù)雜，我需要了解的還有很多。
所以，我寫這篇文章的目的不僅僅是分享我對交互設(shè)計(jì)的淺見，還希望用「第一性原理」這個(gè)拆解、分析、解決問題的思維方式，去研究「什么是交互設(shè)計(jì)」這個(gè)問題。
交互設(shè)計(jì)這個(gè)概念或領(lǐng)域，遠(yuǎn)比我寫的要復(fù)雜和深入，我在研究「交互設(shè)計(jì)」路上才剛起步，希望能與讀者朋友一起交流這個(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
商業(yè)化思維的本質(zhì)就是：創(chuàng)造價(jià)值，通過為客戶創(chuàng)造價(jià)值和交換價(jià)值來驅(qū)動產(chǎn)品以及業(yè)務(wù)的運(yùn)轉(zhuǎn)。那么，如何為用戶創(chuàng)造價(jià)值和交換價(jià)值呢？價(jià)值屬性會跟著用戶屬性的不同而產(chǎn)生變化，所以，在探究這個(gè)問題之前，要根據(jù)將用戶劃分為不同的群體，再從不同的方面著手。
商業(yè)化思維這個(gè)字眼乍看上去很高大上，確實(shí)往大了說，商業(yè)化思維可以套用到各種宏觀微觀的商業(yè)模式當(dāng)中。但我們的目的是讓商業(yè)化思維能夠成為一個(gè)活動運(yùn)營真正日?？捎玫哪芰?xiàng)，所以我們對這個(gè)部分要解讀的商業(yè)化思維的定義稍微做一些邊界設(shè)定。
——基于商業(yè)化思維的本質(zhì)：創(chuàng)造價(jià)值。
我們將探討：如何通過創(chuàng)造價(jià)值去驅(qū)動一個(gè)產(chǎn)品/業(yè)務(wù)？
通過創(chuàng)造價(jià)值驅(qū)動產(chǎn)品/業(yè)務(wù)運(yùn)轉(zhuǎn)是一種完全不同于體驗(yàn)驅(qū)動（也就是產(chǎn)品思維）的模式，也是絕大部分互聯(lián)網(wǎng)從業(yè)者少有接觸的（電商&廣告類的業(yè)務(wù)接觸可能較多一些），能夠綜合使用價(jià)值驅(qū)動和體驗(yàn)驅(qū)動來幫助你策劃一個(gè)業(yè)務(wù)形態(tài)，就會極大拓展你的思路（比如：你能夠策劃出趣頭條類似的廣告費(fèi)轉(zhuǎn)移為用戶成本的模式）。
同時(shí)，也能夠朝著我們的核心目的：讓一個(gè)業(yè)務(wù)叫座又叫好去演進(jìn)。
再次回顧一下產(chǎn)品思維和商業(yè)化思維模式的概念：
那么如何為用戶創(chuàng)造和交換價(jià)值？
價(jià)值屬性是跟著用戶屬性在變化的，要探討如何創(chuàng)造和交換價(jià)值，我們需要先對用戶/客戶做一個(gè)分類：
C用戶：個(gè)人用戶。
B用戶：機(jī)構(gòu)/商家/團(tuán)體等任何非個(gè)人用戶。
一般互聯(lián)網(wǎng)的各種業(yè)務(wù)形態(tài)，會面對的用戶種類基本上就是以上四種，代表著完全不同的四種價(jià)值訴求。
我們對這四種角色分別進(jìn)行價(jià)值創(chuàng)造以及交換的理解和研究，就能夠幫助你在業(yè)務(wù)規(guī)劃當(dāng)中，真正有效的運(yùn)用到商業(yè)化思維。
當(dāng)然這只是商業(yè)化思維最基礎(chǔ)的入門，感興趣的可以基于這個(gè)原理再深入研究。
在面對素人用戶的時(shí)候，商業(yè)化思維主導(dǎo)的用戶價(jià)值和產(chǎn)品化思維主導(dǎo)的用戶價(jià)值有一些交叉和模糊的地帶，為了便于理解和明確另外一種思維模式，我們相對粗暴的定義商業(yè)化思維的價(jià)值更多在于“創(chuàng)造”，區(qū)別于產(chǎn)品化思維的“滿足”。
怎么理解呢？
用戶有購物的需求，打造一個(gè)電商購物產(chǎn)品屬于“滿足”需求。而在購物需求滿足之后，我們讓用戶去進(jìn)行商品分享，通過用戶分享進(jìn)來的訂單我們給予一定的分擁，這就“創(chuàng)造”了額外的賺錢的價(jià)值，可以交換用戶社交關(guān)系鏈曝光的價(jià)值。
當(dāng)然，實(shí)際并沒有這么明確的區(qū)分，用戶購物本身也是一種商業(yè)行為，商品的品牌溢價(jià)、促銷手段（買三減一）等也都可以歸類為價(jià)值創(chuàng)造的范疇。不過，這個(gè)不重要，我們關(guān)鍵要理解的是創(chuàng)造價(jià)值的思維模式。
常見的可以額外創(chuàng)造的素人用戶價(jià)值：賺錢、省錢、炫耀、情感共鳴等不屬于用戶剛性需求（購物，變美，解決問題）的這類可以額外創(chuàng)造的價(jià)值。
而常見的你可以置換的用戶價(jià)值：額外的成本付出、用戶的個(gè)人關(guān)系鏈（自主推廣）、用戶的時(shí)間、用戶的內(nèi)容創(chuàng)造等。
商業(yè)化思維在素人用戶部分，提供一種截然不同的業(yè)務(wù)策劃模式：并不是考慮用戶的需求是什么，然后針對性的策劃一個(gè)產(chǎn)品。而是先思考你想要交換的用戶價(jià)值是什么，然后，思考你如何創(chuàng)造額外的價(jià)值可以有效的置換到用戶的價(jià)值。
在這個(gè)思維模式下，我們并不以體驗(yàn)和操作為優(yōu)先去考慮業(yè)務(wù)形態(tài)，用戶付諸成本是核心考慮因素，成本小于價(jià)值這個(gè)業(yè)務(wù)模式就有效，反之則無效。
這個(gè)思維模式也解釋了：為什么很多體驗(yàn)優(yōu)秀的產(chǎn)品就是沒有用戶愿意去使用？
目前業(yè)內(nèi)新興的一些社交產(chǎn)品擁有比微信更優(yōu)秀的體驗(yàn)，但是產(chǎn)品在社交上創(chuàng)造的額外價(jià)值并沒有大過用戶的關(guān)系鏈遷移成本（想要去交換的價(jià)值）。而一些價(jià)值巨大但體驗(yàn)糟糕的產(chǎn)品用戶還是愿意一遍又一遍的嘗試想要成功走通——一個(gè)分傭50%的商品，再復(fù)雜的操作用戶也愿意去鉆研和使用。
當(dāng)然，通過成本-價(jià)值的模式去思考和規(guī)劃業(yè)務(wù)模型，并不妨礙我們同步去進(jìn)行產(chǎn)品體驗(yàn)的完善，以幫助進(jìn)一步減少用戶在操作上付諸的成本。
商業(yè)化思維在業(yè)務(wù)中的一種典型運(yùn)用場景，基于一個(gè)明確的用戶價(jià)值交換業(yè)務(wù)目的，我們進(jìn)行價(jià)值交換過程的建立，以找到合適的業(yè)務(wù)模式。
例如：我們希望用戶能夠主動進(jìn)行分享（而這個(gè)過程往往基于已經(jīng)滿足了用戶基本需求的狀態(tài)上，比如說一個(gè)電商網(wǎng)站用戶已經(jīng)完成了購物，但是我們還想要額外榨干用戶的價(jià)值），貢獻(xiàn)他們的社交關(guān)系鏈價(jià)值。
首先，我們需要進(jìn)行的思考是：用戶進(jìn)行分享需要付諸的成本是什么？
——分享到朋友圈后造成的個(gè)人形象影響，思考和檢索適合的分享對象的成本，分享動作的操作成本（可以通過體驗(yàn)優(yōu)化極大降低）。
那么思考，基于業(yè)務(wù)特性，我們能夠提供給用戶合適的交換價(jià)值是什么？
——可以通過和商家分?jǐn)偝杀镜念~外現(xiàn)金激勵(lì)？基于稀缺或者高價(jià)產(chǎn)品的炫耀內(nèi)容？或是商品本身附帶的情感屬性？明確的定義清楚這個(gè)具體的價(jià)值是什么。
然后完整的對比，你創(chuàng)造的額外價(jià)值是否大于綜合成本，當(dāng)然這個(gè)對比不是一個(gè)絕對的數(shù)學(xué)對比過程，還摻雜了很多主觀因素。
所以，一定程度的用戶調(diào)研或者簡單一些的自我洞察能夠幫助你得出有效的結(jié)論。如果做不到價(jià)值大于成本，那么這個(gè)業(yè)務(wù)就是不成立的。其實(shí)這個(gè)思維模式的邏輯是顯而易見的，但又往往被忽略。所以，很多分享10元滿減優(yōu)惠券的策劃被創(chuàng)造出來，而根本沒有人思考過10元滿減優(yōu)惠券的價(jià)值其實(shí)遠(yuǎn)遠(yuǎn)低于我分享到朋友圈的成本。
琢磨一下以上的過程，是不是提供了一種全新的思路。幫助你的不僅是簡單的思考“我想讓用戶做什么，所以理所當(dāng)然的策劃一個(gè)產(chǎn)品去引導(dǎo)用戶”，而是真正的考慮清楚業(yè)務(wù)是否成立的根基，然后再從容不迫的去優(yōu)化體驗(yàn)。
時(shí)刻保持“成本-價(jià)值交換”的思維模式，不僅能夠幫助你打造有效的價(jià)值交換業(yè)務(wù)形態(tài)，還有一個(gè)非常有用的場景。
基于一個(gè)明確的用戶訴求，我們進(jìn)行價(jià)值交換過程的分析，以找到業(yè)務(wù)的關(guān)鍵點(diǎn)。
我們還是用電商業(yè)務(wù)場景來舉例：在電商場景中，用戶付諸的最大成本是金錢，而購物操作的成本實(shí)際上優(yōu)先級并不靠前。用戶在價(jià)值交換過程中最優(yōu)先的價(jià)值是：“買到想要的東西”和“足夠的劃算”。
所以，在電商業(yè)務(wù)的重點(diǎn)一定是：提供更豐富的商品庫和更優(yōu)惠的價(jià)格，能夠極大提升價(jià)值的含金量。
而優(yōu)化購物操作體驗(yàn)，頁面動線邏輯等是其次的，可以一定程度減少用戶成本但解決不了價(jià)值不足的問題。
這也解釋了：為什么一個(gè)創(chuàng)造了諸多優(yōu)秀產(chǎn)品（常規(guī)產(chǎn)品主要面對的用戶成本確實(shí)是操作成本，而價(jià)值是比較單一明確的，例如郵箱）的大廠投入了諸多心血打磨產(chǎn)品體驗(yàn)但最終還是在電商戰(zhàn)場戰(zhàn)敗了？
一個(gè)擅長做價(jià)值交換的電商大廠在一個(gè)社交產(chǎn)品（用戶的主要價(jià)值是社交，成本是難以獨(dú)立完成的關(guān)系鏈遷移）上投入了大量的推廣資源和利益誘導(dǎo)確留不下用戶。
你看，大家都在說的基因的本質(zhì)問題，其實(shí)本質(zhì)并不復(fù)雜。當(dāng)然大廠的成敗并不只取決于思路的差異，還有歷史以來積累的資源類型和用戶心智，這些也都是基因的構(gòu)成部分。
我們也不需要操心這么多，學(xué)會運(yùn)用這個(gè)新的思路足以在業(yè)務(wù)策劃中幫助自己抓住真正的重點(diǎn)。
首先明確我們這里所討論的達(dá)人用戶，并不是普通用戶當(dāng)中樂于分享和創(chuàng)造低質(zhì)量內(nèi)容的那群人（當(dāng)然也有高質(zhì)量的但并不普遍），而是以內(nèi)容生產(chǎn)為職業(yè)，創(chuàng)造真正專業(yè)有價(jià)值內(nèi)容，能夠構(gòu)成你的平臺核心競爭力的那群人。
區(qū)別于普通用戶，我們希望置換的達(dá)人用戶價(jià)值是比較高的，平臺依賴這些達(dá)人用戶去不斷供給符合平臺導(dǎo)向的優(yōu)質(zhì)內(nèi)容，而內(nèi)容生產(chǎn)的成本極大，也就需要更大的價(jià)值來進(jìn)行置換。
達(dá)人用戶常見價(jià)值訴求：變現(xiàn)、曝光、獨(dú)特的內(nèi)容生產(chǎn)能力、有效的粉絲互動和管理能力。
達(dá)人用戶需要付諸的成本：內(nèi)容生產(chǎn)成本。
基于創(chuàng)造價(jià)值大于成本的邏輯，要打造優(yōu)秀的面相達(dá)人用戶的業(yè)務(wù)，就可以從幾個(gè)方面著手（增加提供的價(jià)值）：
提供足夠價(jià)值的變現(xiàn)能力：
專業(yè)的達(dá)人往往以此生存，和普通用戶一樣的分傭價(jià)值只能作為額外的補(bǔ)充價(jià)值，并不能達(dá)到達(dá)人的標(biāo)準(zhǔn)。
所以，如果你的業(yè)務(wù)希望依靠變現(xiàn)價(jià)值來讓達(dá)人自發(fā)留下，那么你需要考慮的核心問題和需要尋找打造的案例就是：有沒有達(dá)人可以在你的平臺賺錢養(yǎng)活自己。
當(dāng)然如果沒有內(nèi)容獨(dú)家協(xié)議的限制，達(dá)人可以依靠多平臺存活，對你的要求就不會那么高，但變現(xiàn)的價(jià)值也一定是生存級別的（幾千元）而不是福利級別的（幾百元甚至以下）。達(dá)不到這個(gè)標(biāo)準(zhǔn)，你的業(yè)務(wù)邏輯確實(shí)就不成立。
提供足夠多的曝光量級：
當(dāng)然這個(gè)和你的用戶規(guī)模以及流量分配機(jī)制有關(guān)，需要考慮的問題是：你給的曝光是不是有效的曝光？你的達(dá)人用戶能否有效的把曝光轉(zhuǎn)化為強(qiáng)關(guān)系的粉絲，或者是個(gè)人品牌認(rèn)知用戶？
這個(gè)目的達(dá)不到只是粗暴的給曝光并沒有用（例如：很多內(nèi)容平臺會找我要稿子，一些平臺只會放作者名字而不愿意曝光作者個(gè)人公眾號，我就非?？咕転樗麄兲峁└寮?
很多冷啟動的業(yè)務(wù)面對的是達(dá)人內(nèi)容量級和用戶量級循環(huán)驅(qū)動增長的問題，在這個(gè)邏輯下一定程度的達(dá)人內(nèi)容補(bǔ)貼是常用的手段。但不能偏離的是，你的激勵(lì)要做用戶這個(gè)循環(huán)，要求仍然是激活的內(nèi)容一定要對用戶有價(jià)值而不只是湊數(shù)，達(dá)人的補(bǔ)貼規(guī)模也要達(dá)到生存級別。
提供獨(dú)有的內(nèi)容生產(chǎn)能力（生產(chǎn)素材）：
或者說獨(dú)特的有效的粉絲互動管理能力等產(chǎn)品層面的價(jià)值也是一種辦法。但說實(shí)話國內(nèi)互聯(lián)網(wǎng)KOL行業(yè)發(fā)展多年已成定局，大的MCN機(jī)構(gòu)已經(jīng)壟斷了大的流量和真正專業(yè)的內(nèi)容生產(chǎn)者，平臺遷移成本極低；大流量主產(chǎn)品能力的抄襲門檻又不算高。
所以，除非你能純粹的全面培養(yǎng)素人成為達(dá)人，否則這類型的手段可能只作為補(bǔ)充，要真的撬動達(dá)人價(jià)值還是要回歸到以上兩個(gè)點(diǎn)。
降低創(chuàng)作的成本：
當(dāng)你的產(chǎn)品不足以讓一個(gè)達(dá)人在這里養(yǎng)活自己，那么你可能就很難得到獨(dú)家的內(nèi)容。
要讓達(dá)人愿意在你這里搬遷內(nèi)容或者一定程度的定制創(chuàng)作，可走的路就只有盡量減少內(nèi)容生產(chǎn)的成本——快速搬遷，極低門檻的排版能力，和行業(yè)通用規(guī)則一致的產(chǎn)品形態(tài)等等。
接下來，我們看一下另外一個(gè)截然不同的面對B客戶的領(lǐng)域。
B客戶相比于C客戶，目的更加明確，愿意投入更大的成本交換更大的價(jià)值。在B的領(lǐng)域，商業(yè)化思維的主導(dǎo)就更加明確，價(jià)值的創(chuàng)造和交換成為了唯一的話題，產(chǎn)品體驗(yàn)起到的作用微乎其微，除非你提供的價(jià)值本身就是產(chǎn)品的體驗(yàn)（比如說：一些企業(yè)服務(wù)工具）。
要理解生意人B的價(jià)值訴求，先從一個(gè)個(gè)人經(jīng)歷的故事開始：
曾經(jīng)牽頭過一個(gè)面向B商家服務(wù)的工具平臺，商家支付費(fèi)用使用工具和流量等整合的服務(wù)。
在工具平臺搭建的早起，我們以非常產(chǎn)品導(dǎo)向的思維進(jìn)行了規(guī)劃，重點(diǎn)考慮的是工具的各種功能、平臺使用體驗(yàn)、對平臺的流量等價(jià)值貢獻(xiàn)等問題，設(shè)定了工具平臺的點(diǎn)擊率、跳轉(zhuǎn)率、轉(zhuǎn)化率等關(guān)鍵考核指標(biāo)，在這些導(dǎo)向下不斷的去優(yōu)化工具平臺。
然后，我們召開了第一次的商家推廣大會，準(zhǔn)備了精美的PPT，詳盡的介紹了工具平臺各種先進(jìn)的能力，復(fù)雜的邏輯和優(yōu)秀的體驗(yàn)，其華麗程度首先把我們自己都感動了。
但是，現(xiàn)場反應(yīng)平平，幾乎所有商家全程都在玩手機(jī)，似乎對我們精彩的演講絲毫不感興趣。
會后我們找到幾個(gè)資深的商家咨詢了原因，其中一句關(guān)鍵的點(diǎn)播對我們產(chǎn)生了至關(guān)重要的影響：
“我們只想知道在你這里能不能賺錢，投入多少回報(bào)多少，流量成本吧如何，比其他平臺有沒有優(yōu)勢。其他的真的不太在意?！?
這一句話真正引起了我們關(guān)于“什么是商業(yè)化？”“怎么樣才叫做生意？”的思考。
面對著實(shí)打?qū)嵰湍阕錾獾纳碳?，一切形式化的虛無的東西都沒有任何意義，只有唯一關(guān)鍵的話題：賺錢（當(dāng)然不同的業(yè)務(wù)模式又有其他的一些核心價(jià)值例如獲客等但邏輯都是可以套用的）。
回去以后我們快速調(diào)整了整個(gè)業(yè)務(wù)的導(dǎo)向，弱化了所有關(guān)于體驗(yàn)的考核指標(biāo)——點(diǎn)擊率，轉(zhuǎn)化率（還要保留的原因是：這個(gè)產(chǎn)品還涉及到C端的用戶體驗(yàn)），而把一切涉及到投入產(chǎn)出，能不能掙錢的指標(biāo)——流量成本，拉新成本，費(fèi)用的投入產(chǎn)出比，作為主要的考核導(dǎo)向來指導(dǎo)所有的工作方向。
至此為起點(diǎn)，這個(gè)產(chǎn)品開始真正的在市場上迎來了爆發(fā)，每一次宣講會后（新的宣講會我們只強(qiáng)調(diào)投入產(chǎn)出效果）開放的名額都被一搶而空。
以上的故事即是我對與生意人B合作的商業(yè)化思維理解：剝離掉生意場各種復(fù)雜的規(guī)則和概念，要撬動生意人B的投入，實(shí)際上也是在和他們做生意。能不能幫他們賺錢是唯一應(yīng)該考慮的問題。任何經(jīng)過包裝的，浮夸的，虛無的內(nèi)容在真實(shí)的投入產(chǎn)出效果下都沒有任何意義。
當(dāng)你合作的對象從一個(gè)想要賺錢的生意人變成了一個(gè)大公司內(nèi)部的職業(yè)經(jīng)理人，你將面對的價(jià)值又從單純的賺錢變成了更復(fù)雜的職業(yè)經(jīng)理人價(jià)值。
一個(gè)職業(yè)經(jīng)理人心里在意的價(jià)值第一優(yōu)先級，并不是幫助公司更多的盈利和獲取價(jià)值（雖然這個(gè)理念并不道德但這是現(xiàn)狀你不得不面對），而是他在和領(lǐng)導(dǎo)匯報(bào)這次合作價(jià)值的時(shí)候是否能得到認(rèn)可。
所以，面對職業(yè)經(jīng)理人這樣的B端客戶，并不能僅僅考慮實(shí)現(xiàn)業(yè)務(wù)目標(biāo)，你還需要從他的角度考慮：能否過讓這次的合作有更多的標(biāo)桿價(jià)值、項(xiàng)目意義能夠挖掘和包裝出來，以幫助他形成一個(gè)漂亮的匯報(bào)文件。
所以，和B端客戶做生意，需要更多講故事的能力。除了業(yè)務(wù)目標(biāo)的承諾外，你還能夠在方面銷售合作談判的時(shí)候，能夠完整的描述出：未來他在做匯報(bào)時(shí)候能夠拿到的完美的報(bào)告是什么樣子的？
以此去考慮：你在一開始要銷售方案應(yīng)該如何設(shè)計(jì)？業(yè)務(wù)應(yīng)該增加哪些模塊？合作應(yīng)該提供哪些支持？就能夠更好的幫助你搞定一個(gè)職業(yè)經(jīng)理人的客戶。
以上便是基于活動運(yùn)營應(yīng)該掌握的最基本的一些商業(yè)化思維業(yè)務(wù)運(yùn)用介紹，除了常規(guī)的運(yùn)用外，更重要的還是要強(qiáng)調(diào)互聯(lián)網(wǎng)非技術(shù)工種人員應(yīng)該都要具備“創(chuàng)造體驗(yàn)”和“創(chuàng)造價(jià)值”兩種思維模式，能夠真的幫助你創(chuà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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn