提高設計還原度!寫給設計師的iOS前端教程(一)
提高設計還原度!寫給設計師的iOS前端教程(一)-移動閱讀二維碼

@小乖乖老爸?:你是不是有這樣的經歷?自己覺得還不錯的設計,等工程師做出來,放在手機上一看,怎么看都不對勁。當你有這種疑惑的時候,就是設計還原度的問題了。想提高設計還原度,盡可能縮小設計稿與完成品之間的差距嗎?這篇文章就是為了這個目的而存在的。

iOS的確有許多教程,但是幫助文檔你有耐心看嗎?寫給工程師的教程你看得懂嗎?適合設計師學習的iOS前端教程實在太少了,至少我沒搜了一下,沒找到。這也難怪,會寫代碼的設計師本來就少,還愿意寫下來的,那就更少了。正好最近我要向部門的同事分享簡單的iOS前端知識,就順便寫下來,也許能幫助到更多的朋友吧。

二、設計師是怎么跟工程師合作的?

設計師與工程師之間的合作,可以分成三個階段:

  • 前期,要做交互稿(低保真原型)和視覺稿(高保真原型);
  • 中期,要切圖,做標注;
  • 后期,要配合前端實現,俗稱「調UI」;

其中第三階段,調UI的方法,大致可以分三種:

方法一、肉眼看+嘴巴說

如果你面相不凡骨骼清奇天生一副像素眼,一眼就能看出差了幾個像素,直接告訴工程師該怎么怎么改,那也是可以的。但大部分情況是類似這樣的:

工程師:怎么改?
設計師:往左。。。10個像素吧。
工程師:(十秒鐘改好,一分鐘運行出來)好了嗎?
設計師:太靠左了,再向右4個像素。
工程師:(十秒鐘改好,一分鐘運行出來)好了嗎?
設計師:太靠右了,再向左2個像素。
工程師:我擦,你是猴子請來耍我的吧?

方法二、對比+注釋

讓工程師幫你截個圖,然后你拿過來跟設計稿進行比對。就像在玩「大家來找茬」,把不同的地方標注出來。然后工程師按照你的標注來修改。這個方法比較簡單實用,而且設計師和工程師不用黏在一塊,各自干活,各自精彩,效率更高。

按理說,問題已經解決了,可以洗洗睡了??墒乾F實情況是,工程師的首要工作保證自己的工作做完,要是碰上工期趕的,能做完能把功能跑通,就算不錯了,還奢望他陪你調UI?

方法三、自己動手改代碼

nnd,不求這幫爺了,老子/老娘自己來!

三、為什么設計師要學點iOS前端技術?

除了上面說的,是被逼出來的。主動學一點iOS前端技術,還是有些幫助的。

  • 你能保證自己的設計不打折的實現出來,有更強的把控力;
  • 你能估計程序實現的難度,在設計的過程中就能考慮到,換位思考,替工程師著想,這對大家都好;
  • 你能用工程師聽得懂的方式來跟他們交流,比如拽一點術語,提高溝通的效率;

四、要準備些什么?

要有臺Mac,不管是iMac還是MacBook;

裝個版本控制軟件,把最新的代碼弄下來,改好之后再提交上去。常用的版本控制是Git,工程師通常會教你用命令行,別信他的,你是設計師,當然要用圖形界面的啦,推薦用Source Tree。具體操作方法有點復雜,都可以寫篇教程了,用到的時候你還是找工程師幫忙吧

從Mac的App store里下載個Xcode。

運行Xcode,打開項目,運行。稍等片刻,模擬器里就你的app就運行起來了,有點小激動吧?

五、開源了一個小項目

有位朋友說,我想學,但是SourceTree怎么弄到代碼你又不說清楚,而且公司的代碼沒有權限也下載不了啊。

我在GitHub上做了一個開源的小項目,整個app簡單到只有一個頁面,方便大家練手。

按照上面說的,在Mac上安裝好Source Tree和Xcode,然后……

第一步,打開Source Tree,Clone from URL

寫給設計師的iOS前端教程 (4)

△ Source Tree的主界面

第二步,Clone a repository

彈出窗口的第一行里填:https://github.com/sesamebolus/iOS_tutorial.git

第二行是本地目錄,自己選一個。

第三行是項目的名字,默認會有一個的,你可以隨便改。

寫給設計師的iOS前端教程 (1)

△ Source Tree的彈出窗口

第三步,點「Clone」之后,一分鐘左右就能下載好代碼。

第四步,用Xcode打開項目的文件夾(第二步里你自己選的文件夾)。另一個方法是打開項目文件夾,雙擊中間的文件,Xcode就會自動打開了。

寫給設計師的iOS前端教程 (3)

△ 項目文件夾

第五步,在Xcode里選擇一個模擬器(比如iPhone 6s),然后點一下左邊的三角形按鈕(快捷鍵 command+R),項目就運行起來了,趕緊去試試你的第一個iOS項目吧。

寫給設計師的iOS前端教程 (2)

 

本文鏈接:http://www.casaleticia.com/ios-front-end-tutorial-1.html
本文標簽: , , , , , ,