• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI教程之版面設計構圖的原則

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-01-25 16:48

        好的設計的關鍵是什么?好的版面設計要從強大的構圖和良好的流程開始。你有沒有打開網站,或拿起小冊子或傳單尋找一些信息,卻感覺找不到你要找的東西?你可能會看到一個混亂無序的信息混亂,你甚至不知道從哪里開始 ,因為你的眼睛沒有看到設計的路徑。

        作為設計的消費者,我們都可能在某個時候體驗過這種情況。但作為設計師,確保我們的設計布局不能出現這種情況,否則讀者急于在瀏覽器中點擊后退按鈕,或者沮喪地丟棄傳單。那么好的設計的關鍵是什么?好的版面設計要從強大的構圖和良好的流程開始。

        構圖:設計師的定義

        構圖指的是:你設計的所有元素被安排創建一個有凝聚力的整體。您可能添加到設計中的實際元素,如排版、照片或圖形, 但是也會考慮“布局的整體視覺效果”(如白色或空白空間,對齊和邊距)的“不可見”元素,或者您可能用來安排設計的任何框架(如網格,黃金比例或三分法則)。良好的構圖應該以一種有意義的方式,在視覺上引導觀者的思考。

        作為流程的一個簡單的例子,這張名片有一個明顯的向下移動(箭頭形狀的幫助,從字面上指出),其信息從上到下按重要性排列。

        這種構思,關于如何將布局拼湊在一起的思考和有意識的行為,是一種適用于許多不同類型的視覺藝術的技巧,像繪畫、攝影。現在讓我們看看傳統上用來創建有效的,視覺上吸引人的作品的一些工具和技術。

        可視重量和平衡:創建一個清晰的層次結構

        一個好的作品,不僅僅是一個整齊排列的形狀、顏色和文本的結合體。每一個設計都有其目的,并向讀者傳遞信息,而且一個精心策劃的組合可以考慮設計中最重要的信息,并以一種合理的方式強化信息。通過其重要性來安排信息的過程通常被稱為建立層次結構。沒有層次結構(或不適當的層次)導致了一個混亂的設計,沒有視覺流動,我們不想看到這樣的作品。我們來看看兩個關鍵要素:明確的層級,焦點和平衡的組織:

        01.選擇一個焦點

        一個聯絡點將人們吸引到您的設計中,并讓他們有機會開始審視您的作品。如果觀眾只有幾秒鐘的時間瀏覽一下你的設計,你留下一個印象或者記住一些信息,那會是什么?這個重要元素應該是你的主要焦點,為了確保它是人們首先看到的東西,你需要找到一種方法來強調這件作品,并使其成為布局中最明顯的部分。

        該怎么做呢?通過視覺上的焦點來增加重量感。當設計元素具有視覺上的重量時,乍一看是最突出的。它在視覺上是“沉重的”,使得它在整個布局中體現出來了——你可以立刻知道它是重要的,它通過與外觀相關的東西吸引你的注意力,通常與其余的設計形成對比。有哪些技術手段使設計版面上能體現視覺焦點重量感?有很多可供選擇,包括但不限于:

        尺寸

        形狀

        顏色

        質地

        位置

        我們來看一些例子:把圖片文字放大尺寸。版面設計上中最大的圖片或者文字,可能是人們看到的第一件事。但是,有時僅靠大小還不足以使您的焦點可見; 確保你知道它是如何與設計的其余部分相互作用的。與下面的海報一樣,在你的焦點周圍作留白處理,這樣常常有助于引導讀者的眼睛。

        吸引注意與不尋常的形狀。以下廣告在多個層面上是一個有趣的作品。它首先用一種不尋常的形狀捕捉到你的眼睛,這就是吉他的輪廓。這種形狀引導你的眼睛到吉他的“頸部”,“頸部”是由廣告的正文形成的。所有這些設計選擇 ——吉他的形狀,士兵的照片,文本所講述的故事 ——以一種視覺引人入勝的方式支撐整個版面設計的構成。

        選擇突出明亮的顏色。下面的網站設計將鮮明的霓虹綠色應用于號召性用語(“下載應用程序”按鈕)。即使按鈕不是頁面上最大的對象,但是由于使用這種明亮顏色的緣故,它首先吸引了你的注意力。

        添加紋理。下面的廣告提供了復古外觀的紋理,增加了額外的視覺效果,但也轉移了設計的某些部分的注意力。請注意,“印刷店”的顏色深淺如何幫助這個詞語脫穎而出。“免運費”中的“免費”字母并非完全平穩穩定,也引起了人們的關注。

        重要視覺元素的位置。為您的焦點選擇正確的位置,將確保其用于將讀者吸引到您的設計中。作品的左上角和中心部分都是常用的選擇,但最有效的地方將取決于每個項目的具體情況和要求。

        02.平衡和組織其余部分的設計

        當焦點進入到讀者視線后,需要按照他們可以輕松瀏覽其余布局的方式進行組織。這是層級真正起作用的地方,在讀者看到你的設計時,好有一個清晰的途徑。他們的眼睛是否應該向下移動?跨越?從一個部分到另一個?



        設計中的非焦點部分,如何從焦點流向其他層級的途徑,將是成功構圖的關鍵。您可以使用我們已經討論過的一些技巧,通過布局指導讀者,但是大多數設計都將受益于整體結構或組織原則。而不是隨意地將元素投射到您的設計中,并希望它變成好的,對于構建您的構圖而言,考慮周到和有意為您的讀者創造一個更有用和更具視覺吸引力的體驗。讓我們看看一些常見的技術:

        使用網格。將您的設計與某種網格對齊是一種簡單而有效的方法,使事情整潔有序,基于網格的布局的可能性是相當無窮的。

        下面的網站設計將網格應用到網站的整體結構以及該結構中,以組織和分離信息(注意每個圖像下面的可見網格線)。其結果是一個干凈,有序的組合,建立一個清晰的方式來探索網站,并找到你需要的信息。

        嘗試“三分法則”。三分法則是視覺藝術中的經典構圖技巧,但您可能會聽到攝影師特別贊嘆。為什么?這項技術的支持者指出,當主題(或焦點)完全處于合成的中間時,是常規的和可預測的方法。為了創造一個更有活力和視覺上有趣的作品,你把焦點轉移到了一邊。三分法網格(見下面)是創建平衡但動態組合的捷徑。它將圖像或布局劃分為相等的三分之一,包括垂直和水平六行。這些線條,或理想情況下這些線條相交的四個點是放置焦點的好地方。

        這個廣告將焦點(廣告品牌的標志和名稱)直接放在作品的上半部分。還要注意折疊的錢包如何巧妙地暗示著英國國旗的形狀(這個廣告是為一家倫敦的皮具公司制作的),并指出了這個品牌的名字……這是一種被稱為“領導線”的組合技術。

        考慮對稱性。對稱性是平衡設計的最大貢獻者之一。在對稱設計中,中心軸的兩側均勻平衡,無論是垂直、水平還是徑向(從中心點輻射,通常為圓形)。即使是不對稱的對稱,也能改善布局的視覺平衡。下面的設計既有垂直對稱,又有水平對稱,所以即使它的裝飾風格有很大的輻射面和變化,它看起來仍然很平衡。

        這個活動的海報具有徑向對稱的形式。焦點是指事件名稱的一系列圖像,文字信息從那里輻射出來,平衡了圖像的視覺重量。

        留下一些空白空間。設計中的白色或空白區域不是浪費空間,而是平衡構圖的基本要素。留出足夠的空白空間,可以讓您的版面布局不至于過于混亂,并給您的設計元素留下一些喘息的空間。它還提供了讀者看設計時的眼睛路徑,以及在看布局之間休息的地方?——這對保持內容繁重的作品不受壓倒性讀者的影響,尤其重要。

        例如,這個網頁內容之間和周圍的空白,讓你的眼睛從一個部分轉到另一個部分,創造一個很好的流動感,它又是一個干凈的、清爽的風格作品。

        領導力量:創造運動路徑,引領眼球

        主要的線條是文字或暗示的線條,引導讀者的眼睛,你希望他們看到——通常是你的設計的焦點,但有時只是從布局的一個部分或元素到另一個部分。主要的線路路徑可以采取多種不同的形式,包括:

        01.對角線

        對角線可通過橫跨設計,通常從上到下,從左到右來實現,就像閱讀一本書時眼睛的視線移動方向。創造動感或暗示方向。另一種常見的技術是使用來自相反方向的兩條對角線,將用戶的注意力集中在一個點上。如果你上學的時候,曾經上過一個藝術課,一個常見的做法是畫一條延伸到遠處的道路或通道:兩條對角線從相反的方向出發,開始寬而窄,直到它們相遇被稱為“消失點”的視界,這是行動中的對角線,是構圖中創造深度和視角的最基本的方法之一。

        以下網站設計使用此概念來組織其產品圖庫。注意背景中黃色形狀所產生的對角線(以及選擇性模糊)如何在設計中產生深度感。

        在下面的例子中,請注意書封面上的主要插圖如何創建一個對著標題的對角線。那么你的目光可以回落到字幕和作者的路徑。這是一個聰明而有效的構圖設計方法,但它也是一個多用途的解決方案,它在視覺上確立了本書的主題。

        另一方面,這里的對角線移動不是由實際的線條引導的,而是由設計元素的放置和重疊所暗示的。結果是一個比傳統的基于網格的設計更具視覺吸引力的構圖。

        02. Z形狀和S曲線

        像對角線一樣,這些形狀為眼睛提供了穿越設計的途徑。Z形符合英文/西文閱讀模式(從左到右,從上到下),是許多版面設計布局的常規做法。

        雖然它們在相反的方向上運行,但是S曲線通常在自然界中出現,并且可以給作品帶來流暢的運動感。

        下面的網站設計的布局可能是非傳統的,但是它的彎曲構圖引導你的眼睛從一個部分到另一個部分,并且是視覺上感興趣的重要部分。

        03.重復線條和圖案

        重復可以引導你的目光朝某個方向看去。它可以采用重復的線條,形狀或其他方式排列的方式。重復也可以是強化視覺主題并為您的設計增添節奏感的絕佳方式。即使是重復的文本內容,如項目符號或編號列表,也可以幫助組織設計并賦予其流動感。

        以下雜志設計布局通過兩種方式重復對角線和三角形的視覺主題:在單個頁面或點差(引導讀者瀏覽內容)和整個問題(通過整個出版物創造一致性和節奏感)。

        04.人眼的凝視

        當一個人的面孔出現在版面設計中,特別是使用人物面部攝影作品時,讀者一定會注意到?——我們的大腦喜歡尋找臉部。創建細微領導線的一個有效方法是讓照片中的主題朝向設計的焦點。讀者也會跟著走,看著那里。

        在這本雜志封面上,照片中的人似乎正在審視描述問題內容的文字。但是閱讀文本會引導你回到照片。這種循環交互使您的注意力集中在封面上 ——這是一種很好的技巧。

        對你而言,學習設計作品的一些有效技巧,可以幫助您在設計美學和功能方面水平得到提升。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:ui培訓教程之毛筆字效果制作方法
        下一篇:設計師必須要了解的7個用戶行為設計原則

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>