2018-12-25 濤濤
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
文章目錄
此前，除了產(chǎn)品名及代言人的形象露出外，產(chǎn)品層面尚未有過明確且體系化的品牌概念傳達，因此無既有的概念或相關(guān)信息可遵循或參考，需從頭理清。
如上所述，由于目前所處階段，本次將以品牌自身單方面輸出為主，因此我們訪談了相關(guān)業(yè)務(wù)負責(zé)人，探討了產(chǎn)品當(dāng)前在服務(wù)層面關(guān)注的方向以及力爭為用戶營造的體驗。
同時，我們也想了解用戶在使用安居客過程中所形成的總體印象并將其作為補充，因此，抓取了應(yīng)用市場上安居客用戶的正面反饋并從中提煉出高頻詞匯。
△ 用戶評價詞云圖
通過繪制品牌心智地圖，可將以上零散的信息分類及提煉，以此來組織并簡化我們對產(chǎn)品品牌認(rèn)知的心智結(jié)構(gòu)，最終描繪出一幅由品牌內(nèi)核所延展出的圖景，其組成可以是品牌的各個方面，凝練了關(guān)于一個品牌之所以是一個品牌的構(gòu)成。
△ 品牌心智地圖
進一步的，從品牌心智地圖中提煉出構(gòu)成品牌的核心部分，分別從品牌功能（Brand Functions）、描述性修飾語（Descriptive Modifier）及情感性修飾語（Emotional Modifier）這三個維度去詮釋。
品牌功能描述了產(chǎn)品或服務(wù)的性質(zhì)，即品牌能夠向用戶提供的體驗或益處的類型；描述性修飾語將進一步分類及明確品牌所傳達出樣貌之性質(zhì)；情感性修飾語則解釋了給用戶帶來的益處是什么。
對安居客而言，作為連接房地產(chǎn)行業(yè)中中介與需求端的平臺，其本質(zhì)上是一個信息服務(wù)平臺；而由其對信息的深度、廣度及有效性的努力以及對信息傳達效率的追求可看出，其力求提供的是一種專業(yè)的信息服務(wù)；結(jié)合監(jiān)管機制的建設(shè)力爭為用戶營造一種可靠、安心的體驗。
△ 品牌精髓
小結(jié)
通過以上步驟，基本能夠逐漸抽象出所要表達之物?？珊唵螌⑸鲜鲞^程的目的理解為定義視覺風(fēng)格的方向。
△ 品牌概念抽象過程
明確所要表現(xiàn)的對象后，便可開始構(gòu)建從內(nèi)容到形式這一轉(zhuǎn)化過程，最終構(gòu)建出契合品牌的設(shè)計風(fēng)格。
首先，嘗試將品牌概念人格化，以作為后續(xù)推導(dǎo)過程中的燈塔，避免偏離航向?；谒釤挸龅钠放凭?，演繹出以下設(shè)定：
改版前文案風(fēng)格分析
現(xiàn)有方案中可窺見以下特征：
△ 改版前文案風(fēng)格
設(shè)計策略
為了貼合所設(shè)定的人格化形象，筆者制定了以下策略來調(diào)整文案寫作風(fēng)格：
此前，空狀態(tài)經(jīng)手不同設(shè)計師，且團隊中尚無可遵從的寫作風(fēng)格指南，原有文案多少顯得混雜零亂，而句式結(jié)構(gòu)也是文案風(fēng)格的構(gòu)成要素，因此，筆者嘗試構(gòu)建統(tǒng)一的句式結(jié)構(gòu)來滿足現(xiàn)已發(fā)現(xiàn)的五十多處以及將來仍會不斷產(chǎn)生的空狀態(tài)在表達時的需求。
將重新設(shè)計的所有文案按句式結(jié)構(gòu)的異同分類，從中可發(fā)現(xiàn)明顯的規(guī)律，其對應(yīng)的正是針對不同場景所使用的差異化策略，對于單獨出現(xiàn)的句型，在分析其所屬場景及所需引導(dǎo)策略后，判斷其是必要句型還是可復(fù)用其他句型，最終形成了能夠覆蓋當(dāng)前所有場景的五種句式結(jié)構(gòu)，可指導(dǎo)未來同類場景的應(yīng)用。
△ 句式結(jié)構(gòu)構(gòu)建過程
風(fēng)格構(gòu)建
構(gòu)建思路：以品牌精髓中的情感修飾語及描述性修飾語作為核心意象，同時解構(gòu)對應(yīng)表現(xiàn)形式的形態(tài)要素，其后分別以形態(tài)要素為對象將核心意象進行演繹。由于品牌精髓所處抽象層次較高，無法直接指向具體表達方式的選擇——再以得到的具體情感意象作為標(biāo)尺，尋求契合的表達方式。
色：將品牌精髓以顏色能夠觸發(fā)的感受為視角進行演繹，并根據(jù)顏色與人類心理感知的映射關(guān)系確定基本色相范圍。
而對顏色具體的定義可在相同的表達訴求下進一步控制色彩要素來獲取，如中性色的視覺表現(xiàn)在于色相上的控制，我們通過在色相上加入藍來獲取「高級感」；而由于安居客本身的品牌色即屬綠色，因此我們直接選用；對于藍色，考慮到實際應(yīng)用時與綠色的搭配，在色相上融入綠色使兩者呈現(xiàn)時能夠相互融合。
△ 色的定義
形：在實際建構(gòu)「形」的表達方式與情緒感受的映射關(guān)系時筆者發(fā)現(xiàn)，不同于顏色的千變?nèi)f化，「形」在各維度的表達方式上更多的呈現(xiàn)一種二元對立的局面，這種情況下，不對品牌精髓進行演繹亦可對表達方式作出選擇。
△ 形的定義
風(fēng)格應(yīng)用
色的應(yīng)用：由空狀態(tài)設(shè)計中對所有場景的意象設(shè)定，可對場景刻畫中所需的元素進行如下分類：
針對插畫，且處于空狀態(tài)這種非正常場景，當(dāng)前濃郁的品牌色不便直接使用，因此從明度層面對其進行處理，以得到適用的顏色。
△ 品牌色的處理
人作為場景構(gòu)建中的組成部分，并非主體，且需要與物形成對比，因此使用白色。
△ 人的顏色應(yīng)用
物在場景的構(gòu)筑中承擔(dān)了以下角色：
對應(yīng)到結(jié)構(gòu)，分別為：
對于前者，以中性色呈現(xiàn)其主體，主色點綴于次一級元素；而后者，遠景作為主要場景元素施以中性色，近景混合應(yīng)用主色。如此，既保證情緒色的露出，也豐富畫面的細膩程度。
△ 物的顏色應(yīng)用
光影
△ 光照的顏色應(yīng)用
背景：白色或明亮的顏色更讓人有安全感，且我們希望圖示能融入界面中，因此設(shè)定為白色。
形的應(yīng)用：元素形狀、元素方向、主體占比、主體位置。
元素形狀：避免銳利的切角，更多的用矩形及圓形這類相對更穩(wěn)定的形狀。
△ 元素形狀定義
元素方向：以水平面或不同面構(gòu)成的穩(wěn)定體系為主，避免單獨應(yīng)用斜切面。
△ 元素方向定義
主體占比：占據(jù)畫面中較大比例。
△ 主體占比定義
主體位置：置于畫面中心偏下。
△ 主體位置定義
我們的設(shè)計目標(biāo)是形成契合品牌的視覺風(fēng)格，若目標(biāo)達成，用戶應(yīng)當(dāng)能被具備明確視覺風(fēng)格的界面激發(fā)相應(yīng)感受，從而可得到如下測試過程：安排被試瀏覽相關(guān)界面，測量其情感感受。
那如何測量人的情感呢？
在對情感測量方法的搜尋中，筆者發(fā)現(xiàn)了心理測量（相對的是生理測量）中常用的語義差異量表（semantic differential scale），其由若干表達情感體驗的詞匯和量尺組成，由用戶根據(jù)感受程度選取相應(yīng)的等級，從而獲取到情感信息。
最終，可得到如下驗證思路：
△ 驗證思路
定性研究方法并非如定量研究方法那般天然具備確定樣本量的統(tǒng)計技術(shù)，目前也尚無通用的技術(shù)，業(yè)界較為熟知的 Jakob Nielsen 所提出的「可用性研究只需測試5個用戶」的說法，由于其限于可用性研究，「測試5個用戶」的說法也只是總結(jié)性的論述，實際也需酌情判斷，因此，為了確保獲取足夠的數(shù)據(jù)，筆者嘗試尋求更和通用的解決方案，最終鎖定在了市場研究公司 Research by Design 的 Donna Bonde 所提出的指南（Qualitative market research: When enough is enough）。
筆者認(rèn)為其建設(shè)性在于：
因此，筆者參照其分析進行了對樣本量的設(shè)定。先根據(jù)實際項目及團隊情況，對相關(guān)因素進行賦值：
△ 樣本量設(shè)定
再根據(jù)以下公式可得出適用于本項目的樣本量：
量尺設(shè)計
量表類型：由于對評價對象提供了對立的形象，自然需要使用雙級量尺，即要求被試從0點開始向兩端方向發(fā)展的數(shù)值中做出評選。
標(biāo)度數(shù)：設(shè)定標(biāo)度數(shù)時需平衡兩點，足夠精細，充分滿足被試表達的需求；控制數(shù)量，避免選項太過瑣碎。
常用的標(biāo)度數(shù)中，七點評分量表相比五點評分量表能夠得到更準(zhǔn)確的結(jié)果，而11點量表所能收集到的數(shù)據(jù)雖然最接近正態(tài)分布，但對被試來說成本也會隨之增加，增大疲勞效應(yīng)，因此，筆者最終選擇了七點標(biāo)度：
△ 量尺標(biāo)度數(shù)
修飾詞：對于量尺的數(shù)字，需要通過形容詞來賦予意義，否則被試很難進行判斷；且修飾詞需在意義上和相應(yīng)數(shù)值對應(yīng)，這似乎很難實現(xiàn)，幸而前人已對不同量尺形容詞就其表示的程度水平進行過系統(tǒng)的評估，使得筆者能直接繞過這個問題。
筆者按照所用的標(biāo)度數(shù)，選擇了對應(yīng)能產(chǎn)生等現(xiàn)間距的修飾詞：
△ 量尺修飾詞
測量對象的語義轉(zhuǎn)化
基于輸出的文案風(fēng)格與視覺意象及其對應(yīng)策略，可分別確定具體的測量對象，再以此設(shè)定能夠顯示其對立形象的形容詞：
△ 語義轉(zhuǎn)化過程
量表結(jié)構(gòu)設(shè)計
為了避免語義啟動造成被試評價時產(chǎn)生偏差，需將有關(guān)系的條目隨機擺放，并將褒義詞和貶義詞分布在量表兩端而不是互相集中在一邊，以起到語義抑制效果，避免被試在作答前不經(jīng)思考。
另外，在第一輪測試中，筆者發(fā)現(xiàn)不止一位被試在對某一條目評價時混淆了其描述對象，除了其個人認(rèn)知水平外，某些條目在當(dāng)前語境下所展現(xiàn)出的描述關(guān)系依然不夠明確，因此筆者按照條目的描述對象對其進行了分類，并說明其描述對象。
△ 量表結(jié)構(gòu)
關(guān)于空狀態(tài)本身，相對于本文所涉及的其他內(nèi)容，其作為范式更被設(shè)計師所熟識，但在設(shè)計策略及視覺表現(xiàn)上似乎又并非如想象中簡單。
「空狀態(tài)」之稱乃立足于表現(xiàn)層之觀察，其承載的實際是若干種場景，反饋「空」只是其中的一種也是最后一種手段，條件允許的情況下，應(yīng)當(dāng)首先考慮如何去引導(dǎo)用戶。因本項目落地于空狀態(tài)，上述其他設(shè)計策略不在此展開，下文將詳述空狀態(tài)的設(shè)計。
空狀態(tài)內(nèi)容
空狀態(tài)由兩部分構(gòu)成——反饋和引導(dǎo)。基于當(dāng)前情境的反饋能讓用戶獲悉所發(fā)生的事；在此基礎(chǔ)之上，還需提供引導(dǎo)以幫助用戶完成最終的任務(wù)。
反饋：反饋通常由圖像與文案組成，其風(fēng)格應(yīng)契合品牌調(diào)性，其內(nèi)容除了基本的反饋信息外也應(yīng)更多地考慮如何引導(dǎo)用戶。
引導(dǎo)：此處的引導(dǎo)指的就是最終根據(jù)實際情境提供的操作，如無可支持的功能，可以文案形式進行表達。
空狀態(tài)結(jié)構(gòu)類型
針對安居客產(chǎn)品中的場景，除了完整的空狀態(tài)結(jié)構(gòu)，對于模塊化的頁面，由于模塊本身的高度有限，在數(shù)據(jù)為空時，只取描述文案作為反饋，并在樣式上弱化按鈕使其在當(dāng)前結(jié)構(gòu)下保持原有的視覺權(quán)重，以其為另一種空狀態(tài)結(jié)構(gòu)。
△ 空狀態(tài)結(jié)構(gòu)
視圖結(jié)構(gòu)類型
空狀態(tài)本身的結(jié)構(gòu)和布局應(yīng)當(dāng)一致，但對于平臺型產(chǎn)品，伴隨著業(yè)務(wù)復(fù)雜性的是頁面結(jié)構(gòu)的多樣性，這使得空狀態(tài)呈現(xiàn)于不同容器中，為達到一致的視覺效果在視覺輸出環(huán)節(jié)就需要針對性地定義布局邏輯。
而上述所謂的一致效果即為空狀態(tài)模塊應(yīng)當(dāng)居中展示于所有容器中，但由于空狀態(tài)模塊的重心并非在其物理中心上，因此為達到視覺居中的效果，在將其物理居中的基礎(chǔ)上還需在垂直方向上作相應(yīng)調(diào)整。
完整視圖：視圖的高度隨設(shè)備而變化，因此使用相對定位，布局邏輯即為將空狀態(tài)模塊相對于視圖中心垂直上移固定距離。
△ 完整視圖的布局邏輯
模塊與列表：對于相近的模塊，可統(tǒng)一其高度（無法通用的場景還需另外定義高度），此時可使用絕對定位，布局邏輯即為空狀態(tài)模塊相對容器頂部保持固定距離。
△ 模塊布的局邏輯
對于列表，由于其高度不固定，在空狀態(tài)時常規(guī)的處理方式是將空狀態(tài)置于背景之上或 cell 之中，前者不適用于基于白色背景的空狀態(tài)設(shè)計，而后者的形式與其實際層級關(guān)系不符，因此我們最終選擇了添加 view 來實現(xiàn)效果，如此就需定義高度來滿足此種場景中的所有情況，其布局邏輯也就與模塊中所應(yīng)用的相同。
圖示的設(shè)計策略核心在于其內(nèi)容的表達即意象的設(shè)定，常規(guī)的以空對象為意象的做法，無更多信息傳達，亦無助于信息傳達，是一種徒增冗余的可視化；以情緒為意象的做法由于其抽象程度和表意當(dāng)應(yīng)用于所有空狀態(tài)，這種重復(fù)容易讓用戶厭煩且無趣；而近來越來越多見的場景化表現(xiàn)形式，設(shè)計者對于意象的設(shè)定依舊未脫離于上述范疇，更有甚者，一股腦鉆進表現(xiàn)形式中不可自拔，竟無明確意象的設(shè)定。
基于上述分析，筆者認(rèn)為更合適的做法是：內(nèi)容上表現(xiàn)所引導(dǎo)的行為（如有），形式上以場景的構(gòu)筑間接表達意象。此作法更豐滿地引導(dǎo)了行為，表達方式上也更具感染力。
根據(jù)場景筆者設(shè)定了三類意象：
對于「虛無」的概念，即以寫實的方式在空間層面描繪出來，并讓人置身其中，營造出一種孤寂的氛圍。
△ 「虛無」的意象表達
對于行為及環(huán)境，筆者將抽象的概念具象化，以其為意象。以「用戶未曾對相關(guān)對象發(fā)表評論」為例，對事物進行主觀或客觀的闡述是一種抽象的概念，難以直接可視化，因此筆者將視角落在了行為的表達或?qū)嵤┬问缴?，從中選擇了「書寫」這一動作作為意象，同時在構(gòu)建場景時，打破人和物的比例關(guān)系并夸張?zhí)幚恚纬梢环N趣味性的觀感，進一步觸發(fā)用戶的共情。
△ 「評論」的意象表達
其他場景示例：
△ 其他場景示例
定性類驗證方法相對于埋點數(shù)據(jù)這類定量方法附帶的優(yōu)勢是可在設(shè)計過程中幫助改進設(shè)計，因此，整個過程中我們根據(jù)測試結(jié)果和測試過程中遇到的問題迭代著設(shè)計方案以及測試流程本身。
第一輪測試中，被試被觸發(fā)的情感感知與我們的目標(biāo)方向相反，且還發(fā)現(xiàn)了超出我們預(yù)期的視覺可用性問題；文案方面，多組條目用戶無法感知（本身為中性對象除外）。
△ 第一輪測試輪廓圖
具體分析如下：
△ 第一輪測試結(jié)果分析
經(jīng)過對這些結(jié)果和反饋的分析后，我們著手調(diào)整視覺表現(xiàn)：進一步地分解插畫中視覺表達構(gòu)成的元素，并探究不同的處理手段與受眾感受間的關(guān)系，以此摸索達成目標(biāo)風(fēng)格的設(shè)計策略。并在此基礎(chǔ)上，調(diào)整對應(yīng)的形容詞詞對，使其更的表達對應(yīng)的情感感受。
△ 迭代前后方案對比
其后，我們選擇了幾個具有代表性的場景進行了應(yīng)用便進行了第二輪測試，在得到了命中預(yù)期范圍的測試結(jié)果后，再對其他頁面進行了統(tǒng)一調(diào)整。
△ 第二輪測試輪廓圖
在所有方案產(chǎn)出后，針對整體視覺和文案風(fēng)格進行了第三輪測試，最終的結(jié)果基本都達到了預(yù)期，測試到此結(jié)束。
△ 第三輪測試輪廓圖
1. 明確「品牌精髓」的定義及應(yīng)用
在撰寫此文的過程中，伴隨著對品牌精髓產(chǎn)生了更深的理解，筆者對于描述性修飾語及情感性修飾語的定義及提煉方式產(chǎn)生了疑問——如「專業(yè)」一詞作為描述性修飾語是否會顯得寬泛？且由于品牌精髓作為后續(xù)加工過程的源頭，決定了整個加工過程的順利和準(zhǔn)確，因此，對其的準(zhǔn)確理解和應(yīng)用顯得尤為重要。
2. 進一步探索情感轉(zhuǎn)換及其應(yīng)用
在有形產(chǎn)品設(shè)計領(lǐng)域，早在上世紀(jì)八十年代初便開始關(guān)注人的感性需求及意象與產(chǎn)品設(shè)計的形態(tài)要素間的關(guān)系，并形成了體系化的理論——感性工學(xué)，并從日本汽車行業(yè)的應(yīng)用滲透到了日本各個產(chǎn)品設(shè)計領(lǐng)域，進而逐漸傳播到西方國家及中國等國家。但在「用戶體驗設(shè)計」行業(yè)，尚停留在對「情感化設(shè)計」一詞朗朗上口卻又渾然無知的階段。
而目前業(yè)界所「熟知」的 Donad. A. Norman 教授提出的三層次理論——亦是情感化設(shè)計領(lǐng)域除感性工學(xué)理論外另一個被公認(rèn)的理論體系，更接近于一種世界觀，解決「是什么」的問題，而非方法論；解決「怎么辦」的問題。這和 Jesse Jame Garrett 提出的「用戶體驗要素」在軟件產(chǎn)品設(shè)計領(lǐng)域知識框架中的定位類似，因此，在實際應(yīng)用于交互設(shè)計與界面設(shè)計時還需彌補中間的斷層。
借此次空狀態(tài)改版，筆者在品牌輸出的過程中摸索著情緒感受與設(shè)計風(fēng)格的映射關(guān)系，形成了初步的構(gòu)建思路，且在關(guān)于感性工程的相關(guān)文獻中得到了印證，但在風(fēng)格應(yīng)用層面，此次只是初作嘗試，尚存在很大優(yōu)化空間。未來，將以此為基礎(chǔ)針對界面進行嘗試，并在情感轉(zhuǎn)換層面進行更深入的挖掘與探索。
3. 嘗試建立視覺情感語義詞庫
在設(shè)計量表的過程中，筆者明顯感受到為測量對象設(shè)定形容詞詞對的困難——準(zhǔn)確把握測量對象與對應(yīng)形象間的聯(lián)想關(guān)系，甚至在實際測試過程中基于用戶的測試結(jié)果和反饋，筆者持續(xù)迭代著問卷條目及對應(yīng)形容詞詞對的選用。
而以筆者目前對語義差別量表的理解和應(yīng)用，其作為「測量某一客體對受眾的意義」的工具，對于視覺風(fēng)格的構(gòu)建將會是重要的設(shè)計驗證手段。
基于此，有必要尋求并建立一套視覺情感語義詞庫，以保證量表設(shè)計的有效性。
4. 確認(rèn)情感測試中建立基準(zhǔn)線的必要性
在測試過程中，筆者明顯覺察到不同被試對相同概念顯著的理解差異，大致分為如下兩種情形：
這直接影響到數(shù)據(jù)收集的準(zhǔn)確性。
筆者當(dāng)下的反應(yīng)是應(yīng)當(dāng)對被試先建立基準(zhǔn)線，從而能夠?qū)?shù)據(jù)進行加權(quán)處理，但鑒于需要針對問卷條目設(shè)計對應(yīng)的問題及素材，筆者選擇了更敏捷的做法——把通過訪談所認(rèn)定的存在明顯偏差的結(jié)果作為異常值剔除出最后的統(tǒng)計。
因此，如后期將語義差別量表列入針對視覺風(fēng)格構(gòu)建的標(biāo)準(zhǔn)驗證方法之中，為保證數(shù)據(jù)的準(zhǔn)確性，有必要對是否加設(shè)「建立被試對相關(guān)概念理解及程度的基準(zhǔn)線」這一環(huán)節(jié)進行研究和確認(rèn)。
本文以項目為描述對象，因此，并未冗述所涉及到方法的更多細節(jié)（諸如其概念、優(yōu)劣、使用原則、注意事項等），待時機成熟時我們會陸續(xù)輸出相關(guān)方法及工具（如定性研究中樣本量的設(shè)定、量表中量尺的設(shè)計、訪談中的注意事項、語義差別量表的設(shè)計和使用等）的使用指南，包括封裝好的文檔工具，望能拋磚引玉。
藍藍設(shè)計( www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.alimai.net