日本十八禁免费看污网站_久久久综合九色合综_新无码h肉动漫在线观看_国产极品粉嫩在线播放 久久久久久人妻无码_又嫩又硬又黄又爽的视频_亚洲AV无码久久_糖心VLOG精品一区二区

首頁

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

杰睿

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

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

 

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

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

 

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

 

我們直接在商品圖片周邊留出2px的邊框,就能很好的解決這個問題,因?yàn)楸尘笆腔疑?,留出的邊框剛好讓白色圖片看著有一個輪廓,整體更加和諧。

 

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

 

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

 

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

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

 

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

 

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

 

 

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

 

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

 

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

 

善用空格和留白

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

 

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

 

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

 

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

 

最后

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



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

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

耍好控件 | 如何做好「按鈕」的用戶體驗(yàn)?

杰睿

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

 

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

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

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

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

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

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

  3. 填充按鈕(重點(diǎn)強(qiáng)調(diào)):填充按鈕具有視覺重點(diǎn),因?yàn)樗鼈兪褂昧祟伾畛浜完幱埃?/p>

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

 

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

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

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

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

 

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

 

 

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

 

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

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

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

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

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

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

 

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

 

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

 

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

 

 

 

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

 

 

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

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

 

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

 

 

 

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

 

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

 

 

 

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

 

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

 

 

 

通過兩個實(shí)驗(yàn)印證了按鈕尺寸設(shè)計(jì)的科學(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è)計(jì)按鈕時,盡量不要低于這個高度(文字按鈕也應(yīng)該盡量把可點(diǎn)擊熱區(qū)擴(kuò)展到這個高度);

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

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

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

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

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

但實(shí)際上MD規(guī)范提到按鈕狀態(tài),不但沒有簡單地一筆帶過,還展開了一個專題進(jìn)行了深入研究,可見把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-點(diǎn)擊狀態(tài)(按鈕被點(diǎn)擊按下的狀態(tài))

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

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

 

 

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

 

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

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

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

 

 

 

四、結(jié)語

 

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

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

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



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

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

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

杰睿

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


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

UI 設(shè)計(jì)的 10 個細(xì)節(jié)

杰睿

俗話說:“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計(jì)師能力的代表。隨著項(xiàng)目經(jīng)驗(yàn)的積累和專業(yè)能力的成熟,我們對于設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的沉淀也會越來越多,設(shè)計(jì)輸出也會因?yàn)檫@些細(xì)節(jié)而顯得更優(yōu)秀。
 
黑馬哥結(jié)合職場經(jīng)驗(yàn)和教學(xué)經(jīng)驗(yàn),總結(jié)了 120+ 設(shè)計(jì)原則、設(shè)計(jì)細(xì)節(jié)和設(shè)計(jì)經(jīng)驗(yàn)的案例分析。案例內(nèi)容涉及布局、圖標(biāo)、按鈕、文本、配色、配圖、規(guī)范、交互和設(shè)計(jì)經(jīng)驗(yàn)等,目的是為了讓我們的設(shè)計(jì)更規(guī)范、更專業(yè)、有細(xì)節(jié)、有亮點(diǎn)、有思維。
 
今天先挑選其中的 10 個案例和大家一起交流一下。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
分享目錄
 
1. 圓角圖片對齊時不要完全左對齊
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
3. 數(shù)據(jù)表達(dá)特殊化
4. 預(yù)估好信息呈現(xiàn)的最大值
5. 慎用高飽和度的顏色
6. 通過蒙版降低信息干擾度
7. 利用背景色突出小圖標(biāo)的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對齊時不要完全左對齊
 
設(shè)計(jì)中遇到圖片帶有圓角時,文字排版不適合完全基于圖片左對齊,視覺上會顯得文字太靠左,失去視覺平衡度。適當(dāng)預(yù)留間距視覺上更平衡,版面結(jié)構(gòu)也會更穩(wěn)重。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范
 
同屬性版塊需要統(tǒng)一圖標(biāo)設(shè)計(jì)規(guī)范,不要出現(xiàn)風(fēng)格混搭,遵循圖標(biāo)設(shè)計(jì)的十大統(tǒng)一性:風(fēng)格、大小、粗細(xì)、圓角、比例、透視、角度、疏密、間距、正負(fù)形。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
3. 數(shù)據(jù)表達(dá)特殊化
 
在可視化的場景中,針對一些特殊數(shù)據(jù)展示的時候,可以選擇特殊字體增加設(shè)計(jì)感。再通過字體大小對比、字重對比、顏色深淺對比等來突出數(shù)據(jù)。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
4. 預(yù)估好信息呈現(xiàn)的最大值
 
在進(jìn)行 UI 設(shè)計(jì)時,需要預(yù)估好當(dāng)前位置所能承載的最大值,不能只在理想化的狀態(tài)內(nèi)設(shè)計(jì)。雖然簡化的內(nèi)容看起來更美觀,但是最大值下的設(shè)計(jì)思考才能避免上線后的誤差。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設(shè)計(jì)配色需要考慮用戶長時間的預(yù)覽體驗(yàn),高飽和度的配色不適合長時間觀看,容易造成視覺疲勞。適當(dāng)降低飽和度使得配色更加舒適,有利于提升用戶預(yù)覽體驗(yàn)度。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
6. 通過蒙版降低信息干擾度
 
在圖片上面展示文案時,需要考慮圖片對于文案信息的干擾度。為了防止復(fù)雜場景的圖片干擾信息傳遞,需要在信息區(qū)域添加漸變蒙版,以此來降低對于信息的干擾度。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
7. 利用背景色突出小圖標(biāo)的空間占比
 
需要突出圖標(biāo)的空間占比時,放大圖標(biāo)會顯得視覺焦點(diǎn)太強(qiáng),也容易暴露圖標(biāo)繪制的缺點(diǎn)而顯得粗糙。添加統(tǒng)一的造型和背景色,可以突出小圖標(biāo)的空間占比,提升感官體驗(yàn)。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場景中,需要對按鈕添加漸變色時,最好選擇近似色等鄰近范圍的配色,會使得視覺效果更加和諧、舒適。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設(shè)計(jì)需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對比,始終保持按鈕與背景的高對比度和可讀性。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標(biāo)簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺效果對比模糊,畫面表現(xiàn)不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設(shè)計(jì)的 10 個細(xì)節(jié)
 
 
 
 
小結(jié)
 
以上案例屬于 120+ 案例中隨機(jī)挑選的 10 個作為示意,該系列案例也會持續(xù)更新。希望大家可以從這些案例中獲得一些設(shè)計(jì)經(jīng)驗(yàn),助力設(shè)計(jì)輸出,能夠做出更好的設(shè)計(jì)作品。經(jīng)驗(yàn)屬于個人職場和教學(xué)中的沉淀,如有不足歡迎留言補(bǔ)充。


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

從碎片到系統(tǒng):設(shè)計(jì)師必備的知識庫搭建指南

杰睿

瓷片區(qū)是我們設(shè)計(jì)師在平時的APP設(shè)計(jì)中經(jīng)常遇到的設(shè)計(jì)需求,雖然只是界面中一塊較小的區(qū)域,設(shè)計(jì)看似簡單,但它涵蓋了用戶研究、設(shè)計(jì)心理、UI設(shè)計(jì)等多個設(shè)計(jì)知識點(diǎn)。瓷片區(qū)對于產(chǎn)品的推廣、品牌的傳播等也具有著重要的作用。我通過工作中的一些設(shè)計(jì)心得進(jìn)行總結(jié)沉淀形成此篇設(shè)計(jì)指南,從多個維度探討剖析瓷片區(qū)的設(shè)計(jì)方法,希望能夠協(xié)助設(shè)計(jì)師更好的規(guī)劃設(shè)計(jì)產(chǎn)品,增強(qiáng)用戶的滿意度和粘性,為用戶帶來更為舒適流暢的實(shí)用體驗(yàn)。文章若有不妥之處,還望共同交流指正。
 
前言
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
此篇文章通過講解關(guān)于瓷片區(qū)的一些認(rèn)知以及設(shè)計(jì)手法的設(shè)計(jì)指南,來幫助大家更好的理解瓷片區(qū)設(shè)計(jì)的重要性和應(yīng)用方法。作為產(chǎn)品設(shè)計(jì)過程中的考慮因素和規(guī)則不是一成不變的,希望在未來的設(shè)計(jì)中能夠有更多的方法和技巧指引設(shè)計(jì)師們完成更好更優(yōu)秀的設(shè)計(jì)作品。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是APP應(yīng)用設(shè)計(jì)中經(jīng)常出現(xiàn)的一款引導(dǎo)型組件模塊,主要在首頁主推內(nèi)容區(qū)進(jìn)行展示,和Banner區(qū)、金剛區(qū)并行三大運(yùn)營板塊,其權(quán)重較Banner區(qū)和金剛區(qū)略低,一般放在兩者之下。瓷片區(qū)從外觀上看就像是一塊塊瓷片一樣組合“貼”在頁面中,構(gòu)成一組排列在一起的運(yùn)營廣告位,故統(tǒng)稱為“瓷片區(qū)”。例如京東商城、美團(tuán)、攜程服務(wù)、個人中心等產(chǎn)品都含有瓷片區(qū)。
瓷片區(qū)可以在一個頁面區(qū)域內(nèi)劃分出不同的組合,且每個區(qū)域內(nèi)會包含產(chǎn)品主體視覺元素(圖片)、標(biāo)題、介紹文案、標(biāo)簽和背景等信息。瓷片區(qū)和banner作用較相似,但相較Banner區(qū)和金剛區(qū)使用更加靈活,應(yīng)用場景較多。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)本質(zhì)上就是運(yùn)營內(nèi)容區(qū),它更接近于一個功能模塊的外部固定廣告位。它的展示內(nèi)容雖然會隨著時間場景變化,但是代表的功能模塊是保持不變的,每個瓷片就是這個功能模塊的窗口,引導(dǎo)用戶進(jìn)入對應(yīng)功能模塊中。
瓷片區(qū)不僅較多在電商場景應(yīng)用中,還可能出現(xiàn)在其他所有應(yīng)用類型中。例如旅游、金融、娛樂生活等多類產(chǎn)品,但在工具類產(chǎn)品中卻不太適用。
1.金融類
金融產(chǎn)品如銀行應(yīng)用、投資平臺等,往往包含復(fù)雜的服務(wù)和功能。此類APP中的瓷片區(qū)可用于展示金融產(chǎn)品、投資理財(cái)建議等。通過專業(yè)的圖表、數(shù)據(jù)和解析,運(yùn)用圖形化的方式簡潔明了地傳達(dá)信息,幫助用戶幫助用戶快速理解產(chǎn)品特點(diǎn),更好地了解市場動態(tài),從而做出更明智的投資決策。
2.
生活服務(wù)類
在生活服務(wù)類APP中,瓷片區(qū)可以展示各類服務(wù)入口,如美食、旅游、休閑娛樂等。通過直觀的布局、明確的分類以及醒目的圖片,吸引用戶進(jìn)行探索和預(yù)訂,幫助用戶快速找到所需服務(wù),提升用戶體驗(yàn)。同時根據(jù)用戶的瀏覽記錄和購買歷史,推薦相關(guān)的商品或服務(wù)?;蛘吒鶕?jù)用戶的地理位置和時間信息,推薦附近的餐廳、景點(diǎn)等,通過個性化的推薦方式能夠提升用戶的滿意度和粘性。
3.新聞資訊類
新聞資訊類APP中的瓷片區(qū)可用于展示熱門新聞、重要事件或?qū)n}報(bào)道。通過及時更新內(nèi)容,瓷片區(qū)可以幫助用戶快速獲取最新信息,同時提高用戶對APP的依賴度和使用頻率。
4.虛擬類
對于軟件、游戲或數(shù)字內(nèi)容等虛擬產(chǎn)品,瓷片區(qū)能夠通過創(chuàng)意插畫或圖形,增加產(chǎn)品的調(diào)性和趣味性,提升用戶體驗(yàn)。
5.設(shè)計(jì)類
設(shè)計(jì)相關(guān)的應(yīng)用或平臺使用瓷片區(qū)也可以展示設(shè)計(jì)作品、設(shè)計(jì)理念或者設(shè)計(jì)工具等,通過視覺藝術(shù)吸引目標(biāo)用戶群體。
6.電商或商城類
在電商類APP中,瓷片區(qū)常被用于展示熱門商品、促銷活動等,通過精美的高質(zhì)量產(chǎn)品圖片展示和吸引人的文案,直接影響用戶的點(diǎn)擊率和購買意愿,從而促成交易。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)類似于
一種產(chǎn)品服務(wù)展示,是主要負(fù)責(zé)流量導(dǎo)流功能,吸引用戶注意力,幫助業(yè)務(wù)推廣產(chǎn)品。瓷片區(qū)一般都位于用戶最容易點(diǎn)擊的區(qū)域,方便引導(dǎo)用戶點(diǎn)擊進(jìn)入,使用戶更容易尋找自己所需產(chǎn)品。在現(xiàn)如今的產(chǎn)品設(shè)計(jì)中,瓷片區(qū)具有著十分重要的作用和意義。
1.流量引導(dǎo)與轉(zhuǎn)化
瓷片區(qū)是APP設(shè)計(jì)中不可或缺的組件,它是流量的入口和轉(zhuǎn)化點(diǎn)。通過精心設(shè)計(jì)的瓷片區(qū),可以有效地吸引用戶的注意力,引導(dǎo)他們點(diǎn)擊并深入了解相關(guān)的內(nèi)容或功能。這有助于提升用戶的參與度,同時增加APP內(nèi)特定內(nèi)容或服務(wù)的曝光率,從而促進(jìn)流量的轉(zhuǎn)化。
2.引導(dǎo)用戶注意力
瓷片區(qū)通過展示商品圖、代言人等視覺元素,有效吸引用戶的注意力,起到引導(dǎo)用戶點(diǎn)擊和進(jìn)一步探索的作用。
3.個性化推薦與用戶體驗(yàn)
瓷片區(qū)通常也具備個性化推薦的功能,可以根據(jù)用戶的興趣和行為習(xí)慣,展示符合他們需求的內(nèi)容。這種個性化的推薦方式不僅可以提高用戶的滿意度,還能增強(qiáng)用戶對APP應(yīng)用的黏性。同時,通過優(yōu)化瓷片區(qū)的交互設(shè)計(jì)和視覺呈現(xiàn),可以提升用戶的使用體驗(yàn),使其更加便捷、舒適地瀏覽和選擇內(nèi)容。
4.提升轉(zhuǎn)化率
由于瓷片區(qū)能夠集中展示多個促銷信息或功能模塊,它通常具有較高的轉(zhuǎn)化率,這對于提升用戶的購買行為或參與度是非常有利的。
5.增加產(chǎn)品留存率
良好的瓷片區(qū)設(shè)計(jì)能夠提升用戶的使用體驗(yàn),從而提高整個產(chǎn)品的留存率。
6.業(yè)務(wù)推廣與品牌展示
瓷片區(qū)是進(jìn)行業(yè)務(wù)推廣和品牌展示的重要場所。設(shè)計(jì)瓷片區(qū)往往會考慮到美觀性和藝術(shù)性,這有助于提升產(chǎn)品的整體視覺效果,增強(qiáng)用戶對品牌的良好印象。通過出色的視覺展示核心產(chǎn)品或服務(wù),幫助企業(yè)有效地傳達(dá)品牌形象和價值,吸引潛在用戶的關(guān)注。同時,結(jié)合特定的營銷活動或促銷策略,瓷片區(qū)還可以提升用戶的購買意愿,促進(jìn)業(yè)務(wù)的發(fā)展。
7.數(shù)據(jù)收集與優(yōu)化
瓷片區(qū)的設(shè)計(jì)和實(shí)施還涉及到大量的數(shù)據(jù)收集和分析工作。通過對用戶點(diǎn)擊、瀏覽等行為的追蹤和分析,可以了解用戶的偏好和需求,為后續(xù)的優(yōu)化工作提供數(shù)據(jù)支持。這有助于APP不斷改進(jìn)和完善瓷片區(qū)的功能和表現(xiàn),提升整體的用戶體驗(yàn)和效果。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
在眾多產(chǎn)品中,通過瓷片區(qū)的設(shè)計(jì)能增加對商品、功能的曝光,使用戶群更愿意去購買或了解感興趣的商品、功能。設(shè)計(jì)師根據(jù)瓷片區(qū)導(dǎo)流入口-落地頁-轉(zhuǎn)化率設(shè)計(jì),通過整個流程中收集數(shù)據(jù),提升優(yōu)化設(shè)計(jì)體驗(yàn),實(shí)現(xiàn)設(shè)計(jì)價值。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是在一個APP中將一塊矩形區(qū)域內(nèi)劃分出不同的矩形組合,每個二級矩形內(nèi)一般會包含標(biāo)題、介紹文字、主體視覺元素、標(biāo)簽等信息,通過擺放推廣相關(guān)的內(nèi)容吸引用戶點(diǎn)擊進(jìn)入。
1.瓷片區(qū)是具有營銷性的功能區(qū)域
瓷片區(qū)在設(shè)計(jì)層面上是具體的運(yùn)營模塊,而不是一種單純的設(shè)計(jì)形式。瓷片區(qū)是對于存在的產(chǎn)品進(jìn)行流量擴(kuò)充,是提高產(chǎn)品點(diǎn)擊率,是產(chǎn)品存在后方便調(diào)整流量使用。下圖中遮照區(qū)域是產(chǎn)品的核心功能區(qū),不是簡單的營銷入口,不能被刪除,否則會影響用戶使用。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
2.瓷片區(qū)是靜態(tài)固定的區(qū)域模塊
APP軟件中常出現(xiàn)功能列表頁,它是后臺獲取數(shù)據(jù)的入口,是一種整齊排列,一層層疊加的片區(qū),可以以一個單獨(dú)模塊的形式出現(xiàn),不是像瓷片區(qū)類似貼瓷磚組合呈現(xiàn)。在沒有產(chǎn)品展示的情況下瓷片區(qū)可以顯示空狀態(tài),區(qū)域整體拼接結(jié)構(gòu)不變,以靜態(tài)固定狀態(tài)顯示。下圖中頁面本身為功能列表,模塊性質(zhì)本身不屬于營銷性質(zhì)。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
3.瓷片區(qū)不是金剛區(qū)
瓷片區(qū)不是設(shè)計(jì)形式,它的拼接表現(xiàn)形式不是只限定于瓷片區(qū)可以用,在任何其他位置和模塊都可以采用這種樣式進(jìn)行設(shè)計(jì)。瓷片區(qū)的功能權(quán)重較金剛區(qū)略低,金剛區(qū)較多的為產(chǎn)品核心功能入口,而瓷片區(qū)多為運(yùn)營活動的營銷導(dǎo)流入口。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
4.瓷片區(qū)不是快速入口
我們經(jīng)常會看到一些快速入口會像瓷片區(qū)一樣做成卡片拼貼的樣式,但不管樣式如何改變,瓷片區(qū)和快速入口在內(nèi)容承載上有著本質(zhì)的區(qū)別。
瓷片區(qū)有較強(qiáng)的誘導(dǎo)性,通過展示的信息元素、圖片,如商品圖片、產(chǎn)品代言人,來
誘發(fā)用戶關(guān)注并點(diǎn)擊,在刪除后不會影響產(chǎn)品的正常使用??焖偃肟谒饕獞?yīng)對的是
用戶的主動行為,通過把功能入口密集的羅列出來方便用戶進(jìn)行查找和點(diǎn)擊。它主要以展示主題入口相關(guān)圖形為主,可以是圖標(biāo)也可以是圖片、圖形 ,如果刪除會影響產(chǎn)品使用。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
在瓷片區(qū)設(shè)計(jì)中,一般常見的類型分為3種:實(shí)物照片類、插畫類、淘寶電商類
1.實(shí)物照片類
優(yōu)點(diǎn):識別度高,不需要明確的文案標(biāo)注,圖片代入感強(qiáng),帶有圖片本身屬性的名稱和樣貌、可復(fù)用性強(qiáng),設(shè)計(jì)效率較高。
缺點(diǎn):對圖片素材要求高,圖片顯示有細(xì)節(jié)。
場景:對實(shí)物圖需求較大的應(yīng)用產(chǎn)品類型,如外賣、家居、服裝、旅游等產(chǎn)品使用較多。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
2.插畫類
優(yōu)點(diǎn):可高度描述瓷片區(qū)的運(yùn)營意義,精美的插畫有助于提升細(xì)膩性,產(chǎn)品的細(xì)節(jié)品質(zhì)和趣味,插畫本身色彩明度低飽和度高,圖形表現(xiàn)活躍,風(fēng)格可控。
缺點(diǎn):偏抽象的產(chǎn)品,沒有合適的實(shí)圖可替代,此類產(chǎn)品多以插畫的形式去表現(xiàn)。矢量插畫類頁面對周圍環(huán)境,所表現(xiàn)的內(nèi)容需要進(jìn)行一對一繪制,需要高度的概括主題的圖形。由于針對屬性比較強(qiáng),所以難以復(fù)用。同時圖形構(gòu)圖繪制時間較長,時間成本較高,繪制時需要特別注意對關(guān)鍵信息的提煉以及識別度。
場景:對設(shè)計(jì)風(fēng)格有明顯要求,如金融、理財(cái)、教育、生活等產(chǎn)品。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
3.淘寶電商類
優(yōu)點(diǎn):根據(jù)用戶反饋數(shù)據(jù)提供高頻輸送內(nèi)容,與瀏覽數(shù)據(jù)時時對應(yīng),符合用戶心智,轉(zhuǎn)化率更高。
缺點(diǎn):通過大數(shù)據(jù)真實(shí)反饋內(nèi)容推動產(chǎn)品營銷,每個產(chǎn)品單獨(dú)以個性化形式展示,其他商家產(chǎn)品難以復(fù)制,具有技術(shù)實(shí)現(xiàn)難度。
場景:對設(shè)計(jì)千變?nèi)f化,定制多樣,常用產(chǎn)品為電商類等。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
在進(jìn)行瓷片區(qū)設(shè)計(jì)時,我們往往需要投入更多的精力進(jìn)行細(xì)致化設(shè)計(jì)。而瓷片區(qū)究竟是由哪些元素組成呢?
背景、圖片、文字是瓷片區(qū)主要構(gòu)成元素,其中也可以運(yùn)用插畫、圖標(biāo)、標(biāo)簽、裝飾等進(jìn)行搭配使用,作為設(shè)計(jì)延展元素。背景、圖片、文字在瓷片區(qū)一般必須出現(xiàn),他們是對產(chǎn)品展現(xiàn)、描述或?qū)I銷目標(biāo)表達(dá)的關(guān)鍵因素,插畫、圖標(biāo)、標(biāo)簽、裝飾等可根據(jù)設(shè)計(jì)風(fēng)格、飽滿度、產(chǎn)品需求上加以使用,豐富視覺,突出特殊標(biāo)識。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
瓷片區(qū)是一個需要視覺比較突出的組件,擁有較強(qiáng)的視覺感才能起到引導(dǎo)用戶點(diǎn)擊的效果。如何設(shè)計(jì)好瓷片區(qū),從了解瓷片區(qū)各個元素設(shè)計(jì)開始。
1.框架布局
要了解瓷片區(qū)的設(shè)計(jì)方法,要先了解瓷片區(qū)的布局。在整個產(chǎn)品組件區(qū)域內(nèi),需要有
效分配空間給不同的瓷片。首先在前期設(shè)計(jì)中,要優(yōu)先確定瓷片區(qū)框架的四周內(nèi)邊距,然后再根據(jù)要放置的瓷片數(shù)量和重要性進(jìn)行合理分配,一般可將模塊拆分出 2*2、3*2、4*2、4*1的基本網(wǎng)格系統(tǒng)。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
如果各個模塊的重要性不同,可以將多個小瓷片按照縱向或橫向排列合并為一個大瓷片,或?qū)⒋蟠善鸱殖啥鄠€小瓷片,以瓷片區(qū)域的大小來形成視覺權(quán)重的區(qū)分。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
布局的結(jié)構(gòu)的劃分是整個瓷片區(qū)設(shè)計(jì)的主體,除了以上常用的最基本構(gòu)圖方法外,還有很多不同的瓷片分布方式,要通過不斷的積累實(shí)驗(yàn)發(fā)揮自身創(chuàng)新能力,設(shè)計(jì)出更豐富的瓷片區(qū)展示形式。
2.元素排版
單個瓷片區(qū)內(nèi)的元素一般由背景、文字、圖片/圖標(biāo)/標(biāo)簽/裝飾構(gòu)成。常見的排版方式一般有左右排版、上下排版、對角線排版、Z字型排版這四種通用的排版形式。
(1)左右排版
一般在配圖為圖片、圖標(biāo)時適用,一般一行顯示一塊或兩塊瓷片。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(2)上下排版
采用上文下圖的形式,一般在界面的功能入口較多時適用,一般一行顯示不少于3塊瓷片。這種元素排版,在營銷型展示上一般為上圖下文,偏功能型的展示則為上文下圖。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(3)對角線排版
文字和圖片呈對角線布局,一般一行顯示兩到三塊瓷片,此種布局可顯示較多文字信息。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(4)Z字型排版
文字、圖片和標(biāo)簽成Z字型排布,文字可跨度到圖片區(qū)域,一般一行顯示兩到三片瓷片,此布局也可顯示較多文字。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
根據(jù)業(yè)務(wù)需求,在不同場合可以選擇一種以上布局排版組合使用,使得版面更加豐富,排版上也能夠有所變化,突出優(yōu)先級,增加設(shè)計(jì)美感,做出更符合產(chǎn)品需求的設(shè)計(jì)效果。
3.文字使用
文字部分是瓷片區(qū)重要的組成內(nèi)容,應(yīng)該簡明清楚,準(zhǔn)確傳達(dá)核心信息。文字與圖片的合理擺放能夠使得信息層次清晰易讀。
(1)文字的大小
文字是瓷片區(qū)重要的組成部分,一般從文字尺寸上可分為標(biāo)題、副文本兩種大小,副標(biāo)題、標(biāo)簽、價格可統(tǒng)稱為副文本,他們的尺寸基本一致的。由于受瓷片區(qū)內(nèi)文本量尺寸限制,可選擇的文字大小范圍較小,所以一般會定義兩三種規(guī)格的字段使用。在APP端主標(biāo)題文字字號建議在30-34px,副文本文字建議在24-26px,而其他說明性副文本文字不能小于20px。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(2)文字的位置
在瓷片區(qū)內(nèi),文字放置的位置在左側(cè)、上側(cè)和左上側(cè),如果根據(jù)視覺排版需要也可以把文字放在右側(cè)、下側(cè)等,排版上沒有固定要求。同時,文字排版還需要保證跨瓷片對齊。雖然在不同瓷片區(qū)中不同的對齊方式可以增加視覺變化,如果一個瓷片一個樣子,容易造成雜亂不統(tǒng)一,在設(shè)計(jì)中還需盡量保證跨瓷片文字對齊。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(3)文字的層級
瓷片區(qū)主標(biāo)題和其他副文本文字設(shè)計(jì)要做好層級區(qū)分,可以通過文字大小、粗細(xì)、顏色等體現(xiàn)主次關(guān)系,尤其要注意文字顏色的使用問題,主標(biāo)題相較于其他副文本文字顏色要更清晰更突出。副文本作為主標(biāo)題的輔助和延續(xù),不能喧賓奪主,主次關(guān)系混亂。而標(biāo)簽的文字也要符合層級劃分,根據(jù)產(chǎn)品屬性和調(diào)性,按需求設(shè)計(jì)符合的標(biāo)簽文字樣式。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(4)文字的分類
瓷片區(qū)文字一般可分為非標(biāo)簽類文字和標(biāo)簽類文字。非標(biāo)簽類文字是主標(biāo)題加基礎(chǔ)副文本構(gòu)成。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
標(biāo)簽類文字可分為主副文字兩個板塊,標(biāo)簽為彩色標(biāo)簽或透明色標(biāo)簽,結(jié)合業(yè)務(wù)產(chǎn)品屬性和需要突出的文案,分別對應(yīng)不同的標(biāo)簽。主要文案一般位于瓷片區(qū)域的左上角和上部垂直居中的位置,副文案一般位于左下角、右側(cè)或下部視覺較弱的位置。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
4.圖片應(yīng)用
圖片是瓷片區(qū)的核心元素,需要選擇高質(zhì)量的實(shí)物實(shí)景圖或者創(chuàng)意插圖,確保圖片清晰、美觀且能夠真實(shí)反映產(chǎn)品特點(diǎn)。
(1)實(shí)物、實(shí)景圖片
瓷片區(qū)中的產(chǎn)品圖片大多為商品實(shí)物圖或?qū)嵕皥D,是用戶購買的真實(shí)實(shí)物產(chǎn)品或地區(qū)實(shí)景,具有較強(qiáng)的代入感,圖片要有高質(zhì)量的標(biāo)準(zhǔn),整體品質(zhì)精美,畫面清晰美觀,摳圖干凈舒適,在多張圖片使用的情況下,還需要保證圖片視覺感受風(fēng)格大小一致,這樣才能吸引用戶的點(diǎn)擊。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(2)插畫圖
瓷片的圖片如果偏抽象、沒有合適的實(shí)物圖或者設(shè)計(jì)要求的原因,圖片也可以矢量的插畫或圖標(biāo)形式替代,例如部分瓷片運(yùn)營位需要賦予更多的視覺展示性功能,就可以為其單獨(dú)進(jìn)行插畫或圖標(biāo)設(shè)計(jì),用表意的圖形增添產(chǎn)品調(diào)性和趣味性。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
5.背景
瓷片的背景主要為了
充實(shí)模塊,營造氛圍,一般在背景色彩形式上常使用高明度低飽和的純色或者選用漸變色為主。
(1)純色背景
可選取跟圖片或插圖主色調(diào)鄰近色彩進(jìn)行設(shè)計(jì),保證模塊主體突出,減少背景視覺影響。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(2)漸變色背景
可同色系漸變,選取同種顏色,飽和度發(fā)生變化。相鄰色系漸變選取相鄰色相和飽和度變化,也可選定淺色或向白色過渡,不論采用何種背景都不應(yīng)干擾主體元素的突出。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(3)淺灰色背景
一種近似乳白色,和底板顏色有細(xì)微差別即可,期望用戶能夠看到模塊化的層級處理而起到襯托作用。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(4)白色背景
視覺上展現(xiàn)沒有顏色或者只存在部分線框,畫面整潔干凈屬于百搭背景,在產(chǎn)品中使用較為普及。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(5)全景配圖背景
配圖覆蓋整個瓷片區(qū)域,較多的適用于外賣類、旅游類、家裝類產(chǎn)品,使用戶快速記憶了解產(chǎn)品,點(diǎn)擊進(jìn)入形成流量轉(zhuǎn)化,提高用戶轉(zhuǎn)化率,核心成交率。
全景配圖圖片素材要求高質(zhì)量,圖片一般要選取1000*1000px以上分辨率圖片,滿足多個終端顯示效果。圖片要求色調(diào)明亮,飽和度高,圖片色彩視覺感受和諧。畫面主體約占面積1/2,要保留留白區(qū)域,背景簡潔呼吸感強(qiáng),有空間感。全景配圖因?yàn)閳D片整體色彩元素呈現(xiàn)豐富,背景復(fù)雜,一般可以添加蒙層提高文案閱讀和標(biāo)識性。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
(6)局部配圖背景
這時瓷片區(qū)會一分為三,三分之二的位置放置文案,配圖約占據(jù)三分之一區(qū)域位置,這種排布適用于大多數(shù)產(chǎn)品,使得產(chǎn)品左右和諧平衡。而這類圖片素材和插圖要求高質(zhì)量,色調(diào)明亮,飽和度高。插圖圖標(biāo)既要滿足品牌色及延展,插圖圖標(biāo)樣式風(fēng)格也要保持一致,繪制注意提煉文案信息,圖文表意一致,概括性強(qiáng),統(tǒng)一圖片或插圖的高度和視覺面積。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
6.裝飾點(diǎn)綴
在設(shè)計(jì)瓷片區(qū)時還可以加入裝飾點(diǎn)綴,這是為了烘托模塊氛圍,讓畫面更豐富飽滿,給用戶帶來不一樣的視覺感受。
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
深度剖析|瓷片區(qū)設(shè)計(jì)指南
 
 
寫在最后
當(dāng)我們在開始設(shè)計(jì)瓷片區(qū)時,首先需要明確瓷片區(qū)的目標(biāo)和功能,一定要考慮當(dāng)前產(chǎn)品與展示的內(nèi)容是否匹配,包括用戶目標(biāo)的受重點(diǎn)是否需要瓷片區(qū),這有助于確保設(shè)計(jì)方案與業(yè)務(wù)需求一致。
其次要注重細(xì)節(jié),在設(shè)計(jì)時需要注意配圖的質(zhì)量、尺寸和視覺面積的統(tǒng)一性,圖片之間的差異性以及關(guān)鍵文案信息的提煉。
在瓷片區(qū)的設(shè)計(jì)時還應(yīng)與產(chǎn)品應(yīng)用的整體風(fēng)格和品牌形象保持一致,以增強(qiáng)用戶對品牌的認(rèn)知。瓷片區(qū)的設(shè)計(jì)不僅要考慮美觀,還要考慮如何有效地傳達(dá)信息和提升用戶體驗(yàn),考慮用戶的操作習(xí)慣和視覺習(xí)慣,確保界面的直觀性和易用性。
最后完成設(shè)計(jì)后要進(jìn)行用戶測試和收集反饋,根據(jù)用戶的實(shí)際使用情況進(jìn)行優(yōu)化。
瓷片區(qū)設(shè)計(jì)是一個既考驗(yàn)創(chuàng)意又注重細(xì)節(jié)的過程,在廣泛的應(yīng)用場景中,我們需要根據(jù)不同的產(chǎn)品類型、用戶需求和業(yè)務(wù)目標(biāo)進(jìn)行靈活應(yīng)用,創(chuàng)建出既美觀又實(shí)用的瓷片區(qū)。通過合理規(guī)劃和設(shè)計(jì)瓷片區(qū),可以有效提升產(chǎn)品的用戶體驗(yàn)和商業(yè)價值。
感謝閱讀,希望這篇文章能對大家有所啟發(fā),創(chuàng)作更有價值和影響力的設(shè)計(jì)作品。


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

UI 設(shè)計(jì)風(fēng)格與布局:打造卓越用戶體驗(yàn)的基石

藍(lán)藍(lán)設(shè)計(jì)的小編

在數(shù)字化時代,UI(用戶界面)設(shè)計(jì)的優(yōu)劣直接決定了用戶對產(chǎn)品的第一印象和使用體驗(yàn)。其中,設(shè)計(jì)風(fēng)格與布局是兩大核心要素。
UI 設(shè)計(jì)風(fēng)格豐富多樣,各有獨(dú)特魅力與適用場景。極簡主義風(fēng)格以簡潔為美,去除一切不必要元素,僅保留核心功能與信息。其界面清爽,能讓用戶快速聚焦關(guān)鍵內(nèi)容,如一些資訊類 APP 便常采用,提升瀏覽效率。擬物風(fēng)格則致力于模擬現(xiàn)實(shí)物體外觀與質(zhì)感,給人熟悉親切之感,早期的手機(jī)圖標(biāo)設(shè)計(jì)多運(yùn)用此風(fēng)格,幫助用戶輕松理解功能。還有如今流行的扁平化風(fēng)格,簡潔明了、色彩鮮明,兼具現(xiàn)代感與高效性,在各類移動應(yīng)用中廣泛應(yīng)用。
合理的布局是良好用戶體驗(yàn)的保障。布局需遵循清晰、易用原則。首先要明確信息層級,重要信息置于顯眼位置,如電商 APP 將商品圖片與價格突出展示。常見布局方式有分欄布局,可將不同類型信息有序分隔,適用于內(nèi)容較多的頁面;卡片式布局則將信息以卡片形式呈現(xiàn),便于用戶快速識別與操作,社交媒體 APP 常用此布局展示動態(tài)。此外,響應(yīng)式布局至關(guān)重要,確保界面在不同設(shè)備屏幕上都能完美適配,為用戶提供一致體驗(yàn)。

移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)

鶴鶴

網(wǎng)絡(luò)上大量復(fù)制粘貼和長篇大論的移動用戶體驗(yàn)設(shè)計(jì)文章,是否讓你感到不適?
朋友,我們也感同身受。直奔主題。接下來,我們將基本的移動設(shè)計(jì)規(guī)則整合在一起。收藏這篇文章,每次開始設(shè)計(jì)新的移動 APP 或 WEB 時,可以作為檢視清單使用。
我們有哪些規(guī)則可以幫助初學(xué)者設(shè)計(jì)出一流的移動用戶體驗(yàn)。
規(guī)則 1:?不要放棄端到端的研究
即使我們已經(jīng)為某一特定業(yè)務(wù)領(lǐng)域設(shè)計(jì)了數(shù)十個項(xiàng)目,每一次設(shè)計(jì)都應(yīng)進(jìn)行深入的市場調(diào)研。?在設(shè)計(jì)版面之前,有必要繪制客戶畫像和相應(yīng)的用戶流程圖。能夠最大程度的確保直觀性。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
FlowMapp 工具可以幫助你做到這一點(diǎn)。
規(guī)則 2:?要專注于最核心的功能
用戶體驗(yàn)的獨(dú)特性并不等同于多樣性。我們的意思是,許多用戶體驗(yàn)設(shè)計(jì)師為了創(chuàng)造可識別的東西,會在用戶界面上添加不必要的功能。
這樣一來,用戶界面使用門檻也就會提高,初學(xué)者也很難直觀地適應(yīng)使用。記住,極簡主義是你最好的朋友。
規(guī)則 3:?要積極探索項(xiàng)目的技術(shù)棧
當(dāng) AMP 和 PWA 等移動概念出現(xiàn)時,重要的是要明白這也應(yīng)反映在用戶界面設(shè)計(jì)中。例如,在第一種情況下,你可以不受限制地使用 CSS3。至于第二種情況,你就必須考慮推送通知和用戶設(shè)備硬件的使用場景。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 4:?為主要元素提供直觀的導(dǎo)航
不要忘記,即使是功能極其簡約的界面,初學(xué)者也很難瀏覽。因此,我們建議留下額外的提示,鼓勵用戶為實(shí)現(xiàn)目標(biāo)采取下一步行動。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
否則,對于那些不想花大量時間閱讀手冊的用戶來說,你的解決方案可能毫無用處。
規(guī)則 5:?為觸摸屏提供最佳用戶體驗(yàn)
盡管人類使用觸摸屏與移動應(yīng)用程序進(jìn)行交互已有十多年的歷史,但創(chuàng)建界面的一些原則仍然過時。例如,一些設(shè)計(jì)者仍然在設(shè)計(jì)導(dǎo)航按鈕,而不是通過模擬紙張翻頁來方便地進(jìn)行輕掃。這種解決方案并不方便。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 6:?注意排版
設(shè)計(jì)移動app或網(wǎng)站的風(fēng)格當(dāng)然很好。同時,這也不能成為忽視閱讀文字說明便利性的理由。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
因此,在進(jìn)行花哨的設(shè)計(jì)、使用非標(biāo)準(zhǔn)字體和文本塊布局之前,請考慮這一切是否會提高用戶的進(jìn)入門檻。
規(guī)則 7:?提供無縫反饋
在創(chuàng)建界面時,應(yīng)使其對用戶的任何操作做出某種反應(yīng)。這將幫助他們了解自己是否在實(shí)現(xiàn)目標(biāo)操作的道路上前進(jìn)。相反,缺乏反饋會讓一些用戶感到困惑。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 8:?消除定期打字的需要
不斷需要用戶輸入的情況不太可能對你有利。有時只是不方便,有時則非常煩人。無論用戶的最終反應(yīng)如何,請記住輸入字段越少越好。
規(guī)則 9:?提供多設(shè)備用戶體驗(yàn)
一個特定設(shè)計(jì)方案的成功與否,不太可能通過幾個焦點(diǎn)小組代表的評論來評估。相反,最好借助專門的模擬器進(jìn)行測試,這種模擬器不僅能重復(fù)不同目標(biāo)受眾群體的典型步驟,還能模擬他們在不同設(shè)備上的操作。
FlowMapp 用戶流程工具,用于規(guī)劃出色的用戶體驗(yàn)
FlowMapp 用戶流程工具,用于規(guī)劃出色的用戶體驗(yàn)
 
