UI設(shè)計稿和成品界面差異大？多半是網(wǎng)格系統(tǒng)沒弄好！

2009-05-17 網(wǎng)頁設(shè)計

網(wǎng)格系統(tǒng)是一門知識面比較廣的學(xué)科，這里專門針對Web設(shè)計中的一些方式、方法來對網(wǎng)格的知識做一個簡潔的提煉，以便大家在界面設(shè)計和前端開發(fā)時，有一個比較理想化的參考。

網(wǎng)格這一概念已經(jīng)沿用了許多世紀(jì)。它不僅僅適用于Web設(shè)計，也可以運用于其他領(lǐng)域，如平面設(shè)計、廣告創(chuàng)意、APP設(shè)計等，圖為Web 設(shè)計的網(wǎng)格示意圖。

結(jié)合Web自身的特點和前端開發(fā)的特點，網(wǎng)格可以從以下幾個方面去理解網(wǎng)格的概念。這里說到了前端開發(fā)，它和網(wǎng)格有什么必要的聯(lián)系呢？在前端開發(fā)過程中，開發(fā)者需要對網(wǎng)站的安全寬度、各設(shè)備的響應(yīng)式寬度，以及對不同模塊之間及圖片文字之間的對齊負(fù)責(zé)，這些參數(shù)需要和設(shè)計師的設(shè)計稿相符，才能夠高度還原設(shè)計稿。設(shè)計稿和成品網(wǎng)站經(jīng)常會有特別大的差異，一定程度是由于協(xié)作之間產(chǎn)生了很多問題，無法協(xié)作設(shè)計規(guī)范，導(dǎo)致設(shè)計與代碼的相融性太差。所以我們在設(shè)計時，要做好網(wǎng)格標(biāo)注。在開發(fā)過程中，一個像素的誤差就可能造成模塊間的錯位，所以我們需要重視網(wǎng)格系統(tǒng)。

在開始繪制一個網(wǎng)格之前，有許多因素需要考慮。比如，網(wǎng)站面向的用戶是誰？界面想要傳達(dá)的思想和意圖是什么？使用什么尺寸的字體？界面模塊的尺寸是多少？如何使設(shè)計的內(nèi)容可讀性強，易于用戶理解？界面布局大概需要幾行幾列？思考這些問題，以更好地利用網(wǎng)格這個工具，你的設(shè)計會更上一層樓。

熟練掌握基本設(shè)計原則，能夠幫助你成為更好的設(shè)計師。使用網(wǎng)格也是基本的設(shè)計原則之一。掌握網(wǎng)格是一項由來已久的基本功，需要我們學(xué)習(xí)了解一些常出現(xiàn)的概念，如網(wǎng)格結(jié)構(gòu)。

首先分開來說，“網(wǎng)格”是由垂直和水平線組成的，“結(jié)構(gòu)”指元素之間的組織與排列。那么通俗一點兒說網(wǎng)格結(jié)構(gòu)就是通過溝槽、行和列、模塊、空白、參考線等構(gòu)件來給頁面的文本、圖片、信息或圖表等元素做一個靈活的結(jié)構(gòu)布局，它能夠處理復(fù)雜的信息結(jié)構(gòu)，能夠更好地幫助設(shè)計師完成主要和次要信息的規(guī)劃，如圖所示。

層級網(wǎng)格從字面理解就是采用橫向的分層，將信息有序地展示出來。一般來說，介紹產(chǎn)品功能的網(wǎng)站或單頁網(wǎng)站，運用層級網(wǎng)格的方式展示是非常常見的。

通常情況下，層級網(wǎng)格都是搭配單列、雙列、多列或模塊網(wǎng)格使用的，在設(shè)計過程中，不單單需要考慮信息的縱向閱讀，更要考慮信息的橫向?qū)R與可讀性。

上一篇： UI設(shè)計不就是畫線框，憑什么年薪30W？返回觀點列表下一篇：為什么大神的UI設(shè)計那么高級？

本文標(biāo)簽：

本文地址： http://www.bmwdream.cn/a/253.html

相關(guān)專題

品牌官網(wǎng)設(shè)計
杭州派迪科技為高端客戶提供品牌官網(wǎng)咨詢策劃，品牌官網(wǎng)設(shè)計，品牌官網(wǎng)建設(shè)開發(fā)服務(wù)，以國際化視野和標(biāo)準(zhǔn)為基礎(chǔ)，為各行業(yè)領(lǐng)軍品牌提供高端企業(yè)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
大策略營銷門戶網(wǎng)站
杭州派迪科技有自己的營銷型網(wǎng)站CMS系統(tǒng)，適合白帽SEO網(wǎng)站。特別對大策略的營銷型門戶網(wǎng)站制作有一定的經(jīng)驗，曾經(jīng)為上海天擎外貿(mào)行業(yè)網(wǎng)站、浙江兆龍營銷型門戶、先臨三維門戶營銷網(wǎng)站提供全程的技術(shù)支持及SEO優(yōu)化指導(dǎo)
查看詳情
集團(tuán)/上市公司網(wǎng)站
杭州派迪科技為杭州本地集團(tuán)公司提供網(wǎng)頁設(shè)計、制作、開發(fā)服務(wù)，為集團(tuán)公司網(wǎng)站建設(shè)提供了響應(yīng)式、營銷型、品牌型、門戶型網(wǎng)站建設(shè)需求，歡迎廣大集團(tuán)公司客戶咨詢
查看詳情
外貿(mào)網(wǎng)站建設(shè)
杭州派迪科技為高端客戶提供外貿(mào)網(wǎng)站咨詢策劃，外貿(mào)官網(wǎng)設(shè)計，外貿(mào)官網(wǎng)建設(shè)開發(fā)服務(wù)，以谷歌搜索引起算法為基礎(chǔ)，為各行業(yè)外貿(mào)公司提供高端企業(yè)外貿(mào)網(wǎng)站定制、策劃、設(shè)計、互動與制作
查看詳情
企業(yè)網(wǎng)站建設(shè)
高端專業(yè)、令人印象深刻的用戶界面、易于訪問——企業(yè)網(wǎng)站必須反映一切，因為派迪科技在這里提供幫助，憑借精湛的技術(shù)、豐富的經(jīng)驗、與客戶的持續(xù)溝通以及對每一個細(xì)節(jié)的關(guān)注，我們確保在快速的周期時間內(nèi)提供優(yōu)質(zhì)的服務(wù)。
查看詳情
半定制網(wǎng)站
杭州派迪科技模板網(wǎng)站建設(shè)專題_各行業(yè)方案專題欄目提供各行業(yè)產(chǎn)品適合的網(wǎng)站建設(shè)方案,幫助企業(yè)了解派迪科技建站效果等信息,您可以通過本站了解各行業(yè)網(wǎng)站建設(shè)方案,如需要獲取本行業(yè)定制網(wǎng)站建設(shè)方案,可以聯(lián)系在線客服或撥打電話咨詢
查看詳情