iOS是設(shè)計師們得以施展技能的絕佳舞臺。同時,蘋果也向開發(fā)者們提供了一系列專業(yè)化的技術(shù)方法,幫助他們從容應(yīng)對各種復(fù)雜的設(shè)計方案所帶來的挑戰(zhàn)。
伴隨著技術(shù)的革新與發(fā)展,越來越多的交互體驗?zāi)J秸谠杏TO(shè)計師的創(chuàng)作思路得以擴展,技術(shù)開發(fā)人員也擁有了更多高效的方法和工具來準(zhǔn)確的實現(xiàn)設(shè)計方案。設(shè)計與開發(fā)之間的障礙正在被各種新技術(shù)不斷的突破,項目中一些職能角色的性質(zhì)也在發(fā)生著變化,越來越多的設(shè)計師超越了相對傳統(tǒng)的專職領(lǐng)域,開始直接進(jìn)行開發(fā)方面的工作。
對于團隊來說,那些同時掌握著設(shè)計與開發(fā)技能的人員是非常有價值的。我們所說的這種“掌握”不單單是指對于技術(shù)概念或術(shù)語有基本程度的了解,更重要的是,設(shè)計師需要對開發(fā)技術(shù)在各方面的特性及優(yōu)缺點做到心中有數(shù),并能針對這些特性來創(chuàng)造最合理的設(shè)計方案。
當(dāng)然,要設(shè)計人員或團隊完全精通某種開發(fā)技能,并且在相關(guān)平臺中有過大量實戰(zhàn)經(jīng)驗,這是不現(xiàn)實的,也沒有必要。不過,如果設(shè)計師曾經(jīng)切身實踐過開發(fā)方面的工作,或是參加過相關(guān)的內(nèi)部培訓(xùn),那么這些經(jīng)歷通??梢杂行У貛椭麄兇蛟斐龈呖尚行缘脑O(shè)計方案。另外一方面,不妨向更加專業(yè)的技術(shù)人員進(jìn)行請教,讓他們幫忙找出那些有可能對設(shè)計方案的實現(xiàn)與還原造成影響的潛在因素。
接下來,我們將一同了解一些在iOS當(dāng)中負(fù)責(zé)實現(xiàn)各種視覺交互表現(xiàn)形式的核心技術(shù),并對它們各自的功能進(jìn)行分析。這些技術(shù)知識會幫助你對設(shè)計方案的可行性及相關(guān)的開發(fā)方式做到心中有數(shù)。
除此之外,我們還將了解一些其他方面的話題,包括界面外觀的自定義、通用型應(yīng)用、原生應(yīng)用與Web應(yīng)用的差異等。
關(guān)鍵性的圖形技術(shù)
作為設(shè)計人員,你需要對四種關(guān)鍵性的圖形技術(shù)有所了解。它們可以被分為兩大類,第一類是用于支持iOS本地渲染的蘋果專有技術(shù),而第二類涉及到OpenGL,這種第三方技術(shù)可以有效地利用硬件加速功能渲染復(fù)雜的圖形。怎樣從設(shè)計的角度來理解這些概念呢?簡單的說,第一類技術(shù)用于打造用戶界面及相關(guān)交互元素的視覺表現(xiàn)形式,而與OpenGL相關(guān)的第二類技術(shù)的主要作用,則是在游戲或類似的上下文環(huán)境中對各種極端復(fù)雜的圖形和動畫效果進(jìn)行即時渲染。
需要注意的一點是,這些技術(shù)雖然各司其職,但并非只能專門用作各自的上下文領(lǐng)域。通過對這些技術(shù)的作用加以理解,你就可以對設(shè)計方案的實現(xiàn)方式做到心知肚明。特別是當(dāng)你正在嘗試一些獨特的交互形式的時候,對于相關(guān)實現(xiàn)技術(shù)的了解就顯得尤為重要了。
UIKit
UIkit是用來打造iOS應(yīng)用的最重要的圖形技術(shù)框架,它提供了用于構(gòu)造觸屏設(shè)備用戶界面的全部工具和資源,并在整個交互體驗的塑造過程中扮演著至關(guān)重要的角色。
設(shè)計方案中的絕大部分內(nèi)容都需要通過UIKit來實現(xiàn),因為用戶在iOS中所接觸到的任何一種用戶界面控件都由它來負(fù)責(zé)定義和輸出,包括基本的按鈕、滑塊、文本域、切換開關(guān)等。除了這些標(biāo)準(zhǔn)控件之外,UIKit還提供了很多方法來幫助我們對控件的外觀進(jìn)行自定義。所以在界面元素的視覺表現(xiàn)形式上,我們不必受制于各種控件的默認(rèn)樣式。外觀自定義工作還會涉及到我們將要在后文中了解到的其他圖形技術(shù),但是相關(guān)的解決方案都是由UIKit在整體上控制的。
除了能夠使用你所指定的圖形文件(例如PNG圖片)對界面控件的外觀進(jìn)行自定義之外,UIKit還能夠程序化的渲染圖形對象,換句話說,它可以按照我們設(shè)定好的規(guī)則來繪制圖形。UIKit在這方面的能力與一些常見的矢量圖形繪制技術(shù)很相似。在類似的方法中,我們通常需要定義最基礎(chǔ)的幾何圖形或路徑,然后為這些路徑賦予具體的視覺屬性,以實現(xiàn)設(shè)計中的目標(biāo)樣式。不過有一點需要提醒一下:這種程序化的繪圖方式確實可以對生產(chǎn)效率起到一定的提升作用,然而另外一方面,你卻需要花費更多的時間與精力去跟進(jìn)到接下來開發(fā)流程當(dāng)中,以確保技術(shù)人員所定義的圖形屬性可以精確的還原你的設(shè)計方案。在實際項目中,最好能夠在開發(fā)流程之前與相關(guān)的技術(shù)人員一同對設(shè)計方案中的每一個細(xì)節(jié)進(jìn)行充分的評估,確定一套最合理的圖形技術(shù)方案。
核心圖形 (Core Graphics)
核心圖形是用來實現(xiàn)用戶界面視覺設(shè)計方案的重要技術(shù)框架。這套框架的核心是名為Quartz 2D的二維圖形渲染引擎,它不僅可以動態(tài)地渲染很多不同種類的圖形,而且還可以使應(yīng)用具有創(chuàng)建和編輯圖像的能力。
你可以將核心圖形理解成一種能夠幫助你擴展產(chǎn)品功能的技術(shù)框架。相比于UIKit,它更擅長于處理那些較為復(fù)雜的圖形;不過在必要的時候,也可以用來對普通用戶界面元素進(jìn)行渲染。相比之下,UIKit在界面外觀自定義方面的支持能力更強。所以,只有當(dāng)設(shè)計方案涉及到相對復(fù)雜的圖形變換、隊列處理和即時合成等方面的需求時,核心圖形技術(shù)框架才能真正體現(xiàn)出它的優(yōu)勢與價值。
核心動畫(Core Animation)
核心動畫向開發(fā)者們提供了一套用于創(chuàng)建和渲染動態(tài)交互效果的簡單易行的解決方案。換句話說,這項技術(shù)可以讓你的設(shè)計方案真正動起來。通過與UIKit的緊密配合,核心動畫可以將界面交互對象與動畫過渡效果進(jìn)行完美地整合。
作為一種強大的技術(shù)工具,核心動畫的能力范圍是非常廣泛的,它能使開發(fā)者在很多不同的層面上創(chuàng)建并控制交互對象的動畫屬性,而這對于設(shè)計師來說,則意味著能夠?qū)崿F(xiàn)的獨特而高度定制化的動畫效果的可能性幾乎是無限的。
OpenGL ES
OpenGL ES與前面幾項技術(shù)有所不同,它并非蘋果所創(chuàng)造并獨有的。OpenGL ES是面向嵌入式設(shè)備的OpenGL 3D圖形應(yīng)用程序接口(API),它必須與核心動畫協(xié)同配合,完成2D或3D圖形內(nèi)容的渲染輸出。
OpenGL ES可以通過硬件加速功能來渲染那些極端復(fù)雜的圖形,所以這項技術(shù)通常被用來在游戲當(dāng)中繪制那些需要進(jìn)行即時渲染的3D圖形。不過它的能力不限于此,通過與我們在前面了解到的那些技術(shù)的整合,它同樣可以被用來渲染普通的元素,甚至還能以全3D的方式打造整個應(yīng)用的界面環(huán)境。
是否有必要在應(yīng)用的開發(fā)中使用這項技術(shù),最終還是取決于設(shè)計方案所要求的視覺表現(xiàn)形式。對于那些沒有必要通過硬件加速功能來即時快速渲染的2D或3D圖形,其他技術(shù)同樣可以勝任。不過,如果你希望借助強大而復(fù)雜的技術(shù)工具對那些具有實驗性質(zhì)的視覺交互形式進(jìn)行探索和挖掘,那么OpenGL ES的強大能力將不會讓你失望。[!--empirenews.page--]
界面外觀的自定義
究竟有沒有必要對應(yīng)用的界面外觀進(jìn)行自定義?在打造設(shè)計方案的時候,我們通常會在這個問題上產(chǎn)生糾結(jié)。特別是在蘋果剛剛推出應(yīng)用商店的時候,這個問題顯得尤其普遍與突出。為了能夠盡快地將應(yīng)用發(fā)布出去,以占領(lǐng)市場先機,產(chǎn)品決策者們寧愿放棄掉很多至關(guān)重要的設(shè)計流程,以達(dá)到壓縮產(chǎn)品開發(fā)進(jìn)度的目的。如今,從整個應(yīng)用市場的角度來說,這種局面有所改善,人們再也不能忽視設(shè)計的重要性了,但是對于一些剛剛試水iOS應(yīng)用的團隊來說,類似的問題依然存在。
很多公司和產(chǎn)品團隊總是無法意識到高度定制化的界面外觀對于一款應(yīng)用產(chǎn)品的重要價值。其實道理很簡單,如果只使用SDK(開發(fā)工具包)提供的默認(rèn)控件來構(gòu)筑用戶界面,你的應(yīng)用就會完全處于iOS原生的視覺識別體系當(dāng)中,在用戶體驗方面也無法超越蘋果制定的范圍框架。雖然從本質(zhì)上講,這并不是一件壞事,但這種方式顯然無法將具有品牌特色的用戶體驗效應(yīng)整合到產(chǎn)品當(dāng)中;無論是視覺表現(xiàn)形式還是交互方式,都難以滿足用戶對于差異化的渴望。
拋開產(chǎn)品策略方面的因素,界面外觀的自定義工作在技術(shù)層面不存在任何障礙。正如我們在前文中看到的,蘋果在這方面有針對性的為開發(fā)者們提供了很多強大的圖形技術(shù)。從某種程度上說,這項工作本應(yīng)該成為整個設(shè)計開發(fā)流程中的一個重要且必要的組成部分。
有一點需要說明的是,界面外觀自定義的設(shè)計原則并非是涇渭分明的,實際上你確實不需要對所有的界面組成要素都進(jìn)行定制化的處理,在很多情況下,使用SDK提供的原生控件反而更加合理。作為設(shè)計師,你要做的就是處理好原生控件與自定義樣式之間的關(guān)系,將它們協(xié)調(diào)的整合在一起,確保用戶不會對這兩類元素產(chǎn)生彼此孤立與分化的感知。
除了使用新的圖形樣式對各種常規(guī)界面元素的外觀進(jìn)行自定義之外,你還可以創(chuàng)造出全新類型的的界面交互對象,并為它們賦予獨特的交互方式。不過,對于這種明顯超出了“換膚”范疇的做法,蘋果在用戶界面設(shè)計規(guī)范當(dāng)中所體現(xiàn)出的態(tài)度并不是具有鼓勵性的,因為全新類型的交互對象會對用戶的認(rèn)知造成很大的障礙。作為規(guī)范,持有相對謹(jǐn)慎的態(tài)度是合乎情理的,不過這種具有極高創(chuàng)新性質(zhì)的做法究竟能否成功,在很大程度上還取決于設(shè)計方案本身。過于隱晦的表現(xiàn)形式必然會使用戶產(chǎn)生迷惑與挫敗的感覺,無論它看上去有多酷;而簡單直白、易于理解的方案則具有相當(dāng)高的可行性。
通用型應(yīng)用
在過去的幾年中,iOS設(shè)備種類及規(guī)格的擴大發(fā)展為應(yīng)用設(shè)計師與開發(fā)者帶來了不少挑戰(zhàn)。從前,我們只需要為一種設(shè)備規(guī)格打造設(shè)計方案;隨著iPad的到來,事情開始變得復(fù)雜起來,我們必須針對新設(shè)備的特性考慮另外一個版本的設(shè)計方案。而開發(fā)團隊也面臨著同樣的問題,他們必須同時開發(fā)和維護(hù)兩個版本的應(yīng)用,工作量幾乎翻倍。
不久之前,通用型應(yīng)用的概念出現(xiàn)在了應(yīng)用商店當(dāng)中,這種應(yīng)用可以運行在任何類型的iOS設(shè)備當(dāng)中。它會自動判斷當(dāng)前的設(shè)備環(huán)境,并在用戶體驗形式上作出相應(yīng)的調(diào)整,例如可以通過不同的方式對用戶界面進(jìn)行渲染,在功能方面也會根據(jù)當(dāng)前平臺的具體情況發(fā)生相應(yīng)的改變。
對技術(shù)開發(fā)人員來說,通用型應(yīng)用是個好消息,它可以避免不同版本所帶來的重復(fù)性工作,極大地提高開發(fā)流程的生產(chǎn)效率。不過站在設(shè)計師的角度,你仍然需要準(zhǔn)確的把握不同設(shè)備在用戶行為及體驗?zāi)J缴系牟町?,確保設(shè)計方案可以適用于它們各自的系統(tǒng)平臺。而這種方式帶來的進(jìn)步也是顯而易見的。在必須針對不同設(shè)備打造兩個獨立版本的情況下,你需要對已有的一套設(shè)計方案進(jìn)行改造,在界面元素和交互形式等方面進(jìn)行全方位的調(diào)整,以適應(yīng)新的設(shè)備平臺,這必然會導(dǎo)致兩個版本的應(yīng)用在界面外觀和操作方式等方面存在顯著的差異;而對于通用型應(yīng)用,你可以在設(shè)計過程中預(yù)先考慮到兩種設(shè)備的不同特性,并且能夠在同一套設(shè)計方案中針對這些差異來定義局部樣式或功能的響應(yīng)式調(diào)整規(guī)則,從最大程度上確保用戶體驗的一致性。很多同時擁有兩款設(shè)備的用戶會在不同的需求情景中使用不同的設(shè)備來操作同一款應(yīng)用,在這種情況下,具有高度一致性的界面外觀及交互方式就顯得尤為重要了。
原生應(yīng)用與Web應(yīng)用
如今,關(guān)于是否真正有必要開發(fā)iOS原生應(yīng)用的問題,行業(yè)中還存在一些爭論。在當(dāng)前復(fù)雜紛亂的移動市場中,除非你有足夠的資源,否則為每一種設(shè)備平臺都單獨打造一套原生應(yīng)用確實是不大現(xiàn)實的。在很多情況下,移動版本的網(wǎng)站或是Web應(yīng)用都可以很好的滿足需求。不過,在你著手于Web方向的解決方案之前,有一些重要的問題必須事先了解清楚。
在用戶體驗方面,Web應(yīng)用與原生應(yīng)用之間的差距還是很明顯的。如今,有很多前端開發(fā)技術(shù)框架可以幫助我們打造基于瀏覽器運行的Web應(yīng)用。這些應(yīng)用無論在界面外觀還是交互方式上都與原生應(yīng)用非常相似。然而,在實際的移動設(shè)備上下文環(huán)境中,它們?nèi)匀粺o法與原生的方式相提并論。正像我們在前文中了解到的,蘋果為開發(fā)者們提供了很多強大的圖形技術(shù)工具,作為設(shè)計師,我們不僅可以在設(shè)計方案中打造高度定制化的界面外觀及交互效果,更重要的是,這些視覺表現(xiàn)形式都是在系統(tǒng)級別甚至硬件級別的功的支持下高性能的展現(xiàn)出來的。相比之下,基于瀏覽器運行的Web應(yīng)用解決方案通常只能提供數(shù)量非常有限的交互效果,而且在性能方面更是無法與原生應(yīng)用相比。所以,如果你正在考慮使用Web應(yīng)用的方式來打造產(chǎn)品,至少要確保你的設(shè)計方案當(dāng)中不會涉及到過多的視覺交互效果。
其實,對于這兩類應(yīng)用,我們并不需要爭論出一個非此即彼的結(jié)果,因為iOS允許這兩種形式在同一款應(yīng)用中兼容并包的存在,一款原生應(yīng)用當(dāng)中完全可以同時包括本地化的界面控件與基于Web的頁面元素。這種混合型應(yīng)用可以將兩者的優(yōu)勢淋漓盡致地發(fā)揮出來,使其自身即能擁有原生應(yīng)用高性能的表現(xiàn)力以及對硬件功能的訪問能力,同時又具備Web應(yīng)用的動態(tài)性與靈活性,并且更加易于維護(hù)。[!--empirenews.page--]
最終,對于解決方案的選擇仍然取決于產(chǎn)品自身的功能及用戶體驗需求。任何關(guān)于產(chǎn)品實現(xiàn)方式的討論都必須從這個角度出發(fā)。
總結(jié)
蘋果為開發(fā)者們提供了四種用于渲染界面對象和視覺交互效果的關(guān)鍵性圖形技術(shù):
UIKit:用于繪制界面元素的最重要的圖形技術(shù)框架,在整個交互體驗的塑造過程中扮演著至關(guān)重要的角色。
核心圖形(Core Graphics):二維圖形渲染引擎, 可以動態(tài)地渲染很多不同種類的圖形,并能使應(yīng)用具有創(chuàng)建和編輯圖像的能力。在必要的時候,也可以用來對普通用戶界面元素進(jìn)行渲染。
核心動畫(Core Animation):可以在UIKit的配合下,為用戶界面中的交互對象創(chuàng)建動態(tài)的視覺效果。
OpenGL ES:面向嵌入式設(shè)備的OpenGL 3D圖形應(yīng)用程序接口(API),可以通過硬件加速功能來渲染具有高性能表現(xiàn)的2D或3D圖像。
以這些圖形技術(shù)為后盾,我們可以在設(shè)計中大膽地嘗試高度定制化的用戶界面外觀與獨特的交互表現(xiàn)形式,甚至可以對交互對象的視覺行為屬性進(jìn)行實驗性的探索。
通用型應(yīng)用的概念可以幫助我們有效的降低開發(fā)與維護(hù)成本,將iPhone與iPad兩種版本的產(chǎn)品需求整合到同一款應(yīng)用當(dāng)中。不過,作為設(shè)計師,你仍然需要準(zhǔn)確的把握兩款設(shè)備在用戶行為及體驗?zāi)J缴系牟町悾_保設(shè)計方案可以適用于它們各自的系統(tǒng)平臺。這種方式所帶來的進(jìn)步是,你可以在設(shè)計過程中預(yù)先考慮到兩種設(shè)備的不同特性,并在同一套設(shè)計方案中針對這些差異來定義局部樣式或功能的響應(yīng)式調(diào)整規(guī)則,從最大程度上確保用戶體驗的一致性。