不知道大家在畫原型時(shí)會(huì)不會(huì)遇到這樣的問題:
1.“我問下话速,這里是不是少了個(gè)狀態(tài),點(diǎn)了之后這里XXX芯侥,那么那里XXX泊交?”
2.“這里這樣是不是不太合理,不如這樣柱查?”
3.“你這里邏輯有問題xxxx”
4.“你這原型畫的不夠細(xì)致廓俭,如果是這樣XXX,那應(yīng)該XXX”
.......
在原型設(shè)計(jì)時(shí)唉工,一定要注重細(xì)節(jié)研乒,但是,我們常說在構(gòu)思原型時(shí)不要過早陷入到細(xì)節(jié)之中去淋硝,到底應(yīng)該怎么做才好呢雹熬?
在畫原型前應(yīng)該在一個(gè)更高的層次上考慮用戶界面宽菜,行為和整體產(chǎn)品結(jié)構(gòu)之間的關(guān)系,這個(gè)階段叫做設(shè)計(jì)框架竿报。比如設(shè)計(jì)一款汽車铅乡,一定是先設(shè)計(jì)它的結(jié)構(gòu),最后設(shè)計(jì)它的細(xì)節(jié)仰楚,如何開門隆判,什么樣的車燈等。
“設(shè)計(jì)框架定義了用戶體驗(yàn)的整個(gè)結(jié)構(gòu)僧界,包括底層組織原則侨嘀、屏幕上功能元素的排列、工作流程捂襟、產(chǎn)品交互咬腕、傳遞信息的視覺和形式語言、功能性和品牌識(shí)別等葬荷,形式設(shè)計(jì)和行為設(shè)計(jì)必須保持一致涨共,交互設(shè)計(jì)者利用場(chǎng)景和需求創(chuàng)建屏幕和行為草圖,完成交互框架設(shè)計(jì)宠漩【俜矗”
通過以下6個(gè)方法,也許能夠幫助你在畫原型前更能清晰把握自己的思路
1扒吁,產(chǎn)品定位火鼻,定義形式及交互模式
產(chǎn)品定位主要需要考慮三個(gè)問題;什么樣的用戶想要什么雕崩?我們要做什么樣的產(chǎn)品(也可以只是個(gè)模塊或功能)魁索?我們要做什么樣的?
這是一個(gè)產(chǎn)品要考慮的基本問題盼铁,但如果這些問題都沒考慮清楚粗蔚,那么后期的設(shè)計(jì)一旦出了問題,全部將會(huì)重頭開始饶火。一般可以根據(jù)需求鹏控,用戶畫像,反饋痛點(diǎn)肤寝,運(yùn)營(yíng)同事牧挣,老大要求等對(duì)產(chǎn)品定位展開分析。
定義形式可以理解為用戶會(huì)投入多大的注意力和產(chǎn)品互動(dòng)醒陆,產(chǎn)品的行為會(huì)對(duì)用戶投入的注意力做出何種反饋。定義形式可以通過產(chǎn)品使用的情景場(chǎng)景裆针,環(huán)境等做出決策刨摩。
交互模式即用戶與產(chǎn)品互動(dòng)的方式寺晌,受到產(chǎn)品定位和形式的影響,如果是手機(jī)應(yīng)用澡刹,那么交互模式基本就是單手觸控呻征。手指點(diǎn)觸,滑動(dòng)等罢浇。web產(chǎn)品則是鼠標(biāo)點(diǎn)擊等陆赋,VR產(chǎn)品用視覺停留等,不用的交互模式會(huì)有不同的限制嚷闭,應(yīng)該在早期就規(guī)劃清楚攒岛。
2.定義功能和數(shù)據(jù)
這里的定義功能則是指的較為具體的功能及對(duì)應(yīng)的數(shù)據(jù)元素,與產(chǎn)品定位中考慮的功能不同胞锰。這里將需要將宏觀的功能具體化灾锯。
比如設(shè)計(jì)一個(gè)打車軟件,產(chǎn)品定位通常是簡(jiǎn)短的一句話:用戶打開打開軟件發(fā)送打車請(qǐng)求嗅榕,然后車就到了顺饮。 具體的功能則需要考慮到:打開軟件是否要告訴用戶附近有哪些車?發(fā)送請(qǐng)求是不是要多個(gè)催司機(jī)功能凌那?
而數(shù)據(jù)元素則需要考慮到:告訴用戶附近有哪些車的時(shí)候兼雄,要告訴他們具體是多少米?催司機(jī)時(shí)是否只用發(fā)送催司機(jī)的文本消息帽蝶?
每個(gè)功能及元素的定義要針對(duì)需求赦肋,考慮周全了,產(chǎn)品各方面都有會(huì)有清晰的意圖嘲碱。
數(shù)據(jù)元素通常都是彼此關(guān)聯(lián)的金砍,建議在定義產(chǎn)品數(shù)據(jù)時(shí)可以通過畫數(shù)據(jù)流圖來分析,視覺化的數(shù)據(jù)元素將會(huì)讓你更能結(jié)構(gòu)化地去管理麦锯,去分類排布恕稠,讓你的設(shè)計(jì)逐漸清晰具體,讓開發(fā)人員更好理解你的意圖扶欣。
功能及數(shù)據(jù)就可以形成一個(gè)較為初步的設(shè)計(jì)方案了鹅巍,這時(shí)就可以開始對(duì)這個(gè)方案進(jìn)行檢測(cè)了。檢驗(yàn)解決方案最好是從情景場(chǎng)景開始料祠,分析人物畫像骆捧,用戶的目標(biāo),用戶的的心理模型髓绽。一個(gè)簡(jiǎn)單的需求將會(huì)有多種解決方案敛苇,這時(shí)候需要考驗(yàn)設(shè)計(jì)決策能力,通乘撑唬可以從以下幾個(gè)方面著手:
(1)最有效滿足用戶目標(biāo)
(2)最符合設(shè)計(jì)原則
(3)最適合當(dāng)前的技術(shù)水平和成本
(4)最能滿足其他條件等
滿足用戶目標(biāo)應(yīng)該是一個(gè)順暢的過程枫攀,減少用戶理解或?qū)W習(xí)成本括饶,讓用戶能夠順暢地操作軟件達(dá)成自己的目標(biāo)。檢驗(yàn)這個(gè)過程有個(gè)好方法来涨,即用戶對(duì)該產(chǎn)品產(chǎn)生控制感图焰,能夠潛意識(shí)地完成操作。
android和iOS的原則已經(jīng)考慮地較為詳細(xì)和周全了蹦掐,使用它們將會(huì)對(duì)你的抉擇有很好的幫助技羔。
3.確定層級(jí)和頁面
確定一個(gè)頁面應(yīng)該放多少東西,一個(gè)任務(wù)要分多少步來完成卧抗,通常情況下藤滥,一個(gè)頁面能夠完成的任務(wù)不要分多個(gè)頁面完成,盡量不要超過3個(gè)頁面颗味。
當(dāng)頁面元素居多時(shí)要保證用戶合理的視覺線超陆,最需要用戶知道的東西要在最顯眼的地方,次級(jí)居之浦马,就算是一個(gè)頁面也是有層級(jí)之分的时呀,可以通過元素大小,顏色晶默,來強(qiáng)化用戶對(duì)層次的感知谨娜。
也并非所有情況下都需要減少元素或是頁面來幫助用戶快速完成任務(wù),比如支付頁面磺陡,多級(jí)確認(rèn)讓用戶減少犯錯(cuò)成本趴梢。一些重要的操作多一個(gè)頁面確認(rèn)反而更能讓用戶安心。
在這個(gè)階段通常需要考慮這樣一些問題:
(1)哪些元素需要在一起
(2)如何組織才能優(yōu)化用戶工作流
(3)哪些元素需要捆綁使用币他,哪些不需要
(4)相關(guān)聯(lián)的任務(wù)使用的順序如何
(5)哪些元素能幫助用戶做出決定
(6)采用何種交互模式和原則
(7)人物模型的心智模型如何影響元素組織
塔式塔原則也許能夠幫到你坞靶,即相關(guān)聯(lián)的控件應(yīng)該組合在一起,控件應(yīng)該靠近所要控制的對(duì)象蝴悉。
4.繪制原型草圖
有了以上的構(gòu)思這一步就會(huì)變得容易彰阴,但要注意的是,最好是從整體且高層次的框架開始構(gòu)建拍冠,(若使用axure繪制原型尿这,這個(gè)地方就可以考慮好使用母版避免以后較多重復(fù)的修改)不要被細(xì)節(jié)分散了注意力,細(xì)節(jié)留到最后去仔細(xì)推敲庆杜。
5.構(gòu)建用戶行為路線
當(dāng)然不是原型畫完了工作就結(jié)束了射众,在拿去評(píng)審或是交付給研發(fā)之前,要盡可能詳細(xì)地完成自檢晃财。構(gòu)建用戶行為路線則是考慮好用戶使用產(chǎn)品不同界面的主要路徑叨橱。
如當(dāng)用戶打開app后,新用戶在什么地方提示登錄,用戶在什么時(shí)候罗洗,什么樣的場(chǎng)景下先點(diǎn)擊什么嘉裤,再點(diǎn)擊什么,在不同的頁面之間是如何跳轉(zhuǎn)完成任務(wù)的等等栖博。
這里需要考慮的是用戶最頻繁也是日常的一個(gè)行為路徑,可以通過給用戶設(shè)想不同的情景下完成什么任務(wù)來構(gòu)建厢洞。構(gòu)建完成后可以自己先行走查仇让,刪除不必要的元素,優(yōu)化重要的元素躺翻,使得用戶的主要任務(wù)行為路線是最為清晰且易記憶的丧叽。
注意用戶的行為也可能不是線性的過程,可能會(huì)在幾個(gè)頁面之間往返公你。
6.通過場(chǎng)景驗(yàn)證檢查設(shè)計(jì)
通過用戶行為路線調(diào)整了整個(gè)流程或框架踊淳,確保主要場(chǎng)景沒有問題后,可以將重心轉(zhuǎn)移到一些次的流程和場(chǎng)景之中陕靠,目的在于迂尝,找到原型或邏輯的漏洞,調(diào)整并優(yōu)化剪芥。
通陈⒖可以根據(jù)以下四類主要的場(chǎng)景驗(yàn)證
(1)路徑分岔點(diǎn):指的是用戶對(duì)多種選擇時(shí)停留的位置。
用購物行為來舉個(gè)例子税肪,你的用戶行為中溉躲,用戶是加入購物車,下訂單益兄,付款等一整套流程锻梳,這個(gè)流程中,加入購物車净捅,下訂單疑枯,付款都有分岔點(diǎn),如用戶取消訂單灸叼,用戶放棄付款神汹,這些行為背后的邏輯該是如何的?
(2)必要場(chǎng)景:指的一些必定會(huì)發(fā)生的古今,但又不常用的場(chǎng)景屁魏,比如清除緩存,注銷賬號(hào)等捉腥。雖然用戶會(huì)較少用到氓拼,但這部分的設(shè)計(jì)也是需要合理且易用的。因?yàn)橛脩舨唤?jīng)常用到,缺少對(duì)這種操作的學(xué)習(xí)過程桃漾,用戶可能會(huì)忘記如何操作坏匪。
(3)邊緣情景場(chǎng)景:也就是通常說的邊緣情況,這部分的問題測(cè)試同學(xué)會(huì)經(jīng)城送常考慮到适滓,但在測(cè)試之前應(yīng)該考慮清楚對(duì)應(yīng)的邏輯。比如昵稱重名恋追,重復(fù)提交取消訂單凭迹,頻繁發(fā)送好友申請(qǐng)等等济似。
邊緣情景通常還需要考慮一個(gè)極限值問題逻恐,比如一天可以添加多少好友讳侨?達(dá)到好友上線后如何绪商?
這部分需要特別關(guān)注柜去,也許還需要向研發(fā)咨詢對(duì)應(yīng)的代碼策略须肆。
(4)特殊場(chǎng)景:通常不是用戶主觀造成的問題煎源,比如app崩潰稳衬,網(wǎng)絡(luò)請(qǐng)求延遲羹铅,網(wǎng)頁404錯(cuò)誤等情況蚀狰。
嘗試著在畫原型之前多考慮這些步驟,畫原型應(yīng)該是一個(gè)占時(shí)較少的過程睦裳,嘗試著在畫原型前更加系統(tǒng)地思考造锅。