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

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

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

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

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

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

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

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

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

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

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

主導(dǎo)地位

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

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

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

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

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

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

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

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

• 的大小,

• 形狀,

• 的顏色,

• 值,

• 深度,

• 紋理,

• 密度,

• 飽和,

• 取向,

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

• 內(nèi)在興趣,

• 感知到的身體重量,

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

你也可以讓co-dominance,兩個主要元素存在于一個組合。 然而,爭奪注意力和最終可能會分心,沒有正確的綜合平衡你的競爭對手。

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

主要的元素

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

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

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

這就是你開始與游客交談。 主要元素是首先注意到,為接下來的設(shè)置上下文。 在層次結(jié)構(gòu)的頂部。 它應(yīng)該強調(diào)你的最重要的信息,因為它可能是唯一會看到任何人。 任何消息你希望人們帶走應(yīng)該清楚地傳達或接近你的主要元素。

沒有一個入口點,觀眾將不得不努力工作找到進入你的設(shè)計。 他們必須停下來思考,先去哪里看,思考什么是真正重要的。 缺乏入口點會增加游客的認知負荷。 不要讓他們思考。 為您的設(shè)計提供一個入口點。

焦點

焦點也元素或領(lǐng)域的主導(dǎo)地位,就不是一個級別的作為你的一個主要元素,可以被定義為最主要的焦點。 焦點是感興趣的領(lǐng)域,強調(diào)或不同組合,吸引并保留住觀眾的注意力。

重點在你的設(shè)計應(yīng)該突出但后應(yīng)注意元素最多的主導(dǎo)地位。 下圖顯示了一個孤獨的圓的海洋中大部分是灰色的方塊。 循環(huán)不僅是不同的形狀,但大而明亮的紅色。 很有可能你的眼睛注意到的第一件事的圖形。

三四個方塊也紅的顏色,雖然不是一樣明亮的圓。 他們同樣大小的圖像中其他方塊,但是他們脫穎而出的灰色方塊,因為它們的顏色。

圈和三個紅色的方塊都是焦點,因為他們脫穎而出的大多數(shù)其他圖形元素。 他們與質(zhì)量的灰色方塊。 大而明亮的紅色圓圈最突出。 這是主要的焦點,或這幅圖像的主要元素。

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

您可以創(chuàng)建超過三個層次的主導(dǎo)地位,但每個額外的級別將減少對比周邊的水平。 除非你確定你可以對比每個水平很好,堅持三個。

這是重點,除了占主導(dǎo)地位的元素或主要焦點。 就二次重點。 元素在這個層面上強調(diào)獲得低于主要級別但比下屬級別。

水平的主導(dǎo)地位

如果您創(chuàng)建焦點主要元素,使其中的一個點,然后你開始創(chuàng)建不同級別的主導(dǎo)地位。 占主導(dǎo)地位的元素將坐在一個級別,其他所有人之前都會被注意到。 剩下的焦點將坐在另一個水平。 有多少水平的優(yōu)勢能給你實際的設(shè)計嗎?

三是一個很好的數(shù)字。 作為一般規(guī)則,人們可以感知三個層次的主導(dǎo)地位。 他們注意到最主要的,最主要的,其他的一切。 這些水平需要有足夠的差別區(qū)分一個未來。 你想創(chuàng)建獨特的水平,不是一個連續(xù)體。

• 占主導(dǎo)地位的

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

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

下屬

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

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

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

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

的倒金字塔寫作

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

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

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

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

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

完形原則和視覺層次

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

格式塔視覺層次發(fā)展。 焦點是完形原則之一。 你的主要元素是一個極端的焦點。 都使用對比脫穎而出。 硬幣的另一面是相似,它幫助我們看清事物的相同。 相似度和對比度是必要的成分在層次結(jié)構(gòu)。

等法律的pragnanz和對稱創(chuàng)造秩序,使事情更加簡單和清晰。 這就是你在做什么當(dāng)你在設(shè)計建立層次結(jié)構(gòu)。 你組織設(shè)計元素建立秩序感。

主要的元素可能被視為圖。 最可能被視為地面主要組成部分。 真的,任何連接或分離有關(guān)的原則可以應(yīng)用于主導(dǎo)地位和層次結(jié)構(gòu)。

例子

正如我在本系列中,我已經(jīng)收集了一些網(wǎng)站的截圖,分享我所看到的是占主導(dǎo)地位的元素,重點和層次結(jié)構(gòu)。

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

一個事件分開

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

文本“人網(wǎng)站設(shè)計會議”可能是最重要的信息,任何登陸頁面需要知道。 這是一個非常明確的聲明事件是什么,網(wǎng)站是誰。 它可以說是一個新的人的第一件事應(yīng)該看到的網(wǎng)站。

重點包括網(wǎng)站的標志,“即將來臨的事件”,背后的黑暗背景證明設(shè)置為一個大大膽的標題。

如果您向下滾動頁面,您會注意到,設(shè)計主要使用大小和顏色來創(chuàng)建額外的焦點和視覺層次。 重要的信息是更大的。 這是大膽的。 這可能是紅色的。 偶爾一幅畫。

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

支付存在

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

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

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

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

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

曼迪西姆斯

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

然而,我想吸引你的注意力進一步降低頁面的部分。 如您所料,部分的標題是大的文本,因此它成為焦點。

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

沒有閱讀的文本在這一節(jié)中,您仍然可以清楚地看到,曼迪快樂的客戶提供培訓(xùn)服務(wù),因為一個層次溝通。

VANSEO設(shè)計

這最后的例子是 從我自己的網(wǎng)站 。 這是我?guī)啄昵皩懙囊黄┪闹小?原諒放縱,但不像其他的例子,我知道為什么頁面上的每個元素看起來的方式。 我是否成功是另一回事,但我肯定的意圖。

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

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

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

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

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

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

總結(jié)

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

通過不同的視覺重量的一些元素和別人的視覺方向,你可以建立不同層次的主導(dǎo)地位。 三個層次是理想的,他們大多數(shù)人都能辨別。

一方面將坐在你的主要元素。 這是一個入口點到你的設(shè)計,應(yīng)該是附近或在頁面上最重要的信息。 第二個級別的焦點可以關(guān)注下一個最重要的信息應(yīng)該看到游客。 你的第三個層次擁有一切。 你的大部分內(nèi)容將在這個水平。

設(shè)計不同層次的重點或主導(dǎo)地位將會創(chuàng)建一個視覺層次結(jié)構(gòu)在你的設(shè)計,更重要的信息更直觀地突出。 它將幫助你快速而有效地與游客溝通。

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

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

網(wǎng)站標題：網(wǎng)站設(shè)計原則:優(yōu)勢、重點和結(jié)構(gòu)
轉(zhuǎn)載注明：http://www.muchs.cn/news/80401.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項目有網(wǎng)站設(shè)計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)