<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          設計師如何構建認知體系

          資深UI設計者

          文章來源:站酷    作者:兔子大吉


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

          地圖基礎知識及通用設計原則

          資深UI設計者

          Part 1. 地圖的發展

          地圖作為記錄地形傳遞路線信息的載體,在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術的發展而變化,從石板、動物皮革,到絲綢、紙張。當互聯網走進千家萬戶,地圖也步入電子化時代。

          相較于紙質地圖,電子地圖優勢顯著:更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖(后文簡稱地圖)的出現也影響著人們的出行方式,尤其當智能手機普及,我們可以隨時查詢地點、發起導航,再也不需要提前記下高速出口和轉向路口了。

          Part 2. 地圖在滴滴的重要性

          滴滴擁有網約車、代駕、騎行、公交、自駕導航等眾多業務,是一站式出行平臺。而地圖作為承載出行服務的重要載體,橫向支撐著各業務線的發展。以網約車業務為例,調研結果顯示絕大部分乘客都會關注并使用地圖。

          隨著各業務線對體驗的要求不斷提升,單一的地圖模式已經不能滿足業務訴求及用戶需求,需要進一步細分場景、精細刻畫地圖樣式,于是地圖的設計也變得愈發重要。

          滴滴出品!地圖基礎知識及通用設計原則

          Part 3. 解構地圖

          地圖承載的信息種類復雜、數量巨大,初期可能會找不到設計切入點。我們可以先了解下它的定義和實現方式,或許就能從中找到答案。

          定義:地圖是依據一定的數學法則,采用地圖語言,經過制圖綜合來表示地球表面的圖形。

          實現流程:

          • 采集真實世界的地點信息,經過編譯轉化成數據
          • 數據信息中包含了地點的坐標、分類、名稱等
          • 數據經過渲染形成可視化雛形地圖
          • 雛形地圖經過設計最終變成策略完整、視覺美觀的電子地圖。

          滴滴出品!地圖基礎知識及通用設計原則

          結合“從雛形到完整地圖”這一步流程的實現方式,進而可將地圖拆分為基礎層、策略層和感官層。幫助各職能角色找到對應切入點。

          • 基礎層,指的是地圖的數據和能力。數據大家已經有所了解了,能力指的是引擎渲染能力、定位能力、圖像識別能力等。有了數據及各類能力作為基礎,才能設計出信息精準、交互明確的地圖。
          • 策略層,則指的是如何使用這些基礎數據和能力。地圖數據量非常龐大,無法全部展示,需要結合不同的場景及用戶需求,有重點的呈現。
          • 感官層,便是我們給數據穿上的衣服,會根據品牌調性、對應場景訴求等去設計最終的配色、圖標等。

          滴滴出品!地圖基礎知識及通用設計原則

          解構地圖后,我們不難看出,感官層是設計側需要關注的重點層級。

          Part 4. 地圖設計原則

          1. 元素分類

          面對如此復雜的地圖信息,為了梳理出清晰的思路,我們會對地圖元素進行分類:根據數據的類別和呈現狀態,可拆分為點、線、面三類元素。

          • 點元素:地名、POI*等。數量龐大,是城市規模的體現,尤其POI信息,它是地圖中顆粒度最細的位置信息。
          • 線元素:道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現了道路的走向、區域的劃分等,描繪出了城市的樣貌。
          • 面元素:陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現,很大程度上決定了一張地圖的色調。

          名詞解釋:POI, Point of Information的縮寫,即“信息點”。一個POI可以是一棟房子、一個商鋪。

          名詞解釋:AOI, Area of Interest的縮寫,即“信息面”。指的是區域狀的地理實體,如醫院、小區等。

          滴滴出品!地圖基礎知識及通用設計原則

          2. 核心設計原則

          從定義可以看出,地圖是一種特殊的圖形語言,是以上所有元素的集合體。相比我們所了解的UI設計、運營設計,地圖有屬于自己的設計原則。以下為大家總結了一些核心的原則:

          符合制圖學和公眾認知

          地圖發展到現在已經成為了一門學科,我們會發現即使語言不通,拿到一張地圖時也能看懂,這是因為有制圖學和公眾認知在規范著地圖設計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學和公眾認知,大大降低了用戶的學習成本和記憶負擔,使地圖可以作為一種世界通用語言流通起來。

          保證識別度

          地圖屬于信息類工具,其上出現的元素均需清晰可識別,保證可讀性是最基本的設計原則。所以在設計時會限制顏色對比度、最小字號等,而具體規則會根據場景確定。

          清晰有層次

          地圖的層次清晰包含了兩個方面:信息主次清晰,視覺具有整體性。

          信息主次清晰,地圖信息龐雜,沒有主次關系會影響用戶的讀圖效率。在設計時需要考慮元素本身的特點、重要性,可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關聯性,不同元素有差異性。同時,信息主次也會根據比例尺的變化有所調整。

          視覺具有整體性,在滴滴的業務場景中,地圖通常作為最底層組件出現,上層還會有很多業務組件。因此在設計時需克制用色,既要保證地圖中各元素之間的區隔度,又要保證地圖整體與其他業務組件拉開視覺層級。這樣才能更好的突出當前業務模塊的重點,提升整體的使用效率和體驗。

          細分地圖模式

          地圖在各業務模塊中應用廣泛,用戶需求也不盡相同,設計時需要根據使用場景區分不同模式。以網約車場景為例,業務信息始終處于上層,地圖用來幫助用戶定位、快速發單。因此,網約車場景的地圖整體性強、色調偏冷、視覺層級后退,能更好的搭配網約車模塊的整體設計,保證用戶的操作效率。

          滴滴出品!地圖基礎知識及通用設計原則

          具有品牌特性

          品牌調性一直是滴滴設計層面非常關注的原則,品牌基因貫穿了所有產品,始終具有獨特的視覺風格。遵循品牌的視覺語言,使地圖可以更好的融合到產品中,保證了設計的統一性。

          文章來源:優設    作者:CDX創意設計中心


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


          設計師要懂的原子設計(AtomicDesign)理念

          周周

          “我們不設計頁面,我們設計構成元素的系統。”——Stephen Hay 

          原子設計理論并不是什么高大上的規則。

          隨著網頁設計的持續發展,我們認識到開發設計系統(design system)的重要性,它最早就是為了讓網頁設計師更容易理解網頁的構成,后來才延伸到UI設計當中。


          簡單來說,當公司的業務產品逐漸擴大時,我們需要制定一套完整的設計系統,提升設計和開發的協作效率,統一所有設計師的輸出物。 開始設計系統的制定時,大部分設計師可能都會先去網上找到大廠現成的設計系統,當拿到他們的成品的時候,會把自己的產品進行拆解和借鑒,這的確能快速解決問題,但是如果不理解其中的組織規則和邏輯,只是借鑒他們現成的設計系統,只能了解個大概,知其然而不知其所以然。因此,原子設計理論的出現就是為了幫助我們去搭建設計系統,這套理論已經逐漸被國外一些大廠應用于創建統一和富有層次的設計系統。

          原子是所有事物的基本構成物質。每一個化學元素都具有不同的性質,并且它們一旦被分解就會失去其意義。

          分子是由兩個或兩個以上的原子通過化學鍵結合在一起的。這些原子的組合具有自己獨特的性質,并且相較于原子來說,更具實際意義和可操作性。
          有機體是由分子有機地組合在一起的。這些相對復雜的結構可以從單細胞生物一直到像人類這樣難以置信的復雜生物體。 


           宇宙中的物質都可以被分解成為原子元素。

          碰巧的是,我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網站、APP、企業內部網、hoobadyboops等等是如何由相同的HTML元素組成的。

          △Josh Duck的“HTML元素周期表”

          接下來和大家細聊一下什么是原子設計;原子設計到底好在哪里;為什么要有設計系統;以及該如何利用原子理論創建自己的項目組件庫。

          原子設計(Atomic Design)理念最早是由國外網頁設計師Brad Frost提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,進一步形成組織,從科學的角度來講,在宇宙中的所有事物都是由一組有序的原子組成。

          Brad將這個概念應用到界面設計中,仔細觀察后我們不難發現,界面其實就是由一些基本的元素組成,文字,顏色和圖標等都是一個個原子。

           

          通過原子設計,我們可以把界面看作是一個連貫的整體,同時也是一些元素的集合,每個元素都不盡相同,互相結合產生更多層次和結構,模塊之間相互統一。說到底,原子設計其實是一種設計方法論,它由原子、分子、組織、模塊和頁面共同協作,由此創作出統一和富有層次的設計系統。 

          簡單來說:原子結合在一起,形成分子,進一步結合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。

          原子設計是一種方法,由五個不同的階段一起工作,以更慎重和更具層次的方式創建界面設計系統。從而創造出更有效的用戶界面系統的一種設計方法。

          它的五個不同階段是:

          原子(Atoms):為頁面構成的基本元素,例如標簽、輸入框、文字、顏色等;
          分子(Molecules):由原子構成的簡單UI元素,例如按鈕;
          組織(Organisms):相對分子而言,較為復雜的構成物,由原子及分子所組成;
          模板(Templates):以頁面為基礎的架構,將以上元素進行排版;
          頁面(Pages):將實際內容(圖片、文章等)放置在特定模板內;

           

          原子設計不是一個線性的過程, 它更像是一個心理模型,來幫助我們把用戶界面看作是一個連貫的整體,同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面,讓我們更深入的了解每一個階段哦~

          原子

          如果原子是物質的基礎組成部分,那么我們用戶界面的“原子”就是那些構成我們用戶界面的基本構件了 。在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。 


          在團隊開始新項目時,為了保證各個頁面具有統一的設計風格,我們會制定一套簡易的視覺規范,在關鍵的設計元素上,各個設計師達成一致,這樣就能很大程度保證不同頁面的風格統一,并在這個基礎上去探索更有創新意義的設計方案。

           


          在模式庫中,原子一目了然地展示了所有的基本樣式,當你回來繼續開發和維護你的設計系統時,這是一份很有用的設計參考指南。

          分子

          分子是原子組合建立的元素,兩個原子即可組成一個分子。

          在界面中,分子就像是一個由UI元素組成的相對簡單的組織。例如,搜索框里的文字和圖標共同打造一了個搜索表單分子。

           


           以按鈕為例,它的組成元素包含了文字、色塊、圖標和柵格。合并后,這些抽象的原子從毫無關聯到又一個共同的目的,圖標和文字互相配合傳達意義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

           


          將單個元素組裝為簡單的功能組是我們一直以來構建用戶界面的方式,可幫助UI設計人員和開發人員堅持單一職責原則,這種方式簡單且復用性高,可以保證界面具有良好的可用性。

          以界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子是由文字、圖標和線條原子組成。這些原子合并后,得到的是一個可以應用在任何信息展示或者功能入口的組合。

           

          組織

          組織是由分子或原子或其它有機體組成的相對復雜的UI部分 。這些組織組成了界面的不同部分。

          通過結合分子和原子,我們可以構建更復雜和可擴展性的模塊,這個稱之為組織,其實也可以稱之為組件,這些組件組成了界面的不同部分。同樣以表單為例,一個表單我們可以通過數量的組合,以及間距的調整,元素的增減,在界面中表達不同的場景和含義。從建立分子到建立更精細的組件,這為設計師和開發人員提供了重要的內容構建思路。

           

          組件在解放設計師生產力方面有著重要的作用,我們可以把界面中常見的組件進行分類整理,如搜索、表單、圖片和卡片等,這些常用組件基本能滿足日常的設計需求。以Aribnb為例,他們主要分為3類:卡片、表單和內容。每個標簽內容的設計形式盡量都保持統一,因此負責不同內容模塊的設計師只要選擇同一個組件就能完成頁面的設計。在短時間內就可以完成頁面超多的復雜項目,極大的提升了團隊的設計效率。

           

          在網頁端最典型的例子就是網站導航,搜索表單,我們幾乎訪問的每個網站都會看到這些類型的組件。 

          模板

          原子,分子和組織的這種語言有助于我們有意識地構造設計系統的組件。但是,最終我們必須采用一個更適合描述我們最終產出的語言,這樣才好匯報給老板、客戶和同事,簡單來說就是說人話。

           

          模版的本質就是線框圖,在這一步我們基本可以看到一個產品的形態。我們可以不斷調整組件和分子組合在一起的效果來嘗試不同的方案,找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內容結構布局,而不是頁面的最終內容,此時模版內容是隨時可以調整的,嘗試不同的方案,在多個模版中進行對比,在這個階段改動和溝通保證了成本。因此,模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。

           

          模板是頁面級別的對象,它將組件放置在布局中,并顯示設計的底層內容結構。在設計一個有效的設計系統時,必須在布局的環境中展示組件的外觀和功能,以證明這些部件組成了一個功能良好的整體。

           

          模板的另一個重要特征是它們專注于頁面的底層內容結構,而不是頁面的最終內容。設計系統必須考慮內容的動態性質,因此,把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。

          頁面

          頁面是模板的具體實例,填充了真實的內容(圖片、文字等)后形成頁面,也就是常說的「視覺稿」,將占位符替換為有代表性的真是內容,使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的視覺方案。

           

          頁面階段是原子設計中最具體的階段,由于一些眾所周知的原因這個階段非常重要。別忘了,這可是用戶在訪問你的界面時會實際看到和交互的內容。

          除了演示用戶所看到的最終界面之外, 頁面對于測試底層設計系統的有效性是必不可少的 。在頁面階段,我們可以看到當將真實內容應用于設計系統時,所有這些模式如何運作。所有的一切看起來都很棒嗎?如果答案是否定的,那么我們可以回過頭去修改我們的分子、生物體和模板,以更好地滿足我們內容的需求。

           

          頁面還提供了一個表達模板變量的地方,這對建立強大而可靠的設計系統至關重要。以下是模板變量的幾個例子:

          用戶在其購物車中有一個商品,另一個用戶在其購物車中有十個商品。
          網頁APP的儀表板通常顯示最近的活動,但是該部分對于首次使用的用戶是禁用的。
          一篇文章標題可能是40個字符長,而另一篇文章標題可能是100個字符長 

          在所有這些例子中,底層的模板是相同的,但用戶界面將會隨著內容的動態性質而改變。這些變化直接影響了底層分子,有機體和模板的構建方式。因此,創建解釋這些變量的頁面有助于我們建立更具彈性的設計系統。


           這就是原子設計!這五個不同的階段同時協同工作,以產生有效的用戶界面設計系統。


          原子是最基礎的UI元素,并且是可以用作界面的元素構建塊;
          分子是用于形成相對簡單的UI組件的原子集合;
          組織是形成界面各個部分的相對復雜的部件;
          模板將組件放置在布局中,并演示設計的底層內容結構;
          頁面將真實內容應用于模板,設計出視覺稿,并最終成為開發落地的依據;

           

          原子設計為制作設計系統提供了清晰的方法??蛻艉蛨F隊成員通過實際的設計流程與步驟,能更好的去理解設計系統的概念。原子設計使我們能夠從抽象的設計中過渡到具體的設計中來,因此我們可以對一個設計系統進行一致性和可伸縮性等類似特性的控制。


          通過模塊化的設計系統調動組件,可以使我們開發新的產品時,從開始就可以對產品進行嚴格的把控與一定程度上的控制,進而規避了事后風險。開發之前不確定好系統模塊化,毫無邏輯的去開發,開發到一半發現功能與需求對不上等問題逐漸產生,會導致產品的延期、人員成本的浪費、資金成本的增加,產品的迭代率的下降、進而影響市場先機與市場占有率。 

          原子化設計與原來的樣式庫設計思路不一樣,原子化設計從抽象到具象,從元素到組件,讓設計師從底層開始思考,對整個設計會有更清晰的理解。同時也能讓設計更加統一,在新增組件的時候更謹慎。

          原子設計的原理可以保證任何一個設計組件的構成與開發構建組件一一對應。同時應用原子設計的設計軟件(e.g., Sketch, Figma)可以給新設計師足夠的自由滿足需求變通,并且可以保證同一個設計組件的更新會覆蓋到任何一個使用這個組件的設計中。 

          原子設計為我們提供了一些關鍵的見解,幫助我們創建更有效、更深思熟慮的UI設計系統。

          那么、 


          如果產品規模小只需要1,2個設計師,大概率是前期不需要大費周章搞一個需要開發配合的設計系統??梢灾焕肧ketch或者Figma做一個像貼紙一樣的設計組件庫。但是功能多了怎么辦,公司來新人了,當新設計師產出后就會發現與原設計師設計的風格不一樣,慢慢發現整體設計風格不統一了,只靠一個簡單的組件庫很難能滿足新功能需求,新功能貼紙上沒有設計或者設計需要變通,又或者是新設計師忙著交工忘記檢查自己新組件和已有組件的異同。

           

          這時候就會需要一個設計師領頭去重新整理設計系統,走查發現同一個正文所用的十幾個不同字號,又或者是十幾個透明度不同的灰黑色字體,所有組件跟現有上線產品對比整理好后一并交給開發,開發再一一整理代碼庫。

          設計系統(Design Systems)對于很多年輕設計師可能十個新名詞,但是設計規范和組件等我們應該還是有一定認知的。在設計的過程中,我們會被其影響。在我們日常所使用的App產品中,如Apple、Google、Airbnb、Uber、滴滴等,他們的產品體驗非常流暢,用戶使用產品時能夠地滿足需求,在其良好的體驗背后都有著一套強大的設計系統做支撐。


          為什么需要設計系統

           

          1、團隊協作,體驗一致。以滴滴為例,雖然只是一個簡單的打車應用,但是其旗下的業務卻很多,快出、出租車、順風車等,每個業務都由不同的團隊和設計師負責??梢韵胂笕绻麤]有設計系統,任由各模塊設計師自由發揮,風格各異,出來的結果可想而知。而有了設計系統的幫助,就會感覺界面風格非常統一,感覺是出自同一個設計師之手,可見其設計系統的功勞不小。

           


          2、系統的管理多樣性。在設計過程中,我們會發現過程中,我們會發現每個業務的形態都是基于不同的場景,因為場景的多樣性,在表現上就會催生出不同的樣式。如果每個業務都用一種樣式表達,久而久之當業務增長過快時,我們現有的設計模式就會難以滿足。Airbnb的設計方式就是非常值得參考的一個案例,從最開始是提供民宿,到后來新增的餐館服務,你會發現房源和餐館都用了同一套圖文信息結構,只是在內容的細節上有一些不同。這樣可以降低設計的難度。設計師不用為每個場景思考一個設計模式而煩惱。同時,用戶在瀏覽不同場景的內同時,在相互切換中也不會產生為違和感,一切都是很自然的操作。

           

           

          3、幫助產品成長,避免一次性設計。互聯網產品的成長模式是一種漸進式迭代,在產品初期的主要訴求是快速上線,等到產品上線獲取一定的用戶,證明它可以活下去時再逐步完善,增加更多的功能。每一次的迭代都是站在我們之前的思考之上,每一次的優化都會讓我們的設計更進一步,這是我們期望達到的結果。

           


          以Uber為例,新版本繼承了黑色按鈕的設計,并和地圖進行了結合,地圖的配色和舊版本相比也變得生動了,這種改變并不是一蹴而就,而是建立在原有版本之上。

          一致性(Consistency):由于分解界面成單一元素,不論在哪一個頁面,UI元素的互動性是相同的,例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同,在視覺上更為和諧。


          效率(Efficiency):由于建立了組件庫,一旦要更改某一個元素,可以馬上施行、應用。


          跨部門的共通語言(Collaboration):不僅方便設計師思考頁面的和諧性,也可以讓工程師、測試檢驗清楚頁面的邏輯架構及變化,減少不必要的來回溝通

          在此,順便淺談下設計系統。

          通常,設計系統包含的內容由設計原則、設計語言和組件庫,這是一個整體的概念。

           

          設計原則

          設計原則是一個產品的核心設計理念,設計的本質就是解決問題,在制定設計原則時要建立在這個中心思想之上。這些問題也許是一個業務形態,例如打車的場景,也許是一個設計形式,如表單。設計形式又很多,我們應該如何選擇呢?相對合理的方法就是建立一個規則,所有的問題和形式都想這個規則靠攏,減少不確定性,這就是設計原則的出發點。因此我們可以理解為,設計原則就是一系列的規則,是我們設計過程中要遵循的中心思想。

          例如:蘋果把審美作為第一要素存在于設計原則中,它的產品往往也是品味的代名詞,看看它的設計原則就知道了:

          審美的完整性

          一致性

          直接操作

          即使的反饋

          隱喻

          用戶可控

           

          △ 官網:https://developer.apple.com/design/ 

          再來看看Material Design,Google對其定義是一個完整統一的系統,結合了理論、資源和工具的數字體驗產品,相比而言它的設計原則就是更加獨特,這是它的設計原則:

          材料是一種隱喻

          大膽/圖形/強調/

          運動賦予意義

          靈活的基礎

          跨平臺 

          △ 官網:https://material.io/design

          由此可以看出,和iOS相比,Material Design的設計原則更加的抽象,因為他擁有一個獨特的設計世界觀,用還原的方法和物理方法呈現出它的本質,通過抽象的視覺卡片傳遞出設計的目的和原則。

          設計語言

           在建立設計原則后,下一步就是制定一套設計語言規范,設計規范是設計系統的表現層,面向的對象是團隊設計師和開發者,他能幫助設計師的設計輸出保持風格統一。同樣也能幫助開發者高度還原設計。非常有利于設計師和開發者的協作。這套規范包含的有:字體、顏色、圖標和柵格。 

          組件化設計

          組件化設計主要作用有兩點,一是保證多人協作效率,組件化設計可以快速完成一個簡單頁面的設計,提升設計效率;二是保持產品體驗的統一性。同時,組件化設計環節在設計系統中是一個相對重要的工作,需要有一個全局觀,要有較強的設計水平和溝通協作能力,這樣,組件化的落地才會得到很好的推進。

           

          在多屏時代,我們時時刻刻都在設計產品界面,需適配多系統,其中很重要的一點是如何在多系統之間保持體驗一致性,很多人想到的就是規范,要想做一套嚴謹邏輯好,靈活的設計規范,那么原子設計可以幫助我們來很好的實現它,它在構建設計系統中算是比較科學的一種方法,國外很多設計團隊都在使用這樣的設計方法。比如以下這幾個團隊: 

          1、Airbnb

          Airbnb設計副總裁Alex Schleifer在IXDC2017國際體驗設計大會上分享了這一創新React Sketch app 管理設計系統, 這是為Airbnb的設計系統而設計的,其實就是個實時更新的代碼數據庫,可以實時查詢sketch數據、代碼,也可以下載圖標、設計模塊,所有工程師、設計師都可以免費下載。

          △ 官網:https://airbnb.design/events/when-we-use-systems/

          2、Frames

          Frames 使用了精致的組件和先進技術,并結合 Sketch 構建了強大的 Web 設計系統,同樣能滿足修改原子,全局同步更新的功能,支持響應式布局。提供了近百個網頁模板,可以非常迅速地完成效果圖制作。

          △ 官網:http://framesforsketch.com

          3、Nested Symbols

          這是一套免費的設計系統,它將按鈕、輸入框、下拉菜單、通知等控件,都制作成了嵌套符號,方便自定義和編輯。

          △ 官網:https://www.janlosert.com/ 

          原子設計理論最大的價值,就是為設計體系/組件庫的構建提供思路和方法,如果你不滿足于市場上現有的設計系統,我們還可以自己創建。因此我們首先要為產品設計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展,必須能在所有地方奏效!


          接下來就以 Sketch Library 功能來實現組件庫的創建。

          第一步:定義顏色(color)

          將顏色添加 Main、Text、Status 等一級分類,例如:Color/Status;再添加二級分類,例如:Color/Status/Success 等,命名需使用「 / 」 符號區分層級結構。定義好顏色和命名后,將每個顏色轉換成 Symbol,便可統一調用。

           


          第二步:定義字體(font)

          根據設計規范,將不同字號的文字樣式羅列出來,例如:Title 1、Body、Body2 等,按照「樣式名稱/顏色/對齊方式」的層級結構,將文字賦予 Text Style,整理出所有的字體樣式。

          第三步:定義圖標(icon)

          將圖標放置在 24*24px 大小畫板內,從定義好的顏色系統中選擇合適的 Symbol,這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸(size)大小,并把調整尺寸(Resizing) 設為上下左右同時吸附,以確保圖標在使用時可以等比縮放。

           

          第四步:加入其他元素(Elements)

           

          根據以上對原子的定義和命名方式,依次完成對其他原子、分子和組織的定義,例如:按鈕、表單、空狀態等,整個過程都是通過 Symbol 的不斷嵌套,最終實現組件庫的創建。

           

          第五步:加入組件庫

           

          使用快捷鍵「cmd+, 」打開 Preferences 面板,選擇「Libraries」(組件庫)標簽,點擊「Add Library」(添加組件庫)按鈕添加剛才的 Sketch 文件,完成后就可以從其他的 Sketch 文件中,對此庫里的元素進行調用了。

           

           

          寫在最后,原子設計是一套具有科學嚴謹的創建設計系統的方法論,是一個構建UI系統的心理模型。

           


          原子設計使我們可以將我們的界面UI細分為原子元素,并通過這些元素組合在一起形成最終的界面。

          原子作為整個理論最基礎的元素,當我們改變其中的原子時,整個體系都會發生變化。原子的設計概念和sketch中的“符號”有異曲同工之妙,當我們改變其中一個元素時,其他所有包含這個元素的頁面都會發生變化,可以保證整個系統的一致性和層次感。原子設計為界面元素提供了應用規則和組織原理,這套方法論對于設計系統建立、團隊協作、產品迭代都具有非常重要的指導意義。

          經常有同學問ios設計規范,安卓設計規范在哪看這類問題,最后,來推薦一些大平臺的設計網站,上文出現過的下面就不重復了。我們耳熟能詳的優秀設計都是來自于這些世界互聯網公司,說真的,審美這東西還真是人家說了算~


          反正看看又不要錢,都去康康唄~

           

          Google Design

          谷歌設計中心,它非常全面的展示了谷歌的設計工作和概念。包括Material Design在內的所有關于設計、體驗、產品等互聯網領域的探索。 

          △ 網址:https://design.google/

          Fluent Design

          微軟基于Windows10的設計語言,包括人機界面布局、控件、樣式及資源下載。

           

           

          △ 網址:https://www.microsoft.com/design/fluent/#/

           

          IBM Design Language

          IBM設計語言是偉大設計的代名詞,他將人們的需求轉化成精心打造的產品。在這里可以學習IBM設計團隊一用戶為中心設計的新思維方式。

           


          △ 網址:https://www.ibm.com/design/

           

          Facebook Design

          臉書設計官網,在國內,我們常??吹侥槙脑O計文章被翻成中文為中國設計師所學習

           

           

          △ 網址:https://facebook.design/

           

          Uber Design

          作為全球第一家即時打車應用,優步其超前的設計理念和優秀的用戶體驗成為同類產品競相模仿的對象。

           

          △ 網址:https://www.uber.deign.com/


          Ant Design

          螞蟻金服設計平臺是阿里旗下子公司,基于螞蟻金服生態系統的跨設計與開發的體驗解決方案。

           

          △ 網址:https://design.alipay.com/


          參考資料

          《原子設計》官網

          Airbnb 設計規范

          Apple 設計規范

          Material Design設計規范

          Google及其他

          文章來源:tob.design

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

          組件化設計思維

          周周

          組件化設計思維,能夠提升設計團隊的生產力,讓設計師專注于設計上的創意,同時讓設計師完成更多產品需求和提升團隊的溝通效率
           


           

           

          寫在前面 


          組件化設計的流程,經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:

           

          1. 明確組件化設計的內容。

          2. 場景設計走查。

          3. 組件化設計驗證效果。

           


           


          一. 組件化設計的案例(界面展示篇)


            

            


           


           


           小結:

          組件化設計,需要設計師要有一個整體性的設計思維,要有很強的設計能力和良好的溝通協作能力,同時設計師要深入理解業務,這樣組件化設計才能很好的在團隊內落地推行。

          組件化設計的優點有很多,能夠提升設計師的輸出效率,讓設計師更專注于設計上的創意思考,提升溝通效率。

          二. 原子設計方法論

           

           

           

          原子設計方法論是由國外設計師 Brad Frost 提出的,他從化學元素周期表中得到啟發,發現原子結合在一起,可以形成分子,然后形成組織。

           

          Brad 把原子設計的方法論應用到界面設計中,用心觀察會發現,界面是由一些基本的元素組成,顏色、文字、圖標等都是一個個原子。

           

          原子設計方法論,是由原子、分子、組織、模版和頁面共同協作,可以幫助我們創造出一套符合公司產品的設計系統。

           

           


           

           

          原子設計方法論是為了幫助我們去建立設計系統,目前逐漸被國內外的一些大公司,應用于創建統一的公司產品設計系統。

           

          接下來,我們以金融產品為例 ,對原子設計方法論進行拆解,深入思考原子、分子、組件、模塊和頁面在界面設計中的定義是什么,以及對應的元素是什么,元素之間又是如何組合的。

           

           

          原子

           

          用戶界面設計中的原子,是構成界面的基本元素。是一個單獨的元素,如圖標、標題、色彩等以及原子之間組合形成的新的元素組合。

           


           

           

          我們開展一個項目時,為了保證各個頁面保持統一的設計風格,我們會制定一套視覺規范,定義的內容包括:字體、顏色、柵格和圖標,這些就是界面中最基礎的原子。在關鍵的設計元素上,保證各個設計師達成一致,這樣就能很大程度的保證不同頁面的設計風格統一,并在這個基礎上去探索更有價值和創意的設計方案。

           

           

           

           

          分子

           

          兩個原子即可組成一個分子,以按鈕為例:包含了文字、色塊、柵格。

          文字傳達含義,顏色定義了按鈕的特性,柵格為按鈕定義了一個尺寸和規范。

           

           


           

           

          把單獨的元素做一個簡單的組合,是我們做界面設計的一種方法,組合的方式簡單且可復用性很好,作為開發者可以根據規則進行編寫代碼,提升產品的迭代效率和產品的一致性。

           

           

          界面設計中的表單為例,表單是一個非常常見的設計元素,一個表單分子由分割線、文案、Icon和分割線等原子組成。原子組合之后,可以得到是一個可以應用在功能模塊的組合。

           


           

           

           

          組織

           

          我們把分子和原子做組合,就可以創建復雜的、可擴展性的模塊,然后變成一個組織。

           

           

          組件在提升設計師設計效率方面有著很重要的意義,設計師可以把界面中常用的組件模塊進行分類整理,比如:圖片、卡片、輸入框等,可以解決設計師日常的設計需求。

           

           

          以金融產品為例,基本分為 3 類 :內容、表單、卡片化的設計。

          每個卡片化的內容設計盡量保持統一性,這樣方便負責不同模塊內容的設計師復用同一個組件,就可以完成不同頁面的設計,提升項目的設計效率。

           


           

           

           

          模板

           

          模版一般應用在設計系統的交互階段,保證原型階段的多方案的展示;模版內容,后面可以優化,這樣可以降低設計的成本。模版的價值可以讓設計師,更專注于頁面的結構化設計排版和對頁面布局的思考。

           


          那模版的原理是什么呢?

          就是產品的原型圖,就是組織和分子的組合,會先形成一個完整的頁面框架,作為一個初步的設計方案,作為團隊項目的前期溝通所用。

           


          以教育和金融界面為例,如下圖:

           


           

           

           


           

          界面

           

          界面設計是把占位符內容替換成產品設計需要的文案,在模板的組合上進行完善,會形成界面的設計方案。

           


          界面設計是模板的具體的展示設計,是真實內容的設計方案。

           


          通過圖標和文字的組合,清晰的展示用戶所需要的場景,加上內容,就會變成一套完整的界面設計方案。

           


          如下圖所示:

           


           

           

           

          以金融產品的場景設計為例,有了實際的內容后,我們可以發現通過組合組件,就能很好的呈現界面內容。

           


          如下圖所示:

           


           

           


          小結:

          原子設計方法論為界面元素提供了應用規則和組織整理,原子設計方法論在建立設計系統、團隊協作、產品迭代優化等方面,都有很好的價值和意義。

           

           

           

           

          三. 組件化設計的流程 ?

           


           

           

          設計規范和 Ui kit 是我們管理一個或多個App統一性和設計效率的工具,同時探索如何更有效的提升設計效率。像 滴滴等Ant Design 設計系統,他們的產品體驗非常好,用戶使用產品時能夠有效的滿足其需求,良好的用戶體驗背后都有著一套好的產品設計系統在運作。

           


          如下圖,國外的金融產品運用組件規范化后的界面設計展示 :

           


           

           

          系統性的組件化設計思維的好處是 :

           

          1. 產品設計迭代優化時,版本和版本之間的差異性就可以得到很好的解決。

          2. 界面設計之間的設計風格和設計樣式就會統一。

          3. 界面設計的效率和質量會穩定輸出。

           


          在我們所經常使用的 App 產品中,如 蘋果、Airbnb、自如、Ant Design 等,用戶體驗都非常好,用戶使用產品時能夠快速的解決需求,優質的用戶體驗背后都有著一套強大的專業設計系統所幫助。

           

           

           

           

          思考:我們為什么需要組件化設計 ?

           


          一. 統一產品設計體驗

           

          1. 以京東金融為例,在京東金融最近更新的版本中,我們看到財富界面和生活界面,同樣的模塊可以復用,對于復用性高的內容,應該提煉為通用組件,提高設計效率。

           


           

           

          2. 如上圖所示,對于會員專區或者熱門活動是金融類產品中最為常見的產品形式,在京東金融的首頁出現,布局往往是左右結構,或者上下結構;因為這類產品具有較強的引導屬性,所以會把右側的運營的插畫設計相對突出,以吸引用戶的注意力。會員專區的卡片化設計,具有較強的復用性,可以列為通用組件,這樣就可以保證兩個產品界面的卡片化的設計風格和樣式上的一致性原則。

           

           

           

          二. 提高團隊協作效率

           

          1. 面對相同的設計需求時,可直接調用相關組件,節省重復性的設計工作,提升溝通效率。

          2. 借助組件化設計,可以快速開展工作,達到復用的價值。

          3. 通過設計語言可以完成一個界面設計,在下面案例中,主要的元素由文字、柵格線、Icon 等組成界面結構,確定好排版布局和圖標的設計風格后,完成產品的界面設計。

           


           

           

          三. 降低開發成本

          1. 在實際工作中,如果每次制作一個新頁面都設計不同的組件,開發就要寫新代碼,增加開發時間成本。

          2. 如果我們常用的模塊作成組件庫,開發遇到相同的組件時,可直接調用組件,復用相關代碼,這樣可以降低開發成本。


           


            

          組件化設計流程,

          經過實際工作的鍛煉和思考,具體可以拆分為 3 個方面:


          一. 明確組件化設計的內容

          我們需要整體思考,明確可以復用的的內容、組件,以熱銷理財場景為例,金融產品都會需要用戶進行選擇理財產品,可定義為理財產品的卡片化設計組件,適合組件化設計的模塊。產品已有組件的優化,設計師要具體分析,分析組件體驗現狀,發現問題然后針對性解決問題。


          使用產品的場景設計、交互體驗、設計風格三方面都要思考,推出更好的產品設計的解決方案。以京東金融的財富和首頁的界面設計為例,應用的都是卡片化設計的理財模塊。在開發新項目的時候,同樣可以調用同一個理財產品的模塊化組件,不僅能保證產品上體驗的一致性,也能降低團隊的設計成本。如下圖所示:

           

           

          二. 場景設計走查

           1. 全面體驗走查線上的移動端產品設計,對用戶的交互行為鏈路有一個清晰的理解,思考當前線上的產品體驗。

          2. 線上產品功能的迭代一般業務方都會有一個周期性安排,因此在走查時要及時和業務方溝通,在這個基礎上再進行組件化的方案設計。

          設計師使用金融產品,在設計的時候要考慮到每一個環節。

          我們先來看下京東金融的案例,這兩個閃屏運營彈窗除了場景不一樣以外,其他元素都是高度統一的,組件化設計的優勢在于,只需要改變組件的部分元素就能適配各種場景。如下圖所示:

           


           

          三. 組件化設計驗證效果(如下圖)

           


           

           

          組件化的設計方案完成對接開發上線后,我們需要從兩個方面來驗證組件優化后的效果:

          1. 組件化設計是否可以滿足各業務方的需求和場景化的設計。

          2. 通過定性數據追蹤功能是否能促進業務的關鍵的設計指標的提升,這些數據可以是轉化率等數據指標,用戶的反饋也是一個很好的輔助驗證方法。

           

          四 如何建立組件化設計系統 ?

           


           

           

          每個團隊的體量和業務訴求不一樣,個性化的組件化設計系統包含有設計原則、設計語言和組件庫,這是一個爭議的概念。

          建立設計系統的原因:

          1. 建立設計系統,可以方便團隊協作,保證體驗上的一致性。

          2. 設計過程中,發現每個業務的形態,以產品的不同場景為出發點,使用一套設計系統,會提升用戶體驗。

          3. 幫助產品的迭代和優化,同時提升產品和用戶的體驗好感度。

           

           


           1 設計原則(設計理念、品牌指導)


          設計的本質是解決問題,制定設計原則時要建立在這個設計中心思想上。

           


          蘋果的設計系統:

           

          把審美作為第一要素存在于設計原則中。

          1. 創意審美的重要性。 

          2. 隱喻的價值。 

          3. 易用性原則。 

          4. 及時的反饋。

            

          安卓的設計系統: 

          1. 跨平臺的設計適配原則。 

          2. 材料的設計價值思考。 

          3. 圖形、強調、大膽的設計語言。

          4. 動效的服務設計價值。

           

           

           

          2 設計語言(色彩、字體、柵格、圖標)

          色彩的視覺語言規范,我們需要定義產品的基礎色板和中性色板,基本色板包含了產品的主題色和輔助色,生成每個顏色的亮色和暗色的衍生色。中性色板包含黑白灰,這類顏色在界面設計中使用,能讓頁面內容具有良好的層次關系,提升閱讀的效率和用戶體驗。

           

          字體規范是界面設計中的構成之一,用戶通過文字來理解和達成目標,完整的字體系統能有效的提高用戶的體驗和理解效率。字體的規范定義需要從三個方面出發:字重、灰度色、字階。


          界面設計的排版布局一般使用的 8 柵格法,它能適配不同尺寸的屏幕分辨率,界面元素大小和間距都是8 倍數為基準。

          圖標設計,隱喻,保持圖標之間一致的設計風格和表現形式。系統圖標為例子:以1@x圖為例子,常見的尺寸有: 16px、24px、32px、48px等。

           


           

           

           

           

          3 阿里系團隊,制作的 Kitchen 組件化設計系統 很好 :(如下圖)

           

           

           


           

           


           


           



           


           


           


           


           


           

           

           

           

          五.  Banner 組件化設計、B 端組件化設計等平面組件化設計的案例如下:

           

           

           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

           


           

          總結 :

          佐藤寫過一本書[佐藤可士和的超整理術],里面講述了他自己是如何通過整理自己的思路、對話、工作室、隨身物品等設計來讓工作變得并且最終對自我更加深入的了解 。


          生活和工作離不開“整理術”,優秀的設計應該要從“ 整理和總結 ”開始,比如:組件化的設計思維,可以看做是一種 “設計的整理術” 。

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



          設計的行動思維

          資深UI設計者

          你不會想要在緊急的狀態中去完成一件事情或一個設計作品,又或是做出一項決策。但如果你有系統的方法,則會讓你走出困境。

          反復訓練,你的大腦就會習慣這樣的思維方式,當你處在緊急狀態或者處于危機時,你的大腦便會像受過訓練一樣,幫助你快速決策或走出困境。

          本文講述《設計的行動思維》,它是一種優秀的思維方式,我用這樣的思維方式來指導我的設計行動;我以微信、淘寶、星巴克設計案例為你演示,幫助你更好地了解這一理論;它可以運用在你的設計執行和設計管理中,亦可以運用于你所在的任何領域。





          觀察
          Observation


          你需要反復觀察事物和自己認知之間的差異,這些差異往往存在在細小的事物中,不被察覺,需要不斷磨練我們的心智,讓大腦保持時刻鍛煉。

          你會發現,你會觀察到常人無法觀察到的一切,它是事物本身,或者一種現象,或是一處極為細小的變化,讓你的大腦時刻接受這樣的訓練,不止是你熟悉的事物或是領域,你將會觸類旁通。

          我們每天都在頻繁地操作淘寶、微信,你會發現品牌顏色的變化嗎?當事物的變化和認知之間形成差異,大腦就會自動做出判斷,并觀察到這一細微的差異,這是我們不斷觀察和訓練大腦所帶來的結果,我把這種行為稱為 ‘大腦的高度警覺’。這樣的警覺,并不是刻意獲取,而是大腦主動傳遞的。


          CASE 1 /  TAOBAO


          undefined


          這是Taobao APP 商詳購買頁面底部Button。一般情況下,品牌刷新或VI色調整,都會體現在界面的核心功能區域,例如Button或者Icon上。從‘立即購買’Button的色彩變化,便可以判斷Taobao經歷了3次重要的VI色調整。


          下面顏色是我記憶里的淘寶VI色(大致色值),淘寶VI色的調整也是相應了互聯網設計的主流色彩表現趨勢:


          undefined





          CASE 2 /  WeChat


          undefined



          這是微信公眾號后臺寫作界面底部區域的三個Button。和Taobao的case一致,核心區域的VI設計都會同步更新。我在撰寫文章的時候高頻操作的是‘保存’Button,自然就察覺到了色彩的變化。


          undefined



          大腦受訓練的程度決定觀察結果的細微程度。對顏色的判斷能力,我稱這種能力為 ‘色彩認知’

          又例如公眾號默認文章字體顏色并不是純黑色,而是深灰色(#333)。因為深灰色的文字在白色背景上閱讀起來眼部更為舒適。當我第一次書寫文章的時候,就發現默認字體的顏色正是我所需要的。



          undefined



          CASE 3 /  Starbucks

          ‘色彩認知’由我們不斷觀察的結果累積而來。就像您無需動手設計,‘色彩認知’便會告訴你墨綠色界面搭配金色作為輔色,能給界面帶來尊貴的氣質,這樣的設計會讓星巴克顯得更為高貴。



          undefined

          [ 星巴克官網首屏截圖 ]


          常人看到這樣的界面并不會有任何意見。用‘色彩認知’來講講我的觀察。星巴克的主色是墨綠色,在官網大面積使用,則帶來‘視覺壓抑’的感覺,我想通過簡單地改變,來提升星巴克的品牌氣質。


          我用Photoshop吸管工具從官網首頁上的一張照片中提取顏色:香檳色(Champagne),這樣的顏色在墨綠色底色上有較好的辨識度和品質感,適用于標題性文字顏色。


          undefined

          [ 從照片中提取顏色 ]


          在前期的訓練中,也可將圖片馬賽克,這會輔助我們挑選顏色,當你足夠熟練后,即可直接用吸管在照片上選擇更豐富的色彩。


          undefined

          [ 從馬賽克照片中提取顏色 ]


          香檳灰(Champagne gray),可用作常規閱讀段落文字顏色,在墨綠色上面會顯得柔和、舒適。


          我重新設計了首頁的文字與版式:


          undefined

          undefined

          [ 優化后的效果 ]


          下面是之前的效果。對比看看:


          undefinedundefined

          [ 官網截圖 ]


          這是最簡單的用戶感官上的提升。而更重要的是‘用戶心理’上的提升,這將在用戶閱讀文字內容時發生。我們先看看文字內容(翻譯如下):


          標題 | 事情在變,但我們仍然在這里為您服務。


          正文 | 我們已暫時關閉店內咖啡廳,但部分雜貨店和直通車位仍然開放。某些市場還提供星巴克提供的Uber Eats服務。請訪問我們的商店查找器以獲取的商店營業時間和營業地點。


          按鈕 | 尋找門店


          這段文字是星巴克官方在疫情期間所寫,并不是一段激動人心的品牌宣傳文案,所以我們在設計的時候應使用常規的文字顏色,為避免白色在墨綠色下帶來的刺眼,我選擇白灰色(#e3e3e3)的字體顏色。標題想表達的潛意識文字是:‘雖然我們碰到了困難,但是我們依然堅持為您服務’。我改為香檳色,來體現星巴克積極的態度與服務的品質,會顯得更有力度。


          在頁面中使用這樣的顏色,同樣可以提升設計的活躍度,為品牌帶來更好的品質。例如,將顏色應用到星巴克官網中小圖標設計和文字上面,來提升品質感與活躍度:


          undefined

          [ 優化后的設計 ]


          undefined

          [ 官網截圖 ]



          超乎常人的細微觀察意味著敏銳的市場嗅覺,意味著更前瞻性的設計思維,為身處品品牌的設計師帶來巨大的商業價值和用戶共鳴。



          定向
          Orientation


          當我們觀察事物的時候,旁人和你一樣,也在觀察你所觀察的事物,同是一件設計作品,在于你是否能更快速地發現觀察對象的弱點,這些弱點就隱藏在事物之中,往往和某一處細節有所關聯。

          找到弱點,利于我們定向事物的問題,從而幫助我們快速找到解決方案;快速地觀察并發現事物的弱點,取決于大腦前期觀察訓練的累積。

          當身處緊張、有限的時間,我們無法獲得更多的思考與驗證,則需要我們在這之前做出更多的觀察訓練。訓練越多,你的大腦則能更快速地發現事物的弱點,便于你更好地定向問題。



          決策
          Decision


          正確的決策依賴于你對問題的定向。有效地判斷事物的弱點,則能更準確地做出決策。我相信認知與觀察都是可以訓練的,在我們的日常生活中,顏色的排列與組合,在我們眼前頻繁地出現,我們可以從任意的事物中來觀察,將觀察與獲取結合在一起,并付諸于你的行動。


          undefined



          就像我們生活中所觀察到的水果的顏色,你可以從中獲取到這些色彩搭配,并將它們存儲在你的記憶中。當設計中需要表現活力、清爽的設計元素時,你自然會想到這些綠色和黃色的搭配。



          行動
          Action


          行動之前,無需刻意地去完成流程化(觀察、定向、決策)的過程,大腦的速度與行動指令在一瞬間完成,這依賴于大腦在這之前的觀察訓練。當你看到事物,大腦便會條件性地做出反應并支配你的行動,你可以理解為‘條件反射’,這極大程度依賴于我們前期的大腦訓練與積累。


          undefined



          ‘ OODA’ 是職業軍人:博伊德創立的戰略理念,這一理念對美國以及西方企業界和管理學界有著巨大的影響。 《設計的行動思維》是我在‘OODA’的基礎上加以我的理解,并將它轉化為設計的新思維,我稱它為‘設計的行動思維’,并將它運用在我的設計執行與管理中。

          觀察、定向、決策、行動,最重要的是‘觀察’。觀察是一個日積月累的過程,并非一日之功。在我的設計工作中,我能快速地發現產品問題并提供解決方案,這來自于我對觀察的日積月累與學習,使我能快速定向問題,作出決策,并付諸于我的行動。在行動中,我會再次循環,直至不會出現任何的設計問題。

          福布斯、哈佛商業評論都介紹過博伊德的戰略理念,數十本專業管理著作都提到過他。美國管理學界對海軍陸戰隊產生了深厚的興趣,向商業企業界大力推薦‘海軍陸戰隊方式’,而這個方式的靈魂就是‘OODA’,這是博伊德作戰思想的結晶。

          對我來說,OODA是一種行動思維,它可以改變您在設計工作中的思維方式??梢赃\用在您的設計執行和管理中,乃至您所在的任何領域、包括您所擔任的任何角色。

          文章來源:優設    作者:Riixiong 


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


          設計師如何地組織頭腦風暴

          資深UI設計者


          頭腦風暴是一種常用的設計方法,能夠幫助設計師開闊思維,快速獲取大量靈感與方案,當然,這是在理想的情況下。實際上,很多頭腦風暴是漫無目的,效率低下,毫無收獲的。而頭腦風暴需要很多人參與,如果浪費了大家的時間而一無所獲,那發起者簡直尷尬到能摳出兩室一廳。

          那么,設計師如何才能地組織一場頭腦風暴呢?下面我將按“開始前”,“進行中”,“結束后”的順序,介紹整個頭腦風暴流程中提率的一些心得體會。


          開始前


          明確想要解決的問題

          我們一定是為了解決某個問題,而不是為了閑聊組織頭腦風暴的。所以我們要先明確問題是什么,才能引導大家幫助我們。

          我們可以試著用一句話去概述它,注意必須要具體,不能太含糊?!叭绾卧O計一張海報”就是一個很糟糕的描述。試著把目標用戶、業務目標、場景加進這句話,比如“如何設計一張能夠吸引應屆畢業生加入XX設計中心的朋友圈海報”。


          拆解問題

          明確具體問題后,我們還需要將它進行拆解成一個個關鍵問題,這樣才能有序展開討論,而不是漫無目標地侃大山。比如剛剛提到的那個問題,就可以拆成“應屆生的關鍵詞是什么”、“應屆生找工作時最關心什么”、“XX設計中心的關鍵詞是什么”、“什么樣的元素能夠代表設計師”、“什么樣的朋友圈海報形式比較吸引人”等等。



          制定流程

          有了明確的問題和關鍵問題后,我們要做的就是將它們在頭腦風暴按步驟上提出來,讓大家跟著我們的節奏去展開腦洞,這也就是頭腦風暴的流程。一場頭腦風暴往往包含背景介紹、多輪腦暴、闡述想法、投票等環節,作為組織者需要詳細規劃每個環節的順序、時間,特別是需要控制總時長(盡量別超過一個半小時),預留中場休息的時間,畢竟大家很難長時間集中注意力。


          確定分工

          一般來說頭腦風暴里有三種角色,主持人、記錄員和參與者。參與者的職責不用介紹了。主持人的職責是帶著大家按節奏討論,記錄員的職責是記錄大家的想法和拍照,缺一不可。


          確定參與人員

          參與人員的數量一般在5-10之間,人數太少收集不到足夠的想法,人數太多討論效率低,耗時長。參與人員的身份需要根據你想解決的問題確定,如果是比較大型的項目,參與的人員需要多元化,把產品經理、程序員都拉進來,方便獲得不同視角的觀點,也能夠提高合作方的參與感。在我們上面舉的海報例子中,如果能拉應屆設計師加入腦暴,將非常有幫助。


          準備工具

          除了筆、便利貼、A4紙,我們還需要準備一份寫了每個步驟需要完成任務的PPT,幫大家明確任務。


          提前通知

          大家的工作都比較忙碌,所以請至少提前一天邀請大家參與頭腦風暴,并且簡單交代背景,提供一些資料,方便大家提前消化。


          進行中


          介紹背景

          首先要簡單跟大家介紹一下背景信息,以及接下來的大概流程,活躍一下氣氛,帶大家進入狀態,講段子也算是新世紀設計師的必備技能了。


          重量不重質

          頭腦風暴的目的并不是要獲得考慮得非常周全、詳細,能夠直接落地的方案,而是大量的想法和靈感。所以我們需要鼓勵大家在短時間(5-10分鐘)內輸出盡可能多的想法(四五十個不算多),不要太糾結可行性、成本等細枝末節的問題。


          延遲評論

          作為主持人,切記不要當場對參與者的想法做出負面評論,或者談論執行細節的事情,以免打擊參與者的積極性。如果有領導參與,要注意避免領導的威壓影響其他參與者打開腦洞。


          控制節奏與討論主題

          互聯網從業者大多是思維活躍的可愛人兒,開一個頭他們就能嘮上一天,所以主持人一定要留意時間,按照既定計劃,當大家偏題時引導大家回歸到對主題的討論上。


          中場休息

          如果整場頭腦風暴的時間超過半個小時,就需要給大家安排中場休息的時間,可以提前準備一些零食和飲料,幫助大家放松,以便接下來能夠集中注意力接著討論。


          記錄與拍照

          記錄員應該將大家的想法和每輪討論、投票的結果記錄下來,方便后面回溯和汲取靈感。拍照也是很重要的工作,這將為最后的設計提案提供寶貴的圖片資料,讓整個設計流程展現在決策方面前,提高說服力。



          結束后


          總結成果

          主持人應該將簡單總結一下大家討論、投票的結果,表達對大家百忙之中參與頭腦風暴的感謝,為下次拉人做情感鋪墊(開玩笑)。


          整理材料,同步結論

          會后需要及時對頭腦風暴的結果進行整理和分析,并將結論以郵件的形式同步給參與者(表達對參與者的尊重)和領導(同步工作結果)。整理時可以按可行性和效果兩個維度劃分idea,找出比較平衡的方向。


          寫在最后

          頭腦風暴是很有效但也很容易浪費時間的一種設計方法,開始前詳細規劃,進行中穩穩把控,結束后及時總結與同步,能夠幫助我們提率。

          另外,頭腦風暴只是為我們提供了靈感和方向,并不一定要選擇獲得票數最多的方案執行,還是需要根據實際做判斷,不要過于機械。

          文章來源:站酷    作者:失靈 



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


          如何為你的UI制定一套色彩系統?

          資深UI設計者

          色彩在UI設計中的作用:加深品牌印象與品牌感、引導用戶視覺凹增加易讀性、區分信息交互的狀態、營造氛圍傳遞熱度……

          前言

          不管是做 UI 設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但配色都是有講究的。

          一個設計作品呈現到用戶面前,第一眼進入眼簾的就是產品的視覺表現,而產品的色彩在其中起到了舉足輕重的作用,毫無疑問色彩搭配對于設計師來說是非常重要的。那么具體到實際項目中該使用什么怎樣的色彩,需要怎么做呢?

          用戶界面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制,界面可能會顯得花哨而沒有主次;但過于拘謹又容易使界面保守,難以激發用戶情緒,下面以Bee express項目的實例來理性推導制定一套色彩系統。

          切勿直奔主題

          做過設計的同學應該都知道顏色模式:RGB、CMYK、Lab 等等,這里不做過多的解釋了。另外每個顏色具有一定的性格特征和表達方式,而且都會有正反兩面。雖然每種色彩都有正向性格特征,但是我們在定位主體色之前一定要知道所選擇色彩的負面特征對企業是否會帶來負面的影響,

          開始之前我們需要了解在配色過程中需要避免出現的問題,如果你經常出現下列的問題,保證你在試用期內一次性就能拿到全部薪資,emmm……

          • 高飽和度的色彩會造成我們的視覺疲勞及視幻;
          • 灰部使用過多的配色會使界面有一種臟兮兮、霧蒙蒙的感覺,甚至心情低落;
          • 沒有規律且過多的配色。如果你不是做五彩斑斕的黑,建議6、3、1的色彩配比,輔助色不超過3種;
          • 熒光色。使用這種色彩的,建議跟色彩對視,看誰堅持的更久,除非是你贏了;
          • 太輕柔的顏色-沒有重點且輕飄飄的感覺;
          • 現在很火的新擬物化設計對于部分(沒有絕對)產品可能會造成信息識別性很差;
          • 不要將對抗色重疊,否則你會很浮躁。

          定位品牌色

          雖然設計是相通的,但是在不同的設計領域進行配色時,依然會存在巨大的區別。更換品牌的主體色,都不會是因為設計師自己的決定,而是公司在商業策略上優先做出了調整,然后通過品牌視覺上的變更將這個信息傳遞給消費者。

          Bee Express快遞、速遞柜業務為主,前期的主色及視覺形象以橙黃色為主,為了避免視覺跳躍性太大,以及后期IP形象(蜜蜂吉祥物)打造,本次品牌色彩升級在原有基礎上優化了色調,以保證后期產品的易用性和延展性,并利用最科學、最適用的方式推導出輔助色,以提升應用視覺的豐富性和感官體驗。

          express原主色:

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          為了不影響原有色調前期的視覺傳播,即在原有主體色的基礎上調整SHB的數值,讓色彩更具視覺沖擊力,在色彩襯托(字體、圖標)更清晰。

          • H(Hue:色相)
          • S(Saturation:飽和度)
          • B(Brightness:明度)

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          通過調整后的主體色也能看出,明亮清晰的主體色(品牌色)也更適合在界面中的運用,為信息傳遞、引導操作、品牌價值帶來更大的提升。

          • 信息傳遞:產品的首要目的是傳遞用戶所需要的信息,這就需要界面有清晰的層級關系,明確、舒適的閱讀體驗。
          • 引導操作:清晰合理的操作引導,讓用戶能夠準確地根據引導進行下一步操作。
          • 品牌價值:很多同學會忽略這一點,導致產品的界面與品牌關聯性差,整體界面沒有品牌感。

          根據主體色推理同色系

          同色系為統一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時可以讓界面保持色彩上的一致性,整體感較強,產生低對比度的和諧美感,給人協調統一的感覺。

          具體是指與品牌色 H(色相)一致,通過改變 S(飽和度)與 B(明度)變化產生的色組。分別往淺色/深色方向按均勻數據增減,各產生5個坐標值。

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          綜上能看出,使用同一色系即可完成一個項目,但是對于中大型項目來說實在是過于單調,沒有太多的層次感,因此我們需要多色搭配為輔。多色的輔助顏色可設定不同的任務屬性和情感表達,再搭配中性色黑白灰,能賦予更多的變化和層次。

          提取24色-鋪墊輔助色

          根據主體色 H(色相)為基礎,不斷地遞增、遞減 15,在 0-360 之間可以得出 24 個顏色,也就是將 360° 色環分割為 24 份,(24份在360°色環上,每一個色相的角度為15°),最終得到下圖24色。

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          選取輔助色

          輔助色需要滿足的兩個條件:

          和品牌色有明顯區分:避免所選輔助色感官上給用戶視覺區別與品牌色差距不大,傳遞的調性太過一致;

          不能過于突兀:根據色彩原理,互補色是最能與品牌色本色產生視覺感官對比的顏色,但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用,而不是反而讓整個版面顯得不和諧,所以選擇互補色的鄰近色作為輔助色,避免直接使用互補色。

          • 鄰近色:色相差值 15° 以內的顏色為鄰近色;
          • 類似色:色相差值 30° 以內的顏色為類似色;
          • 互補色:色相差值 180° 的顏色為互補色。

          基于品牌色可衍生出 3 個輔助色:一個與品牌色傳遞調性有明顯區分的類似色;兩個互補色的鄰近色。

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          類似色搭配:使用色相相近的顏色,頁面元素不會相互沖突,更加協調有質感。

          互補色搭配:選擇使用互補色,最佳搭配是一種作為主色,另一種用于強調。它們有著非常強烈的對比度,用在需要特別強調某個元素時會非常有效。

          視覺統一感官校準

          每一種顏色都有自己的「感官明度」,也就是發光度。根據現有的使用場景,類似色和互補色大都用在同層級的信息展示上,而當我們將最終得到的輔助色擺放在一起之后發現,雖然我們提取出的輔助色明度色值都一致,因為顏色本身自帶的感官明度屬性有所區別,導致視覺上會有明顯的明暗差別。需要通過發光度來進行最終的顏色校正。

          校準方式:依次在輔助色上疊加一層純黑圖層,將該純黑圖層顏色模式調整為 Hue(色相),就可以通過無彩色系下的明度色值,進行對比,使色彩視覺感官保持一致(青色和藍色屬冷色調,固需加深)。

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          全色系輸出

          根據上面同色系的明度、純度對比規則,對所有定義的輔助色進行明度和純度的輔助色彩輸出,最終得到輔助色色板。H(色相)一致,通過改變 S(飽和度)與 B(明度)變化產生色組。分別往淺色/深色方向按均勻數據增減,各產生5個坐標值

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          刪除最左側的3種同色系,因明度過低時,顏色已經非常接近于黑色,色相在肉眼上幾乎已經趨于一致。最后得到基于品牌色推導出的全色系色階色板。

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          如何為你的UI制定一套色彩系統?來看這個實戰案例!

          總結

          配色常常從確定主色開始,根據行業類型和視覺訴求的需要,選擇一種居于支配的色彩作為主調色彩,構成畫面的整體色彩傾向。然后選擇輔色,添加點綴色,最后按照色彩組合的原則完成設計中的需求。

          雖然有了以上的配色方式,但一套標準的色彩系統還會包含中性色規范、顏色的使用規范等等。相信解決了大部分的需求,剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法,如果想更加優秀,還需要進一步深入地去學習色彩理論知識,多看優秀的配色作品提升審美,總之要多看、多實踐和多思考。

          文章來源:優設    作者:能量眼球

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

          如何從三個方面,做好用戶隱私的體驗設計?

          資深UI設計者

          用戶隱私安全在產品設計中是很重要的一個環節,本文從用戶體驗角度切入,從匿名模式、減少永久性和減少公開性三個方面展開分析。

          我們先看?組來??優的2019年6?的調研數據:70%的美國?認為,與5年前相?個?信息變得更不安全。尤其是?學歷?收?群體。由此可??戶對個?信息數據的隱私擔憂?以往更甚。

          ?戶隱私安全很重要,涉及的范圍和?度也很多。本次的分析從?戶體驗?度切?,涉及如下三個??:

          • Incognito Mode匿名模式;
          • Reducing Permanence減少永久性;
          • Reducing Publicity減少公開性。

          匿名模式

          下圖是Google系App(Google AppChromeYouTubeandGoogle Map)匿名模式切換,從交互體驗上來說有如下?個特點:

          • 統?在右上?;
          • 可以便捷切換?匿名模式,反過來也很容易切回登陸狀態;
          • 匿名模式的狀態提示,例如YouTube 在匿名模式下在界?底部有?字提示「您 當前處于匿名模式」。

          如何從三個方面,做好用戶隱私的體驗設計?

          匿名模式不是最近才流?的功能,最早提供隱匿模式的是蘋果safari瀏覽器,早在 2005年就?持了匿名模式。Chrome瀏覽器在2008年就開始?持此模式。雖然由來已久,為什么到了2020年,匿名模式依然是國外互聯???趨勢呢?

          我們看?組數據:

          這是來?DuckDuckGo 2019年9?的調研(DuckDuckGo是美國的?款不記錄?戶?為保護?戶隱私的搜索引擎)。樣本來?美國、英國、德國和澳?利亞的成年??戶,共計3,411?的調研得出。各國?戶對使?搜索引擎的個?隱私安全?常在意(是否搜集個?的數據和記錄搜索?為)。

          2020年5?DuckDuckGo?均搜索次數為6200萬。對?看2019年11?底?均搜索次數4900萬,2018年10?是2900萬。

          最近?年的持續活躍度?幅增?證明了不記錄個?隱私的搜素引擎越來越受到?戶的?睞。

          國內,頭條、UC瀏覽器在搜索框輸?狀態也提供了「?痕瀏覽」??。

          不僅是搜索引擎領域,保護?戶隱私也成為Facebook最重要的戰略?向之?。Facebook CEO Mark Zuckerberg在2019年 F8開發者?會上喊出「THE FUTURE IS PRIVATE」。2019年3?Mark Zuckerberg發?,主題就是《聚焦于保護隱私的社交?絡》。

          如何從三個方面,做好用戶隱私的體驗設計?

          減少永久性

          我們先看國外社交媒體Stories(?故事)產品形態的流?。

          ?們總是對于所分享的內容永遠記錄在?上感到擔憂。Stories 24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享。

          Stories由Snapchat?創,由 Facebook發揚光?。早在2019年4?,Facebook+Messenger Stories, Instagram Stories?活?戶數就突破5億。 2020年2-3?LinkedIn,Twitter也先后宣布將上線類似功能。

          如何從三個方面,做好用戶隱私的體驗設計?

          減少公開性

          來??優的調研報告:41%的美國?經歷過?絡騷擾,最常?的就是在社交媒體上。23%的?戶最近經歷的?絡騷擾來?評論區的評論內容。27%的?戶經歷?絡騷擾后決定不再發布任何內容。

          如何從三個方面,做好用戶隱私的體驗設計?

          我們以限定評論互動的公開性為例:

          2020年5?Twitter上線了新的評論功能,可以限定誰可以回復帖?的功能,提供了三種選項:誰都可以評論,只有被關注者可以評論,只有被提及者可以評論三種公開度的限定。

          Instagram也在測試「評論限制」新功能,批量屏蔽/限制評論。?前已經上線的?個例?:?戶(評論發布者)如果發布的評論含有攻擊性敏感詞,發布前伴有提示,提醒評論含有攻擊性敏感詞是否真的要發布。

          如何從三個方面,做好用戶隱私的體驗設計?

          注重隱私提供僅好友可?/僅??可?/僅作者可?/等多重維度的隱私設定有助于?戶更安?地參與互動。

          另外?個例?是付費頻道會員:付費頻道會員-限定頻道的公開性讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員、會費的收?,形成「忠實粉絲」社區,有助于內容?態的社區化建設。

          我們主要看YouTube的頻道會員案例:

          YouTube有兩種會員模式。?種是YouTube整個平臺的付費會員,去?告,看原創美劇影視,消費?樂,可下載內容的模式。第?種模式是Youtuber個?頻道付費會員,吸引忠實粉絲加?。我想說的就是第?種。

          如何從三個方面,做好用戶隱私的體驗設計?

          為什么?V?紅有意愿開通頻道會員?

          除了獲得忠實粉絲收?變現的商業價值以及付費頻道會員可以為忠實粉絲提供各種專屬功能,背后也和?紅?V對個?隱私顧慮有關。

          ?紅?V在完全公開的社交?絡上需要始終保持?夠克制謹慎,避免引起爭議。但在忠實粉絲付費頻道專屬會員群中,?紅?V會減輕隱私顧慮,更加回歸?我。

          ?如在頻道會員中發布更多與個??活相關的內容,表達更多不便在完全公開的社交?絡中的想法和感受等,因為忠實粉絲通常更具包容度,更不容易引起爭議。

          YouTube頻道會員費?可以從三種會費(按?)區間選擇,?持多選:

          • 低階 Low Levels $0.99~3.99;
          • 中階 Medium Levels $4.99~14.99;
          • ?階 High Levels $19.99~49.99;

          頻道會員功能在2018年開始測試,?向粉絲數過10萬的YouTuber開放。

          以上綜述,我們可以說:

          1. 匿名模式:

          雖然匿名模式由來已久,但仍然是當前的??基本?戶體驗設計趨勢,尤其是匿名模式的切換便捷性?常重要。

          2. 減少永久性:

          Stories?故事24?時消失緩解了?們的隱私顧慮,這讓?戶更安?地?然分享,已經成為國外社交媒體平臺的必備功能,Facebook, Instagram平臺的最主要、最具影響?的功能之?。

          3. 減少公開性:

          ?戶總是對在社交媒體平臺發表評論有所顧忌,限定評論的公開性能夠有助于促進?戶發帖表達,其他?戶也可以更安?地參與互動。

          付費頻道會員可以限定頻道的公開性,讓內容創作者減輕隱私顧慮不僅能獲得?告收?,也能得到來?會員會費的收?,形成「忠實粉絲」社區,有助于內容?態的社區化建設。

          從UE?度,我們可以為頻道會員提供專屬身份設計例如專屬徽章,專屬表情等。

          THE FUTURE IS PRIVATE, 注重?戶隱私的體驗設計越來越重要!

          文章來源:優設    作者:

          百度MEUX

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

          用一篇超全面的文章,幫你掌握服務設計思維

          資深UI設計者

          在當前的行業背景當中,設計師了解交互視覺就足夠了么?NO!JDCD今天帶來服務設計思維,分享好的設計將具備哪些技能點~

          為什么UED要加入服務設計思維

          隨著整個行業的融合和發展,設計師職責的邊界越來越模糊,線上線下的融合,設計的鏈路也越來越長。一個優秀的設計師,不僅要懂得視覺、交互,還要懂產品、運營、用戶研究等。

          因此設計師輸出的產物不再是單一的設計稿,也許是一個優化的建議,一個方向的描述,或者思路的呈現等等。好的設計師應該是在全鏈路的各個環節,都能夠有的放矢的輸出對業務有價值的產物,并最終推動業務達成目標。

          今天我們來聊聊服務設計思維~

          什么是服務設計

          服務設計作為一個融合性的學科,通過對人、物、行為以及環境和社會之間系統關系的梳理,以用戶為中心,圍繞用戶重新規劃組織資源,促進組織運作,提高員工效率,最終提升用戶的體驗。

          概念讀起來有些生硬,我們簡單來說:

          首先舉個經典的栗子~

          如果您想喝咖啡,有兩家咖啡店挨著,咖啡味道一樣,價格一樣,你會選擇哪家咖啡店消費呢?理由又是什么?同樣的兩個咖啡店,要做一款店面銷售APP,我們來看看兩家咖啡店是如何做的~

          咖啡店A的做法:

          召集設計師埋頭苦干了幾個月,然后交付給顧客,結果顧客在這個APP里并沒有得到想要的。

          咖啡店B的做法:

          與顧客交談,做研究和調研。觀察顧客們在喝咖啡前、喝咖啡時、喝完咖啡后都做些什么,并據此畫出用戶體驗地圖,找到他們在體驗地圖中的高潮和低谷點,以此找到服務的機會點,再開始尋求解決方案。

          同時,團隊找到利益相關者,比如店員,聽聽他們平時遇到的問題,聽聽創始人對咖啡店最初的愿景,還有市場團隊、供應商等人…這些利益相關者們在一起開一個工作坊,他們確立明確的商業目標,開始設計出一些概念,并且向已有的顧客做測試分析。他們做了技術分析,并繪制了服務藍圖,確保中后臺系統能支持概念的落地,他們設計出了顧客喜愛的APP。

          以上兩家咖啡店的案例呈現中,用戶接觸到的服務產品最終使用效果則大相徑庭。對于咖啡店的客戶來說,咖啡店B就是做到了服務設計。

          為了加深大家理解,再舉個例子~

          假設你家燈泡壞了,你要換燈泡,需要個梯子。

          此時產品設計的工作就是設計這個梯子,怎么樣才能輕便好用,美觀大方。但是服務設計要做的是思考需要個梯子換燈泡這個需求,或者是燈泡壞了需要修這個需求,基于這個需求/問題,服務設計給出的解決方案可以是:

          你需要一個梯子,但不需要在家里備一個

          • 有一個平臺可以提供租用梯子,按小時計費。
          • 社區(物業/社區自治組織)提供租/借的梯子(共享基礎工具)。
          • 梯子分享平臺,我用了你家的梯子,你可以用我家的電鉆。

          你不需要一個梯子,你只想修好你的燈泡

          • 買燈泡的時候便附帶了修燈泡的增值服務
          • 處理修燈泡等雜事的人員雇傭平臺
          • 你平時在社區做義工,此時也會有社區義工前來幫你修。

          以上這些方案如何選擇,如何完善,誰來買單?誰來運作?具體實現方式、傳達方式,包括產出方案,都是屬于服務設計的內容。

          服務設計五大原則

          為了更好的應用服務設計,設計師們需要了解服務設計思維的基本原則,并在打造服務時,聚焦服務設計思維的原則。輔助一些工具、方法去支持和實現原則基礎上的服務設計。

          1. User-centered 以用戶為中心

          以用戶為中心,服務需要從用戶的眼睛來看世界。無論是服務還是產品,其本質最終都是為了解決用戶的問題,因此我們必須始終貫徹以用戶為中心的思想,這是我們所有工作的基礎。

          工具1:用戶畫像

          在產品開發或創建服務的早期階段,需要首先明確:用戶是誰?他們的需求是什么?為什么會選擇我們的產品?理解用戶的第一步是創建用戶畫像。

          用戶畫像基于群體的真實信息,由多維度數據組成,整合所有用戶群體信息的集群。除了人的自然屬性,用戶畫像也會含有如生活習慣、行為特征等人的社會屬性。汲取真實的,具有共同點的用戶信息,作為多維度數據。

          這類數據最終可以代表一類用戶群體。用戶屬性在一定情況下可能發生改變。

          例如,因工作原因更換居住地,飲食習慣的改變,網購習慣從化妝品變為母嬰用品等。用戶畫像是動態變化的過程,需要不斷迭代管理用戶畫像。

          工具2:典型用戶

          典型用戶又被稱為「真實虛擬人」(real fake man),因為盡管人物是虛構的,但它背后的動機和需求是真實的。

          典型用戶越具體、特征越詳細,我們想要獲取的那個「終極用戶形象」就會越清晰真實!明確典型用戶和使用場景的關聯,避免孤立使用典型用戶,脫離用戶場景。

          我們通常將典型用戶檔案打印成板或海報,方便整個團隊分享。復雜產品或服務的典型用戶會有多個,代表多種不同類型的用戶。

          比如,網購平臺的典型用戶從職業和年齡的維度,可能會有商務精英、職場小白、在校學生、空巢老人、全職太太等。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具3:同理心地圖

          同理心地圖通過多維度(所想、所感、所聽、所看、所說)描繪更加生動的用戶形象,便于跨領域團隊建立對目標用戶的同理心,從中得到意想不到的洞察。

          同理心地圖可針對特定用戶群來描述:用戶的想法和感覺(think&feel)。

          • Hear-用戶聽到了什么。
          • See-用戶看到了什么。
          • Say&do-用戶說了什么和做了什么。
          • Pain-用戶的煩惱與痛苦。
          • Gain-用戶真正想要的東西與價值。

          使用這個工具的關鍵在于要有同理心,框架只是輔助思考。同理心不是與生俱來的,但可以訓練得到。培養同理心的最好方式是帶入真實情境中,用身體與大腦去參與、模仿和感受。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》——同理心地圖以媽媽使用冰箱為例

          工具4:影子計劃

          影子計劃即像「影子」一樣伴隨用戶進行觀察,是對用戶體驗產品/服務的結構化觀察,主要用于新產品/服務的消費者研究領域,通過觀察用戶使用某些產品或服務時的情緒、肢體語言、節奏、行為模式和時間等信息來全面了解用戶。

          工具5:AEIOU觀察框架

          AEIOU是整理觀察記錄的框架工具,通常會在觀察時使用表單直接記錄,可以和影子計劃結合使用。

          • A-活動activity:人們為實現某一目標而實施的一系列行為。
          • E-環境environment:活動發生的場景。例如周遭環境的屬性、功能、特點、氛圍。
          • I-互動interaction:人與人、人與物、人與空間,或者人與數字之間的互動。
          • O-物品object:涉及物品。環境里有哪些物品?和用戶活動的關聯是什么?
          • U-使用者user:用戶

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          2. Co-creative 共創

          服務設計所解決的是一項復雜的問題,它沒有正確的答案,只有最優解。如何找到最適合路徑?讓服務提供者和使用者以及不同的利益相關方,共同參與設計和創造的過程。借助不同背景、不同職能的人不同維度的思考,共同探索最優解。

          共創,無疑是服務設計最佳的工作方式。

          工具1:瘋狂發想法

          人與動物或最好的人工智能之所以不同,是我們人類具備將「是什么」(what is)引導至「如果什么,將會怎樣」(what if)的能力。瘋狂發想法就是給挑戰一個不同的前提,在這種背景下思考更多的解決方案。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具2:頭腦風暴圖

          如果您的思路還沒有被充分打開,還有另外一種常用的方法可以幫你拓展思考,那就是頭腦風暴圖。

          頭腦風暴圖有九種角度的思考方案:替代法、借鑒法、逆向法、組合法、改進法、拓展法、消除法、轉換法、重組法。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具3:世界咖啡

          世界咖啡的主要精神就是跨界。不同專業背景、不同職務、不同部門的一群人,意見互相碰撞,激發出意想不到的創新點子。人們很容易被自己的專業和經驗所限制,公司也很容易被既定文化或價值觀所限制,同構性越強,越不容易產生新的點子。

          世界咖啡讓參與者從個人固有風格、學習方式和情感智商等維度中解放出來,用新的視角看世界。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具4:DVF篩選法

          共創最后一個步驟也是最重要的一個部分是篩選,在眾多的概念中發現真正的滄海遺珠是一個巨大的挑戰。

          我們可以從用戶、商業和技術三個維度來篩選概念,即DVF篩選法。

          Desirable用戶合意性,Feasible運營/技術可行性,Viable商業可行性。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          3. Holistic 整體性

          用戶體驗就像一場有計劃、有組織的精心設計的演出:它有高潮,也有低谷,它環環相扣地在講述一個故事,而用戶就身在其中。把握用戶的情緒和服務的節奏尤為重要,更重要的是由點及面地全局思考,保證這個故事的整體性。

          工具1:用戶體驗地圖

          用戶體驗地圖梳理了典型用戶從初次了解服務到形成契約關系的完整過程,站在用戶的視角再現用戶場景和服務流程的體驗感受。

          此工具很實用,下圖是以一次部門內部設計分享演講為例,站在聽眾的角度設計演講的節奏、內容、互動等,關注聽眾的感受,才能讓這次分享演講達到想要的效果。

          工具2:場景卡

          場景卡用于描述不斷重復發生的問題,其作用在于從場景中獲得洞察,以及未來服務的機會。它和用戶體驗地圖的區別是它專注于單一的場景,可以更細微地了解用戶處境。場景卡經常和用戶體驗地圖搭配使用,用來展開思考重要觸點,甚至有時會融入用戶體驗地圖中變成一部分。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具3:服務供給地圖

          服務供給地圖(offering map)是用來分析可提供給用戶的服務。可視化的方式可以更好地闡述想要提供的服務。由于用戶需求(needs)和服務端的供給(offering)有著直接對應的關系,在表達服務概念時,可以同時呈現用戶需求和服務供給。此時服務供給地圖通常需要展現邏輯和層次,因此多用信息架構圖表現。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          4. Sequencing 有序性

          服務需要有邏輯、有節奏地視覺化展示出來。服務是在一段時間內的動態過程,時間線對用戶非常重要。服務的節奏也很重要,會影響用戶的情緒。

          工具1:故事版

          故事版是以用戶為主要角色,以爽點、痛點或者產品、服務與用戶的互動為劇本發展的「場景分鏡頭」,是講故事時的重要道具。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具2:桌面演練

          如果說故事版是平面示意圖,那么桌面演練(desktop walkthrough)就是個三維故事版,能夠隨時補充新的想法,更快速的移動和判斷。它可以看成是幫助設計者模擬端到端用戶體驗的互動式的迷你劇場。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          工具3:戲劇原型

          戲劇原型是用表演的形式,輔助一些簡單的道具來模擬搭建服務場景,展示服務內容,把服務體驗概念帶入日常生活場景的檢驗方式。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》

          5. Evidencing 有形化

          無形的服務需要被適時展現出來。服務很多時候是在后臺默默進行的,用戶無法感知。

          工具1:服務藍圖

          服務藍圖能幫助設計者視覺化呈現服務時如何被執行與運作的。用戶體驗地圖關注用戶在每個服務互動觸點所經歷的事情與感受,服務藍圖更注重服務中的各個要素有沒有被正確地設計和整合在一起,來描述整體的體驗流程。

          △ 圖片摘自:《服務設計驅動的革命:引發用戶追隨的秘密》-共享汽車服務藍圖

          工具2:服務缺口

          服務缺口是用戶對服務的期待或需求和實際接收到的服務之間的落差。服務缺口是一個分析模型,可以用來探討服務發生的原因。

          工具3:利益相關者地圖

          利益相關者地圖是以圖畫來視覺呈現和理清所有利息相關者之間的方法。與服務有關的各個群體因為共同的利益聚在一起,服務提供方在解決問題時就能夠善用資源。對利益相關者來說,綜合全面的概述是改善服務或創新嘗試所必須的。

          △ 圖片摘自:利益相關者地圖 Stakeholders Mapping

          服務設計與用戶體驗設計的區別

          體驗設計關注觸點和人,而服務設計則是由表及里,將觸點、用戶體驗和組織中后臺支持都規劃在內,體驗設計是服務設計的起點。

          △ 圖片摘自:服務設計又來了!服務設計強調的是「幸福感」

          另一個區別就是服務設計的收益者是雙方(提供者和接收者),而用戶體驗則聚焦于用戶。

          說到這里,可能部分同學還是沒有記清楚服務設計的和用戶體驗設計,其實服務設計包含了用戶體驗設計,也包含人性化設計或者情感化設計等等。如果一個設計只有接收者單獨受益,那不能稱之為服務設計,只能說是針對用戶的用戶體驗設計。

          個人感悟

          世界變化如此之快,你還站在原地嗎?我們時刻走在學習的路上,不斷地武裝自己。遇到新的概念或者方法論,要先深入了解并進行獨立思考。實踐才能出真知,多應用到自己的項目中,結合項目進行實踐和反思,讓我們在設計的路上走得更遠!

          敲黑板劃重點,服務設計思維,我們講了這么多~分享出去跟小伙伴一起學習吧,你也要記得來復習哦~

          文章來源:優設    作者:Design with CloudAI

          2020年設計師應該掌握什么樣的設計思維?

          資深UI設計者

          你的設計是否能被理解?為什么設計的價值總是不被人認可?本文將從深入淺出,帶你了解全局性設計思維的真正力量。

          導讀

          你的設計是否能被理解?為什么設計的價值總是不被人認可?

          設計不僅僅只是帶來美感,好的設計能夠為產品、公司甚至整個社會創造巨大的價值。而在創造好的設計這個過程中,最重要、也是最容易被人忽視的,便是設計思維。

          何為全局性設計思維?它能夠為設計師帶來哪些價值?本文將從設計的本質出發,結合設計的發展趨勢,帶你了解全局性設計思維的真正力量。

          目錄

          • 我們為什么需要設計思維?
          • 下一個時代在哪里?
          • 互聯網「下半場」,從大勢中看變化
          • 設計思維的轉變,差異與融合
          • 探尋全新的思維方式
          • 全局性設計思維概述
          • 如何運用全局性設計思維?
          • 以全局性設計思維,構建設計體系

          這篇文章的主要內容,來自我在 19 年底的一個沙龍分享。整個分享以設計思維的角度入手,講述了全局性設計思維的來源和重要性,以及我是如何在不同產品線上去運用這種設計思維的。

          何為全局性設計思維?為什么要講這種思維方式?

          這是我一直在探索并實踐的一種設計思維。從最開始的理論雛形,到各種項目的實踐,不斷進行修正和完善,最終形成了一套卓有成效的思維方式。通過這種思維方式,我逐步幫助產品解決了許多長期性的問題,并最終構建了各種不同類型的設計體系。最終,隨著品牌矩陣與產品體系的落地,形成了一個完整的網易智慧企業設計體系。

          △網易智慧企業設計體系

          因為篇幅原因,本篇文章將重點從理論層面闡釋全局性設計思維的導論、價值及使用方式。而具體的實戰案例,我之后將會以另外幾篇單獨文章的形式進行展現,并詳細講解在設計過程中的一些細節與過程。希望能夠幫助大家更深入地去理解如何根據不同的場景正確地去使用這種思維方式。

          未來可能會包含以下幾篇文章:

          • 全局性設計思維 | 如何打造強大的品牌體系
          • FishDesign 組件庫 | 從零到一構建企業級 UI 組件庫
          • 全局性設計思維 | 如何構建事業部級大型設計體系

          當然,目前的設計體系僅僅只是一個開始,未來還有很長的路要走。

          希望本文能夠為你帶來小小的啟發,讓設計思維幫助你更好地發揮設計的價值。如果你對某一方面特別感興趣,可以直接跳到這一章進行閱讀,無需浪費過多時間。如果你有任何疑問,也歡迎隨時與我交流。

          一個習慣性的序

          這次把序放在了第二段,這樣子看上去就不那么不務正業了哈哈。當然,寫序更多的是為了記錄生活,希望每一篇文章不僅僅只是傳遞知識,更是一篇有溫度的文章。

          整個 2019 年中,經歷了很多事情,人生觀也隨之發生了些許變化。

          從并肩作戰的同事的不斷離去,到逐漸需要考慮團隊的發展。從單打獨斗闖天下,到思考如何讓整個團隊更加優秀、如何建立完善的設計體系等等。

          角色、心態、責任,以及如何坦然地面對自己。

          活在當下,用心生活。這是我一直當作座右銘的語錄,也是我希望給自己的承諾。總是試圖去嘗試這種狀態,但卻異常艱難。像我這樣的人,看上去總是「積極向上」,總是「規劃未來」,總是希望事事完美,強迫著每個細節的完善。但不知不覺中,人生好像開始進入了「自動駕駛」的模式,活在了過去的思索中,活在了未來的規劃中,唯獨對于當下異常麻木。

          這并不是我想要的生活,我開始嘗試做出改變。

          偶然間,通過一些書籍,我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發生的每一件事情。雖然只是很淺顯的境界,但正念依然對我產生了巨大的影響。我開始重新地審視自己的人生,審視自己的生活狀態。

          △ 網易蝸牛圖書館:與快樂的小伙伴們

          這種感覺,就像再次的呼吸了新鮮空氣一樣。

          我們其實只存在于當下的時空中,過去和未來,并非真實存在的事物?;叵胍幌拢覀冇卸嗑脹]有像小時候一樣,完完全全、毫無雜念地享受在當下的時光中了?

          用心活在當下,平靜地接納一切發生的事物,這種感覺真是太美好了~

          我們為什么需要設計思維?

          對于設計師來說,什么能力更為重要?是設計這門「技術」本身,還是思考如何去設計的「思維」能力?

          對于不同的設計師來說,一定會有不同的答案。

          這兩種能力本身并不矛盾,他們相互影響,互相促進——就像「術」與「道」之間的關系。設計能力決定了設計作品的輸出質量,而設計思維則決定了你思考問題、解決問題的能力。

          然而,在現實的大環境下,「術」的重視程度遠高于「道」,造成了很多設計師與日常業務的「分離感」。以至于,多數的設計師,無法將自己的設計能力有效地用于日常業務中;抱怨他人不理解設計,也因此錯失了許多機會。

          重視設計美感,其實并沒有問題。視覺是最直接的表現方式,我們從最初開始喜歡這個行業,并最終成為設計師,大概都是因為如此。包括我個人,也是美感的追求者,常常為了幾像素的細節,調整無數稿。也常常沉浸于自己的作品無法自拔。

          但是,美感之后,設計還需要什么?

          路易斯·沙利文曾講過:「形式追隨功能」。而功能存在的意義,則在于解決問題。視覺的形式、美感,很多時候只是包裹在外側的表層,而解決問題才是設計真正的核心。視覺的表現,一定要遵循解決問題的方式,向用戶傳遞恰當的信息,最終引導用戶以此來解決問題。

          因此,我更希望更多的設計師,在追求美感的同時,能夠重拾設計思維本身,尋找設計最根本的價值。

          我們其實可以站得更遠一些。學會去理解事物,學會用設計去解決問題。再以此為基礎,通過你的設計能力去塑造它、點亮它,讓它成為一個真正美好而又有價值的設計。

          而設計的價值,將會成為你的價值。

          下一個時代在哪里?

          互聯網時代中的數字產品設計,需要什么樣的設計思維?或者說,當下我們需要什么樣的設計思維?

          這個問題的答案,好像一直在變。

          互聯網本身便是一個新的形態,1989 年「萬維網」發明,1996 年中國引入互聯網,到今年已經有大約 24 個年頭。我們經歷了不同的互聯網時期,而「設計」的概念也一直在變化中。

          Internet 1.0 PC 互聯網時代。在這個時代,我們將大量的信息虛擬化,并通過網絡進行信息傳遞。而我們的「設計師」們大多被稱為「美工」,我們的「設計思維」,便是將信息變得更好看。

          Internet 2.0 移動互聯網時代,或者稱為消費互聯網時代。自從 2007 年喬布斯發布第一代 iPhone 之后,疊加 4G、wifi 等技術,手機成為日益重要的終端,世界逐漸進入了移動互聯網時代。伴隨著 iPhone 與其應用的出現,喬布斯讓所有人理解了「用戶體驗」的重要性。我們不再是「美工」,我們變成了「UI 設計師」、「交互設計師」。而這個時代,我們的設計思維變成了「用戶體驗思維」。

          那么,下一個時代在哪里?我們的設計思維又將如何轉變,才能適應下一個時代?

          互聯網下半場,從大勢中看變化

          1. 紅利消失、增長觸頂,互聯網下半場到來

          最近幾年,我們已經能夠明顯地感知到——互聯網的「寒冬」真的來了。隨之而來的,便是互聯網的發展方向似乎也正在發生變化。于是大約從 2017 年開始,互聯網圈內逐漸出現一個新的名詞——互聯網「下半場」。人們普遍認為,中國的互聯網將會由消費互聯網時代進入下一個時代,即互聯網下半場。

          我并不完全認同互聯網「下半場」的稱呼。互聯網本身是一個年輕的行業,中國互聯網「下半場」,其實更像是互聯網發展方向轉變的標志。

          因此,我們認為的下一個時代的方向,也許將會是 Internet 3.0——即產業互聯網時代。

          互聯網為什么必須要進入下一個時代?

          對于互聯網企業來說,一方面在成本端,隨著人口紅利消退,勞動力價格上升,企業的成本將逐漸升高,倒逼管理者使用系統和工具來提率;另一方面,在收入端,野蠻增長的時代結束,增量經濟轉向存量經濟,紅利經濟轉向效率經濟。

          在「成本」與「效率」的雙重壓力下,再加上整個市場經濟的下行周期,整體經濟出現下滑,而一些依靠融資的互聯網公司將難以為繼。因此企業不得不尋找方法來提升效率,降低成本——而這正是企業級軟件(ToB 產品)最擅長的地方。

          因此,在互聯網寒冬之下,ToB 市場便理所應當地開始被重視。

          讓我們縱觀整個中國市場的發展,互聯網的興起雖然促進了消費領域的蓬勃發展,但產業領域的發展則因此受到了巨大制約。中國率先從消費端、從第三產業開始數字化,然而在第一、二產業的數字化進程似乎并不是很快。一個重要的原因是,人口紅利促使了消費互聯網的快速發展,而這種紅利讓人們忽視了產業互聯網的重要性。

          在寒冬之下,我們終于發現,消費互聯網蓬勃的基石,正是底層堅實的產業互聯網。產業互聯網如果不能得到有效的發展,則整個市場經濟將無法更進一步地發展。

          因此,產業互聯網時代的到來,是中國互聯網發展的需要,也將是大勢所趨。

          2. ToB市場將迎來機遇

          產業互聯網的發展,需要依托 B 端領域的發展,并逐步融入并帶動整個產業進入互聯網時代。那么,B 端產品在中國目前處于一個什么階段呢?

          對于整個中國的 ToB 行業發展現狀,大多數的人并沒有一個清晰的概念。盤點中美上市的科技公司會發現,美國 toC  領域與 toB 領域市值之比是 6:4,但在中國這個數字是 20:1。

          雖然互聯網的整體環境不同,但中國 ToB 行業的發展,顯然是落后太多了。于是乎,2018 年開始,BAT 大舉布局,PE、VC 加速進場——中國 B 端產品已經逐漸進入必須發展的時候了。

          中國市場已經坐擁全球最發達的消費互聯網體系,而產業互聯網的發展卻嚴重滯后。

          同時,對比 B 端中云計算領域的 IaaS、PaaS、SaaS 三層架構,全球市場中 SaaS 占據了 52.5% 的份額,在中國卻是 IaaS 分走了最大的蛋糕,占比達 61.2%。中國市場 VC 的投資總額已經與美國相當,在 SaaS 領域美國企業獲得了全球 70.1% 的融資,而中國只有 11.7%。

          因此,在互聯網下半場,相對于 ToC 行業的觸頂,ToB 行業將會迎來歷史級的發展機遇,隨之而來的將會是產業互聯網時代的逐漸到來。而在整個 B 端產品的類目中,SaaS 產品作為企業級軟件中最集成的產品,也將隨著這股浪潮迎來爆發式的增長。

          什么是 SaaS 產品?很多同學并沒有接觸過 B 端行業,平時用到的也都是 C 端產品,所以對 B 端產品的了解比較少。在 B 端行業最熱門的云計算領域中,目前普遍會分為三層架構。SaaS(Software as a Service–軟件即服務);PaaS(Platform as a Service–平臺即服務) ;IaaS(Infrastructure as a Service–基礎架構即服務)。

          附:云計算領域,三種不同的架構與對應的服務。

          PaaS 基于 IaaS 實現,SaaS 的服務層次又在 PaaS 之上,三者分別面對不同的需求。越往上層,產品的集成度越高,提供的服務也就越豐富,而用戶所需要的自行解決的東西就越少。而最頂層的 SaaS 產品,便是用戶可以直接購買并使用的云端產品。

          我們為什么要了解這些趨勢?

          因為一個新的時代,對應一場變革,也將成為一次新的機會。不管是 SaaS 產品還是其他 B 端產品,都將在新的時代中逐漸得到重視。而 C 端產品的發展策略,也將迎來新的變化。對于許多設計師來說,這將會是一個新的機遇。

          順勢而為,方能乘勢而上。

          設計思維的轉變,差異與融合

          那么,在逐漸到來的產業互聯網時代,設計師需要注意哪些東西?設計思維又將進行如何轉變?

          產業互聯網時代,意味著 B 端產品將得到重視,并與 C 端產品逐漸趨于平衡。因此,了解設計思維的變化,我們首先要從 B 端與 C 端產品之間,在產品設計與產品策略之間的差異性說起。

          1. 服務對象的差異性

          從服務對象來看,C 端產品的服務對象是人,產品的目標是針對人們生活方式進行的變革、升級。而 B 端產品的服務對象則大多是企業,目標是幫助企業進行商業效率的提升,從而產生價值。

          服務對象的差異性,決定了產品在發展策略也將存在著較大的差異性。

          2. 產品「打法」上的差異性

          從宏觀的打法上看,消費互聯網時代會更求「快」,而產品互聯網時代則會更偏「穩」。

          C 端產品的服務對象是人,而人的需求在個體差異性上相對變化較小,這就決定了 C 端產品通常都擁有廣闊的用戶市場。

          因此,消費互聯網時代就像是資本在遼闊平原的角逐,長驅直入。講究快速占領市場,不斷地試錯、不斷地調整。從團購到直播,從打車到短視頻領域的興起,再到最后的單車大戰落幕。消費互聯網時代的每一次風口,都伴隨著各種「游擊戰」式的競爭。入場速度、快速調整能力、資本深度,都直接影響了最后的結果,而最終的結果也往往是勝者為王,敗者將快速地被市場淘汰。

          B 端產品的服務對象是企業,而企業間的需求差異性則非常巨大,這就決定了 B 端產品通常需要較強的縱深能力。相對應的,其用戶群體在總量上就比較小、但也相對穩固。

          因此,產業互聯網就像在崎嶇叢林的蹣跚前行,漸次演進,如同一場曠日持久的拉鋸戰。一方面,產業互聯網的鏈條非常長,需要長期的深耕、積累才能逐漸站穩腳跟。而這也導致了產品的壁壘足夠深厚,同類產品在短期內無法快速跟進。另一方面,企業間的差距需求的差異性非常大,因此產業互聯網存在非常多的細分市場,不同的產品各自在不同的賽道中深耕。而其最終的結果往往是百花齊放,各自盛開。

          3. 整體行業的協同發展

          雖然整個市場都不斷地強調——ToC 增長觸頂,ToB 是一片藍海。但這并非是「取而代之」,而是逐漸走向整體的「協調發展」。中國 ToB 的發展的一個重要根基,其實是「中國擁有世界上最成熟的消費互聯網體系」這一巨大的優勢。

          因此,ToC 在很長的時間內,仍然會是互聯網的主力,而 ToC 市場的轉型,也將有賴于 ToB 產品所提供的服務。

          而隨著中國將「互聯網+」政策上升為國家戰略,更是明確了以互聯網帶動傳統產業的發展方向。因此,互聯網的下半場,即產業互聯網時代的最終形態,將是互聯網與傳統行業的「融合式發展」。

          ToB 產品將會成為帶動互聯網下一輪發展的核心驅動力。一方面幫助 ToC 領域完成轉型,進入更健康、更穩健的發展階段;另一方向,ToB 領域賦能傳統產業與互聯網相融合,并最終完成產業升級。

          4. 產品形態的融合與趨同

          整體產業的融合趨同,意味著產品的特性也將互相融合。一個很重要的現象是:C 端產品逐漸變得不那么 C 端了,而 B 端產品也越來越變得不像 B 端了。

          比如 C 端產品的主流賽道中,隨著頭部產品的賽道日漸趨于穩定,其產品體量也因為業務擴展而不斷增加。同時,因為產品體系的逐漸形成,為了服務更多的 C 端用戶,會有越來越多的 B 類用戶進入平臺,而為了滿足 B 類商家的需求,產品的 B 端屬性變得越來越強了。

          而隨著 B 端產品的不斷受到重視,原先不被重視的產品 UI、用戶體驗也逐漸在 B 端產品中得到加強。B 端用戶雖然服務于 B 端,但使用者終究是人。而隨著競爭的不斷加劇,原來的「重功能、輕體驗」思路逐漸式微。我們逐漸發現,許多 B 端產品長得越來越像 C 端產品了,甚至在 UI 和體驗層面做的與 C 端產品不相上下。

          因此,隨著產品屬性的融合趨同,意味著設計思維勢必會與消費者互聯網時代存在差異。而我們的設計思維將不僅僅局限在誕生于消費互聯網時代的「用戶體驗思維」。我們需要更新的、更廣闊的設計思維,以滿足下一個時代的產品發展需要。

          那么,新的思維是什么?它將從何而來?

          探尋全新的思維方式

          從整個市場的協同發展,到產品形態的融合趨同。那么,我們的設計思維需要如何進行相應的變化?是同樣進行「融合趨同」,還是另辟蹊徑,尋求新的視角?

          1. 關鍵詞提取

          首先,不管設計思維如何變化,它一定需要同時滿足兩種產品設計思維的特性。通過前文的分析,我們可以在產品設計特性的維度,提取各自的關鍵詞進行分析:

          產品體驗:誕生于消費互聯網時代的用戶體驗思維,在產業互聯網時代依然是產品設計中最重要的部分。無論是 C 端還是 B 端產品,用戶體驗必然是產品的核心競爭力,只有足夠好用、好看,產品才能獲得更多用戶,最終獲得商業上的成功。

          靈活性:在消費互聯網時代,在激烈的競爭中,C 端產品的靈活性的打法對于產品的突圍至關重要。而未來的 B 端產品競爭將會加劇,這就需要 B 端產品也逐漸需要較強的靈活性。

          成長性:產品的發展必將伴隨著不斷的變化,特別是具有一定體量之后,產品設計的成長性將至關重要。因此,產品的設計是否能夠預見未來發展,滿足不斷變化的產品形態,伴隨著產品不斷地成長,也將成為產品是否能夠持續獲得成功的關鍵因素。

          產品效率:因為產品服務對象的關系,B 端產品一直是產品效率的代名詞。而在人口紅利消失與經濟下行的壓力下,產品效率將成為所有企業關注的重要因素之一。產品的效率不僅影響著企業的成本,也是產品競爭力的重要體現。

          這四個關鍵詞,將會是我們在未來所需要關注的四個重點關鍵詞。越是往左,則「C」屬性越強,因為它更多地從用戶的角度出發,更關注用戶體驗。而越是往右,則「B」屬性越強,因為它更多地從企業的角度出發,更關注企業的長期發展。

          2. 跳出單一層面,尋求新視角

          在四個關鍵詞中,我們會發現,特性越是靠右,其所需要的整體性就越強。要滿足靈活性,就需要用戶體驗與產品策略相關聯。要滿足成長性,則要進一步結合底層的開發能力。而產品效率的提升,則需要產品的設計與不同層面都有著緊密的耦合。

          在互聯網設計發展的過程中,我們從單點只關注視覺表層的「美工時代」,逐漸發展為關注線性的「用戶體驗思維」。在對于產品用戶體驗層面,確實有著長足的發展。

          但是,單一層面的用戶體驗思維,在逐漸成熟的互聯網時代中,逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面,我們似乎無法對產品形成更大的影響力,也難以為產品帶來體驗之外的更多價值。

          因此,設計思維想要滿足新時代的需求,就需要同時滿足前文提到的四個關鍵詞。這就要求我們需要跳出單一層面,以全局的維度去思考產品的設計。

          因此,全局性將成為未來的關鍵,我暫且將這種思維方式稱為——全局性設計思維。

          全局性設計思維概述

          全局性設計思維,即在設計過程中,始終能以更高的維度去審視全局,思考當下的設計。

          何以全局,如何跳出單一層面?這種思維方式的前提,是你要首先了解整個產品(亦或是物體、組織等)的運行方式,清楚的知道整個產品需要達到的目標,從而準確、合理地對針對目前的局部做出設計,并最終構成整個完整的形態。

          而「全局」的前提,是你擁有更高的眼界。你的眼界越高,你對產品、市場、甚至整個社會的洞察就越全面,你就能夠解決越大的問題,你能夠實現的價值就越高。眼界是基礎,解決更大的問題是目標,而全局性設計思維則是實現這個目標的方式與過程。

          全局性設計思維,可以幫助我們跳出產品的單一層面,去思考從產品層、到體驗層、再到開發層這一完成的整體。讓設計滿足體驗層的同時,滿足產品層面的目標,同時讓產品的設計與開發高度耦合,將整個產品串聯成一個完成的整體。

          好了,講了這么多,我們具體應該如何去運用全局性設計思維呢?

          全局性設計思維的運用方式

          全局性設計思維,的應用方式非常廣泛。它并不是一個固定的方程式,而是一個更高層面的指導性設計思維,能夠通過不同的形式,來幫助你解決問題。

          1. 全局觀——在生活思考更多可能

          在嘗試這種思維之初,我們可以通過一些小的實踐,去鍛煉這種思維能力。

          在日常的生活、工作中,其實我們有大量的事物可以練習和運用這種思維方式。比如你在裝修一個大房子,需要去選擇房子里的家具。當你在購買家具時,常規的思維方式是:這個家具在某個房間時應該是怎樣搭配的,所以我要購買什么樣形狀、顏色的家具,來滿足這個房間的需要。

          但是,用這么思維方式來購買家具,將為對家具的靈活性與長期價值造成一定影響。從居住環境的長遠來看,也許這個家具有可能會因為某些原因,需要放到另一個房間,而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終,我們只能重新購買,或者接受一個風格、尺寸上并不搭調的房間出現。

          因此,當我們在購買家具時,我們是否可以利用全局性設計思維,從整體空間的角度出發(而非單個房間),去思考如何讓家具滿足更多空間需求。長此以往,我們不僅可以打造一個風格統一的大空間,同時也能增加每個家具的利用率,在無形中也增加了這個家具本身的價值。

          之所以舉家具這個例子,是因為這個原理與產品設計的原理非常類似。你可以將這個房子看成是整個產品,而家具則是不同的組件。通過不同的家具(組件),構成了我們的不同功能模塊(房間/功能區),而所有的功能模塊則構成了整個產品(房子)。

          房子(產品體量)越大,房間/功能區(功能模塊)就越多,家具(組件)的多樣性、復雜性就越高,我們就越是需要從全局的角度去思考裝修的統一性(風格體系化)和家具的通用性(樣式組件化)。只有這樣,我們才能更好地去打造一個風格統一、體驗一致,同時又具備足夠自由調整空間的「大房子」。

          2. 全鏈路——從全流程中重新思考設計

          當你仔細地去理解許多非常著名的設計作品時。你會發現,幾乎所有優秀的、巧妙的設計,往往在設計中都體現了全局性的設計思維。它不僅僅解決著當前的問題,同時也能夠解決更大的問題,發揮巨大的價值。

          比如著名的坂茂衛生紙的設計,看似普通,只是將衛生紙的軸心從圓形改成了方形,但它卻成為了舉世聞名的、公認的好的設計。為什么呢?

          我們先了解一下這個設計為什么好。

          首先,傳統的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用,讓你用得更少,從而起到了解決資源的作用。其次,在運輸過程中,圓形的紙卷之間會產生很大的空隙,而方形紙卷則能夠緊緊靠在一起,提升空間利用率,從而起到降低運輸成本的作用。

          這簡單的設計,居然發揮了如此大的作用。

          那么,為什么我們在設計時就沒有考慮到這些問題呢?因為我們從最開始,就沒有從「紙」的整個全流程來去思考問題。

          讓我們「站的更遠一些」,紙這個商品,并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成,通過運輸送到每個超市中,當我們購買以后,它又會在很長一段時間內,出現在衛生間,陪伴你使用的每一刻。我們可以將整個流程分為 3 個場景,而每個不同的場景,又將會對紙本身有著不同的影響。

          • 運輸場景——衛生紙的運輸成本——衛生紙的價格
          • 售賣場景——衛生紙的造型、包裝——影響用戶購買
          • 使用場景——衛生紙的使用過程——影響用戶的使用體驗

          當我們能夠考慮到衛生紙的運輸過程時,我們就可以通過設計去降低運輸成本;而當我們可以考慮到用戶的使用場景時,我們就可以通過設計,去提升阻力,降低使用量,間接地去提升用戶的使用體驗。而當我們通過全局性設計思維,可以同時解決這三個問題時,我們的設計就是好的設計,就擁有了更高的價值。

          發現了嗎,為什么你沒有想到相同的設計方案?設計能力并不是關鍵,設計思維才是指引你做出好的設計的前提。當你能按上述的方式,去思考整個流程、不同的場景,我相信大多數的人都能夠設計出坂茂的設計方案,甚至比這個方案更好的解決方式。

          以全局性設計思維,構建設計體系

          通過前面的兩個案例,相信大家已經了解了全局觀、全鏈路兩種應用方式。

          那么,我們最最最關心的問題——如何在業務中去使用這種思維呢?

          在產品設計中,全局性設計思維也有著非常多樣化的使用方式和場景,在之后的文章中我也會講到很多應用方式。但是,在所有的方式中,我認為最為有效的,便是以全局性設計思維,幫助產品去構建一個完整的設計體系。

          1. 設計體系概述

          什么是設計體系?談及設計體系,大多數設計師會認為,設計體系就是設計規范?!覆痪褪钦覀€名次包裝一下規范嘛?」

          我們為什么需要設計體系?它與設計規范有何不同呢?

          設計規范是設計師最為熟悉的一種規范文檔。在產品設計時,優秀的設計師通常都會建立設計規范。然而在實際的項目中,設計規范往往無法難以有效實施。比如在開發眼中,規范并不符合開發規則,過于碎片化。而產品經理通常又不會去了解設計規范,因此在構建產品框架時也常常隨意發揮。

          很多項目做到最后,設計規范僅存在于紙面的意義,并隨著項目的發展逐漸混亂。為什么會這樣?

          因為不同職能間的思考方式存在差別,設計規范對于其他職能來說經常難以理解與運用,無法與其他職能形成有效聯動。

          設計規范僅僅是基于視覺層面的規范,它是一個「平面」。而設計體系則是貫穿于產品的每個層面的、與產品深度結合的完整體系,它是「立體」的「有機生命體」。

          設計體系的核心在于「體」,它是貫穿于整個產品的完整體系。設計體系由設計師創造,并深度融合于產品每個部分。它能夠讓產品更緊密、更統一、更有序,伴隨著產品的生長,與產品共同進化,并最終推動產品的發展。

          創造并推動這一體系,則要求設計師需要更全面的能力。只有充分地去理解并參與產品的每個部分的設計,才能讓設計真正延伸至產品的每個部分。

          而創造這一切的前提,便是全局性設計思維。

          2. 設計體系的構建法則

          羅馬不是一天建成的,設計體系也是如此。設計體系的建立是一個漫長的過程(與產品體量相關),需要在前期投入更多的精力。但若是你的方法得當,就會在項目中越來越輕松,并以此形成良性循環,而你也會越來越有成就感。

          如何正確地去構建設計體系呢?我在這里總結了幾個要點:

          樹立觀念

          首先,樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維,著眼于整個項目,去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后,你會自然而然的將其植入到設計中。

          以解決問題為導向

          體系化并非憑空建立,而是建立在解決問題的基礎之上。設計體系的本質,就是由無數個標準化的解決方案,最終構成的一個完整的體系。因此,我們要以解決問題為導向,以全局性思維去思考問題的本質,最終建立適用于全局設計體系。

          以小為始,重視質量

          腳踏實地,從小處入手,去發現產品中最基礎的一些問題。表面上看這些問題,對項目影響不大,但他們數量龐大,加在一起便會嚴重影響整個產品的效率。因此,我們要首先建立高品質的基礎體系,再以此為基礎構建更大的體系。

          不要一開始就設法建立一個巨大的體系,那樣只會是一盤散沙,因為它的結構是無序、混亂、不健康的。而這也是大多設計規范缺乏有效性和可實施性的根源。

          梅拉妮·米歇爾的《復雜》一書中講到,任何復雜系統,都是由無數個體通過簡單的算法所構成的。在算法領域也是同樣的原理,一個優秀而強大的代碼,必然是由無數個小型模塊,通過簡單的算法耦合形成巨大的代碼矩陣?;A算法越強大、代碼結構越「健康」,可擴展性和靈活性就越強,其能力就越強大。

          從規范入手,由面到體

          從本質上來說,設計體系是由「多個層面的規范」組合而成的。因此,由設計師推動的體系化建設,往往最初都是從設計規范這一「單層規范」開始。但是,設計體系的建設需要將單層的規范,通過不同的方式,轉化為不同層面的規范,最終由面到體,形成體系化。

          換位思考,尋求跨職能合作

          設計體系的建立與維護,通常需要多職能的通力協作。因此,我們需要經常換位思考,在完成設計的工作,幫助其他職能完成目標。只有這樣,才能得到更多的信任,并以此為基礎推動更多體系化的建設。

          比如我在設計一個功能模塊的頁面時,首先會與不同模塊產品經理進行交流,了解不同的業務需求,并從產品層面就開始尋求統一性與通用性。這樣的話,當其他模塊需要同一個功能時,前端便可以直接復用,同時后端的數據也可以進行互通。而在開發端,我也會詳細了解不同端的開發實現原理,務求設計規范與開發規則在理解上的一致性。這一既方便了開發理解規范,同時也從根本上提升了開還原的準確性。

          長此以往,整個團隊就能夠建立良好的溝通和互信關系。有了這種默契,設計體系的推動就容易多了。

          保持優化,不斷成長

          設計體系的另一個重要價值在于,它是可以伴隨產品不斷成長的。所有產品都是在發展中不斷變化的,過分僵硬的規則,將會對產品發展起到反作用。

          在業務發展中,產品一定會不斷地加入新的功能模塊,并對原有頁面作出相應的調整。因此,設計體系需要時刻與產品策略保持一致,及時與上下游職能溝通,不斷地針對產品發展進行優化,以保證設計體系能夠符合產品的發展需要。

          使用正確的推動方式

          體系化最終能否成功實施,推動的方式至關重要。

          在日常的項目中,大多數的業務方對設計體系了解甚少,也難以體會其中的價值。因此,他們通常會認為這些東西毫無必要,多數情況也不太愿意配合體系的推進。如果強行推進,反而會引起不必要的阻力,招致反感。那么,我們應該如何正確的去推進設計體系建設呢?

          為他人帶來價值:首先,尋找雙方共同的利益點是首要任務。也許是可以讓其他職能的工作更,也許能夠促使其達成 KPI,再不直接,那也一定能夠為整個產品帶來價值(不然你也沒必要推了)??傊?,設計體系一定要能夠為他人帶來價值,這樣才能順利推進。否則人家憑什么要協助你推進,因為你美麗可愛嗎?你也可能比較可愛,但總歸是不能一直這么來吧。

          在解決問題后提出方案:不要一開始就啪一下拋出一個「宏大的理想」,大部分人會覺得你不切實際。你只需要通過這個體系,幫助業務方先解決一個問題,然后再提出你解決方式的來源——一個嚴謹的、可驗證的、長遠價值的體系化解決方案。

          尋找合適的推動時間:最后,對于設計體系來說,尋找到正確、恰當的推進時機至關重要。比如當你在平時突然想要提出,對現有品牌進行升級時,大多數業務方都會認為你是沒事找事。而如果情況是在新的一年中,產品進行了概念的升級,這時候你將概念以及未來的品牌規劃融入在你的方案中,再去推進品牌升級,就會容易很多了。

          文章預告

          -本文旨在引導大家更好地理解和學習這種思維方式,想要用好全局性設計思維,光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產品中,為業務帶來更大的價值。

          因此,在后續的幾篇文章中,我將通過不同類型案例,為大家深入講解全局性的具體實踐案例。

          全局性設計思維 | 如何打造強大的品牌體系

          為什么要建立品牌體系?品牌體系有哪些價值?設計師應該如何推動品牌體系的建立?

          本文將帶你了解網易智慧企業品牌體系的建設與推動全過程,聊一聊品牌體系建設的那些事兒~

          FishDesign組件庫 | 從零到一構建企業級UI組件庫

          我們為什么要建立組件庫?在產品的什么階段需要組件庫?如何抽象業務組件?組件庫設計過程中有哪些重要的細節需要注意?

          本文帶你深入了解,網易 Web 端組件庫——FishDesign 組件庫從零到一的完整全過程。

          全局性設計思維 | 如何構建事業部級大型設計體系

          設計體系有什么價值?如何基于不同的業務建立設計體系?設計師如何推動體系化建設?在體系化過程中有哪些需要注意的地方?

          我將會在這篇文章中,為大家介紹網易智慧企業設計體系構建全過程。

          樣式組件化+規范體系化,形成產品設計體系,整體重構產品線。

          結合品牌體系,推動事業部更多產品加入體系,形成智慧企業 Web 端產品設計體系。

          推動更多產品/業務融入體系中,讓智慧企業設計體系不斷成長,賦能業務發展。

          寫在最后

          好吧,似乎文章又寫得偏長了一些。只能說,想要認真地講清楚一個道理,確實不是一件容易的事情。

          設計思維本身并不復雜,但想要講清楚它的背景、原理及價值,就需要把它整個掰開來講。而為了確保設計思維的可實施性,又需要經過大量的實踐研究,自己能夠走通以后,才能與大家分享。

          坦白講,似乎整個社會都在追求快節奏、碎片化閱讀。但若是因此而喪失了自己學習的節奏,那么等于是沒有節奏的,你的知識體系也將是東拼西湊,無法形成一套完整的體系。這也是我更新比較慢的原因之一,希望大家讀完文章,能夠切實地得到一些東西,這就很有意義。

          文章來源:優設    作者:Jady13

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合