設計網站的重要要素
無論您使用哪種類型的網站設計方法建設網站,都需要確保所有內容都經過深思熟慮。讓我們考慮需要密切關注的用戶界面的關鍵元素。
格
幾乎每個網站設計,無論是非對稱的還是混亂的,都具有核心網格系統,該系統通過對齊和定位來完成繁重的工作。網格是大多數項目的基礎。它們確保行為的穩定性,靈活性和可預測性。
網絡上的預制網格系統種類繁多。曾經有960克的統治;但是,越來越多的設計師選擇具有各種有用實用程序的靈活解決方案,例如?Bootstrap。
根據項目,您可以選擇一個或另一個選項。盡管Bootstrap在整個Web上得到了廣泛使用,但在某些情況下,您可能會享受到鮮為人知的解決方案的好處,因為它們重量輕且無麻煩。
有關網格的更多信息,請查看基于網格的設計理論和有用的響應式CSS網格框架。
內容
您的網站只不過是為用戶提供信息并帶給正確的信息。因此,內容具有最高優先級。要使其執行任務,請遵循以下基本提示:
格式化所有內容。格式化介于混亂和良好的可讀性之間。這樣可以確保您的消息已傳遞。因此,應該深思熟慮。
根據用戶的喜好和瀏覽習慣調整寫作風格。使用可以理解的語言。
直截了當。使用簡短的短語。
避免使用長文本塊。分類內容。如果您別無選擇,請添加圖像,標題和CSS樣式,以將統一流程分解為可消化的塊。
避免右對齊和對齊的文本。堅持到左邊。
使用空格加強視覺層次結構。
呼吁采取行動
即使您不追求營銷目標,也有機會至少擁有一個號召性用語按鈕。
每個網站設計都有其使命。您可能希望收集電子郵件以發送定期更新,或者可能希望通過表單與讀者進行交流,或者可能希望獲得反饋或評論。沒有按鈕就無法實現。它們是現代用戶界面的基本元素。
為了使它們為您工作,請遵循以下基本原則:
讓他們脫穎而出。
因為習慣了人們習慣將它們制成帶有圓角的矩形。
使用動作詞。
使用安全的顏色。藍色,綠色和紅色是CTA的流行選擇。
將CSS樣式添加到各種狀態。
在按鈕周圍添加空間。
有關更多信息,請查看我們的按鈕指南“完美CTA按鈕的終極UX設計”。
鏈接
與按鈕非常相似,超鏈接對于用戶界面至關重要。它們是通往重要頁面的小地方。因此,它們應該突出,有意義且格式正確。要使鏈接可用,請遵循以下提示:
遵守流行的慣例。每個人都知道鏈接為藍色且帶有下劃線。因此,請勿混淆訪客。
避免使用通用說明和短語。使它們有意義。使用動作詞。
使它們簡潔而直接。避免冗余。
在同一瀏覽器中打開鏈接,以便用戶可以通過“后退”按鈕返回。如果鏈接指向PDF文件或隨附的文檔,請在新選項卡中將其打開。
在視覺上區分鏈接和錨點,以避免混淆。
使用鼠標光標添加視覺提示。
添加懸停效果以使交互設計更加直觀。
導航
即使導航只是一個執行良好的列表,它仍然可以具有有助于用戶體驗的吸引人的功能。它甚至可以是趨勢發起者。還記得五年多前的漢堡按鈕席卷網絡嗎?
實際上,如今,六種流行的菜單為網站設計增添了時尚感。
整潔優雅的標題導航
光滑的滑出式導航隱藏在漢堡包按鈕內
無所不包的多級頁腳導航
難以錯過的全屏菜單
精致的超窄邊欄導航
垂直的節奏和裝飾線條使微妙的周邊導航更加生動
除這些類型外,設計師還提出了一些獨特的想法,例如基于圓圈的導航或具有熱點的交互式英雄區域。但是,無論您采用哪種想法,都必須記住導航是用戶體驗的關鍵要素。這是決定用戶留下還是離開的決勝局。
使它干凈整潔。
提供良好的對比。
在整個網站上保持一致。
包括不超過7個項目。
僅顯示重要鏈接。
將其粘貼到頂部。
始終添加指向首頁的鏈接。
使其響應速度快且移動友好。
確保整個布局的每個部分都可用。
顏色
每個人都知道色彩心理,以及每個色調對人類行為的影響。精心設計的調色板可以提高公司網站的效率。它可以營造氣氛,使每個人保持適當的心情,增強信息,增加信任度,甚至推動轉化。根據陰影的不同,某些顏色可能會使設計更生動,或者相反,它們會完全破壞它。因此,需要仔細計劃。
要在設計中添加色彩,請問自己幾個重要的問題。
您的品牌顏色應該如何評價您?
您的品牌是主動還是被動?如果要顯得更活躍,則應堅持使用較亮的選項。
您想讓人們對某事感到興奮嗎?如果是,那么您需要保持更有活力的音調。
你的聽眾是誰?現代色彩非常適合初創企業。傳統色彩非常適合利用穩定性和壽命的企業。
視覺效果
您能想象一個沒有圖像的在線頁面嗎?在網站設計方面,視覺效果與文字并存。因此,應深思熟慮使用圖像,插圖,圖標和視頻。
請遵循這些簡單的做法。
使用具有意義的圖像。甚至用于裝飾英雄區域的裝飾選項也應支持品牌,并加強網站背后的主要信息。
使用自定義和個性化的視覺效果,因為通用圖像可能會將訪問者拒之門外。
使視覺效果靈敏且移動友好。確保它們在所有瀏覽器和屏幕尺寸上均顯示良好。最重要的是,它們在視網膜屏幕上看起來應該不錯。
圖像,圖標,甚至動畫gif都應該可以訪問。
請記住,圖像和視頻是天然的磁鐵。因此,請確保它們不會使重要信息顯得光彩奪目。
在視覺輔助和文字之間取得平衡。
版式
由于使用了@ font-face嵌入技術,免費的Google目錄以及一些優質但具有成本效益的字體服務(如Typekit),設計師對字體的選擇大為寵愛。
有很多很棒的網絡安全字體,以至于沒有全部使用它們是一種真正的誘惑。但是,在這里您需要謹慎行事并保持合理。通常的做法是在一頁中使用不超過三種字體。
造成這種情況的主要原因是,一頁中字體的多樣性使事情顯得混亂和混亂。每個字體都有一種個性,具有特定的心情,語氣和魅力?;旌献煮w是一門藝術。它要求在類型族之間找到平衡,以確保最佳的可讀性并創建統一的體驗。
為了安全起見,您可以使用無襯線字體和襯線字體的匹配組合。通常,無襯線用于正文,而襯線字體用于標題。盡管根據您的項目,您可以交換它們。
如果您想脫離常規,使用其他字體系列,請牢記以下規則:
避免使用相同類別的字體,尤其是裝飾性過強的字體。
為每種字體分配一個角色,以定義印刷層次結構。
提供對比。
創建字體粗細的明顯差異。
選擇具有高度可讀字形的字體。
如果對要混合的字體有疑問,請堅持使用一種。一個字體系列永遠不會出錯。您所需要做的就是發揮尺寸,重量和風格。它將使事情變得簡單,簡約,和諧和令人賞心悅目。