TED – 線上演講新體驗

對知識飢渴、熱愛學習與喜歡聽故事的人,絕對耳聞 [ TED演講大會 ],甚至是忠實觀眾!TED 大會邀請眾多在該領域具貢獻的講者分享關於技術、社會、人文、娛樂及設計等議題,並用 ”說故事” 的方式傳遞給觀眾。主辦者為求這些故事能影響更多的人,推出來 [網站] 及翻譯等服務項目。

今天,筆者在官網上看到諸多精彩的設計小細節,迫不及待的想要分享給大家:

視覺設計

  • 播放影片再按下暫停,並將滑鼠移置影片上(hover),此時影片上會出現演講主題及資訊,不但有提供觀眾資訊的功能外,活用設計與排板技巧也讓影片質感提升!
  • 與上述同樣的狀況下,請注意看影片左右邊緣有黑色漸層淡出,除了避免影片色彩的不同影響到上述提及的資訊文字清楚度外,黑色漸層讓影片邊緣糊化,視覺感受上格外優雅,營造劇場的氛圍與體驗!

TED UI

 

 

  • 設計師將進階或社群功能藏於影片 hover 效果裡,僅在介面上留下主要的功能(播放 / 暫停與音量),簡化介面也讓畫面更乾淨簡練。

TED UI

 

 

使用性

  • 操作影片的基礎功能按鈕(播放與音量)做的相當大且明顯,滑鼠操作較不費力(相較於 Youtube)。
  • 網站為自適應性設計(Responsive Web Design),除了考量不同解析度的變化外,針對不同連網裝置也考量使用者體驗的差異,在介面上有明顯的不同。

 

獨特體驗

TED 網站提供影片講者的逐字稿,此功能可由影片下方操作列上的 Transcript 按鈕啟動,按下後影片底下資訊會轉換成逐字稿。此時,觀眾可往下閱讀,當滑至影片下方操作列置瀏覽器頂時,操作列會轉變成縮小化的影片與演講資訊,並永遠的置頂(除非往上滑)。為什麼筆者覺得這是本網站最獨特的細節?因為具有五感的演講才能完整的傳達講著傳述的故事,僅閱讀文字就無法體會到講者的呼吸停頓、聲音轉換以及肢體動作,TED 網站細微的設計讓觀眾更能融入於演講其中,體貼而精彩!

TED UI

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter