大型的視覺設計系統都是怎麼設計出來的?

2022-09-21 13:33:09 字數 1883 閱讀 6462

大概在一年前,我遭遇了設計生涯中最重要的乙個挑戰,當時我需要為facebook的商業產品設計乙個具有凝聚力的視覺系統,它將應用在給全世界成千上萬的企業使用者所用的企業服務當中。

雖然facebook

下面的每個工具都能很好地工作,履行職責,擁有符合預期的工那阿閣,但是它們並不具備令人滿意的整體體驗,也難以給予那些期待成長的企業以信心。從乙個產品到另外乙個產品,ui模式、色彩、圖示、甚至字型樣式都不一樣,整體的體驗就顯得頗為過時了,同facebook

使用者如今的日常個人生活也顯得比較脫節。

所以,我們希望製作出擁有一致且滿意使用者體驗的產品,讓facebo程式設計客棧ok 真正服務與商業使用者,也產生足夠的情感關聯。我還希望通過這些他們所使用、依賴的工具,來展示我們對於這些業務的承諾。

乙個系統,多重體驗雖然我知道這個專案將會是乙個團隊專案,但是真正開始的時候,我依然被嚇到了。截至目前,我曾為模擬人生設計過ui,為

sfmoma建立過泛用型的風格指南,但是這些專案大多都是面對單一使用者或者是單一產品。可是想在我要面對的,是一項橫跨多型別使用者群體、囊括了數百萬小企業、大品牌和**機構、涵蓋不同廣告工具、迎合多樣營銷需求的乙個視覺系統,這甚至和我們日常所面對的各種極端挑戰還來的複雜。簡單的說,我們所需要設計的產品,需要匹配上體驗完全不同的多個產品,統一 150 位設計師的設計,協力完成。

我不知道最終這個設計系統會是什麼樣子,但是我清楚它一定不能太精確,不能限制得過死。它需要是可擴充套件的,靈活的,並且擁有優秀的成長性和可進化性。在真正開始視覺設計之前,我希望知道我們對於產品和使用者之間的互動有怎麼樣的預期。我們想到了一系列不同的語彙來對其進行描述,比如人性化、專業、值得信賴、友善等。

與利益相關方保持一致接下來,我將所有facebook

旗下的商業產品、消費者側寫以及色彩進行了基本的審核。隨後,我將整體體驗和視覺上的脫節之處,展現給了相關的所有團隊。之後,我們針對不同的團隊展開了研討會,並且通過投票和貼紙填寫意見的方式,快速地統一並協調出了我們共同認為的成功的設計。

當我們在大方向上達成一致的時候,我們基本上就敲定了我們所要的風格——「抽象幾何風格」,並且之後我們在此基礎上進行了多輪修改。現在我們有了乙個明確的方向,但是我們仍然需要尋找一條通用的方法來將它應用到不同的產品,重塑整體的體驗。

有效的整合接下來我將這個系統當作乙個整體來審視。我試著重新訪問重塑之後的每乙個部分,我發現整個體驗已經被協調到比較一致的程度,接下來只需要針對特定的使用者和產品進行微調即可。

舉個例子,我們希望 power editor 是乙個主要由廣告**商和專業人事使用的廣告介面工具,所以它的介面應該被設計的更為先進、高階,同時,主要面向中小型企業的pages 則需要做的更加簡單、平易近人。

在色彩上也是一樣。一部分訪客可能需要的是值得信賴和沉靜的介面,有的則向看到感覺友好的控制項。所以,我研究過整個色彩系統之後,嘗試將它對映到facebook

真個業務體系中。我將各個專案的使用者需求維度和相應的配色匹配起來,這使得我們可以一致和系統地針對所有客戶進行有規律的調整。不過這個事情並不那麼容易。

開發一套能夠覆蓋所有的客戶也使用者的配色okenogpig系統,並且還要保持其中一些部分的個性和特色,這無疑是一項巨大的挑戰。為了滿足這些條件,多個團隊之間進行了大量的協作。

我們通過色調和色調之間的協同來強化 facebook 的品牌,並且盡力在消費者和商業需求之間創造一致性的特徵。在整體方案中,我們盡量讓不同的產品擁有不同的配色方案,創造出讓使用者易於辨別的明顯差異性。

保持人性配色這件事,只是我們為這些商業工具帶來不同體驗保持適當差別的諸多努力中的一項。facebook 本質上是為了連線不同的人,如果我們的商業工具——即使是最先進的那種——都讓人感覺和人有距離感,它們就開始出離於我們所熟知的facebook了。

我希望我們的新的視覺體系是通用而簡單的,傳遞出足以同世界上絕大多數使用者能夠產生共鳴的情感。我在視覺設計規範中寫明了許多代表性的使用者的相關指南,涵蓋了膚色、髮型等資訊,具備多樣性的特徵。

關於大型系統設計原則的思考

在進行設計原則的討論之前,首先要明確乙個事實 在乙個軟體專案團隊中,在討論專案設計的時候,每個人都會有自己的設計理念。這些設計理念一般都跟每個人的成長經歷有關係。跟使用者密切接觸的人員,比如 產品經理,售前經理等,在設計乙個系統的時候更考慮整個系統如何設計才能更加方便使用者,更加貼合使用者的業務流程...

系統設計之 怎麼給系統鬆綁

在我們系統內部其實很多模組與模組之間是有很多耦合 就是乙個物件需要呼叫另乙個物件 關係的。既然是有關係,這種關係又不能斷,那麼只能想辦法去把建立乙個穩定的關係,把耦合度降到最低。如果 是直接耦合,那這種就相當於耦合非常高,我們設計程式的時候最忌諱這樣,這樣的後果就是,互相進行了 限制,彼此互相限制了...

機器視覺系統設計的難點解析

第一 打光的穩定性 工業視覺應用一般分成四大類 定位 測量 檢測和識別,其中測量對光照的穩定性要求最高,因為光照只要發生10 20 的變化,測量結果將可能偏差出1 2個畫素,這不是軟體的問題,這是光照變化,導致了影象上邊緣位置發生了變化,即使再厲害的軟體也解決不了問題,必須從系統設計的角度,排除環境...