貝殼實戰案例！如何做好投影情境設計？

我們在貝殼新裝修業務的設計中，針對“投影”這一特殊情境進行了一系列場景化體驗設計的實踐。當初次面對這一特殊場景的設計時，真的是瞬間頭皮發麻，不知道從何下手。因為投影場景比較特殊，業界內也少有參考，需要我們從 0 到 1，探索出一套嚴謹、合理的設計規范。

那么，設計師怎么才能做好這類創新場景的體驗設計呢？這需要我們深入線下考察真實的情境，洞察使用者的情況（人）、周圍的環境（地）、使用者辦事的流程、以及行為的動線（事）等。只有透析線下場景，接地氣的解決使用者痛點，才能打造出真正滿足需求的體驗。

圖 1 場景化體驗三要素

為什么要做投影場景設計？

說到“無線投影場景”，大家應該都不陌生。沒錯，就是會議室里播放“劈劈踢”的無線投屏場景。

首先來明確一下設計要面臨的挑戰點：

• 使用場景是什么樣的？
• 使用者是誰？
• 現存問題是什么？

1. 使用場景是怎樣的？

在貝殼新裝修的業務中，有一個核心使用場景：裝修管家要定期向管理者匯報裝修工地的進展和問題。他們需要在會議室里，把 PC 中臺系統的數據管理界面，通過無線投影呈現在幕布上，裝修管家邊看邊向管理者匯報。

圖 2 投影設計核心使用場景

2. 使用者是誰？

業務管理者與裝修管家就是這一場景的使用者。

裝修管家在整個裝修流程中負責對工長、設計師、主材廠家等團隊人員的協調工作，確保項目進度的正常進行，以及定期巡查工地現場，上報工程進度及現場問題。

業務管理者主要負責管理管家、制定施工管理流程，對于裝修過程中出現的各類問題提供解決方案。

管家需要通過幕布上的內容呈現，突出重點，提高效率，準確且又快速的完成匯報。管理者需要通過觀看投影幕布，再結合管家口述的匯報內容，快速的抓住重點，并能直觀的總覽整體情況。

圖 3 管家/管理者訴求

3. 現存問題是什么？

圖 4 改版前投影展示效果

上面這張配圖，就是在會議過程中記錄下來的投屏效果。大家可以明顯的看出很多問題，比如：

字號偏小：在投影場景下，由于用戶的觀看距離和屏幕尺寸都被大幅放大，導致文字視覺效果偏小，PC 中臺系統常用的 14 號字不再適用。

顏色看不清：由于無線投影儀會損失一部分清晰度，所以對顏色的識別度較低。灰度文字看不清，導致文字層級區分失效；背景色看不清，導致界面分區設計失效；斑馬行看不清，導致 table 信息定位困難。

界面信息冗雜：對管家來說，無法快速找到正在匯報的施工單、匯報重點信息在 table 中不突出；對管理者來說，不知道應該關注哪些工地、缺乏數據總覽。

因此，基于裝修管家向管理者匯報的使用場景，結合使用者的特點和痛點、以及現存的問題，我們展開本次投影場景的設計研究，從實際場景出發，來解決使用問題。致力于為使用者提供看的清晰、看的高效的使用體驗。

如何解決這些問題？

我們在 PC 中臺系統中，根據實際使用需求和投影場景特點，定制設計了一個新的頁面，同時滿足投影和 PC 的使用。并建立了一套匹配該場景的新規范，為后續此類場景的設計提供依據。

針對“字號偏小、顏色看不清”的問題，我們在表現層中進行了設計規范的探索。針對“界面信息冗余”的問題，我們從結構層和框架層梳理了界面的信息結構，既能符合管家的匯報邏輯，實現匯報提效。也能令管理者快速的了解匯報內容，并抓住重點、實現信息總覽。

我們從字號、顏色、信息架構三個方面進行具體介紹。

圖 5 解決現存問題的 3 個優化方向

1. 字號

我們在為電腦和手機外的電子信息載體做設計時，可能會經常面臨無案例可參考的局面。這個時候我們可以跳出常規思維，想一想在這個場景下最常用的產品是什么。即使它不是常規的互聯網產品，同樣也能為我們提供參考。

切入點

經過一波調研，投影場景下字號的定義，以投影場景中的成熟產品 PowerPoint 為切入點，我們找到了投影最小字號的計算公式。

圖 6 投影場景最小字號計算公式

當我最初看到這個公式時，也非常迷惑，不知道該如何使用，因此先去嘗試理解它的原理。就像下面的圖片表示的一樣，投影最小字號等于電腦端常用字號與會議室的觀看比例、電腦觀看比例、顯示器大小比例幾個參數的乘積。

圖 7 計算公式原理

其中，顯示器屏幕系數、投影幕布屏幕系數可以參考下表：

圖 8 系數參考表

數據測量

在確定了公式后，我們進行相應的數據的測量。

首先，測得“會議廳長”的數據為 7 米↓

圖 9 會議廳長數據測量

測得眼睛距離電腦顯示器的“觀察距離”為 0.5 米↓

圖 10 觀察距離數據測量

其次，調查明確了“投影幕布尺寸”為 120 英寸、“顯示器尺寸”為 14 英寸。

然后，根據“投影幕布比例 4：3”、“顯示器屏幕比例 16：9”的比例關系，對照上文屏幕系數參考表，得到“投影幕布屏幕系數”為 1、“顯示器屏幕系數為 0.79”。

最后，我們再將測量的數據代入公式計算。

圖 11 數據代入公式計算

結論

在電腦顯示器尺寸 14 英寸 16：9、投影幕布尺寸 120 英寸 4：3 的情況下：

會議室廳長為 6 米時，投影最小字號為 16px；

會議室廳長為 7 米時，投影最小字號為 18px；

會議室廳長為 8 米時，投影最小字號為 20px；

在這要里特別注意的是，上述公式推導出來的理論值是最小字號，這并不代表我們在最小字號以上可以無限放大。在保證能看清內容的情況下，字號的選擇以較小為優，以保持克制的原則。

2. 顏色

要解決投影場景下顏色看不清的問題，我首先思考這樣兩個點：滿足什么條件的顏色才能被看清？看清與看不清的邊界在哪里？有了能看清的范圍，明確了看清與看不清的邊界后，我們如何選擇使用的顏色？

概括來講就是兩個問題：

1. 如何檢驗顏色的可讀性？
2. 如何定義顏色的值？

帶著這兩個問題，我們繼續進行下一步的探索研究。

如何檢驗顏色的可讀性

• 「WCAG 標準」

WCAG（Web Content Accessibility Guidelines ）內容無障礙指南，定義了如何使殘疾人士更方便地使用 Web 內容的方法，遵循這些建議也可讓普通用戶更容易訪問辨別看到的內容。

該標準發布自 W3C（萬維網聯盟）。W3C 是 Web 技術領域最具權威和影響力的國際中立技術標準機構，發布過 200 多項 Web 技術標準和實施指南，一直指導著 Web 領域的發展。

圖 12 WCAG 標準

Web Content Accessibility Guidelines (WCAG) 2.0 中有明確指出：

AAA 級別中：普通文本與背景色要符合至少 7:1 的對比度。

AA 級別中：普通文本與背景色要符合至少 4.5:1 的對比度。

WCAG 標準則可作為檢驗文字顏色可讀性的依據。我們使用的文本顏色與背景色之間的對比度，只要滿足上述 WCAG 標準的建議，就能確保被清晰識別。

那么問題來了：如何得到對比度值呢？

• 「WebAIM 工具」

今天跟大家推薦一個能得到文本與背景色對比度值的小工具：WebAIM。

百度搜索：color contrast。第一條就可以找到。

圖 13 百度搜索 color contrast

使用這個小工具很簡單，在 “Foreground Color(前景色)” 中輸入文字顏色，“Background Color(背景色)”中輸入背景色，即可在 “Contrast Ratio”中得到對比度值。

圖 14 小工具 WebAIM

通過這個工具得到的“對比度”值，再參照 WCAG 標準，即可判斷文字顏色能否被看清。

• 「結論」

通過上述 WCAG 標準，我們得知，普通 PC/移動端產品設計中：

主要文本與背景色對比度要至少達到 7:1 AAA 級別對比度；

次要文本與背景色對比度要至少達到 4.5:1 AA 級別對比度；

而在投影場景設計中，情況又有所不同。無線投影儀損失一定的清晰度，造成對顏色的識別度較低，且投影場景設計的字號已由 14 調整至 18。針對投影場景的特殊情況，設計團隊參考 WCAG 標準，并反復的進行了嘗試，得出如下結論：

投影場景產品設計中：

正文文本、標題和背景色之間應保持在 7：1 以上的 AAA 級對比度。

次文本、輔助色文本與背景色之間應保持在 3：1 以上的 AA 級對比度。

界面分區的灰色色塊、背景色、tab 色應保持 1.1：1 以上的對比度。

因此，通過上述檢驗文本可讀性的結論，再結合 webAIM 小工具得到的對比度值，如此就解決了如何檢驗文本可讀性的問題。

如何定義顏色的值

• 「色彩模式」

一直以來，設計師們常用的顏色以 RGB 模式，十六進制顏色碼為主。

但大家有沒有想過，十六進制顏色碼，在調整顏色時是沒有預期的，老司機們也難以通過“#FFB6C1”這幾個字母和數字的組合，辨別出它究竟是個什么顏色。而且還很難記憶。

圖 15 RGB 模式/十六進制顏色碼

因此，我們棄用 RGB 模式，而采用 HSB 色彩模型進行顏色的定義。

圖 16 HSB 色彩模型

H：色度用于調整顏色，范圍在 0°-360°之間。

S：飽和度是指顏色的強度或純度，范圍在 0%～100%之間。

B：亮度是顏色的明暗程度，范圍在 0%～100%之間。

該模型更便于設計師在調整色彩時對于顏色有明確的心理預期，同時也方便團隊之間的溝通。

• 「定義顏色」

因為黑色系文字顏色 H 和 S 的值都為 0，我們通過 B 值來選擇需要的顏色。將 B 值由 0-90 的 10 個代表顏色依次列出，根據前文所述的文字顏色檢驗標準，B 值 0-50 是滿足對比度要求可用的，而 B 值 60-90 的則不可用。

圖 17 顏色枚舉

B 值 0-50 的顏色中，B 值為 0 的被首先棄用，B 值為 0 的顏色即純黑色。自然界中幾乎沒有純黑顏色的東西，因此在設計中使用這種顏色給人的感覺不真實，視覺上也太亮。

因此，我們選擇 B10 的顏色作為主文本色，用于版塊標題、tab 名稱、表格文字等主要內容。為了保持對比和文本層級，次文本色，跳過 B20 的顏色，選擇 B30 的顏色，用于提示、面包屑等輔助文字信息。同理，B50 的顏色，則用于占位文本色、失效色。

圖 18 顏色選擇

3. 信息架構

在解決了表現層看不清的問題后，這一部分，我們結合實際需求，從框架層、結構層來解決界面信息架構的優化問題，并進行了優化池的梳理：

圖 19 優化池梳理

• 「最終效果展示」

優化前：

圖 20 優化前效果圖

優化后：增加了數據指標總覽↓

圖 21 優化后-數據指標總覽

按照管家匯報內容進行信息分區劃分↓

圖 22 優化后-信息分區劃分

將列表信息按照重要程度進行排序、使用紅黃燈標簽聚焦重點工地↓

圖 23 優化后-紅黃燈聚焦重點工地

優化后的設計，既符合管家的匯報邏輯，又滿足了管理者的關注重點，同時也徹底解決了看不清的問題。

總結

在實際工作中，我們不止一次面對這種定制化、針對性的場景體驗設計需求，除了投影場景的設計外，在面向老齡用戶群體進行包容性設計、以及特殊智能硬件設計的時候，以上研究也具有借鑒意義。

場景化體驗設計研究給我們的啟發在于：要想讓設計更好的服務于業務、產品、助力問題的解決，必須深入了解實際情境、真正的去關心使用者，并且不斷進行嘗試、研究和探索。

參考文獻：楊臻《PPT 要你好看》

歡迎關注作者微信公眾號：「貝殼KEDC」