原來智慧屏項目設計是這樣做的!

10 評論 5503 瀏覽 33 收藏 11 分鐘

編輯導語:隨著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ū)域、底部應用功能入口。

  1. 頂部信號欄:搜索、設置、個人中心按鈕,時間信息。
  2. 中部運營內容:這部分內容是基本由運營來配置。
  3. 底部應用:用戶可以自定義設置排序,能顯示多個,遙控器控制左右滑動查看應用桌面。

原來智慧屏項目設計是這樣做的!

控制中心和通知欄:

原來智慧屏項目設計是這樣做的!

最近任務:

原來智慧屏項目設計是這樣做的!

負一屏:

原來智慧屏項目設計是這樣做的!

華為智慧屏系統(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é)議。

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 作者分享的介紹智慧屏的交互設計很詳細,分享分享

    來自山東 回復
  2. 用過小米智慧屏,視覺和控件的設計都感覺一般般吧

    回復
  3. 說到這個預留的空白邊,以后技術更新了邊距應該會越來越窄了

    回復
  4. 基本上每個手機品牌都開發(fā)了智慧屏幕,個人感覺這個還是挺好的

    回復
  5. ai和5g真的不僅僅是技術上的變化,他真的帶來了很多東西,這些都是時代的變化

    來自江西 回復
  6. 設計師產(chǎn)品很重要的一環(huán),真的不能夠去忽視,這些都很重要

    來自江西 回復
  7. 分享的很好誒,視覺設計上給觀眾很好的體驗感,心甘情愿去瀏覽

    來自湖北 回復
  8. 原來指揮屏是這么用的,真的學到了,這樣辦公真的很高效欸

    來自江西 回復
    1. 嗯嗯

      回復
    2. 這篇文章和辦公有什么關系?

      來自北京 回復