網(wǎng)站設(shè)計(jì)必須遵守的10大規(guī)則

在網(wǎng)站設(shè)計(jì)方面你有規(guī)則手冊(cè)嗎？有一些規(guī)則適用于幾乎所有的網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目 - 我們稱之為“網(wǎng)頁(yè)設(shè)計(jì)規(guī)則”。

無(wú)論網(wǎng)站多大或多小，這些規(guī)則都是良好設(shè)計(jì)的基礎(chǔ)。如果您遵循這些基本指導(dǎo)方針，并將其納入您開(kāi)始的每個(gè)項(xiàng)目的思考過(guò)程中，那么您將避免許多設(shè)計(jì)師可能陷入的陷阱！

1.你會(huì)一致

讓設(shè)計(jì)盡可能簡(jiǎn)單，以便用戶與之交互
一致的設(shè)計(jì)易于使用和理解設(shè)計(jì)。用戶參與和行動(dòng)以及視覺(jué)效果在整個(gè)單一設(shè)計(jì)中的外觀和使用應(yīng)該相似。

這意味著按鈕顏色相同，并且使用相同的懸停狀態(tài)來(lái)幫助用戶了解如何進(jìn)行交互，標(biāo)題的大小相同，并在整個(gè)設(shè)計(jì)中使用相同的字體，并且諸如顏色之類的元素遵循可識(shí)別并與之關(guān)聯(lián)的調(diào)色板品牌。

其他視覺(jué)元素也應(yīng)遵循一致的風(fēng)格，以及圖標(biāo)或攝影，視頻或插圖等元素的風(fēng)格和使用計(jì)劃。該設(shè)計(jì)應(yīng)該有一個(gè)用于與整體美學(xué)相匹配的復(fù)制塊的聲音。

所有這些一致性元素都有助于提高整體可用性，使設(shè)計(jì)盡可能方便用戶進(jìn)行交互。

2.你要用空白

元素周?chē)念~外空間可以幫助創(chuàng)建分離并使其更易于閱讀。
沒(méi)有必要將每個(gè)元素都塞進(jìn)滾動(dòng)條上方的空間。使用空格建立節(jié)奏和流程，創(chuàng)建視覺(jué)層次結(jié)構(gòu)并幫助用戶在設(shè)計(jì)中移動(dòng)。

如果內(nèi)容是好的，他們將滾動(dòng)。

而空白實(shí)際上可以通過(guò)將視線拉到屏幕上來(lái)幫助鼓勵(lì)用戶行為。

隨著屏幕尺寸變小，空白顯得更加重要。元素周?chē)念~外空間可以幫助創(chuàng)建分離并使其更易于閱讀。（考慮輕松點(diǎn)擊按鈕時(shí)多余的空間可以帶來(lái)多大的益處。）

不確定在設(shè)計(jì)中包含空白的地方？從這里開(kāi)始：

圍繞按鈕或其他交互元素
由于線條之間的線條間距使閱讀更容易
元素之間的東西是分開(kāi)的，例如將文本塊中嵌入的照片包裹起來(lái)
在表單字段中，以便在移動(dòng)屏幕上輕松點(diǎn)按
圍繞您希望用戶關(guān)注的任何元素

3.你會(huì)使用網(wǎng)格

網(wǎng)格是用戶體驗(yàn)的基礎(chǔ)。當(dāng)您使用網(wǎng)格進(jìn)行設(shè)計(jì)時(shí)，最終網(wǎng)站會(huì)更加精確，一致，并且將元素按照視覺(jué)上的順序排列。

網(wǎng)格既是水平的也是垂直的，盡管最著名的網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)格可能是用于對(duì)齊元素的12列垂直網(wǎng)格。

只有在設(shè)計(jì)過(guò)程中才會(huì)看到網(wǎng)格，如果您在查找元素的位置或創(chuàng)建有組織的大綱時(shí)遇到問(wèn)題，網(wǎng)格可能會(huì)成為完整的救星。

4.你不會(huì)忘記用戶模式

用戶以某種方式做事，期望從設(shè)計(jì)中獲得具體的東西。為了獲得盡可能多的成功，設(shè)計(jì)應(yīng)該使用普遍接受的用戶模式（設(shè)計(jì)問(wèn)題的循環(huán)解決方案），以便人們確切知道設(shè)計(jì)的功能。

常見(jiàn)的用戶模式包括：

表單中的信息順序，以名稱或電子郵件開(kāi)始并以“提交”結(jié)尾
導(dǎo)航菜單的放置
電子商務(wù)的購(gòu)物車(chē)圖標(biāo)的位置和可點(diǎn)擊性
通知如何工作
搜索和聊天的圖標(biāo)等等
用戶界面設(shè)計(jì)模式在所有類型的設(shè)計(jì)情況下都有很長(zhǎng)的用戶模式列表。

5.在UI操作中使用相似性

網(wǎng)站設(shè)計(jì)中的每個(gè)元素都應(yīng)該像其他所有類型的元素一樣工作。這些元素還應(yīng)具有視覺(jué)識(shí)別，以便用戶一眼就能知道他們是什么以及他們做了什么。

有許多用戶界面操作可以嵌入到設(shè)計(jì)中，遵循格式塔相似性原則是必須的。將視覺(jué)元素和操作分組以便它們?cè)谝曈X(jué)上可識(shí)別將有助于為用戶創(chuàng)造更好的整體體驗(yàn)。

6.你應(yīng)該使用印刷術(shù)

從設(shè)計(jì)中退出，看看字母是否易于遠(yuǎn)距離閱讀。
你不必是一個(gè)主要的印刷工，但它絕對(duì)有幫助。

如此多的構(gòu)成優(yōu)秀設(shè)計(jì)的根源在于可讀性和易讀性。這些概念取決于你如何選擇和使用字體。

如果有疑問(wèn)，請(qǐng)選擇簡(jiǎn)單的字體對(duì)，如serif和sans serif。從設(shè)計(jì)中退出，看看字母是否易于遠(yuǎn)距離閱讀。然后看一下手機(jī)屏幕等小畫(huà)布上的字母，以確保在那里一目了然也很容易閱讀。

嘗試在高對(duì)比度環(huán)境中使用類型，例如在深色背景上使用淺色類型或在淺色背景上使用深色類型，以便每個(gè)單詞都易于閱讀。

7.你不會(huì)忘記視網(wǎng)膜屏幕

即使是最小的屏幕也可以使元素和圖像逼近像素好。

您需要考慮如何處理圖像，圖標(biāo)和其他元素，以便無(wú)論屏幕大小如何，都能呈現(xiàn)精美的圖像。如果可能的話，使用矢量格式可能是理想的解決方案，這也是SVG越來(lái)越受歡迎的原因之一。

如果您沒(méi)有具有適合普通屏幕尺寸的分辨率的圖像，請(qǐng)不要使用它。根本沒(méi)有圖像比壞或像素圖像更好。

8.你應(yīng)該誠(chéng)實(shí)

您的設(shè)計(jì)應(yīng)該忠于您的小型企業(yè)，信息或品牌，并且對(duì)您的工作透明。不要竊取設(shè)計(jì)或圖像，也不要使用虛假關(guān)鍵字來(lái)增加流量，并忠實(shí)于您的內(nèi)容。

隨著網(wǎng)絡(luò)的混亂，用戶希望與真實(shí)的設(shè)計(jì)交互。誘騙用戶做某件事或注冊(cè)產(chǎn)品或服務(wù)或者誤導(dǎo)他們關(guān)于主題或信息應(yīng)該違反您的個(gè)人道德規(guī)范。不要接受設(shè)計(jì)中期望的項(xiàng)目。

9.你不會(huì)忽略可訪問(wèn)性

網(wǎng)絡(luò)應(yīng)盡可能多的人使用。雖然聽(tīng)起來(lái)很難確保設(shè)計(jì)是可訪問(wèn)的，但并不像您想象的那么復(fù)雜。

Google對(duì)網(wǎng)站輔助功能有很好的指導(dǎo)，它定義如下：

一般來(lái)說(shuō)，當(dāng)我們說(shuō)一個(gè)網(wǎng)站是可訪問(wèn)的，我們的意思是說(shuō)，該網(wǎng)站的內(nèi)容是可用的，并且它的功能可以由任何人操作。作為開(kāi)發(fā)人員，很容易假設(shè)所有用戶都可以看到并使用鍵盤(pán)，鼠標(biāo)或觸摸屏，并且可以按照您的方式與頁(yè)面內(nèi)容進(jìn)行交互。這可以產(chǎn)生一種對(duì)某些人來(lái)說(shuō)很好的體驗(yàn)，但會(huì)產(chǎn)生一些問(wèn)題，從簡(jiǎn)單的煩惱到其他人的炫耀。

那么，可訪問(wèn)性是指可能在“典型”用戶的狹窄范圍之外的用戶的體驗(yàn)，他們可能以不同于預(yù)期的方式訪問(wèn)或交互事物。具體而言，它涉及正在經(jīng)歷某種類型的損害或殘疾的用戶 - 并且要記住，該經(jīng)歷可能是非物質(zhì)的或臨時(shí)的。

良好設(shè)計(jì)的許多原則（例如尺寸，對(duì)比度和空間）有助于實(shí)現(xiàn)整體可訪問(wèn)性。

WebAIM有一個(gè)清單以及其他工具，可幫助您確定您的設(shè)計(jì)是否可訪問(wèn)。該清單涵蓋了與可訪問(wèn)性有關(guān)的四個(gè)方面：設(shè)計(jì)是否可感知，可操作，可以理解和強(qiáng)大？

10.你應(yīng)該回應(yīng)

它應(yīng)該在2018年不言而喻，但您的網(wǎng)站必須具有響應(yīng)能力。這包括從文本到圖像，按鈕到整體框架的每個(gè)元素。

每個(gè)設(shè)計(jì)都必須適用于每個(gè)設(shè)備。期。

結(jié)論
一套可靠的規(guī)則可以幫助您更快地進(jìn)入設(shè)計(jì)項(xiàng)目并更加持續(xù)地工作。請(qǐng)注意，這些誡命中沒(méi)有一條告訴你一個(gè)項(xiàng)目應(yīng)該如何看待; 它們植根于您如何勾畫(huà)和創(chuàng)建每個(gè)網(wǎng)站的理論。

網(wǎng)頁(yè)標(biāo)題：網(wǎng)站設(shè)計(jì)必須遵守的10大規(guī)則
網(wǎng)頁(yè)網(wǎng)址：http://muchs.cn/news/160689.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)