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

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

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

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

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

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

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

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

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

大型的科技公司越來(lái)越注重設(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 也開(kāi)始發(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é)……這些都是你吸引用戶(hù)去反復(fù)使用它的關(guān)鍵。

平面設(shè)計(jì)課程

PS模塊：

1.介紹軟件（應(yīng)用領(lǐng)域、優(yōu)勢(shì)）/軟件界面與設(shè)置/視圖縮放與移動(dòng)/選擇工 具/屏幕顯示模式/包裝效果圖選區(qū)自由變換、自由變形/保存格式。

2.文字（文字海報(bào)）/形狀工具（繪制簡(jiǎn)單形狀）/填充（前景色、背景色）

3.色階，曲線(xiàn)，亮度對(duì)比度等/色彩平衡，色相飽和度，可選顏色等/畫(huà)布、 圖像大小調(diào)整/鋼筆工具/選區(qū)（選區(qū)工具）等

4.消失點(diǎn)，液化，仿制源/銳化、模糊工具/加深、減淡工具，/漸變工具、. 吸管工具/色彩知識(shí)（色彩搭配訓(xùn)練）

5.橡皮擦/圖層蒙版/套索，魔棒 /快速蒙版/抽出/調(diào)整邊緣

6.鋼筆工具/色彩范圍 /通道/攝影藝術(shù)介紹

7.剪切蒙版/圖層混合模式

8.濾鏡（上）風(fēng)格化，像素化，模糊，水墨等藝術(shù)效果/智能濾鏡

9.濾鏡（下）扭曲，渲染，其他

10.圖層樣式內(nèi)陰影，斜面與浮雕，顏色，漸變，圖案疊加

11.UI介紹/網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)/網(wǎng)頁(yè)banner的設(shè)計(jì)/網(wǎng)頁(yè)切片工具

12.對(duì)齊與分布//網(wǎng)頁(yè)設(shè)計(jì)制作

13.動(dòng)畫(huà)制作（把靜態(tài)網(wǎng)頁(yè)稍加動(dòng)畫(huà)）/軟件互導(dǎo)性

CDR模塊：

1.軟件介紹（應(yīng)用領(lǐng)域、優(yōu)勢(shì)、缺點(diǎn)）/軟件界面（調(diào)色板）

2.基本操作（新建文件、設(shè)置文件大小、出血、保存、導(dǎo)出、再制等）

3.排版需注意的適宜（字號(hào)、字體、出血、文字安全框等）

4.文本格式：文字方向字符格式、段落格式、段落文本換行（圖文混排）、 分欄

5.基礎(chǔ)繪圖（矩形、橢圓、多邊形、圖紙、螺旋線(xiàn)、完美形狀、智能繪圖）

6.移動(dòng)工具、填色（內(nèi)部、輪廓）/視圖工具（抓手、縮放、顯示性能）

7.排列、鎖定、造形/圖框準(zhǔn)確裁剪/群組與結(jié)合、對(duì)齊和分布

8.手繪、藝術(shù)筆/貝塞爾、鋼筆/折線(xiàn)、三點(diǎn)曲線(xiàn)、連線(xiàn)、度量工具

9.形狀工具：A.直接編輯基本形狀/文字；B.轉(zhuǎn)換成曲線(xiàn)后編輯

10.涂抹、粗糙、變換工具/裁切、刻刀、橡皮檫、虛擬段刪除/線(xiàn)條填色

11.均勻、漸變、圖樣、紋理、PS填充/交互式填充、網(wǎng)狀填充吸管油漆桶

12.交互調(diào)和、輪廓

13.變形、陰影、透明

14.立體(立體字設(shè)計(jì)、扁平投影效果、添加紋理立體字、漸變立體字)

15.封套設(shè)計(jì)

16.位圖處理/轉(zhuǎn)換（跟蹤位圖）位圖遮罩/濾鏡效果（卷頁(yè)）4.效果菜單

17.表格處理/插入條碼、OLE對(duì)象（圖表）/對(duì)象管理器/頁(yè)面設(shè)置、打印

AI模塊：

1.介紹軟件/.新建文件設(shè)置/軟件界面認(rèn)識(shí)/文字工具/文字大小改變、旋轉(zhuǎn) 、復(fù)制

2.其他格式：制表符、文字屬性復(fù)制輪廓/簡(jiǎn)歷制作

3.選擇工具、基礎(chǔ)繪圖學(xué)習(xí)/顏色填充、漸變工具、吸管工具/錨點(diǎn)編輯工具

4.鋼筆鉛筆工具、路徑橡皮擦、美工刀、剪刀、群組與復(fù)合路徑、對(duì)齊和分 布

5.排列、鎖定、隱藏、路徑查找器（焊接、相交、修剪）剪切蒙版

6.描邊面板/對(duì)象/路徑/內(nèi)部填充（網(wǎng)格工具、實(shí)時(shí)上色）

7.變形工具/封套扭曲/變換工具

8.畫(huà)筆/符號(hào)/符號(hào)噴槍工具

9.混合工具（帶過(guò)，CDR中詳說(shuō)）透明蒙版（結(jié)合剪切蒙版使用）

10.外觀面板、圖形樣式/描邊、外觀的使用/圖層面板（多圖層整理）

11.圖表/位圖轉(zhuǎn)矢量圖/透明度面板（中疊加方式的使用）

12.效果菜單（凸出和斜角、繞轉(zhuǎn)、風(fēng)格化）軟件相互間格式的處理。

春節(jié)專(zhuān)題！App 設(shè)計(jì)系列之模態(tài)彈窗與非模態(tài)彈窗

---

在手機(jī)app應(yīng)用中各種格式的彈窗效果相信大家都看過(guò)，也可能反感過(guò)某些彈窗，本文就來(lái)談?wù)勱P(guān)于app彈窗設(shè)計(jì)以及彈窗的適用情景。

一. 彈窗的定義

1. 彈窗作用

彈窗是為了讓用戶(hù)回應(yīng)，需要用戶(hù)與之交互的窗口。

非模態(tài)彈窗一般被設(shè)計(jì)成用來(lái)告訴用戶(hù)信息內(nèi)容，而模態(tài)彈窗除了告訴用戶(hù)信息內(nèi)容外還需要用戶(hù)進(jìn)行功能操作。

2. 模態(tài)彈窗

會(huì)打斷用戶(hù)的操作行為，強(qiáng)制用戶(hù)必須進(jìn)行操作，否則不可以進(jìn)行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模態(tài)彈窗

不會(huì)影響用戶(hù)操作，用戶(hù)可以不與回應(yīng)，通常有時(shí)間限制，出現(xiàn)一段時(shí)間就會(huì)自動(dòng)消失。

（Toast/HUD，Snackbar）

二. 彈窗分類(lèi)

以下將以各類(lèi)彈窗的含義、作用、適用來(lái)進(jìn)行淺析。

1. Alerts/Dialog：警告框與對(duì)話(huà)框

含義：英文意為警告、對(duì)話(huà)，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶(hù)的行為。

剖析：iOS中警告框稱(chēng)之為Alerts，作用是用來(lái)傳達(dá)重要信息，并伴隨著需要用戶(hù)進(jìn)行操作。

iOS規(guī)范中，警告框包含的元素如下：標(biāo)題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。

必須包含標(biāo)題、包含一個(gè)或多個(gè)按鈕。

Android規(guī)范中，彈窗交互按鈕需結(jié)合實(shí)際情況，不用「是/否」原則進(jìn)行設(shè)計(jì)。

作用：告知用戶(hù)當(dāng)前發(fā)生的狀況，讓用戶(hù)主動(dòng)選擇回應(yīng)。

適用：重要性較高的操作時(shí)，如退出、刪除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動(dòng)視圖

含義：英譯為工具欄、操作欄。

剖析：當(dāng)用戶(hù)激發(fā)一個(gè)操作的時(shí)候，出現(xiàn)此窗口。

一般會(huì)給用戶(hù)提供更多的功能選擇，一般可采用**方控件。

一般都設(shè)計(jì)有一個(gè)默認(rèn)的「取消」按鈕，點(diǎn)擊取消可以關(guān)閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用戶(hù)觸發(fā)、包含兩個(gè)或以上的按鈕。

△ 以上為今日頭條、iOS系統(tǒng)相冊(cè)

作用：操作列表提供一系列在當(dāng)前情景下可以完成當(dāng)前任務(wù)的操作，而這樣的形式不會(huì)永久占用頁(yè)面UI的空間。

適用：如分享功能。

3. Popover/Popup：浮出框/浮層彈窗

含義：英意為彈出窗口，浮動(dòng)于頂層窗口，氣泡。

△ 以上為微博、qq、微信

剖析：當(dāng)用戶(hù)點(diǎn)擊某個(gè)控件或者某個(gè)區(qū)域時(shí)浮出的半透明或者不透明的彈窗窗口。

不會(huì)對(duì)用戶(hù)所在位置進(jìn)行跳轉(zhuǎn)。

作用：可以在當(dāng)前頁(yè)面進(jìn)行更多的操作行為，顯示/隱藏頁(yè)面中的折疊信息。

適用：首頁(yè)位置呈現(xiàn)一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS沒(méi)有Toast，只有HUD）

含義：Toast也被稱(chēng)為吐司提示，Toast是安卓系統(tǒng)的一個(gè)控件名詞，現(xiàn)也應(yīng)用于iOS系統(tǒng)中。

剖析：提示框?qū)儆谝环N輕量級(jí)的彈窗反饋形式，常以小彈框的形式出現(xiàn)，持續(xù)1-2秒自動(dòng)消失，可以出現(xiàn)在屏幕任意位置，但是建議同一款產(chǎn)品盡量使用相同位置，讓用戶(hù)產(chǎn)生統(tǒng)一認(rèn)知，成為習(xí)慣。

提示信息能給予用戶(hù)及時(shí)反饋，確保用戶(hù)知曉自己所處的狀態(tài)，并可以做出相應(yīng)的措施。

iOS用戶(hù)更習(xí)慣于在頂部感知反饋信息，不干擾用戶(hù)瀏覽主體內(nèi)容。Toast出現(xiàn)在屏幕頂部不會(huì)遮擋主體內(nèi)容。（如花瓣、有道云筆記）

Android正統(tǒng)的規(guī)范中Toast：

• 出現(xiàn)在屏幕底部。
• 只能放文字不能帶圖標(biāo)，文字要精簡(jiǎn)不宜太長(zhǎng)。
• 不是模態(tài)的，可以**Toast對(duì)其他控件進(jìn)行操作。
• 短時(shí)間后會(huì)自動(dòng)消失。
• 不能對(duì)Toast進(jìn)行交互。
• 優(yōu)先適用于系統(tǒng)提示，不能手動(dòng)操作讓Toast主動(dòng)消失。

△ 以上為今日頭條、微博、即刻

HUD與Toast的區(qū)別：

• HUD只出現(xiàn)在屏幕的中央，Toast則在底部。
• HUD可以包含icon，Toast只能純文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中內(nèi)容可以變化（如調(diào)節(jié)音量時(shí)），Toast中內(nèi)容不可變化。

△ iOS音量調(diào)節(jié)

優(yōu)點(diǎn)：

• 占用屏幕空間小。
• 不會(huì)打斷用戶(hù)操作。
• 使用簡(jiǎn)單，適用范圍廣。

缺點(diǎn)：

• 出現(xiàn)時(shí)間短，在碎片化時(shí)代注意力不集中容易錯(cuò)過(guò)Toast提示。
• 遮蓋其他控件，但不能對(duì)Toast進(jìn)行交互。

適用：提示不需要的反饋信息，如刷新后的成功狀態(tài)。

5. Snackbar：底部彈窗

Android特有的交互形式，在Google的MD規(guī)范中，將Toast和Snackbars歸為一類(lèi)。有些時(shí)候也有應(yīng)用在iOS系統(tǒng)中，也可以理解為加強(qiáng)版的Toast。

含義：英譯為快餐、小吃。

剖析：Snackbars與toast一樣是從屏幕底部向上出現(xiàn)，但是Snackbar不同的是可以經(jīng)過(guò)用戶(hù)進(jìn)行其他操作而消失。

適用：較多適用于撤銷(xiāo)操作。

三. 總結(jié)

**分析和了解彈窗的類(lèi)別、適用范圍，才能更好的在設(shè)計(jì)中進(jìn)行優(yōu)化與改變。用戶(hù)體驗(yàn)設(shè)計(jì)的重點(diǎn)，是一步步了解用戶(hù)，然后設(shè)計(jì)出適合用戶(hù)體驗(yàn)，滿(mǎn)足用戶(hù)心理需求的產(chǎn)品。把握好彈框設(shè)計(jì)規(guī)范，避免彈框設(shè)計(jì)的誤區(qū)，能更好的幫助你完善產(chǎn)品。

但是，沒(méi)有十全十美的產(chǎn)品，所以要根據(jù)設(shè)計(jì)趨勢(shì)與用戶(hù)需求不斷地進(jìn)行更新迭代，**用戶(hù)反饋，不斷地改良產(chǎn)品體驗(yàn)，才是做出優(yōu)秀產(chǎn)品的前提。

作者微信號(hào)：JJ865477301

歡迎關(guān)注作者的微信公眾號(hào)：「JAYGO」

「超全面的彈窗設(shè)計(jì)總結(jié)」

• 《超全面！這可能是你見(jiàn)過(guò)**全的彈窗設(shè)計(jì)解析》
• 《提升細(xì)節(jié)體驗(yàn)！移動(dòng)應(yīng)用的彈窗設(shè)計(jì)指南》
• 《實(shí)用干貨！UI設(shè)計(jì)師需要了解的 APP彈窗體系》

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

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

設(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)