tft每日頭條

 > 圖文

 > 設計師必學的黃金法則

設計師必學的黃金法則

圖文 更新时间:2025-04-22 09:16:29

編輯導語:頁面轉化率低?用戶留存少?如何快速傳達,通過塑造視覺焦點、前置思考、米勒定律三個小技巧,教你輕松提高設計轉化率,對用戶體驗設計感興趣的看過來,看完你就明白為什麼了。

設計師必學的黃金法則(輕松提高設計轉化率)1

影響APP轉化率的因素有很多,設計也是其中重要組成部分,那設計師需要如何應對,才能助力用戶轉化呢?從用戶角度來看,助力轉化就是掃清理解障礙,提升浏覽意願與順暢度。

想要以設計語言達成以上目的,快速傳達有效信息是十分重要的一環,接下來,我們結合案例,聊聊快速傳達重要信息是如何通過節省用戶時間來助力轉化的。

一、為什麼要快速傳達

研究表明,人類在面對非自身興趣的事物時,注意力隻能高度集中 10 分鐘左右,短暫休息後再次集中注意力的時間則為7-10 分鐘[1]。

設計師必學的黃金法則(輕松提高設計轉化率)2

當用戶使用服務類APP的時間超過這個阈值後,就會因為遲遲沒有達到目的而産生焦躁情緒,随之而來的負面影響要麼是跳出到其他APP,亦或者對軟件産生厭煩感,而無論哪一種都不是我們想要看到的結果。這也就意味着,我們每次隻有20分鐘的時間讓用戶完成從篩選到下單的時間。

因此,在用戶有限的時間與精力中,迅速的傳達有效信息,不僅可以縮短用戶從挑選到下單的流程,站在用戶角度來說,因為可以快速的找到自己想要的信息,也可以讓用戶切實的感覺到這是“好用”的軟件。

因此我們需要快速傳達的理論依據就此成立:

設計師必學的黃金法則(輕松提高設計轉化率)3

二、如何快速傳達

那麼如何快速傳達有效信息呢?方法有很多,今天我們重點闡述以下三個技巧:

設計師必學的黃金法則(輕松提高設計轉化率)4

接下來我們結合實際案例看看如何運用以上手段以達到快速傳達的目的。

1. 塑造視覺焦點

什麼是視覺焦點呢?就是畫面中讓我們能多停留幾秒的視覺元素,可以是一個點,一條線,一個面,通俗來講,就是頁面中最引人注意的地方,視線上交彙集中的地方,這個位置就叫做視覺焦點,而焦點可以通過構圖,色彩運用,比例等手段進行塑造。

設計師必學的黃金法則(輕松提高設計轉化率)5

接下來我們結合十一活動的實際案例說說如何進行焦點塑造,我們需要先構建合理的視覺層次結構,好的層級能使觀者快速浏覽信息,位于層級頂層的信息也可以在最短的時間内讓人注意到。

設計師必學的黃金法則(輕松提高設計轉化率)6

根據人眼對畫面的閱讀習慣,位于頂部和正中這兩個位置的信息會最先被注意到,我們應優先将重要信息放在此處,符合了閱讀習慣之後,通過運用色彩對比,字号大小等差異化手段,可以将信息的層級提高。

設計師必學的黃金法則(輕松提高設計轉化率)7

設計師必學的黃金法則(輕松提高設計轉化率)8

大字号更容易讓人一眼看到信息,因此就算是同處高層級的信息,通過内部字号大小的對比,可以進一步細分層級,讓視覺焦點更加具體。

設計師必學的黃金法則(輕松提高設計轉化率)9

飽和度與對比色的運用同樣重要,我們将彩色的圖片去掉顔色之後可以發現,色彩關系對畫面層次的影響,通過對灰度,明暗和色相的使用,可以使焦點位信息産生視覺前推感。

視覺焦點在具體案例中的應用展示:

設計師必學的黃金法則(輕松提高設計轉化率)10

58到家活動

小結:通過構建畫面層級之後,運用字号大小和顔色對比等手段做出差異化設計,可以快速将用戶注意力吸引至焦點區域,并被引導着跳過次要區域,視線按從上到下,從左到右的順序,在各個焦點位中跳躍,從而達成我們優先傳遞重要信息的目的。

2. 前置思考過程

我們平時在想要達成某種目的時,需要先獲取大量信息,在腦内羅列整理,然後歸納出有用信息後,再進行處理。

設計師必學的黃金法則(輕松提高設計轉化率)11

用戶在使用APP時也是這樣,比如想點餐時,要挑餐廳,挑口味,挑菜品,而這一系列的信息整理過程是十分繁瑣又消耗耐性的,正因此,我們才經常面臨:不知道吃啥啊 這樣的難題。

而這個思考過程是可以通過設計語言來簡化,甚至提前完成的。通過将頁面中的信息分類後,将同類信息放置在不同組塊中的相同位置,使用相同的顔色和格式,會幫助用戶形成閱讀慣性。

設計師必學的黃金法則(輕松提高設計轉化率)12

結合十一活動案例來看,每個組件中都會包含有幾類基本信息:産品名,利益點,和下單跳轉按鈕,每個組件中的信息都在固定的區域展示。

設計師必學的黃金法則(輕松提高設計轉化率)13

同時用高飽和度的紅色來強調,在這樣的固定排列中,用戶想要取得什麼樣的信息時,可以第一時間去固定的位置尋找,大大提高了信息獲取的效率。

前置思考在具體案例中的應用展示:

設計師必學的黃金法則(輕松提高設計轉化率)14

小結:通過将畫面中的信息整理并歸類,我們可以縮短用戶的信息獲取與腦内整理歸納的時間,讓用戶将有限的時間更多的放在優惠對比與決策中去,這不但有助于提高下單率,易讀的版式也更容易讓用戶産生“好用”的感覺。

3. 米勒定律[2]

我們先來看以下兩段數字

設計師必學的黃金法則(輕松提高設計轉化率)15

是不是後一段更容易記憶,這涉及到一個叫“組塊”的概念,人腦記憶一組信息的時候,這組信息内的元素數量小于7±2時最容易記憶,具體數量因人而異,老年人的記憶數量會顯著降低。

因此一長串數字看起來毫無規律難以記憶,而3個數字一組分成多個組塊後,則容易記憶很多,同一組塊内的信息越少,越容易讓用戶記憶深刻。

這個定律對設計畫面同樣有着重要的影響,一個闆塊中如果包含了過多的組塊,不僅會讓用戶對這個闆塊的内容難以記憶,也會因為信息過多且沒有主次而大大增加篩選成本,用戶将時間過多的花費在篩選上會延長下單之前的流程,也會提高下單之前的跳出率。

設計師必學的黃金法則(輕松提高設計轉化率)16

結合我們的頁面設計來看,每一區域内的組塊分布都不超過5個,同時組塊内的信息類别也隻有圖片、産品名、簡要介紹與下遊鍊接4部分組成,通過做減法,讓重要信息可以迅速被提取,更容易被記憶。無論對于新老用戶來說,都可以有效的降低篩選成本,新用戶能更容易理解闆塊功能,老用戶則更容易記住自己想找的功能在什麼區域。

米勒定律在具體案例中的應用展示:

設計師必學的黃金法則(輕松提高設計轉化率)17

設計師必學的黃金法則(輕松提高設計轉化率)18

58到家電商首頁展示

小結:通過簡化闆塊中的信息類别,能有效縮短新老用戶尋找服務的時間,同時老用戶也更容易記住想要的闆塊在什麼位置,下次再使用的時候,迅速觸達。

三、寫在最後

作為設計師,兼顧商業化與用戶體驗是我們的必修課,好的設計不僅僅是要“好看”,更需要兼備用戶與産品兩方面的功能性,将視覺語言與心理學、行為學的結合運用,既可以有效的提升用戶體驗,提高粘性,又能縮短下單前的必要流程,提高轉化率。

注釋:

[1]出自《教書育人》2016年1期38頁,【運用心理學規律提高課堂學習效率】章節

[2]米勒(Miller,1956)的分析,人腦處理信息有一個魔法數字7(正負2)的限制,也就是說,人的大腦最多同時處理5到9個信息(chunks)。原因是短期記憶儲存空間的限制,超過9個信息團,将會使得大腦出現錯誤的概率大大提高。

作者:環鐵藝術家;58UXD

本文來源于人人都是産品經理合作媒體@58用戶體驗設計中心

題圖來自Unsplash,基于CC0協議

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved