人人做人人干-人人做人人看-人人做人人爽国产视-人人做人人爽人人爱-色屋视频-色屋网

歡迎您光臨深圳塔燈網(wǎng)絡科技有限公司！

余先生：13699882642

8年

專注物流供應鏈系統(tǒng)

網(wǎng)站百科

為您解碼網(wǎng)站建設的點點滴滴

首頁 > > 網(wǎng)站建設知識 > 建站知識 > APP開發(fā)

企業(yè)建站知識推廣知識小程序微信營銷 APP開發(fā) 前端設計 MindManager 開發(fā)語言自媒體

APP開發(fā)在原型設計階段應該注意哪些？

發(fā)表日期：2018-07 文章編輯：小燈瀏覽次數(shù)：3416

在APP開發(fā)項目中，一些產(chǎn)品經(jīng)理在進行原型設計，畫線框圖時都會忽略一些重要內(nèi)容，導致和視覺設計師的溝通成本增高、返工增多、工作效率下降、設計質(zhì)量下降等重要問題。為了解決這些問題，一方面需要加強溝通，另一方面還需要多站在視覺的角度考慮線框圖的設計，使大家的配合更默契。

QQ圖片20171226173833.png

下面是我們總結(jié)的一些原型設計的經(jīng)驗，分享給大家。

一、通過明暗對比表達

畫線框圖時，加入了明暗對比之后，界面元素的重要級關系更直觀，我們不再需要跑過去跟視覺說：這N個模塊中這個重要，那個其次…… 視覺的工作效率也大大的提高了。

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

二、不使用截圖與顏色

很多產(chǎn)品人員為了能更清楚的表現(xiàn)想法，拼湊各種競品的截圖，組成一個頁面。這樣做一來不規(guī)范，二來對視覺設計師也有一定的干擾。另外不太建議在線框圖上使用色彩，這樣同樣會對視覺設計師造成不必要的干擾。如果真的有一些關于圖案的想法，可以告訴視覺設計師需要營造什么樣的氛圍，達到什么效果。

三、標記屏高度

屏高度至關重要，重要的內(nèi)容、尤其是重要的操作按鈕盡可能在屏內(nèi)顯示完全，不然會對轉(zhuǎn)化率有較大的影響。屏高度在什么位置?在1024*768分辨率下，極限情況下可定為570px;如果不那么嚴格的話，屏高度也可以定為600px。在原型稿上標明即可，這樣可以給視覺設計師一個參考。但不要為了保持屏高度而讓內(nèi)容過度擁擠，這樣會給視覺設計師帶來不小的麻煩。

四、嚴格遵守柵格規(guī)范

很多產(chǎn)品人員或新人交互設計師都比較容易忽略這一點，沒有按照柵格規(guī)范來布局，這樣容易導致的結(jié)果就是：視覺設計師在按照柵格排版時，發(fā)現(xiàn)在交互稿中能排下的內(nèi)容，在視覺稿中排不下了，這樣就還得返回去改交互稿，或是修改需求內(nèi)容。影響效率不說，可能還會影響終的質(zhì)量。所以在制作原型時，一定要注意這一點，同時也要保證交互稿中的字號、間距盡量符合視覺要求(比如間距小10像素等)，以免給視覺造成不必要的困擾。但建議在確定柵格布局時，一定提前和視覺溝通商量好，以免影響視覺的發(fā)揮。

五、合理的布局及間距

很多產(chǎn)品人員完全不考慮布局標準及美觀程度，隨便就把想要的內(nèi)容堆到一起。這樣視覺就只能重新考慮布局，無形中耽誤了很多時間。另外就是前面提到的，不按照布局及間距標準畫線框圖，將很難準確的計算屏高度及每個模塊的實際內(nèi)容量，導致視覺返工的幾率大大增加。(如下圖的這種就是一個不合格的反例)。這里也是一樣，建議在確定界面布局時，提前和視覺溝通商量，給視覺合理的發(fā)揮空間。

六、表達清楚UI邏輯

當設計一個內(nèi)容元素較多、邏輯層級較復雜的頁面時(比如表單)，為了避免混亂，我們需要提前整理一下這些內(nèi)容，以保證文字、鏈接、操作等內(nèi)容的樣式符合它們所代表的重要程度，并把各種復雜的情況歸類成有限的幾種形式，以給用戶一個合理的視覺引導。(字號盡量控制在3-5種，根據(jù)情況匹配顏色)

如果在繪制線框圖的時候，注意以上的幾點，我們會發(fā)現(xiàn)，和視覺設計師的溝通越來越暢通。當然我這里說的溝通不一定是語言方面的，只要工作方法得當，即使不當面交流，你也會發(fā)現(xiàn)設計師更懂你的想法，而且往往一步就能到位，節(jié)省了大量的時間。

本頁內(nèi)容由塔燈網(wǎng)絡科技有限公司通過網(wǎng)絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.kwpm.com.cn/3984.html

上一篇：<深入了解Flutter界面開發(fā) 下一篇：GMTC-閑魚Flutter實踐效果訪談>