如何從零開始設計一款產品?來看這篇超全面的教程!

視覺當鋪 發佈 2020-03-20T06:34:17+00:00

我們作為產品的設計者,需要清楚地認識到產品從0 到 1 的設計過程,對每個階段深入的思考才能形成一個清晰的認知。以上是我站在用戶體驗五要素的維度對產品設計從 0 到 1 的梳理,希望為大家帶來一些啟發。

當產品發展到一定階段,優秀的用戶體驗設計對於產品在激烈的商業競爭中保持核心競爭力是至關重要的。一個產品能否高效地幫助用戶完成任務,這直接決定著用戶留存和口碑。這時,用戶體驗就成為了商機。

我們作為產品的設計者,需要清楚地認識到產品從 0 到 1 的設計過程,對每個階段深入的思考才能形成一個清晰的認知。吸收用戶體驗要素的精髓就必須在實踐中不斷地學習用戶體驗,了解用戶體驗,總結用戶體驗。

用戶體驗為什麼如此重要?

用戶體驗是指產品如何與外界發生聯繫並發揮作用,也就是人們如何「接觸」它、「使用」它、人與產品互動的舒適感、人與產品的有效溝通。

用戶體驗設計通常要解決的是應用環境的綜合問題,兼顧視覺和功能兩個方面的因素,同時解決產品所面臨的其他問題。產品越複雜,確定如何向用戶提供良好的使用體驗就越困難,比如 B 端產品在設計上就有很多局限性。任何在用戶體驗上所做的努力,目的都是為了提高易用性和易通性,也就是提高使用效率。這裡可以分兩種形式體現:「幫助用戶工作得更快」和「減少用戶犯錯的幾率」。

影響用戶體驗的因素有很多,內容決定了產品能對用戶提供什麼、技術決定了產品能給用戶什麼樣的穩定性、交互決定了用戶完成任務的舒適度、視覺決定了產品在用戶心中的印象及是否願意點擊,其中內容和技術是最重要的因素。在產品開發過程中,我們都有類似的經歷,時常關注產品將來做什麼、如何實現出來才最高效,用戶體驗卻常常被忽略,甚至定義為優先級不高,當這些「優先級不高」的需求積累到一定量時,會變成決定產品體驗成敗的關鍵。除了這兩個因素外,影響用戶體驗的就是下面這五大要素:戰略層,範圍層,結構層,框架層,表現層。正如百尺高樓也需要從整體構思到結構設計再到細節構造一樣。所以這五個要素貫穿著整個產品的始終。

為了方便具體闡述各個層面的內容,我們把產品分為兩個大類:功能型產品和信息型產品。功能型產品是從傳統的桌面和客戶端軟體的角度出發,主要關注的是核心任務。所有的操作都被納入一個過程,去思考用戶如何完成這個過程。信息型產品是從信息的發布和組合角度出發,主要關注的是內容,產品應該提供哪些內容,這些內容信息對用戶的意義是什麼。

下面,我們就來具體闡述這五個層面的含義。

戰略層

無論是功能型產品還是信息型產品,在戰略層所關心的內容都是一樣的:我們為什麼要開發這個產品?可以分解為兩個問題。

1. 用戶需求(產品給用戶帶來了什麼?)

我們必須拋棄自己的立場,從用戶的角度重新審視產品,不能把自己當成用戶,所以做產品設計提到最多的就是「同理心」,最忌諱的就是閉門造車。我們需要熟知用戶選擇我們的產品想要得到什麼、解決什麼問題,並且在解決用戶核心問題之後,他還能在我們的產品中獲得什麼。這時我們要解決的是如何獲取用戶需求。

為了了解用戶需求,我們就要對用戶進行調研分析,找到產品真正的目標用戶群(有哪幾類、幾種用戶角色,比如外賣產品有商家、騎手、消費者三類),再對用戶群進行場景化分析(他們在什麼場景下使用產品),以確定產品真正可能覆蓋到的使用場景有哪些。

常見的用研方法有:問卷調查、用戶訪談、焦點小組等,最適合用於收集用戶的普遍觀點與需求。其他研究工具(如用戶測試或體驗旅程圖)則更適用於理解用戶具體行為及用戶和產品交互時的表現。通過前期的調研,我們可以得出一個用戶畫像,既代表了目標用戶有哪幾類人、有哪些行為目標,這樣可以讓團隊成員在「產品給誰用」的概念里,清晰地知道用戶是「誰」。

2. 產品目標(企業通過產品得到什麼?)

與用戶需求相對應的,是我們對產品的期望價值,也就是產品目標,其實就是對產品總體方向的把控,包括產品的商業邏輯、商業價值、商業壁壘、品牌傳播等。當前網際網路已進入下半場,大把燒錢野蠻生長的模式已經越來越不可持續。此時無論是投資人還是創業者,更多的都將回歸到商業本質,即對產品商業屬性的思考。網際網路圈常說不要去創造需求而要去發掘需求,真正去滿足目標用戶的特定需求,因為這樣的產品才能具有商業價值,商業價值的大小可以通過市場規模分析、目標用戶價值分析等方式進行衡量。除此之外,對於自身商業壁壘的分析也十分重要,在明確自身優勢的同時可以進一步鞏固和發展這些優勢以提高後來者的准入門檻,以此取得更為有利的發展空間。

在項目開始初期,團隊的成員就要對此有清晰的認識。對戰略有清晰的認識會在設計過程中提供一把標尺,引導我們按照正確方向前進。因為我們越是明確知道用戶想從我們這裡獲取什麼,我們就能夠更好的服務他們。最後,這些內容(用戶調研、戰略定位)最好做成文檔,並同步到團隊成員,以供大家進行討論,讓大家知道 BOSS 或高層對產品現狀及未來的看法。需要注意的是,戰略層面雖然是整個產品的根基,但不意味著在項目開始之前你的戰略要完全確定下來,也可以在過程中逐步完善,因為隨著產品逐漸發展、成熟,也會隨著商業市場發生變化。

3. 階段性目標

產品目標在實行一段時間後,最好需要復盤,也就是之前要設立一個階段性目標,它可以是一些可追蹤的指標,在產品上線以後,用來顯示他是否滿足了我們自己的目標和用戶的需求,這些階段性目標與產品本身和用戶如何使用產品有著緊密的關係。同時,指標會和可視化數據有關聯,所以產品經理需要多觀察產品數據,我本人也是非常提倡設計師主動去觀察數據,這也是你檢驗設計成果的一項標準。如:用戶平均停留時長、單月登錄次數、改版後的數據變化、活動頁的跳出率減少了 30%、Banner 圖的轉化率等。

可以看出,階段性目標和可視化數據是分不開的,任何造成了產品訪問降低、粘度降低、跳出率增加等行為是可以通過數據分析來得到結論的。

範圍層

帶著「產品給用戶帶來了什麼」、「企業通過產品得到什麼」的明確認識,我們才能搞清楚如何去滿足這些戰略目標。當你把用戶需求和產品目標轉變成產品應該提供給用戶什麼樣的內容和功能時,戰略就變成了範圍。這裡也是產品經理需要重點專注的層面。

1. 你正在設計什麼?

詳細記錄你正在設計的內容,知道這個項目的目標是什麼,什麼時候完成這個疊代,本次疊代需要上線什麼東西,當前進度是怎樣的,善於記錄這些能讓你把責任分配得更加清晰,可以大大提高協作效率,工作中我們要考慮下面三個維度。

自己的工作流程:明確如何進行背調,如何進行需求評審,每一步的流程是否清晰,是否還有優化的空間等,尤其是當出現錯誤的時候,復盤自己,一定會有可優化的環節。

產品的疊代流程:產品會從一個 demo 進入到完整的疊代環節,整個過程中,產品應該以什麼樣的進度和方向來進行疊代,也是需要思考的,在整體過程中尤其考驗了產品人的決策把控和需求優先級的管理能力。

團隊的工作流程:比如定義產品的時候是某幾個部門還是全部,疊代產品的時候是只要考慮需求方,還是連其他產品同事一起,開發資源是否需要協調,團隊應該如何配合併且透明地了解產品成長進度等,這些都需要在疊代前後有所思考。

這麼多管理事項,總要有工具協助你記錄吧,在這裡推薦幾款我在工作中常用的團隊、項目、需求管理工具:Xmind、Jira、TAPD、Merlin Project Express(甘特圖)。

2. 你不需要設計什麼?

這裡需要進一步討論產品所包含的具體功能,使產品從一個概念轉化為功能聚合體。此時明確不需要做什麼要比列出需要做什麼更重要,太多的產品一上線便拖著一副臃腫的身軀,許多功能聽上去相當誘人,但是它們對於項目的戰略目標並不是必需且緊急的,最終落得失敗的結局。因此需要明確產品範圍邊界,梳理得到核心功能。C 端產品通常只有一個核心功能解決個人用戶的一個核心問題,而 B 端產品則有多個核心功能來滿足企業用戶多個使用場景。被解決的問題即是需求,需求從何而來?

需求來源:需求來源一般來說分為內部和外部,內部大多是職能部門的一些業務性需求或受到戰略上的決策影響,而外部可能是和競品、用戶反饋的需求,無論是哪些需求,一定是站在戰略性角度去看,即,這些需求能否滿足用戶或企業價值,更接地氣地說,這個需求能否起到實際作用,還是偽需求,或者不緊急的。

在產品落地前可以提前考慮潛在的衝突和產品中的粗略點,可以劃定界限什麼功能和內容可以做,什麼功能和內容不能做,什麼功能和內容暫時不需要做,什麼功能和內容放在後期做。也就是說我們前期規劃(功能設計)的時候是先做加法,然後做減法。比如根據「四象限法則」的思路,評定出優先級、排期、不需要的。

當然,有些產品團隊的 PM 會輸出一份《功能規格說明書》或《PRD文檔》,這也是範圍層面的產出物,文檔是起到定義功能的作用,他不需要包含產品的每一個細節(不像交互文檔那樣細緻),只需要包含在設計或開發過程中出現有可能混淆的功能定義。

接下來我們看,喜馬拉雅APP 6.3.60.3 版本有哪些功能需求和內容需求,一個產品從 0 到 1 制定範圍層時可能不會這麼詳細,在後續的結構層和框架層設計中偶爾也會反過來對範圍層進行補充。

結構層

定義好功能範圍,並排列好優先級之後,我們對最終的產品模型包含什麼特性會有一個清晰地認識,然後這些需求並沒有說明如何將分散的片段組成一個整體。這就是在範圍層之上的結構層:為產品創建一個功能架構,設計用戶如何到達某個頁面,並且要思考他們完成事情之後能夠去哪裡,也就是確定頁面各種特性和功能最適合的組合方式,並在流程上形成一個閉環。從這裡往後就是我們互動設計師該重點專注的層面了:將抽象的需求逐漸整理成一個具象的產品原型。

1. 評判標準

結構是否有質量的評判標準:

  • 以各種方式將產品信息合理並有意義地呈現給用戶,讓用戶更容易找到最有用的信息;
  • 不是整個過程需要多少步完成,而是用戶是否認為每個步驟都是合理的;
  • 一個高效結構的優點具備「可包容」和「可擴展」的能力。
2. 結構層的定義

根據用戶的使用場景、行為、思考等方式將範圍層中的功能和內容建立一種有序的排列結構,讓用戶在使用產品時能夠高效順暢地實現需求。這就好比你把在範圍層確定好的一個個功能點,整理成一個層次清晰的腦圖,稱為:功能架構圖。

有了功能架構圖之後,就相當於羅列出了功能層級和抽象的頁面布局,接下來要對每個功能點、任務點輸出一個完整的流程圖。流程圖對於產品經理和互動設計師是非常重要的工具,它能夠幫助你梳理產品邏輯,通過畫流程圖可以清晰地看到產品與用戶、角色與角色、行為與反饋、頁面與頁面之間的交互關係。

3. 常用的流程圖分類

功能流程圖

描述一個功能或任務,從開始到結束的行為過程,中間有什麼特殊情況、異常情況,走流程時,遇見這些情況又該如何處理,功能點與功能點之間的邏輯關係又是怎樣的,當前步驟或流程是不是最合理的,切勿為了減少步驟而盲目壓縮流程,這裡要先保證易通性,即讓使用者通俗易懂,能夠快速了解裡面的運作模式。

通常用於介紹產品功能模塊的相互關係或某個功能模塊的具體組成,如產品經理需要向開發人員介紹某個新增功能模塊時,可以在原型圖宣講之前使用功能流程圖讓其對功能的輪廓和走向瞭然於胸。繪製功能流程圖能夠有效地幫助我們快速梳理產品邏輯和交互流程,用 Axure 畫流程圖非常方便。如圖:

業務流程圖

業務流程圖也可以叫「泳道圖」,它是描述整個產品業務或單個業務模塊是如何運轉的,包含了角色與角色、前台與後台、模塊與模塊之間的流程關係,比如外賣產品的消費者、騎手、商家三種角色是如何交互的。通常用於介紹產品業務,如產品經理需要向 boss、客戶、團隊成員介紹產品業務時,用流程圖輔助講解的效果,相較於純語言或文字表達要好得多。同時,繪製業務流程圖能幫助我們快速了解產品業務及角色關係,如圖:

頁面流程圖

這個是大家最常見的,就是把各個原型頁面用頁面流的方式串聯起來,APP、H5、PC 這些都是由一個個頁面組成,頁面流描述了用戶完成一個任務需要經過哪些頁面。也就是我在哪,經過什麼操作。一般由互動設計師進行繪製,其過程能夠幫助互動設計師確定產品頁面之間的跳轉順序以及交互狀態,同時還能幫助我們檢查是否有遺漏的頁面和設計點。畫頁面流時,主要描述用戶的正常路徑,異常流程則在正常流程附近畫出異常流程即可,如圖:

產品設計的從 0 到 1,從需求分析到信息/功能架構→再到業務流程→任務流程→頁面流程→再到最後的原型圖(線框圖),是一個從抽象到具象的過程,也是從概況到細分的過程。經過一步步的分析,逐步將想法變成實實在在的產品,這就是產品設計的魅力所在。而這其中流程設計起到舉足輕重的作用,千萬不可忽視。

框架層

將功能和流程梳理清楚之後,我們就要開始設計功能點裡的具體細節,也就是讓廣大設計師又愛又恨的原型圖。在充滿概念的結構層當中形成了大量的需求,這些需求都是來自戰略目標的需求。在框架層里,我們要更進一步的提煉這些結構,輸出詳細的介面雛形、導航及信息設計,也就是將結構層的東西變得更加清晰、實在。「互動設計文檔」就是在該階段產生的。

1. 注意事項

讓設計儘量符合用戶的使用習慣

不要出現一些「奇葩」的交互方式和「自以為」創新的組件,一旦違背了使用習慣和用戶認知,都會影響操作效率,然而,我們做體驗設計不就是為了提高操作效率和舒適度嗎?舉例:消息列表中出現比較多的刪除方式是左滑刪除,這已經形成了普遍的使用習慣,如果你非要創新到「長按→移動→刪除」,這不就是提高了學習成本麼,隨之而來的就是吐槽產品易用性差。

所以做介面設計要選擇正確的介面元素,這些介面元素要能幫助用戶完成他們的任務,還要通過適當方式讓它們容易被感知到和容易使用。這裡最忌諱的是不要為了所有人的所有偏好做設計,因為一個設計不可能適應所有用戶,我們要考慮的是符合「目標用戶」的使用習慣,貼近「目標用戶」的認知即可。比如我們做主打 90 後視頻社交產品,難道還要考慮到 70 後的認知習慣嗎,顯然不需要,這沒有價值,因此我們在做方案決策時,只需考慮目標用戶中的大部分人群即可。

要注意突出重點,讓用戶一眼看到核心內容

這裡需要考慮交互元素和整體頁面的布局,可能有些懶惰的原型設計者把這個階段完全丟給 UI 設計師了,認為布局是他們的事情,但前提是 UI 設計師如何快速理解你的交互原型,這就考驗了互動設計師在輸出原型時,內容層次有沒有區分,哪些需要一屏內展示,哪些需要弱化,這些注意事項有沒有在原型里體現或者說明。

除此之外,這些布局也不能憑感覺構建,需要有理有據,比如是否考慮到目標用戶的瀏覽習慣。舉例:「微信訂閱號消息列表」頁面為什麼是文字在前,縮略圖在後,那是因為在該場景下,用戶在找一條內容或瀏覽頁面時,主要通過文章標題來判斷是否是自己想要的內容,而不是圖片。

為信息做設計,將產品信息呈現出來並且讓用戶容易理解

除了上一條說的如何根據瀏覽習慣組織信息之外,還要將這些信息再次處理,就是如何讓用戶看德舒服、有代入感,這是一種促進理解的表達方式。之前我在琢磨「長表單如何設計」時,總結出了一句話「信息是介面的嘴巴,它需要友好的與用戶聊天,而不是審問用戶」。事實就是如此,大家都有共同的經歷,在錄入多項信息時,情緒上是牴觸的,這個牴觸點可能來源於:表單交互不智能、組件沒有記住我之前輸入的、寧願讓我輸入也不讓我做選擇、提示反饋不及時、文字引導不友好,文案既死板又囉嗦等情況。這就體現了信息表達是多麼重要。

