国产91在线无码_少妇人妻无码高清_91人妻中文字幕无码专区在线_国产福利在线播放_免费 无码 国产成年视频网站

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

編輯導(dǎo)語:產(chǎn)品設(shè)計應(yīng)符合產(chǎn)品通用化、系列化、模塊化的標(biāo)準(zhǔn)化發(fā)展要求。堅持創(chuàng)新和繼承相結(jié)合的原則,在創(chuàng)新的基礎(chǔ)上,提高產(chǎn)品設(shè)計的繼承性,提高產(chǎn)品零件、部件的通用化程度。本篇文章作者為大家講解如何構(gòu)建有效的設(shè)計標(biāo)準(zhǔn)化體系。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

去年參與了公司設(shè)計體系(設(shè)計原則、視覺規(guī)范、組件庫、全局規(guī)則)的整體優(yōu)化,通過這次優(yōu)化也領(lǐng)悟到了一些之前一直疑惑的點。盡管經(jīng)歷了大半年的打磨,但到現(xiàn)在還是有很多問題,不過這沒關(guān)系,任何一個公司的設(shè)計體系都需要不斷地進(jìn)行迭代與改進(jìn),只要團隊善于發(fā)現(xiàn)、分析、解決問題就行。

“仰望星空,腳踏實地” ,做設(shè)計需要想象空間,也要有反思和總結(jié)的能力。

設(shè)計體系打造:

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

一、什么是設(shè)計體系

設(shè)計體系是為了實現(xiàn)數(shù)字產(chǎn)品的目的而組織起來的一套相互關(guān)聯(lián)的模式和共享實踐。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

讓我們來看兩個毫無關(guān)聯(lián)的產(chǎn)品的界面。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

1)BI 產(chǎn)品

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

2)團隊協(xié)作產(chǎn)品

這兩個案例展現(xiàn)了如何選用不同的模式以實現(xiàn)不同的目的。

對于 BI 產(chǎn)品來說,目的是讓數(shù)據(jù)分析更徹底,提高數(shù)據(jù)分析效率;更好的整合數(shù)據(jù),為企業(yè)提供報表,做為企業(yè)決策的依據(jù);更好的幫助企業(yè)管理者管理企業(yè),提高企業(yè)實力。

對于 teambition 來說,目的是輕松記錄要做的事,并與伙伴實時同步進(jìn)展。讓彼此清楚地了解項目整體情況及事項優(yōu)先級,從而完成目標(biāo)。

基于產(chǎn)品目的我們可以看出 BI 產(chǎn)品重效率;teambition 更看重清晰以及使用是否輕松愉悅。而產(chǎn)品的目的決定了它所采用的設(shè)計模式也會不同,下面我們再對照界面看下基于目的在界面設(shè)計上有什么不同。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

3)BI 產(chǎn)品

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

4)團隊協(xié)作產(chǎn)品

BI 數(shù)據(jù)分析類產(chǎn)品的布局多是小部件組成,這樣做會方便用戶進(jìn)行多任務(wù)處理。界面設(shè)計也會相對比較密集,整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。

1. 設(shè)計模式

設(shè)計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大(Christopher Alexander)在他的開創(chuàng)性著作《建筑的永恒之道》和《建筑模式語言》中提出的。

《建筑模式語言》里面包含了 253 個建筑設(shè)計模式,大的如城市和道路系統(tǒng)的布局,小的如家庭住宅中的照明和家具。

類似地,我們在創(chuàng)建界面時,也在使用設(shè)計模式(組件)來解決常見的問題:使用標(biāo)簽頁將內(nèi)容分成幾個部分,并表明哪一個選項對應(yīng)于當(dāng)前的頁面;使用下拉菜單展示可供用戶選擇相關(guān)選項。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

1)標(biāo)簽頁

2)下拉組件

設(shè)計模式分為 2 類:

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

  1. 第一類:功能性模式(組件庫)表現(xiàn)為界面上的具體模塊,如按鈕、標(biāo)題、表單元素、菜單等。
  2. 第二類:感知性模式(視覺規(guī)范)則是描述性的樣式,以可視化方式表達(dá)和呈現(xiàn)產(chǎn)品的個性,如配色、排版、圖標(biāo)、形狀、動畫等。

功能性模式有點像名詞和動詞,它們是界面中那些具體的、可操作的部分;而感知性模式則類似于形容詞,它們是描述性的。

例如,按鈕是具有明確功能的模塊,它讓用戶能夠提交某項操作。但按鈕上的文字的樣式,以及按鈕本身的形狀、背景色、填充、交互狀態(tài)和過渡動畫不是模塊,而是樣式,這些樣式描述了按鈕是什么樣的。

2. 共享語言

唐·諾曼在《設(shè)計心理學(xué)》一書中說過:系統(tǒng)映像(界面)和用戶模型(用戶通過與界面交互而形成的感知)之間存在著一道鴻溝。

在設(shè)計團隊內(nèi)部也是如此,比如“范圍輸入框”組件,你能想象它是一個什么樣的組件嗎?相信不同的人肯定有不同的心智模型,因為這個組件不是常用組件,在 ant design、arco.design 組件庫中也找不到這個名稱組件,因為它是 TDesign 的產(chǎn)物。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

而每個公司都會根據(jù)自己的產(chǎn)品特性創(chuàng)造一些非常規(guī)類組件名稱,這個時候就需要在所有參與產(chǎn)品創(chuàng)建的人之間共享。只有產(chǎn)品內(nèi)部設(shè)計語言一致,才能去培養(yǎng)用戶的心智模型,這樣才能去除系統(tǒng)映像與用戶模型之間的這道鴻溝。

例如上面這個組件,每個人都需要知道這個組件叫“范圍輸入框”,而不是“輸入框”或者“數(shù)字輸入框”。

3. 如何衡量設(shè)計體系的有效性

例如,teambition 的目的是“輕松記錄要做的事,并與伙伴實時同步進(jìn)展”。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

于是,我們可以去看產(chǎn)品,設(shè)計體系在實現(xiàn)這一目標(biāo)的過程中發(fā)揮了多大作用,以及這些設(shè)計實踐的效果如何。如果視覺、交互混亂,導(dǎo)致無法實現(xiàn)上述目標(biāo),那么可以認(rèn)為這套設(shè)計體系是無效的。

上面介紹了設(shè)計體系包含的內(nèi)容,下面我們針對這些內(nèi)容進(jìn)行具體的介紹:

二、設(shè)計原則

1. 有效設(shè)計原則特征

做 B 端的小伙伴應(yīng)該都知道 ant design,但不知道有多少小伙伴有認(rèn)真的看過 ant design 的設(shè)計原則。 可能有小伙伴會問這個設(shè)計原則有什么用,我最開始也覺得沒什么用,后來在參與設(shè)計體系優(yōu)化過程中發(fā)現(xiàn)這個原則就是金字塔尖。

Ant Design:

例如:用戶沒有填寫完表單,那么表單的提交按鈕能不能點?是置灰好,還是按了以后再給彈窗提示。

例如:可編輯表格,是放一個筆狀 icon 來提示可編輯,還是采用鼠標(biāo)觸發(fā)時出現(xiàn)輸入框以及指針變?yōu)槲谋緺顟B(tài)。

日常工作中總會在這些細(xì)節(jié)問題上爭論很久,美其名曰“打磨設(shè)計”,其實很多時候就是設(shè)計原則在團隊內(nèi)部沒有達(dá)成共識。為了避免出現(xiàn)上述問題,我們要建立一套基本的價值觀和原則。在一些公司里,尤其是在處于初創(chuàng)期的公司里,嘗試建立一套共同的準(zhǔn)則是很難的。設(shè)計原則是無法量化的,因此定義這些原則可能需要多次迭代。

對于原則到底是什么,可能存在一些爭議。有些公司的設(shè)計原則偏重于品牌,有的偏重于團隊文化,有的則偏重于設(shè)計流程。

例如,Pinterest 的設(shè)計原則便偏重于品牌。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

Atlassian 公司沒有分團隊或者產(chǎn)品單獨制定原則。

他們的目標(biāo)是在客戶可觸及的每一點上都體現(xiàn)一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現(xiàn)。不過,盡管各處的價值觀是相同的,但體現(xiàn)程度并不一樣。

例如,官網(wǎng)就會較多的體現(xiàn)“大膽”,但產(chǎn)品里面就不會,正如 Atlassian 公司的設(shè)計經(jīng)理 Kevin Coffey 所說的“沒有人想要一個‘大膽的’服務(wù)支持頁面”。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

Atlassian 官網(wǎng)截圖

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

Atlassian 設(shè)計體系

1)設(shè)計原則是真實而貼切的

我們以 TED 為例。TED 的一條設(shè)計原則是“追求永恒,而不是追求潮流”。永恒這個詞不光體現(xiàn)在 TED 的界面上,還體現(xiàn)在 TED 的整個品牌和設(shè)計方法上。

這意味著他們不會為了追逐潮流而采用一項新的技術(shù)或引入一個新的設(shè)計元素。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

2)設(shè)計原則是實用的、可操作的

例如:定義了原則為“簡化”(讓產(chǎn)品盡可能簡單,簡單到幾乎感覺不到它的存在),這種原則就是不實用也不可操作的。

怎么能讓團隊所有人都能理解?

消除無用的部分。每一個設(shè)計元素?zé)o論大小,都必須有一個目的,并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里,那么它便很可能不應(yīng)該在那,這樣的定義就清晰很多。

再例如:定義了設(shè)計原則為“有用”,什么是“有用”?

從需求開始。如果你不知道用戶需要什么, 就無法做出正確的事情。去做調(diào)研、去分析數(shù)據(jù)、去與用戶交流而不是做假設(shè)。

3)設(shè)計原則能幫我們確定優(yōu)先級

好的設(shè)計原則也能幫我們確定優(yōu)先級和平衡點。

Salesforce 公司的 Lightning 設(shè)計體系的原則是“清晰、高效、一致、美觀”。

這些原則的優(yōu)先級必須遵從以上順序。“美觀”不應(yīng)該高于“高效”和“一致”,而“清晰”應(yīng)該始終放在第一位。按照這種方式對原則進(jìn)行排序,可以讓團隊在做設(shè)計決策時明確哪些東西應(yīng)該優(yōu)先考慮。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

4)設(shè)計原則是能產(chǎn)生共鳴、容易讓人記住

Atlassian 和 Airbnb 的團隊成員被問及他們的設(shè)計原則時,他們都能脫口而出,沒有片刻猶豫,沒有人表現(xiàn)出遲疑,沒有人想要去翻看品牌手冊里的原則內(nèi)容。他們?yōu)槭裁茨馨言瓌t記得這么牢固呢?因為他們的原則足夠簡單、實用、易于讓人產(chǎn)生共鳴。

Airbnb 公司的四條設(shè)計原則(“統(tǒng)一”、“通用”、“風(fēng)格化的”、“對話式的”)便深深地扎根于其設(shè)計過程之中。

每當(dāng)設(shè)計一個新的組件時,我們都會確保它完全滿足四條原則。如果我們沒有這一套原則,便很難就各種問題達(dá)成一致意見?!?Airbnb 首席交互設(shè)計師

2. 怎么定義設(shè)計原則

每個團隊建立其設(shè)計原則的方法都不盡相同:有的會召開幾輪研討會,有的可能會征求 CEO 或創(chuàng)意總監(jiān)的意見。不過,無論采取哪種方式,都離不開下面幾點:

1)從目的開始

TED 網(wǎng)站的主要目的可以用一句話來表述:“盡可能廣泛地傳播演講?!币虼耍琓ED 網(wǎng)站的精神和價值觀便是觸及盡可能多的人群,降低使用門檻,讓產(chǎn)品具有很高的兼容性和可訪問性。這意味著優(yōu)化性能和提升可訪問性比添加華而不實的功能更重要,清晰的文案比大膽的設(shè)計更重要。

2)尋找共識

如果你仍處在定義設(shè)計原則的階段,那么一個有效的方法便是讓團隊的一些人或所有人(取決于團隊規(guī)模)各自回答關(guān)于設(shè)計原則的問題。例如,在他們眼里,什么樣的設(shè)計對你們產(chǎn)品來說是好的設(shè)計?他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設(shè)計原則?

3)面向正確的受眾

如果搞不清楚設(shè)計原則是為誰寫的,就一定會寫出含糊不清的原則。有的小伙伴說我們領(lǐng)導(dǎo)就喜歡“美觀”,那我們是不是把“美觀”放在第一位?一定要搞清楚為誰而寫。

3. 原則到模式

作為一個設(shè)計師,定義設(shè)計原則可能對你來說也許并不難, 但怎么把原則、品牌價值、組件相結(jié)合,怎么體現(xiàn)在設(shè)計模型中,這個我覺得是個挑戰(zhàn)。

對于 TED 來說,信息的清晰比美觀更重要。試圖將每個演講都提煉成一個短句可能很難,所以有時候標(biāo)題可能很長。對標(biāo)題進(jìn)行截斷是很容易的,但對他們來說,演講信息的優(yōu)先級是最高的。

因此,他們沒有選擇相對容易的標(biāo)題截斷方案,而是確保他們的設(shè)計模式可以容納長的標(biāo)題。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

三、功能性模式(組件)

功能性模式是界面中有形的構(gòu)件(表單)。它們的目的是讓用戶能夠完成某種行為(填寫表單),或者激勵用戶完成某種行為。

功能性模式可以很簡單(標(biāo)簽?字、輸?框、按鈕 ),也可以組合成更復(fù)雜的模式(搜索組件)。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

標(biāo)簽?字、輸?框、和按鈕

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

搜索組件由標(biāo)簽?字、輸?框和按鈕組成

1. 模式在變,行為不變

隨著產(chǎn)品的發(fā)展,模式也在不斷發(fā)展。包括風(fēng)格,甚至功能和交互方式,都有變化。然而,它們的目的基本保持不變。

我們用頂部導(dǎo)航舉例:

頂部導(dǎo)航是由 logo、搜索定位框、文字下拉框、圖標(biāo)功能按鈕、通知按鈕構(gòu)成。導(dǎo)航條里的每一個模塊都有自身的目的:搜索定位框告訴我們怎么快速找到想要的東西;導(dǎo)航帶領(lǐng)我們?yōu)g覽全局,指引我們到想去的地方;后面的的圖標(biāo)按鈕讓我們快速觸達(dá)。

總的來看,這些模塊都有一個共同的目的:引導(dǎo)用戶快速瀏覽使用。隨著產(chǎn)品的發(fā)展,模式也在不斷發(fā)展。

例如,隨著產(chǎn)品功能越來越多,可能會在導(dǎo)航上面新增設(shè)置功能,讓用戶自己去排布常用功能。又如,我們可能會對導(dǎo)航進(jìn)行重新布局,把導(dǎo)航按模塊分類,采用標(biāo)簽按頁展示。把模塊下面更多功能放到子頁面左側(cè)。雖然我們不斷的對模式進(jìn)行迭代,希望它更好的實現(xiàn)各自的目的或者說更有效地激勵用戶使用。

在設(shè)計開始階段就闡明模式的目的,能避免在產(chǎn)品發(fā)展過程中做重復(fù)性的工作。

目的決定了其他的一切:模式的結(jié)構(gòu)、內(nèi)容及呈現(xiàn)。了解模式的目的,可以幫助我們設(shè)計和構(gòu)建更加穩(wěn)健的模塊。如果說功能性模式是界面中的組件,那么感知性模式則更像是樣式——描述組件是什么類型的,給人的感受是什么樣的。下面,我們將探討感知性模式。

四、感知性模式(視覺規(guī)范)

設(shè)想我們每個人各有一套房子,且每套房子都有以下這些家具:一張桌子、幾把椅子、一張床和一個衣柜。不過,雖然都有這些家具,但每套房子給人的感覺截然不同:可能是因為家具的樣式、材料、顏色、紋理不同,或者是床罩的布料、裝飾品的樣式、房間的布局和燈光,甚至是房間里播放的音樂不同。

上述這些屬性便稱作感知性模式,正是因為它們,可能你的房子就像是一個地中海風(fēng)格的小窩,而我的房子就像是一個倉庫。

而數(shù)字產(chǎn)品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標(biāo)樣式、形狀與紋理、間距、意象、交互或動畫,以及這些要素在界面中的組合和使用的具體方式。

有時,人們將這樣的特性視為產(chǎn)品的樣式,或稱作皮膚,也就是最外面的一層。但要想取得成效,它們必須不僅存在于表面,還必須存在于品牌的核心,并隨著產(chǎn)品的發(fā)展而發(fā)展。只有這樣,感知性模式才會成為讓產(chǎn)品脫穎而出的強大力量。

1. 感知性模式的作用

同一領(lǐng)域的產(chǎn)品,哪怕具有相似的模塊,它們給人的感覺也是不一樣的。感知性模式通過界面?zhèn)鬟f品牌,并讓品牌被人記住。

看下面的圖片,你能認(rèn)出它們是什么產(chǎn)品嗎?

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

這兩張圖里面并沒有太多的信息,你只能看到排版的樣式、一些圖形和顏色以及一些圖標(biāo)。然而這些視覺上的線索極具辨識度,所以你仍然很有可能看出它們分別屬于什么產(chǎn)品(即釘釘飛書)。

這些視覺元素通過有意識地反復(fù)使用,便形成了模式,這就是為什么我們可以在沒有上下文的情況下認(rèn)出它們。

2. 感知性模式讓系統(tǒng)更為連貫

在模塊化的系統(tǒng)中,想要做到視覺上的連貫統(tǒng)一可能是一件很棘手的事情。模塊是由不同的人根據(jù)不同的目的創(chuàng)建的。而由于感知性模式是滲透到系統(tǒng)中各個部分的,因此它們可以將系統(tǒng)的不同部分連接起來。如果這種連接是有效的,那么用戶就會感受到模塊之間的統(tǒng)一性。

例如:飛書和騰訊的相同功能的組件感知模式是不一樣的,所以兩個公司設(shè)計體系不能混用。

3. 探索感知性模式

如果說功能性模塊反映的是用戶需要且想要的內(nèi)容,那么感知性模式關(guān)注的則是他們直觀的感受或行為。

在《網(wǎng)站情感化設(shè)計》一書中,作者提出了一個簡單的方法,通過創(chuàng)建“設(shè)計角色”捕捉產(chǎn)品關(guān)鍵的個性品質(zhì)。以下是一些有助于探索感知性模式的一些技巧。

1)情緒板

情緒板是探索不同視覺主題的絕佳工具。可以使用數(shù)字化的方式創(chuàng)建情緒版(Pinterest 或花瓣都是一種用于創(chuàng)建數(shù)字化情緒板的常用工具)。

如果你目前做的產(chǎn)品是需要體現(xiàn):科技、質(zhì)感、智能,那上圖應(yīng)該可以滿足這些條件,你可以通過這張圖與領(lǐng)導(dǎo)進(jìn)行溝通達(dá)成一致,然后從中提煉出一些顏色、元素、材質(zhì),這樣大方向就不會有太大問題,只需在細(xì)節(jié)上進(jìn)行打磨。

2)樣式疊片

定義好了大致的方向之后,便可以使用樣式疊片來更加細(xì)致地探究多種可能性。樣式疊片的概念由 Samantha Warren 提出,他將其定義為“由字體、顏色等界面元素組成的能傳遞 Web 視覺品牌精髓的設(shè)計交付物?!?/p>

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

和情緒板一樣,樣式疊片可以為用戶和產(chǎn)品團隊提供有價值的討論點,并呈現(xiàn)他們對特定設(shè)計方向的初始反應(yīng)。

arco.design 首頁這張圖可以理解為就是樣式疊片,把不同的組件樣式疊片放在一起比較,有助于準(zhǔn)確地找到設(shè)計方向。

4. 迭代與改進(jìn)

當(dāng)功能模式和感知模式建立完成后,我們將它們集成到產(chǎn)品的過程,它們還將進(jìn)行演變。因為在真實的界面中,模塊、交互、樣式之間相互影響下會產(chǎn)生新的問題,這都是很正常的,是典型的迭代過程,這個過程會一直持續(xù),直到設(shè)計語言最終形成。像 ant design、arco.design 應(yīng)該都經(jīng)歷過這個過程,只是我們不知道而已,要不然也不需要花費幾年的時間打磨后才發(fā)布出來。

1)平衡品牌性與一致性

過分關(guān)注一致性也會扼殺品牌性。矛盾在于,讓設(shè)計達(dá)到完美的一致性無法確保它依然具有很強的品牌性。有時,這樣做反而會削弱品牌性——在一致性和統(tǒng)一性之間存在著細(xì)微的差別。

英國公開大學(xué)》的創(chuàng)意總監(jiān)曾說過:“當(dāng)你專注于產(chǎn)品一致性的時候,打造產(chǎn)品質(zhì)感的一些重要的細(xì)微之處就有可能會丟失。

發(fā)展感知性模式需要為設(shè)計師賦予打破常規(guī)的權(quán)力,鼓勵設(shè)計師積極地探索更多的可能性。好的設(shè)計體系能在品牌的一致性和創(chuàng)造性表達(dá)之間取得平衡。

2)小規(guī)模試驗

后期如果發(fā)現(xiàn)樣式無法滿足,我們?nèi)绾螌⑿碌臉邮揭朐O(shè)計體系呢?

可以先進(jìn)行一些小規(guī)模的試驗是一種相當(dāng)有效的做法。如果某些元素的效果很好,我們就逐漸將它們集成到其他界面中去。例如,在學(xué)習(xí)者完成一個步驟時,純功能性的切換按鈕缺乏慶祝和成就的感覺。于是,我們用帶有圓形樣式、彈跳 動畫以及勾號圖標(biāo)的按鈕取代了先前的按鈕。

雖然新的按鈕樣式受到了學(xué)習(xí)者們的好評,但它與設(shè)計體系的其他元素格格不入。后來,我們開始在網(wǎng)站的其他地方應(yīng)用圓形圖案、彈跳動畫和勾號圖標(biāo)。如果不這樣做,那么整個設(shè)計體系給人的感覺就是割裂的。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

五、共享設(shè)計語言

數(shù)字產(chǎn)品都是由團隊打造的。團隊里的每個人都有各自的具體目標(biāo),都有各自的截止日期。這就意味著難免會出現(xiàn)草率加入的模式、重復(fù)或錯誤的模塊。

我們能確保一個產(chǎn)品即便有多人協(xié)作,卻仍能連貫、統(tǒng)一嗎? 只要我們團隊對自己的設(shè)計體系及其運轉(zhuǎn)方式有共同的理解,我們就能做到這一點。

這意味著我們遵循相同的指導(dǎo)原則,我們對品牌愿景的理解是一致的,我們在設(shè)計和前端架構(gòu)方面有共享的方法,我們知道什么樣的模式是最有效的,也知道它們的工作原理。換句話說,創(chuàng)建統(tǒng)一的設(shè)計體系需要共享設(shè)計語言。

許多偉大的建筑物(如圣家族大教堂沙特爾大教堂、阿爾罕布拉宮)并不是由一位主建筑師在繪圖板上費力地創(chuàng)造出來的,而是由一群人構(gòu)建出來的,這群人對能將這些建筑物變?yōu)楝F(xiàn)實的設(shè)計模式有著深刻的共識。

“幾組人可以通過遵循一個共同的模式語言,當(dāng)場構(gòu)思出他 們的大型公共建筑,就好像他們共有一個心靈?!?/p>

——克里斯托弗 ? 亞歷山大,《建筑的永恒之道》

我們可以用類似的想法構(gòu)建數(shù)字產(chǎn)品。設(shè)計語言可以讓人們創(chuàng)建出具有整體感的產(chǎn)品,哪怕不同的人負(fù)責(zé)不同的部分也是如此。

1. 為模式命名

如果一個界面上的元素沒有恰當(dāng)?shù)拿Q、團隊里人盡皆知的名。那么該元素就沒有在你的設(shè)計體系中成為有效的單元。一旦你給一個物件命了名,你就塑造了它的未來。

例如,如果你給的是一個表現(xiàn)型的名稱,那么它將來就會受到樣式的限制:“藍(lán)色按鈕”只能是藍(lán)色。

例如,如果你給的是一個狀態(tài)屬性的名稱:“幽靈按鈕”,它的特點是:按鈕形狀的透明按鈕,但有細(xì)實線的邊框,常用在有色背景上。

2. 將團隊融入設(shè)計語言

僅僅完成命名還不足以建立共享的設(shè)計語言。整個團隊都應(yīng)該 沉浸到設(shè)計語言中去,讓它無所不在。

讓設(shè)計模式變得可見:

如果有條件,可以在墻上開辟一塊專門展示設(shè)計體系的空間,將它稱作“模式墻”。

讓你的設(shè)計體系更加開放,人們會感覺你歡迎他們的加入,歡迎他們提出問題甚至做出貢獻(xiàn)。

1)引用事物的名稱

所有語言的共同特點是,只有不停地使用才能讓它保持活力。

它需要成為日常對話的一部分:

這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設(shè)計體系作為入職培訓(xùn)的一部分將設(shè)計體系的內(nèi)容作為入職培訓(xùn)的一部分,新員工了解設(shè)計體系就會更加容易。當(dāng)新員工入職時,他們將了解到設(shè)計指南是如何創(chuàng)建出來的,這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學(xué)》 內(nèi)部,他們創(chuàng)建了一個入門性質(zhì)的線上課程,其中有一章專門對模式庫進(jìn)行了介紹,并包含了 一些小測驗和小課程,這樣可以幫助新員工更好的理解設(shè)計體系。

2)定期組織設(shè)計體系會議

每個人都討厭開會。但是,如果你希望每個人都跟得上設(shè)計體系的發(fā)展,那么組織召開設(shè)計體系的會議就是必要的。這是所有設(shè)計師和開發(fā)人員共同專注于設(shè)計體系的時間。一開始,可以每周舉行一次,當(dāng)團隊找到節(jié)奏之后,可以每兩周舉行一 次。團隊可以利用例會時間就產(chǎn)品的總體模式(如圖標(biāo)、排版)得出一致意見。同時,這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。

如何有效打造設(shè)計體系?我總結(jié)了這5個方面(如何有效打造設(shè)計體系-我總結(jié)了這5個方面的問題)

設(shè)計體系不是一夜之間構(gòu)建出來的,而是通過日常的實踐逐漸形成的。

作者:夜鶯YEAH;來源:優(yōu)設(shè)

原文鏈接:https://www.uisdc.com/build-design-system

本文由 @夜鶯YEAH 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Unsplash,基于 CC0 協(xié)議

版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn),該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報,一經(jīng)查實,本站將立刻刪除。

(0)
上一篇 2022年7月27日 上午10:03
下一篇 2022年7月27日 上午10:17

相關(guān)推薦