想成為更優秀的設計師， 需要了解設計趨勢和受眾目標的需求。了解UI/UX設計趨勢本質上與了解時尚或者消費行業的趨勢并無本質差別，都必須傾聽人們的需求，關注人們如何使用產品，創造出美觀、簡單、易用的設計，使產品脫穎而出。
我們收集了一份UX/UI設計趨勢的清單，幫助你了解2022年的相關行業變化。
彈窗到底該不該加？怎么加？用什么形態展示？真正的作用是什么？這些真的是產品經理說了算嗎？
好的產品通常會在恰當的時間、合適的位置給出合理的反饋，彈窗也是必不可少的反饋方式，不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗，甚至誤導用戶，從而導致用戶流失。很多時候，產品經理會從商業角度、公司業務、資源限制等方面考慮問題，但這些未必是用戶所需要的，設計師不應該完全按照產品需求做設計，否則就成了只會照搬產品原型的“美工”。需要做的是從用戶角度出發，把產品需求轉化成設計目標，只有經過反復的推敲、認真分析，最終才能打磨出服務于用戶的彈窗設計，所以彈窗該不該加、如何加就成了設計師不可推卸的責任和使命。
本篇文章將圍繞著彈窗類型、使用場景、轉化率及常見問題為側重點，將自己對彈窗的理解、設計經驗分享給大家，幫助大家對彈窗組件有更清晰的認識，為后續避坑設計出更好的彈窗做準備。
一、彈窗的基本介紹
二、彈窗體系分類
三、彈窗的使用場景
四、如何設計有效的彈窗
五、需關注的問題點
六、總結
當我們與應用產生主動或被動交互時，頁面上層會彈出容器，將可承載的文本、按鈕、選項、標簽或表單等任一內容與之組合，就可以用來傳遞信息、狀態反饋、引導用戶等操作，這就是彈窗。
彈窗的目的主要是為回應用戶或讓用戶回應，是用戶與產品間對話的一種方式，在線上各種場景中都有可能碰到，相當于產品的線上小助理。不同類型的彈窗其作用不同，但最終都是為了滿足跟用戶之間的友好交流。
彈窗組件的樣式很多，如浮層、對話框、下拉菜單、toast等，且iOS、Android官方平臺也都根據自身的規范對組件進行命名，不管如何稱呼，其常見的彈窗組件絕大多數都是由以下元素組成：
◇ 容器：作為承載彈窗的文本、圖片等內容，容器必不可少，有的彈窗直接以蒙層作為容器，如toast；
◇ 蒙層：為了和底層內容分離，避免信息混淆，通常會在界面上層（容器下層）設置一個不透明度為20%~60%
的純黑色蒙層。部分小型彈窗不設蒙層，但會為容器設置投影，例如篩選器的展開、下拉菜單等；
◇ 文本：文本是彈窗傳達信息主體的必要條件，如標題、按鈕等，即便把文本融入圖片，也能一目了然；
◇ 圖片：用于運營彈窗傳達更多信息內容的方式之一，為了對用戶產生更強的吸引力，還可設計成動態效果；
◇ 表單：為成功進入下一步做準備，如輸入密碼（iOS設備下載應用前的必要步驟）。也可以是當前頁面流程的分支，例如輸入優惠券等；
◇ 選項：條件較少的選項可使用彈窗完成，單選、復選在選項不超過6個的情況下都可使用；
◇ 圖標：在弱化次要操作的情況下，通常會將關閉彈窗按鈕設計成圖標放在右上角或彈窗下方，目的是突出主操作，鼓勵用戶從彈窗中進入下一步，另外還有單選、復選、提示等按鈕；
◇ 按鈕：是進入下一步或回到上一步（去掉彈窗）的操作入口，部分應用也可以點擊彈窗以外的空白區域讓彈窗消失，但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設置按鈕。
用戶在完成任務的過程中，界面會出現彈窗打斷用戶的操作行為，用戶必須通過主動點擊才可以進行下一步操作，這即是模態彈窗。
模態彈窗通常能較好的獲取用戶的視覺焦點，并通過承載的內容、按鈕主次層級來引導用戶完成他們的需求，這也會根據用戶、產品側重點的不同，彈出樣式也有所不同，常見的模態彈窗有對話框、動作欄、浮層...等。
1.1 對話框Dialog/Alert
對話框是很常見的彈窗，主要在打斷用戶后并提供選項操作，對用戶的干擾較大，通常會配備1~3個操作按鈕，而且會把用戶最期待的或產品最期待用戶操作的按鈕突出顯示。
對話框類型的彈窗主要分為主動、被動兩種觸發類型，主動彈窗：信息的二次確認、輸入內容、前置條件選擇、風險警示等；被動彈窗：版本更新、運營宣傳、消息通知、系統功能授權等。
1.2 動作欄Actionbar
動作欄是通過用戶主動操作后彈出的內容信息，基本都是從底部彈出，屏幕占用比例根據內容量的多少比較隨意，從小區域、半屏、再到全屏隨處可見。
動作欄相比對話框則能承載更多、更豐富的功能信息，在用戶清晰感知當前操作及反饋的情況下，比跳轉到新的頁面更有安全感。
1.3 浮層Popover/Popup
浮層是指用戶操作某個功能/內容后，會在附近出現一個帶有視覺引導性質的彈窗，最常見的浮層就是下拉菜單/彈窗等，浮動于頂層窗口并指向觸發操作的位置。
例如很多社交娛樂類型的應用右上角有一個“+”入口，里面會放置部分常用功能。部分浮層底部沒有設置不透明度的蒙層，為了與頁面信息更好的區分，會給浮層容器加上投影，避免與底部信息混淆。
相比模態彈窗，非模態彈窗屬較為輕量，觸發后以一種非阻礙的的方式呈現，不會打斷用戶的當前操作，主要是給予用戶即時反饋，讓用戶清楚應用當前的交互后狀態。非模態彈窗不強制用戶操作，根據反饋信息的重要程度及意愿，可在一定的時間內自動消失，也可等待用戶操作后消失，常見的有以下幾種：
2.1 提示框Toast/Hud
用于反饋用戶操作成功、警告、錯誤等當前狀態信息，可能出現在任何位置（底部/中間/頂部），在呈現樣式上，相同等級的模塊統一位置、風格即可，無需用戶有任何操作，出現2s左右自動消失。
Toast只有純文字提示，例如格式錯誤、刷新成功、刪除成功等；Hud會使用文字+圖標樣式，例如添加到購物車、關注成功等。
2.2 提示對話框Snackbar
Snackbar早期只是Android系統的一種彈窗控件，后在iOS、Web前端都會使用到，可以看作是toast的加強版。一般只出現在屏幕底部，存在的時間比toast長，提供0~1個操作入口，可自動消失，也可與用戶產生交互后消失或者跳轉至其他頁面。
Snackbar反饋的重要程度強于toast，例如，某個應用今天有重要提醒，同時又不想影響用戶的其他操作，會在用戶首次進入時彈出提醒，并提供關閉操作入口，等待用戶通過手動關閉（部分自動關閉），加強用戶記憶。
2.3 通知Notice
最有代表性的就是消息通知、系統推送，在設備未鎖屏的情況下，通常從頂部彈出，停留幾秒后自動消失，鎖屏后，不同設備彈出的位置也有所不同。Notice的前提是需要在應用設置中打開消息通知開關，具備應用外推送功能的，需在設備系統設置中開啟通知權限。
2.4 透明指示層HUD
HUD是一種在透明元素上通過填充、反饋用戶當前交互操作的指示層，實時生效，例如視頻類產品中的調整音量、亮度、控制進度條等。
當我們對彈窗體系有了一定了解后，就需要清楚什么場景需要設計彈窗？用什么類型的彈窗？產品最終都是服務于用戶，如果僅憑自己的主觀意見亂加一通，整的花里胡哨，彈窗就成了干擾元素，很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗，我們可以從以下幾點來說明。
風險警示：當用戶的某種操作可能存在風險，為避免操作失誤，會彈出對話框打斷用戶，并給予一定的風險提示引起用戶的注意，讓其有足夠的時間確認是否真的需要進行下一步操作，如：刪除、放棄福利機會、退出登錄等，會彈出對話框提示操作后可能引起的后果。
前置條件：部分任務在流程中設有一定的前置條件，需要滿足條件才能進入下一步操作，通常這種情況會根據內容量的多少、重要程度以對話框或動作欄的樣式彈出，例如下單時選擇優惠券、支付方式。
任務關鍵節點：用戶在滿足任務的基本條件后，需要操作一個關鍵步驟才能成功，則會彈出對話框讓用戶完成最后一步操作，例如提交訂單、表單、輸入支付密碼等。
這類彈窗主要從產品角度出發，不會過于在乎用戶是否需要、會不會反感，都會引導或強制用戶操作。
例如產品發布新版本，會強制用戶更新，否則將無法使用。還有各大電商APP，在進入首頁時會彈出一堆紅包、優惠券，刻意將取消/關閉入口弱化，給用戶返回造成一定的難度，利用突出的視覺、動態效果突出主題增加吸引力，以達到轉化用戶的目的。
二次確認也是一種打斷用戶的操作行為，但跟上面純粹的打斷用戶相比其作用更大，主要是在用戶已做好選擇的情況下再次彈出確認，以免操作結果造成用戶認知上的偏差。雖然從用戶體驗角度出發，用最少的操作、最簡單的流程滿足用戶所需是產品追求的目標之一，但通過權和利弊之后，二次確認的出現實屬迫不得已的折中方案，它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內容加深二次記憶等作用。
二次確認使用得當，可以避免用戶、產品的潛在風險，但若是從主觀角度一味的濫用，就成了對用戶的惡意干擾、影響使用體驗，導致出現因多步驟操作增加任務完成難度、降低轉化率、損害產品形象等問題，所以需要從業務（用戶側、產品側）實際角度出發，兩相其害（加-影響使用體驗；不加-造成一定損失）取其輕的考慮是否需要增加二次確認彈窗。
當用戶的某個操作可能帶來不可逆轉、錯誤嚴重程度較高時，例如：放棄僅有一次機會的較好福利、手機系統還原、應用賬號注銷等，系統都會給予二次確認，降低用戶認知偏差后，以確保用戶是經過多次思考才做出的決定，即便后續給用戶造成損失也不會過于降罪產品，產品也算是“問心無愧”了。
常見于用戶操作之后的狀態反饋，即便用戶沒有注意到，也不會造成較大的損失、或結果已經注定，相對來說成本較低，大部分出現在任務過程中的提示（可重復）和結果反饋，以確保用戶知曉當前所處狀態。
非模態彈窗toas樣式居多，例如加載中、操作成功、刷新結果、清除緩存等，可出現在其他類型的彈窗之后或同時存在。
優秀的彈窗需要從視覺、交互兩方面思考，視覺上簡潔、易懂，交互上可操作且可控。
視覺層面：首先需要做到的是易懂，這時候就非常注重文案清晰程度及按鈕層級關系了，彈出的信息需能直擊要害，用戶看了能一目了然才是關鍵；其次，彈窗屬于一種干擾信息的存在，設計必須簡潔，在彈出時需要考慮是否會過度影響（影響是一定會有的、且看如何降低）用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋（傳統來電），自己會以最快的速度掛掉電話，回到游戲中后發現自己已領“盒飯”，即便來電是多么的理所當然，但心里必定是非常不痛快的，那么，如果來電以彈窗的形式且占據屏幕很小區域（如今的來電方式）是不是就給了用戶足夠反應時間及緩沖時間呢？
交互層面：彈出的內容及操作入口需清晰可操作，雖然有時基于業務需求，產品更希望用戶能進行下一步操作而并非回到上一步，即便如此，我們也只能通過弱化次要操作以突出主要操作，用戶有來去自由的權利，如果弱化至用戶看不清、甚至找不到的程度，即便提供了次要操作入口，也會存在反面作用；另外需注意用戶對產品的可控性，不管產品如何期望用戶進入下一步轉化，但不能強制，一定要給用戶提供回去的路（強制版本更新除外），否則，任性的用戶可能會直接結束應用，甚至因產品過于霸道直接卸載。
首先，設計師應該理解產品需求，分別從用戶側（能給用戶帶來什么？滿足什么樣的需求？避免什么損失?...）、產品側（能給產品帶來什么？產品如何期望？是否合理？能得到什么樣的結果？...）分析為什么要加彈窗，然后將分析的結果轉化為設計目標，以確保彈窗根據不同的需求，在恰當的時間、適合的樣式合理的呈現給用戶。
其次，在得到設計目標后，同樣需要從設計側、技術側思考彈窗組件的一致性。從設計角度，團隊所有成員需要對該組件有清晰且統一的認知，了解組件的使用場景，以確保不會錯用、濫用，如果增加或更換新人設計師，很容易學習和上手，提升效率；站在技術角度，一致性的常用彈窗組件，便于開發做組件封裝后續復用，減少不必要的重復工作，大大提高開發效率。
在UI設計中，組件的設計思路基本相通，旨在滿足產品的實用性、視覺的統一性，主要圍繞著以下幾點進行：
◇ 基礎定義：利用清晰易懂且簡短的文案描述彈窗組件的內容及目的。
◇ 類型及構成：明確彈窗的類型，如模態/非模態，將其拆分并注明每個小元素的具體信息。
◇ 規則用法：彈窗出現的位置、包含的具體內容及信息的展示規則，比如哪些場景可復用。
◇ 交互狀態：交互流程邏輯清晰，擬請產品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。
設計彈窗時需要注意信息的主次層級關系，優先傳達用戶想要的或產品想要讓用戶知道的，以確保重要的信息在第一時間傳達給用戶。
彈窗需要根據實際的場景合理使用，不能為了簡潔而過分刪減內容、更不能畫蛇添足。例如一些偏向于操作狀態、系統報告類的提示可以使用簡單的反饋，而可能造成用戶損失的提醒就需要刻意打斷用戶，給予更明確的提示甚至二次確認。
△ 例如刪除內容就需要使用模態彈窗明確提醒用戶，如果用非模態很可能被用戶忽略從而帶來不可逆的損失。
因彈窗本身承載內容有一定的局限性，固文案一定要簡潔且精確，能用一句話說清楚的就不要過于啰嗦，不僅容器的空間有限且用戶的耐性也有限，需要在有限的空間、有效的時間內清晰的表達出核心內容。
針對運營彈窗，如果彈出的時間不對或過于頻繁，可能會造成用戶反感，所以需要把握好彈出時機及頻率。
例如用戶有一張未使用的優惠券，如果用戶每次進入應用都看到彈出提醒，確實又沒有購買商品的意愿，總是被彈窗打斷真的就很煩，那么可以將提醒彈窗設置為每日首次進入應用時提示、每累計進入應用5次后提示、即將到期提示或者用戶有購買意愿且優惠券支持改品類時提示等，總之，需要控制在大部分用戶的可接受范圍內。
本篇文章主要系統的分析了彈窗組件分類及使用場景，總結的雖然不是很全面，但能讓很多新手設計師清楚認知彈出組件的定義及用法。另外，彈窗不管如何設計，都需要有一個不斷優化的過程，要根據產品的實際情況不斷思考與打磨，通過腦暴或已知問題作出更好的改善。
能清楚認知、理解、使用彈窗組件是一個成熟UI設計師必備的條件，當然，并不能以此定義設計師是否優秀，在此基礎上，還需通過持續的學習探索，挖掘出更多技巧，不斷提高自身的專業能力。
文章來源：站酷 作者：大漠飛鷹JYSJ
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設
提及“設計的溫度”，不得不提我們老生常談的“情感化設計”，提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次：本能層、行為層、反思層，層層遞進。
1/ 本能層的設計，是視覺的直接反饋，是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣；
2/ 行為層的設計，注重的是效用，產品功能是否好用，易用，用戶使用產品過程中能否高效解決問題；
3/ 反思層的設計，是情感化設計的最高層次，指用戶使用產品后，是否建立情感連接和記憶反饋。
因而，它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。
如果一款產品在滿足基本功能，對于用戶有用，同時好看并且易用，使用完之后還能產生愉悅以及滿足感的話，那么這將是一款好的情感化設計產品，那必然是一個有“溫度”的設計。
如果一個項目本身充滿社會使命和責任感，那么“有溫度的設計”將可以助推項目的落地鏈條，讓使用平臺的用戶有“溫度”，更讓項目背后的人員感受到“溫度”。
因為，接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗，用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童，用有溫度的設計去踐行有溫度的項目。
隨著我國社會經濟的快速發展，農村青壯年勞動力轉入城市，人口老齡化趨勢加劇和家庭結構的演變，“空心村”越來越多，因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計，在農村獨居和空巢老人超過3000萬人，留守兒童也達到了近2000萬人
孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題；而留守兒童因為缺少父母監管和陪伴，極易產生很多身體及心理問題，這兩大群體是我國人群結構的重大組成部分，一個是未來的花朵和希望，一個是曾經發過光熱的遲暮老人，他們需要關愛和守護，需要有一座“有溫度”的橋梁，為留守兒童撐起藍天、健康成長；為孤寡老人送達溫暖、安享晚年。
基于社會現狀，踐行社會責任，騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會，預想搭建一個線上與線下結合的平臺，成立“為村暖心小站”，立足于脫貧地區的農村社區，主要服務農村的一老一小以及其他需要幫助的困難群體，解決日間照料、健康護理及心理關懷等諸多問題。
“暖心小站”的整個幫扶路徑是以線上+線下相結合的模式，依據產品需求，在線上可以招募志愿者、發布救助需求、觸達愛心人群；在線下建設實體服務站，開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。
那在線上的呈現形態上，主要考慮APP和小程序兩種方式，經過對比分析，APP穩定性高、體驗好，但是在鄉村的受眾群體內，互聯網基礎還是很薄弱的，要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣，占有率很高，那么依托于微信的生態、建立小程序，在推廣層面會更加便捷和高效。同時，暖心小站本身結構簡單，是一個非常輕量化的應用，這種特性也更適合以小程序為載體。
在線上的產品框架上，設立兩大專區：關愛老人專區和呵護小孩專區，各自創建知識宣導、在線課堂、愛心募捐等版塊內容，同時在線上召集志愿者，在線下成立社區服務站，開展幫扶活動，然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。
確定框架之后，梳理角色和場景。本項目主要包含線下服務站的站長，工作人員，志愿者以及社會的愛心人士。
站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采，社會的愛心人士通過線上平臺查看對應信息并參與對應活動，最終幫助農村的一老一小解決各種幫扶問題。
經過梳理分析，平臺使用人群的年齡跨度較大，30歲到60歲這個群體占到了80%左右，所以在產品的呈現形式上將兼顧青年到老年的年齡跨度，讓設計更友好，讓產品有溫度。
基于前面分析，在農村現實環境中的孤寡老人和留守兒童，他們生活是灰暗的，情感是封閉的，他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖，讓孤寡老人可以健康生活，讓留守兒童可以健康成長。
所以在設計目標的確定上：讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。
品牌色的推導，是站在線下的實際場景感受來提煉，鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的，他們需要金燦燦的陽光給生活帶來希望，而我們日常所的見的公益組織通常都是以紅色系為主，似乎已經形成了作為公益組織的標識色，因為這種大紅色傳遞愛心、帶來溫暖。
這些顏色都很有代表性，黃色代表陽光，紅色代表公益，而暖心小站，將這兩種顏色進行疊加融合，形成陽光橙，再以陽光黃納入輔助色，形成溫暖、友愛、活力、陽光的色彩體系。
在設計原則上，考慮到我們的用戶群體年齡跨度比較大，一些年長用戶互聯網基礎薄弱，為了讓產品更有親和力，讓年長用戶都能輕松上手，所以在策略上制定簡單、易用、溫暖的設計原則，保持框架簡單清晰、交互簡單易用，讓產品有溫度，讓用戶覺得有用、好用、還想用。
在“簡單”方面，保持產品的頁面框架要簡單，結構要清晰，讓用戶清楚知道自己在哪里，所以在產品形態上只做了內容頁的垂直展示，沒有過多瑣碎的信息入口，讓頁面信息更集中，瀏覽體驗更聚焦，讓年長用戶也可以簡單使用。
在“易用”方面，簡單的框架和結構是易用的基礎，在視覺元素的排列上，通過加大的圖片、加大的間距、加大的圓角，通透的頁面布局可以讓內容陳列更集中，獲取信息更高效。頁面的間距以4px為基數，分為5個跨度，在統一性的基礎上讓界面更有節奏感，層級更清晰，從而提高產品的易用性。
在“溫暖”方面，主要體現在在調性、元素、和內容上：
調性：以“溫暖橙”+“陽光黃”為品牌色系貫穿始終，形成溫暖、陽光的整體基調；
元素：在常規尺度上進行適當加大，加大的字體，加大的卡片占符，加大的點擊區域，讓產品更照顧年長用戶的操作習慣，讓產品更有溫度；
內容：在內容及主圖的運營展示上，突出“溫暖”的調性，增強用戶的共鳴，拉近用戶與產品之間的距離。
整體以大面積的“溫暖橙”為基調進行鋪設，營造溫暖陽光的質感，頂部展示產品名稱和合作logo，增加產品的權威性和信賴度。
自上而下，控制大的間距和留白，分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。
一老一小的入口及詳情：通過大頭圖的形式加強專題感知，引導用戶點擊。詳情內展示相關的關愛資訊和助力入口，讓用戶可以選擇性的進行點對點幫扶。
小站詳情：分為小站介紹、人員風采、小站活動、和運營概況四個部分，清晰展示線下暖心小站的各項事務，讓線上用戶對線下小站有更全面的了解。
個人中心：功能簡單，布局簡潔，根據不同身份類型展示不同入口。作為站長的話，擁有志愿者審核、活動管理的權限，整體表現形式以統一的卡片式陳列，讓內容更聚焦。
秉持“簡單、易用、溫暖”的設計原則，盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖，讓用戶想用，讓產品好用。
經過多次推導與線下團隊配合，小站1.0在今年5月初上線，第一批試點小站正在使用中，得到了較多正向良好的反饋，為鄉村的一老一小帶去了許多暖心的幫扶行動。
產品上線之后，通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動，比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動，在重慶周家寨服務站新建了日間照料室，提升老人的居住生活質量。
今年5月20號，在中國互聯網公益峰會上，為村暖心小站進行線上交流展示，獲得了很多與會代表的關注和認可。
截止2021年7月，平臺上線了兩個試點小站，共舉辦了數10次線上+線下結合的活動，活動參與了520人，受到36000人以上的關注。暖心小站的建立和運營，對鄉村的“一老一小”提供了更加有針對性和個性化的服務，同時加強對當地社會組織的培育和孵化，提升了服務對象的生活質量，促進和諧社區建設，助力鄉村振興。
通過這些試點小站的成果和反饋，讓設計目標也得到一定程度的印證，讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。
隨著互聯網的發展，人們對于產品不再是簡單的形式服從功能，而是逐步轉向形式服從情感。讓設計回歸情感，讓有溫度的設計去創造有溫度的產品，可以增進人與產品之間的情感連接，讓產品更有生命力。再者，用有“溫度”的設計思維，去捕捉和解決社會問題，通過具有社會責任感的設計，推動社會進步，形成堅實有用的“設計力”。
那么，如何提升自己的設計力呢？可以概述三個保持一個向善。
設計需要堅持，而堅持源于熱愛，保持熱忱之心會發現許多美好的事物，同一個需求會自發性地探索很多不同的解決方案，因此會洞察需求背后最本質的東西，切入要點尋找最優解。
還有一句話：“設計路上，唯有熱愛，方能抵御歲月漫長”。
這里的“敏感”指的是設計師要有好奇心，善于發現新事物，善于追蹤最新行業動態，是一種職業敏感，是一種自覺行為，表現為熱情、興奮、敏銳，對新事物充滿熱情，對于新發現充滿興奮，能夠特別敏銳的捕捉社會痛點解決設計難題。
生活中常說，有共情的人往往都特別感性、多愁善感，淚點低笑點也低，因為特別有代入感，而且對事物特別專注。
設計上所說的共情力則需要保持感性，同時也需要理性加持，不偏不倚。讓設計師自己能切換到項目內的各種角色，不把自己當成局外人，將自己融于產品本身，隨時切換為不同用戶的視角，更能深入地發現、分析和解決問題，讓設計站得住腳、更接地氣，讓設計有依有據。
設計的最終目的是傳遞需求、解決問題，這就意味著設計的初衷不同，那么最終的導向也會截然不同。
設計向善，保持“善”的初心，主張設計回歸社會、回歸到人心最本質的出發點，做有溫度的設計、有仁心的設計、可持續的設計。
關注社會問題，保持一顆敏感而善良的心，用“設計向善”解決社會痛點，堅實鞏固自己的設計力。
文章來源：站酷 作者：峰HENG
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設
無論是高保真還是低保真原型，設計人員在軟件中的展現所有效果，最終目的都是傳遞給開發人員進行實現。當開發人員開始使用代碼還原頁面時，設計就不可以再隨意修改。
最重要的不是在設計軟件中展現的效果，而是實際在用戶設備上實現的效果，因此在設計時，要提前考慮代碼實現的成本。
盒子模型是一種描述對象尺寸和間距的方法。有四個部分組成：“邊框Border”、“邊距Margin”、“填充Padding”、“元素本身Element”。
Border：圍繞元素外圍的邊線。
Padding：元素及其子元素之間的間距。
Margin：元素和其相鄰對象之間的間距。
點（pt）取決于屏幕物理尺寸大小，是絕對尺寸單位。對應@1x圖的1px。
像素（px）取決于實際屏幕顯示分辨率，是相對尺寸單位。在@2x圖情況下1pt=2px，在@3x圖情況下1pt=3px.
建議使用“@ 1x”進行設計，其他尺寸圖可以從@1x進行衍生。
如果是以@2x進行設計，那么若要得到@3x則要先縮小50%然后再擴大300%，增加了不必要的工作量，并且很容易出現奇數、小數等不便利數值。
創建的每個UI元素都應該和像素網格對齊，防止出現半像素的“鋸齒“效果。
文本由于其圖形的特殊性，難免會出現無法對齊像素的情況，這里可以忽略。
文本是頁面中最重要的元素之一，但因為其本身的多樣性，產生的不同的字體、行高很難和其他元素一起適用網格。因此給文本設置基線網格，將基線網格采用4pt進行等距劃分，來和其他元素進行和諧搭配。
使用8的倍數來定義區塊和內部元素的尺寸，間距等。
當區塊元素為文本（例如按鈕）時，將文本設置成其余部分一致（或者平臺預先定義好）的大小，然后使用padding來確定區塊大小。如果是全寬的元素，使用padding來確定高度，并使用一致的水平邊距來確定寬度。
硬網格：將元素放置在以8為增量定義的顯示網格中，使用額外的透明背景元素，和前景元素組成一個整體。
軟網格：保證元素之間的的間距為8的倍數，以此獲得更快的處理速度，從而得到更流暢的體驗。
當所有尺寸都遵循相同的規則時，就有了一致的UI。
減少自定義的尺寸規則，得到更快的代碼運行速度。
無論設備外形如何，主流的屏幕的屏幕尺寸長寬值至少有一個維度可以被8整除。
有一些屏幕的尺寸無法被整除（iPhone 6的375*667pt），只需要保持padding和margin一致，適當調整區塊的大小來進行適配。
確保開啟了“對其像素網格”選項。
如果根文根大小設置了16px，則可以使用0.5rem的增量在8點網格上構建布局。
如果不喜歡這樣做，或者是不喜歡rems的使用方式，可以使用CSS或預處理器間距變量來處理布局，同時保留變量以供后期維護。
大多數軟件都可以設置快速“微調”，一般默認為10px，sketch中可將其調整為8px，便于快速的工作。
學習并善用快捷鍵，提高工作效率。
圖標設計通常需要進行視覺修正，因此，在其周邊放置透明框架（例如Hard Grid的方式），來保證整體的一致性。
設計時經常會放大預覽界面來進行設計，這會導致會略整體；如果以縮小的尺寸會導致看不到細節，因此要經常變焦畫面來確保能看到整個畫面。
文章來源：站酷 作者：YMOOM
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
什么是設計系統？
設計系統 = 設計價值觀和原則+設計規范+場景定義+工具包
為什么要構建設計系統？
問題1:
隨著業務的拓展，產品和項目數量不斷增加，發展中期設計和交互上不一致性的問題浮出水面，需要采取措施確保產品或產品線之間保持統一的品牌傳達、外觀和體驗，以滿足用戶預期并向其傳達統一的品牌認知。
問題2:
無統一的設計規范和交互原則，沒有統一的UI組件庫和代碼庫，各團隊設計和前端需花費大量資源陷于低質量溝通協作和重復造輪子，拖慢產品和項目設計和開發節奏。
問題3：
產品項目數量 vs 產品設計師，人員配比嚴重不足的情況下，團隊的設計師們無法從雜/亂/急的日常需求中剝離出來，影響構建產品壁壘的質量和速度。
設計系統的價值
產品側：
設計側：
開發側：
測試側：
主流設計系統-他山之石可以攻玉！
無需猶豫，直接基于現有的優秀的開源設計系統，
設計系統的打造不必從0-1構建， 例如：Ant Design業界優秀的開源設計系統，我們完全可以站在前人的肩膀，最終生產出符合達觀品牌、業務特性的設計系統。
字節跳動 Semi Design：https://semi.design/zh-CN/
字節跳動 Arco Design ：https://arco.design/
以原子理論構建設計系統
原子理論設計介紹
首先原子設計理論并不是什么高大上的規則。最早是由國外前端開發工程師 Brad Frost提出的，他從化學元素周期表中得到啟發，發現在化學世界中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。根據他的理論，設計體系主要包含 5 個層面：原子、分子、組織、模板、頁面。
原子理論設計不是一個線性的過程， 它更像是一個心理模型，來幫助我們把用戶界面看作是一個連貫的整體，同時也是一些元素的集合。這五個階段的每一個階段都會在我們的界面設計系統層級中扮演重要角色。下面，讓我們更深入的了解每一個概念哦～
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、間距、陰影等。
簡單概述下來就五個字：色、形、質、構、質；
在界面中，分子就像是一個由UI元素組成的相對簡單的組織。如：按鈕、彈窗、搜索框等。
以按鈕為例，它的組成元素包含了文字、色塊、圖標和間距。這些抽象的原子從毫無關聯原則組合成一個分子，圖標和文字互相配合傳達意義，顏色定義了按鈕的特性，間距為按鈕定義了一個尺寸和規范。
組織(Organisms)層
分子+原子組合成更復雜和可擴展性的模塊，這個稱之為組織（區塊組件），如：列表操作區塊、列表展示區塊、表單區塊、數據統計卡片區塊。
以表單為例，一個表單我們可以通過數量的組合，以及間距的調整，元素的增減，在界面中表達不同的場景和含義。
模板(Templates)層
由原子+分子+組織構成的更復雜更具拓展性的模塊，如：分組表單頁、頁面級表單、詳情頁、列表頁、異常頁、dashborad。本質就是線框圖，模版在設計系統承載的作用就是保證設計方案在原型階段的多樣性。專注于頁面的底層的內容結構，頁面中的信息是占位作用，而不是頁面的最終內容。
頁面(Pages)層
帶業務邏輯的場景案例如：標注詳情場景、抽取詳情場景、權限管理場景。頁面將真實內容應用于模板；
頁面是模板的具體實例，填充了真實的內容（圖片、文字等）后形成頁面，也就是常說的帶交互邏輯的「視覺稿」即為高保真原型圖，將占位符替換為有代表性的真實內容，使設計系統有了生命。在模版的基礎上進行優化和完善就形成了頁面最終的設計方案。
關于設計系統的常見認知誤區
誤區1：設計體系就是設計規范或者組件庫嗎？
許多人認為設計系統就是單個代碼庫、組件庫、設計規范，但實際上他們不是一個層次的東西，準確度的來說設計體系包含設計規范，組件庫也是建立在設計體系內的，組件庫是記錄和共享設計模式的工具，就是設計體系工具化和表現層的部分；
誤區2：設計體系的存在扼制了組織內創造力，會替代掉設計師？
拋出這個問題，是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點，我個人是很難以認同這個的，對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合，需要調動整個團隊的想象力和創造力，最終達到一個統一共識才有可能被實施和執行；
好的設計系統可以通過流程和機制促進創造力的，而且好的設計資產可以幫助大家從不必要的、重復的勞動時間內節省出來，當然也不能過度依賴過往的沉淀資產，把自己定位為設計系統的創造者，而不是使用的工具人，不斷的創造和貢獻好的解決方案被整個組織采用，就不必再擔心那些即將淪為沉沒成本的過往設計與技術資產的限制。不會替代掉設計師，反而是一個企業內部尊重設計師價值的開始！是企業對設計文化的認可！
設計體系是動態的，永遠是隨著組織需求和用戶需求而變化的，一切說自己已經完成了設計體系的建設的人都是錯誤的，都是將將靜態的設計規范曲解成了設計體系。
正確管理機制：少數人負責管理，多數人參與貢獻；避免你做、我用模式，這種生產消費模式非常內卷；避免如：我一個設計師為啥要用你的規范；這規范做的太垃圾用處不大，我才不用，用你做的規范；我苦逼做業務，你晉升拿結果的負面心態；
然設計系統也不是簡單的靠少數的人1-2個月用愛發電就能完成的，設計系統是一群人，對一種做設計文化的認可，每個與之相關的人都應該是設計體系的貢獻者與布道者！
需要克服的潛在難題
產品業務復雜性提升，提升建設難度
難以控制創造與控制間的平衡；
復用與定制間的平衡，刻意追求復用率而容易丟失整體觀，為特定業務目標服務時不如靈活集中化式方法等
資源問題，容易被當成是輔助項目而缺乏預算等資源….
缺乏良性有效的組件庫更新迭代機制，虎頭蛇尾….
收益短期不明顯，搭建體系的長期收益難以被組織短期內察覺；
盡管有一系列潛在的問題，但總的來說設計體系的帶來的收益是大于這些投入的，總的來說方向是沒錯的，下一個關鍵問題是：我們如何去建立一個更優秀的設計體系。
文章來源：站酷 作者：從你的世界經過
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
1. 需求定義
需求是用戶對于自己碰到的困難從而提出的問題，是用戶對于已有產品的反饋和建議，是老板提出的商業訴求，就是運營人員減少工作麻煩的想法。需求和產品是一種問題導向與目標導向的結合，是用戶碰到了什么樣的問題，從行業屬性、用戶群體、業務場景、工作目標、商業利益等方面從而產出的輸出物，也就是所謂的產品。
需要：是解決問題或者滿足欲望，達到最終的目的。
需求：是需要付出一定成本來滿足，主要體現在解決方案中的具體產品和功能。
2. 名詞解釋
產品需求文檔（PRD）是將商業需求文檔（BRD）和市場需求文檔（MRD）用更加專業的語言進行描述。
3. 面向對象
開發、設計師、測試、老板、項目經理、產品經理、運營、市場、銷售、客戶、財務等其他角色。
4. 輸出物
文檔：Word、ppt
交互或者原型稿件：Axure、UI界面
5. 產品需求文檔結構
命名和編號
修訂記錄
背景分析（產品背景、行業背景、國家政策）
需求分析
用戶定位
產品目標
總體架構（技術架構、功能架構）
業務流程
功能設計（功能總表、用戶角色、功能詳情）
產品特色
產品模塊清單
產品適配清單（支持的瀏覽器、數據庫、中間件、操作系統）
6. 需求分析原則及方法
6.1. 產品需求的三個層次
基礎性需求、期望性需求、興奮性需求
6.2. 馬斯洛需求五個層次
生理需求、安全需求、社交需求、尊重需求、自我實現
6.3. 需求管理的四個環節
采集需求、分析需求、篩選需求、處理需求
6.4. 需求分析四象限
重要并緊急、重要不緊急、不重要但緊急、不重要不緊急
7. 需求分析及產出
WWH法：是什么？為什么？怎么做 ？
需求分析貫穿整個產品全生命周期，包括產品概念期、產品設計開發期、上線后-成長期、成熟運營期、產品衰退期。
7.1. 明確問題
7.1.1. 需求收集渠道
明確需求收集渠道，確定用戶群體和需求調研的方法，比如問卷調查、訪談、名義小組會議、頭腦風暴法、觀察法、親和圖、蒙特卡洛技術、魚骨圖、提示清單等方法。
提出需要解決的問題，明確需求帶來的價值。利用目標用戶、場景、問題三個思考維度，去定義真正意義上的產品需求，示例如下：
通過用戶針對不同的場景，明確了主要問題需求，怎么思考產品需求怎么體現到產品設計上面，從而體現產品價值，包括產品設計成型后的市場推廣方式至關重要。產品問題產生的產品價值示例如下：
7.1.2. 拆解需求
拆解需求指的是把已經明確的問題，從多個維度進行拆解，目的就是為了找到更合適的解決方案。
拆解問題的五個維度分別是積極層面、否定層面、轉移層面、拆解、腦洞。
? 積極層面：通?？梢圆鸾獬鲈趺醋鰧τ脩魜碇v可以產生更積極的情感。
? 否定層面：通常可以拆解，即使不做什么，依然可以產生好的結果。
? 轉移層面：轉移指的是不直接單獨解決當前用戶的問題，通過轉移法，用戶轉移、問題轉移等。
? 拆解：把當前問題刨根問底的拆，挖掘更多的可能性、找到問題本質。
? 腦洞：這個更多的靠靈感、經驗等進行頭腦風暴，補充其他維度考慮不到的地方。
7.1.3. 需求管理
7.1.3.1. Kano模型
Kano模型是對用戶需求分類和優先排序的工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系。
Kano模型把需求分為五類：基本型需求、期望型需求、 興奮型需求、無差異性需求、反向型需求。怎么通過模型知道用戶的需求類型，示例如下：
7.1.3.2. 時間管理四象限法
時間管理四象限法分別按照緊急程度和重要程度分為重要且緊急、緊急不重要、重要但不緊急、不緊急不重要。具體示例如下：
本方法的優勢可以評估產品開發的時間優先級，對于一些重要且緊急的功能開發能夠做到心中有數。
7.1.3.3. ICE排序法
ICE排序法是一種比較嚴謹科學的分析需求的方法，通過幾個幾個維度給需求進行相應的打分，以總分的高低去排序。
I（Impact）：影響范圍。
C（confidence）：對上線效果的自信程度評估。
E（ease）：開發難易程度（工作量+技術難易程度）評估。
7.1.4. 需求輸出
7.1.4.1. 輸出內容
思維導圖、業務流程圖、原型圖、需求說明文檔、功能說明文檔等
7.1.4.2. 輸出角色
業務人員、技術經理、后端技術人員、前端技術人員、UI、UE人員
7.1.4.3. 溝通樣例
（一）業務人員
面對業務人員，主要是講產品功能實現和重點業務流程，主要依靠思維導圖或者原型圖去講解產品可帶來的價值和解決了什么樣的問題。
（二）后端開發人員
面對后端開發人員需要給技術經理協調和溝通，確定的項有數據庫怎么寫，字段（數據結構）怎么定義，最后生成什么樣的表，當用戶進行相關業務操作時（增刪改查），怎么去設計接口，接口設計對應數據庫，先調用什么樣的接口，傳輸什么樣的參數，返回什么樣的結果。進行前端解析，后臺數據圖形化，最后呈現給業務用戶。
（三）UI、UE人員
面試UI、UE人員從行業特征、用戶群體特征、用戶習慣等方面來確定產品視覺和交互形式。
（四）前端開發人員
通過評審后的UI設計稿交付給前端人員，進行前端頁面的開發。
（五）測試人員
面對測試人員，跟進產品測試情況，提供產品需求文檔和原型圖及UI設計圖，編寫測試用例，把控測試時間，協調相關資源，保證產品順利產出。
8. 產品迭代規劃與需求跟進
8.1. 產品全生命周期規劃
根據產品規劃的全生命周期，確實不同階段需求的落地情況，根據用戶對于需求的滿足情況。
8.2. 業務流程分析
根據已開發上線的所涉及的業務流程，先分析完整性，基于本流程從專業角度提出改進方案，不斷優化該流程，確定流程的可用性。特別是一些核心業務流程，要做到簡潔高效，提高效率。
8.3. 新需求管理
通過產品的不斷使用，收集和接收不同的新需求，并定期開展新需求評審，逐步完善到產品里面，以最小調整為基線確定新需求的開發計劃，保證產品總規劃的穩步實施。
8.4. 里程碑管理
把控整體產品里程碑管理，確保產品迭代重大節點變化能夠有理有據，為產品的營銷工作，提供支持?？偨Y產品優勢和產品亮點，對產品的銷售情況負責。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
情緒板的作用？
情緒板能夠更加幫助設計師與業務方達成設計共識，并且能夠幫助設計師定義視覺風格與找到設計方向，使設計更加合理，為產品賦能。
如何運用情緒板定義視覺風格
情緒板的制作流程
情緒板的制作流程大致分為5步：
1、明確原生關鍵詞
了解項目背景或需求本身的方向，通過內部討論，用戶研究和品牌等方式定出3-5個原生關鍵詞，通常定出的詞都比較抽象。
2、挖掘衍生關鍵詞
在原生關鍵詞的基礎上讓參與者發散得到更精準的二級詞語，能夠更加準確的定位到圖形傳達方向，最好是一些情緒和視覺表達的形容詞。
可通過視覺映射、心境映射、物化映射，得到用戶理解的“抽象關鍵詞”所對應的“具象定義”。
3、搜索關鍵詞圖片
確定完關鍵詞后，可在pinterest、花瓣等設計網站上建立情緒板圖庫，按照人，事，物，形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。
4、建立情緒板
對應每個關鍵詞，從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人，事，物，形、色、字、構、質去展示，以此喚醒用戶對關鍵詞情緒體驗。
5、提取視覺風格準則
根據情緒板圖庫中的圖片提取出視覺風格準則，包含：圖形、顏色、質感、構成、字體等視覺風格準則。
舉個案例說明：
明確原生關鍵詞
討論原生關鍵詞
了解項目背景或需求本身的方向，通過內部討論（可叫上產品、運營、老板等進行討論），用戶研究和品牌等方式定出3-5個原生關鍵詞，通常定出的詞都比較抽象。
確定原生關鍵詞
從討論的關鍵詞中提取3-5個最適合的關鍵詞。
2、挖掘衍生關鍵詞
在原生關鍵詞的基礎上讓參與者通過視覺映射、心境映射、物化映射，發散得到更精準的二級詞語，能夠更加準確的定位到圖形傳達方向，最好是一些情緒和視覺表達的形容詞。
3、搜索關鍵詞圖片
確定完關鍵詞后，可在pinterest、花瓣等設計網站上建立情緒板圖庫，按照人，事，物，形、色、字、構、質等方向收集大量的對應圖片素材來匹配關鍵詞。
4、建立情緒板
對應每個關鍵詞，從情緒板圖庫中提取高質量能夠代表關鍵詞意思的人，事，物，形、色、字、構、質去展示，以此喚醒用戶對關鍵詞情緒體驗。
5、提取視覺風格準則
根據情緒板圖庫中的圖片提取出視覺風格準則，包含：圖形、顏色、質感、構成、字體等視覺風格準則。
總結
情緒板作為一種常用的設計方法論，能夠幫助設計師更加合理的總結出合適的視覺風格。設計不僅僅是只是跟隨著設計趨勢，怎樣找到適合產品的視覺風格，是每個設計師更需要去掌握的內容。
以上內容，是學習如何定義視覺風格的其中一種方法，希望對大家有所幫助，如有不同意見，歡迎指正！
圖片版權歸原作者所有
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近幾年不管是WEB端頁面還是APP，使用交互動效越來越多，加了動效的UI頁面看上去不再那么枯燥無味，能很好的抓住用戶眼球，既提升了用戶交互體驗同時也更好的展示了產品。通常我們會在哪些場景下使用動畫呢？例如菜單圖標、載入動畫，空白頁，產品介紹等都可以使用動畫，下面是一些示例：
今天給大家講解一下如何制作一個svg格式的動畫，開始之前先和大家說一下svg是什么，目前web或者app中的動畫大多使用svg格式，svg英語全稱是Scalable Vector Graphics，它是一種可縮放的矢量圖像圖形文件格式，這種格式的文件具有邊緣清晰、文件體積小、傳輸方便的特點，因此在網頁設計以及APP中比較常用?？梢允褂肐llustrator軟件或使用
專業的svg編輯器進行設計輸出，svg支持瀏覽器及任何文字處理工具打開。因此svg格式是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的圖形頁面。
如果你具有一些代碼能力，還可以直接用代碼來描繪圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器或編譯器來觀看。
綜合起來SVG優勢如下：
可被非常多的工具讀取和修改
與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 可隨意縮放
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 JavaScript 技術一起運行
SVG 是開放的標準
SVG 文件是純粹的 XML
目前制作SVG動畫的軟件主要使用AE（需要插件加持）或者在線的SVG動畫工具，如svgjson.com等，如果使用AE需要安裝bodymovie插件，我平時大部分動畫都是使用svgjson工具完成的，所以今天給大家分享的svg動畫教程主要也是使用在線工具svgjson來完成（完全免費），它支持導出svg或json格式動畫，可以滿足不同的需求，目前該軟件雖然是英文版的，但是上手還是比較容易，為了更好讓英語不是特別好的同學快速上手，我下面做了一個關鍵功能的中英對比說明。
軟件地址：https://www.svgjson.com/editor-page/
如制作一個loading動畫
制作要點：
創建2個圓形，一個底色（淺灰色）一個旋轉的圓圈（藍色）
在Store中設置Stroke Dash Array的圓圈長度，圓圈長度可以從Information中獲取
3. 設置Stroke Dash Array后，開始旋轉圓圈的長度，我設置了400，大家可以根據自己的需要進行個性化設置
4. 第四步我們來設置動畫，先選擇藍色的圓圈，然后在Transform中設置旋轉動畫，第0秒為0，第10秒為3600
度（記住別忘記按關鍵幀動畫按鈕，第一幀設置了動畫，后面更改參數會自動生成動畫關鍵幀）
5. 按空格鍵或者點擊時間條上的播放按鈕看看效果，如果沒有問題選擇導出SVG動畫，一個loading動畫就完成
了。
完成后效果
上面的動畫是通過Angle（角度）來實現的旋轉動畫，接下來我們可以通過Stroke Dash Offset來設置旋轉動畫
loading動畫進階教程
先看最終效果
由于svgjson的繪制能力相對較弱，所以我在其他軟件中先畫了如下圖這個動畫的基本元素（需要保存為svg格式），然后通過svgjson中的導入svg方式導入。
首先把“按鈕左”和“”放在一起拼湊成一個圓，然后把“按鈕中間部分”也放在圓中間，并且把它的Scale X值設為0.
把載入的圓圈放在剛剛的紅色圓中，并設置Stroke Dash Array值和Stroke Dash Offset動畫（具體參照上面的動畫教程）
把載入成功的勾號放在載入圓圈中，然后設置動畫Stroke Dash Array值和Stroke Dash Offset動畫
再設置按鈕左和按鈕右位移動畫，同時也需要“按鈕中間部分”的Scale X的動畫
通過上面的2個教程，相信大家對svgjson這個軟件有了一個基本的使用能力，svgjson中的Stroke屬性下的Stroke Dash Array和Stroke Dash Offset功能還是蠻強大的，可以通過這2個參數設置很多豐富的動畫效果。
下面的動畫主要使用x軸縮放功能實現的交互，當然也可以使用Stroke Dash Offset參數實現動畫效果。
這個動畫的核心點在設置對象的中心錨點位置，默認對象的中心點在中心，這個教程是把對象中心點移到了左側
接下來給大家演示如何制作一個變形動畫，變形動畫也是一個非常常見的交互
這個教程重點是對象的縮放，縮放前需要設置錨點位置，然后就是設置x軸和y軸的偏移值。
總體來說，svgjson網站提供的動畫能力還是很強的下面是我制作的項目樣例：
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://www.syprn.cn