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