一款產品無到有，產品經理需要做些什么？
將大東西進行拆解為小的東西，逐步解決問題，解決了小問題，大問題也解決了，在產品設計中也是一樣。在面臨圓角直角的選擇時，我們來看看作者如何做選擇
在當今數字化時代，UI設計已成為創造引人入勝的用戶體驗的關鍵要素。一個成功的UI設計不僅需要技術知識，還需要對細微之處的深刻理解。本文將探討兩種基礎但極為重要的圖形元素：圓角和直角。它們如何影響用戶的感知和互動，如何在設計中恰到好處地應用它們，以及它們在實際案例中的運用。
在介紹“圓角與直角”前，先給大家分享一個心理效應“bouba/kiki效應。”
這個效應最早由德國心理學家沃爾夫岡·科勒在1929年提出。
最早在1929年沃爾夫岡·科勒做了一個實驗，該實驗展示了兩種形式，并詢問讀者哪種形狀被稱為“takete”，哪種形狀被稱為“maluma”。盡管沒有明確說明，科勒暗示人們強烈傾向于將鋸齒狀形狀與“takete”配對，將圓形形狀與“maluma”配對。
在2001年的另一組實驗中拉馬錢德蘭和 愛德華·哈伯德使用“kiki”和“bouba”這兩個詞重復了科勒的實驗，詢問美國大學本科生和印度講泰米爾語的人，“這些形狀中哪個是bouba，哪個是kiki？” 在兩組中，95% 到 98% 的人選擇彎曲的形狀為“bouba”，鋸齒狀的形狀為“kiki”，這表明人類大腦以某種方式一致地將抽象含義附加到形狀和聲音上。
這個效應主要講述的是“人腦如何以一致的方式將抽象含義附加到視覺形狀和語音上”
那么我們不妨擴展一下，把這這種效應延展到角色上就拿我們最熟悉的“喜羊羊與灰太狼”舉例，我們只聽名字“羊”和“狼”就可以潛意識的認為“喜羊羊”就相當于“bouba”、“灰太狼”相當于“kiki”，“羊族”一聽就是溫和的族群，而“狼族”就是較為兇猛的族群。那么我們可以再回顧一下，“可可愛愛的卡通人物”大部分就是以圓形為基礎“小黃人、葫蘆娃、維尼熊、大頭兒子等”，“超級大反派”更多是以“直角”為主“女巫、蛇精、吸血鬼”，這就是“將抽象含義附加到視覺形狀和語音上”。
如果聽完這些你還是不懂，那么最簡單的例子一個堪比吳彥祖的帥哥叫“文軒沒有大腦袋”，那當你見到他時一定會去觀察這個人到底有沒有“大腦袋”
那么回歸正題，我們將“圓角與直角”代入這種思考方式并將其進行UI思考，就可以大致了解“圓角與直角”大致的特性
1）定義
2）特性
1）定義
2）特性
那么回想一下“bouba/kiki效應”，今后在設計中當我們看到某個產品大量的使用“直角/圓角”我們就可以分辨這個產品的大致風格，同樣字體搭配也是相似的效果，通過不同的banner可以大致看出運營活動的大致目的。
在實際的使用場景中，我們就從最常見的“按鈕、卡片”兩個場景來舉例分析“圓角、直角”的作用。
我們首先具體聚焦在UI設計中對于“按鈕”這一元素的圓角和直角的使用：
1）圓角按鈕
2）直角按鈕
那么這里我們會有一個疑問，那就是“移動設備適應性”，這里我們可能會想到“直角按鈕”的面積看起來要比“圓角按鈕”的觸控面積更大，那為什么“圓角按鈕”更易于觸控呢？
我們從兩個方面來解答
1）觸控面積
2）視覺感知與觸控體驗
通過這兩方面，我們是不是又能聯想到“bouba/kiki效應”，介于“圓角本身的屬性”我們會更容易去點擊他。
對于卡片我們還是先對比，在進行詳細的分析。
1）圓角卡片
2）直角卡片
這里更要值得注意的一點是視覺效果方面的“圓角對于用戶的視覺效果要強于直角”，巴羅神經學研究所對角落進行的科學研究發現，“角落的感知顯著性隨角落的角度呈線性變化。銳角比淺角產生更強的虛幻顯著性”，這里角越尖，看起來就越亮。角落越亮，就越難看。
通過上述對比我們可以得到一個結論“圓角比直角更親和”，那么可以接著推論“圓角卡片更容易使用戶接受卡片內信息”這是因為圓角向內指向矩形的中心。這會將焦點放在矩形內的內容上。當兩個矩形彼此相鄰時，還可以輕松查看哪條邊屬于哪個矩形。尖角向外，從而減少對矩形內部內容的關注。當兩個矩形彼此相鄰時，它們還使得很難判斷兩條邊屬于哪個矩形。這是因為每個矩形邊都是一條直線。圓角矩形的邊是獨特的，因為線條朝著它所屬的矩形彎曲。
那么對于“直角、圓角”的使用我們以“CONFIRMED、汽水音樂”這兩個產品來分析看一下這兩個產品對于“直角、圓角”的應用。
CONFIRMED（Adidas旗下網站，這里懂球鞋的朋友我們可以把它理解為Nike的SNKRS）
作為Adidas旗下產品發售平臺，CONFIRMED更多的是發售一些潮流類的服飾最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服飾，這個應用程序旨在為Adidas的高需求和限量產品提供一個更加公平和直接的購買渠道，通常涵蓋了品牌與設計師和藝術家的合作款，以及特別版的運動鞋。
那么我們從“產品定位、用戶群體、主要功能流程”來分析一下
1）產品定位
2）用戶群體
3）主要功能流程
這里我們先從“CONFIRMED”卡片元素分析（本文只講述的直角卡片的用途，不過多講述App功能）
每款產品可以在一個直角卡片中展示，其中包括產品圖片、名稱和一些基本信息。這里在App的“首頁、發售信息、會員權益”這三個模塊最為突出，這種布局有助于用戶快速瀏覽和識別不同的產品
4）功能展示
這里“CONFIRMED”不同的卡片可以承載不同的功能，如顯示即將發售的產品、已經發售的產品、品牌故事等，幫助用戶快速定位他們感興趣的內容。這里使用通過卡片元素的方式來詳細展示產品，會使整個產品的調性保持一致，大卡片的元素傳遞給觀眾的瀏覽體驗會更直觀的感受產品（這里會發現一個很有趣的細節，貌似好的國外、跨境電商的App都會采用這些大的直角卡片）
接下來我們就講述關于“CONFIRMED”按鈕元素使用的分析：
5）突出的功能
直角按鈕通常用于突出最重要的操作，例如“購買”、“注冊抽簽”或“查看詳情”。這些按鈕因其鮮明的邊界和直接的設計而容易被用戶注意到。
6）風格統一
使用直角按鈕可以與應用中其他直角設計元素（如卡片）保持視覺一致性，為用戶提供一致且簡潔的視覺體驗。
7）視覺引導
這些按鈕通常配有“CONFIRMED”的顏色（藍色），用于引導用戶的注意力，幫助他們快速識別應用程序中的不同功能。
這里我們可以看到“直角卡片”“直角按鈕”在 CONFIRMED 應用中的應用可能主要體現在其用戶界面的設計上，通過清晰、有序的布局和直觀的用戶交互，提升用戶的體驗。
提到“汽水音樂”大家都不陌生，前段是時間各大“rapper、流行歌手”發歌都在汽水，這個App是可以和抖音聯動的，所以播放音樂的模式沒有采用大家常見的“點歌、切歌”操作，而是換成隨機曲子和“抖音”向下滑動切換一樣，這樣既新穎又能容易使用戶養成操作習慣，不至于一下子新的交互方式無法適應。那么我們同樣從“產品定位、用戶群體、主要功能來分析”
1）產品定位
2）用戶群體
3）主要功能流程
那么我們從卡片開始分析，卡片主要應用在“歌曲、專輯”、“播放列表”、“歌單推薦”、“音樂盲盒”
那么他們起到的作用分別是
“圓角按鈕”對于“汽水音樂”的作用有：
其實通過對比，我們會發現“圓角”在社交、音樂等偏娛樂方向采用的更加多，因為這些產品屬性需要“產品與用戶”、“用戶與用戶”之間拉近距離，圓角不僅更容易我們的眼睛處理，而且還使信息更容易處理，圓角很有吸引力。那么“直角”就偏向專業領域、正式的場合以及一些小眾的產品。
了解并應用這些元素的特性，不僅能夠提升設計的美觀性，還能夠在更深層次上與用戶產生共鳴。作為UI設計師，深入理解圓角和直角的影響，將使我們能夠更精確地傳達我們想要表達的信息，在了解簡單的形狀如何影響感知后，我們就可以有目的地進行設計，將每一個微小的視覺元素加在一起，形成用戶潛意識中感知的一致、獨特的品牌個性。
本文由 @文軒沒有大腦袋 原創發布于人人都是產品經理，未經授權，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在頁面中，我們時常會被各種絢麗的色彩所吸引。本文介紹了透明度系統的優勢，并以實際例子展示其在解決設計問題、提高細節表現和可讀性方面的應用。讓我們一起看下去吧。
打開絢麗紛繁的頁面，我們時常會被各種各樣的色彩所吸引。但是，除了鮮艷奪目的顏色外，你可曾留意過那些看似平凡無奇的中性顏色？這些中性顏色在UI設計中扮演著不可或缺的角色，而其中的透明度系統更是隱藏著無限的魅力。今天，我們就要一起揭開透明度系統的神秘面紗，探索其在UI規范中的重要性和作用。
或許你曾聽過“Less is more”這句名言，透明度系統恰好就是這個理念的最佳體現。通過微妙的不透明程度調整，中性顏色的透明度不僅能提升整體界面的平衡感和視覺品質，還能增加元素之間的層次感和空間感。想象一下，通過透明度的微妙運用，你的設計將呈現出一種舒適且現代感的風格。是不是感覺很神奇？同時這個方法還是谷歌設計規范中的推崇之一哦！
在設計規范中，我們通常會根據文字的重要性將其分為重要、常規和輔助三個層級，然后為它們定義不同的顏色。但是，有時候使用定義好的顏色在特定情況下會出現識別不清晰、與背景搭配不美觀的問題。這就是透明度應用的典型場景。下面先說下使用透明度的優勢：
接下來讓我們首先看看純色文字定義經常遇到的問題吧。當設定文字與一些顏色元素搭配時，就可能出現一些尷尬的情況。
比如，下圖中相同顏色的文字在品牌色背景上，識別度低，視覺上也不是很和諧。
接下來，我們對文字顏色進行一些小小的改變，通過降低不透明度來解決這個問題。
效果立竿見影！降低不透明度后，文字識別問題迎刃而解，細節也變得更加清晰，文字顏色還與背景色融為一體，看起來更為和諧。
其實，不僅僅是文字，我們還可以用這個方法來改善其他元素的設計，比如表格的分割線。讓我們來看一個例子。
通常，我們使用較淺的顏色來填充分割線，在遇到有彩色背景的情況下，分割線可能會“隱身”。在下圖中，同樣顏色的分割線在帶有懸停效果的表格上就“隱身”了。
接下來，讓我們同樣的方法來改善這個問題。
效果如下圖所示。左邊的分割線展示出比表格本身顏色更深的藍色，整體顏值得到了提升。這也展示了設計師在細節把控上的魅力。
那么這個方法如何應用到實際工作中呢？讓我們來介紹一下具體步驟。
首先，我們需要考慮文字的使用場景，大致分為淺色背景、深色背景和彩色背景。我們需要根據實際項目情況來確定使用場景。一般我們會在設定色階時也會根據實際項目設定一個深色和淺色的透明度階梯，例如：設定顏色#000000，依次設置透明度為90%、80%…20%、10%序列。當然這個序列可以分為有序序列和無序序列，85%、56%等等
接下來下面是對深色背景和淺色背景下文字顏色的定義，具體操作如下：對于淺色背景，我們將文字分為三個層級：重要、次要和輔助。針對這三個層級，文字顏色填充為#000000，并設置序列中對應的不同不透明度。具體來說，重要文字的不透明度設為90%，次要文字為60%，輔助文字為40%。在深色背景下，相同的操作也可以應用，只是將文字顏色設置為#FFFFFF（白色）。在彩色背景下，我們會根據具體情況選擇使用深色背景或淺色背景下的文字顏色，并根據需要進行透明度的調整。
最后，為了確保文字在不同背景下的清晰度和可讀性，我們需要進行對比度測試?？梢允褂脤Ρ榷葴y試工具，來驗證所定義的透明度是否符合設計規范。（https://www.siegemedia.com/contrast-ratio）
但是，請記住，設計并不僅止于設計稿。最終需要前端同學來實現，而不是所有前端同學都熟悉并愿意使用透明度的系統。這時，我們可以運用我們的魅力和專業知識來說服他們。我們可以引用谷歌的Material Design官方文檔，證明透明度的可行性和簡便性。我們可以解釋這種設置透明度的方法不僅簡單，而且可以提高工作效率，同時還能增加用戶的視覺體驗。
通過使用透明度解決設計問題，我們可以使文字和設計元素更融合、提升細節表現，并提高用戶體驗。透明度的設置靈活多樣，能夠適應不同項目、不同場景的需求，讓我們的作品在視覺的世界中獨樹一幟。
在UI設計中，中性顏色透明度是一個非常重要的設計工具，它可以提升界面的平衡感、視覺品質，增加元素之間的層次感和空間感，以及創造舒適且現代感的設計風格。通過合理選擇透明度級別，并在不同元素的應用中靈活運用，我們可以創造出令人愉悅和吸引人的界面。
鼓勵設計師們在UI設計中靈活運用中性顏色透明度，并探索出獨特的設計風格。根據不同的設計目標和色彩搭配，選擇合適的透明度級別，并結合其他設計元素，為用戶呈現出現代且優雅的界面。當然，這個方法并非一勞永逸，希望在實際工作中留意并找到適合自己和項目的方法。讓我們的設計在色彩的世界中綻放光芒吧！
本文由 @Esc 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
排序在B端和C端產品中都比較常見，隨著用戶對產品使用的易用性提高，排序在產品交互中也在變化。本文分享B端拖動排序的多種場景及交互，希望對你有所啟發。
很久沒有更新B端產品相關的文章了，近期工作項目中做了很多新需求，接觸了更多業務，也學到了一些新的交互，后續將會根據我在實際工作項目中遇到的需求展開總結。
B端產品設計具有較高的業務屬性，所以對于ui設計師而言也需要有較強的業務知識，在完全理解需求后，再針對業務場景、用戶體驗、交互、布局合理、易用性等多維度展開設計。
這一期主要分享關于B端產品中拖動排序功能。
排序在B端和C端產品中都比較常見，前期排序有通過點擊上下箭頭排序，但是這樣的交互易用性較差，隨著用戶對產品使用的易用性提高，這種排序方式在產品交互中已經漸漸的被舍棄。
目前對于排序功能，使用更多的是通過拖動排序，通過選中數據后長按鼠標右鍵，上下拖動來完成數據的排序。
在B端產品中，我目前接觸的拖動排序的組件包含以下兩個大類：
對于分類2【樹組件多層級排序】又包含兩個小類：
對于小分類【跨層級排序】又可以細分為四個場景：
上面已經總結了排序的組件和場景，下面我們就一起來看看不同組件在不同場景下的具體交互，通過實際項目設計詳細介紹拖動排序的功能。
數據默認展示類似列表數據一樣，平鋪左對齊排版，當拖動排序時，鼠標移動到需要排序的數據行，長按鼠標右鍵并拖動數據上下移動，被拖動的數據原位置置灰（也可以直接消失）。
同時，被拖動的數據跟著鼠標走，移動到其它位置時，在將要放下的位置出現藍色高亮分割線（還可以做到所有數據實時變化位置效果）這樣能讓用戶更加直觀地看到數據位置的變化。
此類需求一般是針對一級數據排序，數據結構比較簡單，沒有文件夾多級樹狀結構，下面列舉幾個工作中遇到的需求場景，以及分享幾個其它產品中遇到的交互，便于大家理解。
由于B端產品具保密性，所以下面分享的截圖非工作實際數據，大家只要明白需求場景和交互即可。
需求場景1：產品業務中有很多的表單，表單中的字段順序在不同企業中不同，應該如何設計呢？
在設計時，可以將表單所有的字段羅列出來，然后用戶通過自定義排序字段即可，這里的交互就可以直接采用上下拖動排序。
需求場景2：飛書中有多個應用，對于每個用戶而言，自己所關注的應用不同，優先級不同，該如何設計？
同理，飛書也是對用戶個人的應該設計了拖動排序功能，可以根據自己關注的應該排序應該的位置，從而更快的找到自己常用的應用，提高工作效率。
無論是對于列表數據還是卡片數據的排序都可以采用這種拖動排序的交互。
（1）同層級排序（橫線高亮顯示即將放的位置）
樹組件同層級排序默認展示和拖動時效果與一級目錄常規排序一致。
（2）跨層級排序
父級未展開時：拖動到父級、父級整行高亮
如下圖，當需要把文件夾【數據名稱顯示004】放在【數據名稱顯示003】文件夾中，鼠標拖動數據放在【數據名稱顯示003】時，【數據名稱顯示003】整行會出現藍色高亮，表示被拖動的數據即將放在該文件夾內。
父級未展開時：拖動長按停留在父級時，父級自動展開子級。
如下圖，按照上面的步驟拖動時，當鼠標一直停留在【數據名稱顯示003】的位置時，該文件夾會自動展開二級目錄，這是一個拖動排序比較友好的交互，可以讓用戶再次看到該目錄下的數據結構，并快速一次性選擇需要放的位置。
父級已展開時：拖動到子級時，父級整行高亮，拖動到的位置出現高亮橫線。
如下圖，在上圖基礎上，當鼠標繼續拖動數據，想要放在二級目錄中時，數據一級目錄同樣會顯示高亮，告訴用戶當前數據的層級關系。
同時，二級數據中會出現藍色高亮分割線，標識被拖動的數據即將放的位置，這樣就能清晰的知道被拖動的數據將放在那個目錄的那個位置。
父級已展開時：拖動到子級文件夾時，父級不需要高亮，子級文件夾目錄整行高亮（子級已展開和未展開的交互與父級同理）。
當需要將數據拖動到二級文件夾內時，只需要高亮二級文件夾即可。
關于樹組件多層級排序的使用場景和交互比較復雜，上面我根據不同場景分別列出了交互展示方式，下面再根據實際業務需求列舉案例說明，因為此場景主要是針對交互和顯示，所以我就直接拿動圖展示，便于大家理解。
本文由 @設計小余 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
扁平化設計這一趨勢已經流行了挺長時間，而現在，設計風向似乎要有所轉變了，這或許可以從一些設計案例中透露出來。這篇文章里，作者就從案例出發，展示了設計趨勢的演變，一起來看看吧。
設計趨勢來來去去，但一個普遍的趨勢已經流行了很長時間，那就是扁平化設計，現在也幾乎是無處不在，UI中的按鈕，Logo，圖形設計等等。
最近感覺設計風向有點變啊，我碰到幾個例子感覺挺有意思的，似乎是印證了這波轉變。
在這篇文章里，我主要聚焦在UI設計領域，看看設計趨勢在這方面都經歷了哪些變化。
2013 年蘋果推出 iOS 7 后，扁平化設計火得一塌糊涂，界面設計方向一夜之間發生了轉變。雖然蘋果也是借鑒了其他制造商已經應用的元素，但其作為行業風向標的影響力依然無人能及。
從擬物到扁平，iOS 7 帶來了革命性的設計語言飛躍，顛覆了之前 iOS 的視覺風格。蒂姆·庫克將其稱為 “iPhone 以來 iOS 最大的變革”。
看上圖就一目了然（iOS 6 左，iOS 7 右），iOS 7 砍掉了許多元素的 3D 效果，整體扁平了很多。其實改成這樣是有道理的，畢竟擬物設計當初是為了讓用戶更快上手新界面，現在大家都習慣了，設計語言也需要更新迭代了。
十年過去了，絕大部分現代界面設計依然在用這種設計語言。然而，隨著設計逐漸追求更多復雜性和立體感（是的，又是3D，回到擬物設計），一些方面也開始出現變化。讓我們來看看幾個近期的例子。
值得說的是，盡管蘋果公司在引領扁平化設計趨勢方面發揮了重要作用，但其實靈感還是來自Windows Mobile 和 Android 等產品。Windows Mobile 才是先在主流制造商中第一個用扁平化設計的大廠。
對這段歷史感興趣的可以看看這篇10年前寫的文章：https://www.theverge.com/2013/6/11/4418188/apple-ios-7-design-influences
先一起看看最近的一個大廠設計改版案例，Reddit最近刷新了它的Logo。你能從上面的圖中看到，相比于舊版，新的設計有了一些3D風格化。
一直以來，扁平化logo是主流，但隨著像Pentagram這樣的設計大廠都開始探索3D化設計風格，預示著扁平化的時代就快要過去了。
現代的品牌logo設計大多是扁平的，因為這樣既清晰易讀又方便調整大小。真想看看其他公司接下來會怎么玩品牌設計。
回到2020年，在那年的11月，蘋果刷新了它們的MacOS圖標風格。我個人認為，這是在細節設計上搭配更多3D效果這股趨勢的源頭，我在網上看到了很多這樣的討論。
從 Big Sur 開始，蘋果就在圖標上下功夫，給原生應用圖標加料，讓它們看起來不那么乏味。你看上面那些，陰影也深了，漸變也多了，整個圖標更有立體感。
一看蘋果都整 3D 了，不少第三方應用開發商也坐不住了，紛紛改起了自家圖標，看起來更立體了。
蘋果在界面設計上向來引領潮流，這次的新趨勢，又不知道多少公司和個人會跟著玩。
Airbnb在最近的夏冬主題設計更新里，玩了不少 3D 和復雜設計。就拿它們新出的“游客護照”來說吧，圖標就跟真“書”似的，點開交互還有翻書動畫，賊逼真。
游客護照打開后，頂部卡片加了陰影，看著更有立體感，一點都不扁了。
Airbnb 在其他地方也玩兒 3D 了，比如“最受歡迎”那個地方，評分都立體起來了，還有那個改版后的“選月份”的按鈕，做得跟真表盤似的。
最后，他們冬天的新版本里，插畫也搞起了等角投影風格，給你們看下面他們那個新版本宣傳片就知道了。
Shopify 對深受好評的設計系統 Polaris 進行了重大更新，換了套新花樣！以前那些扁平的按鈕，現在縮小了，還更帶感了，按著賊舒服。
這次重設計也不是瞎改，當初設計團隊說扁平化做能讓界面干凈，理解簡單，用著還效率高。可時間一長，商家們就不樂意了，說這界面整得“沒勁”、“乏味”還“單調”。
改設計主要是為了把軟件界面打造成 “專業工具”，更加高大上。改動之后，按鈕在點擊時更爽了一些，就像商家們平時在用的物理按鍵一般。
探索的2種不同設計風格
上面這些案例展示了現代設計趨勢的演變，從扁平化設計向更加注重細節的方向過渡。
扁平化設計固然擁有清晰高效等優點，但現代設計更傾向于展現層次和深度。設計師和開發者應當密切關注這一趨勢，并做好準備將相關元素融入自身系統，尤其是在大型品牌和產品中逐漸成為趨勢的情況下。
設計趨勢真是一個輪回。
原文作者：Chan Karunaratne（本文翻譯已獲得作者的正式授權）
譯者：彩云Sky，人人都是產品經理專欄作家，騰訊高級視覺設計師。
本文由@彩云sky 翻譯發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
交互規范有效地規定了產品如何與用戶進行交互的規則和標準，這篇文章里，作者便梳理了B端產品的交互規范，一起來看看，或許會對產品經理、產品開發人員、交互設計師等人群有所幫助。
從業B端產品7年+，大大小小公司對交互規范有著不同的要求，但是萬變不離其宗，交互總有其底層規范要求，那么接下來跟大家詳細說明一下交互規范細則，超級詳細的交互規范來啦！
WHAT：交互規范是什么？
產品交互規范，也稱為界面交互規范或用戶界面規范，是一套規定產品如何與用戶進行交互的規則和標準。它包括設計元素的布局、動作反饋，以及對產品的使用流程和功能邏輯等各個方面的設定和控制。
交互規范重點在于人機交互的友好性和流暢性，用起來順手且符合商業目的就是交互規范最好的詮釋。
WHY：目的及意義
WHO：適合哪些讀者
產品經理，產品開發人員，交互設計師，產品UI設計人員。
分成兩個層面：系統級和產品級。
1）系統級色彩體系可參考螞蟻的交互組件https://ant.design/docs/spec/colors-cn，螞蟻組件對整體交互規范有著細致且順滑的操作演示。假設公司內部有專門的設計部門，可以設計部門整體定義公司色系以及字體等等。
2）產品級色彩體系進一步去突出產品本身色彩調性以及功能屬性。
1）品牌色的應用
品牌色體現產品以及品牌特色，加深使用者對品牌的印象。比如支付寶系列操作均是藍色為主，微信主色調為綠色和白色，抖音是黑色系。
2）功能色
功能色代表了明確的信息以及狀態，比如錯誤提示，失敗提醒，成功提示等等。在一套產品體系下，功能色盡量保持一致，比如新增，刪除等功能按鈕色彩需要跟主題色保持一致。
公司重要對外宣傳系統以及內部主系統均使用品牌色，突出公司特色；
另外一個頁面盡量不要超過3種顏色，并且是在同一標準色彩體系內，盡量不要自己去色彩庫隨意選取色彩。
字體是體系化界面設計中最基本的構成之一。
在中后臺視覺體系中定義字體系統，我們建議從下面四個方面著手考慮：主字體，字階與行高，字重，字體顏色。
為了保證在多數常用顯示器上的用戶閱讀效率最佳，根據電腦顯示器距離舒適度以及用戶觀感舒適度，確認導航為16px，標題為16px，正文為14px，說明為12px。
字階是指不同尺寸的字體。行高就是一行字的高度，包裝在字體外的邊框盒子的高度。
建議的主要字體為 14，與之對應的行高為 22。其余的字階的選擇可根據具體情況進行自由的定義。建議在一個系統設計中，字階的選擇盡量控制在 3-5 種之間，就跟衣服搭配一樣，顏色不要過多，簡潔舒適為宜，字體字號在一個區間范圍內。
字重為字體的粗細程度，建議用 regular 以及 medium 的兩種字體重量。
黑色為主，正文建議選用 #333333到#666666 之間的顏色。注釋類的文字建議選用#999999。
文案類最好為左對齊，數字類最好為右對齊，表單類間距建議8px，文字右對齊，結尾沒有冒號。
市面上比較主流的為這四種按鈕，主按鈕，線性按鈕，次按鈕和純文字按鈕。具體使用規則和使用場景如何呢？我們應該從哪些方面下手去設計按鈕？下面給大家一一進行解答。
主按鈕為主要的按鈕。引導用戶進行點擊操作，一個按鈕區域最多使用一個主按鈕。
場景應用：可應用于確認、新增、保存等等，你想引導用戶做何操作，就可以把視覺焦點集中在哪個按鈕上。比如退款操作時，商家本質希望用戶不退款，主按鈕為返回或是再想想的按鈕。
需要注意的是不要在同一個表單中使用多個主按鈕，1-2個即可，次按鈕或是線性按鈕多于5個時可以向上折疊收起。
線性按鈕&次按鈕兩種按鈕均可點擊，但是功能均弱于主按鈕。如果希望引導用戶進行點擊，可以選擇線性按鈕；若希望用戶盡可能少點擊或是不點擊可以選擇次按鈕。
場景應用：一般在大表單頁面批量導入，下載均為次按鈕或是線性按鈕。
純文字按鈕就是有顏色的文字按鈕，可進行點擊。
場景應用：一般應用于表單中大面積需要點擊的操作，比如查看，刪除，編輯等等，對表單中每一行進行的操作。
謹慎按鈕用于特殊情況下防止誤操作的按鈕。
場景應用：一般應用于刪除/付款/退款/修改權限/移除等危險操作，大部分都需要再次確認才可以。
前面介紹了那么多種按鈕以及應用場景，那么按鈕應該如何進行排列，需要遵循何種規則呢？
1）閱讀習慣
大家可以閉著眼睛想一下，正常我們閱讀的習慣是從左到右，從上到下，表單信息閱讀完畢后需要進行操作，最好都放在右上方。
2）相關性原則
讓相關的操作按鈕更相近，比如上一步和下一步，保存和取消，增刪改查，讓這些兄弟按鈕距離挨得更近一些。
導航是B端系統的地圖索引，幫助用戶可以順利到達目的地。導航對于B端產品交互而言，是系統之眼，一方面清晰展示系統結構，另一方面幫助用戶快速找到他們想要的信息。好的導航清晰操作順滑，差的導航會讓用戶沒有二次進入的想法，所以好的導航是系統成功的一半。
市面上主流的導航交互為全局導航和頁內導航，好的導航如何進行設計，我們需要選取哪種導航模式？繼續一起探索吧。
1）側邊豎向導航
使用規則：
需要特別注意豎向導航的排列順序，較為復雜的企業級系統從上到下一般依次為：
優點：
缺點：
層級入口較多時，用戶下鉆縱深體驗稍差。
2）頂部橫向導航
使用規則：
優點：
缺點：
1）面包屑
面包屑幫助定位菜單以及返回菜單，可以顯示當前頁面的路徑，是比較常用的導航方式。
使用規則：
顯示當前頁面路徑，方便用戶進行返回操作，最好大于等于3個層級進行使用；
2）Tab
使用規則：
較常應用于顯示頁面不同內容構成，比如人力詳情頁顯示Tab欄為基礎信息、公司任職信息、獎懲信息等等。
3）步驟條
使用規則：
較常應用于一步步按照某種提示去完成任務，任務有明確的先后順序；步驟一般為1-5步。
產品交互規范的內容模塊還是較多的，希望這篇文章對你的產品交互能力有所提升！另外交互規范是產品架構的基礎的地基，具體樓房蓋成什么樣還需要用心去思考以及借助公司內部UI和UE的力量。
本文由 @月亮漫談 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
本文深入分析了B端彈窗設計的尺寸規范問題，提供了科學定義彈窗尺寸的方法和思路，旨在幫助設計師提升操作效率并確保良好的用戶體驗，希望對您在彈窗設計上的決策有所啟發。
相信大多B端設計師對web彈窗設計的規范都不陌生：比如彈窗按交互形式可分為模態彈窗和非模態彈窗；
按承載內容類型分為：提示類、操作類、展示類彈窗；按彈窗承載信息量的大小可以分為：小尺寸彈窗、中尺寸彈窗、大尺寸彈窗…等等但最近，在做一個操作提效的需求設計時遇到了需求方對彈窗尺寸的規范挑戰~
大致需求是這樣：為節省彈窗內對選項選擇的時間，現將原本彈窗內的級聯選擇下拉框改成平鋪按鈕的形式。（見下圖）ps：本平臺為人工審核平臺，使用用戶為審核員，平臺設計要為審核員的審核效率負責，審核效率一般表示為：單人單天（8小時）xxx條審核量。
問題點：承載內容信息量不固定原因：彈窗內用戶選擇項為不通過原因，而此選擇項是用戶根據自身企業的風險標簽來自定義配置，這就涉及到級聯選擇數量的問題，有的客戶風險標簽體系細，多則幾百個，有的客戶只需要粗粒度標簽，例如只有一級標簽，總數可能不超過十個…
需求方：我要一個這么大的彈窗！好讓信息呈現更全面！
但做設計從來不是憑空定義一個彈窗大小，要做到有理有據；前期選擇先跟使用此平臺的審核負責人溝通，來確定目前已接入的客戶在此處自定義配置的原因數量量級并整理出溝通結論：
存在少量客戶10個以內的原因個數、常規客戶在30個左右的原因個數、現存一家客戶使用最大量級100+原因個數。但由于控制權在客戶方，原因量級不可控，未來也可能出現幾百的數量。在以上結論中，可以確定出可能的備選 600px中彈窗、800px的大彈窗、或者需求方提出的將近1200px的超大彈窗，但到底哪個最為合適需要進一步判斷。
在有可能的600px、800px、1200px三種寬度中選取最合適的彈窗尺寸，分別從操作效率與適配性角度對其進行判斷。操作效率層面：
當原因個數在30個以下時：
若不同寬度時，都選擇第一個處置原因，根據交互方法論–菲茨定律，指點設備到達目標的與兩個因素有關：（1）設備當前位置和目標位置的距離（D）。距離越長，所用時間越長；（2）目標的大小（S）。目標越大，所用時間越短。
由此可見此操作的最終目標按鈕為右下角的確定按鈕，目標按鈕大小不變，但整體的選擇距離是相對兩個較小彈窗要遠的。D3>D2>D1，所用時間 T3>T2>T1。由于對審核員任務操作時間和效率要考慮到秒或毫秒級別，此大小對用戶快速完成此操作起到負向作用。
另外，當原因個數10個以內時，可見此時彈窗寬度過寬，導致空白區域過大。
當原因個數在30個以下時，操作效率評分：
1200px ????
800px ??????
600px ??????
當超過100個原因個數時：1200px 一屏內展示完全，不需要滾屏滑動；800px 可在兩屏內展示完全，需要滾屏滑動；600px 超出兩屏展示才可展示完全，需要滾屏滑動。
當原因個數超過100時，操作效率評分：
1200px ??????
800px ??????
600px ????
適配性層面：
根據市面主流屏幕分辨率尺寸調研：
市面上存在部分 1024 分辨率的顯示屏，所以：600px能夠適配所有市面主流分辨率顯示器；800px能夠適配所有市面主流分辨率顯示器；1200px不能能夠適配市面主流1024*768的分辨率顯示器，彈窗不能在顯示器內顯示完全，固適配性相對較弱。
綜合三種彈窗大小的操作效率和適配性：
800px的表現最優，固選取800px的彈窗大小。
高度規范：由于信息量的不同可以根據內容多少進行自適應高度，限定max high 700px。由于一般超出800px可能出現瀏覽器外滾動條，所以選取高度為600-800px之間。
滾動條規范：限高后，若信息超出max high支持出現內滾動條。瀏覽器適配規范：瀏覽器窗口>800px，彈窗寬度保持固定寬度800px。瀏覽器窗口600-800px之間彈窗同步在600-800之間自適應。瀏覽器窗口<600px，彈窗寬度保持600px，出現瀏覽器外滾動條。
本文由人人都是產品經理作者【Clippp】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在互聯網領域中，人機之間的互動過程就是交互。交互也有一些可預測的、重復出現的規律，作者總結了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。
前段時間有個產品童鞋，他剛加我就問了一大串問題。
什么是模式（Pattern）？什么是模版（Template）？這兩個概念有什么區別？
作為一個熱心好學、樂于助人的產品仔，我當然和他暢聊了一個多小時，順便總結下聊天內容。
你是不是也經常在生活工作中，碰到類似“行為模式、設計模式、語言模式、文檔模版、表格模版”等名詞。
但又搞不清它們有什么區別，搞懂了又有什么用？
別急，我們花幾分鐘，先來嘮嘮什么是模式。
可預測、重復出現的現象或規律，通過歸納總結，就變成了某一種模式。
我們的生活中，就有許多模式的影子。
比如常見的商業模式、營銷模式、行為模式、數學模式、語言模式等。
舉個例子：
簡單說下行為模式，它分為了“習慣模式、消費模式、學習模式”等等。
苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。
但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~
掌握模式，有什么用？
當你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個好處。
我們試著再舉個例子，加深下對模式的理解，順便學學交互設計。
什么是交互？
簡單來說，交互指的是在互聯網領域中，人、機之間的一系列互動過程。
我還提煉了 3 種常見模式（簡單反饋、數據操作、業務判斷），比較粗糙湊合也能用。
現在試著再系統總結下，我常用的 7 種 C 端交互模式，主要有：導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式。
學完就能用，趕緊卷起來~
有人就問了，還有更多交互模式嗎？
確實可以有，等我有時間再編幾個。。
話說回來，如果是一些特別復雜的業務規則，可能會涉及到 N 個交互模式的任意組合。
常見的導航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。
導航模式的主要作用是，告知用戶當前在網站的位置，以及接下來到哪些頁面，這有點像地圖 APP。
上面這張圖中，包含了幾種導航組件呢？
搜索，是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關鍵詞，然后系統返回搜索結果。
打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。
常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯了、展示訂單取消的注意事項”等。
輸入模式主要用于新數據創建，例如淘寶下單時，你新增了一個收貨地址。
打開美團叫個外賣，整個訂單創建流程，也是輸入模式。
有很多人可能會把輸入模式和編輯模式搞混。
區別它們的一個方法是，交互流程涉及新數據創建，還是改舊數據。
改數據的話，那就是編輯模式。
我們在看到一些干貨文章，或好用的小程序想要轉發給朋友，那就要用到分享模式。
分享模式可以很簡單，也可以往復雜了做，看產品階段去實現。
引導模式和反饋模式有點像，都是展示特定的內容。
那怎么分辨它們呢？
以設計師視角來看，反饋模式需要用戶觸發，系統被動顯示。
而要讓用戶特別關注的信息，那就是引導模式。
模式，即抽象的規律。——好夕雷
說了這么多概念和例子，你是不是對模式的認知更清晰了呢？
模式運用在產品領域，就有了這 7 種交互模式，分別是“導航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導模式”。
如果學會了模式，那么無論生活還是工作，相信你一定能輕松應對、事半功倍。
本文由 @好夕雷 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
關于動效節奏的問題，有什么好的方法可以提供？這算一個常見疑問，我總結收到的問題反饋，基本都是「動畫節奏應該怎么做呀」「做完的動效一卡一卡的感覺不流暢怎么整」，索性借著今天的契機，我整理了這樣一篇主題文章，分享我對于動效節奏的一點經驗與思考，僅代表個人觀點，歡迎交流探討～
在當今數字時代，動效設計已然成為了產品和服務中不可或缺的一部分。
無論是手機APP、網頁界面還是智能設備，動效設計或是引導用戶操作的微小提示，或是增強用戶體驗的交互反饋，又或是塑造品牌形象的視覺元素，它們都以其獨特的方式，為用戶帶來更加直觀、生動的互動體驗，因此流暢的觀感體驗很重要。
提到流暢度，那動效節奏的重要性不言而喻。
動效節奏，簡單來說是動態呈現中各個元素動作的速度和時長安排，它決定了動效的快慢、強弱、起伏和變化，從而影響著用戶的感知和情緒。
一個優秀的動效設計，不僅要考慮單個元素的動效表現，更要考慮整個界面的動效節奏，使界面動效更加自然、流暢，也更加符合用戶的心理預期，從而提升用戶體驗。
所以，想入門動效領域并深耕，我認為深入理解動效節奏是尤為重要的，學會如何運用動效節奏來提升用戶體驗，讓用戶在享受科技帶來便捷的同時，也能感受到藝術的魅力。
動效可以增強界面的可理解性，例如下圖中廣告推送，有一個手機圖標的旋轉動態示例，
以及多多視頻模塊中的上滑操作指引等，幫助用戶更好地理解界面功能和操作方式，從而更有效地去使用應用。
動效可以提升界面的可用性，例如上傳文件的操作，通過提供及時的反饋和指引，降低用戶的學習成本和操作難度。
動效還可以增加界面的吸引力，例如購物軟件中模擬實際鞋盒開箱的形式，展現鞋品，通過生動有趣的動效表現，提升用戶的使用欲望和滿意度。
提到動效設計，了解其背后的基本概念和原則，才是賦予動效靈魂和意義的關鍵。
這里要提到三個關鍵詞：
1）首先是時間
時間在動效設計中扮演著至關重要的角色。它決定了動畫的快慢、停頓和節奏，從而影響用戶的情感體驗。
例如，一個緩慢漸入的動畫可能傳達出優雅、穩重的感覺；
而一個迅速閃現的動畫則可能帶來刺激、緊張的感受。
2）其次是空間
空間是指動畫發生和存在的虛擬環境。在動效設計中，空間的布局、層次和透視關系都至關重要。
它們不僅影響動畫的可視性和可讀性，還影響用戶的認知和行為。
例如，合理的空間布局可以使用戶更容易理解和操作界面元素，而不合理的布局則可能導致用戶的困惑和誤操作。
3）最后是構圖
構圖是指動畫元素的排列組合和視覺平衡。
一個良好的構圖可以突出重點、引導視線，并營造出和諧、統一的視覺效果。
相反，一個糟糕的構圖可能會分散用戶的注意力，甚至引發視覺疲勞。
動效設計的目標不僅僅是實現技術上的可能性，更是為了創造出讓用戶愉悅、滿意且易于使用的體驗，在美感和技術要求之間尋找平衡點，是我認為需要不斷練習，積累總結經驗的。
在動效設計中，能讓靜態元素動起來形成生動流暢的動態效果，需要用到兩大元素：關鍵幀與動效節奏。
關鍵幀代表了在特定時間點上某個參數的值。在動效制作過程中，通過設置關鍵幀，可以控制對象在不同時間點的狀態，從而形成連續的動作。
關鍵幀就像是動效世界里的路標，它標記了在動效呈現中某些重要時刻物體的樣子。比如說，我想讓一個球跳起來，那我就得告訴電腦，在開始的時候球在地上，然后在某個瞬間球在空中最高點，最后又回到地面；這些重要的時刻就是關鍵幀。
關鍵幀之間的變化可以是線性的，也可以是曲線的，后者可以創造出更為自然和復雜的動態效果。
線性或曲線變化，統稱動效節奏，是指在一定時間內，通過一系列有規律的動效元素的組合和排列所產生的節奏感。
常見的四種動效節奏形式有 勻速、緩入、緩出、緩動。
1）勻速（Linear）
勻速運動指的是物體在動畫過程中速度保持不變的運動方式。這種節奏簡單直接，沒有加速或減速的過程。
上面的小球彈跳呈現的效果，就是勻速運動，有些機械，缺乏實際場景中的動感。
在AE中，默認的菱形關鍵幀之間就是勻速運動，例如生活中常見的時鐘，上圖中鐘表秒針旋轉是平穩、機械的，這就是一個典型的勻速運動。
2）緩入（Ease In）
緩入是指物體在動畫開始時速度較慢，隨著時間的推移逐漸加速到最大速度的運動方式。
一般元素離開畫面或者物體加速階段使用，例如上圖中摩托車駛出畫面的部分、進度條加載緩慢到快速的節奏等，它可以增加動畫的真實感和生動性。
在AE中，以圓球為例，從空中下落的過程，就可以使用緩入的加速曲線；
調出圖表編輯器，調節曲線弧度如圖「速度圖表」所示，使曲線開始時平緩，越靠近出點速度逐漸上升，完成加速運動，此時結尾有些生硬。
加一個小知識點：曲線調節有兩種形式，一種為速度圖表，一種為值圖表；
速度圖表顧名思義，看曲線的弧度，圖中球的開始入點曲線弧度較緩，結尾出點曲線斜度較大，則代表加速度節奏變化；
值圖表分別代表X，Y軸曲線變化，如圖中球的Y軸位置發生變化，因此對應綠色線條的曲度變化是球體的動效節奏變化，下落過程中加速，則區別于前半段的直線，入點平滑，出點更陡峭。
3）緩出（Ease Out）
緩出與緩入相反，是指物體在動畫結束時速度逐漸減慢直至停止的運動方式，如元素入畫、人物行走至停下等，它能給人一種平滑和自然的結束感，是先快后慢的減速運動。
同樣以圓球為例，球落地后反彈的過程，就可以使用緩出的減速曲線；
調出圖表編輯器，調節曲線弧度如圖「速度圖表」所示，使曲線結束時平緩，調節出點的手柄桿，完成減速運動。
4）緩動（Ease In Ease Out）
緩動是最接近真實世界物體運動規律的一種方式，適用于大多數動態場景，尤其是那些需要表現自然、流暢動作的畫面呈現。
緩動曲線結合了緩入和緩出的特點，物體在動畫開始時速度緩慢上升，中間達到最高速度，最后在結束時速度逐漸降低。
示例繼續完善小球的曲線節奏，我想讓它看起來更順滑、更有彈跳感覺，通過球的大小比例（縮放）的變化，增加模糊變化的細節，這樣球跳起來的動作就會像真實世界里那樣，既有起跳的沖勁，又有落地的緩沖，整個過程更加生動有趣。
在AE中，緩動曲線沒有具體的數值，多數時候需要結合不同場景表達，去嘗試不同的曲度形式，通過反復預覽檢驗，找到自己滿意、適合畫面感呈現的形式。
日常積累動效節奏，我會分析電影或MG動畫中的經典鏡頭，比如角色走路、跑步的動作呈現，元素的出入場變化，以及自然界中的運動現象，如樹葉飄落等。
多做分鏡腳本的拆分練習，多臨摹實踐，就可以逐漸掌握常見的運動規律，自己在做設計內容時，也可以更清晰知道怎樣的節奏更適合當下場景呈現。
總的來說，創造流暢體驗對于動效設計來說還是很重要的，而要實現這一目標，掌握并靈活運用好動效節奏則是必不可少的手段之一。
萬變不離其宗，多看、多思考、多練習，通過實踐去總結復盤規律、梳理SOP流程，整理出一套適合自己記憶、使用的方法論與行動標準，提高自己對動態的感知，以及節奏力的把控，也能有效提升工作效率。
「想不如做，知行合一」，想讓學到的知識和技巧，生長到自身，唯一要做的就是立馬行動！在做的過程中解決一個個卡點，迭代出更適合自己的方法。
作者：Shirley_雪
本文由 @Shirley_雪 原創發布于人人都是產品經理。未經作者許可，禁止轉載
題圖來自 Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在當今這個信息爆炸、競爭激烈的市場環境中，用戶體驗已成為企業核心競爭力的關鍵因素。在這一背景下，我們啟動了一項名為“簡單設計”的專項優化項目，旨在通過化繁為簡，重塑用戶體驗，提升B端產品的用戶滿意度和忠誠度。
在當今信息爆炸、競爭白熱化的市場大環境下，企業核心競爭力的內涵已悄然變遷，不再單純聚焦于產品或服務本身，而是將重心逐漸傾向于用戶體驗這一關鍵維度。
于招聘領域而言，B 端產品作為銜接招聘方與求職者的關鍵紐帶，其設計的合理性、操作的便捷性以及語義的明晰度，猶如三把密鑰，直接決定著用戶滿意度與忠誠度的高低。
今年，58招聘B端開啟了“簡單設計”專項優化的征程，作為項目主導設計師，我全程深度參與了從調研、剖析、設計至實施的各個環節，在這一過程中，深刻領悟到設計對于提升用戶體驗的非凡意義。
項目伊始，我們即對58招聘B端產品的現有用戶展開了全面且深入的調研行動。
我們深知，唯有精準洞悉用戶需求與痛點，方能打造出契合用戶期望的產品。
為此，設計團隊全員深入一線，置身于用戶的實際使用環境，與各行業用戶進行深度的面對面溝通。同時，我們運用多種調研方法，包括問卷調查、用戶訪談、數據分析等，多維度、全方位地搜集用戶信息。
在調研過程中，一系列影響用戶體驗的關鍵問題浮出水面。
其中，操作繁瑣成為用戶反饋最為突出的問題。眾多用戶抱怨，在使用B端產品時，完成諸如客戶認證、發布職位、篩選簡歷等簡單任務，往往需歷經多個復雜步驟。
這種繁復的操作流程，不僅耗費大量時間與精力，更易引發用戶的挫敗感和不滿情緒，宛如一道無形的屏障，拉遠了用戶與平臺的距離。
此外，語義晦澀難懂也是普遍存在的問題。
B端產品中的專業術語和復雜表述，對于非專業用戶而言，仿若天書，極大地增加了學習成本，甚至可能導致誤解和誤操作，嚴重損害了用戶體驗。
這些問題的根源，經深入分析，與傳統產品設計理念的局限、對用戶體驗的忽視以及用戶研究與溝通的不足密切相關。
基于此，我們決定從這三個層面入手，重塑設計思路，以提升用戶體驗。
在扎實調研的基礎上，我們對問題進行了抽絲剝繭般的分析。
我們深刻意識到，若要從根本上解決用戶問題，必須對設計理念進行大刀闊斧的革新。
首先，我們毅然摒棄傳統的以產品為核心的設計理念，轉而擁抱以用戶為中心的設計哲學。用戶作為產品的最終使用者，他們的需求和體驗是產品設計的靈魂所在。因此，我們將用戶需求與體驗置于首位，重新審視產品的功能布局、操作流程以及語義表達等各個維度。
其次，我們將用戶體驗的重視程度提升至前所未有的高度。用戶體驗，作為產品競爭力的核心要素，貫穿于設計的全過程。我們通過簡化操作流程、優化界面布局、明晰語義表述等手段，致力于提升用戶的操作效率和滿意度，打造流暢、高效的用戶交互體驗。
最后，我們強化了用戶研究與溝通機制。深知只有深入了解用戶需求與痛點，才能設計出符合用戶期望的產品。因此，在與用戶的每一次接觸中，我們都用心收集他們的意見和建議，為產品設計與優化注入源源不斷的智慧源泉。
基于對問題的深度剖析，我們開啟了具體的設計工作。
設計，作為解決問題的關鍵環節，需要我們充分施展設計師的專業素養與創新能力，以用戶為中心，對招聘B端產品進行全方位的重塑。
在操作流程優化方面，我們對現有流程進行了細致梳理和深度優化，大刀闊斧地去除了冗余步驟和環節，使操作流程如行云流水般簡潔明了。
例如，在發布職位這一關鍵功能上，我們簡化了信息填寫步驟，并貼心地提供模板和自動填充功能，極大地降低了用戶操作難度和時間成本，讓用戶在操作過程中感受到前所未有的便捷。
在語義表述清晰化上，我們對界面上的專業術語和復雜表述進行了精心簡化和優化，使其通俗易懂且易于記憶。同時，對重點文案和標題進行突出處理，便于用戶快速抓取關鍵信息，清晰知曉每一步操作的目的，輔助用戶迅速決策，從而進一步提升用戶體驗。
在界面布局精簡方面，我們對界面進行了精心雕琢，去除了繁雜的信息和多余的按鈕。通過合理的布局與色彩搭配，提高了界面的可讀性和美觀度，營造出簡潔大氣的視覺體驗。此外，增加搜索和篩選功能，使用戶能夠快速定位所需信息，進一步提升操作效率和滿意度。
在整個設計過程中，我們充分發揮設計師的專業能力和創新精神，運用多種先進的設計方法和工具，如用戶畫像、設計原型、用戶體驗測試等，確保設計方案的科學性和有效性。同時，與產品經理、開發人員等團隊成員緊密協作，形成強大的合力，共同推動項目順利前行。
設計完成后，項目進入實施階段。
我們深知，實施是設計落地生根的關鍵一步，需要團隊充分發揮協作精神和強大執行力，確保項目順利推進。
在實施過程中，我們采用敏捷開發方法，通過持續迭代和優化，不斷提升產品的功能和性能。定期收集和分析用戶反饋意見，及時對產品進行調整和改進。同時，加強與用戶的溝通，通過多樣化的用戶調研方式，積極捕捉用戶的每一個意見和建議，為產品的持續優化提供堅實支撐。
經過不懈努力，“簡單設計”專項已取得顯著成效。用戶操作效率和滿意度大幅攀升，產品留存率和口碑亦顯著改善。然而，我們明白，設計優化是一場永無止境的修行。隨著用戶需求的持續演變和技術的不斷革新，我們需持續探索與創新，以維持產品的競爭力和生命力。
展望未來，我們將堅定不移地秉持以用戶為中心的設計理念，持續優化產品功能和性能。同時，進一步加強用戶研究與溝通，通過持續收集和分析用戶信息與意見，不斷改進和優化產品設計。我們堅信，在全體設計師的共同努力下，58招聘B端產品將為用戶帶來更便捷、高效、愉悅的使用體驗，成為招聘領域的璀璨之星。
總之，“簡單設計”專項不僅是產品設計層面的優化與提升，更是對用戶需求深度洞察與積極回應的生動實踐。未來，我們將繼續堅守這一理念，為用戶創造更多價值與驚喜，同時不斷提升自身設計能力與創新力，為產品的持續優化與創新注入源源不斷的動力。
設計團隊：老李頭、王丹、溫正遠、崔秉鑒、趙德馨、陳浩然、劉靜頤、劉春明
本文由人人都是產品經理作者【58UXD】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在效率至上的數字時代，釘釘硬件卻走出一條“溫暖設計”之路，從愉悅體驗到隱私守護，再到多感官協同，它是如何讓冰冷機器擁有心跳，重塑B端硬件設計準則的？一起來探尋。
釘釘自2015年推出后，逐步構建“軟硬一體”生態，其智能硬件以“簡單高效，底色溫暖”為核心，通過普惠（幾何美學/曲率連續）、專注（層級顯隱/寧靜科技）、平衡（功能-成本-環境）三大準則，將復雜B端需求轉化為簡約設計，設計出的產品斬獲iF/Reddot等眾多國際大獎，服務超1500萬企業。
如今用戶的需求已不再局限于實用功能，更追求情感層面的滿足。
這種轉變就像從”需要一臺電腦處理工作”到”渴望一個能提供陪伴的機器人助手”——本質是從單純的功能需求升級為情感連接。
通過洞察用戶從本能需求到行為習慣，再到情感共鳴的完整鏈條，我們不斷優化產品，讓科技與人的關系變得更加緊密溫暖。
產品與人的配合度決定了使用體驗是否安全順手，更是用戶獲得愉悅感的關鍵。我們建議從三個維度展開研究——人的使用習慣、設備性能特征、使用場景特點，通過實際測試與綜合分析，最終得出科學可靠的最優方案。
讓冰冷的工具性產品因為材質的改變而富有溫度，讓設備的立桿因為角度的改變而變得有儀式感和尊重感，以人為本的情感的設計賦予產品價值，形成用戶對品牌的認知性與認可度。
2030年的碳中和戰略和可持續目標已經是全球的趨勢共識，這意味著產品不僅為今天創造價值，也為明天創造價值，釘釘建議從產品級的3R原則 (Reduce、Reuse、Recycle) 再到系統級的LCED（產品生命周期設計）的設計標準去思考如何給用戶帶來產生正向的綠色價值認同感和愉悅感的產品，再到通過設計領導力帶來理念變革與循環經濟。
現今無處不在的智能產品和共享數據在帶來變革的同時帶來了巨大的安全風險， 釘釘設計非常注重可感知的用戶隱私信息保護（PBD），一直致力于通過最好的手段來守護用戶安全隱私，消除用戶在使用產品中“被監視”來的不安定感。
在隱私性設計上應考量如下維度：
策略-隱私保護不是成本負擔，而是產品核心競爭力。
眼睛看到的不等于全部體驗。我們始終相信，當視覺與聽覺的韻律、觸覺的肌理、嗅覺的記憶、味覺的驚喜交織成網（五感聯動），產品才能真正叩擊人心。這種立體的感官交響，不僅塑造獨特的品牌印記，更能在用戶腦海中種下記憶錨點。要讓感官設計真正釋放能量，設計師們需要一套系統化的設計指南——就像指揮家需要樂譜來統籌交響樂團。
釘釘設計一直致力于協調所有感官輸入，以提供關于品牌價值的豐富信息和功能表達，光作為其中一條重要媒介，即是交互媒介也是內容更是品牌記憶點，其中包含了光的色彩，明暗，變化形式，以帶給產品獨特的識別度和無限的可能性。
聲音的反饋能夠在恰當的場景給予用戶明確的指向和好的用戶體驗，同時也能很好得傳達出品牌和價值主張，汽車關車門的聲音是感官設計方法中最著名和最常用的例子，許多頂級汽車品牌都有獨立的車門開發團隊，例如梅賽德斯 SUV 的車門被調教得聽起來更重，以傳達它們的堅固性。
色彩是除了造型以外最能影響產品設計視覺體驗的關鍵設計因素，中性的黑白灰建議作為產品主基調，能夠適配更多場景的同時也能覆蓋更多受眾，限定色一般做根據產品定位的特殊版，或者局部的顏色點綴。
材質是產品外觀效果實現的物質載體同樣也是凸顯產品定位的重要媒介，我們主張通過引入功能&情感導向材質的概念，來進行不同產品定位上的區分，同時保持理念透出的一致性。
工藝處理&圖案是外觀效果最后一步，為營造溫潤感和保證多場景下的耐用性，表面處理應注意以下兩點：
1.主殼體表面處理應避免大面積高亮，避免使用大面積金屬拉絲，表面質感光澤低于4分光，素色為主，可點綴亮色，避免大面積純度過高的顏色噴涂，除窗口鏡片外避免大面積亮鍍，
2.肌理圖案應選擇低調克制的圖形，以功能性為導向，例如在關鍵物理交互點上給予適當的觸感引導或輔助。
在產品落地過程中，設計師應在量產限制與工藝要求之間平衡出最優化解，并將其沉淀成相應準則。
在效率至上的數字時代，釘釘硬件的設計選擇了一條不同的路——不讓技術成為壓迫用戶的工具，而是化作理解人心的伙伴。上篇提出的“簡單高效”生態，不是把復雜功能簡單堆砌，而是像拼樂高一樣，用“普惠、專注、平衡”三大準則搭建出真正懂用戶需求的硬件；下篇揭示的“溫暖設計”，則讓冷冰冰的機器擁有了心跳：它可能是電腦支架上一個微微傾斜的弧度，讓你工作時挺直腰背的瞬間，感受到被尊重的儀式感；也可能是設備上一盞呼吸節奏的指示燈，用光的明暗變化悄悄告訴你：“數據已加密，請安心”；或是關機時那一秒類似合上書頁的“咔嗒”聲，讓結束工作的動作變得像放下咖啡杯一樣自然。這些細節背后，是釘釘對產品的三個堅持：
說到底，好的設計從不需要刻意標榜“高大上”。當科技能讀懂人的疲憊、尊重隱私的敏感、在乎環境的未來，甚至在意你觸摸機身時的指尖溫度——這便是“芥子納須彌”的真正含義：用最小的人文微光，照亮最深的數字叢林，讓每個人在智能時代依然能體面地工作、自在地生活。
作者：創客
本文由人人都是產品經理作者【釘釘用戶體驗】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
藍藍設計的小編 http://www.syprn.cn
