隨著智能手機、平板電腦的快速普及,越來越多的企業意識到建立自己的APP應用和移動網站,也有越來越多設計師開始轉戰移動平臺。本篇主要介紹移動平臺的一些入門知識和各平臺的設計要求。
一. ?移動產品的實現方式
移動產品的實現方式主要有三種:①Native App;② Web App;③ Hybrid App
①?Native App指的是本地化應用,就是我們從應用商店下載安裝的獨立應用,類似于PC平臺上的客戶端,Native App的主要優勢有:
- 最佳的用戶體驗,最華麗的交互,操作流暢
- 可節省帶寬成本
- 能夠輕松調用圖片相機,各類傳感器,麥克風,電話….
- 可以使用PUSH推送
Native App有著非常明顯的優勢,也是用戶接受程度最高的呈現方式,但開發原生應用的成本比較高,而且維護更新滯后,訪問路徑封閉;如果不是用戶常用的應用,很難長時間存活在用戶手機里。
②?Web App?通常是指觸屏站,就是我們通過手機瀏覽器訪問的Html5網站,Html5支持一些新標簽和腳本,可以做出類原生應用的效果和動畫,Web App的主要優勢有:
- 實時更新
- 不需要針對各平臺開發不同的版本,開發成本低
- 輸入網址即可訪問,不需要下載安裝更新。
但Web App的缺點也比較明顯:
- 部分瀏覽器無法調用相冊, 硬件資源和傳感器
- 無法使用推送功能
- 性能較差
- 瀏覽器適配容易出問題
- 緩存小,以iPhone為標準,所有的圖片和腳本都要小于25KB
- 目前只兼容webkit內核的手機瀏覽器, WP,Symbian等平臺的瀏覽器無法正常訪問。Web App主要服務于產品的輕度用戶,或作為Native App宣傳下載的中轉站。
③?Hybrid App?是指混合模式應用,同時使用網頁語言與程序語言編寫,包含原生視圖和Web視圖兩種方式,使用方式和Native App一致,而又繼承了Web App實時更新開發成本低等優點。
Hybrid App通常分為三種類型:多View混合型,單View混合型,Web主體型。
我們先來認識一下什么是多View混合型:
天貓App的產品詳情頁使用的就是多View混合型,基本信息用的Native view, 而數據格式較為混亂的商品詳情頁就直接用的Web view視圖。這種移動應用主體通常是Native App,Web技術只是起到補充作用。
再來了解一下什么是單View混合型:
即在同一個View內,同時包括Native View和Web View?;ハ嘀g是覆蓋(層疊)的關系。這種方式的體驗要優于多View混合型,一般用于Native View中部分數據接口不方便實現的頁面,普通用戶基本上看不出與原生視圖的區別;
而Web主體型可以理解為一個Native的外殼內嵌入了純Html網頁,這種方式的app想通過商店審核非常困難,而且用戶體驗也非常的糟糕,目前的技術不是太成熟,缺錢缺人缺時間的情況下可以考慮使用這種方式。
二 . 移動產品的需求特性
一般企業級的App都是根據Web主站的需求做移動化定制,規劃需求時主要考慮用戶的使用環境;
根據移動平臺的用戶使用環境,需求主要考慮:
- ?App作為主站的快捷工具,只需實現核心需求,考慮添加場景需求,而不是所有需求的復制;
- 信息處理方式多樣化:視覺、聽覺和運動觸覺;手機是各個終端的組合體:電話、互聯網、電腦、信用卡、電視、媒體播放器、收音機、錄音筆、攝像頭…需要充分利用;
- 要利用好手機隨身攜帶的優勢,比如推送通知,LBS定位;
- 手機的輸入效率有限,需要避免復雜的編輯操作和危險操作需求;
- 網絡環境不穩定,避免單頁面呈現內容過多;
- 手機平臺無資源管理器,屏幕小,硬件能力有限,只適用于微任務,代替不了PC端;
- 移動平臺本身具有短路徑的缺陷(無法在眾多APP間自由跳轉);
三 . 移動產品的交互特性
①操作行為的革新
PC端的輸入設備是鍵盤+鼠標,而移動端主要靠手勢
②?傳感器的利用
移動設備除了各種手勢操作,各種傳感器也應該是交互設計可以利用的利器,下面簡單介紹幾種常用的傳感器類型:
?重力感應器,最常應用與橫豎屏切換,平衡球游戲等。
加速度感應器,應用最成功的是微信的搖一搖,然后市面出現了大批的搖晃類操作的應用都是利用的加速度傳感器;
?方位感應器,主要應用于指南針,地圖等
?光線感應器主要應用與屏幕亮度自動調節,自動切換白天夜間模式;
圖中的新聞客戶端之所以沒有設計成自動切換,可能是考慮到絕大都數用戶都不習慣夜間模式,或者不喜歡應用的強制切換。
除了上述的幾個常用傳感器,還有方向傳感器(賽車類游戲)、距離傳感器(接電話時屏幕自動熄滅)、壓力傳感器(部分機型有,可以檢測樓層、海拔)等。
③小屏幕,單窗口
在設計Web網頁時,我們會有全局導航,頁簽,柵格,面包屑等方法處理復雜信息的呈現,而在移動端,會有小屏幕單窗口的特性,而且手指的精準度遠差與鼠標,所以移動應用的設計相比網頁有更多的要求:
- 最小點擊熱區不小于44*44
- 不超過4個次級關系的頁面層級
- 明確的操作反饋和提示
- 使用不同平臺的標準控件
- 頁面跳轉的意向化過渡
- 具備趣味性
④平臺操作的差異化
雖然很多Android的應用和iOS應用無差異,但各平臺的操作習慣和實體按鍵并不相同,iOS應用的所有操作都是通過手勢完成,而Android和WindowsPhone卻有使用率非常高的實體鍵,而且高級手勢在android和WP端并不能實現。
那么各平臺的設計規范又有哪些區別和優勢,這個..還是等下一個章節再講吧o(∩_∩)o
來源:W3CFUNS