設(shè)計行業(yè)每天發(fā)生著翻天覆地的變化，隨著專業(yè)的發(fā)展，我們也在不斷的學(xué)習(xí)新的技巧和趨勢，但同時我們也要明白，設(shè)計中那些基礎(chǔ)的UI準(zhǔn)則，才是好的趨勢和風(fēng)格建立的基礎(chǔ)。今天我們就一起來聊聊做好設(shè)計最重要的能力之一：區(qū)分視覺層次。
視覺層次你可以理解為，通過將界面元素進行設(shè)計上的區(qū)分，引導(dǎo)用戶的注意力，并使用戶的注意力始終集中在頁面的關(guān)鍵地方。但是今天沒有一個方法可以一直控制用戶注意力，就像我們今天做設(shè)計一樣，不同的產(chǎn)品要用不同的設(shè)計手法去設(shè)計，才能達(dá)到幫助用戶分清主次的作用。
視覺層次不僅僅包含文字有關(guān)，它還包含我們的圖片，視頻按鈕以及文字以外的視覺元素。所以當(dāng)你設(shè)計一個網(wǎng)頁時候，除了網(wǎng)站整體的顏色，排版，圖片也能夠影響視覺層次。那么如何讓設(shè)計的層次更清晰，常用方法有哪些，今天我們一起來聊聊關(guān)于設(shè)計層次，希望可以幫助到你。
▲如上圖插畫的比重很大，在設(shè)計這種大的元素時，你的每個元素比例和細(xì)節(jié)處理都被同時放大了，我們可以看見這副插畫四周還運用了很多元素，讓頁面達(dá)到平衡，同時這個畫面和旁邊的文字場景也很好融合在一起。一個好的設(shè)計一定是通過視覺手段讓用戶理解信息更加準(zhǔn)確，在看完頁面文字和圖片后，很自然的引導(dǎo)到底部的按鈕，這才能算是一個很引人注目的設(shè)計。
▲Zenly：國外知名產(chǎn)品，在引導(dǎo)頁面設(shè)計時候運用紅色按鈕吸引用戶注意，在App主頁面里面，通過深藍(lán)色強調(diào)選中效果以及Tab.
▲Tiktok：抖音海外版本設(shè)計，整體UI部分非常簡單，頁面還是一如既往突出內(nèi)容為主，所以在整個設(shè)計上就通過色彩來強調(diào)頁面優(yōu)先級，比如拍攝，分享，選擇這些核心操作都通過色彩來引導(dǎo)完成任務(wù)。
▲如上圖，選中的黑色視覺重量最重，其次是藍(lán)色選中效果，最后是未選中的黑色，視覺重量幾乎我們每一個頁面中都會使用到。
▲headspace這款產(chǎn)品我非常喜歡，將情感化用到了極致，在頁面很多細(xì)節(jié)地方運用了不同的小橙人在背景上，視覺重量有輕有重，通過不同視覺重量來表達(dá)頁面內(nèi)容，非常巧妙。
▲在列表的表達(dá)上，不同視覺重量感受是不一樣的，比如左邊的視覺重量更輕一點，用戶關(guān)注圖形同時也去關(guān)注文字內(nèi)容，右邊這個視覺更重，更加引導(dǎo)用戶去點擊功能模塊內(nèi)容。
▲設(shè)計師熟悉的medium官方App設(shè)計，在正文閱讀時，同樣采用不同的視覺重點來突出重要信息，比如左邊通過字重以及文字背景綠色底色和正文對比，非常醒目。右側(cè)通過淺綠色作為背景強調(diào)突出。
▲同樣在一些重要位置，Medium也是運用視覺重量處理，如左圖通過頂部提示條提示可以通過語音播放，在右側(cè)付費文章通過行動按鈕引導(dǎo)用戶升級付費。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果說設(shè)計思維是設(shè)計師做設(shè)計的基礎(chǔ)，那么用戶思維就是你發(fā)現(xiàn)和解決問題的能力，到底什么是用戶思維？有沒有一些具體詳細(xì)的解釋讓我們了解它呢？請看分享。
用戶思維-環(huán)境
說到用戶思維第一個必須是用戶環(huán)境，環(huán)境分為設(shè)計師的設(shè)計環(huán)境，以及用戶使用你的產(chǎn)品環(huán)境，以及物理環(huán)境，是不是有刮風(fēng)、下雨的惡劣天氣。
1.你的設(shè)計環(huán)境
▲上圖是大多數(shù)設(shè)計師平時工作環(huán)境，每天早上我們帶著一杯星巴克，用著蘋果電腦，打開iMAC做著設(shè)計，效果圖每張圖片都精挑細(xì)選，我們也理所當(dāng)然的以為我們的用戶也和我們一樣，大家都是用的蘋果電腦，用的蘋果手機？
2.你心中用戶的環(huán)境
▲很多設(shè)計師作品集里面喜歡放用戶畫像，我們理想的用戶畫像都像上圖一樣，用戶都是白領(lǐng)，聰明學(xué)歷高，能很好的看明白你的設(shè)計，也會使用。就像我之前做支付寶，也曾以為用戶都是如上圖所示，其實不是。很多時候用戶的場景和我們想象中相差甚遠(yuǎn)。
3.用戶實際的環(huán)境
大家都是每天地鐵里面，在沒有wifi和4G的公交，地鐵里。也都是用的大屏設(shè)計，各種安卓手機。
▲舉個例子，這個「放大鏡」，做設(shè)計是人都知道是代表「搜索」但是在我們走訪線下實際場景時候，下沉到三四線城市的時候，很多時候人們并不認(rèn)識。
▲三四線城市用戶就覺得這個像「平底鍋」，不知道是什么意思，這種情況不在少數(shù)。
▲家里有一臺臺式電腦給父母用，有一次打電話給我說，有個流氓軟件經(jīng)常彈窗，我教他們?nèi)ノ业碾娔X，找到「設(shè)備管理器」卸載掉即可，結(jié)果，父母問什么是「設(shè)備管理器」？
所以，你會發(fā)現(xiàn)，用戶其實和我們心目中想象的相差甚遠(yuǎn)。我們覺得很基礎(chǔ)的互聯(lián)網(wǎng)知識，在他們那里可能會很復(fù)雜。
4.用戶設(shè)備環(huán)境
機型尺寸：安卓機的機型遠(yuǎn)遠(yuǎn)比我們想象的要多，各種超大屏，國內(nèi)廠商各種千奇百怪的屏幕，這些做設(shè)計都需要考慮。
操作系統(tǒng)：不同的操作系統(tǒng)，有華為系統(tǒng)，小米系統(tǒng)，魅族以及各種第三方定制的系統(tǒng)，這些系統(tǒng)上呈現(xiàn)效果，都是需要在設(shè)計時候需要去考慮的。
手機分辨率：安卓和蘋果屏幕各種大小，和主流的分辨率，設(shè)計時候如何適配，才能很好滿足主流用戶的體驗，也都需要設(shè)計師提前去規(guī)劃。
5.用戶物理環(huán)境
室內(nèi)環(huán)境：用戶在室內(nèi)使用我們產(chǎn)品時候，是不是應(yīng)該考慮如果是室內(nèi)，光線可以自動的調(diào)節(jié)。比如蘋果的系統(tǒng)，會根據(jù)用戶室內(nèi)室外的光線，調(diào)整亮度。
室外環(huán)境：用戶在陽光下使用，那么亮度變化，陽光下字體識別度等等，都應(yīng)該考慮進去。比如白天和晚上使用蘋果電腦時候的場景，是否有不同，比如iOS系統(tǒng)的設(shè)計，也是重復(fù)考慮用戶實際用戶場景。
網(wǎng)絡(luò)環(huán)境：用戶在有無限和5G情況下的體驗，是不是視頻直接播放，減少等待，當(dāng)用戶在地鐵手機網(wǎng)絡(luò)不好時候，視頻是不是支持緩存或者提醒用戶在使用流量。所以在產(chǎn)品設(shè)計時候，重復(fù)需要考慮用戶這種場景。
▲抖音和騰訊視頻，在用戶非wifi情況下，會提醒用戶當(dāng)前網(wǎng)絡(luò)環(huán)境，提示用戶注意流量使用，除了流量提醒，其實包括網(wǎng)絡(luò)加載不出來時候，如何設(shè)計產(chǎn)品策略都是需要設(shè)計時候考慮的。
噪音和隱私：比如在公共場合噪音大的時候，產(chǎn)品體驗該怎么優(yōu)化，有木有可能聲音自動調(diào)整大，比如微信當(dāng)你外面很吵時候，直接把語音放耳邊，就從外放變成內(nèi)放了。
▲比如支付寶理財頁面，資產(chǎn)和收益顯示可以隱藏金額，保護用戶隱私情況。以及支付寶在系統(tǒng)后臺時候，可以隱藏頁面。
總結(jié)下，我們平時設(shè)計中提到的用戶思維，其中關(guān)于環(huán)境的考慮就包括這些：
用戶實際環(huán)境
機型尺寸/2.操作系統(tǒng)/3.屏幕分辨率
用戶物理環(huán)境
1.室內(nèi)環(huán)境/2.室外環(huán)境/3/網(wǎng)絡(luò)環(huán)境/4.噪音和隱私
該怎么去做？
1.一部蘋果一部安卓機
之前在淘寶天貓時候，有些領(lǐng)導(dǎo)層會要求，必須使用安卓機作為主機，因為只有你去體驗安卓機，你才能發(fā)現(xiàn)頁面和產(chǎn)品有多少問題，蘋果本身的系統(tǒng)設(shè)計比較好，問題會比較少，但安卓系統(tǒng)沒有那么穩(wěn)定，容易出BUG；所以用安卓機能發(fā)現(xiàn)產(chǎn)品更多問題，同時也能讓我們更關(guān)注到真實用戶的感受。
2.換位思考將心比心
簡單來說就是做設(shè)計要有同理心，懂得如何去“換位思考，將心比心”。要學(xué)會用普通用戶視角去審視我們的產(chǎn)品問題，用理解的心態(tài)去理解用戶情緒；從用戶的角度看待問題，進而增加更多看待問題的角度，找到更多設(shè)計的空間，最后達(dá)到解決問題的目的。
之前支付寶時候，提倡管理層要每年去傾聽用戶聲音100小時，老板們需要每月抽時間去當(dāng)「客服」，看看用戶實際用我們的產(chǎn)品，有哪些難用的地方，從而做到真正從產(chǎn)品上解決用戶問題。
用戶思維-場景
1.理解用戶從哪里來要到哪里去
去過迪士尼的朋友都知道，人很多，那么如何讓這么多人，有效的去體驗更多的項目？就必須根據(jù)場景來設(shè)計，用戶從門口進來，去往哪里，每個項目的設(shè)計環(huán)節(jié)都需要思考清楚。
場景是從哪里來到哪里去：從一個場景到另外一個場景。我記得之前玩過一個迪士尼項目加勒比海盜，里面就把每個環(huán)節(jié)設(shè)計的很符合整體場景。
▲從入口，到航行過程中，到大海里大戰(zhàn)，以及故事的高潮，到最后的收尾，都是從一個時間到另外一個時間，就像在電影中親身經(jīng)歷。其實我們做設(shè)計又何嘗不是。用戶從一個入口，到最終成交轉(zhuǎn)化整個鏈路。
所以場景思維很重要就是關(guān)注用戶，每個鏈路的體驗環(huán)節(jié)，如何去發(fā)現(xiàn)其中問題，找到設(shè)計撬動點。
2.場景是帶時間維度的
時間維度很好理解，是用戶在完成任務(wù)整個過程中的行為，常見的有前，中，后。我們還是以案例來分析：
買之前：
▲認(rèn)知：用戶打開支付寶想買理財，但他很可能從來沒有買過理財產(chǎn)品，那么第一步他可能會去了解產(chǎn)品，了解里面的金融術(shù)語，比如七日年化，收益率等等。那么我們在設(shè)計時候，就要去思考，如何降低用戶的認(rèn)知，如何用一些淺顯易懂的文案讓用戶理解理財。
▲搜索：用戶通過第一步了解了各個理財特點，鎖定要買基金產(chǎn)品，然后這個過程中，他會去對比每只基金的收益情況，去尋找適合他的產(chǎn)品。
買之中：
▲判斷：用戶終于發(fā)現(xiàn)了一個比較符合他心中預(yù)期的產(chǎn)品，然后會去比較這產(chǎn)品的優(yōu)缺點，比如它最后想選擇，收益在6-8%的一只產(chǎn)品，然后會去思考到底買那一只合適。
▲下單：最后用戶選擇了這款收益為6%的產(chǎn)品，然后進行交易。
買之后：
▲查看：最后用戶購買成功了，購買后，他就會每天來看他這只產(chǎn)品的收益情況，每天的收益，每周收益，以及什么時候賣出去。
▲了解了用戶的購買狀態(tài)，以及場景的時間維度，我們就可以去觀察這些鏈路，去尋找一些設(shè)計線索，去發(fā)現(xiàn)問題解決問題，場景思維也能幫我們設(shè)計更好的決策。其實這個思維在電商中也同樣適用。
買之前：
▲認(rèn)知：雙11快到了，你在家門口地鐵，公交或者微博廣告里面，看見了雙11的一個產(chǎn)品廣告。其中一個商品吸引了你。
▲搜索：然后你打開淘寶APP，搜索這款產(chǎn)品，通過搜索的入口，進入到了店鋪頁面?；蛘吣阃ㄟ^外面的廣告頁面點擊到了商品店鋪頁面。
買之中：
▲判斷：你通過店鋪頁面，看見這個商品正在直播講解，你希望查看真實的商品情況，于是點進去，發(fā)現(xiàn)講解的內(nèi)容能讓你更好的了解了此商品，你決定去商品詳情頁準(zhǔn)備購買。
▲下單：后面你決定購買，直接淘寶下單付款。
買之后：
▲查看：買完后，你很想用上它，于是你開始查看物流，同時也在擔(dān)心如果質(zhì)量不好，你要如何發(fā)起七天無理由退款。
以上就是我們說的用戶思維里面的場景思維，我們需要了解用戶從哪里來到哪里去，同時還需要了解用戶購買前，購買中，購買后的心理變化，了解這個過程中的鏈路問題進行設(shè)計優(yōu)化。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
不知道大家有沒有這種情況，你和一個設(shè)計師合作，他源文件給到你的時候，你很崩潰，想找到其中一個元素圖層根本不知道在哪里，這個時候你再專業(yè)，技術(shù)再牛， 這個小細(xì)節(jié)都會讓你口碑下滑。確實是這樣，在職場中，你的每個交付物，都是代表你的專業(yè)水平。我見過一些優(yōu)秀的設(shè)計師，文件給過來的時候，圖層名稱，切圖，以及設(shè)計標(biāo)注都非常清晰，適配規(guī)則都寫的很清楚，專業(yè)度顯而易見。
我之前問過和我合作的開發(fā)，最喜歡和什么樣設(shè)計師合作，其實很多人都說過一個，就是圖層干凈，標(biāo)注清晰的設(shè)計師。很多設(shè)計師抱怨開發(fā)還原不給力，但是試問下你自己，今天你交付給開發(fā)的每一個樣式，對方是否能很清晰的找到。所以，在職場上，一定要注意這個細(xì)節(jié)，不要被貼上一個專業(yè)比較馬虎的標(biāo)簽。
很多設(shè)計師做設(shè)計以為設(shè)計源文件交付開發(fā)，這個項目就完事了，我之前也這么理解，但是在阿里后我轉(zhuǎn)變了這個觀點。要開始對落地頁面負(fù)責(zé)，意味著你做的圖，不止是效果圖好看，還要上線內(nèi)容也好看。
以電商設(shè)計來說，效果圖時候大家都選的很干凈的效果，很清爽的背景，但是上線后換上商家的圖簡直就沒法去看。
你心中的頁面效果圖上線后，和上圖一樣很干凈，清爽，讓人賞心悅目。
但其實最后上線環(huán)境是這樣的，頁面擁擠不堪，有很多廣告和牛皮癬，內(nèi)容繁雜。所以今天的設(shè)計師除了我們要把頁面做好看，同時還需要思考，這個效果呈現(xiàn)給用戶會是什么樣的效果，對內(nèi)容負(fù)責(zé)是我們每個人都需要去控制的。
很多設(shè)計師作品集和項目喜歡用很漂亮的美女帥哥圖片，確實大家都喜歡漂亮的東西，但是有時候太過了，看著就特別的假，很容易看成飛機稿。其實用照片也是有技巧的，這個簡單和大家分享幾個小技巧：
▲在頭像時候該放頭像就放頭像，不要放照片和插畫。另外圖片選擇時候，也可以選擇一些真實點圖片，比如可以用朋友微博上照片，或者微信頭像，可以挑一些好看的，那樣看著會更加自然。
▲網(wǎng)站里面照片都可以使用，而且都是比較真實的，你可以選擇皮膚顏色，性別等等，發(fā)設(shè)計稿中，會比我們找的明星帥哥美女要真實。
▲如果你今天做的產(chǎn)品是一個面向國內(nèi)的產(chǎn)品，那么照片就應(yīng)該是中國人，就不要出現(xiàn)國外照片。真實很重要，當(dāng)然這里有一些細(xì)節(jié)，就是照片不要太完美了這樣會產(chǎn)生虛假感，照片的清晰度最好足夠，別出現(xiàn)馬賽克。
▲一般在設(shè)計時候，特別是文字我們需要考慮兩種極端情況，文字最長的時候，文字最短的時候，如果忽略掉，你只按最佳效果設(shè)計，上線后就會出現(xiàn)問題，所以如果你設(shè)計文字最長，和文字最短時候，你都兼容到就不會出現(xiàn)太大問題。
▲在做金融產(chǎn)品適合，數(shù)字最大值和最小值也是容易被設(shè)計師忽略的地方，所以同樣的需要考慮最長的數(shù)字和最短的數(shù)字場景。
如想看到更多干貨內(nèi)容分享，可以添加wx：ddm7851，歡迎圍觀我票友圈～
可能很多人說，英文大小寫這個不是什么大事吧，但是還真是大事，我之前一個同事在內(nèi)部講方案述職時候，就因為一個英文單詞大小寫弄錯了，就被領(lǐng)導(dǎo)說粗心，后來領(lǐng)導(dǎo)還經(jīng)常拿這個事情來說，做設(shè)計粗糙，就這么一個下插曲，被貼了一個小標(biāo)簽。但是職場就是這樣，你任何一個細(xì)微的瑕疵都容易被放大。
做平面設(shè)計時候，或者做印刷時候我們都知道要去遵循一定色彩原理，比如潘通印刷色等等，但是在做產(chǎn)品設(shè)計時候，很多時候會出現(xiàn)設(shè)計師色彩亂用的情況，這個地方紅色淺一點，那個按鈕深一點，雖然你滿足了你當(dāng)前頁面的訴求，但是放到整個APP上來說，就是很亂。
所以，這也是為什么很多團隊都會去每年花很大精力做規(guī)范，規(guī)范的目的其實就是建立一把尺子，這把尺子讓今天這個產(chǎn)品設(shè)計有一套規(guī)則遵守，否則就會出現(xiàn)百花齊放。
▲在谷歌材料設(shè)計規(guī)范中，很清晰的描述了每個顏色的運用場景和使用方式，目的就是保證所有設(shè)計的一致性和統(tǒng)一性。
▲谷歌材料設(shè)計，對于不同產(chǎn)品會給出不同的配色建議，這樣的規(guī)范會讓整體的設(shè)計更加合理。所以設(shè)計師在做方案時候，一定要去遵循團隊設(shè)計及規(guī)則。
▲文字行高也是被很多設(shè)計師忽略的，不知道一堆文字怎么定義行高，一般的做法是行高=文字大小*1.5倍，這是比較通用的一些做法，當(dāng)然也有很多的閱讀軟件，行高可能設(shè)置更大一些。他們會用到黃金比例來設(shè)置行高。
▲很多人以為黃金比例就是1.618其實不是，除了黃金比外，其實還有白銀比例、鉑金比例、青銅比例這些都具有嚴(yán)格的比例性、藝術(shù)性、和諧性，并蘊藏著豐富的美學(xué)價值，好好利用，將會使你的作品變得更多高大上。
拿行高來說，除了常用的1.5倍，還可以是1.618倍還有1.732倍，這些數(shù)值在很多閱讀產(chǎn)品中都會大量運用到這種比例。
其實黃金比例除了可以定義這些字體行高以外，在尺寸上也可以去定義。
▲如果你設(shè)計中比例拿不準(zhǔn)的話，也可以通過這樣的黃金比例來控制你整個設(shè)計的比例尺寸，這樣會更加科學(xué)。
關(guān)注設(shè)計趨勢是好事，但是如果盲目的使用趨勢，就會讓頁面特別的亂。很多設(shè)計師頁面明明是扁平化的，上面都是用插畫營造著一個氛圍，但是看見最近C4D很火，然后就放了幾個C4D元素進去，這樣就會讓這個設(shè)計很混亂。
我之前天貓的導(dǎo)師，豆爸說過：做設(shè)計的時候可以先構(gòu)思一個世界，世界要和諧就需要有它運轉(zhuǎn)的的規(guī)則..
這個世界里面的規(guī)則會是什么呢？世界里面可能會有很多規(guī)則，字體，透視，光線，顏色，形狀 .... 可以拆解成每一個細(xì)節(jié)對應(yīng)到設(shè)計中就是它整體看起來會是怎樣的光線，元素，空間感 ……是立體的，扁平的，魔幻的，安靜的……
就像有不同風(fēng)格的電影 動畫一樣，扁平的動畫，木偶動畫、黏土動畫.... 為了讓這個世界和諧，就會要減少一些沖突。如果立體的變形金剛世界里面出現(xiàn)了一個二維的米老鼠 肯定不和諧，如果小清新的色彩世界里面出現(xiàn)了大紅大綠東北大棉襖配色，也會不和諧。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
體驗經(jīng)濟的時代已經(jīng)到來，無論是實體產(chǎn)業(yè)或是虛擬產(chǎn)業(yè)越發(fā)依賴于服務(wù)和體驗帶來的經(jīng)濟效益，作為互聯(lián)網(wǎng)從業(yè)者，深刻認(rèn)識到體驗的重量，從尊重用戶體驗到掌握體驗思維，于大多數(shù)角色而言都是一門必修課。
“附近的火鍋店味都差不多，不過A家服務(wù)員態(tài)度好好，而且還有好多免費小吃，吃完還能做美甲，吃它！
“下班一起去新開那家咖啡館打卡不？朋友圈看到裝修好有格調(diào)，甜點看起來也超精致，特別適合拍照呢！
“周末那家密室劇情挺一般的，不過場景氛圍還不錯，挺刺激的，關(guān)鍵是npc好帥，小姐姐也好美，還想去！
“師傅，麻煩稍微快點我趕時間估計要遲到了，“小伙子放心，坐穩(wěn)了”，8分鐘后，遲到前5分鐘，打卡成功。
——僅以此條向重慶全體出租車師傅致敬」
...
很熟悉吧？還有數(shù)不清類似的場景充斥在我們的身邊，近些年來，消費者對事物的評判標(biāo)準(zhǔn)有了翻天覆地的變化，一家餐廳對于顧客的價值，決定性因素不再是單一的菜品口味；服務(wù)員的顏值、裝修的格調(diào)、菜品是否精致、拍照好不好看、服務(wù)態(tài)度如何、有無明星打卡經(jīng)歷，甚至是吃飯免費做美甲這樣的邊際體驗都加入了顧客對餐廳的價值評判標(biāo)準(zhǔn)中，餐廳的效益與顧客的粘性甚至取決于這些邊際體驗；市場的高強度供給和國民經(jīng)濟效益的提升，為消費者帶來了更大的選擇空間，解決剛需不再是人們的唯一追求，“品質(zhì)“一詞開始走進大眾群體的生活，相比果腹而言，服務(wù)與體驗這類精神消費需求成為了新世代消費者所追逐的對象，同時也成為了評判事物價值的新機制。
當(dāng)下市場，商家、消費者與互聯(lián)網(wǎng)平臺形成新的內(nèi)容產(chǎn)業(yè)鏈，消費者通過平臺及商家不斷收獲各類峰值體驗，更有甚者還能以此獲利，而商家和平臺則收獲流量和經(jīng)濟效益，在人貨場的概念中形成生態(tài)閉環(huán)，可謂互相成就。而如何滿足顧客的精神消費需求以及怎樣制造更多更好的邊際體驗，成為企業(yè)的“新基建“，其帶來的效應(yīng)讓人著迷，在資本逐利的市場中，不乏企圖通過這樣的手段筑起高樓的群體。
“在當(dāng)下這個時代，消費趨勢從購買東西轉(zhuǎn)向了購買體驗。生產(chǎn)自動化導(dǎo)致東西越來越不值錢，買回家還占地方。很多高級消費在于購買體驗，比如旅游、參加音樂會，到現(xiàn)場觀看重大比賽。對于商家來說，用戶體驗就是商機，其帶來的最直接的好處就是提升黏性，產(chǎn)生利潤?！?《行為設(shè)計學(xué)》節(jié)選)
從剛需到服務(wù)，消費趨勢如此，用人趨勢也如此；在內(nèi)卷對互聯(lián)網(wǎng)行業(yè)深度滲透的環(huán)境下，設(shè)計師理應(yīng)保有危機意識，單向的剛需能力不再滿足于企業(yè)對設(shè)計師的價值認(rèn)可，如何打造自身對企業(yè)的“體驗”和“價值”成為大部分人的課題；我個人向來不主張設(shè)計師朝著所謂的“高復(fù)合性、UXD、全?！暗蕊L(fēng)尖能力看齊（高階人才請掠過），窄而精，精而深，深而廣，這樣的“以單向能力為主的樹形擴張則更適用于大多數(shù)站在塔尖下的設(shè)計師（個人認(rèn)為），以UI\UX設(shè)計師為例，如何以單向核心能力拓展分支技能呢？本文將以我的實際工作案例進行深度剖析，圍繞體驗思維和行為設(shè)計等分支技能如何在設(shè)計中實踐應(yīng)用，并以此構(gòu)建更具廣度和深度的設(shè)計解題能力。
案例：內(nèi)容電商產(chǎn)品，商品詳情頁迭代
方法：結(jié)合線下購書場景體驗，預(yù)測用戶行為，設(shè)計用戶行為動線。
路徑：尋找癥結(jié)>場景預(yù)測>產(chǎn)出>復(fù)盤
工欲善其事，必先利其器。第一件事，站在用戶視角和平臺視角分別對購買流程進行拆分對比，以此加深各個環(huán)節(jié)所對應(yīng)業(yè)務(wù)場景的理解認(rèn)知。
用戶視角購買流程：種草->品類決策->商品決策->購后交流；此流程會隨不同的用戶類型進行變化，例如帶有意向商品進入APP的用戶則省去種草、品類決策兩個環(huán)節(jié)；
平臺視角購買流程：售前->售中->售后3個階段，售前對應(yīng)種草，售中聚焦商品決策。
商品詳情頁是用戶發(fā)起購買行為的重要途徑，其本質(zhì)是售中環(huán)節(jié)的商品決策工具，是通過人工干預(yù)的手段，提高商品與消費者的連接與匹配效率，從而為產(chǎn)品獲得更高的收益；在滿足用戶基礎(chǔ)產(chǎn)品體驗的同時，也承載著平臺流量分發(fā)后的關(guān)鍵轉(zhuǎn)化任務(wù)。
廣義上的消費決策場景，大多聚焦在售中環(huán)節(jié)的商品決策，場景為用戶通過外部場景進入到商品詳情頁，判斷一個意向商品是否值得購買，決策的結(jié)果是收藏、加購或立即購買，當(dāng)然也可能直接離開；由此得出，商詳場景的核心體驗是通過有效的信息陳列，幫助用戶了解商品與價值判斷后積極的進行購買決策，而同時也是連接用戶與作者以及其他關(guān)聯(lián)商品的流量橋梁。 在理解場景的本質(zhì)后目標(biāo)變得清晰起來，為用戶設(shè)計一個好用的決策工具，為平臺設(shè)計一個有用的信息容器。
為用戶造工具，第一件事是剖析用戶：通過線上平臺購買商品，用戶的消費決策過程是怎樣的？(常規(guī)）
售中環(huán)節(jié)的信息構(gòu)建是用戶了解商品與自身匹配率并建立購買意愿的核心途徑，場景所具備的信息傳達(dá)能力對用戶的最終決策起到?jīng)Q定性作用；為給用戶帶來更好的購物體驗，我通過還原線下購物場景獲取靈感，構(gòu)建線上購書的行為模型，從而對商詳進行優(yōu)化，力求帶給用戶一個符合習(xí)慣認(rèn)知的、高效、有效的決策工具，同時思考為用戶帶來體驗效益的情景下，提前洞察可能出現(xiàn)的問題以及對業(yè)務(wù)場景進一步支撐的同時能否主動推進業(yè)務(wù)的發(fā)展。
分析消費者線下購書行為，通常為逛書店-拿起書-翻開書-查和問-做決定等五個階段。
分析消費者在線下的購物行為，結(jié)合業(yè)務(wù)場景構(gòu)建具有可行性的行為模型，通過行為模型教育用戶進入商詳場景后基于動線進行瀏覽，將信息獲取效率最大化，并以此提高商品與用戶的匹配效率。
現(xiàn)狀評估：基于行為模型，從信息關(guān)注度、信息傳達(dá)能力兩方面對框架結(jié)構(gòu)進行體驗測評。
首屏是用戶對場景建立認(rèn)知的核心方式，當(dāng)前商詳?shù)谝黄脸尸F(xiàn)的信息維度較多且落點分散，用戶的注意力被大量分散，無法引導(dǎo)其完成對商品和場景的快速認(rèn)知。
1.產(chǎn)品吸引力（氛圍、質(zhì)感、信息傳達(dá)能力
2.優(yōu)化信息結(jié)構(gòu)（信息關(guān)注度、信息深度）：教育用戶行為，降低用戶消費決策中的行為阻力，提高商品與用戶的匹配效率
3.設(shè)計最小可行性方案，將實施資源最小化，在業(yè)務(wù)規(guī)則的限制下得出最優(yōu)解。
結(jié)論：在新的場景中，基于行為模型對框架的優(yōu)化，信息結(jié)構(gòu)變得清晰，高效的信息傳達(dá)能力讓用戶在最短時間內(nèi)完成與商品的匹配決斷，縮短了用戶購買決策的體驗路徑；同時頁面的視覺質(zhì)感得以提升，用戶在決策過程中的愉悅度也得以相對提升，提高了產(chǎn)品吸引力。
詳解——信息關(guān)注度、傳達(dá)能力：通過調(diào)整首屏信息陳列的親密度主動對用戶注意力進行分配，清晰的信息結(jié)構(gòu)會引導(dǎo)用戶的視線按照行為模型獲取信息，當(dāng)用戶進入商詳場景后，會快速聚焦到頭部信息對商品進行基礎(chǔ)了解，并完成第一階段的決策(購買意愿)；
詳解——信息深度、行為阻力、降噪：將詳情信息字段雙行展示調(diào)整為7行極限展示，減少了首屏信息維度的數(shù)量，以此降低用戶首次進入場景后接觸到的信息噪音，同時降低了展開收起功能的操作頻率，滿足了部分用戶的閱讀需求，為決策中期可能產(chǎn)生的行為阻力做了減法。
詳解——產(chǎn)品吸引力：新增彩色背景提高了整體氛圍感，加上信息親密度的調(diào)整，界面整體視覺質(zhì)感的友好度和精致度都有不錯的呈現(xiàn)，同時決策按鈕的配色調(diào)整也企圖在調(diào)動用戶積極心理的能力上得到提升。
展示——設(shè)計結(jié)果（僅對首屏作展示）：
結(jié)合數(shù)據(jù)表現(xiàn)與體驗評估，整體體驗諸如商品認(rèn)知能力、匹配效率等得以提升，但關(guān)鍵轉(zhuǎn)化仍然不理想：
· 信息關(guān)注度：對用戶完成商品基礎(chǔ)了解建立購買意愿后的瀏覽動機存疑，決策中期的信息構(gòu)建仍有調(diào)整空間
· 信息的質(zhì)量：現(xiàn)有內(nèi)容策略缺乏說服力，無法滿足用戶對商品價值的深度評估，促進用戶決策的能力顯得不足
· 心智模型：表現(xiàn)力上，新版商詳帶給用戶的心智模型呈現(xiàn)為“類閱讀產(chǎn)品”，缺少有關(guān)交易屬性的信息，且信任力不足，導(dǎo)致了商品的不確定性。
從數(shù)據(jù)看：1-12s內(nèi)無法對首屏信息進行有效瀏覽吸收，表現(xiàn)出用戶對此處信息關(guān)注度較低，第二階段的詳細(xì)信息處字段冗長，滿足部分用戶閱讀需求的同時也引起了其他用戶的閱讀負(fù)擔(dān)，在一定程度上挑戰(zhàn)了用戶耐心，信息露出需要平衡。
基于行為模型設(shè)計的導(dǎo)航策略過于線性、理想化，在用戶實際進行購買決策時心理路徑存在線性和非線性兩種群體，所關(guān)注的信息也不盡相同。
方法：通過ELM（詳盡可能性模型）探索用戶的消費決策心理路徑，以此對方案進行調(diào)整優(yōu)化。
ELM模型認(rèn)為，人類被說服的模型有兩種，即中央路徑和邊緣路徑：
在中央路徑下：當(dāng)個人的動機和能力比較強的時候，人們會理性思考、仔細(xì)評估之后做出決策，知識水平較高或有相對性需求時往往傾向于理性的選擇；
在邊緣路徑下：當(dāng)個人的動機和能力比較弱的時候，人們滿足于當(dāng)下的認(rèn)知，通常不愿耗費精力對信息加以分析，且對信息內(nèi)容的真實性無法判斷，只能通過一些信息的外圍因素來決定該信息的可信度，從而涵蓋了感情因素，更容易被表面因素說服；
舉個例子：小明和小黃逛街時看到一家環(huán)境老舊卻不便宜的冷飲店，本應(yīng)嗤之以鼻的小明看到門口排起的長龍和精美的飲品包裝設(shè)計，讓他放下顧慮立即拉著小黃參與排隊購買飲品，他相信，大家都在買的就是好的；而排隊過程中，小黃則仔細(xì)觀察店內(nèi)環(huán)境衛(wèi)生以及店員的操作手法，同時上網(wǎng)查詢該冷飲店的資料和口碑，經(jīng)過對收集到的信息和眼前所看到的場景進行評估后，小黃覺得這個飲品不衛(wèi)生，決定放棄購買。在這個例子中，本應(yīng)嗤之以鼻的小明受到外在因素（生意好排長龍、他人行為、包裝好看）影響，做出了不理智的決策，是典型的快思維（邊緣決策路徑）。而小黃經(jīng)過親身觀察和上網(wǎng)查閱的手段對飲品衛(wèi)生做出的決策，也就是前文提到的慢思維（中央路徑）
兩條路徑處理的信息不同，在中央路徑處理的都是與信息質(zhì)量相關(guān)的線索，而在邊緣路徑中，處理的則是一些表象信息內(nèi)容。
結(jié)合場景梳理用戶決策的思考過程中的關(guān)注點：
內(nèi)容共建，決策參考：當(dāng)用戶產(chǎn)生購買行為時，首先是需要被說服的，無論是被他人說服，被廣告說服，還是被自己說服。討論區(qū)的建設(shè)，在交易場景連接了內(nèi)容側(cè)的業(yè)務(wù)，同時推動產(chǎn)品內(nèi)容質(zhì)與量的發(fā)展，并試圖通過言論促成“用戶說服用戶”的決策模式，同時滿足了中央路徑、邊緣路徑兩種用戶的信息供給。
強調(diào)心智，情緒體驗：將原本處于第二屏的交易信息前置，矯正整體用戶對界面認(rèn)知的心智模型，同時讓用戶了解商品信息后第一時間感知到購買權(quán)益及相關(guān)配送體驗，完善首屏的信任力、保障確定性，讓用戶具備“放心買”的心理；界面視覺的質(zhì)感優(yōu)化仍然以提高用戶愉悅度為主，企圖在決策過程中帶給用戶更好的邊際體驗，讓用戶在表象層面提升對產(chǎn)品的好感度，以信任力\好感度\平臺和用戶的內(nèi)容共建等方式在人因決策之外發(fā)揮促進購買決策的最大因果。
以上案例部分內(nèi)容以倒推形式進行復(fù)盤，是脫離數(shù)據(jù)之外的解題思考方式；希望我的文章能夠為感興趣的同學(xué)帶來新的思考，也期望體驗思維與行為設(shè)計能夠被更多設(shè)計師所熟知應(yīng)用。
設(shè)計源于生活，無論是購物、玩游戲或事社交，打破線上線下的場景壁壘進行觀察、思考，解題方式不乏在你身邊的生活場景中，人的行為始終具有參考價值。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
本篇文章橫向調(diào)研了 Fluent – Microsoft、Material Design – Google、Fiori – SAP、Lightning – Salesforce、Carbon – IBM、Alta – Oracle、Atlassian Design – Atlassian 等 10 余家企業(yè)級產(chǎn)品設(shè)計體系的響應(yīng)式設(shè)計部分，從設(shè)計策略、設(shè)計模式、實施模式、設(shè)計方案四個層面大致歸納了一些信息，旨在對響應(yīng)式設(shè)計有一個籠統(tǒng)的了解。
關(guān)于 Adaptive Design 與 Responsive Design先厘清兩個概念，關(guān)于響應(yīng)式設(shè)計通常會有兩個普遍認(rèn)識，即 Aaron Gustafson 與 Ethan Marcotte 分別在 2011 年自己的著作中提出的 Adaptive Web Design (AWD) 與 Responsive Web Design (RWD) 概念，它們的核心區(qū)別在于 AWD 針對不同的設(shè)備或屏幕尺寸定制化設(shè)計多個固定布局的尺寸，而 RWD 是同一套代碼做彈性的適應(yīng)，本質(zhì)上它們都在解決產(chǎn)品設(shè)計如何適應(yīng)于不同設(shè)備以及不同屏幕規(guī)格的問題，本篇所指的「響應(yīng)式設(shè)計」 概念包含了兩者，不做明顯區(qū)分，關(guān)于 Adaptive 與 Responsive 設(shè)計怎么界定以及具體的規(guī)則本篇也不進行展開。
提響應(yīng)式設(shè)計不得不提「移動優(yōu)先」設(shè)計策略，移動優(yōu)先的概念最早是 Google 在 2010 年世界移動大會上提出來的一種產(chǎn)品策略，基于 Google 對未來趨勢中移動設(shè)備將會逐漸擁有核心地位的判斷。后來「移動優(yōu)先」更多被提及是作為一種在響應(yīng)式設(shè)計中應(yīng)用的設(shè)計策略，它認(rèn)為在響應(yīng)式設(shè)計中優(yōu)先為屏幕限制更大的移動設(shè)備設(shè)計，再擴展到大屏幕的 PC 端是一種更有效的設(shè)計方法。
例如 Alta、Lightning、Fiori 均在設(shè)計體系中明確采用「移動優(yōu)先」的設(shè)計方法，F(xiàn)iori 尤其指出「移動優(yōu)先」專注核心功能，專注增強而非降級，提前考慮移動端更多的獨特特性以及異常情況，能提供更好的體驗。Material Design 可能算是移動優(yōu)先的最佳實踐，它本身就誕生于 Android 平臺，而后再通過大量響應(yīng)式規(guī)則擴展到桌面及 Web 端，使得 Material 在多端都擁有一致貫穿的良好體驗。
（Material Design 的響應(yīng)式設(shè)計）
「移動優(yōu)先」本質(zhì)上是基于一種「增強」的設(shè)計思想，一個產(chǎn)品如果要同時適應(yīng)于不同的設(shè)備，一直以來有兩種策略：優(yōu)雅降級 vs. 漸進增強，后者認(rèn)為先從最小和最受限制的低級設(shè)備（移動設(shè)備）入手，再為更高級的設(shè)備（桌面設(shè)備）增強信息和交互，這意味著在更多限制下，迫使設(shè)計考慮如何減少、匯總，分組信息，有利于聚焦核心信息以及為更多限制考慮。
然而移動設(shè)備已不再是「低級設(shè)備」，F(xiàn)iori 盡管強調(diào)「專注增強而非降級」，但它同時提出的「提前考慮移動端更多的獨特特性」卻與漸進增強的設(shè)計思想相悖，讓「移動優(yōu)先」淪為了某種形式化的概念而難以執(zhí)行。
例如下面這個報告界面的場景里，移動端僅展示匯總的報告圖表信息，但匯總圖表并沒有「擴展」到 Tablet 里而是用明細(xì)數(shù)據(jù)替換圖表，而在桌面端同時包含了明細(xì)數(shù)據(jù)與圖表兩部分信息，這看上去并不像是一個「增強」的設(shè)計思路，更像是在全量需求下基于設(shè)備限制所采用的「降級」策略。
（Fiori 報告界面的 Adaptive Design）
因此「移動優(yōu)先」并不一定是形式上優(yōu)先設(shè)計移動端，它被廣泛接受和應(yīng)用的是背后的漸進增強的核心思想。我認(rèn)為在移動設(shè)備高度發(fā)展的當(dāng)下，「移動優(yōu)先」不再適合作為單獨概念提出來，而漸進增強的設(shè)計思想應(yīng)該體現(xiàn)在更細(xì)分的場景中，例如在布局、信息排版以及交互反饋中，我們應(yīng)該優(yōu)先考慮限制更大的移動端；在一些交互方式上，優(yōu)先考慮限制更大的鼠標(biāo)操作。甚至在復(fù)雜業(yè)務(wù)場景里，優(yōu)先滿足核心業(yè)務(wù)流程順暢也屬于漸進增強的策略范疇。
這里講的設(shè)計模式是指設(shè)計師在具體業(yè)務(wù)中針對不同的情況可以采用的通用性設(shè)計方案，這些設(shè)計模式除了單獨應(yīng)用外，有時候也可以多種模式結(jié)合應(yīng)用。Fluent 歸納了 6 種對應(yīng)不同情況的響應(yīng)式設(shè)計模式，非常全面地涵蓋了其它設(shè)計體系中的絕大部分方案，分別是：調(diào)整大小、重新定位、重新排列、顯示/隱藏、替換、重新構(gòu)建。
調(diào)整大小是最基礎(chǔ)的設(shè)計模式，是一個容器默認(rèn)的響應(yīng)式模式，通常有等比縮放、固定高度、或是在不同尺寸下按不同比例規(guī)格縮放三種形式，即便在無響應(yīng)式設(shè)計的體系里，容器跟隨屏幕尺寸而變化也是一個常見的應(yīng)用方式。
改變 UI 元素的相對位置，以充分利用不同尺寸的空間。重新定位在響應(yīng)式應(yīng)用里多見在框架上，或是在組件里對一些特定元素的處理，例如 Material 的全局浮動按鈕與浮動的下拉菜單以 Reposition 的形式分別在桌面端與移動端處于不同的位置。
（Reposition）
改變 UI 元素的排列方式，這在內(nèi)容彈性布局里較常見，通常是基于某種排列規(guī)則自動向下折行，并結(jié)合調(diào)整大小與柵格系統(tǒng)應(yīng)用在響應(yīng)式布局方面，例如 Carbon 的 Fluid Grid。
（Reflow）
基于屏幕空間、設(shè)備不同特性、特定情況等顯示或隱藏 UI 元素，例如大多數(shù)設(shè)計體系的框架設(shè)計應(yīng)用在小屏幕上會隱藏側(cè)邊菜單。Material 在組件響應(yīng)式行為里提到的 Expand 也屬于 Show / Hide 的延伸。
（Show / Hide）
針對不同尺寸的屏幕采用不同形態(tài)的組件，通常應(yīng)用在對具體的組件做針對性響應(yīng)式設(shè)計中，但需要注意用戶面對變化時的認(rèn)知成本。
（Replace）
折疊或拆分信息架構(gòu)，這種模式在 Web 端較難實現(xiàn)，通常出現(xiàn)在一些 Native App 的場景。
（Re-architect）
除了上述 6 種模式以外，我把內(nèi)容密度也歸納為一種設(shè)計模式，F(xiàn)iori、Material Design、 以及 Atlassian 都提出了內(nèi)容密度的概念。Fiori 基于移動優(yōu)先在移動端采用默認(rèn)密度，而針對大屏幕的 Web 端則提供緊湊密度的方案，他們認(rèn)為移動端手指交互所需的空間要求更高；Material 則是針對很多組件都定制了 Default、Comfortable、Compact 三種密度的視覺表現(xiàn)。通過被動響應(yīng)式或主動控制內(nèi)容密度很好的解決了不同尺寸屏幕的信息獲取效率問題。
（Material Design 的內(nèi)容密度示例）
值得一提的是 Atlassian 通過柵格系統(tǒng)的間距來控制密度而非對內(nèi)容密度本身進行設(shè)計，越緊湊的布局柵格間距越小，這看上去很合理，卻很容易造成內(nèi)容密度增加的同時整體信息獲取效率反而降低的問題。Material 也有關(guān)于柵格空間的定義，但在內(nèi)容密度的處理上和 Atlassian 恰恰相反，它認(rèn)為高密度內(nèi)容適用更寬松的柵格空間，相對是一個更合理的設(shè)計。在信息密度的問題上，我們的核心目的其實是提升信息效率而非單純提高視覺密度，因此解法上需要更完善的考慮。
（Atlassian 與 Material 的柵格密度對比）
實施模式是指設(shè)計體系為實現(xiàn)具體設(shè)計方案而定義的一系列基礎(chǔ)規(guī)則、解決方案或技術(shù)手段，經(jīng)過整理總結(jié)為相對尺寸單位、屏幕斷點、彈性布局、柵格系統(tǒng) 4 個方面。
幾乎所有應(yīng)用于 Web 的設(shè)計體系的技術(shù)方案中都采用 rem 相對單位，Material、Fiori、Carbon 和 Lightning 均沿用了瀏覽器默認(rèn)的 root 尺寸，即 1rem = 16px，Alta 默認(rèn)采用是 14px 的規(guī)格，并允許基于不同應(yīng)用選擇 12px 或 16px 的規(guī)格，默認(rèn)情況 Alta 采用更小規(guī)格的單位會在小屏幕電腦上有更好的表現(xiàn)，這也許和他們的產(chǎn)品特性相關(guān)。
相對尺寸單位是非常具有實施價值的，它使產(chǎn)品能在保持信息節(jié)奏的情況下根據(jù)不同的情況等比例縮放內(nèi)容，這使得設(shè)計能更方便地調(diào)整內(nèi)容密度，或許還可以配合 Media Queries 解決部分跨端的尺寸適配問題，且?guī)缀鯖]有前端成本。
國內(nèi)的前端業(yè)界包括我們自己的前端同學(xué)更多將 Rem 運用在移動端，主要為了兩個目的：方便計算尺寸、在不同寬度的設(shè)備上等比縮放內(nèi)容，這樣的用法是出于前端工程師解決屏幕兼容性的一種技術(shù)手段，在使用上本身也存在一定爭議，而在響應(yīng)式設(shè)計領(lǐng)域我們還沒有發(fā)揮出 Rem 應(yīng)該發(fā)揮的作用，甚至很多設(shè)計師還并不了解相對尺寸單位的使用方法，廣泛應(yīng)用 Rem 能為我們帶來哪些實際價值是接下來需要繼續(xù)研究的。
屏幕斷點是響應(yīng)式設(shè)計的基礎(chǔ)依據(jù)，它決定了我們要適配到什么樣的設(shè)備或屏幕規(guī)格，并通過 Media Queries 這樣的技術(shù)實現(xiàn)不同 Breakpoint 條件下的不同 UI 表現(xiàn)。一般情況 Breakpoints 都是基于 Phone、Tablet、Desktop 的維度來設(shè)計的，包括考慮了移動設(shè)備的橫評豎屏情況，關(guān)于詳細(xì)的規(guī)格設(shè)置其實并沒有太大參考價值，設(shè)計體系都是根據(jù)自身定位以及設(shè)備覆蓋的情況來制訂的，例如 Material 的斷點在低分辨率范圍分得非常細(xì)，是因為 Material 主要服務(wù)的 Android 平臺有著數(shù)量繁多的設(shè)備分辨率。在滿足自己需求的前提下，屏幕端點不需要太多，無論怎樣基于數(shù)據(jù)驅(qū)動的屏幕斷點設(shè)置將會是一個更科學(xué)的方法。
（屏幕斷點分布） Fiori 的斷點設(shè)計比較有意思，在設(shè)計文檔中僅有基本的布局規(guī)則，沒有明確的 Breakpoints 規(guī)則，F(xiàn)iori 對于不同的組件會設(shè)計不同的 Breakpoints，例如在 Table 這個組件中定義了 0 < 220 < 270 < 350 < 460 < 570 < ∞ 的規(guī)格，而在 Form 的組件中，Breakpoints 變成了 0 < 600 < 1024 < 1440 < ∞，從這點上看出 Fiori 認(rèn)為不同的組件有不同的表達(dá)模式，因此應(yīng)該針對性對組件進行優(yōu)化。
（Fiori 的 Table 組件適配情況）
（Fiori 的 Form 組件適配情況）
Flex 布局是 CSS3 提供的強大布局能力，從更自然更具語義化的角度實現(xiàn)界面元素的自適應(yīng)。應(yīng)用于 Web 的設(shè)計體系基本上都在組件代碼里廣泛采用了 Flex 布局，Lightning 還將柵格與 Flex 布局結(jié)合定義了自己更完善的布局方法。在響應(yīng)式設(shè)計中，F(xiàn)lex 布局通常結(jié)合 Breakpoints 使用，在兩個 Breakpoints 之間讓界面做更平滑的過度。除此之外其它平臺也都有類似的彈性布局能力，例如 Fluent 在 windows 采用 XAML 構(gòu)建布局系統(tǒng)。
無論是 Flex 還是最近興起的 Grid 布局都是 CSS3 的基本布局能力，響應(yīng)式設(shè)計要解決布局的問題將會深度依賴這些基礎(chǔ)技術(shù)手段，本篇不進一步展開。
柵格系統(tǒng)是所有設(shè)計體系必備的，我們通常將頁面橫向分為 N 列，定義每一列的尺寸與間距，這為界面布局提供了一致性和成本便利。傳統(tǒng)的柵格系統(tǒng)在響應(yīng)式方面的應(yīng)用主要是結(jié)合 Breakpoints 與一些 Responsive Token 來實現(xiàn)的，通過給 UI 元素指定不同的柵格數(shù)來決定他們分別在不同屏幕下占多少列，同時一些設(shè)計體系還提供了可見性相關(guān)的 token，來控制界面元素在不同屏幕的顯示與隱藏。
Fluent、Fiori、Lightning、Material 以及大多數(shù)設(shè)計體系都采用了 12 柵格系統(tǒng)，因為 12 的因數(shù)夠多，能滿足足夠多的布局細(xì)分同時又不至于太復(fù)雜，Carbon 的做法更加 geek 一些，他們的「2x grid」采用了 16 柵格系統(tǒng)，布局粒度更細(xì)但放棄了 3，6 這樣的因數(shù)。 Ant Design 為了滿足復(fù)雜的業(yè)務(wù)情況，采用了 24 柵格系統(tǒng)，24 柵格提供了更高的靈活性的同時，也大大增加了復(fù)雜度，面臨柵格系統(tǒng)的響應(yīng)式設(shè)計 24 柵格是否適用還有待商榷。
另外 Material、Carbon 還明確提出了「Fluid Grid – 流體柵格」的概念，核心思想是在較小的屏幕上降低柵格數(shù)量，將多余的柵格自動折行彈性布局。
（Carbon 的柵格定義） 在屏幕尺寸變化時，柵格主要有兩種響應(yīng)模式：Fluid、Fixed
（Fluid）
這種將柵格系統(tǒng)與彈性布局相結(jié)合的方式基于一些簡單的規(guī)則設(shè)置，在不需要特定響應(yīng)式的場景中不再需要指定繁瑣的 token，且能滿足大部分高頻且通用的情況，在一定程度上降低了成本。
除了通用的響應(yīng)式規(guī)則以外，設(shè)計體系在具體組件中的響應(yīng)式方案還有許多值得挖掘，能為我們的組件設(shè)計提供參考價值，本篇不再一一展開，僅提兩個典型的應(yīng)用情況：
（Carbon 的框架設(shè)計）
框架算是一個特殊的組件，在不同的設(shè)備中界面框架的適用有非常大的差異，幾乎提到響應(yīng)式的所有設(shè)計體系都給出了框架響應(yīng)式方案，例如 Alta 將界面框架分為四塊，以 Off-Canvas 和 Reposition 兩種方式在不同尺寸的屏幕中顯示或隱藏以及通過特定的方式展開或呼出。
通常情況下設(shè)計體系的框架組成按形式可以分為：
Header – 通常情況下常駐
Sidenav – 分為左側(cè)右側(cè)兩種情況，一般用于放置導(dǎo)航，在不同設(shè)備會有展開，收縮，隱藏三種狀態(tài)
Content – 內(nèi)容區(qū)，通常由 Grid 控制布局
Footer – 如有，固定在頁面底部
Float – 浮動框架，用于臨時狀態(tài)，通知或彈窗等
設(shè)計體系通過對框架的定義，以及控制不同部分基于什么樣的模式響應(yīng)屏幕尺寸來實施對框架的響應(yīng)式設(shè)計。
Fluent 或 Material 在設(shè)計文檔中更多基于基礎(chǔ)的網(wǎng)格，布局，設(shè)計模式來闡述通用性的響應(yīng)式規(guī)則，因此他們的響應(yīng)式設(shè)計有非常好的延續(xù)性，組件的響應(yīng)式方案基本上都遵循這些規(guī)則。
而 Fiori 以及 Lightning 在通用性響應(yīng)式設(shè)計模式上的定義上沒有那么全面，他們側(cè)重于在組件層面對所有組件都考慮了針對性的 Responsive 或 Adaptive 的方案。例如 Fiori 在響應(yīng)式表格的組件里，在桌面端與移動端分別是 table 和 list 的模式，這個方案并不是通過全局抽象規(guī)則得出來的，而是基于對組件的針對性設(shè)計，正如他們?yōu)椴煌慕M件設(shè)計了不同的 Breakpoints，這種針對性也適用于特定的 UI 解決方案。
（Fiori 針對 Table 的響應(yīng)式設(shè)計） 在一定程度上抽象規(guī)則的同時，如果我們能夠為每一個組件都考慮到不同場景的響應(yīng)式，當(dāng)然就會提供更精細(xì)化的體驗。在一個完備的設(shè)計體系里，在設(shè)計每一個組件資產(chǎn)時都以漸進增強的設(shè)計策略，考慮到不同的設(shè)備及屏幕適配是非常有必要的。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
主要分兩個部分介紹，第一個輕松點的主題，回顧下UI的風(fēng)格變遷，再聊一聊行業(yè)情況，然后科普一下app界面設(shè)計的提案思路；第二個部分就稍微嚴(yán)謹(jǐn)些，是UI設(shè)計師必須掌握的一些基本知識，包括分辨率適配，倍率適配等關(guān)鍵知識點
先來認(rèn)識下UI是什么，我給大家精簡成了三句話，如上圖所示
首先第一是媒介，也就是我們直接能看到的各種界面，UI就主要設(shè)計界面
第二是行為，也就是我們使用一個產(chǎn)品時，通過怎樣的行為來操作，UI還需要思考界面的交互
目前大家比較熟悉的，手持（手機），穿戴（vr，眼鏡）等
最后則是用戶，也就是我們常做的用戶調(diào)研，不只是UI，所有的設(shè)計行業(yè)都需要這個環(huán)節(jié)
所以，如果有人問到UI是干什么的，那么你就可以告訴他，主要做三件事情：
日常需要做界面設(shè)計；進階一點的會研究交互設(shè)計；高級的UI會去更深入研究用戶
而我們這次主要就了解界面設(shè)計上那點事情，先給大家回顧一下UI設(shè)計風(fēng)格的一個變遷，至今為止UI已經(jīng)從黑白時代演變到了今天至少經(jīng)歷了至少5代蛻變，主要的風(fēng)格如我右邊列出的種類，而我覺得其實主要分成三個大時代來看就行
其中第一個大時代統(tǒng)稱像素時代，也就是最早UI誕生的時候做就是這樣的界面，大家熟知的表情包“有內(nèi)鬼終止交易”就是一個經(jīng)典的時代縮影
第二個大時代是擬物水晶時代，也就是UI發(fā)展最快，行業(yè)規(guī)模變化最大的一個時代，很多早期一批UI設(shè)計師都在這個時代吃到了所謂時代紅利，當(dāng)然不包括我，我已經(jīng)晚了。這個時代界面的特點特別明顯，就是比較寫實的質(zhì)感，投影以及一個大高光的罩子結(jié)合起來，給人一種硬玻璃的感覺
最后一個時代則是扁平，新擬物，現(xiàn)實增強等的混合時代（跟抖音內(nèi)容的生態(tài)變遷差不多，從明顯的高端視頻風(fēng)格到現(xiàn)在和快手差不多的魚龍混雜），這個時期其實很多風(fēng)格會延續(xù)下去，尤其是扁平，也就是我們現(xiàn)在辦公?？吹降慕缑?，會作為一個基礎(chǔ)，不斷的吸收和混合其他的風(fēng)格去進行延展
VR中的界面則是稍微前衛(wèi)一些的，因為會有一個360度的環(huán)繞視角以及一個虛擬的現(xiàn)實場景，可自定義的程度很高，目前是剛剛興起的時期，也是一個新的UI比較建議入手的高門檻業(yè)務(wù)領(lǐng)域，為什么說高門檻，因為做個界面都要戴著頭盔來看效果
比較值得給大家科普一下的則是最近比較趨勢的兩個風(fēng)格，一個是新扁平：在扁平界面的基礎(chǔ)上，大面積用色，漸變，微質(zhì)感，少邊框，結(jié)合3D等一些其他元素來凸顯主題
還有一個是新擬物，時代的風(fēng)格總是偶爾會有輪回，擬物風(fēng)格也進化成了新的形態(tài)：只有部分寫實，整體強調(diào)3D立體感和光影感覺
還有一個是新擬物，時代的風(fēng)格總是偶爾會有輪回，擬物風(fēng)格也進化成了新的形態(tài)：只有部分寫實，整體強調(diào)3D立體感和光影感覺
風(fēng)格介紹完現(xiàn)在簡單給大家講下這個行業(yè)，它的覆蓋領(lǐng)域主要分為四個，其中主要的行業(yè)人才都集中在移動端和PC端；游戲是一個特殊行業(yè)，要單獨劃為一個領(lǐng)域，它跨越多端風(fēng)格也多樣；其他端則主要包含一些國有傳統(tǒng)行業(yè)和一些未來的，科技的比較冷門的領(lǐng)域
然后UI這個職業(yè)的主要行業(yè)特點是怎樣呢？作為一個過來人可以見證的主要有以上七個部分，但是一句話總結(jié)就是：熱度下降，規(guī)模穩(wěn)定，門檻變低，人人切圖。說得更殘酷一點，現(xiàn)在大家報個班學(xué)完都可以投UI設(shè)計崗位了，時代的紅利已經(jīng)遠(yuǎn)去。當(dāng)然如果覺得我說的不對也沒事，可能我站得還不夠高～
比較值得一提的則是風(fēng)格的分布情況，雖然已經(jīng)經(jīng)歷了5代變遷，但是仍有很多傳統(tǒng)和冷門的行業(yè)停留在水晶擬物的時代，只有主流和熱門的行業(yè)保持著最新的風(fēng)格，而前衛(wèi)的行業(yè)則會去嘗試最新的UI和交互
這連續(xù)的兩張里的圖就是一個天南一個地北，但確實同一個時代的產(chǎn)品
那么職業(yè)科普和行業(yè)情況都有了之后，我們具體UI設(shè)計師，做界面大概是什么個流程，讓大家了解下UI設(shè)計的思路，我稱之為“眼睛會了腦子沒會系列”，就跟你看到網(wǎng)上那些大佬的教程視頻一樣的，全程只有鼠標(biāo)在飛，然后東西它自己就做完了。（開玩笑）
這個設(shè)計思路是我UI設(shè)計時期總結(jié)出來的最快的提案設(shè)計思路，接下來講解每個環(huán)節(jié)該做什么
首先是快速切入，就是把我們前期收集好的資料參考，比如我這里有個情侶的app需要展現(xiàn)出青春，活力的感覺，那么我從最左邊的參考圖，提煉出符合自己要求的元素、顏色、特征等，填充到已有的交互框架（在UI設(shè)計業(yè)務(wù)中，交互框架一般由交互設(shè)計師或者產(chǎn)品給到），然后形成一個有視覺顏色等大體感覺的初版效果
然后在這個初版的基礎(chǔ)上，我們在自己的庫或者素材網(wǎng)上找到icon和圖片進行填充，整體調(diào)整顏、排版等，一個進階效果圖就完成了，同理還有如下兩個界面的產(chǎn)生過程，都是初稿
接下來第二個環(huán)節(jié)獨特性，就是在自己進階效果圖的基礎(chǔ)上，去強化一些關(guān)鍵的特征，讓它的特點更明顯更出彩，比如剛才的界面，把素材icon優(yōu)化成更有主題特色和個人風(fēng)格的類型，那這里涉及到icon的設(shè)計了
icon設(shè)計講究快準(zhǔn)狠，不需要太復(fù)雜
第三個環(huán)節(jié)則是高效性，這里開始就是要去優(yōu)化我們交互體驗上的東西了，也就是顏色的分布和使用在UI設(shè)計中是以邏輯和效率為主導(dǎo)的，好看不是首要的，比如這個經(jīng)典的界面，出自淘寶app，它的顏色使用，就非常尊重用戶，提高了識別和操作上的效率
然后是加分環(huán)節(jié)，細(xì)節(jié)環(huán)節(jié)，則是自己嘗試要融合一些小的心思到你的UI界面中，哪怕是圖片的使用，文案上的小趣味，都會讓你整個app的調(diào)性有提高
第二個加分環(huán)節(jié)則是動效，主要是展示界面操作上的流程和自己的一些特色效果，這些都做完，就可以拿著你的靜態(tài)界面稿子和動畫一起去找老板匯報了
其實整個鏈路真的很簡單，UI設(shè)計師每次提案做下來就這些事，只是不同人他的先后順序不一樣
首先我們已經(jīng)知道UI設(shè)計師每天都在搞界面，也知道他們?nèi)绾胃愠鲆粋€界面，那具體搞的過程中，又是做哪幾件事呢？這里給大家概括成三件事：規(guī)范，切圖和標(biāo)注
今天我們只普及規(guī)范知識，也就是在畫界面之前，建立畫板之前都要先搞清楚的事情，UI設(shè)計師真的數(shù)學(xué)邏輯要好
我們先要知道，規(guī)范為什么是要先掌握的事情，那是因為在設(shè)計界面這件事上，規(guī)范已經(jīng)在手機生產(chǎn)出來的時候就有了，不同于我們說的設(shè)計規(guī)范是一些視覺上的規(guī)范，UI的規(guī)范是和尺寸，像素，倍率等知識密切相關(guān)的
首先從界面上去分割，UI說的規(guī)范主要是講這幾個部分和一個整體的設(shè)計尺寸
先講設(shè)計尺寸，我們以蘋果手機為案例，第一臺手機出廠后，就會存在這樣的規(guī)格分布，告訴你分辨率是多少，每個部分各占多少高度，有了這些，大大小小的app和系統(tǒng)等界面才有了設(shè)計的基礎(chǔ)
所以問題來了，那每出一臺手機就要有一個新的設(shè)計尺寸嗎？理論上是的，但是實際上不管手機廠商和UI設(shè)計師，都會去找里面的規(guī)律來避免麻煩，于是廠商創(chuàng)造了一個規(guī)律，也就是這個pt為單位的尺寸，這里就要先解釋下這兩種單位的關(guān)系
說的簡單點，就是pt是一個虛擬單位，它永遠(yuǎn)取最小值，也就是分辨率長寬都取了公約數(shù)之后的那個最小值
所以我們再回頭看這幾個機型，就能發(fā)現(xiàn)一個規(guī)律，就是如果pt不變，設(shè)計尺寸是不需要改變的，因為整體可以進行放大或者縮小來進行適配。比如左側(cè)兩臺手機，我用640x960為設(shè)計尺寸，做來的界面，兩臺手機都可以用，不會有拉伸之類的變形；右側(cè)之所以高度上pt不同，是因為頂部的之前我們說的狀態(tài)欄，導(dǎo)航欄之類的高度變了而已，實際中間的區(qū)域是沒變的
然后再換成我們現(xiàn)在主流的機型看也是這個道理，但出現(xiàn)了一個新詞，叫渲染分辨率，自此以后我們要分清楚，設(shè)計尺寸永遠(yuǎn)是渲染分辨率，因為通常渲染分辨率和屏幕分辨率是一致的。這就是為什么官方說plus的屏幕更清楚，就是因為是從分辨率高的界面縮小下來的，px密度更高
在了解了這幾點基本概念后，我們就可以去看整個行業(yè)的機型規(guī)范了，我們現(xiàn)在UI界面是主要以750x1334為設(shè)計尺寸的，就是因為這個分辨率所占據(jù)的機型是最多的，也就是大部分的pt都是在這個檔位
同理安卓市場也一樣，只不過安卓的機型更多，所以更復(fù)雜，他們對應(yīng)的一個虛擬單位則是dp
推導(dǎo)過程是一樣的，所以我們直接說結(jié)論，雙端的設(shè)計尺寸如圖所示，你用720x1280和750x1334都可以，因為這兩者都約等于9:16，現(xiàn)在UI設(shè)計師的軟件比如sketch大多都自帶了完整的各個機型的pt/dp，所以已經(jīng)現(xiàn)在很多UI設(shè)計師都不大了解這個知識
剛才我們介紹完的部分，只是適配的一種情況，還有一種情況則是通過切圖，又稱為倍率圖。
作為一個合格的切圖仔，切圖是最常見的操作，不同的倍率圖，不僅僅是大小不同，也被用來適配不同的機型
切圖倍率是隨著機型一起產(chǎn)生的，所以每個機型在適配的時候，主要的規(guī)律就是：pt相同看切圖倍率；切圖倍率相同看pt；如果兩個都不同，則先按pt適配，然后再通過倍率適配。這里重申一下，pt適配的意思就是：只輸出一套圖，然后整體界面進行一個放大或縮小的方式適配不同機型；而切圖倍率適配：則是不需要整體放大或縮小，而是通過輸出多套圖去給不同機型用
雙端其實都有自己機型對應(yīng)的切圖倍率，兩者通過各自的虛擬單位pt和dp還能統(tǒng)一轉(zhuǎn)化為px，這樣才能進行多機型的適配
前面我們說了，雙端的主流設(shè)計分辨率基本上是一樣的比例，但他們各自有不同的切圖倍率，ios端的機型比較統(tǒng)一，所以切圖倍率一直都沒有太多；而安卓因為各種機型層出不窮，所以用于適配的切圖倍率非常多，適配的難度也很大，但目前主流的輸出結(jié)果如圖所示，但當(dāng)全面屏越來越多的時候，這個結(jié)構(gòu)也會逐漸改變
最后講一下UI的工具，在工作的環(huán)境中碰到使用比較多的就是sketch和新興的figma，兩者都相似，都以pt和dp為單位去建立畫板，也有全面的切圖倍率供輸出使用
也常見有人一定喜歡用PS來設(shè)計界面的，也可以用這樣的切圖插件來一鍵輕松輸出
最后標(biāo)注也是一個大工程，主要是眼花，難度不大，現(xiàn)在各種主流軟件都搭配標(biāo)注插件，這里不多講
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
按鈕是一種使用廣泛的基礎(chǔ)界面元素，正因其使用的普遍性和重要性，我們需要并一直在探索建立按鈕設(shè)計規(guī)范。面向企業(yè)級應(yīng)用時我們需要精心考慮按鈕的設(shè)計， Ant Design 提供了豐富的按鈕類型以覆蓋各種場景，盡管每種按鈕都有其存在的必要性，但在使用中也帶來諸多疑問：
應(yīng)在什么時候?qū)粹o放在左邊，又什么時候放在右側(cè)；
按鈕順序是按照使用頻次擺放嗎？如果無明顯的使用頻次呢？
當(dāng)需要提供特別多按鈕的時候應(yīng)該如何處理？
虛線按鈕 與 普通按鈕 在用法上有什么明確區(qū)別；
RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何區(qū)別？
…
如果沒有規(guī)范以上問題，僅按鈕順序和位置問題就會出現(xiàn)無數(shù)種組合。圖左側(cè)為螞蟻中臺業(yè)務(wù)實況，圖右側(cè)對左側(cè)按鈕的布置方案作了提取，每種場景都存在過多解決方案和組合，無法通過參考他人的設(shè)計來確定應(yīng)該如何擺放按鈕，因為設(shè)計無章可循。
因此，有必要建立約束又包容的規(guī)范，以廣泛滿足多層級、跨場景的設(shè)計需要。
Ant Design 是一個設(shè)計體系，應(yīng)用于螞蟻中臺，并對外服務(wù)于超過 100 萬名開發(fā)者。在制定規(guī)則時，原則是簡單易記（約束）并滿足企業(yè)級場景的廣泛兼容（包容），把問題最少化。我們的解決方案是：
1）「默認(rèn)規(guī)則」：提供一套默認(rèn)的設(shè)計規(guī)則，在現(xiàn)有的模板、組件等設(shè)計資產(chǎn)中提供示例方案，滿足簡單場景需求，直接使用即可；
2）「設(shè)計建議」：為默認(rèn)規(guī)則無法滿足的復(fù)雜場景提供設(shè)計建議，讓使用者在一定的策略上自定義，同時又與默認(rèn)規(guī)則保持一致的認(rèn)知邏輯；
3）「設(shè)計目標(biāo)」：明確設(shè)計目標(biāo)，設(shè)計者依據(jù)設(shè)計目標(biāo)決策設(shè)計。
例如：“提交按鈕與表單輸入項對齊”是默認(rèn)規(guī)則；當(dāng)需要考慮按鈕是否適合放在右下角時，則可以遵循“右下角放置“完成類”意義的操作”的使用建議；“按鈕的設(shè)計應(yīng)盡量幫助用戶避免犯錯。”則是設(shè)計目標(biāo)。
目前，Ant Design 會提供組件、模板等設(shè)計資產(chǎn)、官方設(shè)計指南來演示這些規(guī)則。這是也是解決一致性落地方面的基本思路。
本文將嘗試分享我們是如何思考和制定默認(rèn)規(guī)則的，礙于篇幅，首先我們會聊一聊按鈕是什么，以此推論出按鈕設(shè)計應(yīng)為用戶解決的問題。接著，根據(jù)按鈕設(shè)計時的幾項基本變量，介紹我們是如何組織這些變量的設(shè)計邏輯，從而推導(dǎo)出一個較為通用的按鈕設(shè)計規(guī)則。最后講個小例子來說明按此邏輯該如何考慮設(shè)計一組按鈕。本文主要討論按鈕設(shè)計的三個基本邏輯：按鈕位置、按鈕順序、按鈕強調(diào)，后續(xù)可能會單獨開篇介紹其他常見按鈕的使用疑問。
按鈕和鏈接定義是不同的，按鈕用于發(fā)起動作，觸發(fā)相應(yīng)的業(yè)務(wù)邏輯。其與鏈接的區(qū)別在于，鏈接的作用是導(dǎo)航，但鏈接并不影響后端或前端展示上的邏輯。
然而，現(xiàn)在，按鈕和鏈接的界限越來越模糊，按鈕面臨的使用場景越來越復(fù)雜，也常出現(xiàn)用鏈接作為按鈕的場景，例如表格的操作列，通常這樣的設(shè)計通常并無大不妥。
但是筆者認(rèn)為 Material 的 TextButton 的解決方案也非常棒，對 TextButton 和 Link 做了區(qū)分，當(dāng) hover 或點擊TextButton 時，會出現(xiàn)淺色背景指示控件響應(yīng)區(qū)。如果你的設(shè)計系統(tǒng)剛起步，可以考慮這個方案：https://link.zhihu.com/?target=https%3A//material.io/components/buttons/
按鈕的位置、順序、組織方式、視覺強調(diào)程度是用戶尋找按鈕的線索，通過警告色可引起注意，避免誤操作，準(zhǔn)確的文案則能夠預(yù)告按鈕的執(zhí)行結(jié)果。按鈕設(shè)計的目標(biāo)是指導(dǎo)用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執(zhí)行該操作的結(jié)果，同時盡可能避免誤操作。
按鈕區(qū)是專用于放置按鈕的區(qū)域，一個按鈕區(qū)內(nèi)可以有多個按鈕。因此，這里使用按鈕區(qū)位置比按鈕位置更加準(zhǔn)確。
我們確定了一個清晰的設(shè)計策略來決策按鈕區(qū)位置：應(yīng)將按鈕放置于用戶瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對象。在未刻意建立信息層級引導(dǎo)視覺路徑時，經(jīng)典“F”“Z”網(wǎng)頁瀏覽模式作為了我們按鈕位置放置規(guī)則的基礎(chǔ)指導(dǎo)。
Jacob Nielsen 首先提出該模式后并提供了眼球追蹤研究結(jié)果，關(guān)注流順序如下圖。按鈕跟隨內(nèi)容模式在以下的這個研究中被證明非常自然。
源自 Gutenberg diagram，用戶關(guān)注流(通常含鼠標(biāo)移動)遵循一個 Z 字形模式，它描述了西方用戶的閱讀模式，從頁面的左上角到右下角。1和4區(qū)域是相對重要的視覺落腳點，4 區(qū)域相當(dāng)于是瀏覽的終點站。（Gutenberg Diagram 是 Gutenberg 根據(jù)多年的報紙等排版經(jīng)驗總結(jié)出的假設(shè)，筆者尚未找到眼動實驗數(shù)據(jù)）
（Z Pattern 圖源：Buttons on the web--Artem Syzonenko）
我們需要認(rèn)識一個概念叫「內(nèi)容塊」。內(nèi)容塊的概念略抽象，可以將整個頁面視為一個內(nèi)容塊，也將一張卡片視為一個內(nèi)容塊，或者僅僅是界面中的一個小小的內(nèi)容單元也可以視為一個內(nèi)容塊。界面中，一個內(nèi)容塊的基本構(gòu)成有三部分：Header、Body、Footer。常規(guī)來說，一個內(nèi)容塊通常闡述一個主題，Header 申明主題，Body 放置該主題的具體內(nèi)容，F(xiàn)ooter 主題的延伸信息和操作。
根據(jù)以上三個條件，推導(dǎo)出按鈕在「內(nèi)容塊」中位置的「默認(rèn)規(guī)則」如下。該規(guī)則幾乎收斂了大部分圖 1 中的位置設(shè)計不一致問題。這套位置規(guī)則與 Fiori、Predix、QuickBooks 等企業(yè)級產(chǎn)品設(shè)計體系中都相近。
（默認(rèn)位置規(guī)則）
同時，每個位置有一定行為意義，我們據(jù)此提供了「使用建議」來指導(dǎo)設(shè)計：
關(guān)于 FooterToolBar 中右側(cè)放置按鈕區(qū)的爭議
在彈窗中，將按鈕區(qū)放置在右側(cè)的規(guī)則已屬于習(xí)慣用法。但在整個網(wǎng)頁場景中，將 FooterToolBar 里的按鈕放置在右側(cè)是最受質(zhì)疑的，F(xiàn)ooterToolBar 是一個吸附在頁面底部的工具欄，可以保持出現(xiàn)。許多設(shè)計師認(rèn)為這種狀況找到按鈕很困難，特別是在表單場景中。眾所周知企業(yè)級產(chǎn)品的表單常會遇到非常復(fù)雜的狀況，F(xiàn)ooterToolBar 正好解決了這個問題，因此這里要弄清楚的是什么時候需要用到 FooterToolBar：
1）Body 區(qū)的有部分內(nèi)容被折疊or隱藏，如內(nèi)容單屏無法展示完整內(nèi)容，表單區(qū)被多個頁簽分割；
2）Body 區(qū)的內(nèi)容復(fù)雜度高，比如有多個分組，每個分組都有獨立的按鈕區(qū)，或復(fù)雜的交互方式。這時候需要將該主題的“完成”操作區(qū)與 body 區(qū)，區(qū)分出來。
簡而言之，F(xiàn)ooter 的存在就是為了要和 Body 區(qū)分別開來。如果不是為了解決這類問題，那么讓按鈕跟隨內(nèi)容是最自然的。這個挑戰(zhàn)也引出了另一個課題，工具欄的設(shè)計規(guī)范尚待完善，emm，真是一坑更比一坑深。
關(guān)于順序，最常見的疑問是確定按鈕應(yīng)該在取消按鈕左邊還是右邊，這是一個爭論已久的話題。在彈窗中，確定按鈕和取消按鈕的順序在各設(shè)計體系中都不一樣，下圖是操作系統(tǒng)三巨頭：Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受，只要在系統(tǒng)中統(tǒng)一。那 Ant Design 應(yīng)該如何選擇呢？
在決策按鈕默認(rèn)的閱讀順序時我們考慮了以下四方面：
1）風(fēng)險操作
2）方向性意義
3）對話習(xí)慣
4）響應(yīng)式規(guī)則
上面順序呈現(xiàn)了各因素在決策時的權(quán)重，例如，一旦按鈕出現(xiàn)方向性含義，則權(quán)重大于對話習(xí)慣，但一旦操作存在風(fēng)險，則需優(yōu)先決策。
可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應(yīng)該盡量遠(yuǎn)離常用按鈕。
什么是方向性含義？具有返回意義的按鈕，應(yīng)該放在左側(cè)，暗示其方向是回到之前。左圖的方案非常容易誤操作，方向錯亂挑戰(zhàn)用戶的認(rèn)知習(xí)慣，因為不論是在網(wǎng)頁還是移動端界面，我們已經(jīng)都習(xí)慣了返回在左側(cè)的模式。
按照對話習(xí)慣排列按鈕。界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程，按照日常對話的順序設(shè)計按鈕閱讀順序更自然，同時讓電腦盡量顯得禮貌一點。例如，日常對話中，我們一般不會先問負(fù)面性的問題，當(dāng)用戶修改了一項設(shè)置，用戶最有可能的行為是保存這項變更，如果電腦一上來就問用戶是否要取消變更會顯得不太禮貌的亞子。因此，不太推的操作，自然會排列在靠后的順序。
指是按鈕如何在響應(yīng)式環(huán)境中優(yōu)雅的溢出。這一項條件對規(guī)則設(shè)計的影響是，我們把溢出按鈕“…”統(tǒng)一放置在最右側(cè)。
綜上所述，我們制定了第一版「默認(rèn)規(guī)則」，無論左對齊右對齊，統(tǒng)一從左往右閱讀。
但這個方案遇到了問題。Ant Design 現(xiàn)有的浮窗類組件里，優(yōu)先操作的按鈕都在最右側(cè)，全部不符合這條規(guī)則。如果調(diào)整，意味著全部組件升級，這個變更將挑戰(zhàn)全部已在使用 Ant Design 的用戶習(xí)慣。這是無法被接受的，同時為了保持規(guī)則的簡單性，我們產(chǎn)出了產(chǎn)出了第二版「默認(rèn)規(guī)則」，即現(xiàn)在發(fā)布的版本，左對齊從左往右閱讀，右對齊從右往左閱讀：
調(diào)整按鈕的樣式變量，呈現(xiàn)不同的視覺重量，達(dá)到分級強調(diào)目的。我們將按鈕視覺強調(diào)程度分為四級，了解其原理后，可以根據(jù)樣式變量和按鈕類型組合出需要的按鈕。
一級按鈕通常是主按鈕，突出“完成”、“推薦”的操作。一個按鈕區(qū)最多應(yīng)該使用一個主按鈕。那么一個頁面可以有多個主按鈕嗎？因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕，比較建議在一個焦點任務(wù)中，最多一個主按鈕，也可以沒有主按鈕。
也稱之為次要按鈕，可用于所有次要的按鈕行動，如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠(yuǎn)是最安全的選擇。目前二級按鈕的視覺強調(diào)程度有些偏弱，后續(xù)我們也會考慮調(diào)優(yōu)此問題。
沒有外邊框，用鏈接色突出，例如文字按鈕。比較適合諸如“取消”“還原”等無需強調(diào)的操作。文首提到的表格操作列這類無需強調(diào)的操作也推薦使用。
并不是非常規(guī)范的按鈕，用于滿足復(fù)雜的個性化需求，當(dāng)按鈕數(shù)量特別多，并且保證用戶直識別的情況。
最后將位置、順序、視覺強調(diào)三項變量組合，可以得到一個最基礎(chǔ)的「默認(rèn)規(guī)則」，用于覆蓋最簡單的場景：
前面我們提到，「默認(rèn)規(guī)則」在組件、模板等設(shè)計資產(chǎn)中演示，通常無需思考直接使用即可。 那默認(rèn)規(guī)則不能滿足我的需求，我不知道如何安排按鈕順序怎么辦？現(xiàn)在，我們用一個小案例來驗證如何依據(jù)設(shè)計建議決策按鈕區(qū)設(shè)計。
場景假設(shè)：我需要一個復(fù)雜的篩選條件來過濾數(shù)據(jù)，我考慮在彈窗中處理這個任務(wù)。設(shè)置完篩選條件后，我可以將這個條件保存下來以備下次使用，或直接點擊確定生效。這里面會涉及的操作包括：保存，重置條件，確定，取消。
規(guī)則設(shè)計想要簡單而又令所有人滿意是一件非常困難的事，從設(shè)計系統(tǒng)的長遠(yuǎn)效益來看，簡單的規(guī)則更有意義，同時我們也在盡可能讓規(guī)則能夠符合習(xí)慣用法，讓用戶更容易接受和學(xué)習(xí)。關(guān)于按鈕設(shè)計規(guī)則的探討，依然存在很多問題尚待解決，歡迎大家提提供反饋，幫助我們一起完善。寫完文章后突然有點忐忑~~最后，我們在 Ant Design 官網(wǎng)上發(fā)布了一篇關(guān)于按鈕的設(shè)計指南，歡迎前往查看指正。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
與客戶的對話和反饋是產(chǎn)品成功的關(guān)鍵要素。然而，研究表明，42% 的公司不調(diào)查其客戶或收集反饋。
偉大的產(chǎn)品不是憑空打造的——您需要一個持續(xù)的過程來從用戶那里獲取反饋，以指導(dǎo)您的產(chǎn)品路線圖、調(diào)整消息傳遞并保持滿意度水平的脈搏。
什么是產(chǎn)品反饋？
產(chǎn)品反饋是您的用戶分享的有關(guān)他們對產(chǎn)品的體驗和滿意度的任何信息。您可以通過各種研究方法收集產(chǎn)品反饋，例如用戶訪談、客戶調(diào)查、評估客戶支持票等。
產(chǎn)品反饋的 3個主要好處
雖然積極收集和分析產(chǎn)品反饋有很多好處，但可以總結(jié)為三個主要好處：
A. 改善客戶體驗和滿意度
B. 優(yōu)先考慮產(chǎn)品路線圖并驗證新想法
C. 打造成功的產(chǎn)品
讓我們更詳細(xì)地看看它們。
1. 提升客戶體驗和滿意度
為用戶提供出色的客戶體驗不再是一種獨特的優(yōu)勢——這是意料之中的。產(chǎn)品發(fā)布后，收集產(chǎn)品反饋可幫助您識別任何問題，收集有關(guān)要添加或改進的新功能的信息，并找到幫助用戶充分利用其體驗的方法。
支持票通常擅長揭示需要盡快解決的重復(fù)問題。如果一個問題多次出現(xiàn)，那么您就會知道它困擾著您的大部分客戶群。此外，凈推薦值 (NPS)或客戶滿意度得分 (CSAT) 等調(diào)查是產(chǎn)品反饋的重要來源，可以幫助您了解如何改善客戶體驗。
2. 優(yōu)先考慮產(chǎn)品路線圖并驗證想法
收集用戶的反饋有助于產(chǎn)品經(jīng)理確定產(chǎn)品路線圖的優(yōu)先級，并根據(jù)實際用戶需求做出明智的決策。
您可以收集關(guān)于功能想法的反饋并量化數(shù)據(jù)以了解哪些是最需要的。
3. 打造成功的產(chǎn)品
如今，最好的產(chǎn)品是基于與日復(fù)一日使用您產(chǎn)品的人（您的客戶）的持續(xù)互動和用戶體驗而構(gòu)建的?？蛻羝谕纳仙馕吨髽I(yè)必須不斷收集和識別客戶需求，以構(gòu)建能夠解決實際存在的問題的產(chǎn)品。
產(chǎn)品反饋是一種很好的機制，通過它可以從用戶那里獲取見解，并將其納入您的決策過程。無論是通過征求還是主動提供的反饋，傾聽用戶的意見將確保您能夠始終如一地交付價值。
產(chǎn)品反饋：類型和方法
您可以使用多種產(chǎn)品反饋方法來設(shè)置產(chǎn)品反饋循環(huán)并讓您的客戶與您取得聯(lián)系。
通常，產(chǎn)品反饋可以是征求的，也可以是主動提出的：
A. 征求反饋是指您要求用戶提供反饋。這可能是向您的客戶群發(fā)送調(diào)查或與用戶進行訪談。
B. 不請自來的反饋是用戶在沒有被要求的情況下分享的任何類型的反饋。例如，他們可能會在網(wǎng)上發(fā)表評論或在社交媒體上分享評論。
當(dāng)用戶在您的產(chǎn)品中遇到問題、要求新功能或需要幫助完成某事時，通常會出現(xiàn)不請自來的反饋。
另一方面，通過征求反饋，您需要為用戶提供背景信息并提出正確的研究問題。根據(jù)您的團隊需要反饋的內(nèi)容，以下是您可以用來收集征求的產(chǎn)品反饋的方法的概要：
1) 調(diào)查
2) 客戶訪談
3) 產(chǎn)品分析
4) 專門小組
5) 客戶支持對話
6) 銷售和客戶溝通電話
讓我們更詳細(xì)地看一下前三個。
1. 調(diào)查
調(diào)查是一種有效的研究工具，可為您提供針對各種用例的特定產(chǎn)品反饋：分析新發(fā)布的性能、在開始構(gòu)建過程之前驗證想法和新概念、測試產(chǎn)品消息傳遞等。
大多數(shù)反饋調(diào)查使用開放式和封閉式問題的組合。在創(chuàng)建和發(fā)送調(diào)查時要記住幾個最佳實踐，即：
A. 避免引導(dǎo)性問題，例如“您有多喜歡使用該產(chǎn)品？” 相反，請讓您的用戶提供有關(guān)他們體驗的詳細(xì)信息，而不要引導(dǎo)他們做出肯定或否定的回答。
B. 保持簡短：注意受訪者提供反饋的時間和意愿。在調(diào)查中包含的問題不超過五到七個，以使其相對簡短，并且仍然可以獲得可操作的反饋。
C. 使用開放式和封閉式問題的組合。太多的開放式問題將導(dǎo)致調(diào)查時間過長，因為參與者必須為每個問題輸入答案。另一方面，僅由封閉式問題（如是/否問題）組成的調(diào)查只會為您提供定量數(shù)據(jù)，而不會揭示參與者給出這些答案的原因。將這兩種類型的問題結(jié)合起來可以創(chuàng)建有效的調(diào)查。
2. 客戶訪談
客戶訪談是一種通用的研究方法，可以在整個產(chǎn)品開發(fā)過程中獲得有見地的反饋。從進行最初的設(shè)計研究到獲得發(fā)布后的反饋——與用戶交談總能產(chǎn)生新的見解。
對于產(chǎn)品營銷人員來說，訪談是一種有用的方式來獲取有關(guān)新產(chǎn)品或功能的消息傳遞的信息。
3. 產(chǎn)品分析
產(chǎn)品分析是了解產(chǎn)品性能和改進方式的絕佳來源。產(chǎn)品分析對產(chǎn)品經(jīng)理和營銷人員都很有用，可以幫助您了解用戶在做什么與他們所說的相比，這可能并不總是相同的。
如果您在發(fā)布之前進行了定性測試，產(chǎn)品分析可以幫助您驗證您的初始假設(shè)。
此外，產(chǎn)品分析是識別產(chǎn)品中嚴(yán)重問題的良好來源。例如，衡量留存率之類的分析可以讓您隨著時間的推移跟蹤它或?qū)⒈嚷逝c行業(yè)標(biāo)準(zhǔn)進行比較。當(dāng)任何異常發(fā)生時，數(shù)據(jù)是進行更多研究以了解問題所在的起點。
創(chuàng)建產(chǎn)品反饋循環(huán)的重要性
您可以使用多種方法來收集產(chǎn)品反饋，從我們上面看到的三種方法到社交媒體監(jiān)控、客戶支持票、銷售電話、客戶溝通電話等其他方法。更重要的是創(chuàng)建一個流程，通過該流程，反饋始終如一地到達(dá)您的組織并被采取行動，從而征求更多用戶反饋。這也稱為產(chǎn)品反饋循環(huán)。
反饋循環(huán)是一個迭代過程，其中從客戶反饋中收集的見解被實施到產(chǎn)品開發(fā)過程中，并用于在一致的基礎(chǔ)上為產(chǎn)品決策提供信息。隨著新的反饋影響新的產(chǎn)品策略，這個過程會無限重復(fù)，而變化會促使客戶提供額外的反饋。
這種持續(xù)不斷的客戶反饋將幫助您把握客戶滿意度的脈搏，并在您和您的客戶之間建立一個開放的渠道。
如何收集好的反饋
并非所有反饋都是平等的，或者就此而言——有用。就像進行任何其他研究方法一樣，收集很好的反饋需要理解并遵循關(guān)鍵的最佳實踐。這是你應(yīng)該知道的。
建立明確的目標(biāo)
在您開始收集反饋之前，第一步是定義您的目標(biāo)并建立明確的衡量方法。
一個好的起點是查看您負(fù)責(zé)的 KPI。對于產(chǎn)品團隊來說，這可能意味著激活或用戶保留。對于產(chǎn)品營銷人員，這也可能是合格的注冊和使用指標(biāo)。
此外，您建立的目標(biāo)還將幫助您選擇正確的方法來收集反饋。例如，客戶訪談非常適合在進行初步發(fā)現(xiàn)研究時獲得定性反饋。另一方面，原型測試最適合在開發(fā)前與用戶一起驗證設(shè)計。確立目標(biāo)是獲得做出明智決策所需的反饋的第一步。
提出正確的問題
其次，提出正確的研究問題是獲得有效、可靠反饋的關(guān)鍵步驟。確定目標(biāo)后，下一步是制定您需要發(fā)送給用戶的調(diào)查或為客戶訪談準(zhǔn)備研究計劃。
在制定研究問題時，需要牢記一些重要的指導(dǎo)方針。其中一些是：
A. 避免引導(dǎo)參與者尋找答案
B. 避免封閉式問題，尤其是在客戶訪談中
C. 參考特定時刻，例如使用功能或新產(chǎn)品
總結(jié)
產(chǎn)品反饋是洞察客戶行為和痛點的重要來源，可幫助您在整個產(chǎn)品開發(fā)過程中做出明智的決策。
今天在產(chǎn)品和營銷領(lǐng)域工作的每個人都將從與客戶交談和傾聽他們的意見中受益。隨著產(chǎn)品的成熟和客戶需求的變化，這些對話不應(yīng)該是一次性的，而是構(gòu)建偉大產(chǎn)品的關(guān)鍵部分。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：對啊分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
在 Ant Design 的界面設(shè)計中，會包含大量的信息組織和編排工作，我們常常會遇到這樣的問題：
一個詳情頁面里應(yīng)該包含哪些信息？
什么樣的信息應(yīng)該放在卡片里，什么樣的信息應(yīng)該平鋪顯示？
一個頁面內(nèi)的信息該怎么讓用戶快速找到重點？
···
信息組織是我們在日常生活中經(jīng)常會遇到的問題，商場里的樓層導(dǎo)航、機場車站的標(biāo)志指引、餐桌上的菜單、手機里的通訊錄等等，各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現(xiàn)給用戶呢？
在解答這些關(guān)于頁面設(shè)計的問題之前，我想先給大家講一個生活中的小案例：
逛過宜家的人，應(yīng)該會注意到宜家類似迷宮的動線設(shè)計，這種動線設(shè)計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時，就會被一條隱形“向?qū)А蹦匾龑?dǎo)著向前走：一條曲折宛轉(zhuǎn)的主線依次引導(dǎo)至客廳家具、客廳儲物室、臥室、書房等各個主區(qū)域，直到一個不落地走完才抵達(dá)出口。但在這個主線之外，為了確保一些消費者在購物中，能夠快速離開或快速去往感興趣的區(qū)域，每個主區(qū)域間都有一些較隱蔽的捷徑作為輔動線。
這種動線設(shè)計一方面能夠把所有商品按照路徑有效的串聯(lián)起來，另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。
動線布局是宜家的隱形骨架，而真正讓宜家賣場豐富起來的，還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣，它不會把同類型產(chǎn)品進行大集合，而是根據(jù)人們的正常生活場景來分類，不同類型的產(chǎn)品在同一區(qū)域組合陳設(shè)，構(gòu)成生活中的一個小場景，一方面能達(dá)到對各個商品功能的完美詮釋，另一方面，一個產(chǎn)品盡量不會重復(fù)出現(xiàn)，盡可能減少商品展示的復(fù)雜性。
在整體商品布局上，有兩個很有意思的地方：第一，在居家體驗中心，樣板間的陳列順序完全是按照消費者回家后的場景而布置：客廳、餐廳、廚房、書房、臥室、衛(wèi)生間......，第二，在家居用品中心，則會根據(jù)消費者在家的日常起居行為進行擺放：做飯、休息、讀書、收納......
現(xiàn)實生活中的這些例子，對我們的界面信息組織有什么啟發(fā)呢？
在宜家的案例中，關(guān)于動線，映射到人的行為上，有一個比較專業(yè)的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最優(yōu)體驗心理學(xué)》中對“流”的定義：當(dāng)人們?nèi)硇耐度氲侥硞€活動中時，會對周邊干擾視而不見，這種狀態(tài)被稱為“流”。宜家的動線設(shè)計很好的營造了這種狀態(tài)，讓消費者完全沉浸于商品瀏覽，并且盡量不去打斷這種行為流。
經(jīng)過研究發(fā)現(xiàn)，構(gòu)成“流”的行為動作，其前后必然存在某種連續(xù)性或者關(guān)聯(lián)性，例如回家的行為動線，日常起居的行為關(guān)聯(lián)等。這個概念在界面設(shè)計中依然適用，很多界面設(shè)計都在有意無意的去創(chuàng)造“流”的狀態(tài)，帶給你用戶沉浸式體驗，例如各類短視頻應(yīng)用會根據(jù)用戶瀏覽習(xí)慣推薦相關(guān)聯(lián)的視頻內(nèi)容，讓用戶沉浸其中無法自拔。
關(guān)于商品布局，映射到信息組織上，《韋氏大詞典》 中提到一個詞“編配”（orchestration），對應(yīng)的解釋為“和諧的組織”。這個詞能比較好的表達(dá)信息組織的含義，宜家的商品和諧的組織構(gòu)成一個場景，它向消費者傳遞的不僅僅是商品本身的功用性，更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復(fù)雜程度。而在界面設(shè)計上，表單頁的和諧組織能夠幫助用戶快速完成信息錄入，詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......
各種各樣的信息總能以某種關(guān)系組織到一起，而如何根據(jù)這種流為用戶去組織和呈現(xiàn)信息呢？
“流”的本質(zhì)其實是一系列具有關(guān)聯(lián)性的行為動作串聯(lián)，而“編配”的目的則是為了降低串聯(lián)信息呈現(xiàn)的復(fù)雜程度。有了這兩個基礎(chǔ)的概念之后，我們可以做一個初步假定：所有的信息是否都可以通過關(guān)聯(lián)性和復(fù)雜度來進行組織編排？針對著這兩個維度，我們又進行了更深層次的研究和驗證，并得到基本定義：
信息復(fù)雜度：信息量的大小，包括種類、數(shù)量等。
信息關(guān)聯(lián)性：信息之間的潛在關(guān)聯(lián)或者相互影響。
我們設(shè)想，這兩個維度能否運用到界面設(shè)計上的信息組織呢？
界面信息之間的潛在關(guān)聯(lián)或者相互影響，通常體現(xiàn)在「邏輯關(guān)聯(lián)」和「視覺關(guān)聯(lián)」兩個層面。
顧名思義是指一個事件中的所有信息之間的關(guān)系，在界面設(shè)計中，無論什么樣的信息，總能以某種方式進行分類和編排在一起，例如手機通訊錄中的人名，可以按照字母順序從 a 到 z 進行排列，電商網(wǎng)站的商品導(dǎo)航會根據(jù)類別進行分組，待辦事項可以根據(jù)時間進行排序等。
如何找出信息之間的邏輯關(guān)聯(lián)性呢？
被稱之為信息架構(gòu)之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括：
地點（Location）
字母（Alphabet）
時間（Time）
類別（Category）
層級（Hierarchy）
簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略，信息是無限的，但是信息組織方式卻是有限的。
任何一個界面呈現(xiàn)給用戶的時候，用戶都會下意識的去判斷界面上什么信息是最重要的，接著會去關(guān)注這些信息都有什么關(guān)聯(lián)，因此，除了按照邏輯去組織信息之外，還應(yīng)該合理的去呈現(xiàn)信息的視覺層級關(guān)系。
視覺層級關(guān)系有幾種常見的區(qū)分方式：
強調(diào)：使用基本視覺元素（顏色、形狀、大小等）區(qū)分層級
親密性：位置接近的元素通常是有關(guān)系的，而且位置越近，關(guān)系越強
圖勝于言：視覺符號和對象關(guān)聯(lián)，例如：齒輪或扳手=設(shè)置，垃圾桶=刪除
瀏覽順序：根據(jù)瀏覽順序，從左到右（部分地區(qū)）或從上到下信息重要程度依次減弱
···
如何驗證界面元素的視覺關(guān)聯(lián)性是否合理呢？
《About Face 4: 交互設(shè)計精髓》 中提到了一個很有意思的測試，為了確保界面視覺信息有效的拉開層次關(guān)系，圖形設(shè)計師經(jīng)常會用到一個方法“瞇眼測試”（squint test）。閉上一只眼睛，瞇著另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成組，哪些元素看上去零散。從多個角度去觀察，總能夠發(fā)現(xiàn)之前沒有注意到的布局和構(gòu)成問題。
通常以信息量的大小或樣式多少來衡量，這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內(nèi)都是純文本信息，但是信息量較大（超過三屏），則認(rèn)為這個頁面的復(fù)雜度較高，或者一個詳情頁面內(nèi)同時包括文本、表格、代碼展示、圖表等元素，也會認(rèn)為這個頁面的復(fù)雜度較高。
信息的復(fù)雜度和關(guān)聯(lián)性并不是兩個完全獨立的維度，根據(jù)關(guān)聯(lián)性去組織信息，本身就是為了降低信息呈現(xiàn)出的復(fù)雜程度。而對復(fù)雜度的研究，可以幫助我們?nèi)绾芜x擇合適的方式把信息呈現(xiàn)給用戶。
具體到界面設(shè)計層面，信息體量大、復(fù)雜度高常常是中后臺界面設(shè)計的難題之一。以詳情頁為例，詳情頁內(nèi)的信息該如何合理的組織信息并有效的傳達(dá)給用戶呢？
根據(jù)關(guān)聯(lián)性和復(fù)雜度的概念，我們抽象出一個簡單的「復(fù)雜度模型」，用來判斷信息復(fù)雜程度和關(guān)聯(lián)性對頁面結(jié)構(gòu)的影響。
橫坐標(biāo)表示頁面信息之間的關(guān)聯(lián)性，縱坐標(biāo)表示信息的復(fù)雜程度，兩者交叉組成的色塊代表不同的信息等級?？拷c最淺的色塊，代表復(fù)雜程度低且關(guān)聯(lián)性強的內(nèi)容，例如一段純文本的產(chǎn)品描述信息；遠(yuǎn)離原點顏色最深的色塊，代表復(fù)雜程度高且相互獨立的信息，例如一個發(fā)布流程中的集成測、預(yù)發(fā)環(huán)境測試、灰度測試、上線等各個階段信息展示。
與之對應(yīng)的，我們對信息展示方式也進行了維度劃分，用來解決在復(fù)雜的企業(yè)級產(chǎn)品界面設(shè)計中，何時使用卡片區(qū)分，何時拆分為 tab 等布局問題。
根據(jù)承載信息復(fù)雜程度的不同，我們對容器組件也進行復(fù)雜度劃分，用來解決在不同頁面布局中，不同類型的信息用何種方式呈現(xiàn)的問題。
這個模型可以幫助設(shè)計者在決策布局組件時，有章可循。最終讓用戶感知，當(dāng)用戶來到一個頁面時，即可對頁面的信息量、信息的搜尋方式有統(tǒng)一的預(yù)期。我們嘗試將復(fù)雜度和關(guān)聯(lián)性模型在界面布局中落地：
關(guān)于以上的模型在實際設(shè)計中該如何操作，這里提供一個推薦步驟可以參考：
「復(fù)雜度判斷」明確設(shè)計對象信息量的大小
「關(guān)聯(lián)性判斷」判斷各個信息之間的關(guān)聯(lián)性，并合理分組
「組件選擇」選擇合適的容器組件來呈現(xiàn)信息
「模板選擇」選擇合適的頁面模板，組織編排信息
「瞇眼測試」檢查整體布局是否合理（僅參考）
大到一個系統(tǒng)，小到一個按鈕，背后的每一條規(guī)則既要從人的角度去思考設(shè)計的易用性，同時也要從信息本身去推敲組織的合理性。作為設(shè)計規(guī)范的制定者，不能憑感覺簡單了事，而是需要找到一套通用的模式，幫助用戶快速找到并理解信息幫助用戶提效，同時提升用戶的瀏覽體驗，是我們一直在探索的課題。
虛擬界面的信息組織和現(xiàn)實世界一樣，既需要符合人們對事物的認(rèn)知，也需要遵循人們的行為習(xí)慣，這些認(rèn)知和行為習(xí)慣，構(gòu)成了自然交互的基礎(chǔ)，這也是我們一直在探索方向。當(dāng)然，信息組織除了以上這種思路，還有更多的思路和方向等待挖掘，期待大家的反饋和建議，幫助我們一起完善。
導(dǎo)讀
為什么B端產(chǎn)品總是容易“失控”？B端產(chǎn)品設(shè)計與C端有何差異？如何在不斷復(fù)雜的系統(tǒng)中，權(quán)衡效率、成本、體驗之間的關(guān)系？
本文將帶你從B端產(chǎn)品的本質(zhì)出發(fā)，了解產(chǎn)品發(fā)展過程中容易出現(xiàn)的問題，并從復(fù)雜系統(tǒng)的角度去探討設(shè)計體系的構(gòu)建方式。
目錄
一、「 困局 」容易“失控”的B端產(chǎn)品
A .「 關(guān)注重點的差異性 」
B .「 微小差異的不斷疊加 」
C .「 產(chǎn)品發(fā)展進入惡性循環(huán) 」
D .「 進入效率拐點，產(chǎn)品失控 」
二、「 啟發(fā) 」從復(fù)雜科學(xué)的角度思考設(shè)計
A.「 自然算法 」
B.「 物質(zhì)的構(gòu)成原理 」
三、「 探究 」什么是產(chǎn)品設(shè)計體系？
A.「 定義 」
B .「 組成部分 」
C .「團隊能力要求 」
D .「 構(gòu)建方向 」
四、「 剖析 」B端產(chǎn)品的生命周期
「 產(chǎn)品生命周期概述 」
A .「 初創(chuàng)期 」解決核心問題，產(chǎn)生價值
B .「 成長期 」能力完善，產(chǎn)品擴張
C .「 成熟期 」效率提升，快速增長
D .「 暮年期 」商業(yè)價值降低，發(fā)展逐漸停滯
NEXT、「 下期預(yù)告 」設(shè)計體系的構(gòu)建法則
前言
隨著產(chǎn)業(yè)互聯(lián)網(wǎng)時代的到來，市場對B端產(chǎn)品的重視程度逐漸提升。然而，談及B端產(chǎn)品，特別是SaaS產(chǎn)品，大多數(shù)設(shè)計師對此并不是特別感興趣。一來，SaaS更注重功能層面，似乎本身對設(shè)計的要求并不高；二來，SaaS產(chǎn)品的最終實現(xiàn)效果總是不盡人意，就算設(shè)計得再好看，實現(xiàn)出來也難以出彩。
確實，若設(shè)計師僅僅只是關(guān)注視覺層面本身，那么B端產(chǎn)品確實不像C端那么吸引人。但是，若你能以整個產(chǎn)品構(gòu)建的角度去思考B端產(chǎn)品設(shè)計，那么設(shè)計師能夠在其中發(fā)揮的空間是巨大的。
假如把C端產(chǎn)品比作精致的小房子，那B端產(chǎn)品就是一幢巨大的高層建筑。建造小房子，你可以盡情地發(fā)揮創(chuàng)意，追逐潮流，大不了推倒重來。而建造大房子，則需要設(shè)計師考慮更多的維度，因為這是一個長期而復(fù)雜的工程。
建筑的外觀不僅需要好看，更需要足夠耐看、穩(wěn)定；為了適應(yīng)更多人的需求，你不僅要考慮房子的軟裝，還要考慮戶型的合理性、通用性；而為了降低成本，你還需要考慮家具、硬裝的標(biāo)準(zhǔn)化、房間的兼容性等等…
“你是否有信心建造一個宏偉的高樓大廈？”
這是我在B端設(shè)計中，反復(fù)強調(diào)體系化思維的原因之一。想要建造一個大型建筑，沒有體系化思維、沒有更完善的多職能協(xié)作流程，那么這座高樓一定會在建設(shè)過程中埋下隱患。而當(dāng)問題一旦出現(xiàn)，涉及到的沉沒成本也將會非常巨大。
當(dāng)然，對于C端產(chǎn)品來說，體系化也愈發(fā)重要了。隨著互聯(lián)網(wǎng)時代的持續(xù)發(fā)展，一些C端產(chǎn)品的復(fù)雜性也堪比B端。我在之前的文章中提到過一個觀點：“C端B化，B端C化”。在未來的數(shù)字產(chǎn)品設(shè)計中，B端產(chǎn)品將會逐漸開始重視產(chǎn)品的外觀與體驗，因為觸達(dá)的人群更年輕化、對體驗要求更高了。而C端產(chǎn)品也會更注重體系化建設(shè)，因為產(chǎn)品體量越來越大，需要尋求效率與成本之間的平衡點。
產(chǎn)品設(shè)計體系，本質(zhì)上是一套更科學(xué)的復(fù)雜性數(shù)字產(chǎn)品的設(shè)計方法與工作流程。因此，不管是B端產(chǎn)品還是C端產(chǎn)品，設(shè)計體系能夠在提升設(shè)計品質(zhì)的同時，讓產(chǎn)品更“可控”，提升效能，降低成本。
這套設(shè)計方法論，是我在工作中不斷實踐與完善的一些經(jīng)驗與方法。希望能借此分享一些自己淺薄的經(jīng)驗，也探討一下數(shù)字產(chǎn)品設(shè)計未來的形態(tài)。
?
一、「 困局 」容易“失控”的B端產(chǎn)品
-
作為較為復(fù)雜的數(shù)字產(chǎn)品，B端產(chǎn)品在快速發(fā)展的過程中，總是容易出現(xiàn)一些問題。特別是當(dāng)產(chǎn)品體量到達(dá)一定階段后，問題就會逐漸暴露出來，比如：
1. 產(chǎn)品丑、設(shè)計質(zhì)量低；
2. 組件樣式繁多，操作習(xí)慣不一致；
3. 新老系統(tǒng)差異大，不同模塊體驗差異大；
4. 頁面結(jié)構(gòu)混亂。
等等…
很多問題大家都能明顯地意識到，但往往因為“不影響售賣”、“價值不高”、“新功能優(yōu)先”等理由被擱置。
隨著問題逐漸積累，產(chǎn)品的優(yōu)化成本也變得越來越高，最終使整個產(chǎn)品已經(jīng)積重難返。若只是多部分頁面/組件進行優(yōu)化，小修小補，雖然成本低，但成效甚微；若是進行大修大補，那么優(yōu)化成本將遠(yuǎn)大于研發(fā)新功能的成本。
這種普遍的B端產(chǎn)品現(xiàn)象，被稱為“產(chǎn)品失控”，即——團隊已經(jīng)對整個產(chǎn)品的形態(tài)失去控制力。
那么，為什么B端產(chǎn)品特別容易出現(xiàn)這種問題呢？
A .「 關(guān)注重點的差異性 」
首先，產(chǎn)品的本質(zhì)決定了其關(guān)注重點的差異性。
與C端產(chǎn)品不同的是，B端產(chǎn)品往往更看重“能力”（為企業(yè)用戶解決問題），而產(chǎn)品的銷售方式與付費模式，也決定了產(chǎn)品體驗并非首要關(guān)注的對象。由于B端產(chǎn)品通常針對企業(yè)用戶，需要更長的研發(fā)過程，產(chǎn)品的體量和復(fù)雜性也相對較高。因此，除了產(chǎn)品解決問題的“能力”之外，產(chǎn)品還需要關(guān)注研發(fā)的效率及成本。
因此，在產(chǎn)品的發(fā)展初期，企業(yè)通常對效率最為關(guān)注，其次是成本，最后才是體驗（能用就行）。絕大多數(shù)B端企業(yè)，只有在產(chǎn)品跑通商業(yè)邏輯，并具備一定用戶與盈利預(yù)期之后，才會對產(chǎn)品的體驗逐漸重視起來。
B .「 微小差異的不斷疊加 」
任何微小的差異，在無數(shù)次的疊加之后，都會被快速放大。特別是當(dāng)團隊的人員逐漸增多后，放大速度將會呈指數(shù)級上升。
為了配合產(chǎn)品的快速發(fā)展，產(chǎn)品往往會采用“堆量”的研發(fā)模式。增加研發(fā)效率，最簡單直接的方法便是投入更多的資源。隨著產(chǎn)品不斷增加模塊、功能、頁面，團隊人員也在不斷地擴充。
但是，人類不是機器，并非簡單的1+1=2。團隊數(shù)量的上升雖然會帶來效率的短期提升，但同樣也會增加團隊的管理成本。不同的產(chǎn)品經(jīng)理、設(shè)計師、研發(fā)人員，對于產(chǎn)品的認(rèn)知是不同的。隨著團隊人員的不斷增加，“個體差異性”將會被不斷地疊加與放大。
就像“傳話筒”的游戲一樣，同一個事物，不同的人理解總是不同的，經(jīng)過多次的“傳話”以后，往往與原本的意思已經(jīng)大相徑庭了。
這種情況表現(xiàn)在產(chǎn)品設(shè)計中，則會出現(xiàn)：當(dāng)相同的組件由不同的人做時，總是會在基本樣式、實現(xiàn)原理、交互細(xì)節(jié)等不同的維度出現(xiàn)差異。比如上圖中的導(dǎo)航菜單組件，不同的模塊在開發(fā)時總是會存在差異，最后差異越來越大，形成了五花八門的導(dǎo)航菜單形式。
C .「 產(chǎn)品發(fā)展進入惡性循環(huán) 」
令人遺憾的是，雖然問題很明顯。但是在不斷的“成本考量”中，產(chǎn)品團隊往往優(yōu)先關(guān)注新功能的開發(fā)，而忽略底層問題的優(yōu)化。
隨著產(chǎn)品的快速發(fā)展，產(chǎn)品的優(yōu)化/迭代成本將會逐漸大于研發(fā)新功能的成本。要么背負(fù)巨大的成本進行整體重構(gòu)；要么降低標(biāo)準(zhǔn)，繼續(xù)以這種模式不斷疊加新功能。
在這種情況下，大部分B端產(chǎn)品往往會選擇后者。于是，產(chǎn)品的發(fā)展將會進入一個“惡性循環(huán)”：
產(chǎn)品快速發(fā)展，功能不斷疊加；
各模塊由不同的產(chǎn)品、不同的開發(fā)研發(fā)，導(dǎo)致各模塊之間差異增加；
產(chǎn)品丑、體驗不統(tǒng)一，但老系統(tǒng)優(yōu)化成本過高。綜合衡量，優(yōu)先進行新功能研發(fā)；
所有模塊標(biāo)準(zhǔn)不統(tǒng)一，產(chǎn)品迭代效率持續(xù)降低，維護成本持續(xù)增加。
…
D .「 進入效率拐點，產(chǎn)品失控 」
產(chǎn)品的發(fā)展猶如一輛快速奔馳的巨型列車，一旦加速便難以停止。
隨著問題的反復(fù)出現(xiàn)，以及在一次次的“利益權(quán)衡”中選擇性的忽略，產(chǎn)品的惡性循環(huán)不斷重復(fù)，而問題也逐漸疊加、沉積下來。
當(dāng)這個問題已經(jīng)大到我們無法回避時，我們才發(fā)現(xiàn)：產(chǎn)品的單位迭代/優(yōu)化成本，已經(jīng)遠(yuǎn)遠(yuǎn)大于新功能的研發(fā)成本。而新功能帶來的增量，已經(jīng)無法抵消現(xiàn)有模塊的迭代成本——產(chǎn)品迎來了效率拐點。
就像一個龐大而復(fù)雜的機器，雖然依舊可以運行，但整體效率已經(jīng)很低了，而與之對應(yīng)的維修成本則非常巨大。小修小補根本無法解決問題，而大修大補則很有可能會帶來更大的虧損。
最終，產(chǎn)品逐漸在“失控”中難以自拔，競爭力逐漸降低，但整個團隊對此卻無能為力，嚴(yán)重影響了企業(yè)的發(fā)展。
那么，在產(chǎn)品發(fā)展中，我們應(yīng)該如何避免這種情況呢？換而言之，一個高度復(fù)雜的數(shù)字產(chǎn)品，我們應(yīng)該如何設(shè)計，才能避免其逐步走向混亂？
?
二、「 啟發(fā) 」從復(fù)雜科學(xué)的角度思考設(shè)計
-
如果我們將B端產(chǎn)品看作是一個復(fù)雜系統(tǒng)，那么產(chǎn)品“失控”的本質(zhì)即——在不斷復(fù)雜化的形態(tài)中，缺乏有效的控制機制，最終導(dǎo)致整個系統(tǒng)失去控制。
但是，在大自然面前，B端產(chǎn)品這種復(fù)雜程度顯然不值得一提。
像大自然這樣的復(fù)雜系統(tǒng)，是如何構(gòu)成的？所有的物體都由原子所構(gòu)成，為什么簡單的一百多種原子，能夠構(gòu)成如此復(fù)雜的世界？生命又是如何在無機物的世界中誕生，并逐步進化成如此復(fù)雜的個體的？
A.「 自然算法 」
道生一、一生二、二生三、三生萬物...無論是老子的《道德經(jīng)》，還是《深奧的簡潔》、《萬物皆數(shù)》、《復(fù)雜》這些現(xiàn)代的書籍中都闡述了這樣一個觀點：
任何看似復(fù)雜而又可控的系統(tǒng)，一定存在著精簡的“算法”，通過不斷的疊加從而形成復(fù)雜系統(tǒng)。
就像愛因斯坦說的：“宇宙最不可理解之處，就是它居然是可以被理解。”
在大自然中，有很多的花紋與圖案的形狀都存在相同的規(guī)律。比如上圖中的羊齒草分形圖案，這種圖案在森林當(dāng)中到處可見，我們看到很多樹的形狀跟葉子的形狀是一致的，這就是一種分形圖案。而這種分形的圖案本質(zhì)上是一個公式，通過不斷地自我引用進行迭代，這便是分形。
科赫曲線（Koch curve）就是一種分形。其形態(tài)似雪花，又稱科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫島（Koch island）或雪花曲線（Snowflake curve）。
它最早出現(xiàn)在瑞典數(shù)學(xué)家海里格·馮·科赫的論文中。我們將一根直線分成四段，然后向中間擠壓形成等邊的倒V形狀；接著再將每個倒V的邊進行相同的操作，不斷地重復(fù)之后，我們發(fā)現(xiàn)：第一步是倒V型、第二步變成了大衛(wèi)星，第三部變成了楓葉，第四步… 經(jīng)過無數(shù)步以后，最終成了越來越復(fù)雜的“雪花”形態(tài)。
科赫曲線便是“自然算法”的一種。海岸線雖然很復(fù)雜，但是卻有一個重要的特性——自相似性。從不同比例尺的地形圖上，我們可以看出海岸線的形狀大體相同，其曲折、復(fù)雜程度也很相似，換句話說，任意一段海岸線就像是整個海岸線按比例縮小的結(jié)果。而海岸線的構(gòu)成原理就是這種科赫曲線，它是通過天然的演化，不斷折疊最終形成了這種形狀。
可以發(fā)現(xiàn)，他們都是由 基礎(chǔ)物質(zhì) x 簡單算法 x 隨機變量，經(jīng)過無數(shù)次疊加后，最終形成了一個復(fù)雜而多變的整體。
B.「 物質(zhì)的構(gòu)成原理 」
宇宙中還有其他各種驚人的“巧合”。愛因斯坦的相對論揭示了宏觀世界的規(guī)律性，普朗克和海森堡的量子力學(xué)揭示了微觀物質(zhì)世界的規(guī)律。當(dāng)我們從微觀世界到天文學(xué)會發(fā)現(xiàn)——原子核的構(gòu)成方式居然與天體的構(gòu)成非常相似。粒子圍繞原子核的運動方式，就好像行星圍繞太陽運動一樣。
不管是整個宇宙，還是生命體，將其置于復(fù)雜科學(xué)的研究框架中，那些基本定律最終也會變得極其簡單。
在宇宙中所知最為復(fù)雜的形態(tài)，便是如同我們自身的生物。這些復(fù)雜體由已知存在于銀河系中最普通的物質(zhì)所構(gòu)成。但是，通過氨基酸的形態(tài)，這些基本原料竟能自然地將自己組合成一個自組織系統(tǒng)。
混沌中隱藏的算法，使宇宙成為極有秩序的地方。而在秩序中隱藏的隨機數(shù)，又使得宇宙成為極為豐富的世界。
也正是因為算法的精簡，一切物質(zhì)的創(chuàng)造才能具備復(fù)制性、延續(xù)性、進化性。
那么，我們反過來思考——想要使復(fù)雜的系統(tǒng)簡單可控，是否就需要一套簡潔、有效的“算法”？通過“算法”，將基礎(chǔ)的“物質(zhì)”不斷地“有序疊加”，形成一個可控的復(fù)雜體系。
因此，對于復(fù)雜的SaaS系統(tǒng)設(shè)計，我開始引入“設(shè)計體系”這一概念，希望能夠找到未來SaaS產(chǎn)品設(shè)計的發(fā)展方向。只有設(shè)計體系的建立，才能保證產(chǎn)品可控性，才能在不斷復(fù)雜系統(tǒng)中，保證效率、成本、體驗之間的平衡。
?
三、「 探究 」什么是產(chǎn)品設(shè)計體系？
-
產(chǎn)品設(shè)計體系，在國內(nèi)仍舊是較為陌生的詞匯。什么是設(shè)計體系？
A.「 定義 」
一個成熟的數(shù)字產(chǎn)品，需要有一個穩(wěn)定、且持續(xù)迭代的形態(tài)。創(chuàng)造這個形態(tài)的過程，我們稱之為廣義上的產(chǎn)品設(shè)計（這里指產(chǎn)品的整個策劃和設(shè)計過程，包含策劃、交互、視覺及部分前端開發(fā)）。而負(fù)責(zé)控制和維護這個形態(tài)的這套系統(tǒng)，便是產(chǎn)品設(shè)計體系。
我們接觸到的更多是設(shè)計系統(tǒng)（Design System），比如平臺級的設(shè)計體系，Apple、Google、Microsoft等系統(tǒng)級的設(shè)計系統(tǒng)，及其設(shè)計開發(fā)套件、應(yīng)用生態(tài)。公司級的設(shè)計系統(tǒng)，如Airbnb設(shè)計系統(tǒng)、IBM的Carbon設(shè)計系統(tǒng)、螞蟻金服的Alipay Design等。
但是，在一個企業(yè)內(nèi)部，想要Design System能夠系統(tǒng)性地運轉(zhuǎn)，還需要基于這套標(biāo)準(zhǔn)建立的團隊協(xié)作機制。只有設(shè)計標(biāo)準(zhǔn)與團隊協(xié)作標(biāo)準(zhǔn)完美融合，才能建立真正的設(shè)計體系。
B .「 組成部分 」
如果將數(shù)字產(chǎn)品比作復(fù)雜的“生命體”，產(chǎn)品的發(fā)展比作競爭中“自我進化”，那么設(shè)計體系便是產(chǎn)品的DNA。它既是產(chǎn)品形態(tài)的控制源，又是不斷自我迭代的進化源，它的作用是：
控制產(chǎn)品外觀——感知性模型（視覺風(fēng)格/規(guī)范）
制造基礎(chǔ)構(gòu)件——功能性模型（基礎(chǔ)/復(fù)合組件）
模塊的構(gòu)建規(guī)則——模式語言（產(chǎn)品框架規(guī)范）
產(chǎn)品標(biāo)準(zhǔn)定義、生產(chǎn)方式制定——協(xié)作模型（高度協(xié)同的工作流程）
它不僅能控制產(chǎn)品的“生產(chǎn)結(jié)果”，提升產(chǎn)品質(zhì)量；還能規(guī)范產(chǎn)品的“生產(chǎn)過程”，形成一套完整的多職能協(xié)作流程，提升產(chǎn)品的生產(chǎn)、迭代和維護效率。
從宏觀來看，設(shè)計體系像是一個“規(guī)范的復(fù)合體”，它是各職能之間規(guī)范的有效整合，產(chǎn)品框架、交互規(guī)范、視覺規(guī)范、前端規(guī)則，同時也是基于整合規(guī)范所創(chuàng)造的一套創(chuàng)新的工作模式。
C .「團隊能力要求 」
設(shè)計體系的建立，需要整個產(chǎn)品團隊擁有一致的目標(biāo)，并為之通力協(xié)作才能完成。這就需要整個團隊擁有較高的平均素質(zhì)與契合度。
同時，體系化的建立和推動，也需要團隊中有人牽頭去推動。設(shè)計師作為“產(chǎn)品-開發(fā)”的中間環(huán)節(jié)，是非常有條件成為推動者的角色的。
當(dāng)然，這就要求設(shè)計師擁有更豐富的橫向能力。
一方面，設(shè)計師需要將自身的能力邊界進行拓展，與上下游的職能保持密切的溝通，并解他們的訴求。只有當(dāng)設(shè)計體系滿足各方利益時，體系化才有推動的空間。
另一方面，對于產(chǎn)品側(cè)與開發(fā)側(cè)人員，設(shè)計團隊也可以通過培訓(xùn)來提升他們的能力邊界。比如針對產(chǎn)品的交互培訓(xùn)、針對開發(fā)人員的基礎(chǔ)審美培訓(xùn)等。這樣才能提升產(chǎn)品的下限與上限，增強產(chǎn)品的綜合競爭力。
D .「 構(gòu)建方向 」
設(shè)計體系并非超脫于產(chǎn)品之上，而是根植于產(chǎn)品的成長過程中。
想要推動體系化的建立，必須充分了解產(chǎn)品發(fā)展的基本規(guī)律。產(chǎn)品處于不同的生命周期，所要解決的問題是不同的。在正確的時間做正確的事情，并對未來的形態(tài)進行規(guī)劃，才能逐步讓設(shè)計體系根植于產(chǎn)品、融合于產(chǎn)品。
因此，在下一章，我們首先來了解一下B端產(chǎn)品的生命周期。
?
四、「 剖析 」B端產(chǎn)品的生命周期
-
對于設(shè)計師來說，首先要更宏觀地了解產(chǎn)品所處的生命階段，才能知道設(shè)計需要解決的問題是什么，并以此有針對性制定不同的設(shè)計策略，最終幫助產(chǎn)品構(gòu)建完善設(shè)計體系。
本章更多的是對B端產(chǎn)品的發(fā)展階段做一個剖析，而不同階段具體的實施策略，會在后面講解。
「 產(chǎn)品生命周期概述 」
類似于人的成長歷程，一個新的B端產(chǎn)品從誕生到逐步擴大，通常都會經(jīng)歷幾個不同的生命階段。
B端產(chǎn)品研發(fā)是一個漫長而系統(tǒng)化的過程。這個過程通常伴隨著商業(yè)業(yè)務(wù)發(fā)展與商業(yè)戰(zhàn)略模式的不斷調(diào)整。
B端產(chǎn)品從立項到下線，產(chǎn)品會處于幾個典型的不同狀態(tài)中，這就是產(chǎn)品的生命周期。通常來看，大多數(shù)產(chǎn)品都會經(jīng)歷以下幾個生命周期。初創(chuàng)期-成長期-成熟期，直至最終進入暮年期。
而產(chǎn)品的商業(yè)價值，也會伴隨著產(chǎn)品的發(fā)展而變化。在通常情況下，伴隨著產(chǎn)品的逐漸成長，其商業(yè)價值也會隨之增長，并在成熟期進入黃金的商業(yè)價值期。而當(dāng)商業(yè)價值出現(xiàn)大幅、持續(xù)性的降低時，則基本算是進入了暮年期。
那么，不同的生命周期中，產(chǎn)品將會遇到哪些問題？而為了保證產(chǎn)品的持續(xù)發(fā)展，產(chǎn)品團隊又需要做哪些事情呢？
A .「 初創(chuàng)期 」解決核心問題，產(chǎn)生價值
初創(chuàng)期，即產(chǎn)品已經(jīng)從構(gòu)思到研發(fā)，并成為了初步的產(chǎn)品。這個時期，產(chǎn)品雖然還不能覆蓋完整業(yè)務(wù)，但已經(jīng)能夠順利運行。
從構(gòu)思到創(chuàng)意，再到實踐落地。B端產(chǎn)品的誕生，通常源于在行業(yè)內(nèi)深耕多年的資深玩家。在不斷地實踐中，通過創(chuàng)意與實踐，找到了一條能夠幫助行業(yè)解決問題、提升效率的路徑。
1）用戶是誰？
B端業(yè)務(wù)的本質(zhì)，就是“向組織銷售服務(wù)來獲得盈利”。哪些企業(yè)最需要你的產(chǎn)品？哪一類用戶的問題最需要通過這種方式得到解決的？這些都是需要在早期非常明確的。
站在普羅大眾的角度去規(guī)劃產(chǎn)品固然是好的，但成功的產(chǎn)品都始于一小部分早期用戶；B端產(chǎn)品的用戶通常來自某一垂直領(lǐng)域，首先讓他們喜歡上你的產(chǎn)品，然后慢慢向外拓展至更大的人群當(dāng)中。
想想看，最初一千名喜歡你產(chǎn)品的種子用戶可能是哪些人？
2）產(chǎn)品能夠解決什么問題？
我們要為用戶解決什么問題？“用戶的問題”可能是一個需求、一個困擾或是一個機遇。他們的需求是否真的是痛點？
這個時期，團隊需要拜訪大量的目標(biāo)用戶，通過交流獲取痛點。我們必須驗證這個需求的真實性，以及我們的解決方案是否具備一定的可實施性。
我們可以通過更具象的UI或流程，初步展示想法，不斷優(yōu)化。最終形成一個可驗證的初步產(chǎn)品Demo，并通過Demo進一步與潛在用戶進行溝通。
3）這個問題是否普遍？是否具備標(biāo)準(zhǔn)化的可能？
不同企業(yè)的需求是有差異的，如何將個性化的需求抽象成共性的解決方案？如何權(quán)衡范圍與成本之間的關(guān)系？我們要將不同企業(yè)的需求進行抽象，形成標(biāo)準(zhǔn)化的解決路徑。
這個階段，我們需要為種子用戶創(chuàng)建方向聚焦的MVP。MVP必須是名副其實的最小化可行產(chǎn)品，要為種子用戶帶來端到端的精準(zhǔn)體驗。如果他們不理解產(chǎn)品功能，不知道如何或為什么使用，或是發(fā)現(xiàn)其性能低劣、bug 太多，無法達(dá)到“可行”的程度，那么你的假設(shè)就難以得到有效驗證。
4）是否能夠形成完整的商業(yè)閉環(huán)？
用戶是否真的會為這個產(chǎn)品買單？換句話說，產(chǎn)品是否能賺錢并且養(yǎng)活整個團隊？
B端產(chǎn)品在初創(chuàng)期，最重要的是快速驗證產(chǎn)品與業(yè)務(wù)的親密性，能否完成既定的商業(yè)戰(zhàn)略。產(chǎn)品團隊需要通過磨合業(yè)務(wù)，快速調(diào)整業(yè)務(wù)解決方案和產(chǎn)品架構(gòu)。
不僅是產(chǎn)品的打磨，整個團隊也要形成完整的閉環(huán)。工作流程、產(chǎn)品的商業(yè)運轉(zhuǎn)機制也要初步跑起來。產(chǎn)品的售前、解決方案、產(chǎn)品研發(fā)、實施、客戶成功，我們需要真實地完成這一套閉環(huán)的操作，并基于此做團隊毛利模型的測算。
解決問題，帶來價值，并且能夠?qū)r值轉(zhuǎn)化為收益，這才是產(chǎn)品可持續(xù)發(fā)展的關(guān)鍵。只有跑通完整的商業(yè)模式，擁有長期的盈利預(yù)期，產(chǎn)品才能順利進入下一個階段。
B .「 成長期 」能力完善，產(chǎn)品擴張
成長期，即產(chǎn)品形態(tài)初具完善，并具備完整商業(yè)閉環(huán)之后，處于快速成長的時期。這個時期，產(chǎn)品將進行快速的迭代，覆蓋的業(yè)務(wù)一天比一天完整，能滿足的業(yè)務(wù)需求越來越多，而產(chǎn)品為業(yè)務(wù)帶來的價值越來越大。
與新生期的區(qū)別在于，新生期時的迭代方向還未完全明確，迭代更多的是嘗試，磨合業(yè)務(wù)與產(chǎn)品。而在成長期時，產(chǎn)品的迭代方向已經(jīng)是非常清晰了的。
1）更多用戶，更多真實需求
產(chǎn)品在真正投入運營之后，所遇到的情況一定與MVP時期有所區(qū)別。隨著產(chǎn)品的不斷售賣，我們將會接觸到越來越多的真實用戶，以及更多的真實需求。而這些用戶與他們的訴求，將會成為產(chǎn)品發(fā)展的指引。
2）解決更多問題，業(yè)務(wù)范圍擴張
經(jīng)過長期的打磨，產(chǎn)品的形態(tài)和可用性已經(jīng)初步成熟了，商業(yè)模式也已經(jīng)初步跑通。隨著更多的真實需求，產(chǎn)品將會選擇有價值的方向擴張業(yè)務(wù)范圍，從“解決一個問題”逐漸走向“解決一系列問題”。
3）功能完善，產(chǎn)品體量快速增加
伴隨產(chǎn)品的快速迭代，產(chǎn)品的基礎(chǔ)功能會逐漸完善，同時也會基于核心功能去搭建更為豐富的功能矩陣。更多的能力、產(chǎn)品模塊、頁面，最終逐漸疊加為一個完整的大型產(chǎn)品。
4）組織逐漸完善，人員專業(yè)化
隨著業(yè)務(wù)擴張，組織架構(gòu)逐漸完善。為了提高專業(yè)性與效率，團隊人員從“多面手”逐漸轉(zhuǎn)化為專業(yè)化方向。與之對應(yīng)的是，團隊成員的數(shù)量也會在這個時期快速增加。售前、解決方案、產(chǎn)品研發(fā)、實施、客戶成功，這一套完整的團隊模型在各模塊中不斷地復(fù)制。
C .「 成熟期 」效率提升，快速增長
成熟期，即產(chǎn)品的形態(tài)已經(jīng)穩(wěn)定，并能夠創(chuàng)造持續(xù)的商業(yè)價值。處于成熟期的產(chǎn)品，肯定是已經(jīng)進行商業(yè)化運行的。反之，沒有達(dá)到預(yù)期的商業(yè)價值的產(chǎn)品，不能算成熟期。
進入這個階段時，產(chǎn)品已經(jīng)實現(xiàn)了產(chǎn)品-市場匹配。但是，我們需要對整個產(chǎn)品、以及團隊進行一系列的調(diào)和與優(yōu)化，才能讓整個產(chǎn)品的形態(tài)與運作方式更加合理，以便將產(chǎn)品推向更廣闊的市場。
1）產(chǎn)品效率、組織效能提升
經(jīng)過一系列的快速發(fā)展，產(chǎn)品體量通常都會比較大，而團隊成員也快速擴張。隨著一致性成本、溝通成本增加，勢必會造成研發(fā)效率、組織效能會下降。因此，如何降低產(chǎn)品的單位研發(fā)成本？如何讓整個團隊的組織效能達(dá)到最佳狀態(tài)？是需要解決的問題。特別是當(dāng)產(chǎn)品具備一定的客戶數(shù)量以后，單位研發(fā)成本的降低將會極大提升產(chǎn)品整體的利潤率。
2）產(chǎn)品設(shè)計-研發(fā)標(biāo)準(zhǔn)化，構(gòu)建完整鏈路
通過產(chǎn)品設(shè)計-研發(fā)標(biāo)準(zhǔn)化、數(shù)據(jù)架構(gòu)標(biāo)準(zhǔn)化，打通不同模塊的壁壘，提升模塊化與靈活性。將單點之間的競爭力相互配合，形成“場域”競爭力。
產(chǎn)品的單點也許不能保證都有最佳的競爭力，但如果我們能夠提供一系列的、高質(zhì)量、無縫銜接的配套服務(wù)形成閉環(huán)，將會形成強大的整體競爭優(yōu)勢。同時，產(chǎn)品設(shè)計-研發(fā)標(biāo)準(zhǔn)化，能夠增加產(chǎn)品售賣的靈活性，通過靈活的組合方式吸引不同的用戶，提升銷售靈活性與成單率。
3）提供高質(zhì)量的用戶體驗
產(chǎn)品最終是給人用的，用戶體驗也會在將來逐漸成為B端產(chǎn)品的核心競爭力。隨著競爭的加劇，以及用戶群體的逐漸年輕化，用戶體驗將成為企業(yè)在選擇產(chǎn)品時的重要考量因素，也是口碑傳播的重要途徑。
由于在“產(chǎn)品-市場匹配”階段需要盡快地推出產(chǎn)品，所以在設(shè)計開發(fā)過程中可能遺留諸多問題，需要進一步打磨優(yōu)化。產(chǎn)品設(shè)計需要與開發(fā)具備高度的一致性，視覺交互是否合理，前端代碼是否準(zhǔn)確合理，操作反饋是否高效等問題，都需要這個階段來進行調(diào)和。
4）教育市場，賣給更多的人
當(dāng)產(chǎn)品逐漸成熟并具備一定體量之后，單靠銷售跑單是遠(yuǎn)遠(yuǎn)達(dá)不到發(fā)展要求。這個階段，需要市場部人員對市場進行教育，聚焦不同的行業(yè)領(lǐng)域，從“點式營銷”轉(zhuǎn)變?yōu)椤懊媸綘I銷”，并配合銷售人員進行產(chǎn)品的售賣。因此，在這個階段，產(chǎn)品的品牌力、核心能力的傳播將至關(guān)重要。
D .「 暮年期 」商業(yè)價值降低，發(fā)展逐漸停滯
暮年期，即產(chǎn)品發(fā)展停滯甚至倒退，逐漸失去商業(yè)價值的產(chǎn)品。
B端產(chǎn)品進入暮年期的原因，主要有兩個。一是，伴隨著業(yè)務(wù)的發(fā)展，產(chǎn)品已經(jīng)很難滿足業(yè)務(wù)需求。且翻新產(chǎn)品的投入產(chǎn)出比較低。二是，伴隨產(chǎn)品的使用時長，產(chǎn)品將變得臃腫和遲鈍，逐漸難以敏捷地滿足業(yè)務(wù)需求。
很多時候，商業(yè)環(huán)境的快速發(fā)展、技術(shù)的更新迭代都有可能成為產(chǎn)品進入暮年期的原因。對于暮年期的產(chǎn)品，根據(jù)商業(yè)戰(zhàn)略，產(chǎn)品經(jīng)理既有可能要延長產(chǎn)品的壽命，也有可能持續(xù)保障產(chǎn)品完成順利換代。當(dāng)然，更多暮年期的B端產(chǎn)品，由于業(yè)務(wù)的調(diào)整，最終迎來生命的終結(jié)。
需要注意的是，很多產(chǎn)品因為在成長期、發(fā)展期無法建立有效的產(chǎn)品控制機制，導(dǎo)致產(chǎn)品過早的進入臃腫階段。也就是前文中所講的“產(chǎn)品失控”，非常有可能加速產(chǎn)品暮年期的到來。
因此，是否能在前三個階段建立健康、完善的設(shè)計體系，是產(chǎn)品能夠獲得更長生命力、更多價值的關(guān)鍵。
?
NEXT
「 下期預(yù)告 」設(shè)計體系的構(gòu)建法則
-
你的B端產(chǎn)品處于什么生命周期？在這個階段產(chǎn)品要解決的問題是什么？而在這些過程中設(shè)計體系又應(yīng)該如何構(gòu)建？
設(shè)計體系的建設(shè)并非一蹴而就，通常是伴隨著產(chǎn)品的而發(fā)展逐步建立的。在下一篇文章中，我們將基于B端產(chǎn)品的發(fā)展階段，帶你詳細(xì)了解設(shè)計體系的正確構(gòu)建方式。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn