網(wǎng)站設(shè)計(jì)原則包括優(yōu)勢(shì)、重點(diǎn)和結(jié)構(gòu)

重點(diǎn)是相對(duì)的。 一個(gè)元素脫穎而出,另一個(gè)作為背景,第一是脫穎而出。 需要一些元素占主導(dǎo)地位 別人為了你的設(shè)計(jì)來(lái)顯示任何形式的視覺層次。
請(qǐng)注意 :這是第五個(gè)帖子在一系列設(shè)計(jì)原則。 你可以在這里找到前四本系列的文章:
設(shè)計(jì)原則:視覺感知和完形的原則
設(shè)計(jì)原則:空間和圖形-背景的關(guān)系
設(shè)計(jì)原則:通過對(duì)比和相似性連接和分離元素
設(shè)計(jì)原則:視覺重量和視覺方向
主導(dǎo)地位
比較任何兩個(gè)元素的設(shè)計(jì)。 元素將在各方面平等或人會(huì)產(chǎn)生某種程度的主導(dǎo)地位。 更主要的元素將吸引眼睛,先注意到。 它甚至可能出現(xiàn)少表現(xiàn)出某種控制主導(dǎo)元素。
更主要的元素可能有更大的視覺重量不是主導(dǎo)元素。 似乎將施加力量是什么。
01-dominance-opt-small
圈對(duì)統(tǒng)治廣場(chǎng),因?yàn)樗鼈兊南鄬?duì)大小。 ( 查看大版本 )
當(dāng)你開發(fā)一個(gè)作文,你會(huì)看到大量的元素相互施加統(tǒng)治。 一些元素將主導(dǎo),和下屬。 沒有有意識(shí)的控制,你就希望事情所有的工作和重要信息將能吸引注意力的。 幸運(yùn)的是,你有控制。
如何建立主導(dǎo)地位
你設(shè)計(jì)一個(gè)元素比另一個(gè)更有優(yōu)勢(shì),給它更多的視覺重量。 更大的視覺重量,一個(gè)元素將吸引眼睛和具有主導(dǎo)地位。
您創(chuàng)建通過對(duì)比優(yōu)勢(shì),強(qiáng)調(diào)和相對(duì)視覺重量。 相同的物品不能支配對(duì)方。 發(fā)揮優(yōu)勢(shì),一個(gè)元素看起來(lái)不同的元素是為了占主導(dǎo)地位。
你的目標(biāo)是創(chuàng)建元素和視覺重量的明顯差異。
可以改變相同的特征,我們談?wù)撛谶^去的幾本系列文章。 作為提醒,這里有最常見的特征可以不同設(shè)置不同的視覺重量:
的大小,
形狀,
的顏色,
值,
深度,
紋理,
密度,
飽和,
取向,
當(dāng)?shù)氐目瞻?
內(nèi)在興趣,
感知到的身體重量,
您可以創(chuàng)建優(yōu)勢(shì)通過視覺方向。 例如,您可能圍繞與箭頭都指向一個(gè)元素,元素。 如果有足夠的方向線索,元素將成為占主導(dǎo)地位的即使是較低的視覺重量比其他頁(yè)面元素。
你也可以讓co-dominance,兩個(gè)主要元素存在于一個(gè)組合。 然而,爭(zhēng)奪注意力和最終可能會(huì)分心,沒有正確的綜合平衡你的競(jìng)爭(zhēng)對(duì)手。
理想情況下,你想要一個(gè)主導(dǎo)元素。
主要的元素
占主導(dǎo)地位的元素在設(shè)計(jì)中大的一個(gè)視覺重量(或其他點(diǎn))。 元素,首先吸引眼睛,比其他任何頁(yè)面。
小心不要使元素占主導(dǎo)地位,完全掩蓋了一切,但卻使它在設(shè)計(jì)中脫穎而出。
你的主要元素是你告訴這個(gè)故事的起點(diǎn)。 這是入口點(diǎn)到您的設(shè)計(jì)。 它應(yīng)該吸引游客首先你想讓他們看。
這就是你開始與游客交談。 主要元素是首先注意到,為接下來(lái)的設(shè)置上下文。 在層次結(jié)構(gòu)的頂部。 它應(yīng)該強(qiáng)調(diào)你的最重要的信息,因?yàn)樗赡苁俏ㄒ粫?huì)看到任何人。 任何消息你希望人們帶走應(yīng)該清楚地傳達(dá)或接近你的主要元素。
沒有一個(gè)入口點(diǎn),觀眾將不得不努力工作找到進(jìn)入你的設(shè)計(jì)。 他們必須停下來(lái)思考,先去哪里看,思考什么是真正重要的。 缺乏入口點(diǎn)會(huì)增加游客的認(rèn)知負(fù)荷。 不要讓他們思考。 為您的設(shè)計(jì)提供一個(gè)入口點(diǎn)。
焦點(diǎn)
焦點(diǎn)也元素或領(lǐng)域的主導(dǎo)地位,就不是一個(gè)級(jí)別的作為你的一個(gè)主要元素,可以被定義為最主要的焦點(diǎn)。 焦點(diǎn)是感興趣的領(lǐng)域,強(qiáng)調(diào)或不同組合,吸引并保留住觀眾的注意力。
重點(diǎn)在你的設(shè)計(jì)應(yīng)該突出但后應(yīng)注意元素最多的主導(dǎo)地位。 下圖顯示了一個(gè)孤獨(dú)的圓的海洋中大部分是灰色的方塊。 循環(huán)不僅是不同的形狀,但大而明亮的紅色。 很有可能你的眼睛注意到的第一件事的圖形。
三四個(gè)方塊也紅的顏色,雖然不是一樣明亮的圓。 他們同樣大小的圖像中其他方塊,但是他們脫穎而出的灰色方塊,因?yàn)樗鼈兊念伾?br/>圈和三個(gè)紅色的方塊都是焦點(diǎn),因?yàn)樗麄兠摲f而出的大多數(shù)其他圖形元素。 他們與質(zhì)量的灰色方塊。 大而明亮的紅色圓圈最突出。 這是主要的焦點(diǎn),或這幅圖像的主要元素。
focal-points-opt
紅色圓圈和方塊焦點(diǎn)。 圓是主要元素或主要焦點(diǎn)。 ( 查看大版本 )
與主導(dǎo)元素,您可以創(chuàng)建焦點(diǎn),向他們提供更多的視覺重量比除了占主導(dǎo)地位的元素——再一次,是你最主要的焦點(diǎn)。 您還可以創(chuàng)建視覺方向,會(huì)導(dǎo)致不同的焦點(diǎn)。
您可以創(chuàng)建超過三個(gè)層次的主導(dǎo)地位,但每個(gè)額外的級(jí)別將減少對(duì)比周邊的水平。 除非你確定你可以對(duì)比每個(gè)水平很好,堅(jiān)持三個(gè)。
這是重點(diǎn),除了占主導(dǎo)地位的元素或主要焦點(diǎn)。 就二次重點(diǎn)。 元素在這個(gè)層面上強(qiáng)調(diào)獲得低于主要級(jí)別但比下屬級(jí)別。
水平的主導(dǎo)地位
如果您創(chuàng)建焦點(diǎn)主要元素,使其中的一個(gè)點(diǎn),然后你開始創(chuàng)建不同級(jí)別的主導(dǎo)地位。 占主導(dǎo)地位的元素將坐在一個(gè)級(jí)別,其他所有人之前都會(huì)被注意到。 剩下的焦點(diǎn)將坐在另一個(gè)水平。 有多少水平的優(yōu)勢(shì)能給你實(shí)際的設(shè)計(jì)嗎?
三是一個(gè)很好的數(shù)字。 作為一般規(guī)則,人們可以感知三個(gè)層次的主導(dǎo)地位。 他們注意到最主要的,最主要的,其他的一切。 這些水平需要有足夠的差別區(qū)分一個(gè)未來(lái)。 你想創(chuàng)建獨(dú)特的水平,不是一個(gè)連續(xù)體。
占主導(dǎo)地位的
這是最視覺重量和水平得到最多的重點(diǎn)。 你的主導(dǎo)水平通常會(huì)包含單個(gè)元素的前景。
當(dāng)你設(shè)計(jì)不同的水平的主導(dǎo)地位,你
讓您的視覺層次結(jié)構(gòu)基于實(shí)際的優(yōu)先級(jí)被呈現(xiàn)的信息。 首先,優(yōu)先考慮的一切將會(huì)在頁(yè)面上,一旦它的設(shè)置,設(shè)計(jì)視覺層次按照優(yōu)先級(jí)。
對(duì)比是一個(gè)很好的方法來(lái)創(chuàng)建焦點(diǎn),因?yàn)閷?duì)比呼吁重視本身是不同的。 任何能夠?qū)Ρ群腿魏文軌蛴绊懸曈X重量或方向可以用來(lái)創(chuàng)建一個(gè)焦點(diǎn),以同樣的方式,它可以被用來(lái)創(chuàng)建一個(gè)主要元素。 區(qū)別只是程度上的。
下屬
視覺層次結(jié)構(gòu) 創(chuàng)建視覺層次結(jié)構(gòu)的設(shè)計(jì) 在幾秒鐘內(nèi),游客應(yīng)該能夠選擇的要點(diǎn)和主要信息頁(yè)面。 他們可以這樣做如果你把最重要的信息最直觀地突出。
。 理想情況下,這種視覺層次結(jié)構(gòu)將匹配你的內(nèi)容的概念層次結(jié)構(gòu)。 如果一篇文章的標(biāo)題是更重要的不是這篇文章的標(biāo)題,那么標(biāo)題應(yīng)該更俱視覺占主導(dǎo)地位。
視覺層次結(jié)構(gòu)允許游客掃描信息。 它幫助你消息迅速和有效地溝通。 層次結(jié)構(gòu)的頂部(主要元素)應(yīng)有助于回答訪問者可能立即登陸頁(yè)面。
逗留超過幾秒鐘的人應(yīng)該能夠通過焦點(diǎn)掃描設(shè)計(jì)中獲得下一個(gè)最重要的信息(s),你想交流,用你其他的信息等。
的倒金字塔寫作
建立層次結(jié)構(gòu)方式設(shè)計(jì)類似于記者使用倒金字塔寫作。 最重要的新聞都是在第一段或兩個(gè)。 主要涵蓋了誰(shuí),什么,何時(shí)、為什么以及如何。 它告訴你你需要知道的一切。
03-inverted-pyramid-opt-small

鉛是緊隨其后的是重要的細(xì)節(jié),填寫的故事。 他們的細(xì)節(jié),提供上下文或幫助您深入了解這個(gè)故事。 文章的最后是通用和背景信息,很高興知道,但沒有必要理解發(fā)生了什么。
如果有人讀只有一兩句話,他們應(yīng)該最重要的信息。 他們逗留的時(shí)間越長(zhǎng),他們消耗的越多,他們會(huì)得到的更多細(xì)節(jié)。
視覺層次結(jié)構(gòu)相同的方式工作,但它沒有從頁(yè)面的頂部流線性。 你得到控制,人們看第一、第二等等
再一次,三個(gè)層次的主導(dǎo)地位或?qū)哟谓Y(jié)構(gòu)建議,盡管四個(gè)或五個(gè)仍然是可能的。
完形原則和視覺層次
的原因之一,我開始這個(gè)系列的文章對(duì)格式塔原則是展示他們?nèi)绾螌?dǎo)致許多與我們合作的設(shè)計(jì)原則。
格式塔視覺層次發(fā)展。 焦點(diǎn)是完形原則之一。 你的主要元素是一個(gè)極端的焦點(diǎn)。 都使用對(duì)比脫穎而出。 硬幣的另一面是相似,它幫助我們看清事物的相同。 相似度和對(duì)比度是必要的成分在層次結(jié)構(gòu)。
等法律的pragnanz和對(duì)稱創(chuàng)造秩序,使事情更加簡(jiǎn)單和清晰。 這就是你在做什么當(dāng)你在設(shè)計(jì)建立層次結(jié)構(gòu)。 你組織設(shè)計(jì)元素建立秩序感。
主要的元素可能被視為圖。 最可能被視為地面主要組成部分。 真的,任何連接或分離有關(guān)的原則可以應(yīng)用于主導(dǎo)地位和層次結(jié)構(gòu)。
例子
正如我在本系列中,我已經(jīng)收集了一些網(wǎng)站的截圖,分享我所看到的是占主導(dǎo)地位的元素,重點(diǎn)和層次結(jié)構(gòu)。
這是我的意見。 你可能會(huì)看到一個(gè)不同的設(shè)計(jì),很好。 批判性思考的設(shè)計(jì)比達(dá)成我們所認(rèn)為的更重要。
一個(gè)事件分開
主要元素的主頁(yè)上 一個(gè)事件分開 頂部的形象。 這是大的元素。 它也是一個(gè)人的形象,我們通常所吸引。 對(duì)面的大白色文本圖像提供對(duì)比圖片,稱你的注意力。
04-an-event-apart-opt-small
截圖的主頁(yè) 一個(gè)事件分開 ( 查看大版本 )
文本“人網(wǎng)站設(shè)計(jì)會(huì)議”可能是最重要的信息,任何登陸頁(yè)面需要知道。 這是一個(gè)非常明確的聲明事件是什么,網(wǎng)站是誰(shuí)。 它可以說是一個(gè)新的人的第一件事應(yīng)該看到的網(wǎng)站。
重點(diǎn)包括網(wǎng)站的標(biāo)志,“即將來(lái)臨的事件”,背后的黑暗背景證明設(shè)置為一個(gè)大大膽的標(biāo)題。
如果您向下滾動(dòng)頁(yè)面,您會(huì)注意到,設(shè)計(jì)主要使用大小和顏色來(lái)創(chuàng)建額外的焦點(diǎn)和視覺層次。 重要的信息是更大的。 這是大膽的。 這可能是紅色的。 偶爾一幅畫。
如果你訪問該頁(yè)面,只是掃描它,你仍然會(huì)離開知道網(wǎng)站,了解是否有會(huì)議要來(lái)你的區(qū)域,和相信豐富的獎(jiǎng)狀。
支付存在
主要的元素 支付存在 的主頁(yè)是背包的圖形在頁(yè)面的頂部。 這是一個(gè)形象和大于一切。 它與周圍的環(huán)境,因?yàn)樗且粋€(gè)圖形與內(nèi)在的興趣和不同的形狀。
05-paid-to-exist-opt-small
截圖的主頁(yè) 支付存在 ( 查看大版本 )
重點(diǎn)包括網(wǎng)站的名字,一些文本的右邊的圖形,和大綠色“下載”按鈕。 社交分享按鈕是另一個(gè)焦點(diǎn)。
看看下面的內(nèi)容,您將看到三個(gè)大圈編號(hào),作為焦點(diǎn),引導(dǎo)你附帶的內(nèi)容。

想想圈和文本的視覺層次。 大的彩色圓(這是一個(gè)層次的)你的注意力,讓你坐在另一個(gè)層次的信息。
曼迪西姆斯
曼迪西姆斯 有一個(gè)單頁(yè)的網(wǎng)站。 頂端(不是截圖所示)包含一個(gè)曼迪的形象,這對(duì)我來(lái)說是主要的元素。 曼迪的名字也顯示為大的文本。
然而,我想吸引你的注意力進(jìn)一步降低頁(yè)面的部分。 如您所料,部分的標(biāo)題是大的文本,因此它成為焦點(diǎn)。
06-mandy-sims-coaching-opt-small
部分的截圖 曼迪西姆斯 的單頁(yè)網(wǎng)站( 查看大版本 )
焦點(diǎn)也力薦右側(cè)。 注意推薦的背景顏色與背景顏色相同的活動(dòng)鏈接菜單。
沒有閱讀的文本在這一節(jié)中,您仍然可以清楚地看到,曼迪快樂的客戶提供培訓(xùn)服務(wù),因?yàn)橐粋€(gè)層次溝通。
VANSEO設(shè)計(jì)
這最后的例子是 從我自己的網(wǎng)站 。 這是我?guī)啄昵皩懙囊黄┪闹小?原諒放縱,但不像其他的例子,我知道為什么頁(yè)面上的每個(gè)元素看起來(lái)的方式。 我是否成功是另一回事,但我肯定的意圖。
07-vanseo-design-opt-small
截圖的頂部 文章從Vanseo設(shè)計(jì) ( 查看大版本 )
頁(yè)面的主標(biāo)題是占主導(dǎo)地位的元素。 這是一個(gè)博客,我希望人們閱讀,但我想給人一種之前這篇文章是關(guān)于什么他們必須投入時(shí)間來(lái)閱讀。
部分圖片也吸引眼睛,你可能會(huì)認(rèn)為它更占主導(dǎo)地位,但這樣的形象并不是可見的頂部每發(fā)布在網(wǎng)站上。
左上角的標(biāo)志和RSS圖標(biāo)右上的旨在突出多一點(diǎn)其他文本,所以都是紅色的。 都將脫穎而出更亮紅色,但是我不想讓人心煩意亂。 同樣的紅色也在標(biāo)題中使用。
左邊的元信息是為了脫穎而出的主要文本。 在這里,我使用當(dāng)?shù)氐目瞻?增加視覺重量的純文本。 理想情況下,有人會(huì)看一眼它并得到信息關(guān)于我和郵局的分類和標(biāo)簽。
有一件事我決定與設(shè)計(jì)使鏈接的身體明顯低于大多數(shù)網(wǎng)站。 我希望人們能夠找到他們,但是我不想讓他們把你的內(nèi)容。 我用藍(lán)色,黑色文字脫穎而出并不多,而我選擇了斜體的大膽。 的鏈接并不是為了成為焦點(diǎn),所以我不再以他們的視覺。
我希望有人登陸這個(gè)網(wǎng)站上或另一篇文章將能夠非常迅速地告訴這篇文章是關(guān)于什么,發(fā)現(xiàn)關(guān)于我的一些基本信息,比如我的名字或者網(wǎng)站的名字,之前希望看帖子。
總結(jié)
你不能強(qiáng)調(diào)一切。 為了一些元素在設(shè)計(jì)中脫穎而出,其他元素必須消失在背景中。
通過不同的視覺重量的一些元素和別人的視覺方向,你可以建立不同層次的主導(dǎo)地位。 三個(gè)層次是理想的,他們大多數(shù)人都能辨別。
一方面將坐在你的主要元素。 這是一個(gè)入口點(diǎn)到你的設(shè)計(jì),應(yīng)該是附近或在頁(yè)面上最重要的信息。 第二個(gè)級(jí)別的焦點(diǎn)可以關(guān)注下一個(gè)最重要的信息應(yīng)該看到游客。 你的第三個(gè)層次擁有一切。 你的大部分內(nèi)容將在這個(gè)水平。
設(shè)計(jì)不同層次的重點(diǎn)或主導(dǎo)地位將會(huì)創(chuàng)建一個(gè)視覺層次結(jié)構(gòu)在你的設(shè)計(jì),更重要的信息更直觀地突出。 它將幫助你快速而有效地與游客溝通。
我們接近這個(gè)系列的結(jié)束。 下一次,我們將看看成分流運(yùn)動(dòng)和節(jié)奏。 我將討論主要游客通過設(shè)計(jì),讓他們更容易找到信息的順序你希望他們看到它。

網(wǎng)站標(biāo)題：網(wǎng)站設(shè)計(jì)原則包括優(yōu)勢(shì)、重點(diǎn)和結(jié)構(gòu)
網(wǎng)址分享：http://muchs.cn/news/76708.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)站發(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)