舉例,之前我幫朋友設計「豆芽作文」時,有一個在線反饋入口,我準備用「圖標+在線反饋」的文字描述來呈現,後來發現這種方式不太好玩、太過於傳統,不能彰顯產品調性,而且我們的用戶是中小學生、家長、老師,這是一群活潑陽光的群體,因此我根據實際場景,把「在線反饋」的文案換成「打小報告」,增加了表達趣味,上線後的入口點擊事件也明顯比之前要好,目標用戶看到這裡會覺得符合他們的生活場景,都會想點進去看看,這不就達到了我們設立該入口的第一個目的嗎。希望有人點擊,降低用戶對「在線反饋」的忽略感。

在合適的地方權衡利弊,使用合適的組件

很多組件的功能類似,同時可適用於多個場景,所以我們在做交互或 UI 設計時,一定也經歷過類似的糾結點,不知道如何選擇設計方案,感覺 A 和 B 組件都能滿足需求。這裡推薦一個方法給大家,比如我們要做一個選擇器,在該選擇器內可以對選項進行單選,但這裡考慮到設備平台的兼容性和開發成本,所以準備採用系統原生的選擇器和動作菜單,如圖:

我們可以看到 AB 組件都能滿足單選的需求,那麼如何選擇最合適的呢?

在排除不影響用戶認知和使用習慣的條件下,我們可以選擇當前兼容性強且操作成本低的組件,比如 A 組件,它是滑動選擇的,假設未來可能要加入更多的選項,那就需要考慮到組件的延展性和包容性,所以我會選擇使用它。

但如果選項是定量的,我會選擇 B 組件,因為少量的選項,不需要我做出滑動的動作就能將選項清晰地呈現在我眼前,並且點擊選項後能夠直接關閉彈窗且生效,而 A 組件卻要選中後,再點擊「確認」,所以考慮到內容因素和操作成本,B 組件更合適。

所以說,設計方案並不是憑感覺來做的,而要結合內容呈現和使用場景來決策,這也是要求設計師在動手之前想一想使用場景。

理性的錯誤處理

一個聰明的系統應該考慮到異常情況和特殊情況,記得剛入行時,我曾責怪過「為什麼還有這麼笨的用戶」,後來才發現用戶始終都是無辜的,而是我們的產品沒有把防錯機製做完善。「用戶錯誤」這個詞似乎暗示用戶做錯了某些事情,但不僅如此,產品設計者也犯下了錯誤,因為他們讓用戶輕易的做出了錯的行為。所以,解決用戶錯誤的方法不是責怪用戶,不是指導用戶如何用,而應該設立一套防錯規則和提高容錯性,也就是「防禦設計」,讓犯錯變得困難。比如通過一些手段避免錯誤:默認值、建議、限制(約束)、及時反饋、逆操作等方法。

下面通過 3 個行為維度來分析:

2. 操作前,提醒防錯

詳盡的說明文字,突出顯示

主要是針對新用戶或謹慎的操作說明,目的是為了正確引導用戶學習使用。引導和提示的位置要突出,從而讓用戶容易感知到(比如離標題或輸入區近一些),確保用戶在操作前能注意到引導或提示信息。如下圖,如果不進行提示用戶就不知道這個位置的錄入機制和字數極限值是怎樣的,等輸入完再提示或者點擊提交再提示是否有輸入的時候已經晚了,這時用戶就會認為系統反應遲鈍,嚴重影響了他的工作效率。

當結果不可逆時,詢問用戶讓其知道操作的後果

在用戶操作前及時給出正確且有效地引導和提示,有助於減少錯誤發生的可能性。對於比較重要的操作,需要通過二次確認減少錯誤的發生,這裡指的二次確認有幾種程度可以參考,我把它分為:輕度防錯、中度防錯、重度防錯,如圖:

選項比輸入更簡單,並提供默認選項

用戶出錯的原因無非就是這 4 種:系統性能差、被介面誤導、自己粗心大意、操作複雜的功能。就拿「操作複雜的功能」來看,用戶操作的時間越長犯錯的幾率就越高,所以,我們在做一些組件的時候,能讓用戶選擇的就不讓用戶輸入,寧可讓他點擊完成任務,也不讓他輸入完成任務,因為輸入比點擊的失誤機率要大得多,操作成本也相對較高。其次就是選項給用戶提供默認值,尤其是用戶需要做重複的動作,或者需要精確數字的時候,先提供一個默認值,然後讓用戶再修改它們。

3. 操作中,實時感知

對用戶的操作進行視覺化呈現,並及時回饋

對用戶輸入的信息進行實時檢驗,在下面這個案例中,當用戶輸入自己的郵件信息之後,即被告知用戶這個動作的含義,到底是輸入正確還是輸入錯誤,而不是等全部輸入完畢點擊「確認」後才提示,實時狀態能將錯誤扼殺在搖籃中,用戶在感知上會認為系統是敏感的,而不是遲鈍的。

適當限制用戶的某些交互操作

對一些可能造成錯誤的操作入口設置約束或直接禁止操作,從而避免錯誤的發生。舉個例子:操作完一個模塊內容,展開另一模塊的同時收起上一個模塊。填寫過程限制用戶某些操作,這樣始終讓焦點聚集在當前內容,在操作者的角度也不會因為內容過多而導致情緒波動。

4. 操作後,及時反饋&友好引導

錯誤發生時,及時反饋錯誤並提供糾錯幫助

及時的錯誤反饋就能保證用戶每個階段的操作都能得到回應,避免因為一個小的錯誤就要修改關聯的一系列內容的情況,提高完成任務的效率。反饋不僅要指出有錯,還要指出錯在哪裡,反饋文案要準確、友好,這樣便於用戶了解錯誤的原因,方便下一步的修改。另外在用戶提交操作之後,也需要及時反饋是正確 or 錯誤,因為這裡有種叫「心理犯錯」的因素,是用戶對自己操作不自信的表現,你不及時告訴他操作結果,他可能會擔心一小會呢。

允許用戶犯錯,並支持操作可逆(即撤銷以前的指令)

iPhone 手機的還原功能,可以在用戶出錯時將多種功能設置快速還原到原始狀態。還有常見的還有刪除相片、刪除郵件、因異常情況退出的文稿編輯等,這些極端操作都有對應的草稿箱、垃圾箱、下次進入提醒是否還原等逆操作來挽回用戶的錯誤。

表現層

整個產品的形態是不是清晰很多了,現在就需要為你的孩子設計容貌了,是的,提高他的顏值和氣質。表現層在這五層模型的最頂端,也是用戶會首先注意到的地方:感知設計。這裡是將品牌、內容、功能和美學匯集到一起的介面設計。在框架層,我們主要解決組件放置和元素布局的問題,表現層則要解決並彌補「產品框架層的邏輯排布」的感知呈現問題。通過視覺設計,我們決定這些內容在介面上應該如何呈現。人類有五大感知:視覺、聽覺、觸覺、嗅覺、味覺。

嗅覺和味覺更多是體現在實體產品上,如食物、香水、酒水等用戶可以通過聞和吃直接獲取到信息。而網際網路產品是屬於工業設計領域的再創作,我們不可能讓一個虛擬的產品發出香味,所以下面來談談視覺、觸覺、聽覺。

1. 觸覺

最直觀的體現就是手機本身了,重量、質感、薄厚以及材質等。而體現在應用交互上就是振動反饋的方式,像鍵盤的短振,充電、長按時候的中振,關機時候的長振,甚至還有打遊戲、收到重要消息、操作失誤等場景都有震動,雖然這些震動幾乎沒什麼差別,但是身體是敏感的,用戶能清楚地感覺到系統在和我「對話」。出於使用手機的本能,不用查看都知道現在在進行什麼樣的操作,有時觸覺會比視覺先感知到,合理利用觸覺反饋,無形中也完善了「及時反饋」的機制。

2. 聽覺

聲音在很多產品上是作為提示來用的,雖然這是一種很不友好的提示方式,但是不能否認它比振動、視覺效果來得更直觀(手機在身邊的情況下)。而對一些產品來說,聲音這一環就顯得至關重要了,比如音樂、音頻、視頻、遊戲、直播類產品的音質的保障。兒童教育類和少兒拓展類產品在音頻上的引導會比文字信息更直觀,這類產品音頻質量直接影響著產品的沉浸式體驗。在小朋友眼裡,產品有了聲音才顯得更可愛,更符合他們的心理模型。就好比我們讀小學時,老師家長天天嘮叨我們寫作業,等進入社會以後,學習完全靠自律,基本沒有人再去監督你,所以他們的心理模型是:「這裡需要有人說話來引導」,在他們眼裡這種方式是好玩的、有趣的、學習產品的成本也是最低的。

3. 視覺

由於我們網際網路產品的特性,視覺的權重是最多的,這也是用戶體驗設計師最得心應手的領域。因為幾乎所有的網際網路產品都會涉及介面視覺設計,出於這個原因,下面主要講視覺設計如何支持功能設計。

引導用戶

評估一個產品視覺設計的簡單方法之一,就是「視線首先落在什麼地方」、「哪個設計元素在第一時間吸引了用戶的注意力」、「這個元素是偏向於產品目標還是用戶訴求」。

一般來說,用戶視線的移動方式遵循著相當一致的模式。如果你的設計是成功的,用戶眼球的移動軌跡一般有以下兩個重要的特點:

  • 首先,它們是一條流暢的視線流。如果用戶評論一個設計是擁擠、複雜時,表示這個設計沒能順利地引導視線在頁面上有序移動。他們的眼睛在各種各樣的元素之間跳來跳去,所有元素都在試圖引起他的注意。
  • 其次,在不需要太多花里胡哨的設計嚇到用戶的前提下,它能否為用戶提供某種視覺上的「引導」,這些引導應該支持用戶去完成某個目標或任務,且不應該分散用戶的注意力。

對比和一致性

對比:當一個元素在眾多元素中顯得與眾不同時,用戶就會注意到,這就是對比。是用於吸引用戶注意的一個主要設計手段,把用戶的注意力吸引到介面中的關鍵部分,幫助用戶理解頁面導航元素之間的關係,傳達信息設計中的概念群組。

對比手段一般有:空間對比、大小對比、字體對比、顏色對比、虛實對比、動靜對比、稀疏對比、方向對比、圖文對比、立體與扁平對比、局部與整體對比等,這些對比手法是源自於版式設計,當然在介面設計中也是通用的,本篇主要是分享產品設計,因此在這裡就不做細化。如果元素之間沒有對比性,那整個介面將顯得非常平庸,沒有視覺落點,缺乏應有的活力,最主要的是不能有效地引導用戶視線,不能實現傳達信息的目的。

一致性原則,是另一個重要的組成部分,可分為:視覺一致性、交互一致性。

視覺一致性:例如通過工具將視覺元素、模塊的大小、空間保持一致性。基於柵格線的方法是通過使用模板來確保設計的一致性,柵格系統在頁面排版布局、尺寸設定方面給了設計師直觀的參考,它讓頁面設計變得有規律,從而減少了設計決策成本,柵格化提高了頁面布局的一致性和可復用性,避免了設計師與開發者在細節上的反覆溝通和走查,從而提升了整個設計開發流程的效率,並能幫助開發者實現較為理想的設計還原。各種布局也都可以套用這個模板來創建,最後並納入「UI設計規範」中。

交互一致性:在不斷疊代的歷程中,很多模塊為了「功能先行」對交互規則做了一些修改,這些小的修改積累到一定量就會對產品整體的一致性方面提出挑戰。產品中的功能點在不斷完善的過程中,涉及到業務流程的場景也會豐富起來,很多的組件適用於不同場景也成為產品中必不可少的一部分。

B 端產品相對來說,要比 C 端更注重交互一致性原則,因為 B 端產品的組件復用面積要比 C 端更廣泛,比如表單組件在 B 端產品中最常見,基本每個模塊、每個任務流都會使用,如果每個模塊的交互方式都不一致,會導致複雜的 B 端產品更複雜,因此需要制定一套交互規則。其次從開發角度來講,制定統一的交互規則能夠幫助開發在工作中直接調用,從而減少開發成本。推薦幾個常用的 PC 端和移動端組件庫:Element-UI、Ant Design、Vant。

配色方案

在表現層最能讓用戶形成直觀感受的就是顏色了,人是視覺動物,顏色也表達了產品調性,樹立了用戶第一次打開產品的心理印象。核心的配色方案就是使用品牌色,可以有效地向外界傳遞品牌形象,使用品牌色並不是讓你直接吸色,而是根據情況進行飽和度調節,這裡也需要考慮你的目標用戶是什麼屬性,他們是否能接受這種配色方案。

需要注意的是,我們設計師不能因為追趕潮流而忽略了產品調性,比如說我們的產品是 B 端,他面向企業用戶,有特定的職業屬性,那在配色方面就需要更冷靜、理性一些,不能整得花里胡哨的。可能有些設計師會問「如果都採用理性的配色,那就不能打破差異化了」,其實我個人對這句話是非常不贊同的,從產品角度看差異化不是從配色出發,而是從功能出發,你解決用戶需求的方法和競品有什麼不同,或者說服務點有哪些優勢,視覺設計永遠都是服務於功能、服務於商業的,脫離了商業的設計就變成了「藝術」,而不是解決問題的設計。只有從功能上打破差異化了,你的配色方案才有更大的意義,比如加入品牌元素、合理搭配輔助色等。

如果是 C 端產品則會更開放一些,因為面對的是個人用戶,在視覺上更注重設計趨勢和品牌化,使整個產品看起來更獨特,這樣用戶在使用的時候才會眼前一亮。一些運營、活動、專題類設計,視覺設計就顯得尤為重要,它直接成為了引流工具,能幫助產品提高轉化率。

在一個完整的產品設計流程里,會要求設計師將表現層的東西整理出一套「UI、互動設計規範」,也可以叫「定義設計語言」。這個規範確定了表現層設計的各個方面,從最大到最小的範圍內的所有元素。影響到產品的每一個局部標準,比如:跳轉邏輯、色彩系統、字體系統、柵格系統、組件規則、圖標、投影等原則。做設計規範的好處是顯而易見的:

  • 對內:可保證設計團隊產出物的一致性,尤其是在多人協作設計、跨部門協作、崗位交接、設計傳承、提升設計和開發效率等方面,這些方面做好了,產品交付到用戶手中,也能為用戶帶來體驗的一致性,降低學習成本;
  • 對外:統一品牌符號,有助於加深產品在用戶心中的印象,讓我們的產品看起來是個協調一致的整體,而不是一堆亂七八糟的碎片,為公司的品牌宣傳和文化建設保駕護航。

所以在網際網路產品設計中,合理利用視覺、觸覺、聽覺,能使產品變得更生動。

回顧

實際上這五個層面,就是我們產品設計的工作流程和注意點:

  • 戰略層:確定產品目標和用戶需求,為產品將來的方向做市場調研、用戶研究,這是產品經理設計產品的根源,也是做一個產品的開端。
  • 範圍層:當我們獲取到用戶需求、明確好產品目標後,就要開始研究提供什麼解決方案來滿足用戶的需求,這些解決方案對應的功能有哪些,內容由什麼組成,這時一般會產出《PRD文檔》、《功能規格說明書》來記錄,一般包含:版本記錄、產品規劃圖、功能清單、業務流程圖、需求列表、開發資源、其他相關規範……
  • 結構層:功能和內容範圍確定後,互動設計師開始根據產品的需求設計解決方案,通過架構圖和流程圖,將這些打散的需求串聯起來,形成一個可以閉環的流程,並且羅列出功能架構:這些需求會有幾個頁面組成、每個頁面包含什麼東西。當然有些團隊可能沒有互動設計師的崗位,那就是 PM 和 UI 共同擔任。
  • 框架層:有了架構圖和流程圖之後,就開始設計具體介面雛形(原型圖、線框圖),具體到這些頁面如何跳轉、用什麼組件、交互規則是怎麼樣的、頁面元素怎麼組合等,這時候通常會產出《互動設計文檔》,一般包含:版本記錄、需求背景、流程圖、架構圖、頁面原型、交互說明、頁面demo……
  • 表現層:UI 設計對功能設計進行支持的環節,基於原型圖將產品呈現出來,顏色、元素、品牌、內容怎麼通過視覺設計來定義,這都取決於 UI 設計師如何把控產品特性、功能理解及目標用戶的調性,最後將設計稿(高保真)交付給開發工程師,並產出《UI、互動設計規範》和組件庫,方便開發調用及後期復用。

我在這裡還是非常提倡 UI 設計師去參與產品和交互的工作,並且行業趨勢也是如此。最近和一位在滴滴工作的體驗設計師交流時發現,他在滴滴是專家級設計師管理崗,除了管理團隊之外還參與了產品的工作,同時也負責交互、視覺、用研等多項工作。

所以,一位優秀的設計師不是只把介面做的好看而已,他一定是具備介面設計之外的項目推動能力和團隊建設能力。總而言之,我們要從宏觀的角度去看待設計崗位,假如你未來想成為一名 UED 或 UXD,甚至是全棧設計師,那從現在開始就應該把「設計做好視覺」的心態,轉變為「設計是用來解決產品問題」的心態。

去掉開發的工作之後,這就是把一個用戶需求,或者一個點子,變成最終的產品。每一層都是環環相扣的,涉及到各種決策,我們做什麼、不做什麼、用什麼組件、放什麼位置。每一個流程上的每一個決策,都會影響到產品最終的樣子和用戶使用產品的樣子。

以上是我站在用戶體驗五要素的維度對產品設計從 0 到 1 的梳理,希望為大家帶來一些啟發。

關鍵字: