隨著移動網際網路的發展,越來越多的Web產品開始佈局移動端,因此越來越多的PM在交流討論移動APP的產品設計。筆者從事移動網際網路已經有一年多,通過不斷的學習和實踐積累了一些心得,現在整理並分享一下,希望對新接觸移動網際網路產品的PM有所幫助。

移動APP也算是一種C/S的架構,除了此架構本身的一些產品特性之外,我們還需要注意移動網際網路的一些特性,像使用環境、觸控操作等等,因此移動產品最注重的就是內容的互動形式。下面介紹的這十條產品設計經驗主要也就是圍繞互動和內容的。

1、系統標準—依照使用者具體的使用情境和需求來決定是沿用標準還是創新。

相比Web產品,移動APP產品有著初始的平臺系統特性,產品設計應該遵循平臺系統的設計規範。合理的制定和使用標準,可以大幅度提高效率,有利於產品的一致性,提升使用者體驗。除了基礎的標準外,我們可以根據具體的需求和目標使用者的情境決定是否套用標準,或者創新標準。

推薦兩本入門必讀手冊:

《iOS人機介面指導手冊》Apple原著,朱晨翻譯。

《Android 4.0設計規範》Android原著,騰訊CDC團隊翻譯。

2、目標導向–以使用者為中心,關注使用者目標而不是關注使用者要完成的任務。

用一句官話:秉承以使用者為中心的設計理念,應用“以目標為導向的設計”方法,進行網際網路產品的設計。

無論是Web產品還是移動APP產品,我們都應當關注使用者的目標,以最簡單直接的步驟給使用者想要的結果,特別是移動網際網路的碎片化、易打斷的使用場景下,更應該避免增加過多的步驟或操作任務。

3、直覺體驗–設計方案必須能夠引導使用者做出最符合直覺的反應行為。

移動平臺系統有著基礎的體驗標準,這些標準培養了使用者對APP應用的體驗認知,因此我們需要理解使用者的期望、需要、動機和使用情境來制定下一步操作或者內容的出現位置,使使用者能夠順暢的完成互動行為。

12

例如:一個向使用者隱喻從右邊展開內容的按鈕,如果是從左邊展開,那麼這就超出了使用者直覺,使用者潛意識行為就會被打斷,且需要重新調整,這就無形中增加了使用者思考。例如:一個功能按鈕,使用者觸擊後潛意識會認為下一步操作應該會出現在這個按鈕的周邊,如果跑的太遠,也超出了使用者直覺。

除了直覺,我們還需要考慮使用者的觸控行為,所以下一步操作的出現位置應該離使用者手指最近(舒適的操作範圍之內)且不能被擋住(手指或手掌擋住)。

4、成本控制–從細節開始減少使用者的操作及學習成本,使使用者快速上手和識別產品特性。

瞭解使用者的使用情境(碎片化的時間,隨時會被打斷),儘量不要增加學習成本(操作學習、介面學習),因為使用者的時候是碎片化的,他們沒有太多時間學習,特別是多手式操作是有學習和記憶的成本的。

騰訊、百度等等很多第三方的資料顯示,一個月都不下載新應用的使用者佔60%以上,絕大多數APP應用的使用者留存率不足40%。因此,除非你的產品是特別的剛需,否則不要挑戰使用者的智商,大部分使用者是不會像我們一樣對產品深思熟慮和了解透徹之後再使用的。

5、需求設計–以使用者的需求為中心,避免參雜個人的主觀喜好。

設計工作開始之前,需要先想清楚:使用者是誰,他們有什麼特點,我們可以為他們解決什麼問題。提供真正能夠解決使用者問題的設計方案,而不是自己喜歡的設計方案。

同時記住上一條,儘量傻瓜化,千萬不要認為,自己能夠理解的東西,使用者也能理解。

6、減少介面–儘量減少介面間的互動,避免新頁面切斷了使用者使用的流暢感。

在一個頁面裡能夠互動完成的內容,儘量減少頁面的切換,當然前提是考慮了系統的負載。

