使用Coolsite360網(wǎng)站設計方面你有規(guī)則手冊嗎？有一些規(guī)則適用于幾乎每個網(wǎng)頁設計項目 - 讓我們稱之為“網(wǎng)頁設計圣經(jīng)”。

無論網(wǎng)站有多大或多小，這些規(guī)則都是良好設計的基礎。如果您遵循這些基本準則，并將它們作為您開始的每個項目的思考的一部分，您將避免設計師偶然發(fā)現(xiàn)的許多陷阱！意派Coolsite360交互式線網(wǎng)頁編輯系統(tǒng)可以幫您最優(yōu)化頁面設計 并提供優(yōu)秀的模板，讓您的網(wǎng)頁脫穎而出

1你應該保持一致

使設計盡可能簡單，以便用戶進行交互

一致的設計易于使用和理解設計。用戶參與和操作以及視覺效果在整個單一設計中的外觀和用途應該相似。

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

其他視覺元素也應遵循一致的風格，以及圖標或攝影，視頻或插圖等元素的風格和使用計劃。設計應該有一個用于復制塊的聲音，與整體美學相匹配。

所有這些一致性元素都有助于提高整體可用性，使設計盡可能輕松地與用戶進行交互。

2你應該使用空白

元素周圍的額外空間有助于創(chuàng)建分離并使其更易于閱讀。

沒有必要將每個元素塞進滾動上方的空間。使用空格來建立節(jié)奏和流程，創(chuàng)建視覺層次結(jié)構(gòu)并幫助用戶在設計中移動。

如果內(nèi)容良好，則會滾動。

實際上，空白可以通過將視線拉向屏幕來幫助鼓勵用戶操作。

隨著屏幕尺寸變小，空白更為重要。元素周圍的額外空間有助于創(chuàng)建分離并使其更易于閱讀。（想想輕松敲擊按鈕時有多余的空間是多么有益。）

不確定在設計中包含空格的位置？從這里開始：

圍繞按鈕或其他互動元素

作為行之間的行間距，使閱讀更容易

元素之間的東西是東方的區(qū)分，例如包裹在嵌入文本塊的照片中

在表單字段中，可以輕松點按移動屏幕

圍繞您希望用戶關(guān)注的任何元素

3你應該使用網(wǎng)格

網(wǎng)格是用戶體驗的基礎。當您使用網(wǎng)格進行設計時，最終的網(wǎng)站會更精確，更一致，并且元素按照具有視覺意義的順序放置。

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

網(wǎng)格只是您在設計過程中看到的內(nèi)容，如果您無法找到元素的放置或創(chuàng)建有組織的輪廓，網(wǎng)格可以成為一個完整的救星。

4.你不應該忘記用戶模式

用戶以某種方式做事并期望從您的設計中獲得特定的東西。為了獲得盡可能多的成功，設計應該使用普遍接受的用戶模式（設計問題的重復解決方案），以便人們確切地知道設計的功能。

常見用戶模式包括：

表格中的信息順序，以姓名或電子郵件開頭，以“提交”結(jié)尾

放置導航菜單

電子商務購物車圖標的位置和可點擊性

通知如何工作

搜索和聊天的圖標，以及其他內(nèi)容

UI設計模式有很多用戶模式列表，適用于所有類型的設計情境。

5.你應該在UI動作中使用相似性

網(wǎng)站設計中的每個元素都應該像所有其他相同類型的元素一樣工作。這些元素還應具有視覺識別，以便用戶一眼就能知道它們是什么以及它們的作用。

有許多用戶界面操作可以嵌入到設計中，遵守格式塔相似性原則是必須的。將視覺元素和動作分組以使其在視覺上可識別將有助于為用戶創(chuàng)建更好的整體體驗。

6你應該好好使用排版

從設計中退一步，看看字體是否易于從遠處讀取。

你不必是一名大師，但它絕對有幫助。

構(gòu)成優(yōu)秀設計的很多東西都源于可讀性和易讀性。這些概念取決于您如何選擇和使用字體。

如有疑問，請選擇簡單的字體對，如serif和sans serif。從設計中退一步，看看字體是否易于從遠處讀取。然后看一下小畫布上的字母，例如手機屏幕，以確保它一目了然也很容易閱讀。

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

7.你不能忘記視網(wǎng)膜屏幕（Retina）

即使是最小的屏幕也可以渲染具有接近像素完美的元素和圖像。

您需要考慮如何處理圖像，圖標和其他元素，以便無論屏幕大小如何，所有內(nèi)容都能呈現(xiàn)出精美的效果。在可能的情況下，使用矢量格式可能是理想的解決方案，這也是SVG越來越受歡迎的一個原因。

如果您的圖像的分辨率不適合常見的屏幕尺寸，請不要使用它。沒有圖片比壞圖像或像素化圖像更好。

8 你應該誠實

您的設計應該適用于您的小型企業(yè)，信息或品牌，并且在您的工作中是透明的。不要竊取設計或圖像，不要使用錯誤的關(guān)鍵字來吸引流量，并忠實于您的內(nèi)容是誰和什么。

由于網(wǎng)絡混亂，用戶希望與真實的設計進行交互。誘騙用戶做某事或注冊產(chǎn)品或服務或只是誤導他們關(guān)于某個主題或信息應該違反您的個人道德規(guī)范。不要從設計中接受期望這樣的項目。

9.你不能忽視無障礙

網(wǎng)絡應盡可能多的人使用。雖然可能聽起來很難確保設計的可訪問性，但它并不像您想象的那么復雜。

谷歌有一個很好的網(wǎng)站可訪問性指南，它定義如下：

從廣義上講，當我們說網(wǎng)站是可訪問的時，我們的意思是該網(wǎng)站的內(nèi)容可用，并且其功能可由任何人操作。作為開發(fā)人員，很容易假設所有用戶都可以查看和使用鍵盤，鼠標或觸摸屏，并且可以像您一樣與頁面內(nèi)容進行交互。這可以帶來適合某些人的體驗，但會產(chǎn)生一些問題，從簡單的煩惱到其他人的炫耀。

因此，可訪問性指的是可能超出“典型”用戶范圍的用戶的體驗，他們可能以不同于您期望的方式訪問或交互事物。具體而言，它涉及正在經(jīng)歷某種類型的損傷或殘疾的用戶 - 并且請記住，該經(jīng)歷可能是非物質(zhì)的或臨時的。

良好設計的許多原則，例如尺寸，對比度和空間，有助于整體可訪問性。

WebAIM有一個清單以及其他工具，可幫助您確定您的設計是否可訪問。該清單涵蓋了與可訪問性相關(guān)的四個方面：設計是否可感知，可操作，易懂且可靠？

10.你應該做出反應

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

每個設計都必須適用于每個設備。期。

結(jié)論

一套完整的規(guī)則可以幫助您更快地進入設計項目并更加一致地工作。請注意，這些命令都不能告訴您項目的外觀; 它們植根于您如何概述和創(chuàng)建每個網(wǎng)站的理論。

意派Coolsite360交互式線網(wǎng)頁編輯系統(tǒng)

“創(chuàng)意不該受技術(shù)束縛，交互可以變得簡單有趣”