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