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

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

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

分享文章：網站設計原則包括優勢、重點和結構
瀏覽地址：http://m.newbst.com/news8/76708.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

廣告

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