如何點(diǎn)出枝繁葉茂的技能樹(shù)？專(zhuān)訪Graphiq 設(shè)計(jì)主管張冰昕

本期節(jié)目，我們請(qǐng)到了 Graphiq 設(shè)計(jì)主管 Samantha Zhang。她先后畢業(yè)于復(fù)旦大學(xué)傳播學(xué)系、西北大學(xué)整合營(yíng)銷(xiāo)傳播碩士項(xiàng)目。她所在的公司坐落于擁有「全美最美日落」的 Santa Barbara——她還從這美麗的日落中找到了設(shè)計(jì)靈感。她是一位「全棧設(shè)計(jì)師」，還經(jīng)營(yíng)著自己的設(shè)計(jì)博客。最近，她在著名的設(shè)計(jì)網(wǎng)絡(luò)雜志 A List Apart 上發(fā)表了文章： Learning from Lego: A Step Forward in Modular Web Design。

△ ? Samantha Zhang

我們聊了聊：

• 少年時(shí)代的興趣怎樣歷經(jīng)波折終成事業(yè)
• 在美國(guó)大學(xué)里如何把握機(jī)會(huì)為工作做準(zhǔn)備
• 創(chuàng)業(yè)公司戰(zhàn)略轉(zhuǎn)型與設(shè)計(jì)師的職業(yè)發(fā)展
• 全棧設(shè)計(jì)師的利弊
• 設(shè)計(jì)師寫(xiě)代碼——最大化「設(shè)計(jì)效率」
• 怎么學(xué)習(xí)編程技能
• 怎么在工作之余提高設(shè)計(jì)技能
• 如何看待「全棧焦慮癥」？
• 聊聊數(shù)據(jù)可視化中的配色問(wèn)題
• 業(yè)余項(xiàng)目的堅(jiān)持與管理

Samantha: 大家好，我叫 Samantha，中文名字叫張冰昕。現(xiàn)在在 Graphiq 這家公司做 Design Lead 。

12歲開(kāi)始用「記事本」寫(xiě)網(wǎng)頁(yè)

Riceman:

Samantha 是我在復(fù)旦的學(xué)姐，比我大兩級(jí)。復(fù)旦曾經(jīng)有一個(gè)組織叫復(fù)旦學(xué)生網(wǎng)，Samantha 擔(dān)任過(guò)它的 CEO 。那我們從你在復(fù)旦的經(jīng)歷講起吧，你在復(fù)旦念的是什么專(zhuān)業(yè)？

Samantha:

我念的是新聞學(xué)院傳播學(xué)系。現(xiàn)在做設(shè)計(jì)師，中間經(jīng)歷了很多很多的轉(zhuǎn)折。這個(gè)故事從沒(méi)考大學(xué)就開(kāi)始了。我從小就喜歡計(jì)算機(jī)，喜歡設(shè)計(jì)，機(jī)緣巧合，我們當(dāng)時(shí)的初中有一節(jié)電腦課，一個(gè)學(xué)期就在教我們寫(xiě)HTML，而且是從記事本寫(xiě)，是不帶任何編譯器的，也是從那時(shí)候開(kāi)始接觸所謂的編程。其實(shí)大家也知道，靜態(tài)其實(shí)不算是編程。

Riceman:

那時(shí)候覺(jué)得用記事本寫(xiě)網(wǎng)頁(yè)的都是超級(jí)高手。

Samantha:

當(dāng)時(shí)學(xué)校的理念確實(shí)很好，如果從 Frontpage 或是 DreamWeaver 入手，在我看來(lái)在網(wǎng)頁(yè)這方面就是走上了歧途啊。就是從那時(shí)候開(kāi)始，一直在自學(xué)網(wǎng)頁(yè)。當(dāng)時(shí)對(duì)于寫(xiě)網(wǎng)頁(yè)的邏輯和做設(shè)計(jì)是同樣有興趣的，也和天賦也有點(diǎn)關(guān)系，設(shè)計(jì)對(duì)我來(lái)說(shuō)上手很快，至少比編程快，所以就漸漸地做越來(lái)越多的設(shè)計(jì)，與此同時(shí)就上了高中。我當(dāng)時(shí)給自己的規(guī)劃是要讀計(jì)算機(jī)的本科，然后讀MBA，然后讀心理學(xué)的博士。非常幼稚的人生規(guī)劃。

所以我選了語(yǔ)數(shù)外+物理作為上海高考的選項(xiàng)，就想做理科生。物理當(dāng)時(shí)成績(jī)還不錯(cuò)，但是我們高二的時(shí)候，一個(gè)很好的物理老師跳槽了，空降了一個(gè)不是很有經(jīng)驗(yàn)的老師，大家就開(kāi)始在課堂上不務(wù)正業(yè)，整個(gè)班級(jí)就是溫水里煮青蛙，如果不趁早找一個(gè)解決的出路的話，大家就是二本見(jiàn)。為了上一個(gè)好學(xué)校，又基于自己完全沒(méi)有自制力，我就轉(zhuǎn)去選了歷史，當(dāng)時(shí)我們學(xué)校最強(qiáng)的方向。這樣就一入宅門(mén)深似海，作為文科生就不能學(xué)計(jì)算機(jī)，也不能學(xué)工商管理，也不能學(xué)心理，我當(dāng)時(shí)規(guī)劃的人生路上的三個(gè)專(zhuān)業(yè)都通通不能學(xué)了。

我當(dāng)時(shí)拿了一本復(fù)旦的選專(zhuān)業(yè)的書(shū)，翻來(lái)翻去只有傳播學(xué)有很多像管理學(xué)導(dǎo)論，心理學(xué)導(dǎo)論，市場(chǎng)營(yíng)銷(xiāo)，統(tǒng)計(jì)基礎(chǔ)之類(lèi)的非常廣的文科大課。我當(dāng)時(shí)也不知道讀文科可以干什么，估計(jì)還是想要轉(zhuǎn)方向；也沒(méi)有計(jì)劃要出國(guó)，只要基本上大學(xué)畢業(yè)能找到一個(gè)工作，那專(zhuān)業(yè)就不是那么重要，我就挑了一個(gè)面最廣的專(zhuān)業(yè)。

人生的轉(zhuǎn)折點(diǎn)——美國(guó)西北大學(xué)「24小時(shí)編程馬拉松」第一名

張撓撓：

我覺(jué)得 Samantha 這個(gè)經(jīng)歷里特別勵(lì)志的一點(diǎn)就是你從小就發(fā)現(xiàn)自己在設(shè)計(jì)上非常有天賦和興趣，當(dāng)中又經(jīng)歷了理科、文科、傳播學(xué)，最后又回到了設(shè)計(jì)這一行，最后這一步轉(zhuǎn)行你是怎么做到的呢？

Samantha:

對(duì)，最后這一步轉(zhuǎn)行就一下子跳到了從復(fù)旦畢業(yè)去讀了西北大學(xué)。當(dāng)時(shí)真的很幸運(yùn)能拿到西北大學(xué)的整合營(yíng)銷(xiāo)傳播系的錄取，去了之后我第一個(gè)星期就跑去就業(yè)指導(dǎo)的辦公室說(shuō)「老師，如果我畢業(yè)不想做傳統(tǒng)的市場(chǎng)營(yíng)銷(xiāo)，想去做設(shè)計(jì)類(lèi)的，你覺(jué)得我的研究生應(yīng)該怎么規(guī)劃」。然后那個(gè)老師很 nice 但又特別無(wú)辜地瞪著我說(shuō)，「我覺(jué)得你不該規(guī)劃，你根本就是跑錯(cuò)了地方」。國(guó)際生轉(zhuǎn)專(zhuān)業(yè)有一大串的麻煩，我當(dāng)時(shí)也不覺(jué)得可行。

△ ? 西北大學(xué)

真正的轉(zhuǎn)折是當(dāng)時(shí)有一個(gè) http://imo.im 到西北辦了一個(gè)編程馬拉松的比賽，我就和一個(gè)復(fù)旦學(xué)生網(wǎng)當(dāng)過(guò)技術(shù)總監(jiān)的學(xué)弟一起組隊(duì)去參加編程馬拉松。當(dāng)時(shí)是23個(gè)小時(shí)，用了 http://imo.im 在線聊天的接口做一款應(yīng)用，我們編了一個(gè)回合制的多人射擊的游戲，其實(shí)很簡(jiǎn)單的一個(gè)游戲，你給的指令是從聊天的 API 走的，你們一邊互相射擊還能一邊聊天這樣，但我們的想法比較新，就贏了這個(gè)比賽。那次的第二名是幾個(gè)人有不同的日程表，然后大家怎么樣去找一個(gè)共同的時(shí)間點(diǎn)去開(kāi)會(huì)的一個(gè)應(yīng)用。

「我是這門(mén)課里最好的設(shè)計(jì)師，你要不要和我組隊(duì)？」

Samantha:

贏了那個(gè)比賽以后就在校內(nèi)小有名氣，那個(gè)時(shí)候收到一門(mén)課的邀請(qǐng)，它的宗旨是讓不同學(xué)院的人一起組隊(duì)做應(yīng)用，還能賺學(xué)分。商學(xué)院的人在表達(dá)和演講方面就很占據(jù)優(yōu)勢(shì)，但是他們的主意呢，設(shè)計(jì)師和工程師同學(xué)又不是特別喜歡……那個(gè)時(shí)候覺(jué)得我自己組一個(gè)隊(duì)希望比較渺茫，就想看看商學(xué)院當(dāng)中是不是能夠湊巧有個(gè)好點(diǎn)子。我聽(tīng)到了一個(gè)點(diǎn)子，覺(jué)得挺有興趣的，就走過(guò)去和他說(shuō)，「我大概是這個(gè)屋子里最好的設(shè)計(jì)師，你要不要拉我進(jìn)你的隊(duì)？」

后來(lái)我自己也意識(shí)到這句話挺荒謬的，他不太相信我，就用商學(xué)院的人特有的一種非常禮貌的方式告訴我說(shuō)他已經(jīng)找了個(gè)工程師，要去問(wèn)一下那個(gè)工程師的意見(jiàn)再聯(lián)系我。這就是我為什么提到那個(gè)編程馬拉松——他的工程師就在那個(gè)馬拉松里得了第二名的隊(duì)上。那個(gè)工程師極力推薦我，我們就愉快地組了個(gè)隊(duì)，幾經(jīng)波折，當(dāng)中調(diào)整過(guò)很多次方向，最后做了一個(gè) iPad 上的記筆記的應(yīng)用。當(dāng)時(shí)我覺(jué)得和過(guò)家家似的，還成立了公司，都是那個(gè)商學(xué)院的人的主意啦，當(dāng)時(shí)前三天有三千多的下載。

這個(gè)工程師六月份要畢業(yè)，就開(kāi)始面試，他告訴我說(shuō)有一個(gè)很酷的公司在 Santa Babara，這家很酷的公司就是 Graphiq 的前身，叫 Findthebest。他拿到了很多 offer，但最后去了Findthebest。等到十二月我找工作的時(shí)候，他就開(kāi)始把我撈過(guò)去面試。我是在溫暖的地方長(zhǎng)大的，當(dāng)時(shí)在芝加哥的冰天雪地里，他給我發(fā)他在海邊的躺椅上喝飲料，太陽(yáng)正好……然后我就去了。你們有空也可以來(lái)一下，我們公司非常非常漂亮，就在山上俯瞰大海。

△ ? Graphiq 辦公室看最美日落

Riceman:

這樣聽(tīng)上去感覺(jué)一切都順風(fēng)順?biāo)摹Ｄ銖膹?fù)旦畢業(yè)，去到西北一個(gè)跟傳播學(xué)相關(guān)的專(zhuān)業(yè)，是一個(gè)非常好的學(xué)校，非常好的專(zhuān)業(yè)，到了學(xué)校以后參加編程馬拉松，和MBA、工程師一起組隊(duì)做項(xiàng)目，順理成章地就到了你現(xiàn)在的公司，這當(dāng)中就是這么順利的嗎？

Samantha:

沒(méi)有。因?yàn)楝F(xiàn)在是往回看，感覺(jué)唯一成功的一條路就帶到今天了，但其實(shí)這當(dāng)中是無(wú)比地糾結(jié)，無(wú)比地焦慮，無(wú)比地風(fēng)險(xiǎn)高。我每一次都是壓線進(jìn)，傳播學(xué)的錄取分是多少，我就是多少分，就是這么險(xiǎn)。GRE當(dāng)時(shí)考了三次，第一次成績(jī)出來(lái)，我同學(xué)根本就不相信我考了那個(gè)分，還覺(jué)得我是不是答題卡填錯(cuò)了，然后第二次去考GRE，就遇到了一個(gè)百年難遇的GRE出了以前的舊題，然后全部人取消成績(jī)那次，就被我給遇上了。我開(kāi)始的時(shí)候也沒(méi)有打算出國(guó)，績(jī)點(diǎn)就是浮云啊，就是在復(fù)旦學(xué)生網(wǎng)努力寫(xiě)前端代碼、做設(shè)計(jì)。申請(qǐng)的時(shí)候我的績(jī)點(diǎn)是3.17，也沒(méi)有人相信我能申請(qǐng)到西北。我現(xiàn)在也覺(jué)得很難相信。

Riceman:

你是什么時(shí)候開(kāi)始說(shuō)我一定要轉(zhuǎn)設(shè)計(jì)，放棄了傳播學(xué)？

Samantha:

其實(shí)我一直沒(méi)有放棄啊，當(dāng)時(shí)的狀態(tài)是我很想待在美國(guó)，也很想做設(shè)計(jì)，但是如果我做不了設(shè)計(jì)的話，我總要給自己另一條出路。當(dāng)時(shí)我是市場(chǎng)營(yíng)銷(xiāo)、用戶體驗(yàn)和前端設(shè)計(jì)這三個(gè)方向一起在找工作，感覺(jué)特別辛苦。我是一個(gè)相對(duì)來(lái)說(shuō)比較全棧的人，好處就是自己可以做很多東西、很近地去了解很多東西，尤其是別人和你說(shuō)這個(gè)東西不能做的時(shí)候，你不至于說(shuō)「好吧那就不做」；別人把數(shù)據(jù)給你看的時(shí)候，你也不至于說(shuō)他給我看什么那就是什么。但問(wèn)題是你的面鋪得越廣，你起步或是你真的做出點(diǎn)什么東西的時(shí)間會(huì)非常地長(zhǎng)。

Graphiq 的前世今生

張撓撓：

那么 Graphiq 是做什么的？你在公司里面的工作內(nèi)容又是什么？

Samantha:

Graphiq 做的是現(xiàn)在非常火的 knowledge graph —— 知識(shí)圖譜。比如說(shuō)現(xiàn)在你去 Google 搜 iPhone 7，它會(huì)給你一堆相關(guān)的網(wǎng)頁(yè)比如蘋(píng)果的官網(wǎng)；Google 現(xiàn)在也有一些 Knowledge cards，它會(huì)把專(zhuān)門(mén)的信息直接先呈現(xiàn)給你。但對(duì)于目前的搜索引擎來(lái)說(shuō)，大部分的信息是沒(méi)有結(jié)構(gòu)的，它不能理解這篇關(guān)于 iPhone 7 的文章到底談了哪幾個(gè)方面、是什么觀點(diǎn)。我們想要做的是樹(shù)狀的信息，把事物沒(méi)有完全被電腦所理解的結(jié)構(gòu)和維度放到結(jié)構(gòu)化數(shù)據(jù)庫(kù)里面，建造非常多不同的門(mén)類(lèi)，比如地點(diǎn)、天氣、人口統(tǒng)計(jì)、電影、車(chē)、手機(jī)等等，讓他們互相連接，形成一張張圖譜。現(xiàn)在很多巨頭都在做這件事情，我們的優(yōu)勢(shì)可能是我們做得很早，到現(xiàn)在有一千多個(gè)不同的種類(lèi)，幾十億的數(shù)據(jù)。但這只是我們的基礎(chǔ)層，想要用它來(lái)創(chuàng)業(yè)還需要把它變成一些應(yīng)用、有用戶才能活下去。

我剛加入的時(shí)候是2014年2月，那時(shí)候是我們的第一階段，做的是垂直搜索，比如 Yelp 是關(guān)于飯店的，我們的一千多個(gè)話題就相當(dāng)于一千多個(gè)這樣的門(mén)類(lèi)。但我們知道自己是小公司，很難在某一個(gè)門(mén)類(lèi)里面跟那個(gè)門(mén)類(lèi)的巨頭競(jìng)爭(zhēng)，所以我們做的很多是長(zhǎng)尾里面的項(xiàng)目，比如哪個(gè)滑雪場(chǎng)和高爾夫球場(chǎng)最好、哪個(gè)球隊(duì)最強(qiáng)等等。我們做這種垂直搜索平臺(tái)起家，比如一個(gè)用戶不知道哪個(gè)手機(jī)的性價(jià)比最高、在同樣的屏幕尺寸里面最輕，我們的搜索引擎可以很快的給出結(jié)果。這個(gè)就是最開(kāi)始的戰(zhàn)略，它的好處是來(lái)錢(qián)很快，因?yàn)橹灰?SEO 和廣告做好，只要有流量就能活。

Riceman:

看來(lái)這個(gè)也是你們當(dāng)時(shí)的名字 Findthebest 的由來(lái)。那么后來(lái)是怎么變成 Graphiq 的呢？

Samantha:

因?yàn)檫@樣的商業(yè)模式使我們非常依賴于搜索引擎。我們歷史上有兩個(gè) Black Friday，一次是因?yàn)檫`反了 Google 的規(guī)定，受到了在流量上的懲罰，一天掉了 50% 的流量。后來(lái)一次是因?yàn)?Google 加了熊貓算法，從人性的角度看網(wǎng)站是否專(zhuān)業(yè)，它的基本假設(shè)是一個(gè)網(wǎng)站所覆蓋的話題越少說(shuō)明它越專(zhuān)業(yè)、越可信；我們主要的域名就是 Findthebest，你想找的一切都在這個(gè)網(wǎng)站上找，而他們不相信有一個(gè)網(wǎng)站可以涵蓋方方面面而每個(gè)方面還能做的很專(zhuān)業(yè)。當(dāng)時(shí)一天之內(nèi)流量掉一半、營(yíng)收掉 60%，花了很長(zhǎng)時(shí)間才恢復(fù)到算法改變之前的水平，我們覺(jué)得公司不能這么脆弱。

所以我們找到另一個(gè)把數(shù)據(jù)變成產(chǎn)品的方法，就是數(shù)據(jù)可視化，把數(shù)據(jù)變成一張張的圖表，可以被嵌入到別的頁(yè)面去。我們?cè)谵D(zhuǎn)型的過(guò)程中就想能不能把這個(gè)東西產(chǎn)品化，賣(mài)給新聞機(jī)構(gòu)、內(nèi)容提供商等等，把流量從新聞媒體引到我們的網(wǎng)站來(lái)，這就促成我們品牌的改變，更注重信息可視化這一個(gè)方向。

△ ? Graphiq 的信息可視化與知識(shí)卡片

設(shè)計(jì)師寫(xiě)代碼——最大化設(shè)計(jì)效率

Riceman:

你作為設(shè)計(jì)師具體的日常工作是什么呢？

Samantha:

我在這里的職位是 Design Lead，設(shè)計(jì)主管，但其實(shí)我不管人，因?yàn)槲沂沁@兒唯一的設(shè)計(jì)師，就榮幸地成為了全棧設(shè)計(jì)師。公司現(xiàn)在有130個(gè)人，大概有30個(gè)工程師，只有我1個(gè)設(shè)計(jì)師。好處是我很容易拍板，沒(méi)有人跟我吵。當(dāng)然一定會(huì)有討論，作為設(shè)計(jì)師，能夠接受別人的意見(jiàn)對(duì)設(shè)計(jì)做出調(diào)整是非常重要的。但是比較少進(jìn)行對(duì)具體設(shè)計(jì)風(fēng)格和細(xì)節(jié)的討論，比較多的是關(guān)于用戶體驗(yàn)是不是好，或者是這樣我們能不能有足夠的點(diǎn)擊和流量來(lái)維持公司的運(yùn)轉(zhuǎn)。在設(shè)計(jì)風(fēng)格或者美觀上基本上我拍板就可以。而挑戰(zhàn)就是樣樣事情都跟你有一點(diǎn)關(guān)系，比如我的工作就會(huì)從網(wǎng)站和 App 到 T 恤、名片和 PPT 模板，校園招聘的橫幅最后可能也會(huì)到我桌上。我們要求所有的設(shè)計(jì)師會(huì)寫(xiě)代碼，所以非常希望能有優(yōu)秀的會(huì)寫(xiě)前端代碼的設(shè)計(jì)師加入我們。

△ ? Samantha 為公司 Hackathon 設(shè)計(jì)的 T恤

我們公司非常要效率。對(duì)于設(shè)計(jì)師來(lái)說(shuō)，最能傳達(dá)設(shè)計(jì)的完整性的辦法就是你自己把它寫(xiě)出來(lái)，而不是出不同的設(shè)計(jì)稿、告訴工程師在哪種情況下用哪種，這對(duì)他也造成了額外的工作負(fù)擔(dān)。對(duì)我們來(lái)說(shuō)，每做一件事情都要想它的投資回報(bào)比。

張撓撓：

那么你寫(xiě)的代碼跟工程師的部分是什么關(guān)系？你的代碼是最終的代碼一部分嗎？

Samantha:

對(duì)，我寫(xiě)的就是最終的代碼，我們是在同一個(gè) code base。我們的工作流程是這樣的：先把想法定下來(lái)，我甚至都不做設(shè)計(jì)，只做線框圖；然后我先把 HTML 的結(jié)構(gòu)寫(xiě)掉，他就可以對(duì)著沒(méi)有 CSS 和設(shè)計(jì)的頁(yè)面寫(xiě)他的程序去了。這個(gè)時(shí)候我會(huì)把線框圖要么在我腦子里要么在軟件里變成設(shè)計(jì)，然后我再把 CSS 加上去，這樣效率非常高。

其實(shí)設(shè)計(jì)師只要在代碼庫(kù)里可以自由移動(dòng)的話，工作方式會(huì)非常多樣。如果正好我和工程師都準(zhǔn)備好了，就可以同時(shí)投身這個(gè)項(xiàng)目。如果我先開(kāi)始設(shè)計(jì)而工程師還在忙其他項(xiàng)目的話，我可以先把 HTML 和 CSS 都寫(xiě)了；或者有時(shí)候我非常忙，那工程師可以用內(nèi)部的 Pattern library 設(shè)計(jì)素材庫(kù)先搭起來(lái)一個(gè)他覺(jué)得過(guò)得去（我不一定看得過(guò)去）的東西，等我有空的時(shí)候再把我要做的改動(dòng)加上去。

張撓撓：

這種工作方式的優(yōu)勢(shì)是效率很高，那挑戰(zhàn)是什么？

Samantha:

就是很難招到全能的設(shè)計(jì)師。越好的學(xué)校教得越理論、越不實(shí)際。說(shuō)實(shí)話我們現(xiàn)在沒(méi)辦法去招一個(gè)想法很好但自己做不出來(lái)的人。我在招人的時(shí)候除了會(huì)非常看重作品集，還會(huì)問(wèn)一些 HTML、CSS 的問(wèn)題看你能不能立刻答出來(lái)。這和現(xiàn)在最好的學(xué)校的教育可能有點(diǎn)不太對(duì)口，但我們真的需要來(lái)的人能很快上手。

怎樣提高軟硬技能

Riceman:

創(chuàng)業(yè)公司尤其看重動(dòng)手能力這是很好理解的，那你也是在一個(gè)非常好的學(xué)校 ，應(yīng)該說(shuō)也是比較強(qiáng)調(diào)理論概念的，我相信你們學(xué)校也沒(méi)有專(zhuān)門(mén)去學(xué)習(xí)寫(xiě)代碼之類(lèi)的技法上的東西，那么你自己是怎么學(xué)習(xí)這些東西的呢？

Samantha:

對(duì)我來(lái)說(shuō)很多時(shí)候覺(jué)得與其說(shuō)服別人不如自己把它做掉。當(dāng)沒(méi)有其他人相信它的可能性時(shí)如果我可以把它做出來(lái)，就能證明它有一個(gè)未來(lái)，而不是就這樣放棄。很多時(shí)候想創(chuàng)業(yè)的人可能有一個(gè)愿景和未來(lái)暫時(shí)只有你一個(gè)人看得見(jiàn)，你可以說(shuō)服別人，很多很有名的創(chuàng)業(yè)者都是很有人格魅力的人，他們?nèi)シ窒碜约旱倪@個(gè)愿景，但實(shí)際上只是在一個(gè)愿景的階段，要去說(shuō)服為你投資的人和具備你需要的技能的人加入團(tuán)隊(duì)都是相當(dāng)困難的。對(duì)我來(lái)說(shuō)與其在說(shuō)服的過(guò)程中越挫越勇不如自己把它學(xué)了。

其實(shí)我的戰(zhàn)線非常的長(zhǎng)，從12歲開(kāi)始接觸HTML就一直非常有興趣，就會(huì)上網(wǎng)看教程，走了非常多的彎路，小時(shí)候有很多的時(shí)間也沒(méi)覺(jué)得有多少壓力。而現(xiàn)在再學(xué)一個(gè)新技能的話，我先會(huì)去研究一下，比如 Code School 這樣互動(dòng)式的教程，要么是 Tuts+ 這樣的視頻教程。我會(huì)先學(xué)一個(gè)縱覽型的，如果是一門(mén)語(yǔ)言的話，我會(huì)先把它的語(yǔ)法看一下。接下來(lái)我就會(huì)去做一個(gè)項(xiàng)目，如果有視頻教程我也會(huì)去跟一下。下一步就會(huì)自己去想一個(gè)東西去把它寫(xiě)出來(lái)，通常從這里開(kāi)始就越寫(xiě)越多了。編程的流程基本上就是這樣的。

設(shè)計(jì)的話，如果你已經(jīng)很了解設(shè)計(jì)本身是怎么樣的話，從工具層面就沒(méi)有什么能攔住你。軟性能力除了多看我沒(méi)有別的更多的建議，去訂閱你覺(jué)得好的設(shè)計(jì)博客來(lái)看，去關(guān)注你覺(jué)得在這方面有話語(yǔ)權(quán)的人。我多年以來(lái)的習(xí)慣就是把喜歡的圖拖進(jìn)側(cè)邊欄存起來(lái)。同事都戲稱(chēng)說(shuō)我的屏幕都很精彩，有時(shí)候旁邊莫名其妙的就圍了很多人。我說(shuō)這是我工作的一部分，就是要多看，哪怕這個(gè)設(shè)計(jì)的風(fēng)格不是你現(xiàn)在所用到的，哪怕這個(gè)東西看似跟你完全沒(méi)關(guān)系。

我覺(jué)得從用戶體驗(yàn)的角度，從做出來(lái)的設(shè)計(jì)給公司賺錢(qián)的角度，都有很多人來(lái)跟我討論，但純視覺(jué)的美感這部分，我是很少能夠得到反饋的。一方面我會(huì)在很多地方發(fā)自己的作品去得到反饋；另一方面我個(gè)人的一個(gè)目標(biāo)就是去贏一些設(shè)計(jì)方面的獎(jiǎng)項(xiàng)，不是因?yàn)楣沁@對(duì)我個(gè)人來(lái)說(shuō)會(huì)把我對(duì)視覺(jué)的要求提高很多層次。另外我有一個(gè)辦法推薦給想把設(shè)計(jì)做好的人，你可以做一個(gè)測(cè)驗(yàn)：打開(kāi) Dribbble，看今天最好的作品，你就隨機(jī)的把自己的作品貼進(jìn)去給任何一個(gè)人看，問(wèn)這里面最糟糕的設(shè)計(jì)是哪一個(gè)，如果你發(fā)覺(jué)你的設(shè)計(jì)在這一群高質(zhì)量的設(shè)計(jì)里格格不入，那就是你的設(shè)計(jì)還不到這個(gè)水平。

另外就是多寫(xiě)。寫(xiě)作其實(shí)是一件很意思的事情，因?yàn)橛械臅r(shí)候你以為你知道了一些事情，但其實(shí)未必是一個(gè)有邏輯的知識(shí)體系，當(dāng)你去寫(xiě)作的時(shí)候，把這些東西想清楚的過(guò)程收獲會(huì)很多。一旦你在這個(gè)社區(qū)發(fā)出聲音，別人就會(huì)給你反饋，如果有些東西你不發(fā)出來(lái)的話你可能永遠(yuǎn)都不會(huì)得到這些反饋。你也可以給一些有名的雜志投稿，要是他們的編輯喜歡你的文章，那不就說(shuō)明你寫(xiě)的還不錯(cuò)嗎。

△ ? Samantha 在 A List Apart 上發(fā)表的文章

如何看待「全棧焦慮癥」？

Riceman:

我們能看出來(lái)你是一個(gè)技能非常廣的人，對(duì)自己也有高要求，不停的想學(xué)習(xí)新的東西，想要做3D 和 VR，學(xué)習(xí)各種新技術(shù)。但是現(xiàn)在有一個(gè)說(shuō)法就是「全棧焦慮癥」，這個(gè)詞也不只針對(duì)設(shè)計(jì)師，大家走進(jìn)職場(chǎng)以后發(fā)現(xiàn)這個(gè)東西也想學(xué)那個(gè)東西也想學(xué)，我想成為一個(gè)全棧的人，但是世界上冒出新的東西的速度實(shí)在太快了。那么你是怎樣選擇下一個(gè)技能點(diǎn)，怎么做出這個(gè)決定的呢 ?又是怎么處理自己的心態(tài)和情緒的？

Samantha:

這個(gè)感受我是一直都有的，我也一直試圖讓自己更加專(zhuān)注，有一個(gè)想法能夠讓我去處理這個(gè)焦慮——我們把這個(gè)社會(huì)不太恰當(dāng)?shù)乇茸饕粋€(gè)金字塔，當(dāng)你在下面的時(shí)候會(huì)覺(jué)得面很廣人很多，當(dāng)你不斷的想提升自己的層面、想去跨界的時(shí)候，是非常非常難的，比如像我現(xiàn)在如果真的想去做一個(gè) VR 設(shè)計(jì)師的時(shí)候，那我很多東西其實(shí)是要從頭來(lái)過(guò)。而當(dāng)你的層級(jí)開(kāi)始往上的時(shí)候，就不再過(guò)多地糾結(jié)于某個(gè)具體技能了，你可能得比較向上移動(dòng)比較快還是左右移動(dòng)比較快，你要確定你是要左右移動(dòng)而不是向上移動(dòng)，才去點(diǎn)那個(gè)技能點(diǎn)。

△ ? Samantha 的 Dribbble 上有各種各樣的設(shè)計(jì)探索

我一直會(huì)把自己的生活和工作還有想關(guān)注的點(diǎn)分成三個(gè)部分，一層可能是工作上面的就是是我得做，得做好；接下來(lái)我的業(yè)余時(shí)間的有一些事情可能是要優(yōu)先做的，像現(xiàn)在我在寫(xiě)設(shè)計(jì)博客，如果說(shuō)還有一些事情我想學(xué)的話我可能會(huì)把它歸類(lèi)于娛樂(lè)里面去。有時(shí)候焦慮是正常的，如果不焦慮的話我可能不知道我在干什么了。創(chuàng)業(yè)公司和大公司的環(huán)境不太一樣，對(duì)我們來(lái)說(shuō)半年之后我們還在不在都不知道，如果公司關(guān)門(mén)了，我怎么樣在更好的位置做我想做的事情？我覺(jué)得這種壓力是正常的。

Riceman:

我覺(jué)得有全棧焦慮癥的人都是有向上的動(dòng)力的人，所以焦慮未必是一件壞事。

張撓撓：

但重要的是你要自己知道優(yōu)先級(jí)是怎么樣的，哪些是對(duì)你最有好處的，這也是最難的一點(diǎn)。

Samantha:

具體一點(diǎn)，如果你想從設(shè)計(jì)師轉(zhuǎn)型工程師，你不知道你要去學(xué)習(xí)什么代碼的話，去問(wèn)你的工程師朋友是非常重要的，他們了解你寫(xiě)代碼的水平，會(huì)幫你去考慮很多你很難考慮到的東西。

聊聊數(shù)據(jù)可視化中的配色問(wèn)題

Riceman:

你提到最近花了很多時(shí)間在寫(xiě)設(shè)計(jì)博客，我們?cè)?Medium 上面看到了你寫(xiě)的好幾篇文章，特別是關(guān)于信息和數(shù)據(jù)可視化方面，我們覺(jué)得你對(duì)這方面頗有心得，其中一篇文章是講如何處理數(shù)據(jù)可視化中的配色問(wèn)題，跟我們講一講你在這方面的心得吧！數(shù)據(jù)可視化有哪些問(wèn)題，你又是如何解決的呢？

Samantha:

我覺(jué)得配色是在設(shè)計(jì)當(dāng)中有時(shí)候被過(guò)分看重的一個(gè)方面，這也可能是為什么這篇文章被那么廣泛傳播的原因之一，但是配色本身可能沒(méi)那么重要。在我的設(shè)計(jì)原則中，用戶的可用性是第一位的，一致性是第二，對(duì)美學(xué)的追求可能是第三。就數(shù)據(jù)可視化來(lái)說(shuō)，設(shè)計(jì)要為內(nèi)容服務(wù)，要為用戶服務(wù)，不是為炫酷的效果服務(wù)。

如果你的數(shù)據(jù)是非常簡(jiǎn)單的，比如只有一個(gè)維度，那你可以只用一個(gè)顏色就完成這個(gè)圖表。如果有 2 到 6 個(gè)顏色的話，那就用單色系，只給明度變化就解決了。尤其是一些分類(lèi)目的數(shù)據(jù)，比如年齡段，大概 2 到 6 個(gè)顏色，可以用一個(gè)單色系解決，就是色相不變，飽和度不變，明度變。這其實(shí)也是一個(gè)非常安全的做法，因?yàn)樯な强梢钥辞迕鞫鹊摹．?dāng)然對(duì)于某些色盲或者色弱的人群來(lái)說(shuō)，有一些顏色比另外一些顏色更不好辨認(rèn)。但是對(duì)于通常情況來(lái)說(shuō)，找到一個(gè)合適的顏色然后單色相變化，或者用品牌色變化就可以。

我那篇文章中主要討論的是 6 個(gè)顏色以上、數(shù)據(jù)之間有遞增關(guān)系的情況，這時(shí)如果只是單色相變化的話，當(dāng)他們不是按照一個(gè)規(guī)律的方式呈現(xiàn)的時(shí)候，對(duì)于沒(méi)有經(jīng)過(guò)太多美學(xué)訓(xùn)練的人，甚至是對(duì)設(shè)計(jì)師來(lái)說(shuō)，辨別它們會(huì)變的非常困難。我當(dāng)時(shí)找到的方法其實(shí)也是業(yè)界公認(rèn)的方法，就是把色相變化加到明度變化當(dāng)中。比如說(shuō)從第一個(gè)數(shù)據(jù)系列到第十個(gè)數(shù)據(jù)系列，按照「赤橙黃綠青藍(lán)紫」把紅色變到紫色，明度也從最亮變到了最暗，就兼顧了色盲色弱和普通人群，達(dá)到了易于鑒別的目的。

很多人還很喜歡文章中提到的一個(gè)小技巧：顏色變換不能只看數(shù)字。如果你把顏色純粹當(dāng)作一個(gè)數(shù)據(jù)變量的話，你會(huì)認(rèn)為淺黃漸變到深紫和淺紫變到深黃應(yīng)該是完全一致的，但是它給人的感覺(jué)是完全不一樣的。人眼看到的顏色主要是大自然中的顏色，你看到的晚霞是從深紫到金黃的變化，而你在自然界中很難找到淺紫到深黃的變化，這樣的搭配就會(huì)讓數(shù)據(jù)看起來(lái)很沒(méi)有邏輯。所以在色相和明度變化之外，就是色彩搭配要和自然界或者人們常見(jiàn)的顏色相符。我們常用的幾種自然界的漸變色包括：淺黃到明亮的綠色再到深藍(lán)，或者淺黃到深紫，這是晚霞的顏色，淺黃到紅再到棕色，差不多是火焰的顏色。

△ ?選擇哪種配色？從大自然中找答案

張撓撓：

你的文章中也說(shuō) not all colors are created equal，我們需要用自然界中用戶習(xí)慣的邏輯去呈現(xiàn)數(shù)據(jù)，才符合邏輯。

Riceman:

我們用語(yǔ)言解釋顏色可能會(huì)比較枯燥，非常推薦大家去看這篇文章，我個(gè)人看這篇文章很受啟發(fā)。很多設(shè)計(jì)師是在做數(shù)據(jù)可視化相關(guān)的項(xiàng)目，特別是一些做企業(yè)產(chǎn)品的同學(xué)會(huì)做報(bào)表，這么多數(shù)據(jù)點(diǎn)應(yīng)該如何選擇好看的顏色？Samantha 講到了自然界的顏色特別有意思，可能只有你在配出來(lái)放在屏幕上看，才能體會(huì)從深黃到淺紫是一個(gè)多么不自然的顏色，才能感受到我們對(duì)晚霞顏色的認(rèn)同感。

堅(jiān)持你的業(yè)余項(xiàng)目——想做就要趕緊去做

張撓撓：

我們知道 Samantha 在工作和寫(xiě)文章之外還有很多 side projects，去年你在Medium上發(fā)了一篇文章，講的是你 One side project per year 的挑戰(zhàn)，可以跟我們分享下現(xiàn)在的進(jìn)展嗎？

Samantha:

我先給一點(diǎn)點(diǎn)背景，這篇文章講的是像我們這樣的人，貪多嚼不爛，技能樹(shù)太廣，很多事情想做但可能做到一半就爛尾了。文章中的這個(gè)挑戰(zhàn)是說(shuō)，你一年只專(zhuān)注于一個(gè)項(xiàng)目，每個(gè)月寫(xiě)一篇進(jìn)度報(bào)告，用一年時(shí)間看看能不能把這個(gè)項(xiàng)目做成，或者做到一個(gè)你滿意的程度。當(dāng)時(shí)這篇文章收到了一千多個(gè)贊。我在文章下面也留給大家一個(gè)報(bào)名鏈接，歡迎大家來(lái)挑戰(zhàn)。當(dāng)時(shí)有56個(gè)人報(bào)名，我在 Medium 上為這個(gè)項(xiàng)目開(kāi)了一個(gè)專(zhuān)欄，完成第一篇進(jìn)度報(bào)告的人是大概30個(gè)人，完成第二篇進(jìn)度報(bào)告的人大概是24、25個(gè)，完成第6篇的人大概只有1個(gè)，好像是我。然后在10月份的時(shí)候，有一個(gè)人復(fù)活，更新了一篇。

我覺(jué)得這是一個(gè)很有意思的社會(huì)實(shí)驗(yàn)，告訴大家除非你意志堅(jiān)定、目標(biāo)遠(yuǎn)大、極端自律，不然你要做一個(gè) side project 做一年是很難堅(jiān)持的。常見(jiàn)的理由有：太忙了，停了一次之后就很難再堅(jiān)持下去；或者做著做著發(fā)覺(jué)這個(gè)項(xiàng)目可能不適合自己；也可能有一些很重要的人生轉(zhuǎn)折。在年關(guān)上我也在想，要么把它改成每個(gè)季度的挑戰(zhàn)，3個(gè)月的成功率還是挺高的，或者讓大家做一個(gè)「有意義的下午」之類(lèi)的。

Riceman:

你對(duì)其他想做 side project 的同學(xué)有什么建議嗎？比如把戰(zhàn)線縮短到一個(gè)季度這樣嗎？

張撓撓：

我覺(jué)得還有兩點(diǎn)啟發(fā)，一是通過(guò)進(jìn)度報(bào)告的方式可以讓自己有意識(shí)地養(yǎng)成習(xí)慣；二是從一開(kāi)始就要有心理預(yù)期，做特別核心的部分比如設(shè)計(jì)或者代碼可能只用了你一小部分的時(shí)間，但周邊工作和管理之類(lèi)的事情也會(huì)花時(shí)間。所以做業(yè)余項(xiàng)目一方面要養(yǎng)成習(xí)慣，另一方面是整個(gè)規(guī)劃要有條理。

Samantha:

想做就要趕緊去做。我有一個(gè)比較成功的例子是在學(xué) Parse.js 的時(shí)候，我當(dāng)時(shí)覺(jué)得這簡(jiǎn)直想寫(xiě)應(yīng)用的設(shè)計(jì)師的福音，就很熱情的學(xué)了，然后在 Tuts+上寫(xiě)了十個(gè)章節(jié)的教程。這段經(jīng)歷還算比較成功，我從學(xué)到寫(xiě)教程大概只用了兩個(gè)星期。在這兩個(gè)星期中，下班回家就趕緊開(kāi)學(xué)開(kāi)寫(xiě)，就速度的把它搞完了，所以我覺(jué)得最開(kāi)始的熱情是很重要的。如果你特別想做一個(gè) side project 的話，那就趕緊去做。先做它三個(gè)小時(shí)，第二天再做三個(gè)小時(shí)，在這兩天內(nèi)你就已經(jīng)做了相當(dāng)于之后一個(gè)月可能會(huì)做的工作量了，然后趕緊告訴全世界，你在做這個(gè)項(xiàng)目，我覺(jué)得要趁最開(kāi)始熱情在的時(shí)候把大部分內(nèi)容做完。

△ ?夢(mèng)想需要熱情和堅(jiān)持（Samantha 發(fā)在 Dribbble 上的作品）

嘉賓聯(lián)系方式：

Twitter： @moyicat

Portfolio：http://samanthaz.me/

Medium： https://medium.com/@moyicat

工作郵箱：szhang@graphiq.com

往期回顧：

1. 《從GOOGLE到AIRBNB，這個(gè)萌妹子想讓設(shè)計(jì)更有溫度》
2. 《專(zhuān)訪丨不會(huì)做PPT的人機(jī)交互博士不是好用研》
3. 《專(zhuān)訪丨十年設(shè)計(jì)，不忘初心（三星北美設(shè)計(jì)經(jīng)理穆怡雯）》
4. 《專(zhuān)訪丨從上海到硅谷的GOOGLE 交互設(shè)計(jì)師王斯捷》
5. 《專(zhuān)訪丨從迪士尼到紀(jì)念碑谷的中國(guó)設(shè)計(jì)師》
6. 《FACEBOOK 設(shè)計(jì)師張寧夏：斯坦福大學(xué)的人機(jī)交互專(zhuān)業(yè)是怎樣的？》
7. 《FACEBOOK 資深設(shè)計(jì)師何如佳：當(dāng)扎克伯格是你的產(chǎn)品經(jīng)理時(shí)》

掃描二維碼或微信內(nèi)搜索「UXCoffee」，關(guān)注 UX Coffee 設(shè)計(jì)咖 微信公眾賬號(hào)：