91成人精品,神马影院东京干,国产一级做a爰片久久 亚洲日韩欧美一区二区三区_国产AV无码专区亚洲AV

設計體系構(gòu)建法則 | 論B端產(chǎn)品的體系化構(gòu)建(下)

2021-6-22    seo達人



上一篇我們已經(jīng)講述了產(chǎn)品發(fā)展的生命周期,而現(xiàn)階段你的B端產(chǎn)品處于什么生命周期?在這個階段產(chǎn)品要解決的問題是什么?在產(chǎn)品發(fā)展的過程中,設計體系又應該如何構(gòu)建?本文將基于B端產(chǎn)品的發(fā)展階段,帶你詳細了解設計體系的正確構(gòu)建方式。

 

??????

 

前言

對于產(chǎn)品體量較大、發(fā)展周期相對較長的B端產(chǎn)品來說,任何一個設計決策的沉沒成本都是巨大的。

若在產(chǎn)品初期就過多制地定規(guī)范,就容易限制產(chǎn)品設計的創(chuàng)意性;而在產(chǎn)品框架成熟之后盲目地進行“創(chuàng)意”,則容易造成體驗一致性的缺失,以及大量的重復開發(fā)工作。

在合適的階段做正確的事情,能夠極大降低產(chǎn)品的設計和開發(fā)成本,保證最高的投入產(chǎn)出比。

在產(chǎn)品的不同生命周期中,產(chǎn)品需要解決的問題、工作內(nèi)容、建設方向是不同的,而對于設計的需求也會存在差異。因此,針對不同的階段,需要制定不同的策略,才能讓設計發(fā)揮最大的價值,并逐步構(gòu)建完整的設計體系。

你的產(chǎn)品處于哪個階段?在這個階段中,設計師應該重點做哪些事情,才能逐步構(gòu)建設計體系呢?

??????

 

「新生期」確立風格,關注核心場景的最優(yōu)體驗

如果你的產(chǎn)品目前處于新生期,那么恭喜你~ 你將有機會從零開始構(gòu)建一套完整的設計體系。

處于新生期的產(chǎn)品,首先要解決的兩個核心問題是:用戶是誰?需要解決什么問題?

產(chǎn)品的目標用戶群,將決定你的產(chǎn)品風格;而需要關注的核心問題,便是產(chǎn)品的核心場景體驗。因此,在產(chǎn)品設計上,也將圍繞這兩個重點來展開。

 

A.「 確立產(chǎn)品風格 」感知性模型的初步構(gòu)建

首先,我們要為產(chǎn)品創(chuàng)建產(chǎn)品主風格,并以此基礎進行延展,構(gòu)建初步的感知性模型。感知性模型是控制產(chǎn)品外觀的一套設計規(guī)范,不僅包含產(chǎn)品風格,還包含以主風格為基礎制定的組件視覺風格。

影響產(chǎn)品風格的因素很多,但其中最為核心的一定是“人”。

用戶是那些人?(用戶畫像:如性別、用戶年齡區(qū)間、工作、喜好等)將會決定產(chǎn)品的定位,進而決定產(chǎn)品的調(diào)性傾向。

競品長什么樣?我們還需要在前期進行充分的競品調(diào)研,分析目前市場上的產(chǎn)品現(xiàn)狀,在設計上保證產(chǎn)品的獨特性,讓用戶能更好地記住產(chǎn)品。

??????

需要注意的是,感知性模型的建立,通常與品牌特征具有強相關性。為了保證品牌調(diào)性的一致,設計師需要思考如何在產(chǎn)品中植入這個“感知點”,并恰當?shù)爻霈F(xiàn)在不同的體驗場景中,加深用戶對于“感知點”的印象。

比如在網(wǎng)易七魚的所有設計中,為了使所有場景具有統(tǒng)一的品牌調(diào)性,在圖形風格、配色、界面布局的設計上都采用了一致的延續(xù)性。

??????

感知性模型的建立,其實與品牌DNA有異曲同工之妙。優(yōu)秀而獨特的產(chǎn)品風格,可以讓用戶擁有更好的記憶點和歸屬感,并成為用戶傳播的基礎。

 

B.「 關注產(chǎn)品的核心體驗 」

在新生期,產(chǎn)品的核心功能將會是最主要的競爭力。

這一階段,設計師應該專注于核心功能,將核心場景體驗做到最佳。用戶使用產(chǎn)品時通常處于什么場景?如何讓用戶更好地解決問題?流程是否可以更精簡?通過不斷地思考、嘗試、驗證,找到最佳的產(chǎn)品設計方案。

而非核心場景的設計,因為業(yè)務還在不斷發(fā)展中,將會伴隨大量的試錯和調(diào)整。所以只需制定基礎性的規(guī)范即可,否則反而容易限制設計師的發(fā)揮,對效率的提升也不明顯。

當然,在設計之前,進行廣泛的競品研究也是必要的。競品是如何解決問題的?我們是否擁有更優(yōu)的解決方案?我們可以將一些好的、更高效的設計方式結(jié)合到產(chǎn)品中。

什么時機進行競品研究是最佳的?我建議設計師先經(jīng)過完整的自主思考,并擁有自己的解決方案之后,再開始進行競品的調(diào)研。這樣有利于產(chǎn)出更具創(chuàng)意性的方案,而不僅僅只是“比競品好的方案”。

??????

需要說明的是,這里的體驗指綜合性的產(chǎn)品體驗,包含了產(chǎn)品核心邏輯、交互方式與視覺設計,將會涉及到產(chǎn)品不同的職能。

產(chǎn)品流程決定了用戶解決問題的路徑。是否能夠解決用戶核心痛點?是否合理?是都具備通用性?這些都決定了產(chǎn)品未來的用戶廣度與銷售范圍;而產(chǎn)品交互則決定最合理的人機交互形式。如何更高效?如何使操作更方便?如何讓新用戶擁有更低的學習成本,等等……

??????

這些工作雖然在視覺設計師工作的范疇以外,但對于產(chǎn)品至關重要。作為產(chǎn)品團隊的重要成員,我建議設計師主動去學習并參與到這些環(huán)節(jié)。

在設計中主動思考,提出自己的看法與建議,這樣才能真正的從根本上去提升產(chǎn)品的核心體驗,增強產(chǎn)品的競爭力。

 

「成長期」通過組件庫建立“引用”模式,構(gòu)建團隊協(xié)作模型

產(chǎn)品已經(jīng)進入成長期,意味著產(chǎn)品的基礎形態(tài)已經(jīng)基本形成,并且有了清晰的迭代方向。

如果你的產(chǎn)品在這個時期,設計團隊應該及早讓產(chǎn)品的”生產(chǎn)流程“標準化。因為產(chǎn)品的頁面、模塊數(shù)量將會開始迅速增加,標準化越早,能夠節(jié)約的成本也就越高。

通過組件化建立“引用機制”,可以讓產(chǎn)品擁有統(tǒng)一的“零件”標準。之后,再圍繞“零件”標準,構(gòu)建團隊的協(xié)作模型,使整個產(chǎn)品的“生產(chǎn)線”更加標準化,從而提升產(chǎn)品的效率與品質(zhì)。

??????

 

A.「 啟動產(chǎn)品組件化,建立“引用機制” 」

進入成長期,在產(chǎn)品形態(tài)初步穩(wěn)固之后,就可以開始啟動產(chǎn)品組件化了。

組件化,就是將頁面拆分成可復用的最小單元。如果將頁面比喻成物質(zhì),那么組件就類似于“原子”,每個組件獨立封裝,又可以集中維護,以此來管理和維護整個頁面。

??????

組件本身又分為基礎組件與復合組件,就像“原子”與“分子”的關系?;A組件可以作為一部分嵌套在復合組件中,這也可以保證復雜組件與基礎組件之間的延續(xù)性和可控性。

??????

與設計規(guī)范不同的是,因為組件庫包含了封裝的前端代碼,其統(tǒng)一性在執(zhí)行上往往比設計規(guī)范要徹底得多。

而組件化更長遠的價值,在于“引用”機制的建立,以及基于組件庫進行的工作模式升級。引用模式可以使所有相同的組件都有共同的控制節(jié)點,使整個產(chǎn)品形成可控的逐級鏈路,對所有末端組件進行集中控制。

??????

在封裝的組件庫中,我們還可以植入統(tǒng)一的API接口,使所有組件可以進行主題定義。比如整體的配色、圓角度數(shù)、間距、模式等等。這樣,每個組件將會有非常多樣化的配置方式,以此來適應不同場景、不同的風格。

是不是很像前文中提到的自然構(gòu)成算法?基礎物質(zhì) X 隨機變量 X 算法/秩序 = 可控的復雜系統(tǒng)。

??????

任何一個新的產(chǎn)業(yè)進入成熟期以后,都會逐漸將某些環(huán)節(jié)進行標準化,以此來提升效率、降低成本。通過無數(shù)個標準化的結(jié)合,逐漸形成體系,最終影響整個行業(yè),而數(shù)字產(chǎn)品的發(fā)展,也必然會經(jīng)歷這個階段。

通過組件庫,不僅可以保證每個組件樣式、交互、反饋上的一致性,還能統(tǒng)一對組件進行優(yōu)化和維護。極大地提升了產(chǎn)品的可控性,降低產(chǎn)品開發(fā)成本,也增強了產(chǎn)品的使用體驗。

當然,在組件庫的創(chuàng)建上有不同的選擇,使用開源組件還是自行研發(fā),需要企業(yè)根據(jù)自身情況計算投入產(chǎn)出比。自研組件庫是一個龐大的工程,雖然成本較高,但對于組件的匹配性、易用性、穩(wěn)定性等方面都會有較強的優(yōu)勢。對于體量較大的B端產(chǎn)品來說,通過組件庫節(jié)約的開發(fā)成本,往往遠大于開發(fā)成本,而這也是大企業(yè)選擇自建組件庫的重要原因。

??????

從零到一進行組件庫的創(chuàng)建,將會經(jīng)歷一個比較長的周期。常規(guī)的流程是:產(chǎn)品經(jīng)理負責組件的定義,之后由交互設計進行單個組件的交互原型、交互規(guī)范的設計,在三方評審通過后才會進入視覺設計的階段。

在組件的視覺設計中,不僅需要考慮單個組件的規(guī)范性,還需要考慮整個組件的數(shù)值一致性、代碼的復用性、復合組件的嵌套關系,以及全局API植入等細節(jié)因素。關于組件庫的從零到一創(chuàng)建,之后會有單獨的文章進行概述。

 

B.「 團隊協(xié)作模型的升級 」

隨著產(chǎn)品模塊的逐漸增加,不同模塊的產(chǎn)品經(jīng)理、交互設計師、視覺設計師等也將快速增加。團隊較小時,產(chǎn)品的一致性與統(tǒng)一性可以通過小范圍溝通去解決,一旦團隊規(guī)模擴大以后,這種模式便難以解決問題。

一方面,組件本身的標準需要符合不同模塊的需求。另一方面,不同模塊的產(chǎn)品框架、規(guī)則需要有一個統(tǒng)一的標準,才能避免產(chǎn)品“混亂度”的不斷增加。

因此,在產(chǎn)品的成長期,我們需要一個對組件標準、體驗一致性進行管理的團隊,可以暫且稱之為——產(chǎn)品設計標準委員會

??????

委員會可以是虛擬的項目組,也可以是一個群,在有需要的時候進行討論,并進行文檔的沉淀。當遇到有可能跨模塊的內(nèi)容,或者能夠復用于其他模塊的通用方案時,都要通過委員會進行評審。同時,委員會可以定期對產(chǎn)品內(nèi)容進行排查,查看在產(chǎn)品中是否含有可統(tǒng)一、可標準化的內(nèi)容。

??????

比如在七魚工作臺中,抽屜式內(nèi)容是每個模塊都會出現(xiàn)的。但是,因為不同模塊是由不同產(chǎn)品經(jīng)理負責,所以內(nèi)容模塊的標準就會存在差異,比如模塊的布局、信息展示的排版、甚至ICON都不一致。

這就會造成兩方面問題。一方面,用戶在切換模塊后,需要重新對信息格式進行適應,甚至無法關聯(lián)相同的信息,導致學習成本增加。另一方面,當一個模塊需要接入另一個模塊的抽屜內(nèi)容時,內(nèi)容標準與樣式的差異性,也為大大增加開發(fā)和維護成本。

??????

這種全局的統(tǒng)一設計標準,單獨一個模塊的設計師或者產(chǎn)品,都是很難推動的。必須擁有一個標準審核的機制,使不同模塊的同類內(nèi)容具有相同的設計標準,才能使產(chǎn)品在發(fā)展中始終保持有序發(fā)展,避免產(chǎn)品走向混亂,最終導致產(chǎn)品“失控”

團隊協(xié)作模型的建立,將會逐漸沉淀出一系列的“跨模塊設計標準”,而這些標準將會成為逐漸整合為“規(guī)范體系”,最終構(gòu)建成為完整“模式語言”。

 

C.「 設計中臺化 」

在產(chǎn)品的成長期,隨著設計團隊的人數(shù)的增加,設計團隊的中臺化也是需要考慮的事情。特別是隨著Figma以及其他云端協(xié)作軟件的出現(xiàn),也使團隊設計文檔管理與協(xié)作的方式更簡單了。

??????

對于設計團隊來說,設計中臺的建立主要有以下幾個優(yōu)勢:

  • 標準文檔管理:設計中臺將會作為所有設計標準的來源,讓所有設計師可以進行調(diào)用。比如組件庫設計稿的存放與維護、ICON繪制規(guī)范、全局Banner規(guī)范、框架規(guī)范等。
  • 資源共享:將一些通用的、質(zhì)量好的設計元素進行共享,提升利用率和統(tǒng)一性。
  • 項目協(xié)作:大型項目的多設計師協(xié)作
  • 資產(chǎn)沉淀:隨著項目的進行,我們會積累大量的設計資源。設計中臺不僅是設計稿的存放庫,也可以將優(yōu)質(zhì)的設計資源進行分類,形成團隊資產(chǎn),方便設計師進行學習與調(diào)用。

??????

設計中臺的建立,能夠引導標準的統(tǒng)一,降低團隊的溝通和協(xié)作成本,是推動設計體系建設的重要因素。

 

「成熟期」構(gòu)建模式語言,整合功能性模型+協(xié)作模型

在經(jīng)歷成熟的的快速擴張之后,產(chǎn)品形態(tài)將最終進入一個相對穩(wěn)定的階段。其模塊數(shù)量、頁面數(shù)量已經(jīng)足夠巨大,雖然可能還伴隨著一些功能的增加或完善,但這座“大樓”已經(jīng)基本成型了,“樓層”已經(jīng)基本確定,剩下的可能是基于“樓層”建立更多的房間等等。

在這個階段,設計團隊需要將前期積累的“標準框架”構(gòu)建為統(tǒng)一的功能性模型,并整合功能性模型(組件庫)和協(xié)作模型,形成真正的設計體系。

 

A.「 逐步建立模式語言,構(gòu)建產(chǎn)品搭建模型 」

隨著協(xié)作模型的建立,不同模塊在進行設計時,都會進行標準的統(tǒng)一。在成熟期之前,因為產(chǎn)品形態(tài)還在擴張,這個標準都是比較零碎的。當產(chǎn)品進入成熟期后,設計團隊就需要將這些零碎的規(guī)范進行梳理,形成規(guī)范體系。

比如下圖的產(chǎn)品構(gòu)建框架規(guī)范,便是產(chǎn)品搭建的標準之一。比如一二級菜單的出現(xiàn)位置,頁面中標題、操作區(qū)、列表應如何布局等等…

??????

以及在具體的功能頁面中,不同頁面的細則規(guī)范、應用切換方式,頁面的預加載樣式如何統(tǒng)一等。

??????

最終,我們會將所有的全局規(guī)范、框架規(guī)范、信息架構(gòu),都整合為完整的模式語言(規(guī)范體系),以此來指導設計師/產(chǎn)品經(jīng)理進行產(chǎn)品的統(tǒng)一設計。

??????

 

B.「 功能性模型+模式語言 」產(chǎn)品快速構(gòu)建

完成模式語言(規(guī)范體系)的構(gòu)建后,結(jié)合我們的功能性模型(組件庫),就可以初步形成了產(chǎn)品的快速搭建能力——即一些常規(guī)的頁面,產(chǎn)品經(jīng)理可以在沒有設計時參與的情況下,自主進行快速搭建。設計師只需要在搭建完成后,針對頁面進行走查即可。

??????

整個搭建過程類似于樂高積木,通過單個組件進行框架搭建,然后遵循頁面的結(jié)構(gòu)進行組件填充,之后形成產(chǎn)品的功能模塊,再更進一步,將多個功能模塊再搭建成業(yè)務系統(tǒng)。

通過“樣式組件化”+“規(guī)范體系化”,再配合逐步完善的協(xié)作模型,整個產(chǎn)品團隊最終將形成了完善的設計體系。

??????

快速搭建體系的建立,可以創(chuàng)造更高效的資源分配模式。

一方面,對于產(chǎn)品來說,這意味著大量的資源可以從簡單、重復性高的工作中脫離出來。通過快速搭建體系,標準化和簡單的設計任務就無需設計師參與,可由經(jīng)過培訓的產(chǎn)品經(jīng)理直接進行搭建,而前端開發(fā)因為組件化與設計標準的統(tǒng)一,代碼復用率也大大提升,節(jié)約了大量的開發(fā)資源。

??????

另一方面,因為“生產(chǎn)原料”與“生產(chǎn)流程”的統(tǒng)一,使得產(chǎn)品的設計一致性得到極大的提升。

 

C.「 提供高質(zhì)量的用戶體驗 」

在產(chǎn)品進入成熟期后,產(chǎn)品通常已經(jīng)具備了龐大的用戶量。而在B端產(chǎn)品競爭日趨激烈的今天,用戶體驗將會越來越成為產(chǎn)品的核心競爭力之一。因此,提供高質(zhì)量的用戶體驗,將會成為非常有價值的事情。

特別是在產(chǎn)品快速發(fā)展的成長期,為了配合版本迭代,而忽略的大量體驗問題,都要在這個階段有針對性的進行解決。

而設計體系的建立,使得設計師擁有更多的時間專注于關鍵場景的體驗升級

??????

產(chǎn)品設計團隊可以定期針對產(chǎn)品進行體驗評估,掃描目前產(chǎn)品出現(xiàn)的問題。確定列表后與各相關方確定優(yōu)先級,之后根據(jù)優(yōu)先級進行排期,并跟蹤結(jié)果,最終驗證體驗問題的解決成果。

??????

比如為了解決頁面在加載中的卡頓問題,設計團隊為七魚的主要頁面設計了一套頁面預加載模式。提升頁面流暢性,盡量減少用戶等待中的焦慮感,也對模塊的結(jié)構(gòu)有一個預期。

undefined

為了解決不同屏幕的最佳適配問題,我們與前端開發(fā)一起設計了一套多段式自適應適配方案,讓屏幕適配不那么生硬,同時提升屏幕的使用效率。

undefined

以及在網(wǎng)易七魚的產(chǎn)品中,會伴隨著大量的篩選任務,經(jīng)常會占用巨大的屏幕空間。為了解決這個問題,設計團隊打造了可收縮式的“自適應超級篩選”。使客服人員在保證精準篩選的前提下,最大限度地提升屏幕使用效率。

undefined

而在使用場景最多、占比最高的表單組件中,我們制定了層級式表單規(guī)則,根據(jù)不同類型的字段,賦予合適的寬度,最大化地提升了屏幕的使用效率。

undefined

這些產(chǎn)品體驗的優(yōu)化任務,大多都由設計團隊進行推動,取得了非常良好的效果。這使得我們的產(chǎn)品在大的維度擁有極高一致性的同時,在不同的場景也具備高品質(zhì)的設計體驗。

 

「生態(tài)擴張」基于設計體系,快速創(chuàng)建新產(chǎn)品

一套成熟的設計體系建立,意味著產(chǎn)品的“基礎零件”和“生產(chǎn)流程”都已經(jīng)成熟。這種模式一旦落地,企業(yè)不僅可以快速生產(chǎn)新的B端產(chǎn)品,還可以基于這個模型對老的B端產(chǎn)品進行改造,最終構(gòu)建完整B端產(chǎn)品生態(tài)。 

 

A.「 快速創(chuàng)造全新的產(chǎn)品 」

通過分析B端產(chǎn)品的構(gòu)建方式,我們可以發(fā)現(xiàn):不同B端產(chǎn)品的構(gòu)成方式是相同的,區(qū)別僅在于產(chǎn)品的風格(感知性模型)和模式語言(產(chǎn)品的框架規(guī)范)的差異。而產(chǎn)品的組件庫、協(xié)作模型以及快速搭建流程,都是可以在不同的產(chǎn)品中進行復制粘貼的。

undefined

因為組件API的存在,我們可以將同一個組件適配不同的產(chǎn)品風格,并且基于改造后的組件庫,構(gòu)建產(chǎn)品的整體框架規(guī)范。比如下圖中的三個產(chǎn)品,雖然他們的風格不同,但都是使用FishDesign組件庫進行API定義的。

undefined

同時,當協(xié)作模型在一個產(chǎn)品中運轉(zhuǎn)成熟后,我們可以將這種協(xié)作方式快速復制到新的團隊中。之后,隨著新產(chǎn)品逐漸進入成長期,我們可以同樣按照上文所講的方式為產(chǎn)品構(gòu)建整體的框架規(guī)范(模式語言),并應用相同的快速搭建系統(tǒng)等等。

我們可以發(fā)現(xiàn),當擁有一套成熟的設計體系之后,構(gòu)建一個新產(chǎn)品的成本將大大降低。

基于這種模式,所有的組件仍然引用自同一個組件“源”,也就是說,企業(yè)仍舊可以通過組件庫保證所有產(chǎn)品的可控性。我們?nèi)耘f只需要維護一個組件庫即可,而這也將為企業(yè)節(jié)約大量的開發(fā)資源。

 

B.「 產(chǎn)品融合,打通企業(yè)服務全流程 」

一個B端產(chǎn)品,通常是為了解決“某一類”問題而誕生的。而B端企業(yè)的最終目標,一定是為企業(yè)解決“一系列”的問題,甚至是“全流程”的問題。因此,在一個大型B端企業(yè)中,當所有的子產(chǎn)品都逐漸成熟以后,產(chǎn)品的整合通常會成為下一個目標。

在傳統(tǒng)的B端企業(yè)中,產(chǎn)品整合通常會是一個非常大的問題。因為不同的產(chǎn)品可能采用不同的前端框架、不同的風格、不同的操作行為等等??梢哉f,產(chǎn)品整合的成本約等于重新開發(fā)一個產(chǎn)品。

但是,如果所有的產(chǎn)品都采用同一套設計體系,那么產(chǎn)品整合將會容易很多。

undefined

因為所有產(chǎn)品都是基于同一套設計體系進行構(gòu)建的,不同產(chǎn)品的區(qū)別僅在于框架規(guī)范(模式語言)以及核心場景操作方式的差異。所以,我們只需要對這些產(chǎn)品的整體框架規(guī)范進行統(tǒng)一,就能逐步打通不同產(chǎn)品。

undefined

最終,通過產(chǎn)品設計體系+一致的產(chǎn)品框架規(guī)范,我們將幾個不同的B端產(chǎn)品整合成了一個大型的B端平臺。在這個平臺中,原先所有子產(chǎn)品的能力都在其中,同時我們也可以將所有的能力在同一個平臺中串聯(lián)起來,形成完整的解決方案。

而對于我們服務的企業(yè)來說,我們不僅擁有眾多可單獨購買的“多樣化服務”,也擁有一系列全流程的“大型服務能力”。我們既能解決小問題,也能解決大問題,產(chǎn)品的競爭力將會大大提升,我們所能服務的客服范圍也將越來越大

 

「未來前瞻」B端產(chǎn)品設計的發(fā)展局勢

隨著B端產(chǎn)業(yè)的快速發(fā)展,在未來一定會出現(xiàn)更多的創(chuàng)新的設計趨勢。在文章的最后,結(jié)合自己淺顯的認知,跟大家來聊一聊未來的新趨勢吧~

A.「 設計“算法”化,框架智能化 」

即便是目前基于組件庫的UI設計,產(chǎn)品模塊的“拼裝”上,更多的還是依靠個人感官,以及設計師的配合。雖然存在柵格系統(tǒng),但顯然在設計與前端層面并沒有形成完整的融合。

因此,在未來的B端設計中,UI設計中部分“感知性”的模型,將會逐漸轉(zhuǎn)化為“算法”。

比如在所有的UI界面設計中,我們可以將4間距設定成一個代數(shù)值U(U=4px)。以此為基礎,我們將模塊內(nèi)元素的間距設定為2U,模塊間的間距設定為4U。通過這種方式,我們可以將所有的間距、層級以U進行表示。將所有的設計稿、前端開發(fā)都使用同一個代數(shù)U進行設定之后,所有UI的間距就實現(xiàn)了“代碼化”。

undefined

以這種方式,全局的UI間距可以轉(zhuǎn)化為“算法”,讓機器自動生成間距。同時,當我們的界面在不同場景需要調(diào)整疏密感時,直接調(diào)整U的數(shù)值,配合柵格系統(tǒng),就能實現(xiàn)全局等比調(diào)整。

undefined

 

B.「 能力交叉,新型崗位誕生 」

在職能的細分上,一個很明顯的趨勢是,不同職能的能力范圍將逐漸蔓延。在成熟的產(chǎn)品中,不管是產(chǎn)品經(jīng)理還是設計師,他們的能力都會越來越向兩端擴展,并趨于融合。

比如產(chǎn)品經(jīng)理更懂交互了,視覺設計師也更懂交互,并且一部分成為了體驗設計師。這就導致部分交互設計崗位會減少,產(chǎn)品經(jīng)理將會承擔部分交互工作,而另一部分則由體驗設計師完成。比如為了讓產(chǎn)品還原度更高,一部分設計師將會開始研究前端代碼,而一部分前端則會擁有更高的設計與審美素養(yǎng)。

undefined

因為各職能之間的“交叉面”增加了,所以產(chǎn)品的“下限”更高了,而產(chǎn)品的整體品質(zhì)也得到了提升

而在設計軟件未來的發(fā)展中,這個趨勢也將得到加強。產(chǎn)品設計師(產(chǎn)品經(jīng)理+體驗設計師)將能夠在軟件上完成從產(chǎn)品策劃-UI設計-Demo演示-開發(fā)對接的全流程

undefined

另一個趨勢是新型崗位的誕生。隨著B端產(chǎn)品的逐漸成熟,一些大型的、成熟產(chǎn)品將會對各方面提出更高的要求。而未來可能將會出現(xiàn)以下兩種職位:

數(shù)字體驗工程師:

在未來,越來越多的體驗將在虛擬場景、或者虛擬現(xiàn)實場景進行。產(chǎn)品體驗的提升很大程度上將會依賴技術與設計的結(jié)合。因此,在一些大型的互聯(lián)網(wǎng)公司,很可能會出現(xiàn)同時精通產(chǎn)品體驗與前端技術的“數(shù)字體驗設計師”。

undefined

產(chǎn)品架構(gòu)設計師:

在大型的B端產(chǎn)品中,各產(chǎn)品經(jīng)理往往負責不同的業(yè)務線,專注于本模塊的架構(gòu)。而設計師雖然制定規(guī)范,卻難以推行至產(chǎn)品框架層面。導致了產(chǎn)品的頂層框架-產(chǎn)品UI規(guī)范-產(chǎn)品前端框架,這三者通常是分離的狀態(tài),二者將帶來非常巨大的彌合成本

產(chǎn)品架構(gòu)設計師的出現(xiàn),將會以 [產(chǎn)品+設計師+前端架構(gòu)師] 的角色,統(tǒng)籌所有的產(chǎn)品線,制定 [產(chǎn)品-UI-前端] 一體式的整體架構(gòu),讓整個產(chǎn)品的標準完美兼容所有的模塊,使整體架構(gòu)更精簡、更可控。

 

C.「 跨端模塊化,兼容性框架,全平臺融合 」

隨著移動互聯(lián)網(wǎng)、物聯(lián)網(wǎng)的加速,數(shù)字產(chǎn)品將會逐漸延伸至更多的場景。而多端的兼容性、一致性、成本也逐漸納入到未來的思考之中

因此,跨端模塊化、全平臺融合將會是未來的趨勢。隨著Google的Flutter、華為的Harmony OS,都正朝著這個方向發(fā)展,而蘋果也在嘗試iOS、iPadOS、MacOS的三端融合。

undefined

很顯然,對于產(chǎn)品體量巨大的B端產(chǎn)品來說,多端開發(fā)的成本是非常高昂的。而且,高昂成本帶來的,卻仍然是大量的體驗不一致、版本難以管理等,而跨端的模塊化,將是這一系列問題的答案。

比如網(wǎng)易會議在產(chǎn)品設計之初,移動端就直接采用了Flutter進行跨端開發(fā),而桌面端(Windows、Mac端)則采用了兼容性框架。同時,為了使未來全端融合可以實現(xiàn),我們對很多場景與組件都進行跨端的模塊話設計,不管是設計稿還是前端數(shù)值,都實現(xiàn)了1:1的跨端統(tǒng)一。

undefined

可以預見,在未來的系統(tǒng)架構(gòu)中,一定會以跨端模代碼統(tǒng)一、全平臺融合作為目標,而產(chǎn)品的設計也會逐漸往這個趨勢發(fā)展,帶來更多的可能性。

undefined

最后,希望華為的Harmonys能夠成為第一個真正意義上的全場景融合系統(tǒng),也希望中國所有的科技公司一起加油~

 

 

「末」寫在最后

這段時間的變化也挺大的,經(jīng)歷了公司內(nèi)的組織變革、拆分,伴隨著離別、重組、成長、新生。心態(tài)上確實又成長了許多,也看開了很多事情。沒有任何事情是一成不變的,你的安全感來能力和內(nèi)心的強大。只是做好隨時應對變化的準備,才能坦然的活在暫時的穩(wěn)定中。

從整個宇宙的尺度來看,變化是永恒的。所有的物質(zhì)都處于大爆炸的余暉中不斷膨脹,就連時間也是如此。

熵增是宇宙的基調(diào),而生命以負熵為生。生命就是要在不斷克服變化,在變化中尋找平衡。努力與舒適、工作與生活、做人與做事,任何事情都是相對的,平衡是事物長期發(fā)展的關鍵。

隨著年紀的逐漸增長,好像突然能夠讀懂一些“老書”了。不管是孔孟老莊,還是偉人的《毛澤東選集》,對于自然、社會、人的認識反思,都比我們要深刻的多。智能并不等于智慧,抖音和頭條看再多,都比不上認真完整的去讀一本書。

孔子曰:“子溫而厲,威而不猛,恭而安。”

王蒙老師對此的解釋很通俗:做人時刻做到面面俱到,是不容易的。從長遠看,也就是求幾個方面的平衡、均衡。溫和很好,失去了堅定性與原則性就不好了,所以還要補上厲。威嚴是必要的,太兇猛莽撞了就傷人害人,提醒您悠著點,別那么猛恐怕是必要的。恭敬小心,如果變得哆里哆嗦,進退失據(jù),鬧心亂意,當然也是走向了反面,您還得安詳踏實些。這三條乃是做人的辯證法。

希望大家能在工作之余,多看一些好書,多一些學習成長。

感謝大家的觀看,下次再見~

 

推薦閱讀書籍/文章:

《智能商業(yè)》—— 曾鳴;《設計的思考》——周陟;《設計體系》—— [英] 阿拉·霍爾馬托娃;《深奧的簡潔》—— [英] 約翰·格里賓;《機械宇宙》—— [美] 愛德華·多尼克;《萬物皆數(shù)》—— 米爾??āぢ迥?;《產(chǎn)品從0到1的4個發(fā)展階段》;《B端產(chǎn)品生命周期》;《復雜》——梅拉尼·米歇爾

 

原文地址:設計劍道(公眾號)

作者:徐劍杰


轉(zhuǎn)載請注明:學UI網(wǎng) ?設計體系構(gòu)建法則 | 論B端產(chǎn)品的體系化構(gòu)建(下)



藍藍設計建立了UI設計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計www.b186.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務

 



日歷

鏈接

個人資料

藍藍設計的小編 http://www.b186.net

存檔