設(shè)計(jì)原型前,請(qǐng)避免這4個(gè)錯(cuò)誤,再拿起你的2B鉛筆

24 評(píng)論 23720 瀏覽 239 收藏 13 分鐘

動(dòng)手畫原型時(shí)你都在想想什么,面對(duì)需求,你是不是全部的堆積到原型上還是無(wú)從下手,亦或是現(xiàn)找網(wǎng)站截圖,然后copy。Oh.no!來(lái)本盟主告訴你打開原型設(shè)計(jì)的正確姿勢(shì)。

那些年,不,時(shí)間也不久;做產(chǎn)品剛滿一年,恰好0歲。剛開始什么也不懂,就學(xué)習(xí)了幾天Axure就出來(lái)闖江湖了(大三一直到畢業(yè)),到現(xiàn)在懂得了許多,也能夠發(fā)表自己的高見了(淚奔啊),產(chǎn)品路上遇到過(guò)許多坑,一個(gè)一個(gè)爬上來(lái)吧。以下是個(gè)人設(shè)計(jì)原型路上遇到的坑,希望能幫助正在入門的產(chǎn)品們。

原型的四個(gè)錯(cuò)誤根源

6月底接到一個(gè)項(xiàng)目,設(shè)計(jì)一個(gè)跟交易平臺(tái),至今,原型還是需要改,接近200多個(gè)頁(yè)面,改的好痛苦。盟主總結(jié)錯(cuò)誤來(lái)源在于:

錯(cuò)誤根源一:

需求沒整明白就開始設(shè)計(jì)。需求是另外一個(gè)同事梳理的,稀里糊涂看了2天,大概明白做一件什么事,就開始設(shè)計(jì)。2周內(nèi)原型設(shè)計(jì)完畢,將近200頁(yè)啊。交付老大一看,大家都懵逼了。老大硬著頭皮一點(diǎn)一點(diǎn)看,覺得不合理一個(gè)字“改”,流程不對(duì),一個(gè)字“改”。于是默默的改了快2周。

So,不要認(rèn)為懂了需求,就開始設(shè)計(jì)。請(qǐng)事先想想3w問題:

  • what’s the aim?明確產(chǎn)品主要是做什么。一句話概括產(chǎn)品是個(gè)什么樣的產(chǎn)品,例如:人人都是產(chǎn)品經(jīng)理網(wǎng)站,是一個(gè)產(chǎn)品愛好者學(xué)習(xí)、交流的平臺(tái)。
  • Who’s the users?產(chǎn)品的使用者?即用戶是誰(shuí)?考慮這個(gè)產(chǎn)品的使用者是哪些用戶?是否有群體特征。這是為下步做鋪墊。
  • what’s the function?產(chǎn)品的核心功能是什么。在了解用戶后,考慮用戶會(huì)有哪些操作,這些操作的流程是什么?明確產(chǎn)品的主要核心功能操作有哪些。列舉所有功能點(diǎn),找出核心。

錯(cuò)誤根源二:

創(chuàng)造新設(shè)計(jì)。說(shuō)實(shí)在我常常喜歡創(chuàng)造。這給設(shè)計(jì)和開發(fā)帶來(lái)很大痛苦。(請(qǐng)開發(fā)看到不要罵死我)一般開始設(shè)計(jì)原型時(shí),我們都是找競(jìng)品開始研究分析。即便這樣,還是有許多不同之處。在這個(gè)將近200頁(yè)的原型中,自我創(chuàng)造許多東西,競(jìng)品太復(fù)雜,干脆不看了。UI設(shè)計(jì)時(shí)很痛苦問我,這里,那里到底要放些什么,到底要不要?這樣設(shè)計(jì)不符合用戶常規(guī)操作啊。

So,不要自找麻煩。在設(shè)計(jì)時(shí)問問自己3h問題:

  • How to divide?將產(chǎn)品照模塊劃,考慮每一個(gè)模塊包含的主要內(nèi)容。
  • How to design?模塊劃分好后,考慮該如何設(shè)計(jì)。
  • How to combine?每一個(gè)模塊設(shè)計(jì)是否能夠組合到一起,如果能如何更好的展示呢。

錯(cuò)誤根源三:

自我設(shè)限。業(yè)務(wù)流程繪制后,開始設(shè)計(jì)原型了。按照流程,哦可能他需要這個(gè)操作,哦他可能不需要這個(gè)操作。于是這里多添加了一個(gè)選擇按鈕,那里少了一個(gè)開關(guān)按鈕,更有甚者,算了交付給用戶自己選擇吧。

So,不要自我設(shè)限(挖坑)。牽一發(fā)而動(dòng)全身,不要覺得一個(gè)按鈕不重要,一個(gè)詞不重要。優(yōu)先的產(chǎn)品定的原型是絕對(duì)不允許被改動(dòng)被改來(lái)改去。

要記住用戶都是懶的,不要把太多工作交給用戶。設(shè)計(jì)時(shí)盡量做減法,減去不必要的功能。好好想一想,這個(gè)功能去掉會(huì)不會(huì)有影響,這個(gè)詞這樣說(shuō),會(huì)不會(huì)給用戶帶來(lái)疑惑。

錯(cuò)誤根源四:

業(yè)務(wù)邏輯沒梳理清楚。

設(shè)計(jì)過(guò)程中設(shè)計(jì)師不斷的跟你溝通,此處指的是什么,這個(gè)邏輯有點(diǎn)不對(duì)吧,于是你說(shuō)想一下(其實(shí)內(nèi)心是崩潰的,罵自己怎么這個(gè)笨,心里承認(rèn)設(shè)計(jì)師說(shuō)的很對(duì),卻不愿承認(rèn)自己很low)。好吧,設(shè)計(jì)師看的很頭大,勉為其難的將它設(shè)計(jì)完畢(優(yōu)秀的設(shè)計(jì)師會(huì)調(diào)整布局和取舍元素,而不是原型設(shè)計(jì)成什么樣,設(shè)計(jì)成什么樣)。到了開發(fā)階段,開發(fā)看不懂,于是又會(huì)問你。如果你沒想明白整個(gè)業(yè)務(wù)流程,接下來(lái)你又會(huì)陷入沉默…于是設(shè)計(jì)、開發(fā)都會(huì)在心里默默的罵你,整個(gè)項(xiàng)目都在不斷的溝通中進(jìn)行,預(yù)期的開發(fā)時(shí)間又要延期了…

So,業(yè)務(wù)邏輯沒搞明白是最讓人頭疼的事。到開發(fā)期間發(fā)現(xiàn)錯(cuò)誤,技術(shù)要改跟多,因此將業(yè)務(wù)梳理清楚至關(guān)重要。多設(shè)想幾個(gè)用戶使用場(chǎng)景,在不同的場(chǎng)景下,用戶會(huì)有怎么樣的操作,根據(jù)這些優(yōu)化整個(gè)業(yè)務(wù)邏輯。

因此我們?cè)谠O(shè)計(jì)原型時(shí),以上錯(cuò)誤根源夠嗎?No!不夠。

動(dòng)手畫之前請(qǐng)拿起你的2b鉛筆

Happy work在于思考,思考到位,思考方向正確,這樣會(huì)減少后面與設(shè)計(jì)、開發(fā)的不斷溝通、不斷的開會(huì)確認(rèn)。那么動(dòng)手前該思考些什么呢?

從0到1產(chǎn)品設(shè)計(jì)第一步:CEO定好產(chǎn)品的方向和模式。

方向決定產(chǎn)品的戰(zhàn)略。方向定位不準(zhǔn),會(huì)造成又一層的理解,那么做出來(lái)的產(chǎn)品容易跑偏。模式?jīng)Q定產(chǎn)品的生命力。對(duì)于模式,在一個(gè)昝新的領(lǐng)域,行業(yè)首創(chuàng),要考慮用戶會(huì)不會(huì)買單,接受度有多高,對(duì)于有市場(chǎng)的該如何吸引用戶。對(duì)于已經(jīng)有行業(yè)的,該如何建立自己的模式而不同于其他產(chǎn)品,獲取用戶的關(guān)注。

產(chǎn)品設(shè)計(jì)第二步:框架和業(yè)務(wù)邏輯。

產(chǎn)品負(fù)責(zé)人整理出需求的整個(gè)框架和業(yè)務(wù)邏輯。

框架幫助梳理產(chǎn)品包含哪些模塊,每個(gè)模塊里會(huì)有哪些功能。

業(yè)務(wù)邏輯:上面也講述到要從多方面考慮業(yè)務(wù)邏輯。如果一個(gè)產(chǎn)品有多個(gè)用戶群體,要考慮每個(gè)用戶群體的特征和功能操作。

產(chǎn)品第三步:請(qǐng)拿起你的2b鉛筆。

不管你是產(chǎn)品助理,亦或是產(chǎn)品經(jīng)理,如果你想變得優(yōu)秀,一定要學(xué)會(huì)獨(dú)立思考。以上思考點(diǎn)也是每個(gè)產(chǎn)品經(jīng)理必做的,因此,在設(shè)計(jì)前先思考以上,做下設(shè)計(jì)方案。

動(dòng)用你的2b鉛筆,畫下你的思考框架和頁(yè)面、業(yè)務(wù)流程圖。整體的框架可以幫你和團(tuán)隊(duì)建立起對(duì)產(chǎn)品的認(rèn)識(shí)。頁(yè)面可以幫助你取舍網(wǎng)頁(yè)元素布局、說(shuō)明。業(yè)務(wù)流程圖幫你和開發(fā)梳理產(chǎn)品的核心流程。Ok。在你最好方案后,大家無(wú)異議的情況下,就可以著手設(shè)計(jì)原型了。不要以為方案就是萬(wàn)全的,接下來(lái)設(shè)計(jì)時(shí)你也需要去思考:

圖片2

頁(yè)面設(shè)計(jì)流程3步驟:

第一步:分析每個(gè)頁(yè)面包含的內(nèi)容,將其整理成模塊。

模塊劃分這個(gè)沒有一個(gè)標(biāo)準(zhǔn),至今也在不斷的思考中。個(gè)人是認(rèn)為按照展示信息來(lái)劃分,然后根據(jù)展示信息的優(yōu)先級(jí)來(lái)進(jìn)行排版,凸出核心,隱藏有關(guān)但不緊要的內(nèi)容。

分析信息結(jié)構(gòu):核心信息、信息模塊、信息類型。如何分析:分析頁(yè)面包含哪些模塊,每個(gè)模塊內(nèi)的信息元素有哪些?例如:人人都是產(chǎn)品經(jīng)理的首頁(yè)。模塊分為:導(dǎo)航、推薦文章、搜索、注冊(cè)登錄、專欄作家、推廣模塊、推薦書欄、底部的合作伙伴、底部導(dǎo)航等。

對(duì)于推薦文章:元素包括圖片、文章標(biāo)題、文章內(nèi)容推薦。站在用戶的角度去考慮,重要點(diǎn)在于:文章標(biāo)題,文章推薦語(yǔ)。因此這個(gè)模塊的設(shè)計(jì)應(yīng)該凸出文章標(biāo)題、簡(jiǎn)介字體要比標(biāo)題小,提取文章的圖片、吸引用戶。

對(duì)每一個(gè)模塊,我們要分析其包含的信息類型。例如:推薦文章模塊包含信息類型:圖片、標(biāo)題、文章推薦語(yǔ)。數(shù)據(jù)類型是動(dòng)態(tài)的,時(shí)時(shí)更新,后臺(tái)管理員審核推薦,寫推薦語(yǔ)。級(jí)別非常重要,讓用戶看到優(yōu)秀的文章。

用戶操作。分析完模塊的信息內(nèi)容后,就該思考用戶會(huì)有哪些操作。哪些功能是明顯操作的,哪些應(yīng)該被隱藏起來(lái)。這些功能的前置條件是什么?后置條件是什么?這些功能目前很重要嗎?

接著上面推薦文章分析。這個(gè)模塊用戶操作是點(diǎn)擊,查看文章詳情。那么如何告訴用戶這個(gè)可以點(diǎn)擊呢?鼠標(biāo)移入、移出文章、圖片有效果顯示。跳轉(zhuǎn)到文章詳情,在文章詳情頁(yè)面可進(jìn)行的操作是:用戶可以評(píng)論、收藏、查看作者名片、查看、回復(fù)其他人的評(píng)論。首先要思考,是否所有人都可以進(jìn)行這些操作,如果可以,以什么樣的方式合適。因此設(shè)置條件,評(píng)論、收藏、查看、回復(fù)其他人的評(píng)論的前置條件是:登錄之后方可評(píng)價(jià)、收藏、回復(fù)。

布局樣式:

重要模塊及元素都具備了最后就要考慮一下布局樣式。這樣做的原型也會(huì)很美觀,不至于被噴太low。思考點(diǎn):考慮核心信息的位置、核心信息與操作的位置。布局樣式要考慮包含哪些信息元素。

例如:文章詳情頁(yè)面。包括:標(biāo)簽、文章標(biāo)題、發(fā)布時(shí)間、閱讀量、評(píng)論量、收藏量、詳情、作者名片、評(píng)論、文章標(biāo)簽、點(diǎn)贊、分享。

那么我們從用戶角度開始考慮,這篇文章主要是哪一類呢?文章質(zhì)量怎么樣呢?看到很爽時(shí),作者是誰(shuí),來(lái)出來(lái)給我看一下。實(shí)在是爽爆了,快,大爺給你贊一個(gè)。若太不符合胃口,評(píng)論過(guò)來(lái),一個(gè)差評(píng)。

因此主要信息布局是這樣子的,文章標(biāo)簽,文章標(biāo)題、評(píng)論量、收藏量、詳情、作者名片、評(píng)論、文章標(biāo)簽、點(diǎn)贊。講到這里了自己去設(shè)想幾種布局吧。

總結(jié):

在一年的學(xué)習(xí)中,做過(guò)4個(gè)產(chǎn)品,現(xiàn)在回頭看看簡(jiǎn)直是大寫的丑,無(wú)比的丑。丑且不說(shuō),整個(gè)過(guò)程的溝通成本很大,且80%會(huì)出現(xiàn)返工。不斷的總結(jié),不斷的思考,才能走的更穩(wěn)。

 

作者:路漫漫,有點(diǎn)拖延癥的逗比范產(chǎn)品。

本文由 @路漫漫 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 優(yōu)秀的設(shè)計(jì)師會(huì)調(diào)整布局和取舍元素,而不是原型設(shè)計(jì)成什么樣,設(shè)計(jì)成什么樣
    ———–這句話深有感觸。。

    來(lái)自廣西 回復(fù)
    1. 我司是給你加點(diǎn)顏色,99%不變

      來(lái)自北京 回復(fù)
    2. 我們ui基本會(huì)把布局啥的給重新調(diào)整一遍 保證實(shí)現(xiàn)功能 然后盡情發(fā)揮 ??

      來(lái)自吉林 回復(fù)
  2. 我也是白白,準(zhǔn)備進(jìn)入交互,但沒你有膽量

    來(lái)自湖北 回復(fù)
  3. 遇到同樣的情況,也是需要返工。主要還是前期需求確認(rèn)時(shí)間短,不夠明確。在細(xì)節(jié)上需要考慮的很多。

    來(lái)自江蘇 回復(fù)
  4. 很好 很真實(shí) 謝謝分享 十分適合我這樣的小白 希望可以多多和您交流

    回復(fù)
    1. 同樣為小白,多多交流

      來(lái)自北京 回復(fù)
    2. 其實(shí)現(xiàn)在國(guó)內(nèi)有款原型圖工具叫摩客用起來(lái)很簡(jiǎn)單,上手也快,畫出來(lái)后打印出來(lái)貼上,看起來(lái)非常美觀

      來(lái)自四川 回復(fù)
    3. 工具不是唯一的出路,有想法,用啥都不怕

      來(lái)自北京 回復(fù)
  5. 看到高見我也是懵比了。

    來(lái)自本機(jī)地址 回復(fù)
    1. ?? 你找6樓訴說(shuō)

      來(lái)自本機(jī)地址 回復(fù)
  6. 高見……你悟性也是夠差

    回復(fù)
    1. ? 嘿嘿嘿,是有點(diǎn)笨

      來(lái)自本機(jī)地址 回復(fù)
  7. 寫得很好。交互設(shè)計(jì)師通過(guò)什么體現(xiàn)自己的能力?不僅僅是交互設(shè)計(jì)稿件,很多時(shí)候交互設(shè)計(jì)稿件是會(huì)騙人的。我覺得好的交互設(shè)計(jì)師具備的一個(gè)素質(zhì)是設(shè)計(jì)體系,并且是能總結(jié)、歸納、看得見的體系。

    回復(fù)
    1. ?? 關(guān)于交互設(shè)計(jì)還有得探討,可以留言告訴我交互設(shè)計(jì)有關(guān)看法

      來(lái)自本機(jī)地址 回復(fù)
  8. 是干貨,羨慕能跟蹤大的產(chǎn)品,我做了半年大多數(shù)小打小鬧的需求。

    回復(fù)
    1. 小而美,大而全,各有各的好,關(guān)鍵在于總結(jié)。加油

      來(lái)自本機(jī)地址 回復(fù)
  9. 作為被老板需求牽著走的產(chǎn)品, ?? ?? 傷不起啊

    來(lái)自廣東 回復(fù)
    1. 那是你方法沒用對(duì),沒有什么好方法,自己去突破吧。

      來(lái)自本機(jī)地址 回復(fù)
  10. 值得學(xué)習(xí)的一篇文章,我現(xiàn)在這段也在思考頁(yè)面設(shè)計(jì),作者這篇文章有很大的幫助。交互新手還是要多思考,多總結(jié)呀

    來(lái)自上海 回復(fù)
    1. O(∩_∩)O哈哈哈~,多謝夸獎(jiǎng),我會(huì)繼續(xù)努力。

      來(lái)自本機(jī)地址 回復(fù)
  11. 太棒了 我馬上也要開始畫自己的第一個(gè)原型了

    來(lái)自四川 回復(fù)
    1. 祝賀,多動(dòng)腦,少動(dòng)手。

      來(lái)自本機(jī)地址 回復(fù)
    2. 天吶,一語(yǔ)中的,畫第一個(gè)原型的時(shí)候,連工具都不會(huì)用,所以一直在學(xué)工具,根本沒想到思考,后來(lái)畫的時(shí)候,發(fā)現(xiàn),不知道思考什么,內(nèi)心是崩潰的。

      來(lái)自黑龍江 回復(fù)