主要分兩個部分介紹，第一個輕松點的主題，回顧下UI的風格變遷，再聊一聊行業情況，然后科普一下app界面設計的提案思路；第二個部分就稍微嚴謹些，是UI設計師必須掌握的一些基本知識，包括分辨率適配，倍率適配等關鍵知識點
先來認識下UI是什么，我給大家精簡成了三句話，如上圖所示
首先第一是媒介，也就是我們直接能看到的各種界面，UI就主要設計界面
第二是行為，也就是我們使用一個產品時，通過怎樣的行為來操作，UI還需要思考界面的交互
目前大家比較熟悉的，手持（手機），穿戴（vr，眼鏡）等
最后則是用戶，也就是我們常做的用戶調研，不只是UI，所有的設計行業都需要這個環節
所以，如果有人問到UI是干什么的，那么你就可以告訴他，主要做三件事情：
日常需要做界面設計；進階一點的會研究交互設計；高級的UI會去更深入研究用戶
而我們這次主要就了解界面設計上那點事情，先給大家回顧一下UI設計風格的一個變遷，至今為止UI已經從黑白時代演變到了今天至少經歷了至少5代蛻變，主要的風格如我右邊列出的種類，而我覺得其實主要分成三個大時代來看就行
其中第一個大時代統稱像素時代，也就是最早UI誕生的時候做就是這樣的界面，大家熟知的表情包“有內鬼終止交易”就是一個經典的時代縮影
第二個大時代是擬物水晶時代，也就是UI發展最快，行業規模變化最大的一個時代，很多早期一批UI設計師都在這個時代吃到了所謂時代紅利，當然不包括我，我已經晚了。這個時代界面的特點特別明顯，就是比較寫實的質感，投影以及一個大高光的罩子結合起來，給人一種硬玻璃的感覺
最后一個時代則是扁平，新擬物，現實增強等的混合時代（跟抖音內容的生態變遷差不多，從明顯的高端視頻風格到現在和快手差不多的魚龍混雜），這個時期其實很多風格會延續下去，尤其是扁平，也就是我們現在辦公?？吹降慕缑?，會作為一個基礎，不斷的吸收和混合其他的風格去進行延展
VR中的界面則是稍微前衛一些的，因為會有一個360度的環繞視角以及一個虛擬的現實場景，可自定義的程度很高，目前是剛剛興起的時期，也是一個新的UI比較建議入手的高門檻業務領域，為什么說高門檻，因為做個界面都要戴著頭盔來看效果
比較值得給大家科普一下的則是最近比較趨勢的兩個風格，一個是新扁平：在扁平界面的基礎上，大面積用色，漸變，微質感，少邊框，結合3D等一些其他元素來凸顯主題
還有一個是新擬物，時代的風格總是偶爾會有輪回，擬物風格也進化成了新的形態：只有部分寫實，整體強調3D立體感和光影感覺
還有一個是新擬物，時代的風格總是偶爾會有輪回，擬物風格也進化成了新的形態：只有部分寫實，整體強調3D立體感和光影感覺
風格介紹完現在簡單給大家講下這個行業，它的覆蓋領域主要分為四個，其中主要的行業人才都集中在移動端和PC端；游戲是一個特殊行業，要單獨劃為一個領域，它跨越多端風格也多樣；其他端則主要包含一些國有傳統行業和一些未來的，科技的比較冷門的領域
然后UI這個職業的主要行業特點是怎樣呢？作為一個過來人可以見證的主要有以上七個部分，但是一句話總結就是：熱度下降，規模穩定，門檻變低，人人切圖。說得更殘酷一點，現在大家報個班學完都可以投UI設計崗位了，時代的紅利已經遠去。當然如果覺得我說的不對也沒事，可能我站得還不夠高～
比較值得一提的則是風格的分布情況，雖然已經經歷了5代變遷，但是仍有很多傳統和冷門的行業停留在水晶擬物的時代，只有主流和熱門的行業保持著最新的風格，而前衛的行業則會去嘗試最新的UI和交互
這連續的兩張里的圖就是一個天南一個地北，但確實同一個時代的產品
那么職業科普和行業情況都有了之后，我們具體UI設計師，做界面大概是什么個流程，讓大家了解下UI設計的思路，我稱之為“眼睛會了腦子沒會系列”，就跟你看到網上那些大佬的教程視頻一樣的，全程只有鼠標在飛，然后東西它自己就做完了。（開玩笑）
這個設計思路是我UI設計時期總結出來的最快的提案設計思路，接下來講解每個環節該做什么
首先是快速切入，就是把我們前期收集好的資料參考，比如我這里有個情侶的app需要展現出青春，活力的感覺，那么我從最左邊的參考圖，提煉出符合自己要求的元素、顏色、特征等，填充到已有的交互框架（在UI設計業務中，交互框架一般由交互設計師或者產品給到），然后形成一個有視覺顏色等大體感覺的初版效果
然后在這個初版的基礎上，我們在自己的庫或者素材網上找到icon和圖片進行填充，整體調整顏、排版等，一個進階效果圖就完成了，同理還有如下兩個界面的產生過程，都是初稿
接下來第二個環節獨特性，就是在自己進階效果圖的基礎上，去強化一些關鍵的特征，讓它的特點更明顯更出彩，比如剛才的界面，把素材icon優化成更有主題特色和個人風格的類型，那這里涉及到icon的設計了
icon設計講究快準狠，不需要太復雜
第三個環節則是高效性，這里開始就是要去優化我們交互體驗上的東西了，也就是顏色的分布和使用在UI設計中是以邏輯和效率為主導的，好看不是首要的，比如這個經典的界面，出自淘寶app，它的顏色使用，就非常尊重用戶，提高了識別和操作上的效率
然后是加分環節，細節環節，則是自己嘗試要融合一些小的心思到你的UI界面中，哪怕是圖片的使用，文案上的小趣味，都會讓你整個app的調性有提高
第二個加分環節則是動效，主要是展示界面操作上的流程和自己的一些特色效果，這些都做完，就可以拿著你的靜態界面稿子和動畫一起去找老板匯報了
其實整個鏈路真的很簡單，UI設計師每次提案做下來就這些事，只是不同人他的先后順序不一樣
首先我們已經知道UI設計師每天都在搞界面，也知道他們如何搞出一個界面，那具體搞的過程中，又是做哪幾件事呢？這里給大家概括成三件事：規范，切圖和標注
今天我們只普及規范知識，也就是在畫界面之前，建立畫板之前都要先搞清楚的事情，UI設計師真的數學邏輯要好
我們先要知道，規范為什么是要先掌握的事情，那是因為在設計界面這件事上，規范已經在手機生產出來的時候就有了，不同于我們說的設計規范是一些視覺上的規范，UI的規范是和尺寸，像素，倍率等知識密切相關的
首先從界面上去分割，UI說的規范主要是講這幾個部分和一個整體的設計尺寸
先講設計尺寸，我們以蘋果手機為案例，第一臺手機出廠后，就會存在這樣的規格分布，告訴你分辨率是多少，每個部分各占多少高度，有了這些，大大小小的app和系統等界面才有了設計的基礎
所以問題來了，那每出一臺手機就要有一個新的設計尺寸嗎？理論上是的，但是實際上不管手機廠商和UI設計師，都會去找里面的規律來避免麻煩，于是廠商創造了一個規律，也就是這個pt為單位的尺寸，這里就要先解釋下這兩種單位的關系
說的簡單點，就是pt是一個虛擬單位，它永遠取最小值，也就是分辨率長寬都取了公約數之后的那個最小值
所以我們再回頭看這幾個機型，就能發現一個規律，就是如果pt不變，設計尺寸是不需要改變的，因為整體可以進行放大或者縮小來進行適配。比如左側兩臺手機，我用640x960為設計尺寸，做來的界面，兩臺手機都可以用，不會有拉伸之類的變形；右側之所以高度上pt不同，是因為頂部的之前我們說的狀態欄，導航欄之類的高度變了而已，實際中間的區域是沒變的
然后再換成我們現在主流的機型看也是這個道理，但出現了一個新詞，叫渲染分辨率，自此以后我們要分清楚，設計尺寸永遠是渲染分辨率，因為通常渲染分辨率和屏幕分辨率是一致的。這就是為什么官方說plus的屏幕更清楚，就是因為是從分辨率高的界面縮小下來的，px密度更高
在了解了這幾點基本概念后，我們就可以去看整個行業的機型規范了，我們現在UI界面是主要以750x1334為設計尺寸的，就是因為這個分辨率所占據的機型是最多的，也就是大部分的pt都是在這個檔位
同理安卓市場也一樣，只不過安卓的機型更多，所以更復雜，他們對應的一個虛擬單位則是dp
推導過程是一樣的，所以我們直接說結論，雙端的設計尺寸如圖所示，你用720x1280和750x1334都可以，因為這兩者都約等于9:16，現在UI設計師的軟件比如sketch大多都自帶了完整的各個機型的pt/dp，所以已經現在很多UI設計師都不大了解這個知識
剛才我們介紹完的部分，只是適配的一種情況，還有一種情況則是通過切圖，又稱為倍率圖。
作為一個合格的切圖仔，切圖是最常見的操作，不同的倍率圖，不僅僅是大小不同，也被用來適配不同的機型
切圖倍率是隨著機型一起產生的，所以每個機型在適配的時候，主要的規律就是：pt相同看切圖倍率；切圖倍率相同看pt；如果兩個都不同，則先按pt適配，然后再通過倍率適配。這里重申一下，pt適配的意思就是：只輸出一套圖，然后整體界面進行一個放大或縮小的方式適配不同機型；而切圖倍率適配：則是不需要整體放大或縮小，而是通過輸出多套圖去給不同機型用
雙端其實都有自己機型對應的切圖倍率，兩者通過各自的虛擬單位pt和dp還能統一轉化為px，這樣才能進行多機型的適配
前面我們說了，雙端的主流設計分辨率基本上是一樣的比例，但他們各自有不同的切圖倍率，ios端的機型比較統一，所以切圖倍率一直都沒有太多；而安卓因為各種機型層出不窮，所以用于適配的切圖倍率非常多，適配的難度也很大，但目前主流的輸出結果如圖所示，但當全面屏越來越多的時候，這個結構也會逐漸改變
最后講一下UI的工具，在工作的環境中碰到使用比較多的就是sketch和新興的figma，兩者都相似，都以pt和dp為單位去建立畫板，也有全面的切圖倍率供輸出使用
也常見有人一定喜歡用PS來設計界面的，也可以用這樣的切圖插件來一鍵輕松輸出
最后標注也是一個大工程，主要是眼花，難度不大，現在各種主流軟件都搭配標注插件，這里不多講
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
按鈕是一種使用廣泛的基礎界面元素，正因其使用的普遍性和重要性，我們需要并一直在探索建立按鈕設計規范。面向企業級應用時我們需要精心考慮按鈕的設計， Ant Design 提供了豐富的按鈕類型以覆蓋各種場景，盡管每種按鈕都有其存在的必要性，但在使用中也帶來諸多疑問：
應在什么時候將按鈕放在左邊，又什么時候放在右側；
按鈕順序是按照使用頻次擺放嗎？如果無明顯的使用頻次呢？
當需要提供特別多按鈕的時候應該如何處理？
虛線按鈕 與 普通按鈕 在用法上有什么明確區別；
RadioGroup 和 ToggleButton 以及 ButtonGroup 使用上有何區別？
…
如果沒有規范以上問題，僅按鈕順序和位置問題就會出現無數種組合。圖左側為螞蟻中臺業務實況，圖右側對左側按鈕的布置方案作了提取，每種場景都存在過多解決方案和組合，無法通過參考他人的設計來確定應該如何擺放按鈕，因為設計無章可循。
因此，有必要建立約束又包容的規范，以廣泛滿足多層級、跨場景的設計需要。
Ant Design 是一個設計體系，應用于螞蟻中臺，并對外服務于超過 100 萬名開發者。在制定規則時，原則是簡單易記（約束）并滿足企業級場景的廣泛兼容（包容），把問題最少化。我們的解決方案是：
1）「默認規則」：提供一套默認的設計規則，在現有的模板、組件等設計資產中提供示例方案，滿足簡單場景需求，直接使用即可；
2）「設計建議」：為默認規則無法滿足的復雜場景提供設計建議，讓使用者在一定的策略上自定義，同時又與默認規則保持一致的認知邏輯；
3）「設計目標」：明確設計目標，設計者依據設計目標決策設計。
例如：“提交按鈕與表單輸入項對齊”是默認規則；當需要考慮按鈕是否適合放在右下角時，則可以遵循“右下角放置“完成類”意義的操作”的使用建議；“按鈕的設計應盡量幫助用戶避免犯錯?！眲t是設計目標。
目前，Ant Design 會提供組件、模板等設計資產、官方設計指南來演示這些規則。這是也是解決一致性落地方面的基本思路。
本文將嘗試分享我們是如何思考和制定默認規則的，礙于篇幅，首先我們會聊一聊按鈕是什么，以此推論出按鈕設計應為用戶解決的問題。接著，根據按鈕設計時的幾項基本變量，介紹我們是如何組織這些變量的設計邏輯，從而推導出一個較為通用的按鈕設計規則。最后講個小例子來說明按此邏輯該如何考慮設計一組按鈕。本文主要討論按鈕設計的三個基本邏輯：按鈕位置、按鈕順序、按鈕強調，后續可能會單獨開篇介紹其他常見按鈕的使用疑問。
按鈕和鏈接定義是不同的，按鈕用于發起動作，觸發相應的業務邏輯。其與鏈接的區別在于，鏈接的作用是導航，但鏈接并不影響后端或前端展示上的邏輯。
然而，現在，按鈕和鏈接的界限越來越模糊，按鈕面臨的使用場景越來越復雜，也常出現用鏈接作為按鈕的場景，例如表格的操作列，通常這樣的設計通常并無大不妥。
但是筆者認為 Material 的 TextButton 的解決方案也非常棒，對 TextButton 和 Link 做了區分，當 hover 或點擊TextButton 時，會出現淺色背景指示控件響應區。如果你的設計系統剛起步，可以考慮這個方案：https://link.zhihu.com/?target=https%3A//material.io/components/buttons/
按鈕的位置、順序、組織方式、視覺強調程度是用戶尋找按鈕的線索，通過警告色可引起注意，避免誤操作，準確的文案則能夠預告按鈕的執行結果。按鈕設計的目標是指導用戶采取我們希望用戶采取的行動，盡量幫助用戶快速找到需要操作的按鈕，并了解執行該操作的結果，同時盡可能避免誤操作。
按鈕區是專用于放置按鈕的區域，一個按鈕區內可以有多個按鈕。因此，這里使用按鈕區位置比按鈕位置更加準確。
我們確定了一個清晰的設計策略來決策按鈕區位置：應將按鈕放置于用戶瀏覽路徑中，便于被用戶發現，并且應盡量靠近其所控制的對象。在未刻意建立信息層級引導視覺路徑時，經典“F”“Z”網頁瀏覽模式作為了我們按鈕位置放置規則的基礎指導。
Jacob Nielsen 首先提出該模式后并提供了眼球追蹤研究結果，關注流順序如下圖。按鈕跟隨內容模式在以下的這個研究中被證明非常自然。
源自 Gutenberg diagram，用戶關注流(通常含鼠標移動)遵循一個 Z 字形模式，它描述了西方用戶的閱讀模式，從頁面的左上角到右下角。1和4區域是相對重要的視覺落腳點，4 區域相當于是瀏覽的終點站。（Gutenberg Diagram 是 Gutenberg 根據多年的報紙等排版經驗總結出的假設，筆者尚未找到眼動實驗數據）
（Z Pattern 圖源：Buttons on the web--Artem Syzonenko）
我們需要認識一個概念叫「內容塊」。內容塊的概念略抽象，可以將整個頁面視為一個內容塊，也將一張卡片視為一個內容塊，或者僅僅是界面中的一個小小的內容單元也可以視為一個內容塊。界面中，一個內容塊的基本構成有三部分：Header、Body、Footer。常規來說，一個內容塊通常闡述一個主題，Header 申明主題，Body 放置該主題的具體內容，Footer 主題的延伸信息和操作。
根據以上三個條件，推導出按鈕在「內容塊」中位置的「默認規則」如下。該規則幾乎收斂了大部分圖 1 中的位置設計不一致問題。這套位置規則與 Fiori、Predix、QuickBooks 等企業級產品設計體系中都相近。
（默認位置規則）
同時，每個位置有一定行為意義，我們據此提供了「使用建議」來指導設計：
關于 FooterToolBar 中右側放置按鈕區的爭議
在彈窗中，將按鈕區放置在右側的規則已屬于習慣用法。但在整個網頁場景中，將 FooterToolBar 里的按鈕放置在右側是最受質疑的，FooterToolBar 是一個吸附在頁面底部的工具欄，可以保持出現。許多設計師認為這種狀況找到按鈕很困難，特別是在表單場景中。眾所周知企業級產品的表單常會遇到非常復雜的狀況，FooterToolBar 正好解決了這個問題，因此這里要弄清楚的是什么時候需要用到 FooterToolBar：
1）Body 區的有部分內容被折疊or隱藏，如內容單屏無法展示完整內容，表單區被多個頁簽分割；
2）Body 區的內容復雜度高，比如有多個分組，每個分組都有獨立的按鈕區，或復雜的交互方式。這時候需要將該主題的“完成”操作區與 body 區，區分出來。
簡而言之，Footer 的存在就是為了要和 Body 區分別開來。如果不是為了解決這類問題，那么讓按鈕跟隨內容是最自然的。這個挑戰也引出了另一個課題，工具欄的設計規范尚待完善，emm，真是一坑更比一坑深。
關于順序，最常見的疑問是確定按鈕應該在取消按鈕左邊還是右邊，這是一個爭論已久的話題。在彈窗中，確定按鈕和取消按鈕的順序在各設計體系中都不一樣，下圖是操作系統三巨頭：Apple、Google、Micrisoft 的方案。三巨頭證明了兩種主次順序都能被接受，只要在系統中統一。那 Ant Design 應該如何選擇呢？
在決策按鈕默認的閱讀順序時我們考慮了以下四方面：
1）風險操作
2）方向性意義
3）對話習慣
4）響應式規則
上面順序呈現了各因素在決策時的權重，例如，一旦按鈕出現方向性含義，則權重大于對話習慣，但一旦操作存在風險，則需優先決策。
可能造成損失的操作，特別是破壞性操作，如果不是用戶期望點擊的按鈕，應該盡量遠離常用按鈕。
什么是方向性含義？具有返回意義的按鈕，應該放在左側，暗示其方向是回到之前。左圖的方案非常容易誤操作，方向錯亂挑戰用戶的認知習慣，因為不論是在網頁還是移動端界面，我們已經都習慣了返回在左側的模式。
按照對話習慣排列按鈕。界面中的按鈕閱讀順序類似于一個用戶和電腦的對話過程，按照日常對話的順序設計按鈕閱讀順序更自然，同時讓電腦盡量顯得禮貌一點。例如，日常對話中，我們一般不會先問負面性的問題，當用戶修改了一項設置，用戶最有可能的行為是保存這項變更，如果電腦一上來就問用戶是否要取消變更會顯得不太禮貌的亞子。因此，不太推的操作，自然會排列在靠后的順序。
指是按鈕如何在響應式環境中優雅的溢出。這一項條件對規則設計的影響是，我們把溢出按鈕“…”統一放置在最右側。
綜上所述，我們制定了第一版「默認規則」，無論左對齊右對齊，統一從左往右閱讀。
但這個方案遇到了問題。Ant Design 現有的浮窗類組件里，優先操作的按鈕都在最右側，全部不符合這條規則。如果調整，意味著全部組件升級，這個變更將挑戰全部已在使用 Ant Design 的用戶習慣。這是無法被接受的，同時為了保持規則的簡單性，我們產出了產出了第二版「默認規則」，即現在發布的版本，左對齊從左往右閱讀，右對齊從右往左閱讀：
調整按鈕的樣式變量，呈現不同的視覺重量，達到分級強調目的。我們將按鈕視覺強調程度分為四級，了解其原理后，可以根據樣式變量和按鈕類型組合出需要的按鈕。
一級按鈕通常是主按鈕，突出“完成”、“推薦”的操作。一個按鈕區最多應該使用一個主按鈕。那么一個頁面可以有多個主按鈕嗎？因為沒有足夠的反面案例支撐一個頁面不能有多個主按鈕，比較建議在一個焦點任務中，最多一個主按鈕，也可以沒有主按鈕。
也稱之為次要按鈕，可用于所有次要的按鈕行動，如果我們有許多具有相似重要性的行動在一個屏幕上，或不確定要選擇哪種按鈕，次要按鈕永遠是最安全的選擇。目前二級按鈕的視覺強調程度有些偏弱，后續我們也會考慮調優此問題。
沒有外邊框，用鏈接色突出，例如文字按鈕。比較適合諸如“取消”“還原”等無需強調的操作。文首提到的表格操作列這類無需強調的操作也推薦使用。
并不是非常規范的按鈕，用于滿足復雜的個性化需求，當按鈕數量特別多，并且保證用戶直識別的情況。
最后將位置、順序、視覺強調三項變量組合，可以得到一個最基礎的「默認規則」，用于覆蓋最簡單的場景：
前面我們提到，「默認規則」在組件、模板等設計資產中演示，通常無需思考直接使用即可。 那默認規則不能滿足我的需求，我不知道如何安排按鈕順序怎么辦？現在，我們用一個小案例來驗證如何依據設計建議決策按鈕區設計。
場景假設：我需要一個復雜的篩選條件來過濾數據，我考慮在彈窗中處理這個任務。設置完篩選條件后，我可以將這個條件保存下來以備下次使用，或直接點擊確定生效。這里面會涉及的操作包括：保存，重置條件，確定，取消。
規則設計想要簡單而又令所有人滿意是一件非常困難的事，從設計系統的長遠效益來看，簡單的規則更有意義，同時我們也在盡可能讓規則能夠符合習慣用法，讓用戶更容易接受和學習。關于按鈕設計規則的探討，依然存在很多問題尚待解決，歡迎大家提提供反饋，幫助我們一起完善。寫完文章后突然有點忐忑~~最后，我們在 Ant Design 官網上發布了一篇關于按鈕的設計指南，歡迎前往查看指正。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
與客戶的對話和反饋是產品成功的關鍵要素。然而，研究表明，42% 的公司不調查其客戶或收集反饋。
偉大的產品不是憑空打造的——您需要一個持續的過程來從用戶那里獲取反饋，以指導您的產品路線圖、調整消息傳遞并保持滿意度水平的脈搏。
什么是產品反饋？
產品反饋是您的用戶分享的有關他們對產品的體驗和滿意度的任何信息。您可以通過各種研究方法收集產品反饋，例如用戶訪談、客戶調查、評估客戶支持票等。
產品反饋的 3個主要好處
雖然積極收集和分析產品反饋有很多好處，但可以總結為三個主要好處：
A. 改善客戶體驗和滿意度
B. 優先考慮產品路線圖并驗證新想法
C. 打造成功的產品
讓我們更詳細地看看它們。
1. 提升客戶體驗和滿意度
為用戶提供出色的客戶體驗不再是一種獨特的優勢——這是意料之中的。產品發布后，收集產品反饋可幫助您識別任何問題，收集有關要添加或改進的新功能的信息，并找到幫助用戶充分利用其體驗的方法。
支持票通常擅長揭示需要盡快解決的重復問題。如果一個問題多次出現，那么您就會知道它困擾著您的大部分客戶群。此外，凈推薦值 (NPS)或客戶滿意度得分 (CSAT) 等調查是產品反饋的重要來源，可以幫助您了解如何改善客戶體驗。
2. 優先考慮產品路線圖并驗證想法
收集用戶的反饋有助于產品經理確定產品路線圖的優先級，并根據實際用戶需求做出明智的決策。
您可以收集關于功能想法的反饋并量化數據以了解哪些是最需要的。
3. 打造成功的產品
如今，最好的產品是基于與日復一日使用您產品的人（您的客戶）的持續互動和用戶體驗而構建的?？蛻羝谕纳仙馕吨髽I必須不斷收集和識別客戶需求，以構建能夠解決實際存在的問題的產品。
產品反饋是一種很好的機制，通過它可以從用戶那里獲取見解，并將其納入您的決策過程。無論是通過征求還是主動提供的反饋，傾聽用戶的意見將確保您能夠始終如一地交付價值。
產品反饋：類型和方法
您可以使用多種產品反饋方法來設置產品反饋循環并讓您的客戶與您取得聯系。
通常，產品反饋可以是征求的，也可以是主動提出的：
A. 征求反饋是指您要求用戶提供反饋。這可能是向您的客戶群發送調查或與用戶進行訪談。
B. 不請自來的反饋是用戶在沒有被要求的情況下分享的任何類型的反饋。例如，他們可能會在網上發表評論或在社交媒體上分享評論。
當用戶在您的產品中遇到問題、要求新功能或需要幫助完成某事時，通常會出現不請自來的反饋。
另一方面，通過征求反饋，您需要為用戶提供背景信息并提出正確的研究問題。根據您的團隊需要反饋的內容，以下是您可以用來收集征求的產品反饋的方法的概要：
1) 調查
2) 客戶訪談
3) 產品分析
4) 專門小組
5) 客戶支持對話
6) 銷售和客戶溝通電話
讓我們更詳細地看一下前三個。
1. 調查
調查是一種有效的研究工具，可為您提供針對各種用例的特定產品反饋：分析新發布的性能、在開始構建過程之前驗證想法和新概念、測試產品消息傳遞等。
大多數反饋調查使用開放式和封閉式問題的組合。在創建和發送調查時要記住幾個最佳實踐，即：
A. 避免引導性問題，例如“您有多喜歡使用該產品？” 相反，請讓您的用戶提供有關他們體驗的詳細信息，而不要引導他們做出肯定或否定的回答。
B. 保持簡短：注意受訪者提供反饋的時間和意愿。在調查中包含的問題不超過五到七個，以使其相對簡短，并且仍然可以獲得可操作的反饋。
C. 使用開放式和封閉式問題的組合。太多的開放式問題將導致調查時間過長，因為參與者必須為每個問題輸入答案。另一方面，僅由封閉式問題（如是/否問題）組成的調查只會為您提供定量數據，而不會揭示參與者給出這些答案的原因。將這兩種類型的問題結合起來可以創建有效的調查。
2. 客戶訪談
客戶訪談是一種通用的研究方法，可以在整個產品開發過程中獲得有見地的反饋。從進行最初的設計研究到獲得發布后的反饋——與用戶交談總能產生新的見解。
對于產品營銷人員來說，訪談是一種有用的方式來獲取有關新產品或功能的消息傳遞的信息。
3. 產品分析
產品分析是了解產品性能和改進方式的絕佳來源。產品分析對產品經理和營銷人員都很有用，可以幫助您了解用戶在做什么與他們所說的相比，這可能并不總是相同的。
如果您在發布之前進行了定性測試，產品分析可以幫助您驗證您的初始假設。
此外，產品分析是識別產品中嚴重問題的良好來源。例如，衡量留存率之類的分析可以讓您隨著時間的推移跟蹤它或將比率與行業標準進行比較。當任何異常發生時，數據是進行更多研究以了解問題所在的起點。
創建產品反饋循環的重要性
您可以使用多種方法來收集產品反饋，從我們上面看到的三種方法到社交媒體監控、客戶支持票、銷售電話、客戶溝通電話等其他方法。更重要的是創建一個流程，通過該流程，反饋始終如一地到達您的組織并被采取行動，從而征求更多用戶反饋。這也稱為產品反饋循環。
反饋循環是一個迭代過程，其中從客戶反饋中收集的見解被實施到產品開發過程中，并用于在一致的基礎上為產品決策提供信息。隨著新的反饋影響新的產品策略，這個過程會無限重復，而變化會促使客戶提供額外的反饋。
這種持續不斷的客戶反饋將幫助您把握客戶滿意度的脈搏，并在您和您的客戶之間建立一個開放的渠道。
如何收集好的反饋
并非所有反饋都是平等的，或者就此而言——有用。就像進行任何其他研究方法一樣，收集很好的反饋需要理解并遵循關鍵的最佳實踐。這是你應該知道的。
建立明確的目標
在您開始收集反饋之前，第一步是定義您的目標并建立明確的衡量方法。
一個好的起點是查看您負責的 KPI。對于產品團隊來說，這可能意味著激活或用戶保留。對于產品營銷人員，這也可能是合格的注冊和使用指標。
此外，您建立的目標還將幫助您選擇正確的方法來收集反饋。例如，客戶訪談非常適合在進行初步發現研究時獲得定性反饋。另一方面，原型測試最適合在開發前與用戶一起驗證設計。確立目標是獲得做出明智決策所需的反饋的第一步。
提出正確的問題
其次，提出正確的研究問題是獲得有效、可靠反饋的關鍵步驟。確定目標后，下一步是制定您需要發送給用戶的調查或為客戶訪談準備研究計劃。
在制定研究問題時，需要牢記一些重要的指導方針。其中一些是：
A. 避免引導參與者尋找答案
B. 避免封閉式問題，尤其是在客戶訪談中
C. 參考特定時刻，例如使用功能或新產品
總結
產品反饋是洞察客戶行為和痛點的重要來源，可幫助您在整個產品開發過程中做出明智的決策。
今天在產品和營銷領域工作的每個人都將從與客戶交談和傾聽他們的意見中受益。隨著產品的成熟和客戶需求的變化，這些對話不應該是一次性的，而是構建偉大產品的關鍵部分。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：對啊分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在 Ant Design 的界面設計中，會包含大量的信息組織和編排工作，我們常常會遇到這樣的問題：
一個詳情頁面里應該包含哪些信息？
什么樣的信息應該放在卡片里，什么樣的信息應該平鋪顯示？
一個頁面內的信息該怎么讓用戶快速找到重點？
···
信息組織是我們在日常生活中經常會遇到的問題，商場里的樓層導航、機場車站的標志指引、餐桌上的菜單、手機里的通訊錄等等，各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現給用戶呢？
在解答這些關于頁面設計的問題之前，我想先給大家講一個生活中的小案例：
逛過宜家的人，應該會注意到宜家類似迷宮的動線設計，這種動線設計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時，就會被一條隱形“向導”默默地引導著向前走：一條曲折宛轉的主線依次引導至客廳家具、客廳儲物室、臥室、書房等各個主區域，直到一個不落地走完才抵達出口。但在這個主線之外，為了確保一些消費者在購物中，能夠快速離開或快速去往感興趣的區域，每個主區域間都有一些較隱蔽的捷徑作為輔動線。
這種動線設計一方面能夠把所有商品按照路徑有效的串聯起來，另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。
動線布局是宜家的隱形骨架，而真正讓宜家賣場豐富起來的，還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣，它不會把同類型產品進行大集合，而是根據人們的正常生活場景來分類，不同類型的產品在同一區域組合陳設，構成生活中的一個小場景，一方面能達到對各個商品功能的完美詮釋，另一方面，一個產品盡量不會重復出現，盡可能減少商品展示的復雜性。
在整體商品布局上，有兩個很有意思的地方：第一，在居家體驗中心，樣板間的陳列順序完全是按照消費者回家后的場景而布置：客廳、餐廳、廚房、書房、臥室、衛生間......，第二，在家居用品中心，則會根據消費者在家的日常起居行為進行擺放：做飯、休息、讀書、收納......
現實生活中的這些例子，對我們的界面信息組織有什么啟發呢？
在宜家的案例中，關于動線，映射到人的行為上，有一個比較專業的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最優體驗心理學》中對“流”的定義：當人們全身心投入到某個活動中時，會對周邊干擾視而不見，這種狀態被稱為“流”。宜家的動線設計很好的營造了這種狀態，讓消費者完全沉浸于商品瀏覽，并且盡量不去打斷這種行為流。
經過研究發現，構成“流”的行為動作，其前后必然存在某種連續性或者關聯性，例如回家的行為動線，日常起居的行為關聯等。這個概念在界面設計中依然適用，很多界面設計都在有意無意的去創造“流”的狀態，帶給你用戶沉浸式體驗，例如各類短視頻應用會根據用戶瀏覽習慣推薦相關聯的視頻內容，讓用戶沉浸其中無法自拔。
關于商品布局，映射到信息組織上，《韋氏大詞典》 中提到一個詞“編配”（orchestration），對應的解釋為“和諧的組織”。這個詞能比較好的表達信息組織的含義，宜家的商品和諧的組織構成一個場景，它向消費者傳遞的不僅僅是商品本身的功用性，更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復雜程度。而在界面設計上，表單頁的和諧組織能夠幫助用戶快速完成信息錄入，詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......
各種各樣的信息總能以某種關系組織到一起，而如何根據這種流為用戶去組織和呈現信息呢？
“流”的本質其實是一系列具有關聯性的行為動作串聯，而“編配”的目的則是為了降低串聯信息呈現的復雜程度。有了這兩個基礎的概念之后，我們可以做一個初步假定：所有的信息是否都可以通過關聯性和復雜度來進行組織編排？針對著這兩個維度，我們又進行了更深層次的研究和驗證，并得到基本定義：
信息復雜度：信息量的大小，包括種類、數量等。
信息關聯性：信息之間的潛在關聯或者相互影響。
我們設想，這兩個維度能否運用到界面設計上的信息組織呢？
界面信息之間的潛在關聯或者相互影響，通常體現在「邏輯關聯」和「視覺關聯」兩個層面。
顧名思義是指一個事件中的所有信息之間的關系，在界面設計中，無論什么樣的信息，總能以某種方式進行分類和編排在一起，例如手機通訊錄中的人名，可以按照字母順序從 a 到 z 進行排列，電商網站的商品導航會根據類別進行分組，待辦事項可以根據時間進行排序等。
如何找出信息之間的邏輯關聯性呢？
被稱之為信息架構之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括：
地點（Location）
字母（Alphabet）
時間（Time）
類別（Category）
層級（Hierarchy）
簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略，信息是無限的，但是信息組織方式卻是有限的。
任何一個界面呈現給用戶的時候，用戶都會下意識的去判斷界面上什么信息是最重要的，接著會去關注這些信息都有什么關聯，因此，除了按照邏輯去組織信息之外，還應該合理的去呈現信息的視覺層級關系。
視覺層級關系有幾種常見的區分方式：
強調：使用基本視覺元素（顏色、形狀、大小等）區分層級
親密性：位置接近的元素通常是有關系的，而且位置越近，關系越強
圖勝于言：視覺符號和對象關聯，例如：齒輪或扳手=設置，垃圾桶=刪除
瀏覽順序：根據瀏覽順序，從左到右（部分地區）或從上到下信息重要程度依次減弱
···
如何驗證界面元素的視覺關聯性是否合理呢？
《About Face 4: 交互設計精髓》 中提到了一個很有意思的測試，為了確保界面視覺信息有效的拉開層次關系，圖形設計師經常會用到一個方法“瞇眼測試”（squint test）。閉上一只眼睛，瞇著另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成組，哪些元素看上去零散。從多個角度去觀察，總能夠發現之前沒有注意到的布局和構成問題。
通常以信息量的大小或樣式多少來衡量，這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內都是純文本信息，但是信息量較大（超過三屏），則認為這個頁面的復雜度較高，或者一個詳情頁面內同時包括文本、表格、代碼展示、圖表等元素，也會認為這個頁面的復雜度較高。
信息的復雜度和關聯性并不是兩個完全獨立的維度，根據關聯性去組織信息，本身就是為了降低信息呈現出的復雜程度。而對復雜度的研究，可以幫助我們如何選擇合適的方式把信息呈現給用戶。
具體到界面設計層面，信息體量大、復雜度高常常是中后臺界面設計的難題之一。以詳情頁為例，詳情頁內的信息該如何合理的組織信息并有效的傳達給用戶呢？
根據關聯性和復雜度的概念，我們抽象出一個簡單的「復雜度模型」，用來判斷信息復雜程度和關聯性對頁面結構的影響。
橫坐標表示頁面信息之間的關聯性，縱坐標表示信息的復雜程度，兩者交叉組成的色塊代表不同的信息等級?？拷c最淺的色塊，代表復雜程度低且關聯性強的內容，例如一段純文本的產品描述信息；遠離原點顏色最深的色塊，代表復雜程度高且相互獨立的信息，例如一個發布流程中的集成測、預發環境測試、灰度測試、上線等各個階段信息展示。
與之對應的，我們對信息展示方式也進行了維度劃分，用來解決在復雜的企業級產品界面設計中，何時使用卡片區分，何時拆分為 tab 等布局問題。
根據承載信息復雜程度的不同，我們對容器組件也進行復雜度劃分，用來解決在不同頁面布局中，不同類型的信息用何種方式呈現的問題。
這個模型可以幫助設計者在決策布局組件時，有章可循。最終讓用戶感知，當用戶來到一個頁面時，即可對頁面的信息量、信息的搜尋方式有統一的預期。我們嘗試將復雜度和關聯性模型在界面布局中落地：
關于以上的模型在實際設計中該如何操作，這里提供一個推薦步驟可以參考：
「復雜度判斷」明確設計對象信息量的大小
「關聯性判斷」判斷各個信息之間的關聯性，并合理分組
「組件選擇」選擇合適的容器組件來呈現信息
「模板選擇」選擇合適的頁面模板，組織編排信息
「瞇眼測試」檢查整體布局是否合理（僅參考）
大到一個系統，小到一個按鈕，背后的每一條規則既要從人的角度去思考設計的易用性，同時也要從信息本身去推敲組織的合理性。作為設計規范的制定者，不能憑感覺簡單了事，而是需要找到一套通用的模式，幫助用戶快速找到并理解信息幫助用戶提效，同時提升用戶的瀏覽體驗，是我們一直在探索的課題。
虛擬界面的信息組織和現實世界一樣，既需要符合人們對事物的認知，也需要遵循人們的行為習慣，這些認知和行為習慣，構成了自然交互的基礎，這也是我們一直在探索方向。當然，信息組織除了以上這種思路，還有更多的思路和方向等待挖掘，期待大家的反饋和建議，幫助我們一起完善。
導讀
為什么B端產品總是容易“失控”？B端產品設計與C端有何差異？如何在不斷復雜的系統中，權衡效率、成本、體驗之間的關系？
本文將帶你從B端產品的本質出發，了解產品發展過程中容易出現的問題，并從復雜系統的角度去探討設計體系的構建方式。
目錄
一、「 困局 」容易“失控”的B端產品
A .「 關注重點的差異性 」
B .「 微小差異的不斷疊加 」
C .「 產品發展進入惡性循環 」
D .「 進入效率拐點，產品失控 」
二、「 啟發 」從復雜科學的角度思考設計
A.「 自然算法 」
B.「 物質的構成原理 」
三、「 探究 」什么是產品設計體系？
A.「 定義 」
B .「 組成部分 」
C .「團隊能力要求 」
D .「 構建方向 」
四、「 剖析 」B端產品的生命周期
「 產品生命周期概述 」
A .「 初創期 」解決核心問題，產生價值
B .「 成長期 」能力完善，產品擴張
C .「 成熟期 」效率提升，快速增長
D .「 暮年期 」商業價值降低，發展逐漸停滯
NEXT、「 下期預告 」設計體系的構建法則
前言
隨著產業互聯網時代的到來，市場對B端產品的重視程度逐漸提升。然而，談及B端產品，特別是SaaS產品，大多數設計師對此并不是特別感興趣。一來，SaaS更注重功能層面，似乎本身對設計的要求并不高；二來，SaaS產品的最終實現效果總是不盡人意，就算設計得再好看，實現出來也難以出彩。
確實，若設計師僅僅只是關注視覺層面本身，那么B端產品確實不像C端那么吸引人。但是，若你能以整個產品構建的角度去思考B端產品設計，那么設計師能夠在其中發揮的空間是巨大的。
假如把C端產品比作精致的小房子，那B端產品就是一幢巨大的高層建筑。建造小房子，你可以盡情地發揮創意，追逐潮流，大不了推倒重來。而建造大房子，則需要設計師考慮更多的維度，因為這是一個長期而復雜的工程。
建筑的外觀不僅需要好看，更需要足夠耐看、穩定；為了適應更多人的需求，你不僅要考慮房子的軟裝，還要考慮戶型的合理性、通用性；而為了降低成本，你還需要考慮家具、硬裝的標準化、房間的兼容性等等…
“你是否有信心建造一個宏偉的高樓大廈？”
這是我在B端設計中，反復強調體系化思維的原因之一。想要建造一個大型建筑，沒有體系化思維、沒有更完善的多職能協作流程，那么這座高樓一定會在建設過程中埋下隱患。而當問題一旦出現，涉及到的沉沒成本也將會非常巨大。
當然，對于C端產品來說，體系化也愈發重要了。隨著互聯網時代的持續發展，一些C端產品的復雜性也堪比B端。我在之前的文章中提到過一個觀點：“C端B化，B端C化”。在未來的數字產品設計中，B端產品將會逐漸開始重視產品的外觀與體驗，因為觸達的人群更年輕化、對體驗要求更高了。而C端產品也會更注重體系化建設，因為產品體量越來越大，需要尋求效率與成本之間的平衡點。
產品設計體系，本質上是一套更科學的復雜性數字產品的設計方法與工作流程。因此，不管是B端產品還是C端產品，設計體系能夠在提升設計品質的同時，讓產品更“可控”，提升效能，降低成本。
這套設計方法論，是我在工作中不斷實踐與完善的一些經驗與方法。希望能借此分享一些自己淺薄的經驗，也探討一下數字產品設計未來的形態。
?
一、「 困局 」容易“失控”的B端產品
-
作為較為復雜的數字產品，B端產品在快速發展的過程中，總是容易出現一些問題。特別是當產品體量到達一定階段后，問題就會逐漸暴露出來，比如：
1. 產品丑、設計質量低；
2. 組件樣式繁多，操作習慣不一致；
3. 新老系統差異大，不同模塊體驗差異大；
4. 頁面結構混亂。
等等…
很多問題大家都能明顯地意識到，但往往因為“不影響售賣”、“價值不高”、“新功能優先”等理由被擱置。
隨著問題逐漸積累，產品的優化成本也變得越來越高，最終使整個產品已經積重難返。若只是多部分頁面/組件進行優化，小修小補，雖然成本低，但成效甚微；若是進行大修大補，那么優化成本將遠大于研發新功能的成本。
這種普遍的B端產品現象，被稱為“產品失控”，即——團隊已經對整個產品的形態失去控制力。
那么，為什么B端產品特別容易出現這種問題呢？
A .「 關注重點的差異性 」
首先，產品的本質決定了其關注重點的差異性。
與C端產品不同的是，B端產品往往更看重“能力”（為企業用戶解決問題），而產品的銷售方式與付費模式，也決定了產品體驗并非首要關注的對象。由于B端產品通常針對企業用戶，需要更長的研發過程，產品的體量和復雜性也相對較高。因此，除了產品解決問題的“能力”之外，產品還需要關注研發的效率及成本。
因此，在產品的發展初期，企業通常對效率最為關注，其次是成本，最后才是體驗（能用就行）。絕大多數B端企業，只有在產品跑通商業邏輯，并具備一定用戶與盈利預期之后，才會對產品的體驗逐漸重視起來。
B .「 微小差異的不斷疊加 」
任何微小的差異，在無數次的疊加之后，都會被快速放大。特別是當團隊的人員逐漸增多后，放大速度將會呈指數級上升。
為了配合產品的快速發展，產品往往會采用“堆量”的研發模式。增加研發效率，最簡單直接的方法便是投入更多的資源。隨著產品不斷增加模塊、功能、頁面，團隊人員也在不斷地擴充。
但是，人類不是機器，并非簡單的1+1=2。團隊數量的上升雖然會帶來效率的短期提升，但同樣也會增加團隊的管理成本。不同的產品經理、設計師、研發人員，對于產品的認知是不同的。隨著團隊人員的不斷增加，“個體差異性”將會被不斷地疊加與放大。
就像“傳話筒”的游戲一樣，同一個事物，不同的人理解總是不同的，經過多次的“傳話”以后，往往與原本的意思已經大相徑庭了。
這種情況表現在產品設計中，則會出現：當相同的組件由不同的人做時，總是會在基本樣式、實現原理、交互細節等不同的維度出現差異。比如上圖中的導航菜單組件，不同的模塊在開發時總是會存在差異，最后差異越來越大，形成了五花八門的導航菜單形式。
C .「 產品發展進入惡性循環 」
令人遺憾的是，雖然問題很明顯。但是在不斷的“成本考量”中，產品團隊往往優先關注新功能的開發，而忽略底層問題的優化。
隨著產品的快速發展，產品的優化/迭代成本將會逐漸大于研發新功能的成本。要么背負巨大的成本進行整體重構；要么降低標準，繼續以這種模式不斷疊加新功能。
在這種情況下，大部分B端產品往往會選擇后者。于是，產品的發展將會進入一個“惡性循環”：
產品快速發展，功能不斷疊加；
各模塊由不同的產品、不同的開發研發，導致各模塊之間差異增加；
產品丑、體驗不統一，但老系統優化成本過高。綜合衡量，優先進行新功能研發；
所有模塊標準不統一，產品迭代效率持續降低，維護成本持續增加。
…
D .「 進入效率拐點，產品失控 」
產品的發展猶如一輛快速奔馳的巨型列車，一旦加速便難以停止。
隨著問題的反復出現，以及在一次次的“利益權衡”中選擇性的忽略，產品的惡性循環不斷重復，而問題也逐漸疊加、沉積下來。
當這個問題已經大到我們無法回避時，我們才發現：產品的單位迭代/優化成本，已經遠遠大于新功能的研發成本。而新功能帶來的增量，已經無法抵消現有模塊的迭代成本——產品迎來了效率拐點。
就像一個龐大而復雜的機器，雖然依舊可以運行，但整體效率已經很低了，而與之對應的維修成本則非常巨大。小修小補根本無法解決問題，而大修大補則很有可能會帶來更大的虧損。
最終，產品逐漸在“失控”中難以自拔，競爭力逐漸降低，但整個團隊對此卻無能為力，嚴重影響了企業的發展。
那么，在產品發展中，我們應該如何避免這種情況呢？換而言之，一個高度復雜的數字產品，我們應該如何設計，才能避免其逐步走向混亂？
?
二、「 啟發 」從復雜科學的角度思考設計
-
如果我們將B端產品看作是一個復雜系統，那么產品“失控”的本質即——在不斷復雜化的形態中，缺乏有效的控制機制，最終導致整個系統失去控制。
但是，在大自然面前，B端產品這種復雜程度顯然不值得一提。
像大自然這樣的復雜系統，是如何構成的？所有的物體都由原子所構成，為什么簡單的一百多種原子，能夠構成如此復雜的世界？生命又是如何在無機物的世界中誕生，并逐步進化成如此復雜的個體的？
A.「 自然算法 」
道生一、一生二、二生三、三生萬物...無論是老子的《道德經》，還是《深奧的簡潔》、《萬物皆數》、《復雜》這些現代的書籍中都闡述了這樣一個觀點：
任何看似復雜而又可控的系統，一定存在著精簡的“算法”，通過不斷的疊加從而形成復雜系統。
就像愛因斯坦說的：“宇宙最不可理解之處，就是它居然是可以被理解?！?
在大自然中，有很多的花紋與圖案的形狀都存在相同的規律。比如上圖中的羊齒草分形圖案，這種圖案在森林當中到處可見，我們看到很多樹的形狀跟葉子的形狀是一致的，這就是一種分形圖案。而這種分形的圖案本質上是一個公式，通過不斷地自我引用進行迭代，這便是分形。
科赫曲線（Koch curve）就是一種分形。其形態似雪花，又稱科赫雪花（Koch snowflake）、科赫星（Koch star）、科赫島（Koch island）或雪花曲線（Snowflake curve）。
它最早出現在瑞典數學家海里格·馮·科赫的論文中。我們將一根直線分成四段，然后向中間擠壓形成等邊的倒V形狀；接著再將每個倒V的邊進行相同的操作，不斷地重復之后，我們發現：第一步是倒V型、第二步變成了大衛星，第三部變成了楓葉，第四步… 經過無數步以后，最終成了越來越復雜的“雪花”形態。
科赫曲線便是“自然算法”的一種。海岸線雖然很復雜，但是卻有一個重要的特性——自相似性。從不同比例尺的地形圖上，我們可以看出海岸線的形狀大體相同，其曲折、復雜程度也很相似，換句話說，任意一段海岸線就像是整個海岸線按比例縮小的結果。而海岸線的構成原理就是這種科赫曲線，它是通過天然的演化，不斷折疊最終形成了這種形狀。
可以發現，他們都是由 基礎物質 x 簡單算法 x 隨機變量，經過無數次疊加后，最終形成了一個復雜而多變的整體。
B.「 物質的構成原理 」
宇宙中還有其他各種驚人的“巧合”。愛因斯坦的相對論揭示了宏觀世界的規律性，普朗克和海森堡的量子力學揭示了微觀物質世界的規律。當我們從微觀世界到天文學會發現——原子核的構成方式居然與天體的構成非常相似。粒子圍繞原子核的運動方式，就好像行星圍繞太陽運動一樣。
不管是整個宇宙，還是生命體，將其置于復雜科學的研究框架中，那些基本定律最終也會變得極其簡單。
在宇宙中所知最為復雜的形態，便是如同我們自身的生物。這些復雜體由已知存在于銀河系中最普通的物質所構成。但是，通過氨基酸的形態，這些基本原料竟能自然地將自己組合成一個自組織系統。
混沌中隱藏的算法，使宇宙成為極有秩序的地方。而在秩序中隱藏的隨機數，又使得宇宙成為極為豐富的世界。
也正是因為算法的精簡，一切物質的創造才能具備復制性、延續性、進化性。
那么，我們反過來思考——想要使復雜的系統簡單可控，是否就需要一套簡潔、有效的“算法”？通過“算法”，將基礎的“物質”不斷地“有序疊加”，形成一個可控的復雜體系。
因此，對于復雜的SaaS系統設計，我開始引入“設計體系”這一概念，希望能夠找到未來SaaS產品設計的發展方向。只有設計體系的建立，才能保證產品可控性，才能在不斷復雜系統中，保證效率、成本、體驗之間的平衡。
?
三、「 探究 」什么是產品設計體系？
-
產品設計體系，在國內仍舊是較為陌生的詞匯。什么是設計體系？
A.「 定義 」
一個成熟的數字產品，需要有一個穩定、且持續迭代的形態。創造這個形態的過程，我們稱之為廣義上的產品設計（這里指產品的整個策劃和設計過程，包含策劃、交互、視覺及部分前端開發）。而負責控制和維護這個形態的這套系統，便是產品設計體系。
我們接觸到的更多是設計系統（Design System），比如平臺級的設計體系，Apple、Google、Microsoft等系統級的設計系統，及其設計開發套件、應用生態。公司級的設計系統，如Airbnb設計系統、IBM的Carbon設計系統、螞蟻金服的Alipay Design等。
但是，在一個企業內部，想要Design System能夠系統性地運轉，還需要基于這套標準建立的團隊協作機制。只有設計標準與團隊協作標準完美融合，才能建立真正的設計體系。
B .「 組成部分 」
如果將數字產品比作復雜的“生命體”，產品的發展比作競爭中“自我進化”，那么設計體系便是產品的DNA。它既是產品形態的控制源，又是不斷自我迭代的進化源，它的作用是：
控制產品外觀——感知性模型（視覺風格/規范）
制造基礎構件——功能性模型（基礎/復合組件）
模塊的構建規則——模式語言（產品框架規范）
產品標準定義、生產方式制定——協作模型（高度協同的工作流程）
它不僅能控制產品的“生產結果”，提升產品質量；還能規范產品的“生產過程”，形成一套完整的多職能協作流程，提升產品的生產、迭代和維護效率。
從宏觀來看，設計體系像是一個“規范的復合體”，它是各職能之間規范的有效整合，產品框架、交互規范、視覺規范、前端規則，同時也是基于整合規范所創造的一套創新的工作模式。
C .「團隊能力要求 」
設計體系的建立，需要整個產品團隊擁有一致的目標，并為之通力協作才能完成。這就需要整個團隊擁有較高的平均素質與契合度。
同時，體系化的建立和推動，也需要團隊中有人牽頭去推動。設計師作為“產品-開發”的中間環節，是非常有條件成為推動者的角色的。
當然，這就要求設計師擁有更豐富的橫向能力。
一方面，設計師需要將自身的能力邊界進行拓展，與上下游的職能保持密切的溝通，并解他們的訴求。只有當設計體系滿足各方利益時，體系化才有推動的空間。
另一方面，對于產品側與開發側人員，設計團隊也可以通過培訓來提升他們的能力邊界。比如針對產品的交互培訓、針對開發人員的基礎審美培訓等。這樣才能提升產品的下限與上限，增強產品的綜合競爭力。
D .「 構建方向 」
設計體系并非超脫于產品之上，而是根植于產品的成長過程中。
想要推動體系化的建立，必須充分了解產品發展的基本規律。產品處于不同的生命周期，所要解決的問題是不同的。在正確的時間做正確的事情，并對未來的形態進行規劃，才能逐步讓設計體系根植于產品、融合于產品。
因此，在下一章，我們首先來了解一下B端產品的生命周期。
?
四、「 剖析 」B端產品的生命周期
-
對于設計師來說，首先要更宏觀地了解產品所處的生命階段，才能知道設計需要解決的問題是什么，并以此有針對性制定不同的設計策略，最終幫助產品構建完善設計體系。
本章更多的是對B端產品的發展階段做一個剖析，而不同階段具體的實施策略，會在后面講解。
「 產品生命周期概述 」
類似于人的成長歷程，一個新的B端產品從誕生到逐步擴大，通常都會經歷幾個不同的生命階段。
B端產品研發是一個漫長而系統化的過程。這個過程通常伴隨著商業業務發展與商業戰略模式的不斷調整。
B端產品從立項到下線，產品會處于幾個典型的不同狀態中，這就是產品的生命周期。通常來看，大多數產品都會經歷以下幾個生命周期。初創期-成長期-成熟期，直至最終進入暮年期。
而產品的商業價值，也會伴隨著產品的發展而變化。在通常情況下，伴隨著產品的逐漸成長，其商業價值也會隨之增長，并在成熟期進入黃金的商業價值期。而當商業價值出現大幅、持續性的降低時，則基本算是進入了暮年期。
那么，不同的生命周期中，產品將會遇到哪些問題？而為了保證產品的持續發展，產品團隊又需要做哪些事情呢？
A .「 初創期 」解決核心問題，產生價值
初創期，即產品已經從構思到研發，并成為了初步的產品。這個時期，產品雖然還不能覆蓋完整業務，但已經能夠順利運行。
從構思到創意，再到實踐落地。B端產品的誕生，通常源于在行業內深耕多年的資深玩家。在不斷地實踐中，通過創意與實踐，找到了一條能夠幫助行業解決問題、提升效率的路徑。
1）用戶是誰？
B端業務的本質，就是“向組織銷售服務來獲得盈利”。哪些企業最需要你的產品？哪一類用戶的問題最需要通過這種方式得到解決的？這些都是需要在早期非常明確的。
站在普羅大眾的角度去規劃產品固然是好的，但成功的產品都始于一小部分早期用戶；B端產品的用戶通常來自某一垂直領域，首先讓他們喜歡上你的產品，然后慢慢向外拓展至更大的人群當中。
想想看，最初一千名喜歡你產品的種子用戶可能是哪些人？
2）產品能夠解決什么問題？
我們要為用戶解決什么問題？“用戶的問題”可能是一個需求、一個困擾或是一個機遇。他們的需求是否真的是痛點？
這個時期，團隊需要拜訪大量的目標用戶，通過交流獲取痛點。我們必須驗證這個需求的真實性，以及我們的解決方案是否具備一定的可實施性。
我們可以通過更具象的UI或流程，初步展示想法，不斷優化。最終形成一個可驗證的初步產品Demo，并通過Demo進一步與潛在用戶進行溝通。
3）這個問題是否普遍？是否具備標準化的可能？
不同企業的需求是有差異的，如何將個性化的需求抽象成共性的解決方案？如何權衡范圍與成本之間的關系？我們要將不同企業的需求進行抽象，形成標準化的解決路徑。
這個階段，我們需要為種子用戶創建方向聚焦的MVP。MVP必須是名副其實的最小化可行產品，要為種子用戶帶來端到端的精準體驗。如果他們不理解產品功能，不知道如何或為什么使用，或是發現其性能低劣、bug 太多，無法達到“可行”的程度，那么你的假設就難以得到有效驗證。
4）是否能夠形成完整的商業閉環？
用戶是否真的會為這個產品買單？換句話說，產品是否能賺錢并且養活整個團隊？
B端產品在初創期，最重要的是快速驗證產品與業務的親密性，能否完成既定的商業戰略。產品團隊需要通過磨合業務，快速調整業務解決方案和產品架構。
不僅是產品的打磨，整個團隊也要形成完整的閉環。工作流程、產品的商業運轉機制也要初步跑起來。產品的售前、解決方案、產品研發、實施、客戶成功，我們需要真實地完成這一套閉環的操作，并基于此做團隊毛利模型的測算。
解決問題，帶來價值，并且能夠將價值轉化為收益，這才是產品可持續發展的關鍵。只有跑通完整的商業模式，擁有長期的盈利預期，產品才能順利進入下一個階段。
B .「 成長期 」能力完善，產品擴張
成長期，即產品形態初具完善，并具備完整商業閉環之后，處于快速成長的時期。這個時期，產品將進行快速的迭代，覆蓋的業務一天比一天完整，能滿足的業務需求越來越多，而產品為業務帶來的價值越來越大。
與新生期的區別在于，新生期時的迭代方向還未完全明確，迭代更多的是嘗試，磨合業務與產品。而在成長期時，產品的迭代方向已經是非常清晰了的。
1）更多用戶，更多真實需求
產品在真正投入運營之后，所遇到的情況一定與MVP時期有所區別。隨著產品的不斷售賣，我們將會接觸到越來越多的真實用戶，以及更多的真實需求。而這些用戶與他們的訴求，將會成為產品發展的指引。
2）解決更多問題，業務范圍擴張
經過長期的打磨，產品的形態和可用性已經初步成熟了，商業模式也已經初步跑通。隨著更多的真實需求，產品將會選擇有價值的方向擴張業務范圍，從“解決一個問題”逐漸走向“解決一系列問題”。
3）功能完善，產品體量快速增加
伴隨產品的快速迭代，產品的基礎功能會逐漸完善，同時也會基于核心功能去搭建更為豐富的功能矩陣。更多的能力、產品模塊、頁面，最終逐漸疊加為一個完整的大型產品。
4）組織逐漸完善，人員專業化
隨著業務擴張，組織架構逐漸完善。為了提高專業性與效率，團隊人員從“多面手”逐漸轉化為專業化方向。與之對應的是，團隊成員的數量也會在這個時期快速增加。售前、解決方案、產品研發、實施、客戶成功，這一套完整的團隊模型在各模塊中不斷地復制。
C .「 成熟期 」效率提升，快速增長
成熟期，即產品的形態已經穩定，并能夠創造持續的商業價值。處于成熟期的產品，肯定是已經進行商業化運行的。反之，沒有達到預期的商業價值的產品，不能算成熟期。
進入這個階段時，產品已經實現了產品-市場匹配。但是，我們需要對整個產品、以及團隊進行一系列的調和與優化，才能讓整個產品的形態與運作方式更加合理，以便將產品推向更廣闊的市場。
1）產品效率、組織效能提升
經過一系列的快速發展，產品體量通常都會比較大，而團隊成員也快速擴張。隨著一致性成本、溝通成本增加，勢必會造成研發效率、組織效能會下降。因此，如何降低產品的單位研發成本？如何讓整個團隊的組織效能達到最佳狀態？是需要解決的問題。特別是當產品具備一定的客戶數量以后，單位研發成本的降低將會極大提升產品整體的利潤率。
2）產品設計-研發標準化，構建完整鏈路
通過產品設計-研發標準化、數據架構標準化，打通不同模塊的壁壘，提升模塊化與靈活性。將單點之間的競爭力相互配合，形成“場域”競爭力。
產品的單點也許不能保證都有最佳的競爭力，但如果我們能夠提供一系列的、高質量、無縫銜接的配套服務形成閉環，將會形成強大的整體競爭優勢。同時，產品設計-研發標準化，能夠增加產品售賣的靈活性，通過靈活的組合方式吸引不同的用戶，提升銷售靈活性與成單率。
3）提供高質量的用戶體驗
產品最終是給人用的，用戶體驗也會在將來逐漸成為B端產品的核心競爭力。隨著競爭的加劇，以及用戶群體的逐漸年輕化，用戶體驗將成為企業在選擇產品時的重要考量因素，也是口碑傳播的重要途徑。
由于在“產品-市場匹配”階段需要盡快地推出產品，所以在設計開發過程中可能遺留諸多問題，需要進一步打磨優化。產品設計需要與開發具備高度的一致性，視覺交互是否合理，前端代碼是否準確合理，操作反饋是否高效等問題，都需要這個階段來進行調和。
4）教育市場，賣給更多的人
當產品逐漸成熟并具備一定體量之后，單靠銷售跑單是遠遠達不到發展要求。這個階段，需要市場部人員對市場進行教育，聚焦不同的行業領域，從“點式營銷”轉變為“面式營銷”，并配合銷售人員進行產品的售賣。因此，在這個階段，產品的品牌力、核心能力的傳播將至關重要。
D .「 暮年期 」商業價值降低，發展逐漸停滯
暮年期，即產品發展停滯甚至倒退，逐漸失去商業價值的產品。
B端產品進入暮年期的原因，主要有兩個。一是，伴隨著業務的發展，產品已經很難滿足業務需求。且翻新產品的投入產出比較低。二是，伴隨產品的使用時長，產品將變得臃腫和遲鈍，逐漸難以敏捷地滿足業務需求。
很多時候，商業環境的快速發展、技術的更新迭代都有可能成為產品進入暮年期的原因。對于暮年期的產品，根據商業戰略，產品經理既有可能要延長產品的壽命，也有可能持續保障產品完成順利換代。當然，更多暮年期的B端產品，由于業務的調整，最終迎來生命的終結。
需要注意的是，很多產品因為在成長期、發展期無法建立有效的產品控制機制，導致產品過早的進入臃腫階段。也就是前文中所講的“產品失控”，非常有可能加速產品暮年期的到來。
因此，是否能在前三個階段建立健康、完善的設計體系，是產品能夠獲得更長生命力、更多價值的關鍵。
?
NEXT
「 下期預告 」設計體系的構建法則
-
你的B端產品處于什么生命周期？在這個階段產品要解決的問題是什么？而在這些過程中設計體系又應該如何構建？
設計體系的建設并非一蹴而就，通常是伴隨著產品的而發展逐步建立的。在下一篇文章中，我們將基于B端產品的發展階段，帶你詳細了解設計體系的正確構建方式。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
表單對于用戶和產品同樣重要。當我們需要收集數據時，表單是我們最常采取的方式（也許是由于在互聯網普及之前，表單就已經長期應用于我們日常生活中 )。因此，將表單設計得友好易用是提高用戶信息填寫完成率的關鍵。
表單拆解
表單的樣式會根據業務目標、內容的不同而發生變化，但是有一些基礎的組成部分能幫助用戶快速順利地完成表單的填寫。
1.類別標題：類別標題能夠幫助用戶瀏覽表單并同時解釋整個表單的大致內容是什么。當你需要把被收集的信息分類為多個部分時，比如個人信息、職業信息和財務狀況，這時類別標題就可以派上用場。
2.文本標簽: 文本標簽能夠提示用戶在每個輸入框中應該填寫什么樣的信息。
3.提示文字：文本標簽的附加說明。
4.錯誤信息提示：向用戶反饋為什么輸入框中輸入的信息有誤。
5.重要行為召喚按鈕：表單末尾的按鈕，用來提交表單上輸入的內容。
表單狀態
在用戶使用表單時，有三種最基本的狀態能夠幫助用戶完成操作。
1.默認狀態：默認狀態是用戶未進行任何操作時的狀態。
2.激活狀態：當用戶點擊輸入框后，輸入框就變成激活狀態并通過樣式的變化強調顯示。如果用戶視線離開了屏幕一小會兒，這個狀態可以幫助用戶快速瀏覽定位。
3.反饋狀態：此狀態一般在完成一個信息的填寫，并進行下一個字段輸入的時候出現，讓用戶了解輸入的信息是否正確。對于一些無法立即驗證的信息可以在用戶提交表單的時候進行反饋。
設計原則
1.保持簡單：將表單設計得短且簡單。只收集必要的信息，避免讓用戶分開填寫姓氏和名字（分開填寫姓氏和名字一般只存在于外國網站）。允許用戶查看已輸入的密碼，而不要讓用戶填寫兩次密碼去確認。
2.使用內嵌提示：當用戶輸入信息有誤時要給出錯誤提示，同時要將錯誤原因注明在相應的輸入框旁。
3.組合相關項：將有相關性的填寫項組合在一起，然后將它們以合理的順序整理，這可以幫助用戶不必花費太多認知成本去填寫必要的內容， 這個過程不僅輕松而且只需要用戶很短的專注時間。
4.使用左對齊的文本標簽：始終在輸入字段上方放置文本標簽。不要用文本標簽替換提示文字，不然用戶在提交表單之前很難檢查他們輸入的信息，會浪費較多的時間。請把標簽放在輸入字段上方并且左對齊。
5.根據輸入信息的格式設計輸入框：簡單來說，確保輸入框的格式與輸入信息的格式協調。比如說，地址的輸入框應該比手機號碼的輸入框更長。
6.CTA按鈕（行為召喚按鈕）
一般表單的后面會有一個或多個按鈕，比如“提交”、“下一步”之類的。在按鈕有多個的情況下，最重要、或者是最想要用戶點擊的按鈕應該要突出，而其他按鈕弱化處理。
當使用模態視圖狀態下的表單時，有時會有一個關閉按鈕用于關閉模態視圖。另一種設計方式是使用叉號圖標并將其放置在頂部的右側邊緣，它可以代替關閉按鈕，如圖所示。
7.搜索字段：當網站內容比較多的時候，把搜索字段做的明顯些，方便用戶對網站內容進行篩選。同樣的，在用戶使用了搜索功能獲取到結果后，不要清除搜索框內的搜索關鍵字，因為用戶可能會查看最初他們搜索了什么。
8.清晰：向用戶清晰地表達信息，不要出現含糊不清的詞。用戶可能不愿意填寫表單，所以盡可能清晰簡單。如下圖的綠色按鈕文字使用“提現”而不要使用“確定”。
原文：https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2
作者：Momoh Silm
譯者：Ballen貝林、春風似蛋撻
本文翻譯已獲得作者的正式授權
授權截圖
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
服務設計大家也不陌生了吧，關注我們的同學也看過我們寫過很多關于服務設計的文章這其中也有一些枯燥的科普文還有理性討論的文章，當然也有很多不了解服務設計的小伙伴，所以這篇文章就來幫大家介紹一下：服務設計。
《從用戶體驗到服務設計：沒有人會告訴你這赤裸裸的真相》
《如果你想學服務設計，有哪些可選專業？[備查]》
《為什么要應用服務設計？》
《服務設計和用戶體驗設計:有什么區別?》
吸引客戶并與公司建立聯系
服務設計方法幫助公司更有效地執行新思想、滿足客戶期望、打破藩籬并創造商業價值。通過可視化新的想法和客戶旅程，并從第一天就與客戶和員工進行測試，這種方法突出了潛在的挑戰，并產生想法來緩解它們，從而增強了對想法的信心和對行動的更高承諾。
結論
服務設計關注客戶需求，執行想法并創造商業價值。
從最開始，服務設計就通過與客戶和員工進行測試來降低商業風險。
在整個公司中共享客戶洞見，可以打破藩籬，并使工作一致。
沒有良好執行的聰明策略很少能實現卓越的服務。需要工藝、正確的方法和技能，才能以具體的方式將客戶與企業聯系起來。服務設計是幫助公司實現新的客戶體驗、滿足客戶期望、處理內部挑戰和創造商業價值的強大工具。
顧客的視角
服務設計方法將人的關注點引入到服務的開發中。它幫助公司以客戶的眼光來看待全局，并提供工具來設計客戶與整個公司之間的每一個小小的互動。
客戶洞見是有價值的
市場調查告訴你客戶喜歡什么，但可能無法告訴你為什么。
服務設計者使企業能夠更深層次地了解客戶。從深度訪談和觀察到創意客戶研討會，這些方法幫助公司理解為什么人們經常言行不一，以及尋找下一個大創意。
在整個公司中分享客戶洞見也可以有效地打破藩籬并協調工作，這樣公司就能夠交付通過多種渠道與客戶互動的體驗。
觀察顧客去了哪里，他們看到了什么，聽他們說了什么。獲得深刻的客戶洞見，推動新想法。
眼見為實
讓想法看得見摸得著是在組織內部澄清和獲得新概念認同的有力方式。這種方法也突出了可能出現的潛在挑戰，并有助于產生緩解這些挑戰的想法，從而增強對這些想法的信心，提高對行動的承諾。
這就是為什么服務設計者總是在想法和解決方案出現時就將其可視化的原因。一種策略可以以可視的格式更有效地進行溝通，客戶和員工之間的交流配上一段動畫就會更容易理解，一個提議可以通過web界面的設計細節得到強化。
服務場景可以讓企業立即了解新服務對客戶和員工意味著什么。
服務藍圖
客戶互動或接觸點的關鍵時刻，越來越多地蔓延到公司的不同部分。
服務藍圖是一個可視化的工具，幫助公司協調不同的部門作為一個整體一起工作，以創建一個好的、一致的客戶體驗。藍圖是一幅地圖，描述了客戶通過新服務的旅程，以及公司如何通過各種渠道與他們接觸。新客戶體驗的愿景共享有助于部門之間的協調，并使他們更致力于項目。
服務藍圖使公司能夠看到各個渠道必須如何協同工作才能提供良好的服務體驗。
測試體驗
盡管在研發方面投入了大量資金，但仍有很多產品和服務在客戶或交付成本方面失敗的例子。
服務設計者通過讓客戶和員工從第一天就參與到測試中來降低這些風險。因此，在大量資金投入技術或公司變革之前，公司就可以學習、改變和完善理念。
可以快速而廉價地構建服務原型。設計師使用簡單的模型和場景對少量客戶和員工進行測試。在后期階段，客戶和部門數量有限的試點也可以產生更多的證據，證明服務可以在更大的范圍內發揮作用。
一項針對英國無工作人群的為期9個月的試驗證明了不同的人群是如何成功進入職場的。
它很有趣！
服務設計師被訓練成以高度協作的方式工作，并擁有廣泛的創造性方法來將這種思維模式帶到公司中。
系統的、創造性的解決問題的方法的結合產生了大量的解決方案，并激勵著團隊不斷創新。讓我們玩得開心!服務設計方法放大了你克服障礙的潛力，使雄心勃勃的想法成為成功的現實。
我認為服務設計是當今商業世界中最重要的設計分支。-Kerry Bodine, Forrester Research副總裁兼客戶體驗部首席分析師
持久的客戶關系
服務設計提供了創造性的、以人為中心的方法、工具和技能來執行策略。用這種方法來彌補公司所能做的和人們需要和想要的之間的差距。其結果將是創造更好的體驗，建立持久的客戶關系。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：馬克筆設計留學
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在工作中，由于每個人對用戶目標、用戶需求的理解點不同，而且每個人多多少少從自身體驗出發，設計師、產品、技術人員很難對產品達成一致，導致產品需求評審、設計評審過程中發生很多爭論、分歧，而且很難說服彼此。大家可以回想一下，是不是也經歷過這些？
設計師和開發、產品經歷，通常來自不同背景和經驗的團隊，他們必須就項目目標、用戶需求和行為，甚至所涉及的組件流程達成共識。這種共同理解通常是通過可視化（通常稱為映射）構建的。映射理解并描述了與產品相關的各個方面和過程。
本文概述了四種常用映射、它們的定義特征以及何時使用：
同理心地圖
客戶旅程地圖
體驗地圖
服務藍圖
外，本文將概述在創建這些映射之前必須做出的準備。
同理心地圖幫助團隊成員了解用戶的心態。
定義： 同理心地圖是用來表述我們所知道的一個特定類型的用戶的工具。它將用戶知識外化，以便 1) 建立共同的理解，以及 2) 輔助決策。
特征：
地圖分為 4 個象限：所說、所想、所做、感覺。
它顯示了用戶對與產品相關任務的看法。
它不是按時間順序或任務順序排列的。
每個角色或用戶類型都有一個移情圖（1:1 映射）。
為什么使用它：
與用戶建立同理心
強制團隊內部人員對齊和理解用戶類型
何時使用：
任何設計過程的開始
在對用戶訪談中的研究筆記進行分類時
客戶旅程地圖側重于特定客戶與產品或服務的互動。
定義： 客戶的旅程地圖是過程的可視化：一個人為了實現特定的業務或產品目標的過程。它用于理解和解決客戶的需求和痛點。
在最基本的形式中，旅程地圖首先將一系列用戶目標和操作編譯到時間線框架中。接下來，用用戶的想法和情感充實骨架以創建敘事。最后，該敘述被濃縮為一個可視化、用于傳達將為設計過程提供信息的工具。
特征：
該地圖與特定產品或服務相關聯。
它分為 4 個泳道：階段、行動、思想、心態/情緒。
它反映了用戶的觀點：
包括她的心態、想法和情感
省略大部分流程細節
它是按時間順序的。
每個角色/用戶類型有一張地圖（1:1 映射）。
為什么使用它：
確定導致痛苦或愉悅的特定客戶旅程接觸點
打破孤島，對客戶旅程建立一種共享的、組織范圍內的理解
將旅程中關鍵接觸點的所有權分配給內部部門
何時使用：
在設計過程的任何時候，作為整個產品設計周期中團隊之間的參考點
體驗地圖概括了跨用戶類型和產品的客戶旅程地圖的概念。
定義： 體驗地圖是“一般”人為實現目標而經歷的整個端到端體驗的可視化。這種體驗與特定業務或產品無關。它用于理解一般的人類行為（與客戶旅程地圖相反，后者更具體并專注于與特定業務相關）。
特征：
它與特定的產品或服務無關。
它分為 4 個泳道：階段、行動、思想、心態/情緒。
它提供了一個普遍的人類視角；它不是特定于特定用戶類型或產品/服務的。
它按時間順序描述事件。
為什么使用它：
了解一般人類行為
創建對產品/服務不可知的體驗的基線理解
何時使用：
在客戶旅程地圖之前，以獲得對一般人類行為的理解
將多種體驗（工具和特定用戶不可知）融合到一個可視化中時
服務藍圖是客戶旅程地圖的對應物，專注于員工。
定義： 服務藍圖可視化不同的業務組件之間的關系-人、道具（物理或數字證據）和流程-這是直接與接觸點在特定客戶的旅程。
將服務藍圖視為客戶旅程地圖的第二部分。與客戶旅程地圖類似，藍圖在涉及許多服務相關產品的復雜場景中發揮著重要作用。藍圖是實現全渠道、涉及多個接觸點或需要跨職能工作（即多個部門的協調）的體驗的理想方法。
特征：
它與特定服務相關聯。
它分為 4 個泳道：客戶行動、前臺行動、后臺行動和支持流程。
它反映了組織的觀點：
專注于服務提供商和員工
遺漏了大多數客戶詳細信息
它是按時間順序和等級劃分的。
為什么使用它：
發現組織中的弱點
確定優化機會
彌合跨部門的努力
打破孤島并創建一種對如何提供服務的組織范圍內的共享理解
何時使用：
客戶旅程映射之后
在進行組織或流程變更之前
在內部查明漏斗或斷點時
在開始任何映射工作（無論類型如何）之前，必須做出 3 個決定：
這個決定涉及可視化中描述的動作和狀態：它們反映了當前狀態還是理想狀態？
當前映射基于您正在映射的實際“今天”狀態。當映射目標是識別和記錄現有問題和痛點時，這種方法是理想的。使用當前狀態圖幫助分析研究或圍繞數據驗證問題調整團隊。
未來的映射基于用戶類型、體驗或未來服務結構的“理想”狀態。未來狀態圖有助于重塑和構思用戶或體驗在未來的感受。使用未來狀態圖為您的產品或服務的理想形式設置基準或目標。
此決定取決于您將用于構建映射的輸入類型。
假設映射基于團隊或組織內現有理解的積累。這種方法是合并多個現有團隊視圖、創建研究計劃（基于假設圖中出現的差距）以及邁向更高保真度、基于研究的地圖的第一步的好方法。
研究制圖基于專門為構建地圖而收集的數據。當有時間和資源專門用于制定研究計劃時，這種方法是最好的。雖然這種方法可以創建最好的地圖，但它需要時間和大量的支持。無論您從哪里開始，您的地圖都應該是迭代的，并隨著新發現不斷更新。
該決定與最終地圖可視化的質量有關。
低保真地圖未經打磨，通常以靈活、未經修飾的方式使用便簽創建。這些地圖在過程的早期階段是最好的。低保真度意味著人們能夠根據需要進行協作、修改和更新。使用便利貼（物理貼在墻上或使用 Mural.co 等工具以數字方式進行）或協作 Excel 表格。
高保真地圖經過打磨、數字化創建，看起來很完美。高保真地圖最適合創建將在許多人之間共享的工件。高保真可以更容易閱讀，但由于產品的“完成”性質，靈活性較差。這些地圖通常以數字方式創建，然后分散。
所有 UX 映射都有兩個好處。首先，創建地圖的過程會迫使對話和一致的心理模型。其次，映射產生的共享工件可在團隊、組織或合作伙伴之間使用，以傳達對用戶或服務的理解。隨著團隊的前進，這個工件也可以成為決策的基礎。
在一種映射方法上使用另一種映射方法不會對項目造成破壞，理想情況下，可以根據需要在產品設計流程的不同節點使用所有四項的組合，以深入了解用戶需求。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一些典型問題也相應顯現：上手就干、主觀設計、缺少方法、忽視跟進等等。
所以我們撰寫了「UI標準設計流程」，希望能為UI設計師提供對于設計支撐思路的共識，讓設計更有價值：
從接到需求到上線后跟蹤，我們把流程拆分為五個節點：需求分析-交互設計-視覺設計-視覺規范-方案驗證。
當然，在設計流程中我們只表達不同流程中的行為目的及標準，相關方法論我們會配套一份「設計師成長指南」，不久之后再與大家分享。
1.需求分析
我們在接到一個設計需求后，要做的第一步是進行分析并確定設計目標。
我們需要：了解背景、用戶和競品，能準確理解產品定位和需求目標，評估需求的合理性和準確性，并提供相應策略；甚至洞見機會點，通過設計對業務產生正向價值。
背景分析
目的：背景分析是為了讓我們在剛接觸產品的時候，去洞察表面背后的東西。通過背景分析，能幫助我們快速切入產品，并根據已有信息去制定準確并具有說服力的設計策略。
行為：我們需要了解：產品的定位及價值是什么，它的現狀如何，是否有既往的數據沉淀或經驗總結。
用戶分析
目的：對UI設計師而言，用戶分析是為了讓我們更好地了解產品，并擁有對整個產品的宏觀思路。通過用戶分析，能為我們的視覺設計提供方向，并為我們做出決策提供實際落點。
行為：我們通常需要了解：用戶畫像、用戶需求、用戶行為、用戶路徑等。
競品分析
目的：競品分析能夠讓我們獲得行業內的優秀經驗，減少我們的思維盲區，同時還為我們提供了一份可被量化的標準，使我們可以基于競品去反推現有產品。
行為：UI設計師可以從競品定位、主要功能、迭代動向、產品結構、頁面布局、交互動效、視覺設計、優劣勢對比這幾個維度去進行競品分析。
需求評估
目的：在了解以上的通用信息后，我們要對需求進行評估，去決定采用哪種方式、制定什么樣的策略。
行為：我們接到的需求，通常可以分為三種：全新產品類、產品改版類、功能新增或優化類。
對不同類型的需求，我們都可以用5個問題去評估：
1.是否可被證偽？
2.目標是否明確？
3.投產比如何？
4.是否有更優解法？
5.是否有可預見風險？
基于以上問題，我們可以去協同交互、產品做相應調整和策略制定，甚至發現新的機會點并進行推動。
目標對齊
目的：設計為目標服務，所以我們要在設計開始前與需求方對齊目標，這也能為設計價值的佐證提供標準。
行為：設計目標通常有3種，我們可以從中去對需求目標轉譯：提升數據型、解決問題型、創新項目型。
針對不同目標我們可以去制定不同的設計策略，并對策略的落地進行數據監測與分析，進行方案校正。
2.交互設計
在產品流程中，交互設計的作用在于，通過信息架構的組織去產出體驗流暢的界面原型。
我們需要：充分理解整體流程與交互原型，基于設計原則去發現可優化的部分；同時能平衡產品、設計與開發的效益最大化，并驅動產品的體驗提升。
設計原則
目的：設計原則能為我們提供一個行之有效的設計向導或提示。熟知各類設計原則，能使我們在設計支撐時，擁有更豐厚的專業度和更敏銳的洞察力。
行為：我們需要去了解市面常見的Guildline如iOS、Material、UWP等，以及一些常用原則如菲茲定律、格式塔理論等等。
流程梳理
目的：流程的再梳理，可以幫助我們在視覺設計前，快速地理解和診斷流程邏輯。
行為：在流程再梳理的過程中，我們需要注意以下4個問題：
1.功能是否完整？
2.鏈路是否流暢？
3.步驟是否冗余？
4.是否易于理解？
基于以上問題，我們可以用自身的專業儲備去推動流程的優化。
原型優化
目的：交互原型是需求內容的外在表現，通過原型優化，可以最大程度地避免視覺評審后的設計返工。
行為：在對交互原型優化的過程中，我們要重點注意以下4個問題：
1.架構是否符合目標
2.層級是否足夠精簡
3.信息是否傳達準確
4.狀態是否有所缺失
在視覺設計時，我們基于以上四點可以去同步優化原型，并根據經驗去尋求體驗和成本的最佳平衡。
3.視覺設計
視覺設計是產品與用戶直接連接的媒介，優質而恰當的視覺設計，可以極大地提升產品吸引力。
我們需要：基于分析確定視覺方向、定義設計語言，輸出準確且高質量的視覺頁面。
設計情緒板
目的：設計情緒板可以為設計語言的構建提供可視化參考，也有助于我們前期快速與各方達成共識。
行為：我們通常基于分析，去確定設計關鍵詞，并基于關鍵詞去衍生映射物、建立圖形情緒板，最終分析和確定設計方向。
設計語言
目的：設計語言是情緒板的具象表達，它將構建起用戶對產品的視覺感知。
行為：在明確設計方向后，我們就要基于情緒版去定義設計語言，主要包括主視覺、色彩、字體、圖標、圖形、動效等。
典型頁面
目的：典型頁面是設計語言在場景中直觀體現，這有助于我們制定設計規范，并為其他頁面的設計提供參考。
行為：我們通常需要設計首頁、頻道頁或其他具有示例作用的典型頁面，在設計的過程中我們還需要同步去規范間距、卡片、視覺變量、圖形應用等，以此為視覺規范夯實基礎。
4.設計系統
在設計典型頁面的同時，其背后其實已經對應了一套設計規范和組件，而我們基于此去整理并沉淀出設計系統，能極大地提升統一性和迭代效率。
我們需要：制定完整、清晰的基礎規范，沉淀圖標庫、組件庫等，并持續優化和更新，形成可持續沿用的產品設計系統。
基礎規范
目的：基礎規范是設計語言的沉淀，也是視覺變量的基本粒子。它可以保證頁面的基本統一，同時我們可以基于不同業務快速地拓展其他主題。
行為：在我司，一份基礎規范的構成包括：色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。
圖標庫
目的：圖標規范可以幫助其他成員快速、準確地進行圖標拓展，而沉淀的圖標庫也可以極大地提升產出效率。
行為：基于具體需要，我們可以設定多套圖標風格，規范其柵格、筆畫、圓角等，并將已有的圖標資產進行沉淀。同時我們也會去規范一些常見圖形并沉淀，如空態插畫、懸浮入口、徽章、商品等。
組件庫
目的：組件庫是對常用控件進行設計規范、開發、封裝的可被復用的集合，組件分而治之，可被自由組合，能保證設計品質、統一用戶體驗、提升產研效率。
行為：在我司，一套組件庫通常包括：通用、布局、導航、數據錄入、數據展示、反饋、其它。除通用原子組件外，我們也會對常用模塊進行梳理，沉淀業務組件庫。
5.落地跟蹤
在設計完成之后，我們需要對設計方案進行評審、驗收及數據跟蹤，以保證設計方案的落地并跟進調整。
我們需要：運用合理策略以保證設計方案的高質量落地，對方案上線后的用戶反饋進行有效跟進，運用多種方式驗證目標，迭代產品。
設計評審
目的：設計評審通常包含了交互與視覺，其目的在于審查設計方案中的可用性問題。
行為：在我司，視覺評審即終評，我們需要在視覺稿中標注出所有交互邏輯，并對潛在問題有預判，能與各方確認目標、分桶與數據埋點；同時我們要對開發實現有預判，能與研發確認實現細節。
設計驗收
目的：設計驗收是為了確保需求滿足、體驗流暢，并且設計細節能高質量落地。
行為：視覺設計師主要驗收視覺細節的還原度，并且要在一定程度上對開發的適配、樣式解法有預知，減少二次驗收。同時需要保證驗收有沉淀，利于后續跟進。
數據驗證
目的：數據驗證除了分析分桶之外，也可以分析產品上線后的一些問題、并在迭代中修改。同時我們也可以總結設計經驗、提升未來設計的準確率。
行為：我們通?；谠O計策略，去對數據進行篩選與分析，以此衡量設計對于目標達成的增益度。對于有問題的，能反思并且修改；對于結果好的，能總結并且沉淀。
設計復盤
目的：設計復盤以結果為導向，我們可以通過復盤對設計策略的價值進行總結驗證，并去發現、優化流程中的不足之處。
行為：我們需要陳述設計目標和策略，對設計價值進行驗證，并能總結過程中的亮點與不足，制定后續計劃、沉淀相關經驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用互聯網產品過程中，會有很多因素造成操作錯誤或失誤，導致無法順利完成任務。因此產品的容錯性設計是交互設計中的重要內容。
用戶在實際使用互聯網產品的過程中，會有很多因素造成操作錯誤或者失誤，而導致無法順利完成任務，或者完成任務的效率很低。產品自身所具備的容錯能力對于各種使用場景的有效覆蓋，可以提升產品糾錯效率、降低用戶操作出錯概率，因此產品的容錯性設計是交互設計中的重要內容，也是提升用戶體驗不可忽視的一個環節。
容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。
本篇內容我們討論的是容錯性在互聯網產品領域的內涵和意義。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，涉及產品對錯誤操作承載能力的多個方面，包括：如何降低用戶操作的出錯率，如何及時提供糾錯幫助，以及如何給用戶提供解決方案等內容。
「 即便你的產品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的。——《Getting Real》」
一個產品設計的無論多么簡單，用戶都難免在使用過程中因為各種原因而犯錯?；ヂ摼W產品面向的用戶群體是復雜多樣化，教育背景的不同，行為習慣的差異，復雜的使用場景，都會使得用戶的真實操作相比產品設計之初的預期有一定出入。此外，一些產品本身存在的因素，例如產品路徑復雜，邏輯不暢等，也有可能造成用戶無法順利完成任務，亦或是完成任務的效率低，出錯率高。產品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失，會給用戶帶來不好的用戶體驗，也是產品的一種設計缺陷。因此設計師應具有良好的容錯性設計思維，盡量避免用戶錯誤操作的出現，當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。最終達到使產品更可用、更易用的目的，給用戶帶來更優的用戶體驗，使用戶與產品的交流更加順暢。
互聯網產品的容錯設計可從用戶使用產品的三個階段來考慮，即操作前、操作中、操作后?？纱笾職w納為以下幾方面內容：首先在用戶操作前給予正確有效的引導；其次在重要的操作步驟給予用戶及時有效的提示；當用戶發生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案；最后幫助用戶在錯誤發生后迅速回到正確狀態。
在用戶開始任務操作前給出用戶正確有效的提示，可減少錯誤操作的發生。需要注意的是，引導應盡量醒目且簡單易理解，確保能引起用戶注意，并且在用戶注意到后快速獲取信息，到有效的防錯幫助。
產品常見的引導主要針對兩種情況。第一種是針對于新手用戶的功能介紹，不同于曾使用過產品的用戶或者高級用戶，新用戶首次使用產品的過程其實是一個學習的過程，此時需要讓用戶快速了解產品核心功能及主要的操作，幫助他們更快地上手。
例如下圖導航APP新版本的新手引導【如圖1】，在用戶首次啟動產品時，產品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹，能夠讓新用戶快速熟悉核心功能，并在正式使用產品的過程中提升效率，降低出錯率。
圖1-導航APP新手引導
第二種情況是針對產品上線的新功能或者較大的功能變動而設計的初次引導，產品的功能改動可能會是用戶產生不同程度的陌生感，適當的提示可幫助用戶快速熟悉新功能點或頁面信息的調整。初次引導常見的方式有很多種，包括：遮罩式引導、彈窗式引導、氣泡、浮層式引導等等。
例如版本升級后的音樂APP【如圖2】，首頁使用情感化圖文設計加遮罩式的引導，可以有效將注意力集中到特定功能上，用戶進入頁面第一時間就注意到，確保了信息傳達的有效性。
圖2-新版首頁的遮罩引導
以上列舉的內容屬于狹義層面的引導，用戶尚處在被動接受引導的學習階段，在此階段引導的目的是提醒和防錯。從廣義的層面來講，我們可將對用戶的引導理解為”消減信息的不對稱性“，當用戶面對可影響其決策的因素時，給予用戶關鍵性的信息提示和說明，可以促使用戶做出正確的決策。
針對需要加工時間的特殊品類，如烘焙蛋糕，京東到家在用戶決策的關鍵頁面和步驟展示時效提醒【如圖3】，避免用戶在完成訂單信息填寫或結算后才發現商品的配送時間超出用戶的期望，會給用戶帶來極為不好的購物體驗。
圖3-京東到家頁面中的時效提醒
當用戶進行一些如修改、刪除、覆蓋等不可逆操作時，系統需要在用戶做出這類操作指令后告知其產生的后果，讓用戶自主決策是否選擇繼續執行。在此階段的提示需要注意從以下兩個角度考慮：一是提示的方式，二是提示的時機。
在用戶完成任務的操作路徑中，大部分產品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態彈框和非模態彈框兩種大的類型【如圖4】，主要區別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示，要依據提示信息的優先級和視覺權重的大小，同時要清楚不同類型的彈框適合的場景。
圖4-彈框分類
模態彈窗是較重的提示方式，在用戶進行重要且有風險的操作時可優先考慮使用。其優點是可以快速獲取用戶的視覺焦點，缺點是會打斷用戶當前的操作流程，用戶需要進行如單擊“確定”、“取消”、“關閉”按鈕等操作指令將該對話框關閉后才可繼續操作。
而非模態彈框屬于輕量級的提示方式，其優點是不強制用戶進行交互操作，或者用戶依然可以在頁面進行其他操作。彈框出現一段時間后會自動消失，所以但不利于承載過多文字信息。非模態彈框對用戶造成的干擾較小，但也因此容易被用戶忽視。
給用戶的信息提示還有一點不可忽視的是反饋時機，應確保用戶在關鍵的操作步驟得到及時的反饋，因為滯后的反饋可能會導致用戶因為某一個環節的錯誤操作不得不重復操作一遍之前的流程，或者要修改關的一系列信息。
【如圖5】中的登錄頁面，用戶登錄需要依次輸入手機號、密碼、圖片驗證碼，但如果用戶輸錯了密碼并不能馬上得到反饋，依然可以繼續填寫驗證碼，只有在全部信息填寫完之后點擊登錄，系統才會校驗密碼，并提示用戶密碼錯誤重新確認，用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統驗證密碼可以提前到輸入圖片驗證碼的步驟之前，在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟，馬上修改密碼。
圖5-登錄頁面中的提示滯后
同時，盡量為用戶提供相應的解決方案，這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯，并且會告知用戶如何去管理儲存空間，以解決此問題【如圖7】。
圖6-多行表單報錯頁面
在產品設計中，為降低操作的出錯率，限制也是一種方式。在可能造成錯誤操作的入口適當設置操作障礙或者禁止操作，增加不可逆操作的難度，可以有效規避錯誤操作發生風險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設計，可以有效避免用戶的誤操作。
此外通過讓控件、動作、選項等變得可見，盡可能減少用戶記憶負擔，把需要記憶的內容作為輔助信息提供給用戶，或幫助用戶自動完成信息填寫也可以幫助用戶快捷高效地完成既定任務，降低出錯率。例如【如圖8】在信息填寫的步驟，可在用戶已復制的內容和上傳的圖片中自動識別姓名、電話、地址等內容，并在用戶確認后自動幫用戶填寫對應信息，為用戶大大節省時間和記憶成本，快捷高效地完成既定任務，降低出錯率。
在用戶執行操作后，應盡可能的為用戶保留已操作的信息，以便在發生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復雜的操作任務，記錄用戶在每一步驟的操作信息，讓用戶可以從出錯的步驟上及時恢復到正確的流程上，或恢復到距離錯誤操作最近的步驟，可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當前的操作，在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕，可讓用戶有機會恢復到上一步操作結果上。
圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕
以上是關于互聯網產品中容錯設計的概念、重要性以及設計方法的一些闡述和思考。在產品設計的實際應用的中，可以模擬使用場景，對目標用戶使用產品的真實操作進行行為觀察，分析對比產品設計的操作路徑與用戶真實操作的差別，發現并收集用戶可能發生錯誤或失誤操作的關鍵步驟，驗證產品的容錯能力是否能達到有效覆蓋。同時，也要通過產品數據的對比分析得出用戶操作錯誤及失誤的真實原因，指導并提升產品容錯能力的設計優化，進而不斷提升產品的可用性和易用性。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn