原來智慧屏項目設計是這樣做的!
編輯導語:隨著AI和5G的發(fā)展,兩者的融合會輻射到更多的智能硬件上。智慧屏的應用變得廣泛,你知道智慧屏是怎么設計的嗎?作者總結了一份詳細的介紹,希望對你有所幫助。
加入蘇寧智能終端智慧屏(TV)項目團隊已經(jīng)快一年多了,在智慧屏領域學習并收獲了很多,所以想寫點復盤,給自己的工作做下總結,同時也希望給已經(jīng)或將從事于智能屏(TV端)設計的小伙伴提供一些幫助。
隨著AI和5G的快速發(fā)展,兩者的相互融合會輻射到更多的智慧硬件上,未來體驗也不會僅僅局限于智能手機,Alot會有無限的可能,智慧屏幕設計也將會迎來新的契機,用戶會根據(jù)具體的場景來發(fā)揮智智慧屏的更大的價值。
一、智慧屏-設計尺寸
智慧屏顯示分辨率有720p、1080p、2K、4K,智慧屏的設計尺寸選擇相對于手機的設計尺寸更簡單,因為手機機型比較多,不光需要區(qū)分安卓和iOS系統(tǒng),安卓系統(tǒng)里面還要區(qū)分不同的手機品牌。
設計稿尺寸一般常用1080p作為基準設計尺寸:1920*1080px(基于電視機長寬比16:9),這樣可以向上或下適配都比較方便,會更利于設計的發(fā)揮。
二、智慧屏-安全邊距
由于智慧屏“過掃描”的特性,廠商必須在正常屏幕尺寸的外側預留出空白邊,保證設計內容能夠被電路尋址,所以在做系統(tǒng)設計時候會在左右預留10%的安全邊距,上下可以自定義設置邊距,可根據(jù)設計內容來定義,只要是在視覺布局合理范圍之內即可,如下圖。
實際工作項目:蘇寧智慧屏Biuos 4.0系統(tǒng)設計時左右留白尺寸為114px,上留白120px,項目中所給的數(shù)值因為是基于刪格系統(tǒng)最小單位6px去設置,所以在預留的邊距數(shù)值也可以根據(jù)具體設計需要去做改變。
三、智慧屏-設計色彩
智慧屏的對比度和飽和度非常高,所以使用純色的時候需要考慮一下相關色彩準則。
- 純白色(#FFFFFF)會造成智慧屏各種顯示問題,可使用淺白色(參考華為智慧屏前景色1#F1F3F5)代替純白色。
- 避免大面積的使用色彩漸變導致智慧屏出現(xiàn)色帶。
- 避免使用明亮色系(如白色系、紅色系、橙色系),因為這些顏色的使用會讓顯示失真,同時增加用戶的體驗負擔,影響觀感,暗色系的色彩使用更能夠突出智慧屏設計的高級感和質感。
- 智慧屏系統(tǒng)示例:如華為HarmonyOS系統(tǒng)和小米MiUi TV系統(tǒng)。
- apk應用示例:如優(yōu)酷-酷喵和騰訊云試聽極光。
不管是從軟件系統(tǒng),還是內置apk應用,色彩基本都是偏向于使用暗色系,背景色和海報封面色彩的應用都相對比較平衡,視覺呈現(xiàn)效果都不會那么辣眼睛,目前市面上就智慧屏幕這塊領域,比較全的開源設計系統(tǒng)可供參考的是華為的鴻蒙設計系統(tǒng)。
四、智慧屏-架構設計
智慧屏系統(tǒng)市面上主流有且僅有兩種:華為HarmonyOS系統(tǒng)和谷歌Android(市面上很多電視機品牌基本都是基于安卓系統(tǒng)開發(fā)的智慧屏系統(tǒng),如小米、創(chuàng)維、pptv、海信等)
華為HarmonyOS系統(tǒng)的架構設計分為系統(tǒng)架構和應用架構,這點需要夸下華為的設計,模塊化的架構設計,讓應用功能模塊區(qū)分更簡單,每個模塊對應專門的應用場景,體驗感很強,富有創(chuàng)造力,畢竟是獲得過紅點設計大獎(“智慧屏鴻蒙UI系統(tǒng)”)
1. 華為HarmonyOS系統(tǒng)架構
主要由屏保,桌面(控制中心&通知欄,負一屏)最近任務三大部分組成,桌面主要包括頂部信號欄,中間視覺區(qū)域、底部應用功能入口。
- 頂部信號欄:搜索、設置、個人中心按鈕,時間信息。
- 中部運營內容:這部分內容是基本由運營來配置。
- 底部應用:用戶可以自定義設置排序,能顯示多個,遙控器控制左右滑動查看應用桌面。
控制中心和通知欄:
最近任務:
負一屏:
華為智慧屏系統(tǒng)架構操作GIF示例:
2. 華為HarmonyOS應用架構
主要是“導航”、“通用應用布局(宮格首頁,沉浸式首頁,普通宮格,隱私協(xié)議,普通列表,沉浸式列表,瀏覽列表,分類列表,內容詳情,播放,底部彈窗,詳情操作窗口,橫向選擇頁,搜索)”、“等待和加載”。
3. Android的智慧屏系統(tǒng)
安卓架構布局市面上大同小異,基本功能:信號欄、頻道標簽、視頻內容區(qū)域、快捷控制中心、負一屏、屏保、通用應用布局、等待和加載。
(1)信號欄:搜索、設置、個人中心登錄按鈕,時間信息,天氣信息等,不同的系統(tǒng)功能配置都不一樣
(2)頻道標簽:主要為功能類(如我的)頻道標簽、內容種類(如兒童、VIP、電影、電視劇、綜藝)等頻道標簽,其他平臺(如酷喵、極光TV等)頻道標簽,購物類頻道標簽
(3)視頻內容區(qū)域:視頻內容是由運營來配置控制的(包括添加視頻內容、運營廣告)
(4)通用應用布局:目前市面上安卓系統(tǒng)和鴻蒙系統(tǒng)的布局基本差不多,針對獨樹一幟的沉浸式布局體驗,安卓很多品牌智慧屏系統(tǒng)目前如小米和創(chuàng)維也已經(jīng)開始布局并應用沉浸式用戶體驗設計。
下圖為安卓系統(tǒng)頁面展示(以小米智慧屏為例)。
五、智慧屏-視覺和控件規(guī)范
設計是沒有統(tǒng)一的標準,卻可以根據(jù)相應的品牌調性和目標人群去平衡整體的設計風格。視覺設計主要元素包括:色彩,卡片圓角,字體,布局,圖標,圖片,動效,這些元素都可以根據(jù)具體的應用場景去制定設計規(guī)范,設計發(fā)揮的空間是無邊界的,而且每個品牌的設計都有自己的設計風格調。
所以就不一一舉例分析了。關于控件規(guī)范其實各端的設計包括智慧屏本質也都是相通的?;緒eb,手機端規(guī)范能理解,智慧屏規(guī)范也會很快被熟悉,如果實在需要找對應參考,就參考鴻蒙設計規(guī)范:https://developer.harmonyos.com
注:文中部分圖片來源于網(wǎng)絡,侵刪,少數(shù)內容摘自《Google TV Design Patterns》和《HarmonyOS設計規(guī)范》
六、總結
以上就是我想和大家分享的關于智慧屏項目設計的內容,當項目做的越來越深的時候,需要理解也就會越來越多,下一篇將繼續(xù)介紹智慧屏的交互設計,希望讓大家對智慧屏有個更加全面的認識。好啦,繼續(xù)碼字加油!
本文由 @Q什伍原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉載。
題圖來自 Unsplash,基于CC0協(xié)議。
作者分享的介紹智慧屏的交互設計很詳細,分享分享
用過小米智慧屏,視覺和控件的設計都感覺一般般吧
說到這個預留的空白邊,以后技術更新了邊距應該會越來越窄了
基本上每個手機品牌都開發(fā)了智慧屏幕,個人感覺這個還是挺好的
ai和5g真的不僅僅是技術上的變化,他真的帶來了很多東西,這些都是時代的變化
設計師產(chǎn)品很重要的一環(huán),真的不能夠去忽視,這些都很重要
分享的很好誒,視覺設計上給觀眾很好的體驗感,心甘情愿去瀏覽
原來指揮屏是這么用的,真的學到了,這樣辦公真的很高效欸
嗯嗯
這篇文章和辦公有什么關系?