文章來源：站酷

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

“個(gè)人主頁”是一個(gè)聽起來很熟悉，但又跟“個(gè)人中心”傻傻分不清楚的一個(gè)模塊，一般情況下處于APP底Tab的最右邊，通常喊它為“我的”。

這個(gè)界面看似沒什么挑戰(zhàn)可言，給設(shè)計(jì)師一種“不就是排排版的事兒嘛”的膨脹誤解，認(rèn)為完全在自己射程范圍內(nèi)，整個(gè)人都有點(diǎn)飄。

但最近發(fā)現(xiàn)，它并不像表面所呈現(xiàn)出的那么簡單，其實(shí)里面有很多小揪揪需要深挖和思考，所以千萬不能小瞧它。

好，廢話不多說，上才藝。

 個(gè)人主頁和個(gè)人中心的區(qū)別是？ 

講“個(gè)人主頁”前，先跟大家捋一下它倆的區(qū)別，避免混淆。首先，并沒有官方定義它們的名字，只是喊的人多了也就成了它們的名字了。

所以“個(gè)人主頁”也好、“個(gè)人中心”也罷，只是大家習(xí)慣性稱呼，為了合作過程中大家在同一個(gè)話語體系，提效而已。

要說它們倆的區(qū)別，其實(shí)還是有的。

 什么是個(gè)人中心？

個(gè)人中心，承載著自己賬號信息、設(shè)置管理、福利信息等功能的聚合地，主要用于個(gè)人信息的管理。

它常見于“工具類”產(chǎn)品中，如下：

對于“個(gè)人中心”，設(shè)計(jì)師要考慮的最核心是：如何解決“效率”問題。因此信息布局合理，視覺盡可能減少干擾，變得格外重要。

什么是個(gè)人主頁？

個(gè)人主頁，一般承載著用戶個(gè)人信息、個(gè)人影響力、生產(chǎn)的內(nèi)容等等，以此突顯自己魅力或定位。

常出現(xiàn)在內(nèi)容、社交、社區(qū)類產(chǎn)品中，比如以下產(chǎn)品：

當(dāng)然，還有一些產(chǎn)品，它既包含“個(gè)人中心”，也包含“個(gè)人主頁”，如下：

整體來看，“個(gè)人中心”偏向于個(gè)人信息的管理，更關(guān)注于“效率”；而“個(gè)人主頁”偏向于展示自我，關(guān)注點(diǎn)更“多元”，會(huì)復(fù)雜一些，下面會(huì)細(xì)講。搞明白了它們的區(qū)別之后，大家會(huì)發(fā)現(xiàn)“個(gè)人中心”相對更簡單一些。

所以，這次我們先聚焦聊聊“個(gè)人主頁”。

 設(shè)計(jì)“個(gè)人主頁”前思考什么？

在工作中，做任何需求都應(yīng)該有其目的或目標(biāo)，不然所有的忙碌都容易淪為資源的浪費(fèi)?！皞€(gè)人主頁”也應(yīng)有其價(jià)值和使命。

像上一趴所說，“個(gè)人主頁”是為了讓用戶突顯或塑造自己的魅力，很像是一個(gè)人的“個(gè)人名片”。那么，用戶塑造個(gè)人魅力對產(chǎn)品有什么價(jià)值和收益呢？目標(biāo)是什么呢？

拿短視頻產(chǎn)品舉例：如果用戶能夠在“個(gè)人主頁”充分展現(xiàn)自己的才華和魅力，從而帶來了更多瀏覽者的“關(guān)注”，那他們就更有動(dòng)力分享或生產(chǎn)優(yōu)質(zhì)內(nèi)容，進(jìn)而使產(chǎn)品內(nèi)容更加豐富；從而吸引更多新用戶的瀏覽、留存。

更多新用戶的加入、瀏覽、留存，讓內(nèi)容生產(chǎn)者有更多的漲粉空間，粉絲規(guī)模做起來之后再進(jìn)行商業(yè)化。

這樣對消費(fèi)型用戶、內(nèi)容生產(chǎn)者、平臺方都有利，進(jìn)而處于良性循環(huán)。

這就是“個(gè)人主頁”背后的大概邏輯和目的。

 如何進(jìn)行“個(gè)人主頁”的設(shè)計(jì)？

了解完“個(gè)人主頁”存在的價(jià)值和目標(biāo)之后，那么，作為產(chǎn)品或設(shè)計(jì)師們需要幫助用戶解決幾個(gè)問題：1.樹立人設(shè)；2.輔助吸粉; 3.助力變現(xiàn)。

 1.樹立人設(shè) 

人為什么需要樹立人設(shè)？

樹立人設(shè)，本質(zhì)上是兩種目的：獲得認(rèn)可（提升關(guān)注/約X），獲得收入（提升變現(xiàn)能力）。

如何幫助用戶快速建立人設(shè)？

個(gè)人主頁里有幾個(gè)區(qū)域，影響著用戶建立人設(shè)：a.頭圖區(qū)；b.個(gè)人信息區(qū)；c.作品區(qū)；

a.頭圖區(qū)

頭圖，指的是“個(gè)人主頁”頂部的圖片區(qū)域。

為了讓瀏覽者進(jìn)入“個(gè)人主頁”快速了解作者，頭圖這種處理手法，是很多社交/社區(qū)/內(nèi)容類產(chǎn)品，“樹立人設(shè)”的標(biāo)配。

比如：社交類產(chǎn)品的頭圖，用戶要么放自己照片，要么放風(fēng)景；

大V、商家等角色的用戶，會(huì)把頭圖打造成自己品牌的招牌，輔助瀏覽者快速了解自己定位。

不過，頭圖尺寸占比要把控好。

尺寸大小會(huì)影響界面的“屏效比”和用戶“上傳門檻兒”，對產(chǎn)品核心數(shù)據(jù)也有著千絲萬縷的關(guān)系。

b.個(gè)人信息區(qū)

個(gè)人信息區(qū)，也是作者的基礎(chǔ)資料。

一般包含著：用戶的昵稱、賬號、簡介、標(biāo)簽、粉絲關(guān)注量、關(guān)系鏈等信息。這個(gè)區(qū)域設(shè)計(jì)時(shí)需要重點(diǎn)考慮“信息親密度”和“信息優(yōu)先級”。

信息親密度：指的是如何將更親近的信息，以信息組的形式傳遞，減少用戶認(rèn)知成本。

比如下圖，常見的社區(qū)或內(nèi)容類產(chǎn)品針對“個(gè)人信息區(qū)”的處理方式（同一顏色的色塊代表親密度更強(qiáng)的信息。）

同時(shí)，“信息組”與“信息組”之間也需要處理好親密度，比如“小紅書”和“instagram”的“好友關(guān)系鏈”與“關(guān)注按鈕”是放一起的，方便用戶快速作出“關(guān)注”決策。

c.作品區(qū)

作品區(qū)的重要性不用多說了，它是作者“樹立人設(shè)”的重要組成部分，也直接影響著瀏覽者是否愿意關(guān)注的關(guān)鍵因素。

“作品區(qū)”設(shè)計(jì)時(shí)，有2個(gè)重要因素需要考慮：“作品尺寸占比”、“作品信息外顯”。

1）作品尺寸占比:

比如下圖，同樣是短視頻產(chǎn)品，Before作品區(qū)一排僅1個(gè)作品，剪映2個(gè)作品，而抖音3個(gè)作品。

單從排版美丑來評價(jià)是不負(fù)責(zé)的，那么如何決策哪種處理手法“對”的呢？

這需要通過自己產(chǎn)品定位分析，以及通過不同布局方式進(jìn)行上線測試，重點(diǎn)觀測核心數(shù)據(jù)（用戶消費(fèi)時(shí)長/作品消費(fèi)個(gè)數(shù)/關(guān)注率等）的影響情況來決策。

2）作品信息外顯:

除了作品本身，它的“輔助信息”也是幫助用戶做決策的重要因素。

比如：“Before”除了對作品熱度信息（瀏覽量、評論量等）外顯以外，更強(qiáng)調(diào)和引導(dǎo)用戶進(jìn)行互動(dòng)，如：收藏、分享、評論、充電；“剪映”根據(jù)產(chǎn)品屬性，更強(qiáng)調(diào)“使用數(shù)”和“作品的描述文案”；“抖音”作品僅外顯“點(diǎn)贊數(shù)‘，同時(shí)通過“置頂”和“剛剛看過”提升用戶決策效率。

以上可以看出，頭圖區(qū)、個(gè)人信息區(qū)、作品區(qū)，是讓瀏覽者快速且準(zhǔn)確的了解或關(guān)注內(nèi)容創(chuàng)作者重要組成部分，也是內(nèi)容創(chuàng)作者“樹立人設(shè)”的主要手段。

 2.輔助吸粉 

輔助吸粉，換句話說也是輔助用戶提升“關(guān)注率”。

不可否認(rèn)，清晰的編輯個(gè)人信息，產(chǎn)出優(yōu)質(zhì)的內(nèi)容，是用戶吸粉的根本，我們能做的只是“助攻”。

所以，在做此類“個(gè)人主頁”時(shí)，我們需要通過設(shè)計(jì)手段做個(gè)靠譜“奶媽”，有幾個(gè)維度可以嘗試：a.強(qiáng)化關(guān)注；b.沉淀粉絲。

a.強(qiáng)化關(guān)注

衡量粉絲多少，是通過用戶是否點(diǎn)擊“關(guān)注”了內(nèi)容創(chuàng)作者。

因此身為產(chǎn)品工作人員，在個(gè)人主頁設(shè)計(jì)時(shí)，除了其它信息呈現(xiàn)以外，在不影響頁面信息合理性的情況下，盡可能強(qiáng)化“關(guān)注”按鈕，引導(dǎo)用戶操作。

b.沉淀粉絲

有了粉絲之后，提升粉絲忠誠度和粘性，是每一個(gè)內(nèi)容生產(chǎn)者面臨的問題，也是工作人員們需要幫內(nèi)容創(chuàng)作者解決的。

左邊是“快手”，在個(gè)人主頁內(nèi)有粉絲群入口；右邊是“火山”，打造自己的“圈子”，粉絲們可以在里面發(fā)自己的動(dòng)態(tài)，或進(jìn)行互動(dòng)。

這么做是為了提升內(nèi)容創(chuàng)作者的粉絲粘性，給他們更大的空間去運(yùn)營粉絲，培養(yǎng)感情，打造更忠誠的私域流量。

 3.助力變現(xiàn) 

除了樹立人設(shè)、輔助吸粉以外，助力他們變現(xiàn)，才能使他們長期扎根于此（留在自己平臺）。不然大V們會(huì)帶著自己圈到的粉絲，去別的地兒賺錢，給你的產(chǎn)品帶綠帽子。

拿知乎舉例，內(nèi)容創(chuàng)作者可以在個(gè)人主頁掛自己的商品櫥窗，給符合自己人設(shè)的商品帶貨。

也可以開通付費(fèi)咨詢模塊，通過幫助用戶解答問題實(shí)現(xiàn)變現(xiàn)。

除此之外，還可以做付費(fèi)Live課程。

再來看下像嗶哩嗶哩、抖音、火山、QQ音樂等平臺，在個(gè)人主頁都有輔助用戶變現(xiàn)的入口。

下面是“聲撩”，利用用戶聲音的優(yōu)勢去變現(xiàn)，比如：陪打游戲（軟妹子聲音讓王者峽谷的漢子們興奮）、睡前陪聊、睡前連麥等等。

如果你真的很富有，且不想讓妹子陪聊陪打游戲，就是單純的想砸禮物引起注意，右圖可以看出，有個(gè)入口是直接“送禮”。

這么做滿足土豪訴求（博取主播注意），滿足主播訴求（變現(xiàn)），滿足平臺訴求（抽成），何樂而不為。

同時(shí)，也越來越多了產(chǎn)品不僅解決C端用戶的變現(xiàn)訴求，同時(shí)解決B端用戶變現(xiàn)訴求。比如，抖音賦能商家，商家號的“個(gè)人主頁”可以自定義tab，默認(rèn)展示“商品”tab。

用戶不僅能在這里消費(fèi)作品，還能通過作品建立的信任促進(jìn)購買行為。

再比如，instagram也提供B端用戶開店鋪功能。

以上，是關(guān)于“個(gè)人主頁”如何助力用戶變現(xiàn)的案例，其實(shí)玩法還有很多，這里僅提供一些思路，大家平常玩APP時(shí)可以多關(guān)注下。

   總結(jié)   

總的來說，“個(gè)人中心”與“個(gè)人主頁”最大的區(qū)別在于：“個(gè)人中心”主要是“給自己看的”，更注重使用效率。

“個(gè)人主頁”主要是“給他人看的”，更注重突顯自己魅力。在滿足使用效率的基礎(chǔ)上，需要通過產(chǎn)品設(shè)計(jì)手段幫助用戶“樹立人設(shè)”、“輔助吸粉”、“助力變現(xiàn)”，從而使用戶和平臺實(shí)現(xiàn)雙贏，打造一個(gè)更完善的生態(tài)。

以上，是“個(gè)人主頁”設(shè)計(jì)相關(guān)思考，希望對你們有所幫助。

文章來源：UI中國    作者：大牙

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

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

BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗(yàn)要求的不斷提高，BS界面的設(shè)計(jì)要求也越來越高，

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

（以上圖片均來源于網(wǎng)絡(luò)）

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

  更多精彩文章：

       ui界面設(shè)計(jì)之網(wǎng)站設(shè)計(jì)案例欣賞(一)

本文將研究 ES6 的 for ... of 循環(huán)。

舊方法

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

首先是經(jīng)典的 for i 循環(huán)，它使你可以遍歷數(shù)組或可索引的且有 length 屬性的任何對象。

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

其次是 for ... in 循環(huán)，用于循環(huán)一個(gè)對象的鍵/值對。

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

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

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

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

for … of

for ... of 循環(huán)

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

它將遍歷一個(gè)可迭代（iterable）對象。

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個(gè)實(shí)現(xiàn)了迭代器協(xié)議的對象，或者該方法是生成器函數(shù)。

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

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

下面逐個(gè)解決這些疑問。

內(nèi)置 Iterable

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

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

輸出結(jié)果是數(shù)組中的所有元素。

apples oranges
pears

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

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

將輸出以下內(nèi)容

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

當(dāng)用下面的語法時(shí)，entries 方法會(huì)更有用

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

在 for 循環(huán)中聲明了兩個(gè)變量：一個(gè)用于返回?cái)?shù)組的第一項(xiàng)（值的鍵或索引），另一個(gè)用于第二項(xiàng)（該索引實(shí)際對應(yīng)的值）。

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

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



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

}

會(huì)得到一個(gè)錯(cuò)誤

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

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

    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

創(chuàng)建自己的 Iterable

如果你想創(chuàng)建自己的可迭代對象，則需要花費(fèi)更多的時(shí)間。你會(huì)記得前面說過：

可迭代對象是定義了 @@ iterator 方法的對象，而且 @@iterator 方法返回一個(gè)實(shí)現(xiàn)了迭代器協(xié)議的對象，或者該方法是生成器函數(shù)。

搞懂這些內(nèi)容的最簡單方法就是一步一步的去創(chuàng)建可迭代對象。首先，我們需要一個(gè)實(shí)現(xiàn) @@iterator 方法的對象。 @@ 表示法有點(diǎn)誤導(dǎo)性，我們真正要做的是用預(yù)定義的 Symbol.iterator 符號定義方法。

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

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

得到一個(gè)新錯(cuò)誤：

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

這是 javascript 告訴我們它在試圖調(diào)用 Symbol.iterator 方法，但是調(diào)用的結(jié)果不是對象。

為了消除這個(gè)錯(cuò)誤，需要用迭代器方法來返回實(shí)現(xiàn)了迭代器協(xié)議的對象。這意味著迭代器方法需要返回一個(gè)有 next 鍵的對象，而 next 鍵是一個(gè)函數(shù)。

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

如果運(yùn)行上面的代碼，則會(huì)出現(xiàn)新錯(cuò)誤。

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

這次 javascript 告訴我們它試圖調(diào)用 Symbol.iterator 方法，而該對象的確是一個(gè)對象，并且實(shí)現(xiàn)了 next 方法，但是 next 的返回值不是 javascript 預(yù)期的對象。

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

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

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

如果 done 為 false 或不存在，則需要 value 鍵。 value 鍵是通過循環(huán)此應(yīng)該返回的值。

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

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)
}

生成器

手動(dòng)去構(gòu)建實(shí)現(xiàn)迭代器協(xié)議的對象不是唯一的選擇。生成器對象（由生成器函數(shù)返回）也實(shí)現(xiàn)了迭代器協(xié)議。上面的例子用生成器構(gòu)建的話看起來像這樣：

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)
}

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

$ node sample-program.js
2
4
6
8 

    10



    藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù) 

手機(jī)UI中的交互是保持產(chǎn)品鮮活生命力的源動(dòng)力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強(qiáng)體驗(yàn)感和沉浸感。

手機(jī)UI中的交互是保持產(chǎn)品鮮活生命力的源動(dòng)力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強(qiáng)體驗(yàn)感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計(jì)注入靈感。

--手機(jī)appUI設(shè)計(jì)--

 （以上圖片均來源于網(wǎng)絡(luò)）

 藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

  更多精彩文章：

       手機(jī)appUI界面設(shè)計(jì)賞析（一）

       手機(jī)appUI界面設(shè)計(jì)賞析（二）

       手機(jī)appUI界面設(shè)計(jì)賞析（三）

       手機(jī)appUI界面設(shè)計(jì)賞析（四）

       手機(jī)appUI界面設(shè)計(jì)賞析（五）

       手機(jī)appUI界面設(shè)計(jì)賞析（六）

       手機(jī)appUI界面設(shè)計(jì)賞析（七）

       手機(jī)appUI界面設(shè)計(jì)賞析（八）

      手機(jī)appUI界面設(shè)計(jì)賞析（九）

       手機(jī)appUI界面設(shè)計(jì)賞析（十）

先來了解一下項(xiàng)目的背景。Conduira online是一個(gè)線上的教育平臺，為準(zhǔn)備考試的用戶提供有用的工具和資源。這個(gè)平臺目前有一個(gè)側(cè)邊導(dǎo)航欄，上面有11個(gè)選項(xiàng)。后來由于平臺的變化，將主導(dǎo)航的選項(xiàng)縮減到3個(gè)——主頁、實(shí)習(xí)和課程。

導(dǎo)航的數(shù)量變少了，團(tuán)隊(duì)又迎來了新的問題：是應(yīng)該繼續(xù)保留側(cè)邊導(dǎo)航的設(shè)計(jì)樣式還是切換成頂部導(dǎo)航的樣式呢？

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

主導(dǎo)航中有幾個(gè)選項(xiàng)？

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

在頂部導(dǎo)航中，一個(gè)視覺固定點(diǎn)通常只適合一個(gè)選項(xiàng)。然而，側(cè)邊導(dǎo)航上的單一視覺固定點(diǎn)可以同時(shí)容納兩個(gè)選項(xiàng)。

結(jié)果很明確。與頂部導(dǎo)航相比，用戶在一次視覺觀察中可以在側(cè)邊導(dǎo)航上查看和感知更多菜單選項(xiàng)。當(dāng)然頂部導(dǎo)航也有自己的優(yōu)勢，為每個(gè)菜單項(xiàng)賦予各自的權(quán)重，而不是讓它們的重要性被其他選項(xiàng)分散。

對于具有過濾選項(xiàng)或帶有二級菜單的電商網(wǎng)站，視覺固定的概念起到了非常重要的作用。因?yàn)樵谶@些情況下，我們希望用戶能夠在單一的視覺點(diǎn)上盡可能多的選擇。

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

主導(dǎo)航與選項(xiàng)優(yōu)先級的關(guān)系？

用戶在瀏覽網(wǎng)頁或App時(shí)會(huì)有各種各樣的瀏覽順序，其中一種就是「F型模式」。

看起來像這樣：

F型布局的特點(diǎn)是將注視力集中在頁面的頂部和左側(cè):

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

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

因此，在頂部導(dǎo)航中最左邊的選項(xiàng)比其他選項(xiàng)具有更多的視覺權(quán)重，因?yàn)樗挥谥饕曈X區(qū)域，優(yōu)先級更高。

側(cè)邊導(dǎo)航采用了垂直移動(dòng)，這是用戶瀏覽網(wǎng)頁的一個(gè)自然方向，但是選項(xiàng)優(yōu)先級的排序是個(gè)限制。當(dāng)選項(xiàng)的優(yōu)先級相同時(shí)，可以使用側(cè)邊導(dǎo)航，這樣用戶就可以完整瀏覽列表并確定對他們重要的內(nèi)容。

是否考慮使用二級導(dǎo)航？

如果是的話，可以考慮利用以下兩種設(shè)計(jì)樣式：

水平導(dǎo)航——在頁面頂部設(shè)置一個(gè)主導(dǎo)航，在主導(dǎo)航下面設(shè)置二級導(dǎo)航進(jìn)一步來區(qū)分內(nèi)容。

側(cè)邊欄——在頂部設(shè)置一個(gè)主導(dǎo)航，然后在側(cè)邊設(shè)置一個(gè)側(cè)邊欄菜單來處理其他內(nèi)容。

總結(jié)

頂部導(dǎo)航和側(cè)邊導(dǎo)航之間的選擇實(shí)際上取決于以上三個(gè)基本的問題。

另外由于現(xiàn)在的設(shè)備有了更大的屏幕尺寸，如今許多設(shè)計(jì)趨勢已轉(zhuǎn)向側(cè)邊導(dǎo)航，因?yàn)樗雌饋砀蓛舨?yōu)化了更多的屏幕空間。

最后將導(dǎo)航的選擇歸結(jié)為兩點(diǎn)：

• 主導(dǎo)航包含的選項(xiàng)數(shù)量;
• 是希望用戶根據(jù)優(yōu)先級瀏覽項(xiàng)目，還是希望用戶可視化地瀏覽并根據(jù)其偏好選擇項(xiàng)目。

文章來源：優(yōu)設(shè)    作者：Clip設(shè)計(jì)夾

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

通過分析市場上的競品，能夠讓設(shè)計(jì)師在短時(shí)間內(nèi)快速了解自己所做產(chǎn)品在整個(gè)市場中的定位。

文章來源：站酷    

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

Flutter 構(gòu)建模式

目前，F(xiàn)lutter一共提供了三種運(yùn)行模式，分別是Debug、Release和Profile模式。其中，Debug模式主要用在軟件編寫過程中，Release模式主要用于應(yīng)用發(fā)布過程中，而Profile模式則主要用于應(yīng)用性能分析時(shí)，每個(gè)模式都有自己特殊的使用場景。下面簡介介紹下這幾種模式：

Debug模式

Debug模式又名調(diào)試模式，Debug模式可以同時(shí)在物理設(shè)備、仿真器或者模擬器上運(yùn)行應(yīng)用。默認(rèn)情況下，使用flutter run命令運(yùn)行應(yīng)用程序時(shí)就是使用的Debug模式。在Debug模式下，所有的斷言、服務(wù)擴(kuò)展是開啟的，并且在模式對快速開發(fā)和運(yùn)行周期進(jìn)行了編譯優(yōu)化，當(dāng)使用調(diào)試工具進(jìn)行代碼調(diào)試時(shí)可以直接連接到應(yīng)用的進(jìn)程里。

Release模式

Release模式又名發(fā)布模式，此模式只能在物理設(shè)備上運(yùn)行，不能在模擬器上運(yùn)行。使用flutter run --release命令運(yùn)行應(yīng)用程序時(shí)就是使用的Release模式。在Release模式下，斷點(diǎn)、調(diào)試信息和服務(wù)擴(kuò)展是不可用的，并且Release模式針對快速啟動(dòng)、快速執(zhí)行和安裝包大小進(jìn)行了優(yōu)化。

Profile模式

Profile模式只能在物理設(shè)備上運(yùn)行，不能在模擬器上運(yùn)行。此模式主要用于應(yīng)用性能分析，一些應(yīng)用調(diào)試能力是被保留的，目的是分析應(yīng)用存在的性能問題。Profile模式和Release模式大體相同，不同點(diǎn)體現(xiàn)在，Profile模式的某些服務(wù)擴(kuò)展是啟用的，某些進(jìn)程調(diào)試手段也是開啟的。

調(diào)試模式

在 Debug 模式下，app 可以被安裝在物理設(shè)備、仿真器或者模擬器上進(jìn)行調(diào)試。在Debug模式下，可以進(jìn)行如下操作：

斷點(diǎn) 是開啟的。

服務(wù)擴(kuò)展是開啟的。

針對快速開發(fā)和運(yùn)行周期進(jìn)行了編譯優(yōu)化（但不是針對執(zhí)行速度、二進(jìn)制文件大小或者部署）。

調(diào)試開啟，類似 開發(fā)者工具 等調(diào)試工具可以連接到進(jìn)程里。

如果是在 Web 平臺下的調(diào)試模式，可以進(jìn)行如下操作：

本次構(gòu)建 沒有 最小化資源并且整個(gè)構(gòu)建 沒有 優(yōu)化性能。

為了簡化調(diào)試，這個(gè) Web 應(yīng)用使用了 dartdevc 編譯器。

默認(rèn)情況下，運(yùn)行 flutter run 會(huì)使用 Debug 模式，同時(shí) IDE 也支持這些模式。例如，Android Studio 提供了 Run > Debug… 菜單選項(xiàng)，而且在項(xiàng)目面板中還有一個(gè)三角形的綠色運(yùn)行按鈕圖標(biāo) 。

Release 模式

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

斷點(diǎn)是不可用的。

調(diào)試信息是不可見的。

調(diào)試是禁用的。

編譯針對快速啟動(dòng)、快速執(zhí)行和小的 package 的大小進(jìn)行了優(yōu)化。

服務(wù)擴(kuò)展是禁用的。

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

這次構(gòu)建資源已經(jīng)被壓縮，并且性能得以優(yōu)化。

這個(gè) Web 應(yīng)用通過 dart2js 編譯器構(gòu)建，以確保更優(yōu)秀的性能。

Profile 模式

在 Profile 模式下，一些調(diào)試能力是被保留的，足夠分析你的 app 性能。Profile 模式在仿真器和模擬器上是不可用的，因?yàn)樗麄兊男袨椴荒艽碚鎸?shí)的性能。和 release 相比， profile 模式有以下不同：

一些服務(wù)擴(kuò)展是啟用的。例如，支持 performance overlay。

Tracing 是啟用的，一些調(diào)試工具，比如 開發(fā)者工具 可以連接到進(jìn)程里。

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

資源文件沒有被壓縮，但是整體性能已經(jīng)優(yōu)化。

這個(gè) Web 應(yīng)用通過 dart2js 編譯器構(gòu)建。

調(diào)試工具

在Flutter應(yīng)用開發(fā)中，有很多工具可以幫助調(diào)試 Flutter 應(yīng)用程序，常見的如下所示。

開發(fā)者工具，是一套運(yùn)行在瀏覽器的性能及分析工具。

Android Studio/IntelliJ 和 VS Code（借助 Flutter 和 Dart 插件）支持內(nèi)置的源代碼調(diào)試器，可以設(shè)置斷點(diǎn)，單步調(diào)試，檢查數(shù)值。

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

開發(fā)者工具

要調(diào)試及分析應(yīng)用，開發(fā)者工具可能是你的首選。開發(fā)者工具運(yùn)行在瀏覽器，支持以下特性：

源代碼調(diào)試器

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

內(nèi)存分析

時(shí)間線視圖，支持跟蹤，導(dǎo)入及導(dǎo)出跟蹤信息

日志視圖

如果你在Debug 模式 或Profile 模式 運(yùn)行，那么可以在瀏覽器打開開發(fā)者工具連接到你的應(yīng)用。開發(fā)者工具不能用在 Release 模式 編譯的應(yīng)用，因?yàn)檎{(diào)試和分析信息都被刪除了。如果你要用開發(fā)者工具分析應(yīng)用，需確保使用 Profile 模式運(yùn)行應(yīng)用。

在這里插入圖片描述

斷點(diǎn)調(diào)試

和其他語言一樣，F(xiàn)lutter的斷點(diǎn)調(diào)試支持在 IDE 或編輯器（比如 Android Studio/IntelliJ 和 VS Code）、或者通過編碼兩種方式。

其中，開發(fā)者工具調(diào)試器如下圖所示。

在這里插入圖片描述

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

在這里插入圖片描述

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

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

底部的 Console 窗口會(huì)顯示詳細(xì)的日志輸出。

調(diào)試基于默認(rèn)的啟動(dòng)配置，如果需要自定義，點(diǎn)擊選擇目標(biāo)下拉按鈕，選擇 Edit configuration 進(jìn)行配置。

在進(jìn)行斷點(diǎn)調(diào)試時(shí)，使用得最多的就是單步調(diào)試，三個(gè)單步調(diào)試按鈕在暫停后會(huì)變?yōu)榭捎脿顟B(tài)。

使用 Step in 來進(jìn)入被調(diào)用的方法，在遇到方法內(nèi)的第一行可執(zhí)行代碼時(shí)結(jié)束。

使用 Step over 直接執(zhí)行某個(gè)方法調(diào)用而不進(jìn)入內(nèi)部；該按鈕在當(dāng)前方法內(nèi)按行執(zhí)行。

使用 Step out 來跳出當(dāng)前方法，這種方式會(huì)直接執(zhí)行完所有當(dāng)前方法內(nèi)的語句。

除此之外，我們還可以使用代碼的方式進(jìn)行斷點(diǎn)調(diào)試，我們可以在源代碼中使用 debugger()函數(shù)來開啟斷點(diǎn)，當(dāng)代碼運(yùn)行到此處時(shí)就會(huì)刮起，如下所示。

import 'dart:developer';

void someFunction(double offset) {

 debugger(when: offset > 30.0);

 // ...

}

Dart 分析器

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

另外，我們可以使用flutter analyze --flutter-repo命令將分析結(jié)果打印到控制臺上，每次運(yùn)行這個(gè)命名之前，請先運(yùn)行flutter update-packages 升級的包，這樣就可以獲取的依賴包。如果你不這樣做，你可能會(huì)從dart:ui得到一些錯(cuò)誤消息，比如偏移量等。因?yàn)閳?zhí)行flutter analysis 命令時(shí)并不會(huì)主動(dòng)去拉取依賴。

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

Flutter inspector 工具

Flutter inspector 是分析Flutter組件狀態(tài)樹的利器，F(xiàn)lutter使用小部件來控制頁面組件到布局的精準(zhǔn)控制，F(xiàn)lutter inspector 可以幫助我們進(jìn)行如下一些分析。

進(jìn)行布局分析，理解布局層次

診斷布局問題

在這里插入圖片描述

在調(diào)試模式下，我們點(diǎn)擊Android Studio右邊Flutter inspector按鈕即可開啟Flutter inspector分析，F(xiàn)lutter inspector提供了如下的可視化調(diào)試工具。

在這里插入圖片描述

Select widget mode：啟用此按鈕后，選擇組件樹的代碼會(huì)自動(dòng)跳轉(zhuǎn)到對應(yīng)的源代碼里面。

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

Slow Animations：放慢動(dòng)畫速度，以便進(jìn)行視覺上的查驗(yàn)。

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

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

Repaint Rainbow：查看重繪的嚴(yán)重程度，嚴(yán)重的會(huì)被爆紅。

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

在這里插入圖片描述

測量應(yīng)用啟動(dòng)時(shí)間

要收集有關(guān) Flutter 應(yīng)用程序啟動(dòng)所需時(shí)間的詳細(xì)信息，可以在運(yùn)行 flutter run 命令時(shí)使用 trace-startup 和 profile 選項(xiàng)，如下所示。

flutter run --trace-startup --profile

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

{

 "engineEnterTimestampMicros": 2346054348633,

 "timeToFrameworkInitMicros": 812748,

 "timeToFirstFrameRasterizedMicros": 1573154,

 "timeToFirstFrameMicros": 1221472,

 "timeAfterFrameworkInitMicros": 408724

}

對應(yīng)的具體含義如下：

進(jìn)入 Flutter 引擎時(shí)

展示應(yīng)用第一幀時(shí)

初始化Flutter框架時(shí)

完成Flutter框架初始化時(shí)

使用Android Studio進(jìn)行調(diào)試

Flutter官方推薦使用Android Studio或VSCode進(jìn)行應(yīng)用開發(fā)， 和其他語言的調(diào)試一樣，Dart代碼的調(diào)試流程也差不多。如果還沒有Flutter項(xiàng)目，可以新建一個(gè)示例項(xiàng)目。通過單擊首先，點(diǎn)擊調(diào)試圖標(biāo)（Debug-run icon）同時(shí)打開調(diào)試面板并在控制臺中運(yùn)行應(yīng)用，首次運(yùn)行應(yīng)用是最慢的，應(yīng)用啟動(dòng)后，界面應(yīng)該是下面這樣的。

在這里插入圖片描述

然后，我們在在 counter++ 這一行上添加斷點(diǎn)。在應(yīng)用里，點(diǎn)擊 + 按鈕（FloatingActionButton，或者簡稱 FAB）來增加數(shù)字，應(yīng)用會(huì)暫停。

在這里插入圖片描述

你可以 step in/out/over Dart 語句、熱重載和恢復(fù)執(zhí)行應(yīng)用、以及像使用其他調(diào)試器一樣來使用 Dart 調(diào)試器。

Flutter inspector

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

了解現(xiàn)有布局

診斷布局問題

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

在這里插入圖片描述

Flutter outline

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

在這里插入圖片描述

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

在這里插入圖片描述

然后在輸入框中輸入attach關(guān)鍵字，顯示如下圖。

在這里插入圖片描述

使用 Android Gradle 調(diào)試

為了調(diào)試原生代碼，你需要一個(gè)包含 Android 原生代碼的應(yīng)用。在本節(jié)中，你將學(xué)會(huì)如何連接兩個(gè)調(diào)試器到你的應(yīng)用：

1）Dart 調(diào)試器。

2）Android Gradle 調(diào)試器。

創(chuàng)建一個(gè)基本的 Flutter 應(yīng)用，然后替換 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 文件，并執(zhí)行 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

點(diǎn)擊調(diào)試按鈕（Debug-run icon）來同時(shí)打開調(diào)試面板并啟動(dòng)應(yīng)用，如下圖所示。

在這里插入圖片描述

點(diǎn)擊 【Attach debugger to Android process】 按鈕，從進(jìn)程對話框中，你應(yīng)該可以看到每一個(gè)設(shè)備的入口。選擇 show all processes 來顯示每個(gè)設(shè)備可用的進(jìn)程。

在這里插入圖片描述

在調(diào)試面板中，你現(xiàn)在應(yīng)該可以看到一個(gè) Android Debugger 標(biāo)簽頁，然后依次選擇【app_name】 > 【android】 > 【app】 > 【src】 >【 main】 > 【java】 > 【io.flutter plugins】在項(xiàng)目面板，然后雙擊 GeneratedProjectRegistrant 在編輯面板中打開 Java 代碼，此時(shí)Dart 和原生調(diào)試器都在與同一個(gè)進(jìn)程交互。

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

構(gòu)圖、色彩和光影屬于設(shè)計(jì)中非常重要的3塊體系，但構(gòu)圖和色彩大多是偏感性的主觀理解，而光影則是理性的客觀判斷。因?yàn)檫@是自然界中真實(shí)存在的物理現(xiàn)象，因此大部分時(shí)候畫面的「添加光影」都是在還原真實(shí)，所以本文的很多知識都偏理論和科普，但理性認(rèn)知無疑是打牢光影基礎(chǔ)的第一步。

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

光源類型

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

發(fā)光的地方就是「光源」，當(dāng)我們對畫面「添加光影」時(shí)，一定要先留意光源在哪，像我每次畫設(shè)計(jì)草圖時(shí)，就會(huì)先把主光源的位置確定并標(biāo)示出來，只有清楚位置，「光影統(tǒng)一」才有了依據(jù)。

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

1. 照射光

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

直射光

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

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

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

散射光

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

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

而人造光中，如果給閃光燈和常亮燈裝上柔光罩，這時(shí)發(fā)出的光就會(huì)變成散射光。例如下圖中，人物和產(chǎn)品都顯的特別柔和、舒服。

折射光

當(dāng)光束從一個(gè)介質(zhì)射入另一介質(zhì)時(shí)，傳播方向發(fā)生偏折的光就是折射光。常見介質(zhì)有水、玻璃等，它們的折射角度也各不相同。

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

而我們在設(shè)計(jì)Banner時(shí)，若將這些折射效果表現(xiàn)出來，就會(huì)給畫面增添很多細(xì)節(jié)，同時(shí)也會(huì)增加真實(shí)感，像水波光影在電商中用的就很多。

2. 環(huán)境光

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

散射光

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

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

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

生活中還有一個(gè)常見現(xiàn)象也能看到散射光影響，當(dāng)你走在戶外，觀察自己的影子，特別當(dāng)影子較長時(shí)（清晨或傍晚），這時(shí)離自己越遠(yuǎn)的區(qū)域顏色越淺，這是因?yàn)樵竭h(yuǎn)的影子所處區(qū)域就越開闊，受周圍散射光的影響就越明顯，因而顏色更淺。

反射光

環(huán)境光中還有非常重要的一類是反射光，當(dāng)光束射到介質(zhì)表面時(shí)，有部分自介面射回的光就是反射光?？梢院敛豢鋸埖闹v，世界萬物之所以出現(xiàn)明暗就是因?yàn)榉瓷涔獾拇嬖?。反射光一般?種情形：鏡面反射和漫反射。

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

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

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

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

漫反射在這個(gè)世界里無處不在，它是我們對物體形態(tài)及色彩產(chǎn)生明確認(rèn)知的基礎(chǔ)。

因?yàn)橛新瓷涞拇嬖冢矬w才會(huì)有清晰的明暗關(guān)系，我們才能看清這個(gè)世界，它賦予了物體縱深感和體積感，不管是產(chǎn)品還是環(huán)境皆是如此。

這里列舉一個(gè)設(shè)計(jì)中常用的漫反射現(xiàn)象，我們將一個(gè)白色茶杯放入一個(gè)綠色盒中，打上一束光，這時(shí)茶杯整體都帶有綠色調(diào)，這是因?yàn)楹凶颖砻娈a(chǎn)生了大量綠色的漫射光，這些光束射在茶杯上，進(jìn)而發(fā)生偏色現(xiàn)象，如下圖所示。

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

當(dāng)然現(xiàn)實(shí)是復(fù)雜的，其實(shí)還有大量物體會(huì)同時(shí)存在鏡面反射光和漫射光，誰的強(qiáng)度大誰就更突出，例如起風(fēng)時(shí)的水面，就不全是鏡面反射，還有漫反射，這里就不再深究。

小結(jié)

以上提到的「照射光」和「環(huán)境光」便是設(shè)計(jì)中常用的2大光源類型，這2類往往是同時(shí)存在，一般照射光會(huì)直接影響物體的明暗結(jié)構(gòu)，而環(huán)境光則影響物體的色彩平衡及反光。

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

物體明暗

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

先說物體明暗，當(dāng)光源發(fā)出的光線射向物體時(shí)，由于光反射，物體會(huì)有對應(yīng)的明暗變化，記得在高中學(xué)習(xí)素描時(shí)，老師就曾提過光影的「五大調(diào)」，這正是人們對物體明暗關(guān)系的理論化總結(jié)。

但現(xiàn)實(shí)世界卻要復(fù)雜的多，因?yàn)槲矬w光影還與材質(zhì)密切相關(guān)，不同材質(zhì)的明暗關(guān)系截然不同，所以決不能撇開材質(zhì)談明暗，而設(shè)計(jì)中常用材質(zhì)有三大類：漫反射材質(zhì)、鏡面反射材質(zhì)和透明/半透明材質(zhì)。

不管現(xiàn)實(shí)世界還是電商視覺，漫反射材質(zhì)都是最常見的材質(zhì)，因?yàn)檫@類材質(zhì)的光影最有規(guī)律也最有代表性，明暗關(guān)系也簡單很多，剛剛說的「素描五大調(diào)」就是針對漫反射材質(zhì)，那我們就從這類材質(zhì)入手，詳細(xì)講講漫反射的光影到底如何呈現(xiàn)。

1. 明暗原則

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

而我們在刻畫漫射材質(zhì)的物體明暗時(shí)，需遵循3點(diǎn)原則：近亮遠(yuǎn)暗、先整體再局部以及細(xì)節(jié)刻畫。

近亮遠(yuǎn)暗

對于漫射材質(zhì)，首先一個(gè)大原則就是「近亮遠(yuǎn)暗」：

以畫面的主光源（照射光）為圓心，物體距離光源越近會(huì)越亮，越遠(yuǎn)則越暗。

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

在很多攝影或設(shè)計(jì)作品中，能看到不管人物還是產(chǎn)品，都會(huì)遵循這一原則：距離主光源越遠(yuǎn)則越暗。

先整體再局部

在「近亮遠(yuǎn)暗」的大原則下，先確定物體的整體光影，表現(xiàn)三大面（亮面、灰面、暗面），其本質(zhì)就是在固有色（物體在白色光下所呈現(xiàn)的色彩）的基礎(chǔ)上進(jìn)行深淺色調(diào)的變化。

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

細(xì)節(jié)刻畫

最后是刻畫光影細(xì)節(jié)，這里列出2個(gè)常見細(xì)節(jié)，這些細(xì)節(jié)雖不影響整體明暗，但會(huì)讓物體光影更加細(xì)膩和真實(shí)，屬于「加分項(xiàng)」。

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

往往越光滑的物體高光就越清晰。但對漫射材質(zhì)而言，高光不會(huì)很清晰，不過模糊程度要看物體的固有色以及粗糙度，粗糙度越大的物體高光越模糊。另外高光的外形還和物體的本身結(jié)構(gòu)有關(guān)。

在表現(xiàn)高光時(shí)，還有一塊高光區(qū)也經(jīng)常被刻畫出來，那就是塊面物體的「倒角高光」。

「倒角」其實(shí)是個(gè)工業(yè)設(shè)計(jì)術(shù)語，三維設(shè)計(jì)也常提到，一般塊面物體的棱角通常會(huì)做些圓滑過渡，這種過渡結(jié)構(gòu)就是倒角，有了倒角，轉(zhuǎn)折才不會(huì)「鋒利」，這時(shí)若有光線照射到表面，倒角處便會(huì)形成高光線。

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

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

當(dāng)2個(gè)物體相鄰時(shí)，它們相鄰的那面會(huì)有「重合陰影區(qū)」，并且物體離的越近，陰影會(huì)越深。這是因?yàn)橄噜徔臻g隨著物體間距越小，接受的環(huán)境光也會(huì)越來越少。

「重合陰影」是一個(gè)非常容易被大家忽略的設(shè)計(jì)細(xì)節(jié)，但若表現(xiàn)得當(dāng)，就能提升作品的精細(xì)度，如下圖所示。

2. 環(huán)境色影響

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

而「環(huán)境色」則是環(huán)境光中的一種情形：就是當(dāng)周圍環(huán)境有明確色彩時(shí)，這時(shí)產(chǎn)生的環(huán)境光會(huì)給物體帶來怎樣的影響？主要影響其實(shí)有2方面：物體的色彩平衡和反光，實(shí)際表現(xiàn)時(shí)也是從這兩點(diǎn)入手。

色彩平衡

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

所以當(dāng)物體處在一個(gè)有明確色彩的環(huán)境時(shí)，受環(huán)境四周的漫射光影響，整個(gè)物體都會(huì)偏向環(huán)境色，注意由于暗面受到的影響更大，因此暗面的偏色現(xiàn)象也會(huì)更加明顯。總之物體偏色程度是和其固有色、材質(zhì)及漫射光強(qiáng)度都息息相關(guān)。

反光

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

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

上圖是環(huán)境為白色的情形，而當(dāng)環(huán)境有明確色彩時(shí)，這時(shí)反光面就應(yīng)呈現(xiàn)環(huán)境色，如下圖所示，物體的反光都是淺藍(lán)色。

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

例如下圖中，就能明顯看到白色瓶子的右側(cè)有一層綠色「反光」，這是因?yàn)榕赃叺木G色外盒反射出的綠色光線射在了瓶身表面。

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

小結(jié)

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

為何要單獨(dú)講解環(huán)境色影響？因?yàn)楝F(xiàn)在很多Banner都是在一個(gè)有色背景中添加人物或產(chǎn)品，其實(shí)就可理解成是將物體放入一個(gè)環(huán)境色中，這時(shí)若想和背景自然融合，就需要它們的色彩平衡及反光都偏向背景色，不然整體就會(huì)失真。

總之調(diào)節(jié)「色彩平衡」能讓物體融進(jìn)有色背景中；而添加「反光」可使物體更加通透，體積感也更強(qiáng)，下面展示2個(gè)融合不錯(cuò)的案例。

在實(shí)戰(zhàn)案例中，我們會(huì)給2款產(chǎn)品分別添加一個(gè)藍(lán)色背景，然后用 「明暗原則」及「環(huán)境色影響」中提到的方法給產(chǎn)品加上光影，并將它們?nèi)谶M(jìn)背景中（由于投影在后面才會(huì)提到，所以當(dāng)前為保畫面完整性，關(guān)于投影部分只先添加，但不展開細(xì)講）。因?yàn)槲矬w的明暗、投影和光源屬性密切相關(guān)，因此這里先設(shè)定主光源來自畫面左上方、強(qiáng)度中等、軟硬適中、白光，下面看具體如何呈現(xiàn)。

3. 照射光影響

在上述案例中，我們事先給主光源做了一個(gè)設(shè)定，為何要這么做呢？因?yàn)橹鞴庠吹暮芏嘁蛩囟贾苯記Q定了物體會(huì)呈現(xiàn)怎樣的光影，特別當(dāng)畫面有多個(gè)物體時(shí)，只有確定了光才能使它們「光影統(tǒng)一」。

例如剛剛通過左上角的主光源能判斷畫面屬于側(cè)光，那產(chǎn)品也是對應(yīng)的側(cè)光影，如果位置改變那光影也將發(fā)生改變，那光源的眾多因素究竟會(huì)讓物體產(chǎn)生哪些不同？下面一一細(xì)說。

照射方向

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

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

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

下面再看產(chǎn)品在前側(cè)光及側(cè)光下的光影呈現(xiàn)，主要區(qū)別在于明暗比例的變化，但變化很微妙，區(qū)分沒有那么明顯。這里我是用PS對產(chǎn)品進(jìn)行的光影調(diào)整，因?yàn)槿粘９ぷ髦?，PS處理光影才是大家的常用方法。

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

側(cè)逆光/逆光。當(dāng)光源的照射方向和視線方向成120°-150°夾角時(shí)稱為側(cè)逆光；而當(dāng)夾角成180°時(shí)則為逆光。如圖所示，側(cè)逆光和前側(cè)光剛好相反，物體是明少暗多；而逆光時(shí)的物體則幾乎全是暗面?？傮w來說，不管側(cè)逆光還是逆光，物體都以暗調(diào)為主。

再看看產(chǎn)品在側(cè)逆光及逆光下的光影該如何處理，雖然產(chǎn)品看著有些灰暗，但場景卻頗有氛圍和調(diào)性。

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

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

逆光其實(shí)很有趣，當(dāng)光照強(qiáng)烈、光質(zhì)偏硬時(shí)，物體邊緣就會(huì)出現(xiàn)一圈非常明顯的高光，高光顏色和光源顏色一致，這就是「輪廓光」。光照強(qiáng)度越大、光質(zhì)越硬，輪廓光就越明顯。

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

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

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

在電商設(shè)計(jì)中，剪影同樣以表現(xiàn)人物或產(chǎn)品輪廓為主，突出整體造型，「剪影構(gòu)圖」會(huì)更強(qiáng)調(diào)畫面的形式感傳達(dá)。

光源強(qiáng)度/距離

光源強(qiáng)度和距離會(huì)影響物體明暗的反差大小，強(qiáng)度越弱或距離越遠(yuǎn)則物體明暗反差越??；而強(qiáng)度越強(qiáng)或距離越近則明暗反差越大。

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

需要注意，還有一類光源是自然光，自然光比較特殊，如果在室外環(huán)境下，任何時(shí)候的光照（晴天、陰天等）都不會(huì)有衰減現(xiàn)象，因?yàn)樽鳛楣庠吹奶柼珡?qiáng)，距離太遠(yuǎn)，衰減可忽略不計(jì)。

但若在室內(nèi)，陰天從窗外射入的自然光則會(huì)有衰減性，因?yàn)檫@時(shí)的光線以散射光為主，而這類光照要弱的多，再加上窗外射到室內(nèi)的輻射范圍有限，所以衰減性便會(huì)顯現(xiàn)出來，如下圖所示。

光源強(qiáng)度和距離對產(chǎn)品的明暗影響也同樣如此：左圖設(shè)定的光源強(qiáng)度弱、距離遠(yuǎn)，因而產(chǎn)品的明暗反差小；而右圖設(shè)定的光源強(qiáng)度強(qiáng)、距離近，因而明暗反差更大。

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

在實(shí)際運(yùn)用時(shí)，明暗弱反差降低了明暗對比，人物或產(chǎn)品都沒有很深的陰影，整體呈現(xiàn)清晰、柔和，同時(shí)也弱化了結(jié)構(gòu)和立體感，如圖所示。

而明暗強(qiáng)反差則讓人物或產(chǎn)品的明暗對比強(qiáng)烈，陰影明顯，質(zhì)感凸顯，更強(qiáng)調(diào)整體結(jié)構(gòu)和立體感，如圖所示。

光源軟硬

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

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

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

下面再展示產(chǎn)品在硬光和軟光下的光影刻畫，明顯左圖的影調(diào)更為硬朗。

在設(shè)計(jì)時(shí)，硬光常用來表現(xiàn)人物的強(qiáng)勁、硬朗和力量，常用于男性、運(yùn)動(dòng)、健身等類目，另外也能凸顯產(chǎn)品的結(jié)構(gòu)和造型，提升質(zhì)感和立體感。

軟光則側(cè)重表現(xiàn)人物的柔美、清新和嬌嫩，常用于少女、兒童等類目；而用于產(chǎn)品則會(huì)讓其表面的層次細(xì)膩而豐富，更接近生活里的真實(shí)呈現(xiàn)。

光源顏色

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

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

若產(chǎn)品被有色光照射時(shí)，受光面同樣會(huì)出現(xiàn)對應(yīng)的光色，這時(shí)畫面會(huì)更生動(dòng)，同時(shí)也提升了用戶的視覺印象。

在日常設(shè)計(jì)中，使用有色光算是「戲劇化用光」的一種手法，如圖所示，當(dāng)畫面出現(xiàn)光色變化和鮮明對比時(shí)，畫面會(huì)更有沖擊和氛圍，也讓場景帶有強(qiáng)烈的情緒感。

小結(jié)

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

通過相關(guān)案例，細(xì)心的小伙伴該會(huì)發(fā)現(xiàn)，當(dāng)照射光的這些因素發(fā)生改變時(shí)，不單單是物體表面的明暗會(huì)有變化，其實(shí)投影也有明顯不同，確實(shí)物體的明暗和投影都是緊密相關(guān)，正因?yàn)橥队疤^重要，所以接下來單獨(dú)介紹。

物體投影

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

何為投影？簡單說就是光線照射不到的地方。它是光影表現(xiàn)中非常重要的一環(huán)，有了投影，環(huán)境中的物體才有真實(shí)感，并和環(huán)境產(chǎn)生呼應(yīng)關(guān)系，給人帶來現(xiàn)實(shí)感。

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

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

1. 投影方向

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

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

2. 投影輪廓

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

基本外形

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

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

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

需要說明，在單一光源下，當(dāng)畫面有多個(gè)物體組合出現(xiàn)時(shí)，所有物體的投影都是相加關(guān)系。即是說當(dāng)多個(gè)投影有交集時(shí)，這些交集區(qū)域不會(huì)產(chǎn)生更深的疊加投影。

但以上只針對單一光源產(chǎn)生單一投影時(shí)的情況，若畫面有多個(gè)光源并讓物體產(chǎn)生了多個(gè)方向的投影時(shí)，此時(shí)投影便成疊加關(guān)系。

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

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

準(zhǔn)確的投影輪廓能讓產(chǎn)品呈現(xiàn)更真實(shí)，也更有美感，下面展示2個(gè)優(yōu)秀案例，當(dāng)然這些的前提是要光源為硬光，只有硬光才會(huì)有清晰的投影輪廓。

發(fā)散程度

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

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

再說光源距離，距離物體越遠(yuǎn)則發(fā)散程度越??；而距離越近則發(fā)散程度越大。

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

其實(shí)距離遠(yuǎn)近是光源非常重要的一個(gè)分析維度，它影響的因素有很多，不光是投影發(fā)散，還會(huì)影響投影的深淺和虛實(shí)，后面再細(xì)說。

一般在電商設(shè)計(jì)中，擴(kuò)散程度較小的投影用的更多，畢竟生活中這類投影更加常見，呈現(xiàn)出來的影子也會(huì)比較自然和真實(shí)。

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

外形起伏

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

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

當(dāng)?shù)孛嫱蛊鹦纬深愃啤笁γ妗菇Y(jié)構(gòu)時(shí)，如果物體的影子長度大于墻面間距時(shí)，就會(huì)出現(xiàn)「投影上墻」現(xiàn)象，這是因?yàn)閴γ嬉矔?huì)出現(xiàn)一塊光線照射不到的區(qū)域，如下圖所示。

在設(shè)計(jì)時(shí)，如果投影剛好出現(xiàn)在產(chǎn)品和墻面的中間區(qū)域時(shí)，最好都設(shè)計(jì)成「投影上墻」的布光效果，這樣兩個(gè)元素間（產(chǎn)品和墻面）就會(huì)產(chǎn)生呼應(yīng)和聯(lián)動(dòng)，整體感更強(qiáng)。

當(dāng)?shù)孛姘枷莩霈F(xiàn)類似「階梯」結(jié)構(gòu)時(shí)，如果物體的影子長度大于階梯轉(zhuǎn)角的間距時(shí)，就會(huì)出現(xiàn)「投影下沉」，如圖所示。

這里要注意一個(gè)關(guān)鍵點(diǎn)，上圖中的主光源出現(xiàn)在物體背面，屬于側(cè)逆光，這時(shí)「階梯結(jié)構(gòu)」受光照影響也會(huì)出現(xiàn)暗面，和投影一樣，都屬于光線照不到的區(qū)域，因此在階梯轉(zhuǎn)角的背光面，不會(huì)出現(xiàn)物體投影，有時(shí)設(shè)計(jì)師會(huì)順手將物體投影疊加在轉(zhuǎn)角暗面，其實(shí)是錯(cuò)誤呈現(xiàn)。

我們在觀察下生活中的真實(shí)投影，下方是我隨手拍的一張屋頂照片，上午9點(diǎn)，欄桿在屋頂投下了長長的影子，可以清晰看到，圈中擋板的背光面并沒有欄桿投影，就像被斷開了一樣。這是因?yàn)樵搮^(qū)域都是背光面，不可能出現(xiàn)投影疊加的反常現(xiàn)象。

因此我們在設(shè)計(jì)時(shí)要額外注意，千萬不要犯這種「投影疊加」的常識性錯(cuò)誤，仔細(xì)觀察下方作品中方塊轉(zhuǎn)角的背光面，都不會(huì)出現(xiàn)產(chǎn)品投影的疊加現(xiàn)象。

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

雖然投影的輪廓繪制我是從3小點(diǎn)依次展開，但實(shí)際設(shè)計(jì)時(shí)應(yīng)該一氣呵成，根據(jù)畫面的光源同時(shí)確定投影外形、發(fā)散程度以及起伏，最終是為營造出物體在環(huán)境里的真實(shí)存在感。

3. 投影顏色

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

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

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

4. 投影深淺

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

整體深淺

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

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

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

相對深淺

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

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

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

若要表現(xiàn)投影的「相對深淺」，我們要重點(diǎn)呈現(xiàn)3個(gè)區(qū)域：

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

這3個(gè)區(qū)域會(huì)沿著投影輪廓呈直線分布，如下圖所示，在實(shí)際設(shè)計(jì)時(shí)，投影的暗角區(qū)往往是單獨(dú)的薄薄一層（作為點(diǎn)綴，面積不能太大），而本影區(qū)和半影區(qū)則會(huì)合并成另一層（色調(diào)由深到淺的漸變層），這樣刻畫產(chǎn)品投影時(shí)就是用這2個(gè)圖層來呈現(xiàn)。

再看電商作品中，物體的投影刻畫也是分2層呈現(xiàn)，注意物體底部的暗角區(qū)色調(diào)最深。

5. 投影虛實(shí)

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

整體虛實(shí)

投影的整體虛實(shí)是和光源軟硬及距離有關(guān)，先說光源軟硬，上節(jié)曾說過「光源的軟硬會(huì)影響物體的明暗過渡」，那現(xiàn)在還可加一點(diǎn)，光源的軟硬同時(shí)也影響著物體的投影虛實(shí)。

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

除了光源軟硬，還有光源距離，光源距離越近則投影越虛；而距離越遠(yuǎn)則投影越實(shí)。

這是因?yàn)楣庠吹木嚯x越近，相交的光線就越多，這時(shí)光線的相交區(qū)域也越大，如下圖所示，這樣投影便會(huì)形成更加柔和的邊緣。

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

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

在實(shí)際運(yùn)用時(shí)，「實(shí)影」會(huì)讓產(chǎn)品的明暗過渡生硬，暗部細(xì)節(jié)缺失，對投影的輪廓要求也高，總體較難掌握，因此使用相對較少。但「實(shí)影」卻有著更強(qiáng)的表現(xiàn)力和沖擊力，形式更加鮮明，富有張力。

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

相對虛實(shí)

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

注意虛實(shí)過渡其實(shí)是個(gè)非常柔和的變化過程。之所以出現(xiàn)「越遠(yuǎn)越虛」，是因?yàn)樵竭h(yuǎn)的區(qū)域受到的環(huán)境光（散射光/反射光）影響越大。

當(dāng)然在軟光照射下，有些畫面也會(huì)忽視投影的「近實(shí)遠(yuǎn)虛」，將投影直接處理成整體模糊，其實(shí)也不太違和，因?yàn)椤附鼘?shí)遠(yuǎn)虛」算是一個(gè)非常微妙的細(xì)節(jié)呈現(xiàn)，不影響全局，但若能做到，畫面層次將更加細(xì)膩，如下圖所示。

小結(jié)

以上就是關(guān)于投影呈現(xiàn)的5大要素：投影方向、輪廓、顏色、深淺及虛實(shí)。但要注意設(shè)計(jì)不是物理學(xué)，設(shè)計(jì)師也不只是為了還原現(xiàn)實(shí)，因此很多時(shí)候不用太較真。例如有些畫面的光源并沒那么明確，這時(shí)投影有些地方刻畫的差不多即可，出現(xiàn)一點(diǎn)失真也沒關(guān)系，關(guān)鍵是不要讓人覺得畫面別扭和違和。

實(shí)戰(zhàn)案例

還記得前面講「明暗原則」時(shí)畫的立方體和球體嗎？下面我們用剛剛講的知識給它們逐步加上投影，物體只有同時(shí)加上明暗和投影，才算真正融進(jìn)了環(huán)境里。首先還是先明確光源情況：來自畫面的左上方，強(qiáng)度中等，軟硬適中，白光。

在剛剛「物體明暗」的實(shí)戰(zhàn)案例中，我們曾給2款產(chǎn)品添過「物體明暗」和「投影」，但投影并未細(xì)講，現(xiàn)在再逐步剖析一下產(chǎn)品的投影刻畫，其實(shí)和剛剛講的立方體如出一轍，同樣先設(shè)定好光源：來自畫面左上方，強(qiáng)度較大，軟硬適中，白光。

前面展示的都是相對簡單的示意案例，現(xiàn)在將以2款產(chǎn)品作為主視覺，分別用側(cè)光和逆光來設(shè)計(jì)2張不同風(fēng)格的Banner，通過完整案例讓大家了解兩種布光方式的不同以及物體對應(yīng)的光影刻畫。

通過2個(gè)綜合案例，大家能看到不同光源所帶來的感受也會(huì)不同：側(cè)光使物體呈現(xiàn)的更加真實(shí)和立體；而逆光則營造出一種獨(dú)特的場景氛圍，因此我們要根據(jù)需求選擇合適布光。

另外刻畫投影時(shí)需要考慮的因素也有很多，例如影子的輪廓、深淺及虛實(shí)等等，但不用生搬硬套，還是前面那句話：核心是不要讓人覺得別扭與違和。

總結(jié)

又又是一篇很長的文章，信息量很大，我們圍繞「光影」依次講了光源類型、物體明暗以及物體投影，當(dāng)然都是從漫反射材質(zhì)入手，相對簡單也有代表性，其實(shí)常見材質(zhì)中還有鏡面反射材質(zhì)和透明/半透明材質(zhì)，而這2類則要復(fù)雜很多，也較難呈現(xiàn)，這里就不展開。但不管材質(zhì)如何變化，正如本文開篇所說，「光影統(tǒng)一」都是核心原則，什么樣的光就會(huì)得到什么樣的影，雖然聽著簡單，但當(dāng)中要做的細(xì)節(jié)其實(shí)很多。

可能耐心讀完，有些小伙伴會(huì)覺得很多內(nèi)容過于理論和枯燥，好像不用這么麻煩也能做出差不多的「光影」，其實(shí)這種想法還是比較淺顯的。「光影」和構(gòu)圖、色彩不同，它是現(xiàn)實(shí)中客觀存在的一種現(xiàn)象，若表現(xiàn)過于感性就會(huì)導(dǎo)致畫面違和、不真實(shí)，所以本文的大量內(nèi)容都是在理性推導(dǎo)后得出的結(jié)論，總之「理性學(xué)習(xí)」是培養(yǎng)「正確設(shè)計(jì)感」的必經(jīng)之路。最后為方便大家梳理邏輯和內(nèi)容，下面附上本文的內(nèi)容結(jié)構(gòu)和知識框架。

文章來源：優(yōu)設(shè)    作者：賢輩

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

編輯導(dǎo)語：導(dǎo)出功能我們經(jīng)常能夠使用到，看似一個(gè)很簡單的功能，實(shí)則在設(shè)計(jì)的過程中需要考慮很多的因素。本文作者對導(dǎo)出功能的全過程進(jìn)行了思考，為我們分析了兩種解決方案，拆解了導(dǎo)出前和導(dǎo)出時(shí)的設(shè)計(jì)，并且進(jìn)行了總結(jié)。

一、引言

功能（百度釋義）：功能是一個(gè)漢語詞語，拼音為gōng néng，意指事物或方法所發(fā)揮的有利作用；效能。

綜合以上釋義，我們再從產(chǎn)品的角度對其理解：功能的好壞不僅僅關(guān)乎其本身，更重要的要看是否為解決實(shí)際問題而服務(wù)。

那導(dǎo)出功能，解決了什么樣的問題？我們先來看一個(gè)場景。

小A作為一名銷售人員，需要每月向領(lǐng)導(dǎo)匯報(bào)一次銷售情況，為了更直觀的讓領(lǐng)導(dǎo)看到銷售情況，小A要對銷售訂單數(shù)據(jù)進(jìn)行不同維度展示與分析。而目前系統(tǒng)只能查看訂單列表與銷售總額，不支持不同維度的數(shù)據(jù)分析。

從場景中我們可以看到這樣一個(gè)問題，由于系統(tǒng)只能查看訂單列表與銷售總額，不支持更全面的數(shù)據(jù)分析，導(dǎo)致小A每次向領(lǐng)導(dǎo)匯報(bào)前，只能人工將一個(gè)月近5000筆的訂單（此處不考慮后續(xù)不斷增加的訂單量）統(tǒng)計(jì)在excel中，從客戶維度計(jì)算出銷售額、銷售量，完成客戶維的銷售情況分析。

從產(chǎn)品SKU維度計(jì)算出銷售額、銷售量，完成產(chǎn)品SKU維銷售情況分析，導(dǎo)致小A的工作效率很低，同時(shí)人工抄錄導(dǎo)致數(shù)據(jù)錯(cuò)誤的的情況也常會(huì)出現(xiàn)，最終導(dǎo)致數(shù)據(jù)分析結(jié)果錯(cuò)誤。

針對該問題，我們深入思考一下，小A想要進(jìn)行更全面的數(shù)據(jù)分析，可以采用以下2種解決方案：

1. 新增銷售數(shù)據(jù)分析頁面，如使用銷售額排行榜表示客戶貢獻(xiàn)值高低、使用產(chǎn)品SKU的銷售量餅狀圖表示單品的受歡迎程度等；
2. 導(dǎo)出銷售數(shù)據(jù)到excel，通過excel的數(shù)據(jù)透視功能完成客戶貢獻(xiàn)值分析、單品的受歡迎程度分析等。

二、解決方案分析

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

1. 方案假設(shè)論證

1）采用“新增銷售數(shù)據(jù)分析頁面”的解決方案

通過與小A的繼續(xù)溝通發(fā)現(xiàn)數(shù)據(jù)分析的需求并不穩(wěn)定，處于變化的狀態(tài)。當(dāng)依據(jù)小A的需求完成分析頁面后，過了一段時(shí)間發(fā)現(xiàn)產(chǎn)品隨著季節(jié)變化導(dǎo)致銷售額也不穩(wěn)定，從時(shí)間維度的分析數(shù)據(jù)沒有參考價(jià)值，可能要舍棄這種分析方式。

此時(shí)我們發(fā)現(xiàn)，小A的需求可持續(xù)的時(shí)間極為短暫，不足以支撐一個(gè)長期存在的功能，但已經(jīng)將其實(shí)現(xiàn)為功能，則意味著功能白做了或沒有產(chǎn)生與成本對應(yīng)的價(jià)值。

2）采用“導(dǎo)出銷售數(shù)據(jù)到excel，通過excel的數(shù)據(jù)透視功能完成數(shù)據(jù)分析”解決方案

導(dǎo)出銷售數(shù)據(jù)到excel，可以規(guī)避因手動(dòng)抄錄導(dǎo)致的數(shù)據(jù)分析結(jié)果錯(cuò)誤問題，同時(shí)也會(huì)節(jié)省抄錄數(shù)據(jù)的時(shí)間，提高小A工作效率。

數(shù)據(jù)導(dǎo)出后，小A可以通過excel的數(shù)據(jù)透視功能或者其他第三方軟件完成定制化的數(shù)據(jù)分析，即使不開發(fā)數(shù)據(jù)分析功能，也可以滿足小A的“更全面的數(shù)據(jù)分析”需求。

例如，當(dāng)小A導(dǎo)出如下圖所示的數(shù)據(jù)后：

小A第一步可以先完成不同月份的匯總，在表中添加“月份”字段，添加公式為“=MONTH(A2)”；

