南京UI設(shè)計(jì)師高級(jí)培訓(xùn)
列表想必大家都不陌生,說(shuō)到小按鈕列表可能就有人要問(wèn),這個(gè)有什么研究的?是的看上去小按鈕列表不過(guò)是在普通列表上加了一個(gè)按鈕而已,你回憶以下你在做這種頁(yè)面時(shí),是否考慮得完善。
比如按鈕該如何擺放?列表圖片尺寸如何設(shè)定?產(chǎn)品信息和圖片的關(guān)系?當(dāng)產(chǎn)品信息增加或者減少該如何展現(xiàn)?解決這個(gè)問(wèn)題之前我們還是先來(lái)看看小按鈕圖片列表有哪些樣式,然后再來(lái)說(shuō)說(shuō)設(shè)計(jì)中需要考慮的要點(diǎn)。
小按鈕圖片列表展現(xiàn)形式其實(shí)有很多,怎么才能夠?qū)⑺麄兎珠T別類的說(shuō)清楚呢?下面我們從3個(gè)方面來(lái)說(shuō):
1、文字信息為主
2、圖片為主
3、橫向?yàn)g覽
文字信息為主
其表現(xiàn)形式往往為左圖右字,人的視覺(jué)流程往往是圖片>文章,因此**圖片吸引用戶,另外右邊文字將商品信息部分露出,可以幫助用戶快速了解,找到感興趣的內(nèi)容。
使用場(chǎng)景:一般用在電商團(tuán)購(gòu)類商品列表、福利中心、任務(wù)中心界面中。適用于文字信息為主要內(nèi)容的列表,圖片不是很重要的信息。
以大眾點(diǎn)評(píng)預(yù)約訂座和霸王餐為例,圖片雖然在左側(cè)顯示,但是其所占比例相對(duì)較少,主要以內(nèi)容信息為主,幫助用戶快速找到感興趣的內(nèi)容。
圖片為主
帶有小按鈕的以圖片為主的列表,我們?cè)谝曨l類的APP和電商類的APP較為常見(jiàn),下面主要以帶有小按鈕的訂閱和關(guān)注列表為例,其優(yōu)勢(shì)是展示內(nèi)容整體性強(qiáng)。缺點(diǎn)是一屏展示頁(yè)面較少,不能跳躍查看。
使用場(chǎng)景:視頻、旅游、健身、圖片社交等具有訂閱和關(guān)注的列表中,另外在一些應(yīng)用市場(chǎng)也經(jīng)常使用。
土豆以大V號(hào)發(fā)布的視頻信息橫向滑動(dòng)顯示,其主要以視頻圖片吸引用戶注意,進(jìn)而引導(dǎo)用戶訂閱。
Nice一樣展示發(fā)布過(guò)的相冊(cè)內(nèi)容引導(dǎo)用戶點(diǎn)擊關(guān)注,只是其**多展示4條多于不顯示。
橫向?yàn)g覽
橫向?yàn)g覽,其展示信息整體性強(qiáng),左右切換流暢。同時(shí)占地面積小,往往會(huì)以模塊的形式插入到首頁(yè),引導(dǎo)大家點(diǎn)擊關(guān)注。缺點(diǎn)就是不適合展示過(guò)多頁(yè)面,不能跳躍查看,視覺(jué)易疲勞。
大佬說(shuō)主要在首頁(yè)插入企業(yè)大量信息,并**按鈕引導(dǎo)大家關(guān)注,并且可以左右滑動(dòng)展現(xiàn)更多大佬信息。
淘票票正在熱映,也是在首頁(yè)加入熱映的電影,并且**圖片引發(fā)人們的興趣,從而點(diǎn)擊按鈕購(gòu)票。
了解了上面的列表樣式之后,我們就來(lái)解決文章開(kāi)頭提到的設(shè)計(jì)要點(diǎn),主要有以下四點(diǎn):
1、圖文比例怎么算
2、圖片尺寸如何設(shè)定
3、按鈕如何擺放
4、當(dāng)內(nèi)容信息增加或減少該如何展示
圖文比例如何算
在列表設(shè)計(jì)中,圖片與內(nèi)容信息應(yīng)該有一定的對(duì)比。盡管我們的列表是以文字為主,但是人天生喜歡看圖片而不是閱讀,因此我們?nèi)匀灰詧D片的形式引導(dǎo)用戶關(guān)注到內(nèi)容上,從而點(diǎn)擊按鈕進(jìn)行相關(guān)操作,具體該怎么做呢?
首先,我們可以根據(jù)產(chǎn)品類型確定圖片展示的大小。
上圖分別以大眾點(diǎn)評(píng)和Keep為例,明顯大眾點(diǎn)評(píng)由于是電商類,其圖片質(zhì)量參差不齊, 在加上右側(cè)內(nèi)容較多,因此其圖片展示以小圖為主。
Keep主要以健身為主,其中圖片質(zhì)量也相對(duì)較高,而發(fā)現(xiàn)頁(yè)面也主要介紹師傅課程,在這個(gè)需要看顏值的時(shí)代,當(dāng)然高顏值的老師們需要展示出來(lái)了,因此圖片相對(duì)來(lái)說(shuō)較大,并以豎圖的形式出現(xiàn)。
然后,就是確定圖文的尺寸,**簡(jiǎn)單的方式根據(jù)文字內(nèi)容的多少來(lái)確定圖片的高度。
將大眾點(diǎn)評(píng)和淘票票的圖文單獨(dú)出來(lái),從上面右側(cè)的圖可以看出來(lái),不管是大眾點(diǎn)評(píng),還是淘票票,產(chǎn)品圖片的高度和文字主要信息高度一致(為了視覺(jué)協(xié)調(diào),往往上下會(huì)留8px的距離)。因此我們?cè)谠O(shè)計(jì)時(shí),也可以參考這樣的方式來(lái)確定圖片的高度。
圖片如何設(shè)定
**圖文我們基本就確定了圖片的高度,那么寬度又該如何設(shè)置呢?我們可以根據(jù)產(chǎn)品的屬性來(lái),往往為了圖片編輯上傳和適配,往往我們把圖片比例設(shè)置成常見(jiàn)比例,因此在圖片設(shè)計(jì)上我們常常用到以下三個(gè)尺寸:4:3,1:1,3:2。
4:3 的原因是相機(jī)的畫幅一般是4比3,同時(shí)手機(jī)也較多該尺寸,所以我們看到越來(lái)越多的APP也采用這一比例。
1:1 一般用于電商里面常常用到,能夠大限度的展示圖片,同時(shí)由于上傳圖片尺寸不規(guī)律更便于裁剪。
3:2 該比例也較為常見(jiàn),早期我們的相機(jī)畫幅就是該比例,因此一些圖片型的APP采用該比例較多。
按鈕如何擺放
這里主要以常見(jiàn)的縱向列表為例,**瀏覽大量的APP,我總結(jié)了按鈕的五個(gè)擺放位置:和圖片頂對(duì)齊,和圖片居中對(duì)齊,和圖片底對(duì)齊,另外換行。下面分別來(lái)看看:
1、和圖片頂對(duì)齊
當(dāng)按鈕頂對(duì)齊,你需要考慮標(biāo)題文字過(guò)多是采用“…”代替還是將標(biāo)題顯示兩行,這里在切圖標(biāo)注,甚至在設(shè)計(jì)時(shí)就需要考慮進(jìn)去。
2、和圖片居中
當(dāng)按鈕和圖片居中對(duì)齊,你需要考慮當(dāng)按鈕下方帶其他信息,需要將一整塊內(nèi)容居中,還是 為了達(dá)到視覺(jué)平衡仍然將按鈕居中。
將按鈕和按鈕下方的信息一起相對(duì)圖片居中,這樣便于一些有促銷信息一些沒(méi)有的情況能夠正常顯示。
右圖以大眾點(diǎn)評(píng)每日福利為例,由于其信息較少,因此圖標(biāo)也直接采用的了居中的方式,避免樣式錯(cuò)亂。
3、和圖片底對(duì)齊
當(dāng)標(biāo)題或者內(nèi)容信息過(guò)長(zhǎng),我們往往會(huì)采用底對(duì)齊的方式,這個(gè)方式的優(yōu)勢(shì)是不用考慮其他信息的展示問(wèn)題。
4、另外換行
當(dāng)頁(yè)面中有其他信息,容易和按鈕混淆時(shí),這時(shí)候采用換行處理,常常出現(xiàn)在優(yōu)惠券頁(yè)面,主要為了將按鈕和優(yōu)惠券的信息分離開(kāi)。
按鈕的位置也是根據(jù)產(chǎn)品信息定的,如果按鈕帶了小標(biāo)簽,那么建議居中顯示;如果標(biāo)題和信息過(guò)長(zhǎng),建議底對(duì)齊顯示, 如果底部信息過(guò)多,就頂對(duì)齊展示。
內(nèi)容信息增加或者減少,主要指標(biāo)題長(zhǎng)短不一,有可能一行或兩行。同時(shí)標(biāo)簽有可能有有可能沒(méi)有,我們?cè)谠O(shè)計(jì)時(shí)就需要考慮這些問(wèn)題,為了保持界面的統(tǒng)一,我們應(yīng)該注意一下三點(diǎn):
1、添加減少標(biāo)簽內(nèi)容信息如何展現(xiàn)
左圖以大眾點(diǎn)評(píng)為例,他主要采用信息居中的方式展現(xiàn),由圖可以看出默認(rèn)展示標(biāo)題和多商圈間距為24px,當(dāng)加入標(biāo)簽MrMiss光顧本店設(shè)置間距后,我們可以明顯的看到其適配機(jī)制,就是整塊內(nèi)容采用和圖片居中的原則,這是一種比較保險(xiǎn)的方式。
右圖以大眾點(diǎn)評(píng)-名店搶購(gòu)為例,當(dāng)只有標(biāo)題和價(jià)格信息,呈上下排布;當(dāng)增加標(biāo)簽信息,直接跟著標(biāo)題順排即可。該方法適合信息較少,同時(shí)圖片比例不大的列表中。
當(dāng)標(biāo)題后面需要增加小標(biāo)簽標(biāo)題該如何顯示?
這時(shí)候標(biāo)簽往往不能換行,其適配和下面文字的大距離一樣,同時(shí)標(biāo)題文字過(guò)多情況采用“…”代替。
下面主要來(lái)總結(jié)下小按鈕圖片列表設(shè)計(jì)要點(diǎn):
1、圖文比例如何確定:根據(jù)產(chǎn)品屬性和功能要求大概確定圖片范圍,然后根據(jù)主要文字信息,確定圖片的高度。
2、圖片尺寸如何設(shè)定:為了后期編輯上傳,往往采用常規(guī)尺寸4:3, 3:2, 1:1等尺寸。
3、按鈕如何擺放:主要有和圖片頂對(duì)齊、居中、底對(duì)齊、另外換行,在設(shè)計(jì)時(shí),我們可根據(jù)展現(xiàn)的內(nèi)容具體分析采用哪種對(duì)齊方式。
4、當(dāng)內(nèi)容信息增加或減少該如何展示:這時(shí)候就需要考慮有標(biāo)簽和無(wú)標(biāo)簽怎么顯示,文案信息過(guò)多是采用截?cái)噙€是“…”代替,還是折行,這個(gè)需要根據(jù)具體頁(yè)面來(lái)說(shuō),比如如果標(biāo)題不重要,那么久考慮用“…”代替,如果標(biāo)題重要就考慮折行。
想了解更多關(guān)于南京UI設(shè)計(jì)培訓(xùn)資料,請(qǐng)咨詢:
咨詢聯(lián)系方式:15996488286(馬老師)或者QQ:3329379574 還可以直接在線咨詢
更多關(guān)于南京UI設(shè)計(jì)培訓(xùn)的信息請(qǐng)點(diǎn)擊>> 南京UI設(shè)計(jì)培訓(xùn)
更多關(guān)于南京UI設(shè)計(jì)培訓(xùn)班的信息請(qǐng)點(diǎn)擊>> 南京UI設(shè)計(jì)培訓(xùn)班