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