據說只要可能犯錯，就一定會有人犯錯，用戶犯錯的可能性比我們想象中要大得多得多得多
做好防錯與容錯，可以讓用戶更順暢...
據說只要可能犯錯，就一定會有人犯錯，用戶犯錯的可能性比我們想象中要大得多得多得多得多。
做好防錯與容錯，可以讓用戶更順暢的達成自己的目標。
恩，用戶總是那么不可理喻對吧
都做得那么明顯了，還犯錯。該提醒的也提醒了...誒～
打住，打住，當用戶犯錯時，別急著怪他，我們需要先判斷清楚。
用戶委屈的說：“來來來，我就想下載一個資源，大家都是講道理的設計師，來評評理，我錯在哪里？”
這，這... 每一步的確都好像沒問題，那，問題究竟在哪？
作為設計師的你是不是已經敏銳的察覺到了什么？
對，關鍵點在 ' 67bh ' 這里。都是空格惹的禍！
那好，你準備好方案救用戶了嗎？......（這里理論上應該停頓30s以上吧）。
當然，現在不會公布答案，方式有好多種。留著你看完文章中間部分再跟大家一起找方案吧。
這一部分的重點不是方案，而是思維。
很多時候，用戶并沒有錯，作為一個有擔當的設計師，我們可不能甩鍋。
有了這個前提，我們就可以去掉心中的那些煩躁和埋怨...開始愿意伸出援手，去拯救用戶了。
對，這個疑問就已經包含了解決方案了。
真的感嘆中文的博大精深，避 （防錯）、免 （容錯）。
為了讓大家能更好的理解什么是防錯和容錯，我特意舉一個例子哈～
（什么，防錯容錯你都懂？你怎么知道我講的跟你想的一樣呢，既然這么厲害趕緊做下面這道題。）
對，就是圖片里那個拿滑板的家伙，估計是第一次來這片海灘，有鯊魚都不知道，還使勁忘海里沖...
從避（防錯）的角度來看，你有什么方法幫他呢？（先不考慮哪種方法更好也不要考慮成本哈，能達到目的的都行。）
友情提示：防錯的目的是讓用戶在操作之前，盡量減少用戶出錯的可能性。
看看的你腦袋是不是真的轉得飛起...
我這邊有幾個想法，看看我們有沒有緣，想到一塊兒去了：
大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...
警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。
在通往海島的路線全程搭起防鯊網。
恩，目前就想到這些了，還有方案的同學可以在評論區炸沙發哈。
這些方式，我們試著抽象一下：
【提前做好引導和提示】大聲告訴他，這位拿滑板的大哥，海里有鯊魚，別忘海里沖了...
【優先選擇減少輸入】警告這位大哥，嘿兄弟，這里只允許坐輪船和直升機去海島那邊。
【限制原操作范圍】在通往海島的路線全程搭起防鯊網。
大家應該都發現了，這種方式雖然能達到讓用戶安全的目的，但是用戶會有挫敗感，同時也會有被限制的感覺。
我只要說到USB插頭，大家應該就開始腦補畫面了吧“為什么我插的進去的第一次永遠是錯的方向，OMG!”
那，容錯呢？
還是這位拿著滑板的大哥，想要去海上的小島，從免（容錯）的角度來看，你有什么方法幫他呢？
友情提示：容錯的目的是在用戶操作之后，自動糾正/化解錯誤或提供挽回的方法。
我有幾個奇怪的方法，來跟大家分享一下：
呃...馴化/殺死鯊魚。
派一直專業驅鯊救援隊跟隨這位大哥（滑板大哥：我何德何能，太感動了）。
同樣，我們繼續抽象一下：
【讓原本的錯誤不影響用戶行為和結果】呃...馴化/殺死鯊魚。
【出現錯誤可挽回】派一直專業驅鯊救援隊跟隨這位大哥，出現鯊魚就殺魚。
誒，成本好像非常高哈，但是用戶感覺良好哦～
因為他甚至都感知不到這片海還有過危險，按自己喜歡的方式行動就行。
我提一提微信消息的撤銷功能，大家可能就會舒緩一口氣了。
不知道挽回了多少個尷尬的瞬間，是吧～
可是...我只是一個有無縛雞之力的設計師，我肝不過鯊魚怎么辦？
來來來，前面那個喊救命的大哥又來了，大家趕緊想想辦法吧～
（第一步和第四步就是單純點擊，就先刪掉了）
前面講的方法也列在右側了，看看你們是不是可以針對每種方法找到對應方案了呢？
看看是不是可以這樣？
方案一：使用方法-提前做好引導和提示
方案二：使用方法-優先選擇減少輸入
方案三：使用方法-限制操作范圍
方案四：使用方法-出現錯誤可挽回
方案五：使用方法-讓錯誤不影響結果
在這個案例中，大家覺得那個方案更好呢？
好吧，這個問題的確很蠢。當然是 方案二 + 方案五 結合使用了。因為是兩個平臺的交互，而對于各自平臺而言，一個控制好輸出，一個控制好輸入。對平臺自身的容錯性有很大的幫助。
通過上面的案例，相信大家都已經熟練掌握好防錯和容錯的方法了。
什么，還沒掌握？那你滾回去，（望著你正在慢慢蜷縮的身體）不.........不是你滾，是你的鼠標往回滾!
那，我們先不管那幾個往回滾的同學，開始進行強化學習啦～
找了一些生活中經常用到的產品，讓大家感受一下防錯容錯的魅力。
如果你根本無法從圖中發現什么，那我只能說... 你還是需要經常用銀杏葉擦擦眼睛了（因為擦了之后你就更容易發現（人性）。
案例先到這里，大家一定以為要結束了吧～不，不，前面這些都不是最重要的。
方法總會越來越多，靠“別人”總結的方法也就能應個急。
來來來，放空～～～～拋棄你的職業相關認知、拋棄你的設計師的身份，你再看我們的設計。
你像孩子一樣，好奇又“無知”。
你會發現，為什么會有這么多奇怪的看不見的規則，為什么我這么難完成我的任務。
如果當客戶遇到問題，你能用合適的方法去解決，那你已經是個不錯的設計師了，但離優秀還很遠，因為優秀的設計師必須具有敏銳的嗅覺，要在產品團隊的前面，感知并規避風險。
所以，更重要的還是，我們必須學會變身。
好了，這一次真的需要大家獨立思考了，并且沒有標準答案，大家可以交流交流。
在以下場景中，可能會出現什么“錯誤”，如何有效處理用戶“犯錯”？
在生活中，其實會有很多很多“讓用戶犯錯”的產品/場景，多參與其中，去發現問題，去思考解決方案，慢慢的，你就會具備非常好的問題發現能力和解決能力了。
說了這么多，可能有一部分同學會想說：
“用戶出錯的情況應該很少吧，你花這么長的篇幅”
“你一定低估了用戶的智商”
我告訴你，出來玩玩，誰帶智商做事啊～
不信你看。
百度一下，你會發現用戶犯錯的可能性大大超出你的預期。
只是，你以為與你“無關”而已。
要防止用戶犯錯，你需要不斷的模擬用戶的操作行為，去捕獲那些可能存在的問題，然后將它一一化解；這個過程很難，因為你要拋開自己以往的經驗和認知，去感受用戶的視角。
想想，用戶體驗的改進不就是讓產品越來越符合用戶認知，從而減少用戶“犯錯”嗎？
只是有些錯誤，我們只作為圍觀者，將它推向了用戶。
從現在起，將“錯誤”留給自己。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：得勿
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
面對國內外競品崛起，QQ 音視頻如何尋求突破，制定對用戶有價值的策略，贏得數據增長和用戶口碑。
要突破用戶增長停滯的困境，需從全局角度思考，對問題所處的系統進行分析與洞察，找出拓展應用場景的機會點，提供技術或價值創新的功能與服務。
首先，針對 QQ 音視頻所處行業的競爭態勢進行全面、系統的分析，包括內部優劣勢，以及外部機會和威脅，以此制定相應的策略與計劃。
關注競爭對手，更要研究用戶，通過用戶調研洞察用戶需求，找出 QQ 音視頻應持續鞏固優化，以及需考慮突破的使用場景。
綜觀音視頻的行業發展與科技趨勢，有三個主要的發展方向：
超高清視頻
5G 高帶寬、低時延將開拓更多玩法和業務場景，超高清視頻通話將帶來更豐富的感官體驗，猶如面對面溝通。
應用場景多元化
從使用場景來看，音視頻已走出會議室，從單純的溝通交流，擴展至豐富的應用場景，廣泛服務于人們的日常生活。
智能終端+音視頻云服務
未來智能終端將具備聯網連接的能力，搭配音視頻服務提供商的云服務，使得通話無所不在，可隨時通過智能終端進行音視頻通話。
綜合前述分析，提出 QQ 音視頻的用戶體驗愿景（UX Vision）和價值主張（Value Proposition）。
QQ 音視頻的本質在于溝通，其聲影重現的獨特優勢，消弭了空間距離。未來隨著通信技術的演進，高畫質、低時延、實時互動的感官體驗，將實現遠距臨場（Telepresence）的終極目標，使用戶感受到近乎面對面交流的體驗，就像在眼前〝一起做〞某些事。
2. 價值主張
綜上所述，提出 QQ 音視頻為用戶傳遞的價值——社交臨場感（Social Presence）。
臨場感相關理論與研究，源自 Short、Williams 和 Christie 等三位學者于 1976 年所提出的社會臨場感理論（Social Presence Theory），指的是雙方通過傳播媒介進行溝通的過程中，所能感受到對方真實存在的程度。QQ 音視頻憑借高度的媒介豐富性，提供實時響應、語言/非語言線索交互，使用戶能輕易地在社交互動中感知對方真實存在，進而在心理上獲得歸屬感與認同感。
根據過往文獻與媒介特性，將 QQ 音視頻的社交臨場感分為四個層次：
界面質量（Interface Quality）
界面可用性與視覺設計不會干擾操作，能讓用戶專注于音視頻溝通。
真實感（Realness）
音視頻的聲畫體驗及與人交流的方式，能貼近于真實世界。
互動性（Interactivity）
用戶之間的互動交流越強，越能感受到對方的存在。
情感傳達（Affective Expression）
通過情緒表達、環境氛圍的營造與對方建立連接，在心理上感到彼此的存在。
圍繞社交臨場感的價值主張，制定突破當前困境的目標與設計策略。音視頻產品除了廣泛應用在通訊場景，正逐漸賦能更多創新場景。基于 Q 群生態和調研結果，聚焦于生活、辦公、娛樂等場景進行探索。
兩個主要的設計目標：
重塑體驗
回歸通訊本質、夯實基礎體驗，對通話界面進行改版設計，讓用戶專注于音視頻溝通。
場景探索
開拓應用場景，通過社交臨場感賦能生活、辦公、娛樂等場景需求，為用戶創造價值。
針對 QQ 音視頻的應用場景，制定相應的設計策略。
界面質量是影響社交臨場感的關鍵要素，然而調研結果顯示，QQ 音視頻的通話質量和體驗落后競品，包括主界面功能復雜、通話流程痛點多、核心能力落后競品等體驗問題。
針對上述問題，提出 QQ 音視頻改版的設計思路：
1. 化繁為簡，回歸本質
分析不同通話類型的用戶習慣，以及各個功能的使用數據，區分功能優先級，分為核心功能、輔助功能、高級功能等三個層次，重新定義功能架構與布局。
2. 鏈路排查，解決痛點
運用認知走查（Cognitive Walkthrough）快速排查通話過程存在的用戶痛點，并將缺失的功能與信息補齊，最終解決超過 16 個以上的可用性問題。
3. 補齊短板，超越競品
對于視頻畫面的思考：
QQ 采用 1 大 N 小的畫中畫模式，適合 1 人主講、他人觀看的場景，主客位明顯，缺少一種與他人共在的感覺；反觀微信是 9 路宮格畫面，視頻畫面僅聚集在上半部，有利于節省流量，但同時也限制了屏幕利用率。
兼合上述兩者的優點，設計了 16 人視頻通話的功能：
16 人視頻通話也延伸了不同的創意玩法，例如祝朋友生日快樂、拼字表白或求婚。
QQ 視頻通話重度用戶的通話對象，主要來自戀人伴侶，這類用戶最希望獲得〝在一起〞的陪伴感，而社交臨場感的〝真實感〞是營造音視頻陪伴感的關鍵因素——彷佛對方就在眼前，兩個人一起聊天、一起做某些事。
1. 讓他 ? 她看到最好的你
聲影的真實感，是讓對方感受到你就在眼前的必要條件。真實感包括流暢度與清晰度，通過用戶行為分析，發現在不同場景下，用戶對視頻清晰度與流暢度有不同偏好 。
為此，QQ 音視頻開創了的高清 / 流暢模式，用戶能根據自身需求做選擇，切換自動、流暢 480P、高清 720P 三種模式，針對不同模式定制碼表，匹配不同的幀率和碼率。除此之外，QQ 音視頻也與手機廠商合作，開發 QQ 5G 1080P 超高清視頻通話，提前布局 5G 應用。
2. 記錄〝在一起〞的時刻
創造情感連接，有助于拉近彼此距離，營造陪伴感。有什么是情侶、閨蜜平時會做的事，因為分隔兩地不能一起做了？
循著這個思路，設計了全新的雙人合拍模式。距離遙遠的兩人，通過 QQ 音視頻實現留影合拍，讓彼此的情感得以沉淀。另外，為了增添合拍時的樂趣，該模式結合了 P 圖資源與人臉識別的能力，讓用戶可選用場景模版與掛件，創造屬于兩人的高光時刻。
3. 〝一起做〞某些事
情緒之間的感染，更能強化陪伴感與互動感，據此設計了第一款支持視頻聊天的一起看應用 ——視頻包廂。有別于Q群一起看的廣播形式，視頻包廂訴求更親密、1v1的陪伴感，彷佛對方坐在身邊，一邊看劇、一邊聊天。視頻包廂的價值，除了提升QQ音視頻的互動性，也為關系鏈活躍拓展應用場景。
線上會議是辦公用戶主要的使用場景，一方面將聚焦用戶核心需求，思考辦公場景的功能設計，另一方面增強用戶之間的互動性，讓會議更具社交臨場感，就像面對面溝通一樣高效。
1. 溝通更多元
為什么需要文字聊天？當主持人開啟全員靜音，此時無法回應講者；多人通話時，最多同時聽到 6 個人的聲音；不方便開麥或攝像頭，又想參與互動。
為了解決痛點、完善溝通形式，QQ 音視頻新增了文字聊天的功能，可通過手勢快速展開 / 收起聊天界面，并支持發送表情和文字消息；這些消息只會在通話界面沉淀，不影響未參與會議的群成員，避免不必要的打擾。
2. 輕松會議管理
對辦公用戶而言，線上會議需要完善的管理機制。QQ 音視頻嘗試結合 Q 群管家機器人，小成本實現通話預定。用戶能設置通話主題、開始時間、會議提醒，并支持分享會議鏈接到微信、QQ 空間等其他渠道；獲取鏈接的用戶，能快速拉起 QQ 加入會議。
3. 以我所?為你呈現
面對面分享是信息共享最有效率的方式，分享者能夠當面指出要點，有效地表達與溝通。QQ 音視頻借助系統鏡像投屏，實現邊通話、邊共享的能力。在商務會議中，將手機中的信息與操作，實時同步給其他參會成員，例如文件、照片、郵件內容等，并支持同步畫面、設備聲音。另外，諸如游戲分享、作業輔導、操作協助等場景，都能通過屏幕共享滿足需求，為用戶帶來實質性的效益。手機端最后一塊拼圖完成后，QQ 多端皆可實現屏幕共享，現已成為 QQ 音視頻的口碑能力。
疫情期間，線下聚會被迫停止，線上娛樂應運而生。在此契機之下，借助音視頻實時互動、聲影重現的特性，開啟了新的娛樂形態——QQ一起派對。
QQ 一起派對是基于音視頻展開的實時社交游戲，旨在打造真實聚會游戲體驗，讓游戲過程更貼近線下真實場景，就像面對面一起玩聚會游戲，能與好友邊玩游戲、邊聊天。通過環境氛圍的營造，包括場景具象化、增強代入感等方法，實時感知好友的情感變化，從而獲得社交臨場感，在心理上感到彼此的存在。
此外，有別于競品需通過點擊按鈕作答，QQ 一起派對利用實時語音識別，讓用戶通過更自然的人機交互方式，在游戲過程中進行語音搶答，彷佛置身于真實世界中與好友互動。
QQ 音視頻經過一系列的體驗重塑，獲得不錯的成果?；谏睢⑥k公、娛樂等場景深挖需求，新增許多實用功能和創新玩法，為用戶體驗和價值創新奠定良好的基礎，且歸功于這些積累，以致于在疫情期間，QQ 音視頻能不畏競品的挑戰。除此之外，多項新增能力，例如屏幕共享、視頻包廂、QQ 一起派對，獲得用戶廣泛好評；調研顯示，用戶樂于將 QQ 一起派對推薦給其他人，足見該功能獲得不錯的用戶口碑。
對于音視頻行業來說，疫情迎來的爆發式增長，無法保持高速成長態勢，會有一定程度的回落，但能提高大眾接受度和習慣養成，認識到音視頻能在一定程度上替代線下溝通，不僅限于通訊功能，音視頻應用擁有更多的可能性，正逐漸賦能更多創新場景。為此，QQ 音視頻基于社交臨場感，探索并賦能生活、辦公、娛樂等應用場景，提供技術或價值創新的功能與服務，為用戶創造獨特的價值。
面對市場上同類競品的崛起，作為一個 UX 設計師，除了因應產品思維設定目標，亦應思考如何以價值驅動解決問題：對于如何解決問題、邁向未來愿景，提出最適切、有效的方法。換言之，要關注的不只是當前面臨的問題，更重要的是擘畫用戶體驗愿景，提出該產品的價值主張，并制定相應的設計策略。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：騰訊ISUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
聽到<夜配色>這個詞，你腦海中會聯想到什么樣的色彩？或者什么樣的畫面？
可能最容易被人聯想到的就是黑色，因為夜晚給人的印象通常就是一片漆黑。如果繼續聯想，可能有的人也會想到藍色，因為真實的夜晚也并非純黑，但是這種藍一定是暗色的藍。
但是夜晚也并非什么都看不見，有時候也會有光亮，比如自然的星光或者人造的燈光，這種光可以是冷色的。
當然也可以是暖色的。這些情況基本上就是人們通常會聯想到的關于<夜配色>的色彩形象。
而讓大家失望的是，這些通常會想到的色彩印象其實都不屬于<夜配色>的形式，那到底什么是“夜配色”呢？
電影《綠皮書》海報
這個需要從第 91 屆奧斯卡金像獎最佳影片《綠皮書》說起，《綠皮書》的海報色彩很美：水藍色的汽車與天空色相呼應，司機也穿著藍色的上衣，整個畫面都散發著明凈的藍青色調，奇妙的是，后座的“主人”卻穿著一件咖啡色系的套頭衫，但是露出的襯領同樣也藍色系的，其實這種色彩組合就屬于<夜配色>。不過大家先別急，我們接著往下看。
電影《綠皮書》劇照
不僅電影海報如此，整部劇中的色彩搭配也始終保持著<夜配色>的基調。比如女演員明亮的藍色針織外套與褐色的裙子就形成了夜配色，其他場景也是如此，這正是它迷人的地方。電影《綠皮書》講述的是一段跨越種族、階級的友誼故事，而<夜配色>恰恰具有民族的、世界的、神秘的、共通的色彩屬性。
具有以上這些屬性，很大程度上是因為這種色彩搭配的不常見性，不常見不代表就沒有規律可循，任何色彩搭配必定有它的內在規律，我們不能只看表面，抓到本質才能掌握它的內核。我們把剛剛提取的這幾組顏色排列出來分析一下。
我們看這些色彩有什么共性：上方的顏色純度或明度都是在偏低的范圍，而下方顏色的純度或明度都普遍偏高。如果再結合冷暖色來看我們會發現，上方都是暖色系，而下方都是冷色系。
因此我們可以總結出：低純度或低明度的暖色搭配高純度或高明度的冷色，這種配色形式就是<夜配色>，也叫<影印色>。
如果大家難以理解，我們可以再通俗一點，就是暗濁的暖色搭配鮮亮的冷色。嚴格來講<夜配色>并不算什么真正的配色技巧，無非屬于冷暖色搭配范疇，但是因為搭配在一起很特別，所以我們就把它單獨拿出來作為一種搭配原則來探討。
異域情調
最早引入<夜配色>這一概念的是服裝領域。很多咖啡色系的衣裙如果只是搭配黑色或米色等色系，整體上雖然和諧但也會顯得單調和乏味，所以就會加入藍色系，這時就會有不一樣的感覺。并且<夜配色>的搭配具有高級感，比如藍色的牛仔褲就可以試試搭配駝色上衣。
復古紳士
而且<夜配色>的搭配男女通用，比如男士的話可以是水綠色的毛衣搭配棕色西裝外套，或是是領帶、胸花都可以。男士使用夜配色，很有時尚感，會顯得精致典雅，細節處彰顯低調華麗的質感，整體具有復古紳士的浪漫氣息。
魅力碰撞
使用<夜配色>也可以考慮面積配比，想要冷暖碰撞的效果，通常情況下就是在上半身和下半身使用一對夜配色，比如葡萄酒色配天青藍，充滿異域風情。
點睛之筆
當然也可以用點綴的方式來使用<夜配色>，比如用鮮亮的冷色搭配低明度的咖啡色，用鮮亮的冷色來點綴，展示高級感，對于服裝搭配而言，衣領、袖口、包、鞋這些都可以是點綴色的應用載體。
對于這些<夜配色>在服裝領域的應用，我們可以將它們提取出來，按照暖色和冷色重新擺放，然后旋轉角度，不知道大家發現什么沒有，其實<夜配色>的獨特美感，像極了天空色與大地色的碰撞。
雖然到這里大家對<夜配色>已經有了一些基本的了解，但是想要良好的運用到設計當中，還需要繼續加深理解，畢竟我們之前所看到的都是電影或者服裝領域的<夜配色>，而我們切入的角度，就是先排除那些不屬于<夜配色>的形式。
回到之前我們總結的，首先<夜配色>包含一種冷色和一種暖色，然后色調上分為暗濁的和鮮亮的，所以它們兩兩組合就會出現四種形式：也就是暗濁的冷色搭配鮮亮的冷色、暗濁的冷色搭配鮮亮的暖色、暗濁的暖色搭配鮮亮的暖色、暗濁的暖色搭配鮮亮的冷色。
暗濁的<冷色>——鮮亮的<冷色>
首先第一種就是暗濁的冷色搭配鮮亮的冷色，這種配色形式很常用，比如通常我們確定一個背景色之后，上方的文字色或元素色就會在背景色的基礎上改變純度或明度。
暗濁的<冷色>——鮮亮的<暖色>
第二種就是暗濁的冷色搭配鮮亮的暖色，這種比第一種更常見，因為這種形式就是我們通常所講的冷暖搭配，一冷一暖，一亮一暗。
暗濁的<暖色>——鮮亮的<暖色>
第三種形式就是暗濁的暖色搭配鮮亮的暖色，這種搭配形式整體方向也是比較偏向統一協調的，不會有太大的問題，但也很難給人眼前一亮的視覺沖擊。
暗濁的<暖色>——鮮亮的<冷色>
最后一種就是暗濁的暖色搭配鮮亮的冷色，也就是我們這期教程中所講的<夜配色>，這種配色形式運用到平面設計領域，整體上還是可以保留它的氣質和風格的：神秘、充滿異域風情，當然我認為這些屬性并不是一成不變的，但是不變的是<夜配色>會給人不一樣的感覺，因為通常人們都不太會這么配色，所以我們什么情況下去使用<夜配色>，相信大家心理已經有答案了吧。接下來我們來嘗試幾個案例。
這是一個人物插畫，首先我們先將人物皮膚的顏色填充進來，然后是箱子。
接下來就是為人物的穿著填色，這時候我們就可以回想之前我們列舉的服裝搭配的例子了，我們可以將褲子的顏色填充一個大地色。
然后是上衣的顏色，如果是常規的人物插畫配色，通常情況下衣服都會選擇一個跟褲子顏色相統一和諧的顏色，但是如果我們想要一些不一樣的效果，這時就可以使用<夜配色>，將衣服的顏色填充一個天藍色，也是我們之前所講的碰撞色，因為面積相當。
當然，我們也可以將褲子填充水藍色，有些類似牛仔褲的顏色，衣服填充一個咖色，這也是一種<夜配色>。
或者我們也可以使用點綴色的形式，比如整體顏色是咖色，但是我們可以在衣領、袖口、褲腳這些小面積區域填充亮冷色。
再或者是鞋子的顏色也可以，或者再大膽一些給頭發染個色。
我們也可以嘗試一個網頁首屏，比如畫面中這種色調的圖片現在很流行，本身就很適合我們這期內容所講<夜配色>。
如果我們添加白色文字，雖然識別度很好，但是不會給人眼前一亮的感覺，會稍顯平庸。
這時我們就可以嘗試<夜配色>的搭配，當然文字色可以有選擇，都可以嘗試一下，甚至是偏暖一些的文字也不是說就不可以，我們總結出的規律要為我們所用，而不要被規律所限制，希望大家能明白這個道理，千萬不要理解的太死板。
最后我又嘗試了一個海報，海報的主題是“南非當代攝影展”，這個名字就會讓我腦海中浮現出異域風情，所以我認為可以使用夜配色。
先將圖片置入到版面當中，而這張圖片本身就是大地色調，因此也是適合<夜配色>搭配的。
所以上方的背景色我們就可以填充一個天藍色，現在整體上下色調對比就是<夜配色>的形式。
文字這里我們也可以不使用黑色，替換成大地色，下方的小字使用上方的藍色。但是做到這里我感覺畫面還缺少點什么，也就是整個版面的構圖和文字編排都很規矩和工整，這時候就需要有一些破壞這種工整的元素。
所以我就在右下方這里添加了一個手寫體的英文，為這個畫面增加一些靈動，當然顏色上也是吸取上方的藍色，形成呼應。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：研習社
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近一直在惡補關于結構化思維的知識，作為一名視覺設計師的我，經常使用發散思維的方式來工作和思考。雖然在工作中常常能冒出很多點子和想法，但很難將它們組織成一個清晰完整的解決方案，隨著工作時間越長，發現這種思維能力會讓自己在工作中經常遇到這些困惑：
如果你也有同感，建議要開始學習結構化思維，其實結構化思維是一個職場人非?；A的能力，掌握這項能力能讓我們在職場上少走很多彎路，但是這種能力不容易學會，是需要在平時刻意訓練才能漸漸掌握。
設計師隨著年齡的增長，除了保持硬核的專業技術能力之外，更重要的是不斷提升自己的思維能力，接下來我結合自己的這段時間的思考和實踐給大家做些分享：
本篇文章大綱如下：
先來做一個小游戲，大家試下用 3 秒鐘時間速記下圖，然后說出圖上有多少種顏色。
是不是覺得有點記不?。咳绻麍D片換成這樣呢？答案是不是一目了然？
圖二將顏色進行整理分類成暖色系和冷色系，并且顏色按照從深到淺的規律排序，更容易讓人理解和記憶，因為它更加符合我們人類大腦思維的 3 條基本規律：
結構化思維定義
結構化思維是當我們面對問題的時候，通過某種結構，從多個側面進行思考，拆成一個個能解決的部分，并且采取恰當的手段系統性地解決問題，是一種從無序到有序的思考過程；也是從整體到局部，并且層級分明的思考模式。
結構化思維可以真正的幫助我們去思考和表達，作為設計師的我們在日常工作中非常忙碌，被很多瑣碎的項目搞得自己手忙腳亂，因此學會用結構化思維有以下四大價值：
1. 理清大腦思路
更系統化的全局思考，讓自己的設計思路經得起推敲
2. 高效解決問題
更有效率和節奏的解決手上問題，減少讓自己重復勞動
3. 清晰表達溝通
與項目成員的溝通更順暢，讓他人更準確理解自己所表達的內容
4. 構建知識體系
通過碎片化知識進行結構化整理，逐漸建立自己的知識體系
講了這么多，那應該怎么掌握這種思維能力呢，其實我們很早就接觸到結構化思維了，比如學習寫作文時的“總分總”結構，解答數學題時先求什么再求什么，都屬于結構化思維的范疇。
結構化思維分為兩種框架，第一種是自上而下的拆解法，適用于日常思考問題和表達溝通上；第二種是自下而上的歸納法，適用于歸納總結，輸出文章。
自上而下的結構原理來自金字塔結構，有 4 個特點：結論先行、以上統下、歸類分組和邏輯遞進，下面用一副簡單的圖來表示結構。
如何應用
1.結構化思考問題
舉個例子大家會更明白些，比如最近接到一個設計需求是進行官網的改版，那我們利用結構樹進行自上而下思考，從了解現狀-深入分析-解決方案進行結構化思考。
了解現狀是先思考改版的背景以及目標，深入分析是要清晰目前官網的問題是什么？競品是怎么做的？解決方案拆解為交互體驗層面和視覺表達層面應該怎么做？
通過前期這三步的結構化思考，讓自己大腦捋順思路，就更清楚該怎么進行下一步了！
2. 結構化表達溝通
比如我們平時輸出了多個設計方案時，需要跟產品闡述設計方案 A 更好，那應該怎么清晰的表達呢？
同樣利用結構樹，第一步先表達自己的結論，再給出更合適的理由，然后逐步闡述支持理由的每一個事實依據。用結構化的方法表達出來，讓同事也更清楚自己的想法和設計思路！
當手上有一堆信息卻毫無頭緒時，而且不清楚該用什么框架的時候，通過下面四個步驟可以把信息進行結構化整理。
從收集信息-歸類分組-提煉結構-完善框架四步組成，像剛才開始玩的小游戲就是用這四步進行總結和完善，我概括抽象成以下這四步方法：
可以看到從一開始各自灑落零散的信息到逐漸清晰的結構化信息，這就是自下而上歸納法的神妙之處。當然我舉例的是比較概括性的模型，具體可以通過自己工作中的真實案例進行不斷的練習。
結構化思維是每一個設計師都必備的，今天的小分享更多是一個拋磚引玉，剩下的需要大家真正實際應用到工作和生活中，大家平時跟產品溝通交流，項目匯報，撰寫文章都逐漸用結構化思考的方法，久而久之你會發現處理更復雜的事情都游刃有余，事半功倍！
文章來源：優設 作者：PSERIC
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
空狀態是APP內必然存在的一個狀態，現在在很多產品里空狀態是不太受到重視的，給人的感覺是比較臨時性，可有可無的，但是這個狀態在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節當中的成敗有著不可忽視的作用。適宜的空狀態設計可以提升用戶體驗，實現用戶留存。
因此針對美柚APP內的空狀態進行一次全新的升級探索，前期也進行大量研究分析，對后續的探索方案有所方向指導。
空狀態是APP內必然存在的一個狀態，現在在很多產品里空狀態是不太受到重視的，給人的感覺是比較臨時性，可有可無的，但是這個狀態在引導性、愉悅性和保留用戶等方面的潛質對于產品體驗在細節當中的成敗有著不可忽視的作用。適宜的空狀態設計可以提升用戶體驗，實現用戶留存。
因此針對美柚APP內的空狀態進行一次全新的升級探索，前期也進行大量研究分析，對后續的探索方案有所方向指導。
文章來源：站酷 作者：huangzhijianwusD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
同理心對于任何人來說都是難得可貴的，它在人際交往中有非常突出的優勢。對于設計師來說，則更為重要。擁有同理心的設計師往往能更好的進行設計，知道用戶的需求才有可能做出讓用戶滿意的產品，滿足了用戶的需求，他們才會愿意長期使用你的產品，從而形成正向的反饋。
在體驗設計的過程中，如果不能對設計對象有更深入的了解，設計思維就無法開始；而用戶對產品持有的觀念、態度甚至意見并不一定會表現的很明顯，這需要設計者更加主動的與用戶進行互動去構建共情。
這可以使得你能夠更加了解他們的需求、想法、情緒和動機，好消息是，你能掌握多種方法來與用戶構建共情去獲取更多信息；并且當你有足夠的“正念”和經驗時，你也能成為共情他人的專家。
“正念”：有目的的、有意識的，關注、覺察當下的一切，而對當下的一切又都不作任何判斷、任何分析、任何反應，只是單純地覺察它、注意它。
1. 百科
共情（Empathy），共情又譯作同感、同理心、投情等，由人本主義創始人羅杰斯所闡述的概念，卻越來越出現在現代精神分析學者的著作中。
2. 通俗含義
我們常說的感同身受、換位思考、同情心、設身處地、將心比心這都是共情的一種描述。
Empathy一詞源于德語“Einfühlung”，意為讓人們跟藝術品融為一體，比喻走進一件藝術品的奇妙體驗。
因此國外常常會看見“站進別人鞋子里去”的共情比喻——（Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.）意為正如俗話所說，站在他們的立場上，以便更深入地了解他們的處境。
對于“共情”我更多的理解成是兩個或多個載體之間的一種共識一種情緒共鳴，然后再到行為跟思維上的影響。
但實際上發生完全的共情是不可能的，有時連我們自己也會做一些無法理解的迷惑行為，并且客體是多樣化的，可以是跨物種的，跨維度的；而我們要做的就是在工作中定義共情的有效范圍，盡可能的與目標用戶產生共情以了解更多信息或需求，然后去定義和構思新的需求與設計。
共情很重要，但它不是設計工作中的全部，有效而不要過度的使用也很重要。
3. 身邊的共情
我們身邊的共情無處不在，正是這些共情使得人與人之間的情感更豐富，當然也是因為人類有強大的表達能力。通常當客體情緒在表達出來的情況下，主體是可以更容易得到共情的。
所有當主體更專注的去感受客體的情緒表達時，能夠使達到共情變得更迅速。
常見的共情場景；
以上都是一些生活中常有的共情場景。
通常當我們與其他客體得到共情時，往往我們能夠更清楚客體傳遞的信息是什么、需求是什么，這完全可以應用到我們的設計場景中幫助我們獲取更多的有效信息。
如果你想要更了解你的產品用戶，從而讓你的產品更好的服務用戶得到更好的體驗口碑，那么體驗設計師如果對目標用戶沒有更深入的了解，那么產品設計中的各種設想都是沒辦法決策的，甚至都難以測試和驗證，這對產品研發一定是一個危險信號。
而共情則能幫助我們洞察用戶需求和定義問題，所以共情在體驗設計中顯得基本且至關重要。
1. 電商的界面設計
產品原型與交互界面時常是有所出入的，其原因在于前者更關注產品本身框架與盈利點，而后者更注重整體的用戶體驗的細節。
共情用戶需求，以及思考商業盈利與用戶體驗之間平衡的點似乎是無法脫離共情應用的。這便是共情應用的一種體現，也是共情價值與設計賦能的體現。
2. 移動端常見廣告推廣界面
一直以來在產品營銷廣告中，始終存在一些流氓的交互方式讓用戶苦惱。往往更加注重和尊重用戶感受可以更好的提升用戶的好感與使用體驗，這便能夠使產品與用戶之間的感情升溫贏得口碑。
3. 組織產品功能架構時
在構建產品業務框架時，大多可能會出現以公司服務資源為中心的構建方式，但同時這種由內而外開發方式會為產品帶來更多的弊端（往往產品投入使用后，會出現超出預期的問題）。
嘗試去站進用戶的鞋子里去，或者找來目標用戶甚至是相關的專家來做咨詢，減少研發迭代的彎路。
4. 用戶研究中的共情應用
用戶畫像是體驗設計中常見的一種設計工具，它能夠幫助產品定義目標用戶，能夠有效用于產品設計決策或者洞察用戶需求等。
一個好的用戶畫像是基于真實用戶的，它不是胡編亂造的。畫像在于形成多組可供參考的角色材料，這有利于跨團隊跨層級之間快速實現共情，達到業務目標的統一性。
因此一組目標用戶畫像能否幫助團隊快速實現共情是一個重要的衡量標準，而不僅是一組人口調查數據。
5. 用故事去描述
故事的元素通常會更豐富更有趣味，用故事敘事更能提升用戶的興趣和關注，這能便于構建共情。
因此當你發布測試任務或者撰寫研究報告時，都可以加入背景故事或用故事敘事，便于對象更容易理解和共情，你甚至可以用筆繪制故事版，像四格漫畫一般。
因為用圖傳達概念或信息更容易讓人記住或回想起來，并且當你用這些方法時，自身也能加強理解。共情不是單向傳遞的，不要高估對方的理解能力，讓你的信息更簡單明了的傳遞也是重要的共情應用！
6. 仔細傾聽和觀察
在與目標用戶進行互動的時候，通常會借助電子設備幫助記錄這個過程，目的是為了更仔細的觀察和聆聽，并注意到被忽略的信息。
就像一種正念，我們會帶有目的性的觀察目標活動，并且不會進行干涉，同時不對當下發生的一切提前作出任何結論、分析或判斷，直至這個過程有了一個里程或結果，我們再將收集到的各種信息放在一起去思考。
傾聽和觀察是人與人之間互動的根本方式，相對仔細完整的傾聽與觀察可以獲取到更加有效的共情，而片面的則可能產生共情偏差。
7. 小結
共情在體驗設計的應用中很廣泛也很重要，甚至還延展了許多幫助共情的工具，這些都是為了讓設計者能夠更好的了解市場、發掘用戶需求、甚至找到新的產品機會，最終幫助企業解決產品實際問題。
有時在共情工作中，我們就像一個老中醫一般，對患者望聞問切。 一旦有了問題，就應該及時使用適當的方式去共情目標對象，定位問題所在，并制定解決方案。
1. 制定共情的范圍
為了尋求更加有價值的目標用戶進行共情研究，我們會對共情的目標進行范圍篩選，可以是根據某些用戶習慣、常使用的產品服務、某個場景、也可以是社會群體（例如學生、司機）、甚至可以是動植物(例如寵物類產品)。
所以第一步你要根據需求去制定共情目標的篩選條件，然后一點點縮小和鎖定有效的目標群體，再開始招募、溝通或是進行其他下一步工作，我們沒辦法跟所有目標用戶構建共情也沒有必要這樣做。
通常五個左右的用戶就能夠反映出大多數問題，并出現重疊的反饋。
2. 在不同研發階段嘗試與特殊的用戶共情
伴隨產品的發展過程用戶也在時時發生微妙的變化，在跨度大的迭代中，嘗試與產品潛在用戶或極端用戶進行共情研究也是很有價值的。
潛在用戶的需求通常存在著更多的不確定，這也意味有發現新機會的可能；而極端用戶通常會有一些更刻薄的需求，這些需求可能不是主流，但也有主流發展的潛力，不過至少這些改進會為極端用戶帶來驚喜。
這就像是在公交車站下安裝一臺自動售賣機，不是大多數人的需求，也不是當前的主流趨勢，但卻能夠為部分乘客帶來方便或驚喜，我們不能忽略這些少數。
3. 帶有目標的進行
在體驗設計的過程中，我們需要與目標對象構建共情時，一定是有目的有意圖的。
以使用性測試為例，往往我們都會設定一些產品測試任務和目標給用戶，再進行觀察和共情。這也將允許我們能夠在同一個或相似的場景事件中發生共情，這樣才能夠獲取到更真實有效的共情。
以一個吸塵器產品為例：如果對方是在地毯上測試的，而你是在木質地板的環境下去共情的，那么共情結果肯定是有所出入的，所以構建一個共情目的甚至是環境是有效共情的一個重點之一。
4. 情緒降噪與傾聽
構建共情會受情緒影響，在共情前有必要去除負面情緒影響，不要為共情構建帶來更多的阻力，另外則是仔細的傾聽和理解。
這就好比我們要專注學習，除了認知聽講，腦子里一旦充斥著其他負面情緒或思維影響，就很難完成專注學習的目的。
同理：在用戶幫助我們測試產品或訪談時，我們也要首先做好彼此的心理建設，去除主要的負面情緒甚至去除不利的環境影響因素，例如緩解用戶緊張不安的情緒，找一個素一點且安靜的測試房間等。
5. 合理的工具輔助
圖表、筆記、錄制設備是幫助我們共情的最好工具，在不同的場景下，這些工具能夠幫助我們更好的收集信息，并且便于我們思考和共情。
我們在短時間能記住的信息是有限的，這也是為什么我們會用到7±2這種定律去控制信息量的原因。
以用戶體驗地圖為例，在記載用戶體驗產品的過程中，便是一種很好的共情輔助工具，它能夠按照使用步驟或階段記載用戶使用情況和情緒變化等反饋。
6. 構建共情的要素
在我的理解中，共情由四個主要的因素影響來構成。
尊重
受到不同的環境跟經歷影響，要去準確理解一個人是很困難的，哪怕是多年的夫妻也是如此。所有首先要做到尊重，消除任何偏見，不要帶有批判或評價的心理。然而做到足夠的尊重也并不容易。
觀察
觀察是獲取客體傳遞信息的主要途徑，不能掌握足夠的信息是無法做到共情的，片面的或者假設的信息都將影響到正確的共情。
思考
對客體的信息與觀念進行思考，嘗試理解客體的各種行為根因以達成一致的認知。
融入
將自己感受到的情緒與認知代入到共情對象的行徑中，去仔細揣摩，以洞察用戶的行為、感受、需求、思維方式以及與產品之間的關聯，就像靈魂附體一般，以達到更深入的共情來定義問題。
7. 共情為設計賦能
最后便是共情結果如何應用到設計之中，將共情結果賦能到產品設計也是共情工作的價值所在。
通常這套流程是共情->定義->構思->原型->測試，在這個整個過程中隨時是可以返回到前面其他階段中反復打磨的，而共情作為一個起點也揭示了其重要性。
我們一切的共情工作皆為了能夠優化和解決產品的問題，使得產品體驗能夠更好，這是我們在體驗設計中不斷去共情的初衷。
以移動端的產品來講，現在好的共情設計真是百花齊放，這正是創新技術與共情設計發展的好趨勢，也是敢于創新探索的好機遇。這里我們放三種典型的欣賞案例說一下：
1. 智能便捷型
給用戶提供更加智能便捷的服務功能，使得用戶能夠獲得更輕松流暢的服務體驗。
2. 高效人性化類型
通過大數據與技術手段，為用戶提供更加高效人性化的服務方案，提升用戶好感度、依賴性，加強產品口碑與體驗。
3. 情感關注型
有一些屬于情感關注類型的共情設計，通過獲取用戶的場景信息或其他數據共情用戶情緒，并給予用戶合適的關愛、幫助、引導。為用戶帶來軟件有情感，品牌有溫度的體驗。
4. 小結
在體驗設計中，情感化設計一定會是一個值得深入方向，我們應該關注到不同場景下用戶會產生的情緒變化，為用戶提供更加走心的服務體驗，為產品收獲更多口碑。
當然，在產品完善的這個漫長過程中，我們也要隨時甄別我們所做的事情是否對用戶和企業有更高的價值。在研發資源有限的情況下，劃分這些設計點的權重，合理分配研發資源。
能夠對共情構建產生影響的認知偏差挺多的，這些認知上的偏差會影響到共情的正確性，不僅是構建共情的主體還是客體都會有影響。
這里圍繞構建共情補充了一些相關認知偏差，希望能夠在構建共情的工作中再少一些坑：
1. Empathy gap（共情偏差）
共情偏差是指由于經驗、預期和態度存在差異，我們很難準確地去體會他人的感受。這一點就是前文提到的我們無法做到完全共情，我們對共情的概念要有一定認知。
建議：通過技巧去彌補，減少認知偏差。多一些耐心的聆聽，減少偏見和執念，嘗試思考如果是TA該怎么辦？
2. Negativity bias（負面情緒偏差）
情緒會對我們的認識和行為產生影響，而負面情緒產生的影響則是最大的，這會對我們的共情判斷產生偏差，所以前文我們會提到消除情緒噪點的概念。
建議：盡可能的維持中立或積極的情緒狀態會更有助于共情工作，但至少是消除負面的情緒影響。
3. Observer-expectancy effect（觀察者預期效應）
觀察者常常會不自覺地扭曲影響因素或數據，以得到預期結果。
這就好比在用戶進行產品測試的期間，向你咨詢了意見，而你很有可能不自覺的給出你的期望或者一些暗示，這會對目標產生可暗示性偏差(Suggestibility)，使得目標想到的內容往往會被扭曲。
建議：
4. Automation bias（直覺偏誤）
基于自身的認知或經歷，有時做出判斷會過度依賴個人直覺，而不去收集更多有益于做出準確判斷的證據。
這一現象常常表現為產品或項目經理的一拍腦袋的決定，但是往往因為過度依賴直覺而忽略了實際的場景差異等。
建議：對于不能直接給出有效證據的決策，要敢于質疑而去追究其正確性，當使用參考信息時要思考兩者之間的差異性?？傊灰獞{借事件的相識性而忽略差異性，最終憑直覺決策。
5. Authority bias（權威偏見）
人們會過度倚重某些權威的意見，而忽視事情發生的實際背景。以品牌的影響力為例，兩種不同的任務實施程序，通常人們會認為大品牌的方案更好更值得信賴，而忽略了一些體驗細節。
建議：對于相比較的軟件測試任務，我們有時會弱化甚至隱匿品牌信息。其目的便是在比較時減少這些權威偏見，不論是正面的還是負面的，這些都會影響用戶判斷，所以在特殊的場景研究下，請注意這一影響是否干擾結果。
6. Normalcy bias（正?；`）
人們會過度依賴先前的經驗，把一些極端事件看作正常的，認為事情很快會過去。
以用戶測試為例，當6個人都正常完成了測試任務，僅有一人出現出現問題時，這是一個概念問題，我們不能忽視這僅有的一個用戶，更不能安慰自己這只是一個特例。
建議：上文有提到嘗試與極端用戶進行交流，其實道理類似，問題存在即合理，我們有必要注重和研究這些極少數，它們極有可能帶來新的機會點。
7. Illusion of transparency（透明度錯覺）
人們高估自己的個人心理狀態被他人知曉的程度的一種傾向，時常表現為你以為別人都明白了你的意思，實際上別人明白的還遠遠不夠。
與“知識的詛咒”這一偏差的差別在于，前者是我以為對方明白了實際對方還有諸多不解，而知識的詛咒是你無法給對方進行可理解的解釋，有著文化背景或認知的障礙，實際上這兩者偏差概念都會影響到共情工作。
實際辦公中透明度錯覺時常體現在需求表達、文檔解釋、跨部門溝通中，往往你以為你說的已經很清楚了，但在實際研發中卻會體現出諸多差異。
建議：適當的了解其他部門的專業文化，便于更好的解釋給對方。
組織好信息框架，簡單易懂的信息框架易于對方理解，例如書本的目錄大綱、信息的分類等?？鐖F隊或部門的PRD（產品需求文檔）盡可能的減少專業術語的應用或者進行注釋，文檔的目的不在于體現多專業而是更加高效易懂的傳達信息。
研究用戶從觀察自己開始。每個時代的人都會有不一樣的特質或者某些現狀，在這個大環境下，你會發現與同齡人之間有很多相似點，那么加強對自己的行為理解，是不是就等同研究了這些同齡用戶的共有特征？
不論是什么產品都需要考慮到用戶的需求，對于用戶需求進行分析，確定可行性，最后進行實現；重點要關注在產品中用戶需要的是什么，對用戶的想法進行探索；本文作者分享了關于七種深度洞察用戶需求的方法，我們一起來了解一下。
需求分析是市場研究階段的重要活動，也是新產品開發流程中的一個重要環節，是產品經理經過深入細致的調研和分析，準確理解用戶對產品的功能、性能、可靠性等具體要求，將用戶非形式的需求表述轉化為完整的需求定義，從而確定產品必須做什么的過程；該階段是分析產品在功能上需要“實現什么”，而不是考慮如何去“實現”。
需求分析的目標是把用戶對待開發產品提出的“要求”或“需要”進行分析與整理，確認后形成描述完整、清晰與規范的文檔，確定產品需要實現哪些功能，完成哪些工作；此外，產品的一些非功能性需求（如產品質量、款式、特色、包裝、安裝、售后等）及約束條件也是需求分析的目標。
這些都是從客戶（產品開發或者市場部的同事）或者身邊一些人（需要更多反饋的感官專家或設計者）在一整天的訪談（包括焦點小組、一對一訪談）、開放式問卷或者與消費者接觸的過程中發現的問題；這就需要我們根據調研的初步結果進行深入的“需求分析”才能得到想要的結論和應用價值。
在組織行為學中，馬斯洛曾經在1943年發表的論文中對人類需求做出了定義，在人類動機理論中，馬斯洛提出了需求層次理論模型；這一理論可以有效地觀察人類最根本、最基礎的需求水平。
馬斯洛認為，人類具有一些先天需求，人的需求越是低級的需求就越基本，越與動物相似；越是高級的需求就越為人類所特有。同時這些需求都是按照先后順序出現的，當一個人滿足了較低的需求之后，才能出現較高級的需求，即需求層次。
馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重和自我實現五類，依次由較低層次到較高層次排列，如圖所示。在自我需要實現之后，還有自我超越需要，但通常不作為馬斯洛需要層次理論中必要的層次，大多數會將自我超越合并至自我實現需求當中。
圖馬斯洛需求層次理論圖譜
如果這些需要（除性以外）任何一項得不到滿足，人類個人的生理機能就無法正常運轉。
換而言之，人類的生命就會因此受到威脅。從這個意義上說，生理需要是推動人們行動最首要的動力。
馬斯洛認為，只有這些最基本的需要滿足到維持生存所必需的程度后，其他的需要才能成為新的激勵因素，而到了此時，這些已相對滿足的需要也就不再成為激勵因素了。
馬斯洛認為，整個有機體是一個追求安全的機制，人的感受器官、效應器官、智能和其他能量主要是尋求安全的工具，甚至可以把科學和人生觀都看成是滿足安全需要的一部分；當這種需要一旦相對滿足后，也就不再成為激勵因素了。
人人都希望得到相互的關心和照顧，感情上的需要比生理上的需要來的細致，它和一個人的生理特性、經歷、教育、宗教信仰都有關系。
人人都希望自己有穩定的社會地位，要求個人的能力和成就得到社會的承認。尊重的需要又可分為內部尊重和外部尊重。內部尊重是指一個人希望在各種不同情境中有實力、能勝任、充滿信心、能獨立自主。
總之，內部尊重就是人的自尊。
外部尊重是指一個人希望有地位、有威信，受到別人的尊重、信賴和高度評價；馬斯洛認為，尊重需要得到滿足，能使人對自己充滿信心，對社會滿腔熱情，體驗到自己活著的用處價值。
這是最高層次的需要，它是指實現個人理想、抱負，發揮個人的能力到最大程度，達到自我實現境界的人，接受自己也接受他人，解決問題能力增強，自覺性提高，善于獨立處事，要求不受打擾地獨處，完成與自己的能力相稱的一切事情的需要；也就是說，人必須干稱職的工作，這樣才會使他們感到最大的快樂。
馬斯洛提出，為滿足自我實現需要所采取的途徑是因人而異的。自我實現的需要是在努力實現自己的潛力，使自己越來越成為自己所期望的人物。
馬斯洛理論把需要分成生理需要、安全需要、社交需要、尊重需要和自我實現需要五類，依次由較低層次到較高層次，從企業經營消費者滿意（CS）戰略的角度來看，每一個需求層次上的消費者對產品的要求都不一樣，即不同的產品滿足不同的需求層次。
根據五個需要層次，可以劃分出五個消費者市場
經濟學上，“消費者愿意支付的價格≌消費者獲得的滿意度”，也就是說，同樣的洗衣粉，滿足消費者需求層次越高，消費者能接受的產品定價也越高。
市場的競爭，總是越低端越激烈，價格競爭顯然是將“需求層次”降到最低，消費者感覺不到其他層次的“滿意”，愿意支付的價格當然也低。
KANO模型是東京理工大學教授狩野紀昭(Noriaki Kano)發明的對用戶需求分類和優先排序的有用工具，以分析用戶需求對用戶滿意的影響為基礎，體現了產品性能和用戶滿意之間的非線性關系，如圖所示。
根據不同類型的質量特性與顧客滿意度之間的關系，狩野教授將產品服務的質量特性分為5類。
KANO 模型（產品性能和用戶滿意之間的非線性關系）
也稱為必備型需求、理所當然需求，是顧客對企業提供的產品或服務因素的基本要求；是顧客認為產品“必須有”的屬性或功能。當其特性不充足（不滿足顧客需求）時，顧客很不滿意；當其特性充足（滿足顧客需求）時，顧客也可能不會因而表現出滿意。
對于基本型需求，即使超過了顧客的期望，但顧客充其量達到滿意，不會對此表現出更多的好感；不過只要稍有一些疏忽，未達到顧客的期望，則顧客滿意將一落千丈。
對于顧客而言，這些需求是必須滿足的，理所當然的；對于這類需求，企業的做法應該是注重不要在這方面失分，需要企業不斷地調查和了解顧客需求，并通過合適的方法在產品中體現這些要求。
例如，夏天家庭使用空調，如果空調正常運行，顧客不會為此而對空調質量感到滿意；反之，一旦空調出現問題，無法制冷，那么顧客對該品牌空調的滿意水平則會明顯下降，投訴、抱怨隨之而來。
再例如，智能手機的基本型需求有語音通話質量、信號覆蓋、操作系統兼容、安全性、日常使用和性能：待機時間、速度等；試想一下，一個智能手機沒有信號，通話質量差，操作系統不兼容，被感染病毒，待機時間10分鐘就沒電，如果手機運行速度慢到接近崩潰，這些都會使用戶的不滿情緒增加；但是上述這些需求都滿足后，并不能帶來用戶滿意度的增加，因為用戶認為這些是必須要有的。
也稱為意愿型需求，是指顧客的滿意狀況與需求的滿足程度成比例關系的需求，此類需求得到滿足或表現良好的話，客戶滿意度會顯著增加，企業提供的產品和服務水平超出顧客期望越多，顧客的滿意狀況越好；當此類需求得不到滿足或表現不好的話，客戶的不滿也會顯著增加。
期望型需求沒有基本型需求那樣苛刻，要求提供的產品或服務比較優秀，但并不是“必須”的產品屬性或服務行為有些期望型需求連顧客都不太清楚，但是是他們希望得到的，也叫用戶需求的癢處；這是處于成長期的需求，客戶、競爭對手和企業自身都關注的需求，也是體現競爭能力的需求。對于這類需求，企業的做法應該是注重提高這方面的質量，要力爭超過競爭對手。
在市場調查中，顧客談論的通常是期望型需求；質量投訴處理在我國的現狀始終不令人滿意，該服務也可以被視為期望型需求；如果企業對質量投訴處理得越圓滿，那么顧客就越滿意。
又稱興奮型需求。指不會被顧客過分期望的需求。
對于魅力型需求，隨著滿足顧客期望程度的增加，顧客滿意度也會急劇上升，但一旦得到滿足，即使表現并不完善，顧客表現出的滿意狀況則也是非常高的；反之，即使在期望不滿足時，顧客也不會因而表現出明顯的不滿意。
當顧客對一些產品或服務沒有表達出明確的需求時，求企業提供給顧客一些完全出乎意料的產品屬性或服務行為，使顧客產生驚喜，顧客就會表現出非常滿意，從而提高顧客的忠誠度；這類需求往往是代表顧客的潛在需求，企業的做法就是去尋找發掘這樣的需求，領先對手。
例如，一些著名品牌的企業能夠定時進行產品的質量跟蹤和回訪，發布最新的產品信息和促銷內容，并為顧客提供最便捷的購物方式。對此，即使另一些企業未提供這些服務，顧客也不會由此表現出不滿意。
不論提供與否，對用戶體驗無影響；是質量中既不好也不壞的方面，它們不會導致顧客滿意或不滿意。例如：航空公司為乘客提供的沒有實用價值的贈品。
又稱逆向型需求，指引起強烈不滿的質量特性和導致低水平滿意的質量特性，因為并非所有的消費者都有相似的喜好。
許多用戶根本都沒有此需求，提供后用戶滿意度反而會下降，而且提供的程度與用戶滿意程度成反比；例如：一些顧客喜歡高科技產品而另一些人更喜歡普通產品，過多的額外功能會引起顧客不滿。
前三種需求根據績效指標分類就是基本因素、績效因素和激勵因素。在實際操作中，企業首先要全力以赴地滿足顧客的基本型需求，保證顧客提出的問題得到認真的解決，重視顧客認為企業有義務做到的事情，盡量為顧客提供方便，以實現顧客最基本的需求滿足。
然后，企業應盡力去滿足顧客的期望型需求，這是質量的競爭性因素；提供顧客喜愛的額外服務或產品功能，使其產品和服務優于競爭對手并有所不同，引導顧客加強對本企業的良好印象，使顧客達到滿意。
最后爭取實現顧客的興奮型需求，為企業建立最忠實的客戶群。
因子分析是指研究從變量群中提取共性因子的統計技術。
最早由英國心理學家C.E.斯皮爾曼提出。他發現學生的各科成績之間存在著一定的相關性，一科成績好的學生，往往其他各科成績也比較好，從而推想是否存在某些潛在的共性因子（某些一般智力條件）[張樂飛1] 影響著學生的學習成績。
因子分析可在許多變量中找出隱藏的具有代表性的因子，將相同本質的變量歸入一個因子，可減少變量的數目，還可檢驗變量間關系的假設。
因子分析是社會研究的一種有力工具，但不能肯定地說一項研究中含有幾個因子，當研究中選擇的變量變化時，因子的數量也要變化；此外對每個因子實際含意的解釋也不是絕對的。在市場調研中，研究人員關心的是一些研究指標的集成或者組合，這些概念通常是通過等級評分問題來測量的，如利用李克特量表取得的變量。
每一個指標的集合（或一組相關聯的指標）就是一個因子，指標概念等級得分就是因子得分。
因子分析方法的主要應用有兩種：其一，減少變量的數量；其二，找出變量之間的結構關系。
在產品開發中，因子分析能夠用于關鍵變量的優先級排序和分組，比如：產品屬性之間的關系和產品屬性對產品偏好的影響。在實際應用中，通過因子得分可以得出不同因子的重要性指標，而管理者則可根據這些指標的重要性來決定首先要解決的市場問題或產品問題。
聚類分析是一種探索性的分析，在分類的過程中，人們不必事先給出一個分類的標準，聚類分析能夠從樣本數據出發，自動進行分類。
聚類分析所使用方法的不同，常常會得到不同的結論。不同研究者對于同一組數據進行聚類分析，所得到的聚類數未必一致。
從實際應用的角度看，聚類分析是數據挖掘的主要任務之一；而且聚類能夠作為一個獨立的工具獲得數據的分布狀況，觀察每一簇數據的特征，集中對特定的聚簇集合作進一步地分析。聚類分析還可以作為其他算法（如分類和定性歸納算法）的預處理步驟。
聚類分析的一個重要用途就是針對目標群體進行多指標的群體劃分，類似這種目標群體的分類就是精細化經營，個性化運營的基礎和核心，只有進行了正確的分類，才可以有效進行個性化和精細化的運營，服務及產品支持等。
常見業務應用場景如下：
通過對特定運營目的和商業目的所挑選出的指標變量進行聚類分析，把目標群體劃分成幾個具有明顯特征區別的細分群體，從而可以在運營活動中為這些細分群體采取精細化，個性化的運營和服務，最終提升運營的效率和商業效果（如把付費用戶按照幾個特定維度，如利潤貢獻，用戶年齡，續費次數等聚類分析后得到不同特征的群體）。
企業可以按照不同的商業目的，并依照特定的指標標量來為眾多的產品種類進行聚類分析，把企業的產品體系進一步細分成具有不同價值，不同目的的多維度的產品組合，并且在此基礎分別制定和相應的開發計劃，運營計劃和服務規劃（如哪些產品是明星類產品，那些產品是瘦狗類產品）。
聚類分析是挖掘電子商務網站數據價值的重要方法之一，通過分組聚類出具有相似瀏覽行為的客戶，并分析客戶的共同特征，可以更好的幫助電子商務的用戶了解自己的客戶，向客戶提供更合適的服務（如某B2C電商平臺上，根據用戶的搜索、瀏覽、購買記錄通過大數據分析，通過第三方平臺向客戶精準推送產品）。
聚類分析是細分市場的有效工具，同時也可用于研究消費者行為，尋找新的潛在市場、選擇實驗的市場，并作為多元分析的預處理。
多維尺度法是一種將多維空間的研究對象（樣本或變量）簡化到低維空間進行定位、分析和歸類，同時又保留對象間原始關系的數據分析方法；其特點是將消費者對產品的感覺偏好，以點的形式反映在多維空間上；而對不同產品的感覺或偏好的差異程度，則是通過點與點間的距離體現的，我們稱這種產品或項目的空間定位點圖為空間圖，空間軸代表著消費者得以形成對產品的感覺或偏好的各種因素或變量。
在分析消費者對產品功能的需求度時，首選選擇研究對象，如列出某個產品的所有產品功能；然后從目標市場中抽取一個樣本人群（通常30-50人），讓他們對產品功能的需求度打分；最后采用多維度分析獲得一張代表了產品功能需求度關系的可視化圖。
可視化圖中的維度代表了消費者對產品功能需求依賴的關鍵要素，為方便起見通常選擇2-3個維度。投保人購買保險產品時所需的第三方互聯網工具產品功能在生命周期和需求頻率上的多維度分析如圖所示；通過多維尺度分析幫產品經理區分功能優先級，做出產品決策。
投保人互聯網工具產品應用多維度分析
多維尺度分析優點是很明顯的。研究者可以利用得到的位置結構圖將研究對象進行分類，還可以對隱藏在數據背后的空間維度做出相應的判斷和解釋。
多維度分析通過把所研究對象的數量關系轉化為直觀圖形，達到直觀展現研究對象的目的；多維尺度分析的缺點是分析結果不是唯一的，結果可以在空間中旋轉和平移，這為分析者對結果的解釋制造了難度。
聯合分析法，又稱結合分析法，是對結合效應的評價，從而有效地解決了傳統調查方法中需要調研對象獨立評價屬性的問題。
聯合分析有三種主要形式，包括權衡矩陣法、兩兩比較法和全輪廓法，其中又以全輪廓法最為常用；該方法提供給研究的參與者一系列的產品描述，參與者被要求瀏覽所有的描述，做出一系列的評價，對調研結果進行數學方法分析后，就可以導出該類產品的各屬性的效用值。
對于市場研究領域，在聯合分析之前的所有方法幾乎都會使用重要性比率尺度來度量產品屬性的重要性水平，即都會直接向消費者提問一個產品中他們最看重的屬性。
這種方法有幾個嚴重的缺點：首先，調研的經驗表明，如果不限制條件的話，消費者傾向于認為每個屬性幾乎都是同等重要的；其次，消費決策很大程度上依賴的是整體的判斷。當消費者被要求分離各種屬性并且對各屬性進行量化評價并且描述某個屬性水平的高低將驅使其購買一個產品而不是另一個產品時，即使是最老練的消費者也將感到無所適從。
在聯合分析中產品被描述成為輪廓，每一個輪廓由能夠描述產品重要特征的屬性和賦予每一屬性的不同水平的組合構成。
消費者在實際購買時并不是基于產品某一屬性而是綜合考慮產品各個屬性及屬性水平從而做出購買決策的。因此消費者對某一產品輪廓的評價可以分解成構成這個輪廓多個屬性水平的評價以及不同屬性在決策時所占的權重。
在聯合分析中用分值也叫做效用來描述消費者對某一屬性水平的偏好，聯合分析能夠較好地模擬消費者購買的實際過程，從而客觀、真實地測量消費者對某一產品的偏好及產品不同屬性在購買過程中的重要性。
以QQ會員等級為例，如圖向用戶展示屬性組合以及用戶需求等級。在本例中，有8個不同屬性，每種屬性對應9種不同的屬性水平，由此構成的屬性組合可以滿足不同的QQ用戶的需求。
聯合分析（騰訊QQ群產品會員等級劃分）
聯合分析是對人們購買決策的一種現實模擬。因為在實際的抉擇過程中，由于價格等原因，人們要對產品的多個特征進行綜合考慮，往往要在滿足一些要求的前提下，犧牲部分其他特性，是一種對特征的權衡與折衷。
通過聯合分析，我們可以模擬出人們的抉擇行為，可以預測不同類型的人群抉擇的結果；因此，通過聯合分析，我們可以了解消費者對產品各特征的重視程度，并利用這些信息開發出具有競爭力的產品。
李克特量表是屬評分加總式量表最常用的一種，屬同一構念的這些項目是用加總方式來計分，單獨或個別項目是無意義的，它是由美國社會心理學家李克特于1932年在原有的總加量表基礎上改進而成的。
李克特量是目前調查研究中使用最廣泛的量表，當受測者回答此類問卷的項目時，他們具體的指出自己對該項陳述的認同程度；該量表由一組陳述組成，每一陳述有“非常同意”、“同意”、“不一定”、“不同意”、“非常不同意”五種回答，分別記為5、4、3、2、1，每個被調查者的態度總分就是他對各道題的回答所得分數的加總，這一總分可說明他的態度強弱或他在這一量表上的不同狀態。
李克特量表應用步驟“
1）收集大量（50～100）與測量的概念相關的陳述語句。
2）有研究人員根據測量的概念將每個測量的項目劃分為“有利”或“不利”兩類，一般測量的項目中有利的或不利的項目都應有一定的數量。
3）選擇部分受測者對全部項目進行預先測試，要求受測者指出每個項目是有利的或不利的，并在下面的方向-強度描述語中進行選擇，一般采用所謂“五點”量表：
4）對每個回答給一個分數，如從非常同意到非常不同意的有利項目分別為5、4、3、2、1分，對不利項目的分數就為1、2、3、4、5。
5）根據受測者的各個項目的分數計算代數和，得到個人態度總得分，并依據總分多少將受測者劃分為高分組和低分組。
6）選出若干條在高分組和低分組之間有較大區分能力的項目，構成一個李克特量表；如可以計算每個項目在高分組和低分組中的平均得分，選擇那些在高分組平均得分較高并且在低分組平均得分較低的項目。
我通常會在產品的早期創建一張范圍矩陣表，用來列出所有討論過功能和內容。這樣一個范圍工具就出現了，它可以用來支持人們討論整體的優先級別，以及每一個功能的工作量，然后決定哪些功能應該納入范圍之內，而哪些應該排除在外。
在分析每一個功能的重要性的時候，把人物角色加入這個工具中，就能讓這些用戶始終停留在每一個人的腦海中，可以大大地幫助你在決定項目范圍時，把人物角色變成其中一個積極的部分，如圖所示。
李克特5點范圍矩陣量表（功能需求度轉化）
李克特量表的構造比較簡單而且易于操作，因此在市場研究實務中應用非常廣泛。
在實地調查時，研究者通常給受測者一個“回答范圍”卡，請他從中挑選一個答案；需要指出的是，目前在商業調查中很少按照上面給出的步驟來制作李克特量表，通常由產品經理和研究人員共同研究確定。
文章來源：人人都是產品經理 作者：長乘
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
寬度單位我是用百分比還是px？還是rem？區別是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素？瀏覽器窗口大小和設備大小和分辨率大小區是什么區別？
什么是響應式網站，自適應又是什么？兩者有何區別和聯系？
百分比寬度布局和流式布局和前者的關系是什么？
既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發了一個移動端版？這里面有那些坑需要避開？
歷史長廊
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞--漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：
即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。
結合自身產品用戶訪問瀏覽器分辨率
鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下
靜態式布局：
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
自適應布局：
用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。
彈性布局：
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
流體式布局：
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
響應式布局：
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。
否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
選型
如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題。總之，根據場景響應式可以從各種層面，各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
實踐與技巧
首先，我們需要了解幾種分辨率的差別。
ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率
以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧。考慮技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
左側的可視區代表整個屏幕小于960px時的具體布局和內容
右側的可視區代表整個屏幕大于等于960px時的另一種布局
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
刪格
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
1. 列和槽（Columns and Gutters）列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。
2. 頁面邊距（Side Margins）頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
3，用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D
4，斷點是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
5，網格規則，列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
6.流體柵格與混合刪格
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
文章來源：站酷 作者：酷家樂
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
管對用戶體驗很重要，但空狀態經常被忽略。知道它們是什么以及如何使用它們，應用于UX最佳實踐，可以產生很多好處。
什么是空狀態？
UX設計師有很多機會來創造愉悅而有意義的體驗。一種經常被忽略的機會是“空狀態”或空白屏幕。空狀態是用戶體驗產品時無法顯示的時刻。
以下是一些常見的空狀態情況的示例：
A. 一個新的Dropbox屏幕，其中未創建任何文件或文件夾。
B. 在待辦事項列表管理器中完成所有任務后的結果屏幕。
C. 不支持命令時，在Slack中顯示錯誤屏幕。
D. 啟動一個新的社交帳戶，并且沒有任何連接。
E. 在Gmail中搜索內容，但沒有結果。
這些介于中間的時刻提供了改善用戶體驗并因此擴大商機的機會。對于UX設計人員而言，抓住一切機會來改善用戶體驗并為業務增加更多價值是一件好事。
一個有用的空狀態將使用戶知道發生了什么，為什么發生以及如何處理。這是良好的空狀態UX設計的兩個示例：
在首次啟動產品時，Dropbox Paper為用戶提供了良好的空狀態界面。號召性用語按鈕可幫助您繼續使用，而不必擔心下一步該怎么做。
搜索查詢不返回任何結果時，空狀態界面設計的一個很好的例子。該界面提供有用的參考，并讓用戶知道發生了什么。
以下是一些機會錯誤的空狀態設計示例：
這是一個空狀態的界面，可以提供一些反饋，但是卻錯過了向用戶提供任何其他指導或要采取措施的機會。
在這種空狀態的界面中，我們只是看到一個幾乎空白的網頁。圖像本身很棒，但是它不會引導用戶沿任何特定路徑點擊，也不會通知或指示用戶。
空狀態的類型
這是四種常見的空狀態：
A. 首次使用–在沒有其他內容可以顯示時，例如新的Evernote或Dropbox帳戶，發生在新產品或服務上。
B. 用戶已清除–在用戶完成諸如清除其收件箱或任務列表之類的操作且結果為空白屏幕時發生。
C. 錯誤–發生錯誤時或由于網絡問題而導致手機脫機等問題時，會發生這些錯誤。
D. 無結果/無數據–在無內容顯示時發生。如果有人執行搜索并且查詢為空或沒有可用數據顯示（例如，在篩選沒有數據的日期范圍時），就會發生這種情況。
隨著空狀態設計受到越來越多的關注，UX設計人員發現，從業務和用戶體驗的角度來看，利用它們都有有益的結果。
使用設計良好的空狀態的好處
設計周到且有用的空白狀態屏幕可以幫助提高產品參與度，使用戶滿意并減少用戶流失。
Scott McKain在他的《客戶真正想要什么》一書中提出了出色的客戶體驗的六個指導原則。
a. 引人入勝的體驗
b. 個人重點
c. 相互忠誠
d. 差異化
e. 協調
f. 革新
當將這些原則應用于空狀態設計時，它們可能對企業非常有益-例如，提高產品滿意度和降低放棄率。
以下三個方面也可以從良好的空狀態設計中受益：
A. 用戶入門–除了增強的用戶體驗之外，還提供了建立信任和繼續使用產品的機會。
B. 品牌建設–產生知名度并提升公司形象，以建立更多的品牌資產。
C. 個性化–在各種使用狀態下都有趣或充滿活力；營造一種個人風格的感覺。
設計良好的空狀態的好處不可低估。它們不僅為引人注目的客戶體驗做出了貢獻，而且隨著客戶滿意和參與的機會窗口越來越短，它們可以說是非常好的體驗。
如何用目的填充空白屏幕
以下是一些UX最佳實踐，可確保將空白屏幕設計為有用的信息。
共情。UX設計師即使在產品的最黑暗角落也能創造出更好的體驗，這一切都增加了驚喜。對于空屏幕，同理心的消息傳遞增加了多樣性，并創建了一種更具吸引力的個性化體驗。
Gusto是用個性化和一些有趣的個性填充空白狀態屏幕的一個很好的例子。
意象。有一種設計原則稱為親生物效應。從自然角度看，這是一種減少壓力和提高注意力的狀態。添加一些風景圖像（例如，空狀態錯誤屏幕的背景）可以帶來更愉悅的用戶體驗。
圍繞親生物效應設計的空狀態屏幕可通過減輕壓力和幫助參與而對用戶體驗產生積極影響。
正確的指導。根據產品類型的不同，可以使用空狀態來指導用戶。一個很好的例子是項目管理應用程序。使用新帳戶后，尚無任何項目在進行中，這為幫助用戶快速入門提供了潛在的絕佳機會，從而減少了放棄的機會。這是一個例子：
Evernote在引導用戶使用其空狀態頁面設計方面做得很好。
入門內容。有很多屏幕空白的時間足夠使用戶感到沮喪和離開。對于某些產品，提供良好的入門內容有助于他們直觀地了解正在發生的事情以及下一步可以做什么。
這是帶有啟動程序內容的空白狀態屏幕的示例：
它為用戶提供了基礎，并減少了產品混淆和遺棄的機會。
提供一個行動步驟。對于某些產品，我們不需要提供指導或在屏幕上填滿任何內容，因為這沒有任何意義。在這種情況下，設計人員可以簡單地提供一個動作步驟。
但是，最好將動作減到最少。?？硕芍赋觯骸白龀鰶Q定所需的時間隨著選擇的數量和復雜性而增加?！?因此，當號召性用語最多保持一兩個時，用戶可能會更快地采取行動。這是一個很好的例子：
它告訴用戶采取措施，但仍將其保持在最低水平。
另一個很好的例子是Instagram。當人們不熟悉該平臺時，他們還沒有關注任何人（也沒有人關注他們）。專注于Instagram的所有出色功能很容易，但是，一個良好的空白狀態屏幕可以為他們提供“添加要關注的人”的選項。
當首次使用該平臺時，Instagram用戶會以一種快速便捷的方式來尋找人。
結論
在UX設計中很容易忽略空白狀態（或空白屏幕），因為它們很少發生并且并不總是很容易理解。但是，將它們包含進來的好處被低估了，因為它們可以增強用戶體驗并幫助創建更具凝聚力的產品。
文章來源：站酷 作者：對啊設計君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
