2018-6-27 藍(lán)藍(lán)設(shè)計(jì)的小編
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
版權(quán)申明：本文原創(chuàng)作者要不要笑一個(gè)呢，感謝要不要笑一個(gè)呢的原創(chuàng)經(jīng)驗(yàn)分享！致敬哈
簡(jiǎn)述： 隨著特斯拉智能電動(dòng)汽車憑借其全新的電動(dòng)能源和智能化的大屏操作系統(tǒng)在全球的走紅。在中國(guó)也引起了強(qiáng)烈的蝴蝶效應(yīng)，小鵬汽車，蔚來(lái)汽車和威馬汽車等主打互聯(lián)網(wǎng)智能的汽車應(yīng)運(yùn)而生。在新的一年汽車UI可能會(huì)成為下一個(gè)設(shè)計(jì)熱點(diǎn)。
我們通過(guò)多篇文章分享了應(yīng)用圖標(biāo)和系統(tǒng)圖標(biāo)的設(shè)計(jì)原則和案例分析，得到了很多設(shè)計(jì)師朋友的認(rèn)可和好評(píng)。你們的好評(píng)就是考拉老師寫(xiě)作的動(dòng)力。2018年到來(lái)了在新的一年也希望能分享更有意思更前沿的設(shè)計(jì)經(jīng)驗(yàn)給大家。
隨著特斯拉智能電動(dòng)汽車憑借其全新的電動(dòng)能源和智能化的大屏操作系統(tǒng)在全球的走紅。在中國(guó)也引起了強(qiáng)烈的蝴蝶效應(yīng)，小鵬汽車，蔚來(lái)汽車和威馬汽車等主打互聯(lián)網(wǎng)智能的汽車應(yīng)運(yùn)而生。在新的一年汽車UI可能會(huì)成為下一個(gè)設(shè)計(jì)熱點(diǎn)。那么這次為大家?guī)?lái)的是手機(jī)UI與汽車UI的設(shè)計(jì)分析。（我們這里說(shuō)的汽車UI是指以特斯拉為代表的智能電動(dòng)汽車中控大屏UI，手機(jī)UI指的是以蘋(píng)果手機(jī)為代表的手機(jī)UI)
UI設(shè)計(jì)
汽車UI與手機(jī)UI的關(guān)聯(lián)
特斯拉被稱作是汽車界的蘋(píng)果，是電動(dòng)智能汽車的開(kāi)創(chuàng)者和領(lǐng)導(dǎo)者。蘋(píng)果則是智能手機(jī)的開(kāi)創(chuàng)者和領(lǐng)導(dǎo)者，同時(shí)蘋(píng)果定義了智能手機(jī)的操作和交互方式。特斯拉智能汽車的大屏設(shè)備體驗(yàn)設(shè)計(jì)很大程度上借鑒了蘋(píng)果的成功經(jīng)經(jīng)驗(yàn)。所以我們可以說(shuō)智能汽車UI是在借鑒手機(jī)UI成功經(jīng)驗(yàn)之上的演變，同時(shí)根據(jù)汽車UI 特殊的使用場(chǎng)景而重新定制的。
汽車UI與手機(jī)UI的區(qū)別
不同的使用場(chǎng)景
手機(jī)UI使用的場(chǎng)景主要是在室內(nèi)較為安靜的環(huán)境中，當(dāng)然也會(huì)在室外的環(huán)境使用。相對(duì)來(lái)說(shuō)都是比較穩(wěn)定的環(huán)境。
汽車UI的使用場(chǎng)景都是在車內(nèi)，主要分為停車狀態(tài)和駕駛狀態(tài)。在停車狀態(tài)的時(shí)候用戶最多的操作是在做駕駛前的準(zhǔn)備工作。比如在駕車前查看周邊路況是否有擁堵情況，設(shè)定目的地導(dǎo)航并確定行車路線。同時(shí)也可能在駕車前設(shè)定娛樂(lè)系統(tǒng)。而在駕車狀態(tài)的時(shí)候駕駛員最重要的就是保證行車安全。這時(shí)候駕駛員精力主要放在操作駕駛上，在高速行車的狀態(tài)中汽車UI的更多作用是展示駕駛信息保證行車的安全。比如在行車中查看導(dǎo)航信息，駕駛速度以及周邊車輛情況等。車載設(shè)備的使用場(chǎng)景決定了車載UI的形態(tài)。
UI設(shè)計(jì)
不同的屏幕尺寸
手機(jī)屏幕為了滿足邊手持操作屏幕尺寸都比較小，在這里我們把手機(jī)設(shè)備統(tǒng)稱為小屏設(shè)備。由于手機(jī)設(shè)備屏幕尺寸較小也更容易布局和設(shè)計(jì)。
智能汽車的中控為了能更方便的展示和操作，采用了超級(jí)大屏。屏幕越大意味著越難設(shè)計(jì)，由于汽車UI本身功能的局限性決定了不可能有非常豐富的內(nèi)容要去展現(xiàn)。所以如何在超大屏幕下合理的設(shè)計(jì)有限的內(nèi)容就成了一個(gè)需要仔細(xì)研究的問(wèn)題。
UI設(shè)計(jì)
不同的操作習(xí)慣
手機(jī)APP的最重要的操作就是手指的滑動(dòng)和點(diǎn)擊。比如點(diǎn)擊切換菜單，上下滑動(dòng)瀏覽內(nèi)容。
而對(duì)于汽車UI來(lái)說(shuō)則是完全不同的操作習(xí)慣。首先汽車UI的操作不僅僅用到手指而是胳膊加手指的操作方式。所以在汽車UI上操作點(diǎn)擊相對(duì)來(lái)說(shuō)比較方便省力。滑動(dòng)操作由于需要手臂懸空滑動(dòng)所以會(huì)比較費(fèi)力操作的精準(zhǔn)度也有所下降。另外滑動(dòng)的操作比點(diǎn)擊的操作所用的時(shí)間會(huì)長(zhǎng)，如果是在行車過(guò)程中也就是說(shuō)安全成本會(huì)更高。例如：如果在行車過(guò)程中要的快進(jìn)歌曲的進(jìn)度，那么首先要胳膊懸空然后滑動(dòng)進(jìn)度條。由于胳膊的懸空導(dǎo)致我們很難的控制位置當(dāng)然也會(huì)耗費(fèi)更多時(shí)間造成行車中的安全隱患。
UI設(shè)計(jì)
不同的使用環(huán)境
手機(jī)的使用室內(nèi)環(huán)境居多當(dāng)然也會(huì)有很多室外場(chǎng)景。但是手機(jī)是掌控在自己手中的如果遇到反光的情況我們只需要調(diào)整自身的角度即可避免。
汽車室外行車過(guò)程中經(jīng)常處于強(qiáng)烈的陽(yáng)光照射之中，導(dǎo)致車內(nèi)的反光強(qiáng)烈。然而在行車過(guò)程中不可能隨意的調(diào)整角度。在這種環(huán)境下設(shè)計(jì)UI必須考慮如何降低反光對(duì)內(nèi)容展示造成的影響。一般我們會(huì)采用亮度較亮的顏色降低反光對(duì)信息傳遞造成的影響。在夜間行車的時(shí)候車內(nèi)的光線會(huì)變得灰暗如果還是高亮的界面會(huì)非常刺眼，所以一般會(huì)設(shè)計(jì)夜間模式來(lái)保證舒適的視覺(jué)體驗(yàn)。
UI設(shè)計(jì)
不同的功能需求
手機(jī)APP的功能設(shè)定都是非常有針對(duì)性的，例如：微信就是用來(lái)社交的，騰訊視頻就是用來(lái)娛樂(lè)的，淘寶就是用來(lái)購(gòu)物消費(fèi)的。手機(jī)APP的功能針對(duì)性非常明確，每次都是完成單任務(wù)。
汽車UI的功能設(shè)定首先都是圍繞安全駕駛進(jìn)行的，其次才是娛樂(lè)系統(tǒng)的功能設(shè)計(jì)。所以即使是在使用娛樂(lè)系統(tǒng)的功能也要先保證安全駕駛的需求。例如在駕駛過(guò)程中首先要顯示安全駕駛的信息，在這過(guò)程中也可以進(jìn)行播放音樂(lè)的操作。
UI設(shè)計(jì)
不同的交互布局思路
手機(jī)UI最基礎(chǔ)的交互方式是底部欄的菜單切換方式，每一個(gè)菜單展現(xiàn)的內(nèi)容都是相對(duì)獨(dú)立的。這樣的展現(xiàn)方式是因?yàn)槭謾C(jī)的單任務(wù)的產(chǎn)品思路。
車載UI由于其特殊的功能需求在交互上是默認(rèn)展示安全相關(guān)的信息，其他操作會(huì)更多的通過(guò)臨時(shí)彈窗的方式呈現(xiàn)。這樣的交互方式完全是基于產(chǎn)品功能的需求，所有的功能設(shè)計(jì)首先都要滿足安全駕駛的需求，所有默認(rèn)情況下都優(yōu)先展示安全駕駛相關(guān)的信息，爾娛樂(lè)系統(tǒng)的設(shè)置都是以彈窗形式出現(xiàn)用完即隱藏。例如：特斯拉MODEL 3默認(rèn)展示汽車信息和導(dǎo)航信息，音樂(lè)功能則是以彈窗的形式出現(xiàn)操作完成后也會(huì)最小化展示。
UI設(shè)計(jì)
這是對(duì)當(dāng)前能夠?qū)崿F(xiàn)的現(xiàn)有狀況進(jìn)行的分析，相信以后自動(dòng)駕駛也會(huì)慢慢成為主流。那時(shí)候的交互方式和操作方式相信也會(huì)出現(xiàn)巨大的變動(dòng)。另外一個(gè)正在使用的交互方式語(yǔ)音相信在大幅提升錯(cuò)識(shí)度后會(huì)成為更加主流的交互操作方式。
以上就是今天的分享希望能夠引起大家對(duì)汽車UI的關(guān)注和興趣。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com