綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 產品經理 > 正文

交互KASH系列丨版式設計的4大準則

來源: 編輯: 時間:2019-12-24 19:36:19 閱讀:

本期《交互設計KASH系列》分享的是:版式設計原理的4大準則。

交互KASH系列丨版式設計的4大準則

古人云:“愛美之心,人皆有之”,更何況在如今這個動不動就“顏值擔當”的互聯網環境下,產品的「顏值」顯然已成為產品構建過程中的關鍵因素。

對于交互設計師或是產品經理來說,雖然產品的顏值并不由我們直接負責,但是我們工作的交付物——交互文檔/原型圖,在很大程度上需要一定的「顏值」,以及較好的版式設計能力,來保證高效、準確地向上下游傳遞產品目標和交互方案。

所以,我接下來將從「版式設計」的角度,先后分享版式設計的4大原則視覺動線,幫助大家去構建視覺設計的基礎知識框架。

版式設計的黃金準則

版式設計的目的是為了向用戶更好地表達信息,并且將信息以更好地視覺效果呈現出來。版式設計原理書籍里有一本經典之作——《寫給大家看的設計書》。

書中介紹的四大版式設計原則(對齊、重復、對比、親密)就是為以上目的服務的,好的設計往往也就是因為很好的滿足這四大黃金原則。

交互KASH系列丨版式設計的4大準則

對齊

任何元素都不能在頁面上隨意擺放。每一項都應當與頁面上的某個內容存在某種視覺聯系。不同的元素之間可能距離遠近不同,可以通過為不同的元素制造某種對齊來實現整齊有序。

盡管這些孤立元素在頁面上的物理位置可能并不靠近,但是通過適當放置,可以讓它們看上去是有聯系而且相關的,并且與其他信息統一。一個精美的設計不論最初看上去多么雜亂無章,總能找出其中的對齊方式。

交互KASH系列丨版式設計的4大準則

左邊名片上的元素就好像是隨意扔上去一樣,導致任一元素與名片上其他元素看上去沒有關聯。

當我們把所有元素都移至右側,使它們按同一種方式對齊,現在信息立刻就更有條理了。

交互KASH系列丨版式設計的4大準則

盡管在信息元素很多的信息列表頁,我們也能找出很多對齊方式,這些對齊方式的組合,可以讓頁面元素更有序高效的傳遞給用戶。例如上圖的知乎APP首頁。

重復

設計元素的表現形式需要在整個頁面中重復。重復元素可能是一種粗字體、一條粗線,某個項目符號、顏色、設計要素,某種格式、空間關系等。

重復有助于組織信息,這可以幫助讀者瀏覽各個頁面。它有利于將設計中單獨的部分統一起來。即使在一個只有一頁的文檔中,重復元素也可以建立一種連續性,將頁面「有序地組織在一起」。

交互KASH系列丨版式設計的4大準則

在天貓APP>我的頁面,我的雙11、我的訂單屬于當前頁面信息架構的第一層,所以邏輯上是并列的關系,這導致UI層面的表現形式也極度相似和「重復」;同時,我的雙11、我的訂單下包含的信息元素在邏輯上也是并列關系,所以UI表現形式也是遵循重復原則。

對比

頁面上的不同元素之間要有對比效果,幫助讀者快速捕捉到不同重要性的信息。對比對于信息的組織至關重要,讀者一眼看到文檔就能立即理解文檔的內容。要增加有意思的對比,最容易的方法就是實現字體對比,還可以利用線、顏色、元素之間的間隔、材質等形成對比。

交互KASH系列丨版式設計的4大準則

還是剛剛的頁面案例,在雙11的產品目標下,這個頁面需要將雙11主題突出顯示,所以我的雙11、我的訂單下的功能圖標UI風格作了差異化處理,其中雙11的功能圖標相比我的訂單更具獨特性,目的是更好地傳遞功能按鈕入口背后的信息量和優惠活動信息。

親密

親密原則:將相關的項組織在一起,移動這些項,使它們的物理位置相互靠近,這樣一來,相關的項將被看作凝聚為一體的一個組,而不再是一堆彼此無關的片段。

交互KASH系列丨版式設計的4大準則

我們看上面的名片案例,當你的眼睛看左邊的名片時,是不是停過5次?

這個名片上放置了5項孤立的內容。你是從哪里開始的?可能是從中間,因為中間的短句字體最粗。接下來看什么?

當我們將同類信息親密地組織到一起后,閱讀起來就會更輕松,也會更高效地理解信息。

親密性的思想并不是說所有一切都要更靠近,其真正的含義是:如果某些元素在理解上存在關聯,或者相互之間存在某種關系,那么這些元素在視覺上也應當有關聯。

交互KASH系列丨版式設計的4大準則

圖文精選:

欄目分類

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 双色球基本走势图2007