創新服務 技術發展 新聞專欄 使用者體驗 產業大事 關於我們


隨著技術的進步、網頁的改版,與使用者喜好、觀看設備與使用習慣的變遷,你我日常生活中常看的網頁與內容,其實不知不覺中也在改版進化中,不知道你發現了嗎?

i-on interactive, inc提供了一個簡單的小測試,讓使用者試試、究竟自己是否趕上了新時代的網站與介面的變化呢?

儘管該測驗僅有五小題,然而這些網站介面的變化與比較,卻都是源自於讀者與使用者的使用習慣與設備限制所致,以下一條一條的告訴你,在過去短短2到3年間,”你的行為”有甚麼不同了!

1. 網頁的設計:從寬幅變成長條狀設計
過去人類在上網瀏覽時,網頁設計師多由電腦螢幕寬度為出發,另外也調查得知使用者直觀感受且不願花過多力氣在捲動視窗內容,「既然我的螢幕這麼大,為什麼不一次看完?」,因此過去網頁版型設計走寬幅、一到兩個頁面長度可以走完全部網頁內容;然而因為平板與智慧型手機等行動裝置的崛起,螢幕可視範圍漸漸由一般的寬幅螢幕轉為可持行動裝置的長型螢幕,同時觸控功能與在螢幕滑動的動作也讓人類視覺上開始可以接受長型的頁面。

image001

2.按鍵加大及間距拉寬
過去在一般電腦上點擊目標時,多利用滑鼠操控以方便指定特定連結或項目,即使是筆電的面板,也有游標代為顯示欲點選的項目。不過在平板或手機,用來觸控的螢幕小得多,而手指的面積以及可能遮蔽物(如手掌)也會影響使用者的視線與操作,儘管畫面可以放大,但多餘的步驟和過小看不清的負面感受容易降低意願,因此需要讓使用者點選的項目,必須要放大、容易看清和便於互動。

image003

3. 減少需要輸入的內容
畢竟其他可攜裝置不如桌上型電腦或筆電,配有獨立的鍵盤,又若是常常在畫面上需要展開鍵盤輸入,則會擋去畫面的一大部分,減少可視範圍也降低使用者體驗。因此減少需要輸入的內容、表格縮減,也是新式網頁設計的一個趨勢。

然而,在視頻平台上也如此適用嗎? 以下讓我們來說明以上要素在視頻平台上的應用與難題!!

 

1. 硬體的規格vs.內容製作的初範
過去在拍攝影片時為追求場景配置的美觀,雖常有不同規格(請詳見什麼比例才是黃金比例?你可能不知道的10部學院比例的現代佳作電影!),但多為左右寬、上下窄一些,在上下長、左右窄的手持裝置出現後,儘管設備內已有感應儀、讓使用者可以以橫式持法觀看更大的內容畫面,但軟硬體間的比例是否合乎理想、軟體如何協助調校內容不失真,變成了一個考驗工程師也挑戰現代拍攝團隊的議題。

 2. 影片預覽模式的適切大小
在一般檢索中,我們瀏覽檢索結果,並以其提供的預覽文字來判斷是否合乎需求,但影片的檢索是否正確,則通常仰賴影片的截圖與其他線索(如影片時間長短)來判斷。因此在小螢幕中,甚麼樣的資訊需要提供使用者來判斷?多大的影片截圖既適合使用者確認細節,又不會在單一畫面中用掉過多空間、排擠其他資訊,則是UI需要考量的方向。

image005

3. 必要的功能與最大畫面的協調
在使用者持行動裝置看影片時,通常會希望在有限的小螢幕中可以儘量看到最大的畫面,但是觀看過程中,外部環境也會影響觀看品質,如光線強弱、背景音量大小等,另外可佔有注意力的時間也可能有限,因此在同一裝置、甚至同一畫面中可否巧妙加入「音量調節」、「明暗調節」、「進度調節」等功能,以最方便的模式提供上述選項,又不影響使用者的體驗和預期觀賞狀態,也是在設計規劃視頻平台時的注意事項之一。

 

撰文 三立新媒體服務研發中心研究員 張育瑄

 相關新聞,由發表  瀏覽:787 views

我要回應

  • :em28:
  • :em62:
  • :em65:
  • :em54:
  • :em25:
  • :em56:
  • :em50:
  • :em24:
  • :em27:
  • :em61:
  • :em12:
  • :em32:
  • :em57:
  • :em45:
  • :em72:
  • :em66:
  • :em63:
  • :em06:
  • :em59:
  • :em35:
  • :em51:
  • :em55:
  • :em22:
  • :em47:
  • :em20:
  • :em49:
  • :em14:
  • :em08:
  • :em44:
  • :em69:
  • :em41:
  • :em01:
  • :em29:
  • :em53:
  • :em03:
  • :em43:
  • :em70:
  • :em39:
  • :em64:
  • :em16:
  • :em34:
  • :em71:
  • :em33:
  • :em23:
  • :em02:
  • :em04:
  • :em52:
  • :em42:
  • :em30:
  • :em38:
  • :em31:
  • :em58:
  • :em05:
  • :em21:
  • :em46:
  • :em15:
  • :em10:
  • :em26:
  • :em11:
  • :em07:
  • :em13:
  • :em37:
  • :em18:
  • :em60:
  • :em40:
  • :em36:
  • :em17:
  • :em09:
  • :em19:
  • :em67:
  • :em48:
  • :em68:

*