視覺設(shè)計(jì)，怎樣讓前端100%實(shí)現(xiàn)設(shè)計(jì)效果？(2)

這也是提升效率和整體視覺和諧感的重點(diǎn)，你要在大框架下建立小體系，這是你展示自己個(gè)性的部分，記得也要用文檔記錄下來，在以后的改版和開發(fā)過程中，嚴(yán)格遵守規(guī)范的參數(shù)，減少溝（si）通（bi）成本。

例如：主色色值、按鈕的大小邊框、各文字類型顏色大小、模塊間隔距離等等。

請看這個(gè)：@souhlin采集到設(shè)計(jì)規(guī)范(76圖)_花瓣UI 交互設(shè)計(jì)

我一直認(rèn)為做完P(guān)SD還是SKETCH文件，往開發(fā)那邊一扔，任務(wù)搞定的想法，是相當(dāng)不負(fù)責(zé)任的一種行為。因?yàn)樵O(shè)計(jì)不合理的部分導(dǎo)致導(dǎo)出切圖的工作變困難，因你的爛攤子，開發(fā)效率降低，完全是因?yàn)槟愕氖д`，不要抱怨和找任何借口。

比如水平可平鋪的背景是怎么最優(yōu)化導(dǎo)出的？安卓適應(yīng)多屏幕分辨率下，點(diǎn)九圖是怎么進(jìn)行標(biāo)記和拉伸的，應(yīng)該使用什么工具？需要應(yīng)用透明背景的圖片知道應(yīng)該使用什么格式？你必須設(shè)計(jì)出自己獨(dú)立也能完成切圖工作的設(shè)計(jì)稿，再要求開發(fā)能夠完整實(shí)現(xiàn)，而不是讓他們又來找你抱（si）怨（bi）哪里哪里是不行的你得重做。

標(biāo)注的作用何其重要，開發(fā)人員對于元素的間距和文字大小還有透明元素的參數(shù)設(shè)置，是沒有耐心一點(diǎn)點(diǎn)查看和檢測的（沒錯，大部分情況會——憑��！感�。∮X�。。�，你不好好把這些制作成文件白紙黑字，那么這個(gè)最重要的還原環(huán)節(jié)上出差錯的幾率也是最多的，往后修改最困難的。

下面推薦兩軟件：

用它們做出詳盡的標(biāo)注文件，交付開發(fā)，最后如果出現(xiàn)偏差，就有證據(jù)可以找出是誰的問題了。

開發(fā)完成視覺部分內(nèi)容以后，要開始校對，那么盡可能給出參照物，參照物是什么呢？

高保真原型

只有同意平臺下可運(yùn)行的高保證原型可以最直觀對比設(shè)計(jì)到實(shí)現(xiàn)之間有什么偏差，并以此檢查參數(shù)設(shè)置上的錯誤，逐個(gè)調(diào)整。

在這里強(qiáng)烈推薦——Invision在線原型工具。

可以制作APP和WEBSITE，并分享遠(yuǎn)程連接在手機(jī)和別的電腦上預(yù)覽，下面放我之前做過一個(gè)小項(xiàng)目的實(shí)例（最好翻墻訪問比較快）：

傳送門——InVision

或者PS PLAY，這個(gè)請?jiān)L問官網(wǎng)看詳情，也是可以在移動設(shè)備直接查看設(shè)計(jì)文件的工具，不過更適合設(shè)計(jì)過程中使用，但不妨結(jié)尾的時(shí)候做對比。

使用教程見：《騰訊ISUX移動終端設(shè)計(jì)神器：Ps Play！移動設(shè)計(jì)零阻力》