<nav id="uo4gs"></nav>
  • <menu id="uo4gs"><u id="uo4gs"></u></menu>
  • 如何創建網頁設計風格指南?
    來源:網絡 日期:2021-02-02 09:59 作者:小編.h

    如何創建網頁設計風格指南?

    如果您的網站需要經常更新,或者很多人需要維護或更新,最好使用網頁設計風格指南。這有助于確保與您的網站打交道的每個人都處于相同的標準之下,并且知道如何使一切保持一致。然而,到底什么是網頁設計風格指南呢?這是什么意思?以及如何給自己創造一個。這些是我們在這里要回答的問題。

    什么是網頁設計風格指南?

    在詳細介紹如何創建樣式指南之前,讓我們花一些時間來探索它們的實際意義。網站設計風格指南是網站中的一個頁面,它列出了為網站的其余部分創建新頁面或文章的所有內容。這包括商標圖形、徽標、字體和字體大小、文本和背景顏色,以及與網站更新和內容創建相關的任何其他內容。

    當你的網站建設團隊有多個設計師或開發人員時,這一點尤其重要。這確保了每個人都在相同的規范下工作。此外,它實際上可以簡化開發,因為您可以參考這個樣式指南來更快、更高效地創建新頁面。

    如何創建網頁設計風格指南

    以下是創建自己的網頁設計風格指南所需的步驟:

    1.熟悉品牌

    無論你是為自己的網站還是為其他網站創建風格指南,同樣的原則仍然適用:你需要花一些時間來評估品牌的意義。這意味著了解你的目標受眾,了解公司的價值,并對如何生動地表達有一個堅實的想法。如果公司在過去對一些設計進行過A/B測試,現在是時候利用這些信息來創建一個更強大、更有效的風格指南了。

    2.選擇一種顏色

    在評價品牌時,你需要考慮顏色。如果公司已經有了調色盤,他們可以配合——完美。在樣式指南中添加顏色的十六進制代碼。確保這些信息被分解成文本、鏈接、懸停鏈接、背景、按鈕等類別。確定應該在哪里使用哪種顏色。

    3.選擇并識別布局

    除了顏色,你還需要知道使用哪些字體(以及在哪里使用)。在您的網頁設計風格指南中清楚地標識字體名稱、大小和行高。這使得未來的設計師很容易重建網站的外觀。更好的是,創建一個Photoshop模板,其中這些元素被預設或標識為文件本身中的注釋。

    你應該盡一切努力消除這里的猜測。

    4.建立內容網格

    您應該添加到網頁設計風格指南中的另一件事是創建內容網格。這是確定頁面和博文布局的理想方式。在文本中應該放置圖片和圖形的位置顯示它們。你真的需要這樣做,才能理解如何分離內容。

    現在,博客和頁面模板可以解決其中一些問題。即使如此,將這些信息包含在樣式指南中仍然是一個好主意。

    5.設置照片規格

    你可以做的另一件事是設置照片規格。例如,許多網站對博客帖子中包含的圖像應用濾鏡或效果。因此,如果你想確保管理網站內容的人知道如何使所有內容一致,你需要在網頁設計風格指南中指出這些細節。

    確定每個圖像應該遵循的規格,包括圖像高度、寬度、濾色器、不透明度以及是否應該添加文本。如果要在繪圖中包含文本,請確保字體、樣式、大小和顏色規格也已標記(如上所述)。

    6.標志規格

    我們在這里討論的最后一件事是,您的指南必須包含關于徽標的信息。logo大概是你的品牌和網站最容易識別的部分,所以在這里討論非常重要。

    徽標規格要求包括最小尺寸和各種徽標樣式。對于小空間,您應該有一個文本選項和一個圖形選項。對于更大的選擇,帶有口號的標志也是一個好主意。

    還應該提供不同背景的logo,包括透明logo。這樣無論背景如何,你的logo都會很好看。每個徽標選項都應該包含在樣式指南頁面中,以便快速訪問和引用。

    網頁設計風格指南的八大范例

    既然我們已經介紹了應該包含在您的網頁設計風格指南中的內容,讓我們來看看一些展示這些指南的外觀和風格的非常好的例子。

    材料. io

    Material.io風格指南全面。它分解了網站外觀的各個方面。它包含關于主題、圖標、調色板、布局、形狀甚至聲音的信息。

    MailChimp

    MailChimp風格指南非常簡單明了,這正是你應該追求的。它包括屏幕左側的菜單選項,可以選擇,包括顏色、數據可視化、網格、類型、按鈕、對話框等等。

    孤獨星球

    《孤獨星球》提供了另一個很棒的網頁設計風格指南供參考。其主要功能有調色板、圖標、UI組件、JS組件、widget和CSS實用程序。

    Yelp風格指南

    Yelp風格指南更重要。它提供了清晰的字體信息,

    顏色,布局信息,鏈接,按鈕,導航選項等,使使用Yelp的人們更容易制作頁面和更新內容。

    A11Y Style Guide

    您可能要參考的另一種樣式指南是A11Y編寫的指南。該指南包括有關如何格式化名片,表格,媒體,導航的信息,并且還提供了一些其他資源。

    Barnard Levit驗光師

    Barnard Levit驗光師提供了一個超簡單的網頁設計樣式指南,可以幫助您完成工作。它提供了完整的排版詳細信息,包括標題,列和項目符號,以及有關如何格式化表格,表單和按鈕的信息。此外,它涵蓋了如何處理圖像,視頻以及網站的許多其他方面。

    Ben Brignell風格指南

    Ben Brignell的風格指南在美學上非常令人愉悅。它提供有關公司顏色(帶有十六進制代碼),版式,塊引用,項目符號,按鈕,鏈接,視頻,圖像等的信息。

    Beeline設計系統

    Beeline設計系統網站上的樣式指南是另一個可供參考的好例子。它包括此處列出的所有其他樣式指南涵蓋的所有內容,但增加了模式,通知和選項卡,以進行額外的衡量。

    總結

    到目前為止,您已經知道什么是網頁設計風格指南。您知道為什么需要一個。您已經學會了如何將它們組合在一起,并且已經看到了一些目前網絡上最好的例子?,F在輪到該信息變成實際的東西。如果您的網站缺少樣式指南,那么現在是時候將它們組合在一起了。返回首頁,查看更多

    上一篇:網站排名優化能取得什么好處 下一篇:用戶的搜索意圖是什么,如何優化?
    猜你喜歡
    各種觀點
    熱門排行
    精彩
    中文乱码免费一区二区三区
    <nav id="uo4gs"></nav>
  • <menu id="uo4gs"><u id="uo4gs"></u></menu>