av网站一色屋_亚洲av片不卡无码久久wy193_国产在线精品国自产_男人女人爽好猛好痛视频

網站視覺設計師與前端工程師應該如何配合?

2016-09-05
2223

前期:多方溝通確認

丨原型很重要
視覺定稿前的溝通很依賴原型,在正常的項目管理中,視覺稿除了要給產品、策劃確認之外,還需要和技術溝通確認。因為設計師天馬行空的大腦會迸發(fā)出各種奇思妙想,例如一個看起來酷炫的動畫,結果跑到工程師面前,工程師很犯難的表示做不了,或者硬著頭皮做到最后也發(fā)現不盡人意。

所以在原型步驟就要想好對應的圖層結構,交互特效,并和開發(fā)人員做好交流,是否可以實現,功能的評估一定要細致,否則會浪費大量的人力成本。


原型圖

丨熟悉設計環(huán)境規(guī)范
在這里提到設計環(huán)境是因為如果你的原型不遵循設計規(guī)范,那就沒有溝通可言。無論是 Web 還是 iOS、安卓等等,都有對應的設計規(guī)范文檔,如果連最基礎的設計規(guī)范都不知道就開始做設計,那么你要自己承擔項目拖延和被整個開發(fā)組人員問責的后果。所以在你動手前,請做好功課,并且在每次環(huán)境大升級時跟進關注(例如新的 iPhone6、6+發(fā)布的尺寸變更等)。

舉個例子,在Web設計下,12 PX以下的中文字體無法被正常顯示,文本只支持本地客戶端已有字庫,iOS的 Tabbar、Topbar 等高度是不能被隨意變更任意增減層級等等。這樣的稿子如果被交付,并沒有強有力的邏輯說服別人,只會讓你的團隊感受到你的不專業(yè),增加矛盾隱患。


遵循設計規(guī)范設計

中期:制定明確的項目設計規(guī)范**

前期的視覺稿和項目組相關的上下游確認后,就該做一份詳細的視覺規(guī)范和頁面標注了。視覺規(guī)范可以理解成視覺和技術之間的書面溝通,越是復雜的大型項目就越需要一份視覺規(guī)范。原因有二,其一是大型項目會有好幾個技術來同時實現頁面,視覺規(guī)范可減少溝通成本;其二是詳盡有效的視覺規(guī)范可以標出細致的視覺狀態(tài)供技術參考。

這里推薦一種知友@匡雪婷的做法:

用2個頁面解釋布局,再用1個頁面解釋樣式


制定規(guī)范


視覺稿完成后,每一個頁面拿出來放在左邊,再用三個畫板來說明它。

  • 橫向布局:解釋元素左右的外間距、內間距和橫向寬度。(這里要考慮到針對不同寬度屏幕的適配,標注是給固定值還是百分比)

  • 縱向布局:解釋元素的上下間距和高度。(有時要確保頁面里最重要的信息——比如一個 CFA btn——在不同屏幕大小中是否都出現在了首屏,判斷標注是向上定位還是向下定位 )

  • 視覺樣式:字體、字號、行高、顏色、透明度、圓角。

單獨拎出可復用的組件,統(tǒng)一標注


統(tǒng)一標注

至于標注說明更是必須的,統(tǒng)一標注的好處不僅是我們自己在后續(xù)的設計中可以復用和遵守, 對于 web/iOS/Andriod 的工程師而言,也能提高代碼效率同時保持不同平臺最終效果的統(tǒng)一,后續(xù)迭代的時候也不會出現莫名其妙的樣式和代碼。

市面上有很多插件可以幫助設計師實現標注,為避免廣告嫌疑這里不做推薦,感興趣的朋友可以自行了解或者來后臺跟丁丁討論交流心(ren)得(sheng)。


標注

后期:還原跟進、反復驗收

開發(fā)完成視覺部分內容以后,就要開始校對,這時候就需要盡可能給出參照物,這個參照物就是你的高保真原型。對著高保真原型還原跟進最重要的是要有細心和耐心,視覺設計師的細心程度要達到像素級才能高度還原,如果你不夠細心,每個頁面都有一些元素偏移幾個像素,那全部頁面會有很多出入。如果你不夠細心在測試環(huán)境下逐一測試不同的狀態(tài)頁面,那很可能到上線后你才發(fā)現有些頁面的視覺還原有重要的問題。


?

綜上,「跟進還原能力」對一個設計師來說是很重要的,會做「好看」的設計師一抓一大把,但能做好商業(yè)設計,所需的能力遠遠不止于此,一個不具備將事情由始至終合格完成的設計師在任何時候都是不及格的,從結果導向上來看,甚至不如一個「你認為比你低級很多」的設計師,擁有全方位的素質才是「稀缺物種」。

掃描二維碼分享到微信

在線咨詢
客服微信
聯(lián)系電話

028-86728035