如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里

 

文章目錄

1. 品牌定義
2. 品牌映射（設計風格構建）
3. 驗證方案設計
4. 空狀態(tài)設計
5. 驗證實施及結果
6. 遺留問題及后續(xù)關注

品牌定義

此前，除了產(chǎn)品名及代言人的形象露出外，產(chǎn)品層面尚未有過明確且體系化的品牌概念傳達，因此無既有的概念或相關信息可遵循或參考，需從頭理清。

1. 收集相關數(shù)據(jù)

如上所述，由于目前所處階段，本次將以品牌自身單方面輸出為主，因此我們訪談了相關業(yè)務負責人，探討了產(chǎn)品當前在服務層面關注的方向以及力爭為用戶營造的體驗。

同時，我們也想了解用戶在使用安居客過程中所形成的總體印象并將其作為補充，因此，抓取了應用市場上安居客用戶的正面反饋并從中提煉出高頻詞匯。

△ 用戶評價詞云圖

2. 建立品牌心智地圖（Mental Map）

通過繪制品牌心智地圖，可將以上零散的信息分類及提煉，以此來組織并簡化我們對產(chǎn)品品牌認知的心智結構，最終描繪出一幅由品牌內核所延展出的圖景，其組成可以是品牌的各個方面，凝練了關于一個品牌之所以是一個品牌的構成。

△ 品牌心智地圖

3. 提煉品牌精髓（Brand Mantra）

進一步的，從品牌心智地圖中提煉出構成品牌的核心部分，分別從品牌功能（Brand Functions）、描述性修飾語（Descriptive Modifier）及情感性修飾語（Emotional Modifier）這三個維度去詮釋。

品牌功能描述了產(chǎn)品或服務的性質，即品牌能夠向用戶提供的體驗或益處的類型；描述性修飾語將進一步分類及明確品牌所傳達出樣貌之性質；情感性修飾語則解釋了給用戶帶來的益處是什么。

對安居客而言，作為連接房地產(chǎn)行業(yè)中中介與需求端的平臺，其本質上是一個信息服務平臺；而由其對信息的深度、廣度及有效性的努力以及對信息傳達效率的追求可看出，其力求提供的是一種專業(yè)的信息服務；結合監(jiān)管機制的建設力爭為用戶營造一種可靠、安心的體驗。

△ 品牌精髓

小結

通過以上步驟，基本能夠逐漸抽象出所要表達之物?？珊唵螌⑸鲜鲞^程的目的理解為定義視覺風格的方向。

△ 品牌概念抽象過程

品牌映射（設計風格構建）

明確所要表現(xiàn)的對象后，便可開始構建從內容到形式這一轉化過程，最終構建出契合品牌的設計風格。

1. 文案風格構建

首先，嘗試將品牌概念人格化，以作為后續(xù)推導過程中的燈塔，避免偏離航向。基于所提煉出的品牌精髓，演繹出以下設定：

• 品牌性別：男性
• 品牌角色：專家
• 品牌性格：沉著、從容
• 與用戶的關系：安居客之于用戶就像是一位專業(yè)、貼心的「私人顧問」，在用戶遇到問題時沉著冷靜地為其指點迷津，在用戶產(chǎn)生疑惑時體貼入微地為其答疑解惑。

改版前文案風格分析

現(xiàn)有方案中可窺見以下特征：

△ 改版前文案風格

設計策略

為了貼合所設定的人格化形象，筆者制定了以下策略來調整文案寫作風格：

• 以書面語語體替代口語語體——遣詞更豐富、正式。如：挑選房源（去看看房子）；樓盤優(yōu)惠活動供你參與（快去看看哪些房子有活動吧）；查看樓盤詳情（你還可以看看其他的哦~）。
• 以平鋪直敘的敘事風格替代行銷口吻及俏皮語氣。如：除了旁觀，你也能發(fā)表自己的真知灼見（快參與你喜歡的話題發(fā)表評論吧?。?；可查看全部樓盤資訊（先看看其他人的動態(tài)~）。
• 構建統(tǒng)一的句式結構。

此前，空狀態(tài)經(jīng)手不同設計師，且團隊中尚無可遵從的寫作風格指南，原有文案多少顯得混雜零亂，而句式結構也是文案風格的構成要素，因此，筆者嘗試構建統(tǒng)一的句式結構來滿足現(xiàn)已發(fā)現(xiàn)的五十多處以及將來仍會不斷產(chǎn)生的空狀態(tài)在表達時的需求。

將重新設計的所有文案按句式結構的異同分類，從中可發(fā)現(xiàn)明顯的規(guī)律，其對應的正是針對不同場景所使用的差異化策略，對于單獨出現(xiàn)的句型，在分析其所屬場景及所需引導策略后，判斷其是必要句型還是可復用其他句型，最終形成了能夠覆蓋當前所有場景的五種句式結構，可指導未來同類場景的應用。

△ 句式結構構建過程

2. 視覺風格推導

風格構建

構建思路：以品牌精髓中的情感修飾語及描述性修飾語作為核心意象，同時解構對應表現(xiàn)形式的形態(tài)要素，其后分別以形態(tài)要素為對象將核心意象進行演繹。由于品牌精髓所處抽象層次較高，無法直接指向具體表達方式的選擇——再以得到的具體情感意象作為標尺，尋求契合的表達方式。

色：將品牌精髓以顏色能夠觸發(fā)的感受為視角進行演繹，并根據(jù)顏色與人類心理感知的映射關系確定基本色相范圍。

而對顏色具體的定義可在相同的表達訴求下進一步控制色彩要素來獲取，如中性色的視覺表現(xiàn)在于色相上的控制，我們通過在色相上加入藍來獲取「高級感」；而由于安居客本身的品牌色即屬綠色，因此我們直接選用；對于藍色，考慮到實際應用時與綠色的搭配，在色相上融入綠色使兩者呈現(xiàn)時能夠相互融合。

△ 色的定義

形：在實際建構「形」的表達方式與情緒感受的映射關系時筆者發(fā)現(xiàn)，不同于顏色的千變萬化，「形」在各維度的表達方式上更多的呈現(xiàn)一種二元對立的局面，這種情況下，不對品牌精髓進行演繹亦可對表達方式作出選擇。

△ 形的定義

風格應用

色的應用：由空狀態(tài)設計中對所有場景的意象設定，可對場景刻畫中所需的元素進行如下分類：

• 人
• 物
• 光影
• 背景

針對插畫，且處于空狀態(tài)這種非正常場景，當前濃郁的品牌色不便直接使用，因此從明度層面對其進行處理，以得到適用的顏色。

△ 品牌色的處理

人作為場景構建中的組成部分，并非主體，且需要與物形成對比，因此使用白色。

△ 人的顏色應用

物在場景的構筑中承擔了以下角色：

• 與人的交互形成行為意象的傳達；
• 作為對環(huán)境的勾勒，構成對場景的交代或環(huán)境意象的傳達。

對應到結構，分別為：

• 作為主體的單一物件；
• 構成近景與遠景的不同物件。

對于前者，以中性色呈現(xiàn)其主體，主色點綴于次一級元素；而后者，遠景作為主要場景元素施以中性色，近景混合應用主色。如此，既保證情緒色的露出，也豐富畫面的細膩程度。

△ 物的顏色應用

光影

• 背景光：在表達虛無的場景中，以線性漸變來表達此概念，此時混合應用兩個主色來呈現(xiàn)調性。
• 光照：對于自然光的呈現(xiàn)，另取暖色來表現(xiàn)光影，進一步增加質感。
• 投影：陰影當使用中性色。

△ 光照的顏色應用

背景：白色或明亮的顏色更讓人有安全感，且我們希望圖示能融入界面中，因此設定為白色。

形的應用：元素形狀、元素方向、主體占比、主體位置。

元素形狀：避免銳利的切角，更多的用矩形及圓形這類相對更穩(wěn)定的形狀。

△ 元素形狀定義

元素方向：以水平面或不同面構成的穩(wěn)定體系為主，避免單獨應用斜切面。

△ 元素方向定義

主體占比：占據(jù)畫面中較大比例。

△ 主體占比定義

主體位置：置于畫面中心偏下。

△ 主體位置定義

驗證方案設計

1. 驗證思路推導

我們的設計目標是形成契合品牌的視覺風格，若目標達成，用戶應當能被具備明確視覺風格的界面激發(fā)相應感受，從而可得到如下測試過程：安排被試瀏覽相關界面，測量其情感感受。

那如何測量人的情感呢？

在對情感測量方法的搜尋中，筆者發(fā)現(xiàn)了心理測量（相對的是生理測量）中常用的語義差異量表（semantic differential scale），其由若干表達情感體驗的詞匯和量尺組成，由用戶根據(jù)感受程度選取相應的等級，從而獲取到情感信息。

最終，可得到如下驗證思路：

△ 驗證思路

2. 樣本量設定

定性研究方法并非如定量研究方法那般天然具備確定樣本量的統(tǒng)計技術，目前也尚無通用的技術，業(yè)界較為熟知的 Jakob Nielsen 所提出的「可用性研究只需測試5個用戶」的說法，由于其限于可用性研究，「測試5個用戶」的說法也只是總結性的論述，實際也需酌情判斷，因此，為了確保獲取足夠的數(shù)據(jù)，筆者嘗試尋求更和通用的解決方案，最終鎖定在了市場研究公司 Research by Design 的 Donna Bonde 所提出的指南（Qualitative market research: When enough is enough）。

筆者認為其建設性在于：

• 從不同研究方法的用途出發(fā)，論證了定性研究適用樣本量的數(shù)量級迥異于定量研究的合理性；
• 從實際的操作過程來探究樣本量與所發(fā)現(xiàn)問題數(shù)量的關系；
• 在上述論述范圍內，再去嘗試解構對樣本量構成影響的因素，這使其能夠根據(jù)具體情況進行相對的樣本量估算；
• 這種思路，使得其脫離了具體的使用場景——所使用的具體定性研究方法，單純針對「樣本量的設定」這一問題本身，這使其具備了相當?shù)耐ㄓ眯浴?

因此，筆者參照其分析進行了對樣本量的設定。先根據(jù)實際項目及團隊情況，對相關因素進行賦值：

△ 樣本量設定

再根據(jù)以下公式可得出適用于本項目的樣本量：

3. 量表設計

量尺設計

量表類型：由于對評價對象提供了對立的形象，自然需要使用雙級量尺，即要求被試從0點開始向兩端方向發(fā)展的數(shù)值中做出評選。

標度數(shù)：設定標度數(shù)時需平衡兩點，足夠精細，充分滿足被試表達的需求；控制數(shù)量，避免選項太過瑣碎。

常用的標度數(shù)中，七點評分量表相比五點評分量表能夠得到更準確的結果，而11點量表所能收集到的數(shù)據(jù)雖然最接近正態(tài)分布，但對被試來說成本也會隨之增加，增大疲勞效應，因此，筆者最終選擇了七點標度：

△ 量尺標度數(shù)

修飾詞：對于量尺的數(shù)字，需要通過形容詞來賦予意義，否則被試很難進行判斷；且修飾詞需在意義上和相應數(shù)值對應，這似乎很難實現(xiàn)，幸而前人已對不同量尺形容詞就其表示的程度水平進行過系統(tǒng)的評估，使得筆者能直接繞過這個問題。

筆者按照所用的標度數(shù)，選擇了對應能產(chǎn)生等現(xiàn)間距的修飾詞：

△ 量尺修飾詞

測量對象的語義轉化

基于輸出的文案風格與視覺意象及其對應策略，可分別確定具體的測量對象，再以此設定能夠顯示其對立形象的形容詞：

△ 語義轉化過程

量表結構設計

為了避免語義啟動造成被試評價時產(chǎn)生偏差，需將有關系的條目隨機擺放，并將褒義詞和貶義詞分布在量表兩端而不是互相集中在一邊，以起到語義抑制效果，避免被試在作答前不經(jīng)思考。

另外，在第一輪測試中，筆者發(fā)現(xiàn)不止一位被試在對某一條目評價時混淆了其描述對象，除了其個人認知水平外，某些條目在當前語境下所展現(xiàn)出的描述關系依然不夠明確，因此筆者按照條目的描述對象對其進行了分類，并說明其描述對象。

△ 量表結構

空狀態(tài)設計

關于空狀態(tài)本身，相對于本文所涉及的其他內容，其作為范式更被設計師所熟識，但在設計策略及視覺表現(xiàn)上似乎又并非如想象中簡單。

「空狀態(tài)」之稱乃立足于表現(xiàn)層之觀察，其承載的實際是若干種場景，反饋「空」只是其中的一種也是最后一種手段，條件允許的情況下，應當首先考慮如何去引導用戶。因本項目落地于空狀態(tài)，上述其他設計策略不在此展開，下文將詳述空狀態(tài)的設計。

1. 表現(xiàn)空狀態(tài)

空狀態(tài)內容

空狀態(tài)由兩部分構成——反饋和引導?；诋斍扒榫车姆答伳茏層脩臬@悉所發(fā)生的事；在此基礎之上，還需提供引導以幫助用戶完成最終的任務。

反饋：反饋通常由圖像與文案組成，其風格應契合品牌調性，其內容除了基本的反饋信息外也應更多地考慮如何引導用戶。

引導：此處的引導指的就是最終根據(jù)實際情境提供的操作，如無可支持的功能，可以文案形式進行表達。

空狀態(tài)結構類型

針對安居客產(chǎn)品中的場景，除了完整的空狀態(tài)結構，對于模塊化的頁面，由于模塊本身的高度有限，在數(shù)據(jù)為空時，只取描述文案作為反饋，并在樣式上弱化按鈕使其在當前結構下保持原有的視覺權重，以其為另一種空狀態(tài)結構。

△ 空狀態(tài)結構

視圖結構類型

空狀態(tài)本身的結構和布局應當一致，但對于平臺型產(chǎn)品，伴隨著業(yè)務復雜性的是頁面結構的多樣性，這使得空狀態(tài)呈現(xiàn)于不同容器中，為達到一致的視覺效果在視覺輸出環(huán)節(jié)就需要針對性地定義布局邏輯。

而上述所謂的一致效果即為空狀態(tài)模塊應當居中展示于所有容器中，但由于空狀態(tài)模塊的重心并非在其物理中心上，因此為達到視覺居中的效果，在將其物理居中的基礎上還需在垂直方向上作相應調整。

完整視圖：視圖的高度隨設備而變化，因此使用相對定位，布局邏輯即為將空狀態(tài)模塊相對于視圖中心垂直上移固定距離。

△ 完整視圖的布局邏輯

模塊與列表：對于相近的模塊，可統(tǒng)一其高度（無法通用的場景還需另外定義高度），此時可使用絕對定位，布局邏輯即為空狀態(tài)模塊相對容器頂部保持固定距離。

△ 模塊布的局邏輯

對于列表，由于其高度不固定，在空狀態(tài)時常規(guī)的處理方式是將空狀態(tài)置于背景之上或 cell 之中，前者不適用于基于白色背景的空狀態(tài)設計，而后者的形式與其實際層級關系不符，因此我們最終選擇了添加 view 來實現(xiàn)效果，如此就需定義高度來滿足此種場景中的所有情況，其布局邏輯也就與模塊中所應用的相同。

2. 圖示的設計策略

圖示的設計策略核心在于其內容的表達即意象的設定，常規(guī)的以空對象為意象的做法，無更多信息傳達，亦無助于信息傳達，是一種徒增冗余的可視化；以情緒為意象的做法由于其抽象程度和表意當應用于所有空狀態(tài)，這種重復容易讓用戶厭煩且無趣；而近來越來越多見的場景化表現(xiàn)形式，設計者對于意象的設定依舊未脫離于上述范疇，更有甚者，一股腦鉆進表現(xiàn)形式中不可自拔，竟無明確意象的設定。

基于上述分析，筆者認為更合適的做法是：內容上表現(xiàn)所引導的行為（如有），形式上以場景的構筑間接表達意象。此作法更豐滿地引導了行為，表達方式上也更具感染力。

根據(jù)場景筆者設定了三類意象：

• 平臺無內容：虛無
• 用戶無操作：行為
• 異常情況：環(huán)境

對于「虛無」的概念，即以寫實的方式在空間層面描繪出來，并讓人置身其中，營造出一種孤寂的氛圍。

△ 「虛無」的意象表達

對于行為及環(huán)境，筆者將抽象的概念具象化，以其為意象。以「用戶未曾對相關對象發(fā)表評論」為例，對事物進行主觀或客觀的闡述是一種抽象的概念，難以直接可視化，因此筆者將視角落在了行為的表達或實施形式上，從中選擇了「書寫」這一動作作為意象，同時在構建場景時，打破人和物的比例關系并夸張?zhí)幚?，形成一種趣味性的觀感，進一步觸發(fā)用戶的共情。

△ 「評論」的意象表達

其他場景示例：

△ 其他場景示例

驗證實施及結果

定性類驗證方法相對于埋點數(shù)據(jù)這類定量方法附帶的優(yōu)勢是可在設計過程中幫助改進設計，因此，整個過程中我們根據(jù)測試結果和測試過程中遇到的問題迭代著設計方案以及測試流程本身。

第一輪測試中，被試被觸發(fā)的情感感知與我們的目標方向相反，且還發(fā)現(xiàn)了超出我們預期的視覺可用性問題；文案方面，多組條目用戶無法感知（本身為中性對象除外）。

△  第一輪測試輪廓圖

具體分析如下：

△ 第一輪測試結果分析

經(jīng)過對這些結果和反饋的分析后，我們著手調整視覺表現(xiàn)：進一步地分解插畫中視覺表達構成的元素，并探究不同的處理手段與受眾感受間的關系，以此摸索達成目標風格的設計策略。并在此基礎上，調整對應的形容詞詞對，使其更的表達對應的情感感受。

△ 迭代前后方案對比

其后，我們選擇了幾個具有代表性的場景進行了應用便進行了第二輪測試，在得到了命中預期范圍的測試結果后，再對其他頁面進行了統(tǒng)一調整。

△ 第二輪測試輪廓圖

在所有方案產(chǎn)出后，針對整體視覺和文案風格進行了第三輪測試，最終的結果基本都達到了預期，測試到此結束。

△  第三輪測試輪廓圖

遺留問題及后續(xù)關注

1. 明確「品牌精髓」的定義及應用

在撰寫此文的過程中，伴隨著對品牌精髓產(chǎn)生了更深的理解，筆者對于描述性修飾語及情感性修飾語的定義及提煉方式產(chǎn)生了疑問——如「專業(yè)」一詞作為描述性修飾語是否會顯得寬泛？且由于品牌精髓作為后續(xù)加工過程的源頭，決定了整個加工過程的順利和準確，因此，對其的準確理解和應用顯得尤為重要。

2. 進一步探索情感轉換及其應用

在有形產(chǎn)品設計領域，早在上世紀八十年代初便開始關注人的感性需求及意象與產(chǎn)品設計的形態(tài)要素間的關系，并形成了體系化的理論——感性工學，并從日本汽車行業(yè)的應用滲透到了日本各個產(chǎn)品設計領域，進而逐漸傳播到西方國家及中國等國家。但在「用戶體驗設計」行業(yè)，尚停留在對「情感化設計」一詞朗朗上口卻又渾然無知的階段。

而目前業(yè)界所「熟知」的 Donad. A. Norman 教授提出的三層次理論——亦是情感化設計領域除感性工學理論外另一個被公認的理論體系，更接近于一種世界觀，解決「是什么」的問題，而非方法論；解決「怎么辦」的問題。這和 Jesse Jame Garrett 提出的「用戶體驗要素」在軟件產(chǎn)品設計領域知識框架中的定位類似，因此，在實際應用于交互設計與界面設計時還需彌補中間的斷層。

借此次空狀態(tài)改版，筆者在品牌輸出的過程中摸索著情緒感受與設計風格的映射關系，形成了初步的構建思路，且在關于感性工程的相關文獻中得到了印證，但在風格應用層面，此次只是初作嘗試，尚存在很大優(yōu)化空間。未來，將以此為基礎針對界面進行嘗試，并在情感轉換層面進行更深入的挖掘與探索。

3. 嘗試建立視覺情感語義詞庫

在設計量表的過程中，筆者明顯感受到為測量對象設定形容詞詞對的困難——準確把握測量對象與對應形象間的聯(lián)想關系，甚至在實際測試過程中基于用戶的測試結果和反饋，筆者持續(xù)迭代著問卷條目及對應形容詞詞對的選用。

而以筆者目前對語義差別量表的理解和應用，其作為「測量某一客體對受眾的意義」的工具，對于視覺風格的構建將會是重要的設計驗證手段。

基于此，有必要尋求并建立一套視覺情感語義詞庫，以保證量表設計的有效性。

4. 確認情感測試中建立基準線的必要性

在測試過程中，筆者明顯覺察到不同被試對相同概念顯著的理解差異，大致分為如下兩種情形：

• 認識不一樣：如某被試對于文案是否有趣的判斷標準為是否直白。
• 錨定偏差：如某被試認為文案就應該是比較俏皮、小清新的，當他看到的方案沒達到其預期時，便會認為其是沉悶的——實際上是中性的。

這直接影響到數(shù)據(jù)收集的準確性。

筆者當下的反應是應當對被試先建立基準線，從而能夠對數(shù)據(jù)進行加權處理，但鑒于需要針對問卷條目設計對應的問題及素材，筆者選擇了更敏捷的做法——把通過訪談所認定的存在明顯偏差的結果作為異常值剔除出最后的統(tǒng)計。

因此，如后期將語義差別量表列入針對視覺風格構建的標準驗證方法之中，為保證數(shù)據(jù)的準確性，有必要對是否加設「建立被試對相關概念理解及程度的基準線」這一環(huán)節(jié)進行研究和確認。

本文以項目為描述對象，因此，并未冗述所涉及到方法的更多細節(jié)（諸如其概念、優(yōu)劣、使用原則、注意事項等），待時機成熟時我們會陸續(xù)輸出相關方法及工具（如定性研究中樣本量的設定、量表中量尺的設計、訪談中的注意事項、語義差別量表的設計和使用等）的使用指南，包括封裝好的文檔工具，望能拋磚引玉。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。