有沒有推薦設UI計師學的代碼，例如xcode，JQ等輕體量上手快的IDE，主要為了實現動效和前端對接？

01-24

謝謝諸位前輩提醒和解答，問題和解釋還得斟酌下。 ----2016.8.23
html，css基礎是已經自學的差不多了，還有很多細節需要再補習下，最近js基礎也快告近尾聲。想在接下來學習bootstrap和JQ等框架，關於H5和css3學校會教的，但是自從學了js以來就感覺自己有些力不從心，畢竟一隻藝考出身的學渣，放棄思考那麼多年，一下子學起代碼來，邏輯思維跟不上。為了適應快速高效的開發設計，最近聽朋友推薦學習sketch和hype 3，順便下載了princple，然後了解到xcode很容易上手，適合設計師學習，然後看這些年移動互聯網的發展速度覺得不懂移動端開發都不敢出門找工作

術業有專攻，你如果只是想做動效找到能準確表達自己思路的工具即可，至於最終怎麼實現（除非你自己動手）讓工程師對著你的demo和timeline自己琢磨

入門推薦動畫演示用Principle，場景跳轉Flinto/Invision/Marvel...，想玩玩自己動手就Storyboard，覺得這些都太簡單再去學什麼AE/QC/FramerJS

Meng To 君之前在 Medium 上發的一系列文章應該是正中題主下懷了：https://medium.com/learning-xcode-as-a-designer

另外他也把一些教程結集出版了，但是我並不知道和上面免費的文章相比有哪些補充，所以無法推薦，題主可以自行前往：https://designcode.io

Xcode是IDE，不是編程語言。Xcode並不容易上手，不要以為Interface Builder界面漂亮，劃拉一下iOS的組件就算是容易設計了。

Xcode和Interface Builder是程序員的工具。對於UI設計師做草稿並不合適。因為：

1. Storyboard不能即時顯示動畫效果。

2. 顯示設計元素只是Storyboard的一部分功能，Storyboard大部分的設置都是和代碼直接有關的。

3. Storyboard只能顯示默認系統組件的視覺效果。要顯示自定義效果，需要先編碼實現。用Swift/Objective C和UIAnimation/CoreGraphics寫自定義效果比CSS難數倍，更不是「輕體量上手快」。

4. 就算你鼓搗出了storyboard，程序員也只能看看，不能在上面直接加上編碼的，所以並沒有省什麼工作量。開發的時候storyboard是有各種編程方面的考慮的。

我覺得你太浮躁，各種技術一抓一大把。作為UI設計師的首要工作是設計好UI（廢話），以及向開發人員有效傳達你的設計。Apple官方推薦用Keynote做設計：

https://developer.apple.com/videos/play/wwdc2016/805/

學習設計的其實最重要的就是html寫好，CSS寫好。HTML是肉體CSS是衣服，JS是動作（把衣服穿到肉體上，或者指揮肉體做其他動作）

學設計的首要敵人就是：布局！！而布局就是html跟CSS合作，js在其中當協調者、輔助者。

這本書介紹了用盡量少的CSS代碼，完成一些看似不可能的事！不可思議！

CSS魔法

設計師覺學編程，如果不是想徹底轉行前端開發，不推薦直接去學習html,css,js，因為這個過程很枯燥，需要很長時間。還是建議靠興趣趨動學習，我推薦兩個軟體：

1、交互原型設計工具framer，它把設計和編程結合，很適合做一些小動效。

2、圖形化編程工具processing，讓你可以用代碼畫畫。

設計師學習編程，能看到腦子裡的東西被自己親手實現的成就感才是最大的動力。

每次看到「我HTML和CSS都學完了」的題主我都要呵呵一笑。

只是滿足動畫效果的話，Principle 就是無敵的。

不建議按照這個思路走下去，感覺錯了。

學Js唄. IDE是 webstorm

既然是為了實現動效和前端對接，不必追求對編程語言系統化的了解，也不用太考慮演算法效率，所以語言或者工具是其次，關鍵是分析動效或前端的實現策略，掌握一些基礎的原型工具/代碼使用方法，建議結合具體案例學習，跟著教程走，自己多做些demo，多練幾次就熟手了。

xcode還需要學啊

偶都是interface builder上讓美工直接調如果真想入門應該5分鐘就會了

xcode delphi這些客戶端的gui定製甩前端三千條街

@vczh 哥，希望你能幫我答疑