為什么大多數(shù)的 App 都長(zhǎng)得越來(lái)越像?
為什么很多我們從來(lái)都沒(méi)有用過(guò)的 App,第一次下載下來(lái)我們就能自如的使用?
什么是設(shè)計(jì)規(guī)范
這 就是因?yàn)橛性O(shè)計(jì)規(guī)范的作用。簡(jiǎn)而言之,設(shè)計(jì)規(guī)范是一系列被大多數(shù)的開(kāi)發(fā)者和用戶(hù)共同認(rèn)可的觀念的集合,包括顏色、形狀、材質(zhì)、空間關(guān)系、交互方式,甚至是 結(jié)果展示序列和時(shí)間感等方方面面。除了你能看到的部分,你能感受的部分和你能想到的部分,其實(shí)都在設(shè)計(jì)規(guī)范的范疇之中。
設(shè)計(jì)規(guī)范形成的來(lái)源主要有三個(gè)。
第 一是來(lái)自設(shè)計(jì)者的相互借鑒。好的設(shè)計(jì)具有強(qiáng)大的生命力,會(huì)被其他的設(shè)計(jì)者借鑒使用,而被很多人借鑒使用的方式也就成為了共同認(rèn)可的設(shè)計(jì)規(guī)范。比如說(shuō)由初代 iPhone 炒熱的滑動(dòng)解鎖,twitter 發(fā)明的在頁(yè)面已經(jīng)滑動(dòng)至頂部后繼續(xù)向下拉動(dòng)并釋放的方式(也就是俗稱(chēng)的「下拉刷新」)等,現(xiàn)在都已經(jīng)成為了公共的設(shè)計(jì)規(guī)范。
第 二是來(lái)自重要參與者的主動(dòng)推動(dòng)形成。比如,iOS 10 發(fā)布后,iOS 人機(jī)交互指南也隨之公開(kāi)。蘋(píng)果對(duì)于每一次大版本的系統(tǒng)升級(jí),都會(huì)進(jìn)行相應(yīng)的交互指南升級(jí)。這份人機(jī)交互指南,就是蘋(píng)果推動(dòng)形成的重要的設(shè)計(jì)規(guī)范。而蘋(píng)果的 設(shè)計(jì)理念和美學(xué),也就隨這一份文檔被推廣給所有的 iOS 開(kāi)發(fā)者。
第三是最容易被大家忽略的,就是設(shè)計(jì)的載體進(jìn)化的歷史事實(shí)。比如說(shuō),現(xiàn)在智能手機(jī)都喜歡采用 4 列寬,5 或者 6 行高的方塊圖標(biāo)排列來(lái)展示 App,Plus 系列相應(yīng)再增加一列。大家很容易將這個(gè)習(xí)慣追溯到 iPhone 第一代,以及同時(shí)代的其他的手機(jī)。
車(chē)機(jī)設(shè)計(jì)規(guī)范為何需要重新審視?
我 之前提到過(guò),互聯(lián)網(wǎng)行業(yè)的快速發(fā)展定義了一整套新的美學(xué)理念,也就形成了一種新的設(shè)計(jì)規(guī)范,加上龐大的人才隊(duì)伍的外溢,互聯(lián)網(wǎng)的美學(xué)理念和設(shè)計(jì)規(guī)范,特別 是移動(dòng)互聯(lián)網(wǎng)的設(shè)計(jì)規(guī)范,在侵入其他的很多傳統(tǒng)行業(yè)。汽車(chē)行業(yè)本身是一個(gè)有著強(qiáng)烈美學(xué)理念和設(shè)計(jì)規(guī)范的產(chǎn)業(yè),但是車(chē)機(jī)相對(duì)來(lái)說(shuō)是更新興的事物,因此也難免 被互聯(lián)網(wǎng)的設(shè)計(jì)規(guī)范侵入。比如說(shuō),以下兩幅圖,圖一就更像汽車(chē)行業(yè)的設(shè)計(jì)產(chǎn)品,帶有濃重的傳統(tǒng)風(fēng)格。圖二則更符合互聯(lián)網(wǎng)的美學(xué)標(biāo)準(zhǔn)。
但問(wèn)題是,車(chē)機(jī)和手機(jī)的設(shè)計(jì)規(guī)范,有什么不同?
不 同肯定是有很多的。這個(gè)誰(shuí)都知道。聽(tīng)過(guò)很多次各種各樣的人談這個(gè)問(wèn)題,雖然所有人都很容易理解,車(chē)機(jī)要注重安全,安全第一云云,但是這樣的不同究竟對(duì)與車(chē) 機(jī)的設(shè)計(jì)產(chǎn)生了什么樣的影響?車(chē)機(jī)需要在設(shè)計(jì)上與手機(jī)產(chǎn)生什么樣的不同,來(lái)適應(yīng)車(chē)機(jī)的使用場(chǎng)景?這個(gè)問(wèn)題其實(shí)很少有人系統(tǒng)性的回答過(guò)。
在我自己總結(jié)起來(lái),摸索車(chē)機(jī)的設(shè)計(jì)過(guò)程,主要經(jīng)過(guò)了三個(gè)層次。
第一層是要認(rèn)識(shí)到基礎(chǔ)的空間和基本屬性位置發(fā)生了重大的變化。
車(chē)機(jī)當(dāng)前主流的設(shè)計(jì)方案還是放置在前排座椅中間往前的位置,屏幕平面與車(chē)輛左右對(duì)稱(chēng)平面垂直。以特斯拉為代表的大屏完全替代按鈕方案中,屏幕向下延伸比較長(zhǎng)的距離。而以傳統(tǒng)車(chē)發(fā)展出的橫屏方案,屏幕位置相對(duì)較高。
這就意味著:
1、車(chē)機(jī)肯定不是在司機(jī)的正前方,無(wú)論司機(jī)是轉(zhuǎn)動(dòng)眼球,還是轉(zhuǎn)動(dòng)頭部,甚至是轉(zhuǎn)動(dòng)上身,當(dāng)前主流的產(chǎn)品中,司機(jī)都不可能以正對(duì)車(chē)機(jī)的方式操作車(chē)機(jī)。
2、 車(chē)機(jī)位置如果較高,意味著司機(jī)操作時(shí),需要將手臂懸空;而如果是車(chē)機(jī)位置較低,或者是大屏車(chē)機(jī)下部較低的話(huà),司機(jī)操作時(shí)將會(huì)面臨手腕關(guān)節(jié)的限制。不管是哪 種方案,車(chē)機(jī)操作者都很難完全延續(xù)手機(jī)時(shí)代拇指操作的習(xí)慣。事實(shí)上,從我們有限的觀察看,司機(jī)操作車(chē)機(jī)大屏的主要方式有:食指指腹(面對(duì)垂直屏幕的經(jīng)典姿 勢(shì)),拇指指腹(右手握拳,抬起拇指或者拇指前傾),拇指?jìng)?cè)面(遠(yuǎn)離食指一側(cè)),食指第二指節(jié),在大屏操作中下部功能時(shí),還出現(xiàn)過(guò)手掌朝上用食指點(diǎn)擊的動(dòng) 作。
3、對(duì)于模仿特斯拉豎向大屏的車(chē)機(jī),應(yīng)當(dāng)注意到,在目前個(gè)人消費(fèi)的電子產(chǎn)品中,還很少出現(xiàn)這種尺寸+這種操作距離的組合。比 17 寸車(chē)機(jī)還大的屏幕,估計(jì)只有電視和類(lèi)似于火車(chē)站購(gòu)票機(jī)之類(lèi)的設(shè)備,但是前者的操作距離與車(chē)上完全不同,后者的使用場(chǎng)景與車(chē)機(jī)完全不同。
而 現(xiàn)階段手機(jī)設(shè)計(jì)規(guī)范的來(lái)源,還是基于一種單手持有為主,兼可雙手持有的,主要擺放在使用者正前方使用的設(shè)備而設(shè)計(jì)的。這就導(dǎo)致了手機(jī)設(shè)計(jì)規(guī)范與車(chē)機(jī)交互的 不匹配。比如說(shuō),手機(jī)上逐步形成的下 tab 模式(典型的比如微信),實(shí)際上是與手機(jī)觸摸區(qū)域直接相關(guān)的。下圖為手機(jī)觸摸區(qū)域分析的典型樣例,毫無(wú)疑問(wèn),這種樣例對(duì)于車(chē)機(jī)交互的借鑒價(jià)值幾乎為零。
第二層是認(rèn)識(shí)到,車(chē)機(jī)使用的狀態(tài)發(fā)生了重大的變化。
車(chē)機(jī)是一種在駕駛中,以單手在身體一側(cè)操作的設(shè)備。這其實(shí)包含著幾層意思:
1、車(chē)機(jī)在使用中可能是劇烈晃動(dòng)的;特別是當(dāng)使用者必須右手懸空操作時(shí),肢體的晃動(dòng)與車(chē)機(jī)的晃動(dòng)疊加,會(huì)使得精準(zhǔn)點(diǎn)擊的難度成倍增加;
2、車(chē)機(jī)如果在駕駛中使用,則駕駛員的左手必須操作方向盤(pán),這種操作時(shí)的注意力分配,與一般情況下操作手機(jī)時(shí)的狀態(tài)是完全不同的。加上司機(jī)眼神不能長(zhǎng)時(shí)間離開(kāi)路面,很有可能只能采用多次「瞟一眼」的方式來(lái)查看交互內(nèi)容;
3、車(chē)輛本身空間開(kāi)闊,肘部懸空帶來(lái)了精準(zhǔn)操作的極大難度,但是對(duì)于大范圍動(dòng)作也產(chǎn)生了新的優(yōu)勢(shì)。
當(dāng) 前手機(jī)的交互和視覺(jué)規(guī)范,更多滿(mǎn)足的是單手持機(jī),全身無(wú)其他專(zhuān)注動(dòng)作的操作場(chǎng)景。當(dāng)我們認(rèn)識(shí)到這一點(diǎn),就可以重新審視當(dāng)前主流的手機(jī)設(shè)計(jì)規(guī)范,會(huì)很容易找 到很多值得商榷的內(nèi)容,比如 iOS 9 的設(shè)計(jì)規(guī)范中提到,要多用留白,因?yàn)榱舭捉o人一種平靜和安寧的感受;要多用無(wú)邊框的按鈕;要用深淺層次來(lái)進(jìn)行交流。事實(shí)上,當(dāng)這些原則被很機(jī)械的執(zhí)行在車(chē) 機(jī)的設(shè)計(jì)上時(shí),我們會(huì)發(fā)現(xiàn),體驗(yàn)并不好。無(wú)邊框的按鈕很難讓人在瞟一眼中迅速的發(fā)現(xiàn),深淺層次在短時(shí)間掃過(guò)屏幕時(shí)并不一定能夠被很好的理解和發(fā)現(xiàn)。車(chē)機(jī)上 更合適的按鈕,恰恰是大色塊和粗大的點(diǎn)擊區(qū)域,以最大限度的方便駕駛點(diǎn)擊。
第三層是要認(rèn)識(shí)到,車(chē)機(jī)本身的功能定位和手機(jī)有顯著的不同。
在 前幾篇文章中,我曾反復(fù)說(shuō)過(guò),我是一個(gè)看衰大屏的選手,我認(rèn)為車(chē)上中心位置擺放的大屏只是當(dāng)前階段的過(guò)渡方案,在幾年之后必然會(huì)被很快淘汰。這就是因?yàn)椋?車(chē)機(jī)不再是車(chē)上所有功能的承載物,充其量算是一個(gè)入口,而且如果語(yǔ)音、手勢(shì)等功能足夠好,車(chē)機(jī)大屏可能連入口都算不上第一選擇。
在 以手機(jī)為核心的移動(dòng)互聯(lián)網(wǎng)交互設(shè)計(jì)中,屏幕幾乎是交互的一切,手機(jī)按鍵和 home 鍵占有的比例其實(shí)非常小,而外設(shè)的交互入口更是基本上可以忽略。2014 年曾經(jīng)風(fēng)靡過(guò)一段時(shí)間的耳機(jī)孔外部輸入設(shè)備(比如快按鈕等),是為數(shù)不多的嘗試過(guò)外部交互的嘗試,但是并沒(méi)有能夠掀起很大的風(fēng)浪。當(dāng)智能家居逐步發(fā)展之 后,人們對(duì)于手機(jī)進(jìn)行操作,實(shí)際上交互范圍在慢慢走出手機(jī)。但是當(dāng)前這個(gè)階段,手機(jī)和智能家居設(shè)備仍然是分開(kāi)設(shè)計(jì),分開(kāi)生產(chǎn),分開(kāi)運(yùn)行的,即使二者沒(méi)能夠 出色配合,至少也不影響手機(jī)主題功能的使用。
而當(dāng)我們?cè)噲D打造一款真正體驗(yàn)優(yōu)秀的車(chē) 機(jī)時(shí),車(chē)機(jī)屏幕就跟手機(jī)屏幕完全不同了。對(duì)于車(chē)機(jī)屏幕的大量操作,都有可能產(chǎn)生屏幕以外的交互行為,用戶(hù)會(huì)期待來(lái)自屏幕以外的響應(yīng)。剛轉(zhuǎn)行做車(chē)機(jī)的產(chǎn)品經(jīng) 理,會(huì)下意識(shí)的沿用手機(jī)上約定俗成的提示框等,但是綜合前兩點(diǎn)提到的內(nèi)容,這樣的提示框如果是浮出后自動(dòng)消失的,則有時(shí)候會(huì)占據(jù)用戶(hù)過(guò)多的注意力,如果是 需要點(diǎn)擊后消失的,則會(huì)造成點(diǎn)擊上的不方便。面對(duì)這樣的需求,是不是可以考慮用車(chē)廂內(nèi)的聲音提示、氛圍燈提示甚至是更遠(yuǎn)離屏幕的方式來(lái)提示?這個(gè)問(wèn)題其實(shí) 有很大的想象空間。
車(chē)機(jī)設(shè)計(jì)的重新審視:現(xiàn)狀與發(fā)展
當(dāng) 我逐步認(rèn)識(shí)到了這些存在的問(wèn)題之后,我開(kāi)始重新審視已經(jīng)完成的、正在進(jìn)行的和將要進(jìn)行的車(chē)機(jī)頁(yè)面的視覺(jué)和交互設(shè)計(jì),并且與其它的產(chǎn)品重新進(jìn)行比較。我注意 到,其實(shí)大家在直覺(jué)下已經(jīng)進(jìn)行了一定的探索。比如說(shuō),在橫屏車(chē)機(jī)上廣泛采用的卡片式導(dǎo)航、左側(cè)菜單等,在特斯拉車(chē)機(jī)上地圖采用了左側(cè)長(zhǎng)條框來(lái)展示搜索結(jié)果 等。并且,大家也開(kāi)始更加重視車(chē)機(jī)與儀表盤(pán)、智能后視鏡等的跨屏交互。不過(guò),在晃動(dòng)場(chǎng)景等很多問(wèn)題上,目前也沒(méi)有找到特別明顯有改進(jìn)的方案。
一種常見(jiàn)的左側(cè)卡片式導(dǎo)航設(shè)計(jì)
但 是,類(lèi)似的探索遠(yuǎn)遠(yuǎn)談不上充分,腳步邁的并不夠大,革新的嘗試并不徹底。很多產(chǎn)品的設(shè)計(jì)還是下意識(shí)的延續(xù)互聯(lián)網(wǎng)時(shí)代的設(shè)計(jì)規(guī)范,采用移動(dòng)互聯(lián)網(wǎng)行業(yè)被廣泛 接受的設(shè)計(jì)元素和手法。特別是新流入行業(yè)的員工,很少有人能夠迅速意識(shí)到這一點(diǎn),而是仍然以手機(jī) App 美學(xué)看車(chē)機(jī)。這也導(dǎo)致很多新產(chǎn)品看起來(lái)仍然像是一臺(tái)鑲嵌在車(chē)內(nèi)的平板電腦。
更重要的 是,目前的探索明顯呈現(xiàn)出高度的分散性和偶然性。超越手機(jī)的設(shè)計(jì)是少數(shù),且分散在各個(gè)產(chǎn)品的各個(gè)角落。這種結(jié)果更像是某些設(shè)計(jì)人員和開(kāi)發(fā)人員的偶然嘗試, 甚至有些被認(rèn)為是一種不合規(guī)范的錯(cuò)誤行為。而且類(lèi)似新的探索并沒(méi)有呈現(xiàn)出與車(chē)機(jī)系統(tǒng)的深度整合,以及與整個(gè)車(chē)輛的良性互動(dòng)。
幸 運(yùn)的是,我們看到了嘗試重新定義車(chē)機(jī)設(shè)計(jì)的嘗試。這其中最打動(dòng)我的是 Foks 創(chuàng)始人、設(shè)計(jì)師張卷益。在 2016 年 MMC 展會(huì)上的發(fā)言中,張卷益在分析了車(chē)內(nèi)交互的重點(diǎn)范圍、常見(jiàn)交互方式等之后,提出了重新分析操作架構(gòu),重新定義頁(yè)面結(jié)構(gòu),并且依據(jù)操作頻次分配操作方式等一 系列的方法。
這個(gè)方法在車(chē)機(jī)上的運(yùn)用可能只是設(shè)計(jì)師的一小步,但卻是車(chē)機(jī)設(shè)計(jì)的一大 步。通過(guò)采用這種方法,我們可能會(huì)推出交互方式、頁(yè)面結(jié)構(gòu)完全不同于手機(jī)的車(chē)機(jī)產(chǎn)品。這說(shuō)明,有人開(kāi)始明確的放棄簡(jiǎn)單延續(xù)手機(jī)交互的想法,而是完全徹底的 基于車(chē)機(jī)重新定義一套交互方式。這是一種基于理念深處的重新定義,必將成為車(chē)機(jī)交互設(shè)計(jì)的一股清流,將真正符合用戶(hù)需求的,便于操作習(xí)慣帶到車(chē)機(jī)上。
考 慮到硬件產(chǎn)品的研制和生產(chǎn)周期,這一理念真正帶來(lái)產(chǎn)品層面的改觀,可能至少得在一年之后。而形成顯著不同于「手機(jī)黨」的風(fēng)格則可能需要更長(zhǎng)的時(shí)間。但是當(dāng) 前國(guó)內(nèi)的新造車(chē)運(yùn)動(dòng)仍在蓬勃發(fā)展,幾年后才是真正的井噴期。到那個(gè)時(shí)候,誰(shuí)的產(chǎn)品更符合用戶(hù)需求,誰(shuí)的設(shè)計(jì)理念更先進(jìn),才有可能在市場(chǎng)的檢驗(yàn)中真正展現(xiàn)出 結(jié)果。
在移動(dòng)互聯(lián)網(wǎng)時(shí)代,一個(gè)好的產(chǎn)品經(jīng)理即使不能直接操刀 UI 設(shè)計(jì),也一定是對(duì)于手機(jī)本身有深刻理解的。而今天我們廣泛采用、不斷疊加的手機(jī)設(shè)計(jì)規(guī)范,其實(shí)正是來(lái)自于先行者對(duì)于產(chǎn)品的深刻理解和仔細(xì)研究。好的設(shè)計(jì)規(guī) 范并不是大眾對(duì)于唯一正確答案的學(xué)習(xí),而恰恰是大眾對(duì)于更優(yōu)答案的求索。
比如,在 2014 年以前,滑動(dòng)解鎖被奉為交互設(shè)計(jì)的經(jīng)典,無(wú)數(shù)人試圖分析滑動(dòng)解鎖這一微小設(shè)計(jì)背后的理念、知識(shí)、精神,以及試圖分析蘋(píng)果是怎樣打造出如此傳奇的設(shè)計(jì)的。但 是 2015 年及以后,滑動(dòng)解鎖正在逐步被新的技術(shù)所替代。在 iOS 10 中,蘋(píng)果終于放棄了這一交互方式,轉(zhuǎn)而將指紋解鎖置于了頂層。是我們對(duì)于滑動(dòng)解鎖的分析都錯(cuò)了么?不,恰恰是分析都對(duì)了,滑動(dòng)解鎖之所以被人們喜愛(ài),正是 因?yàn)槠浜?jiǎn)單、便捷,最符合單手持設(shè)備的操作習(xí)慣(想象手拿 iPhone 時(shí)拇指的位置)。而當(dāng)屏幕變大,有手短的妹子發(fā)現(xiàn),拇指劃過(guò)的距離已經(jīng)不夠解鎖了。而此時(shí)指紋解鎖已經(jīng)成熟,比滑動(dòng)更快,更便捷。于是指紋開(kāi)始成為第一選 擇了。
要想真正實(shí)現(xiàn)設(shè)計(jì)服務(wù)產(chǎn)品,產(chǎn)品服務(wù)用戶(hù)的良性循環(huán),我們?nèi)匀缓魡靖钊氲难?究車(chē)載用戶(hù)的使用習(xí)慣,更深刻的認(rèn)識(shí)駕駛環(huán)境和車(chē)內(nèi)空間。對(duì)于工作對(duì)象的理解不再是手機(jī)這樣的一個(gè)二維平面,而是一個(gè)立體的空間,對(duì)于交互方式的選擇,操 作方式的選擇,都有了無(wú)數(shù)新的選項(xiàng)。而新選項(xiàng)帶來(lái)的變化可能是指數(shù)級(jí)的。
因此,是時(shí)候重新審視車(chē)機(jī)的設(shè)計(jì)規(guī)范了,是時(shí)候重新探索車(chē)機(jī)的設(shè)計(jì)規(guī)范了,至少,是時(shí)候放棄模仿手機(jī)的設(shè)計(jì)規(guī)范了。
- 哪吒汽車(chē)母公司陷破產(chǎn)審查風(fēng)波:新能源賽道激戰(zhàn)下的生存挑戰(zhàn)
- 廣汽零部件子公司訴哪吒汽車(chē)合同糾紛案開(kāi)庭在即,新能源供應(yīng)鏈博弈再升級(jí)
- 小米SU7 Ultra風(fēng)波持續(xù)發(fā)酵:數(shù)百車(chē)主要求退車(chē),品牌面臨嚴(yán)峻考驗(yàn)
- 奇瑞高管評(píng)吉利新車(chē):“爛車(chē)” 鑒定完畢?行業(yè)言論風(fēng)波引關(guān)注
- 透視全球車(chē)企財(cái)報(bào):為何中國(guó)車(chē)企活得更穩(wěn)?
- 特斯拉預(yù)制式超級(jí)充電站技術(shù)“出?!保铀偃虺潆娋W(wǎng)絡(luò)布局
- 比亞迪見(jiàn)證海獅07EV車(chē)主趙心童奪冠,全球銷(xiāo)冠品牌再添星光
- 文遠(yuǎn)知行與Uber深化合作,加速Robotaxi全球化布局
- 保時(shí)捷在華銷(xiāo)量遭遇“滑鐵盧”:2025年Q1交付量不足萬(wàn)輛,同比暴跌42%
- 2025比亞迪美洲商務(wù)大會(huì)在浙江嵊州舉辦 20多國(guó)嘉賓點(diǎn)贊比亞迪科技實(shí)力
免責(zé)聲明:本網(wǎng)站內(nèi)容主要來(lái)自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準(zhǔn)確性及可靠性,但不保證有關(guān)資料的準(zhǔn)確性及可靠性,讀者在使用前請(qǐng)進(jìn)一步核實(shí),并對(duì)任何自主決定的行為負(fù)責(zé)。本網(wǎng)站對(duì)有關(guān)資料所引致的錯(cuò)誤、不確或遺漏,概不負(fù)任何法律責(zé)任。任何單位或個(gè)人認(rèn)為本網(wǎng)站中的網(wǎng)頁(yè)或鏈接內(nèi)容可能涉嫌侵犯其知識(shí)產(chǎn)權(quán)或存在不實(shí)內(nèi)容時(shí),應(yīng)及時(shí)向本網(wǎng)站提出書(shū)面權(quán)利通知或不實(shí)情況說(shuō)明,并提供身份證明、權(quán)屬證明及詳細(xì)侵權(quán)或不實(shí)情況證明。本網(wǎng)站在收到上述法律文件后,將會(huì)依法盡快聯(lián)系相關(guān)文章源頭核實(shí),溝通刪除相關(guān)內(nèi)容或斷開(kāi)相關(guān)鏈接。