如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在手機淘寶中，大至鏈路的銜接，小至一個按鈕的點擊響應，動效是體驗無處不在的潤滑劑，為用戶每一步的操作提供了合理的預期與過渡。而通過動效銜接不同界面或不同響應狀態，無論對流暢直觀地表達流程意圖，還是精雕細琢讓體驗更絲滑的微動效，動效設計都是淘寶設計師日常工作中非常重要的一環。
動效是體驗鏈路散點間的“領路人”
針對項目不同階段、不同使用需要，針對性地選用的工具，輔以便于理解的交付方式，是設計和落地環節溝通提效的關鍵。
相比提及動效首先都會想到的巨無霸AE而言，Flinto、Principle、Kite、Adobe XD等許多專門為體驗設計量身打造的輕量級工具，更聚焦在互聯網產品設計的高頻功能上，多數工具都能快速輸出視頻或GIF，以及在移動端上進行實際的交互體驗。
為體驗設計量身打造的輕量級工具
這些工具在原型和動效快速表達方面獨特的敏捷、的優勢，讓它們逐漸成為迭代頻繁的國內互聯網行業許多設計團隊的新寵。
上述工具的核心功能都比較接近，各有千秋，差異多在于時間與屬性之間關聯的展現形式上，這里不做過多展開，也不做任何孰優孰劣的判斷。畢竟工具只是兵器，提起趁手的兵器快刀斬亂麻，才是設計功力的體現。
本文將結合手機淘寶的動效設計實際案例，介紹淘寶設計師們在項目過程中進行動效設計、并與開發溝通的經驗。
淘寶這樣的大型應用中，任意提及一個細分鏈路都頗具復雜度，每個場景或大或小的版本迭代背后，都是設計師從交互流程設計、具體界面的視覺設計，再到最終交付落地，經歷層層評審和修改完善的過程。
產品設計的2大不同階段
那么在不同階段，選用怎樣的工具更符合我們對“”的追求？下面將按階段拆分問題，分別進行分析：
產品流程、交互行為的設計與串聯，無論是作為可以實際體驗的可交互原型，還是純用作展示，實際上也是一種最基礎的廣義動效。
曾幾何時，交互流程的設計輸出物是用流程箭頭清晰標注每個控件交互行為的交互稿。
但在淘寶內各子產品“小步快跑”的版本迭代極度頻繁，每天提案、評審這類快速碰撞不斷的情況下，即使經過了合理的流程拆解、耦合度不是非常高的交互稿，對設計師而言改動返工量依然巨大。
更何況無論業務方還是設計內部評審時，其實沒有人有時間仔細閱讀你精心撰寫的交互說明。
只適合在交付開發階段采用的靜態交互文檔
（鞋類測碼功能為例）
因此，這類交互稿如今最大的用途只在交付開發的環節。在快速碰撞方案的階段，通過輕量級的動效工具迅速產出可交互原型是目前團隊內更同行的做法。在評審中直接演示，可以幫助團隊成員更好地對方案實際效果有一個更直觀的體驗。
在流程設計階段，Flinto是一個非常好用的工具。同為體驗設計專屬的輕量級設計軟件，Flinto和Principle有很多共通之處，也經常被一起比較，但底層思路都是通過定義元素的各項屬性變化來實現過渡。不過，兩者在定義方式上卻有比較大的不同，簡單概括來說，Flinto是通過元素的附加事件，而Principle則是通過不同畫板間的屬性差。
Flinto更擅長流程級表達
這點上的不同，決定了Flinto優勢在于流程級表達，而Principle更擅長界面級（或很短的流程級）交互細節表達。
以分享寶貝、邀請好友出主意的“幫我選”功能中的新建清單流程為例：
「幫我選」新建清單流程Demo
流程對應的Flinto實現方式如下：
「幫我選」新建清單流程對應的Flinto工程文件
產出流程Demo時，只需要表達基本的頁面結構與跳轉關系即可。轉場無需表達得很準確，以不引起誤解為原則即可，時間有限的情況下，最簡單的處理方式就是統一用漸隱漸現。
各種與頁面滾動位置有關的動效也暫時不用表達，例如下滑時頂欄的狀態過渡。同樣，也完全沒有必要讓每個元素都可點擊，這些交互細節以及分支用例，都更建議在交付開發階段通過交互說明表達，寥寥數語可能就足夠準確傳達了。
與頁面滾動位置聯動的動效，可以在界面級設計中細化
當產品流程確定后，進入界面級設計階段，就輪到對局部微動效逐一進行細化。
對不涉及位置聯動的交互動效而言，在Flinto和Principle中的制作成本相差無幾。例如純粹由點擊觸發的事件：
不涉及位置聯動的動效
但對于涉及位置聯動的動效，Principle就比Flinto的表現優秀很多了。
Principle更擅長界面級動效表達
Principle中，時間軸和位置聯動的設置比Flinto自由度更高，可以快速進行精細的設計和調整。例如在頁面上滑過程中，導航欄跟隨手指上滑動作而上移隱藏的動效：
導航欄隨手指上滑動作而上移隱藏
下面是一些來自淘寶近年已上線項目有趣的動效示例：
案例一：手機淘寶導購產品“有好貨”的商品列表中，會穿插視頻及知識內容，在這些特殊內容滑動到用戶視線中時會動態擴展，將內容自身特點完全呈現。注意，這些動效只能應用在特殊內容數量少、質量高的場景，否則會過于干擾。
視頻形態擴展動效
知識形態擴展動效
案例二：用戶在手淘中關注某個頻道后，手淘首頁會提供進入該頻道的快捷入口，這個邏輯通過文案很難清晰的表達，因而采用了直觀的動效呈現。
關注頻道后的提示
上文分別介紹了流程級和界面級動效的設計建議，那么在實際項目設計中，我們需要有什么樣的產出呢？
依據設計稿所起的作用，大致分為3種：
3個階段的不同產出物
1、用于實操的demo：根據自己所希望表達的側重點（流程還是細節？）選用一種工具完成全部設計；
2、用于演示的視頻：可以同時使用兩種工具完成不同部分的設計，分別錄制視頻再合并；
3、用于開發的方案：對需要動態呈現的部分單獨提供動效設計稿及說明等產出物，然后再將所有設計以Keynote等載體整合起來。
手淘在動效設計過程中，也摸索出了一套便于與開發同學溝通、最優最快實現設計效果的設計產出方法。產出物包括2部分：
1、效果演示demo和視頻：使開發同學快速了解設計效果；以寶貝詳情主圖的擴容與評價聯動氣泡為例：
效果演示和視頻
2、動效參數文檔：將自己在設計動效時所設置的全部參數，翻譯為開發可以輕松讀懂的圖形表達方式。對于比較復雜的動效，雖在撰寫文檔時會多花一些功夫，但能夠讓開發一次性還原出理想的設計效果，免去后期反復溝通修改的麻煩。
下面以手機淘寶首頁的2018年雙11主會場入口為例，說明動效設計的輸出方式。
我們選用Principle制作了所有動效，整體效果如下：
手機淘寶首頁的2018年雙11主會場入口
可以看出，動效包含以下幾個部分：
1、主會場入口背景圖旋轉
2、主會場商品圖及按鈕出現
3、“立即搶購”按鈕文案切換
我們要分別輸出以上3部分的視頻示意以及具體的動效參數。以其中相對復雜的第2部分“主會場商品圖的出現和切換”為例，提供給開發的視頻如下。注意在這個案例中，因為開發是針對圖形元素的容器來編寫動效，所以我們需要將圖形抽象為容器。
經抽象為圖形元素容器的交付版本
同時需要提供給開發的是動效參數。下圖是我們使用的參數圖形化表達方式，縱向為各個元素，橫向為動效時間軸。
動效參數產出物
實際上，各位同學也可以根據自己的實際情況來繪制，原則是清晰明確即可。
從合理的工具選型，到嚴謹清晰的文檔交付，技法層面的干貨就寫到這里。文章的最后，筆者想談的是互聯網產品中動效初心。
動效并非炫技的手段，而是實實在在用于銜接用戶在各個體驗散點之間的潤滑劑，符合用戶心理預期、不打擾用戶，甚至讓用戶幾乎無所察覺的動效，才是真正優秀的動效。
許多創意網站上初見確實驚艷的動效，如果在用戶實際使用中過度使用，輕則有拖沓之感，重則引起焦躁。這一原則對于旨在讓用戶“買買買”更的淘寶而言，尤為重要。
動效技法只是基本功，在“不打擾”中體現同理心和精巧的構思，是動效設計更重要的導向。重劍無鋒，大巧不工，與所有Motion designers共勉。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
好的UI設計師應該是理論結合實踐，好的理論是指導實踐，所以今天我帶來了這一篇文章。講講什么是黃金ux七大定律以及它們如何在UI中的運用。
費茲定律（fitts’law) 是心理學家 paul fitts 所提出的人機界面設計法則，主頁定義了游標移動到目標之間的距離，目標的大小和所花費的時間之間的關系。
定律內容是從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小
用數學公式表示為 時間T=a+blog2(D/W+1)
用這張圖來說明，當d(起始點到目標之間的距離）越長，使用者所花費的時間越多；而當w（目標物平行于運動軌跡的長度）越長，則花費的時間越少，使用的效能也比較好。
我們來看新浪微博的轉發功能，因為隨著功能的復雜性，轉發功能包含了下一層級三個子功能，分別為快轉，轉發，分享。這個轉發icon一觸發，在很近的距離，3個點擊目標也設計的很大這樣容易很快的操作，利用費茲定律，提升了用戶的效能。
當你走近一家餐廳，你看著琳瑯滿目的菜品是不是無從下手。在生活日常中你會對各種各樣的選擇而困擾，其實有時候不是你的問題，而是對方給予你的選擇太多。
Hick’s Law (席克定律)中說道：“一個人面臨的選擇（n）越多，所花費做出決定的時間（T)就越長。
用數學公式表達為 RT=a+b log2(N)
劃重點
當選擇增加時，我們做決定的時間就會相應增加
如果在你的服務，產品中“時間就是關鍵”，應該將做決定的選項減少到最少，以減少所需反應的時間，降低犯錯的概率。也可以對選項進行同類分類和多層次分布，提高用戶的使用效果。
奧卡姆剃刀原則也被稱為：“簡單有效原理“，由14世紀哲學家，圣方濟修士奧卡姆.威廉（William ofOccam)提出。這個原理告誡人們“不要浪費較多東西去做用較少東西也可以做好的事情?！惫P者認為和后來包豪斯密斯.凡德羅提出的：“少就是多”有異曲同工之妙。
一個簡潔的網站能讓用戶快速找到他們所找到的東西，當你在銷售產品時候尤為關鍵。如果你的網站充斥著很多無關緊要的東西。比如小彈窗，無用鏈接。用戶會因為不能快速找到自己想要的東西而關閉網站。
合理的使用奧卡姆剃刀原則，能更好的傳達你想要表達的內容，更容易吸引廣告投放者，給訪客帶來更好的用戶體驗。
泰思勒定律又被稱為：“復雜不滅定律”
中心思想是：“每一個程序都有必然有其與生俱來，無法縮減的復雜度，唯一的問題，就是誰來處理它?！?
泰思勒定律定律認為每個過程都有其固有的復雜性，存在一個臨界點，超過這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。
從手機的演變過程來看，智能手機簡化了物理操作按鍵，通過技術手段降低了手機操作的復雜度，尤其是復雜的交互手勢操作，雜度的降低是通過大量的技術和資金投入解決，體現了復雜守恒定律。
1956年喬治米勒對短時間記憶能力進行了定量研究，他發現人類大腦最好的狀態能記憶含有7（±2）項信息塊，在記憶里5-9項信息后人的大腦后開始出錯。
防錯原則是通過設計來將過失降低到最小化。該原則及時地告訴用戶哪里操作錯了。比如在填寫表單時，系統給出及時地報錯提示；重要、謹慎的操作，系統通常會有二次確認；為用戶提供撤銷的機會；為用戶提供糾錯的機會
接近法則是格式塔理論中我們最熟悉的，也最常運用的一項法則。當對象離的太近時候，意識會覺得它們是相關的
我們來看看利用接近法則在移動端的案例，相同的模塊這兩款app都用空間間隙來做出了區分，讓人在移動的場景更能快速的尋找想要的信息。
在UI設計中，不僅僅是為了美觀的界面，更要有有理有據，在設計時應該學會運用這些法則，不僅可以讓你的界面更專業，同時也更有說服力。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
海報是電影的門面，好的海報作品不僅可以完美傳達電影本身的美學與內涵，而且也能散發超越電影作品的附加韻味，創造獨特的藝術價值與設計美感。
近日第九屆北京國際電影節公布官方海報，因其“詼諧粗糙”的設計引發了影迷的熱烈討論，目前全球已有成百上千個電影節每年都在進行著各類展映和學術活動，大到歐洲三大電影節，小到第三世界的地區影展，其中設計感出類拔萃的電影節海報也不在少數，今天就為大家推薦一些近年的電影節海報設計佳作（國內影展也多走走心）。
法國拉羅謝爾電影節
莫斯科國際電影節
莫斯科國際實驗電影節
New British Film Festival
索爾福德電影節，位于英國曼徹斯特地區
布拉格國際電影節
Dwa Brzegi – 10th Film and Art Festival
Cult Film Festival
Semibreve festival
Beat Film Festival
Wildlife Film Festival 位于荷蘭鹿特丹
2018年第71屆戛納電影節官方海報，致敬《狂人皮埃羅》（1965）
第51屆導演雙周單元海報
2019年柏林電影節官方海報
2018年第75屆威尼斯電影節
2018年第31屆東京電影節東京電影節
2018東京臺灣未來映畫周
日本山形國際紀錄片節
釜山國際電影節正式海報
韓國富川奇幻電影節
Student Indie Film Festival 澳大利亞墨爾本 威廉斯鎮
Open City Documentary Film Festival 位于英國倫敦
Moving Festival — Film Festival 位于西班牙巴塞羅那
臺北電影節
英國獨立電影節
A Design Film Festival 位于新加坡
平地學生電影節，位于香港，平地映社策劃，香港藝發局資助
澳門國際紀錄片電影節
香港獨立電影節
香港國際電影節
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Loading動畫，在現在的設計中已經是一個必須要考慮的系統元素，它能減緩用戶等待焦慮的心態，也能用來作為品牌透傳，增加曝光。
那關于loading動畫相關知識，我覺得對于設計師來說是有必要去了解的，所以我找到了這篇優秀文章，讓大家能夠深入了解loading動畫，透過現象看本質，學以致用。
圖片來源：Domaso
在用戶心目中，優秀的應用、工具、網站都應該是制作精良且能快速響應他們需求的產品。
舉一個真實的例子：最近我們新發布了一個用戶評價的應用，第一個版本并不完美，loading延遲在2-3秒。
你猜怎么著？
很多人認為這3秒是一個故障。在實際開發中，你可能要面對龜速的網絡，沒有優化的代碼，操作時間長或數據處理太多等問題。因此，App的運行速度可能沒有用戶預期中的那么快。雖然早期用戶可能會給你的產品第二次機會，但絕大多數人會立即退出它。
除非你的產品界面對用戶的行為提供了明確的即時反饋。剛才發生了什么？是操作錯誤還是在等待服務器的請求？用戶需要等待多長時間才能正常使用這個工具或網站？用戶為什么要等待呢?
讓我們一起深入了解Loading動畫：
對于這種類型的反饋，設計師會使用進度條、loading示意圖、預loading、或旋轉器。它們向用戶解釋什么時間發生了什么或正在loading的過程，以減少用戶的心理焦慮。
你覺得設計師是從什么時候開始考慮加上這種反饋的？
我很驚訝的看到關于Nielsen Norman的一篇文章，提到響應時間和loading動畫是在1993年（參考1985年的資料）：
如果計算機無法提供快速響應，則應該以百分比的形式向用戶提供持續反饋?！綧yers 1985 論文，“計算機-人機界面百分比進度指標的重要性”】
顯示進度的三個主要優點：向用戶保證系統沒有崩潰且正在處理他們的問題；告訴用戶還需要等待多久時間，讓用戶能騰出時間來做其他的事而不只是干等；甚至可以向用戶提供一些可以閱讀和查看的內容，減少等待的焦慮。—?Jakob Nielsen, on January 1, 1993
自從Web 1.0以來，幾乎每個網站都有loading狀態，用戶可以注意到當頁面內容正在loading時，這些Loading動畫活躍的身影。
在2007年的時候，網站的Loading形式大概是下面這張圖上的樣子：
2007年時的Loading
在那個年代，你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator （2009）這樣的工具來做這些 loading動畫。
到了2010年，隨著CSS3的迅猛發展，出現了很多教程教大家如何做CSS3動畫，也能找到大量的loading 動畫預設包。設計師也可以在Ps cs5中做這種loading動畫，這個在10年前是非常流行的。
在那時，Loading動畫更像是web的專屬問題，因為頁面loading確實是一個問題。在2010年的時候，很多Flash網頁都做了一些很有創意的loading動畫：
30個創意Flash loading案例（https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/）
漸漸地，設計師們開始不滿足于簡單的進度條和旋轉Loading，到2014年-2016年的時候，變得更加關注這塊的設計。所以，你能發現更多關于loading教程，免費的Loading設計資源，插件和開源項目。
2016年出現的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)
設計趨勢和方法已經發生了變化，但向用戶提供有效反饋的原則依然需要遵循。
優秀loading動畫所具備的特征
在一個完美的世界里，loading動畫應該：
如果你的工具或網站工作的足夠快，那就是非常完美的?；蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A期，顯示好看的loading動畫只是一個緩兵之計，等待太久了一樣會惹惱用戶。所以，首先應該是解決內容的loading問題。
它可以是一條簡單的文本信息，告知大致的等待時間，也可以是可視化的圖形來表示。總共上傳了多少文件？更新需要多少分鐘？已經進行到了什么階段？這些體驗上的設計細節都可以給用戶預期并減少焦慮。
宇航員數據loadingby Cream M.
一些應用的loading過程，通常讓用戶不大容易理解。一個好的Loading動畫，應該要告知用戶等待的原因以及等待的背后軟件正在做什么：
文件獲取動畫 by Vinoth
讓我們說回我的案例，那個反饋工具軟件。當我們的等待時間超過1秒時，我們決定給這段等待時間增加一段解釋。動畫說明應用目前正在處理截圖資源，這清晰的表明，我們的工具沒有崩潰，它只是正在處理請求：
好的loading動畫
可以放一個有趣的動畫來吸引人，讓用戶的眼睛始終保持忙碌。
動畫來源：Alex Kunchevsky
這與上面提到的一點非常相關，如果你在等待的過程中發現了一些能夠吸引用戶注意力的東西，那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配，有趣的想法，或者是一個什么特別的東西。
蛋糕loading by Pierre Kleinhouse
如果用戶在用你的應用或者網站時會有一段等待時間，為什么不機智的利用好這段時間呢？我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中，讓它成為一個非常重要的設計細節：
BCG的車票應用動畫 by Antonin
細節可以做出精彩
雖然有些人可能會認為Loading只是一個很小的UI細節，但它其實也有許多類型和變化。一般來說，我把loading動畫分為幾類，進度條，無限循環的loading圖和骨架圖。
當可以明確loading時間時使用，進度條可以通過數字或視覺化的形式來表現。
有數字進度的，有時也稱為百分比指示符。他們可以簡單直接，也可以很有創意，需要對你的用戶業務表達更有效：
一個app loading頁 by Nguyen Tran
你也可以找到有趣的進度條和循環動畫結合的loading圖。
Loading動畫by Dragonlady
進度條背后的主要思想是顯示一個操作將花費多長時間以及目前所處的狀態。根據UI需求的不同，進度條也可以是線性的，沒有百分比的形式。
想想Gmail，它沒有顯示進度百分比，但是用戶同樣可以感覺到加載的進度。下面是兩個簡單而又創意的例子：
Gamil loading和一個創意loading動畫 by Allen Zhang
當loading的時間是未知的時候來使用，它可以是默認的旋轉圖，也可以是一些創意動畫，顯示應用正在做一些事情。
計算loading圖標 by Hoang Nguyen
創意性loading動畫一樣可以與業務緊密相關，并幫助支持品牌發聲。請思考下那些應用會使用這種loading動畫？
LittlePin Spinner by Daniel Sofinet
無限循環動畫要求用戶在上傳或執行某些操作時等待，但不要求具體需要多久時間，它們可能會非常簡單或非常有創意。
Loading cat by domaso. So cute!
Infinity by Eszter Balogh. 看起來非常有趣，但是你并不想他們永遠不停下來。
如你所見，如今的loading動畫不僅僅只是一個系統狀態的UI元素。
骨架動畫展示了loading頁面的變化過程，你可以把它理解為開始是一些頁面占位圖，逐步加載上一些可見的圖片，文本和其他內容。
這個詞最早出現在Luke Wroblewski 的文章中，Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持，并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應用。
舉個栗子，如果你使用的是網頁設計工具Figma，你會在頁面頂部看到一個進度條，同時還在逐步loadingUI：首先你會看到占位符，然后才是可用數據：
Figma UI
除了這篇文章中所展示的一些優秀案例和Dribbble上的設計概念，在目前大多數應用中，你可能能看到還是一個默認的Loading。
有一段時間，簡單的Loading被大眾所推崇，因為他們對于性能的影響最小（尤其是對于web）。使用默認的或開源的loading要容易的多，不需要設計師和開發花心思來設計和實現它。
如果你正在開發MVP或者項目的第一個版本，那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段，即使把loading動畫做的再怎么有創意，也并不會對你的產品有多么大的幫助，如果它不能解決真正的需求。
一些簡單的loading動畫案例
有趣的是，在2016-2019年，我們可以看到非常多精心的loading動畫。注重細節，日益成熟的設計公司，更好的科技環境，更方便的設計工具，這些都使得loading動畫變得更加富有創造性。如果你瀏覽Dribbble，能找到非常多超贊的Loading動畫，所以這也成了展現自己設計能力的一種方式。
即使在我們只有5人的初創公司里，我們也會考慮更好的用戶體驗，讓我們用戶等待的體驗更愉快。否則，我們做的反饋工具可能會失去用戶，沒有人希望失去用戶。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
Material Design 響應式布局柵格適應屏幕尺寸和方向，確保布局的一致性。
Material Design 布局柵格由三個元素組成：列、間距和邊距。
內容放置在包含列的屏幕區域中。
列寬是使用百分比而不是固定值來定義的，以允許內容靈活地適應任何屏幕大小。網格中顯示的列數由查看屏幕的斷點范圍（預定屏幕大小的范圍）確定，無論是移動設備，平板電腦還是其他尺寸的斷點。
間距是列之間的空間，它們有助于分離內容。
間距在每個斷點范圍內的值是固定的。為了更好地適應屏幕，間距寬度可以在不同的斷點處改變。更寬的間距更適合大屏幕，因為它們在列之間創建了更多的空白。
邊距是內容和屏幕左右邊緣之間的空間。
邊距寬度定義為每個斷點范圍的固定值。為了更好地適應屏幕，邊距寬度可以在不同的斷點處改變。更寬的邊距更適合更大的屏幕，因為它們在內容的周邊創建了更多的空白。
可以調整布局柵格以滿足您的產品和各種設備尺寸的需求。
可以調整間距以在布局的列之間創建更多或更少的空間。
可以調整頁邊距，以在內容和屏幕邊緣之間創建或多或少的空間。頁邊距對每個斷點使用固定值。
正文副本可讀性的理想長度是每行40-60個字符。
在同一斷點內，間距和邊距寬度可以彼此不同。
Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列，而不是從上到下排列。屏幕的高度決定水平柵格中的列數。
在非觸控和web平臺，水平滾動的UI并不常見。
可以定位水平柵格以適應不同的高度，從而為頂部的app欄或其他UI區域留出空間。
斷點是具有特定布局要求的預定屏幕大小的范圍。在給定的斷點范圍內，布局將根據屏幕大小和方向進行調整。
Material Design基于以下列結構提供響應式布局。使用4列，8列和12列柵格的布局可用于不同的屏幕、設備和方向。
每個斷點范圍決定每個顯示大小的列數、建議的邊距和間距。
彈性柵格
彈性柵格使用可縮放和調整內容大小的列。彈性柵格的布局可以使用斷點來確定布局是否需要顯著更改。
固定柵格
固定柵格使用固定大小的列，具有流體邊距，以在每個斷點范圍內保持內容不變。固定柵格的布局只能在指定的斷點處更改。
UI（用戶界面）區域
布局由多個UI區域組成，例如側面導航，內容區域和應用欄。這些區域可以顯示操作、內容或導航目標。UI區域應跨設備保持一致，同時適應不同屏幕尺寸的不同斷點。
為了提高設備之間的熟悉度，為桌面設計的UI元素應該以與移動UI一致的方式進行組織。
永久UI區域
永久UI區域是可以在響應柵格之外顯示的區域，如導航抽屜。這些地區不能重疊。
持久UI區域
持久性UI區域是可以隨時根據命令顯示的區域，或者它們可以保持可見。它們可以打開或關閉，出現或消失。當它們出現時，它們會壓縮內容和柵格。
當持久性UI區域可見時，其可見性不受與屏幕上其他元素交互的影響。
臨時UI區域
臨時UI區域暫時出現，當它們出現時，它們不會影響響應式柵格。當它們可見時，可以通過點擊其區域中的項目或其區域外的任何空間來隱藏它們。
當UI區域可見時，其他屏幕元素不是交互式的。
原型
原型是結構化布局，為布局、分層和陰影提供一致的方法。它們是一個起點，旨在在進行修改以滿足產品的特定需求。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
我們已經或多或少看過一些優秀作品，也知道了一些設計方法和技巧，了解到了一些相關的理論知識，自己也做過一些項目或者是練習，總體來說都掌握了一定的設計能力；但是設計師想要擁有更多的資源（指薪資、工作機會等等）或者是想職業進階，除了一定的設計能力之外是遠遠不夠的。
設計師還需要掌握更多的能力，才能讓自己成長提升，并且擁有他人無法取代的價值。我通過自己的經歷和整理收集，發現目前如今不同階段的設計師對待同一個問題不同的角度以及特征，如下圖所示：
不難發現，當大家還是初級設計師的時候，剛剛接觸設計行業，我們更多的是去觀察、學習、臨摹一些“好看”的作品，熟練地使用設計軟件和提升設計技法，最后的是自己做出來的產品是否漂亮美觀，最重要的是客戶/老板是否會買單，而自己無法清晰地定義自己設計的產品價值，也不能很好表達出自己的想法和觀點。所以產品走向會根據老板/客戶的水準來定義，輪到自己表達只是支支吾吾，最后只是做為執行無休止地改改改。一切由老板/客戶說的算，無法清晰地了解自己產品的定位，缺乏表達觀點的能力，缺乏一定的審美，作為執行角色無休止加班成為了初級設計師最大的痛點。
而經過一段時間的學習和工作后，逐漸轉型成為中級設計師后，有了一定的設計技法和軟件使用熟練度，有了一定的審美和視覺表現能力，平臺規模合作團隊也逐漸變大，基本能滿足老板/客戶/業務方提出的需求。開始學習一些設計相關理論，開始拆解自己或別人產品的交互架構，更多地開始關注用戶體驗起來，也會融入品牌元素到自己的產品當中，為自己的產品做情感化設計和制定設計規范，會組織一些專業語言和業務溝通以及陳述自己的產品。但是如何從眾多的設計方案中找到最優的方案來解決問題，如何更多地體現產品的價值，產品利益鏈如何形成商業閉環，如何在團隊/設計圈體現自己個人的價值，如何提升自己的個人影響力，成為了中級設計師這階段的痛點。
通過三年五年的沉淀，成為高級設計師后，形成了自己獨有的一套方法論和設計思維，能熟練地拆解每款產品和定義產品，視覺表現層已經完全能駕馭，能清晰地闡述自己的設計思路和結論，產品用戶體驗層也有了一定的經驗和方法，在團隊中或者設計圈有自己一定的個人影響力，更多地會在工作中思考產品帶來的社會價值和商業價值，會用不同的思維去思考產品的各個維度，找到最優的方法解決問題，會把固有的利益鏈轉換成商業閉環，提升用戶轉化率等等。而這階段的設計師的主要痛點就是面臨著團隊管理和溝通，朝著資深設計師和設計專家轉型，以及如何為平臺帶來的利益價值考核等等問題。
資深設計師或者設計專家這里不談，因為這階段所思考的問題大都和設計無關了。通過上述不難發現，每個階段的設計師都有各自的特征和痛點，雖然其中都包含著設計相關的能力，但是隨著階段的進階設計相關的能力占比逐漸變少，更多的是其他的能力增長，所以設計師除了設計以外其他能力的重要程度顯而易見，那么我們來看看除了設計以外，設計師應該掌握其他什么能力。
思考能力作為首要的能力，不僅僅是設計師，其他職業一樣需要這個能力，這里所涵蓋的面太廣泛了也說不了，這里主要針對三點來講：核心競爭力、批判思維和分析能力。思考分為兩個層面：自我層面的和業務層面的思考；自我層面的思考就是要通過深度剖析自我，發掘自己處于哪個階段，有什么長處和不足，自己想要什么，需要往怎樣的方向發展；而業務層面的則是要需要思考業務產品的結構框架、用戶體驗、商業價值等等等等，前者更加關注自身的成長，后者更加關注業務的成長。
· 核心競爭力
核心競爭力就是有與別人不一樣的競爭力，想要做到別人無法替代你的地步，就要有自己個人核心的競爭力。如果你會做一張 Banner，我也會做一張 Banner，你會搞一個頁面，我也會搞一個頁面，那么你這個人就成為了可有可無的螺絲釘，唯一的優勢就是年輕能拼能熬，等你熬銹了老了，隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段，我們要深度剖析自己，認清自己的優勢劣勢，并采取相應的措施。
剖析自己的核心競爭力給大家一個大致思路，從異樣性和共通性入手。自己周圍或多或少有團隊，條件不足的話現在網絡各大平臺都很發達，也能融入一些設計圈子中，和不同的人對比尋找自己的核心競爭力。異樣性是當前的優勢，找出其中的優點，不斷地放大深造，變成你的核心競爭力，而和別人不一樣的缺點找出來摒棄改正；共通性就是和大家一樣的地方，可以看作是偽劣勢，因為諸多共通性中總有你最喜歡最擅長的一個，將它單獨拿出來不斷擴大，逐漸就拉開了差異性，慢慢就轉化成你的核心競爭力了，而大家都有的缺點，你把它糾正了，就成為你的核心競爭力了。
來舉一個栗子：小王是一名工作了3年的設計師，研究生畢業，由于公司的原因平時工作最多接觸的就是一些運營圖 banner，也有過很多品牌 VI 的經驗，逐漸自己在視覺表現上有自己一定的見解和想法，也更加感興趣做視覺表現的東西。
那么他的共通性就有：1.工作3年之久；2.研究生畢業；3.視覺表現能力強也更感興趣；4.做過品牌 VI 的經驗；5.有自己的見解和想法。
由此推斷出小王的共通性是：1.工作經驗豐富；2.視覺表現力強；3.有想法和見解；
異樣性是：1.學歷優勢；2.品牌 VI 相關經驗
那么小王可以保持自己學歷優勢下，可以繼續深造品牌 VI 相關，逐漸轉型成為高學歷的品牌 VI 設計師，那么學歷和很多品牌 VI 的經驗就是小王的核心競爭力；也可以通過熱愛去學習 C4D 動效等軟件繼續增強自己視覺表現力，配合自己豐富的工作經驗逐漸轉型成高學歷的創意藝術設計師，然后通過將自己的想法見解通過分享會、文章等模式產出，將這一點升級成個人影響力，那么綜合下來更加優秀的視覺表現力、豐富的工作經驗和個人影響力也會逐漸變成小王的核心競爭力。
只有通過不同維度深度地剖析自己，找到自己的共通和異樣點，清晰自己的價值定位，然后制定出適合自己成長目標和方案，不斷放大增加自己的核心競爭力，成為不可取代的那個人。
· 批判思維
批判思維是一名設計師必須具備的思維能力，我們不僅僅要學會批判別人的作品，還要學會自我批判。這里不是指無腦的批判（之前遇到過一個實習生剛進到公司里，就把之前所有人做的東西全部批判了一遍，重點是只說產品好看與否，完全不顧及平臺一致性商業價值用戶體驗等等，最后只批判卻沒有任何實質性的建議，頗有一種指點江山的感覺，然后后面再也沒見到過他了），這里是指在自己通過批判別人或自我的方案，不斷地優化糾正，最后產出最優質的方案，這是批判思維的出發點。
不同的人有不同的經歷，看待問題的維度是多種多樣的，所以一個方案產出后，通過不同的人思考后的結果是最好的解決方案。這也印證了波克定理：只有在爭辯中，才可能誕生最好的主意和最好的決定。所以當設計師接到產品交互給到的原型圖后，不要上手就做圖，要通過自己經驗和想法去看待原型圖，然后提出更加優質的方案進行討論，如果你的方案更加優質，那么不僅是產品的質量得到了優化，你個人的經驗也得到了沉淀，下次遇到相同的場景就可以拿出來復用，直到遇到更好的方案。
唯一注意的事項就是注意溝通的方法，這里后文會提到，比你資歷高的人提出的觀點更加具有建設性，在毫無頭緒沒有創新的情況下就聽比你更有經驗的人的；遇到比你資歷低的人提出的觀點也不要嗤之以鼻，抓取其中有用的點，沒準是一個新的思維方向；總之，有數據說數據，沒數據舉案例，沒案例講觀點，如果連觀點都沒有的話，照著大佬說的話做就是了。
· 分析能力
分析能力也是設計師必須掌握的能力之一，無論你是創意藝術設計師，還是用戶體驗設計師，譬如一張 Banner 氛圍傳遞或者文案排版，譬如插畫的配色或者場景搭建，譬如產品的布局結構或者用戶體驗，這些都需要有一定的分析能力。通過拆解改版/競品/參照產品等，明確產品的最終目的、商業價值等等，有了這些準備后才能對自己的產品進行設計或者改版。而分析產品可以以用戶體驗五要素的角度來分析，分別是：戰略層、范圍層、結構層、框架層和表現層，具體相關的文章站酷、PM 社區、36氪等等都搜的到，這里不再細說；之前在分析產品的時候發現有些產品強行套用這五個要素進去不適用，因為有些產品的頁面它不存在戰略層或者范圍層的東西，所以我總結歸納了三個角度來分析產品。
案例就用淘搶購 v4.1 頁面（已上線）來講，三個角度主要是：表現層、用戶體驗層和價值層。表現層主要就是產品頁面的配色、布局結構之類的；用戶體驗層就是產品的心智透出、交互流程之類的；價值層就是產品深度的價值體現了，比如商業價值、社會價值和用戶留存率之類的；大致可以套用這個公式去思考：為什么這里會用這種表現形式，它想要表達怎樣的效果，它要達到怎樣的最終目的，如果是自己去設計會怎樣做。舉例：因為淘寶規范為卡片式設計，在視覺表現上要統一，所以淘搶購 v4.1 的業務目的是統一視覺樣式，并且它需要給用戶產生一種“商品很便宜快去搶購再不搶購就沒了”的心智認知，它的最終目的是引導用戶去商品 Detail 頁面購買商品和提高商品的點擊率，這樣通過協調關系形成平臺、商家和用戶之間的利益鏈商業閉環。
想要提升自己的分析能力除了項目和時間的沉淀外，更多的時候需要自己平時的積累，站酷等平臺有很多優秀的作品，作者會把自己設計的分析和思路寫出來，我們可以看看別人的想法是否值得借鑒，然后再去分析一下，最后思考如果是自己的話會怎么去做；其次做設計的時候帶著同理心去做，把自己當作用戶去看待自己的產品，通過不斷的積累提升自己對產品的敏銳度，將一些產品的隱性問題挖掘出來；另外可以多看一些好的設計分析書，比如《U一點料1、2》、《以匠心 致設計》等等，將學到的分析方法代入自己的產品或作品中，逐漸分析能力就增強了。
規劃能力是日常工作生活中所需要掌握的能力，主要講業務規劃和職業生涯規劃，業務規劃能力應對的是我們工作中處理業務所需要具備的能力，而職業生涯規劃應對的是我們整個人生職業生涯規劃的能力。掌握這個能力后前者會給我們帶來業務處理效率上的提升，后者給我們帶來整個人生有益的好處，所以這個能力非常重要。
· 業務規劃
很多時候我們還在有條不紊地處理某個需求，心想著下班去吃個飯買水果回家洗澡睡覺的時候，突然來了一個緊急的需求，就把我們整天的計劃給打亂了，火急火燎地處理完這個需求，然后又把之前的需求做了，最后加班改改改導致整個計劃泡湯了。工作中遇到這樣的情況很多很多，處理方法有很多種，最經典的就是四象限法則，把事情的緊急重要程度分為：重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。
很多時候都是道理我們都懂，可是一遇到情況依舊手忙腳亂，根本原因是沒有認真地把它代入自己的工作生活當中。畫一個象限表，把自己今天所要處理的事務陳列出來五分鐘都不需要，一開始可能因為事情不多就沒堅持下去，一旦養成習慣后，將來遇到多種緊急情況突發的時候就能認識到這個習慣給你帶來的好處了，所謂養兵千日，用兵一時就是這個道理。
在做業務需求的時候，可能會碰到有些需求價值高，有些需求價值低但又很緊急，不知道怎么處理之間的關系，我們依舊可以套用四象限法則來制定一個四象限表：價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢，就是能讓你有充分思考和分析的需求，比如某個頁面的改版；價值低的需求則是相對不怎么需要思考和分析的需求，比如根據已有的規范改個顏色之類的。在時間的優先級前，價值高的需求大于價值低的，最后剩下的就是價值不高且不緊急的。因為我們無法拒絕需求，需求來了肯定要是做的，工作不是愛好可以有多種選擇性，但我們要學會將需求分解成不同類型的，對自己有成長沉淀的需求那可以作為最高優先級去處理，留夠充裕的時間去思考分析，然后沉淀經驗穩定提升。
· 職業生涯規劃
這個在大學期間就學過相關的課程，只不過當時并沒有太深的感觸，而是等工作以后才知道這項能力的重要性，它相當于關系著你每個階段的里程碑，當成游戲中的成就任務也不為過，還是自己設定的成就任務。某個階段想要達成什么樣的目標，想要獲得怎樣的成就，都是要自己一步一步慢慢規劃并且完成出來的。
因為我遇到過幾個非常努力的人，努力到讓人心悸的地步，每天除去吃飯睡覺工作時間就是在努力學習，到最后還是很迷茫，不知道做什么，不知道如何體現自己的價值。這類沒有目的的努力的人是很可怕的，他們努力得沒有錯，但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用，然后逐漸開始產生抱怨、泄氣和放棄等負面情緒。
舉個例子來說明：如果你剛畢業，給自己制定的長遠的職業生涯規劃是在工作3～5年后進到大廠工作提升自己，那么所拆分下來就需要一些項目工作經驗和優秀的作品，再拆分下來就是如何做出優秀的作品，細分到最后就是作品當中的元素，比如圖標排版布局之類的，那么就制定一段時間內的練習就按照各類元素去做，比如圖標畫兩個星期，APP 設計排版布局練習兩個星期，插畫練習畫兩個星期，這樣堅持下來就組成一個完整的項目作品了，以此類推。有了規劃目標并且在自我驅動的推動下，逐漸實現自己的職業目標。
執行能力是指自我在工作&學習中執行的能力，執行能力為一個設計師最主要的核心技能，一切的能力都凌駕于這個基礎之上；哪怕你再能說會道，能賦予你的設計各種價值，能給予你的設計各種環境，但這些都是第二步，第一步就是你的設計表現達到期望值，如若第一步稿子都不好看，那么沒人愿意會聽你敘述的。前文已經提及到了，設計師在初級至中級階段的時候大多數注重的就是表現手法，如同學說話一樣，表現手法可以看作是漢語拼音，然后才是組成一個個字，最后組成一句完整的話語。
· 自我執行力
提升自我執行的能力我大致分為兩個步驟：看和做。
首先先來說看，看其實是提高自己審美的一個過程，通過看一些平臺網站的優秀設計作品，久而久之自己的審美能力才會提高，然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或學習時間，通過瀏覽設計網站采集學習一些你覺得好看的作品；采集是一個很好的習慣，我覺得是每個設計師必須養成的習慣，把自己平時覺得好的表現形式收集起來，等到某一天需要用到的時候，腦海中對當前場景會有一定的印象，再根據印象去尋找采集到的作品，能很大程度上節省自己腦爆的時間，哪怕沒有采集或者文件丟失，自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理，比如今天我需要做一個關于內容的模塊，那么我就會去尋找一些做內容的產品設計，搜集到的各類關于內容的表現手法，然后結合自己的經驗和分析，找出最適合自己產品的一種。
僅僅看是不夠的，在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學到的東西。做設計最忌諱的就是“眼高手低或者眼低手高”這種狀態，有了審美但表現手法跟不上，或者說表現手法有但是審美跟不上。一定要在自己吸收了一定的審美后，通過自己的嘗試去做出來，才能真正的沉淀到自己的大腦當中，變成自己的表現手法之一。最后通過大量的積累，結合對商業需求的判斷形成設計策略，才能從容應對不同的產品需求，哪怕你今天做金融相關的產品，還是明天做電商的產品，后天又改做工具類產品，一旦形成了自己不同的應對策略，才能做到真正意義上的游刃有余。
很多時候我們只關注到魚的大小、魚的肉質是否鮮美那20%層面的東西，往往忽視了80%最重要的捕魚技巧和方法；看到的只是產品是否好看，交互是否流暢，體驗是否良好，沒有往更深層次地去想這個產品的商業背景是什么，設計師為什么要這樣設計，如果換做自己的話會去怎么做；畢竟我們所做的一切訓練、思考都是為了更好地為工作服務，就如同脫離了商業背景以后，有些設計就只是單純的炫技，并沒有解決問題的價值，而設計師的工作核心就是解決問題，所以我們要結合作品的背景、價值等因素，去看、去做、去學相應的表現手法才是自我執行的核心所在。
表達能力是設計師除去執行能力外第二重要的能力，小到平日里的溝通對接，大到述職晉升面試，都離不開表達能力的支持。有些設計師經常面試怎么都過不了關，我本以為是作品集的問題，可是看完之后作品方面完全沒有什么問題，具體了解后才知道是在面試過程當中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導致表達斷斷續續不順暢，面試官就會覺得這個人不靠譜然后 PASS，明明做圖很優秀卻輸在了表達上，這種情況就很憋屈。在廣告公司中，一個 LOGO 或者廣告視頻往往只是贈品，出售的卻是這個品牌VI的故事；如果一個設計師不懂得怎么闡述自己的業務，不懂得怎么推銷自己的方案，不懂得拓寬自己的個人影響力，就單純的只會執行作圖的話，那么這名設計師是不合格的。網傳有一個段子“一個公司的工資排名規律：用 Word 的不如用 Excel 的，用 Excel 的不如用 PPT 的，用 PPT 的不如講 PPT 的，講 PPT 的不如聽 PPT 的，聽 PPT 的不如聽匯報的，聽匯報的不如決定的，決定的不如簽字的”，由此可見表達能力在職場中的重要性。
· 業務表達
業務表達是指在自己工作的過程當中，對自己的設計方案進行闡述。大部分設計師會遇到一個困擾，當設計稿做完以后就不知道怎么去表達自己的設計理念，被業務方/面試官/老板提出質疑時，比如：“你這產品的設計為什么要用紅色？”、“聊天信息這塊兒為什么要用小氣泡的樣式？”，往往不知道怎么去說，有一種當時就覺得好看所以這樣做了，也沒有去想那么多的感覺，或者其他優秀的作品/競品是這樣做的，我也就這樣做了；那么結果往往就是自己的專業性遭到質疑，然后轉變成業務方/老板進行設計主導，形成“改來改去還是第一版好”這樣類似的惡性循環中。
那么如何提升自己的業務表達能力呢？首先設計師要提升在設計領域的專業度，通過學習吸納設計相關的知識，然后代入自己的設計當中去試著闡述設計稿，準備工作先做到位，收集相關的數據，掌握相對應的設計理論，先說服自己再去說服別人。比如：“通過色彩心理學得知，紅色能帶給人興奮、激動、熱情等積極情緒，而我們產品所需要透出的氛圍是熱情的、積極向上的，相對應地激發出用戶的正向情緒，所以我這里使用紅色?！?、“根據近半年數據研究得出，產品聊天信息模塊使用過程當中女性用戶占總用戶數的85.9%，而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好，通過 A/B 測試結果得出，使用小氣泡樣式后數據上漲了15%左右，所以聊天信息模塊整體改版成小氣泡的樣式。”
通過自己前期的準備（設計理論知識補充、用戶調研、數據測試等），將自己的設計理念表達出來，主導整個設計的方向，必要時可以理性地堅持自己的設計方案，畢竟無論是老板還是業務方，出發點都是希望自己的產品能做到最好最完善，只要你給出數據支撐和專業性的建議，他們一定都會采納接受的，而最后你的能力和專業性也得到了對應的認可。
· 書面表達
我本人是強烈建議在能力達到一定程度的時候，通過寫作來檢視自己成果的。因為往往很多東西自己是明白的，但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業經驗總結、對設計的見解看法、自己獨特的設計思維、一本書的讀后感等等都可以通過書面表達出來，某個知識理論難的不是學習，而是將它教授出去，因為只有你想要把某件事說明白，闡述得其他人都能看懂，那么首先你要對這件事理解得很透徹，然后通過自己的經驗和見解，轉化成通俗的語言說給別人聽。最好的狀態就是與你同樣級別的人你能與他用專業術語對話，級別比你低的人你能把理論轉換成他能聽懂的語言進行交流，這樣才算是對理論概念理解透徹到位。
大家也明白，學習最有效的方法不是輸入而是輸出，設計也是一樣的。在學習某種理論方法后，通過書面表達出自己的見解和想法，并代入到相應的例子當中，做到舉一反三才能算是真正的學到了這個知識點。
· 述職
述職一般出現在晉升報告或者面試當中，“諸侯朝于天子曰述職，述職者，述所職也?！笔雎毧梢哉f是工作報告中的總結性報告。向自己的老板述職是為了升職加薪，向面試官述職是為了獲取更好的工作機會；工作成果有了，但是述職做不好的話，在老板/面試官眼里你就做了無成效的工作，述職沒有想象的那么簡單，但是也沒有那么難，很多人都會經歷兩個述職的誤區，這些誤區我經歷過也看到過，所以總結出來警醒大家。
一、把述職當作流水賬
把述職當作流水賬是很多新人容易犯的錯誤，當述職的時候，有的人就會陳列出自己今年做了多少多少工作：“我今年改版了 XXX 模塊”、“我設計了 XXX 的首頁”、“我通過調查研究自主推導改版了 XXX 模塊并落地成功”等等，這時候你的老板/面試官會心里會想：“所以呢？”“然后呢？”，工作結果固然重要，但是決定你能否晉升/錄用的，不僅僅是把你做的工作進行流水賬般的描述就夠了的。
二、把述職當作邀功大會
這個誤區相對來說更高端一些，述職的時候有的人常常會像邀功一樣：“我今年通過改版了 XXX 模塊，導致用戶量從50%上漲到了80%”、“通過調查研究改版了 XXX 模塊，最后通過 A/B 測試發現數據上漲了5%，最后落地全部實施新的設計方案”，這些看似闡述了產品的背景、自己做了什么以及結果，但是往往來說還是不夠的，以上統統可以歸為無效述職。
你做了什么重要嗎？沒那么重要，重要的是你帶了什么樣的價值。述職所需要你做的，老板/面試官所想要了解的就是：分析為什么產品之前數據會那么低？你是通過那些方法得出解決方案的？為什么那么多種解決方案里你要選擇這一種？你這樣的方法能否沉淀成體系？如果換一個人來按照你的方法做是否可以得到同樣的效果？有效述職也就是決定你能向上一步的，是把你在工作中的感性認知上升到理性規律的歸納總結的能力體現。
· SCQA 模型
SCQA 模型是一個“結構化表達”工具，是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的，而這個模型可以套用在業務表達、書面表達以及述職任何場景當中；S是指場景(Situation)，C是指沖突(Complication),Q是指問題(Question)，A是指解決方案(Answer)。
無論你是在向業務方/老板闡述方案做工作匯報，還是自己寫作梳理都可以用到這個模型；S場景陳述的通常是大家都熟悉的事、普遍認同的事、事情發生的背景。由此切入既不突兀交代了事情背景又容易讓大家產生共鳴，產生代入感，然后引出沖突C。Q是其中發現的問題，最后A給出相對應的解決方案，是對Q的回答也是接下來我們要闡述的內容。整個結構其實是形成良好的溝通氛圍，然后帶出沖突和疑問，最后提供可行的解決方案。
我們熟知的廣告詞經常使用這個套路：
得了灰指甲——描述場景【S】
一個傳染兩——發生了沖突【C】
問我怎么辦？——提出問題【Q】
馬上用亮甲！——給出解決方案【A】
這個模型無論作為演講的開場白，作為向業務方/老板闡述設計方案的開場，還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產生共鳴，必須讓對方產生一種：“是的，你說的好有道理”的反應，只有場景被認同了才能繼續故事的發展，這時候打破你給對方營造的安全感，制造C沖突，相繼提出Q問題，共同確認面臨的一個問題，然后你給出你的A解決方案，而這個解決方案就是你整個敘述的核心和中心思想。
比如你要向業務方/老板闡述你的設計方案，就可以這樣來描述：“在 XXv2.0 版本上線后（交代場景），收集了近半年以來的數據發現，女性用戶相對減少了20%（發生沖突），為什么會減少20%的女性用戶（提出疑問），根據我的調查研究發現原因是改版后整個產品色調偏男性化，由于我們產品的受眾群體大多是女性用戶，男女比例為1:3，所以在 v.2.1 的改版中我將整個產品色調改為偏女性化的方向（給出解決方案）”。
同樣，我寫這個章節的思路就可以這樣理解：設計師們工作中通常會面臨述職、面試以及寫文章等情況（交代場景），但是往往很多設計師不知道如何去表達，思路也不是很清晰，導致述職無效、面試失敗等情況（發生沖突），要如何避免這種情況發生？如何鍛煉自己的表達能力？（提出疑問），那就要多通過 SCQA 模型在生活工作中去練習表達（給出解決方案）。
最后是生活能力，設計不是工作的全部，工作不是生活的全部，我們應該過好自己的生活，產品設計都是從生活中獲得靈感和啟發的，我們如何對待自己的生活，我們就會得到怎樣的反饋。多陪伴下自己的家人、培養一個興趣愛好、保持學習新鮮事物的動力等等，成為一個有趣的靈魂。往往設計師能從多樣化的生活中發現靈感和啟發，也能從生活中找到不同用戶的痛點和感知；如何做一名好的設計師，就是帶著同理心去做設計，如何帶著同理心做設計，就是將自己當作用戶，而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發改變產品設計的例子。
· 用戶擁有感
在購買星巴克的時候，為什么服務員要把顧客的名字寫在杯子上呢？難道僅僅是為了分辨嘛？像其他奶茶店一樣貼一張打印好的便簽不就好了么？去宜家購置家具的時候，為什么要讓顧客自己親手組裝家具？可口可樂為什么可以定制自己城市的易拉罐？因為這一切都是要給用戶塑造擁有感，人是一種很不理性的生物，只要先拿到一個東西，就會覺得自己擁有這個東西，就不想放掉它了，這就是擁有感最根本的示范。從心理學的角度來說這被稱為稟賦效應，意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經沒什么用了，我們還要留著當紀念的原因。因為我們的人性對于擁有感非常執著，對于自己得到的東西非常迷戀，當我們覺得要失去它的時候，會有一種損失感，覺得很不舍，會覺得心里很難受，這就是稟賦效應在我們身上發生了最明顯的效果。
而這樣的營銷策略被用到產品設計當中，例如前段時間很火的軟件 Zepeto，每個人都不一樣的生成圖片洗刷著我們的朋友圈；例如每年年末的賬單、網易云音樂總結等等，賬單它只是一份賬單，根據不同用戶生成不同的賬單，也就賦予了不同的意義；又例如各種 H5 性格測試生成的分享卡等等，這些都是產品設計中從生活中營銷案例中汲取經驗的體現。
· 線下導購轉線上
每當我們去到商場線下商店的時候，導購員和我們素未謀面，但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產品，然后向我們推銷對應的產品，如若剛好觸動我們的需求，于是我們就會發生購買這個行為。生活中線下導購的方式也被運用到線上導購的產品中，同樣平臺和用戶素未謀面，可是可以通過掌握大數據，分析用戶近半年、近一個月的購買和瀏覽商品的數據，結合相對應季節等因素推送給用戶所需要的產品。比如我平時經常瀏覽一些潮牌個性的衣物，現在正值冬季，想買一件冬季穿的棉衣，那么當我打開淘寶的時候，系統會推送一些潮牌大衣等冬季衣物在首頁，我正好有這個需求又符合我的口味愛好，自然而然就會點進去購買了。
有一條創業準則是這樣說的：“如果有點兒閑錢，還有點時間，但又找不到商機，最好的辦法就是去鬧市、電梯、小區人流量最高的那個大門口，端杯茶，靜靜的聽人們抱怨?！保雀?、蘋果公司的設計思維首當其沖的就是帶著同理心去設計、去制定設計策略，同理心來源于生活，而這一切只有設計師把自己的生活經營好，才能從當中獲得啟發和感悟，然后代入自己的設計理念當中，設計出真正能根本解決問題的產品。
其次偶爾會從網上看到或者聽說 XX 設計師猝死，XX 設計師檢驗出 XX 疾病等等，每每看到此類消息都會感到痛心，工作不是生活的全部，如果連自己的工作和生活都處理不好的話，那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神，那么他的工作會做得好嘛？所以在這請求大家合理安排好工作時間，勞逸結合，多鍛煉身體，多花些時間陪伴父母、家人，這樣才能帶著健康的身心去工作，從而取得更好的工作成果，形成一個良性的循環。你怎樣對待生活，生活就會怎樣對待你。
以上是我總結的除設計之外設計師需要掌握的技能，如果將這些比喻成大樹的話，設計能力是大樹的根部，是設計師立足的根本；而執行能力則是這根樹的枝干，是支撐設計師全部的基礎；表達能力是樹枝，撐起設計師的整個世界；思考能力則是樹葉花果，是設計師綜合的產物；大地就是生活能力，當設計師的產物（物質、地位等）“落地”時，滋養著大地，大地越“肥沃”，越能催生出茂盛的枝葉；而規劃能力就是一位辛勤的園丁，什么時候需要澆水，什么時候需要修剪枝葉，都是由園丁來承擔。
想要跑贏別人，首先得跑過那個跑得最快的自己。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
