UI設(shè)計(jì)中的小元素總結(jié)

　　在UI界面的設(shè)計(jì)當(dāng)中，有很多“小元素”發(fā)揮著十分重要的作用。有些元素我們已經(jīng)司空見(jiàn)慣;有些被設(shè)計(jì)師們玩兒出了新花樣。在使用了一些產(chǎn)品后，AAA教育郭老師對(duì)這些“小元素”進(jìn)行了梳理總結(jié)。希望其中的一些好的、有趣的設(shè)計(jì)能對(duì)大家有所幫助。
 

　　對(duì)于“小元素”的這個(gè)說(shuō)法還是有些太籠統(tǒng)，我又把它們分為大致三個(gè)部分：
 

　　提示類(lèi)元素
 

　　功能類(lèi)元素
 

　　視覺(jué)類(lèi)元素
 

　　一、提示類(lèi)
 

　　“提示類(lèi)”顧名思義，對(duì)于我們有提示作用的或是有引導(dǎo)幫助作用的都可以歸為此類(lèi)。那么我最先想到的，應(yīng)該就是讓人又愛(ài)又恨的“小紅點(diǎn)”了。
 

　　1. 徽標(biāo)
 

　　徽標(biāo)通俗的叫法就是“小紅點(diǎn)”，一般固定在圖標(biāo)或是標(biāo)簽等右上角的位置。它具有非常強(qiáng)的提示作用。強(qiáng)大到有時(shí)不想讓它出現(xiàn)。
 

　　說(shuō)起小紅點(diǎn)就不得不提“紅點(diǎn)強(qiáng)迫癥”這個(gè)詞。它是現(xiàn)代人的社交網(wǎng)絡(luò)依賴癥之一，表現(xiàn)為看到它就不自覺(jué)的或是強(qiáng)迫性地點(diǎn)擊它，讓它消失。

 

　　QQ一鍵清除“小紅點(diǎn)”
 

　　導(dǎo)致人們看到“小紅點(diǎn)”就像點(diǎn)開(kāi)的原因，是因?yàn)樗耐蝗怀霈F(xiàn)，破壞了周?chē)牟季?，打破了排版平衡，使某一塊內(nèi)容變得異常“醒目”。如果想讓“小紅點(diǎn)”在設(shè)計(jì)中不那么醒目，我們可以通過(guò)顏色來(lái)淡化它的存在。

 

　　淘寶 / QQ郵箱
 

　　徽標(biāo)的顏色多為紅色，因?yàn)榧t色足夠醒目且讓用戶能夠警醒。
 

　　常見(jiàn)的樣式有“小紅點(diǎn)”、“紅點(diǎn)內(nèi)嵌數(shù)字”、“紅點(diǎn)內(nèi)嵌字符”等樣式。

 

　　徽標(biāo)的尺寸并沒(méi)有一個(gè)嚴(yán)格的規(guī)范。“小紅點(diǎn)”在一些主流產(chǎn)品中，尺寸從16px到30px不等。填充字符內(nèi)容的徽標(biāo)具體尺寸需視情況而定，最小字號(hào)為20px。
 

　　顯示的數(shù)字最高到“99”。超過(guò)了則顯示“99+”或“…”。一些信息或是評(píng)論位置的徽標(biāo)，顯示可以達(dá)到四位數(shù)的千位甚至更高。

 

　　今日頭條
 

　　徽標(biāo)可以出現(xiàn)在多個(gè)位置上——標(biāo)簽欄、導(dǎo)航欄、金剛區(qū)、文字標(biāo)題、頭像等等，均可以發(fā)現(xiàn)它的存在。
 

　　2. 標(biāo)簽
 

