什么樣的原型更受開發(fā)歡迎 ?

159 評論 100162 瀏覽 1169 收藏 11 分鐘
🔗 产品经理在不同的职业阶段,需要侧重不同的方面,从基础技能、业务深度、专业领域到战略规划和管理能力。

工作3年,嘗試了各種原型圖排版,致力于幫助設計師和程序員更好的理解需求??偨Y(jié)了從14年到現(xiàn)在自己嘗試過的幾種原型圖樣式,每一種都有其優(yōu)劣勢。歡迎大家一起來探討如何更好的呈現(xiàn)原型圖(歡迎拍磚?)。接下來,按時間順序,給大家一一詳細介紹。

PS:本文僅是講述原型圖排版,至于一些交互細節(jié)會另寫文章記錄哦,歡迎關(guān)注~

各類原型圖介紹

第一種:動態(tài)跳轉(zhuǎn)型

通過事件(如點擊、滑動等)實現(xiàn)各個元素和頁面之間來回跳轉(zhuǎn)。所有交互說明都寫在了界面元素的注釋說明中(藍色icon),如想查看說明,需點擊后才能看到。這類跳轉(zhuǎn)型原型,需配套的需求文檔來描述各個元素的狀態(tài)、前置條件、操作說明等。

這種原型圖,想必很多剛剛?cè)腴T的產(chǎn)品經(jīng)理/交互設計師都嘗試過。當然我也不例外,剛開始工作時,覺得用axure實現(xiàn)各種動效是件很好玩很酷的事情,同時也認為這種動態(tài)跳轉(zhuǎn)可以幫助開發(fā)人員更好的理解頁面關(guān)系。

但是卻忽略了很重要的一點,開發(fā)不知道我們產(chǎn)品之前的思考邏輯,所以拿到原型時,根本不知道界面上哪些信息是可點擊的,也不知道點擊后會發(fā)生什么進入哪個界面。

優(yōu)勢

擁有交互動效,可完整體驗到頁面之間的跳轉(zhuǎn)流程。

劣勢

這類原型,劣勢超多。

  1. 瀏覽原型的人需要逐一點擊,才知道這個頁面有哪些功能,這樣很可能導致功能的遺漏。(當年也確實出現(xiàn)過這個問題,雖然有配套的需求文檔,但是大家都懂的,需求文檔可能只有產(chǎn)品人員自己看。這樣一來,無形之中增加了溝通成本);
  2. 做原型時,各種動效比較浪費時間。需要各種事件、動態(tài)面板配合來實現(xiàn),一定程度上降低了工作效率。

因為這類原型圖的用戶體驗實在是不好,便決定把所有頁面平鋪展示,把交互說明環(huán)繞周圍,如下…

第二種:信息平鋪環(huán)繞型(五彩版)

首先,感謝開發(fā)哥哥們當年的不殺之恩。

現(xiàn)在回過頭看之前的原型圖,簡直不忍直視。這樣花里胡哨的原型圖,雖然很詳細的寫了各種說明,但是給誰看,估計都沒有耐心看完吧。

所有的交互說明信息都環(huán)繞在線框圖周圍,并使用了各種圖標顏色。不同圖標及顏色代表不同含義,如圖中粉色箭頭代表有點擊事件,綠色箭頭代表說明文字,點擊事件均采用橙色文字。

優(yōu)勢

  1. 交互說明平鋪展示,有效避免了功能遺漏;
  2. 各類信息使用不同顏色區(qū)分,清晰直觀的區(qū)分不同類信息。

劣勢

  1. 交互說明使用顏色過多,一眼看過去,給人感覺很雜亂;
  2. 線框圖中使用顏色過多,分不清界面信息優(yōu)先級。

這類原型圖,解決了第一種遺漏功能的問題,也得到了開發(fā)人員的一致好評,說這種原型圖清晰直觀的把所有功能點都描述的很清晰。就這樣持續(xù)迭代了好幾個版本。后來。有一次在一個功能復雜的界面周圍寫了密密麻麻的注釋(如上圖),在實際開發(fā)過程中,就發(fā)現(xiàn)很多開發(fā)來問的問題,明明在原型圖上都有寫??墒撬麄?yōu)槭裁春雎粤诉@些需求呢?我就跑去和他們溝通,得到的反饋是:哦,沒看到,沒注意這塊內(nèi)容。記得那時候還是挺氣憤的,自己辛辛苦苦寫的需求,開發(fā)根本不認真看。后來換位思考想了想,這些枯燥的文檔,再加上五顏六色的文字,給誰誰都不愿意看吧。

為了解決交互說明雜亂無章的問題,決定嘗試把所有說明統(tǒng)一放到線框圖下方,逐一元素說明,如下…

第三種:信息平鋪上下型

把所有交互說明寫在線框圖下方,線框圖上連接關(guān)聯(lián)界面。

優(yōu)勢

界面看起來清爽了很多,所有交互說明集中,有效避免了功能遺漏和界面雜亂的問題;

劣勢

不直觀。界面元素和交互說明分離,影響查找效率。

出了一個版本這樣的原型圖,就立馬收到開發(fā)哥哥們的反饋,說這樣的交互說明太不直觀了,每次都要看一眼圖,然后再去下面找到對應的說明,很麻煩,而且還容易出現(xiàn)對應錯的情況。就這樣,放棄了這種類型的原型圖。

那么有沒有一種既清晰直觀又可以有助于開發(fā)閱讀查找的原型圖呢?

于是,綜合了之前各類原型的優(yōu)勢,得出如下版本…

第四種:信息平鋪環(huán)繞型(邊框版)

為所有界面加上了手機外邊框;線框圖顏色盡量使用深淺不同的灰色;交互說明顏色少一些,使用灰色深淺及文字大小區(qū)分優(yōu)先級;使用統(tǒng)一的標注icon;制定了交互標注說明。

各類交互說明規(guī)范

優(yōu)勢

  1. 整體感覺干凈清爽,各類信息錯落有致;
  2. 為所有界面加上了手機外邊框后,有效避免了線框圖與交互說明混淆不清。且可清晰的看出在手機上展示效果,標記第一屏信息;
  3. 交互說明統(tǒng)一規(guī)范,避免了交互說明的喧賓奪主;
  4. 線框圖顏色盡量少,使用不同程度的灰色來呈現(xiàn),信息優(yōu)先級突出;
  5. 使用交互說明序號。使用序號標識出當前頁面有哪些注意點,有效避免遺漏。

劣勢

有時會出現(xiàn)線框圖和交互說明對應不上的情況,開發(fā)找不到交互說明上寫的【xxx】按鈕到底是哪個icon,點擊【xx】熱區(qū),這個熱區(qū)的范圍包括哪些。

整體來講,這種類型的原型圖,已經(jīng)得到開發(fā)人員的認可,也是個人認為比較優(yōu)的方案。正因為原型圖也算是自己的產(chǎn)品,所以也需要不斷的打磨,于是最近又對其進行了優(yōu)化,如下…

第五種:信息平鋪環(huán)繞型(各個元素逐一標識)

在界面上,使用箭頭逐一標識每個元素或每個模塊的交互說明。交互說明中各類信息分類顯示。

優(yōu)勢

  • 快速定位某個元素的交互說明;
  • 為交互說明分類(如信息項、操作、狀態(tài)、排序等),有效防止遺漏需求,也有助于開發(fā)查看需求。

劣勢

如界面上需要標注的信息很多,可能會造成頁面看起來有些混亂。

總結(jié)

每一種原型圖樣式都有其優(yōu)劣勢,在實際工作中,最重要的不是如何呈現(xiàn)你的原型圖,而是要和設計師以及開發(fā)達成共識,怎樣的原型更有助于他們理解需求。對于剛?cè)肼殘龅男氯诵“?,提醒大家切記不要過度沉迷于頁面動效,而忘記原型圖的本質(zhì)目的(清晰明了的說明界面功能邏輯)。

如上,述說了一下我自己的原型圖演變史。原型圖是我們工作中輸出的重要文檔之一,所以更需要我們不斷的去打磨它,在提高自己工作效率的同時更好的幫助開發(fā)人員理解需求。

??感謝耐心閱讀~

 

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

題圖來自PEXELS,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 博主的分享的很精彩,也確實講到了原型只是為了更好的表達的本質(zhì)了,但是對于第五種,我想要補充一下,如果使用環(huán)繞型平鋪的,交互說明叫較多的時候,整個頁面就非常不整潔,而且還要附加彈窗的布局,所以我建議,將原型與說明連接的方式,可以通過標識一一對應,模塊1對應交互說明1,然后原型放置在一塊,交互說明放在一塊,這樣會更加清晰

    來自廣東 回復
  2. 謝謝大神的分享,剛準備入行,喜歡第五種,可以發(fā)郵箱學習學習嗎?1030676500@qq.com 感謝

    來自四川 回復
  3. 謝謝大神的分享,我是產(chǎn)品小白剛?cè)胄?,喜歡第五種,可以發(fā)我郵箱我學習學習嗎?我的郵箱:821024219@qq.com

    來自海南 回復
  4. 其實就是第一種最好,但是關(guān)鍵是產(chǎn)品某些交互做了,某些交互又不做。
    真別怪開發(fā),我相信開發(fā)在實現(xiàn)的時候如果有不明白的肯定會去原型上操作一下的。。

    來自福建 回復
  5. 大佬您好,您的原型制作確實有很高的水平。最可貴的,使您能夠把您的經(jīng)驗寫成文檔,讓更多的產(chǎn)品收益。我在您的文檔中受益良多。
    希望您能把您的“第五種:信息平鋪環(huán)繞型(各個元素逐一標識)”的原型文件發(fā)給我學習一下。
    我的郵箱是:“2430513764@qq.com”。
    我最擅長策劃創(chuàng)新,作為對您幫助的反饋,請您在郵件中寫出您想要一個什么主題方向的好項目,我會給您做一個case并回復。
    謝謝您!!

    來自陜西 回復
  6. 大佬你好,感覺你寫的東西淺顯易懂,能否求一個,第五種:信息平鋪環(huán)繞型(各個元素逐一標識)的原型文件240678331@qq.com 謝謝啊

    來自安徽 回復
  7. 能否求一個,第五種:信息平鋪環(huán)繞型(各個元素逐一標識)的原型文件3068943870@qq.com 謝謝啊

    來自北京 回復
  8. 分析的很詳細,和我的過程基本一樣哈哈哈 很棒。 抽離出來的這個會更好點

    來自上海 回復
  9. 目前采用第5種,將元素抽離出逐個說明

    來自廣東 回復
  10. 老師好,可以提供一份完整的交互設計文檔供參考學習嗎

    來自廣東 回復
  11. 你好,看完您這個更受益,您這個真心分析全面到位,目前正在寫第四種交互文檔,能否求一份完整的交互文檔學習下排版和專業(yè)話術(shù)13889256325@163.com,非常感謝

    來自上海 回復
  12. 確實,原型主要得能讓看的人明白,如果給業(yè)務人員和領導看,做個可以操作的,保真度高一點的,比較合適。他們能很直觀的提出哪里不太對。如果給開發(fā)看,就是怎么能說明白怎么來了,經(jīng)常自己看了前幾個月寫的東西我都不知道說的啥。

    來自北京 回復
    1. 哈哈哈。說明自己成長了呢

      回復
    2. 來自北京 回復
  13. 第一種和最后一種,是把顏色統(tǒng)一、操作進行分類了嗎?

    來自浙江 回復
  14. 前幾種自己都沒耐心看,一上手就是最后一種,但是我標注都是一個顏色,重點再用紅色 ?

    來自廣東 回復
    1. 哈哈哈。清晰明了就是最好的方式啦

      回復
  15. 寫的很好

    來自上海 回復
  16. 學習了,謝謝分享

    來自江蘇 回復
  17. 不錯,專員升級經(jīng)理

    回復
  18. 我很欣賞這篇文章

    來自河北 回復
  19. 初入門產(chǎn)品交互設計,真的是受教了挺有幫助的。原型圖的本質(zhì)目的,讓其他相關(guān)部門能快速理解需求的同時提升工作效率

    來自廣東 回復
  20. 很多樣哦,棒

    來自浙江 回復
  21. 請問一下小姐姐,你的原型是使用的什么字體呀? ??

    來自北京 回復
  22. 值得學習

    來自福建 回復
    1. ??????

      回復
  23. 哈哈哈,達到最終目的即可,用什么工具都可以

    來自北京 回復
  24. 其實,最需要的是與你的開發(fā)伙伴培養(yǎng)默契,
    現(xiàn)在所有的產(chǎn)品其實都是基于一些很成熟的框架去延伸的,發(fā)展到今天,橫空出世創(chuàng)造性的東西已經(jīng)很少。
    所以一個有經(jīng)驗的技術(shù)其實不需要你告訴他所有細節(jié)的事件,很多在上面上都有標準的常規(guī)解決方案。
    產(chǎn)品經(jīng)理,最重要的事,是告訴開發(fā)人員 去理解你原型是基于什么“場景”,這個業(yè)務的“事實”邏輯, 原型是怎make sence 的 。

    頁面只是 你所有思考過后的展現(xiàn) ,是用來溝通你思考的媒介 ,不要期望用原形圖解決所有溝通的問題

    來自北京 回復
    1. 對,是這樣的。再詳細的文檔也會有遺漏,最重要的還是和開發(fā)小伙伴的溝通配合。
      但還是需要在文檔中把需求盡量描述清楚,后續(xù)與開發(fā)溝通過程中不斷完善。有經(jīng)驗的技術(shù)可能不會看,但是經(jīng)驗低的開發(fā)還是很需要一份詳細的需求,不然很可能會遺漏細節(jié)需求。
      告訴開發(fā)實際需求場景、業(yè)務邏輯是在前期需求討論會必須討論的。但是也不可忽視文檔的重要性。

      來自北京 回復
专题
33539人已学习15篇文章
一起来看看别人家是怎么做用户增长的。
专题
65410人已学习17篇文章
每个网站或APP,发展到了一定的阶段,用户积分体系都是不可或缺的。
专题
15259人已学习13篇文章
在产品的运营过程中,无论是产品、运营还是市场团队,都希望能清晰地了解用户的行为路径,通过用户行为分析,优化用户体验,实现更精准的运营和营销。
专题
13675人已学习12篇文章
一款产品,若想做到极致满足用户的需求,产品功能会变得越发臃肿。但在产品设计中,也可以做做减法,去除一些不必要或不重要的功能和元素。本专题的文章分享了如何给产品做减法。
专题
13695人已学习12篇文章
知识管理是什么?通常来看,想理解知识管理,可以从业务、管理、实施等视角切入。本专题的文章分享了如何做知识管理。
专题
18279人已学习17篇文章
数据可视化的方式,能够更加清晰明确的进行数据分析。本专题的文章分享了数据可视化的设计思路。