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