蘇州上元教育培訓(xùn)中心

平面設(shè)計(jì)未來趨勢(shì)發(fā)展

01、服務(wù)于殘障人士的建筑會(huì)不斷涌現(xiàn)

給健全的人設(shè)計(jì)房子并不是什么新鮮事，但殘疾人和老人同樣需要舒適、便捷的生活空間。未來的五年，會(huì)有更多的設(shè)計(jì)師關(guān)注這個(gè)領(lǐng)域。

02、智能的會(huì)變得更智能

如果恒溫器都會(huì)說話，為什么我們所坐的椅子和會(huì)議室不能？無所不在的傳感技術(shù)、機(jī)械自動(dòng)化和新型的材料會(huì)幫助我們實(shí)現(xiàn)這一點(diǎn)。很快，枕頭就能自動(dòng)調(diào)節(jié)到我們想要的軟硬度，會(huì)議室也會(huì)告訴你這次的會(huì)議開的是否成功，并為你即時(shí)調(diào)整室內(nèi)光線和溫度。

03、瀏覽器會(huì)變得更聰明

Google 已經(jīng)在不斷地迭代它的產(chǎn)品了。在將來，瀏覽器的功能會(huì)更強(qiáng)大。大部分的 APP 會(huì)儲(chǔ)存在云端，但使用起來的時(shí)候，會(huì)像是儲(chǔ)存在硬盤中一樣方便。

04、對(duì)每一家公司來說，設(shè)計(jì)都會(huì)變得至關(guān)重要

大型的科技公司越來越注重設(shè)計(jì)，他們有了不少新動(dòng)作。Chrome OS Beta 上的 Files app 在更新后，會(huì)成為**個(gè)換上 Material Design 風(fēng)格的 Chrome app，這個(gè)設(shè)計(jì)小組是由 Matias Duarte 領(lǐng)導(dǎo)的，John Donahoe 則領(lǐng)導(dǎo)了 eBay 的設(shè)計(jì)小組，IBM 也開始發(fā)力了，他們新建了由 Phil Gilbert 領(lǐng)導(dǎo)的設(shè)計(jì)小組，想拾回他們?cè)谠O(shè)計(jì)領(lǐng)域的榮耀。

05、產(chǎn)品變得比任何時(shí)候都更重要

產(chǎn)品的功能變得比以往復(fù)雜，良好的設(shè)計(jì)才會(huì)吸引人去使用它。產(chǎn)品的樣態(tài)、交互的細(xì)節(jié)……這些都是你吸引用戶去反復(fù)使用它的關(guān)鍵。

平面設(shè)計(jì)短期就業(yè)班

1、平面綜合階段：系統(tǒng)學(xué)習(xí)平面設(shè)計(jì)AI, CDR, PS, ID四大軟件，能熟練操作，融會(huì)貫 通，綜合運(yùn)用。重點(diǎn)掌握四大平面軟件運(yùn)用，能進(jìn)行基礎(chǔ)平面設(shè)計(jì)工作。學(xué)習(xí)四大軟件 操作訓(xùn)練：講練結(jié)合，易學(xué)易懂。

2、平面研修階段：主要掌握商業(yè)插畫、版式、折頁設(shè)計(jì)、包裝、海報(bào)、logo、標(biāo)志VI 、作品集設(shè)計(jì)、等常規(guī)商業(yè)設(shè)計(jì)技能，掌握新的印刷工藝技術(shù)；掌握企業(yè)VI、插畫、包裝、畫冊(cè)、logo、宣傳品、版式、書籍裝幀、作品集等常規(guī)平面 設(shè)計(jì)技能；掌握商業(yè)設(shè)計(jì)知識(shí)和9大技能：學(xué)習(xí)設(shè)計(jì)原理流程以及印刷工藝技術(shù)。