第二步：再點(diǎn)擊表格中任意單元格–插入–透視表–新建工作表，將省份拖入數(shù)據(jù)透視表字段的【篩選器】，將月份拖入【行】中，將A、B、C、D產(chǎn)品銷售額(元）拖入【值】中；將行標(biāo)簽改為月份，每個(gè)字段以求和方法計(jì)算并修改字段名稱。

第三步：選中透視表中數(shù)據(jù)，調(diào)整格式為加千分位逗號，保留0位小數(shù)。

第四步：為了讓數(shù)據(jù)展現(xiàn)可視化，插入透視圖。

通過公式篩選、透視表、透視圖的使用，小A可以點(diǎn)擊查看不同地區(qū)、月份、產(chǎn)品的分類匯總數(shù)據(jù)，可以很直觀地反映出時(shí)間維度的銷售情況、不同地區(qū)的銷售情況、很好地為產(chǎn)品選擇、地域選擇做出數(shù)據(jù)依據(jù)支撐。

數(shù)據(jù)分析功能會(huì)從數(shù)據(jù)源、數(shù)據(jù)處理、數(shù)據(jù)的可視化來實(shí)現(xiàn)，而Excel的透視表對應(yīng)了數(shù)據(jù)明細(xì)（數(shù)據(jù)源），公式能夠完成較多的數(shù)據(jù)計(jì)算任務(wù)（數(shù)據(jù)處理）。

透視圖可以直觀、清晰的展示各類產(chǎn)品在不同月份、不同地區(qū)的銷售情況及總的銷售情況分析，為產(chǎn)品布局提供指導(dǎo)性參考依據(jù)（數(shù)據(jù)可視化）。

另外當(dāng)小A從數(shù)據(jù)透視圖看到某個(gè)月份銷售額過高，可以直接點(diǎn)擊查看透視表中的數(shù)據(jù)明細(xì)是否存在錯(cuò)誤，當(dāng)小A想查看每個(gè)產(chǎn)品銷售額的占比，可以新建數(shù)據(jù)透視表并將透視圖切換成餅狀圖查看。

由此可見，用Excel來做數(shù)據(jù)分析不僅可以很靈活的滿足需求，而且還很實(shí)用、很方便，也不會(huì)因功能的限制導(dǎo)致對數(shù)據(jù)無法分析。

2. 方案選擇

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

三、導(dǎo)出功能設(shè)計(jì)

既然已經(jīng)明確最佳解決方案是“導(dǎo)出”，那接下來就從導(dǎo)出的全生命周期看看，如何設(shè)計(jì)導(dǎo)出功能？

1. 導(dǎo)出前設(shè)計(jì)

1）明確導(dǎo)出數(shù)據(jù)限制

無論當(dāng)前的系統(tǒng)數(shù)據(jù)量是多少，建議都要做導(dǎo)出條數(shù)限制。

因2003版的excel 一個(gè)sheet表最多導(dǎo)出65535條數(shù)據(jù)，2007版的excel是10萬4000多條。如果不設(shè)限，當(dāng)用戶導(dǎo)出的數(shù)據(jù)量超過excel單個(gè)sheet的數(shù)據(jù)量時(shí)，會(huì)出現(xiàn)導(dǎo)出失敗的情況，影響用戶的正常使用，且產(chǎn)生對系統(tǒng)的不信任情緒。

那應(yīng)該限制到多少條數(shù)據(jù)？

我們先來了解一下導(dǎo)出的技術(shù)原理，當(dāng)用戶點(diǎn)擊導(dǎo)出后，數(shù)據(jù)會(huì)被以excel的形式下載到服務(wù)器，服務(wù)器再通過網(wǎng)絡(luò)將文件發(fā)送給用戶。

在這個(gè)過程中，導(dǎo)出條數(shù)受限制的原因一個(gè)是服務(wù)器性能，另一個(gè)是用戶的電腦性能以及所使用excel版本，在實(shí)際產(chǎn)品設(shè)計(jì)時(shí)，根據(jù)實(shí)際情況，制定一個(gè)合理的數(shù)據(jù)限制即可。

回到開頭的場景中，用戶不僅要導(dǎo)出數(shù)據(jù)還要做數(shù)據(jù)透視表，假設(shè)用戶使用的03版excel，導(dǎo)出30多個(gè)字段，使用大量excel公式，最穩(wěn)妥的是限制到1萬條數(shù)據(jù)以內(nèi)。

做了一組極限測試數(shù)據(jù)供大家參考，使用一臺2核4G的服務(wù)器、1個(gè)用戶使用、導(dǎo)出條數(shù)是1048576條（導(dǎo)出最大條數(shù)）、導(dǎo)出3個(gè)字段、使用2010版excel，導(dǎo)出后當(dāng)使用一個(gè)sum公式時(shí)，出現(xiàn)了如下圖的錯(cuò)誤，導(dǎo)致excel異常退出。

2）明確導(dǎo)出格式

數(shù)據(jù)導(dǎo)出格式有.xls和.csv，.xls是二進(jìn)制的文件用excel才能打開；.csv是文本文件，用記事本就能打開。而當(dāng)前用戶導(dǎo)出數(shù)據(jù)后要進(jìn)行的是數(shù)據(jù)分析，故只需支持.xls導(dǎo)出。

3）明確導(dǎo)出需求

導(dǎo)出一個(gè)excel一個(gè)sheet，還是一個(gè)excel多個(gè)sheet？

考慮到用戶導(dǎo)出數(shù)據(jù)后要對訂單數(shù)據(jù)進(jìn)行分析，可以與用戶明確是否需要按某一維度如客戶維度將數(shù)據(jù)拆分成多個(gè)sheet，減少用戶操作數(shù)據(jù)的時(shí)間以便能把更多精力放在數(shù)據(jù)分析。

如果用戶不需要按照某一維度拆分?jǐn)?shù)據(jù)，則采用導(dǎo)出一個(gè)excel一個(gè)sheet的方式。

表頭是否需要增加序號列？

當(dāng)用戶導(dǎo)出訂單數(shù)據(jù)后，為了讓用戶準(zhǔn)確操作某一行數(shù)據(jù)，需要有唯一代表一行數(shù)據(jù)的標(biāo)記，而在訂單導(dǎo)出前是以數(shù)據(jù)庫的主鍵來標(biāo)記，對于導(dǎo)出后的訂單，則需要自動(dòng)增加序號列方便用戶操作。

是否有內(nèi)容需要用顏色標(biāo)注區(qū)別？

在導(dǎo)出訂單數(shù)據(jù)中，為了快速掌握銷售情況，有些數(shù)據(jù)是需要特別關(guān)注的、而有些不需要。因此，可以使用顏色標(biāo)注來做區(qū)別，讓查看人員快速找到自己想要的數(shù)據(jù)，如可以標(biāo)注總計(jì)快速查看總銷售額。

是否需要合并單元格？

對于導(dǎo)出后進(jìn)行數(shù)據(jù)分析，不建議使用合并單元格，因excel中合并單元格后僅保留左上角的值如下圖所示，這樣會(huì)使得篩選出現(xiàn)錯(cuò)誤，也影響批量的公式使用導(dǎo)致透視表無法分析。

如果導(dǎo)出后只查看數(shù)據(jù)，可以考慮使用合并單元格。

2. 導(dǎo)出時(shí)設(shè)計(jì)

1）是否需要導(dǎo)出維度

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

導(dǎo)出維度是指的按照特定場景下，導(dǎo)出以某個(gè)字段為主導(dǎo)數(shù)據(jù)且與該字段相關(guān)的其他字段數(shù)據(jù)。

一般來說，財(cái)務(wù)和倉庫的導(dǎo)出業(yè)務(wù)場景不同，財(cái)務(wù)需要以訂單維度導(dǎo)出，倉庫需要按商品為維度導(dǎo)出，如果無需導(dǎo)出維度，則不需要過度設(shè)計(jì)。

2）設(shè)置表頭導(dǎo)出字段

由于訂單的一條記錄數(shù)據(jù)字段會(huì)很多，包括：訂單號、銷售類型、客戶名稱、產(chǎn)品名稱、數(shù)量、單價(jià)、收貨人、聯(lián)系電話、賬期、發(fā)貨時(shí)間、預(yù)約到倉時(shí)間、發(fā)貨基地名稱、發(fā)貨方式、合同折讓率、應(yīng)收款、已收款、未收款、產(chǎn)季等近30個(gè)字段。

而訂單分析時(shí)，收貨人、聯(lián)系電話、發(fā)貨時(shí)間等字段則無需導(dǎo)出。

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

3）是否需要支持選擇行導(dǎo)出

一般來說，導(dǎo)出數(shù)據(jù)為全量數(shù)據(jù)，如果用戶通過字段選擇不出需要的數(shù)據(jù)，此時(shí)要支持用戶勾選某些行數(shù)據(jù)，提示用戶當(dāng)前勾選數(shù)據(jù)明細(xì)及數(shù)據(jù)條數(shù)。

4）其他處理

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

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

5）根據(jù)導(dǎo)出數(shù)據(jù)量，明確數(shù)據(jù)處理方式

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

所謂異步，就是用戶點(diǎn)擊導(dǎo)出按鈕后，后端接收請求并執(zhí)行讀取任務(wù)，用戶可以不用停留在原處等待，離開當(dāng)前頁面去處理其它工作任務(wù)，之后再打開任務(wù)頁面查看導(dǎo)出結(jié)果。

如果有數(shù)據(jù)可以預(yù)先計(jì)算，后端可以直接預(yù)先計(jì)算，同時(shí)避免了因采用同步的處理方式導(dǎo)致長時(shí)間等待的結(jié)果，客戶體驗(yàn)會(huì)更好，工作效率也會(huì)更高。

1. 是否需要異步處理；
2. 是否需要預(yù)先計(jì)算。

6）是否需要任務(wù)頁面

如果用戶點(diǎn)擊“導(dǎo)出”按鈕后，10秒鐘內(nèi)不能完成文件打開，會(huì)讓用戶產(chǎn)生焦慮心理。為了讓用戶使用體驗(yàn)更佳，需要有一個(gè)固定頁面即任務(wù)頁面來承載導(dǎo)出任務(wù)列表。

四、總結(jié)思考

1. 從導(dǎo)出功能看功能設(shè)計(jì)流程

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

由此可見，功能設(shè)計(jì)流程一定會(huì)包含場景選定、問題分析并找準(zhǔn)需求、解決方案分析、選定功能、功能設(shè)計(jì)這5個(gè)階段。

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

2. 導(dǎo)出能夠解決的問題

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

另外導(dǎo)出還能解決“數(shù)據(jù)交付系統(tǒng)外部人員”的問題，導(dǎo)出后，數(shù)據(jù)以獨(dú)立文件的形式存在，可以復(fù)制，傳遞。

3. 可優(yōu)化方向

1. 當(dāng)系統(tǒng)頁面越來越多，導(dǎo)出也在多個(gè)頁面出現(xiàn)時(shí)，可考慮使用一個(gè)配置導(dǎo)出頁面統(tǒng)一管理系統(tǒng)中所有的導(dǎo)出；
2. 當(dāng)用戶使用導(dǎo)出功能后不停留在原處等待時(shí)，出現(xiàn)導(dǎo)出異常，采用短信或郵件通知用戶，讓用戶及時(shí)知道導(dǎo)出進(jìn)度不至于耽誤工作。

文章來源：人人都是產(chǎn)品經(jīng)理    作者：努力的小妖

藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)