　　標(biāo)簽的出現(xiàn)幾率也非常高，常出現(xiàn)在電商、金融、生活?yuàn)蕵?lè)類(lèi)等產(chǎn)品中。它的主要作用是進(jìn)行分類(lèi)或突出重點(diǎn)。比如界面中需要我們區(qū)分開(kāi)商品的屬性;或是對(duì)重點(diǎn)商品、新品進(jìn)行著重提示等，都需要用到標(biāo)簽。
 

　　標(biāo)簽的樣式非常豐富——底色、邊框、圖標(biāo)組合;矩形、圓角矩形、異形、標(biāo)題樣式等等。
 

　　同時(shí)，標(biāo)簽可以出現(xiàn)在任何地方——首頁(yè)、我的頁(yè)面、商品詳情頁(yè)、搜索頁(yè)、客服咨詢頁(yè)等等。我們打開(kāi)淘寶、美團(tuán)等APP，就可以發(fā)現(xiàn)多種樣式的標(biāo)簽。

 

　　美團(tuán) /淘寶 / 飛豬
 

　　顏色方面，還是要以主色和中性色為主。加重提示可選用紅色;突出活力和時(shí)尚感可用漸變色。所以這就需要我們根據(jù)具體需求和產(chǎn)品屬性來(lái)搭配。但使用顏色不可過(guò)多，同時(shí)還要保持頁(yè)面整體配色的平衡。
 

　　3. 圖標(biāo)
 

　　這里我會(huì)提到四種主要圖標(biāo)類(lèi)型：
 

　　“首頁(yè)”或“我的頁(yè)面”標(biāo)題前的提示性icon
 

　　新聞或公示模塊左側(cè)的標(biāo)題圖標(biāo)
 

　　頁(yè)面加載圖標(biāo)
 

　　動(dòng)態(tài)提示icon
 

　?、倌壳?，越來(lái)越的主流產(chǎn)品已經(jīng)放棄了標(biāo)題前加圖標(biāo)這樣的設(shè)計(jì)形式了。取而代之的是簡(jiǎn)單粗暴的將標(biāo)題加粗加大。
 

　　在“我的頁(yè)面”中還是有很多產(chǎn)品保留了標(biāo)題前添加提示性icon的設(shè)計(jì)形式。

 

　　京東金融 / 支付寶 / 餓了么
 

　　而之前出現(xiàn)過(guò)的在標(biāo)題前加豎杠的設(shè)計(jì)形式在APP端已經(jīng)基本見(jiàn)不到了，在網(wǎng)頁(yè)端還是會(huì)時(shí)常碰到。
 

　　個(gè)人認(rèn)為豎杠的設(shè)計(jì)不僅過(guò)時(shí)，而且沒(méi)有什么實(shí)際意義，有點(diǎn)為了裝飾而設(shè)計(jì)的感覺(jué)，在手機(jī)端頁(yè)面這種寸土寸金的地方，這種意義不大的裝飾直接去掉反而會(huì)更好。

 

　　騰訊電腦管家 / 360
 

　　這可能也是為什么越來(lái)越多的產(chǎn)品不再標(biāo)題前加icon的原因吧。畢竟，足夠醒目的標(biāo)題就已經(jīng)很好的起到提示作用，大標(biāo)題這種設(shè)計(jì)形式也是iOS11重點(diǎn)升級(jí)點(diǎn)之一。
 

　　當(dāng)然，像一些動(dòng)漫類(lèi)或是娛樂(lè)類(lèi)、直播類(lèi)的產(chǎn)品，增加icon反而會(huì)讓頁(yè)面更有活力，更有趣味性。還是要根據(jù)具體產(chǎn)品而定。

 

　　斗魚(yú) / 騰訊動(dòng)漫
 

　?、谛侣?公示模塊，在電商、招聘、生活類(lèi)等產(chǎn)品中經(jīng)常出現(xiàn)。為了更好地讓用戶注意到，通常的做法是將左側(cè)標(biāo)題進(jìn)行重新設(shè)計(jì)。同時(shí)，此類(lèi)標(biāo)題圖標(biāo)可以融入產(chǎn)品的品牌基因元素，更好的突出產(chǎn)品特點(diǎn)。

 

　　拉勾招聘
 

　　③加載圖標(biāo)是當(dāng)網(wǎng)絡(luò)速度受限，或頁(yè)面內(nèi)容加載過(guò)多等因素出現(xiàn)時(shí)的提示性icon。多以小菊花圖標(biāo)為主。

 

　　微信
 

　?、軇?dòng)效設(shè)計(jì)在目前越來(lái)越受到人們的重視，這種流暢的表現(xiàn)形式和出色的視覺(jué)吸引力受到了很多人們的追捧。我們會(huì)發(fā)現(xiàn)很多的產(chǎn)品由開(kāi)始的死板單調(diào)，變得活潑豐富起來(lái)。這里面動(dòng)效設(shè)計(jì)功不可沒(méi)。

 

　　餓了么

 

　　馬蜂窩
 

　　4. 氣泡彈窗
 

　　氣泡出現(xiàn)的場(chǎng)景大致有兩種：
 

　　一種是新用戶第一次登錄或是更新完畢時(shí)。主要起到引導(dǎo)和教學(xué)的作用。

 

　　陌陌
 

　　第二種是新功能、新產(chǎn)品或新話題推出時(shí)，主要作用是提醒和宣傳。

 

　　知乎
 

　　氣泡的樣式并不豐富，多數(shù)還是常規(guī)的矩形或圓角矩形。配色多是以主色或其他輔助色為主。不過(guò)，通過(guò)動(dòng)效的融入，可以使氣泡變得更加吸睛，產(chǎn)生不錯(cuò)的吸引力。
 

　　除此之外還有一種氣泡彈窗是Toast。也就是吐司彈窗。它開(kāi)始出現(xiàn)在安卓規(guī)范當(dāng)中，是提示彈窗的一種。初始形態(tài)是在頁(yè)面底部顯示的黑色提示窗。經(jīng)過(guò)演變，即使是在iOS的產(chǎn)品中也出現(xiàn)了類(lèi)似的設(shè)計(jì)。形式目前演變成了下拉刷新從上彈出提示，并且有可關(guān)閉的樣式。

 

　　豆瓣
 

　　5. 頁(yè)面指示器
 

　　頁(yè)面指示器就是在banner下方排布的小圓點(diǎn)，會(huì)隨著banner進(jìn)行同步輪播，輪播到當(dāng)前頁(yè)面時(shí)，對(duì)應(yīng)的小圓點(diǎn)會(huì)有特殊顯示。

 

　　拉勾招聘
 

　　頁(yè)面指示器的形式不只局限于小圓點(diǎn)。其他的形式包括矩形、異形、數(shù)字、延展圖形等等。

 

　　網(wǎng)易考拉
 

　　同時(shí)，頁(yè)面指示器還可以和進(jìn)度條相結(jié)合，會(huì)讓用戶更加清楚輪播一張圖所消耗的時(shí)間。

 

　　愛(ài)彼迎
 

　　理想狀態(tài)下，最多輪播四到五張banner圖。也就是說(shuō)頁(yè)面指示器的小圓點(diǎn)也最多顯示四到五個(gè)。電商類(lèi)的產(chǎn)品輪播圖會(huì)更多一些。
 

　　6. 導(dǎo)航欄
 

　　安卓導(dǎo)航欄最原本屬于安卓規(guī)范當(dāng)中。目前，很多iOS產(chǎn)品當(dāng)中也開(kāi)始使用這種導(dǎo)航欄樣式來(lái)進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見(jiàn)了。
 

　　這種導(dǎo)航欄的優(yōu)點(diǎn)是除了點(diǎn)擊外，還可以左右滑動(dòng)進(jìn)行切換，而且并沒(méi)有對(duì)導(dǎo)航欄中的選項(xiàng)有過(guò)多的數(shù)量限制。
 

