24小時查詢服務熱線
香港網頁集團
  • 公司概覽 
    • 概覽 
    • 客戶群組 
    • 職位空缺 
  • 網頁設計 
    • 網頁設計 
    • 人才外判計劃 
  • 網絡行銷 
    • SEO搜尋引擎優化 
    • SEM搜尋引擎行銷 
    • 社交網絡推廣策略及推廣 
    • EDM 電郵宣傳策略及設計 
  • 政府資助 
    • BUD專項基金(BUD Fund) 
    • EMF中小企業市場推廣基金 
    • TVP科技券計劃 
  • 作品展示 
  • 最新資訊 
    • 網頁設計 
    • 網上推廣 
    • APP開發 
  • 聯絡我們 
  • sitemap 
Home » 網頁布局設計技巧
  • 近期文章

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
  • 網上推廣

    • 網站維護的主要工作有哪些?讓網站持續吸引流量
    • 【網絡推廣核心邏輯】三大實戰策略突破Meta廣告的「創意疲勞」瓶頸
    • 提速網站FCP分數:全面攻略助你搶佔香港SEO先機
    • 精準流量變現的關鍵:香港企業如何利用SEO提升會員轉化率?
    • SEO公司緊急警報:網站流量突然暴增?小心黑帽SEO植入
  • 網頁設計

    • 掌握7大網店設計原則,打造顧客「一逛就買」的完美購物體驗
    • 如何挑選和購買好的網域?開啓網站維護征程的關鍵一步
    • 8種超簡單的平面設計技巧!讓品牌海報從「能看」升級為「吸睛」
    • 商城設計秘籍:解密產品列表頁設計的五大黃金技巧
    • 網頁設計中最基礎的配色技巧 讓網頁在色彩海洋中脱穎而出
  • APP開發

    • APP設計技巧:如何利用重疊設計來增加APP的魅力
    • UX設計技巧:如何做好APP的BAR設計?提升整體APP的用戶體驗
    • APP設計策略:如何將信息對比應用APP設計中,以提高用戶體驗?
    • UI設計指南:底部彈出框需要重視哪些設計原則
    • Headspace APP設計案例分析:APP設計實踐中需運用哪些UX設計定律

網頁布局設計技巧

分類: 最新資訊 Tags: 網頁布局設計 日期: 2015-01-08

網頁布局設計往往是很難的,因為網頁布局直接影響到頁面的美觀程度,網頁的內容多少也影響著布局的設計。大多數網站頁面結構都會包括網頁標題、網站LOGO、導航欄、功能列表區、主內容區和狀態欄等。在進行網頁布局設計時不要把所有內容都放在頁面裏。還需要我們把網頁內容進行合理的排版布局,以給瀏覽者賞心悅目的感覺,增強網站的吸引力。在設計布局的時候我們要註意把文字、圖片在網頁空間上均勻分布並且不同形狀、色彩的網頁元素要相互對比,以形成鮮明的視覺效果。

我們先來說說構成,“構成是將造型按視覺效應、視覺力學和精神力學等原則組成的,具備美好形態的造型”。 構成形式裏,有空間構成(平面構成和立體構成) 和時間構成(靜和動)。我們的創作,就是要協調這裏面的種種關系,順應視覺感受,才能夠打動觀看者的視覺,得到我們想要的效果。在這些形形式式裏,都有著如下的部件:

點:我們壹般認為,點是指圓形的,但這是不正確的。只要在空間裏有非常少量的 面積,無法形成壹個視覺上感覺的圖形,都是壹個點。無論什麽形狀都可以。 線:點集合在壹起就形成線。面:壹個平面。體:壹個物體。壹般是指物體占據的空間,有三維形狀。

那麽,當點、線、面與體集結在壹個頁面上時,它們的關系要怎麽協調呢?它們之間都有什麽作用呢?

點有集中視線、緊縮空間、引起註意的功能。 兩個點相距不遠而且形狀不等時,壹般由小向大看。近距離的點引起面的感覺。靈活運用點,可使妳的頁面有壹些本質上的變化。 當點占據不同的空間時,它所引起的感覺是不同的:

居中引起視覺集中註意 。上引起下跌落感。在上左或上右引起不安定感。下方中點,產生踏實感。左下右下,增加了動感。 線,又分為直線和曲線。 直線給人以速度,明確而銳利的感覺,具男性感。 曲線則優美輕快,富於旋律。曲線的用法各異,需結合自己的需要。 而直線又分為斜線、水平線及垂直線。 水平線代表平穩、安定、廣闊,具踏實感。 垂直線則有強烈的上升及下落趨勢,可增加動感。 斜線,壹般我沒有怎麽使用,因為它造成視覺的壹種不安定。 面,指的是二度空間裏的形。 面又分為幾何形和任意形,任意形具人情味。幾何形使人有壹些機械感,但是,每壹個圖形裏都會要用到幾何形,請看它們各代表什麽:

圓形:運動及和諧美。
矩形:單純而明確,穩定。
平行四邊形:有向壹方運動的感覺。 ?
梯形:最穩定,令人聯想到山。 ?
正方形:穩定的擴張。 ?
正三角形:平穩的擴張。
倒三角形:不安定,動態及擴張、幻想。
我們在日常生活中所看到的東西,都是由於形與形、圖與底的相互關 系。圖形之間,圖底之間,正由於對比產生差異而被我們所感知所接 受。 圖與底的視差越大,圖形越清晰,對視覺的沖擊力越大。 那麽,平面上有那麽多的東西,我怎麽才能夠確定它是否是最主要的呢? ?
居於畫面中心。
垂直或水平的比傾斜更易成為中心。 ?
被包圍。
相對於其它圖形較大的。
色感要素強烈。
熟悉的圖案,如果這件東西我們很熟,則壹定會以它為焦點。

可以把自己認為最主要的東西做大壹點,突出壹點,色彩鮮艷壹點,其它的東西小 而且色調不要那麽鮮明,以免搶了主題的”風頭”。 註意:圖與底之間的關系是很重要的。 如果我們確定了背景,再確定主題,在做頁面時不註意而將圖與底的關系設置為 1:1,那麽,我們也許發現,底與圖的力場爭奪非常激烈,即有時底被我們認為是 圖。它們之間的關系只是相對,而非絕對。 壹般來說,底要大於圖,而圖要鮮於底。

事實上,通過上述的壹些方法,我們主要是為了創造秩序,使相互的東西能夠在沒有互相幹擾的系統中起作用。 混亂與秩序之間的對照喚起了我們的視知覺,我們於是通過平衡、比例、節奏、協調,在迷亂中建立秩序,形成我們自己的風格。 形成自己作品的獨特氣質。 而如果註意自己作品的律動性,即旋律性,可通過重要壹個基調實現,對於整個頁面應該有畫龍點晴之效。 但要清楚的認識到,並非所有的節奏都產生律動性,有時候,聽到壹些音樂時覺 得它是垃圾,原理是壹樣的。

旋律要有情感因素,富於變化而又統壹的節奏和總體的和諧。 流動的旋律,活潑、明快、自由、變化、生機勃勃。 也要註意到,反復、周而 復、單純或漸變重復雖給人以視覺印象,但過於單調會使人疲勞並產生厭煩。必須 在反復中尋找動與靜的完美結合,尋求單純與復雜、細膩與奔放、定向與不定向之 間的對比,在構成方式上多探索,多借鑒,求新求變。

下面我們給出幾種常見的布局結構,供大家參考。常見的布局結構有“同”、“廠”、“國”、“匡”、“三”、“川”等字型布局。

1)“同”字型布局:所謂“同”字型結構,就是整個頁面布局類似“同”字,頁面頂部是主導航欄,下面左右兩側是二級導航條、登錄區、搜索區等,中間是主內容區。
2)“廠”字型布局:整個頁面布局類似“廠”字,頁面頂部和左部都可以是主導航欄,右下面是主內容區。
3)“國”字型布局:它是在“同”字形布局上演化而來的,它在保留“同”字形的同時,在頁面的下方增加壹橫條狀的菜單或廣告。
4)“匡”字型布局:這種布局結構去掉了“國”字形布局的右邊的邊框部分,給主內容區釋放了更多空間,內容雖看起來比較多,但布局整齊又不過於擁擠,適合壹些下載類和賀卡類站點使用。
5)“三”字型布局:壹般應用在簡潔明快的藝術性網頁布局,這種布局壹般采用簡單的圖片和線條代替擁擠的文字,給瀏覽者以強烈的視覺沖擊。
6)“川”字型布局:整個頁面在垂直方向分為三列,網站的內容按欄目分布在這三列中,最大限度地突出主頁的索引功能,壹般適用在欄目較多的網站裏。

在實際設計中我們也不要局限於以上幾種布局格式,有時候稍作適當的變化會收到意想不到的效果,另外,平時在瀏覽網頁時要多留心別人的布局方式,遇到好的布局就可以保存下來作為我們設計布局的參考。

Share This Post!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
訂閱電子報 公司最新資訊 Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
公司最新資訊
Inspirr咨詢熱線
    • 網頁設計
    • 平面設計
    • 網上推廣
    • 程式開發
    Inspirr網頁設計香港
    公司資訊
    概覽
    職位空缺
    服務範圍
    網站設計流程
    SEO網站優化
    手機程式開發
    平面設計
    作品案例
    網頁設計案例
    手機程式案例
    多媒體設計案例
    平面商業設計案例
    聯繫我們
    • inspirr Facebook
    • inspirr vimeo
    • inspirr blog
    • 雅虎認證官網
    • 新浪微博認證

    Inspirr網頁設計公司專業設計網站

    網頁設計、網上商店、編寫程序、網上顧問、網上廣告、網上行銷等。我們擁有優秀專業的團隊,獨特的網頁設計功能,Web Design等技術,秉持網上商店品質、創新、服務的經營理念,集合設計、科技及網上推廣的元素。

    inspirr地址

    香港上環德輔道中248號東協商業大廈6樓601室

    Inspirr聯繫電話

    (852) 3749 9734

    Inspirr郵箱

    Copyright @ 2023 Inspirr Creation. All rights reserved.

    友情鏈接: 香港網頁設計 公司網站管理