我們?cè)谪悮ば卵b修業(yè)務(wù)的設(shè)計(jì)中，針對(duì)“投影”這一特殊情境進(jìn)行了一系列場景化體驗(yàn)設(shè)計(jì)的實(shí)踐。當(dāng)初次面對(duì)這一特殊場景的設(shè)計(jì)時(shí)，真的是瞬間頭皮發(fā)麻，不知道從何下手。因?yàn)橥队皥鼍氨容^特殊，業(yè)界內(nèi)也少有參考，需要我們從 0 到 1，探索出一套嚴(yán)謹(jǐn)、合理的設(shè)計(jì)規(guī)范。

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

圖 1 場景化體驗(yàn)三要素

為什么要做投影場景設(shè)計(jì)？

說到“無線投影場景”，大家應(yīng)該都不陌生。沒錯(cuò)，就是會(huì)議室里播放“劈劈踢”的無線投屏場景。

首先來明確一下設(shè)計(jì)要面臨的挑戰(zhàn)點(diǎn)：

• 使用場景是什么樣的？
• 使用者是誰？
• 現(xiàn)存問題是什么？

1. 使用場景是怎樣的？

在貝殼新裝修的業(yè)務(wù)中，有一個(gè)核心使用場景：裝修管家要定期向管理者匯報(bào)裝修工地的進(jìn)展和問題。他們需要在會(huì)議室里，把 PC 中臺(tái)系統(tǒng)的數(shù)據(jù)管理界面，通過無線投影呈現(xiàn)在幕布上，裝修管家邊看邊向管理者匯報(bào)。

圖 2 投影設(shè)計(jì)核心使用場景

2. 使用者是誰？

業(yè)務(wù)管理者與裝修管家就是這一場景的使用者。

裝修管家在整個(gè)裝修流程中負(fù)責(zé)對(duì)工長、設(shè)計(jì)師、主材廠家等團(tuán)隊(duì)人員的協(xié)調(diào)工作，確保項(xiàng)目進(jìn)度的正常進(jìn)行，以及定期巡查工地現(xiàn)場，上報(bào)工程進(jìn)度及現(xiàn)場問題。

業(yè)務(wù)管理者主要負(fù)責(zé)管理管家、制定施工管理流程，對(duì)于裝修過程中出現(xiàn)的各類問題提供解決方案。

管家需要通過幕布上的內(nèi)容呈現(xiàn)，突出重點(diǎn)，提高效率，準(zhǔn)確且又快速的完成匯報(bào)。管理者需要通過觀看投影幕布，再結(jié)合管家口述的匯報(bào)內(nèi)容，快速的抓住重點(diǎn)，并能直觀的總覽整體情況。

圖 3 管家/管理者訴求

3. 現(xiàn)存問題是什么？

圖 4 改版前投影展示效果

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

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

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

界面信息冗雜：對(duì)管家來說，無法快速找到正在匯報(bào)的施工單、匯報(bào)重點(diǎn)信息在 table 中不突出；對(duì)管理者來說，不知道應(yīng)該關(guān)注哪些工地、缺乏數(shù)據(jù)總覽。

因此，基于裝修管家向管理者匯報(bào)的使用場景，結(jié)合使用者的特點(diǎn)和痛點(diǎn)、以及現(xiàn)存的問題，我們展開本次投影場景的設(shè)計(jì)研究，從實(shí)際場景出發(fā)，來解決使用問題。致力于為使用者提供看的清晰、看的高效的使用體驗(yàn)。

如何解決這些問題？

我們?cè)?PC 中臺(tái)系統(tǒng)中，根據(jù)實(shí)際使用需求和投影場景特點(diǎn)，定制設(shè)計(jì)了一個(gè)新的頁面，同時(shí)滿足投影和 PC 的使用。并建立了一套匹配該場景的新規(guī)范，為后續(xù)此類場景的設(shè)計(jì)提供依據(jù)。

針對(duì)“字號(hào)偏小、顏色看不清”的問題，我們?cè)诒憩F(xiàn)層中進(jìn)行了設(shè)計(jì)規(guī)范的探索。針對(duì)“界面信息冗余”的問題，我們從結(jié)構(gòu)層和框架層梳理了界面的信息結(jié)構(gòu)，既能符合管家的匯報(bào)邏輯，實(shí)現(xiàn)匯報(bào)提效。也能令管理者快速的了解匯報(bào)內(nèi)容，并抓住重點(diǎn)、實(shí)現(xiàn)信息總覽。

我們從字號(hào)、顏色、信息架構(gòu)三個(gè)方面進(jìn)行具體介紹。

圖 5 解決現(xiàn)存問題的 3 個(gè)優(yōu)化方向

1. 字號(hào)

我們?cè)跒殡娔X和手機(jī)外的電子信息載體做設(shè)計(jì)時(shí)，可能會(huì)經(jīng)常面臨無案例可參考的局面。這個(gè)時(shí)候我們可以跳出常規(guī)思維，想一想在這個(gè)場景下最常用的產(chǎn)品是什么。即使它不是常規(guī)的互聯(lián)網(wǎng)產(chǎn)品，同樣也能為我們提供參考。

切入點(diǎn)

經(jīng)過一波調(diào)研，投影場景下字號(hào)的定義，以投影場景中的成熟產(chǎn)品 PowerPoint 為切入點(diǎn)，我們找到了投影最小字號(hào)的計(jì)算公式。

圖 6 投影場景最小字號(hào)計(jì)算公式

當(dāng)我最初看到這個(gè)公式時(shí)，也非常迷惑，不知道該如何使用，因此先去嘗試?yán)斫馑脑怼＞拖裣旅娴膱D片表示的一樣，投影最小字號(hào)等于電腦端常用字號(hào)與會(huì)議室的觀看比例、電腦觀看比例、顯示器大小比例幾個(gè)參數(shù)的乘積。

圖 7 計(jì)算公式原理

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

圖 8 系數(shù)參考表

數(shù)據(jù)測量

在確定了公式后，我們進(jìn)行相應(yīng)的數(shù)據(jù)的測量。

首先，測得“會(huì)議廳長”的數(shù)據(jù)為 7 米↓

圖 9 會(huì)議廳長數(shù)據(jù)測量

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

圖 10 觀察距離數(shù)據(jù)測量

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

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

最后，我們?cè)賹y量的數(shù)據(jù)代入公式計(jì)算。

圖 11 數(shù)據(jù)代入公式計(jì)算

結(jié)論

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

會(huì)議室廳長為 6 米時(shí)，投影最小字號(hào)為 16px；

會(huì)議室廳長為 7 米時(shí)，投影最小字號(hào)為 18px；

會(huì)議室廳長為 8 米時(shí)，投影最小字號(hào)為 20px；

在這要里特別注意的是，上述公式推導(dǎo)出來的理論值是最小字號(hào)，這并不代表我們?cè)谧钚∽痔?hào)以上可以無限放大。在保證能看清內(nèi)容的情況下，字號(hào)的選擇以較小為優(yōu)，以保持克制的原則。

2. 顏色

要解決投影場景下顏色看不清的問題，我首先思考這樣兩個(gè)點(diǎn)：滿足什么條件的顏色才能被看清？看清與看不清的邊界在哪里？有了能看清的范圍，明確了看清與看不清的邊界后，我們?nèi)绾芜x擇使用的顏色？

概括來講就是兩個(gè)問題：

1. 如何檢驗(yàn)顏色的可讀性？
2. 如何定義顏色的值？

帶著這兩個(gè)問題，我們繼續(xù)進(jìn)行下一步的探索研究。

如何檢驗(yàn)顏色的可讀性

• 「WCAG 標(biāo)準(zhǔn)」

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

該標(biāo)準(zhǔn)發(fā)布自 W3C（萬維網(wǎng)聯(lián)盟）。W3C 是 Web 技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)，發(fā)布過 200 多項(xiàng) Web 技術(shù)標(biāo)準(zhǔn)和實(shí)施指南，一直指導(dǎo)著 Web 領(lǐng)域的發(fā)展。

圖 12 WCAG 標(biāo)準(zhǔn)

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

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

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

WCAG 標(biāo)準(zhǔn)則可作為檢驗(yàn)文字顏色可讀性的依據(jù)。我們使用的文本顏色與背景色之間的對(duì)比度，只要滿足上述 WCAG 標(biāo)準(zhǔn)的建議，就能確保被清晰識(shí)別。

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

• 「WebAIM 工具」

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

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

圖 13 百度搜索 color contrast

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

圖 14 小工具 WebAIM

通過這個(gè)工具得到的“對(duì)比度”值，再參照 WCAG 標(biāo)準(zhǔn)，即可判斷文字顏色能否被看清。

• 「結(jié)論」

通過上述 WCAG 標(biāo)準(zhǔn)，我們得知，普通 PC/移動(dòng)端產(chǎn)品設(shè)計(jì)中：

主要文本與背景色對(duì)比度要至少達(dá)到 7:1 AAA 級(jí)別對(duì)比度；

次要文本與背景色對(duì)比度要至少達(dá)到 4.5:1 AA 級(jí)別對(duì)比度；

而在投影場景設(shè)計(jì)中，情況又有所不同。無線投影儀損失一定的清晰度，造成對(duì)顏色的識(shí)別度較低，且投影場景設(shè)計(jì)的字號(hào)已由 14 調(diào)整至 18。針對(duì)投影場景的特殊情況，設(shè)計(jì)團(tuán)隊(duì)參考 WCAG 標(biāo)準(zhǔn)，并反復(fù)的進(jìn)行了嘗試，得出如下結(jié)論：

投影場景產(chǎn)品設(shè)計(jì)中：

正文文本、標(biāo)題和背景色之間應(yīng)保持在 7：1 以上的 AAA 級(jí)對(duì)比度。

次文本、輔助色文本與背景色之間應(yīng)保持在 3：1 以上的 AA 級(jí)對(duì)比度。

界面分區(qū)的灰色色塊、背景色、tab 色應(yīng)保持 1.1：1 以上的對(duì)比度。

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

如何定義顏色的值

• 「色彩模式」

一直以來，設(shè)計(jì)師們常用的顏色以 RGB 模式，十六進(jìn)制顏色碼為主。

但大家有沒有想過，十六進(jìn)制顏色碼，在調(diào)整顏色時(shí)是沒有預(yù)期的，老司機(jī)們也難以通過“#FFB6C1”這幾個(gè)字母和數(shù)字的組合，辨別出它究竟是個(gè)什么顏色。而且還很難記憶。

圖 15 RGB 模式/十六進(jìn)制顏色碼

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

圖 16 HSB 色彩模型

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

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

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

該模型更便于設(shè)計(jì)師在調(diào)整色彩時(shí)對(duì)于顏色有明確的心理預(yù)期，同時(shí)也方便團(tuán)隊(duì)之間的溝通。

• 「定義顏色」

因?yàn)楹谏滴淖诸伾?H 和 S 的值都為 0，我們通過 B 值來選擇需要的顏色。將 B 值由 0-90 的 10 個(gè)代表顏色依次列出，根據(jù)前文所述的文字顏色檢驗(yàn)標(biāo)準(zhǔn)，B 值 0-50 是滿足對(duì)比度要求可用的，而 B 值 60-90 的則不可用。

圖 17 顏色枚舉

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

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

圖 18 顏色選擇

3. 信息架構(gòu)

在解決了表現(xiàn)層看不清的問題后，這一部分，我們結(jié)合實(shí)際需求，從框架層、結(jié)構(gòu)層來解決界面信息架構(gòu)的優(yōu)化問題，并進(jìn)行了優(yōu)化池的梳理：

圖 19 優(yōu)化池梳理

• 「最終效果展示」

優(yōu)化前：

圖 20 優(yōu)化前效果圖

優(yōu)化后：增加了數(shù)據(jù)指標(biāo)總覽↓

圖 21 優(yōu)化后-數(shù)據(jù)指標(biāo)總覽

按照管家匯報(bào)內(nèi)容進(jìn)行信息分區(qū)劃分↓

圖 22 優(yōu)化后-信息分區(qū)劃分

將列表信息按照重要程度進(jìn)行排序、使用紅黃燈標(biāo)簽聚焦重點(diǎn)工地↓

圖 23 優(yōu)化后-紅黃燈聚焦重點(diǎn)工地

優(yōu)化后的設(shè)計(jì)，既符合管家的匯報(bào)邏輯，又滿足了管理者的關(guān)注重點(diǎn)，同時(shí)也徹底解決了看不清的問題。

總結(jié)

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

場景化體驗(yàn)設(shè)計(jì)研究給我們的啟發(fā)在于：要想讓設(shè)計(jì)更好的服務(wù)于業(yè)務(wù)、產(chǎn)品、助力問題的解決，必須深入了解實(shí)際情境、真正的去關(guān)心使用者，并且不斷進(jìn)行嘗試、研究和探索。

參考文獻(xiàn)：楊臻《PPT 要你好看》

歡迎關(guān)注作者微信公眾號(hào)：「貝殼KEDC」