當(dāng)我還是一個(gè)在瑞典成長(zhǎng)的孩子時(shí)，我房間里堆滿了一些設(shè)計(jì)得很有趣的木質(zhì)玩具。我記得我為這些簡(jiǎn)單的設(shè)計(jì)所著迷，明亮的顏色，抽象幾何形狀和有機(jī)形式的結(jié)合。它們的樣子和動(dòng)作能吸引你去和他們玩。

木質(zhì)的火車(chē)系統(tǒng)是非常棒的。你可以把軌道部分組裝成圓形、條形、s型，只要你想得到。但是你必須要思考你要怎么樣創(chuàng)造路徑——關(guān)于如何把碎片組裝起來(lái)是有邏輯的，你不能違背幾何構(gòu)成。

二十年過(guò)去了，我的孩子也玩著我童年的那些玩具?，F(xiàn)在我能聽(tīng)到他們正在用力地敲打木地板。這個(gè)持久性的設(shè)計(jì)已經(jīng)跨過(guò)了很多年，經(jīng)歷了一代又一代的變化。

去年春天，當(dāng)我第一次開(kāi)始專(zhuān)注在一個(gè)關(guān)于Pinterest設(shè)計(jì)的大問(wèn)題上時(shí)，這個(gè)奇妙的、自我證明的、有趣的童年景象出現(xiàn)在我腦海。實(shí)際上，是3個(gè)大問(wèn)題:

1、我們的UI風(fēng)格不統(tǒng)一

2、我們的視覺(jué)系統(tǒng)是過(guò)時(shí)的

3、我們的市場(chǎng)和我們的產(chǎn)品脫節(jié)

過(guò)去的這些年，我們網(wǎng)站、APP和營(yíng)銷(xiāo)的設(shè)計(jì)風(fēng)格都在游移，所以大家都覺(jué)得它們不再是同一個(gè)性。很多新的特征被加進(jìn)來(lái)，而沒(méi)有一個(gè)清晰的視覺(jué)是關(guān)于 如何適應(yīng)整個(gè)設(shè)計(jì)的。所以界面就開(kāi)始變得雜亂并且很難理解。當(dāng)你瀏覽呈現(xiàn)給你的頁(yè)面，沒(méi)有視覺(jué)層次或系統(tǒng)幫助你理解什么是重要的。這樣造成的結(jié)果就是，所 有有靈感的人在Pinterest都沒(méi)有最大的發(fā)揮——到目前為止，我們體驗(yàn)最重要的一部分正在消失。

事實(shí)證明，在某種程度上來(lái)說(shuō)，我們很難設(shè)計(jì)出風(fēng)格統(tǒng)一又獨(dú)特好看的東西。

原則問(wèn)題

Pinterest的整體體驗(yàn)非常需要保持簡(jiǎn)潔和統(tǒng)一。如果我們打算開(kāi)始重新設(shè)計(jì)，我們就要想清楚我們自己的一些關(guān)鍵設(shè)計(jì)原則。

我退到Pinterest地下室的一個(gè)黑暗的角落，花了好幾個(gè)星期的時(shí)間去研究設(shè)計(jì)。我甚至不確定我一開(kāi)始要做什么——基本上就像是我自己的統(tǒng)一模 塊的升級(jí)版本。我開(kāi)始琢磨這樣的問(wèn)題：為什么人們喜歡用Pinterest？是什么讓我們的產(chǎn)品變得獨(dú)特？我的個(gè)性特點(diǎn)是什么？我們是什么？

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

再往更遠(yuǎn)的方向想，Pinterest和BRIO本質(zhì)上有共同的3個(gè)基本原則。這些描述了Pinterest如今最好的特征，奠定了我們想要在未來(lái)把產(chǎn)品帶到哪里的基礎(chǔ)。

1、清晰易懂的

它很直觀，不需要學(xué)習(xí)；你能理解它怎么操作而不?任何直接的解釋。

它可以讓用戶變得更強(qiáng)大；沒(méi)有讓你覺(jué)得不舒服的東西或者讓你不能信任這個(gè)系統(tǒng)的東西。系統(tǒng)為您提供了正確的組件，會(huì)問(wèn)你下一步做什么。

它讓內(nèi)容的閱讀起來(lái)變得更好；框架是完全無(wú)縫和隱藏的。你沒(méi)有必要注意它，除非你要和它發(fā)生互動(dòng)。你可以決定它的樣子，而不是我們強(qiáng)加給你的。

2、活潑的

它是富有色彩的；它的個(gè)性突出而醒目。

它是視覺(jué)上的反饋；是以物理的方式進(jìn)行互動(dòng)的體驗(yàn)

它是意想不到的；這個(gè)體驗(yàn)是有趣好玩的，但不是壓倒性的。

3、不易破損的

它是基于探索建立的；就像一個(gè)小孩的玩具，你想嘗試它，看會(huì)發(fā)生什么。你研究得越多，你學(xué)的就越快，你得到得也就越多。

錯(cuò)誤的點(diǎn)擊是不可能出現(xiàn)的；被設(shè)計(jì)的內(nèi)容都是幫助你導(dǎo)航的，讓你準(zhǔn)確地做你想做的。

它是可逆的；如果你不小心做了某個(gè)操作，結(jié)果不是你想要的，很顯然你也知道怎么更改。

一旦我們概況出這3個(gè)原則。下一步就是把它們轉(zhuǎn)化成有形的東西，可能是我們建立的一切向前發(fā)展的基礎(chǔ)。

基本要素

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

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

顏色——我非常喜歡近似的配色方案。感覺(jué)很自然，讓人覺(jué)得平靜。當(dāng)你把一點(diǎn)點(diǎn)不同類(lèi)的顏色組合使用，最初是基于一些給定的互補(bǔ)色，結(jié)果是非常有趣和意想不到的。

層次——每個(gè)元素都是相當(dāng)有層級(jí)的。最重要的信息總是很清晰。因?yàn)槲覀冊(cè)O(shè)計(jì)的時(shí)候問(wèn)過(guò)自己，讓用戶理解最重要的是什么？我們能怎么變化去讓信息更加明顯？

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

早期的探索和想法

我們想要知道如果我們把所有的邊框從UI中移走會(huì)發(fā)生什么？能將焦點(diǎn)返回到對(duì)象本身嗎？或者這個(gè)體驗(yàn)會(huì)完全讓人崩潰？

結(jié)果證明減少邊框后編排的感覺(jué)是很好的。Pinterest的設(shè)計(jì)師們終于重新找回了重點(diǎn)。我們并不是完全去掉邊框，因?yàn)樗鼈兇_實(shí)使得某條信息對(duì)應(yīng) 某個(gè)圖片變得清晰。我們等著展示邊框，知道你對(duì)點(diǎn)擊擁有足夠的好奇。通過(guò)這種方式，界面會(huì)教你怎么把信息和我們的系統(tǒng)連接重組。一旦理解了Pin是怎么被 建立的，你就只需要去體驗(yàn)這個(gè)交互。

設(shè)計(jì)一套新的標(biāo)準(zhǔn)

經(jīng)過(guò)了幾個(gè)月對(duì)設(shè)計(jì)和交互的探索，團(tuán)隊(duì)和我最終把內(nèi)容放到了我們覺(jué)得符合我們說(shuō)的3個(gè)產(chǎn)品原則（清晰易懂、活躍的、不易破損的）的地方。我們準(zhǔn)備對(duì)我們新建立的原則和設(shè)計(jì)系統(tǒng)進(jìn)行測(cè)試。

我們想以一個(gè)邊框系統(tǒng)開(kāi)始，所以我們決定先使用在我們的iOS的APP上。對(duì)于我們的第一次測(cè)試，我們把焦點(diǎn)放在視覺(jué)設(shè)計(jì)上——之后將會(huì)重構(gòu)信息架構(gòu)。你可以在WIRED閱讀所有關(guān)于iOS的改版設(shè)計(jì)和協(xié)調(diào)后端重建。

伴隨著APP的改版，我們也重建了我們Pinterest的產(chǎn)品設(shè)計(jì)標(biāo)準(zhǔn)，包括：

系統(tǒng)——圖形，文字，顏色，網(wǎng)格

框架——組件的組織

環(huán)境——所有我們正在設(shè)計(jì)的小東西

接下來(lái)9個(gè)月的時(shí)間，我們和開(kāi)發(fā)人員緊密協(xié)作去建立每個(gè)組件，并且做了很多次的修改和調(diào)整。這需要難以想象的共同努力以確保我們建議的東西不僅僅滿足我們的設(shè)計(jì)目標(biāo)，同時(shí)也能被所有其他Pinterest產(chǎn)品的開(kāi)發(fā)團(tuán)隊(duì)重復(fù)使用。

史詩(shī)級(jí)的團(tuán)隊(duì)實(shí)現(xiàn)了改版

Pinterest的整個(gè)產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)都為卷入審查和執(zhí)行新的設(shè)計(jì)系統(tǒng)。

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

最后，我和Pinterest的品牌團(tuán)隊(duì)密切配合去做新的品牌指南，這個(gè)指南能反映出這些相同的設(shè)計(jì)原則，我們最新的營(yíng)銷(xiāo)已經(jīng)開(kāi)始讓人覺(jué)得它與我們的產(chǎn)品有著同樣的氣質(zhì)了。

接下來(lái)，我們將著手解決下一波的iOS APP改進(jìn)，重新設(shè)計(jì)Pinterest網(wǎng)站和Android APP，而且我們正在尋找更多主力設(shè)計(jì)師來(lái)幫助我們實(shí)現(xiàn)這個(gè)計(jì)劃。當(dāng)這個(gè)最終實(shí)現(xiàn)后，我希望你和我們一樣興奮。

譯者：@狐貍-Jean

譯文來(lái)自：優(yōu)設(shè)

原文地址：medium