100期两码中特:關于各大APP標簽欄設計的研究總結

  • A+
所屬分類:經驗思維

香港两码中特 www.wtoaa.icu 本文來源: 澤澤先生(公眾號:澤澤先生的設計筆記), 共 9337 字

本篇文章的研究對象是國內主流的 56 個 APP 的標簽欄,主要涵蓋 BAT 及京東、網易等大廠的各類產品,選擇類型上基本達到了隨機抽樣”的要求(這里的隨機指的是覆蓋大廠的各種類型的移動端設計),樣本數量超過 30 個。

本篇文章從標簽欄的圖標、細節呈現方式及微交互三部分出發,對標簽欄的色彩選擇、版式設計、字體選擇、圖標設計等多個方面進行分析,希望能夠通過多方面分析得出有價值的結論,從而更好地指導我們對標簽欄的設計。

目錄

一、圖標部分

(一)圖標條的粗細

(二)標簽欄及圖標大小規范

(三)圖標的變換形式

(四)圖標組的對齊方式

(五)圖標與文字視覺感官的一致性

二、細節呈現方式

(一)與內容區的分隔方式——細線 or 陰影?

(二)角標的表現形式

(三)圖文排版

三、微交互

四、尾巴

一、圖標部分

(一)圖標線條的粗細

1、概念

內腔:由圖標線條圍成的空間。

特征線索:構成圖標的關鍵特征,也正是因為這些特征,才讓某個圖標成為這個圖標,而不是別的圖標。如下圖所示,構成設置圖標的特征線索在于突出的“矩形”,在去掉矩形部分后,設置圖標也就不再是設置圖標了。

關于各大APP標簽欄設計的研究總結

視覺噪音:妨礙人們感覺器官對所接收的信息源信息理解的因素

2、分析

首先聲明,本文所有的像素大小都是針對 3 倍的倍率,56 個 APP 中,有 38 個 APP 使用線性圖標作為未選中態圖標,而這 38 個 APP 中,主要有 3px、4px、6px 三種線條粗細,每種線條寬度下的圖標數量如下:

圖標采用 3px 線條粗細的標簽欄共計 15 個,如下圖美團 APP 標簽欄圖標線條粗細為 3px。

關于各大APP標簽欄設計的研究總結

圖標采用 4px 的線條粗細的標簽欄共計 20 個,如下圖網易新聞 APP 標簽欄圖標線條粗細為 4px。

關于各大APP標簽欄設計的研究總結

圖標采用 6px 線條粗細的標簽欄共計 3 個,如下圖站酷 APP 標簽欄圖線條粗細為 6px。

關于各大APP標簽欄設計的研究總結

在以上 38 個 APP 中,有 92.1% 的 APP ?標簽欄圖標線條寬度都是 3px與4px 的細線條,其余7.9%的 APP 標簽欄圖標線條寬度為 6px 。

(1)3px、4px 細線條圖標分析

如下是出自《寫給大家看的色彩書:色彩怎么選,設計怎么做》中的一段話。

“不論是著裝、畫漫畫,還是產品包裝,亦或者是廣告片,低色彩量給人的感覺是優雅而高檔的,高色彩量體現出一種積極和健康?!?/p>

細線條就意味著更少的色彩量,是用色上的克制,能夠突出精致感及高檔感,如下圖網易嚴選標簽欄所示,標簽欄圖標線條寬度為 4px,選中態圖標也是線性圖標,目的在于體現優雅及高檔,當然這里的細也得有個范圍,并不是越細越好,上文中已提及,在 3 倍的倍率下,圖標最細就是 3px ,更細的圖標在3倍的倍率下,線條不能以整數呈現,會出現虛邊,例:如果采用 1px 的,那么在屏幕上實現顯示時是1/3=0.333pt,既影響顯示效果,也會影響美感。

另外較細線條的優勢在于占用的“內腔”空間少,能夠更好的展現圖標的特征線索。

關于各大APP標簽欄設計的研究總結

(2)6px粗線條圖標分析

使用 6px 作為標簽欄圖標線條寬度的 APP 較少,使用范圍主要是俏皮可愛的類型,如下圖所示,閑的標簽欄圖標線條寬度就是 6px 。

關于各大APP標簽欄設計的研究總結

在繪制線條較粗的圖標時我們需要注意,若圖標本身細節過多,易產生視覺噪音,如下圖加粗版設置圖標所示,當然這么粗確實有些夸張,我這里主要是想說明問題...

關于各大APP標簽欄設計的研究總結

(二)標簽欄及圖標大小規范

1、分析

(1)標簽欄大小規范

iOS 設計規范中對標簽欄的高度定為 49pt ,這里會有個問題:50pt 不可以嗎?如果你選擇尺寸更大或更小的標簽欄你要明白你為什么要這么做?除非有十分充足的理由,否則使用統一的尺寸從系統整體層面對用戶更友好,在能夠保證使用的情況下,大家都一樣高有什么不好呢?

(2)圖標大小規范

iOS 設計規范中對標簽欄圖標的大小規范如下圖所示,通常為了確保新老用戶都能夠識別標簽欄圖標的指代意義,我們會在圖標下方加入10pt 的文字加以說明,文字需要言簡意賅,簡短有效傳遞信息是標簽欄文案的基本要求。

同樣的問題:標簽欄圖標不能大一點或小一點嗎?相對標簽欄的大小而言,圖標大小的靈活性大一些,但大小須大于 iOS 設計規范規定的 22 pt 的最小可按壓大小,另外還需要注意圖標設計老生常談的一些事項,我們從下圖也可以看出,為了保證圖標看起來大小一樣,iOS 設計規范要求設計師按照圓、方、扁、長幾種形式對圖標對號入座,從而營造大小看起來一樣的感覺。

關于各大APP標簽欄設計的研究總結

(三)圖標的變換形式

1、概念

視覺重量:畫面中元素給人的重量感。注意,這里是重量感,也就是從人類的視覺出發,越重要的元素,它的“視覺重量”越大。例:對于人類,任何畫面中出現一個“同類”(也就是另外一個人),它都比其他元素更加吸引人。這里不繼續展開來說,大家有興趣可以在網上搜一搜。

2、分析

將 56 個標簽欄圖標選中態與未選中態之間變換形式的數據統計如下:

關于各大APP標簽欄設計的研究總結

以下是我從數據中得出的結論及進一步的分析:

(1)線型(未選中態)-面型(選中態)變換形式在所有變換形式中占比最大,為 46.4 %, 接近整體的一半。僅從選中態來說,選中態為面型圖標占整體的比例為 76.75%(序號 1 和序號 2 選中態均為面型,二者比例相加)。

線型(未選中態)-面型(選中態)變換形式占比為 46.4 %。

線型圖標與面型圖標視覺重量差距較大,相比上方表格中其他四種變換形式,線到面這種形式的變換給用戶的反饋是最強烈的,在用戶點擊后,相對其他變換形式能夠更快發現點擊位置,這是絕大多數 APP 使用這種變換形式的主要原因。

僅從選中態來說,選中態為面型圖標占整體的比例為 76.75%.

圖標選中態與未選中態功能不同,選中態是讓用戶知道自己在哪,而未選中態是讓用戶知道自己將要去哪。

選中態圖標,相比線性圖標、線性填充等形式,彩色面型圖標有最大的視覺重量,加之與周圍無彩色系未選中態圖標的對比,能夠讓用戶快速辨別自己在哪,這是絕對數量的 APP 使用彩色面性圖標作為選中態圖標的原因。

這里多說兩句,在未選中態圖標的設計上,微信的標簽欄設計確實有很多值得學習的地方,如下圖所示,微信的標簽欄未選中態圖標使用的的是純黑色(#000000)的線型圖標,微信通過明度最低的黑色與底層淺灰之間的對比,讓用戶迅速辨識未選中態的圖標是什么,且未影響與選中態圖標之間的優先級關系。(關于優先級關系下文有詳細論述。)

關于各大APP標簽欄設計的研究總結

當然,使用線型圖標作為未選中態圖標也不見得就很完美,線型圖標需要避免視覺噪音,也就是避免“內腔”出現空間過小,或者細節過多的情況,如下圖“扳手 1 ”圖標所示,圖標加入了很多沒必要的細節,增加用戶視覺負擔,而“扳手 2 ”圖標僅保留了關鍵的特征線索,但絲毫沒有影響可識別性。

關于各大APP標簽欄設計的研究總結

如果使用面性圖標作為未選中態圖標是否可行呢?當然也可以,但未選中態圖標明度不能過低,否則從視覺重量的角度,如下圖所示,選中態與未選中態差距不明顯,可能會對用戶造成困擾,這里我們需要把握的是在可識別性與優先級關系之間的度。

關于各大APP標簽欄設計的研究總結

(2)線型(未選中態)-線型(選中態)變化占比為 5.9 %。

使用這種變換方式的 APP 比例是很少的,這從側面反映了這種形式可能存在一些問題,導致它不受歡迎。如下是我的分析:

第一,從線到線的視覺重量差距較小,相對其他方式辨識“自己在哪”的成本上升;

第二,這里存在一個矛盾,未選中態線型圖標若采用較深無彩色系會導致與選中態差別小,若選淡色導致識別性下降。

當然,這種變換形式也不是一無是處,畢竟還是有產品中意這種呈現形式的,如上文圖標線條的粗細部分的分析,它的優點在于較低的用色量,能夠更好的傳遞出精致感。是否選擇這種變換形式,還要綜合產品的設計目標,來做出選擇。

(四)圖標組的對齊方式

1、概念

圖標組:標簽欄中圖標+下方說明文字”的組合。

2、分析

圖標組的對齊方式主要有以下兩種:

(1)均分屏幕并將圖標組在每個??櫓芯又卸云?。

如下圖造作、網易蝸牛閱讀的標簽欄所示,均采用的是這種對齊方式,這種對齊方式是 APP 標簽欄圖標的最主要對齊方式。

關于各大APP標簽欄設計的研究總結

(2)減去全局邊距后均分其余屏幕將圖標組在每個??櫓芯又卸云?。

如下圖所示,one 采用的就是這種方式,這種排列方式能夠使得圖標更緊湊,對于標簽欄僅有三個圖標的 APP 較為適用,能夠避免標簽欄圖標之間相隔太遠,不便在每個圖標之間切換的情況發生。 除標簽欄有 3 個圖標 APP 有適合這種設計方式,當然 iPad 的標簽欄圖標也得是這種設計方式,除此之外,上一種方式會是更好地方式,畢竟上一種方式距離間隔只有一種,秩序性更強。

關于各大APP標簽欄設計的研究總結

(五)圖標與文字視覺感官的一致性

1、 概念

視覺感官的一致性:這是我們上文所說的視覺重量概念的延展,在圖標與文字之間要保持視覺重量的相對一致性,注意,這里指的是相對一致性,也就是在色彩、線條粗細等視覺效果上傳遞出的二者之間的感覺是一致的。

2、分析

在 56 個標簽欄中,48 個標簽欄在未選中態,圖標與文字在視覺(包括色彩及粗細)上展現一致。但其中有 8 個標簽欄圖標與文字在未選中態視覺表現上是不一致的,這 8 個“異類”引發了我的一些思考,如下圖騰訊體育標簽欄所示,在未選中態中圖標色彩的明度低于文字,文字在粗細上也明顯細于圖標。

關于各大APP標簽欄設計的研究總結

從功能上來說,文字與圖標二者之間是否存在一個視覺瀏覽的優先級差別呢?

毫無疑問用戶先看到的是圖標,文字只是起到輔助說明。也就是說二者在大小這個維度上已經有明顯的區別,那么問題又來了,是否需要再增加其他兩個維度的區分(色彩深淺與線條粗細一致性)來增強差異性?

解決以上問題前,我們無非將大問題化為小問題,也就是再解決如下兩個問題:

1、從大小、色彩、線條粗細三個維度都進行差異化設計會帶來什么?

上文中騰訊體育的例子是典型的三維度差異化設計,我們可以看出什么?

由于文字的弱化,圖標的存在感得到明顯加強,二者視覺的層次感也得到了提升。從這個角度來說,我認為在標簽欄圖標上加入更多動效的圖標更適合以這種形式進行呈現,原因在于這種形式能夠? ? 將用戶更多的注意力放在圖標的精美設計之上。(這里不是說不加動效就不精美。)

2、單維度(大?。┎鉅旎?,其余維度進行一致性設計又會帶來什么?

上文微信標簽欄圖標就是單維度(大?。┎鉅旎杓頻睦?,在未在圖標中加入動效的情況下,以文字+圖標成組的形式呈現,這種設計方式會讓圖標與文字的整體性得到加強,主次之分的感覺得到削弱。

綜上所述,我的觀點是除非二者中,圖標確實有值得強調的點,那么我們可以進行多維度差異化設計,否則大小一個維度對二者進行區分就足夠。

二、細節呈現部分

(一)標簽欄區與內容區的分隔方式——細線 or 陰影?

1、分析

首先需要對標簽欄與 APP 內容區各元素之間有優先級進行分析。

結論:優先級由高到低:標簽欄選中態圖標>內容區>標簽欄未選中態圖標>標簽欄底層,我們一個一個來說理由。

標簽欄選中態圖標>內容區:(1)首先用戶得知道自己在哪,有了方向感之后,才能知道自己關注的內容是什么,這就相當于你在看文章之前,得先看題目,再瀏覽內容;2、標簽欄各圖標之間相對內容區有更大的留白空間,外加較多的選中態圖標采用彩色面性的呈現形式,使得用戶的注意力被吸引到選中態圖標之上。

內容區>標簽欄未選中態圖標:1、產品能夠立足的原因就在于它的內容及功能,這也應該是產品最吸引用戶的地方;2、從形式上來說,內容區多彩的內容,自然會比未選中態圖標及標簽欄底層無彩色系更吸引用戶。

標簽欄未選中態圖標>標簽欄底層:當用戶瀏覽完這一部分(選中態圖標那一部分內容)內容之后,會去標簽欄尋找還有什么可以關注,也就是未選中態圖標,而標簽欄底層作為底層只要能夠凸顯標簽欄圖標就足夠,不要添亂,安靜的待在角落就 OK ,更何況標簽欄底層大部分以白色為主,小部分是淺灰色,也就決定了標簽欄底層不會是吸睛的地方,在底層之上的圖標當然視覺優先級更高。

現在進入正題:分隔方式選擇投影 or 細線?

首先談談二者的區別。

(1)淺灰色細線。簡潔、干練,能夠使畫面顯得干凈、整潔,但對標簽欄與內容區之間的層級區分度不夠。

(2)投影。能夠更大程度上區分標簽欄與內容區之間的層級關系,但缺少簡潔感,使得界面稍顯拖沓,也不符合現在扁平化的潮流。

似乎兩種方式都有優勢,那我們能不能兼具兩者的優點,既簡潔干練,又層次感鮮明,有沒有第三種方式?有,如下圖所示微信再一次給出了它的答案。

關于各大APP標簽欄設計的研究總結

微信標簽欄組成:淺灰色底層+灰色細線+純黑色未選中態圖標+彩色面性選中態圖標。

(1)通過淺灰色(后退色)底層保證與內容區(內容區使用純白色底層,白色為前進色。)的層級區分,從而達到投影的效果;

(2)使用灰色細線,進一步強化內容區與標簽欄區域的區分度與層次感,也完全符合我們上文中談到的各元素之間的優先級關系;

(3)圖標部分的優點在上文已作分析,這里不在贅述。

微信通過以上三種方式,使得淺灰色細線與投影的優點集于一身,且避免了投影存在的問題,值得我們學習。

(二)角標的表現形式(英文是badge,又叫徽標或者小紅點)

1、概念

角標:如下圖一、二所示,角標通常指出現在圖標右上角的紅色圓點(下文簡稱小紅點)或紅色圓形(圓角矩形、類圓角矩形,包括之上數字、文字),表示有新內容或者待處理信息,標簽欄上的角標主要是下圖一所示的兩種形式,也就是本部分的主要研究對象。

設置角標的目的在于引導用戶點擊新信息或向用戶傳遞數量信息,在用戶查看完新信息后,角標會消失。(購物車是你把東西清空之后角標就消失了...)

關于各大APP標簽欄設計的研究總結

2、分析

研究標簽欄角標,我主要從角標呈現形式出發,將色彩、角標大小、帶數字或文字圓形(圓角矩形、類圓角矩形)中字體的選擇及字體占到底層(背景)的比例、層級關系(角標與圖標之間的層級關系及如何通過設計呈現層級關系)這四部分作為研究對象,具體分析如下:

涉及表示數量的圓形角標使用范圍主要是在社交及電商類的 APP (社交產品是展示接收到的消息數量,電商類產品包括呈現接收到的消息及購物車放入的商品數量),應用場景相對較少,但大多數 APP 都會用到小紅點。

(1)色彩

其實我們在日常 APP 使用中也能夠發現,絕大多數的角標用色都是紅色,使用紅色的原因在于相對其他色彩,紅色性格強烈、外露,能夠立即吸引用戶注意力,但部分品牌色為橙色或其他暖色系色彩的 APP 也會使用其品牌色作為角標色彩,如下圖所示,小米商城標簽欄使用橙色(品牌色)作為角標的色彩,橙色等暖色系色彩相對紅色而言對用戶的視覺沖擊不是很強烈,但能夠使得產品整體配色保持一致,更加美觀。

關于各大APP標簽欄設計的研究總結

(2)角標大小

經過對十余個 APP 角標大小的“實地測量”,在 3 倍的倍率下,小紅點大小區間在17-25 px之間,紅色圓形(圓角矩形、類圓角矩形的高度)大小區間在34-50 px 之間。

從以上數據可以獲得的信息除兩種形式角標本身的大小范圍外,我們可以觀察到二者的大小關系比例接近 2:1,針對兩種角標形式都存在的產品,我們可以使用 2:1 的比例去增強設計的秩序性,從而提升美感。

(3)字體及占比關系

字體

如下圖 QQ 和網易嚴選的標簽欄角標所示,字體都是無襯線體,除了與系統字體保持一致性的考慮外,無襯線體更少的細節也是為了在相對有限的空間內增強文字的辨識性,畢竟在如此狹小的空間內,襯線體的細節相對較多容易產生視覺噪音。

關于各大APP標簽欄設計的研究總結

占比關系

如下圖所示,這是我對紅色圓形(圓角矩形、類圓角矩形的高度)中字體占到底層的比例的"實地測量",我在計算這種占比關系時,主要通過底層圓形、圓角矩形兩種形式區分進行統計分析。

底層為圓形

關于各大APP標簽欄設計的研究總結

底層為圓角矩形

關于各大APP標簽欄設計的研究總結

底層為圓形:通過以上數據可以看出,字體與底層的比例關系接近1:2,使用1:2的比例在于避免過于擁擠的空間給用戶造成閱讀困難;

底層為圓角矩形:字體與圓角矩形的高度比例同樣接近1:2;字體距上下側距離:字體距左右側距離=1:1.2,橫向更長的目的在于能夠引導用戶從左到右進行閱讀。

(4)層級關系

這里的層級關系指的是角標(小紅點、紅色圓形)與圖標之間的視覺層級關系,也就是二者之間視覺瀏覽的優先級。從角標的用色來看,幾乎所有角標的色彩都是紅色,少部分是橙色等暖色系色彩,角標與圖標的呈現主要分以下兩種情況:

第一種,如下圖網易嚴選標簽欄所示,角標出現在未選中態圖標上。圖標在未選中態幾乎都是無彩色系,在這種情況下,紅色(暖色系)面性角標肯定會首先被發現,角標的優先級是高于圖標的;

關于各大APP標簽欄設計的研究總結

第二種,角標出現在選中態圖標上。如下圖所示,類似微信、微博、今日頭條等社交類 APP ,在用戶未刷新或者未閱讀新消息之前,即使切換到選中態圖標角標依然存在,這種情況下,圖標與角標誰的優先級更高?答案還是角標,第一,角標在圖標之上;第二,角標屬于圖標的“身外之物”,用戶會首先注意到不屬于圖標本體的那部分角標;第三,在選中態圖標不是紅色的情況下,使用紅色的角標自然會被優先看到,畢竟紅色本身的特性決定了對用戶有強烈的吸引力。

關于各大APP標簽欄設計的研究總結

在以下的分析中,通過小紅點與圓形(圓角矩形、類圓角矩形)兩類對角標的位置進行分析。

小紅點:如下圖所示,小紅點的放置方式主要有以下三種,如果選擇其中最好的一種,我會選擇愛奇藝對小紅點的放置方式。原因在于從角標功能實現的角度來說,在圖標外圍放置角標,基于格式塔原理,并不會影響角標吸引用戶點擊的目的,二者依然在較近的距離成組出現,從用戶心理來說,用戶對于消除小紅點這個不屬于圖標的幾何形狀并沒有改變,而將小紅點覆蓋在圖標之上,影響圖標的完整性呈現,在未顯著增強功能且影響美感的情況下,這種放置效果就不是更好的選擇。

(1)知乎:小紅點位于圖標之上,在小紅點上加入白色描邊。

關于各大APP標簽欄設計的研究總結

(2)網易嚴?。盒『斕鬮揮諭急曛?,不加白色描邊。

關于各大APP標簽欄設計的研究總結

(3)愛奇藝:小紅點位于圖標外。

關于各大APP標簽欄設計的研究總結

在選出愛奇藝對小紅點的放置方式后,下一步就想知道愛奇藝都把角標放哪了,是否有依據可循?

先明確一點,在我們對產品的日常使用中也能夠無發現,所有 APP 中的角標都位于圖標的右上角,可能是出于避免對用戶產生過強干擾的考慮,畢竟幾乎所有角標都是紅色等暖色系色彩,加之從用戶視角,左上角是用戶最先看到的位置,紅色+左上角的組合會對用戶產生過強的干擾,將角標置于右上角的位置會相對緩和這種強干擾。

回歸正題,為了進一步細化角標位置,如下圖所示,經過我的“實地測量”發現小紅點是緊靠在繪制圖標的框外,小紅點的上邊緣與圖標外框的上邊緣保持平齊。這是愛奇藝對小紅點的放置方式,呈現形式不一定非得是這樣,只是提供一個參考。

關于各大APP標簽欄設計的研究總結

圓形(圓角矩形、類圓角矩形):這種形式的角標視覺重量較大,接近于圖標本身,若使用小紅點的放置方式,會有兩點問題,第一,占用空間;第二,具體的數字提醒相比小紅點屬于更具體的強提醒,通過放置在圖標之上的方式,能夠提升角標的重要性。

如下圖所示是京東商場與網易嚴選購物車角標的尺寸關系。(均是3倍的倍率下的尺寸。)

(1)京東商城標簽欄購物車圖標角標尺寸:

關于各大APP標簽欄設計的研究總結

(2)網易嚴選標簽欄購物車圖標角標尺寸

關于各大APP標簽欄設計的研究總結

我們可以發現,京東商城角標與圖標框線的關系是以1:3為主。保留在圖標框線以內的角標縱向寬度(21px):圖標框線(63px)的寬度=1:3;超出圖標框線以外的角標橫向高度(11px):圖標框線(33px)的高度=1:3。

網易嚴選角標與圖標框線的關系是以1:2為主。保留在圖標框線以內的角標縱向寬度(29px):圖標框線(58px)的寬度=1:2,角標上邊緣與圖標框線上邊緣平齊。

通過以上的數據分析,以上兩種放置形式,我傾向于京東商城的放置形式,原因在于這種形式通過在圖標與角標之間加入空隙,位置位于左上角的形式使得圖標與角標之間的層級更加清晰。另外,無論哪種方式,我們都應該能夠感受到大廠對于細節的重視,這是我們需要學習的。

(三)圖文排版

1、 分析

標簽欄上圖標、文字的排版主要有以下三種。(這里我將標簽欄中圖標、文字與其余空間的間隔分為三部分,用紅藍兩種線條表示)

(1)上下間距等寬,中間間距寬度是上下寬度的 1/2,如下圖微信標簽欄所示。

關于各大APP標簽欄設計的研究總結

(2)下方兩部分空間高度一致,均為頂部寬度的1/2,如下圖微博標簽欄所示。

關于各大APP標簽欄設計的研究總結

(3)三部分寬度等寬,如下圖淘寶標簽欄所示。

關于各大APP標簽欄設計的研究總結

以上三種排版方式中,哪一種是個更好的排版方式?

首先,我們需要明確圖標和文字之間的關系是什么?由于文字是對圖標的輔助說明,因此圖標與它下方的文字是以整體的形式出現的,根據格式塔原理的接近性:物體間的相對距離將影響我們感知他們是否在一起。因此圖標與文字之間需要足夠接近,或者說相比周圍的其他空間,二者要看起來足夠接近。第一種微信的排版方式,圖標與文字既在垂直方向上居中對齊,圖標與文字之間的距離相比上下兩部分間隔而言又足夠接近,圖標與文字是以整體的形式呈現的,保證了秩序性與可理解性,是我認為的最好的排版方式。而其他兩種方式,都相對只能滿足秩序性,而不能展現圖標于文字的成組性。

三、微交互

1、 概念

在《微交互:細節設計成就卓越產品》這本書中對微交互的定義是產品通過交互來實現功能的細節。微交互和功能的區別在于規模和范圍,功能一般都比較復雜,而微交互是相對簡單的。說白了,微交互是功能的細節組成部分,例:對一個閱讀類的 APP 而言,閱讀書籍是它的功能,而翻頁動效的實現就屬于微交互。

2、 分析

標簽欄上的微交互,除去幾乎全部 APP 標簽欄都有的線—線,線—面,面—面等形式變換告知用戶“自己在哪”以外,在我研究分析的 56 個 APP 標簽欄中,有 18 個 APP 標簽欄加入了動效微交互,通過更加細致的動效變化,增強用戶體驗。這些動效微交互主要分為四類:

(1)通過在標簽欄底層加入水波蕩漾的效果,給予用戶點擊的反饋。如下圖得到 APP 所示。

關于各大APP標簽欄設計的研究總結

(2)在用戶點按圖標時增加模擬心跳等動效,如下圖飛所示。

關于各大APP標簽欄設計的研究總結

(3)將被選中圖標擬人化,并在被選中時通過動效展示。如下圖站酷所示。

關于各大APP標簽欄設計的研究總結

(4)在被選中圖標周圍增加點綴。如下圖京東金融所示。

關于各大APP標簽欄設計的研究總結

在對以上四種動效進行分析的過程中,我產生了疑問:為什么大部分 APP 并未增加微交互?這在我們日常使用 APP 的過程中也可以發現,尤其是加入較為吸引用戶眼球的動效更是極少數;

做好基礎功能這是第一位的,動效微交互是加分項,但通過以上數據我們可以發現,在此次的樣本中,有 67.86% ?APP 標簽欄圖標未增加動效微交互。原因是什么?難道是產品的軟件工程師太懶了?能力不行?這都是大廠的產品啊,我更傾向于是產品本身的設計理念決定了不需要加入動效微交互,對這部分未加入動效的產品而言,圖標本身從未選中態到選中態的形式變換,足夠傳遞“我在哪”的信息給用戶?;故悄薔浠?,做任何設計我們都需要從產品出發,你產品的設計理念是什么,面向的用戶群體是哪些人,這些決定了你是否應該在標簽欄圖標上加入微交互動效,或者說應該加入哪種動效。例:當你要加入擬人化、Q彈的動效,你要考慮可愛這個方向的設計理念是你要的嗎?當你要在選中態圖標周圍加入裝飾,這種相對更有活力的風格符合設計理念嗎?我們要知道的是我們是在設計,而不是在炫技,一定要克制自己炫技的欲望,而去做用戶體驗更好的產品。

四、尾巴

正確的道理總是以一些你可能看過很多遍的語句呈現出來,以至于你早已忽視?!吧鈧寫硬蝗鄙倜?,只是缺少發現美的眼睛?!閉餼浠熬湍芄環從澄頤嗆芏噯說奶氐?,很多時候我們“跋山涉水”去尋找好的設計,殊不知好設計確實就在你身邊,多觀察多分析你周圍的世界,這是我們作為設計師應該做的。

另外,這篇文章如有論證不足之處,希望各位有任何問題都可以提出,接受認真的探討。最后,感謝你們的閱讀,希望對你們有所啟發。

?

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: