當(dāng)前位置: 首頁(yè) > 工業(yè)控制產(chǎn)品 > 自動(dòng)化控制 > DCS系統(tǒng)
發(fā)布日期:2022-04-17 點(diǎn)擊率:23
兩年前作為電視UI的新人,開(kāi)始入手學(xué)習(xí)時(shí)發(fā)現(xiàn)關(guān)于電視的交互和UI教程甚少,相關(guān)文章也是少之又少。兩年快過(guò)去啦,各大設(shè)計(jì)網(wǎng)站上搜一搜智能電視UI,竟然還是少的可憐的那一點(diǎn)點(diǎn)東西。各大做電視端的師哥師姐們,你們咋那么吝惜筆墨膩?能不能寫(xiě)寫(xiě)教程教教偶們新入行的小鮮肉?好啦,不廢話(huà)啦,如今我已然不再是什么小鮮肉,只希望能把工作兩年來(lái)學(xué)到的東西都記錄下來(lái),如果哪天被某個(gè)想入行電視UI的鮮肉看見(jiàn)了,希望能有所幫助。
這篇文章先講一下電視用戶(hù)體驗(yàn)第一元素:焦點(diǎn),程序里面叫Focus。
移動(dòng)端頁(yè)面有可點(diǎn)擊內(nèi)容和不可點(diǎn)擊內(nèi)容,相應(yīng)的,到電視上,我們有“可獲取焦點(diǎn)內(nèi)容”和“不可獲取焦點(diǎn)內(nèi)容”。(一般電視上的內(nèi)容都是可以獲取焦點(diǎn)的,只有部分提示性文字沒(méi)有焦點(diǎn)屬性)先來(lái)看兩張圖

這是電視圈兒內(nèi)大名鼎鼎的當(dāng)貝市場(chǎng)的首頁(yè),頂部標(biāo)簽焦點(diǎn)和內(nèi)容焦點(diǎn)的樣式,這也是當(dāng)前大部分電視端App焦點(diǎn)的樣式。這種焦點(diǎn)簡(jiǎn)單,美觀,醒目。
下面我們說(shuō)一下電視焦點(diǎn)視覺(jué)設(shè)計(jì)第一個(gè)要注意的問(wèn)題:焦點(diǎn)在哪兒?
設(shè)計(jì)原則:焦點(diǎn)要醒目
建議方法:使用描邊,外發(fā)光,放大,或其他動(dòng)畫(huà)來(lái)加強(qiáng)焦點(diǎn)視覺(jué)效果。當(dāng)然也不是越夸張?jiān)胶?,要拿捏得?dāng),適合的才最好。
電視屏幕上的焦點(diǎn)也是用戶(hù)的視覺(jué)落點(diǎn),用戶(hù)找了滿(mǎn)屏也不知道自己在哪兒的感覺(jué)是很崩潰的。不知道焦點(diǎn)在哪兒,就沒(méi)法預(yù)知自己按下遙控器后會(huì)怎樣。我們來(lái)看一張焦點(diǎn)很微弱的圖:

自從小米首先在電視上使用時(shí)尚畫(huà)報(bào)做屏保后,一批批屏保圖片類(lèi)電視app出現(xiàn),上圖為一款叫風(fēng)迷style的app首次使用設(shè)置界面。左圖,深色和淺色的按鈕,哪個(gè)是焦點(diǎn)?假設(shè)焦點(diǎn)在“跳過(guò)”上,而用戶(hù)卻以為焦點(diǎn)是全選,按下遙控器跳過(guò)了此界面,用戶(hù)肯定會(huì)很吃驚“誒,我按了什么?。。俊比绻乱豁?yè)不支持返回重新編輯,那用戶(hù)會(huì)是十分崩潰的。這個(gè)app的焦點(diǎn)都不太明顯,看右圖,沒(méi)有放大也沒(méi)有外發(fā)光也沒(méi)有動(dòng)態(tài)輔助,不過(guò)還好,還是可以分辨的清的。
第二個(gè)要注意的問(wèn)題:焦點(diǎn)的樣式要統(tǒng)一么?
設(shè)計(jì)原則:樣式盡量統(tǒng)一,這樣才感覺(jué)都是一家人嘛~
建議方法:外發(fā)光選框焦點(diǎn),替換顏色焦點(diǎn)盡量不要混著使用。動(dòng)畫(huà)焦點(diǎn)也不要有很多動(dòng)畫(huà)樣式,盡量統(tǒng)一。
看上上圖,色塊卡片是當(dāng)前最流行的電視UI形式,如果焦點(diǎn)樣式也是色塊,難免會(huì)造成視覺(jué)混淆,下圖我再舉個(gè)例子。

蝦米音樂(lè)的搜索按鈕焦點(diǎn)樣式,和QQ音樂(lè)的搜索按鈕焦點(diǎn)樣式,哪個(gè)更直接明了一些?顯然是QQ音樂(lè)啦,看來(lái)鵝廠(chǎng)對(duì)電視App的焦點(diǎn)也是研究過(guò)的啊,哈哈。另外我要說(shuō)一下互聯(lián)網(wǎng)電視新秀暴風(fēng)TV里面一個(gè)頁(yè)面的焦點(diǎn)

找到焦點(diǎn)了嘛?沒(méi)錯(cuò),焦點(diǎn)在左下角的“未登錄”那里,這是一個(gè)動(dòng)畫(huà)效果,暴風(fēng)TV的UI使用了很多柔和的微動(dòng)畫(huà),營(yíng)造了不錯(cuò)的氛圍感。小米電視UI上也有很多拿捏到位動(dòng)畫(huà),樂(lè)視就不要提了,樂(lè)視剛出來(lái)時(shí)候在那個(gè)年代真的挺好看的,可是這幾年怎么就沒(méi)有設(shè)計(jì)創(chuàng)新呢,感覺(jué)它的UI都被時(shí)代拋棄了。
下一篇: PLC、DCS、FCS三大控
上一篇: 索爾維全系列Solef?PV