在我開始所有話題之前，我有問題想問大家，大家工作快樂嗎？
我聽到了特別積極的反應，說非常的快樂。希望大家說快樂，不是因為今天是周五。
但是呢，其實，工作并沒有我們想象中那么快樂，是所有的活動當中快樂指數的，跟躺著帶來的快樂差不多的，有些人躺著什么也不干，也比工作快樂。
什么原因導致了工作的不快樂？
第一類，關乎目標。大部分人認為工作是為老板服務，所以很難受。另一類，是因為反饋，很多工作的結果依靠于外界，依靠于老板，所以你跟直屬上司的關系，決定了工作的體驗。第三類，是我們認為挑戰和技能的不匹配，導致了我們工作的不快樂。當挑戰大于技能的時候，你就會焦慮，當技能大于挑戰的時候，你就會覺得無聊，你的工作就會在焦慮和無聊之間來回地徘徊，這是我們理解的世界。
這個問題，在數字世界中會變得更加的明顯。70 年前，第一臺計算機出來之后能解決的問題非常的簡單，但是 70 幾年過去了，數字世界得到了非常大的發展，我身邊任何一個小設備都遠遠大于 70 年的。而現在的我們和 70 年前的前輩們沒有本質的區別，我們有 7+2 的記憶法則，最多只能記住 9 個數字，這就導致了在數字世界當中，我們所面臨的挑戰遠遠大于人類所掌握的技能。
數字世界往往給我們帶來了挑戰大于技能，所以你的體驗是負能的。如果你的工作更加有趣，挑戰能夠匹配技能的時候，工作就會變得很好玩。工作就像打游戲一樣，你通過了一關，技能得到了提升，工作就會變得持續好玩，所以我們在無聊和焦慮中間尋找平衡，這個平衡就是快樂的通道。
說起工作，大家多多少少會有快樂的體驗，但是和躺在沙灘上睡覺的體驗完全不一樣。某一個下午或者晚上，需要處理一件稍微有難度的事情時，你需要集中所有的注意力，專注于你和你的事情，一抬頭兩個小時過去了，這是一種極度飽滿、極度被滿足之后的快樂，它是一種成長的快樂，也是一種挑戰和技能匹配的快樂，也是全情投入的快樂，所以我們所說的快樂工作指的是全情投入的工作。
基于這樣的思考，我們將每個人都追求快樂工作，作為Ant Design 的基本假定。
第一個原因是，我們認為人或多或少都有這樣的快樂體驗；第二個很重要的原因在于，對于大多數人而言，我們醒著的絕大部分時間都要工作，如果你無法在工作中體驗到快樂，人生將會在焦慮和無聊中度過。
基于這樣的思考，我們找到了 Ant Design 的基本假定。就像光速不變基于相對論一樣，我們想基于這樣的假定，表達 Ant Design 的體系。
這就是 Ant Design 的基本假定，每個人都追求快樂工作，Ant Design 中每個人是誰？我們分成兩種不同類型的用戶：第一類是用戶，第二類叫做設計者。所謂的設計者是創造這些應用性能的人，也就是在座的大多數。
我們將快樂拆成兩部分，一部分是快感，一部分是樂趣，基于此，我們衍生出了 Ant Design 四個價值觀，設計首先是自然的，其次是確定的，第三，設計是要有意義的，第四，設計是能讓用戶和產品不斷成長的，它是具有生長性的。
所以接下來的分享當中，因為時間的關系，我會重點分享其中的兩塊。
第一塊叫做確定性。分享一個小案例，我剛入行的時候，就碰到了社會的毒打，我想找到我的合作伙伴進行驗收發布的環節，因為設計師對細節有非常強的管控情系，我用略微虔誠的態度說：“親，能稍微調整一下列寬嗎？”，他可能沒理解我的意思，說“我覺得挺好”，我說“都換行了，哪里好？”，我以為會引起他的注意，結果他回了我一句：“這不重要，你行你上?！?
我一開始并不明白，為什么這個世界是這樣的？我認為我們都應該有同樣的認知，直到有一天我看到他的競爭升級 PPT 的時候，我就明白了，原來他不是針對我，他不換行不僅在產品上，PPT 里也不換行。不同的人有不同的想法，不同的工種也有不同的想法，而我們的工作是需要這樣一群人一起合作，就會導致一個問題，當不同的人有不同的、不確定性的想法，會導致研發過程的不確定性。
我們總說，一個人可以走得很快，一群人才能走得很遠。我們要想辦法怎么讓這群人可以步調一致地走得快，又走得遠，我們把這套體系、方法論叫做 ETCG 2.0。
這是原有 ETCG 的基礎上，進行升級的過程。我們希望面對同樣的問題，各個角色都能推理出同樣的方案。就像你在春天種下一顆蘋果樹的種子，你一定在秋天可以得到一顆蘋果樹，而不是一顆梨樹。
ETCG 2.0幾個字母分別代表不同的意義，第一個是功能范例，第二個是模板，模板是我們基于業務的抽象，目的是幫助新手或者幫助不同設計師保持設計的一致性，指引頁面如何設計，比如這是典型的列表頁，由高級搜索和表格組成。今年在模板的基礎之上又做了一層更大的精進，我們做了抽象和規范衍生出了模板組件。一行模板組件，當無法滿足你的需求時，只要一行代碼，就可以得到一個完整的序列。
除了列表頁，還有表格頁，還有圖表、表單，以及布局，構成了我們對系統的抽象，叫做「四表一局」，它大概覆蓋了中后臺系統、或者企業級產品 80% 以上的業務訴求，同時本著非常開源、開放和普惠的心理，整個「四表一局」正式對外開放，大家可以訪問 Ant Design 的倉庫下載和使用。
ETCG 中的 C 是組件，是 Ant Design 最早和大家見面的內容，五年的時間里面，我們有了很多數量上和質量上的精進，同時創造了非常多的社會價值。這五年前，非常令我們自豪的是，有接近 1000 名貢獻者參與到 Ant Design 的建設中，同時 TOP 50 當中，60% 來源于社區，他們為 2 萬家企業提升了 3-5 倍的研發效能，同時我們正式于去年年底成為全球開源第一的組件庫。五年前，螞蟻集團發起了 Ant Design 這個項目，但是它今天所取得的成就是來源于社區和我們的共同努力，這里的榮譽和掌聲應該獻給所有為Ant Design 貢獻過代碼的同學，謝謝你們的支持。
ETCG 的 G 有兩個。第一個 G，是對組件樣式的抽象，我們用了變量化的方式進行了約束和管控，它可以做什么？特別簡單，你的老板今天不喜歡藍色，想要橙色，你只要一行編碼，就讓組件庫發生了煥然一新的變化。
ETCG 的第二個 G，是我們今年重點建設的部分，也是全新的一部分，叫做 Guides，指的是人和機如何進行互動交互的過程。
比如說這里是應該放一個數值輸入框，還是放一個輸入框？以及如何進行放置？我們將瑣碎的交互規則進行抽象和封裝，讓機器學習這些規則，讓機器幫助我們進行這些規則。你只要導入原數據，幾乎不用做任何的配置和更改，可以得到可進入生產環境、可研發的表單頁面，設計得可能比初級的設計師產生的效果更好，你想要的一切都應該放在合適的地方。
這就是我們對 Ant Design 確定性的理解，不需要設計師參與的設計產品，提升了設計和研發的體驗，當然商業化還需要很長的時間。當下如何解決現在碰到的問題？仰望星空，也要腳踏實地。作為設計師，我在想怎么解決五年前的問題，我很想說我行我上。
我們怎么使用？使用 Kitchen 進行編輯化的能力，把 13% 甩給我的合作伙伴。如果你覺得還不夠，想做更多的管理和管控，甚至可以用「四表一局」的能力進行服務的搭建，搭建可進入生產環境的服務產品，讓設計師變成設計工程師的角色。
在今天分享的最后一趴，我和大家聊聊這個場次經常聽到的詞，那就是“自然”，學術界和產業界對自然有非常多的理解。我們把它定義成了形容詞，我們認為這個行為很自然，大家經常在各個場合聽到的一句話，設計是關乎如何運作的問題，Ant Design 在這個基礎上，要聊的是 how it worksnaturally。
同樣分享一個小案例，在我們有一天的用戶群里，我們的用戶反饋了一個非常有意思的問題。他說語雀可以插入圖片嗎？語雀的負責人當時在現場，就回到：“當然可以，最基本的能力”。我們的用戶問出第二個特別具有代表性的問題：“可是我們找不到在哪里”。語雀是阿里內外都很喜歡的一款文檔類文件。編輯頁的第一頁，我們的工程師特意做成了綠色的，你點進第一個的第一行就是圖片上傳的功能。但是大家有沒有想過？我們僅僅隱藏了一級，就讓用戶記不起來有這個功能，我們僅僅隱藏了一級，就讓用戶找不到這個功能。這不是語雀產品特有的特征和問題，而是這個時代大部分問題具有的特征和問題，因為大部分的產品處于 1973 年的基礎上。
WIMP 是什么？Window、lcon、Menu、PointDevice，當我們的功能只有 20 幾個的時候，這是非常好的設計，總比代碼行好太多，今天我們說了數字世界當中，我們的設備、計算機、網絡成千上億倍的發展，用戶怎么記得住 8000 個功能？用戶怎么定位到 8000 個功能在哪里？所以 WIMP 界面碰到了人機交互的瓶頸階段。
為什么碰到瓶頸會越來越不自然？第一個角度從人機互動的環節，當用戶記不住的時候，就沒辦法從哪個入口出發。所以 WIMP 界面第一個不自然的原因在于，所有動作的發起都依托于用戶。用戶一旦記不住，一旦找不到，人機交互就沒辦法走通，這是 WIMP 界面的第一個問題。
第二個問題，要回到人身上。人的行為分為有意識、無意識的兩層，能量消耗比較大的就是有意識層面。WIMP 在于所有的行為依托于用戶有意識地觸發，這本身就是一個非常消耗腦力的一件事情。在我們面對這么多功能的環境下，這兩個問題導致了我們在數字世界當中碰到的巨大問題。因為我們知道系統的功能每天在增加，數字世界不需要遵循物理制造的極限，它可以進入無限備功能的疊加，所以在這個世界當中碰到的挑戰遠遠大于我們所掌握的技能，所以 WIMP 界面碰到了誕生以來最大的問題。
我們如何解決這個問題呢？首先一定要清晰地認識到，人是有意識和無意識兩種思維的結構和意識形態的。同時系統也可以分為兩部分，一部分是主動功能，第二部分是被動功能，我們要嘗試的守正出奇。守正延續了 WIMP 界面常規的功能，讓人有意識尋找功能，觸發系統的能力。但是出奇要多做一步，除了讓用戶找功能之外，我們要增加很多的主動式的交互，讓功能找到用戶。
接下來分享幾個案例，在我們的常規設備當中，都已經有這樣一些主動式的服務來尋找到你。
第一類是相逢不相識，名字很好聽，解釋也特別好玩。在語雀當中有一個小功能是我特別喜歡的功能，當我編輯一篇文檔，編輯了大于 30%、50% 的文本量，這個鉤會自然地幫我鉤上，因為它有一個基礎的設定：如果這篇文章發生了比較大規模的修改，你的訂閱者很自然的想知道你這篇文章做了什么。
第二個相逢不相識的地方，大家可以聚焦一下支付寶。有興趣可以打開支付寶首頁，在你的收款碼應用里，解決什么樣的問題？解決面對面交易的問題，所以當你輸入一個金額完成以后，自然旋轉屏幕的時候，這個屏幕會進行自然的翻轉，這樣對面掃你錢的人，可以看到信息的正面，這非常自然。
第二個主動式交互的類型，叫做可用不可見。和相逢不相識的區別在哪里？就是默默地為你提供了服務，但你可能永遠不會知道它的存在。在蘋果第一代出來的時候，做了一個非常牛逼的設計，因為大家都知道虛擬鍵盤，沒有物理觸感，所以誤觸率很高。虛擬鍵盤怎么解決？蘋果基于非常有趣的思考，在蘋果的全鍵盤里面，只要輸入了 Desig 的時候，通過語義詞的分析，N 點擊的范圍遠遠大于旁邊的 B 或者 M，以及上面的 G 部分，這是幫助你做主動選擇的服務，只是我們從來不知道有這樣一件事情。所以我們將這些自然的人機互動方式進行整理，包括融入到更多的案例以后，發現人機主動式交互有九種不同類型的分類，除了輸入法，更多是通過用戶使用情景的上下文進行優化的過程。
我們有了這張人機自然的交互，怎么解決語雀的問題？我和在座的語雀設計師有過這樣的討論，用戶說圖片上傳找不到，我們大部分人的第一反映是把圖片上傳顯示單獨放出來。這可能會解決剛才的問題，但是如果明天財務說表格找不到了，我是不是還要把表格拿出來？有人說附件找不到了，還要把附件拿出來嗎？我們需要從主動式交互的角度暢想怎么優化人機互動的過程。
回到這張自然交互的工具，提供了一種簡易的思維框架。
我們去判斷哪些是可以去做的，第一件事特別簡單，我們判斷用戶使用的上下文是什么，我們發現很多產品的通用習慣，直接把圖片拖進去，做成小的服務，用戶根本不需要知道功能的存在就可以使用。
第二個從原數據角度來理解，圖片是一種特殊結構的數據，它是 jpg、png。用戶在外部復制了之后，進入編輯頁可以主動推送他一個服務，詢問他是否要粘貼，本質上并不復雜，但是它確實在 WIMP 界面傳統意義的基礎上，又提供了初級的部分，又額外做了一部分。
我們所定義的自然里面，是需要我們做更多的主動式的服務，讓我們這個海量的功能能夠在合適的場景下，去找到用戶，從而節約人的腦力和體力。因為對于人來說，我們和 70 年前的爺爺輩們沒有本質的區別，我們需要被善待。有感興趣的同學可以看支付寶的訪問碼，也期待和大家做更多的互動。
分享的最后一趴，我簡單總結一下今天做了哪些事情和分享了哪些內容。第一趴，我們提出了 Ant Design 的基本假定，我們認為每個人都缺少快樂工作，這種快樂工作是和我們平時閑散完全不同的問題。同時大多數人都不可避免的來工作，我們怎么扭轉工作對我們的體驗，這是人生中非常大的問題。第二趴，我們衍生出新的價值觀，這四個價值觀中，因為時間篇幅的原因，重點和大家講了確定性和自然的價值觀，這是歷史最悠久，也是最有代表性的兩塊。基于這兩個價值觀，我們衍生出了不同的組建庫也好、可視化資產也好，相關的設計資產以及設計策略，以及配套的設計工具，當然藍色部分是我們今天介紹的重點。最后這張圖特別適合拍照，這是我們系統提供給大家的主動式服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
完美，不是因為沒有什么可以增加，而是沒有什么可以減少。
創建美觀、可用和的UI界面需要花費時間進行設計細節的打磨，本文從視覺和情感化設計兩個方面來說說如何提升UI設計的高級感。
1、視覺元素
在互聯網產品日趨成熟的今天，你會發現所有的App越來越像，似乎是同一套模版設計出來的產品。而這種普適化的設計會導致同質化嚴重，使得設計不精致，產品沒有氣質和品牌感。一個App設計是否精致，是否富有設計感，在于它的細節，這就意味著我們在進行設計的時候，要從細微之處著手，從多方面去鉆研如何創造出打動人心的UI設計。本節總結了12個簡單直觀的提升設計感的小細節，一起來學習。
1.1 使用顏色深淺構建層次結構
在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比。單純使用字體大小對比，所營造的對比并不夠，嘗試結合色彩和字重來營造更好的對比效果。
每種顏色都有一個視覺權重，這有助于在內容中建立層次結構。通過使用顏色的深淺，為元素賦予不同的重要性。如果可以的話，你甚至可以采用兩到三種顏色：
類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：
▲主標題字重為600，其他標綠點的文字字重都為400
應當盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經較小，低于400會使得可讀性不佳。如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。
灰色文字在無彩/彩色背景下要分開處理
不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。
但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：
一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。
▲左圖設計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色
其次當涉及長篇內容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍。通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。
1.2 統一色調
選擇一種基礎色，再調整色調和顏色深淺來增加均衡。設計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調整基礎色的飽和度和明度，利用這種簡單的方式為設計增加一致性。
1.3 干凈的陰影
陰影是UI設計中最常見的視覺表現手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。
這種輕柔的陰影呈現出的干凈，增加了畫面的精致。如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現出不精致的畫面感。
還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調一致，因此呈現出十分融洽的畫面感。在UI設計中，這種手法不宜過多使用，否則呈現出的各種色彩搭配會讓人眼花繚亂。
1.4 個性的圖標設計
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？例如下面這組圖標設計，無論是在圖形上的創新，還是顏色搭配上都呈現出無與倫比的創意。
標簽欄作為一個App的全局導航起著至關重要的作用，它的設計影響著整個產品的視覺風格。通常，大多數App都是使用iOS規范的設計樣式（默認灰色，選中填充品牌色），這樣的設計太普通，太常見了。要想讓標簽欄圖標設計精致和富有個性，可以豐富每一個選中態圖標的視覺表現，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。
3D立體圖標設計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產生輕微的視覺疲勞，同時因其復雜的結構會增加用戶的認知成本。一般在外賣美食類應用中比較常見。
1.5 Tab的設計感
Tab是App設計中最常見的控件之一，它源自Material Design的設計規范。現在很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬于iOS規范當中的分段選擇器變得不那么常見了。
在視覺表現形式上，Tab和標簽欄同樣也分為選中態和未選態，它的設計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區分兩者的狀態。因為它簡單，卻越難設計出彩，要發揮極大的設計想象力，跳脫出設計規范的限制，才能找到完美的方案。例如蝦米音樂的Tab選中態是一段音頻波線，再配合文字的大小對比，一個富有設計感又符合產品特征的Tabs就被創造出來了。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺富豪作為Tab選中態的小長條，這樣就建立起視覺上的聯系，讓用戶產生由內而外的一致感受。例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設計上，既讓界面視覺，又進一步強化了用戶對品牌形象的認知。
1.6 無框設計 去繁從簡
在UI設計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內容失去注意力，因此可以減少不必要的裝飾元素。我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：
使用陰影
陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力。
使用不同的背景色來區分
通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。
增加額外的留白
創建元素之間的分離效果，并不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。
1.7 統一設計元素
在App中的每一個界面都有許多元素，那些同類的元素應保持統一的設計樣式。通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續使用。如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續到其他界面中，成為圖形或按鈕的外觀。這樣，整個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感。
1.8 符合產品氣質的字體
選擇符合產品氣質的字體，可以與產品的定位相吻合，傳遞給用戶正確的情感意識。雖然默認字體可以滿足大多數App 的設計需求。但會出現一個問題就是，系統字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微。例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發力、速度的感覺，換成系統字體后，整體感覺在氣勢上就變弱了很多。
1.9 第三方圖標風格統一
大多數App都支持三方登陸，他可以減輕用戶注冊的時間成本。通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設計師最常忽略的內容，往往是直接將第三方圖標調整一致大小和擺放整齊位置，沒有針對它們再設計。一個設計精致的App不應漏過任何的細節，我們可以以自家App的圖標風格為依據，對第三方圖標進行優化設計。
1.10 圖片中尋找色彩
App中優美的圖文設計，能帶給用戶如沐春風的視覺享受，它非常重要。我們經?？吹轿淖织B加在圖片背景上的設計樣式，為了減少復雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優的辦法。我們可以從圖片中提取主色調用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設計感。
1.11 提高圖片質量
圖片的質量影響著整個App的格調和用戶的情緒，高品質的圖片給人愉悅的視覺享受，產生美好的聯想。而低品質的圖片會瞬間拉低App的質感。在App設計中，一張漂亮的圖片從收集到上線，需要經過裁剪，調色等過程才能被使用。即使是普通的商品圖片，我們將它摳圖后調整成統一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。
1.12 卡片式設計
現在的UI界面設計中，卡片式設計已經是一種非常常見的設計形式，它有利于信息分層和整合，劃分出更加清晰的組織結構，實現復雜內容的簡化處理，提高空間利用率。同時卡片式設計通常很依賴視覺元素，很強的視覺元素正是卡片式設計的一種優勢，也是提升設計品質感的良方。
2、情感化設計
心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗。只有當產品觸及到用戶的內心時，使他產生情感的變化，那么產品便不再冷冰冰，他透過眼前的東西，看到的是設計師為了他的使用體驗，對每一個魔鬼細節的用心琢磨，人們會產生愉快、喜愛和幸福的情感。情感化設計并不是轟轟烈烈，有時候僅僅一句文案、一幅插圖、一個動畫就能打動人心，使用戶獲得愉悅的使用體驗。讓設計變得高級不僅僅是視覺層面，這些簡單而美好的設計細節充滿了積極情緒，它是滿足產品的功能性和易用性之后，追求更高層次的目標。
2.1 提示性文字
語言是情感化設計最直接的利器，擬人化的對白相比冰冷的話語更能獲得用戶的好感，賦予產品的新的生命力。例如App那些push推送通知，因為用戶每天收到的PUSH實在是太多了，早已心如止水！這個時候，你就需要一條成本低、效率高的PUSH文案，去撩動用戶主子們的心。將原本對用戶的打擾變成一種逗趣，讓人看到會心一笑。
2.2 下拉刷新
下拉刷新是用戶在App使用中經常進行的操作，常見的下拉刷新設計是圖標加文字的形式，這種設計簡單、直觀，但毫無設計感，不能引發用戶任何的情緒。
下拉刷新是一種臨時狀態，豐富它的設計細節不會造成與產品界面的格格不入，相反，一個富有設計感的下拉刷新設計能讓產品獲得用戶的好感。例如uc頭條在下拉刷新時會蹦出一只奔跑的小鹿，暗示正在快馬加鞭的加載新內容，小鹿形象延續了品牌logo。作為資訊類產品，內容更新速度至關重要，奔跑的小鹿正好隱喻了這一點。用戶也在這種快樂的情緒中對產品產生好感，瞬間就讓下拉刷新變得生動有趣。
2.3 頭像設計
個人中心頁與用戶信息密切相關，用戶的虛擬形象在這里得以展現，常見的設計是一個用戶頭像加登陸文字的形式，這種默認的頭像設計無法得到用戶的認同感。
現在很多的產品已經放棄了死板的默認頭像，給用戶更多的選擇。賦予產品一些人格魅力，可以讓產品富有生命力，消除人機界面的冰冷交互，幫助用戶和產品建立友好的聯系。例如美團外賣和躺平，它們各自的身份都代表了產品的氣質和用戶的屬性，讓用戶產生一種身份的認同感。
2.4 缺省頁化解負面情緒
通常狀態是，當前頁面沒有內容或無網絡狀態下出現的頁面。常見的設計是圖標加提示文字的形式，這種簡陋的設計會給用戶心理造成很大的落差，陷入負面情緒中。情感化設計在此時就可發揮巨大的作用，它通過設計手段來減輕用戶在看到一個毫無內容的界面時所產生的挫敗感。 設計師可發揮的空間很大，根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。例如躺平的空白頁呈現出一種賤萌的場景，讓用戶會心一笑，使產品充滿了趣味性。
2.5 標簽欄微動效
情感化設計變得越來越豐富，圖標設計上升至可以展示動畫效果。通過動效的使用，標簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調。精心設計的動態效果，能夠緩解用戶等待時焦躁的心情，從心理上縮短用戶等待時長，讓品牌更加深入人心。
2.6 模擬用戶行為
如果一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。例如「潮汐」會根據時間場景和季節變化，播放不同的背景音樂來營造氛圍。雨聲、雷聲、風聲、潮水聲等讓人時刻感受到身臨其境的情境。
情感化設計可以拉近用戶與產品之間的距離，在更深的層面體現出對人性的關懷，為人們帶去情感上的愉悅和感動。洞悉用戶的行為，換位思考去滿足用戶的需求，情感交流就產生了。例如當你截屏了一張圖片，打開微信對話框時就會自動顯示這張圖片，提前預知了你發截圖的需求。
再例如很多觀眾都習慣了在電影結尾等彩蛋的習慣，因為很多時候坐在影院等彩蛋卻等來沒有彩蛋的結果只能白白浪費了時間。在「淘票票」上購買電影票時，你會發現影片詳情頁會有彩蛋提醒，告知你電影是否有彩蛋且彩蛋會出現在影片的什么位置。有了這個提示信息，就不必再為了不確定的彩蛋期待浪費時間啦。
2.7 有趣的細節設計
俗話說：有趣的靈魂萬里挑一，可見有趣是可以引發交流進而讓人們產生積極的情緒。 在UI設計中，有些有趣的設計是隱形的，需要用戶自己去發現，當用戶找到這顆彩蛋時，就會獲得一份喜悅和樂趣，增強用戶對產品的探知欲。例如在電腦端打開B站的鬼畜區長按這個返回圖標10秒左右，你會打開鬼畜區的新世界(⊙o⊙)（友情提示：記得戴上耳機或調小音量）其實長按「返回」10秒后網頁下方會出現一條黑框提示「嘗試輸入字母，發現鬼畜秘密」。按照提示乖乖輸入字母就會出現鬼畜明星劃過你的屏幕！
有些有趣的設計又是顯性的，目的是讓用戶與產品引發交流從而產生積極的情緒。例如成為優酷視頻會員，不僅可以尊享豐富的影視資源，還能讓自己的ID在發彈幕時使用劇集相關角色的頭像。帶角色扮演頭像的彈幕，讓發言更有劇集代入感。這個彩蛋的設置一方面強化了會員身份的尊貴感與特權性，一方面也豐富了彈幕區的多樣化，可謂一舉兩得了。
文章來源：UI中國 作者：漂浮檸檬核Fyin印跡
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在做設計的時候，經常會遇到一個問題，就是一個按鈕，在同一頁面的不同情況下，有時可用，有時不可用，我們到底是顯示不可用時的禁用狀態呢？還是直接隱藏這個按鈕呢？
大家還是喜歡提這種通用性問題，希望有一個說法，可以概括所有情況。但我多次說過，不存在這樣的好事，一定是具體問題具體分析的。
尤其是這個問題，想要聊透徹，得用不少例子來舉證說明，不過也可以通過總結的方式長話短說了。
禁用按鈕的使用，可以從兩個維度來分析，分別是：「無效的禁用狀態」和「有效的禁用狀態」。
有一種情況是，在一個頁面里，一個按鈕，可能會有幾種不同的情況存在。那人要問了，既然是一個頁面，為什么會有多種狀態同時存在的情況呢？
比如，在出行場景中，普通乘客發起訂單，司機接單后是可以發送消息的（左圖）。但是從第三方渠道來的乘客，司機是無法發送站內消息的，只能通過電話聯系乘客（右圖）。
不同渠道來的用戶，司機端的頁面會呈現不同的按鈕狀態。相同的頁面，第三方渠道來的乘客，在司機端就不需要露出消息按鈕了，這樣可以減少無效信息對司機的干擾，還可以避免司機習慣性操作帶來的無效反饋，比如點擊消息，顯示「無法發送消息」?；蛘唢@示禁用，也會影響司機的操作判斷。
從這個案例中我們可以看出，當一個按鈕在某種情況下始終無法被觸發時，就會選擇讓它直接消失，而不是呈現禁用狀態。
很多人在這類設計里會給按鈕提供一個禁用狀態，以免按鈕消失而打亂頁面布局。但是要知道，在某種情況下，按鈕無用時，無意義的展示反而會產生干擾信息，就像上面說到的那樣。
所以這里有一個結論是：禁用按鈕需要可觸發的時機，如果沒有這個時機，禁用狀態就沒有存在的必要。如果存在，那它也是一個無效的狀態。
既然是無效的，最好就不要出現了。
在上面的例子里，有一個前提不可忽略，那就是司機是否可以理解我們不顯示的原因。當然，司機會接受相關培訓，產品中也會有渠道標識，所以司機能夠明白頁面中存在的差異。
但在其他產品中，當狀態不同，按鈕變化無法自洽的時候，又怎么去處理呢？我們就需要通過合理的解釋來消除用戶潛在的困惑。
對于這點，比較典型的案例是在線上購物時，一件商品會有多個類型供消費者選擇，比如不同的尺寸、型號等，當其中一種類型被搶光時，這個商品依然是可見的，只是無法選擇，展示出了禁用狀態。
在這種場景中，我們不能一下子把其他無法購買的類型隱藏，因為用戶需要知道我們所有的商品類別，了解商品的全部屬性，盡管當下無法購買，但有上新的可能，用戶依然可以選擇等待，并將其加入收藏，還是會有機會促成這筆交易。而且當可選類型變多的時候，只是禁用沒有庫存的類型，可以使其他可選項保持固定的位置，有利于我們二次搜索和加購。這種場景的禁用也是暫時的，直到商品下架或者上新。
但就像我以前說過的，常常我們見多了的東西，就認為是正常的，但它并不一定好的。禁用也是這種情況。
雖然我們現在還是會在各個地方看到禁用操作，但是禁用的原由始終沒有給到用戶合理的解釋，以至于許多人見到類似的操作都是一頭霧水。所以在設計過程中，尤其要謹慎對待，盡可能的避免出現無法解釋的禁用操作。
好比淘寶的商品選擇頁面，如今也將原來的商品純禁用按鈕，替換成了「缺貨」。選擇缺貨的商品之后，按鈕會變成「提醒掌柜補貨」。
從原來的用戶單方面接收無法點擊的按鈕，到現在直觀顯示缺貨，點擊后同時提醒到商家，這樣的操作從功能角度來說是一個升級。
這就是我說的，有效與無效的禁用按鈕之間的區別。禁用不該是真的禁止使用，而是告知用戶，它如何可被使用。
如果一個按鈕在不同的階段有禁用和可用的狀態顯示，那么意圖是很明顯的。比如一些活動頁面，某個按鈕的禁用狀態是倒計時，就像電影的前期宣傳，為電影的上線制造話題和熱度，來鼓勵更多人的觀看一樣。
對于按鈕來說，顯示禁用則代表它在滿足一定條件后即可擁有可點擊性，讓我們明確地了解它就在這里，未來是可操作的。按鈕也有很多的設計空間來為未來的使用做好鋪墊，特別是營銷類的活動，像是「明日 8 點可搶」、「提醒商家補貨」的按鈕文案，無一不在傳達「可用性」的信息，引導用戶持續性的關注。
但是還有一類禁用狀態只是靜默地提示，多出現在表單中，當用戶沒有完成輸入的時候則無法點擊，因為看的多了，我們就以為這是正常的。但我們都知道它仍可優化，比如，在它以禁用狀態出現時，用更為友好的方式去提醒用戶應如何激活，而不是漆黑一片，且完全不知道它所存在的意圖。
我們要知道的是，禁用按鈕本身不是一個特殊的對象，只是禁用狀態在頁面中是一個特殊的存在，它是產品設計中的一種規則。為什么按鈕不可用，或者說一定場景下為什么功能不可用，當無法依靠用戶直覺理解的時候，是需要作出解釋的，也就是怎么禁的問題。
但是最開始設計時就應該去想的是，禁用狀態對用戶和產品的意義在哪里，這和我們設計方案時腦海中涌出的無數目標一樣，是一個基礎的出發點。而后，一切迎刃而解。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
生意越來越不好做，是大家目前的普遍狀況，大多數做生意的手里都有一批貨，急著處理回籠資金卻又賣不出去
生意越來越不好做，是大家目前的普遍狀況，大多數做生意的手里都有一批貨，急著處理回籠資金卻又賣不出去，所以我們的愛航信息平臺應運而生。
如果你告訴企業或者商家出售他的產品或服務需要支付一部分現金，他肯定會皺眉，或者選擇放棄。但是，如果你告訴他，他可以使用一些自己的產品或者服務來置換廣告位，而不需要花錢，他肯定會欣然接受?！皩嶋H上，仔細考慮這件事的原因可能是許多人在觀念中往往都堅持“現金為王”的心理。
所謂易貨廣告，就是在企業或者商家無法以資金支付廣告位的時候，可以采用以商品或者服務來置換廣告服務，廣告交易可以不通過資金的形式，該種廣告置換的方式可在多個企業或者商家中進行，易貨廣告，是企業或者商家在不用現金的情況下進行置換廣告服務的有效方式。
互聯網是提供貨物與廣告置換交易的絕佳平臺，可以大大提升以物易物的可行性。以物易物這種遠古時代的交易方法讓其出現在互聯網上，其共同點和成功之處就在于，商戶或企業總能尋找到自己需要的，而當交易物品的價值相差不是太遠時，商戶或企業總會選擇自己需要的。
此外，通過提供易貨廣告服務的平臺，還可幫助企業或商家有效解決銷售不暢、資金短缺、產能過剩和庫存積壓的難題?，F代易貨廣告之所以快速發展，除了電子商務的催化作用，還有一個重要推動力就是現代企業經營思想的轉變，“愛航信息不僅是一種廣告模式，更會是一種經營思想”。
轉自：站酷
作者：愛航信息
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：產品經理在進行產品功能規劃時，會遇到來自各方的需求。這些需求有大有小，有迫在眉睫的也有無關緊要的，應該如何規劃產品功能呢？本文將從四個方面展開分析，希望對你有幫助。
產品功能如何定義？
一款產品一般會具備一定的盈利點（商業變現能力）、其獨特的使用價值，偶爾還會摻雜個人創作時的產品情懷（初心），像錘子科技入場手機行業的時候，是定位于年輕小眾的用戶群體，為他們提供個性觀感的用戶體驗，雖說后來敗北了，但也曾收獲了一批用戶的喜愛，也有因為這個領域始終存在著它的壁壘，所以不是簡單的情懷就能做成一款好的產品。
當然，如果不是創始人，創作的情懷可能會體現的沒那么深刻，但是產品早期的定位在一定程度上已經確定了基礎的業務方向和發展的基調。
很多企業可以靠一款核心產品，進而延伸到其他的產品創造，基礎產品實現了賺錢能力后，從而支撐其他的產品的試水，即使失敗，也不至于“關門大吉”。
而當產品經理切入產品設計時，一般有我們常用的兩種產品類型，一種是基于基礎核心業務延伸的從0到1的項目設計，一種是處于生命周期-成長期中從1到N的產品迭代。
而這2種規劃產品的功能的方式也是不一樣的。
不管是哪類產品，立足點都是基于需求，而需求池也分2種，一種是源源不斷的需求池，一種是寥寥無幾的需求收集；前者更為切合從1到N的產品，上線后的需求或反饋都是來自真實用戶的聲音，包括主動的從現有的產品進行回訪、用戶調研以及通過用戶的反饋和建議收集有效需求。
有了需求，那是最直觀的，對應的產品功能可以根據此展開進行規劃。
而第2需求類型，常常是因為局限于沒有經驗，不熟悉不了解所以需求的聲音很少，這時候，產品經理就需要主動的去對比競品，去分析競品，解析出產品的核心需求，并且去了解這個產品的一個市場背景、規模和場景范圍了。
當然，競品分析不是讓你全部照搬抄寫別人的產品，這是沒有靈魂的，作為一個產品人，是需要有自己的想法的。B端產品的分析，更加傾向于功能模塊及邏輯設計，而非用戶體驗或界面的細致優化。
從0到1的產品功能規劃時，要明白企業是屬于某個行業的，而行業的范圍比較廣泛，比如做教育的，器材可以屬于教育裝備的一種，教務管理系統也可以屬于教育裝備的一種。另外，書籍、校服、桌椅等面對的對象是學校的，他們也可以說自己業務涵蓋了教育領域。
所以，我們設定或規劃一種產品時，往往都是有關聯性的，而不是完全切入一個新興的領域，擼起袖子就干。
當然，有能力的并且有錢的企業是可以這么做的，但是對于門檻較高或需要積淀的領域，他們也不會貿然動手，起碼會先觀望一下，然后找一找這個領域內的老玩家，通過合作的方式獲得了經驗值再自己獨立做，但是做肯定是不會做相同的事情，老的市場被吃透了，這時候只有把新的東西注入，才能獲得一些收益，比如把自己獨特的優勢、互聯網觀念或用戶個性化體感的設計再應用到傳統的制造業中，摸清了其壁壘及門道，才能走出自己的道路。
場景是功能使用的具象化，主場景作為該功能的一個核心定位。如做一款訪客產品，定位于通用性產品，你將考慮到其面對的對象，包括：
用戶群體則可以細分：
調研競品后，也分析了產品的使用對象及場景，這時候可以提煉和列舉出核心且必要的功能，分析并討論，這個時候一般是產品經理之間的相互討論及推敲，可以先個人提出自己的方案進行比對，再去重擇優，一個個將一級和二級的功能模塊確認下來（也可以是3級，視具體情況而定），將整一個產品框架定下來。
思維導圖的使用和場景使用也是相輔相成的，此類場景是基于主場景下的細化。如，對于訪客來說，他去拜訪用戶，是否需要提前預約，如果沒有提前預約，現場登記的方式和提前預約的方式有什么不一樣，這樣就可以確定下來，兩種方式：預約和現場登記。那預約又可以包括訪客H5掃碼主動登記或者企業邀約申請等等。
功能模塊確定后不要急于去畫原型圖，因為更重要的一步還是整理整個產品功能之間的關聯性，即產品數據的來龍去脈。
流程可包括業務流程、限制流程、前后端交互流程圖等。以下圖進行例舉：
為業務模塊核心的工作流程，數據流向及基礎判斷，及業務的幾種模式都可歸屬為業務流程，涉及的模塊和功能一般是自己的模塊屬內。
如在增刪改查的過程中，對數據的一些限制和參數判斷后的不同流向，往往是由多個模塊之間的規則限定的，涉及到不同模塊之間的關聯性較強的說明。
數據傳輸的起點和終點。一般軟件包括前端和后臺服務器，后臺主控數據的管理和分析，通過后臺對前端應用進行管理，常見的為數據的上傳下發和命令的順序的判斷。此流程圖著重對數據前后端的交互及整體流程的繪制。
基于以上都整理清楚之后，就可以開始進行原型設計了，原型的布局和風格可以根據現有軟件或UI專業的建議進行設定，對于B端產品來說，布局和排版對功能影響不是很大，即使從0到1，也可參照市場常見的布局或根據公司規定的統一。而風格和產品定位盡量貼合，假如你做一款小清新的APP，就不要使用暗黑風格的調調了。
這就是今天篇文章講的，之后會分享一些關于功能規劃時的一些細節點。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
