編輯導(dǎo)語：很多設(shè)計(jì)師往往會選擇自己創(chuàng)業(yè)，設(shè)計(jì)一個自己的產(chǎn)品。然而創(chuàng)業(yè)并非易事，其本身就是一個試錯的過程，重要的不是你選擇從哪里開始，而是你在不斷試錯之后，還能調(diào)整方向繼續(xù)前行。接下來，本文作者總結(jié)了10條經(jīng)驗(yàn)，希望能夠幫助到各位正在創(chuàng)業(yè)或者有想法創(chuàng)業(yè)的小伙伴。

我和我的聯(lián)合創(chuàng)始人 Wilson 決定開發(fā)一款叫 Confetti 的免費(fèi)應(yīng)用，它可以配套 Chrome 擴(kuò)展程序來使用。Confetti 是一個色彩豐富的日常習(xí)慣打卡應(yīng)用，你只要每完成一項(xiàng)任務(wù)就會用五彩碎紙的動效來慶祝你今日的任務(wù)達(dá)成。

上圖為 tryconfetti.io

在我4年多的產(chǎn)品設(shè)計(jì)生涯中，這是第一次從0到1自己設(shè)計(jì)產(chǎn)品，在這之間我學(xué)到了很多，因此本文將分享這些經(jīng)驗(yàn)和教訓(xùn)給大家。

一、定義上線產(chǎn)品的功能

一開始，我們有一個為三種設(shè)備屏幕設(shè)計(jì)的粗略原型。然而大家沒有預(yù)見到后來一些想法和改動，完全改變了我們產(chǎn)品設(shè)計(jì)的方向。

最終大家各退一步，設(shè)定了一個上線發(fā)布日期，討論我們的 MVP產(chǎn)品的核心功能有哪些。我們在 Notion 上開了個文檔，討論哪些功能是必須擁有的，哪些功能是可以待添加的。

例如：登錄、注冊都是必備的功能，而給習(xí)慣排序則是一個錦上添花的功能。

之所以選擇這些功能，是因?yàn)橄嘈胚@些功能可以使產(chǎn)品充分發(fā)揮可用性，并且易用好用。

通過對核心功能集進(jìn)行優(yōu)先級排序，確定上線日期，團(tuán)隊(duì)減輕了壓力，避免讓自己陷入各種功能之中；這也讓我們能先實(shí)現(xiàn)必備的基礎(chǔ)功能，再有精力去實(shí)現(xiàn)可以讓產(chǎn)品變得更好的功能。

二、關(guān)注流程和各種狀態(tài)

在設(shè)計(jì)過程中，經(jīng)常有人提醒我要關(guān)注每一個邊緣情況，以保障可用性體驗(yàn)。從零開始構(gòu)建產(chǎn)品是一把雙刃劍：我可以充分發(fā)揮想象力，但也經(jīng)常在游離在舒適區(qū)外。

我習(xí)慣了在公司從事產(chǎn)品工作，因?yàn)楣粳F(xiàn)有產(chǎn)品已經(jīng)有一套成熟的體系和規(guī)范，通常我并不需要從頭開始創(chuàng)建所有東西。公司有完整的設(shè)計(jì)系統(tǒng)、設(shè)計(jì)語言、各種組件和UI狀態(tài)等。

如果沒有這種基礎(chǔ)，我就必須考慮到用戶在我們的產(chǎn)品中可能遇到的一些邊緣情況、各種使用流程和狀態(tài)。

比如：注冊有默認(rèn)態(tài)、禁用態(tài)、已激活態(tài)、填充態(tài)、錯誤態(tài)和懸停狀態(tài)等。除了注冊以外，我還需要一個關(guān)于重置密碼的設(shè)計(jì)，UI不僅要保持一致，還要考慮以下六種情況：

1. 輸入郵箱
2. 重新發(fā)送郵件
3. 郵箱通知
4. 輸入新的密碼
5. 重置成功
6. 重置失敗

看了都讓人頭疼，這時候就需要梳理用戶流程。

三、梳理用戶流程

我很快遇到了一個產(chǎn)品架構(gòu)上的問題，就是我在工作之余創(chuàng)造的這個產(chǎn)品，卻沒有遵循自己在工作中的一貫做法。

在工作中，我通常從用戶流程開始，梳理用戶可能使用的不同路徑，并概述必要的界面有哪些。最初我忽略了這種方法，因?yàn)槲义e誤地認(rèn)為這將是一個只有幾個界面的、非常簡單的產(chǎn)品。

然而，當(dāng)狀態(tài)和界面變多時，用戶路徑就開始混亂而不清晰，我很難找出體驗(yàn)的漏洞。

最后我還是用 Whimsical（一款流程圖工具）梳理了用戶路徑，一下子就知道之前的設(shè)計(jì)漏了哪些界面，也明確了用戶的交互跳轉(zhuǎn)邏輯。

在設(shè)計(jì)中，我們很容易忘記所有的狀態(tài)和界面是如何組織在一起的，也容易忘了一個狀態(tài)如何影響另一個狀態(tài)。當(dāng)在用戶流程圖中整理界面時，我可以直觀地看到缺失的界面和狀態(tài)有哪些。

在產(chǎn)品成長過程中，創(chuàng)建用戶流、用戶路徑對于維護(hù)產(chǎn)品的組織和結(jié)構(gòu)至關(guān)重要。

四、根據(jù) UI 先構(gòu)想交互方式

在完成 UI 設(shè)計(jì)之前，你不應(yīng)該開始為產(chǎn)品添加動畫動效。但實(shí)際上添加動畫動效或微交互，和先構(gòu)想動效如何影響元素是不一樣的。

在設(shè)計(jì) UI 時先考慮動畫、動效或微交互，使我在后面的過程中考慮交互方式時，避免了對界面進(jìn)行不必要的調(diào)整。

例如：當(dāng)我在設(shè)計(jì)“標(biāo)記完成”時，它需要我同時考慮 UI 和交互方式。我按照自己的喜好設(shè)計(jì)了 UI，然后把它拖到設(shè)計(jì)文件的一個角落，并開始思考元素單擊時的交互方式。

這些交互迫使我去調(diào)整一部分的 UI 設(shè)計(jì)，卻避免了在后面造成更大的困擾。

我認(rèn)為將用戶界面和交互方式聯(lián)系起來是很重要的，因?yàn)樗鼈兿嗷ビ绊?，對于?chuàng)造我所設(shè)想的用戶體驗(yàn)來說是必不可少的。

如果我先設(shè)計(jì)用戶界面，然后再決定元素的動畫效果，那么整個界面就會變得一團(tuán)糟。通過同時進(jìn)行交互和 UI 設(shè)計(jì)，我能夠創(chuàng)建更適合我界面的交互方式。

五、盡早得到反饋

這是我犯的另一個錯誤：等了太久才得到反饋。

基本上我晚上和周末都在做這個項(xiàng)目，沒有告訴任何人，這畢竟是我出于愛好而做的項(xiàng)目。

但當(dāng)我從家人、朋友、用戶和匿名網(wǎng)友那里收集了評價(jià)后，他們發(fā)現(xiàn)了一些我沒有意識到，但實(shí)際上顯而易見的問題。我意識到自己很容易沉浸在自己的視角中，忽略了更宏觀的問題。

現(xiàn)在回想起來，我希望能早點(diǎn)向人們展示設(shè)計(jì)原型，這樣能早點(diǎn)發(fā)現(xiàn)問題，減少額外的開發(fā)工作量。

六、允許自己從其他地方獲取靈感

設(shè)計(jì)師常常認(rèn)為他們的想法必須是原創(chuàng)的，否則就是一場騙局。

想象你正在看另一個產(chǎn)品，你可以找到一個你喜歡的調(diào)色板，一個感覺不錯的交互方式，或者一個完美的登錄頁面布局。這時候你可能會想，“哦，太糟糕了，因?yàn)橛腥艘呀?jīng)搶先一步了。”

然而這種心態(tài)有著令人難以置信的缺陷，對原創(chuàng)的過分執(zhí)著限制了創(chuàng)造力。

當(dāng)設(shè)計(jì)進(jìn)行不下去的時候，我都會上網(wǎng)尋找靈感。我會觀察其他公司如何設(shè)計(jì)他們的入職流程或者如何管理用戶配置文件；但不會復(fù)制他們的經(jīng)驗(yàn)，只會把自己欣賞的小細(xì)節(jié)納入到我的設(shè)計(jì)中去。

我最喜歡的例子是應(yīng)用中使用的一個旋轉(zhuǎn)退出效果。當(dāng)時我在某個網(wǎng)站上發(fā)現(xiàn)了這樣一個效果，覺得它看起來很獨(dú)特，所以我決定把它添加到 Confetti 中。

類似地，我也用這樣的方式完成了產(chǎn)品登陸頁面的按鈕懸停效果，選擇了產(chǎn)品所使用的的字體。

事實(shí)上，一切都是融合的結(jié)果。這并不意味著你要盲目地模仿別人的作品，但也不要害怕找到你欣賞的零零碎碎的東西，然后把它們運(yùn)用到你自己的項(xiàng)目中。

七、做好自己擅長的事

當(dāng)我們從零開始設(shè)計(jì)產(chǎn)品時，我和我的合伙人被要求承擔(dān)很多角色。我必須是UI、 UX、 交互、 動效、平面等多種設(shè)計(jì)師，同時還要承擔(dān)管理和推出產(chǎn)品所需的所有其他角色。

有這么多事要做，我遇到了一些問題，比如說缺少一些技能，有些事情沒時間關(guān)注等。在這種情況下，我不得不承認(rèn)自己力不從心，只好尋求外部資源來完成這項(xiàng)工作。

例如：另一位朋友幫我完成了插圖，還有另一位朋友幫助我繪制了圖標(biāo)。

我認(rèn)為做好自己擅長的事情的前提下，利用好資源或者雇傭外包來完成這項(xiàng)工作沒有任何問題。畢竟相比起統(tǒng)一性，我覺得高品質(zhì)更加重要。

不要誤會我的意思，我的意思是我把設(shè)計(jì)這款應(yīng)用當(dāng)作一個學(xué)習(xí)的機(jī)會，走出了自己的舒適區(qū)——但這其中的某些部分，點(diǎn)到為止即可。

八、越簡單越好

雖然明確地梳理了 MVP 功能，也規(guī)定了發(fā)布日期，但我們也沒有避免一直想要修改產(chǎn)品功能的念頭。

Reid Hoffman 有一句常被拿出來分享的話：“如果你對自己產(chǎn)品的第一個版本不感到尷尬，那么就是你上線得太晚了?！蔽覀儾⒉徽J(rèn)為推出這個產(chǎn)品會讓自己感到尷尬，但是也仍認(rèn)為擁有一個簡化的版本要比花費(fèi)數(shù)月開發(fā)那么多功能要好得多。

為了我們的產(chǎn)品順利上線，必須考慮兩個問題：

1. 我們是否相信自己的產(chǎn)品能為用戶提供價(jià)值？
2. 我們已經(jīng)盡最大的努力了嗎？

這些問題讓我們在避免分心的同時，也讓我們與產(chǎn)品目標(biāo)、計(jì)劃日期保持一致。我們專注于產(chǎn)品價(jià)值，并盡最大努力交付高質(zhì)量的產(chǎn)品，卻不會讓產(chǎn)品功能超載。我們不得不努力追求完美，但卻滿足于偉大。

九、好的交接可以節(jié)省時間、減少痛苦

我從一開始就做好的一件事，就是管理和組織開發(fā)設(shè)計(jì)資產(chǎn)。

通過使用Zeplin，我可以毫不費(fèi)力地把設(shè)計(jì)資產(chǎn)給我的合伙人。Zeplin讓我不需要根據(jù)規(guī)格、尺寸和風(fēng)格指南，浪費(fèi)時間來重新排列設(shè)計(jì)。

那么我是如何做到干凈利落的交接的呢：

1. 在 Zeplin 將所有界面組織成對應(yīng)的部分；
2. 給所有畫板文件取一個恰當(dāng)?shù)拿郑?/li>
3. 在源文件中標(biāo)記導(dǎo)出內(nèi)容；
4. 保留舊界面的存檔，并確保所有新界面都是最新的。

十、盡可能準(zhǔn)備好完整的用戶體驗(yàn)文檔

在我設(shè)計(jì) UI 時，我們的產(chǎn)品相關(guān)文檔都是臨時編寫的，這讓整個產(chǎn)品設(shè)計(jì)混亂且不一致。

我很希望能早早地創(chuàng)建文檔，一次性寫下了所有的警告、消息、模式和解釋文本。由于我工作時候的忽略，產(chǎn)品文檔相當(dāng)少。

這導(dǎo)致我們內(nèi)聚力的貧瘠，也導(dǎo)致了產(chǎn)品的混雜和一致性的匱乏。因此，自從產(chǎn)品上線以來，我們一直在對文檔進(jìn)行著修補(bǔ)工作。

我們的產(chǎn)品能夠充分發(fā)揮其潛力并取得巨大成功，得益于當(dāng)初及早處理錯誤，事先做好準(zhǔn)備以避免后續(xù)出現(xiàn)問題。但是，也正如意大利冒險(xiǎn)家賈科莫·卡薩諾瓦曾說過的：“不犯錯誤的人往往一事無成。”

我希望你能從我的經(jīng)驗(yàn)中吸取教訓(xùn)，并在下一個項(xiàng)目中避免“入坑”。

原文作者：Danny Sapio

原文地址：https://uxdesign.cc/10-ui-ux-design-lessons-from-designing-my-own-product-2f8518d5f0a1

譯者：Jonathan，編輯：Z Yuhan，公眾號：體驗(yàn)進(jìn)階。

本文由 @Z Yuhan 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議。