例如搜尋功能,觸擊搜尋按鈕後平滑展開輸入框,同時展開虛擬鍵盤。例如選擇功能,觸擊後展開選擇器,在選擇器裡連續觸擊某條選項兩次完成選擇,或者選中某條選項後再觸擊完成。

13

如上兩條簡單的示例,都是可以在當前介面內完成的。在當前介面平緩互動出來的元素給使用者在體驗上更加流暢,同時也讓使用者覺得只是在原有介面上載入了新元素,使用者感觀上只需要接受新的元素。而新介面突然切斷使用者使用的流暢感,也就是說使用者的思維需要進行切換,需要重新接受並認識新的頁面,就像進入了另一間屋子。

7、概念簡化–避免概念輸出,要儘量以使用者聽得懂的語言來表達設計。

這個取決於產品的定義和使用者群體,避免內部概念或行業概念的輸出,例如房地產行業,你對購房者說租售比(租售比不是百分比數值),絕大多數使用者肯定不懂,如果你對購房投資者說租售比,他們肯定知道。

所以在產品設計中,元素和內容的表達需要考慮使用者的定位,針對目標使用者群體聽得懂的語言來表達,使用通俗化的語言和通俗化的元素,無法避免的概念需要協助解釋,例如採用“模態”指引等等方式。

8、資訊互動–基於資訊層面的互動,應該簡單自然易懂。

資訊層面的互動是最直觀的互動,因為他本身就能給使用者直觀的資訊反饋,因此資訊的本身應該簡單易懂,不要讓使用者莫名其妙。

同時互動的設計流程要符合使用者期望及下意識行為。

9、簡潔元素–減少視覺元素的堆疊,提高互動元素的辨識,合理隱喻互動元素。

產品設計中的視覺體驗也很重要,如今簡潔風格是一種設計趨勢,複雜的元素會增加使用者的識別成本,使用者需要接受和學習的元素過多容易造成審美和使用的疲勞,特別是元素沒有統一的連貫性,所以介面越簡潔越好,元素越少越好,可大大減少視覺上的資訊接受量。

11

在移動產品中,由於介面大小的因素,我們經常會遇到用圖示做功能按鈕,因此按鈕的圖示就需要充分考慮使用者的體驗認知。例如普遍的圈型箭頭是重新整理、心型是關注、星型是收藏、齒輪是設定 等等。我們在採用圖形隱喻功能的時候,應當考慮使用者的認知,避免使用者學習和識別的成本。

10、明確結構–合理劃分介面的邏輯結構,按照不同的內容與功能邏輯進行劃分,突出結構主次。

1、頁面中主要有三層結構:預設層、隱藏層、疊加層。預設層:初始顯示的介面(頁面);隱藏層:預設隱藏的介面,需要操作才會顯示,例如導航等等;疊加層:是需要操作才會出現,例如對話方塊、警告、模態視窗和彈出資訊等等。

2、頁面中分別劃分為三個區域:可操作區域、主流程、提示資訊。可操作區域:是主要內容互動的區域,例如選項、資訊互動等等;主流程:用於醒目的告訴使用者,你將進行的操作行為是什麼,會產生什麼樣的結果;提示資訊:展示用於操作的協助提示類的資訊。

第2點關於頁面區域的介紹,只是筆者對介面結構內容的理解,僅供參考。第10條和第9條都是比較偏向於視覺體驗,這一層級主要是通過色調來增強使用者體驗,通過色調影響使用者的操作,並且通過介面結構和內容,清晰的告訴使用者在那裡,退路在那裡,能夠去那裡。

以上10條,也許對你有所啟發,也許使你更加迷茫,但是正如筆者開頭說的,移動網際網路產品更注重內容的互動,所以除了這些理論性的知識,還需要去體驗各類應用(不侷限於某一類),體驗和了解他們的互動和展現形式。推薦一個方法:每天只玩一個移動產品,玩熟玩透,並列出這個應用的優點和缺點,然後和大家分享交流,再從別人的眼中瞭解反饋,用不了一個月,你就能對移動網際網路領域有所掌握了。