自學習系統的第一課!寫新設計的界面佈局原則

對於視覺系統,我們會盡快有平面陣列的四大傳統原則:親密,相反,重複,對齊。這些面進行控制什麼樣的原則?白菜今天跟大家分享的是什麼原則的例子。

自視覺系統回顧:“過年CBMP寫的新指南知識的UI設計!”

歡迎關注微信公眾號作者:“白菜設計店”

下面的概述:

首先,接近性原則

第二,對比度的原理

三,平衡的原則

第四,類似的原理

五簡單的原則

六,封閉原則

情感的七項原則

由於篇幅的原因,今天,首批率先推出四項原則,下期再接下來我們分享。

首先,接近性原則

內容可存儲的空間,我們傾向於將其劃為一組,這就是我們所說的親密關係的原則。

如下圖所示:

這很容易成為一個和尚,進入孫悟空在一組,因為前三越近的單獨隔離的小豬。

我們來看看下面的圖片:

你能告訴標題的上方或下方所屬?

如果您在收盤後有理解的原則,你知道為什麼看不出來,這是我們學習的理論知識,因為我們看到的設計錯誤,你不能告訴他們是不是哪裡的原因摸著。

這是原則,我們如何使用它傳達設計?

見下圖:

uisdc控制-20170204-10
下圖是在一本書的項目一個簡單的列表,我們平時上班,經常會遇到這樣的發布信息。首先,我們有圖的內容有三個:分界線,而下一個內容區域劃分線。這時我們可以看到,所有的瀝青含量面積大於內容區的間距和分界線更小,因為根據親密的原則,會涉及到比較近,比較內容的內容區域分割的含量相對關聯強,所以他們有一個小間距。

這樣的間距規則還允許我們創建一個明確的區分每一條信息,該信息將不會發生故障。

親密的原則是我們排放的最常用的接口,我們必須記住它和大量的實踐,並為我們的後佈局設計打下了堅實的基礎原則之一!

第二,對比度的原理

我們頻繁的界面顯得混亂局面,但不知道為什麼,其實是因為大多數情況下都沒有明顯的反差接口導致的內容。

例如,下圖:

雖然uisdc-控制20170204-3
在親密關係的原則的身影,但似乎仍然顯得有點凌亂,這是一個很重要的原因,是因為對比的接口信息內容是足夠強,我們不知道去哪裡找!

我們期待在今天的頭條新聞排版信息:


你會發現重要信息和次要信息大小比較是非常強的,所以我們專注於關鍵信息(標題),神情所以不會散。

閱讀這篇佈局,攤開來解決上述問題後,它會更容易?你不嘗試卸載障礙本身,所以做更令人印象深刻。

我們通常要研究一些比較獨特的,排水良好的分析為什麼好的,壞的獨家你需要分析為什麼它是壞的,你只能通過這種連續的刻意練習更好地成長,你你紮實推進。

回主題,實際上比水平的大小,以及通過對比的方式色彩對比得多,厚度,形狀,相反,密度對比度比較等,所以我們有方程排版,則可以考慮多維,無法找到合適的解決方案會。

三,平衡的原則

平衡是最重要的原則佈局界面佈局,整個官方網站,一個簡短的視頻,我們都需要控制良好的視覺平衡。

一些例子:


花哨的圖形,我們可以看到圖像上下左對齊文本,設計的目的,實現右圖設置VIP圖標數量的視覺平衡和更新。

讓我們來看看下面的圖片:

我們都不會感到陌生了整個頁面,向右傾斜的角落,因為它不遵循平衡原則,而當我們在底部移動的按鈕在右邊,如下圖所示:


由整個頁面注意到





新聞中心