真沒(méi)想到做一個(gè)分享頁(yè),用了我一個(gè)星期的時(shí)間

2022-12-13    資深UI設(shè)計(jì)者

今天來(lái)改一個(gè)海報(bào)分享頁(yè)的設(shè)計(jì),這是最初的設(shè)計(jì):

修改后:

我們分成兩大塊說(shuō)說(shuō)本次改稿思路:

1. 海報(bào)設(shè)計(jì)

2. 海報(bào)分享頁(yè)的整體設(shè)計(jì)

第一部分 海報(bào)的設(shè)計(jì)

現(xiàn)在海報(bào)上的內(nèi)容排版看著挺隨便的,沒(méi)有啥設(shè)計(jì)感。

海報(bào)上要放的內(nèi)容不多:用戶(hù)頭像、名稱(chēng)、日期、文字、品牌信息(logo)

一開(kāi)始我也沒(méi)有太多的修改靈感,但是在看了許多參考圖后,發(fā)現(xiàn)幾個(gè)共通點(diǎn),這幾點(diǎn)完全能夠運(yùn)用在類(lèi)似的設(shè)計(jì)上,讓海報(bào)更有設(shè)計(jì)感。

第一點(diǎn):數(shù)字/日期的特殊處理

特征總結(jié)下來(lái)就是這三點(diǎn):

1.對(duì)某個(gè)數(shù)字單獨(dú)用不同的字體

2.數(shù)字用更大的字號(hào)

3.與其他文字結(jié)合而出的特殊排版

用以上的思路,改一下我們的稿子:

這樣是不是好一點(diǎn)?

第二點(diǎn):海報(bào)采用實(shí)景的照片,那文字最好用白色

觀察類(lèi)似的參考,幾乎99.99%的實(shí)景圖上的文字都是采用白色。

不排除有的分享卡片用的淺色圖、黑色字。

觀察得知:

淺圖黑色字,重在強(qiáng)調(diào)文字內(nèi)容,對(duì)比更強(qiáng)烈,而深圖淺色字,文字更融入畫(huà)面,更溫和一些.

這里我們更想采用淺色的文字:不用那么強(qiáng)調(diào)文字,重在讓畫(huà)面更和諧。

第二部分 海報(bào)分享頁(yè)面的設(shè)計(jì)

第一點(diǎn):遮罩用什么方式?

除了海報(bào)本身之外,整個(gè)分享頁(yè)面也是要設(shè)計(jì)。

大多以背景圖疊一層毛玻璃遮罩,看起來(lái)更有質(zhì)感。

這種設(shè)計(jì)相比于純黑色透明度的遮罩方式要更有層次感,不至于那么平,也讓頁(yè)面更聚焦在海報(bào)本身。

第二點(diǎn):分享彈窗的幾種形式

a. 將分享方式一屏全擺出來(lái)

適用于用戶(hù)可分享的方式 不是那么多的情況,否則會(huì)占據(jù)畫(huà)面太多高度。

b. 側(cè)滑

用戶(hù)可分享的方式很多的話,可以采用側(cè)滑。缺點(diǎn)是需要用戶(hù)滑動(dòng)才能看到后面的功能。

在這里我們只有五個(gè)分享平臺(tái),用不著再側(cè)滑,直接都擺出來(lái)就行。

第三點(diǎn):取消按鈕的形式

a. 底部按鈕:更容易操作關(guān)閉

b. 海報(bào)上部的“陰暗角落”:更不容易點(diǎn)擊,相較也不那么容易被發(fā)現(xiàn)。

究其原因可能是,產(chǎn)品想讓用戶(hù)去分享,不想讓用戶(hù)很快就離開(kāi)這個(gè)頁(yè)面。

取消按鈕也用不著那么強(qiáng)調(diào),修改后:

c. 分享彈窗的右上角:不如a更易點(diǎn)擊,但比b好點(diǎn)

最后一點(diǎn):除非是分享長(zhǎng)圖,否則海報(bào)最好一屏就展示完。

這也是我之前忽略了的一點(diǎn),導(dǎo)致做出來(lái)的海報(bào)展示不全。

總結(jié)

很多的 APP 都有海報(bào)分享功能,這次看了許許多多的類(lèi)似設(shè)計(jì),并且把通用的點(diǎn),總結(jié)分享給大家,我總結(jié)的這些,希望能對(duì)你有幫助!~


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~

希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。 



作者:花菜    來(lái)源:站酷





分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢(xún)、用戶(hù)體驗(yàn)公司、軟件界面設(shè)計(jì)公司   

                           

分享本文至:

日歷

鏈接

個(gè)人資料

存檔