Peter Drucker 說(shuō)過(guò)：「量化才能管理。」這個(gè)格言后來(lái)成為了我的信條。我決定將我的目標(biāo)量化，將它分解成為最基礎(chǔ)的習(xí)慣來(lái)執(zhí)行，并且以每天一定量的執(zhí)行，來(lái)實(shí)現(xiàn)最終的目標(biāo)。

我們先構(gòu)建了一個(gè)免費(fèi)的 Chrome 插件 Confetti ，這是一個(gè)能夠幫你追蹤日常習(xí)慣的工具，每次完成一個(gè)任務(wù)，都會(huì)有五彩繽紛的紙屑效果出現(xiàn)，祝賀你守住了習(xí)慣，達(dá)成目標(biāo)。

以下見解希望對(duì)你有所幫助!

1、一開始就要界定好產(chǎn)品特性

一開始，我和 Wilson 就決定使用3屏的主要功能，并構(gòu)建了一個(gè)粗糙的原型。但是，我們沒(méi)有足夠的遠(yuǎn)見，無(wú)法設(shè)想我們的產(chǎn)品最終的方向，也沒(méi)有對(duì)全部的想法進(jìn)行深入的打磨。

最終，我們向后退了一步。我們回過(guò)頭來(lái)，確定了最小可執(zhí)行原型的發(fā)布日期，以及真正的核心功能。我們?cè)?Notion 上創(chuàng)建了一個(gè)文檔，并且開始梳理和管理哪些功能是「必需品」，哪些功能「如果有了會(huì)更好」。比如，登錄、注冊(cè)、新用戶引導(dǎo)是必不可少的功能。但是，我們認(rèn)為「重新排列習(xí)慣」是一個(gè)提升體驗(yàn)但是并不亟需的功能。

我們基于這一點(diǎn)，我們開始抓住核心功能，盡可能讓它們足夠易用，強(qiáng)化核心特性。通過(guò)確定核心功能的優(yōu)先級(jí)，并且確定發(fā)布日期，借此緩解我們的精神壓力，確定我們不會(huì)被成堆的功能所淹沒(méi)。這也似地我們有足夠的動(dòng)力解決核心功能。

2、有很多流程和狀態(tài)需要搞定

在設(shè)計(jì)產(chǎn)品的時(shí)候，我經(jīng)常被提醒要處理好每一個(gè)邊緣情況，填好每一個(gè)坑，確保體驗(yàn)的順暢。從零開始構(gòu)建產(chǎn)品是一把雙刃劍：基于自己的構(gòu)想來(lái)創(chuàng)造產(chǎn)品是令人興奮的，但是相應(yīng)的，我需要經(jīng)常在舒適區(qū)以外處理問(wèn)題。

我一直在 Skookum 從事產(chǎn)品設(shè)計(jì)的工作，而這些工作通常都是在一定的約束條件下進(jìn)行的，但是現(xiàn)在所要處理的產(chǎn)品則不同。之前的產(chǎn)品都可以借助現(xiàn)成的設(shè)計(jì)系統(tǒng)，有早已搭建好的設(shè)計(jì)語(yǔ)言，有完整的組件，有明確的 UI 狀態(tài)，有非常明確的基礎(chǔ)架構(gòu)，但是這次是我自己的產(chǎn)品，所有的這些都沒(méi)有。而且，這個(gè)產(chǎn)品還可能會(huì)存在幾種極端的情況、流程和狀態(tài)。

比如，在注冊(cè)流程中，按鈕會(huì)有默認(rèn)、禁用、激活、填充、錯(cuò)誤、懸停等幾種狀態(tài)，但是除了這些之外，我還需要考慮諸如密碼重置的流程和體驗(yàn)，這可能會(huì)涉及到 6 個(gè)高度相似的 UI 界面狀態(tài)：

1. 輸入 Email
2. 重新發(fā)送 Email
3. Email 通知設(shè)計(jì)
4. 輸入新的密碼
5. 錯(cuò)誤界面
6. 成功界面

這個(gè)過(guò)程中，有很多東西都令我一度感到迷惑，這也引發(fā)出我下一個(gè)要說(shuō)的要點(diǎn)……

3、創(chuàng)建用戶流程

項(xiàng)目開始之后，我很快就遭遇了組織架構(gòu)問(wèn)題。因?yàn)槲沂窃诠ぷ髦鄟?lái)創(chuàng)建這個(gè)產(chǎn)品，這導(dǎo)致我犯了一個(gè)非常嚴(yán)重的錯(cuò)誤：我沒(méi)有按照傳統(tǒng)的產(chǎn)品流程來(lái)創(chuàng)建產(chǎn)品，這隨后導(dǎo)致了一系列的問(wèn)題。

按照標(biāo)準(zhǔn)的產(chǎn)品設(shè)計(jì)流程，我需要從用戶流程開始創(chuàng)建，定義用戶可能會(huì)執(zhí)行的流程，并且針對(duì)主要的流程界面進(jìn)行必要的總結(jié)說(shuō)明。因?yàn)檫@個(gè)項(xiàng)目和之前的工作不一樣，我一開始就忘記了遵循流程這件事情，我錯(cuò)誤地將它視作為一個(gè)包含幾個(gè)簡(jiǎn)單界面的簡(jiǎn)單項(xiàng)目（是不是聽著特別耳熟？很多所謂的小項(xiàng)目翻車都是從這里開始的）。這樣一來(lái)，當(dāng)我開始處理諸多按鈕的不同狀態(tài)和界面變化的時(shí)候，整個(gè)用戶流程變得混亂不堪，并且我很難確定其中的體驗(yàn)漏洞有哪些。

最終我停止了這種隨性的設(shè)計(jì)方式，并且在 Whimsical 當(dāng)中創(chuàng)建了完整的用戶流程。于是我很快清楚了那些環(huán)節(jié)有所缺失，以及整個(gè)界面流程的走向。

按照用戶流程來(lái)梳理界面的時(shí)候，可以對(duì)于整個(gè)產(chǎn)品的屏幕狀態(tài)有所了解，并且隨著產(chǎn)品的發(fā)展膨脹，用戶流程的重要性會(huì)隨之增長(zhǎng)，成為至關(guān)重要的部分。

4、交互應(yīng)該反饋到UI中

的確，在完成整個(gè) UI 之前，不應(yīng)該開始向著項(xiàng)目當(dāng)中添加動(dòng)畫。但是，不添加并不意味著你無(wú)需考慮。實(shí)際上，不同的微交互和動(dòng)畫對(duì)于實(shí)際的體驗(yàn)影響是巨大的。你在思考 UI 設(shè)計(jì)的時(shí)候，就應(yīng)該考慮到微交互和動(dòng)畫的使用，避免在后續(xù)動(dòng)效和交互落地的時(shí)候，進(jìn)行不必要的修改。

比如，當(dāng)我在設(shè)計(jì)「達(dá)成成就」這一體驗(yàn)的時(shí)候，我就考慮到了需要用到的微交互的效果，所以在我設(shè)計(jì) UI 的時(shí)候可以順著我自己的喜好來(lái)進(jìn)行設(shè)計(jì)，并且將可能會(huì)用到的動(dòng)效拖到某個(gè)角落暫時(shí)記下來(lái)，避免在設(shè)計(jì) UI 的階段，影響了整體的流程和效果。而后續(xù)加入動(dòng)效的時(shí)候，就會(huì)方便很多。

我認(rèn)為，將 UI 和交互結(jié)合起來(lái)考慮是非常重要的，因?yàn)閮烧吖餐ㄋ茉炝梭w驗(yàn)。如果在設(shè)計(jì) UI 的環(huán)節(jié)直接加動(dòng)效，會(huì)讓整個(gè)設(shè)計(jì)過(guò)程變得復(fù)雜臃腫。

5、盡早獲得反饋

其實(shí)這也是我在這個(gè)項(xiàng)目中犯的一個(gè)大錯(cuò)：等了太長(zhǎng)時(shí)間才獲得反饋。

我通常是在晚上回家和周末才有空推進(jìn)這個(gè)項(xiàng)目，在很長(zhǎng)的一段時(shí)間內(nèi)，我沒(méi)有真正告訴任何人。

當(dāng)我終于同我的家人、朋友、用戶以及網(wǎng)上樂(lè)于嘗鮮的用戶公布了這一產(chǎn)品之后，他們?cè)谑褂眠^(guò)程中，開始注意到了很多細(xì)節(jié)上顯而易見、但是我并沒(méi)有發(fā)現(xiàn)的問(wèn)題。我意識(shí)到我作為產(chǎn)品的設(shè)計(jì)者，是很容易陷入并沉迷用戶體驗(yàn)當(dāng)中比較孤立的一部分，反而會(huì)忽略很多顯著的問(wèn)題。

回想一下，如果我能盡早向用戶和朋友展示設(shè)計(jì)和原型，那么我會(huì)在更早的時(shí)候發(fā)現(xiàn)問(wèn)題，并且在獲得反饋之后才進(jìn)入開發(fā)階段，彌補(bǔ)大量的損失。

6、在別處獲得啟發(fā)很重要

很多設(shè)計(jì)師會(huì)認(rèn)為，所有的想法都必須是原創(chuàng)的才行，否則就是欺詐。但是稍微想想，其實(shí)徹底的原創(chuàng)其實(shí)很少的。當(dāng)你看到一個(gè)優(yōu)秀的產(chǎn)品，它優(yōu)秀的配色和恰到好處的交互可能會(huì)讓你覺(jué)得：「已經(jīng)有人做出來(lái)了，我的想法在它面前完全沒(méi)法比擬?！?

這種思維方式其實(shí)有著極大的缺陷，并且抑制了你的創(chuàng)造力。

當(dāng)我發(fā)現(xiàn)我的設(shè)計(jì)有缺陷的時(shí)候，我會(huì)竭盡全力去搜索和了解更多網(wǎng)上已有的設(shè)計(jì)。我會(huì)觀察和思考別的公司和產(chǎn)品是如何設(shè)計(jì)新用戶引導(dǎo)流程的，如何管理用戶個(gè)人信息的。我從來(lái)都沒(méi)有復(fù)制被人的體驗(yàn)，但是會(huì)隔三差五去鉆研別人所創(chuàng)造出來(lái)的優(yōu)秀細(xì)節(jié)，然后將這些細(xì)節(jié)借鑒到我的設(shè)計(jì)當(dāng)中。

我最喜歡的一個(gè)范例，是從模態(tài)狀態(tài)下，旋轉(zhuǎn)退出的效果。這是我偶然在一個(gè)網(wǎng)站上看到的效果，因此我決定將它添加到 Confetti 當(dāng)中，我還在著陸頁(yè)的按鈕中加入了類似的特效。

事實(shí)上，一切設(shè)計(jì)都是混搭創(chuàng)造出來(lái)的。你借鑒細(xì)節(jié)并不意味著抄襲，不要害怕去發(fā)掘和學(xué)習(xí)別人的優(yōu)勢(shì)和亮點(diǎn)，你要學(xué)會(huì)有機(jī)地拆解和借鑒，靈活地運(yùn)用到自己的設(shè)計(jì)當(dāng)中，它就像調(diào)制雞尾酒一樣有趣。

7、勇敢面對(duì)身份的變換

當(dāng)我們開始設(shè)計(jì)的產(chǎn)品的時(shí)候，我和 Wilson 頭頂上的身份就一直在變。我們是 UI設(shè)計(jì)師，要負(fù)責(zé)UX，要做交互，也制作動(dòng)效，要進(jìn)行平面設(shè)計(jì)，還要考慮市場(chǎng)營(yíng)銷，要管理產(chǎn)品，我們也要扮演其他的角色。

職責(zé)如此之多，以至于我們不可避免地遇到我們能力范圍之外各種新問(wèn)題。我們必須承認(rèn)自己陷入了困境，尋求外部幫助成了必要的選擇。

專注于自己專業(yè)的領(lǐng)域，其他不專業(yè)的方面來(lái)尋求外部幫助是非常合理的。比如在一個(gè)項(xiàng)目當(dāng)中，一位藝術(shù)家負(fù)責(zé)了絕大多數(shù)的風(fēng)景插畫，另一位藝術(shù)家則完成了肖像畫的部分，這很正常。

我希望產(chǎn)品的外觀和功能能夠保持高度的一致性，并且我確實(shí)做到了。但是不要誤會(huì)我的意思，我并非是不敢走出舒適區(qū)去學(xué)習(xí)代碼開發(fā)，而是在這樣的項(xiàng)目當(dāng)中，我并不適合從UI和UX領(lǐng)域延伸出去，畢竟完成項(xiàng)目的開發(fā)優(yōu)先級(jí)比學(xué)習(xí)代碼更高。

8、保持簡(jiǎn)單更重要

盡管給 MVP 安排好了發(fā)布時(shí)間，可以防止這個(gè)項(xiàng)目被無(wú)限膨脹的功能特性和工作量所淹沒(méi)，但是這樣依然無(wú)法防止我們基于已有的功能進(jìn)行改進(jìn)。

很多人都喜歡 Reid Hoffman 的一句話：「如果你對(duì)于產(chǎn)品的第一版感覺(jué)不尷尬，那你一定是發(fā)布晚了?！共贿^(guò)，我們正式發(fā)布的第一版的產(chǎn)品，并不會(huì)顯得太尷尬，但是目前來(lái)看，當(dāng)時(shí)那種簡(jiǎn)單直觀的狀態(tài)，比起再花費(fèi)好幾個(gè)月時(shí)間反復(fù)打磨之后再發(fā)布，來(lái)得更好。

在發(fā)布新產(chǎn)品之前，我們必須考慮2個(gè)問(wèn)題：

1. 我們是否相信我們所構(gòu)建的產(chǎn)品，能夠?yàn)橛脩魩?lái)價(jià)值？
2. 我們是否竭盡全力了？

這些問(wèn)題讓我們最終能夠達(dá)成目標(biāo)，且按時(shí)發(fā)布，避免分心。專注交付最核心的功能，而不是被一堆冗余的次要特性所壓倒。

9、良好的交接更加省事省時(shí)

從項(xiàng)目一開始我就一直在做項(xiàng)目的管理和組織設(shè)計(jì)素材，以便后面進(jìn)行開發(fā)。不過(guò)，由于我一開始就使用了 Zeplin 這樣的協(xié)同工具，確保了我可以輕松地將所有的素材都順暢地交給負(fù)責(zé)開發(fā)的 Wilson。作為一款設(shè)計(jì)系統(tǒng)工具，Zeplin 讓我無(wú)需浪費(fèi)時(shí)間對(duì)素材進(jìn)行分類，非常便捷。

在交接的過(guò)程中，我還做了一些優(yōu)化：

1. 將所有的界面都組織到了 Zeplin 當(dāng)中，并且進(jìn)行了處理
2. 我給所有的畫板進(jìn)行了針對(duì)性的命名，方便檢索
3. 我在 XD 中標(biāo)注了需要導(dǎo)出的素材
4. 我保留了舊有的界面存檔，并且確保交付的新版界面是最新的

10、一次寫明所有的UX文案

在設(shè)計(jì) UI 的時(shí)候，界面中的文案部分是臨時(shí)編寫的，這促使了一次設(shè)計(jì)完成之后，整體的文案是不一致、不協(xié)調(diào)的。

我很希望一開始就創(chuàng)建了一個(gè)單獨(dú)的文檔，一次性將文案部分全部重寫，包括提醒、注釋、標(biāo)簽、彈出框提醒等等。而實(shí)際上，我的文案都是在設(shè)計(jì) UI 的時(shí)候附帶著寫下來(lái)的，導(dǎo)致整體的一致性嚴(yán)重缺乏。

這種文案本身在調(diào)性上的缺乏，導(dǎo)致了整個(gè)產(chǎn)品在語(yǔ)氣和用詞上是混搭式的，一致性很差。

所以，在產(chǎn)品上線發(fā)布之后，一直在對(duì)文案進(jìn)行修修補(bǔ)補(bǔ)。

文章來(lái)源：優(yōu)設(shè)(陳子木)   作者:Danny Sapio





分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)