登录

注册

首页   /     

爲什麽我們會情不自禁地陷入精心設計的套路?

作者:   字数:2682   图片:14     浏览: 78     

就好比男人看女人的順序,臉、胸、腿、還有,你懂的?而女人看男人的順序卻截然相反 網上有很多關于圖文結合設計的讨論 ,各大産品的用法也不盡相同,但又符合各自産品的定位。在産品模塊中隻要有Feed流都會涉及到圖文結合的設計,圖文到底怎麽設計更合理。讨論最多就是用戶的閱讀順序,這确實是非常關鍵的理由,但如果都用閱讀順序來解釋的話,不符合順序的設計豈不是都沒有道理。

就好比男人看女人的順序,臉、胸、腿、還有,你懂的?而女人看男人的順序卻截然相反,高度往往是第一印象、發型是不是蓬頭垢面、穿着是不是髒兮兮的、然後才到長相、如果有下文還要看言談舉止的細節。人和人的差距咋就這麽大呢?閱讀順序對設計師來說也太難了。其實閱讀順序是可以通過設計細節引導的,我們先來看圖文結合設計的幾種順序。

圖文設計的類型

圖片設計的順序無外乎4種,左圖右文、左文右圖、上圖下文、上文下圖。不同産品據其所表達側重點的不同選擇對應的的排列方式。 左圖右文: 視覺重心是圖片,對圖片的要求稍微高點,圖片沒能吸引用戶,對轉化可能會産一定的影響。用戶優先對圖作出反饋,然後才會看到标題,所以圖片具有一定的代表性。最适合的産品類型莫過于具有商品屬性的,用戶的視覺重心先看到商品圖片;再就是使用頻率最高的社交類産品,頭像作爲一種高識别度的載體,容易讓人崩潰的是喜歡換頭像的同學。可見左圖右文設計的優勢泾渭分明,适合的産品場景也顯而易見。

左文右圖: 視覺重心仍然是圖片,但用戶的閱讀順序是從左往右,先看标題文字,标題如果不吸引人,用戶看到圖片吸引人,還會産生二次轉化,真正能産生轉化的前提還得用戶感興趣才行。所以說這種設計方式特别适合資訊推薦流,隻是特别适合,不是說資訊産品就不能采用其它方式。其實具體還是通過設計細節來權衡,下文會總結出設計細節模塊再做詳細的講述。

上圖下文: 作爲區别于左右結構的又一種設計形式,在多圖、大圖、視頻的封面設計中最多,聚焦到圖片的視覺層級變得更高,圖片的質量好不好,對引導用戶是否産生閱讀興趣的影響很大。圖片勢必被賦予了更重要的意義,好多核心标題都被表達在了封面裏。比較适合影像相冊、藝術鑒賞、視頻等類型的産品設計中。圖片的質量很高,鑒賞性也很強。

上文下圖: 用戶的閱讀順序自上而下,相比上圖下文的設計,标題被用戶優先閱讀的層級更高,但标題不是唯一的決定因素,也會受到圖片的影響,因爲大圖的呈現往往是通屏,占據的比例很大,對用戶的視覺沖擊比較大。好處就是标題内容吸引到用戶,占據用戶的心智模型,會産生先入爲主的優勢。這麽設計很适合資訊文章中的多圖、短視頻、大圖呈現類産品形式。

用戶的閱讀順序

古騰堡圖表: 古騰堡圖表又叫對角線平衡,設計理念源于約翰内斯·古騰堡的古騰堡圖表。在這個模式中眼睛通常會從左上角到右下角浏覽,缺少注意力的右上角和左下角被叫做視覺盲點。閱讀重力是由于視線趨向于從上到下,從左到右的眼動規律,左上角是第一視覺落腳點,右下角是最終視覺落腳點,所以右上角和左下角都是一個強烈的視覺盲點區域,大多數是容易被忽略的。古騰堡圖表趨向于呈現用戶的眼動規律體現出設計層級的重心。

