如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
沒有用戶會(huì)拒絕任何產(chǎn)品的錦上添花，而功能性動(dòng)效對(duì)于產(chǎn)品來講，在滿足功能效率的同時(shí)，能夠帶來更多額外的附加體驗(yàn)，是一種相對(duì)比較容易引發(fā)體驗(yàn)峰值的途徑，下面和大家介紹 功能性動(dòng)效的定義和類型。
功能性動(dòng)效的主要類型有頁(yè)面空間轉(zhuǎn)換、視覺信息反饋、功能操作引導(dǎo)、品牌與趣味，本文就來談?wù)勥@四種功能性動(dòng)效在移動(dòng)端的使用。
定義：功能性動(dòng)效是一種嵌入 UI 設(shè)計(jì)中微妙的動(dòng)畫，有著明確、合理的目標(biāo)
功能性動(dòng)效的主要類型：
頁(yè)面空間轉(zhuǎn)換；
視覺信息反饋；
功能操作引導(dǎo)；
品牌與趣味。
類型 1 ：頁(yè)面空間轉(zhuǎn)換動(dòng)效
1.1 主要作用
頁(yè)面空間轉(zhuǎn)換的動(dòng)效，主要是為了讓用戶通過理解頁(yè)面中空間轉(zhuǎn)換的動(dòng)效，了解到界面和元素之間的空間關(guān)系，并隨時(shí)感知到空間元素的變化。
告訴用戶對(duì)象和窗口的狀態(tài)是如何變化的，防止頁(yè)面轉(zhuǎn)換視盲，在空間上也能營(yíng)造更好的印象。
1.2 使用場(chǎng)景
頁(yè)面空間轉(zhuǎn)換類動(dòng)效，主要使用在輪播 banner／頁(yè)面切換/導(dǎo)航菜單切換。
1.3 優(yōu)秀案例賞析
案例 (1) ：輪播 Banner 中的空間轉(zhuǎn)換動(dòng)效
案例 (2) ：導(dǎo)航菜單切換
導(dǎo)航欄的的轉(zhuǎn)換是指 App 中導(dǎo)航菜單狀態(tài)的變換，有不同級(jí)菜單之間和同級(jí)菜單之間的轉(zhuǎn)換，解釋菜單之間的層級(jí)關(guān)系，讓用戶明白菜單轉(zhuǎn)換的過程中到底發(fā)生了什么，下一步操作具體如何去做。
類型 2 ：視覺信息反饋動(dòng)效類型
具備良好用戶體驗(yàn)的產(chǎn)品，都應(yīng)該給用戶的每一個(gè)操作都提供反饋，無論成功與否，反饋會(huì)使用戶覺得自己與屏幕上的元素進(jìn)行真實(shí)互動(dòng)。即便隔著屏幕，也能讓用戶看起來是在直接操作，增加操作的可控性真實(shí)自然的體感。
2.1 主要作用
視覺信息反饋類動(dòng)效主要是為了告訴用戶目前操作到哪里了，時(shí)時(shí)狀態(tài)怎么樣，緩解用戶對(duì)應(yīng)用處理速度的量化感知。
具體表現(xiàn)為：
確認(rèn)系統(tǒng)接收到用戶的操作；
確認(rèn)（或拒絕）用戶的行為;
明確告知用戶當(dāng)前操作的進(jìn)度／狀態(tài)，緩解用戶的緊張／焦慮感。
2.2 使用場(chǎng)景
系統(tǒng)信息提示／狀態(tài)反饋／操作結(jié)果反饋／進(jìn)度提示／加載提示。
2.3 優(yōu)秀案例賞析
案例 (1)：系統(tǒng)提示反饋
系統(tǒng)反饋，當(dāng)系統(tǒng)狀態(tài)發(fā)生重要的變化時(shí)，功能性動(dòng)畫也可以用來提醒用戶，可以給用戶一個(gè)快速而有簡(jiǎn)潔的一個(gè)反饋。例如：短信提示、來電提示。如下圖：
案例 (2) ：操作結(jié)果反饋
案例 (3) ：進(jìn)度提示反饋
在進(jìn)度條設(shè)計(jì)中，明確告知用戶當(dāng)前的具體進(jìn)度和狀態(tài)，讓用戶隨時(shí)隨地知道還需要等待多久，對(duì)當(dāng)前操作環(huán)境是可控的，而不是讓用戶去猜，讓用戶對(duì)當(dāng)前的操作環(huán)境不可控。例如：他當(dāng)下操作的步驟；目前數(shù)據(jù)下載／狀態(tài)的具體執(zhí)行進(jìn)度等，讓用戶有心理預(yù)期。
類型 3 ：功能操作引導(dǎo)
當(dāng)用戶第一次使用你的app的時(shí)候，如果沒有幫助的話，他們可能會(huì)不知道如何操作。 我們應(yīng)該給用戶提供一些視覺提示來告訴他們哪些操作是可行的。
3.1 主要作用
功能性的動(dòng)畫可以提示用戶去注意那些可以完成的操作，視覺提示可以給用戶告知即將發(fā)生的事情。
3.2 使用場(chǎng)景
新手引導(dǎo)/功能操作引導(dǎo)。
3.3 優(yōu)秀案例賞析
案例 1 ：新手引導(dǎo)
案例 2 ：功能操作中的引導(dǎo)
下圖中的例子，是一個(gè)游戲里面的小例子，直接用動(dòng)效完美詮釋了“手把手教導(dǎo)”，這樣用戶理解的成本就非常低，根本不用思考，按照引導(dǎo)去做就能完成任務(wù)。是一種非常清晰的解決問題的方式。
類型 4 ：品牌與趣味
4.1 主要作用
為了避免與市場(chǎng)上很多APP同質(zhì)化，千篇一律的用戶體驗(yàn)，品牌動(dòng)畫可以成為一個(gè)產(chǎn)品的營(yíng)銷工具，用來表現(xiàn)一家公司的品牌價(jià)值或者突出產(chǎn)品的優(yōu)勢(shì)，同時(shí)給用戶一種愉快又難忘的用戶體驗(yàn)。
4.1 使用場(chǎng)景
加載細(xì)節(jié)／動(dòng)效速度感知／動(dòng)效色彩的具體場(chǎng)景中使用。
4.3 優(yōu)秀案例
案例（1）：Uber 啟動(dòng)頁(yè)的打開加載動(dòng)效
Uber 的打開動(dòng)效不僅讓用戶體會(huì)到愉悅感，而且它的展開式動(dòng)效還很好地“控制”了用戶雙眼的視覺焦點(diǎn)。如下圖：
案例（2）：輸入操作中的動(dòng)效
下圖的例子是一個(gè)輸入賬號(hào)密碼操作時(shí)的動(dòng)效，是動(dòng)效帶來趣味體驗(yàn)的典型案例：
當(dāng)用戶輸入密碼的時(shí)候，這個(gè)動(dòng)作其實(shí)是一個(gè)非常隱私的動(dòng)作，所以現(xiàn)實(shí)生活中，自己輸密碼的時(shí)候，都會(huì)希望身邊的陌生人轉(zhuǎn)身／不要直接盯著看。
而下面的例子就把保護(hù)用戶隱私作為一種生理的本能，把這種生活中的習(xí)慣延續(xù)到界面細(xì)節(jié)當(dāng)中，當(dāng)用戶輸入密碼的時(shí)候，輸入框上面的貓頭鷹自覺的捂住了自己的眼睛，向用戶傳達(dá)系統(tǒng)的安全性之外，也和用戶進(jìn)行了一次無聲的趣味互動(dòng)，是一個(gè)很好的信息反饋的案例。
除了上面的賬號(hào)輸入案例，還有其他類似的動(dòng)效例子。例如：很多結(jié)果輸入的反饋里，如果結(jié)果輸入錯(cuò)誤，那么輸入框和文字則會(huì)來回晃動(dòng)，同時(shí)輸入的文字／輸入框同時(shí)變紅。這個(gè)效果會(huì)讓我們聯(lián)想到日常生活中的擺手和搖頭，而這些都代表著“no”，是一種非常自然的動(dòng)效交互邏輯。而正是這些小細(xì)節(jié)的使用，是打造良好用戶體驗(yàn)的關(guān)鍵。
結(jié)語
其實(shí)，用戶比我們預(yù)想中更能注意到頁(yè)面中的細(xì)節(jié)，動(dòng)效除了要幫助用戶快速找到他想要的東西，達(dá)到他想完成的任務(wù)，也是一種可以給用戶傳遞情感的交互元素。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
那如何縮短數(shù)據(jù)與用戶的距離？讓用戶一眼抓到重點(diǎn)？讓老板為你的匯報(bào)方案鼓掌？
本文通過連環(huán)15關(guān)，層層深入，傳你數(shù)據(jù)匹配圖形神功，讓數(shù)據(jù)可視化更。
無論數(shù)據(jù)總量和復(fù)雜程度如何，數(shù)據(jù)間的關(guān)系大多可分為三類：比較/構(gòu)成/分布&聯(lián)系。
基于分類/時(shí)間的數(shù)據(jù)對(duì)比，通常需用到比較型圖表。用戶通過圖表輕松識(shí)別最大/最小值，查看當(dāng)前和過去的數(shù)據(jù)變動(dòng)情況。
常見場(chǎng)景：哪個(gè)地區(qū)的收件量最多？今年的收入和去年相比如何……
1. 條目少 – 柱狀圖
比較條目較少時(shí)，如5個(gè)地區(qū)收件量的對(duì)比，可選用柱狀圖表示。
△ 柱狀圖
2. 條目多 – 條形圖
當(dāng)條目較多，如大于12條，移動(dòng)端上的柱狀圖會(huì)顯得擁擠不堪，更適合用條形圖。一般數(shù)據(jù)條目不超過30條，否則易帶來視覺和記憶負(fù)擔(dān)。
△ 條形圖
3. 看趨勢(shì) – 折線圖
當(dāng)X軸為連續(xù)數(shù)值（如時(shí)間）且注重變化趨勢(shì)時(shí)，則適用折線圖。
△ 折線圖
4. 擴(kuò)大差異 – 南丁格爾玫瑰圖
除柱狀圖外，有無更新穎的表現(xiàn)方式呢？那就屬南丁格爾玫瑰圖了。
△ 南丁格爾玫瑰圖
由于扇形的半徑和面積是平方的關(guān)系，南丁格爾玫瑰圖會(huì)將數(shù)值之間的差異放大，適合對(duì)比大小相近的數(shù)值。它不適合對(duì)比差異較大的數(shù)值，因?yàn)閿?shù)值過小的類目會(huì)難以觀察。
此外，因?yàn)閳A有周期性，玫瑰圖也適于表示周期/時(shí)間概念，比如星期、月份。依然建議數(shù)據(jù)量不超過30條，超出可考慮條形圖。
5. 雙向 – 雙向條形圖
前面的例子都是單維度比較，當(dāng)比較正反兩類甚至更多維度的數(shù)據(jù)時(shí)，可嘗試雙向條形圖，下圖為各大區(qū)的重點(diǎn)地區(qū)的收派件量的對(duì)比。
△ 雙向條形圖
用顏色區(qū)分大區(qū)，空心/實(shí)心區(qū)分收件量和派件量，既能整體比較大區(qū)，又能詳細(xì)對(duì)比地區(qū)的情況。
打怪升級(jí)，再加點(diǎn)難度。在雙向圖上再增加一個(gè)維度，如下表，比較5個(gè)地區(qū)的利潤(rùn)及相應(yīng)的收入和成本。請(qǐng)先思考一下，再下滑看推薦圖表。
△ 業(yè)務(wù)數(shù)據(jù)
△ 雙向條形圖（多維度）
通過圖形一眼就能看出深圳區(qū)的利潤(rùn)低于廣州區(qū)，即使它的收入高于廣州區(qū)，但成本相對(duì)來說高于廣州區(qū)。
6. 目標(biāo)達(dá)成 – 子彈圖
實(shí)際業(yè)務(wù)中，常要考察指標(biāo)的達(dá)成情況，如收入達(dá)標(biāo)情況及所處區(qū)間（優(yōu)、良、差），如下表，你會(huì)怎么可視化呢？動(dòng)手畫一畫吧！
△ 業(yè)務(wù)數(shù)據(jù)
△ 子彈圖
子彈圖，因?yàn)橄褡訌椛浜髱С龅能壍?。相較于儀表盤，它能夠在狹小的空間中表達(dá)豐富的數(shù)據(jù)信息，在信息傳遞上有更大的效能優(yōu)勢(shì)。
若還要比較4個(gè)季度的收入情況，只需用不同顏色區(qū)分。如下圖，一眼便知第二季度表現(xiàn)較好，而第一季度則不佳。
△ 子彈圖
7. 性能 – 雷達(dá)圖
對(duì)于一些多維的性能數(shù)據(jù)，如綜合評(píng)價(jià)，常用雷達(dá)圖表示。指標(biāo)得分接近圓心，說明處于較差狀態(tài)，應(yīng)分析改進(jìn)；指標(biāo)得分接近外邊線，說明處于理想狀態(tài)。
△ 雷達(dá)圖
以上就是「比較」類的常用圖表，可歸納如下。
此表并非一成不變的「鐵表」，相互之間還會(huì)串聯(lián)交叉，大家還需靈活應(yīng)用。
部分相較于整體，一個(gè)整體被分成幾個(gè)部分。這類情況會(huì)用到構(gòu)成型圖表，如五大區(qū)的收件量占比、公司利潤(rùn)的來源構(gòu)成等。
1. 單層 – 餅狀圖
第1關(guān)中，對(duì)比5個(gè)地區(qū)的收件量時(shí)用到了柱狀圖。若看占比情況，餅狀圖更合適。
△ 餅狀圖
如果變成17個(gè)地區(qū)，會(huì)怎樣？
像不像彩色七星瓢蟲？
所以餅圖分類一般不超過9個(gè)，超過建議用條形圖展示。
除餅圖外，環(huán)形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區(qū)域挖空，在空心區(qū)域顯示文本信息，比如標(biāo)題，優(yōu)勢(shì)是其空間利用率更高。
△ 環(huán)形圖
2. 分層 – 環(huán)形圖、旭日?qǐng)D
對(duì)于管理層而言，需先把握大局和重點(diǎn)。比如大區(qū)負(fù)責(zé)人需一眼看到重點(diǎn)地區(qū)及重點(diǎn)分部的情況（如下圖），如何展示？
△ 環(huán)形圖
△ 旭日?qǐng)D
這個(gè)叫旭日?qǐng)D，逐層下鉆看數(shù)據(jù)，大區(qū)的重點(diǎn)地區(qū)及相應(yīng)分部的構(gòu)成情況一目了然。
3. 累計(jì)趨勢(shì) – 堆疊面積圖
接下來，看看數(shù)值構(gòu)成隨時(shí)間變化的案例：第一大區(qū)（包含四個(gè)重點(diǎn)地區(qū)）近四年收入構(gòu)成的趨勢(shì)要如何可視化？自己想一想，再下滑看推薦方案。
△ 業(yè)務(wù)數(shù)據(jù)
△ 堆疊面積圖
推薦方案是堆疊面積圖，可以展現(xiàn)分量（地區(qū)）對(duì)于總量（大區(qū)）的貢獻(xiàn)，并顯示總量（大區(qū)）的變化過程。需要說明的是，地區(qū)收入的起點(diǎn)并非從 y=0 開始，而是在下面的地區(qū)基礎(chǔ)上逐層疊加，最后組成一個(gè)整體。
4. 累計(jì)比較 – 堆疊柱狀圖
如果將上圖X軸的標(biāo)簽文字（即年份）和圖例（即地區(qū)）互換（如下圖A），用來看每個(gè)地區(qū)近四年的收入構(gòu)成，用哪個(gè)圖更合適？
△ 堆疊柱狀圖
是不是覺得都可以？那圖中 X1 有何含義？堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于，堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)（如時(shí)間），堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù)，因此用 B 方案更適合。
5. 累計(jì)增減 – 瀑布圖
若想表達(dá)兩個(gè)數(shù)據(jù)點(diǎn)間數(shù)量的演變過程，可使用瀑布圖。開始的一個(gè)值，在經(jīng)過不斷的加減后，得到一個(gè)值。瀑布圖將這個(gè)過程圖示化，常用來展現(xiàn)財(cái)務(wù)分析中的收支情況。
△ 瀑布圖
以上就是「構(gòu)成」類常用圖表，可歸納如下。
通過分布&聯(lián)系型圖表能看到數(shù)據(jù)的分布情況，進(jìn)而找到某些聯(lián)系，如相關(guān)性、異常值和數(shù)據(jù)集群。
常見使用場(chǎng)景：客戶的年齡段分布？單票成本與收件量的關(guān)系？
1. 兩個(gè)變量 – 散點(diǎn)圖
仍以業(yè)務(wù)為例，下圖為全國(guó)網(wǎng)點(diǎn)的單票成本/收入分布情況。
△ 散點(diǎn)圖
單單這樣看，可能看不出什么，如果加兩條平均線就不一樣了。
加了平均線，就知道哪些網(wǎng)點(diǎn)高于平均線，哪些低于平均線。但網(wǎng)點(diǎn)那么多，總不能逐個(gè)點(diǎn)擊查看是哪個(gè)大區(qū)的，給散點(diǎn)加上顏色后，就很有意義了。
通過此圖，可以看出哪些大區(qū)單票利潤(rùn)較低，急需提升，比如廣泛聚集于右下角的第四大區(qū)，單票收入低于平均線，單票成本卻高于平均線。
2. 三個(gè)變量 – 氣泡圖
大家都知道，網(wǎng)點(diǎn)總利潤(rùn)除了和單票利潤(rùn)有關(guān)，還和體量（即收件量）有關(guān)，用散點(diǎn)的面積大小表示收件量，就變成了氣泡圖。
△ 氣泡圖
3. 結(jié)合地圖 – 熱力圖
氣泡圖與地圖結(jié)合可演變?yōu)闊崃D。通過熱力圖，能看到哪些網(wǎng)點(diǎn)收派件量較多，需進(jìn)行資源調(diào)配。
△ 熱力圖
以上是 「分布&聯(lián)系」類的常用圖表，可歸納如下：
當(dāng)我們拿到數(shù)據(jù)后，先提煉關(guān)鍵信息，明確數(shù)據(jù)關(guān)系及主題，再選擇合適的圖表進(jìn)行可視化。希望下圖能給各位一些參考（結(jié)合可視化專家 Andrew Abela 的圖表選擇指南，進(jìn)行了簡(jiǎn)化調(diào)整）。
數(shù)據(jù)可視化設(shè)計(jì)只要多練習(xí)、多總結(jié)，總有一天會(huì)得心應(yīng)手。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
PS: 這些網(wǎng)頁(yè)設(shè)計(jì)作品截圖均來自@dailywebdesign的ins列表，所有作品并非在Dribbble獲取，所以沒有對(duì)應(yīng)的作品集頁(yè)面鏈接。
設(shè)計(jì)師們，來一起欣賞的網(wǎng)頁(yè)界面，從中獲得新的設(shè)計(jì)靈感吧！
Design by:@nomsedit
看了上面這張圖，我想到一個(gè)同學(xué)的問題：
我可能缺乏創(chuàng)意，發(fā)現(xiàn)你發(fā)布的每個(gè)設(shè)計(jì)看起來都差不多。 例如作品中的大型字體，是用什么字體？如何讓物體與字體穿插進(jìn)去？
小編建議你不要過于在乎這些，這些都是軟件使用操作，隨著你工作時(shí)間長(zhǎng)，慢慢就會(huì)懂了，當(dāng)然也可以看看一些 PS 相關(guān)教程啦，作為初入門的設(shè)計(jì)師，建議你看作品的表現(xiàn)手法、配色，版式等等，并增加自己的審美能力。
Design by:@outcrowdstudio
Design by:@rathniley
Design by: Robert Berki
這個(gè)跑車網(wǎng)頁(yè)設(shè)計(jì)作品，布局排版都十分簡(jiǎn)約，僅僅采用很簡(jiǎn)單的宮格設(shè)計(jì)，但通過配色、字體層級(jí)、留白，便得整體感覺卻非常好，所以不一定要做很復(fù)雜的效果，學(xué)好排版技巧也能做出不錯(cuò)的案例！
Design by: Nick Taylor
Design by:@vivekgetinstagram
Design by: Kate Laguta
Design by:@l_svl
Design by:@gilhuybrecht
Design by: Samuel Scalzo
Design by:@rathniley
Design by:@rob_robertson_design
Design by:@arendstom
Design by: Hippie Mao
Design by:@christvizcarra （PS:這張圖處理很贊！）
Design by:@rrahian
Design by:@dennis.design
Design by:@brkrobert
Design by:@artlemonstudio
Design by:@vladimirbiondic
Design by: @bobchadesign
Design by: Nick Herasimenka
Design by: @bobchadesign
Design by: Jabel Ahmed
Design by:@dawidmlynarz （像這種簡(jiǎn)約版式，再配合 CSS 動(dòng)畫，效果就更不錯(cuò)了）
Design by: Ali Sayed （小編提醒你，這種網(wǎng)頁(yè)，看似簡(jiǎn)單，但內(nèi)容質(zhì)量非常重要，不要亂試?。?
Design by:@aleksandrkotelevets （黑白配色）
Design by:@im_abhishekp
Design by:@im_abhishekp
Design by: Samuel Scalzo （手機(jī)網(wǎng)頁(yè)）
Design by: Alexander Laguta
Design by:@im_abhishekp
Design by: Sarath
Design by:@outcrowdstudio
Design by:@realvjy
Design by:@konstantinzhuck （星巴克專題頁(yè)面設(shè)計(jì)）
Design by: Mike | Creative Minds （美食網(wǎng)站設(shè)計(jì)）
Design by:@rathniley
Design by:@im_abhishekp
Design by:@im_abhishekp
Design by:@outcrowdstudio
Design by: Cosmin Capitanu
Design by:@zainjin
Design by: Dragon Lee
Design by: Rafal Staromlynski
Design by:@trionndesign
Design by: @trionndesign
Design by:@hrvoja
Design by: @netflayo
Design by: @trionndesign
Design by: Dimest
Design by:@rtralrayhan
Design by: Rob Robertson
Design by: @sogaso
Design by: Nick Taylor
Design by: Nick Taylor
Design by: Nick Taylor
Design by: Nick Taylor
Design by: @luovastudio7
Design by: Ben Johnson
Design by: Nick Taylor
若是網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)很多年，但還是沒什么進(jìn)步的你，這樣的話你要注意了，除了自己工作，小編建議你看一些書籍，設(shè)計(jì)導(dǎo)航推薦的100本設(shè)計(jì)書籍，里面有技能書，有理論書，都需要看一下。
今天的網(wǎng)頁(yè)界面已分享完畢，你喜歡這些作品嗎？歡迎在下文評(píng)論處留下你的建議。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
今年是宮崎駿電影《龍貓》上映的30周年，吉卜力工作室已經(jīng)將電影原版膠片轉(zhuǎn)換成了高清數(shù)碼，進(jìn)行了修復(fù)與重制，并將于12月14日在內(nèi)地上映。
近日，龍貓中國(guó)版終極海報(bào)公布，由我們熟悉的著名設(shè)計(jì)師黃海設(shè)計(jì)：
小梅與小月在看似是稻田實(shí)則是龍貓毛茸茸的肚子上玩耍。
設(shè)計(jì)師黃海大家想必已經(jīng)不再陌生，被稱為「天才設(shè)計(jì)師」的他設(shè)計(jì)了包括《一代宗師》、《黃金時(shí)代》、《大魚海棠》、《我不是藥神》、《小偷家族》、《影》、《邪不壓正》等電影海報(bào)，收獲了外界的一致好評(píng)。
黃海出身「廣告界的黃埔軍?！箠W美，在這里他遇見了他的恩師——臺(tái)灣著名的文案大師劉繼武先生。
在奧美的經(jīng)歷為他打開了創(chuàng)意的大門，之后他加入了一家本土廣告公司擔(dān)任美術(shù)總監(jiān)，2007年，一次偶然的機(jī)會(huì)接到姜文的電影《太陽照常升起》的海報(bào)設(shè)計(jì)任務(wù)。這是他第一次設(shè)計(jì)海報(bào)，卻在戛納電影節(jié)上一亮相就艷驚四座，從此聲名鵲起。
△ 2007年《太陽照常升起》
在此之后，黃海受到大量知名導(dǎo)演青睞，包括陳凱歌、姜文、馮小剛、馮德倫、徐克、王家衛(wèi)、陳可辛等，在此期間也設(shè)計(jì)了相當(dāng)一部分的早期優(yōu)秀電影海報(bào)，例如《讓子彈飛》、《唐山大地震》、《太極》、《一代宗師》等等。
他的設(shè)計(jì)逐漸成熟，風(fēng)格也十分多變，唯一不變的是讓人驚嘆的創(chuàng)意和構(gòu)圖。
△ 2008年《梅蘭芳》
△ 2009年《花木蘭》
△ 2009年《白銀帝國(guó)》
△ 2010年《讓子彈飛》
△ 2012年《白鹿原》
△ 2012年《太極》
△ 2013年《一代宗師》
△ 2013年《中國(guó)合伙人》
時(shí)間來到2014年，一組《黃金時(shí)代》的電影海報(bào)，黃海從設(shè)計(jì)界走到了一般群眾的視野中。
這組極具東方色彩和現(xiàn)代美學(xué)的海報(bào)在微博、微信上被瘋狂轉(zhuǎn)發(fā)，似乎就是以這為契機(jī)，所有人記住了這位天才設(shè)計(jì)大師的名字——黃海。
海報(bào)根據(jù)在不同上映國(guó)家的特點(diǎn)，制作的張張樣式都不一樣：
△ 中國(guó)大陸
△ 美國(guó)
△ 日本
△ 臺(tái)灣
△ 韓國(guó)
△ 香港
相比于《黃金時(shí)代》，同為2014年的作品，《匆匆那年》和《黃飛鴻之英雄有夢(mèng)》似乎就并不出名。
2015年，有了之前《黃金時(shí)代》的出色表現(xiàn)，黃海更加引人矚目，從這一年開始，他的優(yōu)秀作品呈井噴式地出現(xiàn)在大眾視野中。
△ 2015年《尋龍?jiān)E》
△ 2015年《山河故人》
△ 2015年《道士下山》
△ 2015年《念念》
△ 2015年《捉妖記》
2016年，國(guó)產(chǎn)電影《大魚海棠》崛起，而黃海和插畫師@sheep卍 共同合作為其設(shè)計(jì)的海報(bào)再次驚艷四座。
跌落水中的椿，和大魚的一眼凝望，開啟了這場(chǎng)奇幻的故事。2016年7月8日，赴你十二年之約。
△ 定檔海報(bào)
當(dāng)海洋與火焰相融，7月8日，我們終將重聚。
△ 終極海報(bào)
同年，中國(guó)中央電視臺(tái)出品的一部三集文物修復(fù)類紀(jì)錄片《我在故宮修文物》上映。
海報(bào)分別以6件國(guó)寶級(jí)珍貴文物為背景，分別是：元代「剔紅水仙花紋圖盤」、明代「邊景昭 竹鶴圖軸」、清代「黑色綢繡菊花雙蝶圖竹柄團(tuán)扇」、清晚期「掐絲琺瑯萬壽無疆中碗」、明代「自在觀音像」、宋代「汝窯天青釉弦紋三足樽」。
當(dāng)然這一年還有喜劇之王周星馳的大爆電影《美人魚》：
黃海更是在這一年操刀第53屆金馬獎(jiǎng)海報(bào)，他以楊德昌《牯嶺街少年殺人事件》為靈感，設(shè)計(jì)出男主角拿手電筒探照暗處的身影，除了向經(jīng)典致敬，也帶出「回看來時(shí)，照亮前行」的期許。
△ 2016年 第53屆金馬獎(jiǎng)
時(shí)間推進(jìn)到2018年，今年黃海更是收割了整年大半的優(yōu)秀電影。而他的驚艷的設(shè)計(jì)風(fēng)格也逐漸變得讓大眾看到海報(bào)的同時(shí)就能反應(yīng)過來「這是黃海老師設(shè)計(jì)的吧」。
△ 2018年《我不是藥神》
△ 2018年《江湖兒女》
△ 2018年《少年的你》
△ 2018年《犬之島》
△ 2018年《小偷家族》
有人說，黃海把中國(guó)電影海報(bào)設(shè)計(jì)拉至了國(guó)際水平，他將藝術(shù)、靈魂和故事完美地結(jié)合在一起，他的魅力在于很多人僅僅因?yàn)樗O(shè)計(jì)的海報(bào)而去看相關(guān)的電影。
如今黃海設(shè)計(jì)的電影海報(bào)作品越來越多，我們不妨開始期待，他的下一份作品會(huì)帶來什么樣的驚喜。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
在設(shè)計(jì)領(lǐng)域，設(shè)計(jì)風(fēng)格總是多變的，也有很多隨著流行趨勢(shì)而不斷變化，但是存在著N多的爭(zhēng)議。
對(duì)于扁平化和擬物化，說白了，只是風(fēng)格的不同，最終的設(shè)計(jì)目的是一樣的，但是，卻還是會(huì)有很多的朋友會(huì)糾結(jié)于是扁平還是擬物化設(shè)計(jì)，爭(zhēng)論是扁平好還是擬物好，怎么說呢，各有各的優(yōu)點(diǎn)，各有各的不足，這是今天，我們要帶大家看的！
Michael Fugoso，一位來自圣地亞哥，加利福尼亞的插畫家和設(shè)計(jì)師，帥小伙！
他說，關(guān)于他自己，就各像其他人一樣，他喜歡旅行，他喜歡吃比薩和海鮮，他非常的重視家庭，家庭總是以他的第一位！他也喜歡分享，因?yàn)榉窒頃?huì)讓別人的生活更容易，幫助別人成功，他覺得，這有助于他成為一個(gè)好的設(shè)計(jì)師。同時(shí)，他也喜歡自私地做自己想做的事情，因?yàn)樗X得，這有助于他成為一個(gè)好的藝術(shù)家。
今天，帶大家看一組他的作品，在他的這些作品中，很好的反映了扁平與擬物的關(guān)系，扁平的背景，搭配上擬物的元素，其視覺效果非常棒，沖擊力十足，震撼性十足！
扁平與擬物，數(shù)不清的恩怨情仇！道不盡的愛恨糾纏！
這是一張扁平化的插畫！
當(dāng)它變成擬物后
你覺得哪個(gè)的視覺沖擊力更強(qiáng)一些？
我們接著看！
這是一張扁平化作品！
他開始在矢量程序上呈現(xiàn)
開始色彩的調(diào)整與細(xì)節(jié)的完善
最終的效果呈現(xiàn)
這是一臺(tái)扁平化的車
添加裝飾元素
調(diào)整顏色后，得到一個(gè)扁平化的結(jié)果
把車元素單獨(dú)提取出來
在矢量程序上呈現(xiàn)
上色，添加細(xì)節(jié)
對(duì)細(xì)節(jié)的刻畫簡(jiǎn)直不能再棒
調(diào)整色調(diào)
最終的對(duì)比
再往下看，你可能會(huì)被美哭
扁平與擬物的碰撞
不一樣的花火
這些火箭，看得人熱血澎湃阿
看了感覺效果如何
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
要怎樣才能算上一個(gè)優(yōu)秀的設(shè)計(jì)師呢？?jī)?yōu)秀的設(shè)計(jì)師意味著要在大公司里工作？還是要打造了一個(gè)意義非凡的世界？抑或是因?yàn)閷懥吮驹O(shè)計(jì)領(lǐng)域熱銷的著作？…一個(gè)優(yōu)秀的設(shè)計(jì)師可能會(huì)滿足以上的所有條件，也可能一條都不符合，這其實(shí)都不重要。當(dāng)你和優(yōu)秀的設(shè)計(jì)師一起共事的時(shí)候，你就會(huì)從他們工作和為人處世的方式——獨(dú)處方式、思維方式、設(shè)計(jì)方式——來感受優(yōu)秀的設(shè)計(jì)師到底是什么樣子的。其實(shí)他們都有自己獨(dú)特的處事風(fēng)格，并且各自有著不同的特長(zhǎng)和個(gè)性。我有幸和一些非常棒的用戶體驗(yàn)設(shè)計(jì)師和產(chǎn)品設(shè)計(jì)師一起共事過，他們有一長(zhǎng)串無法數(shù)盡的本領(lǐng)。但我觀察到一些他們共有的特質(zhì)：
“有效的提問帶了來洞察力，洞察力滋養(yǎng)了好奇心，好奇心澆灌了智慧”
在設(shè)計(jì)師的眼里，世界是千變?nèi)f化的。優(yōu)秀的設(shè)計(jì)師經(jīng)常會(huì)對(duì)事物進(jìn)行質(zhì)問。如果有什么是難以理解的，他們就會(huì)去問個(gè)明白。
“‘走直線’是走不了太遠(yuǎn)的”
探索者將“永遠(yuǎn)不去走直線”視作自己的信條。探索的過程中總會(huì)伴隨著未知。探索者不知道他們不知道的事情有哪些，他們的目標(biāo)也不是去尋找有哪些事他們不知道，而是去理解事情的本質(zhì)是什么。在我看來，優(yōu)秀的設(shè)計(jì)師會(huì)用一種開放的思維來探索他們的項(xiàng)目，因?yàn)樗麄冏约阂膊淮_定他們最終會(huì)發(fā)現(xiàn)什么。
“雙重性格者（同時(shí)具有內(nèi)向和外向性格的人），往往更有創(chuàng)意，因?yàn)樗麄兏苓m應(yīng)新環(huán)境”
雙重性格者能很好地應(yīng)付團(tuán)體活動(dòng)和社交場(chǎng)合，當(dāng)然他們也喜歡有獨(dú)處的空間做點(diǎn)自己的事。優(yōu)秀的設(shè)計(jì)師既需要與團(tuán)隊(duì)通力合作，也要喜歡獨(dú)立地想點(diǎn)子。
“開發(fā)一個(gè)內(nèi)置的廢話探測(cè)儀”——Ernest Hemingway
當(dāng)你跟形形色色的人一起共事時(shí)，你必須學(xué)會(huì)把他人的廢話扼殺在搖籃里。優(yōu)秀的設(shè)計(jì)師知道什么樣的人廢話多，并在工作中杜絕他們說廢話的機(jī)會(huì)。
“聚沙成塔 ”（“Small changes eventually add up to huge results”）
在會(huì)計(jì)學(xué)里，“累積變化”是指所有差異的總和。革命性的變化往往是累積而來的。優(yōu)秀的設(shè)計(jì)師會(huì)抓住讓他們不爽的東西，并且試著去做改善。他們善于把眼光放遠(yuǎn)來觀察事物的全貌，并且明白微小變化會(huì)引起巨大的轉(zhuǎn)變。
“不要一開始就對(duì)自己設(shè)計(jì)方案的抱有自信，開始的時(shí)候應(yīng)該持有一種好奇和質(zhì)疑的態(tài)度”——Simon Pan
這條黃金法則是Simon Pan在讀了Marty Neumeier 的《創(chuàng)造力提升的46條天才法則》后提煉出來的。在這本書中， Marty 強(qiáng)調(diào)說人的意識(shí)形態(tài)對(duì)學(xué)習(xí)新知識(shí)是有害的，我們要拋開先入為主的觀念，并思考為什么我們相信我們所做的事情。
“掌聲固然動(dòng)聽，但禁得起批判更難能可貴””——Paul Arden
優(yōu)秀的設(shè)計(jì)師并不會(huì)特別在意自己的觀點(diǎn)能否成為解決方案，他們更想要的是完美的結(jié)果，自尊心被他們?nèi)釉谝贿叀Ｋ麄兊慕K極目標(biāo)是：在使用它的用戶和創(chuàng)造它的公司眼中，這款產(chǎn)品是最棒的。
“用不尋常的眼光來觀察尋常的事物”——Vico Magistretti
“我喜歡和那些有創(chuàng)造力（雄心壯志）并且’魔怔’ （專注）的人一起共事”——Nicole Kidman
設(shè)計(jì)師在解決問題時(shí)會(huì)變得非常專注。我見過一些優(yōu)秀的設(shè)計(jì)師，他們對(duì)自己的項(xiàng)目抱有極大的熱枕，并且被它們牢牢地吸引著。當(dāng)事情不順利的時(shí)候就會(huì)令他們相當(dāng)?shù)目鄲馈?
“成為一個(gè)獨(dú)行俠吧，這樣你就有時(shí)間去思考，去探索真理。保持神圣的好奇心，讓自己的人生變得有意義。”——Albert Einstein
優(yōu)秀的設(shè)計(jì)師既能自得其樂地獨(dú)自關(guān)在小黑屋里工作，也可以和團(tuán)隊(duì)一起合作，達(dá)成他們想要的目標(biāo)。
“把你最愛的東西都干掉，從你的想法中走出來，投入到過程中去”——Chirryl-Lee Ryan
過程是一切的關(guān)鍵。我們要對(duì)過程報(bào)以信任。這個(gè)過程是帶領(lǐng)設(shè)計(jì)師通向最終目標(biāo)的引路牌。在這個(gè)錯(cuò)綜復(fù)雜的世界中，過程就是設(shè)計(jì)的關(guān)鍵。
“要想成為與人交流的大師，首先要學(xué)會(huì)閉上嘴來傾聽”——Rick Warren
人都有兩個(gè)耳朵，兩只眼睛和一張嘴。優(yōu)秀的設(shè)計(jì)師會(huì)遵照這個(gè)比例來使用它們（即兩分聽，兩分看，一分說）。大多數(shù)人傾聽是為了做出回應(yīng)，優(yōu)秀設(shè)計(jì)師的傾聽則是為了試圖去理解人們的所思所想背后的本質(zhì)。
“即便是簡(jiǎn)單的關(guān)心也是值得敬重的”——Edward Albert
好的設(shè)計(jì)師潛意識(shí)里是富有同理心的，他們關(guān)心人本身，喜歡問“為什么”，同時(shí)他們關(guān)注人的技能和本質(zhì)。
“與普世觀點(diǎn)不同的是，設(shè)計(jì)師并不是藝術(shù)家。我們通過藝術(shù)的手段將我們的思維和工序可視化，但與藝術(shù)家不同的是，我們致力于解決客戶的問題，而不是展示我們自己對(duì)世界的看法?！薄狤rik Spiekermann
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
即使現(xiàn)在很多 WordPress 網(wǎng)站模板、H5 在線編輯器等等，但網(wǎng)頁(yè)設(shè)計(jì)需求依然非常多，線上編輯器盡管如何智能，但終究也是「模板式」，想完全符合用戶需求的產(chǎn)品還是靠有經(jīng)驗(yàn)的設(shè)計(jì)師來完成。即使是有經(jīng)驗(yàn)的設(shè)計(jì)師，依然是需要不停的找新的設(shè)計(jì)靈感。
事隔一個(gè)月，@dailywebdesign已更新了30+精品網(wǎng)頁(yè)截圖，小編今天再次為大家整理出來，方便大家欣賞，同時(shí)也推薦大家看上一期的《26張很棒網(wǎng)頁(yè)首屏設(shè)計(jì)作品欣賞》。
PS：這些網(wǎng)頁(yè)設(shè)計(jì)案例均來自 Ins 的用戶，并非 Dribbble 網(wǎng)站，所以沒有對(duì)應(yīng)的作品集頁(yè)面鏈接。
Design by: @vladimirbiondic
Design by: @capouska
Design by: @gtamarashvili
Design by: @abaygulov
Design by: Samuel Scalzo
Design by: @ui_ux_joy
Design by: Rono
Design by @rathniley
Design by: @brkrobert
Design by: @kreativa.studio
Design by: @fireart_studio
Design by: Oliwia Przybyla
Design by: @outcrowdstudio
Design by: @tintinsupp
Design by: @ihrvoje
Design by: Catalin Blanaru
Design by: Craig Gittins
Design by: @dannpetty
Design by: @halolabteam
Design by: Chalar Tintin S
Design by: Samuel Scalzo
Design by: @dogstudio_be
Design by: @divan_raj
Design by: @divan_raj
Design by: @outcrowdstudio
Design by: @jan.teschner
Design by: Abhishek Biswas
Design by: Michael Brewer
Design by: Cosmin Capitanu
Design by: @janravendeklerk
Design by: @arendstom
Design by: @capouska
Design by: M S Brar
Design by: @divan_raj
Design by: @syedraju01724
Design by: Yu Long
Design by: @marcocoppeto
Design by: @bestservedbold
Design by: @akasharun4161
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一、什么是用戶角色模型（用戶畫像）？
概念&作用
用戶角色模型是真實(shí)用戶的虛擬代表，通過一系列的真實(shí)數(shù)據(jù)分析，得出的目標(biāo)用戶模型。模型通過抽象來代表復(fù)雜的現(xiàn)象，好的模型強(qiáng)調(diào)結(jié)構(gòu)的顯著關(guān)系，弱化不太重要的細(xì)枝末節(jié)。我們要了解：用戶與用戶，用戶與期望，用戶與環(huán)境，以及用戶與產(chǎn)品之間的關(guān)系并且將其視覺化。
這里的視覺化可理解為：海量的數(shù)據(jù)標(biāo)簽（標(biāo)簽化、數(shù)據(jù)可視化）。比如我們要統(tǒng)計(jì)每個(gè)用戶的行為特征，細(xì)分到人口基本屬性、社會(huì)屬性、生活習(xí)慣、消費(fèi)行為等信息，抽象出各個(gè)具體的標(biāo)簽，賦予名字、照片、一些人口統(tǒng)計(jì)學(xué)要素、場(chǎng)景描述等，最終形成一個(gè)人物原型（personas）。
創(chuàng)建用戶角色模型的好處
· 與利益相關(guān)者、產(chǎn)品團(tuán)隊(duì)在研發(fā)中拋開個(gè)人喜好，聚集在用戶動(dòng)機(jī)和行為上，了解用戶深層次動(dòng)機(jī)與心理；
（拋開個(gè)人喜好：產(chǎn)品團(tuán)隊(duì)容易將自己的目標(biāo)、動(dòng)機(jī)、技巧代入產(chǎn)品設(shè)計(jì)中，這就是設(shè)計(jì)者心理模型）
· 避免設(shè)計(jì)陷阱，讓產(chǎn)品設(shè)計(jì)更聚焦，防止走偏，避免把過多的心思花在其他邊緣性功能上
（更聚焦、防止走偏：有人物模型為基準(zhǔn)，團(tuán)隊(duì)就能清晰的對(duì)功能進(jìn)行優(yōu)先級(jí)排序，以核心功能、解決用戶訴求的功能為主，可避免把注意力放在非核心且次要的功能點(diǎn)上。）
· 有助于為營(yíng)銷活動(dòng)、組織架構(gòu)、客戶支持、戰(zhàn)略規(guī)劃及設(shè)計(jì)決策 提供有價(jià)值的信息。
由什么構(gòu)成？
顯性畫像：用戶群體的基本信息描述，如目標(biāo)用戶的年齡、性別、職業(yè)、地域分布、興趣愛好等信息，一般通過客服人員線上交流、用戶賬號(hào)數(shù)據(jù)、常關(guān)注的內(nèi)容做判斷，間接獲取數(shù)據(jù)；
隱性畫像：用戶群體深層次的特征描述，如使用產(chǎn)品的目的、解決什么問題、偏好、訴求、場(chǎng)景、愿景、使用頻率等。主要以問卷、訪談、意見反饋等方式直接獲得數(shù)據(jù)。
說到底，用戶畫像就是先對(duì)逐個(gè)有代表性的用戶進(jìn)行特征描述，然后對(duì)共性特征進(jìn)行提煉、分類，最終將用戶標(biāo)簽化、數(shù)據(jù)可視化。
二、用戶畫像構(gòu)建的基本流程
用戶角色模型不是拿來既用、用完即丟的，而是建立在系統(tǒng)的調(diào)研分析、真實(shí)的數(shù)據(jù)統(tǒng)計(jì)之上得出的有力結(jié)論。
這里要考慮用戶畫像的優(yōu)先級(jí)，畫像一般會(huì)存在多個(gè)（多個(gè)用戶），通常一個(gè)用戶只能有一個(gè)，不能為擁有三個(gè)以上畫像的用戶設(shè)計(jì)產(chǎn)品，容易產(chǎn)生需求沖突，要分清楚哪些是核心用戶（既目標(biāo)用戶、產(chǎn)品的支撐者），哪些是非核心用戶，所以我們的設(shè)計(jì)目標(biāo)就是維護(hù)、培養(yǎng)、促成核心用戶。
同時(shí)要以適合產(chǎn)品團(tuán)隊(duì)和項(xiàng)目需求為出發(fā)點(diǎn)，用戶畫像不是一成不變的，而是根據(jù)現(xiàn)實(shí)情況同步更新，現(xiàn)在我們進(jìn)行四步畫像構(gòu)成法：
1、確定分析維度
用戶角色模型是針對(duì)特定產(chǎn)品或特定功能的，所以人物角色的分類一般是根據(jù)用戶的目標(biāo)（用戶需求）、行為和觀點(diǎn)（行為傾向）進(jìn)行。
舉例：
目標(biāo)？什么原因促使你使用該產(chǎn)品？解決你什么問題？
觀點(diǎn)？產(chǎn)品中最喜歡的功能？為什么喜歡？是否達(dá)到了你的預(yù)期？
行為？你最近一次使用產(chǎn)品做了什么？用了多久？
下面以2個(gè)維度做參考：
2、基礎(chǔ)數(shù)據(jù)收集
數(shù)據(jù)是有力證據(jù)，是構(gòu)建用戶畫像的核心依據(jù)，在基礎(chǔ)數(shù)據(jù)收集方面，可以先列舉出構(gòu)建用戶畫像所需要的基礎(chǔ)數(shù)據(jù)。
具體的思路如下：
上面列舉的數(shù)據(jù)緯度相對(duì)比較多，在構(gòu)建用戶畫像過程中可根據(jù)需求進(jìn)行篩選。
這些數(shù)據(jù)有三個(gè)來源：相關(guān)文獻(xiàn)資料和研究報(bào)告、產(chǎn)品數(shù)據(jù)后臺(tái)、問卷調(diào)研和用戶訪談，可以按照以下維度區(qū)分：
（這里涉及到用戶研究中重要的環(huán)節(jié)：用戶訪談、數(shù)據(jù)收集，將歸納為單獨(dú)的知識(shí)點(diǎn)于下篇文章分享，期待有你~）
3、分析建模
通過以上收集方式并成功采集后，下面開始對(duì)不同的角色進(jìn)行分類（通常采集多個(gè)用戶做參考，如單個(gè)用戶可直接將其標(biāo)簽化，然后套入完整模型中）
（1）先確定好產(chǎn)品屬性，按照用戶角色進(jìn)行分類，比如外賣APP有：商家、消費(fèi)者、騎手 三種角色，圖例：
（2）然后將角色內(nèi)的用戶身上觀察到的一些顯著的行為列出不同的幾組行為變量，例如：對(duì)產(chǎn)品的積極性、熱情度、學(xué)習(xí)能力、熟練程度、消費(fèi)觀等。
（3）將訪談對(duì)象和行為變量對(duì)應(yīng)起來
這里就以電商產(chǎn)品為例，將用戶個(gè)性（行為變量）做成一個(gè)區(qū)間軸，再把訪談對(duì)象放到區(qū)間軸上面對(duì)應(yīng)起來，不需要那么，標(biāo)出相對(duì)位置即可
注意：行為變量有兩種情況
· 一種是連續(xù)性，比如使用頻率的描述是：經(jīng)常到從不
· 另一種則是非連續(xù)性，比如使用的平臺(tái)：移動(dòng)端、PC端
對(duì)這兩種情況，大家要視情況而定，圖例：
（4）找出重要的行為模式
把對(duì)象映射完后，尋找在變量軸上的對(duì)象群。如果一組對(duì)象聚集在6~8個(gè)不同的變量上，這很可能代表一種顯著地行為模式，而這個(gè)模式是構(gòu)角色模型的基礎(chǔ)，圖例：
三、畫像呈現(xiàn)
找出行為模式后，畫像呈現(xiàn)即從顯性畫像、隱性畫像、場(chǎng)景和需求等方面，給用戶打標(biāo)簽，并且增加一點(diǎn)描述性語言（描述人物行為和痛點(diǎn)，而不是描述解決方案），圖例：
四、總結(jié)
（1）確定分析維度：當(dāng)前產(chǎn)品處于什么階段？需要什么信息？
（2）基礎(chǔ)數(shù)據(jù)收集：對(duì)目標(biāo)用戶進(jìn)行訪談，收集相關(guān)數(shù)據(jù)
（3）分析行為模式：將訪談對(duì)象和行為變量對(duì)應(yīng)、找出重要的行為模式
（4）整理并呈現(xiàn)畫像：描述特征和行為，創(chuàng)建人物故事
聊到這里可能有人會(huì)問：
Q：用戶模型做出來會(huì)不會(huì)有人看？它是不是設(shè)計(jì)者虛構(gòu)出來的套路？
A：用戶角色模型是設(shè)計(jì)者通過用戶訪談和觀察得出來的真實(shí)用戶行為，是有真實(shí)數(shù)據(jù)為依據(jù)的，所以不進(jìn)行大量的用戶調(diào)研，不為用戶建模，不去創(chuàng)建用戶模型，只知道意淫需求，說著“我認(rèn)為該怎么怎么做”，都是一本正經(jīng)地耍流氓。用戶研究、用戶模型是我們做好產(chǎn)品的基礎(chǔ)和風(fēng)向標(biāo)。
Q：用戶角色模型到底什么時(shí)候開始做？
A：先確定目標(biāo)用戶 → 對(duì)目標(biāo)用戶進(jìn)行訪談 → 訪談后再建立用于模型
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一周前，為了聽《夢(mèng)想的聲音》，我在APP Store 下載了QQ音樂，無意中發(fā)現(xiàn)「音樂」類APP里排行第9的 MOO音樂，它的預(yù)覽圖讓我聯(lián)想到這些關(guān)鍵詞：「小眾、獨(dú)特、歐美、Spotify、Apple Music」。筆者之所以從品牌設(shè)計(jì)的角度分析這個(gè)鵝廠家族新成員，是因?yàn)橐豢钚庐a(chǎn)品的品牌設(shè)計(jì)在產(chǎn)品從0-1過程中扮演非常重要的角色，它關(guān)系到用戶對(duì)新產(chǎn)品的認(rèn)知與心智。
體驗(yàn)完 MOO音樂，我發(fā)現(xiàn)：移動(dòng)產(chǎn)品品牌設(shè)計(jì)不僅要充分考慮視覺表現(xiàn)層，還要綜合考慮戰(zhàn)略、理念、內(nèi)容、交互等多個(gè)方面。
同時(shí)，品牌設(shè)計(jì)是一種「求同存異」，「同」是保持對(duì)戰(zhàn)略、內(nèi)容、用戶習(xí)慣的繼承性，而「異」是相比競(jìng)品作出的差異化設(shè)計(jì)。本文就從繼承性和差異化，這兩個(gè)維度為你分享 MOO音樂的品牌設(shè)計(jì)。希望這種分析方法能夠?yàn)槟愕钠放圃O(shè)計(jì)提供幫助。
從啟動(dòng)圖標(biāo)和界面很容易看出，MOO音樂的品牌主色是黃色，背景色及輔助色基本是以黑白灰為主。
MOO音樂之所以采用這種配色方案，不僅是為了突出產(chǎn)品氛圍，讓人眼前一亮，還有可能是對(duì)騰訊新形象IP品牌的一種繼承和延續(xù)。
怪奇鵝IPENGOO，騰訊集團(tuán)新一代形象IP品牌，代表著一種自我突破，不斷創(chuàng)新的精神狀態(tài)。
我們希望能像魔術(shù)師一樣，以經(jīng)典企鵝形象上提煉出的極簡(jiǎn)鵝臉元素，為大家創(chuàng)造出充滿趣味、創(chuàng)新、時(shí)尚和腦洞的產(chǎn)品風(fēng)格和內(nèi)容，能喚醒每個(gè)用戶自動(dòng)發(fā)出好感電波是一件很棒的事情！——怪企鵝IPENGOO官微
每位音樂家都不是一顆孤獨(dú)的星球，他們保持獨(dú)立又彼此相連，在他們的探索下，音樂潮流才不斷推陳出新又一脈相承。
保持探索，對(duì)先鋒與經(jīng)典抱以同樣的敬意，所以我們創(chuàng)造了MOO：音樂即自由
MOO Music，Life is MOOO beautiful。——APP Store MOO音樂介紹
IPENGOO（怪企鵝）的理念是：
可見，「連接、傳遞、突破、創(chuàng)新」這些新形象IP理念在 MOO音樂的啟動(dòng)圖標(biāo)、品牌理念、交互手法、推薦歌單上都有所體現(xiàn)。
因此，MOO音樂很可能是騰訊新形象IP品牌影響力里的一種嘗試。
此外，MOO音樂的品牌色也很有可能是對(duì)騰訊旗下年輕娛樂產(chǎn)品品牌色的一種繼承。
Sympathize（體察和同理心），可以幫助我們?nèi)ダ斫馐挛锉砻姹澈蟮谋举|(zhì)，得到和理解設(shè)計(jì)的微妙細(xì)節(jié)，這些本質(zhì)自然的元素不只是邏輯上的，更是可以被感受的?！顫芍比?
說到音樂本質(zhì)、自然的元素（不是曲風(fēng)），我們會(huì)聯(lián)想到黑膠、唱片、專輯、音波、調(diào)音臺(tái)、樂器、Live、樂譜、Launchpad等。這些音樂元素能拉近 APP 與用戶之間的距離，營(yíng)造沉浸式的聽歌體驗(yàn)，從而提升產(chǎn)品的同理心。
比如專輯封面的輕擬物化設(shè)計(jì)，播放時(shí)音波的、背景圖片和短視頻等等。
當(dāng)我們?cè)跒橐豢钚庐a(chǎn)品設(shè)計(jì)交互時(shí)，需要充分考慮目標(biāo)、場(chǎng)景、用戶這些基本因素。我們通常會(huì)考慮并兼顧多數(shù)目標(biāo)用戶的使用行為和習(xí)慣，為新產(chǎn)品設(shè)計(jì)交互方式。
所以當(dāng)用戶看到熟悉的元素時(shí)，會(huì)很自然地知道如何去使用，降低了新產(chǎn)品的學(xué)習(xí)成本，這就是我們所熟悉的「Don’t make me think」。
MOO音樂的首頁(yè)P(yáng)LAY頁(yè)，采用的是音樂+短視頻（有時(shí)候是圖片）的方式，當(dāng)很多用戶看到這種熟悉的界面形式時(shí)，已經(jīng)本能的去上下翻頁(yè)、單擊播放/暫停，左右滑動(dòng)調(diào)整進(jìn)度更是再熟悉不過。
另外，MOO音樂的歌單在產(chǎn)品初期功能里占據(jù)了很大篇幅，因?yàn)樽钇鹾嫌脩袈牳栊袨閳?chǎng)景的是歌單。
說完 MOO音樂在品牌設(shè)計(jì)方面保持的繼承性，下面來說說它不同于競(jìng)品的差異化設(shè)計(jì)，主要表現(xiàn)在品牌理念、視覺氛圍、交互手法。
從 APP 的這4張歡迎頁(yè)就可以看出 MOO音樂的品牌理念和調(diào)性了：經(jīng)典、創(chuàng)新、前衛(wèi)、獨(dú)立。
從目前的版本來看，MOO音樂還是一款滿足小眾口味、專注聽歌的音樂APP，但 APP 通過4張有代表性的歡迎頁(yè)，將 APP的「小眾」設(shè)計(jì)得「出眾」，很好地表達(dá)了產(chǎn)品的品牌理念。
說到產(chǎn)品品牌的差異化，不得不說視覺層面的設(shè)計(jì)，畢竟視覺表現(xiàn)層是用戶體驗(yàn)5要素里最具體的。
MOO音樂提供兩套視覺風(fēng)格，默認(rèn)是品牌黃色+BLACK，另一套則是品牌黃色+WHITE，筆者覺得默認(rèn)的 BLACK 更有特色和沉浸感。
字體風(fēng)格方面，標(biāo)題類文字（PLAY、DISCOVER、FEATURELIST、ALBUM、VIDEO、VIDEOLIST）都是大寫的非襯線英文字體，歐美范十足。
調(diào)整進(jìn)度的交互
主流音樂APP，是通過一個(gè)進(jìn)度條和一個(gè)圓點(diǎn)來調(diào)整播放進(jìn)度，而 MOO音樂將播放頁(yè)面下方聲波區(qū)域作為調(diào)整進(jìn)度的熱區(qū)，通過明暗的對(duì)比來表現(xiàn)播放進(jìn)度。
雖然這種交互方式在騰訊自家短視頻微視APP 中也存在，但 MOO音樂還是作了細(xì)節(jié)上的處理。
切歌的交互
通常情況下，在音樂APP 播放頁(yè)面的其他頁(yè)面，都有一個(gè)控件讓你隨時(shí)可以切歌，甚至是收藏，查看播放列表。
MOO音樂將切歌控件設(shè)計(jì)成了黑膠+滑塊，切歌時(shí)只需向右滑動(dòng)，而且 iOS系統(tǒng)還會(huì)伴隨震動(dòng)反饋。這個(gè)微交互設(shè)計(jì)得蠻有意思，這讓我聯(lián)想到膠卷相機(jī)拍完一張，然后撥動(dòng)卷片扳手的機(jī)械反饋感。
目前 MOO音樂在 APP Strore 里才第2個(gè)版本，細(xì)節(jié)上的體驗(yàn)不可能一步到位。
筆者借此機(jī)會(huì)向開發(fā)者提一點(diǎn)個(gè)人的建議，僅供參考。
希望當(dāng)前播放的歌曲與背景短視頻或圖片有一定的關(guān)系，比如系統(tǒng)可以根據(jù)歌曲的曲風(fēng)、類別等標(biāo)簽，自動(dòng)推薦匹配相關(guān)短視頻和圖片，讓歌曲與背景環(huán)境更協(xié)調(diào)。當(dāng)然，也可以讓用戶自己設(shè)置推薦或隨機(jī)。
在 PLAY頁(yè)面切下一首歌時(shí)，希望顯示歌曲正在加載的狀態(tài)，底部的音波區(qū)域好像可以作一些文章。
（iOS）歌曲評(píng)論頁(yè)里的評(píng)論輸入框常駐在頁(yè)面底部，但視頻評(píng)論頁(yè)的評(píng)論輸入框沒有常駐，而且滑到底部時(shí)，不太容易滑到頂部，可能是小BUG。
（Android）輕觸切歌控件里的暫停按鈕后，黑膠旋轉(zhuǎn)的角度被重置了。希望能與 iOS版一樣，暫停后黑膠旋轉(zhuǎn)的角度不被重置。
APP 默認(rèn)的會(huì)員價(jià)格是18元/月，若勾選了到期自動(dòng)續(xù)費(fèi)，則價(jià)格是15元/月。
雖然這2個(gè)價(jià)格都不便宜，但相對(duì)來說，自動(dòng)續(xù)費(fèi)的價(jià)格更有吸引力，但這個(gè)相對(duì)有吸引力的價(jià)格卻需要用戶主動(dòng)勾選「自動(dòng)續(xù)費(fèi)」才能看到。筆者建議將這2種價(jià)格都顯示出來，通過單選按鈕的形式去交互。這樣，用戶很容易就會(huì)發(fā)現(xiàn)自動(dòng)續(xù)費(fèi)的價(jià)格優(yōu)勢(shì)，畢竟與18元相比，15元就不怎么貴了。
MOO音樂于11月初發(fā)布在 APP Store，網(wǎng)絡(luò)上比較多的評(píng)價(jià)是「抄抖音、抄樂趣、抄Spotify、鵝廠又抄了……」。
但作為設(shè)計(jì)師，筆者希望我們將關(guān)注點(diǎn)放在設(shè)計(jì)層面，去客觀的評(píng)價(jià)一款A(yù)PP，不要因?yàn)閯e人的評(píng)價(jià)而忽略了一些有品質(zhì)的設(shè)計(jì)。
當(dāng)我們仔細(xì)體驗(yàn)交互和視覺的細(xì)節(jié)后，會(huì)發(fā)現(xiàn)鵝廠的設(shè)計(jì)是有很多地方值得我們學(xué)習(xí)的。
最后，面對(duì)主流音樂APP、短視頻APP、Spotify、Apple Musici、樂趣……MOO音樂既做到了對(duì)騰訊新形象IP、音樂元素、用戶習(xí)慣的繼承性，又做出了一些不同于競(jìng)品的差異化設(shè)計(jì)。這套「組合拳」已經(jīng)打出了這款音樂APP 的品牌形象，希望這些內(nèi)容對(duì)你有啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
這是一個(gè)以故事形式來展現(xiàn)網(wǎng)站：Oat the Goat，動(dòng)畫很有感覺，雖然小編目前的水平還做不出這類網(wǎng)站，但看看也可以增加點(diǎn)靈感、閱歷，原來網(wǎng)站還能這樣做的，一個(gè)網(wǎng)站，一個(gè)溫暖的故事，來一起欣賞電影般的酷站，Enjoy!
網(wǎng)站名稱：Oat the Goat
網(wǎng)站地址：http://oatthegoat.co.nz/
（請(qǐng)?jiān)赑C端欣賞，瀏覽該網(wǎng)站時(shí)記得打開聲音哦~）
故事是從一只羊咩咩的歷險(xiǎn)開始，他翻山越嶺，途中遇到一些困難和遇到困難的小伙伴們，接著一起去克服，然后越來越多的小伙伴們一起去冒險(xiǎn)，經(jīng)過重重險(xiǎn)阻，最終…… （還在讓大家自己欣賞才有 Feel 的）
所有的畫面非常的漂亮，就像在看電影一樣，同時(shí)網(wǎng)站還帶有一至交互體驗(yàn)，讓用戶去選擇。
截圖：羊咩咩遇到第一個(gè)有困難的小伙難了哦，我們繼續(xù)看看……
截圖：要選擇你要怎么做了
故事結(jié)局如何？請(qǐng)自行觀賞，同時(shí)您可以在下方評(píng)論處說出你的想法：）
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn