您現在的位置是:電腦技術吧?>? 基礎知識 ??>??了解規則,基本規則??>??正文詳情

了解規則,基本規則

貝美麗2019-11-15 05:11:02 人圍觀
簡介談規則如果你仔細想想,我們正處在一個有趣的大屏幕UI設計階段。蘋果電視于2015年推出的是第四代產品,但其他類似產品仍處于第一代或早期階段。記者會上吹滅的牛市終于得到了解

仔細想想,你會發現我們正處于大屏UI設計的一個有趣的階段。

2015年推出的Apple TV 已經是第四代產品了,但是其他的同類型產品尚且處于第一代或者說早期階段。

發布會上吹出的牛逼最終還是要經過市場驗證,而實際狀況比起大家預期的結果,更加復雜。

到底要如何給Apple TV設計APP呢?今天的文章,我將為大家分享一下我們為丹麥最大的內容供應商設計APP的經驗和相關的資源,也許能幫大家一窺究竟。

  基本情況  諸如Netflix、Youtube、HBO、Hulu和Plex 等主要的媒體平臺,在tvOS 的App Store 中都只有1.0的版本。

它們絕大多數都同FireTV、SmartTV等電視中所提供的解決方案非常類似,這些客戶端看起來像是老版本的客戶端和新系統規范的揉合體。

在很大程度上,我們正處于初級階段,現在沒人確知在tvOS上應當如何設計APP。

決策者們正在力圖保持他們各自平臺的特性的同時,兼顧tvOS上的設計規則。

  相比之下,內容創作者是更大的群體,他們現在并不知道是否要參與到平臺的設計中來,但是如何決定參與的話,他們需要知道怎么去做。

他們對于已經固化的平臺并沒有決策權,同時他們會將新平臺視作為嘗試新手法和新思路的重要渠道,一個新的試驗田。

如果你打算在Apple TV的基礎上搭建新的東西,尋求新的方案,那么你有必要讀下去。

  輕松入門

  相比于在其他的設備開發其他平臺的系統而言,在Apple TV上進行設計和開發是一件簡單的事情。

因為只有一個分辨率,單一設備。

你所需要設計的界面分辨率統一為19201080,并且只需要為唯一的終端調試程序。

對于今天的設計師和開發者而言,這無疑是一件奢侈的事情。

如果你是設計師,打開Photoshop新建一個標準1080P的畫布就是你需要做的全部,沒有視網膜,不需要考慮其他的比例。

一個23英寸的外接顯示器可以顯示你所設計的全部內容。

  焦點引擎  如果你想在Apple TV 上創造優秀的用戶體驗的話,你手下你需要適應焦點引擎這個新概念,并且明白為什么會始終保持聚焦。

不同于在iOS和桌面端上常見的點擊、觸摸的操作方式,Apple TV上你需要通過滑動不同的內容區塊,并且始終有區塊是被選中的。

所以你并不能直接控制整個界面或者直接選取你想要的,而是需要通過先選定某個特定的預設置區塊,然后進行更細致的操作。

下面的許多設計和概念都是基于這一基本設定來進行推斷和發展的。

  露出屏外內容

  你需要顯示屏外內容的10%~20%的部分,讓用戶明白還有更多的內容可供瀏覽。

  水平導航更輕松

  在Apple TV上,水平滾動給人的感覺比垂直導航更加輕松順暢,從硬件和實際手勢操作上,水平操作都有著先天的便捷性和和諧性,在遙控器上進行水平掃動比上下滑動要方便得多。

而屏幕上界面的變動無疑需要同遙控器上的手勢對應起來,所以使用水平導航是更直覺有效的設計。

  將按鈕和內容清晰地區分開

  將內容和可導航可交互的操作控件區分開來是用戶同界面溝通的重要基礎,想必你也不喜歡用戶驚喜地發現某個元素居然是可交互的控件。

  謹慎安放控件

  只有當內容可控件都被正確安置,用戶才會感到舒適。

比如很長的一個文字段落,而文字段落用戶又不能直接選取,可交互的按鈕又在段落底部,這樣的設計就是相當失敗的。

從某種程度上而言,tvOS中,用戶就像樹林中的人猿泰山,需要從一棵樹上跳到另外一棵樹上前進,但是跳到下一棵樹的前提是他必須看到下一棵樹。

所以,用戶可操作的按鈕,不要隱藏在用戶開始就不可見的段落底部,這樣太容易讓人感到迷惑了。

  保持明顯

  確保那些被聚焦的區塊看起來真的像是被放到聚光燈下一樣。

那些微妙的設計在此處并不適用,你應當讓被聚焦的地方看起來閃亮、變大、夸張,這個時候不應該讓這些內容保持沉默。

  為遠距離瀏覽而設計

  和我們日常熟悉的手機、電腦的使用場景不一樣,電視的屏幕并不在我們觸手可及的地方,通常它都是遠在幾米之外。

物理層面上的遠離只是一方面,它同時意味著我們無法觸摸,不再具備掌控感。

所以,請確保電視中的內容和控件是可以在整個空間內,都可以被清晰閱讀和操作的。

這基本上就意味著,字體要更大,更容易操控,這樣意味著布局要更加規整,動效更加明顯清晰,并且更具有引導性。

  減少文字輸入  在電視上進行文字輸入無疑是低效的,用戶操作也極其費勁。

最好是考慮到使用其他的硬件設備來進行登錄、輸入等復雜的輸入操作。

  讓應用更生動  下面的圖片中所展示的是標準的Apple TV中的UI元素,并且此刻整套UI界面還在不斷被完善。

不過,我更想在這個基礎上加入更多的個人風格。

并不需要復雜的設計,想要讓應用更加生動,小動效,交互反饋,視差等設計都能達成目的。

下面是我的一些成功經驗。

  讓數據呼吸

  剛剛打開某個界面的時候,讓進度條逐步填滿直到接近某個特定的值,這樣的設計只需要在原有界面基礎上加一層就可以搞定,看起來很簡單,但是很有效。

  讓圖片動起來

  讓之前靜態的圖片,以緩慢加載的動畫的形式動起來,這樣用戶的視覺會更好地聚焦到這些聚焦元素之上,起到引導操作的作用。

  直接呈現內容

  讓聚焦區域內的流媒體內容展現在用戶面前,這樣可以增加信息的透明度,從而讓用戶更好的選擇。

  資源  為了能能更好的設計Apple TV的UI界面,我制作了一個設計模板,并上傳到了appicontemplate.com 供大家下載使用。

  當然,你還需要了解蘋果官方對于tvOS的界面設計有著怎樣的要求,戳這里看蘋果官方的HIG。

  更好的客廳瀏覽體驗  未來的客廳娛樂體驗,應該就落在電視上了,我們也需要為此而設計和開發。

想讓電視擁有好的體驗并不是一件簡單的事情,想必大家已經從諸多電視盒子上體驗到了這一點。

我們曾經熟悉的電視已經發生改變,而我們適應的手機、平板和電腦和新的電視還有著巨大的差別,我們需要忘掉之前熟悉的模式,從頭開始。

塑造下一代的電視體驗,是我們需要做的事情,這很重要。

版權聲明:本文由 貝美麗 整理編輯。

原標題:規則,運用規則

轉載注明出處:http://www.dn9ww09s.icu/basics/12395.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • xp開機黑屏,xp黑屏如何解決

    xp開機黑屏,xp黑屏如何解決 相關圖片xp系統黑屏如何解決近年來,微軟黑屏門事件成為互聯網上的熱門話題。微軟在國內市場推出的Windows XP專業版和officexp、Office 2003、Office 2007官xp開機黑屏進不去系統...

  • Flash教程,Flash動畫實例教程

    Flash教程,Flash動畫實例教程 相關圖片Flash動畫設計一。首先,創建一個新的flash文檔,修改文檔大小為,寬度為500,高度為350,并將背景色設置為××00666。然后制作所需的組件:制作滾動:點擊插入菜單選擇Flash動畫設計與...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載本文主要討論在Windows XP操作系統中,當C盤空間不足1時,如何增加C盤的空間。打開我的電腦-工具-文件夾選項-查看-顯示所有文件和文件夾選項前檢查-確定XP免費升級win10...

  • 一什么山脈,山脈

    一什么山脈,山脈 相關圖片山脈走向在畫卡通石頭的時候,用flash制作卡通動畫和MTV時,石頭也經常出現。這個例子將教你如何畫石頭。示例效果如圖6-1圖6-1最終效果圖制作時間:5分鐘學習難度:世界山脈...

  • 高級選項菜單,開機高級選項菜單

    高級選項菜單,開機高級選項菜單 相關圖片windows7高級選項菜單當裝有XP系統的計算機無法正常啟動時,可以按F8鍵進入“高級選項”菜單,從中可以選擇不同的模式啟動windowsxp。所以這里有一個高級選項菜單表(不破壞數據)高...

  • xp系統的萬能開機密碼,xp系統啟動密碼設置

    xp系統的萬能開機密碼,xp系統啟動密碼設置 相關圖片windowsxp設置開機密碼要求如果你的電腦里有很多重要的數據不能外傳,你會用什么方法來保證這些數據的安全?以下是XP如何設置開機密碼以確保XP系統1中的數據安全。登錄到您的XP系統...

  • 在切片面板中,ai中切片怎么使用

    在切片面板中,ai中切片怎么使用 相關圖片術中無快速切片創建HTML切片HTML切片指定瀏覽器中出現純HTML文本的區域。HTML切片不導出圖像,它們導出由切片定義的表格單元格中顯示的HTML文本如果要快速更新網站中python中切片的理解...

  • Windows XP安裝,windows xp怎么安裝

    Windows XP安裝,windows xp怎么安裝 相關圖片win7和xp雙系統安裝《驅動程序之家》[原件]作者:尚雯Q編輯:尚雯Q 2007-08-09 09 09:38:57正在加載[delivery]bink.nu最近獲得了WindowsWindows XP sp3...

  • if函數標記顏色,excel標記顏色用函數

    if函數標記顏色,excel標記顏色用函數 相關圖片excel怎么標記重復項實際上需要編寫一個asp.net的clear HTML標記函數,讓我們一起學習,相信我們可以理解下面的引用片段://clear的HTML函數publicstat查找類函數...

  • xp開機黑屏,xp黑屏如何解決

    xp開機黑屏,xp黑屏如何解決 相關圖片xp系統黑屏如何解決一、微軟黑屏WGA盜版驗證微軟中國10月15日正式宣布,從10月20日起,將同時推出兩個重要更新,分別使用XP專業盜版系統和Office XP、Office 2xp開機黑屏進不去系統...

熱評文章

  • 安全生產十大隱患,校園安全十大隱患

    安全生產十大隱患,校園安全十大隱患 相關圖片中國的十大健康隱患提高系統安全性涉及多個方面,其中之一就是關閉不必要的服務。盡管微軟的Windows XP不是一個網絡操作系統,但它的許多服務在默認情況下是開放的。對于一個清醒...

  • 去除黑頭的有效方法,如何去除黑頭的方法

    去除黑頭的有效方法,如何去除黑頭的方法 相關圖片如何去除眼袋的方法你還擔心每次打開XP系統時都需要輸入登錄密碼嗎?你還擔心忘記XP登錄密碼嗎?下面是如何刪除XP登錄密碼1。如果要刪除XP登錄密碼,首先需要登錄XP系統,然后單擊...

  • 編輯器,ueditor編輯器

    編輯器,ueditor編輯器 相關圖片html編輯器HtmlArea是純JS Html的編輯器,理論上可以套在任何語言平臺上,經過實際使用可以和Asp.Net 2.0 Ajax 很好的結合,現在本博客系統已經135編輯器...

  • 啊V,V.A

    啊V,V.A 相關圖片V10Ghostxp SP3純版| Ghostxp SP3電腦之家特別版v1.0==================================丅V...

  • 鼠標上一直有個圈圈,鼠標圈圈一直閃

    鼠標上一直有個圈圈,鼠標圈圈一直閃 相關圖片鼠標箭頭一直轉圈本例介紹了利用flash制作一個簡單的光圈動畫效果,主要是制作鼠標跟隨效果,適合新手朋友學習。效果演示:一開始不要覺得這對你很難。這是特效中最簡單的一個。...

  • 中關村 裝機,裝機中心

    中關村 裝機,裝機中心 相關圖片電腦裝機=================================================[2013xp installation] Zhongguan裝機之家...

  • windows xp系統還原,windows xp啟動不了

    windows xp系統還原,windows xp啟動不了 相關圖片xpsp3最新的Widnows XP SP3破解補丁(可以通過正版驗證)。如果您尚未下載正式版本的Windows XP SP3 Vol,請單擊此處下載下載地址:單擊“我”windows xp密鑰...

  • 晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠

    晶瑩剔透還是晶瑩剔透,晶瑩剔透的露珠 相關圖片晶瑩剔透的水珠像什么本教程主要使用flash制作一個清晰的沙漏流動畫教程。效果很美。讓我們一起學習吧,我的朋友讓我們來看看效果圖。這是教程晶瑩剔透的反義詞...

  • xp的sp3補丁,xpsp3

    xp的sp3補丁,xpsp3 相關圖片xp sp3補丁包官方下載最新的Windows XP SP3正版驗證修補程序,Windows XP SP3破解修補程序注冊機下載如果您仍在使用XP,請盡快升級到SP3xpsp3簡體中文版...

  • 微信怎么制作相冊,微信相冊制作

    微信怎么制作相冊,微信相冊制作 相關圖片微信相冊怎么制作步驟隨著數碼相機的普及,每次旅行歸來,都會面對上百張照片,而處理效率仍然是一個非常重要的因素。Acdsee3.1(完整版)仍然是我最常用的照片查看/存檔工具。以...

關注微信

变脸官网查询