UI設計師要不要學習前端？
UI設計師做完設計稿交給前端之後，前端小哥哥說這個效果實現不了，那個效果實現不了，我要不要學習前端的一些知識技巧？
有時間學習，就多學點，這樣未來職業發展路徑比較寬，更了解程序員，設計的頁面更好看
有必要學習一些前端
UI設計不一定需要精通前端，但是如果UI設計了解前端可以減少和開發人員溝通的技術成本，讓團隊協作更加高效。比如項目經理如果不懂技術，就很容易被開發、測試忽悠，再安排項目節點時就不能準確的預估項目周期。如果設計不懂點前端，前端小哥哥會說這個那個效果實現不了。
UI設計不一定要精通前端，懂點技術會減少溝通成本，在工作中也更有優勢。
那UI設計如何學習前端，需要學習到什麼程度呢？
我們分享一個前端教程，這裡面詳細講解了UI設計中的Web前端設計規則及工具，可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式。HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin，是CSS的語法，這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多，在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標籤和版頭、導航欄
編寫的網頁中插入圖片，可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標籤以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標籤和Banner鏈接定位
Banner是網路廣告最早採用的形式，也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌，當用戶點擊這些橫幅的時候，通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標籤、超鏈接標籤、固定定位和絕對定位、相對定位
& 標籤用於定義超鏈接，用於從一張頁面鏈接到另一張頁面。用於設置錨點，用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示，需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、Input表單
input表單可以獲取用戶的信息，做出對應的動作，教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分，UI設計如果能夠了解前端知識，在設計中可以更好的考慮實現問題，也能夠更好的和開發人員交流，也能夠提高團隊協作的效率，加速項目的進度。
首先，UI設計師具備一定的前端代碼編寫能力，能夠在一定程度上提升自身的崗位競爭力，未來的發展空間也會更大。
UI設計師在互聯網時代，尤其是移動互聯網時代得到了廣泛的關注，一個重要的原因是互聯網產品對於用戶的使用體驗越來越關注，所以目前整個IT行業有大量的UI設計師，尤其是互聯網公司更是釋放出了大量的UI設計崗位。
UI設計師主要的崗位任務包括交互設計和視覺設計兩部分，通常在產品經理和策劃完成方案設計之後，UI設計師就需要完成產品原型的構建，包括交互原型和視覺方案。UI設計師在反覆與產品經理溝通並修改之後，最終把設計原型交由開發團隊進行開發，以後在每次版本迭代的時候，都離不開UI設計師的參與，以保障產品的使用體驗度不斷提升。所以，在崗位職責方面，UI設計師通常並不需要參與代碼的編寫。
在當前大數據、雲計算等技術的推動下，UI設計師的崗位工作邊界在不斷得到拓展，一些UI設計工具也整合了一些程序設計的內容，這些內容大多都是基於前端代碼的，所以在這種情況下，UI設計師掌握前端編碼技術就變得有必要了。
目前在不少小型開發團隊中，UI設計師往往也會參與到前端開發任務中，包括Web前端開發、Android開發、iOS開發和各種小程序開發等，一部分UI設計師也需要掌握一定的大數據呈現端的開發知識。所以，在當前的職場環境下，要想具備更強的崗位競爭力，掌握一定的前端開發技術對於UI設計師來說，還是有必要的。
學個鎚子
最好了解下前端的實現方式，這樣配合起來比較順暢
前言導讀
前端，或者說我所認為的前端，狹義範圍內指的是Web網頁的頁面展現，頁面交互和後台數據反饋交換甚至控制。更廣義的範圍應該指的是所有電子設備，無論是安卓，iOS，電視，Ps4 ,任天堂遊戲機甚至是小霸王學習機，未來的VR，AR等等可視界面的總體學問，其中牽扯到可視屏幕尺寸，解析度，硬體系統支持，交互條件，可操作性，使用場景，等等一系列問題...
而今天我聊了解前端這個話題，僅僅指的是狹義範圍內對Web網頁的頁面展現，頁面交互熟悉以及對前後台數據交換概念的基本理解（這是接下來文章所聊的前端定義範圍）。
美工的由來
那麼，肯定很多小夥伴們會說：我特么就是個小小搬磚設計師，還要掰扯一邊腦袋去學代碼，這不是要我老命嗎？我一個美術專業出身，手裡日復一日拿著的都是畫筆，突然叫我去扒拉扒拉往鍵盤上瘋狂輸出ABCD，Hello World什麼的，我真的難以接受…不是有專門的前端工程師嗎，為什麼要我去學這種與設計師無關的東西。世界那麼大，我想去看看，請不要騙我去學前端...
呃...那麼，咱們換個角度，身為設計師的你是否遇到過如下幾個場景...
No.1 產品經理：什麼情況？網頁上的按鈕這麼奇怪…這顏色大小也是沒誰了...
某設計師：稍等...打開網頁…我ca...這尼瑪什麼情況，我之前的標註切圖不是這樣的...
No.2 前端小哥：什麼情況？你這粒子效果…不說開發難度，你知道性能瓶頸嗎？瀏覽器兼容...
某設計師：前面不是說隨便設計…我還花了一天做的動畫...這效果應該沒問題吧…
No.3 前端小哥：什麼情況？這個布局有問題，小尺寸上我沒法實現…
某設計師：我設計的就是這個980寬度…你@#%*… ￥……*！@%阿西吧…
No.4 技術總監：這個功能目前做不到，你讓「美工」改一下那個「方塊」…
某設計師：我是美工…美工...改一下那個「方塊」…尼瑪...方塊！他說那個「方塊」！！！
No.X And so on…
某技術總監AV你的話：美工這職務其實聽起來蠻好聽的，美術工程師嘛～扒拉扒拉...
You：what f**k ?我讀書少表騙我…叫我改設計的時候從來都是你指揮上上下下ABAB，在放大中縮小一點，以及實在不行就回到初稿的中心思想…
從以上場景，排除外在因素，呃...那麼，客觀的從自身角度找問題的話，可以總結一些問題…
1.設計師的能力單一，一般埋頭做圖，在整個項目中的影響力較低。
2.對前端基本知識一無所知，出了問題無從下手，只能由別人決定，非常被動。
3.項目中各職務之間存在有職務邊界效應，極少數人關注到。所以...就給了「中間商賺了差價」（必考題劃重點）…
設計師是處在項目中承上啟下的作用，應該是在整個產品研發從抽象到具象過程中起到最重要的角色才對！怎麼會淪為其他職位眼中可有可無任人魚肉的美工？智能PS助手？說好的設計影響力？說好的設計賦能？
設計師最近這幾年都流行一些UED，全鏈路設計，服務設計等一些概念，我覺得思路是對的，但涉及面太廣了。
在針對在實際工作中，設計師的眼界，認知等，大部份人思維聚焦還停留在平面設計時代中，排版，色彩，對比，有關視覺方面類的。雖然交互設計也在國內慢慢開始發展，受到了廣大業界人士的關注。
但是，設計的實現呢？迄今為止很少人關注這些…設計師總覺得這些都是前端的事，事不關己，高高掛起；作為前端哥哥們也認為自己只是代碼搬磚的，照葫蘆畫瓢，設計美感理念？Excuse me?
而這種看似不起眼甚至三不管的問題卻經常大幅度導致項目漏水的結果，然後職務之間互相甩guo...
所以這麼看來，作為設計師的你，想成為一名真正有說服力影響力的你，了解前端基本知識，其實是很有必要的...就像優秀的建築設計師一樣，不是簡單停留在設計方案和圖紙上，是要非常了解力學結構，成本估算，建築材料的使用和各自的局限性，實際地理和環境等等。這樣才能把你的項目落到實處，達成你設計思維和設計賦能的輸出最大化。
胸中有丘壑，眼裡存山河。項目中的設計師不僅要上的廳堂，下得廚房，跟產品經理聊交互，聊體驗。還更應該要關注你的設計產品的實際還原度，主動向前跨出一步，與開發人員更好的協作。
學習目的
學習前端基本知識，其實是能給你帶來很大的好處的。但不是為了學習而學習，而是更應該充分體現在你的項目工作中。
例如在項目中，在你做動畫效果，在你實際製作之前，就能充分意識到後續開發可能會帶來的一些問題和困難；與研發人員如何更好的交付自己的輸出稿；指導研發人員調整界面上的問題；項目研討會上提出建設性且有實際意義的設計解決方案；用研發的語言和思維去和研發溝通。
這樣，你才能真真正正的擺脫你一個美工的宿命，而不是只能被動的聽研發去掉那個該死的「方塊」。
因為沒有影響力就沒有發言權，沒有發言權就又沒有影響力…我們只是大自然的搬運工。
常見問答
1.假如要學習前端我應該學習哪些知識呢？還有大概範圍？
其實就是最基本的前端Html + Css + Javascript(原理) 頁面布局 類似前端框架Bootstrap（柵格系統，響應設計有關）動畫效果實現原理理解（animation）甚至可以是一些可視化前端插件了解。
現在前端技術範圍很廣，還是主要以你的項目目的為主，有針對的去了解，也可以像前端人員請教。
2.為什麼要學前端，學會了前端那還有前端工程師什麼事嗎？
Too young too simple sometimes native.設計師並不能取代前端，設計師學習前端的最主要目的是能很好的與前端人員溝通，修改和調整你的設計，而不會在出了問題後一臉懵逼，一問三不知，甚至前端工程師問你時候答非所問。
學會了一些前端知識也不能沾沾自喜，有自我優越感，因為前端工程師永遠是專業的技術員，不要拿你的業餘愛好來挑戰他們吃飯的本事。除非你的設計和代碼都是專業級別的。
3.我是一個文科生，對學習前端代碼這類是否有很大困難？
其實還是在乎與個人，無所謂專業，我們設計師所要了解的前端知識只是最基礎的前端技術，所以客觀來說難度並不大。只要你有心學是不成問題，況且你的工作中還有那麼多可愛的前端哥哥們等著你去聊騷，讓他們明白你不是一個美工，你是有夢想的鹹魚...
4.學習前端還能帶來些什麼好處？
你將是設計里最懂開發的，你也會成為開發的好朋友。你可以自己建個有設計感又有創意的小網站發表自己的文章和心情也是個不錯的主意喲～但學的知識切記不要出去顯擺，因為前端的世界很大很大...
5.特么的騙我學前端，到底收了多少好處？
1.沒發廣告（主要是接不到），2.沒泡到妹（你敢聊我就敢泡），3.沒有Kpi（沒有Kpi就沒有新中國），4.沒開培訓班（可以考慮代言呀），所以並沒有好處。反而可能會引來許多不贊同的意見。總之，為你的設計師職業發展做好長遠打算，這年頭人心太浮躁，自學點啥總是穩賺不虧。
文章寄語
設計師的職位看似很光鮮，各種UI設計師，交互設計師，設計主管，設計總監，五年，八年，十年設計經驗…個人認為設計師的水平還是應該要以結果為導向，綜合能力評估為主。
一個好的設計師，應該是多方面的。也許你的視覺很棒，你的創意也不錯，也有產品思維，但終歸是紙面上的成果。假如項目的結果是打折的，五折或者是六七折，再好的設計稿又有什麼用呢？
一些設計上的務虛還是絕對有必要的，是可以張口閉口的用戶體驗，以人為本。但當你踏踏實實坐下來 在檢查你的設計時候，你是否從現實角度來思考你的設計。你的設計是否合理可行？有沒有工作斷檔地帶？考慮過實際條件成本和限制嗎？
希望你我都能做一個主動且創新的設計師，讓想像真正變為現實。
作者：陳踢缺er
轉載地址：
設計師的你需要了解前端嗎？-UI中國用戶體驗設計平台?www.ui.cn
來源：UI中國
你學了是想自己寫么？你是前端還是他是前端？這是他的本職工作還是你的？」實現不了「有很多情況，是技術上實現不了還是可以實現但是比較麻煩所以不想實現還是其他什麼原因，你負責設計，交互有交互負責，產品有產品經理負責，各司其職。你學也只能學點皮毛，你用皮毛知識去懟一個專業前端，是撕逼的技巧又增加了？沒有必要。
UI設計不一定需要精通前端，但是如果UI設計了解前端可以減少和開發人員溝通的技術成本，讓團隊協作更加高效。比如項目經理如果不懂技術，就很容易被開發、測試忽悠，再安排項目節點時就不能準確的預估項目周期。如果設計不懂點前端，前端小哥哥會說這個那個效果實現不了。
UI設計不一定要精通前端，懂點技術會減少溝通成本，在工作中也更有優勢。
可以了解一下實現原理，這樣知道怎麼切圖。學前端必要不大，畢竟是兩個工種
本來ui一層就夠薄了，你還不學習前端知識，那你拿什麼升職？
如果有技術有時間有興趣為什麼不呢？
前端小哥哥說實現不了
你就去學前端，最你終實現了前端小哥哥終實不了的效果
這是你的解決方法？
你的前端小哥哥會為此失業的
你從此也會身兼兩職
個人感覺，了解一下也好，但總要有一技之長。全才不好做
可以，但沒必要。設計師的產出和前端的產出不是一種類型，了解一些原理，和技術pk的時候不被壓倒就夠了。
多學一點沒壞處，能夠提升你作圖時候的思維，避免過渡切圖，也方便與前端開發人員溝通
可以學習一些布局相關的，不必學習太深，這樣可以和前端好溝通一些，例如切圖之類的，知道怎麼切比較好；但是不學也不影響的，一般切圖前前端會和你對一下 他想要怎麼樣的切圖；
最好是讓他定要不然你和他想的不一樣那就白切
要的，為了更好的和研發溝通，不過不需要深入學習
想更有競爭力可以學學前端HTML和css其他的不太需要
你好，我是前端，目前我認為ui和前端主要矛盾點是邏輯性，所以優秀的ui應該了解下前端即可，更多時間應該是去熟悉業務，設計出有邏輯性，美觀的設計圖。
設計圖相對感性，代碼確是百分百理性，也就是說前端看到設計圖首先做的事情就是劃分模塊，找共同點，設計圖一個按鈕移動到另一個區域，對於前端來說就不是簡單的移動一段代碼，而是要改變模塊之間的通訊方式，定義模塊的位置。
我認為不論是ui還是前端，熟悉業務更重要
推薦閱讀：
