這并不是一篇關于設計趨勢的文章，而是一篇關于基礎的設計準則的文章。如果你是一名 UI 設計師，無論你經驗是否豐富，有些設計的基準是需要保證的，有些容易遺忘的細節，需要借助速查清單來進行走查優化。
這份優化 UI 界面的速查清單，就是幫你搞定這件事情的。
首先聲明，一個項目中最好不要使用超過2種主要字體。不過這種原則已經廣為流傳，就不多說了，下面說說更細節的事情：
純大寫的字母文本，要額外拉開字母之間的字間距，提升可讀性。
字重超細的字體要謹慎使用?？梢允褂脺\色，但是要根據字體情況進行選擇。如果你設計的文本是裝飾性也就算的，如果是需要用戶能清晰閱讀的，就要特別慎重，能不用就不用，否則在部分手機屏幕上看起來會非常糟糕。
先說說網頁排版。標題通常分 H1 到 H6 總計6個不同層級，但是通常不會全部用到，你需要確保層級最多不超過 4 個，并且控制它們整體的邏輯和一致性。網頁的首屏和登錄頁面上的大標題，可以用最大的那一級，畢竟，富有表現力的視覺排版是當下趨勢。
但是其他的文本不要和這個標題文本差距太大。英文文本以Chrome 瀏覽器為例，正文使用 16px 和 17px 這種大小，并且保留 12px 文本作為最小文本。
另外，同一個段落中，不要同時使用 16px 和 17px 這樣相近又不同的文本尺寸，會讓用戶感到迷惑。
盡量不要在行高上采用自動行高。通常，現在比較流行的做法，是將行高拉高一些，確保整體版面的透氣性和可讀性，尤其是涉及到大量文本的時候。
在需要突出顯示的部分使用粗體。標題、鏈接、按鈕都在這個范疇內。如果將粗體樣式應用到全部文本，這樣重點就不突出了。
請特別注意文本的色彩?？刂坪脤Ρ榷?，確保任何類型的顯示器上都可以清晰閱讀。在設計占位符文本的時候，這個問題特別突出。
留白對于整體設計的重要性是毋庸置疑的。留白的變化有助于設計師理清元素之間的關系，提供節奏感，增加平衡感。
將一個語義塊和另外一個語義塊分開，最簡單的方法就是在兩者之間增加一條 1px 的線。但是這并不是最好的方法。
我見過不少設計作品中，界面中一個又一個線條繪制的盒子相互嵌套，復雜無比，每個盒子都是用 1px 粗細的線繪制的。但是，如今的UI界面上基本不用這種手法了，大量的卡片替代了以往的各種「盒子」，通過投影和間距來控制卡片之間的關系。
邊距有助于從視覺上來判斷元素之間的親疏關系。當我們考慮一個新聞資訊卡片的布局的時候，它包含有一張圖片、一個標題，還有3~4行預覽文本和發布日期，那么應該如何分組和間隔？標題和文本應該是一組，這一組和圖片、日期的距離更遠一些。聽起來很令人困惑？看下面的圖片你就理解了：
總會有客戶或者產品會想把所有的功能和元素都懟到同一個頁面或者 APP 當中。這個時候，要你讓標題、菜單、文本、特價優惠、社交帳號和電話號碼都齊齊整整地塞到一起，同時還要給每個組件搭配上圖標。
說真的，這種問題總不能避免。這個時候可以使用這個理由來試圖進行溝通：用戶一次接收的信息越少，進行有效操作的可能性就越大。循序漸進地呈現信息，能夠讓人更加愉悅，用戶對于信息的接受性也更強。
用戶永遠都不會費力巴拉地去拆解和分析你的頁面布局，緊密局促的布局也早已不符合主流審美和日常需求了。
如果你設計的是海報、Banner 或者是 卡片 等我們所熟知的視覺元素，那么請注意邊緣留白的設計。如果按照經典的方式來布置（從左上到右下），那么盡量讓上方的留白更大，這看起來會讓視覺更加穩當，并且更加具有視覺吸引力。
Logo、圖像、圖標、背景這些元素決定了整個設計給人的情緒。所以在設計的時候，需要有針對性地挑選和優化。
我并不經常做 LOGO，但是在我的職業生涯中也起碼做過 20 個LOGO。我的經驗是：好 LOGO 很難制作。但是設計師只要遵循基本的原則，就能創建出像樣的 LOGO。
比如仔細選擇配色。我有一次看到一家名為 「VIP catch」 的釣魚用品店，他們使用了紫色的 LOGO，從名字、配色到色彩的選擇都和釣魚這個場景沒有一點關系。如果選對配色，有針對性地加入一些和釣魚相關的元素，其實也就好了。
另外就是，如果你時間有限，就不要試圖給品牌 LOGO 設計一個特定的符號或者圖形了，因為真的很難做好。最好制作成文本 LOGO，通過微調字體來制作。
元素下方的陰影一定不要用黑色。始終基于表層的、前景的元素來選取陰影的顏色和明暗。通常，一個看起來舒適的陰影是通過多個陰影疊加造就的，一個小且明確的陰影，位于正下方，另外一個陰影模糊且彌散，透明度更高。
任何可以矢量化的元素，都盡量制作成為矢量的。從符號、箭頭到 LOGO ，現在都最好制作成為矢量 SVG 格式，方便開發人員嵌入到設計系統當中。PNG 圖標的邊緣模糊，在清晰度越來越高的視網膜屏幕上，矢量圖形元素不僅更加銳利，而且消耗更少的系統資源。
如果你正在為網站處理一組圖標，請盡量確保這些圖標在視覺風格和細節處理上是統一的，看起來是同屬一個「家族」的。這意味著圖標的筆觸寬度、邊框半徑、視覺重量都應該是一樣的。
除了上面的幾個常見的要點之外，我還要額外補充幾點，它們很難直接歸結為一類，但是同樣重要。
很多 UI 界面元素在過去多年的發展過程中，已經形成了認知廣泛的「最佳實踐」。如果在設計這些 UI 組件的時候，采用打破甚至徹底違背「最佳實踐」的做法，比如將圖片+標題+ 文本 的順序打亂，可能會讓人感到迷惑。
熟悉的設計并不意味著無聊，你總能夠在 UI 界面的一些地方找到發揮創造力的地方，而不是在這些有著清晰規則的地方搞創新。設計師和藝術家是截然不同的職業，在設計過程中，創意沖動應該在不干擾用戶體驗的前提下，進行發揮。
在設計移動端 UI 界面之前，應該和開發人員進行充分的溝通，這一點很重要。iOS 和 Android 端的 APP 的尺寸還相對固定，但是如果你設計的是移動端的網頁，那么可能涉及到的頁面尺寸就非常多了，這個時候就要用到斷點非常多的網格系統來進行響應式的設計了。
Lorem Ipsum 在中文中叫亂數假文，它是自動生成的一種占位符。在如今的設計領域當中，直接使用亂數假文看起來非常不專業，因為無論是 Sketch 還是 Figma 當中都有太多的插件，可以幫你生成符合語境的占位符內容。在此基礎上還有另外一個要點，就是展示性的組件內容也不要簡單地復制，盡量使用不同的圖片和配色，讓它們看起來更加真實。
這份UI快速檢查清單目前是比較符合當下 UI 設計行業的需求的，但是它并非是教條，在特定的情況下，你可能不用遵循它。當然，在多數時候，這份清單能夠幫你讓設計更加優秀。
1、字體版式
1.1、注意大寫
1.2、注意超細體的字體
1.3、標題和正文字體尺寸
1.4、行高
1.5、文本和標題的層次結構
1.6、文字對比
2、間距和邊距
2.1、去掉多余的框架和線條
2.2、梳理從屬關系
2.3、少即是多
2.4、屏幕邊緣留白不均勻
3、配色和圖像
3.1、關于 LOGO
3.2、陰影
3.3、圖標和圖像
4、其他設計常識
4.1、避免使用怪異的布局
4.2、布局尺寸和參數
4.3、亂數假文
結語
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
之前我也無意中看到餓了么把「超級會員」改成了「吃貨卡」，感覺還不錯。雖然并不了解餓了么的會員業務，但這次改版體現了一些有趣的設計思路，正好對應了我們在設計上的疑惑點。于是就著該讀者的問題，一起來聊聊其中有意思的點。
比如，如何在同質化的功能上做出一些創新且有價值的改變；如何降低營銷感，把商業需求統一到用戶需求上；如何不需要再糾結今天到底吃什么了……
我們「以為」的，就是真實的嗎？
今天的文章，從一張圖開始。
在《認知與設計》的第一章里，作者提到了關于感知的話題，在影響感知的幾種方式里，第一種就是「感知的啟動」，其中很典型的案例是下面的一張素描，你能看出畫面中是什么嗎？
一條斑點狗。
或者你沒看出來？如果你看到了這只狗，就很難再回頭把這張素描看做隨機無序的點了。就像書里說的那樣，我們看到的很多東西取決于別人告訴我們它是什么。
產品功能也是如此，它告訴了我們這是什么，我們就會這么認為。如果一開始設計的就是吃貨卡，也許很多人不會想到它是會員的變體，而是僅僅當做一個福利卡來看了。對于超級會員和吃貨卡的感知差別僅僅在于定義上的不同，而非本質的改變，這是很有意思的一個點。
拿生活中的一個例子去看，相同的杯子，我們可以叫它咖啡杯，同樣也可以叫它養生杯，當面對不同的叫法時，我們是不是就會產生不同的代入感？
而產品大多數時候都是通過渲染場景、營造氛圍來達到這個目的，我們通常將其稱之為產品定位。
所以產品需要定位，需要一個鮮明的形象，然后讓產品中的所有信息、功能、風格、色彩都去表現它，才能樹立起用戶的認知，帶來深入人心的記憶點。于是，相同的功能在不同產品中的差異除了內容的填充、使用的方法、規則的定義外，還可以改變的就是 —— 包裝。
就餓了么這次改版的「吃貨卡」而言，它本身并非一個新功能，只是「超級會員」的一個變體，會員的本質就是產品根據用戶的投入而給予的特權。所以產品只是集合了這一部分有投入有特權的群體罷了，至于怎么稱呼，會員也好、吃貨也罷，在產品層面都是一樣的。
會員，官方的解釋是：通過正式手續加入某個會社或專業組織的人。
在任何地方，我們都可以成為會員，但不是任何地方，我們都能變成吃貨。所以吃貨卡這個定義，一下子就把強烈的產品屬性透傳了出來，并聯結了我們的目標用戶，會員的「積分」也自然地轉化成了「吃貨豆」，這種概念上的改變，就是一種包裝。
這是我在這篇文章中要聊的第一個點，就是通過品牌塑造來重新包裝一個功能，而包裝的形式要依附于產品定位。
第二大點，我們來聊營銷廣告與產品功能的碰撞。
在廣告濫用和形式多變的今天，我們已經逐漸習慣至無感那些具有豐富色彩和設計元素的廣告內容，以至于可以自動篩選出它們，打上標簽，從我們的視覺中過濾出去。
但總有一些廣告似乎天生具有一種隱秘的商人氣質，帶著精明的窺探，去誘導大家瀏覽、點擊、分享、消費。
廣告是產品的一種營銷語言，而營銷有時就是讓利，以廣告的形式，通過優惠與福利來抓住用戶的心，而用戶往往會認為這是欺騙。那么當商業目標和用戶目標無法趨于一致的時候，我們又該如何讓用戶為產品站臺呢？
首先，對于廣告的刻板印象常源自我們接觸廣告的失敗經驗，其大致可分為三類。
第一類「虛假利益」?？浯蠛锰?，或拿非最終的利益引誘，直到我們了解了詳情才發現自己是個被騙的傻瓜。
于是，產品通過弱化營銷性的信息流廣告，并加上清晰的廣告標簽，公開透明的讓用戶感受到自己被平等地尊重，即滿足商業利益，又解決了用戶的訴求問題，將兩者利益統一。
但這一類并不是我們今天要聊的重點，我們繼續往下看。
第二類「難度操作」，比如那些假的關閉圖標、廣告背景中極小的跳過按鈕、或者在領取福利時的層層步驟，都是用戶在接觸廣告時難度操作的體現。
前兩種對用戶來說無法原諒，而最后一種往往會作為一種營銷策略，去增加用戶獲得獎勵前對產品的投入，比如瀏覽、轉發、消費等，這是沒有問題的，關鍵是用戶是否提前獲知了我們得到獎勵的所有條件。我們厭惡的，是超出我們預期的那些負擔任務。
吃貨卡的任務模塊在優化后就直接展示了任務詳情。但是首頁領任務的提示卻隱藏了任務的重要條件，比如「下 2 單，賺 400 吃貨豆」，實際是兩筆超 20 元的訂單。那是否會存在一類用戶，沒有點擊查看詳情而直接下單，下單之后，發現并沒有完成進度？因為外賣費用沒有超過 20 元。
如果產品是擔心用戶因為 20 元的門檻而不做任務，那么在點擊查看后的任務詳情不是把這一類用戶推向進一步的否定嗎？我們因這樣的手段能夠額外獲得多少增長，同時，又有多少用戶因此對所有的任務失去信任，我們無法準確計算，因為得到是顯性的，而失去是隱性的。比如一些音樂產品的會員機制，用戶辦理好之后想聽某首歌，發現還需要另外再付費，于是卸載了軟件。
另外，改版后吃貨豆的領取方式也對應發生了改變，不是直接的發放，而是轉為點擊領取。
雖然趣味的動效消解了部分用戶對冗余操作的厭惡感，但還是能從反饋渠道中看到用戶對這種強制限時去領取獎勵做法的反感。這種領取模式也可說是一種變相簽到，只不過這種簽到的獎勵不是你通過額外行為主動賺取的，而是在已經得到的情況下被迫操作領取，和支付寶領取積分的方式一樣。限定時間內不領取，還會消失。
游戲積分的領取，之所以有領取操作，是因為積分積攢的寶箱獎勵，是額外的收獲。玩家玩游戲的目的是體驗游戲而不是為了積分與寶箱，這兩者之間是有差異的。
多余的操作看起來增加了頁面的曝光度，帶來了更多的轉化可能，卻「實在」地提高了用戶獲得獎勵的成本，從而間接降低了獎勵的價值，因為投入產出比太低，所以用戶常常寧愿放棄這樣的獎勵。
產品想要讓用戶感覺到方便和實惠，體驗滿意，但又通過這種點擊才能領取的方式，強制綁定用戶與頁面，來觸發用戶的下一步行動。表面上可玩性增強了，實則是體驗感的缺失。
第三類是關于「過度選擇」。交互設計有一本經典的入門書籍叫《Don’t make me think》，描述了如何通過設計幫助用戶理解與操作，來提高產品的易用性。同理，當我們思考營銷在產品中的表現時，難道就不需要考慮用戶了么？
過去的營銷就像過去的產品一樣，以產品實現而非用戶為中心，表現產品的實現方式而不去考慮用戶的心理模型。
比如軟件需要我們命名才能保存，特別是系統自帶的記事本軟件，不僅需要自己輸入文件名，還用 *txt 占了命名位，使用星號讓我們無法直接保存。相比之下，很多軟件已不再需要用戶命名，會直接提供默認命名，還有像 Typora 這類產品，可以自動將我們的第一段文本內容作為默認文件名。
對營銷而言，以實現為中心的設計想法體現在制造了盡可能多的活動類型和規則上，希望觸達不同的用戶。而事實是，在過度選擇的壓力下，很多用戶直接選擇了忽視。
如果去看餓了么會員舊版的設計，我們會發現它有紅包、獎勵金和折扣商品三類福利，三者的關系是相對分離的。
其中的規則是，當我們成為了會員：
所以我們有三種獲得紅包的途徑：領取、購買、兌換。
再看新版吃貨卡的設計，在直接領取與購買紅包不變之外，新版強調以用戶的消費去獲得獎勵，不管是直接兌換紅包或者兌換店鋪的專屬紅包，都是以吃貨豆兌換為核心。相比舊版，將商鋪折扣商品，替換為吃貨豆兌換專項紅包，其實本質是一樣的，無非就是為了提高吃貨豆與吃貨卡的利用率罷了。
在這樣一個前提下，產品增加了紅包類別，給予了用戶更多選擇的自由。雖然隨著紅包的分類維度變多（專享和吃貨聯盟的紅包、特定品牌和分類的紅包、具體店鋪的紅包），產品的規則趨向復雜，但是理解變簡單了，我們也只需要做好兌換這一件事就可以。
復雜的規則仍然可以呈現出簡明的設計，我們不需要用戶來負責過濾這些復雜信息，而應當要求產品，站在用戶這邊，去降低理解成本。自然地，產品與用戶就能并軌而走，商業需求與用戶需求也可統一。
當然，或許也會有用戶反感這樣的功能被活動化，但不得不說，這確實是一個品牌的升級。
這篇文章從幾個角度聊了「吃貨卡」好與不好的地方。
當然它不僅僅是一個會員功能的改版，在概念玩法上也是一種升級。從設計角度看，確實有創意的表現，雖然也有不可取之處，但是它背后的設計思考是值得學習的。
我們知道，設計雖然會受到許多框架和規則的限制，但從問題出發，思考方案的過程才是設計本身最有意思的地方。好比游戲，也是因為規則與框架的限制，以至于才有了如今豐富多彩的游戲形態。
所以即使看向那些常規的功能和成熟的設計，我們也可以融入一些不一樣的東西，站在過去到現在的經驗上，再做出一點改變，使其更具可玩性。
文章來源：優設 作者：呆呆U理
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020年已經過去一大半，這些時間以來，我一直在關注數字設計領域未來的設計趨勢。從年初就開始收集，到今8月份了，我想是時候將發現的一些趨勢風格分享出來，這些風格很有可能繼續延續到2021的產品設計上。
對于UI界面視覺趨勢，同樣需要我們高度重視。畢竟每年改版方向，視覺風格研究是必不可少的一個環節，下面正式開始。
今年在各網站上看到大面積的漸變色設計，相對前兩年來說越來越少，設計上有所克制。大面積的漸變色雖然視覺沖擊力強，但大部分停留在概念中。
從今年設計中我們可以看到設計更加理性與克制，將漸變色彩運用到關鍵功能上，突出強調重要信息。
機票選購界面，將漸變色運用到頭部位置去強調功能。
運用在功能卡片上，突出重點信息。
如上圖，設計上同樣只將漸變色運用在背景上，其他卡片上基本沒有漸變色。
幾何圖形設計是目前運用最多一個設計手法，今年發現一些比較抽象藝術化包豪斯風格幾何圖形，在UI設計中大量運用，且效果還不錯。
這種圖形帶來好處就是記憶性強，應用廣，它不僅可以拓展在品牌包裝，品牌圖形延展，還可以運用在UI設計中。
卡片設計采用一些具有意向符號的圖形，來表達功能的設計，形成記憶點。
品牌設計上，也是重復這種極簡包豪斯風格幾何圖形。將logo元素提取，進行包豪斯風格化，重復運用在設計中。
今年這樣的設計屢見不鮮，大量3D運用在界面設計中，二維的界面已經不再滿足當前設計需要。設計師去探索更多維度學科與UI界面融合，形成一種全新的視覺感官。
uber的概念官網就通過3D來呈現，表達功能亮點。
將二維世界三維化，將是2021年重要的趨勢。目前國內外線上有一些產品，開始在部分功能模塊使用這樣設計手法，如Naver，支付寶等。
可以說是趨勢輪回，毛玻璃的效果又回來了。這也是今年在各網站設計上出現頻次多一些的設計。
新的毛玻璃效果更加去注重功能說明，用在視覺強調的地方。
如上圖設計，毛玻璃運用在頂部關鍵信息上。這樣設計即可減少其他色彩運用，還可以對功能信息進行強調。
毛玻璃效果運用在個人中心，人物頭像位置，進行設計強調。
運用毛玻璃去包裝UI界面，可以提升品質感與神秘感。
將功能與場景融合設計，用戶在使用產品過程中，能產生更多情景體驗感觸。這也是最近今年喊的比較火的一種設計思路。在各網站上，這樣設計出現次數越來越多，設計效果沖擊力強，得到很多設計師的認可。
場景中關鍵人物元素與設計進行巧妙集合。
運用超現實設計手法，將人物與酒店場景進行排版布局。
將制作材料與產品集合。
擬真植物元素與土地進行巧妙集合，在視覺上傳達逼真效果。
雜志化設計風格鮮明，可以有助產品去打造強化記憶點。雜志化設計的優勢可以不受到網格約束，排版使用大字體，同時設計排版上更加個性。我們在做產品概念探索前期，可以多去嘗試這樣的風格。
擬物圖標又回來了，Apple新版本的Big Sur系統，就采用擬態圖標，這也是一個新的嘗試，當然也是一個開始。我們很有必要時刻關注這個趨勢，未來將會在更多設計中看到擬物化圖標的出現。
不過這種風格也不能大面積運用在界面中，我們可以運用在一些關鍵功能入口設計上。
在天氣上的運用，相對之前扁平化設計，目前具有空間的擬物化設計，增加了真實感。
圓形趨勢，我想大家也許會忽略的點，最近幾年設計中，圓形的設計無處不在。它的好處不言而喻，親和力強、場景覆蓋廣，幾乎任何設計都能去用圓形。因此我們有必要去注意圓形運用技巧。
星巴克的web UI概念設計，采用圓形與產品進行集合設計排版。
新擬態趨勢是2020年受到廣泛關注的趨勢之一，這種趨勢大量使用了柔和的陰影和微弱漸變，使設計既具有未來感又具有現實感，并且為熟悉的界面帶來了新的感覺。相對之前大面積濃厚陰影而言，目前新的簡化擬態界面，會克制使用這些元素。
2021年擬態界面，更注重功能與體驗。擬態效果會使用在關鍵功能上，如儀表、按鈕，又或者需要重點強調的地方，避免了大面積使用這種設計手法。
2021年的趨勢相對來說，有繼續延續2020年一些設計風格，這些風格將會在繼續加強，同時我們也有發現，目前越來越多3D元素與二維界面進行集合設計，能更生動傳達功能與將故事，2021年大家務必要注意這種趨勢的延續。
作為設計師，我們對設計的思考不能只停留在表象層面，而更多的需要圍繞信息傳達這一設計的本質功能，以充滿自省的精神深化和反思自己的設計意識，同時要時刻保持對趨勢的敏感度。將新趨勢合理的運用在產品設計中，以產生最大化收益。
文章來源：優設 作者：功夫UX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多時候，設計師需要在公開場合借用幻燈片演示設計作品，或者給客戶展示的設計方案，又或者是需要在文章當中，展示作品，選取配圖。如果你希望你的展示和演講更加具有吸引力，那么可能需要針對這些視覺素材進行處理，讓你的觀眾或者讀者，被內容吸引，被信息打動，能夠 Get 到你所要表達的東西。
今天這篇文章，梳理了 20 個對關于幻燈片/演示文稿的處理技巧和經驗總結，希望能夠幫到你。
在創建任何用來展示的幻燈片之時， 你首先要搞清楚一個問題——你的目標或者目的是什么。明確了這一點，才能做好下一步的設計。
除了了解自己的目標，你還要搞清楚你的觀眾或者你的受眾是做什么，有什么特征，對什么感興趣，會具備什么樣的動機，這樣你在設計的時候，才能夠更加具有針對性。如果是甲方，那么甲方是什么樣的人？你是否要提供一個具有代入感的故事，在最后再進行報價是否合適？搞清楚觀眾，后面的問題你就有答案了。
如果你的幻燈片準備得過長，那么最好大概每20分鐘就需要中斷，適當休息一下，或者調整演示內容的媒體形態，讓你的聽眾可以借此修整，并重新集中注意力。
講故事能夠更好地同用戶建立聯系，保持用戶的參與感，集中注意力。如果用戶無法集中注意力，那么你的展示和設計做得再好都沒有用。你可以參考一些常見的、有效的敘事框架，拿捏好關鍵的因素：
關鍵角色：客戶、用戶、組織、團隊等；
核心問題：挑戰、痛點、風險等；
框架指南：產品、公司、服務等；
完整歷程：解決問題的愿景、具體執行計劃等；
抵達成功：光明的未來、最終的成就等；
這意味著，如果你的幻燈片當中的內容，下面的觀看者無法在 8 秒內消化，那么它可能就失去效果，并且用戶會快速分心。
幻燈片要簡短，不要讓它像書本一樣堆滿信息，你應該提供最快速有效的簡短展示，減少文字，增加輔助的視覺效果，幫助用戶集中注意力。
如果你的文本內容無法進一步增減，那么你需要做的就是梳理出它的層級關系，讓字體的層級來輔助觀看者更快 Get 到其中的信息。我們習慣于快速掃視，而不是逐字閱讀。
凸顯重要內容，控制好字號大小，排版結構，讓觀看者能夠清晰閱讀內容。過于鮮艷的色彩會產生視覺頻閃，對比度過低會讓可讀性極差。
在實際的展示的過程中，展示者在電腦上看到的，和最終在大屏幕上演示的內容是不一樣。演示給下面觀眾的內容一定要簡約直觀，而更多的輔助信息只需要顯示在展示者自己的電腦上，作為提示即可。
提取最重要的信息點，使用更大的展示性的字體來呈現，這是有助于讓這些信息脫穎而出的，而不是簡單地、沒有篩選地鋪陳出來。
信息圖和簡單的數據展示有著極大的差別，信息圖所展示的信息更易于被觀看者理解和吸收，使用信息圖還能讓整個展示過程更加視覺化、富有創意。
我經常會聽到這樣的要求：「這套幻燈片只能有7個頁面，同時我們不能刪除任何內容。」
千萬不要將內容塞到固定數量的幻燈片當中，那是沒有任何意義的。一套用來演示的幻燈片的數量應該是可以增刪的，它們的數量取決于你所要展示內容的多少，以及呈現的方式。對于絕大多數的展示和演講而言，20~30 張幻燈片是一個合理的數量。
留白是制作幻燈片時最容易被忽略的元素，通常而言，我在修改幻燈片的時候，將留白的空間放大三倍，視覺上的呼吸感就正正好好。
好的圖片素材，通常會有著相對充沛的感情和自然的敘事。在你的幻燈片當中，需要采用更加富有真實感的照片，以營造真實的敘事感。不幸的是，這種設計知易行難，絕大多數的圖庫所提供的照片都缺乏這種應有的真實感。當然， Unsplash.com 所提供的照片，相對而言會好一些，而且是免費的。
影響幻燈片視覺樣式的因素有很多，主題、受眾、品牌等等等等，都會有影響。但是不論情況如何，你都應該讓整個幻燈片所采用的字體、圖標、配色、插畫的樣式始終保持一致。其中，最常用的方法是定義整個幻燈片的模板，來協助你保持一致性。
不要把幻燈片用信息全部填滿，可以在其中插入一些可以幫助觀看者「中場休息」的幻燈片，它可以起到過渡作用，也可以幫助觀看者不用一直緊繃著情緒。
轉場動效和動畫可能會成就你的整場演示，也可能讓它淪為一場災難。我的建議是，盡量讓動畫和動效微妙一點，讓它們緊貼內容，對信息提供支撐，而不是喧賓奪主。
對于較長且復雜的演示，讓觀眾看到進度條，了解整個演示的進程是非常有必要的，當他們感受到演示的進程，就能體會到掌控感和安全感。
做好幻燈片之后，一定要自己排練一下整個過程，走一遍之后會讓你對于整個演示過程中，哪里有問題，哪里要改進有更清晰的認知。借助排練來排查問題，迭代展示，非常有必要。
當然，設計幻燈片和設計 APP、網頁是截然不同的，但是設計思維層面上，這幾個領域確實完全相通的。你可以借用各種設計規則和方法來將幻燈片設計得更加合理優秀。
文章來源：優設 作者：Taras Bakusevych
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你平時填寫過的最復雜的表單是什么？調查問卷還是文檔信息錄入？如果一個表單字段內容巨多，結構多變，填寫耗時耗力，那你將如何設計你的表單，使之體驗更佳？
1. 業務復雜，功能較多；
不知道大家是否看過法律合同之類的文件，多則好幾籮筐，少也有厚厚一疊，類似的文檔如果進行線上結構化，勢必要同樣要花費巨大的人力去填寫表單，完成基礎信息的錄入工作，同時，由于錄入的時間不確定，流程不明確等問題，也制約著表單的填寫。
2. 流程較長，操作繁瑣；
多個不同表單之間的互有關聯又相互區別，填寫的時候需要來回查看以確認信息，查閱和填寫相互并行，操作繁瑣。
3. 字段較多，關聯項較多；
幾乎每一個字段都有對應的關聯項，每個單選字段的不同項決定不同的內容，同時，由于字段數量，層級劃分不明確，會使填寫的人失去定位，產生迷惑。
1. 內容分組，分步填寫；
根據業務內容分級，合理運用顏色、間距、字體大小、卡片層級等進行信息分級
2. 實時保存，避免數據丟失，提供草稿功能，避免任務中斷；
3. 字段分組，示意結構，聯動項隱喻；
4. 信息自動帶入，節省時間；
一般表單是與某項功能掛鉤的，信息會在多個入口錄入，因此在填寫長表單的時候，如果能從系統中自動獲取到數據，就可以自動為其填充，可根據業務場景，判斷是否讓其修改和更新。
5. 提供二次編輯功能，防止信息輸入有誤；
一般的長表單在涉及非審批流的時候，可以讓其無限二次編輯，如果是處于審批流，則需要根據業務場景限制其編輯次數或者限定其編輯規則（草稿可編輯，一旦提交則不可編輯）。
6. 提供多人協作編輯功能；
如果一個長表單，需要多個不同的業務域的人來填寫，那么需要協同編輯，并實時顯示編輯的人員信息，同時，為了避免信息丟失和編輯錯亂，在同一個表單下，同一時間應該限制只允許一個人進行編輯，等其提交完后，可允許其他人進行編輯。
7. 實時檢驗；
前端實時校驗字段輸入規則，后端統一校驗信息交換規則。
比如對于數字輸入框的校驗、電話號碼的校驗、身份證號的校驗，應該在前端實時完成，在鼠標離開焦點區域或定位到下一個字段的時候，提示其填寫有誤，這樣做的目的是減少后續修改的次數，在長表單下，統一提示其填寫錯誤會是一場災難。
在點擊保存并填寫下一步或點擊提交信息的時候，就需要跟后端交換數據，驗證錄入的信息，如果不匹配，則提示錯誤，并從上至下定位至相應的錯誤字段。
8. 做好填寫引導功能；
要通過多種方式，引導表單的填寫，
在開始填寫之前，簡要說明該表單的業務目標，大概需要花費的時間等；
開始填寫后，關于每個字段的特殊說明，都需要標注出來，重要的要顯示在頁面上，不重要的就收起在注釋符號中；
填寫的過程中，切記不要到最后才告訴用戶哪里出錯了，重要的信息一定要提示到位，否則一旦出錯，前功盡棄；
填寫完成后，引導其下一步的操作，或者返回至列表。
9. 詳情頁也需要注意信息分級
表單填寫完畢后的產出物就是詳情頁，詳情頁是需要瀏覽的，因此在設計詳情頁的時候，應該本著讓用戶瀏覽方便的原則去設計，需要注意以下幾個點：
結構清晰。是指不要將內容一股腦的全堆在頁面上，要做好信息的分類，同時，注意規劃頁面的層級。
設置快捷導航。如果一個表單是長且復雜的，那么其對應的詳情頁也會變得復雜和冗長，因此在頁面的右側或者頂部設置合理的快捷導航是很有必要的。
1. 提供快速返回頂部的按鈕；
快速返回頂部按鈕的使用要注意場景，如果你的頁面比較長，且沒有分組瀏覽的導航，那就需要設置快速返回頂部的按鈕，但是在存在分組瀏覽導航和頂部懸浮標簽的情況下，不建議使用快速返回頂部的按鈕，因為在填寫表單的時候，使用快速置頂的場景比較少。
2. 提供分組模塊收起展開功能；
當一個模塊混雜著各種信息的時候，單純的模塊分組已經無法處理它的復雜度了，因此需要收起高頻且信息量大的模塊，可以合理的減少頁面的復雜度。
3. 步驟提供信息填寫完成度提示；
步驟條可以單純的作為步驟指示器使用，也可以作為一個表單完成度的提示區域。
4. 重要說明性文字盡量顯示而非收起；
在填寫大量字段的表單時，閱讀表單內容和填寫表單同樣耗時耗力，如果我們將所有的提示信息隱藏在提示符中，一般情況下，用戶不會去查看，但是如果去挨個查看提示信息，則會多花費一個步驟去點擊或者懸停來查看提示信息，浪費了大量的時間，因此如果涉及到重要的提示信息，請直接展示在字段的后面，不要隱藏起來。
5. 產品內組件應該規范統一；
在后臺產品上，關于組件的規范統一，想必是人盡皆知的設計原則，無論是各類平臺型設計組件，還是各個公司自造的設計組件，保持統一和規范對產品設計有著重要的作用，在這里不贅述組件應該怎樣規范統一，因為無論是Ant Design還是其他設計語言，都有詳盡的關于組件的定義方法，我在這里講述一個產品設計更高層面或者更深層面的原因：
組件的規范統一并不僅僅是為了省時省力，而是為了使用戶在使用的過程中達到認知上的統一和行為上的統一，在進行高頻次的操作后，界面的流程或者組件樣式已大致在用戶腦海中形成固定印象，因此在操作相同類的流程時，用戶會有更多的掌控感，試想一下，如果你在操作人事相關的流程后，去填寫績效部分的內容時，發現一個迥異的界面或者彈窗，你肯定覺得這是不是哪里出錯了，甚至會懷疑這是否是同一個系統，目前大多數公司的管理系統經過多次縫縫補補，內部的跳轉邏輯已經異常感人，界面風格也大放異彩，但是使用起來卻無從下手，深感迷茫。
因此大到界面樣式，小到間距大小，產品設計的規范和統一應該是最基礎又不可缺少的原則。
6. 龐大的信息錄入，表單內部要分步填寫，外部可拆分成不同的表單分別填寫；
對付復雜的表單，你需要解決的主要問題并不是填寫方式或者頁面設計，而是信息分級和結構拆分，解決了這個問題，基本上就解決了業務問題，其余部分就跟我們常用的表單一致。
將復雜度降低并不意味著減少頁面的信息，而是通過設計師合理的信息劃分，降低視覺上的復雜度和流程上的復雜度，這樣才會達到當前場景下的「最佳解決方案」。
隨著互聯網信息化的深入發展，復雜是避免不了的，我知道大家都推崇簡潔的設計，但那只是對視覺和樣式的定義，而非對信息的定義，我們所處的世界是復雜的，行業更是復雜的，信息的復雜度與日俱增，想要處理復雜的信息，就需要從復雜中尋求規律，這規律與業務息息相關，
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
按鈕在界面設計中，屬于最基礎的元素部分組成，按鈕設計的精致，整個頁面的品質也會上升不少的檔次。今天給大家分享這篇文章，主要講解在設計按鈕時我們應該考慮哪些因素，包括視覺上，有哪些萬能的方法及公式，能夠正確的制定按鈕的設計標準，來提升整個設計的系統性。
在設計按鈕之前，需要先理解按鈕起到的代表含義。什么地方該加按鈕，什么地方不加按鈕，在系統化設計思路中需要非常有講究。通常按鈕在頁面，主要起到以下三點作用：
1. 某一類型的功能操作
這種比較常見，如一些控件形態的按鈕，比如加減、折疊、展開，下拉等。這類按鈕會起到一些功能形態的作用，常用于交互場景。所以在這類按鈕設計中，應當弱化按鈕形式，重點強調功能，突出主體信息。
2. 下一步的明確指引
當頁面內容信息過多后，用戶容易失去信息焦點，從而忘記下一步操作。信息種類越多，用戶權衡的時間就會越久，用戶選擇罷手及跳出的幾率也會越大。所以這個時候，在合適的地方增添按鈕，能夠很好的引導用戶進行下一步操作，提升整體操作的成功率。其次從體驗層面，也一定程度能起到頁面動線的引導作用，比如下方的一組卡片，在增添了按鈕后行動點很明確，非常有點擊欲望~
3. 固定習慣，明確心理預期
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長期以往用戶就會形成使用這個按鈕的習慣，這樣對提升復訪及固定心智是非常有效果。
所以如果你認為你負責的產品或者是內容，能持續為用戶帶來價值，那么在頁面的關鍵節點，不如將按鈕設計的更醒目。這樣用戶下次再看到這個按鈕時，固定習慣會引導他持續的點擊。
這里我不以按鈕的長相來區分按鈕的類型，如漢堡按鈕或者別的什么的，意義不大。我主要還是想通過以按鈕的功能區分，來劃分類型，這樣大家理解起來更為清晰。
1. 功能性質按鈕
這類按鈕見到的最多，我們常用的APP里，大量都充斥了這類按鈕，這類按鈕會起到重點的功能交互，幫助用戶得到TA想要的信息。其次樣式上面，其實圓形的點擊欲，會更強一些，看起來也更利于點擊。而方型的按鈕，則顯得更為正式、嚴謹。
公式：如果是圓形按鈕，圓角的半徑=高度的50%比較合適，而如果是方按鈕，邊角的小圓角半徑控制在15%以下比較合適，我個人喜好用10%。
2. 聚焦大按鈕
這類按鈕通常見于一些核心頁面的強指引，比如登錄、注冊、提交表單、或者是保存，等對頁面全局進行操作的一些按鈕。需要注意的是，這類按鈕只適合對頁面全局進行操作，而且頁面中大按鈕的數量不宜超過2個，信息盡量需要保持聚焦。
公式：基于@2x，這類大按鈕的高度≥72px是比較合適的，通常的尺寸有 80px、88px、96px，大家可以根據產品面向的人群來定高度，如果頁面面向的人群較為廣泛，我建議采用 88px 或者是 96px 的這種大號版本，畢竟操作起來更為方便。
3. 吸底按鈕
這類按鈕的優先級，在整個頁面屬于最高，頁面的所有信息，都將聚焦在這個按鈕中。由于按鈕是吸底的，所以會一直浮在頁面上，不受頁面篇幅影響控制。
需要注意的是，吸底按鈕一定是頁面最重要的功能，或者是整個頁面的下一步指引，比如淘寶的立即購買，或者是餓了么、美團的立即下單，又或者是常見的充值界面。
公式：基于@2x，吸底的高度≥80px是比較合適，常見的尺寸有88px、100px、112px ，按鈕的大小可以根據內容來定，建議高度保持在72px以上比較合適。這里需要注意的是，吸底的按鈕，需要產出兩套設計稿，一套為常規稿，一套為iPhoneX的適配稿。iPhoneX底部控件的區域高度為68px，所以iPhoneX設計稿的吸底高度=常規設計稿吸底高度+68px
另外在設計按鈕的時候，也別忘了補充按鈕的多個狀態的設計稿。常見的狀態，有以下四種：
1. Normal-正常態
這個為按鈕的正常顯示態，就是正常頁面中的顯示效果。
2. Hover-懸浮態
這個為按鈕的懸浮態，一般只會出現在使用鼠標的時候。當鼠標指針停留在按鈕時，按鈕發出的特殊反饋，則為懸浮態。這類形式在移動端交互中無作用，所以移動界面設計中不需要考慮這個狀態。
公式：正常情況 Hover 態增加 10% 黑色就可以，原理如下
3. Pressed-點擊態
這個為按鈕的按壓態，就是按鈕在被點擊或者是按壓后的效果。
公式：在APP設計中，點擊后的效果我們設一個標準值讓開發實現就好了。常用的值有按鈕減少20%的透明度，或者增添20%的暗度，這兩個都可以。通常我建議在亮色上的按鈕，使用暗度疊加（增添20%的黑色），在暗色上的按鈕，則使用透明度減少（透明度改為80%），實現效果原理參考 Hover 態那張配圖
4. Disable-禁用態
當信息未填充完整，或者是某類條件未到，按鈕會出現不可點擊的狀態，處于禁用形式，這個時候，按鈕就會呈現禁用態。這個禁用態無論是web還是app，很多場景都會用到，所以建議設定一套標準的設計規范，避免重復定義這個效果。
公式：禁用態尺寸及大小不變，僅使用色值做區分。建議使用灰色或者是不透明色，常用的禁用色有#CCC或者#999，需要盡可能把樣式做弱，避免用戶做無效的點擊。
在目前移動互聯網設計中，雖然按鈕的種類很多，但風格變的逐漸統一，更多都是色值及細節上的差異。從大的風格來看，按鈕還是分為這這幾種類型：扁平化、輕擬物、重擬物及游戲按鈕。
1. 扁平化按鈕
這類按鈕我們設計用的最多，信息簡潔，操作方便，形式追隨功能。這里也給大家分享一下我在設計扁平化按鈕的一些經驗，比如高度寬度，以及陰影的色值。
公式：按鈕高度，這個通常是文字字號的2.4倍然后取4的倍數整數，比如字號是24，那么按鈕的高度=57.6，離4倍數最近的是56，所以高度=56，圓角=10%的高度，取整后是6px。
另外如果覺得不合適，也可以單位往8遞增或者是遞減即可，例如 56、64、72、80、88 px
按鈕寬度：如果不是那種全局按鈕，通常按鈕的寬度=最多容納字數的寬度+按鈕高度，就好啦。還是以上面那個例子為例，按鈕高度=56，文字寬度=96，那么按鈕的寬度=56+96=152
2. 輕擬物按鈕
這類按鈕近幾年變的非常流行，甚至QQ、淘寶，都開始大面積使用，因為這類按鈕在保持信息簡潔的同時，仍然有較強的點擊欲，視覺上面也能夠增添頁面的品質感。
公式：漸變方向，建議采用水平漸變，重色在右側，輕色在左側更為合適。陰影色值我之前就寫過，不知道大家還記得么，陰影顏色=按鈕顏色的 Alpha50%，x=0，y=按鈕高度的20%，模糊值=按鈕高度的50%，擴展=按鈕高度的 -15%，高級又簡單，完美！
如果覺得這個彌散陰影太大的同學，也可以自己手動簡單調整下，不礙事。（這個公式僅適用于Sketch，用PS的同學，也可以按照這個邏輯自行研究一下）
另外說一句，實際上這個陰影公式并沒有什么很多的依據，大多數都是我個人原創總結出來的，簡單好用。比如下面的這些按鈕的樣式，用了公式后的效果大家可以自行感受~
3. 重擬物及游戲按鈕
在一些營銷頁面中，按鈕的樣式通常需要做的比較游戲化。游戲化的按鈕，大部分會采取游戲場景中的元素，再采用擬物的手法，來進行打造。
通常游戲化的按鈕，需要重點幾個部分組成，學過素描的同學應該會知道，立體的物體，通常會有幾大特征，分別為高光，亮部，暗部，投影及反光。那么如果我們需要繪制一個在營銷或者游戲場景中使用的按鈕，只需要保證這個按鈕有高光，亮部，暗部，投影及反光的這些特征，然后飽滿一點就，立馬就可以出效果啦。
當然，我舉的這幾個例子都是最基礎版本，如果你想做的更豐富一些，那也是沒問題的，這個可以case by case 來定。
這個沒有太多的公式可以總結，更多的是看設計師的基礎美術水平啦~~
在寫這篇文章的時候，突然刷到了一套新擬態的控件設計風格，有種眼前一亮的感覺。雖然這套設計視覺上很有層次很好看，不過感覺短時間之內，比較難大面積推廣，因為開發實現起來還是會比較耗費成本。
我把源文件保存下來了，對這個感興趣或者好奇這種效果如何實現的同學，可以下載源文件研究~~ sketch、psd、Figma 格式都有。
文章來源：優設 作者：UX小學
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
還記得2019年4月上映的復仇者聯盟4么，漫威電影宇宙的第三階段結束了，電影很精彩，但最令人震撼的是先導版的電影海報！就是那個「五彩斑斕」的黑～
從設計上看，海報的設計師是把光運用到極限了，通過逆光和環境塑造出了酷+神秘的視覺感受。光是一切視覺表現的基礎，是構圖和傳遞調性的關鍵，也是視覺表現重要的組成部分。所以今天就和大家聊聊啥樣的光是一個牛X的光以及如何塑造一個合格的光影？
常見形式1-聚光
△ 圖片來源：小米米家臺燈1S
聚光是最常見光，也是在設計中用到最多的光，通常在塑造一個物體的時候就會用的到。
因為聚光的原因，場景更像個舞臺，凸顯「主角」的存在。具體的原理可以根據下圖去理解。
常見形式2-自然光
自然光其實就是陽光，理論上講其實光源是太陽也是聚光，但由于光源太過于龐大，無法真正的聚焦，所以就把這種光當成一種泛光源就好。在產品設計中也會經?？吹筋愃频墓庠闯霈F，比如行為召喚按鈕：
因為不需要強有力的表現和氛圍的營造，所以通常產品設計中更需要自然光來作為核心光源，通過泛光源去統一控制產品的光影體系就好（發布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會講到）。
常見形式3-逆光
坦誠的講逆光也是聚光的一種，只不過由于角度特殊，呈現的視覺效果也非常不一樣，所以就單獨把逆光拿出來說一說。當畫面需要逆光來營造氛圍的時候，只需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處于逆光的物體了。
小米是典型的逆光氛圍營造高手，但萬變不離其宗，依舊可以從海報里看到相同的方法。
△ 圖片來源：小米傳播物料
通?，F實中的光源并非那么理想，光線的復雜超出肉眼所見。所以我們在繪制的過程需要注意到，可以適當的抽象。舉個例子，自然光是普照的，所以我們抽象為四個小光源平均分布，依次打到物體上：
在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個辦法就可以獲得光影的層級關系，在繪制輕擬態的圖標或者運營活動中更加細膩。
△ 圖片來源：09UI設計工作室-陌陌直播禮物設計
所有的光影其實都是幫助主體塑造體積感，一個合格的立體圖形必須具備：高光/過度色/明暗交界線和反光這四個基本屬性。
然后需要一點超現實主義的手法，把太陽光過濾下，從「赤橙黃綠青藍紫」的色調里提取跟主體和諧的顏色（通常是補色），營造出介于真實與玄幻之間的美妙效果hiahia～
然后再在投影上加一點點色彩傾向，一個完美的黑八就出現啦～按照這種方法，你可以試著去嘗試更多的物體/場景。（下圖是筆者作品「插著紅旗的地球」hiahia）
影響主體的除了光影之外就是材質了，近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫，蘋果的毛玻璃，微軟的亞克力和谷歌的「紙」。
從趨勢上看，材質的引入對產品中拉開層級關系上有巨大意義，以往的設計僅僅是通過光影和焦距來拉開關系，這兩個維度在少量的疊加界面中還能有效果，但到了復雜的多窗口互壓互疊里就不是那么奏效了，所以鐵子們要善于運用材質區分產品顯示的優先級。
△ 圖片來源：Eric Hoffman – Big Sur Mac Icons
△ 圖片來源：JIAJIE – WeSing Live gift
圖標好壞除了造型之外最重要的就是質感了，通常圖標也就是4種形式（如下圖），類似蘋果的系統圖標和抖音直播間禮物的圖標都是最后一種形式。
但如果僅僅是這樣就太水了，既然都說了是干貨預警，那就要拿出哥們看家的本領～此圖是大家關注公號后就會收到的推圖，主體就是一個POI的圖標加上微信的對話框和代表干貨的小星星營造出的氛圍。
刨析下這個圖，三個發光體和底下的投影，通過上文的講解依次繪制完成～
之后就到了amazing的時刻了，打開photoshop找到「濾鏡-模糊畫廊-場景模糊」設置幾個key-point，調試模糊值和透明度/亮度，最終完成對光影的塑造。
空氣中的灰塵相信大家都不陌生，這種情況多數是一束光影從窗戶里射入后，在光的折射下把平時看不到的灰塵統統照了個遍。
如果你是mac用戶一定熟知keynote里的動畫效果「轟然墜落」，這個效果是在模擬物體振動后彈開周圍灰塵，非常震撼。在PPT的設計中你也可以同樣借助光和霧來營造你想要的效果，下圖是我在做工作總結的時候為了凸顯Q4工作采用的辦法。
光影輕擬物在產品設計中的應用面還是很廣的，比如：圖標、數據可視化、插圖等等。而在大量扁平設計時代適量使用會顯得很出彩，當然再好的教程也比不上大家多動手試試練練，所以鐵汁們行動起來咯~
文章來源：優設 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
配色，設計師的世紀難題。從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。UI 的發展從擬物的繁瑣細節中掙脫出來，卻在色彩的展現中放飛了自我。
零售業有個有趣的研究成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我幾年經驗總結的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關注色相選擇條。
細心的同學應該已經發現了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環形模式，所以它實際上就是色環的柱狀展示圖，應用起來和色環沒有實際區別。
接下來就要說到重點，飽和度和明度選擇區，我自己使用的習慣，是將這個選擇區通過黃金三分法的方式切割成等比的 9 個區域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯網產品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側，無人區則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結果。牢記這9個區域的場景劃分，可以幫助我們非常、安全地完成 UI 配色。
在眾多的 UI 設計規范中，色彩部分的介紹，都必然包含三種類型，分別是：
1. 主色的選擇
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于——你想讓用戶感受到哪種情緒，然后通過情緒關聯一個大致的色彩范圍，再進行微調。
在今天的互聯網產品中，主色的應用選擇范圍在拾色器區域的右上角，前面已經有解釋了。這和平面設計中的用色有非常大的不同。
移動端產品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調是無法實現這個目標的，所以今天主色飽和度越來越，比如我們之前整理的一篇總結：
為什么支付寶要換 Logo 顏色？分析下目前 Logo 的主色趨勢
再加上屏幕的 RGB 顯示特性，高對比度，高動態范圍的特質能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區域選出合適的色值。
2. 輔助色的選擇
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環，這里就要派上用場了。我們知道色環是個色彩序列首尾相連的環形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了標準的用色類型，跟著常規方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環的 「角度原則」，越需要被突出的顏色，可以在色環中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產生強烈的操作欲望。
3. 中性色的選擇
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現、便于閱讀的重任。多數新手覺得中性色無關緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的主要判斷依據是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足RGB的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規律在拾色器中進行表現，那么我們就可以得到一個 L 型曲線，我稱它為 「中性曲線」。
掌握對于主色、輔助色、中性色的選擇方法，那么對于UI配色的奧義來說，你已經掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關心它們如何應用，如何配置。
所以，我根據主色和輔助色應用總結了一個配色的四象限表格，再分別看看它們對應的案例：
1. 主色占比大，色彩豐富度高
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關注。
2. 主色占比大，色彩豐富度低
這類配色中，主色的應用占比也大，出現頻率高，鮮有其它顏色出現。比較適用于圖片內容豐富的題材中，或者是相對正式、品牌感強的應用。
3. 主色占比小，色彩豐富度高
這是多數主流應用的趨勢，降低主色占比，留出更多的空間給內容模塊的展示上，突出自身帶有的服務和功能。
4. 主色占比小，色彩豐富度低
通常，會應用這種方式是因為產品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規劃，然后再動手執行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲APP改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
1. 配色流程演示
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現模塊層級，文字信息的權重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區圖標，然后將用戶關注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內容。
2. 其他配色類型應用
根據第一個方案，我們可以再用這個原型來實現其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經不太適用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據四種不同的配色方案，我們就可以得到四種不同的配色結果和風格，在每次設計開始實施前，我們都可以根據這種做法來做嘗試，并選出自己滿意的方案。
要再次強調，UI 配色是極其強調形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調整，并選出合理的那個。
以上是我們關于配色有關知識點的分享，希望可以幫助大家提升對 UI 配色的認識。
文章來源：優設 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：隨著醫療行業與互聯網的聯系日益緊密，醫療行業對產品經理的需求也越來越迫切。在這個特殊行業中，醫療產品經理需要具備哪些能力，應該如何工作，創造哪些價值？本文圍繞醫療產品經理展開，從七個方面展開介紹分析，希望對你有幫助。
越來越多的醫療機構開始考慮設置醫療產品經理這個崗位，但是對于產品經理具體應該做什么工作，可能產生何等價值，以及如何招聘到合適的人才，和這個角色在組織內部如何開展工作，都有很多的困惑。今天我們就簡單聊聊這個話題。
總的來說醫療產品經理還是個非常新，甚至可以說有一些超前的職能，傳統FMCG和互聯網行業的產品經理對應的工作內容和思考方式并不能簡單照搬過來使用。我們需要清空過去在這些行業積累的認知，從醫療經營的原點出發，從下面7個方面思考：
產品經理就是足球場上的中場大將，起到承上啟下，功放轉換的樞紐，具體說有三大作用：
什么是進攻？進攻就是嘗試主動去占據一塊領地。
對營利性醫療機構來說最常見的情況有4種：
那么，又何謂防守呢？簡單來說，就是對應上述各種進攻的應對。
十年前私立醫院還不算很多，也還沒有那么多連鎖診所品牌的時候，事實上大家主要都在忙著跑馬圈地，短兵相接的攻防其實并不多?，F在隨著市場參與者的倍增，慢慢開始出現了小區域內的半正面PK，并且我預計在未來兩年內可能會出現直接內部指名道姓對標的戰斗。
足球場上的三條線是進攻、防守和中場，這里我們所說的三條線，大體對應的是：市場營銷、醫療質量和行政職能三大板塊。產品經理的重要價值就是能夠打通這三條線的隔閡，把整個醫院的資源凝結成有效的市場成果。
醫療產品不等于，不等于，不等于“打包套餐”！這個概念請務必建立起來。
首先要厘定什么是醫療產品。
可以用“三個明確”來界定之：
醫療產品開發的邏輯的源頭就在于評估一種醫療服務是否吻合這三個明確，因此不是所有的醫療服務都可能變成“產品”。
比如我們醫院口腔科有一個非常棒的醫生，專注于牙齒美容，我們稱之為“微笑設計”。這種設計是完全量體裁衣的，我們市場團隊對他的關注點就主要在故事性的傳播，而不是試圖將這種高度個性化、動態化的醫療行為產品化。
簡單來說，對于符合三個明確的醫療服務，我們對其進行產品化的“化”，是一系列有序的動作：
囿于篇幅，這里我們就不展開詳述了。
理想中的醫療產品經理對下面4件事情負責：
很容易看出來，這4種不同的職責恰好也就對應了攻防轉換的價值所在。其中促銷是一個容易被忽視和輕視的事情，“不就是打折然后發個微信（十年前是發短信）推文嘛”——絕對不是這樣，促銷是一門大學問，打折、捆綁、買贈、兌獎、積分凡此種種。不僅花樣很多，更重要的是背后的深層次的思考，是“為什么”。
另外，目前的醫療機構基本上也沒有人比較認真、成體系地做競品追蹤。這樣會失去潛在市場機會，非常可惜。
我認為一名出色的醫療產品經理應該在下面四個方面都具備一定的能力，沒有特別的短板：
特別就同理心和表達能力簡單闡述。同理心，即換位思考，用現在更流行的話說，是場景意識。能否準確地設置出用戶的場景，體會到用戶的感受，會直接決定產品帶給客戶的體驗，進而一系列結果：定價、毛利、傳播ROI、客戶口碑，口碑帶來的新客增長，等等不一而足。
而表達能力則是決定這個產品經理是否能實現“串聯三條線”價值的決定性因素。醫院是一個觀念高度保守，流程高度復雜的行業，很多人雄心勃勃地進來，最終死在“搞不定那些人”上。因此，優秀的表達能力，包括書面和口頭表達能力，是遴選醫療產品經理必須考量的重要因素之一。
我不是危言聳聽：產品經理幾乎要和醫院里所有部門打交道。
常見的如下面這些：
醫療、護理和財務對于產品工作的重要性相信無需贅言。后面幾個呢？
試想，你精心設計的賣點，是你自己拉著每一個潛在客戶去吆喝么？當然不是，客服要幫你介紹，新媒體要幫你寫文章、畫插圖。他們是不是要吃透你的意思？如果涉及填表、兌獎，要不要和客服商量流程？遇到產品的技術較為復雜，需要不需要策劃一些活動幫助客戶直觀理解其價值？最后，當潛在用戶感興趣而打電話給呼叫中心的時候，接線員是否已經被你提前武裝好，能充分回答各種提問了？
至于獨立的數據部門，是我的一個強力推薦。傳統上由財務和病案提供的數據，更多聚焦于“既往”而很少關注“開來”。如果不由同時懂得醫療業務和有商業經驗的數據部門處理，很難直接推動運營的改善和提升。
很多人問我，產品經理屬于市場營銷部門嗎？難道不是屬于運營部，或者醫療企劃之類的部門嗎？
別忘了，市場營銷最基本的范式——4P中第一個P就是產品，Product。只要你所在的醫療機構設置有相對完整的市場部門，就應該在其中設置產品經理崗位?；蛘叻催^來說，如果你準備建制產品經理崗位，從一開始就應該將其設置在市場部內，并從頭開始考慮這個職位所需要的上下游角色和他們之間的銜接。
如前面所分析的，產品經理的后端，一定要有提供數據支持的部門，前端一定要有專業的傳播團隊，這樣才能實現產品的潛力。橫向上，產品經理和他的上級，一定要高度重視與客戶服務團隊的緊密合作。
老實說，現在幾乎沒有多少現成的、成熟的醫療產品經理。因為營利性醫療行業太新了，而產品經理這個崗位在這個行業又是近一兩年剛剛興起的角色。
從招聘角度來說，我建議不要拘泥于候選人必須有醫療背景。我就沒念過醫學院，十一年前入行，就這樣摸著石頭過河，也多多少少做過一些還不錯的產品，有過幾個“爆款”的心得。相對來說，我更看重候選人是否有完整的商業思考邏輯能力。
換一個角度來說，還可以在醫院內部挖掘有潛力的人才，從臨床部門轉型為產品經理。最關鍵的環節在于這個人是否有足夠強烈的興趣。世上無難事只怕有心人，有醫學院背景的人才，只要對產品工作發自內心感興趣，就有很大的轉型成功概率。
文章來源：人人都是產品經理 作者：易亮
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
「空間陳列法」是說先構建一個空間，然后將主體元素用合適的形式陳列出來。
這是隨著手機興起而真正流行起來的一招，因為PC時代都是寬大的橫屏設計，適合展現視野開闊的大場面，像大漠、海邊等等，而「空間陳列」作為小場景，在PC端就顯得不大氣，因此使用較少；而手機端卻剛好相反，瘦長豎屏就適合表現長焦特寫的小場景，像微距下的花鳥魚蟲等等，這時「空間陳列」就用的恰到好處。
如圖所示，同樣的產品展示圖，在PC端就顯得單薄，版面空缺，整體不飽滿；而在手機端則用的剛剛好，確實這種長焦特寫、微距放大的陳列小場景就是手機屏的最愛，所以在手機時代，空間陳列圖才會呈現井噴式增長。
其實合成、三維和攝影都可以實現「空間陳列」，但本書還是以合成為主，而合成的難點就在于如何將產品和空間進行自然融合，不能有違和感。
若想合的天衣無縫，第一步就是要做到「透視準確」，而透視作為構圖中的重要知識點，可以說是無處不在，在前面的章節里也多次提及。我們只有掌握透視的變化規律，才能準確表現出元素的空間關系，如果透視不對，那空間將會失真，下面就來詳細講講這個理性知識點——透視。
日常生活中，當我們看周圍事物時，會有遠近、高低、長短、寬窄等不同，這是由于距離、方位等差異在視覺中呈現的不同反映，這種現象就是透視。透視學的出現可以幫我們非?？茖W的表現各種空間感和立體感，它廣泛用于繪畫、建筑、環藝、設計等諸多領域，而常見的透視共3類：空氣透視、散點透視和焦點透視，這3類的側重點各有不同。
空氣透視又稱「色彩透視」，由于空氣介質的存在（雨、雪、霧、煙等），使人們看到近處景物比遠處的輪廓更清晰、色彩更飽滿的視覺現象，例如下方海報中的「煙雨蒙蒙」，這種近實遠虛感就是典型的空氣透視，隨著鏡頭拉遠，山川也變得越來越模糊。
散點透視則是中國畫特有的一種透視類型，例如下方的《清明上河圖》就是這類透視的代表作，在這五米長的畫卷中，很難找出畫家的具體觀察位置，好似在移動中作畫，每到一處畫一部分，最后拼接起來，這種視點不斷移動的畫法就是散點透視，散點透視適合表現景色的波瀾壯闊，重在寫意，體現一種氣勢和意境。
而焦點透視才是本文重點，它是透視學中的核心理論，也是西方繪畫所遵循的透視原則，最早研究透視就是從這里開始，如果散點透視是「寫意」，那焦點透視則「寫實」，一切都以客觀還原為準。
例如名畫《最后的晚餐》，所有視線都匯聚一點（稱為滅點），營造出一種立體空間感，這些就像自己身處畫面中央所看到的逼真景象。
而我們在設計中常說的透視也都指「焦點透視」，這是我們需要掌握的重中之重。記得高中學習素描時，老師就說畫靜物要「近大遠小」，其實就是對焦點透視最為形象的描述，例如草地上的奶牛，離我們越近就越大，越遠則越小，正是這種近大遠小的透視變化才使場景有了空間和層次。
在介紹焦點透視前，我們先說說透視中一個很重要的影響因素——觀察視角。視角即指人眼（稱為視點）在觀察事物時視線之間所形成的角度。
如下圖所示，其實就是人眼觀看角度的變化，常見有3種：當我們平視前方時就是「平視視角」；仰頭看時則是「仰視視角」；低頭看時便是「俯視視角」。
其中平視時人眼和物體形成的假想連線稱為「水平視線」，這是判斷視角高低的參考線。
當我們將產品放入空間時，就要根據陳列形式選擇合適視角，從下方的示意圖中能看到，三種視角給人的感受都不相同：
而上圖的仰視和俯視都屬于小視角，即產品視線和水平視線的夾角較小，這是設計中的常見視角，大概就是把頭微微抬起或低下時看到的場景，這時畫面最自然也最舒服。反之若視角過大，即頭抬的很高或壓的很低時，這時產品的形變就很夸張，顯得刻意、不舒服。
說完3種視角，現在正式講解焦點透視，一般根據物體滅點的數量不同，焦點透視又分3種：平行透視（一點透視）、成角透視（兩點透視）和斜角透視（三點透視），它們都有各自的透視效果和適用范圍，但若鋪開講會很復雜，因此下面就結合「空間陳列」進行介紹。
用立方體簡單說明，就是有一面與畫面平行，這時物體的厚度邊線若向內延伸，最后都會匯聚到1個點上，因此又稱「一點透視」。這是最簡單也最易掌握的一種透視形式，其中匯聚點稱為「滅點」，而滅點所在的那條線則是「視平線」，即與人眼等高的一條水平線。
再來看看平行透視在生活中的場景呈現，如圖所示，將各種景物進行前后連線并延伸，最后都是匯到一點才消失。平行透視適合表現場景縱深，給人一種正式感和平和感。
電商中的產品展示也一樣，例如下方示意圖中，不管哪種視角，產品和立方體都是正對觀眾，讓人覺得擺放角度正正好。
總體來說平行透視只有1個滅點，變化并不多，視覺表現單一，沒有太多的空間變化，基本就是從正面來表現整個場景，因此上手簡單，只要確保前后連線都匯聚一點即可，這樣畫面各元素也會顯得整齊。但有時這種正視會讓畫面缺少層次感，顯得很平，此時可嘗試俯視視角或者強化背景的空間縱深。
下面展示平行透視在3種視角下的應用案例，注意觀察不同視角下的產品呈現和透視變化，雖然微妙，但每種視角確實給人不一樣的視覺感受。
平行平視
當畫面為平行透視和平視視角時，這時的觀察位置很正。如下圖所示，空間和產品都顯得有些平整，雖然場景的立體感較弱，但視覺舒服協調，表現起來也相對簡單。注意平視的「視平線」基本位于主體元素的中心處，即是說人眼此時正對前方物體的中心，這樣才會有平視效果。
平行仰視
當畫面為仰視時，一般視角都不會太大，微微仰視即可，這樣視覺才舒服。如下圖所示，其實和平視比起來，小角度仰視的透視變化并不明顯，沒有夸張形變，但依然能體現空間和產品的高大。此時「視平線」位于主體中心靠下的位置，這時人眼明顯是從下往上看。
平行俯視
如果覺得畫面的層次感和立體感不夠，那就嘗試下俯視視角，如下圖所示，由于俯視時我們能同時看到物體的頂面和正面，這樣就能表現物體的厚度，立體感也明顯增強。而畫面的「視平線」則位于主體中心靠上的位置，這時人眼就是從上往下看，但同樣屬于小角度俯視。
平行透視的俯視還有一種特殊情形——正俯視，即視角為90°的俯視，這時我們是從物體的正上方低頭往下看，如下圖所示，當產品平放桌面時，正俯視能清晰看到產品的全貌。
在空間陳列中這是一種常見視角，上手簡單，展現清晰。例如下方案例中，俯視下的產品擺放非常靈活，根據構圖需求可以工整 ① 也可以隨意 ② ，并且產品多以正面展現為主，整體直觀、舒服。
以上都是產品的陳列案例，其實正俯視有時也會用于場景呈現中，如下圖所示，視點位于場景的正上方，有點類似無人機的俯瞰拍攝，這種看似「刁鉆」的視角能給畫面帶來獨特的戲劇效果，令人印象深刻。
空間平行透視
除了3種視角，這里還要介紹一種平行透視的常見形式——空間平行透視，這種形式即畫面的正前方有個類似方盒的縱深空間，而人物或產品就放置在空間里。
如圖所示，該形式也有視角的3種變化，但為了確保視覺的自然舒服，仰視和俯視也都是小角度的上下擺動，所以產品的透視變化并不明顯，場景呈現也沒有很夸張。
為何要將該形式單獨列出？因為它非常適合手機端的豎屏構圖。
手機不像PC，無法通過寬屏來表現視野開闊的大場面，手機屏更適合長焦特寫的小場景，但這樣有時就會顯得左右擁擠不透氣，這時「空間平行透視」就剛好取長補短，通過「深度」刻畫將狹窄空間的縱深感體現出來，最終使觀者視線在前后維度上有了延伸和舒展。
該形式正是利用平行透視的縱深性，才緩解了手機屏的擁擠感。下面分視角列舉案例，要注意不管平視、仰視還是俯視，空間里的所有元素最后都要匯聚一點，這樣透視才合理，縱深效果也最好。
3種視角中，空間平視最常見，因為這種方方正正的空間展示最適合手機的豎屏構圖，看著最舒服，上手也簡單，易于搭建。在平視下，由于沒有視角的高低變化，空間基本位于人眼的正前方，無任何偏移，擺放角度非常正，構圖給人一種穩定感，元素也沒有夸張形變，組合方便，真實自然。
對于「空間平行透視」，「深度」刻畫很關鍵，我們要根據版面構圖選擇合適的深淺。例如下方案例中：① ② 的深度淺，空間相對封閉，適合展現小空間，給人溫馨感和趣味性；而 ③ 的深度深，空間開闊，適合展現大空間，這樣能讓視線更舒展，畫面更透氣。
在仰視下，我們是抬頭向上看，這時空間顯得高大，給人強烈的氣勢感。如下圖所示，視平線貼近地面，像是我們蹲著向上看，這種仰望視角，建筑和人物都很高大，再加上強烈的縱深感，雖然空間左右依然狹窄，但上下和前后維度卻變的非常開闊，畫面通透。
空間仰視能渲染氛圍，提升場景的戲劇效果，突出視覺沖擊力，但要注意仰視視角不能太大，否則夸張的仰視效果反而給人一種壓抑感。
在俯視下，視平線處于空間中心的上方，類似我們站在高處往下看，如下圖所示，這時空間顯得立體，遠近的各類元素也能得到清晰展現，層次分明。
俯視適合展現空間的全局觀，也讓各物體有著豐富的體積感。除非有特殊的構圖需求，不然和仰視一樣，俯視視角不能過大，否則俯視就變成俯瞰，會產生遙遠的距離感，空間也壓縮的厲害，進而導致形變和失真。
還是拿立方體舉例，就是物體與畫面形成一定夾角，這時物體的所有邊線分別向各自方向進行延伸，最后會在視平線上形成一左一右2個滅點，因此又稱「兩點透視」。這類透視最接近我們日常的觀察角度，即是說大部分時候，我們看到的物體都屬于成角透視。
雖然成角透視只比平行透視多了1個滅點，但2個滅點的位置卻很靈活，這樣空間的透視變化也更加豐富。
例如下方是我們經常看到的景象，雖然都是典型的成角透視，但 ① 是2個滅點都在畫面外，這時建筑給人的感覺結構平穩，立體感強，側重寫實；而 ② 則是1個滅點在畫面內，另1個在畫面外，這時空間右側的透視形變較大，產生縱深感，整個場景更有張力和沖擊。
其實還有第3種情形是2個滅點都在畫面內，但由于空間會產生夸張形變和失真，因此總體少見，不再舉例說明。
再看看成角透視下的產品展示效果，如下圖所示，不同于單面展示為主的平行透視，成角透視則以展示物體的兩面為主，這樣立體感更強，構圖也更穩定。注意在成角透視中，畫面所有的豎向邊線都是平行，不會產生滅點。
相比平行透視，成角透視在表現上更復雜一些，一般都以2滅點在畫面外的情形為主，這時透視最舒服。注意要想畫面只產生2個滅點，那當中的所有元素都需排列整齊，這也是成角透視的常用做法，此時畫面會顯得整齊統一。下面列舉3種視角下的電商案例，其中以仰視和俯視最為常見。
平視下的成角透視相對少見，因為使用成角透視就是為了凸顯物體的立體感，但平視由于視角很正，恰恰就會顯得立體感較弱，這時2種效果會有矛盾，影響場景的協調性。例如下方的2個案例中，產品看著就有些平整，和方形盒子以及立方體稍顯沖突，但整體視覺真實平和，沒有形變。
仰視下的成角透視就顯得剛剛好，如下圖所示，所有元素均用2個立面展示，加上透視形變，這時空間的立體感強，產品和立方體也都有明顯的體積感，視覺平穩、飽滿，而且還能體現產品形象的高大，凸顯價值感。
注意2個案例中，視平線上都只有2個滅點，這是因為產品和立方體的排列都很整齊，反之若無序排列，就會產生多個滅點，這樣畫面會顯凌亂，視覺不舒服，所以在表現成角透視時，盡量確保所有元素都能整齊排列。
在成角透視中，俯視視角最常見。因為該視角下的物體可以展現3個面，能進一步強化元素的立體感和方位感，如圖所示，物體的空間關系明顯，層次分明，構圖也平穩。
一般成角俯視適合小場景陳列（若是大場景則垂直方向會發生嚴重形變，這就是后面要講的「斜角透視」），剛好這是手機屏的擅長，小空間配上小角度俯視會給人一種親切感，類似長焦鏡頭的特寫畫面，很好的拉近了觀者的心理距離，因此屬于手機端的常用構圖。
空間成角透視
成角透視的優勢在于畫面立體、穩定和寫實，這些優勢剛好適合空間的立體呈現，如下圖所示，成角透視即可用于室內塑造 ① 也可用于外形搭建 ② ，類似我們站在空間側面看整體，此時空間立體、飽滿，結構有張力。
但由于成角透視都是在畫面兩端形成滅點，所以該透視下的空間更適合橫構圖，但手機屏卻是豎構圖，對于橫向擁擠的豎長屏，成角透視就會有些施展不開，左右狹窄，無法像橫版那樣開闊的展現空間，也沒有平行透視那樣看著規整，因此使用較少。
物體與畫面存在一定夾角，并且在2點透視的基礎上，再加入了高度變化，這樣垂直方向的連線會向上或者向下匯聚，最終畫面形成3個滅點，又稱「三點透視」。相比成角透視，斜角透視其實就是讓本沒有交集的豎線有了交集，這樣垂直方向就有了強烈的匯聚感。
斜角透視的形變夸張，常用于大型物體的仰視或高處俯瞰，類似廣角拍攝。
如下圖所示，該透視能表現出建筑或空間的宏大感，并且越宏大透視就越強烈。這時畫面的夸張構圖會顯得觀者渺小，給人一種壓迫感，也讓場景有著極強沖擊力，同時帶來了更加刺激的視覺感受。
其實只要觀者在場景中顯得很小，這時看到的畫面就會產生斜角透視，例如當我們仰望高樓時，相對高樓而言，渺小的我們就會看到斜角透視。
但如果產品展示采用斜角透視時，就會有一種強烈的不真實感，因為相對產品來說，我們并不渺小，所以日常是不會看到這樣的場景，這種場景更像是「昆蟲視角」，如圖所示，斜角透視下，雖然畫面不真實，但會有種特別的戲劇效果。
另外斜角透視沒有平視視角，因為平視物體的豎向邊線依然平行，不會在垂直方向產生第3個滅點，因此仍屬于成角透視?？傊挥性诖蠼嵌妊鲆暬蚋┮暣笮臀矬w時，才會看到斜角透視。
這種形變強烈的夸張透視雖然生活中相對少見，但電商中用的還真不少。還記得我們在第2章講創意方法時提過的「獨特視角」嗎？其中一個方向就是使用斜角透視。
這種透視可以體現物體的巨大（仰視）或者場景的宏大（俯視），正是這樣一種不真實也不自然的視覺感受，反倒給人一種強烈的氣勢和沖擊，畫面極具張力的構圖往往能脫穎而出，并在第一時間抓人眼球，吸引注意，所以成角透視特別適合大促主題的場景搭建和氛圍營造，下面分視角舉例。
斜角仰視
視能讓物體顯得高大，而斜角仰視則讓物體顯得「巨大」。如圖所示，2個案例中的產品都十分「巨大」，通過這樣一種「刁鉆」視角和夸張手法渲染出了產品氣勢，使產品顯得分量十足，同時也提升了視覺沖擊力，整個場景都變的大氣。其中 ① 由于版面有限，有個滅點沒有標示出來。
斜角俯視
當我們站在一個很高的地方俯瞰周圍，或者用無人機在高空航拍，這時看到的景象就是斜角俯視。如圖所示，盡管豎構圖并不適合展現遼闊的大場面，但在斜角俯視的幫助下，2個案例依然體現了場景的宏大，視覺沖擊強，這種居高臨下感使人視野開闊。
平行斜角透視
斜角透視中還有一種特殊情形——平行斜角透視，就是當空間或產品的一面與畫面平行時，此時不管透視多強烈，畫面也只有2個滅點。
如圖所示，當立方體的一面正對視點時，側面便從2個主立面減為了1個，這時除了垂直方向的1個滅點外，原本視平線上的2個也就成了1個，雖然只剩2滅點，但本質仍屬于透視強烈的斜角透視。
既然是與畫面平行，那和平行透視有何區別？
下面看張空間對比圖，能看到2者的形變差異還是相當大：左圖為平行透視，像是我們在看一個小方盒，親切、自然、真實；而右圖則是平行斜角透視，更像是我們在仰望一個巨大空間的入口，充滿戲劇性，并有壓迫感。
其實對于手機端，「平行斜角透視」才是斜角透視中的常用形式，因為它的擺放角度很正，這種正面觀察很適合手機端的豎屏構圖，而且前后的縱深刻畫也能緩解版面的左右擁擠，另外畫面縱向的匯聚感還能迅速吸引注意，給人一種巨大沖擊力和強烈氛圍感，其中仰視比俯視更加常見。
平行斜角仰視
近幾年這類透視越來越多見，因為它既適合豎構圖，也能提升畫面的形式感和表現力，非常利于促銷主題的氛圍打造。
如圖所示，整個畫面就像是我們站在宏大場景的正中央仰望時看到的景象，各元素擺放很正，雖有壓迫感，但空間和產品都顯得非常高大，張力十足，能讓用戶牢牢聚焦，同時也產生了強烈沖擊力，更易在用戶腦海中形成記憶。
平行斜角俯視
在這類透視下我們會感覺自己擁有高高在上的「上帝視角」，元素擺放同樣很正，視野遼闊，場景宏大。但過大的俯視視角會對場景進行一定壓縮，再加上俯瞰產生的遙遠距離感，這樣就顯得元素有些「小氣」，無法體現仰視下的高大，因此畫面的刺激感沒那么強烈，總體相對少見。
以上便是焦點透視的3種類型，我們再來回顧下各自的使用情形，如下圖所示，這是一張3種透視的轉換示意圖，都是仰視視角，旁邊小人則是觀察者的大小示意：
希望通過這張示意圖能幫大家更好理解什么時候該用哪種透視，總之小場景搭建一般以「平行透視」和「成角透視」為主，而恢弘的大場景則以「斜角透視」為主。
當然現實里的透視遠不會這么單一，根據物體不同的擺放位置以及不同的觀測距離，很多時候同一畫面也會存在多種透視，例如平行透視和成角透視就經常組合出現。
電商設計也一樣，例如下方案例中，整個空間是平行透視，而里面的盒子則是成角透視，這時視平線上會有3個滅點，其實若產品的擺放再凌亂些，還會出現更多滅點，但這種無序組合會讓空間塑造變的復雜，看著也不規整，因此并不推薦。
但要注意不管畫面的透視多復雜，當中的視平線卻只能有1條，并且無論水平方向有多少個滅點，最后也都會落在視平線上。
除了以上3種透視外，其實還有4點透視（超廣角透視）、5點透視（魚眼透視）等等，但都過于復雜，用的也很少，這里就不做展開。對于電商里的「空間陳列」，3種透視已夠用，它是我們塑造空間的基礎，如果一開始的透視錯了，即便配色、光影做的再出彩那也無用。
總有人說透視難掌握，其實只要我們在生活中多觀察、多留意身邊物體的透視變化和規律，及時總結，那這種理性還原就不難做到。當然設計終歸還是理性與感性的雙重表達，所以透視雖要遵循，但切忌生搬硬套，視覺協調即可。
講完了焦點透視，我們知道了空間塑造的基本原則，下面就來說說都有哪些陳列場景。
相對PC來說，手機端受屏幕所限，陳列場景其實沒那么復雜，核心是要先構建一個空間，然后讓產品以合適的視角及透視在空間里呈現出來，而這個空間場景則要和主題氛圍、產品氣質都高度匹配。
一般來說，手機端常用的陳列場景有4類：盒子陳列、臺面陳列、自然陳列以及舞臺陳列，選擇哪類則要看哪個場景對產品的烘托效果最好。
在介紹每個場景前，我先說說關于產品組合的2原則，因為很多時候在空間擺放的產品數量較多，這時它們的組合形式就變的尤其重要，稍不注意就會顯得畫面雜亂無章，不夠協調，而且凌亂的擺放也會降低產品的品質感，缺少吸引力。關于組合原則，核心有2點：大小合理以及三角構圖。
大小合理
如果將多個產品擺一起，則要確保它們之間的相對大小符合現實中的真實差異，現實中尺寸大的產品就要相對大些，而尺寸小的產品就要相對小一點，這樣才會真實并經得起推敲。
而有些設計師在組合產品時，也不管大小的真實差異，放進版面后就很隨意的放大或縮小，最后出來的組合要不就大小一樣，要不就比例失真，這些都會給用戶一種強烈的不協調感和不真實感。
下面再看一組對比圖，明顯大小一樣的左圖會有不適感，也缺少層次；而大小合理的右圖則更有美感也更舒服。
其實大小合理的最終目的是希望整體結構錯落有致，就像右圖一樣，這種有高有低的組合才能體現韻律感和結構美。所以如果可以選擇，那我們就選擇一些尺寸差異較大的產品，盡量避免出現大小差不多的情況。
當然如果必須陳列大小一樣的產品，那也可以通過透視或者輔助元素來改善，例如空間里的近大遠小、立方體加高都能改變高度一樣的情形。
三角構圖
當我們選好不同大小的產品后，就要注意它們的組合形式，千萬不能亂堆一氣，不同的擺放會形成不同結構，而每種結構又會給人不同感受。我們在「圖形分割」中講過「正三角」具有很強的穩定性，因此當產品采用正三角構圖時，會讓人覺得版面平穩、視覺舒服。
如圖所示，所謂三角構圖，其實就是將尺寸大的產品放中間，而尺寸小的產品放兩邊，這樣不但構圖穩定，而且畫面也有節奏和變化?？梢哉f「三角構圖」就是空間陳列里最常用的構圖方式，而本節展示的所有案例中，大部分也都是三角構圖。
明確了產品的組合原則，知道了如何陳列才舒服，下面就正式講講空間陳列的4類場景。
盒子陳列
「盒子陳列」就是在盒子里面放產品，而盒子多以禮盒為主，使用場景和主題相對單一，基本用于送禮之意的專題頁。創意雖然普通，但卻不易出錯，是種相對安全的表現方式。當然若能在盒里加些小心思，畫面也會很出彩，像我之前看過一個新年Banner，就是禮盒里裝著一個大家庭在吃年夜飯的溫馨場景，這樣的新組合便讓人眼前一亮。
另外若能提升禮盒刻畫的精致度，那畫面也會有不錯的設計感。而盒子外形也不只有方形，常用的還有圓形和異形。觀察視角則以小角度俯視居多，因為這個視角最接近我們日?？炊Y盒的真實情形，盒內產品在俯視下能看的一清二楚，展現也立體。
盒子陳列的難點在于當盒內要擺放很多產品時，如何能讓產品真實、自然的呈現，這需要我們既注意擺放的合理性，也能準確表現透視，還要刻畫出產品的明暗變化，總之只有把握好產品的空間感、立體感以及光影感，畫面才會舒服協調。
方形盒是最常用的盒子類型，畢竟也是生活中最常用的禮盒外形，結構感強而且易表現。如下圖所示，禮盒都是成角透視，且左右滅點都在畫面之外，這樣結構最穩定，立體感也強。注意盒里的產品呈現，特別是俯視視角下，產品越多越要注意它們是否協調統一，透視、光影等細節一個都不能少，把控不到位就會顯得凌亂，畫面別扭。
圓形盒比較少見，因為和立方體比起來，圓柱體的透視沒那么強烈，結構感偏弱，但圓潤的外形能使畫面變的柔和，給人一種親和力和溫馨感，如圖所示，由于圓形盒沒有明顯塊面，所以不管透視還是光影，刻畫起來都相對簡單。
異形盒是指外形為不規則形狀的盒子，總體也很少見，但易出彩。形狀用的好便能打破「盒子陳列」的常規感，使畫面變的新穎有創意。
例如下方案例中，不管是心形、貓頭輪廓還是圣誕樹，都能成為畫面焦點并引人注意。另外盒子呈現均用了「正俯視」視角，其實除了小角度俯視外，這種視角也很常見，因為該視角下的產品陳列清晰完整，盒子外形也能直觀顯示，的展現了其外形的特別之處。
臺面陳列
在空間陳列的4類場景中，「臺面陳列」用的最多，適用范圍也最廣，可以說電商中的大部分主題和產品都能使用，算是一種真正白搭的表現方式。
「臺面陳列」就是在空間里搭建一個「臺面」，然后在上面放置相關產品。由于該手法還是以放大特寫的小場景為主，元素形變不能太大，因此畫面常用平行透視和成角透視，視角則很靈活，跟著構圖走，3種（平視、俯視、仰視）都有。「臺面陳列」上手簡單，場景多變，其中的關鍵元素——臺面需要根據主題、場景進行靈活變化，常見有2類：桌面和幾何體。
桌面很好理解，就是桌子頂部的陳列面，所有產品都放置其上。由于桌子是家里常見家具之一，因此桌面陳列往往能傳遞一種「家」的溫暖和溫馨。
可能有人覺得「桌面」形式有些單一，其實遠沒那么簡單，我們不要固化思維，要能靈活變化桌子的樣式和裝飾，例如方桌還是圓桌？木桌還是大理石桌？光面還是鋪桌布？這些都是可變量，再加上視角和周圍環境的變化，總之形式可以很豐富。
如圖所示，桌面陳列尤其適合各類美食的組合呈現，這時整個場景貼近生活，頗有帶入感。
就是將各種幾何形體作為陳列產品的臺面，幾何體相對抽象，表現場景更多元，因此比具象「桌面」更加常用。
如圖所示，幾何體一般都是組合出現，特別適合多產品陳列，簡約大方，能烘托出產品的品質感。同時通過高高低低的大小排列也能表現出畫面的結構美以及層次感，總之是一種 「上手簡單、易出效果」的表現方式。
常用幾何體有「立方體」和「圓柱體」，它們適合陳列，高度調節方便，使用靈活。
如下圖所示，整體表現并不復雜，就是將各種產品放在幾何體上。但作為畫面的核心元素，這時幾何體的形態、排列、視角和透視就變的非常重要，我們要根據創意需求和產品氣質選擇最合適的展現方式，而這些展現本身就有不錯的形式感。
幾何體陳列既能營造空間關系和簡約氣質，也能讓用戶聚焦產品本身，因為它的外形簡單，不搶產品，不像一些復雜元素或場景，雖然視覺豐富但最后卻讓產品淹沒其中，這樣就本末倒置。
自然陳列
「自然陳列」需要先創建一個合適的自然環境，然后再將產品以合適方式融入其中。相對其他場景，自然環境顯然復雜一些，呈現手法常以「合成」和「插畫」為主。因為產品都是實物拍攝，為了風格統一，自然環境會偏向寫實風格，這樣2者結合才協調。
從下方案例能看到，「自然陳列」常用于季節感受或者產地溯源等主題，畫面通過「自然場景」營造出天然健康的綠色氛圍。而場景中的元素繁多，呈現復雜，這就需要我們具備優秀的整合能力。
對于「自然」塑造，視角以平視和小角度俯視居多，但畫面由于沒有太多的幾何型物體，所以透視沒那么嚴謹，核心是注意近、中、遠景的層次區分，還有光影的合理添加。如果這些把控不到位，就很可能出現場景雜亂、缺少層次、沒有帶入感的粗糙畫面，最終淪為各種素材的亂堆一氣。
以上列舉的都是以花草樹木為主的自然環境，確實綠色場景在「自然陳列」中用的也是最多，但除了綠色場景外，有時也會用到其他環境。如下圖所示，像海底 ① 、沙灘 ② 、海面 ③ 、冰山 ④ 也是適合陳列的自然場景，特別是夏季主題會經常用到。
舞臺陳列
最后一類「舞臺陳列」常用于大促主題的氣氛營造，這類場景不挑類目，任何產品放在「舞臺」上，燈光一打，色彩再斑斕些，都能營造出熱鬧的促銷氛圍。
如圖所示，舞臺外形以圓形居多，因為圓形的透視感較弱，構圖靈活，而且也符合大家對舞臺的第一印象。舞臺視角則很靈活，3種均很常見，核心是和產品視角保持一致。
關于「舞臺」塑造，還有2處需要注意的地方：
舞臺外形除了最常用的「圓形」外，還有半圓形、方形和六邊形等等；舞臺造型也可以很豐富，并不局限于常規的表演舞臺，各種造型都可嘗試，例如上方左四圖就是現代感十足的三維舞臺，總之我們要根據創意和風格塑造相匹配的陳列舞臺。
另外就是燈光運用，可以說這是「舞臺陳列」和其他場景的最大區別，但燈光也不是越多越好，太多反而顯得眼花繚亂，其實能渲染出絢爛氣氛即可。而有光就有影，在燈光照射下，產品一定要有準確的光影呼應，這樣才不會顯得突兀。例如上方案例中，仔細觀察燈光下的產品呈現，能看到產品表面都產生了被燈光照射后的色彩、明暗等變化，這些細節刻畫才讓畫面更真實，融合更自然。
本次案例會用膠原蛋白口服液作主體元素，然后用這4類場景（盒子、臺面、自然、舞臺）來設計4張不同視角、不同風格的Banner，讓大家看看在不同場景下，如何將產品融入其中。先展示案例會用到的3種產品視角， 下方案例會根據不同的場景視角選擇對應素材。
「空間陳列法」的內容量挺大，主要分成了「焦點透視」和「陳列場景」2大部分來介紹，其中焦點透視是立體「空間」的塑造基礎；而陳列場景則是產品「陳列」的具體環境。
常用場景有4類：盒子陳列、臺面陳列、自然陳列和舞臺陳列，每種陳列都有各自適用的主題和氛圍：「盒子」常用于溫馨的送禮主題；「臺面」則能根據不同主題靈活應變，屬于百搭場景；而「自然」則適合季節或者溯源主題，體現天然清新感；最后的「舞臺」則用于氛圍濃烈的大促主題。不管哪種場景，都要確保產品和空間的視角、透視相一致，這樣場景才會真實協調。另外多產品陳列時，還要注意它們之間的大小比例以及擺放結構，其中三角結構最常用?？傊谑謾C時代，「空間陳列」是一種真正適合小屏豎構圖的表現方式。
文章來源：優設 作者：賢輩
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn