在UI界面的設(shè)計當中,有很多“小元素”發(fā)揮著十分重要的作用。有些元素我們已經(jīng)司空見慣;有些被設(shè)計師們玩兒出了新花樣。在使用了一些產(chǎn)品后,AAA教育郭老師對這些“小元素”進行了梳理總結(jié)。希望其中的一些好的、有趣的設(shè)計能對大家有所幫助。
對于“小元素”的這個說法還是有些太籠統(tǒng),我又把它們分為大致三個部分:
提示類元素
功能類元素
視覺類元素
一、提示類
“提示類”顧名思義,對于我們有提示作用的或是有引導(dǎo)幫助作用的都可以歸為此類。那么我最先想到的,應(yīng)該就是讓人又愛又恨的“小紅點”了。
1. 徽標
徽標通俗的叫法就是“小紅點”,一般固定在圖標或是標簽等右上角的位置。它具有非常強的提示作用。強大到有時不想讓它出現(xiàn)。
說起小紅點就不得不提“紅點強迫癥”這個詞。它是現(xiàn)代人的社交網(wǎng)絡(luò)依賴癥之一,表現(xiàn)為看到它就不自覺的或是強迫性地點擊它,讓它消失。
QQ一鍵清除“小紅點”
導(dǎo)致人們看到“小紅點”就像點開的原因,是因為它的突然出現(xiàn),破壞了周圍的布局,打破了排版平衡,使某一塊內(nèi)容變得異常“醒目”。如果想讓“小紅點”在設(shè)計中不那么醒目,我們可以通過顏色來淡化它的存在。
淘寶 / QQ郵箱
徽標的顏色多為紅色,因為紅色足夠醒目且讓用戶能夠警醒。
常見的樣式有“小紅點”、“紅點內(nèi)嵌數(shù)字”、“紅點內(nèi)嵌字符”等樣式。
徽標的尺寸并沒有一個嚴格的規(guī)范。“小紅點”在一些主流產(chǎn)品中,尺寸從16px到30px不等。填充字符內(nèi)容的徽標具體尺寸需視情況而定,最小字號為20px。
顯示的數(shù)字最高到“99”。超過了則顯示“99+”或“…”。一些信息或是評論位置的徽標,顯示可以達到四位數(shù)的千位甚至更高。
今日頭條
徽標可以出現(xiàn)在多個位置上——標簽欄、導(dǎo)航欄、金剛區(qū)、文字標題、頭像等等,均可以發(fā)現(xiàn)它的存在。
2. 標簽
標簽的出現(xiàn)幾率也非常高,常出現(xiàn)在電商、金融、生活娛樂類等產(chǎn)品中。它的主要作用是進行分類或突出重點。比如界面中需要我們區(qū)分開商品的屬性;或是對重點商品、新品進行著重提示等,都需要用到標簽。
標簽的樣式非常豐富——底色、邊框、圖標組合;矩形、圓角矩形、異形、標題樣式等等。
同時,標簽可以出現(xiàn)在任何地方——首頁、我的頁面、商品詳情頁、搜索頁、客服咨詢頁等等。我們打開淘寶、美團等APP,就可以發(fā)現(xiàn)多種樣式的標簽。
美團 /淘寶 / 飛豬
顏色方面,還是要以主色和中性色為主。加重提示可選用紅色;突出活力和時尚感可用漸變色。所以這就需要我們根據(jù)具體需求和產(chǎn)品屬性來搭配。但使用顏色不可過多,同時還要保持頁面整體配色的平衡。
3. 圖標
這里我會提到四種主要圖標類型:
“首頁”或“我的頁面”標題前的提示性icon
新聞或公示模塊左側(cè)的標題圖標
頁面加載圖標
動態(tài)提示icon
①目前,越來越的主流產(chǎn)品已經(jīng)放棄了標題前加圖標這樣的設(shè)計形式了。取而代之的是簡單粗暴的將標題加粗加大。
在“我的頁面”中還是有很多產(chǎn)品保留了標題前添加提示性icon的設(shè)計形式。
京東金融 / 支付寶 / 餓了么
而之前出現(xiàn)過的在標題前加豎杠的設(shè)計形式在APP端已經(jīng)基本見不到了,在網(wǎng)頁端還是會時常碰到。
個人認為豎杠的設(shè)計不僅過時,而且沒有什么實際意義,有點為了裝飾而設(shè)計的感覺,在手機端頁面這種寸土寸金的地方,這種意義不大的裝飾直接去掉反而會更好。
騰訊電腦管家 / 360
這可能也是為什么越來越多的產(chǎn)品不再標題前加icon的原因吧。畢竟,足夠醒目的標題就已經(jīng)很好的起到提示作用,大標題這種設(shè)計形式也是iOS11重點升級點之一。
當然,像一些動漫類或是娛樂類、直播類的產(chǎn)品,增加icon反而會讓頁面更有活力,更有趣味性。還是要根據(jù)具體產(chǎn)品而定。
斗魚 / 騰訊動漫
?、谛侣?公示模塊,在電商、招聘、生活類等產(chǎn)品中經(jīng)常出現(xiàn)。為了更好地讓用戶注意到,通常的做法是將左側(cè)標題進行重新設(shè)計。同時,此類標題圖標可以融入產(chǎn)品的品牌基因元素,更好的突出產(chǎn)品特點。
拉勾招聘
?、奂虞d圖標是當網(wǎng)絡(luò)速度受限,或頁面內(nèi)容加載過多等因素出現(xiàn)時的提示性icon。多以小菊花圖標為主。
微信
?、軇有гO(shè)計在目前越來越受到人們的重視,這種流暢的表現(xiàn)形式和出色的視覺吸引力受到了很多人們的追捧。我們會發(fā)現(xiàn)很多的產(chǎn)品由開始的死板單調(diào),變得活潑豐富起來。這里面動效設(shè)計功不可沒。
餓了么
馬蜂窩
4. 氣泡彈窗
氣泡出現(xiàn)的場景大致有兩種:
一種是新用戶第一次登錄或是更新完畢時。主要起到引導(dǎo)和教學(xué)的作用。
陌陌
第二種是新功能、新產(chǎn)品或新話題推出時,主要作用是提醒和宣傳。
知乎
氣泡的樣式并不豐富,多數(shù)還是常規(guī)的矩形或圓角矩形。配色多是以主色或其他輔助色為主。不過,通過動效的融入,可以使氣泡變得更加吸睛,產(chǎn)生不錯的吸引力。
除此之外還有一種氣泡彈窗是Toast。也就是吐司彈窗。它開始出現(xiàn)在安卓規(guī)范當中,是提示彈窗的一種。初始形態(tài)是在頁面底部顯示的黑色提示窗。經(jīng)過演變,即使是在iOS的產(chǎn)品中也出現(xiàn)了類似的設(shè)計。形式目前演變成了下拉刷新從上彈出提示,并且有可關(guān)閉的樣式。
豆瓣
5. 頁面指示器
頁面指示器就是在banner下方排布的小圓點,會隨著banner進行同步輪播,輪播到當前頁面時,對應(yīng)的小圓點會有特殊顯示。
拉勾招聘
頁面指示器的形式不只局限于小圓點。其他的形式包括矩形、異形、數(shù)字、延展圖形等等。
網(wǎng)易考拉
同時,頁面指示器還可以和進度條相結(jié)合,會讓用戶更加清楚輪播一張圖所消耗的時間。
愛彼迎
理想狀態(tài)下,最多輪播四到五張banner圖。也就是說頁面指示器的小圓點也最多顯示四到五個。電商類的產(chǎn)品輪播圖會更多一些。
6. 導(dǎo)航欄
安卓導(dǎo)航欄最原本屬于安卓規(guī)范當中。目前,很多iOS產(chǎn)品當中也開始使用這種導(dǎo)航欄樣式來進行設(shè)計,而原本屬于iOS規(guī)范當中的分段選擇器變得不那么常見了。
這種導(dǎo)航欄的優(yōu)點是除了點擊外,還可以左右滑動進行切換,而且并沒有對導(dǎo)航欄中的選項有過多的數(shù)量限制。
導(dǎo)航欄常見的樣式包括文字加線條、底色或品牌圖形等,樣式豐富。
荔枝FM / AcFun / 眾安保險 / 飛豬 / 他趣
7. 音量條
目前很多產(chǎn)品都將原本彈窗形式的音量顯示,改為固定在頂部的條狀形式。目的是為了不影響用戶的使用體驗,能夠更沉浸的使用產(chǎn)品。
Instagram
8. 按鈕
這里的按鈕以uber為例:
在登錄時,輸入完成手機號下一步的時候,按鈕會變成等待狀態(tài)。按鈕與等待演示動效相結(jié)合,用流暢的動畫消除了用戶等待時產(chǎn)生的負面情緒,讓整體簡潔的頁面變得充滿活力。
因此,我們在設(shè)計按鈕的時候,結(jié)合場景,可以添加創(chuàng)意,讓死板的按鈕變得有趣起來。
Uber
9. 提示性文字
我們??梢钥吹皆诋a(chǎn)品中的“我的”頁面中,標題右側(cè)會有一行文字提示。有些是單純的提示性文字,而有些則會顯示重要的數(shù)據(jù),方便用戶在不點開二級頁面的情況下進行查看。
不僅如此,設(shè)計師還可以對這類字體進行設(shè)計,或是添加圖標來豐富它的設(shè)計樣式。
荔枝FM
二、功能類
1. 標簽欄
作為一個基礎(chǔ)控件,位于底部區(qū)域的標簽欄已經(jīng)演化出多種豐富的樣式。
①刷新/返回頂部
瀑布流類的首頁形式,為了方便用戶更新內(nèi)容,在刷到一定位置后原本的首頁按鈕都會變?yōu)樗⑿聽顟B(tài)。一些產(chǎn)品也將返回頂部一起做到了頁面中。例如馬蜂窩,就將返回頂部按鈕放到了頂部右上角的位置,刷新、返回兩不誤。
淘寶
馬蜂窩
?、谔砑影粹o
除此之外,一些具有添加或是上傳功能的按鈕常常被固定在標簽欄中間位置,可以讓用戶第一時間發(fā)覺。
小紅書
窮游
這些巧妙的設(shè)計不占用過多空間,又能很好的解決用戶遇到的問題,非常方便。
2. 懸浮按鈕
懸浮按鈕最開始屬于安卓規(guī)范當中,之后在iOS產(chǎn)品中也被保留了下來。雖然在官方規(guī)范中并沒有此類按鈕,但因為他使用起來非常方便,并且國內(nèi)很多軟件安卓端和iOS端都是使用一套頁面。因此,包括懸浮按鈕等一些共性設(shè)計就都被保留了下來,在兩個平臺均可得到使用。
馬蜂窩
荔枝fm
馬蜂窩
懸浮按鈕不僅僅可以完成點擊等常規(guī)操作,還可以作為收藏容器將更多地功能結(jié)合在一起。而且位于屏幕右下角,方便用戶使用。
3. 頂部擴展內(nèi)容
擴展區(qū)域是我個人對它的命名,這部分區(qū)域在頁面的頂部。因為空間足夠大,所以許多產(chǎn)品可以添加更多的設(shè)計想法在里面。比如添加日期或者天氣等。
像一些特定的產(chǎn)品會在頂部的區(qū)域放置一些特有的功能。比如螞蟻金服的智能助手等。
螞蟻財富
UC瀏覽器
看理想
4. 功能性按鈕
此類按鈕也是非常多見的。比如,導(dǎo)航欄右側(cè)或標題欄右側(cè)的更多按鈕,它的形式多以三點為主,也有文字、陣列點燈樣式。
三道杠icon多是抽屜導(dǎo)航代表圖形;箭頭基本都是下一頁或返回的固定圖標形式。以上圖標均被廣泛使用,已經(jīng)成為了用戶的一種固有認識。
因此,我們在設(shè)計時可以在此基礎(chǔ)上進行升級或創(chuàng)意性優(yōu)化。切不可過分顛覆他們,不然會增加用戶的學(xué)習(xí)成本。
5. 下拉/上劃
?、傧吕⑿鹿δ芤呀?jīng)成為了一種默認操作。根據(jù)產(chǎn)品的屬性定位,我們會見到各種不同風格或是設(shè)計元素的下拉動效。設(shè)計師可以根據(jù)品牌延展元素,融入更多的想法,讓頁面變得更有趣。
土豆視頻
?、谀命c融投資來舉例,上劃到頁面底部會出現(xiàn)寶箱圖案。隨著我們上劃的幅度,寶箱會打開出現(xiàn)寶物和品牌形象。上劃到底則直接跳轉(zhuǎn)到另一頁面。這種設(shè)計讓我對頁面底部的空間有了更多的想法。
點融投資
6. 視頻進度條
視頻進度條放置在視頻底部,是視頻類產(chǎn)品不可或缺的重要控件。當視頻播放時會自動隱藏。除此之外,進度條位置上還可以集成其他功能。比如全屏、點贊、收藏、彈幕開關(guān)等。
嗶哩嗶哩的視頻進度條:當拖拽控制按鈕時,小電視icon會隨著我們拖拽的方向而改變。雖然看似是很不起眼的設(shè)計,但在視頻區(qū)域也可以左右滑動調(diào)整進度時,進度條的小icon就能很好的展示出來,充分體現(xiàn)其趣味性。
嗶哩嗶哩
三、視覺類
雖然說是視覺類的設(shè)計,但還是要盡量避免加入過多無用元素,不能為了裝飾而設(shè)計。要結(jié)合自身產(chǎn)品,滿足視覺平衡,要達到情感化設(shè)計的目的。
1. 缺省頁
通常狀態(tài)是,當前頁面沒有內(nèi)容或無網(wǎng)絡(luò)狀態(tài)下出現(xiàn)的頁面。由于此頁面沒有內(nèi)容,設(shè)計師發(fā)揮的空間就變得很大。根據(jù)產(chǎn)品屬性和品牌延展圖形,結(jié)合動效或插畫等情感化設(shè)計,可以很好的豐富頁面內(nèi)容。
點融投資
我想應(yīng)該沒有人喜歡看到缺少內(nèi)容的頁面,這會給用戶心理造成很大的落差。非常影響體驗。因此,缺省頁就變得格外重要。如果設(shè)計得當,非但不會影響體驗,反而會讓用戶喜歡上它。
除了視覺方面的設(shè)計,缺省頁也可以添加刷新按鈕,在功能層面進行完善。
餓了嗎
2. 頭像
現(xiàn)在,很多的產(chǎn)品已經(jīng)放棄了死板的默認頭像,給用戶更多的選擇。比如京東和小贏理財,就提供給用戶多種頭像選擇。
京東金融
小贏理財
這種增加默認頭像的做法雖然是錦上添花,但這種情感化的設(shè)計不僅在視覺上充滿新意;同時,也讓產(chǎn)品更加有趣。
3. 輔助元素
移動端UI都是遵從相對應(yīng)的規(guī)范來進行設(shè)計的,因此大部分產(chǎn)品都不太會在這種寸土寸金的地方放置一些硬核的純裝飾性元素。不過,設(shè)計師可以在卡片或是瓷片區(qū)域上加入自己的想法。
卡片/瓷片的布局多數(shù)是左字右圖,而此類輔助元素并不僅僅是為了突出視覺上的設(shè)計。更主要的是保持卡片/瓷片的結(jié)構(gòu)平衡,或是填充多于的留白。讓整體頁面在視覺上更加飽滿吸睛。
樂刻運動/ 眾安保險
4. 切換動效
?、贅撕灆趧有?br />
通過動效的使用,標簽欄切換變得不再死板。用戶在頻繁切換頁面時,不再覺得單調(diào)。
土豆視頻
②導(dǎo)航欄動效
蝦米音樂
四、總結(jié)
以上,就是我個人對手機移動端上關(guān)于“小元素”的總結(jié)。在整理期間我還發(fā)現(xiàn)了其他有意思的設(shè)計,只不過它們并不屬于“小”的這個屬性,因此沒有放進文章中。在體驗產(chǎn)品的過程里,一些有趣的不錯的設(shè)計想法,會對我之后的作品、工作項目帶來很大的啟發(fā)。我也希望能夠有更多的朋友可以開始整理并分享出來。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc