1.什么是負(fù)一屏

概念

負(fù)一屏快捷中心，也就是車(chē)載系統(tǒng)中類(lèi)似智能手機(jī)負(fù)一屏的功能，它允許用戶快速訪問(wèn)常用的服務(wù)。通過(guò)在主屏左劃或下拉操作后出現(xiàn)（操作方式根據(jù)車(chē)機(jī)廠定義），通常放置一些快捷功能，也稱“快捷中心”或“控制中心”是中控交互界面的淺層交互的快捷入口，可以收錄大量的功能，供用戶進(jìn)行高效的操作。

負(fù)一屏的誕生

負(fù)一屏的發(fā)展依托于觸摸中控屏的出現(xiàn)，通過(guò)下劃或/右劃的方式喚起一個(gè)新的頁(yè)面。蓬勃發(fā)展是在2012年后，大家都覺(jué)得一塊能實(shí)現(xiàn)簡(jiǎn)單功能的屏幕已經(jīng)完全夠用的時(shí)候，特斯拉在model S上搞了一塊17寸的大屏，把以前所有需要通過(guò)實(shí)體按鈕的功能全都集成在了里面,它的出現(xiàn)無(wú)疑對(duì)中國(guó)新能源汽車(chē)產(chǎn)業(yè)以及中控設(shè)計(jì)產(chǎn)生了深遠(yuǎn)的影響。

其一，大屏中控成為車(chē)機(jī)的主流，隨著科技的發(fā)展，賦予了汽車(chē)ADAS駕駛輔助、全景影像、駕駛模式調(diào)節(jié)、座椅通風(fēng)、加熱、在線音樂(lè)、視頻等諸多功能，功能也越來(lái)越多，功能更加集成，中控屏的設(shè)計(jì)和操作邏輯也更加的復(fù)雜。最簡(jiǎn)單的交互架構(gòu)就是把功能直接羅列到屏幕上，簡(jiǎn)便快捷。但是，這樣就和在中控上擺一堆物理按鍵沒(méi)什么區(qū)別了，而且能承載的功能非常有限；

其二，如果只通過(guò)車(chē)控頁(yè)面進(jìn)行一些功能的設(shè)置的話，按照功能屬性一級(jí)一級(jí)的分類(lèi)歸納呢？用戶的常用功能操作路徑過(guò)長(zhǎng)，又會(huì)掉入層級(jí)過(guò)深使得每個(gè)功能都操作過(guò)多甚至很難找到的陷阱，設(shè)計(jì)師們又想出了“常駐欄”、“負(fù)一屏”、“Widget”等手段來(lái)優(yōu)化車(chē)機(jī)交互。

總的來(lái)說(shuō)，車(chē)載頁(yè)面設(shè)計(jì)負(fù)一屏是為了提高系統(tǒng)的可用性和用戶體驗(yàn)，使得駕駛員可以在駕駛過(guò)程中更方便地獲取信息和執(zhí)行操作。

類(lèi)型樣式

我們一起來(lái)看看，在車(chē)機(jī)系統(tǒng)和座艙功能越來(lái)越復(fù)雜的當(dāng)下，負(fù)一屏的交互系統(tǒng)的層級(jí)與布局有哪些發(fā)展趨勢(shì)。收集到目前市面上的負(fù)一屏主要分為三類(lèi)：

1.“老年式”負(fù)一屏，其可添加的功能少，展示功能數(shù)量有限，交互方式多采用長(zhǎng)按、拖動(dòng)等，用戶的學(xué)習(xí)成本過(guò)高且低效——代表車(chē)機(jī)有id4x和五菱繽果等；

2.“管家式”負(fù)一屏，其負(fù)一屏的服務(wù)卡片種類(lèi)眾多，聚焦于行車(chē)信息、駕駛行為、智能管家、應(yīng)用直達(dá)等多個(gè)方向，目的并不是便捷操作，更像是便捷服務(wù)入口的理念——代表車(chē)機(jī)有比亞迪唐等；

3.“功能聚合式”負(fù)一屏，這種負(fù)一屏樣式也在逐漸成為主流，因?yàn)樗哂懈蛹苫睦砟睿δ芨訉?zhuān)注，便于用戶形成這種工具化的思維——代表車(chē)機(jī)有小米su7、問(wèn)界等。

優(yōu)點(diǎn)

功能類(lèi)型

車(chē)輛控制：車(chē)鎖、充電口、加油口、前備箱、后備箱、車(chē)窗童鎖、車(chē)門(mén)童鎖、折疊后視鏡、后視鏡調(diào)節(jié)、位置調(diào)節(jié)、方向盤(pán)調(diào)節(jié)、前窗除霧、后窗除霧、主駕舒適、天窗、通風(fēng)加熱、抬頭顯示、動(dòng)態(tài)懸架、自適應(yīng)大燈、主駕方便進(jìn)出、接近照明、熄火駐車(chē)、整車(chē)背光聯(lián)動(dòng)、小憩模式、露營(yíng)模式、洗車(chē)模式、智能泊車(chē)、前遮陽(yáng)簾、后遮陽(yáng)簾、座椅位置記憶、閱讀燈、燈光控制、電動(dòng)手套箱、雨刮、動(dòng)力模式、駕駛模式、行人警示音、能量回收、座椅按摩、儲(chǔ)物箱、頭枕模式、方向盤(pán)加熱、車(chē)道保持輔助、氛圍燈、音場(chǎng)模式、行車(chē)記錄儀、哨兵模式、副駕屏、后艙娛樂(lè)屏等。

車(chē)輛設(shè)置：亮度、媒體音量、導(dǎo)航音量、深色模式、遠(yuǎn)程位置、藍(lán)牙、無(wú)線網(wǎng)絡(luò)、中控亮度、儀表亮度、截屏、分屏、關(guān)閉電源、麥克風(fēng)、屏幕錄制、攝像頭、清潔屏幕、駐車(chē)用電保持、設(shè)備連接等。

上面是我收集十余臺(tái)車(chē)機(jī)負(fù)一屏的功能，大概共60+，但是負(fù)一屏的展示區(qū)域是有限的，看各主機(jī)廠是采用何種方法解決這個(gè)問(wèn)題的吧～

2.負(fù)一屏交互特點(diǎn)

交互場(chǎng)景

面向車(chē)載場(chǎng)景可以進(jìn)行多種的細(xì)分，比如靜態(tài)、駕駛（這是關(guān)于駕駛位置的場(chǎng)景），還需要考慮一些關(guān)于環(huán)境和駕駛的狀態(tài)（晴天、雨天、雪天、霧、超速、疲勞等），這需要仔細(xì)定義。負(fù)一屏這個(gè)交互界面主要包括車(chē)設(shè)和車(chē)控，主駕駛針對(duì)這個(gè)頁(yè)面的交互更多的是靜態(tài)和駕駛狀態(tài)的場(chǎng)景區(qū)別，因?yàn)樾熊?chē)安全是車(chē)載設(shè)計(jì)的最終目標(biāo)，我們?cè)谶M(jìn)行負(fù)一屏設(shè)計(jì)時(shí)，針對(duì)駕駛場(chǎng)景應(yīng)用頻次高的功能需要進(jìn)行特殊化設(shè)計(jì)，以提升安全性。

交互原則

1.米勒定律（MILLER'S LAW）

從心理學(xué)的角度來(lái)看，人類(lèi)處理信息的能力是有限的。這是由美國(guó)科學(xué)家喬治·A·米勒（George A. Miller）于 1956 年提出，由于短期記憶儲(chǔ)存空間的限制，人的大腦最多同時(shí)處理 5 到 9 個(gè)信息，超過(guò) 9 個(gè)信息時(shí)極易出錯(cuò)，后來(lái)也被稱為「7 ± 2 法則」。

