如何有效劃分視覺層級?
如何有效劃分視覺層級?-移動閱讀二維碼

在我們做界面設計的時候,信息層級的重要性不言而喻,信息的優先級能更直觀地幫助產品達成業務目標。本次我們將通過兩個實際案例來分析如何有效劃分視覺層級。

Visual hierarchy01Visual hierarchy02

左右哪一張圖的重點更突出?

上圖所表達的視覺層級淺顯易懂,處理好這些層級關系需要從理解內容和需求,到如何處理信息層次這幾個方面去考慮。對于設計師來說,在心里建立起層級的這樣一個框架概念可以使設計變得更有理有據。無論是內容型的頁面,還是工具型軟件等,都需要處理內容的主次關系,引導用戶的視覺焦點,調整頁面的節奏感,降低用戶的理解成本,減少用戶的視覺疲勞。

記得以前有過這么一個說法,當你設計陷入迷茫區的時候,可以瞇著眼睛去看你的設計稿,也許在霧化的視野中會感受到一些前后的層次關系。這里所說的瞇著眼睛看設計稿的方法,也就是最簡單最直接判斷層級的偏方。

那么要如何建立視覺層級關系呢?主要有以下幾種表現方式:

大小 · 距離 · 內容形式 · 色彩

大?。?往往能最直觀的體現出層級的差距

Visual hierarchy03

 

距離:?人眼對距離臨近的信息更容易先去關注。舒適、平和的行距節奏可以幫助文字刺激讀者的研究,并激發他的思考。

Visual hierarchy04

Visual hierarchy05

Visual hierarchy06

 

能看出上下兩幅圖的視線流有什么不同嗎?

內容形式:這里指的就是帶節奏感適當的帶有變化的內容展示。

舉一個栗子:我們現在總能看到碎片化這個概念,用戶的時間越來越碎片化,內容也越來越碎片化,個性化。用戶缺乏耐心去看完一整篇長文,適當的插圖、加大段落的間隔、從頁面上都調整了整個頁面的節奏感,避免大段的文字而造成用戶的視覺疲勞和煩躁,人眼一般會先關注圖然后是文字。

Visual hierarchy07

 

色彩:如果飽和度,對比度,明度這些色彩存在明顯差異對比,就會形成一個明顯的層級,所以人會不自覺地先關注色彩鮮艷或者色彩偏重的事物。

Visual hierarchy08

Visual hierarchy09

當這些規則應用到具體設計中去時,經常會出現多種規則混搭使用的情況。

以下拿我們滬江問答的產品來做個示例:

Visual hierarchy10

這是滬江問答類的一個產品,通過左右兩圖的對比,明顯可以看出右圖的側重點。通過放大,加粗字號,變化顏色,來增加需要強調部分的重量感,達到信息層級區分的目的,有助于我們一眼看到突出的重點,從而減少了閱讀成本。

Visual hierarchy11

通過控制圖片的大小,文字的大小對比,夸張的留白間距,來做出雜志的感覺,同時更能聚焦想表達的內容

這些規則的實現需要通過以上介紹的這些方法:可以弱化及抽象不需要突出的元素的圖形,顏色,把需要突出的重點展示的信息放大,又或者調整元素之間的位置關系等等…除此之外,要針對具體情況進行分析,結合需求的目的提煉出頁面中需要突出的是什么信息。

來分享一個完整的案例:

這是一個對當前應用市場下載頁面的改版,想嘗試通過視覺展現來提高App的下載率,突出產品的重點特性,使用更抽象化,卡通的風格來展現出活潑明快親切的感覺,從而對 CCtalk?產生友好的第一印象,提升下載率。

競品調研

開始這個頁面之前,我們去看了其他產品的市場圖,較大部分是千篇一律的真實界面截圖形式,在短時間瀏覽時很難體驗到真實使用場景,更別說從截圖中抓取什么重點信息或留下印象了。

Visual hierarchy12?Visual hierarchy13

如何在幾秒的快速瀏覽過程中一眼讓用戶get到重點是我們本次改版的目標。

從文案入手開始設計

需求方給到了5組文案:

Visual hierarchy14

Visual hierarchy15

根據第一組文案所延展出來的關鍵詞,文案所表達出的是一種鏈接,包容,隨時隨地都能接觸到自己喜歡的名師,接觸到自己想要的課程的這樣一種感覺,承載鏈接匯聚這些名師,課程,各語種的平臺的主體還是小cc機器人形象,打造CC的品牌,放在下載頁第一頁的地理位置也較為符合。

Visual hierarchy16?Visual hierarchy17

在你腦中立馬浮現的是不是右圖畫面中的印象?
如果是的話,那就對啦!

Visual hierarchy18?Visual hierarchy19

(上圖為第一版)完成后總覺得整個頁面看上去有些散亂,小元素過多,重點不夠聚焦。之所以樓主會這么糾結于這些小元素的處理,可能是因為一開始就沒有想到處理層級關系的概念。

這個時候可以用到之前說的前面這些方法的結合,通過大小對比,景深前后的色彩,控制距離,弱化其它不必要的元素,來達到拉開視覺層級,使得頁面簡潔有重點。同樣的層級關系的處理方式,也適用于剩下的其它頁面,讓我們來看一下優化信息層級前后的對比圖:

Visual hierarchy20?Visual hierarchy21

Visual hierarchy22?Visual hierarchy23

雖然這個項目本身很簡單,但是在看起來簡潔簡單的背后,如何提煉出關鍵的點,處理層級關系還是非常重要的,對于任何頁面來說,如果想同時表現的東西太多,反而什么都顯得不重要了。我們做設計時心里要有主次關系的這把秤,不要為了過度的形式感把最重要的東西掩蓋掉了(其實這一點樓主也是有待加強的= =)

 

寫在最后

我們在做設計的過程中時常會遇到這樣的情況:需求內容過多,需求方又希望能在一屏內展示,盡可能地壓縮空間。個人是不贊同這樣的,產品和內容都要有主次,不會因為你排的擠一點,內容多放一點,用戶就會多看一眼;而是通過精彩的內容,舒適的閱讀感,流暢的體驗來留住用戶的。

 

原文地址:滬江UED(公眾號)
作者:醬紫 & 蝦米

本文鏈接:http://www.casaleticia.com/effective-visual-hierarchy.html
本文標簽: , ,