<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          一份高效的產(chǎn)品原型設(shè)計(jì)“規(guī)范”

          共 2752字,需瀏覽 6分鐘

           ·

          2022-03-17 21:02

          我們?cè)谧霎a(chǎn)品經(jīng)理的工作,用原型來(lái)表達(dá)產(chǎn)品設(shè)計(jì)是一個(gè)繞不過(guò)去的工作版塊,很多產(chǎn)品經(jīng)理的工作時(shí)間超過(guò)一半以上都在繪制原型。


          1.原型規(guī)范為什么這么重要?

          形成一個(gè)團(tuán)隊(duì)或自己的原型規(guī)范,可以幫助減少自己原型工作時(shí)間,還能避免了需求不嚴(yán)謹(jǐn)、甚至是出錯(cuò)的問(wèn)題。

          因?yàn)樵蛯?shí)際上等于我們上線產(chǎn)品的具體頁(yè)面,原型要做的產(chǎn)品設(shè)計(jì)也就是把App\網(wǎng)頁(yè)等系統(tǒng)功能所牽涉的頁(yè)面一個(gè)一個(gè)繪制出來(lái)。

          隨著工作時(shí)間的經(jīng)驗(yàn)積累,產(chǎn)品經(jīng)理接觸的業(yè)務(wù)案例越來(lái)越多,繪制的頁(yè)面越來(lái)越復(fù)雜,我們會(huì)找到滿(mǎn)足功能設(shè)計(jì)的核心節(jié)點(diǎn),再進(jìn)一步沉淀總結(jié)就可以擁有自己的一套原型設(shè)計(jì)規(guī)范了,形成規(guī)范后的原型設(shè)計(jì)與開(kāi)發(fā)、設(shè)計(jì)、測(cè)試等溝通效率都逐步提高。

          而多余的時(shí)間,產(chǎn)品經(jīng)理就可以聚焦在需求調(diào)研、業(yè)務(wù)拓展、甚至是市場(chǎng)和商務(wù)的板塊。

          2.我個(gè)人喜歡的一份高效原型規(guī)范

          有沒(méi)有一種原型規(guī)范,可以覆蓋產(chǎn)品經(jīng)理所涉及到的產(chǎn)品?包含C端產(chǎn)品、后臺(tái)產(chǎn)品經(jīng)理、以及數(shù)據(jù)產(chǎn)品經(jīng)理等工作呢?還能夠支持包括App、PC、小程序等市面上可以看到的軟件形態(tài)呢?

          今天分享一份我在工作中總結(jié)出的一份原型規(guī)范,如果投入到團(tuán)隊(duì)使用,用這個(gè)規(guī)范完成1個(gè)版本以上的開(kāi)發(fā)后,團(tuán)隊(duì)的效率就會(huì)越來(lái)越高。

          這種原型規(guī)范方便開(kāi)發(fā)閱讀,同樣也是設(shè)計(jì)師、測(cè)試等人員容易理解的形式。

          原型設(shè)計(jì)的母板規(guī)范

          母版在不同原型軟件工具下名字叫法不一樣,有的叫做模版,有的叫做母版。但顧名思義就是可以在本次原型文件里通用的原型組件。

          ? axure的母版


          我建議原型母版應(yīng)該包含產(chǎn)品的頁(yè)面導(dǎo)航欄、頁(yè)面菜單、頁(yè)面通知、賬戶(hù)信息等全局的功能,這類(lèi)功能組件有一個(gè)特點(diǎn),即產(chǎn)品的每個(gè)頁(yè)面或者某一個(gè)功能下的每一個(gè)頁(yè)面都會(huì)有這樣的按鈕、文案甚至是交互,所以把這類(lèi)功能合集變成母版將大大降低原型繪制的時(shí)間。

          ??功能菜單下的母版




          原型的交互說(shuō)明

          交互設(shè)計(jì)師和產(chǎn)品經(jīng)理的區(qū)別是:

          • 交互設(shè)計(jì)關(guān)注在人機(jī)交互過(guò)程的最好路徑,而不是在意是什么功能。

          • 產(chǎn)品經(jīng)理關(guān)注的是為用戶(hù)提供的功能是什么,而不是操作路徑。


          隨著科技進(jìn)步,不同的終端設(shè)備配套的軟件不一樣、產(chǎn)品形態(tài)不一樣,其所需要的交互也是不同的,比如網(wǎng)站交互是依靠鼠標(biāo)鍵盤(pán),手機(jī)的交互依靠手指、VR設(shè)備則依靠眼睛。

          大多數(shù)產(chǎn)品經(jīng)理的工作是負(fù)責(zé)某一個(gè)單一的產(chǎn)品形態(tài)產(chǎn)品設(shè)計(jì)。只有少部分高級(jí)產(chǎn)品經(jīng)理會(huì)負(fù)責(zé)業(yè)務(wù)線。一個(gè)業(yè)務(wù)線可能包含多個(gè)產(chǎn)品,比如曾經(jīng)我在喜馬拉雅負(fù)責(zé)線下業(yè)務(wù),就負(fù)責(zé)門(mén)店的營(yíng)收系統(tǒng),其產(chǎn)品形態(tài)(PC端、和APP、小程序)都有。

          但我們?cè)谧鲈偷臅r(shí)候,不管是負(fù)責(zé)業(yè)務(wù)線、還是產(chǎn)品線,往往一個(gè)原型文件會(huì)只針對(duì)一個(gè)產(chǎn)品形態(tài),并且匹配一套交互說(shuō)明。

          下面介紹高效原型規(guī)范下的PC和移動(dòng)端規(guī)范

          PC的交互說(shuō)明


          1.輸入框的交互說(shuō)明


          包含輸入框的內(nèi)容校驗(yàn)、操作提示、和文案提示

          2.頁(yè)面按鈕或功能區(qū)的交互說(shuō)明




          使用者會(huì)點(diǎn)擊、懸浮、或雙擊等操作,能夠給出對(duì)應(yīng)的交互提示

          3.操作彈窗交互

          彈窗的文案說(shuō)明、彈窗配對(duì)的功能選項(xiàng)(單選、多選、還是是否確認(rèn)),并給出操作結(jié)果的提示


          4.內(nèi)容上傳交說(shuō)明

          包括默認(rèn)圖片、上傳圖片預(yù)覽、以及上傳失敗的提示,如果對(duì)封面有要求,還可以提供裁剪功能,方便信息流效果展示
          5.按鈕操作交互說(shuō)明

          按鈕的選中、取消和默認(rèn)選擇狀態(tài)的展示,往往會(huì)根據(jù)前置條件來(lái)做對(duì)應(yīng)的反饋。

          6.選項(xiàng)框的交互說(shuō)明


          選項(xiàng)分為多選和單選,給出默認(rèn)選項(xiàng)、選擇數(shù)量、和數(shù)量限制提示,對(duì)于選項(xiàng)可以進(jìn)行編輯、添加的操作


          7.賬戶(hù)密碼交互說(shuō)明


          因?yàn)橘~戶(hù)密碼不限于PC網(wǎng)站,每個(gè)產(chǎn)品都有賬戶(hù),所以其交互是通用的,包含密碼校驗(yàn)錯(cuò)誤的各個(gè)場(chǎng)景的梳理,給出默認(rèn)提示、錯(cuò)誤提示、和內(nèi)容為空的交互展示。





          App的交互說(shuō)明(小程序/H5通用)

          1.頁(yè)面導(dǎo)航欄交互說(shuō)明

          App的功能每個(gè)頁(yè)面導(dǎo)航欄跳轉(zhuǎn)方式是固定的,甚至很多時(shí)候一個(gè)App就是一套一樣的。分清功能區(qū)、標(biāo)簽導(dǎo)航、頁(yè)面標(biāo)題之間的層級(jí)關(guān)系。



          2.頁(yè)面內(nèi)彈窗交互說(shuō)明


          彈窗的選項(xiàng)和默認(rèn)選擇,同時(shí)給出匹配的按鈕文案,方便用戶(hù)快速選擇和確認(rèn)。


          彈窗選擇出現(xiàn)的前置條件說(shuō)明,以及異常情況下的彈窗內(nèi)容提示。



          2.toast提示交互說(shuō)明


          提示包含了用戶(hù)操作反饋和系統(tǒng)狀態(tài)反饋,比如正在和服務(wù)端數(shù)據(jù)交互、用戶(hù)前端操作觸發(fā)某些條件等,需要用toast的交互來(lái)表達(dá),并且匹配文字。



          3.操作區(qū)域交互說(shuō)明


          App的操作是隨著手機(jī)面積有變化的,需要說(shuō)明那些區(qū)域可以點(diǎn)擊、那些不可以,往往這個(gè)是和前端開(kāi)發(fā)息息相關(guān),我們只需要關(guān)注UI圖按照原型設(shè)計(jì)表達(dá)即可。


          4.輸入框交互說(shuō)明

          和PC網(wǎng)站交互說(shuō)明一樣,輸入框包含了默認(rèn)文字、輸入提示、和輸異常提示。


          原型的邏輯說(shuō)明


          原型不僅是一個(gè)頁(yè)面,我們?cè)谧霎a(chǎn)品設(shè)計(jì)的時(shí)候,往往會(huì)換位思考為用戶(hù)角度,模擬同樣場(chǎng)景下用戶(hù)在原型里的操作,實(shí)際是存在頁(yè)面順序的,功能與功能之間也有前后條件的,所以就構(gòu)成了原型的邏輯。

          僅僅是靠一個(gè)原型設(shè)計(jì)的頁(yè)面是沒(méi)辦法搞清楚需求的全貌,讓參與的開(kāi)發(fā)、設(shè)計(jì)師知道整個(gè)需求的來(lái)龍去脈。

          我接觸許多產(chǎn)品新人在做原型的時(shí)候最容易欠缺的就是原型背后的功能邏輯,比如你看到的原型工具實(shí)際上都可以完成腦圖、流程圖等功能模塊的撰寫(xiě),原型工具不只是用來(lái)畫(huà)產(chǎn)品頁(yè)面的,在某些角度來(lái)說(shuō)它就是一個(gè)畫(huà)圖軟件。

          ? 原型的邏輯圖


          換句話說(shuō):原型工具在產(chǎn)品經(jīng)理的手里其實(shí)是一個(gè)萬(wàn)能的工具。

          實(shí)際上產(chǎn)品經(jīng)理在講解需求的時(shí)候,每次需求評(píng)審會(huì)一開(kāi)始,就會(huì)開(kāi)始講解原型的某個(gè)頁(yè)面,也是壞習(xí)慣。讓團(tuán)隊(duì)知道本次的工作達(dá)到的目的,以及要解決的問(wèn)題,實(shí)際上原型的邏輯說(shuō)明是非常重要的。


          原型的文檔說(shuō)明

          高效的原型規(guī)范一定是要配備文字說(shuō)明,否則就難以增加原型的理解度。有了文字說(shuō)明,對(duì)復(fù)雜的原型效果我們可以省略設(shè)計(jì)時(shí)間,直接用一句文字來(lái)代替。

          比如如果按照不同賬戶(hù)去繪制下面的權(quán)限操作,需要重復(fù)繪制下面報(bào)表,有多少個(gè)角色就要繪制多少個(gè)報(bào)表。

          但我們可以用一句話來(lái)替代:“根據(jù)用戶(hù)賬戶(hù)權(quán)限,不同權(quán)限可以看到的自段內(nèi)容為XX....“就可以快速完成。


          還有原型需要的動(dòng)畫(huà)加載效果、原型權(quán)限說(shuō)明、功能的交互動(dòng)效,都可以用文字來(lái)說(shuō)明。




          原型的功能架構(gòu)

          在高效的原型規(guī)范里,我們不只是聚焦在一個(gè)頁(yè)面的設(shè)計(jì),還要關(guān)注在原型背后的產(chǎn)品框架、功能架構(gòu),所以我們利用原型提前布置好原型的架構(gòu)圖,可以幫我們?nèi)植榭葱枨蟮膹?fù)雜性。


          比如上圖,給出了內(nèi)容管理后臺(tái)下的框架結(jié)構(gòu),給出了新建素材所涉及到的功能模塊必選操作,同時(shí)給出了功能模塊的邏輯順序。通過(guò)這個(gè)結(jié)構(gòu)圖可以發(fā)現(xiàn)這需求設(shè)計(jì)冗余復(fù)雜,應(yīng)該可以再進(jìn)行優(yōu)先級(jí)劃分,變?yōu)楦〉男枨蟆?/span>

          以上就是本文的分享。



          推薦作者的公眾號(hào):
          瀏覽 47
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  91欧美福利 | 亚洲欧美在线视频 | 欧美大鸡吧 | 日本黄色电影免费在线播放 | 床戏麻豆|