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