改善網(wǎng)站設計的技巧

在建立網(wǎng)站的過程中， 有幾個階段。 如果我們要簡化它并查看標準網(wǎng)站， 階段將是：

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

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

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

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

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

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

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

可維護性是成功項目的秘訣。 您不想花幾個小時調(diào)整現(xiàn)有的網(wǎng)站元素并添加新的元素，因為代碼庫很亂。 有時，極其復雜的設計幾乎沒有可重用的組件，結(jié)果一團糟。

一些網(wǎng)頁設計師的技巧：

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

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

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

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

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

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

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

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

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

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

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

到底， 編碼的網(wǎng)站應遵循設計的一般外觀。

如果您希望某個元素像標簽一樣具有交互性， 手風琴 滑塊之類的東西， 花幾秒鐘寫下它在臺式機上的工作方式， 移動和可點擊的內(nèi)容 應該交換一次。

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

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

設計師可以使開發(fā)人員的生活成為一場噩夢或非常好的體驗。 實現(xiàn)后者的關鍵是更好地了解所使用的技術， HTMl / CSS， 哪些互動元素可行， 等等。

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

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

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