• 上傳作品
    • 上傳經驗
    • 上傳即刻

您的意見是我們 UI 中國進步的動力!
點擊立即反饋按鈕,發表您的意見!
立即反饋
QQ群反饋
您也可以加入UI中國官方反饋群進行反饋!
群號:302892100
備注:反饋問題後@管理員能讓我們及時了解您的意見

成長值達到300分以上才可以發布喲!~

收集成長值
輸入邀請碼
先看看別人的即刻>

智能電視端UI設計基本原則

原創文章 分類: 經驗/觀點 版權:
3568 120 190 12
2019-08-07
34.5
首頁推薦

根據自己的項目經驗總結電視端UI設計基本原則(基礎篇),希望能幫到更多負責大屏的設計師們。



之前一直在做移動端的UI設計,在進入小米後,開始接觸電視端的UI設計,目前在負責小米電視商城。經過一個電視端項目後,自己做了一些關于電視UI的總結以及設計方法原則。



電視UI算得上是一個偏冷門的界面設計,因爲它的交互比較特殊,同時有一些限制,比如交互限制,焦點原則等等。本次經驗也適合大屏設計,以下就自己的項目經驗爲電視UI設計原則做一個總結。



Image title


對于現在家庭智能電視電視而言,技術在不斷的進步,但是其飽和度和對比度有的還是很強,還會遇到大紅碰到大紫的色塊對比;但是信息變得簡約了,都是以tab導航爲主,下面幾個卡片信息瀑布流顯示;語音提示很重要,會隨著焦點的移動發出提示聲響,提示用戶電視焦點的移動狀態。




Image title


小米電視商城全新改版,在接到需求後,一定要模擬用戶來體驗一下購物流程還有用電視購物都環境,環境應該是固定的,那就是在家裏;電視和手機購物體驗是不一樣的,電視是要用遙控器來控制,所以每一步的操作流程都很珍貴,如果界面跳轉太多,會給用戶一種煩躁的感覺,所以盡量同一層級的信息要在同一界面填寫完畢,避免二次跳轉。


 


第二點說的就是焦點問題,焦點不能層次不齊,跳動太大會引起視覺不適;以小米電視商城詳情爲例,焦點盡量在同一水平線上,同行的焦點移動,視覺感受上會舒服很多。




Image title


Image title


智能電視的分辨率和大家平常在app看電影的時候差不多,如上圖所示,目前1080p最常見,2k和4k基本都是資源類節目,設計尺寸以小米電視爲例,通常做1920*1080的視覺稿就可以了,開發會適配比1920*1080小的電視屏幕,這樣下來,如果小分辨率的電視沒問題了,大的分辨率也就沒問題了。




Image title


我們知道在設計app的時候,都有左右間距的控制,移動端一般常見的控制在28px或者32px,電視端因爲是大屏設計,所以預留的空間也要大一些,基本左右留出120px,上面留出90px就可以了。我一般設計的時候左右是固定的120px,上面可以隨設計內容來自定義,90px或者100px,都是可以的,只要視覺舒服即可。




Image title


Image title


焦點在電視端UI設計裏顯得尤爲重要,因爲它就是你的視覺焦點,焦點會隨著遙控器是上下左右確認會改變;焦點的設計不能是扁平的,因爲那樣不能夠提醒用戶焦點狀態的位置,焦點的設計應該是放大的、誇張的、可以帶邊框,也可以使用投影外發光的方式來設計,確保能夠給用戶足夠的清晰位置。


焦點放大我這裏建議放大1.1倍或者1.2倍就可以了,再大就顯得過于大了。




Image title


Image title


如上圖所示,我在設計焦點的時候,就用了放大+外邊框的形式,這樣焦點移動起來可以讓用戶足夠看到位置所在;電視端的交互也是很簡單的,基本屬于十字交互,即自上而下,從左到右的交互方式;紅色剪頭屬于禁區,所有的電視交互,沒有斜45度的交互,這樣是錯誤的~




Image title


Image title


大家可以看到,在app裏,常見的彈窗和浮窗可以壓蓋在可點擊功能上,比如美團的紅包,愛奇藝的一鍵關注,即使是這樣,也不會影響功能的正常使用;但是電視端的設計,如果兩個可點擊功能壓蓋在一起,那麽尴尬的就是,焦點無法獲取,因爲它沒法判斷你想要選那個功能,所以在電視上,一定要將兩個功能分開來布局最爲合適。




Image title


電視端UI設計忌諱控件隱藏,比如上圖,如果有很多文字的時候,左邊的設計是錯誤的,因爲隱藏了button按鈕;改爲右邊的設計是比較好的,我們可以選擇焦點選中文字給一個彈窗狀態或者其它,將button功能位露出來,如果一個界面可選功能位較少,我們設計的時候盡量在第一屏展示,如果實在不行,可以選擇吸底吸邊來設計。





Image title


顔色的選擇運用是重中之重,因爲這個會直接影響到用戶的視覺體驗。因爲用戶環境大多數是晚上的時候回去看電視,分開燈和關燈的情況,開燈的情況其實還好;如果關燈,顔色太刺眼的話,飽和度較高的顔色會直接影響到眼睛,這個危害是很大的,而且不一樣顔色的色塊,會增加用戶的視覺負擔,這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。




