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

触摸屏与OLED论坛

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

觸控平台開發心得

[复制链接]
发表于 2010-5-6 17:16:31 | 显示全部楼层 |阅读模式
很久沒有上來這邊晃晃了, 最近忙著開發一個平台, 主要是覺得目前大部分的軟件還沒有針對觸摸屏開發的, 一些比較特殊的應用, 像是 Windows 7 裡面的開發包,所附帶的軟件也都是單一展示跟娛樂性質比較高.無法帶來真正的應用面. 所以將以往針對觸摸屏的專案所累積的經驗來開發一個平台, 讓應用者可以迅速的組裝觸控的應用.! g0 l; \# C3 Q5 G3 G

! I2 b. _; r$ e) S  ]首先在開發心得上面, 有兩大結論.
. j3 {# M6 b. e. h; V: ]3 {一是觸控特性 (不在有 Mouse Rollover 特性, 所以 Click 特性也得改寫, Click 改寫的話那 Drag&Drop 和 Double Click 自然也得改寫)& G7 W( s3 t0 ?1 P6 o7 T1 y
二是物理特效 (以往滑鼠操作的界面大多不會採用物理特效, 不容易表現出來, 但觸控的軟件幾乎都喜歡用物理特效, 感覺比較人性化)
& _1 R/ W5 l" R; d4 B: |& v7 c
. G- s0 v5 j8 l( b" @( [) v+ j那額外的當然又得提到利用手勢操作來完成囉. 但是這就表是說, 輸入介面得到的訊息, 不在是以往單純的MouseEnter MouseLeave MouseMove MouseDown 等等, 而是會有更多的訊息, 包括觸控點的, 手勢的等等然而這些訊息變多了, 自然程式的開發行為跟變化也就跟著變多了, 可以依據使用者更多不同的操作反應更多動作
& h/ y+ n+ P: B# G: c/ i% `. P' k1 R3 h& U) M2 Z7 z" E3 d9 r
所以首先當然要解決這些訊息的統一問題, 雖然目前的微軟 .NET 以及 Adobe 的 AS 都定義了許多處控包含手勢訊息,但這些訊息相應於不同的 UI 必須產生不同的反應, 而這些 UI 的反應產生的結果, 又要能傳遞至其他的 UI 或是有不同的邏輯處理. @+ x2 s! E' b

3 k0 I: ]5 n, u3 k所以比較好的架構是將 UI 邏輯跟其他的邏輯分開, 也就是夠成整個畫面的邏輯跟 UI 反映的邏輯是分開的.通常, UI 反映的邏輯, 如點擊後畫面產生什麼特效, 什麼變化, 等等, 這部分比較難用定義的方式描述, 所以通常設計方法是留有許多的參數接口, 再透過外部的描述語言 (Script 如 JS 或是 VBA) 來改變這些參數屬性達到不同的畫面變化效果, 但這點比較困擾的時, 使用描述語言來寫的邏輯, 通常相容性是比較差, 效能也比較差. 雖然網頁上面經常使用這樣的方式. 但目前來說為何逐漸被採用的則是使用 SandBox (如 Flash 或 SilverLight) 等等,就是能夠取得更好的 UI 效能, 以及更炫麗的畫面效果, 偏偏又不可能用 Sandbox 完全寫死, 所以便有了用 Sandbox 做出元件, 在將這些原件透過描述語言 (Script) 來與其他元件產生關連性的邏輯跟動作. 這也是目前大家開發網頁最常用的模式. G( P. Z3 T/ i5 b* A- V# I

* h; v3 d$ ]" q- c1 g9 \; k而目前大多數已經開發好的 Sandbox 元件 (尤其是 Flash 特別多) 大多並未考量到處控的設計, 這些元件大多是早期設計的,相信在未來會有更多支持觸控操作行為的元件產生, 不過, 這也並不容易, 因為觸控, 讓設計的考量點變得很複雜, 為何複雜呢? 就是上述歸納的兩點, 觸控特性跟物理特效# e1 L0 F+ A9 o) V( f' F" c
! v/ {" V# i8 _  p& e
以往我們在開發 3D 展示的元件的時候, 比如說最常用的圓環來展示圖片, 滑鼠的設計行為模式, 通常是滑鼠移到某個方向就往那個方向旋轉, 滑鼠到中間或是點擊的時候停止旋轉, 甚至有的設計會有按鈕來做旋轉的方向, 或是設計一個拉霸 (ScorllBar 或是 slider) 來控制其旋轉.5 k1 n) z0 j! b4 L- I9 W- @- Z9 L

, c9 I# k. S- E: y可是到了觸控下面, 雖然仍然可以採用這樣的操作介面, 但會讓使用者覺得很蠢, 很不方便, 還不如用滑鼠來的好用. 使用者希望的就是能在上面直接操控, 比如說點住哪裡, 那個地方就跟著跑, 手指到哪就跑到哪, 這裡就要改變之前的滑鼠寫法, 接下來還希望甩出去以後會跟著甩的方向旋轉, 甚至還會慢慢停, 或碰到東西會反彈, 這樣的寫法又牽涉到物理特效. 真是造成程式設計跟美工設計很大的衝突, 因為要做好的UI就會讓程式設計師傷透腦筋.& S* V/ s" Y0 W4 r9 f
" r7 L4 ]# M; M7 @
所以以下就針對上述兩點的設計來做一些探討及心得分享.# o6 J& Y+ V: Y  M* P/ @0 S
一. 滑鼠操作 vs 觸控操作; l1 J6 C) C3 H4 M5 Y) |
a. 首先要解決得是 Click 因為沒有了 MouseRollOver, 那就不能在手一下去(MouseDown)時做 Click, 而是必須改為使用 MouseUp 當做 Click9 d5 p. j8 ^/ ]) ~/ S9 V$ ~& C
b. 手一下去就形成 MouseDown 如果不反應, 那就表示 Drag&Drop 行為無法反映, 所以這裡就必須設計時間差或是距離差來改變.
4 P: y, |% s# C  V舉例來說設計了一個會跟著手跑的位置旋轉的環, 在這點設計上可以採用兩個設計; w7 p( K) |: l: y( C* ]( v# _
b.1. 時間差, 當手下去(MouseDown) 時做的其實是 MouseRollOver 的特效, 但當手停留在一個位置超過某時間不動時, 則變成 D&D
* V* c) e+ P! t) m# N/ }* d; x1 `8 o, K/ @b.2. 距離差, 當手下去在某個範圍內滑動時, 並不產生 D&D (即環不會跟著轉) 而是僅做 RollOver, 但當超過某個範圍時則開始 D&D+ f1 N& [' h: ], }* o7 f
(這可能用文字比較難做形容, 有時間會拍成影片與大家分享)
7 H: }1 f0 M( T5 |0 T  B$ A/ c8 \# v0 S" w, ?
不過在這裡還有很多細節問題, 都是在處理 3D 觸控時相當令人傷腦筋的, 比如說點擊的位置, 坐標軸的轉換等等. 都是需要一番工夫的更多的問題是在觸控的2D位置換算到3D位置後, 如何能達成像使用者需求的點擊的位置在3D中不會變化. 再來就是物理特效要能延2D 投射到 3D 的方向轉動. 是不是覺得聽起來都是3D的問題呢, 其實不然, 單純做一個 List 的元件, 考慮到單點到多點的變化, 也會產生許多誤動作, 還有拖曳起始偏移量的計算, 以及手指動向追蹤等等技巧. 都是看起來微不足道的小關鍵, 卻大大影響了整個元件的控制性. 先聊到這囉. 其他下次再談呢
发表于 2010-5-6 21:53:43 | 显示全部楼层
對於版主提到的開發過程中的困擾,我以前用Flash開發一些效果的時候# [2 I0 m# h5 }

' z( N, P5 K; D& F6 C! c7 d; a也有同感
' |, d. W: F) h7 ~6 W+ ^) U! |2 d4 B9 C
不過我後來並沒有採用斑竹提到的使用 MouseUp 來解決這個問題
7 R4 z: B; I" q% Q8 x
  @/ A% D) z+ \, O! z2 X/ [, g這裡我只以Flash作為參考,其他的我沒有用過$ s/ z5 \7 E6 ^: L* a& o

2 p  o. l; O) X為了同樣達到效果,我則是採用的將之前在 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 | 显示全部楼层
讲得好!
* y% k" o# `+ Y- g  ?- s0 e( H支持一下!
发表于 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号
快速回复 返回顶部 返回列表