2022-7-19 ui設(shè)計(jì)分享達(dá)人
“仰望星空，腳踏實(shí)地” ，做設(shè)計(jì)需要想象空間，也要有反思和總結(jié)的能力。
讓我們來(lái)看兩個(gè)毫無(wú)關(guān)聯(lián)的產(chǎn)品的界面。
BI產(chǎn)品
團(tuán)隊(duì)協(xié)作產(chǎn)品
這兩個(gè)案例展現(xiàn)了如何選用不同的模式以實(shí)現(xiàn)不同的目的。
對(duì)于BI產(chǎn)品來(lái)說(shuō)，目的是讓數(shù)據(jù)分析更徹底，提高數(shù)據(jù)分析效率；更好的整合數(shù)據(jù)，為企業(yè)提供報(bào)表，做為企業(yè)決策的依據(jù)；更好的幫助企業(yè)管理者管理企業(yè)，提高企業(yè)實(shí)力。
對(duì)于teambition來(lái)說(shuō)，目的是輕松記錄要做的事，并與伙伴實(shí)時(shí)同步進(jìn)展。讓彼此清楚地了解項(xiàng)目整體情況及事項(xiàng)優(yōu)先級(jí)，從而完成目標(biāo)。
基于產(chǎn)品目的我們可以看出BI產(chǎn)品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產(chǎn)品的目的決定了它所采用的設(shè)計(jì)模式也會(huì)不同，下面我們?cè)賹?duì)照界面看下基于目的在界面設(shè)計(jì)上有什么不同。
BI產(chǎn)品
團(tuán)隊(duì)協(xié)作產(chǎn)品
BI數(shù)據(jù)分析類產(chǎn)品的布局多是小部件組成，這樣做會(huì)方便用戶進(jìn)行多任務(wù)處理。界面設(shè)計(jì)也會(huì)相對(duì)比較密集，整個(gè)界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。
設(shè)計(jì)模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開(kāi)創(chuàng)性著作《建筑的永恒之道》和《建筑模式語(yǔ)言》中提出的。
《建筑模式語(yǔ)言》里面包含了253個(gè)建筑設(shè)計(jì)模式，大的如城市和道路系統(tǒng)的布局，小的如家庭住宅中的照明和家具。
類似地，我們?cè)趧?chuàng)建界面時(shí)，也在使用設(shè)計(jì)模式（組件）來(lái)解決常見(jiàn)的問(wèn)題：使用標(biāo)簽頁(yè)將內(nèi)容分成幾個(gè)部分，并表明哪一個(gè)選項(xiàng)對(duì)應(yīng)于當(dāng)前的頁(yè)面；使用下拉菜單展示可供用戶選擇相關(guān)選項(xiàng)。
標(biāo)簽頁(yè)
下拉組件
設(shè)計(jì)模式分為2類：
第一類：功能性模式（組件庫(kù)）表現(xiàn)為界面上的具體模塊，如按鈕、標(biāo)題、表單元素、菜單等。
第二類：感知性模式（視覺(jué)規(guī)范）則是描述性的樣式，以可視化方式表達(dá)和呈現(xiàn)產(chǎn)品的個(gè)性，如配色、排版、圖標(biāo)、形狀、動(dòng)畫(huà)等。
功能性模式有點(diǎn)像名詞和動(dòng)詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。
例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項(xiàng)操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態(tài)和過(guò)渡動(dòng)畫(huà)不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。
唐·諾曼在《設(shè)計(jì)心理學(xué)》一書(shū)中說(shuō)過(guò)：系統(tǒng)映像（界面）和用戶模型（用戶通過(guò)與界面交互而形成的感知）之間存在著一道鴻溝。
在設(shè)計(jì)團(tuán)隊(duì)內(nèi)部也是如此，比如“范圍輸入框”組件，你能想象它是一個(gè)什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因?yàn)檫@個(gè)組件不是常用組件，在ant design、arco.design組件庫(kù)中也找不到這個(gè)名稱組件，因?yàn)樗荰Design的產(chǎn)物。
而每個(gè)公司都會(huì)根據(jù)自己的產(chǎn)品特性創(chuàng)造一些非常規(guī)類組件名稱，這個(gè)時(shí)候就需要在所有參與產(chǎn)品創(chuàng)建的人之間共享。只有產(chǎn)品內(nèi)部設(shè)計(jì)語(yǔ)言一致，才能去培養(yǎng)用戶的心智模型，這樣才能去除系統(tǒng)映像與用戶模型之間的這道鴻溝。
例如上面這個(gè)組件，每個(gè)人都需要知道這個(gè)組件叫“范圍輸入框”，而不是“輸入框”或者“數(shù)字輸入框”。
例如，teambition的目的是“輕松記錄要做的事，并與伙伴實(shí)時(shí)同步進(jìn)展”。
于是，我們可以去看產(chǎn)品，設(shè)計(jì)體系在實(shí)現(xiàn)這一目標(biāo)的過(guò)程中發(fā)揮了多大作用，以及這些設(shè)計(jì)實(shí)踐的效果如何。如果視覺(jué)、交互混亂，導(dǎo)致無(wú)法實(shí)現(xiàn)上述目標(biāo)，那么可以認(rèn)為這套設(shè)計(jì)體系是無(wú)效的。
上面介紹了設(shè)計(jì)體系包含的內(nèi)容，下面我們針對(duì)這些內(nèi)容進(jìn)行具體的介紹：
做B端的小伙伴應(yīng)該都知道ant design，但不知道有多少小伙伴有認(rèn)真的看過(guò)ant design的設(shè)計(jì)原則。 可能有小伙伴會(huì)問(wèn)這個(gè)設(shè)計(jì)原則有什么用，我最開(kāi)始也覺(jué)得沒(méi)什么用，后來(lái)在參與設(shè)計(jì)體系優(yōu)化過(guò)程中發(fā)現(xiàn)這個(gè)原則就是金字塔尖。
例如：用戶沒(méi)有填寫(xiě)完表單，那么表單的提交按鈕能不能點(diǎn)？是置灰好，還是按了以后再給彈窗提示。
例如：可編輯表格，是放一個(gè)筆狀icon來(lái)提示可編輯，還是采用鼠標(biāo)觸發(fā)時(shí)出現(xiàn)輸入框以及指針變?yōu)槲谋緺顟B(tài)。
日常工作中總會(huì)在這些細(xì)節(jié)問(wèn)題上爭(zhēng)論很久，美其名曰“打磨設(shè)計(jì)”，其實(shí)很多時(shí)候就是設(shè)計(jì)原則在團(tuán)隊(duì)內(nèi)部沒(méi)有達(dá)成共識(shí)。
為了避免出現(xiàn)上述問(wèn)題，我們要建立一套基本的價(jià)值觀和原則。在一些公司里，尤其是在處于初創(chuàng)期的公司里，嘗試建立一套共同的準(zhǔn)則是很難的。設(shè)計(jì)原則是無(wú)法量化的，因此定義這些原則可能需要多次迭代。
對(duì)于原則到底是什么，可能存在一些爭(zhēng)議。有些公司的設(shè)計(jì)原則偏重于品牌，有的偏重于團(tuán)隊(duì)文化，有的則偏重于設(shè)計(jì)流程。
例如，Pinterest的設(shè)計(jì)原則便偏重于品牌。
Atlassian公司沒(méi)有分團(tuán)隊(duì)或者產(chǎn)品單獨(dú)制定原則。
他們的目標(biāo)是在客戶可觸及的每一點(diǎn)上都體現(xiàn)一些核心的價(jià)值觀。比如“大膽”“樂(lè)觀”“實(shí)用但不乏味”作為價(jià)值觀的體現(xiàn)。
不過(guò)，盡管各處的價(jià)值觀是相同的，但體現(xiàn)程度并不一樣。
例如，官網(wǎng)就會(huì)較多的提現(xiàn)“”大膽”，但產(chǎn)品里面就不會(huì)，正如Atlassian公司的設(shè)計(jì)經(jīng)理Kevin Coffey所說(shuō)的，“沒(méi)有人想要一個(gè)‘大膽的’服務(wù)支持頁(yè)面”。
Atlassian 官網(wǎng)截圖 https://www.atlassian.com/zh
Atlassian 設(shè)計(jì)體系 https://atlassian.design/
我們以TED為例。TED的一條設(shè)計(jì)原則是“追求永恒，而不是追求潮流”。永恒這個(gè)詞不光體現(xiàn)在TED的界面上，還體現(xiàn)在TED的整個(gè)品牌和設(shè)計(jì)方法上。
這意味著他們不會(huì)為了追逐潮流而采用一項(xiàng)新的技術(shù)或引入一個(gè)新的設(shè)計(jì)元素。
例如：定義了原則為“簡(jiǎn)化”（讓產(chǎn)品盡可能簡(jiǎn)單，簡(jiǎn)單到幾乎感覺(jué)不到它的存在）。這種原則就是不實(shí)用也不可操作的。
怎么能讓團(tuán)隊(duì)所有人都能理解？
消除無(wú)用的部分。每一個(gè)設(shè)計(jì)元素，無(wú)論大小，都必須有一個(gè)目的，并遵循它所屬元素的目的。如果你無(wú)法解釋一個(gè)元素為什么要在那里，那么它便很可能不應(yīng)該在那里。這樣的定義就清晰很多。
再例如：定義了設(shè)計(jì)原則為“有用”，什么是“有用”？
從需求開(kāi)始。如果你不知道用戶需要什么， 就無(wú)法做出正確的事情。去做調(diào)研，去分析數(shù)據(jù)，去與用戶交流，而不是做假設(shè)。
好的設(shè)計(jì)原則也能幫我們確定優(yōu)先級(jí)和平衡點(diǎn)。
Salesforce公司的Lightning設(shè)計(jì)體系的原則是“清晰、高效、一致、美觀”。
這些原則的優(yōu)先級(jí)必須遵從以上順序。“美觀”不應(yīng)該高于“高效”和“一致”，而“清晰”應(yīng)該始終放在第一位。按照這種方式對(duì)原則進(jìn)行排序，可以讓團(tuán)隊(duì)在做設(shè)計(jì)決策時(shí)明確哪些東西應(yīng)該優(yōu)先考慮。
Atlassian和Airbnb的團(tuán)隊(duì)成員被問(wèn)及他們的設(shè)計(jì)原則時(shí)，他們都能脫口而出，沒(méi)有片刻猶豫，沒(méi)有人表現(xiàn)出遲疑，沒(méi)有人想要去翻看品牌手冊(cè)里的原則內(nèi)容。他們?yōu)槭裁茨馨言瓌t記得這么牢固呢？因?yàn)樗麄兊脑瓌t足夠簡(jiǎn)單、實(shí)用、易于讓人產(chǎn)生共鳴。
Airbnb公司的四條設(shè)計(jì)原則（“統(tǒng)一”“通用”“風(fēng)格化的”“對(duì)話式的”）便深深地扎根于其設(shè)計(jì)過(guò)程之中。
每當(dāng)設(shè)計(jì)一個(gè)新的組件時(shí)，我們都會(huì)確保它完全滿足四條原則。如果我們沒(méi)有這一套原則，便很難就各種問(wèn)題達(dá)成一致意見(jiàn)。----Airbnb 首席交互設(shè)計(jì)師
每個(gè)團(tuán)隊(duì)建立其設(shè)計(jì)原則的方法都不盡相同：有的會(huì)召開(kāi)幾輪研討會(huì)，有的可能會(huì)征求CEO或創(chuàng)意總監(jiān)的意見(jiàn)。不過(guò)，無(wú)論采取哪種方式，都離不開(kāi)下面幾點(diǎn)：
從目的開(kāi)始
TED網(wǎng)站的主要目的可以用一句話來(lái)表述：“盡可能廣泛地傳播演講?！币虼耍琓ED網(wǎng)站的精神和價(jià)值觀便是觸及盡可能多的人群，降低使用門(mén)檻，讓產(chǎn)品具有很高的兼容性和可訪問(wèn)性。這意味著優(yōu)化性能和提升可訪問(wèn)性比添加華而不實(shí)的功能更重要，清晰的文案比大膽的設(shè)計(jì)更重要。
尋找共識(shí)
如果你仍處在定義設(shè)計(jì)原則的階段，那么一個(gè)有效的方法便是讓團(tuán)隊(duì)的一些人或所有人（取決于團(tuán)隊(duì)規(guī)模）各自回答關(guān)于設(shè)計(jì)原則的問(wèn)題。例如，在他們眼里，什么樣的設(shè)計(jì)對(duì)你們產(chǎn)品來(lái)說(shuō)是好的設(shè)計(jì)？他們將如何用既實(shí)用又易于理解的五句話向團(tuán)隊(duì)的新成員解釋設(shè)計(jì)原則？
面向正確的受眾
如果搞不清楚設(shè)計(jì)原則是為誰(shuí)寫(xiě)的，就一定會(huì)寫(xiě)出含糊不清的原則。有的小伙伴說(shuō)我們領(lǐng)導(dǎo)就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰(shuí)而寫(xiě)。原則到模式
作為一個(gè)設(shè)計(jì)師，定義設(shè)計(jì)原則可能對(duì)你來(lái)說(shuō)也許并不難， 但怎么把原則、品牌價(jià)值、組件相結(jié)合，怎么體現(xiàn)在設(shè)計(jì)模型中，這個(gè)我覺(jué)得是個(gè)挑戰(zhàn)。
對(duì)于 TED 來(lái)說(shuō)，信息的清晰比美觀更重要。試圖將每個(gè)演講都 提煉成一個(gè)短句可能很難，所以有時(shí)候標(biāo)題可能很長(zhǎng)。對(duì)標(biāo)題 進(jìn)行截?cái)嗍呛苋菀椎?，但?duì)他們來(lái)說(shuō)，演講信息的優(yōu)先級(jí)是最 高的。
因此，他們沒(méi)有選擇相對(duì)容易的標(biāo)題截?cái)喾桨?，而是確保他們的設(shè)計(jì)模式可以容納長(zhǎng)的標(biāo)題。
功能性模式是界面中有形的構(gòu)件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫(xiě)表單），或者激勵(lì)用戶完成某種行為。
功能性模式可以很簡(jiǎn)單（標(biāo)簽?字、輸?框、按鈕 ），也可以組合成更復(fù)雜的模式（搜索組件）。
標(biāo)簽?字、輸?框、和按鈕
搜索組件由標(biāo)簽?字、輸?框和按鈕組成
隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。包括風(fēng)格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。
我們用頂部導(dǎo)航舉例：
頂部導(dǎo)航是由logo、搜索定位框、文字下拉框、圖標(biāo)功能按鈕、通知按鈕構(gòu)成。導(dǎo)航條里的每一個(gè)模塊都有自身的目的：搜索定位框告訴我們?cè)趺纯焖僬业较胍臇|西，導(dǎo)航帶領(lǐng)我們?yōu)g覽全局，指引我們到想去的地方，而后面的的圖標(biāo)按鈕讓我快速觸達(dá)。
總的來(lái)看，這些模塊都有一個(gè)共同的目的：引導(dǎo)用戶快速瀏覽使用。隨著產(chǎn)品的發(fā)展，模式也在不斷發(fā)展。
例如，隨著產(chǎn)品功能越來(lái)越多，可能會(huì)在導(dǎo)航上面新增設(shè)置功能，讓用戶自己去排布常用功能。又如，我們可能會(huì)對(duì)導(dǎo)航進(jìn)行重新布局，把導(dǎo)航按模塊分類，采用標(biāo)簽按頁(yè)展示。把模塊下面更多功能放到子頁(yè)面左側(cè)。雖然我們不斷的對(duì)模式進(jìn)行迭代，希望它更好的實(shí)現(xiàn)各自的目的或者說(shuō)更有效地激勵(lì)用戶使用。
在設(shè)計(jì)開(kāi)始階段就闡明模式的目的，能避免在產(chǎn)品發(fā)展過(guò)程中做重復(fù)性的工作。
目的決定了其他的一切：模式的結(jié)構(gòu)、內(nèi)容及呈現(xiàn)。了解模式的目的，可以幫助我們?cè)O(shè)計(jì)和構(gòu)建更加穩(wěn)健的模塊。
如果說(shuō)功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。
設(shè)想我們每個(gè)人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個(gè)衣柜。
不過(guò)，雖然都有這些家具，但每套房子給人的感覺(jué)截然不同：可能是因?yàn)榧揖叩臉邮?、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂(lè)不 同。
上述這些屬性便稱作感知性模式。正是因?yàn)樗鼈?，可能你的房子就像是一個(gè)地中海風(fēng)格的小窩，而我的房子就像是一個(gè)倉(cāng)庫(kù)。
而數(shù)字產(chǎn)品感知性模式的例子包括語(yǔ)氣、排版、配色、布局、插圖與圖標(biāo)樣式、形狀與紋理、間距、意象、交互或動(dòng)畫(huà)，以及這些要素在界面中的組合和使用的具體方式。
有時(shí)，人們將這樣的特性視為產(chǎn)品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產(chǎn)品的發(fā)展而發(fā)展。
只有這樣，感知性模式才會(huì)成為讓產(chǎn)品脫穎而出的強(qiáng)大力量。
同一領(lǐng)域的產(chǎn)品，哪怕具有相似的模塊，它們給人的感覺(jué)也是不一樣的。感知性模式通過(guò)界面?zhèn)鬟f品牌，并讓品牌被人記住。
看下面的圖片，你能認(rèn)出它們是什么產(chǎn)品嗎？
這兩張圖里面并沒(méi)有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標(biāo)。然而那些視覺(jué)上的線索極具辨識(shí)度，所以你仍然很有可能看出它們分別屬于什么產(chǎn)品（即釘釘和飛書(shū)）。
這些視覺(jué)元素通過(guò)有意識(shí)地反復(fù)使用，便形成了模式，這就是為什么我們可以在沒(méi)有上下文的情況下認(rèn)出它們。
在模塊化的系統(tǒng)中，想要做到視覺(jué)上的連貫統(tǒng)一可能是一件很棘手的事情。模塊是由不同的人根據(jù)不同的目的創(chuàng)建的。而由于感知性模式是滲透到系統(tǒng)中各個(gè)部分的，因此它們可以將系統(tǒng)的不同部分連接起來(lái)。如果這種連接是有效的，那么用戶就會(huì)感受到模塊之間的統(tǒng)一性。
例如：飛書(shū)和騰訊的相同功能的組件感知模式是不一樣的，所以兩個(gè)公司設(shè)計(jì)體系不能混用。
如果說(shuō)功能性模塊反映的是用戶需要且想要的內(nèi)容，那么感知性模式關(guān)注的則是他們直觀的感受或行為。
在《網(wǎng)站情感化設(shè)計(jì)》一書(shū)中，作者提出了一 個(gè)簡(jiǎn)單的方法，通過(guò)創(chuàng)建“設(shè)計(jì)角色”捕捉產(chǎn)品關(guān)鍵的個(gè)性 品質(zhì)。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺(jué)主題的絕佳工具?？梢允褂脭?shù)字化的方式創(chuàng)建情緒版（Pinterest或花瓣都是一種用于創(chuàng)建數(shù)字化情緒板的常用工具）。
如果你目前做的產(chǎn)品是需要體現(xiàn)：科技、質(zhì)感、智能，那上圖應(yīng)該可以滿足這些條件，你可以通過(guò)這張圖與領(lǐng)導(dǎo)進(jìn)行溝通達(dá)成一致，然后從中提煉出一些顏色、元素、材質(zhì)，這樣大方向就不會(huì)有太大問(wèn)題，只需在細(xì)節(jié)上進(jìn)行打磨。
定義好了大致的方向之后，便可以使用樣式疊片來(lái)更加細(xì)致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺(jué)品牌精髓的設(shè)計(jì)交付物?！?
和情緒板一樣，樣式疊片可以為用戶和產(chǎn)品團(tuán)隊(duì)提供有價(jià)值的討論點(diǎn)，并呈現(xiàn)他們對(duì)特定設(shè)計(jì)方向的初始反應(yīng)。
arco.design 首頁(yè)這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準(zhǔn)確地找到設(shè)計(jì)方向。
當(dāng)功能模式和感知模式建立完成后，我們將它們集成到產(chǎn)品的過(guò)程，它們還將進(jìn)行演變。
因?yàn)樵谡鎸?shí)的界面中，模塊、交互、樣式之間相互影響下會(huì)產(chǎn)生新的問(wèn)題，這都是很正常的，是典型的迭代過(guò)程，這個(gè)過(guò)程會(huì)一直持續(xù)，直到設(shè)計(jì)語(yǔ)言最終形成。
像ant design、arco.design應(yīng)該都經(jīng)歷過(guò)這個(gè)過(guò)程，只是我們不知道而已，要不然也不需要花費(fèi)幾年的時(shí)間打磨后才發(fā)布出來(lái)。
平衡品牌性與一致性：
過(guò)分關(guān)注一致性也會(huì)扼殺品牌性。矛盾在于，讓設(shè)計(jì)達(dá)到完美的一致性無(wú)法確保它依然具有很強(qiáng)的品牌性。有時(shí)，這樣做反而會(huì)削弱品牌性——在一致性和統(tǒng)一性之間存在著細(xì)微的差別。
《英國(guó)公開(kāi)大學(xué)》的創(chuàng)意總監(jiān)曾說(shuō)過(guò)：“當(dāng)你專注于產(chǎn)品一致性的時(shí)候，打造產(chǎn)品質(zhì)感的一些重要的細(xì)微之處就有可能會(huì)丟失。
發(fā)展感知性模式需要為設(shè)計(jì)師賦予打破常規(guī)的權(quán)力，鼓勵(lì)設(shè)計(jì)師積極地探索更多的可能性。好的設(shè)計(jì)體系能在品牌的一致性和創(chuàng)造性表達(dá)之間取得平衡。
小規(guī)模試驗(yàn)：
后期如果發(fā)現(xiàn)樣式無(wú)法滿足，我們?nèi)绾螌⑿碌臉邮揭朐O(shè)計(jì)體系呢？
可以先進(jìn)行一些小規(guī)模的試驗(yàn)是一種相當(dāng)有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。
例如，在學(xué)習(xí)者完成一個(gè)步驟時(shí)，純功能性的切換按鈕缺乏慶祝和成就的感覺(jué)。于是，我們用帶有圓形樣式、彈跳 動(dòng)畫(huà)以及勾號(hào)圖標(biāo)的按鈕取代了先前的按鈕。
雖然新的按鈕樣式受到了學(xué)習(xí)者們的好評(píng)，但它與設(shè)計(jì)體系的其他元素格格不入。后來(lái)，我們開(kāi)始在網(wǎng)站的其他地方應(yīng)用圓形圖案、彈跳動(dòng)畫(huà)和勾號(hào)圖標(biāo)。如果不這樣做，那么整個(gè)設(shè)計(jì) 體系給人的感覺(jué)就是割裂的。
數(shù)字產(chǎn)品都是由團(tuán)隊(duì)打造的。團(tuán)隊(duì)里的每個(gè)人都有各自的具體目標(biāo)，都有各自的截止日期。這就意味著難免會(huì)出現(xiàn)草率加入的模式、重復(fù)或錯(cuò)誤的模塊。
我們能確保一個(gè)產(chǎn)品即便有多人協(xié)作，卻仍能連貫、統(tǒng)一嗎？ 只要我們團(tuán)隊(duì)對(duì)自己的設(shè)計(jì)體系及其運(yùn)轉(zhuǎn)方式有共同的理解，我們就能做到這一點(diǎn)。
這意味著我們遵循相同的指導(dǎo)原則，我們對(duì)品牌愿景的理解是一致的，我們?cè)谠O(shè)計(jì)和前端架構(gòu)方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說(shuō)，創(chuàng)建統(tǒng)一的設(shè)計(jì)體系需要共享設(shè)計(jì)語(yǔ)言。
許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費(fèi)力地創(chuàng)造出來(lái)的，而是由一群人構(gòu)建出來(lái)的，這群人對(duì)能將這些建筑物變?yōu)楝F(xiàn)實(shí)的設(shè)計(jì)模式有著深刻的共識(shí)。
“幾組人可以通過(guò)遵循一個(gè)共同的模式語(yǔ)言，當(dāng)場(chǎng)構(gòu)思出他 們的大型公共建筑，就好像他們共有一個(gè)心靈?！?
——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》
我們可以用類似的想法構(gòu)建數(shù)字產(chǎn)品。設(shè)計(jì)語(yǔ)言可以讓人們創(chuàng)建出具有整體感的產(chǎn)品，哪怕不同的人負(fù)責(zé)不同的部分也是如此。
如果一個(gè)界面上的元素沒(méi)有恰當(dāng)?shù)拿Q、團(tuán)隊(duì)里人盡皆知的名。那么該元素就沒(méi)有在你的設(shè)計(jì)體系中成為有效的單元。一旦你給一個(gè)物件命了名，你就塑造了它的未來(lái)。
例如，如果你給的是一個(gè)表現(xiàn)型的名稱，那么它將來(lái)就會(huì)受到樣式的限制：“藍(lán)色按鈕”只能是藍(lán)色。
例如，如果你給的是一個(gè)狀態(tài)屬性的名稱：“幽靈按鈕”，它的特點(diǎn)是：按鈕形狀的透明按鈕，但有細(xì)實(shí)線的邊框，常用在有色背景上。
僅僅完成命名還不足以建立共享的設(shè)計(jì)語(yǔ)言。整個(gè)團(tuán)隊(duì)都應(yīng)該 沉浸到設(shè)計(jì)語(yǔ)言中去，讓它無(wú)所不在。
讓設(shè)計(jì)模式變得可見(jiàn)：
如果有條件，可以在墻上開(kāi)辟一塊專門(mén)展示設(shè)計(jì)體系的空間，將它稱作“模 式墻”
讓你的設(shè)計(jì)體系更加開(kāi)放，人們會(huì)感覺(jué)你歡迎他們的加入，歡迎他們提出問(wèn)題甚至做出貢獻(xiàn)。
引用事物的名稱：
所有語(yǔ)言的共同特點(diǎn)是，只有不停地使用才能讓它保持活力。
它需要成為日常對(duì)話的一部分：
這就是為什么需要有意識(shí)地使用約定好的名稱去引用這些模式很重要——無(wú)論這個(gè)名稱聽(tīng)起來(lái)有多奇怪。將設(shè)計(jì)體系作為入職培訓(xùn)的一部分將設(shè)計(jì)體系的內(nèi)容作為入職培訓(xùn)的一部分，新員工了解設(shè)計(jì)體系就會(huì)更加容易。當(dāng)新員工入職時(shí)，他們將了解到設(shè)計(jì)指南是如何創(chuàng)建出來(lái)的，這樣他們就可以理解為什么以及如何做出決策。在 《英國(guó)公開(kāi)大學(xué)》 內(nèi)部，他們創(chuàng)建了一個(gè)入門(mén)性質(zhì)的線上課程，其中有一章專門(mén)對(duì)模式庫(kù)進(jìn)行了介紹，并包含了 一些小測(cè)驗(yàn)和小課程，這樣可以幫助新員工更好的理解設(shè)計(jì)體系。
定期組織設(shè)計(jì)體系會(huì)議：
每個(gè)人都討厭開(kāi)會(huì)。但是，如果你希望每個(gè)人都跟得上設(shè)計(jì)體系的發(fā)展，那么組織召開(kāi)設(shè)計(jì)體系的會(huì)議就是必要的。這是所有設(shè)計(jì)師和開(kāi)發(fā)人員共同專注于設(shè)計(jì)體系的時(shí)間。一開(kāi)始，可 以每周舉行一次，當(dāng)團(tuán)隊(duì)找到節(jié)奏之后，可以每?jī)芍芘e行一 次。團(tuán)隊(duì)可以利用例會(huì)時(shí)間就產(chǎn)品的總體模式（如圖標(biāo)、排版）得出一致意見(jiàn)。同時(shí)，這也是分享新模塊并討論其目的、 用途及可能遇到的問(wèn)題的好機(jī)會(huì)。
設(shè)計(jì)體系不是一夜之間構(gòu)建出來(lái)的，而是通過(guò)日常的實(shí)踐逐漸形成的。
藍(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)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
作者：夜鷹YEAH 來(lái)源：站酷
免責(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ì)的小編 http://www.wnxcall.com