當前位置:首頁>ps入門教程>ps基礎教程>設計知識>教程內(nèi)容

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?(2)

來源:zhihu 作者:酸梅干超人 學習:3753人次

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

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

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

請看這個:@souhlin采集到設計規(guī)范(76圖)_花瓣UI 交互設計

四、學會怎么切圖

我一直認為做完PSD還是SKETCH文件,往開發(fā)那邊一扔,任務搞定的想法,是相當不負責任的一種行為。因為設計不合理的部分導致導出切圖的工作變困難,因你的爛攤子,開發(fā)效率降低,完全是因為你的失誤,不要抱怨和找任何借口。

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

五、一定要有標注說明

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

下面推薦兩軟件:

馬克鰻

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

像素大廚

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

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

六、結(jié)果對比調(diào)適

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

高保真原型

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

在這里強烈推薦——Invision在線原型工具。

Invision

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

可以制作APP和WEBSITE,并分享遠程連接在手機和別的電腦上預覽,下面放我之前做過一個小項目的實例(最好翻墻訪問比較快):

傳送門——InVision

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

使用教程見:《騰訊ISUX移動終端設計神器:Ps Play!移動設計零阻力》

視覺設計,怎樣讓前端100%實現(xiàn)設計效果?

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關注大神微博加入>>

網(wǎng)友求助,請回答!