良好的響應(yīng)網(wǎng)頁設(shè)計，就其性質(zhì)而言，被忽視的消費(fèi)內(nèi)容在線。所以當(dāng)有人問一個新的網(wǎng)站，20個獨(dú)特的網(wǎng)站創(chuàng)意組合他們往往是完全不知道的概念，盡管經(jīng)歷了它在日常的基礎(chǔ)上，響應(yīng)網(wǎng)頁設(shè)計是目前公認(rèn)的標(biāo)準(zhǔn)的做法在整個行業(yè)。

建設(shè)網(wǎng)站響應(yīng)改變了我們的流程，現(xiàn)代網(wǎng)絡(luò)漸進(jìn)式設(shè)計從創(chuàng)建完整的頁面模型，以可重用的組件和布局建設(shè)的圖書館。
布局是內(nèi)容驅(qū)動和風(fēng)格是品牌驅(qū)動

最近我們接觸到一個現(xiàn)有的客戶相應(yīng)地重新設(shè)計他們的網(wǎng)站。我們曾與他們使用剛性瀑布過程,現(xiàn)代網(wǎng)絡(luò)漸進(jìn)式設(shè)計移動到一個靈活的工作，我們能夠在項(xiàng)目的任何一點(diǎn)擁抱變化。
在整個過程中，我們堅持的經(jīng)營理念，布局內(nèi)容驅(qū)動和風(fēng)格是現(xiàn)代網(wǎng)絡(luò)漸進(jìn)式設(shè)計品牌驅(qū)動。
線框的規(guī)格
規(guī)范文檔工作杰出的列出所有功能的網(wǎng)站需要有。但這真是客戶的需求？它在的地方，很難想象這些特點(diǎn)。這樣的結(jié)果是，規(guī)范文檔經(jīng)常變成臃腫的搜藏。這并不能幫助客戶，設(shè)計師，或最終的網(wǎng)站。
而規(guī)范文檔，我們選擇使用線框。該項(xiàng)目的第一步創(chuàng)建的每個頁面的線框。這可能聽起來像是矯枉過正，但線框LED的內(nèi)容和特征的早期討論的每一頁。我們發(fā)現(xiàn)，那些我們從未考慮過加入，而許多被拆除。
線框給我們一個明確的，直觀的表現(xiàn)內(nèi)容和功能應(yīng)該優(yōu)先在每一頁。這些線框然后成為一個參考點(diǎn)，更換規(guī)格文檔。

關(guān)鍵外賣：生產(chǎn)線框在規(guī)范文件地點(diǎn)集中大家對核心功能和內(nèi)容的重要性。

審計的框架允許我們形成一個列表中的所有通用組件。在一個單一的網(wǎng)站會有幾十個小部分的每一頁上都很相似。這些組件可以整理成一個詳盡的清單將用于以后。
這一階段主要有三大好處：
這旗幟在引線框架的任何差異。把它作為校對的線框。一些地區(qū)可能沒有真正的原因不同。我們可以把整個網(wǎng)站一起在我們開始建立不必要的部件或布局。
它有助于保持所有的前端代碼盡可能地。規(guī)劃如何將CSS結(jié)構(gòu)已成為重要的大型項(xiàng)目。我們希望網(wǎng)站能夠盡可能的快速構(gòu)建CSS早于此。
大型網(wǎng)站將涉及多人在任何時間，都是在發(fā)展和未來。創(chuàng)建可維護(hù)的代碼是非常重要的項(xiàng)目前進(jìn)。
關(guān)鍵外賣：規(guī)劃如何處理一個項(xiàng)目的前端開發(fā)是創(chuàng)建可維護(hù)的重要，精益的代碼庫。

模式庫
模式庫的集合在一個網(wǎng)站上常見的元素。通過前面的­端的開發(fā)建設(shè)，是不依賴于頁面的組件，我們可以降低代碼的開銷和提高一致性。
使用組件的列表我們整理審計過程中，我們可以組織我們的蔬菜到一個可管理的文件的集合。
命名約定是重要的
我們已經(jīng)在一些項(xiàng)目中使用的模式庫卻一直掙扎的命名約定，特別是文件夾結(jié)構(gòu)：你把你的風(fēng)格，這個音樂播放器，在組件，或部分？
以前，我們一直使用的術(shù)語，如諧音和組件組織我們的薩斯 文件。雖然這些看起來完全合法的命名約定，他們是開放的解釋。當(dāng)有多個開發(fā)人員工作的一個項(xiàng)目，讓基本代碼的開放的解釋組織導(dǎo)致組織CSS。
邊界元法（塊，元，改性劑），為我們提供了一個共同的約定遵循，并創(chuàng)建前­高端開發(fā)商之間的理解。舊的方法是由個人開發(fā)者想出類的名字都太高有任何意義。幸運(yùn)的是，我們很幸運(yùn)的看到Brad Frost說起自己的模式庫的前期會議在曼徹斯特。從化學(xué)實(shí)驗(yàn)室借模式術(shù)語描述組成元件庫。利用原子，分子和生物的描述頁面上的組件之間的差異有助于新概念的開發(fā)商對項(xiàng)目的解釋。

原子–要領(lǐng)
在自然界中，原子是最小的單位（除非我們深入到夸克和電子）。在Web開發(fā)中，原子是最基本的HTML元素。為了所有的意圖和目的，他們自己不多做。這些包括標(biāo)題，段落，輸入按鈕，列表，……你的想法。
分子–擴(kuò)展模式
這些都是下一層。在化學(xué)中，分子是由原子構(gòu)成的，而這同樣適用于CSS的結(jié)構(gòu)。分子是在利用原子形成他們的網(wǎng)站組件。

一個分子的一個很好的例子是一個搜索框。這包含3個原子的­標(biāo)簽，輸入按鈕。分子層開始形成一些元素可以用在網(wǎng)站上。重要的是讓所有這些分子可擴(kuò)展。他們的設(shè)計應(yīng)該與他們的想法可以使用網(wǎng)站上的任何地方。為了使CSS盡可能靈活和可重用的終極目標(biāo)。
生物–模式的集合
顧名思義，生物組織的分子。其中的例子包括頁眉，頁腳，或產(chǎn)品清單。
如果我們把一個標(biāo)題的例子，這將包括一個標(biāo)志，搜索，導(dǎo)航。這些都是分子結(jié)合形成一個標(biāo)題的有機(jī)體。
模板–一頁的膠水

這就是生物化學(xué)類比結(jié)束。比如說，“進(jìn)入語言，更有意義的客戶和最終輸出”。模板是一個網(wǎng)站的膠水。這些把我們創(chuàng)造成一個布局，可以應(yīng)用在網(wǎng)站頁面的生物。
一個例子是一個博客列表。此模板將包括頁眉，頁腳，列出博客項(xiàng)目，和一個側(cè)邊欄。模板通常只包含結(jié)構(gòu)，布局。
頁面–處理變化
最后一部分是頁。這是你可以用真實(shí)數(shù)據(jù)測試模板。頁是具體的一個模板實(shí)例。這部分很重要，因?yàn)樗屛覀兛吹搅巳绾纬晒Φ脑樱肿樱锖湍０逡选?br/>這是不可避免的，建設(shè)網(wǎng)站時，某些情況下會被錯過。典型的例子是長標(biāo)題，或迎合不同的貨幣和語言。
關(guān)鍵外賣：命名約定的事。分層CSS創(chuàng)建一個干凈的代碼工作，盡可能小。
在頭腦靈活的設(shè)計
設(shè)計模式是很難的。你不能設(shè)計如新聞分離的模式，并期望它能與其他頁面。我們建立網(wǎng)站和我們的設(shè)計方式的不同。
設(shè)計很有可能會改變無論我們得到簽署……簽署成為無關(guān)緊要的步驟的過程中，只有把雙方的壓力
我們用PS圖象處理軟件創(chuàng)建線框模型與這些風(fēng)格的成分在的地方。我們曾經(jīng)快樂的外觀和感覺的設(shè)計我們搬到隔離每個組件。這使我們能夠保證各部件靈活地在任何地方工作的網(wǎng)站。
我們都很清醒不得到簽署任何設(shè)計工作。設(shè)計簽名創(chuàng)建一個屏障，設(shè)計師 感到壓力，創(chuàng)造的東西將一成不變。設(shè)計很有可能會改變無論我們得到簽署或不。一般我們都樂意在項(xiàng)目時間的任何點(diǎn)的任何變化。簽署成為無關(guān)緊要的步驟的過程中，只有把壓力對雙方關(guān)系的損害。

從PS圖象處理軟件快速編碼
知道什么時候離開PS圖象處理軟件代碼是很重要的。這一步是比我們習(xí)慣的原因有兩個早得多：
完善布局PS圖象處理軟件費(fèi)時最終浪費(fèi)時間。時間完善網(wǎng)站更好的度過最后，在實(shí)際的代碼。
它創(chuàng)建了一個參考點(diǎn)的網(wǎng)站應(yīng)該看起來像什么。事實(shí)上，它看上去永遠(yuǎn)不會相同；但一旦客戶已經(jīng)看到（完善）的設(shè)計，期望創(chuàng)造。

而在PS圖象處理軟件花額外的時間我們選擇投資的時間編碼。如果我們要好的東西，它應(yīng)該是編碼，比特，將實(shí)際使用的所有網(wǎng)站的用戶看到。對我們來說，PS圖象處理軟件是創(chuàng)造一種設(shè)計風(fēng)格，可以在網(wǎng)站上使用的工具。
設(shè)計更多的是合作，團(tuán)隊(duì)中每個人的關(guān)系。模型仍然是過程中的一個非常重要的部分，幫助客戶查看網(wǎng)站看起來。如果我們都很滿意的設(shè)計的總體方向，我們將它移動到代碼。我們很少花時間去向前和向后，彌補(bǔ)對PS圖象處理軟件文件。

關(guān)鍵外賣：PS圖象處理軟件是創(chuàng)造設(shè)計概念的偉大的工具。移動代碼盡可能是重要的。在這好的代碼，不PS圖象處理軟件。
迭代更好的可用性
此工作流的美是有許多地方要檢討和改善網(wǎng)站。
需要注意的是，這些都是在我們的項(xiàng)目過程的寬松措施的重要。如果我們需要一些新的東西在這個過程中，我們一般都會把它作為一個獨(dú)立的，可以放到網(wǎng)站采用的網(wǎng)站設(shè)計主題的模塊化組件。
在金屬框架階段我們計劃中的項(xiàng)目
在審計階段回顧和提高線框
在設(shè)計階段，我們的樣機(jī)設(shè)計風(fēng)格
在編碼階段，我們結(jié)合在一起
這些步驟提供了一個點(diǎn)，我們可以回顧一下我們的工作到目前為止。它也允許一個新的眼睛從不同的角度看事情。
在這些階段中我們會發(fā)現(xiàn)有些部分不工作以及預(yù)期。這是好的。事實(shí)上，這是很好的。捕捉可用性差的關(guān)鍵是一個成功網(wǎng)站的早期。回去和線框架這部分網(wǎng)站將使項(xiàng)目更好時，它的活。
關(guān)鍵外賣：不要怕，如果有什么需要改進(jìn)回到起點(diǎn)。捕捉這些早期會使項(xiàng)目更好時，它的活。

完成
我們花了幾天的時間一起工作，確保網(wǎng)站的每個部分，完成高標(biāo)準(zhǔn)。我們測試了很多場景的可能，確保瀏覽體驗(yàn)是一致的。
一旦數(shù)據(jù)在網(wǎng)站上我們能夠充分測試網(wǎng)站。它往往是太容易設(shè)置的項(xiàng)目沒有充分測試過。我們可以檢查速度，導(dǎo)航，最重要的是采購流程方便。
大家都說蘋果是好主義者，但我相信他們的第一次嘗試是遠(yuǎn)遠(yuǎn)不夠完善。它需要時間和奉獻(xiàn)精神，今天創(chuàng)新互聯(lián)愛的產(chǎn)品給我們做最后的改進(jìn)。使用我們的設(shè)備的實(shí)驗(yàn)室，包括最流行的設(shè)備和平臺，我們能夠確保盡可能多的新平臺和屏幕尺寸盡可能的優(yōu)化經(jīng)驗(yàn)。
回顧
從每個項(xiàng)目的學(xué)習(xí)是非常重要的，我們可以不斷提高的過程，導(dǎo)致更好的網(wǎng)站。
這個項(xiàng)目，看到自己的出生的房子­模式庫，鼓勵項(xiàng)目之間的一致性。在一個機(jī)構(gòu)工作時，我們可能會有幾十個項(xiàng)目目前在發(fā)展的同時。任何人在任何項(xiàng)目的能力是很重要的。
建立一個基地，我們都可以努力將有助于這一目標(biāo)。

網(wǎng)站的性能是接近尾聲的項(xiàng)目。一個成功的響應(yīng)的網(wǎng)站需要快速稀薄。從全新的MAC電腦的舊手機(jī)設(shè)備和其能力的巨大變化范圍大。建立一個豐富的媒體網(wǎng)站時是可管理的性能是很難的，尤其是當(dāng)回顧試圖改進(jìn)。
在曼徹斯特的前期會議，我們看到葉塞尼亞佩雷斯克魯茲說考慮在項(xiàng)目的每個階段的表現(xiàn)，包括設(shè)計。事后看來，這是我們應(yīng)該實(shí)施。作為一個團(tuán)隊(duì)，多個設(shè)計師，開發(fā)商和前端開發(fā)人員，管理的整體尺寸和性能（特別是感知績效）應(yīng)該是一個更大的優(yōu)先權(quán)。

網(wǎng)頁上的每樣?xùn)|西都有一個成本績效。優(yōu)先考慮什么是重要保證網(wǎng)站不僅速度快，但容易被更多的設(shè)備。在一些較舊的設(shè)備，我們發(fā)現(xiàn)網(wǎng)站癱瘓不只是瀏覽器，但整個裝置。試圖加快網(wǎng)站這意味著我們不能使網(wǎng)站還快。網(wǎng)站設(shè)計風(fēng)格

名稱欄目：現(xiàn)代網(wǎng)絡(luò)漸進(jìn)式設(shè)計
分享網(wǎng)址：http://m.newbst.com/news38/19988.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App設(shè)計、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、電子商務(wù)、靜態(tài)網(wǎng)站

廣告

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