往往偉大的事業都是從七月開始的、我用一個設計師的視角，來盤點一下UI/UX行業這半年的設計風格走勢。
以下我從色彩、圖形、圖標、排版、行業趨勢這五個層面進行一些2021年中期盤點總結。
在色彩方面，雖然UI是一個相對獨立的設計環境，但其實一直是在跟隨平面的趨勢。
年初潘通發布了2021年的色彩流行趨勢，灰黃色一時間成為了我們追逐的目標。
但是潘通流行色更多是表現了一種當下的社會情緒與遠景追求，并不是用來指導設計的。
(圖片來源：Dribbble)
在UI的色彩方面，我們都記得2020年還是流行的是高飽和色彩路線，而2021年UI色彩一下子就被沖淡了，各種低飽和度色彩的作品更加得到設計師的青睞，似乎也昭示著大家的情緒也從疫情中慢慢穩定了下來，這個世界的確需要設計來對情緒進行即時表達，在5月份Google的全新Material You設計語言中，這種低飽和色彩也被發揮的淋漓盡致。相信低飽和度色彩將在2021下半年會延續發展！
有關Material You信息可以看一下我的另一篇文章《Material You 為你而來！》
(圖片來源：Google Material You)
(圖片來源：Dribbble)
圖形方面，亮點在3D！毫無疑問3D插畫在2021上半年繼續著他的強勁勢頭，2021上半年涌現出了大量優秀的3D風格插畫，并且不止是3D卡通人物，在產品渲染和背景展現上也在醞釀新的力量。特別說明的是，設計工具的高速發展也讓3D門檻不斷降低，如果你只盯著C4D那就真的OUT了，像Blender Spline Stager 這樣的新興輕量級3D工具軟件是需要特別關注的，也許這些新工具是真的能讓你跑出與別人不一樣的賽道。
(值得關注的3款新興3D軟件)
在2D圖形方面，也有突破，除了傳統的矩形、圓角矩形、圓形之外，UI中將會引入到更多的形狀，像多邊形、三角形、不規則形都會大量的出現在UI設計中，UI設計越來越開放和放得開了！
(圖片來源：Google Material You)
隨著去年底蘋果BigSur操作系統的發布，3D圖標著實火了一段時間，出現了不少3D風格圖標。但是后來大家發現在圖標在2D層面其實還是很有創新點的，并且也更加實用，所以我們又看到了磨砂玻璃風格圖標走入了我們的視線。這種采用背板透光設計的風格圖標，看起來清新自然，一經亮相就讓設計師們喜歡起來了！
(圖片來源：Dribbble)
但無論是3D風格還是磨砂玻璃風格圖標設計，從某種意義上說，這些都是擬物化設計的一種新的回歸方式，設計就是一個圈哪！
排版設計，塊狀與字體成為了關鍵詞。先看幾個作品，你發現了什么了嗎？
(圖片來源：Dribbble)
UI設計的排版不止是為了視覺好看，更多是要做信息的分割與歸類，讓信息閱讀快速準確且優雅！從某種方面也就是我們說的用戶體驗。當下仍然是扁平化為主體UI設計語言的時代，陰影設計幾乎已經退出了當下的主流設計，所以在信息的區分上靠的就是留白與文字，所以加粗大字體，卡片留白、形狀色彩塊就在UI排版設計中起到重要的作用。再輔助通過一些微交互動畫，一切都是那么自然絲滑，主次分明！
(UI排版的三個趨勢)
最后我們說說行業趨勢方面，在2021上半年的UI設計作品中，除了常規的移動端APP UI設計之外，我們更多看到了一些針對于其他設備的UI設計，比如說電腦B端應用、車載HMI、數據可視化、交互動畫等這樣的新端趨勢，并且這些作品的數量越來越多了，所以從行業趨勢來講，UI設計師們還是要打開更多的眼界和格局，設計的競爭不止是在水平能力上，更重要的是行業賽道的選擇！關注趨勢尤為重要！
(圖片來源：Dribbble)
(需要關注的四個新端設計趨勢)
用我開頭的那句話，做個結尾吧！ 往往偉大的事業都是從7月開始的，無論你上半年是碩果累累還是顆粒無收，現在開始！一切都還來得及，還來得及！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
相信大家在做設計的時候都遇到過這種情況，一個產品內有多個入口指向同一個界面，這是產品的投機取巧還是另有深意，很多人都對這樣的設計有不同的看法。
這樣的設計就好像是狡兔三窟，在產品中流量可以從不同的入口進來，到多個不同的出口，也可以從不同的入口進入同一個地方。
有人會覺得如果一個界面中有多個入口指向同一個界面會出現問題：
1.違反了效率、用戶預期的原則，會認為頁面空間有限，在同一個界面中有多個入口指向一個界面效率變低，而且用戶知道后往往就會只從一個入口進入。
2.多個選擇會讓用戶拉高轉化的成本，用戶在選擇的時候會花更多的時間思考有什么區別。
我們來看一個例子，下面德邦app之前的一個版本，目前已經優化了。從截圖中我們發現頁面上方的查詢和寄件都和底部標簽單獨出來的界面功能重復了，并且我的快件也直接可以展示在首頁的下方，我的快件目前可以從首頁頂部、首頁下方和個人中心3個入口進入查看。
通過這個案例我們發現確實這些板塊和功能重復度太高，并且沒有區分出場景，這樣的設計證實了以上的兩個說法，降低用戶使用效率和提高選擇成本。而且從業務角度看也并沒有目標的差別。
但是我們分析問題也要多角度去觀察，多個入口進入同一個界面只有缺點沒有優點嗎？
顯然不是，我們再來看幾個案例
下方是一個商品評價的卡片，經過我小手的實際測試，發現無論點擊這個卡片任何有內容的區域，都會跳轉到全部評價的界面，那這樣的設計邏輯是否會造成和上面的案例一樣的問題呢？答案是，不會。
這里的設計邏輯并不是和沙面那里的場景那么單一，而是用戶在面臨不同需求場景的時候可以有選擇。
不知道大家有沒有發現一個問題，在上面德邦案例的時候，你會對兩個入口有疑問，但是在評價卡片的時候并沒有，這個卡片包含了4種不同的場景：
1.我想看看有哪些好評、哪些差評
2.幾個不同標簽的用戶都是怎么說
3.下面用戶的實拍到底是不是真實的
4.還有沒有更多類似真實用戶的使用評價。
所以即便最終到了一個界面，對于用戶來說也是從獨立的出發點開始的，而再回過頭看上面案例，你會發現，我就是要寄東西，這里有兩個入口，怎么選。
而且，考拉這里其實還做了從不同內容點進去的一個區分。
再來看個案例，貝殼的地圖找房，在首頁中有兩個入口，導航欄一個，分類中一個，這里出現重復會造成一開始說的問題嗎？首先我們看到貝殼的業務很多，以至于在這個分類中居然還需要通過滾動指示器來展示剩余內容，大家也可以思考一下，在這個界面中，會不會出現兩個地圖找房不同的場景出發點呢？我個人覺得其實是可以商榷的，首先地圖找房在房產app中是很核心高頻的一個功能，他的屬性是“工具”。
所以我覺得他之所以在卡片中再放一個地圖找房是3個原因
第一個是導航欄的找房肯定不能動，他是一個全局的入口，即使頁面滾動也可以隨時點擊到，即便要撤一個，也肯定要撤下方卡片分類中的。
第二個是卡片分類中的圖標入口是都具備工具屬性的，那首頁上面部分就分為了：搜索、業務分類、工具這三塊。所以用戶看到這些工具屬性也會聯想到通過地圖去找房。而且這些多色彩的圖標對于新進入的用戶是比較吸引注意力的，所以很有可能用戶看不到右上角的地圖找房（可以參考古騰堡圖表的原則）。
第三點是可能右上角的地圖不太能清晰表達這個圖標的具體功能，所以將“地圖找房”四個字顯示全。
但這些都有一些主觀因素在里面，如果真的去掉卡片中的，我覺得可能影響也并不是很大。有小伙伴可能想說是為了分流，但是分流的目前主要是讓流量流到他應該去的地方產生實際價值，除了以上的3個原因，好像確實有點重復了。
再來看一個例子，小鹿茶app。
首頁的現在下單和底部菜單標簽都是到同一個界面，那為什么要重復呢？這里其實考慮更多的他并不想讓用戶進來就直接去購買，為什么不直接購買呢？應該是想要建立自己的品牌人設、滿足更多的消費場景和增值業務，比如給別人點奶茶、周邊的杯子跟合作商品推銷、最新的奶茶的推薦。
如果只有菜單，產品也會顯得更工具化，很難突出自己的品牌，對業務增長沒有太大的幫助。有同學要說，那這個界面只是產品的“一廂情愿”，我就只要點奶茶就可以了，多個入口只會給我帶來困擾。所以他這里的設計邏輯是在用戶打開app的時候首先定位的是菜單，而不是首頁。
所以，到底多個入入口進入同一目標我們還是要看不同的場景和目標的。如果既沒有業務目標做支撐，又沒有用戶場景的變化，那么這個重復的入口就是雞肋的。
最后留一個小思考題：網易云音樂的“歌單”在首頁上也重復了，大家知道這里為什么他要做成重復入口嗎？
一個優秀的產品或者說一個合格的產品，能給用戶帶來愉悅的體驗。何為體驗，用大白話來說就是用的舒服、自然、高效率。
再有一個底線就是不要讓用戶產生由產品帶來的負面情緒，例如產品出錯了卻不告知用戶解決方法、用戶出錯了沒有辦法及時幫助糾正、高危操作沒有二次確認等等，根據負面情緒的嚴重程度幾乎就可以直接讓部分用戶流失。
很不幸的是我就遇到了這樣的體驗，當時正在給同學們布置一些作業練習，體驗一些產品的優缺點并給出解決方法。我也下載了這款文玩類的App，體驗了極速撿漏這個功能模塊。
撿漏：在文玩圈的一句行話，意思就是用很便宜的價格買到很值錢的古玩，而賣家卻不知情，是一種可遇不可求的行為，所以寓意就是比較難得、走好運了。
進入直播間，商家在賣力吆喝，頁面底部有加一手的按鈕，就是類似于拍賣，價高者得。于是我就抱著試一試的心態點了加一手按鈕，因為我預期是產品會再次向我確認是否要加價，結果是居然加價成功了，發生了什么？最后競拍結束也沒有人繼續加價了。
實際場景中用戶可能誤操作不小心點了按鈕，這樣的場景和情況是非常多的，即便不是誤操作，給一個二次確認的對話框也可以避免這樣的尷尬狀況，因為用戶就喜歡在產品中點來點去，然而你在這里就像埋了一顆地雷。
如果到這里就結束了，那其實我也感覺沒必要去吐槽，問題在于當我拍下還沒付款，直播間的商家就開始喊我的名字：xx大哥恭喜你拍到了我們的產品，可以去付款了。連續播報了幾十遍，我尷尬的直接退出了后臺，這種感覺就像是一群觀眾看著一個被騙的小白一樣，當我過10分鐘后打開系統提示商品流拍了，并且累積了違約積分。
？？？
到這里，可能會有人說，你自己拍了的又不付款，當然要懲罰你了。
于是我還是認真的去研究了一下，發現極速撿漏和競拍并不是同樣的規則。該產品和競品其實都有競拍板塊，在競拍板塊都會有需要用戶確認的操作，并在操作下方給出拍賣規則，顯示出價即表示同意拍賣規則。
但是該產品極速撿漏的板塊并沒有這樣的說明，既然沒有提前展示這樣的說明和約定，用戶就不知道有這樣的規則，我拿了競品一對比，其實在直播帶貨的場景下，這個出價流程還是不同的，雙方其實都沒有給規則說明，但競品還是給了一個出價選擇后再出價的步驟。
最后我甚至被商家拉黑了，不過還給我一個投訴商家的入口
我當時的想法：
1.如果因為誤操作讓用戶付出這么大代價的話成本就太高了。讓用戶點擊是否就等于用戶同意？
2.請先告知我約定與協議的內容，單方面在我不知情的情況下對產品進行操作后，通知扣我違約積分，這樣就有點“霸道”了。
3.平臺對商家和消費者的權益是如何平衡的，文玩行業和互聯網結合的難點在哪里。
3.線下文玩圈的一些不成文行規，導致新人入圈后產生的沖突。
于是我就想對此說說我的看法
交易是產品平臺其中的一個功能屬性，需要優先滿足產品對用戶價值，其次再談交易的合理性。在這個流程中，面對用戶很有可能遇到的誤操作行為以及需要讓用戶去下單支付成本，我們必須提前告知用戶。在尼爾森可用性原則中我們也發現了，如果用戶不小心操作失誤，那么我們盡可能減少這些因為用戶犯錯帶來的成本，同時在用戶犯錯之前就要明顯告知用戶，將風險控制、前置。
所以，你在注冊的時候、登錄的時候，產品一定會讓你同意一份用戶協議，告知你我們要保存你的數據和一些跟你相關的信息，如果你不同意，那就無法繼續體驗產品。
這是一種契約。
同理，如果你想讓用戶在這個產品中去參與拍賣，在進入這個板塊之前或者用戶點擊按鈕之后，也需要讓用戶明確這個操作帶來的風險是什么，取得用戶的同意。而不是直接讓用戶加價成功，導致用戶不明所以的被扣違約積分、被商家拉黑，這就和你去泰國，在街頭你朋友拍了一張你和一個抱著蜥蜴的人的照片，結果別人來問你收錢是一個道理。
對于正常線下拍賣的流程，舉辦方也會對參與拍賣的人員進行相關規則、流程的告知，并且將風險、問題都提前讓客戶進行協議確認。
所以，在產品中的交易，必須先滿足用戶與產品信息之間的對稱關系，保持信息的透明和契約公正，規則、約束、條件是用戶使用你產品的前提和體驗反饋的衡量標準之一。
商家希望有更多的流量來曝光商品，撿漏商品的低價可以快速吸引一大批用戶，比如8塊錢的一個木頭核桃的雕刻掛件等，產品通過營造搶購、限時的氛圍，吸引用戶下單，并且降低用戶參與的門檻。
那么，直接加價成功是一個好的降低門檻的策略嗎？我覺得并不是，降低門檻并不意味著就是直接拍到，而是需要提高用戶對產品的信任度，這個極速撿漏的模塊的目標用戶幾乎都是小白用戶，因為資深的玩家看不上、更不會買，有一定經驗的玩家也看的出好壞，明白它的價值。所以面對這些沒有了解過文玩產品的小白玩家來說，內心是謹慎的。
可能有人會想，這幾塊錢、十幾塊錢的東西還需要考慮嗎？當然在這個場景中，從眾心理是很明顯的，大家都覺得很便宜，但就是沒人拍。這都幾塊錢撿漏了怎么都沒人要，大部分人都覺得這么便宜東西肯定不咋樣，運費是不是貴的離譜、有沒有托在背后跟你抬價呢？大家都不拍我也觀望。越多人圍觀，越難促成交易。
還有一種可能就是我賣不賣的出去東西，并不重要，重要的是有人來看了，這些邊角料都是用來回饋直播間粉絲的，就是一個窗口，真正有利潤的東西在櫥窗里。所以這里的撿漏只是一個引流的噱頭。
人總是對太輕易得到的東西不珍惜，更何況是幾塊錢的小玩意兒。所以針對直接拍下這個交互，個人認為是不妥的，無論是上面任何一種情況，都沒有辦法讓降低門檻，甚至通過這種“小聰明”反而會讓用戶更加不信任產品和用戶。
不信任產品是大。尤其是作為一家平臺來說，虛假交易、以次充好、濫竽充數等等行為是致命的。
我其實有玩過一段時間文玩，受我老丈人的影響，有一段時間喜歡玩手串、玉什么的。經常也會在某音去刷一些鑒寶類的視頻，很有意思。
文玩它的價值在于品相、稀有度、盤玩程度、大眾接受度、歷史背景還有工藝等等。所以它并不是一個在每個人心中同等效用的商品，同樣一塊玉，他的種水一般，但是花紋很獨特，買賣雙方其實心理的價值預期會相差非常多，它就不像買電子產品一樣價格那么透明容易計算。
有的人玩這些就是覺得命里該有它，它能給我帶來財、運，幫我辟邪，看的是眼緣。而不是路邊上一塊無用的石頭，可以隨意拾取丟棄。那么換句話說，如果在用戶下單的時候，我們利用一些情感化的文案，讓用戶喜歡上這款文玩，是不是也可以大概率的促進交易呢？
我相信很多玩文玩的小伙伴都知道，在文玩圈有一些不成文的行規。也或許就是因為這些行規出現到了線上產品中。
1.還價意味著出價，出價意味著買下
在文玩圈，你不想買就不要還價。如果賣家同意了你的還價，那你就必須買。這代表著你個人的信譽和道德品質。
所以文玩圈和互聯網的用戶之前有許多的鴻溝需要一步一步建設橋梁，不能單純的以線下圈子內的行規來要求剛接觸這個圈子的互聯網用戶，這需要大家一起努力和營造起一個良好的文玩圈的文化和規則，而不是直接生搬硬套，提高這個門檻。
2.不要打聽別人的成本
文玩沒有實際的成本，可能別人花10塊錢淘到的價值1萬塊的東西，也可能別人花了巨資看走了眼。所以你知道了成本對誰都沒好處，別人也不會告訴你。
3.別人在交易的時候保持沉默
文玩在每個人心中的價值不同，所以貨幣價值也不同，當別人在詢價還價的時候，不管怎樣我們都不要去表明自己的看法和想法。
當然還有其他的規則就不一一敘述了，針對這3條，其實在互聯網的產品中是會有沖突存在的。例如你買了某個文玩，你一拍下，別人就說這個根本不值這個價錢。還有你出價了但是又不想買了，這些原本在文玩圈子中不允許的規則，在互聯網上去要求用戶著實有點困難，因為互聯網上的交易并不一定所見即所得，可能展示的是這樣，收到貨又是另一個東西。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計行業每天發生著翻天覆地的變化，隨著專業的發展，我們也在不斷的學習新的技巧和趨勢，但同時我們也要明白，設計中那些基礎的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）「設計目標」：明確設計目標，設計者依據設計目標決策設計。
例如：“提交按鈕與表單輸入項對齊”是默認規則；當需要考慮按鈕是否適合放在右下角時，則可以遵循“右下角放置“完成類”意義的操作”的使用建議；“按鈕的設計應盡量幫助用戶避免犯錯。”則是設計目標。
目前，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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn