2013-12-27 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
一年以前,我(曹舒旻Kevin Cao)還在做各種Flash網(wǎng)站,而現(xiàn)在卻是擁有一間小工作室的iOS獨(dú)立開(kāi)發(fā)者。從互動(dòng)廣告行業(yè)轉(zhuǎn)型到移動(dòng)互聯(lián)網(wǎng),也許也是正在閱讀本文的你心中的一點(diǎn)小念頭。即便你仍然打算奮斗在互動(dòng)廣告行業(yè),對(duì)移動(dòng)互聯(lián)網(wǎng)帶來(lái)的沖擊也不可能置身事外。
移動(dòng)互聯(lián)網(wǎng),正在真真切切的改變我們每一個(gè)人的生活,對(duì)你我正在從事的事業(yè),都不能例外。那么,如何順勢(shì)而為,讓我們能夠在新的時(shí)代背景下游刃有余呢。
首 先你應(yīng)當(dāng)成為移動(dòng)互聯(lián)網(wǎng)的應(yīng)用達(dá)人:擁有一款移動(dòng)設(shè)備,并成為重度用戶。你得比你的客戶或目標(biāo)受眾更加了解這種新的媒介。你要學(xué)會(huì)觀察和分析這些移動(dòng)設(shè)備 產(chǎn)品設(shè)計(jì)背后的精髓,包括但不局限于:用戶手持設(shè)備的使用習(xí)慣;屏幕尺寸限制對(duì)設(shè)計(jì)的影響;多點(diǎn)觸摸的操作方式;單窗口應(yīng)用和多任務(wù)的設(shè)計(jì)方法等。此外還 有GPS定位,陀螺儀等特有硬件模塊的玩法。
然后你還應(yīng)當(dāng)看看Apple的人機(jī)交互設(shè)計(jì)指南,了解那些細(xì)節(jié)到有些龜毛的設(shè)計(jì)建議背后的理念。這也保證你在發(fā)想創(chuàng)意的時(shí)候不至于偏差得太過(guò)離譜。
此刻你一定已經(jīng)有了一個(gè)不錯(cuò)的想法(或者靠譜的Brief)?,F(xiàn)在到了我們盡情發(fā)揮創(chuàng)意和設(shè)計(jì)才華的時(shí)刻。 流行如“下拉刷新”的操作可不是一開(kāi)始就寫在設(shè)計(jì)指南里的,而是由與我們一樣的創(chuàng)作者想出來(lái)的絕妙創(chuàng)意。這絕對(duì)是重度用戶才能發(fā)想出來(lái)的直覺(jué)式設(shè)計(jì)的最佳范例。還有Instapaper客戶端的傾仰翻頁(yè),以及前段時(shí)間非常流行的Clear式輕掃和捏合操作,也都代表了交互設(shè)計(jì)的頂尖水平。 雖然在這個(gè)領(lǐng)域不乏一些專業(yè)的UI設(shè)計(jì)公司,還有各種互聯(lián)網(wǎng)企業(yè)的UED正規(guī)軍。但是在如何把移動(dòng)應(yīng)用設(shè)計(jì)得有愛(ài)或有范的問(wèn)題上,我們互動(dòng)這行的設(shè)計(jì)師也不甘示弱。我們看看私密照片分享應(yīng)用Path 2.0中 的創(chuàng)新折疊菜單。吸引了不少眼球吧。而我們拿它回過(guò)頭來(lái)對(duì)比閃客們N年以前就已經(jīng)實(shí)現(xiàn)的各種動(dòng)態(tài)菜單,其效果不也顯得黯然失色嗎。用戶在iOS應(yīng)用上已經(jīng) 看了好幾年標(biāo)準(zhǔn)界面的產(chǎn)物,難免開(kāi)始產(chǎn)生審美疲勞?,F(xiàn)在進(jìn)入了重視用戶體驗(yàn)的時(shí)代,互動(dòng)從業(yè)者們?cè)谝曈X(jué)表現(xiàn)和交互效果上的經(jīng)驗(yàn)積累在此是一大優(yōu)勢(shì)。相比其 他行業(yè)的轉(zhuǎn)型者們,我們更容易創(chuàng)作出令人驚艷的作品。
但是這里也要提醒大家,我 們的這種優(yōu)勢(shì)有時(shí)候也是一種制約。視覺(jué)效果是一把雙刃劍,我們不能簡(jiǎn)單把之前為互聯(lián)網(wǎng)做設(shè)計(jì)的經(jīng)驗(yàn)生搬硬套到移動(dòng)平臺(tái)上。我就見(jiàn)過(guò)為了展示些好玩的動(dòng)畫效 果,卻把用戶真正需求的東西放在流程的后面的錯(cuò)誤做法。移動(dòng)設(shè)備還受到屏幕和電量的限制,在具體設(shè)計(jì)中我們應(yīng)當(dāng)把這些小亮點(diǎn)放在真正需要它們的地方,而把 能夠提升用戶體驗(yàn)的設(shè)計(jì)放在第一位。
講完了設(shè)計(jì)層面,我再來(lái)談?wù)劶夹g(shù)層面。在互動(dòng)廣告從業(yè)的前端技術(shù)人員大都來(lái)自HTML或Flash領(lǐng) 域,在面臨移動(dòng)時(shí)代的轉(zhuǎn)型時(shí),遇到最實(shí)際的是一個(gè)難以抉擇的問(wèn)題:要重頭開(kāi)始學(xué)習(xí)原生開(kāi)發(fā)技術(shù)(Objective-C之于iOS,Java之于 Android)還是延續(xù)現(xiàn)在的知識(shí)體系。這個(gè)問(wèn)題沒(méi)有標(biāo)準(zhǔn)答案,而是需要與自己的職業(yè)定位結(jié)合來(lái)分析。
我們現(xiàn)在面對(duì)的是一個(gè)碎片化的平 臺(tái),原先用Flash技術(shù)覆蓋大部分前端需求的好日子一去不復(fù)返。最有希望的明日之星HTML5目前還受限于瀏覽器普及度和性能制約,尚不足以支撐原先在 Flash技術(shù)上能夠達(dá)到的高度。而運(yùn)用原生語(yǔ)言針對(duì)不同平臺(tái)進(jìn)行定制開(kāi)發(fā)的結(jié)果是成本和周期的成倍增長(zhǎng)。Agency在這種達(dá)成目標(biāo)與成本控制的博弈 下,只能根據(jù)各種內(nèi)外因素自行權(quán)衡。大一點(diǎn)的項(xiàng)目能夠繼續(xù)鋪全平臺(tái),而預(yù)算小的只能舍棄其一。
這里我分享一下自己的經(jīng)歷。去年我初次開(kāi)發(fā)一款移動(dòng)應(yīng)用的時(shí)候,首先選擇了JavaScript+PhoneGap的技術(shù)方案。為了模擬原生的UI,在網(wǎng)上搜索對(duì)比了不少框架(Zepto.js,JQMobile,Sencha Touch等)。最后選用Sencha Touch,一周之內(nèi)就把應(yīng)用做出來(lái)了。但是在開(kāi)發(fā)過(guò)程中,我漸漸覺(jué)得用JavaScript做嚴(yán)謹(jǐn)?shù)拿嫦驅(qū)ο箝_(kāi)發(fā)比較別扭。別誤會(huì),我就是從學(xué)習(xí)腳本語(yǔ)言來(lái)入門編程的,對(duì)這類語(yǔ)言只有好感。我認(rèn)為只有jQuery這 種Write Less, Do More的思路才能玩出腳本語(yǔ)言靈活輕便的精髓,而用腳本去搞面向?qū)ο笤賮?lái)開(kāi)發(fā)常規(guī)UI的軟件,還不如直接上原生的面向?qū)ο髞?lái)得爽快。再加上后來(lái)遇到了難 以解決的Mobile Safari內(nèi)存限制問(wèn)題,最終我還是決定轉(zhuǎn)向用Objective-C開(kāi)發(fā)。但必須說(shuō)的是掌握一款JavaScript移動(dòng)開(kāi)發(fā)框架也是很有好處的,至 少能夠很快的驗(yàn)證產(chǎn)品的想法。
另外還有一個(gè)朋友與我分享的案例。他用AIR開(kāi)發(fā)一款看美劇的應(yīng)用。首先嘗試用Flex自帶的Mobile組件,不出意外的各種卡頓。于是換用純ActionScript來(lái)做,由于缺乏基本組件支持只能基于AsWing來(lái) 改。據(jù)說(shuō)他已經(jīng)盡量的優(yōu)化效能,還是沒(méi)辦法完全達(dá)到原生組件的效率,在表格滾動(dòng)的時(shí)候感覺(jué)特別明顯。這說(shuō)明雖然語(yǔ)言遷移沒(méi)花費(fèi)多少成本,但是在用AIR技 術(shù)做移動(dòng)開(kāi)發(fā),在具體操作上,還是有不少的坑要開(kāi)發(fā)者自己來(lái)填。更別提每次上真機(jī)調(diào)試時(shí)候的各種不便了。雖然現(xiàn)在已經(jīng)有基于Starling的UI控件(GPU加速)和更加方便的USB調(diào)試,但是我認(rèn)為Adobe在移動(dòng)平臺(tái)上的作為還是慢了。
接 下來(lái)談?wù)刬OS原生開(kāi)發(fā),很多人對(duì)其望而生畏都是被Objective-C怪異的語(yǔ)法給嚇到了。就我個(gè)人的經(jīng)驗(yàn),消除這種恐懼最直接的辦法就是找一段代碼 到Xcode中照著打一遍。通過(guò)Xcode的代碼輔助功能幫助你理解Objective-C語(yǔ)句的結(jié)構(gòu)(當(dāng)你親眼看到Xcode生動(dòng)的匹配提示,你就會(huì)明 白我的意思)。
一旦你熟悉了那些怪異的方括號(hào)語(yǔ)法以后,其他的就迎刃而解了。Objective-C 2.0以后對(duì)屬性存取引入了點(diǎn)語(yǔ)法,也縮小了與其他語(yǔ)言在書寫上的差異性。為此一些老派的Objective-C程序員還表示抗議呢。實(shí)際上大多數(shù)人在學(xué) 會(huì)了Objective-C后,都會(huì)認(rèn)同這個(gè)語(yǔ)言的優(yōu)雅設(shè)計(jì)。
基本語(yǔ)言入門了以后,我們就可以嘗試在CocoaTouch框 架上做些小例子。在網(wǎng)上的各種教程中的是一套斯坦福的iPhone開(kāi)發(fā)公開(kāi)課教程。目前的是對(duì)應(yīng)iOS5的2011版。授課的老頭功底深厚, 講得很好。如果你是現(xiàn)在才剛接觸iOS開(kāi)發(fā)的,建議直接學(xué)習(xí)iOS5以上的版本, 新增的一些高級(jí)語(yǔ)言特性會(huì)讓你的開(kāi)發(fā)轉(zhuǎn)型難度更小一些。 老版本的教程就不要看了,以免在概念還沒(méi)形成的階段造成混淆。進(jìn)展到下一階段以后還是免不了要和內(nèi)存引用計(jì)數(shù)機(jī)制等相對(duì)比較晦澀難懂的知識(shí)點(diǎn)打交道,但在 那之前學(xué)到的知識(shí)至少能夠支持你寫出一款不錯(cuò)的應(yīng)用了。
在此之后的修行就看個(gè)人了,伴隨開(kāi)發(fā)生涯最好的資料還是Apple的官方文檔?;镜?a target="_blank">視圖和控制器開(kāi)發(fā)指南,事件處理機(jī)制等應(yīng)該熟讀N遍。像我比較關(guān)注表現(xiàn)層的繪圖和動(dòng)畫技術(shù),就要看Quartz 2D和Core Animation指南。其他的不同框架只要知道是派什么用途的就好,具體知識(shí)要靠在項(xiàng)目實(shí)戰(zhàn)中逐步掌握。全部通關(guān)一次至少也要1到2年后了。對(duì)游戲比較感興趣的就要去學(xué)習(xí)Cocos2D框架,據(jù)說(shuō)和Flash還是挺接近的。
隨著技術(shù)研究的進(jìn)一步深入,其實(shí)我們遇到的挑戰(zhàn)會(huì)更大。選擇了原生語(yǔ)言開(kāi)發(fā)就意味著與眾多傳統(tǒng)編程領(lǐng)域轉(zhuǎn)型而來(lái)的程序員競(jìng)爭(zhēng),而且原生語(yǔ)言開(kāi)發(fā)進(jìn)階就不得不接觸越來(lái)越多的處于底層的技術(shù)。但是反過(guò)來(lái)看,如果沒(méi)有挑戰(zhàn),不就沒(méi)意思了,不是嗎。
以上觀點(diǎn)純屬個(gè)人之談,希望對(duì)大家有所幫助,如有不妥之處歡迎留言指正。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.bouu.cn