<option id="uausy"></option>
  • <li id="uausy"></li>
  • array(23) {
      ["id"] => string(2) "96"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(1) "0"
      ["name"] => string(6) "服務"
      ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "service"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_dingzhi.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
      ["son"] => array(9) {
        [0] => array(22) {
          ["id"] => string(3) "187"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "小程序開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能,提前布局微信新生態,搶占第一波紅利"
          ["pdir"] => string(0) ""
          ["dir"] => string(6) "wechat"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
            ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
            ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發,專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_xcx.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "0"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "1"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [1] => array(22) {
          ["id"] => string(3) "199"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "APP開發"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "APP"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
            ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_app.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "1"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [2] => array(22) {
          ["id"] => string(3) "244"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "快抖霸屏"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "kuaidou"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商!"
            ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
            ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(20) "show_page_douyin.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "2"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(27) "需要短視頻推廣排名"
          ["modelname"] => NULL
        }
        [3] => array(22) {
          ["id"] => string(3) "207"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(14) "AI智能名片"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(2) "ai"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
            ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
            ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(16) "show_page_ai.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "3"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [4] => array(22) {
          ["id"] => string(3) "201"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "版權登記"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "copyright"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_copyright.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "4"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [5] => array(22) {
          ["id"] => string(3) "203"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "商標注冊"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(9) "trademark"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
            ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
            ["meta_description"] => string(182) "「源知果」西安提供代理版權登記,代理商標注冊,代理專利申請,代理企業貫標,代理高新技術企業認定的服務;咨詢電話:13325455411。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(23) "show_page_trademark.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "5"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [6] => array(22) {
          ["id"] => string(3) "205"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(12) "網站建設"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
          ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
          ["pdir"] => string(0) ""
          ["dir"] => string(7) "website"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
            ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
            ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(21) "show_page_website.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "6"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [7] => array(22) {
          ["id"] => string(3) "208"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "2"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(15) "云服務平臺"
          ["thumb"] => string(0) ""
          ["image"] => string(0) ""
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(0) ""
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(0)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(0)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(0) ""
            ["meta_keywords"] => string(0) ""
            ["meta_description"] => string(0) ""
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(0) ""
            ["formid"] => string(0) ""
            ["url"] => string(21) "http://www.qulvkj.com"
            ["target"] => string(6) "_blank"
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "7"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(0) ""
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
        [8] => array(22) {
          ["id"] => string(3) "202"
          ["siteid"] => string(1) "1"
          ["type"] => string(1) "1"
          ["m_id"] => string(1) "0"
          ["p_id"] => string(2) "96"
          ["name"] => string(9) "SEO優化"
          ["thumb"] => string(0) ""
          ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
          ["desc"] => string(0) ""
          ["pdir"] => string(0) ""
          ["dir"] => string(3) "seo"
          ["url"] => string(0) ""
          ["setting"] => array(15) {
            ["is_html"] => int(1)
            ["content_is_html"] => int(0)
            ["urlrule"] => int(1)
            ["contenturlrule"] => int(0)
            ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
            ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
            ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
            ["category_template"] => string(0) ""
            ["list_template"] => string(0) ""
            ["show_template"] => string(17) "show_page_seo.tpl"
            ["formid"] => string(0) ""
            ["url"] => string(0) ""
            ["target"] => string(0) ""
            ["pri_grade_visit"] => array(0) {
            }
            ["pri_grade_add"] => array(0) {
            }
          }
          ["order"] => string(1) "8"
          ["sethtml"] => string(1) "0"
          ["stat"] => string(1) "2"
          ["flowid"] => string(1) "0"
          ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
          ["page_num"] => string(1) "0"
          ["wxstat"] => string(1) "0"
          ["scope"] => string(0) ""
          ["modelname"] => NULL
        }
      }
    }
    
    				
    當前位置: 首頁 > 售后 > 藝源智庫
    網易設計師:電視交互設計的基礎知識科普
    時間:2019-08-30 10:09:32
    文章發布:李陽
    原創作者:未知
    來源:互聯網

    在過去一年多的時間里,我有幸參與了電視端大屏幕的項目。在不斷的嘗試、探索和設計中,也收獲了一些關于電視端的設計經驗,因此將這些「電視交互設計的一些事」分享出來,共同探討電視端的設計。


    一. 硬件+遠距離操控——基本交互

    基于桌面資料研究以及設計經驗,總結了基本交互主要包含以下幾個關鍵內容:遙控器輸入、導航和菜單、信息展現、控件擺放和焦點狀態。


    二. 遙控器輸入

    當我們用手指快速便捷地在手機屏幕上點擊或滑動時,主流電視大屏及應用的操作還是使用遙控器進行操作。而市面上不同電視生產商生產的遙控器也有著不同的造型和按鍵數量,如下圖,分別展示了蘋果、谷歌、小米、樂視和中興機頂盒的遙控器。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 不同廠商的遙控器

    盡管有著千奇百怪的造型和按鍵數量,但幾乎全部的遙控器都有幾個相同的按鍵:上、下、左、右、返回鍵和OK鍵。它們也構成了遙控器輸入的基本交互方式,通過「上下左右鍵」移動焦點位置,選中界面元素,按「OK鍵」進行相關操作,按「返回鍵」返回。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 遙控器的基本按鍵

    而上圖中還有一些按鍵,如數字鍵、菜單鍵,有些遙控器是沒有它們的。這里強調下「菜單鍵」,比如之前的一個設計,將不常用的操作隱藏到菜單鍵中,當用戶按菜單鍵時再喚出操作(如安卓端的“長按”,iOS端的“左滑”等)。后來,才發現并不是所有遙控器都有該按鍵,只能在后續版本中迭代優化。因此,在設計之前,不妨研究一下你的輸入硬件設備,避免因「刻板印象」造成不必要的坑。

    遙控器輸入的特性決定了用戶在輸入時的效率和便捷程度都大打折扣,因此,在這樣的局限下,設計師只能通過各種不同的方式來盡量減弱這種不便捷。

    1. 減少用戶輸入

    能不讓用戶輸入就不輸入,盡量只讓用戶去做「選擇型」輸入,避免大量「文字型」輸入。比如電視上的搜索功能中,及時聯想、熱搜詞就變得極為重要,如下圖右圖所示。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 鍵盤輸入的優化

    2. 優化輸入模式

    結合項目情況,去嘗試優化輸入模式。比如充分利用遙控器數字鍵輸入,重新設計鍵盤以減少用戶操作,如上圖左圖所示。

    3. 將輸入轉移

    越來越多的產品開始將一些輸入轉移并引導到手機端進行操作,甚至將手機端直接做為遙控器。比如常見的掃碼登錄和TV助手類APP。輸入轉移能大大提升用戶操作效率,但設計時還是要結合具體場景,避免用戶過多的在手機和遙控器間切換。

    4. 創新的輸入方式

    隨著各種技術的發展,在未來,電視端也會有越來越多的輸入方式,而不僅限于遙控器輸入。如智能語音輸入,而我們也需要了解這些新技術,才能幫助我們不斷的創新并給用戶帶來優秀的體驗。


    三. 導航和菜單

    電視端的導航和菜單大多數和手機端、PC端是類似的,但因遙控器輸入的特性或多或少的有些差異,主要分為以下幾類。

    1. 十字

    十字導航在國內的產品中比較少見,但因它的主導航和二級導航同時展開,能與十字方向鍵完美契合,用戶可通過方向鍵在主導航和二級導航之間以高效的方式切換,如下圖所示。但它最多展現2級菜單,即縱向菜單和橫向菜單,又浪費了大量界面空白,因此針對國內大而全的產品而言,往往不是特別適用。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 十字導航

    2. 磁貼

    磁貼廣泛應用于各種電視應用產品,一般包含主導航和二級磁貼。往往二級磁貼的展現能使信息更加扁平、直觀及可視化,且相比于十字導航,操作的方向不會受到限制。但往往焦點從磁貼移回到左側/上側導航需要更多的操作成本,如下圖所示。磁貼的信息展現能夠充分利用界面空間,并把信息前置,因此,對很多內容型產品而言,磁貼可以很好的適用內容露出,吸引用戶進入。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 磁貼信息展示

    3. Tab

    廣泛應用于手機端和PC端,當然在電視端中也經常使用,往往起到一級導航的作用,在告知用戶所處位置的同時,很好的引導用戶進行模塊間的切換,如下圖所示。然而,Tab導航也有一些基本的設計要求,比如盡量不使用多層Tab套用,即使不得已套用也需盡量保證表現形式不同。另外,在「焦點」的章節,也還會提到Tab切換時的加載問題。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ Tab導航

    4. 列表

    列表也是手機端常用的菜單展現形式,在電視端同樣適用。如電視直播類產品,主功能就利用了多層列表套用的展現形式,詳見下圖所示。而在電視端,列表的樣式也是多種多樣的,如純文字列表(可配按鈕)、圖文列表(可配按鈕)、展示型列表(不可操作)、橫向列表(選集列表)等。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 圖文列表和展示型列表

    5. 其他

    電視產品上常用的菜單和導航模式一般都可以總結為以上4種,當然還有一些其他的方式。隨著用戶多設備的使用,越來越多的手機端和PC端的設計模式開始在電視上出現。而更多的產品界面因其復雜的功能無法只使用1種菜單和導航模式,往往是混合型設計,如下圖所示。不過,無論使用何種導航和菜單類型,電視大屏幕的菜單和導航的設計目標終歸是用戶可以快速定位,并且能夠預測出操作結果。因此,靈活使用導航和菜單,使用戶不會迷失在功能繁多的界面信息中就尤為重要。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 其他類型的導航和菜單


    四. 信息展現

    在前面的文字中,我在「電視」這個詞后面都緊跟了「大屏」這個詞,電視的屏幕是比PC還要大的屏幕。而用戶也因為如此大的屏幕,往往是坐在兩三米之外。因此,電視端的信息設計有著兩個顯著的特質,為大屏幕而設計和為遠距離而設計,有著以下幾個注意事項。

    1. 重視信息的識別性和簡潔易懂

    文字、圖標和按鈕,乃至toast提示,在電視端的識別性問題比手機和PC端更為凸顯。因為遠距離、大屏幕,加上電視本身的休閑屬性,使得用戶的注意力較為分散,因此,界面中的信息和元素就需要適當放大,至少保證用戶能夠在兩三米之外能清晰看到,如下圖所示。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 信息識別案例

    2. 提前露出信息和多露出點信息

    在「遙控器輸入」章節中有提到,提前露出信息能夠在一定程度上減少用戶輸入,并在產品層面吸引用戶進入。不過,和手機端設計類似,還是需要甄別哪些信息需要提前露出、怎么露出以及露出信息后對產品穩定性和性能的影響。這些都需要基于產品特點,并與產品、視覺和開發共同協商確定。而「多露出點信息」卻相對容易理解,主要是告知用戶右邊/下邊「還有一些內容,快去看看」,如下圖所示。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 信息露出案例

    3. 避免過多無模塊信息的展示

    相比于手機端,因屏幕較大,與PC端類似,往往需將屏幕劃分為多個排列整齊的小屏幕來進行設計,即模塊化、區域化的設計信息展現。通過這種方式,可以使信息布局更為規整,用戶不容易迷失在繁雜的信息中,如下圖所示。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 信息模塊化案例


    五. 控件位置

    控件的位置問題是初期開始電視產品設計時非常容易犯的錯誤,如下圖所示。左圖中的「添加股票」按鈕,當已添加的股票過多時,可能會看不到該按鈕,或需用戶按很多下才能使焦點移動到「添加股票」。右圖中的文字瀏覽,完全不知道如何瀏覽,也不知道如何將焦點從文字移動到「查看票種」按鈕。這兩個案例闡述了按鈕的位置導致按鈕丟失或操作效率較低。電視端文字閱讀也得遵守焦點瀏覽原則,如每行1個焦點或整篇1個焦點,若是后者,就得保證可見范圍內文字已展示全。因此,在電視大屏中放置交互控件,需充分考慮是否符合電視端的使用方式以及用戶的操作效率。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 控件位置案例


    六. 焦點狀態

    前文提到過很多次的「焦點」,它其實是電視大屏用戶體驗的第一要素,而在交互說明中常出現的也是「焦點怎么樣了」。無論是交互還是視覺,在初期接觸電視產品設計時,可能都會因為「焦點」的設計失誤引發用戶體驗問題,比如:焦點的移動順序不一致(從哪里來回到哪里去,焦點在界面中亂跳)使用戶認知錯亂。焦點不夠醒目或樣式不統一使用戶無法找到焦點等,如下圖所示。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 不統一的焦點樣式

    電視端焦點也是有著各種不同的狀態的,如下圖所示?!附裹c狀態」一般采用「描邊、放大、高亮等」方式使其明顯,而「按下狀態」可能不一定有,或者是和其他幾個狀態相同。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 焦點狀態種類

    可能需要簡單講述一下「標記狀態」和「半選中狀態」?!笜擞洜顟B」在PC端和手機端也非常常見,比如告知用戶所在位置在哪里的Tab標記。而「半選中狀態」是「焦點狀態」的一種情況,即移動到某個焦點后,不進行加載或觸發操作,需按「OK鍵」才觸發,如下圖所示。這種狀態在早期電視盒子性能不足,在Tab切換時經常需要使用,因為如果直接切換焦點時就加載,可能會造成卡頓。

    網易設計師:電視交互設計的基礎知識科普-藝源科技

    △ 標記狀態和半選中狀態案例


    七. 結語

    我總結和歸納的這些基本知識和注意事項,雖然它們能夠幫助我們快速了解電視大屏的基本交互知識,避免一些不必要的坑。但還遠遠不夠,更多的是需要在實際參與項目中快速學習、快速應用。因此,之后我將會基于我參與的項目再次進行電視大屏的實戰總結,歡迎下次再與大家一同交流和成長。

    小程序開發
    標簽: 交互設計 智能電視 用戶體驗 電視端設計 經驗分享
    *版權申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉載侵犯您的版權,請及時聯系我們刪除!
    為您推薦
    最新文章
    掃碼加他,免費獲取方案
    久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区
    <option id="uausy"></option>
  • <li id="uausy"></li>