top of page
lx880.gif

教育用互動螢幕介面設計

專門設計來進行教學的觸控螢幕,螢幕尺寸及大讓學生能清楚觀看,放在教室最前方提供老師進行多媒體教學,主要的操作範圍集中在下方,確保老師和學生都能進行操作,可以播放影片、進行簡報、自訂Widget,並可直接在螢幕上進行筆記和手繪。

Team members

BenQ Lifestyle Design Center UX Team

Project

BenQ Inc.

Device

Android, Touch Screen

Team

Working as a UI Designer in this project

Project Manager

UX Researcher

UI Planner

UI Designer

  • Design wireframes and user interface

  • Graphic Design

  • Remain Design system

Software R&D

Hardware R&D

Goal

為智慧教育用互動螢幕設計觸控介面:
設計適合教師上課時在教室使用的大型互動螢幕。

Background

經過UX團隊親自到國際學校與老師和學生進行訪談後,整理出下列需求:

便於書寫:
老師在課堂上有手寫上課內容的習慣,並使用數位內容像是影片或簡報等與學生互動。

遠端操控:
老師在上課時有時會走到教室後方與學生,所以需要能夠遠端遙控內容。


觸控互動:
老師或學生都能直接觸控螢幕來與數位內容互動。


Case Study 1-1.png
Participants

教師、學生

Concept Design

我參與了UX團隊舉辦的工作坊,一起頭腦風暴向公司提出解決方案。我也協助進行概念設計,我採用了AfterEffect製作動畫,將互動情境模擬出來。
 

Interoperability between large and small screens.gif

觸控筆兼書寫:
白板筆可以做實體書寫,同時加上sensor成為觸控筆,可以對投影畫面進行操作,讓老師不用改變原本的書寫習慣。

Touch Pen for Hand Writing.gif

大小螢幕互控:
筆電接上公司後,可以同步大螢幕和小螢幕畫面,讓老師可以進行雙向互動。

Design Challenge

我們決定先以大型觸控螢幕作為出發點,因為公司在螢幕的開發上已經有相當成熟的技術。

依照人體舒適範圍重新設計畫面:
當我們投放舊版UI系統畫面到大螢幕時,很顯然的,一般使用者根本碰不到。舊有按鈕因為是設計給遙控器使用的,只為了方便觀看設計,一般使用者站在螢幕前是無法碰到上方的按鈕的,我需要根據當地人平均身高修改畫面,將按鈕放到螢幕的舒適範圍中。

觸碰和遙控的顯示方式:
因為螢幕同時可以用觸碰和遙控的方式操作,所以作為UI設計師,我要設計兩種UI效果對應使用者的操作。

維持品牌一致性:
因為按鈕和視窗都要修改比例,我修改了大部分部件的尺寸,並和負責維護品牌設計系統的設計師溝通,確保這個產品和其他產品線的視覺有一致性。

challenge.png
comfort zone.png
Redesign

在我的重新設計中,我們參考了中國平均身高,制定了觸控舒適範圍。我再依照這個觸控範圍,把UI進行重新調整。
並設計了兩種效果,分別觸控和遙控器的顯示效果。

lx880.gif
S__2859061.jpg
GUI_v1_wr1.gif
S__2859062_edited.png
Impact

改善觸控的互動體驗:使用者可以更容易的和大螢幕互動,並輕鬆觸碰到他需要的數位內容。

What I Learned

為更多互動方式做設計:
我這次設計了大螢幕和觸控及遙控設計,讓我更暸解到它們的不同,我學會如何做出更彈性的設計。

與跨海團隊溝通:
這次的設計牽涉到上海團隊和台灣團隊,因為團隊在不同的城市,為了減少溝通成本並呈現效果,我決定用高品質的視覺原型設計,讓團隊在看到畫面時馬上同步。

bottom of page