2014-06-13 分類: 定制網(wǎng)站
印刷和數(shù)字設(shè)計(jì)師是那些能夠掌握網(wǎng)格的使用。在許多情況下,它有可能放棄網(wǎng)格,但你通常如果你學(xué)習(xí)網(wǎng)格結(jié)構(gòu)和組成規(guī)則創(chuàng)造高質(zhì)量的工作。
網(wǎng)站設(shè)計(jì)是結(jié)構(gòu)設(shè)計(jì)的一個(gè)重要部分。網(wǎng)站使用網(wǎng)格之間找到平衡的文本,圖像,和整體頁(yè)面元素。
雖然有很多免費(fèi)的開(kāi)源網(wǎng)格系統(tǒng),界面原型設(shè)計(jì)實(shí)例技巧你通常會(huì)得到更好的學(xué)習(xí)如何創(chuàng)建你自己的。這篇文章將涵蓋定制網(wǎng)站設(shè)計(jì)的好處,你可以學(xué)習(xí)如何從頭開(kāi)始構(gòu)建自己的網(wǎng)格。
專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師如何克服障礙的工作流程從線框圖。這種傳統(tǒng)的形式是一個(gè)速寫,畫出各種思想,你看他們的感覺(jué)。
一些設(shè)計(jì)師喜歡的工作,而另外一些人則更喜歡鉛筆和數(shù)字論文。沒(méi)有正確的答案–只有方法為你的錯(cuò)。堅(jiān)持一個(gè)方法可以讓你快速迭代之間的想法可以讓你找到適合你的內(nèi)容。
素描時(shí)需要考慮的總體構(gòu)成。認(rèn)為一個(gè)網(wǎng)站主要是作為一個(gè)容器的內(nèi)容。重要的花絮應(yīng)該站出來(lái)通過(guò)對(duì)稱和不對(duì)稱。設(shè)計(jì)了一個(gè)網(wǎng)格適合你的內(nèi)容不要害怕移動(dòng)周圍的東西。
一般來(lái)說(shuō),線框圖是用來(lái)發(fā)現(xiàn)的原始想法。在這一階段沒(méi)有錯(cuò)誤–唯一的實(shí)驗(yàn)。
找到一個(gè)方法來(lái)組織網(wǎng)格結(jié)構(gòu)創(chuàng)建內(nèi)容的不同區(qū)域之間的重復(fù)計(jì)。平衡可以通過(guò)貼在可測(cè)空間創(chuàng)建可識(shí)別模式。
早期的草稿的筆記本
如果你有麻煩的開(kāi)始挑選預(yù)建的系統(tǒng)960gs。要?jiǎng)?chuàng)建自己的網(wǎng)格,但也無(wú)妨從一個(gè)可信網(wǎng)格系統(tǒng)。這可以讓你更專注于內(nèi)容的組織和減少對(duì)特定列值/水槽。
使用此初始階段作為一個(gè)試驗(yàn)場(chǎng)。了解如何創(chuàng)建可重復(fù)的模式讓用戶學(xué)會(huì)希望在瀏覽一個(gè)網(wǎng)站的內(nèi)容。
間距模式
對(duì)稱的節(jié)奏是網(wǎng)站設(shè)計(jì)的很大一部分,特別是對(duì)于漫長(zhǎng)的垂直網(wǎng)站。內(nèi)容應(yīng)該有一個(gè)自然的流動(dòng)模式指南整個(gè)頁(yè)面的訪客。
找到一個(gè)自然的節(jié)奏的一個(gè)方法是研究其他網(wǎng)站。測(cè)量各段之間的距離和放在一起的垂直/水平節(jié)奏的內(nèi)容。垂直空間是最重要的網(wǎng)站但水平空間也是組成結(jié)構(gòu)的作用。
現(xiàn)場(chǎng)查看網(wǎng)格布局的網(wǎng)站
記住,模式就是模板相對(duì)于規(guī)則亦步亦趨。設(shè)計(jì)師依靠網(wǎng)格作為一個(gè)指南針的方向。有時(shí)它是打破電網(wǎng)幫助元站出來(lái)反對(duì)周圍的元素是一個(gè)好主意。
當(dāng)它涉及到模式識(shí)別你需要?jiǎng)?chuàng)造一些類似的重復(fù)。給游客一些希望在瀏覽布局,但是不要太硬。我知道這似乎是一個(gè)虛偽的話但實(shí)踐你會(huì)知道什么時(shí)候跟隨模式,當(dāng)打破它們。
在實(shí)際的網(wǎng)站設(shè)計(jì)
一些設(shè)計(jì)師喜歡用PS圖象處理軟件指南劃定網(wǎng)格列則充分利用矩形的一個(gè)單獨(dú)的層。它真的不怎么創(chuàng)建網(wǎng)格,只要你覺(jué)得舒服你的方法。
雖然沒(méi)有特定的工作流跟蹤從一個(gè)水平網(wǎng)格通常是好的。這個(gè)定義的列及其關(guān)系到排水溝的大小總數(shù)。這個(gè)過(guò)程也會(huì)給你一個(gè)最后的寬度,所以你知道大使PSD或圖形文件。
網(wǎng)上商店網(wǎng)基線預(yù)覽
一旦你解決水平網(wǎng)這是一個(gè)好主意,組織一個(gè)垂直網(wǎng)格,也被稱為基線。垂直網(wǎng)格的功能是組織印刷,它與其他元素在自然的節(jié)奏。
組合在一起時(shí),你會(huì)有一個(gè)強(qiáng)大的工具,可以幫助你整理和調(diào)整層使他們結(jié)合在一起的舒適。網(wǎng)格不被用戶看到他們的存在可以在設(shè)計(jì)的各個(gè)方面的感覺(jué)。
使用網(wǎng)格模型的設(shè)計(jì)
開(kāi)始嘗試一種由客戶端建立一個(gè)實(shí)踐項(xiàng)目。這樣你沒(méi)有壓力,做一個(gè)好工作但仍然可以學(xué)到很多關(guān)于自定義網(wǎng)站設(shè)計(jì)工作流。
超越結(jié)構(gòu)
在創(chuàng)建網(wǎng)格,你需要學(xué)習(xí)如何使用它的內(nèi)容安排。顯然,你的能力會(huì)提高,實(shí)踐也有你應(yīng)該記住一些典型的規(guī)則。
嘗試去超越網(wǎng)格結(jié)構(gòu)和想象的內(nèi)容結(jié)合在一起。網(wǎng)頁(yè)設(shè)計(jì)是致力于內(nèi)容和每一個(gè)布局應(yīng)反映此。
試著調(diào)整段落都柱中而不是在邊緣。給一個(gè)“新”頁(yè)面上添加一些額外的空間印象以下內(nèi)容部分。
另一件事是試圖融合不同的網(wǎng)格在一起總體統(tǒng)一的系統(tǒng)。舉個(gè)例子,郭士納從GridSET。本設(shè)計(jì)采用6-column網(wǎng)格與四柱覆蓋匹配相同的寬度。
郭士納網(wǎng)格預(yù)覽
現(xiàn)在你有多點(diǎn)的工作,你的選擇都有很大的提高。但額外的網(wǎng)格可以恐嚇,你真的應(yīng)該實(shí)踐之前傳統(tǒng)的網(wǎng)格交叉與融合的想法結(jié)合在一起。
fonmon網(wǎng)格系統(tǒng)不對(duì)稱的設(shè)計(jì)
另一個(gè)先進(jìn)的技術(shù),你可以嘗試使用非對(duì)稱網(wǎng)格。fonmon是另一個(gè)示例使用5列的寬度不同的GridSET。雖然是非傳統(tǒng)的,這可以幫助你打破刻板的結(jié)構(gòu)和重構(gòu)你的設(shè)計(jì)思想在新的光。
網(wǎng)格工具和資源
你會(huì)發(fā)現(xiàn)很多文章討論不同的網(wǎng)格系統(tǒng),以及如何使用它們,所以我想避免這些資源重點(diǎn)研究基于網(wǎng)格的應(yīng)用程序。我已經(jīng)把幾個(gè)網(wǎng)站可以幫助你從零開(kāi)始生成您自己的自定義網(wǎng)格。
網(wǎng)頁(yè)題目:原型定制網(wǎng)站設(shè)計(jì)結(jié)構(gòu)化
URL鏈接:http://m.newbst.com/news/20036.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è)計(jì)、定制網(wǎng)站等
聲明:本網(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)
猜你還喜歡下面的內(nèi)容