網(wǎng)頁風(fēng)格指南

我讀過關(guān)于風(fēng)格指南的不同意見。有人說這些是數(shù)字模型而其他人則說基于代碼的樣式指南是最有用的。

推薦閱讀：如何用代碼樣式指南優(yōu)化CSS成都企業(yè)網(wǎng)站建設(shè)

無論哪種方式，樣式指南的目標與任何其他項目一樣適用于網(wǎng)絡(luò)。它定義了一致的模式、UI模塊和創(chuàng)造性的選項用于設(shè)計過程。你可以得到非常具體的和規(guī)定像素好的測量某些元素，或者你可以保持松散，并提供指導(dǎo)的視覺例子。

沒有一個正確的方法來做一個風(fēng)格指南。唯一錯誤的方法是創(chuàng)建一個簡單的資源別人無法理解.

目標是創(chuàng)建一個資產(chǎn)經(jīng)得起時間的考驗..應(yīng)該是開放編輯如果創(chuàng)建了新的資源。對于任何加入團隊的人來說，它也應(yīng)該可以輕松地深入到指南中。

風(fēng)格指南應(yīng)該是項目所需的細節(jié)..它通常包括可再用資產(chǎn)，例如排版、按鈕、色塊、紋理和常見的頁面元素。

我們最近報道了生活方式指導(dǎo)工具這可以幫助你從零開始建立生活方式指南。這些生活指南更多的是為前端開發(fā)人員，但他們也可以是同樣有用的設(shè)計師。您可以在這個粉碎的雜志帖子.

我最喜歡的資源是StyleGuides.io..它覆蓋了網(wǎng)頁風(fēng)格指南基礎(chǔ)，包括活生生的例子和個案研究

MailChimp模式庫是StyleGuides.io中最好的例子之一。這是一個在線的生活方式指南定義MailChimp的網(wǎng)格、排版和頁面元素

當(dāng)您為網(wǎng)絡(luò)公司設(shè)計樣式指南時，通常會將所有內(nèi)容都放在網(wǎng)上，但您也可以創(chuàng)建內(nèi)部導(dǎo)軌，并將它們保存在本地Intranet上或在用戶登錄頁面后面將其單獨托管。您訪問樣式指南的方式并不重要。它們都具有相同的目的，即傳遞特定的顏色、圖案和視覺效果。匹配web項目的主題.

要了解更多關(guān)于這一主題的信息，請查看關(guān)于樣式指南的其他文章：

分叉成花式瓷磚

風(fēng)格磚是完全不同的野獸。這些瓷磚是在早期設(shè)計階段使用的創(chuàng)造性資產(chǎn)當(dāng)試圖確定一種特定的美學(xué)。

這個風(fēng)格磚網(wǎng)站是由薩曼莎·沃倫它擁有你可能需要知道的一切。的確有沒有特定模板設(shè)計風(fēng)格的瓷磚。但薩曼莎的例子標題和段落類型、鏈接、模式，和可能的顏色選擇連同一個品牌標志.

在使用樣式瓷磚時，您的最終目標是現(xiàn)展示2-3種不同風(fēng)格的瓷磚客戶或創(chuàng)意總監(jiān)。這些瓷磚是比情緒板更詳細，但比一個完整的模型要詳細得多.

瓷磚應(yīng)該足夠詳細，以便給出網(wǎng)站的身份和心情..薩曼莎鼓勵使用形容詞詳細描述每一塊瓷磚。

客戶可以看看不同的瓷磚，和選擇他們最喜歡的作品..這，這個節(jié)省你的時間在設(shè)計時，因為客戶已經(jīng)看到了他們喜歡的資產(chǎn)，所以修改的可能性很小。

這里有一個很好的引用自風(fēng)格瓷磚網(wǎng)站：

風(fēng)格的瓷磚類似于油漆片和面料的樣板，室內(nèi)設(shè)計師在設(shè)計房間之前會得到他們的認可。室內(nèi)設(shè)計師不會在第一次會議上為客戶設(shè)計三個不同的房間，那么為什么網(wǎng)頁設(shè)計師要設(shè)計三個不同的網(wǎng)頁模型呢？

比較風(fēng)格瓷磚與室內(nèi)設(shè)計師的工具包是相當(dāng)貼切的類比。你不想把精力傾注在像素好的模型上，只想讓客戶意識到他們討厭大多數(shù)的顏色和字體。

相反，使用樣式塊查找共同主題或視覺語言在整個網(wǎng)站上使用。這可以包括品牌/身份但也可能包括UI特性，例如下拉菜單或CTA按鈕。

您應(yīng)該使用這些可交付資產(chǎn)在這個過程的早期。一旦你完成了一個完整的模型，就沒有必要再引用樣式瓷磚了。然而，在開始的時候，風(fēng)格的瓷磚對于創(chuàng)作過程來說是至關(guān)重要的。節(jié)省設(shè)計人員的時間和為客戶提供許多可供選擇的選項.

如果你想深入研究風(fēng)格瓷磚看看這些相關(guān)的帖子。

風(fēng)格指南與風(fēng)格瓷磚

風(fēng)格指南和風(fēng)格磚的區(qū)別是模糊但明確的。一個風(fēng)格指南是更多細部并且應(yīng)該用作連續(xù)參考指南為了創(chuàng)意團隊。一個風(fēng)格瓷磚可以用作情緒板到視覺構(gòu)思無論是為你自己還是為客戶。他們經(jīng)常習(xí)慣探索思想一旦項目完成，它們就沒有多大用處了。

風(fēng)格的瓷磚通常在邊緣周圍粗糙得多，它們被使用。僅僅在早期的創(chuàng)作過程中..樣式指南用于貫穿整個設(shè)計過程和即使是在以后，供日后參考其他可能在網(wǎng)站上工作的設(shè)計師。

兩者各有優(yōu)缺點。風(fēng)格瓷磚快快樂樂，但是短命在自然界中。樣式指南是徹底和表現(xiàn)得像視覺文檔，但他們也需要大量的工作.

那你應(yīng)該用哪一種？它最終取決于項目.

小型項目例如，對于小企業(yè)網(wǎng)站來說，使用風(fēng)格瓷磚效果更好。為一個小型商業(yè)網(wǎng)站構(gòu)建一個完整的風(fēng)格指南將需要太多的工作和可付費的時間。對大多數(shù)客戶來說，這可能不值得花這么多錢。

不過大型工程就像重新設(shè)計“紐約時報”一樣，風(fēng)格瓷磚和風(fēng)格指南都會給紐約時報帶來好處。

找到一種語言和心情對于一個新的項目來說，總是一個有價值的過程。這就是制造風(fēng)格瓷磚的原因。幾乎適合每一種情況.

你也可以過得去而不是創(chuàng)建這些資產(chǎn)中的任何一個..一些設(shè)計師從線框到詳細模型..有些客戶甚至不想要一個風(fēng)格指南，因為它不會被使用。

在每個項目的基礎(chǔ)上工作，并決定什么是對每個項目最好的。

活生生的例子

讓我們用覆蓋實例樣式指南和樣式瓷磚。我在瀏覽Dribbble時發(fā)現(xiàn)了這些設(shè)計，我認為它們體現(xiàn)了您希望在自己的樣式指南或樣式瓷磚中獲得的質(zhì)量。

風(fēng)格指南

這不可思議Airbnb風(fēng)格指南是德里克·布拉德利創(chuàng)造的。它非常簡單，但它清楚地說明了主要模式、顏色和頁元素可以在設(shè)計中找到。

這里有一個大得多的數(shù)字風(fēng)格指南由設(shè)計師Naoshad Alam創(chuàng)作。這個例子是更有組織帶著顏色、排版、窗體、界面元素和其他UI功能的章節(jié).

更詳細的樣式指南會將所有這些設(shè)計元素放到網(wǎng)上，并且包括代碼段每個人。

設(shè)計師丘比特·王做了這個后船指南..排版、按鈕、顏色選擇和常見的頁面元素都是精心制作的，組織成若干節(jié).

這也可以移植到網(wǎng)絡(luò)上，并作為在線參考文檔構(gòu)建得更大。

UI設(shè)計者GregDlubacz分享了他自己的UI樣式指南一個網(wǎng)絡(luò)項目。這東西太大了。這個全屏預(yù)覽跨越21，000像素高！

絕對是我見過的最好的數(shù)字風(fēng)格指南之一。這也可以移植到在線文檔頁面，供團隊成員參考。

風(fēng)格磚

UI/UX設(shè)計人員Abdus Salam創(chuàng)建這種風(fēng)格的瓷磚有機食品商店的網(wǎng)站。它是非?；镜钠矫嬖O(shè)計元素，一些次要的UI功能，以及調(diào)色板.

設(shè)計師阿德里安·坎泰爾米真的用他的撤資式瓷磚..它有顏色和字體，但也包括矢量圖.

這些載體有助于定義品牌、心情和整體配色方案。網(wǎng)站。

世界杯顧問的重新設(shè)計有自己的風(fēng)格瓷磚非?；镜奶卣?。一些圖標，一些顏色選擇，以及幾個按鈕設(shè)計。簡約是游戲的名字。

如果你能感覺到這個網(wǎng)站的樣子一瞥那你就做對了。成都企業(yè)網(wǎng)站建設(shè)

名稱欄目：成都企業(yè)網(wǎng)站建設(shè)：設(shè)計師關(guān)于使用樣式指南和樣式的指南
文章來源：http://redsoil1982.com.cn/news/227255.html

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

廣告

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