　　導(dǎo)航欄常見(jiàn)的樣式包括文字加線條、底色或品牌圖形等，樣式豐富。

　　荔枝FM / AcFun / 眾安保險(xiǎn) / 飛豬 / 他趣
 

　　7. 音量條
 

　　目前很多產(chǎn)品都將原本彈窗形式的音量顯示，改為固定在頂部的條狀形式。目的是為了不影響用戶的使用體驗(yàn)，能夠更沉浸的使用產(chǎn)品。

 

　　Instagram
 

　　8. 按鈕
 

　　這里的按鈕以u(píng)ber為例：
 

　　在登錄時(shí)，輸入完成手機(jī)號(hào)下一步的時(shí)候，按鈕會(huì)變成等待狀態(tài)。按鈕與等待演示動(dòng)效相結(jié)合，用流暢的動(dòng)畫(huà)消除了用戶等待時(shí)產(chǎn)生的負(fù)面情緒，讓整體簡(jiǎn)潔的頁(yè)面變得充滿活力。
 

　　因此，我們?cè)谠O(shè)計(jì)按鈕的時(shí)候，結(jié)合場(chǎng)景，可以添加創(chuàng)意，讓死板的按鈕變得有趣起來(lái)。

 

　　Uber
 

　　9. 提示性文字
 

　　我們?？梢钥吹皆诋a(chǎn)品中的“我的”頁(yè)面中，標(biāo)題右側(cè)會(huì)有一行文字提示。有些是單純的提示性文字，而有些則會(huì)顯示重要的數(shù)據(jù)，方便用戶在不點(diǎn)開(kāi)二級(jí)頁(yè)面的情況下進(jìn)行查看。
 

　　不僅如此，設(shè)計(jì)師還可以對(duì)這類(lèi)字體進(jìn)行設(shè)計(jì)，或是添加圖標(biāo)來(lái)豐富它的設(shè)計(jì)樣式。

 

　　荔枝FM
 

　　二、功能類(lèi)
 

　　1. 標(biāo)簽欄
 

　　作為一個(gè)基礎(chǔ)控件，位于底部區(qū)域的標(biāo)簽欄已經(jīng)演化出多種豐富的樣式。
 

　　①刷新/返回頂部
 

　　瀑布流類(lèi)的首頁(yè)形式，為了方便用戶更新內(nèi)容，在刷到一定位置后原本的首頁(yè)按鈕都會(huì)變?yōu)樗⑿聽(tīng)顟B(tài)。一些產(chǎn)品也將返回頂部一起做到了頁(yè)面中。例如馬蜂窩，就將返回頂部按鈕放到了頂部右上角的位置，刷新、返回兩不誤。

 

　　淘寶

 

　　馬蜂窩
 

　?、谔砑影粹o
 

　　除此之外，一些具有添加或是上傳功能的按鈕常常被固定在標(biāo)簽欄中間位置，可以讓用戶第一時(shí)間發(fā)覺(jué)。

 

　　小紅書(shū)

 

　　窮游
 

　　這些巧妙的設(shè)計(jì)不占用過(guò)多空間，又能很好的解決用戶遇到的問(wèn)題，非常方便。
 

　　2. 懸浮按鈕
 

　　懸浮按鈕最開(kāi)始屬于安卓規(guī)范當(dāng)中，之后在iOS產(chǎn)品中也被保留了下來(lái)。雖然在官方規(guī)范中并沒(méi)有此類(lèi)按鈕，但因?yàn)樗褂闷饋?lái)非常方便，并且國(guó)內(nèi)很多軟件安卓端和iOS端都是使用一套頁(yè)面。因此，包括懸浮按鈕等一些共性設(shè)計(jì)就都被保留了下來(lái)，在兩個(gè)平臺(tái)均可得到使用。

 

　　馬蜂窩

 

　　荔枝fm

 

　　馬蜂窩
 

　　懸浮按鈕不僅僅可以完成點(diǎn)擊等常規(guī)操作，還可以作為收藏容器將更多地功能結(jié)合在一起。而且位于屏幕右下角，方便用戶使用。
 

　　3. 頂部擴(kuò)展內(nèi)容
 

　　擴(kuò)展區(qū)域是我個(gè)人對(duì)它的命名，這部分區(qū)域在頁(yè)面的頂部。因?yàn)榭臻g足夠大，所以許多產(chǎn)品可以添加更多的設(shè)計(jì)想法在里面。比如添加日期或者天氣等。
 

　　像一些特定的產(chǎn)品會(huì)在頂部的區(qū)域放置一些特有的功能。比如螞蟻金服的智能助手等。

 

　　螞蟻財(cái)富

 

　　UC瀏覽器

 

　　看理想
 

　　4. 功能性按鈕
 

　　此類(lèi)按鈕也是非常多見(jiàn)的。比如，導(dǎo)航欄右側(cè)或標(biāo)題欄右側(cè)的更多按鈕，它的形式多以三點(diǎn)為主，也有文字、陣列點(diǎn)燈樣式。
 

　　三道杠icon多是抽屜導(dǎo)航代表圖形;箭頭基本都是下一頁(yè)或返回的固定圖標(biāo)形式。以上圖標(biāo)均被廣泛使用，已經(jīng)成為了用戶的一種固有認(rèn)識(shí)。
 

　　因此，我們?cè)谠O(shè)計(jì)時(shí)可以在此基礎(chǔ)上進(jìn)行升級(jí)或創(chuàng)意性優(yōu)化。切不可過(guò)分顛覆他們，不然會(huì)增加用戶的學(xué)習(xí)成本。

 

　　5. 下拉/上劃
 

　　①下拉刷新功能已經(jīng)成為了一種默認(rèn)操作。根據(jù)產(chǎn)品的屬性定位，我們會(huì)見(jiàn)到各種不同風(fēng)格或是設(shè)計(jì)元素的下拉動(dòng)效。設(shè)計(jì)師可以根據(jù)品牌延展元素，融入更多的想法，讓頁(yè)面變得更有趣。

 

　　土豆視頻
 

　?、谀命c(diǎn)融投資來(lái)舉例，上劃到頁(yè)面底部會(huì)出現(xiàn)寶箱圖案。隨著我們上劃的幅度，寶箱會(huì)打開(kāi)出現(xiàn)寶物和品牌形象。上劃到底則直接跳轉(zhuǎn)到另一頁(yè)面。這種設(shè)計(jì)讓我對(duì)頁(yè)面底部的空間有了更多的想法。

 

　　點(diǎn)融投資
 

　　6. 視頻進(jìn)度條
 

　　視頻進(jìn)度條放置在視頻底部，是視頻類(lèi)產(chǎn)品不可或缺的重要控件。當(dāng)視頻播放時(shí)會(huì)自動(dòng)隱藏。除此之外，進(jìn)度條位置上還可以集成其他功能。比如全屏、點(diǎn)贊、收藏、彈幕開(kāi)關(guān)等。
 

　　嗶哩嗶哩的視頻進(jìn)度條：當(dāng)拖拽控制按鈕時(shí)，小電視icon會(huì)隨著我們拖拽的方向而改變。雖然看似是很不起眼的設(shè)計(jì)，但在視頻區(qū)域也可以左右滑動(dòng)調(diào)整進(jìn)度時(shí)，進(jìn)度條的小icon就能很好的展示出來(lái)，充分體現(xiàn)其趣味性。

 

　　嗶哩嗶哩
 

　　三、視覺(jué)類(lèi)
 

