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

△ ? Samantha Zhang

我們聊了聊：

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

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

12歲開始用「記事本」寫網(wǎng)頁

Riceman:

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

Samantha:

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

Riceman:

那時候覺得用記事本寫網(wǎng)頁的都是超級高手。

Samantha:

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

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

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

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

張撓撓：

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

Samantha:

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

△ ? 西北大學(xué)

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

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

Samantha:

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

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

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

△ ? Graphiq 辦公室看最美日落

Riceman:

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

Samantha:

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

Riceman:

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

Samantha:

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

Graphiq 的前世今生

張撓撓：

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

Samantha:

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

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

Riceman:

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

Samantha:

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

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

△ ? Graphiq 的信息可視化與知識卡片

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

Riceman:

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

Samantha:

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

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

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

張撓撓：

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

Samantha:

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

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

張撓撓：

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

Samantha:

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

怎樣提高軟硬技能

Riceman:

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

Samantha:

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

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

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

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

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

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

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

Riceman:

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

Samantha:

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

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

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

Riceman:

我覺得有全棧焦慮癥的人都是有向上的動力的人，所以焦慮未必是一件壞事。

張撓撓：

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

Samantha:

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

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

Riceman:

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

Samantha:

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

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

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

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

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

張撓撓：

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

Riceman:

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

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

張撓撓：

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

Samantha:

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

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

Riceman:

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

張撓撓：

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

Samantha:

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

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

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

Twitter： @moyicat

Portfolio：http://samanthaz.me/

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

工作郵箱：szhang@graphiq.com

往期回顧：

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

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