喬治·A·米勒（George A. Miller）在他的心理學(xué)評(píng)論文章中，他總結(jié)前人在多個(gè)知覺(jué)維度：味覺(jué)、聽(tīng)覺(jué)、視覺(jué)等的實(shí)驗(yàn)結(jié)果，并把實(shí)驗(yàn)結(jié)果繪成折線圖，都能驚奇的發(fā)現(xiàn)，人們?cè)诏B加了 7 種刺激或更多時(shí)，開(kāi)始無(wú)法準(zhǔn)確識(shí)別更多刺激。他認(rèn)為是絕對(duì)判斷的廣度和即時(shí)記憶的廣度限制了人們能夠接收、處理和記住的信息量。除此之外，米勒提出可以通過(guò)重新將信息分塊、組成更多維度可以打破這個(gè)數(shù)字瓶頸。后人就米勒定律進(jìn)行了深入研究，尼爾森·考恩（Nelson Cowan）在 2010 年發(fā)表的文章中質(zhì)疑了米勒定律的數(shù)字 7，他發(fā)現(xiàn)對(duì)于年輕人，短時(shí)記憶的組塊數(shù)量大約在 3 到 5 塊的區(qū)間內(nèi)，也就是 4 左右。也有學(xué)者認(rèn)為短時(shí)記憶的瓶頸不能用一個(gè)恒定的數(shù)字來(lái)衡量。

結(jié)合我們的業(yè)務(wù)，我們應(yīng)該如何應(yīng)用這個(gè)理論呢？

下面以各車(chē)企負(fù)一屏案例來(lái)說(shuō)明：

1.控制數(shù)量：對(duì)于功能平鋪的負(fù)一屏頁(yè)面，我們需要根據(jù)米勒定律，保證短暫的

閱讀路徑區(qū)塊（行或者列），其內(nèi)信息數(shù)量應(yīng)控制在7±2內(nèi)，市面上車(chē)機(jī)負(fù)一屏的行列數(shù)基本都不超過(guò)9。

2.信息分段，輔助用戶記憶：在進(jìn)行設(shè)計(jì)時(shí)我們遇到一連串的信息（如數(shù)字、文字、段落、icon等）的情況下，進(jìn)行斷點(diǎn)輔助記憶，每個(gè)斷點(diǎn)內(nèi)的個(gè)數(shù)遵循7±2。

3.流程分步，優(yōu)化用戶操作：經(jīng)常遇到信息特別多或者復(fù)雜業(yè)務(wù)場(chǎng)景，比如車(chē)載端的車(chē)窗童鎖包括前車(chē)窗、后車(chē)窗；音量就包括媒體音量、導(dǎo)航音量、電話音量、警報(bào)音量；亮度包括中控亮度、儀表亮度、娛樂(lè)屏亮度等。針對(duì)這類(lèi)情況，部分車(chē)機(jī)采用了流程分步的方法來(lái)優(yōu)化用戶操作。

4.信息排序，引導(dǎo)用戶記憶：人們?cè)谟洃浺唤M多數(shù)據(jù)信息塊的時(shí)候，通常對(duì)首末兩個(gè)位置信息塊的記憶相對(duì)較強(qiáng)，所以產(chǎn)品設(shè)計(jì)的時(shí)候需要把重要的信息放在首位或末尾位置，引導(dǎo)用戶去記憶該信息塊。也就是系列位置效應(yīng)（首因效應(yīng)、近因效應(yīng)）。

首因效應(yīng)：指在整個(gè)序列的信息塊中，在相比中間位置的信息，人們對(duì)前面的信息記憶更加清晰。這一理論在負(fù)一屏的設(shè)計(jì)中應(yīng)用于編輯狀態(tài)，不可編輯功能多是各主機(jī)廠的賣(mài)點(diǎn)功能或者是經(jīng)過(guò)用戶測(cè)試后篩選出的優(yōu)先級(jí)最高的功能，所以將其置于首位。

但是我們可能會(huì)產(chǎn)生疑惑，為什么高優(yōu)先級(jí)的這幾個(gè)功能不是占據(jù)我們視覺(jué)第一順位，在第一排進(jìn)行排布，而是靠近左側(cè)這一塊進(jìn)行排布呢？帶著問(wèn)題我們往下看，后面我們結(jié)合其他理論來(lái)仔細(xì)講解哦～

2.席克定律（Hick's law）

1951 年，席克（W. E. Hick）做了一個(gè)實(shí)驗(yàn)，他用每 5 秒隨機(jī)點(diǎn)亮 10 盞燈，并讓被試復(fù)述的方式，測(cè)得反應(yīng)時(shí)間和選擇數(shù)量之間的對(duì)數(shù)關(guān)系。隨后，海曼（Ray Hyman）通過(guò)實(shí)驗(yàn)確定了信息傳輸與反應(yīng)時(shí)間的線性關(guān)系，豐富了席克定律公式。希克定律研究刺激因素的數(shù)量與被測(cè)者對(duì)刺激因素反應(yīng)時(shí)間之間的關(guān)聯(lián)，可選的刺激因素越多，被測(cè)者決定哪個(gè)刺激因素進(jìn)行互動(dòng)的決策時(shí)間越長(zhǎng)，過(guò)多的選項(xiàng)將導(dǎo)致用戶花費(fèi)更多的時(shí)間去理解和決策。

二者的數(shù)學(xué)關(guān)系為：RT = a + b log2 (n)。

RT是「反應(yīng)時(shí)間」；

a是一個(gè)常量，用戶的前期認(rèn)知和觀察的時(shí)間；

b為對(duì)選項(xiàng)認(rèn)識(shí)的處理時(shí)間，約是 0.155s；

n是「信號(hào)刺激數(shù)量」。

?這一理論應(yīng)用于負(fù)一屏的設(shè)計(jì)，可以將RT理解為用戶選擇按哪個(gè)按鈕的時(shí)間，a是用戶對(duì)負(fù)一屏內(nèi)按鈕功能位置的原有認(rèn)知，b是用戶識(shí)別自己目標(biāo)按鈕的時(shí)間，n就是負(fù)一屏每個(gè)模塊的功能數(shù)量。

作為這一界面的設(shè)計(jì)師，整個(gè)界面的功能數(shù)量更多的是由PM（project manager）和FO（function owner）來(lái)定義的，我們?cè)O(shè)計(jì)師的發(fā)揮空間其實(shí)很小，那我們就簡(jiǎn)單的應(yīng)用“功能選項(xiàng)越多，用戶的操作效率就會(huì)降低”的?？硕擅矗糠彪s的功能堆砌在這個(gè)界面，我們能做的是什么呢？我們只需要考慮PM給到我們的feature list中已有的功能么？這些問(wèn)題都是我在實(shí)際工作中遇到并總結(jié)的問(wèn)題，那我們一起來(lái)找找解決思路吧～

下面以負(fù)一屏案例來(lái)說(shuō)明：

1.在產(chǎn)品設(shè)計(jì)的過(guò)程中，當(dāng)遇到需要用戶做決策思考場(chǎng)景的時(shí)候，首先應(yīng)該統(tǒng)計(jì)信息的相對(duì)數(shù)量。針對(duì)負(fù)一屏這個(gè)界面我們不能只看我們接到的feature list中功能數(shù)量有幾個(gè)，因?yàn)楣δ軙?huì)不斷的增加，而且每家主機(jī)廠的車(chē)機(jī)設(shè)計(jì)都是具有一致性的，不可能在OTA后產(chǎn)生交互邏輯交互方式的巨大差異，所以我們要比產(chǎn)品經(jīng)理考慮的更遠(yuǎn)一步，我們首先要將市面上車(chē)機(jī)負(fù)一屏基本會(huì)包含的功能進(jìn)行整理，因?yàn)檫@些功能或近或遠(yuǎn)會(huì)搭載在我們的車(chē)機(jī)之上，甚至我們也要考慮到技術(shù)的迅速發(fā)展，未來(lái)負(fù)一屏可以搭載的功能也會(huì)有所增加。

2.對(duì)信息進(jìn)行分類(lèi)、編組、刪減、隱藏等方法減少可選數(shù)量，輔助用戶快速識(shí)別信息，提高決策效率。

a.分類(lèi)編組，優(yōu)化決策效率：在信息項(xiàng)數(shù)量眾多的時(shí)候，我們可以對(duì)信息進(jìn)行分類(lèi)編組來(lái)提高用戶對(duì)信息的讀取，縮短用戶思考時(shí)間。

b.過(guò)濾選項(xiàng)，刪除/隱藏低頻功能：同一產(chǎn)品的功能，可能會(huì)在多種不同場(chǎng)景下使用，通常需要的就是根據(jù)場(chǎng)景的不同隱藏或者刪除多余的低頻功能，以此來(lái)縮短用戶獲取信息的時(shí)間，提高交互效率。小米SU7考慮到副駕與負(fù)一屏交互的場(chǎng)景下的功能需求，面向副駕的負(fù)一屏刪減了低頻功能。

?有些高級(jí)的車(chē)載系統(tǒng)，其負(fù)一屏還具有智能推薦的功能，能夠根據(jù)駕駛者的行為和習(xí)慣，推薦相應(yīng)的服務(wù)和信息,如何提供舒適的主動(dòng)式交互，將場(chǎng)景如何細(xì)分，都是我們HMI設(shè)計(jì)師要深入思考的點(diǎn)。

3.操作負(fù)荷

操作熱區(qū)

以離屏幕最近的手臂和左側(cè)駕駛員側(cè)為例：以肘部為圓心畫(huà)一個(gè)圓圈，分為三個(gè)等級(jí)：最佳觸摸區(qū)、易觸摸區(qū)和難觸摸區(qū)。

對(duì)于觸摸交互方式，屏幕區(qū)域觸摸動(dòng)作的便利性以駕駛員為中心逐漸向右衰減，重要的特征動(dòng)作應(yīng)該放在最優(yōu)的觸摸交互區(qū)域。

下面以實(shí)際負(fù)一屏案例來(lái)說(shuō)明：

a.部分車(chē)機(jī)負(fù)一屏整體頁(yè)面置于最佳交互區(qū)，克制的功能數(shù)量結(jié)合最佳交互操作區(qū)域，可以窺見(jiàn)這些主機(jī)廠對(duì)于負(fù)一屏交互便捷性的追求。代表車(chē)機(jī)有理想L8、小米su7、嵐圖夢(mèng)想家EV等。

b.敲黑板！敲黑板！?。∏懊骊P(guān)于高優(yōu)先級(jí)功能的布局原理這里終于要揭秘了～

左側(cè)布局原理?米勒定律的首因效應(yīng)?最佳交互區(qū)，這兩個(gè)理論的共同作用確定了高優(yōu)先級(jí)功能的位置，提供給用戶更舒適的操作和閱讀體驗(yàn)，代表車(chē)機(jī)有問(wèn)界、豪越L、博越L等。

c.布局吸附：?jiǎn)柦绲呢?fù)一屏編輯操作邏輯有一個(gè)很有趣的點(diǎn)，就是用戶對(duì)負(fù)一屏的功能位置進(jìn)行排布后，若有空位，保存后界面會(huì)自動(dòng)向左吸附，其實(shí)就是從提高交互便利性的角度出發(fā)的，盡量提高功能按鈕的交互區(qū)等級(jí)。

互動(dòng)熱點(diǎn)

在說(shuō)交互熱點(diǎn)之前，我們先來(lái)了解一下手指觸控區(qū)域。手指觸摸區(qū)域?yàn)?2mm x 12mm，屏幕像素密度按照160dpi計(jì)算，可以換算成76 x 76px的屏幕元素尺寸。

加入互動(dòng)熱點(diǎn)的目的是降低動(dòng)作難度。用戶在駕駛場(chǎng)景中的注意力和動(dòng)作范圍有限。精準(zhǔn)點(diǎn)擊和小面積接觸點(diǎn)動(dòng)作需要更多的動(dòng)作成本，分散駕駛注意力。更大面積的熱點(diǎn)用于承載觸摸行為，保證核心動(dòng)作在不同場(chǎng)景下的易用性。

下面以實(shí)際負(fù)一屏案例來(lái)說(shuō)明：

案例一：點(diǎn)擊熱區(qū)

如何從負(fù)一屏打開(kāi)其中的某一個(gè)功能呢？

