第43件事 視覺設計的6個基本功

2022-01-15 15:48:28 字數 2537 閱讀 4739

要提公升視覺設計的審美能力,色彩搭配方面建議讀《寫給大家看的色彩書》,提高一下色彩搭配的敏感度。當然了,也打算講講視覺設計方面的基礎知識。主次、對比、相似性、分層、配色和排版是視覺設計的基本功。

1.主次

頁面需要完成的非常重要的功能或內容要放在頁面顯著的位置。越重要的內容,放的位置就越要明顯;比較重要的功能或內容,就放在比較顯著的位置;不重要的功能或內容,就放在不顯著的地方。這就是頁面的主次關係。不要主次顛倒,不重要的功能或內容強行搶占重要的功能或內容的位置,這樣會直接影響使用者的正常使用。

產品頁面如何布局,如何展示會直接影響使用者使用產品的便捷性。有主有次的布局總會讓使用者在短時間內發現自己需要的核心功能或內容;主次顛倒的布局總會導致使用者費勁尋找,甚至找了很久都沒有找到自己想要的,然後就離開了。這樣的設計使用者流失的可能性非常大。

使用者在使用產品時,通常都是掃瞄型瀏覽,即迅速捕捉對自己有用的資訊,不會花費太多的時間停留在頁面上,如果花的時間太長,還沒有捕捉到有用的資訊,使用者會很失望,從而選擇離開頁面。因此,頁面布局的重點是體現產品的核心功能和內容,核心功能或內容顯示在關鍵的位置,以便使用者在最短的時間內找到自己想要的有用資訊,完成任務。

保羅·費茨在2023年發布的費茨定律申告訴我們:指點裝置的當前位置和目標位置相距越遠,我們就需要越多的時間來移動。同時,目標的大小又會限制我們移動的速度,因為如果移動得太快,到達目標時就會停不住,因此,我們不得不根據目標的大小提前減速,這同時又會減緩到達目標的速度,從而延長到達目標的時間。目標越小,就需要越早減速,從而花費的時間就越多。這也從另外乙個方面詮釋了主次的重要性。

2.對比

生活中常說,紅花需要綠葉的陪襯,這樣才更能凸顯紅花的漂亮,這就是對比關係。重要的功能或內容通過不重要的功能或內容的陪襯,會顯得更加重要。介面中的元素要形成對雙滿足了兩種需要:首先,將介面中主動的、可操作的介面元素與被動的、不可操作的介面元素進行對比;其次,對主動元素的不同邏輯集合進行對比,以更好地表達它們的不同功能。應避免無目的或者盲目機械地使用對比,因為使用者對幾乎相同的結果會感到迷惑不解。正確使用對比會產生使用者能夠記住和識別的視覺模式,使使用者更快找到方向。對比也是一種突出介面視覺層次關係中元素地位的手段。換句話說,對比是功能和行為的表達工具。總地來說,通過對比,會使明顯的變得更加明顯,不明顯的變得更加不明顯。

3.相似性

4.分層

根據每個元素的視覺提示或主動元素所在的背景進行分層也是組織介面的一種方式。顏色視覺屬性和大小視覺屬性控制了對分層的理解。例如,深色、冷色調、不飽和色視覺層次下降;相反,亮色、暖色、飽和色視覺層次上公升。大的元素層次高,而小的元素層次低。位置上相互重疊的元素也許是視覺分層最直接的例子。為了對元素進行有效分層,必須使用最少量的對比來維持螢幕同層內各條目間的緊密相似性。確定好分組以及如何在視覺上最好地傳達分組資訊後,再根據背景的重要性,調節組與組之間的對比來決定顯示時的重要性。層間的差異要最大化,而同層各條目間的差異要最小化。

5.配色

顏色搭配是頁面視覺語言不可缺少的一部分,不同的配色給使用者傳達的資訊是不一樣的,合理的顏色搭配能夠吸更引使用者的注意力。在生活中,我們經常使用相同的顏色來表達相同性質的事物。在商務社交禮儀中,穿正裝出席正式的社交場合時,著裝最好不要超過三種顏色。同理,產品的頁面色彩要與logo統

