從前輕后重看產(chǎn)品的設(shè)計(jì)原則

從前輕后重看產(chǎn)品的設(shè)計(jì)原則

本文作者Kant，分享了從前輕后重看產(chǎn)品的設(shè)計(jì)原則。產(chǎn)品中國摘錄如下：我做產(chǎn)品，最喜歡前輕后重。這是我最喜歡的原則，如果它可以算作原則的話。它是一條相當(dāng)普適的原則，從各個(gè)角度去理解，都有意義。流程體驗(yàn)上的前輕后重前輕后重最讓用戶感知到的，是流程體驗(yàn)上的前輕后重。它是體現(xiàn)在用戶解決需求，完成任務(wù)的過程中的。舉個(gè)例子，在比較完善的淘寶開店系統(tǒng)內(nèi)，開店的步驟如下：選擇開哪種店填詳細(xì)信息上傳驗(yàn)證材料在線考試填寫店鋪和商品信息。用戶在一步一步地完成任務(wù)的過程中，先只是做出輕量的選擇(選擇題)，然后做填空題，接著是準(zhǔn)備材料，學(xué)習(xí)知識并考試，然后才是最后的完成開店。用戶在流程上的體驗(yàn)，從前面的很輕，到后面的越來越重。這不能拋開產(chǎn)品設(shè)計(jì)方的需要，實(shí)際上，正是因?yàn)楫a(chǎn)品設(shè)計(jì)方有必然的、不可避免的需要(需要驗(yàn)證材料以辨別開店者的真?zhèn)?，需要在線考試來保證店主素質(zhì))，產(chǎn)品的流程和體驗(yàn)是肯定會(huì)存在重的一步或者幾步，這時(shí)，應(yīng)該把輕的步驟放在前面，讓用戶一步步做下來，在遇到重的步驟時(shí)，才沒那么容易放棄。此外，前輕后重的流程，也符合人們在線下生活中，甚至在所有任務(wù)完成過程中的先挑軟柿子捏的習(xí)慣。功能規(guī)劃上的前輕后重功能規(guī)劃上的前輕后重，指的是在規(guī)劃和架構(gòu)產(chǎn)品功能的過程中，應(yīng)當(dāng)先組建關(guān)鍵的、輕量的核心功能，使產(chǎn)品的定位得到基本實(shí)現(xiàn)，產(chǎn)品想要解決的問題得到基本解決。換句話說，應(yīng)當(dāng)先給產(chǎn)品搭骨架，然后再擴(kuò)展出組織、肌肉、血液和皮毛。這實(shí)際是最考驗(yàn)產(chǎn)品經(jīng)理功底的地方。前期時(shí)為產(chǎn)品搭建出了輕量但擴(kuò)展性很強(qiáng)的框架后，后面就能一步步地添加出更多的深化、輔助和周邊功能，解決更多的細(xì)分問題和類似問題。關(guān)于功能規(guī)劃上的輕與重，此前已有一篇博文更詳細(xì)地進(jìn)行了討論，可以看看：《產(chǎn)品的輕與重》用戶界面的前輕后重用戶界面的前輕后重，是我感知最深刻的前輕后重的體現(xiàn)之一。這是最考驗(yàn)產(chǎn)品設(shè)計(jì)者功底的地方。在設(shè)計(jì)用戶界面時(shí)，遵循前輕后重的原則，意味著需要把復(fù)雜性盡可能的隱藏，隱藏在屏風(fēng)背后，展現(xiàn)在用戶面前的，僅是一個(gè)按鈕、一個(gè)列表等盡可能簡單的元素。這里面的復(fù)雜性，可能包括實(shí)現(xiàn)復(fù)雜性，和功能組織的復(fù)雜性。實(shí)現(xiàn)的復(fù)雜性包括：列表中如何考慮哪些項(xiàng)在前面，哪些在后面?在為用戶提供信息和知識時(shí)，提供哪些，去除哪些?做出這個(gè)功能有多難，你需要考慮，但是一定決定要做，就別畏畏縮縮，希望用戶多么感恩戴德，以使自己的付出不被忽視。等等，肯定還有不少角度，畢竟我沒有使勁想全面。分別舉例。第一條，關(guān)于列表中項(xiàng)目的前后次序，你需要考慮這個(gè)，但不需要總是去唯恐用戶不知道你花了心思，你不需要給出原因甚至數(shù)值。正面的例子可以看看百度搜索結(jié)果頁，你會(huì)發(fā)現(xiàn)，百度給出的項(xiàng)目相關(guān)的信息中，只有項(xiàng)目(每一個(gè)搜索結(jié)果)的描述，沒有任何為什么該項(xiàng)目會(huì)排序在這個(gè)位置的原因，沒有什么PageRank得分或者外鏈個(gè)數(shù)什么的。因?yàn)橛脩舨恍枰私膺@些信息，你提供給他信息，他在你的產(chǎn)品中消耗時(shí)間，便是信任你的結(jié)果，你可以致力于如何做出最好的排序，但不要想著如何讓用戶信任你，用戶會(huì)因?yàn)槟愕呐判蚪Y(jié)果是合理的而信任你，而不是因?yàn)槟憬o出了“本站排序結(jié)果真實(shí)合理有效公正公平的10個(gè)原因”。負(fù)面的例子挺多，怕一舉就得罪了人，別人或許有自己的考慮，我就不提了。第二條，關(guān)于提供信息時(shí)的篩選，你需要考慮這個(gè)，但同樣的，不要想著告訴用戶，你去除了的項(xiàng)目，如果有用戶其實(shí)需要的信息，錯(cuò)不在你，你是因?yàn)楫a(chǎn)品設(shè)計(jì)中的什么什么考慮而迫不得已的。舉例，我們知道許多產(chǎn)品都會(huì)提供一個(gè)項(xiàng)目的創(chuàng)建時(shí)間、一個(gè)評論的發(fā)起時(shí)間，一個(gè)文章的最近修改時(shí)間等，聰明的產(chǎn)品在表現(xiàn)這個(gè)時(shí)間時(shí)，會(huì)有“5分鐘前”、“早上11:23”、“昨晚”等表現(xiàn)形式，這里，產(chǎn)品設(shè)計(jì)者就做出了統(tǒng)一的信息去除的取舍，對于今天以前的日期，在項(xiàng)目集合頁中，是不給出詳細(xì)時(shí)間的，也就是，不給出“昨晚23:13”，以保持頁面清爽。第三條，關(guān)于功能實(shí)現(xiàn)難度的宣告。這里挺有名的例子是關(guān)于微信里面的動(dòng)態(tài)Gif表情的背景透明的實(shí)現(xiàn)。該特性的實(shí)現(xiàn)是全球首次的，耗費(fèi)了團(tuán)隊(duì)大量的時(shí)間，但是這些都是普通用戶不需要知道的，你只需要告訴他們，這個(gè)特性有什么用就好了(如果沒太大用，那你花那么多代價(jià)干嘛)。同類的例子包括性能優(yōu)化的代價(jià)和效果、某個(gè)功能體驗(yàn)的方案選擇等。反面的例子我則想提關(guān)于眾移動(dòng)瀏覽器比拼HTML5得分的犯二現(xiàn)象。功能組織的復(fù)雜性則包括：如何按照用戶的視線順序，進(jìn)行針對性的元素排版?交互暗示是否需要區(qū)分輕重緩急，如果需要，如何區(qū)分?一二級列表、一二級標(biāo)題如何分類，如何組織?需要時(shí)才出現(xiàn)，那么什么時(shí)候(什么場景)需要什么功能、什么元素?等等等第一條，關(guān)于元素排版，你需要考慮這個(gè)，但不需要把為什么這么排的理由擺到界面上告訴用戶，你用心設(shè)計(jì)了。舉例來說，可以想想騰訊網(wǎng)的巨大改版，為什么從前在頁面左側(cè)的騰訊產(chǎn)品集錦，要放到頁面右側(cè)。第二條，關(guān)于交互暗示的輕重，這個(gè)例子很多，譬如你總是會(huì)看到，登錄按鈕總會(huì)是一個(gè)顯眼的顏色，而取消按鈕則往往是白色。第三條和第四條，關(guān)于列表和標(biāo)題的組織，以及需時(shí)出現(xiàn)的判斷，同樣可以看看這篇博文，《產(chǎn)品的輕與重》。技術(shù)架構(gòu)上的前輕后重技術(shù)架構(gòu)上的前輕后重，事實(shí)上已經(jīng)成為有經(jīng)驗(yàn)的產(chǎn)品團(tuán)隊(duì)的通用規(guī)則。無論是QQ、微信等龐大產(chǎn)品，還是正點(diǎn)鬧鐘、8684公交等移動(dòng)端的工具型產(chǎn)品，都已經(jīng)有意無意中將此規(guī)則應(yīng)用到了骨子里(或許沒有歸納出前輕后重這四個(gè)字，但做法是如此的)。技術(shù)上的前輕后重，能夠使產(chǎn)品獲得快速更新、快速迭代驗(yàn)錯(cuò)、選批實(shí)驗(yàn)的好處，壞處則是流量略多一點(diǎn)的損耗(畢竟同樣的邏輯，固化在客戶端，和放在服務(wù)端每次下載或者更新時(shí)下載，前者會(huì)使網(wǎng)絡(luò)包略小幾行代碼)。技術(shù)上前輕后重的好處，越來越為人們所重視，而壞處，則正在迅速變得越來越不重要。同樣舉例，QQ客戶端被許多用戶認(rèn)為非常重，但是實(shí)際上，QQ現(xiàn)有的功能群的數(shù)量，如果不利用前輕后重的辦法，重量更加難以想象。舉例而言，你或許已經(jīng)在網(wǎng)速不好時(shí)，打開QQ上的許多窗口，發(fā)現(xiàn)是一片空白，這個(gè)窗口雖然看似是一個(gè)客戶端窗口，實(shí)際上是使用的WebView控件來包裝網(wǎng)頁。而坊間傳聞，這一做法，QQ是在數(shù)年前從MSN處學(xué)習(xí)來的，彼時(shí)QQ團(tuán)隊(duì)發(fā)現(xiàn)M