中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

入智能電視行業(yè)一年半，先后在傳統(tǒng)電視品牌和互聯(lián)網(wǎng)電視新秀品牌的用戶體驗(yàn)部門工作，具體工作是電視端App，Launcher的交互和視覺設(shè)計(jì)，手機(jī)端電視相關(guān)App設(shè)計(jì)。

兩年前作為電視UI的新人，開始入手學(xué)習(xí)時發(fā)現(xiàn)關(guān)于電視的交互和UI教程甚少，相關(guān)文章也是少之又少。兩年快過去啦，各大設(shè)計(jì)網(wǎng)站上搜一搜智能電視UI，竟然還是少的可憐的那一點(diǎn)點(diǎn)東西。各大做電視端的師哥師姐們，你們咋那么吝惜筆墨膩？能不能寫寫教程教教偶們新入行的小鮮肉？好啦，不廢話啦，如今我已然不再是什么小鮮肉，只希望能把工作兩年來學(xué)到的東西都記錄下來，如果哪天被某個想入行電視UI的鮮肉看見了，希望能有所幫助。

這篇文章先講一下電視用戶體驗(yàn)第一元素：焦點(diǎn)，程序里面叫Focus。

移動端頁面有可點(diǎn)擊內(nèi)容和不可點(diǎn)擊內(nèi)容，相應(yīng)的，到電視上，我們有“可獲取焦點(diǎn)內(nèi)容”和“不可獲取焦點(diǎn)內(nèi)容”。（一般電視上的內(nèi)容都是可以獲取焦點(diǎn)的，只有部分提示性文字沒有焦點(diǎn)屬性）先來看兩張圖

這是電視圈兒內(nèi)大名鼎鼎的當(dāng)貝市場的首頁，頂部標(biāo)簽焦點(diǎn)和內(nèi)容焦點(diǎn)的樣式，這也是當(dāng)前大部分電視端App焦點(diǎn)的樣式。這種焦點(diǎn)簡單，美觀，醒目。

下面我們說一下電視焦點(diǎn)視覺設(shè)計(jì)第一個要注意的問題：焦點(diǎn)在哪兒？

設(shè)計(jì)原則：焦點(diǎn)要醒目

建議方法：使用描邊，外發(fā)光，放大，或其他動畫來加強(qiáng)焦點(diǎn)視覺效果。當(dāng)然也不是越夸張?jiān)胶?，要拿捏得?dāng)，適合的才最好。

電視屏幕上的焦點(diǎn)也是用戶的視覺落點(diǎn)，用戶找了滿屏也不知道自己在哪兒的感覺是很崩潰的。不知道焦點(diǎn)在哪兒，就沒法預(yù)知自己按下遙控器后會怎樣。我們來看一張焦點(diǎn)很微弱的圖：

自從小米首先在電視上使用時尚畫報(bào)做屏保后，一批批屏保圖片類電視app出現(xiàn)，上圖為一款叫風(fēng)迷style的app首次使用設(shè)置界面。左圖，深色和淺色的按鈕，哪個是焦點(diǎn)？假設(shè)焦點(diǎn)在“跳過”上，而用戶卻以為焦點(diǎn)是全選，按下遙控器跳過了此界面，用戶肯定會很吃驚“誒，我按了什么?。。俊比绻乱豁摬恢С址祷刂匦戮庉?，那用戶會是十分崩潰的。這個app的焦點(diǎn)都不太明顯，看右圖，沒有放大也沒有外發(fā)光也沒有動態(tài)輔助，不過還好，還是可以分辨的清的。

第二個要注意的問題：焦點(diǎn)的樣式要統(tǒng)一么？

設(shè)計(jì)原則：樣式盡量統(tǒng)一，這樣才感覺都是一家人嘛～

建議方法：外發(fā)光選框焦點(diǎn)，替換顏色焦點(diǎn)盡量不要混著使用。動畫焦點(diǎn)也不要有很多動畫樣式，盡量統(tǒng)一。

看上上圖，色塊卡片是當(dāng)前最流行的電視UI形式，如果焦點(diǎn)樣式也是色塊，難免會造成視覺混淆，下圖我再舉個例子。

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

找到焦點(diǎn)了嘛？沒錯，焦點(diǎn)在左下角的“未登錄”那里，這是一個動畫效果，暴風(fēng)TV的UI使用了很多柔和的微動畫，營造了不錯的氛圍感。小米電視UI上也有很多拿捏到位動畫，樂視就不要提了，樂視剛出來時候在那個年代真的挺好看的，可是這幾年怎么就沒有設(shè)計(jì)創(chuàng)新呢，感覺它的UI都被時代拋棄了。

第三個要注意的問題：焦點(diǎn)路徑的記憶

這個問題用純文字比較難表達(dá)清楚，先看下圖：

再拿多米音樂和QQ音樂舉個例子。多米音樂中，首次使用app時，焦點(diǎn)在位置1按遙控器右鍵，焦點(diǎn)會落到位置2，在位置2按下鍵，焦點(diǎn)落到位置3，在位置3按左鍵，焦點(diǎn)會回到位置1，此時再在位置一按右鍵，焦點(diǎn)會落在位置3，而不是首次使用時的位置2啦。

QQ音樂的方式則不同，不管是不是第一次使用，焦點(diǎn)在位置1時按下鍵，則焦點(diǎn)始終落在焦點(diǎn)2。QQ的方式是先上后下，先左后右的順序。而蝦米則會記住焦點(diǎn)上一步所在的位置，完全遵從著“從哪兒來，回哪兒去”的原則。蝦米音樂在這點(diǎn)做的要比QQ音樂好，因?yàn)橛涀∮脩羯弦徊降牟僮骺偸求w貼的。

設(shè)計(jì)原則：從哪兒來，回哪兒去

建議方法：記住用戶上一步的操作（即上一步焦點(diǎn)所在位置），再次執(zhí)行同一動作的時候使用上次記住的方式。

這個方法不僅僅適用于焦點(diǎn)移動，也適用于頁面切換。在A界面上的位置1進(jìn)入到B界面，那從B界面回到A界面時，焦點(diǎn)還應(yīng)該在位置1。可能你會覺得，一個小小焦點(diǎn)位置，有必要糾結(jié)那么多嘛？對于電視交互，還真的需要考慮這么多，你不寫清楚，程序員就不知道該怎么做，有的會亂搞，或直接忽視這個問題，造成差的用戶體驗(yàn)。當(dāng)然有經(jīng)驗(yàn)的程序員哥哥是會自動完善你的交互稿的，這些程序員哥哥還經(jīng)常提出交互中的不完善之處，簡直就是交互小幫手。當(dāng)然作為交互設(shè)計(jì)師，咱不能指望程序員哥哥啊，萬一他也是個菜鳥級的鮮肉腫么辦！

第四個要注意的問題：獲取焦點(diǎn)即執(zhí)行 VS 獲取焦點(diǎn)后按確認(rèn)鍵再執(zhí)行

電視上的元素應(yīng)該有五個狀態(tài)：1.正常狀態(tài) ?2.焦點(diǎn)狀態(tài) ?3.按下狀態(tài) ?4.標(biāo)記狀態(tài) ? 5.半選中狀態(tài)。

其中“半選中狀態(tài)”是一個交互狀態(tài)，在視覺上與“焦點(diǎn)狀態(tài)”是相同的，半選中即焦點(diǎn)移動到相應(yīng)內(nèi)容但并不執(zhí)行動作，需要再次按確認(rèn)鍵才響應(yīng)操作。這種狀態(tài)常見于視頻播放或音頻播放界面的設(shè)置菜單里，所選內(nèi)容要對當(dāng)前界面執(zhí)行更改的情況。比如愛奇藝電視端視頻播放界面按“菜單鍵”調(diào)出選集菜單（下圖左），暴風(fēng)TV影視庫里面按“菜單鍵”調(diào)出設(shè)置菜單（下圖右）

圖左和圖右均有明顯標(biāo)記狀態(tài)和半選中狀態(tài)，這兩個狀態(tài)從來都是成對出現(xiàn)。半選中狀態(tài)是用戶即將進(jìn)行的更改按鈕，而標(biāo)記狀態(tài)，要對當(dāng)前模式進(jìn)行標(biāo)記。

半選中狀態(tài)在智能電視剛誕生的時候非常流行，各大廠商的Launcher界面上的頂部tab都采用半選中狀態(tài)，因?yàn)槟菚r候技術(shù)限制，電視刷新頻率比較慢，若是移動焦點(diǎn)則更改畫面，卡頓現(xiàn)象非常嚴(yán)重，所以電視界出現(xiàn)了一個“半選中狀態(tài)”，用戶隨便移動焦點(diǎn)卻不執(zhí)行操作（實(shí)際上很多用戶無聊的時候會移動焦點(diǎn)玩兒），要到想要的位置按確定再執(zhí)行操作。這種用戶體驗(yàn)是十分不流暢的，所以現(xiàn)在的互聯(lián)網(wǎng)電視，好一點(diǎn)的app，都是遵循所見即所得原則，焦點(diǎn)移過去就執(zhí)行更改（實(shí)際上是有200ms的延遲的哦，程序員哥哥說200ms也不會被用戶察覺，是程序界通用的延遲執(zhí)行時間）。

也有一些情況，是必須執(zhí)行半選中狀態(tài)的，比如選擇劇集

這種場景，你肯定不希望焦點(diǎn)每動一次畫面都跟著切換，那樣簡直太不流暢了，要是網(wǎng)速不好，簡直是要崩潰的體驗(yàn)。

其實(shí)半選中狀態(tài)和選中狀態(tài)也沒有絕對的區(qū)分，只是我覺得這樣描述在工作中和人溝通起來比較容易，如果嚴(yán)格追求字面意思我這么說是不嚴(yán)謹(jǐn)?shù)?。主要大家知道電視存在這么一種特殊狀態(tài)就好，類似于電腦上的鼠標(biāo)懸停效果吧，在移動端上我并沒想到對應(yīng)效果。關(guān)于獲取焦點(diǎn)即執(zhí)行還是獲取焦點(diǎn)按確定后再執(zhí)行，真的是要具體情況具體分析，主要是東西跑在電視上，操作得流暢??！所以這里就不寫設(shè)計(jì)原則和建議方法，筆者能力有限也怕寫不明白。有時間我會以案例為單位單獨(dú)分析。

剛剛把設(shè)置菜單這個東西引出來了，那菜單掉出來了要怎么收回去？是按返回鍵還是按確定鍵？要不要保存當(dāng)前更改？遵循“從哪兒來回哪兒去”這個原則的時候，是回到上一個半選中狀態(tài)還是標(biāo)記狀態(tài)？這就引出了下一個大問題：遙控器的常用按鍵應(yīng)該有的合理功能。

作者：@卜卜胡蘿卜1992

原文地址：http://www.uisdc.com/smart-tv-ux-focus