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