APP開發産品經理(lǐ)如何進行原型設計

深圳APP開發公司的(de)産品經理(lǐ)在進行原型設計時(shí)有什(shén)麽技巧？如何才能設計一份高(gāo)質量的(de)原型設計稿。下(xià)面，樂(yuè)信科技的(de)産品經理(lǐ)就跟大(dà)家分(fēn)享一下(xià)，原型設計的(de)一些技巧和(hé)經驗。

 

 

深圳樂(yuè)信科技是深圳知名的(de)APP開發公司，有著(zhe)多(duō)年的(de)項目開發經驗，在互聯網和(hé)移動互聯網産品的(de)設計、開發上，都有豐富的(de)積累，經曆過很多(duō)産品的(de)線框原型設計，在這(zhè)過程中，我們也(yě)發現了(le)一些問題，一些大(dà)家時(shí)常會在原型制作過程當中忽略掉的(de)要素;如果能注意并解決掉這(zhè)些問題，我們的(de)交互設計産出物(wù)就可(kě)以發揮更大(dà)的(de)實戰價值。

 

一、通(tōng)過明(míng)暗對(duì)比來(lái)描述模塊之間的(de)視覺優先級

哪些内容是需要用(yòng)戶在頁面上最先注意到的(de)?他(tā)們的(de)視線應該聚焦到什(shén)麽位置?我們希望用(yòng)戶執行什(shén)麽操作?這(zhè)些問題不能簡單的(de)丢給視覺設計師來(lái)考慮。

首先，根據産品需求及用(yòng)研方面的(de)實際情況，作爲産品人(rén)員(yuán)或交互設計師，我們自身應該對(duì)以上這(zhè)些方面的(de)信息了(le)如指掌。

在此基礎上，爲最原始的(de)線框稿添加視覺優先級。

具體實施起來(lái)其實很簡單，将所有的(de)深色“線框”移除掉，使用(yòng)不同明(míng)度的(de)灰色作爲背景色來(lái)界定頁面和(hé)模塊的(de)邊緣，并籍此表達不同元素之間的(de)視覺優先級。

 

二、使用(yòng)真實的(de)數據内容

對(duì)于線框原型當中的(de)範例内容，包括導航元素的(de)标題、表單标簽、介紹文案、圖标等等，我們都應該盡量使用(yòng)最貼近生産環境的(de)真實數據。這(zhè)種方式可(kě)以更有效的(de)幫助我們規劃界面元素的(de)布局，并針對(duì)實際環境中有可(kě)能産生的(de)極端數據情況制定預防性的(de)方案，确保頁面結構的(de)堅固性。

更重要的(de)是，使用(yòng)真實數據作爲範例内容的(de)線框原型可(kě)以在接下(xià)來(lái)的(de)可(kě)用(yòng)性測試當中更具表現力和(hé)說服力，被測用(yòng)戶不需要依靠主持人(rén)的(de)描述或自己的(de)猜測就可(kě)以在原型當中獲取到比較準确的(de)信息。另外，真實數據也(yě)可(kě)以創造出一種更貼近實際産品的(de)使用(yòng)氛圍，這(zhè)可(kě)以使被測用(yòng)戶更加投入。對(duì)于測試人(rén)員(yuán)來(lái)說(主持人(rén)、觀察員(yuán))，我們可(kě)以設計出更具有針對(duì)性的(de)任務或問題，可(kě)以在測試過程中對(duì)被測用(yòng)戶進行更加深入的(de)觀察;相應的(de)，最終收集到的(de)反饋信息也(yě)會更加真實有效。

 

三、确保細節的(de)準确無誤

将真實數據作爲範例内容填充到原型當中後，我們要确保交互流程所涉及的(de)信息的(de)準确性。舉個(gè)簡單的(de)例子，如果購(gòu)物(wù)車的(de)頁面原型當中展示了(le)兩個(gè)單價爲50元的(de)商品，那麽在結算(suàn)環節中，總價應該是100元，而不是随便其他(tā)什(shén)麽數字。錯誤的(de)信息會阻礙溝通(tōng)的(de)有效進行，開發人(rén)員(yuán)有可(kě)能在這(zhè)裏産生質疑，被測用(yòng)戶也(yě)會感到莫名其妙。

作爲設計人(rén)員(yuán)，長(cháng)時(shí)間的(de)将注意力放在原型的(de)制作上面，很容易忽視掉這(zhè)類問題的(de)存在。如果有條件的(de)話(huà)，可(kě)以在适當的(de)時(shí)候請其他(tā)人(rén)來(lái)幫忙檢查一下(xià)你的(de)原型當中是否存在這(zhè)類細節當中的(de)錯誤。

 

四、增加範例圖片的(de)自我描述能力

圖片對(duì)于用(yòng)戶體驗的(de)提升起著(zhe)重要的(de)作用(yòng)，當人(rén)們在網站中尋找商品或服務時(shí)，圖片是引導他(tā)們制定決策的(de)關鍵要素(怎樣通(tōng)過設計幫助用(yòng)戶制定決策)。另外，圖片也(yě)能幫助用(yòng)戶對(duì)網站自身的(de)形象和(hé)定位産生認知。不過在線框原型中，我們通(tōng)常隻會使用(yòng)一些灰色的(de)容器和(hé)線條來(lái)表現圖片。

當然，我并不是要建議(yì)在線框原型中使用(yòng)真正的(de)圖片或照(zhào)片;我們需要做(zuò)的(de)是讓代表圖片的(de)線框元素能夠體現出在實際頁面當中，這(zhè)個(gè)位置應該放置怎樣類型的(de)圖片。在制作線框原型之前，最好與相關的(de)産品或業務人(rén)員(yuán)就這(zhè)方面的(de)問題進行溝通(tōng)，根據産品自身的(de)特質及最終面向的(de)用(yòng)戶群體，來(lái)判斷圖片一類的(de)視覺元素應該具有怎樣的(de)整體風格。

 

五、創建變更日志

随著(zhe)叠代的(de)不斷進行，每一版線框原型當中的(de)變更通(tōng)常會越來(lái)越細化(huà)，從頁面結構到模塊、控件，這(zhè)會使跟進後續工作的(de)設計師或開發人(rén)員(yuán)越來(lái)越難以發現所有的(de)變化(huà)。

作爲交互設計師，我們有責任創建一份變更日志，并随著(zhe)項目的(de)發展對(duì)其進行持續的(de)更新。日志中的(de)每一條記錄都要包含日期、版本号、執行者以及變更說明(míng)。這(zhè)種信息交流的(de)方式不需要花費太多(duō)的(de)時(shí)間，但結果卻是事半功倍的(de)，無論産品人(rén)員(yuán)還(hái)是設計師、開發者，大(dà)家都可(kě)以籍此來(lái)一目了(le)然的(de)跟蹤原型的(de)版本變化(huà)。

 

以上就是關于提升線框原型溝通(tōng)能力的(de)一些建議(yì)。希望能給APP開發公司的(de)産品經理(lǐ)們有一些幫助，了(le)解到更多(duō)關于線框原型的(de)基本理(lǐ)念及運用(yòng)方法。