042022-11

中后臺產品的產研協同提效調研

一、目前有哪些提升設計與前端生產力的方案

1、D2C（Design To Code）

D2C（Design to code）這個模式我們非常熟悉，其本質是將設計師的設計資產轉化為代碼，讓前端工程師可以快速的復用，在這個成熟的領域主要分成兩大類：「設計資產類」和「設計對接類」

a. 設計資產類

設計資產類是完整系統的規范和代碼進行沉淀形成設計類的資產，這一類的產品在市面上目前是屬于主流，產品有網易的Fish Design（網易自研）、Ant Design、Arco Design、Element 等，這些產品都是將組件化的設計資產轉化為代碼資產，方便前端工程師在開發 B 端產品頁面時可以快速引用，提升開發的效率。

b. 設計對接類

設計對接類又分成「設計稿查看類」和「設計稿代碼生成類」兩種類型：

設計稿查看類：主要是 D-box（網易自研）、figma、藍湖等可以讓前端工程師在線查看設計師的設計稿并提供一定的轉化代碼方案，主要是為了保障產品的還原度。

設計稿代碼生成類：最近兩年為了徹底的解決還原度的問題，讓前端工程師專注的解決代碼問題「設計稿代碼生成類」也開始在市場嶄露頭角。

比如：Imgcook、Codefun，直接復制設計稿地址進入軟件內部轉為代碼文件，直接導出完整的靜態頁面代碼，減少開發過程中的樣式調整問題。

直接導出整頁代碼模式的小缺陷是無法滿足開發中：代碼精簡（ai 智能生成的代碼對目前還達不到開發人員喜歡的程度，較為冗余）、控件交互、綁定數據等幾方面的需求，但是比如在一次性的靜態頁面的實現中還是能夠達到提效的目的。

結論：D2C模式的產品相對獨立，從定義還原度「設計資產類」、保障還原度「設計稿查看類」、解決還原度「設計稿代碼生成類」層層遞進，可以有效提升設計師和前端工程師的生產效率和協同效率。

但在目前競爭激烈的大環境中，優秀團隊的效率提升已經達到瓶頸，而提效的本質是為了比競爭對手更快更好，當所有人都有了相同的東西時，提效的目標可能就需要從別的地方打開缺口。

2、C2D（Code To Design）

C2D（Code To Design)「前端代碼轉設計稿」這個模式對于設計師相對模糊，不過國外的企業已經做出了探索。

比如：2017 年Airbnb 發布的前端開源模塊 React Sketch.app，其核心理念是用代碼做設計。第一次看到的時候感覺真的很酷，通過 React Sketch.app 直接在 Sketch 設計軟件中編譯出設計界面，代碼也可以直接在項目中使用。

還有另外一個產品叫 html-sketchapp，通過在輸入框中輸入網頁地址就可以直接在 Sketch 中生成可編輯的設計界面「網頁轉設計文件」，通過任何前端代碼都可以轉為設計資產的文件，甚至直白一些說就是參考成熟產品做設計，適度借鑒吧。

結論：目前的 C2D 的市場方案對于設計師而言不夠友好，無法讓設計師可以直接使用，都需要工程師來完成轉換，同樣也會遏制設計創新，陷入同質化的泥潭中。

但這個模式，卻非常適合“有意”借鑒參考成熟或者競爭對手的項目團隊，可以快速達到同類型產品的基準水平。

二、針對目前現狀，什么樣的方式可以實現提效？

從我們當前的工作流程來看

在這個流程中設計最在乎的就是設計階段的表現需求和前端的設計還原，為了保障精準的表現需求，在設計階段需要大量的溝通和風格嘗試。

在前端還原階段需要和前端不斷的扣細節，輸出幾百條信息的走查文檔，那應該如何解決這些問題？

答案就是「 C2D2C」的模式

1、C2D2C（Code To Design To Code）

C2D2C（Design to code to design）的模式，將流程中的設計表現和前端還原階段的通過設計標準化和研發工業化的方式進行流程優化，減少設計和前端開發的參與，實現中后臺研發流程的整體提效。

在十幾年的發展里互聯網行業積累了大量的設計資產。

這些設計資產的沉淀是設計標準化的基礎，將設計資產轉為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調整實現頁面的設計就是 C2D 的過程。

通過平臺設定交互行為和綁定后臺數據，完成整個系統，最后在進行站點發布，就實現了 C2D2C 的完整流程。

C2D2C 的模式是設計資產與線上智能化布局的代碼方案（低代碼平臺）以及后臺數據綁定的結合，將以前的人工分工通過智能化方案綜合一體去解決。

但這個過程不是僵化死板的模式，在C2D環節實現“設計->前端”的高還原度下快速落地，在D2C環節下實現“低代碼平臺->自有產品”的靈活調整下快速復制。

結論：隨著社會的發展，標準化和智能化的產品線都將會被人工智能取代，互聯網行業也正在向這個方向發展，所以設計的標準化和開發的工業化就像手工業向工業化的轉型，這是一個大的趨勢，未來可能一天的時間就可以生產數套后臺產品，這樣的生產效率才能跟上中國的數字化轉型浪潮。

2.、C2D2C 的市場化

低代碼平臺 是 C2D2C 模式得以實現的核心平臺，從2018 年開始海外投資開始關注低代碼平臺，OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資，成為了低代碼賽道的獨角獸，另一家低代碼創業公司 Mendix 被西門子以 7 億美元的價格收購，資本市場的關注讓低代碼賽道開始火熱起。

而國內的低代碼平臺是從 2020 年疫情肆掠開始，疫情助推了在線辦公的發展，國家也在大力支持數字化經濟，更多的企業開始數字化轉型，這也讓低代碼在國內有了飛速發展的土壤。

目前海外比較成熟的平臺主要是 OutSystem和 Mendix，而國內也有很多已經商業化的低代碼產品，像網易輕舟等，已經開始投入商業化的使用，可以從網易輕舟的低代碼產品架構，清晰完整的看到C2D2C模式的所需要具備的能力。

網易輕舟從業務角度出發，具備持續迭代能力、組件具備可擴展性，并且可以為企業進行私有化部署，部署完成后可以和存量系統進行集成，交付后具備非常好的可運維性，是一個成熟的商業化平臺。

網易輕舟目前已經服務了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產業平臺30家，從服務的客戶我們也可以看的出來，低代碼產品在大型企業中落地更有優勢。

結論：C2D2C 的模式已經得到市場的驗證，研發工業化可以更加高效的提升中后臺產品的研發效率，設計標準化也可以減少中后臺設計師大量的重復性勞動，對于中后臺的業務產品，可以大膽地選擇一個富有實力低代碼產品。

最后

低代碼平臺的使用需要同時具備一定的代碼能力和設計能力，這不管是對開發還是設計師都具備一定的門檻。目前的低代碼平臺使用角色應該是前端工程師，復雜的后臺交互平臺還是需要設計師的深度介入。

低代碼平臺的誕生減少了中后臺設計師大量的重復性工作，可以讓中后臺設計師將更多的精力投入到用戶研究和提升用戶體驗上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗和以前的開發相比較，在中后臺的開發上更加的高效也更加的智能。

在最初調研到低代碼平臺的時候，行業的快速發展和成熟，讓我下意識的反應是中后臺的設計師可能要失業了，但是在調研了平臺的使用和深入的思考后，我覺得這是中后臺設計師的機會。C2D2C 模式的最優解應該是 0 代碼方案，而使用 0 代碼平臺最好的角色就是設計師。設計師專業的審美和對于用戶體驗理解的深度都是其他職業所不具備的，未來的中后臺設計師更應該將自己的精力投入到平臺流程的優化和用戶體驗的研究中去，這也在未來 0 代碼平臺到來后，我們才能更快更好的投入到新的生產中。

作者：程鑫

轉載請注明：學UI網》中后臺產品的產研協同提效調研

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

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

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

評論(0) 瀏覽(1498)

042022-11

5000字，作品集中的推理部分該怎么寫！

seo達人

現在很多公司面試UI都會面試交互能力，問你設計方案的推導、怎么量化、怎么分析、怎么做深度的設計思考等等，所以呢大部分設計師在本身視覺能力沒那么強的情況下，無奈在作品包裝中加入了推導分析的文字部分，結果，問題又來了，這些分析過程和推導其實是經不起推敲的，因為往往在實際工作中，大部分設計師沒有真的運用過這些方法、數據，靠的是參考市面上的作品集從而包裝出來，也就經不起面試官的深問。最后作品集也成為了四不像的結果。

那么如果我們的設計基本功沒那么強，但又想展示自己的思維能力該怎么做呢？我在這里并不是教大家怎么去編和套設計流程的框架和理論，而是希望大家能明白，如果要放你的思維過程，應該怎么正確的去放，如果真的沒做過，我建議不要去硬套，很容易漏洞百出。

設計師的定位和價值

一個項目的推導過程首先要明確，你在項目中扮演的是什么角色，你在整個項目中的價值是什么，是獨立負責？還是某一個環節的執行者？我相信很多同學都想把自己包裝成一個獨立負責人，恨不得整個產品從立項到調研到分析到執行都一個人包攬，但你越這樣去包裝，作品集內容就越零散。

作品集主要展示的是你個人的能力，而不是讓你去描述和介紹你的產品。很多同學都變成了后者，比如先描述項目背景、產品的用戶群體是什么、每個功能模塊分別是什么功能…..這樣的方式去包裝作品真的味同嚼蠟，沒體現能力不說，還很枯燥。

一、講故事

其實我們可以用講故事的框架，來整理項目流程以及展示你在項目中的價值。在上學的時候老師會跟我們說，要講清楚一件事，需要分別理清楚三個階段，分別是：起因、經過、結果。所以我們現在要講一件什么事呢？我們要講的是，你是如何通過設計手段幫助產品/用戶解決問題的。

那么我們就可以用起因、經過、結果三個階段來闡述我們是怎么解決問題的，把這個邏輯給梳理出來。

1、起因

起因包含了

1.有哪些問題/機會

2.你是怎么發現問題的（為什么要做這個項目）

3.導致問題出現的原因是什么

比如我舉個例子，我發現我家廁所外墻開始掉粉脫落，甚至時不時的浴室柜下方會流出一些水，所以我懷疑是不是哪里漏水了，在這里我用的是觀察法，用觀察法很直觀的看到了問題。接下來我要去找到問題的原因，到底是什么原因導致了外墻掉粉脫落以及滲水的問題。于是我先自己做了一個假設，是不是埋在地下的水管破了？因為之前有用過腐蝕性很強的通下水道的藥劑，但是這個原因被我排除了，因為如果水管漏水那么就會一直漏，而不是間歇性的出水。那還有可能是什么原因呢？浴室柜中下水管堵塞導致水流到了沒做美縫的縫隙中嗎？還是樓上漏水滲下來了？

最后經過多個原因的排除，問題找到了，是由于樓上確實漏水以及淋浴間下水不暢長期積水導致水從下水管口子邊上的縫隙流了過去，兩個原因。

所以我們再回過頭來看，作品包裝中起因應該說明哪些事項：

1.1和2可以合并在一起寫，比如通過xx方法我們找到了目前產品中存在的問題，也可以寫我們找到了xxx問題，是由于我們用了xxx方法。

2、你是怎么發現你產品中存在的問題的？

是自我經驗的觀察判斷？還是通過數據分析找到的某個現象（比如一個板塊的點擊率在逐月下降）還是通過對用戶訪談或者體驗地圖找到了某些體驗問題？你得采用一些方法，越客觀越好，比如很多同學在找問題的時候總會用一些比較寬泛的修辭來描述：首頁結構不合理、層次不清晰、體驗較差，所以看到這樣的描述，我就想問，那么具體不合理、不清晰、體驗較差的點在哪里呢？為什么你覺得不合理、不清晰、體驗較差？是你的主觀感受？還是數據表現？還是客戶的體驗？你得證明出來。所以問題的來源是很多的，有的是你專業經驗的判斷，有的是用戶的反饋，有的是數據的表現，都不一樣。

3、導致問題出現的原因是什么？比如很多同學做改版，改版原因他們就寫：結構不合理、層次不清晰、體驗較差…..這個是不對的，改版原因應該是，由什么具體事件，導致的結構不合理、層次不清晰、體驗較差，比如通過對用戶在支付任務流程中的數據表現，我發現經常有用戶在支付流程中跳失，導致轉化率下降，因此我們調研訪談了10個在支付流程中跳失的用戶，其中8個用戶在準備支付的時候找不到編輯收貨地址的功能，于是他們放棄了這次支付，這個問題凸顯的就是核心功能沒有滿足用戶預期，有效性差。至于樣本量的問題我就不展開了。

很多同學在第一階段會放很多產品的一些市場研究、定位，這些其實一點用也沒有，雷聲大雨點小，一開始切入點很大，結果這些點對描述你的設計能力沒有任何幫助，并且在后面的設計方案和策略中也完全不能體現出來有什么關聯。不如聚焦一點，針對問題直接進行展開。

小結一下，起因包含了3個問題，這三個問題可以通過幾種方法來解答：

1.你是怎么發現問題的（經驗判斷法、渠道反饋法、用戶調研法、數據分析法、可用性測試…..）

2.有哪些問題（卡片分類法、kano模型、價值分析法……）

3.導致問題出現的原因是什么（經驗判斷法、用戶訪談、觀察推測……）

二、經過

這個階段就是用來體現你是怎么解決問題的，這里我們就要來講到解決問題的策略和邏輯了。諸葛亮草船借箭大家都聽說過吧，這個事件的問題在于缺箭，為什么會缺箭呢？原因是沒有足夠的時間和材料來制作那么多箭矢，要解決這個問題怎么辦呢？招募更多的士兵？收集更多的材料？采用緩和之計爭取時間？顯然這些策略是無效的，那怎么辦？內部不行，只能靠外部來解決，于是就有了草船借箭。

再舉個例子，這兩天有點頭痛（問題），醫生說頭痛可能有多種因素造成的，例如睡眠不好、頸椎有問題、受涼、壓力大等等（原因），所以為了解決這個問題，我就可以有幾個不同的策略，如果是睡眠導致的，那么我就通過改善睡眠質量來解決，如果是頸椎導致的，那么我可以去找中醫做一下推拿，這些都是解決問題的策略。

所以在經過階段你必須講明白你是怎么選擇一種合適的策略的。舉個例子，比如有一個新的電商產品上線了，并合作了一些大品牌，但是我們發現這個品牌的銷量還不如一些不知名的品牌來的高（問題），于是我們通過第一步的研究起因，發現用戶之所以不買單，是因為他們覺得這些大品牌在你們平臺賣的是不是假貨（原因）。那么為了解決這個問題，我們就要研究一下具體的策略，怎么樣能夠讓用戶對該品牌產生信賴，而我們又如何才能讓用戶知道這個品牌是正品呢？

策略1:透出品牌資質和曝光度：告知用戶我們有品牌授權的資質

策略2:給予用戶更多保障：給用戶產品質量的售后保障和檢測權利

策略3:讓用戶提前進行體驗：可以給部分用戶試用

經過分析以及成本權衡，策略2和3實施起來較為困難，成本高，于是策略1是一個比較好的選擇。那么具體的方案就要到第三階段來呈現了。

再舉個例子，抖音大家都有用過吧，在之前的老本版中，有用戶想查看當前視頻的上下集，非常不方便（問題），因為需要點擊或者側滑進入作者首頁，然后經過滑動才能找到當前視頻的位置（原因）。所以為了解決這個問題，如果你是抖音的設計師，你會有哪些策略呢？

策略1.提高用戶查看視頻的效率：直接給用戶定位到當前視頻

策略2.提高作者制作系列視頻的便捷性：可以讓用戶不用進入主頁也能看到上下集

所以，小結一下，“經過”這個階段中找策略我們依然也可以用到一些方法：上癮模型、aarrr模型…..但是這些模型我是不建議大家在作品集里寫的，太形式化了，在大廠的設計流程中，設計策略基本上是通過產品和設計的經驗判斷給出的，不會真的說是靠這個模型工具而產生輸出的策略，比如像我們說“給用戶一種溫暖的感覺”，這是一個設計目標也可以是一個策略，但它很難說是由哪個方法論或者工具提煉出來的。

三、結果

結果，也就是我們通過設計目標和策略，選擇具體的設計方案。在作品集中，設計方案給面試官展示，這其實沒那么重要。面試官想看的是什么呢？是你雖然最后給出了a方案，但是在設計過程中，有沒有b方案和c方案，最后讓你選擇a方案的理由是什么，你是怎么思考的，也就是方案的由來。

這個才是我們展示能力的最好表現。以上面的抖音為例，通過策略1，用戶點擊主頁可以直接定位到當前視頻的區域以便用戶查看上下集，如果直接根據這個策略設計方案是很簡單和直觀的，只要定好位，并給用戶一個當前正在播放哪個視頻的狀態，做個標簽即可。

但是最終方案并不是這樣的，而是當用戶側滑或者點擊頭像后先定位到的是用戶主頁的頭部區域，而在右下方給了一個“剛剛看過”的按鈕，點擊按鈕才會定位到剛剛正在看的視頻。

這兩個方案顯然是有區別的，為什么不直接定位，而要多給出一個“按鈕”呢？原因就在于抖音更希望觀看者和作者能夠更多的產生互動和鏈接，提高作者的關注率，讓觀看者先看到作者的主頁，再去查看剛才的視頻，因為只有你關注了作者，作者才有更多動力去制作視頻，同時關注作者也會為你個人的偏好附上一個大的權重，以便于做更精準的推薦。

這是對于兩種方案的解讀，所以方案a和方案b，為什么選b不選a，這就是理由。當你的方案呈現在作品集中，面試官就會這么問。

通常在做方案的時候，大家也總會用到競品分析，競品分析是一把雙刃劍，它可以讓你的方案至少不會出大錯，也可以讓你的方案沒有特點，所以這也很考驗設計師是怎么將產品業務的定位、用戶屬性、業務目標的差異化結合到方案中去的。競品分析大家也很喜歡單獨拿出一個板塊放在作品集里，咱先不論有沒有真實操作過，放在作品集里的內容，一定要有目的性，大家仔細品一下這句話。你想要通過放這塊內容告訴面試官什么？是你拿了一堆競品做了比較和描述，還是說你能夠結合自己業務和用戶的特性，找到和其他競品設計差異化的點，最后應用或指導到你的設計方案中去？

結果階段除了方案的探索、權衡外，還需要進行驗證和復盤。雖然咱們花了很大的力氣，從發現問題到找到原因，再到定義目標和策略，最后選擇方案，但并不意味著最后的結果是好的，因為我們不知道我們的方案到底有沒有解決最一開始的問題，你原來頭痛，最后選擇了吃藥，結果吃了一個月，還是沒好，那就說明：1.問題原因不對 2.策略有問題 3.藥吃錯了。所以如果你要以結果為導向，那么最后的驗證和復盤不可缺少。那有同學說，我們公司沒有數據，沒有用戶，那我要怎么驗證呢？那我勸你好好跟產品或者老板去談一談，雖然你想操這個心，但是老板都不在意那也沒有辦法，但是你在面試的時候需要表達出這樣的思維。

總結一下

再說一下，分析推理部分，不是UI/UX作品集必備，你想做純視覺包裝作品集也可以，但我們要清楚，你應聘的崗位要求是什么，而你的作品集和崗位要求是否能對應起來?，F在的一些公司要求都很高，UI和UX都成為了標配要求，所以我們盡可能要把這兩塊都在作品集里展示出來。有人說，我實在沒做過這些東西，讓我編也編不出來怎么辦？那就從今天起試著開始主動找找產品存在什么問題，然后去解決它，試著走一遍：起因、經過、結果三個階段，我相信你一定會有收獲。

作者：應駿

轉載請注明：學UI網》5000字，作品集中的推理部分該怎么寫！

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

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

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

評論(0) 瀏覽(1392)

042022-11

卡片式設計 | 掌握這些技法，快速提升界面效果！

seo達人

一、卡片式設計的定義

1、什么是卡片？

早在互聯網時代之前，卡片就出現在了我們生活中的方方面面，如名片、不干膠標簽、便利貼、會員卡…等，不管是何種類型的卡片，它都將代表著我們現實生活中的某個特定信息。

卡片指的是含有圖片或文本信息的容器，它將我們需要的信息歸納在一起、并形成獨立的個體，以至于后續被引用到線上界面中，同樣具有非常不錯的信息歸納效果。

2、互聯網中的卡片式設計

卡片本身就是一個完整的信息區塊、并同時承載豐富的互動方式。在UI設計中，個性化和美感兼備的卡片式設計具有很強的易用性，它是一個UI設計組件，將標題、文本內容、圖形/圖片進行整合并模塊化，讓信息的表達更加直觀、操作也更便捷。

卡片式設計之所以能成為當今比較流行的趨勢，是因為它能讓界面信息更有層次感，從設計、交互、視覺以及用戶體驗等各方面來看，都有不錯的優點。站在用戶角度，即便不太理解卡片的概念（也不需要理解），但能快速知道如何使用它，相對來說，學習成本也是極低的。

二、卡片式設計價值

1、結構清晰

卡片在占用屏幕空間較少的情況下能夠將不同大小、不同類型的信息內容按邏輯進行分組呈現，使界面結構更加清晰。相比純粹的留白或分割線，卡片不僅對信息作出了分割，其本身還是一個獨立的容器，讓歸納組合后的信息能快速突出重點，將復雜內容簡單化處理。

卡片式布局整齊簡練，清晰的信息結構有助于用戶瀏覽，方便快速找到自己感興趣的內容，避免用戶產生一種費時或感覺內容超長的恐懼感，還能節省更多的時間成本。最常見的就是信息列表、圖文混排等，不僅做到了視覺上的美觀，也達到了平衡文字及圖片強弱的效果。

2、場景拓展

卡片式設計有利于場景拓展，他能在信息不斷增/減的情況下、頁面依然能組成一個連貫的整體，在視覺上毫無違和感。例如支付寶在頭部插入的廣告引流入口、淘寶在節假日增加二層樓…等。

3、空間擴展

卡片式設計一度打破了移動端多為縱向操作、原有傳統的列表式布局，在空間有限的移動端設備中，還能很好的利用橫向空間。將橫向滑動區域的最后一個卡片漏出一小部分（若隱若現才是誘惑），不僅能給予用戶更多選擇與期待，其空間利用率也得到了很好的擴展，在展示更多內容的情況下依然能保持模塊的整體性。

4、突出重點

卡片式設計能很好的通過邊界襯托出內容的整體性，特別是在電商類產品中的首頁頭部、瓷片區、營銷引流區將其應用到了極致，即便在卡片數量較多的情況下，用戶依然能清晰的感知到內容的歸屬層級以及重要信息。

5、兼容多端

卡片作為一個容器，它可以自由無限的等比縮放，非常適合響應式設計。在手機、iPad、電腦等屏幕尺寸復雜的情況下，通過放大縮小或增減縱向排列數量的方式配合響應式的斷點設計，讓同一界面在不同設備之間輕易的創造出一致性的視覺體驗。

6、易于操作

卡片給人最直觀的感覺就是可以操作，它不用箭頭、按鈕或超鏈接等引導性的視覺元素提醒，節省了一定的頁面空間，還有著更大的操作熱區，無需做到精準點擊?？ㄆ皆O計很容易融入各種交出手勢，如單擊、雙擊、長按、拖動、滑動等，為用戶提供更多便捷的操作。

7、跳轉流暢

卡片可通過縮放的形式充分利用動畫進行頁面跳轉，例如App Store“Today”頻道，點擊卡片后直接等比放大至全屏，給用戶一種還停留在當前頁面的錯覺，避免了傳統的跳轉頁面而造成的信息割裂感，流暢絲滑的過渡，給用戶更自然的交互體驗。

三、常見的卡片式設計樣式

1、四周留白

這種類型的卡片在UI設計中最為常見，柔和的圓角、邊緣陰影以及四周很自然的留白，讓內容模塊的存在感更加強烈，整個頁面信息的層級也更加清晰。

2、懸浮內容之上

懸浮型卡片并非模態彈窗，與其相比，懸浮卡片不需要主動操作觸發，可作為臨時控件或長期固定顯示，并且比模態彈窗能承載更多信息內容，可通過伸縮來定義卡片中的信息數量，或多、或少、或展示、或隱藏，在頁面中非常靈活。

例如高德地圖首頁，搜索框及右側的功能入口長期懸浮在地圖之上，而下方卡片中的內容會隨著高度的伸縮自動調節可展示的數量，非常實用。

3、通欄類型

通欄類型的卡片具有更強的視覺阻斷，對區分不同的功能模塊有不錯的效果，不過這種類型只通過頁面背景色保留上下邊間、且不會過多，不然頁面會顯得零散、雜亂。

四、卡片適用場景介紹

1、瀑布流

瀑布流主要正針對圖片較多、或以圖片為主的內容設計，它最大的優點是無需過于在意圖片的高度，最大限度的還原原始圖片效果。

卡片式設計的瀑布流對信息的組合、包容性更強，不僅能在單屏區域內顯示更多內容，同時又將每組信息組合作出了明確的劃分，在不破壞頁面整體性的基礎上也做到了相對獨立，如花瓣、Pinterest就是最好的例子。

2、信息流

信息流的展現方式主要以文字、圖片或視頻內容為主，是一種較長內容的媒介，不管哪種展現方式，其都需要用戶耗費較長時間的滑動、瀏覽來篩查對自己有用的信息。

卡片式設計將信息進行分塊處理，通過阻隔的方式快速告知用戶每個卡片的核心內容，便于用戶在長時間的滑動過程中也能快速識別重要信息。

3、左/右滑動

卡片式左右滑動組合在音樂、視頻類產品中用最為廣泛，因內容本身就圖片居多，也更適合卡片式設計，相比平鋪具有更強的層次感，對用戶的吸引力較強，尤其最右側漏出的一小部分內容營造出神秘的感覺，用戶會不由自主的想去滑動以求獲取更多信息。

4、優惠卡/券

卡/券設計實際是把生活中的實物映射到了UI設計中，通過模擬實物造型設計成卡片樣式，有效降低用戶的理解成本，并對其有了更直觀的感知，真實感尤為強烈。

5、突發事件/臨時提醒

對于用戶主動觸發或系統臨時發起的非固定性內容，利用卡片式設計會讓信息布局更靈活、視覺更突出，在不影響用戶使用的前提下，可出現在任何位置。

6、部分頁面頭圖

卡片式設計可以將個人中心、個人主頁、會員等頁面中的關鍵信息進行概括，并在頭部位置進行重點突出，不僅讓原本單個的內容形成整體，還能營造出沉浸式的氛圍。

五、卡片式設計原則及小技巧

1、一致性原則

為了保持界面設計的一致性，需要將卡片樣式納入設計規范，例如卡片是否通欄、是否需要設定圓角半徑、不同場景中卡片大小的劃分界限以及圓角數值的確定等，大部分情況下都需要遵循設計規范。

2、功能定位決定卡片形式

在同一產品中，雖然要遵循設計規范以確保一致性的視覺效果，但并非所有頁面都適合卡片式設計。

那么，到底是否需要采用卡片形式、使用哪種卡片類型？這還得根據頁面內容屬性及目標定位來決定。例如社交產品中的臨時會話列表、動態圈子使用卡片形式，很浪費縱向空間、甚至會顯得很“雞肋”，用分隔線或間距留白來區分信息組顯然更合適；但對于電商類型的產品，利用卡片將不同的商品分隔后又進行歸納，會更容易識別，信息的可讀性也會更強。

3、避免過多卡片嵌套

卡片式設計本身就包含了容器與背景的層級表現，為了保持內容的正常展示與用戶瀏覽體驗，避免在卡片中嵌套多層卡片，以免信息層級雜/亂而增加用戶的視覺負擔。

如果再同一卡片中需要再次區分多個信息組，可利用間距留白、分割線或淺色背景等元素屬性來區分，依然能達到想要的效果。

4、合理利用橫向空間

因為卡片內、外的雙向間距留白，在空間有限的移動端設備中，橫向空間利用率較低，因此除了合理的減小左右間距外，還可以適當利用左右滑動來擴充橫向隱性空間。

例如淘票票首頁，在1.5屏的范圍內，幾乎每個模塊都能橫向滑動查看更多內容，從用戶體驗角度出發，這是縱向空間無法比擬的。

5、降低縱向空間的浪費

卡片式設計不是目的，其主要是用來更好的區分信息層級、提升用戶瀏覽體驗，因為卡片要作為獨立空間的存在，必定會增加上下間距而導致頁面拉長，因此，如無必要，不必盲目采用卡片式設計。

例如美團APP的「首頁、電商、購物車、我的」4大主功能頁面都使用了卡片形式，而「消息」頁則采用分割線進行信息分組，試想一下，如果為了統一規范而使用卡片，不僅造成很強的割裂感、還會極大的浪費縱向空間。

6、長文表達不適合卡片

這點不用多說，新聞資訊類產品的內容詳情頁就是最好的證明，不管其他頁面是否采用卡片形式，但詳情頁并不會跟隨形式，一方面可以讓同屏展示更多內容、增加空間利用率，另一方面可減少無關元素對用戶產生的干擾、給予沉浸式的瀏覽體驗。

7、突出一個核心內容

很多時候，我們總會聽到PM說這個很重要、那個也很重要，都需要突出一點，殊不知當什么都突出了也說明什么都沒有突出。在單個卡片中，組始終牢記這個準則：一次只突出一個核心信息，以便于用戶快速、精準捕捉，切記不可貪多。

六、結語

卡片式設計之所有能快速流行起來且經久不衰，其主要得益于自身的靈活性，尤其是在跨設備、跨屏幕上有著純天然的優勢，能忽略設備的差異給用戶提供更好的服務?？ㄆ⒉皇呛唵蔚臉邮皆O計，它是一種自由布局的設計語言，通過多種方式的信息組合、結合豐富的交互操作，給用戶創造出極致的使用體驗。

信息的呈現方式雖有不同，但最終的目的都是為了服務于內容，卡片式設計只是其中的一種形式而已，在設計過程中，我們需要根據內容結合實際情況作出合理的判斷，切勿拘泥于形式而忽略內容本身的重要性。

任何設計風格及展現形式都有可能成為歷史，卡片式設計也不會例外，但絕對不是這么快就結束，它依然值得我們去深究，力求打造更好的信息布局、更舒適的用戶體驗。

原文地址：能量眼球

作者：大漠飛鷹CYSJ

轉載請注明：學UI網》卡片式設計 | 掌握這些技法，快速提升界面效果！

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

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

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

評論(0) 瀏覽(1298)

042022-11

2023 年全新視覺設計趨勢來啦！趨勢7把我萌翻了！

seo達人

近日，2023年度視覺設計趨勢報告發出出來了，總共有11個大的趨勢，那么23年又流行哪些趨勢呢？下面跟著菲爾剛哥的一起逛這場視覺盛宴吧！記得收藏噢！

2023年平面設計趨勢概覽：

1、粘土風格

2、3D孟菲斯風格

3、簡潔風格

4、迷幻設計

5、霓虹燈和抽象卡通貼紙

6、70年代復古平面設計

7、簡化3D風格

8、抽象線條藝術人物

9、藝術襯線字體

10、彩虹色調色板

11、受自然啟發的設計

1、粘土風格（The Clay Look）

Example by Ramy Wafaa

2023年橡皮泥設計趨勢的關鍵要素

介紹由數字技術或真正的橡皮泥制成的不完美的凹凸表面。
提醒您在不完美中尋找完美。
鼓勵不斷蛻變，塑造自己的未來。

2、3D孟菲斯風格（The 3D Memphis Style）

2023 年 3D 孟菲斯設計的關鍵要素

通過 3D 現實的棱鏡重生的著名 80 年代風格。
基于 3D 幾何圖形和鮮艷色彩的大膽組合。
鼓勵在平凡中尋找不平凡。

3、簡潔風格（The Clean Style）

2023 年清潔風格設計的關鍵要素

一個整潔的設計，將所有圖案、裝飾品和裝飾都排除在外。
可以通過 3D 設計技術或平面簡約主義來呈現。
調色板由流行的白色或白色色調組成。

4、迷幻設計（Trippy Design）

2023 年 Trippy 設計趨勢的關鍵要素

在設計美學方面可能不符合邏輯的風格混雜。
創造一種超現實的體驗，類似于產生幻覺的效果。
挑戰設計師將他們的想象力超越所有既定的設計規則和限制。

5、霓虹燈和抽象卡通貼紙（Neon & Abstract）

2023年霓虹燈和抽象卡通貼紙趨勢的關鍵要素

霓虹燈和抽象卡通貼紙風格流行。
雖然有些類似于平面物理貼紙，但有些則呈現出運動和體積。
抽象卡通貼紙風格傳達了藝術繪畫的感覺。

6、70年代復古平面設計（70s Retro Flat Designs）

2023 年 70 年代復古平面設計的關鍵要素

大膽、華麗、飽和的顏色，看起來很美。
所有設計元素都由黑色細邊框勾勒出來。
具有 3D 效果或簡單黑色輪廓的大塊圓形字母類型。

7、簡化3D風格（Simplified 3D Style）

2023 年簡化 3D 設計的關鍵要素

將細節減少到最低限度，同時在簡單中尋求完美。
基于簡單、平滑的幾何形狀，如球體、立方體、圓柱體等。
易于理解、熟悉和吸引人，因為它類似于幼兒簡單的玩具。

8、抽象線條藝術人物（Abstract Line Art ）

2023年抽象線條藝術人物設計的關鍵要素

扁平的線性風格，結合明亮的色彩，傳達復古的氛圍。
扭曲的比例和動物、物體和人類特征的奇怪混合。
與您所見過的任何東西都不相似的角色。

9、藝術襯線字體（Artistic Serif Fonts）

2023年藝術襯線字體趨勢的關鍵元素

筆畫創意操控：不同字母的交織、扭曲、液化、延伸等。
超大襯線字體可以是作品中唯一或主要的設計元素。
襯線字體仍然傳達復雜性，但變得更加有趣和不可預測。

10、彩虹色調色板（Rainbow Palette Colors）

2023年彩虹調色板顏色設計的關鍵元素

靈感來自彩虹的顏色。
與其他流行的設計風格相結合。
代表各種形式的多樣性。

11、受自然啟發的設計（Nature-Inspired Designs）

2023 年自然靈感設計趨勢的關鍵要素

柔和的泥土色調、天然材料、紋理和形狀。
平衡感官，因為它傳達寧靜、內心的平靜和和諧。
一些設計呈現出真實自然和虛構現實之間的混合。

寫在最后的話

2023年度最新的視覺設計趨勢預測報告將設計師的想象力推向了全新的高度。這11個設計趨勢也為設計師們打造了一個超乎現實、夢幻般的場景，喚醒觀眾的好奇心，激發人們探索的自然欲望。

好了，2023年最新視覺設計確實介紹完畢，你有什么看法呢？

本文由「菲爾.剛哥」編輯整理，僅供分享交流

圖源 Graphicmama網站| 版權歸原作者所有

-END-

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

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

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

評論(0) 瀏覽(1828)

042022-11

UI 場景中常見的 3 個主題化區域

seo達人

一、底部標簽欄主題化設計

1、底部標簽欄圖標主題

在不改動結構的情況下，替換底部標簽欄圖標是最方便的形式。通過主題化的圖標也非常容易傳遞氛圍，無論是在節日慶典、購物季、主題活動等場景中，這個形式都是最直觀的表達之一。

比如優酷 APP 在中秋節的時候，就將底部標簽欄圖標替換為各式各樣的月餅造型，主題營造也是非常的明顯。將原本的圖標造型融入到月餅圖案中，鑲嵌圖案的設計非常巧妙，不僅保留原本的識別特征，也強化了主題氛圍感。

除了在圖標造型上面發揮以外，也可以將主題文案融入到設計中，這也是較為直接的表現形式。作為特定主題來說一目了然，需要把控主題文案數量。

2、底部標簽欄背景層

底部標簽欄的設計中，除了通過圖標設計附和主題之外，也可以在背景層進行主題氛圍營造。由于底部屬于操作頻繁區，背景層的設計不能過于搶眼，容易干擾功能的識別與操作。比如前段時間抖音 APP 將底部標簽欄背景層進行主題營造的時候，在黑色層上面運用的色調比較深一些，與原本黑色的沉浸式體驗有差異，在白底上面呈現效果還可以。

沒過多久抖音設計團隊便進行了更新，壓暗了背景元素的色調，弱化了視覺感。更符合原本的感官體驗習慣，也能強化主題感。

除了抖音以外，小紅書 APP 前段時間也在底部標簽欄背景層上面進行了營造。如果營造面積比較大的話，在無圖標形式（純文字版底部標簽欄）上面比較適合。如果帶有圖標的話，適合做局部強化。

二、頂部視覺區強化主題感

頂部視覺區包含狀態欄、導航欄和頂部內容區域，通常是白底、灰底、品牌色底和運營主題背景等為主。也是強化視覺感的常見區域，作為營造主題氛圍來說也是非常好的選擇。

該區域不僅可以作為功能性活動入口，也能在特殊時間段作為氛圍營造。很多產品都會在頂部視覺區域做應變處理，滿足多場景的需求發揮。

頂部視覺區的強化也是增強頁面感官體驗的方式之一，除了靜態背景的營造以外，也可以使用動態或者流體漸變等形式。

三、金剛區圖標設計主題化

金剛區也是作為主題化設計最常見的區域，由于該區域像百變金剛一樣，較強的靈活性方便元素替換和重組。

1、圖標主題化

在一些特定主題日活動中，可以將金剛區圖標替換為帶有主題元素的設計，以此增強活動氛圍。通常是階段性時間內展示，可以是圖標造型層面主題化，也可以是主題文案鑲嵌在圖標造型中，靈活性相對比較高。

2、局部動效化表達

除了整體金剛區變動以外，也可以在局部圖標上進行設計發揮，這樣帶來的干擾性比較低。通常是以圖標微動效為主，以此來突出個別功能和活動主題等。不適合過度動效，容易互相干擾，適合局部動效化表達，突出局部內容的關注度。

金剛區作為曝光度較高的區域，經常作為流量分發的關鍵場景，主題化發揮也是非常具備靈活性的。

小結

產品設計除了常規性的視覺升級和功能優化以外，主題化設計也是至關重要的，可以讓用戶時刻感受產品的變動。一成不變的體驗使用時間長了也會麻木，結合節日慶典和一些主題活動進行視覺呈現，可以在感官體驗層面得到提升。

本文觀點屬于個人經驗總結，不足之處歡迎大家補充，我們互相進步。

作者：黑馬青年

轉載請注明：學UI網》UI 場景中常見的 3 個主題化區域

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

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

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

評論(0) 瀏覽(1389)

042022-11

3個技巧瞬間提升logo設計的價值感

seo達人

一、設計一個開放的圓

圓是最完美的圖形，所以把很多東西設計成圓形都會很好看，logo也一樣，但如果設計成一個封閉的圓，可能會給人不夠靈活、缺少變化的感覺，所以，我們可以嘗試把logo設計成一個開放的圓，即只要一個半封閉狀態的圓，或者是設計一個不完整的圓，比如下面這些案例：

▲ 由于這種logo屬于半封閉的圖形，所以也比較容易處理成正負圖形。

把logo設計成一個開放的圓有以下幾個好處:

? 視覺平衡。因為圓形本身是對稱圖形；

? 視覺聚焦。圓形會讓人的視覺往中心集中；

? 有設計感。因為通常把一個圖形設計成圓形都需要簡化和規范，這會增加圖形的設計感。

示例一

幾年前我接觸了一個品牌名稱首字母為“s”的電子公司，也用這種方式做了一個logo方案，字母S加上圓。在下面的兩種組合方式中，很明顯第二個更開放、更有設計感一些。

但僅僅如此肯定還不行，一是這個S太普通，二是圖形沒有經過規范，所以我在草圖上嘗試了幾個方向，最終選擇了下圖來執行，簡單、抽象，在感性的柔和中夾雜著一點理性的堅硬。

對于這種簡約風的幾何圖形，通常都是通過采用圓形裁剪來制作，這樣會更快捷、也更嚴謹，在草圖的基礎上通過多次調整，最終確定了如下圖的輔助線(如果你的草圖不是很規范，那么就不必太遵循草圖)。

通過這些輔助線我們就能得到中間這個比較規范的“S”圖形。

運用AI中的路徑查找器中的工具，我們很快就能得到如下圖形，填上顏色這個開放的圓形logo就做完了。

在最終的圖形中，我們除了能看到圓和S以外，我們甚至還能看到握手和循環圖形，這些對于企業來說都是非常好的寓意，這也為我們寫標志說明提供了一些不錯的思路和依據。

二、塑造矛盾空間

矛盾空間是一種在三維世界中并不存在的二維圖像，矛盾空間的形成通常是利用視點的轉換和交替，在二維的平面上表現了三維的立體形態，我們熟知的埃舍爾就是這個領域的藝術大師。

這種手法也常常被用在logo設計中。

使用塑造矛盾空間設計的logo具有以下幾個好處:

? 有趣。帶有視覺欺騙效果的logo會讓人忍不住想多看幾眼；

? 富有藝術效果和創意。設計這樣的logo需要一定的空間感和想象力；

? 具有良好的寓意。比如無限、無止盡、可持續等。

示例二

我的一個朋友開了一家裝飾藝術品工作室，名字叫首工藝場，英文名為：First Technical Field，于是委托我設計一個logo，他是這樣說的：我沒什么要求，只要簡單、大氣、好看、現代、獨特、富有藝術氣息就好了，真的，我沒什么要求?！?

這個logo其實并不好做，老實說，我當時也沒啥思路，于是我用品牌英文名的首字母在畫紙上隨意搗鼓，天知道我畫了多少稿，終于我發現用兩個字母F左右對稱排列，中間形成的空間剛好可以加入字母T。

這個圖形讓我想到了曾經看過的一件矛盾空間作品。

純二維的效果過于普通，我覺得可以嘗試在此基礎上加入矛盾空間效果，這樣會更符合設計需求，于是得到了下面這個圖形。

最后，在AI中用矩形工具進行規范制圖，于是就得到了下面這個矛盾空間logo圖形，客戶表示非常滿意，畢竟他給的實在太少了。

三、立體漸變

即通過漸變色使圖形呈現出立體效果，這樣的logo也非常多，并且在前些年很流行。

雖然現在logo設計的大趨勢是扁平風，但是仍有不少設計師和客戶青睞這種立體漸變風，比如近兩年才面世的北京冬奧會logo、IE瀏覽器新logo等等。

因為這種風格的logo其優勢也是顯而易見的，比如:

? 美觀。這類圖形既有細膩的顏色變化，又有層次感，很容易得到驚艷的視覺效果；

? 有很強的品質感。這種圖形通常都需要倚仗曲線，再加之漸變色和立體效果，所以細節會比較豐富；

? 視覺沖擊力強。豐富的顏色變化和對比關系，可以大大加強圖形的視覺沖擊力。

示例三

第三個客戶是一家名叫東瑞的生物科技有限公司，主要是銷售酵素、膠原蛋白之類的產品，logo設計要求簡單、時尚、能體現行業屬性。對于這張logo，比較穩妥的做法還是運用品牌名的首字母來做，由于沒有英文名，所以我選擇了品牌名拼音的首字母“D”和“R”來做創意組合。

由于字母D是一個完全封閉的圖形，所以我想到了用正負形的方式來設計，即把字母R作為D的負形，行得通嗎?應該是可以的，因為大寫的字母R可以簡化成下圖效果，與字母D一結合就能得到我們想要的效果。

組合的方式有兩種，我個人更喜歡開放的圖形，并且我覺得第一種組合方式很普通，造型不是很好看，所以我選擇了第二種方向。現在我們開始正式制圖。

第一步：在AI中用矩形工具畫一個正方形，然后用直接選取工具把右邊的兩個直角拉成圓角，拉到最大。

第二步：把描邊加粗到一個比較合適的效果，主要考慮字母D的負形大小與描邊粗細的比例，是否符合字母R的特點，確定描邊粗細以后，將路徑擴展外觀，使其變成一個輪廓圖形，然后把左邊的直角也拉成小圓角。柔和一點更符合企業的調性。

第三部：畫一個直角梯形對字母D進行裁剪，梯形的寬度和傾斜角度是關鍵，盡量保證R的識別性和圖形的美觀性，裁剪完以后得到如下效果。

第四步：把圖形的部分轉角處也拉成圓角，然后給其填充一個藍色，到這里基本的造型就做好了。

但是這樣的效果還是有點過于普通，也體現不出行業特性，于是我想到了添加立體漸變效果。

第五步：在現有的圖形基礎上畫如下兩個圓，我們的目的是要用下圖中兩條黑色的路徑對圖形進行裁剪，而這兩條路徑一定要很自然地融入圖形中，所以，畫圓要很講究，依據是找到圓與圖形的切點和交叉點，如右圖中的四個點。

第六步：在上圖基礎上用路徑查找器里面的工具對進行裁剪、合并等操作得到如下圖形，原來的圖形被弧線切割成了三部分。

第七步：給圖形的三個部分分別填上由淺到深的漸變色，使其呈現出立體效果，考慮到企業的行業屬性，我使用了藍色到青色、綠色到黃色、黃色到橙色三個漸變色，最終效果還可以。

logo圖形設計方案合集:

logo設計得太常規容易被客戶說沒有品質感、體現不出企業或品牌的價值感，所以合理地使用一些技巧是有必要的，這會客戶會覺得你的logo設計還是花了一些心思的，看起來比較專業，所謂得套路者得人心，希望這篇文章對你有幫助。

作者：蔥爺

轉載請注明：學UI網》3個技巧瞬間提升logo設計的價值感

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

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

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

評論(0) 瀏覽(1452)

022022-11

大廠搜索哪家強？這些交互設計值得你收藏學習！

博博

大體上分為兩類：彩蛋流和體驗流

搜索的本質是什么？無疑是內容的召回和信息的推薦。

可隨著時代的發展和行業公司的內卷，不少公司除了持續優化搜索結果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。

大體上分為兩類：彩蛋流和體驗流

A.彩蛋流

注重提升搜索過程中的趣味程度，以增加用戶的好感度與產品印象/口碑。行業代表：谷歌瀏覽器、百度瀏覽器

1.谷歌瀏覽器

可以說是搜索彩蛋的先行者，內置了很多搜索關鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關字段會被’毀滅‘掉

搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋

還有各種有意思的搜索結果比如搜：is google down（谷歌關閉了嗎），搜索結果優先顯示：NO

再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。

而且在日常的節日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經形成一個穩定、具有品牌感的企業文化了。

如各種復活節、開學季、母親節動效。而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

2.百度瀏覽器

百度在搜索彩蛋里下的的功夫也不少，最著名的應該是搜索【黑洞】時，頁面上會出現黑洞的吸入特效。

而且和谷歌相同，在其他的搜索關鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉】，頁面會左右翻過來

搜索【跳躍】，頁面會在上下跳動

搜索【失重】，頁面上的字會飄起來?

而在【活動運營】上，百度也是很有心地進行著創新設計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節，搜索結果頁上都有‘調戲’用戶的創意設計，各種輕松調皮的畫風給不少用戶帶來了新鮮感和趣味性。

還有在【活動入口】的設計上也是特別有想法：在某年的圣誕節上，百度創新性地將活動入口’嵌套‘在結果頁卡片中間，用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」

用這種充滿創意+應景的的入口設計與引導方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。

而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

B.體驗流

注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產品易用性。

代表：蘋果產品、夸克瀏覽器

1.Apple/蘋果產品

·iPhone

iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。

在iOS的原生鍵盤里，可以根據輸入詞檢測+搜索對應的手機號碼：當你輸入【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。

用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率

·Mac

在Mac電腦的工具欄上搜索相關幫助時，系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里，并減少尋找的操作路徑，免去多余操作

在Mac電腦的‘系統偏好設置’里搜索幫助，在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時，該入口的聚光燈會更清晰些，特別容易找到搜索結果。

2.夸克瀏覽器

夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。

降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準地觸達搜索。

而且在輸入網址或英文等字段時，搜索框下方會出現一個滑塊區。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標位置。

而且更多有趣、創意的設計案例，可上：有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

讓用戶更方便地將光標快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結果，比如在搜索框中輸入“某城市+天氣”的關鍵詞，上方就會以卡片的形式顯示該地區最近一周的天氣。

用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息。

– END

作者：和出此嚴來源：站酷

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

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

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

評論(0) 瀏覽(1381)

022022-11

獵聘 | 聊一聊IM改版4.0那些事～

博博

通過Q3不斷的努力，終于把IM4.0的這個硬骨頭成功拿下，下面就復盤下這次IM4.0的設計過程吧～

作者：不是作家來源：站酷

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

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

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

評論(0) 瀏覽(1542)

022022-11

Web端工具如何設計「保存」

博博

前言

數據保存是Web端工具的基礎功能，一般在產品和技術框架設計之初就已經確定了數據保存的方式，后續不太會頻繁更改。

正因為如此，在日常需求迭代中，設計師很容易忽略數據保存的過程，也很少質疑當前的保存機制是否合理，但是當需要設計新模塊或產品時就會對保存有疑惑。

此外，保存也是一個受技術限制較大的領域，設計師需要對保存的技術類型有基礎認知，因為它會影響保存生效的邏輯和交互形式。

本文將會基于個人經驗，從設計表現和技術實現的角度聊聊Web端工具的數據保存。

「Chapter One」保存的對象

對于Web端工具產品來說，保存的對象可分為「文件數據」、「設置數據」、「用戶行為數據」。

1.1 文件數據

「文件數據」是相互獨立的內容，比如酷家樂的一個方案、Figma的一個文檔都是文件數據，在文件A中觸發保存并不會影響到文件B。文件數據是最主要的用戶資產，若丟失會給用戶造成很大的損失。

1.2 設置數據

「設置數據」分不同的維度，主要有用戶級別、組織級別、設備級別這三種。

用戶級別：數據保存在當前用戶的賬號下，同一個用戶的所有文檔都會應用該設置，比如酷家樂云設計工具的偏好設置。

組織級別：數據保存在組織級別，可能由組織管理員設置，同一個組織下的所有用戶都應用該數據。

設備級別：數據保存在設備（瀏覽器）上，同一個設備上的不同賬號、不同文檔都會應用此數據。區別用戶級別和設備級別的保存很簡單，只要清空瀏覽器緩存，看看數據是否變化即可。

一般來說，「設置數據」也是用戶資產。但是設備級別的數據存在丟失的可能性，一般情況下不會存儲大量重要的數據。

1.3 用戶行為數據

技術上經常把「用戶是否進行過xx行為」這樣數據保存在用戶級別或設備級別，用于差異化的引導、運營方案。這類數據雖然不能被視為用戶資產，但對于產品設計來說至關重要。

「Chapter Two」保存的位置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據數據保存的位置，可以分為兩類：后端保存和前端保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.1 后端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">后端保存是最常見的保存方式，觸發保存后，將方案數據上傳并存儲在服務器（云端），需要聯網。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.依賴網絡；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.數據量大時會耗性能，可能會阻塞操作</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.2 前端保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">前端保存是指以緩存 (cache) 的方式將數據保存在瀏覽器中，一般采用的技術方案是 indexDB（如Figma)。即使將瀏覽器關閉，下次打開時仍能夠恢復數據。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">局限性：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">1.有大小限制（幾百兆）；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">2.必須要同設備，且不能清除緩存；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.有時間上限（大部分瀏覽器最多可以保存 30 天）</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">還有一種前端的臨時保存，即會話保存（sessionStorage），通常為了方便單次會話而設置，例如記住選項狀態、輸入框的內容等，但只要關閉或刷新標簽頁這些數據就會被清除。從嚴格意義上來說，會話保存不是真正的保存，本文不對此展開討論。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">Web端工具一般會以后端保存為主，前端保存為輔，這樣能夠最大程度避免因網絡或服務不穩定造成的數據丟失。</span></span>
</p>

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Three」保存的觸發機制
</h1>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">從保存的觸發維度，可以將保存行為分為自動保存、手動保存、提示保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.1 自動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">根據保存的觸發條件，可將自動保存分為以下3種：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a. 定時觸發保存以一定的時間間隔（通常采用幾分鐘 ~ 1 小時）周期性地自動觸發保存。這是酷家樂云設計工具目前采用的保存方式。這種自動保存能減少因軟件崩潰、斷電等特殊原因造成的數據丟失的影響，但仍無法避免數據丟失，需要手動保存作為輔助。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 條件觸發保存特定的用戶行為會觸發方案自動保存。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">具體哪些行為需要觸發保存，則要結合業務邏輯和技術實現來共同確定。要注意的是，這類保存通常因技術原因而采用，用戶對其沒有預期，盡量不要讓它打斷或干擾用戶的操作。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 實時保存只要數據發生改變，立即觸發自動保存，無需用戶手動保存（盡管一些產品考慮到用戶習慣，仍會保留手動保存的交互）。部分產品會用間隔幾秒鐘的自動保存（如 Microsoft 365），效果基本等同于實時保存。實時保存能最大程度避免數據丟失，是Web端工具理想的保存觸發方式。但因為技術原因，并非所有工具都能夠做到實時保存。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.2 手動保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">手動保存指用戶通過額外的操作觸發保存，通常為點擊「保存」按鈕或快捷鍵。部分有實時保存機制的工具不需要額外的手動保存（如Figma），但對于沒有實時保存的工具來說，手動保存的設計至關重要。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">3.3 提示保存</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">即便有手動保存，用戶還是可能忘記保存。當用戶離開工具或某個環境時，若程序監測到有未保存的內容會丟失，則將此風險暴露給用戶，用戶可以選擇保存或者直接離開。如果用戶通過直接關閉瀏覽器/標簽頁的方式離開，也可以在瀏覽器上設置類似的兜底提示對話框，但是對話框上的文案無法定制。</span></span>
</p>

那如何選擇保存的觸發機制？

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.「實時保存」保障性最好，在技術允許時推薦采用；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b. 因技術原因無法采用「實時保存」時，推薦使用「定時觸發保存」 + 「手動保存」共同作用，也能較好地保障數據；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">c. 「條件觸發保存」通常是因技術原因而采用，用戶對其沒有預期，盡量不要讓它打斷或干擾用戶的操作；</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">d. 在數據有丟失風險的時候需要提示用戶保存，可根據用戶的操作路徑選用工具自身的提示或瀏覽器的提示。</span></span>
</p>
<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Four」保存的觸發設計<br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" />
</h1>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">4.1 觸發原則</span></span>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">在開始聊具體的設計之前，先提出保存的 2 點設計原則：</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">防錯</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存是對方案數據的 最重要的 保障機制。穩定的系統需要有可靠的保存機制，盡量避免各種原因造成的方案數據丟失。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
</h2>
<h3 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h3-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">狀態可見</span></span>
</h3>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">保存的反饋需及時有效，讓用戶知道當前方案的存儲狀態，如果有異常也需要第一時間告知，并給出可行的解決方案。</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">引用《<em style="margin:0px;padding:0px;outline:none;box-sizing:inherit;">微交互</em>》一書中提到的“觸發器”概念，可以將保存作為一個觸發器。觸發器是啟動一系列動作的原點，分為系統觸發器（系統被動觸發）和手動觸發器（用戶主動觸發）。</span></span>
</p>
<h4 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--detail-content-size);position:relative;line-height:1.8;word-wrap:break-word;caret-color:#222222;color:#222222;font-family:&quot;">
</h4>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.2 系統觸發器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對系統觸發保存來說，主要需確定2個點，何時觸發、觸發頻率。對Web端工具來說，有3種主要的觸發模式：</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">a.定時觸發</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">一個獨立工具一般只有一個保存觸發間隔設置，其間隔范圍很廣，可以是幾秒鐘、幾分鐘，甚至一個小時。一般會暴露給用戶設置。建議產品設計師根據技術現狀設定合理的時間，如果保存對性能有較大消耗，過于頻繁的保存也會影響用戶體驗?？赏ㄟ^選擇器給用戶幾個合適的選項，選項之間的時間間隔依次變大，總選項數不超過 5 個。</span></span>
</p>

某設計工具偏好設置中的保存時間設置

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">b.條件觸發</span></span>
</p>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">特定的用戶行為也可觸發自動保存，如酷家樂云設計工具環境切換、新建樓層，水電工具的智能設計等，都會觸發方案保存。以下是一些常見的「條件觸發保存」時機，這些時機是由技術能力、業務要求共同決定的。設計師需要考慮如果這些時機觸發了自動保存，對用戶的操作會用什么影響。</span></span>
</p>

c.實時觸發

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">現在已經有很多在線工具（如 Figma）實現了實時觸發保存，對用戶來說可以不用再理解保存這個概念，是一種認知上的減負，并且這種方式對數據保障的效果也最好。但是，仍然有設計師提出這種體驗上的風險，比如沒有容錯余地、頻繁保存造成的干擾和系統壓力。</span></span>
</p>
<h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
    <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">4.3 手動觸發器</span></span></strong>
</h2>
<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">對保存來說，「手動觸發器」一般來說是一個保存按鈕。在沒有實時保存的創作類工具中，手動保存按鈕的設計至關重要，一般會放在界面上方較顯眼的位置，并設置快捷鍵 (Ctrl+S)，方便用戶操作。</span></span>
</p>

酷家樂云設計工具的保存位于頂部欄第一個分區

<p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
    <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">而對于管理類工具，保存按鈕一般位于頁面下方，因為用戶一般從頁面上到下確認完內容后再進行保存。</span></span></span>
</p>

酷家樂賬號設置頁面

<h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
    「Chapter Five」保存的反饋設計
</h1>

5.1 成功反饋

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">a.自動保存的反饋對于自動保存，當保存結果無異常時，盡量減少對用戶的干擾，盡量不使用全局提示 (Toast) 反饋。比較場景的做法是在工具某個固定位置，用圖標或文字的狀態變化作為反饋。</span></span>
    </p>

當某些條件觸發保存時，甚至不需要讓用戶感受到保存的發生，因為用戶對保存是沒有預期的，建議將保存的過程與其他過程合并。

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#B2B2B2;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">比如說從云設計工具進入施工圖時，因為技術原因需要保存方案，但可以將保存方案的進程與施工圖加載的進程合并。</span></span>
    </p>

b.手動保存的反饋對于手動保存，當保存結果無異常時，可使用全局提示（Toast）告知保存進度和保存結果，也可以用「保存」按鈕的狀態變化作為反饋。

    <h2 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h2-size);line-height:1.8;caret-color:#222222;color:#222222;font-family:&quot;">
        <strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#A5C8FF;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:17px;">5.2 異常反饋</span></span></strong>
    </h2>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當保存有異常時，應即時給予且較明顯的異常反饋，并幫助用戶排查問題。在設計保存異常反饋時，需注意以下 3 點：</span></span>
    </p>
    <ul style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-position:initial;list-style-image:initial;caret-color:#222222;color:#222222;font-family:&quot;font-size:14px;">
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">哪些數據保存異常，是全局數據還是個別模塊的數據，是否會因為非核心模塊的保存異常而影響到整體用戶進程，是否可以通過其他方式（如前端保存）讓用戶繼續操作</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">保存異常的原因是什么，用戶可以通過何種操作解決問題（檢查網絡？重新登錄？）</span></span>
        </li>
        <li style="margin:0px;padding:0px;outline:none;box-sizing:inherit;list-style-type:none;">
            <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">當從異?；謴秃?，應該如何提示用戶</span></span>
        </li>
    </ul>

圖片a

圖片b

圖片c

    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        圖片
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        Figma與保存異常相關的反饋 a.保存異常反饋；b.異常原因與解決方法；c.異?；謴吞崾?    </p>
    <h1 style="white-space:normal;margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:var(--article-h1-size);line-height:1.5;caret-color:#222222;color:#222222;font-family:&quot;">
        總結
    </h1>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">最后總結一下，當我們接手一個新產品、新模塊、新需求的設計時，應該如</span>何<span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;background-color:#FFFFFF;">設計保存：</span></span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">首先，確定保存對象，是文件數據、設置數據，還是用戶行為數據。一個完整的產品一般都會包含以上三者，但對于某個具體的需求，可能只涉及其中一兩種。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">列出保存對象后，可以與產品、技術等團隊成員一起確定保存的位置（云端、瀏覽器）和保存的觸發機制（自動保存、手動保存、提示保存）。建議根據用戶流程在不同的觸點用不同的觸發機制，以最大程度保障數據安全。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;">接下來，根據保存對象、保存觸發機制，設計保存的交互，包含保存的觸發、保存的規則和保存的反饋。</span></span>
    </p>
    <p style="white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#222222;font-size:var(--detail-content-size);position:relative;line-height:1.8;caret-color:#222222;font-family:&quot;">
        <span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;color:#888888;"><span style="margin:0px;padding:0px;outline:none;box-sizing:inherit;font-size:15px;">最后，以用戶使用工具的流程再檢查一遍數據的產生和存儲，是否會有遺漏，設計保存兜底。</span></span>
    </p>

作者：酷家樂UED 來源：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

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

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

評論(0) 瀏覽(1285)

022022-11

十大心理學原理在產品設計中的應用

博博

對于產品經理、設計師和運營人員，心理學都是必須要補的一門課程。

可能很多同學都犯過和小摹相同的錯誤——在各種商城放“神券”的時候屯一大堆專業書籍。實際上，心理學的書籍你大概只要看到第三本，就會發現翻來覆去講的就是那么幾個淺顯易懂的道理，而且大部分都是你在日常生活中就能觀察和感受到的。

基礎心理學（消費者心理學，社會心理學，傳播和行為心理學等）的概念都不難，但如何精妙地運用在自己的專業上則非?？简炇褂谜叩墓αΑ?

為什么產品、設計、運營都需要學習心理學？

因為他們工作的本質都是和“人”打交道——用產品方案、視覺內容和活動規劃來影響用戶的決策、行為和心理。

你可能會覺得“依靠數據來統計用戶的行為再針對性決策”會更客觀，但實際上想得到靠譜的數據和正確的結論一點也不輕松，甚至很多公司根本不具備開展這類型調研的條件。

在這種情況下唯一的辦法還是洞察用戶并主動決策，此時基礎心理學原理就是你進行判斷的重要依據。

本文為大家梳理了十大著名的心理學原理，這些概念來自于多本心理學的經典名著，小摹進行了適當整合。

一、懷舊思維

簡單來說，就是人們在絕大部分時候都會遵循歷史慣性，更愿意相信過去的結論。

這也解釋了為什么現代商業中，品牌一直是一項核心競爭力：如果一個品牌曾經贏得了消費者的信任，那么消費者往往愿意持續選擇這個品牌的產品。

在產品設計中，懷舊思維有著極其豐富的應用場景。比如軟件產品的交互對于操作上的創新要非常慎重——快捷鍵、交互邏輯、界面布局等盡量和行業中主流產品一致，會更容易讓新用戶接受。

比如我們的原型設計工具“摹客RP”，界面布局借鑒了國外的UI工具Figma和Sketch。雖然產品主打的方向并不相同，但遵循業界已經約定俗成的定式設計，在新用戶上手的角度有很大的優勢。

二、暈輪效應

暈輪效應原指人際交往中，人身上表現出的某一方面的特征，掩蓋了其他特征，從而造成人際認知的障礙。

比如有的老年人對青年人的個別缺點，或衣著打扮、生活習慣看不順眼，就認為他們一定沒出息；有的青年人由于傾慕朋友的某一可愛之處，就會把他看得處處可愛，真所謂"一俊遮百丑"。

暈輪效應是一種以偏概全的主觀心理臆測，和上面的懷舊思維類似，屬于一種思維的定式，因為這種方式大腦在決策時會更輕松。

對于產品規劃者，尤其要想清楚自己的核心優勢和賣點是什么，不必完美主義地去追求面面俱到，因為如果最突出的優點能打動用戶，即使有缺點也很容易被用戶忽略。

三、習得性無助

簡單地說，如果用戶在過程中產生了“無論如何都無法改變現狀”的感受，容易陷入深深的絕望和悲哀。

在實驗中，經過訓練的狗本可以逃避實驗者加于它的電擊。但是，如果狗以前受到過不可預期（不知道什么時候到來）且不可控制的電擊（如電擊的中斷與否不依賴于狗的行為），他們就會徹底躺平并不再逃離。

狗之所以表現出這種狀況，是由于在實驗的早期學到了一種無助感。

也就是說，它認識到自己無論做什么都不能控制電擊的終止。

人如果產生了習得性無助，將很快拋棄當前讓他產生失望感的產品。這個原理解釋了為什么現在商品或者服務往往都要為用戶提供非常順暢的溝通方式（比如熱線電話）。

如果你比較了解國外在線軟件行業趨勢，就會發現很多的新興產品都已經不滿足于提供官方的Email地址，而是直接提供Discord鏈接（可以理解為在線聊天室）。

及時的直接溝通可以避免用戶產生絕望感，增加產品的生存幾率。

四、貝博規率

其實用一個成語就可以形容這個規律：得寸進尺。在實際場景中，只要想辦法讓用戶先接受了一個小要求，之后就更可能讓他接受一項更大、更不合意的要求。

原始的實驗中，心理學家讓兩位大學生訪問郊區的一些家庭主婦。其中一位首先請求家庭主婦將一個小標簽貼在窗戶（這是一個小的、無害的要求）。

兩周后，另一位大學生再次訪問家庭主婦，要求她們在院內豎立一個呼吁安全駕駛的大招牌（該招牌很不美觀，這是一個大要求）。

結果答應了第一項請求的人中有55％的人接受這項要求，而那些第一次沒被訪問的家庭主婦中只有17％的人接受了該要求。

這個實驗說明，如果想要用戶達到最終的目標，可以先適當設置一些和最終目標相關，但完成難度小得多的目標，循序漸進地引導，可以大大提升轉化率。

這種原理在各種產品的銷售的場景的可謂是遍地開花。

比如汽車、不動產等高價的商品，往往會給打出“來訪即送好禮”的方式吸引用戶前往，然后通過用戶試駕、樣板房體驗等環節引導用戶去體驗和接納，客戶有意向后，也只會要求付定金（而不是全款）......這樣繁復的流程都是為了把困難的目標拆解得更細小。

五、主觀性證詞

心理學研究表明，很多證人提供的證詞都不太準確，或者說是具有明顯的個人觀點、傾向性和意識。甚至，證人對他們的證詞的信心和證詞的準確性沒有足夠的相關性。

結合這個原理，就能更好地理解為什么問卷或是訪談等經典的調研方法并不一定能收集到足夠準確的信息，對于一些主觀性較強的問題，個人的傾向會極大的影響答案的可信度。

正確的做法是，盡量避免在調研中出現主觀性過強的題目，如果無法避免，盡量將題目拆解為多項能被客觀量化或評估的問題。如果沒有考慮用戶本身對于產品的傾向性，很可能被言過其實的“證詞”誤導出錯誤的結論。

六、馬太效應

馬太效應是指好的愈好，壞的愈壞，多的愈多，少的愈少的一種現象，出自圣經《新約 | 馬太福音》中的一則寓言。

這個效應常為經濟學界所借用，反映貧者愈貧，富者愈富，贏家通吃的經濟學中收入分配不公的現象。

類似的理論還有很多，比如二八定律（20%的頭部公司掌握80%的市場份額，20%的優質客戶貢獻80%的銷售收入，等等）。

這個原理告訴我們，要想讓產品在某一個領域保持優勢，就必須在此領域迅速做大。

當你成為某個領域的領頭羊時，你也能更輕易地獲得比弱小的同行更大的收益。而若沒有實力迅速在某個領域做大，就要不停地尋找新的發展領域，才能保證獲得較好的回報。

七、從眾行為

營銷和促銷手段中最重要心理原理之一，即：人們更容易相信被多數人接受的選擇。

我們經常可以看到路邊兩家餐廳，一家門口排滿了等待的食客，另一家卻一桌客人都沒有，巨大的反差往往讓后面到來的客人寧愿等待也要選擇人多的餐廳。

關于這種心理，哲學家認為是人類理性的有限性，社會學家認為是人類的集體無意識，而經濟學家則從信息不完全、委托代理等角度來解釋。但需要特別注意的是，從眾行為并非絕對的，因為在追求個人喜好上，人類往往也有很多個性的需求，從眾行為和個性追求往往是同時存在的。

從眾行為最典型的應用方式就是密集推薦或評價，現在的書籍的扉頁動輒幾十條推薦語，在線服務往往也會引用大量網友的好評，來證明自己的價值。

新產品在推向市場時，先多收集一些用戶的正面評價，宣傳時會非常有利。

八、比較心理

這是消費者心理學最經典的原理，簡單來說就是把一個200元的產品和一個100元的看上去差不多的產品擺在一起，你就會覺得100元這個超級劃算，很容易產生購買的沖動。

對于每個人來說，所有的認知，價值觀和結論都是建立在【比較】的基礎上得出的，所以，影響一個人的認知，最有效的辦法就是創造對比的機會。

價格頁面最喜歡運用比較心理，因為比較心理可以幫助他們重新設定消費者的認知。

常見的做法比如拉高產品的價格再做夸張的折扣讓用戶覺得這個商品現在超級劃算；或者在主推產品旁邊放置兩個明顯性價比不佳的次品，讓用戶對主推產品的效果感知更加強烈。

此外，在產品介紹時也可以將競品的參數列在表格中和自家的產品進行對比（當然，這個表格中的項目都是挑選過的），這樣更容易體現自家產品的優勢。

九、投射效應

人們在日常生活中常常假設他人與自己具有相同的屬性、愛好或傾向等，心理學家稱這種心理現象為"投射效應"。

"以小人之心度君子之腹"就是一種典型的投射效應。當別人的行為與我們不同時，我們習慣用自己的標準去衡量別人的行為，認為別人的行為違反常規。

了解這一點對于產品的策劃者們非常重要：用戶的想法很可能和自己不同（即便你認為自己在這個領域比其他人都專業得多），但仍然需要被尊重。

所以近年來特別流行用戶體驗、同理心這樣的詞匯，產品應該以真實用戶的體驗滿意度作為參考指標，設計者應該盡可能地以設想自己是一個目標用戶時，會有什么反應，否則僅靠自己的“臆測”，創造出來的產品很可能和真實需求脫節。

十、賭博心理

以小博大的感覺是一種強上癮體驗，人們只有在輸的時候才想到離開，少有在贏的時候離開。這個就是賭場盈利的本質模式。

由于真金白銀賭博是法律明令禁止的，所以產品設計角度一般都是借助積分、代幣等方式來給用戶制造“抽獎”的機會。

對于國內而言，氪金手游和盲盒就是典型的兩種應用場景，前者往往會設定一個極低的概率讓玩家獲得珍貴的虛擬物品，后者則是讓消費者有小概率獲得稀有款式的手辦，引誘顧客購買超過自己需求的商品。

對于產品設計人員來講，賭博機制可以說是一個潘多拉魔盒，通常不建議去使用和嘗試。人人都愛KPI，但也要取之有道，職場人都應該有自己的底線。

作者：jongde來源：站酷

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。

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

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

評論(0) 瀏覽(1419)

首頁

二、針對目前現狀，什么樣的方式可以實現提效？

最后

一、講故事

二、經過

三、結果

總結一下

二、卡片式設計價值

三、常見的卡片式設計樣式

四、卡片適用場景介紹

五、卡片式設計原則及小技巧

六、結語

一、底部標簽欄主題化設計

二、頂部視覺區強化主題感

三、金剛區圖標設計主題化

小結

二、塑造矛盾空間

三、立體漸變

A.彩蛋流

1.谷歌瀏覽器

2.百度瀏覽器

B.體驗流

1.Apple/蘋果產品

2.夸克瀏覽器

前言

「Chapter One」保存的對象

1.1 文件數據

1.2 設置數據

1.3 用戶行為數據

「Chapter Two」保存的位置

5.1 成功反饋

分類

日歷

鏈接

個人資料

存檔

二、針對目前現狀，什么樣的方式可以實現提效？

三、結果

三、常見的卡片式設計樣式

五、卡片式設計原則及小技巧

六、結語

二、頂部視覺區強化主題感

三、金剛區圖標設計主題化

二、塑造矛盾空間

三、立體漸變