同樣的功能，每個(gè)APP的設(shè)計(jì)方案卻并不相同。為什么？影響交互設(shè)計(jì)的決策因素有哪些？本文作者結(jié)合實(shí)際案例對(duì)此進(jìn)行了分析探究，與大家分享。

大家在把玩各種App的時(shí)候，應(yīng)該經(jīng)常會(huì)發(fā)現(xiàn)：同樣的功能，每個(gè)App做出的產(chǎn)品設(shè)計(jì)方案卻不一樣。這是為什么呢？如此多種不同的方案，哪一種更好呢？我們?cè)撊绾伪容^呢？

這些問(wèn)題轉(zhuǎn)換過(guò)來(lái)就是：交互設(shè)計(jì)需要做決策的時(shí)候，要參考哪些要素呢？

這次我選擇了13個(gè)案例，邊分析，邊回答這些問(wèn)題。

01 不同的場(chǎng)景

需求是場(chǎng)景里面生長(zhǎng)出來(lái)的，就應(yīng)該在場(chǎng)景里面去解決。所謂的場(chǎng)景，其實(shí)就是人物、時(shí)間、地點(diǎn)、對(duì)象、終端、流程的組合。同樣的功能，人物/時(shí)間/地點(diǎn)/對(duì)象/終端/流程不一樣了，也就是場(chǎng)景不一樣，那么解決方案也不一樣。

1. 篩選功能（電商 VS Online Dating）

同樣是列表頁(yè)面的篩選，我們對(duì)比兩個(gè)不同類型的App。一個(gè)是電商類別的App：淘寶，一個(gè)是Online Dating類別的App：JION。

說(shuō)起篩選功能，可能我們最熟悉的還是商品/服務(wù)列表頁(yè)面的篩選功能。就像上面淘寶。而JION這樣的設(shè)計(jì)其實(shí)是很少見(jiàn)的。

為什么設(shè)計(jì)會(huì)差別如此之大呢？因?yàn)楹Y選的對(duì)象不一樣。

淘寶的篩選的對(duì)象是物品。物品是標(biāo)準(zhǔn)化的，且物品是沒(méi)有情感的，只有一堆固定的特征和屬性。所以淘寶的篩選頁(yè)面，把商品特征化，你通過(guò)篩選這些特征，找到目標(biāo)。

但是JOIN篩選的對(duì)象是人。

人不是標(biāo)準(zhǔn)化的，很難像物品一樣分門別類。你可能要說(shuō)，人不是也可以打標(biāo)簽嗎？是的，但是如果真的是通過(guò)標(biāo)簽來(lái)，可能需要無(wú)數(shù)的標(biāo)簽。這顯然不經(jīng)濟(jì)。而且，通過(guò)標(biāo)簽來(lái)篩選人，物化人，在一個(gè)dating類別的app里面顯得有些不尊重人。

所以JION用了另外的解決方式：我們與其盲目的去尋找一些標(biāo)簽，不如先詢問(wèn)自己。

人以群分，我們要找的人，其實(shí)就是和自己類似的人。所以與其立足點(diǎn)放到歸納定性別人身上，不如放到自己身上，詢問(wèn)自己，認(rèn)知自己。JION就是這樣詢問(wèn)，你想要做什么？你最近的狀態(tài)是什么？此刻你的想法是什么？

提供自己的狀態(tài)和想法，有一種和別人面對(duì)面交流，而不是粗暴的挑選貨物的感覺(jué)。對(duì)自己是一種尊重，對(duì)別人也是一種尊重。我們尋找的是人，不是物品，就應(yīng)該有一個(gè)起碼的尊重。尊重的底線，就是不要物化別人。你心中可以有一把標(biāo)尺，但是起碼的禮貌，就是不要隨意放出標(biāo)尺，對(duì)別人隨意比劃。

所以JION這個(gè)篩選頁(yè)面，沒(méi)有和服務(wù)/商品列表的篩選功能做成一樣，而是另辟蹊徑，做成了一個(gè)需求的提交頁(yè)面，突出了人的特性，人的溫度。通過(guò)我們對(duì)自我的探尋，和對(duì)別人的尊重，對(duì)物化人格說(shuō)「不」，同樣可以提高效率，找到契合自己的人。

所以我覺(jué)得JION的設(shè)計(jì)，是一個(gè)好的設(shè)計(jì)，是一個(gè)場(chǎng)景化驅(qū)動(dòng)的設(shè)計(jì)。

2. 出行方案首頁(yè)（公交 VS 打車）

智能公交的首頁(yè)沒(méi)有地圖，只有定位的附近站點(diǎn)。而打車App的首頁(yè)就是地圖，可以查看車況和路況。

同樣是出行方案，但是因?yàn)榻煌üぞ卟煌?，所以設(shè)計(jì)不同。智能公交是查詢公交線路，公交的線路和站點(diǎn)都是固定的。我們只需要知道附近的站點(diǎn)和車輛到站情況。

而打車則不同，位置不一樣，車輛的多寡不一樣，離我們的距離不一樣。打車過(guò)后，我們需要知道車輛的實(shí)時(shí)距離。所以需要一個(gè)地圖。

02 不同的發(fā)展階段和特點(diǎn)

同樣是評(píng)論功能，其他App，比如知識(shí)星球等社區(qū)都是鼓勵(lì)用戶評(píng)論，而微博卻提示：博主最近拉黑了多少人，請(qǐng)謹(jǐn)慎評(píng)論。

這是因?yàn)椋喊l(fā)展的階段不同了，微博的評(píng)論體量大，知識(shí)星球的評(píng)論體量小。數(shù)量基數(shù)在那里，所以微博可以提示謹(jǐn)慎發(fā)言，提高評(píng)論的質(zhì)量。

用戶群體的特點(diǎn)不一樣，微博是公共社區(qū)，用戶體量大，評(píng)論可能是自己的粉絲，也有可能是其他途徑，比如話題/熱搜看到后的非粉絲用戶。所以評(píng)論的動(dòng)機(jī)和行為都多種多樣。

而知識(shí)星球是私密社區(qū)，因?yàn)閷?duì)博主的高度認(rèn)同，才會(huì)加入這樣的社區(qū)，所以價(jià)值觀比較趨同。所以只會(huì)引導(dǎo)評(píng)論，而不會(huì)提示謹(jǐn)慎發(fā)言。

另外，微博的這個(gè)提示也并不是所有用戶都有，只有某一些用戶達(dá)到了某一個(gè)臨界點(diǎn)才會(huì)觸發(fā)。

因?yàn)槲⒉┯脩趔w量大、價(jià)值觀各不相同，所有這樣的保護(hù)機(jī)制，一方面是可以讓博主能夠看到有效的善意的評(píng)論，保護(hù)了博主的心情；另外一方面也可以讓評(píng)論者謹(jǐn)慎發(fā)言，防止被拉黑，也同樣是維護(hù)了評(píng)論者的心情。

03 后來(lái)者的優(yōu)化

有的App或者網(wǎng)站，因?yàn)闆](méi)有繼續(xù)優(yōu)化，所以有的功能和后來(lái)者相比，同樣的功能，有些細(xì)節(jié)會(huì)不一樣。沒(méi)有繼續(xù)優(yōu)化的原因是多種多樣的，比如

1. 發(fā)展的比較早，而后續(xù)又把精力投入到其他的地方，所以有的功能，沒(méi)有繼續(xù)迭代；
2. 或者因?yàn)橹暗募夹g(shù)架構(gòu)不好改動(dòng)，所以只好放著不動(dòng)；
3. 用戶已經(jīng)習(xí)慣了，再次改動(dòng)，會(huì)帶來(lái)新的認(rèn)知成本。評(píng)估之后，索性不改。

而新的網(wǎng)站，沒(méi)有這些顧慮，站在前人的肩膀上，能夠比前面的網(wǎng)站和App做的更好。

發(fā)布按鈕

比如同樣是內(nèi)容發(fā)布的頁(yè)面，有的網(wǎng)站把發(fā)布按鈕放到上面，有的把發(fā)布按鈕放到底下。

微信公眾號(hào)的發(fā)布界面，就是把發(fā)布按鈕放到輸入框下面；

而簡(jiǎn)書(shū)就是放到輸入框上面。

哪種更好呢？

我們可以用費(fèi)茨定律來(lái)說(shuō)明一下，在輸入行為中，微信公眾號(hào)的發(fā)布應(yīng)用了費(fèi)茨定律，把發(fā)布按鈕放到了離我們最近的地方，而且目標(biāo)按鈕設(shè)置了不同的顏色，并且按鈕面積比求其他的按鈕要大。這對(duì)輸入后就發(fā)布十分方便。

費(fèi)茨定律是人機(jī)交互和人體工程學(xué)中人類活動(dòng)的模型，它預(yù)測(cè)了從任意位置快速移動(dòng)到一個(gè)目標(biāo)位置所需的時(shí)間由2個(gè)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。

04 產(chǎn)品類別

同樣是截圖這樣的一個(gè)操作，由于產(chǎn)品類別不同，App的的反饋也是不一樣的。

比如支付寶，截圖之后，會(huì)彈出一個(gè)特別小的浮層「help」，點(diǎn)擊后跳轉(zhuǎn)help頁(yè)面，可以進(jìn)行問(wèn)題求助和意見(jiàn)反饋。

而唯品會(huì)生成商品圖片，引導(dǎo)分享微信好友和朋友圈；

豆瓣會(huì)生成社交內(nèi)容的長(zhǎng)圖片，可以下載和分享。

這是由App類別不同決定的。支付寶作為支付產(chǎn)品，用戶做出截圖的動(dòng)作，很有可能是出現(xiàn)了問(wèn)題，需要尋求幫助或者進(jìn)行意見(jiàn)反饋；而商品內(nèi)容和社交內(nèi)容的截圖，我們可以猜想到用戶的需求可能是分享內(nèi)容。

截圖只能截取當(dāng)前屏幕所示的部分。而唯品會(huì)和豆瓣都做了一定的處理，使得內(nèi)容更加完整、清晰。特別是豆瓣，直接把內(nèi)容生成了長(zhǎng)圖。

什么叫好的用戶體驗(yàn)？這就是判斷你的意圖，然后直接給你最好的解決方案。通過(guò)這個(gè)案例，可以看到支付寶、唯品會(huì)、豆瓣根據(jù)各自產(chǎn)品的類型，使用了不同的截圖反饋方式，給到了用戶極好的體驗(yàn)。

05 產(chǎn)品調(diào)性

產(chǎn)品的調(diào)性不同，同樣的功能采用的設(shè)計(jì)也會(huì)不同，主要是為了維護(hù)產(chǎn)品內(nèi)外部的一致性。

1. 導(dǎo)航欄

有些時(shí)候社交類別的底部導(dǎo)航會(huì)做的更加活潑，與眾不同一些。比如平行世界的底部導(dǎo)航。

旅游類的網(wǎng)站馬蜂窩的頂部tab的選中線也和其他的不一樣。很多App是正常的直線。而馬蜂窩是很俏皮的曲線。

我們看到這兩個(gè)導(dǎo)航欄目，不會(huì)覺(jué)得突兀，反而會(huì)覺(jué)得這樣也挺不錯(cuò)的。就是因?yàn)樗麄兊漠a(chǎn)品調(diào)性很適應(yīng)這樣或者俏皮或者別致的風(fēng)格。

如果像是支付寶，如果搞這樣的風(fēng)格，其實(shí)就有些不合適了。因?yàn)橹Ц秾毷紫仁且屓水a(chǎn)生安全感，于是設(shè)計(jì)的越正式就越好。

2. 加載

不同調(diào)性的產(chǎn)品，加載動(dòng)畫(huà)設(shè)計(jì)的也不一樣。比如B站的加載動(dòng)畫(huà)，就很符合二次元的感覺(jué)，特別可愛(ài)。

而今日頭條加載圖標(biāo)就比較常規(guī)。

06 大膽創(chuàng)新

有些時(shí)候，有的功能的設(shè)計(jì)已經(jīng)算是約定俗成的了，就看看你有沒(méi)有勇氣打破常規(guī)。這個(gè)會(huì)帶來(lái)一定的風(fēng)險(xiǎn)，比如用戶完全不會(huì)使用；不過(guò)也會(huì)帶來(lái)特別的收益，讓用戶眼前一亮后，印象深刻。

1. 視頻編輯的時(shí)長(zhǎng)編輯功能

比如視頻編輯頁(yè)面，我們需要編輯一個(gè)視頻的時(shí)長(zhǎng)，最常規(guī)的做法就是Filmm類似的，左右拖動(dòng)選框。這樣做的好處是，用戶已經(jīng)形成了心智模型。不需要重新學(xué)習(xí)，就能直接使用。

而打破常規(guī)的Spark Camera，是拖動(dòng)視頻邊緣的圓環(huán)來(lái)選擇視頻的時(shí)長(zhǎng)，雖然操作和Filmm差不多，都是拖動(dòng)，但是布局/位置/設(shè)計(jì)都不一樣了，這樣需要用戶重新認(rèn)知和學(xué)習(xí)。

但是學(xué)習(xí)過(guò)后，完全不影響操作，還省略了縮略圖的占位空間，提升了整個(gè)App的利用空間，讓App顯得更加干凈利落，讓用戶印象深刻。

2. 小視頻首頁(yè)

在抖音還未出現(xiàn)之前，我們一想到做視頻，就會(huì)想到原來(lái)的老牌視頻網(wǎng)站，比如優(yōu)酷、愛(ài)奇藝、騰訊視頻是怎么做的。那么考慮做小視頻的時(shí)候，也會(huì)按照這樣，來(lái)做成按照頻道和標(biāo)簽分類。最開(kāi)始快手就是這樣做的。

結(jié)果抖音提出了新的解決方案。不需要你選擇頻道，直接用全屏幕的方式，給你推薦小視頻。

所以快手也跟進(jìn)，選擇了類似的方案。但是我覺(jué)得快手的這個(gè)方案還是不如抖音好。因?yàn)槎兑粢贿M(jìn)去就是直接播放，沒(méi)有猶豫的時(shí)間，直接讓你開(kāi)始消費(fèi)。而快手卻需要讓人選擇。很多時(shí)候，選擇多了，反而不知道該怎么辦，所以有的用戶反而會(huì)直接退出。

這就是?？硕?。

希克定律是一種心理物理學(xué)定律。用戶所面臨的選擇數(shù)量越多，做出選擇所花費(fèi)的時(shí)間就越長(zhǎng)，在人機(jī)交互的界面中選項(xiàng)越多，意味著用戶做出決策的時(shí)間越長(zhǎng)。

07 避免背上像素級(jí)抄襲的惡名

有些時(shí)候功能一樣，我們能想到的最優(yōu)化的交互方式也一樣，那么就需要在UI和一部分小的細(xì)節(jié)上花費(fèi)一些功夫，做出差異化的區(qū)別來(lái)。

比如同樣是圖片社交。國(guó)外的Instagram已經(jīng)有了很成熟的交互方案。綠洲跟進(jìn)，解決方案不會(huì)差太多。但是為了避開(kāi)像素級(jí)抄襲的惡名，綠洲會(huì)選擇一些UI風(fēng)格和小細(xì)節(jié)來(lái)進(jìn)行調(diào)整，讓我們看到有些差異。

綠洲同樣采用大圖鋪滿的方式，不過(guò)一些細(xì)節(jié)發(fā)生了變化。比如點(diǎn)贊/評(píng)論/分享的按鈕、點(diǎn)贊人數(shù)那里做成了頭像、tag文字變成了顯眼的按鈕、雙擊點(diǎn)贊之后出現(xiàn)評(píng)論彈框等。

08 國(guó)內(nèi)國(guó)外環(huán)境不同

有些時(shí)候國(guó)內(nèi)外的用戶習(xí)慣不一樣。所以同樣的產(chǎn)品也會(huì)做出差異。比如VIP頁(yè)面，我們國(guó)內(nèi)的做法，通常是在使用產(chǎn)品的過(guò)程中，出現(xiàn)限制，然后引導(dǎo)跳轉(zhuǎn)到VIP頁(yè)面，引導(dǎo)付費(fèi)，而且VIP頁(yè)面的說(shuō)明內(nèi)容也挺長(zhǎng)的，比如喜馬拉雅。

國(guó)外的App同樣有這樣的策略，但是國(guó)外很多App的還有一個(gè)不同的策略：一進(jìn)入App，立即彈出VIP購(gòu)買彈框。比如這個(gè)Video Crop。

看起來(lái)很大膽的策略，在國(guó)外，卻很普遍。因?yàn)閲?guó)外用戶的付費(fèi)意愿足夠高，付款決策路徑足夠短。

09 小結(jié)

從上面13個(gè)案例，我們可以看到，就算是同樣的功能，很多App處理起來(lái)也是不一樣的。

有的是因?yàn)閳?chǎng)景流程不同，有的是因?yàn)楫a(chǎn)品發(fā)展階段不同，有的是因?yàn)楫a(chǎn)品調(diào)性不同，有的是因?yàn)楫a(chǎn)品目標(biāo)不同。

有的產(chǎn)品可能是格外的具有創(chuàng)新精神，所以選擇挑戰(zhàn)原來(lái)的設(shè)計(jì)和人們的習(xí)慣。還有的產(chǎn)品單純的是想要和其他產(chǎn)品做區(qū)分，避免背上像素級(jí)抄襲的惡名。

所以他們做出了不同的設(shè)計(jì)方案。

我們做產(chǎn)品的時(shí)候，避免不了要去借鑒別人的產(chǎn)品。（可以看看 如何體面的借鑒別人的產(chǎn)品）看到琳瑯滿目的產(chǎn)品，以及他們對(duì)同樣功能的不同的處理方式，我們?nèi)绾稳ヅ袛?，哪種好，哪種不好呢？

我們不能單純的從好看還是不好看，好用還是不好用上判斷，而是要去多想想他們?yōu)槭裁催@么做，這么做的好處是什么。

至少我們可以考慮這么幾個(gè)角度：

1. 場(chǎng)景
2. 產(chǎn)品發(fā)展的階段
3. 產(chǎn)品調(diào)性
4. 國(guó)內(nèi)化環(huán)境
5. 產(chǎn)品的目標(biāo)
6. 不要像素級(jí)抄襲
7. 大膽創(chuàng)新

這些原則不僅僅是用來(lái)判斷別人的產(chǎn)品，也可以用在自己做產(chǎn)品決策的時(shí)候，特別是：產(chǎn)品目標(biāo)是什么、產(chǎn)品的發(fā)展階段、用戶的使用場(chǎng)景、產(chǎn)品的調(diào)性。我們把這些了解清楚之后，做產(chǎn)品決策就會(huì)更加果斷和準(zhǔn)確了。

作者：熊不知；公眾號(hào)：熊不知（ID：xiongbuzhia）每天聊產(chǎn)品，關(guān)注我，和我一起發(fā)現(xiàn)產(chǎn)品的魅力吧。

本文由 @熊不知 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。