您現在的位置是:電腦技術吧?>? 組裝維修 ??>??智能多焦點老花眼鏡,智能??>??正文詳情

智能多焦點老花眼鏡,智能

牽琴音2019-11-15 21:00:36 人圍觀
簡介今日網絡熱點作為一個新興產業,智能電視行業的用戶體驗知識匱乏。今天,請您與@Bu carrot 1992分享一些電視用戶體驗的實用設計經驗和基礎知識,他負責智能電視應用程序文件分享

智能電視作為新興行業,國內相關的用戶體驗知識少得可憐。

今天有請負責智能電視APP設計一年半的@卜卜胡蘿卜1992 給大家分享一些實用的設計經驗,科普電視用戶體驗的基礎知識。

  入智能電視行業一年半,先后在傳統電視品牌和互聯網電視新秀品牌的用戶體驗部門工作,具體工作是電視端App,Launcher的交互和視覺設計,手機端電視相關App設計。

  兩年前作為電視UI的新人,開始入手學習時發現關于電視的交互和UI教程甚少,相關文章也是少之又少。

兩年快過去啦,各大設計網站上搜一搜智能電視UI,竟然還是少的可憐的那一點點東西。

各大做電視端的師哥師姐們,你們咋那么吝惜筆墨膩?能不能寫寫教程教教偶們新入行的小鮮肉?好啦,不廢話啦,如今我已然不再是什么小鮮肉,只希望能把工作兩年來學到的東西都記錄下來,如果哪天被某個想入行電視UI的鮮肉看見了,希望能有所幫助。

  這篇文章先講一下電視用戶體驗第一元素:焦點,程序里面叫Focus。

  移動端頁面有可點擊內容和不可點擊內容,相應的,到電視上,我們有可獲取焦點內容和不可獲取焦點內容。

(一般電視上的內容都是可以獲取焦點的,只有部分提示性文字沒有焦點屬性)先來看兩張圖

  這是電視圈兒內大名鼎鼎的當貝市場的首頁,頂部標簽焦點和內容焦點的樣式,這也是當前大部分電視端App焦點的樣式。

這種焦點簡單,美觀,醒目。

  下面我們說一下電視焦點視覺設計第一個要注意的問題:焦點在哪兒?  設計原則:焦點要醒目  建議方法:使用描邊,外發光,放大,或其他動畫來加強焦點視覺效果。

當然也不是越夸張越好,要拿捏得當,適合的才最好。

  電視屏幕上的焦點也是用戶的視覺落點,用戶找了滿屏也不知道自己在哪兒的感覺是很崩潰的。

不知道焦點在哪兒,就沒法預知自己按下遙控器后會怎樣。

我們來看一張焦點很微弱的圖:

  自從小米首先在電視上使用時尚畫報做屏保后,一批批屏保圖片類電視app出現,上圖為一款叫風迷style的app首次使用設置界面。

左圖,深色和淺色的按鈕,哪個是焦點?假設焦點在跳過上,而用戶卻以為焦點是全選,按下遙控器跳過了此界面,用戶肯定會很吃驚誒,我按了什么啊!?如果下一頁不支持返回重新編輯,那用戶會是十分崩潰的。

這個app的焦點都不太明顯,看右圖,沒有放大也沒有外發光也沒有動態輔助,不過還好,還是可以分辨的清的。

  第二個要注意的問題:焦點的樣式要統一么?  設計原則:樣式盡量統一,這樣才感覺都是一家人嘛~  建議方法:外發光選框焦點,替換顏色焦點盡量不要混著使用。

動畫焦點也不要有很多動畫樣式,盡量統一。

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

  蝦米音樂的搜索按鈕焦點樣式,和QQ音樂的搜索按鈕焦點樣式,哪個更直接明了一些?顯然是QQ音樂啦,看來鵝廠對電視App的焦點也是研究過的啊,哈哈。

另外我要說一下互聯網電視新秀暴風TV里面一個頁面的焦點

  找到焦點了嘛?沒錯,焦點在左下角的未登錄那里,這是一個動畫效果,暴風TV的UI使用了很多柔和的微動畫,營造了不錯的氛圍感。

小米電視UI上也有很多拿捏到位動畫,樂視就不要提了,樂視剛出來時候在那個年代真的挺好看的,可是這幾年怎么就沒有設計創新呢,感覺它的UI都被時代拋棄了。

  第三個要注意的問題:焦點路徑的記憶  這個問題用純文字比較難表達清楚,先看下圖:

  再拿多米音樂和QQ音樂舉個例子。

多米音樂中,首次使用app時,焦點在位置1按遙控器右鍵,焦點會落到位置2,在位置2按下鍵,焦點落到位置3,在位置3按左鍵,焦點會回到位置1,此時再在位置一按右鍵,焦點會落在位置3,而不是首次使用時的位置2啦。

  QQ音樂的方式則不同,不管是不是第一次使用,焦點在位置1時按下鍵,則焦點始終落在焦點2。

QQ的方式是先上后下,先左后右的順序。

而蝦米則會記住焦點上一步所在的位置,完全遵從著從哪兒來,回哪兒去的原則。

蝦米音樂在這點做的要比QQ音樂好,因為記住用戶上一步的操作總是體貼的。

  設計原則:從哪兒來,回哪兒去  建議方法:記住用戶上一步的操作(即上一步焦點所在位置),再次執行同一動作的時候使用上次記住的方式。

  這個方法不僅僅適用于焦點移動,也適用于頁面切換。

在A界面上的位置1進入到B界面,那從B界面回到A界面時,焦點還應該在位置1。

可能你會覺得,一個小小焦點位置,有必要糾結那么多嘛?對于電視交互,還真的需要考慮這么多,你不寫清楚,程序員就不知道該怎么做,有的會亂搞,或直接忽視這個問題,造成差的用戶體驗。

當然有經驗的程序員哥哥是會自動完善你的交互稿的,這些程序員哥哥還經常提出交互中的不完善之處,簡直就是交互小幫手。

當然作為交互設計師,咱不能指望程序員哥哥啊,萬一他也是個菜鳥級的鮮肉腫么辦!  第四個要注意的問題:獲取焦點即執行 VS 獲取焦點后按確認鍵再執行  電視上的元素應該有五個狀態:1.正常狀態 2.焦點狀態 3.按下狀態 4.標記狀態 5.半選中狀態。

  其中半選中狀態是一個交互狀態,在視覺上與焦點狀態是相同的,半選中即焦點移動到相應內容但并不執行動作,需要再次按確認鍵才響應操作。

這種狀態常見于視頻播放或音頻播放界面的設置菜單里,所選內容要對當前界面執行更改的情況。

比如愛奇藝電視端視頻播放界面按菜單鍵調出選集菜單(下圖左),暴風TV影視庫里面按菜單鍵調出設置菜單(下圖右)

  圖左和圖右均有明顯標記狀態和半選中狀態,這兩個狀態從來都是成對出現。

半選中狀態是用戶即將進行的更改按鈕,而標記狀態,要對當前模式進行標記。

  半選中狀態在智能電視剛誕生的時候非常流行,各大廠商的Launcher界面上的頂部tab都采用半選中狀態,因為那時候技術限制,電視刷新頻率比較慢,若是移動焦點則更改畫面,卡頓現象非常嚴重,所以電視界出現了一個半選中狀態,用戶隨便移動焦點卻不執行操作(實際上很多用戶無聊的時候會移動焦點玩兒),要到想要的位置按確定再執行操作。

這種用戶體驗是十分不流暢的,所以現在的互聯網電視,好一點的app,都是遵循所見即所得原則,焦點移過去就執行更改(實際上是有200ms的延遲的哦,程序員哥哥說200ms也不會被用戶察覺,是程序界通用的延遲執行時間)。

  也有一些情況,是必須執行半選中狀態的,比如選擇劇集

  這種場景,你肯定不希望焦點每動一次畫面都跟著切換,那樣簡直太不流暢了,要是網速不好,簡直是要崩潰的體驗。

  其實半選中狀態和選中狀態也沒有絕對的區分,只是我覺得這樣描述在工作中和人溝通起來比較容易,如果嚴格追求字面意思我這么說是不嚴謹的。

主要大家知道電視存在這么一種特殊狀態就好,類似于電腦上的鼠標懸停效果吧,在移動端上我并沒想到對應效果。

關于獲取焦點即執行還是獲取焦點按確定后再執行,真的是要具體情況具體分析,主要是東西跑在電視上,操作得流暢啊!所以這里就不寫設計原則和建議方法,筆者能力有限也怕寫不明白。

有時間我會以案例為單位單獨分析。

  剛剛把設置菜單這個東西引出來了,那菜單掉出來了要怎么收回去?是按返回鍵還是按確定鍵?要不要保存當前更改?遵循從哪兒來回哪兒去這個原則的時候,是回到上一個半選中狀態還是標記狀態?這就引出了下一個大問題:遙控器的常用按鍵應該有的合理功能。

版權聲明:本文由 牽琴音 整理編輯。

原標題:智能多焦點眼鏡,焦點智能門鎖

轉載注明出處:http://www.dn9ww09s.icu/assemble/12614.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • Touch是什么意思,Touch

    Touch是什么意思,Touch 相關圖片蘋果touch是什么意思Force touch是3D touch的前身,是蘋果的一種觸摸傳感技術。它用于蘋果手表、新款MacBook和新款MacBook Pro。用戶使用武力touch是什么手機...

  • 努比亞X,努比亞X2

    努比亞X,努比亞X2 相關圖片努比亞root努比亞新旗艦車型努比亞x于10月31日正式上市。與其他全屏幕旗艦機型相比,努比亞X采用了不同的方案,即目前手機市場上有很多全面的屏幕實現方案,從劉海屏幕到升降式努...

  • 設計師用APP,設計師經常看的app

    設計師用APP,設計師經常看的app 相關圖片設計師交流的app工欲善其事,必先利其器。今天,我們將為我們的設計師提供24款精選軟件。我們推薦來自大公司、捷步達康、ustwo、okfocus等團隊的頂尖設計師,看看他們通常使設計師必...

  • steam錯誤代碼-100解決,steam錯誤代碼-21解決

    steam錯誤代碼-100解決,steam錯誤代碼-21解決 相關圖片steam錯誤代碼137很多人通過steam游戲平臺購買和下載國外游戲,但一些用戶在連接steam時出現錯誤代碼103。如何解決steam的103錯誤碼?一。打開蒸汽設定界面,選擇steam老是錯誤代碼,怎么回...

  • 上下文菜單,pyqt5上下文菜單

    上下文菜單,pyqt5上下文菜單 相關圖片mac上下文菜單提問:第六期網絡雜志《風投知識庫》上有一篇文章。在VC6中,CHTMLVIEW用于在對話框控件中顯示HTML文件。許多讀者寫道他們非常喜歡這個功能。但它的優點是顯示候選項上...

  • icloud鑰匙串打開不了,打開icloud鑰匙串

    icloud鑰匙串打開不了,打開icloud鑰匙串 相關圖片icloud鑰匙串要不要開啟現在你需要一個密碼才能登錄到每個平臺,以確保你的賬戶安全,但是密碼很簡單,賬戶不安全,密碼復雜且難以記住,所以icloud密鑰鏈可以使用什么是icloud密鑰...

  • 接口文檔怎么用,什么是接口文檔

    接口文檔怎么用,什么是接口文檔 相關圖片接口文檔示例問題:在使用活動輔助功能SDK的過程中,我從窗口的句柄獲取ihtmldocument2指針。有沒有辦法從ihtmldocument2指針獲取iwebbrowse開發接口文檔...

  • win10最流暢的版本,win10哪個版本打游戲好

    win10最流暢的版本,win10哪個版本打游戲好 相關圖片win10企業g版好用嗎win10有四個版本,包括家庭版、專業版、企業版和教育版。有些用戶不知道在專業版和企業版之間選擇哪一個。讓我們看看win10企業版和專業版企業版的區別vs企業版與...

  • 框架的HTML標簽是,框架的HTML標簽是什么

    框架的HTML標簽是,框架的HTML標簽是什么 相關圖片內聯框架的html標簽是【框架基本概念】首先,讓我們來看看右邊的圖片。我用這張照片來解釋。這樣,可能會更清楚,好嗎!我們可以看到右邊的窗口被分成三個框架:1、2和3。每個幀...

  • 家長幫App,家長app

    家長幫App,家長app 相關圖片家長幫app下載近年來,孩子們頻繁、大規模地使用父母的手機進行游戲和直播消費的現象越來越普遍。蘋果也因為這種情況引入了家長控制功能。其中之一就是利用iPhone的家長控制功能...

熱評文章

  • steam錯誤代碼-100解決,steam錯誤代碼-21解決

    steam錯誤代碼-100解決,steam錯誤代碼-21解決 相關圖片steam錯誤代碼137當你玩一些國外的游戲時,你通常需要使用游戲平臺steam。雖然國內使用不是很強大,但游戲資源相當豐富。可能是因為steam的服務器在國外,所以當用戶使用steasteam老是...

  • vbhtml,vb6解析html

    vbhtml,vb6解析html 相關圖片打開vbPrivate Sub Command1_Click()WebBrowser1.導航http://localhost/Timer1.Enabled=TrueEnvb net...

  • win7系統不兼容怎么辦,文件與windows7不兼容

    win7系統不兼容怎么辦,文件與windows7不兼容 相關圖片軟件與電腦系統不兼容當一些用戶安裝軟件或游戲時,他們將收到一條錯誤消息,說明此文件的版本與正在運行的Windows不兼容。在這種情況下,壓縮文件不兼容,或者安裝軟件不兼容。...

  • 壓縮袋怎么用,好用的壓縮解壓軟件

    壓縮袋怎么用,好用的壓縮解壓軟件 相關圖片壓縮面怎樣使用我不知道你是否用過苗條女孩。它特別用于壓縮HTML超文本文件和腳本文件。據說它的壓縮率已達到15%以上。我試過了。有些文件(大文件)的壓縮率實際上是50%。我比壓...

  • win10屏幕自定義分辨率,win10強制分辨率

    win10屏幕自定義分辨率,win10強制分辨率 相關圖片win10分辨率調不了如果您是win10用戶,當您發現桌面上的圖標太大或太小,或者桌面不夠清晰時,我們需要設置分辨率。如何設置win10分辨率?未知用戶可以一起了解win10 如何調整分辨率...

  • fastboot mode不動,fastboot mode

    fastboot mode不動,fastboot mode 相關圖片魅族fastbootmode不動Android手機最大的特點是可以自由刷卡,但仍存在一些困難和風險。例如,有些用戶在刷卡過程中打開FastBoot模式界面,然后就無法移動。在這種情況下我們該怎fastboo...

  • Java編程,g代碼編程詳解

    Java編程,g代碼編程詳解 相關圖片宏程序編程一百例隨著CSS的發展,CSS具有語義命名約定和CSS層的分離,這將有助于CSS的可擴展性、性能改進和代碼管理。在我之前的文章中討論的許多CSS問題可以通過使用合適的編程初...

  • round函數有什么用,函數round怎么用

    round函數有什么用,函數round怎么用 相關圖片rounddouble函數怎么用Round是一種函數,在多種編程語言中都很有用。在常用的辦公軟件Excel中,也有圓函數。在Excel中,round函數是一個基本函數,它根據指定的位數輸入值怎么用round函數...

  • 網頁設計未來趨勢,未來網頁設計的發展方向

    網頁設計未來趨勢,未來網頁設計的發展方向 相關圖片網頁設計發展前景如何@陳子目移動設備的大規模推廣應用,逐步增加了個人用戶和企業用戶對移動設備的依賴,這也使得相關技術企業和開發商近年來在B2B和B2C領域不斷加強技術支持。...

  • 華為mate10pro是曲屏么,麒麟970和驍龍710跑分

    華為mate10pro是曲屏么,麒麟970和驍龍710跑分 相關圖片驍龍710對應麒麟小龍710和麒麟970之間哪個最好?這是眾多Android手機用戶選擇其他品牌和華為的重要依據之一。對于小龍系列,我們會很清楚的。定位為中高端次旗艦機型的是CP麒麟970和...

關注微信

变脸官网查询