如何將需求落地到設(shè)計中？

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

當(dāng)設(shè)計師進(jìn)入設(shè)計階段時，會出現(xiàn)典型的負(fù)隅糾結(jié)，而在產(chǎn)品整體框架和產(chǎn)品協(xié)同上缺少大局觀。往往在局部形成的設(shè)計優(yōu)勢，在全局上不可用或不一致導(dǎo)致了優(yōu)勢喪失。

拿一款閱讀與發(fā)布文章的產(chǎn)品來說，關(guān)于網(wǎng)站與app的同步問題，當(dāng)我們從需求出發(fā)開始規(guī)劃設(shè)計時，我們談的是如何與網(wǎng)站打通進(jìn)行無縫的閱讀與發(fā)布文章功能的對接。而當(dāng)我們進(jìn)入具體功能設(shè)計時，討論的更多的是鍵盤的自定義功能是哪些，上傳圖片數(shù)量限制，圖片文字編輯如何操作，產(chǎn)生什么問題，怎么解決。

討論到最后，發(fā)現(xiàn)我們已經(jīng)完全聚焦在鍵盤的自定義上，更深度的聚焦在移動端APP編輯文章中存在的問題，以及解決的各種策略。隨著時間的流逝，我們已經(jīng)不自覺的進(jìn)入了極為細(xì)致，極為縝密的深層交互定義和行為推演中。

往往是午飯回來后，相關(guān)設(shè)計人員才會突然意識到，好像在不同的模塊出現(xiàn)了一致性問題，出現(xiàn)了出口入口的流程方向問題，還出現(xiàn)了忽略網(wǎng)站協(xié)同，單純的在思考移動端深層行為問題…而產(chǎn)品在Q（質(zhì)量）C（成本）T（時間）模型中如何權(quán)衡取舍，如何構(gòu)建具有競爭力的模式，如何通過設(shè)計和運營變現(xiàn)，也因為被帶入深度的細(xì)節(jié)討論忽略了全局。

類似以上的案例，在互聯(lián)網(wǎng)行業(yè)隨時可能發(fā)生，那么如何才能控制宏觀與微觀設(shè)計的切換自由度？

必備的工具如下：

1. 三大用戶工具

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

2. 用戶模型工具

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

3. 用戶心理模型工具

用戶心理模型是如何理解他要達(dá)到目標(biāo)所需要的信息和行為的，你提供的信息與行為與他的預(yù)期需要針對性的匹配。

4. 框架工具

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

框架圖能夠讓你在已確認(rèn)的需求上有組織的分類實施，并且能夠快速的看到獨立的需求末梢之間存在的內(nèi)在業(yè)務(wù)關(guān)聯(lián)或場景關(guān)聯(lián)，進(jìn)而影響你對設(shè)計方案行為的定義。使用框架圖也能夠在全局上提取出需要保持一致性的模塊（反過來說就是設(shè)計-視覺-代碼可以復(fù)用），同時也能夠從全局角度看到任務(wù)切換導(dǎo)致的各模塊間切換與協(xié)同。

5. 矩陣圖

涉及到復(fù)雜流程狀態(tài)或多用戶權(quán)限系統(tǒng)的，使用矩陣圖按照需求進(jìn)行多維度的狀態(tài)(對應(yīng)流程狀態(tài))或權(quán)限(對應(yīng)多用戶類別)進(jìn)行歸納整理。

矩陣圖主要用于涉及到多用戶角色、屬性、權(quán)限的系統(tǒng)。當(dāng)用戶角色和對應(yīng)的用戶權(quán)限、用戶屬性出現(xiàn)網(wǎng)狀關(guān)系時，必須使用一種方法保證信息的可查閱性。當(dāng)涉及到用戶權(quán)限時，經(jīng)常會出現(xiàn)戛然而止或者主觀臆斷，需要的話，直接將矩陣圖打印出來，對著角色-權(quán)限-屬性進(jìn)行查詢既可。如果有不合理的權(quán)限設(shè)置，隨時更新，保證整個團(tuán)隊對于用戶角色-權(quán)限-屬性都能夠在可感知的狀態(tài)中。注意這些更新是全局聯(lián)動的，矩陣中一個權(quán)限或?qū)傩缘淖兏?，都有可能引起全局多處的?lián)動更新，此時更需要全局觀和對矩陣的深度理解。

6. 流程圖

涉及到復(fù)雜流程的，需要將產(chǎn)品狀態(tài)+用戶行為梳理為流程圖，將用戶必然行為導(dǎo)致的產(chǎn)品狀態(tài)分化在流程圖體現(xiàn)出來，保障產(chǎn)品在各種狀態(tài)下的流程流向清晰可見。

如何將需求落地到設(shè)計中

假設(shè)你接到一個具體需求：用戶需要買火車票，請幫助他。

你該怎么將需求向設(shè)計落地？

首先第1個工具要發(fā)揮作用：買票的用戶是否存在新手、中間、專家用戶？12306已經(jīng)幫助我們培養(yǎng)分化了這三類用戶。

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

• 買票用戶分為A類：偶發(fā)需求產(chǎn)生的臨時性買票用戶；
• B類：長期不固定目的地出差的用戶；
• C類：長期固定出差相同目的地的用戶；
• D類……

第3個用戶心理模型工具：（此處需要強烈依賴調(diào)研）將獲得的心理模型作為關(guān)鍵信息輸入到設(shè)計流程，用交互設(shè)計服務(wù)A、B、C類用戶提供準(zhǔn)確的信息和行為。

第4個框架工具：將調(diào)研中獲取的用戶需求，從用戶模型中能看到三類模型在行為上的分化明顯，因此我們進(jìn)行”行為屬性”上的歸納。

接下來，你要理解買火車票的業(yè)務(wù)，確認(rèn)產(chǎn)品框架中重要的、高頻的需求集中在什么任務(wù)中。不重要的，低頻的但不可舍棄的需求集中在什么任務(wù)中，從而構(gòu)建出產(chǎn)品的框架。

接著，確認(rèn)好需求中的用戶成分是否涉及到多用戶、多權(quán)限矩陣。假設(shè)我們看到的是主體的C端用戶（因國情決定后臺票務(wù)數(shù)據(jù)唯一且不可私有化），那么買票的需求自然聚焦于買票本身，而非用戶權(quán)限矩陣中。

接下來，我們針對買票需求進(jìn)行需求落地，而配套服務(wù)和個人數(shù)據(jù)僅作為附屬數(shù)據(jù)，不作為本文討論的重點。

買票作為需求輸入后，我們在產(chǎn)品框架中看到了買票任務(wù)所需”信息”和”行為”，接下來即將進(jìn)入我們進(jìn)行需求落地的四部曲：需求——分析—拆解—篩選。

最終，我們看到的思路如下圖：

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

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

對于B、C類用戶，因為用戶的需求清晰明確，用戶行為所產(chǎn)生的數(shù)據(jù)可以作為設(shè)計決策和技術(shù)實現(xiàn)的依據(jù)，因此從集創(chuàng)堂槍型思維的角度來處理這兩類用戶需求，就需要對其所需信息和行為進(jìn)行場景化打包處理，目的是篩選信息，提升用戶因行為數(shù)量（或頻率）上升而導(dǎo)致的對操任務(wù)效率的需求。

我們需要將篩選出來的需求向設(shè)計框架中落地，以移動端為例：在做移動端設(shè)計時，我們的基本素養(yǎng)是要知道移動端的頁面對象的構(gòu)成，分別是：狀態(tài)欄、標(biāo)題欄（或叫做導(dǎo)航欄）、內(nèi)容區(qū)、標(biāo)簽欄。

從需求的重要性和頻率兩個維度來衡量買票的需求，會將A、B、C類用戶“買票”需求定義在標(biāo)簽欄中的頭屏位置中。

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

在布局信息和行為時，我們需要在行為層上來規(guī)劃信息布局。行為層上，用戶使用移動端基礎(chǔ)行為劃分為雙手操作和單手操作。而設(shè)計師手上必要的數(shù)據(jù)，便是考慮單雙手狀態(tài)下的手指操作行為的舒適區(qū)域數(shù)據(jù)。如下圖，我們看到用戶在不同的尺寸的屏幕上，單手操作舒適區(qū)和困難區(qū)有著顯著的變化，而我們?nèi)绾螞Q定使用什么樣的屏幕進(jìn)行上下適配，確定信息的布局盡可能落入舒適區(qū)？這里的問題好像越來越多了……

首先我們要理清楚需要什么樣的屏幕尺寸，再決定如何在內(nèi)容區(qū)布局信息和行為。

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

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

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

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

作為擁有信息和行為的雙重屬性的信息，優(yōu)先歸納進(jìn)入信息屬性中。考慮落入信息重要度高的“信息填充區(qū)”。

對于單純的行為，我們需喲啊考慮將其行為布局在“行為規(guī)劃區(qū)”中，以便用戶行為轉(zhuǎn)化過程中行為能夠落入屏幕的舒適觸摸區(qū)或伸展觸摸區(qū)

我們將信息必選項和行為必選項整理之后，結(jié)合觸摸區(qū)的區(qū)域，進(jìn)行布局，優(yōu)先布局信息（用戶第一時間需要），其次布局行為。

你來決定是時間重要還是地點重要，本例中，結(jié)合用戶已建立的使用習(xí)慣，決定將地點作為第一信息呈現(xiàn)。按照出發(fā)地、目的地的結(jié)構(gòu)顯示信息。為了信息本身的屬性，我們布局在屏幕偏上的位置，這里已經(jīng)進(jìn)入了屏幕的操作困難區(qū)，我們部分的犧牲了操作的舒適性來保障信息傳達(dá)的重要性。

其次，將時間和乘車人布局在伸展觸摸區(qū)，這里有一點需要強調(diào)：時間的選擇頻率要遠(yuǎn)大于地點和乘車人的選擇頻率。但從信息屬性的角度來決策，時間要大于乘車人，因此時間部分觸碰到了困難區(qū)，相對遠(yuǎn)離了舒適觸摸區(qū)。最后，是必選行為，盡可能得出碰到舒適觸摸區(qū)。

有了初始化的框架之后，接下來需要收集任務(wù)，進(jìn)行任務(wù)流程串的梳理。從上文方案中，我們看到用戶的行為包含

必選任務(wù)流程：

• a設(shè)定出發(fā)地-目的地；
• b設(shè)定出發(fā)時間；
• c設(shè)定乘車人。

可選任務(wù)流程：

1. 設(shè)定車次；
2. 設(shè)定座位；
3. 設(shè)定價格區(qū)間；
4. 設(shè)定返程時間。

接下來，我們隊必選任務(wù)流程進(jìn)行流程串梳理。

示例：設(shè)定出發(fā)地/目的地任務(wù)流程

結(jié)合整理出來的流程圖，進(jìn)行信息-行為的梳理，根據(jù)區(qū)域數(shù)據(jù)，進(jìn)行信息和行為的布局。將流程中的所有節(jié)點，全部使用頁面承載展現(xiàn)出來，便將設(shè)計理論落地到了實踐當(dāng)中。但是這只是基礎(chǔ)的設(shè)計能力。其中關(guān)于設(shè)計原則的把握還需要隨著項目經(jīng)驗一步步的積累。

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

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

B類用戶的高頻次特征，決定了他們對于購買流程效率的高需求。那么如何提高他們走完購票流程節(jié)點的效率，是此處思考的重點。提高效率的具體方法有很多，包括數(shù)據(jù)的復(fù)用、信息預(yù)設(shè)、基于用戶行為數(shù)據(jù)的潛在行為預(yù)判等。

• 這里可用的復(fù)用數(shù)據(jù)包括：用戶的歷史訂單、乘車人；
• 預(yù)設(shè)信息包括：地理位置定位、訂票價格區(qū)間、位置喜好；
• 基于用戶潛在行為的預(yù)判包括：訂票時間。

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

注意：在覆蓋B類用戶是，我們對時間選擇控件做了修改，并未使用iOS UIKit中提供的預(yù)定義功能控件，這將會為研發(fā)帶來定制的開發(fā)量。根據(jù)《iOS人機(jī)界面設(shè)計指南》中告知我們的信息：UIKit除了定義UI組件元素，還定義對象如何實現(xiàn)功能，例如手勢識別／繪圖／輔助功能和打印支持。

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

1. 欄（Bars）：包含了上下文信息來指引用戶他們所在的位置，以及控件來幫助用戶導(dǎo)航或執(zhí)行操作。
2. 內(nèi)容視圖（Cintent Views）：包含了應(yīng)用的具體內(nèi)容以及某些操作行為，比如滾動、插入、刪除、排序等等。
3. 控件（Controls）：用于執(zhí)行操作或展示信息。
4. 臨時視圖（Temporary Views）：短暫出現(xiàn)給予用戶重要信息或提供更多的選擇和功能。

iOS官方已經(jīng)為開發(fā)者定義了一整套完整的UI類-子類（對應(yīng)的是我們可見的操作控件）及功能，比如button按鈕控件，按鈕的點擊行為，禁用狀態(tài)等，都有了現(xiàn)成代碼可被研發(fā)人員拿來直接使用。

我們在設(shè)計方案之前，盡可能先了解到Ios預(yù)定義的控件及其可實現(xiàn)的功能，盡可能的復(fù)用官網(wǎng)提供的控件和功能，一方面是為了保護(hù)用戶使用iOS系統(tǒng)系統(tǒng)所獲取的行為——含義一致性，另一方面也提高了研發(fā)人員的生產(chǎn)效率。

但是面對著用戶需求，實在需要改變的時候，可以考慮自定義控件，此時需要拿出具有說服性的證據(jù)來支撐你的自定義控件。而證據(jù)便是調(diào)研歸納出來的用戶大類模型，這些用戶模型的行為特征決定了產(chǎn)品該以何種形態(tài)為用戶服務(wù)。若單純?yōu)榱搜邪l(fā)效率，而犧牲掉用戶行為習(xí)慣所帶來的體驗或商業(yè)機(jī)會點，那就是產(chǎn)品經(jīng)理在權(quán)衡取舍環(huán)節(jié)的失職了。

基于以上的分析，我們需要對時間控件進(jìn)行適當(dāng)?shù)男薷?，自定義時間控件，滿足更大面積的用戶群體。

C類用戶的典型行為是在訂票行為上具有周期性，比如在經(jīng)濟(jì)發(fā)達(dá)地區(qū)的長三角、珠三角、京津翼地區(qū)，城際往返，周末夸城市往返的行為比較普遍。針對這類用戶的訂票行為，可以在技術(shù)上進(jìn)行跟蹤，并計算出周期，在用戶其他變量(出發(fā)地-目的地、乘車人)固定的前提下，對時間變量進(jìn)行行為預(yù)判，推出復(fù)合用戶活動周期的日期默認(rèn)提供到用戶。

最后，在可選范圍內(nèi)，將輔助性行為進(jìn)行隱藏式布局。根據(jù)場景，出發(fā)地默認(rèn)定位當(dāng)前所在城市，但是若數(shù)據(jù)不更新，可以快捷進(jìn)行本地手動定位。對于選車次，選座位，選價格區(qū)間這些不重要，不高頻，但有需求的任務(wù)流程，提供可選入口，隱藏二級信息和流程，轉(zhuǎn)化成可選項，供熟練或?qū)＜矣脩魧W(xué)習(xí)后使用。

至此，設(shè)計從理論向?qū)嵺`落地全部結(jié)束。感謝大家的寶貴時間！

作者：青木，集創(chuàng)堂聯(lián)合創(chuàng)始人，公眾號：集創(chuàng)堂

本文由 @青木?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。