輸出專業(yè)規(guī)范的命名，建立有效的設(shè)計文件命名系統(tǒng)。
項目之初大家都會建立文件夾系統(tǒng)，用來存放項目資源。這時大家可以運用杜威十進制的命名方式來管理文件命名，方便排序，讓我們的項目文件足夠清晰，在長期的項目管理中養(yǎng)成一種良好的命名習(xí)慣。
項目命名規(guī)則
下面以 用戶端 V2.1.0_新增直售展位 虛擬項目為例，創(chuàng)建各資源的子文件夾，初步完成文件管理：
00_需求文檔（PRD）
01_交互設(shè)計（原型）
02_設(shè)計文件（設(shè)計）
04_競品分析
05_動效設(shè)計
06_應(yīng)用素材
07_參考資料
08_會議記錄
大家可以根據(jù)不同項目的性質(zhì)和流程進行增刪，選擇最適合自己的項目文件管理方式。
在設(shè)計文件中，我們最經(jīng)常接觸的就是畫板、圖層，少則幾十，多則幾百，我們需要更輕松的命名排序方式來查找我們的目標，保證團隊命名風(fēng)格統(tǒng)一，清晰的場景命名更便于設(shè)計輸出和協(xié)作，也可以支持后期測試用例的填寫。
此時的命名目標在于清楚展示頁面的從屬關(guān)系，以及流程上的交互關(guān)系。
畫板&圖層命名規(guī)則
每個畫板和圖層需要根據(jù)功能模塊/類型/狀態(tài)結(jié)合數(shù)字來進行命名，方便我們對頁面進行排序。數(shù)字可根據(jù)項目文件的操作順序和權(quán)重的具體情況來取舍。
00首頁
01詳情頁
02購物車
03我的
…
在 Sketch 中我們會經(jīng)常用到一個批量重命名的工具插件 Rename It，這個工具可以快速批量對畫板、組、圖層進行重命名。文末有一篇震震張關(guān)于這個插件的介紹，大家可以學(xué)習(xí)一下。
畫板和畫布的命名規(guī)范，是為了讓每個項目參與者都能快速找到目標，對于設(shè)計師而言，可以主動思考頁面之間的關(guān)系。
一個應(yīng)用通常需要導(dǎo)出的切圖包含眾多類型：
對于切圖文件夾，可以通過通用文件、控件歸納等方法進行歸納管理。
對于切圖命名，可以無需考慮自己的英文命名具有普適性，記得命名最初的目標是：便于團隊檢索定位，因為開發(fā)人員有自己的命名習(xí)慣和命名體系。
切圖命名原則
標準命名原則：模塊_名稱_狀態(tài) ，如導(dǎo)航欄_按鈕_點擊；
全局命名規(guī)則：模塊_全局_名稱_狀態(tài)，如導(dǎo)航欄_按鈕_全局_點擊（全局使用必須加全局標識）
注意事項
如果產(chǎn)品使用了兩個平臺的獨立設(shè)計，需要 iOS 和 Android 兩個手機系統(tǒng)的切圖單獨建兩個文件夾，切圖文件分別導(dǎo)出，便于前端工程師檢索應(yīng)用。
以上是對設(shè)計項目過程中的文件管理及命名規(guī)范的一些筆記總結(jié)，持續(xù)優(yōu)化~
養(yǎng)成一個好的習(xí)慣從現(xiàn)在開始。\（ツ）/
文章來源：優(yōu)設(shè) 作者：木子的小千世界
2020 年未過半，我們就看了許多從前從未見過的人和事，體驗了許多從前從未想過的經(jīng)歷。幾個月來，「歷史性的」、「百年難遇的」、「前所未有的」、「恐慌性的」、「災(zāi)難性的」……這些詞兒，如同彈幕一般，不停地出現(xiàn)在我們眼前。短短的幾個月，許多人變了，許多家庭變了，許多事情變了，但生活還在繼續(xù)前行。經(jīng)歷過特殊的時刻，在京東的我們，比以往任何一個時刻都要忙碌，也比以往任何一個時刻更能清晰地認識到：「京東的價值、京東給社會的力量」和「我們的責任」。
我們懷著期望，期待我們每一次的改變，都能給你們帶來更多的能量。
2020 年初夏 618 來了，京東的生日之際，京東 APP9.0 全新升級，希望你們會喜歡～
1. 品牌力升級
5 月 20 日，京東零售集團宣布進行品牌升級，由原來的「多快好省」升級為「不負每一份熱愛」。作為京東集團品牌戰(zhàn)略承接的主陣地——京東 APP，將基于全新的品牌精神，著力于滿足消費者的多元化、個性化的購物需求，持續(xù)對其創(chuàng)造更大的價值。用戶在京東不僅僅能享受到好的購物體驗，還能享受到更豐富、更用心的產(chǎn)品和服務(wù)。通過對京東 APP 不斷地迭代升級，我們也向社會、向消費者詮釋著京東的每一份用心；京東 APP 也承載著每一個家庭、每一位消費者對美好生活的向往，不負你、我、他（她）的每一份熱愛。
2. 產(chǎn)品力升級
未來的 1-3 年，京東將繼續(xù)在低線市場、低滲透品類上提速；通過對新老渠道、新老內(nèi)容的矩陣開拓和整合，將單純的線上購物，升級為全場景的復(fù)合式體驗；通過新玩法的打造，增加用戶的觸點，提升粘性和頻次。為了更好地承接京東戰(zhàn)略與方向，京東 APP 的產(chǎn)品力也亟需升級。
3. 體驗力升級
除了品牌力、產(chǎn)品力升級，每一次全新「京東 APP」的到來，也在為消費者不斷提供更友好的使用體驗力。我們也非常期望能夠借助這次版本升級，對京東 APP 進行既精細、又完整的刻畫和打磨，期待通過京東 APP9.0，與消費者進一步拉近彼此的距離，讓體驗更加細膩、更加靈動，全面升級消費者在京東 APP 的體驗力。
結(jié)合京東 APP9.0 的品牌力、產(chǎn)品力、體驗力的升級背景，我們追本溯源，探尋京東自己的脈絡(luò)。
設(shè)計策略的延續(xù)升級
基于京東 APP 的核心目標，圍繞購前、購中、購后三個環(huán)節(jié)強化用戶內(nèi)心感知，承接京東的戰(zhàn)略在 APP 內(nèi)的落地。
京東 APP4.0-5.0 主要圍繞京東品牌對用戶的傳達感知進行輸出，建立京東的品牌形象；京東 APP6.0 后開始加強場景能力，逐步打造可以滿足千人千面的電商設(shè)計平臺，直至現(xiàn)在，擴寬至全渠道場景，為用戶提供更全面、更加細分的體驗。
始終圍繞產(chǎn)品策略
設(shè)計的迭代和產(chǎn)品思維綁定，始終圍繞產(chǎn)品策略，一起共建用戶的同理心；通過深耕設(shè)計解決方案、持續(xù)驗證推導(dǎo)，來打造值得用戶信賴的優(yōu)質(zhì)購物體驗。
設(shè)計將各模塊的功能與價值主張相結(jié)合，彼此進行聯(lián)動，保障從產(chǎn)品到交互到視覺，到最后的方案落地都能圍繞一個核心目標去服務(wù)。
京東 APP 設(shè)計始終都是以「產(chǎn)品、業(yè)務(wù)目標」為核心，圍繞「品牌」「用戶」「認知」三大方向，結(jié)合「設(shè)計趨勢」來發(fā)力；但基于不同的情景、當下 APP 所處的環(huán)境，設(shè)計改版的側(cè)重發(fā)力點有較大的差異；一般來說是「用一個版本來解決 1-2 個的重大體驗問題」。
我們結(jié)合京東 APP8.0 以來的用戶研究報告、用戶反饋、各關(guān)鍵模塊的數(shù)據(jù)、競品對比，從「品牌」「用戶」「認知」這三大維度著手，梳理京東 APP 的核心體驗問題，進而推導(dǎo)出京東 APP9.0 要解決的核心問題，作為定義京東 APP9.0 設(shè)計策略的關(guān)鍵依據(jù)。
1. 品牌設(shè)計 ——京東APP8.0問題提煉
在細分用戶的研究中，用戶高頻地提到 APP 的品牌感知過于冷靜、直接、有距離感，氛圍上不夠活潑，也存在「京東是正品但價格會不會更貴？」的疑惑。打個比方，可能同樣的價格，吆喝聲越大，感受上會覺得大聲的更便宜、更有爽感。
視覺定義上，一方面，柵格定義過于精細，影響了信息傳遞的流暢度，需要針對導(dǎo)購類、流程類場景進行差異化刪減；主流程內(nèi)的部分模塊留白偏多，拉低了一定的屏效；另一方面，字體的部分梯度比較多、也比較相近，雖然視覺上較為協(xié)調(diào)和統(tǒng)一，但視覺噪音較大，對主體內(nèi)容也有比較大的干擾。
人機交互時，過于直接地強調(diào)目的性，品牌靈動感待提升。
通過數(shù)據(jù)測試發(fā)現(xiàn)，核心模塊的引流效率還有較大的提升空間；兩個例子：1、可通過「嚴格控制變量，測試圖片素材的引流效率」，提升「圖片素材」的質(zhì)量，優(yōu)化核心模塊的設(shè)計規(guī)范；2、通過「圖片素材」的質(zhì)量提升，加上對「坑位容器」動態(tài)打磨，經(jīng)過數(shù)據(jù)測試，增強品牌靈動感的同時，可進一步提升屏效。
2. 用戶感受 ——京東APP8.0問題提煉
細分垂直的用戶群，在全流程內(nèi)的感受上存在割裂感；各個垂直人群在 APP 主流程內(nèi)已初步形成大的體驗閉環(huán)框架，但體驗閉環(huán)的細節(jié)還有待補齊與提升，對垂直人群的「權(quán)益和身份」的傳達還需要在情境上更加一致。舉個例子：未開通 PLUS 會員時，高凈值人群對 PLUS 身份認同感還有較大提升空間。
商品的活動促銷信息展示（時間、最優(yōu)價格）層級隱藏較深、活動促銷計算復(fù)雜難以理解，用戶促銷感受比較弱，所謂酒香真是怕巷子深。我們通過「用戶在不同平臺內(nèi)促銷感知」的用戶測試對比發(fā)現(xiàn)，雖然京東的價格最優(yōu)惠，但由于在表現(xiàn)層上沒有進行強調(diào)，導(dǎo)致用戶在價格感受上存在偏差。
產(chǎn)品感知較理性，主流程內(nèi)氛圍不夠活潑，有距離感；這一點，新興市場用戶的感知尤為明顯。
3. 認知統(tǒng)一 ——京東APP8.0問題提煉
頁面框架一致性問題：主流程過往的版本較為側(cè)重于單一模塊內(nèi)的設(shè)計，各個模塊間堆積了較多設(shè)計不統(tǒng)一的問題。
頁面內(nèi)模塊一致性問題：主流程的各個模塊內(nèi)，由于 「新舊版本」「需求不斷疊加」等原因，也存在模塊內(nèi)的統(tǒng)一性問題，這增加了用戶接受信息的負擔。舉個例子：APP 結(jié)算頁在過去的一年內(nèi)新增了較多的功能與提示場景，由于業(yè)務(wù)時間有 deadline，很多需求會采用體驗降級方案，即用現(xiàn)有控件來設(shè)計方案，使得最終方案可能體驗不夠好，而這里埋下的體驗隱患，日后依然要找機會解決。
業(yè)務(wù)和功能類型不斷增加，這會導(dǎo)致頁面相對臃腫，這時核心流程的框架亟需重新定義、向三維空間借力來舒展信息架構(gòu)。
APP 整體的故事性連接還有待強化，貨架式的流轉(zhuǎn)只是骨架；各頻道內(nèi)、各模塊內(nèi)也應(yīng)基于 APP 骨架保有自己橫向與縱向故事線，在 APP 內(nèi)注入故事性的血肉靈魂；讓用戶在 APP 內(nèi)流轉(zhuǎn)時，認知更清晰、體驗更豐富。
1. 品牌力設(shè)計策略
延續(xù)、強化京東品牌，構(gòu)建、升級「京東設(shè)計語言體系」 ，提升屏效。通過統(tǒng)一的強調(diào)，使品牌可知；通過情感化、IP 化、故事化的表達，使品牌可感。
色彩體系：延續(xù)京東品牌調(diào)性，主打京東紅的品牌色，適當?shù)赝ㄟ^增強配色、減少留白，在保留京東辨識度的同時，通過豐富的色彩體系降低 「冷淡、有距離」的感知。
例如：結(jié)合首頁及推薦位的坑位顏色，拉通營銷色彩規(guī)范，HSB 平衡所有色彩梯度；并結(jié)合算法給出冷暖色排布規(guī)則，區(qū)分內(nèi)容豐富畫面（包括首頁核心樓層/我京工具與服務(wù)/用戶資產(chǎn)我的錢包）及核心流程 HSB 平衡，色環(huán)關(guān)系，品牌色的延伸主導(dǎo)，再到單色、漸變的規(guī)律體驗，全路徑的感知；拉通京東品牌色同階梯色環(huán)，推導(dǎo)所有輔助色色值，根據(jù)透明度及飽和度疊加，得到色彩使用場景及漸變關(guān)系；提煉營銷體系核心規(guī)律，營銷坑位色彩排布關(guān)系，冷暖色階搭配，引導(dǎo)用戶識別。
營銷坑位色彩排布關(guān)系，冷暖色階搭配，引導(dǎo)用戶識別。（核心樓層為例）
字體體系：延續(xù)京東的字體建設(shè)，延續(xù)性的使用京東朗正和正黑體、加大主字號、精簡字階，拉開字體層級梯度，讓用戶的關(guān)注點更聚焦。針對下沉首頁等重點業(yè)務(wù)采用異形字體，標題與利益點字號字重比重更大，強化營銷引導(dǎo)。
icon 體系：線性圖標全面 iconfont 化，減少 app 的體積；圖標設(shè)計更簡潔，減少隱喻的手法，讓用戶「一眼即懂」；平衡視覺的體積差，建立一致性的圖標繪制尺寸規(guī)范；適當?shù)脑O(shè)計圖標互動的微動效，增加趣味性，帶給用戶「愉悅感」。
柵格體系：在屏效留用率上，基于 8.0 基礎(chǔ)定義擴展 12 、24 的倍數(shù)關(guān)系，柵格做相應(yīng)的簡化；比如在首頁/搜索/商詳?shù)软撁?，利用刪格縮減間距，提高單屏屏效；首頁核心樓層，利用減少間距，放大商品圖片，壓縮整體樓層高度，使核心內(nèi)容更加突出，更便于用戶識別到有效內(nèi)容；
優(yōu)化界面布局，巧用視覺動線，利用人們閱讀的 f 型習(xí)慣，聚焦用戶閱讀內(nèi)容；
素材設(shè)計體系：一方面，打磨坑位容器，采用動靜態(tài)容器相結(jié)合的手法。另一方面，打磨坑位素材規(guī)范，動靜態(tài)素材結(jié)合使用。同時，嘗試壓縮容器高度，與羚瓏智能設(shè)計系統(tǒng)深度合作，進行素材和頁面的測試，對運營設(shè)計的素材規(guī)范進行打磨，在容器高度壓縮的同時提升素材質(zhì)量，保證瀏覽效率不下降。
2. 用戶設(shè)計策略
細分用戶群體，增強氛圍感知、讓體驗更豐富，層次更清晰。根據(jù)細分用戶的習(xí)慣性、常識性認知，適當?shù)匕旬a(chǎn)品進行分層，讓可知可感更加貼合用戶；基于全局的統(tǒng)一，有意識細分用戶的體驗，加強各垂類用戶最在意、最可感受的局部差異，從而讓體驗更加豐富。
PLUS 會員：提高 PLUS 會員身份認同，通過全流程內(nèi) PLUS 會員皮膚、氛圍品牌一致性露出， 強化「PLUS 專屬優(yōu)惠價格計算」 「PLUS 到手價強化」等權(quán)益的感知，進而強化會員身份的感知、加強對 PLUS 會員的認同感。
家庭銀發(fā)人群：渲染家庭情感氛圍，強化優(yōu)惠及促銷的利益感知，簡化整體的使用流程，中心化界面采用大字號，為銀發(fā)人群設(shè)計。
新人用戶：打造新人專屬首頁，強化新用戶引導(dǎo)，多流程定投新人大禮包、發(fā)放新人專屬優(yōu)惠，全方位助力新人用戶轉(zhuǎn)化。
校園用戶：著重打造年輕化的視覺氛圍，拉近與校園用戶的距離。
新興市場用戶：扭轉(zhuǎn)用戶品牌認知，基于特定人群偏好的氛圍組織界面，提升流量分發(fā)效率。針對促銷較為敏感的人群，通過設(shè)計的強調(diào)，加強用戶低價感知，強化活動促銷感知，打消購買顧慮。
3. 認知設(shè)計策略
品牌金字塔理論認為關(guān)于品牌認知的一系列表象指標，如認知度、美譽度、購買率、滿意度、推薦率等，實際上反映了消費者對一個品牌認知的深入程度；這個理論，同樣可以適用在產(chǎn)品的用戶認知上，認知是一切的基礎(chǔ)，產(chǎn)品的用戶認知做好了，轉(zhuǎn)化、推薦、滿意度才能做好，能夠被認知的產(chǎn)品更容易加強情感連接；反過來，不容易被用戶認知、認知有負擔、信息架構(gòu)表現(xiàn)層復(fù)雜的產(chǎn)品，用戶理解起來可能就有障礙，再疊加情感連接的設(shè)計，那有可能就是體驗的自嗨了。
京東 APP9.0，將針對用戶的主流程，骨骼精細化重構(gòu)、優(yōu)化流程動線，給用戶提供一致性的體驗，讓認知減負。
4. 感受設(shè)計策略
消費者在只有認知的時候是理性的，而基于認知產(chǎn)生好感的時候就會變成感性。
在簡化用戶的信息認知的基礎(chǔ)上，我們將強化打造「京東語言的品牌動效」在核心流程內(nèi)的模塊感知，結(jié)合產(chǎn)品的產(chǎn)品領(lǐng)域動態(tài)銜接的訴求，在設(shè)計上考慮動態(tài)效果對「整體上下文，故事連接性」的亮點承接，讓用戶理性購物的同時，感受到感性的愉悅。
1. 用心設(shè)計每一眼感受
設(shè)計策略：延續(xù)、強化京東品牌，完善并深入刻畫京東設(shè)計語言；通過設(shè)計的語言體系，提升屏幕效率，從而帶動流量分發(fā)效率、運營效率的提升。
首頁視覺風(fēng)格煥然一新，更靈動、更輕松。（通過 IP 和品牌輔形融入、優(yōu)化色彩體系等方式，強化京東品牌；通過優(yōu)化柵格系統(tǒng)、字體系統(tǒng)、色彩體系、動態(tài)效果，讓界面的信息更加清晰，界面感受更靈動）
2. 用心對待每一個群體
設(shè)計策略：細分用戶群體，增強氛圍感知，讓體驗更豐富、層次更清晰。
設(shè)計要點：打造家庭專屬購物體驗，和家人一起在京東開心購物與互動。設(shè)計上通過暖色調(diào)和插畫的鋪陳，渲染家庭情感氛圍；同時，界面采用更大字號，為父母量身定制。
設(shè)計要點：打造 PLUS 會員中心化與去中心化的購物體驗鏈路；通過設(shè)計走查與用戶測試，填補 PLUS 會員在全流程內(nèi)的品牌、信息觸點缺失；同時，從品牌、視覺、交互三個維度，統(tǒng)一設(shè)計語言、語境、對話方式，讓 PLUS 會員在各個體驗觸點都能感受到一致的人機交互體驗。
3. 用心打造每一個場景
設(shè)計策略：基于京東設(shè)計語言體系，構(gòu)建場景；骨骼精細化重構(gòu)主流程，構(gòu)建「場景動線」，讓體驗更流暢。
設(shè)計要點：京東到家、便利店、商超、藥品、鮮花等門店商品全面入駐京東 APP；用戶在主流程內(nèi)即可以直接搜索下單附近的門店商品，下單后最快 15 分鐘內(nèi)便可送達；由于到家場景依托于主流程，我們在設(shè)計時期望用戶購物動線能與主流程統(tǒng)一，在商品池打通的基礎(chǔ)上，體驗上也能完美融合；同時，設(shè)計上需結(jié)合 LBS 場景特點，在主購物流程中，強化 LBS 與商品、配送的關(guān)聯(lián)，突出商品促銷與門店配送時效。
4. 用心打造每一條動線-多元化導(dǎo)購
設(shè)計策略：基于「京東視覺語言體系」，細分用戶群體構(gòu)建導(dǎo)購方式；根據(jù)用戶特性，強化放大「多元」的體驗。
設(shè)計要點：直播全面滲透，全流程強化直播觸點，增大直播的分發(fā)場景的用戶接觸面積；同時，通過動態(tài)強化、設(shè)計強化的手法，加大對商家私域直播的引導(dǎo)，完善直播場景的體驗。
5. 用心打造每一條動線-購物動線優(yōu)化
設(shè)計策略：基于「京東視覺語言體系」骨骼精細化重構(gòu)購物動線，統(tǒng)一交互、視覺語言，視覺降噪，讓認知減負。
6. 用心簡化每一次決策
設(shè)計策略：關(guān)鍵信息強曝光，統(tǒng)一交互視覺體驗；讓認知減負，決策更簡單。
大促氛圍優(yōu)化：在主流程內(nèi)突出大促的氛圍感知，強化搜索列表、商詳?shù)戎髁鞒虄?nèi)的大促氛圍；結(jié)合大促情緒指數(shù)設(shè)計氛圍，逐漸調(diào)動用戶的熱情。根據(jù)用戶的身份、商品的特性，在設(shè)計上突出重要信息，例如強化 PLUS 會員促銷腰帶等；同時，借助設(shè)計規(guī)范和設(shè)計組件，頁面內(nèi)彈層更加容易拓展、可自由配置。
到手價場景展示：商品詳情、購物車內(nèi)強調(diào)商品到手價，在設(shè)計上突出優(yōu)惠結(jié)果的傳達，讓用戶一眼便知。
7. 用心滿足每一次閑暇
融入品牌、IP 元素，用心打造新穎、有趣、持續(xù)的互動玩法。
8. APP9.0
京東 APP9.0 是一個新開始；我們將用未來的時間，用心跟大家詮釋，京東全新的品牌價值主張「不負每一份熱愛」。用心對待、不負期待、不負熱愛，我們在路上……由于篇幅有限，本文就不展開分析詳細的設(shè)計方案了。
文章來源：優(yōu)設(shè) 作者：京東設(shè)計中心JDC
一年一度畢業(yè)季來襲高校畢業(yè)展海報簡直「神仙打架」
大家好，我是美丫姐，今年，因為疫情原因，各大高校畢業(yè)生可以說是哭笑不得，先是因為人聚不齊，拍個畢業(yè)照都拍不成，只能上手 p。
再是各高校想方設(shè)法也要讓畢業(yè)生有個難忘的畢業(yè)典禮，紛紛搞了一出「賽博朋克」撥穗儀式。
這得虧是大白天，要是晚上在校園撞到這玩意兒還不得給人嚇個半死！
不禁讓網(wǎng)友紛紛大呼「搞點陽間的東西吧！」
但即便是這樣，也絲毫沒有減少，藝術(shù)院校辦畢業(yè)展的熱情全國各地各大藝術(shù)院校，都紛紛舉辦起了線上畢業(yè)設(shè)計展，斬斷大家想逃過做畢設(shè)的念頭，畢業(yè)設(shè)計展照常舉辦，那么畢業(yè)設(shè)計展宣傳海報也一定少不了。
接下來，就讓美丫姐帶著大家來品品，今年各大藝術(shù)院校令人「眼花繚亂」的海報。
廣美以其縮寫 GAFA 組成的動態(tài) 3D 圖形利用視差讓人產(chǎn)生錯覺，頗有幾分韻味。
就是搭配上富有節(jié)奏的 BGM 后，讓人不禁想到那句傳唱大街小巷的廣告詞「一年逛兩次海瀾之家，每次都有新感覺」。
你看，這亦實亦虛的透明物體像不像甲方虛無縹緲的需求……
彼時，這一疊疊的紙張是一次次熬夜趕的作業(yè)此時畢業(yè)了，這一疊疊紙張將會是你被打回重做的稿子
去年被全網(wǎng)吐槽的天津美院海報，天美 2019 年畢業(yè)展海報
今年選擇打一張規(guī)規(guī)矩矩的保守牌
不管甲方有多奇葩但畢竟給了錢，不管有多少坎坷都得咬著牙勇往直前 ，逆流而上！
這向四面八方發(fā)散的線條就像甲方天馬行空的想法，沒有重點，也似乎沒有終點。
稀疏的黑白線條，就像學(xué)設(shè)計后你的頭發(fā)，做設(shè)計，做到最后白了少年發(fā)，又禿了頭。
這需要瞪大眼看的 PPT 式動態(tài)海報，不正代表著更新迭代快速的時尚圈嘛！
畢業(yè)，能帶走的是屬于大學(xué) 4 年的回憶，難以帶走的，是積攢 4 年的行李，一看這陣仗，快遞費肯定不便宜。
中間的圓就像催眠師搖擺的鐘表，這畢設(shè)，是越做越瞌睡……
兩耳不聞窗外事，一心只往屏幕鉆，這才是一個優(yōu)秀設(shè)計師的優(yōu)良品質(zhì)。
設(shè)計師：「你好，有什么需要我服務(wù)的嗎？」
甲方：「需要做一個 logo，目前預(yù)算 20」
設(shè)計師：「好的，再見」
俗話說得好，做設(shè)計不帶參考線，都展現(xiàn)不出設(shè)計師有多用心。這不，理工學(xué)院密密麻麻的參考線，哪個甲方拿到手不會覺得物超所值。
只是輔助線過于密集我看了三遍才看出寫的啥。
甲方的心就像一個無底黑洞，你永遠不知道他在想啥，他給你的意見也總是在你意料之外。
做設(shè)計師，不僅要會動手，還得眼觀六路，耳聽八方能說會道，還要會「嗅」出空氣中的氛圍，這才能把甲方爸爸服侍得妥妥帖帖。
每個看向不同方向的眼珠，就像一個項目有好幾個甲方，每個甲方都有自己的想法。
藝術(shù)，總是得留有一絲絲神秘感才能吸引大家的眼球，就像馬賽克后內(nèi)容總是令人好奇。
除了大陸各大高校畢業(yè)展海報外，臺灣的畢業(yè)展海報也是百花齊放。
作品記得署名，被盜了你都沒地兒哭去。
水印打得再滿也不如自個兒的臉辨識度高，實際上畢業(yè)作品是個 AR 濾鏡。
設(shè)計就是一場探索，多走幾次，就能摸清楚甲方的套路。
選專業(yè)前猶豫做什么設(shè)計，設(shè)計系畢業(yè)后：「做什么設(shè)計！」
遇到蠻不講理的甲方，多深呼吸幾次忍忍也就過去了。
保持一個樂觀的心態(tài)，才能發(fā)現(xiàn)設(shè)計的世界多姿多彩。
你看這從上到下密密麻麻的人海，就像是一次次嘗試夠到甲方需求，卻又一次次失敗的你。
看這畢設(shè)把孩子逼得這醫(yī)院看來沒少去。
無論何時，回憶起肝畢設(shè)的日子，就連軟件頁面都能浮現(xiàn)在眼前。
當你正式成為設(shè)計師你會發(fā)現(xiàn)，做多了辣眼睛的設(shè)計，你的眼球?qū)兂上钠贰?
縱觀今天所有的畢業(yè)展的海報設(shè)計，有的難以理解，有的讓人出乎意料，但唯一可以肯定的是，無論條件多糟糕，哪怕不能像往年，有展館可給學(xué)子們呈現(xiàn)自己的創(chuàng)意，熱愛設(shè)計的大家，創(chuàng)作的熱情，也沒有被這場突如其來的疫情澆滅。
雖說有些海報可能不能做到，讓所有人滿意，但校方也盡力，為同學(xué)們搭建了一個可以展現(xiàn)，大學(xué)四年學(xué)習(xí)成果的舞臺。
文章來源：優(yōu)設(shè) 作者：你丫才美工
通常產(chǎn)品經(jīng)理在立項前都要思考需求的實現(xiàn)方式：是原生做？還是 H5 做？
問題的答案會因?qū)嶋H情況有所不同，如果追求體驗，那原生效果更好，如果追求短頻快，那就選用 H5，或是兩者結(jié)合。
CCtalk 是個涉及 7 大端的跨平臺產(chǎn)品：iOS、Android、PC、Mac、Web、觸屏、小程序。我們在日常項目中（尤其是用戶增長類的項目）越來越多選擇用 H5 實現(xiàn)，然后以低成本適配方式應(yīng)用到不同客戶端。
這樣做的好處在于：
降低了開發(fā)成本。原本要涉及 iOS、Android、PC（PC 和 Mac 用同一套 Qt 實現(xiàn)）、H5 這 4 個端的開發(fā)人員，現(xiàn)在采用內(nèi)嵌頁的方式，可以做到完全不涉及移動端和桌面端，或者僅是入口放置這類比較簡單的工作。
降低了維護成本。如果有優(yōu)化調(diào)整，可以只改 H5 頁面，不用各個端都動手。
好處顯而易見，當然這也不是件一本萬利的事。看下面這張 App 和 PC 屏幕尺寸的對比圖就明白了，長寬比差異這么大，頁面在適配的時候，有時需要優(yōu)化調(diào)整布局。
△ App和PC屏幕尺寸對比
如果要真正做到流暢順滑的體驗，流式布局是最佳選擇，但是對設(shè)計和開發(fā)的要求都很高，維護成本也不小，這讓大多數(shù)團隊望而卻步。所以還是自動適配寬度、媒體查詢（斷點適配）等相對低成本的方式比較香。
如何以低成本的方式做適配？這個問題涉及 2 個方面：框架和頁面。
△ 框架和頁面
先來看看框架，大致有 4 種：觸屏、App、PC、Web。通常一個項目會涉及其中的幾種，也有少數(shù)情況都涉及。（此文暫不討論小程序，有機會再寫一篇關(guān)于小程序設(shè)計的文章）
1. App
CCtalk 用的 App 框架容器是公司橫向團隊提供的 Web View，有 2 種：
常規(guī)的導(dǎo)航樣式。元素包括：返回、頁面標題、分享（根據(jù)需要選擇展示或不展示）。安卓和 iOS 略有區(qū)別，iOS 為了導(dǎo)航欄的順滑過渡效果，用的是同一個 Web View，所以無法滿足在一系列頁面中部分頁面有分享按鈕，部分頁面沒有分享按鈕。安卓用的不是同一個 Web View，所以沒有這個問題。（此處不展開討論）
透明頭部導(dǎo)航。常規(guī)導(dǎo)航無法滿足一些個性化的設(shè)計需求，所以透明頭部導(dǎo)航就應(yīng)運而生了?？梢詫?dǎo)航欄進行自定義設(shè)計，營造沉浸式的體驗。
△ 2種頭部
2. PC客戶端
PC 客戶端的框架導(dǎo)航包括：返回上一頁，返回首頁。頁面內(nèi)嵌時，要留意容器導(dǎo)航和頁面導(dǎo)航是否有重復(fù)或遺漏。假如要保留頁面導(dǎo)航欄，那需隱藏返回按鈕；如果去掉頁面導(dǎo)航欄，則需將導(dǎo)航欄上原有的操作（例如分享）通過懸浮等方式保留。
△ PC端的全局導(dǎo)航
一般的設(shè)計流程是：先設(shè)計觸屏頁面，再去看看 PC、Web 頁面是否需要調(diào)整。
響應(yīng)的總原則：提高屏幕利用率。
具體評估標準有 3 點：
頁面元素從小到大可分為：控件→組件→模塊→頁面，按照不同維度的復(fù)用，并結(jié)合自身的項目經(jīng)驗，整理出 3 種常見的方法（此處是重點，看我看我）。歡迎小伙伴一起討論補充。
△ 3種常見的適配方法
這種方法最簡單，幾乎不用動腦子。具體實施方式又分兩種：
案例1-拉到指定寬度：
像帖子這類結(jié)構(gòu)簡單的內(nèi)容頁一般都可以直接拉伸。注意檢查是否有遺漏操作，一般在 PC 端可以采用懸浮按鈕的方案將移動端的操作保留。
△ 帖子頁
案例2-居中顯示，兩邊留白：
如果頁面直接拉伸給用戶增加了操作成本，可以采用將主體內(nèi)容居中，頁面兩邊留白的方式。
實名認證項目是將同一套實名認證流程復(fù)用到 3 個不同的使用場景中，所以頁面需要適配觸屏、web、PC 彈窗 3 個框架尺寸。如果將觸屏頁直接在 Web 上拉伸，那不僅樣式上不美觀，而且右側(cè)的「修改」、「獲取驗證碼」等操作按鈕距離左側(cè)的標題太遠，根據(jù)格式塔的接近原理，右側(cè)的一列藍色操作反而會被誤以為是一個整體，脫離和主體的關(guān)系，不易于操作。所以我們的做法是放棄拉伸，而是將主體內(nèi)容居中顯示，頁面兩邊留白。
△ 實名認證頁
這種方式雖然簡單，但也要注意可能會涉及一些細節(jié)調(diào)整：
如果所有頁面都能這么輕松適用于各個不同端，那對設(shè)計和開發(fā)來說真是省心省力，皆大歡喜。然而現(xiàn)實不會這么順風(fēng)順水，有些頁面放到不同的框架內(nèi)會「水土不服」，這時就需要設(shè)計師出馬做些調(diào)整。
這種調(diào)整適用于有圖片和列表的頁面。從設(shè)計層面改動不算大，而且開發(fā)量適中，開發(fā)也比較能接受。
案例1-排行榜
在課程排行榜項目中，有一個榜單列表頁，展示榜單的具體排名和獎勵等信息。
如果直接把觸屏頁面搬到 PC 端，滿眼是大寫的「丑」，從設(shè)計角度分析，用戶的閱讀負擔和操作負擔也過重，屏幕利用率低，鼠標滾了半天也沒看完一半榜單。
△ 直接拉伸——丑&不好用
所以這個頁面需要設(shè)計師改造一下才能適配到 PC 端，具體怎么做呢？
我們來分析一下它的頁面框架和模塊。頁面從上到下分為：獎勵 Banner、tab 區(qū)、列表區(qū)和我的排名 4 部分，結(jié)構(gòu)相對來說比較簡單，在 PC 端可以保持大的框架結(jié)構(gòu)不變。
△ 頁面結(jié)構(gòu)
因為移動端是以縱向為主的屏幕，而 PC 端是寬屏，需要進行調(diào)整的模塊分別是：獎勵 banner區(qū)（圖片類），其他名次列表（列表類）。對于圖片適配，在這個項目中可以采用不同端使用不同比例圖片的方案。對于列表適配，在 PC 端由 1 列調(diào)整為 2 列，以提升閱讀效率。
△ 保持頁面框架，調(diào)整圖片和列表模塊樣式
案例2-課程售賣頁
圖片的適配處理，除了采用不同比例的多套圖之外，還有另一種方式——保持圖片比例不變，調(diào)整頁面布局。將圖片和標題從上下結(jié)構(gòu)改成左右結(jié)構(gòu)。
△ 課程售賣頁
小結(jié)：
保持頁面框架，調(diào)整模塊內(nèi)樣式的方法適用于結(jié)構(gòu)相對簡單，有圖片和列表等特殊元素的頁面。
對于圖片適配，有 2 條思路：
如果頁面模塊多、結(jié)構(gòu)復(fù)雜，靠小改還是會造成閱讀障礙和操作負荷，那就要用方法三——模塊級復(fù)用，重組頁面布局。
案例-課時學(xué)習(xí)頁
課時學(xué)習(xí)頁是個多模塊的復(fù)雜頁面，分別有視頻播放區(qū)、課時基本信息、目錄、網(wǎng)師、評價和推薦。整體思路是將頁面結(jié)構(gòu)由 1 列調(diào)整為左右 2 列，以此來提高屏幕的利用率。
模塊的具體位置根據(jù)其重要性以及和內(nèi)容主體的相關(guān)度來排布，例如目錄：從平臺角度希望用內(nèi)容吸引用戶，增加觀看時長；從用戶角度是需要經(jīng)常點擊切換的，對于這種重要性高又操作頻繁的模塊，當然應(yīng)該放在第一屏內(nèi)。例如推薦：和內(nèi)容主體的關(guān)聯(lián)度不高，所以優(yōu)先級低，放在右側(cè)較小的區(qū)域內(nèi)。
△ 課時學(xué)習(xí)頁
在復(fù)用模塊時，要注意是否有手勢操作的場景。如果觸屏端有左右滑動的模塊，在 PC 端適配有 2 種做法供參考：
另外，要注意浮層的特殊處理。手機端一般通過浮層展示更多信息，在 PC 端適配時，需將浮層調(diào)整為固定模塊。例如移動端吸底的課程介紹浮層，在 PC 端改成固定在目錄下方。
△ 浮層的適配
以上是我結(jié)合項目經(jīng)驗總結(jié)的 3 種低成本頁面適配方法。當然，在具體的適配中還會遇到許多細節(jié)問題，需要 case by case 去處理。
文章來源：優(yōu)設(shè) 作者：魚游設(shè)計
你的設(shè)計是否能被理解？為什么設(shè)計的價值總是不被人認可？本文將從深入淺出，帶你了解全局性設(shè)計思維的真正力量。
你的設(shè)計是否能被理解？為什么設(shè)計的價值總是不被人認可？
設(shè)計不僅僅只是帶來美感，好的設(shè)計能夠為產(chǎn)品、公司甚至整個社會創(chuàng)造巨大的價值。而在創(chuàng)造好的設(shè)計這個過程中，最重要、也是最容易被人忽視的，便是設(shè)計思維。
何為全局性設(shè)計思維？它能夠為設(shè)計師帶來哪些價值？本文將從設(shè)計的本質(zhì)出發(fā)，結(jié)合設(shè)計的發(fā)展趨勢，帶你了解全局性設(shè)計思維的真正力量。
目錄
這篇文章的主要內(nèi)容，來自我在 19 年底的一個沙龍分享。整個分享以設(shè)計思維的角度入手，講述了全局性設(shè)計思維的來源和重要性，以及我是如何在不同產(chǎn)品線上去運用這種設(shè)計思維的。
何為全局性設(shè)計思維？為什么要講這種思維方式？
這是我一直在探索并實踐的一種設(shè)計思維。從最開始的理論雛形，到各種項目的實踐，不斷進行修正和完善，最終形成了一套卓有成效的思維方式。通過這種思維方式，我逐步幫助產(chǎn)品解決了許多長期性的問題，并最終構(gòu)建了各種不同類型的設(shè)計體系。最終，隨著品牌矩陣與產(chǎn)品體系的落地，形成了一個完整的網(wǎng)易智慧企業(yè)設(shè)計體系。
△網(wǎng)易智慧企業(yè)設(shè)計體系
因為篇幅原因，本篇文章將重點從理論層面闡釋全局性設(shè)計思維的導(dǎo)論、價值及使用方式。而具體的實戰(zhàn)案例，我之后將會以另外幾篇單獨文章的形式進行展現(xiàn)，并詳細講解在設(shè)計過程中的一些細節(jié)與過程。希望能夠幫助大家更深入地去理解如何根據(jù)不同的場景正確地去使用這種思維方式。
未來可能會包含以下幾篇文章：
當然，目前的設(shè)計體系僅僅只是一個開始，未來還有很長的路要走。
希望本文能夠為你帶來小小的啟發(fā)，讓設(shè)計思維幫助你更好地發(fā)揮設(shè)計的價值。如果你對某一方面特別感興趣，可以直接跳到這一章進行閱讀，無需浪費過多時間。如果你有任何疑問，也歡迎隨時與我交流。
這次把序放在了第二段，這樣子看上去就不那么不務(wù)正業(yè)了哈哈。當然，寫序更多的是為了記錄生活，希望每一篇文章不僅僅只是傳遞知識，更是一篇有溫度的文章。
整個 2019 年中，經(jīng)歷了很多事情，人生觀也隨之發(fā)生了些許變化。
從并肩作戰(zhàn)的同事的不斷離去，到逐漸需要考慮團隊的發(fā)展。從單打獨斗闖天下，到思考如何讓整個團隊更加優(yōu)秀、如何建立完善的設(shè)計體系等等。
角色、心態(tài)、責任，以及如何坦然地面對自己。
活在當下，用心生活。這是我一直當作座右銘的語錄，也是我希望給自己的承諾?？偸窃噲D去嘗試這種狀態(tài)，但卻異常艱難。像我這樣的人，看上去總是「積極向上」，總是「規(guī)劃未來」，總是希望事事完美，強迫著每個細節(jié)的完善。但不知不覺中，人生好像開始進入了「自動駕駛」的模式，活在了過去的思索中，活在了未來的規(guī)劃中，唯獨對于當下異常麻木。
這并不是我想要的生活，我開始嘗試做出改變。
偶然間，通過一些書籍，我開始嘗試正念禪修。感受每個呼吸中空氣的流動、感受身體的每個部分、感受當下空間發(fā)生的每一件事情。雖然只是很淺顯的境界，但正念依然對我產(chǎn)生了巨大的影響。我開始重新地審視自己的人生，審視自己的生活狀態(tài)。
△ 網(wǎng)易蝸牛圖書館：與快樂的小伙伴們
這種感覺，就像再次的呼吸了新鮮空氣一樣。
我們其實只存在于當下的時空中，過去和未來，并非真實存在的事物?；叵胍幌?，我們有多久沒有像小時候一樣，完完全全、毫無雜念地享受在當下的時光中了？
用心活在當下，平靜地接納一切發(fā)生的事物，這種感覺真是太美好了～
對于設(shè)計師來說，什么能力更為重要？是設(shè)計這門「技術(shù)」本身，還是思考如何去設(shè)計的「思維」能力？
對于不同的設(shè)計師來說，一定會有不同的答案。
這兩種能力本身并不矛盾，他們相互影響，互相促進——就像「術(shù)」與「道」之間的關(guān)系。設(shè)計能力決定了設(shè)計作品的輸出質(zhì)量，而設(shè)計思維則決定了你思考問題、解決問題的能力。
然而，在現(xiàn)實的大環(huán)境下，「術(shù)」的重視程度遠高于「道」，造成了很多設(shè)計師與日常業(yè)務(wù)的「分離感」。以至于，多數(shù)的設(shè)計師，無法將自己的設(shè)計能力有效地用于日常業(yè)務(wù)中；抱怨他人不理解設(shè)計，也因此錯失了許多機會。
重視設(shè)計美感，其實并沒有問題。視覺是最直接的表現(xiàn)方式，我們從最初開始喜歡這個行業(yè)，并最終成為設(shè)計師，大概都是因為如此。包括我個人，也是美感的追求者，常常為了幾像素的細節(jié)，調(diào)整無數(shù)稿。也常常沉浸于自己的作品無法自拔。
但是，美感之后，設(shè)計還需要什么？
路易斯·沙利文曾講過：「形式追隨功能」。而功能存在的意義，則在于解決問題。視覺的形式、美感，很多時候只是包裹在外側(cè)的表層，而解決問題才是設(shè)計真正的核心。視覺的表現(xiàn)，一定要遵循解決問題的方式，向用戶傳遞恰當?shù)男畔?，最終引導(dǎo)用戶以此來解決問題。
因此，我更希望更多的設(shè)計師，在追求美感的同時，能夠重拾設(shè)計思維本身，尋找設(shè)計最根本的價值。
我們其實可以站得更遠一些。學(xué)會去理解事物，學(xué)會用設(shè)計去解決問題。再以此為基礎(chǔ)，通過你的設(shè)計能力去塑造它、點亮它，讓它成為一個真正美好而又有價值的設(shè)計。
而設(shè)計的價值，將會成為你的價值。
互聯(lián)網(wǎng)時代中的數(shù)字產(chǎn)品設(shè)計，需要什么樣的設(shè)計思維？或者說，當下我們需要什么樣的設(shè)計思維？
這個問題的答案，好像一直在變。
互聯(lián)網(wǎng)本身便是一個新的形態(tài)，1989 年「萬維網(wǎng)」發(fā)明，1996 年中國引入互聯(lián)網(wǎng)，到今年已經(jīng)有大約 24 個年頭。我們經(jīng)歷了不同的互聯(lián)網(wǎng)時期，而「設(shè)計」的概念也一直在變化中。
Internet 1.0 PC 互聯(lián)網(wǎng)時代。在這個時代，我們將大量的信息虛擬化，并通過網(wǎng)絡(luò)進行信息傳遞。而我們的「設(shè)計師」們大多被稱為「美工」，我們的「設(shè)計思維」，便是將信息變得更好看。
Internet 2.0 移動互聯(lián)網(wǎng)時代，或者稱為消費互聯(lián)網(wǎng)時代。自從 2007 年喬布斯發(fā)布第一代 iPhone 之后，疊加 4G、wifi 等技術(shù)，手機成為日益重要的終端，世界逐漸進入了移動互聯(lián)網(wǎng)時代。伴隨著 iPhone 與其應(yīng)用的出現(xiàn)，喬布斯讓所有人理解了「用戶體驗」的重要性。我們不再是「美工」，我們變成了「UI 設(shè)計師」、「交互設(shè)計師」。而這個時代，我們的設(shè)計思維變成了「用戶體驗思維」。
那么，下一個時代在哪里？我們的設(shè)計思維又將如何轉(zhuǎn)變，才能適應(yīng)下一個時代？
1. 紅利消失、增長觸頂，互聯(lián)網(wǎng)下半場到來
最近幾年，我們已經(jīng)能夠明顯地感知到——互聯(lián)網(wǎng)的「寒冬」真的來了。隨之而來的，便是互聯(lián)網(wǎng)的發(fā)展方向似乎也正在發(fā)生變化。于是大約從 2017 年開始，互聯(lián)網(wǎng)圈內(nèi)逐漸出現(xiàn)一個新的名詞——互聯(lián)網(wǎng)「下半場」。人們普遍認為，中國的互聯(lián)網(wǎng)將會由消費互聯(lián)網(wǎng)時代進入下一個時代，即互聯(lián)網(wǎng)下半場。
我并不完全認同互聯(lián)網(wǎng)「下半場」的稱呼。互聯(lián)網(wǎng)本身是一個年輕的行業(yè)，中國互聯(lián)網(wǎng)「下半場」，其實更像是互聯(lián)網(wǎng)發(fā)展方向轉(zhuǎn)變的標志。
因此，我們認為的下一個時代的方向，也許將會是 Internet 3.0——即產(chǎn)業(yè)互聯(lián)網(wǎng)時代。
互聯(lián)網(wǎng)為什么必須要進入下一個時代？
對于互聯(lián)網(wǎng)企業(yè)來說，一方面在成本端，隨著人口紅利消退，勞動力價格上升，企業(yè)的成本將逐漸升高，倒逼管理者使用系統(tǒng)和工具來提率；另一方面，在收入端，野蠻增長的時代結(jié)束，增量經(jīng)濟轉(zhuǎn)向存量經(jīng)濟，紅利經(jīng)濟轉(zhuǎn)向效率經(jīng)濟。
在「成本」與「效率」的雙重壓力下，再加上整個市場經(jīng)濟的下行周期，整體經(jīng)濟出現(xiàn)下滑，而一些依靠融資的互聯(lián)網(wǎng)公司將難以為繼。因此企業(yè)不得不尋找方法來提升效率，降低成本——而這正是企業(yè)級軟件（ToB 產(chǎn)品）最擅長的地方。
因此，在互聯(lián)網(wǎng)寒冬之下，ToB 市場便理所應(yīng)當?shù)亻_始被重視。
讓我們縱觀整個中國市場的發(fā)展，互聯(lián)網(wǎng)的興起雖然促進了消費領(lǐng)域的蓬勃發(fā)展，但產(chǎn)業(yè)領(lǐng)域的發(fā)展則因此受到了巨大制約。中國率先從消費端、從第三產(chǎn)業(yè)開始數(shù)字化，然而在第一、二產(chǎn)業(yè)的數(shù)字化進程似乎并不是很快。一個重要的原因是，人口紅利促使了消費互聯(lián)網(wǎng)的快速發(fā)展，而這種紅利讓人們忽視了產(chǎn)業(yè)互聯(lián)網(wǎng)的重要性。
在寒冬之下，我們終于發(fā)現(xiàn)，消費互聯(lián)網(wǎng)蓬勃的基石，正是底層堅實的產(chǎn)業(yè)互聯(lián)網(wǎng)。產(chǎn)業(yè)互聯(lián)網(wǎng)如果不能得到有效的發(fā)展，則整個市場經(jīng)濟將無法更進一步地發(fā)展。
因此，產(chǎn)業(yè)互聯(lián)網(wǎng)時代的到來，是中國互聯(lián)網(wǎng)發(fā)展的需要，也將是大勢所趨。
2. ToB市場將迎來機遇
產(chǎn)業(yè)互聯(lián)網(wǎng)的發(fā)展，需要依托 B 端領(lǐng)域的發(fā)展，并逐步融入并帶動整個產(chǎn)業(yè)進入互聯(lián)網(wǎng)時代。那么，B 端產(chǎn)品在中國目前處于一個什么階段呢？
對于整個中國的 ToB 行業(yè)發(fā)展現(xiàn)狀，大多數(shù)的人并沒有一個清晰的概念。盤點中美上市的科技公司會發(fā)現(xiàn)，美國 toC 領(lǐng)域與 toB 領(lǐng)域市值之比是 6:4，但在中國這個數(shù)字是 20:1。
雖然互聯(lián)網(wǎng)的整體環(huán)境不同，但中國 ToB 行業(yè)的發(fā)展，顯然是落后太多了。于是乎，2018 年開始，BAT 大舉布局，PE、VC 加速進場——中國 B 端產(chǎn)品已經(jīng)逐漸進入必須發(fā)展的時候了。
中國市場已經(jīng)坐擁全球最發(fā)達的消費互聯(lián)網(wǎng)體系，而產(chǎn)業(yè)互聯(lián)網(wǎng)的發(fā)展卻嚴重滯后。
同時，對比 B 端中云計算領(lǐng)域的 IaaS、PaaS、SaaS 三層架構(gòu)，全球市場中 SaaS 占據(jù)了 52.5% 的份額，在中國卻是 IaaS 分走了最大的蛋糕，占比達 61.2%。中國市場 VC 的投資總額已經(jīng)與美國相當，在 SaaS 領(lǐng)域美國企業(yè)獲得了全球 70.1% 的融資，而中國只有 11.7%。
因此，在互聯(lián)網(wǎng)下半場，相對于 ToC 行業(yè)的觸頂，ToB 行業(yè)將會迎來歷史級的發(fā)展機遇，隨之而來的將會是產(chǎn)業(yè)互聯(lián)網(wǎng)時代的逐漸到來。而在整個 B 端產(chǎn)品的類目中，SaaS 產(chǎn)品作為企業(yè)級軟件中最集成的產(chǎn)品，也將隨著這股浪潮迎來爆發(fā)式的增長。
什么是 SaaS 產(chǎn)品？很多同學(xué)并沒有接觸過 B 端行業(yè)，平時用到的也都是 C 端產(chǎn)品，所以對 B 端產(chǎn)品的了解比較少。在 B 端行業(yè)最熱門的云計算領(lǐng)域中，目前普遍會分為三層架構(gòu)。SaaS（Software as a Service–軟件即服務(wù)）；PaaS（Platform as a Service–平臺即服務(wù)） ；IaaS（Infrastructure as a Service–基礎(chǔ)架構(gòu)即服務(wù)）。
附：云計算領(lǐng)域，三種不同的架構(gòu)與對應(yīng)的服務(wù)。
PaaS 基于 IaaS 實現(xiàn)，SaaS 的服務(wù)層次又在 PaaS 之上，三者分別面對不同的需求。越往上層，產(chǎn)品的集成度越高，提供的服務(wù)也就越豐富，而用戶所需要的自行解決的東西就越少。而最頂層的 SaaS 產(chǎn)品，便是用戶可以直接購買并使用的云端產(chǎn)品。
我們?yōu)槭裁匆私膺@些趨勢？
因為一個新的時代，對應(yīng)一場變革，也將成為一次新的機會。不管是 SaaS 產(chǎn)品還是其他 B 端產(chǎn)品，都將在新的時代中逐漸得到重視。而 C 端產(chǎn)品的發(fā)展策略，也將迎來新的變化。對于許多設(shè)計師來說，這將會是一個新的機遇。
順勢而為，方能乘勢而上。
那么，在逐漸到來的產(chǎn)業(yè)互聯(lián)網(wǎng)時代，設(shè)計師需要注意哪些東西？設(shè)計思維又將進行如何轉(zhuǎn)變？
產(chǎn)業(yè)互聯(lián)網(wǎng)時代，意味著 B 端產(chǎn)品將得到重視，并與 C 端產(chǎn)品逐漸趨于平衡。因此，了解設(shè)計思維的變化，我們首先要從 B 端與 C 端產(chǎn)品之間，在產(chǎn)品設(shè)計與產(chǎn)品策略之間的差異性說起。
1. 服務(wù)對象的差異性
從服務(wù)對象來看，C 端產(chǎn)品的服務(wù)對象是人，產(chǎn)品的目標是針對人們生活方式進行的變革、升級。而 B 端產(chǎn)品的服務(wù)對象則大多是企業(yè)，目標是幫助企業(yè)進行商業(yè)效率的提升，從而產(chǎn)生價值。
服務(wù)對象的差異性，決定了產(chǎn)品在發(fā)展策略也將存在著較大的差異性。
2. 產(chǎn)品「打法」上的差異性
從宏觀的打法上看，消費互聯(lián)網(wǎng)時代會更求「快」，而產(chǎn)品互聯(lián)網(wǎng)時代則會更偏「穩(wěn)」。
C 端產(chǎn)品的服務(wù)對象是人，而人的需求在個體差異性上相對變化較小，這就決定了 C 端產(chǎn)品通常都擁有廣闊的用戶市場。
因此，消費互聯(lián)網(wǎng)時代就像是資本在遼闊平原的角逐，長驅(qū)直入。講究快速占領(lǐng)市場，不斷地試錯、不斷地調(diào)整。從團購到直播，從打車到短視頻領(lǐng)域的興起，再到最后的單車大戰(zhàn)落幕。消費互聯(lián)網(wǎng)時代的每一次風(fēng)口，都伴隨著各種「游擊戰(zhàn)」式的競爭。入場速度、快速調(diào)整能力、資本深度，都直接影響了最后的結(jié)果，而最終的結(jié)果也往往是勝者為王，敗者將快速地被市場淘汰。
B 端產(chǎn)品的服務(wù)對象是企業(yè)，而企業(yè)間的需求差異性則非常巨大，這就決定了 B 端產(chǎn)品通常需要較強的縱深能力。相對應(yīng)的，其用戶群體在總量上就比較小、但也相對穩(wěn)固。
因此，產(chǎn)業(yè)互聯(lián)網(wǎng)就像在崎嶇叢林的蹣跚前行，漸次演進，如同一場曠日持久的拉鋸戰(zhàn)。一方面，產(chǎn)業(yè)互聯(lián)網(wǎng)的鏈條非常長，需要長期的深耕、積累才能逐漸站穩(wěn)腳跟。而這也導(dǎo)致了產(chǎn)品的壁壘足夠深厚，同類產(chǎn)品在短期內(nèi)無法快速跟進。另一方面，企業(yè)間的差距需求的差異性非常大，因此產(chǎn)業(yè)互聯(lián)網(wǎng)存在非常多的細分市場，不同的產(chǎn)品各自在不同的賽道中深耕。而其最終的結(jié)果往往是百花齊放，各自盛開。
3. 整體行業(yè)的協(xié)同發(fā)展
雖然整個市場都不斷地強調(diào)——ToC 增長觸頂，ToB 是一片藍海。但這并非是「取而代之」，而是逐漸走向整體的「協(xié)調(diào)發(fā)展」。中國 ToB 的發(fā)展的一個重要根基，其實是「中國擁有世界上最成熟的消費互聯(lián)網(wǎng)體系」這一巨大的優(yōu)勢。
因此，ToC 在很長的時間內(nèi)，仍然會是互聯(lián)網(wǎng)的主力，而 ToC 市場的轉(zhuǎn)型，也將有賴于 ToB 產(chǎn)品所提供的服務(wù)。
而隨著中國將「互聯(lián)網(wǎng)+」政策上升為國家戰(zhàn)略，更是明確了以互聯(lián)網(wǎng)帶動傳統(tǒng)產(chǎn)業(yè)的發(fā)展方向。因此，互聯(lián)網(wǎng)的下半場，即產(chǎn)業(yè)互聯(lián)網(wǎng)時代的最終形態(tài)，將是互聯(lián)網(wǎng)與傳統(tǒng)行業(yè)的「融合式發(fā)展」。
ToB 產(chǎn)品將會成為帶動互聯(lián)網(wǎng)下一輪發(fā)展的核心驅(qū)動力。一方面幫助 ToC 領(lǐng)域完成轉(zhuǎn)型，進入更健康、更穩(wěn)健的發(fā)展階段；另一方向，ToB 領(lǐng)域賦能傳統(tǒng)產(chǎn)業(yè)與互聯(lián)網(wǎng)相融合，并最終完成產(chǎn)業(yè)升級。
4. 產(chǎn)品形態(tài)的融合與趨同
整體產(chǎn)業(yè)的融合趨同，意味著產(chǎn)品的特性也將互相融合。一個很重要的現(xiàn)象是：C 端產(chǎn)品逐漸變得不那么 C 端了，而 B 端產(chǎn)品也越來越變得不像 B 端了。
比如 C 端產(chǎn)品的主流賽道中，隨著頭部產(chǎn)品的賽道日漸趨于穩(wěn)定，其產(chǎn)品體量也因為業(yè)務(wù)擴展而不斷增加。同時，因為產(chǎn)品體系的逐漸形成，為了服務(wù)更多的 C 端用戶，會有越來越多的 B 類用戶進入平臺，而為了滿足 B 類商家的需求，產(chǎn)品的 B 端屬性變得越來越強了。
而隨著 B 端產(chǎn)品的不斷受到重視，原先不被重視的產(chǎn)品 UI、用戶體驗也逐漸在 B 端產(chǎn)品中得到加強。B 端用戶雖然服務(wù)于 B 端，但使用者終究是人。而隨著競爭的不斷加劇，原來的「重功能、輕體驗」思路逐漸式微。我們逐漸發(fā)現(xiàn)，許多 B 端產(chǎn)品長得越來越像 C 端產(chǎn)品了，甚至在 UI 和體驗層面做的與 C 端產(chǎn)品不相上下。
因此，隨著產(chǎn)品屬性的融合趨同，意味著設(shè)計思維勢必會與消費者互聯(lián)網(wǎng)時代存在差異。而我們的設(shè)計思維將不僅僅局限在誕生于消費互聯(lián)網(wǎng)時代的「用戶體驗思維」。我們需要更新的、更廣闊的設(shè)計思維，以滿足下一個時代的產(chǎn)品發(fā)展需要。
那么，新的思維是什么？它將從何而來？
從整個市場的協(xié)同發(fā)展，到產(chǎn)品形態(tài)的融合趨同。那么，我們的設(shè)計思維需要如何進行相應(yīng)的變化？是同樣進行「融合趨同」，還是另辟蹊徑，尋求新的視角？
1. 關(guān)鍵詞提取
首先，不管設(shè)計思維如何變化，它一定需要同時滿足兩種產(chǎn)品設(shè)計思維的特性。通過前文的分析，我們可以在產(chǎn)品設(shè)計特性的維度，提取各自的關(guān)鍵詞進行分析：
產(chǎn)品體驗：誕生于消費互聯(lián)網(wǎng)時代的用戶體驗思維，在產(chǎn)業(yè)互聯(lián)網(wǎng)時代依然是產(chǎn)品設(shè)計中最重要的部分。無論是 C 端還是 B 端產(chǎn)品，用戶體驗必然是產(chǎn)品的核心競爭力，只有足夠好用、好看，產(chǎn)品才能獲得更多用戶，最終獲得商業(yè)上的成功。
靈活性：在消費互聯(lián)網(wǎng)時代，在激烈的競爭中，C 端產(chǎn)品的靈活性的打法對于產(chǎn)品的突圍至關(guān)重要。而未來的 B 端產(chǎn)品競爭將會加劇，這就需要 B 端產(chǎn)品也逐漸需要較強的靈活性。
成長性：產(chǎn)品的發(fā)展必將伴隨著不斷的變化，特別是具有一定體量之后，產(chǎn)品設(shè)計的成長性將至關(guān)重要。因此，產(chǎn)品的設(shè)計是否能夠預(yù)見未來發(fā)展，滿足不斷變化的產(chǎn)品形態(tài)，伴隨著產(chǎn)品不斷地成長，也將成為產(chǎn)品是否能夠持續(xù)獲得成功的關(guān)鍵因素。
產(chǎn)品效率：因為產(chǎn)品服務(wù)對象的關(guān)系，B 端產(chǎn)品一直是產(chǎn)品效率的代名詞。而在人口紅利消失與經(jīng)濟下行的壓力下，產(chǎn)品效率將成為所有企業(yè)關(guān)注的重要因素之一。產(chǎn)品的效率不僅影響著企業(yè)的成本，也是產(chǎn)品競爭力的重要體現(xiàn)。
這四個關(guān)鍵詞，將會是我們在未來所需要關(guān)注的四個重點關(guān)鍵詞。越是往左，則「C」屬性越強，因為它更多地從用戶的角度出發(fā)，更關(guān)注用戶體驗。而越是往右，則「B」屬性越強，因為它更多地從企業(yè)的角度出發(fā)，更關(guān)注企業(yè)的長期發(fā)展。
2. 跳出單一層面，尋求新視角
在四個關(guān)鍵詞中，我們會發(fā)現(xiàn)，特性越是靠右，其所需要的整體性就越強。要滿足靈活性，就需要用戶體驗與產(chǎn)品策略相關(guān)聯(lián)。要滿足成長性，則要進一步結(jié)合底層的開發(fā)能力。而產(chǎn)品效率的提升，則需要產(chǎn)品的設(shè)計與不同層面都有著緊密的耦合。
在互聯(lián)網(wǎng)設(shè)計發(fā)展的過程中，我們從單點只關(guān)注視覺表層的「美工時代」，逐漸發(fā)展為關(guān)注線性的「用戶體驗思維」。在對于產(chǎn)品用戶體驗層面，確實有著長足的發(fā)展。
但是，單一層面的用戶體驗思維，在逐漸成熟的互聯(lián)網(wǎng)時代中，逐漸顯示出了一定的局限性。我們的價值局限于單一的體驗層面，我們似乎無法對產(chǎn)品形成更大的影響力，也難以為產(chǎn)品帶來體驗之外的更多價值。
因此，設(shè)計思維想要滿足新時代的需求，就需要同時滿足前文提到的四個關(guān)鍵詞。這就要求我們需要跳出單一層面，以全局的維度去思考產(chǎn)品的設(shè)計。
因此，全局性將成為未來的關(guān)鍵，我暫且將這種思維方式稱為——全局性設(shè)計思維。
全局性設(shè)計思維，即在設(shè)計過程中，始終能以更高的維度去審視全局，思考當下的設(shè)計。
何以全局，如何跳出單一層面？這種思維方式的前提，是你要首先了解整個產(chǎn)品（亦或是物體、組織等）的運行方式，清楚的知道整個產(chǎn)品需要達到的目標，從而準確、合理地對針對目前的局部做出設(shè)計，并最終構(gòu)成整個完整的形態(tài)。
而「全局」的前提，是你擁有更高的眼界。你的眼界越高，你對產(chǎn)品、市場、甚至整個社會的洞察就越全面，你就能夠解決越大的問題，你能夠?qū)崿F(xiàn)的價值就越高。眼界是基礎(chǔ)，解決更大的問題是目標，而全局性設(shè)計思維則是實現(xiàn)這個目標的方式與過程。
全局性設(shè)計思維，可以幫助我們跳出產(chǎn)品的單一層面，去思考從產(chǎn)品層、到體驗層、再到開發(fā)層這一完成的整體。讓設(shè)計滿足體驗層的同時，滿足產(chǎn)品層面的目標，同時讓產(chǎn)品的設(shè)計與開發(fā)高度耦合，將整個產(chǎn)品串聯(lián)成一個完成的整體。
好了，講了這么多，我們具體應(yīng)該如何去運用全局性設(shè)計思維呢？
全局性設(shè)計思維，的應(yīng)用方式非常廣泛。它并不是一個固定的方程式，而是一個更高層面的指導(dǎo)性設(shè)計思維，能夠通過不同的形式，來幫助你解決問題。
1. 全局觀——在生活思考更多可能
在嘗試這種思維之初，我們可以通過一些小的實踐，去鍛煉這種思維能力。
在日常的生活、工作中，其實我們有大量的事物可以練習(xí)和運用這種思維方式。比如你在裝修一個大房子，需要去選擇房子里的家具。當你在購買家具時，常規(guī)的思維方式是：這個家具在某個房間時應(yīng)該是怎樣搭配的，所以我要購買什么樣形狀、顏色的家具，來滿足這個房間的需要。
但是，用這么思維方式來購買家具，將為對家具的靈活性與長期價值造成一定影響。從居住環(huán)境的長遠來看，也許這個家具有可能會因為某些原因，需要放到另一個房間，而它的形狀、尺寸、配色卻無法滿足其他房間的需要。最終，我們只能重新購買，或者接受一個風(fēng)格、尺寸上并不搭調(diào)的房間出現(xiàn)。
因此，當我們在購買家具時，我們是否可以利用全局性設(shè)計思維，從整體空間的角度出發(fā)（而非單個房間），去思考如何讓家具滿足更多空間需求。長此以往，我們不僅可以打造一個風(fēng)格統(tǒng)一的大空間，同時也能增加每個家具的利用率，在無形中也增加了這個家具本身的價值。
之所以舉家具這個例子，是因為這個原理與產(chǎn)品設(shè)計的原理非常類似。你可以將這個房子看成是整個產(chǎn)品，而家具則是不同的組件。通過不同的家具（組件），構(gòu)成了我們的不同功能模塊（房間/功能區(qū)），而所有的功能模塊則構(gòu)成了整個產(chǎn)品（房子）。
房子（產(chǎn)品體量）越大，房間/功能區(qū)（功能模塊）就越多，家具（組件）的多樣性、復(fù)雜性就越高，我們就越是需要從全局的角度去思考裝修的統(tǒng)一性（風(fēng)格體系化）和家具的通用性（樣式組件化）。只有這樣，我們才能更好地去打造一個風(fēng)格統(tǒng)一、體驗一致，同時又具備足夠自由調(diào)整空間的「大房子」。
2. 全鏈路——從全流程中重新思考設(shè)計
當你仔細地去理解許多非常著名的設(shè)計作品時。你會發(fā)現(xiàn)，幾乎所有優(yōu)秀的、巧妙的設(shè)計，往往在設(shè)計中都體現(xiàn)了全局性的設(shè)計思維。它不僅僅解決著當前的問題，同時也能夠解決更大的問題，發(fā)揮巨大的價值。
比如著名的坂茂衛(wèi)生紙的設(shè)計，看似普通，只是將衛(wèi)生紙的軸心從圓形改成了方形，但它卻成為了舉世聞名的、公認的好的設(shè)計。為什么呢？
我們先了解一下這個設(shè)計為什么好。
首先，傳統(tǒng)的圓形紙卷拉出來的紙會比你實際需要的更多。而方形紙卷則由于阻力的作用，讓你用得更少，從而起到了解決資源的作用。其次，在運輸過程中，圓形的紙卷之間會產(chǎn)生很大的空隙，而方形紙卷則能夠緊緊靠在一起，提升空間利用率，從而起到降低運輸成本的作用。
這簡單的設(shè)計，居然發(fā)揮了如此大的作用。
那么，為什么我們在設(shè)計時就沒有考慮到這些問題呢？因為我們從最開始，就沒有從「紙」的整個全流程來去思考問題。
讓我們「站的更遠一些」，紙這個商品，并非只是我們見到的在商店售賣的那一刻。它從工廠中制造完成，通過運輸送到每個超市中，當我們購買以后，它又會在很長一段時間內(nèi)，出現(xiàn)在衛(wèi)生間，陪伴你使用的每一刻。我們可以將整個流程分為 3 個場景，而每個不同的場景，又將會對紙本身有著不同的影響。
當我們能夠考慮到衛(wèi)生紙的運輸過程時，我們就可以通過設(shè)計去降低運輸成本；而當我們可以考慮到用戶的使用場景時，我們就可以通過設(shè)計，去提升阻力，降低使用量，間接地去提升用戶的使用體驗。而當我們通過全局性設(shè)計思維，可以同時解決這三個問題時，我們的設(shè)計就是好的設(shè)計，就擁有了更高的價值。
發(fā)現(xiàn)了嗎，為什么你沒有想到相同的設(shè)計方案？設(shè)計能力并不是關(guān)鍵，設(shè)計思維才是指引你做出好的設(shè)計的前提。當你能按上述的方式，去思考整個流程、不同的場景，我相信大多數(shù)的人都能夠設(shè)計出坂茂的設(shè)計方案，甚至比這個方案更好的解決方式。
通過前面的兩個案例，相信大家已經(jīng)了解了全局觀、全鏈路兩種應(yīng)用方式。
那么，我們最最最關(guān)心的問題——如何在業(yè)務(wù)中去使用這種思維呢？
在產(chǎn)品設(shè)計中，全局性設(shè)計思維也有著非常多樣化的使用方式和場景，在之后的文章中我也會講到很多應(yīng)用方式。但是，在所有的方式中，我認為最為有效的，便是以全局性設(shè)計思維，幫助產(chǎn)品去構(gòu)建一個完整的設(shè)計體系。
什么是設(shè)計體系？談及設(shè)計體系，大多數(shù)設(shè)計師會認為，設(shè)計體系就是設(shè)計規(guī)范?！覆痪褪钦覀€名次包裝一下規(guī)范嘛？」
我們?yōu)槭裁葱枰O(shè)計體系？它與設(shè)計規(guī)范有何不同呢？
設(shè)計規(guī)范是設(shè)計師最為熟悉的一種規(guī)范文檔。在產(chǎn)品設(shè)計時，優(yōu)秀的設(shè)計師通常都會建立設(shè)計規(guī)范。然而在實際的項目中，設(shè)計規(guī)范往往無法難以有效實施。比如在開發(fā)眼中，規(guī)范并不符合開發(fā)規(guī)則，過于碎片化。而產(chǎn)品經(jīng)理通常又不會去了解設(shè)計規(guī)范，因此在構(gòu)建產(chǎn)品框架時也常常隨意發(fā)揮。
很多項目做到最后，設(shè)計規(guī)范僅存在于紙面的意義，并隨著項目的發(fā)展逐漸混亂。為什么會這樣？
因為不同職能間的思考方式存在差別，設(shè)計規(guī)范對于其他職能來說經(jīng)常難以理解與運用，無法與其他職能形成有效聯(lián)動。
設(shè)計規(guī)范僅僅是基于視覺層面的規(guī)范，它是一個「平面」。而設(shè)計體系則是貫穿于產(chǎn)品的每個層面的、與產(chǎn)品深度結(jié)合的完整體系，它是「立體」的「有機生命體」。
設(shè)計體系的核心在于「體」，它是貫穿于整個產(chǎn)品的完整體系。設(shè)計體系由設(shè)計師創(chuàng)造，并深度融合于產(chǎn)品每個部分。它能夠讓產(chǎn)品更緊密、更統(tǒng)一、更有序，伴隨著產(chǎn)品的生長，與產(chǎn)品共同進化，并最終推動產(chǎn)品的發(fā)展。
創(chuàng)造并推動這一體系，則要求設(shè)計師需要更全面的能力。只有充分地去理解并參與產(chǎn)品的每個部分的設(shè)計，才能讓設(shè)計真正延伸至產(chǎn)品的每個部分。
而創(chuàng)造這一切的前提，便是全局性設(shè)計思維。
羅馬不是一天建成的，設(shè)計體系也是如此。設(shè)計體系的建立是一個漫長的過程（與產(chǎn)品體量相關(guān)），需要在前期投入更多的精力。但若是你的方法得當，就會在項目中越來越輕松，并以此形成良性循環(huán)，而你也會越來越有成就感。
如何正確地去構(gòu)建設(shè)計體系呢？我在這里總結(jié)了幾個要點：
樹立觀念
首先，樹立長期的體系化意識是必要前提。在任何項目中都要時刻保持體系化思維，著眼于整個項目，去尋找體系化的推動時機。當你在潛意識中擁有這種思維之后，你會自然而然的將其植入到設(shè)計中。
以解決問題為導(dǎo)向
體系化并非憑空建立，而是建立在解決問題的基礎(chǔ)之上。設(shè)計體系的本質(zhì)，就是由無數(shù)個標準化的解決方案，最終構(gòu)成的一個完整的體系。因此，我們要以解決問題為導(dǎo)向，以全局性思維去思考問題的本質(zhì)，最終建立適用于全局設(shè)計體系。
以小為始，重視質(zhì)量
腳踏實地，從小處入手，去發(fā)現(xiàn)產(chǎn)品中最基礎(chǔ)的一些問題。表面上看這些問題，對項目影響不大，但他們數(shù)量龐大，加在一起便會嚴重影響整個產(chǎn)品的效率。因此，我們要首先建立高品質(zhì)的基礎(chǔ)體系，再以此為基礎(chǔ)構(gòu)建更大的體系。
不要一開始就設(shè)法建立一個巨大的體系，那樣只會是一盤散沙，因為它的結(jié)構(gòu)是無序、混亂、不健康的。而這也是大多設(shè)計規(guī)范缺乏有效性和可實施性的根源。
梅拉妮·米歇爾的《復(fù)雜》一書中講到，任何復(fù)雜系統(tǒng)，都是由無數(shù)個體通過簡單的算法所構(gòu)成的。在算法領(lǐng)域也是同樣的原理，一個優(yōu)秀而強大的代碼，必然是由無數(shù)個小型模塊，通過簡單的算法耦合形成巨大的代碼矩陣?；A(chǔ)算法越強大、代碼結(jié)構(gòu)越「健康」，可擴展性和靈活性就越強，其能力就越強大。
從規(guī)范入手，由面到體
從本質(zhì)上來說，設(shè)計體系是由「多個層面的規(guī)范」組合而成的。因此，由設(shè)計師推動的體系化建設(shè)，往往最初都是從設(shè)計規(guī)范這一「單層規(guī)范」開始。但是，設(shè)計體系的建設(shè)需要將單層的規(guī)范，通過不同的方式，轉(zhuǎn)化為不同層面的規(guī)范，最終由面到體，形成體系化。
換位思考，尋求跨職能合作
設(shè)計體系的建立與維護，通常需要多職能的通力協(xié)作。因此，我們需要經(jīng)常換位思考，在完成設(shè)計的工作，幫助其他職能完成目標。只有這樣，才能得到更多的信任，并以此為基礎(chǔ)推動更多體系化的建設(shè)。
比如我在設(shè)計一個功能模塊的頁面時，首先會與不同模塊產(chǎn)品經(jīng)理進行交流，了解不同的業(yè)務(wù)需求，并從產(chǎn)品層面就開始尋求統(tǒng)一性與通用性。這樣的話，當其他模塊需要同一個功能時，前端便可以直接復(fù)用，同時后端的數(shù)據(jù)也可以進行互通。而在開發(fā)端，我也會詳細了解不同端的開發(fā)實現(xiàn)原理，務(wù)求設(shè)計規(guī)范與開發(fā)規(guī)則在理解上的一致性。這一既方便了開發(fā)理解規(guī)范，同時也從根本上提升了開還原的準確性。
長此以往，整個團隊就能夠建立良好的溝通和互信關(guān)系。有了這種默契，設(shè)計體系的推動就容易多了。
保持優(yōu)化，不斷成長
設(shè)計體系的另一個重要價值在于，它是可以伴隨產(chǎn)品不斷成長的。所有產(chǎn)品都是在發(fā)展中不斷變化的，過分僵硬的規(guī)則，將會對產(chǎn)品發(fā)展起到反作用。
在業(yè)務(wù)發(fā)展中，產(chǎn)品一定會不斷地加入新的功能模塊，并對原有頁面作出相應(yīng)的調(diào)整。因此，設(shè)計體系需要時刻與產(chǎn)品策略保持一致，及時與上下游職能溝通，不斷地針對產(chǎn)品發(fā)展進行優(yōu)化，以保證設(shè)計體系能夠符合產(chǎn)品的發(fā)展需要。
使用正確的推動方式
體系化最終能否成功實施，推動的方式至關(guān)重要。
在日常的項目中，大多數(shù)的業(yè)務(wù)方對設(shè)計體系了解甚少，也難以體會其中的價值。因此，他們通常會認為這些東西毫無必要，多數(shù)情況也不太愿意配合體系的推進。如果強行推進，反而會引起不必要的阻力，招致反感。那么，我們應(yīng)該如何正確的去推進設(shè)計體系建設(shè)呢？
為他人帶來價值：首先，尋找雙方共同的利益點是首要任務(wù)。也許是可以讓其他職能的工作更，也許能夠促使其達成 KPI，再不直接，那也一定能夠為整個產(chǎn)品帶來價值（不然你也沒必要推了）?？傊O(shè)計體系一定要能夠為他人帶來價值，這樣才能順利推進。否則人家憑什么要協(xié)助你推進，因為你美麗可愛嗎？你也可能比較可愛，但總歸是不能一直這么來吧。
在解決問題后提出方案：不要一開始就啪一下拋出一個「宏大的理想」，大部分人會覺得你不切實際。你只需要通過這個體系，幫助業(yè)務(wù)方先解決一個問題，然后再提出你解決方式的來源——一個嚴謹?shù)?、可驗證的、長遠價值的體系化解決方案。
尋找合適的推動時間：最后，對于設(shè)計體系來說，尋找到正確、恰當?shù)耐七M時機至關(guān)重要。比如當你在平時突然想要提出，對現(xiàn)有品牌進行升級時，大多數(shù)業(yè)務(wù)方都會認為你是沒事找事。而如果情況是在新的一年中，產(chǎn)品進行了概念的升級，這時候你將概念以及未來的品牌規(guī)劃融入在你的方案中，再去推進品牌升級，就會容易很多了。
-本文旨在引導(dǎo)大家更好地理解和學(xué)習(xí)這種思維方式，想要用好全局性設(shè)計思維，光靠講是遠遠不夠的。最重要的是能將這種思維帶入到產(chǎn)品中，為業(yè)務(wù)帶來更大的價值。
因此，在后續(xù)的幾篇文章中，我將通過不同類型案例，為大家深入講解全局性的具體實踐案例。
全局性設(shè)計思維 | 如何打造強大的品牌體系
為什么要建立品牌體系？品牌體系有哪些價值？設(shè)計師應(yīng)該如何推動品牌體系的建立？
本文將帶你了解網(wǎng)易智慧企業(yè)品牌體系的建設(shè)與推動全過程，聊一聊品牌體系建設(shè)的那些事兒～
FishDesign組件庫 | 從零到一構(gòu)建企業(yè)級UI組件庫
我們?yōu)槭裁匆⒔M件庫？在產(chǎn)品的什么階段需要組件庫？如何抽象業(yè)務(wù)組件？組件庫設(shè)計過程中有哪些重要的細節(jié)需要注意？
本文帶你深入了解，網(wǎng)易 Web 端組件庫——FishDesign 組件庫從零到一的完整全過程。
全局性設(shè)計思維 | 如何構(gòu)建事業(yè)部級大型設(shè)計體系
設(shè)計體系有什么價值？如何基于不同的業(yè)務(wù)建立設(shè)計體系？設(shè)計師如何推動體系化建設(shè)？在體系化過程中有哪些需要注意的地方？
我將會在這篇文章中，為大家介紹網(wǎng)易智慧企業(yè)設(shè)計體系構(gòu)建全過程。
樣式組件化+規(guī)范體系化，形成產(chǎn)品設(shè)計體系，整體重構(gòu)產(chǎn)品線。
結(jié)合品牌體系，推動事業(yè)部更多產(chǎn)品加入體系，形成智慧企業(yè) Web 端產(chǎn)品設(shè)計體系。
推動更多產(chǎn)品/業(yè)務(wù)融入體系中，讓智慧企業(yè)設(shè)計體系不斷成長，賦能業(yè)務(wù)發(fā)展。
好吧，似乎文章又寫得偏長了一些。只能說，想要認真地講清楚一個道理，確實不是一件容易的事情。
設(shè)計思維本身并不復(fù)雜，但想要講清楚它的背景、原理及價值，就需要把它整個掰開來講。而為了確保設(shè)計思維的可實施性，又需要經(jīng)過大量的實踐研究，自己能夠走通以后，才能與大家分享。
坦白講，似乎整個社會都在追求快節(jié)奏、碎片化閱讀。但若是因此而喪失了自己學(xué)習(xí)的節(jié)奏，那么等于是沒有節(jié)奏的，你的知識體系也將是東拼西湊，無法形成一套完整的體系。這也是我更新比較慢的原因之一，希望大家讀完文章，能夠切實地得到一些東西，這就很有意義。
文章來源：優(yōu)設(shè) 作者：Jady13
QQ 游戲中心經(jīng)過設(shè)計改版之后，我們重新設(shè)定了整體的世界觀——多彩的游戲宇宙。并且對多個模塊及內(nèi)容進行了新的設(shè)計升級，其中也包括重要的圖標圖形。
1. 延展思考
因此基于目前較為完整的圖標圖形，希望可以拓展出更多不一樣的設(shè)計內(nèi)容，并且可以應(yīng)用在不同的位置，例如空白頁、運營內(nèi)容、背景等等。
2. 問題分析
基于目前的圖形可以很明顯的得到 2 個問題：
3. 設(shè)計啟發(fā)
3D作為 2020 的主流設(shè)計趨勢之一，可以很好地表達設(shè)計氛圍。因此想嘗試跨次元的設(shè)計方式，從 3D 圖形的角度去思考，嘗試更多可能性。
下面主要是分享我在制作 3D 圖標中的一些方法和流程，以及 2D 與 3D 圖形設(shè)計中思考的差異性，希望可以跟大家互相學(xué)習(xí)，一起探討這方面的設(shè)計。
雖然是 3D 的圖標，但實際上使用到的軟件包括有：Cinema 4D（C4D）、Sketch、Photoshop（PS）、illustrator（AI）。
整體的大概流程：
3D 與 2D 最大的差別在于多一個維度來表達圖形，因此我們在 2D 向 3D 轉(zhuǎn)化的過程中，需要思考一些基本的原則，并且結(jié)合這些規(guī)則，降低 3D 圖標與 2D 圖標違和感。在這次的 3D 圖標中我總結(jié)了以下幾條基本規(guī)則。
1. 圓變球
在 3D 軟件中表達圓有 2 種方式：球體、圓柱體。在實際的設(shè)計中，我們需要根據(jù)實際情況判斷是否變成球體或者圓柱體，這里建議單體呈現(xiàn)的圓形設(shè)計成球體，在這種情況下球體相比圓柱體更能表達圓形的視覺感受。
例如下面氣泡的例子，球體化的表現(xiàn)比圓柱體化的表現(xiàn)更加飽滿，光影效果更加豐富。
2. 方變塊
與上面的規(guī)則比較接近。當我們在 2D 圖標中使用矩形之類的圖形，建議使用立方體來表達。優(yōu)點：立方體可以增加圖標上的細節(jié)表現(xiàn)；增加厚度更有利于光影的表達。
例如下面禮物的圖標，我們在實際的 3D 場景下應(yīng)該更貼合現(xiàn)實生活中的認知，設(shè)計成禮物盒子的效果。
3. 結(jié)合實際認知
除以上的 2 種建議之外，我們在實際建模的時候還需要結(jié)合實際認知而定。例如金幣、游戲卡的設(shè)計應(yīng)該是帶有厚度的片形；錢包設(shè)計成折疊的效果。
4. 適當簡化圖形
2D 圖標向 3D 圖標的轉(zhuǎn)換過程中，需要適當進行簡化，一些不必要的內(nèi)容可以適當進行刪減。主要的目的是：
5. 增強空間思維
2D 的圖標只有一個平面，因此大部分情況下是一種「紙片性」的思維，常規(guī)的 2D 向 3D 的轉(zhuǎn)換思維是增加厚度，但實際上出來的效果并不理想。因此在轉(zhuǎn)換的過程中，需要使用空間的思維去思考，在 3 維的空間中應(yīng)該是怎么樣的。例如下載和收件箱的圖標，常規(guī)的思維可能是在 2D 的圖標上增加厚度，但轉(zhuǎn)換成空間思維就是讓其具有立體感和空間感的形體。
6. 圖標狀態(tài)補充
在實際建模的中會發(fā)現(xiàn)，很多模型在靜態(tài)下是可以進行簡單處理的，但結(jié)合動態(tài)或?qū)嶋H認知，就需要相關(guān)細節(jié)狀態(tài)補充。例如禮物和寶箱圖標的開蓋效果，因此把實際的蓋子和盒子/箱子的模型做出來，以便于動畫的實際表達。
在進入 C4D 之前，需要清楚不同圖形可以使用什么方式建模，因此我們可以進行一個簡單的分類，分為：常規(guī)圖形和異形。兩種圖形在建模中的方式會有一些小差異，當然一個圖標也可能包含這兩種類型，因此實際操作中可以靈活處理。
1. 常規(guī)形：使用基礎(chǔ)物體建模
部分簡單的有規(guī)則的圖形，可以直接使用 C4D 的基礎(chǔ)物體（例如：立方體、球體、柱狀體、錐體等），通過對基礎(chǔ)物體的調(diào)整后得到模型，例如下面的圖形。
案例展示
2. 異形：AI路徑+擠出
在實際操作的過程中發(fā)現(xiàn)部分模型較難通過基礎(chǔ)形調(diào)整得到，或是直接建模會比較耗時。因此我們可以導(dǎo)入 AI 路徑再擠出的方式來得到我們的模型。例如下面的圖形
案例展示
基于以上的以上 2 種類型的圖形，這里分享一下制作的過程和心得。可能不夠全面，但希望大家可以一起來補充互相學(xué)習(xí)。
1. 對齊中心點
基礎(chǔ)建模對齊中心軸點是一切開始的重中之重，這里會涉及到很多后續(xù)的調(diào)整和其他命令的應(yīng)用（例如擠出、對稱等命令）。例如一些中高階的人物建模也是非常依賴中心點對齊來實現(xiàn)對稱命令的。
2. 結(jié)合圖像
在 C4D 視圖本身具有多視圖，可以結(jié)合不同視圖導(dǎo)入不同視角的平面結(jié)構(gòu)進行制作，常見情況下的建模可以導(dǎo)入三視圖（例如角色、人物之類的）。而圖標相對來說是很簡單的，所以這里只應(yīng)用正面視圖即可，其他的視角可以自行腦補后制作。
結(jié)合圖像的好處：
操作流程：正視圖下快捷鍵 shift+V 調(diào)出視圖背景——選擇背景——添加圖像?；蛟谝晥D選項中調(diào)出，然后配置即可。
3. 結(jié)合路徑
如上圖標類型中的描述，部分異形的圖標如果直接在 C4D 中繪制會相對耗時，因此我們可以結(jié)合路徑的方式，再使用擠出的命令來實現(xiàn)我們想要的模型，這樣可以大大提升異形物體建模的效率。
C4D 中對 AI 的圖層只會讀取顏色的邊緣，然后生成路徑。因此在 AI 中編輯的路徑，依據(jù)實際的情況選擇填充或者描邊，然后再拖拽進 C4D。如下產(chǎn)生的效果對比，左邊為填充圖形，右邊為描邊圖形。
操作流程：使用 AI 導(dǎo)出 8.0 版本的路徑——拖拽進 C4D——添加擠出命令——設(shè)置擠出高度及封頂樣式。
4. 使用變形器
一些簡單的形變可以通過變形器的應(yīng)用，得到我們想要的造型。例如下面的案例，外星人臉是在圓形的基礎(chǔ)上使用 FFD 進行調(diào)整，而寶箱則在方形的基礎(chǔ)上使用錐化來達到圓弧的效果。
C4D 的渲染效果主要是依賴于材質(zhì)和燈光的配合，熟練者往往可以依靠經(jīng)驗有效率的制作，但我們也可以通過鍛煉總結(jié)出一些常用的材質(zhì)參數(shù)或者布光的位置來提率。因此我也從這次的 3D 圖標制作中總結(jié)了一套關(guān)于材質(zhì)和布光的方法。
C4D 場景的主光源我們可以通過全局光照+天空的方式來營造整體的氛圍，這組光的特點在于具有比較柔和的效果，并且模擬自然的環(huán)境光效。
全局光照開啟后，需要依賴燈光、天空光來對物體進行照射，如果設(shè)定后未增加燈光或者天空，在渲染時只能渲染出一片黑色。（全局光照——主要是模擬真實的光照效果，通過光源投射到物體上再經(jīng)過無數(shù)次的反射和折射出來的效果，因此也能解釋為什么只加全局光照渲染不出來內(nèi)容。）
操作流程：渲染設(shè)置——效果——全局光照
添加天空增加天空作為基礎(chǔ)光照補充
操作流程：地面快捷入口——選擇天空——添加材質(zhì)球——勾選發(fā)光——添加 HDR 貼圖。
下面通過一些案例對比來看看全局光照及天空的對比效果
全局光照-開和關(guān)的差異
從下面的案例我們可以明顯看到差別，全局光照關(guān)閉后的圖標相對暗淡一些，整體圖標的光反射也相對減弱了許多。
有無天空的差異
天空有助于增強圖標的光感，添加天空后整體圖標的細節(jié)和質(zhì)感也相對更加豐富。相對，無天空整體圖標質(zhì)感則有所下降。
天空是否增加HDR貼圖的差異
添加 HDR 貼圖可以增強場景內(nèi)物體的環(huán)境反射，讓物體材質(zhì)更加豐富增強細節(jié)質(zhì)感。在一些強反射的場景下非常依賴 HDR 貼圖的使用。從以下案例對比，可以明顯看到差異性。
整體添加三盞燈光來營造整體的場景氛圍。主要分為：主光（最強）、補光（增強陰影面的亮度）、背光（補充背面環(huán)境的光源，增強環(huán)境光氛圍，勾勒輪廓）。在實際的場景中可以根據(jù)實際的反射效果和氛圍，調(diào)整燈光的位置、與物體的間距、明暗度。
燈光對于物體的作用會隨著顏色的差異，產(chǎn)生的光亮度也會有所差異，因此在實際的使用過程中，對于燈光的位置、反射的細節(jié)都可以進行微調(diào)來達到最優(yōu)的效果。
色相的對比：不同色相在同樣的燈光作用下產(chǎn)生的效果具有稍微較小。
明暗的對比：深色和淺色在同樣的燈光作用下產(chǎn)生的效果差別較大。
實際案例對比：從下面的實際案例對比可以明顯看出同樣燈光下不同色相的明顯差別，綠色的兩部產(chǎn)生過度曝光。因此可以通過調(diào)整燈光的距離或者亮度來解決這一問題（如上面燈光分布建議）。
3D 圖標由于相對簡單，材質(zhì)上主要使用顏色和反射的配合就可以得到不錯的質(zhì)感。當然如果希望在質(zhì)感表現(xiàn)上更加豐富，亦可考慮增加其他的內(nèi)容項來進行補充
顏色的設(shè)定
圖標的顏色基本上與原圖標的顏色保持一致，但部分顏色但實際渲染效果會存在些許差異，因此我們在材質(zhì)上也可以根據(jù)視覺效果進行微調(diào)，視覺上保持統(tǒng)一的顏色感受。例如禮物的圖標，如果按原來的顏色，亮部會過渡曝光，因此適當提高了亮部顏色的飽和度。
顏色偏差
在 3D 的場景內(nèi)是通過各種光與顏色的反射而成的，因此即便同樣的顏色，在實際渲染出來的 3D 圖標和 2D 圖標也會存在一定顏色偏差。
反射是本次 3D 圖標中材質(zhì)非常重要的一環(huán)，基本的效果都是來源于對反射的設(shè)定。整體主要設(shè)定了反射的類型、粗糙度、反射強度、高光強度、層遮罩的顏色。由于圖標的顏色并不完全一致，因此在粗糙度、反射強度、高光強度是一組動態(tài)的參數(shù)。
參數(shù)變化的對比
如下面的案例，針對不同顏色的圖標在粗糙度、反射強度、高光強度上都有差異性，因此不是說設(shè)定好一組參數(shù)之后就那個完全適用所有的顏色，因此這里會根據(jù)實際情況調(diào)整，但整體的視覺效果保持一致。
層遮罩的設(shè)定差異
除了基礎(chǔ)的反射類型及參數(shù)，還需要在層遮罩中添加菲涅耳來增強反射的豐富度。默認的菲涅爾是一組黑白的顏色材質(zhì)，我們可以通過調(diào)整暗部的顏色來增強圖標的顏色飽和度和豐富度，如下案例對比。
靜態(tài)的 3D 圖標顯得精致，增加動效之后的 3D 圖標則除精致外，還更加富有趣味性和新鮮感。3D 的動效與 2D 有著明顯的差別，可以更多維度地思考物體的運動軌跡、變化方式。
首先我們需要根據(jù)不同造型對需要制作動效的圖標進行簡單的分類，這個分類的主要作用在于明確不同圖標的動效設(shè)計方式，為動效的設(shè)計方式進行鋪墊。根據(jù)已有的圖標劃分為：單體形、組合型、拼裝形。
單體形
圖標以單個或單組形體呈現(xiàn)，或者整體造型屬于某個已存在的事物或者形體，整體圖形內(nèi)容具有不可切割性。
組合型
圖標通過兩組或兩組以上的圖形內(nèi)容組合而成，圖標由主形（圖標實際的外輪廓造型）和點綴圖形（用于圖標表意或者提升圖形內(nèi)涵）組合而成的圖標，圖標可進行拆分或者重組后形成動效。
拼裝形
圖標本身可能在現(xiàn)實中不存在的事物或物體，通過創(chuàng)意思考而得到的圖形，圖標的動效更具有可發(fā)散性和可重塑性。
結(jié)合上面的類型差，在設(shè)計動效的時候也會稍稍不同。重點在于表達不同的圖標具有的特性，因此我們可以根據(jù)這些特性去設(shè)計圖標的動畫方式。
自體運動
對應(yīng)單體圖形，圖標動效通過自身的位移、旋轉(zhuǎn)、形變而產(chǎn)生，這類圖標的動效比較靠近現(xiàn)實生活中接觸的感知或圖形動效本身具有普適性認知。例如火箭升空、UFO 飛碟、放禮炮、開寶箱等。
組合運動
對應(yīng)組合圖形和拼裝圖形，多圖形運動組合而成，圖標的多個部件可從不同軸向開始進行不同的軌跡運動，最終進行完整的圖標融合。各個部件本身可能也存在位移、旋轉(zhuǎn)、形變等動效，可以更大程度豐富圖標的動效表現(xiàn)。
部件運動
整體動效相比前面兩種類型較為簡單，通過某個圖標上的部件運動來表達動效的內(nèi)容，因此這個部件需要是圖標上較為明顯的圖標特征，這樣更能讓人具有記憶點。
音效是這次 3D 圖標設(shè)計的點睛之筆，結(jié)合音效可以更加豐富地表達圖標動效的趣味性。不同的圖標動畫反饋出來的音效是不一樣的，因此賦予對應(yīng)的音效反饋才是更合理的表達。
1. 選擇音效
在實際的配置音效的過程中發(fā)現(xiàn)，部分圖標比較難找到相關(guān)聯(lián)的音效。但我們可以通過較為類似或者可以表達出該圖標動畫過程中的聲音反饋的音效。例如活動小禮炮用的是開葡萄酒塞的聲音，開寶箱用的是開門的聲音，飛碟（UFO）用的是一組電子音效等等，并且從相關(guān)聲音中竊取其中一段需要的。
2. 組合音效
部分圖標的動畫效果很難通過一條音效進行表達，因此需要疊加 2 組或者 2 組以上的音效來豐富整體的感受。例如手柄人圖標疊加了三組不同的音效來表達，游戲卡疊加 2 種不同的音效。
3D 的圖標或 3D 類型的內(nèi)容如何與 UI 結(jié)合？相信大家也時有思考這方面的內(nèi)容?；谶@次的 3D 圖標設(shè)計，我也進行了初步的嘗試，從幾個方面來簡單聊聊這方面的內(nèi)容。
1. 3D圖標對于UI設(shè)計的作用
在嘗試之前，我們需要明確 3D 內(nèi)容對于 UI 設(shè)計作用是什么？我簡單總結(jié)了幾個關(guān)鍵點：
2. 3D ICON X Tab bar
當我們設(shè)計 Tabbar 的時候，首先想到的表現(xiàn)方式往往是有趣的圖標圖形設(shè)計、結(jié)合動效之類的方式。但我們或許也可以考慮使用 3D 的圖標+動畫的方式來表達我們的設(shè)計。
3. 3D ICON X 運營內(nèi)容
一些相對簡單的運營內(nèi)容，我們可以考慮將元素進行 3D 化設(shè)計，這樣可以一定程度增強整體運營的視覺表現(xiàn)力。
4. 3D ICON X 空白頁插圖
3D 插圖是 2020 的設(shè)計趨勢之一，結(jié)合 3D 的插圖讓整體的設(shè)計更加具有氛圍感。
5. 3D ICON X COVER
將背景中的某些元素結(jié)合 3D 圖形進行設(shè)計，讓整體的氛圍更加具有空間感和立體感。
本次結(jié)合實際項目中的內(nèi)容進行不同維度的設(shè)計嘗試，并且希望，可以從中去尋找到更多設(shè)計的可能性和突破點。當然這只是系統(tǒng)化設(shè)計思考中的一步，但可以啟發(fā)后續(xù)更加深入的 3D 設(shè)計探索。
文章來源：優(yōu)設(shè) 作者：ID設(shè)計站
前言
前面幾篇我們就 Redux 展開了幾篇文章，這次我們來實現(xiàn) react-thunk，就不是叫實現(xiàn) redux-thunk 了，直接上源碼，因為源碼就11行。如果對 Redux 中間件還不理解的，可以看我寫的 Redux 文章。
實現(xiàn)一個迷你Redux（基礎(chǔ)版）
實現(xiàn)一個Redux（完善版）
淺談React的Context API
帶你實現(xiàn) react-redux
為什么要用 redux-thunk
在使用 Redux 過程，通過 dispatch 方法派發(fā)一個 action 對象。當我們使用 redux-thunk 后，可以 dispatch 一個 function。redux-thunk會自動調(diào)用這個 function，并且傳遞 dispatch, getState 方法作為參數(shù)。這樣一來，我們就能在這個 function 里面處理異步邏輯，處理復(fù)雜邏輯，這是原來 Redux 做不到的，因為原來就只能 dispatch 一個簡單對象。
用法
redux-thunk 作為 redux 的中間件，主要用來處理異步請求，比如：
export function fetchData() {
return (dispatch, getState) => {
// to do ...
axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
console.log(res)
})
}
}
redux-thunk 源碼
redux-thunk 的源碼比較簡潔，實際就11行。前幾篇我們說到 redux 的中間件形式，
本質(zhì)上是對 store.dispatch 方法進行了增強改造，基本是類似這種形式：
const middleware = (store) => next => action => {}
在這里就不詳細解釋了，可以看 實現(xiàn)一個Redux（完善版）
先給個縮水版的實現(xiàn)：
const thunk = ({ getState, dispatch }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState)
}
return next(action)
}
export default thunk
原理：即當 action 為 function 的時候，就調(diào)用這個 function (傳入 dispatch, getState)并返回；如果不是，就直接傳給下一個中間件。
完整源碼如下：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
// 如果action是一個function，就返回action(dispatch, getState, extraArgument)，否則返回next(action)。
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument)
}
// next為之前傳入的store.dispatch，即改寫前的dispatch
return next(action)
}
}
const thunk = createThunkMiddleware()
// 給thunk設(shè)置一個變量withExtraArgument，并且將createThunkMiddleware整個函數(shù)賦給它
thunk.withExtraArgument = createThunkMiddleware
export default thunk
我們發(fā)現(xiàn)其實還多了 extraArgument 傳入，這個是自定義參數(shù)，如下用法：
const api = "https://jsonplaceholder.typicode.com/todos/1";
const whatever = 10;
const store = createStore(
reducer,
applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);
// later
function fetchData() {
return (dispatch, getState, { api, whatever }) => {
// you can use api and something else here
};
}
總結(jié)
同 redux-thunk 非常流行的庫 redux-saga 一樣，都是在 redux 中做異步請求等副作用。Redux 相關(guān)的系列文章就暫時寫到這部分為止，下次會寫其他系列。
一、前言
前端的模塊化規(guī)范包括 commonJS、AMD、CMD 和 ES6。其中 AMD 和 CMD 可以說是過渡期的產(chǎn)物，目前較為常見的是commonJS 和 ES6。在 TS 中這兩種模塊化方案的混用，往往會出現(xiàn)一些意想不到的問題。
二、import * as
考慮到兼容性，我們一般會將代碼編譯為 es5 標準，于是 tsconfig.json 會有以下配置：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
}
}
代碼編譯后最終會以 commonJS 的形式輸出。
使用 React 的時候，這種寫法 import React from "react" 會收到一個莫名其妙的報錯：
Module "react" has no default export
這時候你只能把代碼改成這樣：import * as React from "react"。
究其原因，React 是以 commonJS 的規(guī)范導(dǎo)出的，而 import React from "react" 這種寫法會去找 React 模塊中的 exports.default，而 React 并沒有導(dǎo)出這個屬性，于是就報了如上錯誤。而 import * as React 的寫法會取 module.exports 中的值，這樣使用起來就不會有任何問題。我們來看看 React 模塊導(dǎo)出的代碼到底是怎樣的（精簡過）：
...
var React = {
Children: {
map: mapChildren,
forEach: forEachChildren,
count: countChildren,
toArray: toArray,
only: onlyChild
},
createRef: createRef,
Component: Component,
PureComponent: PureComponent,
...
}
module.exports = React;
可以看到，React 導(dǎo)出的是一個對象，自然也不會有 default 屬性。
二、esModuleInterop
為了兼容這種這種情況，TS 提供了配置項 esModuleInterop 和 allowSyntheticDefaultImports，加上后就不會有報錯了：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
}
}
其中 allowSyntheticDefaultImports 這個字段的作用只是在靜態(tài)類型檢查時，把 import 沒有 exports.default 的報錯忽略掉。
而 esModuleInterop 會真正的在編譯的過程中生成兼容代碼，使模塊能正確的導(dǎo)入。還是開始的代碼：
import React from "react";
現(xiàn)在 TS 編譯后是這樣的：
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
編譯器幫我們生成了一個新的對象，將模塊賦值給它的 default 屬性，運行時就不會報錯了。
三、Tree Shaking
如果把 TS 按照 ES6 規(guī)范編譯，就不需要加上 esModuleInterop，只需要 allowSyntheticDefaultImports，防止靜態(tài)類型檢查時報錯。
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"allowSyntheticDefaultImports": true
}
}
什么情況下我們會考慮導(dǎo)出成 ES6 規(guī)范呢？多數(shù)情況是為了使用 webpack 的 tree shaking 特性，因為它只對 ES6 的代碼生效。
順便再發(fā)散一下，講講 babel-plugin-component。
import { Button, Select } from 'element-ui'
上面的代碼經(jīng)過編譯后，是下面這樣的：
var a = require('element-ui');
var Button = a.Button;
var Select = a.Select;
var a = require('element-ui') 會引入整個組件庫，即使只用了其中的 2 個組件。
babel-plugin-component 的作用是將代碼做如下轉(zhuǎn)換：
// 轉(zhuǎn)換前
import { Button, Select } from 'element-ui'
// 轉(zhuǎn)換后
import Button from 'element-ui/lib/button'
import Select from 'element-ui/lib/select'
最終編譯出來是這個樣子，只會加載用到的組件：
var Button = require('element-ui/lib/button');
var Select = require('element-ui/lib/select');
四、總結(jié)
本文講解了 TypeScript 是如何導(dǎo)入不同模塊標準打包的代碼的。無論你導(dǎo)入的是 commonJS 還是 ES6 的代碼，萬無一失的方式是把 esModuleInterop 和 allowSyntheticDefaultImports 都配置上。
初始化
使用 https://github.com/XYShaoKang... 作為基礎(chǔ)模板
gatsby new gatsby-project-config https://github.com/XYShaoKang/gatsby-hello-world
Prettier 配置
安裝 VSCode 擴展
按 Ctrl + P (MAC 下: Cmd + P) 輸入以下命令,按回車安裝
ext install esbenp.prettier-vscode
安裝依賴
yarn add -D prettier
Prettier 配置文件.prettierrc.js
// .prettierrc.js
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: false,
singleQuote: true,
endOfLine: 'lf',
printWidth: 50,
arrowParens: 'avoid',
}
ESLint 配置
安裝 VSCode 擴展
按 Ctrl + P (MAC 下: Cmd + P) 輸入以下命令,按回車安裝
ext install dbaeumer.vscode-eslint
安裝 ESLint 依賴
yarn add -D eslint babel-eslint eslint-config-google eslint-plugin-react eslint-plugin-filenames
ESLint 配置文件.eslintrc.js
使用官方倉庫的配置,之后在根據(jù)需要修改
// https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.js
// .eslintrc.js
module.exports = {
parser: 'babel-eslint',
extends: [
'google',
'eslint:recommended',
'plugin:react/recommended',
],
plugins: ['react', 'filenames'],
parserOptions: {
ecmaVersion: 2016,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
es6: true,
node: true,
jest: true,
},
globals: {
before: true,
after: true,
spyOn: true,
__PATH_PREFIX__: true,
__BASE_PATH__: true,
__ASSET_PREFIX__: true,
},
rules: {
'arrow-body-style': [
'error',
'as-needed',
{ requireReturnForObjectLiteral: true },
],
'no-unused-expressions': [
'error',
{
allowTaggedTemplates: true,
},
],
'consistent-return': ['error'],
'filenames/match-regex': [
'error',
'^[a-z-\\d\\.]+$',
true,
],
'no-console': 'off',
'no-inner-declarations': 'off',
quotes: ['error', 'backtick'],
'react/display-name': 'off',
'react/jsx-key': 'warn',
'react/no-unescaped-entities': 'off',
'react/prop-types': 'off',
'require-jsdoc': 'off',
'valid-jsdoc': 'off',
},
settings: {
react: {
version: '16.4.2',
},
},
}
解決 Prettier ESLint 規(guī)則沖突
推薦配置
安裝依賴
yarn add -D eslint-config-prettier eslint-plugin-prettier
在.eslintrc.js中的extends添加'plugin:prettier/recommended'
module.exports = {
extends: ['plugin:prettier/recommended'],
}
VSCode 中 Prettier 和 ESLint 協(xié)作
方式一:使用 ESLint 擴展來格式化代碼
配置.vscode/settings.json
// .vscode/settings.json
{
"eslint.format.enable": true,
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[javascriptreact]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
}
ESLint 擴展會默認忽略.開頭的文件,比如.eslintrc.js
如果需要格式化.開頭的文件,可以在.eslintignore中添加一個否定忽略來啟用對應(yīng)文件的格式化功能.
!.eslintrc.js
或者直接使用!.*,這樣可以開啟所有點文件的格式化功能
方式二:使用 Prettier 擴展來格式化代碼
在版prettier-vscode@v5.0.0中已經(jīng)刪除了直接對linter的集成,所以版沒法像之前那樣,通過prettier-eslint來集成ESLint的修復(fù)了(一定要這樣用的話,可以通過降級到prettier-vscode@4來使用了).如果要使用Prettier來格式化的話,就只能按照官方指南中的說的集成方法,讓Prettier來處理格式,通過配置在保存時使用ESlint自動修復(fù)代碼.只是這樣必須要保存文件時,才能觸發(fā)ESLint的修復(fù)了.
配置 VSCode 使用 Prettier 來格式化 js 和 jsx 文件
在項目中新建文件.vscode/settings.json
// .vscode/settings.json
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
說實話這個體驗很糟糕,之前直接一鍵格式化代碼并且修復(fù) ESLint 錯誤,可以對比格式化之前和格式化之后的代碼,如果感覺不對可以直接撤銷更改就好了.現(xiàn)在必須要通過保存,才能觸發(fā)修復(fù) ESlint 錯誤.而在開發(fā)過程中,通過監(jiān)聽文件改變來觸發(fā)熱加載或者重新編譯是很常見的操作.這樣之后每次想要去修復(fù) ESLint 錯誤,還是只是想看看修復(fù)錯誤之后的樣子,都必須要去觸發(fā)熱加載或重新編譯,每次操作的成本就太高了.
我更推薦第一種方式使用 ESLint 擴展來對代碼進行格式化.
調(diào)試 Gatsby 配置
調(diào)試構(gòu)建過程
添加配置文件.vscode/launch.json
// .vscode/launch.json
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Gatsby develop",
"type": "node",
"request": "launch",
"protocol": "inspector",
"program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",
"args": ["develop"],
"stopOnEntry": false,
"runtimeArgs": ["--nolazy"],
"sourceMaps": false,
"outputCapture": "std"
}
]
}
的gatsby@2.22.*版本中調(diào)試不能進到斷點,解決辦法是降級到2.21.*,yarn add gatsby@2.21.40,等待官方修復(fù)再使用版本的
調(diào)試客戶端
需要安裝 Debugger for Chrome 擴展
ext install msjsdiag.debugger-for-chrome
添加配置文件.vscode/launch.json
// .vscode/launch.json
{
// 使用 IntelliSense 了解相關(guān)屬性。
// 懸停以查看現(xiàn)有屬性的描述。
// 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Gatsby Client Debug",
"url": "http://localhost:8000",
"webRoot": "${workspaceFolder}"
}
]
}
先啟動 Gatsby,yarn develop,然后按 F5 開始調(diào)試.
收集了一些工作中常用的工具。
如果你有好用的工具或者有意思的工具網(wǎng)站，要留言哦！
藍藍設(shè)計的小編 http://sillybuy.com