大廠設(shè)計(jì)師是如何做原型走查的

相信在工作中很多人總有這樣一種感觸，我們?cè)O(shè)計(jì)似乎是生存在“食物鏈”最底端的，產(chǎn)品要安排一下我們的視覺、開發(fā)要質(zhì)疑一下我們的邏輯、運(yùn)營要吐槽一下我們的審美......似乎整個(gè)產(chǎn)品的每一環(huán)都可以對(duì)我們“指指點(diǎn)點(diǎn)”，唯獨(dú)我們自己說的話卻沒辦法做到擲地有聲、使人信服，這究竟是為什么？本篇文章通過對(duì)最近比較熱門的生鮮電商產(chǎn)品——京東到家的原型走查分析，為大家提供一個(gè)方法和思路，讓大家走出視覺層，更深入的了解產(chǎn)品背后的邏輯和理論。我們并不是在給產(chǎn)品“挑毛病”，只是想通過自己一點(diǎn)小小的努力，引發(fā)大家更多的思考，讓你在某個(gè)想拒絕卻又無從開口的瞬間，能夠心里有底氣地大聲說出：“這鍋，我不背?！痹谀玫皆蛨D，首先要確定我們想要用戶做什么？是否符合產(chǎn)品目標(biāo)？案例一：如下圖所示，該頁面是一個(gè)菜譜的詳情頁。作為一個(gè)生鮮電商產(chǎn)品，產(chǎn)品在設(shè)計(jì)菜譜這樣一個(gè)功能的時(shí)候必然不是單單的想告訴用戶這道菜如何做，需要哪些食材。而它最終的目的是通過分享菜譜的形式來吸引用戶，引起用戶的好奇心，促使用戶下單，完成轉(zhuǎn)化。而京東到家的這一頁面只有菜譜，而沒有提供用戶釋放好奇心，釋放情緒的出口，也就是說沒有給最終下單創(chuàng)建一個(gè)入口。這就意味著交易轉(zhuǎn)化的流失。而競(jìng)品在此處就十分明確產(chǎn)品目標(biāo)，將菜譜中所需的食材列出，并且可以一鍵添加購物車結(jié)算，讓用戶的情緒迅速找到出口，完成轉(zhuǎn)化。案例二：詳情頁面中需要引導(dǎo)用戶把商品加入購物車，結(jié)算功能主要在購物車中體現(xiàn)。通過滑動(dòng)商品詳情頁，加入購物車按鈕消失，吸底按鈕去結(jié)算，功能導(dǎo)向發(fā)生偏差。案例三：優(yōu)惠券列表頁眾所周知，電商產(chǎn)品優(yōu)惠券頁面主要功能導(dǎo)向就是通過抓住用戶“占便宜”的心理，在界面上突出優(yōu)惠券的“優(yōu)惠力度”和“去使用”的功能按鈕，來促使用戶下單，完成最終轉(zhuǎn)化。而在京東到家的優(yōu)惠券界面中（如下圖左邊界面所示），卻把“去使用”按鈕使用線框進(jìn)行了弱化處理，并且在界面底部使用了一個(gè)實(shí)色按鈕去引導(dǎo)用戶進(jìn)入“邀友領(lǐng)現(xiàn)金”的活動(dòng)頁，使得用戶的視覺中心發(fā)生轉(zhuǎn)移，從而影響了原本界面的功能導(dǎo)向。而正確的做法如右圖所示，在首屏界面展示出必要的優(yōu)惠券信息以及突出重點(diǎn)內(nèi)容來幫助用戶建立認(rèn)知、增加信任，最后通過對(duì)按鈕的突出來對(duì)用戶進(jìn)行正確的功能引導(dǎo)，從而完成促使下單的最終目的。每一篇文章都有它都核心思想、每一張圖片都有它的視覺中心，而對(duì)于一個(gè)界面來說，核心功能是否存在和突出，則是決定此頁面能否達(dá)成產(chǎn)品目標(biāo)的關(guān)鍵所在。以秒殺商品列表頁為例：秒殺產(chǎn)品和普通產(chǎn)品最大的優(yōu)勢(shì)在于低價(jià)，而低價(jià)對(duì)于絕大多數(shù)用戶來說都是有“致命”吸引力的。但單純的低價(jià)無法驅(qū)動(dòng)用戶下單轉(zhuǎn)化，因?yàn)橛脩魧?duì)這件事情并無緊迫感。結(jié)合實(shí)際生活，如果一件事情并不是很趕時(shí)間急著要做，那么通常都會(huì)拖到最后才做，以至于最后可能忘了做。用戶下單也是相同的道理，低價(jià)的產(chǎn)品的確是有吸引力，但是在緊迫性上如果沒有突出，那么用戶可能就會(huì)逛著逛著把這件事情忘掉了。上圖中京東到家的秒殺頁面雖然展示出了低價(jià)，但由于核心倒計(jì)時(shí)功能的缺失，并未給用戶營造出一種時(shí)間上的緊迫感，以至于無法驅(qū)動(dòng)用戶產(chǎn)生立即購買的情緒。而在互聯(lián)網(wǎng)生活中，一個(gè)頁面如果無法在第一時(shí)間抓住用戶，那么基本也就代表著錯(cuò)過。對(duì)比競(jìng)品界面在頂部有較為醒目的秒殺活動(dòng)banner以及讓人產(chǎn)品緊迫感的倒計(jì)時(shí)，可以最大程度的刺激用戶的緊張情緒，促使下單，完成轉(zhuǎn)化。人的行為總是具有慣性的，當(dāng)用戶對(duì)一個(gè)功能有了基本的預(yù)期，我們就不要輕易的打破這個(gè)預(yù)期。在設(shè)計(jì)用戶體驗(yàn)的時(shí)候我們都知道一個(gè)原則“多讓用戶選擇而不是讓用戶去輸入”，用戶都是“懶惰”的，更何況通常來說用戶在進(jìn)行意見反饋時(shí)的情緒都是焦慮而煩躁的，用戶期望通過最簡單有效的方式快速的解決問題，而不是花費(fèi)大量時(shí)間去打字。對(duì)比上圖的兩個(gè)界面不難發(fā)現(xiàn)，右邊的設(shè)計(jì)在對(duì)用戶心理的把控上做的更為細(xì)致，通過將問題的分類列出、提供上傳圖片等功能，讓用戶在反饋過程中也能保持良好的體驗(yàn)，減少了對(duì)信息的焦慮感。大多數(shù)的互聯(lián)網(wǎng)產(chǎn)品除了核心功能之外，總是會(huì)有一些別的功能。外環(huán)功能輔助核心功能產(chǎn)生用戶粘性，提升客戶留存率，對(duì)品牌產(chǎn)生依賴。案例一：食譜教程詳情案例二：種草文章詳情由以上可知，在一些干貨教程和種草文章里添加互動(dòng)和種草商品鏈接，可讓用戶在觀看文章的同時(shí)產(chǎn)生與博主的互動(dòng)，也可以迅速購買到想要的商品。建議京東到家添加相關(guān)商品鏈接，形成閉環(huán)。一個(gè)產(chǎn)品中大都存在多種角色，如游客、普通用戶、新用戶、VIP以及各種等級(jí)的用戶角色，在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，應(yīng)考慮全面不同角色的不同呈現(xiàn)和體驗(yàn)。以首頁中具有不同角色體驗(yàn)的福利活動(dòng)專區(qū)為案例分析：由以上可以看出3種用戶角色之間，在呈現(xiàn)上新人活動(dòng)專區(qū)不同，而快捷入口完全相同。整體看來只區(qū)分了新用戶與普通用戶，對(duì)于普通用戶和VIP用戶并沒有區(qū)分。對(duì)于促進(jìn)營收的增值模塊【會(huì)員快捷入口】，VIP用戶和普通用戶在首頁呈現(xiàn)相同，在二級(jí)頁面卻不同，在一定程度上不符合用戶預(yù)期，且未能達(dá)到促進(jìn)營收，提高轉(zhuǎn)化的目的。在不改變?cè)季值那闆r下，建議依據(jù)會(huì)員特權(quán)即會(huì)員紅包以及下單返津貼，針對(duì)【會(huì)員快捷入口】，通過更改入口文字以及添加角標(biāo)提示，來區(qū)分呈現(xiàn)并吸引用戶注意力，促進(jìn)轉(zhuǎn)化。而對(duì)于新用戶，最重要的是以免費(fèi)新人禮包吸引并留住用戶，對(duì)于付費(fèi)的開通會(huì)員功能，則可能讓用戶望而卻步，所以不需要重點(diǎn)提示，只需更改快捷入口文字即可。每一個(gè)行業(yè)、產(chǎn)品類別都有特定的布局結(jié)構(gòu)，統(tǒng)一的布局結(jié)構(gòu)，可以讓人們更容易辨識(shí)使用產(chǎn)品，減少用戶記憶負(fù)擔(dān)。為了更全面、客觀分析，以購物車為案例，選取方向?yàn)橄嗤r類產(chǎn)品、相近的電商類、外賣類作為競(jìng)品分析對(duì)象。（1）首先從功能框架上分析：從以上對(duì)比中，不難看出電商類app，訂單板塊都在個(gè)人中心內(nèi)，已然形成一種約定俗成，突然的移出是否會(huì)給用戶帶來一定的不習(xí)慣？個(gè)人中心又稱為“我的”，是為了讓用戶快速找到需要的功能完成某項(xiàng)操作。而訂單、錢包卡券、發(fā)票等均屬于個(gè)人物品，去個(gè)人中心內(nèi)尋找也符合用戶日程習(xí)慣和認(rèn)知。（2）結(jié)合用戶購物流程分析：由下圖可以看出，用戶在購買前查看評(píng)論是重要因素之一，而收到商品在沒有質(zhì)量問題前提時(shí)，購物行為已可結(jié)束。在個(gè)人中心中，將訂單的待付款、待發(fā)貨、待收貨

和

待評(píng)價(jià)、售后

這幾種狀態(tài)分類羅列，一方面方便用戶快速查看不同狀態(tài)下訂單的個(gè)數(shù)；另一方面也可以暗示/提示用戶，在完成收貨后還有評(píng)論和售后可以操作。這樣便可促進(jìn)評(píng)論，形成完整閉環(huán)，更有利平臺(tái)的良好運(yùn)轉(zhuǎn)。（3）京東到家目前方案分析：a、從用戶訴求角度看，訂單追蹤作為核心功能，成為獨(dú)立板塊確實(shí)可以方便用戶查看，但目前app的訂單列表只有簡單的混合羅列，未對(duì)各種狀態(tài)做分類，沒有達(dá)到很好的減步長效果。b、從業(yè)務(wù)訴求角度看，用戶購買會(huì)員、打卡等促進(jìn)更多轉(zhuǎn)化、增加用戶粘性也很重要。我的訂單作為個(gè)人中心的核心功能之一，在產(chǎn)生訂單后，會(huì)使用戶反復(fù)進(jìn)入個(gè)人中心。訂單的抽離無疑會(huì)導(dǎo)致用戶進(jìn)入個(gè)人中心的條件大大減少，過多輔助功能的設(shè)置沒有了導(dǎo)流，達(dá)不到更好的效果。（4）結(jié)論布局建議遵從用戶習(xí)慣和行業(yè)產(chǎn)品類別方向，放入“我的”中。根據(jù)界面布局七大原則中的相似原則，不僅同一頁面中相同、相似的功能和內(nèi)容要保持一致性，在同一層級(jí)間的不同界面，如果在功能上具有相似性，也應(yīng)在布局結(jié)構(gòu)上保持一致。如上圖所示，在首頁金剛區(qū)中超市便利、買菜、水果、鮮花等都屬于同一層級(jí)下的不同商品類別，在功能布局上應(yīng)該保持一致性，但家居時(shí)尚板塊在展現(xiàn)類似的界面內(nèi)容時(shí)，布局卻和其他幾類有很大差別，這里會(huì)造成用戶操作理解成本的增加，降低用戶體驗(yàn)。所以，在具有相同層級(jí)、功能類似的界面中應(yīng)該盡量保證布局結(jié)構(gòu)的一致性，這樣對(duì)用戶體驗(yàn)和開發(fā)的成本的控制上都會(huì)有更好的提升。一個(gè)良好的布局，必然要考慮到屏幕的利用率、承載率。屏幕利用率的提升在一定程度上可以提高用戶的閱讀效率；同時(shí)對(duì)于產(chǎn)品來說，在一定程度上加大了產(chǎn)品的曝光率以及點(diǎn)擊率。案例一：發(fā)現(xiàn)食譜列表案例二：確認(rèn)訂單先來回想一下，在界面設(shè)計(jì)中有哪些方式可以表現(xiàn)信息的不同層級(jí)，大小，顏色，位置，陰影，模糊，透明度。這些方式大家可能已經(jīng)非常熟悉。但在原型里上，我們是如何分辨信息層級(jí)的？最熟悉的，就是距離，同一層級(jí)中距離會(huì)近一些，不同層級(jí)的距離相對(duì)遠(yuǎn)一些，若距離一樣用戶的認(rèn)知就會(huì)發(fā)生偏差，如下圖選項(xiàng)多了是為了方便用戶選擇，但相同選項(xiàng)一字排開還是挺讓人頭大的，在產(chǎn)品角度幫用戶分類，提高信息層級(jí)性，幫助用戶快速選擇。首先要弄清楚用戶是誰？什么情況下會(huì)使用什么功能？內(nèi)容分類就是化繁為簡，從而更好的滿足用戶需求。根據(jù)用戶場(chǎng)景來對(duì)功能進(jìn)行分類，由菜式、場(chǎng)景、食材進(jìn)行分類使用戶能快速找到所需入口，如下大段文字的信息，不能直觀的看到重點(diǎn)，會(huì)影響用戶體驗(yàn)度，精簡信息把重要的信息體現(xiàn)出來，減少其他不重要的信息干擾，提高閱讀效率。信息視覺流也就是尼爾森的F型瀏覽模式，即用戶從左至右，從上至下的閱讀瀏覽習(xí)慣。合理的視覺流就是依據(jù)F型瀏覽模式，將信息依次排布。此處在京東到家中沒有找到一個(gè)較好的案例，所以選擇其競(jìng)品美團(tuán)買菜為例：交互邏輯的合理性和通暢性是我們?cè)谧卟榈臅r(shí)候需要重點(diǎn)關(guān)注和比較常用的點(diǎn)。邏輯是否合理、通暢直接決定了我們后期是否需要改稿。案例一（交互邏輯是否合理）我的關(guān)注列表空狀態(tài)下：案例二（交互邏輯是否通暢）含重要操作且篇幅較長的頁面：屏幕滾動(dòng)時(shí)，主要功能入口應(yīng)保持固定在可以選擇的地方，可以提高用戶操作效率，同時(shí)減少用戶滾屏多次還要返回首屏選擇功能入口的焦慮感。用戶希望所點(diǎn)即所想，所見即所得。而違背這一邏輯的交互，則勢(shì)必會(huì)造成用戶的失落感，從而影響用戶的使用體驗(yàn)。以首頁的超級(jí)品牌周板塊為例：其正常的交互流程是沒問題的，但當(dāng)用戶想要回到上一個(gè)標(biāo)簽內(nèi)容時(shí)，卻發(fā)現(xiàn)頁面跳轉(zhuǎn)了。并且無論點(diǎn)擊任何區(qū)域都會(huì)跳轉(zhuǎn)到同一頁面，而這個(gè)頁面沒有用戶想要看的內(nèi)容。這在對(duì)用戶交互預(yù)期的建立上是致命的。在眾多電商產(chǎn)品的培養(yǎng)下，用戶已經(jīng)太熟悉點(diǎn)擊一個(gè)產(chǎn)品就進(jìn)入到對(duì)應(yīng)產(chǎn)品的詳情頁了，而當(dāng)跳轉(zhuǎn)的頁面展示的內(nèi)容并不是用戶所預(yù)期的時(shí)候，用戶會(huì)產(chǎn)生失落感和疑惑感，影響用戶體驗(yàn)。在拿到原型時(shí)，也需要走查考慮當(dāng)前頁面包含的操作是否可以減少操作步驟，以提高用戶的操作效率，達(dá)到較好的用戶體驗(yàn)。以購物車頁面為例：案例一：案例二：容錯(cuò)性就是是否允許用戶犯錯(cuò)，一個(gè)良好的設(shè)計(jì)必然要有包容性。引導(dǎo)和提示是容錯(cuò)設(shè)計(jì)很重要的一個(gè)方式，二次提示用戶是否進(jìn)行此操作，給用戶反應(yīng)的時(shí)間。對(duì)單條列表進(jìn)行橫向滑動(dòng)顯示其支持的操作選項(xiàng)，是一種比較常見的移動(dòng)端交互方式，在頁面中增加客戶認(rèn)知的交互操作比單擊選擇會(huì)更好一些。正向流程一般指用戶日常購物時(shí)從下單付款至收貨的過程，而逆向流程相反，是指商品逆向回到倉庫，資金逆向回到用戶手中，信息流支撐物流、資金流的過程。在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，大都會(huì)將精力投注在正向流程上，而對(duì)于逆向流程則會(huì)疏忽。以取消訂單逆向流程為例：由以上可以看出，取消訂單入口隱藏略深，進(jìn)入詳情頁后，從發(fā)現(xiàn)更多到點(diǎn)擊取消需要3步。另外基于用戶場(chǎng)景，用戶此時(shí)的心理是著急的，迫切的。此時(shí)對(duì)于第一步【發(fā)現(xiàn)更多按鈕】所用的時(shí)間是無法估算的，這無疑會(huì)增加用戶的焦慮，致使用戶對(duì)產(chǎn)品產(chǎn)生厭惡抵觸，從而得不償失。對(duì)于此問題可參考同類競(jìng)品：互聯(lián)網(wǎng)發(fā)展至今，用戶早已被培養(yǎng)出了一套成熟且具有普適性的使用習(xí)慣。我們?cè)谧隹丶某尸F(xiàn)和樣式選取的時(shí)候，不能盲目的追求創(chuàng)新和差異化，也要慎重的考慮是否符合用戶的一貫認(rèn)知和習(xí)慣，否則會(huì)加大用戶理解使用的成本，從而產(chǎn)生不好的體驗(yàn)。以收貨地址編輯的頁面為例：由以上可看出，其在頁面底部的大面積空白區(qū)域“孤伶伶”的設(shè)計(jì)了一個(gè)刪除按鈕，從視覺層級(jí)的突出上來看，的確很快的抓住了用戶的視覺重心。從手勢(shì)熱區(qū)來看，也可以迅速讓用戶完成操作。但很顯然在頁面中我們對(duì)刪除功能的設(shè)計(jì)應(yīng)該是保守的，用戶編輯修改一條數(shù)據(jù)比刪除重建的成本要小很多，而且在設(shè)計(jì)常用基礎(chǔ)功能時(shí)，我們應(yīng)盡量選擇用戶所熟知的樣式（如上圖所示）這樣可以有效降低用戶的理解成本，合理避免對(duì)用戶過多的干擾。異常狀態(tài)分為網(wǎng)絡(luò)異常、服務(wù)器異常和空狀態(tài)，應(yīng)有相應(yīng)的處理方式和提醒文字，以購物車空狀態(tài)頁面為例：拋去之前提過的【重新加載按鈕】不合理，“你還沒有關(guān)注門店”的提示在用戶角度也是合理的，但是站在產(chǎn)品角度還是可以優(yōu)化，可加入門店推薦，提高轉(zhuǎn)化率。為什么要保持一致？一般情況主要是會(huì)對(duì)產(chǎn)品開發(fā)團(tuán)隊(duì)和用戶兩方面都有好處，于用戶而言，對(duì)界面和功能操作的認(rèn)知統(tǒng)一，圖文列表是很好的信息展現(xiàn)形式，在電商app中商品列表是很龐大的信息量，統(tǒng)一信息模塊的展現(xiàn)，使頁面更加嚴(yán)謹(jǐn)，對(duì)設(shè)計(jì)和開發(fā)而言效率都有提升。一個(gè)合理