正文字體采用 微軟雅黑 顏色#333333 13字號、提示文字為微軟雅黑 顏色#999999 10字號牌废、固定的appbar行高為40px章贞，內(nèi)容據(jù)左側(cè)屏幕邊緣10px距離..
轉(zhuǎn)載的這篇文章，容講述的是制作原型需要注意的幾點闺魏，這篇文章里面寫的很透徹未状，而且也有很多對比，希望大家能夠仔細閱讀析桥，從中體會司草，以便我們能夠更好的設(shè)計出產(chǎn)品原型。
以前泡仗，我是這樣畫線框圖的埋虹，這樣能非常清晰的展示各模塊元素之間的布局關(guān)系。然后我會告訴視覺娩怎，這些模塊或元素之間的優(yōu)先級關(guān)系是怎樣的搔课。但頭疼的是，當(dāng)界面元素很復(fù)雜的時候截亦，視覺就難以一一記住了爬泥，這個時候就需要反復(fù)的溝通，視覺在這個過程中也非常的痛苦魁巩，經(jīng)常是改的頭都大了但還是有錯誤急灭。
現(xiàn)在，我這樣畫線框圖：
加入了明暗對比之后谷遂，界面元素的重要級關(guān)系更直觀葬馋，我們不再需要跑過去跟視覺說：這N個模塊中這個最重要，那個其次…… 視覺的工作效率也大大的提高了肾扰。
但需要注意的是：深色并不意味著比淺色更重要畴嘶，要看色塊之間的對比關(guān)系。比如下圖
“全部商品分類”是非常重要的集晚，在深色塊上用了淺色窗悯，是希望把它突出出來，讓人更容易注意到偷拔。但是視覺設(shè)計師有可能會誤以為淺色代表不那么重要蒋院，這個一定要提前溝通好。
修改前：
修改后：
二莲绰、不使用截圖與顏色
很多產(chǎn)品人員為了能更清楚的表現(xiàn)想法欺旧，拼湊各種競品的截圖，組成一個頁面蛤签。這樣做一來不規(guī)范辞友，二來對視覺設(shè)計師也有一定的干擾。另外不太建議在線框圖上使用色彩，這樣同樣會對視覺設(shè)計師造成不必要的干擾称龙。如果真的有一些關(guān)于圖案的想法留拾，可以告訴視覺設(shè)計師需要營造什么樣的氛圍，達到什么效果鲫尊，而不是直接告訴他“畫幾個銅錢飛出來的樣子痴柔，配一個皇榜……”
三、標(biāo)記第一屏高度
第一屏高度至關(guān)重要疫向，最重要的內(nèi)容竞帽、尤其是重要的操作按鈕盡可能在第一屏內(nèi)顯示完全，不然會對轉(zhuǎn)化率有較大的影響鸿捧。第一屏高度在什么位置？在1024*768分辨率下疙渣，極限情況下可定為570px匙奴；如果不那么嚴(yán)格的話，第一屏高度也可以定為600px妄荔。在原型稿上標(biāo)明即可泼菌，這樣可以給視覺設(shè)計師一個參考。但不要為了保持第一屏高度而讓內(nèi)容過度擁擠啦租，這樣會給視覺設(shè)計師帶來不小的麻煩哗伯。
四、嚴(yán)格遵守柵格規(guī)范
很多產(chǎn)品人員或新人交互設(shè)計師都比較容易忽略這一點篷角，沒有按照柵格規(guī)范來布局焊刹，這樣容易導(dǎo)致的結(jié)果就是：視覺設(shè)計師在按照柵格排版時，發(fā)現(xiàn)在交互稿中能排下的內(nèi)容恳蹲，在視覺稿中排不下了虐块，這樣就還得返回去改交互稿，或是修改需求內(nèi)容嘉蕾。影響效率不說贺奠，可能還會影響最終的質(zhì)量。所以在制作原型時错忱，一定要注意這一點儡率，同時也要保證交互稿中的字號、間距盡量符合視覺要求（比如間距最小10像素等）以清，以免給視覺造成不必要的困擾儿普。但建議在確定柵格布局時，一定提前和視覺溝通商量好玖媚，以免影響視覺的發(fā)揮箕肃。
五、合理的布局及間距
很多產(chǎn)品人員完全不考慮布局標(biāo)準(zhǔn)及美觀程度今魔，隨便就把想要的內(nèi)容堆到一起勺像。這樣視覺就只能重新考慮布局障贸，無形中耽誤了很多時間。另外就是前面提到的吟宦，不按照布局及間距標(biāo)準(zhǔn)畫線框圖篮洁，將很難準(zhǔn)確的計算第一屏高度及每個模塊的實際內(nèi)容量，導(dǎo)致視覺返工的幾率大大增加殃姓。（如下圖的這種就是一個不合格的反例）袁波。這里也是一樣，建議在確定界面布局時蜗侈，提前和視覺溝通商量篷牌，給視覺合理的發(fā)揮空間。
六踏幻、表達清楚UI邏輯
當(dāng)設(shè)計一個內(nèi)容元素較多枷颊、邏輯層級較復(fù)雜的頁面時（比如表單），為了避免混亂该面，我們需要提前整理一下這些內(nèi)容夭苗，以保證文字、鏈接隔缀、操作等內(nèi)容的樣式符合它們所代表的重要程度题造，并把各種復(fù)雜的情況歸類成有限的幾種形式，以給用戶一個合理的視覺引導(dǎo)猾瘸。（字號盡量控制在3-5種界赔，根據(jù)情況匹配顏色）
主色調(diào)和點綴色最終由視覺設(shè)計師確定，在交互稿中有所示意即可牵触。通過這些細致的分類仔蝌，可以保證最終的字號及顏色符合邏輯，而不會給視覺設(shè)計師造成不必要的困擾（視覺考慮更多的是美觀荒吏，而非令人頭疼的邏輯）敛惊。
七、了解視覺趨勢
時刻關(guān)注一些視覺趨勢绰更，有助于我們在審美上和視覺設(shè)計師站在較為一致的立場上瞧挤，使大家的溝通更加順暢。
從上圖可以看出儡湾，目前的視覺趨勢大致如下：
漸變減少特恬，視覺風(fēng)格更平面化
通過空隙和留白來分割區(qū)域，而不是用線
布局更規(guī)整
文字間距變大
藍色鏈接減少徐钠，黑色文字減少癌刽，灰色文字居多
圓角減少，直角增多
色塊的疊加很流行
去掉不必要的視覺元素
……
我們可以把這些發(fā)現(xiàn)應(yīng)用在線框圖的設(shè)計中。
如果在繪制線框圖的時候显拜，注意以上的幾點衡奥，我們會發(fā)現(xiàn)，和視覺設(shè)計師的溝通越來越暢通远荠。當(dāng)然我這里說的溝通不一定是語言方面的矮固，只要工作方法得當(dāng)，即使不當(dāng)面交流譬淳，你也會發(fā)現(xiàn)設(shè)計師更懂你的想法档址，而且往往一步就能到位，節(jié)省了大量的時間邻梆。
