錚／
巨匠電腦分享，檢視行動裝置的3D人機介面UI開發關鍵。
行動裝置在硬體技術持續升級趨勢下，不只擁有幾近桌上型電腦的運算資源，在硬體架構方面也有趨近於桌上型電腦系統的技術發展，而在有了硬體性能的奧援下，Realtime render的即時重繪3D效果得以實現於裝置的人機介面應用，除硬體有能力做到3D UI外，在產品開發階段還須注意哪些關鍵問題？
在行動裝置的產品發展中，人機介面設計一向是極為重要的議題，尤其行動裝置在使用情境、屏幕尺寸等操作環境限制下，使用者介面(User Interface；UI)的整體架構設計，有否注意到Use Flow便利性與使用者經驗(User Experience；UE)思考，在近代的熱門產品中已經獲得驗證，是左右產品能否熱賣的重要關鍵。
觀察近期的幾款熱賣產品，例如，Apple的iPhone，這款產品看起來似乎為iPod Touch加上無線通訊模組這麼簡單的組合，但事實並非如此，在核心的電話應用中，iPhone利用iPod Touch原有的iOS系統基礎，採取一致性的UI元素進行功能整合，同時將iOS觸控操作的優勢發揮極致，讓整體的操作體驗超越傳統智慧型行動電話的表現。
觀察iPhone的市場成功因素，除了在現有商品的UI呈現、UI Flow、User Experience…等關注的重要議題外，iOS本身即在系統層面整合OpenGL ES，透過SDK提供完整OpenGL ES API開發資源，讓相關軟體開發商得以用最短的學習曲線將OpenGL ES為基礎的Realtime 3D render技術導入APP或特效，讓行動裝置的UI可以進化到Realtime 3D render應用水準。
分析iPhone的iOS Device成功模式會發現，讓原有的操作介面獲得最佳的Flow與設計，只是做好使用者介面的第一步，若還要達到讓消費者眼睛為之一亮、進而萌生強烈購買的慾望，產品的第一印象或是應用體驗，在應用端的UI設計中，就必須尋求更吸引人的方案，其中3D化的Realtime 3D render GUI(Graphical user interface)即是目前行動裝置最熱門的應用技術議題。
3D GUI的整合現況
在產品面，即便iPhone產品已經具備了開發3D GUI的有利條件，如硬體加速技術、完善的Open GL ES開發資源，但現況卻是未能在iPhone UI見到大量的3D應用，反而僅有在APP轉換或是多工切換，會看到iOS核心的3D GUI特效，而在APP的部分以iBook臨摹實際書頁的Page Flip、書店/書櫃畫面轉換時，才能發現OpenGL ES的實踐效果。
整合3D GUI的好處相當多，尤其是數位閱讀的應用領域，幾乎已被Amazon的EPD(Electronic Paper Display) Kindle閱讀器搶占大半市場，後進的Apple iBook產品，想在這個產品類型有突破性的進展，就必須在技術整合方面有更亮眼的表現差異，例如EPD在彩色化與動態呈現方面的弱勢，正好就是Apple iBook可以著力的切入點，而iBook也是第1套電子書APP整合Realtime 3D render技術Page Flip與書櫃翻轉3D特效的閱讀軟體。
iBook順暢的3D翻頁動畫視覺效果，搭配超炫書店/書櫃轉換特效，讓使用者立即體會到，有無3D功能實踐，竟能讓行動裝置的應用體驗有了全新感受，也讓iBook軟體一上APP Store就在電子閱讀市場建立新的技術門檻，即便隨後也有類似彩色化產品標榜具3D Page Flip效果，但似乎僅有iBook的印象能深植消費者心中。
事實上，多數產品開發者所面臨的現況並不如iOS的APP開發這麼順心，雖然iOS的應用程式發展平台，有硬體單一、一致性UI與特效環境資源豐富的開發優勢，但實際的開發現場，開發者所面臨的整合環境並非如此完善，若想在產品內整合前衛的3D GUI特色，就必需自行定義、開發相關功能組件，或是直接尋求可用的SDK來整合至產品中，用最少的資源進行功能需求方面的整合設計。
實踐3D UI必備的硬體基礎
就實踐3D UI的方式來看，雖然在未有硬體加速奧援的前提下，透過軟體或是仿3D實為2D畫面處理的程式技術，也可達到類似3D的效果，但實際上3D GUI的開發需要在額外添加的動畫特效不影響原有操作的前提下進行，而利用軟體或是模擬式的3D技術，必須耗用大量的畫面處理，增加了核心處理器的運算負荷，這在3~4吋的行動電話型態的小尺寸螢幕行動裝置搭配一般性能不算差的處理器，或許還能得到高性能表現，但實際上此種作法也會讓裝置的電力大量消耗，影響產品的整體效能。
3D應用越來越熱門，行動電話、平板電腦等產品，也在硬體方面嘗試整合3D圖形加速晶片，搭配系統的底層技術支援，讓行動裝置在呈現這些視覺效果的同時也能獲益於硬體3D加速，讓整體裝置運算不致於過度集中於核心處理器，達到全面性的省電與效能平衡表現。
以目前的智慧型手機為例，大多選擇採行相對省電的ARM處理器，建構嵌入式系統應用，其運作時脈往往達到1GHz或更高水準，而近來初發表的Android 3.0(Honeycomb)平板系統，檢視其硬體規格亦相對亮眼，尤其在硬體3D圖形加速的整合設計方面，亦回應市場對於嵌入式系統3D硬體運算資源的急迫需求。
像是ASUS的Eee Pad產品、Motorola XOOM等新一代Tablet平板裝置，即具備dual-core NVIDIA Tegra 2雙核處理器，該處理器亦提供3D加速引擎，可輕鬆因應大量的3D GUI系統開發需求。檢視熱門的Tegra嵌入式處理晶片，包含了APX與CSX兩大產品線，其中APX是針對手機市場開發，CSX則是針對中、大型屏幕需求開發，如車載多媒體系統、MID、Tablet、Netbook等較大型設備，除了運作時脈差異外，Tegra系列在1080p影音解碼、3D硬體加速已是基本功能。一般而言，Tegra與多數嵌入式應用處理器近似，包含CPU、繪圖、多媒體運算、I/O、儲存控制…等必備的基本能力，Tegra第1代採用ARM11核心、2代則是改採雙核Cortex-A9核心。
最新的Tegra 2除運算用途的Cortex-A9核心外，顯示核心乃為此代架構的關鍵重點，原1代架構的繪圖核心是基於時脈為130MHz Geforce 6基礎，為具兩組pixel shader units、兩組vertex shader units及兩個texture mapping units(TMUs)。Tegra 2繪圖核心與1代同為基於GeForce 6，但設計上藉由運作時脈提高，以強化Tegra 2的實際3D運算加速性能，而核心架構並未改變，主要是整體性能的全面提升為主，若當Tegra 2所整合的3D運算任務在核心無法達到需求時，也可透過CUDA技術提升整體3D效能。
發展3D GUI以強化產品使用體驗
在發展3D GUI實務上，多數硬體開發業者會將產品開發重心過度聚焦於功能層面，例如，產品的硬體規格與功能、儲存媒體的容量…等，卻忽略了硬體裝置的操作體驗，而後者才是產品能否成功的關鍵。如何在簡潔設計與功能豐富度之間取得平衡，在產品規格多數相近的市場環境下，往往成為產品勝出的要因。因此，產品外在的UI與使用者經驗的整合，是產品開發前務必審慎考量的重點。
以行動電話為例，3D化的GUI可以讓初次接觸產品的消費者，在同質產品間進行比較時，會有顯著的技術差異印象，但這是基於硬體效能可以奧援3D GUI的假設下才會有的情境，產品必須提供順暢的GUI操作體驗才能吸引消費者青睞。3D GUI的性能關鍵，在於UI引擎可充分應用硬體3D加速的效益，UI引擎整合如OpenGL ES的技術標準，讓UI引擎的開發成果可以輕鬆轉移到多款支援OpenGL ES加速的硬體裝置。
評估性能表現，3D GUI的引擎核心，必須具備可高效運行的基礎，先不論使用介面設計優劣，至少在功能展現方面必須達到與2D GUI近似的效能水準，尤其是執行功能項目後經1~2秒的動畫展演，繼而快速執行對應的程式，這部分可以透過建構相關特效展演的KPI(Key Performance Indicator)或自定義合理的Benchmark進行檢核，讓產品在整合3D特效後還能維持與2D圖形介面近似的操作效率，避免做出整機運行效率低落或干擾操作的失敗產品。
整合3D GUI必須考量效能表現問題
而能達到高效能的3D GUI表現水準，在軟體技術方面，必須在UI引擎的開發採取更進階、積極的開發手段，例如，採native C++或對系統資源更能掌握的程式語言，進行核心架構開發與最佳化設計，強化引擎對CPU/GPU的控制能力。觀察3D UI引擎的關鍵效能指標，可從幾個重點進行評估，例如，展演動態效果的Frame rate效能、GUI整合的便利性，與完善的引擎架構。
在動態效果的呈現水準方面，如果引擎性能不彰，沒有嘗試在引擎程式碼方面進行最佳化設計，雖然3D引擎仍可實作出欲使用的3D執行效果，但卻因為引擎性能拖累了動態展演的擬真水準，例如，出現畫面遲滯或是貼圖表現不佳…等問題，此類效能水準的觀察指標，係在標準的硬體評估平台，可以達到多少的frame rate。
以SPB的UI Builder核心引擎為例，其畫面的處理即可達到60 frame/sec，雖然肉眼不見得能辨識30或60fps的表現差異，但若是在相同的參考硬體平台上，3D圖形引擎都能辦到60fps的Realtime 3D render，這表示即便是UI對應的操作應用會消耗部分系統效能，在3D特效展演方面也可以達到24~30fps水準，該UI即不會出現2D或3D GUI的視覺體驗落差。
先前也有提過，強調3D GUI使用體驗的產品，多半以行動裝置居多，而這些產品又對電池性能有較多設計考量，在應用3D UI的同時，也必須針對電池應用的負荷進行評估，例如，開發階段應分別就原有的2D UI與3D UI進行不同的電源使用現況測試與評估，雖然3D GUI因為會讓硬體處理較多的影像材質渲染、貼圖運算，相對影響其電源使用狀況，但整合多少份量的3D化GUI設計元素會對電池用量有最輕微的影響，則必須透過大量測試與統計才能得到答案。延續前述的3D引擎設計重點，如果引擎核心能獲得最佳化設計，則在導入3D UI時也會有較佳的能耗表現。
解決方案的UI/UE組件完整性 影響3D GUI整合彈性
在iOS的系統架構下，進行與OpenGL ES加速相關的視覺應用開發與實作時，必須透過程式進行開發整合，例如，工程師必須熟悉iOS下的3D技術，如應用iOS圖形子系統核心基礎的core animation，搭配呈現於前端的UIView，由core animation layer來支持呈現，再利用APP裡的各式layer去更新Screen View的顯示內容。基本上，iOS多是透過core animation進行動畫呈現與圖形合成。
在3D UI技術的處理方面，OpenGL ES也是core animation的用戶，實際開發時若想使用OpenGL ES進行3D物件或UI創建，需建構1個UIView，而此UIView則由1個相對較特殊的core animation layer來支持(CAEAGLLayer)，OpenGL ES和core animation則是透過CAEAGLLayer進行聯繫，最終CAEAGLLayer的內容再與其他呈現數據整合後顯現於Screen View。觀察iOS平台下的APP 3D GUI整合，經常會遇到多數的UI/UE組件，除非是尋找現成的解決方案直接套用，否則若都由工程師自行開發，在實務上會有產能方面的限制。
一個常見的情況是，不同的專案會面臨3D GUI的整合需求，每個專案的3D GUI是否都要從無到有的進行開發？顯然，這種作法將增加開發成本，亦可能無法因應即時上市的需求。比較好的開發方式是尋求可行的3D GUI解決方案，以之進行商品整合。以SPB UI Builder以及SPB UI Engine為例，即可因應不同行動裝置平台，提供一套快速導入設計的3D人機介面解決方案。
在開發階段可利用3D UI引擎相對完整的UI/UE組件架構，採行便捷的整合方式讓相關應用擁有3D人機介面，快速達成專案目標。而在考量導入3D引擎進行產品開發之前，先期的技術評估也要釐清不少問題，例如，該3D UI引擎是否提供Windows CE、Symbian、MeeGo、Android…等不同平台的移植彈性，或者其引擎核心能否針對跨平台的設計提供更完善的應用支援等等。
重視測試與性能調校 提升整體GUI應用效能
在產品的原型設計階段，並非所有可互動機制都必須完全保留，若某一種設計方式並無益於可用性，則該在原型測試階段就把它取消或簡化，例如會影響性能的3D動畫，可試著減少其播放長度或畫面精細度。在產品原型階段就剔除無意義的互動機制，可使行動裝置的操作介面更為簡潔精練，又能同時強化UI的視覺效果。
然而，在有開發時間壓力的限制下，我們在原型測試階段可能沒有太多可供驗證的資源進行評估，礙於成本，往往採取功能段於模擬器下進行效能驗證的替代方案，但模擬器也是運行於PC或其他運算平台上，基本上仍難達到真實驗證效果，結果僅能供作前期開發的參考，對實際GUI介面調校也有一定助益。未來智慧型手機介面發展會看到越來越多觸控整合3D視覺的操作方式出現，目前已有大量APP朝向3D GUI發展，不過，使用者介面的實用性(Usability)仍是影響產品好壞的關鍵因素，3D化只是讓產品更搶眼的設計策略之一，GUI終究要回歸實用性，並以方便操作(easy-to-use)為最基本的設計原則。
巨匠電腦另外也開設了視覺設計課程，清楚簡單的上課方式，讓你快速上手，快來巨匠電腦學習！
文章與圖片出處: http://goo.gl/gv0k8c
【視覺設計課程評價見證】擺攤小子的翻轉 – 我的專業來自巨匠電腦
