手機APP Archives - 巨匠電腦評價誌-DBbox

錚／

巨匠電腦分享，穿戴式科技輔助醫療訓練、醫療器械操作

穿戴式運算較一般常規的筆記型電腦、桌上型電腦等運算設備來說，主要特性是具備了行動運算能力。這些智能設備可能整合感測器、多媒體加速器、可撓性電子顯示器、GPS衛星定位晶片、VR虛擬實境應用、生物識別功能等。而穿戴式裝置的特性，更已成為醫療訓練、醫療器械操作的有力工具…

整合穿戴式運算應用的優點相當多，對於特殊行業亟需科技整合的應用特別具吸引力，例如高危險度的高空作業，若需要電子運算設備搭配高空操作，即可將運算功能以配戴方式設置在身上，雙手可以騰出進行高空操作；而在智慧醫療現場，也可協助醫師在雙手忙於診療或手術動作時，提供用藥資料、病例歷史、案例資訊，即時進行更精準的治療決策。

附標：智能眼鏡醫療輔助用途備受矚目

醫療專業人士的培訓過程不同於一般產業，需要大量的操作練習與實務訓練，但手術、診斷等進行多數僅能透過低效率的實習、住院醫生訓練程序進行，因此實習醫師、護理人員的實務操練的學習機會相當少，而透過新穎的VR虛擬實境穿戴應用設備，則可模擬趨近真實的演練環境，對於培訓醫事人員可提供一定程度的助益。

Google Glass等智能眼鏡設備的出現變了人機介面與運算訊息、資訊呈現的形式，因為運算硬體平台甚至是資訊接取平台已經微縮到眼鏡架尺寸與重量，顯示屏透過投影技術，可在不影響配戴者視野的情境下進行外部訊息接收；操作介面除透過右側鏡架觸控區輕點、滑移操控外，也可利用語音進行操作，這對於進行醫療程序中的醫護人員可以更清晰地進行參考病例查詢、醫囑資料庫輔助參照，甚至是連接上醫療機構本身的人員、醫材調度系統，讓整體醫療效率大幅提升。這些，都是智能眼鏡在醫事現場可以應用的場景，也因此智能眼鏡在醫療、教學的相關應用發展，也最為熱門。

附標：VR虛擬實境設備改善實習效率

另一個有趣的醫療穿戴應用即為虛擬頭盔，其中以Oculus Rift VR頭盔發展與週邊應用最令市場關注，2012年8月Oculus Rift VR頭盔由Oculus公司擺上Kickstarter眾籌平台公開募資，雖然Oculus Rift VR頭盔一開始以遊戲VR虛擬實境應用為訴求推展市場，但實際上Oculus Rift VR頭盔的延伸應用則為這款產品最受市場重視的關鍵。

先檢視Oculus Rift VR頭盔在群眾募資平台創下的紀錄，Oculus Rift VR頭盔在一個月內即獲得9,000多名消費者贊助研發專案、並募得243萬美元眾籌資金！檢視Oculus Rift VR頭盔的初期規格其實並不搶眼，硬體架構為兩組640 x 800解析度的顯示屏幕，透過光學透鏡系統搭配錯視畫面立體化的原理，將雙眼視覺合併雙屏螢幕形成一1,280 x 800的顯示VR畫面，搭配VR頭盔內置陀螺儀感測器讓VR應用可隨著用戶擺頭、轉向即時對應模擬畫面，搭配其支援DVI、HDMI、Micro USB等多元輸入介面支援，吸引用戶爭相參與募資。

而Oculus Rift VR頭盔成功的關鍵重點在於，以往這類配置陀螺儀、可提供高度沉浸式使用體驗的虛擬視覺裝置，產品與系統單價相當高，並非一般人所能接受，而Oculus Rift VR頭盔將價格有效壓低獲得市場用戶支持，甚至在2014年3月Oculus公司還獲得Facebook高達20億美元的總價購併，其後Facebook又接續收購RakNet遊戲引擎將其轉為開源平台，積極建構以Oculus Rift為應用基礎的應用平台，甚至計畫要將VR視覺技術融入Facebook社群服務的一環，讓市場更積極關注VR設備可能為穿戴應用帶來的市場機會。

附標：VR虛擬實境技術醫學教學價值高

同樣的產品概念，除Oculus Rift VR頭盔產品外，Sony也推出一款Project Morpheus頭戴式虚擬頭盔設備，Project Morpheus內建1080p主流顯示解析度面板，應用分隔雙眼的放大光學機構，可讓用戶感受到逼真的3D環境沉浸效果，頭盔本身搭配動態感測與光學感測機制藉此精確定位佩戴著的頭部動作變化、即時對應改變虛擬實境的3D場景，提供配戴者身歷實境的3D影音感受。

對Oculus Rift、Project Morpheus這類VR頭盔來說，配置動態感測器、陀螺儀甚至是光感測器，其目的主要為主動或被動偵測配戴著的視角變化、進而介入控制VR實境畫面的對應視角變化，讓原有固定屏幕的3D視覺效果進階到有如身歷實境、走入虛擬現實的應用場景，而這種VR技術其實就是穿戴應用的整合應用實例，VR頭盔運用積極微縮、輕量化的嵌入式系統、顯示系統、光學透鏡系統與動態感測系統整合，建構出可以配戴在使用者頭上又不至於產生壓迫感與配戴重量負擔的顯示設備。

附標：HoloLens切入教學應用市場發展

相同的概念Microsoft也推出HoloLens虛擬實境裝置，HoloLens為Microsoft發佈Windows 10展示的擴增實境技術，甚至在2015年的E3電玩展展出透過HoloLens玩Minecraft的應用情境，用戶可透過HoloLens VR頭盔裝置遊戲或教學應用，有別於Oculus Rift、Project Morpheus僅感測用戶頭部擺動，HoloLens還能更進一步處理用戶手勢指令判讀、或透過聲控指令進行系統操作。

為了推展HoloLens的教學應用，Microsoft還準備5個獎項、每個獎項均提供多達10萬美元、兩組HoloLens開發硬體與系統作為種子激勵獎金，積極募集VR頭盔在教學、全信息操控應用，Microsoft更冀望於HoloLens顯示裝置可在數據可視化、遠端網路教育、互動藝術、前衛的人機互動介面等應用領域的實用價值。

巨匠電腦開設了手機APP設計課程，內容包含穿戴式雲端APP開發、行動裝置UI設置等等，快來巨匠電腦輕鬆學！

文章與圖片出處: http://goo.gl/RaczB6

【APPLE實務應用見證】誤打誤撞巨匠電腦讓文科生變身app軟體工程師

【手機APP課程】巨匠電腦手機APP課程熱門開發技術獨家提供

【手機APP課程】巨匠電腦分享，檢視行動裝置的3D人機介面UI開發關鍵

【手機APP課程】巨匠電腦分享科技心理學：讓人成癮的 App 設計學

錚／

巨匠電腦分享，現在透過行動裝置的上網量已經超越桌面電腦，所以行動裝置已經成為一般大眾接受吃訓的主流，那隨著行動裝置的普及，行動裝置的使用者介面與APP的設計也越來越受到重視。
美國在2014年初，透過行動裝置的上網量正式超越了桌面電腦，從此確立了行動裝置取代桌面電腦成為一般大眾接受資訊的主流終端。也因此越來越多的 Start-up 將自己的產品重心放在行動 APP 上面。然而隨著市場上的 APP 數量爆發性成長，如何從眾多的產品中吸引使用者、黏住使用者，使用者經驗設計變成了其中一個很重要的環節。

使用者經驗設計的範疇非常大，包含了解使用者、挖掘使用者潛在動機到易用性、美學等等，通俗點來說，如何讓一個產品給使用者爽的感覺，其中所包含的知識與方法都是所謂使用者經驗設計。

在整個 APP 的設計之中，介面與使用流程是使用者最直接體驗到產品好壞的地方，即便你在前期研究發想，抓住了很棒的價值訴求、問題解決方式，而在 APP 設計上的最後一哩上－－介面與流程給使用者不好的印象，你前面的努力便功虧一簣，由此可以見介面設計的重要性。

這篇文章將會帶大家實地重新設計一個簡單的 APP 介面，從中讓大家熟悉介面設計上的思考方式。整個設計的流程包含：

● 框定你的設計範圍
● 整理你的資訊架構
● 考慮資訊的不同狀態
● 考慮資訊的流動性
● 發揮你的美感

裡頭我會使用最近給一位朋友的產品－－Phofun 介面上的建議與修改方案為例帶大家思考。

Phofun 是一款讓朋友間彼此販賣創意照片的社群 APP。在裡頭每個人給每張照片定價，並用一句話形容照片後分享給朋友，收到照片的朋友，一開始沒辦法看到照片，只能從這張照片的敘述以及價格，來決定自己要不要使用 APP 內的金幣來實際觀看這張照片，觀看後讓使用者即時回饋評價這張照片。

簡單地說，這是一個藉由窺看慾望以及虛擬經濟為驅動的照片社群，最近 Phofun 想要讓社群從認識的朋友彼此分享擴展為讓不認識的朋友也可以互相分享販賣照片，也就是要建立一個賣場，讓全世界彼此不認識的人，也可以購買觀看互相的照片。

在開發過程中，我朋友他還沒有細想賣場的介面便直接開發了，以下這張圖是當時開發中的介面，看到這張圖以後你會怎麼重新設計它呢？
看起來不知道從哪裡下手嗎？
來跟著我一起一步步去整理自己的思緒重新設計它吧！

框定設計範圍

動手設計之前，先問問自己「我可以設計的範圍在哪裡？」，有些專案可以從前期調查開始挖掘需求、有些專案已經定下了商業目標得從互動設計上發揮……，每次設計都要先釐清你這次設計可以發揮的限制在哪裡，避免自己一頭熱最後設計出開發上來不及、無法融入現有產品的產品。

而在這次介面設計案例中，我無法重新定義需求、無法定義使用者與產品的互動方式以及產品設計語言等等，我們能做的是最基礎的介面設計。在這個階段，我們的設計目標是要確保介面表達出適當及適合的資訊，讓使用者清楚理解介面互動的方式。

整理你的資訊架構

在拿起你的鉛筆開始畫介面之前，先思考你的介面上需要呈現什麼資訊。
首先是整理你的產品資訊架構（Information Architecture），也就是在你的產品中裡頭的資訊彼此的關連性、階層關係，進而去設計這些資訊以什麼方式組織呈現給使用者。

在我們的案例中，賣場裡頭賣的是照片，我們需要先思考每一張上架的照片呈現哪些資訊，並且同時思考這些資訊彼此的關係。比如說在照片資訊內，裡頭的賣價與倒數時間是一塊的，可以把它分類出來，方便之後介面上設計。

整理結果如上圖所示，有了他之後我們才能了解到這個介面需要呈現哪些資訊、這些資訊的分類關係。

為什麼要知道這兩點呢？因為了解了需要呈現哪些資訊，你才知道介面上要放什麼資訊；了解了這些資訊的分類關係，你才知道資訊要怎麼放在介面上。

在介面上，我們會傾向會把同類的內容與互動元件放在一起，讓使用者更容易理解元素之間的關係。那為什麼放在一起會讓使用者更容易理解呢？那是因為在原因是在完形心理學裡頭有所謂的接近法則（law of proximity），如果兩個元素緊密地放在一起，人類會將這兩個東西建立關聯，即使是不相似的事物也可能因為距離相近，而在視覺上產生群組效果，比如說下圖左右兩邊都有圓形，但你不會把這兩個圓形當做同一個群組的元素。

考慮資訊的不同狀態

接下來，要考慮介面上資訊的不同狀態，因為 APP 介面並不是一張畫在固定大小紙上的畫，而是可與使用者互動來變化自己部分介面資訊。比如說在我們的案例中，每一張照片有著「我還沒買過」、「我已經買過的狀態」，而評價資訊上則會有「我還沒評價」「我已經評價」的不同狀態。

這些狀態會隨著使用者的互動而變，並且也是需要呈現在介面上讓使用者看見，藉由這些狀態變化的資訊，使用者才能感受到自己與系統正在互動，並且理解自己的操作狀態。

考慮資訊的流動性

除了介面的不同狀態外，介面設計與平面設計的差別還有在於資訊是流動的，也就是介面上的資訊並不是固定長度的，比如說每個人的 ID 名字長度不一樣、照片敘述的長度也不一樣、剩下的倒數時間不一樣、評價數也是不一樣的，而這些不同長度的文字有可能會在畫面上與其他 UI 元素碰撞，比如說底下這個購買介面，當商品名過長時會覆蓋到付款的按鈕。

這個問題有以下三種處理方式：

● 限制長度
限制長度可以分為輸入限制以及顯示限制，輸入限制是指使用者在輸入資訊時，限制他可以輸入的字元長度；顯示限制則是當資訊長度超過顯示範圍時，則隱藏過長的資訊，最常使用的是截斷資訊後加上刪節號（ellipsis）。
● 動態調整大小
根據不同的文字長度，在不失可讀性範圍內去動態縮小文字。讓文字根據長度自適應大小。
● 動態調整顯示形式
有些資訊有不只一種的表達方式，當資訊過長時可以使用比較簡短的表達方式，比如說 September 換成 Sep.、1200 換成 1.2K、1分30秒換成 90 秒……等等。

對於介面上要呈現的資訊都思考過以後，你就可以在紙上打草圖或是使用 Axure RP、Balsamiq 等原型工具畫 wireframe。

發揮你的美感

當草圖畫完，檢查確認後沒有問題後，打開你的 Photoshop、Illustrator 或是 Sketch來畫出漂亮的視覺稿吧！

最終的方案中，可以看見我是怎麼將之前整理的資訊表現在介面上：

我把資訊架構中同一族群的元素放在一塊，比如說把價錢與購買倒數時間一塊放在右上角，讓使用者一眼就知道購買相關的資訊。對於介面不同狀態的表現，我讓使用者已經購買的照片背景轉暗，表示對照片已經操作過了；購買資訊（價錢與購買倒數時間）對使用者來說也已經沒有意義了，所以將他隱藏起來換為「已購買」字樣；對照片評價的部份，我運用小花、大便與評論的 icon 顏色來表現使用者有沒有對照片評價，而對於不同長度的資訊，我分別對他們做不同的處理：

● 倒數時間：只顯示最高單位的時間，比如說還剩 1 天 20 小時 5 分，只顯示 1 天，理由是在 Phofun 賣場裡，並不像拍賣喊價應用對時間資訊有這麼高的需求，所以隱藏到對使用者重要度沒這麼高的時間訊息。
● 評價數量：運用一千轉為 1K 、一百萬轉為 1M 的方式，限制評價數量所用的字元數在三個以內。
● 照片敘述：限制使用者只能輸入 70 字元，並且根據不同長度的字數動態調整文字大小，小於 28 字元字體大小為 16px、 28 ~ 56 字元時字體為 15px 、而大於 56 字元時為 12px。

而最後我評估認為評價資訊中的購買數，對使用者來說並不是一個重要的指標，使用者想了解的是其他人對這張照片的好壞，因此小花數、大便數以及評論數才是對使用者來說重要的元素，因此去除購賣數資訊，並且把可能需要對圖片進行購買、刪除以外的操作，像是檢舉、分享……等可能的操作藏在評價列最右邊的刪節號裡頭，當使用者點下刪節號才會出現更進一步的選單。