更新迭代中的主題界面「造夢師」

最新 08-29

GIF

ECARX Developer由一群正在對車聯網行業做出貢獻的年輕工程師，程序員，數據分析師，設計師，產品經理等優秀人才組成。他們將跨團隊、跨領域合作和分享，以滿腔熱情和豐富的行業知識，為讀者帶來尖端的科技信息和產品研發背後的故事。

「

任何事情都不是一蹴而就的，而大多數人往往只能看到最終的形態。

」

Macintosh（簡稱Mac，是蘋果個人電腦的一個系列）的用戶界面並非一次完成，而是其主要開發者Bill從1978年底為Lisa（世界首台圖形界面計算機，以喬布斯長女命名）開發圖形程序開始，歷時5年時間，經歷了無數次糾錯、摸索、修改和調整演化而來。

Bill通過相機記錄下了Lisa和Macintosh用戶界面的演化歷程，這些珍貴的資料，為我們展開了Lisa和Macintosh用戶界面的發展圖史，也見證了蘋果開發者堅持不懈、極致用心的匠人精神！

Bill筆記中的第一張照片（上圖左邊圖片），是他在開發Apple IIPascal時留下的。中間和右邊的照片展示了1979年春天由Lisa的顯示系統渲染出來的文本。

右邊照片顯示出了當時的繪圖能力和靈活性，中間照片展示了Lisa最初的用戶界面，軟鍵盤的布局隨著用戶使用情況有所不同。

Lisa最初的用戶界面及早期圖形程序。

上圖左邊和中間的照片展示的是最初的繪圖程序，MacPaint的前身。右邊的照片展示了最後一個版本的軟鍵盤用戶界面，後被滑鼠和視窗取代。

上圖左邊的照片展示了第一次使用滑鼠雙擊打開和關閉窗口的功能。中間照片則把菜單欄放在了屏幕頂端，也是第一張反映Mac上市時樣子的照片。

1981年5月，Lisa的用戶界面設計已開始固定下來。左邊照片展示了可滾動的文檔，中間照片可以看到圓角矩形逐漸被應用在用戶界面上。

1982年3月，Lisa用戶界面的最後一次重大調整。左邊照片展示了使用圖形編輯器繪製的早期模型。中間照片的界面已和上市時差不多了。

1982年春將「LisaGraf」改名為「QuickDraw」，並加入放映和縮放兩個特性。

蘋果產品風靡全球，為廣大用戶所追捧，其用戶界面隨著創作團隊的經驗累積而與時俱進，不斷創新，於是成就了如今的蘋果品牌。作為科技行業的標杆，蘋果公司不斷探索的進取精神也同樣值得億咖通科技團隊學習。

在定義和研發車機系統的過程中，系統的圖形界面由早期以功能為主的設計風格，演變為用戶可自主定製、更換的個性化界面，這背後是億咖通科技團隊對產品迭代創新的極致追求，亦是每一個開發者的必修之路。

每前進一步都是一種超越

初代車機界面

億咖通科技的UED團隊將其設計的第一代車機系統主題界面命名為「吉利藍」，選用經典的Geely主色調，頂部凸起的兩翼形似一對展開的翅膀，有鵬程高飛之意。

向右滑動查看下一張圖

「吉利藍」車機系統主題界面的設計沿襲了智能手機的交互邏輯，讓用戶無需重新學習，易於上手操作。整個界面由三屏組成，可左右滑動點選，能夠實現基本的控車及用戶強需求的應用功能。除此之外，主題界面還採用了卡片式設計，可點觸控區較大，能快速實現需求功能，設計時將常用的APP置於界面底部，使駕駛員能夠在駕駛環境下快速的進行視覺信息處理，減少視覺干擾和負荷帶來的安全性問題。

誠然如此，初代車機界面的設計仍然不夠完美。因受到系統層面平台化開發的局限性、項目開發時間限制以及對界面整體設計感的綜合思考等因素，設計師和工程師們最終決定先上線基礎功能，保持模塊固定不變，暫不增加widget拖動等功能。另外，因硬體系統、屏幕解析度質量等問題，此次的設計從開發到落地只用了3個月的時間，在一定程度上也限制了設計拓展的可能性。

潮流引領者

主題界面設計趨勢

隨著互聯網及手機應用系統在用戶端的普及，中國新生代用戶對於IOS端和Andriod端的手機互聯網體驗經歷了由陌生到熟悉的過程。據調查，用戶在開車途中也會高頻使用手機導航軟體及音樂等功能，這也在一定程度上加速了車機系統的升級，尤其是在人機交互及界面設計方面的轉型。

因此，億咖通科技數字座艙團隊針對車機系統進行了一系列的優化設計：包括更新硬體晶元、提高屏幕解析度、增加觸屏觸感反饋靈敏度、提升軟體實現性的開發功能等，並同時發布了GKUI1.0的平台化版本。此版本在設計審美及交互體驗方面都借鑒了手機IOS端和Andriod端的設計樣式，有效減少用戶的學習成本，大大增加了用戶使用體驗。

另外，從主題界面的設計風格上來說，主要以擬物化及扁平化兩種風格為主。擬物風格的主題界面更注重光影效果，陰影調節上以寫實為特點，設計還原實物本身，視覺識別度極高，圖形有效傳達功能定義，整體界面圖形清晰立體。

扁平化風格的主題界面注重化繁為簡，具體表現在去處了多餘的透視、紋理、漸變的裝飾效果，增加3D效果的設計元素，讓「信息」本身重新作為核心被凸顯出來。

圖標雖小都是精華所在

最「洋氣」的設計潮流指向標

車機系統中的ICON通過初版設計奠定基礎風格，發展至今已與初版有了較大改進，其風格演變過程大致與整個設計行業主流的UI界面的潮流趨勢相適應。

從最初重度擬物、功能混排的千人一面風格，到如今的扁平多彩、模塊清晰的個性化主題，主題界面的迭代創新映襯出智能車時代的進步和發展。

最「帶感」的功能劃分

在板塊功能區分上，初版的主題界面Widget和App沒有明確的區域劃分，而是根據使用頻率與操作便捷性進行設置。Widget的優勢在於延展性，能夠更快捷地完成功能實現；App則更偏向某一應用軟體，二者有各自的功能側重。在後期的創作方向上，億咖通科技的UED團隊將Widget和App做了功能區分優化，既方便用戶自主定義，也使得界面邏輯更加清晰。

未來，車機主題的無限可能

隨著個性化定製服務以及IP流量時代的到來，億咖通科技希望能為用戶打造定製化的產品和生態服務，通過設計提供多元化的選擇方案，將決定權更大限度地讓渡給用戶。在此過程中，億咖通科技的UED團隊做了大量用戶調研工作，獲取用戶體驗層面的真實需求，調研中發現車主對於皮膚購買及積分兌換的需求較多，但主題商城中界面設計的內容輸出不足，導致用戶使用車機主題的粘性低，無法長期保持用戶對使用車機主題的新鮮感和持續度。

那麼，如何增加主題商城中可使用的主題數量呢？考慮到皮膚設計需求方向過多，創意性設計人才資源的匹配有限，億咖通科技決定招募社會上的設計師們共同參與到車機主題的設計創作當中，這不僅能給予UED團隊更多的創意靈感，也能讓更多有想法和創意的設計師參與時下最火的數字座艙設計。

因此，億咖通科技開闢行業先河，連續主辦了兩屆車機主題設計大賽，構建開放的設計交流平台，邀請廣大有創新進取精神的設計師們，參與產品設計決策，不斷豐富主題界面內涵。

為了辦好車機主題設計大賽，億咖通科技團隊從手機端的皮膚設計比賽中吸取經驗，攜手UI中國和吉利汽車、領克汽車共同參與。設計師們在創作過程中需考慮車機主題設計應盡量減少視覺干擾，以保證駕駛安全性，也要顧及到ICON設計的識別度等問題，徵集到的參賽作品令億咖通科技的UED團隊十分驚喜，並從中得到了諸多啟發。