中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

題外話：作為一名交互設(shè)計(jì)師，平時(shí)閑下來(lái)特別喜歡分析市場(chǎng)上的一些具有代表性產(chǎn)品的交互設(shè)計(jì)。同樣，作為一名資深的吃貨，毋庸置疑，當(dāng)然先給大家分析幾款“外賣”的交互設(shè)計(jì)。

首先，我將分析的邏輯和大家說(shuō)一下。

分析的角度：

一切從用戶角度出發(fā)。

分析的內(nèi)容：

• 框架層：?jiǎn)蝹€(gè)界面的元素邏輯關(guān)系
• 結(jié)構(gòu)層：多個(gè)頁(yè)面之間的邏輯跳轉(zhuǎn)關(guān)系

這里說(shuō)明一下，關(guān)于分析的內(nèi)容，有時(shí)候可能會(huì)順帶分析到產(chǎn)品的“表現(xiàn)層”、“范圍層”、“戰(zhàn)略層”等，畢竟這些層級(jí)之間是互相影響、互相滲透的關(guān)系。如果大家想了解更多的“層級(jí)內(nèi)容”，可以好好研讀Jesse James Garrett的《用戶體驗(yàn)要素–以用戶為中心的產(chǎn)品設(shè)計(jì)》。

分析的目標(biāo)：

或者說(shuō)換句話說(shuō)，分析到最后的結(jié)點(diǎn)是

用戶體驗(yàn)

交互設(shè)計(jì)準(zhǔn)則

ok，下面開(kāi)始正式的分析了：

我選取四款主流外賣app：餓了么、美團(tuán)外賣、百度外賣、口碑外賣（淘點(diǎn)點(diǎn)）

在產(chǎn)品功能類似的情況下，用戶體驗(yàn)最大程度上影響著客戶的忠誠(chéng)度。

因?yàn)樗目頰pp都是主流外賣產(chǎn)品，所以在產(chǎn)品的易用性和基本的用戶體驗(yàn)上應(yīng)該不會(huì)有太大問(wèn)題，所以我會(huì)把分析的重點(diǎn)，放在產(chǎn)品的細(xì)節(jié)體驗(yàn)方面。四款產(chǎn)品的交互，好的方面就不多說(shuō)了，我只把其需要改進(jìn)的地方提出來(lái)，進(jìn)行分析解決。真正優(yōu)秀的交互設(shè)計(jì)，并不能只注重產(chǎn)品體驗(yàn)的易用性，而是在設(shè)計(jì)用戶行為、幫助用戶完成他們的目標(biāo)時(shí)，還應(yīng)該給用戶帶來(lái)更愉快、更有意義的體驗(yàn)。

一切從用戶角度出發(fā)， 這四款外賣產(chǎn)品，用戶的使用流程基本是一樣的。即用戶行為應(yīng)該是：
瀏覽美食–確認(rèn)下單–等待送達(dá)（催單、退單）–訂單送達(dá)（評(píng)價(jià)）

那我就從瀏覽美食開(kāi)始給大家分析:

在四款產(chǎn)品中，我認(rèn)為在這個(gè)環(huán)節(jié)設(shè)計(jì)上，存在問(wèn)題的，就是口碑外賣。為了有助于大家更加直觀的分析，我將口碑外賣設(shè)計(jì)存在問(wèn)題的界面，簡(jiǎn)化為原型。原型更能直觀表達(dá)界面的邏輯關(guān)系，使大家把精力集中在交互元素、邏輯關(guān)系上。

問(wèn)題1：瀏覽任一店家食物界面，可點(diǎn)擊的熱區(qū)范圍有誤。請(qǐng)看下圖【圖中已經(jīng)圈出標(biāo)注】

原因1：只將熱區(qū)放在圖片和文字本身，而對(duì)于大部分習(xí)慣用右手操作的用戶來(lái)說(shuō)，圖中的藍(lán)色區(qū)域更接近手指，所以用戶常常會(huì)遇到以下尷尬場(chǎng)景：

1. 恩？不能點(diǎn)嗎？手機(jī)卡了
2. 不能查看“食物詳情”，只能直接點(diǎn)單？

原因2：沒(méi)有遵守一致性原則

當(dāng)用戶在“外賣”首界面，瀏覽選擇店家時(shí)，每個(gè)店家都是一個(gè)整體（包括店logo、店名、銷量、配送費(fèi)/起送費(fèi)、優(yōu)惠），和之后的留白區(qū)域。當(dāng)用戶觸發(fā)點(diǎn)擊，可點(diǎn)擊的區(qū)域是一個(gè)整體。同交互、同體驗(yàn)，當(dāng)用戶瀏覽選擇食物時(shí)，除了“添加食物數(shù)量”的botton以外，其余部分也應(yīng)該是一個(gè)整體區(qū)域，即用戶可點(diǎn)擊區(qū)域。

改進(jìn)方法：遵守一致性原則，加大熱區(qū)，即用戶可點(diǎn)擊范圍，使用戶體驗(yàn)更加流暢。

問(wèn)題2：食物詳情圖，前后款食物滑動(dòng)設(shè)計(jì)存在問(wèn)題。請(qǐng)看下圖【圖中已經(jīng)圈出標(biāo)注】

設(shè)計(jì)的目標(biāo)行為是：讓用戶通過(guò)左右滑動(dòng)查看上一款和下一款的食物

原因1：與用戶期望不符。但是，我覺(jué)得這里的設(shè)計(jì)，用戶的行為可能是左右滑動(dòng)，但是，大多數(shù)用戶的心理卻不是“ok，我滑動(dòng)是來(lái)查看前一款和后一款食物的”。作為用戶，大多數(shù)用戶的心理應(yīng)該是“這款食物有N張?jiān)斍閳D片，而此時(shí)我在瀏覽他的第m張”。所以，造成用戶左右滑動(dòng)的這種行為的心理和設(shè)計(jì)的目標(biāo)是不相符的。這會(huì)造成什么呢？

用戶A：額，怎么變成另一款食物了呢，不應(yīng)該是我點(diǎn)擊進(jìn)去那款食物的詳情圖片嗎？

所以，設(shè)計(jì)與用戶期望不符。

原因2：沒(méi)有意義。

如果說(shuō)，設(shè)計(jì)師想設(shè)計(jì)前后滑動(dòng)這樣一種行為，讓用戶來(lái)查看前一款和后一款的食物，那么就應(yīng)該集中在行為上，而標(biāo)記共有多少款食物，此時(shí)此刻，用戶在瀏覽第幾款食物，完全是多余的。用戶最關(guān)心的應(yīng)該是，此時(shí)此刻，食物的詳情，而不是這家店有多少食物，我在瀏覽這家店的第幾款食物，早在首界面，用戶就應(yīng)該大致清晰的知道，這家店的基本菜單了。所以，這家店總共有多少食物，對(duì)用戶來(lái)說(shuō)，意義不大，甚至沒(méi)有意義，沒(méi)必要給用戶增加理解負(fù)擔(dān)。
改進(jìn)方法：不多廢話，直接上原型圖【更多、更佳方法，我也在思考中，會(huì)同步更新，暫時(shí)先提供兩種方法給大家，個(gè)人更趨向于第一種方法】

下面來(lái)談一談確認(rèn)訂單頁(yè)面:

我們先從導(dǎo)航和按鈕上文字內(nèi)容談起【請(qǐng)看下圖】

每個(gè)產(chǎn)品該界面的導(dǎo)航文字和按鈕文字整理如下：

那我先從導(dǎo)航文字講起，共有三種情況，分別為“確認(rèn)訂單”、“提交訂單”、“訂單確認(rèn)”。

從用戶角度出發(fā)，一切以用戶操作為基準(zhǔn)，交互本身就是在設(shè)計(jì)用戶行為，所以流程中的每一個(gè)行為的發(fā)出都是用戶本身。所以，在正常的用戶操作流程中，正確的描述應(yīng)該是一個(gè)步驟到另一個(gè)步驟，是“用戶”“+”做了一些事情“，所以在導(dǎo)航的文字設(shè)計(jì)中，應(yīng)該采用”動(dòng)賓“的結(jié)構(gòu)更加合理。即”用戶在確認(rèn)訂單“或者”用戶在提交訂單“，而不是”用戶在訂單確認(rèn)“。

接下來(lái)，談一談按鈕上的文字，分別有”確認(rèn)下單“和”提交訂單“兩種。

與”確認(rèn)下單“相比較，”提交訂單“包含了很多的不確定性和不穩(wěn)定性，”確認(rèn)下單“，是用戶當(dāng)時(shí)所處的場(chǎng)景，”提交訂單“更像是用戶未完成那環(huán)節(jié)中的一個(gè)行為。所以”確認(rèn)下單“，更能使用戶的心理更加確定，使用戶對(duì)整個(gè)操作流程更加清晰，界面的反饋更加清晰。

綜合來(lái)說(shuō)，餓了么和百度外賣在此處的設(shè)計(jì)更加合理，更加符合用戶心理。

還是訂單頁(yè)面，下來(lái)來(lái)談?wù)勚攸c(diǎn)，就是訂單信息的呈現(xiàn)和排列方式?！臼紫?，我先將界面原型化，幫助大家更加清晰分析】

說(shuō)明一下，在這里我只把這4款app訂單界面的共同信息總結(jié)出來(lái)進(jìn)行討論分析，而個(gè)別app特有的信息暫不在討論范圍內(nèi)。

下面開(kāi)始分析：

首先，用戶希望知道哪些信息：【此處為簡(jiǎn)單排序，無(wú)優(yōu)先級(jí)】

1. 我點(diǎn)了什么東西
2. 我要付多少錢
3. 我要怎么付款
4. 這些東西什么時(shí)候送到我的手里
5. 要如何聯(lián)系我，送到我的手里
6. 店家有哪些優(yōu)惠呢
7. 備注

第一步要做的就是，針對(duì)這7個(gè)問(wèn)題，根據(jù)用戶心理，進(jìn)行一個(gè)優(yōu)先級(jí)的排序

@a：從使用產(chǎn)品本身，即外賣app角度出發(fā)，用戶最關(guān)心的就是，在自己點(diǎn)完菜的基礎(chǔ)上，這些東西要如何送到我的手里？什么時(shí)候可以都送到我的手里？。所以，“如何聯(lián)系我，送到我的手里”應(yīng)該排在首位、緊接著應(yīng)該是“這些東西什么時(shí)候送到我的手里”。此時(shí)，4和5的位置就解決了！

@b：從整個(gè)”訂單“的目的出發(fā)，付款應(yīng)該是該界面的最終目標(biāo)。所以從整個(gè)布局來(lái)看，付款按鈕的邏輯位置應(yīng)該在整個(gè)頁(yè)面的右下角。那從付款按鈕出發(fā)，”我要付多少錢“的邏輯位置，應(yīng)該和付款按鈕最接近，所以，”我要付多少錢“應(yīng)該排在相對(duì)末尾的位置。

為什么這里是“相對(duì)末尾”呢，因?yàn)橐紤]到“備注”的問(wèn)題，因?yàn)閷?duì)于大部分用戶而言，使用備注的頻率很低。他屬于用戶關(guān)注度最低一級(jí)，（和店家也有很大關(guān)系，店家到底會(huì)不會(huì)理會(huì)你的備注信息呢，所以這里不確定因素很多）即使去掉備注，我也可以吃到飯，只是吃的味道和想象中有些差別而已，所以這里”備注“要排在最末的位置，”我要付多少錢“排在他的上面即可。所以，2和7的位置也確定了。
@c：接著”我要付多少錢“，那么，關(guān)于錢的信息主要來(lái)自于”我點(diǎn)了什么東西“，所以，按照合理的邏輯順序，應(yīng)該排在“我要付多少錢”上面。那么，1的位置確定。

@d：下面解決解“我要怎么付款”，關(guān)于“money”方面的一些事情，應(yīng)該是和1、2放在一起，而1和2都是屬于信息展示類，而3”我要怎么付款“偏向于讓用戶更改一些信息，所以他一定不能放在兩者的中間，那么，就有兩種選擇，要么放在上面，要么放在下面。而根據(jù)@b中的理由，那么最好的辦法，就是將其放在上面。所以3的位置確定。

@e：當(dāng)然，優(yōu)惠，是不可忽視的現(xiàn)在基本上已經(jīng)作為產(chǎn)品重要競(jìng)爭(zhēng)點(diǎn)之一，同類型的app，哪個(gè)app花費(fèi)越少，當(dāng)然用戶就回傾向選擇那個(gè)花費(fèi)少的app，即使體驗(yàn)有不合理的地方也會(huì)被用戶原諒，換句話說(shuō)，即使用戶實(shí)在不會(huì)使用，他也會(huì)找教程把他學(xué)會(huì)的。畢竟，花的可是兜里的錢??！并且，有優(yōu)惠，更堅(jiān)定用戶下單的決心，所以優(yōu)惠這塊要單獨(dú)拿出來(lái)最好。與錢相關(guān)，又與最后的付款金額掛鉤，放在”我要怎么付款“和”我點(diǎn)了什么東西+我要付多少錢“之間即可。6的位置確定。

所以正確的順序應(yīng)該是：

1. 要如何聯(lián)系我，送到我的手里
2. 這些東西什么時(shí)候送到我的手里
3. 我要怎么付款
4. 店家有哪些優(yōu)惠呢
5. 我點(diǎn)了什么東西
6. 我要付多少錢
7. 備注

下面一步就是對(duì)這些優(yōu)先級(jí)信息進(jìn)行整合歸類。我按照信息展示（無(wú)需用戶操作）和信息修改（需用戶操作）將其上下整合，是信息更加簡(jiǎn)潔?！具@里，共整合成5個(gè)模塊，我把整合完成之后的進(jìn)一步拓展信息也放了上去】

請(qǐng)看下圖

下面放上原型，供大家參考：

關(guān)于后面等待送達(dá)（催單、退單）–訂單送達(dá)（評(píng)價(jià)），我會(huì)陸續(xù)更新！期待大家繼續(xù)關(guān)注！

大家可以去我的behance主頁(yè)，看原文，這里提供我的原文鏈接：

https://www.behance.net/gallery/37136317/_

作者：大圣（微信號(hào)wzydml），交互設(shè)計(jì)師。

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