設計原型前,請避免這4個錯誤,再拿起你的2B鉛筆

24 評論 23723 瀏覽 239 收藏 13 分鐘

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

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

原型的四個錯誤根源

6月底接到一個項目,設計一個跟交易平臺,至今,原型還是需要改,接近200多個頁面,改的好痛苦。盟主總結錯誤來源在于:

錯誤根源一:

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

So,不要認為懂了需求,就開始設計。請事先想想3w問題:

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

錯誤根源二:

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

So,不要自找麻煩。在設計時問問自己3h問題:

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

錯誤根源三:

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

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

要記住用戶都是懶的,不要把太多工作交給用戶。設計時盡量做減法,減去不必要的功能。好好想一想,這個功能去掉會不會有影響,這個詞這樣說,會不會給用戶帶來疑惑。

錯誤根源四:

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

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

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

因此我們在設計原型時,以上錯誤根源夠嗎?No!不夠。

動手畫之前請拿起你的2b鉛筆

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

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

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

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

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

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

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

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

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

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

圖片2

頁面設計流程3步驟:

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

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

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

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

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

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

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

布局樣式:

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

例如:文章詳情頁面。包括:標簽、文章標題、發(fā)布時間、閱讀量、評論量、收藏量、詳情、作者名片、評論、文章標簽、點贊、分享。

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

因此主要信息布局是這樣子的,文章標簽,文章標題、評論量、收藏量、詳情、作者名片、評論、文章標簽、點贊。講到這里了自己去設想幾種布局吧。

總結:

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

 

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

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

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

    來自廣西 回復
    1. 我司是給你加點顏色,99%不變

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

      來自吉林 回復
  2. 我也是白白,準備進入交互,但沒你有膽量

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

    來自江蘇 回復
  4. 很好 很真實 謝謝分享 十分適合我這樣的小白 希望可以多多和您交流

    回復
    1. 同樣為小白,多多交流

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

      來自四川 回復
    3. 工具不是唯一的出路,有想法,用啥都不怕

      來自北京 回復
  5. 看到高見我也是懵比了。

    來自本機地址 回復
    1. ?? 你找6樓訴說

      來自本機地址 回復
  6. 高見……你悟性也是夠差

    回復
    1. ? 嘿嘿嘿,是有點笨

      來自本機地址 回復
  7. 寫得很好。交互設計師通過什么體現(xiàn)自己的能力?不僅僅是交互設計稿件,很多時候交互設計稿件是會騙人的。我覺得好的交互設計師具備的一個素質是設計體系,并且是能總結、歸納、看得見的體系。

    回復
    1. ?? 關于交互設計還有得探討,可以留言告訴我交互設計有關看法

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

    回復
    1. 小而美,大而全,各有各的好,關鍵在于總結。加油

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

    來自廣東 回復
    1. 那是你方法沒用對,沒有什么好方法,自己去突破吧。

      來自本機地址 回復
  10. 值得學習的一篇文章,我現(xiàn)在這段也在思考頁面設計,作者這篇文章有很大的幫助。交互新手還是要多思考,多總結呀

    來自上海 回復
    1. O(∩_∩)O哈哈哈~,多謝夸獎,我會繼續(xù)努力。

      來自本機地址 回復
  11. 太棒了 我馬上也要開始畫自己的第一個原型了

    來自四川 回復
    1. 祝賀,多動腦,少動手。

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

      來自黑龍江 回復