一、相呼應,主色調和輔助色加起來不要超過三種顏色。有的產品主色調直接取自logo主色調,以恰當的色彩明度和亮度確保使用者的瀏覽舒適度。

比如,現實生活中的穿衣事件,a的打扮是:紅色的衣服+紅色的褲子+紅色的領帶+白色的襯衫。b的打扮是:灰色的衣服+灰色的褲子+紅色的領帶+白色的襯衫。很明顯,a的搭配不合適,而b的配色卻表達出了層次:60%的顏色是最淡的,也就是西服衣褲的顏色是灰色;30%的顏色比較亮,也就是襯衫的顏色是白色;10%的顏色是最亮、最醒目的,也就是領帶的顏色紅色。這樣的搭配讓人看起來很舒服,而且重點突出,配色有層次感。顏色能把使用者的注意力吸引到特定的元素上去,當某個元素的顏色與其他顏色形成反差時更是如此。相對一致性來說,使用者對物體間的差異性更為敏感。因此,在頁面中加入一些顏色,可以非常有效地把使用者的視線引入我們希望他們看到的地方。

6.排版

排版具有三個要素:分割、區塊和強調。分割指的是不能把內容資訊胡亂攪合在一起,要有區分。試想一下,圖書館的書籍一旦被人打亂攪合在一起,估計圖書館管理員肯定會一本一本地重新歸類上架,因為攪合到一起的書很難被讀者找到。分割之後是區塊,把相關聯的內容組織在乙個區塊中,可方便使用者瀏覽。區塊之後是強調,到底哪些重要,哪些不是很重要,強調突出重要的資訊。

圖6-38所示的是內容一模一樣的海報,兩種不同的排版方式,產生的效果差異卻非常大。不難看出,圖6-38中左邊的排版方式雜亂無章,密密麻麻擠在一起,使用者閱讀起來非常費勁,找到自己想要的資訊的成本比較高。而右邊的排版方式有分割、有區塊、有強調。分割體現在標題、演講內容簡介、禮品贈送、時間、地點、需要註冊等資訊中。將這些資訊分割開之後,將內容填充到了相應的區塊,比如,標題資訊區、演講內容簡介資訊區、禮品贈送資訊區、時間資訊區、地點資訊區和需要註冊資訊區。分割槽之後,分別對禮品贈送資訊和時間資訊進行加粗,給出重要資訊的強調。

處理好頁面元素之間的主次、對比、相似性和分層關係,是掌握視覺設計的基本功。另外,產品經理對色彩也要具備一定的敏感度,至少能夠分辨出主色、輔助色和點綴色。對排版和頁面布局也要有一定的敏感度。優秀的視覺設計往往能抓住使用者的眼球,吸引使用者的注意,在視覺上產生強大的衝擊力,給使用者留下深刻的印象。

第7件事 產品的5個要素

第2章 深刻認識產品 第7件事 產品的5個要素 第8件事 3步打造產品的獨特氣質 第9件事 產品定位要解決的6個問題 第10件事 向優秀產品學習的學問 產品是產品經理的孩子 只要是做過產品的人,對這句話都深有體會。產品與產品經理緊緊連在一起,就像子母劍一樣。而作為產品經理,時時刻刻都盼著自己的孩子能...

視覺設計的6個基本功

主次,對比,相似性,分層,配色和排版是視覺設計的基本功 1.主次 頁面需要完成的非常重要的功能或內容要放在頁面的顯著的位置。越重要的內容,放的位置就越要明顯 比較重要的功能或內容,就放在比較顯著的位置,不重要的功能或內容,就放在不顯著的地方。這就是頁面的主次關係。不要 產品頁面如何布局,如何展示會直...

關於MySQL應該學習的6件事

mysql由於它本身的小巧和操作的高效,在資料庫應用中越來越多的被採用。作為lamp 或wamp 開發中的重要一環,mysql值得php開發者的重視和認真學習。1.每一行命令都是用分號 作為結束 對於 mysql 第一件你必須牢記的是它的每一行命令都是用分號 作為結束的,但當一行 mysql 被插入...