文章來源：站酷

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

“個人主頁”是一個聽起來很熟悉，但又跟“個人中心”傻傻分不清楚的一個模塊，一般情況下處于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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

網頁中超過95%以上的信息都是通過文字的形式呈現。 然而，頁面文字并非毫無章法的隨意呈現。事實上，更具可讀性、視覺效果以及獨特排版和布局的網頁文本設計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設計師日益重視網頁排版設計的重要原因。

BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設計要求也越來越高，

接下來為大家分享一下我收集到的案例：

（以上圖片均來源于網絡）

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       ui界面設計之網站設計案例欣賞(一)

本文將研究 ES6 的 for ... of 循環。

舊方法

在過去，有兩種方法可以遍歷 javascript。

首先是經典的 for i 循環，它使你可以遍歷數組或可索引的且有 length 屬性的任何對象。

for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }

其次是 for ... in 循環，用于循環一個對象的鍵/值對。

for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }

for ... in 循環通常被視作旁白，因為它循環了對象的每一個可枚舉屬性。這包括原型鏈中父對象的屬性，以及被分配為方法的所以屬性。換句話說，它遍歷了一些人們可能想不到的東西。使用 for ... in 通常意味著循環塊中有很多保護子句，以避免出現不需要的屬性。

早期的 javascript 通過庫解決了這個問題。許多 JavaScript庫（例如：Prototype.js，jQuery，lodash 等）都有類似 each 或 foreach 這樣的工具方法或函數，可讓你無需 for i 或 for ... in 循環去遍歷對象和數組。

for ... of 循環是 ES6 試圖不用第三方庫去解決其中一些問題的方式。

for … of

for ... of 循環

for(const thing of things) { /* ... */ }

它將遍歷一個可迭代（iterable）對象。

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個實現了迭代器協議的對象，或者該方法是生成器函數。

在這句話中你需要理解很多東西：

• 可迭代的對象
• @@iterator方法（ @@是什么意思？）
• 迭代器協議（這里的協議是什么意思？）
• 等等，迭代（iterable）和迭代器（iterator）不是一回事？
• 另外，生成器函數又是什么鬼？

下面逐個解決這些疑問。

內置 Iterable

首先，javascript 對象中的一些內置對象天然的可以迭代，比如最容易想到的就是數組對象?？梢韵裣旅娴拇a中一樣在 for ... of 循環中使用數組：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing)
}

輸出結果是數組中的所有元素。

apples oranges
pears

還有數組的 entries 方法，它返回一個可迭代對象。這個可迭代對象在每次循環中返回鍵和值。例如下面的代碼：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing)
}

將輸出以下內容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

當用下面的語法時，entries 方法會更有用

const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value)
}

在 for 循環中聲明了兩個變量：一個用于返回數組的第一項（值的鍵或索引），另一個用于第二項（該索引實際對應的值）。

一個普通的 javascript 對象是不可迭代的。如果你執行下面這段代碼：

    // 無法正常執行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo)  



    { console.log(key,':',value) 

}

會得到一個錯誤

$ node test.js
/path/to/test.js:6 for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 對象的靜態 entries 方法接受一個普通對象作為參數，并返回一個可迭代對象。就像這樣的程序：

    const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo))  



    { console.log(key,':',value) 

}

能夠得到你期望的輸出：

$ node test.js
apples : oranges
pears : prunes

創建自己的 Iterable

如果你想創建自己的可迭代對象，則需要花費更多的時間。你會記得前面說過：

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個實現了迭代器協議的對象，或者該方法是生成器函數。

搞懂這些內容的最簡單方法就是一步一步的去創建可迭代對象。首先，我們需要一個實現 @@iterator 方法的對象。 @@ 表示法有點誤導性，我們真正要做的是用預定義的 Symbol.iterator 符號定義方法。

如果用迭代器方法定義對象并嘗試遍歷：

const foo = {
  [Symbol.iterator]: function() {
  }
} for(const [key, value] of foo) { console.log(key, value)
}

得到一個新錯誤：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

這是 javascript 告訴我們它在試圖調用 Symbol.iterator 方法，但是調用的結果不是對象。

為了消除這個錯誤，需要用迭代器方法來返回實現了迭代器協議的對象。這意味著迭代器方法需要返回一個有 next 鍵的對象，而 next 鍵是一個函數。

const foo = {
  [Symbol.iterator]: function() { return { next: function() {
      }
    }
  }
} for(const [key, value] of foo) { console.log(key, value)
}

如果運行上面的代碼，則會出現新錯誤。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

這次 javascript 告訴我們它試圖調用 Symbol.iterator 方法，而該對象的確是一個對象，并且實現了 next 方法，但是 next 的返回值不是 javascript 預期的對象。

next 函數需要返回有特定格式的對象——有 value 和 done 這兩個鍵。

next: function() { //... return { done: false, value: 'next value' }
}

done 鍵是可選的。如果值為 true（表示迭代器已完成迭代），則說明迭代已結束。

如果 done 為 false 或不存在，則需要 value 鍵。 value 鍵是通過循環此應該返回的值。

所以在代碼中放入另一個程序，它帶有一個簡單的迭代器，該迭代器返回前十個偶數。

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true}
        } return { value:this.currentValue
        }
      }).bind(this)
    }
  }
} const foo = new First20Evens; for(const value of foo) { console.log(value)
}

生成器

手動去構建實現迭代器協議的對象不是唯一的選擇。生成器對象（由生成器函數返回）也實現了迭代器協議。上面的例子用生成器構建的話看起來像這樣：

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i
        }
      }
    }()
  }
} const foo = new First20Evens; for(const item of foo) { console.log(item)
}

本文不會過多地介紹生成器，如果你需要入門的話可以看這篇文章。今天的重要收獲是，我們可以使自己的 Symbol.iterator 方法返回一個生成器對象，并且該生成器對象能夠在 for ... of 循環中“正常工作”。 “正常工作”是指循環能夠持續的在生成器上調用 next，直到生成器停止 yield 值為止。

$ node sample-program.js
2
4
6
8 

    10



    藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務 

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優秀并富有創意的交互作品，為你的產品設計注入靈感。

--手機appUI設計--

 （以上圖片均來源于網絡）

 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

  更多精彩文章：

       手機appUI界面設計賞析（一）

       手機appUI界面設計賞析（二）

       手機appUI界面設計賞析（三）

       手機appUI界面設計賞析（四）

       手機appUI界面設計賞析（五）

       手機appUI界面設計賞析（六）

       手機appUI界面設計賞析（七）

       手機appUI界面設計賞析（八）

      手機appUI界面設計賞析（九）

       手機appUI界面設計賞析（十）

先來了解一下項目的背景。Conduira online是一個線上的教育平臺，為準備考試的用戶提供有用的工具和資源。這個平臺目前有一個側邊導航欄，上面有11個選項。后來由于平臺的變化，將主導航的選項縮減到3個——主頁、實習和課程。

導航的數量變少了，團隊又迎來了新的問題：是應該繼續保留側邊導航的設計樣式還是切換成頂部導航的樣式呢？

為了做出最合理的選擇，我們需要回答三個基本的問題。

主導航中有幾個選項？

在選擇導航時回答這個問題很重要。這里介紹一個有趣的的交互概念叫做視覺固定（Visual Fixation）：注意力一直保持在同一個地方。

在頂部導航中，一個視覺固定點通常只適合一個選項。然而，側邊導航上的單一視覺固定點可以同時容納兩個選項。

結果很明確。與頂部導航相比，用戶在一次視覺觀察中可以在側邊導航上查看和感知更多菜單選項。當然頂部導航也有自己的優勢，為每個菜單項賦予各自的權重，而不是讓它們的重要性被其他選項分散。

對于具有過濾選項或帶有二級菜單的電商網站，視覺固定的概念起到了非常重要的作用。因為在這些情況下，我們希望用戶能夠在單一的視覺點上盡可能多的選擇。

