尤其是一些體驗(yàn)細(xì)節(jié)，比我平時(shí)用的騰訊收集表做得更到位些。

感覺 Google 的設(shè)計(jì)師，確實(shí)是沒少下功夫的。

什么是Google Form

國內(nèi)通常網(wǎng)盤和在線文檔是分開的兩款產(chǎn)品，例如騰訊的微云和騰訊文檔，就是不同的兩個(gè)產(chǎn)品。

Google Drive 這個(gè)東西，相當(dāng)于把在線文檔和網(wǎng)盤整合到一起了，這就和國內(nèi)的產(chǎn)品很不一樣了。

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

這次我拿騰訊收集表和 Google Form 這兩款產(chǎn)品對(duì)比，就是因?yàn)樗鼈兌ㄎ槐容^相似：

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

相比之下，我覺得 Google Form 的體驗(yàn)細(xì)節(jié)做得更加到位，很多地方值得學(xué)習(xí)，尤其是這五點(diǎn)：

選項(xiàng)粘貼

一般做問卷，我們都會(huì)先弄一個(gè)文檔，把內(nèi)容確定了再往問卷工具里填。

所以填寫問卷內(nèi)容時(shí)，通常不是通過輸入，而是通過粘貼。

往騰訊收集表里粘貼選擇題內(nèi)容，必須一條一條來，有多少個(gè)選項(xiàng)就貼多少次，選項(xiàng)多了會(huì)感覺自己在工廠做流水線工作。

而 Google Form 可以把所有選項(xiàng)都一起粘貼，識(shí)別到換行就會(huì)自動(dòng)貼到下一個(gè)選項(xiàng)中，方便多了。

我覺得還可以優(yōu)化一下的點(diǎn)是，希望能夠讓我把問題和選項(xiàng)都一起貼，這個(gè)目前 Google Form 還做不到。

切換問題類型

Google Form 創(chuàng)建一個(gè)問題之后，可以很方便地切換問題類型。

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

快速創(chuàng)建問題

就是因?yàn)?Google Form 的問題類型可以快速切換，所以創(chuàng)建問題就很快速了。

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

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

而騰訊收集表因?yàn)椴荒芮袚Q問題類型，所以創(chuàng)建起來就比較麻煩了，還分了兩個(gè)入口。

第一個(gè)是左側(cè)的工具欄，剛開始用還真不知道是用來創(chuàng)建問題的，可能因?yàn)闃?biāo)題上的「添加問題」太不起眼了吧。

第二個(gè)入口時(shí)，當(dāng)前編輯的問題下，會(huì)出現(xiàn)一個(gè)「插入問題」的按鈕。

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

問題順序拖動(dòng)

Google Form 和騰訊收集表在創(chuàng)建了問題之后，都能拖動(dòng)順序，但是可拖區(qū)域不同。

Google Form 的可拖區(qū)域在頂部一條，而騰訊收集表的可拖區(qū)域在側(cè)邊一條。

按下拖動(dòng)時(shí)，為了避免太長不方便，都會(huì)收縮變短，于是問題就來了！

騰訊收集表因?yàn)榭赏蠀^(qū)域在左側(cè)，所以我點(diǎn)擊左側(cè)偏下的位置也能拖，但這次問題收縮，我點(diǎn)的地方就跑出問題區(qū)域了，于是拖動(dòng)就出問題了。

Google Form 因?yàn)榭赏蠀^(qū)域在頂部，所以不會(huì)出現(xiàn)這個(gè) bug。

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

好在，這個(gè)問題并沒有影響拖動(dòng)。

Tab 鍵

對(duì)于很多 PC 老手來說，Tab 鍵是個(gè)很方便的工具。

有了它，填寫再多表單都不需要拿鼠標(biāo)了，點(diǎn)一下就能自動(dòng)把焦點(diǎn)從一個(gè)輸入框移動(dòng)到下一個(gè)。

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

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

總結(jié)

其實(shí)要比視覺風(fēng)格，騰訊文檔可能更加符合國內(nèi)審美。

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

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

然而在用戶體驗(yàn)上，不得不承認(rèn)國外大廠有獨(dú)到之處，值得我們學(xué)習(xí)。

之前對(duì) Youtube 和 iPhone 的體驗(yàn)細(xì)節(jié)分析，也印證了這一點(diǎn)：

《油管這些體驗(yàn)細(xì)節(jié)，甩出競品好幾條街》

《iPhone 這些體驗(yàn)細(xì)節(jié)太感人，換安卓后不習(xí)慣了》

希望國內(nèi)大廠多多努力，讓我們用戶使用產(chǎn)品更加方便吧～

原文地址：體驗(yàn)進(jìn)階（公眾號(hào)）

作者：設(shè)計(jì)師ZoeYZ

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》什么叫細(xì)節(jié)控？看看Google問卷的設(shè)計(jì)吧

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 一  關(guān)于手勢交互 

手勢交互的普及，提升了人與設(shè)備之間的溝通體驗(yàn)，降低了用戶的操作門檻。手機(jī)在觸屏?xí)r代之前多為按鍵模式，手勢相對(duì)簡單，提供的服務(wù)也比較單一。蘋果公司在 2007 年推出具有高分辨率、多點(diǎn)觸控功能的 iPhone，確立了觸摸屏的標(biāo)準(zhǔn)，觸屏手機(jī)時(shí)代席卷而來。而手勢交互的多樣化也開啟了新篇章，被逐步完善和運(yùn)用到智能手機(jī)中，給用戶帶來了不一樣的人機(jī)互動(dòng)體驗(yàn)。

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

手勢交互將會(huì)在未來成為 APP 設(shè)計(jì)中的重要交互環(huán)節(jié)，作為產(chǎn)品設(shè)計(jì)師來說要充分的利用其優(yōu)勢，改變和培養(yǎng)用戶的習(xí)慣。本文也將作為拋磚引玉，為大家開啟關(guān)于手勢交互的探索方向，希望可以帶給大家更多幫助。

 二  手勢交互的形式 

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

2.1、單指手勢交互

單指手勢交互是最為普及的形式，也是用戶最先學(xué)習(xí)并掌握的手勢交互。從最初的按鍵手機(jī)開始，我們便已經(jīng)適應(yīng)通過點(diǎn)擊來完成對(duì)于手機(jī)的使用。

單指手勢交互主要有：單擊、雙擊、多擊、長按、滑動(dòng)、拖動(dòng)等。針對(duì)觸屏靈敏度的不同，操作的力度也被應(yīng)用到不同的交互觸發(fā)上，后面將會(huì)重點(diǎn)通過案例分析單手指手勢交互。

2.2、雙指手勢交互

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

雙指手勢交互是通過兩個(gè)手指的配合進(jìn)行輔助，例如通過雙指代表鼠標(biāo)的左鍵和右鍵，替代鼠標(biāo)的功能；也可以進(jìn)行配合實(shí)現(xiàn)畫面縮放；還有一些產(chǎn)品賦予其別的功能，比如網(wǎng)易云音樂評(píng)論區(qū)針對(duì)單條評(píng)論雙指上滑，可以收到“抱抱”的情感化設(shè)計(jì)。

2.3、多指手勢交互

當(dāng)單指和雙指被充分探索之后，為了帶來手勢交互的深入挖掘，會(huì)面向多指手勢交互進(jìn)行探索。

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

2.4、隔空手勢交互

隔空手勢的交互是在一定的距離控制范圍內(nèi)，隔空對(duì)手機(jī)進(jìn)行手勢操作。比如隔空翻頁、上下滑動(dòng)和隔空截屏等基礎(chǔ)操作，滿足生活中對(duì)簡單功能的操作需求。

設(shè)想一下自己在吃東西的時(shí)候，再也不用擔(dān)心手觸碰屏幕的衛(wèi)生問題，可以利用隔空手勢快速調(diào)節(jié)比如暫停、靜音、進(jìn)度調(diào)節(jié)、音量調(diào)節(jié)、內(nèi)容切換等。讓用戶解放雙手，享受智能時(shí)代帶來的使用體驗(yàn)。

2.5、小結(jié)

手勢交互的形式會(huì)隨著手機(jī)硬件的強(qiáng)大和軟件體驗(yàn)的升級(jí)得到更多應(yīng)用，帶給用戶操作體驗(yàn)的便捷和快捷。下面將會(huì)針對(duì)單指手勢交互進(jìn)行分析，探索現(xiàn)有的優(yōu)秀案例。

 三  單指手勢交互 

手勢交互的形式豐富多樣，本期將會(huì)重點(diǎn)分析單指手勢交互，通過優(yōu)秀的案例解析不一樣的設(shè)計(jì)解決方案。

3.1、單擊

單擊是手勢交互中最基礎(chǔ)的操作，是最早被應(yīng)用的交互形式，從按鍵手機(jī)到觸屏手機(jī)都離不開單擊手勢。在 APP 設(shè)計(jì)中單擊可以作為選中和觸發(fā)進(jìn)行頁面跳轉(zhuǎn)，也有配合力度的不同表現(xiàn)按壓的操作，喚起不同的交互動(dòng)作。

在功能應(yīng)用上面，單擊可以作為功能選項(xiàng)完成單選或者多選操作；在短視頻平臺(tái)也可以作為播放和暫停的切換；可以通過單擊激活功能，比如點(diǎn)贊、關(guān)注、喜歡等。

3.2、雙擊

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

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

3.3、多擊

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

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

3.4、長按

單擊屬于高觸發(fā)型，容易被誤操作，而長按需要配合一定的時(shí)間，適合需要用戶確認(rèn)后的功能激活。當(dāng)我們需要激活一些隱藏功能或者重要操作的時(shí)候可以使用長按，比如蘋果手機(jī)長按屏幕可以激活應(yīng)用管理；我們?cè)诰庉嬑谋镜臅r(shí)候長按可以實(shí)現(xiàn)選擇、全選、復(fù)制、剪切、粘貼等輔助操作。

長按可以輔助當(dāng)前操作，而不會(huì)干擾當(dāng)前正在進(jìn)行的操作。作為輔助性質(zhì)和復(fù)雜功能激活都是非常不錯(cuò)的選擇，也能作為快速預(yù)覽，長按激活松開退出，在 APP 設(shè)計(jì)場景中應(yīng)用較為廣泛。

3.5、滑動(dòng)

滑動(dòng)是最基礎(chǔ)的手勢交互之一，在 APP 設(shè)計(jì)中十分常見，很多功能操作都離不開滑動(dòng)這一動(dòng)態(tài)操作。

可以通過上下滑動(dòng)翻閱全屏連貫性內(nèi)容；左右滑動(dòng)可以對(duì)內(nèi)容卡片、輪播 Banner、功能模塊切換和頁面轉(zhuǎn)場等進(jìn)行操作；滑動(dòng)還能在屏幕中進(jìn)行創(chuàng)作，比如一些繪畫類 APP 就是通過手指滑動(dòng)進(jìn)行創(chuàng)作的；除了上下左右滑動(dòng)以外，斜角滑動(dòng)也被充分利用，可以在操作當(dāng)前 APP 的時(shí)候激活手機(jī)系統(tǒng)的部分功能操作?；瑒?dòng)是手勢交互的基礎(chǔ)操作，可以在滑動(dòng)的方向上面做更多延伸，滿足更多功能的激活。

3.6、拖動(dòng)

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

一些產(chǎn)品首頁功能可以實(shí)現(xiàn)自定義，在進(jìn)行自定義功能編輯的時(shí)候通常就是在激活后進(jìn)行拖動(dòng)實(shí)現(xiàn)位置的改變。拖動(dòng)由于需要兩個(gè)動(dòng)作的結(jié)合，可以有效的預(yù)防誤操作。

單指手勢交互在 APP 設(shè)計(jì)中應(yīng)用非常普遍，隨著用戶習(xí)慣的培養(yǎng)，相信還會(huì)出現(xiàn)更便捷的操作和更多手勢交互的輔助。加強(qiáng)優(yōu)秀案例的積累和分析，將有助于我們進(jìn)一步掌握更多的玩法，下面將會(huì)為大家分享一些優(yōu)秀案例。

 四  線上案例分析 

基于優(yōu)秀案例之上才能不斷激發(fā)靈感，探索出更多的設(shè)計(jì)解決方案。下面分享一些 APP 的上線案例，希望這些案例可以輔助大家進(jìn)行理解，從單擊、雙擊、多擊、長按、滑動(dòng)、拖動(dòng)進(jìn)行案例呈現(xiàn)。

4.1、單擊進(jìn)入全屏模式

#單擊

雖然手機(jī)逐步進(jìn)入大屏?xí)r代，但是用戶還是希望獲得更少的干擾，全屏模式的操作可以讓干擾降到最低。

百度地圖 APP 在操作后會(huì)有彈窗式的內(nèi)容呈現(xiàn)，用戶可以通過單擊屏幕退出彈窗，再次單擊則會(huì)進(jìn)一步隱藏基礎(chǔ)控件，進(jìn)入全屏模式。通過單擊的手勢交互來簡化內(nèi)容結(jié)構(gòu)，降低干擾帶給用戶更集中的操作體驗(yàn)。

4.2、雙擊頭像“拍一拍”

#雙擊

在微信群聊或者與好友聊天的時(shí)候，為了重點(diǎn)提示好友，可以通過雙擊好友頭像進(jìn)行“拍一拍”，晃動(dòng)的頭像和震動(dòng)的提示加強(qiáng)好友對(duì)信息的關(guān)注度。

結(jié)合雙擊的手勢交互，在不改變當(dāng)前布局的情況下加強(qiáng)社交屬性，增強(qiáng)好友間的互動(dòng)提示，通過手勢豐富了社交體驗(yàn)。

4.3、雙擊最大化圖片預(yù)覽

#雙擊

在圖片預(yù)覽的時(shí)候，可以通過雙擊最大化圖片，方便對(duì)細(xì)節(jié)的觀察。通過雙擊的手勢交互來快速放大圖片，在很多相冊(cè)應(yīng)用、電商產(chǎn)品、微信等社交產(chǎn)品中都有涉足，只要是全屏模式下預(yù)覽圖片，都可以通過該手勢交互完成縮放。

雙指縮放屬于慢動(dòng)作，而雙擊最大化屬于快速一步到位，適合查看圖片細(xì)節(jié)等操作。通常是雙擊最大化，再次雙擊恢復(fù)正常。

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

#多擊

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

通過三擊可以快速激活功能快捷鍵，減少了多個(gè)步驟路徑，也不會(huì)導(dǎo)致用戶誤操作。

4.5、長按快速預(yù)覽精彩片段

#長按

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

通過長按激活彈窗，可以在不改變當(dāng)前布局結(jié)構(gòu)的前提下，進(jìn)行更多功能操作。適合針對(duì)隱藏式功能，也能避免誤操作。

4.6、長按結(jié)合位置區(qū)域變化

#長按

很多影視類產(chǎn)品在全屏播放視頻時(shí)，除了通過拖動(dòng)進(jìn)度條進(jìn)行快進(jìn)/倒退之外，也能通過長按屏幕進(jìn)行快進(jìn)。

而騰訊視頻 APP 與之不同的是結(jié)合了屏幕區(qū)域，在全屏狀態(tài)下，左側(cè)區(qū)域長按快退，右側(cè)區(qū)域長按快進(jìn)。長按結(jié)合位置區(qū)域變化功能狀態(tài)，深入了手勢交互的操作，也能帶來不一樣的操作體驗(yàn)。

4.7、長按滑動(dòng)實(shí)現(xiàn)多選

#長按

在百度網(wǎng)盤 APP 中可以通過單擊選擇控件對(duì)文件進(jìn)行選擇操作，也可以通過長按整個(gè)區(qū)域?qū)崿F(xiàn)選中，長按過程中可以結(jié)合滑動(dòng)實(shí)現(xiàn)多選。

長按滑動(dòng)進(jìn)行多選針對(duì)文件較多的場景非常便利，也不用擔(dān)心誤操作。在一些相冊(cè)應(yīng)用中點(diǎn)擊選擇按鈕之后也可以通過滑動(dòng)實(shí)現(xiàn)多選，操作路徑多一步。無論是通過激活選擇按鈕，還是長按都是起到二次確認(rèn)的作用，長按滑動(dòng)操作相對(duì)更簡單。

4.8、長按與時(shí)間跨度的結(jié)合

#長按

長按激活功能比較常見，但是結(jié)合時(shí)間長短的變化相對(duì)較少。蘋果手機(jī)桌面的應(yīng)用管理，在長按應(yīng)用圖標(biāo)時(shí)會(huì)彈窗展示功能列表，繼續(xù)維持長按則會(huì)進(jìn)入應(yīng)用管理，隨著長按的時(shí)間跨度不一樣激活不同功能需求。

在手勢交互設(shè)計(jì)過程中，除了通過動(dòng)作的不同激活功能操作之外，也可以結(jié)合時(shí)間跨度、力度、位置等進(jìn)行組合交互，來滿足多重功能操作的需求。

4.9、可以移動(dòng)的紅包

#滑動(dòng)

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

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

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

#滑動(dòng)

左滑動(dòng)是產(chǎn)品設(shè)計(jì)中非常普遍的手勢交互，通過左滑展開列表隱藏功能，比如編輯、置頂、刪除等。

在脈脈 APP 的消息模塊，消息列表左滑可以進(jìn)行置頂和刪除，如果繼續(xù)往左側(cè)滑動(dòng)則會(huì)實(shí)現(xiàn)自動(dòng)刪除，以此來替代點(diǎn)擊刪除圖標(biāo)完成刪除操作的步驟。通過左滑配合點(diǎn)擊刪除操作路徑多一步，而左滑程度控制刪除效率更高，針對(duì)一些消息較多的產(chǎn)品，可以方便用戶快速清理未讀消息。

4.11、列表式設(shè)計(jì)中的左右滑動(dòng)交互

#滑動(dòng)

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

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

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

#滑動(dòng)

手勢下滑形成下拉刷新已經(jīng)成為產(chǎn)品設(shè)計(jì)中的基礎(chǔ)操作，為了進(jìn)一步延展功能，很多產(chǎn)品在下拉過程中根據(jù)下拉的程度判斷是刷新還是進(jìn)入二層樓（活動(dòng)或者功能模塊）。

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

4.13、拖動(dòng)完成自定義設(shè)置

#拖動(dòng)

隨著用戶對(duì)個(gè)性化的需求升級(jí)，很多產(chǎn)品都開放了部分常用功能模塊的自定義設(shè)置。比如網(wǎng)易云音樂 APP 的底部導(dǎo)航欄在設(shè)置環(huán)節(jié)中，便可通過拖動(dòng)完成自定義設(shè)置。

利用壓力結(jié)合滑動(dòng)可以實(shí)現(xiàn)拖動(dòng)手勢交互，對(duì)于一些需要用戶謹(jǐn)慎操作的功能比較適合，也能有效防止誤操作。

4.14、拖動(dòng)疊加實(shí)現(xiàn)應(yīng)用建組

#拖動(dòng)

當(dāng)用戶下載的應(yīng)用很多的時(shí)候，通常都會(huì)通過建組管理手機(jī)桌面上的各類應(yīng)用軟件?？梢酝ㄟ^拖動(dòng)應(yīng)用疊加到其他應(yīng)用軟件上實(shí)現(xiàn)自動(dòng)建組，建組、進(jìn)組、移出等操作均可通過拖動(dòng)手勢完成，操作非常便利。

拖動(dòng)手勢交互針對(duì)一些防止誤操作的功能比較適合，相當(dāng)于二次確認(rèn)的過程。

4.15、拖動(dòng)交互自定義標(biāo)簽導(dǎo)航

#拖動(dòng)

阿里云盤 APP 底部標(biāo)簽欄的設(shè)計(jì)去掉了傳統(tǒng)的圖標(biāo)+文字形式，而直接以純文本形式設(shè)計(jì)功能模塊。采用了左右可滑動(dòng)的交互形式，方便展示更多功能入口。

右側(cè)設(shè)計(jì)了全部功能的入口，點(diǎn)擊之后以圖標(biāo)+文字的形式展示所有功能模塊，圖標(biāo)設(shè)計(jì)也是非常的精致美觀。用戶也可以通過編輯來自定義設(shè)置底部導(dǎo)航的排序，通過拖動(dòng)功能列表的方式實(shí)現(xiàn)自定義設(shè)置。方便根據(jù)用戶自己的使用習(xí)慣來進(jìn)行自定義，提高用戶的使用體驗(yàn)。

 五  總結(jié) 

手勢交互在 APP 設(shè)計(jì)中的普及帶給用戶更便捷的使用體驗(yàn)，避免過多內(nèi)容的展示所帶來的使用干擾。通過手勢交互前期的用戶習(xí)慣培養(yǎng)，一旦培養(yǎng)完成對(duì)于用戶來說是非常友好的操作之旅。

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

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》探索APP設(shè)計(jì)的手勢交互（上）

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

一、 場景的定義

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

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

上面四種對(duì)場景的解釋，涵蓋的對(duì)象和包含的要素各不相同，那我們?nèi)绾卫斫鈭鼍澳?？如何定義場景？

場景常用在產(chǎn)品迭代中的產(chǎn)品需求階段和設(shè)計(jì)階段，作為產(chǎn)品從產(chǎn)生到設(shè)計(jì)的依據(jù)，2個(gè)階段的側(cè)重點(diǎn)不同，需求階段（明確用戶是誰，需求是什么，做什么事），設(shè)計(jì)階段（基于某目標(biāo)，使用產(chǎn)品的情況）。場景是需求和行動(dòng)的具現(xiàn)化描述，場景分別對(duì)應(yīng)階段分為：用戶需求場景和用戶使用場景。

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

用戶需求場景是用戶需求的擴(kuò)展細(xì)化，補(bǔ)充描述需求涉及的多個(gè)關(guān)鍵要素。若只有簡單描述需求的情況下，對(duì)產(chǎn)品的指導(dǎo)設(shè)計(jì)容易出現(xiàn)偏差。

這里舉個(gè)例子：“周四下半年，小波回家出地鐵口（場景），想吃菠蘿（需求），看到有個(gè)賣菠蘿的攤位，上去看了看，都是沒有削皮的菠蘿（產(chǎn)品），地鐵口人流量大，小波不想等沒買菠蘿就走了。”這案例從需求來說，沒削皮的菠蘿已對(duì)焦，但因?yàn)榄h(huán)境影響了小波不購買的行為。若菠蘿的已經(jīng)削皮，小波就已經(jīng)買了帶回家好好品嘗?；诖嗽龠M(jìn)行延伸，若場景放在逛街的場景中，已經(jīng)切塊菠蘿就是匹配的，隨走隨吃。若場景放在水果店里，沒削皮的菠蘿是合理的，保證了新鮮度安全性品質(zhì)，甚至還可以多種菠蘿挑選，因?yàn)橛袝r(shí)間。從上面來看，同一個(gè)需求，因?yàn)閳鼍安煌?，其菠蘿的形態(tài)也不同。場景是需求的細(xì)化，會(huì)影響到最終產(chǎn)品的設(shè)計(jì)上。

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

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

用戶使用場景描述的是在需求場景的前提下，具體描述為了完成某任務(wù)，跟產(chǎn)品怎么交互的過程。其對(duì)產(chǎn)品的具體設(shè)計(jì)有較大影響。

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

使用場景：用戶+環(huán)境+目標(biāo)+產(chǎn)品。在【某環(huán)境】下，【某用戶】跟【某產(chǎn)品】發(fā)生了交互，用來完成【某任務(wù)】。用戶、目標(biāo)、產(chǎn)品是核心要素，環(huán)境是影響要素，環(huán)境包含時(shí)間、空間。除了環(huán)境要素還包含用戶狀態(tài)和承載產(chǎn)品的設(shè)備狀態(tài)。

場景關(guān)聯(lián)的概念

設(shè)計(jì)常用的工具有2個(gè)跟場景關(guān)聯(lián)，它們是用戶畫像、用戶故事。用戶畫像描述了用戶需求，用戶需求場景是用戶需求的延伸，用戶故事則是用戶需求場景的細(xì)化，一個(gè)場景可包含多個(gè)用戶故事。

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

二、場景的價(jià)值

上一段描述2種類型的場景，場景不僅限于指導(dǎo)產(chǎn)品設(shè)計(jì)，還可以助力團(tuán)隊(duì)協(xié)作等多個(gè)方面。以下通過需求分析、團(tuán)隊(duì)協(xié)作、產(chǎn)品設(shè)計(jì)三塊來描述場景的價(jià)值。

需求分析

場景可以幫助挖掘需求的完整性、判讀需求是否準(zhǔn)確及梳理需求優(yōu)先級(jí)。

1. 【完整性】深刻理解產(chǎn)品需求，讓產(chǎn)品功能更全面，挖掘產(chǎn)品的新機(jī)會(huì)或者產(chǎn)品的新功能
2. 【準(zhǔn)確性】讓需求分析準(zhǔn)確，辨別需求真?zhèn)?
3. 【優(yōu)先級(jí)】考慮用戶如何使用產(chǎn)品，幫助理清強(qiáng)弱場景，幫助理清強(qiáng)弱需求

團(tuán)隊(duì)協(xié)作

場景可以幫助團(tuán)隊(duì)增強(qiáng)同理心、更好的理解需求及提升產(chǎn)品設(shè)計(jì)的參與度。

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

產(chǎn)品設(shè)計(jì)

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

三、場景的挖掘方法

如何獲取場景？2種類型場景因獲取信息的側(cè)重點(diǎn)不同。用戶需求場景側(cè)重需求及事件的描述，及描述事件相關(guān)聯(lián)的環(huán)境。用戶使用場景側(cè)重使用產(chǎn)品完成任務(wù)交互的過程。有兩種用戶調(diào)研方法適用：訪談法、觀察法：

訪談法

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

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

了解用戶使用場景，引導(dǎo)用戶具體描述任務(wù)完成的過程，再延伸其中遇到的問題點(diǎn)等。

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

觀察法

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

四、場景化設(shè)計(jì)

什么是場景化設(shè)計(jì)？場景化設(shè)計(jì)是引入場景概念將簡單需求延伸拓展出更多延伸的決策因素來精細(xì)化產(chǎn)品設(shè)計(jì)，簡單講是將原粗放型設(shè)計(jì)轉(zhuǎn)向精細(xì)化設(shè)計(jì)，提升目標(biāo)轉(zhuǎn)化、體驗(yàn)等。場景要素影響的多少?zèng)Q定了場景化差異的空間，場景化設(shè)計(jì)的前提并不對(duì)整體目標(biāo)的轉(zhuǎn)化造成負(fù)面影響。

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

場景要素：用戶、需求、事件、環(huán)境狀態(tài)、載體狀態(tài)、人物狀態(tài)

產(chǎn)品組成：形態(tài)、功能、內(nèi)容

場景化設(shè)計(jì)最適用于O2O領(lǐng)域的設(shè)計(jì)，它會(huì)涉及豐富的空間、時(shí)間、天氣環(huán)境等影響因素，同樣的需求存在n多種不同場景情況。在我負(fù)責(zé)業(yè)務(wù)主要以web為主，日常場景更多是基于用戶需求的拓展。

產(chǎn)品設(shè)計(jì)與場景的關(guān)系

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

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

五、場景化應(yīng)用案例

在上一篇文章《需求太碎？設(shè)計(jì)師如何在小業(yè)務(wù)中提煉價(jià)值》中有過產(chǎn)品場景的案例解析。是對(duì)一個(gè)小項(xiàng)目進(jìn)行了新的需求場景挖掘，推動(dòng)進(jìn)行改版的過程，這里不再展開說明，有興趣的朋友可以去看一看。

個(gè)人實(shí)踐案例不能完全覆蓋場景化應(yīng)用，另收集了一些直觀的場景案例展示如下。

核心要素的應(yīng)用案例

1. 要素——用戶、需求

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

2. 要素——事件

京東購物車從原來的暫時(shí)放置商品延伸出更多關(guān)聯(lián)的場景，如：對(duì)比、收藏，圍繞場景產(chǎn)品設(shè)計(jì)

影響因素的應(yīng)用案例

1. 時(shí)間——餓了么

根據(jù)不同的事件點(diǎn)推送不同的內(nèi)容，晚上是夜宵，中午是午餐、早上是早餐、傍晚是晚餐

2. 地點(diǎn)——去哪兒旅游

根據(jù)不同的地點(diǎn)推送不同的內(nèi)容

3. 人物狀態(tài)——手機(jī)接電話

手機(jī)接電話（景的差異，差異化交互形態(tài)），手機(jī)放褲兜走路中，手機(jī)正在使用中，2個(gè)場景手機(jī)進(jìn)來。使用手機(jī)中（防止錯(cuò)誤，更適合用戶體驗(yàn)）

六、小結(jié)

場景是入門容易、普適性很強(qiáng)的應(yīng)用工具，也是個(gè)人推崇的設(shè)計(jì)師入門必備技能點(diǎn)。在用戶需求上可以幫助挖掘新的機(jī)會(huì)點(diǎn)拓展產(chǎn)品的使用邊界。在設(shè)計(jì)上場景讓設(shè)計(jì)有據(jù)可依對(duì)產(chǎn)品設(shè)計(jì)更準(zhǔn)確。在業(yè)務(wù)上可以通過場景的描述對(duì)業(yè)務(wù)所滿足的需求有更深入的理解，可以幫助理解許多功能之間的關(guān)系。在協(xié)作上給團(tuán)隊(duì)提供溝通的基礎(chǔ)，容易達(dá)成共識(shí)。

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

原文鏈接：酷家樂用戶體驗(yàn)設(shè)計(jì)（公眾號(hào)）

作者：小波

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)入門必備萬金油-場景篇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

設(shè)計(jì)協(xié)作的發(fā)展歷程

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

從發(fā)展歷程看出，不同時(shí)代基于生產(chǎn)目標(biāo)，會(huì)發(fā)展出相應(yīng)的生產(chǎn)工具和協(xié)作方式來解決團(tuán)隊(duì)的生產(chǎn)效率和質(zhì)量問題。

著眼當(dāng)下，現(xiàn)代互聯(lián)網(wǎng)科技高速發(fā)展，軟件生產(chǎn)團(tuán)隊(duì)隨之快速擴(kuò)大。根據(jù)艾瑞網(wǎng)2021年《中國協(xié)同辦公市場研究報(bào)告》顯示，2020 年中國的協(xié)同市場增速達(dá)到 43.5%。市場上出現(xiàn)了數(shù)以萬計(jì)的協(xié)同產(chǎn)品希望解決團(tuán)隊(duì)中的協(xié)作效率、項(xiàng)目管理等問題。

在產(chǎn)研協(xié)作流程中，和設(shè)計(jì)師關(guān)系更加密切的設(shè)計(jì)協(xié)作發(fā)展如何？

在這篇文章中，通過觀察設(shè)計(jì)工具的變化，我分別從生產(chǎn)創(chuàng)作、設(shè)計(jì)評(píng)審、資源管理三個(gè)維度來分析其發(fā)展歷程。

f

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

這個(gè)階段互聯(lián)網(wǎng)剛剛起步，出現(xiàn)了用于完成精細(xì)化圖像設(shè)計(jì)的工具。在 1990 年 2 月，Photoshop 的 1.0 版本正式發(fā)布。Photoshop 是一款位圖編輯軟件，主要處理以像素所構(gòu)成的數(shù)字圖像。因其豐富強(qiáng)大的圖像編輯繪制功能，當(dāng)時(shí)被廣泛應(yīng)用于各行各業(yè)，如早期 PC 端網(wǎng)頁的 UI 設(shè)計(jì)、門戶網(wǎng)站運(yùn)營圖設(shè)計(jì)、廣告海報(bào)設(shè)計(jì)、照片后期處理等。

當(dāng) Photoshop 和 Adobe Illustrator 被廣泛的應(yīng)用時(shí)也暴露出明顯的體驗(yàn)問題。如，設(shè)計(jì)師交付時(shí)需要手動(dòng)標(biāo)注和切圖。線下設(shè)計(jì)評(píng)審的方式，需要預(yù)定會(huì)議室、協(xié)調(diào)參會(huì)人時(shí)間，效率極低。還有一種常見評(píng)審場景，幾位同學(xué)圍著一位設(shè)計(jì)師的電腦屏幕發(fā)表意見。這樣雖然信息傳遞很直接，但也嚴(yán)重影響了設(shè)計(jì)師的工作體驗(yàn)。

第一階段的創(chuàng)作、評(píng)審、管理資源的效率提升空間很大，隨著互聯(lián)網(wǎng)的發(fā)展上述問題影響范圍也隨之?dāng)U大。

2010 年后大而全的工具已經(jīng)無法滿足設(shè)計(jì)生產(chǎn)需求，針對(duì) UI 領(lǐng)域垂直化工具開始替代傳統(tǒng)設(shè)計(jì)工具，出現(xiàn)了細(xì)分垂直領(lǐng)域的設(shè)計(jì)工具 Sketch，Zeplin。

首先在生產(chǎn)創(chuàng)作方面，Sketch 相比 Photoshop 體量更小、占用內(nèi)存更少、響應(yīng)速度更快，這些特點(diǎn)讓設(shè)計(jì)師們逐漸從 Photoshop 切換到 Sketch。將 Sketch 創(chuàng)作的設(shè)計(jì)稿上傳到 Zeplin，可以省去手動(dòng)標(biāo)注切圖的工作，這對(duì)設(shè)計(jì)師生產(chǎn)力的釋放無疑是巨大的。不過，Zeplin 本地安裝的方式以及操作流暢度等問題，依然阻礙團(tuán)隊(duì)協(xié)作效率的提升。

到第三階段，互聯(lián)網(wǎng)企業(yè)規(guī)模繼續(xù)擴(kuò)大，去中心化的組織結(jié)構(gòu)要求工具不再受平臺(tái)和系統(tǒng)限制，以 Figma、MasterGo 為標(biāo)桿的在線多人實(shí)時(shí)協(xié)作工具應(yīng)運(yùn)而生。（下文以 MasterGo 為代表進(jìn)行闡述。）

MasterGo 通過將工具云端化，把剛剛我們談到的生產(chǎn)創(chuàng)作、評(píng)審、資源管理融合。對(duì)于設(shè)計(jì)師而言，在線創(chuàng)作后只需要生成一個(gè)分享鏈接，團(tuán)隊(duì)成員即可獲取到最新設(shè)計(jì)稿，節(jié)省之前反復(fù)修改上傳操作；不再需要手動(dòng)標(biāo)注切圖，這些功能對(duì)于設(shè)計(jì)生產(chǎn)力釋放無疑是巨大的。

同時(shí)，MasterGo 相比 Sketch 更輕量、響應(yīng)更快，這也是其獲得更多設(shè)計(jì)師親睞的原因。對(duì)于團(tuán)隊(duì)，設(shè)計(jì)評(píng)審不再是一件繁瑣耗時(shí)的工作，評(píng)審人可以根據(jù)自己的安排隨時(shí)在線評(píng)審，提出修改意見。

在線的方式，保證了項(xiàng)目信息的互通性，每位成員得到的信息是一致的，最新的，打破了團(tuán)隊(duì)成員之間存在的信息壁壘。

第四階段：產(chǎn)研協(xié)同平臺(tái) —— 藍(lán)湖

國內(nèi)產(chǎn)研協(xié)作的痛點(diǎn)問題

目前國內(nèi)產(chǎn)研團(tuán)隊(duì)的協(xié)作模型是怎樣的呢？根據(jù)調(diào)研，大部分團(tuán)隊(duì)處于瀑布式開發(fā)或敏捷式開發(fā)方式。

產(chǎn)品經(jīng)理寫完需求文檔分享到團(tuán)隊(duì)內(nèi)部溝通群中，團(tuán)隊(duì)成員在 IM 中提出修改意見，或者線下會(huì)議評(píng)審。產(chǎn)品文檔定稿后，設(shè)計(jì)師根據(jù)產(chǎn)品文檔輸出設(shè)計(jì)稿，并進(jìn)行設(shè)計(jì)評(píng)審。之后進(jìn)入研發(fā)階段，研發(fā)完成后進(jìn)行上線前驗(yàn)收，最后灰度上線。

在這樣的產(chǎn)研流程中，存在非常明顯的幾點(diǎn)問題：

1、項(xiàng)目過程文件割裂，溝通信息流轉(zhuǎn)失真

2、產(chǎn)品文檔設(shè)計(jì)圖評(píng)審體驗(yàn)差

3、低效的手動(dòng)標(biāo)注切圖

一站式產(chǎn)研協(xié)作云平臺(tái)

藍(lán)湖作為一站式產(chǎn)研協(xié)作云平臺(tái)，是如何解決這些問題呢？

藍(lán)湖最初被大家認(rèn)可是因?yàn)楦咝У淖詣?dòng)標(biāo)注切圖功能。不過，除了大家直接使用到的工具屬性外，藍(lán)湖更重要的是作為工具背后的高效協(xié)作和管理的理念。

1、產(chǎn)研團(tuán)隊(duì)資源整合

當(dāng)前藍(lán)湖集中解決產(chǎn)品文檔與設(shè)計(jì)稿的整合，即產(chǎn)品經(jīng)理可以上傳 Axure、word、PDF、PPT 等文檔到藍(lán)湖項(xiàng)目中，設(shè)計(jì)師也可以把項(xiàng)目的 Sketch 、Photoshop、Xd 設(shè)計(jì)稿上傳，這樣每個(gè)團(tuán)隊(duì)成員可以在藍(lán)湖一個(gè)平臺(tái)上基于輸出文檔和設(shè)計(jì)稿無障礙的溝通協(xié)作。

2、產(chǎn)品文檔、設(shè)計(jì)文件在線協(xié)作評(píng)審

設(shè)計(jì)師將 Sketch 、Photoshop、Xd 的設(shè)計(jì)稿上傳到藍(lán)湖后，團(tuán)隊(duì)成員可以在線評(píng)審，減少線下低效會(huì)議。同時(shí)線上評(píng)審可以精確到設(shè)計(jì)稿的具體某一點(diǎn)提出意見，信息傳遞更精準(zhǔn)，評(píng)審環(huán)節(jié)更高效也更友好。

3、設(shè)計(jì)稿自動(dòng)標(biāo)注切圖，自動(dòng)生成代碼

協(xié)作與藍(lán)湖的未來

未來的協(xié)作趨勢是融合的，藍(lán)湖也在持續(xù)探索最佳的設(shè)計(jì)協(xié)作方式，不斷打破工具的邊界，進(jìn)一步解決產(chǎn)品研發(fā)協(xié)作效率。

藍(lán)湖未來不僅會(huì)在設(shè)計(jì)協(xié)作每個(gè)節(jié)點(diǎn)滲透更深入，提供更多最佳實(shí)踐。同時(shí)會(huì)在文檔協(xié)作、項(xiàng)目管理、設(shè)計(jì)創(chuàng)作等多個(gè)環(huán)節(jié)提供解決方案。歡迎大家持續(xù)關(guān)注藍(lán)湖～

期待我的分享能對(duì)你有幫助，更期待我們能在藍(lán)湖相遇。

原文地址：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作（公眾號(hào)）

作者：藍(lán)湖產(chǎn)品設(shè)計(jì)協(xié)作

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》藍(lán)湖產(chǎn)品經(jīng)理：產(chǎn)品設(shè)計(jì)協(xié)作的前世今生

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

設(shè)計(jì)系統(tǒng)的基礎(chǔ)工作之一就是給組件命名。這個(gè)工作看上去并不起眼，似乎還有些機(jī)械重復(fù)，但實(shí)際上卻需要具備嚴(yán)謹(jǐn)?shù)?strong>邏輯和對(duì)細(xì)節(jié)的錙銖必較。

組件的命名方式并不唯一，你可以按照你對(duì)組件構(gòu)成的理解，來規(guī)劃你的命名邏輯。下圖以我工作中用到的一款組件庫為例，呈現(xiàn)出組件的命名邏輯：

可以看到，我們?cè)诿麜r(shí)分了 5 個(gè)層級(jí)，依次是類別，元件，模式，等級(jí)，狀態(tài)。

1、類別

類別指的是組件最本質(zhì)的作用和寬泛的應(yīng)用場景。通常我們會(huì)分為：通用、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、反饋等幾個(gè)類別，類別以及其中的部分組件如下圖所示：

2、元件 / 組件

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

3、模式

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

4、等級(jí)

等級(jí)的分類和數(shù)量由組件的基本功能和在產(chǎn)品的具體需求決定，有些組件比如 “分頁器”、“面包屑” 通常只有一個(gè)等級(jí)，在命名的時(shí)候就可以不體現(xiàn)；而有些組件如 “按鈕”、“標(biāo)簽頁” 、“導(dǎo)航” 則會(huì)有多個(gè)等級(jí)：

5、狀態(tài)

狀態(tài)即組件在交互時(shí)的變化樣式，通常包括普通（默認(rèn)）、懸?。☉彝＃?、點(diǎn)擊、失效（禁用）等，根據(jù)不同組件的特性，也可能會(huì)包括危險(xiǎn)提示、聚焦等狀態(tài)。

根據(jù)上述這個(gè)規(guī)則，我們就可以對(duì)所有組件進(jìn)行有規(guī)律的命名，下圖中組件懸停狀態(tài)的命名為：Navigation/Sidemenu/Light/Primary/hover

組件命名的注意事項(xiàng)

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)｜設(shè)計(jì)資產(chǎn)庫中的組件，應(yīng)該如何命名？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

 樣機(jī)模型選擇 

軟件里面為大家存儲(chǔ)了手機(jī)、筆記本電腦、臺(tái)式電腦等基礎(chǔ)模型供選擇，可以獨(dú)立使用，也可以疊加選擇到畫板中進(jìn)行組合創(chuàng)造。

除了樣機(jī)模型以外，也提供了一些裝飾元素，比如一些操作手勢和設(shè)備零部件等，方便設(shè)計(jì)師進(jìn)行自由創(chuàng)造。

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

 強(qiáng)大的操作界面 

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

當(dāng)我們選擇好基礎(chǔ)樣機(jī)模型之后，可以通過左側(cè)操作欄調(diào)整樣機(jī)的顏色、位置、透視角度、大小等。點(diǎn)擊上傳可以選擇自己設(shè)計(jì)好的界面替換到模型中，畫質(zhì)還是很高清的。

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

在畫板底部也有一些常規(guī)的功能操作，可以進(jìn)行調(diào)節(jié)。比如畫板的背景色、視角、陰影設(shè)置等。

在畫板右側(cè)可以對(duì)整體的燈光進(jìn)行設(shè)置，滿足我們環(huán)境渲染的需要。調(diào)節(jié)的方法也非常簡單，大家可以動(dòng)手嘗試一下。

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

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

3D樣機(jī)神器網(wǎng)址：
https://things.morflax.com/

溫馨提示：僅作為學(xué)習(xí)交流，勿做他用。

原文地址：黑馬家族（公眾號(hào)）

作者：黑馬青年

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何快速制作3D樣機(jī)-作品包裝神器

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

在用戶界面中，動(dòng)效不僅僅是一種視覺裝飾，而是一種強(qiáng)大的力量，它可增強(qiáng)產(chǎn)品參與度并擴(kuò)展設(shè)計(jì)交流的范圍。

本文給大家介紹了十二項(xiàng)最基本的動(dòng)效設(shè)計(jì)原理，這些都適合用于UX/UI設(shè)計(jì)項(xiàng)目中，是非常有用的運(yùn)動(dòng)原理，建議收藏反復(fù)食用。

原理一：緩動(dòng) Easing

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

線性動(dòng)畫

沒有任何速度上的變化的的動(dòng)畫稱為線性動(dòng)畫，如坐標(biāo)圖所示，運(yùn)動(dòng)的曲線成直線狀態(tài)。這種動(dòng)畫效果往往顯得很僵硬，不自然，讓用戶覺得不協(xié)調(diào)。一般來說，應(yīng)避免線性運(yùn)動(dòng)。

緩出動(dòng)畫

運(yùn)動(dòng)的開頭速度很快，結(jié)尾處逐漸減速的動(dòng)畫稱為緩出動(dòng)畫。運(yùn)動(dòng)曲線呈拋物線狀態(tài)，緩出動(dòng)畫最適合界面里面的動(dòng)效，快速的入場給人反應(yīng)很快的感覺。

緩入動(dòng)畫

和緩出相反，緩入動(dòng)畫是開頭慢結(jié)尾快，這就像自然落下的球體一樣，速度越來越快。但是，從交互的角度來看，緩入可能讓人感覺有點(diǎn)不自然，因?yàn)榻Y(jié)尾很突然；在現(xiàn)實(shí)中移動(dòng)的物體往往是減速，而不是突然停止。緩入還有讓人感覺行動(dòng)遲緩的不利效果，這會(huì)對(duì)網(wǎng)站或應(yīng)用的響應(yīng)速度給人的感覺產(chǎn)生負(fù)面影響。

緩入緩出動(dòng)畫

把緩入和緩出曲線連接在一起，就是完整的緩入緩出動(dòng)畫，它的運(yùn)動(dòng)過程可以想象一輛汽車從起步到停車的動(dòng)作，可以實(shí)現(xiàn)比單純緩出更生動(dòng)的效果。由于開頭慢、中間快和結(jié)尾慢，動(dòng)畫將有更強(qiáng)的對(duì)比，會(huì)讓用戶感到愉悅。

因此，緩動(dòng)原理實(shí)際上是使動(dòng)畫不再那么尖銳或生硬的過程。

原理二：變形 Transformation

變形是由一個(gè)形態(tài)變成另一個(gè)形態(tài)，這種形變是動(dòng)畫里最引人注目的。通過元素形態(tài)的轉(zhuǎn)變，告知用戶元素的狀態(tài)或作用發(fā)生了改變。

例如這個(gè)下載動(dòng)畫，下載完成后變形為按鈕，其實(shí)是符合用戶預(yù)期的。這種無縫轉(zhuǎn)換，可以提高用戶的認(rèn)知度，提

升了動(dòng)畫的連貫性。

在動(dòng)效中，利用擠壓變形原則能夠喚起用戶的主觀記憶。是剛性的還是柔軟的，通過物體運(yùn)動(dòng)的變形狀態(tài)就能很好的體現(xiàn)出來。

原理三：克隆 Cloning

當(dāng)元素被克隆時(shí)，可表達(dá)出元素與元素之間的某種連續(xù)性。在此原理中，如何讓物體的出現(xiàn)和離開具有連續(xù)性、關(guān)系和過渡，是信息準(zhǔn)確傳遞的關(guān)鍵。

例如這個(gè)發(fā)布按鈕，點(diǎn)擊它會(huì)創(chuàng)建多個(gè)新對(duì)象，引導(dǎo)注意力，非常清晰的表達(dá)了他們之間的關(guān)系。

還有這個(gè)運(yùn)動(dòng)健康頁面，在添加練習(xí)項(xiàng)目時(shí)，從主按鈕克隆生成一系列練習(xí)項(xiàng)目，選擇完成后原路返回。

原理四：覆蓋 Overlay

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

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

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

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

偏移和延遲原理是表明元素之間的層級(jí)與關(guān)系，在新元素入場時(shí)利用偏移和延遲讓信息或界面元素按照秩序進(jìn)退場，定義對(duì)象關(guān)系和層次結(jié)構(gòu)。

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

原理六：遮罩 Masking

遮罩是決定元素變化的結(jié)果是什么，通過暫時(shí)使對(duì)象顯示和隱藏，以連續(xù)無縫的方式轉(zhuǎn)換，保持了敘事流程的效果。雖然對(duì)象本身保持不變，但因?yàn)樗辛诉吔绾臀恢?，這兩個(gè)因素決定了對(duì)象是什么。

例如這個(gè)轉(zhuǎn)動(dòng)的咖啡杯，借助遮罩，通過改變logo的位置和吸管的朝向，造成杯子在自轉(zhuǎn)的假象。

在上面的例子中，音樂封面改變了邊界形狀和位置，但沒有改變內(nèi)容。轉(zhuǎn)換發(fā)生在用戶執(zhí)行操作后激活，是相當(dāng)巧妙的技巧。

原理七：父子關(guān)系 Parenting

父子關(guān)系是將界面元素關(guān)聯(lián)起來的重要原則，創(chuàng)建出空間和時(shí)間層次關(guān)系。它最適合作為“實(shí)時(shí)”互動(dòng)，例如拖動(dòng)列表順序時(shí)，其他信息會(huì)同步跟上。

回想一下，很多元素屬性都可以創(chuàng)造這種聯(lián)動(dòng)的繼承關(guān)系，例如不透明度、位置、旋轉(zhuǎn)、縮放、形狀、顏色等。

原理八：數(shù)值變化 Value Change

文本和數(shù)字的變化是如此普遍，以至于我們忽略了它們，而我們卻沒有給它們帶來區(qū)別和嚴(yán)謹(jǐn)來評(píng)估它們?cè)谥С挚捎眯苑矫娴淖饔谩?

數(shù)字和值表示現(xiàn)實(shí)中正在發(fā)生的事情，既可以發(fā)生在實(shí)時(shí)活動(dòng)中，也可以發(fā)生在非實(shí)時(shí)活動(dòng)中。它可能是時(shí)間、收入、速度、游戲得分等。當(dāng)我們使用動(dòng)態(tài)的數(shù)值變化時(shí)，它激活了一種“神經(jīng)反饋”，用戶會(huì)覺得自己與這些數(shù)值有關(guān)聯(lián)的。如果這些值是靜態(tài)的，就感覺與現(xiàn)實(shí)的聯(lián)系會(huì)減少。

數(shù)值的變化在各類金融理財(cái)和日歷APP中經(jīng)常出現(xiàn)，數(shù)據(jù)的動(dòng)態(tài)表達(dá)和交流可能會(huì)對(duì)數(shù)據(jù)的價(jià)值產(chǎn)生影響；如上圖中的數(shù)值的動(dòng)態(tài)變化，讓用戶感知到自己可能有能力影響到數(shù)據(jù)，提升了參與活動(dòng)的意愿。

原理九：蒙層 Obscuration

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

原理十：視差  Parallax

當(dāng)用戶滾動(dòng)時(shí)，在視覺平面中創(chuàng)建空間層次結(jié)構(gòu)。其目的是為了建立各元素的層級(jí)關(guān)系，移動(dòng)速度更快的交互式元。對(duì)用戶來說顯得更接近，較慢的非交互式元素，會(huì)退回到背景顯得更遠(yuǎn)，從而更好把內(nèi)容和環(huán)境區(qū)分開來 。

設(shè)計(jì)師可以利用時(shí)間本身來創(chuàng)建這些關(guān)系，告訴用戶界面中的哪些對(duì)象具有更高的優(yōu)先級(jí)。用戶不僅認(rèn)為界面對(duì)象現(xiàn)在具有超出視覺設(shè)計(jì)中確定的層次結(jié)構(gòu)，而且現(xiàn)在可以利用這種層次結(jié)構(gòu)，讓用戶意識(shí)到設(shè)計(jì)之前掌握用戶體驗(yàn)內(nèi)容。

原理十一：多維 Dimensionality

維度是將界面的元素多維化，使元素看起來像可翻轉(zhuǎn)的，可折疊的，浮動(dòng)的?？梢允共煌腢I元素實(shí)現(xiàn)無縫的過渡銜接，它通常以折紙維度、浮動(dòng)維度和對(duì)象維度這三種方式來呈現(xiàn)。

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

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

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

對(duì)象維度會(huì)產(chǎn)生具有真實(shí)深度和形式的維度對(duì)象，可以看到，雖然在2D層，元素卻可以3D視角呈現(xiàn)真實(shí)的維度。

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

平移與縮放是電影概念，指的是與相機(jī)有關(guān)的對(duì)象的運(yùn)動(dòng)，以及畫面中圖像本身的大小從遠(yuǎn)景平滑變化到特寫鏡頭（反之亦然）。

在某些情況下，無法判斷對(duì)象是否正在縮放?？赡苁窃谠?3D 空間中向著相機(jī)移動(dòng)，也許是相機(jī)在向?qū)ο笠苿?dòng)，又或者是對(duì)象自身在放大縮小。以下三個(gè)示例說明了可能的情況。

鏡頭平移：被拍攝物保持靜止而鏡頭移動(dòng)或鏡頭保持靜止，而被攝物體進(jìn)行遠(yuǎn)離或接近鏡頭的前后移動(dòng)。

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

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

移動(dòng)還可以結(jié)合維度原則，從而產(chǎn)生更多空間和深度體驗(yàn)，并向用戶傳達(dá)當(dāng)前視圖“前面”或“后面”的其他區(qū)域或內(nèi)容?？s放允許無縫轉(zhuǎn)換 – 實(shí)時(shí)和非實(shí)時(shí) – 支持可用性。在創(chuàng)建空間心智模型時(shí)，Dolly & Zoom Principle 中采用的這種無縫性非常強(qiáng)大。

以上，便是有關(guān)動(dòng)效設(shè)計(jì)的十二條基本原理，希望能給你帶來一些啟發(fā)。

參考資料

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

原文地址：站酷

作者：印跡_

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》用動(dòng)效創(chuàng)造可用性：動(dòng)效設(shè)計(jì)的基本原理

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)