本文由設計夾（微信：sezign）編譯，作者 狐貍，極客公園已獲得轉載授權。原文鏈接： https://medium.com/@suprb/redesigning-pinterest-block-by-block-6040a00d80a3#.6525fesxw ?

---

當我還是一個在瑞典成長的孩子時，我房間里堆滿了一些設計得很有趣的木質玩具。我記得我為這些簡單的設計所著迷，明亮的顏色，抽象幾何形狀和有機形式的結合。它們的樣子和動作能吸引你去和他們玩。

木質的火車系統是非常棒的。你可以把軌道部分組裝成圓形，條形，s型，只要你想得到。但是你必須要思考你要怎么樣創造路徑——關于如何把碎片組裝起來是有邏輯的，你不能違背幾何構成。

二十年過去了，我的孩子也玩著我童年的那些玩具。現在我能聽到他們正在用力地敲打木地板。這個持久性的設計已經跨過了很多年，經歷了一代又一代的變化。

去年春天，當我第一次開始專注在一個關于Pinterest設計的大問題上時，這個奇妙的、自我證明的、有趣的童年景象出現在我腦海。實際上，是3個大問題。

1、我們的UI風格不統一

2、我們的視覺系統是過時的

3、我們的市場和我們的產品脫節

過去的這些年，我們網站、APP和營銷的設計風格都在游移，所以大家都覺得它們不再是同一個性。很多新的特征被加進來，而沒有一個清晰的視覺是關于如何適應整個設計的。所以界面就開始變得雜亂并且很難理解。當你瀏覽呈現給你的頁面，沒有視覺層次或系統幫助你理解什么是重要的。這樣造成的結果就是，所有有靈感的人在Pinterest都沒有最大的發揮——到目前為止，我們體驗最重要的一部分正在消失。

事實證明，在某種程度上來說，我們很難設計出風格統一又獨特好看的東西。

原則問題

Pinterest的整體體驗非常需要保持簡潔和統一。如果我們打算開始做，我們就需要想清楚我們自己的一些關鍵設計原則。

我退到Pinterest地下室的一個黑暗的角落，花了好幾個星期的時間去研究設計。我甚至不確定我一開始要做什么——基本上就像是我自己的統一模塊的升級版本。我開始琢磨這樣的問題：為什么人們喜歡用Pinterest？是什么讓我們的產品變得獨特？我的個性特點是什么？我們是什么？

我越思考這些，我就越意識到Pinterest有很多的本質，就像我的家人喜愛收藏的有趣玩具。兩者都鼓勵你和不同的選項玩耍，把碎片連接起來，創造屬于你自己的世界。你能開始做你自己的目標和項目，你能從別人正在做的和構建的東西中獲得靈感。你投入進去，然后立即開始玩，在你想要的任何時候停止，然后回來，從你離開的地方拿起正確的。

再往更遠的方向想，Pinterest和BRIO本質上有共同的3 個基本原則。這些描述了Pinterest如今最好的特征，奠定了我們想要在未來把產品帶到哪里的基礎。

1、清晰易懂的

它很直觀，不需要學習

你能理解它怎么操作而不?任何直接的解釋。

它可以讓用戶變得更強大

沒有讓你覺得不舒服的東西或者讓你不能信任這個系統的東西。系統為您提供了正確的組件，會問你下一步做什么。

它讓內容的閱讀起來變得更好

框架是完全無縫和隱藏的。你沒有必要注意它，除非你要和它發生互動。你可以決定它的樣子，而不是我們強加給你的。

2、活潑的

它是富有色彩的

它的個性突出而醒目。

它是視覺上的反饋

是以物理的方式進行互動的體驗

它是不意想不到的

這個體驗是有趣好玩的，但不是壓倒性的。

3、 不易破損的

它是基于探索建立的

就像一個小孩的玩具，你想嘗試它，看會發生什么。你研究得越多，你學的就越快，你得到得也就越多。

錯誤的點擊是不可能出現的

被設計的內容都是幫助你導航的，讓你準確地做你想做的。

它是可逆的

如果你不小心做了某個操作，結果不是你想要的，很顯然你也知道怎么更改。

一旦我們概況出這3個原則。下一步就是把它們轉化成有形的東西，可能是我們建立的一切向前發展的基礎。

基本要素

形狀——我們使用基本的容易觸控的形狀，人們很自然能理解，并想要和這些形狀交互。

邊角是圓形的，目的是讓用戶覺得更加容易親近。

顏色——我非常喜歡近似的配色方案。感覺很自然，讓人覺得平靜。當你把一點點不同類的顏色組合使用，最初是基于一些給定的互補色，結果是非常有趣和意想不到的。

層次——每個元素都是相當有層級的。最重要的信息總是很清晰。因為我們設計的時候問過自己，讓用戶理解最重要的是什么？我們能怎么變化去讓信息更加明顯？

留白——在舊版的Pinterest設計里，我們總關注在包含用戶需要內容的邊框上，它的比重甚至超過了內容本身。如你看到的，有很多的線條、漸變和灰色的陰影。沒有讓人呼吸的地方。留白會在元素之間有個自然的分割，而不會添加視覺的干擾。結果是平衡和穩固，空格的數量增加了個性和影響。

早期的探索和想法

我們想要知道如果我們把所有的邊框從UI中移走會發生什么？能將焦點返回到對象本身嗎？或者這個體驗會完全讓人崩潰？

結果證明減少邊框后編排的感覺是很好的。Pinterest的設計師們終于重新找回了重點。我們并不是完全去掉邊框，因為它們確實使得某條信息對應某個圖片變得清晰。我們等著展示邊框，知道你對點擊擁有足夠的好奇。通過這種方式，界面會教你怎么把信息和我們的系統連接重組。一旦理解了Pin是怎么被建立的，你就只需要去體驗這個交互。

設計一套新的標準

經過了幾個月對設計和交互的探索，團隊和我最終把內容放到了我們覺得符合我們說的3個產品原則（清晰易懂、活躍的、不易破損的）的地方。我們準備對我們新建立的原則和設計系統進行測試。

我們想以一個邊框系統開始，所以我們決定先使用在我們的iOS的APP上。對于我們的第一次測試，我們把焦點放在視覺設計上——之后將會重構信息架構。你可以在WIRED閱讀所有關于iOS的改版設計和協調后端重建。

伴隨著APP的改版，我們也重建了我們Pinterest的產品設計標準，包括：

系統——圖形，文字，顏色，網格

框架——組件的組織

環境——所有我們正在設計的小東西

接下來9個月的時間，我們和開發人員緊密協作去建立每個組件，并且做了很多次的修改和調整。這需要難以想象的共同努力以確保我們建議的東西不僅僅滿足我們的設計目標，同時也能被所有其他Pinterest產品的開發團隊重復使用。

史詩級的團隊實現了改版

Pinterest的整個產品設計團隊都為卷入審查和執行新的設計系統。

我們也有一個小型的優秀設計師團隊?(Annie Teng,?Jay Marsh,Kimberly Fellman,?Linus Wahlstedt,?LongCheng,?Patrik Goethe,?Rick Chatas,Susan Kare,?TomWatson,?Woosung Kang)，他們和我以及一起緊密配合，我們很棒的工程師也一起進行設計迭代，來找到最適合的轉場和曲線，做不同的手勢圖原型等等。這真的是這個過程最好的部分。跨團隊合作，從多個角度整合了反饋意見（一個在Pinterest大家都知道叫做“編織”的方法），使得結果成倍增強。而在這個過程里，我們也感受到了很多樂趣。

最后，我和Pinterest的品牌團隊密切配合去做新的品牌指南，這個指南能反映出這些相同的設計原則，我們最新的營銷已經開始讓人覺得它與我們的產品有著同樣的氣質了。

接下來，我們將著手解決下一波的iOS APP改進，重新設計Pinterest網站和Android APP，而且我們正在尋找更多主力設計師來幫助我們實現這個計劃。當這個最終實現后，我希望你和我們一樣興奮。