國內互聯網近幾年發展迅速，在很多方面都超過了一些其他國家互聯網的發展階段。隨著國內互聯網產品競爭日趨激烈，很多企業都把目光投向了用戶量龐大的海外市場。而疫情對于全球經濟的影響更是加速了海外市場的數字化進程。據 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 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪?；谟脩舴答?，最終，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
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)" 的封面在不同國家的呈現形式?？梢钥吹剑鎸ξ幕町惛蟮娜后w時，Spotify在保持了統一的樣式風格的基礎上，針對每一個國家和地區都展示了當地人在他們的生活中“快樂”的樣子。這種本地化內容更加貼近當地用戶，也能夠讓用戶產生更強的連結感與共感。
Spotify "Happy Hits" 歌單
結語
回到那句話 —— ”Recognizing the need is the primary condition for design.“ 產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：UI中國 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
迪士尼的12條動畫基本原則是傳統動畫中最有價值的原理之一。它出自Johnston和Frank的書《生命的幻覺》。雖然這些原理最初是為傳統動畫（例如角色動畫）設計的，但在本文中，我們將探討如何將其中的一些原理應用于UI動效上。
在動畫中，擠壓和拉伸表示對象的重力，質量，彈性。當場景中的彈球撞擊地面時會被擠壓。在UI界面中，擠壓和拉伸非常適合與按鈕相結合。
例如，按鈕的按下狀態為擠壓。通過控制擠壓和拉伸，我們可以輕松地定義按鈕的狀態。除此之外，它還可以應用于界面上的所有的交互式元素。
應用于按鈕上的擠壓和拉伸
應用于側邊欄的擠壓和拉伸
預備動作為用戶展示了即將發生的事情。就像奔跑開始時，我們的身體會先向后傾，然后才是加速跑，這就是預備動作。在UI動效中，懸停狀態就是很好的例子。每當我們將鼠標懸停在元素上時，某些元素都會做出反應，表明它是可單擊的，并且當您單擊它時會發生某些事情。
懸?；油ǔ嬖V我們接下來有一個動作發生
涉及水平滾動的界面通常會顯示下一個元素的一部分，該元素會出現在滾動/滑動中
在傳統動畫中，時間由繪制的幀動畫來控制。幀數越多，動畫將越流暢和越慢。時間還可以表現對象的情緒和性格。
時間也是所有UI動效最基本的屬性。定時和緩動功能在動效設計中起著重要的作用。漫長的過渡會使您的用戶等待太久。另一方面，如果動畫太快，用戶可能會錯過一些東西。通常，大多數界面動畫在200到600毫秒之間。諸如懸停和反饋之類的交互約為300毫秒，而諸如過渡之類的復雜動作約為500毫秒。您可以參考Material Design，其中對每種類型的動畫的持續時間都有很好的解釋。
右側的過渡會使用戶等待太久
現實世界中的大多數對象都遵循緩動效果。換句話說，物體的運動并不突然。就像自由下落的物體會在運動過程中逐漸加速。
向UI元素添加緩動效果可以使它們看起來更生動自然。制定時間節奏和緩動標準可以讓你建立一個高效的動效庫。
右側添加了緩動效果，所以看起來更自然
轉場，它包括如何將對象放置在場景中，如何以及何時進行每個動畫等等。它將用戶的注意力引向場景中最重要的對象。
對于UI界面，轉場決定了元素的放置位置以及在發生交互時如何對元素進行排版。它將用戶的注意力引向最關鍵的元素。
這是一個音樂類的APP，轉場動畫將歌曲封面和名稱放大置頂，并讓“喜歡”按鈕單獨出現，讓用戶一目了然
從高處拋出的球遵循了拋物線的路徑——弧線會讓事物更自然。在UI界面中，使用弧線運動會比使用直線運動更加的自然，要突出元素運動的路徑時可以使用弧線。
弧線運動更加生動自然
在動畫中，輔助動畫用于強調場景中發生主要動作。例如，角色的頭發在行走時的微妙移動，或者是面部表情的微妙變化。
在UI界面中，輔助動畫可以使主要動作更加突出，這在向用戶反饋信息時非常有幫助，所有微交互的作用均基于此原理。
輔助的例子動畫讓點贊效果更飽滿
場景中的重要角色必須具有吸引力，通常會將某些動作進行夸大以引起更多關注。
在UI界面中，重要的交互作用也需要更夸張一些，以引起用戶的注意。下圖的設計就是一個很好的例子，懸浮的按鈕在靜態狀態很顯眼，因為它的顏色更重，并且懸浮在所有元素之上。當發生任何交互時，夸張的動畫讓它可以占據整個屏幕，使其吸引力更上一層樓。
占滿全屏的夸張動畫
夸張的支付按鈕更吸引人的眼球
試想，如果你坐在三輪車上，當車前進的時，身體會短暫后仰，然后也會隨之前進，我們稱之為延時。突然剎車時，又會由于慣性運動身體向前傾然后回來 。
在UI界面中，同樣可以在元素靜止之前添加慣性運動，以使它們感覺更自然。不同元素直接也可以添加延時效果，讓動效更細膩~
窗口放大時添加了慣性效果
圖像和文本添加了短暫的延時效果
文章來源：UI中國 作者：設計師深海
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：在一個團隊里，成員之間“協同合作”是非常有必要的，比如一些崗位沒辦法完全理解設計師的想法，多溝通可以避免一些不必要的摩擦；在出現問題時，現在自己的環節找找問題，再進行溝通；本文作者分享了關于精準還原設計稿的環節，我們一起來看一下。
UI設計師作為展示產品形態的執行層，產品上線前走查視覺與交互還原是必經環節。
設計師可能都遇到過一個問題，作圖時連一像素的分割線都糾結好幾次，但是開發完的效果卻不盡人意，UI驗收不通過；然后前端這邊委屈的想拿出藏在鍵盤下的四十米大刀找你來血拼。
我們經常會聽到身邊的設計師與開發哥的一些對話，關于對齊、大小、間距等設計還原問題經常會討論很久；甚至有時會覺得，幾個像素的間距是不是有必要這么糾結？
「還原」是指事物恢復到原來的狀況或形狀，互聯網中的「設計還原」是說開發后實際界面和設計稿效果有偏差，進行設計校對。
一直以來，設計驗收都不太受重視：
不同的項目類型還原度也不同：用戶產品>B端產品>后臺；對于用戶產品最好是能做到像素級還原。
在這個快速發展、迭代、更新的時代，互聯網產品的用戶體驗重視度越來越高，而其中的產品設計還原也成為了工作流中重要的一環。
我相信每一名UI設計師，心里應該都有一個前端能100%還原設計稿的夢想，畢竟那是我們艱苦奮斗的勞動成果。
而視覺還原的高低與否，則直接取決于設計——開發——測試這些環節的協作質量；不僅僅影響上線產品的用戶體驗，還影響著作為產品設計最后一環的工作質量。
經過走訪UI/UX設計師、前端工程師和測試工程師的還原設計圖的工作場景。
深究原因后，線上效果的失真率其實涉及到設計、前端開發、測試這三個環節，分析造成這種現象出現的原因大概有以下幾點：
了解開發依據哪些規則還原設計稿，前期的準備工作是重中之重，設定好每一個細節規則，后期落地還原時才會將頁面的失真率降到最低。
UI 設計中，設計規范是設計還原一個關鍵步驟；一個好的規范應該是高效的、簡單易懂的。
設計規范通?？梢园杨伾?、字體、組件等內容制定成規范，不僅僅保證視覺的一致性，也極大方便樣式和組件的復用，后期的維護和開發；在規范的輔助下，開發在搭建全局共用控件時規則更加清晰明了，如按鈕、行間距、字體大小、色值等等。
3.1.1 色彩規范
顏色是設計中最重要的元素，顏色的運用與搭配決定設計的品質感；在 UI 設計中，顏色的使用規范主要在于：品牌主色、文本顏色、界面顏色（背景色、線框色）等。
3.1.2 字體規范
文字是APP主要信息的表現，尤其是新聞閱讀、社區APP等制定標準的設計規范和良好的排版方式，用戶使用APP也覺得毫無疲勞感，這一點很重要。
不同的字體氣質不一樣，并且不同場景下帶給人的感受也不一樣；所以需要在設計的時候考慮到字體的設計效果，然后在設計規范中注明；主要規范標準字的大小，標準字要注意跟上文的標準色進行組合，突出APP重要的信息和弱化次要的信息。
3.1.3 圖標規范
在 UI 界面中，具有標識性質的圖形就是圖標。作為 UI 設計中重要的設計模塊，產品的每個頁面中都有可能存在圖標。
設計規范中，圖標一般按照用途分為兩類：應用圖標、功能圖標。
圖標還應該根據不同的功能需求設計不同的狀態：如常態、選中態、點擊態等。
應用圖標：各種應用程序的識別標志，在應用商店里下載的一些應用程序的標志。
功能圖標：規范中最好標明圖標格式與使用方式。比如 Web 設計，圖片可以使用 iconfont 管理，可生成代碼交付給前端開發；如果是原生 APP，那么需要標注圖標導出格式與尺寸。
3.1.4 圖片規范
圖片作為界面設計的重要組成部分，需要標明尺寸規范，分為不同用途的種類。
3.1.5 控件規范
控件是指產品界面中可操作的部件，與組件是有一些區別的：控件翻譯為 Control，組件翻譯為 Component。
通俗的解釋說法就是組件為多個元素組合而成，控件為單一元素組合而成。
常用的 UI 控件（Control）：按鈕、輸入框、下拉列表、下拉菜單、單選框、復選框、選項卡、搜索框、分頁、切換按鈕、步進器、進度條、角標等。
3.1.5.1 按鈕
按鈕有 5 個狀態：正常、點擊、懸停、加載、禁用。
需要在規范中分別羅列出這五個狀態，標注上對應的按鈕填充色、邊框色、圓角值、按鈕寬度和高度，按鈕文本大小、顏色值；如果是圖標按鈕的話，除了上述參數值以外，還需要標注 icon 和按鈕文本之間的間距，icon 圖標的大小。
3.1.5.2 輸入框
用于單行信息錄入文字上下居中顯示，支持鍵盤錄入和剪切板輸入文本，對特定格式的文本進行處理：密碼隱藏顯示、身份證、卡號分段顯示，標注寬高。
3.1.5.3 選擇
選擇可分為單選與多選，并且也有五種不同狀態：未選擇、已選中、未選懸停、已選失效、未選失效項，規范中需展示出所有效果狀態。
3.1.5.4 進度條
用于向用戶展示步驟的步數以及當前所處的進程。
3.1.6 缺省頁
常用的 UI 組件（Component）：表格、對話框、提示條、氣泡提示、日期選擇器、多級選擇器、標簽輸入框、組合框、上傳等。
如果UI忽略規范，前端在不知道有可復用組件的情況下，很可能每一次都要手動書寫代碼；寫的代碼越多，遺漏掉細節和犯錯的可能性越大，導致效率降低。
最關鍵的是——對于今后的迭代，前端又得一個頁面一個頁面修改。
3.2.1 組件的好處
統一性：
高效性：
延續性：
3.2.2 組件化的特點
3.2.3 組件化分類
我們根據當下現有的業務場景和對往后一段時期的業務發展方向進行規劃，將組件庫的組件類型分為通用組件和業務組件；一般業務組件庫是不對外的，所以在Ant Design官網只能看到通用組件部分。
3.2.3.1 通用組件
指適用范圍廣，擴大頻次高，可重復使用多個業務且不包含業務邏輯。某些導航欄，按鈕，吐司，彈窗等。我們將通用組件細分為五個子類別：基礎組件，導航，數據錄入，數據展示，操作反饋。
2.3.2 業務組件
這類組件對比通用組件而言最大的特點就是包含了一系列業務屬性，跟產品功能有重疊的關聯性，因此影響到適用范圍可能僅限于于1?2個業務系統或特殊場景，且復使用頻次不高。畢竟使用場景特殊也有限，放出參考意義不大。
2.3.3 組件化搭建流程場景
組件化的搭建在兩種場景下進行：
1）產品立項前就開始組件化，在產品0到1之前，擁有一套組件和設計規范。設計師可以從以前項目的組件庫和設計規范直接套用并修改，這樣項目前期設計做起來更加方便且省時省力少挖坑。
2）產品經歷過0到1后，產品趨于成熟，這個時候開始做組件化。組件化搭建最多會有六個步驟，分別為：梳理類目、場景走查、問題分析、方案設計、生成插件庫、驗證開發。
具體的組件化設計升級流程我總結成了下圖：
當團隊搭建完成組件化之后，接下來就是成員間的使用，這一過程有業務需求產生組件模板、組件模版形成頁面、頁面形成頁面流程和頁面流程形成用戶體驗。
組件庫重建之初無法一應俱全，是需要后續設計師不斷的維護與迭代的。
關于設計輸出，現在很多像藍湖、zeplin、Pxcooker這種標注軟件把設計師從手動標注解救出來，往往把視覺稿在藍湖一扔就完事，前端開發完界面視覺還原度還是不高。
因為標注軟件只能負責生成元素的尺寸、樣式，遇到復雜樣式即使你反復衡量的一些像素，開發還是會漏掉——這樣很有可能出現視覺災難。
所以，一些復雜而又關鍵的頁面我建議可以貼心的做些手動標注，主動告訴開發重要性和注意點。
我們現在工作中會有兩種標注情景：
3.3.1 運營標注
因為很多數據是后臺傳輸到前端，有圖片、有文字，每個內容都需要給運營設置一個上傳標準。
3.3.2 開發標注
開發標注是從設計稿落地成代碼的主要參考，除了藍湖提供的標注，我們還需要寫一些重要部分設計說明，例如：模塊區分、局部特殊設計（該內容根據自身產品而確定）。
3.3.2.1 常規手動標注
3.3.2.2 特殊模塊/頁面劃分說明
復雜的表單設計，是很具有代表性的復雜頁面，根據頁面的布局進行原型化示例，幫助前端更好的搭建代碼框架。
關于切圖，切圖之前應跟開發確定好輸出的格式和尺寸，確定應該用 SVG，一倍圖或是兩倍圖，SVG體量小渲染質量好，單色使時還能替換顏色；PNG則通常用在實景圖，一倍圖和二倍圖則根據實際需要進行輸出。
如果要做分層動畫，那我們就涉及到分層切圖，如果桌面端和手機端樣式差別較大，那我們需要和開發溝通好如何實現，是否需要特殊切圖；所有的特殊切圖合特殊樣式，我們都應該提前跟開發溝通好。
設計-開發這個環節的協作質量對視覺還原起著決定性的重要影響；但是，由于本身的工作性質，我們和開發之間溝通是個棘手又麻煩的歷史遺留難題；設計師與開發雞同鴨講從而導致視覺還原度低下的局面，幾乎每天都在上演。
俗話說“知己知彼百戰百勝”，如果設計師能夠了解一些基本的開發術語以及開發流程，就可以更好的打破溝通隔閡。
那網頁設計稿的實現具體是怎樣操作的呢？
步驟可以概括如下：
3.5.1 設計師的要了解的「盒子模型」
3.5.1.1 什么是盒子模型
在開發的工作流當中反復提到的盒子模型。雖然不需要完全了解前端是怎么通過代碼來落地你的設計稿的，但你一定要知道什么是「盒子模型」。
「盒子模型」是前端的基礎知識，在「盒子模型」理論中，頁面中的所有元素都可以看成一個盒子，并且占據著一定的頁面空間。
一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。
3.5.1.2 盒子模型的組成
每個元素都看成一個盒子，盒子模型是由 content（內容）、padding（內邊距）、margin（外邊距）和 border（邊框）這 4 個屬性組成的；此外，在盒子模型中，還有寬度 width 和高度 height 兩大輔助性屬性。
舉一個真實界面示例，我們在瀏覽器中打開「開發者模式」可以看到網頁的樣式代碼以及當前界面是如何通過「盒子模型」來布局的。
前端并不能簡單的像UI畫圖時一樣，隨意地拖放一個可見元素到某一個位置；他們要通過把每一個元素裝進一個「盒子」中，再去界面中定位它所處的位置。
3.5.1.3 了解盒子模型對于UI的好處
當你摸清了前端是如何布局實現你的設計稿后，你在作圖的過程中就會開始懂得站在落地的角度思考問題，善用「盒子」，將界面中每一塊布局「盒子化」。
我舉一個示例，如果我們不使用「盒子」，當我們在做一個卡片時，前端并不知道UI是如何定義每一個元素的間距；比如，然后將這一個間距套用在他也不知道應該設置為多高的「盒子」當中。
所以UI在出稿時就帶入「盒子模型」思維，合理地構思好每一塊元素的布局，一方面可以幫助自己在輸出頁面時，布局更加合理；另一方面可以在前端落地時輔助前端準確還原。
優秀的設計離不開開發人員的落地支持，作為設計師，協同開發人員完成設計落地也是工作中重要的一環。
做好以下幾點，站在開發人員的角度為他們“多想一步”，高質量的設計還原指日可待。
在進行設計還原的時候我更希望大家把設計評審的環節重視起來，之前也有詳細的講到過《如何進行設計評審》的，因為我認為評審對于設計還原的意義是把問題前置化。
通過設計評審可以把改版視覺變化最大的地方和開發說明清楚，這些改版布局框架改變都會增加開發工作量；這個環節把握好了，那基本都能實現出來，特殊情況除外，比如前期忽略了一些后臺數據的問題。
有些細微的地方需要我們特別像開發說明，也加深他們的印象，在實現時候就減少出錯；像開發走讀的時候，只把關鍵核心點，規則講清楚；我們前面每走一步，都是為了后面我們檢視還原度的時候要輕松一些，開發也輕松一些，就比如前期基礎沒打好，后面深入很難。
設計師做好會議記錄（記錄問題及解決方案，以及達成的共識），并且在會議結束后以郵件形式發送前端們，抄送產品和運營，確保會議內容的傳達到位；讓設計師與前端工程師相關問題達成一致，提升工作效率。
在開發緊張環節中，即使我們前面所有工作都準備好了，也很難避免開發不找我溝通；這時候我們要積極回應他們，并且和他們一起處理問題。
比如某些難度大一點的頁面，開發實現效果和設計稿差異不小；那么這時候，開發會截一張他們實現的效果圖給你看，這時你就要仔細去找問題，不要一口咬定就是開發的原因；先溝通具體原因，然后找出解決辦法，如果是標注出現問題，比如標注標死了，頁面不靈活，適配局限性很大。
在視覺走查的時候我們可以把test環境下的頁面和設計稿拿出來對比，走查頭部、尾部等位置是否完整統一，按鈕樣式、反饋狀態、報錯等樣式是否統一；是否有缺少的場景和狀態，根據任務流程對場景和狀態進行排查，保證設計的完整性。
這里給大家推薦兩個視覺走查方法：
1）大家來找茬法
驗收的時候，我們需要把開發實現后的效果截圖，然后再去和設計稿做對比。
我們可以直接把截圖放在設計圖上方，降低透明度，大致比對下，就知道哪里不太對，然后再具體標注需要修改地方的參數。
2）頁面重構走查
走查還原的時候，在Chrome瀏覽器的空白處右鍵點擊檢查，找到里面的Computed窗口，我們可以找到具體的文字、間距、投影等屬性。
有時候一些比較細微的調整，我們可以雙擊具體的數值進行調整，調整到自己滿意之后再給到具體的數值給開發；這樣就不用在我們搖擺不定的情況下，造成雙方的困擾
4.3.1 確保可用性
設計任務流程，進行設計走查，在移動App端，我們所設計的應用是建立在手指點擊操作的基礎上進行使用的。
我們的手指不像鼠標一樣能夠精確定位和響應，所以我們需要在設計的過程中確?？牲c擊的區域能夠較為明顯的識別。
4.3.2 確保易讀性
文本內容是大部分產品的重要組成部分，所以文本的排版是非常重要的（很多人說中文排版不好看，那是因為你不會用中文排版的方式去做排版）；確保文字清晰、易閱讀是在文字處理上的必須保證的。
在眾多設計原理中，格式塔原理一直被廣泛應用，它可以很好的梳理界面信息結構、層級關系，從而提升設計的可讀性；在自查過程中，我們可以通過格式塔原理檢驗頁面中的元素是否符合標準。
4.3.3 反饋機制
當用戶和產品需要交互時，會使用不同的模式反饋信息或結果，為用戶在各個階段提供必要、積極、及時的反饋，避免過度反饋，以免帶來不必要的打擾。
常見的三種反饋信息如下，大家可以在此基礎上自查是否有反饋、反饋是否傳達清晰，是否對用戶有即時的響應等細節
4.3.4 動效還原
動效這塊是產品中比較高規格的一個存在，所以在使用的過程中一定要謹慎，不能隨意加入多余的動效，導致在使用產品的過程中出現問題。
在我走查的經驗多了以后，發現 最容易造成落地頁面與設計稿視覺差異的，其實就是顏色與間距還有圖標的視覺錯覺。不要小看這兩個細節元素，把控不好它們會讓落地頁面效果大打折扣。所以在進行頁面還原的可以著重對比一下幾點:
4.4.1 分割線
在驗收的時候要特別注意分割線的問題，分割線是在所有屏幕上都是1px，但是很多程序員沒有注意這個，或者說設計師在開發前沒有特別說明；程序員就寫成了1pt，因為pt是1x下的單位，px是實際單位。
所以在做分割線的是，單位需要是「px」，這樣才能保證每個屏幕的分割線都是1像素。
下面主要以3個主要場景來分點解釋分割線的標注：
4.4.2 投影
陰影作為一個重要的視覺元素，讓主元素和其他元素從背景中“彈出”并擁有深度，更好地將信息層級呈現給用戶。
常規投影與彌散陰影推薦使用css代碼完美實現；特殊情況下還需提前與開發人員溝通權衡各種方式的利弊，選擇適合項目產品的實現方式。
結合自己實際的工作經驗和與開發人員溝通的心得，實現彌散投影的方法，可以通過兩個方法實現：
1）切圖對接開發人員
雖然切圖可以解決這個問題，但是切圖也有一些弊端，因為每個卡片都使用切圖的話，會使開發的包變大，可能會出現加載慢、閃退等情況，這些體驗也是很糟糕了；所以在這個過程中的一些問題務必要提前與開發人員及項目人員溝通好。
2）CSS代碼實現
常規情況下，效果都比較好，但是也會遇到一些遇到異常情況，比如不規則形狀，通常用代碼也比較復雜，這個時候需要提前與開發人員溝通切圖情況，避免后期一些問題。
在做設計的過程中，我們需要更好地理解下游的工作，達到一個高效的溝通。
不管是哪一種方法，沒有對錯之分，關鍵是要懂得“權衡利弊”，提前與開發人員溝通到位；只要是適合自己公司項目且能夠高效還原設計稿的方法，都是值得一用的。
4.4.3 文字行高
文本間距也是影響落地效果的關鍵因素之一，文本間距指的是——純文本與其他元素之間的間距。
UI出稿時應該注意 文本行高可能導致前端的測量誤差，文本間距主要的原因是 sketch 與 ios 系統中字體的行高不同；最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
首先我們要理解什么是行高（line-height）。
我以 Sketch 為例，當我們設置了一個70px的文本，Sketch 會默認給我們設置文本為98px行高，文本的上下會包含一定的空白像素。
如果UI不設定行高規范，落地過程中就會出現以下問題：
行高的解決辦法：
面對行高的問題，我一般會在設計的過程中，輸出規范行高（可以是x倍行高，也可以是具體的行高值，如28px的多行文本行高為40px），和前端進行對接落地。
最簡單的解決方法是通過手動調整 sketch 中字體的行高，業界常用的行高是字體 size 的1.2或者1.4倍，實際這兩個值都是夠不準確的。
最近看到了一個新的公式可以同步開發根據字號設置行高。
設字號為x，行高=x+2ceil（x/10），ceil（）的意思是向上取整數 L（行高） 比如：12 + 2 * ceil(12/10) = 16。
注意這里適用于單行行高，由于多行涉及到的排版問題不僅僅是行高帶來的，有機會的話可以單獨聊一下。
推薦DoraemonKit 是一個功能平臺，能夠讓每一個 App 快速接入一些常用的或者你沒有實現的一些輔助開發工具、測試效率工具、視覺輔助工具；而且能夠完美在 Doraemon 面板中接入你已經實現的與業務緊密耦合的一些非通有的輔助工具；并搭配滴滴的dokit平臺，讓功能得到延伸，接入方便，便于擴展。
4.4.4 視覺重心修正
在設計上為了保證界面的視覺平衡，往往不是設計軟件直接精準對齊，我們總是會通過調整間距、大小或者角度補齊一些負空間，讓畫面保持視覺平衡。
還有設計中通常向右箭頭來表示模塊入口，當我們把箭頭和文字右對齊，箭頭視覺上會更外突；這時候我們會往里面縮進1至2像素，但是切圖完給完全不知情的前端后，設計師要主動講解一下，或者寫進規范里。
項目會有些需要展示logo的地方， 有的圓形、有的長方形、有的純文字，尺寸差距比較懸殊。
這種情況下，我們需要給他限制一個高度，在這個高度以內，再根據logo本身的體量來調整圖形的大小，處理好logo的視覺平衡。
特殊場景在設計過程中常常會被忽略，等到在現實中碰到才會意識到缺失異常狀態會非常尷尬，所以大家在完成主流程設計后，一定也要考慮到特殊場景。
大家可以參照以下幾種場景對設計進行自查優化調整：
1）網絡異常
考慮到網絡異常情況時，通常產品會通過異常狀態頁面或者交互反饋來告知用戶當前的異常狀態和如何解決問題（解決方案引導、刷新、toast）。
2）服務器異常
服務器異常狀況較少出現，時間也較短，通常不提示具體原因，設計處理方式為在新頁面展示缺省頁，文案+插畫的形式給予用戶提示及重試引導。
3）空狀態
空狀態指的是頁面中無內容，主要的幾個情況，設計師需要根據不同的場景給出文案+插畫的表現形式引導用戶：
4）內容缺失
內容缺失展示效果的考慮，設定頁面圖片缺失的占位圖。
5）加載頁面的表達方
考慮網絡加載或者數據加載的時候會等待幾秒鐘，通常產品會有一個簡單頁面的占位圖形式來減輕用戶在等待時的焦慮感；可以是loading，也可以是整體頁面的刷新動效。
設計還原的時候最后還還看一下不同機型適配的問題。保證不同機型的界面呈現效果一致。
4.6.1 動態眼光
手機適配的時候很多設計師會遇到一個問題，就是在750*1335的屏幕上做的設計圖；但是適配到640*1136的屏幕上就有元素放不下，所以設計師在出圖時需要用動態的眼光去考慮問題。
知識點：在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。
4.6.2 固定適配內容
在簡單的界面中，由于本身界面的內容比較少，確定位置就會比較難，因為要考慮到不同的界面內容要怎么放才能保持視覺統一；這個時候可以先將界面中的信息分成不同的幾個部分，先保證每個部分內的固定內容，再確定自適應的內容。
4.6.2.1 圖標或按鈕
4.6.2.2 搜索框
4.6.2.3 Y軸間距
一般來說，Y軸的間如果在相近的組件里，都會是固定的，不會有變化。
4.6.2.4 圖片
像這種圖片的列表或者，十字縱橫的頭像或文字，大小都是固定的，變得會是間距或者數量，如下圖所示：
對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。
4.6.3 自適配內容
自適配內容也給大家梳理出來。
4.6.3.1 文字彈性適配
文字流指在多行文字的情況下，文字數量變化會影像頁面布局和元素大小，如下圖所示：
文字彈性適配一般涉及的是寬度適配，寬度適配普遍使用的是間距適配，即定好左右頁邊距，中間彈性拉伸。
當文字左右兩邊有內容的時候，我們需要標明文字可顯示的范圍，也就是說它最多能顯示幾個字——這種方式可以做到較好的適配，也是做快速常用的適配方法。
4.6.3.2 banner
這里說的圖片是指banner或者feed流里的圖片，適配的方法大多都是自適應，界面中的元素間距和數量不變，元素尺寸進行等比縮放，比較適用于固定比例；但尺寸隨屏幕寬度變化的元素，如下圖所示：
對于比較復雜的模塊，快速找到將以上所說的固定因素和自適應因素，除了能夠讓標注效率大大提高之外，還能夠找到合適的適配方法，避免出現開發完成后才發現某機型適配效果不理想的情況。
假設視覺還原上真的出了問題，首先要尋找原因，是自己沒做到位？還是對方沒理解你的想法？
我感覺可以按照以下幾個方法去做：
設計團隊內部先弄明白改版的意義，畫好標注色值、像素的示意圖和文檔，做好產品原型等任何能讓對方不需糾結，直接可以上手的工作。
做好前期的準備工作，盡可能的多做思考，完善設計稿；尤其是邊界情況，把自己的問題留給自己，這樣可能產生的設計還原問題就會大幅減少。
多向開發同學請教，即便遇到技術確實難以實現的情況，不要逃避或者過于固執，了解具體原因，不斷累積自己的技術知識；自己的專業、努力是贏得程序員尊重的前提，贏得他們的尊重你才能順利開展工作。
這是一個比較復雜而且需要長期努力的話題，每個公司都會有其實際情況存在，團隊越大，情況越復雜。
設計師團隊或者個人的話語權如果很弱，確實會面對十分被動的處境；首先需要說明的是，話語權是贏得的，而不是賦予的；想要改善被動的局面，要認清所處的環境，問題的癥結，調整定位，并付出努力；只有證明了設計確實能夠解決問題，甚至驅動商業價值，才會逐步提升話語權。
完成一項任務時最重要的是團隊的思維模式是否統一，設計師在乎用戶體驗，工程師只在乎開發成本，那問題沒辦法達成一致是很正常的。
想要讓大家認同你的看法，就要在平常不斷的潛移默化影響別人；比如沒事多跟公司其他人聊產品、聊體驗、聊感受，慢慢給他們灌輸體驗的重要性。
只要你的話題有趣，人有趣，沒有人會拒絕跟你聊；時間長了，整個團隊的思路就會有所轉變。
設計師自己可以先按優先級去排布還原順序，看這1像素是否對當前產品重要性。
在搞清楚產品進度、優先級的情況下，記錄所有還原問題，自己標記優先級，整理完畢后一次性給他，再跟程序員解決方案和時間；也可以與開發同學共同摸索一套雙方都能接受的清單模式，標明問題，修改建議，重要層級，根據實際情況詳細說明或者簡要說明，能夠當面溝通更佳。
良好的團隊合作氛圍是有效的潤滑劑；好的合作關系如同一條戰壕里的戰友，哪怕多年后回想起來，也應該是一起沖鋒陷陣的光輝歲月。
設計師應該認識到自己在整個項目流程中的位置，不卑不亢，把麻煩留給自己，不要推卸責任或者互相推諉，逐步打造自己的聲譽和氣場。
一個優質的項目落地是各部門協同合作的成果，就像我們玩游戲，后期高質量的輸出也需要前期優秀的輔助來打鋪墊。
在“協同作戰”的基礎上，靈活運用規范、標注和走查的方法來主動推動項目的進行；不僅可以讓設計稿得到最大程度的還原，也可以提升我們協作能力和對環節的把控能力。
任何問題只要多交流，會避免很多阻塞情況；出于設計師的角度當然都希望每一張視覺稿得到100%的還原；因為用戶只看你上線效果，但是往往排期緊張需要一些取舍，我希望能在有限的時間內做到最好。
在后期視覺驗收的時候，我們可以換位思考，把自己當做程序員，站在他們的角度去思考問題；怎么樣的驗收方式會更方便開發修改，減少重復返工的次數，情愿驗收標注的時候多花10分鐘，也要把修改意見寫詳細，幫開發節省時間，反過來也幫我們自己減少了二次驗收的成本。
文章來源：人人都是產品經理 作者：郝小七
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品設計的過程雖然需要天馬行空，但是最終也要落地。設計是為人服務的，因此也要充分的考慮到“人性”。下面，本文作者為我們分享了如何通過設計讓用戶體驗到自由、尊嚴和幸福。
人的所有體驗上的感受，最終都可以追溯到人對自由的渴望，以及在自由基礎上對尊嚴和幸福的追求，這些都指向人性的深處，所以不了解人性就不可能做出好的體驗設計。
下面我就分別來說一下如何通過設計來讓人感受到自由的體驗，尊嚴的體驗和幸福的體驗。
提到體驗其實暗指這是人類專屬的一種感受，它直指人的本質所向即自由，這也是人與動物的一種本質區別，自由是一個純粹的哲學概念，它無法被直接明確定義解釋，但我們可以從鄧曉芒先生提出的自由三個特性，來對自由有個更深入認知。
人對自由的追求就是人的根本人性所在，所有精神追求最終都可以追溯和被自由所解釋。體驗到自由的時候，人就愉快，體驗到不自由的時候，人就難受。體驗中的一切感受，最終都可以還原為對自由不同程度的體驗。
比如哈雷·曼寧等人將客戶對體驗的定位分為 3 個不同的層級，稱之為“客戶體驗金字塔”（見下圖，自繪）。由低往高分別是∶需求滿足，容易性，愉悅性。其核心體驗都可以歸結為不同類型的自由。
客戶的需求得到滿足，其目的得到實現，這是感受到動機的自由（不受需求的束縛了，可以設定目標、實現目標）;客戶感到容易，無需大費周章，這是感受到行為的自由（操作自由，時間自由的掌控）; 客戶感到愉悅、感到滿意，這是感受到精神的自由（內心情感得到滿足）。
自由的力量也可以在日常生活中得到發揮和應用，比如現在家長們苦惱的小孩玩手機游戲沉迷問題，你可以給他設定每日強制必須完成的游戲目標，比如每天必須通10關獲得10個游戲道具和一萬個金幣，不完成不許做其它任何事情，孩子就會對游戲越來越厭煩，背后的原因就是他失去了目標自由和行動自由，感受不到自由的游戲帶來的愉悅了。
還有為什么孩子不愛閱讀收錄進語文課本里面的文章？
那是因為一般語文課本的文章都有課后題要求必須完成，還會強制要求背誦某某段落，孩子在翻開課本學習這些文章時，就已經意識到接下來將面對枯燥乏味的課后題，這影響了他對文章的興趣，他感受不到自由而只有限制和約束。
如果你領他到一個書店，告訴他說：“我們今天需要完成購買一本文學類書并帶回去讀完，但選哪一本，如何讀完你自己來定，你現在去翻看能讓你讀進去的書吧”。我想這個孩子因為獲得了動機自由和精神自由，自主選出了能給自己帶來精神愉悅的文字，他是會將此書讀完讀透的。
體驗到自由，就是體驗到他的自由意志沒有受到外在的限制而只受到自己的限制，這是體驗的最基本層面。
著名交互設計專家理查德·布坎南教授指出∶“所有設計背后的理念都是人類的尊嚴。交互設計的原料是我們服務大眾的‘目的和渴望’，我們賦予其形式和體驗。我們的設計都是為人類的尊嚴而設計”。
按照他的觀點，那做設計的人就很有必要先搞清楚什么是人類的尊嚴？為人類尊嚴而設計從何做起？
讓顧客體驗尊嚴，并非一件容易之事。并不是對顧客有歧視、謾罵等侮辱性的行為或語言才算損害顧客尊嚴，需要對尊嚴有深入的理解。
德國哲學家羅伯特·施佩曼（Robert Spaemann）這樣說∶“只要人活著，就其種差來說，我們需能夠且必須指望他同意向善。然而這種同意向善只可能發生在自由之中。不僅僅這種對同意向善的指望，而且對同意向善能夠得以發生的自由空間的允諾，都是對人的尊嚴的敬重的奠基性行為?！?
這段話可以理解為我們必須指望人們同意向善，而且要允許人們自由地同意向善。既不假定他會做惡，也不能強迫他同意行善。允許人自由，相信人會同意行善，是尊敬人的尊嚴的最起碼行為。
在我們的文化中一直有“你不仁，我不義”，“以其人之道反治其人之身”等一些言語在一直流傳，這些都是以人的表現來決定我們尊重其尊嚴的程度，即對人的尊嚴采取一種有條件的尊敬，而不是無條件的尊敬。
其實只要是人，都要尊敬其尊嚴。在這種文化背景下讓人們真正去理解尊嚴并不容易，但如果你真正想創造優秀的用戶體驗，這一關必須要過，并且在語言和行為動作兩個方面做出相應的行動。
先舉一個生活中常見的例子，當你逛街進入到一些店里后，會不會經常見到如下提示語“請不要隨意觸摸商品”，“店內設有探頭，請自重”，“錢物當面點清，離店概不負責”，諸如此類的語言。
這就是在字面上尊重，在內容上卻把受眾設定為已犯錯誤狀態，不尊重你的顧客的一種做法。這么做與懂不懂語言學無關，而與對人性的了解、對人的尊嚴的理解密切相關。
我們用什么樣的語言和客戶打交道，我們就在客戶心中創造什么樣的形象。
20世紀80年代中國內地企業開始導入CIS設計（企業識別系統設計）。
CIS系統包括 MI（理念識別）、BI（行為識別）、VI（視覺識別），其中理念識別就是樹立企業的價值觀，行為識別包含員工接待客戶時應遵守的行為規范，員工在按照這些語言和行為的外在規范來對待客戶的過程中，可以逐步提升內在的職業道德意識。
視覺識別最為人熟知，VI是一個嚴密而完整的符號系統，它的特點在于展示清晰的“視覺力”結構，從而準確地傳達獨特的企業形象，通過差異性面貌的展現，從而達成企業認識、識別的目的。
當時企業把CIS視為營銷利器，開始在戰略層面思考企業和員工在客戶心中的形象問題了。這就為今天的“以用戶為中心”、注重“用戶體驗”、強調“用戶思維”這些理念的實行奠定了基礎。
比起早期CIS系統中行為準則的口號化和粗放型，現在的企業準則更加關注體驗細節和可操作性，在用語上達到了”語言工程設計”的層次，在行為上達到了”行為設計”的層次。其核心都指向企業的道德水平的提升，從而為客戶體驗尊嚴開辟了切實的路徑。
需特別強調一下，雖然我們尊敬人尊嚴所使用的語言和動作做不到完全的真誠，總是包含著虛偽和假象，但使用這些語言和動作總比不使用它們要好，總比損害人的尊嚴的語言和動作要好。
正是在包含著虛偽和假象的真誠中，我們才有可能逐步減少虛偽和假象，朝著純粹的真誠不斷靠近。
語言和動作是對心靈的訓練，當我們能持續地說出善良的話、持續地做出善良的動作，我們的心靈也就離真誠不遠了。切不可因為做不到完全的真誠，就在語言和行為上對自己降低要求甚至沒要求。
幸福這個話題在生活中一直被人們反復提及，它的價值意義也是毋庸置疑的，幸福的感覺是讓人感受人的本質力量的重要確證，所以每個人都需要也該擁有幸福感。關于幸福和價值，經濟學家張維迎曾有如下論述：
“人行動的最終目的是什么呢？簡單說，就是生活得幸福！幸福是人行動的最終目的，意味著其它目的都只是實現幸福的手段，而幸福本身不能是任何其它目的的手段，為了其它目的而犧牲幸福都是非理性的。因為人的最終目的是幸福，因此任何物品和行動的價值，最終都來自它們對幸福這個終極目的所做的貢獻。如果一件物品或一個行動能增加人的幸福感，我們就說它是有價值的?！?
其實幸福不僅是經濟學會關注的問題，更是設計學科所要關注的問題。只不過商家通常是把產品、服務當作使用戶幸福的基礎手段，設計成為手段的手段，而不了解真正創造幸福的方法。只有在深入了解人性的前提下去做好設計，幸福感才會提供給到用戶。
幸福只能是建立在人人幸福的基礎上。這個人人，包括自己，也包括別人。
這對我們的固有觀念是一個挑戰，傳統觀念中，我們雖然反對”把自己的幸福建立在別人痛苦的基礎上”，但卻肯定和鼓勵把自己的幸福建立在自己痛苦的基礎上。我們文化中重視“痛苦”的價值。
比如“梅花香自苦寒來”，“學海無涯苦作舟”，“吃得苦中苦方為人上人”“要想人前顯貴，就得背后受罪”等等，一直在強調“苦盡甘來”的價值理念。
這種價值觀看起來很勵志，但實際上苦只是某事事物的副產品，苦本身完全沒有價值，苦不可能轉化為人的內在能量，這些錯誤的認知該被今天人們摒棄，苦就更不是通往幸福體驗的正確方向。
因為首先幸福沒到來之前，人所受的苦就是直接的痛苦體驗，只能夠損害人的健康和情緒，這是明顯的不幸福感覺；其次，如果認為幸福必須是通過痛苦換來，那么不用自己的痛苦去換，而用別人的痛苦換，則是最有利的方式了，這就自然地引向“把自己的幸福建立在自己痛苦的基礎上”這條路。
而這條路只會導致更多的不幸，而不是幸福。最核心的是“苦”不是將來能換取“樂”的債權，更不是修行資源，尤其是對心智不成熟的人更不是好東西，苦是對人的傷害。
我們應該盡可能別讓人吃苦，記住，只有成功能帶來更大的成功！這是心理學上已被證實的勝利者效應。
其實我們只能用幸福交換幸福。這種交換，實際上是激發和共鳴，交換的雙方都不會減少幸福，而是確證了彼此的幸福，是對幸福體驗的共鳴。以現在的幸福，激發起未來的幸福；以自己幸福，激發起別人的幸福。
這就意味著，對客戶體驗來說，要想使用戶體驗到幸福，產品和服務提供商也首先要有幸福感。不能認為“辛苦我一個，幸福千萬人”，而要樹立“我是幸福的，也要把幸福傳遞給千萬人”的觀念。
設計師、提供商、企業員工要以自己的幸福感所創造的幸福氛圍作為必要條件，激起用戶、消費者、客戶的幸福共鳴，這就是“真正讓人體驗幸福”的法門。
理解這一方法的企業可以說是少之又少，大部分企業都走在誤區，它們可以做到全心全意為客戶服務，但認為只有犧牲員工的幸福感，才能促進客戶的幸福感，正如當下很多公司員工過勞問題嚴重。
這使它們從根本上就不可能為用戶創造出幸福體驗，核心是因為企業的文化和價值觀出了問題。
我們一起看一個這方面做的優秀的例子——迪士尼樂園，迪士尼自身的使命，確立的就是使人們快樂。
一旦你來到迪士尼，或者走進其中的一個場館和設施，你就能觀察和感受迪士尼樂園里面散發出來幸福的氣氛。這依托于企業內部正確的態度，配以培訓和鼓勵的支持，然后再結合對這種氣氛價值足夠的重視。
同時也離不開塑造迪斯尼每一名工作人員的幸福感，由此才營造出的幸福氛圍。營造幸福氛圍的承諾就是他們創造幸福體驗的秘訣，即使所有人現在都知道了這個秘訣，很多企業也是不可能做到的。
原因很簡單就是大多數企業主張的企業價值觀里就根本不涉及幸福的價值。要想做到讓企業的顧客用戶體驗到幸福，就要對企業的價值觀進行重新設計，確保企業的價值主張里要包含“基于幸福的價值”的觀點。
首先要清楚對幸福的追求是普遍的，所有業務活動的本質基礎是使每一個個體幸福。并且要保障業務活動中交互的雙方都是幸福的，業務中的一方不幸福，另一也不會幸福。
業務活動的最終目標是為了改善業務活動中所有相關者（顧客、雇員和股東）的幸福，每一個體的幸福都如此重要，應當把幸福作為組織價值觀的核心概念。這樣才能保障你的業務會給客戶帶來真正的幸福體驗和好口碑。
偉大哲學家馬克思曾說過∶“人的本質客觀展開的豐富性、主體感性的產生與發展，依靠著有音樂感的耳朵、能感受形式美的眼睛，那些能成為人的享受的感覺，即確證自己是人的本質力量的感覺?！?
人體驗幸福，從哲學上說，就是在體驗人的本質上的豐富性。在體驗的交互中，人的感覺不斷發展和豐富，人的本質力量不斷地得到確證，進而感覺到人所應有也配有的幸福感。
要想真正做出好的體驗設計，必須看見和重視人性：對人自由的追求是人性的根本所在；對人始終都要以恰當的語言和行為使其體驗到尊嚴；將幸福建立在人人幸福的基礎上。
關注和尊重人性是做好當下一切設計的基礎和根本，因為體驗經濟時代的設計都要以人為本，服務于人。
文章來源：人人都是產品經理 作者：洪灃
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
信息有各種形式，圖、文、視頻、音頻等，而承載信息的形式也多種多樣。
本文意將信息容器進行整理歸納，以總結出一些經驗規律。
信息容器是承載信息的載體，位于內容層。要理解信息容器的概念，首先要理解界面中的層級關系。一個界面除了豎直方向和水平方向維度，還有縱深維度。
從底層（遠離用戶）到頂層（靠近用戶），基本上可以分為以下幾層：
背景層
信息層
全局操作層（各種常駐于屏幕的bar、懸浮按鈕等）
浮出層（模態類型的浮出層還需要有蒙版進行隔斷）
本文要討論的“信息容器”，指的是信息層上，裝載信息的載體。信息的類型多種多樣，可以是文字、圖片、視頻、各種操作控件等。
常見的信息容器主要有2大類：列表和卡片。
在整理案例的時候，我不禁產生了一個疑問，到底什么是列表，什么是卡片？如何界定和區分兩者？這個問題乍一聽有點無厘頭，列表不就是列表嗎，多個布局一致的狹長單元組合在一起，就形成了列表。那么什么是卡片呢？和屏幕兩側保持一定間距，帶圓角的就是卡片嗎？
我們不妨先看看下圖案例：
為什么類似的布局形式，上圖中，圖1給人感覺是列表，圖2給人感覺是卡片，圖3既像列表又像卡片？
從內容層面來說，包含的信息類型有：文字、圖標/圖片、按鈕。幾乎沒有太大區別。
是什么導致我們觀感上的不同呢？
電商案例也許可以給出答案。
從電商產品的商品列表頁中可以看到，用戶可以自主選擇兩種不同的商品展示模式：列表模式和卡片模式。
這兩種模式幾乎可以對應“列表”和“卡片”兩種信息容器樣式。完全一致的信息量：主圖、標題信息、價格信息、輔助信息，相似的展示效率（一屏展示約4.5個商品），不同的信息容器展示形式給人不同的感覺。
單純從信息層面或者視覺層面都不能界定列表和卡片，如果多維度疊加限定又太繁瑣，因此本文給出的列表和卡片直接的區別界定是：可以自主定位關鍵線索，規劃視覺瀏覽動線。如果視覺瀏覽大方向是豎直的，那么就歸入列表范疇，瀏覽動線不是豎直而是折線的，都算在卡片范疇。
除了上面說的，最常見的兩類信息容器：列表和卡片之外，還有另外兩種形式，分別是：無容器和復合容器。
這些容器具體有哪些特點，我們一一來看。
列表的定義：將結構一致的信息單元在豎直方向上鋪陳下去，形成的信息集合。
不同場景要呈現的信息側重不同。
舉例幾種常見的列表形式：
用戶/消息列表
圖文列表
功能列表
“卡片型”列表
用戶/消息列表的內容結構很清晰，頭像+身份+內容提要+輔助信息。
圖片天然地比文字更具有吸引力，視覺上的優先級排序是頭像＞身份＞內容提要＞輔助信息。
當然用戶可以很方便地選擇關注的對象是圖片還是文字，這體現了列表的優越性，瀏覽動線豎直，可以方便用戶根據自己想要的索引快速定位。
這里值得討論的是頭像用方形還是圓形的問題，相信大家都想到過這個問題，同樣是社交產品，qq是圓頭，微信是方頭，這里邊有什么原因呢？
本文嘗試分析一下，僅是個人意見，歡迎討論。
按照理論，圓頭親切的形狀感知更加適合輕松基調的產品，方頭嚴謹的形狀感知更加適合嚴肅基調的產品。這解釋了電商類型產品（淘寶、京東）的信息通知一般都是圓頭的，匹配輕松愉悅的網購體驗，而金融類產品（支付寶）多是方頭。對于同是熟人社交類產品的微信和qq來說，qq用戶層年齡偏低，屬性相對更加活躍，更加輕松的圓頭可能更適合此類用戶。
以iOS為例，當用戶向左滑動列表時，呼出針對該列表單元的操作。具體列表對應具體操作，操作項數量不同。
方案A：
優點：操作底板寬度適應文案，不會出現空間局促的現象。
缺點：當文案字段長時，列表被推出屏幕外的內容較多，當用戶操作分心時，可能會忘記正在操作的對象，雖然這種情況極少發生。
方案B：
優點：操作底板固定，文案折行規則明確，既不會造空間擁擠，被擠出屏幕外的列表區域可控。
方案C：
優點：搭配圖標，視覺更豐富。
缺點：圖標占據了一定高度，導致文案無法折行，列表被推出屏幕外的內容較多，與方案A類似。
綜上，個人認為方案B是最合理的，對于文案長度的寬容度高，即便文案較長，也可以保證視覺和諧，并保留較多列表內容。
在用色策略上，使用的是為大眾所接受的“語義色”，一些具體的顏色在長期經驗積累中形成了固定的語義。
當用戶觸發了帶有一定破壞性的操作時，需要用戶進行二次確認。
并不是所有情況都需要二次確認，二次確認的樣式也有多種。
同樣都是模態視圖，要表達的信息也相似，都是要求用戶進行選擇，為什么有些產品選擇將對話框居中，有些產品選擇將對話框放在底部？這里涉及到關于模態視圖的相關知識點，本篇文章旨在討論信息層面的內容，模態視圖涉及到了浮出層的內容，將在下篇文章中進行詳細探討。本篇文章不做過多延展。
信息流產品一般是由圖片+重點文案+標簽（可有可無）構成。
不同性質的產品想要突出的重點不同，根據內容的重要性權重來分配視覺占比。
從上方幾個例子中我們可以看到：
在圖文比例從左到右依次提升；
圖文布局案例1-3使用了左文右圖的方式，案例4-7使用了左圖右文的方式。
搞清楚如何圖文布局和設置圖文比例，就基本解決了資訊流頁面最關鍵的問題。
資訊列表或稱feed流，主要根據用戶喜好定向推送內容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息，用戶主動反饋的信息精度更高，用戶不惜花費更多操作成本來提示產品，對內容不感興趣。
從視覺上說：
1、提交反饋的入口（小而淺的icon）都不明顯，有些產品用“更多”來提示用戶，有些產品用更加負面的“關閉”來提示用戶。當用戶對內容產生較為強烈的反感時，才會注意到屏蔽入口。常規瀏覽時，該圖標不會影響用戶注意力。
2、反饋形式采用模態對話框，用戶需要選擇具體操作，是屏蔽內容或作者、還是舉報或不感興趣。
3、對話框是否有指向性：從表意明確的角度上來說，帶有箭頭的氣泡更有利于用戶定位對象。
從交互上說：
反饋入口熱區較小，容易誤觸，大多數情況下，用戶不會注意和點擊該圖標，用戶是以瀏覽為主要行為。
列表索引一般還是定位文字為主要形式，不同用戶的認知水平不同，圖標表意始終是一大難點，多用為輔助記憶或單純提升視覺美觀。圖標雖然是體現設計風格的重點，但是在具體情境下，如設置頁，用戶更加在意快速找到自己要找的內容，多度的圖標樣式，實際上會折損用戶的檢索效率。
一般功能頁面或放置許多功能，常常會超過十幾項，這種情境下，檢索效率低下是一個痛點。
如何提高檢索效率？—— 分組
分組給用戶提供了認知線索，根據格式塔原則，用戶總是傾向于把距離近的、樣式統一的元素歸位同類。
毫無分組顯然對于檢索是不利的，用戶需要逐一瀏覽，該情況適用于列表項無法分組時，如果有分組條件，務必分組，幫用戶節約篩選成本。
UI界面中，列表的分割方式常見的有以下3種：
線條分割
塊面分割
間距分割
在我們的固有觀念里，大圓角，不通欄，有投影的形象就是卡片。
這種樣式也越來越盛行，許多產品嘗試將列表也用“卡片化”進行包裝。
雖然是相當細節的點，但是精細化處理之后的結果就立刻會與批量化處理的結果拉開差距。
產品級的風格統一來源于點滴細節。
卡片的類型繁多：單列大卡片、泳道、內容流（兩列網格、瀑布流）、宮格
從內容展示效率上來講，單張大卡片就占據占據屏幕（劉海屏）超出一半的高度，用戶需要不斷滑動屏幕瀏覽下方內容，操作成本較高。大卡片形式對內容本身，如圖片的質量要求很高。這種模式常見于圖片社區或垂類電商產品，圖片社區（如躺平）本身較為小眾、即便是UGC（用戶產生內容）單元，用戶上傳的圖片素材平均水平也較高，垂類電商（如Nike）圖片品質由編輯控制，質量高且穩定。以上類型產品不以量吸引用戶，用戶往往更加在意內容本身是否優質。用戶沒有帶著明確的目標，心智更加類似于瀏覽雜志。產品提供什么內容，就進行瀏覽。從上方案例可見，除了微信讀書之外的3款產品首頁都沒有突出搜索功能，而是以信息流呈現為主。
與列表分割一致，卡片也有對應分割方式。
大卡片占據屏幕面積大，理論上大卡片的內容質量是經審查的。部分產品不存在大卡片容器的交互，點擊卡片直接進入詳情頁。部分產品通過比較低調的方式向用戶收集對于內容的意見。如微信讀書長按卡片，可以選擇不再顯示該卡片內容，產品收集反饋，對于用戶喜好的描述可以進一步具象準確。長按不是一個高頻手勢，用戶觸發該手勢往往是試探性的，代表用戶確實對于內容有意見要傳達。躺平使用了簡約三小點樣式的“更多”圖標來收納不常用的收藏和舉報操作。
何為泳道？顧名思義，常見的滑動手勢是上下方向滑動，但有時也會出現橫向滑動的情況。一系列對象在一條橫向軌道內左右滑動，該類型的形式組合在一起，就好比泳道賽道一般。
可以橫向滑動以查看內容的呈現形式，稱為“泳道”。泳道可以有多種形式。
停止位置隨機：
內容與手勢相關度高，比較自由，但停止位置隨機，不能保證停下后用戶能完美看到當前卡片的所有信息，需要用戶微調卡片位置。
停止位置固定：
根據用戶滑動速率，模擬物理慣性和摩擦，判斷最終展示哪張卡片，并將卡片呈現在屏幕中部，確保卡片上的信息都可以讀取。這種交互更加合理，給滑動設置卡點，類似banner效果。
雙列卡片可以看成是大卡片（單列）的另一種表現形式。這種形式更加提高了空間利用率，對于單一信息展示更加克制。平衡了效率和效果，是電商、圖片社區、視頻等產品類型的首選表現手法。
雙列卡片可以細分為兩大類：
卡片流（對齊）、瀑布流
卡片對齊：
優點：規整統一，視覺動線清晰，瀏覽舒適。
缺點：對主圖尺寸要求高，確定的比例會對商品展示有一定局限。
瀑布流：
優點：圖片尺寸寬容度高，滿足一定比值區間即可。保證商品的展示完整度。錯落的布局容易形成節奏。
缺點：不容易進行比較，若要進行圖片間的對比，比較困難，視覺動線混亂。
兩列式的卡片布局需要注意內容層與背景層的區分。
大多數產品的背景層是淺灰色，內容層是白色，色差可以建立區分。部分產品背景層是白色，或者說取消了背景層的概念，那么要建立卡片之間的區分，就需要通過間距或者卡片加底色的方式。
個性化推薦模塊對電商產品尤其重要，準確地將用戶可能感興趣的產品推薦出去，可以減少用戶的搜索、篩選步驟，提升購買效率和愉悅感，從而提升用戶對產品的評價。因此，不斷收集用戶的喜好相當重要，盡管各種算法已經讓產品顯得越來越智能，但依舊要給用戶留下提建議的入口。
上文介紹了資訊類產品中，用戶如何給出對于具體信息的反饋，電商類產品原理也大同小異。
從功能上來說，淘寶、閑魚、京東，都是通過用戶手勢（點擊圖標或長按卡片或兩者皆可）來呼出選項，用戶通過選擇來表達意見，從而使推送更精準。
從視覺上來說，淘寶和閑魚的反饋形式類似，都是在卡片上添加一個黑色半透明蒙版，將有限的選項豎直碼放在卡片上，類似小型模態的概念（但是這里不同于嚴格的模態視圖，沒有限定用戶必須要做出選擇，用戶可以直接劃走）。而京東的邏輯不同，使用了傳統阻斷性模態視圖的處理方式，將下方卡片用蒙版遮擋，希望用戶專注于選擇。
從阻斷感上說，京東的阻斷干是最強的，將用戶從原本的瀏覽行為中提取出來，請用戶嚴肅地做出對于當前商品的反饋。這樣收集信息的效率更高。由于選項是盛放在帶有指向性的小氣泡之上，針對性足夠，且延展性好，氣泡的高寬都可以調整，而淘寶和閑魚的處理方式，在極端情況下，如選項超過5項時，所有內容放在卡片之上，空間就很緊湊。
這類操作比較隱晦，可點擊按鈕很不明顯，長按手勢也不常用。同樣是當用戶有明確反饋需求時，才會尋找反饋入口，一般情況下，用戶不會注意到。以用戶常態下的瀏覽行為為最優先。
閑魚的交互做的很細致，蒙版出現采用了水波的形式，用戶抱著要吐槽的心態，這種精致有巧思的小動效在一定程度上可以緩和用戶的煩躁的心理。
除了電商類產品，部分視頻類產品長按卡片也會呼出對應效果。
案例1和案例2，長按卡片，都是出現視頻片段的預覽。效果類似iOS的3Dtouch，在相冊中按壓具體照片即可預覽。而案例3，點擊“更多”圖標，呼出操作。然而選項只有1項，不符合邏輯，單一的選項無法構成“選擇”，這會讓人有點摸不著頭腦。
如果把界面看作是一張大網格，不同的內容占據著不同位置、不同面積的頁面區域。
除了我們已經熟悉的“有序”布置，如從上到下依次排列內容（大卡片），或者從左往右依次排列內容（泳道），還有更加靈活多變的排布方式可供選擇。
布局的本質是分配界面面積，用以盛放內容，同時運用面積對比進行突出。除了面積對比的方式外，還有其他方式可以突出關鍵內容。
無內容的呈現形式比較簡單：內容直接置于背景層之上。減少視覺負擔，內容為主，形式為輔。
復合容器是指超過一種的容器形式的組合，如卡片中包含列表、卡片中包含泳道等。
不同的信息容器組合在一起，搭建一個分工明確的界面。界面中不同的信息需要套用合適的形式去呈現。有層級就有對比，對比越大，層次拉得越開，重點就越突出。
建立對比的策略：
色彩對比、面積對比、樣式對比、Z軸高度對比、靜態動態對比
文章來源：站酷 作者：doo_W
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計到了瓶頸時候需要打破瓶頸的好方法就是否定，否定自己之前做的一切東西開始去探索學習新的設計方向與用戶體驗。
AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書，提出了從5個要素自下而上的建設用戶體驗；從最早這本書針對web端的設計到現在移動互聯的app設計，因為其超強的普適性和實戰指導性被廣為流傳為UX設計中經典的項目創建與研究的方法論。
2008年，當你宅在宿舍玩游戲，發現已經很晚了，你打開餓了么APP，點了一個蛋炒飯，半個小時后就有人把飯給你送到宿舍。你禁不住說道“Aha，原來在這個APP中可以足不出戶就能吃到身邊的美食！”
2015年，當你在學校散步，發現有很多輛小黃車，然后下載一個APP就可以將車子騎走，你會禁不住說道“Aha，原來共享單車可以這么便宜就隨便騎呀！”
好的產品一定是企業服務能力的體現，要保證每一個產品功能都能落地實施，否則產品只是鏡花水月。沒有能力去支撐的產品都是耍流氓。因此要基于企業的發展布點規劃，每一個我們做出的核心決定，都應該建立在我們確切了解的基礎上。
但一個好的軟件之初應該去怎么思考未來設計的方向呢？通過5w1h指導我們更加全面的考慮問題并高效解決問題。
弗洛伊德認為，如果將人的整個意識比喻成一座冰山的話，那么浮出睡眠的部分屬于意識的范圍，淹沒在水下的那片深不可測的部分屬于意識的范圍，而鏈接意識和無意識的那層面屬于前意識的狀態，這就是著名的“冰山理論”。
無意識設計是深澤直人提出的理論，是指通過有意識的設計實現無意識的行為。無意識并不是真的沒有意識，而是人們知道自己需要某些東西，但還沒有意識到到底需要什么。
以商場購物流程為例把握整體環節
用戶體驗顧名思義就是“用戶使用產品時的心理感受”。用戶體驗可能來自產品給用戶留下的第一印象，也可能來自用戶長期以來感受到的正面或者負面影響。理想的用戶體驗是用戶感到高興、滿足、驕傲甚至是愛上這款產品。
通過問卷調查等方式對用戶進行調研，收集用戶對產品的反饋，分析用戶認為本產品中最有價值的功能點是什么？做了什么關鍵動作才認識到產品有這個功能點的？收集匯總產品的一些關鍵功能點之后進行分析，思考產品想要解決用戶最大的痛點是什么？產品是如何解決這一痛點的？競品是如何解決這一痛點的？我們與他們的解決方式有什么不同？如何讓用戶認識到產品的價值等。
通過上面用戶超市購物邏輯的分析/發現/了解/反思，可以精確的了解到當前電商軟件設計中的分類/購物車/購物卷/配送等功能的設計應用的必要性。
戰略層中明確了用戶需求和產品目標后，范圍層就要確定做哪些功能、提供什么內容來實現產品目標。
上圖可看同樣的購物app首頁功能卻有著極大的不同，拼多多與京東還是以傳統的電商頁面為主，而得物（毒）卻以一種展示形式呈現出來。為什么得物要以展示性功能進行首頁的展示，而京東和拼多多要以商品為主去展示整體功能呢？
在我看來因為面對用戶整體的不同，整體功能和展現內容也有不同的展現，如計劃需求型的商品有固定的需求或者確定的購物計劃才去進行需求型購買。而對于潮牌的用戶群體是因為在購物現場見到某種產品或某些營業推廣、廣告宣傳，提示或激起顧客尚未滿足的消 費需求，從而引起消費欲望決定購買，其實這是購物現場刺激的結果，是的一種刺激沖動型消費。
好的產品設計是順勢而為，而不是重新定義用戶體驗，更全面地了解用戶畫像，可以幫助我們作出更有方向，更符合用戶需求。
在設計主要的頁面的時候需要問自己幾個問題，功能導向是否符合產品目標？核心功能板塊是否缺失？頁面布局是否一致等問題。
通過觀察以上的功能但是卻又有很大的不同，在拼多多首頁的設計以產品為主，而得物app卻以用戶分享頁面為主；拼多多設計風格為一種較為“接地氣”的頁面，得物app卻以一種“高端時尚”的頁面。
為什么要以這兩種風格去設計這兩款軟件呢，同樣是國內大的電商平臺，為什么一個風格高端時尚一個“低端混亂”？
模擬用戶的行為，當一個產品可以模擬用戶的行為，將用戶代入真實的情境中，用戶就會對產品產生深刻的認同感。在以用戶畫像進行分析，當一個60歲的叔叔，晚上5點準備為一家人去做晚飯之前，去給家人買菜。他是更喜歡去高端的專賣店去買還是去一個臟亂的菜市場去買菜呢？結果顯而易見在會更加傾向于市場，因為市場給人最直觀的印象就是價格便宜，能以最便宜的價格去買到自己想要的物品。
再進行一個用戶畫像進行分析，一個00后的潮男，他要為自己買一款好看的球鞋，他的購買路徑是什么呢？首先他需要去了解什么樣的什么品牌款式的鞋才是最時尚的，其次他會選著一個最專業的品牌專賣店或者大的電商平臺去進行購買，因為這樣能給他最大的品牌保障。
通過以上這兩點才能更加詮釋一個產品的設計方向和最佳的用戶體驗。
根據尼爾森F模型，我們可以得出幾個心理暗示：
用戶快速掃視時，具體的文字并不重要
多用小標題、短句引起閱讀者注意
將重要的內容放在最上邊
其實，拇指操作熱圖最早是由設計師Steven Hoober于2011年的書《Designing Mobile Interface》中使用，其中的綠色部分被他稱為“單手握持時拇指觸摸最舒適的區域”。這些區域的測量是通過1333份觀測分析總結出來的，這些分析數據還表明，49%的用戶習慣于單手握持手機，用拇指操控屏幕，而用另外一只手做其他的事情。同樣是基于當年的這些報告，還獲取了以下信息：
36%的用戶會雙手環抱手機，用其中一只手的拇指操控屏幕
15%的用戶會用雙手握持手機并用兩手的拇指操控屏幕，其中90%的用戶操作時習慣屏幕豎著，而10%的用戶偏向于橫屏操作。
結合觸屏拇指熱區和推導模型，將高頻操作放在最容易點擊位置，降低用戶使用成本，提升用戶體驗。
合格的設計師能夠繪制風格統一的圖標，而優秀的設計師能夠創造風格獨特的圖標。我們是否能夠在最求大小一致、圓角一致、線寬一致、視覺一致和配色一致的同時，為它的視覺表現力加入更多的創意呢？
心理學認為，情感是人對客觀事物是否滿足自己的需求而產生的態度體驗，當這種需求得到滿足時，人們會產生愉悅、喜愛、幸福的情感。延伸到APP設計中，在產品加入情感化設計可以成為用戶之間的感情的傳遞橋梁，增加用戶對產品的好感度。情感化設計不是轟轟烈烈，有的時候僅僅是一個icon，一個圖片一句話。情感化設計讓產品變得有溫度，讓用戶獲得愉悅的使用體驗，這些簡單的細節設計充滿了積極的情緒。它滿足產品的功能性和易用性的同事追求更高層次的目標。
情感化設計在空白頁設計中發揮著巨大的作用，他通過設計手段來減輕用戶在看到一個毫無內容的頁面時產生的挫敗感。
Tabs是APP設計中最常見的控件之一，它幫助界面進行快速的信息分類導航。在視覺表現形式上，Tabs和標簽欄同樣也分為選中狀態和未選中狀態，一個好的Tabs既要有設計感又符合產品特性。在一個APP中有許多的界面，每一個界面又有許多的元素，那些同類的元素應保持統一的設計樣式。通常個人中心的人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延展使用?；蛘擢毺氐漠a品外觀、logo、ip形象，也可以作為視覺符號的一種，延續到其他的界面中。這樣這個界面就被統一的設計元素聯系起來了，給用戶始終如一的一致感，增加了極強的品牌效應。并將這種情感投射到產品，從而提升用戶對產品的認同感和忠誠度。
我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺符號作為Tab選中狀態，既讓界面視覺獨一無二，又進一步強化了用戶對品牌形象的認知。
作為中國最大線上購物平臺之一的天貓，其品牌最顯著的特征就是那只大腦袋小身體的黑貓，而它的“貓頭”也成為天貓每一次品牌推廣的必要元素。其中最受矚目的就是“貓頭”
聯合營銷海報的設計，已成為天貓與大品牌一起聯合營銷的傳統項目，通過設計創意淋淋盡職地表達出廠商的品牌精神和各自倡導的生活方式。
從品牌圖形中提取具有鮮明特征的形狀作為設計語言，也是一種設計風格的最好表現。
文章來源：站酷 文章作者：大峰_Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關于按鈕的一些知識和我的一些觀點分享給大家。
按鈕是最常用的組件之一，有很多小伙伴并沒有很全面的認識這個組件，今天我把關于按鈕的一些知識和我的一些觀點分享給大家。
一 按鈕的作用
在使用按鈕之前，你要了解什么是按鈕，按鈕的作用是什么，什么時候該用按鈕。
1）什么是按鈕
按鈕用于觸發一個及時操作。
2）有什么作用
2.1 功能操作
比較常見的是：展開收起、加減、下拉等。這種情況下以功能性為主，按鈕的形式適當弱化，重點強調功能，突出主體信息。
2.2 指引用戶下一步操作
這個是最常見的使用場景，每個可交互頁面上都有這類按鈕的出現，用來指引用戶下一步該怎么做。比如：創建、保存...
2.3 培養用戶習慣
當用戶知悉某個按鈕能指向某個操作，或者獲取某類信息后，長此以往用戶就會形成使用習慣。如果某操作能夠為用戶持續帶來價值，那就可以在按鈕的位置讓它更醒目，持續培養用戶點擊習慣。
二 按鈕有哪些類型
· 主按鈕：用于主動行動點，一個操作區域內只有且只能有一個主按鈕；
· 默認按鈕：用戶內有主次之分的一組行動點；
· 虛線按鈕：常用于【添加】操作；
· 文本按鈕：用于次級的行動點；
· 鏈接按鈕：用于作為外鏈的行動點。
三 按鈕的狀態
1）交互狀態
1.1 Normal 正常狀態
此狀態為按鈕的正常顯示狀態，就是按鈕在也頁面中的常規狀態。
1.2 Hover 懸浮狀態
此狀態為按鈕的懸浮狀態，當鼠標滑過時候的狀態會給用戶一個交互反饋，因為它只是一個視覺上的反饋并無實際作用，所以在移動端就把此狀態去掉了。
此狀態的效果并沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.3 Click 點擊狀態
此狀態為按鈕的鼠標 / 手指按鈕狀態，操作完此狀態后，就會引發此按鈕的真實作用。
同時，此狀態的效果也沒有具體的規則，具體按產品風格來定。這里我給一個參考效果，但并不是唯一效果，如果不合適，可以酌情更改。
1.4 Disable 禁用狀態
此狀態為按鈕的不可操作狀態。
當頁面中有未完成的任務或頁面中有錯誤導致不可提交頁面時，按鈕會處于 Disable 狀態。這個狀態在產品中也是很常用的，而且這種情況下應該引導用戶去做其他操作，所以此按鈕在視覺上一定要弱于其他。所以要制定一個通用的展示方案。
一般方案有兩種：
· 無論按鈕本身顏色是什么，它的背景色均為純灰色，常用的色值有：#CCC、#999等，此種方案為常用方案；
· Disable 狀態為 Normal 狀態的 30% 透明度，如果你想讓按鈕都有顏色傾向的話，可以用這種方案。
2）狀態屬性
· 常規：常規樣式的按鈕，主操作按鈕；
· 危險按鈕：刪除/移動/修改權限等危險操作，一般需要二次確認；
· 幽靈按鈕：用于背景色比較復雜的地方，常用在首頁/產品頁等展示場景；
· 加載：用于異步操作等待反饋的時候，可以避免多次提交。
四 按鈕的使用方法 / 禁忌
1）一個操作區有且只有一個主按鈕
一個操作區有且只有一個主按鈕去引導用戶操作，如有有多個或沒有則會影響用戶的判斷。盡可能少的讓用戶去做選擇，產品的終極目標應該是“傻瓜式”產品，不要讓用戶有學習成本。
2）圓角值
根據產品風格，三種圓角值的設定：
2.1 圓角值為 0
這種適合用在比較嚴謹 / 企業級產品中，比如：阿里云；
2.2 小圓角值
這種是最常用的形式，在不失嚴謹的同時還有一些細節，如果可以的話，盡量選這種的；
2.3 超大圓角值
這種一般需要有獨特的產品風格才可使用。樣式不好把控全局效果，所以使用頻率較低，慎重使用。
較大圓角值，此類千萬不要用，不要問，問就是太丑。
3）精簡文字
按鈕里面的文字一定是精簡的，不要展示過多文字，更不要折行。
4）文字與按鈕比例要適中
文字與按鈕的比例要適中，文字不要太大或太小，都會影響視覺展示。
5）彌散陰影
如果你想要用彌散陰影，陰影的顏色盡量用帶按鈕本身顏色傾向的，這樣會讓按鈕更有呼吸感。需要注意的是：只有主按鈕才能用陰影，其他級別的不要用，不然識別度會變差，并且會讓按鈕的體驗變得很差。
6）主次操作按鈕樣式統一
主次操作按鈕樣式要統一，不要濫用樣式。
7）按鈕樣式與其他組件要有區別
實際使用中，按鈕樣式不要與其他組件樣式混用，避免讓用戶產生誤解，做一些不必要的操作和思考。
8）不同場景適配
現在暗黑模式也是常用的場景了，所以黑/白場景下都要考慮到識別度的問題。
9）主次按鈕的位置
主次按鈕左右的問題，也常常出現在設計討論會中，這次我直接放個結論吧，以后不要再為這件事吵架了。
在提交頁面、彈窗中，主按鈕在右；在其他常規頁面上，酌情考慮。
五 按鈕尺寸
按鈕尺寸具體用多大的，這里我總結了一個規范（僅代表個人意見）。
· 高 = 文字行高 + Xn，X=自然數，n=4
· 寬 = 文字寬度 + Xn，X=自然數，n=4
在其他地方也可以用類似的公式去做規范，比如卡片的間距，你可以設置 n 為基礎值，在此基礎上用 Xn 去選取合適的值。
注意：常用的字號為 12px、14px，盡量不要用太大的字號在按鈕上。
小結
按鈕只是眾多組件中的其中一個，也是最常用的組件之一。對于設計師來說，無論大小組件，我們都要精益求精的去思考，只有把每一個細節做好了，才能做好產品。日積月累的把每一個知識點掌握了，我們也就成長了。
文章來源：優設網 作者：友設青年
藍藍設計( 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 / 席克定律（希克法則）
我們看一下，席克定律的數學公式表達是 : 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開始，此時設計師可能會單憑直覺 隨意設計，例如設計彈窗就隨便畫一個矩形，然后隨機調整?；蛘呤褂贸墒斓慕M件系統，直接套用，純粹執行。這就是處于 0思考階段，憑直覺設計（注意和直覺性設計區分開，直覺性設計是從用戶的維度定義的，即用戶可以單憑直覺理解設計，這也是我們常說的可供性"affordance"原理）
主動思考階段
而主動思考階段的起點是，隨著設計師接觸的工作范圍、工作內容、合作對象的擴大或增加，及接觸同類工種（其他設計師、設計leader）的輸出思考過程、輸出物、行為模式、思維模型等等設計價值觀與執行模式等信息后。
前者會使新手設計師（或沒有有意識的反思、總結沉淀的初中級設計師，或剛剛轉換行業的各等級設計師）逐漸暴露并意識到自己的問題，大概率可能涉及到輸出物質量、規范性、平臺或行業壁壘造成的經驗缺失等。
后者則是一個對比與發現的過程，即接觸到更優質的輸出物，更合規的輸出過程，更的設計流程、協作流程等等。可能是被動接受的，如leader或同事的分享，及日常工作中為提高團隊整體效率而被灌輸的新的工作方法和進入新公司要強制適應的新的工作流，也可能是主動接受，如發現同事設計到輸出的質量和效率等遠優于自身而自發去了解，學習。
因此，在主動思考階段，會有一個從發現問題到解決問題的過程，是不是和設計本身的職能很像，而在這個過程中，設計師自身就是被設計的對象，即如何解決自己身上存在的問題？如何使自己變得更完善更優秀？
你可以回顧下，在你初入行業時，最熱情的接納各種信息、知識、經驗的階段，你當時的狀態是什么樣的？概括來講就是遇到感興趣的內容-發現自己在此間的不足-了解學習并掌握。從基礎的某個視覺效果的實現方式，到某個設計方法論、某個解決典型問題的交互設計等。
主動思考階段與興趣（對某個領域的衷情）、個人行為習慣（自學習慣，求知與自發研究的習慣）、周邊環境等因素有關。因此核心是與本人、其他個人（同事，設計圈關系人）、團隊相關。某些人天生對未知事物、信息及技能有濃厚的興趣，所以會自發的廣泛接收各種新的信息，并在這個過程中養成思考總結的習慣（比如在下），同理，個人在大學期間，甚至成長過程中有養成良好的自學習慣，有訂立目標并逐步實現的習慣，他們會長期甚至一直處于主動思考階段。另一種情況則是周邊環境，社交關系人對你所產生的主動及被動的影響，如leader布置課題及學習計劃，同事，好友，行業人員的協作共創活動，分享會等。
所以，主動思考階段應該是優秀設計師需要長期自發維持的一個設計狀態，持續的發現身邊的問題，發現自身的不足，發現新內容新趨勢新動態。并在發現新的內容并與自身能力模型對比的過程中，發現不足并持續思考和輸入信息，反思，輸入，鞏固，沉淀。是一個升級打怪的過程更是一個知識資本的原始積累階段，與無思考階段相比，由于它是一個主動，刻意學習的過程，因此積累知識的效率要遠遠高于懵懂狀態的初級設計師。（這應該也能解釋為什么一些沒有進入主動思考階段的設計師，工作四五年卻被一些一兩年的新人設計師趕超）。
從新人設計師“無思考”階段到主動思考階段關系到一個設計師能否完成初級到中級的進階。主要差別則是輸出物的不確定性（初級）與輸出質量趨于穩定并持續迭代提升（中級）。
這個思考階段線性過程的第一個門檻，雖然是初中級設計師面臨的門檻，卻是能持續影響設計師整個設計生涯的關鍵轉型點，奇異點。就像先賺它一個億中所謂的一個億啟動資金?？邕^這個門檻，設計師會迎來第一個爆發期，中級設計師我的理解是下限清晰，上限無窮。即在主動思考階段，設計師可以將個人設計能力，從技巧到方法推動到一個較高上限的地步，概括定義———擁有在從事行業領域內輸出高質量設計方案的能力。
如何跨過新手期，從無思考到主動思考？
刻意練習與學習
最優解是從興趣到發現，即培養興趣，調動興趣去開展某個內容或者技能的研究學習，并逐步掌握為自身技能樹的一部分。次解則是從目標到強制規劃自我再到研究學習和逐步掌握。以興趣為老師是最易收獲的方法，但確定目標并刻意學習才是大多數人要走的路。完美解則是興趣驅動同時嚴格規劃。在我作為非科班設計師開始自學到工作的早期，每天固定不變的是大量瀏覽作品，大量閱讀文章，大量練習技巧，后面逐漸選擇性瀏覽，選擇性閱讀，選擇性練習。這期間發生了什么？是綜合當前工作場景和設計趨勢等各方條件后的縝密思考所做的決策，也就是一個反思的過程，從發散到收束，以提高在當前工作場景下的個人能力，集中精力在核心能力的提升上。
也是這種能力使我快速B端轉型C端，使我在上手新軟件Figma后由一個新手使用者快速蛻變為講師、分享輸出者。刻意練習和學習的能力與傾向，應當在主動思考階段養成為習慣。
What——How——Why
從淺層思考到深層思考，最簡單的就是所謂的黃金圈法則。What僅僅讓你了解到所見是什么,能提高你的審美，積累設計相關的表層信息。而當你思考How時，你將掌握如何實現該效果的能力。再進一步，當你開始思考Why時，你終于探尋到設計的本質，該設計是在遇到了一個什么設計課題、問題的基礎上提出的，解決了什么問題，如何解決的，有沒有更優解？目前的解法能否納入自己的知識庫？
T型構建能力模型
T型中縱深為你所對應的領域、行業、業務強關聯的能力。 以UIUX為例，其中又以基礎UI界面輸出能力為例。
視覺：布局結構、柵格、字體、配色、間距、ICON及插畫繪制、對應平臺尺寸規范...
交互：信息架構、業務梳理、導航設計、流程設計、原型設計、交互演繹
業務：當前從事行業、細分領域、細分到業務的理解程度，細分需求的業務背景的理解程度
橫向為拓展能力，通用能力如經常講的共情能力，溝通能力，協作能力，邏輯思維能力，復盤輸出能力等等。除此之外還有特殊能力，比如UI UX以插畫 ，3D作為特殊能力項。
關注環境
在最初定義主動思考階段時，我就講過個人覺醒主動思考的過程中，他人和環境的影響因素十分關鍵，因為這是一個發現不足然后去解決問題的過程。整體環境如整個大的設計團隊，及細分的每個設計組，從小環境到大環境都有相當多的團隊沉淀和個人沉淀可以供你吸收成長。如我們設計團隊定期舉辦的月度會議包含超高質量的分享，公共Drive保存有設計團隊成立來的所有設計輸出積淀。再如你的設計小組的定期分享，以及你身邊擁有個人特長能力的同事們，關注優秀的內容，優秀的解決問題的思路，身邊就是老師，萬物都是書。例如我從C端轉型B端后，在一兩個月內快速融入團隊，期間從不同的同事身上學到了時間管理（正經的）、項目管理、規范體系的制定等特長能力，而我給團隊成員的反饋是智能組件系統的制定方法同時搭建了一套常用智能組件，大大提升了復用界面的設計效率，至少百分五十以上。沒有對應的環境和社會關系人，靠自己悶頭苦學很難有這樣的效果 。
善用工具
這里專指記錄，輸出類工具，例如印象筆記。從舊的設計過程中獲得收獲與經驗的核心在于復盤。忌諱對所知和所得模棱兩可，因此需要在記錄，總結的復盤過程中真正鞏固從設計思考和實踐中獲得的反饋，并進一步加深為自身的持續性積淀。沒有復盤過的設計師可能不會意識到，你的每一個需求設計經過一次復盤后都有可能發現新的問題，思慮不足的點或者仍然未解決的痛點等，當然也很可能發現能持續復用的思路、設計模塊等優質資源。
除了筆記類工具，公開分享甚至私人交流都可以作為復盤工具，在這個過程中你會回顧自己的設計流程和思考過程，并在言辭交鋒間發掘新的機會點。因此當你完成一次自我感覺良好的需求設計乃至小的版本迭代后，嘗試著與身邊的工具人同事溝通，嘗試在設計小組內分享，在籌備分享與交流思路時，對于該需求的設計思路便躍然而紙上了。
被動思考階段
被動思考階段有兩個核心特征，這里的被動不是指傾向性，而是指無意識且自動處理信息的狀態。可以理解為游戲中的被動技能。
第一個特征，即達到在主動思考的基礎上，持續積累和迭代知識庫的信息，然后將設計規范，典型范式，通用經驗思考模型等內化后的階段。
何謂內化，抓起超燙的茶杯會自動放開手，反應速度不會超過零點幾秒，這就是人自我保護機制的內化，即整個過程已經不需要刻意去思考和醞釀，而是在無意識的過程中自發的做出反應，完成系統的思考并形成一個規范的方案建議。
與主動思考階段相比，主要差別在于對已有能力的使用熟練度，調用效率，及思考的全局性。
說的通俗些，遇到一個設計問題時，處于主動思考階段的設計師會在遇到設計問題后，從過往經驗，相似解決問題的思路中篩選，尋找一個合適的解，這些解是零散的，且需要設計師主動去回憶甚至瀏覽歷史文件來搜集。而對于被動思考階段的設計師來講，若是面對一個較為熟悉的設計問題，如一個彈窗設計，此時該設計的解答方案會自然而然的出現在腦海，并且存在多個方案進行對比，并且每個方案都完整全面，從業務的考量到體驗的權衡，再到業務與體驗的相互平衡。方案如何推進，按照經驗會遇到哪些阻力，需要說服哪些利益相關者，案例如何演示，有否有設計還原類風險？如何解決等等。
因此，處于被動思考階段的設計師能夠自然并的調用個人積累的成體系的技能和經驗以及執行和推進設計的流程，從輸出設計到推動方案落地一氣呵成，宛若天成。在沒有一定思考和實踐經驗積累的情況下，主動思考階段的設計師則可能需要花費成倍的時間在方案探索輸出再到落地的過程上，期間遇到的典型性問題則會一點點被消化并推動設計師向被動型晉升。
第二個特征則是視野與維度，視野也就是常掛在我們口中的全鏈路視野，維度則指的是看待問題或方案的更高維度。這一特征使用實際案例來說明或許更易于理解，
案例1微信紅包早期推廣的案例
微信紅包作為微信的一個核心功能，初期花費大量成本推廣并成為一個現象級“產品”，作為產品設計師，底層的視覺設計師與交互設計師在產品視覺交互邏輯等方面投入較大精力，他們只需要將自己負責的需求完成，輸出達標的基礎方案，可能會聚焦于如何設計紅包樣式更易于理解，如何設計紅包樣式能賦予其可供性，幫助用戶快速理解產品與現實中的紅包的映射關系，在進一步可能要考慮不同年齡階層對紅包樣式的接受度，而交互設計師可能要考慮如何縮短用戶路徑，使紅包開啟的愉悅感能夠最的被用戶觸達。
而此時產品負責人是如何考慮該紅包功能設計的？答案是通過微信病毒式傳播，的綁定銀行卡，為微信支付業務鋪路。綁卡才是當時該產品設計的核心。這就是維度的差異，同一個產品，不同的崗位不同的身份，不同階段的設計師看到的會是不同的維度視角，更高的維度往往意味著更長遠的考慮，意味著碾壓式的決策。“為支付業務奠基”與“糾結紅包是否要帶花紋”相比，維度視野的差距，高下立判。
案例2與設計團隊負責人評審 Logo方案
上圖是該提案的部分PPT，在一次品牌LOGO提案的評審過程中，我花費較多的精力去宣講Logo的品牌理念和故事，分析圖形的演化過程，同時輸出多個方案用于對比。設計負責人一針見血的指出幾個核心問題。
第一點，在設計過程中不要過早的給圖形設計融入顏色，顏色是第二層信息會干擾設計過程，當然也會干擾需求方的理解過程。一次只闡述一件事情，設計圖形，講解圖形就使用灰度模式。
第二點，給群體及普通需求方宣講可以使用較多包裝或附上比較詳細的設計思路，而需要給企業級Boss過稿時則切記簡化一切過程，開門見山，直接鋪陳LOGO圖形，對不同利益相關者采用不同的策略。
第三點，該品牌LOGO的單獨設計輸出物看起來不錯，但需要置于我們跨國的多個產品品牌構成的總的品牌體系中，判斷其品牌一致性等問題，一致的產品品牌效果不僅能闡釋品牌歸屬，同時也能很大程度上降低推廣成本。作為設計師，既要細化到每一像素，又要高屋建瓴從全局層面考慮問題。
當你收到的反饋或建議都是你從來沒有考慮到的問題和想法時，這有可能就是維度的差異。
資源3：周陟 《設計師如何解決全過程問題》
周陟分享的《設計師如何解決全過程問題》是一個全局性與高緯度思考的典型案例。該分享詳細的闡述了設計師如何從產品的底層框架，結合業務的思考，市場趨勢、歷史數據對比分析，定義核心設計問題并探索設計方案的過程。
其中即有低維度的設計師底層能力方面的闡述，如從產品用戶體驗五個層面的設計思考（戰略層、范圍層、結構層、框架層、視覺層）到具體的可讀性、視覺舒適度等具體的設計問題。更有高緯度的市場銷售趨勢、不同手機廠商間的用戶流失流轉情況、市占率、信任度等業務層思考。從上帝視角，全覽產品各個階段的場景及問題，并在對比分析中聚焦核心問題，探索方案去持續解決。
我們可以用一個超級樸實的方式來闡述主動思考階段和被動思考階段的差異。當一個設計師處于主動思考階段，你可以把他置于他所熟悉的設計領域，他將會輸出高質量的設計物，能夠較好的解決當前遇到的設計問題，體驗問題。
而一個被動思考階段的設計師，你可以把他置于有一定相關性的各個設計領域（比如互聯網方向的設計不能被置于廣告方向），他會在較短的時間內理解不同領域的特征和需求，并輸出高質量的解決方案，且能夠兼顧各個利益相關者，主動推動產品實現進度，并提前規避各類問題。這其中的差別在于，是否有自己沉淀的一套解決問題的方法和過程，是否將通用設計經驗系統化，是否有足夠廣闊的視野及更高的維度。這也映射了你是一名所謂的UI設計師，還是一名高級體驗設計師，前者限制在一個領域內，后者已然破圈。
如何從主動思考階段跨越到被動思考階段
在體驗設計的領域，主動思考階段的設計師與被動思考階段的設計師，在單純的設計能力上，其實沒有太大的差距，即輸出物本身沒有太大差距。都能夠快速輸出達標的設計方案，解決大部分體驗類問題。那么關鍵差距提現在哪里？
其一是從設計到落地的總的效率。主動思考階段的設計師在整個設計過程中需要頻繁的遇到問題，并陷入陷阱，然后持續的糾正方案，一步步推進，踩著荊棘摸到最終方案所在的那塊石頭。而被動思考階段的設計師只需要在知識庫中的成熟方案中選擇一條更加應景的路，多個方案已經擺在那里，而設計師只需要去考慮低維到高維的一系列影響因素，從基礎體驗，用戶習慣，再到業務和戰略上的布局，最終選擇全局視野下最正確的方案。
第二點差距在于可能性，被動思考階段的設計師有精力和能力去思考如何把方案做到超標準，超出需求本身的要求，超出利益相關者的期待（如需求方和開發人員）。我們經常會講行業標準這個詞，作為一個設計方案的基礎判斷標準，但行業標準永遠不是上限。微信的撤回功能，從僅撤回到撤回后可編輯就是一次體驗上的超標方案。
第三點則是打通上下游的能力，即涉及到上游的需求理解與轉化，詳細的設計項目還會涉及到用研類信息的接受與轉化，下游則涉及到開發還原的質量與效率問題。在有意識的關注設計全流程和生命周期的情況下，被動思考階段的設計師可以更輕松的管理設計并反饋到整個項目的開發周期上。
想要從主動思考階段跨越到被動思考階段，我總結以下三個建議。
從輸入到梳理
首先是核心的底層設計能力方面，表面上是基礎能力與通用能力的的刻意學習鍛煉，而關鍵在于對知識體系的梳理。在我們初入職場逐漸積累設計經驗的過程中，一些典型的設計過程，流程，針對某個領域甚至模塊的典型解決方案，將其拆解匯總然后梳理分類，不論使用印象筆記等筆記產品，還是思維導圖等腦圖類產品，都能夠幫你實現這個目的。
忍受立即獲得解決方案的誘惑
其次，在真正開始做項目時，主動思考，刻意將個人知識庫梳理的信息與項目需求進行對照，主動回憶和驗證積累的方案，盡可能多的羅列場景，羅列可能性，不要被第一時間想到的方案所誘惑而止于此。設計師在遇到一個設計問題后，會第一時間想到的方案往往是最普通，未經思考的初步方案，但往往該方案可以一定程度上解決當前的問題。此時設計師需要強制自己從最簡單的方案中脫離，進一步思考，并大量的舉例、演繹，探索更多機會點，調動腦海中更多可能性的方案。每當想要就此停下時，反問自己，我能否做的更好，是否有更好的方案可以解決這個問題。
視野和維度來源于廣泛閱讀、案例、及復盤
被動思考階段的設計師橫跨了高級體驗設計師到設計專家這個范圍。抵達這個階段的設計師視野將拓展至整個企業機構，而不局限于設計團隊的個人的視野。除了強大的解決設計問題的能力，相較于普通設計師，他們往往有更高的思考維度，全局性的設計視野，此類中后設計生命周期中的經驗往往需要通過閱讀、項目實踐等多個方面持續輸入，然后復盤并沉淀為自己的經驗。
因此這要求設計師廣泛的閱讀各類設計項目總結，參考實際案例，并在真實的項目中持續計劃、嘗試、驗證，然后復盤。需要脫離設計師基礎能力層面的視野，更多的關注解決問題的思路與流程，最終掌握的設計思路或能力可以稱之為通用性設計解決能力。
當然，上面所講的都是我從個人思考方式的轉變中總結出來的經驗，其目的是分享設計師應該如何思考？不同階段應該聚焦于哪些問題領域才能最大化提升思考方式的進階速度等問題，而不是在講設計師如何從初級進階到高級，進階到體驗專家（非設計師位階的進階）。因為不同企業對不同位階、不同專供方向的設計師有不同的具體要求，比如設計leader可能更傾向于業務的理解與把控度，設計推進，研發流程中不同團隊成員間的溝通合作等能力 。
如果有關于此的疑問，我只能以我的理解解答，不論是什么位置的設計師，判斷其位置層次的標準必然是由上層的企業來制定的，而企業制定規則的出發點源于利益本身，換言之，你能獲得的位置和你能夠為團隊和企業貢獻的利益正相關，所以我們很容易理解，設計師的職業后期或者用于解決超級復雜的設計問題， 以對應的價值映襯其收入，偏具體設計能力層面，或者用于承擔全局性企業需求，如帶領設計團隊支撐某個業務線，偏業務理解和統籌方面。
從線性流程到循環往復的迭代過程
我們回顧一個努力的設計打工仔的職業生涯，首先，一個新手設計師從純粹執行的無思考階段，進階到主動思考階段，當他的基礎設計能力不斷進階后，開始拓展視野，思考業務，并在大量的項目鍛煉中形成自己的一套成熟的設計方法論，從設計思考流程到具體的設計流程，從而進階到被動思考階段。但這是一個理想化的描述，真實情況是，設計師會在這三個階段中循環往復，而甚至有些設計師可能會在前兩個階段循環往復。
人都有惰性，你我都如此。在主動設計思考階段，因為一次小長假，因為種種原因，我們可能會退步回無思考的階段。持續性學習是一件 令人興奮的事，也是一件需要莫大毅力的事情。技巧經驗會隨著時間消磨，這是設計師需要警惕的問題，因為這個行業就是如此，我們只能變化，只能持續不斷的學習。
而當將經驗與成體系的思考范式內化后，設計師會養成核心的通用設計解決問題的能力。此時，設計師期去接觸一個新的領域，不再需要從0開始，而是可以使用自己積累的通用設計能力，來指導和規范化新的設計領域的需求，并快速融入該領域。而新的領域的經驗與視野會被納入你的整體設計理解中。
從主動思考，到經驗內化，不斷脫離舒適區，納入新的設計領域、新的視野維度，在這個過程中使個人的通用設計能力螺旋進步。
最佳啟動：消滅設計的不確定性
我知道，我的讀者中有很大一批人都處于設計能力良莠不齊，沒有系統的設計思路與設計流程，介于初中級設計師之間的狀態。而當今國內的設計領域也是如此，初中級別的設計師完全飽和，而企業對高級體驗設計師又求而不得，這種人才斷層既有培訓爆火下的積弊，也和設計門檻與崗位收益相關，大環境無法改變，能改變的只有自身。
在這里，我總結一個更簡單的設計思路，只要你按照該方法去執行和反思，應該會有很大的收獲。即從今天開始，對你所接到的每個設計需求都提出唯一一個標準——消滅不確定性?，F在停下來詢問自己，你接到的每個需求，對于你輸出的設計結果，你認為其最終效果是確定的嗎？換言之，你認為你的設計真的解決了該需求的問題了嗎？
你只需要把你個需求設計的思考分為設計前和設計后。
設計前請思考，我如何設計這個需求能確定以及肯定的解決這個問題，沒思考清楚前不要動手設計，想到第一個方案后也不要動手設計，繼續思考，延遲設計決策。
如果你乍一想到的方案自己都認為模棱兩可，那不要執行設計。此時發揮主觀能動性去思考，我如何能夠獲得相關信息，來輔助我做出這個設計決策，我需要去參考一些競品？我需要列出目前存在的疑問點，或者我無法解決的問題點去詢問設計專家設計leader？或者我把場景，整體的體驗流、用戶操作流都列出來，然后繼續埋頭探索方案？
千萬千萬不要在方案還沒想清楚前就開始設計，這將輸出無意義的方案，且浪費大量時間，千萬千萬不要在想到第一個方案后立即開始設計，這將不會給你帶來任何進步，以后遇到相同場景你也僅有一個可選方案，千萬千萬不要忽略競品忽略他人閉門造車。
千萬千萬試著思考盡可能多的方案，乃至輸出多個方案（僅指體驗設計類，而不是視覺設計）。作為體驗設計師，必須鍛煉的技能是方案演繹能力，在腦海中演繹可能的方案，如果有精力則可以借助工具甚至把演繹過程記錄輸出。 如下方我進行的一個需求的方案演繹與思考。
設計前保證方案確定性，第一關要能夠經受自己的邏輯考驗，當你探索多個方案后最終確定了一個符合業務場景，同時體驗良好的方案，作為設計師自己給該方案打上一個“確定”的標簽，此時再去執行并輸出，而這過程中的思路，從糾結到決策都是最終設計輸出的關鍵證明，既能提高設計說服力，又能鍛煉個人能力，而這正是初級設計師容易忽略的部分。
設計后的確定性則是指，產品還原與產品驗證方面。產品還原度是設計稿的視覺確定性，確保開發還原的線上效果與設計一致，這不僅僅要靠開發的努力，更要有設計師的具體標注說明的輔助。驗證則是產品上線后的必要環節，不論是預先根據業務指標設定埋點，還是設計師通過各種途徑獲得用戶反饋，最終都要保證你所設計的產品體驗的確定性是達標的，確定解決了需求提到的問題，確定能滿足用戶需求。若沒有，則重復這個過程，重新思考然后設計。
作為設計師，應該理解自己也能作為設計對象。在我看來，設計師就是遇到一個問題解決一個問題，遇到兩個解決兩個，直到面前再也沒有問題。所以當不清楚自己該如何設計，下一步該如何做時？你只需要思考，把解決當前的迷惑作為一個需求，去思考，深入思考，列出所有可能性，不管是百度還是詢問同事查閱資料，總歸在思考后，你會有所收獲。
結語
最后，我們一直在思考，在定義，到底什么是設計？
我自己一直遵循的理念是——設計解決問題，形式追隨功能。
而有人說設計是做選擇（決策），有人說設計是永遠做正確的事情。
事實上這些說法都有其正確性，也都有各自的評價標準，因為場景，趨勢，市場各種因素都在發展變化， 設計最終要兼顧場景兼顧各種利益相關者，在正確的時間做正確的選擇并最終做到正確的事情。
解決問題有多個方案 ，設計師需要在其中做出抉擇，選擇最佳方案，最佳方案如何判斷的？對當下場景，對主流用戶，對更多利益相關者來講是更正確的選擇。那它就是最終方案。
當設計被置于真實的環境，真實的市場下 實際上其傾向性和評價標準一直在發展變化從最初重視覺到重體驗再到重商業。設計傾向性一直在變就像設計潮流，唯一不變的是設計師面對復雜的場景和問題時一如既往的優雅的解決問題的思路，并幫助設計師讓世界變的更美好。
文章來源：UI中國 作者：AI-玲玲
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計的最終目標都是驅動業務增長，商業價值轉化。那用戶體驗地圖是如何賦能的？
在日常的工作中，或多或少都聽過用戶體驗地圖。在一些大公司，這部分通常是由用研部門來負責，對于一些配置有限的公司而言，則是由產品、UI設計（全鏈路設計）等職位來擔任的，一些UI/UE設計也會參與制作過程中。你對它的理解有多深？在工作中，有使用過它嗎？
有些人會覺得畫圖就行了，搞那么多干什么，又不是我的事。刨根問底的想想，設計到底是為什么服務？你做圖的意義是什么？商業？藝術？最終目標都是驅動業務增長，商業價值轉化。設計在組織架構里面本質是以用戶為中心、幫業務去解決問題，而解決問題能力來源于對用戶同理心洞察、對業務目標的理解。而說到用戶體驗地圖則對于0-1階段的產品的可靠度是很低的，因為沒有數據的支撐，一切都是虛擬的。對于1—∞階段的產品，可以更好的幫我們找到用戶的痛點、爽點，觸發創意和發掘新的需求。也就是通過我們的專業知識、見解和洞察搞清楚用戶在使用產品這段旅途中坑在哪里、怎么填才能讓用戶走的更順。幫助用戶更容易獲取產品價值，幫助項目組獲得成功。
用戶體驗地圖是用視覺化的方式表示用戶（第一人稱視角）的圖，以敘述故事的方式來描述用戶與產品、服務、系統交互時的體驗和關系，以此來幫助理解用戶需求和尋找用戶痛點。
可以先看一張圖了解一下用戶體驗地圖
簡單點說用戶體驗地圖在互聯網產品設計中的主要應用是記錄用戶從使用產品到離開產品的全部過程中的情緒體驗，從中洞察到機會點，幫助設計建立更好的用戶體驗。
用戶體驗地圖包含兩種強大的工具—講故事（敘述事情）+可視化
這兩大方法是用戶體驗地圖必不可少的方面。以令人記憶深刻、簡潔明了的方式傳達信息。創建一個完整的體驗視圖，將不同的數據點聚集在一起并可視化，促進相關參與人的協作、對話和挖掘新觀等。
第一個觀點：故事比數據更重要。重要的不是零散的收集數據，拿數據證明自己的對錯，而是建立一個有代表性的故事。例如，兩個人相親，最簡單的收集收據的方式就是問：“你多大了？有房有車嗎？多少存款？”而詢問的數據只能代表這個人，你能根據這個數據做決策嗎？他背后的故事是什么？他經歷了什么才會變成現在這樣？直接拿數據說事是很難有說服力的，每個人對于數據的解讀都是不一樣的，更多的是要關注其背后的故事。
第二個觀點：所以一個好產品，是從一個好故事開始。
用戶體驗地圖全局可以幫助大家理解用戶，理解用戶了解產品，使用產品的整個路徑和感受，從而幫助產品決策和設計決策。
看了上圖，那體驗地圖的價值就顯而易見了：
在一眼地圖中可以選擇和定位用戶的體驗點，觸發更多的創意點和挖掘更多的新觀點。
例子—公司研發一個高級的木質掛衣鉤，用戶視角就是買回來—裝上去——直接使用。繼續挖掘其中的點，目前的掛衣鉤需要打孔才能裝，這里就衍生出兩條線：第一種方案賣已經打好孔的木質掛衣鉤，可以直接安裝，操作起來方便；第二種方案把安裝工具和木質掛衣鉤一起賣，用戶安裝成本會比較大。
在體驗地圖中，需要多人參與，能夠讓所有的人都梳理一遍流程，促進跨部門協作、溝通與思考。能把所有的人都拉到同一頻道。
設計師在進入一家新公司后，應趕緊熟悉公司業務，在后期的討論，與產品是同頻的，這樣參與感會增加很多，也會顯得更專業。
用戶體驗地圖能幫助團隊在梳理的過程中找到重新設計與改進的節點，照顧到用戶在其中的情感需求，精準鎖定產品引發強烈情緒反應的時刻，也就是“尖叫”時刻。
回到上面的例子，如果你賣的掛衣鉤已經打好孔，直接安裝就可，不用費過多精力，那就是用戶尖叫的時刻，驚喜的時刻，如果使用了另一個方案，就會考慮到這個東西買的人會不會用安裝工具，會不會浪費過多精力，以至于該掛衣鉤有可能被拉入黑名單。
用戶體驗地圖，可以讓產品在需求探索的過程中，能夠更全面、更全局的去定位問題、看待問題，并且從中找出潛在的機會點，可以促進讓用戶在使用產品時，爽點更爽，解決痛點問題。
那整體總結下來就是：
記錄 將模糊的需求拆解為各要素，文字+圖形表達出來；
評估 當前產品和服務的狀態以及預測未來可能出現的情況；
發現 體驗過程中的痛點，尋找創新機會；
提煉 幫助團隊更好的交流和討論、作出更好的決策和設計方案；
注：為了清晰的介紹，這里會yy一個電影票的App。
常見的調研方式：用戶訪談、查看用戶投訴記錄、詢問客服、查看用戶在社交媒體上的評價、調研相關競品，定性定量調研
· 舉例說明
比如app store上用戶的投訴評價，可以針對性進行收集與分析，理性分析，了解用戶心聲，在評論區有時能找到產品的最痛點。
比如上面【用戶2】和【用戶3】提出的評價—這兩類總結就屬于一類問題：關于用戶定位準確性的問題。
用戶訪談中可以面對面、也可以電話溝通，這樣盡可能獲得最直接、最準確的資料。
根據產品的主要目標進行用戶分類，為每個用戶創建用戶模型（需求、期望、痛點），每個角色將對應不同的用戶體驗地圖。
羅列出用戶在體驗產品過程中的關鍵節點以及對應的用戶感受。同時通過頭腦風暴，挖掘新的關鍵節點。在每個階段有各個用戶目標，以yy的電影票為例， 主要分為四個階段【線上—購票前，線下—觀影前，觀影中，觀影后】在這四個大的階段里面 有細分一些節點，你怎么去具體操作，選擇app——找電影票——購票——選座——取票、檢票——觀影——觀影后的動作。
根據每個節點就可以知道用戶在各個階段下的目標。
這個短時間內挖掘更多新的關鍵節點，同時使關鍵節點種類更加豐富
已經列出了關鍵節點，那用戶在整個節點中的一連串行為，是不是斷層的？是不是可閉環的？在整個過程中，又可以挖掘新的優化點，讓APP更充盈、更豐富。
整個用戶行為：從一開始的選擇該APP，對比各APP之間的差異，到app內具體怎么買自己想看的電影票，再到線下取票、檢票、觀影，再到觀影結束后，寫影評。
對關鍵節點進行分類，對關鍵節點進行篩選，移除掉重復、沒有價值的內容。例如在整個購票過程中，購票支付就是一個關鍵性動作。
對于之前總結歸納的關鍵節點的行為，使用場景有哪些？用戶產生的“觸點”的環境有哪些？（例如網站、手機客戶端）
用以描述用戶在整個體驗過程中的情感變化。在各個節點下，用戶的想法是什么，他的情緒曲線是怎么變化的。量化描述各個階段里用戶的體驗值。把【問題】和【驚喜點】放到對應的每個行為節點上。并區分顏色。
比如在買票的過程中，邀約朋友一起去觀影，把選中電影的鏈接分享給朋友，打開鏈接，竟然跳轉不了APP，情緒是非常糟糕。
分析全部過程后，總結痛點，并從中找到機會點。
繪制完成≠項目結束，報告產出后，要積極與項目參與者同步，對調研問題快速腦暴出解決方案。
對于一次性產出較多的問題點，劃分優先級，并按計劃分布落地。
良性用戶故事地圖像一個捕魚的過程，可以發現新的場景和機會點，可以幫助我們站在全流程的角度，挖掘使用場景下更多的體驗優化點。體驗地圖可以使部門或小組在需要解決的過程中具有不同階段或關鍵接觸點的對齊方式更加清晰。
體驗地圖不是必須的，但是做好一個好產品必要的步驟。它的一切都與用戶有關，在每個階段都可以參與進來。它可以讓我們以用戶的角度來審視體驗過程、可以讓大家都參與進來，促進跨部門跨角色無邊界思考合作，可以協助團隊鎖定“尖叫“時刻，可以更好全局的去定位痛點、解決痛點、找到機會點。
文章來源：站酷 作者：瑪麗的設計筆記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn