全栈工程师?
嗯.....目前并不是!

設計總比別人的差一點? 那是因為你沒關注細節!

為何一個設計的細節點會使人在感覺上的差異那麼大呢?為什麼優秀的作品都叫做“別人的設計”?本文將為告訴你問題的答案。

很多時候總會常常覺得,為什麼自己做的界面看起來總是沒有別人的漂亮,為什麼同樣的風格設計,同樣差不多的設計時間,同樣的設計軟件,但出來的效果總是比別人差一點?到底是哪裡出了問題?

這種問題往往會在一些剛入行的設計師身上出現(當然也有一些工作數年的設計師),其實出現這些問題並不是因為你的能力太差或者說什麼審美出現問題,很大的原因就在於你沒有關注設計細節!

那麼什麼是設計細節,設計細節又包括什麼?為什麼說設計上的細節會讓我們之間的設計效果看上去會有明顯的差異呢?接下來讓我們一同來探討一下。

說到設計細節,我這裡借用一下來自Robin Williams編寫的《寫給大家看的設計書》上所提到的“4大基本原則”,這“4大基本原則”包含了我認為在設計細節上最關鍵的四個部分:對比(Contrast)、重複(Repetition)、對齊(Alignment)、親密性(Proximity)

幾乎每一個優秀的設計都一定會包含這“4大基本原則”,那麼我們應該如何在設計上去運用這些原則,去幫助我們提升設計的質量,接下來我們結合實際項目去逐一的分析。

對比(Contrast)

什麼是對比呢?相信很多設計師馬上會想到關於設計界面上的字體大小、顏色深淺、圖形大小、線條寬細等等這些元素的比較。而這些不同元素的比較就是在界面上建立一種有組織的層次結構,讓界面上的元素避免太過相似,從而達到吸引眼球的效果,這就是對比。

當然,對比不單單隻是用作在界面上吸引用戶的眼球。他還是設計細節上非常重要的一步環節,適當的運用對比,可以讓設計界面上的不同層級更加清晰,通過元素對比在頁面上指引讀者,並且製造焦點。

讓我們來看看下面這個視覺案例,對比對於界面的細節提升有多到的幫助。

如圖1-1上所顯示,上面的“關注話題”按鈕的各種狀態,你能分辨得出都什麼樣的狀態嗎?

如圖1-1

很明顯上面的“關注話題”按鈕的狀態樣式都是一樣的,按鈕元素樣式設計上並沒有建立一種層次結構,導致用戶無法快速通過當前樣式快速判斷當前到底是一種怎麼樣的狀態。另外“關注話題”與“已關注”的樣式設計上也過於相似,這樣也會明顯降低用戶對於按鈕狀態切換的感知,不利於用戶的體驗感受。

那麼我們應該如去適當運用對比,讓體驗更加優秀呢?我們再來看看圖1-2所顯示,同樣還是“關注話題”的按鈕狀態切換,這次你應該能快速分辨出按鈕的當前狀態含義。從左到右分別是“未關注狀態、鼠標選中狀態,鼠標點擊狀態、已選中狀態”。

我們這次通過讓按鈕在不同狀態下,通過按鈕填充的顏色,文字的顏色,描邊的顏色等元素的比較,達到區分不同按鈕狀態的目的,讓用戶可以快速通過當前元素對比辨別出當前的按鈕狀態,提升按鈕之間的交互體驗,這就是我們通常所講的設計細節中的對比關係。

如圖1-2

我們再來看下一個例子,如圖1-3這是金蝶雲社區的一條回答卡片,卡片里包含了回答者姓名、職位、贊同次數、回答內容、編輯日期。雖然說信息的組織上沒有問題,但是卻不利於用戶通過快速瀏覽卡片獲取相關信息。這是因為卡片上設計的信息缺少對比,他們所用的字體和顏色幾乎一樣,這樣所有的信息層級都會粘在一起,不利於區分。

我們再來對比一下圖1-4,明顯信息展示上都有了醒目的對比,根據信息不同的層級,改變其字體的大小和顏色,有助於突出對比效果,用戶瀏覽時也可以更快通過字體的對比變化,快速獲取需要的信息。所以運用對比可以讓卡片信息更加清晰,表達更加清楚。

如圖1-3

如圖1-4

當然對比在設計上的運用除了上面提到的兩種案例之外,還有更多的方式,包括形狀、顏色、大小、空間等。但無論是哪種方式,最終的目的都是為了讓設計上的信息層級更加利於用戶理解,讓信息有更強的可讀性,也讓界面有更強的對比性。

重複(Repetition)

看到標題,相信很多設計師都會覺得好奇,重複是什麼意思?難道是要重複使用同一種元素設計?我們來看看《寫給大家看的設計書》上Robin對於重複原則的說明:設計的某些方面需要在整個作品中重複。重複元素可以是一種字體、一條粗線、某個項目符號、顏色、設計要素、某種格式、空間關係等。用戶能看到的任何方面都可以作為重複元素。

看到這裡,我們大概可以理解為重複指的是界面設計上的“一致性”。此“一致性”可以讓界面上不同的信息元素通過視覺表現成為一體,保證了設計樣式的統一,也同時加強了用戶瀏覽時的記憶。當然不是所有的元素都能隨便重複使用,我們需要讓這些元素建立一種連續性,讓他們在界面上更像一群整體。

接下來我們還是通過兩個案例來進一步分析探索重複在於界面設計上的運用方式。

我們先來看第一個案例,如圖2-1顯示,案例設計為金蝶雲社區中的提問卡片,雖然這三張卡片都為同一類型卡片並且信息展示層級也相同,但是從視覺上明顯的會讓用戶覺得這三張卡片並不統一,原因出在哪裡?其實就出現在三張卡片並沒有保持界面設計上的“一致性”,如“提問作者“以及”提問內容“。字體的大小以及字體的粗細都各不相同,所以這三張卡片同為提問卡片,但是裡面的元素並沒有建立一種連續性,那麼用戶就無法感受到卡片的一致性。

如圖2-1

所以為了保證卡片視覺上的“一致性”,我們必須要讓卡片的信息元素重複,例如圖2-2所顯示,這次明顯可以感受到卡片在設計上的統一性,原因就在於每張卡片里相對應的元素設計樣式都是重複相同的。從設計上來說,重複的元素設計可以保持界面上的“一致性”,從而幫助用戶在瀏覽時快速分辨相同模塊內容,增強閱讀簡易性。

如圖2-2

除了上述案例提到的文字元素的重複原則,我們還能重複其他的設計元素來讓我們的界面保持“一致性”,如圖2-3,除了文字元素設計樣式的重複使用,還包括了按鈕元素的設計、標題與內容分割線的元素設計,以及插畫元素的風格設計。其實這些元素的重複都讓我們的界面設計更加統一。

如圖2-3

在設計上,我們除了可以對單張頁面上的設計元素使用重複原則,也可以使用在多張頁面上,讓他們連在一起,從而達到增強整個作品的統一性。但使用重複原則時必須要有個控制的範圍,不然過多對某種元素重複使用,會使得頁面整體缺少對比性,反而讓頁面在感覺上會不舒服。

對齊(Alignment)

說到對齊相信很多設計師都不會陌生,因為他算是我們設計裡面最基礎的原則了,但往往也是我們剛入行的設計師們最用容易出問題的地方,尤其是在頁面空間設計的把控上,很多設計師在設計一個界面時,往往只會考慮把需要展示的文字、圖片、圖標等元素網上一堆就完事了,完全沒有考慮頁面空間上的排版布局,從而給人一種雜亂無章的感覺,這也是往往出現最多的問題。因為很多設計師在做設計的時候根本沒有思考,只會追尋美感來做,這樣連基本設計原則都沒有的界面,只能說是一種畫,而不是設計。

我們再次借用《寫給大家看的設計書》上Robin對於對齊原則的說明:任何元素都不能在頁面上隨意安放。每一項都應當與頁面上的某個內容存在某種視覺聯繫,對齊原則要求特別小心,再不能像從前那樣,只要頁面上剛好有空間就把元素隨意“扔”到那裡。

讓我們來看看如圖3-1的這個案例,這是一篇社區上的話題文章,我們可以出設計師在對文章排版的時候,直接就把文章里所有的內容已居中的格式來展現,這種局中的排版格式第一眼給人一種很業餘的水平,而且整體的空間感會顯得比較凌亂,無法突出重要信息。

如圖3-1

讓我們來試試讓整篇文章採取左對齊試試,如圖3-2顯示,明顯感覺到文章空間排版更加的整齊,尤其對文章中標題、作者、內容有更好的層級表現關係,才能突出你想要用戶第一眼想注重到的信息。所以我們在設計這類型的文章排版時,盡量讓內容元素對齊排版,這樣頁面統一而且有條理。

如圖3-2

除了上面所述關於界面整體的元素對齊原則,還有一種情況,是我們新手設計師常常容易發生的,就是細節上的對齊。我們來看看如圖3-3顯示,乍一看上去好像沒什麼問題,但仔細一看就能發現裡面標題與數字並沒有對齊,這就使得卡片看上並沒那麼精緻,也是新手經常會出現的問題,給到用戶一種非常不用心設計的感受。但其實要解決也是非常簡單,只要我們把標題和數字居中對齊再看看,如圖3-4,是不是立馬讓卡片精緻了許多,內容更加的工整,馬上跟圖3-3拉開了檔次,這就是為什麼你的設計總是別人差那麼一點,原因其實非常簡單,細節決定一切。

如圖3-3

如圖3-4

無論是整體的元素對齊還是細節上的對齊,只要運用得當都能讓你的界面質量提升一個檔次,對齊的根本目的就是使頁面統一而且有條理,所以,請牢記對齊原則,一定能讓你的界面更加的精美。當然我們也要注意,對齊儘可能的保持統一,不要一個左對齊,一個右對齊,反而得不償失。

親密性(Proximity)

最後就是我們的親密性原則,關於親密性相信很多設計師在剛開始學設計的時候都會出現過這樣的現象,在設計中,整個界面被填充的滿滿的,生怕一絲的空白會讓領導覺得你沒有認真做設計,各種元素被放的密密麻麻的,一看就知道有多親密,但,這是我們想要的親密性嗎?不是的,親密性原則不是指你把元素放的有多滿,而是指將相關有聯繫的信息以及元素組織在一起,增強他們的關聯性。

同樣我們借用《寫給大家看的設計書》上Robin對於親密性原則的說明:將相關的元素組織在一起,移動這些元素,使它們的物理位置互相靠近,這樣一來,相關的項將被看作凝聚為一體的一個組,而不再是一堆彼此無關的片段。

所以說親密性不是指得你的元素再見面上放得有多滿,而是指要把有相關聯繫信息的元素靠近放在一起,讓用戶能馬上了解頁面的組織和內容。

我們來看看以下這個例子,如圖4-1顯示,大家能快速的辨別出“在線客服”對應的是哪個圖標呢?相信很多用戶都會錯誤的把“重新註冊”的圖標當成了“在線客服”,因為這個頁面原本相關聯繫的元素並沒有被靠近的移動在一起,這樣一來他們之間的聯繫就直接被斷開了,而並無關聯的元素又因為被錯誤的聯繫在一起,導致用戶直接就會理解錯誤,所以一定要正確的使用親密性原則,把相關聯繫信息的元素組合放一起,這樣用戶才會聯想他們之間的關係。例如圖4-2顯示,當我們把相關聯繫的元素信息組合放在一起后,明顯的他們的關係層級一下子就清晰了,用戶也能很輕鬆的快速辨別相對應的圖標是哪一個,這就是我們應該需要注意的親密性原則。

如圖4-1

如圖4-2

那是不是只有相關聯繫的元素組合在一起才叫親密性原則?當然也不是,親密性不單單指的是是相關元素都要靠近,有些時候,也需要給它們一些空間。我們再來看多一個案例,如圖4-3顯示,這張“課程信息“界面,乍一看感覺整體設計並沒有太大的問題,但總覺在設計細節上差那麼一點感覺,尤其是“課程描述” 、“ 適用人群”和“配套課件”之間的信息過於貼近,這樣我們就無法分辨出它們之間的關係,用戶也就無法快速理解界面裡面的信息內容,其實問題就出現在信息與信息之間缺少必要的空白,這樣相關聯繫的信息就無法展示他們的親密性,從而沒辦法組織他們的關聯性。

如圖4-3

其實我們只需要在相關聯的信息旁給一些空白空間,如圖4-4顯示,讓真正相關聯的信息組合在一起,形成一段一段的組合,讓有聯繫的信息具有更近的親密性,這樣我們就很很輕鬆直觀的分辨出界面每一段的信息內容了,視覺上也更加的美觀。

如圖4-4

親密性的根本目的是實現組織性,所以我們在界面設計時要靈活運用親密性原則,組合關聯信息這樣信息才更有條理性和組織性,用戶瀏覽界面時才更容易讀區信息也更容易理解。

相信看到這裡,各位應該能明白為什麼你的設計總是比別人差那麼一點,原因就在於你自己對於設計細節的追求,而對於剛入行不久的設計新手,非常建議閱讀來自Robin Williams編寫的《寫給大家看的設計書》,尤其對於“4大基本原則”會有更詳細的解說,最後希望大家能夠更多的關注設計細節,提升升級能力。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《設計總比別人的差一點? 那是因為你沒關注細節!》
文章链接:https://www.pmbear.com/%e8%a8%ad%e8%a8%88%e7%b8%bd%e6%af%94%e5%88%a5%e4%ba%ba%e7%9a%84%e5%b7%ae%e4%b8%80%e9%bb%9e%ef%bc%9f-%e9%82%a3%e6%98%af%e5%9b%a0%e7%82%ba%e4%bd%a0%e6%b2%92%e9%97%9c%e6%b3%a8%e7%b4%b0%e7%af%80%ef%bc%81/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们