地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術(shù)的發(fā)展而變化，從石板、動物皮革，到絲綢、紙張。當互聯(lián)網(wǎng)走進千家萬戶，地圖也步入電子化時代。
相較于紙質(zhì)地圖，電子地圖優(yōu)勢顯著：更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖（后文簡稱地圖）的出現(xiàn)也影響著人們的出行方式，尤其當智能手機普及，我們可以隨時查詢地點、發(fā)起導(dǎo)航，再也不需要提前記下高速出口和轉(zhuǎn)向路口了。
滴滴擁有網(wǎng)約車、代駕、騎行、公交、自駕導(dǎo)航等眾多業(yè)務(wù)，是一站式出行平臺。而地圖作為承載出行服務(wù)的重要載體，橫向支撐著各業(yè)務(wù)線的發(fā)展。以網(wǎng)約車業(yè)務(wù)為例，調(diào)研結(jié)果顯示絕大部分乘客都會關(guān)注并使用地圖。
隨著各業(yè)務(wù)線對體驗的要求不斷提升，單一的地圖模式已經(jīng)不能滿足業(yè)務(wù)訴求及用戶需求，需要進一步細分場景、精細刻畫地圖樣式，于是地圖的設(shè)計也變得愈發(fā)重要。
地圖承載的信息種類復(fù)雜、數(shù)量巨大，初期可能會找不到設(shè)計切入點。我們可以先了解下它的定義和實現(xiàn)方式，或許就能從中找到答案。
定義：地圖是依據(jù)一定的數(shù)學(xué)法則，采用地圖語言，經(jīng)過制圖綜合來表示地球表面的圖形。
實現(xiàn)流程：
結(jié)合“從雛形到完整地圖”這一步流程的實現(xiàn)方式，進而可將地圖拆分為基礎(chǔ)層、策略層和感官層。幫助各職能角色找到對應(yīng)切入點。
解構(gòu)地圖后，我們不難看出，感官層是設(shè)計側(cè)需要關(guān)注的重點層級。
面對如此復(fù)雜的地圖信息，為了梳理出清晰的思路，我們會對地圖元素進行分類：根據(jù)數(shù)據(jù)的類別和呈現(xiàn)狀態(tài)，可拆分為點、線、面三類元素。
名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪。
名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區(qū)域狀的地理實體，如醫(yī)院、小區(qū)等。
從定義可以看出，地圖是一種特殊的圖形語言，是以上所有元素的集合體。相比我們所了解的UI設(shè)計、運營設(shè)計，地圖有屬于自己的設(shè)計原則。以下為大家總結(jié)了一些核心的原則：
符合制圖學(xué)和公眾認知
地圖發(fā)展到現(xiàn)在已經(jīng)成為了一門學(xué)科，我們會發(fā)現(xiàn)即使語言不通，拿到一張地圖時也能看懂，這是因為有制圖學(xué)和公眾認知在規(guī)范著地圖設(shè)計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學(xué)和公眾認知，大大降低了用戶的學(xué)習(xí)成本和記憶負擔，使地圖可以作為一種世界通用語言流通起來。
保證識別度
地圖屬于信息類工具，其上出現(xiàn)的元素均需清晰可識別，保證可讀性是最基本的設(shè)計原則。所以在設(shè)計時會限制顏色對比度、最小字號等，而具體規(guī)則會根據(jù)場景確定。
清晰有層次
地圖的層次清晰包含了兩個方面：信息主次清晰，視覺具有整體性。
信息主次清晰，地圖信息龐雜，沒有主次關(guān)系會影響用戶的讀圖效率。在設(shè)計時需要考慮元素本身的特點、重要性，可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關(guān)聯(lián)性，不同元素有差異性。同時，信息主次也會根據(jù)比例尺的變化有所調(diào)整。
視覺具有整體性，在滴滴的業(yè)務(wù)場景中，地圖通常作為最底層組件出現(xiàn)，上層還會有很多業(yè)務(wù)組件。因此在設(shè)計時需克制用色，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與其他業(yè)務(wù)組件拉開視覺層級。這樣才能更好的突出當前業(yè)務(wù)模塊的重點，提升整體的使用效率和體驗。
細分地圖模式
地圖在各業(yè)務(wù)模塊中應(yīng)用廣泛，用戶需求也不盡相同，設(shè)計時需要根據(jù)使用場景區(qū)分不同模式。以網(wǎng)約車場景為例，業(yè)務(wù)信息始終處于上層，地圖用來幫助用戶定位、快速發(fā)單。因此，網(wǎng)約車場景的地圖整體性強、色調(diào)偏冷、視覺層級后退，能更好的搭配網(wǎng)約車模塊的整體設(shè)計，保證用戶的操作效率。
具有品牌特性
品牌調(diào)性一直是滴滴設(shè)計層面非常關(guān)注的原則，品牌基因貫穿了所有產(chǎn)品，始終具有獨特的視覺風(fēng)格。遵循品牌的視覺語言，使地圖可以更好的融合到產(chǎn)品中，保證了設(shè)計的統(tǒng)一性。
文章來源：優(yōu)設(shè) 作者：CDX創(chuàng)意設(shè)計中心
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
“我們不設(shè)計頁面，我們設(shè)計構(gòu)成元素的系統(tǒng)?！薄猄tephen Hay
原子設(shè)計理論并不是什么高大上的規(guī)則。
隨著網(wǎng)頁設(shè)計的持續(xù)發(fā)展，我們認識到開發(fā)設(shè)計系統(tǒng)（design system）的重要性，它最早就是為了讓網(wǎng)頁設(shè)計師更容易理解網(wǎng)頁的構(gòu)成，后來才延伸到UI設(shè)計當中。
簡單來說，當公司的業(yè)務(wù)產(chǎn)品逐漸擴大時，我們需要制定一套完整的設(shè)計系統(tǒng)，提升設(shè)計和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計師的輸出物。 開始設(shè)計系統(tǒng)的制定時，大部分設(shè)計師可能都會先去網(wǎng)上找到大廠現(xiàn)成的設(shè)計系統(tǒng)，當拿到他們的成品的時候，會把自己的產(chǎn)品進行拆解和借鑒，這的確能快速解決問題，但是如果不理解其中的組織規(guī)則和邏輯，只是借鑒他們現(xiàn)成的設(shè)計系統(tǒng)，只能了解個大概，知其然而不知其所以然。因此，原子設(shè)計理論的出現(xiàn)就是為了幫助我們?nèi)ゴ罱ㄔO(shè)計系統(tǒng)，這套理論已經(jīng)逐漸被國外一些大廠應(yīng)用于創(chuàng)建統(tǒng)一和富有層次的設(shè)計系統(tǒng)。
原子是所有事物的基本構(gòu)成物質(zhì)。每一個化學(xué)元素都具有不同的性質(zhì)，并且它們一旦被分解就會失去其意義。
分子是由兩個或兩個以上的原子通過化學(xué)鍵結(jié)合在一起的。這些原子的組合具有自己獨特的性質(zhì)，并且相較于原子來說，更具實際意義和可操作性。
有機體是由分子有機地組合在一起的。這些相對復(fù)雜的結(jié)構(gòu)可以從單細胞生物一直到像人類這樣難以置信的復(fù)雜生物體。
宇宙中的物質(zhì)都可以被分解成為原子元素。
碰巧的是，我們的界面就是由一些基本的元素組成的。Josh Duck的“HTML元素周期表”完美闡述了我們所有的網(wǎng)站、APP、企業(yè)內(nèi)部網(wǎng)、hoobadyboops等等是如何由相同的HTML元素組成的。
△Josh Duck的“HTML元素周期表”
接下來和大家細聊一下什么是原子設(shè)計；原子設(shè)計到底好在哪里；為什么要有設(shè)計系統(tǒng)；以及該如何利用原子理論創(chuàng)建自己的項目組件庫。
原子設(shè)計（Atomic Design）理念最早是由國外網(wǎng)頁設(shè)計師Brad Frost提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)原子結(jié)合在一起，可以形成分子，進一步形成組織，從科學(xué)的角度來講，在宇宙中的所有事物都是由一組有序的原子組成。
Brad將這個概念應(yīng)用到界面設(shè)計中，仔細觀察后我們不難發(fā)現(xiàn)，界面其實就是由一些基本的元素組成，文字，顏色和圖標等都是一個個原子。
通過原子設(shè)計，我們可以把界面看作是一個連貫的整體，同時也是一些元素的集合，每個元素都不盡相同，互相結(jié)合產(chǎn)生更多層次和結(jié)構(gòu)，模塊之間相互統(tǒng)一。說到底，原子設(shè)計其實是一種設(shè)計方法論，它由原子、分子、組織、模塊和頁面共同協(xié)作，由此創(chuàng)作出統(tǒng)一和富有層次的設(shè)計系統(tǒng)。
簡單來說：原子結(jié)合在一起，形成分子，進一步結(jié)合形成的生物體。原子理論意味著在已知宇宙中的所有事物都可以分解為一組有限的原子元素。
原子設(shè)計是一種方法，由五個不同的階段一起工作，以更慎重和更具層次的方式創(chuàng)建界面設(shè)計系統(tǒng)。從而創(chuàng)造出更有效的用戶界面系統(tǒng)的一種設(shè)計方法。
它的五個不同階段是：
原子(Atoms)：為頁面構(gòu)成的基本元素，例如標簽、輸入框、文字、顏色等；
分子(Molecules)：由原子構(gòu)成的簡單UI元素，例如按鈕；
組織(Organisms)：相對分子而言，較為復(fù)雜的構(gòu)成物，由原子及分子所組成；
模板(Templates)：以頁面為基礎(chǔ)的架構(gòu)，將以上元素進行排版；
頁面(Pages)：將實際內(nèi)容（圖片、文章等）放置在特定模板內(nèi)；
原子設(shè)計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設(shè)計系統(tǒng)層級中扮演重要角色。下面，讓我們更深入的了解每一個階段哦～
原子
如果原子是物質(zhì)的基礎(chǔ)組成部分，那么我們用戶界面的“原子”就是那些構(gòu)成我們用戶界面的基本構(gòu)件了 。在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線等。
在團隊開始新項目時，為了保證各個頁面具有統(tǒng)一的設(shè)計風(fēng)格，我們會制定一套簡易的視覺規(guī)范，在關(guān)鍵的設(shè)計元素上，各個設(shè)計師達成一致，這樣就能很大程度保證不同頁面的風(fēng)格統(tǒng)一，并在這個基礎(chǔ)上去探索更有創(chuàng)新意義的設(shè)計方案。
在模式庫中，原子一目了然地展示了所有的基本樣式，當你回來繼續(xù)開發(fā)和維護你的設(shè)計系統(tǒng)時，這是一份很有用的設(shè)計參考指南。
分子
分子是原子組合建立的元素，兩個原子即可組成一個分子。
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。例如，搜索框里的文字和圖標共同打造一了個搜索表單分子。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和柵格。合并后，這些抽象的原子從毫無關(guān)聯(lián)到又一個共同的目的，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，柵格為按鈕定義了一個尺寸和規(guī)范。
將單個元素組裝為簡單的功能組是我們一直以來構(gòu)建用戶界面的方式，可幫助UI設(shè)計人員和開發(fā)人員堅持單一職責原則，這種方式簡單且復(fù)用性高，可以保證界面具有良好的可用性。
以界面設(shè)計中的表單為例，表單是一個非常常見的設(shè)計元素，一個表單分子是由文字、圖標和線條原子組成。這些原子合并后，得到的是一個可以應(yīng)用在任何信息展示或者功能入口的組合。
組織
組織是由分子或原子或其它有機體組成的相對復(fù)雜的UI部分 。這些組織組成了界面的不同部分。
通過結(jié)合分子和原子，我們可以構(gòu)建更復(fù)雜和可擴展性的模塊，這個稱之為組織，其實也可以稱之為組件，這些組件組成了界面的不同部分。同樣以表單為例，一個表單我們可以通過數(shù)量的組合，以及間距的調(diào)整，元素的增減，在界面中表達不同的場景和含義。從建立分子到建立更精細的組件，這為設(shè)計師和開發(fā)人員提供了重要的內(nèi)容構(gòu)建思路。
組件在解放設(shè)計師生產(chǎn)力方面有著重要的作用，我們可以把界面中常見的組件進行分類整理，如搜索、表單、圖片和卡片等，這些常用組件基本能滿足日常的設(shè)計需求。以Aribnb為例，他們主要分為3類：卡片、表單和內(nèi)容。每個標簽內(nèi)容的設(shè)計形式盡量都保持統(tǒng)一，因此負責不同內(nèi)容模塊的設(shè)計師只要選擇同一個組件就能完成頁面的設(shè)計。在短時間內(nèi)就可以完成頁面超多的復(fù)雜項目，極大的提升了團隊的設(shè)計效率。
在網(wǎng)頁端最典型的例子就是網(wǎng)站導(dǎo)航，搜索表單，我們幾乎訪問的每個網(wǎng)站都會看到這些類型的組件。
模板
原子，分子和組織的這種語言有助于我們有意識地構(gòu)造設(shè)計系統(tǒng)的組件。但是，最終我們必須采用一個更適合描述我們最終產(chǎn)出的語言，這樣才好匯報給老板、客戶和同事，簡單來說就是說人話。
模版的本質(zhì)就是線框圖，在這一步我們基本可以看到一個產(chǎn)品的形態(tài)。我們可以不斷調(diào)整組件和分子組合在一起的效果來嘗試不同的方案，找到一個相對合適的方案。模版的意義就在于可以專注于頁面的內(nèi)容結(jié)構(gòu)布局，而不是頁面的最終內(nèi)容，此時模版內(nèi)容是隨時可以調(diào)整的，嘗試不同的方案，在多個模版中進行對比，在這個階段改動和溝通保證了成本。因此，模版在設(shè)計系統(tǒng)承載的作用就是保證設(shè)計方案在原型階段的多樣性。
模板是頁面級別的對象，它將組件放置在布局中，并顯示設(shè)計的底層內(nèi)容結(jié)構(gòu)。在設(shè)計一個有效的設(shè)計系統(tǒng)時，必須在布局的環(huán)境中展示組件的外觀和功能，以證明這些部件組成了一個功能良好的整體。
模板的另一個重要特征是它們專注于頁面的底層內(nèi)容結(jié)構(gòu)，而不是頁面的最終內(nèi)容。設(shè)計系統(tǒng)必須考慮內(nèi)容的動態(tài)性質(zhì)，因此，把例如標題和文字段落的圖像大小和字符長度此類組件的重要屬性說清楚是很有幫助的。
頁面
頁面是模板的具體實例，填充了真實的內(nèi)容（圖片、文字等）后形成頁面，也就是常說的「視覺稿」，將占位符替換為有代表性的真是內(nèi)容，使設(shè)計系統(tǒng)有了生命。在模版的基礎(chǔ)上進行優(yōu)化和完善就形成了頁面最終的視覺方案。
頁面階段是原子設(shè)計中最具體的階段，由于一些眾所周知的原因這個階段非常重要。別忘了，這可是用戶在訪問你的界面時會實際看到和交互的內(nèi)容。
除了演示用戶所看到的最終界面之外， 頁面對于測試底層設(shè)計系統(tǒng)的有效性是必不可少的 。在頁面階段，我們可以看到當將真實內(nèi)容應(yīng)用于設(shè)計系統(tǒng)時，所有這些模式如何運作。所有的一切看起來都很棒嗎？如果答案是否定的，那么我們可以回過頭去修改我們的分子、生物體和模板，以更好地滿足我們內(nèi)容的需求。
頁面還提供了一個表達模板變量的地方，這對建立強大而可靠的設(shè)計系統(tǒng)至關(guān)重要。以下是模板變量的幾個例子：
用戶在其購物車中有一個商品，另一個用戶在其購物車中有十個商品。
網(wǎng)頁APP的儀表板通常顯示最近的活動，但是該部分對于首次使用的用戶是禁用的。
一篇文章標題可能是40個字符長，而另一篇文章標題可能是100個字符長
在所有這些例子中，底層的模板是相同的，但用戶界面將會隨著內(nèi)容的動態(tài)性質(zhì)而改變。這些變化直接影響了底層分子，有機體和模板的構(gòu)建方式。因此，創(chuàng)建解釋這些變量的頁面有助于我們建立更具彈性的設(shè)計系統(tǒng)。
這就是原子設(shè)計！這五個不同的階段同時協(xié)同工作，以產(chǎn)生有效的用戶界面設(shè)計系統(tǒng)。
原子是最基礎(chǔ)的UI元素，并且是可以用作界面的元素構(gòu)建塊；
分子是用于形成相對簡單的UI組件的原子集合；
組織是形成界面各個部分的相對復(fù)雜的部件；
模板將組件放置在布局中，并演示設(shè)計的底層內(nèi)容結(jié)構(gòu)；
頁面將真實內(nèi)容應(yīng)用于模板，設(shè)計出視覺稿，并最終成為開發(fā)落地的依據(jù)；
原子設(shè)計為制作設(shè)計系統(tǒng)提供了清晰的方法?？蛻艉蛨F隊成員通過實際的設(shè)計流程與步驟，能更好的去理解設(shè)計系統(tǒng)的概念。原子設(shè)計使我們能夠從抽象的設(shè)計中過渡到具體的設(shè)計中來，因此我們可以對一個設(shè)計系統(tǒng)進行一致性和可伸縮性等類似特性的控制。
通過模塊化的設(shè)計系統(tǒng)調(diào)動組件，可以使我們開發(fā)新的產(chǎn)品時，從開始就可以對產(chǎn)品進行嚴格的把控與一定程度上的控制，進而規(guī)避了事后風(fēng)險。開發(fā)之前不確定好系統(tǒng)模塊化，毫無邏輯的去開發(fā)，開發(fā)到一半發(fā)現(xiàn)功能與需求對不上等問題逐漸產(chǎn)生，會導(dǎo)致產(chǎn)品的延期、人員成本的浪費、資金成本的增加，產(chǎn)品的迭代率的下降、進而影響市場先機與市場占有率。
原子化設(shè)計與原來的樣式庫設(shè)計思路不一樣，原子化設(shè)計從抽象到具象，從元素到組件，讓設(shè)計師從底層開始思考，對整個設(shè)計會有更清晰的理解。同時也能讓設(shè)計更加統(tǒng)一，在新增組件的時候更謹慎。
原子設(shè)計的原理可以保證任何一個設(shè)計組件的構(gòu)成與開發(fā)構(gòu)建組件一一對應(yīng)。同時應(yīng)用原子設(shè)計的設(shè)計軟件（e.g., Sketch, Figma)可以給新設(shè)計師足夠的自由滿足需求變通，并且可以保證同一個設(shè)計組件的更新會覆蓋到任何一個使用這個組件的設(shè)計中。
原子設(shè)計為我們提供了一些關(guān)鍵的見解，幫助我們創(chuàng)建更有效、更深思熟慮的UI設(shè)計系統(tǒng)。
那么、
如果產(chǎn)品規(guī)模小只需要1，2個設(shè)計師，大概率是前期不需要大費周章搞一個需要開發(fā)配合的設(shè)計系統(tǒng)。可以只利用Sketch或者Figma做一個像貼紙一樣的設(shè)計組件庫。但是功能多了怎么辦，公司來新人了，當新設(shè)計師產(chǎn)出后就會發(fā)現(xiàn)與原設(shè)計師設(shè)計的風(fēng)格不一樣，慢慢發(fā)現(xiàn)整體設(shè)計風(fēng)格不統(tǒng)一了，只靠一個簡單的組件庫很難能滿足新功能需求，新功能貼紙上沒有設(shè)計或者設(shè)計需要變通，又或者是新設(shè)計師忙著交工忘記檢查自己新組件和已有組件的異同。
這時候就會需要一個設(shè)計師領(lǐng)頭去重新整理設(shè)計系統(tǒng)，走查發(fā)現(xiàn)同一個正文所用的十幾個不同字號，又或者是十幾個透明度不同的灰黑色字體，所有組件跟現(xiàn)有上線產(chǎn)品對比整理好后一并交給開發(fā)，開發(fā)再一一整理代碼庫。
設(shè)計系統(tǒng)（Design Systems）對于很多年輕設(shè)計師可能十個新名詞，但是設(shè)計規(guī)范和組件等我們應(yīng)該還是有一定認知的。在設(shè)計的過程中，我們會被其影響。在我們?nèi)粘Ｋ褂玫腁pp產(chǎn)品中，如Apple、Google、Airbnb、Uber、滴滴等，他們的產(chǎn)品體驗非常流暢，用戶使用產(chǎn)品時能夠地滿足需求，在其良好的體驗背后都有著一套強大的設(shè)計系統(tǒng)做支撐。
為什么需要設(shè)計系統(tǒng)
1、團隊協(xié)作，體驗一致。以滴滴為例，雖然只是一個簡單的打車應(yīng)用，但是其旗下的業(yè)務(wù)卻很多，快出、出租車、順風(fēng)車等，每個業(yè)務(wù)都由不同的團隊和設(shè)計師負責?？梢韵胂笕绻麤]有設(shè)計系統(tǒng)，任由各模塊設(shè)計師自由發(fā)揮，風(fēng)格各異，出來的結(jié)果可想而知。而有了設(shè)計系統(tǒng)的幫助，就會感覺界面風(fēng)格非常統(tǒng)一，感覺是出自同一個設(shè)計師之手，可見其設(shè)計系統(tǒng)的功勞不小。
2、系統(tǒng)的管理多樣性。在設(shè)計過程中，我們會發(fā)現(xiàn)過程中，我們會發(fā)現(xiàn)每個業(yè)務(wù)的形態(tài)都是基于不同的場景，因為場景的多樣性，在表現(xiàn)上就會催生出不同的樣式。如果每個業(yè)務(wù)都用一種樣式表達，久而久之當業(yè)務(wù)增長過快時，我們現(xiàn)有的設(shè)計模式就會難以滿足。Airbnb的設(shè)計方式就是非常值得參考的一個案例，從最開始是提供民宿，到后來新增的餐館服務(wù)，你會發(fā)現(xiàn)房源和餐館都用了同一套圖文信息結(jié)構(gòu)，只是在內(nèi)容的細節(jié)上有一些不同。這樣可以降低設(shè)計的難度。設(shè)計師不用為每個場景思考一個設(shè)計模式而煩惱。同時，用戶在瀏覽不同場景的內(nèi)同時，在相互切換中也不會產(chǎn)生為違和感，一切都是很自然的操作。
3、幫助產(chǎn)品成長，避免一次性設(shè)計。互聯(lián)網(wǎng)產(chǎn)品的成長模式是一種漸進式迭代，在產(chǎn)品初期的主要訴求是快速上線，等到產(chǎn)品上線獲取一定的用戶，證明它可以活下去時再逐步完善，增加更多的功能。每一次的迭代都是站在我們之前的思考之上，每一次的優(yōu)化都會讓我們的設(shè)計更進一步，這是我們期望達到的結(jié)果。
以Uber為例，新版本繼承了黑色按鈕的設(shè)計，并和地圖進行了結(jié)合，地圖的配色和舊版本相比也變得生動了，這種改變并不是一蹴而就，而是建立在原有版本之上。
一致性（Consistency）：由于分解界面成單一元素，不論在哪一個頁面，UI元素的互動性是相同的，例如顏色變化、字體的排序、以及反饋。不但讓使用者體驗相同，在視覺上更為和諧。
效率（Efficiency）：由于建立了組件庫，一旦要更改某一個元素，可以馬上施行、應(yīng)用。
跨部門的共通語言（Collaboration）：不僅方便設(shè)計師思考頁面的和諧性，也可以讓工程師、測試檢驗清楚頁面的邏輯架構(gòu)及變化，減少不必要的來回溝通
在此，順便淺談下設(shè)計系統(tǒng)。
通常，設(shè)計系統(tǒng)包含的內(nèi)容由設(shè)計原則、設(shè)計語言和組件庫，這是一個整體的概念。
設(shè)計原則
設(shè)計原則是一個產(chǎn)品的核心設(shè)計理念，設(shè)計的本質(zhì)就是解決問題，在制定設(shè)計原則時要建立在這個中心思想之上。這些問題也許是一個業(yè)務(wù)形態(tài)，例如打車的場景，也許是一個設(shè)計形式，如表單。設(shè)計形式又很多，我們應(yīng)該如何選擇呢？相對合理的方法就是建立一個規(guī)則，所有的問題和形式都想這個規(guī)則靠攏，減少不確定性，這就是設(shè)計原則的出發(fā)點。因此我們可以理解為，設(shè)計原則就是一系列的規(guī)則，是我們設(shè)計過程中要遵循的中心思想。
例如：蘋果把審美作為第一要素存在于設(shè)計原則中，它的產(chǎn)品往往也是品味的代名詞，看看它的設(shè)計原則就知道了：
審美的完整性
一致性
直接操作
即使的反饋
隱喻
用戶可控
△ 官網(wǎng)：https://developer.apple.com/design/
再來看看Material Design，Google對其定義是一個完整統(tǒng)一的系統(tǒng)，結(jié)合了理論、資源和工具的數(shù)字體驗產(chǎn)品，相比而言它的設(shè)計原則就是更加獨特，這是它的設(shè)計原則：
材料是一種隱喻
大膽/圖形/強調(diào)/
運動賦予意義
靈活的基礎(chǔ)
跨平臺
△ 官網(wǎng)：https://material.io/design
由此可以看出，和iOS相比，Material Design的設(shè)計原則更加的抽象，因為他擁有一個獨特的設(shè)計世界觀，用還原的方法和物理方法呈現(xiàn)出它的本質(zhì)，通過抽象的視覺卡片傳遞出設(shè)計的目的和原則。
設(shè)計語言
在建立設(shè)計原則后，下一步就是制定一套設(shè)計語言規(guī)范，設(shè)計規(guī)范是設(shè)計系統(tǒng)的表現(xiàn)層，面向的對象是團隊設(shè)計師和開發(fā)者，他能幫助設(shè)計師的設(shè)計輸出保持風(fēng)格統(tǒng)一。同樣也能幫助開發(fā)者高度還原設(shè)計。非常有利于設(shè)計師和開發(fā)者的協(xié)作。這套規(guī)范包含的有：字體、顏色、圖標和柵格。
組件化設(shè)計
組件化設(shè)計主要作用有兩點，一是保證多人協(xié)作效率，組件化設(shè)計可以快速完成一個簡單頁面的設(shè)計，提升設(shè)計效率；二是保持產(chǎn)品體驗的統(tǒng)一性。同時，組件化設(shè)計環(huán)節(jié)在設(shè)計系統(tǒng)中是一個相對重要的工作，需要有一個全局觀，要有較強的設(shè)計水平和溝通協(xié)作能力，這樣，組件化的落地才會得到很好的推進。
在多屏?xí)r代，我們時時刻刻都在設(shè)計產(chǎn)品界面，需適配多系統(tǒng)，其中很重要的一點是如何在多系統(tǒng)之間保持體驗一致性，很多人想到的就是規(guī)范，要想做一套嚴謹邏輯好，靈活的設(shè)計規(guī)范，那么原子設(shè)計可以幫助我們來很好的實現(xiàn)它，它在構(gòu)建設(shè)計系統(tǒng)中算是比較科學(xué)的一種方法，國外很多設(shè)計團隊都在使用這樣的設(shè)計方法。比如以下這幾個團隊：
1、Airbnb
Airbnb設(shè)計副總裁Alex Schleifer在IXDC2017國際體驗設(shè)計大會上分享了這一創(chuàng)新React Sketch app 管理設(shè)計系統(tǒng)， 這是為Airbnb的設(shè)計系統(tǒng)而設(shè)計的，其實就是個實時更新的代碼數(shù)據(jù)庫，可以實時查詢sketch數(shù)據(jù)、代碼，也可以下載圖標、設(shè)計模塊，所有工程師、設(shè)計師都可以免費下載。
△ 官網(wǎng)：https://airbnb.design/events/when-we-use-systems/
2、Frames
Frames 使用了精致的組件和先進技術(shù)，并結(jié)合 Sketch 構(gòu)建了強大的 Web 設(shè)計系統(tǒng)，同樣能滿足修改原子，全局同步更新的功能，支持響應(yīng)式布局。提供了近百個網(wǎng)頁模板，可以非常迅速地完成效果圖制作。
△ 官網(wǎng)：http://framesforsketch.com
3、Nested Symbols
這是一套免費的設(shè)計系統(tǒng)，它將按鈕、輸入框、下拉菜單、通知等控件，都制作成了嵌套符號，方便自定義和編輯。
△ 官網(wǎng)：https://www.janlosert.com/
原子設(shè)計理論最大的價值，就是為設(shè)計體系/組件庫的構(gòu)建提供思路和方法，如果你不滿足于市場上現(xiàn)有的設(shè)計系統(tǒng)，我們還可以自己創(chuàng)建。因此我們首先要為產(chǎn)品設(shè)計出一個獨特的視覺語言作為起點。這個視覺語言一定要有力度、易于擴展，必須能在所有地方奏效！
接下來就以 Sketch Library 功能來實現(xiàn)組件庫的創(chuàng)建。
第一步：定義顏色（color）
將顏色添加 Main、Text、Status 等一級分類，例如：Color/Status；再添加二級分類，例如：Color/Status/Success 等，命名需使用「 / 」 符號區(qū)分層級結(jié)構(gòu)。定義好顏色和命名后，將每個顏色轉(zhuǎn)換成 Symbol，便可統(tǒng)一調(diào)用。
第二步：定義字體（font）
根據(jù)設(shè)計規(guī)范，將不同字號的文字樣式羅列出來，例如：Title 1、Body、Body2 等，按照「樣式名稱/顏色/對齊方式」的層級結(jié)構(gòu)，將文字賦予 Text Style，整理出所有的字體樣式。
第三步：定義圖標（icon）
將圖標放置在 24*24px 大小畫板內(nèi)，從定義好的顏色系統(tǒng)中選擇合適的 Symbol，這樣替換圖標顏色時直接選定義好的顏色就可以了。在屬性面板中鎖定尺寸（size）大小，并把調(diào)整尺寸（Resizing） 設(shè)為上下左右同時吸附，以確保圖標在使用時可以等比縮放。
第四步：加入其他元素（Elements）
根據(jù)以上對原子的定義和命名方式，依次完成對其他原子、分子和組織的定義，例如：按鈕、表單、空狀態(tài)等，整個過程都是通過 Symbol 的不斷嵌套，最終實現(xiàn)組件庫的創(chuàng)建。
第五步：加入組件庫
使用快捷鍵「cmd+, 」打開 Preferences 面板，選擇「Libraries」（組件庫）標簽，點擊「Add Library」（添加組件庫）按鈕添加剛才的 Sketch 文件，完成后就可以從其他的 Sketch 文件中，對此庫里的元素進行調(diào)用了。
寫在最后，原子設(shè)計是一套具有科學(xué)嚴謹?shù)膭?chuàng)建設(shè)計系統(tǒng)的方法論，是一個構(gòu)建UI系統(tǒng)的心理模型。
原子設(shè)計使我們可以將我們的界面UI細分為原子元素，并通過這些元素組合在一起形成最終的界面。
原子作為整個理論最基礎(chǔ)的元素，當我們改變其中的原子時，整個體系都會發(fā)生變化。原子的設(shè)計概念和sketch中的“符號”有異曲同工之妙，當我們改變其中一個元素時，其他所有包含這個元素的頁面都會發(fā)生變化，可以保證整個系統(tǒng)的一致性和層次感。原子設(shè)計為界面元素提供了應(yīng)用規(guī)則和組織原理，這套方法論對于設(shè)計系統(tǒng)建立、團隊協(xié)作、產(chǎn)品迭代都具有非常重要的指導(dǎo)意義。
經(jīng)常有同學(xué)問ios設(shè)計規(guī)范，安卓設(shè)計規(guī)范在哪看這類問題，最后，來推薦一些大平臺的設(shè)計網(wǎng)站，上文出現(xiàn)過的下面就不重復(fù)了。我們耳熟能詳?shù)膬?yōu)秀設(shè)計都是來自于這些世界互聯(lián)網(wǎng)公司，說真的，審美這東西還真是人家說了算～
反正看看又不要錢，都去康康唄～
Google Design
谷歌設(shè)計中心，它非常全面的展示了谷歌的設(shè)計工作和概念。包括Material Design在內(nèi)的所有關(guān)于設(shè)計、體驗、產(chǎn)品等互聯(lián)網(wǎng)領(lǐng)域的探索。
△ 網(wǎng)址：https://design.google/
Fluent Design
微軟基于Windows10的設(shè)計語言，包括人機界面布局、控件、樣式及資源下載。
△ 網(wǎng)址：https://www.microsoft.com/design/fluent/#/
IBM Design Language
IBM設(shè)計語言是偉大設(shè)計的代名詞，他將人們的需求轉(zhuǎn)化成精心打造的產(chǎn)品。在這里可以學(xué)習(xí)IBM設(shè)計團隊一用戶為中心設(shè)計的新思維方式。
△ 網(wǎng)址：https://www.ibm.com/design/
Facebook Design
臉書設(shè)計官網(wǎng)，在國內(nèi)，我們常常看到臉書的設(shè)計文章被翻成中文為中國設(shè)計師所學(xué)習(xí)
△ 網(wǎng)址：https://facebook.design/
Uber Design
作為全球第一家即時打車應(yīng)用，優(yōu)步其超前的設(shè)計理念和優(yōu)秀的用戶體驗成為同類產(chǎn)品競相模仿的對象。
△ 網(wǎng)址：https://www.uber.deign.com/
Ant Design
螞蟻金服設(shè)計平臺是阿里旗下子公司，基于螞蟻金服生態(tài)系統(tǒng)的跨設(shè)計與開發(fā)的體驗解決方案。
△ 網(wǎng)址：https://design.alipay.com/
參考資料
《原子設(shè)計》官網(wǎng)
Airbnb 設(shè)計規(guī)范
Apple 設(shè)計規(guī)范
Material Design設(shè)計規(guī)范
Google及其他
文章來源：tob.design
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
組件化設(shè)計思維，能夠提升設(shè)計團隊的生產(chǎn)力，讓設(shè)計師專注于設(shè)計上的創(chuàng)意，同時讓設(shè)計師完成更多產(chǎn)品需求和提升團隊的溝通效率
寫在前面
組件化設(shè)計的流程，經(jīng)過實際工作的鍛煉和思考，具體可以拆分為 3 個方面：
1. 明確組件化設(shè)計的內(nèi)容。
2. 場景設(shè)計走查。
3. 組件化設(shè)計驗證效果。
一. 組件化設(shè)計的案例（界面展示篇）
小結(jié)：
組件化設(shè)計，需要設(shè)計師要有一個整體性的設(shè)計思維，要有很強的設(shè)計能力和良好的溝通協(xié)作能力，同時設(shè)計師要深入理解業(yè)務(wù)，這樣組件化設(shè)計才能很好的在團隊內(nèi)落地推行。
組件化設(shè)計的優(yōu)點有很多，能夠提升設(shè)計師的輸出效率，讓設(shè)計師更專注于設(shè)計上的創(chuàng)意思考，提升溝通效率。
二. 原子設(shè)計方法論
原子設(shè)計方法論是由國外設(shè)計師 Brad Frost 提出的，他從化學(xué)元素周期表中得到啟發(fā)，發(fā)現(xiàn)原子結(jié)合在一起，可以形成分子，然后形成組織。
Brad 把原子設(shè)計的方法論應(yīng)用到界面設(shè)計中，用心觀察會發(fā)現(xiàn)，界面是由一些基本的元素組成，顏色、文字、圖標等都是一個個原子。
原子設(shè)計方法論，是由原子、分子、組織、模版和頁面共同協(xié)作，可以幫助我們創(chuàng)造出一套符合公司產(chǎn)品的設(shè)計系統(tǒng)。
原子設(shè)計方法論是為了幫助我們?nèi)ソ⒃O(shè)計系統(tǒng)，目前逐漸被國內(nèi)外的一些大公司，應(yīng)用于創(chuàng)建統(tǒng)一的公司產(chǎn)品設(shè)計系統(tǒng)。
接下來，我們以金融產(chǎn)品為例 ，對原子設(shè)計方法論進行拆解，深入思考原子、分子、組件、模塊和頁面在界面設(shè)計中的定義是什么，以及對應(yīng)的元素是什么，元素之間又是如何組合的。
原子
用戶界面設(shè)計中的原子，是構(gòu)成界面的基本元素。是一個單獨的元素，如圖標、標題、色彩等以及原子之間組合形成的新的元素組合。
我們開展一個項目時，為了保證各個頁面保持統(tǒng)一的設(shè)計風(fēng)格，我們會制定一套視覺規(guī)范，定義的內(nèi)容包括：字體、顏色、柵格和圖標，這些就是界面中最基礎(chǔ)的原子。在關(guān)鍵的設(shè)計元素上，保證各個設(shè)計師達成一致，這樣就能很大程度的保證不同頁面的設(shè)計風(fēng)格統(tǒng)一，并在這個基礎(chǔ)上去探索更有價值和創(chuàng)意的設(shè)計方案。
分子
兩個原子即可組成一個分子，以按鈕為例：包含了文字、色塊、柵格。
文字傳達含義，顏色定義了按鈕的特性，柵格為按鈕定義了一個尺寸和規(guī)范。
把單獨的元素做一個簡單的組合，是我們做界面設(shè)計的一種方法，組合的方式簡單且可復(fù)用性很好，作為開發(fā)者可以根據(jù)規(guī)則進行編寫代碼，提升產(chǎn)品的迭代效率和產(chǎn)品的一致性。
界面設(shè)計中的表單為例，表單是一個非常常見的設(shè)計元素，一個表單分子由分割線、文案、Icon和分割線等原子組成。原子組合之后，可以得到是一個可以應(yīng)用在功能模塊的組合。
組織
我們把分子和原子做組合，就可以創(chuàng)建復(fù)雜的、可擴展性的模塊，然后變成一個組織。
組件在提升設(shè)計師設(shè)計效率方面有著很重要的意義，設(shè)計師可以把界面中常用的組件模塊進行分類整理，比如：圖片、卡片、輸入框等，可以解決設(shè)計師日常的設(shè)計需求。
以金融產(chǎn)品為例，基本分為 3 類 ：內(nèi)容、表單、卡片化的設(shè)計。
每個卡片化的內(nèi)容設(shè)計盡量保持統(tǒng)一性，這樣方便負責不同模塊內(nèi)容的設(shè)計師復(fù)用同一個組件，就可以完成不同頁面的設(shè)計，提升項目的設(shè)計效率。
模板
模版一般應(yīng)用在設(shè)計系統(tǒng)的交互階段，保證原型階段的多方案的展示；模版內(nèi)容，后面可以優(yōu)化，這樣可以降低設(shè)計的成本。模版的價值可以讓設(shè)計師，更專注于頁面的結(jié)構(gòu)化設(shè)計排版和對頁面布局的思考。
那模版的原理是什么呢？
就是產(chǎn)品的原型圖，就是組織和分子的組合，會先形成一個完整的頁面框架，作為一個初步的設(shè)計方案，作為團隊項目的前期溝通所用。
以教育和金融界面為例，如下圖：
界面
界面設(shè)計是把占位符內(nèi)容替換成產(chǎn)品設(shè)計需要的文案，在模板的組合上進行完善，會形成界面的設(shè)計方案。
界面設(shè)計是模板的具體的展示設(shè)計，是真實內(nèi)容的設(shè)計方案。
通過圖標和文字的組合，清晰的展示用戶所需要的場景，加上內(nèi)容，就會變成一套完整的界面設(shè)計方案。
如下圖所示：
以金融產(chǎn)品的場景設(shè)計為例，有了實際的內(nèi)容后，我們可以發(fā)現(xiàn)通過組合組件，就能很好的呈現(xiàn)界面內(nèi)容。
如下圖所示：
小結(jié)：
原子設(shè)計方法論為界面元素提供了應(yīng)用規(guī)則和組織整理，原子設(shè)計方法論在建立設(shè)計系統(tǒng)、團隊協(xié)作、產(chǎn)品迭代優(yōu)化等方面，都有很好的價值和意義。
三. 組件化設(shè)計的流程 ？
設(shè)計規(guī)范和 Ui kit 是我們管理一個或多個App統(tǒng)一性和設(shè)計效率的工具，同時探索如何更有效的提升設(shè)計效率。像 滴滴等Ant Design 設(shè)計系統(tǒng)，他們的產(chǎn)品體驗非常好，用戶使用產(chǎn)品時能夠有效的滿足其需求，良好的用戶體驗背后都有著一套好的產(chǎn)品設(shè)計系統(tǒng)在運作。
如下圖，國外的金融產(chǎn)品運用組件規(guī)范化后的界面設(shè)計展示 ：
系統(tǒng)性的組件化設(shè)計思維的好處是 ：
1. 產(chǎn)品設(shè)計迭代優(yōu)化時，版本和版本之間的差異性就可以得到很好的解決。
2. 界面設(shè)計之間的設(shè)計風(fēng)格和設(shè)計樣式就會統(tǒng)一。
3. 界面設(shè)計的效率和質(zhì)量會穩(wěn)定輸出。
在我們所經(jīng)常使用的 App 產(chǎn)品中，如 蘋果、Airbnb、自如、Ant Design 等，用戶體驗都非常好，用戶使用產(chǎn)品時能夠快速的解決需求，優(yōu)質(zhì)的用戶體驗背后都有著一套強大的專業(yè)設(shè)計系統(tǒng)所幫助。
思考：我們?yōu)槭裁葱枰M件化設(shè)計 ？
一. 統(tǒng)一產(chǎn)品設(shè)計體驗
1. 以京東金融為例，在京東金融最近更新的版本中，我們看到財富界面和生活界面，同樣的模塊可以復(fù)用，對于復(fù)用性高的內(nèi)容，應(yīng)該提煉為通用組件，提高設(shè)計效率。
2. 如上圖所示，對于會員專區(qū)或者熱門活動是金融類產(chǎn)品中最為常見的產(chǎn)品形式，在京東金融的首頁出現(xiàn)，布局往往是左右結(jié)構(gòu)，或者上下結(jié)構(gòu)；因為這類產(chǎn)品具有較強的引導(dǎo)屬性，所以會把右側(cè)的運營的插畫設(shè)計相對突出，以吸引用戶的注意力。會員專區(qū)的卡片化設(shè)計，具有較強的復(fù)用性，可以列為通用組件，這樣就可以保證兩個產(chǎn)品界面的卡片化的設(shè)計風(fēng)格和樣式上的一致性原則。
二. 提高團隊協(xié)作效率
1. 面對相同的設(shè)計需求時，可直接調(diào)用相關(guān)組件，節(jié)省重復(fù)性的設(shè)計工作，提升溝通效率。
2. 借助組件化設(shè)計，可以快速開展工作，達到復(fù)用的價值。
3. 通過設(shè)計語言可以完成一個界面設(shè)計，在下面案例中，主要的元素由文字、柵格線、Icon 等組成界面結(jié)構(gòu)，確定好排版布局和圖標的設(shè)計風(fēng)格后，完成產(chǎn)品的界面設(shè)計。
三. 降低開發(fā)成本
1. 在實際工作中，如果每次制作一個新頁面都設(shè)計不同的組件，開發(fā)就要寫新代碼，增加開發(fā)時間成本。
2. 如果我們常用的模塊作成組件庫，開發(fā)遇到相同的組件時，可直接調(diào)用組件，復(fù)用相關(guān)代碼，這樣可以降低開發(fā)成本。
組件化設(shè)計流程，
經(jīng)過實際工作的鍛煉和思考，具體可以拆分為 3 個方面：
一. 明確組件化設(shè)計的內(nèi)容
我們需要整體思考，明確可以復(fù)用的的內(nèi)容、組件，以熱銷理財場景為例，金融產(chǎn)品都會需要用戶進行選擇理財產(chǎn)品，可定義為理財產(chǎn)品的卡片化設(shè)計組件，適合組件化設(shè)計的模塊。產(chǎn)品已有組件的優(yōu)化，設(shè)計師要具體分析，分析組件體驗現(xiàn)狀，發(fā)現(xiàn)問題然后針對性解決問題。
使用產(chǎn)品的場景設(shè)計、交互體驗、設(shè)計風(fēng)格三方面都要思考，推出更好的產(chǎn)品設(shè)計的解決方案。以京東金融的財富和首頁的界面設(shè)計為例，應(yīng)用的都是卡片化設(shè)計的理財模塊。在開發(fā)新項目的時候，同樣可以調(diào)用同一個理財產(chǎn)品的模塊化組件，不僅能保證產(chǎn)品上體驗的一致性，也能降低團隊的設(shè)計成本。如下圖所示：
二. 場景設(shè)計走查
1. 全面體驗走查線上的移動端產(chǎn)品設(shè)計,對用戶的交互行為鏈路有一個清晰的理解，思考當前線上的產(chǎn)品體驗。
2. 線上產(chǎn)品功能的迭代一般業(yè)務(wù)方都會有一個周期性安排，因此在走查時要及時和業(yè)務(wù)方溝通，在這個基礎(chǔ)上再進行組件化的方案設(shè)計。
設(shè)計師使用金融產(chǎn)品，在設(shè)計的時候要考慮到每一個環(huán)節(jié)。
我們先來看下京東金融的案例，這兩個閃屏運營彈窗除了場景不一樣以外，其他元素都是高度統(tǒng)一的，組件化設(shè)計的優(yōu)勢在于，只需要改變組件的部分元素就能適配各種場景。如下圖所示：
三. 組件化設(shè)計驗證效果（如下圖）
組件化的設(shè)計方案完成對接開發(fā)上線后，我們需要從兩個方面來驗證組件優(yōu)化后的效果：
1. 組件化設(shè)計是否可以滿足各業(yè)務(wù)方的需求和場景化的設(shè)計。
2. 通過定性數(shù)據(jù)追蹤功能是否能促進業(yè)務(wù)的關(guān)鍵的設(shè)計指標的提升，這些數(shù)據(jù)可以是轉(zhuǎn)化率等數(shù)據(jù)指標，用戶的反饋也是一個很好的輔助驗證方法。
四 如何建立組件化設(shè)計系統(tǒng) ？
每個團隊的體量和業(yè)務(wù)訴求不一樣，個性化的組件化設(shè)計系統(tǒng)包含有設(shè)計原則、設(shè)計語言和組件庫，這是一個爭議的概念。
建立設(shè)計系統(tǒng)的原因：
1. 建立設(shè)計系統(tǒng)，可以方便團隊協(xié)作，保證體驗上的一致性。
2. 設(shè)計過程中，發(fā)現(xiàn)每個業(yè)務(wù)的形態(tài)，以產(chǎn)品的不同場景為出發(fā)點，使用一套設(shè)計系統(tǒng)，會提升用戶體驗。
3. 幫助產(chǎn)品的迭代和優(yōu)化，同時提升產(chǎn)品和用戶的體驗好感度。
1 設(shè)計原則（設(shè)計理念、品牌指導(dǎo)）
設(shè)計的本質(zhì)是解決問題，制定設(shè)計原則時要建立在這個設(shè)計中心思想上。
蘋果的設(shè)計系統(tǒng)：
把審美作為第一要素存在于設(shè)計原則中。
1. 創(chuàng)意審美的重要性。
2. 隱喻的價值。
3. 易用性原則。
4. 及時的反饋。
安卓的設(shè)計系統(tǒng)：
1. 跨平臺的設(shè)計適配原則。
2. 材料的設(shè)計價值思考。
3. 圖形、強調(diào)、大膽的設(shè)計語言。
4. 動效的服務(wù)設(shè)計價值。
2 設(shè)計語言（色彩、字體、柵格、圖標）
色彩的視覺語言規(guī)范，我們需要定義產(chǎn)品的基礎(chǔ)色板和中性色板，基本色板包含了產(chǎn)品的主題色和輔助色，生成每個顏色的亮色和暗色的衍生色。中性色板包含黑白灰，這類顏色在界面設(shè)計中使用，能讓頁面內(nèi)容具有良好的層次關(guān)系，提升閱讀的效率和用戶體驗。
字體規(guī)范是界面設(shè)計中的構(gòu)成之一，用戶通過文字來理解和達成目標，完整的字體系統(tǒng)能有效的提高用戶的體驗和理解效率。字體的規(guī)范定義需要從三個方面出發(fā)：字重、灰度色、字階。
界面設(shè)計的排版布局一般使用的 8 柵格法，它能適配不同尺寸的屏幕分辨率，界面元素大小和間距都是8 倍數(shù)為基準。
圖標設(shè)計，隱喻，保持圖標之間一致的設(shè)計風(fēng)格和表現(xiàn)形式。系統(tǒng)圖標為例子：以1@x圖為例子，常見的尺寸有： 16px、24px、32px、48px等。
3 阿里系團隊，制作的 Kitchen 組件化設(shè)計系統(tǒng) 很好 ：（如下圖）
五. Banner 組件化設(shè)計、B 端組件化設(shè)計等平面組件化設(shè)計的案例如下：
總結(jié) ：
佐藤寫過一本書［佐藤可士和的超整理術(shù)］，里面講述了他自己是如何通過整理自己的思路、對話、工作室、隨身物品等設(shè)計來讓工作變得并且最終對自我更加深入的了解 。
生活和工作離不開“整理術(shù)”，優(yōu)秀的設(shè)計應(yīng)該要從“ 整理和總結(jié) ”開始，比如：組件化的設(shè)計思維，可以看做是一種 “設(shè)計的整理術(shù)” 。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
這是Taobao APP 商詳購買頁面底部Button。一般情況下，品牌刷新或VI色調(diào)整，都會體現(xiàn)在界面的核心功能區(qū)域，例如Button或者Icon上。從‘立即購買’Button的色彩變化，便可以判斷Taobao經(jīng)歷了3次重要的VI色調(diào)整。
下面顏色是我記憶里的淘寶VI色（大致色值），淘寶VI色的調(diào)整也是相應(yīng)了互聯(lián)網(wǎng)設(shè)計的主流色彩表現(xiàn)趨勢：
[ 星巴克官網(wǎng)首屏截圖 ]
常人看到這樣的界面并不會有任何意見。用‘色彩認知’來講講我的觀察。星巴克的主色是墨綠色，在官網(wǎng)大面積使用，則帶來‘視覺壓抑’的感覺，我想通過簡單地改變，來提升星巴克的品牌氣質(zhì)。
我用Photoshop吸管工具從官網(wǎng)首頁上的一張照片中提取顏色：香檳色（Champagne），這樣的顏色在墨綠色底色上有較好的辨識度和品質(zhì)感，適用于標題性文字顏色。
[ 從照片中提取顏色 ]
在前期的訓(xùn)練中，也可將圖片馬賽克，這會輔助我們挑選顏色，當你足夠熟練后，即可直接用吸管在照片上選擇更豐富的色彩。
[ 從馬賽克照片中提取顏色 ]
香檳灰（Champagne gray），可用作常規(guī)閱讀段落文字顏色，在墨綠色上面會顯得柔和、舒適。
我重新設(shè)計了首頁的文字與版式：
[ 優(yōu)化后的效果 ]
下面是之前的效果。對比看看：
[ 官網(wǎng)截圖 ]
這是最簡單的用戶感官上的提升。而更重要的是‘用戶心理’上的提升，這將在用戶閱讀文字內(nèi)容時發(fā)生。我們先看看文字內(nèi)容（翻譯如下）：
標題 | 事情在變，但我們?nèi)匀辉谶@里為您服務(wù)。
正文 | 我們已暫時關(guān)閉店內(nèi)咖啡廳，但部分雜貨店和直通車位仍然開放。某些市場還提供星巴克提供的Uber Eats服務(wù)。請訪問我們的商店查找器以獲取的商店營業(yè)時間和營業(yè)地點。
按鈕 | 尋找門店
這段文字是星巴克官方在疫情期間所寫，并不是一段激動人心的品牌宣傳文案，所以我們在設(shè)計的時候應(yīng)使用常規(guī)的文字顏色，為避免白色在墨綠色下帶來的刺眼，我選擇白灰色（#e3e3e3）的字體顏色。標題想表達的潛意識文字是：‘雖然我們碰到了困難，但是我們依然堅持為您服務(wù)’。我改為香檳色，來體現(xiàn)星巴克積極的態(tài)度與服務(wù)的品質(zhì)，會顯得更有力度。
在頁面中使用這樣的顏色，同樣可以提升設(shè)計的活躍度，為品牌帶來更好的品質(zhì)。例如，將顏色應(yīng)用到星巴克官網(wǎng)中小圖標設(shè)計和文字上面，來提升品質(zhì)感與活躍度：
[ 優(yōu)化后的設(shè)計 ]
[ 官網(wǎng)截圖 ]
對我來說，OODA是一種行動思維，它可以改變您在設(shè)計工作中的思維方式?？梢赃\用在您的設(shè)計執(zhí)行和管理中，乃至您所在的任何領(lǐng)域、包括您所擔任的任何角色。
文章來源：優(yōu)設(shè) 作者：Riixiong
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
頭腦風(fēng)暴是一種常用的設(shè)計方法，能夠幫助設(shè)計師開闊思維，快速獲取大量靈感與方案，當然，這是在理想的情況下。實際上，很多頭腦風(fēng)暴是漫無目的，效率低下，毫無收獲的。而頭腦風(fēng)暴需要很多人參與，如果浪費了大家的時間而一無所獲，那發(fā)起者簡直尷尬到能摳出兩室一廳。
那么，設(shè)計師如何才能地組織一場頭腦風(fēng)暴呢？下面我將按“開始前”，“進行中”，“結(jié)束后”的順序，介紹整個頭腦風(fēng)暴流程中提率的一些心得體會。
我們一定是為了解決某個問題，而不是為了閑聊組織頭腦風(fēng)暴的。所以我們要先明確問題是什么，才能引導(dǎo)大家?guī)椭覀儭?
我們可以試著用一句話去概述它，注意必須要具體，不能太含糊。“如何設(shè)計一張海報”就是一個很糟糕的描述。試著把目標用戶、業(yè)務(wù)目標、場景加進這句話，比如“如何設(shè)計一張能夠吸引應(yīng)屆畢業(yè)生加入XX設(shè)計中心的朋友圈海報”。
明確具體問題后，我們還需要將它進行拆解成一個個關(guān)鍵問題，這樣才能有序展開討論，而不是漫無目標地侃大山。比如剛剛提到的那個問題，就可以拆成“應(yīng)屆生的關(guān)鍵詞是什么”、“應(yīng)屆生找工作時最關(guān)心什么”、“XX設(shè)計中心的關(guān)鍵詞是什么”、“什么樣的元素能夠代表設(shè)計師”、“什么樣的朋友圈海報形式比較吸引人”等等。
有了明確的問題和關(guān)鍵問題后，我們要做的就是將它們在頭腦風(fēng)暴按步驟上提出來，讓大家跟著我們的節(jié)奏去展開腦洞，這也就是頭腦風(fēng)暴的流程。一場頭腦風(fēng)暴往往包含背景介紹、多輪腦暴、闡述想法、投票等環(huán)節(jié)，作為組織者需要詳細規(guī)劃每個環(huán)節(jié)的順序、時間，特別是需要控制總時長（盡量別超過一個半小時），預(yù)留中場休息的時間，畢竟大家很難長時間集中注意力。
一般來說頭腦風(fēng)暴里有三種角色，主持人、記錄員和參與者。參與者的職責不用介紹了。主持人的職責是帶著大家按節(jié)奏討論，記錄員的職責是記錄大家的想法和拍照，缺一不可。
參與人員的數(shù)量一般在5-10之間，人數(shù)太少收集不到足夠的想法，人數(shù)太多討論效率低，耗時長。參與人員的身份需要根據(jù)你想解決的問題確定，如果是比較大型的項目，參與的人員需要多元化，把產(chǎn)品經(jīng)理、程序員都拉進來，方便獲得不同視角的觀點，也能夠提高合作方的參與感。在我們上面舉的海報例子中，如果能拉應(yīng)屆設(shè)計師加入腦暴，將非常有幫助。
除了筆、便利貼、A4紙，我們還需要準備一份寫了每個步驟需要完成任務(wù)的PPT，幫大家明確任務(wù)。
大家的工作都比較忙碌，所以請至少提前一天邀請大家參與頭腦風(fēng)暴，并且簡單交代背景，提供一些資料，方便大家提前消化。
首先要簡單跟大家介紹一下背景信息，以及接下來的大概流程，活躍一下氣氛，帶大家進入狀態(tài)，講段子也算是新世紀設(shè)計師的必備技能了。
頭腦風(fēng)暴的目的并不是要獲得考慮得非常周全、詳細，能夠直接落地的方案，而是大量的想法和靈感。所以我們需要鼓勵大家在短時間（5-10分鐘）內(nèi)輸出盡可能多的想法（四五十個不算多），不要太糾結(jié)可行性、成本等細枝末節(jié)的問題。
作為主持人，切記不要當場對參與者的想法做出負面評論，或者談?wù)搱?zhí)行細節(jié)的事情，以免打擊參與者的積極性。如果有領(lǐng)導(dǎo)參與，要注意避免領(lǐng)導(dǎo)的威壓影響其他參與者打開腦洞。
互聯(lián)網(wǎng)從業(yè)者大多是思維活躍的可愛人兒，開一個頭他們就能嘮上一天，所以主持人一定要留意時間，按照既定計劃，當大家偏題時引導(dǎo)大家回歸到對主題的討論上。
如果整場頭腦風(fēng)暴的時間超過半個小時，就需要給大家安排中場休息的時間，可以提前準備一些零食和飲料，幫助大家放松，以便接下來能夠集中注意力接著討論。
記錄員應(yīng)該將大家的想法和每輪討論、投票的結(jié)果記錄下來，方便后面回溯和汲取靈感。拍照也是很重要的工作，這將為最后的設(shè)計提案提供寶貴的圖片資料，讓整個設(shè)計流程展現(xiàn)在決策方面前，提高說服力。
主持人應(yīng)該將簡單總結(jié)一下大家討論、投票的結(jié)果，表達對大家百忙之中參與頭腦風(fēng)暴的感謝，為下次拉人做情感鋪墊（開玩笑）。
會后需要及時對頭腦風(fēng)暴的結(jié)果進行整理和分析，并將結(jié)論以郵件的形式同步給參與者（表達對參與者的尊重）和領(lǐng)導(dǎo)（同步工作結(jié)果）。整理時可以按可行性和效果兩個維度劃分idea，找出比較平衡的方向。
頭腦風(fēng)暴是很有效但也很容易浪費時間的一種設(shè)計方法，開始前詳細規(guī)劃，進行中穩(wěn)穩(wěn)把控，結(jié)束后及時總結(jié)與同步，能夠幫助我們提率。
另外，頭腦風(fēng)暴只是為我們提供了靈感和方向，并不一定要選擇獲得票數(shù)最多的方案執(zhí)行，還是需要根據(jù)實際做判斷，不要過于機械。
文章來源：站酷 作者：失靈
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
色彩在UI設(shè)計中的作用：加深品牌印象與品牌感、引導(dǎo)用戶視覺凹增加易讀性、區(qū)分信息交互的狀態(tài)、營造氛圍傳遞熱度……
不管是做 UI 設(shè)計還是畫插畫，有很多同學(xué)覺得自己是因為天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結(jié)的太少，從來都是憑感覺和運氣去配色，但配色都是有講究的。
一個設(shè)計作品呈現(xiàn)到用戶面前，第一眼進入眼簾的就是產(chǎn)品的視覺表現(xiàn)，而產(chǎn)品的色彩在其中起到了舉足輕重的作用，毫無疑問色彩搭配對于設(shè)計師來說是非常重要的。那么具體到實際項目中該使用什么怎樣的色彩，需要怎么做呢？
用戶界面是一個設(shè)計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制，界面可能會顯得花哨而沒有主次；但過于拘謹又容易使界面保守，難以激發(fā)用戶情緒，下面以Bee express項目的實例來理性推導(dǎo)制定一套色彩系統(tǒng)。
做過設(shè)計的同學(xué)應(yīng)該都知道顏色模式：RGB、CMYK、Lab 等等，這里不做過多的解釋了。另外每個顏色具有一定的性格特征和表達方式，而且都會有正反兩面。雖然每種色彩都有正向性格特征，但是我們在定位主體色之前一定要知道所選擇色彩的負面特征對企業(yè)是否會帶來負面的影響，
開始之前我們需要了解在配色過程中需要避免出現(xiàn)的問題，如果你經(jīng)常出現(xiàn)下列的問題，保證你在試用期內(nèi)一次性就能拿到全部薪資，emmm……
雖然設(shè)計是相通的，但是在不同的設(shè)計領(lǐng)域進行配色時，依然會存在巨大的區(qū)別。更換品牌的主體色，都不會是因為設(shè)計師自己的決定，而是公司在商業(yè)策略上優(yōu)先做出了調(diào)整，然后通過品牌視覺上的變更將這個信息傳遞給消費者。
Bee Express快遞、速遞柜業(yè)務(wù)為主，前期的主色及視覺形象以橙黃色為主，為了避免視覺跳躍性太大，以及后期IP形象（蜜蜂吉祥物）打造，本次品牌色彩升級在原有基礎(chǔ)上優(yōu)化了色調(diào)，以保證后期產(chǎn)品的易用性和延展性，并利用最科學(xué)、最適用的方式推導(dǎo)出輔助色，以提升應(yīng)用視覺的豐富性和感官體驗。
express原主色：
為了不影響原有色調(diào)前期的視覺傳播，即在原有主體色的基礎(chǔ)上調(diào)整SHB的數(shù)值，讓色彩更具視覺沖擊力，在色彩襯托（字體、圖標）更清晰。
通過調(diào)整后的主體色也能看出，明亮清晰的主體色（品牌色）也更適合在界面中的運用，為信息傳遞、引導(dǎo)操作、品牌價值帶來更大的提升。
同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性，整體感較強，產(chǎn)生低對比度的和諧美感，給人協(xié)調(diào)統(tǒng)一的感覺。
具體是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產(chǎn)生的色組。分別往淺色/深色方向按均勻數(shù)據(jù)增減，各產(chǎn)生5個坐標值。
綜上能看出，使用同一色系即可完成一個項目，但是對于中大型項目來說實在是過于單調(diào)，沒有太多的層次感，因此我們需要多色搭配為輔。多色的輔助顏色可設(shè)定不同的任務(wù)屬性和情感表達，再搭配中性色黑白灰，能賦予更多的變化和層次。
根據(jù)主體色 H（色相）為基礎(chǔ)，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個顏色，也就是將 360° 色環(huán)分割為 24 份，（24份在360°色環(huán)上，每一個色相的角度為15°），最終得到下圖24色。
輔助色需要滿足的兩個條件：
和品牌色有明顯區(qū)分：避免所選輔助色感官上給用戶視覺區(qū)別與品牌色差距不大，傳遞的調(diào)性太過一致；
不能過于突兀：根據(jù)色彩原理，互補色是最能與品牌色本色產(chǎn)生視覺感官對比的顏色，但可能會有些突兀。為了讓顏色的輔助起到豐富畫面的作用，而不是反而讓整個版面顯得不和諧，所以選擇互補色的鄰近色作為輔助色，避免直接使用互補色。
基于品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調(diào)性有明顯區(qū)分的類似色；兩個互補色的鄰近色。
類似色搭配：使用色相相近的顏色，頁面元素不會相互沖突，更加協(xié)調(diào)有質(zhì)感。
互補色搭配：選擇使用互補色，最佳搭配是一種作為主色，另一種用于強調(diào)。它們有著非常強烈的對比度，用在需要特別強調(diào)某個元素時會非常有效。
每一種顏色都有自己的「感官明度」，也就是發(fā)光度。根據(jù)現(xiàn)有的使用場景，類似色和互補色大都用在同層級的信息展示上，而當我們將最終得到的輔助色擺放在一起之后發(fā)現(xiàn)，雖然我們提取出的輔助色明度色值都一致，因為顏色本身自帶的感官明度屬性有所區(qū)別，導(dǎo)致視覺上會有明顯的明暗差別。需要通過發(fā)光度來進行最終的顏色校正。
校準方式：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調(diào)整為 Hue（色相），就可以通過無彩色系下的明度色值，進行對比，使色彩視覺感官保持一致（青色和藍色屬冷色調(diào)，固需加深）。
根據(jù)上面同色系的明度、純度對比規(guī)則，對所有定義的輔助色進行明度和純度的輔助色彩輸出，最終得到輔助色色板。H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產(chǎn)生色組。分別往淺色/深色方向按均勻數(shù)據(jù)增減，各產(chǎn)生5個坐標值
刪除最左側(cè)的3種同色系，因明度過低時，顏色已經(jīng)非常接近于黑色，色相在肉眼上幾乎已經(jīng)趨于一致。最后得到基于品牌色推導(dǎo)出的全色系色階色板。
配色常常從確定主色開始，根據(jù)行業(yè)類型和視覺訴求的需要，選擇一種居于支配的色彩作為主調(diào)色彩，構(gòu)成畫面的整體色彩傾向。然后選擇輔色，添加點綴色，最后按照色彩組合的原則完成設(shè)計中的需求。
雖然有了以上的配色方式，但一套標準的色彩系統(tǒng)還會包含中性色規(guī)范、顏色的使用規(guī)范等等。相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學(xué)的方法，如果想更加優(yōu)秀，還需要進一步深入地去學(xué)習(xí)色彩理論知識，多看優(yōu)秀的配色作品提升審美，總之要多看、多實踐和多思考。
文章來源：優(yōu)設(shè) 作者：能量眼球
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
用戶隱私安全在產(chǎn)品設(shè)計中是很重要的一個環(huán)節(jié)，本文從用戶體驗角度切入，從匿名模式、減少永久性和減少公開性三個方面展開分析。
我們先看?組來??優(yōu)的2019年6?的調(diào)研數(shù)據(jù)：70%的美國?認為，與5年前相?個?信息變得更不安全。尤其是?學(xué)歷?收?群體。由此可??戶對個?信息數(shù)據(jù)的隱私擔憂?以往更甚。
?戶隱私安全很重要，涉及的范圍和?度也很多。本次的分析從?戶體驗?度切?，涉及如下三個??：
下圖是Google系A(chǔ)pp（Google AppChromeYouTubeandGoogle Map）匿名模式切換，從交互體驗上來說有如下?個特點：
匿名模式不是最近才流?的功能，最早提供隱匿模式的是蘋果safari瀏覽器，早在 2005年就?持了匿名模式。Chrome瀏覽器在2008年就開始?持此模式。雖然由來已久，為什么到了2020年，匿名模式依然是國外互聯(lián)???趨勢呢？
我們看?組數(shù)據(jù)：
這是來?DuckDuckGo 2019年9?的調(diào)研（DuckDuckGo是美國的?款不記錄?戶?為保護?戶隱私的搜索引擎）。樣本來?美國、英國、德國和澳?利亞的成年??戶，共計3,411?的調(diào)研得出。各國?戶對使?搜索引擎的個?隱私安全?常在意（是否搜集個?的數(shù)據(jù)和記錄搜索?為）。
2020年5?DuckDuckGo?均搜索次數(shù)為6200萬。對?看2019年11?底?均搜索次數(shù)4900萬，2018年10?是2900萬。
最近?年的持續(xù)活躍度?幅增?證明了不記錄個?隱私的搜素引擎越來越受到?戶的?睞。
國內(nèi)，頭條、UC瀏覽器在搜索框輸?狀態(tài)也提供了「?痕瀏覽」??。
不僅是搜索引擎領(lǐng)域，保護?戶隱私也成為Facebook最重要的戰(zhàn)略?向之?。Facebook CEO Mark Zuckerberg在2019年 F8開發(fā)者?會上喊出「THE FUTURE IS PRIVATE」。2019年3?Mark Zuckerberg發(fā)?，主題就是《聚焦于保護隱私的社交?絡(luò)》。
我們先看國外社交媒體Stories（?故事）產(chǎn)品形態(tài)的流?。
?們總是對于所分享的內(nèi)容永遠記錄在?上感到擔憂。Stories 24?時消失緩解了?們的隱私顧慮，這讓?戶更安?地?然分享。
Stories由Snapchat?創(chuàng)，由 Facebook發(fā)揚光?。早在2019年4?，F(xiàn)acebook+Messenger Stories, Instagram Stories?活?戶數(shù)就突破5億。 2020年2-3?LinkedIn，Twitter也先后宣布將上線類似功能。
來??優(yōu)的調(diào)研報告：41%的美國?經(jīng)歷過?絡(luò)騷擾，最常?的就是在社交媒體上。23%的?戶最近經(jīng)歷的?絡(luò)騷擾來?評論區(qū)的評論內(nèi)容。27%的?戶經(jīng)歷?絡(luò)騷擾后決定不再發(fā)布任何內(nèi)容。
我們以限定評論互動的公開性為例：
2020年5?Twitter上線了新的評論功能，可以限定誰可以回復(fù)帖?的功能，提供了三種選項：誰都可以評論，只有被關(guān)注者可以評論，只有被提及者可以評論三種公開度的限定。
Instagram也在測試「評論限制」新功能，批量屏蔽/限制評論。?前已經(jīng)上線的?個例?：?戶（評論發(fā)布者）如果發(fā)布的評論含有攻擊性敏感詞，發(fā)布前伴有提示，提醒評論含有攻擊性敏感詞是否真的要發(fā)布。
注重隱私提供僅好友可?/僅??可?/僅作者可?/等多重維度的隱私設(shè)定有助于?戶更安?地參與互動。
另外?個例?是付費頻道會員：付費頻道會員-限定頻道的公開性讓內(nèi)容創(chuàng)作者減輕隱私顧慮不僅能獲得?告收?，也能得到來?會員、會費的收?，形成「忠實粉絲」社區(qū)，有助于內(nèi)容?態(tài)的社區(qū)化建設(shè)。
我們主要看YouTube的頻道會員案例：
YouTube有兩種會員模式。?種是YouTube整個平臺的付費會員，去?告，看原創(chuàng)美劇影視，消費?樂，可下載內(nèi)容的模式。第?種模式是Youtuber個?頻道付費會員，吸引忠實粉絲加?。我想說的就是第?種。
為什么?V?紅有意愿開通頻道會員？
除了獲得忠實粉絲收?變現(xiàn)的商業(yè)價值以及付費頻道會員可以為忠實粉絲提供各種專屬功能，背后也和?紅?V對個?隱私顧慮有關(guān)。
?紅?V在完全公開的社交?絡(luò)上需要始終保持?夠克制謹慎，避免引起爭議。但在忠實粉絲付費頻道專屬會員群中，?紅?V會減輕隱私顧慮，更加回歸?我。
?如在頻道會員中發(fā)布更多與個??活相關(guān)的內(nèi)容，表達更多不便在完全公開的社交?絡(luò)中的想法和感受等，因為忠實粉絲通常更具包容度，更不容易引起爭議。
YouTube頻道會員費?可以從三種會費（按?）區(qū)間選擇，?持多選：
頻道會員功能在2018年開始測試，?向粉絲數(shù)過10萬的YouTuber開放。
以上綜述，我們可以說：
1. 匿名模式：
雖然匿名模式由來已久，但仍然是當前的??基本?戶體驗設(shè)計趨勢，尤其是匿名模式的切換便捷性?常重要。
2. 減少永久性：
Stories?故事24?時消失緩解了?們的隱私顧慮，這讓?戶更安?地?然分享,已經(jīng)成為國外社交媒體平臺的必備功能，F(xiàn)acebook， Instagram平臺的最主要、最具影響?的功能之?。
3. 減少公開性：
?戶總是對在社交媒體平臺發(fā)表評論有所顧忌，限定評論的公開性能夠有助于促進?戶發(fā)帖表達，其他?戶也可以更安?地參與互動。
付費頻道會員可以限定頻道的公開性，讓內(nèi)容創(chuàng)作者減輕隱私顧慮不僅能獲得?告收?，也能得到來?會員會費的收?，形成「忠實粉絲」社區(qū)，有助于內(nèi)容?態(tài)的社區(qū)化建設(shè)。
從UE?度，我們可以為頻道會員提供專屬身份設(shè)計例如專屬徽章，專屬表情等。
THE FUTURE IS PRIVATE， 注重?戶隱私的體驗設(shè)計越來越重要！
文章來源：優(yōu)設(shè) 作者：
百度MEUX
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在當前的行業(yè)背景當中，設(shè)計師了解交互視覺就足夠了么？NO！JDCD今天帶來服務(wù)設(shè)計思維，分享好的設(shè)計將具備哪些技能點～
隨著整個行業(yè)的融合和發(fā)展，設(shè)計師職責的邊界越來越模糊，線上線下的融合，設(shè)計的鏈路也越來越長。一個優(yōu)秀的設(shè)計師，不僅要懂得視覺、交互，還要懂產(chǎn)品、運營、用戶研究等。
因此設(shè)計師輸出的產(chǎn)物不再是單一的設(shè)計稿，也許是一個優(yōu)化的建議，一個方向的描述，或者思路的呈現(xiàn)等等。好的設(shè)計師應(yīng)該是在全鏈路的各個環(huán)節(jié)，都能夠有的放矢的輸出對業(yè)務(wù)有價值的產(chǎn)物，并最終推動業(yè)務(wù)達成目標。
今天我們來聊聊服務(wù)設(shè)計思維～
服務(wù)設(shè)計作為一個融合性的學(xué)科，通過對人、物、行為以及環(huán)境和社會之間系統(tǒng)關(guān)系的梳理，以用戶為中心，圍繞用戶重新規(guī)劃組織資源，促進組織運作，提高員工效率，最終提升用戶的體驗。
概念讀起來有些生硬，我們簡單來說：
首先舉個經(jīng)典的栗子～
如果您想喝咖啡，有兩家咖啡店挨著，咖啡味道一樣，價格一樣，你會選擇哪家咖啡店消費呢？理由又是什么？同樣的兩個咖啡店，要做一款店面銷售APP，我們來看看兩家咖啡店是如何做的～
咖啡店A的做法：
召集設(shè)計師埋頭苦干了幾個月，然后交付給顧客，結(jié)果顧客在這個APP里并沒有得到想要的。
咖啡店B的做法：
與顧客交談，做研究和調(diào)研。觀察顧客們在喝咖啡前、喝咖啡時、喝完咖啡后都做些什么，并據(jù)此畫出用戶體驗地圖，找到他們在體驗地圖中的高潮和低谷點，以此找到服務(wù)的機會點，再開始尋求解決方案。
同時，團隊找到利益相關(guān)者，比如店員，聽聽他們平時遇到的問題，聽聽創(chuàng)始人對咖啡店最初的愿景，還有市場團隊、供應(yīng)商等人…這些利益相關(guān)者們在一起開一個工作坊，他們確立明確的商業(yè)目標，開始設(shè)計出一些概念，并且向已有的顧客做測試分析。他們做了技術(shù)分析，并繪制了服務(wù)藍圖，確保中后臺系統(tǒng)能支持概念的落地，他們設(shè)計出了顧客喜愛的APP。
以上兩家咖啡店的案例呈現(xiàn)中，用戶接觸到的服務(wù)產(chǎn)品最終使用效果則大相徑庭。對于咖啡店的客戶來說，咖啡店B就是做到了服務(wù)設(shè)計。
為了加深大家理解，再舉個例子～
假設(shè)你家燈泡壞了，你要換燈泡，需要個梯子。
此時產(chǎn)品設(shè)計的工作就是設(shè)計這個梯子，怎么樣才能輕便好用，美觀大方。但是服務(wù)設(shè)計要做的是思考需要個梯子換燈泡這個需求，或者是燈泡壞了需要修這個需求，基于這個需求／問題，服務(wù)設(shè)計給出的解決方案可以是：
你需要一個梯子，但不需要在家里備一個
你不需要一個梯子，你只想修好你的燈泡
以上這些方案如何選擇，如何完善，誰來買單？誰來運作？具體實現(xiàn)方式、傳達方式，包括產(chǎn)出方案，都是屬于服務(wù)設(shè)計的內(nèi)容。
為了更好的應(yīng)用服務(wù)設(shè)計，設(shè)計師們需要了解服務(wù)設(shè)計思維的基本原則，并在打造服務(wù)時，聚焦服務(wù)設(shè)計思維的原則。輔助一些工具、方法去支持和實現(xiàn)原則基礎(chǔ)上的服務(wù)設(shè)計。
以用戶為中心，服務(wù)需要從用戶的眼睛來看世界。無論是服務(wù)還是產(chǎn)品，其本質(zhì)最終都是為了解決用戶的問題，因此我們必須始終貫徹以用戶為中心的思想，這是我們所有工作的基礎(chǔ)。
工具1：用戶畫像
在產(chǎn)品開發(fā)或創(chuàng)建服務(wù)的早期階段，需要首先明確：用戶是誰？他們的需求是什么？為什么會選擇我們的產(chǎn)品？理解用戶的第一步是創(chuàng)建用戶畫像。
用戶畫像基于群體的真實信息，由多維度數(shù)據(jù)組成，整合所有用戶群體信息的集群。除了人的自然屬性，用戶畫像也會含有如生活習(xí)慣、行為特征等人的社會屬性。汲取真實的，具有共同點的用戶信息，作為多維度數(shù)據(jù)。
這類數(shù)據(jù)最終可以代表一類用戶群體。用戶屬性在一定情況下可能發(fā)生改變。
例如，因工作原因更換居住地，飲食習(xí)慣的改變，網(wǎng)購習(xí)慣從化妝品變?yōu)槟笅胗闷返?。用戶畫像是動態(tài)變化的過程，需要不斷迭代管理用戶畫像。
工具2：典型用戶
典型用戶又被稱為「真實虛擬人」（real fake man），因為盡管人物是虛構(gòu)的，但它背后的動機和需求是真實的。
典型用戶越具體、特征越詳細，我們想要獲取的那個「終極用戶形象」就會越清晰真實！明確典型用戶和使用場景的關(guān)聯(lián)，避免孤立使用典型用戶，脫離用戶場景。
我們通常將典型用戶檔案打印成板或海報，方便整個團隊分享。復(fù)雜產(chǎn)品或服務(wù)的典型用戶會有多個，代表多種不同類型的用戶。
比如，網(wǎng)購平臺的典型用戶從職業(yè)和年齡的維度，可能會有商務(wù)精英、職場小白、在校學(xué)生、空巢老人、全職太太等。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具3：同理心地圖
同理心地圖通過多維度（所想、所感、所聽、所看、所說）描繪更加生動的用戶形象，便于跨領(lǐng)域團隊建立對目標用戶的同理心，從中得到意想不到的洞察。
同理心地圖可針對特定用戶群來描述：用戶的想法和感覺（think&feel）。
使用這個工具的關(guān)鍵在于要有同理心，框架只是輔助思考。同理心不是與生俱來的，但可以訓(xùn)練得到。培養(yǎng)同理心的最好方式是帶入真實情境中，用身體與大腦去參與、模仿和感受。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》——同理心地圖以媽媽使用冰箱為例
工具4：影子計劃
影子計劃即像「影子」一樣伴隨用戶進行觀察，是對用戶體驗產(chǎn)品/服務(wù)的結(jié)構(gòu)化觀察，主要用于新產(chǎn)品/服務(wù)的消費者研究領(lǐng)域，通過觀察用戶使用某些產(chǎn)品或服務(wù)時的情緒、肢體語言、節(jié)奏、行為模式和時間等信息來全面了解用戶。
工具5：AEIOU觀察框架
AEIOU是整理觀察記錄的框架工具，通常會在觀察時使用表單直接記錄，可以和影子計劃結(jié)合使用。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
服務(wù)設(shè)計所解決的是一項復(fù)雜的問題，它沒有正確的答案，只有最優(yōu)解。如何找到最適合路徑？讓服務(wù)提供者和使用者以及不同的利益相關(guān)方，共同參與設(shè)計和創(chuàng)造的過程。借助不同背景、不同職能的人不同維度的思考，共同探索最優(yōu)解。
共創(chuàng)，無疑是服務(wù)設(shè)計最佳的工作方式。
工具1：瘋狂發(fā)想法
人與動物或最好的人工智能之所以不同，是我們?nèi)祟惥邆鋵ⅰ甘鞘裁础梗╳hat is）引導(dǎo)至「如果什么，將會怎樣」（what if）的能力。瘋狂發(fā)想法就是給挑戰(zhàn)一個不同的前提，在這種背景下思考更多的解決方案。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具2：頭腦風(fēng)暴圖
如果您的思路還沒有被充分打開，還有另外一種常用的方法可以幫你拓展思考，那就是頭腦風(fēng)暴圖。
頭腦風(fēng)暴圖有九種角度的思考方案：替代法、借鑒法、逆向法、組合法、改進法、拓展法、消除法、轉(zhuǎn)換法、重組法。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具3：世界咖啡
世界咖啡的主要精神就是跨界。不同專業(yè)背景、不同職務(wù)、不同部門的一群人，意見互相碰撞，激發(fā)出意想不到的創(chuàng)新點子。人們很容易被自己的專業(yè)和經(jīng)驗所限制，公司也很容易被既定文化或價值觀所限制，同構(gòu)性越強，越不容易產(chǎn)生新的點子。
世界咖啡讓參與者從個人固有風(fēng)格、學(xué)習(xí)方式和情感智商等維度中解放出來，用新的視角看世界。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具4：DVF篩選法
共創(chuàng)最后一個步驟也是最重要的一個部分是篩選，在眾多的概念中發(fā)現(xiàn)真正的滄海遺珠是一個巨大的挑戰(zhàn)。
我們可以從用戶、商業(yè)和技術(shù)三個維度來篩選概念，即DVF篩選法。
Desirable用戶合意性，F(xiàn)easible運營/技術(shù)可行性，Viable商業(yè)可行性。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
用戶體驗就像一場有計劃、有組織的精心設(shè)計的演出：它有高潮，也有低谷，它環(huán)環(huán)相扣地在講述一個故事，而用戶就身在其中。把握用戶的情緒和服務(wù)的節(jié)奏尤為重要，更重要的是由點及面地全局思考，保證這個故事的整體性。
工具1：用戶體驗地圖
用戶體驗地圖梳理了典型用戶從初次了解服務(wù)到形成契約關(guān)系的完整過程，站在用戶的視角再現(xiàn)用戶場景和服務(wù)流程的體驗感受。
此工具很實用，下圖是以一次部門內(nèi)部設(shè)計分享演講為例，站在聽眾的角度設(shè)計演講的節(jié)奏、內(nèi)容、互動等，關(guān)注聽眾的感受，才能讓這次分享演講達到想要的效果。
工具2：場景卡
場景卡用于描述不斷重復(fù)發(fā)生的問題，其作用在于從場景中獲得洞察，以及未來服務(wù)的機會。它和用戶體驗地圖的區(qū)別是它專注于單一的場景，可以更細微地了解用戶處境。場景卡經(jīng)常和用戶體驗地圖搭配使用，用來展開思考重要觸點，甚至有時會融入用戶體驗地圖中變成一部分。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具3：服務(wù)供給地圖
服務(wù)供給地圖（offering map）是用來分析可提供給用戶的服務(wù)?？梢暬姆绞娇梢愿玫仃U述想要提供的服務(wù)。由于用戶需求（needs）和服務(wù)端的供給（offering）有著直接對應(yīng)的關(guān)系，在表達服務(wù)概念時，可以同時呈現(xiàn)用戶需求和服務(wù)供給。此時服務(wù)供給地圖通常需要展現(xiàn)邏輯和層次，因此多用信息架構(gòu)圖表現(xiàn)。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
服務(wù)需要有邏輯、有節(jié)奏地視覺化展示出來。服務(wù)是在一段時間內(nèi)的動態(tài)過程，時間線對用戶非常重要。服務(wù)的節(jié)奏也很重要，會影響用戶的情緒。
工具1：故事版
故事版是以用戶為主要角色，以爽點、痛點或者產(chǎn)品、服務(wù)與用戶的互動為劇本發(fā)展的「場景分鏡頭」，是講故事時的重要道具。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具2：桌面演練
如果說故事版是平面示意圖，那么桌面演練（desktop walkthrough）就是個三維故事版，能夠隨時補充新的想法，更快速的移動和判斷。它可以看成是幫助設(shè)計者模擬端到端用戶體驗的互動式的迷你劇場。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
工具3：戲劇原型
戲劇原型是用表演的形式，輔助一些簡單的道具來模擬搭建服務(wù)場景，展示服務(wù)內(nèi)容，把服務(wù)體驗概念帶入日常生活場景的檢驗方式。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》
無形的服務(wù)需要被適時展現(xiàn)出來。服務(wù)很多時候是在后臺默默進行的，用戶無法感知。
工具1：服務(wù)藍圖
服務(wù)藍圖能幫助設(shè)計者視覺化呈現(xiàn)服務(wù)時如何被執(zhí)行與運作的。用戶體驗地圖關(guān)注用戶在每個服務(wù)互動觸點所經(jīng)歷的事情與感受，服務(wù)藍圖更注重服務(wù)中的各個要素有沒有被正確地設(shè)計和整合在一起，來描述整體的體驗流程。
△ 圖片摘自：《服務(wù)設(shè)計驅(qū)動的革命：引發(fā)用戶追隨的秘密》-共享汽車服務(wù)藍圖
工具2：服務(wù)缺口
服務(wù)缺口是用戶對服務(wù)的期待或需求和實際接收到的服務(wù)之間的落差。服務(wù)缺口是一個分析模型，可以用來探討服務(wù)發(fā)生的原因。
工具3：利益相關(guān)者地圖
利益相關(guān)者地圖是以圖畫來視覺呈現(xiàn)和理清所有利息相關(guān)者之間的方法。與服務(wù)有關(guān)的各個群體因為共同的利益聚在一起，服務(wù)提供方在解決問題時就能夠善用資源。對利益相關(guān)者來說，綜合全面的概述是改善服務(wù)或創(chuàng)新嘗試所必須的。
△ 圖片摘自：利益相關(guān)者地圖 Stakeholders Mapping
體驗設(shè)計關(guān)注觸點和人，而服務(wù)設(shè)計則是由表及里，將觸點、用戶體驗和組織中后臺支持都規(guī)劃在內(nèi)，體驗設(shè)計是服務(wù)設(shè)計的起點。
△ 圖片摘自：服務(wù)設(shè)計又來了！服務(wù)設(shè)計強調(diào)的是「幸福感」
另一個區(qū)別就是服務(wù)設(shè)計的收益者是雙方（提供者和接收者），而用戶體驗則聚焦于用戶。
說到這里，可能部分同學(xué)還是沒有記清楚服務(wù)設(shè)計的和用戶體驗設(shè)計，其實服務(wù)設(shè)計包含了用戶體驗設(shè)計，也包含人性化設(shè)計或者情感化設(shè)計等等。如果一個設(shè)計只有接收者單獨受益，那不能稱之為服務(wù)設(shè)計，只能說是針對用戶的用戶體驗設(shè)計。
世界變化如此之快，你還站在原地嗎？我們時刻走在學(xué)習(xí)的路上，不斷地武裝自己。遇到新的概念或者方法論，要先深入了解并進行獨立思考。實踐才能出真知，多應(yīng)用到自己的項目中，結(jié)合項目進行實踐和反思，讓我們在設(shè)計的路上走得更遠！
敲黑板劃重點，服務(wù)設(shè)計思維，我們講了這么多～分享出去跟小伙伴一起學(xué)習(xí)吧，你也要記得來復(fù)習(xí)哦～
你的設(shè)計是否能被理解？為什么設(shè)計的價值總是不被人認可？本文將從深入淺出，帶你了解全局性設(shè)計思維的真正力量。
你的設(shè)計是否能被理解？為什么設(shè)計的價值總是不被人認可？
設(shè)計不僅僅只是帶來美感，好的設(shè)計能夠為產(chǎn)品、公司甚至整個社會創(chuàng)造巨大的價值。而在創(chuàng)造好的設(shè)計這個過程中，最重要、也是最容易被人忽視的，便是設(shè)計思維。
何為全局性設(shè)計思維？它能夠為設(shè)計師帶來哪些價值？本文將從設(shè)計的本質(zhì)出發(fā)，結(jié)合設(shè)計的發(fā)展趨勢，帶你了解全局性設(shè)計思維的真正力量。
目錄
這篇文章的主要內(nèi)容，來自我在 19 年底的一個沙龍分享。整個分享以設(shè)計思維的角度入手，講述了全局性設(shè)計思維的來源和重要性，以及我是如何在不同產(chǎn)品線上去運用這種設(shè)計思維的。
何為全局性設(shè)計思維？為什么要講這種思維方式？
這是我一直在探索并實踐的一種設(shè)計思維。從最開始的理論雛形，到各種項目的實踐，不斷進行修正和完善，最終形成了一套卓有成效的思維方式。通過這種思維方式，我逐步幫助產(chǎn)品解決了許多長期性的問題，并最終構(gòu)建了各種不同類型的設(shè)計體系。最終，隨著品牌矩陣與產(chǎn)品體系的落地，形成了一個完整的網(wǎng)易智慧企業(yè)設(shè)計體系。
△網(wǎng)易智慧企業(yè)設(shè)計體系
因為篇幅原因，本篇文章將重點從理論層面闡釋全局性設(shè)計思維的導(dǎo)論、價值及使用方式。而具體的實戰(zhàn)案例，我之后將會以另外幾篇單獨文章的形式進行展現(xiàn)，并詳細講解在設(shè)計過程中的一些細節(jié)與過程。希望能夠幫助大家更深入地去理解如何根據(jù)不同的場景正確地去使用這種思維方式。
未來可能會包含以下幾篇文章：
當然，目前的設(shè)計體系僅僅只是一個開始，未來還有很長的路要走。
希望本文能夠為你帶來小小的啟發(fā)，讓設(shè)計思維幫助你更好地發(fā)揮設(shè)計的價值。如果你對某一方面特別感興趣，可以直接跳到這一章進行閱讀，無需浪費過多時間。如果你有任何疑問，也歡迎隨時與我交流。
這次把序放在了第二段，這樣子看上去就不那么不務(wù)正業(yè)了哈哈。當然，寫序更多的是為了記錄生活，希望每一篇文章不僅僅只是傳遞知識，更是一篇有溫度的文章。
整個 2019 年中，經(jīng)歷了很多事情，人生觀也隨之發(fā)生了些許變化。
從并肩作戰(zhàn)的同事的不斷離去，到逐漸需要考慮團隊的發(fā)展。從單打獨斗闖天下，到思考如何讓整個團隊更加優(yōu)秀、如何建立完善的設(shè)計體系等等。
角色、心態(tài)、責任，以及如何坦然地面對自己。
活在當下，用心生活。這是我一直當作座右銘的語錄，也是我希望給自己的承諾?？偸窃噲D去嘗試這種狀態(tài)，但卻異常艱難。像我這樣的人，看上去總是「積極向上」，總是「規(guī)劃未來」，總是希望事事完美，強迫著每個細節(jié)的完善。但不知不覺中，人生好像開始進入了「自動駕駛」的模式，活在了過去的思索中，活在了未來的規(guī)劃中，唯獨對于當下異常麻木。
這并不是我想要的生活，我開始嘗試做出改變。
偶然間，通過一些書籍，我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發(fā)生的每一件事情。雖然只是很淺顯的境界，但正念依然對我產(chǎn)生了巨大的影響。我開始重新地審視自己的人生，審視自己的生活狀態(tài)。
△ 網(wǎng)易蝸牛圖書館：與快樂的小伙伴們
這種感覺，就像再次的呼吸了新鮮空氣一樣。
我們其實只存在于當下的時空中，過去和未來，并非真實存在的事物?；叵胍幌?，我們有多久沒有像小時候一樣，完完全全、毫無雜念地享受在當下的時光中了？
用心活在當下，平靜地接納一切發(fā)生的事物，這種感覺真是太美好了～
對于設(shè)計師來說，什么能力更為重要？是設(shè)計這門「技術(shù)」本身，還是思考如何去設(shè)計的「思維」能力？
對于不同的設(shè)計師來說，一定會有不同的答案。
這兩種能力本身并不矛盾，他們相互影響，互相促進——就像「術(shù)」與「道」之間的關(guān)系。設(shè)計能力決定了設(shè)計作品的輸出質(zhì)量，而設(shè)計思維則決定了你思考問題、解決問題的能力。
然而，在現(xiàn)實的大環(huán)境下，「術(shù)」的重視程度遠高于「道」，造成了很多設(shè)計師與日常業(yè)務(wù)的「分離感」。以至于，多數(shù)的設(shè)計師，無法將自己的設(shè)計能力有效地用于日常業(yè)務(wù)中；抱怨他人不理解設(shè)計，也因此錯失了許多機會。
重視設(shè)計美感，其實并沒有問題。視覺是最直接的表現(xiàn)方式，我們從最初開始喜歡這個行業(yè)，并最終成為設(shè)計師，大概都是因為如此。包括我個人，也是美感的追求者，常常為了幾像素的細節(jié)，調(diào)整無數(shù)稿。也常常沉浸于自己的作品無法自拔。
但是，美感之后，設(shè)計還需要什么？
路易斯·沙利文曾講過：「形式追隨功能」。而功能存在的意義，則在于解決問題。視覺的形式、美感，很多時候只是包裹在外側(cè)的表層，而解決問題才是設(shè)計真正的核心。視覺的表現(xiàn)，一定要遵循解決問題的方式，向用戶傳遞恰當?shù)男畔ⅲ罱K引導(dǎo)用戶以此來解決問題。
因此，我更希望更多的設(shè)計師，在追求美感的同時，能夠重拾設(shè)計思維本身，尋找設(shè)計最根本的價值。
我們其實可以站得更遠一些。學(xué)會去理解事物，學(xué)會用設(shè)計去解決問題。再以此為基礎(chǔ)，通過你的設(shè)計能力去塑造它、點亮它，讓它成為一個真正美好而又有價值的設(shè)計。
而設(shè)計的價值，將會成為你的價值。
互聯(lián)網(wǎng)時代中的數(shù)字產(chǎn)品設(shè)計，需要什么樣的設(shè)計思維？或者說，當下我們需要什么樣的設(shè)計思維？
這個問題的答案，好像一直在變。
互聯(lián)網(wǎng)本身便是一個新的形態(tài)，1989 年「萬維網(wǎng)」發(fā)明，1996 年中國引入互聯(lián)網(wǎng)，到今年已經(jīng)有大約 24 個年頭。我們經(jīng)歷了不同的互聯(lián)網(wǎng)時期，而「設(shè)計」的概念也一直在變化中。
Internet 1.0 PC 互聯(lián)網(wǎng)時代。在這個時代，我們將大量的信息虛擬化，并通過網(wǎng)絡(luò)進行信息傳遞。而我們的「設(shè)計師」們大多被稱為「美工」，我們的「設(shè)計思維」，便是將信息變得更好看。
Internet 2.0 移動互聯(lián)網(wǎng)時代，或者稱為消費互聯(lián)網(wǎng)時代。自從 2007 年喬布斯發(fā)布第一代 iPhone 之后，疊加 4G、wifi 等技術(shù)，手機成為日益重要的終端，世界逐漸進入了移動互聯(lián)網(wǎng)時代。伴隨著 iPhone 與其應(yīng)用的出現(xiàn)，喬布斯讓所有人理解了「用戶體驗」的重要性。我們不再是「美工」，我們變成了「UI 設(shè)計師」、「交互設(shè)計師」。而這個時代，我們的設(shè)計思維變成了「用戶體驗思維」。
那么，下一個時代在哪里？我們的設(shè)計思維又將如何轉(zhuǎn)變，才能適應(yīng)下一個時代？
1. 紅利消失、增長觸頂，互聯(lián)網(wǎng)下半場到來
最近幾年，我們已經(jīng)能夠明顯地感知到——互聯(lián)網(wǎng)的「寒冬」真的來了。隨之而來的，便是互聯(lián)網(wǎng)的發(fā)展方向似乎也正在發(fā)生變化。于是大約從 2017 年開始，互聯(lián)網(wǎng)圈內(nèi)逐漸出現(xiàn)一個新的名詞——互聯(lián)網(wǎng)「下半場」。人們普遍認為，中國的互聯(lián)網(wǎng)將會由消費互聯(lián)網(wǎng)時代進入下一個時代，即互聯(lián)網(wǎng)下半場。
我并不完全認同互聯(lián)網(wǎng)「下半場」的稱呼?；ヂ?lián)網(wǎng)本身是一個年輕的行業(yè)，中國互聯(lián)網(wǎng)「下半場」，其實更像是互聯(lián)網(wǎng)發(fā)展方向轉(zhuǎn)變的標志。
因此，我們認為的下一個時代的方向，也許將會是 Internet 3.0——即產(chǎn)業(yè)互聯(lián)網(wǎng)時代。
互聯(lián)網(wǎng)為什么必須要進入下一個時代？
對于互聯(lián)網(wǎng)企業(yè)來說，一方面在成本端，隨著人口紅利消退，勞動力價格上升，企業(yè)的成本將逐漸升高，倒逼管理者使用系統(tǒng)和工具來提率；另一方面，在收入端，野蠻增長的時代結(jié)束，增量經(jīng)濟轉(zhuǎn)向存量經(jīng)濟，紅利經(jīng)濟轉(zhuǎn)向效率經(jīng)濟。
在「成本」與「效率」的雙重壓力下，再加上整個市場經(jīng)濟的下行周期，整體經(jīng)濟出現(xiàn)下滑，而一些依靠融資的互聯(lián)網(wǎng)公司將難以為繼。因此企業(yè)不得不尋找方法來提升效率，降低成本——而這正是企業(yè)級軟件（ToB 產(chǎn)品）最擅長的地方。
因此，在互聯(lián)網(wǎng)寒冬之下，ToB 市場便理所應(yīng)當?shù)亻_始被重視。
讓我們縱觀整個中國市場的發(fā)展，互聯(lián)網(wǎng)的興起雖然促進了消費領(lǐng)域的蓬勃發(fā)展，但產(chǎn)業(yè)領(lǐng)域的發(fā)展則因此受到了巨大制約。中國率先從消費端、從第三產(chǎn)業(yè)開始數(shù)字化，然而在第一、二產(chǎn)業(yè)的數(shù)字化進程似乎并不是很快。一個重要的原因是，人口紅利促使了消費互聯(lián)網(wǎng)的快速發(fā)展，而這種紅利讓人們忽視了產(chǎn)業(yè)互聯(lián)網(wǎng)的重要性。
在寒冬之下，我們終于發(fā)現(xiàn)，消費互聯(lián)網(wǎng)蓬勃的基石，正是底層堅實的產(chǎn)業(yè)互聯(lián)網(wǎng)。產(chǎn)業(yè)互聯(lián)網(wǎng)如果不能得到有效的發(fā)展，則整個市場經(jīng)濟將無法更進一步地發(fā)展。
因此，產(chǎn)業(yè)互聯(lián)網(wǎng)時代的到來，是中國互聯(lián)網(wǎng)發(fā)展的需要，也將是大勢所趨。
2. ToB市場將迎來機遇
產(chǎn)業(yè)互聯(lián)網(wǎng)的發(fā)展，需要依托 B 端領(lǐng)域的發(fā)展，并逐步融入并帶動整個產(chǎn)業(yè)進入互聯(lián)網(wǎng)時代。那么，B 端產(chǎn)品在中國目前處于一個什么階段呢？
對于整個中國的 ToB 行業(yè)發(fā)展現(xiàn)狀，大多數(shù)的人并沒有一個清晰的概念。盤點中美上市的科技公司會發(fā)現(xiàn)，美國 toC 領(lǐng)域與 toB 領(lǐng)域市值之比是 6:4，但在中國這個數(shù)字是 20:1。
雖然互聯(lián)網(wǎng)的整體環(huán)境不同，但中國 ToB 行業(yè)的發(fā)展，顯然是落后太多了。于是乎，2018 年開始，BAT 大舉布局，PE、VC 加速進場——中國 B 端產(chǎn)品已經(jīng)逐漸進入必須發(fā)展的時候了。
中國市場已經(jīng)坐擁全球最發(fā)達的消費互聯(lián)網(wǎng)體系，而產(chǎn)業(yè)互聯(lián)網(wǎng)的發(fā)展卻嚴重滯后。
同時，對比 B 端中云計算領(lǐng)域的 IaaS、PaaS、SaaS 三層架構(gòu)，全球市場中 SaaS 占據(jù)了 52.5% 的份額，在中國卻是 IaaS 分走了最大的蛋糕，占比達 61.2%。中國市場 VC 的投資總額已經(jīng)與美國相當，在 SaaS 領(lǐng)域美國企業(yè)獲得了全球 70.1% 的融資，而中國只有 11.7%。
因此，在互聯(lián)網(wǎng)下半場，相對于 ToC 行業(yè)的觸頂，ToB 行業(yè)將會迎來歷史級的發(fā)展機遇，隨之而來的將會是產(chǎn)業(yè)互聯(lián)網(wǎng)時代的逐漸到來。而在整個 B 端產(chǎn)品的類目中，SaaS 產(chǎn)品作為企業(yè)級軟件中最集成的產(chǎn)品，也將隨著這股浪潮迎來爆發(fā)式的增長。
什么是 SaaS 產(chǎn)品？很多同學(xué)并沒有接觸過 B 端行業(yè)，平時用到的也都是 C 端產(chǎn)品，所以對 B 端產(chǎn)品的了解比較少。在 B 端行業(yè)最熱門的云計算領(lǐng)域中，目前普遍會分為三層架構(gòu)。SaaS（Software as a Service–軟件即服務(wù)）；PaaS（Platform as a Service–平臺即服務(wù)） ；IaaS（Infrastructure as a Service–基礎(chǔ)架構(gòu)即服務(wù)）。
附：云計算領(lǐng)域，三種不同的架構(gòu)與對應(yīng)的服務(wù)。
PaaS 基于 IaaS 實現(xiàn)，SaaS 的服務(wù)層次又在 PaaS 之上，三者分別面對不同的需求。越往上層，產(chǎn)品的集成度越高，提供的服務(wù)也就越豐富，而用戶所需要的自行解決的東西就越少。而最頂層的 SaaS 產(chǎn)品，便是用戶可以直接購買并使用的云端產(chǎn)品。
我們?yōu)槭裁匆私膺@些趨勢？
因為一個新的時代，對應(yīng)一場變革，也將成為一次新的機會。不管是 SaaS 產(chǎn)品還是其他 B 端產(chǎn)品，都將在新的時代中逐漸得到重視。而 C 端產(chǎn)品的發(fā)展策略，也將迎來新的變化。對于許多設(shè)計師來說，這將會是一個新的機遇。
順勢而為，方能乘勢而上。
那么，在逐漸到來的產(chǎn)業(yè)互聯(lián)網(wǎng)時代，設(shè)計師需要注意哪些東西？設(shè)計思維又將進行如何轉(zhuǎn)變？
產(chǎn)業(yè)互聯(lián)網(wǎng)時代，意味著 B 端產(chǎn)品將得到重視，并與 C 端產(chǎn)品逐漸趨于平衡。因此，了解設(shè)計思維的變化，我們首先要從 B 端與 C 端產(chǎn)品之間，在產(chǎn)品設(shè)計與產(chǎn)品策略之間的差異性說起。
1. 服務(wù)對象的差異性
從服務(wù)對象來看，C 端產(chǎn)品的服務(wù)對象是人，產(chǎn)品的目標是針對人們生活方式進行的變革、升級。而 B 端產(chǎn)品的服務(wù)對象則大多是企業(yè)，目標是幫助企業(yè)進行商業(yè)效率的提升，從而產(chǎn)生價值。
服務(wù)對象的差異性，決定了產(chǎn)品在發(fā)展策略也將存在著較大的差異性。
2. 產(chǎn)品「打法」上的差異性
從宏觀的打法上看，消費互聯(lián)網(wǎng)時代會更求「快」，而產(chǎn)品互聯(lián)網(wǎng)時代則會更偏「穩(wěn)」。
C 端產(chǎn)品的服務(wù)對象是人，而人的需求在個體差異性上相對變化較小，這就決定了 C 端產(chǎn)品通常都擁有廣闊的用戶市場。
因此，消費互聯(lián)網(wǎng)時代就像是資本在遼闊平原的角逐，長驅(qū)直入。講究快速占領(lǐng)市場，不斷地試錯、不斷地調(diào)整。從團購到直播，從打車到短視頻領(lǐng)域的興起，再到最后的單車大戰(zhàn)落幕。消費互聯(lián)網(wǎng)時代的每一次風(fēng)口，都伴隨著各種「游擊戰(zhàn)」式的競爭。入場速度、快速調(diào)整能力、資本深度，都直接影響了最后的結(jié)果，而最終的結(jié)果也往往是勝者為王，敗者將快速地被市場淘汰。
B 端產(chǎn)品的服務(wù)對象是企業(yè)，而企業(yè)間的需求差異性則非常巨大，這就決定了 B 端產(chǎn)品通常需要較強的縱深能力。相對應(yīng)的，其用戶群體在總量上就比較小、但也相對穩(wěn)固。
因此，產(chǎn)業(yè)互聯(lián)網(wǎng)就像在崎嶇叢林的蹣跚前行，漸次演進，如同一場曠日持久的拉鋸戰(zhàn)。一方面，產(chǎn)業(yè)互聯(lián)網(wǎng)的鏈條非常長，需要長期的深耕、積累才能逐漸站穩(wěn)腳跟。而這也導(dǎo)致了產(chǎn)品的壁壘足夠深厚，同類產(chǎn)品在短期內(nèi)無法快速跟進。另一方面，企業(yè)間的差距需求的差異性非常大，因此產(chǎn)業(yè)互聯(lián)網(wǎng)存在非常多的細分市場，不同的產(chǎn)品各自在不同的賽道中深耕。而其最終的結(jié)果往往是百花齊放，各自盛開。
3. 整體行業(yè)的協(xié)同發(fā)展
雖然整個市場都不斷地強調(diào)——ToC 增長觸頂，ToB 是一片藍海。但這并非是「取而代之」，而是逐漸走向整體的「協(xié)調(diào)發(fā)展」。中國 ToB 的發(fā)展的一個重要根基，其實是「中國擁有世界上最成熟的消費互聯(lián)網(wǎng)體系」這一巨大的優(yōu)勢。
因此，ToC 在很長的時間內(nèi)，仍然會是互聯(lián)網(wǎng)的主力，而 ToC 市場的轉(zhuǎn)型，也將有賴于 ToB 產(chǎn)品所提供的服務(wù)。
而隨著中國將「互聯(lián)網(wǎng)+」政策上升為國家戰(zhàn)略，更是明確了以互聯(lián)網(wǎng)帶動傳統(tǒng)產(chǎn)業(yè)的發(fā)展方向。因此，互聯(lián)網(wǎng)的下半場，即產(chǎn)業(yè)互聯(lián)網(wǎng)時代的最終形態(tài)，將是互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)的「融合式發(fā)展」。
ToB 產(chǎn)品將會成為帶動互聯(lián)網(wǎng)下一輪發(fā)展的核心驅(qū)動力。一方面幫助 ToC 領(lǐng)域完成轉(zhuǎn)型，進入更健康、更穩(wěn)健的發(fā)展階段；另一方向，ToB 領(lǐng)域賦能傳統(tǒng)產(chǎn)業(yè)與互聯(lián)網(wǎng)相融合，并最終完成產(chǎn)業(yè)升級。
4. 產(chǎn)品形態(tài)的融合與趨同
整體產(chǎn)業(yè)的融合趨同，意味著產(chǎn)品的特性也將互相融合。一個很重要的現(xiàn)象是：C 端產(chǎn)品逐漸變得不那么 C 端了，而 B 端產(chǎn)品也越來越變得不像 B 端了。
比如 C 端產(chǎn)品的主流賽道中，隨著頭部產(chǎn)品的賽道日漸趨于穩(wěn)定，其產(chǎn)品體量也因為業(yè)務(wù)擴展而不斷增加。同時，因為產(chǎn)品體系的逐漸形成，為了服務(wù)更多的 C 端用戶，會有越來越多的 B 類用戶進入平臺，而為了滿足 B 類商家的需求，產(chǎn)品的 B 端屬性變得越來越強了。
而隨著 B 端產(chǎn)品的不斷受到重視，原先不被重視的產(chǎn)品 UI、用戶體驗也逐漸在 B 端產(chǎn)品中得到加強。B 端用戶雖然服務(wù)于 B 端，但使用者終究是人。而隨著競爭的不斷加劇，原來的「重功能、輕體驗」思路逐漸式微。我們逐漸發(fā)現(xiàn)，許多 B 端產(chǎn)品長得越來越像 C 端產(chǎn)品了，甚至在 UI 和體驗層面做的與 C 端產(chǎn)品不相上下。
因此，隨著產(chǎn)品屬性的融合趨同，意味著設(shè)計思維勢必會與消費者互聯(lián)網(wǎng)時代存在差異。而我們的設(shè)計思維將不僅僅局限在誕生于消費互聯(lián)網(wǎng)時代的「用戶體驗思維」。我們需要更新的、更廣闊的設(shè)計思維，以滿足下一個時代的產(chǎn)品發(fā)展需要。
那么，新的思維是什么？它將從何而來？
從整個市場的協(xié)同發(fā)展，到產(chǎn)品形態(tài)的融合趨同。那么，我們的設(shè)計思維需要如何進行相應(yīng)的變化？是同樣進行「融合趨同」，還是另辟蹊徑，尋求新的視角？
1. 關(guān)鍵詞提取
首先，不管設(shè)計思維如何變化，它一定需要同時滿足兩種產(chǎn)品設(shè)計思維的特性。通過前文的分析，我們可以在產(chǎn)品設(shè)計特性的維度，提取各自的關(guān)鍵詞進行分析：
產(chǎn)品體驗：誕生于消費互聯(lián)網(wǎng)時代的用戶體驗思維，在產(chǎn)業(yè)互聯(lián)網(wǎng)時代依然是產(chǎn)品設(shè)計中最重要的部分。無論是 C 端還是 B 端產(chǎn)品，用戶體驗必然是產(chǎn)品的核心競爭力，只有足夠好用、好看，產(chǎn)品才能獲得更多用戶，最終獲得商業(yè)上的成功。
靈活性：在消費互聯(lián)網(wǎng)時代，在激烈的競爭中，C 端產(chǎn)品的靈活性的打法對于產(chǎn)品的突圍至關(guān)重要。而未來的 B 端產(chǎn)品競爭將會加劇，這就需要 B 端產(chǎn)品也逐漸需要較強的靈活性。
成長性：產(chǎn)品的發(fā)展必將伴隨著不斷的變化，特別是具有一定體量之后，產(chǎn)品設(shè)計的成長性將至關(guān)重要。因此，產(chǎn)品的設(shè)計是否能夠預(yù)見未來發(fā)展，滿足不斷變化的產(chǎn)品形態(tài)，伴隨著產(chǎn)品不斷地成長，也將成為產(chǎn)品是否能夠持續(xù)獲得成功的關(guān)鍵因素。
產(chǎn)品效率：因為產(chǎn)品服務(wù)對象的關(guān)系，B 端產(chǎn)品一直是產(chǎn)品效率的代名詞。而在人口紅利消失與經(jīng)濟下行的壓力下，產(chǎn)品效率將成為所有企業(yè)關(guān)注的重要因素之一。產(chǎn)品的效率不僅影響著企業(yè)的成本，也是產(chǎn)品競爭力的重要體現(xiàn)。
這四個關(guān)鍵詞，將會是我們在未來所需要關(guān)注的四個重點關(guān)鍵詞。越是往左，則「C」屬性越強，因為它更多地從用戶的角度出發(fā)，更關(guān)注用戶體驗。而越是往右，則「B」屬性越強，因為它更多地從企業(yè)的角度出發(fā)，更關(guān)注企業(yè)的長期發(fā)展。
2. 跳出單一層面，尋求新視角
在四個關(guān)鍵詞中，我們會發(fā)現(xiàn)，特性越是靠右，其所需要的整體性就越強。要滿足靈活性，就需要用戶體驗與產(chǎn)品策略相關(guān)聯(lián)。要滿足成長性，則要進一步結(jié)合底層的開發(fā)能力。而產(chǎn)品效率的提升，則需要產(chǎn)品的設(shè)計與不同層面都有著緊密的耦合。
在互聯(lián)網(wǎng)設(shè)計發(fā)展的過程中，我們從單點只關(guān)注視覺表層的「美工時代」，逐漸發(fā)展為關(guān)注線性的「用戶體驗思維」。在對于產(chǎn)品用戶體驗層面，確實有著長足的發(fā)展。
但是，單一層面的用戶體驗思維，在逐漸成熟的互聯(lián)網(wǎng)時代中，逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面，我們似乎無法對產(chǎn)品形成更大的影響力，也難以為產(chǎn)品帶來體驗之外的更多價值。
因此，設(shè)計思維想要滿足新時代的需求，就需要同時滿足前文提到的四個關(guān)鍵詞。這就要求我們需要跳出單一層面，以全局的維度去思考產(chǎn)品的設(shè)計。
因此，全局性將成為未來的關(guān)鍵，我暫且將這種思維方式稱為——全局性設(shè)計思維。
全局性設(shè)計思維，即在設(shè)計過程中，始終能以更高的維度去審視全局，思考當下的設(shè)計。
何以全局，如何跳出單一層面？這種思維方式的前提，是你要首先了解整個產(chǎn)品（亦或是物體、組織等）的運行方式，清楚的知道整個產(chǎn)品需要達到的目標，從而準確、合理地對針對目前的局部做出設(shè)計，并最終構(gòu)成整個完整的形態(tài)。
而「全局」的前提，是你擁有更高的眼界。你的眼界越高，你對產(chǎn)品、市場、甚至整個社會的洞察就越全面，你就能夠解決越大的問題，你能夠?qū)崿F(xiàn)的價值就越高。眼界是基礎(chǔ)，解決更大的問題是目標，而全局性設(shè)計思維則是實現(xiàn)這個目標的方式與過程。
全局性設(shè)計思維，可以幫助我們跳出產(chǎn)品的單一層面，去思考從產(chǎn)品層、到體驗層、再到開發(fā)層這一完成的整體。讓設(shè)計滿足體驗層的同時，滿足產(chǎn)品層面的目標，同時讓產(chǎn)品的設(shè)計與開發(fā)高度耦合，將整個產(chǎn)品串聯(lián)成一個完成的整體。
好了，講了這么多，我們具體應(yīng)該如何去運用全局性設(shè)計思維呢？
全局性設(shè)計思維，的應(yīng)用方式非常廣泛。它并不是一個固定的方程式，而是一個更高層面的指導(dǎo)性設(shè)計思維，能夠通過不同的形式，來幫助你解決問題。
1. 全局觀——在生活思考更多可能
在嘗試這種思維之初，我們可以通過一些小的實踐，去鍛煉這種思維能力。
在日常的生活、工作中，其實我們有大量的事物可以練習(xí)和運用這種思維方式。比如你在裝修一個大房子，需要去選擇房子里的家具。當你在購買家具時，常規(guī)的思維方式是：這個家具在某個房間時應(yīng)該是怎樣搭配的，所以我要購買什么樣形狀、顏色的家具，來滿足這個房間的需要。
但是，用這么思維方式來購買家具，將為對家具的靈活性與長期價值造成一定影響。從居住環(huán)境的長遠來看，也許這個家具有可能會因為某些原因，需要放到另一個房間，而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終，我們只能重新購買，或者接受一個風(fēng)格、尺寸上并不搭調(diào)的房間出現(xiàn)。
因此，當我們在購買家具時，我們是否可以利用全局性設(shè)計思維，從整體空間的角度出發(fā)（而非單個房間），去思考如何讓家具滿足更多空間需求。長此以往，我們不僅可以打造一個風(fēng)格統(tǒng)一的大空間，同時也能增加每個家具的利用率，在無形中也增加了這個家具本身的價值。
之所以舉家具這個例子，是因為這個原理與產(chǎn)品設(shè)計的原理非常類似。你可以將這個房子看成是整個產(chǎn)品，而家具則是不同的組件。通過不同的家具（組件），構(gòu)成了我們的不同功能模塊（房間/功能區(qū)），而所有的功能模塊則構(gòu)成了整個產(chǎn)品（房子）。
房子（產(chǎn)品體量）越大，房間/功能區(qū)（功能模塊）就越多，家具（組件）的多樣性、復(fù)雜性就越高，我們就越是需要從全局的角度去思考裝修的統(tǒng)一性（風(fēng)格體系化）和家具的通用性（樣式組件化）。只有這樣，我們才能更好地去打造一個風(fēng)格統(tǒng)一、體驗一致，同時又具備足夠自由調(diào)整空間的「大房子」。
2. 全鏈路——從全流程中重新思考設(shè)計
當你仔細地去理解許多非常著名的設(shè)計作品時。你會發(fā)現(xiàn)，幾乎所有優(yōu)秀的、巧妙的設(shè)計，往往在設(shè)計中都體現(xiàn)了全局性的設(shè)計思維。它不僅僅解決著當前的問題，同時也能夠解決更大的問題，發(fā)揮巨大的價值。
比如著名的坂茂衛(wèi)生紙的設(shè)計，看似普通，只是將衛(wèi)生紙的軸心從圓形改成了方形，但它卻成為了舉世聞名的、公認的好的設(shè)計。為什么呢？
我們先了解一下這個設(shè)計為什么好。
首先，傳統(tǒng)的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用，讓你用得更少，從而起到了解決資源的作用。其次，在運輸過程中，圓形的紙卷之間會產(chǎn)生很大的空隙，而方形紙卷則能夠緊緊靠在一起，提升空間利用率，從而起到降低運輸成本的作用。
這簡單的設(shè)計，居然發(fā)揮了如此大的作用。
那么，為什么我們在設(shè)計時就沒有考慮到這些問題呢？因為我們從最開始，就沒有從「紙」的整個全流程來去思考問題。
讓我們「站的更遠一些」，紙這個商品，并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成，通過運輸送到每個超市中，當我們購買以后，它又會在很長一段時間內(nèi)，出現(xiàn)在衛(wèi)生間，陪伴你使用的每一刻。我們可以將整個流程分為 3 個場景，而每個不同的場景，又將會對紙本身有著不同的影響。
當我們能夠考慮到衛(wèi)生紙的運輸過程時，我們就可以通過設(shè)計去降低運輸成本；而當我們可以考慮到用戶的使用場景時，我們就可以通過設(shè)計，去提升阻力，降低使用量，間接地去提升用戶的使用體驗。而當我們通過全局性設(shè)計思維，可以同時解決這三個問題時，我們的設(shè)計就是好的設(shè)計，就擁有了更高的價值。
發(fā)現(xiàn)了嗎，為什么你沒有想到相同的設(shè)計方案？設(shè)計能力并不是關(guān)鍵，設(shè)計思維才是指引你做出好的設(shè)計的前提。當你能按上述的方式，去思考整個流程、不同的場景，我相信大多數(shù)的人都能夠設(shè)計出坂茂的設(shè)計方案，甚至比這個方案更好的解決方式。
通過前面的兩個案例，相信大家已經(jīng)了解了全局觀、全鏈路兩種應(yīng)用方式。
那么，我們最最最關(guān)心的問題——如何在業(yè)務(wù)中去使用這種思維呢？
在產(chǎn)品設(shè)計中，全局性設(shè)計思維也有著非常多樣化的使用方式和場景，在之后的文章中我也會講到很多應(yīng)用方式。但是，在所有的方式中，我認為最為有效的，便是以全局性設(shè)計思維，幫助產(chǎn)品去構(gòu)建一個完整的設(shè)計體系。
什么是設(shè)計體系？談及設(shè)計體系，大多數(shù)設(shè)計師會認為，設(shè)計體系就是設(shè)計規(guī)范?！覆痪褪钦覀€名次包裝一下規(guī)范嘛？」
我們?yōu)槭裁葱枰O(shè)計體系？它與設(shè)計規(guī)范有何不同呢？
設(shè)計規(guī)范是設(shè)計師最為熟悉的一種規(guī)范文檔。在產(chǎn)品設(shè)計時，優(yōu)秀的設(shè)計師通常都會建立設(shè)計規(guī)范。然而在實際的項目中，設(shè)計規(guī)范往往無法難以有效實施。比如在開發(fā)眼中，規(guī)范并不符合開發(fā)規(guī)則，過于碎片化。而產(chǎn)品經(jīng)理通常又不會去了解設(shè)計規(guī)范，因此在構(gòu)建產(chǎn)品框架時也常常隨意發(fā)揮。
很多項目做到最后，設(shè)計規(guī)范僅存在于紙面的意義，并隨著項目的發(fā)展逐漸混亂。為什么會這樣？
因為不同職能間的思考方式存在差別，設(shè)計規(guī)范對于其他職能來說經(jīng)常難以理解與運用，無法與其他職能形成有效聯(lián)動。
設(shè)計規(guī)范僅僅是基于視覺層面的規(guī)范，它是一個「平面」。而設(shè)計體系則是貫穿于產(chǎn)品的每個層面的、與產(chǎn)品深度結(jié)合的完整體系，它是「立體」的「有機生命體」。
設(shè)計體系的核心在于「體」，它是貫穿于整個產(chǎn)品的完整體系。設(shè)計體系由設(shè)計師創(chuàng)造，并深度融合于產(chǎn)品每個部分。它能夠讓產(chǎn)品更緊密、更統(tǒng)一、更有序，伴隨著產(chǎn)品的生長，與產(chǎn)品共同進化，并最終推動產(chǎn)品的發(fā)展。
創(chuàng)造并推動這一體系，則要求設(shè)計師需要更全面的能力。只有充分地去理解并參與產(chǎn)品的每個部分的設(shè)計，才能讓設(shè)計真正延伸至產(chǎn)品的每個部分。
而創(chuàng)造這一切的前提，便是全局性設(shè)計思維。
羅馬不是一天建成的，設(shè)計體系也是如此。設(shè)計體系的建立是一個漫長的過程（與產(chǎn)品體量相關(guān)），需要在前期投入更多的精力。但若是你的方法得當，就會在項目中越來越輕松，并以此形成良性循環(huán)，而你也會越來越有成就感。
如何正確地去構(gòu)建設(shè)計體系呢？我在這里總結(jié)了幾個要點：
樹立觀念
首先，樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維，著眼于整個項目，去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后，你會自然而然的將其植入到設(shè)計中。
以解決問題為導(dǎo)向
體系化并非憑空建立，而是建立在解決問題的基礎(chǔ)之上。設(shè)計體系的本質(zhì)，就是由無數(shù)個標準化的解決方案，最終構(gòu)成的一個完整的體系。因此，我們要以解決問題為導(dǎo)向，以全局性思維去思考問題的本質(zhì)，最終建立適用于全局設(shè)計體系。
以小為始，重視質(zhì)量
腳踏實地，從小處入手，去發(fā)現(xiàn)產(chǎn)品中最基礎(chǔ)的一些問題。表面上看這些問題，對項目影響不大，但他們數(shù)量龐大，加在一起便會嚴重影響整個產(chǎn)品的效率。因此，我們要首先建立高品質(zhì)的基礎(chǔ)體系，再以此為基礎(chǔ)構(gòu)建更大的體系。
不要一開始就設(shè)法建立一個巨大的體系，那樣只會是一盤散沙，因為它的結(jié)構(gòu)是無序、混亂、不健康的。而這也是大多設(shè)計規(guī)范缺乏有效性和可實施性的根源。
梅拉妮·米歇爾的《復(fù)雜》一書中講到，任何復(fù)雜系統(tǒng)，都是由無數(shù)個體通過簡單的算法所構(gòu)成的。在算法領(lǐng)域也是同樣的原理，一個優(yōu)秀而強大的代碼，必然是由無數(shù)個小型模塊，通過簡單的算法耦合形成巨大的代碼矩陣。基礎(chǔ)算法越強大、代碼結(jié)構(gòu)越「健康」，可擴展性和靈活性就越強，其能力就越強大。
從規(guī)范入手，由面到體
從本質(zhì)上來說，設(shè)計體系是由「多個層面的規(guī)范」組合而成的。因此，由設(shè)計師推動的體系化建設(shè)，往往最初都是從設(shè)計規(guī)范這一「單層規(guī)范」開始。但是，設(shè)計體系的建設(shè)需要將單層的規(guī)范，通過不同的方式，轉(zhuǎn)化為不同層面的規(guī)范，最終由面到體，形成體系化。
換位思考，尋求跨職能合作
設(shè)計體系的建立與維護，通常需要多職能的通力協(xié)作。因此，我們需要經(jīng)常換位思考，在完成設(shè)計的工作，幫助其他職能完成目標。只有這樣，才能得到更多的信任，并以此為基礎(chǔ)推動更多體系化的建設(shè)。
比如我在設(shè)計一個功能模塊的頁面時，首先會與不同模塊產(chǎn)品經(jīng)理進行交流，了解不同的業(yè)務(wù)需求，并從產(chǎn)品層面就開始尋求統(tǒng)一性與通用性。這樣的話，當其他模塊需要同一個功能時，前端便可以直接復(fù)用，同時后端的數(shù)據(jù)也可以進行互通。而在開發(fā)端，我也會詳細了解不同端的開發(fā)實現(xiàn)原理，務(wù)求設(shè)計規(guī)范與開發(fā)規(guī)則在理解上的一致性。這一既方便了開發(fā)理解規(guī)范，同時也從根本上提升了開還原的準確性。
長此以往，整個團隊就能夠建立良好的溝通和互信關(guān)系。有了這種默契，設(shè)計體系的推動就容易多了。
保持優(yōu)化，不斷成長
設(shè)計體系的另一個重要價值在于，它是可以伴隨產(chǎn)品不斷成長的。所有產(chǎn)品都是在發(fā)展中不斷變化的，過分僵硬的規(guī)則，將會對產(chǎn)品發(fā)展起到反作用。
在業(yè)務(wù)發(fā)展中，產(chǎn)品一定會不斷地加入新的功能模塊，并對原有頁面作出相應(yīng)的調(diào)整。因此，設(shè)計體系需要時刻與產(chǎn)品策略保持一致，及時與上下游職能溝通，不斷地針對產(chǎn)品發(fā)展進行優(yōu)化，以保證設(shè)計體系能夠符合產(chǎn)品的發(fā)展需要。
使用正確的推動方式
體系化最終能否成功實施，推動的方式至關(guān)重要。
在日常的項目中，大多數(shù)的業(yè)務(wù)方對設(shè)計體系了解甚少，也難以體會其中的價值。因此，他們通常會認為這些東西毫無必要，多數(shù)情況也不太愿意配合體系的推進。如果強行推進，反而會引起不必要的阻力，招致反感。那么，我們應(yīng)該如何正確的去推進設(shè)計體系建設(shè)呢？
為他人帶來價值：首先，尋找雙方共同的利益點是首要任務(wù)。也許是可以讓其他職能的工作更，也許能夠促使其達成 KPI，再不直接，那也一定能夠為整個產(chǎn)品帶來價值（不然你也沒必要推了）?？傊?，設(shè)計體系一定要能夠為他人帶來價值，這樣才能順利推進。否則人家憑什么要協(xié)助你推進，因為你美麗可愛嗎？你也可能比較可愛，但總歸是不能一直這么來吧。
在解決問題后提出方案：不要一開始就啪一下拋出一個「宏大的理想」，大部分人會覺得你不切實際。你只需要通過這個體系，幫助業(yè)務(wù)方先解決一個問題，然后再提出你解決方式的來源——一個嚴謹?shù)?、可驗證的、長遠價值的體系化解決方案。
尋找合適的推動時間：最后，對于設(shè)計體系來說，尋找到正確、恰當?shù)耐七M時機至關(guān)重要。比如當你在平時突然想要提出，對現(xiàn)有品牌進行升級時，大多數(shù)業(yè)務(wù)方都會認為你是沒事找事。而如果情況是在新的一年中，產(chǎn)品進行了概念的升級，這時候你將概念以及未來的品牌規(guī)劃融入在你的方案中，再去推進品牌升級，就會容易很多了。
-本文旨在引導(dǎo)大家更好地理解和學(xué)習(xí)這種思維方式，想要用好全局性設(shè)計思維，光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產(chǎn)品中，為業(yè)務(wù)帶來更大的價值。
因此，在后續(xù)的幾篇文章中，我將通過不同類型案例，為大家深入講解全局性的具體實踐案例。
全局性設(shè)計思維 | 如何打造強大的品牌體系
為什么要建立品牌體系？品牌體系有哪些價值？設(shè)計師應(yīng)該如何推動品牌體系的建立？
本文將帶你了解網(wǎng)易智慧企業(yè)品牌體系的建設(shè)與推動全過程，聊一聊品牌體系建設(shè)的那些事兒～
FishDesign組件庫 | 從零到一構(gòu)建企業(yè)級UI組件庫
我們?yōu)槭裁匆⒔M件庫？在產(chǎn)品的什么階段需要組件庫？如何抽象業(yè)務(wù)組件？組件庫設(shè)計過程中有哪些重要的細節(jié)需要注意？
本文帶你深入了解，網(wǎng)易 Web 端組件庫——FishDesign 組件庫從零到一的完整全過程。
全局性設(shè)計思維 | 如何構(gòu)建事業(yè)部級大型設(shè)計體系
設(shè)計體系有什么價值？如何基于不同的業(yè)務(wù)建立設(shè)計體系？設(shè)計師如何推動體系化建設(shè)？在體系化過程中有哪些需要注意的地方？
我將會在這篇文章中，為大家介紹網(wǎng)易智慧企業(yè)設(shè)計體系構(gòu)建全過程。
樣式組件化+規(guī)范體系化，形成產(chǎn)品設(shè)計體系，整體重構(gòu)產(chǎn)品線。
結(jié)合品牌體系，推動事業(yè)部更多產(chǎn)品加入體系，形成智慧企業(yè) Web 端產(chǎn)品設(shè)計體系。
推動更多產(chǎn)品/業(yè)務(wù)融入體系中，讓智慧企業(yè)設(shè)計體系不斷成長，賦能業(yè)務(wù)發(fā)展。
好吧，似乎文章又寫得偏長了一些。只能說，想要認真地講清楚一個道理，確實不是一件容易的事情。
設(shè)計思維本身并不復(fù)雜，但想要講清楚它的背景、原理及價值，就需要把它整個掰開來講。而為了確保設(shè)計思維的可實施性，又需要經(jīng)過大量的實踐研究，自己能夠走通以后，才能與大家分享。
坦白講，似乎整個社會都在追求快節(jié)奏、碎片化閱讀。但若是因此而喪失了自己學(xué)習(xí)的節(jié)奏，那么等于是沒有節(jié)奏的，你的知識體系也將是東拼西湊，無法形成一套完整的體系。這也是我更新比較慢的原因之一，希望大家讀完文章，能夠切實地得到一些東西，這就很有意義。
文章來源：優(yōu)設(shè) 作者：Jady13
你知道嗎？視力，聽力和行動能力完全健康的人，可以輕松地讀寫，可以有效執(zhí)行多任務(wù)，并且始終可以正常工作的人約占總?cè)丝诘?0％？其余的人都是戴著眼鏡或有色盲，手腕或耳朵受傷，生活在嘈雜的環(huán)境中或網(wǎng)絡(luò)信號質(zhì)量差，忙碌或忙碌中，閱讀障礙或有注意力障礙等。
這意味著大約一半的用戶可能很難使用我們的產(chǎn)品或瀏覽我們的網(wǎng)站。因此，我們可能錯過了提高用戶滿意度并擴大受眾范圍的機會。
不過在設(shè)計階段實施一些簡單的原則就可以改善交互和整體用戶體驗，極限設(shè)計可以為所有人帶來價值，我們稱之為“包容性設(shè)計”。
什么是包容性設(shè)計？包容性設(shè)計考慮了盡可能多的人的需求和能力，而不僅僅是針對殘疾人。它認識到我們的需求會隨著時間和環(huán)境的變化而變化，因此它會預(yù)測錯誤，掙扎和不同的交互方式。它的目的是在問題發(fā)生之前解決問題，提高標準并改變良好產(chǎn)品設(shè)計的標準。
包容的用戶界面是善解人意，有意識且可訪問的。年齡，性別，教育程度，財富和能力等不同特征，在不同環(huán)境中生活或工作，獲得技術(shù)水平不同的不同人群可以舒適地使用它。
我們將使用POUR作為在用戶與界面之間創(chuàng)建簡單，輕松，快速交互的參考。
POUR代表
可以理解：數(shù)字內(nèi)容可以輕松地以不同方式進行解釋或處理嗎？
可操作：數(shù)字產(chǎn)品能否輕松自如地進行功能和控制？
可以理解：用戶可以理解界面的功能和內(nèi)部信息嗎？
健壯性：數(shù)字產(chǎn)品是否與不同的輔助技術(shù)和設(shè)備兼容？
設(shè)計師如何提供幫助
作為設(shè)計師，我們當然不能控制以上所有要求都能做到。但是我們應(yīng)該承認，人們遇到的許多可訪問性問題是由設(shè)計階段未做過的決定引起的。因此，設(shè)計師有很多機會可以有所作為。僅通過做出更明智的設(shè)計決策，我們就可以影響（改進或協(xié)助）四種經(jīng)驗。
視覺體驗：這包括形狀，顏色，對比，文本樣式-產(chǎn)品界面的所有圖形元素。
聽覺體驗：這是指與產(chǎn)品互動時產(chǎn)生的聲音，音量和清晰度。
認知經(jīng)驗：這描述了用戶花費在解釋界面上的時間，以及使用界面需要多少注意力和精力。
運動體驗：這包括執(zhí)行任務(wù)或與產(chǎn)品交互所需的所有動作和動作。
通常，可訪問性被認為是對創(chuàng)造力的挑戰(zhàn)；但是，如果我們認為這是一個創(chuàng)造性的挑戰(zhàn)，那么我們會開辟全新的可能性領(lǐng)域。真正好的可訪問性的訣竅不是在功能或功能上進行折衷，也不是在美學(xué)上取舍，而是使功能和創(chuàng)意體驗也可以訪問。
改善視覺體驗
1.顏色
對比度對比度是亮度或顏色的差異，使物體從周圍環(huán)境中脫穎而出，并可能對清晰度產(chǎn)生顯著影響。高對比度使視覺元素從背景中脫穎而出，更加引人注目。
專家提示：純粹的＃000000黑白色會給眼睛帶來強烈的對比度，甚至?xí)绊戦喿x障礙者。這就是為什么我們傾向于避免使用它，而是選擇深灰色的原因。
亮度
亮度描述從光源發(fā)出的照明水平或從表面反射的光量。明亮的顏色反射更多的光線，并會干擾我們閱讀和處理信息的能力。
避免在背景或較大表面上使用鮮艷的顏色。請勿在文本上或文本附近使用鮮艷的顏色，以免干擾文本。如果品牌要求特定的高亮度顏色，請嘗試建議使用飽和或較深的顏色。如果你絕對必須使用明亮的顏色，則應(yīng)將其用于突出顯示動作的方法最小化，并將其與較深的色相搭配以達到平衡和高對比度。
專家提示：任何含有超過50％黃色的顏色都會自然反射更多的光。這意味著黃色，橙色，綠色和藍綠色是高風(fēng)險顏色，應(yīng)謹慎使用。
色盲
色盲是無法區(qū)分特定顏色（通常是紅色和綠色，偶爾是藍色）的一種，它比你想象的要常見。
專家提示：不要僅僅依靠顏色；顏色不應(yīng)該是傳達重要信息的唯一方法。您可以執(zhí)行以下操作：
使用下劃線表示鏈接和斜體，或使用粗體突出顯示文本
將圖標與文本一起使用可傳達成功或失敗的信息
使用紋理或圖案作為圖表
為按鈕或明顯的通知使用清晰的視覺樣式，針對焦點或活動狀態(tài)使用不同的字體樣式
2.版式
字體選擇
通信是每個數(shù)字產(chǎn)品的首要目標，可以借助印刷術(shù)及其正確應(yīng)用來實現(xiàn)。內(nèi)容應(yīng)清晰易讀，這意味著易于識別和解釋，輕松閱讀和處理。
簡潔明了對于快速閱讀和解釋至關(guān)重要，請避免使用復(fù)雜的字體，因為它們只會增加視覺干擾。選擇正確的字體家族，針對那些具有清晰定義和獨特形狀的字符，因為視力障礙或閱讀障礙的人可能會因某些字符或其組合而感到困惑。
字體樣式
字體樣式還會影響弱視或閱讀障礙者的閱讀性能。我們應(yīng)該注意并謹慎使用字體樣式（如斜體，下劃線和大寫）的頻率和位置。
根據(jù)“英國閱讀障礙協(xié)會”的規(guī)定，應(yīng)避免使用斜體，特別是對于較大的副本塊或較小的字體。這是因為它們使字母傾斜，顯得更加尖銳，因此更難以閱讀。
正文也應(yīng)避免使用帶下劃線的字體樣式。給長的段落加下劃線會增加視覺噪音，從而降低閱讀性能，而給短的句子或單詞加下劃線會與活動鏈接相關(guān)聯(lián)，并可能引起混亂。粗體是添加對比度和強調(diào)的更好選擇。
盡管沒有確鑿的研究，但有一些證據(jù)支持也應(yīng)避免主要針對正文使用大寫字母。似乎所有大寫字母的統(tǒng)一外觀會降低單詞形狀的對比度，從而使掃描變得不那么容易。此外，大寫看起來有點緊張，可能感覺好像有人在向您大喊大叫。
專家提示：平衡是關(guān)鍵。謹慎使用每個樣式并賦予其含義甚至可以提高可讀性。
字體大小
您知道絕大多數(shù)人戴眼鏡或隱形眼鏡嗎？實際上，十分之六以上！此外，約有62％的人通過手機訪問互聯(lián)網(wǎng)，這還不包括應(yīng)用程序的使用情況。當視力不佳的人在旅途中在小屏幕上使用技術(shù)時，可能會出什么問題？
使用較大的字體。通常，16px被認為是最具有包容性的，但是請注意，字體可以以不同的比例站立，并且字體的大小可以相差很大。切勿低于14px，事實上，大多數(shù)現(xiàn)代網(wǎng)站的正文都使用18px字體，而標簽，標題或工具提示僅使用14px或16px。
專家提示：此外，避免使用薄而輕的字體，因為對于較小的字體或在明亮的光線下可能難以閱讀。
段落格式
幫助人們輕松瀏覽內(nèi)容應(yīng)該是我們的首要目標，因為只有20％的人可以閱讀內(nèi)容，其中55％的人可以快速瀏覽內(nèi)容。我們的工作是通過使用舒適的段落格式來盡可能地支持人們。
研究表明，用于支持可讀性的平均在線行長（包括空格）約為70個字符。標題，字幕和項目符號點將有助于掃描，而左段對齊將使文本更易于閱讀。
較長的文字墻使人們參與的機會大大減少。成功的段落長度不超過5到6個句子。
空格將幫助患有認知和注意力障礙的人，保持閱讀重點。對于其余的內(nèi)容，它只會使閱讀更加愉快和流暢。根據(jù)WCAG，最佳做法是將行高（行之間的間距）設(shè)置為相對于該類型大小的1.5相對值。段落之間的間距也至少應(yīng)比行間距大1.5倍，因此必須明確定義。
提示：行距不應(yīng)超過2.0，因為它可能產(chǎn)生相反的效果并分散讀者注意力。
復(fù)制版面
作為設(shè)計師，我們經(jīng)常陷入過度設(shè)計布局的陷阱，以使它們看起來引人注目或獨特，從而將可用性放在一邊。這就是為什么我們看到諸如文本的一部分之類的趨勢在彩色或帶紋理的背景上重疊圖像或文本的趨勢。只要我們知道如何以及何時使用它們，我們?nèi)匀豢梢韵硎芷渲械囊恍┶厔荨?/span>
當在彩色或帶紋理的背景上使用文本時，我們需要確保它們之間的色彩對比度足夠高，同時在整個重疊區(qū)域都保持一致-意味著在副本下沒有較淺和較暗的區(qū)域，也沒有過多的細節(jié)干擾。較大的字體大小和較重的字體粗細也會提高對比度。
專家提示：一如既往地“了解您的用戶”。時髦的布局并不適合所有人。
改善聽覺體驗
您可能在想，視覺設(shè)計如何影響聽覺體驗？因此，想象一下您正在與一個俱樂部的朋友交談。我敢打賭，您只能聽見她說的話的一半，但是您可以通過看著她的嘴唇移動，肢體語言和面部表情來保持對話的進行。由于視覺效果的支持增強了模棱兩可的聲音，因此您最終可以理解它們。
在用戶界面中，聲音對于不同的人可能意味著各種各樣的事情。它們也很容易在嘈雜的背景中丟失，因此最好以視覺提示來支持它們。
我們的目標應(yīng)該是提供聽覺和視覺提示的反饋，支持錯誤，通知以及與相關(guān)和鄰近圖形元素的重大交互。我們還必須確保視覺線索保持足夠長的活動時間，以使人們能夠看到和閱讀，同時又不隱藏任何重要的內(nèi)容。
一個好的做法-不限于支持聲音輔助技術(shù)，是在UI元素中添加描述性標簽，并在圖像中添加標題，以便于在屏幕閱讀器中輕松導(dǎo)航。為視頻使用字幕是改善聽力體驗的另一種方法，對非母語人士也有幫助。
最后，我們不應(yīng)該忽略聲音是問題的情況，這就是為什么我們需要視覺替代的原因。有些人可能對特定的聲音敏感，或者處于聲音可能引起干擾的情況下。然后，這是一個好習(xí)慣，讓人們可以選擇關(guān)閉聲音而不必調(diào)低揚聲器音量，從而使此功能清晰可見。
專家提示：避免使用不必要的自動播放聲音和音樂，因為它們會打擾甚至驚嚇別人。
改善認知體驗
1.知覺
視覺清晰度
清晰度是用戶界面中的第一個也是最重要的屬性。成功的用戶界面使用戶能夠識別和解釋他們所看到的內(nèi)容，了解產(chǎn)品的價值和所要采取的行動，預(yù)測使用產(chǎn)品時會發(fā)生什么以及與產(chǎn)品成功交互。
形式跟隨功能是一項原則，指出對象應(yīng)反映其預(yù)期的功能或目的。為了在用戶界面中實現(xiàn)此目的，我們使用了附加功能，附加到UI的視覺提示/屬性，以顯示用戶與其交互的可能方式。
支付能力取決于用戶的身體能力，目標，過去的經(jīng)驗，當然還取決于他們認為可能的情況。按鈕應(yīng)該看起來像按鈕，就像鏈接，菜單標簽，表單等一樣。使用清晰的符號/功能可以幫助用戶識別或解釋界面，并輕松進行交互。
在用戶界面中使用熟悉的和已建立的設(shè)計解決方案將幫助用戶預(yù)測結(jié)果并自信地采取行動。因此，使用設(shè)計模式來解決常見問題是一個好習(xí)慣，該設(shè)計模式是經(jīng)過測試，優(yōu)化和可重用的解決方案。
設(shè)計模式建立在過去的經(jīng)驗和可能性的基礎(chǔ)上，并附加到特定的目標上。為避免眼前的問題，選擇正確的設(shè)計模式應(yīng)該是我們避免混淆或壓力大的交互的第一要務(wù)。
建立一致的視覺語言是獲得更全面界面的關(guān)鍵。具有相同功能和/或重要性的重復(fù)交互式UI組件應(yīng)始終以相同的方式外觀和操作。因此，導(dǎo)航，按鈕，鏈接，標簽，錯誤等元素應(yīng)在整個產(chǎn)品中具有一致的樣式，顏色和動畫。
值得注意的是，一致的視覺語言不僅可以通過附加含義和減少視覺噪音來幫助互動，而且還可以增強產(chǎn)品的個性，提升品牌知名度，建立情感聯(lián)系和信任。
層次結(jié)構(gòu)
視覺層次結(jié)構(gòu)是指圖形元素的視覺重量及其排列方式，使用戶可以輕松地探索和發(fā)現(xiàn)內(nèi)容。通過為頁面元素分配不同的視覺權(quán)重，我們可以對內(nèi)容進行分組并影響人們感知信息和瀏覽產(chǎn)品的順序。
顏色是第一大關(guān)注焦點。彩色元素將脫穎而出，因此在層次結(jié)構(gòu)中位于較高位置。明亮的顏色會更加突出，因此，考慮到這一點，我們應(yīng)該仔細安排和分配顏色，以將眼睛引導(dǎo)至正確的位置。
視覺元素的大?。ɡ缬∷?，按鈕，圖標和圖像）在確定重要性方面幾乎與顏色一樣強大。較大的圖形吸引了用戶的注意，并且顯得很重要。對于排版，明顯不同的尺寸縮放比例可以幫助建立內(nèi)容層次結(jié)構(gòu)，并使內(nèi)容掃描變得輕松而輕松。
輔助視覺層次結(jié)構(gòu)的另一種方法是通過設(shè)計一致性和例外。一致對齊，外觀相似，重復(fù)或相鄰的元素給人的印象是它們是相關(guān)且同等重要的，而偏離元素以及不尋常的形狀和有趣的紋理或樣式將更加顯著。太多的設(shè)計例外會引起人們的關(guān)注，并會增加復(fù)雜性，因此，謹慎使用它們是一個好習(xí)慣。
專家提示：研究格式塔原理及其在UI設(shè)計中的應(yīng)用將有助于我們理解視覺感知和分組以改善視覺層次。
色彩應(yīng)用
顏色不應(yīng)該是傳達信息或增加意義的唯一方法，但它仍然有用且很有影響力，因此不應(yīng)將其視為裝飾性元素。顏色具有含義，盡管沒有硬性規(guī)定，但是太多的顏色會導(dǎo)致信息疲勞，并且不一致地使用顏色會導(dǎo)致混亂。
避免使用太多顏色。通常，三種顏色足以描述頁面的所有重要視覺元素。60–30–10規(guī)則可以幫助我們建立完美的和諧。其中60％的彩色項目由原色組成，以創(chuàng)建統(tǒng)一的產(chǎn)品主題，具有30％的輔助顏色增強含義和/或創(chuàng)建引人注目的效果，以及10％的強調(diào)色，以補充和輔助主顏色和輔助顏色。
此外，我們需要確保為消息使用正確的色調(diào)。除了美學(xué)，顏色還可以創(chuàng)造情感和無意識的聯(lián)系。特定陰影的含義會因我們所處的文化和環(huán)境而異，并且顏色通常具有不同的含義-在西方世界，錯誤是紅色，成功是綠色，信息是藍色等。
專家提示：可以將我們自己的含義分配給顏色，只要它們不與既定規(guī)范重疊，并且我們在整個產(chǎn)品中使它們保持一致。
符號學(xué)
符號學(xué)是對符號/圖標及其含義的研究。它著重于人們?nèi)绾涡纬珊徒忉屵@些含義，這取決于人們所看到的上下文。在用戶界面中，圖標是可視語言的一部分，用于表示功能，功能或內(nèi)容。符號學(xué)可以幫助我們設(shè)計立即被識別和理解的圖像。
盡管這些年來，我們已經(jīng)開發(fā)出具有大多數(shù)人接受和理解的含義的圖標。用戶還習(xí)慣于使用特定于平臺的圖標，并且可以輕松地進行解釋。在可能的情況下，最好遵循這些既定的解決方案，以獲得熟悉和流暢的體驗。
當然，在某些情況下，我們需要設(shè)計具有特定功能的自定義產(chǎn)品特定圖標。這些圖標必須盡可能簡單明了，以確保清晰度。它們還應(yīng)該具有一致的視覺樣式，以傳達其功能或與其他非功能性元素區(qū)分開。
最后，我們不應(yīng)該僅僅依靠視覺隱喻來傳達含義，因為某些關(guān)聯(lián)可能并不那么明顯。如果圖標需要標題來描述其含義，則可能不合適。如果不確定，請與實際用戶一起測試我們的設(shè)計會有所幫助。
專家提示：圖標不僅易于解釋，而且還可以具有多種含義。因此，將標記與功能圖標結(jié)合使用是一種很好的做法。
2.互動
記憶
許多心理學(xué)實驗表明，健康個體的處理能力非常有限。在我們的短期記憶中，我們大多數(shù)人平均可以保留7項，具體取決于個人。我們的大腦并未針對數(shù)字產(chǎn)品所需的抽象思維和數(shù)據(jù)記憶進行優(yōu)化，因此良好的設(shè)計會有所作為。
減少頁面上可用選項和信息的數(shù)量，以及使用清晰的標題，面包屑和“后退”選項來訪問以前的內(nèi)容，將幫助用戶記住或提醒自己他們在哪里，打算做什么或要做什么。是必需的。
交互元素上或附近的清晰可見副本將幫助用戶在整個交互過程中保持知情和自信。例如，表單標簽應(yīng)始終可見，動作不應(yīng)隱藏在懸停后面，按鈕應(yīng)提供目標位置的上下文，并且各節(jié)的標題應(yīng)明確。
專家提示：通過稱為“塊”的過程可以增加我們的短期記憶和處理能力。這是我們在視覺上將項目分組以形成更容易記住的較大項目的地方。
改善運動體驗
菲茨法
菲茨法則為人類的運動和互動提供了一個模型。它指出，將指針（光標或手指）快速移動到目標區(qū)域所需的時間是其距目標的距離除以目標大小的函數(shù)。意味著較小的目標會增加互動時間。
根據(jù)Fitts法則，我們旨在減小用戶與目標之間的距離，同時增加其尺寸。該法律主要適用于導(dǎo)航和按鈕。菜單和子菜單元素應(yīng)在附近，而按鈕，鏈接和分頁應(yīng)在較大區(qū)域上單擊，以實現(xiàn)更快更準確的交互。
專家提示：根據(jù)可用性最佳實踐，按鈕/鏈接的最小尺寸為42x42像素（重擊尺寸）。
獎勵：提高績效
到目前為止，我們已經(jīng)建立了包容性設(shè)計，旨在讓盡可能多的人訪問并實現(xiàn)他們的目標或解決他們的問題，盡管他們有自己的情況。我們可能很幸運，可以使用進的設(shè)備或超高速互聯(lián)網(wǎng)，但是當我們的信號不太好時，我們會感到掙扎。對于大多數(shù)人來說，老式設(shè)備和糟糕的互聯(lián)網(wǎng)已成為常態(tài)，因此，為獲得最佳性能而設(shè)計是一件大事。
極簡主義是關(guān)鍵。如果我們打算創(chuàng)造一種可以被盡可能多的人使用的產(chǎn)品，那么我們就應(yīng)該擺脫不必要的一切。圖形，圖像或動畫是有價值的，還是增加了視覺噪音和加載時間？如果是的話，那就必須走了。
圖像優(yōu)化是幫助提高數(shù)字產(chǎn)品性能的另一個標準。通過將圖像調(diào)整為合適的大小，然后通過諸如ImageOptim和TinyPNG之類的工具運行它們，可以節(jié)省寶貴的千字節(jié)和實際的加載時間。
開發(fā)人員通常使用的一種提高性能的技術(shù)是“延遲加載”模式，其中圖像的加載是異步的，并延遲到需要時才加載。例如，如果您快速滾動到頁面底部，則在網(wǎng)站完全加載之前，您可能會看到類似網(wǎng)站線框的內(nèi)容?！皾u進圖像加載”的一種替代方法是“漸進圖像加載”，其中我們顯示一個空的占位符框<div>，然后用小的低質(zhì)量模糊圖像填充它，最后用所需的高質(zhì)量圖像替換它。
在每個數(shù)字產(chǎn)品中都遵循上述最佳實踐，這是高可訪問性標準的良好起點。但是總會有改進的余地，并且更好地了解我們的用戶可以揭示提高無障礙標準的新方法。因此，有必要花費一些時間和金錢來更多地了解我們的不同類型的用戶，因為他們可以教會我們很多有關(guān)使包容性體驗成為現(xiàn)實的知識。
了解我們的用戶將幫助我們練習(xí)同理心。“賦權(quán)”不是偶然的設(shè)計思維過程的第一步。在移情階段，我們的目標是加深對我們正在設(shè)計的人員及其獨特視角的了解，因此我們可以在進行任何設(shè)計決策時與他們認同并代表他們。
zhuanz
藍藍設(shè)計的小編 http://www.yvirxh.cn