首頁

UI 場景中的 Banner 布局樣式探索

天宇 移動端UI設(shè)計文章及欣賞

今天給大家探討關(guān)于產(chǎn)品設(shè)計中的布局樣式分析,希望通過本文的梳理和大家一起做一次探索,解析優(yōu)秀案例的經(jīng)驗。

 

 

Banner 對于設(shè)計師來說并不陌生,更多的還是在于視覺表現(xiàn)的環(huán)節(jié),作為視覺設(shè)計師來說是重點培養(yǎng)的能力之一。今天給大家探討的關(guān)于 UI 場景中的 Banner 布局樣式,并非是視覺層面的探索,而是關(guān)于產(chǎn)品設(shè)計中的布局樣式分析。

 

在產(chǎn)品中出現(xiàn) Banner 圖是比較常見的基礎(chǔ)功能,除了在其視覺創(chuàng)意層面不斷探索精進以外,UI 層面的樣式布局也在不斷嘗試更多不同的表現(xiàn),希望通過本文的梳理和大家一起做一次探索,解析優(yōu)秀案例的經(jīng)驗。

 

 

 

分享目錄

 

一、Banner 視覺層表現(xiàn)類別

二、Banner 布局樣式分析

三、移動端線上案例分析

四、總結(jié)

 

 

 

一、Banner 視覺層表現(xiàn)類別

 

Banner 在 UI 場景中通常伴隨著輪播的形式展示,所以也經(jīng)常稱之為輪播圖,這也是導(dǎo)航的一種形式之一,也有輪播導(dǎo)航的功能。在產(chǎn)品中出現(xiàn)可以帶給用戶平臺需要重點傳播的內(nèi)容,比如活動信息和官宣咨詢等。

 

為了能引起用戶更高的關(guān)注度,Banner 在視覺層的表現(xiàn)上面也在不斷的創(chuàng)新。除了 Banner 設(shè)計創(chuàng)意、構(gòu)圖、配色等視覺層面發(fā)揮以外,在表現(xiàn)類別上面我分為靜態(tài)、動態(tài)、視頻、分層視差等。

 

 

 

1.1 靜態(tài) Banner 展示

靜態(tài)的輪播圖是最常見的,無論是設(shè)計效率還是技術(shù)落地都是最為便利的。Banner 畫面為靜態(tài)的圖片格式,在產(chǎn)品中分為單圖和多圖,單圖是靜態(tài)的展示形式,多圖可以自動輪播和手動滑動切換。

 

 

 

1.2 動態(tài) Banner 展示

動態(tài)表現(xiàn)的 Banner 相較于靜態(tài)而言更能引起用戶的關(guān)注度,強化信息重點,在一些重點元素和行動按鈕等地方實行動態(tài)表現(xiàn)。

 

如果采用動態(tài)的形式表現(xiàn),通常為單圖的居多。動態(tài)表現(xiàn)可以引起高關(guān)注度,但是如果過多也會形成互相干擾,反而削弱了關(guān)注度。

 

在這個信息爆炸的互聯(lián)網(wǎng)環(huán)境中,產(chǎn)品設(shè)計師都在不斷的嘗試如何更快、更準(zhǔn)地獲得用戶的關(guān)注度。微動效無疑是一個不錯的選擇,無論是在功能交互還是視覺表現(xiàn)層面,都隨處可見。

 

 

 

1.3 視頻嵌入展示

視頻廣告由來已久,隨著短視頻的走熱,視頻嵌入到輪播廣告中逐漸增多。較多的表現(xiàn)形式為默認出現(xiàn)在首個 Banner 中,伴隨著倒計時出現(xiàn),也可以關(guān)閉播放。此類廣告為了降低用戶在未知場景中的使用干擾,通常為靜音模式,帶給用戶更加友好的體驗。

 

也有一些產(chǎn)品欄目采用多個視頻輪播的形式,這個應(yīng)用場景相對較少,一些影視產(chǎn)品偶爾運用。

 

 

 

1.4 分層視差效果展示

為了帶給用戶不一樣的視覺呈現(xiàn)和互動體驗,也逐漸出現(xiàn)一些打破常規(guī)表現(xiàn)形式的輪播廣告。分層視差效果是其中變化較大的一種,有輪播疊加的視差、3D翻轉(zhuǎn)、元素和背景分離視差等。

 

元素或者背景之間的運動差異必將引起用戶高度的關(guān)注,帶來提高關(guān)注度的目的。產(chǎn)品設(shè)計師也在不斷嘗試更多分層視差的效果,帶給用戶不一樣的廣告體驗。

 

 

 

小結(jié)

Banner 在視覺表現(xiàn)層的創(chuàng)新有助于提高用戶對內(nèi)容的關(guān)注度,作為產(chǎn)品設(shè)計師我們都在不斷的嘗試更多可能性,除了在創(chuàng)意布局和色彩構(gòu)成等方面發(fā)揮以外,表現(xiàn)形式的差異也是至關(guān)重要。

 

 

 

二、Banner 布局樣式分析

 

鎖定了 Banner 的視覺表現(xiàn)形式以后,我們來分析一下 Banner 在界面布局中的樣式。造成布局差異的因素較多,比如 Banner 比例、大小、通欄、分欄、孤立還是背景對比等。

 

首先我們來看看通欄和分欄的差別,這個因素會影響 Banner 所能呈現(xiàn)的大小。常規(guī)理解都覺得 Banner 越大越好,如果考慮到產(chǎn)品內(nèi)容布局和信息層級區(qū)分方面,也會注意到整個界面布局的舒適度。所以,界面整體的風(fēng)格和布局樣式也會影響 Banner 布局樣式,需要融合而非格格不入。

 

 

如果遇到一些界面布局頭部采用深色,在布局 Banner 的時候為了讓空間感更強,也會讓 Banner 布局于頭部背景上層。通常背景色為固定色值和變動色值,變動色值會根據(jù)輪播圖的色彩來定義背景色值,這樣的設(shè)計解決方案不僅融合度高且空間感強。

 

關(guān)于 Banner 的比例是很多產(chǎn)品設(shè)計師不斷探索的方向,比例影響高度值的控制。界面布局內(nèi)容量的不同影響高度值的不同,根據(jù)內(nèi)容自定義也是可行的方法之一。也有設(shè)計師會根據(jù)斐波那契數(shù)列計算,推薦出寬高比例有 8:5、8:3、8:2、8:1 等,在計算的過程中我們通常取能被 4 整除的數(shù)值。

 

我們將 Banner 的寬度值定義為:W,高度值定義為:H,比值關(guān)系用:Y( Y 為 5/8、3/8、2/8、1/8 等)。得出計算公式:H=W*Y,得出來的值取能被 4 整數(shù)的數(shù)值即可。這只是其中一種計算形式,設(shè)計師也可以根據(jù)具體布局情況進行自定義,設(shè)計不是一層不變的方法論,而是做適合具體情況的解決方案。

 

 

關(guān)于布局樣式的分析遠不止此,拋磚引玉,經(jīng)驗總結(jié)只是一個起步,探索與創(chuàng)新才能突破更多可能性。

 

 

 

三、移動端線上案例分析

 

經(jīng)驗總結(jié)很大程度上都會根據(jù)已有的優(yōu)秀案例進行分析,立足于成功案例之上才能更切實際。通過大量的產(chǎn)品體驗日記,梳理出同屬性的不同解決方案,下面便為大家推薦一些上線案例分析。

 

 

3.1 常規(guī)形式運用最為普及

Banner 圖的運用組合元素為圖片層和輪播點,通過不同的滑動交互形式來形成不一樣的變化。常見的都是單純的 Banner 圖、輪播點、滑動切換組合,圖片本身以直角或者圓角、通欄或者分欄來呈現(xiàn),這個需要結(jié)合整體的風(fēng)格來定;輪播點的形式比較多樣,也有不顯示輪播點的形式,以顯示待輪播圖片來替代。

 

 

比如騰訊視頻、愛奇藝、優(yōu)酷、芒果TV等常用的影視類 App 中,就各自以不同的形式顯示輪播 Banner。騰訊視頻分欄顯示待輪播圖和直角風(fēng)格,愛奇藝通欄顯示和輪播點配合,優(yōu)酷圓角風(fēng)格配合輪播點,芒果TV通欄呈現(xiàn)融合背景且營造前后空間感。

 

 

 

3.2 自然而流暢的縮放切換

除了在圖片層和輪播點進行設(shè)計發(fā)揮以外,Banner 圖的切換交互也是一種探索的方向,自然而流暢的交互形式能帶給用戶舒適的體驗。比如 MOO 音樂采用縮放過度的形式來進行 Banner 輪播,這種自然而流暢的形式,給人一種非常舒適的操作體驗。

 

 

 

3.3 背景色隨著 Banner 輪播而變化

界面頭部視覺表現(xiàn)為了提高用戶關(guān)注度,利用深色表現(xiàn)更能體現(xiàn)空間感和襯托 Banner 效果。通常為品牌色進行襯托,也有很多產(chǎn)品會利用 Banner 進行取色,作為背景色的選擇范圍,這樣更具融合性和視覺表現(xiàn)差異。背景色隨著 Banner 輪播而變化,是比較普遍的一種設(shè)計方案,視覺體驗感很好。

 

 

 

3.4 以進度條的形式表達輪播控制

Banner 圖的輪播控制常規(guī)的做法是以點的形式呈現(xiàn)或者左右兩側(cè)露出待輪播 Banner,最近在淘票票 App 中發(fā)現(xiàn)了一種新的表達,以進度條的形式呈現(xiàn),非常直觀的讓用戶可以判斷出還有多少 Banner 處于待輪播狀態(tài)。這樣的表現(xiàn)形式也和觀影時視頻的進度一致,不僅匹配了產(chǎn)品屬性,也能更加直觀的呈現(xiàn)輪播效果,帶給用戶全新的體驗。

 

 

 

3.5 模擬舞臺背景呈現(xiàn)輪播 Banner

在界面布局中空間感的營造可以讓信息對比更加明顯,考拉海購就將 Banner 作為背景來搭建一個具有空間感的舞臺,使得整個界面延伸出更強的深度空間感。Banner 輪播默認以淡入淡出的形式,也可以手動滑動輪播,區(qū)別電商產(chǎn)品同質(zhì)化表現(xiàn),帶給用戶不一樣的視覺感官體驗。

 

 

 

3.6 異形廣告,打破常規(guī)視覺呈現(xiàn)

有時候方方正正的布局讓人感覺受到了一定的束縛,也有一些產(chǎn)品在 Banner 呈現(xiàn)的形式上面不斷打破邊界的束縛,異形廣告的運用逐漸變得頻繁。最簡單的異形廣告是在畫面本身突破束縛,整體的結(jié)構(gòu)布局還是在固定的造型里面,比如騰訊動漫 App 推薦板塊的輪播 Banner。

 

 

除了在 Banner 設(shè)計本身進行突破束縛以外,也有在造型上面進行變化的,比如膠囊形狀,也稱之為膠囊廣告;在邊界分割上面除了直線以外,也有采用弧形分割或者特殊形狀分割等。

 

 

 

3.7 微動效增強用戶關(guān)注度

動效在產(chǎn)品設(shè)計中已經(jīng)運用非常頻繁,在 Banner 圖的設(shè)計中也會有所涉及,相較于靜態(tài)的呈現(xiàn)方式來說更能引起用戶的關(guān)注度。為了不帶給用戶過多的信息干擾,通常都是單圖呈現(xiàn),這樣也能將焦點強化。

 

 

通常都是個別元素進行微動效,來體現(xiàn)動感效果,在主 Banner 中相對少見,次級和異形廣告中運用廣泛。

 

 

 

3.8 視頻廣告嵌入,不破壞只融合

視頻廣告的運用是比較常見的,在保持原有 Banner 布局不變的情況下嵌入到結(jié)構(gòu)中,引起用戶的關(guān)注度。通常為自動播放的形式,為了降低用戶在未知場景中的使用干擾,默認靜音模式。有倒計時的伴隨著關(guān)閉操作,也有一些提供重播的操作,播放結(jié)束自動翻頁。

 

 

除了單個視頻嵌入以外,也有 Banner 全部采用短視頻的方式,不過相對較少。

 

 

 

3.9 卡片疊加滑動提升輪播空間感

在探索手勢操作上面,便捷度、流暢度、體驗感都是至關(guān)重要的?;瑒?Banner 過程中的體驗感能帶給用戶對于當(dāng)前內(nèi)容的關(guān)注程度,便于操作的同時能引起用戶的好奇心更是重中之重。

 

蝦米音樂的樂庫便是結(jié)合了眾多設(shè)計思考,卡片疊加帶來視覺呈現(xiàn)的空間感,手勢滑動流暢自然,主題文案隨著滑動而變化顯示或者隱藏,帶給用戶更加友好的選擇體驗。

 

 

 

3.10 主題元素分層視差帶來輪播新玩法

為了提高用戶對輪播廣告的關(guān)注度,突破已有的表現(xiàn)形式是設(shè)計師不斷思考的方向。

 

自如 App 端的做法引起了我的關(guān)注,將主題元素和背景層進行分離,主題元素進行輪播的同時背景層漸隱呈現(xiàn)。不一樣的視覺表現(xiàn)和輪播形式,帶來了 Banner 輪播形式的新玩法。

 

 

 

 

四、總結(jié)

 

Banner 在很多產(chǎn)品中是較為常見的元素存在,UI 場景中的 Banner 布局樣式探索是為了在進行結(jié)構(gòu)布局的時候,我們可以嘗試出更多不一樣的解決方案。一個好的體驗也許只是一個細節(jié)的探索,如果能在每一個功能設(shè)計的時候都能把控每一個細節(jié),必能帶給用戶更好的使用體驗。

 

本文雖然不是講解如何設(shè)計 Banner 圖本身,但是關(guān)于 Banner 的布局形式、造型特征、內(nèi)容表達形式等在產(chǎn)品設(shè)計中的運用,也是起到非常關(guān)鍵的因素。希望通過這種形式的梳理,可以帶給你更多的幫助。

 

文中案例來源于日常的產(chǎn)品體驗日記整理,將具備同屬性的內(nèi)容進行歸類梳理,形成可指導(dǎo)的設(shè)計建議是一種探索思考的過程。希望這個思路可以拋磚引玉,和大家一起探索產(chǎn)品設(shè)計中更多用戶體驗和感官體驗的設(shè)計解決方案。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTE4Njc2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

