Julie Zhuo（右一，照片來源：Rasmus Andersson）

曾經發表過多篇關於管理、設計和產品團隊運作相關文章的 Facebook 產品設計總監 Julie Zhuo，最近發表了一篇文章 〈Why Design at Facebook〉，談到她眼中 Facebook 的設計工作，同時也透過 Medium 的版面為 Facebook 尋找有才能的設計師，我們不妨來看看這位 Facebook 產品設計總監渴求的設計師應具備哪些特質：

對我來說，Facebook 的故事最經典的部份既不是早期在哈佛宿舍起步階段，也不是電影裡面 Justin Timberlake 在餐廳裡面一邊喝酒一邊說「100 萬不夠酷，10 億才夠酷」¹，事實上，我認為跟任何個人都無關。

關於 Facebook 最重要的還是與產品有關，這是 Facebook 第一位設計師 Aaron Sittig 告訴我的。

2005 年，Facebook 推出照片上傳功能。當然，那時候網路上有很多各式各樣的相簿服務，而 Flickr 是當時的業界標準，如果將 Facebook 的照片上傳功能與 Flickr 一項一項比較，簡直就像是拿現代汽車與 BMW 相比。在 Facebook，只能上傳低解析度的照片，看起來很小、很模糊，而且是被放在層層疊疊、文字與連結充斥的頁面中，而不是用簡單的黑色背景去襯托照片本身。那時候的 Facebook 沒有方便好用的照片瀏覽功能，沒有一整排的照片可以預覽，也看不到下一張照片的縮圖。當然也沒有什麼快速鍵可以用，而且載入的速度也不是很快。

但是過了一年半之後，Facebook 成為全世界最受歡迎的照片分享服務。

為什麼？

因為在 Facebook 上，你可以做一些別的服務辦不到的事：標記你的朋友。這項功能讓你可以上傳一張照片然後說這是你和好朋友 Mike 的合照，而且不只 Mike 會看到，你的朋友也可以在他們自己的動態消息（News Feed）和你的個人檔案頁面上看到。

你有沒有注意過人們家中所掛的家庭照片？我不知道其他人是怎麼樣，但是我的親戚們大多不是專業攝影師。我父母在牆上充滿整個家族的照片，一些是有人在名勝前擺出各種動作、一些褪色了或是顏色太藍太紫了。我的父母臥室裡有一張我六歲時的照片，構圖有點可怕。但我的父母一點也不在意，對他們，或是說大部分的人而言，重要的是那些關於人、關於記憶的照片本身，家人朋友在某個時間點聚集在一起、婚禮、畢業典禮、假期和家族照等等。

人們在意照片裡的人勝過照片本身的品質千百倍。能過重溫當時誰在照片裡面、鏡頭捕捉到遠方的愛人、在萬聖節的隔天嘲笑朋友當時的裝扮——這才是照片對絕大多數人們最重要的價值。

而這，對我來說，就代表著 Facebook：持續不懈地專注於規模化的影響力、創造一些價值不僅僅限於一小群誕生在第一世界、可以享受一些像是攝影這種嗜好的人，而是對全世界絕大多數人有意義的事物。

照片一定要在最好的照明之下呈現嗎？當然。載入應該要很快嗎？毫無疑問。瀏覽照片的體驗一定要很棒嗎？絕對是的。這沒什麼好爭論，因為我難以想像一旦可以選擇，有誰會選又醜、又慢、很難瀏覽的照片？這不是二選一的問題。身為一個建設者、一名設計師，不在邁向理想的道路上精益求精就是一種怠惰。

但是當我們談到輕重緩急，當我們談到驅動一間公司的核心，對我來說 Facebook 永遠是關於人，那些我們為之打造事物的人，才是判斷產品好壞、重要與否的終極決定者。大多數的人——不是你也不是我，不是 CEO，也不是我們的朋友，也不是世界上最富創造力的人們——才是我們服務的最重要對象。

當我思考自己想要成為什麼樣的設計師時，我想到的是那位設計師，那位明白為照片加上標籤功能才是解開人們想要什麼的關鍵、把東西做出來然後推出的人。

如果你也想成為那樣的設計師，我們應該好好聊一聊。

真的，我們應該聊一聊，我是認真的。

我在個人部落格上談到關於 Facebook 的事並不多，對設計、打造產品的人來說，關於設計工作有太多議題可以談。

但是，每一家公司，就像每一個人，都有他們自己的故事。在 Facebook，我們正在找設計師來寫下新的篇章，從我們為使用者帶來他們最感興趣的動態訊息，到如何連結起那些沒辦法上網的人，²讓訊息如何以最快、最有效的方式傳遞，我們還有很多事情要做。

以我的經驗來看，打造一個好團隊不是只看重才華與工作能力。就像任何一段好的戀愛關係，這是適合與否的問題。Facebook 可能不是適合你的地方，這很 ok，我知道對很多才華洋溢的設計師而言事實就是如此。

但我同時也知道，在許多有才氣的設計師看來 Facebook 就是那個完美的環境。你可能就是其中之一，如果你是一位這樣的設計師：

• 你很重視「連結、賦權予全人類」的任務。
• 相較於一小群你認識的人，為數以百萬計的人解決問題，更能令你感到滿足。
• 充滿好奇、適應力強，並且總是願意從你所服務的人身上學習。
• 相信對的工具能夠解決對的問題。
• 相信取得好成績的最佳辦法就是投資在好的流程上。
• 對於某種程度的模糊與混亂感到舒適，比起被明確告之該做什麼，更願意主動嘗試。
• 深深地在意品質，願意為了工藝而付出。
• 追求開放、透明的文化。
• 明白自己和身邊的人都會犯錯，同時一起從錯誤中學習，讓團隊成長得更將強壯。
• 樂於把自我意識收進盒子裡，而不是放在展示台上。
• 願意想像一個充滿啟發性的未來，並且協助其他人一起朝著這樣的未來供同努力。
• 比起爭辯理論性的概念，更願意解決問題。
• 取得成績而非獲得讚美。

如果你是這樣的設計師，也有幾年的實作經驗，說不定你就是 Facebook 要找的人才。

本文轉自阿里媽媽 MUX 〈Material Design 引領的設計趨勢〉，Inside 獲授權轉載。

兩個月前，Google I/O 大會發表了 Android L，並推出 Material Design，重新統一了 Google 的設計語言，確立了未來 Google 的設計方向。那麼，什麼是 Material Design？我簡單地將它翻譯成「本質設計」。顧名思義，這是一種考慮事物本質的設計，將電子螢幕裡的 UI 元素看成是一種不存在於現實世界的新的材質，並賦予它物理特性。因此 Material Design 並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來，其實兩者並不是對立關係。但我更願意稱 Google 新的設計語言為抽象化。

無論是蘋果的設計語言，還是 Google 的設計語言，乃至於 Windows 的 Modern UI 和 Facebook 的 Paper 設計語言，大方向都是一致的，而在細節上卻分道揚鑣。蘋果與 Google 幾乎壟斷了移動裝置的作業系統，因此我們談談從新發布的 Material Design 中看看有哪些無線裝置的設計趨勢。

1. 紙的形態模擬

前言已提到 Material Design 並不是一種去擬物的設計，也不是一種強調擬物的設計。我們知道電子螢幕是完全平面化的，不像現實當中的物體是 3D 的 。一本書裡每一頁紙之間的空間關係是很清楚的，但電子螢幕的所以物體都在一個平面上。雖然電子螢幕沒有空間感，但資訊內容是有空間層級的關係。而 Material Design 的解決方式就是把現實世界中紙張的特性挪到電子螢幕裡，把資訊內容呈現在這個虛擬的紙上，紙（資訊內容）跟紙之間有上下層級關係，用投影模擬紙張的空間感。Material Design 的投影並不是過去我們常用的使用圖片或者樣式程式實現的投影，而是系統根據紙張層級所在位置實時渲染的，投影會隨著紙張的空間關係而改變大小。