• 點(diǎn)擊icon

• 點(diǎn)擊文字

• 專(zhuān)輯icon+文字內(nèi)容組合

案例二：編輯狀態(tài)刪除/增加

如何在負(fù)一屏編輯狀態(tài)刪除或者添加功能呢？

• 點(diǎn)擊刪除/添加角標(biāo)

• 點(diǎn)擊功能塊

• 專(zhuān)輯功能塊+角標(biāo)內(nèi)容組合

根據(jù)以上結(jié)論。增加動(dòng)作面積的組合是最好的選擇。

交互方式

1.操作特點(diǎn)

負(fù)一屏作為用戶的快捷操作中心，其操作方式更為克制，更多的只采用點(diǎn)擊、滑動(dòng)和拖拽三個(gè)方式。

點(diǎn)擊：簡(jiǎn)單的點(diǎn)擊操作并不是只對(duì)應(yīng)功能按鈕的兩種狀態(tài)，部分還存在開(kāi)、暫停、關(guān)的不同狀態(tài)；部分功能類(lèi)按鈕點(diǎn)擊后還會(huì)進(jìn)入下一層級(jí)，這類(lèi)功能按鈕多在點(diǎn)擊區(qū)域顯示小三角icon；還有部分的功能類(lèi)按鈕在點(diǎn)擊后會(huì)直接跳轉(zhuǎn)至車(chē)控頁(yè)面，以上是簡(jiǎn)單的點(diǎn)擊操作所對(duì)應(yīng)的多種表現(xiàn)形式。

滑動(dòng)：滑動(dòng)的交互方式在負(fù)一屏頁(yè)面多使用在亮度和音量?jī)蓚€(gè)功能上，雖然看似這種交互方式極為簡(jiǎn)單，但是小米SU7在進(jìn)行亮度調(diào)節(jié)時(shí)，進(jìn)行了負(fù)一屏漸隱，以主界面為參考來(lái)調(diào)節(jié)亮度，極大的提高了用戶體驗(yàn)，不得不嗎想為這個(gè)交互小巧思點(diǎn)一個(gè)贊?

拖拽：作為對(duì)用戶來(lái)說(shuō)操作難度比較高的交互方式，更多的只應(yīng)用于編輯負(fù)一屏場(chǎng)景來(lái)調(diào)整功能按鈕位置，因?yàn)檫@個(gè)場(chǎng)景基本都是在駐車(chē)狀態(tài)，不會(huì)影響行車(chē)安全，而且符合用戶對(duì)位置調(diào)整的基本認(rèn)知。

2.操作層級(jí)

對(duì)于交互層級(jí)的分類(lèi)大家一定聽(tīng)說(shuō)過(guò)零層級(jí)交互、淺層交互、深層交互和情感交互。這個(gè)概念我們后續(xù)再仔細(xì)講～

以車(chē)載中控界面為例，零層級(jí)交互可以簡(jiǎn)單理解為中控首頁(yè)中的dock欄，淺層交互可以簡(jiǎn)單理解為負(fù)一屏，深層交互簡(jiǎn)單理解為車(chē)設(shè)頁(yè)面，情感交互更多涉及語(yǔ)音交互部分，當(dāng)然以上僅為簡(jiǎn)單類(lèi)比。

最后

看似簡(jiǎn)單負(fù)一屏體驗(yàn)設(shè)計(jì)是藏著很多的交互理念的支撐的，這樣才能更加科學(xué)的解決用戶的需求，提升用戶對(duì)座艙的體驗(yàn)。

以上只是簡(jiǎn)單講了負(fù)一屏設(shè)計(jì)的幾個(gè)小部分，還有很多包括視覺(jué)布局、情感化設(shè)計(jì)、狀態(tài)設(shè)計(jì)、用戶負(fù)荷、交互層級(jí)等等的內(nèi)容，后續(xù)都會(huì)展開(kāi)來(lái)講，目的其實(shí)就是根據(jù)實(shí)際的車(chē)載案例去結(jié)合理論，幫助我們理解理論，應(yīng)用理論去更好的輔助工作。