改善網站設計的技巧

在建立網站的過程中，會經歷幾個階段。 如果我們要簡化它並查看一個標準網站，則階段將是：

1. 需要–有人出於某種原因需要一個網站。
2. 集思廣益–確定總體結構，目標等。
3. 提案–客戶找到自由職業者或代理商來建立網站。
4. 內容–文章，圖片等，可以在目標網頁，站點地圖等上找到的任何內容。
5. 設計–一個人/團隊根據內容進行設計和佈局。
6. 開發–一個人/團隊根據設計來開發站點的功能部分。

大多數時候，您可以在這裡混合使用。 您可以更改完成的順序，團隊仍然可以產生出色的結果。 但是，當您有來自不同機構的人員從事同一項目時，這可能會很困難，這是選擇可以處理所有事務的全方位機構的主要原因。

對於本文，我們將其從步驟5（設計）轉移到步驟6（開發）。 在這裡，可能會減慢開發速度並弄亂計劃過程中先前決定的內容，從而導致問題出在哪裡。

設計師應考慮的事項

“設計師應該知道如何編碼嗎？” 是很常見的，這是一個非常合理的問題。 如果設計師了解背後的代碼，並且理想情況下可以（在一定程度上）製作出這樣的代碼，則他/她可以幫助整個團隊加快完成項目。

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

1 –最後，所有內容最終都出現在瀏覽器中。

您在Figma，Adobe等中創建的任何設計都將顯示在瀏覽器中。 所有瀏覽器都使用一種稱為HTML / CSS的編程語言來呈現頁面。 如果使用Javascript，則可以使您的設計具有交互性。

需要注意的重要一點是，任何設計都應在HTML / CSS中可行。 只要技術允許，許多有才華的前端開發人員就可以實施幾乎所有內容。 但是請記住，–並非總是關於“您能做到嗎？”，而是關於“您能做好並使其可維護”。

2 –一致性

可維護性是成功項目的秘訣。 您不想花費數小時調整現有站點元素並添加新元素，因為代碼庫很亂。 有時，極其複雜的設計幾乎沒有可重用的組件，結果一團糟。

一些網頁設計師的技巧：

• 設計時要考慮組件。 現在，大多數工具都提供了此功能（Figma，Adobe XD，Sketch）。 強迫自己更多地使用它們，直到不再煩人為止。
• 很好地對齊元素。 相似的部分之間應具有相同的距離。 例如，保持80px是一個很好的分隔。 不要在此處使用80個，此處有86個，第三個為92個，另一個為78個來隨機分配節。 保持整潔。
• 使用網格！ 所有工具都提供網格系統。 理想情況下，選擇a12列網格。
• 在寬屏（1920像素或更高）上展示您的設計。 這有助於開發人員弄清楚每個部分及其背景如何工作。

3 –網站的權重

我們都想要一個快速的網站，對嗎？ 好吧，設計師也是其中的一部分。 考慮一下：一個包含8張巨大的高分辨率圖像，四個視頻和動畫元素的網站。 。 祝您按時優化，祝您好運。 儘管可行，但將需要更多的開發時間和技術來延遲加載圖像和視頻，優化上傳媒體，支持更好的圖像文件格式以及添加智能動畫方法以實現高性能。

如果開發人員不是非常有經驗或不擔心速度，那麼您的網站最終可能會在中低端的智能手機和筆記本電腦上表現得非常落後。

如何幫助開發商？

作為設計師，您要牢記的目標之一是在保持網站外觀的同時使開發更加輕鬆快捷。

您應該考慮在網絡上容易實現的功能。

• 盒子–全部都是盒子。 您可以圓一些角，是的，可以製作橢圓形（定義在一個盒子中）等等。 但是，當您選擇與佈局相互作用的更複雜的形狀時，事情就會變得很困難。
• 動畫準確的位置非常困難–假設您要單擊圖像，然後將其移動到文本的另一側？ 聽起來“容易”，但事實並非如此。 圖像將移動到的位置必須相對於站點容器保持不變，該位置會根據視口以及更多內容而改變。 然後，如果圖像較大，會發生什麼？
• 動畫框尺寸會影響佈局。 這是指對動畫中元素排序方式的任何更改。 這在瀏覽器上可能非常繁重，並且通常會導致巨大的滯後。

考慮不同的內容！

2倍於文本的外觀設計如何？ 還是作為肖像圖像而不是風景圖像？ 您永遠不知道編輯團隊將上傳什麼。 是否應該有寬高比甚至圖像邊緣之類的約束？ 如果可以，請在設計中進行展示。

使用Zeplin等工具提供您的設計

大多數設計工具（例如Figma或Adobe XD）都可以與開發人員“共享”設計。 從那裡，前端團隊可以檢查圖層的顏色，版式設置，間距和其他視覺屬性，這將使它們與設計緊密結合。

提供其他資源，例如字體或視頻

如果您在網站上使用了特定字體，則將其提供給開發人員。 如果它已獲得許可並可以通過特定的URL訪問，請確保也共享它。 對於開發人員來說，從第一天開始使用正確的字體就很重要。 如果有視頻，請確保也分享！ 這些視頻將在YouTube，Vimeo上還是自行託管？

不要追求“像素完美”

保持網站最終外觀與設計完全相同的想法是使開發團隊討厭您並且可以消除按時上線的任何機會的簡便方法。 在幾乎每種情況下，設計都不是完美的。 不可能100％確定在每個按鈕之前您都具有18px的間距嗎？ 而不是19px？ 還是每個標題都是38px而不是37px？ 或者，也許每個邊框都是#ddd，並且沒有一個黑色但具有15％的不透明度？

開發人員會四處散佈諸如此類的小錯誤，以保持整個站點的一致性。 它們內置遵循相同規則的組件。 只要在特定情況下沒有明顯的故意改變，就沒有理由不應該在各個方面都具有相同的元素。

最後，編碼網站應遵循設計的總體外觀。

在設計中留下評論

如果要使某個元素（如選項卡，手風琴，滑塊等）具有交互性，請花幾秒鐘的時間寫下該元素在台式機，移動設備上的工作方式以及可單擊的內容（一次交換）。

像用戶一樣思考

完成後，停一秒鐘，然後想像您正在使用該站點。 從頂部向下閱讀，向下滾動，單擊某處以查看更多。 工作流程中可能缺少什麼嗎？ 是否存在某個特定元素的視圖，該元素在用戶交互時會發生變化？ 如果這是真的，沒有設計，那麼您就讓開發人員去解決它，這給工作增加了壓力。如果期限緊迫，您可以與團隊共享常規文件，並讓他們知道幾乎沒有“狀態”視圖即將出現（請確保提及它們）。

回應性意見

在桌面上設計15個頁面，然後製作移動版本是艱鉅的任務。 在此之上做一個稍微不同的平板電腦版本更令人討厭。 這就是為什麼某些設計人員忽略將其添加的原因。但是，這意味著開發人員將不得不在代碼中進行添加。 並據此做出決策。 如果您看到復雜的元素，則即使您不瀏覽整個站點，也最好展示其平板電腦視圖。

綜上所述

設計師可以使開發人員的生活成為一場噩夢或非常好的體驗。 實現後者的關鍵是更好地了解所使用的技術，HTM1 / CSS，哪些交互式元素可行等。

如果您有幸成為開發人員的一員，並且擔心某些元素，請致電他們以查看所有內容。 他們一定會為您提供關於什麼是棘手的和什麼是容易的提示。