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

客戶曾經(jīng)要求你使標(biāo)志更大嗎? 也許他們要求你完成他們的要求后一個(gè)標(biāo)題更大。

新標(biāo)題脫穎而出,但現(xiàn)在的標(biāo)志太小相比,并沒(méi)有注意到。 客戶想要使標(biāo)志更大。

當(dāng)然,現(xiàn)在標(biāo)志和標(biāo)題更大,既要吸引更多關(guān)注的主要文字-動(dòng)作按鈕,這將需要更大的。 ,一旦大按鈕,標(biāo)題要重新開(kāi)始看小。

你不能強(qiáng)調(diào)一切。 它失敗點(diǎn)了 當(dāng)你試圖這樣做,你的所有設(shè)計(jì)元素爭(zhēng)奪注意力,脫穎而出。 他們都同時(shí)大叫。 一切都很響亮,但仍然沒(méi)有聽(tīng)到。

重點(diǎn)是相對(duì)的。 一個(gè)元素脫穎而出,另一個(gè)作為背景,第一是脫穎而出。 需要一些元素占主導(dǎo)地位 別人為了你的設(shè)計(jì)來(lái)顯示任何形式的視覺(jué)層次。

請(qǐng)注意 :這是第五個(gè)帖子在一系列設(shè)計(jì)原則。 你可以在這里找到前四本系列的文章:

• 設(shè)計(jì)原則:視覺(jué)感知和完形的原則

• 設(shè)計(jì)原則:空間和圖形-背景的關(guān)系

• 設(shè)計(jì)原則:通過(guò)對(duì)比和相似性連接和分離元素

• 設(shè)計(jì)原則:視覺(jué)重量和視覺(jué)方向

主導(dǎo)地位

比較任何兩個(gè)元素的設(shè)計(jì)。 元素將在各方面平等或人會(huì)產(chǎn)生某種程度的主導(dǎo)地位。 更主要的元素將吸引眼睛,先注意到。 它甚至可能出現(xiàn)少表現(xiàn)出某種控制主導(dǎo)元素。

更主要的元素可能有更大的視覺(jué)重量不是主導(dǎo)元素。 似乎將施加力量是什么。

當(dāng)你開(kāi)發(fā)一個(gè)作文,你會(huì)看到大量的元素相互施加統(tǒng)治。 一些元素將主導(dǎo),和下屬。 沒(méi)有有意識(shí)的控制,你就希望事情所有的工作和重要信息將能吸引注意力的。 幸運(yùn)的是,你有控制。

如何建立主導(dǎo)地位

你設(shè)計(jì)一個(gè)元素比另一個(gè)更有優(yōu)勢(shì),給它更多的視覺(jué)重量。 更大的視覺(jué)重量,一個(gè)元素將吸引眼睛和具有主導(dǎo)地位。

您創(chuàng)建通過(guò)對(duì)比優(yōu)勢(shì),強(qiáng)調(diào)和相對(duì)視覺(jué)重量。 相同的物品不能支配對(duì)方。 發(fā)揮優(yōu)勢(shì),一個(gè)元素看起來(lái)不同的元素是為了占主導(dǎo)地位。

你的目標(biāo)是創(chuàng)建元素和視覺(jué)重量的明顯差異。

可以改變相同的特征,我們談?wù)撛谶^(guò)去的幾本系列文章。 作為提醒,這里有最常見(jiàn)的特征可以不同設(shè)置不同的視覺(jué)重量:

• 的大小,

• 形狀,

• 的顏色,

• 值,

• 深度,

• 紋理,

• 密度,

• 飽和,

• 取向,

• 當(dāng)?shù)氐目瞻?

• 內(nèi)在興趣,

• 感知到的身體重量,

您可以創(chuàng)建優(yōu)勢(shì)通過(guò)視覺(jué)方向。 例如,您可能圍繞與箭頭都指向一個(gè)元素,元素。 如果有足夠的方向線索,元素將成為占主導(dǎo)地位的即使是較低的視覺(jué)重量比其他頁(yè)面元素。

你也可以讓co-dominance,兩個(gè)主要元素存在于一個(gè)組合。 然而,爭(zhēng)奪注意力和最終可能會(huì)分心,沒(méi)有正確的綜合平衡你的競(jìng)爭(zhēng)對(duì)手。

理想情況下,你想要一個(gè)主導(dǎo)元素。

主要的元素

占主導(dǎo)地位的元素在設(shè)計(jì)中大的一個(gè)視覺(jué)重量(或其他點(diǎn))。 元素,首先吸引眼睛,比其他任何頁(yè)面。

小心不要使元素占主導(dǎo)地位,完全掩蓋了一切,但卻使它在設(shè)計(jì)中脫穎而出。

你的主要元素是你告訴這個(gè)故事的起點(diǎn)。 這是入口點(diǎn)到您的設(shè)計(jì)。 它應(yīng)該吸引游客首先你想讓他們看。

這就是你開(kāi)始與游客交談。 主要元素是首先注意到,為接下來(lái)的設(shè)置上下文。 在層次結(jié)構(gòu)的頂部。 它應(yīng)該強(qiáng)調(diào)你的最重要的信息,因?yàn)樗赡苁俏ㄒ粫?huì)看到任何人。 任何消息你希望人們帶走應(yīng)該清楚地傳達(dá)或接近你的主要元素。

沒(méi)有一個(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)樗鼈兊念伾?/p>

圈和三個(gè)紅色的方塊都是焦點(diǎn),因?yàn)樗麄兠摲f而出的大多數(shù)其他圖形元素。 他們與質(zhì)量的灰色方塊。 大而明亮的紅色圓圈最突出。 這是主要的焦點(diǎn),或這幅圖像的主要元素。

與主導(dǎo)元素,您可以創(chuàng)建焦點(diǎn),向他們提供更多的視覺(jué)重量比除了占主導(dǎo)地位的元素——再一次,是你最主要的焦點(diǎn)。 您還可以創(chuàng)建視覺(jué)方向,會(huì)導(dǎo)致不同的焦點(diǎn)。

您可以創(chuàng)建超過(guò)三個(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),然后你開(kāi)始創(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)地位的

• 這是最視覺(jué)重量和水平得到最多的重點(diǎn)。 你的主導(dǎo)水平通常會(huì)包含單個(gè)元素的前景。
  當(dāng)你設(shè)計(jì)不同的水平的主導(dǎo)地位,你

• 讓您的視覺(jué)層次結(jié)構(gòu)基于實(shí)際的優(yōu)先級(jí)被呈現(xiàn)的信息。 首先,優(yōu)先考慮的一切將會(huì)在頁(yè)面上,一旦它的設(shè)置,設(shè)計(jì)視覺(jué)層次按照優(yōu)先級(jí)。
  對(duì)比是一個(gè)很好的方法來(lái)創(chuàng)建焦點(diǎn),因?yàn)閷?duì)比呼吁重視本身是不同的。 任何能夠?qū)Ρ群腿魏文軌蛴绊懸曈X(jué)重量或方向可以用來(lái)創(chuàng)建一個(gè)焦點(diǎn),以同樣的方式,它可以被用來(lái)創(chuàng)建一個(gè)主要元素。 區(qū)別只是程度上的。

下屬

視覺(jué)層次結(jié)構(gòu) 創(chuàng)建視覺(jué)層次結(jié)構(gòu)的設(shè)計(jì) 在幾秒鐘內(nèi),游客應(yīng)該能夠選擇的要點(diǎn)和主要信息頁(yè)面。 他們可以這樣做如果你把最重要的信息最直觀地突出。

。 理想情況下,這種視覺(jué)層次結(jié)構(gòu)將匹配你的內(nèi)容的概念層次結(jié)構(gòu)。 如果一篇文章的標(biāo)題是更重要的不是這篇文章的標(biāo)題,那么標(biāo)題應(yīng)該更俱視覺(jué)占主導(dǎo)地位。

視覺(jué)層次結(jié)構(gòu)允許游客掃描信息。 它幫助你消息迅速和有效地溝通。 層次結(jié)構(gòu)的頂部(主要元素)應(yīng)有助于回答訪問(wèn)者可能立即登陸頁(yè)面。

逗留超過(guò)幾秒鐘的人應(yīng)該能夠通過(guò)焦點(diǎn)掃描設(shè)計(jì)中獲得下一個(gè)最重要的信息(s),你想交流,用你其他的信息等。

的倒金字塔寫(xiě)作

建立層次結(jié)構(gòu)方式設(shè)計(jì)類似于記者使用倒金字塔寫(xiě)作。 最重要的新聞都是在第一段或兩個(gè)。 主要涵蓋了誰(shuí),什么,何時(shí)、為什么以及如何。 它告訴你你需要知道的一切。

鉛是緊隨其后的是重要的細(xì)節(jié),填寫(xiě)的故事。 他們的細(xì)節(jié),提供上下文或幫助您深入了解這個(gè)故事。 文章的最后是通用和背景信息,很高興知道,但沒(méi)有必要理解發(fā)生了什么。

如果有人讀只有一兩句話,他們應(yīng)該最重要的信息。 他們逗留的時(shí)間越長(zhǎng),他們消耗的越多,他們會(huì)得到的更多細(xì)節(jié)。

視覺(jué)層次結(jié)構(gòu)相同的方式工作,但它沒(méi)有從頁(yè)面的頂部流線性。 你得到控制,人們看第一、第二等等

再一次,三個(gè)層次的主導(dǎo)地位或?qū)哟谓Y(jié)構(gòu)建議,盡管四個(gè)或五個(gè)仍然是可能的。

完形原則和視覺(jué)層次

的原因之一,我開(kāi)始這個(gè)系列的文章對(duì)格式塔原則是展示他們?nèi)绾螌?dǎo)致許多與我們合作的設(shè)計(jì)原則。

格式塔視覺(jué)層次發(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)。

這是我的意見(jiàn)。 你可能會(huì)看到一個(gè)不同的設(shè)計(jì),很好。 批判性思考的設(shè)計(jì)比達(dá)成我們所認(rèn)為的更重要。

一個(gè)事件分開(kāi)

主要元素的主頁(yè)上 一個(gè)事件分開(kāi) 頂部的形象。 這是大的元素。 它也是一個(gè)人的形象,我們通常所吸引。 對(duì)面的大白色文本圖像提供對(duì)比圖片,稱你的注意力。

文本“人網(wǎng)站設(shè)計(jì)會(huì)議”可能是最重要的信息,任何登陸頁(yè)面需要知道。 這是一個(gè)非常明確的聲明事件是什么,網(wǎng)站是誰(shuí)。 它可以說(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)和視覺(jué)層次。 重要的信息是更大的。 這是大膽的。 這可能是紅色的。 偶爾一幅畫(huà)。

如果你訪問(wèn)該頁(yè)面,只是掃描它,你仍然會(huì)離開(kāi)知道網(wǎng)站,了解是否有會(huì)議要來(lái)你的區(qū)域,和相信豐富的獎(jiǎng)狀。

支付存在

主要的元素 支付存在 的主頁(yè)是背包的圖形在頁(yè)面的頂部。 這是一個(gè)形象和大于一切。 它與周圍的環(huán)境,因?yàn)樗且粋€(gè)圖形與內(nèi)在的興趣和不同的形狀。

重點(diǎn)包括網(wǎng)站的名字,一些文本的右邊的圖形,和大綠色“下載”按鈕。 社交分享按鈕是另一個(gè)焦點(diǎn)。

看看下面的內(nèi)容,您將看到三個(gè)大圈編號(hào),作為焦點(diǎn),引導(dǎo)你附帶的內(nèi)容。

你想讀的信息。 注意上面的標(biāo)題每一段反映其附帶的圓圈的顏色,吸引你。轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)

想想圈和文本的視覺(jué)層次。 大的彩色圓(這是一個(gè)層次的)你的注意力,讓你坐在另一個(gè)層次的信息。

曼迪西姆斯

曼迪西姆斯 有一個(gè)單頁(yè)的網(wǎng)站。 頂端(不是截圖所示)包含一個(gè)曼迪的形象,這對(duì)我來(lái)說(shuō)是主要的元素。 曼迪的名字也顯示為大的文本。

然而,我想吸引你的注意力進(jìn)一步降低頁(yè)面的部分。 如您所料,部分的標(biāo)題是大的文本,因此它成為焦點(diǎn)。

焦點(diǎn)也力薦右側(cè)。 注意推薦的背景顏色與背景顏色相同的活動(dòng)鏈接菜單。

沒(méi)有閱讀的文本在這一節(jié)中,您仍然可以清楚地看到,曼迪快樂(lè)的客戶提供培訓(xùn)服務(wù),因?yàn)橐粋€(gè)層次溝通。

VANSEO設(shè)計(jì)

這最后的例子是 從我自己的網(wǎng)站 。 這是我?guī)啄昵皩?xiě)的一篇博文中。 原諒放縱,但不像其他的例子,我知道為什么頁(yè)面上的每個(gè)元素看起來(lái)的方式。 我是否成功是另一回事,但我肯定的意圖。

頁(yè)面的主標(biāo)題是占主導(dǎo)地位的元素。 這是一個(gè)博客,我希望人們閱讀,但我想給人一種之前這篇文章是關(guān)于什么他們必須投入時(shí)間來(lái)閱讀。

部分圖片也吸引眼睛,你可能會(huì)認(rèn)為它更占主導(dǎo)地位,但這樣的形象并不是可見(jiàn)的頂部每發(fā)布在網(wǎng)站上。

左上角的標(biāo)志和RSS圖標(biāo)右上的旨在突出多一點(diǎn)其他文本,所以都是紅色的。 都將脫穎而出更亮紅色,但是我不想讓人心煩意亂。 同樣的紅色也在標(biāo)題中使用。

左邊的元信息是為了脫穎而出的主要文本。 在這里,我使用當(dāng)?shù)氐目瞻?增加視覺(jué)重量的純文本。 理想情況下,有人會(huì)看一眼它并得到信息關(guān)于我和郵局的分類和標(biāo)簽。

有一件事我決定與設(shè)計(jì)使鏈接的身體明顯低于大多數(shù)網(wǎng)站。 我希望人們能夠找到他們,但是我不想讓他們把你的內(nèi)容。 我用藍(lán)色,黑色文字脫穎而出并不多,而我選擇了斜體的大膽。 的鏈接并不是為了成為焦點(diǎn),所以我不再以他們的視覺(jué)。

我希望有人登陸這個(gè)網(wǎng)站上或另一篇文章將能夠非常迅速地告訴這篇文章是關(guān)于什么,發(fā)現(xiàn)關(guān)于我的一些基本信息,比如我的名字或者網(wǎng)站的名字,之前希望看帖子。

總結(jié)

你不能強(qiáng)調(diào)一切。 為了一些元素在設(shè)計(jì)中脫穎而出,其他元素必須消失在背景中。

通過(guò)不同的視覺(jué)重量的一些元素和別人的視覺(jué)方向,你可以建立不同層次的主導(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è)視覺(jué)層次結(jié)構(gòu)在你的設(shè)計(jì),更重要的信息更直觀地突出。 它將幫助你快速而有效地與游客溝通。

我們接近這個(gè)系列的結(jié)束。 下一次,我們將看看成分流運(yùn)動(dòng)和節(jié)奏。 我將討論主要游客通過(guò)設(shè)計(jì),讓他們更容易找到信息的順序你希望他們看到它。

本文內(nèi)容來(lái)自網(wǎng)絡(luò)翻譯，翻譯的不好，請(qǐng)見(jiàn)諒！轉(zhuǎn)載請(qǐng)注明北京網(wǎng)站建設(shè)

本文題目：網(wǎng)站設(shè)計(jì)原則:優(yōu)勢(shì)、重點(diǎn)和結(jié)構(gòu)
分享地址：http://www.muchs.cn/news1/80401.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)