底部標(biāo)簽導(dǎo)航設(shè)計的千奇百態(tài)

天宇 移動端UI設(shè)計文章及欣賞

作為 UI 設(shè)計師來說,掌握產(chǎn)品設(shè)計中的每個組成要素是非常必要的,所謂精細化的設(shè)計就是把控好每一個細節(jié)的深入。隨著大屏手機的普及,在人機交互的探索上面設(shè)計師追求著更多提高用戶體驗的設(shè)計方式,不過萬變不離其宗,用戶體驗沉淀下來的行為習(xí)慣依然影響著我們的設(shè)計。

 

就拿導(dǎo)航設(shè)計來深入探索,隨著產(chǎn)品設(shè)計的不斷推進,很多新穎的設(shè)計呈現(xiàn)帶給用戶更多的操作體驗。本文就以移動端底部標(biāo)簽欄導(dǎo)航為案例分析,和大家一起探索一下底部標(biāo)簽欄導(dǎo)航設(shè)計的千奇百態(tài)。

 

 

 

 

分享目錄

 

一、關(guān)于底部標(biāo)簽導(dǎo)航

二、UI 設(shè)計注意事項

三、UI 表現(xiàn)層類別分析

四、移動端線上案例分析

五、總結(jié)

 

 

 

一、關(guān)于底部標(biāo)簽導(dǎo)航

 

移動端導(dǎo)航欄設(shè)計相當(dāng)于自身的骨架,是支撐產(chǎn)品中功能交互和內(nèi)容傳播的血肉。導(dǎo)航系統(tǒng)指引著用戶的操作軌跡,引導(dǎo)用戶抵達目的地和進行相關(guān)的操作,將零散的內(nèi)容和功能進行組織形成結(jié)構(gòu)化的可視軌跡。導(dǎo)航的存在因此顯得格外重要,也是梳理功能結(jié)構(gòu)需要重點確定的內(nèi)容,以此來形成整個產(chǎn)品的脈絡(luò)。

 

 

移動端導(dǎo)航欄比較常見的有:底部標(biāo)簽欄導(dǎo)航、舵式導(dǎo)航、頂部標(biāo)簽(Tab)導(dǎo)航、宮格式導(dǎo)航、輪播(平鋪)式導(dǎo)航、懸浮 icon 導(dǎo)航、列表式導(dǎo)航欄、抽屜式導(dǎo)航、下拉導(dǎo)航/菜單導(dǎo)航等等。我們比較常見的產(chǎn)品中采用底部標(biāo)簽欄導(dǎo)航的居多,便于用戶進行頻繁的操作,這也是本文接下來重點和大家探索的話題方向。

 

在移動端產(chǎn)品中底部標(biāo)簽欄導(dǎo)航是最常用的導(dǎo)航模式,常作為一級目錄的導(dǎo)航,位于產(chǎn)品界面底部。根據(jù)用戶對于界面的操作熱區(qū)來看,底部是用戶可以輕松點擊的區(qū)域,無論用戶單手還是雙手操作都十分便利。

 

在底部標(biāo)簽欄導(dǎo)航的基礎(chǔ)上進行拓展欄設(shè)計也是比較常見的形式,也就是舵式導(dǎo)航。突出中間的功能強化用戶的關(guān)注度,引導(dǎo)用戶使用更多延展功能。底部標(biāo)簽欄導(dǎo)航和底部(舵式)拓展欄都屬于底部導(dǎo)航的范圍,本文將會重點以此類型為主進行梳理。

 

 

 

 

二、UI 設(shè)計注意事項

 

底部標(biāo)簽欄導(dǎo)航非常直觀的告訴用戶當(dāng)前的位置,也便于用戶進行同一層級間的不同模塊切換。由于具有很強的包容性,不會與其他功能模塊形成干擾,也能與多種導(dǎo)航模式進行組合使用。

 

底部標(biāo)簽欄導(dǎo)航在模塊的選擇上面通常是 3-5 個,比較常見的為 5 個,3 個模塊相對比較松散,運用案例不是很多,除非業(yè)務(wù)功能較少。在設(shè)計表現(xiàn)形式上面有:icon + 文字、純 icon、純文字形式,比較主流的還是 icon + 文字的形式,可以降低用戶的理解成本和記憶負擔(dān),提高用戶的操作體驗。

 

 

底部(舵式)拓展欄是為了突出中間功能設(shè)計,吸引用戶關(guān)注度,提高更多隱藏功能的使用概率。這種導(dǎo)航模式較為常見,比如轉(zhuǎn)轉(zhuǎn)、抖音、馬蜂窩旅游、閑魚等等均有使用??梢蕴岣邔?dǎo)航欄設(shè)計的趣味性和特征性,引導(dǎo)用戶操作更多功能和貢獻更多內(nèi)容。不過這樣的設(shè)計由于關(guān)注度被吸引,進而影響其它一級模塊的關(guān)注度,由于隱藏的功能增加了用戶的記憶負擔(dān)和操作負擔(dān),利弊權(quán)衡需要產(chǎn)品設(shè)計師進行評估。

 

在進行設(shè)計的過程中,功能模塊的確定需要起到牽引的重要作用,鏈接起整個產(chǎn)品的功能脈絡(luò);設(shè)計表現(xiàn)上面需要區(qū)分默認和點擊狀態(tài),可以跳出規(guī)范的束縛,但是需要在不影響其它業(yè)務(wù)模塊的前提下進行。

 

 

 

 

三、UI 表現(xiàn)層類別分析

 

底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面也是千奇百態(tài),除了常規(guī)的置底形式,設(shè)計師也發(fā)散了更多新穎的表現(xiàn)。突破現(xiàn)有規(guī)范的束縛,不被固有化思維所限制,才能不斷的進行設(shè)計創(chuàng)新。

 

 

3.1 最穩(wěn)定的常規(guī)設(shè)計形式

底部標(biāo)簽欄導(dǎo)航最常見的設(shè)計形式依然是置于底部的常規(guī)形式,通常是 3-5 個功能模塊為主,其中 5 個功能模塊是較為常見的。形成差異化的是在圖標(biāo)設(shè)計上面進行發(fā)揮,難度較大的設(shè)計是結(jié)合品牌基因或者特征性元素表達,也有一些是純文字的設(shè)計形式。

 

除了圖標(biāo)上面進行發(fā)揮以外,也有一些會在背景上面進行裝飾,體現(xiàn)產(chǎn)品差異化。不過最常見的依然還是單色為主,或者根據(jù)模塊的需求在切換的過程中選擇使用不同的背景體現(xiàn)。雖然是最常規(guī)的導(dǎo)航模式,但是設(shè)計師依然可以在布局形式、圖標(biāo)風(fēng)格、配色關(guān)系、背景裝飾等方面進行發(fā)揮。

 

 

 

3.2 動靜結(jié)合的微動效表現(xiàn)

微動效在產(chǎn)品設(shè)計中的運用逐漸變得頻繁,相較于靜態(tài)的表現(xiàn)更能引起用戶的關(guān)注度,也能帶來趣味性和互動性。在底部標(biāo)簽欄導(dǎo)航中的圖標(biāo)設(shè)計上面,默認的采用靜態(tài)展示,而點擊狀態(tài)以動效的形式進行演變過度也是非常常見的設(shè)計處理。

 

在進行動效設(shè)計的時候,可以采用整個圖標(biāo)位移形成動效,這是最簡單的動效表現(xiàn),通常是上下彈跳位移。比較復(fù)雜的是圖標(biāo)本身的結(jié)構(gòu)動效,這也是圖標(biāo)動效轉(zhuǎn)換比較連貫的形式。

 

 

 

3.3 突出規(guī)范框架的束縛表現(xiàn)

雖然大部分產(chǎn)品設(shè)計都會優(yōu)先采用官方的設(shè)計規(guī)范,但是為了突出設(shè)計的差異化,也會進行一些突出規(guī)范框架的設(shè)計。在保持原有不變的導(dǎo)航設(shè)計中,我們可以針對局部功能模塊進行突出表現(xiàn)(比如舵式導(dǎo)航),也可以將點擊狀態(tài)進行突出表現(xiàn)。

 

 

 

3.4 懸浮層增強空間感

一些產(chǎn)品為了增強界面結(jié)構(gòu)的空間感,針對底部標(biāo)簽欄導(dǎo)航設(shè)計采用懸浮層的設(shè)計來進行表現(xiàn),使得界面的通透性和呼吸感更強。這種設(shè)計形式依然保留了原本的結(jié)構(gòu),只是預(yù)留了左右和底部的間距,也有一些產(chǎn)品結(jié)合交互動效的形式表達,滑動過程中采用隱藏部分功能,增加瀏覽過程的內(nèi)容輸出面積。

 

 

 

3.5 底部拓展/隱藏式設(shè)計

隨著一些工具型產(chǎn)品的使用,功能模塊變得復(fù)雜而繁多,也有將更多功能隱藏在底部標(biāo)簽欄里面,上拉交互時顯示。這種設(shè)計形式將底部標(biāo)簽欄進行了深度的開發(fā)利用,但是功能隱藏比較深,曝光度受到了一定的影響,不適合較為重要的功能模塊設(shè)計。

 

 

 

3.6 小結(jié)

底部標(biāo)簽欄導(dǎo)航在 UI 表現(xiàn)層方面還有更多可以給予設(shè)計師發(fā)揮的空間,設(shè)計沒有固定不變的形式,在于不斷的發(fā)現(xiàn)、總結(jié)和創(chuàng)新。期待大家發(fā)現(xiàn)更多設(shè)計解決方案和進行更多設(shè)計創(chuàng)新,下面將會為大家梳理線上的優(yōu)秀案例,讓我們可以站在巨人的肩膀上不斷超越。

 

 

 

四、移動端線上案例分析

 

移動端底部標(biāo)簽欄導(dǎo)航設(shè)計在眾多產(chǎn)品中浮現(xiàn)出很多優(yōu)秀的案例,對于線上案例的分析將有助于我們進行落地性的思考,新穎的設(shè)計不再是飛機稿,而是可以實現(xiàn)的創(chuàng)意。創(chuàng)新是建立在不斷的發(fā)現(xiàn)、總結(jié)、分析和改變,希望這些案例可以帶給你點滴靈感。

 

 

4.1 背景結(jié)合特定節(jié)日增強氛圍

在大部分情況下底部標(biāo)簽欄導(dǎo)航的背景為單色的居多,不干擾信息的傳遞而保障用戶的瀏覽體驗。也有在特定節(jié)日結(jié)合氛圍營造對背景進行簡單的裝飾,可以在節(jié)假日或者特殊時期引起用戶的共勉,增強產(chǎn)品的情感化設(shè)計。

 

比如寶寶巴士兒歌 APP 的底部標(biāo)簽欄導(dǎo)航設(shè)計,在之前的一些版本迭代過程中,結(jié)合特定氛圍營造進行背景設(shè)計,也是一種非常不錯的設(shè)計表達形式。由于屬于兒童類產(chǎn)品,點擊功能模塊切換的過程中還伴隨著音樂,視聽體驗的結(jié)合使得操作體驗備受關(guān)注。

 

 

 

4.2 強化消息提示的關(guān)注度

系統(tǒng)通知或者消息提示往往都會被用戶所忽略,盡管很多產(chǎn)品都會將消息作為單獨的功能模塊來設(shè)計,但是依然擺脫不了被忽略的問題。微信讀書將通知和私信等消息提示結(jié)合在個人中心的設(shè)計中,以氣泡彈出的形式展示在圖標(biāo)紅點提示上方。以此來吸引用戶的關(guān)注度,增加消息閱讀率。

 

 

 

4.3 特異設(shè)計引導(dǎo)功能模塊關(guān)注度

在底部標(biāo)簽欄導(dǎo)航的多個功能模塊中,為了突出或者引導(dǎo)使用某個功能時,會采用特異構(gòu)成的設(shè)計做法,在原本的設(shè)計規(guī)范上面突出表現(xiàn)個例,以此來引起用戶的關(guān)注度。比如騰訊動漫在第一次進入 APP 時,圈子的圖標(biāo)設(shè)計會特意突出,點擊之后恢復(fù)原樣,以此吸引用戶對該欄目的關(guān)注,增強功能模塊的使用率。

 

 

 

4.4 圖標(biāo)設(shè)計的年輕化趨勢

隨著 95 后成為互聯(lián)網(wǎng)原住民,產(chǎn)品設(shè)計逐漸趨向于“年輕化”的探索和挖掘。優(yōu)酷 V9.0 升級后設(shè)計風(fēng)格更年輕化,底部標(biāo)簽欄圖標(biāo)設(shè)計采用低純度、高明度的多色漸變,結(jié)合微動效使得風(fēng)格更加青春活潑,符合年輕一代的審美需求。年輕化的設(shè)計不僅提高感官體驗,也拉近了產(chǎn)品與用戶之間的親和力。

 

 

 

4.5 趣味性的情感化設(shè)計融入

情感化的設(shè)計能夠拉近產(chǎn)品與用戶之間的親和力,這也是設(shè)計師在不斷探索并延展的設(shè)計方向。QQ 作為社交工具而言,如何更加符合年輕化的設(shè)計需求,在底部標(biāo)簽欄圖標(biāo)的設(shè)計上面也是用盡了心思。消息模塊的圖標(biāo)設(shè)計成各種搞怪的表情,在拖拽的時候會切換不同的表情,帶給用戶更加趣味性的體驗,讓人會心一笑。

 

 

 

4.6 首頁圖標(biāo)強化品牌曝光

為了強化產(chǎn)品品牌的曝光度,在進行底部標(biāo)簽欄圖標(biāo)設(shè)計的時候,會將首頁圖標(biāo)的點擊狀態(tài)切換為品牌 LOGO 的形式,以此來增加品牌的曝光度。設(shè)計上面的選擇有 LOGO 圖形、吉祥物、應(yīng)用圖標(biāo)、品牌局部圖形等,會根據(jù)品牌 LOGO 的造型靈活選擇。

 

 

 

4.7 舵式導(dǎo)航轉(zhuǎn)一轉(zhuǎn)增強關(guān)注度

底部(舵式)拓展欄導(dǎo)航是突出中間功能模塊設(shè)計來強化關(guān)注度,除了靜態(tài)的表達以外,結(jié)合微動效更能起到強化突出的作用。轉(zhuǎn)轉(zhuǎn)結(jié)合吉祥物和微動效運用在舵式導(dǎo)航的設(shè)計中,不僅提高用戶的關(guān)注度,情感化的設(shè)計還能增強產(chǎn)品的親和力。

 

 

 

4.8 結(jié)合營銷內(nèi)容多層共用

產(chǎn)品中的營銷結(jié)合是最為常見的,產(chǎn)品設(shè)計師也在不斷地思考更多可結(jié)合的功能模塊,舵式導(dǎo)航的區(qū)域被充分利用是最為便利的。芒果 TV 將營銷內(nèi)容與會員模塊圖標(biāo)進行結(jié)合,在保持原有功能操作的基礎(chǔ)上強化營銷活動的曝光度,鼓勵更多用戶參與活動。

 

 

 

4.9 微動效結(jié)合多層功能運用

微動效運用到底部標(biāo)簽欄導(dǎo)航圖標(biāo)動效中較為常見,可以帶給用戶趣味性的點擊體驗。對于一些首頁采用瀑布流設(shè)計的產(chǎn)品,也會在用戶上滑瀏覽內(nèi)容到一定量的時候?qū)⑹醉撟兓癁?ldquo;置頂”的操作,方便用戶快速置頂。比如愛奇藝 APP 將品牌色強化在圖標(biāo)的設(shè)計中,結(jié)合微動效的變化帶給用戶趣味性和強化品牌記憶,在首頁圖標(biāo)和置頂圖標(biāo)切換的過程中也采用了微動效的形式,過度更加自然流暢,也能更加醒目的提示用戶。

 

 

 

4.10 微動效結(jié)合突出框架的束縛

一些尋求突破的產(chǎn)品,在設(shè)計的時候也嘗試了突出規(guī)范框架的束縛表現(xiàn),點擊狀態(tài)會突出局部來強化。結(jié)合動效的變化形成自然過度,突出的設(shè)計更能引起用戶的關(guān)注度,明確自己當(dāng)前所處的位置。這樣的表現(xiàn)形式不僅可以形成設(shè)計差異化,也能讓用戶操作路徑更加明顯,比如愛奇藝早期版本、美團外賣等產(chǎn)品。

 

 

 

4.11 懸浮層設(shè)計突破底部標(biāo)簽欄常規(guī)表現(xiàn)

設(shè)計師都在不斷的探索設(shè)計的差異化,敢于創(chuàng)新才能尋求新的可能性。脈脈在最近的迭代中將底部標(biāo)簽欄的設(shè)計采用懸浮層的形式表現(xiàn),使得界面內(nèi)容呈現(xiàn)的呼吸感更強,也增加了界面結(jié)構(gòu)的空間感。在保持基本設(shè)計規(guī)范的前提下進行小小的變化,就能帶來設(shè)計的差異表現(xiàn),也能帶給用戶較為新穎的感官體驗。

 

 

 

4.12 懸浮層設(shè)計結(jié)合交互動效的雙向運用

交互動效是 UI 設(shè)計師在靜態(tài)設(shè)計稿中要逐步突破的一種技能,交互動效可以讓我們的設(shè)計表達更加直觀,提高產(chǎn)品的互動性和趣味性。馬蜂窩旅游在進行底部標(biāo)簽欄突破的過程中,除了采用新穎的懸浮層設(shè)計以外,在上滑瀏覽內(nèi)容時采用隱藏局部功能的處理方式,讓內(nèi)容的輸出面積更大。在下滑或者停頓的過程中恢復(fù)默認導(dǎo)航,探知用戶行為習(xí)慣并給出不同的交互反饋,帶給用戶更高的操作體驗和互動趣味性。

 

 

 

4.13 底部拓展設(shè)計承載更多功能模塊

對于一些功能模塊較多的產(chǎn)品,產(chǎn)品設(shè)計師會盡可能的開發(fā)每一個常規(guī)的功能,拓展出更多可以進行設(shè)計延展的模塊。釘釘 APP 在進行底部標(biāo)簽欄設(shè)計的時候,就將更多功能模塊隱藏在上拉展開欄中,方便用戶進行快捷操作。充分的對底部標(biāo)簽欄進行了深度挖掘,利用手勢的變化實現(xiàn)更多功能模塊的切換,提高了用戶的操作體驗。

 

 

關(guān)于移動端底部標(biāo)簽欄導(dǎo)航設(shè)計還有很多非常不錯的線上案例,這里就不一一列舉啦!優(yōu)秀的案例總結(jié)能夠帶給我們更多的靈感參考,基于優(yōu)秀之上我們才能設(shè)計出更新穎的作品,希望以此拋磚引玉,期待大家發(fā)現(xiàn)更多好玩的設(shè)計。

 

 

 

五、總結(jié)

 

對于 UI 設(shè)計師來說,產(chǎn)品體驗是一種習(xí)慣的養(yǎng)成,結(jié)合體驗的日記化摘錄形成設(shè)計思路的總結(jié)??偨Y(jié)是為了形成最終可供靈感借鑒的經(jīng)驗,基于優(yōu)秀的案例分析才能形成更多的設(shè)計解決方案。

 

本文以移動端底部標(biāo)簽欄導(dǎo)航設(shè)計的經(jīng)驗分析為大家進行梳理,任何的設(shè)計表達都不是不變的規(guī)律,掌握的是這種設(shè)計分析和總結(jié)的思路,以此反推出更多的設(shè)計總結(jié)。希望本文的思路作為拋磚引玉,帶給你更多的思路。



作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTIzMTk0MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計

天宇 移動端UI設(shè)計文章及欣賞

前言
在當(dāng)今的移動應(yīng)用設(shè)計中,彈窗作為一種重要的交互元素,對于提升用戶體驗和增強應(yīng)用的可用性具有舉足輕重的作用。然而,彈窗設(shè)計并非簡單的堆砌信息,它需要考慮到用戶的使用習(xí)慣、心理預(yù)期以及操作流程等多個方面。因此,如何設(shè)計出優(yōu)秀的移動端彈窗,成為了一個值得探討的話題。
本文旨在為設(shè)計師們提供一份全面的移動端彈窗設(shè)計指南。我們將從彈窗的定義與重要性、類型與使用場景、設(shè)計原則以及不同場景下的彈窗設(shè)計等方面進行深入探討。希望通過本文的分享,能夠幫助設(shè)計師們更好地掌握移動端彈窗設(shè)計的技巧,提升應(yīng)用的用戶體驗。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
彈窗是用戶界面中的一種重要元素,它是一種臨時性的、可交互的窗口,用于向用戶展示信息、提示、警告或提供額外的功能。在移動應(yīng)用中,彈窗通常用于在用戶執(zhí)行某些操作或觸發(fā)某些事件時提供反饋或額外的信息。
彈窗設(shè)計的好壞直接影響到用戶體驗和應(yīng)用的易用性。一個好的彈窗設(shè)計能夠提供清晰、簡潔、易于理解的信息,同時不會干擾用戶的操作流程。而一個不好的彈窗設(shè)計可能會讓用戶感到困惑或不便,甚至可能導(dǎo)致誤操作。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
1、阻斷式彈窗
模態(tài)彈窗是一種需要用戶進行響應(yīng)的彈窗。它通常會覆蓋整個屏幕,并阻止用戶進行其他操作,直到用戶對彈窗做出響應(yīng)。打斷用戶當(dāng)前的操作流程,屬于強勢的干擾行為,通常用于需要用戶確認或選擇的操作,例如刪除數(shù)據(jù)、確認操作等。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
2、非阻斷式彈窗
非模態(tài)彈窗是一種不會覆蓋整個屏幕的彈窗。它通常會以小窗口的形式出現(xiàn)在屏幕的一角或下方,用于提供一些簡短的信息提示或警告。是一種輕量級的反饋,不會對用戶流程產(chǎn)生干擾,同時又給了用戶反饋和信息。并且有時間限制,在一定時間里自動消失。不需要用戶進行點擊操作,只需要讓用戶看到即可,常見的非模態(tài)彈窗包括Toast提示框、Snackbar提示對話框等。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
1、彈窗設(shè)計尺寸定義
移動UI彈窗的設(shè)計尺寸通常取決于多個因素,通常需要考慮設(shè)備的屏幕尺寸和分辨率。以下是一些常見的移動端彈窗設(shè)計尺寸定義規(guī)范:
① 彈窗寬度
在移動設(shè)備上,彈窗的寬度通常會與設(shè)備屏幕寬度相適應(yīng)。因此,彈窗的寬度可以設(shè)置為設(shè)備屏幕寬度的80%至90%,這樣可以確保彈窗在不同屏幕尺寸上都能良好地展示。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
② 彈窗高度
移動端彈窗的高度應(yīng)該根據(jù)內(nèi)容的多少進行自適應(yīng),但要避免過高導(dǎo)致用戶需要滾動查看。通常建議彈窗的最大高度不超過設(shè)備屏幕高度的80%。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
③ 按鈕大小
在移動端彈窗中,按鈕的大小應(yīng)該足夠大,以便用戶能夠輕松點擊。按鈕的大小一般建議在44px至56px之間,同時保持足夠的間距,避免誤觸。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
④ 字體大小
移動端彈窗中的字體大小應(yīng)該適中,既要保證內(nèi)容的可讀性,又要避免過大或過小導(dǎo)致視覺上的不適。通常建議標(biāo)題字體大小在16px至20px之間,正文字體大小在14px至16px之間。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
這些尺寸定義規(guī)范可以幫助我們在移動設(shè)備上創(chuàng)建具有良好用戶體驗的彈窗。然而,需要注意的是,這些規(guī)范并非絕對,在實際設(shè)計中還需要根據(jù)具體需求和場景進行調(diào)整。同時,考慮到不同設(shè)備和操作系統(tǒng)的差異,還需要進行充分的測試和調(diào)整,以確保彈窗在各種情況下都能提供最佳的用戶體驗。
 
2、彈窗設(shè)計版式
彈窗的版式設(shè)計可以根據(jù)需求進行多種多樣的變化,但一般來說,以下幾種版式設(shè)計是比較常見的:
① 文字列表框
在頁面底部出現(xiàn),以簡潔的功能描述性文字展示功能按鈕,敏感的功能操作一般顏色字體標(biāo)出。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
在進行此類彈窗設(shè)計時,有幾個關(guān)鍵要點需要特別關(guān)注:
首先,文案必須簡潔明了,直接傳達核心信息。避免使用冗長或復(fù)雜的措辭,以免用戶產(chǎn)生困惑。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
其次,為了突出核心內(nèi)容,可以采用一些視覺上的設(shè)計技巧,如加粗、變色或增大字體大小。這樣有助于迅速吸引用戶的注意力。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
在顏色、字體和布局方面,保持一致性至關(guān)重要。這樣可以增強應(yīng)用的品牌識別度,并為用戶提供更加統(tǒng)一和連貫的體驗。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
再次,對于包含大量文字信息的彈窗,可讀性是關(guān)鍵。合理使用標(biāo)題、段落和列表來組織內(nèi)容,避免布局過于擁擠或空白過多。這樣可以提高信息的可讀性和易理解性。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
最后,考慮彈窗在不同尺寸屏幕上的適應(yīng)性是必要的。通過合理的設(shè)計布局和響應(yīng)式設(shè)計,確保彈窗在實際使用中的顯示效果和用戶體驗不受屏幕尺寸的影響。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
② 圖文排列
當(dāng)功能按鈕數(shù)量很多的時候,將文字和圖片按照一定的排列方式組合在一起,以吸引用戶的注意力并傳達信息。這種樣式下需要注意彈窗內(nèi)各功能按鈕的UI設(shè)計和排列布局。
以下是一些常見的圖文排列類型的彈窗設(shè)計方式:
2.1 文字居中,圖片居側(cè)
這種方式將文字居中顯示,而圖片則位于文字的一側(cè)。這種設(shè)計方式常用于一些需要強調(diào)文字信息的彈窗,例如確認框或者提示框。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
2.2 圖片居中,文字居側(cè)
這種方式將圖片居中顯示,而文字則位于圖片的一側(cè)。這種設(shè)計方式常用于一些需要展示圖片的彈窗,例如相冊或者圖片查看器。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
2.3 文字在下方,圖片在上方
這種方式將文字放置在圖片的下方,以增強文字與圖片的聯(lián)系。這種設(shè)計方式常用于一些需要展示產(chǎn)品或者文章的彈窗,例如產(chǎn)品詳情頁或者新聞?wù)?/div>
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
2.4 文字和圖片交錯排列
這種方式將文字和圖片交錯排列在一起,以增強信息的層次感和視覺沖擊力。這種設(shè)計方式常用于一些需要展示多個信息的彈窗,例如表單或者調(diào)查問卷。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
無論采用哪種圖文排列類型的彈窗設(shè)計方式,都需要注重文字和圖片的協(xié)調(diào)性和統(tǒng)一感,以保證彈窗的整體美觀度和易用性。同時,還需要根據(jù)具體的彈窗類型和目的來選擇合適的設(shè)計方式,以便更好地傳遞信息并吸引用戶的注意力。
 
③ 選擇列表框
用選項代替了功能按鈕,這種設(shè)計方式的好處是減少了功能流程中的頁面跳轉(zhuǎn),但如果選項很多而且描述文字較多的時候,還是設(shè)計成選項詳情頁更好些。
以下是一些常見的選擇列表框的類型:
3.1 單選列表框
這種方式只允許用戶選擇一個選項,常用于一些需要用戶做出唯一選擇的場景,例如性別選擇、國家選擇等。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
3.2 多選列表框
這種方式允許用戶選擇多個選項,常用于一些需要用戶做出多個選擇的場景,例如定制化需求、標(biāo)簽選擇等。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
3.3 下拉列表框
這種方式將所有選項折疊在一個下拉列表中,用戶可以通過滑動或者點擊來查看并選擇選項。這種設(shè)計方式常用于一些需要節(jié)省空間或者隱藏復(fù)雜選項的場景。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
3.4 彈出式列表框
這種方式將選項以彈出式的方式展示在彈窗中,用戶可以通過點擊來查看并選擇選項。這種設(shè)計方式常用于一些需要快速選擇的場景,例如快捷菜單、操作菜單等。
從用戶體驗到細節(jié)之美:移動端彈窗設(shè)計
 
 
另:在移動端彈窗設(shè)計中,我們還需關(guān)注五個關(guān)鍵點:
  1.  
    避免過度使用:過多彈窗會干擾用戶,降低體驗。因此,要審慎使用,確保必要性。
  2.  
    設(shè)計簡潔:彈窗內(nèi)容應(yīng)精簡,標(biāo)題與內(nèi)容需清晰傳達目的。
  3.  
    合理擺放按鈕:確保按鈕易于點擊,數(shù)量適中,避免混亂。
  4.  
    保持視覺清晰:色彩、字體等需與整體風(fēng)格協(xié)調(diào),動畫效果需自然。
  5.  
    簡化交互流程:操作步驟需簡單明了,提供明確的反饋。
綜上所述,移動端彈窗設(shè)計應(yīng)注重簡潔的文案、突出核心內(nèi)容、保持一致性、注重可讀性和適應(yīng)性。通過關(guān)注這些關(guān)鍵點,可以打造出高品質(zhì)的彈窗設(shè)計,提升用戶的使用體驗。
 
總結(jié)
移動端彈窗設(shè)計是一項需要綜合考慮用戶體驗和轉(zhuǎn)化率的復(fù)雜任務(wù)。通過明確設(shè)計目的、選擇合適類型、注重視覺設(shè)計、提供明確操作按鈕、適時出現(xiàn)適度使用以及不斷測試與優(yōu)化,可以打造出更加優(yōu)秀、更具吸引力的彈窗設(shè)計。這不僅能夠提升用戶的滿意度和忠誠度,還能為應(yīng)用帶來更多的商業(yè)價值。
 


作者:散落的那些
鏈接:https://www.zcool.com.cn/article/ZMTYwNDQ2NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

大廠設(shè)計總監(jiān)一直在用的banner設(shè)計法則

藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞

本文將從對當(dāng)下常見banner的設(shè)計規(guī)則等進行剖析,并融入自己的思考和總結(jié),著重從用戶的角度去思考一張banner廣告的設(shè)計規(guī)律。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 



作者:YTY的雜糧設(shè)計鋪
鏈接:https://www.zcool.com.cn/article/ZMTQ1NDU2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

關(guān)于產(chǎn)品「趣味性設(shè)計」的一次深度探索

藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞

你一定也發(fā)現(xiàn)了,在這個時代下只要處在同一賽道的產(chǎn)品,大多數(shù)免不了日趨同質(zhì)化,不論是功能還是形式、內(nèi)容還是算法。就拿內(nèi)容型產(chǎn)品來舉例:去掉顏色,以下四個產(chǎn)品的首頁,你能分得清誰是誰嗎?

 

 

 

 

雖然可以做品牌差異化,但很多產(chǎn)品在招牌打響前,也會經(jīng)歷相當(dāng)漫長的一段成長期。而在大家都卷的分不清誰是誰的時候,通過趣味性來建立情感鏈接倒是一個獨辟蹊徑的狠招。

 

之前在團隊有幸負責(zé)過一次產(chǎn)品趣味性的探索,雖未全部落地,但沉淀了不少經(jīng)驗。今天,我將這些經(jīng)驗以文章的方式分享給你,希望對你有所啟發(fā)。

 

 

 

為什么產(chǎn)品需要趣味性

 


1.符合本能需求

馬斯洛的“需求層次理論”(Hierarchy of Needs)你一定聽過。這個理論提出人類的需求狀態(tài)是持續(xù)不斷的,一段時間內(nèi),個人的動機或許可以獲得暫時性的滿足。但從人的成長角度來看,人類的需求永遠不會止步于一個階段。類似的還有亞倫·瓦爾特基于此提出的需求層次理論——有用的、可靠的、可用的、愉悅的。在滿足了溫飽階段后,自然會需要情感的滿足。

 

尤其現(xiàn)在這個相對嚴(yán)峻、內(nèi)卷成風(fēng)的時代下,大家都渴望在上了一天班之后,自己用的產(chǎn)品可以給自己解壓,而不只是個單純的冷血工具。

 

 

 

 

 

 

 

2.影響用戶行為

 

產(chǎn)品傳達趣味性的信息,那么這些信息便更容易被用戶接受、甚至激發(fā)興趣。正如用戶關(guān)系和精準(zhǔn)化運營的先驅(qū)——史蒂文·貝萊格姆的那句話:“趣味是設(shè)計產(chǎn)品中最人類化,最直接,最能引起人們興趣的因素。”

 

根據(jù)艾達模型這個經(jīng)典理論,一旦用戶對某件事產(chǎn)生興趣后,則更容易促成他的決策、乃至最后行為的發(fā)生。畢竟我們絕大多數(shù)的決策并非源自理性。

 

 

 

 

 

另外,《瘋傳》這本書提及過一個重要的概念:情緒喚醒。當(dāng)情緒喚醒度較高時,往往會更容易激發(fā)用戶的分享行為(比如愉悅、驚喜這樣的正面情緒,當(dāng)然也會包括憤怒、恐懼這樣的負面情緒)。而產(chǎn)品所呈現(xiàn)的趣味性,很大程度上更容易引發(fā)用戶的高喚醒情緒,從而主動采取一些產(chǎn)品希望他實施的行為。

 

 

 

3.緩解負面情緒

 

使用一款產(chǎn)品的過程中,必然會出現(xiàn)不夠正向的反饋,比如404、斷網(wǎng)、填寫格式錯誤、輸入隱私信息等等。一旦超出了用戶的容忍能力,很容易造成行為中斷甚至流失。

 

但此時如果通過一種趣味性的方式呈現(xiàn),很大程度上可以緩解用戶的負面情緒。

 

比如readme的登錄頁面,當(dāng)你輸入密碼時,貓頭鷹捂住雙眼,很好得緩解了用戶的不安全感。再比如餓了么,惡劣天氣下會實時記錄當(dāng)前的天氣狀態(tài),通過同理心的觸發(fā)也可以緩解用戶等待時產(chǎn)生的焦慮。

 

 

 

 

 

 

 

4.實現(xiàn)情感鏈接

 

對應(yīng)諾曼在《情感化設(shè)計》中的「反思層」,通過品牌差異、獨有內(nèi)涵等方式來喚起用戶深層的記憶和情感,產(chǎn)生情感共鳴,從而形成認知,建立起深厚的情感鏈接,以讓用戶越來越忠實于產(chǎn)品。此時產(chǎn)品作用更多的是作為一個承擔(dān)情感的載體。

 

我們旅游時經(jīng)常會購買一些貌似沒什么實用性的紀(jì)念品,明信片、木雕、徽章等等,可能最多只能放在房間當(dāng)裝飾。但是紀(jì)念品的關(guān)鍵意義,在于承載著旅游時的記憶。類似的還有單機游戲發(fā)售時,除了標(biāo)準(zhǔn)版外,往往會同步發(fā)售包含手辦、美術(shù)設(shè)定集等物品的豪華版,同樣用來承載玩家的情懷。

 

最典型的例子,就是Google的Doodle設(shè)計,在不同的節(jié)日、紀(jì)念日、或者緬懷一些先驅(qū)、藝術(shù)家時,會投入很高的成本起設(shè)計各種趣味性的插畫logo,豐富有趣,而且很多時候可以支持互動游戲。比如18年的萬圣節(jié),就做了一個有趣的多人對戰(zhàn)的小游戲。

 

 

 

 

Doodle不僅是Google文化、價值觀的象征,也通過這種趣味性的創(chuàng)意讓用戶實現(xiàn)更深層次的情感交流,建立情感紐帶并增加粘性,不會輕易得流失到其他替代品中。

 

 

 

趣味性是什么

關(guān)于這個概念,有三條相對客觀專業(yè)的說法。

 

德國古典哲學(xué)創(chuàng)始人康德《實用人類學(xué)》中,指出趣味性是人類由于受到外部環(huán)境的影響而對客觀事物產(chǎn)生的直接的感性反應(yīng),不具有普遍性和必然性。通俗來講是人們對身邊的事物感到新奇、有趣、有意思,從而心理產(chǎn)生愉悅的變化。

 

另外,康德在《判斷力批判》也指出,趣味是指主體以積極主動的姿態(tài),在超功利的層次上對某一對象表現(xiàn)出喜愛和愉悅的情緒狀態(tài)。

 

《漢語詞典》將趣味釋義為:使人感到愉快,能引起興趣的特性。

 

看似各不相同,但根據(jù)這三個概念提煉下,可以發(fā)現(xiàn)他們都是在融入一種正向的情緒加以解釋。

 

那么,趣味性背后的情緒到底是什么?

 

 

 

趣味性背后的情緒


情緒這東西千變?nèi)f化,為了避免主觀臆斷的不準(zhǔn)確,我搜羅了關(guān)于情緒的研究資料,目前相對權(quán)威的有三個:plutchik情緒輪、日本感性工學(xué)、諾曼的三層理論。

 

后兩者未對情緒進行指標(biāo)的定義,所以這里只聚焦在情緒輪上。

 

情緒輪由羅伯特·普洛特契克開創(chuàng),這個理論指出人類的基本情緒一共由8種,生氣、厭惡、恐懼、悲傷、期待、愉悅、意外和信任。撇去那些負面情緒,能夠符合趣味性帶來的情緒基本就三種:愉悅、期待和意外。

 

 

 

 

 

為了為產(chǎn)品所用,就需要提煉出更具象的特征。下面,我通過腦暴的方式對每類情緒進行發(fā)散聯(lián)想。

 

 

 

關(guān)于愉悅感

 

聯(lián)想了大量可以引發(fā)愉悅情緒的事物,比如可愛的貓貓、各類好玩的表情包、毛絨玩具、影視作品里那些會突然說話的動物、解壓神器等等。

 

我發(fā)現(xiàn)這些事物,一般具備了以下特征:

 

1.會給予我們即時反饋;

 

2.擬人化,比如帶有人類才有的表情,或者是人類的動作語言;

 

3.柔軟的、毛茸茸的、圓潤的、有溫度的;

 

4.會動的、解壓的

 

 

 

 

 

 

 

關(guān)于期待感

 

聯(lián)想了大量可以引發(fā)期待情緒的事物,比如被買爆的泡泡瑪特盲盒,商家售賣的福袋,各種諸如擲骰子、老虎機的隨機性游戲,各類抽獎活動,一些游戲開局roll屬性點的環(huán)節(jié)(比如金2、河洛等游戲,當(dāng)年玩的時候我驚訝得發(fā)現(xiàn)我居然能roll上一整天)

 

這些事物大致會帶有這些特征:

 

1.未知的、神秘的;

 

2.滿足人類的好奇心的;

 

3.對結(jié)果能滿懷希望的;

 

4.隨機的正向獎賞;

 

5.只需要一步簡單到發(fā)指的操作(打開容器、拉動拉桿、點擊按鈕等等),不需要任何的行動門檻,也沒有等待時間

 

 

 

 

 

 

 

關(guān)于驚喜感

 

比如《設(shè)計中的設(shè)計》這本書中提到的出入境的印章案例、一蘭拉面碗底的細節(jié)、電影或者游戲中突然出現(xiàn)的彩蛋、iPhone第一代的發(fā)布現(xiàn)場、突然發(fā)現(xiàn)的世外桃源、突襲的生日驚喜等等。

 

這些事物大致會帶有這些特征:

 

1.超出原有預(yù)期的;

 

2.未提前告知的;

 

3.正向結(jié)果的;

 

4.產(chǎn)生共鳴的

 

 

 

 

 

 

那么,這些特征又該如何更具象得落地成策略,產(chǎn)品中又是如何利用這些策略,引導(dǎo)用戶產(chǎn)生這些情緒的呢?

 

下面,我將基于這三類維度,并結(jié)合大量的大廠案例來為一步步你抽絲剝繭。

 

 

 

 

如何制造愉悅感

 

 

1.關(guān)于擬人化

 

基于上面的挖掘,我發(fā)現(xiàn)能引發(fā)愉悅感的一個明顯特征,就是擬人化,這個非常有意思。

 

克利福德·納斯在《the man who lied to his laptop》這本書中提出過一個觀點:人們對待電腦的方式,與我們在與他人交流時使用的社會規(guī)范是一致的。我們對電腦的反應(yīng),就好像它們是人類一樣。

 

 

 

 

 

 

也正因此,很多原本沒有生命體征的物體,一旦被賦予了擬人形象,就容易被大家所接納、引發(fā)愉悅。

 

做一下細分的話,擬人化基本涵蓋了三個方面:語言、形象和表情。

 

 

 

 

 

 

 

1.1擬人化的語言

 

人對于具體的擬人形象更容易產(chǎn)生情感,其中便包含擬人化的口吻。使用這種口吻與用戶交流,而非冷冰冰的設(shè)備語言,就可以提升產(chǎn)品溫度,引導(dǎo)用戶對產(chǎn)品產(chǎn)生正向情感,關(guān)于這塊我總結(jié)了兩方面。

 

一方面,文案盡量得接地氣、輕松。

 

拿京東這款產(chǎn)品舉例,文案從口吻上都會采用一種很輕松、接地氣的擬人語氣,來拉近和用戶間的距離。比如在引導(dǎo)詞后加入“哦~”“~”這種輕松的語氣詞。

 

另外,「京東問答」版塊的引導(dǎo)詞:傳統(tǒng)產(chǎn)品是“添加問答”,是不是平平無奇。但京東使用了“我來助你一臂之力~”

 

 

 

 

 

 

 

QQ瀏覽器的評論暗提示,也不是傳統(tǒng)的“寫評論”“輸入評論”,而是像日常聊天那樣“我來說兩句”,非常接地氣、生活化。知乎直接套用了流行語,詼諧的同時引導(dǎo)用戶注意言論。

 

 

 

 

 

 

另一方面,人類富有情緒變化,所以一旦用戶觸發(fā)了某個正面/負面行為,就可以給與情緒反饋。

 

在用戶完成商品評價后,京東不僅僅是很傳統(tǒng)得反饋“評價成功”,而是又加入了“感謝您!”的感謝詞??此萍恿巳齻€字,但行動過后的正向感激反饋,和我們?nèi)粘I钪惺艿秸蚍答佉粯?,被喚起正向的愉悅情緒。并愿意繼續(xù)這個行為。

 

知乎的圈子業(yè)務(wù),在用戶完成簽到后,反饋完成的基礎(chǔ)上,使用了正向的情感反饋“ 我就知道你會再來看我”,仿佛是一位關(guān)系不錯的老朋友,來喚起用戶正向情緒。

 

另外,知乎在改版后,回答收到贊也不僅僅是“點贊成功”這類冷冰冰的機器語言,而是“已收到你的喜歡,謝謝!”并且配以作者頭像,非常形象得傳出對對方對我們的感謝反饋。這種正向反饋,相比”點贊成功“更有效得喚起正向情緒,形成正向激勵。

 

 

 

 

當(dāng)然,用戶的消極行為也可以產(chǎn)生情緒反饋。

 

比如現(xiàn)在很多產(chǎn)品的取關(guān)反饋,不是傳統(tǒng)的“確認”“取消”,而是用“殘忍取關(guān)”和“給個機會”這種融入情感的文案來做挽留,就好像真的有個活生生的人,在被你否定后反饋給你的情緒,請求你再給個機會。有趣的同時一定程度上也可以喚醒用戶的同情。(雖然這種做法過于業(yè)務(wù)導(dǎo)向,且有綁架用戶的嫌疑)

 

 

 

 

 

1.2擬人化的形象

 

人對于具體的擬人形象更容易產(chǎn)生情感。因此,樹立一個擬人化的品牌形象(也就是我們常說的IP),可以使用戶對產(chǎn)品快速建立情感聯(lián)系,也可以強化品牌感知。比如優(yōu)酷的猴子、高德地圖的老鷹、釘釘?shù)难嘧印inefriends等等。

 

 

 

 

 

 

世界杯的吉祥物也是同理,每一屆的吉祥物必定會融入擬人化的特征,憑著親切、可愛的形象和全世界的觀眾一起熱情互動。

 

 

 

 

 

說到產(chǎn)品,以京東的這只狗子為例,兜底頁、缺省頁、啟動頁,都做了狗這個擬人形象的貫穿。

 

 

 

 

 

 

如果你記得沒錯的話,形象改版之前這只狗還是四腳坐地上的,但改版后就兩腳著地了。這同樣是通過更擬人的形象來賦予「人格」,以此提升愉悅感,拉近距離。

 

 

 

 

 

 

再比如夸克,它甚至單獨新增了底tab入口,通過3d品牌形象,實現(xiàn)與用戶的智能交流。另外,卡片和語音搜索都做了形象貫穿,后者還使用了形象的眼睛,來通過眼睛的變化進行情感交流。

 

 

 

 

 

 

 

1.3擬人化的表情

 

一段文字在加入了表情后,我們就能迅速了解到對方的情緒(比如我們?nèi)粘5牧奶欤?。因此表情這一招,也可以用以加深用戶與產(chǎn)品的情感交流。

 

它可以和語音、形象靈活結(jié)合使用。通過全面的擬人化,來大幅提升用戶對產(chǎn)品的形象感知,促進用戶情感的產(chǎn)生、加深用戶和產(chǎn)品的情感鏈接。

 

比如用語言輸入,當(dāng)系統(tǒng)未識別清楚時,傳統(tǒng)的方案可能是一個錯誤圖標(biāo)加上「未識別聲音,請再試一遍」的文案,但夸克中則使用了品牌形象的雙眼來傳達失落的表情,并結(jié)合了擬人化的語言。

 

同樣做法的還有百度的未開麥提示、段子頭圖,快速傳達產(chǎn)品的情緒,和用戶情感交流。

 

 

 

 

 

 

另外,閑魚設(shè)置昵稱時,正在輸入時、以及超出了限定字數(shù),右側(cè)的形象表情也會發(fā)生變化。

 

 

 

 

 

 

除了擬人化能引發(fā)愉悅外,還有一個很容易被忽略的要素同樣能起到作用——動畫反饋。

 

 

 

2.動畫反饋

 

提起動畫的作用,我們更多人首先想到的可能是強引導(dǎo)、注意力吸引,但動畫同樣能觸發(fā)用戶愉悅。比如當(dāng)動畫更加貼近現(xiàn)實,或者結(jié)合擬人化的特征時。

 

 

2.1貼近現(xiàn)實

 

最典型的例子,就是蘋果appstore從卡片到詳情頁的轉(zhuǎn)場過渡,點按的預(yù)備動作、卡片的放大展開、緩出的曲線、轉(zhuǎn)場完成的慣性等等,都很貼近現(xiàn)實物理世界的運動規(guī)律。而這種自然的絲滑也更能引發(fā)用戶的愉悅。

 

 

 

 

 

 

2.2結(jié)合擬人化

 

比如知乎的加載動畫,結(jié)合了擬人化的特征,讓這個過程變得格外有趣。劉看山奮筆疾書的動作也很符合知乎這款產(chǎn)品的定位。

 

 

 

 

 

如何制造期待感

 

 

隨機給與內(nèi)容

 

根據(jù)我們對期待感的腦暴,發(fā)現(xiàn)能觸發(fā)這種情緒最典型的特征,就是隨機性。

 

在產(chǎn)品中,則可以通過隨機給予用戶有價值的內(nèi)容來引發(fā)用戶的關(guān)注。結(jié)果的不確定使過程充滿神秘,這種狀態(tài)讓用戶興奮和滿懷期待,不會輕易離開。

 

比如網(wǎng)易新聞在進行新聞加載的操作時,會在加載動畫上加入一個隨機的小貼士。內(nèi)容大致有三類:黃歷、名言和一句話新聞。而且這些內(nèi)容完全是隨機出現(xiàn),這種刷新過程好像在開盲盒,你無法預(yù)知會給你什么內(nèi)容,非常有趣。而且它們?nèi)肟谏睿桓蓴_;內(nèi)容對用戶也具有價值。

 

 

 

 

 

同樣的還有丁香醫(yī)生。在首頁每次下來刷新后,都會出現(xiàn)不一樣的健康類的小貼士。隨機性很強,富有趣味。而且可以很好得滿足求知欲。

 

 

 

 

 

雪球的個人頁上,上劃時也會隨機給一條關(guān)于投資、市場的名言和網(wǎng)友的熱門觀點。

 

 

 

 

 

 

 

 

隨機性游戲

 

 

把現(xiàn)實生活中的游戲搬到了手機,同樣能激發(fā)用戶的好奇和期待。比如微信讀書的翻牌子、搖一搖、老虎機。還有天貓的翻牌子。

 

 

 

 

 

 

 

如何制造驚喜感

 

 

格雷戈里·伯恩斯曾做個關(guān)于腦部區(qū)域的研究,發(fā)現(xiàn)大腦不僅探尋未知,而且實際上還渴望未知。相比那些已知的日常慣例,新鮮新穎的事物更容易引人注意。所以提供一些以往沒有過的、出乎意料的事物或互動,不但能引起注意力,而且也會帶來驚喜感。

 

 

 

 

 

產(chǎn)品中的驚喜感設(shè)計,可以說是使用瞬間能夠觸達我們內(nèi)心的一種短暫性愉悅,一個體驗的峰值。

 

根據(jù)對驚喜感的挖掘,一個典型的特征就是超出預(yù)期,并且未提前預(yù)料。

 

比如Figma使用過程中,團隊成員和你同時長按鼠標(biāo),并且靠在一起后,就可與觸發(fā)擊掌的動畫彩蛋,非常有意思。

 

 

 

 

 

 

比如京東在五星好評后,會放煙花慶祝。

 

 

 

 

 

 

比如很多內(nèi)容型產(chǎn)品,在詳情頁長按點贊按鈕后,會觸發(fā)全屏的「爆贊」動畫。

 

 

 

 

 

 

再比如用戶生日當(dāng)天,通過啟動頁、彈窗等場景送上生日祝福等等。

 

 

 

 

 

這些能夠超出用戶預(yù)期的細節(jié),即便多么細枝末節(jié)、出現(xiàn)頻率多低,但只要能夠被觸發(fā),都可能因為驚喜感而生成情緒峰值,加深用戶和產(chǎn)品的情感鏈接。

 

 

 

 

最后

 

以上,便是趣味性背后的情緒挖掘和案例講解。

 

作為設(shè)計師,我們在工作中總是強調(diào)以用戶為中心,通過不斷的調(diào)研、跟訪、可用性測試來了解、分類用戶,但更多的結(jié)果可能只是讓產(chǎn)品不斷得貼合用戶的心智、符合預(yù)期。但如何增加粘度、建立深層鏈接,就需要通過趣味性這種情感化表達方式,來為用戶制造愉悅、期待甚至驚喜。

 

正像諾曼在「情感與設(shè)計」中說的那樣,每個產(chǎn)品都需要令人更放松、更愉悅的設(shè)計,以此來增強產(chǎn)品的適用性。

 

希望這篇文章能對你有所啟發(fā)。



作者:設(shè)計師Andrew
鏈接:https://www.zcool.com.cn/article/ZMTQ5NDU3Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

這篇導(dǎo)流條設(shè)計方法,讓我打開了新思路

藍藍設(shè)計的小編 移動端UI設(shè)計文章及欣賞

本文將以有駕導(dǎo)流體驗升級的項目為例,分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。

// 寫在前面

 

端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品,帶來使用量的提升,從而實現(xiàn)用戶規(guī)模提升的一種增長手段。隨業(yè)務(wù)快速增長,有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣,依托各端流量實現(xiàn)矩陣產(chǎn)品間的導(dǎo)流,逐步積累用戶規(guī)模,是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗升級的項目為例,分享導(dǎo)流增長探索的設(shè)計思路與實踐經(jīng)驗。

 

 

// 為什么要做導(dǎo)流

 

導(dǎo)流的目的

對于業(yè)務(wù)本身而言,隨著移動互聯(lián)網(wǎng)流量紅利期的結(jié)束,獲取新用戶的成本越來越高,不管是新產(chǎn)品還是成熟型產(chǎn)品,都需要通過導(dǎo)流的手段來持續(xù)擴充新用戶。其次,對于有駕產(chǎn)品生態(tài)而言,需要各端產(chǎn)品間的相互聯(lián)動,協(xié)同發(fā)揮優(yōu)勢,實現(xiàn)流量價值最大化。

 

導(dǎo)流的優(yōu)勢

  • 成本低,相較于投放、活動等渠道流量獲取方式,矩陣導(dǎo)流成本低;

  • 高意向,用戶購車意向明確更容易實現(xiàn)商業(yè)轉(zhuǎn)化;

  • 可共享,用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。

 

// 如何做好導(dǎo)流設(shè)計

 

1.問題分析

通過梳理核心場景的4種導(dǎo)流條,發(fā)現(xiàn)各個場景導(dǎo)流形式各異,用戶缺乏統(tǒng)一認知,導(dǎo)流引導(dǎo)語單一內(nèi)容吸引力弱。在用戶在瀏覽頁面時,點擊功能入口或想要繼續(xù)查看更多內(nèi)容,需要下載APP才能繼續(xù)阻礙用戶瀏覽

  • 缺乏統(tǒng)一認知:視覺表達形式不成體系,用戶感知不夠;

  • 內(nèi)容吸引力弱:內(nèi)容單一缺乏吸引力,用戶沒有點擊欲望;

  • 阻礙用戶瀏覽:打斷用戶正常使用功能,影響用戶體驗。

 

 

從導(dǎo)流鏈路的用戶行為來看,整個流程下載路徑過長,發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點:

  • 從小程序落地頁到下載頁:在進入小程序瀏覽頁面時,用戶沒有注意到導(dǎo)流條就滑走了;

  • 點擊導(dǎo)流條進入下載頁:點擊導(dǎo)流條會先調(diào)起導(dǎo)流彈窗,點擊確認后再進入到下載頁,用戶未選擇下載就退出了。

 

 

2.明確設(shè)計方向

針對導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認知,內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過長的問題,我們搭建了一個完整的導(dǎo)流鏈路圖,根據(jù)用戶增長模型,把用戶生命周期各節(jié)點的用戶行為與產(chǎn)品觸點一一羅列出來,找到增長路徑的設(shè)計機會點。

 

 

通過以上的問題分析,如何建立用戶和產(chǎn)品的鏈接,保障友好的體驗,是本次導(dǎo)流升級要解決的問題。根據(jù)用戶關(guān)鍵行為,我們可以將整個導(dǎo)流鏈路拆分為3個階段來挖掘主要機會點:

  • 下載前:興趣激發(fā)導(dǎo)流吸引,建立用戶穩(wěn)定認知;

  • 下載中:強化用戶轉(zhuǎn)化動機,刺激用戶完成下載;

  • 下載后:保障還原體驗暢通,提升首次使用體驗。

 

 

下面將分別介紹導(dǎo)流下載前階段的設(shè)計落地實踐,以及下載中、下載后階段的延伸設(shè)計思考。

 

// 下載前

 

1.強化觸點吸引

是否能成功引起用戶注意,是轉(zhuǎn)化開始的第一步,統(tǒng)一的視覺風(fēng)格和滿足用戶訴求的內(nèi)容,有利于增強導(dǎo)流條的吸引力。

 

1)收斂導(dǎo)流條類型

針對【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒有跳轉(zhuǎn)預(yù)期的體驗問題,下線了阻斷式和截斷式兩種體驗不友好的導(dǎo)流類型,將原來4種導(dǎo)流類型收斂為2種,僅保留通用導(dǎo)流條和功能延展導(dǎo)流條,基于這2種導(dǎo)流形態(tài)進行深入的設(shè)計探索。

 

 

2)建立通用視覺標(biāo)準(zhǔn)

針對【缺乏統(tǒng)一認知】視覺表達形式不成體系、用戶感知不夠的視覺問題,建立了通用導(dǎo)流條標(biāo)準(zhǔn)化規(guī)范。統(tǒng)一視覺形態(tài),優(yōu)化為頁面內(nèi)通欄嵌入式,同時融入品牌色強化用戶感知,根據(jù)頁面布局制定了不同的展示規(guī)則。

 

 

上線后,內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下,導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平,為了進一步提升導(dǎo)流的點擊效果,開始探索場景化定制提轉(zhuǎn)的設(shè)計方向。

 

3)定制場景化內(nèi)容

針對【內(nèi)容吸引力弱】內(nèi)容單一缺乏吸引力、用戶沒有點擊欲望的內(nèi)容問題,在通用標(biāo)準(zhǔn)化形態(tài)的基礎(chǔ)上,根據(jù)不同場景用戶訴求點,豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強化3個方向驗證對轉(zhuǎn)化的影響。

  • 內(nèi)容定制:豐富導(dǎo)流利益點、場景化內(nèi)容更能激發(fā)用戶興趣,促進轉(zhuǎn)化達成;

  • 按鈕文案:轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點匹配,可以助力按鈕轉(zhuǎn)化提升;

  • 氛圍強化:導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能,有助于提升導(dǎo)流條點擊。

 

 

2.拓展場景擴量

復(fù)利通用標(biāo)準(zhǔn)導(dǎo)流條的成功經(jīng)驗,應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗證有效性,從產(chǎn)品價值點出發(fā),挖掘高流量場景的機會點從而帶來轉(zhuǎn)化增量。

 

1)價值傳遞

根據(jù)小程序和APP兩端各自的不同點,分別從功能差異及體驗差異兩個方向進行優(yōu)化。

  • APP特有功能:APP完善的功能體驗可以更好滿足用戶訴求,例如參配瀏覽場景下,引導(dǎo)用戶體驗搜索及橫屏查看的高頻功能,對于導(dǎo)流轉(zhuǎn)化有正向幫助;

  • 各端體驗差異:小程序和APP兩端體驗存在差異,例如圖片瀏覽場景下,APP清晰流暢的瀏覽體驗及放大全屏查看圖片的交互體驗,能夠刺激用戶轉(zhuǎn)化。

 

 

2)價值延續(xù)

當(dāng)用戶完成核心內(nèi)容消費后,是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容,進而引導(dǎo)用戶下載呢?

  • 服務(wù)透傳:平臺服務(wù)內(nèi)容傳遞,例如在內(nèi)容落地頁文末增加品牌廣告導(dǎo)流條,幫助用戶建立品牌認知;

  • 相關(guān)推薦:引導(dǎo)相關(guān)內(nèi)容消費,例如在文章或視頻頁增加相關(guān)推薦導(dǎo)流條,引導(dǎo)用戶瀏覽更多相似內(nèi)容。

 

 

 

// 下載中

 

當(dāng)用戶通過導(dǎo)流條進入到下載流程時,還有哪些手段可以刺激用戶激活減少流失呢?

  • 強化下載動機:下載頁前置APP落地頁內(nèi)容,例如將通用下載頁優(yōu)化為場景化下載頁,給用戶超前產(chǎn)品體驗吸引轉(zhuǎn)化;

  • 減少用戶流失:縮短鏈路簡化流程,例如可在下載中間頁完成應(yīng)用下載,同時退出下載頁時增加挽留。

 

 

 

// 下載后

 

當(dāng)用戶在應(yīng)用商店下載完成后,我們還能做哪些提升首次啟動APP的體驗?zāi)兀?/p>

  • 還原鏈路暢通:提升場景還原成功率,減少頻繁提示信息干擾;

  • 建立用戶心智:引導(dǎo)新用戶探索功能,根據(jù)用戶興趣推薦適合的內(nèi)容。

 

以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計思考,為大家提供可以繼續(xù)探索的方向。

 

 

// 寫在最后

 

總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗設(shè)計要點:

  • 全鏈路洞察,對導(dǎo)流鏈路進行拆解,通過盤點導(dǎo)流鏈路的用戶行為,明確每個節(jié)點的設(shè)計方向;

  • 降低廣告干擾性,減少用戶瀏覽過程中的阻斷感,適度弱化廣告氛圍;

  • 用戶的視角引導(dǎo),讓用戶專注于產(chǎn)品本身傳遞的價值,引領(lǐng)用戶完成對產(chǎn)品的探索從而完成下載激活。

 

希望以上的設(shè)計思考,可以帶給大家一些啟發(fā)。

 

 


 


作者:百度MEUX
鏈接:https://www.zcool.com.cn/article/ZMTUxMDQzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

 

驚艷升級!6大排版秘籍讓UI界面瞬間提升高級感

天宇 移動端UI設(shè)計文章及欣賞

前言

UI設(shè)計的核心是‘美學(xué)’,以前兩篇向大家介紹了如何提升審美能力和界面排版,本文將結(jié)合自己的工作經(jīng)驗,向大家分享一些UI界面排版設(shè)計的技巧,希望能給想要提升排版能力的設(shè)計師帶來一些幫助與啟發(fā)。

 

為什么需要學(xué)習(xí)排版?

排版是每一個設(shè)計師都必須具備的能力,也是UI界面設(shè)計中最難的一部分。它以各種形式存在界面中,如:純文本排版、圖文排版等等。是設(shè)計師在做設(shè)計時接觸多的地方,卻也是初中級設(shè)計師忽視細節(jié)最多的地方。好的排版,能快速有效的將界面中的重要信息傳遞給用戶。因此希望能通過本文,能讓大家對排版有一個新的認識。

 

目前運動端主要布局樣式有哪些?

 

關(guān)于排版設(shè)計,我總結(jié)歸納了6個設(shè)計技巧(還有許多技巧),當(dāng)然這些方法不是絕對,但是如果能融合貫通的將這些技巧運用到排版設(shè)計中,對界面設(shè)計感將有很大的提升。

 

分別是:

選擇合適的字體

對齊原則

親密性原則

具備呼吸感的力量

合理運用留白

對比的力量

 

選擇合適的字體

 

同的字體有不同的性格屬性,字體選擇對界面排版設(shè)計具有非常重要的作用。所以我們在做設(shè)計時間時,首先需要考慮產(chǎn)品的的屬性,目標(biāo)用戶,不同的產(chǎn)品與人群適用于不同的字體。如黑體粗體字醒目突出,適用于畫面感強烈,突出強調(diào)信息的用途、細體字精致簡潔,適用于女性行業(yè)、時尚、科技、餐飲等類型內(nèi)容;宋體、粗體字醒目突出,適用于畫面感強烈,突出強調(diào)信息的用途等。如下圖不同的產(chǎn)品屬性使用不同的字體。

最后提醒一下大家,在同一款A(yù)PP中,最好不要超過兩種字體。

 

對齊原則

 

在做界面設(shè)計時,需要保持界面上的所有元素都存在一種視覺聯(lián)系,而不是將元素隨意擺放在界面上。對齊會讓界面排版井然有序,閱讀起來會非常流暢。常用的對齊方式有:左對齊、居中對齊、右對齊。

 

我們做界面設(shè)計時,需要根據(jù)實際業(yè)務(wù)場景去選擇合適的對齊方式,形成統(tǒng)一的視覺流。

 

 

親密性原則

 

親密性就是在設(shè)計時將相關(guān)的項組織在一起,這些相關(guān)的項可被看作成一體的,一組的。從而吸引讀者的目光,能夠順暢的理解我們所表達的意思。這樣的設(shè)計可使使頁面變得有條理、閱讀邏輯清晰、頁面留白變得有組織感。

在做設(shè)計時,我們只要充分理解界面中各元素之間的關(guān)系,就會合理性的去運用它,掌握它。

 

 

具備呼吸感

 

字體行間距、行間距、行長是我們進行排版設(shè)計時,調(diào)節(jié)最頻繁的屬性。間距過短,會讓用戶難以閱,間距過長、會讓用戶閱讀起來比較稀疏,只有創(chuàng)造具備呼吸感的文字排版、才會用戶閱讀起來保持愉悅的心情。

 

行間距:行間距本身沒有一個標(biāo)準(zhǔn)的數(shù)值,在設(shè)計時我們通常會根據(jù)字體的屬性與運用場景去設(shè)置(一般而言,很多時候我們在設(shè)計時,通常將行間距設(shè)置為字體的1.5倍),增加文字的呼吸感。

字間距:字間距指的是文本在橫向上的間距。雖然很少有設(shè)計師在字間距花費較多的時間,但在文本的閱讀上起到非常大的作用。如字間距過于擁擠時,將會降低文本的可讀性。

 

行長:行長是指文本每行的長度,在不同的平臺,需要保持不同的文本長度。單行文字如果包含的字數(shù)太多,將會導(dǎo)致用戶閱讀起來感到疲憊。合理的行長會使用戶在閱讀時很順暢,反之則會使閱讀成為一種負擔(dān)。

 

 

合理運用留白

 

留白是設(shè)計師老生常談的事情,存在頁面布局中的各個元素之間。留白能夠突出頁面中的主要元素,制造頁面的視覺焦點,吸引用戶的注意,提升頁面的體驗感。

留白能夠使得元素之間的關(guān)系更為清晰,更容易被感知,增加頁面的呼吸感,顯得更為和諧。

 

 

對比的力量

 

對比的目的是營造視覺感官上的變化,避免頁面排版單調(diào),增強視覺效果。合理運用對比原則,能在很大程度上提升頁面中文字排版的層次感與設(shè)計感,還可以組織信息、清晰層級、在頁面上指引讀者,并且制造視覺焦點。

大小對比:視覺元素體量之間的差異,能夠制作視覺沖突的效果,使頁面的視覺層次更為清晰,體量越大則層級越大,也就越突出。

 

 

顏色對比:顏色在排版設(shè)計中起著很大的作用,能起到點睛之筆。合理運用色彩對比可以有效地突出重點、區(qū)分信息,還可以起到裝飾畫面的作用。

 

此外常見的對比有:材質(zhì)對比、形態(tài)對比、空間對比等等。

 

結(jié)語

 

排版是數(shù)字時代每個設(shè)計師都需要學(xué)習(xí)和掌握的重要技能,無論你的設(shè)計項目是什么樣的,這些基本的規(guī)則總能給你的設(shè)計帶來更好的效果。不過這些排版技巧都還只是非?;A(chǔ)的部分,在實際的設(shè)計當(dāng)中,還會涉及到很多更加復(fù)雜的排版布局——但是這些基礎(chǔ),始終是最重要的事情。



作者:三只石頭聊設(shè)計
鏈接:https://www.zcool.com.cn/article/ZMTE0NTA0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標(biāo)定制用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

提升設(shè)計細節(jié)的一些技巧(2)

天宇 移動端UI設(shè)計文章及欣賞

簡單的細節(jié)調(diào)整就能加強設(shè)計品質(zhì)。

簡單的細節(jié)調(diào)整就能加強設(shè)計品質(zhì),昨天沒想到幾個小時寫的一篇小文章很受大家歡迎,后續(xù)我多寫一些類似使用技巧,大家多給我點贊一些,支持我繼續(xù)寫下去,那今天再給大家分享幾個設(shè)計小技巧。希望能幫助到大家。

 

小輪廓能讓設(shè)計更精致

電商設(shè)計中,白色商品圖非常多,很多時候如果細節(jié)處理不好,就會體驗非常糟糕,如上圖就是大家經(jīng)常用到的一個場景。列表中有一個商品圖,這個設(shè)計有一個很大的問題,就是列表是灰色,商品圖是白色,白色和app的底色白色融為一體了,看起來非常缺乏平衡感。

 

仔細分析,你會發(fā)現(xiàn)問題是商品圖頂部有些白色部分和背景頁面的白色融合在一起了,同時卡片背景是灰色,所以色彩白色和灰色非常突兀,那么如何解決。其實有一個很小的方法就能解決這個問題。

 

我們直接在商品圖片周邊留出2px的邊框,就能很好的解決這個問題,因為背景是灰色的,留出的邊框剛好讓白色圖片看著有一個輪廓,整體更加和諧。

 

前后效果圖對比,加了一個淺淺的邊框就解決了白色圖片的問題,是不是頁面一下子精致起來。

 

同樣的原理,在大的商品圖上,留下小的邊框也很好的解決了白色地圖和背景的問題,這個小技巧希望大家能掌握。

 

善用色彩疊加讓頁面效果更潮

上圖這個場景我想是很多同學(xué)每天工作都在用的,圖片上需要去放一些文字,我們一般處理方式就是在上面疊加一個黑色,給一個透明度,這樣文字就能看清楚。這是一個設(shè)計手法。

 

還一種設(shè)計手法就是在圖片頂部,加一個黑色到透明的一個蒙版,這個大家都會。

 

但是這兩個設(shè)計如果對于一些比較年輕,比較潮流的頁面處理,可能就會感覺少點什么,那么這個時候就需要我們大膽一點,用一個色彩疊加的方式去設(shè)計,效果就會完全不一樣。

 

 

直接在圖片上根據(jù)你產(chǎn)品調(diào)性,疊加一個彩色,然后講顏色模式改為線性光,那么整體的感覺就瞬間不一樣,畫面潮了很多。

 

我們來看看效果對比,是不是瞬間一個普通的設(shè)計就潮起來了,當(dāng)然這個效果也需要看你頁面實際場景去使用。如果你頁面就是一個傳統(tǒng)的設(shè)計,用戶就是普通用戶,那么可以就上面2個方法去設(shè)計,如果你的產(chǎn)品調(diào)性需要傳遞出很潮流,很時尚,那么就可以試試這個方法。

 

當(dāng)然你也可以在局部去疊加色彩,效果一樣很棒,我最喜歡的音樂軟件Spotify在頁面中就大量使用這種手法在設(shè)計,有興趣同學(xué)可以下載看看。

 

善用空格和留白

有的時候負空間非常重要,很多同學(xué)的設(shè)計稿,非常的擁擠,頁面都像要溢出屏幕了。如上圖,文字和圖片過于緊湊,圖片下面的圖標(biāo),熱區(qū)不夠,看起來非常擁擠。

 

大家都太吝嗇運用空格了,但是留白和空隙是提升設(shè)計中非常重要的點。能讓你頁面呼吸感更強,是優(yōu)化設(shè)計,讓設(shè)計更精致非常重要的一個小技巧。

 

簡單優(yōu)化下,把信息分成3部分,然后加大留白,讓信息留白更多,增強設(shè)計呼吸感。

 

最后來看下效果,是不是看起來舒服多了,節(jié)奏感和呼吸感更強了,也有例如我們理解信息內(nèi)容。

 

最后

今天就和大家分享這么幾個小點,希望大家都成為一個關(guān)注細節(jié)的設(shè)計師。



作者:我們的設(shè)計日記
鏈接:https://www.zcool.com.cn/article/ZMTE4ODY2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計B端界面設(shè)計桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

耍好控件 | 如何做好「按鈕」的用戶體驗?

天宇 移動端UI設(shè)計文章及欣賞

對于按鈕控件,Material Design 在規(guī)范中寫下了“突出一個按鈕”原則:布局中應(yīng)包含一個視覺突出按鈕,以使其他按鈕在層次結(jié)構(gòu)中的重要性降低,讓此高強調(diào)按鈕吸引用戶最多的關(guān)注。

 

依據(jù)用戶體驗設(shè)計的宗旨,把這么長一段話說直白一些,其實就是:讓按鈕幫助用戶做出最優(yōu)選擇。

越是權(quán)威的設(shè)計團隊,對自家所探尋出來的核心原則越是從一而終。Google 產(chǎn)品線的按鈕設(shè)計,始終遵循著MD規(guī)范這一個標(biāo)準(zhǔn)。我想就這一標(biāo)準(zhǔn),來展開對于「按鈕」設(shè)計的探索。

一、在層級上「幫用戶做出最優(yōu)選擇」

Material Design 按照視覺強調(diào)程度將按鈕分為了四個類型:

  1. 文字按鈕(低強調(diào)):通常用于次要操作;

  2. 輪廓按鈕(中等強調(diào)):描邊讓輪廓按鈕比文本按鈕更突出一些;

  3. 填充按鈕(重點強調(diào)):填充按鈕具有視覺重點,因為它們使用了顏色填充和陰影;

  4. 切換按鈕(按鈕組):使用布局將同類按鈕分組。與其他按鈕類型相比,它們的使用頻率較低。

 

MD規(guī)范之所以如此定義按鈕類型,其實就是為了滿足設(shè)計原則中的「對比」原則,足夠差異化的對比才能讓用戶視線有明確的著陸點。

你可以用“較高視覺級+較低視覺級”的按鈕搭配,來引導(dǎo)用戶在當(dāng)前場景做出更重要的操作。

這一手法示例在許多產(chǎn)品中屢見不鮮。例如在一些功能性場景中,出于用戶體驗,用“較高視覺級”按鈕來輔助用戶進行正確操作。

而在一些非功能性場景中,許多產(chǎn)品還使用這個手法來突出重要操作,為業(yè)務(wù)引流。甚至你可以從中去摸索到競品當(dāng)前對哪一塊業(yè)務(wù)更具有側(cè)重點。

 

例如信用消費類金融產(chǎn)品常常用“較高視覺級”按鈕引導(dǎo)用戶對賬單進行分期。而京東白條在賬單還款時,也用“較高視覺級”按鈕引導(dǎo)用戶進行“小金庫還款”,為自家的金融業(yè)務(wù)引流。

 

 

這些案例都是在視覺上幫用戶做出選擇。

 

但反其道而行之,我們也可以推敲出,當(dāng)當(dāng)前場景的敏感度較高時,我們也可以降低按鈕的視覺對比,不要對用戶進行引導(dǎo),讓用戶自行謹慎操作,做出選擇。一般在協(xié)議、隱私條款場景這樣的設(shè)計會更為常見。

二、在尺寸上「幫用戶做出最優(yōu)選擇」

按鈕尺寸是設(shè)計界老生常談的一個問題了,想必最經(jīng)典的按鈕尺寸標(biāo)準(zhǔn)就是 iOS人機設(shè)計規(guī)范提到的“44pt”。除此之外還有MD規(guī)范對安卓按鈕定義的“36dp”、“56dp”等等。

但你是不是也疑惑,為什么我們常??吹桨粹o五花八門的設(shè)計尺寸?“44pt”真的是按鈕尺寸的標(biāo)準(zhǔn)嗎?

這個回答可以在設(shè)計師 Scott Hurff 曾寫過一篇關(guān)于按鈕可行性的博文中找到答案。

Scott Hurff 在使用 iOS 9 鎖屏狀態(tài)下的 Apple Music 時,遇到了問題:

 

在我想切歌時,我常常無法一次就點中切歌按鈕,我需要一而再再而三地嘗試。我甚至?xí)蛘`操作而調(diào)高音量,或是按到暫停。

 

而 iOS 9 在這里所用到的按鈕尺寸就是經(jīng)典的44pt。

 

等到 iOS 10 更新了這一設(shè)計之后,上述情況改善了許多。同時也提起了 Scott Hurff 對于按鈕設(shè)計尺寸研究的興趣,并展開了一系列科學(xué)性的論證。

 

 

 

Scott Hurff 搬出了2006年芬蘭奧盧大學(xué)和馬里蘭大學(xué)帕克分校的研究人員合作進行的實驗。研究人員測試了兩個場景:

 

 

  • 執(zhí)行單個任務(wù)場景(如激活按鈕、點選復(fù)選框或單選按鈕)

  • 執(zhí)行連續(xù)任務(wù)場景(如輸入電話號碼)

 

在研究過程中,研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發(fā)現(xiàn),當(dāng)按鈕小于9.2毫米時,單個任務(wù)場景的錯誤率顯著增加;當(dāng)按鈕小于9.6毫米時,連續(xù)任務(wù)場景的錯誤率顯著增加。

 

 

 

當(dāng)時這個實驗只確定了按鈕尺寸的合適區(qū)間。但五年后,兩所德國大學(xué)的研究人員又進行了另一項研究。這一次他們的目標(biāo)是:確定觸摸屏按鈕的最佳觸摸目標(biāo)尺寸。

 

這一次研究人員發(fā)布了一個Android游戲,該游戲被下載約10萬次,記錄了約1億2千萬次點擊事件。游戲的玩法很簡單:玩家要點擊各種大小、可能出現(xiàn)在屏幕任何地方的浮動圓圈來通關(guān)。

 

 

 

分析游戲中的點擊事件后,研究人員發(fā)現(xiàn)當(dāng)圓圈尺寸小于15毫米,玩家的錯誤率逐步增加;當(dāng)圓圈小于12毫米左右時急劇上升;當(dāng)點擊目標(biāo)小于8毫米時,玩家沒點中圓圈的概率超過40%。

 

但圓圈的尺寸大于 12毫米時,玩家的正確率也沒有顯著的數(shù)據(jù)變化。即 12毫米 就像一個按鈕尺寸用戶體驗的最大臨界點。

 

 

 

通過兩個實驗印證了按鈕尺寸設(shè)計的科學(xué)性后,提煉出了4個關(guān)鍵數(shù)據(jù):9.2毫米、9.6毫米、12毫米與15毫米。

 

而通過換算之后經(jīng)過換算可以發(fā)現(xiàn),iOS 的按鈕建議尺寸約為 7毫米;Android 約為 9毫米。但微軟所給到的按鈕規(guī)范建議則直接是以“毫米”為單位的,定義為 13毫米。

經(jīng)過數(shù)據(jù)的換算總結(jié)可以得出以下結(jié)論:

1.Android 所定義的 36pt 按鈕高度約為5.5毫米,在設(shè)計按鈕時,盡量不要低于這個高度(文字按鈕也應(yīng)該盡量把可點擊熱區(qū)擴展到這個高度);

2.36pt、44 pt、56 pt,這些規(guī)范參考數(shù)據(jù)在具體的頁面中需具體分析運用,目前各大規(guī)范已放開了按鈕高度的指導(dǎo)建議,并不是一定要讓按鈕保持一個固定的尺寸,只要在合適的可點擊范圍內(nèi),均是合理的;

3.根據(jù)以上的實驗結(jié)論,按鈕尺寸的最大臨界值 12毫米(約為 82pt),大于 82pt后并不能增加用戶可點擊概率,更多是視覺方面的考慮。

合理科學(xué)的按鈕尺寸可以讓用戶準(zhǔn)確地點擊并進行操作,能夠避免發(fā)生類似 iOS 9 Apple Music 所遇到的狀況。

三、在狀態(tài)上「幫用戶做出最優(yōu)選擇」

我發(fā)現(xiàn)當(dāng)下許多 APP 好像或多或少會忽略按鈕的狀態(tài)樣式設(shè)計。似乎許多人認為移動端按鈕狀態(tài)并沒有 Web 端重要,可能是因為移動端按鈕沒有 hover(懸浮) 態(tài),認為按鈕在移動端只有常態(tài)與點擊態(tài),狀態(tài)較少,覺得用戶本身就易于區(qū)分。

但實際上MD規(guī)范提到按鈕狀態(tài),不但沒有簡單地一筆帶過,還展開了一個專題進行了深入研究,可見把UI控件的“狀態(tài)”準(zhǔn)確地反饋給用戶,是多么重要的一件事。

按照MD規(guī)范,按鈕的狀態(tài),一般會發(fā)現(xiàn)有:

 

  • Enabled - 激活狀態(tài)(按鈕常規(guī)狀態(tài))

  • Hover-懸浮狀態(tài)(Web場景下的鼠標(biāo)懸浮狀態(tài))

  • Focused-聚焦?fàn)顟B(tài)(長按聚焦?fàn)顟B(tài),如長按語音輸入)

  • Pressed-點擊狀態(tài)(按鈕被點擊按下的狀態(tài))

  • Disable-禁用狀態(tài)(按鈕不可用的狀態(tài))

  • Loading-加載狀態(tài)(我自行添加進來的,當(dāng)下較為流行的多態(tài)按鈕)

 

 

正確地在前期規(guī)范中定義按鈕的狀態(tài)交互及樣式,對按鈕的合理設(shè)計與用戶體驗而言其實十分重要。按鈕狀態(tài)可以有效地傳達給用戶當(dāng)前操作狀態(tài),如發(fā)生失誤操作時可以及時止損,減少撤銷/返回操作的成本。

 

狀態(tài)樣式定義的過程其實并沒有想象中那么麻煩,一般視覺上可以高度與顏色來營造效果。

· 高度 :界面中往往使用陰影來營造高度視覺差,例如常態(tài)時的陰影能夠營造懸浮、可點擊的效果;禁用狀態(tài)取消陰影,可以營造按鈕觸底,無法點擊的效果。

· 顏色 :顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩,這樣可以確保適量的底色可見性,并且針對每種不同的狀態(tài),應(yīng)調(diào)整顏色遮罩不同的透明度值。MD有一套現(xiàn)成的透明度指導(dǎo)建議,可以進行參考。

 

 

 

四、結(jié)語

 

“幫用戶做出最優(yōu)選擇”說起來很容易,做起來卻容易被忽視或令產(chǎn)品設(shè)計者糾結(jié)頭疼,不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。

我盡量從我能考慮得到的方面,聊了關(guān)于按鈕交互的設(shè)計點,可能不太全面,也歡迎補充與校正。至于按鈕的視覺設(shè)計,因為過于個性化,且篇幅原因,我就不再展開討論了。

希望這篇文章能夠幫助到你對按鈕有新的認識。我是耍家,我們下期再見。



作者:UCD耍家
鏈接:https://www.zcool.com.cn/article/ZMTE4MDc2NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

蘭亭妙微(bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計圖標(biāo)定制、用戶體驗設(shè)計交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進群請加藍小助微信ben_lanlan。

小卡片大布局-帶你掌握卡片設(shè)計攻略

天宇 移動端UI設(shè)計文章及欣賞

UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。通過分割特性,可以賦予界面更多的層次感,為用戶帶來視覺上的愉悅。然而,卡片式設(shè)計并不是無懈可擊的,由于其分割的特性可能會對用戶的沉浸式瀏覽體驗產(chǎn)生一定的影響,例如造成橫向和縱向空間的浪費等問題。因此,在決定是否使用卡片式設(shè)計時,我們需要根據(jù)實際場景和內(nèi)容形式進行判斷,而不是刻意追求“卡片式”而設(shè)計。
卡片在移動端設(shè)備上,運用的越來越多,然而,在選擇使用卡片設(shè)計、視覺呈現(xiàn)方式以及其優(yōu)點和缺點等關(guān)鍵因素方面,仍然存在一些被忽視的細節(jié)。在進行卡片設(shè)計時,我們應(yīng)該注意哪些細微之處呢?以下我們就一起來探討下如何設(shè)計卡片。
一、卡片的概念
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
什么是卡片?
 
在日常生活中,一些常用的銀行卡、名片、VIP卡、撲克牌等就是一張卡片,這些卡片主要是用來傳遞卡片本身的一些信息。例如使用者可以從銀行卡上獲取卡片的所屬銀行、卡號等信息;可以從名片中知道卡片所屬人以及此人的一些基本信息等。
UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
卡片出現(xiàn)在了我們生活中的方方面面,如名片、不干膠標(biāo)簽、便利貼、會員卡..等,不管是何種類型的卡片,它都將代表著我們現(xiàn)實生活中的某個特定信息。卡片,通常包含圖片或文本信息,是一種有效的信息承載方式。UI界面中的卡片設(shè)計是一種常見且有效的設(shè)計方式,它通過將內(nèi)容以模塊化、層次化的形式呈現(xiàn),提升了界面的可讀性和用戶體驗。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
卡片式設(shè)計是一種常見的UI組件,它能夠?qū)⒉煌膬?nèi)容分層次組合在一起,從而讓頁面看起來更有秩序感。卡片通常由標(biāo)題、內(nèi)容描述、圖像、按鈕等元素組成,自帶簡約和易用的屬性,方便用戶快速理解和操作。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
二、卡片的交互設(shè)計
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
當(dāng)用戶與卡片進行交互時,卡片需要星現(xiàn)特定的視覺反饋。常見的卡片狀態(tài)包括默認、
懸浮(pc端)、激活、選中
等。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
為了更好的區(qū)分卡片和背景,可以用填充底色、措邊、添加陰影來讓卡片與背景有區(qū)分。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
卡片的可讀性主要取決于字體的選擇和字號的大小,例如,即使兩個卡片具有相同的布局,但如果選擇的字體和字號不同,它們的可讀性和視覺效果可能會有很大的差別。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
卡片上的文字間距最好有一定的規(guī)律,這里可以按網(wǎng)格法來規(guī)劃,比如8px網(wǎng)格,10px網(wǎng)格等等。網(wǎng)格的使用其實可以很靈活,比如我這里的卡片其實就用到了8px網(wǎng)格,各間距就會用8的倍數(shù)來做。大小比例就盡量用黃金比例來處理,這樣做目的一方面是為了讓界面有秩序,另一方面是提升決策效率。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
在設(shè)計卡片布局時,通常會將多個卡片以網(wǎng)格的形式排列在頁面上,以保持水平方向和垂直方向的對齊,這樣可以使頁面看起來更有序、更規(guī)范。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
當(dāng)卡片中包含標(biāo)題、內(nèi)容、圖片和按鈕等多種元素時,需要考慮到標(biāo)題與圈片的位置關(guān)系以及標(biāo)題和內(nèi)容的長短等因素。例如,如果卡片的頂部是標(biāo)題,由于標(biāo)題字數(shù)可能不確定,我們可以在卡片上方保留至少兩行的空間以容納標(biāo)題,而保持卡片內(nèi)的圖片和按鈕位置不變。
三、常見的卡片樣式
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
邊距卡片,
這種類型的卡片在UI設(shè)計中最為常見,柔和的固角、邊緣陰影以及四周很自然的留白,讓內(nèi)容模塊的存在感更加強烈,整個頁面信息的層級也更加清晰。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
懸浮卡片
并非模態(tài)彈窗,與模態(tài)彈窗相比,懸浮卡片無需主動操作觸發(fā),可作為臨時控件或長期固定顯示。此外,懸浮卡片能承載更多信息內(nèi)容,可通過伸縮來定義卡片中的信息數(shù)量,多則展示全部內(nèi)容,少則僅顯示關(guān)鍵信息,非常靈活。
通欄卡片
具有更強的視覺阻斷,對區(qū)分不同的功能模塊有不錯的效果,不過這種類型只通過頁面背最色保留上下邊間、且不會過多,不然頁面會顯得零散、雜亂。
四、卡片、列表、無框設(shè)計的區(qū)別
什么是卡片設(shè)計
卡片式設(shè)計借用了現(xiàn)實世界中的卡片的特征,就像一張信用卡或名片,它承載了圖片、文字、按鈕等元素,以一個縮略的形式提供了快速瀏覽信息的模塊。在視覺表現(xiàn)形式上,卡片式設(shè)計可以分為扁平式卡片和通欄式卡片,前者更像傳統(tǒng)意義上的卡片,上下左右都留有空隙:后者僅在上下留有空隙,甚至無空隙。
卡片式設(shè)計的優(yōu)點
1.獨特的設(shè)計語言
,卡片本身是一種設(shè)計語言,就像面形圖標(biāo)一樣具有矩形的形狀,帶著圓角或直角,甚至還有輕微的陰影。這種獨特的設(shè)計語言可以快速地從扁平化設(shè)計中區(qū)分出來,帶給用戶強烈的辨識度。例如 Google 將卡片作為 Material design 的設(shè)計語言,運用到 Android系統(tǒng)所有的移動設(shè)備上,形成了獨一無二的視覺風(fēng)格。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
2.靈活的空間擴展
,相比傳統(tǒng)的列表式設(shè)計只能縱向滾動瀏覽,卡片式設(shè)計的空間擴展性更加靈活多變。由于每一個卡片都是獨立存在的因此既可以縱向滾動,也可以橫向滑動。例如馬蜂窩的卡片式設(shè)計通過橫向滑動在狹窄的屏幕上展示更多內(nèi)容,花瓣的兩列卡片式設(shè)計也為界面空間提供了更多的展示內(nèi)容,這些都大大提高用戶的瀏覽效率。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
3.清晰的視覺呈現(xiàn)。
卡片化繁為簡,將不同類型的元素有效地組織!在一起,形成一個封閉式的視覺形式。每一個卡片之間都具有獨立性不會相互干擾,它們保持著一致的外觀,讓界面看上去干凈和簡潔。例如 App Store 和去哪兒賦予每一個卡片一個主題,以簡單明快的內(nèi)容表現(xiàn)形式吸引用戶的注意力,簡潔、連貫的卡片也避免了因為內(nèi)容太長讓用戶產(chǎn)生畏懼心理。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
4.易于的內(nèi)容整理。
卡片是一個容器,將不同緯度的內(nèi)容進行區(qū)分或?qū)⑾嗤暥鹊膬?nèi)容歸納在一起,形成一個獨立的模塊,能有效地避免信息散亂和分類不清晰的狀況發(fā)生,讓界面的視覺層次變得清晰。例如途牛在一個界面中展示了多種不同形式的卡片式設(shè)計,通過卡片的大小顏色、圖文組合進行區(qū)分,視覺層次清晰明了。再例如騰訊視頻將相同功能的列表進行分組,有助于用戶快速獲取信息。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
5.特殊的功能屬性。
卡片不僅是內(nèi)容的容器,同樣也是操作和交與的載體,由于它的視覺表現(xiàn)是獨立存在的,因此可以用于背景之上的對話框設(shè)計,以強烈的視覺表現(xiàn)力尋求一次互動。例如進入后彈出一個對話框,請求用戶開啟通知。再例如滴滴出行和美團外賣將一次活動推廣展現(xiàn)在卡片上,以此快速吸引用戶的注意力。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
什么是列表式設(shè)計
列表式設(shè)計是 App 中最常見的表現(xiàn)形式,它使用分割線對不同的元素進行有效的組織,幫助用戶理解界面的視覺層次。在視覺表現(xiàn)形式上,列表式設(shè)計根據(jù)分割線的不同長度可以分為半分割線式列表、縮進分割線式列表和通欄分割線式列表。
列表式設(shè)計的優(yōu)點
1.輕量化的設(shè)計。
列表式設(shè)計是真正意義上的扁平化設(shè)計,不像卡片式設(shè)計那樣有著清晰的視覺層次,它讓所有的信息內(nèi)容處于同一個平面。這樣的好處是干凈的界面可以減少對用戶的視覺干擾,以便用戶順暢的進行瀏覽。親切和友好的用戶體驗是列表式設(shè)計的最大優(yōu)點,它非常適合于形式簡單的信息內(nèi)容。例如網(wǎng)易云音樂和今日頭條的每一條動態(tài)都有著相似的形式,輕量化的列表式設(shè)計讓用戶的瀏覽變得輕松和優(yōu)雅。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
2.提升瀏覽效率。
列表式設(shè)計沒有寬厚的空隙作為信息內(nèi)容的區(qū)分而是使用一條細窄的分割線。它非常適合于非常多的同類的信息內(nèi)容、可以極大地節(jié)省界面的空間,讓狹小的屏幕顯示更多內(nèi)容,在無形中就提升了用戶的瀏覽效率。例如 微博 和騰訊新聞的商品都是左圖右文的結(jié)構(gòu),使用簡單的列表式設(shè)計,有助于用戶快建地進行瀏覽。
我們再來試看分析微博動態(tài)為什么使用卡片式設(shè)計,而不是列表式設(shè)計。首先,微博強調(diào)每一個動志的豐富內(nèi)容和獨特個性,希望用戶進行分事、評論和點贊操作,卡片式設(shè)計有效地將用戶的注意力停量在當(dāng)前的卡片上;其次,五花八門的內(nèi)容形式使用卡片式設(shè)計易于整理,可以保持清晰的視覺層次。
什么是無框式設(shè)計
無框式設(shè)計是一種去形式化的設(shè)計,它強調(diào)化繁為簡,去除一切與內(nèi)容無類的裝飾性元素,旨在突出內(nèi)容本身、好讓重要的信息及功能更容易被關(guān)注,讓用戶更加清晰和直觀地進行瀏覽。在無框式設(shè)計中,你幾乎看不到區(qū)分內(nèi)容的分割線,它通過大間距就完成了視覺層次的劃分留白是它的最大武器。
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
無框式設(shè)計的優(yōu)點
1.極簡主義風(fēng)格。
相比卡片式設(shè)計追求“多”,無框式設(shè)計則追求“少”,即用最簡單的形式和最理性的設(shè)計創(chuàng)造最深入人的藝術(shù)感受例如余音使用白色的背景,左小右大的邊距和大量的留白,呈現(xiàn)出一種獨特的產(chǎn)品氣質(zhì)。列表設(shè)計去掉分割線,干凈到一塵不染的界面讓用戶產(chǎn)生極為深刻的印象。
2.掌控注意力
。無框式設(shè)計最顯著的特征就是去除裝飾性的分割線通過間距的親密和疏遠對比進行視覺層次的劃分。大量的留白設(shè)計把空間留給內(nèi)容,把內(nèi)容留給用戶。使用了無框式設(shè)計沒有了那些分割線的干擾,有效地掌控了用戶的注意力,讓用戶把目光集中在內(nèi)容本身。
3.保持界面整潔。
設(shè)計是連貫、統(tǒng)一的,沒有了邊框可以讓界面保持干凈、整潔的畫面。而一旦有了邊框,這種簡潔的設(shè)計就會被打部精王德商處可見那些細碎的分副線或描邊,使得界面變的擁擠不堪。大部分用戶都喜愛干凈、整潔的畫面,微博和騰訊新聞就是這樣的設(shè)計。
五、卡片的應(yīng)用場景
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
瀑布流
瀑布流主要正針對圖片較多、或以圖片為主的內(nèi)容設(shè)計,它最大的優(yōu)點是無需過于在意圖片的高度,最大限度的還原原始圖片效果。
信息流
信息流主要通過文字、圖片或視頻等媒介來展示較長的內(nèi)容,這需要用戶花費一定的時間進行滑動和瀏覽,才能篩選出對自己有用的信息。
左右滑動
在音樂、視頻等以圖片為主要內(nèi)容的產(chǎn)品中,卡片式左右滑動的設(shè)計最為常見。這是因為卡片式設(shè)計能夠更好地展現(xiàn)內(nèi)容的層次感和吸引力,尤其對于以圖片為主的產(chǎn)品來說,卡片式設(shè)計可以提供更豐富的視覺效果,增強用戶的瀏覽體驗。
頁面頭部
卡片式設(shè)計是一種有效的布局方式,它可以在個人中心、個人主頁、會員等頁面中,將關(guān)鍵信息進行整合和概括,從而形成清晰、連貫的視覺結(jié)構(gòu)。
 
六、卡片的設(shè)計原則
在UI界面中,卡片設(shè)計是一種重要的布局方式,它以其簡潔性、模塊化和可自定義特性而備受設(shè)計師與使用者青睞。以下是卡片設(shè)計時需要遵循的一些關(guān)鍵原則:
小卡片大布局-帶你掌握卡片設(shè)計攻略
 
 
一、簡潔清晰原則
信息精煉:每張卡片應(yīng)僅展示關(guān)鍵信息或功能,防止信息負荷過大,確保用戶能夠快速獲取所需內(nèi)容。
視覺元素簡潔:避免在卡片上添加過多的裝飾性元素,保持設(shè)計的簡潔性。
二、一致性原則
視覺風(fēng)格統(tǒng)一:不同卡片之間應(yīng)保持一致的視覺風(fēng)格,包括顏色、字體、圖標(biāo)等,以提高用戶識別及使用效率。
布局規(guī)范:卡片的布局應(yīng)遵循一定的規(guī)范,如邊距、圓角大小等,以保持整體的一致性。
三、層次性原則
信息層級明確:通過字體大小、顏色、圖標(biāo)等方式明確信息的層級關(guān)系,引導(dǎo)用戶按照重要性順序瀏覽信息。
視覺空間感:利用投影、前后顏色設(shè)定等手段提升整體設(shè)計層次感,使卡片看起來更加立體和自然。
四、交互體驗原則
操作便捷:為用戶提供充足的操作空間與方式,如點擊、滑動等,鼓勵用戶深度參與信息生成與傳播過程。
反饋及時:在用戶與卡片進行交互時,應(yīng)提供及時的反饋效果,如顏色變化、動畫等,以增強用戶的交互體驗。
五、適應(yīng)性原則
響應(yīng)式設(shè)計:卡片設(shè)計應(yīng)能夠適應(yīng)不同屏幕尺寸和設(shè)備類型,確保在各種環(huán)境下都能保持良好的顯示效果。
內(nèi)容靈活:卡片的內(nèi)容應(yīng)具有一定的靈活性,可以根據(jù)實際需求進行調(diào)整和更新。
六、設(shè)計細節(jié)原則
圓角設(shè)計:圓角的設(shè)定應(yīng)符合整體的風(fēng)格調(diào)性,大圓角表達柔和,小圓角表達硬朗。
邊距與留白:合理的邊距和留白可以提升整體設(shè)計的層次感,使內(nèi)容更加突出且易于閱讀。
標(biāo)題與正文:標(biāo)題應(yīng)簡短明了,用于說明卡片的內(nèi)容;正文部分則應(yīng)簡潔精煉,避免冗余信息。
卡片設(shè)計在UI界面中扮演著重要角色,它不僅能夠提升用戶體驗,還能增強信息的可讀性和可理解性。因此,在進行卡片設(shè)計時,應(yīng)遵循簡潔清晰、一致性、層次性、交互體驗、適應(yīng)性以及設(shè)計細節(jié)等原則,以確??ㄆO(shè)計的質(zhì)量和效果。
總結(jié)
隨著科技的不斷進步和用戶需求的變化,卡片設(shè)計也在不斷發(fā)展和創(chuàng)新。未來,卡片設(shè)計將更加注重個性化和智能化。通過用戶行為分析和機器學(xué)習(xí)等先進技術(shù)手段,可以為用戶提供更加精確和個性化的推薦和服務(wù)。同時,虛擬現(xiàn)實(VR)和增強現(xiàn)實(AR)等新技術(shù)的發(fā)展也將為卡片設(shè)計帶來更多元化的應(yīng)用場景和更豐富的用戶體驗。
綜上所述,UI界面中的卡片設(shè)計是一種重要且有效的設(shè)計方式。通過遵循設(shè)計原則、掌握設(shè)計技巧并借鑒優(yōu)秀案例,可以設(shè)計出既美觀又實用的卡片界面。


作者:蘑菇小象117
鏈接:https://www.zcool.com.cn/article/ZMTYzNjU2MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個人資料

存檔