APP開發在原型設計階段應該注意哪些

在APP開發項目中，一些産品經理(lǐ)在進行原型設計，畫(huà)線框圖時(shí)都會忽略一些重要内容，導緻和(hé)視覺設計師的(de)溝通(tōng)成本增高(gāo)、返工增多(duō)、工作效率下(xià)降、設計質量下(xià)降等重要問題。爲了(le)解決這(zhè)些問題，一方面需要加強溝通(tōng)，另一方面還(hái)需要多(duō)站在視覺的(de)角度考慮線框圖的(de)設計，使大(dà)家的(de)配合更默契。

下(xià)面是我們總結的(de)一些原型設計的(de)經驗，分(fēn)享給大(dà)家。

 

一、通(tōng)過明(míng)暗對(duì)比表達

畫(huà)線框圖時(shí)，加入了(le)明(míng)暗對(duì)比之後，界面元素的(de)重要級關系更直觀，我們不再需要跑過去跟視覺說：這(zhè)N個(gè)模塊中這(zhè)個(gè)最重要，那個(gè)其次…… 視覺的(de)工作效率也(yě)大(dà)大(dà)的(de)提高(gāo)了(le)。

但需要注意的(de)是：深色并不意味著(zhe)比淺色更重要，要看色塊之間的(de)對(duì)比關系。

 

二、不使用(yòng)截圖與顔色

很多(duō)産品人(rén)員(yuán)爲了(le)能更清楚的(de)表現想法，拼湊各種競品的(de)截圖，組成一個(gè)頁面。這(zhè)樣做(zuò)一來(lái)不規範，二來(lái)對(duì)視覺設計師也(yě)有一定的(de)幹擾。另外不太建議(yì)在線框圖上使用(yòng)色彩，這(zhè)樣同樣會對(duì)視覺設計師造成不必要的(de)幹擾。如果真的(de)有一些關于圖案的(de)想法，可(kě)以告訴視覺設計師需要營造什(shén)麽樣的(de)氛圍，達到什(shén)麽效果。

 

三、标記第一屏高(gāo)度

第一屏高(gāo)度至關重要，最重要的(de)内容、尤其是重要的(de)操作按鈕盡可(kě)能在第一屏内顯示完全，不然會對(duì)轉化(huà)率有較大(dà)的(de)影(yǐng)響。第一屏高(gāo)度在什(shén)麽位置?在1024*768分(fēn)辨率下(xià)，極限情況下(xià)可(kě)定爲570px;如果不那麽嚴格的(de)話(huà)，第一屏高(gāo)度也(yě)可(kě)以定爲600px。在原型稿上标明(míng)即可(kě)，這(zhè)樣可(kě)以給視覺設計師一個(gè)參考。但不要爲了(le)保持第一屏高(gāo)度而讓内容過度擁擠，這(zhè)樣會給視覺設計師帶來(lái)不小的(de)麻煩。

 

四、嚴格遵守栅格規範

很多(duō)産品人(rén)員(yuán)或新人(rén)交互設計師都比較容易忽略這(zhè)一點，沒有按照(zhào)栅格規範來(lái)布局，這(zhè)樣容易導緻的(de)結果就是：視覺設計師在按照(zhào)栅格排版時(shí)，發現在交互稿中能排下(xià)的(de)内容，在視覺稿中排不下(xià)了(le)，這(zhè)樣就還(hái)得(de)返回去改交互稿，或是修改需求内容。影(yǐng)響效率不說，可(kě)能還(hái)會影(yǐng)響最終的(de)質量。所以在制作原型時(shí)，一定要注意這(zhè)一點，同時(shí)也(yě)要保證交互稿中的(de)字号、間距盡量符合視覺要求(比如間距最小10像素等)，以免給視覺造成不必要的(de)困擾。但建議(yì)在确定栅格布局時(shí)，一定提前和(hé)視覺溝通(tōng)商量好，以免影(yǐng)響視覺的(de)發揮。

 

五、合理(lǐ)的(de)布局及間距

很多(duō)産品人(rén)員(yuán)完全不考慮布局标準及美(měi)觀程度，随便就把想要的(de)内容堆到一起。這(zhè)樣視覺就隻能重新考慮布局，無形中耽誤了(le)很多(duō)時(shí)間。另外就是前面提到的(de)，不按照(zhào)布局及間距标準畫(huà)線框圖，将很難準确的(de)計算(suàn)第一屏高(gāo)度及每個(gè)模塊的(de)實際内容量，導緻視覺返工的(de)幾率大(dà)大(dà)增加。(如下(xià)圖的(de)這(zhè)種就是一個(gè)不合格的(de)反例)。這(zhè)裏也(yě)是一樣，建議(yì)在确定界面布局時(shí)，提前和(hé)視覺溝通(tōng)商量，給視覺合理(lǐ)的(de)發揮空間。

 

六、表達清楚UI邏輯

當設計一個(gè)内容元素較多(duō)、邏輯層級較複雜(zá)的(de)頁面時(shí)(比如表單)，爲了(le)避免混亂，我們需要提前整理(lǐ)一下(xià)這(zhè)些内容，以保證文字、鏈接、操作等内容的(de)樣式符合它們所代表的(de)重要程度，并把各種複雜(zá)的(de)情況歸類成有限的(de)幾種形式，以給用(yòng)戶一個(gè)合理(lǐ)的(de)視覺引導。(字号盡量控制在3-5種，根據情況匹配顔色)

 

如果在繪制線框圖的(de)時(shí)候，注意以上的(de)幾點，我們會發現，和(hé)視覺設計師的(de)溝通(tōng)越來(lái)越暢通(tōng)。當然我這(zhè)裏說的(de)溝通(tōng)不一定是語言方面的(de)，隻要工作方法得(de)當，即使不當面交流，你也(yě)會發現設計師更懂(dǒng)你的(de)想法，而且往往一步就能到位，節省了(le)大(dà)量的(de)時(shí)間。