2021-8-15 資深UI設(shè)計(jì)者
本期提綱：
在本文中，我們將分享如何提煉出設(shè)計(jì)原則，并在團(tuán)隊(duì)中引推廣實(shí)施的。
去年，我們一群人聚在一起探討了一個棘手的問題：隨著 Spotify 的不斷發(fā)展，我們?nèi)绾卧诋a(chǎn)品迭代中保持高水平的設(shè)計(jì)質(zhì)量？
經(jīng)過研究和討論，我們確定了一個方向：為了提高質(zhì)量，我們需要清晰、有用的設(shè)計(jì)原則。一方面，我們認(rèn)為只有定義了 Spotify 的設(shè)計(jì)原則是什么，才能夠幫助團(tuán)隊(duì)評估他們是否以 “Spotify 方式” 進(jìn)行設(shè)計(jì)。另一方面，我們還希望幫助設(shè)計(jì)師在討論設(shè)計(jì)目標(biāo)和設(shè)計(jì)評審時使用相同的評價標(biāo)準(zhǔn)。通過不斷更新的設(shè)計(jì)原則可以實(shí)現(xiàn)保持高水平設(shè)計(jì)質(zhì)量的目標(biāo)。
為了解決設(shè)計(jì)無法標(biāo)準(zhǔn)化的問題，2013 年，Spotify 制定了最初的設(shè)計(jì)原則：內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實(shí)、恰如其分，這些原則讓設(shè)計(jì)師們在輸出和討論方案的時候有方向可循。有了設(shè)計(jì)原則之后，我們的設(shè)計(jì)方案在字體、色彩、圖片、板式、信息架構(gòu)和交互方式等方面都具備了一致性，即使不是設(shè)計(jì)師也能夠?qū)ξ覀兊脑O(shè)計(jì)產(chǎn)生共鳴。
Spotify 在 2013 年制定的設(shè)計(jì)原則：內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實(shí)、恰如其分。
但設(shè)計(jì)原則是需要與我們的業(yè)務(wù)目標(biāo)一起向前的，到了 2020 年，Spotify 已經(jīng)發(fā)生了很大變化，我們在播客上加倍發(fā)力，我們?yōu)橄M(fèi)者提供的不僅僅是音樂，而是包含廣播、故事等更多元的音頻形式；我們服務(wù)的對象，不僅僅是聽眾，還有藝術(shù)家和廣告商；我們的設(shè)計(jì)師團(tuán)隊(duì)也不斷的壯大，發(fā)展到現(xiàn)在已經(jīng)有近 200 人。
看著 2013 年制定的設(shè)計(jì)原則，我們問自己：這些設(shè)計(jì)原則對于我們現(xiàn)在的設(shè)計(jì)是否還是正確的？Spotify 的設(shè)計(jì)師們是否真的意識到這些設(shè)計(jì)原則的存在？答案是否定的。
我們經(jīng)過對現(xiàn)有設(shè)計(jì)原則的討論，發(fā)現(xiàn)了以下三個方面的問題：
1. 無法滿足不同內(nèi)容的需求：原本的設(shè)計(jì)原則，更專注于消費(fèi)者的音樂體驗(yàn)，然而隨著 Spotify 的發(fā)展壯大，我們的產(chǎn)品不僅僅是音樂，而是包含更多內(nèi)容的音頻，但這些原則似乎并不適用于我們設(shè)計(jì)的所有內(nèi)容。
2. 概念容易混淆：比如 “l(fā)agom” 和 “do less”，都有簡約的、恰到好處的意思，在表意上存在重疊使得它們很難分辨，在評估設(shè)計(jì)方案時，我們很難確定從哪一方面評估我們的工作。
3. 數(shù)量過多的原則很難記住：根據(jù)我們的調(diào)研和設(shè)計(jì)師的反饋，設(shè)計(jì)師們往往記不住這些設(shè)計(jì)原則的內(nèi)容，這也就導(dǎo)致了他們無法很好的在設(shè)計(jì)實(shí)踐中應(yīng)用。
簡而言之，舊的設(shè)計(jì)原則需要更新。
去年，我們工作組的十幾名產(chǎn)品設(shè)計(jì)師和用戶體驗(yàn)設(shè)計(jì)師，在一個協(xié)作研討會上聚在一起討論如何制定新的設(shè)計(jì)原則，我們希望團(tuán)隊(duì)中的每個人都參與進(jìn)來，而不是讓一個人來決定 Spotify 的設(shè)計(jì)原則應(yīng)該是什么。
我們通過以下三個問題，指導(dǎo)我們制定新的設(shè)計(jì)原則：
經(jīng)過一番激烈的辯論，我們得到了答案：
然而真正的挑戰(zhàn)是應(yīng)該怎樣定義新的設(shè)計(jì)原則。我們在設(shè)計(jì)時應(yīng)該追求什么樣的價值觀和設(shè)計(jì)屬性？產(chǎn)品應(yīng)該傳遞給用戶什么感受？
對于這些問題，每一位設(shè)計(jì)師都有自己的觀點(diǎn)。我們讓所有人將自己對 spotify 的設(shè)計(jì)原則進(jìn)行定義，并將這些想法寫在便利貼上。我們將這些想法進(jìn)行總結(jié)分類，為了避免重復(fù)性的概念，我們把相似的概念歸為同一類別，并且讓大家對這些觀點(diǎn)進(jìn)行具體的描述，來幫助大家理解他們想要的設(shè)計(jì)原則。最后，我們將所有的想法都匯集在一個巨大的矩陣圖中，通過設(shè)計(jì)師們的投票來幫助我們縮小范圍，確定大家認(rèn)為合理的設(shè)計(jì)原則。
帶有便利貼的矩陣圖
通過上面的方式，我們提出了新原則的草案。同時我們也通過與用戶溝通，進(jìn)一步了解用戶對于 spotify 設(shè)計(jì)的理解，根據(jù)這些反饋，我們進(jìn)一步在設(shè)計(jì)原則的概念細(xì)節(jié)上進(jìn)行調(diào)整后，確定了新的 Spotify 設(shè)計(jì)原則：相關(guān)性、人性化、統(tǒng)一性。
Spotify 新設(shè)計(jì)原則：相關(guān)性、人性化、統(tǒng)一性
1. 相關(guān)性
把每個用戶作為一個獨(dú)立的個體來看待。
Spotify 是為每一位用戶量身定做的，我們希望 Spotify 具有個性化的感覺。為了給用戶提供專享的感受，在設(shè)計(jì)過程中，我們認(rèn)真思考我們所展示的內(nèi)容是什么、展示給誰以及在什么背景下呈現(xiàn)。簡單來說，我們會在正確的時間提供正確的信息給特定的人，我們不想要 “一刀切” 的體驗(yàn)。
那么我們在具體的實(shí)踐中，是怎樣體現(xiàn) “相關(guān)性” 的設(shè)計(jì)原則呢？
舉個例子，同樣是歌曲 “pure seduction” 的封面，歐美國家的用戶看到的畫面可能是激情熱吻，但對于相對內(nèi)斂的東南亞國家用戶，封面的內(nèi)容就會以更加含蓄柔和的方式呈現(xiàn)。同樣的，印度用戶大多數(shù)更喜歡聽印度語的歌曲，我們在一開始就讓他們選擇自己喜歡的音樂語言，使用戶得到與自己具有 “相關(guān)性” 的音樂內(nèi)容。
我們尊重不同的文化和社會環(huán)境，我們希望每一個視覺呈現(xiàn)都能夠適合當(dāng)?shù)赜脩簦軌虮划?dāng)?shù)赜脩羲斫狻?
Spotify 播放列表封面和注冊頁面的示例
2. 人性化
人性化的設(shè)計(jì)是可以與用戶交流的。
Spotify 是依賴于推薦算法的產(chǎn)品，但這種技術(shù)也是基于人的喜好的。Spotify 像人類一樣，也會有情感，有自己的思考方式。我們希望用戶在使用 Spotify 時，可以有一種 “和人交流的感覺”，如果我們把 Spotify 設(shè)計(jì)得太工具化，就會失去這種感覺了。我們的每周推薦歌單封面，沒有選用精致的照片，而是直接使用用戶的個人頭像，通過這種方式我們告訴用戶 “這是只為你一個人準(zhǔn)備的歌單”，還有什么比自己的個人形象更加 “人性化” 呢？再舉個例子，在 Spotify 的兒童版本中，我們將創(chuàng)建個人資料的行為變成了創(chuàng)建有趣的卡通角色的過程，“人性化” 的虛擬形象使 Spotify 與兒童用戶更流暢的交流。
Discover Weekly 封面和 Spotify Kids 應(yīng)用程序的示例
3. 統(tǒng)一性
統(tǒng)一性可以使線下產(chǎn)品和線上產(chǎn)品實(shí)現(xiàn)品牌感。
我們的線上和線下產(chǎn)品的設(shè)計(jì)風(fēng)格都應(yīng)該具有統(tǒng)一性，即使沒有過多的說明，人們看到一眼也可以知道這是 Spotify 的設(shè)計(jì)。統(tǒng)一的設(shè)計(jì)風(fēng)格，可以讓用戶對于我們的產(chǎn)品有一定的熟悉感和信任感。正因如此，我們沒有完全拋棄 2013 年制定的的設(shè)計(jì)原則，去創(chuàng)造新的方向，而是根據(jù)之前的設(shè)計(jì)原則進(jìn)行修改和優(yōu)化。為了實(shí)現(xiàn)品牌的一致性，我們希望我們所制定的原則是可以在不同設(shè)計(jì)對象和設(shè)計(jì)場景中復(fù)用的。
下圖中是一個營銷活動的案例，無論是線下的廣告牌、宣傳海報，還是線上的活動頁面，我們的設(shè)計(jì)風(fēng)格都保持了統(tǒng)一性，無論你在線下還是線上看到，你都會知道這是 Spotify 的產(chǎn)品。
Spotify 營銷活動的示例
提出設(shè)計(jì)原則是一回事，讓每個人都參與進(jìn)來完全是另一回事。如果我們想讓新設(shè)計(jì)原則持續(xù)運(yùn)行下去，就需要一個執(zhí)行計(jì)劃。
在推行設(shè)計(jì)原則的初期，我們在一個設(shè)計(jì)團(tuán)隊(duì)的工作坊中試運(yùn)行了新的設(shè)計(jì)原則。通過觀察設(shè)計(jì)師在實(shí)際工作過程中，是否由于運(yùn)用了新的設(shè)計(jì)原則更好的完成了設(shè)計(jì)實(shí)踐，幫助我們判斷這些原則是否是真的發(fā)揮作用。之后，我們將這些原則納入現(xiàn)有的設(shè)計(jì)活動中 —— 例如，在全員設(shè)計(jì)會議中，介紹這些原則，并將它們添加到我們的設(shè)計(jì)手冊和新員工的入職流程中。幾個月后，我們與 Spotify 的所有設(shè)計(jì)團(tuán)隊(duì)都開展了一系列工作坊。這樣，每個設(shè)計(jì)師都可以學(xué)習(xí)如何將設(shè)計(jì)原則應(yīng)用在工作實(shí)踐當(dāng)中。
在工作坊中，我們將設(shè)計(jì)項(xiàng)目中應(yīng)用設(shè)計(jì)原則的案例記錄下來，比如，以用戶的名字來命名歌單，建立與用戶的 “相關(guān)性”。我們將這些設(shè)計(jì)師們在真實(shí)的項(xiàng)目中遇到的案例整理到一起，以便其他設(shè)計(jì)師看到具體案例時，更好的理解新的設(shè)計(jì)原則。
展示如何使用設(shè)計(jì)原則的卡片
在推行新的設(shè)計(jì)原則的過程中，我們發(fā)現(xiàn)有兩點(diǎn)值得注意：
1. 恰當(dāng)?shù)陌咐兄谖覀儗π略O(shè)計(jì)原則的理解
口頭上表達(dá) Spotify 的設(shè)計(jì)原則是 “人性化” 或是 “相關(guān)性” 是很容易的，但是什么樣子的設(shè)計(jì)才是 “人性化” 和 “相關(guān)性” 的呢？在推行設(shè)計(jì)原則時，用例子來說明這些原則的含義非常有用，案例越多越有利于我們對這些抽象設(shè)計(jì)原則的理解。
2. 周邊產(chǎn)品可有助于設(shè)計(jì)師理解和記憶新的原則
設(shè)計(jì)原則也可以通過更多的周邊產(chǎn)品，如海報、貼紙或其他產(chǎn)品去推廣。理解新的設(shè)計(jì)原則和理念需要很多時間，周邊產(chǎn)品可以幫助團(tuán)隊(duì)理解和記憶這些原則。為了推行新的設(shè)計(jì)原則，我們已經(jīng)開始設(shè)計(jì)相關(guān)的海報、文具等周邊產(chǎn)品。
設(shè)計(jì)原則的在線下產(chǎn)品應(yīng)用的示例（由 deepyellow 和 dribbble 圖形組成的樣機(jī)模板）
在沒有 “官方” 的周邊產(chǎn)品時，一位設(shè)計(jì)師把設(shè)計(jì)原則作為自己的筆記本電腦桌面背景，這也是一個很好的理解設(shè)計(jì)原則的方法。
帶有壁紙的筆記本電腦，壁紙上寫著設(shè)計(jì)原則：相關(guān)的、人性化的、統(tǒng)一的。
我們推出了這些設(shè)計(jì)原則后，有什么變化呢？
1. 新的設(shè)計(jì)原則更容易被大家記住和應(yīng)用
現(xiàn)在，大多數(shù)設(shè)計(jì)師都意識到了 Spotify 有設(shè)計(jì)原則。根據(jù)我們的設(shè)計(jì)行動小組最近的一項(xiàng)調(diào)查表明，設(shè)計(jì)師們已經(jīng)了解了 “相關(guān)性、人性化和統(tǒng)一性” 的設(shè)計(jì)原則，并且在設(shè)計(jì)過程中，設(shè)計(jì)師們也會考慮這些原則。這表明新的設(shè)計(jì)原則與我們之前的六項(xiàng)原則（內(nèi)容優(yōu)先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實(shí)、恰如其分）相比，更適用且更容易被記住，也更容易在實(shí)踐中應(yīng)用。
2. 為設(shè)計(jì)評審建立了統(tǒng)一的標(biāo)準(zhǔn)
設(shè)計(jì)師有時在設(shè)計(jì)評審時會參考這些原則，但在這方面還有有待改進(jìn)。在評審期間，設(shè)計(jì)師仍然需要有意識的參考設(shè)計(jì)原則。隨著時間的推移，我們希望這成為設(shè)計(jì)師的本能反應(yīng)。
我們開始制定新的設(shè)計(jì)原則時，目的是幫助設(shè)計(jì)師提升設(shè)計(jì)質(zhì)量。那么我們的新設(shè)計(jì)原則是否使設(shè)計(jì)質(zhì)量有所提升呢？現(xiàn)在說還為時過早。但我們希望 “相關(guān)性、人性化和統(tǒng)一性” 可以傳達(dá)出 Spotify 的產(chǎn)品目標(biāo)，這些原則能夠不斷提醒我們做得更好。
設(shè)計(jì)原則不應(yīng)該是一成不變的，設(shè)計(jì)原則需要根據(jù)我們的產(chǎn)品目標(biāo)的不斷發(fā)展進(jìn)行優(yōu)化更新，不斷適應(yīng)新的設(shè)計(jì)環(huán)境和設(shè)計(jì)對象，以持續(xù)保持高質(zhì)量的設(shè)計(jì)輸出。
好的設(shè)計(jì)原則應(yīng)該是更容易被大家記住，并在工作實(shí)踐中應(yīng)用的。好的設(shè)計(jì)原則可以幫助我們在工作中做出正確的設(shè)計(jì)決策，在設(shè)計(jì)評審中建立統(tǒng)一的標(biāo)準(zhǔn)。相比設(shè)計(jì)原則的制定，設(shè)計(jì)原則的推行也同樣重要，合理的推行方式可以使設(shè)計(jì)師真正的理解設(shè)計(jì)原則，并能夠像本能反應(yīng)一樣在設(shè)計(jì)實(shí)踐中應(yīng)用。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：優(yōu)設(shè) 作者：騰訊設(shè)計(jì)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.paul-jarrel.com