作為一位前端工程師，我的工作是為網頁設計師的網站設計作品達到最佳的用戶體驗，使用戶瀏覽該網站設計時能瀏覽順暢。前端工程師不是網頁設計師，不管我們寫了多少前端代碼來簡潔地表達一個動效，或是為了吸引更廣泛的受眾用戶而精心制作的用戶體驗，但如果遇到糟糕的設計這一切都會化為無。

網頁設計師是最了解如何為用戶參與和轉換進行設計的人，因此，你需要在處理視覺作品的同時，也能自如地實現用戶體驗。

1、不要亂用顏色

有很多很酷的方法來使用顏色，為網站創造一個難忘的外觀?？梢钥聪逻@個案例，這是波士頓紅燈籠餐廳的網站：

該網站充分利用了廣闊的開放空間來吸引人們對頁面的關注，而且，雖然標志是用裝飾性的紅色字體，但真正重要的是黑白相間?？偟膩碚f，這是一個結構優美且易于閱讀的網站頁面。

現在，讓我們來看看洲際酒店：

這個頁面上的字體有很多不好的選擇。

對于初學者來說，這么大的字體太薄了。此外，ecru背景上的黑色字體也不能很好地表達（同樣，這可能是由于字體面太短）。而在類似顏色的背景下使用超鏈接顏色則是更糟糕的選擇。

知道設計師想把品牌的顏色融入到頁面中，但是背景太花哨了。其實白色背景、黑色字體和品牌超鏈接顏色就足夠了。

2、保持對稱性

在很多情況下，文案并不需要對稱。在合理的范圍內，段落和頁面可以運行多久就運行多久。然而，在網站的某一特定部分，對稱性非常重要，不幸的是，并沒有很多網頁設計師注意到這一點。更糟的是，有些設計師太害怕了，不敢做任何改變。

意思是：

這是WordStream網站上的一組并排的功能說明：

很熟悉這個吧？您希望在網絡頁面上包含許多特性、服務或好處。但是，您不希望將它們作為垂直對齊的純文本列出。那很無聊，而且占用太多空間。所以，你會想，我要把它變成一個多列元素，里面編織著圖形。

在WordStream的情況下，您已經成功了。一切都是平衡：

插圖

標題文本

Subheaders

講解員的文本

商品交易顧問基金

現在，看看Pixability：

它遵循相同的基本概念，然而，第一點太長了。這不僅會分散注意力，還會導致大量難看的空白。

3、分解段落

一般來說，您永遠不希望一個段落在網絡頁面上超過5行。再長一點，你的讀者就會失去注意力。同樣的情況也會發生在你把太多的段落一個接一個的放置的時候。

你的讀者需要休息。

雖然作者應該決定在文本中什么地方應該停頓，但是你可以做一些其他的事情來打破一段又一段的單調。

以發貨人建筑公司為例，該公司是如何講述其業務故事的：

在被創造性的元素分解之前，從來不會有超過兩個段落放在一起。在本例中，公司的歷史被劃分為邏輯塊，關鍵里程碑有自己的專用框。這看起來很棒。

與Bright Horizons網站形成對比

通常情況下，完全支持使用公告點，因為它們有助于分解大塊文本。不過，在這種情況下，它們做得不是很好。首先，每一個要點都太長。此外，粗體的字體是壓倒性的。

為了解決這個問題，設計師可以采用類似于Consigli Construction的方法，給每個bullet設置自己的專用塊?；蛘咴O計師和作者可以合作去掉多余的部分。例如，該列表可以實際縮短為：

指定的主要照顧者；

個性化護理計劃；

感官豐富的空間和柔軟的地方；

安全、保障和清潔措施。

4、帶有標題標簽的空間意識

從主頁到博客文章，標題標簽是網站每個頁面的重要組成部分。

從結構上講，它們有助于創建主題的層次結構，增強讀者瀏覽頁面的能力，并在無需閱讀的情況下了解頁面的內容。此外，谷歌機器人使用頭標記獲取頁面的關鍵點，并根據其匹配用戶搜索查詢的程度對其進行排序。

也就是說，您應該注意頭文件占用的空間。一般來說，它們應該不超過一行。

以奧德利旅游公司為例：

這里有兩個頭標記，它們都保持在合理的長度，同時仍然能夠準確地理解要點。

然后，你有一個來自Bevi博客的例子：

這是頭標記過多的一個明顯例子。

但問題不只是標題文本的大小，它是語句本身的長度。與其泄露接下來的文本將告訴讀者什么，不如這樣：“使用任務管理工具管理項目和可交付成果”，或者更好，“使用任務管理工具”。

網頁設計師可以做什么來提高網站的復制

雖然想說，編寫可轉換的用戶體驗是前端工程師100%的責任，但是有一些清楚的例子說明設計是如何阻礙這一過程的。更重要的是，一個網站應該是所有相關方的合作。

如果您不確定您的設計選擇將如何影響用戶體驗的質量，請征求前端工程師的意見，或者你的項目經理，他們新鮮的眼睛也許能捕捉到一些你無法捕捉到的東西。