地理空間數(shù)據(jù)可視化 (Geo Spatial Data Visualization) 是近年來興起的一個熱門領(lǐng)域，越來越多的政府、企業(yè)青睞于通過這種強視覺的形式來展示政績與實力。市場需求的增長也吸引了越來越多的設(shè)計師投身于這個領(lǐng)域。而在這樣一個細分領(lǐng)域，也對設(shè)計師的能力提出了全新的要求。在該領(lǐng)域，我們團隊沉淀出一套固定且可復(fù)用的設(shè)計模式。
QQ 購物號是專門為 QQ 用戶定制的購物平臺，2020 年隨著疫情過后，整體電商行業(yè)開始恢復(fù)階段，QQ 購物號計劃了今年雙 11 大促季活動，活動的業(yè)務(wù)目標是希望強化特殊樣式設(shè)計來促進購買轉(zhuǎn)化，驅(qū)動整體大盤消耗與效果提升。為此如何通過設(shè)計賦能業(yè)務(wù)，從而突破增長的瓶頸呢？
購物號是屬于 QQ 的訂閱號服務(wù)，整體的曝光位置并沒有很好，而且這次大促設(shè)計的落腳點只通過外層的樣式和推送頁面的廣告內(nèi)容進行展示。
以及要如何去滿足不同電商廣告主的投放訴求，和不同素材規(guī)格的投放適配，這都是需要去考慮和解決的問題。
1. 通過品牌關(guān)鍵詞定義視覺情緒版
QQ 購物號用戶群主要還是 00 后為主，這些年輕群體的購物趨勢變化非?？?，審美要求也越來越高！
所以前期思考了大量的關(guān)鍵分別為：活力/期待/年輕/狂歡/心動/發(fā)現(xiàn)/熱愛，最后確定以活力/熱愛為這次大促季的品牌關(guān)鍵詞
2. 不同時期變化
隨著大促運營節(jié)奏的慢慢展開，視覺側(cè)也需要考慮到相應(yīng)的視覺變化去引導(dǎo)用戶的感官，避免用戶審美疲勞。
嘗試前期的預(yù)熱階段通過特殊視覺吸睛，第一眼先抓住用戶的眼球，進入狂歡階段，則可以利用動效加持來進一步吸引用戶。
1. 讓容器層面提升專屬感
通過多方案從常規(guī)到異形多結(jié)構(gòu)卡片探索，這里為了避免品牌標識壓在廣告素材上會有遮擋問題，同時又要突出品牌標識。
所以前期預(yù)熱期選用卡片 F 更能強化品牌感，可以讓用戶更有代入感，當(dāng)?shù)搅丝駳g期選用卡片 G，通過擴大視覺著色區(qū)域，提升品牌專屬內(nèi)容曝光優(yōu)先級，增加用戶吸引力。
2. 利用情感化氛圍與用戶溝通
從前期的分析得出 QQ 購物的用戶群是非常年輕的 00 后，所以整體視覺上需要運用更具年輕和活力的情感化氛圍。
通過品牌字體上使用現(xiàn)代硬朗風(fēng)格，巧妙的融入氣泡元素，提升大促氛圍，在傳播上結(jié)合 QQ 購物的品牌符號。
包括品牌頭像以及卡片的氛圍圖形也采用氣球泡泡，彰顯活力感。整體保持一致的視覺體驗。
對于整體色系上延續(xù) QQ 購物的品牌基調(diào)，輕漸變暖紅色更能營造年輕、購物、活力的調(diào)性，讓用戶更有情感上的共鳴。
3. 通過動效不斷激發(fā)用戶的行動力
整體的動效節(jié)奏通過吸引-激發(fā)-共鳴-行動四重奏來進行，讓用戶更深刻去感知大促狂歡期的感知。
比如在外層入口上通過動態(tài)頭像來吸引用戶注意力，當(dāng)用戶進入 QQ 購物號后，利用帶有大促品牌的禮包彩蛋來制造驚喜感，吸引用戶搶禮包。
再通過卡片若隱若現(xiàn)的動態(tài)圖形去烘托氛圍感達到用戶共鳴，以及行動按鈕的微動效觸發(fā)用戶行動。
4. 高效適配于不同規(guī)格廣告位
QQ 購物支持投放多種廣告位，因此定下整體視覺風(fēng)格后，快速對不同規(guī)格廣告位進行適配復(fù)用。
廣告主提供不同素材規(guī)格均可適配投放，降低廣告主成本，也讓用戶達到視覺的統(tǒng)一體驗
經(jīng)過這次官方活動大促的主視覺風(fēng)格塑造，我們沉淀下來整套視覺框架結(jié)構(gòu)。
通過制定設(shè)計規(guī)范可以讓廣告主自定義皮膚模版，以及分不同行業(yè)模版，比如拼多多五周年的定制模版以及在寒假期間推出的 K12 教育行業(yè)模版。
不僅降低廣告主制作成本，也通過更吸睛的皮膚模版提升促進購買轉(zhuǎn)化，驅(qū)動整體大盤消耗與效果提升！
本次活動的數(shù)據(jù)指標目標達成，整體的增長環(huán)比 19 年的雙 11 和今年的 618 均有了較大幅度的提升！
在設(shè)計策略與運營策略配合優(yōu)化下，11.01-11.11 的廣告主整體預(yù)算消耗超出 4 千萬，完成預(yù)期超出 16%，也提升用戶的轉(zhuǎn)化率。
回顧整個雙 11 大促活動，我最大的感悟是要有全局觀！
前期基于對產(chǎn)品目標的了解，從更高的角度去理清產(chǎn)品思路定下設(shè)計策略，結(jié)合個人設(shè)計手法不斷的打磨細節(jié)。當(dāng)然整個過程會碰撞出很多思考和糾結(jié)，需要不斷的實踐、驗證。
隨著廣告主對品效要求越來越高，未來電商的廣告形式也開始隨著精細化運營的方向發(fā)展，這些變化可能對商業(yè)化設(shè)計師來說，或許是一種挑戰(zhàn)和機遇
文章來源：優(yōu)設(shè)網(wǎng) 作者：土撥鼠
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
工作中我們常常會聽到或在撰寫交互說明時提到“從底部向上出現(xiàn)彈層”、“出現(xiàn)浮層”、展示“對話框”、彈出“彈框”、“出現(xiàn)對話框”諸如此類的話術(shù)。我相信大家對“浮層、彈層、彈框、對話框……”等稱呼常常也會感到困惑。到底什么時候應(yīng)該稱呼為“對話框，什么時候稱呼彈框”，此類相似的組件又是如何分類的，應(yīng)該如何應(yīng)用、如何設(shè)計。
恰好筆者近期在設(shè)計彈出層組件，本篇文章將結(jié)合自己的實戰(zhàn)經(jīng)歷，自己對彈出層組件的理解和設(shè)計經(jīng)驗分享給大家，希望幫助大家對彈出層組件有更清晰的認知和理解。
首先我們看一下彈出層組件的定義：當(dāng)觸發(fā)某項操作時，在頁面上方展示的彈出層容器，容器內(nèi)可展示文本、按鈕、列表、標簽、表單項等內(nèi)容，英文名稱定義為 Popup。
△ 彈出層組件的構(gòu)成
根據(jù)彈出位置的不同，我們又可以將 Popup 組件細分為如下 5 種樣式。
△彈出層組件的 5 種樣式
看到彈出層組件的樣式，想必大家已經(jīng)聯(lián)想到日常用的比較多的組件了，比如“Alert 確認框，picker 選擇器、基于場景的篩選組件”等。彈出層組件是十分基礎(chǔ)的組件，基于該組件我們可以開發(fā)通用性組件以及場景組件。從“形式”角度來看，“浮層、彈層、彈框、對話框……”本質(zhì)上都是彈出層。
“浮層、彈層、彈框”是泛指的稱呼，兩大官方平臺也都根據(jù)自身的規(guī)范對相關(guān)組件進行命名。Material Design 和 iOS 官方規(guī)范中的彈出層組件如下圖所示，并且筆者從“功能”角度出發(fā)整理了組件之間的對應(yīng)關(guān)系。后文會詳述每種組件的定義及應(yīng)用。
△MD 和 iOS 規(guī)范中的彈出層組件
在詳述組件之前，還需要向大家傳達一個概念“模態(tài)”，即平時我們常說的“模態(tài)彈框”（彈框可理解為是彈出層的一種樣式）。并非有一種組件的分類被稱作是“模態(tài)彈框”，而是當(dāng)彈框采用了“模態(tài)”的設(shè)計手法時，我們將其簡稱為“模態(tài)彈窗”。
iOS 官方定義為：
“Modality is a design technique that presents content in a temporary mode that’s separate from the user’s previous current context and requires an explicit action to exit. Presenting content modally can:
Help people focus on a self-contained task or set of closely related options
Ensure that people receive and, if necessary, act on critical information”
翻譯過來即：模態(tài)是一種設(shè)計手法，它使用一種臨時性的模式將用戶之前看到的內(nèi)容與當(dāng)前看到的內(nèi)容進行區(qū)分，并且需要通過明確的操作才能退出該模式。模態(tài)呈現(xiàn)的內(nèi)容可以：
幫助用戶專注于一個獨立的任務(wù)或一組緊密相關(guān)的選項，確保用戶收到關(guān)鍵信息，并在必要時采取行動
由此可見，彈層是否為模態(tài)彈層可以根據(jù)具體的使用場景進行定義。在 iOS 官方中定義的模態(tài)彈層通常包括：Alerts, Activity Views ,Share sheets, and Action Sheets .iOS 13 及后續(xù)的系統(tǒng)中將 Fullsreen 也作為模態(tài)彈層進行使用。MD 中的 Dialogs 組件均為模態(tài)，而 sheets 組件不采用模態(tài)設(shè)計手法。
警示型彈框均采用從頁面中間進行彈層的方式，MD 和 iOS 中組件的樣式略有不同，但其使用場景和功能相同。都是在重要信息提示、需要用戶確認的操作、以及破壞性操作之前進行提示，警示型彈窗會中斷用戶的任務(wù)流程，影響用戶體驗，因此需注意其使用頻率。
△警示型彈框 Alert Dialog
使用場景：通常在系統(tǒng)級信息的提示，例如權(quán)限的獲取、系統(tǒng)通知，需要明確告知用戶的信息，以及破壞性操作前使用。
△警示型彈框應(yīng)用
根據(jù)用戶在彈層中需要完成的任務(wù)內(nèi)容和任務(wù)數(shù)量，又可分為簡單型和復(fù)雜型彈層。
簡單型彈層
常用于在彈層中展示內(nèi)容，需要用戶進行選擇的場景，該場景通常只需要用戶完成一種任務(wù)，比如通過點擊的方式，完成信息的選擇或分享。在 iOS 中采用從底部向上彈層的方式，而安卓平臺多使用在頁面中間彈層的方式。
彈層中是否存在操作按鈕可根據(jù)實際應(yīng)用場景去確定。通常選擇項條目較少或內(nèi)容簡單易于識別時，可不需要「確認」按鈕。而在選擇項條目較多時或需要用戶作短暫的思考才能確認選項時，可增加「確認」按鈕，允許用戶有修改選項的機會。
△簡單型任務(wù)彈層的組件樣式
△簡單型任務(wù)彈層的組件樣式
彈層中信息的呈現(xiàn)方式又可分為“列表”和“網(wǎng)格”兩種，大多種場景下，均可使用列表展示內(nèi)容，更加符合用戶從上到下的閱讀習(xí)慣；而在分享場景下多通過網(wǎng)格的方式將分享渠道展示出來，增加屏顯的內(nèi)容，同時提高用戶查看信息的效率，具體樣式可參考上圖。
使用場景：簡單型彈層多用在信息的篩選、排序和信息確認的場景下使用。且在目前市面上的絕大多數(shù)應(yīng)用中，除原生的安卓應(yīng)用外，大部分應(yīng)用都采用從底部向上彈層和從頂部向下彈層的方式。
△簡單型任務(wù)彈層的應(yīng)用
復(fù)雜型彈層
復(fù)雜型彈層中通常承載的信息量更豐富，包含多種組件，需要用戶完成一系列的任務(wù)。
涉及到信息篩選時，通常采用側(cè)邊彈層組件進行展示，且彈層上的信息僅支持垂直滾動查看，不支持水平滾動查看，且通常采用“非模態(tài)”的手法，方便用戶快速取消當(dāng)前彈層。在 iOS 中并無“Sheets:side”組件，但是在 iOS 系統(tǒng)中，很多 APP 應(yīng)用在復(fù)雜的篩選場景下也都采用側(cè)邊彈層的方式。
全屏彈層會將當(dāng)前頁面中的全部信息遮擋，更方便用戶聚焦于當(dāng)前需要完成的任務(wù)，避免用戶的注意力被分散。通常采用模態(tài)的設(shè)計手法，僅當(dāng)用戶觸發(fā)確認、取消或關(guān)閉操作時，彈層才會消失。一般全屏彈層中需要包含標題、操作按鈕、內(nèi)容區(qū)域。用戶在全屏彈層中需要完成多個任務(wù)，因此內(nèi)容區(qū)域中也會包含多個組件。例如“按鈕、輸入框、標簽、開關(guān)、列表、日期選擇”等。
△復(fù)雜型任務(wù)彈層的組件樣式
使用場景：通常用于完成復(fù)雜任務(wù)的表單信息填寫、內(nèi)容篩選、搜索和內(nèi)容展示。
△復(fù)雜型任務(wù)彈層的應(yīng)用
需要單獨說明氣泡框組件
在 iOS 的官方定義中，氣泡框組件應(yīng)用于 iPad 應(yīng)用程序，在 iPhone 應(yīng)用程序中，通過以全屏模態(tài)視圖而非彈出框形式顯示信息，來利用所有可用的屏幕空間。但是，組件被定義后并不是一成不變的，而是隨實際場景進行應(yīng)用的。例如，在手機端，氣泡框組件更多被用于簡單信息的展示與選擇。
△Popovers 氣泡框的應(yīng)用
小結(jié)：
筆者按照使用場景、信息的復(fù)雜度、功能的相似度等，將彈出層組件歸納為兩大類“警示型和任務(wù)型”，并且枚舉了常用的 MD（安卓系統(tǒng)遵循的規(guī)范）和 iOS 兩大規(guī)范中定義的彈出層組件，方便讀者對彈出層組件有更清晰的了解。需要說明的是，由于業(yè)務(wù)場景是復(fù)雜的、多樣的，各位設(shè)計師也需要結(jié)合實際的業(yè)務(wù)場景和設(shè)計目標，靈活的使用組件。
△彈出層組件的類型與使用場景
1. 設(shè)計目的
首先需要理解我們?yōu)槭裁匆O(shè)計組件，組件最終設(shè)計的目標是什么，筆者從“設(shè)計側(cè)和技術(shù)側(cè)”兩方面談?wù)勛约旱睦斫狻?
設(shè)計側(cè)：規(guī)范的組件設(shè)計，對內(nèi)有利于全公司的設(shè)計師對組件的使用有統(tǒng)一的認知，明確組件的使用場景，避免誤用和錯用組件，并且方便新人設(shè)計師快速學(xué)習(xí)和上手，提高設(shè)計效率。對外也有利于保證設(shè)計上線后的一致性和規(guī)范性，方便用戶對本公司產(chǎn)品建立統(tǒng)一的心理認知。
技術(shù)側(cè)：通用的基礎(chǔ)組件，具有可復(fù)用性，能夠減少重復(fù)開發(fā)，大大提高開發(fā)效率。
組件設(shè)計的最終目標可歸納為保持設(shè)計的統(tǒng)一性，提升用戶體驗，同時提高設(shè)計和開發(fā)的效率。因此，組件設(shè)計是非常有必要的，那么到底如何從 0-1 開始設(shè)計組件呢，下面我們來看組件設(shè)計的詳細思路。
2. 設(shè)計思路
其實組件設(shè)計的基本思路是通用的，不僅適用于彈出層組件，還適用于其他基礎(chǔ)組件的設(shè)計。通常我們會從組件的定義、用法、構(gòu)成、種類、行為與狀態(tài)五個方面進行組件的設(shè)計。
△組件設(shè)計的思路
回歸到本文所講的移動端彈出層組件，組件設(shè)計時需要考慮其“通用性和可復(fù)用性”?；诖嗽瓌t，將彈出層組件進行拆解，如下圖所示。它包括：
△彈出層組件的拆解
從上圖中可看出，本文第一部分提出的 Popup 組件是最基本的彈出層組件，基于該組件可進行任何彈層組件的開發(fā)。因此，在彈層組件設(shè)計時將 Popup 組件抽離出來作為最基礎(chǔ)的組件進行開發(fā)， 還可以進一步開發(fā)通用的彈層組件和高頻使用的場景組件。由于上文中已講 Popoup 組件的構(gòu)成與樣式，且由于該組件相對來講比較簡單，因此不過多贅述。下面以通用組件“Picker 選擇器”和篩選場景下的高頻組件“篩選器 Filter”為例進行說明。
1. Picker 選擇器
定義：用于從一組預(yù)設(shè)數(shù)據(jù)中進行選擇的控件。
用法：
構(gòu)成：標題、按鈕、內(nèi)容（當(dāng)前選項和其他選項）
△Picker 選擇器組件的構(gòu)成
種類：根據(jù)選項間是否存在級聯(lián)關(guān)系可將其分為 2 類，普通選擇和級聯(lián)選擇。
△Picker 選擇器組件的分類
行為與狀態(tài)：狀態(tài)，給出單列選項和多列選項的常態(tài)頁面以及選項被禁用的狀態(tài)頁面。行為，需要定義完整的組件交互邏輯，從入口->彈層出現(xiàn)->選項查看->選擇目標選項->彈層消失的完整邏輯進行說明。
△Picker 選擇器組件的狀態(tài)
△Picker 選擇器組件的交互流程與行為說明
當(dāng)完成以上全部內(nèi)容的撰寫時，可對本組件開發(fā)出的效果進行說明。例如：
2. Filter 篩選器
Filter 組件是基于公司移動端產(chǎn)品均存在的高頻“篩選”場景而總結(jié)的場景（業(yè)務(wù)）組件，其設(shè)計思路和上方描述的通用組件的設(shè)計思路相同，筆者此處只強調(diào) 2 個重點注意事項。
場景組件在設(shè)計時遵循“加法”邏輯，從而提升組件的復(fù)用率。組件內(nèi)容分區(qū)塊進行封裝，從而增加組件的靈活性。
△篩選器組件
在上圖所示的篩選場景中，單類目和多類目篩選若均為高頻的使用場景，那么單類目和多類目篩選組件均可以抽離成組件并進行開發(fā)，且多類目篩選可基于單類目篩選組件進行開發(fā)。但是多類目篩選組件是無法覆蓋單類目篩選組件的，組件開發(fā)不同于設(shè)計稿，設(shè)計稿可將多個類目刪除掉只剩余單個類目，但是組件的代碼邏輯不遵循此刪除邏輯。在原有組件的代碼上修改的開發(fā)成本要高于重新開發(fā)組件。因此，如果要修改多類目篩選組件的邏輯，不如重新開發(fā)出單類目篩選的組件。這也是需要我們牢記的，組件設(shè)計需要從“原子組件到復(fù)雜組件”，遵循由“簡單到復(fù)雜”的加法邏輯。
而在組件開發(fā)時通過“goup”的形式進行封裝，可使組件更加靈活。例如，當(dāng)業(yè)務(wù)場景是需要通過“輸入框”組件輸入篩選條件，只要將 Group 中的內(nèi)容改為“輸入框組件”，即只需修改該 group 下的代碼即可，篩選器組件的其他邏輯仍然可復(fù)用，這就提高了組件的通用性和復(fù)用率。
當(dāng)然，F(xiàn)ilter 組件還需要考慮很多設(shè)計細節(jié)，例如類目名稱是否顯示為當(dāng)前篩選項名稱、重置的邏輯是什么、確認篩選后頁面信息會如何變化、篩選項支持單選還是多選等等。復(fù)雜的場景組件通常是由多個原子組件組合而成，因此組件的邏輯也更為復(fù)雜，組件設(shè)計的整體流程和交互細節(jié)也應(yīng)考慮的更加全面。
文章來源：優(yōu)設(shè)網(wǎng) 作者：土撥鼠
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
本文對2020-2021的色彩趨勢做了淺顯的總結(jié)與運用分析，希望能對大家有所幫助，歡迎一起交流與探討！全文閱讀大概需要12分鐘。
文章來源：UI中國 作者：貳元
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
2021趨勢已悄悄來襲，還不趕快來看這些落地實例...
前言
在這艱難又魔幻的2020年的尾聲，有必要系統(tǒng)匯總下關(guān)于UI/UX的設(shè)計發(fā)展方向，為接下來的2021的開篇帶個好頭。本文在了解這些趨勢的同時，分析特點并舉例落地實例，來幫助大家啟發(fā)創(chuàng)意設(shè)計工作的思考切入點。
流行趨勢跟人們所處的環(huán)境密切相關(guān)，從最初的方塊馬賽克——>追求極度寫實——>扁平風(fēng)——>到現(xiàn)在的質(zhì)感擬物，扁平設(shè)計霸屏的這幾年，設(shè)計風(fēng)又向更立體、豐富、更有層次感的方向發(fā)展，所以說趨勢就是一個輪回。設(shè)計風(fēng)格沒有絕對的好壞，在審美達到一定疲勞時，就會開始出現(xiàn)新的設(shè)計風(fēng)格。每一個新風(fēng)格都值得設(shè)計師去拆解、思考，本質(zhì)都是為了提升更好的交互體驗。
而在進入下一個十年的過程中，我們對數(shù)字產(chǎn)品和體驗的依賴將日益增長，預(yù)測真正勝出的將會是3D動畫和用戶界面/用戶體驗設(shè)計的結(jié)合設(shè)計，5G技術(shù)的發(fā)展，它將重塑了我們以前無法想象的交互方式，這將是一段充滿創(chuàng)意、鼓舞人心的發(fā)展階段。在這里讓我們來看看未來那些不可忽視的設(shè)計趨勢吧。
（注:圖片來自網(wǎng)絡(luò)，均標明出處及作者，若有侵權(quán)請告知刪除）
1、3D與UI結(jié)合
隨著高效且易用的3d軟件工具的出現(xiàn)，3D 元素已經(jīng)開始變得越來越受歡迎，而在這之前，UI界面一直被平面設(shè)計所主導(dǎo)。與 2D 不同，它提供了更為逼真的立體效果，從插畫、動效、電商到平面視覺，在所有的設(shè)計類型中都能找到它，3D現(xiàn)實主義已是各個領(lǐng)域的大勢。
圈中也出現(xiàn)了很多免費或付費的3D預(yù)設(shè)元素及場景組件，幫助3D小白更快地搭建出具有沖擊力的視覺組合。
特點：
? 直觀感受；
? 立體真實；
? 形態(tài)豐富；
▲Izmahsa
▲Mike
▲Tran Mau Tri Tam ?
▲Vikiiing
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
實例應(yīng)用：
各大廠都開始紛紛嘗試在產(chǎn)品中加入3D元素，將自家IP立體化，植入到各個品牌靜態(tài)頁面，加深品牌印象滲入。3D技術(shù)雖然已經(jīng)出現(xiàn)有一段時間了，但是為了保證速度和性能表現(xiàn)，較少應(yīng)用到產(chǎn)品中，隨著軟件技術(shù)的提升，立體渲染產(chǎn)品將開始慢慢運用到更多的界面交互、H5活動中。
▲閑魚、QQ、花椒直播的3D啟動頁
▲得物（毒）的3D空間動效
▲樂無登錄頁
網(wǎng)易云音樂每年的音樂總結(jié)報告都追隨著最新的設(shè)計潮流，今年還可以自由選擇人物形象，增強了用戶的主觀代入感，以下是每年的設(shè)計風(fēng)格變化：
▲2018-漸變插畫、2019-撞色漸變、2020-3D人物場景
▲2020-總結(jié)陳詞H5
▲總結(jié)報告Banner的動效
其中IP立體化最多的當(dāng)屬K12教育領(lǐng)域，除了制作IP周邊外，3D效果能適應(yīng)豐富的運營場景，高度還原現(xiàn)實世界，給小朋友帶來最真實的學(xué)習(xí)互動體驗。
▲洪恩識字（3D學(xué)習(xí)場景）、騰訊開心鼠英語ABCmouse
▲IP在播放兒歌時的互動
值得一提的是今年蘋果發(fā)布的macOS Big Sur除了玻璃擬態(tài)的變化，圖標還加入了3D維度的擬物視覺層次。
蘋果的 mac OS 的人機交互指南中也明確指出：“圖標不僅是裝飾性的，而且在與用戶交流中起著至關(guān)重要的作用，它應(yīng)該傳達應(yīng)用程序的主要目的并暗示用戶體驗?！边@次扁平化和擬物化的結(jié)合，將又要引領(lǐng)一波設(shè)計趨勢。
2、軟漸變（Soft gradients）
過于強烈的漸變不再是趨勢，大多數(shù)設(shè)計師都開始喜歡使用非常簡單和微妙的漸變，如果產(chǎn)品的目標用戶人群需要輕松溫和的視覺環(huán)境，那么此風(fēng)格再適合不過。
軟漸變包括背景、陰影、反光，常與線條平面圖形結(jié)合，應(yīng)用于界面、網(wǎng)站、圖標、icon等設(shè)計中。
特點：
? 低調(diào)溫和
? 微妙漸變
? 清新愉悅
2.1、柔和背景
在設(shè)計網(wǎng)站中我們已經(jīng)看到了許多非常精致，明亮柔和配色方案，混合兩種以上的顏色來創(chuàng)造多彩的模糊背景。它使設(shè)計看起來非常現(xiàn)代、不打擾、清新而令人愉悅，其中畫面內(nèi)容是主要視覺焦點。
▲Vladimir Gruev
▲Sajon
▲Anton Mikhaltsov
▲Ghani Pradita
實例應(yīng)用：
▲咔咔、美柚
2.2、柔和陰影
柔和的彩色陰影使UI有了更微妙的深度變化，在圖標設(shè)計中經(jīng)常需要漸變或陰影來塑造物體，柔陰影使設(shè)計元素更豐富立體，并且它們有助于區(qū)分內(nèi)容之間的層次結(jié)構(gòu)。
▲Ghani Pradita
▲Sèrgi Mi
▲Taro Huang
實例應(yīng)用：
▲有道數(shù)學(xué)（已下架）
▲Uki
3、玻璃擬態(tài)（Glassmorphism）
去年新擬態(tài)掀起了一陣狂熱，但這種模擬受到擠壓的塑料效果（凹/凸層次感），在用戶的閱讀性上可能會出現(xiàn)問題，新擬態(tài)更適合用在局部的少量元素點綴，無法完整地使用在整套應(yīng)用程序中。
▲Alexander Plyut
伴隨著今年蘋果發(fā)布的 MacOS Big Sur 操作系統(tǒng)的發(fā)布，新的擬物風(fēng)格正式回歸大眾視野，整體風(fēng)格應(yīng)用了新擬態(tài)（Neumorphism）的設(shè)計思路，利用大量的毛玻璃質(zhì)感和大量投影縱深感，能很好的突出前景信息，中和了扁平化圖文帶來的生硬不立體感。而Big Sur最新的圖標也加入了 3D 質(zhì)感設(shè)計，設(shè)計語言更為時尚簡潔。蘋果設(shè)計師 Alan Dye 在發(fā)布會上也提到了設(shè)計風(fēng)格轉(zhuǎn)變的原因，主要是希望「降低視覺的復(fù)雜度，讓用戶能夠?qū)⒆⒁饬性趦?nèi)容上」。
而最新的玻璃擬態(tài)則更加注重垂直空間 z 軸的使用，背景多鮮艷色彩，在上空使用隔一層高斯模糊的毛玻璃質(zhì)感，模糊的邊界有細微的淺色邊框，整體效果就是讓元素之間有虛實結(jié)合的特殊空間。毛玻璃運用在界面中對關(guān)鍵信息起到強調(diào)作用，用戶可以看到物體間的層次關(guān)系，哪一層在哪一層之上，就像物理空間中真實的玻璃一樣。
特點：
? 透氣磨砂
? 層級空間
? 簡潔擬物
▲引領(lǐng)新擬態(tài)風(fēng)格的Alexander的最新作品也朝著玻璃擬態(tài)變化
▲Kostia Varhatiuk
▲Ghani Pradita
▲Ibrahim emran
▲Queble
實例運用：
▲毛玻璃視覺可追溯到2007年發(fā)售的Windows Vista，而當(dāng)時的 OS X Yosemite 也大量使用了這種設(shè)計語言
▲最新的MacOS Big Sur操作系統(tǒng)
▲圖標的變化
4、暗黑模式
暗黑模式是白色界面的相反版本，適用于午夜時分。之前用了很長時間微信的暗黑模式，突然切換成白色界面后，就像吸血鬼見到太陽光般刺眼，果然暗黑模式用久了還是比較舒服的。
暗黑模式和之前經(jīng)常提到的夜間模式是有區(qū)別的，簡單來說暗黑模式可以在任何場景下使用，并沒有降低對比亮度；夜間模式則專為夜間場景設(shè)計，重在降低對比度，以降低在暗光環(huán)境下屏幕對人眼的刺激。
特點：
? 突出內(nèi)容
? 減輕干擾
? 沉浸體驗
▲Tom Koszyk
▲Victa Wille
▲Golo
▲https://www.awwwards.com/inspiration/3d-hover-number-reveal
▲Tran Mau Tri Tam ?
實例應(yīng)用：
▲有道詞典
▲愛范兒（ifanr）
最常使用暗黑模式的車載系統(tǒng)：
▲小度車載
暗黑模式的靈感最早引起大家注意的應(yīng)該是抖音，在這之前大部分的應(yīng)用都是白色為主，抖音整體黑色界面帶來的沉浸以及輕打擾體驗還是很棒的，在這之后也相繼出現(xiàn)了以黑色為主的APP設(shè)計：
▲MOO音樂(可手動切換顏色模式)
▲Space FM
5、多彩高對比度界面
受Material Design調(diào)色板的影響，2020年用戶界面趨勢的一定不能少了亮色和熒光色的，可以作為主色也可以作為輔色，簡約的界面中明亮大膽且對比鮮明的色彩一直都處于增長趨勢。熒光色一直是90后喜歡的風(fēng)格，我個人就非常喜歡熒光色，現(xiàn)在要是談到該風(fēng)格的受眾主力軍可是90后啊。
顏色是為界面添加信息和情緒以及使其看起來美觀和吸引人的最有效方式之一，對比鮮明的顏色在白色和黑色界面上都能很快吸引用戶的注意力，這種風(fēng)格已經(jīng)成為清新、酷炫、數(shù)字時代的代名詞，而在2021一趨勢還將會繼續(xù)影響UI、平面、廣告、插畫等領(lǐng)域。
特點：
? 活潑大膽
? 對比鮮明
? 潮流科技
▲Amy Martino
▲Halo Mobile
▲Anastasia
▲Paolo Spazzini
在網(wǎng)站設(shè)計中的應(yīng)用：
▲https://www.theartcenter.nyc/
▲https://www.squadeasy.com/en/
實例應(yīng)用：
▲GoFun出行
▲開言英語
6、抽象幾何元素
從上世紀初開始，抽象構(gòu)成中的簡單幾何形狀就已經(jīng)用于視覺藝術(shù)中，多用于主背景主題或色彩細節(jié)，使用鋼筆工具編輯最簡單的形狀（正方形，圓形、橢圓形），加上不同的顏色或漸變，讓設(shè)計看起來既規(guī)則又有趣。
幾何圖形可以運用到UI設(shè)計中 ，將它們混合在一起以創(chuàng)建馬賽克的效果，形成具有品牌意向符號的記憶點。
特點：
? 規(guī)則組合
? 品牌印象
? 重復(fù)記憶
▲Johnny Nova
▲Vladimir Gruev
實例應(yīng)用：
最近看到的一組原色視覺剛好融合了高對比度+幾何這兩種風(fēng)格，那就是SHINee的正規(guī)六輯合輯《‘The Story of Light’》，采用紅黃藍三色加上圓形、正方形、三角形的大塊面積來打造畫面空間及變化，帶來極具視覺沖擊的音樂色彩與魅力。
▲專輯的主視覺
當(dāng)然，幾何形狀不止用于色彩圖案細節(jié)，在UI界面布局中經(jīng)常使用大塊面圖形，這種設(shè)計方法受到越來越多的關(guān)注。
7、極簡風(fēng)
極簡設(shè)計的前身是2010年代中期精巧又花哨的設(shè)計，這種設(shè)計已經(jīng)存在很長一段時間了，但在2020年，人們每天需要消化的信息量越來越多，所以現(xiàn)在用戶想要盡可能避免“視覺垃圾”，這也是為什么我們會選擇更簡潔專一的界面。
特點
? 專注信息
? 清晰易用
? 簡單操作
▲RonDesignLab
▲Quan
▲BAOLIN
▲Gregory Loshakov
談到極簡主義，就不可避免會涉及到無鍵趨勢，因為按鍵越少就意味著設(shè)計越簡潔，而這種簡化過的設(shè)計將讓手勢操作和語音交互更為流行。
▲Taras Migulko
▲Gleb Kuznetsov?
實例應(yīng)用：
▲夸克瀏覽器的夸克寶寶
8、將視頻應(yīng)用到UI中
在 2020 年，信息的觸達的速度將會變得更快，而視頻是很好的載體，各個年齡段的用戶都喜歡觀看引人入勝的動畫，無論是選擇通過短視頻還是電影的方式來推廣產(chǎn)品，都很好地灌輸品牌理念，建立與受眾群體的關(guān)系，加強用戶忠誠信任感。
特點：
? 營造氛圍
? 類型多樣
? 品牌調(diào)性
▲Fireart Studio
▲Ehsan Rahimi
實例應(yīng)用：
▲moo音樂登錄頁
▲蝦米音樂歡迎頁
9、插畫與3D的界線越來越模糊
藝術(shù)插圖從2017年開始到現(xiàn)在仍然很流行，幾乎適用于任何類型的設(shè)計行業(yè)，是設(shè)計領(lǐng)域中最熱的趨勢之一。插畫的視覺能很好的幫助用戶理解產(chǎn)品背后的故事，為了把故事講好，我們可以創(chuàng)造出一個品牌人物，賦予他人格，為他制造一些故事和沖突，最終幫助我們解決產(chǎn)品問題。這是在產(chǎn)品設(shè)計中講好故事的基礎(chǔ)，至于講故事的方式，在 UI 和 UX 中都有使用，原理一樣只是落地方式不同。
在2018年的蜘蛛俠平行宇宙中我們就已經(jīng)看到了3D與插畫的結(jié)合，藝術(shù)家保留了人物在美式漫畫中的的線條筆觸，把“手繪”的細節(jié)和質(zhì)感都放大到了熒幕上，在劇中還采用對比強烈的大色塊擴大了視覺張力，分分鐘把漫畫書甩到面前，讓人忍不住驚呼，索尼的藝術(shù)家們是怎么把片子做得這么酷！
▲3D人物的畫筆觸感
▲畫面光源處由波普圓點組成的背景
▲紙本漫畫書中的“聲音詞”
▲漫畫經(jīng)典線條
▲Entei Ryu在3D建模使用插畫質(zhì)感
▲Minh Pham ?在ui界面中的嘗試
實例應(yīng)用：
騰訊旗下音樂平臺JOOX最近的概念宣傳片，從MG、三維、定格、插畫多個風(fēng)格之間來回切換，給我們帶來了一個多元的音樂世界。各大視頻網(wǎng)站還搜不到，不能直接鏈接視頻地址，喜歡的朋友可以關(guān)注微信視頻號“UoU_Studio”觀看完整視頻。
在3D開始迅速發(fā)展的階段，二維與三維之間的界限變得越來越模糊，插畫作品也可以具備強互動性，而3D插畫與動效的結(jié)合提供了一種奇妙的新方法，希望能夠看到未來插畫更多的可能性。
10、更多的微交互動效
最后一點，還是要強調(diào)動效在UI中的的作用，微交互最早出現(xiàn)在 2018 年，讓用戶更好地理解系統(tǒng)如何工作，并在引導(dǎo)其獲得更好的體驗方面扮演著非常重要的角色。它們在 UI 設(shè)計中決定了一個 App 或網(wǎng)站是普通還是優(yōu)秀，從點擊反饋、加載等待、導(dǎo)航交互等等，為用戶界面設(shè)計增加了動態(tài)性，交互性和直觀性。
動效起到的作用：
? 引起人們對應(yīng)該做什么或接下來將要發(fā)生的事情的關(guān)注；
? 創(chuàng)造流暢和視覺愉悅的過渡；
? 帶給使用者美觀的享受；
? 指導(dǎo)我們進行復(fù)雜的操作；
? 確認用戶使用旅程中的操作。
▲Jakub Antalik
▲Forever D.
▲Kingyo
▲Eugene Paryhin
▲Leo Natsume
▲Taras Migulko
實例應(yīng)用：
▲GoFun選擇車輛后的頁面轉(zhuǎn)場動效
結(jié)尾：
2020的趨勢在滿足用戶的美學(xué)要求上，側(cè)重內(nèi)容和感情表達，還會根據(jù)不同設(shè)備載體、新的技術(shù)而變化，為用戶提供最大程度的豐富體驗。
借用Adobe設(shè)計副總裁 Jamie Myrold 的一句話：如今設(shè)計師要思考的，絕不僅僅是設(shè)計一款A(yù)pp、網(wǎng)站或設(shè)計工具。我們要思考的是人類的需求、用戶的需求，打造真正人性化、多元化與包容性的設(shè)計。
設(shè)計趨勢還在快速增長變化，有些趨勢總能長期霸屏，未來還將迎來更多新技術(shù)，每個設(shè)計人員都可以找到自己喜歡的方向，不管哪種趨勢最受歡迎，最重要的是如何學(xué)習(xí)并合理地運用到產(chǎn)品中，以產(chǎn)生最大的設(shè)計商業(yè)價值。
文章來源：UI中國 作者：_阿丹a_
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
迪士尼的12條動畫基本原則是傳統(tǒng)動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統(tǒng)動畫（例如角色動畫）設(shè)計的，但在本文中，我們將探討如何將其中的一些原理應(yīng)用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質(zhì)量，彈性。當(dāng)場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結(jié)合。
例如，按鈕的按下狀態(tài)為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態(tài)。除此之外，它還可以應(yīng)用于界面上的所有的交互式元素。
應(yīng)用于按鈕上的擠壓和拉伸
應(yīng)用于側(cè)邊欄的擠壓和拉伸
預(yù)備動作為用戶展示了即將發(fā)生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預(yù)備動作。在UI動效中，懸停狀態(tài)就是很好的例子。每當(dāng)我們將鼠標懸停在元素上時，某些元素都會做出反應(yīng)，表明它是可單擊的，并且當(dāng)您單擊它時會發(fā)生某些事情。
懸?；油ǔ嬖V我們接下來有一個動作發(fā)生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現(xiàn)在滾動/滑動中
在傳統(tǒng)動畫中，時間由繪制的幀動畫來控制。幀數(shù)越多，動畫將越流暢和越慢。時間還可以表現(xiàn)對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設(shè)計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數(shù)界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復(fù)雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續(xù)時間都有很好的解釋。
右側(cè)的過渡會使用戶等待太久
現(xiàn)實世界中的大多數(shù)對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節(jié)奏和緩動標準可以讓你建立一個高效的動效庫。
右側(cè)添加了緩動效果，所以看起來更自然
轉(zhuǎn)場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉(zhuǎn)場決定了元素的放置位置以及在發(fā)生交互時如何對元素進行排版。它將用戶的注意力引向最關(guān)鍵的元素。
這是一個音樂類的APP，轉(zhuǎn)場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現(xiàn)，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。
弧線運動更加生動自然
在動畫中，輔助動畫用于強調(diào)場景中發(fā)生主要動作。例如，角色的頭發(fā)在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關(guān)注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設(shè)計就是一個很好的例子，懸浮的按鈕在靜態(tài)狀態(tài)很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當(dāng)發(fā)生任何交互時，夸張的動畫讓它可以占據(jù)整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當(dāng)車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設(shè)計師深海
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
編輯導(dǎo)語：在一個團隊里，成員之間“協(xié)同合作”是非常有必要的，比如一些崗位沒辦法完全理解設(shè)計師的想法，多溝通可以避免一些不必要的摩擦；在出現(xiàn)問題時，現(xiàn)在自己的環(huán)節(jié)找找問題，再進行溝通；本文作者分享了關(guān)于精準還原設(shè)計稿的環(huán)節(jié)，我們一起來看一下。
UI設(shè)計師作為展示產(chǎn)品形態(tài)的執(zhí)行層，產(chǎn)品上線前走查視覺與交互還原是必經(jīng)環(huán)節(jié)。
設(shè)計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結(jié)好幾次，但是開發(fā)完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。
我們經(jīng)常會聽到身邊的設(shè)計師與開發(fā)哥的一些對話，關(guān)于對齊、大小、間距等設(shè)計還原問題經(jīng)常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結(jié)？
「還原」是指事物恢復(fù)到原來的狀況或形狀，互聯(lián)網(wǎng)中的「設(shè)計還原」是說開發(fā)后實際界面和設(shè)計稿效果有偏差，進行設(shè)計校對。
一直以來，設(shè)計驗收都不太受重視：
不同的項目類型還原度也不同：用戶產(chǎn)品>B端產(chǎn)品>后臺；對于用戶產(chǎn)品最好是能做到像素級還原。
在這個快速發(fā)展、迭代、更新的時代，互聯(lián)網(wǎng)產(chǎn)品的用戶體驗重視度越來越高，而其中的產(chǎn)品設(shè)計還原也成為了工作流中重要的一環(huán)。
我相信每一名UI設(shè)計師，心里應(yīng)該都有一個前端能100%還原設(shè)計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。
而視覺還原的高低與否，則直接取決于設(shè)計——開發(fā)——測試這些環(huán)節(jié)的協(xié)作質(zhì)量；不僅僅影響上線產(chǎn)品的用戶體驗，還影響著作為產(chǎn)品設(shè)計最后一環(huán)的工作質(zhì)量。
經(jīng)過走訪UI/UX設(shè)計師、前端工程師和測試工程師的還原設(shè)計圖的工作場景。
深究原因后，線上效果的失真率其實涉及到設(shè)計、前端開發(fā)、測試這三個環(huán)節(jié)，分析造成這種現(xiàn)象出現(xiàn)的原因大概有以下幾點：
了解開發(fā)依據(jù)哪些規(guī)則還原設(shè)計稿，前期的準備工作是重中之重，設(shè)定好每一個細節(jié)規(guī)則，后期落地還原時才會將頁面的失真率降到最低。
UI 設(shè)計中，設(shè)計規(guī)范是設(shè)計還原一個關(guān)鍵步驟；一個好的規(guī)范應(yīng)該是高效的、簡單易懂的。
設(shè)計規(guī)范通常可以把顏色、字體、組件等內(nèi)容制定成規(guī)范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復(fù)用，后期的維護和開發(fā)；在規(guī)范的輔助下，開發(fā)在搭建全局共用控件時規(guī)則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
3.1.1 色彩規(guī)范
顏色是設(shè)計中最重要的元素，顏色的運用與搭配決定設(shè)計的品質(zhì)感；在 UI 設(shè)計中，顏色的使用規(guī)范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
3.1.2 字體規(guī)范
文字是APP主要信息的表現(xiàn)，尤其是新聞閱讀、社區(qū)APP等制定標準的設(shè)計規(guī)范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。
不同的字體氣質(zhì)不一樣，并且不同場景下帶給人的感受也不一樣；所以需要在設(shè)計的時候考慮到字體的設(shè)計效果，然后在設(shè)計規(guī)范中注明；主要規(guī)范標準字的大小，標準字要注意跟上文的標準色進行組合，突出APP重要的信息和弱化次要的信息。
3.1.3 圖標規(guī)范
在 UI 界面中，具有標識性質(zhì)的圖形就是圖標。作為 UI 設(shè)計中重要的設(shè)計模塊，產(chǎn)品的每個頁面中都有可能存在圖標。
設(shè)計規(guī)范中，圖標一般按照用途分為兩類：應(yīng)用圖標、功能圖標。
圖標還應(yīng)該根據(jù)不同的功能需求設(shè)計不同的狀態(tài)：如常態(tài)、選中態(tài)、點擊態(tài)等。
應(yīng)用圖標：各種應(yīng)用程序的識別標志，在應(yīng)用商店里下載的一些應(yīng)用程序的標志。
功能圖標：規(guī)范中最好標明圖標格式與使用方式。比如 Web 設(shè)計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發(fā)；如果是原生 APP，那么需要標注圖標導(dǎo)出格式與尺寸。
3.1.4 圖片規(guī)范
圖片作為界面設(shè)計的重要組成部分，需要標明尺寸規(guī)范，分為不同用途的種類。
3.1.5 控件規(guī)范
控件是指產(chǎn)品界面中可操作的部件，與組件是有一些區(qū)別的：控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復(fù)選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。
3.1.5.1 按鈕
按鈕有 5 個狀態(tài)：正常、點擊、懸停、加載、禁用。
需要在規(guī)范中分別羅列出這五個狀態(tài)，標注上對應(yīng)的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標按鈕的話，除了上述參數(shù)值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。
3.1.5.2 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。
3.1.5.3 選擇
選擇可分為單選與多選，并且也有五種不同狀態(tài)：未選擇、已選中、未選懸停、已選失效、未選失效項，規(guī)范中需展示出所有效果狀態(tài)。
3.1.5.4 進度條
用于向用戶展示步驟的步數(shù)以及當(dāng)前所處的進程。
3.1.6 缺省頁
常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。
如果UI忽略規(guī)范，前端在不知道有可復(fù)用組件的情況下，很可能每一次都要手動書寫代碼；寫的代碼越多，遺漏掉細節(jié)和犯錯的可能性越大，導(dǎo)致效率降低。
最關(guān)鍵的是——對于今后的迭代，前端又得一個頁面一個頁面修改。
3.2.1 組件的好處
統(tǒng)一性：
高效性：
延續(xù)性：
3.2.2 組件化的特點
3.2.3 組件化分類
我們根據(jù)當(dāng)下現(xiàn)有的業(yè)務(wù)場景和對往后一段時期的業(yè)務(wù)發(fā)展方向進行規(guī)劃，將組件庫的組件類型分為通用組件和業(yè)務(wù)組件；一般業(yè)務(wù)組件庫是不對外的，所以在Ant Design官網(wǎng)只能看到通用組件部分。
3.2.3.1 通用組件
指適用范圍廣，擴大頻次高，可重復(fù)使用多個業(yè)務(wù)且不包含業(yè)務(wù)邏輯。某些導(dǎo)航欄，按鈕，吐司，彈窗等。我們將通用組件細分為五個子類別：基礎(chǔ)組件，導(dǎo)航，數(shù)據(jù)錄入，數(shù)據(jù)展示，操作反饋。
2.3.2 業(yè)務(wù)組件
這類組件對比通用組件而言最大的特點就是包含了一系列業(yè)務(wù)屬性，跟產(chǎn)品功能有重疊的關(guān)聯(lián)性，因此影響到適用范圍可能僅限于于1?2個業(yè)務(wù)系統(tǒng)或特殊場景，且復(fù)使用頻次不高。畢竟使用場景特殊也有限，放出參考意義不大。
2.3.3 組件化搭建流程場景
組件化的搭建在兩種場景下進行：
1）產(chǎn)品立項前就開始組件化，在產(chǎn)品0到1之前，擁有一套組件和設(shè)計規(guī)范。設(shè)計師可以從以前項目的組件庫和設(shè)計規(guī)范直接套用并修改，這樣項目前期設(shè)計做起來更加方便且省時省力少挖坑。
2）產(chǎn)品經(jīng)歷過0到1后，產(chǎn)品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設(shè)計、生成插件庫、驗證開發(fā)。
具體的組件化設(shè)計升級流程我總結(jié)成了下圖：
當(dāng)團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業(yè)務(wù)需求產(chǎn)生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。
組件庫重建之初無法一應(yīng)俱全，是需要后續(xù)設(shè)計師不斷的維護與迭代的。
關(guān)于設(shè)計輸出，現(xiàn)在很多像藍湖、zeplin、Pxcooker這種標注軟件把設(shè)計師從手動標注解救出來，往往把視覺稿在藍湖一扔就完事，前端開發(fā)完界面視覺還原度還是不高。
因為標注軟件只能負責(zé)生成元素的尺寸、樣式，遇到復(fù)雜樣式即使你反復(fù)衡量的一些像素，開發(fā)還是會漏掉——這樣很有可能出現(xiàn)視覺災(zāi)難。
所以，一些復(fù)雜而又關(guān)鍵的頁面我建議可以貼心的做些手動標注，主動告訴開發(fā)重要性和注意點。
我們現(xiàn)在工作中會有兩種標注情景：
3.3.1 運營標注
因為很多數(shù)據(jù)是后臺傳輸?shù)角岸耍袌D片、有文字，每個內(nèi)容都需要給運營設(shè)置一個上傳標準。
3.3.2 開發(fā)標注
開發(fā)標注是從設(shè)計稿落地成代碼的主要參考，除了藍湖提供的標注，我們還需要寫一些重要部分設(shè)計說明，例如：模塊區(qū)分、局部特殊設(shè)計（該內(nèi)容根據(jù)自身產(chǎn)品而確定）。
3.3.2.1 常規(guī)手動標注
3.3.2.2 特殊模塊/頁面劃分說明
復(fù)雜的表單設(shè)計，是很具有代表性的復(fù)雜頁面，根據(jù)頁面的布局進行原型化示例，幫助前端更好的搭建代碼框架。
關(guān)于切圖，切圖之前應(yīng)跟開發(fā)確定好輸出的格式和尺寸，確定應(yīng)該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質(zhì)量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據(jù)實際需要進行輸出。
如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發(fā)溝通好如何實現(xiàn)，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應(yīng)該提前跟開發(fā)溝通好。
設(shè)計-開發(fā)這個環(huán)節(jié)的協(xié)作質(zhì)量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質(zhì)，我們和開發(fā)之間溝通是個棘手又麻煩的歷史遺留難題；設(shè)計師與開發(fā)雞同鴨講從而導(dǎo)致視覺還原度低下的局面，幾乎每天都在上演。
俗話說“知己知彼百戰(zhàn)百勝”，如果設(shè)計師能夠了解一些基本的開發(fā)術(shù)語以及開發(fā)流程，就可以更好的打破溝通隔閡。
那網(wǎng)頁設(shè)計稿的實現(xiàn)具體是怎樣操作的呢？
步驟可以概括如下：
3.5.1 設(shè)計師的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在開發(fā)的工作流當(dāng)中反復(fù)提到的盒子模型。雖然不需要完全了解前端是怎么通過代碼來落地你的設(shè)計稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基礎(chǔ)知識，在「盒子模型」理論中，頁面中的所有元素都可以看成一個盒子，并且占據(jù)著一定的頁面空間。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內(nèi)部結(jié)構(gòu)，二是理解多個盒子之間的相互關(guān)系。
3.5.1.2 盒子模型的組成
每個元素都看成一個盒子，盒子模型是由 content（內(nèi)容）、padding（內(nèi)邊距）、margin（外邊距）和 border（邊框）這 4 個屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。
舉一個真實界面示例，我們在瀏覽器中打開「開發(fā)者模式」可以看到網(wǎng)頁的樣式代碼以及當(dāng)前界面是如何通過「盒子模型」來布局的。
前端并不能簡單的像UI畫圖時一樣，隨意地拖放一個可見元素到某一個位置；他們要通過把每一個元素裝進一個「盒子」中，再去界面中定位它所處的位置。
3.5.1.3 了解盒子模型對于UI的好處
當(dāng)你摸清了前端是如何布局實現(xiàn)你的設(shè)計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題，善用「盒子」，將界面中每一塊布局「盒子化」。
我舉一個示例，如果我們不使用「盒子」，當(dāng)我們在做一個卡片時，前端并不知道UI是如何定義每一個元素的間距；比如，然后將這一個間距套用在他也不知道應(yīng)該設(shè)置為多高的「盒子」當(dāng)中。
所以UI在出稿時就帶入「盒子模型」思維，合理地構(gòu)思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。
優(yōu)秀的設(shè)計離不開開發(fā)人員的落地支持，作為設(shè)計師，協(xié)同開發(fā)人員完成設(shè)計落地也是工作中重要的一環(huán)。
做好以下幾點，站在開發(fā)人員的角度為他們“多想一步”，高質(zhì)量的設(shè)計還原指日可待。
在進行設(shè)計還原的時候我更希望大家把設(shè)計評審的環(huán)節(jié)重視起來，之前也有詳細的講到過《如何進行設(shè)計評審》的，因為我認為評審對于設(shè)計還原的意義是把問題前置化。
通過設(shè)計評審可以把改版視覺變化最大的地方和開發(fā)說明清楚，這些改版布局框架改變都會增加開發(fā)工作量；這個環(huán)節(jié)把握好了，那基本都能實現(xiàn)出來，特殊情況除外，比如前期忽略了一些后臺數(shù)據(jù)的問題。
有些細微的地方需要我們特別像開發(fā)說明，也加深他們的印象，在實現(xiàn)時候就減少出錯；像開發(fā)走讀的時候，只把關(guān)鍵核心點，規(guī)則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發(fā)也輕松一些，就比如前期基礎(chǔ)沒打好，后面深入很難。
設(shè)計師做好會議記錄（記錄問題及解決方案，以及達成的共識），并且在會議結(jié)束后以郵件形式發(fā)送前端們，抄送產(chǎn)品和運營，確保會議內(nèi)容的傳達到位；讓設(shè)計師與前端工程師相關(guān)問題達成一致，提升工作效率。
在開發(fā)緊張環(huán)節(jié)中，即使我們前面所有工作都準備好了，也很難避免開發(fā)不找我溝通；這時候我們要積極回應(yīng)他們，并且和他們一起處理問題。
比如某些難度大一點的頁面，開發(fā)實現(xiàn)效果和設(shè)計稿差異不小；那么這時候，開發(fā)會截一張他們實現(xiàn)的效果圖給你看，這時你就要仔細去找問題，不要一口咬定就是開發(fā)的原因；先溝通具體原因，然后找出解決辦法，如果是標注出現(xiàn)問題，比如標注標死了，頁面不靈活，適配局限性很大。
在視覺走查的時候我們可以把test環(huán)境下的頁面和設(shè)計稿拿出來對比，走查頭部、尾部等位置是否完整統(tǒng)一，按鈕樣式、反饋狀態(tài)、報錯等樣式是否統(tǒng)一；是否有缺少的場景和狀態(tài)，根據(jù)任務(wù)流程對場景和狀態(tài)進行排查，保證設(shè)計的完整性。
這里給大家推薦兩個視覺走查方法：
1）大家來找茬法
驗收的時候，我們需要把開發(fā)實現(xiàn)后的效果截圖，然后再去和設(shè)計稿做對比。
我們可以直接把截圖放在設(shè)計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需要修改地方的參數(shù)。
2）頁面重構(gòu)走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時候一些比較細微的調(diào)整，我們可以雙擊具體的數(shù)值進行調(diào)整，調(diào)整到自己滿意之后再給到具體的數(shù)值給開發(fā)；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確保可用性
設(shè)計任務(wù)流程，進行設(shè)計走查，在移動App端，我們所設(shè)計的應(yīng)用是建立在手指點擊操作的基礎(chǔ)上進行使用的。
我們的手指不像鼠標一樣能夠精確定位和響應(yīng)，所以我們需要在設(shè)計的過程中確?？牲c擊的區(qū)域能夠較為明顯的識別。
4.3.2 確保易讀性
文本內(nèi)容是大部分產(chǎn)品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設(shè)計原理中，格式塔原理一直被廣泛應(yīng)用，它可以很好的梳理界面信息結(jié)構(gòu)、層級關(guān)系，從而提升設(shè)計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。
4.3.3 反饋機制
當(dāng)用戶和產(chǎn)品需要交互時，會使用不同的模式反饋信息或結(jié)果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎(chǔ)上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應(yīng)等細節(jié)
4.3.4 動效還原
動效這塊是產(chǎn)品中比較高規(guī)格的一個存在，所以在使用的過程中一定要謹慎，不能隨意加入多余的動效，導(dǎo)致在使用產(chǎn)品的過程中出現(xiàn)問題。
在我走查的經(jīng)驗多了以后，發(fā)現(xiàn) 最容易造成落地頁面與設(shè)計稿視覺差異的，其實就是顏色與間距還有圖標的視覺錯覺。不要小看這兩個細節(jié)元素，把控不好它們會讓落地頁面效果大打折扣。所以在進行頁面還原的可以著重對比一下幾點:
4.4.1 分割線
在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設(shè)計師在開發(fā)前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。
下面主要以3個主要場景來分點解釋分割線的標注：
4.4.2 投影
陰影作為一個重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現(xiàn)給用戶。
常規(guī)投影與彌散陰影推薦使用css代碼完美實現(xiàn)；特殊情況下還需提前與開發(fā)人員溝通權(quán)衡各種方式的利弊，選擇適合項目產(chǎn)品的實現(xiàn)方式。
結(jié)合自己實際的工作經(jīng)驗和與開發(fā)人員溝通的心得，實現(xiàn)彌散投影的方法，可以通過兩個方法實現(xiàn)：
1）切圖對接開發(fā)人員
雖然切圖可以解決這個問題，但是切圖也有一些弊端，因為每個卡片都使用切圖的話，會使開發(fā)的包變大，可能會出現(xiàn)加載慢、閃退等情況，這些體驗也是很糟糕了；所以在這個過程中的一些問題務(wù)必要提前與開發(fā)人員及項目人員溝通好。
2）CSS代碼實現(xiàn)
常規(guī)情況下，效果都比較好，但是也會遇到一些遇到異常情況，比如不規(guī)則形狀，通常用代碼也比較復(fù)雜，這個時候需要提前與開發(fā)人員溝通切圖情況，避免后期一些問題。
在做設(shè)計的過程中，我們需要更好地理解下游的工作，達到一個高效的溝通。
不管是哪一種方法，沒有對錯之分，關(guān)鍵是要懂得“權(quán)衡利弊”，提前與開發(fā)人員溝通到位；只要是適合自己公司項目且能夠高效還原設(shè)計稿的方法，都是值得一用的。
4.4.3 文字行高
文本間距也是影響落地效果的關(guān)鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。
UI出稿時應(yīng)該注意 文本行高可能導(dǎo)致前端的測量誤差，文本間距主要的原因是 sketch 與 ios 系統(tǒng)中字體的行高不同；最簡單的解決方法是通過手動調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
首先我們要理解什么是行高（line-height）。
我以 Sketch 為例，當(dāng)我們設(shè)置了一個70px的文本，Sketch 會默認給我們設(shè)置文本為98px行高，文本的上下會包含一定的空白像素。
如果UI不設(shè)定行高規(guī)范，落地過程中就會出現(xiàn)以下問題：
行高的解決辦法：
面對行高的問題，我一般會在設(shè)計的過程中，輸出規(guī)范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進行對接落地。
最簡單的解決方法是通過手動調(diào)整 sketch 中字體的行高，業(yè)界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
最近看到了一個新的公式可以同步開發(fā)根據(jù)字號設(shè)置行高。
設(shè)字號為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數(shù) L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意這里適用于單行行高，由于多行涉及到的排版問題不僅僅是行高帶來的，有機會的話可以單獨聊一下。
推薦DoraemonKit 是一個功能平臺，能夠讓每一個 App 快速接入一些常用的或者你沒有實現(xiàn)的一些輔助開發(fā)工具、測試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經(jīng)實現(xiàn)的與業(yè)務(wù)緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺，讓功能得到延伸，接入方便，便于擴展。
4.4.4 視覺重心修正
在設(shè)計上為了保證界面的視覺平衡，往往不是設(shè)計軟件直接精準對齊，我們總是會通過調(diào)整間距、大小或者角度補齊一些負空間，讓畫面保持視覺平衡。
還有設(shè)計中通常向右箭頭來表示模塊入口，當(dāng)我們把箭頭和文字右對齊，箭頭視覺上會更外突；這時候我們會往里面縮進1至2像素，但是切圖完給完全不知情的前端后，設(shè)計師要主動講解一下，或者寫進規(guī)范里。
項目會有些需要展示logo的地方， 有的圓形、有的長方形、有的純文字，尺寸差距比較懸殊。
這種情況下，我們需要給他限制一個高度，在這個高度以內(nèi)，再根據(jù)logo本身的體量來調(diào)整圖形的大小，處理好logo的視覺平衡。
特殊場景在設(shè)計過程中常常會被忽略，等到在現(xiàn)實中碰到才會意識到缺失異常狀態(tài)會非常尷尬，所以大家在完成主流程設(shè)計后，一定也要考慮到特殊場景。
大家可以參照以下幾種場景對設(shè)計進行自查優(yōu)化調(diào)整：
1）網(wǎng)絡(luò)異常
考慮到網(wǎng)絡(luò)異常情況時，通常產(chǎn)品會通過異常狀態(tài)頁面或者交互反饋來告知用戶當(dāng)前的異常狀態(tài)和如何解決問題（解決方案引導(dǎo)、刷新、toast）。
2）服務(wù)器異常
服務(wù)器異常狀況較少出現(xiàn)，時間也較短，通常不提示具體原因，設(shè)計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導(dǎo)。
3）空狀態(tài)
空狀態(tài)指的是頁面中無內(nèi)容，主要的幾個情況，設(shè)計師需要根據(jù)不同的場景給出文案+插畫的表現(xiàn)形式引導(dǎo)用戶：
4）內(nèi)容缺失
內(nèi)容缺失展示效果的考慮，設(shè)定頁面圖片缺失的占位圖。
5）加載頁面的表達方
考慮網(wǎng)絡(luò)加載或者數(shù)據(jù)加載的時候會等待幾秒鐘，通常產(chǎn)品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。
設(shè)計還原的時候最后還還看一下不同機型適配的問題。保證不同機型的界面呈現(xiàn)效果一致。
4.6.1 動態(tài)眼光
手機適配的時候很多設(shè)計師會遇到一個問題，就是在750*1335的屏幕上做的設(shè)計圖；但是適配到640*1136的屏幕上就有元素放不下，所以設(shè)計師在出圖時需要用動態(tài)的眼光去考慮問題。
知識點：在簡單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會比較難，因為要考慮到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2 固定適配內(nèi)容
在簡單的界面中，由于本身界面的內(nèi)容比較少，確定位置就會比較難，因為要考慮到不同的界面內(nèi)容要怎么放才能保持視覺統(tǒng)一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內(nèi)的固定內(nèi)容，再確定自適應(yīng)的內(nèi)容。
4.6.2.1 圖標或按鈕
4.6.2.2 搜索框
4.6.2.3 Y軸間距
一般來說，Y軸的間如果在相近的組件里，都會是固定的，不會有變化。
4.6.2.4 圖片
像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會是間距或者數(shù)量，如下圖所示：
對于比較復(fù)雜的模塊，快速找到將以上所說的固定因素和自適應(yīng)因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機型適配效果不理想的情況。
4.6.3 自適配內(nèi)容
自適配內(nèi)容也給大家梳理出來。
4.6.3.1 文字彈性適配
文字流指在多行文字的情況下，文字數(shù)量變化會影像頁面布局和元素大小，如下圖所示：
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。
當(dāng)文字左右兩邊有內(nèi)容的時候，我們需要標明文字可顯示的范圍，也就是說它最多能顯示幾個字——這種方式可以做到較好的適配，也是做快速常用的適配方法。
4.6.3.2 banner
這里說的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應(yīng)，界面中的元素間距和數(shù)量不變，元素尺寸進行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對于比較復(fù)雜的模塊，快速找到將以上所說的固定因素和自適應(yīng)因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現(xiàn)開發(fā)完成后才發(fā)現(xiàn)某機型適配效果不理想的情況。
假設(shè)視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方?jīng)]理解你的想法？
我感覺可以按照以下幾個方法去做：
設(shè)計團隊內(nèi)部先弄明白改版的意義，畫好標注色值、像素的示意圖和文檔，做好產(chǎn)品原型等任何能讓對方不需糾結(jié)，直接可以上手的工作。
做好前期的準備工作，盡可能的多做思考，完善設(shè)計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產(chǎn)生的設(shè)計還原問題就會大幅減少。
多向開發(fā)同學(xué)請教，即便遇到技術(shù)確實難以實現(xiàn)的情況，不要逃避或者過于固執(zhí)，了解具體原因，不斷累積自己的技術(shù)知識；自己的專業(yè)、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個比較復(fù)雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團隊越大，情況越復(fù)雜。
設(shè)計師團隊或者個人的話語權(quán)如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權(quán)是贏得的，而不是賦予的；想要改善被動的局面，要認清所處的環(huán)境，問題的癥結(jié)，調(diào)整定位，并付出努力；只有證明了設(shè)計確實能夠解決問題，甚至驅(qū)動商業(yè)價值，才會逐步提升話語權(quán)。
完成一項任務(wù)時最重要的是團隊的思維模式是否統(tǒng)一，設(shè)計師在乎用戶體驗，工程師只在乎開發(fā)成本，那問題沒辦法達成一致是很正常的。
想要讓大家認同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產(chǎn)品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。
只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團隊的思路就會有所轉(zhuǎn)變。
設(shè)計師自己可以先按優(yōu)先級去排布還原順序，看這1像素是否對當(dāng)前產(chǎn)品重要性。
在搞清楚產(chǎn)品進度、優(yōu)先級的情況下，記錄所有還原問題，自己標記優(yōu)先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發(fā)同學(xué)共同摸索一套雙方都能接受的清單模式，標明問題，修改建議，重要層級，根據(jù)實際情況詳細說明或者簡要說明，能夠當(dāng)面溝通更佳。
良好的團隊合作氛圍是有效的潤滑劑；好的合作關(guān)系如同一條戰(zhàn)壕里的戰(zhàn)友，哪怕多年后回想起來，也應(yīng)該是一起沖鋒陷陣的光輝歲月。
設(shè)計師應(yīng)該認識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責(zé)任或者互相推諉，逐步打造自己的聲譽和氣場。
一個優(yōu)質(zhì)的項目落地是各部門協(xié)同合作的成果，就像我們玩游戲，后期高質(zhì)量的輸出也需要前期優(yōu)秀的輔助來打鋪墊。
在“協(xié)同作戰(zhàn)”的基礎(chǔ)上，靈活運用規(guī)范、標注和走查的方法來主動推動項目的進行；不僅可以讓設(shè)計稿得到最大程度的還原，也可以提升我們協(xié)作能力和對環(huán)節(jié)的把控能力。
任何問題只要多交流，會避免很多阻塞情況；出于設(shè)計師的角度當(dāng)然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內(nèi)做到最好。
在后期視覺驗收的時候，我們可以換位思考，把自己當(dāng)做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發(fā)修改，減少重復(fù)返工的次數(shù)，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發(fā)節(jié)省時間，反過來也幫我們自己減少了二次驗收的成本。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：郝小七
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
文章來源：tob.design 作者：三魚先生
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在AE的窗口中打開“效果和預(yù)設(shè)”面板，所有和文字有關(guān)的效果都在動畫預(yù)設(shè)中的Text文件夾內(nèi)，共十七種動效類型
將動效預(yù)設(shè)拖動到對象上，即可應(yīng)用動效。
十七種類型分別為：3D文字動效、入場動效、離場動效、模糊動效、曲線動效、表達式動效、填充與描邊動效、圖形動效、亮度與透明度動效、機械化動效、多樣化動效、多行文案動效、擬態(tài)化動效、路徑動效、旋轉(zhuǎn)動效、縮放動效以及字間距動效。
有些效果可以相互疊加組合，理論上我們能做出成百上千種不同的效果。
文章來源：UI設(shè)計 作者：設(shè)計師深海
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
最近公司在梳理整個產(chǎn)品在用戶體驗層面上可優(yōu)化的問題，然后匯總整合。公司的交互專家就提出可以利用尼爾森可用性原則來將所以問題歸類，進行整合。
What？尼爾森可用性原則是什么這么厲害？雖然之前也有聽到過這個原則，但是具體的內(nèi)容并不是很熟悉，于是打開百度開始搜索……
尼爾森（Jakob Nielsen）是一位人機交互學(xué)博士，于1995年1月1日發(fā)表了「十大可用性原則」。十大可用性原則分別為：狀態(tài)可見、匹配現(xiàn)實、用戶可控、一致性、認知易取、防錯、高效靈活、優(yōu)美且簡約、容錯、人性化幫助。
十大可用性原則既可以用來指導(dǎo)Web端，也可以指導(dǎo)移動端，當(dāng)然其他涉及交互的場景也同樣適用。
知道了這些基本信息之后，也看了一些其他大佬對可用性原則的理解和感悟的文章，接下來我自己羅列一些具體案例來幫助理解和記憶這些原則。
系統(tǒng)應(yīng)該在適當(dāng)?shù)臅r間給與合適的反饋，以此讓用戶了解正在發(fā)生的事情。
個人理解：產(chǎn)品應(yīng)該清楚地告訴用戶任務(wù)當(dāng)前的狀態(tài)、流程進度。
案例：
「狀態(tài)加載」是最簡單的狀態(tài)可見的展示，告訴用戶當(dāng)前是加載狀態(tài)，讓用戶在等待過程中不會焦慮
「未讀提示」讓用戶知道有需要了解的信息還是未讀狀態(tài)，讓用戶可以及時了解
「更新提示」在視頻、閱讀、電臺等產(chǎn)品中會用的比較多，讓用戶實時了解更新狀態(tài)
外賣配送信息、快遞物流信息的顯示也是狀態(tài)可見的一種
「操作提示」可以幫助用戶知道自己已經(jīng)操作成功，并且在有效進行中
系統(tǒng)應(yīng)該說用戶習(xí)慣的語言，比如：用戶熟悉的單詞、短語和概念，而不是系統(tǒng)導(dǎo)向的術(shù)語。遵循現(xiàn)實世界的約定，使信息以自然且合乎邏輯的順序出現(xiàn)。
個人理解：產(chǎn)品的文案提示應(yīng)該是用戶熟悉的語言，設(shè)計風(fēng)格應(yīng)該符合目標用戶的喜好，信息的呈現(xiàn)盡量貼近真實世界。
案例：
「特有風(fēng)格」在二次元、金融產(chǎn)品、某類人群專用產(chǎn)品等會表現(xiàn)的更突出，特有的設(shè)計風(fēng)格和專業(yè)的術(shù)語會讓用戶對產(chǎn)品更有信賴感
「模擬現(xiàn)實」在運動軟件、AR游戲中比較常見，讓用戶更有真實感
當(dāng)用戶錯誤地選擇了的某個功能后，系統(tǒng)需要提供一個明確的「緊急出口」，來讓用戶離開其不想要的狀態(tài)，而且無需額外的對話框，支持撤銷和重做。
個人理解：當(dāng)用戶誤操作之后，可以有撤銷重做的選擇，可以后悔。
案例：
「返回、關(guān)閉」就是最常見的讓用戶可控制的按鈕
「撤回」某些聊天軟件的幾分鐘內(nèi)信息可撤回并且支持重新編輯
我們不應(yīng)當(dāng)讓用戶去懷疑不同的語句、狀態(tài)或操作是否在表達同一件事。設(shè)計需遵循平臺的慣例。
個人理解：同一個產(chǎn)品需要統(tǒng)一的設(shè)計規(guī)范，同類型的產(chǎn)品也應(yīng)該遵循基本的用戶習(xí)慣。
案例：
「規(guī)范統(tǒng)一」是指風(fēng)格統(tǒng)一、交互統(tǒng)一、視覺統(tǒng)一
「同類型統(tǒng)一」可以讓用戶在使用過程中更加方便，沒有壓力
PS：網(wǎng)易云音樂和QQ音樂的操作有些不一致，切換使用會稍微不習(xí)慣
通過將對象、操作和選項進行可視化，最大限度地減輕用戶的記憶負擔(dān)。用戶不需要記住對話框中某一部分到另一部分的信息。系統(tǒng)操作的指示信息需要易于被用戶發(fā)現(xiàn)和獲取。
個人理解：就是把需要記憶的信息呈現(xiàn)出來，讓用戶直接確認就行。
案例：
「歷史記錄」保留用戶的查看和搜索信息，方便用戶后續(xù)查看
「關(guān)鍵信息」在購物車中的顯示非常重要，可以方便用戶直接確認下單
「觀看記錄」在讀書、視頻類的產(chǎn)品中非常重要，不需要用戶去記憶上次看到的節(jié)點
文章來源：UI設(shè)計 作者：IAM蒼蒼君
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
日本屋文具大賞，又被譽為“文具界的奧斯卡”。從2013年開始，文具大賞今年已經(jīng)有9屆了，每年都在二、三月公布，想在開學(xué)季購置文具的小伙伴，千萬別錯過！
據(jù)說，今年的大賞由11位評委參與，他們對參選文具的設(shè)計、功能和想法等方面進行打分，共選出40個文具，分別有特等獎、設(shè)計獎、功能獎、創(chuàng)意獎。
下面，數(shù)藝君帶著大家一起來看看吧?。ㄗ⒁馕婧缅X包）
特等獎
吳竹吸墨空筆
今年獲得全場大獎的是吳竹吸墨空筆。這是一支不帶墨水的空筆，被稱作“彩墨神器”！
整套由四個部分組成：空的筆桿，吸墨水的內(nèi)芯、筆栓、小貼紙（可以把你制作的墨水涂上去，貼在筆桿上用于區(qū)分）。
上墨水的操作非常簡單，海綿內(nèi)芯拆出來，插進墨水里，吸到80%左右再裝回筆殼，搞定！
對，除了墨以外，其他所有的東西都有，你可以用內(nèi)芯吸附上任何喜歡的顏料、墨水，然后你就有了一支自定義的筆。
功能獎
回轉(zhuǎn)印章機
回轉(zhuǎn)印章機也是一個很神奇的產(chǎn)品，可以幫助那些不擅長繪畫的朋友印出可愛的圖案。
有很多個圖案可以選，選完就直接印在紙上，跟手寫的簡直一模一樣，是喜歡做手賬的手殘黨的福音！
印章使用的顏料是油性的，可以拿一支水性筆給圖案上色，不用擔(dān)心顏色混在一起。來看看上色的效果吧，反正不會做手賬的數(shù)藝君也心動得不行了！
最關(guān)鍵是，可愛俏皮的圖案特別多，據(jù)說有上百種文字、圖案，應(yīng)用場景廣，可以左滑下方圖片看看哦~
創(chuàng)意獎
便攜便利貼
這款便攜便利貼從外觀上就擔(dān)得起創(chuàng)意獎這個頭銜了！數(shù)藝君第一反應(yīng)還以為是一支筆，沒想到竟然是便利貼！
這款便利貼的創(chuàng)意在于，把一本一本的便利貼變成了卷軸。而且，在硬殼卷軸的保護下，便利貼還不容易破損。
一管里面有兩個卷軸哈，就是說可以裝兩種便利貼，如圖，一種紅的一種白的。
使用起來也很方便，把便利貼卷軸從保護殼里抽出來，拉出一截，撕下來，就可以貼上做筆記了。
還有一個貼心的設(shè)計點就是，這個便利貼中間70%的部分是有粘性的，兩邊邊緣沒有粘性。這樣就可以拿著兩邊沒有粘性的地方，對準了位置再貼。
種類也很多，共有12種便利貼，有6種搭配供選擇，看這個效果，還挺實用的~
設(shè)計獎
雙層透明筆盒
雖然說透明筆盒已經(jīng)不是第一次出現(xiàn)，但這款筆盒的特色在于外層是透明，里邊放置了一個布袋，更便于收納了。
相信很多小伙伴，都曾被透明筆袋“一目了然”的功能吸引到，但大部分透明筆袋很難做到分層歸類。而這款透明筆盒就將以上兩點都兼顧到位了。
便簽獎
可剝離熒光貼
這款便利貼從外觀上特別是涂改帶，但功能上完美解決了熒光筆標記筆記時，畫錯的尷尬問題。
半透明的熒光貼紙，可以撕下來貼在書上的重點知識處，覺得不合適，或者復(fù)習(xí)完畢后，還可以不留痕跡地撕下來，圖書又恢復(fù)了嶄新的狀態(tài)。
不想在圖書上寫字，也可以寫在這個半透明的便利貼上~再也不用擔(dān)心在書上寫錯別字啦！
辦公文具獎
TEAM-DEMI 文具套裝
這套文具包裝沿襲了極簡風(fēng)，純色的小盒子中，包括剪刀、膠帶、訂書機、美工刀、膠水、直尺、卷尺以及SIM卡取卡針。
配合磁吸設(shè)計，包裝盒可以作為收納盒，收納文具時做到完美嵌入，這種設(shè)計真讓人難以拒絕，自用和送人都很有檔次。
橡皮獎
多邊形橡皮
本次大賞中，造型最“古怪”的產(chǎn)品莫過于這款多邊形橡皮了。它以折紙藝術(shù)為靈感，配合3D技術(shù)，造就了多邊形橡皮。
橡皮共有45個尖角，使用完一個角之后，會產(chǎn)生新的一角。一塊橡皮都花了這么新奇的技術(shù)，不愧能獲得這一單項獎。
在官方發(fā)布的視頻中，這塊橡皮可以擦除單詞中的字母。因此，從功能上來說，這款橡皮更適合那些鉛筆繪畫等精細作業(yè)的人使用。
文章來源：UI設(shè)計 作者：數(shù)藝設(shè)
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.bouu.cn
<var id="dmwz7"></var>