使用Coolsite360網(wǎng)站設(shè)計(jì)方面你有規(guī)則手冊(cè)嗎？有一些規(guī)則適用于幾乎每個(gè)網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目 - 讓我們稱(chēng)之為“網(wǎng)頁(yè)設(shè)計(jì)圣經(jīng)”。
無(wú)論網(wǎng)站有多大或多小，這些規(guī)則都是良好設(shè)計(jì)的基礎(chǔ)。如果您遵循這些基本準(zhǔn)則，并將它們作為您開(kāi)始的每個(gè)項(xiàng)目的思考的一部分，您將避免設(shè)計(jì)師偶然發(fā)現(xiàn)的許多陷阱！意派Coolsite360交互式線網(wǎng)頁(yè)編輯系統(tǒng)可以幫您最優(yōu)化頁(yè)面設(shè)計(jì) 并提供優(yōu)秀的模板，讓您的網(wǎng)頁(yè)脫穎而出
1你應(yīng)該保持一致
使設(shè)計(jì)盡可能簡(jiǎn)單，以便用戶(hù)進(jìn)行交互
一致的設(shè)計(jì)易于使用和理解設(shè)計(jì)。用戶(hù)參與和操作以及視覺(jué)效果在整個(gè)單一設(shè)計(jì)中的外觀和用途應(yīng)該相似。
這意味著按鈕顏色相同，并使用相同的懸停狀態(tài)來(lái)幫助用戶(hù)了解如何進(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è)用于復(fù)制塊的聲音，與整體美學(xué)相匹配。
所有這些一致性元素都有助于提高整體可用性，使設(shè)計(jì)盡可能輕松地與用戶(hù)進(jìn)行交互。
2你應(yīng)該使用空白
元素周?chē)念~外空間有助于創(chuàng)建分離并使其更易于閱讀。
沒(méi)有必要將每個(gè)元素塞進(jìn)滾動(dòng)上方的空間。使用空格來(lái)建立節(jié)奏和流程，創(chuàng)建視覺(jué)層次結(jié)構(gòu)并幫助用戶(hù)在設(shè)計(jì)中移動(dòng)。
如果內(nèi)容良好，則會(huì)滾動(dòng)。
實(shí)際上，空白可以通過(guò)將視線拉向屏幕來(lái)幫助鼓勵(lì)用戶(hù)操作。
隨著屏幕尺寸變小，空白更為重要。元素周?chē)念~外空間有助于創(chuàng)建分離并使其更易于閱讀。（想想輕松敲擊按鈕時(shí)有多余的空間是多么有益。）
不確定在設(shè)計(jì)中包含空格的位置？從這里開(kāi)始：
圍繞按鈕或其他互動(dòng)元素
作為行之間的行間距，使閱讀更容易
元素之間的東西是東方的區(qū)分，例如包裹在嵌入文本塊的照片中
在表單字段中，可以輕松點(diǎn)按移動(dòng)屏幕
圍繞您希望用戶(hù)關(guān)注的任何元素
3你應(yīng)該使用網(wǎng)格
網(wǎng)格是用戶(hù)體驗(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)格列。
網(wǎng)格只是您在設(shè)計(jì)過(guò)程中看到的內(nèi)容，如果您無(wú)法找到元素的放置或創(chuàng)建有組織的輪廓，網(wǎng)格可以成為一個(gè)完整的救星。
4.你不應(yīng)該忘記用戶(hù)模式
用戶(hù)以某種方式做事并期望從您的設(shè)計(jì)中獲得特定的東西。為了獲得盡可能多的成功，設(shè)計(jì)應(yīng)該使用普遍接受的用戶(hù)模式（設(shè)計(jì)問(wèn)題的重復(fù)解決方案），以便人們確切地知道設(shè)計(jì)的功能。
常見(jiàn)用戶(hù)模式包括：
表格中的信息順序，以姓名或電子郵件開(kāi)頭，以“提交”結(jié)尾
放置導(dǎo)航菜單
電子商務(wù)購(gòu)物車(chē)圖標(biāo)的位置和可點(diǎn)擊性
通知如何工作
搜索和聊天的圖標(biāo)，以及其他內(nèi)容
UI設(shè)計(jì)模式有很多用戶(hù)模式列表，適用于所有類(lèi)型的設(shè)計(jì)情境。
5.你應(yīng)該在UI動(dòng)作中使用相似性
網(wǎng)站設(shè)計(jì)中的每個(gè)元素都應(yīng)該像所有其他相同類(lèi)型的元素一樣工作。這些元素還應(yīng)具有視覺(jué)識(shí)別，以便用戶(hù)一眼就能知道它們是什么以及它們的作用。
有許多用戶(hù)界面操作可以嵌入到設(shè)計(jì)中，遵守格式塔相似性原則是必須的。將視覺(jué)元素和動(dòng)作分組以使其在視覺(jué)上可識(shí)別將有助于為用戶(hù)創(chuàng)建更好的整體體驗(yàn)。
6你應(yīng)該好好使用排版
從設(shè)計(jì)中退一步，看看字體是否易于從遠(yuǎn)處讀取。
你不必是一名大師，但它絕對(duì)有幫助。
構(gòu)成優(yōu)秀設(shè)計(jì)的很多東西都源于可讀性和易讀性。這些概念取決于您如何選擇和使用字體。
如有疑問(wèn)，請(qǐng)選擇簡(jiǎn)單的字體對(duì)，如serif和sans serif。從設(shè)計(jì)中退一步，看看字體是否易于從遠(yuǎn)處讀取。然后看一下小畫(huà)布上的字母，例如手機(jī)屏幕，以確保它一目了然也很容易閱讀。
嘗試在高對(duì)比度環(huán)境中使用類(lèi)型，例如深色背景上的燈光類(lèi)型或淺色背景上的暗色類(lèi)型，以便每個(gè)單詞都易于閱讀。
7.你不能忘記視網(wǎng)膜屏幕（Retina）
即使是最小的屏幕也可以渲染具有接近像素完美的元素和圖像。
您需要考慮如何處理圖像，圖標(biāo)和其他元素，以便無(wú)論屏幕大小如何，所有內(nèi)容都能呈現(xiàn)出精美的效果。在可能的情況下，使用矢量格式可能是理想的解決方案，這也是SVG越來(lái)越受歡迎的一個(gè)原因。
如果您的圖像的分辨率不適合常見(jiàn)的屏幕尺寸，請(qǐng)不要使用它。沒(méi)有圖片比壞圖像或像素化圖像更好。
8 你應(yīng)該誠(chéng)實(shí)面對(duì)客戶(hù)
您的設(shè)計(jì)應(yīng)該適用于您的小型企業(yè)，信息或品牌，并且在您的工作中是透明的。不要竊取設(shè)計(jì)或圖像，不要使用錯(cuò)誤的關(guān)鍵字來(lái)吸引流量，并忠實(shí)于您的內(nèi)容是誰(shuí)和什么。
由于網(wǎng)絡(luò)混亂，用戶(hù)希望與真實(shí)的設(shè)計(jì)進(jìn)行交互。誘騙用戶(hù)做某事或注冊(cè)產(chǎn)品或服務(wù)或只是誤導(dǎo)他們關(guān)于某個(gè)主題或信息應(yīng)該違反您的個(gè)人道德規(guī)范。不要從設(shè)計(jì)中接受期望這樣的項(xiàng)目。
9.你不能忽視無(wú)障礙
網(wǎng)絡(luò)應(yīng)盡可能多的人使用。雖然可能聽(tīng)起來(lái)很難確保設(shè)計(jì)的可訪問(wèn)性，但它并不像您想象的那么復(fù)雜。
谷歌有一個(gè)很好的網(wǎng)站可訪問(wèn)性指南，它定義如下：
從廣義上講，當(dāng)我們說(shuō)網(wǎng)站是可訪問(wèn)的時(shí)，我們的意思是該網(wǎng)站的內(nèi)容可用，并且其功能可由任何人操作。作為開(kāi)發(fā)人員，很容易假設(shè)所有用戶(hù)都可以查看和使用鍵盤(pán)，鼠標(biāo)或觸摸屏，并且可以像您一樣與頁(yè)面內(nèi)容進(jìn)行交互。這可以帶來(lái)適合某些人的體驗(yàn)，但會(huì)產(chǎn)生一些問(wèn)題，從簡(jiǎn)單的煩惱到其他人的炫耀。
因此，可訪問(wèn)性指的是可能超出“典型”用戶(hù)范圍的用戶(hù)的體驗(yàn)，他們可能以不同于您期望的方式訪問(wèn)或交互事物。具體而言，它涉及正在經(jīng)歷某種類(lèi)型的損傷或殘疾的用戶(hù) - 并且請(qǐng)記住，該經(jīng)歷可能是非物質(zhì)的或臨時(shí)的。
良好設(shè)計(jì)的許多原則，例如尺寸，對(duì)比度和空間，有助于整體可訪問(wèn)性。
WebAIM有一個(gè)清單以及其他工具，可幫助您確定您的設(shè)計(jì)是否可訪問(wèn)。該清單涵蓋了與可訪問(wèn)性相關(guān)的四個(gè)方面：設(shè)計(jì)是否可感知，可操作，易懂且可靠？
10.你應(yīng)該做出反應(yīng)
它應(yīng)該在2018年不言而喻，但您的網(wǎng)站必須具有響應(yīng)性。這包括從文本到圖像到按鈕到整個(gè)框架的每個(gè)元素。
每個(gè)設(shè)計(jì)都必須適用于每個(gè)設(shè)備。期。
結(jié)論
一套完整的規(guī)則可以幫助您更快地進(jìn)入設(shè)計(jì)項(xiàng)目并更加一致地工作。請(qǐng)注意，這些命令都不能告訴您項(xiàng)目的外觀; 它們植根于您如何概述和創(chuàng)建每個(gè)網(wǎng)站的理論。
意派Coolsite360交互式線網(wǎng)頁(yè)編輯系統(tǒng)
“創(chuàng)意不該受技術(shù)束縛，交互可以變得簡(jiǎn)單有趣”