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

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，越來(lái)越多的Web產(chǎn)品開(kāi)始布局移動(dòng)端，因此越來(lái)越多的PM在交流討論移動(dòng)APP的產(chǎn)品設(shè)計(jì)。筆者從事移動(dòng)互聯(lián)網(wǎng)已經(jīng)有一年多，通過(guò)不斷的學(xué)習(xí)和實(shí)踐積累了一些心得，現(xiàn)在整理并分享一下，希望對(duì)新接觸移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的PM有所幫助。
移動(dòng)APP也算是一種C/S的架構(gòu)，除了此架構(gòu)本身的一些產(chǎn)品特性之外，我們還需要注意移動(dòng)互聯(lián)網(wǎng)的一些特性，像使用環(huán)境、觸摸操作等等，因此移動(dòng)產(chǎn)品最注重的就是內(nèi)容的交互形式。下面介紹的這十條產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)主要也就是圍繞交互和內(nèi)容的。
1、系統(tǒng)標(biāo)準(zhǔn)—依照用戶具體的使用情境和需求來(lái)決定是沿用標(biāo)準(zhǔn)還是創(chuàng)新。
相比Web產(chǎn)品，移動(dòng)APP產(chǎn)品有著初始的平臺(tái)系統(tǒng)特性，產(chǎn)品設(shè)計(jì)應(yīng)該遵循平臺(tái)系統(tǒng)的設(shè)計(jì)規(guī)范。合理的制定和使用標(biāo)準(zhǔn)，可以大幅度提高效率，有利于產(chǎn)品的一致性，提升用戶體驗(yàn)。除了基礎(chǔ)的標(biāo)準(zhǔn)外，我們可以根據(jù)具體的需求和目標(biāo)用戶的情境決定是否套用標(biāo)準(zhǔn)，或者創(chuàng)新標(biāo)準(zhǔn)。
推薦兩本入門必讀手冊(cè)：
《iOS人機(jī)界面指導(dǎo)手冊(cè)》Apple原著，朱晨翻譯。
《Android 4.0設(shè)計(jì)規(guī)范》Android原著，騰訊CDC團(tuán)隊(duì)翻譯。
2、目標(biāo)導(dǎo)向–以用戶為中心，關(guān)注用戶目標(biāo)而不是關(guān)注用戶要完成的任務(wù)。
用一句官話：秉承以用戶為中心的設(shè)計(jì)理念，應(yīng)用“以目標(biāo)為導(dǎo)向的APP設(shè)計(jì)”方法，進(jìn)行互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)。
無(wú)論是Web產(chǎn)品還是移動(dòng)APP產(chǎn)品，我們都應(yīng)當(dāng)關(guān)注用戶的目標(biāo)，以最簡(jiǎn)單直接的步驟給用戶想要的結(jié)果，特別是移動(dòng)互聯(lián)網(wǎng)的碎片化、易打斷的使用場(chǎng)景下，更應(yīng)該避免增加過(guò)多的步驟或操作任務(wù)。
3、直覺(jué)體驗(yàn)–APP設(shè)計(jì)方案必須能夠引導(dǎo)用戶做出最符合直覺(jué)的反應(yīng)行為。
移動(dòng)平臺(tái)系統(tǒng)有著基礎(chǔ)的體驗(yàn)標(biāo)準(zhǔn)，這些標(biāo)準(zhǔn)培養(yǎng)了用戶對(duì)APP應(yīng)用的體驗(yàn)認(rèn)知，因此我們需要理解用戶的期望、需要、動(dòng)機(jī)和使用情境來(lái)制定下一步操作或者內(nèi)容的出現(xiàn)位置，使用戶能夠順暢的完成交互行為。
例如：一個(gè)向用戶隱喻從右邊展開(kāi)內(nèi)容的按鈕，如果是從左邊展開(kāi)，那么這就超出了用戶直覺(jué)，用戶潛意識(shí)行為就會(huì)被打斷，且需要重新調(diào)整，這就無(wú)形中增加了用戶思考。例如：一個(gè)功能按鈕，用戶觸擊后潛意識(shí)會(huì)認(rèn)為下一步操作應(yīng)該會(huì)出現(xiàn)在這個(gè)按鈕的周邊，如果跑的太遠(yuǎn)，也超出了用戶直覺(jué)。
除了直覺(jué)，我們還需要考慮用戶的觸摸行為，所以下一步操作的出現(xiàn)位置應(yīng)該離用戶手指最近（舒適的操作范圍之內(nèi)）且不能被擋住（手指或手掌擋?。?br /> 4、成本控制–從細(xì)節(jié)開(kāi)始減少用戶的操作及學(xué)習(xí)成本，使用戶快速上手和識(shí)別產(chǎn)品特性。
了解用戶的使用情境（碎片化的時(shí)間，隨時(shí)會(huì)被打斷），盡量不要增加學(xué)習(xí)成本（操作學(xué)習(xí)、界面學(xué)習(xí)），因?yàn)橛脩舻臅r(shí)候是碎片化的，他們沒(méi)有太多時(shí)間學(xué)習(xí)，特別是多手式操作是有學(xué)習(xí)和記憶的成本的。
騰訊、百度等等很多第三方的數(shù)據(jù)顯示，一個(gè)月都不下載新應(yīng)用的用戶占60%以上，絕大多數(shù)APP應(yīng)用的用戶留存率不足40%。因此，除非你的產(chǎn)品是特別的剛需，否則不要挑戰(zhàn)用戶的智商，大部分用戶是不會(huì)像我們一樣對(duì)產(chǎn)品深思熟慮和了解透徹之后再使用的。
5、需求設(shè)計(jì)–以用戶的需求為中心，避免參雜個(gè)人的主觀喜好。
設(shè)計(jì)工作開(kāi)始之前，需要先想清楚：用戶是誰(shuí)，他們有什么特點(diǎn)，我們可以為他們解決什么問(wèn)題。提供真正能夠解決用戶問(wèn)題的設(shè)計(jì)方案，而不是自己喜歡的設(shè)計(jì)方案。
同時(shí)記住上一條，盡量傻瓜化，千萬(wàn)不要認(rèn)為，自己能夠理解的東西，用戶也能理解。
6、減少界面–盡量減少界面間的交互，避免新頁(yè)面切斷了用戶使用的流暢感。
在一個(gè)頁(yè)面里能夠交互完成的內(nèi)容，盡量減少頁(yè)面的切換，當(dāng)然前提是考慮了系統(tǒng)的負(fù)載。
例如搜索功能，觸擊搜索按鈕后平滑展開(kāi)輸入框，同時(shí)展開(kāi)虛擬鍵盤。例如選擇功能，觸擊后展開(kāi)選擇器，在選擇器里連續(xù)觸擊某條選項(xiàng)兩次完成選擇，或者選中某條選項(xiàng)后再觸擊完成。
如上兩條簡(jiǎn)單的示例，都是可以在當(dāng)前界面內(nèi)完成的。在當(dāng)前界面平緩交互出來(lái)的元素給用戶在體驗(yàn)上更加流暢，同時(shí)也讓用戶覺(jué)得只是在原有界面上載入了新元素，用戶感觀上只需要接受新的元素。而新界面突然切斷用戶使用的流暢感，也就是說(shuō)用戶的思維需要進(jìn)行切換，需要重新接受并認(rèn)識(shí)新的頁(yè)面，就像進(jìn)入了另一間屋子。
7、概念簡(jiǎn)化–避免概念輸出，要盡量以用戶聽(tīng)得懂的語(yǔ)言來(lái)表達(dá)設(shè)計(jì)。
這個(gè)取決于產(chǎn)品的定義和用戶群體，避免內(nèi)部概念或行業(yè)概念的輸出，例如房地產(chǎn)行業(yè)，你對(duì)購(gòu)房者說(shuō)租售比（租售比不是百分比數(shù)值），絕大多數(shù)用戶肯定不懂，如果你對(duì)購(gòu)房投資者說(shuō)租售比，他們肯定知道。
所以在產(chǎn)品設(shè)計(jì)中，元素和內(nèi)容的表達(dá)需要考慮用戶的定位，針對(duì)目標(biāo)用戶群體聽(tīng)得懂的語(yǔ)言來(lái)表達(dá)，使用通俗化的語(yǔ)言和通俗化的元素，無(wú)法避免的概念需要協(xié)助解釋，例如采用“模態(tài)”指引等等方式。
8、信息交互–基于信息層面的交互，應(yīng)該簡(jiǎn)單自然易懂。
信息層面的交互是最直觀的交互，因?yàn)樗旧砭湍芙o用戶直觀的信息反饋，因此信息的本身應(yīng)該簡(jiǎn)單易懂，不要讓用戶莫名其妙。
同時(shí)交互的設(shè)計(jì)流程要符合用戶期望及下意識(shí)行為。
9、簡(jiǎn)潔元素–減少視覺(jué)元素的堆疊，提高交互元素的辨識(shí)，合理隱喻交互元素。
APP設(shè)計(jì)中的視覺(jué)體驗(yàn)也很重要，如今簡(jiǎn)潔風(fēng)格是一種APP設(shè)計(jì)趨勢(shì)，復(fù)雜的元素會(huì)增加用戶的識(shí)別成本，用戶需要接受和學(xué)習(xí)的元素過(guò)多容易造成審美和使用的疲勞，特別是元素沒(méi)有統(tǒng)一的連貫性，所以界面越簡(jiǎn)潔越好，元素越少越好，可大大減少視覺(jué)上的信息接受量。
?
在移動(dòng)產(chǎn)品中，由于界面大小的因素，我們經(jīng)常會(huì)遇到用圖標(biāo)做功能按鈕，因此按鈕的圖標(biāo)就需要充分考慮用戶的體驗(yàn)認(rèn)知。例如普遍的圈型箭頭是刷新、心型是關(guān)注、星型是收藏、齒輪是設(shè)置 等等。我們?cè)诓捎脠D形隱喻功能的時(shí)候，應(yīng)當(dāng)考慮用戶的認(rèn)知，避免用戶學(xué)習(xí)和識(shí)別的成本。
10、明確結(jié)構(gòu)–合理劃分界面的邏輯結(jié)構(gòu)，按照不同的內(nèi)容與功能邏輯進(jìn)行劃分，突出結(jié)構(gòu)主次。
1、頁(yè)面中主要有三層結(jié)構(gòu)：默認(rèn)層、隱藏層、疊加層。默認(rèn)層：初始顯示的界面（頁(yè)面）；隱藏層：默認(rèn)隱藏的界面，需要操作才會(huì)顯示，例如導(dǎo)航等等；疊加層：是需要操作才會(huì)出現(xiàn)，例如對(duì)話框、警告、模態(tài)窗口和彈出信息等等。
2、頁(yè)面中分別劃分為三個(gè)區(qū)域：可操作區(qū)域、主流程、提示信息?？刹僮鲄^(qū)域：是主要內(nèi)容交互的區(qū)域，例如選項(xiàng)、信息交互等等；主流程：用于醒目的告訴用戶，你將進(jìn)行的操作行為是什么，會(huì)產(chǎn)生什么樣的結(jié)果；提示信息：展示用于操作的協(xié)助提示類的信息。
第2點(diǎn)關(guān)于頁(yè)面區(qū)域的介紹，只是筆者對(duì)界面結(jié)構(gòu)內(nèi)容的理解，僅供參考。第10條和第9條都是比較偏向于視覺(jué)體驗(yàn)，這一層級(jí)主要是通過(guò)色調(diào)來(lái)增強(qiáng)用戶體驗(yàn)，通過(guò)色調(diào)影響用戶的操作，并且通過(guò)界面結(jié)構(gòu)和內(nèi)容，清晰的告訴用戶在那里，退路在那里，能夠去那里。
以上10條，也許對(duì)你有所啟發(fā)，也許使你更加迷茫，但是正如筆者開(kāi)頭說(shuō)的，移動(dòng)互聯(lián)網(wǎng)產(chǎn)品更注重內(nèi)容的交互，所以除了這些理論性的知識(shí)，還需要去體驗(yàn)各類應(yīng)用（不局限于某一類），體驗(yàn)和了解他們的交互和展現(xiàn)形式。推薦一個(gè)方法：每天只玩一個(gè)移動(dòng)產(chǎn)品，玩熟玩透，并列出這個(gè)應(yīng)用的優(yōu)點(diǎn)和缺點(diǎn)，然后和大家分享交流，再?gòu)膭e人的眼中了解反饋，用不了一個(gè)月，你就能對(duì)移動(dòng)互聯(lián)網(wǎng)領(lǐng)域有所掌握了

唐中印老師的其它課程