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

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

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

　　提示類元素
 

　　功能類元素
 

　　視覺類元素
 

　　一、提示類
 

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

　　1. 徽標(biāo)
 

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

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

 

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

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

 

　　淘寶 / QQ郵箱
 

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

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

 

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

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

 

　　今日頭條
 

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

　　2. 標(biāo)簽
 

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

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

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

 

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

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

　　3. 圖標(biāo)
 

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

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

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

　　頁面加載圖標(biāo)
 

　　動態(tài)提示icon
 

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

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

 

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

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

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

 

　　騰訊電腦管家 / 360
 

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

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

 

　　斗魚 / 騰訊動漫
 

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

 

　　拉勾招聘
 

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

 

　　微信
 

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

 

　　餓了么

 

　　馬蜂窩
 

　　4. 氣泡彈窗
 

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

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

 

　　陌陌
 

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

 

　　知乎
 

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

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

 

　　豆瓣
 

　　5. 頁面指示器
 

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

 

　　拉勾招聘
 

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

 

　　網(wǎng)易考拉
 

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

 

　　愛彼迎
 

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

　　6. 導(dǎo)航欄
 

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

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

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

　　荔枝FM / AcFun / 眾安保險 / 飛豬 / 他趣
 

　　7. 音量條
 

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

 

　　Instagram
 

　　8. 按鈕
 

　　這里的按鈕以uber為例：
 

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

　　因此，我們在設(shè)計(jì)按鈕的時候，結(jié)合場景，可以添加創(chuàng)意，讓死板的按鈕變得有趣起來。

 

　　Uber
 

　　9. 提示性文字
 

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

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

 

　　荔枝FM
 

　　二、功能類
 

　　1. 標(biāo)簽欄
 

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

　　①刷新/返回頂部
 

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

 

　　淘寶

 

　　馬蜂窩
 

　　②添加按鈕
 

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

 

　　小紅書

 

　　窮游
 

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

　　2. 懸浮按鈕
 

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

 

　　馬蜂窩

 

　　荔枝fm

 

　　馬蜂窩
 

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

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

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

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

 

　　螞蟻財(cái)富

 

　　UC瀏覽器

 

　　看理想
 

　　4. 功能性按鈕
 

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

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

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

 

　　5. 下拉/上劃
 

　?、傧吕⑿鹿δ芤呀?jīng)成為了一種默認(rèn)操作。根據(jù)產(chǎn)品的屬性定位，我們會見到各種不同風(fēng)格或是設(shè)計(jì)元素的下拉動效。設(shè)計(jì)師可以根據(jù)品牌延展元素，融入更多的想法，讓頁面變得更有趣。

 

　　土豆視頻
 

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

 

　　點(diǎn)融投資
 

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

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

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

 

　　嗶哩嗶哩
 

　　三、視覺類
 

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

　　1. 缺省頁
 

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

 

　　點(diǎn)融投資
 

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

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

 

　　餓了嗎
 

　　2. 頭像
 

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

 

　　京東金融

 

　　小贏理財(cái)
 

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

　　3. 輔助元素
 

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

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

 

　　樂刻運(yùn)動/ 眾安保險
 

　　4. 切換動效
 

　　①標(biāo)簽欄動效
 

　　通過動效的使用，標(biāo)簽欄切換變得不再死板。用戶在頻繁切換頁面時，不再覺得單調(diào)。

 

　　土豆視頻
 

　　②導(dǎo)航欄動效

 

　　蝦米音樂
 

　　四、總結(jié)
 

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