请选择 进入手机版 | 继续访问电脑版

触摸屏与OLED论坛

 找回密码
 注册论坛
查看: 5082|回复: 7

觸控平台開發心得

[复制链接]
发表于 2010-5-6 17:16:31 | 显示全部楼层 |阅读模式
很久沒有上來這邊晃晃了, 最近忙著開發一個平台, 主要是覺得目前大部分的軟件還沒有針對觸摸屏開發的, 一些比較特殊的應用, 像是 Windows 7 裡面的開發包,所附帶的軟件也都是單一展示跟娛樂性質比較高.無法帶來真正的應用面. 所以將以往針對觸摸屏的專案所累積的經驗來開發一個平台, 讓應用者可以迅速的組裝觸控的應用.
. t0 S+ [& V* Y6 |- a# E2 V/ A) `7 o
首先在開發心得上面, 有兩大結論.
# I: b/ Y6 ^* u: q8 t一是觸控特性 (不在有 Mouse Rollover 特性, 所以 Click 特性也得改寫, Click 改寫的話那 Drag&Drop 和 Double Click 自然也得改寫)! E* ~* }- [; s+ B6 d( l1 Q
二是物理特效 (以往滑鼠操作的界面大多不會採用物理特效, 不容易表現出來, 但觸控的軟件幾乎都喜歡用物理特效, 感覺比較人性化)3 x  F2 r0 R3 b! ?" @3 {

! C: v% y4 W- [4 T那額外的當然又得提到利用手勢操作來完成囉. 但是這就表是說, 輸入介面得到的訊息, 不在是以往單純的MouseEnter MouseLeave MouseMove MouseDown 等等, 而是會有更多的訊息, 包括觸控點的, 手勢的等等然而這些訊息變多了, 自然程式的開發行為跟變化也就跟著變多了, 可以依據使用者更多不同的操作反應更多動作# }3 X3 Y( U, F4 K% f  y

0 O" I+ s1 \; g: U所以首先當然要解決這些訊息的統一問題, 雖然目前的微軟 .NET 以及 Adobe 的 AS 都定義了許多處控包含手勢訊息,但這些訊息相應於不同的 UI 必須產生不同的反應, 而這些 UI 的反應產生的結果, 又要能傳遞至其他的 UI 或是有不同的邏輯處理
. k& c: b$ t  r( @1 j; M
" x$ g) s" R- A: g2 n& S& i所以比較好的架構是將 UI 邏輯跟其他的邏輯分開, 也就是夠成整個畫面的邏輯跟 UI 反映的邏輯是分開的.通常, UI 反映的邏輯, 如點擊後畫面產生什麼特效, 什麼變化, 等等, 這部分比較難用定義的方式描述, 所以通常設計方法是留有許多的參數接口, 再透過外部的描述語言 (Script 如 JS 或是 VBA) 來改變這些參數屬性達到不同的畫面變化效果, 但這點比較困擾的時, 使用描述語言來寫的邏輯, 通常相容性是比較差, 效能也比較差. 雖然網頁上面經常使用這樣的方式. 但目前來說為何逐漸被採用的則是使用 SandBox (如 Flash 或 SilverLight) 等等,就是能夠取得更好的 UI 效能, 以及更炫麗的畫面效果, 偏偏又不可能用 Sandbox 完全寫死, 所以便有了用 Sandbox 做出元件, 在將這些原件透過描述語言 (Script) 來與其他元件產生關連性的邏輯跟動作. 這也是目前大家開發網頁最常用的模式3 o6 w$ G9 I& q6 l4 ~

6 t7 D1 Y$ X& N# U* n0 _而目前大多數已經開發好的 Sandbox 元件 (尤其是 Flash 特別多) 大多並未考量到處控的設計, 這些元件大多是早期設計的,相信在未來會有更多支持觸控操作行為的元件產生, 不過, 這也並不容易, 因為觸控, 讓設計的考量點變得很複雜, 為何複雜呢? 就是上述歸納的兩點, 觸控特性跟物理特效" I0 f4 \& W& g' s$ ~9 C5 u

. ~5 o$ }2 ^1 a3 ?/ H- F3 H以往我們在開發 3D 展示的元件的時候, 比如說最常用的圓環來展示圖片, 滑鼠的設計行為模式, 通常是滑鼠移到某個方向就往那個方向旋轉, 滑鼠到中間或是點擊的時候停止旋轉, 甚至有的設計會有按鈕來做旋轉的方向, 或是設計一個拉霸 (ScorllBar 或是 slider) 來控制其旋轉.3 u' S; ]5 r) d% ?0 \3 U/ q0 q6 O

& ^2 ?* }% i! p; H; Z: Z: R1 x可是到了觸控下面, 雖然仍然可以採用這樣的操作介面, 但會讓使用者覺得很蠢, 很不方便, 還不如用滑鼠來的好用. 使用者希望的就是能在上面直接操控, 比如說點住哪裡, 那個地方就跟著跑, 手指到哪就跑到哪, 這裡就要改變之前的滑鼠寫法, 接下來還希望甩出去以後會跟著甩的方向旋轉, 甚至還會慢慢停, 或碰到東西會反彈, 這樣的寫法又牽涉到物理特效. 真是造成程式設計跟美工設計很大的衝突, 因為要做好的UI就會讓程式設計師傷透腦筋.
% K) i" ]/ d: s* {1 r/ [+ N: X8 ~3 A. ?& ^
所以以下就針對上述兩點的設計來做一些探討及心得分享.  y; E2 D2 }) P8 y5 x! |7 n- @
一. 滑鼠操作 vs 觸控操作
. o7 C. w4 w( ta. 首先要解決得是 Click 因為沒有了 MouseRollOver, 那就不能在手一下去(MouseDown)時做 Click, 而是必須改為使用 MouseUp 當做 Click
& M5 t$ H" E( s3 t5 S8 m1 wb. 手一下去就形成 MouseDown 如果不反應, 那就表示 Drag&Drop 行為無法反映, 所以這裡就必須設計時間差或是距離差來改變. - E% U6 K) A6 I) v/ x! S  ^
舉例來說設計了一個會跟著手跑的位置旋轉的環, 在這點設計上可以採用兩個設計
! W) j7 D7 `5 j, x# e- ib.1. 時間差, 當手下去(MouseDown) 時做的其實是 MouseRollOver 的特效, 但當手停留在一個位置超過某時間不動時, 則變成 D&D
0 [: f* q2 X: x3 i/ rb.2. 距離差, 當手下去在某個範圍內滑動時, 並不產生 D&D (即環不會跟著轉) 而是僅做 RollOver, 但當超過某個範圍時則開始 D&D
# b$ ~$ J. \' I0 u; j2 N5 {% b(這可能用文字比較難做形容, 有時間會拍成影片與大家分享)
# f' o8 Y; e  H. ^1 k3 F8 S
8 M* [9 b7 m' o% y" Y& }不過在這裡還有很多細節問題, 都是在處理 3D 觸控時相當令人傷腦筋的, 比如說點擊的位置, 坐標軸的轉換等等. 都是需要一番工夫的更多的問題是在觸控的2D位置換算到3D位置後, 如何能達成像使用者需求的點擊的位置在3D中不會變化. 再來就是物理特效要能延2D 投射到 3D 的方向轉動. 是不是覺得聽起來都是3D的問題呢, 其實不然, 單純做一個 List 的元件, 考慮到單點到多點的變化, 也會產生許多誤動作, 還有拖曳起始偏移量的計算, 以及手指動向追蹤等等技巧. 都是看起來微不足道的小關鍵, 卻大大影響了整個元件的控制性. 先聊到這囉. 其他下次再談呢
发表于 2010-5-6 21:53:43 | 显示全部楼层
對於版主提到的開發過程中的困擾,我以前用Flash開發一些效果的時候
- f% y. F& ]3 B1 S* b; Z: w+ S6 d* O1 w; m' L6 m8 y* u) B
也有同感0 M! V) L: T! C0 r/ \9 b( g5 l
  f0 n3 j$ ?/ m! Q
不過我後來並沒有採用斑竹提到的使用 MouseUp 來解決這個問題
# X% j! X" ?4 p. R2 x( u# b  A
0 G9 [& v+ N9 y2 w) {這裡我只以Flash作為參考,其他的我沒有用過2 h& M4 T; A; ]9 M5 m
! ?$ j2 x' X9 m+ `0 u
為了同樣達到效果,我則是採用的將之前在 Mouse Rollover 中的動畫效果變成一個小的 Movie ,當 Movie 播放完畢後,觸發對應的Event,當然,由於我做的東西跟版主的相比,應該相對比較簡單,所以對於更多的比如碰觸邊緣效果等我則沒有去使用了。
 楼主| 发表于 2010-5-10 23:51:26 | 显示全部楼层
呵呵~只要能提供使用者好的使用者經驗的使用者介面都是好方法的啦
发表于 2010-5-28 13:26:27 | 显示全部楼层
好  
发表于 2010-5-28 13:27:18 | 显示全部楼层
好  
发表于 2010-5-31 22:01:56 | 显示全部楼层
讲得好!
( P& A& A& J- c; c支持一下!
发表于 2010-6-8 20:27:57 | 显示全部楼层
hehe henhao
发表于 2012-1-19 14:53:32 | 显示全部楼层
很好、、、、、、、、顶、、、、、、
您需要登录后才可以回帖 登录 | 注册论坛

本版积分规则

地址:成都市高升桥东路2号高盛中心1109室 电话:028-85108892 13183843395
版权所有 Copyright(C) 51Touch.Com All rights reserved Archiver 触摸屏与OLED网 电子邮件:51touch@126.com
在线咨询QQ:触控面板,触摸屏原理,触摸屏一体机咨询 190798948    在线咨询微信: 13183843395(扫描下方二维码)

蜀ICP备05002005号
快速回复 返回顶部 返回列表