設(shè)計(jì)框架的搭建不僅是一個(gè)復(fù)雜龐大的工程，而且我們還要重新去思考，如何去為我們的客戶構(gòu)建一個(gè)更加高效、簡單的清單工具？本文作者分享了工具設(shè)計(jì)框架搭建思路，感興趣的童鞋一起來看看吧。

前言

在設(shè)計(jì)一個(gè)全新的產(chǎn)品時(shí)，經(jīng)常會(huì)遇到很多問題，用戶是誰？這個(gè)模塊應(yīng)該占界面中多大的區(qū)域，用戶的操作流程是如何的？在遇到較為復(fù)雜的交互模式和行為的工具型產(chǎn)品時(shí)，設(shè)計(jì)師可能一開始就陷入某個(gè)功能的設(shè)計(jì)細(xì)節(jié)中，這往往到了產(chǎn)品后續(xù)迭代中會(huì)產(chǎn)生一些因前期設(shè)計(jì)框架的思考不足，導(dǎo)致了產(chǎn)品后續(xù)迭代過程中需要從框架層面進(jìn)行一些調(diào)整，可能會(huì)帶來一些不可逆的傷害。

所以別著急展開功能設(shè)計(jì)，將這些問題暫時(shí)先放一放，梳理一下思路從更加底層開始思考，思考整體的產(chǎn)品框架?！禔bout face》提到的設(shè)計(jì)框架（Design Framework）為設(shè)計(jì)人員梳理設(shè)計(jì)框架提供了一些思路。

經(jīng)過梳理大致可以分為需求場景、人物模型、產(chǎn)品目標(biāo)、界面設(shè)計(jì)、用戶行為5個(gè)部分。本文著重探索在交互框架設(shè)計(jì)階段底層組織原則開始至功能交互階段 4 個(gè)設(shè)計(jì)階段過程中的一些案例和經(jīng)驗(yàn)分享。

一、產(chǎn)品的底層組織原則

產(chǎn)品的底層組織原則會(huì)深遠(yuǎn)的影響整個(gè)產(chǎn)品的姿態(tài)、載體、交互方式，它是對用戶模型、用戶需求和情景進(jìn)行深刻的梳理總結(jié)后的成果。一般可以分為交互的載體和限制條件、產(chǎn)品的姿態(tài)、用戶與產(chǎn)品的交互方式。

如 2019 年 Microsoft Design 團(tuán)隊(duì)開始研究移動(dòng)辦公的人群，例如車間工人，他們是如何在沒有電腦的情況下完成工作。從而推出了 「Office for Mobile」為人們提供在手機(jī)或平板電腦上高效、直接地完成工作的產(chǎn)品。

但很多時(shí)候用戶情景不是唯一會(huì)影響產(chǎn)品交互載體的唯一因素，有時(shí)候可能是產(chǎn)品的載體不同也會(huì)讓產(chǎn)品呈現(xiàn)有著很大的區(qū)別。如 「Sketchup for Web」與「Sketchup Pro」因載體的不同發(fā)展出兩種設(shè)計(jì)思路的產(chǎn)品。

同時(shí)交互載體也會(huì)帶來一些限制因素如輸入方式，如大多數(shù)的 PC 有鍵盤和鼠標(biāo)，但沒有可觸控的屏幕，手機(jī)有觸控屏可以通過虛擬鍵盤進(jìn)行輸入但相較于實(shí)體鍵盤有明顯的劣勢。但手機(jī)又可以通過攝像頭結(jié)合圖像算法進(jìn)行更高效率的輸入。

「酷空間」是 3D 設(shè)計(jì)型產(chǎn)品，在定義產(chǎn)品的輸入方式時(shí)我們需要調(diào)研目標(biāo)用戶的設(shè)備情況來決定我們是否考慮三鍵滾輪鼠標(biāo)輸入方式，（三鍵滾輪鼠標(biāo)在建模時(shí)能夠輕松旋轉(zhuǎn)、縮放和精確定位）。因此在探索產(chǎn)品交互載體與輸入方式時(shí)需要考慮用戶的使用情景，用戶現(xiàn)有工作中所使用的設(shè)備來決定產(chǎn)品的底層原則。

此外產(chǎn)品的姿態(tài)對產(chǎn)品的設(shè)計(jì)框架至關(guān)重要。產(chǎn)品的姿態(tài)是一個(gè)比較寬泛的概念，在工具設(shè)計(jì)領(lǐng)域，產(chǎn)品姿態(tài)一般分為工具型產(chǎn)品和輕交互型產(chǎn)品，在我看來酷家樂、Photoshop、Sketchup 都屬于工具型產(chǎn)品，因其都需要用戶較長時(shí)間的投入（一般 30 分鐘以上）、高密度的交互行為、交互模式服務(wù)于效率。

在對于工具型產(chǎn)品的設(shè)計(jì)原則上我非常贊同 Microsoft Design 團(tuán)隊(duì)在 2021 發(fā)布的《Four Principles for the Future of Design》文章中提到的新設(shè)計(jì)原則 “Built for focus”該原則引導(dǎo)產(chǎn)品成為用戶能夠按照自己的意愿進(jìn)行工作。產(chǎn)品盡可能減少視覺元素和信息的干擾讓用戶保持專注、平靜和自信。就如同 Sketch在多次版本迭代之后的 UI 風(fēng)格逐漸趨于和諧安靜。

酷空間的設(shè)計(jì)團(tuán)隊(duì)在設(shè)計(jì)清單領(lǐng)域產(chǎn)品時(shí)曾經(jīng)就因?yàn)閱卧駜?nèi)發(fā)生的錯(cuò)誤提示采用 Popover dialog（系統(tǒng)觸發(fā)，但比 dialog 阻斷要弱一些） 還是 Information Card（用戶主動(dòng) Hover 觸發(fā)） 展開過一些討論，最后達(dá)成一致的結(jié)論是我們認(rèn)為 Popover dialog 對用戶的打斷會(huì)更強(qiáng)，在實(shí)際的用戶使用流程中，處理錯(cuò)誤單元格的數(shù)據(jù)不一定是第一優(yōu)先級的事情，所以選擇了Information Card + Status Bar 由用戶的主動(dòng)行為觸發(fā)提示來告知用戶這個(gè)單元格發(fā)生的事情。

但如果這是一個(gè)中后臺(tái)的管理系統(tǒng)，用戶在創(chuàng)建一份訂單的表單，我們就需要及時(shí)的指出錯(cuò)誤，避免讓用戶發(fā)生不必要的損失。因此要在框架設(shè)計(jì)階段要弄清楚目標(biāo)用戶是需要一個(gè)什么姿態(tài)的產(chǎn)品，用戶對該產(chǎn)品的潛在投入程度等問題會(huì)決定后續(xù)設(shè)計(jì)過程中選擇哪種交互模式。

二、定義功能與數(shù)據(jù)元素

在定義產(chǎn)品的功能與主要的數(shù)據(jù)元素階段整個(gè)產(chǎn)研團(tuán)隊(duì)都會(huì)行動(dòng)起來，這個(gè)階段的主力是產(chǎn)品經(jīng)理但不意味著設(shè)計(jì)師只能等待產(chǎn)品調(diào)研成果再進(jìn)行設(shè)計(jì)。先來看看功能與數(shù)據(jù)元素是如何理解的，他們之間是如何相互影響？

1、功能

功能可以理解為在考慮用戶模型及產(chǎn)品目標(biāo)后對數(shù)據(jù)元素的操作工具、數(shù)據(jù)元素的視覺和結(jié)構(gòu)化的管理方式。定義功能的過程可以簡單的拆成 需求、數(shù)據(jù)元素、功能三個(gè)部分，需求決定數(shù)據(jù)元素個(gè)體的信息內(nèi)容、交互的訪問、信息間的主次和關(guān)聯(lián)性。

功能則是數(shù)據(jù)元素的操作工具、數(shù)據(jù)元素的視覺和結(jié)構(gòu)化的管理方式。三者之間存在比較明確的上下游聯(lián)系，并且在不同的部分需要有一些關(guān)注的信息，如下圖所示：

在需求階段設(shè)計(jì)團(tuán)隊(duì)可以與產(chǎn)品團(tuán)隊(duì)共同對用戶的使用場景和意圖進(jìn)行調(diào)研和分析，隨著調(diào)研深入此階段可以逐漸豐富用戶模型的信息，同時(shí)著手建立用戶故事，注意此時(shí)不要忽略收到的任何信息，注意細(xì)節(jié)，可以是用戶在不同工作流之間的流轉(zhuǎn)所傳遞的信息、或者用戶在工作流中是否被打斷之類發(fā)生的事件很可能會(huì)影響后續(xù)設(shè)計(jì)的功能和交互。

此時(shí) Customer Journey Map 客戶旅程地圖依然是一個(gè)非常值得推薦的工具。

酷空間產(chǎn)研團(tuán)隊(duì)在開發(fā)「清單領(lǐng)域產(chǎn)品」時(shí)曾對于采用 Airtable 的關(guān)系型數(shù)據(jù)庫型的模式還是Excel 自由單元格模式時(shí)展開了多次討論以及策略的調(diào)整，因?yàn)椴捎?Excel 自由單元格的交互模式會(huì)帶來更多研發(fā)成本并且對當(dāng)前的技術(shù)水平有一定的挑戰(zhàn)。

最后我們從用戶的 Excel 工程文件找到了答案，用戶的大部分?jǐn)?shù)據(jù)是接近于關(guān)系型數(shù)據(jù)庫的模式，但在一些引用和匯總時(shí)又接近 Excel 自由單元格模式，所以最后我們結(jié)合了兩者的優(yōu)勢設(shè)計(jì)出自由轉(zhuǎn)化的清單單元格交互模式。在對單元格交互模式的設(shè)計(jì)過程中，我們尊重用戶過去經(jīng)驗(yàn)，依然保留 Excel 最常用的交互模式。

2、功能元素的布局

在確定底層組織原則和功能與數(shù)據(jù)元素后進(jìn)入草圖階段前，先著手思考這幾個(gè)問題：

• 哪些元素需要大片的區(qū)域，哪些不需要？
• 功能間的組織結(jié)構(gòu)？
• 交互組件間如何組織才能提高工作效率？
• 哪些元素在使用時(shí)存在關(guān)聯(lián)性，哪些不是？
• 關(guān)聯(lián)性的元素使用時(shí)的順序如何？
• 哪些數(shù)據(jù)元素能幫助用戶做決策？（注意不同用戶模型的決策因子）
• 采用何種交互模式？

3、競品分析

在此階段做競品分析對解決上述關(guān)于布局、工作流、數(shù)據(jù)元素、交互模式問題有很大的幫助，一方面可以吸取競品的長處，一反面可以以批判性的進(jìn)行橫向?qū)Ρ任覀兣c競品之間的優(yōu)劣，我們與競品間的差異性是什么。

下圖為酷空間設(shè)計(jì)團(tuán)隊(duì)在搭建清單算量布局時(shí)調(diào)研的競品工具創(chuàng)建一份工程清單可能會(huì)使用到的功能，以及工作流中上下游是如何配合。看看競品定義的數(shù)據(jù)元素是什么。

這是一個(gè)比較細(xì)致的工程，但整個(gè)過程中會(huì)有不少以外收獲，如競品的一些創(chuàng)新性的交互模式，一些殺手級的功能。競品是如何組織信息架構(gòu)，將我們的用戶模型和用戶故事帶入到競品的功能中是否所有的需求都被很好的照顧到，有哪些是競品做的有待優(yōu)化空間的地方，我們可以學(xué)習(xí)超越的地方。

以及我們的產(chǎn)品至少要做到什么樣的程度才能有競爭力。就如同我們在調(diào)研的過程中發(fā)現(xiàn) 競品的主要客戶是一些建筑、市政工程之類的大型工程承包商，因此競品軟件服務(wù)費(fèi)用較為昂貴，這其實(shí)與酷家樂為中小型企業(yè)服務(wù)的策略存在差異，因此我們可以與 競品展開差異性競爭。（PS：如果有條件的話，可以研究競品的用戶是如何使用競品的，他們最常用最認(rèn)可的功能/體驗(yàn)是哪些，哪些是影響他們的體驗(yàn)的設(shè)計(jì)，這對產(chǎn)品后續(xù)是否能夠取得成功有很大幫助）

除了上述提到的用戶群、產(chǎn)品功能、產(chǎn)品框架、交互流程、頁面布局之外還可以收集競品視覺風(fēng)格、發(fā)展歷史相關(guān)的信息。

4、模塊布局

完成了上述的提到的（競品分析不是必須執(zhí)行的步驟）流程后，我們明確了會(huì)影響界面布局的因素即可以進(jìn)入草圖環(huán)節(jié)，如下圖所示，一些較大的功能模塊劃分以及交互熱區(qū)的評估。

5、交互熱區(qū)評估

我們需要保障用戶主要操作對象和主要的信息有足夠的展示和操作空間，高頻交互模塊之間的交互距離足夠短。確定模塊支持變化容器大小、哪些模塊采用折疊

6、容器功能模塊的組織原則

草圖階段在對大功能模塊的布局確定后需要對每個(gè)容器內(nèi)的功能元素進(jìn)行組織，我們將功能按功能間的關(guān)聯(lián)性、使用頻率、重要程度、基礎(chǔ)與高級維度進(jìn)行組織。如 Excel 自由單元格類型的產(chǎn)品與關(guān)系型數(shù)據(jù)庫的產(chǎn)品對工具欄的功能就采用了不同的組織邏輯。

三、小結(jié)

設(shè)計(jì)框架的搭建是一個(gè)復(fù)雜而又龐大的工程，在「璇璣」的Alpha版本的設(shè)計(jì)過程中我們重新思考如何為我們的客戶構(gòu)建一個(gè)更加高效、簡單的清單工具。上述的一些工具和方法是我們從迷霧中尋找答案的一些經(jīng)驗(yàn)，當(dāng)然還有很多如“情景腳本”、“易用性測試”過程中使用到的工具無法一一介紹。

并且在推演和設(shè)計(jì)過程中可能會(huì)遇到從產(chǎn)品目標(biāo)到設(shè)計(jì)思路的反復(fù)調(diào)整的情況，這很難避免。因此最能滿足用戶的目標(biāo)、符合設(shè)計(jì)原則、最適合的當(dāng)下的技術(shù)方案和成本投入成為我們過程中的最有力的決策工具。

這是我們的璇璣工具設(shè)計(jì)之旅，歡迎您在下面的評論中提出任何想法或反饋。

參考文獻(xiàn)

• 《Four Principles for the Future of Design》
• 《About Face 4》