規(guī)則 10:?不要忘記實(shí)時測試
除了在模擬器上進(jìn)行測試外,在目標(biāo)受眾的現(xiàn)場代表上進(jìn)行測試也很重要。通過這種方式,您可以獲得有用的反饋(當(dāng)然,除了多設(shè)備測試之外),然后您可以使用這些反饋來優(yōu)化現(xiàn)有模板。
格列布·庫茲涅佐夫(Gleb Kuznetsov?),簡潔的網(wǎng)站設(shè)計(jì)
格列布·庫茲涅佐夫(Gleb Kuznetsov?),簡潔的網(wǎng)站設(shè)計(jì)
 
規(guī)則 11:?創(chuàng)建一個時尚的啟動畫面
很顯然,由于閃屏是用戶第一次使用應(yīng)用程序或網(wǎng)站時的 "第一印象",因此必須考慮讓它看起來很酷。例如,可以借助豐富多彩的原創(chuàng)動畫來實(shí)現(xiàn)這一點(diǎn)。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 12:?盡量減少注冊步驟的數(shù)量
與其從頭開始考慮注冊應(yīng)用程序或網(wǎng)站的步驟,不如使用每個用戶都熟悉的成熟方法。例如,你可以通過社交網(wǎng)絡(luò)或 Gmail 邀請用戶注冊。
規(guī)則 13:不要查閱個人數(shù)據(jù),發(fā)送大量消息轟炸用戶
雖然如今軟件開發(fā)人員都在大力踐行 GDPR,但重要的是要明白黃金分割點(diǎn)在哪里。因此,下次在設(shè)計(jì)使用個人數(shù)據(jù)的用戶界面布局時,請考慮一下:也許只有在開始使用應(yīng)用程序或網(wǎng)站時才要求訪問權(quán)限是合理的。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 14:?考慮跨平臺
事實(shí)上,不同平臺的接口實(shí)現(xiàn)在視覺上不應(yīng)該有太大差別,這一點(diǎn)顯而易見。只是在為不同平臺提供兩種獨(dú)立解決方案時,如何實(shí)現(xiàn)這一點(diǎn)就不清楚了。因此,最好是同時為所有平臺創(chuàng)建一個通用設(shè)計(jì)。
規(guī)則 15:?即使消極也要保持積極的語氣
使用創(chuàng)建的界面所帶來的積極結(jié)果之外,考慮當(dāng)某些功能無法使用或出錯時,消極結(jié)果也非常重要。即使?jié)撛谟脩舯黄刃遁d你的移動APP,用戶也可以收到一個令人放心的通知。科技公司的團(tuán)隊(duì)絕對熱愛他們的所有用戶。
規(guī)則 16:?為用戶提供即時付款
如果你的應(yīng)用程序或網(wǎng)站屬于電子商務(wù)領(lǐng)域,你幾乎想不到比實(shí)現(xiàn)即時支付更好的辦法了。瞧!從更新的第一天起,你的用戶就會開始進(jìn)行更多的購買。
規(guī)則 17:?記住安全性
有時,設(shè)計(jì)會造成安全漏洞,從考慮不周的登錄表單到生物識別技術(shù),不一而足。不要再把責(zé)任全部推給開發(fā)人員!想想如果你是黑客,你會如何入侵你的應(yīng)用程序或網(wǎng)站,并在設(shè)計(jì)模型時盡量避免這些情況。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
 
規(guī)則 18:首選文本指示器
你是否注意到,一些指示用戶需要做什么的圖標(biāo)看起來模棱兩可?因此,在可能的情況下,最好使用文字進(jìn)度指示器。
規(guī)則 19:平衡推送通知的數(shù)量
為了確保后臺用戶互動,一些開發(fā)人員開始濫用彈出消息。結(jié)果,用戶很快就會感到厭煩。在這種情況下,自然也就談不上什么高級用戶體驗(yàn)了。
規(guī)則 20:?提供頂級個性化
為用戶提供足夠的選項(xiàng),使其能夠根據(jù)個人需要調(diào)整界面?;驹O(shè)置包括字體大小和類型、主題、音效等。因此,你將很快看到目標(biāo)受眾對您的項(xiàng)目的忠誠度會如何提高。
移動端設(shè)計(jì)心得:用戶體驗(yàn)的20條總結(jié)
 
結(jié)論
親愛的朋友,希望我們已經(jīng)幫助你了解了移動設(shè)計(jì)的基礎(chǔ)知識,現(xiàn)在你已經(jīng)步入正軌。祝你好運(yùn)


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

APP優(yōu)秀案例設(shè)計(jì)思維

鶴鶴

設(shè)計(jì)能力的強(qiáng)弱取決于設(shè)計(jì)思維,技能操作層面的不足可以通過反復(fù)訓(xùn)練,在短時間內(nèi)即可彌補(bǔ);而設(shè)計(jì)思維需要通過長時間的熏陶,還要找對學(xué)習(xí)的方法和途徑。很多設(shè)計(jì)師工作五年甚至十年,但是設(shè)計(jì)能力依然比較普通,很大程度上還是設(shè)計(jì)思維能力的缺失。
 
我們也可以通過體驗(yàn)和分析優(yōu)秀的案例來提升,學(xué)習(xí)優(yōu)秀設(shè)計(jì)師的設(shè)計(jì)思路和處理技巧,以此來強(qiáng)化自我專業(yè)思維。今天黑馬哥繼續(xù)給大家分享一些優(yōu)秀的設(shè)計(jì)案例,希望可以助力提高大家的設(shè)計(jì)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
體驗(yàn)?zāi)夸?/div>
 
一、不一樣的返回設(shè)計(jì)
二、可以切換大小的設(shè)計(jì)布局
三、做減法的設(shè)計(jì)表達(dá)
四、品牌動態(tài)渲染春節(jié)氛圍
五、品牌插畫表現(xiàn)界面置底
六、動態(tài)刷新紅包設(shè)計(jì)
七、涂鴉風(fēng)格的流程設(shè)計(jì)
八、情感化閃屏設(shè)計(jì)
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動效
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
 
 
一、不一樣的返回設(shè)計(jì)
 
進(jìn)入層級界面可以通過返回回到上一級操作場景,通常都是以箭頭圖標(biāo)、返回文字組合設(shè)計(jì)或者獨(dú)立設(shè)計(jì)。
 
最近在體驗(yàn)喵喵記賬 App 時,其返回設(shè)計(jì)以“門”作為創(chuàng)意元素,進(jìn)入層級界面時門會打開,點(diǎn)擊返回時會有關(guān)門的動作。以開關(guān)門的方式表達(dá)進(jìn)入和返回狀態(tài),形象化的表達(dá)了不一樣的返回設(shè)計(jì),呈現(xiàn)出不同的設(shè)計(jì)解決方案。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
二、可以切換大小的設(shè)計(jì)布局
 
為了滿足更多用戶的體驗(yàn)需求,設(shè)計(jì)布局的靈活性變得越來越重要,需要提供多種選擇便于操作。
 
在藏書館 App 中,針對書庫分類的展示設(shè)計(jì),用戶可以通過點(diǎn)擊切換呈現(xiàn)不同大小的樣式。文字和書籍封面圖都會隨著切換而縮放,方便滿足不同用戶的瀏覽需求,提升用戶對產(chǎn)品的操作體驗(yàn)度。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
三、做減法的設(shè)計(jì)表達(dá)
 
隨著互聯(lián)網(wǎng)環(huán)境的發(fā)展,提供給大家的產(chǎn)品選擇越來越豐富,而產(chǎn)品設(shè)計(jì)也從最初的功能性服務(wù)擴(kuò)展到綜合性服務(wù)。功能變得越來越多,商業(yè)氛圍也十分濃厚,有種眼花繚亂的感覺。
 
最近在使用美團(tuán)外賣柜小程序時,其簡約的設(shè)計(jì)印象深刻。存取功能一目了然,沒有多余的設(shè)計(jì)干擾體驗(yàn),操作指引也是簡單易懂。有時候減法的設(shè)計(jì)才是最好的用戶體驗(yàn),與其布局一堆功能或者服務(wù),反而增加了用戶的操作成本。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
四、品牌動態(tài)渲染春節(jié)氛圍
 
春節(jié)氛圍感營造對于品牌來說至關(guān)重要,是渲染春節(jié)主題和增強(qiáng)用戶親和力的關(guān)鍵,營造方式也是豐富多樣。
 
其中夸克 App 通過品牌 LOGO 結(jié)合春節(jié)主題進(jìn)行動態(tài)設(shè)計(jì),不僅突出春節(jié)氛圍,動效過渡也非常流暢??淇私?jīng)常會以品牌動態(tài)化的形式表現(xiàn)節(jié)日或者特殊活動主題,設(shè)計(jì)融合性處理得十分細(xì)致。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
五、品牌插畫表現(xiàn)界面置底
 
界面設(shè)計(jì)過程中,對于到達(dá)底部的處理方式通常有品牌表達(dá)、公司名稱、版權(quán)信息、情感化內(nèi)容表達(dá)等。
 
最近在體驗(yàn)我要做計(jì)劃 App 時,界面設(shè)計(jì)底部以品牌 IP 形式的插畫進(jìn)行表達(dá),不僅符合整體設(shè)計(jì)風(fēng)格,也使得界面設(shè)計(jì)更有趣味性。整個產(chǎn)品設(shè)計(jì)也以插畫風(fēng)格為主,是一個很有個性化的產(chǎn)品。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
六、動態(tài)刷新紅包設(shè)計(jì)
 
結(jié)合刷新設(shè)計(jì)賦予更多功能或者服務(wù),已經(jīng)成為二層樓設(shè)計(jì)的首選。
 
最近在體驗(yàn)美團(tuán)外賣時,首頁下拉刷新會出現(xiàn)紅包樣式的動效表達(dá),隨著下拉的程度不同,紅包金額會隨之增加或者減少。動態(tài)刷新紅包設(shè)計(jì)更能吸引用戶繼續(xù)體驗(yàn),進(jìn)而進(jìn)入二層樓參與活動,趣味性的表達(dá)方式很有吸引力,也以此方式促進(jìn)了用戶參與感。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
七、涂鴉風(fēng)格的流程設(shè)計(jì)
 
隨著同質(zhì)化設(shè)計(jì)的現(xiàn)象,產(chǎn)品設(shè)計(jì)也在不斷嘗試更具差異化的風(fēng)格。結(jié)合插畫風(fēng)格表達(dá)界面設(shè)計(jì),變得越來越普及。
 
在我要做計(jì)劃 App 設(shè)計(jì)中,整體風(fēng)格以涂鴉插畫風(fēng)為主,完善做計(jì)劃流程設(shè)計(jì)也以涂鴉風(fēng)格進(jìn)行設(shè)計(jì)。不僅風(fēng)格特征更突出,也能吸引用戶的關(guān)注度,促進(jìn)完善計(jì)劃流程。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
八、情感化閃屏設(shè)計(jì)
 
閃屏設(shè)計(jì)分為品牌感方向和營銷廣告等方向,其中閃屏廣告較為常見,不過也有品牌啟動頁和閃屏廣告相結(jié)合的方式。
 
閃屏設(shè)計(jì)的形式也非常多樣,其中情感化的方向以 IP 形象和情感故事性插畫為主。比如喜馬拉雅閃屏設(shè)計(jì)便以 IP 形象的各種動態(tài)化形式呈現(xiàn),畫面非固定表達(dá)形式,每次重新打開都會有所不同,IP 動態(tài)也非常俏皮可愛。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
九、圖標(biāo)設(shè)計(jì)的翻轉(zhuǎn)動效
 
圖標(biāo)動效的運(yùn)用非常普及,以往見過的案例都是動效的形式表達(dá)圖標(biāo)的不同形式感,但是圖標(biāo)的含義不會受到影響。
 
最近在體驗(yàn)盒馬 App 時,首頁金剛區(qū)圖標(biāo)以翻轉(zhuǎn)動效進(jìn)行表達(dá),既突出春節(jié)氛圍也賦予圖標(biāo)兩層含義。在保留圖標(biāo)本身功能含義的同時,通過翻轉(zhuǎn)另一面表達(dá)出不同的意思,也是一個新的圖標(biāo)動效表達(dá)思維。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
 
 
十、蛇年主題圖標(biāo)設(shè)計(jì)
 
蛇年春節(jié)主題設(shè)計(jì)在產(chǎn)品中的運(yùn)用很豐富,其中在圖標(biāo)設(shè)計(jì)中的運(yùn)用是最普遍的,廣泛運(yùn)用于應(yīng)用圖標(biāo)、金剛區(qū)圖標(biāo)、底部標(biāo)簽欄圖標(biāo)和其他功能圖標(biāo)等。
 
圖標(biāo)設(shè)計(jì)的運(yùn)用形式很多,比如蛇年主題文案嵌入、生肖蛇相關(guān)元素設(shè)計(jì)、春節(jié)元素設(shè)計(jì)等。表現(xiàn)形式以立體質(zhì)感居多,配色以突出春節(jié)氛圍為主。
為什么我沒有這樣的設(shè)計(jì)思維呢?
 
 
小結(jié)
 
設(shè)計(jì)思維除了依靠自身專業(yè)基礎(chǔ)以外,通過不斷學(xué)習(xí)分析優(yōu)秀的案例也能不斷提升,希望本期的案例分享可以帶給大家更多靈感。


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

UI設(shè)計(jì)如何突出氣象APP的主要功能和特點(diǎn)?

藍(lán)藍(lán)設(shè)計(jì)的小編

通過精心的 UI 設(shè)計(jì),從布局、數(shù)據(jù)展示、個性化定制、交互反饋到色彩搭配等多個方面入手,可以有效地突出氣象 APP 的主要功能和特點(diǎn),為用戶打造一個功能強(qiáng)大、操作便捷、視覺舒適且個性化的氣象信息服務(wù)平臺,在競爭激烈的市場中脫穎而出,贏得用戶的青睞與信任。

UI 妙筆著風(fēng)云:蘭亭妙微創(chuàng)新氣象 APP 視覺華章

藍(lán)藍(lán)設(shè)計(jì)的小編

UI 設(shè)計(jì)公司蘭亭妙微憑借其在色彩運(yùn)用、圖標(biāo)設(shè)計(jì)、布局規(guī)劃、動效設(shè)計(jì)以及個性化定制等方面的創(chuàng)新與突破,為氣象 APP 打造了一個令人驚艷的視覺界面。這不僅提升了氣象 APP 的用戶體驗(yàn)與競爭力,也讓用戶在獲取氣象信息的過程中,能夠感受到科技與藝術(shù)完美融合所帶來的魅力與便捷。在未來的發(fā)展中,相信蘭亭妙微將繼續(xù)以其 UI 妙筆,在氣象 APP 設(shè)計(jì)領(lǐng)域書寫更加輝煌的篇章,為人們的氣象生活帶來更多的精彩與驚喜。

日歷

鏈接

個人資料

存檔