特別提示:

電視UI設計中,白色謹慎使用!白色謹慎使用!白色謹慎使用!重要的事情說三遍,因爲白色過多實在是太太太刺眼了,我們可以選中較爲灰一些的接近白色的顔色來代替。


背景的運用這裏也建議使用深色的背景,原因和上述講的一樣,還有一個就是深色背景可以更好的襯托出界面的主要內容;反之如果用淺色的背景,有的卡片如果需求方要求設計成淺色,那麽這樣淺色的背景+淺色的卡片,這樣疊在一起,主要內容就特別難區分了。


我們在設計電視端UI的時候,要真實的先去體驗一下特殊的場景,電視端每個tab是一個頻道,每個頻道的設計風格也是不同的,比如少兒頻道,購物頻道和電影電視劇頻道,設計風格肯定不同,體驗模擬流程可以讓我們更快的了解電視特性。




Image title


字體的選擇默認思源黑體,因爲這個字體是開源字體,可以免費使用,沒有版權之分,以上列入的字體是小米電視商城改版的字號,具體的字體和間距可以根據自己的設計需求來變;


關于字體的選擇,當然你也可以選用其它字體,或者一些特殊字體,好看的字體,但是這樣的話,字體包應該會很大,會影響一些加載速度吧。


字體顔色的選擇盡量用白色或者亮色,深色背景上選用白色是最好的,這樣更易于閱讀。


字體的粗細大小,這裏標題建議加粗選擇,其余就常規字體就好來,避免太粗或者太細的字體選擇。






好的智能家居體驗

電視的設計只是其中的一部分,未來我們的電視可能比現在的體驗更加好,比如會出現實景商城,單一的圖片形式已經不能滿足我們對購物的需求,一些視頻類,動效類的體驗會更加合適,想讓電視擁有好的體驗並不是一件簡單的事情,想必大家已經從諸多“電視盒 子”上體驗到了這一點。我們曾經熟悉的電視已經發生改變,而我們適應的手機、平板和電腦和新的電視還有著巨大的差別,我們需要忘掉之前熟悉的模式,未來五年、十年、甚至更久;電視、電燈、冰箱洗衣機等智能家具的體驗,正是我們設計師需要在未來幾年所做的事情,這很重要。




下面爲大家引入中一些優秀的智能家居UI設計,以下作品來自追波:


Image title

by Luova Studio in App Interface 

https://dribbble.com/shots/6034172-Smart-Home/attachments





Image title

by Julia Jakubiak for 10Clouds

https://dribbble.com/shots/6309454-Smart-Home-App





Image title

by Filip Legierski for Riotters 

https://dribbble.com/shots/6439700-Smarthome





Image title

by Anggiat Manuel for Pixelz

https://dribbble.com/shots/5954157-Smart-Home-Devices






Image title

by Bartek Zieman for Movade

https://dribbble.com/shots/6243299-Smart-Home-Mobile-Dashboard





智能家居必然是未來的趨勢,衣食住行必然離不開人們的生活,現在小愛音響可以控制電視機等等,今後必定會控制家裏的一切設備,科技的進步必然也會影響著人們的生活,智能家居設計也是設計師們今後要掌握的東西。




小米電視商城全新改版是我接觸的第一個電視端UI設計項目,第一期的優化還有很多不足,根據項目經驗總結了上面的規範類。以上的基本設計規範掌握後,那麽做電視UI基本問題不大,大的錯誤肯定不會有了;但是每個公司的設計規範肯定也有所差別,但是基本的規範和注意事項也就是我上面所提到的種種;電視端的設計是個偏冷門的UI設計,多掌握一些另類項目經驗也是一個設計師必備的技能。


本次分享就這些,如果有問題可以評論區或者私信回複。如需轉載請聯系作者。


謝謝。










  • 收藏

    120人已收藏

Ericlee的腦洞

wechat 441606968(備注來意)

170粉絲/15關注

2018年度UI中國作品集入圍 TOP50磚家當仁不讓lv.1首頁新秀原創達人
私信
小米電視商城1.0全新改版小米電商-米聚 1.0
0
無我

精彩!

Ericlee的腦洞

Ericlee的腦洞

wechat 441606968(備注來意)

2018年度UI中國作品集入圍 TOP50磚家當仁不讓lv.1首頁新秀原創達人
190 收藏120

掃描二維碼
去手機端查看海報

Ericlee的腦洞

TA已經獲得10枚勳章啦

  • 成就勳章

    • 特別勳章

    • 身份勳章

  • 已擁有

  • 作品

    創造者才是真正的享受者。

  • 經驗

    經驗是一所好學校,可它的學生卻經常曠課。

  • 活躍

    大神都是從圍觀群衆開始的

  • 拓展

    作品、經驗、活躍還不能滿足你?

京ICP備14007358號-1 / 京公網安備11010802014104號 / Powered by 2008-2019 UI.CN

Cw9sdfed

朕收下了