Tips：這里的選擇僅僅取決于界面上有多少選項。如果主導航的菜單項不多于5個，只需使用頂部導航，這樣能夠更好地控制用戶在整個平臺上的體驗旅程。

主導航與選項優先級的關系？

用戶在瀏覽網頁或App時會有各種各樣的瀏覽順序，其中一種就是「F型模式」。

看起來像這樣：

F型布局的特點是將注視力集中在頁面的頂部和左側:

• 用戶首先以水平移動的方式瀏覽內容區域，這個動線構成了F型布局的頂欄；
• 接下來用戶掃描頁面左側的垂直線，進行第二次水平移動瀏覽。隨著路徑越來越長，閱讀覆蓋的區域一次比一次短，構成了F型布局下面的部分；
• 最后用戶以垂直移動的方式瀏覽整個頁面的內容。

這種模式的含義是同一頁面上的第一行文本比后幾行文本受到更多的關注；每行文本左邊的幾個字比后面的文字接受度更多。

因此，在頂部導航中最左邊的選項比其他選項具有更多的視覺權重，因為它位于主要視覺區域，優先級更高。

側邊導航采用了垂直移動，這是用戶瀏覽網頁的一個自然方向，但是選項優先級的排序是個限制。當選項的優先級相同時，可以使用側邊導航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內容。

是否考慮使用二級導航？

如果是的話，可以考慮利用以下兩種設計樣式：

水平導航——在頁面頂部設置一個主導航，在主導航下面設置二級導航進一步來區分內容。

側邊欄——在頂部設置一個主導航，然后在側邊設置一個側邊欄菜單來處理其他內容。

總結

頂部導航和側邊導航之間的選擇實際上取決于以上三個基本的問題。

另外由于現在的設備有了更大的屏幕尺寸，如今許多設計趨勢已轉向側邊導航，因為它看起來更干凈并優化了更多的屏幕空間。

最后將導航的選擇歸結為兩點：

• 主導航包含的選項數量;
• 是希望用戶根據優先級瀏覽項目，還是希望用戶可視化地瀏覽并根據其偏好選擇項目。

文章來源：優設    作者：Clip設計夾

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

通過分析市場上的競品，能夠讓設計師在短時間內快速了解自己所做產品在整個市場中的定位。

文章來源：站酷    

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Flutter 構建模式

目前，Flutter一共提供了三種運行模式，分別是Debug、Release和Profile模式。其中，Debug模式主要用在軟件編寫過程中，Release模式主要用于應用發布過程中，而Profile模式則主要用于應用性能分析時，每個模式都有自己特殊的使用場景。下面簡介介紹下這幾種模式：

Debug模式

Debug模式又名調試模式，Debug模式可以同時在物理設備、仿真器或者模擬器上運行應用。默認情況下，使用flutter run命令運行應用程序時就是使用的Debug模式。在Debug模式下，所有的斷言、服務擴展是開啟的，并且在模式對快速開發和運行周期進行了編譯優化，當使用調試工具進行代碼調試時可以直接連接到應用的進程里。

Release模式

Release模式又名發布模式，此模式只能在物理設備上運行，不能在模擬器上運行。使用flutter run --release命令運行應用程序時就是使用的Release模式。在Release模式下，斷點、調試信息和服務擴展是不可用的，并且Release模式針對快速啟動、快速執行和安裝包大小進行了優化。

Profile模式

Profile模式只能在物理設備上運行，不能在模擬器上運行。此模式主要用于應用性能分析，一些應用調試能力是被保留的，目的是分析應用存在的性能問題。Profile模式和Release模式大體相同，不同點體現在，Profile模式的某些服務擴展是啟用的，某些進程調試手段也是開啟的。

調試模式

在 Debug 模式下，app 可以被安裝在物理設備、仿真器或者模擬器上進行調試。在Debug模式下，可以進行如下操作：

斷點 是開啟的。

服務擴展是開啟的。

針對快速開發和運行周期進行了編譯優化（但不是針對執行速度、二進制文件大小或者部署）。

調試開啟，類似 開發者工具 等調試工具可以連接到進程里。

如果是在 Web 平臺下的調試模式，可以進行如下操作：

本次構建 沒有 最小化資源并且整個構建 沒有 優化性能。

為了簡化調試，這個 Web 應用使用了 dartdevc 編譯器。

默認情況下，運行 flutter run 會使用 Debug 模式，同時 IDE 也支持這些模式。例如，Android Studio 提供了 Run > Debug… 菜單選項，而且在項目面板中還有一個三角形的綠色運行按鈕圖標 。

Release 模式

當你想要最大的優化以及最小的占用空間時，就使用 Release 模式來部署 app。 release 模式是不支持模擬器或者仿真器的，使用 Release 模式意味著。

斷點是不可用的。

調試信息是不可見的。

調試是禁用的。

編譯針對快速啟動、快速執行和小的 package 的大小進行了優化。

服務擴展是禁用的。

對于Web開發來說，使用 Release 模式意味著。

這次構建資源已經被壓縮，并且性能得以優化。

這個 Web 應用通過 dart2js 編譯器構建，以確保更優秀的性能。

Profile 模式

在 Profile 模式下，一些調試能力是被保留的，足夠分析你的 app 性能。Profile 模式在仿真器和模擬器上是不可用的，因為他們的行為不能代表真實的性能。和 release 相比， profile 模式有以下不同：

一些服務擴展是啟用的。例如，支持 performance overlay。

Tracing 是啟用的，一些調試工具，比如 開發者工具 可以連接到進程里。

在 Web 平臺使用Profile 模式意味著：

資源文件沒有被壓縮，但是整體性能已經優化。

這個 Web 應用通過 dart2js 編譯器構建。

調試工具

在Flutter應用開發中，有很多工具可以幫助調試 Flutter 應用程序，常見的如下所示。

開發者工具，是一套運行在瀏覽器的性能及分析工具。

Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持內置的源代碼調試器，可以設置斷點，單步調試，檢查數值。

Flutter inspector，是開發者工具提供的 widget 檢查器，也可直接在 Android Studio 和 IntelliJ 中使用（借助 Flutter 插件）。檢查器可以可視化展現 widget 樹，查看單個 widget 及其屬性值，開啟性能圖層，等等。

開發者工具

要調試及分析應用，開發者工具可能是你的首選。開發者工具運行在瀏覽器，支持以下特性：

源代碼調試器

Widget 檢查器，展示可視化的 widget 樹； “widget select” 模式，在應用中選擇一個 widget，會在 widget 樹直接定位到它的位置。

內存分析

時間線視圖，支持跟蹤，導入及導出跟蹤信息

日志視圖

如果你在Debug 模式 或Profile 模式 運行，那么可以在瀏覽器打開開發者工具連接到你的應用。開發者工具不能用在 Release 模式 編譯的應用，因為調試和分析信息都被刪除了。如果你要用開發者工具分析應用，需確保使用 Profile 模式運行應用。

在這里插入圖片描述

斷點調試

和其他語言一樣，Flutter的斷點調試支持在 IDE 或編輯器（比如 Android Studio/IntelliJ 和 VS Code）、或者通過編碼兩種方式。

其中，開發者工具調試器如下圖所示。

在這里插入圖片描述

如果需要，在源代碼中設置斷點，然后點擊工具欄中的 【Debug】 按鈕，或選擇 【Run】 > 【Debug】即可開啟調試功能。

在這里插入圖片描述

開啟調試后，可以在控制臺看到如下一些信息。

底部的 Debugger 窗口會顯示出堆棧和變量信息。

底部的 Console 窗口會顯示詳細的日志輸出。

調試基于默認的啟動配置，如果需要自定義，點擊選擇目標下拉按鈕，選擇 Edit configuration 進行配置。

在進行斷點調試時，使用得最多的就是單步調試，三個單步調試按鈕在暫停后會變為可用狀態。

使用 Step in 來進入被調用的方法，在遇到方法內的第一行可執行代碼時結束。

使用 Step over 直接執行某個方法調用而不進入內部；該按鈕在當前方法內按行執行。

使用 Step out 來跳出當前方法，這種方式會直接執行完所有當前方法內的語句。

除此之外，我們還可以使用代碼的方式進行斷點調試，我們可以在源代碼中使用 debugger()函數來開啟斷點，當代碼運行到此處時就會刮起，如下所示。

import 'dart:developer';

void someFunction(double offset) {

 debugger(when: offset > 30.0);

 // ...

}

Dart 分析器

如果你使用的是 Android Studio或者VSCode，那么工具會自帶的 Dart 分析器默認會檢查代碼，并發現可能的錯誤。如果你使用命令行，則可以使用 flutter analyze命令來檢查代碼。Dart 分析器非常依賴你在代碼中添加的類型注解，以幫助跟蹤問題。

另外，我們可以使用flutter analyze --flutter-repo命令將分析結果打印到控制臺上，每次運行這個命名之前，請先運行flutter update-packages 升級的包，這樣就可以獲取的依賴包。如果你不這樣做，你可能會從dart:ui得到一些錯誤消息，比如偏移量等。因為執行flutter analysis 命令時并不會主動去拉取依賴。

對于一次性的Dart分析，直接使用flutter analyze --flutter-repo即可，對于連續分析，則可以使用flutter analyze --flutter-repo --watch命令。如果你想知道多少個成員變量丟失了dartdocs，可以添加一個dartdocs參數。

Flutter inspector 工具

Flutter inspector 是分析Flutter組件狀態樹的利器，Flutter使用小部件來控制頁面組件到布局的精準控制，Flutter inspector 可以幫助我們進行如下一些分析。

進行布局分析，理解布局層次

診斷布局問題

在這里插入圖片描述

在調試模式下，我們點擊Android Studio右邊Flutter inspector按鈕即可開啟Flutter inspector分析，Flutter inspector提供了如下的可視化調試工具。

在這里插入圖片描述

Select widget mode：啟用此按鈕后，選擇組件樹的代碼會自動跳轉到對應的源代碼里面。

Refresh tree ： 重新加載的組件信息。

Slow Animations：放慢動畫速度，以便進行視覺上的查驗。

Debug Paint： 邊框、方向的可視化。

Paint Baselines： 每個渲染框在它的每個文本基線上畫一條線。

Repaint Rainbow：查看重繪的嚴重程度，嚴重的會被爆紅。

除了上面的功能外，我們還可以點擊【Open DevTools】打開Flutter的調試頁面，可以借助它進行很多性能分析，后面會具體介紹。

在這里插入圖片描述

測量應用啟動時間

要收集有關 Flutter 應用程序啟動所需時間的詳細信息，可以在運行 flutter run 命令時使用 trace-startup 和 profile 選項，如下所示。

flutter run --trace-startup --profile

跟蹤輸出被保存到 Flutter 工程目錄在 build 目錄下，一個名為 start_up_info.json 的 JSON 文件中，輸出列出了從應用程序啟動到這些跟蹤事件（以微秒捕獲）所用的時間，如下所示。

{

 "engineEnterTimestampMicros": 2346054348633,

 "timeToFrameworkInitMicros": 812748,

 "timeToFirstFrameRasterizedMicros": 1573154,

 "timeToFirstFrameMicros": 1221472,

 "timeAfterFrameworkInitMicros": 408724

}

對應的具體含義如下：

進入 Flutter 引擎時

展示應用第一幀時

初始化Flutter框架時

完成Flutter框架初始化時

使用Android Studio進行調試

Flutter官方推薦使用Android Studio或VSCode進行應用開發， 和其他語言的調試一樣，Dart代碼的調試流程也差不多。如果還沒有Flutter項目，可以新建一個示例項目。通過單擊首先，點擊調試圖標（Debug-run icon）同時打開調試面板并在控制臺中運行應用，首次運行應用是最慢的，應用啟動后，界面應該是下面這樣的。

在這里插入圖片描述

然后，我們在在 counter++ 這一行上添加斷點。在應用里，點擊 + 按鈕（FloatingActionButton，或者簡稱 FAB）來增加數字，應用會暫停。

在這里插入圖片描述

你可以 step in/out/over Dart 語句、熱重載和恢復執行應用、以及像使用其他調試器一樣來使用 Dart 調試器。

Flutter inspector

Flutter inspector 是一個用來可視化以及查看 Flutter widget 樹的工具，提供如下功能：

了解現有布局

診斷布局問題

可以使用 Android Studio 窗口右側的垂直按鈕來打開Flutter inspector，如下圖所示。

在這里插入圖片描述

Flutter outline

Flutter Outline 是一個可視的顯示頁面構建方法的功能，注意在構建方法上可能與 widget 樹不同，可以使用 Android Studio 窗口右側的垂直按鈕切換 outline 的顯示。

在這里插入圖片描述

Tip: 我們可以安裝一個 Presentation Assistant 插件來輔助我們進行開發，Presentation Assistant 提供了很多的快捷功能。例如，當焦點在編輯面板中時，輸入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux），該插件會同時顯示「查找」面板并顯示在所有三個平臺上執行此操作的提示。

在這里插入圖片描述

然后在輸入框中輸入attach關鍵字，顯示如下圖。

在這里插入圖片描述

使用 Android Gradle 調試

為了調試原生代碼，你需要一個包含 Android 原生代碼的應用。在本節中，你將學會如何連接兩個調試器到你的應用：

1）Dart 調試器。

2）Android Gradle 調試器。

創建一個基本的 Flutter 應用，然后替換 lib/main.dart 的代碼為以下示例代碼。

// Copyright 2017 The Chromium Authors. All rights reserved.

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:url_launcher/url_launcher.dart';

void main() {

 runApp(MyApp());

}

class MyApp extends StatelessWidget {

 @override

 Widget build(BuildContext context) {

   return MaterialApp(

     title: 'URL Launcher',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: MyHomePage(title: 'URL Launcher'),

   );

 }

}

class MyHomePage extends StatefulWidget {

 MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

 @override

 _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

 Future<void> _launched;

 Future<void> _launchInBrowser(String url) async {

   if (await canLaunch(url)) {

     await launch(url, forceSafariVC: false, forceWebView: false);

   } else {

     throw 'Could not launch $url';

   }

 }

 Future<void> _launchInWebViewOrVC(String url) async {

   if (await canLaunch(url)) {

     await launch(url, forceSafariVC: true, forceWebView: true);

   } else {

     throw 'Could not launch $url';

   }

 }

 Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {

   if (snapshot.hasError) {

     return Text('Error: ${snapshot.error}');

   } else {

     return Text('');

   }

 }

 @override

 Widget build(BuildContext context) {

   String toLaunch = 'https://flutter.dev';

   return Scaffold(

     appBar: AppBar(

       title: Text(widget.title),

     ),

     body: Center(

       child: Column(

         mainAxisAlignment: MainAxisAlignment.center,

         children: <Widget>[

           Padding(

             padding: EdgeInsets.all(16.0),

             child: Text(toLaunch),

           ),

           RaisedButton(

             onPressed: () => setState(() {

                   _launched = _launchInBrowser(toLaunch);

                 }),

             child: Text('Launch in browser'),

           ),

           Padding(padding: EdgeInsets.all(16.0)),

           RaisedButton(

             onPressed: () => setState(() {

                   _launched = _launchInWebViewOrVC(toLaunch);

                 }),

             child: Text('Launch in app'),

           ),

           Padding(padding: EdgeInsets.all(16.0)),

           FutureBuilder<void>(future: _launched, builder: _launchStatus),

         ],

       ),

     ),

   );

 }

}

然后，添加 url_launcher 依賴到 pubspec 文件，并執行 flutter pub get命令拉取依賴包。

name: flutter_app

description: A new Flutter application.

version: 1.0.0+1

dependencies:

 flutter:

   sdk: flutter

 url_launcher: ^3.0.3

 cupertino_icons: ^0.1.2

dev_dependencies:

 flutter_test:

   sdk: flutter

點擊調試按鈕（Debug-run icon）來同時打開調試面板并啟動應用，如下圖所示。

在這里插入圖片描述

點擊 【Attach debugger to Android process】 按鈕，從進程對話框中，你應該可以看到每一個設備的入口。選擇 show all processes 來顯示每個設備可用的進程。

在這里插入圖片描述

在調試面板中，你現在應該可以看到一個 Android Debugger 標簽頁，然后依次選擇【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在項目面板，然后雙擊 GeneratedProjectRegistrant 在編輯面板中打開 Java 代碼，此時Dart 和原生調試器都在與同一個進程交互。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

構圖、色彩和光影屬于設計中非常重要的3塊體系，但構圖和色彩大多是偏感性的主觀理解，而光影則是理性的客觀判斷。因為這是自然界中真實存在的物理現象，因此大部分時候畫面的「添加光影」都是在還原真實，所以本文的很多知識都偏理論和科普，但理性認知無疑是打牢光影基礎的第一步。

如果說「構圖」和「色彩」是視覺設計的基礎，那光影便是「錦上添花」，當各種視覺元素組合完成后，只有「光影統一」，才能讓所有元素真實的融在一起，最終形成真實立體、有層次的畫面，而「光影統一」便是這篇文章的核心原則。

光源類型

其實我們看到的萬物色彩，都是物體表面的反射光，是「光」創造了色彩，同時也創造了「影」，只有經過光照才會出現明暗，才有所謂的「光影」，所以我們先來說說一切的源頭——光。

發光的地方就是「光源」，當我們對畫面「添加光影」時，一定要先留意光源在哪，像我每次畫設計草圖時，就會先把主光源的位置確定并標示出來，只有清楚位置，「光影統一」才有了依據。

那常用的光源類型都有哪些呢？其實就2大類：照射光和環境光。2類光源往往同時存在，相互影響，塑造場景時必須同時考慮。

1. 照射光

照射光就是畫面中的主要照明光，這是影響整體光影的核心光源，根據光線照射路徑的不同，又分成直射光、散射光和折射光。

直射光

直接照射的光源就是直射光，光線路徑呈方向明確的兩點一線，整體集中、聚焦。

直射光能在物體表面形成強烈的明暗對比，并且過渡偏硬，形成清晰的輪廓邊緣，最常見的直射光就是晴天陽光，它屬于自然光。如下圖所示，陽光直射形成的明暗強對比能呈現人物及建筑的輪廓，突顯立體感。

和自然光相對應的是人造光，在人造光中，例如攝影棚里常用的閃光燈和常亮燈（不帶柔光罩）都算直射光，照射效果和晴天陽光類似，仔細觀察投影，邊緣都很生硬、清晰。

散射光

當光束穿過某一介質（云層、柔光布等），被其表面分散傳播的光便是散射光，散射光的光線路徑呈多方向發散狀，整體分散、無明確方向。

自然光中，陰天、雨天、霧天的光照都屬于散射光，當陽光穿過大氣時，大氣層能讓光線朝不同方向發散，發散后的光線柔和，在物體上形成的明暗對比較弱，過渡也柔和。如下圖所示，不管人物還是景物，都無明顯的陰影輪廓，整體層次豐富而細膩，影調柔和，特別是暗部的細節都能保留完好。

而人造光中，如果給閃光燈和常亮燈裝上柔光罩，這時發出的光就會變成散射光。例如下圖中，人物和產品都顯的特別柔和、舒服。

折射光

當光束從一個介質射入另一介質時，傳播方向發生偏折的光就是折射光。常見介質有水、玻璃等，它們的折射角度也各不相同。

日常生活中，像泳池里的水波光影、玻璃杯投射的光線圖案都是與折射相關的自然現象。

而我們在設計Banner時，若將這些折射效果表現出來，就會給畫面增添很多細節，同時也會增加真實感，像水波光影在電商中用的就很多。

2. 環境光

很多新手在做設計時，往往只注意照射光（主光源）對物體的影響，而忽略環境光，導致畫面總是不夠真實。簡單來說，畫面中除了主光源外的所有光線都算環境光，環境光的亮度一般很低，且沒有明確方向性，常見的環境光有2種：散射光和反射光。

散射光

和照射光一樣，環境光中也有散射光，但它們的不同在于：

• 照射光中的散射光雖然光線柔和，但屬強光，能讓物體產生明暗反差；
• 而環境光中的散射光屬弱光，往往只在主光源照不到的地方（物體的暗面）才會看到影響。

像自然界中的夕陽西下，當紅色的太陽光（照射光）減弱時，建筑的暗部便會顯現藍色的天空光（環境光），這時紅光和藍光會形成鮮明對比，極具沖擊和美感，這樣的畫面在攝影及設計中都非常常見，也是攝影界公認的「黃金一小時」，這時的天空光就屬于環境光中的散射光。

生活中還有一個常見現象也能看到散射光影響，當你走在戶外，觀察自己的影子，特別當影子較長時（清晨或傍晚），這時離自己越遠的區域顏色越淺，這是因為越遠的影子所處區域就越開闊，受周圍散射光的影響就越明顯，因而顏色更淺。

反射光

環境光中還有非常重要的一類是反射光，當光束射到介質表面時，有部分自介面射回的光就是反射光。可以毫不夸張的講，世界萬物之所以出現明暗就是因為反射光的存在。反射光一般有2種情形：鏡面反射和漫反射。

鏡面反射。當反射面非常光滑，這時平行射入的光線仍會向一個方向平行的反射出來，效果如同鏡子一樣，雖然這樣物體本身的明暗就會非常微弱，但人們透過反射面能看到周圍的環境信息，這就是鏡面反射光。

日常生活中像平靜水面、鏡子、拋光金屬等都會有鏡面反射光，例如我們在刻畫金屬材質的元素時，常常會在表面加些近乎白色的高光，這就是由于鏡面反射而進入眼中的刺目強光。

另外晴空萬里時，海面也常出現「波光粼粼」的閃光，同樣也是陽光射入水面的鏡面反射光。

漫反射光。當反射面凹凸不平時，這時平行射入的光線就會向各個方向反射出去，這便是漫反射光（以下簡稱「漫射光」）。需要說明這里的凹凸不平也包括微觀結構，例如有些墻壁看著光滑，但仔細看表面也有粗糙顆粒，這時反射出來的光線也是各個方向的漫射光。

漫反射在這個世界里無處不在，它是我們對物體形態及色彩產生明確認知的基礎。

因為有漫反射的存在，物體才會有清晰的明暗關系，我們才能看清這個世界，它賦予了物體縱深感和體積感，不管是產品還是環境皆是如此。

這里列舉一個設計中常用的漫反射現象，我們將一個白色茶杯放入一個綠色盒中，打上一束光，這時茶杯整體都帶有綠色調，這是因為盒子表面產生了大量綠色的漫射光，這些光束射在茶杯上，進而發生偏色現象，如下圖所示。

可見環境色對物體的視覺影響還是相當明顯。再如下圖中，當模特處于一個紅色空間時，受到環境中紅色漫射光的影響，模特也明顯偏向紅色，這時我們就說環境光影響了這位模特的「色彩平衡」，關于「色彩平衡」在后面還會細講。

當然現實是復雜的，其實還有大量物體會同時存在鏡面反射光和漫射光，誰的強度大誰就更突出，例如起風時的水面，就不全是鏡面反射，還有漫反射，這里就不再深究。

小結

以上提到的「照射光」和「環境光」便是設計中常用的2大光源類型，這2類往往是同時存在，一般照射光會直接影響物體的明暗結構，而環境光則影響物體的色彩平衡及反光。

只有把這些光影都表現清楚，畫面才更有代入感。其中對于照射光的理解，絕不僅僅是考慮直射或散射這么簡單，還需分析照射方向、照射角度、照射形狀、光源距離、光源強度、光源軟硬、光源大小、光源顏色等因素，待會會針對這些因素展開講解。

物體明暗

前面介紹了光源類型，主要讓大家對「光」有個整體認知，內容偏科普，屬于「光影」的理論基礎，現在開始講「影」，這塊內容更偏實戰運用，教大家如何在設計中準確表達光影。本文的「影」涵蓋兩塊內容：物體的明暗和投影，其中物體是泛指，包含電商常用的兩大元素：人物和產品。

先說物體明暗，當光源發出的光線射向物體時，由于光反射，物體會有對應的明暗變化，記得在高中學習素描時，老師就曾提過光影的「五大調」，這正是人們對物體明暗關系的理論化總結。

但現實世界卻要復雜的多，因為物體光影還與材質密切相關，不同材質的明暗關系截然不同，所以決不能撇開材質談明暗，而設計中常用材質有三大類：漫反射材質、鏡面反射材質和透明/半透明材質。

不管現實世界還是電商視覺，漫反射材質都是最常見的材質，因為這類材質的光影最有規律也最有代表性，明暗關系也簡單很多，剛剛說的「素描五大調」就是針對漫反射材質，那我們就從這類材質入手，詳細講講漫反射的光影到底如何呈現。

1. 明暗原則

「漫反射材質」是指表面產生漫反射光的材質，日常生活中，漫反射材質（以下簡稱「漫射材質」）的物體占據大多數，像棉布、啞光紙、啞光塑料甚至人類肌膚等等都屬于漫射材質。

而我們在刻畫漫射材質的物體明暗時，需遵循3點原則：近亮遠暗、先整體再局部以及細節刻畫。

近亮遠暗

對于漫射材質，首先一個大原則就是「近亮遠暗」：

以畫面的主光源（照射光）為圓心，物體距離光源越近會越亮，越遠則越暗。

對單個物體來說，距離近的就是亮面（受光面），而距離遠的是暗面（背光面），如下圖所示。

在很多攝影或設計作品中，能看到不管人物還是產品，都會遵循這一原則：距離主光源越遠則越暗。

先整體再局部

在「近亮遠暗」的大原則下，先確定物體的整體光影，表現三大面（亮面、灰面、暗面），其本質就是在固有色（物體在白色光下所呈現的色彩）的基礎上進行深淺色調的變化。

然后再添加物體的局部光影，這個局部主要針對有塊面的物體（立方體），「局部光影」意味著亮面和灰面也要分別遵循「近亮遠暗」原則（由于暗面是背光，不受主光源影響，所以不在遵循范圍內），這樣光影才會更有層次。而沒有明顯塊面的曲面物體（球體）則把握好整體光影即可，或許聽著有些復雜，下面通過圖例強化理解。

細節刻畫

最后是刻畫光影細節，這里列出2個常見細節，這些細節雖不影響整體明暗，但會讓物體光影更加細膩和真實，屬于「加分項」。

物體表面最亮的地方就是高光，高光其實不是光，而是直接反射主光源的地方，如果要給漫射材質的球體添加高光，那在亮面添加一個羽化的圓斑即可。

往往越光滑的物體高光就越清晰。但對漫射材質而言，高光不會很清晰，不過模糊程度要看物體的固有色以及粗糙度，粗糙度越大的物體高光越模糊。另外高光的外形還和物體的本身結構有關。

在表現高光時，還有一塊高光區也經常被刻畫出來，那就是塊面物體的「倒角高光」。

「倒角」其實是個工業設計術語，三維設計也常提到，一般塊面物體的棱角通常會做些圓滑過渡，這種過渡結構就是倒角，有了倒角，轉折才不會「鋒利」，這時若有光線照射到表面，倒角處便會形成高光線。

一般亮面和灰面轉折處的倒角高光最亮，而灰面和暗面的轉折處最暗，核心還是遵循「近亮遠暗」原則。

電商設計中，若給塊面物體加上「倒角高光」，細節無疑更豐富，也更耐看。仔細看下圖，在塊面轉折處都有明顯的亮線勾勒，雖然不是很起眼，但這就是常說的「設計細節」。

當2個物體相鄰時，它們相鄰的那面會有「重合陰影區」，并且物體離的越近，陰影會越深。這是因為相鄰空間隨著物體間距越小，接受的環境光也會越來越少。

「重合陰影」是一個非常容易被大家忽略的設計細節，但若表現得當，就能提升作品的精細度，如下圖所示。

2. 環境色影響

說完漫射物體的明暗刻畫原則，接下來講講周圍環境對物體的影響，還記得剛剛講過的環境光嗎？環境中除了主光源外的一切光線都是環境光。

而「環境色」則是環境光中的一種情形：就是當周圍環境有明確色彩時，這時產生的環境光會給物體帶來怎樣的影響？主要影響其實有2方面：物體的色彩平衡和反光，實際表現時也是從這兩點入手。

色彩平衡

「色彩平衡」是PS中的一項調色工具，主要是調節畫面的整體色彩。既可校正畫面的偏色，使色彩舒適平衡；也可反其道而行之，根據場景和需求讓畫面有意偏向某種顏色。例如下圖中的人物，受環境色影響就明顯偏向黃色。

所以當物體處在一個有明確色彩的環境時，受環境四周的漫射光影響，整個物體都會偏向環境色，注意由于暗面受到的影響更大，因此暗面的偏色現象也會更加明顯。總之物體偏色程度是和其固有色、材質及漫射光強度都息息相關。

反光

一般物體都是放置在地面上，而地面作為環境的一部分也會出現漫射光，這部分光線射到物體上就會形成一層微弱的亮面，這就是「反光」。

其中物體表面離地面越近的地方反光就越強，一般來說反光最強處就是物體暗面最靠近地面的地方。但不管如何反光都不宜過亮，更不能超過物體亮面。

上圖是環境為白色的情形，而當環境有明確色彩時，這時反光面就應呈現環境色，如下圖所示，物體的反光都是淺藍色。

另外能產生「反光」的不單單是地面，其實只要離物體較近且能反射光線的面都能讓物體產生「反光」。

例如下圖中，就能明顯看到白色瓶子的右側有一層綠色「反光」，這是因為旁邊的綠色外盒反射出的綠色光線射在了瓶身表面。

再如戶外拍攝人像時，有時為了不讓暗部過暗，往往會在旁邊添上一塊「反光板」，這個反光板所起作用就是讓臉部的背光面產生反光，以達到提亮暗部的目的。

小結

綜上所述，周圍環境的漫射光影響著物體的色彩平衡；而地面（也可是離物體較近的面）的漫射光則為物體暗面添加了反光。

為何要單獨講解環境色影響？因為現在很多Banner都是在一個有色背景中添加人物或產品，其實就可理解成是將物體放入一個環境色中，這時若想和背景自然融合，就需要它們的色彩平衡及反光都偏向背景色，不然整體就會失真。

總之調節「色彩平衡」能讓物體融進有色背景中；而添加「反光」可使物體更加通透，體積感也更強，下面展示2個融合不錯的案例。

在實戰案例中，我們會給2款產品分別添加一個藍色背景，然后用 「明暗原則」及「環境色影響」中提到的方法給產品加上光影，并將它們融進背景中（由于投影在后面才會提到，所以當前為保畫面完整性，關于投影部分只先添加，但不展開細講）。因為物體的明暗、投影和光源屬性密切相關，因此這里先設定主光源來自畫面左上方、強度中等、軟硬適中、白光，下面看具體如何呈現。

3. 照射光影響

在上述案例中，我們事先給主光源做了一個設定，為何要這么做呢？因為主光源的很多因素都直接決定了物體會呈現怎樣的光影，特別當畫面有多個物體時，只有確定了光才能使它們「光影統一」。

例如剛剛通過左上角的主光源能判斷畫面屬于側光，那產品也是對應的側光影，如果位置改變那光影也將發生改變，那光源的眾多因素究竟會讓物體產生哪些不同？下面一一細說。

照射方向

先說光源的照射方向，主要會影響物體的「明暗配比」，隨著方向不同，物體明暗也在發生微妙的變化，同時還會影響畫面的情感表達，所以照射方向是我們首先就要確定的因素，一般方向有7種。

而在實際運用時，常用方向是4種：前側光、側光、側逆光、逆光，這4種我們分成2組來講。（其他方向由于使用較少，就不展開）

前側光/側光。當光源的照射方向和視線方向成30°-60°夾角時稱為前側光；而當夾角成90°時則為側光。如圖所示，前側光一般明多暗少；側光則是明暗對半。

下面再看產品在前側光及側光下的光影呈現，主要區別在于明暗比例的變化，但變化很微妙，區分沒有那么明顯。這里我是用PS對產品進行的光影調整，因為日常工作中，PS處理光影才是大家的常用方法。

前側光及側光是電商設計中最常用的布光方式，這樣不管人物還是產品，明暗比例都比較適中，既能保證物體的亮度，也能很好的凸顯物體形態和質感，所以大量Banner的主體展示都會采用這種布光方式，下面看案例。

側逆光/逆光。當光源的照射方向和視線方向成120°-150°夾角時稱為側逆光；而當夾角成180°時則為逆光。如圖所示，側逆光和前側光剛好相反，物體是明少暗多；而逆光時的物體則幾乎全是暗面。總體來說，不管側逆光還是逆光，物體都以暗調為主。

再看看產品在側逆光及逆光下的光影該如何處理，雖然產品看著有些灰暗，但場景卻頗有氛圍和調性。

這也是一組常見的布光方式，和前測光/側光主要凸顯物體的立體感不同，側逆光及逆光主要是營造獨特的場景氛圍。

其中要特別注意物體背光面的暗調程度，根據需求提亮或壓暗，但多數時候都不會調的太暗，還是會保留物體該有的一切細節，避免色調過深而丟失了暗部層次，如下圖所示，元素的背光面依然都清晰可見。

逆光其實很有趣，當光照強烈、光質偏硬時，物體邊緣就會出現一圈非常明顯的高光，高光顏色和光源顏色一致，這就是「輪廓光」。光照強度越大、光質越硬，輪廓光就越明顯。

輪廓光一直都是攝影師的最愛之一，如圖所示，它能勾出人物輪廓，進而分離人物和背景，讓影調富有變化，提升畫面層次和細節。

在電商設計中也同樣常見，例如下圖中，仔細觀察人物和產品的邊緣，有些地方會有一層非常高亮的「輪廓光」，這處光影細節使畫面更具形式感和設計感。

還有一種情形也頗有藝術感，如果物體完全背光，這時背景偏亮而物體正面又無光時，就會形成「剪影」效果。在攝影中這是一種很有趣的拍攝方式，如圖所示，圖中的人物剪影會給觀眾留下豐富的想象空間。

在電商設計中，剪影同樣以表現人物或產品輪廓為主，突出整體造型，「剪影構圖」會更強調畫面的形式感傳達。

光源強度/距離

光源強度和距離會影響物體明暗的反差大小，強度越弱或距離越遠則物體明暗反差越?。欢鴱姸仍綇娀蚓嚯x越近則明暗反差越大。

原因很好理解，先說光源強度，當光源增強時，周圍環境和物體的受光面會更亮，因此亮面和暗面的反差也會更大。還有距離同樣如此，所有人造光源的光照都有衰減性，而光源強度隨著距離拉近而升高，因而距離越近的光源，照射強度同樣增強。

需要注意，還有一類光源是自然光，自然光比較特殊，如果在室外環境下，任何時候的光照（晴天、陰天等）都不會有衰減現象，因為作為光源的太陽太強，距離太遠，衰減可忽略不計。

但若在室內，陰天從窗外射入的自然光則會有衰減性，因為這時的光線以散射光為主，而這類光照要弱的多，再加上窗外射到室內的輻射范圍有限，所以衰減性便會顯現出來，如下圖所示。

光源強度和距離對產品的明暗影響也同樣如此：左圖設定的光源強度弱、距離遠，因而產品的明暗反差?。欢覉D設定的光源強度強、距離近，因而明暗反差更大。

如果選擇明暗弱反差，為避免畫面灰暗，我們需要提升畫面的曝光值，使整體明亮。

在實際運用時，明暗弱反差降低了明暗對比，人物或產品都沒有很深的陰影，整體呈現清晰、柔和，同時也弱化了結構和立體感，如圖所示。

而明暗強反差則讓人物或產品的明暗對比強烈，陰影明顯，質感凸顯，更強調整體結構和立體感，如圖所示。

光源軟硬

喜歡攝影的朋友對這個詞應該再熟悉不過，是指光的性質（簡稱「光質」）變化，分成硬光和軟光。

一般直射光屬于硬光，而散射光和漫射光則屬軟光。光源軟硬會影響物體的明暗過渡，硬光的光照直接，會讓物體的明暗過渡更為生硬，有明顯的陰影輪廓，突出表面結構和質感；而軟光的光照柔和，能讓物體的明暗過渡更為自然，無明顯的陰影輪廓，突出表面層次和細節。

另外在同等的光照強度下，由于軟光的光線呈分散狀，所以相比硬光，明暗反差也相對較小，如下圖所示。

下面再展示產品在硬光和軟光下的光影刻畫，明顯左圖的影調更為硬朗。

在設計時，硬光常用來表現人物的強勁、硬朗和力量，常用于男性、運動、健身等類目，另外也能凸顯產品的結構和造型，提升質感和立體感。

軟光則側重表現人物的柔美、清新和嬌嫩，常用于少女、兒童等類目；而用于產品則會讓其表面的層次細膩而豐富，更接近生活里的真實呈現。

光源顏色

最后是光的顏色（簡稱「光色」），光色變化會影響物體的表面顏色，由于人們對色彩的敏感度很高，所以眾多因素中，光色帶來的影響最為直觀。

一般來說，不管物體的固有色如何變化，表面呈現的都是光線顏色，只是明暗程度會有不同。如圖所示，當紅光照在球體上，亮面會呈現紅色；而綠光照射則會是綠色。

若產品被有色光照射時，受光面同樣會出現對應的光色，這時畫面會更生動，同時也提升了用戶的視覺印象。

在日常設計中，使用有色光算是「戲劇化用光」的一種手法，如圖所示，當畫面出現光色變化和鮮明對比時，畫面會更有沖擊和氛圍，也讓場景帶有強烈的情緒感。

小結

以上便是影響物體明暗的4個光源因素：照射方向、光源強度/距離、光源軟硬以及光源顏色。

通過相關案例，細心的小伙伴該會發現，當照射光的這些因素發生改變時，不單單是物體表面的明暗會有變化，其實投影也有明顯不同，確實物體的明暗和投影都是緊密相關，正因為投影太過重要，所以接下來單獨介紹。

物體投影

前面提到本文的「影」會涵蓋兩塊內容：物體的明暗和投影。現在就說說投影，我們還是從最具代表性的漫射材質入手。

何為投影？簡單說就是光線照射不到的地方。它是光影表現中非常重要的一環，有了投影，環境中的物體才有真實感，并和環境產生呼應關系，給人帶來現實感。

而投影呈現，就屬于典型的看著簡單其實復雜的細節刻畫，新手往往覺得投影不就是添加黑色的模糊橢圓嗎，偶爾雖然可行，但這并不適用所有場景。設計師真正要做的，是能根據各類場景準確表現出讓人舒服的物體投影。而物體投影，又分為表面投影和地面投影，投在物體表面的是表面投影；而物體投在地面的就是地面投影。

剛剛講「照射光影響」時提過，當光源強度、軟硬等因素改變時，物體的投影也會有明顯不同，那接下來我們就看看物體投影到底受哪些因素影響？又會有哪些不同？刻畫時考慮的要素都有哪些？相信看完會刷新大家對投影的認知，原來看似簡單的投影竟藏有這么多細節！

1. 投影方向

首先要考慮投影的方向，這是大前提，它和光源位置密切相關，核心原則是投影永遠在光源相對的一面，屬于光源光線的延伸。如圖所示，當畫面有多個物體時，要確保所有影子都和光源的光線方向保持一致，若不一致畫面就有違和感。

下面看案例，注意有時畫面的光源位置并不明顯，會在畫面外，例如右圖，這時就要事先設定一個光源位置，然后確保所有物體的投影都處在光源光線的延伸線上，這樣才合情合理。

2. 投影輪廓

確認方向后就要開始繪制投影的輪廓，這是投影表現中最難的一步，很多畫面的投影看著很假往往就是輪廓出了問題，一個優秀設計師要能準確呈現出物體投在地面的真實形狀，而不是所有投影都是一個圓形或矩形。那怎樣才能準確的勾出外形呢？我們需從以下3點來考慮：基本外形、發散程度和外形起伏。

基本外形

是指物體在光源照射下投在平面上的基礎形狀，關于形狀繪制有章可循，但需用到我們在高中「立體幾何」中所掌握的空間感。

總體來說，是先把光源的「位置點」和物體的各個「頂點」連成直線，再把每條直線延長至所在平面，這樣就能得到多個「交點」，最后把平面投影外圍的所有「交點」連接起來便會得到準確輪廓，如下圖所示。

上方是單個長方體的投影外形，可能這樣的簡單物體還比較好呈現，那復雜物體呢？其實用同樣方法即可，如下圖所示，我們先用上述方法將2個長方體的投影輪廓分別呈現，再合并就好。只是這時的空間更復雜，頂點也更多，我們要有足夠的眼力和耐心。

需要說明，在單一光源下，當畫面有多個物體組合出現時，所有物體的投影都是相加關系。即是說當多個投影有交集時，這些交集區域不會產生更深的疊加投影。

但以上只針對單一光源產生單一投影時的情況，若畫面有多個光源并讓物體產生了多個方向的投影時，此時投影便成疊加關系。

如下圖所示，示意圖和案例中都有2個主光源，因此物體產生了2個相交投影，投影的交集區域最深，而非交集區域由于光源的相互影響則會變淺。

最后通過投影基本形的繪制方法我們還能得出一個結論：影子長短和光源光線的入射角有關。入射光線和垂直地面的法線夾角就是入射角，入射角越大投影越長，入射角越小則投影越短。

準確的投影輪廓能讓產品呈現更真實，也更有美感，下面展示2個優秀案例，當然這些的前提是要光源為硬光，只有硬光才會有清晰的投影輪廓。

發散程度

接著要考慮投影外形的發散程度，「發散」是說投影輪廓離物體越遠則開口越大。所有物體的投影都有發散現象，只是程度不同，這和光源的面積大小及光源距離有關。

先說光源大小，光源面積越大則發散程度越小；而面積越小則發散程度越大。

再說光源距離，距離物體越遠則發散程度越??；而距離越近則發散程度越大。

例如太陽距離地球就非常遙遠，因此室外物體的影子擴散程度會非常小，像下圖中的樹木，投影都接近于平行。

其實距離遠近是光源非常重要的一個分析維度，它影響的因素有很多，不光是投影發散，還會影響投影的深淺和虛實，后面再細說。

一般在電商設計中，擴散程度較小的投影用的更多，畢竟生活中這類投影更加常見，呈現出來的影子也會比較自然和真實。

擴散程度較大的投影雖然用的不多，但使用恰當則會讓畫面充滿張力和氛圍，使人眼前一亮，如下圖所示。

外形起伏

投影的輪廓繪制還需考慮外形起伏，「起伏」是說投影不光要有二維平面的形狀變化，還要根據地面凹凸進行縱向的起伏調整。

其中地面凸起主要指「墻面」；而地面凹陷則指「階梯」；最后還有地面凹凸不平的「肌理」呈現。

當地面凸起形成類似「墻面」結構時，如果物體的影子長度大于墻面間距時，就會出現「投影上墻」現象，這是因為墻面也會出現一塊光線照射不到的區域，如下圖所示。

在設計時，如果投影剛好出現在產品和墻面的中間區域時，最好都設計成「投影上墻」的布光效果，這樣兩個元素間（產品和墻面）就會產生呼應和聯動，整體感更強。

當地面凹陷出現類似「階梯」結構時，如果物體的影子長度大于階梯轉角的間距時，就會出現「投影下沉」，如圖所示。

這里要注意一個關鍵點，上圖中的主光源出現在物體背面，屬于側逆光，這時「階梯結構」受光照影響也會出現暗面，和投影一樣，都屬于光線照不到的區域，因此在階梯轉角的背光面，不會出現物體投影，有時設計師會順手將物體投影疊加在轉角暗面，其實是錯誤呈現。

我們在觀察下生活中的真實投影，下方是我隨手拍的一張屋頂照片，上午9點，欄桿在屋頂投下了長長的影子，可以清晰看到，圈中擋板的背光面并沒有欄桿投影，就像被斷開了一樣。這是因為該區域都是背光面，不可能出現投影疊加的反?，F象。

因此我們在設計時要額外注意，千萬不要犯這種「投影疊加」的常識性錯誤，仔細觀察下方作品中方塊轉角的背光面，都不會出現產品投影的疊加現象。

有時地面還會以「肌理」方式呈現，像常見的草地、水面、沙灘等等，如圖所示，它們的表面都是凹凸不平，因此投影外形也要根據肌理起伏進行形態變化，這樣才不會顯得投影「太假」。

雖然投影的輪廓繪制我是從3小點依次展開，但實際設計時應該一氣呵成，根據畫面的光源同時確定投影外形、發散程度以及起伏，最終是為營造出物體在環境里的真實存在感。

3. 投影顏色

有了投影的「形」，現在我們要確定投影的「色」。很多新手在添加投影時不管周圍的環境色是什么，都會給影子直接填充黑色，最后導致影子在畫面中格格不入，像是多余的存在。

其實投影呈黑色的情況非常少見，由于受到周圍漫射光的影響，大部分時候都是跟著地面顏色走，這是總體原則。具體是會先給投影填上地面色，并將混合模式設成「正片疊底」，再將透明度調至合適數值即可。

仔細觀察下方案例，投影并非「黑色」，都是深色調的地面色，這樣投影才不至于突兀。

4. 投影深淺

既然投影都是深色調的地面色，那到底「多深」才合適呢？這就需要我們調整投影的深淺。關于投影深淺，需從2個維度來調整：整體深淺和相對深淺。

整體深淺

整體深淺是指投影的整體明暗，和上節講的「物體明暗」一樣，都是受光源強度和距離的影響。其中「深淺」是說環境明暗的反差大小，因此所謂的「投影深」其實是由于環境的明暗反差很大，反之亦然。

如下圖所示，光源強度越強則投影的明暗反差越大（投影深）；而光源強度越弱則投影的明暗反差越?。ㄍ队皽\），因此投影的整體深淺是相對周圍環境而言的。

另外整體深淺還受光源的距離影響，由于光線有衰減性，光源距離越近則投影的明暗反差越大，而距離越遠則投影的明暗反差越小。例如下方案例中，明顯左圖的明暗對比更強，投影更深。

相對深淺

相對深淺是指投影自身的明暗變化，即是說投影本身的明暗分布并不一致，哪怕整體很深的投影，但本身還是會有相對的深淺變化，具體則看投影所處區域的開闊程度：開闊程度越小投影越深；而開闊程度越大則投影越淺。

一般情況下，靠近物體底部的區域開闊程度最小，接受的環境光（散射光/反射光）也最少，所以投影最深；而離物體最遠的區域開闊程度最大，能接受的環境光也最多，所以投影最淺。

綜上所述，整體是遵循著「近深遠淺」的原則，投影靠近物體的區域更深；而遠離物體的區域更淺。該理論看似復雜其實簡單，下面我再用一張示意圖進一步說明。

若要表現投影的「相對深淺」，我們要重點呈現3個區域：

• 1區的開闊程度最小，幾乎沒有光照，因此色調也最深，這是投影中的最暗區域，稱為「暗角區」；
• 2區的開闊程度一般，接受的光照較少，因此色調偏深，為「本影區」；
• 而3區的開闊程度最大，接受的光照也最多，因此色調最淺，為「半影區」。

