UI設計中的小元素總結
在UI介面的設計當中，有很多“小元素”發揮著十分重要的作用。有些元素我們已經司空見慣;有些被設計師們玩兒出了新花樣。在使用了一些產品後，我對這些“小元素”進行了梳理總結。希望其中的一些好的、有趣的設計能對大家有所幫助。
對於“小元素”的這個說法還是有些太籠統，我又把它們分為大致三個部分：
提示類元素
功能類元素
視覺類元素
一、提示類
“提示類”顧名思義，對於我們有提示作用的或是有引導幫助作用的都可以歸為此類。那麼我最先想到的，應該就是讓人又愛又恨的“小紅點”了。
1. 徽標
徽標通俗的叫法就是“小紅點”，一般固定在圖示或是標籤等右上角的位置。它具有非常強的提示作用。強大到有時不想讓它出現。
說起小紅點就不得不提“紅點強迫症”這個詞。它是現代人的社交網路依賴症之一，表現為看到它就不自覺的或是強迫性地點選它，讓它消失。
QQ一鍵清除“小紅點”
導致人們看到“小紅點”就像點開的原因，是因為它的突然出現，破壞了周圍的佈局，打破了排版平衡，使某一塊內容變得異常“醒目”。如果想讓“小紅點”在設計中不那麼醒目，我們可以通過顏色來淡化它的存在。
淘寶 / QQ郵箱
徽標的顏色多為紅色，因為紅色足夠醒目且讓使用者能夠警醒。
常見的樣式有“小紅點”、“紅點內嵌數字”、“紅點內嵌字元”等樣式。
徽標的尺寸並沒有一個嚴格的規範。“小紅點”在一些主流產品中，尺寸從16px到30px不等。填充字元內容的徽標具體尺寸需視情況而定，最小字號為20px。
顯示的數字最高到“99”。超過了則顯示“99+”或“…”。一些資訊或是評論位置的徽標，顯示可以達到四位數的千位甚至更高。
今日頭條
徽標可以出現在多個位置上——標籤欄、導航欄、金剛區、文字標題、頭像等等，均可以發現它的存在。
2. 標籤
標籤的出現機率也非常高，常出現在電商、金融、生活娛樂類等產品中。它的主要作用是進行分類或突出重點。比如介面中需要我們區分開商品的屬性;或是對重點商品、新品進行著重提示等，都需要用到標籤。
標籤的樣式非常豐富——底色、邊框、圖示組合;矩形、圓角矩形、異形、標題樣式等等。
同時，標籤可以出現在任何地方——首頁、我的頁面、商品詳情頁、搜尋頁、客服諮詢頁等等。我們開啟淘寶、美團等APP，就可以發現多種樣式的標籤。
美團 /淘寶 / 飛豬
顏色方面，還是要以主色和中性色為主。加重提示可選用紅色;突出活力和時尚感可用漸變色。所以這就需要我們根據具體需求和產品屬性來搭配。但使用顏色不可過多，同時還要保持頁面整體配色的平衡。
3.圖示
這裡我會提到四種主要圖示型別：
“首頁”或“我的頁面”標題前的提示性icon
新聞或公示模組左側的標題圖示
頁面載入圖示
動態提示icon
①目前，越來越的主流產品已經放棄了標題前加圖示這樣的設計形式了。取而代之的是簡單粗暴的將標題加粗加大。
在“我的頁面”中還是有很多產品保留了標題前新增提示性icon的設計形式。
京東金融 / 支付寶 / 餓了麼
而之前出現過的在標題前加豎槓的設計形式在APP端已經基本見不到了，在網頁端還是會時常碰到。
個人認為豎槓的設計不僅過時，而且沒有什麼實際意義，有點為了裝飾而設計的感覺，在手機端頁面這種寸土寸金的地方，這種意義不大的裝飾直接去掉反而會更好。
騰訊電腦管家 / 360
這可能也是為什麼越來越多的產品不再標題前加icon的原因吧。畢竟，足夠醒目的標題就已經很好的起到提示作用，大標題這種設計形式也是iOS11重點升級點之一。
當然，像一些動漫類或是娛樂類、直播類的產品，增加icon反而會讓頁面更有活力，更有趣味性。還是要根據具體產品而定。
鬥魚 / 騰訊動漫
②新聞/公示模組，在電商、招聘、生活類等產品中經常出現。為了更好地讓使用者注意到，通常的做法是將左側標題進行重新設計。同時，此類標題圖示可以融入產品的品牌基因元素，更好的突出產品特點。
拉勾招聘
③載入圖示是當網路速度受限，或頁面內容載入過多等因素出現時的提示性icon。多以小菊花圖示為主。
微信
④動效設計在目前越來越受到人們的重視，這種流暢的表現形式和出色的視覺吸引力受到了很多人們的追捧。我們會發現很多的產品由開始的死板單調，變得活潑豐富起來。這裡面動效設計功不可沒。
餓了麼
馬蜂窩
4. 氣泡彈窗
氣泡出現的場景大致有兩種：
一種是新使用者第一次登入或是更新完畢時。主要起到引導和教學的作用。
陌陌
第二種是新功能、新產品或新話題推出時，主要作用是提醒和宣傳。
知乎
氣泡的樣式並不豐富，多數還是常規的矩形或圓角矩形。配色多是以主色或其他輔助色為主。不過，通過動效的融入，可以使氣泡變得更加吸睛，產生不錯的吸引力。
除此之外還有一種氣泡彈窗是Toast。也就是吐司彈窗。它開始出現在安卓規範當中，是提示彈窗的一種。初始形態是在頁面底部顯示的黑色提示窗。經過演變，即使是在iOS的產品中也出現了類似的設計。形式目前演變成了下拉重新整理從上彈出提示，並且有可關閉的樣式。
豆瓣
5. 頁面指示器
頁面指示器就是在banner下方排布的小圓點，會隨著banner進行同步輪播，輪播到當前頁面時，對應的小圓點會有特殊顯示。
拉勾招聘
頁面指示器的形式不只侷限於小圓點。其他的形式包括矩形、異形、數字、延展圖形等等。
網易考拉
同時，頁面指示器還可以和進度條相結合，會讓使用者更加清楚輪播一張圖所消耗的時間。
愛彼迎
理想狀態下，最多輪播四到五張banner圖。也就是說頁面指示器的小圓點也最多顯示四到五個。電商類的產品輪播圖會更多一些。
6. 導航欄
安卓導航欄最原本屬於安卓規範當中。目前，很多iOS產品當中也開始使用這種導航欄樣式來進行設計，而原本屬於iOS規範當中的分段選擇器變得不那麼常見了。
這種導航欄的優點是除了點選外，還可以左右滑動進行切換，而且並沒有對導航欄中的選項有過多的數量限制。
導航欄常見的樣式包括文字加線條、底色或品牌圖形等，樣式豐富。
荔枝FM / AcFun / 眾安保險 / 飛豬 / 他趣
7. 音量條
目前很多產品都將原本彈窗形式的音量顯示，改為固定在頂部的條狀形式。目的是為了不影響使用者的使用體驗，能夠更沉浸的使用產品。
8. 按鈕
這裡的按鈕以uber為例：
在登入時，輸入完成手機號下一步的時候，按鈕會變成等待狀態。按鈕與等待演示動效相結合，用流暢的動畫消除了使用者等待時產生的負面情緒，讓整體簡潔的頁面變得充滿活力。
因此，我們在設計按鈕的時候，結合場景，可以新增創意，讓死板的按鈕變得有趣起來。
Uber
9. 提示性文字
我們常可以看到在產品中的“我的”頁面中，標題右側會有一行文字提示。有些是單純的提示性文字，而有些則會顯示重要的資料，方便使用者在不點開二級頁面的情況下進行檢視。
不僅如此，設計師還可以對這類字型進行設計，或是新增圖示來豐富它的設計樣式。
荔枝FM
二、功能類
1. 標籤欄
作為一個基礎控制元件，位於底部區域的標籤欄已經演化出多種豐富的樣式。
①重新整理/返回頂部
瀑布流類的首頁形式，UI設計中的小元素總結https://www.aaa-cg.com.cn/ui/2781.html為了方便使用者更新內容，在刷到一定位置後原本的首頁按鈕都會變為重新整理狀態。一些產品也將返回頂部一起做到了頁面中。例如馬蜂窩，就將返回頂部按鈕放到了頂部右上角的位置，重新整理、返回兩不誤。
淘寶
馬蜂窩
②新增按鈕
除此之外，一些具有新增或是上傳功能的按鈕常常被固定在標籤欄中間位置，可以讓使用者第一時間發覺。
小紅書
窮遊
這些巧妙的設計不佔用過多空間，又能很好的解決使用者遇到的問題，非常方便。
2. 懸浮按鈕
懸浮按鈕最開始屬於安卓規範當中，之後在iOS產品中也被保留了下來。雖然在官方規範中並沒有此類按鈕，但因為他使用起來非常方便，並且國內很多軟體安卓端和iOS端都是使用一套頁面。因此，包括懸浮按鈕等一些共性設計就都被保留了下來，在兩個平臺均可得到使用。
馬蜂窩
荔枝fm
馬蜂窩
懸浮按鈕不僅僅可以完成點選等常規操作，還可以作為收藏容器將更多地功能結合在一起。而且位於螢幕右下角，方便使用者使用。
3. 頂部擴充套件內容
擴充套件區域是我個人對它的命名，這部分割槽域在頁面的頂部。因為空間足夠大，所以許多產品可以新增更多的設計想法在裡面。比如新增日期或者天氣等。
像一些特定的產品會在頂部的區域放置一些特有的功能。比如螞蟻金服的智慧助手等。
螞蟻財富
UC瀏覽器
看理想
4. 功能性按鈕
此類按鈕也是非常多見的。比如，導航欄右側或標題欄右側的更多按鈕，它的形式多以三點為主，也有文字、陣列點燈樣式。
三道槓icon多是抽屜導航代表圖形;箭頭基本都是下一頁或返回的固定圖示形式。以上圖示均被廣泛使用，已經成為了使用者的一種固有認識。
因此，我們在設計時可以在此基礎上進行升級或創意性優化。切不可過分顛覆他們，不然會增加使用者的學習成本。
5. 下拉/上劃
①下拉重新整理功能已經成為了一種預設操作。根據產品的屬性定位，我們會見到各種不同風格或是設計元素的下拉動效。設計師可以根據品牌延展元素，融入更多的想法，讓頁面變得更有趣。
土豆視訊
②拿點融投資來舉例，上劃到頁面底部會出現寶箱圖案。隨著我們上劃的幅度，寶箱會打開出現寶物和品牌形象。上劃到底則直接跳轉到另一頁面。這種設計讓我對頁面底部的空間有了更多的想法。
點融投資
6. 視訊進度條
視訊進度條放置在視訊底部，是視訊類產品不可或缺的重要控制元件。當視訊播放時會自動隱藏。除此之外，進度條位置上還可以整合其他功能。比如全屏、點贊、收藏、彈幕開關等。
嗶哩嗶哩的視訊進度條：當拖拽控制按鈕時，小電視icon會隨著我們拖拽的方向而改變。雖然看似是很不起眼的設計，但在視訊區域也可以左右滑動調整進度時，進度條的小icon就能很好的展示出來，充分體現其趣味性。
嗶哩嗶哩
三、視覺類
雖然說是視覺類的設計，但還是要儘量避免加入過多無用元素，不能為了裝飾而設計。要結合自身產品，滿足視覺平衡，要達到情感化設計的目的。
1. 預設頁
通常狀態是，當前頁面沒有內容或無網路狀態下出現的頁面。由於此頁面沒有內容，設計師發揮的空間就變得很大。根據產品屬性和品牌延展圖形，結合動效或插畫等情感化設計，可以很好的豐富頁面內容。
點融投資
我想應該沒有人喜歡看到缺少內容的頁面，這會給使用者心理造成很大的落差。非常影響體驗。因此，預設頁就變得格外重要。如果設計得當，非但不會影響體驗，反而會讓使用者喜歡上它。
除了視覺方面的設計，預設頁也可以新增重新整理按鈕，在功能層面進行完善。
餓了嗎
2. 頭像
現在，很多的產品已經放棄了死板的預設頭像，給使用者更多的選擇。比如京東和小贏理財，就提供給使用者多種頭像選擇。
京東金融
小贏理財
這種增加預設頭像的做法雖然是錦上添花，但這種情感化的設計不僅在視覺上充滿新意;同時，也讓產品更加有趣。
3. 輔助元素
移動端UI都是遵從相對應的規範來進行設計的，因此大部分產品都不太會在這種寸土寸金的地方放置一些硬核的純裝飾性元素。不過，設計師可以在卡片或是瓷片區域上加入自己的想法。
卡片/瓷片的佈局多數是左字右圖，而此類輔助元素並不僅僅是為了突出視覺上的設計。更主要的是保持卡片/瓷片的結構平衡，或是填充多於的留白。讓整體頁面在視覺上更加飽滿吸睛。
樂刻運動/ 眾安保險
4. 切換動效
①標籤欄動效
通過動效的使用，標籤欄切換變得不再死板。使用者在頻繁切換頁面時，不再覺得單調。
土豆視訊
②導航欄動效
蝦米音樂
四、總結
以上，就是我個人對手機移動端上關於“小元素”的總結。在整理期間我還發現了其他有意思的設計，只不過它們並不屬於“小”的這個屬性，因此沒有放進文章中。在體驗產品的過程裡，一些有趣的不錯的設計想法，會對我之後的作品、工作專案帶來很大的啟發。我也希望能夠有更多的朋友可以開始整理並分享出來。因此，您現在已經瞭解了與UI設計師的工作相關的主要技能。如果您想了解更多資訊，請給我點個關注，我之後還會發包含有關在該領域工作的更多相關文章。