　　雖然說(shuō)是視覺(jué)類(lèi)的設(shè)計(jì)，但還是要盡量避免加入過(guò)多無(wú)用元素，不能為了裝飾而設(shè)計(jì)。要結(jié)合自身產(chǎn)品，滿足視覺(jué)平衡，要達(dá)到情感化設(shè)計(jì)的目的。
 

　　1. 缺省頁(yè)
 

　　通常狀態(tài)是，當(dāng)前頁(yè)面沒(méi)有內(nèi)容或無(wú)網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁(yè)面。由于此頁(yè)面沒(méi)有內(nèi)容，設(shè)計(jì)師發(fā)揮的空間就變得很大。根據(jù)產(chǎn)品屬性和品牌延展圖形，結(jié)合動(dòng)效或插畫(huà)等情感化設(shè)計(jì)，可以很好的豐富頁(yè)面內(nèi)容。

 

　　點(diǎn)融投資
 

　　我想應(yīng)該沒(méi)有人喜歡看到缺少內(nèi)容的頁(yè)面，這會(huì)給用戶心理造成很大的落差。非常影響體驗(yàn)。因此，缺省頁(yè)就變得格外重要。如果設(shè)計(jì)得當(dāng)，非但不會(huì)影響體驗(yàn)，反而會(huì)讓用戶喜歡上它。
 

　　除了視覺(jué)方面的設(shè)計(jì)，缺省頁(yè)也可以添加刷新按鈕，在功能層面進(jìn)行完善。

 

　　餓了嗎
 

　　2. 頭像
 

　　現(xiàn)在，很多的產(chǎn)品已經(jīng)放棄了死板的默認(rèn)頭像，給用戶更多的選擇。比如京東和小贏理財(cái)，就提供給用戶多種頭像選擇。

 

　　京東金融

 

　　小贏理財(cái)
 

　　這種增加默認(rèn)頭像的做法雖然是錦上添花，但這種情感化的設(shè)計(jì)不僅在視覺(jué)上充滿新意;同時(shí)，也讓產(chǎn)品更加有趣。
 

　　3. 輔助元素
 

　　移動(dòng)端UI都是遵從相對(duì)應(yīng)的規(guī)范來(lái)進(jìn)行設(shè)計(jì)的，因此大部分產(chǎn)品都不太會(huì)在這種寸土寸金的地方放置一些硬核的純裝飾性元素。不過(guò)，設(shè)計(jì)師可以在卡片或是瓷片區(qū)域上加入自己的想法。
 

　　卡片/瓷片的布局多數(shù)是左字右圖，而此類(lèi)輔助元素并不僅僅是為了突出視覺(jué)上的設(shè)計(jì)。更主要的是保持卡片/瓷片的結(jié)構(gòu)平衡，或是填充多于的留白。讓整體頁(yè)面在視覺(jué)上更加飽滿吸睛。

 

　　樂(lè)刻運(yùn)動(dòng)/ 眾安保險(xiǎn)
 

　　4. 切換動(dòng)效
 

　?、贅?biāo)簽欄動(dòng)效
 

　　通過(guò)動(dòng)效的使用，標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁(yè)面時(shí)，不再覺(jué)得單調(diào)。

 

　　土豆視頻
 

　　②導(dǎo)航欄動(dòng)效

 

　　蝦米音樂(lè)
 

　　四、總結(jié)
 

　　以上，就是我個(gè)人對(duì)手機(jī)移動(dòng)端上關(guān)于“小元素”的總結(jié)。在整理期間我還發(fā)現(xiàn)了其他有意思的設(shè)計(jì)，只不過(guò)它們并不屬于“小”的這個(gè)屬性，因此沒(méi)有放進(jìn)文章中。在體驗(yàn)產(chǎn)品的過(guò)程里，一些有趣的不錯(cuò)的設(shè)計(jì)想法，會(huì)對(duì)我之后的作品、工作項(xiàng)目帶來(lái)很大的啟發(fā)。我也希望能夠有更多的朋友可以開(kāi)始整理并分享出來(lái)。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。