從理論到實踐,我是如何完成這份互動設計的?

2021-01-10 人人都是產品經理

如何將需求落地到設計中?

謀全局者,才有自信謀一隅

當設計師進入設計階段時,會出現典型的負隅糾結,而在產品整體框架和產品協同上缺少大局觀。往往在局部形成的設計優勢,在全局上不可用或不一致導致了優勢喪失。

拿一款閱讀與發布文章的產品來說,關於網站與app的同步問題,當我們從需求出發開始規劃設計時,我們談的是如何與網站打通進行無縫的閱讀與發布文章功能的對接。而當我們進入具體功能設計時,討論的更多的是鍵盤的自定義功能是哪些,上傳圖片數量限制,圖片文字編輯如何操作,產生什麼問題,怎麼解決。

討論到最後,發現我們已經完全聚焦在鍵盤的自定義上,更深度的聚焦在移動端APP編輯文章中存在的問題,以及解決的各種策略。隨著時間的流逝,我們已經不自覺的進入了極為細緻,極為縝密的深層交互定義和行為推演中。

往往是午飯回來後,相關設計人員才會突然意識到,好像在不同的模塊出現了一致性問題,出現了出口入口的流程方向問題,還出現了忽略網站協同,單純的在思考移動端深層行為問題…而產品在Q(質量)C(成本)T(時間)模型中如何權衡取捨,如何構建具有競爭力的模式,如何通過設計和運營變現,也因為被帶入深度的細節討論忽略了全局。

類似以上的案例,在網際網路行業隨時可能發生,那麼如何才能控制宏觀與微觀設計的切換自由度?

必備的工具如下:

1. 三大用戶工具

新手用戶、中間用戶、專家用戶

2. 用戶模型工具

比如有三種類型用戶,A類,B類,C類。A類用戶中新手用戶的場景和需求,可能的信息與行為;A類用戶中中間用戶的場景和需求,可能的信息與行為;A類用戶中專家用戶的場景和需求,可能的信息與行為;B、C類用戶以此類推。

3. 用戶心理模型工具

用戶心理模型是如何理解他要達到目標所需要的信息和行為的,你提供的信息與行為與他的預期需要針對性的匹配。

4. 框架工具

將已獲取的需求進行信息屬性上、或行為屬性上、或場景屬性上的分組歸納聚合,形成框架圖。

框架圖能夠讓你在已確認的需求上有組織的分類實施,並且能夠快速的看到獨立的需求末梢之間存在的內在業務關聯或場景關聯,進而影響你對設計方案行為的定義。使用框架圖也能夠在全局上提取出需要保持一致性的模塊(反過來說就是設計-視覺-代碼可以復用),同時也能夠從全局角度看到任務切換導致的各模塊間切換與協同。

5. 矩陣圖

涉及到複雜流程狀態或多用戶權限系統的,使用矩陣圖按照需求進行多維度的狀態(對應流程狀態)或權限(對應多用戶類別)進行歸納整理。

矩陣圖主要用於涉及到多用戶角色、屬性、權限的系統。當用戶角色和對應的用戶權限、用戶屬性出現網狀關係時,必須使用一種方法保證信息的可查閱性。當涉及到用戶權限時,經常會出現戛然而止或者主觀臆斷,需要的話,直接將矩陣圖列印出來,對著角色-權限-屬性進行查詢既可。如果有不合理的權限設置,隨時更新,保證整個團隊對於用戶角色-權限-屬性都能夠在可感知的狀態中。注意這些更新是全局聯動的,矩陣中一個權限或屬性的變更,都有可能引起全局多處的聯動更新,此時更需要全局觀和對矩陣的深度理解。

6. 流程圖

涉及到複雜流程的,需要將產品狀態+用戶行為梳理為流程圖,將用戶必然行為導致的產品狀態分化在流程圖體現出來,保障產品在各種狀態下的流程流向清晰可見。

如何將需求落地到設計中

假設你接到一個具體需求:用戶需要買火車票,請幫助他。

你該怎麼將需求向設計落地?

首先第1個工具要發揮作用:買票的用戶是否存在新手、中間、專家用戶?12306已經幫助我們培養分化了這三類用戶。

接下來使用第2個工具用戶模型:

買票用戶分為A類:偶發需求產生的臨時性買票用戶;B類:長期不固定目的地出差的用戶;C類:長期固定出差相同目的地的用戶;D類……

第3個用戶心理模型工具:(此處需要強烈依賴調研)將獲得的心理模型作為關鍵信息輸入到設計流程,用互動設計服務A、B、C類用戶提供準確的信息和行為。

第4個框架工具:將調研中獲取的用戶需求,從用戶模型中能看到三類模型在行為上的分化明顯,因此我們進行」行為屬性」上的歸納。

接下來,你要理解買火車票的業務,確認產品框架中重要的、高頻的需求集中在什麼任務中。不重要的,低頻的但不可捨棄的需求集中在什麼任務中,從而構建出產品的框架。

接著,確認好需求中的用戶成分是否涉及到多用戶、多權限矩陣。假設我們看到的是主體的C端用戶(因國情決定後臺票務數據唯一且不可私有化),那麼買票的需求自然聚焦於買票本身,而非用戶權限矩陣中。

接下來,我們針對買票需求進行需求落地,而配套服務和個人數據僅作為附屬數據,不作為本文討論的重點。

買票作為需求輸入後,我們在產品框架中看到了買票任務所需」信息」和」行為」,接下來即將進入我們進行需求落地的四部曲:需求——分析—拆解—篩選。

最終,我們看到的思路如下圖:

針對A、B、C三類用戶,將會對框架做如下分化:

通過對A、B、C三類人物模型針對性的做信息和行為匹配,我們看到產品需要滿足A類的基本信息和行為需求;同時也需要滿足B、C類用戶的場景化打包信息(包含行為)的需求。因此,產品框架需要體現的是基礎性的設計建設,保證A類用戶在任務流程的可用性上儘可能的達到100%的高度,而此處不必過分考慮A類用戶的使用效率(用戶需求偶發特點決定),但必須考慮的是信息供應量的充足與信息出現時機的準確性,以保證A類小白用戶初次使用信息也能夠成功獲得車票、A類中間用戶長時間間隔後仍然能夠拉起這條冗長的任務流,A類型用戶基本不存在專家用戶,所以不要過度考慮了。

對於B、C類用戶,因為用戶的需求清晰明確,用戶行為所產生的數據可以作為設計決策和技術實現的依據,因此從集創堂槍型思維的角度來處理這兩類用戶需求,就需要對其所需信息和行為進行場景化打包處理,目的是篩選信息,提升用戶因行為數量(或頻率)上升而導致的對操任務效率的需求。

我們需要將篩選出來的需求向設計框架中落地,以移動端為例:在做移動端設計時,我們的基本素養是要知道移動端的頁面對象的構成,分別是:狀態欄、標題欄(或叫做導航欄)、內容區、標籤欄。

從需求的重要性和頻率兩個維度來衡量買票的需求,會將A、B、C類用戶「買票」需求定義在標籤欄中的頭屏位置中。

接下來,我們需要在買票需求中落入必選需求,從前文分析中,我們看到需求中包含了信息和行為。本質上,行為也是需要信息入口的,所以,信息本身又可劃分為展示信息和行為信息。

在布局信息和行為時,我們需要在行為層上來規劃信息布局。行為層上,用戶使用移動端基礎行為劃分為雙手操作和單手操作。而設計師手上必要的數據,便是考慮單雙手狀態下的手指操作行為的舒適區域數據。如下圖,我們看到用戶在不同的尺寸的屏幕上,單手操作舒適區和困難區有著顯著的變化,而我們如何決定使用什麼樣的屏幕進行上下適配,確定信息的布局儘可能落入舒適區?這裡的問題好像越來越多了……

首先我們要理清楚需要什麼樣的屏幕尺寸,再決定如何在內容區布局信息和行為。

為了滿足用戶需求,我們需要清晰的掌握用戶信息,所以用戶使用什麼移動端對我們來說至關重要。假設用戶90%使用的都是安卓端,那麼開發iOS版本意義不大,反之相同。這裡面涉及到的決策信息太多,暫不做詳細討論,我將在下一篇文章」如何做設計決策」中和大家交流。

看一下圖中移動端單手操作的數據,可以看到在右手單手持握時,隨著屏幕變大,舒適觸摸區在極速縮小。丟失掉的舒適觸摸區轉移到了伸展觸摸區和困難區中。而用戶在獲取信息過程中,對於信息的瀏覽順序是從左到右,從上到下。所以就構成了信息與行為的分布矩陣,如下圖所示。

iphone4-6Plus在單手觸摸區域上的測試總結,隨著屏幕變大,舒適觸摸區越來越小,而伸展區變大,困難區也急速變大。

信息重要度從左到右、從上到下遞減,操作的重要度從下到上遞減。因此我們需要將信息布局在內容區的左上位置,將行為布局在內容區的偏下方位置。

作為擁有信息和行為的雙重屬性的信息,優先歸納進入信息屬性中。考慮落入信息重要度高的「信息填充區」。

對於單純的行為,我們需喲啊考慮將其行為布局在「行為規劃區」中,以便用戶行為轉化過程中行為能夠落入屏幕的舒適觸摸區或伸展觸摸區

我們將信息必選項和行為必選項整理之後,結合觸摸區的區域,進行布局,優先布局信息(用戶第一時間需要),其次布局行為。

你來決定是時間重要還是地點重要,本例中,結合用戶已建立的使用習慣,決定將地點作為第一信息呈現。按照出發地、目的地的結構顯示信息。為了信息本身的屬性,我們布局在屏幕偏上的位置,這裡已經進入了屏幕的操作困難區,我們部分的犧牲了操作的舒適性來保障信息傳達的重要性。

其次,將時間和乘車人布局在伸展觸摸區,這裡有一點需要強調:時間的選擇頻率要遠大於地點和乘車人的選擇頻率。但從信息屬性的角度來決策,時間要大於乘車人,因此時間部分觸碰到了困難區,相對遠離了舒適觸摸區。最後,是必選行為,儘可能得出碰到舒適觸摸區。

有了初始化的框架之後,接下來需要收集任務,進行任務流程串的梳理。從上文方案中,我們看到用戶的行為包含

必選任務流程:

a設定出發地-目的地;b設定出發時間;c設定乘車人。

可選任務流程:

設定車次;設定座位;設定價格區間;設定返程時間。

接下來,我們隊必選任務流程進行流程串梳理。

示例:設定出發地/目的地任務流程

結合整理出來的流程圖,進行信息-行為的梳理,根據區域數據,進行信息和行為的布局。將流程中的所有節點,全部使用頁面承載展現出來,便將設計理論落地到了實踐當中。但是這只是基礎的設計能力。其中關於設計原則的把握還需要隨著項目經驗一步步的積累。

比如說,當前的設計是滿足了三類用戶中,A類對任務有效性最求最高,對效率無追求的用戶。那麼此時,作為資深的設計師,需要考慮的是場景化下的設計決策和布局。針對B、C類用戶,我們需要做什麼?他們一類是長期出差目的地不固定,一類是長期固定往返。

結合我們使用框架工具所梳理出來針對B、C類用戶的場景化打包

B類用戶的高頻次特徵,決定了他們對於購買流程效率的高需求。那麼如何提高他們走完購票流程節點的效率,是此處思考的重點。提高效率的具體方法有很多,包括數據的復用、信息預設、基於用戶行為數據的潛在行為預判等。

這裡可用的復用數據包括:用戶的歷史訂單、乘車人;預設信息包括:地理位置定位、訂票價格區間、位置喜好;基於用戶潛在行為的預判包括:訂票時間。

因此,我們考慮到在滿足A類用戶的前提下,開始覆蓋B類用戶的需求。

注意:在覆蓋B類用戶是,我們對時間選擇控制項做了修改,並未使用iOS UIKit中提供的預定義功能控制項,這將會為研髮帶來定製的開發量。根據《iOS人機界面設計指南》中告知我們的信息:UIKit除了定義UI組件元素,還定義對象如何實現功能,例如手勢識別/繪圖/輔助功能和列印支持。

UIKit提供的UI組件可以大致分為以下4種類型:

欄(Bars):包含了上下文信息來指引用戶他們所在的位置,以及控制項來幫助用戶導航或執行操作。內容視圖(Cintent Views):包含了應用的具體內容以及某些操作行為,比如滾動、插入、刪除、排序等等。控制項(Controls):用於執行操作或展示信息。臨時視圖(Temporary Views):短暫出現給予用戶重要信息或提供更多的選擇和功能。

iOS官方已經為開發者定義了一整套完整的UI類-子類(對應的是我們可見的操作控制項)及功能,比如button按鈕控制項,按鈕的點擊行為,禁用狀態等,都有了現成代碼可被研發人員拿來直接使用。

我們在設計方案之前,儘可能先了解到Ios預定義的控制項及其可實現的功能,儘可能的復用官網提供的控制項和功能,一方面是為了保護用戶使用iOS系統系統所獲取的行為——含義一致性,另一方面也提高了研發人員的生產效率。

但是面對著用戶需求,實在需要改變的時候,可以考慮自定義控制項,此時需要拿出具有說服性的證據來支撐你的自定義控制項。而證據便是調研歸納出來的用戶大類模型,這些用戶模型的行為特徵決定了產品該以何種形態為用戶服務。若單純為了研發效率,而犧牲掉用戶行為習慣所帶來的體驗或商業機會點,那就是產品經理在權衡取捨環節的失職了。

基於以上的分析,我們需要對時間控制項進行適當的修改,自定義時間控制項,滿足更大面積的用戶群體。

C類用戶的典型行為是在訂票行為上具有周期性,比如在經濟發達地區的長三角、珠三角、京津翼地區,城際往返,周末誇城市往返的行為比較普遍。針對這類用戶的訂票行為,可以在技術上進行跟蹤,並計算出周期,在用戶其他變量(出發地-目的地、乘車人)固定的前提下,對時間變量進行行為預判,推出複合用戶活動周期的日期默認提供到用戶。

最後,在可選範圍內,將輔助性行為進行隱藏式布局。根據場景,出發地默認定位當前所在城市,但是若數據不更新,可以快捷進行本地手動定位。對於選車次,選座位,選價格區間這些不重要,不高頻,但有需求的任務流程,提供可選入口,隱藏二級信息和流程,轉化成可選項,供熟練或專家用戶學習後使用。

至此,設計從理論向實踐落地全部結束。感謝大家的寶貴時間!

 

作者:青木,集創堂聯合創始人,公眾號:集創堂

本文由 @青木 原創發布於人人都是產品經理。未經許可,禁止轉載。

相關焦點

  • 設計原則總結:最全的互動設計原則和理論匯總
    設計是有原則和方法論的,鑑於網上各種文章和原則比較零碎,這次統一將互動設計的方法和理論匯總,不足之處也希望各位能夠提出,一起補全。「形狀」和「圖形」在德語中是Gestalt,因此這些理論也稱做視覺感知的格式塔原理。格式塔原則的原理主要有七種:接近性原理;相似性原理;連續性原理;封閉性原理;對稱性原理;主體/背景原理;共同命運原理。接近性原理:物體之間的相對距離會影響我們感知它是否以及如何組織在一起。
  • 從互動設計到產品設計到服務設計,變遷是怎麼發生的?
    我們看待任何現象,都不能脫離它所處的時代以及當時它所處的系統,所以今天我就從市場競爭系統的角度來談一談原因。一、互動設計1. 互動設計的時代特點互動設計在國內的興起應該要從十年前說起,也就是2009年。其實互動設計並不是什麼新詞,在國外已經存在了幾十年了。為什麼2009年突然火了呢?因為移動網際網路出現了。
  • 互動設計|如何做好操作反饋規範的設計?
    設計規範的制定都帶有很強的目的性,一份規範的制定不僅是對產品自身有利,對設計研發團隊以及用戶都是有諸多顯著的好處。什麼是互動設計中的操作反饋?設計規範中的操作反饋規範的制定,實則就是將用戶操作APP後的行為給出一致性的反饋,讓用戶的每一步操作都有明確的感知。
  • 互動設計 | 如何做好操作反饋規範的設計?
    互動設計中的操作反饋設計,要從用戶和產品的兩個角度去思考——反饋能為品牌氣質的提升帶來什麼價值,能多大程度地優化用戶的體驗效果?設計規範的制定都帶有很強的目的性,一份規範的制定不僅是對產品自身有利,對設計研發團隊以及用戶都是有諸多顯著的好處。什麼是互動設計中的操作反饋?設計規範中的操作反饋規範的制定,實則就是將用戶操作APP後的行為給出一致性的反饋,讓用戶的每一步操作都有明確的感知。
  • 信息維度與互動設計原理
    互動設計原理不僅關心互動設計是什麼的本質問題,還關心互動設計如何做,以及為什麼進行互動設計的問題。互動設計的方法、流程、架構、模型以及評估方法,從研究範式、研究理論、研究方法到研究測評方面,探討互動設計如何做的問題;世界上不同的實體虛體的主客體,不論是主要政體與主流經濟體,還是非主流的形式,對大互動設計的設計策略與設計細則,以及互動設計在各個領域的實踐表徵,都能夠從信息 11 個維度的視角,從研究實踐和研究倫理層面闡述互動設計做了什麼、做得如何,以及為何要如此做的問題。
  • 如何設計分層架構和交互接口 API?
    第二步,確定層與層之間的關係,梳理出層與層之間的交互接口。第三步,將功能相近的接口劃歸到一個模塊,確保模塊高內聚,對外低耦合。第四步,在此基礎上進一步明晰接口的參數列表。僅僅四個步驟就完成了架構設計嗎?這會不會太簡單空洞了呢?各位看官,不要著急,請聽蔡老師慢慢道來,每個步驟都有極具可操作性的方法及工具。層次的切分方法面對一個龐然大物,你該如何下手呢?不用擔心,這已經給你準備了庖丁解牛的方法,輕輕鬆鬆把一個複雜的大系統變得可以掌控了。
  • 從理論到實踐,奈奎斯特採樣定理,我終於鬧明白了!
    今天,我們需要考慮這個定理在指導以設計功能電路和系統為目標的電氣工程師的決策中的作用。 用理論指導實踐,但並沒有具體的說明。換句話說,香農定理並沒有告訴我們如何設計一個採樣系統;相反,它只幫助我們去理解採樣系統,並提供了一個指導和支持工程師工作的框架。因此,了解理論和實踐的差異是很重要的,在採樣理論中,也許最重要的差異就是所需的採樣率。
  • 譯文|如何通過聲音設計增強移動交互?
    本文主要關注交互式聲音設計,這還是一個鮮為人知的學科領域,那如何通過聲音設計增強移動交互呢?當我和別人討論聲音設計及它在Facebook所扮演的角色時,很多人一開始是看起來一臉茫然的。「聲音?Facebook?」他們問道。我個人是可以理解他們的,大多數時候,對於我們聽到的聲音,人們不會有意識地去思考其背後的意義。
  • 超全面的交互自學指南
    身邊有些朋友想要學習互動設計,又怕平時工作瑣碎學不好,問到我該如何學習和開展互動設計工作?互動設計的市場與發展又是如何?於是乎做了一些線上研討跟問卷調查,並圍繞初學者或想要深入學習的同學,寫下了這篇觀念和建議,希望能夠有所幫助。
  • 英國互動設計清單:十所高校五十個專業,總有一所適合你
    回復「互動設計」送你offer拿到手軟的大招前兩天範兒姐給大家簡單介紹了幾所英國互動設計的院校,收到很多同學的諮詢。今天範兒姐再來給大家總結下英國的互動設計專業,送上超全互動設計清單給大家作為參考。MA Service Design服務設計將設計實踐應用於服務領域——從零售和銀行到交通、醫療和教育。服務業約佔經濟的80%,為那些希望有所作為的設計師提供了一個新領域。
  • 在設計過程中,有哪些不容忽視的互動設計要點?
    本文總結了一些在互動設計中重要的理論要點,並針對各理論要點展開描述相應的設計策略。如何通過界面元素間的位置關係引起用戶注意,從而快速有效地感知並獲取目標信息是界面設計的重要方面。從設計角度來說,應當使設計內容容易被發現、容易被識別。
  • 如何利用互動設計的接近法則與格式塔理論
    「形狀」和「圖形」在德語是「Gestalt」,因此這些理論也被稱為視覺感知的格式塔(Gestalt)原理。接近法則是格式塔理論中最為我們所熟知的,也是我們最常用到的一項法則。說的是物體之間的相對距離會影響我們感知它們是否以及如何在一起。相對於其它物體來說,彼此之間靠近的物體看起來屬於一組。越接近,組合在一起的可能性就越大,強調的是位置。如下圖,我們在意識中會將其分為兩組。
  • 卡內基梅隆大學互動設計專業全面解析
    互動設計專業是CMU的一門強勢學科,並且也是眾多藝術留學生的選擇。接下來,大家就一起來了解一下關於卡內基梅隆大學互動設計專業的介紹吧!Arts學院下面的一個設計系,在設計系中,CMU的互動設計研究生專業 根據學生不同的基礎設置了3個不同的學位: 1)互動設計專業MPS學位,學制1年「Master of Professional Studies」 2)互動設計專業MDes學位,學制2年「Master of Design」 3
  • HCI互動設計留學-年薪百萬的交互專業有哪些學校可以申?
    互動設計專業的範疇主要是設計交互的產品(硬體)和規劃交互的服務(看不見的硬體,無形的交互)。 首先,美國的交互類專業碩士基本都是屬於 STEM 項目,享受三年的 OPT 政策,畢業後有機會在谷歌、微軟、領英、Facebook 等大公司工作,並且更容易參與到比較核心的產品研發工作中,之後就算選擇回國工作,也是很重要的加分項,更別說美國知名大學的畢業證本來就是敲門磚。
  • 互動設計原則:如何用好的設計留住你的用戶?
    本人屬於實踐派,這些方法都是在實際工作中碰到印象深刻到問題後隨手記錄下來的,寫得不妥之處還希望大家給予意見回執。比如,我們很少會完整地瀏覽複雜網頁上所有的文本和內容,絕大多數的用戶打開網頁都是在試圖完成某項任務,達成某個目標;而頁面中的不同的內容模塊往往是服務於不同的功能和目標的,我們只要尋找可以完成自己目標的內容部分即可,並沒有閱讀全部的必要。不過,作為軟體和網頁的設計人員,我們需要根據不同的用戶場景和需求去設計功能,增強用戶體驗,所以往往會使得頁面邏輯相對複雜。
  • 為什麼人機互動專業現在這麼火?
    它研究人與機器之間進行信息傳遞的理論、技術和設備,既包括技術研究(包括算法、硬體技術等),也包括心理學研究。互動設計 ﹙interaction design﹚ :互動設計,顧名思義,是設計中的一個領域,是一種實踐方法,通常為了解決特定使用場景下特定人群的使用過程中,人與機器(或軟體、網站)如何更方便簡單地「對話」的問題。
  • 一文讀懂,語音互動設計流程
    那對話式是如何設計出來呢?大致是怎麼樣的一個流程呢?2. 設計工具這裡說的設計工具並不是說是一個具體的工具,更多是指一個方法論。流程圖的使用到的工具就非常多了,這裡就不一一列舉了。那大概我們設計完成了一組示例對話之後,我們就要對一些細節進行細緻的研究,比如:確認。五、如何進行確認用戶語音的確認非語言式確認通用確認視覺的確認1.
  • 互動設計的最後一公裡(一)——動效設計
    動效設計的情感功能是動效設計所體現出來的產品氣質,無論流暢過渡,還是增強操作、升華體驗都是在為產品氣質的塑造而添磚加瓦。但是,現實中很多設計師將動效設計作為互動設計的附屬工作,很少投入精力去關注產品動效,導致項目開發人員採用產品系統的底層控制項來完成產品的轉場、加載動效等。這樣的動效效果會與設計風格、產品氣質有所偏差,顯得較為突兀、另類。
  • 收錄美國15校 · 最強互動設計專業全攻略
    我曾就藝術設計留學行業內對互動設計的盲區專門有寫過一篇文章,即《讀懂互動設計專業的四大方向》,從「互動設計專業的四大方向」、「代表院校」和「作品展示」三個方面詳細解釋過互動設計專業的分類,旨在告訴每位學生 / 潛在的申請者都應該:
  • 解讀交互稿模板:如何讓設計稿更規範化?
    交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?PS:本文適用於移動端,Axure軟體製作的文檔型交互稿。交互稿應該包含哪些內容?如何搭建一個合理的交互稿結構?各個界面應該如何擺放?清晰易讀的設計說明應該是怎樣的?想必作為一個新人,很難完全弄清上面的問題。