1、樹形選框和穿梭框的區別？

有同學問我：樹形選框和穿梭框有什么區別？

其實這兩種組件方案都可以解決 “處理多種選項” 的問題，兩者的不同點如下：

樹形選框

單一列表的樹形選框，其特點為：

1. 通常適用于選項少的場景，不需要頻繁上下滾動鼠標查看，選擇后的選項結果一目了然。

2. 在頁面中占的空間小，也可以放置在下拉菜單中使用。

3. 一般更強調關聯性和層級性。比如權限與角色之間的關聯；角色與角色之間的上下級關系和權限包含關系。

穿梭框

雙列列表的穿梭框，其特點為：

1. 用直觀的方式在兩欄中移動元素，完成選擇行為。一列為源列表，一列最終被構建的項目列表，用戶可以看到兩個列表中的項目并進行操作，“數據源” 和 “結果” 清晰可見。

2. 占用更多空間，可以展示選項的更多信息，也可以包含更多結構，但左右兩列的選項結構須保持一致。

3. 一般強調權限是用于 “給予” 而不是 “復制” ，比如可以用于描述：一個權限從 A 手中轉到 B 手中，B 擁有權限的同時，A 不再具備權限。

大家可以對應業務場景，選擇更適合的組件。

2、按鈕的狀態設計

有同學對我說，他看到有的平臺按鈕的狀態分為鼠標 “懸停”、“點擊” 和 “按下” 三個樣式；有的平臺的按鈕 “點擊” 和 “按下” 的狀態一致。所以按鈕的狀態是根據什么來做定義的呢？是不是越全面越好呢？

1. 按鈕狀態的設計理念

其實關于按鈕的狀態分類，在能夠給用戶基本操作反饋的前提下，并沒有絕對的好壞之分。平臺之間出現這些差別的原因是由設計系統的設計理念和風格來決定。

舉個例子，下圖是一個比較夸張的案例：某個組件系統的設計理念是【盡可能模仿真實世界中的交互狀態】，圖中按鈕模仿的就是真實世界中的物理按鈕反饋狀態，但由于頁面上的二維世界不具備三維世界中的“海拔/高度”的概念，所以更多是通過改變或增加顏色、動效、投影等，對按鈕進行“高度”的體現。

對于真實世界的按鈕，有一些關鍵的大按鈕，在按下去之后會有一種 “咔嗒” 的碰觸感，意在告訴用戶你已經成功按下了按鈕，這對應到二維世界，就是圖中按鈕的“點擊“的效果。

而物理世界的按鈕在按完之后雖然會彈回到原位，但很有可能是慢慢恢復到原位，也很有可能是不會回到 100% 的原位，比原位稍微矮一些，所以圖中點擊后的狀態相比于默認狀態就缺少了按鈕下邊緣的厚度感，或者是顏色變得更淺 / 更深，以此來體現差異。

以上所說的組件設計風格，是一種擬真的設計風格。也有一些公司的設計語言，可能是扁平化，追求極簡主義，所以會省略這當中的過程，只傳達給用戶最干脆、直接的反饋。

因此組件的狀態效果，在能夠給用戶明確基本操作反饋的前提下，并不是 “對錯” 或 “好壞” 的問題，而是由根據產品定位、功能特性和產品用戶的行為偏好等因素來定的設計理念所決定的。

2. 組件狀態是不是越全面越好？

這個問題最重要的判斷標準是：業務 / 產品是否需要。在業務組件庫搭建的初期，一定是以業務為主，“從業務中來，到業務中去” 。當你的業務中對于同一個組件有大、中、小的尺寸需求時，你再做規定也并不晚。這樣的好處是：

• 做好的尺寸規定直接運用到業務中，有現成的檢驗場景；
• 不至于白費功夫，做了一大堆的尺寸分類和說明但無處應用；
• 盡可能減少設計師在查找和使用組件時的多種選項干擾。

另外要注意，如果做了多種尺寸，你需要詳細的規范每一種尺寸可以使用的場景和注意事項，避免誤用和混用。

很多時候并不是內容越全越好。“全” 但不好用，也會帶來新的問題。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》工作經驗｜ B 端產品組件設計細節及經驗分享（六）

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

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

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

最徹底改稿開始了！

看到這張圖時，最吸引眼球的恐怕并不是產品而是鮮艷的色彩。

吸取顏色后發現三者色系都非常飽和，影響到了視覺對于主次的著重點。

配色上的占比弱化了產品無法被直觀的表達，甚至體現不出產品本身的品質。

產品在一張畫面中，除了解決信息內容的編排外，還需要幫助這個產品烘托出整體的氛圍感，就像如今都需要美化包裝的時代中，酒香不怕巷子深恐怕已經很難再去吸引住客戶的目光。

我們分別以藝術、商業、極簡三種需求方向來對這次的設計進行三次改稿，記得收藏關注起來。

偏抽象化的圓形表現出燈在聚焦光源的過程，符合具有藝術造型的燈飾所傳達的美學。

常規的文字編排貌似影響了所要傳達的藝術魅力

換！

用畫面四周塑造一個外邊框，沿著邊框放置文字編排，可最大化的提升內部視覺空間，將著重點鎖定在產品上。

嫌背景太簡單？那填個色吧，看起來刺眼怎么辦？

那就弱化背景的色彩，減少對視覺與產品的影響。

最常用的編排構建原理，可以有序建立出視覺和信息的層級。

放大文字占滿上下的版面，產品放置在中心點，利用色塊分割出主次關系。

作為商業性案例，增加光感是必不可少的，把燈打開以提升畫面的質感氛圍。

放置文字信息時，想必大多數甲方對金色的執念已經深入骨髓，那就換成金色，以滿足客戶的同時，也解決了文字主題的醒目。

再來對比下畫面氛圍對商業性設計的重要性。

一個純底，一次簡單的圖文編排，沿著視線引導下的信息切入產品，點亮了簡單卻有品質的生活。

想到粉絲說老板喜歡有撞色的設計，于是在上方增加一個互補的綠色。

利用冷暖與色彩的強弱關系制造出引導視線的作用。

回到原圖，同樣也是冷暖的撞色，但產品是在中心，而不是在左右兩側，缺少明顯的強弱關系會容易干擾視線引導的方向。

最后來自粉絲的反饋！

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

作者：修先森

轉載請注明：學UI網》畫面很空怎么辦？最徹底的一次改稿案例

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

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

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

尤其是一些體驗細節，比我平時用的騰訊收集表做得更到位些。

感覺 Google 的設計師，確實是沒少下功夫的。

什么是Google Form

國內通常網盤和在線文檔是分開的兩款產品，例如騰訊的微云和騰訊文檔，就是不同的兩個產品。

Google Drive 這個東西，相當于把在線文檔和網盤整合到一起了，這就和國內的產品很不一樣了。

而 Google Form 就是 Google Drive 里面的問卷功能。

這次我拿騰訊收集表和 Google Form 這兩款產品對比，就是因為它們定位比較相似：

• 都不是專業的問卷工具，而是在線文檔工具中的問卷功能

相比之下，我覺得 Google Form 的體驗細節做得更加到位，很多地方值得學習，尤其是這五點：

選項粘貼

一般做問卷，我們都會先弄一個文檔，把內容確定了再往問卷工具里填。

所以填寫問卷內容時，通常不是通過輸入，而是通過粘貼。

往騰訊收集表里粘貼選擇題內容，必須一條一條來，有多少個選項就貼多少次，選項多了會感覺自己在工廠做流水線工作。

而 Google Form 可以把所有選項都一起粘貼，識別到換行就會自動貼到下一個選項中，方便多了。

我覺得還可以優化一下的點是，希望能夠讓我把問題和選項都一起貼，這個目前 Google Form 還做不到。

切換問題類型

Google Form 創建一個問題之后，可以很方便地切換問題類型。

這樣樣式挺好的，有時可以減少一些操作步驟。

快速創建問題

就是因為 Google Form 的問題類型可以快速切換，所以創建問題就很快速了。

只有一個插入按鈕，點擊后立即插入一個跟上次所選類型相同的問題。如果想要換個問題類型，再點下拉框切換就行，交互很流暢。

一般創建問卷就是要盡量使用連續的同類問題，所以這種方式挺好的。

而騰訊收集表因為不能切換問題類型，所以創建起來就比較麻煩了，還分了兩個入口。

第一個是左側的工具欄，剛開始用還真不知道是用來創建問題的，可能因為標題上的「添加問題」太不起眼了吧。

第二個入口時，當前編輯的問題下，會出現一個「插入問題」的按鈕。

但是點擊之后需要在菜單選擇一下，這就沒那么方便了誒。

問題順序拖動

Google Form 和騰訊收集表在創建了問題之后，都能拖動順序，但是可拖區域不同。

Google Form 的可拖區域在頂部一條，而騰訊收集表的可拖區域在側邊一條。

按下拖動時，為了避免太長不方便，都會收縮變短，于是問題就來了！

騰訊收集表因為可拖區域在左側，所以我點擊左側偏下的位置也能拖，但這次問題收縮，我點的地方就跑出問題區域了，于是拖動就出問題了。

Google Form 因為可拖區域在頂部，所以不會出現這個 bug。

但是，Google Form 往問題里插入圖片后，問題長度就收縮不起來了，上下拖動可不就不方便了？

好在，這個問題并沒有影響拖動。

Tab 鍵

對于很多 PC 老手來說，Tab 鍵是個很方便的工具。

有了它，填寫再多表單都不需要拿鼠標了，點一下就能自動把焦點從一個輸入框移動到下一個。

而 Google Form 把 Tab 鍵運用到位，基本上界面上的交互功能都能切換到。

騰訊收集表里也能用 Tab 鍵，不過覆蓋范圍就少了一些，不能刪除、添加選項或者添加“其它”。

總結

其實要比視覺風格，騰訊文檔可能更加符合國內審美。

如果要比功能，Google Form……也還是比騰訊收集表強大，可以：生成圖表、給問題和選項插入配圖、插入視頻、區分問題模塊……

但是騰訊文檔也有自己的特色，例如：驗證手機號、填寫后接收微信提示、更多模板選擇……

然而在用戶體驗上，不得不承認國外大廠有獨到之處，值得我們學習。

之前對 Youtube 和 iPhone 的體驗細節分析，也印證了這一點：

《油管這些體驗細節，甩出競品好幾條街》

《iPhone 這些體驗細節太感人，換安卓后不習慣了》

希望國內大廠多多努力，讓我們用戶使用產品更加方便吧～

原文地址：體驗進階（公眾號）

作者：設計師ZoeYZ

轉載請注明：學UI網》什么叫細節控？看看Google問卷的設計吧

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

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

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

 一  關于手勢交互 

手勢交互的普及，提升了人與設備之間的溝通體驗，降低了用戶的操作門檻。手機在觸屏時代之前多為按鍵模式，手勢相對簡單，提供的服務也比較單一。蘋果公司在 2007 年推出具有高分辨率、多點觸控功能的 iPhone，確立了觸摸屏的標準，觸屏手機時代席卷而來。而手勢交互的多樣化也開啟了新篇章，被逐步完善和運用到智能手機中，給用戶帶來了不一樣的人機互動體驗。

觸屏手機的手勢交互體驗被逐步運用到各類 APP 中，給用戶帶來了更為便捷的操作體驗。通過單擊、滑動、長按等操作，可以將原本繁瑣的功能操作變得更為簡化，隨著去 Home 鍵的全屏手機出現，更是依托于手勢交互改變了用戶對于手機的使用習慣。

手勢交互將會在未來成為 APP 設計中的重要交互環節，作為產品設計師來說要充分的利用其優勢，改變和培養用戶的習慣。本文也將作為拋磚引玉，為大家開啟關于手勢交互的探索方向，希望可以帶給大家更多幫助。

 二  手勢交互的形式 

隨著觸屏技術的不斷成熟，手勢交互無論是靈敏度還是互動形式都得到了很大的改變，不再只局限于單擊、滑動等常規形式，更為豐富多樣的手勢操作正在逐步被挖掘。

2.1、單指手勢交互

單指手勢交互是最為普及的形式，也是用戶最先學習并掌握的手勢交互。從最初的按鍵手機開始，我們便已經適應通過點擊來完成對于手機的使用。

單指手勢交互主要有：單擊、雙擊、多擊、長按、滑動、拖動等。針對觸屏靈敏度的不同，操作的力度也被應用到不同的交互觸發上，后面將會重點通過案例分析單手指手勢交互。

2.2、雙指手勢交互

隨著觸屏手機靈敏度的提升，單指手勢操作已經無法滿足更多復雜的交互，通過雙指的輔助可以完成更為復雜的交互動作。

雙指手勢交互是通過兩個手指的配合進行輔助，例如通過雙指代表鼠標的左鍵和右鍵，替代鼠標的功能；也可以進行配合實現畫面縮放；還有一些產品賦予其別的功能，比如網易云音樂評論區針對單條評論雙指上滑，可以收到“抱抱”的情感化設計。

2.3、多指手勢交互

當單指和雙指被充分探索之后，為了帶來手勢交互的深入挖掘，會面向多指手勢交互進行探索。

目前針對多指交互的設計相對較少，比如可以通過手指開合來進行桌面窗口的切換操作。一些樂器類產品，可以通過單手或者雙手進行模擬操作。相信這將會成為繼續探索的方向，滿足用戶對于繁瑣功能的需求。

2.4、隔空手勢交互

隔空手勢的交互是在一定的距離控制范圍內，隔空對手機進行手勢操作。比如隔空翻頁、上下滑動和隔空截屏等基礎操作，滿足生活中對簡單功能的操作需求。

設想一下自己在吃東西的時候，再也不用擔心手觸碰屏幕的衛生問題，可以利用隔空手勢快速調節比如暫停、靜音、進度調節、音量調節、內容切換等。讓用戶解放雙手，享受智能時代帶來的使用體驗。

2.5、小結

手勢交互的形式會隨著手機硬件的強大和軟件體驗的升級得到更多應用，帶給用戶操作體驗的便捷和快捷。下面將會針對單指手勢交互進行分析，探索現有的優秀案例。

 三  單指手勢交互 

手勢交互的形式豐富多樣，本期將會重點分析單指手勢交互，通過優秀的案例解析不一樣的設計解決方案。

3.1、單擊

單擊是手勢交互中最基礎的操作，是最早被應用的交互形式，從按鍵手機到觸屏手機都離不開單擊手勢。在 APP 設計中單擊可以作為選中和觸發進行頁面跳轉，也有配合力度的不同表現按壓的操作，喚起不同的交互動作。

在功能應用上面，單擊可以作為功能選項完成單選或者多選操作；在短視頻平臺也可以作為播放和暫停的切換；可以通過單擊激活功能，比如點贊、關注、喜歡等。

3.2、雙擊

在單擊容易誤操作或者需要多次確認的情況下，雙擊是最適合的選擇。比如短視頻的播放暫停通過單擊完成，而影視播放平臺則是通過雙擊進行切換。雙擊相當于二次確認，可以避免單擊的誤操作。

如果當單擊已被功能占有，也會采用雙擊來替代同等重要的功能。比如短視頻單擊為播放/暫停，而雙擊則是激活愛心圖標，實現喜歡短視頻的操作。在進行產品交互設計的時候，可以更多的考慮手勢交互來替代目標功能的尋找，讓操作變得更便利。

3.3、多擊

多擊是點擊次數在三次或者以上，通常用于較為復雜的操作，或者喚起更加隱藏的功能。比如蘋果手機可以通過三擊打開輔助觸控，再次三擊進行關閉。

如果當單擊和雙擊手勢交互已經在當前頁面被占用，可以考慮多擊操作，雖然學習成本增加，但是通過新手引導的學習可以逐步培養用戶習慣。習慣培養之后將會提高用戶操作快捷度，也能提高隱藏功能的使用率。

3.4、長按

單擊屬于高觸發型，容易被誤操作，而長按需要配合一定的時間，適合需要用戶確認后的功能激活。當我們需要激活一些隱藏功能或者重要操作的時候可以使用長按，比如蘋果手機長按屏幕可以激活應用管理；我們在編輯文本的時候長按可以實現選擇、全選、復制、剪切、粘貼等輔助操作。

長按可以輔助當前操作，而不會干擾當前正在進行的操作。作為輔助性質和復雜功能激活都是非常不錯的選擇，也能作為快速預覽，長按激活松開退出，在 APP 設計場景中應用較為廣泛。

3.5、滑動

滑動是最基礎的手勢交互之一，在 APP 設計中十分常見，很多功能操作都離不開滑動這一動態操作。

可以通過上下滑動翻閱全屏連貫性內容；左右滑動可以對內容卡片、輪播 Banner、功能模塊切換和頁面轉場等進行操作；滑動還能在屏幕中進行創作，比如一些繪畫類 APP 就是通過手指滑動進行創作的；除了上下左右滑動以外，斜角滑動也被充分利用，可以在操作當前 APP 的時候激活手機系統的部分功能操作?；瑒邮鞘謩萁换サ幕A操作，可以在滑動的方向上面做更多延伸，滿足更多功能的激活。

3.6、拖動

在滑動的基礎上增加一定的壓力，就會形成拖動的手勢交互。拖動的操作可以對一些功能進行位移，也能對一些浮層元素進行位置的變動。也有一些操作上面拖動和滑動是類似的，比如進度類功能的操作，在沒有壓力的時候也能通過滑動改變控件的位置，有些是微弱壓力就能實現拖動。

一些產品首頁功能可以實現自定義，在進行自定義功能編輯的時候通常就是在激活后進行拖動實現位置的改變。拖動由于需要兩個動作的結合，可以有效的預防誤操作。

單指手勢交互在 APP 設計中應用非常普遍，隨著用戶習慣的培養，相信還會出現更便捷的操作和更多手勢交互的輔助。加強優秀案例的積累和分析，將有助于我們進一步掌握更多的玩法，下面將會為大家分享一些優秀案例。

 四  線上案例分析 

基于優秀案例之上才能不斷激發靈感，探索出更多的設計解決方案。下面分享一些 APP 的上線案例，希望這些案例可以輔助大家進行理解，從單擊、雙擊、多擊、長按、滑動、拖動進行案例呈現。

4.1、單擊進入全屏模式

#單擊

雖然手機逐步進入大屏時代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖 APP 在操作后會有彈窗式的內容呈現，用戶可以通過單擊屏幕退出彈窗，再次單擊則會進一步隱藏基礎控件，進入全屏模式。通過單擊的手勢交互來簡化內容結構，降低干擾帶給用戶更集中的操作體驗。

4.2、雙擊頭像“拍一拍”

#雙擊

在微信群聊或者與好友聊天的時候，為了重點提示好友，可以通過雙擊好友頭像進行“拍一拍”，晃動的頭像和震動的提示加強好友對信息的關注度。

結合雙擊的手勢交互，在不改變當前布局的情況下加強社交屬性，增強好友間的互動提示，通過手勢豐富了社交體驗。

4.3、雙擊最大化圖片預覽

#雙擊

在圖片預覽的時候，可以通過雙擊最大化圖片，方便對細節的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊應用、電商產品、微信等社交產品中都有涉足，只要是全屏模式下預覽圖片，都可以通過該手勢交互完成縮放。

雙指縮放屬于慢動作，而雙擊最大化屬于快速一步到位，適合查看圖片細節等操作。通常是雙擊最大化，再次雙擊恢復正常。

4.4、三擊激活“輔助觸控”

#多擊

單擊和雙擊的手勢交互較為常見，而三擊手勢應用較少，有待深入探索。目前來說，帶有 Home 鍵的蘋果系列手機，可以通過三擊 Home 鍵激活“輔助觸控”快捷鍵，再次三擊隱藏快捷鍵。

通過三擊可以快速激活功能快捷鍵，減少了多個步驟路徑，也不會導致用戶誤操作。

4.5、長按快速預覽精彩片段

#長按

通過愛奇藝 APP 刷劇的時候，在搜尋影視作品的過程中，可以通過長按作品封面進行快速預覽，播放精彩片段來判斷是否值得追劇。

通過長按激活彈窗，可以在不改變當前布局結構的前提下，進行更多功能操作。適合針對隱藏式功能，也能避免誤操作。

4.6、長按結合位置區域變化

#長按

很多影視類產品在全屏播放視頻時，除了通過拖動進度條進行快進/倒退之外，也能通過長按屏幕進行快進。

而騰訊視頻 APP 與之不同的是結合了屏幕區域，在全屏狀態下，左側區域長按快退，右側區域長按快進。長按結合位置區域變化功能狀態，深入了手勢交互的操作，也能帶來不一樣的操作體驗。

4.7、長按滑動實現多選

#長按

在百度網盤 APP 中可以通過單擊選擇控件對文件進行選擇操作，也可以通過長按整個區域實現選中，長按過程中可以結合滑動實現多選。

長按滑動進行多選針對文件較多的場景非常便利，也不用擔心誤操作。在一些相冊應用中點擊選擇按鈕之后也可以通過滑動實現多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認的作用，長按滑動操作相對更簡單。

4.8、長按與時間跨度的結合

#長按

長按激活功能比較常見，但是結合時間長短的變化相對較少。蘋果手機桌面的應用管理，在長按應用圖標時會彈窗展示功能列表，繼續維持長按則會進入應用管理，隨著長按的時間跨度不一樣激活不同功能需求。

在手勢交互設計過程中，除了通過動作的不同激活功能操作之外，也可以結合時間跨度、力度、位置等進行組合交互，來滿足多重功能操作的需求。

4.9、可以移動的紅包

#滑動

通過紅包吸引用戶進而轉化是很多電商產品的玩法，在必要 APP 中紅包通過倒計時的形式營造出緊迫感，促使用戶立即使用，進而提高紅包的使用率。紅包懸浮在左側會擋住分類的展示，為了解決這個問題紅包借助滑動手勢可以移動，用戶可以在左側導航欄到底部標簽欄之間任意滑動，方便預覽分類。

單指滑動是常用的手勢交互，精準定位元素之后可以拖動使其改變位置，不僅方便內容的展示也不會造成底層內容的閱讀干擾。

4.10、通過左滑程度控制刪除

#滑動

左滑動是產品設計中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊，消息列表左滑可以進行置頂和刪除，如果繼續往左側滑動則會實現自動刪除，以此來替代點擊刪除圖標完成刪除操作的步驟。通過左滑配合點擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對一些消息較多的產品，可以方便用戶快速清理未讀消息。

4.11、列表式設計中的左右滑動交互

#滑動

在列表式設計中，比較隱藏式的交互就是左滑和右滑，通常左滑刪除較為常見。而大部分的列表設計中都沒有探索過右滑交互，除非是右滑返回或者退出等操作。

在小宇宙 App 的訂閱欄目中，對于關注的內容列表左滑為刪除（不喜歡），右滑則是添加到播放列表中。充分運用了左右滑動的手勢交互，不僅操作便利也帶給用戶不一樣的使用體驗。

4.12、下拉程度影響功能變化

#滑動

手勢下滑形成下拉刷新已經成為產品設計中的基礎操作，為了進一步延展功能，很多產品在下拉過程中根據下拉的程度判斷是刷新還是進入二層樓（活動或者功能模塊）。

通常是通過控制下拉的距離來做判斷，會提示“松開刷新”的字樣，如果繼續下拉則會激活功能變化。進入二級功能界面或者二層樓活動界面，深度的功能開發帶給用戶更多的選擇性。

4.13、拖動完成自定義設置

#拖動

隨著用戶對個性化的需求升級，很多產品都開放了部分常用功能模塊的自定義設置。比如網易云音樂 APP 的底部導航欄在設置環節中，便可通過拖動完成自定義設置。

利用壓力結合滑動可以實現拖動手勢交互，對于一些需要用戶謹慎操作的功能比較適合，也能有效防止誤操作。

4.14、拖動疊加實現應用建組

#拖動

當用戶下載的應用很多的時候，通常都會通過建組管理手機桌面上的各類應用軟件?？梢酝ㄟ^拖動應用疊加到其他應用軟件上實現自動建組，建組、進組、移出等操作均可通過拖動手勢完成，操作非常便利。

拖動手勢交互針對一些防止誤操作的功能比較適合，相當于二次確認的過程。

4.15、拖動交互自定義標簽導航

#拖動

阿里云盤 APP 底部標簽欄的設計去掉了傳統的圖標+文字形式，而直接以純文本形式設計功能模塊。采用了左右可滑動的交互形式，方便展示更多功能入口。

右側設計了全部功能的入口，點擊之后以圖標+文字的形式展示所有功能模塊，圖標設計也是非常的精致美觀。用戶也可以通過編輯來自定義設置底部導航的排序，通過拖動功能列表的方式實現自定義設置。方便根據用戶自己的使用習慣來進行自定義，提高用戶的使用體驗。

 五  總結 

手勢交互在 APP 設計中的普及帶給用戶更便捷的使用體驗，避免過多內容的展示所帶來的使用干擾。通過手勢交互前期的用戶習慣培養，一旦培養完成對于用戶來說是非常友好的操作之旅。

本期主要為大家分享的是單指手勢交互，后續將會為大家繼續延伸更多關于手勢交互的內容，希望本期探索的方向可以帶給你更多的幫助。

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

作者：黑馬青年

轉載請注明：學UI網》探索APP設計的手勢交互（上）

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

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

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

一、 場景的定義

關于“場景”，不同的出處給出的解釋也不盡相同，并沒有給出一個明確的定義。

• 在《交互設計精髓4》書籍描述“場景”為用戶如何使用產品實現具體目標的故事
• 梁老師在《產品思維三十講》中將“場景”分為：場、景。場為“時間”“空間”，景為“情景”“交互”
• 在《2020UCAN》中四場關于場景的案例，將案例解釋為：人+場+事+物
• 百科定義“場景”是指戲劇、電影等藝術作品中的場面，泛指情景。

上面四種對場景的解釋，涵蓋的對象和包含的要素各不相同，那我們如何理解場景呢？如何定義場景？

場景常用在產品迭代中的產品需求階段和設計階段，作為產品從產生到設計的依據，2個階段的側重點不同，需求階段（明確用戶是誰，需求是什么，做什么事），設計階段（基于某目標，使用產品的情況）。場景是需求和行動的具現化描述，場景分別對應階段分為：用戶需求場景和用戶使用場景。

場景類別1-用戶需求場景

用戶需求場景是用戶需求的擴展細化，補充描述需求涉及的多個關鍵要素。若只有簡單描述需求的情況下，對產品的指導設計容易出現偏差。

這里舉個例子：“周四下半年，小波回家出地鐵口（場景），想吃菠蘿（需求），看到有個賣菠蘿的攤位，上去看了看，都是沒有削皮的菠蘿（產品），地鐵口人流量大，小波不想等沒買菠蘿就走了?！边@案例從需求來說，沒削皮的菠蘿已對焦，但因為環境影響了小波不購買的行為。若菠蘿的已經削皮，小波就已經買了帶回家好好品嘗?；诖嗽龠M行延伸，若場景放在逛街的場景中，已經切塊菠蘿就是匹配的，隨走隨吃。若場景放在水果店里，沒削皮的菠蘿是合理的，保證了新鮮度安全性品質，甚至還可以多種菠蘿挑選，因為有時間。從上面來看，同一個需求，因為場景不同，其菠蘿的形態也不同。場景是需求的細化，會影響到最終產品的設計上。

需求場景：用戶+環境+需求+事件。在【某環境】下，【某用戶】做了【某事】來滿足【某需求】。用戶、需求、事件是核心要素，環境是影響要素，環境包含時間、空間。除了環境要素還包含用戶狀態。

場景類別2-用戶使用場景

用戶使用場景描述的是在需求場景的前提下，具體描述為了完成某任務，跟產品怎么交互的過程。其對產品的具體設計有較大影響。

這里舉個例子：以接電話（任務）的情況來看，手機未在使用狀態鎖屏下和手機正在使用中就是完成不同使用場景。在手機正在使用中（用戶狀態），考慮不被過度打擾，此時的電話提醒是小區域展示，接通、拒絕和收起操作都是直觀的操作。在鎖屏狀態下可以放在褲兜里（用戶狀態），考慮不被誤觸采用滑動解鎖，以及可以物理按鍵免打擾和拒絕（可以不看直接操作）。同一個任務在不同的狀態下，因因素的差別影響產品的設計。

使用場景：用戶+環境+目標+產品。在【某環境】下，【某用戶】跟【某產品】發生了交互，用來完成【某任務】。用戶、目標、產品是核心要素，環境是影響要素，環境包含時間、空間。除了環境要素還包含用戶狀態和承載產品的設備狀態。

場景關聯的概念

設計常用的工具有2個跟場景關聯，它們是用戶畫像、用戶故事。用戶畫像描述了用戶需求，用戶需求場景是用戶需求的延伸，用戶故事則是用戶需求場景的細化，一個場景可包含多個用戶故事。

• 用戶畫像：用戶特征+用戶需求
• 用戶故事：場景+產品+用戶操作，用戶故事基本等同于用戶使用場景

二、場景的價值

上一段描述2種類型的場景，場景不僅限于指導產品設計，還可以助力團隊協作等多個方面。以下通過需求分析、團隊協作、產品設計三塊來描述場景的價值。

需求分析

場景可以幫助挖掘需求的完整性、判讀需求是否準確及梳理需求優先級。

1. 【完整性】深刻理解產品需求，讓產品功能更全面，挖掘產品的新機會或者產品的新功能
2. 【準確性】讓需求分析準確，辨別需求真偽
3. 【優先級】考慮用戶如何使用產品，幫助理清強弱場景，幫助理清強弱需求

團隊協作

場景可以幫助團隊增強同理心、更好的理解需求及提升產品設計的參與度。

1. 【易理解】讓團隊對產品的理解更簡單、具體（對于理論以及長篇大論的需求文章來說，人們更能記住故事發生的場景，通過簡短但是詳盡的故事描述）
2. 【同理心】讓團隊進入用戶視角看產品設計，而不是產品單方面的猜測。
3. 【參與度】用戶場景是協作設計工具，期望所有項目利益相關者參與產品需求和設計的過程

產品設計

1. 【優化現有】突破用戶原有的解決方案：意即在當下的場景下，用戶可能會產生什么問題？用戶原有的解決方案是什么，我們是否有機會提供更好的解決方案呢（效率或者更好的體驗）？
2. 【新機會點】發現場景的連續性，發現行動中的不連續性。通過成組的動作進行預期：比如復制 – 粘貼；分享 – 朋友圈等；
3. 【精細設計】從面對所有人轉向用戶分層精細化設計，打造競爭優勢
4. 【產品歸納】場景具現化需求，可用場景去歸類相關的產品

三、場景的挖掘方法

如何獲取場景？2種類型場景因獲取信息的側重點不同。用戶需求場景側重需求及事件的描述，及描述事件相關聯的環境。用戶使用場景側重使用產品完成任務交互的過程。有兩種用戶調研方法適用：訪談法、觀察法：

訪談法

挖掘用戶需求場景，主要去挖掘未知的需求和當下滿足的需求是否有優化拓展空間，更適合提供一些開放性問題引導用戶給出更多信息，在用戶延伸出新信息再繼續往下深挖需求相關元素等。

• 您能描述下一天的工作流程嗎？
• 在流程中有沒有遇到其他場景？
• 您能具體描述下這個場景嗎？所在什么樣的環境
• ······

了解用戶使用場景，引導用戶具體描述任務完成的過程，再延伸其中遇到的問題點等。

• 您是怎么使用渲染的？
• 圖文編輯的流程是怎么樣的？
• ·······

觀察法

觀察法更容易觀測用戶使用場景，可以發現在訪談中很多忽略的細節。對于用戶需求場景，需要更長期的觀測，對觀測的行為進行記錄反推其需求。觀察法可以是完成中立的觀測，也可以是邊觀測邊適時的提問便于挖掘原因。甚至可以自己作為用戶參與進去。

四、場景化設計

什么是場景化設計？場景化設計是引入場景概念將簡單需求延伸拓展出更多延伸的決策因素來精細化產品設計，簡單講是將原粗放型設計轉向精細化設計，提升目標轉化、體驗等。場景要素影響的多少決定了場景化差異的空間，場景化設計的前提并不對整體目標的轉化造成負面影響。

場景最終落地到產品設計上，在一場景里并不是所有的要素都對產品起到影響作用，在設計前可篩選出對產品產生影響的要素，進行一一羅列。產品的3部分組成：功能、內容/信息、形態。場景要素最終影響其的變化。

場景要素：用戶、需求、事件、環境狀態、載體狀態、人物狀態

產品組成：形態、功能、內容

場景化設計最適用于O2O領域的設計，它會涉及豐富的空間、時間、天氣環境等影響因素，同樣的需求存在n多種不同場景情況。在我負責業務主要以web為主，日常場景更多是基于用戶需求的拓展。

產品設計與場景的關系

產品如何承載用戶需求場景？把場景和產品承載容器（可指單頁面）作為象限劃出4種類型區間。

• 產品理想的情況是單容器承載單個場景，單場景可以清晰傳達，產品幫助用戶專注完成當下需求場景下的任務。
• 非必要情況下，不要讓多容器承載單場景。就好比將一個衣柜的能力，直接拆開成多個房間，一個房間放外套、一個房間放褲子、一個房間放內衣等等，會讓使用變得極其麻煩。
• 單容器承載了多個場景，這時候需要去辨別場景之間是否有關聯，切忌不要把太多無關聯的場景一起傳達。如一個房間內包含了廁所、廚房、臥室、客廳，場景之間會相互打架。單容器多場景不合理情況下，不僅分散了用戶注意力，也更難讓用戶理解產品，且對于產品來說也會多出更多不必要的成本消耗。
• 多容器承載多場景近似于單容器承載單場景。

五、場景化應用案例

在上一篇文章《需求太碎？設計師如何在小業務中提煉價值》中有過產品場景的案例解析。是對一個小項目進行了新的需求場景挖掘，推動進行改版的過程，這里不再展開說明，有興趣的朋友可以去看一看。

個人實踐案例不能完全覆蓋場景化應用，另收集了一些直觀的場景案例展示如下。

核心要素的應用案例

1. 要素——用戶、需求

淘寶首頁男生女生看到的內容和功能都有差異人需求差異。

2. 要素——事件

京東購物車從原來的暫時放置商品延伸出更多關聯的場景，如：對比、收藏，圍繞場景產品設計

影響因素的應用案例

1. 時間——餓了么

根據不同的事件點推送不同的內容，晚上是夜宵，中午是午餐、早上是早餐、傍晚是晚餐

2. 地點——去哪兒旅游

根據不同的地點推送不同的內容

3. 人物狀態——手機接電話

手機接電話（景的差異，差異化交互形態），手機放褲兜走路中，手機正在使用中，2個場景手機進來。使用手機中（防止錯誤，更適合用戶體驗）

六、小結

場景是入門容易、普適性很強的應用工具，也是個人推崇的設計師入門必備技能點。在用戶需求上可以幫助挖掘新的機會點拓展產品的使用邊界。在設計上場景讓設計有據可依對產品設計更準確。在業務上可以通過場景的描述對業務所滿足的需求有更深入的理解，可以幫助理解許多功能之間的關系。在協作上給團隊提供溝通的基礎，容易達成共識。

以上，歡迎大家一起交流。

原文鏈接：酷家樂用戶體驗設計（公眾號）

作者：小波

轉載請注明：學UI網》設計入門必備萬金油-場景篇

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

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

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

設計協作的發展歷程

回顧生產方式的發展歷史，我們可以窺探到團隊協作的變化。青銅器時代是以人力為主的作坊式手工生產。到 18 世紀 60 年代的第一次工業革命，機器生產逐漸代替人力生產。再到一戰后，美國人福特（Henry Ford）和通用汽車的斯?。ˋlfred Solon），將歐洲人創造的技藝性生產方式改為流水線、大批量生產方式，使制造業發生革命性變化。

從發展歷程看出，不同時代基于生產目標，會發展出相應的生產工具和協作方式來解決團隊的生產效率和質量問題。

著眼當下，現代互聯網科技高速發展，軟件生產團隊隨之快速擴大。根據艾瑞網2021年《中國協同辦公市場研究報告》顯示，2020 年中國的協同市場增速達到 43.5%。市場上出現了數以萬計的協同產品希望解決團隊中的協作效率、項目管理等問題。

在產研協作流程中，和設計師關系更加密切的設計協作發展如何？

在這篇文章中，通過觀察設計工具的變化，我分別從生產創作、設計評審、資源管理三個維度來分析其發展歷程。

f

第一階段：通用單體工具 —— Photoshop / Adobe Illustrator

這個階段互聯網剛剛起步，出現了用于完成精細化圖像設計的工具。在 1990 年 2 月，Photoshop 的 1.0 版本正式發布。Photoshop 是一款位圖編輯軟件，主要處理以像素所構成的數字圖像。因其豐富強大的圖像編輯繪制功能，當時被廣泛應用于各行各業，如早期 PC 端網頁的 UI 設計、門戶網站運營圖設計、廣告海報設計、照片后期處理等。

當 Photoshop 和 Adobe Illustrator 被廣泛的應用時也暴露出明顯的體驗問題。如，設計師交付時需要手動標注和切圖。線下設計評審的方式，需要預定會議室、協調參會人時間，效率極低。還有一種常見評審場景，幾位同學圍著一位設計師的電腦屏幕發表意見。這樣雖然信息傳遞很直接，但也嚴重影響了設計師的工作體驗。

第一階段的創作、評審、管理資源的效率提升空間很大，隨著互聯網的發展上述問題影響范圍也隨之擴大。

2010 年后大而全的工具已經無法滿足設計生產需求，針對 UI 領域垂直化工具開始替代傳統設計工具，出現了細分垂直領域的設計工具 Sketch，Zeplin。

首先在生產創作方面，Sketch 相比 Photoshop 體量更小、占用內存更少、響應速度更快，這些特點讓設計師們逐漸從 Photoshop 切換到 Sketch。將 Sketch 創作的設計稿上傳到 Zeplin，可以省去手動標注切圖的工作，這對設計師生產力的釋放無疑是巨大的。不過，Zeplin 本地安裝的方式以及操作流暢度等問題，依然阻礙團隊協作效率的提升。

到第三階段，互聯網企業規模繼續擴大，去中心化的組織結構要求工具不再受平臺和系統限制，以 Figma、MasterGo 為標桿的在線多人實時協作工具應運而生。（下文以 MasterGo 為代表進行闡述。）

MasterGo 通過將工具云端化，把剛剛我們談到的生產創作、評審、資源管理融合。對于設計師而言，在線創作后只需要生成一個分享鏈接，團隊成員即可獲取到最新設計稿，節省之前反復修改上傳操作；不再需要手動標注切圖，這些功能對于設計生產力釋放無疑是巨大的。

同時，MasterGo 相比 Sketch 更輕量、響應更快，這也是其獲得更多設計師親睞的原因。對于團隊，設計評審不再是一件繁瑣耗時的工作，評審人可以根據自己的安排隨時在線評審，提出修改意見。

在線的方式，保證了項目信息的互通性，每位成員得到的信息是一致的，最新的，打破了團隊成員之間存在的信息壁壘。

第四階段：產研協同平臺 —— 藍湖

國內產研協作的痛點問題

目前國內產研團隊的協作模型是怎樣的呢？根據調研，大部分團隊處于瀑布式開發或敏捷式開發方式。

產品經理寫完需求文檔分享到團隊內部溝通群中，團隊成員在 IM 中提出修改意見，或者線下會議評審。產品文檔定稿后，設計師根據產品文檔輸出設計稿，并進行設計評審。之后進入研發階段，研發完成后進行上線前驗收，最后灰度上線。

在這樣的產研流程中，存在非常明顯的幾點問題：

1、項目過程文件割裂，溝通信息流轉失真

2、產品文檔設計圖評審體驗差

3、低效的手動標注切圖

一站式產研協作云平臺

藍湖作為一站式產研協作云平臺，是如何解決這些問題呢？

藍湖最初被大家認可是因為高效的自動標注切圖功能。不過，除了大家直接使用到的工具屬性外，藍湖更重要的是作為工具背后的高效協作和管理的理念。

1、產研團隊資源整合

當前藍湖集中解決產品文檔與設計稿的整合，即產品經理可以上傳 Axure、word、PDF、PPT 等文檔到藍湖項目中，設計師也可以把項目的 Sketch 、Photoshop、Xd 設計稿上傳，這樣每個團隊成員可以在藍湖一個平臺上基于輸出文檔和設計稿無障礙的溝通協作。

2、產品文檔、設計文件在線協作評審

設計師將 Sketch 、Photoshop、Xd 的設計稿上傳到藍湖后，團隊成員可以在線評審，減少線下低效會議。同時線上評審可以精確到設計稿的具體某一點提出意見，信息傳遞更精準，評審環節更高效也更友好。

3、設計稿自動標注切圖，自動生成代碼

