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