用戶喜歡在網上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個用戶都為此而樂此不疲。
很多互聯網產品在用戶點擊收藏后，讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇，他們只想簡單的把自己喜歡的東西收藏下來。
選擇本身并不是一件很容易的事情，尤其是對于那些有選擇困難癥的人來說。實際上，我每次都是選默認那個。
這并不是一個好的用戶體驗。
當然也有一些做的很好的體驗，比如微信的收藏，收藏后會出現一個“收藏成功”的非模態反饋。
同時可以添加標簽，但這個并非強制，為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說并不需要用戶去創建自定義分類。
你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。
網站會根據你采集的圖片在極短的時間內，自動識別出圖片對應的收藏夾類型?？梢灾苯硬杉綄奈募A。
然而經過測試，經常會出現誤差。因為圖片的分類其實很復雜的，屬于高度自定義，很顯然，智能識別并不是一個好的解決方案。
花瓣是一個設計師收集靈感的網站，該網站常見的用戶使用場景是，設計師在瀏覽素材時，會大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來花瓣網加入了快速采集的功能，其邏輯是網站會默認選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。
社區類產品有各種點贊，收藏等互動信息，但用戶又不想被別人知道這些信息。
因此，在規劃產品時需要考慮到用戶互動隱私的保護，這是用戶側的剛性需求。
抖音個人主頁的點贊列表，我記得剛開始是公開的，且不能設置為私密。
用戶點贊的視頻會出現在這里，卻少有人希望這些信息被別人看到，總有些點贊視頻你并不想被別人看到。
如果點贊列表可見，那么用戶在點贊的時候就會有所顧慮，這不利于平臺的互動率。
特別是隨著抖音上熟人也越來越多，強關系社交場景在漸漸加強。
抖音后來也發現了這個問題，把它設計成了默認隱藏。（當然可以自己設置為公開，但只有極少數用戶會這樣做。）
由于點贊是私密的，用戶可以隨心所欲的點贊自己喜歡的視頻，毫無社交壓力。
這是為何？
源于人性心理學：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設置了權限，畢竟，誰想被別人窺視當年那個煞筆的自己呢？
現在訂閱號打開率越來越低，朋友圈分享曾是訂閱號流量來源的一大入口。
朋友圈早已淪為了一個人設打造的陣地，現在的人發圈越來越謹慎。
用戶似乎越來越不愿意在朋友圈分享文章了，除非是有利于自己人設打造的內容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點了“在看”后，此文章會出現在看一看這個模塊，且七天前的分享將不可見，這就相當于一個弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對于公眾號主來說，相當于增加了一個流量入口，激發他們創作更多的內容。
視頻號點贊也是同理，會被朋友看到，導致用戶在點贊的時候就會有所顧慮。
他會考慮，我點贊了這個視頻，我老師、上司、父母、親戚、朋友會不會看到？他們會怎么想？
但他在抖音上點贊是沒有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關系平臺；
第二，抖音上的點贊默認是私密的。
因此，微信才推出了私密贊的功能，需要長按才能觸發。
這并是一個優雅的解決方案，一是操作成本有點高，二是用戶存在較高的學習成本。
微信作為一個強關系社交場景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時用過mac OS和windows系統的用戶不知是否發現，這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過來，確定在左，取消在右。
為什么會有這樣的差異？哪一種更加合理？
在交互設計中，這種彈窗叫做模態反饋，艾倫·庫珀在《About Face 4》中提到：模態模式一種臨時模式，它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。
首先我們要明白這兩個按鈕哪個使用率更高，一般來說，“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。
所以這兩個按鈕在視覺上一定要做出差異化，“確定”的視覺層級要高于“取消”，這樣用戶才會一目了然，不會感到困惑。
回到剛才的問題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習慣是從左到右，所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。
mac彈窗的背后邏輯：
根據一般的任務的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進入下一步任務流程。
看上去似乎都有道理，這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性，讓用戶形成操作習慣就沒有啥問題。
從個人的使用習慣而言，個人更傾向于mac的這種方式。
手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側或都放在右側，前者以iPhone為代表，后者以安卓手機為代表。
這兩種方式有什么區別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來看看都放在右側會有什么問題，以下使用場景相信用戶不會陌生：
用戶a，在地鐵上玩王者，聲音有點大，想把聲音調小，結果不小心按到了電源鍵，導致手機息屏，而此刻你正在激烈的團戰，內心有一萬只“草尼瑪”奔騰而過……
用戶b，每次按電源鍵（解鎖或鎖屏）都會不小心同時按到音量鍵，結果直接就截圖了！這種情況發生了不止一次，因為這兩個按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時大拇指會觸碰到，左手拿時中指剛好會觸碰到，而電源鍵又有指紋鎖功能，導致手機在不斷的解鎖，而你毫無察覺……
通過上面的案例，可以得出結論：若按鍵都放在右側，會導致用戶經常誤觸而造成不必要的麻煩。
放在兩側就不會有這樣的問題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔心按錯，減少誤操作的幾率。
值得一提的是，iPhone手機的電源鍵一開始是位于頂部位置，這是為何？
因為剛開始時手機都是小屏幕（3.5～4寸左右），對于iPhone5S及以前的手機來說，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來隨著手機大屏的趨勢（4.7寸以上），這個時候單手已經不方便按到頂端了，從6代開始就把電源鍵放在右側了。
但無論是哪種方式， 兩個按鍵都是分開放。
還有一個小細節，iPhone的實體鍵不是在右側正中間，而是在靠上的位置。
iPhone設計理念是單手持握，并且大多數人右手握手機，大拇指經常會碰到右側邊框，若果放中間，這樣會造成誤觸音量鍵和靜音鍵。
其實上面的案例3就已經說明了按鍵放在中間的弊端。
我想起了當年的錘子T1，左右按鍵一樣大且位于兩側的中間，這是典型的為了追求完美的對稱而向用戶體驗妥協。
iPhone從初代開始就已經建立了自己的設計理念，不管是工業設計還是界面設計，并沿用至今。
從初代開始，iPhone機身左側音量鍵上方就有一個靜音鍵。
這些年來，iPhone一直在減少各種實體按鍵以及外部接口，比如3.5mm耳機孔、home鍵。
但直到如今這個靜音鍵卻一直保留下來，為何iPhone對于這個按鍵情有獨鐘？
靜音鍵開啟后，任何來電或通知都是無聲的，震動也會消失。
在無需點亮屏幕的情況下實現一鍵靜音，方便快捷，深受用戶的青睞。
根據自身的使用習慣以及用戶研究，無非以下幾種使用場景，比如看電影、開會、上課等：
1.進電影院看電影前，我一般都會撥一下，避免在看電影的過程中被來電鈴聲打擾，影響了自己和別人觀影。
2.開會的時候也會撥一下，以防在開會的時候突然被來電鈴聲所打擾，避免不必要的尷尬。
3.學生黨在上課前一般也會開啟，這樣整節課都不怕打電話進來了。
總之，就是不希望自己的手機鈴聲打擾到自己和別人，帶來不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機，對著手機屏幕一頓操作。
而實體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個按鍵這么重要，卻很少看到安卓手機上有（除了一加基本上沒有）。
實體靜音鍵并非蘋果首創，之前的Palm、Blackberry（黑莓）早已有這樣的設計。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統還可以把靜音按鈕直接放在桌面上，設置靜音非常方便，也就沒必要再多加一個實體鍵了，顯得多余又徒增成本。
上面提到過的，作為安卓陣營唯一的靜音鍵，一加手機引以為傲的三段式按鍵，該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。
但個人認為這個設定復雜了，三種模式遠比兩種模式復雜。用戶并不一定能搞明白，有一定的學習成本。
在早期，iPhone的控制中心并沒有靜音按鈕，想要設置個靜音并不是一件容易的事情，而這個功能又是必須的，蘋果索性直接做了一個實體物理鍵。
這樣靜音的時候只需要把靜音鍵撥過來就可以了，一步到位，使用體驗也很好，所以一直保留至今。
雖然現在iPhone的控制中心已經加入了勿擾模式，但考慮到老用戶的使用習慣，以及品牌調性，蘋果對于這個實體按鍵的去掉還是顯得很謹慎。
考慮到之后iPhone在防水、機身內部空間的改進，不排除蘋果終有一天會取消iPhone上這個靜音鍵。
靜音鍵雖好，但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知，或者開啟后忘記關閉，導致錯過了一些重要的電話。
雖然開啟了靜音鍵，但并不是絕對的靜音。如果是鬧鐘，鈴聲還是會響起，因為鬧鐘的優先級要遠高于靜音模式。
蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵，或者開啟后忘記了關閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開啟了靜音模式，卻還可以調解音量大小的原因所在。細微之處方見真功夫。
在日常生活中，旋鈕是個很常見的東西，比如音箱，微波爐，收音機，老式電視，車載旋鈕……
在機械產品上，旋鈕凸起的把手和它下面的圓盤刻度，是最明顯不過的旋轉暗示，符合人的自然感知。
旋鈕式交互是個人非常偏愛的一種交互方式，我認為這種交互跟iPhone的home鍵一樣經典，主要原因有三：
旋鈕操作簡單，看到這種按鈕，一歲小孩子都會忍不住用手去抓。對于用戶來說，幾乎不需要學習成本。
在旋轉的過程中，可調大調小，一切盡在用戶的掌控之中，用戶感覺到有十分的安全感。
在調節的過程中，調大調小都能立刻收到即時的反饋，這是用戶最喜歡的交互方式。
我們在觸摸屏上很少看到這種旋鈕式交互，因為這種交互是要建立在抓住旋鈕實物的感受。
而觸控屏是個二維的世界，沒有真實抓握的手感，無法還原出三維世界的真實手感。
汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后，越來越多的國內廠家開始盲目跟風，把絕大部分的功能按鈕集成到屏幕中，比如空調，不僅不方便，行車中使用還容易造成危險駕駛。
車上的觸控體驗跟手機上是完全是兩碼事，使用場景也完全不同。最大的區別在于后者沒有安全問題。
都知道開車不玩手機，可是行車時操作中控屏跟玩手機有什么兩樣？
對于駕駛員來說更加安全，通過旋鈕調節空調，熟悉后完全可以實現盲操，邊開車邊操作毫無壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。
而安全是汽車駕駛的重中之重。
用戶的操作有真實的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。
軟件系統用久了會變卡，可能會死機，難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。
一旦屏幕失靈，或者系統死機了，那所有按鍵都失效了。
雖然特斯拉為了提升其車載系統的穩定性下了很大功夫，但是問題從來都沒有停止過。
但是硬件基本上很少會出問題，物理旋鈕才讓人100%放心。
無論廠家如何吹噓，虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。
因此，有一些實體鍵出于安全駕駛的考慮還是應該保留，將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
后記：
以上產品體驗涉及到3個軟件層面，3個硬件層面。其實產品體驗從來就不是軟件產品的專屬，而是體現在日常生活的方方面面。不要把自己僅僅局限于互聯網，不要老是沉浸在虛擬世界，回歸于現實世界，多觀察生活、體驗生活。
文章來源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這雖然是交互基礎的概念但對我們設計師來說也極其重要，概念雖然很簡單，但實際在設計中也會頻繁的遇到問題。我們先用比較正緊的文案來描述一下這些比較“枯燥”的概念，映射是一個術語，從數理理論借用而來，表示兩組事物要素之間的關系。（書中諾曼先生的原話）
上兩篇文章我們說的示能和意符，表示了事物本身具備或傳達的功能和被交互性，而映射則是表示了控制器和被控制對象的關系。
好的示能和意符的設計，可以讓映射變的自然。
第一篇示能我們舉了一個開關的例子，多控開關之所以讓人抓狂首先是缺少了意符的表達，其次是映射的不合理。就如同我們在書中見過的一個煤氣灶的案例，4個灶頭下方有4個控制開關，左右兩種不同的排列方法，體現出好的映射有多重要。
諾曼老師在如何設計映射中提到，自然映射設計可以分為3種層次
這三種映射的層次在體驗中的滿意度與效率一次遞減，我們依次在舉例說明
例如門把手在門上，我們就覺得這映射設計的很自然，通過轉動把手可以對門進行開和關。再例如我家的洗衣機上有一個用來選擇洗滌模式的旋鈕，洗滌模式圍繞在旋鈕的周圍，旋鈕上有光點，旋轉旋鈕光點就會旋轉到我們需要的洗滌模式上，這也是控件與對象一體的形式，滿足用戶對控制器與被控制對象的心理預期。
那在數字產品中我們也會遇到類似的情況，例如我們想展開放置在一個卡片中的文字，我們通常最好的方式是在文本的邊上設計一個提示展開的“可點擊按鈕”，再次的方案是放在文案的下方，最不可取的就是放在卡片以外的區域，因為映射關系逐漸減弱到無關。
再舉個例子iOS系統中如果要調節音量，可以在音量模塊中直接通過手指的滑動來調節，而不需要在模塊中或者模塊外部加上兩個用來增減音量的按鈕。不過說實話，華為的曲面屏雙擊側邊喚出音量控制模塊，個人覺得成本還要比物理實體按鍵更高一點。
除此之外，智能手機在逐漸演變進化的過程中，手勢操作功不可沒，利用手勢代替按鈕也節省了更多的成本并且在效率方面也得到了提升。例如視頻播放器的應用中，會有相應的控件用來控制視頻的播放、暫停、聲音、進度、亮度、橫豎等等，這些按鈕其實就是最佳的映射設計
這個也就是我們常說的格式塔心理學中的接近原則，因為越靠近越相關，很好理解。某些物件在設計時無法將控件和被控對象結合設計，那么我們只能退而求其次，讓他倆能更靠近一些，在映射關系上可以更清晰。
接下來我會給大家看我家的冰箱和電飯煲的操作界面，大家就知道，次佳的映射如果不好好設計，也會顯的很糟糕。
如圖所示，其實界面的信息設計無非就是這樣，如果你可以把這些界面的信息設計的有邏輯有層次，那么在其他的用戶界面中也能夠如法炮制。
例如電飯煲的烹飪模式和其對應的按鈕，都是通過點擊多次按鈕進行控制，而不是在單獨的模式中具有單獨的按鈕，而最好的方法那肯定就是想選什么模式直接選，而不是做一個按鈕來多次切換。
這里是因為本身這款電飯煲沒有智能面板，所以通過物理按鈕只能這么做，否則，按鈕一多就更難操作了。那有小伙伴問他能不能和洗衣機一樣做個旋鈕呢？當然也可以，因為旋起來也比多點幾次按鈕來的方便，只不過旋鈕做上去之后其他的按鈕可能也要變成旋鈕，在產品設計上就有更多的問題要探討啦。
所以我們再來看它的按鈕分布，發現其實控制按鈕和被控制的參數其實缺少了距離關系，當你看著想要控制的參數卻找不到控制按鈕的時候就會比較抓狂，因為在這個布局中既沒有滿足最佳也沒有滿足次佳，甚至連在空間分布上也無法產生對應。
然后我們再看這個電冰箱，這個西門子電冰箱的用戶面板我也屬實沒有看懂，但距離關系已經做的比咱電飯煲要好一些了，至少左右兩側的按鈕應該是控制左右兩側不同的溫度。
左右兩側分別是冷凍和冷藏的設置，但是中間只有兩個溫度，一共4個按鈕和兩個溫度，這顯然在自然理解下是不能理解的，這就和艾爾登法環里的boss們的關系一樣混亂，那4個按鈕為什么只有2個溫度呢，因為左側的兩個按鈕分別是切換不同的溫度設定，而右側的一個按鈕和溫度并沒有任何的血親關系，因為它就是一個鎖！不仔細看還以為它是用來控制溫度的，因為和其他三個按鈕太像了！這不就是在濫竽充數么。
這里的兩個案例我們發現，在次佳的映射中，其實就對格式塔心理學里的原則應用的比較多，為了讓控制器和被控制對象的關系更緊密。
在某些場景下，我們是無法通過設計讓控件與對象滿足1、2兩個要求，所以就會有第三種，在空間分布上一致，例如在一個大空間中的燈與開關，開關不可能做在燈本體上，也沒有辦法讓它倆靠的更近，所以只能在空間分布上更加一致，才能夠讓映射關系合理。
其實數字產品的用戶界面設計，基本上我們可以做到1、2點，因為本身區域有限，控制器和對象也幾乎在彈丸之地互相映襯，大部應用的控件操作起來也都很簡單，但是不外乎一些較為復雜的工具類產品，例如車機系統，通過中控屏來控制車輛的一系列功能例如：空調、座椅、車窗等等，那我們也發現其按鈕的分布也是滿足了這樣的交互映射，將物理按鈕變為虛擬按鈕集成在中控屏幕中，為了讓用戶更好的映射出它們之間的關系，于是我們就需要利用空間分布的關系，來讓用戶明白，按鈕與控制對象的關聯邏輯。
例如在特斯拉的UI界面中，將整體分為3塊區域，左邊是形式儀表右側是多功能區域底部則是車輛相關的控制功能，你想控制前后車燈，那么按鈕就會在車輛模型的前后兩側，如果你想打開空調則在底部工具欄的中間即可打開，如果你想給座椅加熱那么也可以像圖片中那樣在4個座位的圖片中進行交互就可以實現。這樣的設計讓控件與被控制的對象能夠遠距離在控件上形成一個映射關系。
還有在日常生活中，大家家里是否用過升降式晾衣架，通過旋轉把手來操控升降，這里其實也很難應用到空間部分，因為兩者所處的平面不同，就更加無法對應起來，有沒有一種比較好的方式來解決這個問題呢，我覺得可以用顏色或者標記來做映射的對應。所以為了映射的相關性、同型、同色、靠近等方式都可以用來提升二者的相關性。
數字產品中的映射也是關于控制器和被控制對象的故事。數字產品中也有不少的控制器我們就稱之為控件，例如一個圖標按鈕、一個下拉列表或者一個滑塊，它們都有各自的控制對象。而我們常說什么樣的設計滿足用戶心智，指的就是讓用戶覺得當他操控控件后帶來的結果與反饋是他預期之中的，這就會讓其覺得是合理的、自然的。
例如在這個案例中，設計師其實是想通過按鈕來控制車中相關的功能，但是大家能發現問題嗎？映射的前提是控件要先滿足示能和意符的表達，其次再通過映射告訴用戶，誰控制誰。但我們發現這個界面中的按鈕其實在示能和意符上出現了歧義，例如熱車的圖標，我們通常認為這樣的宮格形式布局都是以入口形式存在，點擊后會進入下一個界面，但是設計師在這里其實把一些情況搞混了。
所以我們仔細看，這些圖標就像是電飯煲上的按鈕，只要點擊就會觸發車輛狀態的變化，相當于一個開關，咱們先不說這樣的設計是否方便用戶，我們看映射其實就會發現用戶其實很難做到空間布局上的對照，從而更高效的來對車輛進行控制。并且也存在一定的邏輯錯誤，例如熱車和解鎖是什么邏輯，車窗開到一半想停止怎么辦，空調要調節冷熱和溫度怎么辦，所以這里不再單純的是一個開關集合的區域，會遇到很復雜的情況。
我們再來看一個案例，其實在數字界面中很多映射并非有直接對應關系，而是需要用戶通過交互來觸發。在下面的界面中，是一個課程的詳情頁面，用戶可以發布自己的學習筆記通過音頻的方式發布在該頁面中，而底部的工具欄在當前的設計中就會出現映射相關的問題。
我們即然要發布音頻那么我們有這些問題可以提前預設好
1.需要有什么控件來控制嗎？例如一個按鈕
2.那么這個按鈕是點擊后松開再開始錄音，還是需要長按開始錄音，亦或者點擊之后進入一個編輯頁面，再通過錄音或者上傳音頻的形式來編輯呢？
3.點擊麥克風錄完音頻后頁面會怎樣顯示
4.能否試聽、編輯，邊上的輸入框和麥克風有關嗎？
5.我可以直接輸入文字再點擊發布嗎或者直接點發布會出現什么呢？等等
不管如何我們從需要有一個入口，所以這個入口比較關鍵。通過這個入口（按鈕）來觸發上傳音頻的整個交互流程，它也是一個映射關系，只是沒有全部展開，因為這里無法展開。
有同學想問，為什么不能展開呢？其實這個很好理解，就像我們做登錄和注冊的時候不會把兩個流程做在一個界面中一樣，造成頁面的復雜、不兼容。所以如果這里不需要音頻以外形式的發布內容那么就無需把麥克風、輸入框和發布按鈕拆解開來做，造成了沒有必要的浪費。
一個按鈕可以作為一個入口來開啟一個單獨的任務流程，但是如果這樣拆解開那么任務流程就無法再高效的完成，并產生很大的歧義。數字化產品的映射往往是線性的
再說一個類似的案例，這個也是小伙伴做的一個界面。初學者的問題就比較明顯，在于他們沒有分步和階段性控制的概念?？傁胫粋€界面能完成多個任務，當然在這里也沒有考慮好映射怎么做。
從這界面我們能很明顯的看出來這其實是一個發布的界面，從外部一個按鈕中進行跳轉而來的。
如果讓你去評價你會怎么說，是不是哪里都想說一點，好像里面的信息、按鈕、功能就不應該在這個界面？
你可能會有這些問題：怎么把視頻、音頻、圖片做成tab，選擇不同的類型去發布？點擊錄制后音頻會出現在哪里？錄好一條后錄制按鈕還在不在？錄好一條后我切換到圖片再傳一張圖片再點擊下一步會出現什么？點擊草稿箱又會進入什么界面？我什么都不操作直接點下一步會怎樣？這些問題都將困擾我們完成一個發布任務。
將一個交互流程做清晰，就需要讓用戶有一個清晰的功能映射。所以點擊發布后，按鈕應該要先控制發布類型這個對象，讓用戶選擇發布類型，然后再跳轉出對應類型的發布流程。
3.總結
映射在交互體驗的設計中也是很重要的概念之一，要結合示能和意符一起思考。同時剩余的概念我們也會在下期一起分享給大家，對于初學者來說，這些概念很重要，在我們設計案例的時候務必要時刻思考與結合。
聽到“約束”這個詞，但從字面意思大家可能會覺得它有多層含義，比如你小時候，媽媽總是約束你不能吃很多的糖，不能在地上滾來滾去，這是來自父母的約束。那么我們在生活中還有很多的約束，比如道德約束、法律約束、規則約束等等。
所以從字面意思上約束的意思就是：限制管束使不越出范圍。在體驗設計中，約束也被分為了4個大的類型，分別是：物理約束、文化約束、語義約束以及邏輯約束。接下去我們通過對這四個約束類型來聊一聊在設計中，如何利用這些約束來提升用戶體驗。
這個很好理解，一個圓形的井蓋只能用對應尺寸的圓形來覆蓋住，其他形狀或者尺寸就不能匹配。一把鎖也只能通過相應鑰匙才能打開。所以物理約束取決于物體本身外部的特性，決定了其操作方法。設計師們在設計一些產品、界面的時候，務必要考慮物體的物理特性，例如不同的設備、不同的材料等等。
諾曼老師在設計心理學中舉了一個電池正負極放置的例子，我打算換一個手機的例子。大家是否有想過為什么手機是豎著操作的，橫著操作不行嗎？當然不排除我們在玩游戲看電影時一些特殊場景需要將手機橫過來，但是日常我們通過手機來使用應用的時候為什么不是橫過來的。
大家可以嘗試著單手橫過來去發一個微信給好友信息，或者在淘寶買一件商品，首先這倆產品在移動端的手機上都沒有支持橫版適配的設計，因為橫置無法有效進行導航，而且很難瀏覽內容，更不要提用單手橫過來去做一些交互行為。
所以我們發現移動端手機本身的物理特性和受到的約束來自于我們人類的手，四根較長的手指在一側，一根較短的拇指在另一側，這種自然生物的進化就告訴我們，我們的祖先是習慣通過“握”這個行為來對物體進行交互的，而手機除了滿足人手的特性約束以外，也要滿足日常使用的場景：單手手持（單手握比單手托省力很多）、打電話（如果你的聽筒和麥克在屏幕的兩側，腦補一下打電話的樣子）......
所以手機的外形設計，是受到了使用者本體的物理約束，我們的手、我們的耳朵、嘴巴等等，大家也可以再試想一下，如果我們要設計一款專門為沒有手的殘障人士用的通訊工具，我們該怎么設計？例如他們習慣用鼻子操作、用腳掌操作等等。
好了，講完了人類對手機的約束后，我們再來看手機本身對我們數字界面有哪些物理約束。即然手機現在被設計成了豎著的樣子，于是我們的口袋也變成了豎著的，同時我們數字界面的內容也變成了自上而下的內容顯示順序。觸摸式智能手機也將原來只支持點擊操作的手勢進化出支持滑動、3d觸摸的更豐富的交互手勢。
我們在設計界面中元素、組件的時候其實也可以把他們理解為一種“物體”，既然是“物體”那么必然有其特性，例如屬性、狀態、布局規則....，具有一定特性的組件就只能使用在其固定的位置，并給予一定的尺寸范圍和交互方式。
例如現在我們有這樣幾個信息，人物頭像、人物昵稱、個人簡介、關注按鈕這四個元素，我們需要做一個用戶信息模塊，我們會怎樣布局。很顯然將這幾個元素通過排列組合放進一個容器里，有無數種排列方法，但如果我們提前給這個模塊加上一些物理約束，比如它的高度和寬度是30px*100px，同時滿足信息閱讀的順序和效率最優，那就只有一種排列方式。如果這個容器的尺寸變成100px*100px，那么就會有更多的布局，例如居中對齊，個人信息與關注按鈕上下分布等等。而且不同的排列布局、呈現位置給受眾帶來的視覺感知、瀏覽效率也是不同的。如果這個容器是可折疊、可滑動的呢？那么布局又會發生什么變化？
所以物理約束在生活中可能是一種硬約束，但是在數字化設計中，我們用的更多的是“偏軟”的物理約束，例如一張卡片的大小、圖文的間距、控件的展開面積等等，無法用硬約束來控制，因為受到更多因素的影響，不適合用硬約束來規范這些設計元素。
設計師們在做方案的時候要學會尋找最優解，做設計不像是用鑰匙開門或者拼圖這樣每一塊都有他固定的位置，有時候就像是你身邊有幾根不同粗細和長短的木棍，你需要插到一個洞里，不可能有非常完美契合的情況，那我們就要考慮你更在乎的是插緊？填滿？還是堵??？要靈活運用。
文化約束在書中的原話是：每種文化都有一套社交行為準則，如果置身于不熟悉的文化環境，原有的準則和行為就會不適用。
例如大陸的駕駛室在左側，但是香港地區就是在右側。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區別。所以文化的約束就更像是不同的社會認知、習慣、歷史造就人群的行為差異。
例如在不同文化中，信息閱讀的順序并不一樣，就像阿拉伯地區在閱讀時順序是從右往左。再例如國際版本的amazon在新增收貨地址的時候，無論哪個國家，只提供輸入框讓用戶自己填寫，但是在本地化產品中，就會針對中國用戶的特殊地址進行設計。
文化差異還有很多，例如不同國家有不同國家的禁忌和喜好，例如顏色，俄羅斯比較極忌諱黑色、黃色，巴西比較禁忌紫色、黃色，而英國則不喜歡墨綠色。同樣還有手勢、動植物、數字、肢體語言、信仰等等。
文化約束不僅僅存在于國家、宗教之前，人與人之間都會有不同的文化差異。所以文化說白了就是不同群體的認知與共識。說起文化約束讓我又想起了設計師與業務方之間的交流，為什么總是會存在障礙?；蛟S一部分原因就是因為我們各自有著文化差異和立場。業務方在自己的文化認知中會提出同時放大并縮小、五彩斑斕的黑這樣的需求，而設計師聽到這樣的需求就會覺得有點無理取鬧，其實這很正常，這就和我們在裝修時給設計師提出的要求一樣，想要在10平方米的空間打造出多個大面積的空間一樣。其實這些都是我們對另一方的一種期望，只是在表達的過程中不那么專業，作為專業的設計師，我們要學會理解客戶/業務的真實需求，并幫助他們去拆分目標，一步一步接受最后的結果。
語義約束在書中提到的不多，但是我想展開聊一聊。諾曼老師在解釋語義的時候是這么說的：語義約束是指利用某種境況的特殊含義來限定可能的操作方法。舉了一個例子就是摩托車的擋風玻璃之所以這么設計是因為人駕駛摩托車的方向位置從而使得擋風玻璃必須這么設計。所以一個事物被設計后的結果取決于它是為誰而設計的，同時語義約束依據的是我們對現實情況和外部世界的理解。
現在我們可以通過門把手的轉動來開啟門，那么如果我通過人臉識別認證后，是否可以自動開門而不需要再設計一個門把手呢？這種案例其實很多了，例如醫院的手術室等場所。隨著科學技術發展，人與物的交互方式在不斷的改變，從小屏幕到大屏幕的發展，我們觀察到移動端設計中的返回上一頁、滾動至頂部、鍵盤的拆分等等設計應運而生。
我再拿數字產品中的一些組件給大家舉個例子，在以前的文章中，我找到了一個產品的交互有些問題，就是在某個界面的頂部導航中嵌入一個下拉的控件。
在這里，無論該控件本身示能表達還是用戶的預期理解，都表示這當我們點擊下拉按鈕后，會展開更多同類型的選項，并且導航欄是保持固定位置的，而不會將導航欄給頂下去，出現原本不存在的新模塊。那么為什么就不可以像后者一樣，點擊下拉控件后將導航給頂下去呢？
這就要歸結于頂部導航和下拉控件本身的用法與規則。
導航欄嵌入下拉實際上就是導航+下拉控件，那么該控件就具備了兩個屬性，那就是原本導航欄的屬性和下拉控件的屬性，導航欄需要固定在頂部。
在移動端本身的組件定義中，它是一種固定在頂部不可動搖的一個bar，所以很早以前的移動端、web端設計的時候，頂部導航欄在視覺上也是優先級很高的，例如微信、淘寶等頂部導航欄在舊版本都是帶有顏色的，就像是一個盒子必須有一個蓋子，沒有蓋子的容器不嚴謹，不安全。
同時這個“蓋子”有幾個作用：
1.當前定位/說明 ，可以放單個頁面的標題也可以放幾個tab來切換頁面
2.當前界面輔助操作 ，例如分享
3.可以嵌入入口，例如搜索框、設置等等。
即然是一個下拉控件，那么你要下拉的是你本身，而不是整個導航。所以導航本身就有它自己語義，導航+下拉控件，也必須滿足這些約束條件。
語義約束需要設計師們時刻觀察當下用戶的認知水平以及設計的發展階段，去做更合理的運用，我們之前說創新，其實也只是在不斷的跟著科技、文化、用戶習性在進行同步更新，保守未必是錯的，但是想要有所突破不能一味墨守陳規。
這個概念諾曼老師在書中舉的是一個修水龍頭的例子，說的是當你把水龍頭修好，最后發現有一個零件沒有安裝上去，那么顯然是裝錯了。這個和我們之前講的映射是一個道理，自然映射為我們提供邏輯的約束，元素的組成可能存在空間或功能上的邏輯關系，例如不同的開關控制不同的燈。
那么我們還是簡單的來看一下“邏輯”這個概念，我們是不是經常會遇到這樣的場景，當我們把方案或者一個事情講述給別人，會聽到別人說：你這個邏輯不對，那到底什么是邏輯呢？這里不進行長篇大論的解釋，邏輯的概念很大，但是我們可以來比較形象的了解一下。
首先我們要知道在邏輯推理的過程中需要先對概念進行客觀描述，例如男人喜歡女人，這是一種自然的客觀規律。其次我們要對事物中的對象進行判斷是否為真，例如，老王是男人。當我們已知這兩個條件后，可以推導出一個結論，那就是老王喜歡女人。但是這樣的推理并不嚴謹，因為老王可能喜歡女人或者都喜歡。如果有其他的條件，結論才會更準確，例如老王交往過5個女朋友。
設計中，也會存在很多的邏輯，例如業務邏輯、交互邏輯、視覺邏輯等等。業務邏輯指的是商品的展示排列規則、每簽約一個供應商就會展示該供應商的詳情、權限角色的類型不同導致判斷順序不同等。交互邏輯指的交互過程中出現的狀態變化和規則，例如點擊卡片跳轉至xxx界面，點擊后若用戶未登錄則跳轉至登錄頁。而視覺邏輯則是指根據用戶的瀏覽順序和信息的優先級進行視覺布局的設計。
這里我們來舉一個美食產品的智能組菜的功能設計，來看看在這個方案中，邏輯約束是如何影響到我們整個設計過程的。智能組菜這個功能是這樣的，用戶可以將想要烹飪的食材進行自由組合成為一道美食，進而衍生出了該功能。在做這個方案之前，我們要對這些概念進行描述和解析
1.解析概念
智能組菜：
1.智能：通過什么算法，如何通過算法呈現給用戶？如何讓用戶感知到智能？（業務邏輯）
2.組菜：組是什么意思？（把食材搭配到一起）怎么組？（用戶選擇食材后生成）組什么（各種食材）？（交互邏輯）
2.設計策略與交互邏輯的思考
1.怎么把食材搭配到一起：讓用戶自由選擇食材
2.怎么才能讓用戶自由選擇食材：提供食材的搜索、分類
3.怎么提供食材的分類和搜索：設計搜索功能流程、食材分類功能流程
特殊場景思考：對于食材的名稱用戶是否知道，如果不知道該如何搜索？可以提供食材分類和拍照識別這樣的功能。
我們先做的簡單一點，只做食材的搜索。然后接下去思考他的交互邏輯
當用戶進入搜索流程后狀態會發生什么變化？選擇的食材會出現在哪里？如何新增繼續新增、刪除食材？這里有兩種做法：
1.用戶選擇完食材后就進入一個新界面，界面中可以繼續添加食材。
2.用戶選擇完食材后在當前界面出現“菜籃”模塊用來承載已經選擇的食材
如果是你會選擇哪種方式？這兩種交互方式在邏輯上都是正確的，但是邏輯正確并不意味著交互體驗和效率是最優的。
例如搜索場景中需要考慮鍵盤遮擋的問題，如果是第一種，那么沒有鍵盤遮擋的困擾，但是每次選完都要重新點擊新增按鈕，并且新頁面的版面利用率很低。而第二種在當前界面出現菜籃則會被鍵盤遮擋，只能在頁面上方出現，但上方的內容比較飽和，需要再進一步思考。那么當前遇到了兩個問題比較難以權衡，于是我們需要根據更多的條件來約束最后的結果：
1.用戶在選擇食材的時候大概率是目標明確的，搜索類目不會很寬泛，例如青菜、排骨，所以搜索結果不會很多。
2.大部分用戶的手機為某為p40、某果12，頁面較長，空白區域比較充裕。
3.大部分情況一道菜的主要食材在3種左右。
也有小伙伴會問，會不會出現批量選擇的情況。基本不會，因為就像我們剛才說的，組菜是基于用戶對當前已有的食材進行組合的行為，所以用戶的目標是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場景。所以不需要提供批量選擇。
最后結論是第二種方式有足夠的區域來放置需要選擇的食材。
3.最后的方案
當我們確定好了策略后，我們可以大致繪制一下原型方案。用戶通過在當前頁面搜索后選擇搜索結果的食材，顯示在鍵盤上方。鍵盤收起后會置于底部。食材搜索的結果不需要分類，用宮格形式鋪開，盡可能的利用頂部的面積去展示，不要用列表。然后不需要做搜索按鈕，因為這里的數據量很小，直接輸入完文字后就可以自動聯想匹配。同時我們再把組菜記錄和拍照識別的功能放進去。
做完這些基本的交互后我們不要忘了思考一些異常流程和場景，例如搜不到內容怎么辦？用戶同時搜索了兩種不同的食材怎么辦？用戶第二次選擇了同樣的食材怎么辦？選擇超過5個怎么提示？等等。
好了，這個案例講完后，大家有沒有發現，其實一個方案的產生，其中要思考很多的條件、邏輯來約束不同的設計結果。
假如我們需要加入食材的分類模塊，那么現在的方案和流程還合適嗎？如果業務覺得用戶使用智能組菜是不知道吃什么，一種“窮途末路”的場景，那么我們是不是可以提供一種送即食菜肴的服務，例如最近在電梯廣告里看到了一個“舌尖英雄”的app，他就是將一道菜的食材進行單獨包裝，然后賣給用戶，把烹飪的步驟也用線上視頻的方式教給用戶，用戶一學就會。這也是一種業務創新，同時在智能組菜的場景種插入也不失為一種辦法。
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
你們會發現其實想做交互設計比UI設計難很多，那為什么交互設計比較難呢？因為UI設計相當于從0.5到1，而交互則是從0到1。但并不意味著UI就比交互來的層次低，交互注重邏輯，UI注重對品牌和質感的表現，沒有孰優孰劣，但是在入手和執行層面，UI相對簡單一些。
交互設計也可以說是體驗設計的核心。我們需要根據已有的“材料”來進行任務流程、用戶行為的設計，以確保用戶能高效、滿意的完成任務達成目標和解決問題。所以在這整個環節中，要思考的信息和判斷的邏輯會更復雜。交互設計往往覺得很有成就感的地方在于自己設計的流程或者一些創新的交互能夠獲得用戶的好評以及業務數據的提升，在這個方面UI設計的成就感知會來的不夠明顯，因為視覺表現很難量化，用戶也只能通過好不好看來表達，所以UI設計師們也希望通過一些方法來找到屬于自己的成就感，例如我們也會選擇一些平臺發表自己的視覺創意來獲得同行們的認可等等。
那么今天我們一起來聊一個交互案例，來看看需求從“材料”到具象化表現都需要思考什么。當然，學案例是為了擴充自己的知識面，但是想要真正學會，我們要從底層開始學。
首先來講一個發布菜譜的功能：一個美食類產品中需要設計一個用戶自己創建菜譜的流程，基于這個概念我們可以如何設計流程。我們都知道商業設計離不開業務，那么這里我們先不考慮這么多，只考慮如何將流程設計做到最高效，有需要的時候再將業務加入進來。
這里和工作中常規的步驟不一樣，在工作中我們往往第一步都是去分析這個需求的背景、用戶的定位、業務目標什么的，但是這里不用，我們只單純的做交互方案，所以就不去啰嗦那些了。
在腦爆前，準備好3個問題：
1.什么是菜譜
2.為什么要發布菜譜
3.怎么發布菜譜。
通過這3個問題我們就可以大致知道這個任務所包含的信息、形式、流程。
1.什么是菜譜：菜譜是通過圖文、視頻等方式給用戶提供做菜步驟的教學內容
2.為什么要發布菜譜：希望通過用戶自主發布內容的形式來提高整體用戶的活躍度以及平臺對用戶個人品牌的塑造。讓用戶之間產生更多的互動。
3.怎么發布菜譜：這里要根據第一個問題腦爆之后再進行流程的設計。
接下來我們根據菜譜這個概念進行拓展：1.菜譜的基本介紹 2.菜譜的制作流程 3.其他支線選項。
在真實工作中其實產品經理會把這個流程要包含的功能和信息點都列舉清楚，只是我們現在自己來從0到1設計一次。
菜譜的基本介紹可以包含菜譜的封面、菜譜的名稱、菜譜的簡介、難度、時間、食材，菜譜的制作流程可以包含需要的圖片、文字描述。但是這里的顆粒度大小不一，例如難度、時間顆粒度小，但是食材我們可以再繼續細化拓展：食材的名稱、用量。菜譜的其他編輯選項，例如菜肴的口味、菜系的分類，編輯這個選項是有助于其他用戶在篩選菜系和分類的時候更快的找到這個菜譜。
例如菜譜的封面，那么我們就需要一個容器來上傳圖片或視頻，可以用一個占位圖image來代替，先不用考慮放什么位置以及在哪個節點，先將每一個信息點都進行控件化。接下來菜譜的名稱和簡介都是輸入模塊text。難度和時間有兩種形式：輸入和選擇，那我們當然用選擇，因為操作和理解成本更低，能用選擇就不要用輸入。選擇用什么形式呢？可以用picker、actionsheet動作面板、展開單選，那哪個更方便高效呢？這里如果需要選擇的選項不多，也不需要滾動、聯動，那么用actionsheet就可以了。如果你想讓選項更直觀更方便操作那么你可以把選項直接放出來。
接下來是食材，食材又分為食材的名稱和用量，那么也是一個輸入的行為，需要兩個輸入框，這里就不能用選擇的交互了，因為在這個場景中選項是根據用戶需求隨機、特定的，需要用戶自己輸入。
最后是菜譜制作流程中的圖片和文字描述，也是圖片和視頻的上傳和文字輸入模塊。這樣我們就把這些控件具像化了，就更直觀的幫助我們進行接下來的操作。
根據用戶的操作習慣和場景，我們將操作順序捋一遍。什么樣的操作順序更符合我們上傳的習慣呢？先填寫制作順序嗎？不對，應該先編輯基本信息，也就是我們通過烹飪的流程，先想好要做什么菜，再去準備食材，再開始一系列烹飪的步驟。
所以我們要先讓用戶去添加封面編輯標題和介紹，烹飪難度和時間其實放在開頭和末尾都可以，但是考慮到這些信息在列表中會一起展示，那么我們索性就在開頭就直接一起編輯。
接下來是添加食材，添加食材的場景中會涉及到對食材的添加、刪除、清空以及智能編輯（類似添加收貨地址），所以這里的場景不要漏掉。那有的小伙伴要問是不是可以再加一個拍照識別食材的功能？其實不需要，因為我們在準備做菜譜之前肯定對這道菜有了解，知道每一個食材的名稱我們才會去做菜，否則連什么食材都不知道就去做，那萬一有毒呢？所以這個場景是不存在的。
再接著是編輯制作步驟，依然是思考用戶場景，除了上傳圖片和文字以外，還需要提供步驟添加、刪除、調整位置、批量傳圖等功能。這些場景我們在腦爆的時候或多或少會遺漏掉。
移動端產品的層級和路徑主要是根據頁面來劃定的，所以頁面越多路徑就越深，但是路徑深并不意味著一定就多余，路徑少也并不意味著操作就簡單。路徑階段的劃分主要是根據這幾點來考慮的：
1.當前頁面內容是否溢出、符合場景、滿足預期也就是說當前頁面中的內容是否符合當前場景的用戶，以及是不是過載了。例如我們去購買電影票的流程，當我們在查看電影詳情的時候，不會出現電影院和電影場次的選擇，因為不符合當前場景的用戶需求。
2.場景是否獨立我們在選擇回收自己的手機時，在選擇型號頁面不會再讓用戶編輯估價信息。這個場景是獨立的，并且只有完成了前置操作步驟后才能進行下一步。
3.任務是否需要階段性結束 為什么需要進行新建界面，是因為當前界面在滿足1和2兩個約束后，要考慮第一個步驟是否階段性完結了，例如我如果把菜譜編輯基礎信息界面單獨做一個界面，而編輯步驟再單獨做一個界面，這里第一界面是否階段性完結呢？還沒有，因為你可以隨時要去修改標題、封面、食材等等，而經常返回上一頁并不是一件很簡單的事，用戶也會擔心我編輯好的步驟會不會保存等一系列問題。
這里再用一個蔚來app中選購車輛配置的流程舉個例子。他這里也將選擇配置流程劃分成了幾個界面，但這個流程結構就不是單純的線性結構了，雖然他每個不同的配置單獨做成一個界面但是頂部利用tab來切換不同配置選項的界面。
所以當任務需要階段性完成時候，例如只有先輸入手機號點擊發送驗證碼之后才能收到驗證碼，在這樣的流程中我們可以使用下一步來進入下一個環節。如果要分不同的界面，而又沒有出現階段性完結的情況，那么前一頁的內容編輯再下一頁也需要有，例如我們把標題編輯單獨做一個界面，但是下一個編輯基本信息界面也依然要能夠編輯標題。
通過對用戶場景和觸點的分類，以及對第四步的思考，我們可以發現其實編輯基本信息和編輯步驟是需要放在同一個頁面中去完成的，因為沒有階段性結束。但是放在同一個界面也有一些問題比如單個界面需要編輯的信息太多，比較繁瑣，再次編輯需要上下滑動瀏覽不方便等問題。所以我們也可以看一下市面上的競品都是怎么做的，有一些產品會將編輯標題單獨劃分出一個界面，這其實沒改變前者的問題，單獨作為一個頁面或許是基于這兩點考慮：
1.希望用戶通過認真對待標題來提高菜譜的點擊率和引起別人的興趣
2.業務需求，通過讓用戶了解優質內容的協議來謹慎對待上傳菜譜的質量
3.對于一個復雜操作前的一個準備和引導，讓用戶更容易接受接下來的大量表單的填寫。
接下來是填寫的界面，那么我們就可以根據信息展示的優先級和第三步設定好的控件進行布局，這里涉及到的原理就不講了。我們主要來分析一下某些功能在布局的時候為什么這么放。
首先封面和標題還有簡介從上至下應該沒有什么問題，因為有兩個輸入模塊咱就無法左右放，因為這3者是強關聯信息所以是一個整體。其次是難度和時間，這兩個字段包含的內容和形式我們在之前的步驟中提到有兩種形式，一種是actionsheet還有一種是選項標簽化平鋪，前者的好處是節省空間，易擴展，后者則更加直觀和方便選擇，另外也要考慮類似控件在整個產品中的統一性。
接下來是食材添加和編輯，這里涉及到食材名稱和用量的文本輸入，這里可以直接用一行輸入模塊來放單個食材的編輯，因為整個頁面表單很長所以盡量簡化上下空間。同時還有對食材的刪除、清空、調序和新增。那這三個按鈕怎么放比較合理呢？我們要看用戶使用的場景，可以考慮的維度有：操作頻率、操作優先級以及任務的主方向。
所以在食材編輯這個模塊中，最高頻的是新增其次是刪除再次是調序最后是清空。而當食材新增后內容會向下延伸，所以新增的按鈕不適合放在上方，也不適合放在每個輸入模塊的右側。刪除和調序則是最某個食材信息的編輯所以是針對單個輸入模塊的，那必須跟在后面。最后的清空可以放在新增按鈕的左側。這樣就完成了添加食材的模塊。
再接下來是烹飪步驟。上傳圖片和編輯文本沒什么問題，上下布局是因為在正式瀏覽的時候需要大圖和文字搭配的形式，所以為了形式統一就只能這樣布局。
目前調整步驟在最底部，同時刪除操作也需要點擊調整步驟后才能出現，這里因為調整步驟和刪除不是高頻操作，弱化層級可以理解，但是如果放在底部那么如果我想要刪除第一步和調整前2步順序的時候，就要上下來回滑動，不是很方便。
那其實我們可以這么做，把烹飪步驟作為一個bar，在頁面向上滑動的時候置頂，添加食材也可以這樣操作。就是為了讓用戶在上下滑動的時候可以隨時進行一個編輯，步驟在任何位置都可以直接進行換位和刪除。另外由于是大圖模式，在換位的時候進行長按拖動其實對拇指的操作有一定的要求。既然這樣為什么不用上下切換的按鈕進行調序。
我們來看一下拇指拖動要激活兩個階段，首先要長按激活拖動，然后需要按住不放進行拖拽，由于卡片面積較大拇指滑動的距離就要長，對于手小的用戶就不太方便了。那我們是否可以做成一個上下切換的按鈕，這樣只要通過單擊就可以完成順序的調換，并且通常調換順序并不需要跨越多個步驟進行，一般也只是相鄰兩個步驟的順序換一下即可。所以這里首先我會把編輯按鈕和批量傳圖都放在烹飪步驟bar右側并置頂。
最后再補上剩余的選項模塊和發布、預覽、草稿的按鈕即可。預覽和草稿必須放在導航欄，因為這倆功能是隨時需要進行操作的所以不能在頁面底部，而發布按鈕可以放在最底下。也有小伙伴想問，為什么不在底部做一個固定的bar來放這些按鈕呢。因為頁面縱向信息很復雜，不僅底部占用了高度也容易誤操作，在沒有編輯完時，發布按鈕還是比較雞肋的，所以是不會出現一個底部固定的bar。
好啦，今天分享的交互流程案例大家學廢了嗎？我們下期再見，有更多想法和交流歡迎在留言區留言！
文章來源：站酷 作者：應駿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在開發一款高品質的產品的過程中最重要的一個環節是了解誰是你的用戶，他們的需求是什么。
設計著作《軟件創新之路——沖破高技術營造的牢籠》里首度提出產品設計和開發的用戶“人物角色”概念。正如設計師金·古德溫在2005年所述：“人物角色就是一個用戶原型，可以用來幫助指導產品功能、導航、交互、甚至視覺設計方面的決策。”這種原型并不是真正的人，而是結合對真實用戶的事實和觀察而形成的一個令人記憶深刻的人物。
與市場細分不同，用戶畫像代表著目標和行為模式，而不是人口屬性或工作職責。用戶畫像可以幫助設計成為共同參考點，有助于在設計討論時聚焦在特定用戶上，使用場景可幫助測試系統將用戶需要的功能點集成到產品上。
*注：用戶特征、人物畫像和使用場景對比表
用戶畫像常用于以下三個場景：
產品設計：開發前期的產品定位設計，幫助確立產品定位、設計目標、設計策略與準則；
產品營銷：促進其他工作，如指導運營對特定用戶進行推送活動信息，推廣信息，個性化推薦等。
產品決策：分析用戶畫像，對產品的發展現狀和發展趨勢進行預測，及時調整產品發展路線。
整體來說，用戶畫像多采用定性的研究方法來進行角色劃分，主要可采用的資料來源有：人種學研究、情境調查、觀察法、訪談法、桌面研究等，具體實行時會根據業務情況稍作調整。
用戶畫像的范圍可以很廣，也可以很窄。需要先確定這些用戶畫像是用來做什么的？只有回答了這個問題，才能確定用戶畫像的適當范圍。
范圍越廣，支持這些用戶畫像的數據就越淺。在廣泛的情況和場景中尋找具有相似動機、目標、信息需求、態度和行為的客戶群體是不現實的。
可以在大量的產品和服務中找到相似的部分，但是您需要使用更少、更通用的屬性來描述它們。
范圍越小，數據就越豐富。在范圍狹窄的情況下，用戶畫像屬性將直接與特定產品或場景相關。人們的行為和需求會受到相關產品或服務環境的極大影響。
有針對性的用戶畫像范圍將允許您在用戶的動機、目標、態度和行為中找到更多的主題。此類信息使團隊能夠做出特定的設計決策。
首先了解公司對現有用戶和目標用戶的理解程度，對他們有什么看法。
如果產品擁有確定的客戶基礎，就與直接接觸這些工作的人進行交談，例如：銷售人員、客戶支持人員、市場調研員、技術銷售咨詢師、培訓師等。
如果公司嘗試著為產品拓展用戶或者打入新市場，就與負責相關事宜的人交談。就這些人對用戶和客戶的個人經驗以及用戶不同的方面進行訪問。
圍繞用戶對產品的整體體驗來組織訪談或實地訪問，而不是圍繞特定任務。
銷售和市場營銷人員通常擁有詳細的人口概況和市場研究，能夠提供完整的用戶分類。如果有市場細分，尤其是借助于使用數據或其他行為數據所得出的，就值得咨詢。
用戶常見的疑問和遇到的一些問題，應該咨詢論壇或社區站點以及支持系統，它們能夠提供支持性數據，將這些信息變成人物角色的一部分。
從所收集的信息中提取共同主線。如：用戶擁有哪些共同點？頻繁出現的內容有哪些？共同的期望？
然后列出用戶的重要不同點。例如影響產品用戶行為的不同屬性范圍：使用頻率、使用強度、業務規模等；
一旦決定要包含哪些屬性以及每個屬性在用戶群體中如何變化，就該借助于研究中觀察到的個人細節和軼事從屬性群組中合成現實的用戶了。
在一些情況中，需適當增加細節、創造一個界定屬性范圍內的具體事實。
例如：
可調整為：
使用從訪談中收集的資料，充實剩余的屬性，合并從相似用戶中提取出來的細節；
增加一些針對產品領域的具體信息；
然后與她具體的技術細節相結合；
情景描述的是一個人對一個活動或一種情形如何表現或思考的故事。與故事一樣，情景傳達的是產品使用方面的細微差別，幫助利益相關者把產品放入真實生活情境中。
描述現狀的情景通常叫情境式情景（也稱問題情景），因為它們試圖展現如何改善現狀。對改進方案進行預想的情景叫設計情景。
情境式情景——主要用于設計早期階段。通過生動地闡釋現有實踐中的問題或空白，使團隊開始設想可能的解決方案。
設計情景——適用于整個設計和開發過程。在早期的頭腦風暴中，設計情景能夠激發對概念的討論和反饋。有了早期的概念，設計情景可以幫助團隊完成可能的成果。早起的設計情景也可以作為訪談提示，探出潛在用戶的反饋。
情景是通過講故事來創造的，可以提取自研究中所聽到的故事加以處理，把一堆故事減少到只剩最相關的。
情景基于以目標和人們為實現目標而采取的行動。如果有現成的人物角色，就說明可能已經確立了目標和行動，這些將形成情景的基礎。如果沒有可用的人物角色，就返回研究分析報告，列出每個目標受眾最緊迫的目標。
決定把哪些活動包含在情景中時，針對研究人物角色的每個主要目標：
為了實現這一目標，這些活動中的哪些最經常采用？
為了實現這一目標，這些活動中的哪些是必需的？
哪些頻繁或必要的活動會作為單一序列的一部分發生？
情景是以用戶視角為基礎的。用戶無法認知的任何東西都不應該納入情景的一部分，尤其是情境式情景。情景必須要概要描述最重要的用戶行為和系統反應。
情境式情景通常給人一種“XX的一天”的感覺，描述幾個小時內或一天當中的一系列任務。
例如：
情景盡量概括一些，不要詳述界面元素或系統實現。詮釋故事的整體結構比解釋所有細節更重要。
分享人物角色時最難的莫過于用一種簡練且有益的方式來表達他們。
用一種方便使用的形式概括人物角色。例如可將其制成板狀使其更易于保存、更容易找到，并且不太可能被弄丟；也可以把用戶的圖片和關鍵屬性做成海報，并把它們訂到墻上，強化其存在感。
為避免完成畫像后將其束之高閣，需要鼓勵部門員工在開會期間使用人物角色進行討論，并且思考各個功能如何為各種各樣的人物角色服務。
項目需要多樣化的視角，用戶畫像自身尚不足以傳達一系列的設計見解。用戶畫像要與情景、體驗模型、任務分析和傳統的書面報告結合使用，而不是替代他們。 最后，感謝大家的閱讀，希望本篇文章能夠對大家有所幫助！
* 注：本篇文章有借鑒網站資料和書籍等多方面內容。
文章來源：站酷 作者：禾x日
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本文是參考國內交互設計標準網站及用戶行為研究實現的用戶體驗設計規范，用于后臺設計，網站設計等。
涉及到的產品越多，產品統一性越強，實現信息同頻，開發和設計快速了解信息
一個項目中會涉及到多種按鈕，甚至一個頁面中也會涉及到多種不同功能的按鈕，這個就需要把同一類型或同一功能的按鈕，它們的位置統一。減少用戶學習成本。
因為如果同一樣的功能按鈕在不同的變換位置的話會打亂用戶已經形成的習慣，增加其學習成本。（盡量采取以下情況的一種）
幫助說明的表現形式有很多種，但不管選那種整個項目要保持統一，一些特殊情況除外，固定一個位置，可以方便用戶在最短的時間內，快速完成此項操作和獲取內容。
權重是為了突出有效信息，也能在不同元素建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
為了讓用戶能在操作上（類似表單、彈出框等場景）快速做出判斷，來突出其中一項相對更重要或者更高頻的操作。
突出的方法，不局限于強化重點項，也可以是弱化其他項。
但是在一些需要用戶慎重決策的場景中，系統應該保持中立，不能替用戶或者誘導用戶做出判斷
表單在遵守操作流程的情況下，讓用戶涉及到的操作從易到難，讓用戶有填下去的動力。
排序規則
（1）有“有默認項”的選項；
（2）有“選項”的選項；
（3）只輸入“數字”的選項；
（4）“添加圖片”“修改”等涉及復雜操作的選項；
（5）“備注”“商品賣點”等選擇。
左右排版的時候將“重要必填項”先在從左邊（縱向排列）開始排版（排版時仍按照我們的從簡到難的規則）
注：當“必填項”比“非必填項”多時，排版上要考慮，就按照次序，左邊排滿，再排右邊。
在使用Table 時，文字鏈的點擊范圍受到文字長短影響，可以設置整個單元格為熱區，以便用戶觸發。
注：當懸浮在“客戶”所在的文字鏈單元格時，鼠標
【指針】隨即變為【手型】，單擊即可跳轉。
當需要增強按鈕的響應性時，可以通過增加用戶點擊熱區的范圍，而不是增大按鈕形狀，從而增強響應性，又不缺失美感。
注：在移動端尤其適用。
鼠標移入按鈕附近，即可激活Hover 狀態
當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』
狀態一：普通的瀏覽模式，不區分可編輯行和不可編輯行；
狀態二：鼠標懸停時，『指針』變為『手型』，編輯區域底色變黃，出現『Tooltips』提示單擊編輯；
狀態三：鼠標點擊后，出現『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
當『易讀性』為主，同時又要突出操作性的『易編輯性』時，可使用『文字鏈/圖標編輯』
狀態一：在可編輯行附近出現文字鏈/圖標；
狀態二：鼠標點擊『編輯』后，出現『輸入框』、『確定』、『取消』表單元素，同時光標定位在『輸入框』中。
當『易讀性』遠比『易編輯性』重要時，可以使用『單擊編輯』
注：編輯模式在不破壞整體性的前提下，可擴大空間，以便放下『輸入框』等表單元素；其中，在Table 中進行編輯模式切換時，需要保證每列的不跳動。
減少負擔，增加輕量化的操作
注：刪除的操作是謹慎的，系統在不打斷當前操作的時候給出二次提醒確認。
填寫表單的條件反饋。
注：不需要提交后才出現提示，輸入及時給用戶反饋
完成整個操作后的提示以及系統提示
注：重要的，文字多于15個字以上不適合放在toast里面提示。
提供下一步操作的入口
不僅要提示他發生了什么，還能引導他怎么做，甚至能讓他一步到位直接跳轉到要進行下一步操作的頁面去操作
當頁面沒有按鈕時，提供明確的入口。
最后，關于后臺的用戶體驗設計規范就總結到這里啦。
文章來源：站酷 作者：chaih
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶喜歡在網上收藏各種東西，把收藏到的東西占為己有，滿足自我的占有欲，每個用戶都為此而樂此不疲。
很多互聯網產品在用戶點擊收藏后，讓用戶去選擇收藏夾。其實用戶并不喜歡去選擇，他們只想簡單的把自己喜歡的東西收藏下來。
選擇本身并不是一件很容易的事情，尤其是對于那些有選擇困難癥的人來說。實際上，我每次都是選默認那個。
這并不是一個好的用戶體驗。
當然也有一些做的很好的體驗，比如微信的收藏，收藏后會出現一個“收藏成功”的非模態反饋。
同時可以添加標簽，但這個并非強制，為了滿足那些有這種需求的用戶。添加標簽的目的是為了方便用戶在日后的檢索。
在收藏列表，微信會根據收藏的內容自動分成鏈接、文件、圖片和視頻等，最近使用位于第一位。
也就是說并不需要用戶去創建自定義分類。
你也可以搜索標簽來找到之前收藏的內容。通過這些方式基本上滿足了大部分用戶的需求。
網站會根據你采集的圖片在極短的時間內，自動識別出圖片對應的收藏夾類型。可以直接采集到對應的文件夾。
然而經過測試，經常會出現誤差。因為圖片的分類其實很復雜的，屬于高度自定義，很顯然，智能識別并不是一個好的解決方案。
花瓣是一個設計師收集靈感的網站，該網站常見的用戶使用場景是，設計師在瀏覽素材時，會大量采集自己感興趣的素材，但每次都要選擇文件夾，非常繁瑣且低效。
后來花瓣網加入了快速采集的功能，其邏輯是網站會默認選擇上一次采集的收藏夾，這大大提高了用戶采集圖片的效率。
而如果你需要選擇其他文件夾則可點擊普通采集。這兩種采集方式滿足了設計師的不同需求。
社區類產品有各種點贊，收藏等互動信息，但用戶又不想被別人知道這些信息。
因此，在規劃產品時需要考慮到用戶互動隱私的保護，這是用戶側的剛性需求。
抖音個人主頁的點贊列表，我記得剛開始是公開的，且不能設置為私密。
用戶點贊的視頻會出現在這里，卻少有人希望這些信息被別人看到，總有些點贊視頻你并不想被別人看到。
如果點贊列表可見，那么用戶在點贊的時候就會有所顧慮，這不利于平臺的互動率。
特別是隨著抖音上熟人也越來越多，強關系社交場景在漸漸加強。
抖音后來也發現了這個問題，把它設計成了默認隱藏。（當然可以自己設置為公開，但只有極少數用戶會這樣做。）
由于點贊是私密的，用戶可以隨心所欲的點贊自己喜歡的視頻，毫無社交壓力。
這是為何？
源于人性心理學：窺私欲。人人都喜歡窺視別人的隱私，而不喜歡自己的隱私被窺視。
不然為何如今的QQ空間基本上都設置了權限，畢竟，誰想被別人窺視當年那個煞筆的自己呢？
現在訂閱號打開率越來越低，朋友圈分享曾是訂閱號流量來源的一大入口。
朋友圈早已淪為了一個人設打造的陣地，現在的人發圈越來越謹慎。
用戶似乎越來越不愿意在朋友圈分享文章了，除非是有利于自己人設打造的內容。
為了減輕用戶的這種社交壓力，微信推出了“在看”的功能。
用戶點了“在看”后，此文章會出現在看一看這個模塊，且七天前的分享將不可見，這就相當于一個弱化版的分享功能。
這將大大減輕用戶分享的社交壓力。對于公眾號主來說，相當于增加了一個流量入口，激發他們創作更多的內容。
視頻號點贊也是同理，會被朋友看到，導致用戶在點贊的時候就會有所顧慮。
他會考慮，我點贊了這個視頻，我老師、上司、父母、親戚、朋友會不會看到？他們會怎么想？
但他在抖音上點贊是沒有這么多顧慮的，單純的喜歡就行。
第一，抖音是弱關系平臺；
第二，抖音上的點贊默認是私密的。
因此，微信才推出了私密贊的功能，需要長按才能觸發。
這并是一個優雅的解決方案，一是操作成本有點高，二是用戶存在較高的學習成本。
微信作為一個強關系社交場景，這正是微信與抖音不一樣的地方。
以上兩者的目的都是一致的，那就是為了減輕用戶的社交壓力。
同時用過mac OS和windows系統的用戶不知是否發現，這兩個操作系統的彈窗按鈕“確定”和“取消”的位置是不一樣的？
mac的彈窗按鈕確定在右，取消在左；而windows的剛好反過來，確定在左，取消在右。
為什么會有這樣的差異？哪一種更加合理？
在交互設計中，這種彈窗叫做模態反饋，艾倫·庫珀在《About Face 4》中提到：模態模式一種臨時模式，它通過遮罩將用戶當前看到的內容和之前看到的內容區分開來，界面中只有 popup（彈出層）組件具有可交互行為，需要用戶操作才能退出該模式。模態的優勢在于讓用戶專注于完成某個任務而不被干擾。
首先我們要明白這兩個按鈕哪個使用率更高，一般來說，“確定”的點擊率要遠遠高于“取消”。這是因為大多數用戶對于自己的操作行為是明確的。
所以這兩個按鈕在視覺上一定要做出差異化，“確定”的視覺層級要高于“取消”，這樣用戶才會一目了然，不會感到困惑。
回到剛才的問題，逆向思考這兩者背后的邏輯差異。
windows彈窗的背后邏輯：
人的閱讀習慣是從左到右，所以把點擊率更高的按鈕放在左邊更加符合人的正常閱讀習慣。
mac彈窗的背后邏輯：
根據一般的任務的流程，“取消”在左代表返回上一步操作，而“確定”在右代表進入下一步任務流程。
看上去似乎都有道理，這兩種交互方式本身沒有絕對的對與錯。只要在整個系統中保持一致性，讓用戶形成操作習慣就沒有啥問題。
從個人的使用習慣而言，個人更傾向于mac的這種方式。
手機上的實體按鍵電源鍵和音量鍵通常有兩種分布方式，放在左右兩側或都放在右側，前者以iPhone為代表，后者以安卓手機為代表。
這兩種方式有什么區別？哪種方式更加合理？電源鍵和音量鍵屬于完全不同類型的兩種按鍵，且都是高頻使用，它們的功能自然不用贅述。
我們先來看看都放在右側會有什么問題，以下使用場景相信用戶不會陌生：
用戶a，在地鐵上玩王者，聲音有點大，想把聲音調小，結果不小心按到了電源鍵，導致手機息屏，而此刻你正在激烈的團戰，內心有一萬只“草尼瑪”奔騰而過……
用戶b，每次按電源鍵（解鎖或鎖屏）都會不小心同時按到音量鍵，結果直接就截圖了！這種情況發生了不止一次，因為這兩個按鍵離的太近了……
用戶c，自家的小米11，電源鍵位于中間位置，右手拿時大拇指會觸碰到，左手拿時中指剛好會觸碰到，而電源鍵又有指紋鎖功能，導致手機在不斷的解鎖，而你毫無察覺……
通過上面的案例，可以得出結論：若按鍵都放在右側，會導致用戶經常誤觸而造成不必要的麻煩。
放在兩側就不會有這樣的問題?？梢杂行Х乐拐`觸，尤其是盲按，不用擔心按錯，減少誤操作的幾率。
值得一提的是，iPhone手機的電源鍵一開始是位于頂部位置，這是為何？
因為剛開始時手機都是小屏幕（3.5～4寸左右），對于iPhone5S及以前的手機來說，單手操控，拇指Home，食指電源，剛剛好。
所以電源鍵放在頂部既按得到又可以減少誤操作。
后來隨著手機大屏的趨勢（4.7寸以上），這個時候單手已經不方便按到頂端了，從6代開始就把電源鍵放在右側了。
但無論是哪種方式， 兩個按鍵都是分開放。
還有一個小細節，iPhone的實體鍵不是在右側正中間，而是在靠上的位置。
iPhone設計理念是單手持握，并且大多數人右手握手機，大拇指經常會碰到右側邊框，若果放中間，這樣會造成誤觸音量鍵和靜音鍵。
其實上面的案例3就已經說明了按鍵放在中間的弊端。
我想起了當年的錘子T1，左右按鍵一樣大且位于兩側的中間，這是典型的為了追求完美的對稱而向用戶體驗妥協。
iPhone從初代開始就已經建立了自己的設計理念，不管是工業設計還是界面設計，并沿用至今。
從初代開始，iPhone機身左側音量鍵上方就有一個靜音鍵。
這些年來，iPhone一直在減少各種實體按鍵以及外部接口，比如3.5mm耳機孔、home鍵。
但直到如今這個靜音鍵卻一直保留下來，為何iPhone對于這個按鍵情有獨鐘？
靜音鍵開啟后，任何來電或通知都是無聲的，震動也會消失。
在無需點亮屏幕的情況下實現一鍵靜音，方便快捷，深受用戶的青睞。
根據自身的使用習慣以及用戶研究，無非以下幾種使用場景，比如看電影、開會、上課等：
1.進電影院看電影前，我一般都會撥一下，避免在看電影的過程中被來電鈴聲打擾，影響了自己和別人觀影。
2.開會的時候也會撥一下，以防在開會的時候突然被來電鈴聲所打擾，避免不必要的尷尬。
3.學生黨在上課前一般也會開啟，這樣整節課都不怕打電話進來了。
總之，就是不希望自己的手機鈴聲打擾到自己和別人，帶來不必要的麻煩。
如果是虛擬靜音鍵，需要先解鎖手機，對著手機屏幕一頓操作。
而實體鍵不需要這么麻煩，可以盲操作，放在褲兜里都不影響操作。
這個按鍵這么重要，卻很少看到安卓手機上有（除了一加基本上沒有）。
實體靜音鍵并非蘋果首創，之前的Palm、Blackberry（黑莓）早已有這樣的設計。
可能的原因是安卓控制中心很早有靜音按鈕，甚至有些定制系統還可以把靜音按鈕直接放在桌面上，設置靜音非常方便，也就沒必要再多加一個實體鍵了，顯得多余又徒增成本。
上面提到過的，作為安卓陣營唯一的靜音鍵，一加手機引以為傲的三段式按鍵，該設計可以通過物理鍵直接實現在靜音、免打擾與正常模式當中快速切換。
但個人認為這個設定復雜了，三種模式遠比兩種模式復雜。用戶并不一定能搞明白，有一定的學習成本。
在早期，iPhone的控制中心并沒有靜音按鈕，想要設置個靜音并不是一件容易的事情，而這個功能又是必須的，蘋果索性直接做了一個實體物理鍵。
這樣靜音的時候只需要把靜音鍵撥過來就可以了，一步到位，使用體驗也很好，所以一直保留至今。
雖然現在iPhone的控制中心已經加入了勿擾模式，但考慮到老用戶的使用習慣，以及品牌調性，蘋果對于這個實體按鍵的去掉還是顯得很謹慎。
考慮到之后iPhone在防水、機身內部空間的改進，不排除蘋果終有一天會取消iPhone上這個靜音鍵。
靜音鍵雖好，但也并非沒有缺點。用戶有時候會無意中觸發這個按鍵而不自知，或者開啟后忘記關閉，導致錯過了一些重要的電話。
雖然開啟了靜音鍵，但并不是絕對的靜音。如果是鬧鐘，鈴聲還是會響起，因為鬧鐘的優先級要遠高于靜音模式。
蘋果這是考慮到了如果有用戶不小心觸發了靜音鍵，或者開啟后忘記了關閉，害怕用戶耽誤了重要事情。
這就很好的解釋了為何明明開啟了靜音模式，卻還可以調解音量大小的原因所在。細微之處方見真功夫。
在日常生活中，旋鈕是個很常見的東西，比如音箱，微波爐，收音機，老式電視，車載旋鈕……
在機械產品上，旋鈕凸起的把手和它下面的圓盤刻度，是最明顯不過的旋轉暗示，符合人的自然感知。
旋鈕式交互是個人非常偏愛的一種交互方式，我認為這種交互跟iPhone的home鍵一樣經典，主要原因有三：
旋鈕操作簡單，看到這種按鈕，一歲小孩子都會忍不住用手去抓。對于用戶來說，幾乎不需要學習成本。
在旋轉的過程中，可調大調小，一切盡在用戶的掌控之中，用戶感覺到有十分的安全感。
在調節的過程中，調大調小都能立刻收到即時的反饋，這是用戶最喜歡的交互方式。
我們在觸摸屏上很少看到這種旋鈕式交互，因為這種交互是要建立在抓住旋鈕實物的感受。
而觸控屏是個二維的世界，沒有真實抓握的手感，無法還原出三維世界的真實手感。
汽車上最常見的旋鈕就要數音量和空調了。然而自從特斯拉在車上推廣大屏幕后，越來越多的國內廠家開始盲目跟風，把絕大部分的功能按鈕集成到屏幕中，比如空調，不僅不方便，行車中使用還容易造成危險駕駛。
車上的觸控體驗跟手機上是完全是兩碼事，使用場景也完全不同。最大的區別在于后者沒有安全問題。
都知道開車不玩手機，可是行車時操作中控屏跟玩手機有什么兩樣？
對于駕駛員來說更加安全，通過旋鈕調節空調，熟悉后完全可以實現盲操，邊開車邊操作毫無壓力。
如果是觸控屏，你必須看著屏幕，一頓操作猛如虎，而在開車過程中眼睛哪怕離開前方一秒鐘就意味著危險。
而安全是汽車駕駛的重中之重。
用戶的操作有真實的物理反饋，旋鈕阻尼。
屏幕上虛擬按鍵反饋根本無法與實體旋鈕相提并論。
軟件系統用久了會變卡，可能會死機，難免會有bug。而這些不穩定因素將成為汽車駕駛的潛在危險因素。
一旦屏幕失靈，或者系統死機了，那所有按鍵都失效了。
雖然特斯拉為了提升其車載系統的穩定性下了很大功夫，但是問題從來都沒有停止過。
但是硬件基本上很少會出問題，物理旋鈕才讓人100%放心。
無論廠家如何吹噓，虛擬屏幕按鍵在大多數情況下都不會比實體按鍵有更好的使用體驗。
因此，有一些實體鍵出于安全駕駛的考慮還是應該保留，將各種功能按鈕都集成在屏幕里并不見得是一個明智的選擇。盲目的把實體按鍵變為觸摸按鍵存在安全隱患。
文章來源：站酷 作者：CdzhcHappy
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
之前總結了B端表單頁設計的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復雜的組件，平時工作中遇到的相關問題也是最多的，此次針對選擇錄入常用組件的應用場景和交互規則進行總結
選擇錄入的類型比較多，可以簡單的分為兩大類即
基礎選擇組件：單選/多選/開關/下拉選擇
復雜選擇組件：時間/日期/穿梭框/級聯選擇/樹形選擇等
B端表單業務場景比較多，很多場景具有通用性，有的場景卻有一定的獨立性，需要了解場景及用戶的需求和組件的適用性才能提高用戶操作體驗和效率
一.單選框
單選框(Radio)是表單中比較常用的控件，它通常被用來從一組互斥的相關選項中選擇一個單獨的選項。
當點擊一個未選中的單選名時，它會被選中，其他按鈕為未選中狀態。英文命名Radio來源于舊收音機上的按鈕，用于舊收音機不同頻道的切換，當一個按鈕被按下時，其他按鈕會彈起，使被按下的按鈕處于唯一被選擇狀態的按鈕。
使用場景
1.當用戶需要在一組互斥的選項中進行單一選擇時使用單選框；如果要進行多個選擇，推薦使用多選框。
2.當選項數目在2-7個之間時使用單選框；如果選項超過7個，推薦使用下拉框。
3.如果有兩個含義相反的選項，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個多選框或者開關勾選為同意，不勾選為不同意。
4.如果每個選項都有同等的優先級，沒有推薦選項時，使用單選框；如果需要向用戶推薦某個選項，可以使用下拉框。
5.如果提供給用戶的選項很熟悉，看了第一個選項就能預見到所有的內容，如“周一”，那么后邊的選項是“周二到周日”等，這種情況下就不需要將所有的選項都展示出來，可以使用下拉框來簡化界面。
交互邏輯
1.選項的設置，在設計單選框的選項時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。應該滿足“互斥”的原則，因此選項之間要避免存在交集，同時也要注意選項覆蓋要全面，不能出現遺漏。
例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項。給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都可能不會選，就需要提供一個“其它”選項。
2.默認選項，一般情況下為第一個選項，需要選擇最安全，最有可能的選項作為默認選項，提前預判用戶的選擇，提升用戶選擇效率。
3.選項排序會影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復雜程度排序，由簡單到復雜；也可以按照操作后風險排序，將最安全的操作放在前邊，由風險最低到最高進行排序
4.排列對齊方式，豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項進行左對齊，不用受制于選項的標簽文字長短，但豎直排列會占用較多的垂直空間；水平排列要注意每個選項之間的間距，間距盡量大一點，要不然用戶會分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對而言，水平排列的方式更加常用。
5.交互區域，單選框的面積較小，用戶在點擊的時候會比較困難?？梢酝ㄟ^擴大點擊區的交互區域來提高易用性，將標簽文字也設置為可點擊，增加操作區域的面積，方便用戶操作
6.文字標簽，每個選項的文字都要簡潔明了的表達該選項所代表的含義。一般使用短語而不是句子，因此不需要以句號來結尾。盡量保證每個文字標簽用語的表達的一致性，不要出現有的用名詞，有的用動詞的情況。如果需要解釋說明，可以在選項下方使用單獨一行文字。如果標簽文字無法進行精簡，必須使用多行文字，將單選按鈕與文字頂對齊
7.交互狀態，每個選項都有選中和未選中兩種情況，每種情況對應了3種交互狀態，分別為默認、懸浮和禁用。
二.多選框
多選框的交互定義是幫助用戶完成從若干個互斥的選項集合當中選取一個或者多個選項的任務，多選框多用于表單中。傳統意義上，多選框是方形，單選框是圓的，用戶已經形成這種習慣認知，所以盡量避免使用特殊形狀
使用場景
1.當用戶需要在一組互斥的選項中進行多個選擇，完成N選n的任務，使用多選框
2.當選項數目在3-7個之間時使用多選框；如果選項超過7個，推薦使用下拉選擇
3.當選項數量為一個，包含“是”和“否”的邏輯，也可叫單個多選框 比如常見的用戶協議頁面，通常采用單個多選框。
交互邏輯
選項排序/對齊方式/交互區域/文字標簽等邏輯與單選框基本一致
1.選項的設置，因為所有選項處于外露狀態，所以超過7個時建議使用下拉選擇器，避免選項過多難以展示
2.默認選項，相對單選框，默認選擇在多選框中并不常見
3.提交操作，單個多選場景中，提交時必不可少的，可以是確認按鈕或是其他方式；下拉選框中為了提高效率也可不用確認，點擊空白處即確認選擇。
4.排列對齊方式：縱向排布，適用于選項內容較多或信息長度差異較大的情況；橫向，適用于選項數量多且內容簡短的情況
5.特殊狀態：相對于其他控件，多選有了兩個較為特殊的狀態“半選中”“禁用(已選)”
1）半選中狀態是全選狀態的一種特殊狀態，依附于全選狀態，所以當多選框中存在全選時才可能出現半選狀態，同時還需要有選中狀態的子項，全選半選狀態屬于【父級】狀態，交互的邏輯是狀態的變化是隨時體現的，所以【子級】狀態的變化，作為【父級】狀態也應該隨之變化，這樣父子級聯動才會有半選中狀態的出現。
2）禁用狀態有未選禁用和已選禁用，未選禁用一般是該條數據不滿足條件無法選中進行操作。而已選禁用一般用戶的權限不足無法進行操作，通常展示出來只是為了讓用戶了解到有此操作。
應用場景
1.復雜選擇器
復雜選擇器中常常會用到多選框，可以明確展示選項的選擇狀態，需要注意的是多選框可以承載的半選，全選狀態所對應的關系，是否符合業務場景。在實際工作中，我曾遇到過父級選擇影響子級但是子級無法影響父級的多選場景，不符合常規的多選習慣，但是在實際業務場景中真實存在。
2.權限設置
在很多權限設置/流程設置的頁面中，常常會用到多選框，需要注意的是各個場景中選中，取消，默認，重置等不同狀態下，頁面的變化，狀態扭轉時交互邏輯的合理性和易用性。
3.表格多選
表格頁面情況多且復雜，對于勾選有兩種形式一種是勾選多選框，一種是點擊行數據選擇，需要明確哪一種更適合當前的業務場景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對整個表格的影響
三.開關
開關用于兩種相對對立的狀態的切換,多用于「開/關」「啟用/停用」等，不同于單選和多選開關是一個即時性的操作，這也導致開關使用的特殊性。開關能明確的展示當前的功能狀態，讓用戶能高效的進行跳轉操作。
使用場景
1.用于對流程的快速開啟，如表格中開啟或關閉某條數據/功能
2.權重較高的功能或設置，如配置表單的停用/啟用，用戶權限的啟用/停用
3.用于開啟/關閉全局權限，后設置其他功能的操作，如業務規則的設置等
交互邏輯
1.開關 配有對應的文字說明，開啟/關閉某種功能或權限
2.開關具有聯動性，通過開關去控制下層功能的操作
3.開關的每一次變更狀態都要有相應的反饋，輔助用戶進行狀態判斷
四.下拉選擇
下拉選擇B端業務中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級聯，下拉樹等基本場景是可選項過多時，會使用下拉選擇器對所有選項進行整合方便用戶高效錄入信息。選項層級建議不超過 三層且需要有一定的邏輯排序，通常包括觸發器和下拉面板兩個部分當選項數量過多的時候，建議增加「搜索」功能。
下拉選擇結構
1.標簽文本：選擇器標題，明確選擇內容
2.選框：與文本框類似，需有一個外邊框，為可操作的熱區范圍，主要功能是與下拉菜單進行聯動
當選項較多的時候，多選框會配上搜索功能，目的是為了讓用戶快速找到對應的選項，而形式主要有以下兩種
3.右側標識(可選)：每個選框右側的圖標，都是選框類型的象征。常見的是下拉箭頭，默認朝下；展示選項列表時，箭頭朝上。
4.占位符：保持暗提示的簡潔，避免把暗提示作為選擇器的輔助說明，默認占位文字，格式為「請選擇xxx」
5.回顯值：回顯值通常包括兩種類型
1）當下拉單選，一般采用純文本回顯即可
2）當下拉多選，需要同時展示多個選中項，因此在錄入框中采取Tag形式，使單個選項也可以點擊刪除形成完整的閉環
6.選項：下拉選擇一般針對選項數超過5個
內容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項內容的不同，形式中也有較為復雜的，重點分析級聯選擇和樹：
1)樹展示，可選擇的數據是一個樹形結構時，例如公司層級、學科系統、分類目錄等，樹結構中可以自由選擇子節點和根結點。
2)級聯展示，針對的一般是有所屬關系的選項且所屬關系比較明確，層級一般3-5級，選擇到最末子級才能完成選擇一般是由大到小進行選擇，選項數量上3>2>1，比如省市縣選擇
3)分組展示,選項過多時考慮使用的方式，使用分割線將同一類選項進行劃分，用戶選擇時會思考從大的分類到具體的選項。但選項過多則還是建議用樹結構
7.選項面板：承載所有可選擇的選項列表，在選項數量過多時會對下拉菜單的高度進行限制，即設置下拉菜單的最大高度，當超過最大高度時，出現滾動條。面板相當于一個容器可以根據業務需求承載復雜的形式 例如tab分類、錨點、字母定位等，
選擇器狀態
默認（Default
懸停（Hover
1.未選擇，若選框有搜索功能則光標變成文本輸入狀態，若沒有搜索功能則光標變成小手（示例
2.已選擇，選擇后懸停狀態下全部清空的功能，不是所有場景下配置該功能， 要考慮實際業務中是否需要清空
激活（Active
1.未選擇，點擊框體激活下拉面板，單選一般是勾選后自動關閉面板，多選則需要點擊面板以外確認關閉面板
2.已選擇，若是已選擇再次激活，需要將已選擇的選項高亮，再次點擊已選選項則取消選擇；選項熱區，一般將整行作為熱區擴大點擊范圍，方便用戶操作。
禁用（Disable
1.選框禁用，用戶無法激活，選框置灰，在設計工程中需要將禁用于正常狀態之間拉開差距，這樣用戶能快速識別
2.選項禁用，表示該選項無法被選擇，不影響整個選擇器的功能，只用將該選項置灰即可，光標置入時會變成Not allowed
回顯規則
單選，多數單選選擇后下拉面板自動收起，回顯選擇的選項，選項回顯時有一些特殊情況如存在極端情況文案過長則結尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項中存在主文本副文本，考慮實際業務場景回顯時可只顯示主文本。
多選，以Tag形式展示已選擇項使單個選項也可以點擊刪除形成完整的閉環；存在的極端情況是當選項過多時的展示效果，一般有兩種形式撐開高度和選項融合
1）撐開高度，一般用在需要完全展示選擇項同時可快速調整已選項的場景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實現一些疏密變化，一般也不會無限撐開，會有一定的限制，并且在右側增加滾動條。
2）選項融合，對選項展示不作要求的場景中可根據文本框的寬度進行選項融合，展示具體的選項數量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。
3）省略展示選項，以文本形式展示，鼠標hover氣泡展示全部選項信息
問題思考
何時用下拉選框，何時用彈窗選擇？
大部分情況下，單選優先用下拉選框，用戶比較高效的完成選擇，同時也可以明確自己的選擇。而多選場景中對于選項數量可控，選項復雜度較低的可以用下拉選框。但是對于選項結構復雜，內容過載，用戶頻繁的滾動容易造成誤操作影響選擇的準確性和高效性，此時會考慮使用彈窗，且多選彈窗一般需要配有搜索區，選項區，已選區。需要注意的是，已選項在彈窗內的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項，所以可以采用省略展示選項的方式。
選擇搜索如何顯示？
如下彈窗選擇中，對于數量和層級比較復雜的選擇項，搜索是很有必要的，對于搜索結果的展現形式不同的場景可能會有不同，用戶使用搜索一般是對于選項比較明確，所以推薦搜索結果展示末級，用戶可以更高效的做出選擇，避免復雜的層級關系干擾。
五.時間與日期選擇器
兩種類型
1.時間點選擇，選定某一個時間/日期點，B端時間點選擇的業務場景較少
2.時間段選擇，選定某一個時間范圍，一般有開始時間和結束時間，時間段的應用一般是在數據篩選的場景中
確定時間類型后，要考慮時間粒度，時間粒度分為年、季、月、周、天、時、分、秒，B端圖表頁面中針對年度、季度、月度的篩選時很常見的，需要結合場景選擇時間粒度。
日期選擇器中一般是通過點擊讓用戶選擇時間，除了讓用戶點選外，時間選擇器還會提供一些快捷選項例如“今天、本周、本月，本季度“等。選擇后回顯的時間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺需要確定統一的樣式，避免增加用戶的認知成本。
時間段選擇，常見兩種形式分段式和連體式，在不同的平臺都有應用，在交互上的區別分段式需要用戶點擊兩次分別選擇開始時間和結束時間，連體式是用戶點擊一次調起時間選擇時間段，相對而言連體式操作更便捷，但是分段式理解更簡單，連體式存在一定的認知成本，總體上來說其實區別并不大，平臺需要建立統一的標準，這樣能形成較為統一的體驗和習慣。
選擇器在實際工作中應用廣泛，B端業務復雜，總會遇到各種新的場景，總結會有不足不全之處，歡迎大家一起探討交流。
文章來源：站酷 作者：MuMu魚
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗是用戶對產品價值的整體感受，其中包括用戶感受到的產品價值以及用戶感受到的操作體驗。不要讓用戶思考，這是每個設計師所追求的。這篇文章舉了大量的例子，來跟大家一起進行產品細節洞察分析。感興趣的朋友一起來看看吧。
對于B端，我想剛開始很多同學就直接拿Ant Design套套界面，因為公司要求并不高，隨后字節Arco Design也推出了對應的模版和規范，能讓我們快速作出一個不出錯的方案。
但是隨著公司對B端越來越重視，這些模版顯然就太爛大街了。公司、市場的要求顯然不止于此，我們的設計追求也不止于此。
那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
其實很簡單，王陽明先生告訴我們知行合一，知是行之始行是知之成。我們如何才能提升B端界面端精致度，第一需要知道什么是好的設計；第二需要不斷的去實踐去練習，缺一不可。
本文先和大家談談知的層面，提高我們的眼界，下面就和大家分享一些不錯的B端產品，大家有時間可以去慢慢體驗。
PS：作為B端設計師，一定要去多拆解競品，多研究好的產品，別面試的時候，面試官問你研究的B端產品是什么，你只知道阿里云、騰訊云、百度云哦！
做B端的同學，尤其是做CRM的同學應該都知道Salesforce，他是全球最大的 CRM（客戶關系管理） 工具公司。
Hubspot同樣是提供客戶管理相關的應用，雖然成立相對Salesforce晚，但是在市場上也占有一席之地。
從設計的角度來看，他的界面風格更加簡潔舒適，從體驗上來看和國內的CRM系統完全不同，其體驗更加自然和舒適。
這種風格大家看了有沒有覺得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發現風格有一點類似，大家可以對比國內產品去拆解下他們的交互細節有什么不同，完成同樣的任務他們采用的方案有何不同，相信你會有很多的收獲。
國外的界面看著總讓人覺得很舒適，僅僅是因為克制的設計、中性灰使用得好嗎？當然不是，是因為英文本身就是圖形化的文字。
如果翻譯成中文，你會發現好像不是特別理想。
這個樣子拿給領導過稿，怕是分分鐘被拍死，因此我們還是需要多看看國內優秀的產品。
神策的設計，我想B端的朋友不陌生吧，國內產品中他的設計一直是我們的參考對象。
不同于其他產品，他的體驗門檻比較低，注冊后就可以去體驗他的demo，也沒有試用期限，參考對象從可視化報表，到界面交互均能找到參考。
不過當你參考一次后發現，做出來的界面怎么還是少了一些靈魂，雖然界面風格上了一個臺階，但為什么用戶還是覺得產品難用。
這里不得不和大家推薦項目管理類產品了，這類產品是專門給互聯網公司的開發團隊使用，他們都是專業用戶，同時這些都是提高他們工作效率的工具，因此這些產品投入的成本更高，優化得更好，拆解他們的產品，就是直接觀看高手的成長之路。
Jira是Atlassian公司出品的一款事務管理軟件，JIRA的界面效果交互都非常不錯。大型互聯網公司如LinkedIn、Facebook、eBay等內部都在使用Jira。
同時他也是國內項目管理類產品的學習研究對象，因此大家可以通過文章、B站、界面截圖，自己申請體驗等方式全面的進行體驗。
同時也可借助群的力量，調研下有使用Jira的小伙伴，看看他們在使用中有什么問題，下面是我收集Jira網頁版和本地配置版的問題截圖，這些都來自不同角色的真實體驗，會更有分析的價值。（這部分截圖涉及到公司的數據，同時數量多不太方便打碼，就不分享給大家了。）
當然國內的項目管理類產品也得去看，我們要對比哪里做得好，哪里還需要改進。國內的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產品不管從視覺還是體驗都非常不錯，大家一定要去體驗。
通過不斷對競品進行拆解，你已經不是當初那個小白了，你的行業認知，方案設計能力應該趕超了一大波人。
成長的同時，又發現你設計的界面，不太精致，少了些溫度，這時候推薦你看文檔管理類產品。
第一個和大家推薦的是WPS，界面簡潔，配色舒適。
在管理類的軟件中，不得不提飛書的管理界面，從設計到使用體驗，他給我的感覺終于不是那么千遍一律，用組件庫搭建起來的感覺。
他開始有了溫度，開始注重品牌感的打造，用戶的引導，符合品牌調性的插畫。
對一些體驗的細節進行優化，比如傳統的編輯都是放在頁面頂部，它采用了離光標更近的位置。
根據菲茲定律，光標當前的位置和目標位置的距離D越短，所用的時間越短，具體好不好用，歡迎大家在評論區留言哦。
到這時候如果你覺得線上的產品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關鍵詞，去看看有沒有新的靈感。
我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應該可以找到很多不錯的設計。
風箏KK的花瓣：https://huaban.com/boards/76913106
如何提升B端界面的精致度？
第一，要知道什么是好的設計，多拆解國內外優化的B端產品。
第二，多在工作中時間，有時間多做ABC方案，鍛煉自己的方案設計能力，多踩一些坑，時刻保持學習能力，慢慢就成長了。
文章來源：站酷 作者：風箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
知識圖譜作為語義網絡，其技術算法研究被廣泛應用在人工智能和大數據等領域。通常，知識圖譜的運轉過程是由數據模型完成，用戶可見的只是計算后的結果，其數據的可視化也僅停留在對結果的可讀性展示上。但其實，圖譜之間的關系、數據計算的過程，也具備分析價值和潛在的機會信息。將知識圖譜轉化為可視化信息圖，能幫助用戶更好的理解和利用數據及其關系，但對于沒有技術背景的界面設計師來講，從技術架構、計算函數等技術視角去理解知識圖譜概念和應用相對困難。本文分享一種設計思路，幫助大家在實際工作中，完成知識圖譜向可視化交互界面的轉化。
藍藍設計的小編 http://www.syprn.cn