F字形: Web易用性大師尼爾森(Jakob Nielsen)于2006年提出了F型視覺模型 ,他指出了用戶在第一次觀看頁面時,視線會呈現F字形,由頂部開始從左到右水平移動,目光下移開始從左到右觀察但是長度會相對短些,以較短的長度向下掃視,形成一個 F形狀。很多頁面的熱力圖和可以證實,但我們發現F字形的閱讀順序很容易受到設計層級影響,而且偏向網頁端。

Z字形: 移動端經常會遇到雙列的信息流設計,眼睛從左向右移動,在視線移到右上角後沿着斜對角向下方走,然後視覺再次向右移動,視覺移動的軌迹就像字母Z形狀。Z字形趨向于在移動端,雙列圖文組合的設計類型,用戶的視線來回切換,對沉浸式體驗會産生一定的影響。

影響設計的因素

從圖文結合設計的4種類型和用戶的閱讀順序中發現,影響用戶閱讀順序的并不局限在這些原則中。這些原則太容易被設計細節的引導變化而打破,同樣是左圖右文,設計引導形式的改變,就會影響到用戶的閱讀順序。比如我們以左圖右文的形式設計,左邊的圖片加上圓角、比例縮小、間距拉大、采用卡片設計等等方式,都可能會影響到信息層級的先後順序。總結出以下幾點影響視覺層級的設計細節。 卡片:卡片設計可以讓信息層級顯得茕茕孑立,瞬間脫穎而出。大大降低了受其它信息幹擾的層級,移動通欄設計中四周卡片的形式獨立層級更強,通欄卡片形式的層級次之,但如果卡片設計成兩列就會呈現上面的Z字形布局。

留白: Feed流之間的留白,在符合視覺的基礎上,留白越多,信息呈現的轉化效果越好,受到幹擾的影響越小。這裏的留白多表現爲上下分隔之間的留白,留白大點,單條信息的沉浸感越強。

比例: 圖片占據比例的大小,反饋出用戶視覺聚焦的比重。圖片比例越大,用戶的視覺負擔就越重,對文字的影響就越大。絢麗美豔的圖集可以直切内容重心,圖片比例大一點更能凸顯優勢,反之就需要降低比例,凸顯内容。

字體: 圖文結合除了上面說到的圖片還有文字,文字排列的大小、顔色、對齊方式都能引導出不同的視覺呈現。還有通過增加注釋來加強用戶對内容的理解,圖片表達出強烈視覺沖擊力,圖片背後的故事可以通過注釋更多的帶入。

線條: 線條作爲使用最多的區隔上下文的分界線。用的少了,整個界面會顯得傻傻分不清。用的多了,又會顯得出手過重,不夠簡潔。所以線條一直都是最考驗設計的元素之一。通欄線條分割線阻斷性比較強,欄目标題的意味比較強;兩邊留出空隙的分割線加強了并列的延續性;留出圖片隻分割文字區域提升了用戶的引導屬性;線的開端處留出空隙通欄結尾,這樣的線條加強引導用戶操作進入詳情。

圓角: 圓角在設計中被引用的越來越多,使用圓角更友好。因爲人眼趨向于更容易處理圓角,直角比較尖銳,生活中也有很多角容易磕碰到,現代的家居都需要做倒角。用戶對圓角的接收程度更高,帶上圓角似乎就代表了設計細節。直角傳導給視線是靜止的,而圓角的圓滑角度更容易引導視線傳遞。

互動: 在Feed流的設計層級裏,還有更小号的元素,評論、分享、作者信息等元素。卻起到了最核心的互動引導作用,内容裂變的價值在于産生互動傳播。而用戶的互動行爲也是需要設計去引導的,這樣更能凸顯設計的意義。

寫在最後

用戶眼動的閱讀順序受制于設計所呈現出來的視覺重心。圖文結合的設計形式種類無外乎4種,利用用戶的閱讀順序,通過設計細節的變化,改變視覺重心的引導層級,從而使得産品體驗設計更符合産品定位,傳遞給用戶的信息也更完善。( VV體驗 )


在线QQ

客服电话086-17612050877086-13033302157

合作咨询086-17612050877

体验店淘宝官方体验店

微信客服

工作日:9:30-18:30