3、崗前就業(yè)階段：參加崗前就業(yè)積累工作經(jīng)驗(yàn)：近50個(gè)企業(yè)項(xiàng)目中標(biāo)訓(xùn)練，總監(jiān)1對(duì)1 指導(dǎo)，課堂職場(chǎng)無縫對(duì)接，快速收獲1-2年職場(chǎng)實(shí)際經(jīng)驗(yàn)。近50個(gè)企業(yè)項(xiàng)目中標(biāo)訓(xùn)練，總監(jiān)1對(duì)1指導(dǎo)，課堂職場(chǎng)無縫對(duì)接，快速收獲1-2年職場(chǎng)實(shí)際經(jīng)驗(yàn) 。

4、素養(yǎng)訓(xùn)練階段：重點(diǎn)培養(yǎng)演講表達(dá)能力、執(zhí)行能力、團(tuán)隊(duì)協(xié)作精神，把學(xué)員打造成 專業(yè)技能過硬，心態(tài)陽光，職業(yè)素養(yǎng)好的設(shè)計(jì)人才，讓學(xué)員快速成長(zhǎng)。培養(yǎng)演講表達(dá)能力、團(tuán)隊(duì)協(xié)作精神等6大職場(chǎng)核心技能；接受專業(yè)的就業(yè)指導(dǎo)， 克服面試心里障礙，提升個(gè)人素質(zhì)，成功就業(yè)。

彈框體系總結(jié)：模態(tài)彈框和非模態(tài)彈框

---

王M爭(zhēng)：彈框是一種重要的交互方式，主要用于完成信息傳遞和用戶反饋兩大功能。彈框很常見，但并不見得每一個(gè)設(shè)計(jì)師都可以100%的弄明白彈框這個(gè)概念。這篇文章是對(duì)彈框體系的一個(gè)簡(jiǎn)單梳理和總結(jié)，希望可以解決大家心中的一些疑惑。

我們?nèi)粘Ｋf的彈框是一個(gè)很籠統(tǒng)的概念。所有的對(duì)話框、浮層、提示條我們都習(xí)慣性的稱之為彈框，其實(shí)彈框我們可以分為兩種：模態(tài)彈框和非模態(tài)彈框。

一. 模態(tài)彈框

模態(tài)彈框和非模態(tài)彈框**大的區(qū)別就是是否強(qiáng)制用戶交互。模態(tài)彈框會(huì)打斷用戶的當(dāng)前操作流程，用戶不在彈框上操作的話，其余功能都使用不了。

從這方面，我們可以看出來模態(tài)彈框的優(yōu)缺點(diǎn)都十分的明顯。

• 優(yōu)點(diǎn)：可以很好的獲取用戶的視覺焦點(diǎn)
• 缺點(diǎn)：打斷了用戶的當(dāng)前操作流程

模態(tài)彈框?qū)儆谝环N重量性反饋，一般用于用戶進(jìn)行重要的操作。常見的模態(tài)彈框種類有對(duì)話框(Dialog/Alter)，動(dòng)作欄(Actionbar/Actionsheet/ActionView)和浮層(Popover/Popup)。因?yàn)楝F(xiàn)在iOS和Android很多組件都是通用的，所以在接下來的文章里過于相似的組件我只介紹一種。

對(duì)話框

對(duì)話框一般用于用戶進(jìn)行一項(xiàng)很重要或者有風(fēng)險(xiǎn)的操作，這時(shí)會(huì)彈出一個(gè)對(duì)話框給用戶提示信息，用戶根據(jù)提示來進(jìn)行判斷。一般出現(xiàn)在屏幕的中間位置，會(huì)對(duì)界面的主要內(nèi)容造成遮擋。

目前來說對(duì)話框的設(shè)計(jì)樣式繁多，用戶可以進(jìn)行信息錄入，也可以用于營(yíng)銷宣傳。

深入學(xué)習(xí)對(duì)話框設(shè)計(jì)：《5分鐘交互設(shè)計(jì)指南系列：對(duì)話框》

動(dòng)作欄

動(dòng)作欄在我看來可以看成是對(duì)話框的一個(gè)加強(qiáng)版，因?yàn)闊o論是Alert還是Dialog一般都只有兩個(gè)按鈕。而動(dòng)作欄可以提供多個(gè)功能按鈕，而且展示的樣式比較多變。

但是也有例外，有的動(dòng)作欄只有兩個(gè)選項(xiàng)。以網(wǎng)易云音樂為例，你要?jiǎng)h除歌曲時(shí)，「確認(rèn)刪除」提示就是**動(dòng)作欄來完成的(如左圖)。

其實(shí)這里使用對(duì)話框也是完全可以的（如右圖），網(wǎng)易云音樂的設(shè)計(jì)師在這里使用動(dòng)作欄的理由我不得而知。但是我個(gè)人猜測(cè)是，動(dòng)作欄位于屏幕下方，相對(duì)來說對(duì)界面內(nèi)容的遮蓋會(huì)小一點(diǎn)。

浮層

浮層是用戶點(diǎn)擊控件或者界面某一區(qū)域浮出的半透明的臨時(shí)視圖。浮層的樣式跟動(dòng)作欄很相似，都可以向用戶展示多個(gè)功能選項(xiàng)。但是浮層可以出現(xiàn)屏幕中的任何位置，能夠給用戶更具有指向型的提示。

接下來我們可以做一個(gè)小結(jié)：在不考慮信息錄入情況下，對(duì)話框適用于用戶進(jìn)行判斷操作，而動(dòng)作欄和浮層適用于用戶進(jìn)行選擇操作，而浮層相對(duì)于動(dòng)作欄更具有指向型。

二. 非模態(tài)彈框

與模態(tài)彈框相比，非模態(tài)彈框**大的區(qū)別是不強(qiáng)制用戶交互，也不會(huì)彈出半透明背景層，非模態(tài)彈框停留一段時(shí)間后會(huì)自己消失。所以相對(duì)于模態(tài)彈框來說，非模態(tài)彈框?qū)儆谳p量型反饋，不會(huì)對(duì)用戶造成太大的干擾。常見的非模態(tài)彈框有Toast（hud）和snackbar。

Toast

Toast主要用于用戶完成操作以后，告訴用戶操作結(jié)果或者狀態(tài)的變更。Toast其實(shí)是屬于Android的組件，iOS里有一個(gè)相類似的是hud，**常見的就是音量調(diào)節(jié)提示。但是現(xiàn)在iOS和Android的界限不斷被打破，toast現(xiàn)在也被廣泛應(yīng)用于iOS界面設(shè)計(jì)中。如果我們?nèi)タ碅ndroid給的設(shè)計(jì)規(guī)范，會(huì)發(fā)現(xiàn)Toast有以下幾個(gè)特點(diǎn)：

• 只出現(xiàn)在屏幕底部
• 只能放文字
• 非模態(tài)彈框

其實(shí)真實(shí)的Toast是可以出現(xiàn)在屏幕的任何位置的，而且可以加icon，甚至連背景層顏色都能變。所以說我覺得設(shè)計(jì)師不僅要去看那些設(shè)計(jì)規(guī)范，還要花點(diǎn)時(shí)間跟開發(fā)溝通一下。

Toast的優(yōu)點(diǎn)是不會(huì)打斷用戶當(dāng)前的操作流程，屬于輕量型的反饋方式。缺點(diǎn)是容易被用戶忽視，而且不適合展示過多的信息，可能在用戶讀完之前就消失了。為了提升信息的可讀性和增加樣式美感，現(xiàn)在Toast都會(huì)采用文字加icon的組合樣式。

深入學(xué)習(xí)Toast 的用法：《「這個(gè)控件叫什么」系列之Toast》

Snackbar

Snackbar一般是由文字和功能按鈕組成的，用戶可以點(diǎn)擊按鈕交互，即使用戶不點(diǎn)擊Snackbar也會(huì)自動(dòng)消失，一般位于屏幕下方。通俗意義上，我們可以把Snackbar看成是帶有icon的Toast。

Snackbar我放在**后說，因?yàn)樗浅Ｌ厥?。雖然snackbar屬于非模態(tài)彈框，但是它也有模態(tài)彈框的一些特點(diǎn)。例如Snackbar也有按鈕來供用戶交互，此外Snackbar一般會(huì)出現(xiàn)在界面下方，這點(diǎn)又和動(dòng)作欄中的Action sheet很像。

如果上面寫的你看不懂，沒關(guān)系。我來給你做一個(gè)小結(jié)：非模態(tài)彈框偏重信息提示，模態(tài)彈框既可以信息提示也可以供用戶交互；Toast是輕量型的彈框類型，Snackbar集眾家之所長(zhǎng)。

三. 彈框體系的建立優(yōu)化

以上我們了解了幾種主要的彈框樣式和用法，接下來我們來考慮的是如何建立一款產(chǎn)品的彈框體系或者如何對(duì)現(xiàn)有產(chǎn)品的彈框體系進(jìn)行優(yōu)化。其實(shí)彈框體系的建立和優(yōu)化的原則可以用一句話概括：能在界面中展示就不用彈框，能用非模態(tài)彈框的就不要用模態(tài)彈框。

因?yàn)槿魏螐椏蚨紩?huì)對(duì)用戶造成干擾，即使是**輕量型的Toast。從用戶體驗(yàn)的角度來說，進(jìn)行一個(gè)操作流程所受到的干擾肯定是越少越好。以下圖為例，用戶可能會(huì)對(duì)「配速區(qū)間和配速穩(wěn)定性」這些專業(yè)術(shù)語不太了解，所以他們會(huì)點(diǎn)擊「問號(hào)」圖標(biāo)。

這時(shí)候我們有3種的解決方案：

• **一個(gè)新的界面展示。但是我們可以看出，解釋信息并不多，不需要**一個(gè)新的頁面來展示
• 使用對(duì)話框或者浮層，在這里我們不能使用Toast，因?yàn)門oast時(shí)間太短，用戶根本讀不完
• 在當(dāng)前界面展示

其實(shí)方案2和3在我看來是不錯(cuò)的解決方案。但是考慮到減少對(duì)用戶的干擾和操作步驟，這里我覺得方案3更佳。

多態(tài)按鈕

此外多態(tài)按鈕的使用也可以幫助我們解放彈框的壓力。例如，支付寶的支付界面，立即支付按鈕可以跳轉(zhuǎn)到付款成功的狀態(tài)，這時(shí)候就沒有必要再用彈框給用戶提示了。

建立優(yōu)先級(jí)

優(yōu)先級(jí)不同的信息應(yīng)該獲得不同的視覺權(quán)重，那么視覺權(quán)重**大的模態(tài)彈框應(yīng)該展示重要的內(nèi)容。所以我們要對(duì)需要展示的信息做一個(gè)優(yōu)先級(jí)的排布，要讓真正重要的信息才可以使用模態(tài)彈框。只有低頻而又合理的使用，用戶才會(huì)當(dāng)回事。過度使用會(huì)給用戶產(chǎn)生「狼來了」心理。

總結(jié)

因?yàn)楝F(xiàn)在交互設(shè)計(jì)的很多術(shù)語都沒有統(tǒng)一，導(dǎo)致很多人對(duì)于彈框的種類很定義都有很大的出入。這篇文章是從我個(gè)人角度進(jìn)行的一個(gè)總結(jié)，希望可以幫助到大家。各位有什么想法的，歡迎留言或者私信。

歡迎關(guān)注作者的微信公眾號(hào)：「王M爭(zhēng)」

「敲黑板！關(guān)于彈窗的知識(shí)點(diǎn)都在這了」

• 《實(shí)用干貨！從交互角度聊聊四類彈框的四大設(shè)計(jì)準(zhǔn)則》
• 《提升細(xì)節(jié)體驗(yàn)！移動(dòng)應(yīng)用的彈窗設(shè)計(jì)指南》
• 《如何設(shè)計(jì)優(yōu)秀的彈出框？這兒有一份全面總結(jié)！》

【聯(lián)展網(wǎng) 原創(chuàng)文章 】

================明星欄目推薦================

聯(lián)展網(wǎng)： ?是旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛好者也準(zhǔn)備了貼心的知識(shí)樹專欄。開啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣**高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：

相關(guān)推薦：

---

蘇州平面設(shè)計(jì)培訓(xùn)   蘇州平面設(shè)計(jì)培訓(xùn)班   蘇州平面設(shè)計(jì)培訓(xùn)機(jī)構(gòu)