在這篇客座文章中，漯河vi設(shè)計公司解釋了如何為具有活躍用戶群的現(xiàn)有流行產(chǎn)品設(shè)計功能。Ben 向我們介紹了最佳實踐，并分享了他在設(shè)計Boards 時的軼事，這是Todoist 的最新功能——一個擁有數(shù)百萬用戶的待辦事項列表應(yīng)用程序。
使用Todoist 和Twist 設(shè)計更好的工作和生活方式。
向人們已經(jīng)喜歡的應(yīng)用程序添加新功能很難。人們已經(jīng)習(xí)慣了他們現(xiàn)有的工作流程，他們對事情的運作方式有期望，他們不喜歡任何形式的變化，并且您的新功能必須符合您之前版本的標(biāo)準(zhǔn)。在產(chǎn)品生命周期的早期，您可以在沒有太多影響的情況下做出重大轉(zhuǎn)變。對成熟產(chǎn)品進(jìn)行改進(jìn)完全是另一回事。讓每個人都開心是不可能的，那么您如何做出設(shè)計決策以推動您的產(chǎn)品向前發(fā)展以吸引更廣泛的受眾，同時又不會疏遠(yuǎn)您當(dāng)前的用戶群？
您如何做出設(shè)計決策以推動您的產(chǎn)品向前發(fā)展以吸引更廣泛的受眾，同時又不疏遠(yuǎn)您當(dāng)前的用戶群？
在漯河vi設(shè)計公司，每次我們對Todoist進(jìn)行更改時，產(chǎn)品設(shè)計團(tuán)隊都會應(yīng)對這些挑戰(zhàn)——這是一個每天有2500 萬人用來保持生活井井有條的待辦事項列表應(yīng)用程序。在本指南中，我將以我們最近發(fā)布的新版塊視圖為例，引導(dǎo)您為擁有熱情用戶群的現(xiàn)有產(chǎn)品設(shè)計功能。Boards 是一個新的基于卡片的視圖，允許您從Todoist 的傳統(tǒng)任務(wù)列表視圖切換到看板式的列視圖。
在本文中，漯河vi設(shè)計公司將分享我從設(shè)計過程中學(xué)到的東西，從問題開始，定義我們的目標(biāo)，早期設(shè)計迭代，反饋和研究，這些都導(dǎo)致我們的設(shè)計決策一直到交付我們的最終功能。
讓我們深入了解我們的設(shè)計學(xué)習(xí)和實踐，以及如何將這些課程應(yīng)用到您自己的產(chǎn)品中。
第1 步：定義您要解決的問題
對于每個新的主要功能，我們首先創(chuàng)建一個產(chǎn)品規(guī)格文檔以供內(nèi)部共享。它可以幫助我們定義我們的功能試圖解決的問題。我們使用該文檔作為我們設(shè)計解決方案的起點。我們的產(chǎn)品規(guī)格通常由以下結(jié)構(gòu)組成：
這些細(xì)節(jié)有助于我們闡明設(shè)計應(yīng)該實現(xiàn)的目標(biāo)。例如，我們對Boards 的問題陳述如下所示：
在處理任務(wù)時，人們無法跟蹤任務(wù)在執(zhí)行過程中所經(jīng)歷的不同階段。例如，很高興知道某項任務(wù)是處于“新建”、“進(jìn)行中”還是“完成”階段。
在項目級別上，人們?nèi)鄙僖环N有效的方式來可視化他們的進(jìn)度并隨著項目的發(fā)展重新組織任務(wù)。
在Doist，當(dāng)我們在小團(tuán)隊中工作時，我們自己也感受到了這種痛苦，這些團(tuán)隊每次在特定項目上協(xié)作1-3 個月。雖然我們能夠使用過濾器和標(biāo)簽來保持井井有條，但Todoist 并沒有提供簡單的解決方案來跟蹤任務(wù)狀態(tài)或項目進(jìn)度。我們同意研究這個問題的解決方案，這意味著提出一個重要的新功能，它不會妨礙人們對Todoist 的喜愛。
第2 步：為更新設(shè)定明確的目標(biāo)和參數(shù)
對于要解決的問題，我們通常會嘗試明確產(chǎn)品的目標(biāo)，我們將在整個過程中回顧這些目標(biāo)：
一個保持Todoist 簡潔性的簡單視圖
能夠?qū)⑷蝿?wù)拖放到您需要的任何地方
默認(rèn)情況下查看按Todoist 部分分組的項目
輕松與隊友合作，無需復(fù)雜的單人游戲使用
您的組織可能有您遵循的標(biāo)準(zhǔn)，這些標(biāo)準(zhǔn)有助于告知您將如何設(shè)計解決方案。對于Boards，以下是我們遵循的一些參數(shù)以符合Todoist 的標(biāo)準(zhǔn)：
所有平臺的一致性和均等性
主題間無縫切換
適用于各種語言
有了這些目標(biāo)，我們開始設(shè)計我們的解決方案。
第3 步：從現(xiàn)有的用戶反饋和指標(biāo)中學(xué)習(xí)
在設(shè)計新功能之前，我們會花時間查看當(dāng)前的產(chǎn)品反饋。這有助于指導(dǎo)我們的決策并最終確定我們的設(shè)計。反饋來自許多來源：支持票、社交媒體評論、分析工具、用戶測試和觀察。
這是要求我們在Todoist 中提供看板的無數(shù)支持票之一：
“Todoist 擅長管理個人任務(wù)，但我的絕大多數(shù)工作都是在團(tuán)隊中完成的。看板對查看任務(wù)狀態(tài)更有幫助。如果每個項目都可以有“持有”任務(wù)的板子，那就太棒了！”
漯河vi設(shè)計公司發(fā)現(xiàn)人們項目的可視化、看板式視圖是我們要求最高的功能之一，但這還不足以實現(xiàn)一個功能。一段時間以來，我們一直在考慮Boards 是否真正符合我們的產(chǎn)品愿景，而這只是增加了一個繼續(xù)前進(jìn)的理由。
最終，團(tuán)隊同意繼續(xù)前進(jìn)并構(gòu)建該功能。
第4 步：研究這個想法
看板是一種生產(chǎn)力方法，我們希望將其集成到Todoist 中，以便向更多喜歡這種處理任務(wù)方式的人開放產(chǎn)品。我們研究了方法并研究了最流行的看板工具來理解和適應(yīng)常見的約定。我們開始考慮看板的哪些方面可以在Todoist 中運作良好。具體來說，我們想要一種解決方案，既能保留Todoist 的簡單性，又能在各種工作流程中提供可視化項目和跟蹤任務(wù)的可能性。
第5 步：以低保真方式概述解決方案
在我們的產(chǎn)品規(guī)范文檔中，我們首先以書面形式定義了一個提議的解決方案。我們澄清提議的想法、要求，并讓設(shè)計和產(chǎn)品團(tuán)隊進(jìn)來提供他們的反饋。隨著時間的推移，我們可能會包括視覺探索、紙上草圖、數(shù)字繪圖或粗略模型，以幫助闡明功能的選項和整體愿景。
對于Boards，我們的解決方案是這樣的：
板視圖將提供一種有效的方式來跟蹤和可視化任務(wù)的狀態(tài)。因此，跟蹤項目的每個步驟、根據(jù)需要重新安排優(yōu)先級并輕松了解項目的最新進(jìn)展將變得更加容易。在更高層次上，看板視圖將有助于鞏固Todoist 作為頂級項目管理工具的地位。
第6 步：測試您的模型并盡早獲得反饋
一旦你為你的設(shè)計確定了方向，沒有什么比模型更能真正將一個想法變?yōu)楝F(xiàn)實并知道它是否感覺正確。
漯河vi設(shè)計公司開始為Web 平臺的Todoist Boards 設(shè)計一個模型，看看我們是否能找到一種行之有效的UX 方法。一旦我們對Web 的設(shè)計語言有了基本的了解，我們就會轉(zhuǎn)向移動設(shè)備，看看該設(shè)計是否適用于iOS 和Android。
一旦我們對第一次設(shè)計迭代感到滿意，我們就會在內(nèi)部與整個設(shè)計團(tuán)隊和公司的其他成員分享，以獲得第一輪反饋。
早期的董事會模型
正是在這里，Boards 進(jìn)行了許多詳細(xì)的更改，從背景顏色值到角半徑再到填充更改。這些調(diào)整符合我們的目標(biāo)，即保持列表和看板視圖之間的一致性，并在所有平臺上調(diào)整功能。
根據(jù)與項目目標(biāo)一致的反饋迭代設(shè)計
在整個功能開發(fā)過程中，我們通過不同的方式收集內(nèi)部團(tuán)隊和用戶的反饋：
設(shè)計評論
開發(fā)反饋
來自公司的更廣泛的反饋
個人用戶測試會話
測試版推出
當(dāng)我們向團(tuán)隊的其他成員開放我們的設(shè)計模型時，會收到大量反饋。我們會在反饋中尋找模式來幫助指導(dǎo)設(shè)計。對于Boards，我們使用指定的Todoist 項目將所有反饋收集到一個地方，然后優(yōu)先考慮我們想要更改和改進(jìn)的內(nèi)容。
反饋項目
為了評估反饋并確定它如何適合我們的功能，我們會參考原始產(chǎn)品規(guī)范并檢查哪些反饋符合功能的原始目標(biāo)。在設(shè)計過程中，作為我們一開始就設(shè)定的目標(biāo)和參數(shù)的一部分（參見上面的列表），我們還首先關(guān)注偉大的平臺平價。優(yōu)先考慮一致的體驗有助于我們跨平臺發(fā)布更好的第一版功能。
例如，在項目開始時，漯河vi設(shè)計公司討論了移動設(shè)備上的縮小功能的需求，以便在較小的設(shè)備上獲得鳥瞰圖。該功能將提供強大的附加功能，但也會引入額外的復(fù)雜性和開發(fā)時間。我們的產(chǎn)品規(guī)范要求規(guī)定任務(wù)和部分應(yīng)該是可移動的，并且我們已經(jīng)在沒有縮小功能的情況下實現(xiàn)了這一目標(biāo)。最后，我們認(rèn)為這是一個不錯的功能，并且我們希望確保在轉(zhuǎn)向不錯的功能之前，我們花了足夠的時間來獲得核心功能。
根據(jù)內(nèi)部小隊的反饋，我們選擇放棄縮小功能并進(jìn)一步完善核心功能。在第一個版本發(fā)布后，我們?nèi)匀豢梢栽谖磥淼姆e壓工作中收集所有相關(guān)的想法和建議。
反饋很容易讓人不知所措和偏離方向，因此最好為可以實現(xiàn)或不可以實現(xiàn)的目標(biāo)設(shè)定某些期望和目標(biāo)——實現(xiàn)規(guī)范中列出的目標(biāo)的核心是什么，什么是可以擁有的。
第7 步：創(chuàng)建與當(dāng)前產(chǎn)品一起使用的一致組件
新功能是為用戶提供額外價值的令人興奮的機會，但保持與產(chǎn)品傳統(tǒng)的一致性仍然至關(guān)重要。
對于板視圖，我們嘗試了許多不同的樣式、組件和變體，但最終我們希望人們在多年來默認(rèn)的經(jīng)典列表視圖和新的板視圖之間切換時有賓至如歸的感覺。我們希望這種體驗感覺像是Todoist 的自然演變。
因此，我們盡可能多地重復(fù)使用元素（顏色、大小、文本樣式、填充、陰影），并且只在絕對必要時才引入新組件。這使我們能夠在新功能和熟悉的體驗之間找到平衡點。
記錄邊緣情況和所有可能的交互狀態(tài)
我們最初的解決方案通常會根據(jù)我們定義的目標(biāo)記錄最常見的用例，但人們使用應(yīng)用程序的方式多種多樣。我們試圖預(yù)測人們使用產(chǎn)品的所有可能路徑，以確保體驗是一致的。
詳細(xì)記錄邊緣案例有助于為開發(fā)團(tuán)隊創(chuàng)建更強大的框架，并最終帶來更好的體驗。對于Boards，我們記錄了許多不同的情況，從任務(wù)卡的交互狀態(tài)（空閑、懸停、按下、拖動）到空視圖、編輯和滾動狀態(tài)等等。
交互狀態(tài)
由于Todoist 支持18 種語言，因此也可以通過本地化出現(xiàn)極端情況。不同的語言字符串可能不適合設(shè)計者想要的空間。所以對于板子，我們用不同的語言字符串進(jìn)行了測試，并確保元素會被截斷或換行，并且內(nèi)容會很好地重排。
在所有平臺上進(jìn)行測試并與開發(fā)團(tuán)隊一起迭代
在每個平臺上本地測試設(shè)計是必不可少的——你不能簡單地從桌面上觀察你的設(shè)計。我們使用我們的設(shè)計工具中的鏡像應(yīng)用程序來預(yù)覽最新的模型，以發(fā)現(xiàn)在我們的計算機顯示器上進(jìn)行設(shè)計時并不立即明顯的尺寸、顏色和交互問題。
在設(shè)計實現(xiàn)的后期階段，我們還會審查實時構(gòu)建的內(nèi)部實現(xiàn)，以發(fā)現(xiàn)與文檔設(shè)計的任何差異，或者測試我們不確定的想法和價值觀。
陰影值
對于Boards，我們跨平臺測試了任務(wù)卡組件的多個陰影值，以找到合適的對比度，同時盡量保持最小的美感。
第8 步：遵循最新的平臺指南和可訪問性標(biāo)準(zhǔn)
在設(shè)計新功能時，我們會回顧最新的平臺指南。蘋果、谷歌、微軟都有記錄良好的資源，可以幫助設(shè)計師創(chuàng)造更好的體驗。
了解最新標(biāo)準(zhǔn)有助于我們?yōu)樵O(shè)計解決方案做出正確選擇，并在平臺和產(chǎn)品之間創(chuàng)建混合解決方案。除了最新的平臺指南，我們還經(jīng)常在設(shè)計過程中討論和檢查可訪問性標(biāo)準(zhǔn)。
在我們所有的產(chǎn)品中，我們都試圖找到一個任何人都可以使用的解決方案——良好的顏色對比度、大小合適的文本樣式和舒適的觸摸目標(biāo)，等等，這些都應(yīng)該是任何新功能的默認(rèn)設(shè)置。
第9 步：創(chuàng)建跨平臺的一致性
漯河vi設(shè)計公司的產(chǎn)品Todoist 和Twist 可在桌面、網(wǎng)絡(luò)、iOS 和Android 上運行。跨平臺創(chuàng)建一致性和同等性非常重要，以便為不同設(shè)備類型的人們提供可靠和無縫的體驗。
雖然我們通常從一個平臺開始并完全定義解決方案，但我們很快就會轉(zhuǎn)向其他平臺，看看解決方案是否成立。例如，對于Boards，我們經(jīng)歷了“添加任務(wù)”按鈕的許多不同迭代，它應(yīng)該位于哪里，以及所有平臺是否應(yīng)該采用相同的解決方案。對于我們的“添加任務(wù)”按鈕，我們從FAB（浮動操作按鈕）中移開，因為我們需要為每一列提供一個專用的“添加任務(wù)”按鈕，以便可以直接內(nèi)聯(lián)添加任務(wù)。在移動設(shè)備上，F(xiàn)AB 仍然可以工作，但在平板電腦上，單個FAB 會導(dǎo)致混淆任務(wù)將添加到哪個部分。我們嘗試了不同的顏色和樣式來彌合FAB 和常規(guī)按鈕之間的差距，但最終我們選擇了與桌面上的內(nèi)聯(lián)“添加任務(wù)”按鈕最一致的解決方案。有時會進(jìn)行權(quán)衡，但我們會盡可能保持組件相同。
第10 步：考慮您的設(shè)計如何在暗模式下工作
Todoist 帶有一系列可供人們選擇的主題。暗模式是已證明非常受我們用戶歡迎的主題之一。
當(dāng)我們開始設(shè)計新的電路板視圖時，我們知道它也必須在暗模式下工作良好。我們有一組現(xiàn)有的暗模式顏色值，我們可以將其重用于板視圖，但需要調(diào)整一些值（如邊框樣式和陰影）以與新的任務(wù)卡組件很好地配合。
記錄暗模式并支持它的新功能有助于我們?yōu)橛脩籼峁╊~外的潤色，以便他們可以在一天中的任何時間利用新功能或簡單地切換以根據(jù)自己的喜好自定義應(yīng)用程序。
設(shè)計新功能是一種平衡行為。它通常需要仔細(xì)考慮當(dāng)前產(chǎn)品的設(shè)計意圖、開發(fā)影響、用戶需求和期望。在過快地深入你的設(shè)計之前，試著澄清你的可交付成果并在做出新的決定或權(quán)衡時參考你的目標(biāo)，從現(xiàn)有用戶那里找到反饋，嘗試不同的想法，看看哪一個最適合這個問題。
可能沒有完美的解決方案，但效果足夠好。不斷迭代該功能并隨著時間的推移對其進(jìn)行改進(jìn)。設(shè)計從未完成
添加品牌總監(jiān)微信
總監(jiān)微信
復(fù)制成功
業(yè)務(wù)咨詢 何先生
業(yè)務(wù)咨詢 何先生
搜索感興趣的內(nèi)容