協作與藍湖的未來

未來的協作趨勢是融合的，藍湖也在持續探索最佳的設計協作方式，不斷打破工具的邊界，進一步解決產品研發協作效率。

藍湖未來不僅會在設計協作每個節點滲透更深入，提供更多最佳實踐。同時會在文檔協作、項目管理、設計創作等多個環節提供解決方案。歡迎大家持續關注藍湖～

期待我的分享能對你有幫助，更期待我們能在藍湖相遇。

原文地址：藍湖產品設計協作（公眾號）

作者：藍湖產品設計協作

轉載請注明：學UI網》藍湖產品經理：產品設計協作的前世今生

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

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

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

設計系統的基礎工作之一就是給組件命名。這個工作看上去并不起眼，似乎還有些機械重復，但實際上卻需要具備嚴謹的邏輯和對細節的錙銖必較。

組件的命名方式并不唯一，你可以按照你對組件構成的理解，來規劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例，呈現出組件的命名邏輯：

可以看到，我們在命名時分了 5 個層級，依次是類別，元件，模式，等級，狀態。

1、類別

類別指的是組件最本質的作用和寬泛的應用場景。通常我們會分為：通用、導航、數據錄入、數據展示、反饋等幾個類別，類別以及其中的部分組件如下圖所示：

2、元件 / 組件

元件即具體的、單一的組件，比如 “導航” 這個類別下就包括了固釘（返回頂部）、面包屑、下拉菜單、導航菜單、分頁、頁頭、步驟條等幾個組件：

3、模式

目前的模式通常會分成暗黑模式（Dark Mode）和淺色模式（Light Mode）兩種，但隨著對用戶體驗的不斷重視，未來也有可能會出現 “護眼模式”、“色盲模式”、“高對比度模式” 等模式。

4、等級

等級的分類和數量由組件的基本功能和在產品的具體需求決定，有些組件比如 “分頁器”、“面包屑” 通常只有一個等級，在命名的時候就可以不體現；而有些組件如 “按鈕”、“標簽頁” 、“導航” 則會有多個等級：

5、狀態

狀態即組件在交互時的變化樣式，通常包括普通（默認）、懸?。☉彝＃Ⅻc擊、失效（禁用）等，根據不同組件的特性，也可能會包括危險提示、聚焦等狀態。

根據上述這個規則，我們就可以對所有組件進行有規律的命名，下圖中組件懸停狀態的命名為：Navigation/Sidemenu/Light/Primary/hover

組件命名的注意事項

轉載請注明：學UI網》工作經驗｜設計資產庫中的組件，應該如何命名？

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

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

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

先來看一眼這款神器的操作界面吧，無需安裝，在線版更方便。軟件界面簡單易操作，基本沒有什么學習成本。（溫馨提示：如果英語不好的同學可以使用谷歌瀏覽器自帶翻譯）

 樣機模型選擇 

軟件里面為大家存儲了手機、筆記本電腦、臺式電腦等基礎模型供選擇，可以獨立使用，也可以疊加選擇到畫板中進行組合創造。

除了樣機模型以外，也提供了一些裝飾元素，比如一些操作手勢和設備零部件等，方便設計師進行自由創造。

當然，還有更多各式各樣的模版，傾斜的組合模版、各種顏色搭配的組合模版、各種手勢的組合模版等等。方便一些基礎薄弱的同學可以直接選擇使用，也是非常的便利。

 強大的操作界面 

了解了各類預存的資源后，黑馬哥帶大家看一下軟件的操作界面。非常的簡單易懂，基本一看就會。

當我們選擇好基礎樣機模型之后，可以通過左側操作欄調整樣機的顏色、位置、透視角度、大小等。點擊上傳可以選擇自己設計好的界面替換到模型中，畫質還是很高清的。

下方就有類似于圖層的操作，可以管理多個組合樣機模型，復制、隱藏、刪除等操作。

在畫板底部也有一些常規的功能操作，可以進行調節。比如畫板的背景色、視角、陰影設置等。

在畫板右側可以對整體的燈光進行設置，滿足我們環境渲染的需要。調節的方法也非常簡單，大家可以動手嘗試一下。

當然，如果覺得通過各種參數調節透視比較麻煩，你也可以像操作 3D 軟件一樣，直接在畫板中操作 X、Y、Z 軸來隨心所欲的創造，是不是很酷呀！

好了，說了這么多相信大家能夠上手了，更多的功能操作就留給大家啦！希望這款神器可以帶給你作品包裝的新大陸，創造出自己滿意的設計效果。

3D樣機神器網址：
https://things.morflax.com/

溫馨提示：僅作為學習交流，勿做他用。

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

作者：黑馬青年

轉載請注明：學UI網》如何快速制作3D樣機-作品包裝神器

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

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

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

在用戶界面中，動效不僅僅是一種視覺裝飾，而是一種強大的力量，它可增強產品參與度并擴展設計交流的范圍。

本文給大家介紹了十二項最基本的動效設計原理，這些都適合用于UX/UI設計項目中，是非常有用的運動原理，建議收藏反復食用。

原理一：緩動 Easing

緩動效果模擬了現實世界中對象隨時間加速或減速的方式，它適用于所有運動的元素。自然界中沒有東西是從一點呈線性地移動到另一點。現實中，物體在移動時往往會加速或減速。我們的大腦習慣于期待這種運動，因此在做動畫時，應利用此規律。自然的運動會讓用戶對你的應用感覺更舒適，從而產生更好的總體體驗。

線性動畫

沒有任何速度上的變化的的動畫稱為線性動畫，如坐標圖所示，運動的曲線成直線狀態。這種動畫效果往往顯得很僵硬，不自然，讓用戶覺得不協調。一般來說，應避免線性運動。

緩出動畫

運動的開頭速度很快，結尾處逐漸減速的動畫稱為緩出動畫。運動曲線呈拋物線狀態，緩出動畫最適合界面里面的動效，快速的入場給人反應很快的感覺。

緩入動畫

和緩出相反，緩入動畫是開頭慢結尾快，這就像自然落下的球體一樣，速度越來越快。但是，從交互的角度來看，緩入可能讓人感覺有點不自然，因為結尾很突然；在現實中移動的物體往往是減速，而不是突然停止。緩入還有讓人感覺行動遲緩的不利效果，這會對網站或應用的響應速度給人的感覺產生負面影響。

緩入緩出動畫

把緩入和緩出曲線連接在一起，就是完整的緩入緩出動畫，它的運動過程可以想象一輛汽車從起步到停車的動作，可以實現比單純緩出更生動的效果。由于開頭慢、中間快和結尾慢，動畫將有更強的對比，會讓用戶感到愉悅。

因此，緩動原理實際上是使動畫不再那么尖銳或生硬的過程。

原理二：變形 Transformation

變形是由一個形態變成另一個形態，這種形變是動畫里最引人注目的。通過元素形態的轉變，告知用戶元素的狀態或作用發生了改變。

例如這個下載動畫，下載完成后變形為按鈕，其實是符合用戶預期的。這種無縫轉換，可以提高用戶的認知度，提

升了動畫的連貫性。

在動效中，利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的，通過物體運動的變形狀態就能很好的體現出來。

原理三：克隆 Cloning

當元素被克隆時，可表達出元素與元素之間的某種連續性。在此原理中，如何讓物體的出現和離開具有連續性、關系和過渡，是信息準確傳遞的關鍵。

例如這個發布按鈕，點擊它會創建多個新對象，引導注意力，非常清晰的表達了他們之間的關系。

還有這個運動健康頁面，在添加練習項目時，從主按鈕克隆生成一系列練習項目，選擇完成后原路返回。

原理四：覆蓋 Overlay

利用覆蓋原理能讓原本有限的空間得以延伸，用以顯示額外的可見元素，補償了用戶體驗中的單一統一視野或“客觀視圖”。覆蓋原理在UI設計中常用于列表橫滑，通過覆蓋，隱藏相關操作，以減少視覺上的干擾。

在某種程度上，作為設計師，“層”的概念是顯而易見的，不言而喻。我們用層來設計，層的概念被深深地內化了。但是，我們必須小心區分“制作”和“使用”的過程。

作為不斷參與“制作”過程的設計師，我們要非常熟悉我們正在設計的物體的所有部分（包括隱藏部分）。然而，作為用戶，那些不可見的部分是根據定義和實踐，在視覺和認知上隱藏的。

原理五：偏移和延遲 Offset & Delay

偏移和延遲原理是表明元素之間的層級與關系，在新元素入場時利用偏移和延遲讓信息或界面元素按照秩序進退場，定義對象關系和層次結構。

在上面的示例中，浮動操作按鈕 (FAB) 轉換為頭部背景。數據圖表在時間的延遲下依次出現，暗示用戶這里的信息與其他元素之間的區別，吸引用戶注意力。

原理六：遮罩 Masking

遮罩是決定元素變化的結果是什么，通過暫時使對象顯示和隱藏，以連續無縫的方式轉換，保持了敘事流程的效果。雖然對象本身保持不變，但因為它有了邊界和位置，這兩個因素決定了對象是什么。

例如這個轉動的咖啡杯，借助遮罩，通過改變logo的位置和吸管的朝向，造成杯子在自轉的假象。

在上面的例子中，音樂封面改變了邊界形狀和位置，但沒有改變內容。轉換發生在用戶執行操作后激活，是相當巧妙的技巧。

原理七：父子關系 Parenting

父子關系是將界面元素關聯起來的重要原則，創建出空間和時間層次關系。它最適合作為“實時”互動，例如拖動列表順序時，其他信息會同步跟上。

回想一下，很多元素屬性都可以創造這種聯動的繼承關系，例如不透明度、位置、旋轉、縮放、形狀、顏色等。

原理八：數值變化 Value Change

文本和數字的變化是如此普遍，以至于我們忽略了它們，而我們卻沒有給它們帶來區別和嚴謹來評估它們在支持可用性方面的作用。

數字和值表示現實中正在發生的事情，既可以發生在實時活動中，也可以發生在非實時活動中。它可能是時間、收入、速度、游戲得分等。當我們使用動態的數值變化時，它激活了一種“神經反饋”，用戶會覺得自己與這些數值有關聯的。如果這些值是靜態的，就感覺與現實的聯系會減少。

數值的變化在各類金融理財和日歷APP中經常出現，數據的動態表達和交流可能會對數據的價值產生影響；如上圖中的數值的動態變化，讓用戶感知到自己可能有能力影響到數據，提升了參與活動的意愿。

原理九：蒙層 Obscuration

蒙層與原理四的覆蓋類似，只不過蒙層帶有透明屬性，它擋住了后面的信息，但又沒有全擋住。iOS中常見的毛玻璃效果就是如此，它讓用戶意識到正在操作的對象，還有另一個世界。拓展了Z軸的層次結構，補償用戶體驗中的單一視野。

原理十：視差  Parallax

當用戶滾動時，在視覺平面中創建空間層次結構。其目的是為了建立各元素的層級關系，移動速度更快的交互式元。對用戶來說顯得更接近，較慢的非交互式元素，會退回到背景顯得更遠，從而更好把內容和環境區分開來 。

設計師可以利用時間本身來創建這些關系，告訴用戶界面中的哪些對象具有更高的優先級。用戶不僅認為界面對象現在具有超出視覺設計中確定的層次結構，而且現在可以利用這種層次結構，讓用戶意識到設計之前掌握用戶體驗內容。

原理十一：多維 Dimensionality

維度是將界面的元素多維化，使元素看起來像可翻轉的，可折疊的，浮動的。可以使不同的UI元素實現無縫的過渡銜接，它通常以折紙維度、浮動維度和對象維度這三種方式來呈現。

此外，維度原理克服了視覺平面中的分層悖論，其中缺乏深度的物體存在于同一平面上，但出現在其他物體的“前面”或“后面”。

折紙維度可以被認為是“折疊”或“鉸鏈”的三維界面對象，它由多個元素組合成“折紙”結構，隱藏的物體在空間上仍然可以說是“存在”的，即使它們不可見。

浮動維度為界面對象提供了空間起源和離開，使交互模型直觀且具有高度敘事性。常見的“3D”卡片就是通過這一維度來實現的。

對象維度會產生具有真實深度和形式的維度對象，可以看到，雖然在2D層，元素卻可以3D視角呈現真實的維度。

原理十二：平移與縮放  Dolly & Zoom

平移與縮放是電影概念，指的是與相機有關的對象的運動，以及畫面中圖像本身的大小從遠景平滑變化到特寫鏡頭（反之亦然）。

在某些情況下，無法判斷對象是否正在縮放。可能是在在 3D 空間中向著相機移動，也許是相機在向對象移動，又或者是對象自身在放大縮小。以下三個示例說明了可能的情況。

鏡頭平移：被拍攝物保持靜止而鏡頭移動或鏡頭保持靜止，而被攝物體進行遠離或接近鏡頭的前后移動。

鏡頭縮放：鏡頭與被攝物體在位置上保持靜止，而被攝物自身進行縮放。

縮放：是指視角和對象都沒有在空間上移動，而是物體本身在縮放（或者我們的視野正在縮小，從而導致圖像放大），這向觀看者傳達了附加界面對象在其他對象或場景“內部”的信息。

移動還可以結合維度原則，從而產生更多空間和深度體驗，并向用戶傳達當前視圖“前面”或“后面”的其他區域或內容。縮放允許無縫轉換 – 實時和非實時 – 支持可用性。在創建空間心智模型時，Dolly & Zoom Principle 中采用的這種無縫性非常強大。

以上，便是有關動效設計的十二條基本原理，希望能給你帶來一些啟發。

參考資料

https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing?hl=zh-cn

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

原文地址：站酷

作者：印跡_

轉載請注明：學UI網》用動效創造可用性：動效設計的基本原理

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

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

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