入行三個月UI設計狗的一點經驗

今年1月，我在一家創業公司開始了第一份UI/UX設計實習。只是強行自學了一些UI/UX的基礎知識的我，在剛開始時常常一臉懵逼.jpg。雖然一直在踩坑，不過回頭看也成長了許多。

於是打算用文字梳理一下自己的微不足道的經驗，mark自己踩過的坑以警醒自己~

0. 成為整個系統中的一部分

在一個team里做設計，和自己悶頭設計的區別在於：

1. 需要和團隊的其他人（包括且不限於前端工程師，產品經理）進行協作，這意味著有效解釋/傳達設計變成了工作中重要的一部分。
2. 由於項目龐大且迭代速度快，項目管理在設計中是必不可少的。（版本、素材管理等等，每個都是坑）（關鍵詞：文件名管理，學用github）
3. 不考慮產品本身，設計得再好（看）也沒用 = =

所以，開始設計之前，先花點時間做好research吧。以下是我整理出來可以幫助理順思路的問題??：

• 產品是什麼類型？是運營/技術/設計/...驅動型的產品？
• 產品面向哪類用戶？解決的問題是什麼？

• 產品開發周期多長？目前處於哪個階段？

• 區分平台：Web or Mobile ？如果是mobile，那麼是IOS / Android 還是both？是否需要適配多個平台？
• 產品的Visual Identity，包括logo，顏色，形象等。
• 目前已有的界面，元素？有哪些好的地方，哪些需要改進？

• 前任設計師（如果有的話）留下了什麼？如何利用ta留下的東西？

總之，梳理一遍這些問題，再打開sketch，感覺自己已經成功了一半（？）

1. 多看幾份優秀的UI規範

?? 該看啥規範？去哪找？以下幾個思路可以參考：

• 兩份重量級的：

Google 的 Material Design Guideline （鏈接：Material Design）

和 IOS 的 Human Interface Guideline （鏈接： iOS Human Interface Guidelines）

作為設計規範，它們沒有受限於界面，而是先定義了能代表各自Identity的設計語言，然後在此框架下規範各個UI元素，從而保證了整個設計系統的consistency。

Google 和 IOS 的許多設計原則都值得了解。舉個栗子，Material Design中的隱喻性；IOS更是直接給了六個原則包括：Aesthetic Integrity, Consistency, Direct Manipulation, Feedback, Metaphor 和 User Control。這些原則都很平實，又很有普適性。

看完這兩份業界重量級的規範，我的確被震撼（嚇）到，感覺更無從下手了。那就再看看別的吧哈哈。

• 利用Pinterest

Pinterest是一個神奇的網站。（被牆了，不過科學上網難道不是設計師的基本姿勢嗎?）在搜索框中輸入UI Guideline兩個關鍵詞，就會跳出來很多五臟俱全，接地氣而且排版很好看的UI規範，比如下面這種??

http://pinterest.com

這種規範拿來學習簡直再好不過了。比如可以拿來很多份規範來歸納總結「UI設計具體是在設計些什麼」這種問題的答案。

全局的規範：

??色板

??布局

以及各種UI elements：

??按鈕（大小、顏色、padding）

雖然平台和產品有諸多不同，但是核心的東西是大家都有的。在我什麼都不懂的時候，多看看別人的規範是怎麼做的非常有幫助。

• 搜索熟知品牌的UI guideline

很多注重設計的互聯網產品都會專門闡述自己的Design Language，所以沒事的時候可以多搜搜。舉個??，大家都很熟悉Airbnb，他家的設計好像很厲害的樣子，那就果斷google一下他家的style guide呀。?? Building a Visual Language - Airbnb

3. 界面在前，規範在後

當我剛開始實習的時候，我們的產品其實已經有一個draft版的設計規範了，不過在我接手之後，發現很多地方都需要修改。無知的我，在對整體界面一知半解的情況下，就急吼吼地開始修改設計規範。後來發現這樣實在是吃力不討好。比如，改了半天按鈕的顏色和尺寸，自己感覺是順眼一些了，卻沒考慮清楚它放在界面上是什麼樣子（捂臉）。後來領悟到，UI規範是用來交給前端，保證界面consistency的。如果只是為了做規範而做，就失去了它的意義~~~這個感悟確實很廢話，不過對我意義重大呀。

後來我就乖乖從界面開始了。（……）

4.多跟前端交流

不要因為前端工程師坐的比較遠就不跟他們說話（？）。根據我的經驗，前端工程師們都很友好。而且他們也很厲害，畢竟公司沒有設計師的時候，是他們在設計界面呀。

教我看前端代碼，而且熟知各種UI element的名字，在不知道要怎麼搜某個element的時候他們能提供準確的關鍵詞。

跟前端交流的原因之一：不能assume自己的圖交到前端手裡就會piu的一下變成一模一樣的界面。所以要

跟前端交流的原因之二：學會考慮技術實現。比如，是前端告訴我之後我才知道，設計按鈕的時候規定大小是不對的，而應該規定padding。

愈發感覺不學代碼就是不行。下一步給自己挖的小坑是學一學前端，希望自己不要被懶癌戰勝orz

5. 使用Sketch里的Style，Symbol和Nested Symbol

設計頁面越來越多之後，維護各個頁面之間元素的consistency變成了一件超級費心費神的事情。幸好Sketch有這幾個超級好用的功能，使我在想要改動多個界面同一元素的時候原地免於原地爆炸。我的經驗是盡量把常用顏色，各種大小的字體都創建成style，盡量把重複出現的元素都捆綁成symbol，把經常出現的樣式比如卡片啊之類的做成nested symbol。這種做法，雖然前期耗時耗力，不過越到後面就越會覺出方便的地方。

最方便的是，到做guideline的時候，只要把自己捆綁在一起的東西整理出來就八九不離十了。（雖然這種想法有點Naive但是）想想就很美好啊。

使用說明在這裡??

Editing Symbols Nested Symbols Shared Layer Styles

??以上就是一小段自己的總結啦。不成熟的地方有很多，如果有人願意跟我交流我會很開心。?

----------------------很久之後的分割線--------------------------------------------------------

這篇文章是半年之前在一家公司實習的時候寫的，本來只是自己心血來潮的梳理總結，沒想到收到很多關注。私信和回復很多，抱歉沒有一一回應。在這裡統一回復幾條：

1. 後來我去幹嘛了：去實習的時候我在本科畢業後的間隔年。今年四月底已經離開那家公司。現在人在美帝，讀人機交互方面的研究生。現在的興趣從UI design轉向UX research。
2. 關於如何找到實習：這是一個很大的話題。目前我也仍然面臨著找暑期實習的壓力，所以正在探索各種渠道並且努力networking。說到當時這份實習，確實花了一些心思去爭取，申請的時候不僅交了作品集，也附上了自己認認真真做的網站可用性分析報告。後來得到實習機會也有一些運氣因素，但我覺得老闆被打動還是因為我展現的認真和熱情吧：）
3. 關於英語：看到很多回復糾結英語的問題。首先，在學習一個全新領域的過程中，查閱英文或中文資料是個人喜好，願意在英語上投入多少也完全是個人選擇。
   然而，我個人認為如果對科技與設計相關的領域有長足的熱情，學好英文+翻牆是基本的事情。學設計的話，只上站酷，花瓣網也是可以的，但不得不承認大量優秀資源都是英文而且在牆外。
4. 關於轉專業：我本科是語言專業，後來跑去做UI/UX。雖然看起來完全不相關，但這個決定花了很長時間，並不是一拍腦袋做出來的。有些同學跑來問我該不該轉行或者轉專業，我的回答是：如果想轉UI/UX的原因是「這份工作看起來輕鬆又有趣，而且只是做做美工不用怎麼動腦子」的話，那麼不建議轉行/轉專業。
5. 之後希望能克服拖延症，寫一寫新的總結之類的。
6. 看到有人說我當時很幸運去了個很好的公司，確實是這樣：）

推薦閱讀：