“個人主頁”是一個聽起來很熟悉，但又跟“個人中心”傻傻分不清楚的一個模塊，一般情況下處于APP底Tab的最右邊，通常喊它為“我的”。
這個界面看似沒什么挑戰可言，給設計師一種“不就是排排版的事兒嘛”的膨脹誤解，認為完全在自己射程范圍內，整個人都有點飄。
但最近發現，它并不像表面所呈現出的那么簡單，其實里面有很多小揪揪需要深挖和思考，所以千萬不能小瞧它。
好，廢話不多說，上才藝。
個人主頁和個人中心的區別是？
講“個人主頁”前，先跟大家捋一下它倆的區別，避免混淆。首先，并沒有官方定義它們的名字，只是喊的人多了也就成了它們的名字了。
所以“個人主頁”也好、“個人中心”也罷，只是大家習慣性稱呼，為了合作過程中大家在同一個話語體系，提效而已。
要說它們倆的區別，其實還是有的。
什么是個人中心？
個人中心，承載著自己賬號信息、設置管理、福利信息等功能的聚合地，主要用于個人信息的管理。
它常見于“工具類”產品中，如下：
對于“個人中心”，設計師要考慮的最核心是：如何解決“效率”問題。因此信息布局合理，視覺盡可能減少干擾，變得格外重要。
什么是個人主頁？
個人主頁，一般承載著用戶個人信息、個人影響力、生產的內容等等，以此突顯自己魅力或定位。
常出現在內容、社交、社區類產品中，比如以下產品：
當然，還有一些產品，它既包含“個人中心”，也包含“個人主頁”，如下：
整體來看，“個人中心”偏向于個人信息的管理，更關注于“效率”；而“個人主頁”偏向于展示自我，關注點更“多元”，會復雜一些，下面會細講。搞明白了它們的區別之后，大家會發現“個人中心”相對更簡單一些。
所以，這次我們先聚焦聊聊“個人主頁”。
設計“個人主頁”前思考什么？
在工作中，做任何需求都應該有其目的或目標，不然所有的忙碌都容易淪為資源的浪費?！皞€人主頁”也應有其價值和使命。
像上一趴所說，“個人主頁”是為了讓用戶突顯或塑造自己的魅力，很像是一個人的“個人名片”。那么，用戶塑造個人魅力對產品有什么價值和收益呢？目標是什么呢？
拿短視頻產品舉例：如果用戶能夠在“個人主頁”充分展現自己的才華和魅力，從而帶來了更多瀏覽者的“關注”，那他們就更有動力分享或生產優質內容，進而使產品內容更加豐富；從而吸引更多新用戶的瀏覽、留存。
更多新用戶的加入、瀏覽、留存，讓內容生產者有更多的漲粉空間，粉絲規模做起來之后再進行商業化。
這樣對消費型用戶、內容生產者、平臺方都有利，進而處于良性循環。
這就是“個人主頁”背后的大概邏輯和目的。
如何進行“個人主頁”的設計？
了解完“個人主頁”存在的價值和目標之后，那么，作為產品或設計師們需要幫助用戶解決幾個問題：1.樹立人設；2.輔助吸粉; 3.助力變現。
1.樹立人設
人為什么需要樹立人設？
樹立人設，本質上是兩種目的：獲得認可（提升關注/約X），獲得收入（提升變現能力）。
如何幫助用戶快速建立人設？
個人主頁里有幾個區域，影響著用戶建立人設：a.頭圖區；b.個人信息區；c.作品區；
a.頭圖區
頭圖，指的是“個人主頁”頂部的圖片區域。
為了讓瀏覽者進入“個人主頁”快速了解作者，頭圖這種處理手法，是很多社交/社區/內容類產品，“樹立人設”的標配。
比如：社交類產品的頭圖，用戶要么放自己照片，要么放風景；
大V、商家等角色的用戶，會把頭圖打造成自己品牌的招牌，輔助瀏覽者快速了解自己定位。
不過，頭圖尺寸占比要把控好。
尺寸大小會影響界面的“屏效比”和用戶“上傳門檻兒”，對產品核心數據也有著千絲萬縷的關系。
b.個人信息區
個人信息區，也是作者的基礎資料。
一般包含著：用戶的昵稱、賬號、簡介、標簽、粉絲關注量、關系鏈等信息。這個區域設計時需要重點考慮“信息親密度”和“信息優先級”。
信息親密度：指的是如何將更親近的信息，以信息組的形式傳遞，減少用戶認知成本。
比如下圖，常見的社區或內容類產品針對“個人信息區”的處理方式（同一顏色的色塊代表親密度更強的信息。）
同時，“信息組”與“信息組”之間也需要處理好親密度，比如“小紅書”和“instagram”的“好友關系鏈”與“關注按鈕”是放一起的，方便用戶快速作出“關注”決策。
c.作品區
作品區的重要性不用多說了，它是作者“樹立人設”的重要組成部分，也直接影響著瀏覽者是否愿意關注的關鍵因素。
“作品區”設計時，有2個重要因素需要考慮：“作品尺寸占比”、“作品信息外顯”。
1）作品尺寸占比:
比如下圖，同樣是短視頻產品，Before作品區一排僅1個作品，剪映2個作品，而抖音3個作品。
單從排版美丑來評價是不負責的，那么如何決策哪種處理手法“對”的呢？
這需要通過自己產品定位分析，以及通過不同布局方式進行上線測試，重點觀測核心數據（用戶消費時長/作品消費個數/關注率等）的影響情況來決策。
2）作品信息外顯:
除了作品本身，它的“輔助信息”也是幫助用戶做決策的重要因素。
比如：“Before”除了對作品熱度信息（瀏覽量、評論量等）外顯以外，更強調和引導用戶進行互動，如：收藏、分享、評論、充電；“剪映”根據產品屬性，更強調“使用數”和“作品的描述文案”；“抖音”作品僅外顯“點贊數‘，同時通過“置頂”和“剛剛看過”提升用戶決策效率。
以上可以看出，頭圖區、個人信息區、作品區，是讓瀏覽者快速且準確的了解或關注內容創作者重要組成部分，也是內容創作者“樹立人設”的主要手段。
2.輔助吸粉
輔助吸粉，換句話說也是輔助用戶提升“關注率”。
不可否認，清晰的編輯個人信息，產出優質的內容，是用戶吸粉的根本，我們能做的只是“助攻”。
所以，在做此類“個人主頁”時，我們需要通過設計手段做個靠譜“奶媽”，有幾個維度可以嘗試：a.強化關注；b.沉淀粉絲。
a.強化關注
衡量粉絲多少，是通過用戶是否點擊“關注”了內容創作者。
因此身為產品工作人員，在個人主頁設計時，除了其它信息呈現以外，在不影響頁面信息合理性的情況下，盡可能強化“關注”按鈕，引導用戶操作。
b.沉淀粉絲
有了粉絲之后，提升粉絲忠誠度和粘性，是每一個內容生產者面臨的問題，也是工作人員們需要幫內容創作者解決的。
左邊是“快手”，在個人主頁內有粉絲群入口；右邊是“火山”，打造自己的“圈子”，粉絲們可以在里面發自己的動態，或進行互動。
這么做是為了提升內容創作者的粉絲粘性，給他們更大的空間去運營粉絲，培養感情，打造更忠誠的私域流量。
3.助力變現
除了樹立人設、輔助吸粉以外，助力他們變現，才能使他們長期扎根于此（留在自己平臺）。不然大V們會帶著自己圈到的粉絲，去別的地兒賺錢，給你的產品帶綠帽子。
拿知乎舉例，內容創作者可以在個人主頁掛自己的商品櫥窗，給符合自己人設的商品帶貨。
也可以開通付費咨詢模塊，通過幫助用戶解答問題實現變現。
除此之外，還可以做付費Live課程。
再來看下像嗶哩嗶哩、抖音、火山、QQ音樂等平臺，在個人主頁都有輔助用戶變現的入口。
下面是“聲撩”，利用用戶聲音的優勢去變現，比如：陪打游戲（軟妹子聲音讓王者峽谷的漢子們興奮）、睡前陪聊、睡前連麥等等。
如果你真的很富有，且不想讓妹子陪聊陪打游戲，就是單純的想砸禮物引起注意，右圖可以看出，有個入口是直接“送禮”。
這么做滿足土豪訴求（博取主播注意），滿足主播訴求（變現），滿足平臺訴求（抽成），何樂而不為。
同時，也越來越多了產品不僅解決C端用戶的變現訴求，同時解決B端用戶變現訴求。比如，抖音賦能商家，商家號的“個人主頁”可以自定義tab，默認展示“商品”tab。
用戶不僅能在這里消費作品，還能通過作品建立的信任促進購買行為。
再比如，instagram也提供B端用戶開店鋪功能。
以上，是關于“個人主頁”如何助力用戶變現的案例，其實玩法還有很多，這里僅提供一些思路，大家平常玩APP時可以多關注下。
總結
總的來說，“個人中心”與“個人主頁”最大的區別在于：“個人中心”主要是“給自己看的”，更注重使用效率。
“個人主頁”主要是“給他人看的”，更注重突顯自己魅力。在滿足使用效率的基礎上，需要通過產品設計手段幫助用戶“樹立人設”、“輔助吸粉”、“助力變現”，從而使用戶和平臺實現雙贏，打造一個更完善的生態。
以上，是“個人主頁”設計相關思考，希望對你們有所幫助。
文章來源：UI中國 作者：大牙
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
先來了解一下項目的背景。Conduira online是一個線上的教育平臺，為準備考試的用戶提供有用的工具和資源。這個平臺目前有一個側邊導航欄，上面有11個選項。后來由于平臺的變化，將主導航的選項縮減到3個——主頁、實習和課程。
導航的數量變少了，團隊又迎來了新的問題：是應該繼續保留側邊導航的設計樣式還是切換成頂部導航的樣式呢？
為了做出最合理的選擇，我們需要回答三個基本的問題。
在選擇導航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定（Visual Fixation）：注意力一直保持在同一個地方。
在頂部導航中，一個視覺固定點通常只適合一個選項。然而，側邊導航上的單一視覺固定點可以同時容納兩個選項。
結果很明確。與頂部導航相比，用戶在一次視覺觀察中可以在側邊導航上查看和感知更多菜單選項。當然頂部導航也有自己的優勢，為每個菜單項賦予各自的權重，而不是讓它們的重要性被其他選項分散。
對于具有過濾選項或帶有二級菜單的電商網站，視覺固定的概念起到了非常重要的作用。因為在這些情況下，我們希望用戶能夠在單一的視覺點上盡可能多的選擇。
Tips：這里的選擇僅僅取決于界面上有多少選項。如果主導航的菜單項不多于5個，只需使用頂部導航，這樣能夠更好地控制用戶在整個平臺上的體驗旅程。
用戶在瀏覽網頁或App時會有各種各樣的瀏覽順序，其中一種就是「F型模式」。
看起來像這樣：
F型布局的特點是將注視力集中在頁面的頂部和左側:
這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關注；每行文本左邊的幾個字比后面的文字接受度更多。
因此，在頂部導航中最左邊的選項比其他選項具有更多的視覺權重，因為它位于主要視覺區域，優先級更高。
側邊導航采用了垂直移動，這是用戶瀏覽網頁的一個自然方向，但是選項優先級的排序是個限制。當選項的優先級相同時，可以使用側邊導航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內容。
如果是的話，可以考慮利用以下兩種設計樣式：
水平導航——在頁面頂部設置一個主導航，在主導航下面設置二級導航進一步來區分內容。
側邊欄——在頂部設置一個主導航，然后在側邊設置一個側邊欄菜單來處理其他內容。
頂部導航和側邊導航之間的選擇實際上取決于以上三個基本的問題。
另外由于現在的設備有了更大的屏幕尺寸，如今許多設計趨勢已轉向側邊導航，因為它看起來更干凈并優化了更多的屏幕空間。
最后將導航的選擇歸結為兩點：
文章來源：優設 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
構圖、色彩和光影屬于設計中非常重要的3塊體系，但構圖和色彩大多是偏感性的主觀理解，而光影則是理性的客觀判斷。因為這是自然界中真實存在的物理現象，因此大部分時候畫面的「添加光影」都是在還原真實，所以本文的很多知識都偏理論和科普，但理性認知無疑是打牢光影基礎的第一步。
如果說「構圖」和「色彩」是視覺設計的基礎，那光影便是「錦上添花」，當各種視覺元素組合完成后，只有「光影統一」，才能讓所有元素真實的融在一起，最終形成真實立體、有層次的畫面，而「光影統一」便是這篇文章的核心原則。
其實我們看到的萬物色彩，都是物體表面的反射光，是「光」創造了色彩，同時也創造了「影」，只有經過光照才會出現明暗，才有所謂的「光影」，所以我們先來說說一切的源頭——光。
發光的地方就是「光源」，當我們對畫面「添加光影」時，一定要先留意光源在哪，像我每次畫設計草圖時，就會先把主光源的位置確定并標示出來，只有清楚位置，「光影統一」才有了依據。
那常用的光源類型都有哪些呢？其實就2大類：照射光和環境光。2類光源往往同時存在，相互影響，塑造場景時必須同時考慮。
照射光就是畫面中的主要照明光，這是影響整體光影的核心光源，根據光線照射路徑的不同，又分成直射光、散射光和折射光。
直射光
直接照射的光源就是直射光，光線路徑呈方向明確的兩點一線，整體集中、聚焦。
直射光能在物體表面形成強烈的明暗對比，并且過渡偏硬，形成清晰的輪廓邊緣，最常見的直射光就是晴天陽光，它屬于自然光。如下圖所示，陽光直射形成的明暗強對比能呈現人物及建筑的輪廓，突顯立體感。
和自然光相對應的是人造光，在人造光中，例如攝影棚里常用的閃光燈和常亮燈（不帶柔光罩）都算直射光，照射效果和晴天陽光類似，仔細觀察投影，邊緣都很生硬、清晰。
散射光
當光束穿過某一介質（云層、柔光布等），被其表面分散傳播的光便是散射光，散射光的光線路徑呈多方向發散狀，整體分散、無明確方向。
自然光中，陰天、雨天、霧天的光照都屬于散射光，當陽光穿過大氣時，大氣層能讓光線朝不同方向發散，發散后的光線柔和，在物體上形成的明暗對比較弱，過渡也柔和。如下圖所示，不管人物還是景物，都無明顯的陰影輪廓，整體層次豐富而細膩，影調柔和，特別是暗部的細節都能保留完好。
而人造光中，如果給閃光燈和常亮燈裝上柔光罩，這時發出的光就會變成散射光。例如下圖中，人物和產品都顯的特別柔和、舒服。
折射光
當光束從一個介質射入另一介質時，傳播方向發生偏折的光就是折射光。常見介質有水、玻璃等，它們的折射角度也各不相同。
日常生活中，像泳池里的水波光影、玻璃杯投射的光線圖案都是與折射相關的自然現象。
而我們在設計Banner時，若將這些折射效果表現出來，就會給畫面增添很多細節，同時也會增加真實感，像水波光影在電商中用的就很多。
很多新手在做設計時，往往只注意照射光（主光源）對物體的影響，而忽略環境光，導致畫面總是不夠真實。簡單來說，畫面中除了主光源外的所有光線都算環境光，環境光的亮度一般很低，且沒有明確方向性，常見的環境光有2種：散射光和反射光。
散射光
和照射光一樣，環境光中也有散射光，但它們的不同在于：
像自然界中的夕陽西下，當紅色的太陽光（照射光）減弱時，建筑的暗部便會顯現藍色的天空光（環境光），這時紅光和藍光會形成鮮明對比，極具沖擊和美感，這樣的畫面在攝影及設計中都非常常見，也是攝影界公認的「黃金一小時」，這時的天空光就屬于環境光中的散射光。
生活中還有一個常見現象也能看到散射光影響，當你走在戶外，觀察自己的影子，特別當影子較長時（清晨或傍晚），這時離自己越遠的區域顏色越淺，這是因為越遠的影子所處區域就越開闊，受周圍散射光的影響就越明顯，因而顏色更淺。
反射光
環境光中還有非常重要的一類是反射光，當光束射到介質表面時，有部分自介面射回的光就是反射光?？梢院敛豢鋸埖闹v，世界萬物之所以出現明暗就是因為反射光的存在。反射光一般有2種情形：鏡面反射和漫反射。
鏡面反射。當反射面非常光滑，這時平行射入的光線仍會向一個方向平行的反射出來，效果如同鏡子一樣，雖然這樣物體本身的明暗就會非常微弱，但人們透過反射面能看到周圍的環境信息，這就是鏡面反射光。
日常生活中像平靜水面、鏡子、拋光金屬等都會有鏡面反射光，例如我們在刻畫金屬材質的元素時，常常會在表面加些近乎白色的高光，這就是由于鏡面反射而進入眼中的刺目強光。
另外晴空萬里時，海面也常出現「波光粼粼」的閃光，同樣也是陽光射入水面的鏡面反射光。
漫反射光。當反射面凹凸不平時，這時平行射入的光線就會向各個方向反射出去，這便是漫反射光（以下簡稱「漫射光」）。需要說明這里的凹凸不平也包括微觀結構，例如有些墻壁看著光滑，但仔細看表面也有粗糙顆粒，這時反射出來的光線也是各個方向的漫射光。
漫反射在這個世界里無處不在，它是我們對物體形態及色彩產生明確認知的基礎。
因為有漫反射的存在，物體才會有清晰的明暗關系，我們才能看清這個世界，它賦予了物體縱深感和體積感，不管是產品還是環境皆是如此。
這里列舉一個設計中常用的漫反射現象，我們將一個白色茶杯放入一個綠色盒中，打上一束光，這時茶杯整體都帶有綠色調，這是因為盒子表面產生了大量綠色的漫射光，這些光束射在茶杯上，進而發生偏色現象，如下圖所示。
可見環境色對物體的視覺影響還是相當明顯。再如下圖中，當模特處于一個紅色空間時，受到環境中紅色漫射光的影響，模特也明顯偏向紅色，這時我們就說環境光影響了這位模特的「色彩平衡」，關于「色彩平衡」在后面還會細講。
當然現實是復雜的，其實還有大量物體會同時存在鏡面反射光和漫射光，誰的強度大誰就更突出，例如起風時的水面，就不全是鏡面反射，還有漫反射，這里就不再深究。
小結
以上提到的「照射光」和「環境光」便是設計中常用的2大光源類型，這2類往往是同時存在，一般照射光會直接影響物體的明暗結構，而環境光則影響物體的色彩平衡及反光。
只有把這些光影都表現清楚，畫面才更有代入感。其中對于照射光的理解，絕不僅僅是考慮直射或散射這么簡單，還需分析照射方向、照射角度、照射形狀、光源距離、光源強度、光源軟硬、光源大小、光源顏色等因素，待會會針對這些因素展開講解。
前面介紹了光源類型，主要讓大家對「光」有個整體認知，內容偏科普，屬于「光影」的理論基礎，現在開始講「影」，這塊內容更偏實戰運用，教大家如何在設計中準確表達光影。本文的「影」涵蓋兩塊內容：物體的明暗和投影，其中物體是泛指，包含電商常用的兩大元素：人物和產品。
先說物體明暗，當光源發出的光線射向物體時，由于光反射，物體會有對應的明暗變化，記得在高中學習素描時，老師就曾提過光影的「五大調」，這正是人們對物體明暗關系的理論化總結。
但現實世界卻要復雜的多，因為物體光影還與材質密切相關，不同材質的明暗關系截然不同，所以決不能撇開材質談明暗，而設計中常用材質有三大類：漫反射材質、鏡面反射材質和透明/半透明材質。
不管現實世界還是電商視覺，漫反射材質都是最常見的材質，因為這類材質的光影最有規律也最有代表性，明暗關系也簡單很多，剛剛說的「素描五大調」就是針對漫反射材質，那我們就從這類材質入手，詳細講講漫反射的光影到底如何呈現。
「漫反射材質」是指表面產生漫反射光的材質，日常生活中，漫反射材質（以下簡稱「漫射材質」）的物體占據大多數，像棉布、啞光紙、啞光塑料甚至人類肌膚等等都屬于漫射材質。
而我們在刻畫漫射材質的物體明暗時，需遵循3點原則：近亮遠暗、先整體再局部以及細節刻畫。
近亮遠暗
對于漫射材質，首先一個大原則就是「近亮遠暗」：
以畫面的主光源（照射光）為圓心，物體距離光源越近會越亮，越遠則越暗。
對單個物體來說，距離近的就是亮面（受光面），而距離遠的是暗面（背光面），如下圖所示。
在很多攝影或設計作品中，能看到不管人物還是產品，都會遵循這一原則：距離主光源越遠則越暗。
先整體再局部
在「近亮遠暗」的大原則下，先確定物體的整體光影，表現三大面（亮面、灰面、暗面），其本質就是在固有色（物體在白色光下所呈現的色彩）的基礎上進行深淺色調的變化。
然后再添加物體的局部光影，這個局部主要針對有塊面的物體（立方體），「局部光影」意味著亮面和灰面也要分別遵循「近亮遠暗」原則（由于暗面是背光，不受主光源影響，所以不在遵循范圍內），這樣光影才會更有層次。而沒有明顯塊面的曲面物體（球體）則把握好整體光影即可，或許聽著有些復雜，下面通過圖例強化理解。
細節刻畫
最后是刻畫光影細節，這里列出2個常見細節，這些細節雖不影響整體明暗，但會讓物體光影更加細膩和真實，屬于「加分項」。
物體表面最亮的地方就是高光，高光其實不是光，而是直接反射主光源的地方，如果要給漫射材質的球體添加高光，那在亮面添加一個羽化的圓斑即可。
往往越光滑的物體高光就越清晰。但對漫射材質而言，高光不會很清晰，不過模糊程度要看物體的固有色以及粗糙度，粗糙度越大的物體高光越模糊。另外高光的外形還和物體的本身結構有關。
在表現高光時，還有一塊高光區也經常被刻畫出來，那就是塊面物體的「倒角高光」。
「倒角」其實是個工業設計術語，三維設計也常提到，一般塊面物體的棱角通常會做些圓滑過渡，這種過渡結構就是倒角，有了倒角，轉折才不會「鋒利」，這時若有光線照射到表面，倒角處便會形成高光線。
一般亮面和灰面轉折處的倒角高光最亮，而灰面和暗面的轉折處最暗，核心還是遵循「近亮遠暗」原則。
電商設計中，若給塊面物體加上「倒角高光」，細節無疑更豐富，也更耐看。仔細看下圖，在塊面轉折處都有明顯的亮線勾勒，雖然不是很起眼，但這就是常說的「設計細節」。
當2個物體相鄰時，它們相鄰的那面會有「重合陰影區」，并且物體離的越近，陰影會越深。這是因為相鄰空間隨著物體間距越小，接受的環境光也會越來越少。
「重合陰影」是一個非常容易被大家忽略的設計細節，但若表現得當，就能提升作品的精細度，如下圖所示。
說完漫射物體的明暗刻畫原則，接下來講講周圍環境對物體的影響，還記得剛剛講過的環境光嗎？環境中除了主光源外的一切光線都是環境光。
而「環境色」則是環境光中的一種情形：就是當周圍環境有明確色彩時，這時產生的環境光會給物體帶來怎樣的影響？主要影響其實有2方面：物體的色彩平衡和反光，實際表現時也是從這兩點入手。
色彩平衡
「色彩平衡」是PS中的一項調色工具，主要是調節畫面的整體色彩。既可校正畫面的偏色，使色彩舒適平衡；也可反其道而行之，根據場景和需求讓畫面有意偏向某種顏色。例如下圖中的人物，受環境色影響就明顯偏向黃色。
所以當物體處在一個有明確色彩的環境時，受環境四周的漫射光影響，整個物體都會偏向環境色，注意由于暗面受到的影響更大，因此暗面的偏色現象也會更加明顯?？傊矬w偏色程度是和其固有色、材質及漫射光強度都息息相關。
反光
一般物體都是放置在地面上，而地面作為環境的一部分也會出現漫射光，這部分光線射到物體上就會形成一層微弱的亮面，這就是「反光」。
其中物體表面離地面越近的地方反光就越強，一般來說反光最強處就是物體暗面最靠近地面的地方。但不管如何反光都不宜過亮，更不能超過物體亮面。
上圖是環境為白色的情形，而當環境有明確色彩時，這時反光面就應呈現環境色，如下圖所示，物體的反光都是淺藍色。
另外能產生「反光」的不單單是地面，其實只要離物體較近且能反射光線的面都能讓物體產生「反光」。
例如下圖中，就能明顯看到白色瓶子的右側有一層綠色「反光」，這是因為旁邊的綠色外盒反射出的綠色光線射在了瓶身表面。
再如戶外拍攝人像時，有時為了不讓暗部過暗，往往會在旁邊添上一塊「反光板」，這個反光板所起作用就是讓臉部的背光面產生反光，以達到提亮暗部的目的。
小結
綜上所述，周圍環境的漫射光影響著物體的色彩平衡；而地面（也可是離物體較近的面）的漫射光則為物體暗面添加了反光。
為何要單獨講解環境色影響？因為現在很多Banner都是在一個有色背景中添加人物或產品，其實就可理解成是將物體放入一個環境色中，這時若想和背景自然融合，就需要它們的色彩平衡及反光都偏向背景色，不然整體就會失真。
總之調節「色彩平衡」能讓物體融進有色背景中；而添加「反光」可使物體更加通透，體積感也更強，下面展示2個融合不錯的案例。
在實戰案例中，我們會給2款產品分別添加一個藍色背景，然后用 「明暗原則」及「環境色影響」中提到的方法給產品加上光影，并將它們融進背景中（由于投影在后面才會提到，所以當前為保畫面完整性，關于投影部分只先添加，但不展開細講）。因為物體的明暗、投影和光源屬性密切相關，因此這里先設定主光源來自畫面左上方、強度中等、軟硬適中、白光，下面看具體如何呈現。
在上述案例中，我們事先給主光源做了一個設定，為何要這么做呢？因為主光源的很多因素都直接決定了物體會呈現怎樣的光影，特別當畫面有多個物體時，只有確定了光才能使它們「光影統一」。
例如剛剛通過左上角的主光源能判斷畫面屬于側光，那產品也是對應的側光影，如果位置改變那光影也將發生改變，那光源的眾多因素究竟會讓物體產生哪些不同？下面一一細說。
照射方向
先說光源的照射方向，主要會影響物體的「明暗配比」，隨著方向不同，物體明暗也在發生微妙的變化，同時還會影響畫面的情感表達，所以照射方向是我們首先就要確定的因素，一般方向有7種。
而在實際運用時，常用方向是4種：前側光、側光、側逆光、逆光，這4種我們分成2組來講。（其他方向由于使用較少，就不展開）
前側光/側光。當光源的照射方向和視線方向成30°-60°夾角時稱為前側光；而當夾角成90°時則為側光。如圖所示，前側光一般明多暗少；側光則是明暗對半。
下面再看產品在前側光及側光下的光影呈現，主要區別在于明暗比例的變化，但變化很微妙，區分沒有那么明顯。這里我是用PS對產品進行的光影調整，因為日常工作中，PS處理光影才是大家的常用方法。
前側光及側光是電商設計中最常用的布光方式，這樣不管人物還是產品，明暗比例都比較適中，既能保證物體的亮度，也能很好的凸顯物體形態和質感，所以大量Banner的主體展示都會采用這種布光方式，下面看案例。
側逆光/逆光。當光源的照射方向和視線方向成120°-150°夾角時稱為側逆光；而當夾角成180°時則為逆光。如圖所示，側逆光和前側光剛好相反，物體是明少暗多；而逆光時的物體則幾乎全是暗面?？傮w來說，不管側逆光還是逆光，物體都以暗調為主。
再看看產品在側逆光及逆光下的光影該如何處理，雖然產品看著有些灰暗，但場景卻頗有氛圍和調性。
這也是一組常見的布光方式，和前測光/側光主要凸顯物體的立體感不同，側逆光及逆光主要是營造獨特的場景氛圍。
其中要特別注意物體背光面的暗調程度，根據需求提亮或壓暗，但多數時候都不會調的太暗，還是會保留物體該有的一切細節，避免色調過深而丟失了暗部層次，如下圖所示，元素的背光面依然都清晰可見。
逆光其實很有趣，當光照強烈、光質偏硬時，物體邊緣就會出現一圈非常明顯的高光，高光顏色和光源顏色一致，這就是「輪廓光」。光照強度越大、光質越硬，輪廓光就越明顯。
輪廓光一直都是攝影師的最愛之一，如圖所示，它能勾出人物輪廓，進而分離人物和背景，讓影調富有變化，提升畫面層次和細節。
在電商設計中也同樣常見，例如下圖中，仔細觀察人物和產品的邊緣，有些地方會有一層非常高亮的「輪廓光」，這處光影細節使畫面更具形式感和設計感。
還有一種情形也頗有藝術感，如果物體完全背光，這時背景偏亮而物體正面又無光時，就會形成「剪影」效果。在攝影中這是一種很有趣的拍攝方式，如圖所示，圖中的人物剪影會給觀眾留下豐富的想象空間。
在電商設計中，剪影同樣以表現人物或產品輪廓為主，突出整體造型，「剪影構圖」會更強調畫面的形式感傳達。
光源強度/距離
光源強度和距離會影響物體明暗的反差大小，強度越弱或距離越遠則物體明暗反差越??；而強度越強或距離越近則明暗反差越大。
原因很好理解，先說光源強度，當光源增強時，周圍環境和物體的受光面會更亮，因此亮面和暗面的反差也會更大。還有距離同樣如此，所有人造光源的光照都有衰減性，而光源強度隨著距離拉近而升高，因而距離越近的光源，照射強度同樣增強。
需要注意，還有一類光源是自然光，自然光比較特殊，如果在室外環境下，任何時候的光照（晴天、陰天等）都不會有衰減現象，因為作為光源的太陽太強，距離太遠，衰減可忽略不計。
但若在室內，陰天從窗外射入的自然光則會有衰減性，因為這時的光線以散射光為主，而這類光照要弱的多，再加上窗外射到室內的輻射范圍有限，所以衰減性便會顯現出來，如下圖所示。
光源強度和距離對產品的明暗影響也同樣如此：左圖設定的光源強度弱、距離遠，因而產品的明暗反差?。欢覉D設定的光源強度強、距離近，因而明暗反差更大。
如果選擇明暗弱反差，為避免畫面灰暗，我們需要提升畫面的曝光值，使整體明亮。
在實際運用時，明暗弱反差降低了明暗對比，人物或產品都沒有很深的陰影，整體呈現清晰、柔和，同時也弱化了結構和立體感，如圖所示。
而明暗強反差則讓人物或產品的明暗對比強烈，陰影明顯，質感凸顯，更強調整體結構和立體感，如圖所示。
光源軟硬
喜歡攝影的朋友對這個詞應該再熟悉不過，是指光的性質（簡稱「光質」）變化，分成硬光和軟光。
一般直射光屬于硬光，而散射光和漫射光則屬軟光。光源軟硬會影響物體的明暗過渡，硬光的光照直接，會讓物體的明暗過渡更為生硬，有明顯的陰影輪廓，突出表面結構和質感；而軟光的光照柔和，能讓物體的明暗過渡更為自然，無明顯的陰影輪廓，突出表面層次和細節。
另外在同等的光照強度下，由于軟光的光線呈分散狀，所以相比硬光，明暗反差也相對較小，如下圖所示。
下面再展示產品在硬光和軟光下的光影刻畫，明顯左圖的影調更為硬朗。
在設計時，硬光常用來表現人物的強勁、硬朗和力量，常用于男性、運動、健身等類目，另外也能凸顯產品的結構和造型，提升質感和立體感。
軟光則側重表現人物的柔美、清新和嬌嫩，常用于少女、兒童等類目；而用于產品則會讓其表面的層次細膩而豐富，更接近生活里的真實呈現。
光源顏色
最后是光的顏色（簡稱「光色」），光色變化會影響物體的表面顏色，由于人們對色彩的敏感度很高，所以眾多因素中，光色帶來的影響最為直觀。
一般來說，不管物體的固有色如何變化，表面呈現的都是光線顏色，只是明暗程度會有不同。如圖所示，當紅光照在球體上，亮面會呈現紅色；而綠光照射則會是綠色。
若產品被有色光照射時，受光面同樣會出現對應的光色，這時畫面會更生動，同時也提升了用戶的視覺印象。
在日常設計中，使用有色光算是「戲劇化用光」的一種手法，如圖所示，當畫面出現光色變化和鮮明對比時，畫面會更有沖擊和氛圍，也讓場景帶有強烈的情緒感。
小結
以上便是影響物體明暗的4個光源因素：照射方向、光源強度/距離、光源軟硬以及光源顏色。
通過相關案例，細心的小伙伴該會發現，當照射光的這些因素發生改變時，不單單是物體表面的明暗會有變化，其實投影也有明顯不同，確實物體的明暗和投影都是緊密相關，正因為投影太過重要，所以接下來單獨介紹。
前面提到本文的「影」會涵蓋兩塊內容：物體的明暗和投影。現在就說說投影，我們還是從最具代表性的漫射材質入手。
何為投影？簡單說就是光線照射不到的地方。它是光影表現中非常重要的一環，有了投影，環境中的物體才有真實感，并和環境產生呼應關系，給人帶來現實感。
而投影呈現，就屬于典型的看著簡單其實復雜的細節刻畫，新手往往覺得投影不就是添加黑色的模糊橢圓嗎，偶爾雖然可行，但這并不適用所有場景。設計師真正要做的，是能根據各類場景準確表現出讓人舒服的物體投影。而物體投影，又分為表面投影和地面投影，投在物體表面的是表面投影；而物體投在地面的就是地面投影。
剛剛講「照射光影響」時提過，當光源強度、軟硬等因素改變時，物體的投影也會有明顯不同，那接下來我們就看看物體投影到底受哪些因素影響？又會有哪些不同？刻畫時考慮的要素都有哪些？相信看完會刷新大家對投影的認知，原來看似簡單的投影竟藏有這么多細節！
首先要考慮投影的方向，這是大前提，它和光源位置密切相關，核心原則是投影永遠在光源相對的一面，屬于光源光線的延伸。如圖所示，當畫面有多個物體時，要確保所有影子都和光源的光線方向保持一致，若不一致畫面就有違和感。
下面看案例，注意有時畫面的光源位置并不明顯，會在畫面外，例如右圖，這時就要事先設定一個光源位置，然后確保所有物體的投影都處在光源光線的延伸線上，這樣才合情合理。
確認方向后就要開始繪制投影的輪廓，這是投影表現中最難的一步，很多畫面的投影看著很假往往就是輪廓出了問題，一個優秀設計師要能準確呈現出物體投在地面的真實形狀，而不是所有投影都是一個圓形或矩形。那怎樣才能準確的勾出外形呢？我們需從以下3點來考慮：基本外形、發散程度和外形起伏。
基本外形
是指物體在光源照射下投在平面上的基礎形狀，關于形狀繪制有章可循，但需用到我們在高中「立體幾何」中所掌握的空間感。
總體來說，是先把光源的「位置點」和物體的各個「頂點」連成直線，再把每條直線延長至所在平面，這樣就能得到多個「交點」，最后把平面投影外圍的所有「交點」連接起來便會得到準確輪廓，如下圖所示。
上方是單個長方體的投影外形，可能這樣的簡單物體還比較好呈現，那復雜物體呢？其實用同樣方法即可，如下圖所示，我們先用上述方法將2個長方體的投影輪廓分別呈現，再合并就好。只是這時的空間更復雜，頂點也更多，我們要有足夠的眼力和耐心。
需要說明，在單一光源下，當畫面有多個物體組合出現時，所有物體的投影都是相加關系。即是說當多個投影有交集時，這些交集區域不會產生更深的疊加投影。
但以上只針對單一光源產生單一投影時的情況，若畫面有多個光源并讓物體產生了多個方向的投影時，此時投影便成疊加關系。
如下圖所示，示意圖和案例中都有2個主光源，因此物體產生了2個相交投影，投影的交集區域最深，而非交集區域由于光源的相互影響則會變淺。
最后通過投影基本形的繪制方法我們還能得出一個結論：影子長短和光源光線的入射角有關。入射光線和垂直地面的法線夾角就是入射角，入射角越大投影越長，入射角越小則投影越短。
準確的投影輪廓能讓產品呈現更真實，也更有美感，下面展示2個優秀案例，當然這些的前提是要光源為硬光，只有硬光才會有清晰的投影輪廓。
發散程度
接著要考慮投影外形的發散程度，「發散」是說投影輪廓離物體越遠則開口越大。所有物體的投影都有發散現象，只是程度不同，這和光源的面積大小及光源距離有關。
先說光源大小，光源面積越大則發散程度越??；而面積越小則發散程度越大。
再說光源距離，距離物體越遠則發散程度越??；而距離越近則發散程度越大。
例如太陽距離地球就非常遙遠，因此室外物體的影子擴散程度會非常小，像下圖中的樹木，投影都接近于平行。
其實距離遠近是光源非常重要的一個分析維度，它影響的因素有很多，不光是投影發散，還會影響投影的深淺和虛實，后面再細說。
一般在電商設計中，擴散程度較小的投影用的更多，畢竟生活中這類投影更加常見，呈現出來的影子也會比較自然和真實。
擴散程度較大的投影雖然用的不多，但使用恰當則會讓畫面充滿張力和氛圍，使人眼前一亮，如下圖所示。
外形起伏
投影的輪廓繪制還需考慮外形起伏，「起伏」是說投影不光要有二維平面的形狀變化，還要根據地面凹凸進行縱向的起伏調整。
其中地面凸起主要指「墻面」；而地面凹陷則指「階梯」；最后還有地面凹凸不平的「肌理」呈現。
當地面凸起形成類似「墻面」結構時，如果物體的影子長度大于墻面間距時，就會出現「投影上墻」現象，這是因為墻面也會出現一塊光線照射不到的區域，如下圖所示。
在設計時，如果投影剛好出現在產品和墻面的中間區域時，最好都設計成「投影上墻」的布光效果，這樣兩個元素間（產品和墻面）就會產生呼應和聯動，整體感更強。
當地面凹陷出現類似「階梯」結構時，如果物體的影子長度大于階梯轉角的間距時，就會出現「投影下沉」，如圖所示。
這里要注意一個關鍵點，上圖中的主光源出現在物體背面，屬于側逆光，這時「階梯結構」受光照影響也會出現暗面，和投影一樣，都屬于光線照不到的區域，因此在階梯轉角的背光面，不會出現物體投影，有時設計師會順手將物體投影疊加在轉角暗面，其實是錯誤呈現。
我們在觀察下生活中的真實投影，下方是我隨手拍的一張屋頂照片，上午9點，欄桿在屋頂投下了長長的影子，可以清晰看到，圈中擋板的背光面并沒有欄桿投影，就像被斷開了一樣。這是因為該區域都是背光面，不可能出現投影疊加的反?，F象。
因此我們在設計時要額外注意，千萬不要犯這種「投影疊加」的常識性錯誤，仔細觀察下方作品中方塊轉角的背光面，都不會出現產品投影的疊加現象。
有時地面還會以「肌理」方式呈現，像常見的草地、水面、沙灘等等，如圖所示，它們的表面都是凹凸不平，因此投影外形也要根據肌理起伏進行形態變化，這樣才不會顯得投影「太假」。
雖然投影的輪廓繪制我是從3小點依次展開，但實際設計時應該一氣呵成，根據畫面的光源同時確定投影外形、發散程度以及起伏，最終是為營造出物體在環境里的真實存在感。
有了投影的「形」，現在我們要確定投影的「色」。很多新手在添加投影時不管周圍的環境色是什么，都會給影子直接填充黑色，最后導致影子在畫面中格格不入，像是多余的存在。
其實投影呈黑色的情況非常少見，由于受到周圍漫射光的影響，大部分時候都是跟著地面顏色走，這是總體原則。具體是會先給投影填上地面色，并將混合模式設成「正片疊底」，再將透明度調至合適數值即可。
仔細觀察下方案例，投影并非「黑色」，都是深色調的地面色，這樣投影才不至于突兀。
既然投影都是深色調的地面色，那到底「多深」才合適呢？這就需要我們調整投影的深淺。關于投影深淺，需從2個維度來調整：整體深淺和相對深淺。
整體深淺
整體深淺是指投影的整體明暗，和上節講的「物體明暗」一樣，都是受光源強度和距離的影響。其中「深淺」是說環境明暗的反差大小，因此所謂的「投影深」其實是由于環境的明暗反差很大，反之亦然。
如下圖所示，光源強度越強則投影的明暗反差越大（投影深）；而光源強度越弱則投影的明暗反差越?。ㄍ队皽\），因此投影的整體深淺是相對周圍環境而言的。
另外整體深淺還受光源的距離影響，由于光線有衰減性，光源距離越近則投影的明暗反差越大，而距離越遠則投影的明暗反差越小。例如下方案例中，明顯左圖的明暗對比更強，投影更深。
相對深淺
相對深淺是指投影自身的明暗變化，即是說投影本身的明暗分布并不一致，哪怕整體很深的投影，但本身還是會有相對的深淺變化，具體則看投影所處區域的開闊程度：開闊程度越小投影越深；而開闊程度越大則投影越淺。
一般情況下，靠近物體底部的區域開闊程度最小，接受的環境光（散射光/反射光）也最少，所以投影最深；而離物體最遠的區域開闊程度最大，能接受的環境光也最多，所以投影最淺。
綜上所述，整體是遵循著「近深遠淺」的原則，投影靠近物體的區域更深；而遠離物體的區域更淺。該理論看似復雜其實簡單，下面我再用一張示意圖進一步說明。
若要表現投影的「相對深淺」，我們要重點呈現3個區域：
這3個區域會沿著投影輪廓呈直線分布，如下圖所示，在實際設計時，投影的暗角區往往是單獨的薄薄一層（作為點綴，面積不能太大），而本影區和半影區則會合并成另一層（色調由深到淺的漸變層），這樣刻畫產品投影時就是用這2個圖層來呈現。
再看電商作品中，物體的投影刻畫也是分2層呈現，注意物體底部的暗角區色調最深。
投影呈現的最后還要調整「虛實」：「虛」是說投影的邊緣模糊；而「實」是說投影的邊緣清晰。和深淺一樣，虛實也分整體虛實和相對虛實。
整體虛實
投影的整體虛實是和光源軟硬及距離有關，先說光源軟硬，上節曾說過「光源的軟硬會影響物體的明暗過渡」，那現在還可加一點，光源的軟硬同時也影響著物體的投影虛實。
當光源為硬光時，光照直接，這時投影整體偏實、邊緣清晰、過渡生硬；而當光源為軟光時，光照柔和，光線分散，這時投影整體偏虛、邊緣模糊、過渡柔和。
除了光源軟硬，還有光源距離，光源距離越近則投影越虛；而距離越遠則投影越實。
這是因為光源的距離越近，相交的光線就越多，這時光線的相交區域也越大，如下圖所示，這樣投影便會形成更加柔和的邊緣。
從上圖能看到，光源的距離變化對物體的光影影響很大，不但影響了投影虛實，同時還決定了投影的擴散程度和整體深淺，這和我們之前講的一致。
一句話總結：光源的距離越近，投影的擴散程度越大、明暗反差也越大、邊緣則越模糊；而光源的距離越遠，投影的擴散程度越小、明暗反差也越小、邊緣則越清晰。
在實際運用時，「實影」會讓產品的明暗過渡生硬，暗部細節缺失，對投影的輪廓要求也高，總體較難掌握，因此使用相對較少。但「實影」卻有著更強的表現力和沖擊力，形式更加鮮明，富有張力。
而「虛影」則用的更多，它讓物體呈現的更加細膩和自然，由于投影的邊緣模糊，所以對輪廓要求也低，無需非常精準，哪怕結構復雜的物體，也無需勾勒出具體形狀，因此若對投影表現沒有把握，可以優先「虛影」，易操作也易出效果。例如下方案例中，不管什么樣的物體，在軟光的照射下，投影都是「模糊一片」，就算輪廓異常也不易察覺。
相對虛實
投影除了整體的虛實變化，自身也會有相應的虛實過渡，這和「相對深淺」類似，整體遵循著「近實遠虛」原則：投影離物體越近，則邊緣越清晰；若離物體越遠，則邊緣越模糊。
注意虛實過渡其實是個非常柔和的變化過程。之所以出現「越遠越虛」，是因為越遠的區域受到的環境光（散射光/反射光）影響越大。
當然在軟光照射下，有些畫面也會忽視投影的「近實遠虛」，將投影直接處理成整體模糊，其實也不太違和，因為「近實遠虛」算是一個非常微妙的細節呈現，不影響全局，但若能做到，畫面層次將更加細膩，如下圖所示。
小結
以上就是關于投影呈現的5大要素：投影方向、輪廓、顏色、深淺及虛實。但要注意設計不是物理學，設計師也不只是為了還原現實，因此很多時候不用太較真。例如有些畫面的光源并沒那么明確，這時投影有些地方刻畫的差不多即可，出現一點失真也沒關系，關鍵是不要讓人覺得畫面別扭和違和。
實戰案例
還記得前面講「明暗原則」時畫的立方體和球體嗎？下面我們用剛剛講的知識給它們逐步加上投影，物體只有同時加上明暗和投影，才算真正融進了環境里。首先還是先明確光源情況：來自畫面的左上方，強度中等，軟硬適中，白光。
在剛剛「物體明暗」的實戰案例中，我們曾給2款產品添過「物體明暗」和「投影」，但投影并未細講，現在再逐步剖析一下產品的投影刻畫，其實和剛剛講的立方體如出一轍，同樣先設定好光源：來自畫面左上方，強度較大，軟硬適中，白光。
前面展示的都是相對簡單的示意案例，現在將以2款產品作為主視覺，分別用側光和逆光來設計2張不同風格的Banner，通過完整案例讓大家了解兩種布光方式的不同以及物體對應的光影刻畫。
通過2個綜合案例，大家能看到不同光源所帶來的感受也會不同：側光使物體呈現的更加真實和立體；而逆光則營造出一種獨特的場景氛圍，因此我們要根據需求選擇合適布光。
另外刻畫投影時需要考慮的因素也有很多，例如影子的輪廓、深淺及虛實等等，但不用生搬硬套，還是前面那句話：核心是不要讓人覺得別扭與違和。
又又是一篇很長的文章，信息量很大，我們圍繞「光影」依次講了光源類型、物體明暗以及物體投影，當然都是從漫反射材質入手，相對簡單也有代表性，其實常見材質中還有鏡面反射材質和透明/半透明材質，而這2類則要復雜很多，也較難呈現，這里就不展開。但不管材質如何變化，正如本文開篇所說，「光影統一」都是核心原則，什么樣的光就會得到什么樣的影，雖然聽著簡單，但當中要做的細節其實很多。
可能耐心讀完，有些小伙伴會覺得很多內容過于理論和枯燥，好像不用這么麻煩也能做出差不多的「光影」，其實這種想法還是比較淺顯的?！腹庥啊购蜆媹D、色彩不同，它是現實中客觀存在的一種現象，若表現過于感性就會導致畫面違和、不真實，所以本文的大量內容都是在理性推導后得出的結論，總之「理性學習」是培養「正確設計感」的必經之路。最后為方便大家梳理邏輯和內容，下面附上本文的內容結構和知識框架。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：導出功能我們經常能夠使用到，看似一個很簡單的功能，實則在設計的過程中需要考慮很多的因素。本文作者對導出功能的全過程進行了思考，為我們分析了兩種解決方案，拆解了導出前和導出時的設計，并且進行了總結。
功能（百度釋義）：功能是一個漢語詞語，拼音為gōng néng，意指事物或方法所發揮的有利作用；效能。
綜合以上釋義，我們再從產品的角度對其理解：功能的好壞不僅僅關乎其本身，更重要的要看是否為解決實際問題而服務。
那導出功能，解決了什么樣的問題？我們先來看一個場景。
小A作為一名銷售人員，需要每月向領導匯報一次銷售情況，為了更直觀的讓領導看到銷售情況，小A要對銷售訂單數據進行不同維度展示與分析。而目前系統只能查看訂單列表與銷售總額，不支持不同維度的數據分析。
從場景中我們可以看到這樣一個問題，由于系統只能查看訂單列表與銷售總額，不支持更全面的數據分析，導致小A每次向領導匯報前，只能人工將一個月近5000筆的訂單（此處不考慮后續不斷增加的訂單量）統計在excel中，從客戶維度計算出銷售額、銷售量，完成客戶維的銷售情況分析。
從產品SKU維度計算出銷售額、銷售量，完成產品SKU維銷售情況分析，導致小A的工作效率很低，同時人工抄錄導致數據錯誤的的情況也常會出現，最終導致數據分析結果錯誤。
針對該問題，我們深入思考一下，小A想要進行更全面的數據分析，可以采用以下2種解決方案：
目前我們有兩種解決方案可供選擇，那我們采用哪一種解決方案會更好呢？
1）采用“新增銷售數據分析頁面”的解決方案
通過與小A的繼續溝通發現數據分析的需求并不穩定，處于變化的狀態。當依據小A的需求完成分析頁面后，過了一段時間發現產品隨著季節變化導致銷售額也不穩定，從時間維度的分析數據沒有參考價值，可能要舍棄這種分析方式。
此時我們發現，小A的需求可持續的時間極為短暫，不足以支撐一個長期存在的功能，但已經將其實現為功能，則意味著功能白做了或沒有產生與成本對應的價值。
2）采用“導出銷售數據到excel，通過excel的數據透視功能完成數據分析”解決方案
導出銷售數據到excel，可以規避因手動抄錄導致的數據分析結果錯誤問題，同時也會節省抄錄數據的時間，提高小A工作效率。
數據導出后，小A可以通過excel的數據透視功能或者其他第三方軟件完成定制化的數據分析，即使不開發數據分析功能，也可以滿足小A的“更全面的數據分析”需求。
例如，當小A導出如下圖所示的數據后：
小A第一步可以先完成不同月份的匯總，在表中添加“月份”字段，添加公式為“=MONTH(A2)”；
第二步：再點擊表格中任意單元格–插入–透視表–新建工作表，將省份拖入數據透視表字段的【篩選器】，將月份拖入【行】中，將A、B、C、D產品銷售額(元）拖入【值】中；將行標簽改為月份，每個字段以求和方法計算并修改字段名稱。
第三步：選中透視表中數據，調整格式為加千分位逗號，保留0位小數。
第四步：為了讓數據展現可視化，插入透視圖。
通過公式篩選、透視表、透視圖的使用，小A可以點擊查看不同地區、月份、產品的分類匯總數據，可以很直觀地反映出時間維度的銷售情況、不同地區的銷售情況、很好地為產品選擇、地域選擇做出數據依據支撐。
數據分析功能會從數據源、數據處理、數據的可視化來實現，而Excel的透視表對應了數據明細（數據源），公式能夠完成較多的數據計算任務（數據處理）。
透視圖可以直觀、清晰的展示各類產品在不同月份、不同地區的銷售情況及總的銷售情況分析，為產品布局提供指導性參考依據（數據可視化）。
另外當小A從數據透視圖看到某個月份銷售額過高，可以直接點擊查看透視表中的數據明細是否存在錯誤，當小A想查看每個產品銷售額的占比，可以新建數據透視表并將透視圖切換成餅狀圖查看。
由此可見，用Excel來做數據分析不僅可以很靈活的滿足需求，而且還很實用、很方便，也不會因功能的限制導致對數據無法分析。
通過以上論證，我們發現，既要能夠解決問題又要支撐一個長期存在的功能，還要用較低成本以及最快的方式來完成，我們采用最佳的解決方案：“導出”。
既然已經明確最佳解決方案是“導出”，那接下來就從導出的全生命周期看看，如何設計導出功能？
1）明確導出數據限制
無論當前的系統數據量是多少，建議都要做導出條數限制。
因2003版的excel 一個sheet表最多導出65535條數據，2007版的excel是10萬4000多條。如果不設限，當用戶導出的數據量超過excel單個sheet的數據量時，會出現導出失敗的情況，影響用戶的正常使用，且產生對系統的不信任情緒。
那應該限制到多少條數據？
我們先來了解一下導出的技術原理，當用戶點擊導出后，數據會被以excel的形式下載到服務器，服務器再通過網絡將文件發送給用戶。
在這個過程中，導出條數受限制的原因一個是服務器性能，另一個是用戶的電腦性能以及所使用excel版本，在實際產品設計時，根據實際情況，制定一個合理的數據限制即可。
回到開頭的場景中，用戶不僅要導出數據還要做數據透視表，假設用戶使用的03版excel，導出30多個字段，使用大量excel公式，最穩妥的是限制到1萬條數據以內。
做了一組極限測試數據供大家參考，使用一臺2核4G的服務器、1個用戶使用、導出條數是1048576條（導出最大條數）、導出3個字段、使用2010版excel，導出后當使用一個sum公式時，出現了如下圖的錯誤，導致excel異常退出。
2）明確導出格式
數據導出格式有.xls和.csv，.xls是二進制的文件用excel才能打開；.csv是文本文件，用記事本就能打開。而當前用戶導出數據后要進行的是數據分析，故只需支持.xls導出。
3）明確導出需求
導出一個excel一個sheet，還是一個excel多個sheet？
考慮到用戶導出數據后要對訂單數據進行分析，可以與用戶明確是否需要按某一維度如客戶維度將數據拆分成多個sheet，減少用戶操作數據的時間以便能把更多精力放在數據分析。
如果用戶不需要按照某一維度拆分數據，則采用導出一個excel一個sheet的方式。
表頭是否需要增加序號列？
當用戶導出訂單數據后，為了讓用戶準確操作某一行數據，需要有唯一代表一行數據的標記，而在訂單導出前是以數據庫的主鍵來標記，對于導出后的訂單，則需要自動增加序號列方便用戶操作。
是否有內容需要用顏色標注區別？
在導出訂單數據中，為了快速掌握銷售情況，有些數據是需要特別關注的、而有些不需要。因此，可以使用顏色標注來做區別，讓查看人員快速找到自己想要的數據，如可以標注總計快速查看總銷售額。
是否需要合并單元格？
對于導出后進行數據分析，不建議使用合并單元格，因excel中合并單元格后僅保留左上角的值如下圖所示，這樣會使得篩選出現錯誤，也影響批量的公式使用導致透視表無法分析。
如果導出后只查看數據，可以考慮使用合并單元格。
1）是否需要導出維度
百度釋義：維度是事物“有聯系”的抽象概念的數量，如時間維度是以時間作為描述、表達變量的度量尺度。
導出維度是指的按照特定場景下，導出以某個字段為主導數據且與該字段相關的其他字段數據。
一般來說，財務和倉庫的導出業務場景不同，財務需要以訂單維度導出，倉庫需要按商品為維度導出，如果無需導出維度，則不需要過度設計。
2）設置表頭導出字段
由于訂單的一條記錄數據字段會很多，包括：訂單號、銷售類型、客戶名稱、產品名稱、數量、單價、收貨人、聯系電話、賬期、發貨時間、預約到倉時間、發貨基地名稱、發貨方式、合同折讓率、應收款、已收款、未收款、產季等近30個字段。
而訂單分析時，收貨人、聯系電話、發貨時間等字段則無需導出。
因此選擇字段導出，可以讓客戶能夠更快速使用并完成分析。導出和查詢均要使用篩選，但呈現結果的方式不同，兩者的使用場景是可以借鑒的，建議可以放置篩選區。
3）是否需要支持選擇行導出
一般來說，導出數據為全量數據，如果用戶通過字段選擇不出需要的數據，此時要支持用戶勾選某些行數據，提示用戶當前勾選數據明細及數據條數。
4）其他處理
為了讓客戶清晰的明白訂單是如何導出的，需要在導出時給予導出規則、導出圖片、附件形式說明文字提示。
5）根據導出數據量，明確數據處理方式
從技術的角度說，針對較大數據量的導出場景，可以采用異步的處理方式，降低客戶的焦急心理。
所謂異步，就是用戶點擊導出按鈕后，后端接收請求并執行讀取任務，用戶可以不用停留在原處等待，離開當前頁面去處理其它工作任務，之后再打開任務頁面查看導出結果。
如果有數據可以預先計算，后端可以直接預先計算，同時避免了因采用同步的處理方式導致長時間等待的結果，客戶體驗會更好，工作效率也會更高。
6）是否需要任務頁面
如果用戶點擊“導出”按鈕后，10秒鐘內不能完成文件打開，會讓用戶產生焦慮心理。為了讓用戶使用體驗更佳，需要有一個固定頁面即任務頁面來承載導出任務列表。
功能，是為解決問題而生，而功能的起源是需求，需求是從場景中找到問題。
由此可見，功能設計流程一定會包含場景選定、問題分析并找準需求、解決方案分析、選定功能、功能設計這5個階段。
做功能設計時，時刻問自己三個為什么：為什么這是一個問題（問題具備危害性）？為什么要解決這個問題（被解決的價值）？為什么我選定的功能可以解決這個問題（功能的價值）？
導出不僅可以解決文中的“需要更全面的數據分析”的問題，還可以解決“數據離線使用”的問題，導出后，數據以本地文件的形式存在，可離線使用。
另外導出還能解決“數據交付系統外部人員”的問題，導出后，數據以獨立文件的形式存在，可以復制，傳遞。
文章來源：人人都是產品經理 作者：努力的小妖
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
首先看看我們的素材：
當拿到一張原始素材的時候！
怎么辦？該怎么入手？怎么找方向？
來吧！
先來看看成稿：
最終設計成果還可以，那么是通過怎樣的設計手法達到這樣的效果呢？
下面我就來分享一下我的作圖思路；
1.需求的梳理和信息收集：
理解核心需求，為設計方向做好前期準備
Slogan：傳武（作品名） 副文案：幽府之力，逆轉生死
我們漫畫類的作品眾多，內容風格繁雜，所以拿到需求之后,首先就是要對作品進行“調查”。通過對漫畫作品的閱讀，理解內容、故事、繪畫風格來定性設計的方向。這樣才能在設計過程中準確把握住作品調性，才能設計出最貼合作品風格內容的banner，才能把我們作品精髓的內容傳遞給用戶。
比如上面這部作品，SLOGAN“傳武”是我們要著重設計展示的。而副標題“幽府之力，逆轉生死”也很重要，往往傳達出了作品的賣點和調性。
再看看我們拿到的素材，一張單人的簡單素材，看起來很單調，似乎沒有可切入的地方。這個時候就體現出為什么要先對作品進行“調查”的重要性了！
2. 確定設計方向：
明確設計方向，精準展現作品調性
通過閱讀，我們了解到這部作品是一部熱血，古風，玄幻作品，還有大致的故事內容，再結合我們的副標題“幽府之力，逆轉生死”。
腦子里就已經開始有畫面了，“幽府”大概表達了一個場景，而“力量”和“逆轉生死”又傳達出了一種氣勢磅礴的場面。這就為我們設計的方向奠定了一個準確的方向。
首先就把我們的素材和文案拉進畫框里，進行一個大致的排版找找感覺。第一個左右排版就太常規了，在場面和氣勢上有些弱。第二個添加了漫畫框，想切入一些故事內容一起展示。但又有一些強調漫畫框的存在了，磅礴的場景沒有展示出來。但注意右邊的部分，把主標題排在人物的兩邊似乎是一個不錯的選擇！我們就從這里入手。
重新嘗試了一下，發現這樣布局好像就是我們想要的感覺哈！那既然確定了框架，我們接下來就按照這個方向繼續強化出“氣勢”“力量”的感覺。
我們以人物為中心，想象畫面里有力量從人物背后向外“迸發”所以我們的字體可以設計得有一些趨勢在里邊，也是以一個圓弧為中心向外生長。以光從人物背面照射出來大逆光的視覺，營造一種“力量”迸發的感覺。
3. 顏色的選擇：
跟隨之前確定的設計方向，提煉選色搭配。
我的方法一般是先從素材本身出發，根據想要達成的視覺風格來延伸出想要的配色。這樣得到的顏色更整體，人物素材能更好的融入背景氛圍中，也方便后期調整。觀察的素材，發現他的顏色都比較灰，缺乏對比，就會顯得很“平”，難以營造出我們想要的感覺。所以從人物素材本身的顏色出發，提取同類色和提高飽和度。結合考慮到有利于運營推廣的視覺需要“吸睛”。得出了后面一組對比更強烈的顏色。
4. 有主次地進行深入刻畫：
畫面中最主要的肯定是我們的SLOGAN和人物角色，是我們要重點刻畫的對象。剩下的副標題、背景氛圍次之。不僅是要在排版上做區分，在視覺感受上也要做出差異化。這樣才能有遠近虛實的感覺，增加空間感。
我們希望畫面具有一定的質感，增加其沖擊力。所以我們在刻畫背景的時候可以選擇一些漫畫里比較好的場景，或扉頁背景素材來做底圖。再疊加上一些紋理材質，再一層一層地來給背景打光，用“疊加”“柔光”“濾色”等圖層屬性來慢慢提高亮度,最終達到我們想要的效果。
小技巧1：相同光源的照射，傳達到不同的物體上時，它的視覺表現時不同的。并不是光源時什么顏色，照射的地方就會是什么顏色。
我們來對比一下兩種顏色的實際效果，可以說是很直觀了！
小技巧2：為了使素材更完美地融入到背景中，我們可以后期人為地給素材增加一圈高光/輪廓光。這樣使畫面更融洽的同時，也能讓我們的人物變得立體起來！。
再來對比下沒加輪廓光的感覺：
真的是少了些味道和細節哈哈，其實在很多時候我們都可以對我們的素材進行二次加工讓其提升一定的品質，配合畫面以達到更好的視覺效果。
5. SLOGAN的設計：
主文案在我們草圖的基礎上，結合整體畫面的趨勢進行細化。（增加毛筆筆觸，和優化筆畫）。
這里主要分了三層進行處理顏色層(文字層)：主要給一個基礎顏色；
材質層：因為這兩個字的占比比較大，所以可以增加一些紋理細節讓畫面更豐富耐看；
厚度層：讓后面的光源，在我們的字上形成一圈高光，可以突出我們的文字。
增加一些光暈效果，再放上做好的SLOGAN看看效果，好像還不錯。
有些同學可能會疑惑這里為什么字體要做一個厚度層，我們也上一下對比圖先看下效果：
可以看少了一些些質感和重量，在輕量的風格里ok，但是在我們當前的畫面里就差了些感覺，所以才做了厚度層來強調光線照射過來的視覺增強畫面沖擊力。
之后主要是做一些符合我們畫面氛圍的漂浮元素，豐富畫面。有一定手繪功底的話就再好不過了！
完成，到這一步差不多達成了我們想要實現的效果，“氣勢”和“力量”的感覺在這么“樸實無華”的素材身上也基本表現到位了。還是比較滿意的，差不多可以提審交稿了！
最后在觀察觀察整體的畫面，審視一遍,查缺補漏。
發現我們的畫面好像有些燥啊，紅色和黃色飽和略微有些高。整體的感覺也不夠清晰。最后再做一個調整吧。
降低一些紅色和黃色飽和度，在暗部加一些紫色(主文案暗的部分和畫面四周的暗部)。增加冷暖對比就好多了。
小技巧3：蓋印整個圖層——在濾鏡里面找到其他——高反差保留，數值根據畫面來調。
然后就得到這么一個圖層
是不是很神奇？別慌，把這個圖層的屬性改成線性光看看,畫面清晰了很多，也變得更有質感了！
最后看下過程演變圖：
總結
1）梳理需求內容：通過閱讀漫畫作品，深入了解內容并收集整理信息；
2）提煉關鍵字延展：嘗試多種可行方案，最終確定設計方向；
3）slogan的設計：一定要符合畫面和作品調性，達到與畫面相映成輝的效果；
4）細節把控：完成之后再回過頭來審視整體畫面，查漏補缺力求做到最好！
文章來源：UI中國 作者：騰訊動漫TCD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
輕擬物本身也是擬物，所以它的核心基礎和擬物設計師一致的，只是省略了更多復雜的細節。而對于整個擬物的體系來講，最重要的東西實際上只有2個，形體、光影。
1. 形體表現
形體的表現，就是對圖形外輪廓的樣式的呈現。在過去我們寫的圖標分享中，有寫過面性圖標進階的設計中，可以包含更多的細節、內部元素，而不是僅僅只有外輪廓。
輕擬物的形體設計就要處于進階面性圖標或者更難的水平之上，即你要把這個圖形的內容有明確的示意并畫出來，而不是用抽象的圖形做填充而已。
比如大眾點評的快速入口圖標，雖然看起來很復雜，但是那是配色上的復雜，而不是形體輪廓上的具象化。
換句話說，擬物插畫的圖形基底，類似扁平插畫風格圖標，不能表現得太抽象，也不能增加過多的細節，需要一種恰到好處的平衡（玄學），這就非?？简炘O計師的判斷和經驗了。
并且，在描繪輪廓的時候，新手盡可能的采取正視圖來進行繪制，而不要通過俯視圖、側視圖、斜視圖等方法來呈現圖形的多個面，這樣難度會大幅度上升，比如下面這種情況。
2. 光影表現
除了形體外，光影就是整個擬物的靈魂了。
當一個完整的圖形完成填充色時，它是扁平圖案，如果完成光影呈現的時候，它就是三維空間的立體圖形，比如下面這個圓的案例：
在擬物的設計中，我們對光影的定義是至關重要的，所以首先就是針對該圖形確定光源的方向，是上方、前方、左上還右上，這對后續的設計有一連串的影響。
如果對光影沒有正確的解釋，那么在制作細節的漸變角度、投影的使用上，就會產生錯誤的設計，造成光影視覺沖突和矛盾。
在創建了光源以后，物體受到光線的影響就會產生明暗面和投影，可以簡單劃分成4個部分，高光、亮部、暗部、投影。
這和我們學習的素描有一定的差異，美術中對光影的表現還會包含明暗交界、反光面，這對于輕擬物的來說負擔太重，所以我們要去掉它們，接下來重點講講高光和暗部。
高光是物體作為受光物對光源的直接反映，比如人像攝影中人眼眸中的高光就是對閃光燈的鏡像表現，再或者一拳超人中男主光頭上長期存在的高光配飾（多數動畫的光頭角色都有）……
高光可以非常有效的增加畫面的層次和對比性，讓物體看上去更有沖擊力和觀賞性。
而暗部，則完全是為了正常表現物體結構和弧度增加的示意，因為不在受光面，所以顏色會變暗。在實際操作過程中，我們可以通過漸變的方式開控制明暗的表達，但盡量不要直接手動設置一個漸變色出來，而是為它疊加暗部或亮部的黑白透明度漸變。
了解這幾個特性以后，下面，我們就通過一個實例來講解一下輕擬物設計的過程吧。
作為輕擬物的演示，直接畫個圖標講一遍怎么操作是沒什么用的，我們要從實際場景出發，用它來解決一些真實的問題。比如看看下面的 KFC 官方 APP 首頁：
總結它的問題，不難發現首頁頂部業務功能太多了，頂部圖標就包含30個（加滑動的），雖然每個模塊圖標單看都沒有硬傷，但堆積到一起，就使得頂部缺乏足夠的信息層級和對比性。
我們要做的，就是通過輕擬物的方式，調整快速入口最大的三個圖標，凸顯它們的重要性以及和其它圖標的視覺差異性。先從第一個圖標開始，講解一下如何完成輕擬物化設計的升級。
第一步：確認輪廓造型
第一個操作，即確定圖標本身的輪廓。根據原有圖標的樣式我做了一些改動，包括加粗車頭，減少高度，增加車燈等。并對每一個模塊進行純色的填充，定義它們的色彩和做出區分。
形體的重要性在于要對圖形本身有比較合理的呈現，不要讓比例失調和圖不達意。
第二步：完善圖形細節
這一步，就要在原有基礎上，進行下一步的深入。包括對一些細節交代得更清楚一點，增加一些有趣的小元素等等，完善它的具體樣式。
第三步：增加基礎的暗部表現
在這里，我們就要開始為圖標增加高光了，高光從右上角打下來，那么有疊加關系的元素就會產生一個向下的投影。并且反向暗部的表現，讓整體的立體感稍強。
這一步在軟件中主要使用蒙版功能，通過蒙版在背景上方創建一個圖層，然后添加深色的透明度漸變，就可以表現出對暗部和投影的效果。
第四步：增加高光效果
接著，就是最后一步，將高光添加到畫面中來，將整個圖標的質感進行拉升。
通過上面的演示，我們可以將整個擬物設計流程精簡成：
然后，通過這樣的步驟，再來完成后續的兩個圖形，拆解完的效果如下。
然后，再用這三個修改后圖標套用進原來的頁面，并做出對應的修改，再來看看前后對比：
通過這個對比，我們就可以看出在這個復雜的首頁頭部中，輕擬物風格可以從一眾平面中被凸顯出來，且不會顯得太突兀和復雜。
而這就是輕擬物在項目設計中的實際作用，當畫面元素已經開始超負荷，且容易導致同質化的審美疲勞和主次不清時，就是輕擬物登場的時候了。
最后的總結，學習輕擬物就是增加我們完成界面視覺輸出的可能性，為視覺創意增加一些儲備彈藥，以應對越來越復雜的互聯網產品和職業要求。
我們只在這篇羅列了制作的順序和思路，并沒有把軟件的操作完全放出來，一方面是因為時間上來不及，另一方面是希望大家不會被軟件的使用框住。只要概念清楚了，那么使用 PS、AI、Skecth、Figma 還是 Affinity 等軟件都可以做出來。
文章來源：站酷 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
伴隨著移動互聯網的快速發展，5G通信，人工智能，物聯網等新技術的發展也越趨成熟，人們接觸信息的效率不斷在提高，接受信息的緯度也更廣泛，如何消化我們在生活中被大量切割的碎片化時間，如何能讓用戶更聚焦內容不被打擾，拉長用戶的停留時間，我們正身處在一個內容快速消費的時代。
長短視頻，動畫電影，互動裝置等形式能夠更容易吸引用戶的注意力，無論是消費者，創作者或是設計的從業者，制作的門檻降低了，以往是一個團隊的輸出，現在一個人也能夠打造高質量的爆款，人人都是內容的生產者成為了這個時代的標簽。文章從設計從業者的角度出發，從攝影攝像，視頻動畫，動態圖形，交互裝置等四個緯度來闡述內容設計的制作方法與近幾年的風格趨勢。
實拍一直是多媒體領域最常見也是最不可替代的呈現方式，在他的發展歷程中這項技術也衍生出了不少有趣的風格和玩法，隨著技術的進步，各種實拍新技術也是不停一直在影響著攝影師拍攝。
1. 微距拍攝
微距，特別適合用來展示被攝物體的細節，比如小昆蟲的五官，花蕊上的露水，冰霜上的晶體結構等等。您可以在攝影棚或室外環境中拍攝微觀照片和視頻，只要您充分放大被攝體即可。通常來講人眼最近對焦距離是15cm，低于這個距離就看不清東西了，而專業的光學矯正鏡頭按照近距離拍攝進行設計可以拍攝出一個極端的近景視圖，可以得到肉眼無法看到的細節。
△ 來源于網絡
產品為了吸引消費者的購買熱情，自然離不開產品宣傳片，如今的產品廣告不再局限于片面的展示產品，而是開始尋找不同的視感令自己的產品看上去更具吸引力。在很多產品拍攝當中會經常用到微距拍攝的手法，正如前面所說，利用微距拍攝手法展示產品部分的細節有的時候或許可以讓畫面更有質感。
△ 威士忌廣告片段
△ TOREAD探路者戶外新品面料-「遇水搭橋」系列主題微距圖拍攝
微距攝影是區別于常規攝影的一種特殊的攝影方法，這門拍攝技術帶來的視感也非常的吸引人，但是往往這種特殊的拍攝手法卻非常受限于硬件設備，正如我們前面所說的設備參數都是專門的微距鏡頭設計的。為了抓住這一點，讓更多人知道這個有趣的拍攝手法，市面上也出現了越來越多不同的微距鏡頭給不同需求的攝影師使用。近兩年比較經典的一個就是LAOWA24mm鏡頭，在于它獨特的形狀可以到達普通鏡頭無法企及的位置，機位更加獨特。
△ 來源于網絡
2. 升格拍攝
升格拍攝無疑是讓視頻表現提升幾個檔次的常用手段之一，電影的標準幀速率是24幀每秒，但是為了實現升格就需要一些技巧，比如拍攝的幀數高于24幀每秒，這就是我們常見的「慢動作」?，F有的升格拍攝幀數基本上分為30幀，60幀，120幀，240幀，再往上則是影視和特殊拍攝會用到的了。由于肉眼觀察高速運動物體是有限制的，在拍攝高速運動的物體的時候，利用升格將畫面播放速度變慢便可以更好的觀察到物體高速運動時的狀態。
△ 來源于網絡
在廣告拍攝當中升格鏡頭也是一個十分常用的拍攝手法，正如我們所說肉眼觀察高速運動物體的速度是有限， 往往人們沒辦法看清楚快速運動的物體，有些產品廣告使用慢動作升格鏡頭加上充分美化的畫面便更能吸引消費者的目光。
△ 來源于網絡
拍攝影片的時候在不同的環境之下也會利用升格烘托氣氛，在我們看到的很多片子里面有緊張刺激的，煽情的，都會利用升格來烘托片子的氣氛。由于相機技術的進步，拍攝變得比以往任何時候都更加容易。今天任何人都可以通過相機和高質量的麥克風輕松地成為vlogger拍攝出好看的旅拍視頻，加上升格鏡頭在硬件技術的加持下可以快速的出效果，令這部分人群創作出更好的拍攝作品。
3. 無人機航拍
航拍一直以來都是一個不可或缺的拍攝手法，很多的電影以及廣告宣傳片當中我們都可以看到不少的大范圍運鏡片段，天空中的視角對與陸地上行走的人來說還是一個十分新奇的視角，一般來說也很難看得到，所以片子中加入航拍的元素往往可以增加不少高級感。
△ 來源于網絡片段
如今技術發展，無人機的民用化推進，市面上各大廠商開始推出自己的航拍無人機，航拍也開始出現在了普通人的視野中，讓普通人也可以在高空拍出想要的風景。加上如今4G和5G技術的發展，短視頻的流行，令網絡上的自媒體人也擁有了更好的展現自己作品的平臺，這些拍攝技術的平民化讓自媒體人們可以更好的發揮視頻創作，而不會總是局限于技術。
△ 來源于網絡片段
4. 高質量色彩呈現
如果你有自己拍攝視頻，那或許有聽說過LOG配置文件，LOG模式通常在專業和專業消費級相機中所配置的拍攝模式，LOG模式的顏色看起來非常平均，因為這樣可以地減少截取捕獲的高光或陰影。這使得輸出的視頻幾乎沒法直接使用，直到對其進行編輯。它的優點在于，以輸出高比溶度的視頻方式來調整顏色和對比度（即，對其進行分級）從而可以得到自己想要的視頻顏色風格。
△ 威士忌廣告片段
△ ANGIE’S爆米花廣告
LOG指的是數學上的曲線函數，并不是一個獨立的拍攝風格，而是風格用上了LOG函數轉換，在這個模式下我們可以看到無論是明處或暗部LOG都將細節保留了下來，在這個基礎之上調出我們想要的顏色方可得到一個更加清晰的圖像。在數據圖當中我們也可以看到log模式下所有的顏色數據都處于中間值，不會有過度夸張的位置，編輯之后的圖像所有顏色的明暗都區分開來了，也形成了自己想要的色調。
△ QQ x MINISO
實拍產業作為一個主流多媒體形式一直在發生著改變，隨著科技的進步，曾經我們需要大費周章才能拍出來的效果，如今也越來越簡單。各種新技術的出現不斷地改變著人們拍攝的方式和形式，新的玩法也層出不窮并不斷影響著其他的多媒體形式。未來實拍將會更加的簡單平民化，讓普通人也能拍出曾經大費周章才能做到效果。
縱觀整個互聯網設計行業發展史,計算機圖形技術一直在影響著設計。
在計算機圖形輸出里，最終效果呈現靠的是圖像渲染（Renderding），渲染又分離線渲染和實時渲染，以往字面上理解則是實時渲染，高質量則是離線渲染。下面介紹一下為了如何可以將兩者結合實現高質量輸出CG，視頻動畫。
Realtime-Render （實時渲染）：在虛擬世界的圖形表現中，實時渲染占有很重要的地位。所謂實時渲染，就是圖形數據的實時計算和輸出。如果說實時渲染的概念對你很陌生，那如果用實時渲染領域中的一個重頭戲來給你舉例，相信你就不會有陌生的感覺：那就是游戲。游戲因為需要玩家去互動，因而對渲染的實時性有很高的要求。隨著計算機圖形技術的不斷發展、硬件計算能力的不斷升級，游戲實時渲染的畫面逐漸從簡陋走向逼近真實。
△ Unreal engine 4
以上Demo 是專業團隊制作完成的高質量短片，但是普通用戶想要達到這種級別還是有些難度的。放出這些短片也代表現有的軟件技術和硬件設備已經可以達到這個水平，當然有也商業競爭的成分Unity和Unreal 是目前用戶最多游戲開發引擎，想要在游戲以外其他領域競爭實時渲染市場份額。也不斷在更新自己的技術。這代表除了游戲行業以為其他跟圖形有關的（像電影，廣告，互聯網）行業也慢慢開始進入實時渲染時代，到目前為止實時渲染還沒有真正得到廣泛應用是因為實時渲染還不能達到想離線渲染那樣影視廣告級別高質量的畫面。
△ Visual ASMR Rock by Onesal
離線渲染大概的流程需要經過模型-場景-綁定-材質-燈光--合成-輸出，每一個步驟都需要大量的技術支持，像上面阿凡達這類大片級別的影片，為了某個效果很研究開發一些新的技術，所以要詳細說明要花很多時間，我們就不詳細說明了，回到主題高質量輸出上面。所以每一步廣告影視作品，都是靠大量的時間和人力堆出來的。那么廣告影視這種渲染方式為離線渲染，而游戲為實時渲染。
△ Unreal engine 5
實際上二者的區別也就在這，但是就是因為這二者的這一個區別，就引發了不少的技術差別在里面。離線渲染對時間往往沒有很極端的要求，用接近現實的光線跟蹤算法技術，設置很高的采樣值和迭代次數，就如阿凡達每一幀畫面需要渲染幾十個小時以上，只要畫面質量夠真實，這些時間成本都可以被容忍。而游戲畫面的渲染，也就是實時渲染的話，則在時間上的資源尤其地珍貴游戲所用的實時渲染就沒有那么滋潤了，先不說幾分鐘渲染一張這么的事情，就連1秒鐘出一張，都不夠人看的。對于游戲來說，再不濟，也要有1秒20多張，才能給玩家看（還不算能流暢操作的情況）。那么實時渲染有可能用于畫面要求高質量的影視廣告等行業嗎。
虛幻5
2020年5月13號,Unreal engine官網發布了Unreal Engine 5 并在Playstation5上運行進行展示Demo（「Lumen in the Land of Nanite」）
△ Unreal engine 5
該演示展示了虛幻引擎5的兩大全新核心技術：
△ Unreal engine 5
Nanite
虛擬微多邊形幾何體可以讓美術師們創建出人眼所能看到的一切幾何體細節。Nanite虛擬幾何體的出現意味著由數以億計的多邊形組成的影視級美術作品可以被直接導入虛幻引擎——無論是來自Zbrush的雕塑還是用攝影測量法掃描的CAD數據。Nanite幾何體可以被實時流送和縮放，因此無需再考慮多邊形數量預算、多邊形內存預算或繪制次數預算了；也不用再將細節烘焙到法線貼圖或手動編輯LOD，畫面質量不會再有絲毫損失。
△ Unreal engine 5
傳統的模型資產做法–先是用Zbrush等雕刻軟件又或者是3D掃描等數據模型–重新拓撲為高、中、底三種面數模型–展UV上材質–烘培法線、凹凸等貼圖–導入游戲引擎中使用，那么為什么要做那么復雜呢？游戲引擎運行資源越大，可能會導致游戲的流程度和游戲體驗不好，為了讓玩家有流程的操作體驗，通過高精度多邊形幾何體烘焙法線凹凸等貼圖用在低精度多邊形幾何體上可以保留高模的細節從而節省運行資源提升游戲流暢度，Nanite完美解決了這個問題。
Lumen
是一套全動態全局光照解決方案，能夠對場景和光照變化做出實時反應，且無需專門的光線追蹤硬件。該系統能在宏大而精細的場景中渲染間接鏡面反射和可以無限反彈的漫反射；小到毫米級、大到千米級，Lumen都能游刃有余。美術師和設計師們可以使用Lumen創建出更動態的場景，例如改變白天的日照角度，打開手電或在天花板上開個洞，系統會根據情況調整間接光照。Lumen的出現將為美術師省下大量的時間，大家無需因為在虛幻編輯器中移動了光源再等待光照貼圖烘焙完成，也無需再編輯光照貼圖UV。同時光照效果將和在主機上運行游戲時保持完全一致。官方的宣傳已經非常親民了，很多業外人士基本知道是怎么回事，也知道虛幻引擎5的優勢。簡而概之：簡化的制作復雜程度，模型師的工作量將大大縮小，二是畫質效果又將邁向更高的一個品質。
△ Unreal engine 5
Unreal 5 這兩大功能可以說是克服了現階段的難題讓實時渲染更接近影視級渲染，然后簡化了以前復雜的工作流程，讓創造變得更簡單了。這代表著以后只要涉及CG類的行業都會發展巨變。
2019年11月12日Quixel 公司被Epic Game（Unreal的公司）收購并宣布Quixel 旗下Bridge(材質管理軟件) Mixer(材質編輯軟件) Megascans(3D掃描資產)對所有Unreal engine 用戶免費，這一爆炸新聞。此前Quixel 是靠賣高精度3D掃描資產盈利的。用Megascans 的3D資產可以創造電影級4K-8K的真實畫面，Unreal engine 5的dome也是用的Megascans 的資產，下面的案例（Rebirth）也是用的Megascans的資產。
△ Rebirth
在沒有免費開放Megascans的之前想要制作8K的3D掃描資產是非常困難的，需要大量的設備和人力支持，在網絡上購買價格也不便宜導致普通個人用戶是很難制作這樣高精度的畫面，這一消息讓更多的自由職業者和個人藝術家加入了實時渲染的潮流趨勢中。讓4K創造不再那么困難。
Megascans Ecosystem: Giving more Power to Artists(Megascans生態系統)
△ After the mountain Rain
來自中國的藝術家Fisher Dai（戴鑫祺）使用Megascans和Unreal engine4創造的4K個人作品。
△ After the mountain Rain(戴鑫祺)
2020年7月14日Unreal Engine 官方發布一條宣傳片（Unreal for all Creator ）by The Mill,視頻展示了Unreal Engine實時渲染在互聯網、游戲、電影、電視、建筑、汽車等行業驚人的表現。
https://www.youtube.com/watch?v=6xbxA8tnlbY
△ Unreal for all Creators by The Mill
伴隨硬件技術的發展和軟件性能各方面的提升，能夠更加真實的模擬自然的運動規律和真實的質感；畫面趨向更為克制的顏色呈現；在一些品牌廣告短片中，使產品的屬性與抽象的自然屬性相結合，使用相似的自然形態去表現產品的特性，突顯產品的特點。
△ 《Bloom》by Hubert Blajer
△ 《Mostly wood》by Nejc Polovsak
△ 《Digital Design Days 2020 titles》
R&D
（Research and development研究與開發）在三維領域是一直有存在的，只是以前大公司才會有的職位，R&D早期是服務存在于影視動畫公司的，像工業光魔，迪士尼，皮克斯，這些公司都會有自己的R&D部門，最近幾年隨著三維技術進步簡化，使得更多的人加入這個行業，很多個人R&D藝術家大量的出現在網絡社交品平臺上，不只是影視動畫，還有廣告，汽車，消費品等行業。舉例R&D在廣告行業的應用，藝術家們會對某個產品的材質和物理學的多方面進行研究，并用三維軟件(houdini C4D等)視覺化出來，比如下面這個案例的海綿材質物理碰撞模擬。
△ Manvsmachine 《No stress Test》
△ 《A website makes it real》
△ Lukas Vojir R&Dshowreel
使用VR設備進行環境建模工作。
The Loch by Boxfort
同樣的環境下，人們對于手繪等真實樸實的質感又有了新的追求，各類動畫的制作方式得到了不斷優化和流程上的整合，在軟件使用上也多了更多選擇，使得動畫的呈現方式趨向于多種形式結合。
例如常見的3D的場景和鏡頭運動搭配2D的角色動畫，使用非常流暢的鏡頭運動和豐富細致的3D場景，而視覺表現上保留傳統2D動畫的一些特性，兩者結合形成的一種新奇動畫語言，在未來還會繼續流行。
△ 《PlusOne Manifesto》 By Martijn Hogenkamp
△ 《Disney XD And Children’s Health》By BLIRP STUDIO
△ 《企鵝誕生記》By ISUX
Blender 是現階段很熱門的開源（免費）三維制作軟件，因為是開源的而且功能豐富所以在市面上已經有了很多個人藝術家使用。Grease Pencil只是個方便三維空間中起稿的輔助性工具，在版本2.8之后這個功能被大幅加強成為了一個超級強大的畫筆工具 ，發布以后出現了很多優秀的藝術家用它來創作。
△ 《Futuro Darko》 By Craig Farquharson
5. 影視手法的動態呈現
在這個快速變化的時代，我們趨向追求更快更緊張的刺激感受。受到《蜘蛛俠平行宇宙》、《阿麗塔》這樣的動畫電影的出現所帶來的影響，動畫廣告在一定程度上混合了影視和游戲常用的一些表現方式，比如更大的鏡頭畸變和游戲風格的未來元素，快節奏的剪輯手法配合游戲電音，能夠在短時間內給觀眾帶來強烈的感官刺激與情感體驗。
△ 《Gogoro S3 Future Fast》 By MIXCODE STUDIO
在充滿了未來感科技感的3D大趨勢下，顏色丟失，色調分離，質量損失的顆粒質感，低飽和低保真的畫面呈現，也開始帶來一種新的視覺感受。過往的動畫風格與當下科技感、未來感的潮流碰撞又呈現了新的表現方式。這種風格應用在街頭潮流的時尚產品的時候，跟以往60或80年代的復古元素相結合，使用新的設計語言去包裝整合，能夠強化產品的故事感，引起大家強烈的共鳴和代入感，激發大家頭腦中那段美好回憶。
△ 《The Legend of IQOO 戦う！鉄拳》 by 茶山有鹿
△ 《MouseQ 滑板俱樂部》By ISUX
△ 《ACE OF SPADES》 by Tony Babel
△ 《Can of worms》 by Tony Babel
7. 更克制的色調與秩序感
在充斥著各式各樣的新鮮元素的當下，節奏更快顏色更有吸引力，各類信息視覺都在捕捉你的視線。干凈的色調、簡單的視覺、真實的肌理、強調秩序感的動畫的出現，使得人在視覺上獲得了舒適的體驗，很大程度上緩解了極速發展的時代所帶給人們的焦慮。
△ 《BIC》by Artem ‘Hinz’ Yudin
△ 《Microsoft SharePoint 》
△ 《Beautyrest》 by Tendril
突破限制的版式
在當下許多海報等平面視覺都有了動態化表現的需求的情況下，動態視覺的加入打破了很多條框和顏色的禁忌，去掉了華麗的修飾性的元素，在內容的呈現上體現了更多的創意，畫面中不斷變化的圖形排列、動態的3D圖形和字體起到了非常吸睛的效果。在大量時尚品牌和藝術活動的宣發當中，畫面結合強烈的撞色熒光色，以及波譜的拼貼藝術手法，能夠更好的表達品牌傳遞的時尚感和新鮮感。
△ CreativeCrew
△ Le Cantiche 1320
△ reed.be
△ Olympic Sports Website by Daniel Tan
近些年來各媒介手段和智能裝置應用的興起，人們已經不滿足于單一的視覺感受。電子音樂與擬態三維全息投影相互配合，在不斷變化的聲光交互光影和空間場景中，能迅速把觀眾帶入多個不同的全新場景的沉靜式體驗。
AR/VR
△ Fórum Internacional de Gaia 2019
△ 《JOURNEY》 by NOHLAB
△ 《Teleport 》By PITCH
在信息爆炸的2020年，Motion的流行趨勢在不斷變化，有的風格將會繼續延續，例如在各個場景中大量應用的3D視覺，會在未來更加普及和優化并趨向于更輕量化的新極簡主義；有的風格重新回歸到大眾視野，例如Y2K、色損故障、顆粒等復古風格和逐幀動畫，它們與新環境下的設計語言相互碰撞，給人們帶來新鮮的視覺感受；在視覺設計領域，網頁設計中融入了更多精彩的交互動畫，界面的UI設計中體現了更多激動人心動效語言，版式設計有了動畫的加持更大膽更具活力且不斷突破現有規則。
隨著硬件和軟件的跟新迭代，同時我們也看到了更多其他方向的可能性，例如實時渲染以及虛擬現實。據資料顯示，虛擬現實的市場規模預計將達到447億美元，復合年增長率為33.47％，這個市場會逐步打開，影視廣告等行業將迎來前所未有的技術革命浪潮。大批更智能的應用軟件橫空出世，學習門檻的降低使得更多藝術家和設計師共同參與，跨媒介的應用將在未來百花齊放。
多媒體的設計趨勢在未來會如何發展，我們拭目以待。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
容易被忽視的圖形，不僅能傳達不同的情緒，也能提升視設計的品質感。
本文節選自德國紅點獲獎設計師大凡的分享，主要包括三個部分：
1 圖形是什么
2 好的圖形設計長什么樣
3 圖形設計創意思路分享
提到圖形設計，你腦海中對應到的第一個畫面是什么？我們打開了某搜索器，檢索了「圖形」二字，這里的圖形多集中于「幾何圖形、標志、矢量圖形、圖標」。
我們又搜集了一些不錯的設計網站，搜索「圖形設計」或「graphic design」，它的表現形式與應用范圍都擴大了，海報、信息、插圖、包裝、圖標、字體、攝影、標志、品牌，無所不在。
如果給圖形下個定義，它主要指二維空間中可以用輪廓劃分出的空間形狀，設計中無處不在的表現手法。它與色彩、版式、字體等一樣，在設計師的知識體系中處于相對重要的位置，但往往容易被忽視。
在優秀的設計作品中，圖形可以作為主體、符號、輔助、信息等不同角色出現在設計的各個應用場景中，可以通過抽象的、具象的、平面的、空間的多樣化表達手法，傳達出不同風格的視覺表現力。
那么，好的圖形是什么樣的？我們可以從3個維度去感受好的圖形設計作品：抽象、創意與風格。
抽象是對日常事物的提煉與概括，我們先來感受一下下面兩組建筑，某搜索器中的「最丑建筑」和「知名建筑」之間的對比?？梢院苤庇^的感受到，抽象的圖形與色彩可以傳遞更加豐富的情感。
對企業來說，溝通成本代表的就是金錢，而一個抽象的符號就能巧妙地為企業節省了很多說話的時間。
我們可以看這個案例，1個點產生了多少可能性？這是美國一家大型連鎖超市的logo，以這個點為原型，衍生出了各種解鎖生活方式的海報。簡單的點，發散出各種生活方式，一看就能夠知道超市供應的各種商品。
設計的創意體現在哪兒呢？我們先看看那些腦洞大開的大師們是如何使用圖形的。
第一位是福田繁雄大師，在他的年代沒有人用這樣的圖形方式做設計，炮彈朝向炮筒里面，一張非常簡潔的反戰海報。他也特別擅長運用圖形的異形同構。
第二位是瑞士的史蒂芬邦迪大師，這些是他為劇場設計的宣傳海報。簡單的人形搭配鮮血撕裂感的方式就可以把卡門劇情表達出來了。
創意是天馬行空的。我們看下面這個音樂節海報設計，拆解其中包含的文字、吉他、人影、波浪等，每個元素與音樂都息息相關，組合在一起就缺了些創意表達。
再看網易云音樂與快手聯合做的民謠音樂節H5，音樂的感覺一下就出來了。
很簡單的圖形運用，就能產生創意性的差距。
著名的可可香奈兒女士曾經說過，流行稍縱即逝，但風格永存。
從包豪斯開始，設計風格發展到今天已經是多元混合存在的，很多所謂流行不過是循環與往復。
即使是運用最簡單的圖形，也可以表達出不同的風格，甚至引領浪潮，為品牌傳播加分。比如，下面這組圖，你能猜的到是同一家公司的傳播海報嗎？
現在，我們感受到了圖形的巧妙之處。但具體拿到一個需求后，我們該如何去用圖形輔助設計呢？這里分享一個“三步理性創意發散法”。
舉個栗子，我們為「夏季青年音樂節」設計一張活動海報。
我們首先給主題做一個分析、把關鍵詞拆解與排序后，視覺的重要程度依次是：音樂、夏季、青年、節日。
這些關鍵詞讓你最直觀的感受是什么呢？
基于感受，我們可以嘗試提取出基礎的圖形元素了。
色彩方面，我們也可以根據對應的元素去設置，最終我們提取出了這組圖形元素。
這一步需要我們設計師發揮想象力了，為一組元素找到視覺上的聯結關系。這也需要大家平時能去多看、多想、多練。
然后，我們為圖形融合進更多的細節。
我們首先采取最簡單的主體式構圖方式，將想突出的圖形最大化、成為視覺焦點，添加海報所需文字進行排版。
這種方式能夠做出相對合格的圖形海報，但我們可以用不同的版式與分割構圖，去嘗試更多的可能性。比如第三個海報，我們可以先建立不一樣的版面分割、進行配色，然后再放入圖形與文字進行排版，營造不同的畫面感覺。
其他兩組也可以用這種方式、進行不同嘗試。
最后，我們可以整體上對比一下。
大師級的創意難得，但基本的圖形創意確實有跡可循，希望本次的分享能夠給大家帶來圖形思維上的啟發。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
文字 LOGO 的設計經常會采用優質的經典字體作為基底，那么我們所熟悉的著名品牌會使用哪些經典字體？這些字體本身又有哪些特質，被這些品牌所選擇？而設計師在設計的時候，又是如何借用這些字體的特質來凸顯品牌的特征？這回借用一個 LOGO 「逆向工程」設計項目，盤點8款經典英文字體，以及一系列優秀的 LOGO 設計范例。
雖然很多品牌LOGO 在設計的時候，會專門設計字體，但是實際上，很多品牌的 LOGO 其實是使用既有的字體來進行小幅度優化來進行設計的。最近幾年，設計師 Emanuele Abrate 一直在關注一些著名的品牌 LOGO 背后的設計處理技巧，他開始借助這些字體背后原始的字體來進行「逆向工程」。
Abrate 的 Logofonts 項目就是這個「逆向工程」之后的結果?！府斠恍┠隳吧脑睾湍闶煜さ脑亟Y合到一起的時候，有趣的事情就會發生……所以我決定重新拆解這些大眾所熟悉的品牌，然后將文字部分替換成這個 LOGO 對應的字體名稱」Abrate 的思路就是這樣來的。
其實，以這種方式來重新解構這些令人熟悉的 LOGO 本身是一種非常有趣的嘗試，給人的體驗也頗為不同。但是回過頭來說，這也證明了一件事情：即使是那些你感覺很熟悉的字體，同樣可以借助一些并不復雜的方式，來制造出爆款設計，營造出令人過目不忘的獨特視覺體驗。
如果你使用 Instagram，那么你可以在上面關注一下這個 LogoFonts 項目。
在這些品牌 LOGO 的文本字體當中，有很多大家非常非常熟悉的字體，它們在英文字體中的大眾認知程度，完全不亞于「微軟雅黑」在中文世界里的認知度。
Futura 字體的靈感來自包豪斯運動，繼承了包豪斯的設計理念，由設計師保羅倫納1924年至1926年所創建。Futura 不僅本身大獲成功，而且成功催生了新的幾何無襯線字體。
在國外的設計圈中，設計師私下經常調侃，在設計的時候嘗試過很多不同的字體，最后總會用回 Futura ，于是有了「字體不決就用 Futura」的調侃。當然，很品牌的 LOGO 設計是否幾經修改重回 Futura 就很難說了，但是我還蠻認可這種說法的。
FedEx
Supreme
PayPal
Nike
Red Bull
Helvetica是一種被廣泛使用的的西文字體，于1957年由瑞士字體設計師愛德華德·霍夫曼（Eduard Hoffmann）和馬克斯·米耶丁格（Max Miedinger）設計，體現了瑞士設計的理性主義精神，同時被認為是現代主義設計理念的典范。
很多現代都使用 Helvetica 字體來作為設計的基底，借助基礎的傾斜、色彩和裝飾，在它現代和整飭的設計基礎上，來營造獨特品牌視覺特征和氣質。
Target
Energizer
Post-it
The North Face
CAT
Behance
Avenir是由Adrian Frutiger設計的一款無襯線字體，最初于1988年由萊諾字體公司發布。「Avenir」在法語當中是「未來」的意思，在某種意義上，它和 Futura 在精神內核上有所呼應。
和 Helvetica 一樣，Avenir 字體是為了「基本適合用在任何平面設計場合」的一種字體，同時，Frutiger 先生也認為，無襯線字體是不應該有斜體的，所以他也僅僅只是為了商業需求，使用光學儀器制作了偽斜體的效果。
Avenir 這款字體整體呈現出一種中性、去性格化的特點，是一種氣質「透明」的字體。
Toyota
我們常說的 Avant Garde 字體完整的名稱應該是 ITC Avant Garde Gothic，它原本是 Avant Garde 雜志的 LOGO 字體，由 Herb Lubalin 所創建。
之后他與盧巴林設計公司的合伙人 Tom Carnase 一同努力，將這款字體完善成為一套完整的標準字體。
由于 Avant Garde 出色的幾何特征，很多品牌 LOGO 在設計的時候都考慮并采用了這款字體。
Adidas
New Balance
Durex
Gotham 是一款 2000 年的時候為 GQ 所設計，并于 2002 年向公眾開放的字體。它出現的地方很多，從可樂瓶、推特、Spotify、Netflix、Saks 到紐約大學、翠貝卡電影節，這還不止，包括《柯南秀》和《周六夜現場》在內的電視劇、包括《盜夢空間》、《點球成金》、《可愛的骨頭》和《月光男孩》在內的電影，都用到了這一字體。
關于這款字體的故事，可以看看這篇文章：
Gotham 原本的設計構思中，是要呈現出一種「新鮮和陽剛」的氣息，不過真正投入使用的時候，才發現它的細體非常的具有女性的「優雅感」。Gotham 在現代的品牌和 LOGO 設計中應用廣泛，它兼顧了靈活和高級感，說是「可鹽可甜」一點錯都沒有。
TikTok
Spotify
Discovery
Univers 字體和 Avenir 同樣出自設計師 Adrian Frutiger 之手，不過 Univers 是 Frutiger 的早期字體作品，它和 Helvetica 并稱為「瑞士風格字體」，最初是作為一款照相排印字體所發布的。
Univers 字體的字重控制和其他的字體不同，是按照數字來進行區分的，到現在 Univers 字體族當中所包含的變體已經非常之多了，多達44種，不同寬度、粗細變化的衍生字體使得它作為 LOGO 字體非常方便。
Alibaba
ebay
正如同你從下圖看到的，Myriad 字體就是 Adobe 的LOGO 品牌用字，因為這款字體原本就是 Robert Slimbach 和 Carol Twombly 為 Adobe 定制的字體。不過，值得一提的是，Myriad 字體的基底是 Frutiger 字體——而 Frutiger 、Univers、Avenir 三款字體系出同門，都出自 Adrian Frutiger 之手。
和很多早期的非襯線體字體不同，Myriad 從一開始就是為了數字化而設計的，字體家族內不同字重、樣式的變化是動態的，通過不同的字母寬度調解平衡，給人溫暖友好的感覺，而這一點也使得它在屏幕和印刷品上，顯得更加協調和自然。
Adobe
Visa
Walmart
其實 Arial 這款字體能走向世界，和微軟息息相關。這款 Monotype 出品的數字字體是隨著當年的 Windows 3.1 操作系統和當時的 Truetype 技術一同分發出來的，它的競爭對象則是最為經典的 Helvetica 字體，而在視覺上，Arial 和 Helvetica 是非常相近的。
Monatype 在設計Arial 時，考慮到會在電腦上面使用，在字體及字距上都作了一些細微的調整和變動，以增加它在電腦屏幕上不同分辨率下的可讀性。
Skype
Pxxxhub
其實經典的字體有很多，你單獨看這些字體的時候可能會感到單調，但是Abrate 的 Logofonts 能夠幫你了解到這些經典的英文字體是怎么應用到 LOGO 當中，讓你看到這些字體本身豐富的可能性和多變性格氣質。我將一部分字體打包存到百度云當中，供你學習研究。如果你需要在設計項目當中使用，請購買正版授權。
文章來源：優設 作者：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多朋友面對AE表達式望而生畏，不過再難的東西都會有它最本質的規則，如果你理解了基本的原理和常用的表達式命令，這也許會提高你的工作效率。我通過自己對AE表達式的理解，嘗試用最簡單的語言解釋一些看似復雜的操作，如果此篇文章能給你帶來一些啟發，不勝榮幸~
表達式就是AE內部基于JS編程語言開發的編輯工具，可以理解為簡單的編程，不過沒有編程那么復雜。其次表達式只能添加在可以編輯的關建幀的屬性上，不可以添加在其他地方；表達式的使用根據實際情況來決定，如果關鍵幀可以更好的實現你想要的效果，使用關鍵幀就可以啦，表達式大部分情況下是可以更節約時間，提高工作效率的。
A.表達式開關 B.表達式圖表 C.表達式關聯器 D.表達式語言菜單
由于AE里不同的屬性的參數不同，常用的我們可以分為：數值（旋轉/不透明度）、數組（位置/縮放）、布爾值（true代表真、false代表假/0代表假、1代表真）這三種形式來進行書寫表達式。對于表達式AE也有很多內置的函數命令，直接可以在表達式語言菜單里面進行調用。
原理:
time表示時間，以秒為單位，time*n =時間（秒數）*n （若應用于旋轉屬性，則n表示角度）
舉例:
若在旋轉屬性上設置time表達式為time*60，則圖層將通過1秒的時間旋轉60度，2秒時旋轉到120度以此類推（數值為正數時順時針旋轉，為負數時逆時針旋轉）
注意事項:
time只能賦予一維屬性的數據。(位置屬性可進行單獨尺寸的分離，從而可單獨設置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=頻率（設置每秒抖動的頻率）；amp=振幅（每次抖動的幅度）；octaves=振幅幅度（在每次振幅的基礎上還會進行一定的震幅幅度，很少用）；amp_mult=頻率倍頻（默認數值即可，數值越接近0，細節越少；越接近1，細節越多）；t=持續時間（抖動時間為合成時間，一般無需修改）；一般只寫前兩個數值即可
舉例:
若在一維屬性中，為位置屬性添加wiggle(10,20)，則表示圖層每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，為縮放添加n=wiggle(1,10);[n[0],n[0]]，則表示圖層的縮放XY在每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，想單獨在單維度進行抖動，需要將屬性設置為單獨尺寸后添加wiggle(10,20)，表示圖層的縮放X軸在每秒抖動10次，每次隨機波動的幅度為20。
注意事項:
可直接在現有屬性上運行，包括任何關鍵幀
原理:
為每間隔多少數值來產生多少變化
舉例:
若為圖層1的旋轉屬性添加表達式index*5 ，則第一個圖層會旋轉5度，之后按Ctrl+D去復制多個圖層時，第2個圖層將旋轉10度，以此類推；若想第一層圖形不產生旋轉保持正常形態，復制后的圖形以5度遞增，表達式可寫為(index-1)*5
原理:
在當前時間輸出當前屬性值
舉例:
若對位置屬性添加表達式為value+100，則位置會在關鍵幀數值的基礎上對X軸向右偏移100（正數向右側，負數像左側）；若想控制Y軸的位置屬性，則可對位置屬性進行單獨尺寸的分割，從而可單獨控制Y軸（正數向下，負數向上）
注意事項:
更多的使用場景是結合其他表達式一起應用
5. random表達式（隨機表達式）
原理:
random(x,y)在數值x到y之間隨機進行抽取，最小值為x，最大值為y
舉例:
若為數字源文本添加表達式random(20)，則數據會隨機改變，最大值不會超過20；
若為數字源文本添加表達式random(10,100)，則數據會在10<數值<100之間隨機改變； 若為數字源文本添加表達式seedRandom(5, timeless = false)，random(50)，則數據會在50以內隨機改變（前面的5是種子數，如一張畫面中需要多個相同區間的數值做隨機變化，就要為他們添加不同的種子數，防止兩者隨機變化雷同）,若希望數字隨機變化為整數則應添加表達式為Math.round(random(2,50))，表示在2和50之間隨機改變無小數
注意事項:
隨機表達式不僅局限于數據上的使用，其他屬性也可以應用，若數值為整數Math的M要大寫
原理:
以此類推
舉例:
如下圖gif
原理:
timeRemap*n，n以幀為單位
舉例:
將圖層設置為timeRemap*10，代表每隔10幀就抽掉1幀畫面，(根據要抽取的速率決定)
注意事項:
使用timeRemap表達式之前要啟用時間重映射，否則無法使用此表達式
原理:
舉例:
見下圖均以(time,0,3,131,1000)為例，若為數字的源文本屬性添加此表達式可以制作出倒計時的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數字從3到0，希望數字為整體需添加Math.floor(）
注意事項:
倒計時的用法比較常用，整數M要大寫
原理:
degreesToRadians(degrees) 角度轉為弧度（degrees度的變量或表達式）radiansToDegrees(radians)弧度轉為角度（radians弧度的變量或表達式）
舉例:
常用語數學中的一些計算sin，cos，tan，sec，csc，cot等
原理:
layer(index)中index 是數值，按照編號檢索圖層；layer(name)中name 是一個字符串，按照名稱檢索圖層（若沒有圖層名稱，則根據源名稱）；layer(otherLayer, relIndex)中otherLayer 表示圖層對象，relIndex 表示數值，檢索屬于圖層對象的數值圖層
舉例:
原理:
marker.key(index)中index 是數值；marker.key(name)中name 是一個字符串
舉例:
thisComp.marker.key(1).time表示返回第一個合成標記的時間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標記的時間
原理:
width表示返回合成寬度；height表示返回合成高度
舉例:
[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置
原理:
param(name)中name表示字符串；param(index)表示數值
舉例:
effect(“高斯模糊”).param(“模糊度”)效果控制點始終位于圖層空間中
原理:
復制粘貼表達式使用就可以，amp表示振幅,freq表示頻率,decay表示衰減（根據不同需求做不同的調整）
舉例:
n = 0; if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}}
if (n == 0){t = 0;}else{
t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述內容復制粘貼使用即可
注意:motion2腳本也帶此功能，方法不唯一
原理:
k表示反彈最終結果，a表示反彈阻力，b表示反彈變化時間
舉例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根據不同情況調節kab的數值即可）
原理:
StartNumber表示開始時的數值，EndNumber表示結束時的數值，StartTime表示開始的時間，EndTime表示結束的時間，和前面的linear表達式相對應
舉例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示擠壓拉伸的速度，maxDev表示擠壓拉伸的大小，decay表示衰減
舉例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延遲的幀數
舉例:
為位置屬性添加表達式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d)；
如想要實現不透明度拖尾需為不透明度屬性添加表達式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(調整好一個圖層后復制多個)
文章來源：優設 作者：凌旬
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn