交互成本是用戶在與網站交互中必須執行以達到其目標所需的精力（無論是精神上還是物理上）。
理想情況下，我們希望用戶訪問網站并在他們眼前找到他們正在尋找的答案。這將意味著零交互成本，并且是檢驗可用性的里程碑。
不幸的是，由于大多數站點和應用程序都提供了用戶可能想要做的許多事情，因此很少能達到零交互成本。大多數時候，用戶必須四處瀏覽，閱讀，可能滾動，找到有希望的鏈接，單擊它，等待頁面加載，然后重新進行整個過程。有時，一個新窗口可能會在現有窗口的頂部彈出，在這種情況下，用戶必須將注意力轉移到新窗口上，也許還需要回頭看舊窗口以將信息集成到兩個窗口中。在其他情況下，用戶可能需要記住一頁上的信息，然后將其應用于另一頁。所有這些動作都需要認知努力并彌補了交互成本。
可用站點將實現各種用戶目標所需的交互成本降至最低。也就是說，它們最小化：
閱讀
滾動
環顧四周以查找相關信息
理解提供的信息
單擊或觸摸（不會出錯）
打字
頁面加載和等待時間
注意開關
內存負載-用戶必須記住的信息才能完成其任務
這些用戶動作對總交互成本的貢獻不同。它們的相對重要性可能取決于用戶-例如，閱讀障礙的用戶閱讀時間可能比點擊周圍的時間困難，而操作障礙的用戶可能會覺得點擊困難。它們還取決于設備-連接到高速網絡的臺式機上的頁面加載可能微不足道，但是如果蜂窩網絡覆蓋較慢，則移動設備上的頁面加載可能會花費很長時間。
許多可用性準則都解決了使交互成本的各個組成部分最小化的問題。例如，網絡寫作規則通過推薦要點和簡短的要點句子和段落來降低閱讀成本。
讓我們舉一個簡單的例子。假設我們要查找“儀式”一詞的來源。我們將使用Dictionary iPhone應用程序執行此任務。我們將忽略在手機上查找應用程序所涉及的成本，并且在啟動Dictionary應用程序后立即開始分析。
啟動應用程序后出現的第一件事是啟動屏幕。
在這一點上，交互成本包括等待幾秒鐘，以使啟動屏幕消失并為應用程序的第一個可操作屏幕騰出空間：
在此頁面上，互動成本來自定位搜索框。幸運的是，搜索框非常顯眼地位于頁面頂部，因此我們可以放心地認為，用戶只需很少的精力就可以找到它。找到后，用戶需要觸摸搜索框以將輸入焦點移到搜索字段中。搜索框是一個相當大且易于觸摸的目標，因此交互成本也可能會降至最低。
接下來，用戶必須編輯搜索查詢。
當輸入焦點在搜索字段中移動時，自動建議的詞將自動顯示。
用戶必須查看自動建議并確定它們不相關，然后清除當前查詢。他們可以通過按右側的灰色x按鈕（如果他們熟悉iOS規則）來執行此操作，也可以通過按觸摸屏上的Delete鍵來逐個清除字符。
刪除后，用戶將開始輸入目標詞“儀式”。當他們開始輸入內容時，關聯詞會顯示在下方。用戶可以檢查關聯詞并決定是否要繼續鍵入或停止并選擇關聯詞。
選擇（或鍵入）單詞“ ceremony”后，用戶必須按Search進入結果頁面。他們需要等待片刻才能顯示新頁面：
用戶必須推斷Origin可能包含有關單詞來源的信息。（對于大多數用戶而言，這是一個簡單的推論，因此認知成本很低；但是，如果改用“詞源”一詞，則某些用戶可能會在閱讀和理解其含義時遇到更多麻煩；因此，“來源”是更好的選擇，因為它降低了交互成本。）
讓我們總結一下交互成本的各個組成部分，以找到“儀式”一詞的由來：
等待啟動頁面
搜索
輸入幾個字符
掃描自動提示列表，以查看所需單詞是否在其中
如果否，請輸入更多字符并在上一步中重復
如果是，請通過點擊選擇所需的單詞
找到搜索框，然后點擊將輸入焦點移至該搜索框
閱讀搜索框中顯示的查詢和自動建議
決定查詢不相關
刪除搜索框中顯示的查詢
鍵入或選擇自動建議
點擊搜索
等待結果頁面
在結果頁面上找到相關的詞源信息
向下滾動頁面并掃描內容以查找詞源信息
找到標簽并閱讀
請注意，右側還有更多隱藏的標簽
推斷詞源可能是隱藏的標簽之一
注意到滑動會向右暴露內容
向右滑動
閱讀Origin并將該單詞與目標聯系起來，以找到單詞的來源
點擊詞源
了解“儀式”一詞的來源
如您所見，一個相當簡單而輕松的過程需要很多步驟和子步驟；他們每個人都會產生互動費用。對于某些人而言，交互成本微不足道-例如，記住人們向右滑動即可顯示更多內容，因此交互成本非常低，因為人們在移動設備或Web上已經多次遇到水平滾動?？梢詢灮渌襟E以最小化交互成本；因此，在搜索框中使用灰色的小x按鈕可以大大降低刪除顯示在搜索框中的查詢的成本。同樣，將按鈕調大可以幫助點擊目標。選項卡的位置和外觀設計會影響人們找到選項卡的速度。（當然，選項卡本身的選擇與使用其他方式來構造內容的方式也會影響用于在結果頁上查找相關信息的位置的交互成本。）
請注意，對于前面各節中的某些步驟，用戶可以有多種選擇。例如，他們可以按灰色的x按鈕刪除當前字符串，也可以多次使用Delete鍵。或者，他們可以從自動建議列表中選擇建議，也可以在最后輸入字符串。
人們如何決定采取哪種行動？答案在于預期效用的概念：
預期效用=預期收益–預期交互成本
用戶嘗試最大化一項操作的預期效用：換句話說，他們權衡了每個操作的收益和成本，然后選擇收益與成本之間最佳平衡的方案。
當有幾種方法可以實現具有相似利益的相同目標時，用戶通常傾向于選擇使估計的交互成本最小的操作。
例如，許多人可能不會在自動提示列表中向下滾動以找到“儀式”一詞，而是可能會再鍵入一個（或幾個）字符，直到可見“儀式”一詞為止，因為向下滾動小列表和掃描列表中的正確單詞比擊中一個甚至幾個字符的成本更高。
這種類型的想法也普遍適用于站點級別。如果看起來真的很難在任何給定站點上實現其目標，則除非與初始站點進行交互的收益確實很高，否則大多數用戶只會以較低的估計交互成本轉移到另一個站點。舉個例子，如果用戶真的想購買Apple電腦，他們可能會堅持使用Apple的網站，因為他們不太可能在其他地方購買。在這種情況下，用戶的動機確實很高，因此他們可能愿意忍受很高的交互成本。但是，如果用戶要購買燒烤架，則可能不在乎是否從Home Depot或Lowe's或其他站點購買，并且會離開互動成本高的站點。
營銷和品牌推廣通常會增加與特定網站或品牌互動的用戶動機和預期收益；可用性可以降低交互成本。兩種方法最終都解決了增加使用站點或軟件的預期效用的問題。
交互成本是可用性的直接度量。實際上，該概念早在人機交互時就被引入，以評估軟件系統的可用性。所有的可用性啟發將用戶的交互成本降至最低。
從長遠來看，快速評估設計的交互成本可以節省大量資金，因為它可以很好地衡量用戶界面的難易程度。它也可以用作設計備選方案之間的比較工具：通常，將交互成本最小化的方案具有更大的成功機會。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“今天吃什么?。俊?
“不知道啊，看看大眾點評，哪家店比較靠前”
“一會去看什么電影？”
“我看豆瓣上，這部片子評分特別高，我們去看這個吧”
當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，面對的選擇越多卻越不知道如何做決定，或者當下做了決定覺會一直思考做的這個決定是不是最好的，選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？排行榜僅僅是用來降低用戶的選擇成本，為什么商家對排行榜也趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道，我們的生活正在被各種排行榜所支配！
排行榜的本質是一個沒有感情的信息篩選機制，某一相關的同類事物之間通過比較，反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應降低用戶自己的選擇成本，準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么？
一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。
在沒有各種應用前，當我們決定購買什么東西或去哪家消費，前期需要花費大量的人力、物力，搜集相關的信息進行整理集合后，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。
選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助降低選擇成本的同時，也會影響這用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）
比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人，收集信息建立備選集，但由于京東在電子設備方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東完成了前期的信息搜集及備選集建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。
在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。
無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了相通的談資。
在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感，滿足自己的社交需求。
過年期間各家app紛紛推出自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要了解自身在大數據下的自我確認，通過各種各樣的榜單，判斷自身的能力、情緒、價值等，來達到自我認同，否則就會感到焦慮不安。
加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。
我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，一起參與討論。
無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？
對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下。
從我們記事起，我們對世界的認識來自自己的父母或老師，而這些教導我們什么是對、錯，對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家，比如：醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究問題的工作，做出更輕松的決定，雖然不一定是正確的。
搜索我們會第一時間想到百度，影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？
平臺權威性意味著說服力和影響力，在減輕用戶的決策壓力的同時，影響用戶做出平臺所需的決策方向；
每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度
排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值
平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。
在平臺完成建立權威性開始利用排行榜進行商業變現時，比如百度、58的競價排名，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。
上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。
由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。
而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。
排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。
對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。
不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。
當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。
面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。
在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。
在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。
知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。
而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。
首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。
其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。
用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）
當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。
沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。
在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。
平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。
朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。
不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫?，F在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。
相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。
排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。
好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。
當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。
有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。
得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。
排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。
純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。
相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。
上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）
每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。
人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。
因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。
說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到）
榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；
信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。
排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。
文章來源：站酷 作者：9號自習室
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
國內互聯網近幾年發展迅速，在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈，很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 Sensor Tower 數據顯示，2020年Q1全球移動互聯網應用下載量達336億次，同比增長了20.3%。
產品出海的第一道屏障就是語言。但若想打造一款能夠適應海外市場的產品，只完成不同語種的翻譯是遠遠不夠的。在產品設計的過程中，我們需要考慮兩個方面：國際化與本土化。
國際化+本地化的策略，也就是“glocal—global+local”，指的是結合國際統一和地區差異。這種策略在統一的前提下，通過靈活配置保障地區的個性化體驗，既能滿足統一維護提升產品效率，也能保障當地用戶的特殊訴求，是一種性價比很高的設計方案。
產品設計的國際化
產品的國際化，即全球化。國際化的通用設計能夠為產品打造一個全球統一的形象與內核。
Chrome的不同地區首頁功能與樣式基本一致
一套通用的設計系統和設計規范，既可以幫助我們在產品的國際化設計中 樹立產品調性，又可以保證操作的 一致性，同時提升設計的 高效性。阿里旗下面向東南亞市場的購物平臺Lazada在開發之初，通過使用Fusion Design的設計系統，大大節省了設計的時間。在如此復雜的電商業務場景之下，整套產品的設計最終僅3靠個設計師就完成了。
設計系統對產品研發成本的影響
除此之外，一致的內核也能夠幫助企業在全球范圍內建立起統一的品牌形象，增強 品牌的識別度與知名度。
產品設計的本土化
想要讓產品在某一個市場上站穩腳跟，對于本土化的思考是必不可少的。本土化的核心是 因地制宜，根據地區差異相應調整產品策略。
UC瀏覽器在不同地區的首頁布局
為什么說本土化對于產品的出海非常重要？其原因并不難理解。Charles Eames說過，“Recognizing the need is the primary condition for design.” 任何設計的本質都脫離不開對需求和問題本身的理解。好的設計是在對需求、動機、心理、環境等相關因素有了充分了解之后所產出的解決方案。
針對海外設計研究的思維框架
在考慮產品的本土化時，我們需要關注到用戶的需求是什么、是否仍然成立，用戶的行為模式是什么樣的，以及整個外在社會物質、精神環境等方面的狀況。螞蟻金服團隊通過海外本土化設計實踐，總結出了一套“環境-人-需求“的研究框架，列出了可以去調研的多個方面。
螞蟻金服-“環境-人-需求”出海產品設計研究框架（做了小部分修改）
需求（價值）
首先，我們要做的第一步判斷就是原來的 用戶需求是否成立。產品在原市場想要解決的問題，是否在新的市場仍然存在，即我們的產品是否 有用？這個問題的答案決定了原先的產品是否對于該市場的用戶是有 價值的。如果有價值，那么就可以深入探索如何讓用戶用起來；如果沒有價值，那么就需要進一步判斷是否要繼續開拓這個市場，以及如果繼續開拓這個市場，在原有的產品形態上，我們能否通過改造的手段讓它符合在新市場的用戶群中挖掘出來的、不一樣的 新價值？達到了“有用”的標準，我們則需要開始考慮“ 好用”的問題。只有滿足“好用”這一條件，產品才能夠被用戶用起來、從而真正在新市場落地。在實現“好用”的過程中，我們可以關注以下幾個層面的影響因素：
生活形態、價值觀
生活環境與社會環境會塑造當地用戶的生活形態與習慣。下圖分別是日本和北美地區的新聞資訊類App。同樣是推送新聞資訊，兩者在表現形式上卻大相徑庭。可以看出日本的新聞App布局緊湊、信息量大、頁面坪效很高；而北美的新聞App則更注重突出重點內容，信息密度相對來說并不高。
日本-新聞資訊類App
北美-新聞資訊類App
這種差異的背后，其實是兩地上班族生活形態的差異。日本城市小、人口密度大，上班族通勤大多會選擇地鐵。而北美地區面積大，大部分人會駕車上班。駕車的人雙手需要長時間控制方向盤，同時開車也需要持續注意路況，只能在間隙中查看新聞內容；而乘坐地鐵的人雙手更加自由，也有較長的通勤時間需要消磨，故可以接受更多的信息，也能夠接受更繁瑣的操作。
北美（左）和日本（右）各自的生活形態
有時候，某個地區的用戶長期習慣的操作模式，會與主流的操作模式有所差異。設計師junu在個人博客中講述了他為Melon（一個韓國主流音樂播放器）進行體驗優化的一段經歷。他發現Melon當時的播放操作邏輯比較冗長，用戶需要先點選列表中的多首樂曲，再點擊底下的播放鍵，此時Melon會將用戶所選歌曲自動生成一個列表并進行播放。這和當時Spotify等音樂播放器“點擊即播放”的主流交互邏輯相比，要更復雜和麻煩，尤其是在用戶只是想要立即聽到某一首歌曲的時候。因此，junu 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪?；谟脩舴答仯罱K，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
Melon播放器的點選操作邏輯
設備環境
10年前，高端大屏幕手機在東南亞和非洲市場普及率并不高，因此產品出海時需要考慮當地常見的設備是什么，并作出相應的適配。近幾年，隨著市場經濟的發展以及中國手機的成功出海，即使是東南亞和非州的發展中國家，高端移動設備的普及率也已經很高，這為設計師在考慮通用性的過程中減輕了不少負擔。不過，在為每個地區的用戶做產品設計時，仍然需要調研清楚當地設備的使用情況，比如什么樣設備更流行、普及率更高；如果某一地區的設備不夠發達，那么設計的操作也需要考慮到設備不同所造成的差異。
業態/監管
在不同的國家或者地區，各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中，在北美和英國占據了重要市場份額的Quickbooks、Xero等公司，卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下，歐洲本土的企業顯然會對當地的政策和制度更加熟悉，也更容易設計出符合當地企業與會計需求的財會產品。
2015年，Airbnb進入中國市場。在最初的市場調研和用戶調研之后，針對本土化，他們所邁出的第一步就是根據中國的業態環境對產品的前10%和后10%做了改造。其中，產品的前10%指的是登錄這一類用戶開始使用產品所需要進行的步驟，而后10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時，其功能流程基本相通（搜索地點、挑選房間、瀏覽信息等），不需要做過多的改變；但產品的前10%和后10%則決定了用戶能不能把產品用起來并不遇到障礙。因此，針對登錄的部分，愛彼迎將原先的Facebook等第三方登錄替換成了微信與微博賬號的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國本土用戶進入產品和完成訂單的壁壘。
Airbnb產品中國本土化的“前10%與后10%”策略
社會經濟
社會經濟環境的不同代表著社會階層狀況的不同，它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現，當地擁有銀行賬戶的人口僅占了總人口的34%，同期中國擁有銀行賬戶的人口則占了總人口的85%。而這34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪，繼而影響了產品各個層面的設計。
文化/宗教
在各個文化/宗教里存在著不同的意象，也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外，在不同的文化/宗教語境下，人們會有不同的行為模式與價值取向，這里我們會引入一個模型——霍夫斯泰德文化維度模式，來對這一問題進行更詳細的解讀。
霍夫斯泰德文化維度模式（Hofstede’s Model of Cultural Dimensions）
霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度：
使用他們官方網站（https://www.hofstede-insights.com/）上的 Culture Comparison Tool，可以查詢到各個國家的文化維度指數，也可以選擇不同的國家進行對比。
在為特定地區的用戶設計產品時，我們可以以從這些維度去解讀他們的行為傾向，并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時，根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。
墨西哥地區的文化特征指數
滴滴墨西哥的本土化設計策略
這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上，“按照銷量排序”是一個被高頻使用的功能，消費者們認為什么產品買的人多，什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上，我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇，他們不認為他人推薦的就一定是好的。
國內外電商平臺對比
在企業即時通訊工具行業，國內的主流產品，如企業微信、釘釘等，都選擇了藍色這一比較沉穩的顏色作為主色調，在產品功能的形態上也偏向于嚴肅。而海外的辦公產品Slack，視覺色彩更加豐富；整體的產品定位也更加活潑歡樂，常常會有“不嚴肅”的表達，比如在界面多處都使用了emoji。這樣的產品形態差異，其背后是兩種文化在放縱（享樂）/克制（嚴肅）這一維度上的差異。
企業微信與slack的產品風格對比
內容本土化
除了功能框架上的設計需要考慮本土化外，產品中運營內容的本土化也是不可輕視的一環。Spotify Design 團隊在《 Designing for Belonging: Why Image Localization Matters 》一文中，記錄了他們對于內容本地化的一些經驗和思考。同樣，內容的翻譯僅僅是本土化的第一步。在地區之間區別不大時，完成內容的翻譯便能夠滿足其他地區的需求。如下圖中 “浴室歌單（ Songs to sing in the shower）”的播放列表，列表上的文案一經翻譯，就能夠推送給德國、波蘭、以色列、意大利等一眾國家的用戶。但當內容的閱讀群體有著更顯著的差異時，僅僅翻譯是不夠的。在看到這張圖片的時候，其他人種比如亞洲人可能就不會產生很強的代入感，也會缺少對產品的一種歸屬感（這個產品并不是為”我“設計的）。
Spotify "Songs to sing in the shower" 歌單
下圖展示的是Spotify另一個歌單—— “快樂時光（ Happy Hits)" 的封面在不同國家的呈現形式。可以看到，面對文化差異更大的群體時，Spotify在保持了統一的樣式風格的基礎上，針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶，也能夠讓用戶產生更強的連結感與共感。
Spotify "Happy Hits" 歌單
結語
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：UI中國 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在介紹重新定義的交互設計定律之前，我們先來回顧一下經典的《交互設計 7 大定律》
費茨定律告訴我們要節省操作時間應該怎么做：放大目標對象，減小目標距離。
席克定律告訴我們要節省決策時間應該怎么做：盡可能的減少選項的數量。
米勒定律告訴我們人類記憶的上限，所以要將信息數量控制在 4±1 內。
接近法則告訴我們相鄰≈相關，所以要根據信息親密性組織其位置關系。
泰思勒定律告訴我們復雜性是守恒的，我們要平衡復雜性的天平向誰傾斜，以實現整體效益最大化。
防錯原則告訴我們用戶出錯是不可避免的，我們只能減少并降低其犯錯的可能性。
奧卡姆剃刀原理告訴我們如無必要，勿增實體，設計要盡量的簡約。
不知道你看完以上 7 個定律有什么感受，我的感受是，他們彼此之間有些重合（奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡），但用其概括交互設計的精髓，又覺得不夠完整（做到這幾點就夠了嗎？），整體交互設計的精髓要義并沒有表達地很清楚（如何用一句話來概括交互設計的目標？）
帶著這幾點疑問，我重新去思考到底什么是交互設計的底層設計目標？到底哪些交互設計定律能更好的體現其本質？以下是我思考的結果：
交互設計的終極目標是改變和影響用戶的行為，達到期望的業務結果，比如下單率、搜索率等結果指標，結果指標因產品而異，不具有普適性，不可一言以概之。而在交互設計的過程中，以交互設計定律為指導的過程指標是通用的，幾乎可以說放之四海而皆準，我把這四個過程指標概括為四字箴言：少快好省。怎么理解呢？
基于這樣的過程指標，我挑選了 5 個設計定律來進行設計指導，下面我們逐一來看。
奧卡姆剃刀原理告訴我們：如無必要，勿增實體，即“簡單有效原理”。對于工業產品適用，對于軟件類產品也是如此。因為任何增加的非必要信息和功能，都會帶來生產/維護成本的增加，以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代，復雜會讓人望而卻步，也容易使人迷失，而精簡的產品更利于人們的理解和操作。
典型案例：
小米的電視遙控器設計和傳統遙控器設計相比，對奧卡姆剃刀原理的運用非常極致，相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。
我們再來看一個互聯網產品設計的案例：
19 年初，外銷瀏覽器做了一次視覺煥新大改版，從交互結構到視覺界面變化都比較大，所以我們就增加了新版本的滑屏引導，告訴用戶有哪些界面及功能的變化，結果新版灰度期間，信息流滲透率下降了 33%，搜索下降了 18%，經過仔細的數據排查，發現都是滑屏引導惹的禍，當把滑屏引導去掉后，搜索和信息流的數據都恢復正向了。
19 年底，我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火，我們就做了一個錦鯉大作戰的小活動，畫面精致，獎勵也比較誘人，但是發現活動上線后轉化率效果卻不及預期，我們再次把矛頭對準了蒙層引導，通過去掉蒙層引導，CTA 按鈕場景化，并增加微動效，轉化效果立刻得到了提升。去掉不必要的引導，讓界面自己會說話，這也是奧卡姆剃刀原理的一個體現。
米勒定律告訴我們：人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時，首先要運用奧卡姆剃刀原理，盡可能的去做減法，盡量將數量控制在 4±1 的范圍內。如果選項較多，且減無可減時，就需要對信息/選項進行分類和分組，保證類別的數量在 4±1 的范圍內。
典型案例：
對于像手機號、銀行卡號、身份證號這種類型的信息，因為其固有的信息長度無法做精簡，所以在信息組織時就會采取分組的方式，保證分組的數量控制在 4±1 的范圍內。
另一個案例也是關于我們的外銷瀏覽器：
左一是改版前的頁面，功能有 12 項之多，且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析，將功能劃分為了三大類：重要功能，常用功能，必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現，界面復雜度迅速降低，功能清晰度和操作便捷度顯著提升。
多爾蒂門檻告訴我們：系統需要在 400ms 內對使用者的操作做出響應，這樣才能夠讓使用者保持專注，并提高生產效率。
先來看一組模擬的響應效果：
△ 圖片來自作者「超人的電話亭」
從這組圖片可以感受到，當圖片在 400ms 內時，是勉強可以接受的，但當時間延長到 600ms 及以上時，人們就會感受到明顯的延遲、等待和卡頓感。
多爾蒂門檻對響應時間的上限給出了參考，而后續的研究則給出了更細致的響應標準，比如元素的點擊反饋應控制在 0.1s 左右，盡量不要超過 0.14s，單個元素入場退場時間應控制在 0.2s 左右（入場一般比退場稍慢），而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準，才不會讓用戶對產品的流暢性有所懷疑。
用戶將大部分時間花在別人家的網站（產品）上，而不是你的。這意味著他們希望你的網站（產品）跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們：作為設計師，我們必須要多研究把玩各種 App，這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。
對于新入行的設計師，我會建議大家好好研究一下 ios 和 android 的 OS 規范，了解平臺的特性，同時再翻翻下面這些書籍，了解各種常見的設計模式，豐富自己的設計組件庫。
此外，在做某種特定類型的產品設計時，也非常有必要做行業及競品分析，這樣才能確保我們在做產品設計時，可以延續用戶的主要視覺及行為習慣，減少用戶的學習及使用成本。
以視頻 App 為例，行業內的頭部產品在產品框架及元素布局上都具有高度的一致性，這也是雅各布定律的一個體現。
操作前有預期，操作時有反饋，操作后可撤銷。這是十年前我入行時接觸到的一句話，我不知道是誰提出來的，但卻是這些年我做交互設計最重要的一條參考原則，我將其簡單命名為可感知性原則。
操作前有預期，指的是要符合視覺認知原理，符合行業設計習慣，讓用戶一看就懂。
操作時有反饋，指的是操作時要即時反饋，就近反饋，并且反饋合理。
操作后可撤銷，指的是任何操作都盡量讓其可撤銷，讓用戶無后顧之憂，安心探索。只要存在用戶行為的交互，這個準則都是可以用來檢驗的，以下圖為例。
當我們想要刪除某張照片時：
操作前有預期：工具欄位于默認的底部位置，有刪除圖標+文字明確示意的功能按鈕，讓用戶一看就知道應該選擇哪一項操作。
操作時有反饋：點擊刪除按鈕時，刪除按鈕有一個灰色的點擊態，隨后馬上出現一個確認彈窗，而且是就近位置出現，確認彈窗上提示簡單，按鈕用的是 CTA 的形式，操作交互一目了然。
操作后可撤銷：當用戶確認刪除后，照片消失，但是還可以去最近刪除的文件夾中，恢復照片。
到這里，交互設計 5 大定律就全部介紹完成了，圍繞交互設計的過程指標，少、快、好、省依次展開，給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。
也是為了滿足米勒定律的 4±1 原則，我將交互設計定律濃縮成了 5 條，如果在此基礎上加一條的話，我會在「好」的指標下，增加一條「格式塔原理」，它包含的 7 大設計原則。格式塔原理是做設計排版的基石，絕對值得所有設計師反復學習、研究和運用。
文章來源：優設 作者：VMIC UED.Joyce
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互設計就是通過設計出完整的界面和用戶操作流程，保證其符合用戶的認知模型，避免用戶在使用過程中任務失敗。
交互設計師是承接上游（產品經理）和下游（視覺設計師）的角色。
交互設計師的基礎價值來源于兩方面：
交互設計師的核心價值是將產品業務通過更好的設計，將其更大價值化并落地。
本文大綱如下：
將自己作為各種角色的用戶，去使用體驗，感受整個產品的流程。從而找到可優化的地方。
針對于 B 端產品，產品中會涉及到超級管理員、管理員、普通員工至少三種大類角色，其中普通員工里面可能會細分多類角色。交互設計師要在各個角色中，使用體驗產品，梳理清晰的產品業務邏輯。使用使用中，弄清各個角色的權限管理和流程邏輯。
針對于 C 端產品。對產品的分層用戶主流程和分支流程進行體驗走查，找到使用中不好的地方并加以優化。并對行業競品進行重度使用體驗，了解整個行業產品的特點。
我以前寫過好多設計師的專業技能方面的文章，我之前一直認為設計師最重要的素質是專業技能。
但是設計師最重要的素質并不是專業技能，因為專業技能可以慢慢培養，任何人都可以學會。
設計師最重要的能力是推動能力。因為推動能力和責任感、性格及天賦有關，而這恰恰會成為設計師進階的障礙。
想要推動業務之前，先要將自己的職責做好，負責的工作做好，讓大家信任，這個時候才能贏得大家的信任，讓大家更加相信你。
1. 為什么推動能力最重要？
在實際工作中設計師最基礎的能力是解決問題的能力，團隊需要能解決工作問題的設計師，這樣才不會團隊造成負擔或者拖團隊后腿。
設計師在工作中會遇到形形色色不同性格的對接人。那么肯定會遇到對接難度大的 PM、視覺設計師、交互設計師或者開發，這時候就需要有較強的推動能力，不然很容易使得工作進度受阻，導致設計方案無法快速落地。
擁有較強的推動能力對個人而言有以下好處：
2. 怎么做推動？
推動分兩方面，一方面是產品上的推動，另一方面是團隊里的推動。
針對產品上的推動，設計師需要做一些前期工作和設計方案，然后和團隊領導溝通，獲得他們的支持，最后和產品經理溝通，讓產品經理看到，我們做這個設計方案可以帶來哪些價值。
得到了產品的支持后再進行推動設計，推動的事情可以做例如首頁改版，設計規范優化，核心流程上提升數據指標，可用性測試等等。
針對團隊中的推動，先發現團隊缺少哪些東西？針對團隊缺失的東西，做一些推動的事情。在此之前需要做大量的準備工作，并得到團隊領導的肯定和支持。
例如團隊沒有做組件化，那么你可以牽頭做組件庫和設計規范。團隊缺少數據分析思維，那么你可以現在團隊培訓數據分析知識，然后做一系列的數據設計模板，將數據融入到設計師的工作流程中。
團隊協同不太順利，那么你可以和領導商量，做一些團隊協同上的工作，例如團隊新軟件的引入，團隊項目協同文檔規則制定等。
3. 如何順利推動？
如果剛進一家公司，那么先要熟悉團隊運行模式，每個設計師負責的產品業務和他們的處事風格。
當熟悉產品業務和團隊，那么接下來先將自己負責的產品需求做好，后續就可以進行一系列前期推進準備工作。做推動之前，需要先和領導確認，得到領導的肯定后再慢慢在團隊推動。
當在團隊取得一定的進展，則后續可以嘗試產品上的推動。在推動的過程中，要記住不斷地迭代優化自己的推動方案，讓自己的推動過程中做得萬無一失。
先熟悉業務運行邏輯，掌握業務后，分析業務流程。
1. 找到業務核心并優化
找到產品中核心是什么？例如資訊類產品，產品的核心是用戶通過推薦列表，到達新聞詳情頁閱讀的過程。在這個主流程的過程中，交互設計師可以做的事情就是如何提升推薦列表的點擊效率、展示效率和詳情頁正文展示效果。通過優化結構樣式，提升設計價值。
例如電商產品，核心就是如何讓用戶快速找到想要的商品，并順利的完成購買。在這一過程中，交互設計師可以做的事情，如何提升用戶快速找到商品這一場景和購買支付的流暢度。
文章來源：優設 作者：Echo的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
交互設計之父的阿蘭·庫珀，最為人熟知的就是這句話：“除非有更好的選擇，否則就遵從標準”。
a. 費茨定律，它是在1954 年 ，由保羅.菲茨心理學家 Paul Fitts 首先提出，當時用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互和設計領域的影響力最為廣泛和深遠。
b. 定義：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小
（上圖中的 D與W），用數學公式表達為時間 T = a + b log2(D/W+1)。
c. 費茨定律，在產品設計中的價值是提高產品的可用性和易用性。例如：界面設計中，按鈕等可點擊對象要合理的設置大小尺寸才能容易操作，所以在移動應用中，圖標按鈕會增加點擊熱區范圍，以便用戶輕松點擊按鈕，做到
產品設計上的可用性和易用性。
費茨定律的思考分析，如下圖所示 。
1. 可點擊對象的設計，需要設計合理的大小和尺寸。功能設計的越大，用戶越容易點擊操作，交互效率越好。
2. 界面設計的屏幕邊緣或角，適合放置像菜單欄或按鈕這樣的設計元素，如果邊角是目標，它們可無限高或無限寬，更容易觸達到操作目標。不管你移動了多遠，點擊操作最終都會停在屏幕的邊緣，并定位在按鈕的上面。
3. 界面設計中，出現在用戶正在操作的對象旁邊的刪除列表（右滑刪除）比下方彈出選擇對象容易操作，右滑刪除交互可以被用戶打開得更快，更有效率，因為不需要移動到屏幕的其他位置，就可以刪除多余的列表。
4. Apple的iOS人機交互設計指南中指出，按鈕的點擊熱區大于44x44pt，這樣操作按鈕才會讓用戶覺得容易使用。
5. 費茨定律案例：用戶在使用產品時，比較重要的操作，我們會放在移動端應用的屏幕邊緣處，方便我們的
用戶點擊操作產品的功能圖標。如下圖所示。
2. Hick’s Law / 席克定律（?？朔▌t）
我們看一下，席克定律的數學公式表達是 : RT= a+blog2 ( n )。RT 表示反應時間，a 表示跟做決定無關的總時間，b 表示根據對選項認知的處理時間實證衍生出的常數，n 表示同樣可能的選項數。
在人機交互的界面設計中，選項越多，意味著用戶做出決定的時間就越長。
分布操作，專注當前行為，就可以節約用戶作出決定的時間。如下圖所示。
其他符合席克定律的案例，如下圖所示：
a. 對于用戶，低頻率功能或不太重要的功能，可以收納起來。比如：個人中心的設置功能模塊。如下圖所示：
b. 分布操作，專注于當前的行為設計，如下圖所示：
c. 在人機交互設計中，我們對核心功能選項做好設計上的歸類，可以提升用戶做選擇的效率。
比如：我們幫助用戶選擇 5 種核心的功能需求，它首先劃分了旅游場景下的功能分類，讓用戶對分類進行選擇。
然后進入選擇機票入口，這樣我們極大的化解了用戶面對很多旅游功能選項的難度和糾結，節約了用戶做決定的
時間。
d. 做好分類選擇，可以提高交互體驗設計的效率，選擇你想要的商品并購買。如下圖所示。
3. 神奇數字 7 ± 2 法則
1. 因為美國認知心理學 George A Miller 的研究，人們短時記憶廣度大約為7個單位（字母、數字、中文等），也就是說每次只能處理 5 到 9 件事情。
2. 人的大腦認知信息的能力有限，所以我們通過把信息分組和模塊分類，以此來認識和思考一些復雜性的問題。
3. 神奇數字 7 ± 2 法則，應用范圍很廣。例如我們記憶的電話號碼，可以分成三組數字：159 5555 6666 ，
這樣分組記憶起來就會容易很多。
4. UI 界面的導航設計，為了給用戶提供明確的設計向導，兩種導航（底部導航欄和頂部導航欄）的欄目設計通常都控制在 5 個之內，欄目功能過多用戶不容易記憶，5 個之內的導航設計方便用戶記憶和快速操作。
5. 移動應用的交互設計規律。神奇數字 7 加減 2 法則同樣適用，螞蟻金服的品類區的核心功能模塊的設計，懸浮卡片上只顯示 8 個 功能圖標，如下圖所示。
6. 同一類功能和同一層級的元素出現時，數目一般控制在 5-9 個，如下圖所示。
7. 如果超過 5 個，可以右滑選擇你想要的產品功能，如下邊的右圖所示。
8. 神奇數字 7±2 法則，運營廣告圖設計要抓住重點去設計，更好的引導用戶去瀏覽內容和產品的交互體驗。
如下圖所示，數字符號標注-突出重點，主圖、主題、操作按鈕、主色氛圍等，我們會作出優秀的運營設計。
根據格式塔的心理學思考 ：當對象離得太近的時候，人的意識會認為界面元素之間是相關的。
在交互設計中，界面設計中的接近原則是對相似信息及功能類別進行內容分組和布局設計的優化設計。
接近法則在界面設計中的作用，能夠直接影響到用戶與產品界面之間的視覺互動，來引導用戶的瀏覽及點擊交互行為。因此，相似的內容和功能模塊應該彼此靠近，而關聯性較弱的內容應該保持大一點的間距。
接近法則運用的目的：在視覺上通過組與組的區分，來劃分功能模塊之間的關聯性，讓界面變得更加清晰，同時幫助用戶在瀏覽頁面時，能夠清楚的看到到各個內容模塊之間的關聯性，就是視覺信息的劃分和分組展示。
如下圖所示。同一類的功能可分為一組，組內使用淺灰色的分割線來表達。而關聯性弱的功能模塊，組內的可以用淺灰色的分割面表達，拉開組與組之間的距離，做好視覺信息的劃分效果。
a. “復制粘貼之父” Larry Tesler (1945-2020) 說過，“任何事物都具有其固有的復雜性，無法簡化”。
引入第三方登錄，減少注冊賬號的復雜步驟，節約用戶登錄或注冊這一流程上所耗費的步驟和時間。
復雜性守恒定律，認為每一個產品設計的過程中，都有其固有的復雜性，存在著一個臨界點，超過了這個點產品設計的過程就不能再簡化了，你只能將固有的復雜性從一個地方轉移到另外一個地方。
b. 以用戶為中心的產品設計，交互設計應盡量簡化用戶層面上的交互設計的過程。比如：頂部導航欄的更多圖標，就是將常用的功能整合并隱藏在首頁設計的更多功能模塊中。如下圖所示。
a. 防錯原則，認為大部分的意外都是由產品設計上的疏忽，而不是人為的操作疏忽。所以我們可以通過改變產品
體驗設計把過失率降到。
我們在設計過程中，要從用戶維度出發，做設計前思考用戶的使用場景，預測到他們有可能發生的誤操作狀態，
做到操作前給用戶的溫馨提示、操作中的實時告知、操作后給用戶的及時反饋。
b. 防錯原則是著名的品質管理專家新鄉重夫提出來的。原則最初是用于工業管理，在交互設計中也可以使用。
比如圖 1，今日幸運星主題，分享給好友幫忙砍價。在沒有滿足條件時，通過彈窗來提示用戶去邀請好友，以此
來完成產品設計的任務。
比如圖 2，請輸入驗證碼的彈窗，驗證碼錯誤，您還可以重復 3 次，只有信息都輸入正確時，用戶才能完成的這個界面任務，如下圖所示。
簡單有效原理，被稱為“如無必要，勿增實體”（Entities should not be multiplied unnecessarily），即如有兩個
功能相等的設計，那么選擇最簡單的、視覺干擾比較少的設計。在其他條件相同的情況下，要求得越少的那個就
越好，越有價值。
a. 合并多余流程，點擊極速支付，支付成功彈窗提示。
b. 高頻率使用的產品界面，保持清爽的設計感。
c. 優先展示核心功能，減少點擊次數。如下圖所示。
圖 1，界面中清晰的品牌色的底部操作按鈕，可以明確的引導用戶去選擇優質的理財產品。
圖 2 ，摩拜單車首頁，用戶最關注的功能是掃碼開鎖的核心功能，方便用戶直接操作，提高交互效率。
d. 蘋果官方網站的簡約設計做的很棒。蘋果公司用一種很和品質感的設計提供了足夠多的內容，網站的文案，交互和圖片都比較集中展示，網頁設計沒有放一些使用戶分心的廣告和不重要的內容。如下圖所示。
總結：
1. 在產品設計領域，有很多經過時間檢驗過的定律，可以作為產品設計的指導原理。作為交互設計之父的
阿蘭·庫珀，他最為人熟知的就是這句話 ：“ 除非有更好的選擇，否則就遵從標準 ”。
2. 交互設計的定律，能夠幫助產品設計師對界面上的各種視覺元素進行合理思考，從而發現一些用戶使用場景中的可用性問題。從產品設計的維度思考看，我們來改善產品設計的操作效率和用戶的滿意度。設計服務于產品、設計服務于商業。
a. 什么是用戶體驗地圖 ？
定義：用戶體驗地圖，是一種梳理產品體驗問題的設計工具。展示的就是用戶在使用一款產品和設計服務的過程中，每一個階段的體驗、用戶對產品直觀的心理感受。將用戶的所做、所思都展現出來，便于團隊設計師全面思考產品帶給用戶的體驗，挖掘設計的優化點。例如，你去三亞去度假旅游，用戶體驗地圖就是用圖形的形式，可視化的表達，將你在三亞的一天活動情況記錄下來，其中包含你這段時間去過的旅游景點，以及在每個旅游景點的用戶
體驗感受。
思考用戶體驗地圖，適合在產品設計的那幾個階段繪制？
1. 原型制作前，設計師從直觀感覺的角度看，我們要了解自己的產品為用戶提供了什么功能、交互體驗，同時協助我們的產品設計團隊，做好產品功能的體驗設計。
2. 產品上線時，我們可以結合用戶調研、可用性測試等方法論。以此獲取用戶的美好體驗和真實的心理感受，來幫助我們公司的產品設計發現問題，以此作為產品設計的迭代優化的方向或者尋找新的創意設計機會點來解決問題。
a. 我們做好用戶體驗地圖的兩個優點：
1. 產品設計的體驗目標是讓用戶用起來，感覺到產品具有可用性、好用性、易用性，那么產品設計也應該從用戶
視角出發，用戶從產品那個觸點點擊進來，怎樣點擊交互下一步，怎樣保持對產品的活躍度，如何傳播分享；定位用戶使用產品過程中的體驗痛點。
2. 真正思考用戶需要什么功能，讓更多用戶參與進來，換位思考我們產品帶給用戶具體什么感受，全局性的思維去思考產品的體驗，與團隊成員、產品交互設計、開發部門和項目負責人等達成一致性的共識、有效溝通和協作，一起制作出解決方案。
b. 思考用戶體驗地圖的價值點
1. 基于用戶使用場景的設計是基于用戶達到某個體驗設計目標的一系列場景的分析與產品思考，理解用戶在每一個使用場景下的痛點及需求分析，同時結合用戶的上一場景，思考用戶下一步的體驗目標，我們可以通過做好體驗設計，來引起用戶情感上的共鳴。
2. 使用用戶體驗地圖，團隊成員可以從用戶的痛點出發，讓產品設計師、團隊成員全面的思考產品體驗，從用戶
體驗地圖中來挖掘產品設計的機會點。
以途牛用戶體驗地圖為例，如下圖所示。
我們運用用戶體驗地圖時，作為設計師或參與者需要切換成用戶視角、第一次使用者的角度去思考，去發現產品體驗上的問題，同時解決產品體驗中遇到的問題，提升用戶體驗的滿意度。
制作用戶體驗地圖時，四個關鍵點的思考：
1. 明確我們的核心用戶人群等; 2. 研究用戶的使用場景。3. 做好用戶的訪談和調研。4. 制作好用戶體驗地圖。
制作用戶體驗地圖的具體步驟如下：
1. 前期準備工作：
我們可以先做用戶的深度訪談、用戶對產品反饋、產品設計的走查和交互的走查、產品的數據分析、同行業的競品分析、訪談用戶等方法，獲取大量真實可靠的資料。
我們就會認識到：思考用戶在使用產品設計的過程中產生的行為數據、用戶體驗和用戶內心的真實感受。我們也可以思考產品的設計思路、產品的核心用戶人群等，以此作為我們制作用戶體驗地圖過程中的重要參考和依據，知道用戶到底需要什么功能和流程，來幫助用戶解決問題。
2. 用戶調研的方法如下：
我們可以先采訪用戶或者做好調研和記錄，將我們的采訪或調研記錄的內容做好整理歸檔，團隊成員一起來拆解和記錄用戶的行為、用戶的直觀感受和用戶心中真實的想法。
3. 我們要梳理好關鍵產品設計任務的流程，就是用戶在使用產品功能的過程中，會面臨很多不同的場景或復雜的設計流程和體驗設計的目標。然后我們再撰寫用戶完成每個關鍵任務的時間：比如，對于我們日常所見的查找功能而言，用戶希望更快的查找到自己想要的產品功能和體驗目標。
我們再寫出關鍵產品任務的用戶操作產品時的行為：
指的是用戶當下在做什么，通常是用 “我+動詞” 來表示，例如：我購買基金產品。
4. 我們再確定好關鍵節點，寫出用戶調研過程中的痛點思考、用戶的滿意度思考，放在對應的行為點的下方。
我們思考和分析用戶的痛點、用戶滿意度的調查，判斷用戶的情緒變化。分析結束后，需要將以上三類信息都寫下來，方便后續整理分組。把行為按照達成用戶目標的邏輯順序整理出來，并做好歸類。例如：美團 App 的例子中分為 4 個階段，如下圖所示。
5. 我們來判斷：用戶在每個階段，體驗產品設計任務中所產生的情緒高低的不同值，并把它們連成一條線，這樣就形成用戶的情緒曲線。
6. 也就是說，制作用戶體驗地圖過程中，我們要思考用戶每個行為背后的痛點和產品設計上的機會點。
最后，制作好一張實用性很強的用戶體驗地圖，以此來挖掘用戶的痛點問題，我們可以更好的去挖掘產品體驗設計中的設計機會點，如下圖所示。
網上的案例欣賞，出境購物的用戶體驗地圖，如下圖所示。
總結：
1. 我們制作用戶體驗地圖，注重的是團隊成員的洞察分析能力和對產品的思考能力，我們要用心思考產品設計中的核心用戶的痛點和產品設計中的機會點，我們要輸出一套符合用戶價值、商業價值和和產品功能價值的體驗設計方案，以此解決用戶的體驗問題，把產品做的更好，讓用戶使用產品過程中，產生愉悅感。
2. 制作用戶體驗地圖的價值是，不僅能使我們以“用戶視角”的維度去思考，引導團隊和設計師去思考問題并做好
產品的體驗設計。同時我們也可運用“全局性的設計思維” 去思考產品體驗設計，去發現產品問題并解決產品設計中遇到的體驗問題，讓我們產品帶給用戶的是：產品設計的可用性、好用性和易用性的價值。
文章來源：tob.design 作者：峻溪POINTV
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2021年的第一篇萬字長文，文章主題是一次偶然的反思中總結出的設計師思維進階的過程，詳細講述了我在兩年間從一名應屆非科班設計師成長為一名高級體驗設計師的思維進階過程。與一篇UI教程、一篇交互分析的文章不同，這篇文章希望能夠從底層的思維層面幫助你明確自己的狀態，并提供一個快速進階的思路，所謂授人以魚不如授人與魚正是這個道理。
一：前言：靈感與反思
靈感始末
最初，在一個偶然的機會讀到一本規范相關的書籍，然后我開始反思自己是否有積累成系統的設計規范、設計技能樹，為了驗證這一點，我便以設計一個彈窗為例子開始模擬演繹，演繹完畢后進一步思考，我是如何積累這些方法論或思維模型的？正因此發現了我作為非科班設計師，從最初開始自學設計到如今晉升到高級體驗設計師的思考方式的轉變。進一步從現象中探究原因，于是輸出了本文。
如何設計一個彈窗？
在做任何需求的時候，甚至是一個極小的需求，你有沒有持續思考過？有沒有進一步思考過？又有沒有刻意、主動完善設計思路，積累思考模型？如果沒有，你可以從接下來這個思考案例中反思一些東西。
設計彈窗時，我畫的第一個元素——彈窗的矩形背景時，是如何思考的，考慮了哪些元素。進一步設計我還要考慮哪些因素？下面是我的瞬時思考能整理的有效信息。
方法1：根據彈窗內容進行界定（根據內容極限情況，及你的設計系統定義的間距來控制整個彈窗的尺寸）
方法2：根據固定比例，主要適用于移動端，例如3比4的矩形比例較美觀，計算彈窗面積與屏幕整體面積的比例、計算留白與彈窗的比例、參考黃金比例Golden Ratio、白銀比例Silver Ratio等。
方法3：根據你的系統定義的柵格進行界定，如小彈窗使用1/4,1/3,1/2，大彈窗使用1/2,2/3,3/4柵格。
方法4：柵格+比例，方法3界定寬度，方法2界定高度 。
設計延展性：考慮彈窗內的內容發生變化時的自適應情況，內容過多的極限情況/內容過少的極限情況。 自適應的規則，彈窗窗口尺寸的延展方式（橫向拓展/縱向拓展）
交互：彈窗又叫模態視圖，其通過遮罩突出彈窗視區，在蒙層遮罩上方的最高層，根據通用規則，大部分情況我們不應當在彈窗上再次疊加界面層。若彈窗場景下有新的縱深層，如下一級操作或內容界面，此時如何處理？
如下方，PC端google drive，就在結構上使用類平級跳躍的形式來“借面板”解決新的操作需求。
而再下方的IOS使用的bottom sheet則采用了完全不同的解決方案，表面上似乎是違背了彈窗模態上重復疊加的規則，但在移動端一屏僅僅解決一個問題、完成一個任務的語境下，反而更加合理。（而這些成熟的模式、范式，或者說設計單元，正是在主動思考和被動思考階段設計師需要積累的設計經驗，它們將作為設計師知識庫中的組成部分，指導設計并進一步提效和促使設計合規）
常規易用性：如退出機制——關閉的解決方案，通過關閉按鈕退出，那關閉按鈕尺寸在當前彈窗尺寸下定義為多少合適，視覺尺寸與hover實際可點擊尺寸分別是多少？PC端是否只能使用關閉按鈕退出？點擊空白區域退出是否更，如下方的dribble，點擊上方黑色空白區域即可退出，而無相關經驗的用戶也可以在右上角看到關閉icon的暗示線索。
場景與業務背景：詳細了解當前需求的業務背景與場景，進一步概覽整體業務背景，即兼顧其他可能性的業務場景。如我設計的B端系統包括辦公室類工作場景，同時也包括站立、遠距離觀看屏幕的工作場景，這將涉及到信息能否直觀清晰的被傳達、獲取。當前需求的業務是主流場景？可向上向下兼顧大部分同系統的其他業務場景？還是無法兼顧而需要同時列出更多場景來制定通用規則？以我所設計的B端系統為例，較高頻的出現在彈窗下存在下一級操作或展示頁面的場景，因此我考慮在工作空閑時輸出一份彈窗場景下有縱深的下一級信息或操作的解決方案，并將其作為產品相同場景的應用解決方案。
視覺合規性：保證主要信息的對比度，清晰度，保證所有信息傳遞和展示時的節奏和梯度優先級。從字號到字重再到段落行高間距等，從彈窗中ICON的樣式選擇，到Icon語義清晰度等。
...
如果進一步思考，其實可以思考more and more。你會發現，從基礎的結構涉及的柵格，到基礎的視覺合規性涉及到的字體設計、icon設計。再到交互涉及到的典型設計單元，通用交互模型范式等，在設計一項內容前，我們有很多的思考空間，或者稱之為思考機會點更為合適。將充足的思考納入設計過程后，初期設計時間線被拉長，但長遠來看避免了思慮不足引發的風險與反復更改的成本，合理的設計預測與分析則向上向下兼容未來場景，提高設計輸出物的通用性與成效，即所謂的磨刀不誤砍柴工。
那么這樣成熟（我自己其實是偽成熟，還不夠完善和系統）的思考過程，分析過程是如何學習或者說培養的？
二：設計思考的三個階段
這其實是我接下來要講的正題，我將設計中的思考分為三個階段，無思考——主動思考——被動思考，這是一個初期線性發展，后期循環迭代的過程。其實我定義這一套思考階段的分級是在短暫的靈感爆發后立即輸出的，來源于我對自己2年間從一個非科班新手到如今高級體驗設計師思考邏輯的發展變化的回顧。我發現其確實有跡可循，在地鐵上很興奮很興奮的頭腦沸騰過程中快速記錄下大綱，到了工位立即記錄并輸出。
無思考階段
大意為，新手設計師，或沒有刻意練習、思考、總結的習慣的設計師，最初由于沒有通用的設計經驗、沒有相關成熟設計模型或組件與設計單元的使用和設計經驗，因此設計一個新內容實際為從0開始，此時設計師可能會單憑直覺 隨意設計，例如設計彈窗就隨便畫一個矩形，然后隨機調整。或者使用成熟的組件系統，直接套用，純粹執行。這就是處于 0思考階段，憑直覺設計（注意和直覺性設計區分開，直覺性設計是從用戶的維度定義的，即用戶可以單憑直覺理解設計，這也是我們常說的可供性"affordance"原理）
主動思考階段
而主動思考階段的起點是，隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加，及接觸同類工種（其他設計師、設計leader）的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。
前者會使新手設計師（或沒有有意識的反思、總結沉淀的初中級設計師，或剛剛轉換行業的各等級設計師）逐漸暴露并意識到自己的問題，大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。
后者則是一個對比與發現的過程，即接觸到更優質的輸出物，更合規的輸出過程，更的設計流程、協作流程等等。可能是被動接受的，如leader或同事的分享，及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流，也可能是主動接受，如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解，學習。
因此，在主動思考階段，會有一個從發現問題到解決問題的過程，是不是和設計本身的職能很像，而在這個過程中，設計師自身就是被設計的對象，即如何解決自己身上存在的問題？如何使自己變得更完善更優秀？
你可以回顧下，在你初入行業時，最熱情的接納各種信息、知識、經驗的階段，你當時的狀態是什么樣的？概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式，到某個設計方法論、某個解決典型問題的交互設計等。
主動思考階段與興趣（對某個領域的衷情）、個人行為習慣（自學習慣，求知與自發研究的習慣）、周邊環境等因素有關。因此核心是與本人、其他個人（同事，設計圈關系人）、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣，所以會自發的廣泛接收各種新的信息，并在這個過程中養成思考總結的習慣（比如在下），同理，個人在大學期間，甚至成長過程中有養成良好的自學習慣，有訂立目標并逐步實現的習慣，他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境，社交關系人對你所產生的主動及被動的影響，如leader布置課題及學習計劃，同事，好友，行業人員的協作共創活動，分享會等。
所以，主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態，持續的發現身邊的問題，發現自身的不足，發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中，發現不足并持續思考和輸入信息，反思，輸入，鞏固，沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段，與無思考階段相比，由于它是一個主動，刻意學習的過程，因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。（這應該也能解釋為什么一些沒有進入主動思考階段的設計師，工作四五年卻被一些一兩年的新人設計師趕超）。
從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性（初級）與輸出質量趨于穩定并持續迭代提升（中級）。
這個思考階段線性過程的第一個門檻，雖然是初中級設計師面臨的門檻，卻是能持續影響設計師整個設計生涯的關鍵轉型點，奇異點。就像先賺它一個億中所謂的一個億啟動資金。跨過這個門檻，設計師會迎來第一個爆發期，中級設計師我的理解是下限清晰，上限無窮。即在主動思考階段，設計師可以將個人設計能力，從技巧到方法推動到一個較高上限的地步，概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。
如何跨過新手期，從無思考到主動思考？
刻意練習與學習
最優解是從興趣到發現，即培養興趣，調動興趣去開展某個內容或者技能的研究學習，并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法，但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期，每天固定不變的是大量瀏覽作品，大量閱讀文章，大量練習技巧，后面逐漸選擇性瀏覽，選擇性閱讀，選擇性練習。這期間發生了什么？是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策，也就是一個反思的過程，從發散到收束，以提高在當前工作場景下的個人能力，集中精力在核心能力的提升上。
也是這種能力使我快速B端轉型C端，使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者?？桃饩毩暫蛯W習的能力與傾向，應當在主動思考階段養成為習慣。
What——How——Why
從淺層思考到深層思考，最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美，積累設計相關的表層信息。而當你思考How時，你將掌握如何實現該效果的能力。再進一步，當你開始思考Why時，你終于探尋到設計的本質，該設計是在遇到了一個什么設計課題、問題的基礎上提出的，解決了什么問題，如何解決的，有沒有更優解？目前的解法能否納入自己的知識庫？
T型構建能力模型
T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例，其中又以基礎UI界面輸出能力為例。
視覺：布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...
交互：信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹
業務：當前從事行業、細分領域、細分到業務的理解程度，細分需求的業務背景的理解程度
橫向為拓展能力，通用能力如經常講的共情能力，溝通能力，協作能力，邏輯思維能力，復盤輸出能力等等。除此之外還有特殊能力，比如UI UX以插畫 ，3D作為特殊能力項。
關注環境
在最初定義主動思考階段時，我就講過個人覺醒主動思考的過程中，他人和環境的影響因素十分關鍵，因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊，及細分的每個設計組，從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享，公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享，以及你身邊擁有個人特長能力的同事們，關注優秀的內容，優秀的解決問題的思路，身邊就是老師，萬物都是書。例如我從C端轉型B端后，在一兩個月內快速融入團隊，期間從不同的同事身上學到了時間管理（正經的）、項目管理、規范體系的制定等特長能力，而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件，大大提升了復用界面的設計效率，至少百分五十以上。沒有對應的環境和社會關系人，靠自己悶頭苦學很難有這樣的效果 。
善用工具
這里專指記錄，輸出類工具，例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可，因此需要在記錄，總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋，并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到，你的每一個需求設計經過一次復盤后都有可能發現新的問題，思慮不足的點或者仍然未解決的痛點等，當然也很可能發現能持續復用的思路、設計模塊等優質資源。
除了筆記類工具，公開分享甚至私人交流都可以作為復盤工具，在這個過程中你會回顧自己的設計流程和思考過程，并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后，嘗試著與身邊的工具人同事溝通，嘗試在設計小組內分享，在籌備分享與交流思路時，對于該需求的設計思路便躍然而紙上了。
被動思考階段
被動思考階段有兩個核心特征，這里的被動不是指傾向性，而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。
第一個特征，即達到在主動思考的基礎上，持續積累和迭代知識庫的信息，然后將設計規范，典型范式，通用經驗思考模型等內化后的階段。
何謂內化，抓起超燙的茶杯會自動放開手，反應速度不會超過零點幾秒，這就是人自我保護機制的內化，即整個過程已經不需要刻意去思考和醞釀，而是在無意識的過程中自發的做出反應，完成系統的思考并形成一個規范的方案建議。
與主動思考階段相比，主要差別在于對已有能力的使用熟練度，調用效率，及思考的全局性。
說的通俗些，遇到一個設計問題時，處于主動思考階段的設計師會在遇到設計問題后，從過往經驗，相似解決問題的思路中篩選，尋找一個合適的解，這些解是零散的，且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講，若是面對一個較為熟悉的設計問題，如一個彈窗設計，此時該設計的解答方案會自然而然的出現在腦海，并且存在多個方案進行對比，并且每個方案都完整全面，從業務的考量到體驗的權衡，再到業務與體驗的相互平衡。方案如何推進，按照經驗會遇到哪些阻力，需要說服哪些利益相關者，案例如何演示，有否有設計還原類風險？如何解決等等。
因此，處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程，從輸出設計到推動方案落地一氣呵成，宛若天成。在沒有一定思考和實踐經驗積累的情況下，主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上，期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。
第二個特征則是視野與維度，視野也就是常掛在我們口中的全鏈路視野，維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解，
案例1微信紅包早期推廣的案例
微信紅包作為微信的一個核心功能，初期花費大量成本推廣并成為一個現象級“產品”，作為產品設計師，底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力，他們只需要將自己負責的需求完成，輸出達標的基礎方案，可能會聚焦于如何設計紅包樣式更易于理解，如何設計紅包樣式能賦予其可供性，幫助用戶快速理解產品與現實中的紅包的映射關系，在進一步可能要考慮不同年齡階層對紅包樣式的接受度，而交互設計師可能要考慮如何縮短用戶路徑，使紅包開啟的愉悅感能夠最的被用戶觸達。
而此時產品負責人是如何考慮該紅包功能設計的？答案是通過微信病毒式傳播，的綁定銀行卡，為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異，同一個產品，不同的崗位不同的身份，不同階段的設計師看到的會是不同的維度視角，更高的維度往往意味著更長遠的考慮，意味著碾壓式的決策?！盀橹Ц稑I務奠基”與“糾結紅包是否要帶花紋”相比，維度視野的差距，高下立判。
案例2與設計團隊負責人評審 Logo方案
上圖是該提案的部分PPT，在一次品牌LOGO提案的評審過程中，我花費較多的精力去宣講Logo的品牌理念和故事，分析圖形的演化過程，同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。
第一點，在設計過程中不要過早的給圖形設計融入顏色，顏色是第二層信息會干擾設計過程，當然也會干擾需求方的理解過程。一次只闡述一件事情，設計圖形，講解圖形就使用灰度模式。
第二點，給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路，而需要給企業級Boss過稿時則切記簡化一切過程，開門見山，直接鋪陳LOGO圖形，對不同利益相關者采用不同的策略。
第三點，該品牌LOGO的單獨設計輸出物看起來不錯，但需要置于我們跨國的多個產品品牌構成的總的品牌體系中，判斷其品牌一致性等問題，一致的產品品牌效果不僅能闡釋品牌歸屬，同時也能很大程度上降低推廣成本。作為設計師，既要細化到每一像素，又要高屋建瓴從全局層面考慮問題。
當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時，這有可能就是維度的差異。
資源3：周陟 《設計師如何解決全過程問題》
周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架，結合業務的思考，市場趨勢、歷史數據對比分析，定義核心設計問題并探索設計方案的過程。
其中即有低維度的設計師底層能力方面的闡述，如從產品用戶體驗五個層面的設計思考（戰略層、范圍層、結構層、框架層、視覺層）到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角，全覽產品各個階段的場景及問題，并在對比分析中聚焦核心問題，探索方案去持續解決。
我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段，你可以把他置于他所熟悉的設計領域，他將會輸出高質量的設計物，能夠較好的解決當前遇到的設計問題，體驗問題。
而一個被動思考階段的設計師，你可以把他置于有一定相關性的各個設計領域（比如互聯網方向的設計不能被置于廣告方向），他會在較短的時間內理解不同領域的特征和需求，并輸出高質量的解決方案，且能夠兼顧各個利益相關者，主動推動產品實現進度，并提前規避各類問題。這其中的差別在于，是否有自己沉淀的一套解決問題的方法和過程，是否將通用設計經驗系統化，是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師，還是一名高級體驗設計師，前者限制在一個領域內，后者已然破圈。
如何從主動思考階段跨越到被動思考階段
在體驗設計的領域，主動思考階段的設計師與被動思考階段的設計師，在單純的設計能力上，其實沒有太大的差距，即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案，解決大部分體驗類問題。那么關鍵差距提現在哪里？
其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題，并陷入陷阱，然后持續的糾正方案，一步步推進，踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路，多個方案已經擺在那里，而設計師只需要去考慮低維到高維的一系列影響因素，從基礎體驗，用戶習慣，再到業務和戰略上的布局，最終選擇全局視野下最正確的方案。
第二點差距在于可能性，被動思考階段的設計師有精力和能力去思考如何把方案做到超標準，超出需求本身的要求，超出利益相關者的期待（如需求方和開發人員）。我們經常會講行業標準這個詞，作為一個設計方案的基礎判斷標準，但行業標準永遠不是上限。微信的撤回功能，從僅撤回到撤回后可編輯就是一次體驗上的超標方案。
第三點則是打通上下游的能力，即涉及到上游的需求理解與轉化，詳細的設計項目還會涉及到用研類信息的接受與轉化，下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下，被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。
想要從主動思考階段跨越到被動思考階段，我總結以下三個建議。
從輸入到梳理
首先是核心的底層設計能力方面，表面上是基礎能力與通用能力的的刻意學習鍛煉，而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中，一些典型的設計過程，流程，針對某個領域甚至模塊的典型解決方案，將其拆解匯總然后梳理分類，不論使用印象筆記等筆記產品，還是思維導圖等腦圖類產品，都能夠幫你實現這個目的。
忍受立即獲得解決方案的誘惑
其次，在真正開始做項目時，主動思考，刻意將個人知識庫梳理的信息與項目需求進行對照，主動回憶和驗證積累的方案，盡可能多的羅列場景，羅列可能性，不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后，會第一時間想到的方案往往是最普通，未經思考的初步方案，但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離，進一步思考，并大量的舉例、演繹，探索更多機會點，調動腦海中更多可能性的方案。每當想要就此停下時，反問自己，我能否做的更好，是否有更好的方案可以解決這個問題。
視野和維度來源于廣泛閱讀、案例、及復盤
被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構，而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力，相較于普通設計師，他們往往有更高的思考維度，全局性的設計視野，此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入，然后復盤并沉淀為自己的經驗。
因此這要求設計師廣泛的閱讀各類設計項目總結，參考實際案例，并在真實的項目中持續計劃、嘗試、驗證，然后復盤。需要脫離設計師基礎能力層面的視野，更多的關注解決問題的思路與流程，最終掌握的設計思路或能力可以稱之為通用性設計解決能力。
當然，上面所講的都是我從個人思考方式的轉變中總結出來的經驗，其目的是分享設計師應該如何思考？不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題，而不是在講設計師如何從初級進階到高級，進階到體驗專家（非設計師位階的進階）。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求，比如設計leader可能更傾向于業務的理解與把控度，設計推進，研發流程中不同團隊成員間的溝通合作等能力 。
如果有關于此的疑問，我只能以我的理解解答，不論是什么位置的設計師，判斷其位置層次的標準必然是由上層的企業來制定的，而企業制定規則的出發點源于利益本身，換言之，你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關，所以我們很容易理解，設計師的職業后期或者用于解決超級復雜的設計問題， 以對應的價值映襯其收入，偏具體設計能力層面，或者用于承擔全局性企業需求，如帶領設計團隊支撐某個業務線，偏業務理解和統籌方面。
從線性流程到循環往復的迭代過程
我們回顧一個努力的設計打工仔的職業生涯，首先，一個新手設計師從純粹執行的無思考階段，進階到主動思考階段，當他的基礎設計能力不斷進階后，開始拓展視野，思考業務，并在大量的項目鍛煉中形成自己的一套成熟的設計方法論，從設計思考流程到具體的設計流程，從而進階到被動思考階段。但這是一個理想化的描述，真實情況是，設計師會在這三個階段中循環往復，而甚至有些設計師可能會在前兩個階段循環往復。
人都有惰性，你我都如此。在主動設計思考階段，因為一次小長假，因為種種原因，我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事，也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨，這是設計師需要警惕的問題，因為這個行業就是如此，我們只能變化，只能持續不斷的學習。
而當將經驗與成體系的思考范式內化后，設計師會養成核心的通用設計解決問題的能力。此時，設計師期去接觸一個新的領域，不再需要從0開始，而是可以使用自己積累的通用設計能力，來指導和規范化新的設計領域的需求，并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。
從主動思考，到經驗內化，不斷脫離舒適區，納入新的設計領域、新的視野維度，在這個過程中使個人的通用設計能力螺旋進步。
最佳啟動：消滅設計的不確定性
我知道，我的讀者中有很大一批人都處于設計能力良莠不齊，沒有系統的設計思路與設計流程，介于初中級設計師之間的狀態。而當今國內的設計領域也是如此，初中級別的設計師完全飽和，而企業對高級體驗設計師又求而不得，這種人才斷層既有培訓爆火下的積弊，也和設計門檻與崗位收益相關，大環境無法改變，能改變的只有自身。
在這里，我總結一個更簡單的設計思路，只要你按照該方法去執行和反思，應該會有很大的收獲。即從今天開始，對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性?，F在停下來詢問自己，你接到的每個需求，對于你輸出的設計結果，你認為其最終效果是確定的嗎？換言之，你認為你的設計真的解決了該需求的問題了嗎？
你只需要把你個需求設計的思考分為設計前和設計后。
設計前請思考，我如何設計這個需求能確定以及肯定的解決這個問題，沒思考清楚前不要動手設計，想到第一個方案后也不要動手設計，繼續思考，延遲設計決策。
如果你乍一想到的方案自己都認為模棱兩可，那不要執行設計。此時發揮主觀能動性去思考，我如何能夠獲得相關信息，來輔助我做出這個設計決策，我需要去參考一些競品？我需要列出目前存在的疑問點，或者我無法解決的問題點去詢問設計專家設計leader？或者我把場景，整體的體驗流、用戶操作流都列出來，然后繼續埋頭探索方案？
千萬千萬不要在方案還沒想清楚前就開始設計，這將輸出無意義的方案，且浪費大量時間，千萬千萬不要在想到第一個方案后立即開始設計，這將不會給你帶來任何進步，以后遇到相同場景你也僅有一個可選方案，千萬千萬不要忽略競品忽略他人閉門造車。
千萬千萬試著思考盡可能多的方案，乃至輸出多個方案（僅指體驗設計類，而不是視覺設計）。作為體驗設計師，必須鍛煉的技能是方案演繹能力，在腦海中演繹可能的方案，如果有精力則可以借助工具甚至把演繹過程記錄輸出。 如下方我進行的一個需求的方案演繹與思考。
設計前保證方案確定性，第一關要能夠經受自己的邏輯考驗，當你探索多個方案后最終確定了一個符合業務場景，同時體驗良好的方案，作為設計師自己給該方案打上一個“確定”的標簽，此時再去執行并輸出，而這過程中的思路，從糾結到決策都是最終設計輸出的關鍵證明，既能提高設計說服力，又能鍛煉個人能力，而這正是初級設計師容易忽略的部分。
設計后的確定性則是指，產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性，確保開發還原的線上效果與設計一致，這不僅僅要靠開發的努力，更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節，不論是預先根據業務指標設定埋點，還是設計師通過各種途徑獲得用戶反饋，最終都要保證你所設計的產品體驗的確定性是達標的，確定解決了需求提到的問題，確定能滿足用戶需求。若沒有，則重復這個過程，重新思考然后設計。
作為設計師，應該理解自己也能作為設計對象。在我看來，設計師就是遇到一個問題解決一個問題，遇到兩個解決兩個，直到面前再也沒有問題。所以當不清楚自己該如何設計，下一步該如何做時？你只需要思考，把解決當前的迷惑作為一個需求，去思考，深入思考，列出所有可能性，不管是百度還是詢問同事查閱資料，總歸在思考后，你會有所收獲。
結語
最后，我們一直在思考，在定義，到底什么是設計？
我自己一直遵循的理念是——設計解決問題，形式追隨功能。
而有人說設計是做選擇（決策），有人說設計是永遠做正確的事情。
事實上這些說法都有其正確性，也都有各自的評價標準，因為場景，趨勢，市場各種因素都在發展變化， 設計最終要兼顧場景兼顧各種利益相關者，在正確的時間做正確的選擇并最終做到正確的事情。
解決問題有多個方案 ，設計師需要在其中做出抉擇，選擇最佳方案，最佳方案如何判斷的？對當下場景，對主流用戶，對更多利益相關者來講是更正確的選擇。那它就是最終方案。
當設計被置于真實的環境，真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流，唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路，并幫助設計師讓世界變的更美好。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
降本增效一直是為B端賦能的首要宗旨，那么我們該如何從設設層面為用戶提高表單錄入的效率呢？
什么是表單頁
表單都是界面中最 常見、最 重要 的組件之一，屬于 數據錄入 板塊。
表單是2B產品“管理”的第一步。軟件/系統/平臺本身是沒有信息的，像是一個空的架子，表單是用戶向系統輸入信息的一種非常重要的手段，只有用戶向系統添加了豐富的信息，系統才能實現其價值。
表單是信息添加、錄入的通用形式；主要作用是負責數據采集，是最常用的信息錄入工具，隨著互聯網興起，特別是最近幾年B端的興起，表單的重要性顯得越來越突出。
表單的設計原則
- 充分考慮用戶填寫表單的目的，區分必填項和非必填項，刪減不必要的表單信息（例如：填寫了身份證就無需再填寫出生日期，因身份證信息內包含出生日期，系統自動識別即可），確定完表單內容。必要的時候對信息分組，表單項并非從上到下無序羅列，而是根據表單內容，按照一定的邏輯或者用戶熟悉的模式順序，對表單項進行排序和分組，才能讓用戶瀏覽和填寫流暢且。
準確- 信息表達要準確無誤，避免歧義，提示說明要合適，不要給正確的廢話，例如：填寫備注的提示用“請輸入備注”沒有意義，換成“不超過100字”更有助用戶對表單的理解。
一致- 組件的規范和操作的規范同樣重要。同一套系統同一個組件使用一個樣式即可，這樣才能保證頁面的視覺統一。同一個功能按鈕，在A頁面點擊給的彈窗，在B頁面也同樣要為彈窗。
易懂- 給予高質量的信息提示及反饋，如果需要輸入某種特殊格式，請給出具體要求（例如：密碼長度8-20位)；錯誤提示的時候要給用戶錯誤的具體內容（例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號格式錯誤，還是密碼長度錯誤）。
我們先看看表單主構成，表單主要由這5部分構成：
分組標題：表單項較多的情況下建議分組，分組標題有引導用戶完成表單填寫的作用。
表單標簽：也就是填寫或操作內容的標題。標簽規范的方式時標題后帶冒號，還是不帶冒號呢？這個其實都可以，沒有硬性的標準，自定義一個規范去執行就可以了。
表單域：表單是用來數據采集的容器，也可以視為一個對象。包含了文本框、多行文本框、密碼框、隱藏域、復選框、單選框、下拉選擇框和文件上傳等，用于采集用戶的輸入或選擇的數據。
提示信息：分為說明性提示信息和操作反饋提示。提示信息可以放在表單域里邊（例如：備注的提示“不超過100字”），也可以在表單域或后邊，還可以收進“問號icon”里，鼠標hover后給氣泡提示展示信息即可。
操作按鈕：操作按鈕為頁面的全局操作，為滿足用戶隨時對表單進行操作的需求，操作按鈕會懸浮在頁面底部。一般情況按鈕最多只有一個主按鈕，可以有多個次按鈕。
(1) 分類
左標簽：優勢-節約縱向空間，信息表達明確，多用于web端；劣勢-橫向空間利用率不高，不適用移動端等狹窄空間。
頂標簽：優勢-視覺舒適，節約橫向空間；劣勢-縱向空間利用率不高。
行內標簽：優勢-最節省空間，多用于注冊登錄等字段少的表單；劣勢-輸入時和輸入后標簽消失，令用戶迷茫（可優化為浮動標簽，在光標鍵入時，標簽展示輸入框上），字段多的表單不建議使用行內標簽及浮動標簽。
(2) 對齊方式
左對齊：從左至右的閱讀順序，符合人們的閱讀習慣，一般用于詳情的陳列。
右對齊：也被稱為“冒號對齊”，右對齊使得標簽和輸入之間的距離固定，有明確的視覺關聯，操作效率高，非常適合表單錄入。
表單域大致分為以下5個大類：輸入、內容選擇、日期時間選擇、數值范圍和上傳。
選擇適合的控件，不光能在視覺上做到統一規范，還能提高用戶操作效率。
(1) 輸入
文本框：選擇適合的大小，它的大小應該向用戶暗示所需輸入內容的長度，以此減輕判斷負擔（注意：文章類超長文本不適用于長文本輸入框，建議使用富文本編輯器）。
特定前/后綴：涉及到金額輸入時，當用戶輸入的金額超過千時，出現千分位最數據進行分組，方便用戶快速識別金額。
帶icon或按鈕：“日期選擇”和“時間選擇”一般都附帶icon，便于用戶快速識別。帶按鈕的表單項在“密碼輸入”用的最多，可做隱藏密碼和顯示密碼的切換用，因為盲輸及可能會出錯。
(2) 選擇
內容選擇：含單選、多選、選擇器（常用的有下拉單選/多選）、級聯選擇（多層級聯動選擇）、樹選擇、穿梭框、開關。
1、單選框、復選框：一般用于選項不多且相對固定的情況，選項控制在6個以內為宜，用戶可以一眼看到所有內容。單選框只能是其中一個選項，多選框則可以選擇其中一個或多個選項。
2、開關：使用開關控件的條件是選項的性質互斥（例如：是和否、打開和關閉、開啟和禁用等）；
3、選擇器：當選擇項超6個，就需要考慮用到選擇器了。下拉列表是網頁中一種最省頁面空間的選擇方式，單擊下拉按鈕后能看到最多展示的8個選項，少于8個則顯示實際個數自適應，多余8個則出現滾動條。下拉選擇器根據屏幕位置決定向下展示或者向上展示。
選擇器適用廣泛，同類選項（例如：選擇客戶、商品名稱、貨物編號等）、增量選項（例如：年份選擇）。
4、級聯選擇、樹選擇：二者都屬層級選擇，區別在于級聯選好選項后框內顯示的是含層級的內容選項，且只能選擇需最子集選項（例如：江蘇省/蘇州市/工業園區，不能選擇江蘇省，因為前面的選項只為導航至最子集），而樹選擇框內展示的是單個選項的內容，不展示層級，但可以選擇任何層級（例如下圖：浙江?。?
日期及時間選擇：分為日期選擇、時間選擇、日期時間選擇，可以是單個時間，也可以是時間區間；他們很特殊，只為日期和時間選項而生。
1、日期、時間選擇：當用戶需要一個時間/日期，可以點擊標準輸入框，彈出選擇面板進行選擇，或者輸入時間后自動定位到該選項，無需手動選擇。
2、日期時間選擇：相當于將日期和時間這兩個選擇項集為一身，在同一個選擇器里選擇（年月日時分秒）；下例相當于兩個下拉框切換使用，步驟1先彈出日期選擇框選擇年月日，選擇好日期后點擊“確定按鈕”旁邊的“選擇時間”，則切換為步驟2的時間選擇框。
數值范圍：
1、滑動輸入器：滑動型輸入器，展示當前值和可選范圍，通過拖動滑塊在一個固定區間內進行選擇。
2、步進器：也稱為計數器，僅允許輸入自定義范圍內標準的數字值，當自定義標準數字值為整數時，輸入小數點后回車，帶小數點的數字只保留整數呈現。上下按鈕也不是每點擊一次數值±1，可以設置跳每點擊一次±N，N可以為任何數字，也可以為小數。
(3) 上傳
文件、圖片上傳：第一種情況是上傳圖片和文件合在一個上傳控件里；第二種情況是區分了圖片上傳和除了圖片之外的其他文件的上傳，這種情況下的圖片成功上傳后是有縮略圖的；根據需求選擇其中一種即可。要注意的是上傳有四種狀態：上傳前、上傳中、上傳后的成功狀態、上傳后的失敗狀態，UI都需要設計出來，一個都不能少。
(1) 占位符
占位符就是先占據一個固定的位置，等著用戶往里面添加內容的符號或文字。在鍵入信息前，出現在輸入框和下拉框里的提示信息就是占位符。占位符需要注意的是，要避免使用“正確的廢話”，因為給不到用戶任何提示幫助，如果表單項沒有制定規則，可用表單項編輯方式占位“請輸入”/“請選擇”，以新增商品為案例：
(2) 幫助信息
幫助信息和占位符類似，也是在輸入編輯前給用戶的提示信息。和占位符不同點在于“幫助信息”不占據輸入編輯的位置，不會因為鍵入信息后消失，屬于表單中的常駐信息。三種方式可以同時運用在一套系統內，視當前表單情況選定。
(3) 校驗信息
校驗信息是在輸入后或者提交后，系統對編輯的信息進行的校驗，分為前端校驗和后端校驗兩種。
前端校驗：一般校驗顯示錯誤和格式錯誤：必填項、（郵箱、電話號、地址）格式、密碼強度等。快速反饋，直接提醒用戶錯誤內容，讓用戶及時知曉并更改。
后端校驗：唯一性驗證、驗證碼、敏感詞等，觸發校驗請求后系統會去數據庫查詢校驗信息，再給予用戶相應的反饋。
(1) 分布的位置
表單頂部、表單底部：用于放置全局按鈕，兩個位置的功能按鈕是一樣的，只是出現的條件不同。默認顯示表單頂部按鈕，當頂部按鈕因為頁面上滑被遮蓋了，底部按鈕才懸浮在窗口底部。目的在于用戶無需上下滑動到固定位置才能對表單進行操作，省時增效。
跟隨表單項：這種情況很少用到，一般是需要校驗的情況下使用，或者可手動增減的表單項。
分組底部：一般是對于這個分組進行的操作按鈕。
溫馨提示：當操作按鈕超三個時，可以將相對低頻的操作按鈕折疊收起，點擊或鼠標hover“更多操作”時下拉展開顯示所有按鈕。
(2) 閱讀順序、按鈕層級、對齊方式
其實這三者的規則都是一樣的，當按鈕右對齊頁面的時候，閱讀順序自然是從右向左，而按鈕層級也是從右向左遞減，比如頂部的提交、保存、取消三個按鈕；商品列表的“添加商品”和“刪除全部商品”，左對齊頁面，閱讀順序和層級自然也是從左至右。
表單頁面主要的交互方式有四種：原位編輯、氣泡卡片、彈窗/抽屜、頁面跳轉。表單頁面在交互方式的選擇取決于表單容量及表單親密度。
原位編輯是輕量型信息采集表單，適用于表單編輯項較少（盡量低于5個編輯項），且屬于主功能分支的場景。其優點在于操作便捷，隨時啟用與退出，能夠保證用戶對主要功能的操作流暢度。其存在的意義在于完善或者增強主功能的操作，而不是打斷。
使用場景：常用于列表及卡片，詳情內也可以使用原位編輯（例如：詳情內只有A和B可以編輯，且需分別編輯，此時建議用原位編輯進行操作），需要注意的是，盡量不要用在長文本編輯。
激活方式：信息展示區域通過雙擊、單擊、hover或點擊“編輯”按鈕即變為激活編輯狀態。最常見的比如：微信/企業微信修改群名就是單擊激活，列表、表格的點擊“編輯”激活，相比之下hover去激活相對用的少。
與頁面的親密度：親密度高，編輯內容即為展示內容，當編輯內容不止表格內展示的字段數量，且存在聯動關系時，需慎重（例如：“部門”和“班次”屬于上下級聯動關系，列表內只顯示“部門”，而“班次”在詳情頁面顯示，則不適用原位編輯）。
使用場景：常用于條件篩選的設置，點擊或hover后顯示氣泡卡片內容（建議不超過5個設置項）。觸發生效機制可以是設置項點擊即生效，也可以多個設置項選擇后，觸發操作按鈕生效（操作按鈕建議不超過2個），觸發機制可以根據項目實際需求而定。
與頁面的親密度：親密度高，所見即所得，編輯前/后都不遮擋列表，用戶剛剛操做了什么，即在當前展示操作后的結果，讓用戶感受到一切都在掌握之中，不會出現斷裂感，交互很友好；
(1) 彈窗
雖說設計上對彈窗的使用都是持謹慎態度的，但希望大家也不要談彈窗就色變。彈窗的好處在于讓用戶更聚焦，且不用離開當前頁面就能更快速更容易完成任務。
其實該使用彈窗的時候也是要用的，特別是在B端，如果彈窗能解決的問題，不建議頻繁的跳頁面去操作。如下例：下單錄入涉及添加產品，而產品信息字段又很多，不是一個模糊搜索就能解決的，此時建議使用彈窗而不是跳頁面去操作。來回跳頁面頻繁刷新，不如用彈窗選擇操作更為簡單，在當前頁的彈窗選擇產品，再將產品信息帶入當前錄入頁面，此流程更符合用戶操作時的心理預期。
使用場景：所有頁面均可，3個以上的錄入項即可使用彈窗；需要注意保持交互一致性（例如：在列表“新增會員”點擊觸發是彈窗，在其他頁面也同樣要是彈窗）；當然也有特殊情況，例如：快捷新增時只需錄入一個名稱，可以先使用快捷操作添加極少的信息，后續在編輯頁面進行補充；
與頁面的親密度：可以有強關聯，也可以沒有關聯。有強關聯指的是，比如說：點擊“新增會員”按鈕彈出來的此彈窗，在其他也要用這個“新增會員”名稱，避免用戶迷茫（當然了，很多新增和編輯其實用的同一個彈窗，這個特殊情況除外）。沒有關聯是指，可以在列表頁面使用“新增會員”彈窗，也可以在工作臺或者其他有需求的頁面去使用“新增會員”彈窗。
(2) 抽屜
抽屜彈窗也被稱為側彈窗，彈窗抽屜和彈窗很類似，使用場景和親密度都是一樣的。相比彈窗，抽屜的側邊彈出的交互方式，其操作成本和用戶使用心理負擔會小很多。
注意事項：如果系統大部分用的彈窗，就優先選用彈窗，如果表單內增加了更多字段，可以換成抽屜彈窗；
使用場景：超出了彈窗/抽屜的承載量，就要用到頁面跳轉了，一般一級模塊的設置項也會用到頁面跳轉，因為會牽一發動全身。還有初始化入駐也需要跳轉頁面進行操作，不光因為需要提交大量信息，還因為各種認證審核需要一項一項進行，此時用抽屜和彈窗承載內容顯然不合適，因為彈窗和抽屜，代表著快速完成。
與頁面的親密度：跳轉了頁面，不管是新開頁面還是刷新原頁面，與原頁面的關聯性已經沒那么強了，只能說他們屬于同一條路徑下不同頁面。
根據內容的多少及親密程度來決定，我們設計時應選用哪種交互方式，或者可以直接根據內容承載量做判斷也是可以的，從少到多依次此為：氣泡卡片-原位編輯-彈窗-抽屜-頁面跳轉。
排版布局的方式有四種：平鋪、分組、標簽頁、分步驟。根據內容項的多少及實際需求相應合理的布局。
輸入信息的分類，是有效的減少用戶操作疲勞度的方法。分類的維度有多種，根據表單輸入內容的相關性、內容的所屬類別，可以將同類型的數據統一輸入，減少用戶輸入信息的跨度，提高輸入效率。
使用場景：平鋪顧名思義就是指表單項不做分組，全部平鋪展開，很多注冊和登錄都是這種布局。適用于表單項少，或者多但表單項之間親密性很強，就無需額外分組，直接將表單項平鋪開展示，簡單明了。
對于內容過多的表單輸入頁面，分組、分模塊的排版方式讓用戶感覺更友好，不是密密麻麻一大片，讓人喘不過氣來，而是有條理的布局，張弛有度，疏密有致。用戶可以在填寫好一段內容后進行心理上停頓休息，減少視覺疲勞和心理壓力。
(1) 標題分組
使用場景：超過了7個設置項，且較為復雜的表單，標題分組之間的關聯性較弱，就可以去分類歸納表單信息，位的是降低用戶的認知負擔，提高用戶體驗。注意：分組內組內設置項要有強關聯性，否則不能歸為一組，不能因為字段多，為了分組去分組。
(2) 卡片分組
使用場景：7-15個設置項，用標題分組不足以給信息做層級區分，為了讓用戶在操作時更聚焦，也需要給用戶更明確的操作引導，即可使用卡片分組。
卡片分組之間關聯性更弱，分類更明確，多個設置項，多個分類。需要注意，一個表單項不要分過多的卡片分組，不能每兩項做一個分組，這反而會造成用戶視覺壓力和操作負擔。
使用場景：當標題分組和卡片分組都不足以對表單進行分組時，就可以考慮用tab切換了。每個設置都包含多個錄入，且使用了標簽。
注意事項：tab標簽的填寫沒有先后順序的規則，標簽頁彼此之間沒有特定的關聯性，可獨立去設置。也就是說先填寫tab1還是先填寫tab2，對表單的其他tab項沒有任何影響，不存在聯動關系。
標簽頁對應的詳情展示：一項一項上下鋪出來，但如果表單詳情信息過長，可以考慮將錨點定位，點擊錨點定位的標題即可自動定位到該區域，方便用戶快速定位瀏覽位置。
使用場景：對輸入表單進行分步驟的處理，可以降低用戶的操作頻率，給與用戶一定的休息空間，用戶會有階段性的成就感，同時分步驟的輸入還有利于減少信息的錯誤率。如果輸入表單的內容較多，同時輸入內容有邏輯上的先后順序，此時可以考慮將輸入表單進行分步驟處理。
利用步驟條，將大型、復雜任務拆解為多個部分，并按照相關性分組，可以提高用戶處理的專注度，降低頁面的復雜性，減輕用戶操作負擔，降低用戶出錯率，提高用戶體驗。
根據內容關聯性的強弱程度來決定，我們設計時應選用哪種布局方式，或者可以直接根據復雜程度做選擇也是可以的，從弱到強依次此為：平鋪-標題分組-卡片分組-標簽頁/分步驟轉。
提高易用性的方式有以下四種分別為：視覺清晰、信息降噪、智能、準確易懂，每個表單，每個頁面都要應用這四項準則，不光是在表單頁面，所有頁面都適用。
布局方式-單列布局：常見的表單布局為單列信息展示布局，比如：蘋果、飛書、釘釘、有贊、微盟等首選使用單列布局進行頁面排版。設計中盡量采用單列布局，是為保證用戶的視覺動線流暢，不容易遺漏信息；
在輸入項較多時，每次填寫完一項都要鼠標選中下一個輸入框，很容易讓用戶失去耐心，而單列布局恰好能解決這個問題并提高用戶體驗，輸入完一項按enter鍵可快速切換至下一項，提高用戶操作效率。
當然了按Tab鍵也是一樣的效果，只是，一般情況下，大眾都更習慣也更熟悉回車鍵的位置，需要注意的是，長文本輸入框的屬性里回車鍵是文本換行的意思，需要區別設置兩者的操作機制。
布局方式-橫向布局：橫向布局也是單列布局，是它的發散版本。如果出于業務方復雜需求的考慮，必須在橫向增加內容，那增加的表單項一定要和前表單項有關聯，才可作為分組橫向排列，還需注意不能出現Y軸平行豎向分組（如下圖），避免用戶迷?；蜻z漏信。
(1) 合理設置必填項
正常情況下，我們標示“*”標就是為了提示用戶此項必須要填寫方能提交單據。
但當一個編輯頁面的必填項非常多時，就可以無需標注必填，只標明哪些是非必填項就行。
當編輯頁全部都是必填項時，可在大標題處用標示必填即可。
(2) 折疊不重要非必填信息
在能完整獲取需要信息的前提下，輸入項越少越好，當表單頁很長，且有些信息非必填，或者說填寫后的意義不大。這樣的情況下可以考慮將非必要信息折疊收起，點擊“展示更多”下拉展開全部表單項，讓用戶可以選擇性錄入不重要的信息。
(1) 智能填寫
根據上下文信息可自動獲取的，無需用戶再次填寫。如下例：通過客戶名稱數據庫可自動匹配客戶手機號，或者通過手機號匹配客戶名稱。填寫郵寄信息的時候，只需選擇省市區，郵政編碼便自動填充，減少了用戶查找郵政編碼的繁瑣（甚至可以提議“郵政編碼”字段直接去掉）。而生日和性別都可以在身份證號內提取。
(2) 智能排序
默認高頻：當選擇器內容超過5個選則項時，可以對內容選項進行一定排序規則（首字母排序、數字排序或設置默認高頻選項等），方面用戶提前預知選項的大致位置，檢索找到相應的選項。
(3) 智能聯想
智能聯想是給予用戶鍵入字段的聯想功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
自動搜索：當下拉選項超過16個時，建議加入輸入選擇功能，用戶可使用下拉選擇，也可以輸入關鍵字后智能匹配顯示對應的選項?；蛘呖梢栽偌由闲畔⑴判颍鶕c擊頻次進行排序，高頻選項前置。
后綴聯想：一般用于郵箱信息的錄入，當輸入內容后，自動將默認高頻的郵箱后綴作為補充數據填充在后方，減少用戶的輸入。
操作直觀：去除冗余且無用的部件：切換“開關”操作后會立即生效展示結果，無需與操作按鈕搭配使用，避免造成用戶的誤解，導致體驗不友好。
準確的錯誤提示：反饋提示是頁面系統對用戶的輸入的內容進行的校驗，并對校驗結果予以展示的提示形式。可分為前端校驗和后端校驗兩種。
錯誤提示的時候要給用戶錯誤的具體內容，而非簡單粗暴的錯誤提示。例如：登錄時不能單純去提示“您輸入的信息有誤”，需準確提示是賬號信息錯誤，還是密碼校驗錯誤。
前端校驗：也被稱為“即時校驗”，一般是校驗顯現的數據內容，比如字符長度、格式（是否包含非法字符）、是否為空等。該方式的校驗條件多在本地，無需實時向服務器發命令而得到反饋。
后端校驗：包含“局部校驗”和“全局校驗”，局部校驗：在注冊賬號時，輸入完整用戶名以后，提示用戶名是否可用，則為局部校驗反饋。全局校驗反饋：多指在輸入完成提交或者階段性完成（分步驟跳轉下一步）時，系統給出的校驗反饋。在用戶操作反饋動作按鈕后，界面在相應位置（一般為單個輸入框的下方或右側）一次性給出對應的錯誤提示。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020 年，新冠疫情席卷全球，后疫情時代的需求也促使設計師們不斷提出更有意義的醫療解決方案。作者梳理了醫療保健類 APP 的類型，從產品的研究、功能特性、導航、顏色等角度提出了針對醫療保健 APP 的一系列設計建議，簡單直觀的界面、便捷的功能，以及積極的情感，才能使用戶接受并喜歡原本 “令人生畏” 的醫療產品。
△ Justas Galaburda 繪制的插畫
在移動應用市場中，的應用類別是 “游戲”，而 “健康與健身” 類勉強躋身前十名。2020 年是十分艱難的一年，但也創造了很多機會，例如，移動應用市場中醫療行業的產品大熱，受到多方關注，這類產品直接影響人們的健康行為，可以使人們的生活更加輕松愉快。
為此，大批創業人士開始關注醫療這一領域。首先，你需要制作一個功能強大的 APP，因為如果一款產品不能交付使用的話，它就一文不值。但是，這種功能必須通過設計能力來呈現。一個好的醫療保健 APP 設計，應突出其最重要的細節，引導用戶進行操作，并提出下一步建議，從而產生必要的行動。APP 本身可以成為有效的潛在客戶開發工具和公司的主要產品。對于一個健康或醫學相關的產品來說，用戶界面或用戶體驗設計尤為重要。
△ George Frigo 設計的呼吸檢測 APP
本文將探討一些醫療保建 APP 設計的成功案例和經驗，這對設計師和企業來說都很有幫助。
值得注意的是，“醫療保健類 APP” 是一個綜合性概念，涵蓋了許多與健康和醫學相關的數字產品。
醫療保健 APP 類型很多，包括但不限于：
這似乎是一個相當寬泛的主題（例如，卡路里計數 APP 和醫學教育解決方案相差甚遠，卻都屬于這個領域）。但是，有一些通用的設計方案，可以提高任何一款 mHealth APP 的易用性。（ mHealth（Mobile Health，移動醫療或移動健康）：通過移動設備提供與醫療相關的服務，例如，通過 PDA、移動電話和衛星通信來提供醫療信息和醫療服務等。）
△Victor Nikitin 的醫療類 APP
一款 APP，即使它不是企業的主要產品，也可能具有巨大的價值。例如，用于醫療工作的配套 APP，能夠為客戶提供信息和服務，從而減輕員工的負擔。如果一款醫療保健類 APP 是企業的主要產品（例如，健身或冥想 APP），因為沒有硬核的業務場景支持，會有很大的風險。有時，這類 APP 設計中的不足會導致用戶完全放棄使用它。
為了避免這種情況，我們來看看設計醫療保健 APP 的 12 個要點，以及它們如何幫助設計師們設計出更具針對性、更直觀、更的 APP。
△ Anatoly 設計的 Healthcare APP
1. 研究 – 成功的第一步
在制作 APP 界面原型之前，你需要了解產品的目標受眾是誰，他們的地理分布、社會人口特征以及心理特征是什么。因為沒有一種產品可以滿足所有人的需求。用戶的興趣和能力決定了他們如何與 APP 進行交互。因此，回答以下問題將對你有所幫助：
一般來說，患者和醫生都會使用醫療保健類 APP（假設我們將生活方式類 APP 的用戶也視為患者）。這兩類用戶在功能和 UI 設計方面有不同的需求。
醫務人員通常需要快速找到一些數據項，例如 EHR / EMR、藥物規格、診斷和治療建議、參考材料等。但是，患者希望能與盡可能少的信息進行交互，且這些信息應該簡單易懂。因為這類用戶中有很多是老年人，或是存在某些障礙的人。
只有在進行適當的用戶研究，并得出相應結論后，設計師才可以著手進行醫療保健類 APP 的設計。
△ Chahua 設計的健康管理 APP
2. 每一個案例都簡潔明了
對于一般人來說，醫學是一門復雜的學科。所以在設計醫療保健類 APP 時，請盡可能地讓它們保持簡單，這有助于讓用戶平靜下來，并保持專注。
“復雜性是你的敵人。很多傻瓜都可以讓事情變復雜，而讓事情變簡單是很困難的。” — 理查德·布蘭森
為了讓醫療類 APP 看起來很重要并給人留下深刻印象，而將其界面做得過于詳細，是沒有意義的。即使該產品是為醫務人員設計的，也最好 讓界面和邏輯易于理解。
△ lgor Savelev 設計的醫療類 APP
在設計醫療保健類 APP 的用戶界面時，請提供有意義的用戶引導，并 使界面直觀易懂。否則，用戶可能會在觸達該應用核心內容之前就對其體驗感到沮喪。
如果該 APP 清晰明了，醫生及患者雙方都更容易接受。這樣一來，用戶易于學習上手。即使它是針對醫療的解決方案，人們也不會感到不習慣。
為幫助用戶在比較舒適的節奏下了解產品功能，請使用漸進呈現的原則，逐步為用戶提供指示。從新手指引開始，將應用程序中的每個操作分成可管理的小模塊，每次僅提供一個指引。（漸進呈現（progressive disclosure）：每次只展示用戶當前需要的信息，引導人們平緩地由簡單狀態進入復雜狀態。例如將原本復雜的邏輯隱藏起來，通過更易于認知的界面形式幫助人們輕松完成最為基礎的任務。）
另外，采用被動輸入、自動輸入、調整鍵盤和動態驗證字段的方式，能夠限制用戶必須輸入的信息量。
所有醫療信息必須由受過相關教育且具備專業知識的專家提供。否則，內容要么不完整，要么包含錯誤，對于醫療產品來說是不可接受的。
△ yurig 為醫生設計的醫療類 APP
3. 功能和特性
醫療保健類 APP 的 功能及特性取決于其用途和目標受眾。例如，醫療中心 APP 需為用戶提供個人帳戶，在該帳戶中，用戶可查看其就診記錄、就診建議以及預約情況。如果沒有安全加密的視頻會議和通訊功能，遠程醫療 APP 將毫無意義。畢竟醫療類 APP 依賴的是可靠且有用的通知。
主頁承載著一個 APP 的主要功能。請試著回答這個問題：用戶為什么使用你的 APP？或與之類似的 APP 呢？如果用戶訪問 APP 是為了記錄或接收某些信息，或是聯系醫生，查看他們的進程等，那么這個功能應該位于 APP 的主頁。
重要的是，正如前文所提到的，避免一次性出現太多功能，從而造成混亂。不可否認的是，這種情況經常發生在老版本的 APP 上。這些 APP 常常不斷添加新功能，偏離焦點，以至于只有專家用戶才能理解它。
（專家用戶（super-users）：專家用戶在生活中愿意給予企業反饋，主動做口碑，或是積極分享、點贊等，這些無法以價錢衡量，卻能在品牌價值傳遞、產品創新、營銷推廣等經營各環節，為企業帶來實質貢獻。）
根據帕累托原理（二八法則），80％ 的用戶傾向于使用不超過 20％ 的功能。因此，務必確認哪些功能對用戶來說是最重要的。
（帕累托原理（ Pareto’s principle）：也稱二八法則。在任何特定群體中，重要的因子通常只占少數，因此控制具有重要性的少數因子，即可控制全局。）
△ Manoj Dalvadi 設計的 Medicine APP
4. 便于探索與享受的導航
清晰的導航結構是一個有效的醫療保健類 APP 的必要條件，也是醫療保健類 APP 用戶界面設計的基礎。沒有清晰的導航，APP 是不會被廣泛使用的。完善的導航意味著率和易用性，這對用戶來說是十分有價值的。醫療專業人士需要的是能夠快速開展工作的應用，因為他們花費了太多時間在處理電子健康檔案（EHR）上。一項由斯坦福醫學院展開的調查發現，醫生花費在每個病人身上的時間，有 62% 是用于處理電子健康檔案。如果針對醫務人員的 APP 不夠簡潔，那 APP 便失去了使用價值。同樣的，對于患者來說，他們也不會喜歡混亂的導航，即使當前的任務不是很重要。
重要的信息應放在明顯的位置，并在必要時提供詳情。根據 3 次點擊原則，系統應保證用戶在 3 次點擊之內，找到所需信息。
為了使 APP 導航結構清晰，可采用標準的 APP 導航組件，如漢堡菜單、標簽欄或抽屜式導航等。
△ Alex Samofalov 設計的醫療類 APP
一般來說，APP 的顏色選擇取決于目標受眾以及該 APP 的主題。
醫療保健類 APP 設計通常采用中性色調，尤其是冷色調的藍色和綠色，背景一般為 白色。設計師這樣做是為了達到以下效果：利用柔和的色彩和醫療保健行業的聯系，緩解用戶焦慮并增加可信度。因此，在醫療保健類 APP 的用戶界面中，亮紅色或黃色是很少見的。
△ Adam Soko?owski 設計的醫療類 APP — Pharmagy
但是，考慮到醫療類軟件的多功能性，顏色選擇并沒有特別的限制。主要思路是，這類 APP 的整體外觀應營造積極的印象，不應引起焦慮、恐懼或其他不良情緒。
例如，深色的健身 APP 看起來優雅且有品味：
△ Saepul Rohman 的 UI 設計—健康及鍛煉類 APP
而亮色為 APP 增添了許多活力：
△ Michal Parulski 設計的移動健身 APP
APP 的個性化定制是近年來最顯著的設計趨勢之一。特定的功能與特定的用戶模式相適應，并且系統會暗示用戶下一步可執行的操作，以免被用戶忽略。
這些技術的目標是，幫助用戶更快地利用 APP 解決問題。因此，有必要識別和分析用戶模式，并跟進他們的變化。
正如每個人都有著不同的健康狀況，用戶希望他們所使用的 APP 也能提供同樣獨特的體驗。除此之外，在非醫療保健行業，也有 33％ 的用戶會因個性化程度不足而卸載應用程序。
在設計醫療保健類 APP 時，可以使用許多自定義選項，如顏色主題、個性化通知、交互元素，以及利用 AI 定制個性化推薦等。
△ Jawad 設計的在線咨詢 APP
無障礙的 UI 設計對任何 APP 來說都很重要，對于醫療類 APP 尤為重要。
移動醫療解決方案針對的是不同年齡，具有不同視覺和聽覺能力、身體和心理特征的用戶。因此，醫療保健類 APP 主要功能的設計，應保證每個潛在用戶都能訪問。請考慮可能存在的限制，并努力克服它們的負面影響。例如，有暈動癥的人不會喜歡過多的動效。
但這并不意味著一個醫療保健類 APP 的界面中只能有兩種顏色，也并非所有文本字號都要非常大，但這確實意味著設計師將面臨一些挑戰。對于醫療保健類 APP 來說，其中的挑戰也許相對多一些。無障礙設計能帶來更多的機會，而不是負擔。試著從瀏覽 W3C 網頁中關于無障礙指南的內容開始，嘗試使用色盲模擬器，如下圖這種。
無需多言，試試移動端無障礙設計的常用方式：將主要元素的尺寸控制一個拇指大小的區域中、添加將視圖改為水平模式的選項，以及放大文本的選項等。
△ keithar 的對比度分析儀和色盲模擬器
醫學不僅復雜，而且通常令人生畏，即使涉及的醫學內容不多。一個比較聰明的辦法是使 APP 看起來與醫學毫不相干。這將消除用戶因刻板印象而產生的壓力，并使體驗更加愉悅。
除了使用柔和的顏色，還可以在用戶使用 APP 的不同階段 推送鼓舞人心的消息、有趣的圖片、歡快的語音或其他元素。醫療保健類 APP 用戶界面中的圖像和圖標，應始終帶給用戶積極、愉悅的情緒，并 營造一種無痛感和安全感。
△ Mahdieh Khalili 設計的冠狀病毒 APP
當產品已具備現成的網站，企業方甚至設計師為了降低制作成本，可能會想從產品的網頁版中 “借鑒” 一些解決方案直接應用在移動端設計中，這很可能導致用戶拒絕使用 APP。
用戶與移動設備間的交互不同于與電腦間的交互。移動設備的屏幕比顯示器屏幕或筆記本屏幕小。此外，用戶與移動設備交互的方式不同于在電腦上進行的操作。在移動設備上，我們做任何事情都依賴手指的移動，不愿意輸入冗長的文本，但同時希望系統能更快地工作。
一般來說，盡管 APP 中的導航也很重要，但對于移動設備而言，更需關注的是交互設計。在大多數情況下，人們喜歡使用網站來獲取信息，使用 APP 來完成任務。此外，APP 還集成了智能手機的功能，如加速度傳感器和攝像頭，這也是導致 APP 的用戶界面設計與 Web 版有所不同的原因。
△ Grace Saraswati 設計的健康健身類 APP
視覺吸引力與功能性之間的平衡是非常重要的。醫療保健類 APP 必須便捷，且不能分散用戶對內容的注意力。
圖形元素，包括動畫，應始終以滿足使用目的為前提，來考慮是否需要，如數據輸入，以及說明用戶與系統間的微交互等。不能僅僅因為它看起來不錯而添加。不要過度使用漸變和陰影，要將用戶注意力集中在主要信息上。字體也只需選擇一種，可以通過改變字號和其他特征（如斜體、粗體）來做區分。
使用簡單的配色方案可以更清晰地傳達品牌信息，并創造更好的導航效果。
△ Dibbendo Pranto 的健康及活動追蹤交互設計
你可能會在某些點上考慮，是否要借鑒一些競爭對手的成功案例。好吧，如果這有用的話……一方面，抄襲其他產品是不明智的，因為 它們的設計可能并不完善。你采納的可能是競爭對手的錯誤決策，以至于阻礙 APP 的未來發展。
另一方面，你應該先對其他應用進行分析，對競品進行研究。應該參考用戶以前使用其他 APP 的經歷，并進行借鑒，從而降低用戶的學習成本。添加太多創意會使 APP 顯得很煩人，用戶需要花大量時間去習慣并學習操作。為此，可以參考蘋果制定的人機交互指南（Human Interface Guidelines ）和谷歌制定的材料設計指南（ Material Design）。
“用戶大部分時間是花在別人家的網站上?！?— 雅各布定律
（雅各布定律：用戶在其他千千萬萬個網站中積累經驗，學會如何使用網站，當一個網站跟其他網站一致時，用戶會立刻知道該如何操作，但如果違反了雅各布定律，用戶會毫不猶豫地離開。）
必須根據品牌、服務和產品細節來進行設計。例如，健身類 APP 與醫學計算器有著很大區別。設計必須完全符合目標受眾的要求、APP 的功能細節及主題場景等。
△ Martyna Zielińska 的醫療提醒 APP
最后，重要的是要記住，每個設計師都有自己的觀點，認為這個或那個決定是合理或有效的。他們可能會對 APP 架構和導航的一致性，嚴謹的設計解決方案，以及產品的實用價值深信不疑，以至于忘記了測試。通過不斷的實踐，設計師提高了自己的共情能力，可以更好地理解用戶需求。但事實上，直覺和經驗帶來的潛在陷阱也會給應用帶來負面影響。
只有在分析用戶與 APP 界面交互的相關數據后，才能得出相對準確的結論。測試有助于及時獲得反饋，覆蓋 APP 中的所有行為場景，并檢查交互模式。
用戶的積極參與是成功的關鍵。相關測試受眾的年齡、職業、地理位置、性別、文化和宗教背景等要盡可能接近目標受眾，越接近越好。盡可能多地讓他們使用 APP 的主要功能并收集反饋。
△ Alex Samofalov 設計的患者卡片 APP
設計所關注的并不僅僅是顏色和字體，而是創造價值和解決業務問題的能力。健康是一個敏感且具有挑戰性的問題，需要特別注意。設計師們一直努力地在醫療類 APP 極高的安全性及可用性要求與界面美觀性之間取得平衡。
經過深思熟慮的醫療保健用戶體驗和 UI 設計是一種極好的工具，它能憑借簡單直觀的界面、便捷的功能以及它所帶來的積極情感等，吸引用戶參與體驗。
文章來源：優設網 作者：TCC翻譯情報局
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在互聯網公司中，運營Banner往往是由不同的運營團隊去完成，甚至在一些跨國企業，運營Banner是由不同國家的運營團隊完成的。那么如何保證大家輸出的運營Banner在保證視覺沖擊力的同時，還能輸出以及體現統一的設計語言呢？甚至不用設計師也能輕松替換Banner組件？想要解決這種難題的最好方法就是設計Banner組件庫，Banner組件庫的四大優點能夠完美解決以上的問題。
根據設計師個人及每個公司業務的不同需求，我一共把Banner組件庫分為兩大類別：
1. 設計師及設計團隊操作的Banner組件庫：
這類組件庫面向的操作人群是設計師，僅有設計師才對其有操作權限：
案例部分效果演示：
2. 非設計師操作的Banner組件庫：
這類組件庫面向的操作人群是非設計師人員（運營、銷售、子公司員工等），是設計師根據運營的需求特制的Banner組件庫。
我當時制作這個組件庫的原由是因為母、子公司經常都會有相同的模板化設計界面替換，而每次替換都需要花費設計師很多零碎的時間，所以我們干脆就直接設定好Banner組件庫，讓運營人員自行替換，我們先教會母公司的主運營操作流程，主運營再去負責子公司的操作流程培訓，這樣一套下來省去了運營人員與設計師的溝通及修改過程，運營人員可直接輸出成品，從而提升了整個團隊的生產力，也讓設計師專注于設計上的創意與用戶體驗。
案例部分效果演示：
不管是建立哪一類別的Banner組件庫，想要設計好它，那么首先就要清楚的了解Banner中的基本構成以及設計原則，從底層邏輯出發去構建Banner組件庫，我構建Banner組件庫的思路主要依據以下四大知識點：
Banner層級拆分的主要目的是為了組件的設定，我們通過層級拆分可以有規律的把每一個層級都設置為可替換選項，在Banner組件庫中可分為5個層級：
案例：
在組件化的Banner設定中，我們可以用點、線、面來劃分畫面的整體層面，我們要羅列出哪些層級是用點來表達，哪些層級是用線或面來表達，這樣不僅有利于組件庫的快速建立，也有利于Banner整體畫面的視覺表達。
點、線、面是相對存在的，點可能在畫面中成為線、面，線也可能在畫面中成為點、面。
“點”越大就可能會變成“面”，“點”發生規律性變化也可能成為“線”。
當“線”在畫面上顯得短小時，可以把它看成“點”，當把“線”加粗一定程度，那么我們就會把它看成“面”。
當“面”成為未封閉狀態時就會成為“線”，當“面”在畫面中的比例縮小時我們可以把它看成“點”。
我們在組件Banner時要事先把層級的點線面歸納好，這樣才不會在我們設計相同元素時出現雜亂的現象，層級與點線面的常規關系圖如下（這樣的常規組合關系有利于建立組件庫）：
需要注意的是在Banner組件庫中點綴層與標簽層并非一定要存在于Banner中。
Banner的版式復雜多樣，而我們的組件庫想要達到輕量化，所以更適用于下面三種常規的版式，如下：
組件庫的建立必須遵循Banner設計五大原則：對齊、統一、對比、留白、結構平衡。
對齊
Banner的內容都要有一個對齊的準則，特別是文案層面，每個元素都有自己應該處于的位置，要有秩序化，才有舒適感。常見的對齊方式有左對齊、右對齊、居中對齊，建議一個板式只使用其中一種對齊方式。一個小小的Banner版面，如果使用了多種對齊方式，實際上在用戶看來這些信息都是零散的，增加了認知成本。
統一
字體以及字體顏色最好不超過兩種，內容元素設計風格也必須一致，太多容易導致內容雜亂，干擾過強。
對比
了解各項信息的權重大小，重要的信息要加強顯示，次要信息可以弱化。
留白
要為Banner留出一定空間，讓Banner多一些呼吸感，這樣也更容易聚焦重要信息。
降噪原則
在Banner設計中不要使用過多的字體、顏色或者過于復雜的圖形，這種不斷做“乘法”的行為，實際上是在增加用戶認知的“噪音”。
字體使用規范
在字體的使用中，我們要確定字體類型以及字體的大小。
顏色使用規范
為了保證Banner擁有較強的適應性，我們可以不規定精準顏色，用顏色明度的使用區間來代替。(顏色規范僅限于主色調，并不包含特殊用色：如標簽、點綴元素)
版式說明
制定版式的整體尺寸、元素間距、排版、字數限制。
設計師應用的Banner組件庫可以用Sketch制作，也可以用Figma制作。
如果是用于外包設計或公司設計師僅有一人，那么建議用Sketch制作；如果設計團隊人數較多，那么建議用Figma，我這里就用SKetch給大家講解一下制作流程。
第一步：根據層級與點線面設計Banner中的元素
第二步：把每一層級的元素組件化
在Sketch中只用選擇想要組件的圖層（或組），點擊按鈕即可立即生成組件，如下圖：
在組件層級時我們需要注意從哪里開始，到哪里結束。例如我做的這個寵物Banner案例，第一層是Banner樣式切換，接著才是樣式里面的層級切換，并不是把內部所有層級都組件完后就結束了，可能層級中還存在更多的小組件切換，比如在樣式2中我沒有把點綴層合成一個組件切換，而是分為三個組件切換，甚至在三個切換里你還可以設置它們的顏色切換，全部設置完后這樣才算真正的組件結束，下面是我組件的層級圖：
第三步：設計可替換組件
在完成元素組件化后，我們就可以在組件庫里添加更多可替換組件的樣式，添加方式如下圖：
當把可替換的組件全部設計完后就可以使用了，如果發現內容不夠用還可以往內部再次添加，下面是Banner樣式1的切換效果展示：
Banner樣式2的效果展示：
注意要點：
運營人員應用的Banner組件庫的建立需要用到的軟件是PS與Excel。
在設計這類組件庫時我們一定要多從操作人員的角度出發去設計，最簡單化，下面案例來自于之前在老東家做的PS組件。
第一步：根據層級與點線面設計Banner中的元素
第二步：設計可替換元素組件
在設定前我們需要了解以下幾點知識：
通過以上4點可以得知我們需要設計的元素僅僅只有背景圖片，而其他元素可以通過變量來達到效果，下面是設計的4張不同顏色的背景替換圖：
第三步：定義變量元素
只是給需要變量的元素打標簽，具體該如何變量在第四步
定量步驟：選擇想要定量的圖層-圖像-變量-定義
注：PS會自動識別定量元素，如果是組，那么只有可見性選項（可見性選項的意思就是可顯示可隱藏）；如果是圖片，則會多出像素替換（替換圖片）；如果是文字則會有文字替換（替換文字）
在定義時為了避免操作錯誤，定義名稱就為圖層名稱，定義完成一個就按“下一個”按鈕，直到全部定義完成再按“確認”按鈕，案例中的Banner一共定義了6個元素，分別為商品圖（像素替換）、商品名（文字替換）、原價（文字替換）、優惠價（文字替換）、特價標（可見性）背景圖（像素替換）
第四步：制作Excel表格
我們所有的數據修改都是在Excel里面進行的，Excel表格制作非常簡單，第一排為定義的名稱，我們只需把剛才定義好的6個名稱輸入到表格的第一排。
如上圖，建議大家多加入一個編號定義，在PS里把編號定義的圖層隱藏就行了，目的是為了選取數據組時更直觀，操作如下：
除了第一排，下面的排列都是輸入性定義，如果要改變商品名的文字，就可以在下方輸入修改的文字；
如果要替換圖片，就要輸入替換圖片的名字及后綴，僅支持png與jpg格式的圖片，并且圖片必須與源文件在一個文件夾內。
如果要顯示或隱藏某個元素，那么就可以輸入大寫的“TRUE”或“FALSE”。
當把表格信息都填完后，最后一步就是把表格存為.csv格式。（注：.csv文件必須與PS源文件、圖片文件存在于同一文件夾內）
第五步：導入操作
當全部設定完后，我們就可以在PS內導入切換不同的數據應用。
操作路徑：圖像-變量-數據組-導入數據組-選擇數據-應用-確定
這五步下來我們的Banner組件庫就順利完成了！
特別提醒：避免運營人員操作失誤，建議把PS內部的所有圖層鎖定。
第六步：培訓運營人員
通過上面的組件建立，運營人員只需添加Excel文件的子列表，并在PS選中導出即可完成操作，可以讓運營人員把PS看成圖片導出工具，可以非常輕松的完成。（機械化流程）
因為考慮到運營人員可能無法理解設計邏輯，所以很可能會出現操作失誤或不知道怎么操作的情況，所以建議通過直播以及視頻文件、PDF文件、GIF文件來引導運營人員操作。
下面是員工PDF操作步驟圖示：
Sketch組件庫源文件：
PS、Excel組件庫源文件：
下載鏈接：https://pan.baidu.com/s/1376TAJVr4V8Sqiu9YADLpA 提取碼：e3li
文章來源：優設網 作者：黑獅力
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn