北漂兩年半,UI設計師妹紙轉行之UI的瘋狂成長
北漂兩年半,UI設計師妹紙轉行之UI的瘋狂成長-移動閱讀二維碼

在團隊的前半年是樓主瘋狂成長的時期,篇幅有點長,樓主分幾期進行更新。也許是一個人單打獨斗的時候被憋得太狠,導致在新公司M的前半年,感覺幸福來得太突然,所以斗志非常足,成長相當快。

M是家在線教育行業中型互聯網公司,投資商也大有來頭,資金充裕,管理比較完善。上班時間上午9點到晚上六點,產品網站為,APP做得也很強大,樓主學到不少東西。設計團隊一共7個人,主網站3個人(樓主包含在其中),APP2個人,運營設計1個人,還有一個實習生也是做網站。PM(產品經理)一共5個,每人負責不同的模塊。沒有UX,UX的工作由PM和UI共同進行。

 

樓主的頭銜是UI設計師,工作內容主要是三大塊,一是每周都有的一些小活,做做banner或者美術封面等,二是網頁設計師,三是APP設計師(后來接手的新內容)??梢钥吹焦驹酱?,所負責的工作內容會縮小,等到BAT這樣的環境會更加細致。

 

 

Banner和封面的制作

 

那年3月底,春暖花開,北京的空氣在這個時間段也是相當好的。正式來到M之后,樓主懷著新的希望,又開始自己的奮斗。因為是團隊作戰,分工會比較明確,不像樓主之前一人負責所有的活,要干設計、策劃、產品,偶爾還加加代碼等等。在團隊就安心將自己手頭上的活做精致!

 

也是當拿到banner的活的時候,樓主開始嘗試各種字體的設計效果(包括字體的種類、字號大小、粗細等),然后總結出一些字體的運用規律、找素材的方法、傳意的方式等等,方便以后樓主在做一塊事情的時候能以最高的效率做出最棒的效果。對,你也發現樓主喜歡總結了!

 

比方說,樓主后來做得多了之后,發現字體就是思源黑體、當時流行的iOS冬青黑體、方正蘭亭黑系列是比較好看,切容易搭配的,以后除了比較特殊的主題,其它就先從這幾類進行選擇。

 

在做banner的時候,極大地磨練了樓主的審美,樓主在做的時候也比較用心,因為看著自己能力越來越高樓主也是一件讓人很開心的事情。先上幾個圖給大家看看當時的一些小作品。

 

 

 

網頁設計

 

在著手網頁設計的時候,樓主前半年經過三個階段,一是小模塊的設計,接著是單個頁面的設計,再后來是新項目整個的負責。樓主回想起當時的經歷,第一感想就是,安心做好崗位手頭上的工作,更多的工作自己就會找上門來。

 

1.小模塊的設計


接到小模塊的設計的時候,樓主先是驚嘆于一個成熟的大網站到底是有多少頁面和工作需要準備,以及它完整的視覺規范的制作。然后靜下心來將自己所負責的區域開始做好,樓主負責的就是如下圖的“經驗”和“天天向上”兩個模塊。

 

b79458e24b11a801219c77da1905.jpg

 

樓主拿到需求之后,開始分析,分析的思路是由大到小,由里及外。先了解上下文,這倆模塊是干什么用的,有沒有跟其他的地方產生聯系,如果設計了這一塊會不會對其它方面有影響。這些是大環境的跟同事溝通,接著在這個基礎上想,每個元素可能出現什么狀況。比方說這個箭頭是表示對比的意思,那么它下降或者持平的時候的狀況怎么表示。然后在紙上羅列出各種情況,每完成一項勾掉一個。

 

當時樓主還是不太習慣用軟件進行記錄,感覺紙上的東西分析起來自己想得更明白,也沒發現什么大的問題,可現在有問題了,樓主有保留的只有電子檔的東西,手稿都沒能保存,囧!電子檔的材料好處就在于方便傳送和保存,了解到好處了!

 

2.單個頁面的設計


當完成兩三個這樣的模塊之后,頭兒開始讓樓主接手單個完整的頁面設計。從輔助頁面到主功能頁面的設計都讓樓主開始接手。涉及到的每一個功能模塊樓主都仔細做好。而在這一個階段樓主的功底慢慢扎實,從空間布局到顏色的采納,樓主一點點地在進步著。也許是因為一個人在北漂沒有安全感的原因,所以樓主對領導的反饋特別敏感,想保住飯碗,小心翼翼將工作做到最好。
傳一個截圖給大家看看樓主后來設計的頁面。很實在的一些東西。

 

cd6558e24b9ca801219c770003bc.jpg

 

經過了上面打的基礎,來到M四個月之后,頭兒開始安排樓主獨立負責一個項目。公司想要拓寬市場,想開始嘗試一個項目進行試水,于是樓主的頭兒,推薦了樓主一個人去單獨干起來。說真的,樓主當時只當是一項工作,不知道這后面意味著頭兒對樓主的信任和栽培。當然,樓主一如既往,還是干了起來。

 

總結,不要嫌棄項目小,耐心做好手頭上的工作,其實后續的成果會來得很快的!

 

下篇就來講講樓主開始單獨負責項目,然后對Google Material Design風格的研究和在新項目的運用中,以及開始和前端工程師頻繁進行交流的經歷,告訴大家單獨負責公司子項目是怎樣一種體驗。當然還有職場中大家可能會遇到不得已的一些幺蛾子。

 

Sophia的tips:
想贏到最后,就看誰能夠沉得住氣!

 

公司M,在北三環與北四環之間,為了讓自己的網絡環境好一點,樓主又開始搬家,這一次,想很多北漂的童鞋們一樣,樓主搬到了北五環外的霍營,租了一個三室一廳的小單間。上班坐8號線半小時地鐵可以到,晚上也不會太擠,于是大概晚上會有兩小時左右的學習時間。3月底到7月中旬,大概四個月的時間,樓主每天早上7點起床,晚上11點睡覺,作息規律,突然感覺到一絲的幸福感。

 

 

資源分配

 

北京的夏天進入比較狂躁的階段時,樓主開始接手新項目。新項目的定位,是基于現有網站資源上的分支,開辟出更年輕的客戶群體,向各個高校進行打造,做一個面對各高校師生的課程發布以及考試運用平臺網站。派給新項目的人員,一個PM(產品經理),一個設計師,3個開發。但資源都會提供,PM和設計,他們的頭兒都會階段性把控一下方向和進行指導。人員分配都比較緊張。樓主的工作量一下子大了很多。

 

 

獨立項目的工作內容

 

  1. 視覺設計規范

這是樓主第一次做完整的網站視覺規范。雖然項目比較新,規模沒有主網站那么大,但對樓主來說,是一次整體把控的練習。視覺規范包含顏色、字體、文字鏈接、頁面結構、內容區版式元素這幾大塊的整理??梢越匾徊糠謭D給大伙看~

 

6f8158e49c1ca801219c77ef5f40.jpg7df158e49c25a801219c77cb8bb4.jpg

2.自適應Google Material Design方案的研究

2015年的material design是非常受歡迎的,因為它幫助市場解決了同一方案在不同大小的屏幕上顯示的一些問題,幫助企業節約了很多成本。嗯,在項目D上,也采用了這一方案。問題還有一點,就是開發人員不足,為了省一些成本,樓主必須上網去尋找一些開源的代碼,讓工程師直接可以用,然后樓主在開源代碼的基礎上可以做一些修改。

 

為了找這些代碼,樓主翻閱了當時近2年來GitHub上所有關于material design的內容,找出結構比較完整的十多個再跟團隊進行商議。

 

而在這樣的基礎上,樓主又下載了material design的視覺規范,去研究怎樣設計出更符合該風格的設計圖出來,并參考它的設計。因為是扁平化設計,樓主也想了一些不太消耗公司資源而又能提高用戶體驗的事情。比方說,樓主調查過各個學校不同logo的顏色,設計了四種主流logo不同顏色的方案,讓學??梢远ㄖ苹?,自己選一個最符合自己學校風格的顏色等。

 

07a158e49c3fa801219c773eeebd.jpg


3.整體設計稿的繪制。

整體設計稿一共有30多個頁面,因為結構比較相似,所以樓主只需要先確定幾個主頁面的設計風格,其它的就比較方便了?,F在回想起來,樓主居然也沒覺得累,只是一天天慢慢做事情,慢慢繪圖,每天不停嘗試新的東西。來給大家展示一下當時樓主整理的頁面文件夾。

 

 

2b7658e49c52a801219c7718fc83.jpg

 

4.與PM和前端工程師合作。

很驚喜,如果和PM打好關系,他真的會教設計師很多東西,思維方式的不一樣,讓設計師的格局更大一點。比方說PM會用Axure繪制出整個項目的頁面跳轉關系,在繪制的過程中其實已經模擬了項目的開發,而在開發邏輯上產生的問題他都已經想了一遍。

 

而在于前端合作的過程中,第一次教會了樓主用崇拜的眼光去看向開發童鞋。有時候他們會為你解決很多問題,特別是一些經驗豐富的資深工程師。比方說,material design在瀏覽器縮放的過程中會根據屏幕的大小而縮放,他們會提前告訴你設計方案尺寸會有哪些,在開發的過程中哪些方案比較容易實施,免得設計師繞彎路。而樓主,也第一次接觸到一個性格隨和,能力強勁的開發前輩Y,能力強做事又一直隨和,笑呵呵的感覺,讓樓主很是佩服。

 

網頁設計完成之后開始項目的APP設計,APP設計沒開始多久,樓主卻迎來了另一個挑戰。公司因為一些原因需要裁員三分之一,當然這些原因比較機密,樓主也不方便說。設計組必須要走兩個人,而唯一的兩個妹紙就這樣裁了。其中原因很多,也許還是樓主年輕,能力還沒有強大到完全支撐起自己地位的時間段。但當時樓主知道后,只說了一句話:好!然后就開始準備簡歷。

 

嗯,大伙可能覺得莫名其妙,可樓主接下來,碰到了現在的領導,樓主的貴人。成功地,樓主從UI轉向了UX,薪水翻了兩倍多(真的不是在寫劇本拍電影)~敬請期待樓主下一篇更新,UI設計師怎樣轉型為UX設計師,以及判斷自己是否合適轉~

 

 

Sophia的tips:
福中有禍,禍中有福,福禍相倚!



相關文章
《北漂兩年半,UI設計師妹紙轉行一個人打拼的半年是什么樣的?》
《北漂兩年半,聊聊我從平面設計師轉為UI設計師的經歷》

相關專題:
給想轉行做UI的設計師的專題

 

作者簡介:Sophia的玲瓏閣,一枚愛折騰,愛健身的交互設計妹紙。
職場設計技能,更多教程搶先看,請關注作者的微信公眾號:Sophia的玲瓏閣

本文鏈接:http://www.casaleticia.com/ui-designer-girl-turned-insane-growth-of-ui.html
本文標簽: , , , , ,