精品国产乱子伦一区二区三区,国产亚洲日韩在线一区二区三区,精品国产一区二区三区免费

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

UI設(shè)計(jì)中，“小元素”有大用處！

FLY

2020-03-26

3 評論 6866 瀏覽 47 收藏

24 分鐘

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

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

提示類元素
功能類元素
視覺類元素

一、提示類

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

1. 徽標(biāo)

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

說起小紅點(diǎn)就不得不提“紅點(diǎn)強(qiáng)迫癥”這個(gè)詞。它是現(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)的尺寸并沒有一個(gè)嚴(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)在多個(gè)位置上——標(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)題樣式等等。

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

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

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

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)頁端還是會時(shí)常碰到。

個(gè)人認(rèn)為豎杠的設(shè)計(jì)不僅過時(shí)，而且沒有什么實(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ì)。同時(shí)，此類標(biāo)題圖標(biāo)可以融入產(chǎn)品的品牌基因元素，更好的突出產(chǎn)品特點(diǎn)。

拉勾招聘

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

微信

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

餓了么

馬蜂窩

4. 氣泡彈窗

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

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

陌陌

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

知乎

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

除此之外還有一種氣泡彈窗是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)前頁面時(shí)，對應(yīng)的小圓點(diǎn)會有特殊顯示。

拉勾招聘

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

網(wǎng)易考拉

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

愛彼迎

理想狀態(tài)下，最多輪播四到五張banner圖。也就是說頁面指示器的小圓點(diǎn)也最多顯示四到五個(gè)。電商類的產(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 / 眾安保險(xiǎn) / 飛豬 / 他趣

7. 音量條

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

Instagram

8. 按鈕

這里的按鈕以uber為例：

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

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

Uber

9. 提示性文字

我們常可以看到在產(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)簽欄

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

①刷新/返回頂部

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

淘寶

馬蜂窩

②添加按鈕

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

小紅書

窮游

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

2. 懸浮按鈕

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

馬蜂窩

荔枝fm

馬蜂窩

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

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

擴(kuò)展區(qū)域是我個(gè)人對它的命名，這部分區(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ì)時(shí)可以在此基礎(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)視頻播放時(shí)會自動隱藏。除此之外，進(jìn)度條位置上還可以集成其他功能。比如全屏、點(diǎn)贊、收藏、彈幕開關(guān)等。

嗶哩嗶哩的視頻進(jìn)度條：當(dāng)拖拽控制按鈕時(shí)，小電視icon會隨著我們拖拽的方向而改變。雖然看似是很不起眼的設(shè)計(jì)，但在視頻區(qū)域也可以左右滑動調(diào)整進(jìn)度時(shí)，進(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ì)不僅在視覺上充滿新意；同時(shí)，也讓產(chǎn)品更加有趣。

3. 輔助元素

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

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

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

4. 切換動效

①標(biāo)簽欄動效

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

土豆視頻

②導(dǎo)航欄動效

蝦米音樂

四、總結(jié)

以上，就是我個(gè)人對手機(jī)移動端上關(guān)于“小元素”的總結(jié)。在整理期間我還發(fā)現(xiàn)了其他有意思的設(shè)計(jì)，只不過它們并不屬于“小”的這個(gè)屬性，因此沒有放進(jìn)文章中。在體驗(yàn)產(chǎn)品的過程里，一些有趣的不錯(cuò)的設(shè)計(jì)想法，會對我之后的作品、工作項(xiàng)目帶來很大的啟發(fā)。我也希望能夠有更多的朋友可以開始整理并分享出來。