業務背景

以我們 CCO 體驗設計團隊為例，主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加，設計面臨嚴峻挑戰。

1、業務多：30多個產品應用

2、角色多：覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

3、體驗復雜：設計師需兼顧用戶和客戶兩個視角。

從組織上，85% 設計師縱向支撐業務，15% 設計師橫向做標準化，反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

標準化怎么做

核心通過頁面梳理、抽象、分發、衡量，保障基礎體驗一致性。

案例實戰

以數據可視化場景為例，講述如何做標準化。

1、業務現狀

共有11個應用，涉及89個頁面。

2、問題

體驗不一致：各個工作臺頁面架構、組件、樣式野蠻生長，缺少規范導致體驗不統一。

低效：部分場景缺失，組件重復建設，大量定制；溝通協同內耗大，成本高。

3、策略

體驗統一：框架、組件、樣式。

提效：代碼化、工具、交付機制。

4、體驗統一

包括框架、組件、樣式。

框架

(1) 現有頁面收集

(2) 用戶場景分析

(3) 頁面歸類

結合用戶看數內容（例：概覽、分析、詳情）和交互形態（例：平鋪、下鉆），對頁面進行歸類。

(4) 確定典型布局

通過統計高頻復用形態，確定典型布局。

組件

(1) 頁面結構分析

組件的收斂，需要先對頁面分析，確定模塊層內容。例：模塊包含頁頭、篩選、圖表、表格。

(2) 模塊層分類

橫向收集全部業務，將模塊層分類。細分模塊擴展形態，放到對應的簍子里。

(3) 模塊專項治理

接下來，需要對每一個模塊進行專項治理。比如圖表模塊，再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體（也就是擴展形態）分類。

樣式

(1) 確定優化內容

圍繞視覺凌亂，要做的便是完善設計語言。設計師需要結合自身技術底層，補充缺失規范。例如布局、色板、字體、動效。

(2) 確定組件范圍

通過統計高頻復用組件，確定需要梳理的組件范圍。

(3) 布局

圖例位置：線上有9種，通過從業務場景按閱讀順序劃分，最終收斂成2種。

組件高度：真實線上情況，只能看2個指標，高度規范缺失。

需要根據用戶分辨率調研，提煉典型分辨率。比如用戶是win系統，包含菜單欄、任務欄等默認高度，再減去本身頁面頁頭等默認高度，得到 3 檔。確定組件建議默認行高 240px。

軸標簽旋轉角度：現狀有順/逆時針兩種，通過分析標簽類型，結合閱讀順序、軸與標簽親密度，確定默認角度為順時針。

(4) 色板

通過場景梳理，確定不同組件使用的色板類型及缺失色板。

補充語義色板：從業務里抽象2類場景，指標和柱/餅/環場景，定義顏色。例如帶正面語義，用綠色，比如升、已到崗、正常。帶負面語義，用紅色，比如降、曠工、失敗。

(5) 字體

結合自身業務場景問題，從場景、版權、風格、識別、極值共5個維度選擇字體。

舉例場景一，縱向數據場景里，將市面上數據競品用到的字體都橫向鋪開嘗試，做排除法。比如din沒版權，蘋方非等寬字體，普惠102識別性弱。

舉例場景二，在核心數據呈現中，helvetica 品牌風格弱，普惠在1億以上極值過寬。

最終我們根據自身業務場景特征，用普惠和普惠102，運用在對應場景里。并同前端提煉規則。

(6) 動效

首先，需要確定動效價值，明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

通過動效場景鏈路分析，確定優化范圍。

加載動效：圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路，輸出方案。比如這里共梳理17種組件類型，抽象成9類，包括點、線、面、餅、環、柱、文本、圖標、詞云，再進行組合產出方案。

出場動效：通過業務分析、提煉場景、優化效果。比如這里共提煉 3類場景，有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

瀏覽動效：通過提煉場景，來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下，圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

沉淀速度參數：將優化動效場景的速度參數，同前端約定規則沉淀組件庫。

5、提效

包含代碼化提效、工具提效、機制提效。

整體思路

從設計組內到技術產研的提效過程。

提效面向用戶依次是：組件設計師、業務設計師、前端、產品。

搭建目前還在進行中，這里主要從交付-工具-代碼化來分析。

交付內容

1、業務設計師：sketch/figma物料 (樣式、組件、區塊、模板、規則 )

2、業務設計師：kitchen工具（樣式、組件、區塊、模板）

3、組件工程師：組件規范/組件官網

交付機制

新需求：通過評估復用性、抽象、內審、沉淀物料。

現有業務：通過頁面梳理歸類、抽象、內審、沉淀物料。

6、衡量

從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

總結

回歸課程，在B類業務里，服務多個產品、多用戶角色、體驗復雜的場景下，在定制化+標準化團隊陣型里，標準化實質解決的問題是保障60分基礎體驗一致性。

總結：B端體驗標準化包括物料的產出、交付以及衡量標準。

產出：包括框架、組件、樣式的收斂來梳理、抽象頁面。

交付：面向2類用戶群體，業務設計，需交付物料和工具。組件工程師，代碼化需提供組件規范，組件線上化需助力組件官網的建設。

衡量：一致性評分包括樣式、組件、框架及組件交互。

原文地址：AlibabaDesign （公眾號）

作者：CCO 設計

轉載請注明：學UI網》如何做B端體驗標準化：以數據可視化場景為例

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、呈現獨具一格的 Banner 設計

插畫運用到 Banner 設計中非常普及，不僅可以帶來個性化的視覺風格，也可以避免運用圖片帶來的版權風險。因為插畫有著豐富多樣的風格，運用到設計中也會呈現風格多樣的效果，插畫也比較容易統一視覺規范，很多成熟的設計團隊都會制定插畫規范系統，滿足項目各類場景的運用。

作為視覺設計師來說掌握插畫的能力已經成為基本崗位需求，很多公司對于 UI 設計師也有同樣要求，這也是提高產品設計視覺感的一個方向。

二、突出圖標設計的風格差異

隨著用戶對于感官體驗的升級，圖標風格特征的差異化體驗至關重要，而插畫風格的融入可以提升圖標設計的特征感。

插畫風格運用到圖標設計中，需要做簡化處理，可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中，不僅可以使得圖標具備差異化的視覺效果，也能烘托出整體設計的質量。

三、強化區域背景的風格感

插畫可以作為欄目區域背景來使用，以此增加該欄目的風格感和視覺感。相較于攝影圖片來說，插畫具備風格特征，可控性較強，能夠滿足更多氛圍感的營造。

四、突出個人中心的情感化

個人中心的設計之前大部分采用單調的白色或者品牌色作為背景，近些年一些產品開始使用插畫背景來增強情感化設計。有的產品還根據天氣變化、節日主題、白天/夜間等場景設計不同的插畫風格，帶來的視覺感較強，也能吸引用戶的關注度，提高用戶對產品的感官體驗。

五、強化空狀態的情感化設計

空狀態由單純的文字提示演變到圖文結合，感官層面越來越被重視。利用圖形結合、IP 形象結合、小場景插畫結合等，還有結合動效設計的案例，帶來的設計體驗感也是非常不錯的。

六、瓷片區的視覺感強化

插畫風格被運用到視覺表現層面案例較多，特別是在瓷片區的發揮，呈現出了風格多樣的優秀案例?？梢允褂萌珗鼍安瀹嬜鳛楸尘霸O計，也可以使用小場景插畫作為局部強化，還有使用部分插畫元素作為點綴設計，視覺表現力豐富多樣。

七、活動封面設計體現統一感

將插畫形式作為活動或者服務欄目的封面設計，相較于其他形式來說風格統一性更強，也能更好的進行設計延展。就算使用不同風格的插畫來進行封面設計，只要在配色風格上面把控好，也能做到有效的視覺感統一，對于設計師來說把控性很強。

八、增強專題活動頭部視覺感

插畫形式運用到專題頁設計中案例非常多，相較于合成圖片來說，插畫的風格感和駕馭度更靈活。插畫形式帶來的情感化體驗更佳，通常被運用到專題頁頭部區域來增強視覺感，也有延伸到整個背景層設計中的案例。

根據特定活動主題創作插畫對于設計師來說更容易，找到符合主題的攝影圖片是很難的，自己拍攝成本又會比較大，插畫形式是最經濟實用的設計解決方案。

九、插畫形式提高欄目品質感

插畫形式可以作為一些代表成就感的配圖設計，以此來提高該欄目的品質感。比如在打卡點亮城市成就的設計中，不同城市的郵票采用插畫形式來表達，不僅可以展示出各城市的風格，也能做到視覺風格的統一。精美的插畫提高了品質感，吸引了用戶的參與度，帶來的感官體驗也是非常棒的。

十、體現主題化的風格感

在主界面的設計中，不僅要體現出功能的操作體驗，也要通過視覺的強化來吸引用戶的關注度。一些產品在主界面設計中以插畫作為背景來強化，結合動態的表達趣味性更佳，帶來的關注度也是不錯的。插畫形式結合到功能模塊中，帶給用戶情感共鳴和操作的體驗度。

十一、插畫形式的引導頁設計

插畫被運用到引導頁設計中是相當普及的，也是非常有利于進行設計發揮的。插畫元素表達的可控性可以滿足引導頁主題創意的需求，通常以輪廓束縛為主，滿屏插畫較少。基于焦點和輪廓造型進行插畫元素裝飾，對于插畫基礎薄弱的設計師更易上手。

十二、插畫形式的閃屏設計

閃屏和啟動頁采用插畫的形式也是可取的，啟動頁設計通常和引導頁表現類似，不過運用品牌展示的相對多一些。

閃屏分為廣告形式和主題展示形式，閃屏廣告形式比較多，插畫結合也是在廣告活動中的發揮。一些節慶主題和特殊紀念日活動，也會以精美插畫的形式表達，更容易表達主題和與用戶產生共鳴感。

小結

插畫作為設計師需要掌握的基礎技能，被逐步運用到各類設計場景中，也影響了 UI 設計的趨勢走向。隨著產品設計感官體驗的不斷升級，風格化和差異化的設計才能滿足更多用戶的感官需求，而風格多樣的插畫形式首當其沖。

希望這些插畫結合 UI 場景的案例可以作為拋磚引玉，讓大家重視插畫在 UI 設計中的表現力，不斷加強并掌握插畫設計的能力。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》插畫在 UI 場景中的趨勢化探索

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

原文地址：胡曉波工作室（公眾號）

作者：猴子

轉載請注明：學UI網》【字體設計】品牌標準字怎么設計？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

轉載請注明：學UI網》賀冰凇品牌漢字卷！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、主題化設計帶來差異化體驗

根據不同內容進行視覺呈現，可以在不改變布局結構的前提下，帶來差異化的感官體驗。主題化設計就是在背景層和元素層進行視覺發揮，不改變原生結構，被眾多產品進行設計發揮。

比如優酷 APP 在視頻播放頁面，視頻窗口下方區域會根據影視作品特征進行主題化設計。會在背景、圖標、按鈕和選擇器等元素上面進行主題化設計，情感化的設計更能帶給用戶共鳴感，提高用戶對產品的感官體驗。

二、精美配圖強化空狀態視覺感

空狀態的設計從生硬的文字提示延伸到情感化的表達，運用更加視覺感的形式帶給用戶良好的感官體驗。

最近在體驗酷狗音樂時，初次進入播放頁無歌曲時，采用黑膠 CD 作為空狀態展示。當用戶操作分享時則會以精美的配圖來強化空狀態，帶給用戶反饋的同時，也提高了播放頁的視覺感。情感化的設計更能與用戶產生共鳴，增加用戶對產品的好感度。

三、輕擬物動態反饋視覺感更佳

用戶在進行功能操作時，除了底層需求層面的反饋以外，反饋設計的視覺感也是至關重要的。好的設計可以加強用戶對產品的好感度，讓功能操作也能賞心悅目。

最近使用荔枝 APP 進行錄音時，輕擬物的錄音機設計印象深刻。在錄音過程中磁帶進行動效轉動，帶來場景化的真實感體驗，停止錄音時也會停止轉動，動態的及時反饋提高用戶使用體驗。輕擬物動態設計不僅強化了視覺感，動態及時反饋也是非常不錯的設計表達。

四、方寸之間自由切換，承載更多體驗

產品的流量區域屬于眾多功能爭相曝光的區域，在這個方寸之間的設計發揮，體現出了設計師的能力。如何將有限的資源發揮到極致，帶給用戶更多的功能體驗，需要產品設計師多在交互層面探索。

最近在使用酷狗音樂聽歌時，底部標簽欄上方的播放狀態區域給用戶提供了播放/暫停和切歌等操作，可以左右滑動來進行延伸功能切換。用戶可以選擇默認狀態進行歌曲之間的操作，也可以向右滑動以顯示歌詞為主，方便用戶在聽歌時觀看歌詞。在方寸之間通過滑動交互承載了多重功能，滿足用戶更多操作體驗，提高用戶對產品的使用體驗。

五、動態 IP 增強按鈕關注度

針對一些重點功能的按鈕設計，在按鈕造型、配色、圖標風格、微動效等方面都在不斷強化，以此來提高功能的關注度。

荔枝 APP 在錄音模塊中，為了突出錄音按鈕的存在感，結合了動態 IP 來進行強化。IP 形象從右下角出現與消失的動態效果，提高了錄音按鈕的關注度，俏皮可愛的形象也增加了設計的趣味性。

六、動態禮儀提高情感化設計

產品除了在使用體驗層面不斷優化以外，主要還是需要傳遞服務價值。服務的升級可以提高用戶的認同感，情感化的設計可以輔助服務的可視化呈現。

自如在“家?？ā蹦K中，頂部視覺區域通過動態禮儀進行升溫設計。每次進入都會有人偶形象打招呼，顯得非常懂禮貌，使得用戶感受到被尊重，提高了親和力。通過動態形象進行禮儀表達，不僅提高了欄目的關注度，也讓用戶感受到這是一款有溫度的產品。

七、差異化的用戶反饋設計

用戶反饋是打造優質產品的關鍵，如何提高用戶反饋的意愿至關重要，設計師都在不斷的思考和嘗試。

自如 APP 在采集用戶反饋時，設計了底部彈出的形式，詢問用戶是否愿意推薦自如。從絕不到強推設置了 0-10 分，當用戶選擇 9 分或以上時直接提交，低于 9 分可以描述原因。相對于比較隱藏式的用戶反饋設計，這種打分制的形式用戶操作更加便利，不會占用過多時間，用戶參與的意愿也會更高。

八、IP 情感化設計推動人性化體驗

注冊應該算是用戶比較排斥的操作，但也是不得而為之的事情。通過情感化的設計降低用戶的排斥感，在趣味體驗的環境中完成注冊，可以帶給用戶更好的使用體驗。

最右 APP 在注冊時，進入注冊界面 IP 形象以打招呼的形式出現，當用戶輸入密碼時則會雙手蒙住眼睛。IP 情感化設計帶來了更多趣味性表達，以此推動了更加人性化的設計體驗。

九、圖形化類別設計提高辨識度

分類設計采用純文字的表達顯得比較單一，也有一些產品會結合圖標或者圖形設計進行裝飾，以此來強化關注度和視覺感。

最近在使用肯德基 APP 點餐時，發現縱軸導航的分類設計結合了品類圖標，提高了瀏覽辨識度。運用圖標來強化可視化設計，提高用戶點餐時對于品類的辨識度，也能強化當前欄目和默認品類的差異。小小的改變不僅優化了視覺感，也能帶給用戶更好的感官體驗。

十、可視化展示增強用戶理解度

對于運動類產品來說，運動后的數據展示對于普通用戶而言顯得比較生硬，理解度來說不夠直觀?？梢暬脑O計提供了更好的解決方案，看圖比看文字更直觀易懂。

One More 提供了簡潔直觀的訓練數據預覽，通過可視化的形式展示訓練后增強的肌肉部位，以及通過肌肉顏色變化體現訓練的強度。通過人體結構結合訓練強度進行可視化表達，不僅可以提高用戶查看訓練數據的關注度，也能提高數據的理解度，增強用戶使用產品的體驗度。

小結

個性化設計可以滿足不同用戶的使用需求，也能體現出產品的差異化服務。提高設計的差異，帶給用戶更加人性化的體驗至關重要，無論是感官體驗層面還是功能操作層面，只有帶來不一樣的體驗才能提高用戶的黏性，增加用戶對產品的好感度。

今天給大家分享的這 10 個優秀案例，希望可以開啟大家的設計新思路，在常規解決方案的基礎上延伸出不一樣的設計創新。

原文地址：黑馬家族（公眾號）

作者：黑馬青年

轉載請注明：學UI網》個性化設計提高感官體驗

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

又到了一年一度的龍蝦季，龍蝦最好吃的時候是6月、7月、8月，這三個月是龍蝦長得最為強壯，個頭大，肉質豐滿，也是最好吃的時候，碼字的時候想想這肉感口水都快流出鍵盤了，我先去舔下吃完龍蝦的餐盤先。

沒有一只龍蝦能活著離開廚房，同時也沒能逃過設計師的鼠標和創意之手。接下來就帶大家分享關于龍蝦類型的設計，滑到最后有彩蛋哦！

、

看了這么多不僅是嘴饞，作為設計師的你們是不是手癢也想自己用龍蝦創作一把，于是我在吃完龍蝦后，拍了下面的這個場景。

突然想到國內《神話》電影中成龍有一場類似的場景，于是與《權利的游戲》海報中的風格結合下，雖然畫風有點暗黑。

但是如果從小龍蝦的角度來看，這幾個月對它們來說是個災難，這也是作為龍蝦最后的倔強。

雖然一想龍蝦挺慘，但作為國人夏季夜宵時必備的龍蝦，實在控制不住十三香、蒜泥、冰鎮、蛋黃各種口味刺激食欲的味蕾，吃貨的本性再次打敗了剛剛對龍蝦稍有些留存的感性

原文地址：修先森撩設計（公眾號）

作者：修先森

轉載請注明：學UI網》用海報留給龍蝦最后的倔強

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

2020 年 9 月上線，大概用了一年的時間，在核心功能上就已經與 Figma 對齊，而在這一年半里，他們還做到了很多不同且明顯有考量國內用戶習慣的特色功能，下面，就挑幾個我比較感興趣的點展開聊一下。

1、獨有個人云端資源庫

輕松管理素材、實現高效復用

有 Figma 在先，做資源社區已經成了在線設計工具的標配，而「即時設計」從一開始，就額外給出了一種與眾不同的資源形式——資源庫，用于提高組件庫、圖標、插畫等素材的復用性。

與其他工具「選好資源——創建副本至工作臺——打開文件復制所需元素」的流程不同，資源庫類型的資源，只需一鍵「引用」，即可將對應資源保存至進編輯頁面左下角的「資源庫」，然后做設計時可以一鍵拖拽復用。

同時，資源庫的內容會和廣場上公開的資源保持同步，發布者新增、修改、刪除內容，引用者都可以實時更新，雖然暫時只允許官方發布資源庫，但實用價值可見一斑。

另外，即時設計的資源庫不僅能保存廣場中的設計資源，還可以把編輯區域所有可見內容，包括個人收集的常用圖片素材等，一鍵上傳并保存，在任何一臺電腦上登錄賬號就能隨時使用，相當于給了你一個不限容量且所見即所得的設計云盤。

2、人性化文件管理系統

比起像 Figma 一樣平鋪展示所有文件的“粗放模式”和團隊的一級項目管理，即時設計增加了可以自由嵌套，不限制層級的文件夾管理功能，同時，還適配了拖拽和列表移動的操作。

而對于單個文件的管理，即時設計也根據國內用戶習慣進行了優化，通過「跟進文件」，可以將你自己近期需要處理的文件專門整理到「正在跟進」頁面，快速查看。

針對團隊的協作需求，即時設計還做了一個「文件狀態標簽」，可以給文件打上自定義的標簽內容，比如進行中、評審中、已完成，既能直觀了解項目情況，又能進行篩選，有效地提升了團隊用戶對接效率。

從這些點里，相信大家都能能看得出，即時設計團隊對一些細節需求的洞察能力，而且在很多方面都做了足夠多的思考。

3、多格式導入和文件轉換

導入 Figma、Sketch、XD，導出 Sketch

為了滿足設計師的遷移需求，即時設計支持了 Figma、Sketch、XD 三種主流文件格式的導入，同時，它還是最早支持 Sketch 導出的設計工具。

4、更多特色功能

除了上面提到的，還有很多能看出有特別考量的功能，可以一鍵導入個人字體包的云端字體庫，可以遠程預覽設計稿并打點評論的手機 App、微信小程序，自定義多彩主題……

雖然插件市場還沒開放，但也有了不少吸引人的第三方合作插件，比如「字由」、iconfont、IconPark 等等，都是在 Figma 里不曾有過的體驗。

最后

創新能力，我們自然是有的，而且還很足，國內不管是龐大的用戶基數，還是獨特的軟件環境，也都會讓我們的國產工具得到更加特別的發展。

本土工具的自主研發之路還很長，但「即時設計」無疑是開了一個好頭，而且步子邁得昂首挺胸，我也相信，他們有能力，之后給出更多的驚喜，支持國產，不妨一起期待一下~

即時設計：https://js.design

原文地址：功夫體驗設計（公眾號）

作者：彩云Sky

轉載請注明：學UI網》為什么說是時候選擇這個工具了

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在產品設計中動效很常見，一個好的動效方案在提升用戶視覺和心境體驗的同時，還的的確確解決了很多其他設計問題。

好的動效設計總是在比擬現實，所以當我們思考為頁面添加動效時，不應該感性的隨心所欲的發揮自己的創意激情，而應該像科學一樣，有一些基本的方法原則指導來我們，以此提升動效可用性。

今天主要分享一下在數字產品中動態設計的13個基本原則，希望對大家有所幫助。

02 原則大綱

• 緩動
• 延遲與偏移
• 疊加
• 蒙版
• 弧線
• 克隆
• 父子綁定
• 轉換
• 遮罩
• 多維度
• 數值變化
• 視差
• 縮放與推拉

▍緩動 ?

現實世界中絕大多數物體都不會突然運動，再保持勻速，最后突然停止（機械類運動除外）。而是緩慢加速或緩慢減速，這就是緩動。

緩動幾乎適用于產品中任何元素的出現或離開、以及部分圖數據加載等。

滑動內容

圖表加載

▍延遲與偏移 ?

在加載信息時，我們可以對信息歸類分組，并按順序依次延遲內容出場時間。這就是延遲與偏移，可以清晰的表達內容之間的關系。

▍疊加 ?

在二維平面，如果信息很多，為了避免信息過載，我們可以將不重要的信息，或負面操作放置在前景內容后面，這就是疊加。用來模擬現實紙張疊放，創建出二維平面中的前后空間感。

▍蒙版 ?

當我們點擊某個內容時，我們通過改變內容中某個主要元素（用于視覺引導的過渡元素）的輪廓并移動，這樣可以將用戶自然的帶入下級頁面，這就是蒙版。通過保留過渡元素的識別性，創建出無縫過渡，降低用戶跳轉頁面時可能產生的迷失感。

▍弧形 ?

現實世界大多數物體運動軌跡都是弧線，所以當位于角落的元素移動時，我們調整運動軌跡呈弧線，可以讓元素運動更加流暢自然，這就是弧型。

注意：下面案例中元素上移是從左下往右上的弧線，但回來不是原軌跡返回，而是將弧線對稱反轉（類似拋物線），從右上往左下。

▍克隆 ?

如果一個主要操作中包含其他操作，在用戶與其互動時我們可以直接將元素分離出來，這就是克隆。再通過模擬現實世界中液體分離，可以清晰的表達出內容的包含關系。這類設計常見于底部的舵式導航按鈕，點擊后出現一系列功能圖標。

▍父子綁定 ?

將兩個元素的屬性進行關聯，通過影響其中一個元素的屬性，去影響另一個元素，這就是父子級綁定。給兩個元素創建了一個隱形的傳動軸，呈現一種用戶正與內容進行實時可控的互動方式。

下圖是通過小圓圈的旋轉屬性影響中間數值。

▍轉換 ?

當某個元素存在先后兩種樣式時，我們可以給元素路徑設置動態，使其形狀從起始狀態逐漸變化到結束狀態，這就是轉換。從起點到終點的無縫過渡，清晰自然的表達出任務結束。

▍遮罩 ?

在一個二維空間中，一屏展示的內容有限，當觸發另外一個二維空間時，為了減少頁面跳轉，我們借助中間層并降低不透明度，或把背景模糊，這樣可以將它們同時放在一起展示，這就是遮罩。幫助我們理解當前空間與原本空間之間的關系。

▍多維度 ?

當看二維平面有些乏味的時，我們可以給頁面賦予三維空間的深度，像真實世界的物體有厚度一樣，用來表達該頁面存在其他可以互動的側面。這就是多維度，解決原本二維平面沒有深度的問題，也帶來更強的位置感。

線上產品中：

【嗶哩嗶哩】有做下圖中類似的3D頁面翻轉效果（我一時忘記在哪個模塊，有知道的同學可以留言告訴我，謝謝）。

【紅板報】有做翻頁效果，感興趣的同學可以去看下。

▍數值變化 ?

金融和運動類產品中數字很常見，每次加載數字時，我們可以賦予數字動態變化，這就是數值變化。作用不僅僅是傳達出數字的動態性質，更重要的是強化數字與用戶的綁定關系（類似上秤后上漲的數字告訴你又“強壯”了。嗯？繼續努力），讓用戶更加積極的維護數據變化。

▍視差 ?

界面中元素的運動速度并不是始終一致，當有多個元素時，為了建立良好的層次結構，我們可以讓重要的可交互的元素運動速度更快，非交互元素運動速度更慢。（也可以根據設計目標反過來處理）這就是視差，將用戶視線引導到可交互元素上，同時讓非交互元素保持動態一致性。

▍縮放與推拉 ?

頁面中，我們始終在處理內容的展示與空間轉換，為了能看到更多內容細節，我們讓內容支持縮放來模擬相機變焦。為了能體現內容與內容在空間上的關系，我們模擬攝像機推進和拉遠，這就是縮放與推拉，帶來了更多的深度與空間體驗以及無縫轉換。

縮放

推拉

03 總結

原則用于參照，在理解原則的基礎上去打破。這樣，動態設計將給我們帶來了更多可能性。

盡管一些效果在當下實現上任然有著較高的成本，但相信隨著技術的發展，在將來的產品設計中會看到越來越多讓我們驚艷的設計解決方案，只是在這個過程中還需要我們共同努力鴨！

參考文獻：

https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

原文地址：站酷 

作者：幺零三

轉載請注明：學UI網》UI動效設計原則

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01.玻璃、琉璃質感

即把視覺主體做成玻璃質感或者是琉璃質感，并且在排版的時候，通常會把主體壓在文字上，通過透明的材質使文字發生折射，創造出強烈的視覺反差。

02.酸性風

酸性設計是一種結合了金屬質感、鐳色漸變、達達主義、機能素材等特性的設計風格，在視覺上會有一種“酸”的感覺。

03.不銹鋼質感

有很多設計會把這種不銹鋼質感的風格統統歸結為酸性風，其實我覺得二者的差別還是挺大的，首先，這種不銹鋼質感的顏色是黑白灰的，而不是彩色漸變；其次，整個海報的主色調通常也是黑白灰，視覺效果會低調、簡約一些，并沒有“酸”的感覺。

04.熒光風

因電影《蜘蛛俠之平行宇宙》的系列海報，熒光風也火了起來，畫風類似街頭涂鴉，并采用飽和度極高的對比色搭配，會有一種刺眼、眩暈的感覺，但視覺沖擊力確實強，而且很酷、很潮。

05.彌散漸變插畫

彌散漸變是一種通過模糊效果塑造的漸變效果，看上去像似水墨暈開的感覺，而且通常會加上一點雜色質感，使用這種漸變效果來繪制一些簡單的插畫，有一種清晰、時尚的感覺，常用于食品海報中。

06.扁平幾何插畫

即通過簡單的幾何圖形來繪制純二維的插畫，效果簡單而抽象，這種風格一直都是設計師的寵兒，所以并不是最近才開始流行的，但是RGB色彩的使用可以讓畫面更加具有視覺沖擊力，再配合靈活的描邊和排版處理，這種風格也變得越來越現代、時尚。

07.新丑風

這個備受爭議的設計風格，喜歡使用很大膽、很刺眼的配色風格，比如玫紅色配綠色，插畫很隨意，類似小孩的畫作，在排版和構圖上也很不嚴謹，完全不符合傳統優秀設計的定義，故被稱為新丑風，在商業設計中要慎用。

08.三維文字

這類設計通常以文字為主，沒有圖片元素，把主要的文字通過3Ｄ貼圖或者扭曲的方式，使其呈現出三維的視覺效果，這與文字通常呈現出來的狀態完全不同，所以視覺沖擊力也很強。

09.3D插畫

3Ｄ的世界是最接近真實的世界，所以3Ｄ是大的趨勢，而如果把3Ｄ和富有想象力的插畫結合起來，那么效果會更加的驚艷和震撼。

10.3D動效

在3Ｄ的基礎上繼續深化就是3Ｄ動效，被經常用在電商設計、線上海報設計和網頁設計中。

11.復古金屬

畫面中的圖形也是簡單的幾何圖形，但質感通常是用漸變工具做出的、比較粗暴的金屬效果，再加上復古的配合和雜色質感，看上去很像上個世紀的海報。

12.復古故障

即把早期的電腦、電子設備出現故障所呈現出來的畫面和效果，融入到設計當中，通常也會結合蒙太奇手法（拼貼風）使用，常用于藝術設計中。

13.機能風

機能風也不是這兩年才出現的，但最近也很火，畫面的氛圍比較科幻，通常以機器人或者被機械加工過的人物作為視覺主體，標題字體一般會用簡潔、硬朗的無襯線體。另外，類似電路板造型的界面框也是機能風常用的設計元素。

– over –

轉載請注明：學UI網》13種當下正火的設計風格，潮爆了！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

– END

好了，以上就是一些常見的交互機制，希望你在輸出交互方案、產品為文檔時有所幫助，避免漏掉一些內容，減少和開發的相愛相殺。

原文地址：和出此嚴（公眾號）

作者：和出此嚴

轉載請注明：學UI網》了解這9種交互機制，不怕跟開發相愛相殺了~

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司