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