更新時(shí)間:2020-07-30 來源:黑馬程序員 瀏覽量:
關(guān)于原型注意事項(xiàng)的內(nèi)容,來到了我們最后一篇,怎么做pc端原型?
如果你去問一個(gè)畫過PC端原型的產(chǎn)品經(jīng)理,制作過程中,有沒有什么規(guī)范和注意事項(xiàng),他可能半天答不上來。他會(huì)想著,“我好想是在認(rèn)真畫的,但好像也確實(shí)沒有什么規(guī)范;但要說我是隨便畫的,那我肯定不服氣”!
今天這篇文章,我們主要跟大家介紹一下PC端原型的特點(diǎn)和注意事項(xiàng)。
第一,PC端原型的特點(diǎn),沒有規(guī)范!可能每一個(gè)制作PC端原型的產(chǎn)品經(jīng)理,他們使用的規(guī)范都不盡相同,比如說原型整體的寬度、高度,各種導(dǎo)航、按鈕、模塊的大小等等,根本沒有統(tǒng)一的標(biāo)準(zhǔn);比如下面圖一和圖二的兩個(gè)PC端原型:
(圖一)
(圖二)
這兩個(gè)原型中,產(chǎn)品經(jīng)理對(duì)于原型的細(xì)節(jié)處理方式有所不同(比如矩形的圓角、字體顏色,按鈕選擇等),但整體的觀感都是挺不錯(cuò)的。
第二,PC端原型的要求,標(biāo)準(zhǔn)統(tǒng)一。很多產(chǎn)品經(jīng)理在聽說PC端原型沒有規(guī)范之后,就腦洞大開,隨意作畫!看下面圖三的原型:
(圖三)
明顯是不可以的,首先,同級(jí)別按鈕的控件,比如圖三中的“查找”、“導(dǎo)出”和“新增品牌”按鈕,大小和樣式都需要保持統(tǒng)一,這樣用戶體驗(yàn)最好;其次,對(duì)于細(xì)節(jié)的處理,不要間距過大或者過小(比如搜索區(qū)域的處理,左側(cè)導(dǎo)航的處理等),提升原型整體的觀感。如果你想你的PC端原型被同事喜歡,那就使用統(tǒng)一的標(biāo)準(zhǔn)或者樣式吧。
第三,PC端原型在設(shè)計(jì)完之后,UI會(huì)出效果圖,產(chǎn)品經(jīng)理應(yīng)該有自己的審美,能評(píng)判效果圖的好壞。有的同學(xué)可能會(huì)說,這不是UI的事兒么,跟咱們產(chǎn)品有什么關(guān)系?是,設(shè)計(jì)圖是UI的工作,但設(shè)計(jì)圖選稿是產(chǎn)品經(jīng)理要做的??磮D四中的兩個(gè)按鈕,你覺得它可以點(diǎn)擊么?
(圖四)
多數(shù)的產(chǎn)品經(jīng)理都會(huì)認(rèn)為,這兩個(gè)按鈕是可以點(diǎn)擊的,包括用戶也會(huì)這么認(rèn)為。但真實(shí)的產(chǎn)品設(shè)計(jì)中,這兩個(gè)只是圖標(biāo),表示贈(zèng)送的內(nèi)容而已,UI設(shè)計(jì)成了這種效果。如果你是這個(gè)產(chǎn)品的負(fù)責(zé)人,你會(huì)選擇這種UI效果么?不可以,因?yàn)橛脩趔w驗(yàn)不好。
第四,多使用元件庫,提升原型制作的效率;如果一個(gè)產(chǎn)品經(jīng)理是做PC端原型設(shè)計(jì)的,那他多半經(jīng)常需要做類似產(chǎn)品的設(shè)計(jì),合理利用元件庫,能夠極大的提升原型制作的效率,而且盡可能的保證元件使用的統(tǒng)一性;比如圖五中看到的各類元件,都是PC端原型中常用的:
(圖五)
當(dāng)然,需要再次強(qiáng)調(diào)一下,最好的元件庫是自己做的,很多產(chǎn)品經(jīng)理喜歡從網(wǎng)上下載各種元件庫,不加修改就直接用,很容易出問題。建議大家平時(shí)在工作中,養(yǎng)成優(yōu)化元件庫的習(xí)慣,這樣你們制作的原型會(huì)越來越好。
第五,其他的細(xì)節(jié)處理。比如輸入框的提示文字、頁碼、彈窗制作、頁面標(biāo)題、面包屑導(dǎo)航等,該設(shè)置的,都不能缺失。
今天就跟大家分享上面的五個(gè)方面,希望大家在以后制作PC端原型過程中,能夠盡量避免以上提及的錯(cuò)誤出現(xiàn),盡量遵守規(guī)范去制作。
目前傳智播客的產(chǎn)品經(jīng)理學(xué)科正在火熱招生中,并且上海校區(qū)和深圳校區(qū)已經(jīng)全面恢復(fù)線下。如果感興趣的小伙伴可以來看看,我們有專業(yè)的師資團(tuán)隊(duì)給大家授課,并且輔導(dǎo)大家就業(yè),大家快來吧!
猜你喜歡