Google 幾年前推行的 Card 設計就是模擬紙張物理形態的一種設計方式，但 Material Design 把它提升到了系統資訊架構層面的高度。

另外，iOS 的模糊效果從本質上來說與 Material Design 的紙張設計要解決的問題是同樣的。通過模擬景深的效果來表達內容資訊的層級關係。

2. 轉場動畫

過去我們的頁面只有 X 與 Y 軸，打開一個新的頁面則是生硬地直接跳轉到新的頁面，並沒有點出頁面的空間層級關係。而 iOS7 與 Material 則強調 Z 軸，即頁面之間的空間層級關係。iOS 裡打開一個 app，頁面將從你點擊的 app 圖標為中心點擴散出來，同樣的設計在 Android L 上也隨處可見。通過轉場動畫告訴我們，這個頁面從哪裡來，到哪裡去，在整個 APP 或者係統裡的空間位置是什麼。

另外，不僅僅是頁面層級的動畫過渡，對像作業也伴隨著動畫過渡，從動畫裡能感受到作業的過程變化。例如刪除時，垃圾桶圖標會有一個傾倒的動畫，或者通過指示條的旋轉告訴你刪除的過程。另一方面，過渡動畫賦予了介面控件一種物理特性，在空間被拉伸、回彈時模仿了橡皮筋的物理特性。值得一提的是，在轉場動畫的設計上，Facebooke Paper 的非常突出。

3. ICON 動畫

互動動畫在一些 app 裡已經大行其道，特別是 Facebook Paper 的動畫讓人印象深刻。在以後，互動動畫將成為標配，隨之而來，更多設計師把目標轉移到 icon 上來。Icon 主要分為入口功能和作業功能，作業功能的 icon 在完成點擊作業之後，通常會轉為對應的另外一種形態。如「返回」與「菜單，」「選擇」與「未選擇」，「收藏」與「已收藏」「點贊」與「取消點贊」的狀態之間切換。現在的設計裡，icon 在兩種狀態之間的切換通常顯得生硬，icon 動畫將使得點擊之後的回饋更佳強烈，並且讓介面活起來，性感起來。

目前 HTML5 已經可以實現 icon 動畫的繪製，原理是設計師提供 svg 格式的圖標，有前端通過 html+css+js 繪製轉場效果。svg 格式的圖標，可以透過程式碼控制圖標的每一個節點，從而進行形狀變形。

阿里巴巴 MUX 團隊對外提供了 svg 格式圖標的免費下載：

4. 大面積色塊 action bar

Material Design 設計語言讓人眼前一亮的除了豐富的互動動畫外，還有大面積使用了鮮豔的色塊。過去的 Andr​​oid 讓人覺得冰冷科技感，讓人有一種距離感。而新的設計採用了與過去相反的做法，在系統裡大面積使用色塊，用色塊來突出主要內容和標題，讓介面的主次感更佳突出，也讓原本灰黑色為主的介面擁有了時尚和活力。色塊的顏色選擇多使用飽和度高、明度適中的顏色，整體擁有比較強烈的視覺衝擊，但並不會太刺眼。Action bar 也同樣從過去的灰黑顏色改為彩色，並且讓狀態欄與之融為一體，這點與 iOS7 的設計非常相似。

5.FAB 按鈕（Fixed Action Button ）

在 Google 的宣傳片裡，最引人注目的新玩意，就是這個淘氣的圓形小按鈕了。從宣傳片裡來看，這個按鈕的功能並不局限於「新建」「播放」「收藏」「更多」等功能。它於整體介面的配色形成比較大的反差，因此會讓這個按鈕在介面裡顯得非常耀眼，從這樣的設計來看，這個按鈕所背負的任務將會是整個介面的主要作業。雖然有點類似與 Path 裡的「+」按鈕，但由於 iOS 系統本身並沒有這樣的設計，這將會成為最區別於 iOS 的一種互動設計，對互動設計師和產品經理來說都可能會成為一種挑戰。

6. 無邊框按鈕

在 iOS7 的設計裡，我們已經看到了這樣的影子。最典型的便是「返回」按鈕只有箭頭和文案，去掉了原本的按鈕質感。Material Design 的 action bar 也同樣採用了這樣的設計，直接用 icon 來表達按鈕功能。尤其是 Material 的鍵盤設計風格，最早對鍵盤風格進行極簡設計的是微軟的 Windows Phone，Android 和 iOS 相繼跟進。而這次 Material 走得更極端，把鍵盤的按鈕邊框全部去掉，只保留了英文字母的按鈕。我們不能說這樣的設計一定是好的，這樣的設計可能讓使用者對點擊的精準度無法更快地判斷，缺乏安全感。好處是在螢幕不大的手機上，去掉邊框的擁擠感會給字母更大的空間。

另外，無邊框按鈕的設計也體現在提示框的按鈕上。

如何讓無邊框的按鈕區別於內容文字，這需要設計師除了考慮配色外，還需要考慮按鈕出現的場景，對設計師的在應用場景的解讀上也是一個挑戰。

7. 聚焦大圖

一張與螢幕等寬，豎方向佔據半個螢幕左右的大圖，去掉 action bar，只保留返回按鈕的設計，在一兩年前十分流行的 summly app 上就已經非常紅了。後續也有一些 app 跟進這樣的設計（例如淘寶），但並沒有大範圍流行起來。Material Design 很大膽地使用了這樣的設計。在 Google 的引導下，這樣的設計風格將很有可能風靡起來。

 

作者簡介：路怡珍（Catherine Lu），TechCrunch 2014北京峰會主持人。東森財經新聞主播，前香港鳳凰衛視主持人，08年畢業於台灣大學  政治系，大學期間是美國哈佛大學及史丹佛大學的交換生。

她的 Facebook：www.facebook.com/catethesia，個人部落格：

下午時分，飛機在北京首都機場跑道上滑行。我一手把紅筆圈得亂七八糟的資料塞進包包，一手找台胞證，1%興奮，99%慌亂。我旁邊坐的是伊能靜，她在用微信跟經紀人溝通要不要接活動，好像也找不到東西。我確定我們兩個不是小小機艙裡唯二的台灣人，她在北京有工作，我則是飛進來主持TechCrunch的北京站峰會，我看到有更多努力的台商在闔上電腦，拿手機跟當地的夥伴聯繫。

我希望我接下來可以寫出司機直接載我去Conrad樓頂酒吧這種香豔的細節，但我不能，我不敢，我怕我沒有準備好。TechCrunch北京站的嘉賓名單，不論我看了多少次都覺得胸口有一點悶悶的，Google Greater China VP，Qualcomm的SVP，500Starup founder Dave McClure，Leap Motion CEO Michael Buckwald，搜狗CEO王小川，真格基金/新東方創始人徐小平，《創業的國度》作者Singer...，兩整天排的滿滿滿：他們的文化脈絡不同，語言不同，到TC Beijing的期待也不一樣，要把他們緊密的貫穿起來真的不容易，所以一下飛機，我就直去主辦單位辦公室和他們開會，想抓緊時間準備。

第一個讓我驚訝的細節，是主辦團隊非常年輕：10多人，20歲，辦5000人的活動，接待世界各地飛來的科技嘉賓。架網站、拉贊助、設計動畫、公關合作，從零開始，他們挽起袖子就動起來。他們熱愛科技、也愛科技代表的意義，因此一個月來不眠不休。

台灣認識中國年輕人的這一面嗎？

我每天看到的新聞，最多的是上海地鐵裡有女生拿鞋子丟人，北京大街上有元配甩小三巴掌，但這種資訊對兩岸競爭究竟有什麼意義？而如果我們的眼睛停留在這裡，要怎麼知道雙方差距有多少？我在主辦單位辦公室開會的時候，我感覺到自己心跳很快，那是心虛的心跳，我知道我20歲沒有他們這麼優秀、這麼獨力、這麼能動。幾張桌子拼在一起，一間co-working space，電腦一開就專注工作。我20歲根本還不知道TechCrunch是什麼。活動辦已經在水準之上，CNN Beijing Bureau Chief Jaime Florcruz也看到他們的才能，我看到Jamie在會議結束後親自跟團隊交換名片。

第二個讓我驚訝的是TC在現場的創業競賽，我看到了無人機Drones的改良，看到視覺搜索特惠價格、手指隔空操作螢幕、智能項鍊紀錄你頸椎的健康程度、或10秒鐘完成居家裝潢的設計圖的app…..。60多隊的參賽隊伍，有的作tool有的作service，想像力和技術遍地開花。當中有許多許多是來自於台灣的創業隊伍，能夠在異鄉看到台灣發亮，實在讓人非常振奮。

我發現這些團隊創始人非常積極自信，英文再不好，拉著TechCrunch的COO就直接換名片，抓著Sequoia、戈壁、Crunchfund的人，走在會場走廊都在pitch. 要知道，這是世界頂級的seed fund和VC，名稱講出來都讓我倒抽一口氣，但這些中國年輕人完全「不害怕」，就算他們英文不像美國人、技術還需要時間成熟，但是他們挺直胸膛要讓大家看見。

這是個尖銳的警訊，因為英文可以變好，技術可以精良，練習就可以，但是這種「稱霸」的野心，卻不是靠練習就能得來的。國際舞台上，一次又一次，台灣人總是相對扭捏、害羞、謙讓，於是乎世界的聚光燈，2014年的今天，全部打在中國年輕人的臉上。

第三個讓我驚訝的地方，是他們年輕人的底氣。與會有一個嘉賓是今日頭條的創始人張一鳴，這個新聞聚合的產品能作到估值5億美金，整個業界下巴掉在地上都還沒撿起來，但是訪問他的一個年輕男生，在舞台上多次逼問張一鳴演算法、來源、著作權保護的問題，我在台下看著也在扶著自己的下巴。

重覆詰問可能不是最好的訪談方式，但是台灣「甜美」的這個特質，還能管用多久？而在訪談專業上，誰能這麼有氣場的問出尖銳的質問呢？更何況考量兩人年紀、資產、頭銜的巨大差異。中國的邏輯是：我決不自我設限，舞台上我們都是王，就算只有10分鐘，下台之後，你是你5億美元企業的CEO，我回去念我的大學。這個心態，我在每一場訪談都可以看見，而我很佩服。

科技的重鎮在矽谷，但是我想起來他們常常說，矽谷不是一個地理名稱，是一種心智狀態。

我在北京看得到他們年輕人獨特的心智：狼性、霸氣、在詭譎的條件中，展現靈活的生存能力。台灣精緻而小眾，從電影到書店到咖啡店到科技領域，處處都是(也只有)小清新，但小清新不是一個能在商場上拼搏的心智狀態，不是拿得上談判桌的堅硬實力。

我這一代的人，中學國文都讀過「我們到柏克萊到底有多遠？」幾十年來，我們一直重覆的問同一個問題，以前比較的對象是美國，現在比較的對象是中國大陸，我們問的一直都不是物理的距離，我們問的是心理上的差距，我這一次主持完兩天最大的感覺就是，差距巨大而顯著，我們快要來不及了。

所以，請你站起來，快一點的站起來，走出去，去坐下跟他們一起開會，去比較去問問題，去說話去吵架，去一起趕一篇PowerPoint，去一起合作跟國外競爭，並且在這個過程當中，紮實的把自己的、屬於台灣的優勢想清楚，用力的、持續的發揮出來。不要只看自己的肚臍，不要每天窩在小清新的咖啡廳看韓劇聊八卦，這樣就算幾年之後，出了速度再快10倍的飛機，我們都到不了北京。