更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

Web前端工程師要掌握的工作經驗

  • 發布:Web前端培訓
  • 來源:Web職場
  • 時間:2020-04-30 15:30

今天小編要跟大家分享的文章是關于Web前端工程師要掌握的工作經驗。設計師與工程師的交流經常是雞同鴨講,牛頭對不上馬嘴,為了幫同學們搞定這個難題,小編整理了一個列表,幫同學們能跟工程師無障礙溝通,全是非常實用的知識點。

Web前端工程師要掌握的工作經驗

開發者一般不是令人驚艷的設計師,設計師也通常不是出色的開發者。雖然有很多例外,但這兩行的門道對對方而言都是難以言說的謎,然而雙方卻要在這種情況下合作完成項目。作為在兩個領域都工作過的人,達內web前端培訓專家整理了一個列表,使設計師能夠更好地輔助開發者開發應用和網站。下面來和小編一起看一看吧!

一、Photoshop

開發者經常需要處理設計師制作的Photoshop PSD文件,因此任何對設計師有益的事情也會對開發者有益,包括繪制易于維護、易于理解的PSD文件。

1、有效地進行版本控制

設計師經常會面對各種裝滿了一堆沒有清晰版本命名的PSD的文件夾。為了解決這個問題,設計師可以事先確定一種合適的版本命名格式(理想的格式應該使文件在字順排序下自動有意義地排列)。

2、保持圖層

不要輕易合并圖層。需要導出時,通過組合,隱藏/顯示圖層的方式來進行,導出后再把文件恢復到原來的狀態。不要輕易破壞有用的數據。電腦性能更不是合并圖層的理由——若被此限制,你應該做的是買內存更大,性能更好的電腦。

3、對圖層進行有意義的命名

雖然對圖層命名比較繁瑣,但這樣做確實能夠幫助理解,尤其是在重用文件元素的時候。命名時應確保文字圖層的名稱反應其內容。重復的圖層也要進行有意義的命名,而不是簡單的“副件”。

4、合理地對圖層編組

應該把分散在不同圖層的視覺元素編為一組。對單一設計的文件來說,編組整體上應該一致按照從左到右,從上到下的順序。層次和順序比按顏色編碼圖層更好,因為圖層移動時,顏色還需要保持。

5、去掉不需要的圖層

不再需要的舊版本、模版和參考材料以及臨時復件應該從圖層中及時刪除。間歇性地瀏覽一下你的所有圖層,及時刪除不需要的東西。

6、使用圖層復合

Photoshop的圖層復合功能可以讓你制作多組圖層狀態,如可見性,位置甚至圖層風格。你可以用圖層復合功能來靈活地在一份文件中整合設計中不同部分(比如網站的多個標簽、應用的多個頁面)。這樣做可以不必保留重復的圖層編組,從而減小文件大小。

7、 保存矢量文件和可伸縮效果

在設計應用時,很可能會需要原設計兩倍尺寸的圖片來適應有雙倍像素的新設備。確保在這種情況下你不需要重新繪制所有的圖標。

二、助力開發者

還有一些特別與應用及網頁設計相關的建議,每項都有相應的要求和限制。

8、學會在縮放時保存圓角

操作系統經常會統一圓角的角半徑(iOS通常為12像素)。Adobe Fireworks會保持圓角矩形的角半徑,但Photoshop不會。因此確保你用直接選擇工具來選取圓角的點并且以傳統的方式縮放圖像。

9、在72ppi下進行設計

一個像素就是一個像素,更多的像素只會生成更大的文件。不要通過改分辨率來蒙混過關。

10、對齊像素

確保相關的形狀工具設置成對齊像素。根據你的需要使用像素網格等工具。一貫使用偶數尺寸來方便裁剪。

11、使用RGB模式

這點不僅對顏色顯示重要,對開發者將顏色正確地寫入代碼也同樣關鍵。

12、 資源準備是你工作的一部分

很多(大多數)開發者除了基本的編輯功能外對Photoshop一竅不通。設計師需要適時地導出可能會在應用或網站上用到的裁剪圖,因為畢竟他們是對文件和Photoshop最熟悉的人。這項工作雖然很痛苦,而且很耗時,但這是除“設計”外90%的工作。

13、謹慎地使用字體

不同的設備和操作系統的預設字體有所不同,因此不能確保這些設備都有你進行設計的電腦上的字體(事實上,你比一般人的設備上的字體都多)。基本上,將應用或網站上的文字以實際文本的格式呈現會有更好的效果,但這也使對字體的選擇不僅基于視覺,還有可行性上的考慮。

還有一點值得注意,允許個人設計使用的許可也許不允許你將該字體完全使用在應用或網頁上。在選定設計中使用的字體之前,確保和你的開發者或客戶進行有效溝通。

14 、確定設計尺寸

對移動設備應用來說,屏幕尺寸不是全部信息,你還需要考慮系統狀態欄等的存在,以及他們如何在屏幕橫排和豎排時影響尺寸(比如iOS設備的頂端狀態欄會在橫排的時候減小較小邊的尺寸,在豎排的時候減小大邊的尺寸)。和你的開發者確認一下應用是否為完整的全屏很必要。

15 、使用平臺風格

每個平臺(操作系統)都有其獨特的用戶界面元素和交互風格(也會根據不同的設備有所不同)。在設計時注意這些風格,并且除了有特殊原因,不要進行與平臺本身風格差別太大的設計。例如,在iPad上,你會發現這些需要注意的地方:

1、支持兩種屏幕方向的強烈需求

2、雙欄設計在兩種屏幕方向上都可接受

3、將彈出框作為一種界面元素和分組機制

4、確定的文件瀏覽器的風格

5、在級別較高的導航欄中,返回按鈕是向左指的圖標

因此,在設計時要熟悉平臺,因為你的設計要適應它。沒有哪一種單一的設計可以適應所有的平臺。。

16、對橫排和豎排分別進行設計

不同的屏幕方向需要不同的交互設計風格,這不僅是因為屏幕寬高比,還因為用戶以不同方向手持設備時外形、重量和平衡上的區別。只針對適應屏幕寬高比進行設計頂多是一個糟糕的妥協策略。

17、針對每種主流尺寸和情景進行設計

同一應用在手機、平板和電腦上的內容和交互都應有所不同。對移動設備而言,我們也需要考慮注意力持續時間、注意力分散、使用設備時的身體協調性減弱,以及用戶在移動或危險情境下使用設備的可能性(例如走路時的障礙物、過馬路時的交通情況以及駕駛安全性)。這些使用情景與設備的尺寸和本質有不可否認的關系,有效的設計應該充分考慮這些因素。

18、使用純正的,至少實際的示例內容

好的示例內容標準有以下幾條:

1、示例內容涵蓋應用可能的長度,而不是僅僅為了原型設計的方便。

2、設計必需的數據缺省時的顯示方案,尤其如用戶照片等。

3、考慮不合需要的輸入示例,比如需要進行裁剪的過寬或過長的圖片。

4、包含極端或少見的名字示例,包括超長或不間斷的姓和名。

5、地址不限制為當地的地址形式,而包括各種可能的長度和格式。

6、在設計的任何角落都找不到“Lorem ipsum”。

19、 本地化考慮

當大多數人考慮支持其它語言時,他們想的是文本。而當設計師或開發者考慮本地化時,他們應該考慮的是布局。為了實現本地化,你的設計應該使所有文本支持與英文50%的寬度差異。在顯示同等內容時,亞洲語言需要的空間比英語少接近50%,而歐洲語言會比英語多接近50%。這個問題在設計按鈕和幫助文本時尤其重要。

20、考慮屏幕全局光源

作為設計師,你應該早就了解每個平臺都有其不可改變的屏幕全局光源(例如在iOS上,是在中心的正上方,或90度)。所有高光和陰影效果都應該和平臺的光源相協調。

21、明確導航和組織控件設計

向你的開發者明確展示你的設計中包含的標簽、下拉菜單或者其它閉合機制。在進行這種控件設計時,要尊重平臺的設計慣例。開發者在進行開發時需要明確了解信息層次,因此你要確保你的設計清晰地展示你的意圖。圖層復合在這種情況下非常有用。

22、導出圖形時不進行壓縮

在導出時以PNG alpha通道格式保存,除非被明確告知其它保存方式。除非被明確要求,否則不要使用JPEG格式。不要考慮圖像文件大小,因為開發者或他們的開發環境會對圖像進行最優化。以透明背景導出每個元素,而不是純色,即便你設計中的一部分背景確實是純色的。

23、 詢問陰影的處理

和你的開發者溝通是否要將陰影效果包含在導出圖中。通常情況下,開發者會用CSS或寫代碼來應用陰影,這樣做事實上會比直接使用預先保存的陰影位圖更方便容易。不要假定陰影效果應該包含在圖像中,雖然在設計原型時用圖層展示陰影效果。

24、理解按鈕的構建方法

應用或網頁上的按鈕幾乎都不是用單一的圖片創建的,而通常是下面兩種情況:

a:3部分圖像,左端圖像,右端圖像,重復的單像素寬的中間部分(允許圖像的橫向擴展)

b:9部分圖像,上中下-左端圖像,上中下-右端圖像,以及3個重復的上中下中間部分(允許按鈕的橫向和縱向擴展)

最后想法

任何軟件都應該是平面設計、交互設計和開發三者合作的結果,這三部分都同等重要。知道另外領域的需求對我們自己的工作非常有幫助。

以上就是小編今天為大家分享的關于Web前端工程師要掌握的工作經驗的文章,希望本篇文章能夠對正在從事web前端工作的小伙伴們有所幫助,想要了解更多web前端知識的小伙伴們記得關注達內web培訓官網。最后祝愿小伙伴們工作順利!

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:學習Web前端開發知識需要看哪些書籍
下一篇:Web前端工程師的學習路線有哪些?每個階段都學習什么?

Web前端學習人群分類有哪些?學Web前端會遇到哪些困難?

Web前端工程師都在用的前端開發工具匯總

Web前端初學者快速掌握JavaScript的技巧

Web前端開發者要知道的幾個前端框架

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天