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