一款產品無到有，產品經理需要做些什么？
編輯導語：動效，是頁面的靈魂，也能讓用戶有更好的體驗。作為設計師，我們如何將動效設計得更有簡潔有趣呢？本篇文章中，作者分享了5種動效格式的優缺點。感興趣的小伙伴不妨來看看。
動效設計，可以提升界面的趣味性和引導性，讓用戶瀏覽過程中不會太枯燥，獲得更好的體驗。
最近做的金山知了（后面改名為金山知識庫）官網，頭圖元素加入了緩動效果，第一眼挺新穎的。
金山協作新年許愿活動，許愿按鈕加入了運動的形象，更能吸引用戶點擊。
不過，輸出動圖和開發對接的過程中，我也遇到過一些問題：導出的動圖模糊、資源太大、開發不支持動圖格式等等，當時也是想盡辦法地解決。
這次我總結了幾種常用的動圖格式，也提及我輸出動圖過程遇到的問題和解決方法，以及我們設計師該如何選擇合適的動圖格式。
剛開始接觸動效，我最先了解到的 PNG 序列幀，就是輸出動圖的每一幀圖片，然后交付開發，按幀播放圖片實現。
比如這個加載動畫，我的練習作品，導出序列幀資源很大，所以我平時基本不用這種格式。
導出方法：
AE 輸出選擇 PNG 序列，如果要導出透明背景，通道選擇 RGB+Alpha。
GIF 支持安卓、iOS、網頁，可以說也是比較常用的格式之一。
界面設計中的小元素可以使用這個格式，比如運營按鈕動畫、點贊圖標動畫等，資源不會太大。
像我之前負責的新年許愿活動，因為是從 0 到 1 的產品，開發還沒有支持 Lottie，所以許愿按鈕動畫輸出 GIF 給開發實現，壓縮后資源 300KB。
雖然動圖放大周圍有鋸齒，但是在手機上是看不到的。
導出方法：
1. AE 導出 MOV 格式，再用 PS 轉換成 GIF。（注意：可能是因為動畫時間太長、文件太大，導出經常失敗，所以我很少用這種方式)
2. AE 安裝 Gifgun 插件，直接導出。
3. AE 導出 PNG 序列，將所有圖片拖進 iSparta，勾選 GIF 輸出。（注意：如果導出 GIF 圖片有問題，需要勾選壓縮質量，填寫小于 100 的值就可以解決了）
如果 GIF 文件太大，可以使用無損壓縮軟件：PPDuck。
Lottie 是一個用于 Android、iOS、Web、Windows 的動畫庫，用于解析使用 bodymovin 導出為 json 文件的 AE 動畫。
動畫通過代碼實現，是矢量的。
動畫庫資源會增加安裝包的大小，客戶端會有推動成本。
不過 WPS Office 有在使用，資源大小和穩定性目前來說是可以的。
不支持 AE 效果器直接添加的效果，比如高斯模糊、內發光、投影。
支持用圖片導入 AE 做出的動效，比如金山知識庫官網的頭圖，就是使用 Lottie 方式實現，資源小，動圖也很清晰。
支持顏色漸變，但是導出 json 容易出問題。比如之前設計的會員卡片動效，漸變顏色導出后變成了黑白漸變。
這時候只需要將所有漸變圖層名稱按順序改為 Gradient fill 1、Gradient fill 2、…，就可以解決了。
導出方法：
AE 安裝 bodymovin 插件，直接導出。（注意：要選擇保存路徑，導出按鈕才能點擊。點擊設置圖標，選擇 Standard 和 Demo，才能導出 json 文件和 demo 預覽效果）
APNG 是基于 PNG 格式的位圖動畫格式圖片，文件后綴依然是.png，可以在瀏覽器中預覽動畫。
金山協作的表情包使用的也是這種格式動圖。
和 GIF 對比，它的優勢在于動圖邊緣光滑，不會有鋸齒和顆粒感。
導出方法：
AE 導出 PNG 序列，將所有圖片拖進 iSparta，勾選 APNG 輸出。
SVGA 是由 YY 團隊開發出來的一種跨平臺的開源動畫格式，同時兼容 iOS / Android / Flutter / Web 多個平臺的動畫格式，常用于直播禮物場景，適合炫酷的禮物動效。
因為禮物效果比較復雜，一般是用 png 序列，一張圖一幀地制作動畫，輸出 SVGA 文件。
它只會生成一個 svga 后綴文件，代碼和位圖元素都被集成在了一起，但是 Lottie 會生成兩個文件：json 代碼文件+img 文件夾。
支持 AE 自帶基礎動畫：位移、縮放、不透明度等，但是不支持圖層漸變（Lottie 支持漸變）和 AE 自帶及外部插件的效果控件特效，所以 UI 動效 Lottie 比較通用，不容易出錯。
講了那么多動效落地方案，那么在實際工作中我們該如何選擇使用呢？
以上就是我的業務動效落地經驗總結，大家有需要這些導出插件的可以找我。
作者：ALEI；公眾號：ALEI的設計思考
原文鏈接：https://www.uisdc.com/motion-design
本文由@ ALEI 授權發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
出海產品面臨著語言、文化和用戶習慣的巨大差異，這對UI設計師提出了更高的要求。本文為出海產品的UI設計提供了全面的干貨指南，從文字、圖標、色彩、圖案到交互手勢等多個角度，詳細拆解了設計師在面對小語種和不同文化背景時需要注意的關鍵點。
隨著TikTok的海外關注度和影響力逐漸擴展、小紅書在海外友人的媒體圈炙手可熱，國內的互聯網市場逐漸趨于飽和，互聯網產品紛紛向東南亞、非洲、拉丁美洲、歐洲擴展商業版圖，這也為UI設計師創造了新的機遇。
對于出海產品而言，UI設計師需要有基礎的語言文化了解，在此基礎上去進行設計才能真正滿足海外用戶的需求，本文主要從UI的文字、圖標、色彩等幾個角度來拆解設計師在設計海外項目時需要注意的關鍵點，避免因為文化習俗差異而影響產品的易用性。
目錄：
1.小語種文字：超長文本的處理規則、鏡像語言、小語種適配檢視技巧
2.圖標：需要鏡像的典型圖標、不需要鏡像的典型圖標、圖標特例
3.顏色
4.圖案：禁忌圖標、禁忌手勢、禁忌物品、禁忌動物
5.交互手勢
當在某些語種下出現界面用語超長顯示不完整的情況，應按照如下優先級進行處理：
（1）精簡界面用語
在保證可理解的前提下，考慮對該語言的翻譯進一步精簡，采用其他較短的近義詞或者精簡表達，如“save number”在界面用語超長時應精簡為“save”。
（2）動態布局
當控件周圍沒有其他控件沖突時，控件可根據界面用語長度動態擴展，如按鈕。
（3）縮小文字
將文本逐級縮小，建議最小縮小到18sp/dp。
??并列的層級關系，文本超長時所有文字需要同時縮小字號
（4）多行顯示
在設計中文時，提前考慮預留小語種換行空間，??按音節換行。
（5）跑馬燈
避免同意界面使用過多的跑馬燈，1-3個為宜。過多的跑馬燈會分散用戶注意力，界面顯示混亂。跑馬燈占用系統資源，影響性能，過多的跑馬燈可能會導致卡頓。
（6）打點截斷
顯示不下到文字截斷顯示并在末尾增加“…”
截斷的使用場景：
A.用戶自定義內容，如文件名，相冊名
B.某處顯示空間有限，但可以在本層級/上一層級/下一層級查看到全量內容。
阿拉伯、波斯語、烏爾都語、希伯來語等語言的書寫都是從右向左書寫，和當今世界主流語言（如英語）從左向右書寫的方向相反。
受文字書寫方向的影響，阿拉伯語言的用戶對于左右邏輯的認知和英文等LTR （left to right)完全相反，比如習慣將右側作為開始，左側作為結束。
為了支持RTL語言和用戶習慣特點，在UI設計中，需要在文本，界面布局，手勢操作和動畫，圖標等交互元素中滿足RTL的特殊要求。
（1）字串顯示——檢視語言：西班牙語（拉丁美洲）
（2）大字體顯示——檢視語言：西班牙語（拉丁美洲）
（1）后退，前進
（2）顯示前進方向的圖標，如：騎車 發送 進度條。
▲ 阿拉伯語-顯示前進方向
（3）右側具有滑塊的音量圖標應當鏡像，滑塊應從右向左顯示，如：音量調節。
▲ 阿拉伯語-音量調節
（4）表達含有文本含義的圖標，如：對話框、書寫、備忘錄。
▲ 阿拉伯語-文本含義圖標
（1）雖然時間的線性表示在RTL中被鏡像，但圓形時間方向不是。對于RTL需要，時鐘仍然是順時針轉動，時鐘圖標或帶有箭頭指向順時針圖標的刷新圖標不應該鏡像。
▲ 阿拉伯語-帶有時間含義的圖標
（2）國際標準的圖標不需要鏡像，如藍牙。
（3）擬物圖標不需要鏡像，如SIM卡。
(4) 斜線不需要鏡像 ，如靜音圖標。
▲ 阿拉伯語-特殊免鏡像圖標
(1)亮度圖標需要鏡像：英文習慣認為左邊暗，右邊亮；阿拉伯語習慣認為左亮，右邊暗。
(2)阿拉伯語有自己的問號?
(3)阿拉伯語am.pm的位置要移動到時間左側
1.中東市場：綠色為主、火紅與黃色慎用。綠色象征吉祥，但敘利亞視黃色為不祥之兆，伊朗不喜愛藍色。
2.非洲市場：禁忌多樣。黑色普遍被認為不祥，紅色在乍得、尼日利亞等國也不受歡迎。
3.歐洲市場：白色神圣，黃色慎用。
禁忌手勢
禁忌物品
禁忌動物
RTL語言中，帶左右滑動方向的圖片或者是左右滑動展開功能選項，應遵循與英文界面相反的鏡像規則。
▲
漢語-左滑刪除
以上就是從小語種文字、圖標、顏色、圖案、交互手勢等方面總結的出海產品設計干貨，希望能讓你有所收獲~
本文由人人都是產品經理作者【Clippp】，原創/授權 發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
用戶體驗是一個老生常談的話題。在進行 UI & UX 設計時，我們經常會忽略一些細節，雖然我們并沒有覺得有什么問題，但往往會極大地影響用戶的體驗，從而影響整個產品。作者在本文中提出了 6 條提升用戶體驗的微技巧，一起來學習吧！
在設計高效、易讀和漂亮的 UI 界面時，只需要小的改動就能讓你的設計眼前一亮。在這篇文章中，我為你帶來了另一些容易付諸實踐的 UI 和 UX 微技巧。這些技巧只需很小的改動就可以幫助你提升用戶體驗。讓我們開始吧！
如果你有一個設計項目，可以讓你在顏色選擇方面有比較多的自由，不要總是傾向于用彩虹般的顏色來進行設計。
如果你走的是彩虹路線，你很快就會發現很多內容看起來都不匹配。簡單地使用一個基礎色，然后將該顏色的色調和明暗進行變化并應用，可以令你的設計更加協調和一致，并且看起來更專業，而不需要那些閃亮的彩虹和需要色彩理論學位。
UI 可以是干凈的、極簡的和直截了當的，這毋庸置疑。但不能以犧牲用戶體驗為代價。對于像選項菜單這樣簡單的東西，要確保用戶只需快速瀏覽一下，就能夠找到選擇的項目。
你不需要在這里追究更多細節。簡潔的粗體就足夠讓用戶輕松的分辨出他們選中的目標，而且他們的輸入已經得到反饋。
當涉及到長篇文字內容時，你可能會傾向于使用灰色的中間色調，這可能沒什么問題。但如果你同時使用更輕字重的字體，就會發現這影響了這段內容在任何尺寸屏幕上的可讀性。
不要讓用戶因為這種原因退出頁面?？梢酝ㄟ^將文字的顏色加深來簡單地解決這個問題，讓每個人都更加易讀。對于較輕字重的字體，只需將其顏色加深幾個級別，就能顯著的改善其可讀性。
你希望用戶的眼睛每次都能快速、有效地注意到頁面上最重要的元素，并將認知的努力降到最低。通過使用視覺層級原則，如字體大小、字重、顏色和布局，僅舉幾例，你可以通過這些技巧輕松地把最重要的元素放在突出位置。遵循這些原則有助于改善用戶的體驗，并有助于引導用戶以更直接、準確地方式使用產品。
在用戶進行操作之前，特別是點擊某些 CTA 按鈕之前，要確保他們不會被蒙在鼓里，知道接下來會發生什么。在執行操作之前，始終讓用戶清楚地了解他們在點擊突出顯示的 CTA 按鈕時可以期待些什么。改善每一步的用戶體驗，不要讓他們在旅程中任何一個觸點產生疑問。
CTA 按鈕在頁面中哪怕不是最重要的部分，也是最重要的之一，讓它在頁面中突出出來!
不要讓用戶將它與頁面上其他類型的元素（例如通知或標簽）混淆。它需要很容易地被分辨出來，而這可以通過簡單地為 CTA 設置單獨一種顏色就做到。當然，你可以在尺寸、形狀等方面做更多的細節，但只要為你的 CTA 保留一種顏色，僅此一點就可以減少大部分問題。
我希望通過這幾條簡短的小貼士，你能意識到對你的設計進行小的調整也能帶來完全不一樣的用戶體驗。
譯者：吳鵬飛；授權獲?。簠蛆i飛；審核指導：王翎旭；
本文由@三分設 翻譯發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于 CC0 協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
關于“管理模式下是否需要確認按鈕”這一問題，作者結合自己最近的一次設計方案復盤，從三個維度展開分析，希望對你有所啟發。
需求：在課程章節頁面，老師希望可以對章節、單元編輯名稱和調整順序。
設計問題：
最開始想到的就是放在章節單元后，增加更多 icon，用戶點擊更多進行章節單元的編輯刪除，拖拽直接調整排序?？墒沁@種設計方式讓章節看起來復雜很多，而且老師使用頻率很低，一般只有在學期剛開始，備課時設置，后期幾乎不再會進行調整。
為了降低頁面復雜度，我把編輯排序放在統一入口，點擊后，再進行操作。我給這個入口命名為管理。點擊管理，進入到管理模式，調整章節、單元的名稱和層級結構。
實時保存就是用戶的每一步操作都會立即生效。比如一些標題的編輯，鼠標hover上去會展示輸入框，光標消失即保存成功?；蛘咧蹙庉嬑恼聲r，也會告訴你保存中。
實時保存相較于確認保存少一步操作路徑，每一步操作立即生效同步更新，相對來說效率較高。由于人們總是會忘記收尾工作，實時保存也避免了讓用戶承擔忘記點擊確認按鈕而使數據丟失的風險。
實時保存也有缺點，比如當用戶想要反悔撤銷的話，就會比較困難。一般會根據具體需求搭配撤銷按鈕、歷史版本等方式，給用戶一個反悔撤銷的機會。
用戶進行的一系列操作，都不會立即生效，而需點擊確認（保存等）按鈕后，所有操作才會生效。比如飛書管理后臺對于會議室預約規則的設置。默認是查看模式，修改字段進入編輯模式，展示取消、保存按鈕，點擊保存更新修改，取消則回到編輯前的狀態。
這種方式的好處是，減少用戶修改過程的心理壓力。用戶在修改過程中可以隨意調整，內容不會被同步，修改好后點擊確認按鈕統一保存，內容同步。
為什么用戶在編輯時會有心理壓力？重點就在于同步給誰，以及同步的內容是什么。
內容修改后只同步給自己。
例如微信標簽管理，進入管理模式后，對于標簽的排序，刪除都實時保存更新，沒有確認按鈕。標簽修改后的結果只會同步給自己，而自己在管理標簽的過程已經知道了修改結果，如果增加確認按鈕倒顯得較為繁瑣。
內容修改后會同步給其他用戶。
例如飛書管理后臺對于會議室預約規則的設置，設置結果會影響其他用戶預約會議室，比如能不能約、幾點能約，所以同步設置結果就必須要謹慎一些。而多一步確認（保存）按鈕可以幫用戶再次確認自己的操作行為，讓同步結果更謹慎。
以上可以總結為，如果內容修改后只同步給自己，則實時保持更便捷。如果內容修改后會同步給其他用戶，則需考慮增加確認按鈕讓操作行為更謹慎。具體還需考慮內容本身。
如果內容對其他用戶影響不大，也可以使用實時更新。
比如飛書管理后臺對于會議室名稱的修改，修改后，光標移開即保存成功。會議室名稱對于用戶來說只有信息的傳遞，沒有功能上的制約，甚至也不影響用戶行為目標。可以思考下，當用戶想約會議室時，什么會影響用戶決策？比如位置-用戶會考慮距離是否合適、或者狀態-是否當前被占用等，但會議室名稱幾乎不會影響用戶預約決策。所以內容對用戶影響較小，使用實時更新。
編輯者對于內容的重視程度。
比如知乎內容發布后，二次編輯，需點擊保存更新才會同步給其他人。創作者寫文章耗費了自己的時間成本，好的內容可以幫創作者帶來流量和價值感，所以創作者會更重視文章內容的完整性。而實時同步編輯過程所展示的內容是不完整的，會影響讀者閱讀內容的感受。所以點擊保存更新，統一同步內容可以避免這些問題的發生。
回到自己的產品上，老師對于章節的管理操作會同步給學生，調整結果會影響學生查看章節結構。作為學生，主要任務是完成章節或者單元下的學習活動。所以調整的內容并不影響學生完成學習任務，按照我們所總結的規則，內容對于同步者影響不大，可以使用實時更新。
再來看編輯者對于內容的重視程度。老師會在學期前開始備課，管理層級結構屬于備課環節，教學內容一般都是固定的，所以后期調整層級結構的頻率很低。操作行為低頻且優先級不高，內容固定，對于老師來說，重視程度一般。所以也可采用實時更新。
由于老師編輯章節或單元已有保存按鈕，如果管理模式還存在保存操作的話，對于編輯功能來說需 2 次保存才算是真的保存，理解成本過高。選擇實時保存方式更合適。
根據以上 3 點，我的方案選擇實時保存，實時更新。
以上是我對于工作內容中關于管理模式的復盤思考，最終設計方案的產出還是需要結合自己產品的業務，在體驗和功能的權衡之下做出最合理的設計。
關于第三部分排序放在下次在寫….
本文由 @阿青 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
大部分產品中都含有一些引導幫助的功能，這些功能有什么作用呢？對于設計者來說，應該秉持怎樣的初心來設計呢？目前，引導幫助功能又有哪些常見的分類呢？帶著這些問題，我們一起走進這篇文章，看看作者為我們的分享。推薦相關人員閱讀與學習。
前幾天眼睛不太舒服，去醫院做了一個檢查（視疲勞導致）。
因為要走商保，所以需要使用社?？ǎ拔矣浀蒙绫＝Y算都需要去人工窗口，我剛過去就被一個穿著紅馬褂的大媽攔住說自助機也可以用社保，要我掃她胸前掛的碼（可以快速到達電子社保二維碼界面），掃完她就開始幫我點擊操作。
她覺得我應該不會操作，所以讓我看一遍，其實這個操作并不難，只是因為我不知道自助機上可以用，自助機周圍也沒引導操作流程。而且她這種方式讓很多年紀大的人和外地過來看病的覺得你是個騙子，后面好幾個人都還是去了窗口。
在B端產品中也有很多類似問題，用戶不知道有這個功能、也不知道這個功能怎么使用，特別是一些數據類產品，專業性比較強。產品、技術都認為用戶和他們一樣都懂，實際上并不是，這個時候你需要提供一些邀請，引導用戶進行使用。
邀請就是引導用戶進行操作前的提醒和暗示，通常包括實時的提示信息和預期功能，以表明在當前界面或下個界面可以做什么，這是成功的交互式界面關鍵所在。
例如：飛書-我的空間，當鼠標停留在可編輯區域上時，就會實時地顯示邀請（復選框），這個例子的缺點是鼠標如果不處于相應區域上，就不會顯示邀請。
另一種方案是任何時候都顯示邀請，例如：石墨文檔-我的桌面，復選框一直顯示。
靜態邀請就是通過直接在頁面上給出交互提示，可以讓用戶隨時看到期望的界面功能。
靜態邀請主要有兩種模式：引導操作邀請、漫游探索邀請。
01 步驟引導
例如：華為云HECS服務器產品就給出1、2、3操作步驟
引導操作會占據頁面較大的空間，同時也會吸引用戶的眼球。所以在設計時需要思考一下，你希望引導用戶執行什么操作，用戶是否可以多次查看，這樣有利于設計出明晰的頁面和信息層。
02 白板引導
另一種引導操作邀請叫白板式引導。
意思很明確：現在只有一個空白頁面，需要引導用戶創建內容。
利用空白區域“變廢為寶”，如何對該區域應有的功能給出提示，是誘導用戶創建內容（填補空白）的有效方式。
與引導操作邀請關系密切的是漫游探索邀請。假設你重新設計了某個頁面并添加了一組全新的功能，怎樣才能保證用戶恰當地使用新頁面，同時發現新添加的功能呢？漫游邀請是向用戶介紹新功能最好的方法。
最佳實踐：
靜態邀請適合提示用戶當前界面中包含什么功能。然而，許多調查試驗表明，用戶經常不會閱讀指導說明性的文字。而在用戶交互過程中，在他們需要的時候提供邀請則是一種不錯的方式。動態邀請就是在用戶交互過程中的某個點上吸引用戶，并引導他們繼續下一步操作。
吸引用戶的一種方式是通過鼠標懸停來顯示邀請
例如：飛書消息列表鼠標移入后， 背景變化的同時會有一個“勾”圖標來吸引用戶，鼠標移入上去后提示可以點擊完成，點擊后消息移除列表。
最佳實踐
唐納德·諾曼將這個術語引入到設計領域。最經典的例子是門把手，門把手的預期功能是可以抓握、扭轉或按壓。屏幕元素可感知的預期功能沒有物理屬性，不過，由于習慣、術語、圖形及一致性等原因，用戶能夠在某種程度上感覺到他們可以操作這些元素。
例如：第一張圖飛書文檔sheet頁“加號”圖標與第二張圖“三個點”圖標，就是一種預期功能邀請。用戶沒觸發之前就能猜到觸發后會是什么效果。
預期功能邀請之所以有效，是因為利用人們已知的習慣與認知引入交互，從而讓用戶順利完成一連串操作。
最佳實踐
設計邀請時怎么才能猜測用戶的想法，也是一項重要挑戰。如果用戶下一步可能會執行多種操作，而事實上又不可能準確判斷用戶想法，那么面臨的困難就會比想象的大很多。
在google sketchup （ 3D）繪圖工具中，當鼠標點擊某個點后，進行第二個點連接時，會有多種可能性，這個時候系統也不確定用戶會怎樣連接，但會給出對應的提示，比如：端點、中點、背面、側面等點位來輔助用戶進行連接。
例如：這種工作流場景個人覺得也算是一種，點擊“加號”右側會滑出面板，給出你可以添加的動作。
這種在交互期間以可見方式向用戶表明系統推斷出的用戶想法被稱為推論邀請。
圖片類型的更多邀請，例如：站酷相關推薦
文字更多邀請，例如：QQ郵箱右側最近聯系人
精心設計的應用能夠通過邀請體現出各自的細微差別，無論是靜態還是動態，都是引導用戶順利進入下一個交互層次的有效方法。
謝謝觀看！
作者：夜鶯YEAH；公眾號：夜鶯B端UX設計
本文由 @夜鶯YEAH 原創發布于人人都是產品經理，未經作者許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
在視頻播放器中，合理的手勢交互設計可以幫助用戶提升操作上的便捷性，從而實現更快捷的觸達。那么如果想在已有的手勢交互上實現設計升級，產品或設計一側可以怎么做？本篇文章里，作者針對手勢交互優化一事進行了解讀，一起來看。
視頻播放器中承載著極其豐富的內容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設計不但可為界面“減負”，還可幫助用戶更快捷觸達功能、提升操控便捷性。
視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知，如「單擊 →暫?！?、「雙擊→點贊」、「長按→快進」、「橫滑→導航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規通用手勢認知的基礎上，進一步對視頻場景中的手勢交互進行擴容升級？這也是我們接下來在手勢進階交互上的重點探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。
「組合手勢」是基于常規手勢的組合擴展，其通常由兩種或兩種以上的常規基礎手勢所構成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規手勢為例，其觸發機制一般可分為兩個階段：step1交互信號→step2執行任務，即用戶通過某一基礎手勢發出交互信號，系統收到信號確認后便可立即執行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現有常規手勢兩階段觸發機制的基礎上，嘗試引入「意圖識別」環節，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發一般可分為三個階段：step1交互信號→step2意圖識別→step3執行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。
由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口，因此，其差異化創新具有較大設計靈活度，尤其需根據具體的使用場景進行綜合考量。
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。
通過對競品進行調研，我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型， 分別為：長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經過和業務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產生滑選行為便松手，則松手后依然可通過點選的方式觸發對應播控功能項。
3）易用性打磨
差異化的創新設計形式在前期總會面臨質疑和挑戰，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優化。
我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發現仍有部分易用性細節可進一步打磨優化。
① 擴展觸發熱區
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發熱區，屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外，其它大面積區域熱區均可支持長按觸發快捷菜單，以降低觸發難度、提升易用性。
② 支持跟手觸發
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
③ 實時提示及響應反饋
靈活判斷當前手勢觸控狀態（如滑入選擇 / 松手觸發），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發機制。
以AB實驗對本次設計方案進行定量測試驗證：
小流量實驗上線后，經過近半個月的觀察，大盤指標穩定、播放完成率等滿意度指標穩步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發訴求。
「實驗組」的“快進”雖多了一步觸發步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高，通過滑選觸發“快進”的操作習慣也快速被培養起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
手勢交互是用戶在現實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口，隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續性。
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
作者：百度APP用戶體驗
來源公眾號：百度MEUX（ID：baidumeux），百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。
本文由人人都是產品經理合作媒體 @百度MEUX 授權發布，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
按鈕是產品中十分常見的交互元素之一，好的按鈕設計可以很大程度地提升用戶體驗。那么，怎么打造出符合用戶需求、深受用戶喜愛的優秀按鈕？這篇文章里，作者對按鈕UX設計進行了拆解分析，一起來看一下。
在數字產品中，按鈕是最常用的交互元素之一。一個好的按鈕設計可以提高用戶體驗和產品的使用率。
本文將探討一些關于按鈕UX設計的方法，包括明確按鈕功能、選擇合適的顏色、確定按鈕大小、添加標簽和描述、考慮交互方式、測試和優化等。
通過綜合考慮這些因素，我們可以打造出符合用戶需求的優秀按鈕，提升產品的用戶體驗和競爭力。
按鈕是一種用戶界面元素，用于觸發特定的操作或行為。
它可以是文本、圖像或交互式元素，通常位于頁面的底部或頂部，以便于用戶快速訪問。
根據不同的用途和設計風格，按鈕可以分為多種類型和分類，例如：
以上僅是一些常見的按鈕類型和分類，實際上還有很多其他的類型和分類。在設計按鈕時，需要根據具體的場景和目的選擇合適的類型和分類，并結合用戶體驗和產品需求進行優化。
按鈕的位置和大小對于用戶體驗和產品可用性非常重要。一般來說，按鈕應該位于用戶視線的中心位置，以便于用戶快速訪問。同時，按鈕的大小也應該適中，不要過大或過小，以免影響用戶的操作。
在實際設計中，可以通過以下幾種方式來確定按鈕的位置和大?。?/p>
除了位置和大小之外，按鈕的布局方式和排版規則也非常重要。合理的布局方式和排版規則可以提高用戶的使用體驗和產品的可用性。以下是一些常見的按鈕布局方式和排版規則：
按鈕的顏色對于用戶體驗和產品可用性非常重要。一般來說，按鈕的顏色應該與產品的品牌色或主題色相匹配，以便于用戶識別和記憶。同時，按鈕的顏色也應該具有明顯的對比度，以便于用戶在不同的背景下快速找到目標按鈕。
以下是一些常見的按鈕顏色選擇原則：
除了顏色之外，按鈕的樣式設計也是非常重要的。合理的樣式設計可以提高用戶的使用體驗和產品的可用性。
以下是一些常見的按鈕樣式設計要點：
按鈕文字的設計對于用戶體驗和產品可用性非常重要。一般來說，按鈕文字應該簡潔明了、易于理解和記憶，同時要符合產品的品牌形象和主題風格。
以下是一些常見的按鈕文字設計原則：
除了文字之外，按鈕標簽也是非常重要的。合理的標簽設計可以提高用戶的使用體驗和產品的可用性。
以下是一些常見的按鈕標簽設計要點：
按鈕的交互設計對于用戶體驗和產品可用性非常重要。合理的點擊效果和反饋機制可以提高用戶的使用體驗和產品的可用性。
以下是一些常見的按鈕點擊效果和反饋機制：
除了點擊效果之外，按鈕的動畫效果和過渡效果也可以提高用戶的使用體驗和產品的可用性。
以下是一些常見的按鈕動畫效果和過渡效果：
按鈕的測試和優化對于提高產品的用戶體驗和可用性非常重要。合理的測試和優化策略可以發現并解決產品中存在的問題，提高產品的品質和用戶滿意度。
以下是一些常見的按鈕測試方法和流程：
除了測試之外，按鈕優化也是提高產品用戶體驗和可用性的重要手段。以下是一些常見的按鈕優化策略和技巧：
按鈕UX設計對于提高產品的用戶體驗和可用性非常重要。合理的按鈕設計可以增加用戶的參與度、趣味性和便利性，從而提高用戶對產品的滿意度和忠誠度。
在進行按鈕UX設計時，需要考慮按鈕的位置、大小、顏色、樣式、功能、反饋機制等多個方面，以確保產品能夠滿足用戶的需求和期望。同時，還需要進行測試和優化，發現并解決產品中存在的問題，提高產品的品質和用戶滿意度。因此，按鈕UX設計對于現代產品開發和用戶體驗設計都具有重要的意義和必要性。
本文由 @MO魚山寨 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
將大東西進行拆解為小的東西，逐步解決問題，解決了小問題，大問題也解決了，在產品設計中也是一樣。在面臨圓角直角的選擇時，我們來看看作者如何做選擇
在當今數字化時代，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
排序在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
交互規范有效地規定了產品如何與用戶進行交互的規則和標準，這篇文章里，作者便梳理了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
藍藍設計的小編 http://www.syprn.cn
