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

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

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

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

沒(méi)有一個(gè)正確的方法來(lái)做一個(gè)風(fēng)格指南。唯一錯(cuò)誤的方法是創(chuàng)建一個(gè)簡(jiǎn)單的資源別人無(wú)法理解.

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

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

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

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

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

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

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

分叉成花式瓷磚

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

不過(guò)大型工程就像重新設(shè)計(jì)“紐約時(shí)報(bào)”一樣，風(fēng)格瓷磚和風(fēng)格指南都會(huì)給紐約時(shí)報(bào)帶來(lái)好處。

找到一種語(yǔ)言和心情對(duì)于一個(gè)新的項(xiàng)目來(lái)說(shuō)，總是一個(gè)有價(jià)值的過(guò)程。這就是制造風(fēng)格瓷磚的原因。幾乎適合每一種情況.

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

在每個(gè)項(xiàng)目的基礎(chǔ)上工作，并決定什么是對(duì)每個(gè)項(xiàng)目最好的。

活生生的例子

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

風(fēng)格指南

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

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

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

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

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

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

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

風(fēng)格磚

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

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

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

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

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

名稱欄目：成都企業(yè)網(wǎng)站建設(shè)：設(shè)計(jì)師關(guān)于使用樣式指南和樣式的指南
文章來(lái)源：http://www.rwnh.cn/news/227255.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è)等

廣告

聲明：本網(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)