- 動靜之美:Sketch移動UI與交互動效設計詳解
- 黃方聞
- 1988字
- 2019-08-15 10:00:29
1.1 移動UI的發展
1.1.1 第一階段:移動UI設計的目的是保證軟件的可用

圖1-1
在2007年蘋果公司推出iPhone之前,世界上的手機大部分都是鍵盤手機,當時智能手機的市場還是諾基亞的天下,手機鍵盤的第1排和第2排一般是確定鍵、返回鍵、五維導航鍵和電話的接聽與掛斷鍵,頂部是信號欄,菜單和退出等功能按鈕位置固定在下方,如圖1-1所示。大部分智能手機運行的系統為塞班S60,除此之外,市場占有率較高的智能手機系統還有微軟的Windows Mobile以及黑莓的BlackBerry OS。
當時手機上功能按鈕的位置基本上是固定的,特別是同一廠商的不同手機之間的操作幾乎相同。正因為如此,我把手機從諾基亞換成摩托羅拉的時候適應了很長的一段時間,因為兩者的確定和退出按鈕的順序是完全相反的。
在這一階段我們得出移動UI設計的一條很重要的啟發:移動UI設計需要滿足的最低要求必須是可用的。試想一下,如果當時手機廠商把功能菜單設計到屏幕的頂端,用戶便無法通過按鍵選擇,從而導致這個手機不可用。
1.1.2 第二階段:從可用到易用
2007年,蘋果公司發布了iPhone,如圖1-2所示,號稱重新定義了手機。事實上也確實如此,整個手機的正面只有一個按鍵(Home鍵),其余便是一整塊屏幕。在蘋果公司召開的發布會上,人們第一次看到iPhone時,整場驚嘆聲和掌聲不斷,這款完全使用觸控操作,擁有流暢動效的手機徹底顛覆了人們對手機的認識。

圖1-2
2008年,世界上運行的第一款谷歌研發的安卓(Android)系統手機HTC Dream(G1)發布,如圖1-3所示。當時的安卓系統還非常不完善,甚至連虛擬鍵盤都不支持。但到2009年,全球首款搭載安卓1.6操作系統的手機HTC Hero(G3)發布,如圖1-4所示。安卓開始有了同iPhone OS(在2010年更名為iOS)競爭的能力,并且HTC Hero手機成為2009年度最受歡迎的手機。

圖1-3

圖1-4
在該階段的UI設計,隨著手機性能和屏幕分辨率的不斷提升,界面的精細程度和動效得到了前所未有的提升。相比2007年之前運行Windows Mobile系統的觸屏手機,iOS和安卓設備的手機均使用了電容屏,即使沒有觸控筆也能精確點擊,該階段的UI均是為觸控而生,UI界面設計結合對拇指熱區的研究,以及使用眼動儀等設備來科學準確地定位用戶的行為習慣,無論圖標還是界面都是高度的擬物設計,通過對用戶生活中物體的擬真來盡可能降低新用戶的學習成本。
這一階段我們得出移動UI設計的第2個重要啟發:移動UI設計在滿足可用的前提下,應盡可能地做到易用。易用包括極低的學習成本,極少的思索過程以及可預見性的操作。極低的學習成本要求新用戶在面對一個新事物時,能盡快上手,不需要或者盡量少地給出新手指導;極少的思索過程要求用戶在使用一款軟件的時候能用他已經掌握的知識知道如何操作,這一過程是很自然的、不需要花時間去思考的;而可預見性的操作是指用戶在點擊屏幕后出現的界面是符合他心理預期的。
這一階段iOS和安卓的影響力越來越大,幾乎壟斷了整個觸屏智能手機系統。
1.1.3 第三階段:內容為王的設計追求減法和好用
到2010年,PC操作系統的霸主微軟推出了移動操作系統Windows Phone,如圖1-5所示。全球第一款搭載Windows Phone操作系統的手機諾基亞Lumia800于2011年上市,該系統采用全新的UI——Metro UI。該界面最大的特點是由動態磁貼(Live Tile)構成,與iOS和安卓以應用為主要呈現對象不同,Metro界面強調的是信息的本身。

圖1-5
Windows Phone(WP)的推出是UI設計史上一個重要的里程碑,雖然Windows Phone的市場份額非常少,但是Metro界面引發人們對“內容為王”的思考。2013年蘋果公司發布iOS7,如圖1-6所示,將iOS的風格全面帶入扁平化時代。而安卓則早在2011年發布的Android 4.0就有扁平設計的趨勢,更是在2014年推出全新的設計語言Material Design,如圖1-7所示,將移動UI的設計推向了一個新的時代。

圖1-6

圖1-7
在該階段,移動UI的設計開始朝著“內容為王”的方向發展,以iOS為例,從2007年發布到2013年推出的iOS7中間已經有近7年的時間,大部分用戶已經完全熟悉iOS的基本操作,此時便可以不再需要擬物化的界面來降低用戶的學習成本,反而建議通過更少的視覺干擾來讓用戶將注意力集中在內容本身。在該階段,手機屏幕越來越大,一些大屏手機用戶已經不能單手操作,這時候移動UI設計更是同手勢的運用相結合,如iOS系統的左滑出現刪除界面,下滑出現搜索界面等。
這一階段的移動UI設計更加理性和成熟,UI界面視覺元素占據界面比重越來越低,但是用戶能在更少的時間獲得更多的內容,并擁有了更加沉浸式的體驗。由此我們得出的第3個啟發:移動UI的設計在滿足可用的前提下,做到了易用的同時應追求好用。
通過對移動UI的發展的大致介紹,可以看到移動UI設計追求的過程是一個從可用到易用到好用的過程,并且也注意到硬件的發展和局限同樣對移動UI的設計有著至關重要的影響。
判斷一套UI是否優秀,視覺方面只是高層次的部分。我們首先應關注的是這套設計是否可行,畢竟設計界面的出發點,是為了解決用戶的某個問題。
大家在今后對某UI進行分析的時候,也可以從這3個層次進行思考和分析,也同樣建議大家利用業余時間多關注一下移動設備硬件的發展,了解我們設計的界面運行在何種設備上,對提升我們設計水平也有著很大的積極作用。
- 3ds Max印象 影視粒子特效全解析
- Vlog短視頻拍攝與剪輯從入門到精通
- 中文版Photoshop CS6寶典
- 新印象 Premiere 短視頻剪輯基礎與實戰(培訓教材版)
- Photoshop CS6摳圖從新手到高手
- 不能說的秘密:Photoshop風光攝影后期創意調色圣經
- iLike職場數碼照片修飾處理完美實現
- 行攝 Photoshop CS6后期修片高手之道
- 動畫大師煉成記:炮灰兔Maya動畫制作全解析(下冊)
- 48小時精通Flash CS6
- 手機攝影與短視頻后期處理228例
- 中文版CorelDRAW X5平面設計高級案例教程
- 剪輯的秘密
- Lightroom 4中文版完全自學教程
- 設計的思考:用戶體驗設計核心問答(加強版)