在建立網(wǎng)站的過(guò)程中， 有幾個(gè)階段。 如果我們要簡(jiǎn)化它并查看標(biāo)準(zhǔn)網(wǎng)站， 階段將是：

1. 需要 –有人出于某種原因需要網(wǎng)站。
2. 集思廣益 –確定總體結(jié)構(gòu)， 目標(biāo)等等。
3. 提案 –客戶找到自由職業(yè)者或代理商來(lái)建立站點(diǎn)。
4. 內(nèi)容 –文章， 圖片， 等等， 在目標(biāo)網(wǎng)頁(yè)上可以找到的所有內(nèi)容， 站點(diǎn)地圖， 等等。
5. 設(shè)計(jì) –一個(gè)人/團(tuán)隊(duì)根據(jù)內(nèi)容進(jìn)行設(shè)計(jì)和布局。
6. 發(fā)展 –一個(gè)人/團(tuán)隊(duì)根據(jù)設(shè)計(jì)來(lái)開(kāi)發(fā)站點(diǎn)的功能部分。

大多數(shù)時(shí)候， 您可以在這里混合使用。 您可以更改完成的順序， 而且團(tuán)隊(duì)仍然可以取得不錯(cuò)的成績(jī)。 然而， 當(dāng)您有來(lái)自不同機(jī)構(gòu)的人員從事同一項(xiàng)目時(shí)，這可能會(huì)很困難， 這是選擇可以照顧所有事情的全方位代理的主要原因。

對(duì)于本文， 我們從第5步開(kāi)始 設(shè)計(jì)到第6步 發(fā)展。 在這里，可能會(huì)減慢開(kāi)發(fā)速度并弄亂計(jì)劃過(guò)程中先前已確定的內(nèi)容，從而導(dǎo)致問(wèn)題出在哪里。

“設(shè)計(jì)師應(yīng)該知道如何編碼嗎？”是一個(gè)常見(jiàn)問(wèn)題，這是一個(gè)非常合理的問(wèn)題。 如果設(shè)計(jì)師了解背后的代碼，并且理想情況下，他們可以（在一定程度上）制作出這樣的代碼， 然后他/她可以幫助整個(gè)團(tuán)隊(duì)加快完成項(xiàng)目。

這是這種情況的一些原因：

您在Figma中創(chuàng)建的任何設(shè)計(jì)， Adobe， 等將顯示在瀏覽器中。 所有瀏覽器都使用一種稱為HTML / CSS的編程語(yǔ)言來(lái)呈現(xiàn)頁(yè)面。 如果使用Javascript， 您可以使您的設(shè)計(jì)變得互動(dòng)。

需要注意的重要一點(diǎn)是，任何設(shè)計(jì)都應(yīng)在HTML / CSS中可行。 只要技術(shù)允許，許多才華橫溢的前端開(kāi)發(fā)人員就可以實(shí)施幾乎所有內(nèi)容。 但要記住， –并非總是關(guān)于“你能做到嗎？”， 關(guān)于“您能否做好并使其可維護(hù)”。

可維護(hù)性是成功項(xiàng)目的秘訣。 您不想花幾個(gè)小時(shí)調(diào)整現(xiàn)有的網(wǎng)站元素并添加新的元素，因?yàn)榇a庫(kù)很亂。 有時(shí)，極其復(fù)雜的設(shè)計(jì)幾乎沒(méi)有可重用的組件，結(jié)果一團(tuán)糟。

一些網(wǎng)頁(yè)設(shè)計(jì)師的技巧：

• 設(shè)計(jì)時(shí)要考慮組件。 現(xiàn)在，大多數(shù)工具都提供了此功能（Figma， Adobe XD， 草圖）。 強(qiáng)迫自己更多地使用它們，直到不再煩人為止。
• 很好地對(duì)齊元素。 相似的部分之間應(yīng)具有相同的距離。 80px是一個(gè)很好的分隔， 例如。 請(qǐng)勿在此處使用80隨機(jī)分配部分， 那里86 第三名92名，另一名78名。 保持整潔。
• 使用網(wǎng)格！ 所有工具都提供網(wǎng)格系統(tǒng)。 理想情況下，選擇a12列網(wǎng)格。
• 在寬屏（1920像素或更高）上展示您的設(shè)計(jì)。 這有助于開(kāi)發(fā)人員弄清楚每個(gè)部分及其背景的工作方式。

我們都想要一個(gè)快速的網(wǎng)站， 正確的？ 出色地， 設(shè)計(jì)師也是其中的一部分。 考慮一下：一個(gè)擁有8張高分辨率圖片的網(wǎng)站， 四個(gè)視頻和動(dòng)畫(huà)元素。 。 祝您按時(shí)優(yōu)化，祝您好運(yùn)。 雖然可行， 延遲加載圖像和視頻需要花費(fèi)更多的開(kāi)發(fā)時(shí)間和技術(shù)， 優(yōu)化上傳媒體 支持更好的圖像文件格式， 并添加智能動(dòng)畫(huà)方法以實(shí)現(xiàn)高性能。

如果開(kāi)發(fā)人員經(jīng)驗(yàn)不足或不擔(dān)心速度， 您的網(wǎng)站最終可能會(huì)在中低端的智能手機(jī)和筆記本電腦上表現(xiàn)極為落后。

作為設(shè)計(jì)師， 您要牢記的目標(biāo)之一是在保持網(wǎng)站外觀的同時(shí)使開(kāi)發(fā)更加輕松快捷。

您應(yīng)該考慮在網(wǎng)絡(luò)上容易實(shí)現(xiàn)的功能。

• 盒子–全部都是盒子。 你可以拐彎一些是的， 您可以制作橢圓形（在方框中定義）或更多。 但是，當(dāng)您選擇與布局互動(dòng)的更復(fù)雜的形狀時(shí)， 事情就變得困難了。
• 動(dòng)畫(huà)化準(zhǔn)確的位置非常困難–想象一下您想單擊圖像， 然后將其移動(dòng)到文本的另一邊？ 聽(tīng)起來(lái)“輕松”，但事實(shí)并非如此。 圖像將移動(dòng)到的位置必須相對(duì)于站點(diǎn)容器保持不變， 會(huì)根據(jù)視口等進(jìn)行更改。 然后，如果圖像較大，會(huì)發(fā)生什么？
• 動(dòng)畫(huà)框尺寸會(huì)影響布局。 這指的是對(duì)動(dòng)畫(huà)過(guò)程中元素排序方式的任何更改。 這在瀏覽器上可能會(huì)非常繁重，并且通常會(huì)導(dǎo)致巨大的滯后。

2倍于文本的外觀設(shè)計(jì)如何？ 還是作為肖像圖像而不是風(fēng)景圖像？ 您永遠(yuǎn)不知道編輯團(tuán)隊(duì)將上傳什么。 是否應(yīng)該有諸如寬高比甚至圖像邊緣之類的約束？ 如果可以的話， 在設(shè)計(jì)中展示這一點(diǎn)。

大多數(shù)設(shè)計(jì)工具（例如Figma或Adobe XD）都可以與開(kāi)發(fā)人員“共享”設(shè)計(jì)。 從那里， 前端團(tuán)隊(duì)可以檢查顏色， 字體設(shè)置， 層的間距和其他視覺(jué)特性， 這將使他們能夠非常緊密地堅(jiān)持設(shè)計(jì)。

如果您在網(wǎng)站上使用了特定字體， 提供給開(kāi)發(fā)人員。 如果它已獲得許可并可以通過(guò)特定的URL訪問(wèn)， 確保也分享。 從第一天開(kāi)始，開(kāi)發(fā)人員就必須使用正確的字體，這一點(diǎn)很重要。 如果有視頻，請(qǐng)確保也分享！ 視頻可以在YouTube上播放嗎？ Vimeo還是自托管的？

保持網(wǎng)站最終外觀與設(shè)計(jì)完全相同的想法是使開(kāi)發(fā)人員團(tuán)隊(duì)討厭您并且可以消除按時(shí)上線的任何機(jī)會(huì)的簡(jiǎn)便方法。 在幾乎每種情況下，設(shè)計(jì)都不是完美的。 不可能百分百確定在每個(gè)按鈕之前您都擁有18px的間距嗎？ 而不是19px？ 還是每個(gè)標(biāo)題都是38px而不是37px？ 或者，也許每個(gè)邊界都是#ddd，而沒(méi)有一個(gè)黑色但不透明度為15％的邊界？

開(kāi)發(fā)人員會(huì)四處散布諸如此類的小錯(cuò)誤，以保持整個(gè)站點(diǎn)的一致性。 它們內(nèi)置遵循相同規(guī)則的組件。 只要在特定情況下沒(méi)有明顯的故意改變， 應(yīng)該沒(méi)有理由說(shuō)一個(gè)要素在整體上不能相同。

到底， 編碼的網(wǎng)站應(yīng)遵循設(shè)計(jì)的一般外觀。

如果您希望某個(gè)元素像標(biāo)簽一樣具有交互性， 手風(fēng)琴 滑塊之類的東西， 花幾秒鐘寫(xiě)下它在臺(tái)式機(jī)上的工作方式， 移動(dòng)和可點(diǎn)擊的內(nèi)容 應(yīng)該交換一次。

完成后， 停下來(lái)一秒鐘，然后想象您正在使用該網(wǎng)站。 從上往下讀 向下滾動(dòng) 單擊某處以查看更多。 工作流程中可能缺少什么嗎？ 是否存在某個(gè)特定元素的視圖，該元素在用戶交互時(shí)會(huì)發(fā)生變化？ 如果這是真的，沒(méi)有設(shè)計(jì)， 那么您要讓開(kāi)發(fā)人員來(lái)解決這個(gè)問(wèn)題， 這增加了工作壓力。 如果截止日期很緊， 您可以與您的團(tuán)隊(duì)共享常規(guī)文件，并讓他們知道即將出現(xiàn)一些“狀態(tài)”視圖（請(qǐng)務(wù)必提及它們）。

在桌面上設(shè)計(jì)15個(gè)頁(yè)面，然后進(jìn)行移動(dòng)版設(shè)計(jì)是一項(xiàng)艱巨的任務(wù)。 在此之上做一個(gè)稍微不同的平板電腦版本更令人討厭。 這就是為什么有些設(shè)計(jì)師會(huì)忽略添加它的原因。 然而， 這意味著開(kāi)發(fā)人員將不得不用代碼來(lái)完成它。 并據(jù)此做出決策。 如果您看到復(fù)雜的元素， 理想情況下，即使您不瀏覽整個(gè)網(wǎng)站，也可以展示他們的平板電腦視圖。

設(shè)計(jì)師可以使開(kāi)發(fā)人員的生活成為一場(chǎng)噩夢(mèng)或非常好的體驗(yàn)。 實(shí)現(xiàn)后者的關(guān)鍵是更好地了解所使用的技術(shù)， HTMl / CSS， 哪些互動(dòng)元素可行， 等等。

如果您有幸在開(kāi)發(fā)人員身邊，并且擔(dān)心某些因素， 打電話給他們看一切。 他們一定會(huì)為您提供關(guān)于什么是棘手的東西和什么是簡(jiǎn)單的東西的指導(dǎo)。

我們確實(shí)提供網(wǎng)絡(luò)開(kāi)發(fā)服務(wù)，包括定制設(shè)計(jì)工作， 建立WordPress主題， 為成功的組織編寫(xiě)WordPress插件編碼并實(shí)施完整的解決方案。

DevriX的創(chuàng)意主管和前端開(kāi)發(fā)人員
亞歷克斯（Alex）的熱情在于學(xué)習(xí)新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來(lái)優(yōu)化網(wǎng)站性能并改善用戶體驗(yàn)。 亞歷克斯（Alex）喜歡騎自行車(chē)和數(shù)字藝術(shù)，最近開(kāi)始在ELSYS技術(shù)學(xué)校教授設(shè)計(jì)。