這3個區域會沿著投影輪廓呈直線分布，如下圖所示，在實際設計時，投影的暗角區往往是單獨的薄薄一層（作為點綴，面積不能太大），而本影區和半影區則會合并成另一層（色調由深到淺的漸變層），這樣刻畫產品投影時就是用這2個圖層來呈現。

再看電商作品中，物體的投影刻畫也是分2層呈現，注意物體底部的暗角區色調最深。

5. 投影虛實

投影呈現的最后還要調整「虛實」：「虛」是說投影的邊緣模糊；而「實」是說投影的邊緣清晰。和深淺一樣，虛實也分整體虛實和相對虛實。

整體虛實

投影的整體虛實是和光源軟硬及距離有關，先說光源軟硬，上節曾說過「光源的軟硬會影響物體的明暗過渡」，那現在還可加一點，光源的軟硬同時也影響著物體的投影虛實。

當光源為硬光時，光照直接，這時投影整體偏實、邊緣清晰、過渡生硬；而當光源為軟光時，光照柔和，光線分散，這時投影整體偏虛、邊緣模糊、過渡柔和。

除了光源軟硬，還有光源距離，光源距離越近則投影越虛；而距離越遠則投影越實。

這是因為光源的距離越近，相交的光線就越多，這時光線的相交區域也越大，如下圖所示，這樣投影便會形成更加柔和的邊緣。

從上圖能看到，光源的距離變化對物體的光影影響很大，不但影響了投影虛實，同時還決定了投影的擴散程度和整體深淺，這和我們之前講的一致。

一句話總結：光源的距離越近，投影的擴散程度越大、明暗反差也越大、邊緣則越模糊；而光源的距離越遠，投影的擴散程度越小、明暗反差也越小、邊緣則越清晰。

在實際運用時，「實影」會讓產品的明暗過渡生硬，暗部細節缺失，對投影的輪廓要求也高，總體較難掌握，因此使用相對較少。但「實影」卻有著更強的表現力和沖擊力，形式更加鮮明，富有張力。

而「虛影」則用的更多，它讓物體呈現的更加細膩和自然，由于投影的邊緣模糊，所以對輪廓要求也低，無需非常精準，哪怕結構復雜的物體，也無需勾勒出具體形狀，因此若對投影表現沒有把握，可以優先「虛影」，易操作也易出效果。例如下方案例中，不管什么樣的物體，在軟光的照射下，投影都是「模糊一片」，就算輪廓異常也不易察覺。

相對虛實

投影除了整體的虛實變化，自身也會有相應的虛實過渡，這和「相對深淺」類似，整體遵循著「近實遠虛」原則：投影離物體越近，則邊緣越清晰；若離物體越遠，則邊緣越模糊。

注意虛實過渡其實是個非常柔和的變化過程。之所以出現「越遠越虛」，是因為越遠的區域受到的環境光（散射光/反射光）影響越大。

當然在軟光照射下，有些畫面也會忽視投影的「近實遠虛」，將投影直接處理成整體模糊，其實也不太違和，因為「近實遠虛」算是一個非常微妙的細節呈現，不影響全局，但若能做到，畫面層次將更加細膩，如下圖所示。

小結

以上就是關于投影呈現的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. 新增銷售數據分析頁面，如使用銷售額排行榜表示客戶貢獻值高低、使用產品SKU的銷售量餅狀圖表示單品的受歡迎程度等；
2. 導出銷售數據到excel，通過excel的數據透視功能完成客戶貢獻值分析、單品的受歡迎程度分析等。

二、解決方案分析

目前我們有兩種解決方案可供選擇，那我們采用哪一種解決方案會更好呢？

1. 方案假設論證

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來做數據分析不僅可以很靈活的滿足需求，而且還很實用、很方便，也不會因功能的限制導致對數據無法分析。

2. 方案選擇

通過以上論證，我們發現，既要能夠解決問題又要支撐一個長期存在的功能，還要用較低成本以及最快的方式來完成，我們采用最佳的解決方案：“導出”。

三、導出功能設計

既然已經明確最佳解決方案是“導出”，那接下來就從導出的全生命周期看看，如何設計導出功能？

1. 導出前設計

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中合并單元格后僅保留左上角的值如下圖所示，這樣會使得篩選出現錯誤，也影響批量的公式使用導致透視表無法分析。

如果導出后只查看數據，可以考慮使用合并單元格。

2. 導出時設計

1）是否需要導出維度

百度釋義：維度是事物“有聯系”的抽象概念的數量，如時間維度是以時間作為描述、表達變量的度量尺度。

導出維度是指的按照特定場景下，導出以某個字段為主導數據且與該字段相關的其他字段數據。

一般來說，財務和倉庫的導出業務場景不同，財務需要以訂單維度導出，倉庫需要按商品為維度導出，如果無需導出維度，則不需要過度設計。

2）設置表頭導出字段

由于訂單的一條記錄數據字段會很多，包括：訂單號、銷售類型、客戶名稱、產品名稱、數量、單價、收貨人、聯系電話、賬期、發貨時間、預約到倉時間、發貨基地名稱、發貨方式、合同折讓率、應收款、已收款、未收款、產季等近30個字段。

而訂單分析時，收貨人、聯系電話、發貨時間等字段則無需導出。

因此選擇字段導出，可以讓客戶能夠更快速使用并完成分析。導出和查詢均要使用篩選，但呈現結果的方式不同，兩者的使用場景是可以借鑒的，建議可以放置篩選區。

3）是否需要支持選擇行導出

一般來說，導出數據為全量數據，如果用戶通過字段選擇不出需要的數據，此時要支持用戶勾選某些行數據，提示用戶當前勾選數據明細及數據條數。

4）其他處理

為了讓客戶清晰的明白訂單是如何導出的，需要在導出時給予導出規則、導出圖片、附件形式說明文字提示。

1. 是否需要導出規則說明；
2. 導出圖片、附件只能以鏈接形式導出說明；
3. 導出數據中是否存在日期和時間，需針對時間戳提前處理。

5）根據導出數據量，明確數據處理方式

從技術的角度說，針對較大數據量的導出場景，可以采用異步的處理方式，降低客戶的焦急心理。

所謂異步，就是用戶點擊導出按鈕后，后端接收請求并執行讀取任務，用戶可以不用停留在原處等待，離開當前頁面去處理其它工作任務，之后再打開任務頁面查看導出結果。

如果有數據可以預先計算，后端可以直接預先計算，同時避免了因采用同步的處理方式導致長時間等待的結果，客戶體驗會更好，工作效率也會更高。

1. 是否需要異步處理；
2. 是否需要預先計算。

6）是否需要任務頁面

如果用戶點擊“導出”按鈕后，10秒鐘內不能完成文件打開，會讓用戶產生焦慮心理。為了讓用戶使用體驗更佳，需要有一個固定頁面即任務頁面來承載導出任務列表。

四、總結思考

1. 從導出功能看功能設計流程

功能，是為解決問題而生，而功能的起源是需求，需求是從場景中找到問題。

由此可見，功能設計流程一定會包含場景選定、問題分析并找準需求、解決方案分析、選定功能、功能設計這5個階段。

做功能設計時，時刻問自己三個為什么：為什么這是一個問題（問題具備危害性）？為什么要解決這個問題（被解決的價值）？為什么我選定的功能可以解決這個問題（功能的價值）？

2. 導出能夠解決的問題

導出不僅可以解決文中的“需要更全面的數據分析”的問題，還可以解決“數據離線使用”的問題，導出后，數據以本地文件的形式存在，可離線使用。

另外導出還能解決“數據交付系統外部人員”的問題，導出后，數據以獨立文件的形式存在，可以復制，傳遞。

3. 可優化方向

1. 當系統頁面越來越多，導出也在多個頁面出現時，可考慮使用一個配置導出頁面統一管理系統中所有的導出；
2. 當用戶使用導出功能后不停留在原處等待時，出現導出異常，采用短信或郵件通知用戶，讓用戶及時知道導出進度不至于耽誤工作。

文章來源：人人都是產品經理    作者：努力的小妖

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務