2021-11-25 ui設(shè)計(jì)分享達(dá)人
眾所周知，黑帕云這樣的產(chǎn)品幾乎使用了所有類型 B 端的組件。
由于我司設(shè)計(jì)資源有限，所以在擁有了組件庫、設(shè)計(jì)師定好了設(shè)計(jì)規(guī)范之后，作為產(chǎn)品經(jīng)理就直接可以手?jǐn)]設(shè)計(jì)稿了。
這是是前面一文《 B 端產(chǎn)品中，一個(gè) Epic 基本功能設(shè)計(jì)的過程》 提到，作為一個(gè)長大了的產(chǎn)品經(jīng)理，有時(shí)候沒有資源給你做交互沒有資源給你畫 UI 的，你要自己學(xué)會(huì)自給自足。
這個(gè)系列就是作為產(chǎn)品經(jīng)理的我，在這兩年中“自給自足”做設(shè)計(jì)的的一些總結(jié)與發(fā)現(xiàn)。
自給自足的前提是，前面說的組件庫和設(shè)計(jì)規(guī)范，即擁有一個(gè)設(shè)計(jì)體系（Design System）。
關(guān)于設(shè)計(jì)體系的定義和內(nèi)容各家都不同，我找出來了以下案例供參考。
Tilio（一個(gè)寫作和筆記應(yīng)用）聯(lián)合創(chuàng)始人，有十年 UX 設(shè)計(jì)經(jīng)驗(yàn)的阿拉·霍爾馬托娃在《設(shè)計(jì)體系：數(shù)字產(chǎn)品設(shè)計(jì)的系統(tǒng)化方法》一書中這么定義：
設(shè)計(jì)體系是為了實(shí)現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式和共享實(shí)踐。
模式指的是界面中那些重復(fù)的要素：用戶流程、交互方式、按鈕、文本框、圖標(biāo)、配色、排版、文案，等等。
實(shí)踐則是我們?nèi)绾蝿?chuàng)建、捕獲、共享和使用這些模式，尤其是在團(tuán)隊(duì)協(xié)作時(shí)做這些事情的方法。
書中將設(shè)計(jì)體系分成以下幾個(gè)部分：
設(shè)計(jì)目的、設(shè)計(jì)原則、組件庫、樣式指南，以及用于提高設(shè)計(jì)師和開發(fā)人員溝通效率的工作流程和實(shí)用工具。
整理之后，可以參考下圖：
可以發(fā)現(xiàn)，以上設(shè)計(jì)體系無論如何定義概念，都是由設(shè)計(jì)原則+設(shè)計(jì)指南+一些基礎(chǔ)的元素（比如 Design Token、Material Foundation、Icons）+組件庫+其他資源工具構(gòu)成。
形成這些內(nèi)容的目的都是為了給自己產(chǎn)品建立一套保證設(shè)計(jì)質(zhì)量、提升設(shè)計(jì)決策、提升溝通效率的“工具包”，從而讓產(chǎn)品形成自己的符合設(shè)計(jì)原則的風(fēng)格。
所以設(shè)計(jì)體系是什么不重要，重要的是如何在遵循設(shè)計(jì)原則下，能夠高效做出高質(zhì)量的設(shè)計(jì)。
一個(gè)開源設(shè)計(jì)原則和方法的網(wǎng)站 Design Principle 這樣定義設(shè)計(jì)原則：
Design Principles are a set of considerations that form the basis of any good product.
譯為“設(shè)計(jì)原則是構(gòu)成任何好產(chǎn)品的一套基礎(chǔ)考慮因素?！?
比如 Salesforce 的設(shè)計(jì)原則是：清晰、高效、一致、美觀。并且優(yōu)先級(jí)由前到后。
可以理解為 Salesforce 會(huì)追求清晰大于高效、一致、美觀，比如在產(chǎn)品設(shè)計(jì)中，讓用戶清楚的看到、理解、自信地去操作要比任何事情都要重要。
這個(gè)準(zhǔn)則很容易理解，可以推論出 Salesforce 在度量體驗(yàn)時(shí)，將“易用性”放在了第一位，即作為一個(gè) SaaS 產(chǎn)品，不能有任何讓用戶產(chǎn)生疑惑的地方。如果在設(shè)計(jì)上的美觀而要犧牲清晰，這就是不可取的。
有了設(shè)計(jì)原則之后，下一步是需要一個(gè)組件庫。這里說的組件庫囊括了無論是原子化的顏色、字體、陰影、Icon 這些基本的元素，還包括了已經(jīng)封裝好的組件，如 Button、Alert、Toast、Text Input。
關(guān)于為什么要組件化，也不多說了，之前看過一篇閱文體驗(yàn)設(shè)計(jì) YUX 的《組件化思維—— 適應(yīng)并推動(dòng)業(yè)務(wù)及產(chǎn)品變革的設(shè)計(jì)案例》寫的非常清楚。
接下來我通過 Minecraft 這個(gè)游戲來總結(jié)了組件庫。
玩過生存模擬類游戲大家都知道，在游戲中會(huì)有一些可以靠雙手勞動(dòng)得來的基礎(chǔ)材料，比如砍樹砍來的木頭、地上撿的石頭、挖礦挖的燧石。這些基礎(chǔ)材料可以合成一些簡單處理過的材料，比如把木頭合成為木板。然后可以再把半成品進(jìn)一步加工，比如木棍。
在 Minecraft 這個(gè)游戲中，如果玩家要制造一個(gè)弓箭，需要一個(gè)弓和一個(gè)箭。弓和箭的合成又需要一些半成品和成品或者原材料來加工制作，如下圖：
對應(yīng)在設(shè)計(jì)組件庫中可以對照查看，一個(gè)完整的頁面是可以通過一些元素、控件、組件、大組件組成：
在系列開始之前，先聲明一下文章的范圍和適用人群。
關(guān)于 「B 端設(shè)計(jì)總結(jié)」這一系列，主要是我個(gè)人在已有了我們的設(shè)計(jì)規(guī)范和組件庫后，“自給自足”的情況下探索出來的一些組件使用規(guī)則，更偏向產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師來參考。
所以系列中不會(huì)寫設(shè)計(jì)規(guī)范，比如說字號(hào)、顏色、間距等等這些屬于設(shè)計(jì)規(guī)范中內(nèi)容。而是基于已有的規(guī)范，總結(jié)之前我們功能中涉及到的該使用哪些組件，也可以稱之為狹義上的設(shè)計(jì)指南（Design Guidelines）或者設(shè)計(jì)模式（Design Patterns）。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(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://www.bouu.cn