之前一直在做移動端的UI設計,在進入小米后,開始接觸電視端的UI設計,目前在負責小米電視商城。經(jīng)過一個電視端項目后,自己做了一些關于電視UI的總結(jié)以及設計方法原則。
電視UI算得上是一個偏冷門的界面設計,因為它的交互比較特殊,同時有一些限制,比如交互限制,焦點原則等等。以下就自己的項目經(jīng)驗為電視UI設計原則做一個總結(jié)。
對于現(xiàn)在家庭智能電視電視而言,技術在不斷的進步,但是其飽和度和對比度有的還是很強,還會遇到大紅碰到大紫的色塊對比;但是信息變得簡約了,都是以tab導航為主,下面幾個卡片信息瀑布流顯示;語音提示很重要,會隨著焦點的移動發(fā)出提示聲響,提示用戶電視焦點的移動狀態(tài)。
小米電視商城全新改版,在接到需求后,一定要模擬用戶來體驗一下購物流程還有用電視購物都環(huán)境,環(huán)境應該是固定的,那就是在家里;電視和手機購物體驗是不一樣的,電視是要用遙控器來控制,所以每一步的操作流程都很珍貴,如果界面跳轉(zhuǎn)太多,會給用戶一種煩躁的感覺,所以盡量同一層級的信息要在同一界面填寫完畢,避免二次跳轉(zhuǎn)。
第二點說的就是焦點問題,焦點不能層次不齊,跳動太大會引起視覺不適;以小米電視商城詳情為例,焦點盡量在同一水平線上,同行的焦點移動,視覺感受上會舒服很多。
智能電視的分辨率和大家平常在app看電影的時候差不多,如上圖所示,目前1080p最常見,2k和4k基本都是資源類節(jié)目,設計尺寸以小米電視為例,通常做1920*1080的視覺稿就可以了,開發(fā)會適配比1920*1080小的電視屏幕,這樣下來,如果小分辨率的電視沒問題了,大的分辨率也就沒問題了。
我們知道在設計app的時候,都有左右間距的控制,移動端一般常見的控制在28px或者32px,電視端因為是大屏設計,所以預留的空間也要大一些,基本左右留出120px,上面留出90px就可以了。我一般設計的時候左右是固定的120px,上面可以隨設計內(nèi)容來自定義,90px或者100px,都是可以的,只要視覺舒服即可。
焦點在電視端UI設計里顯得尤為重要,因為它就是你的視覺焦點,焦點會隨著遙控器是上下左右確認會改變;焦點的設計不能是扁平的,因為那樣不能夠提醒用戶焦點狀態(tài)的位置,焦點的設計應該是放大的、夸張的、可以帶邊框,也可以使用投影外發(fā)光的方式來設計,確保能夠給用戶足夠的清晰位置。
焦點放大我這里建議放大1.1倍或者1.2倍就可以了,再大就顯得過于大了。
如上圖所示,我在設計焦點的時候,就用了放大+外邊框的形式,這樣焦點移動起來可以讓用戶足夠看到位置所在;電視端的交互也是很簡單的,基本屬于十字交互,即自上而下,從左到右的交互方式;紅色剪頭屬于禁區(qū),所有的電視交互,沒有斜45度的交互,這樣是錯誤的~
大家可以看到,在app里,常見的彈窗和浮窗可以壓蓋在可點擊功能上,比如美團的紅包,愛奇藝的一鍵關注,即使是這樣,也不會影響功能的正常使用;但是電視端的設計,如果兩個可點擊功能壓蓋在一起,那么尷尬的就是,焦點無法獲取,因為它沒法判斷你想要選那個功能,所以在電視上,一定要將兩個功能分開來布局最為合適。
露出屏外的內(nèi)容呢,和移動端設計是一樣的,如果有多個卡片內(nèi)容,我們需要將露出屏外的那張卡片做一些邊界化處理,控制好間距,也就是說我們要將一個完整的卡片漏出來一些,讓用戶知道,后面還有內(nèi)容;反之,用戶可能不知道后面還有內(nèi)容,就不會按遙控器右鍵查看了。
電視端UI設計忌諱控件隱藏,比如上圖,如果有很多文字的時候,左邊的設計是錯誤的,因為隱藏了button按鈕;改為右邊的設計是比較好的,我們可以選擇焦點選中文字給一個彈窗狀態(tài)或者其它,將button功能位露出來,如果一個界面可選功能位較少,我們設計的時候盡量在第一屏展示,如果實在不行,可以選擇吸底吸邊來設計。
顏色的選擇運用是重中之重,因為這個會直接影響到用戶的視覺體驗。因為用戶環(huán)境大多數(shù)是晚上的時候回去看電視,分開燈和關燈的情況,開燈的情況其實還好;如果關燈,顏色太刺眼的話,飽和度較高的顏色會直接影響到眼睛,這個危害是很大的,而且不一樣顏色的色塊,會增加用戶的視覺負擔,這樣就得不償失了。所以我們要避免大面積的使用單一純色或者漸變色。特別提示:電視UI設計中,白色謹慎使用!白色謹慎使用!白色謹慎使用!重要的事情說三遍,因為白色過多實在是太太太刺眼了,我們可以選中較為灰一些的接近白色的顏色來代替。
背景的運用這里也建議使用深色的背景,原因和上述講的一樣,還有一個就是深色背景可以更好的襯托出界面的主要內(nèi)容;反之如果用淺色的背景,有的卡片如果需求方要求設計成淺色,那么這樣淺色的背景+淺色的卡片,這樣疊在一起,主要內(nèi)容就特別難區(qū)分了。
我們在設計電視端UI的時候,要真實的先去體驗一下特殊的場景,電視端每個tab是一個頻道,每個頻道的設計風格也是不同的,比如少兒頻道,購物頻道和電影電視劇頻道,設計風格肯定不同,體驗模擬流程可以讓我們更快的了解電視特性。
字體的選擇默認思源黑體,因為這個字體是開源字體,可以免費使用,沒有版權之分,以上列入的字體是小米電視商城改版的字號,具體的字體和間距可以根據(jù)自己的設計需求來變;
關于字體的選擇,當然你也可以選用其它字體,或者一些特殊字體,好看的字體,但是這樣的話,字體包應該會很大,會影響一些加載速度吧。
字體顏色的選擇盡量用白色或者亮色,深色背景上選用白色是最好的,這樣更易于閱讀。
字體的粗細大小,這里標題建議加粗選擇,其余就常規(guī)字體就好來,避免太粗或者太細的字體選擇。
更好的智能家居體驗電視的設計只是其中的一部分,未來我們的電視可能比現(xiàn)在的體驗更加好,比如會出現(xiàn)實景商城,單一的圖片形式已經(jīng)不能滿足我們對購物的需求,一些視頻類,動效類的體驗會更加合適,想讓電視擁有好的體驗并不是一件簡單的事情,想必大家已經(jīng)從諸多“電視盒 子”上體驗到了這一點。我們曾經(jīng)熟悉的電視已經(jīng)發(fā)生改變,而我們適應的手機、平板和電腦和新的電視還有著巨大的差別,我們需要忘掉之前熟悉的模式,未來五年、十年、甚至更久;電視、電燈、冰箱洗衣機等智能家具的體驗,正是我們設計師需要在未來幾年所做的事情,這很重要。
小米電視商城全新改版是我接觸的第一個電視端UI設計項目,第一期的優(yōu)化還有很多不足,根據(jù)項目經(jīng)驗總結(jié)了上面的規(guī)范類。以上的基本設計規(guī)范掌握后,那么做電視UI基本問題不大,大的錯誤肯定不會有了;但是每個公司的設計規(guī)范肯定也有所差別,但是基本的規(guī)范和注意事項也就是我上面所提到的種種;電視端的設計是個偏冷門的UI設計,多掌握一些另類項目經(jīng)驗也是一個設計師必備的技能。
作者:Ericlee的腦洞 原文鏈接:https://www.zcool.com.cn/article/ZMTAwMzMxNg==.html
全站高品質(zhì)素材免費下載!