在 C 端設計中，不管是給車載客戶端、手機客戶端、電腦客戶端設計界面，都有比較具體的規范需要我們學習和遵守。
而唯獨 B 端設計，或者說網頁設計，我們在網上是找不到具體詳細的規范資料的。因為無論是螞蟻的 AntDesign 還是 Element、Clarity 等 B 端設計系統，其規范都只是針對自己這套產品的設計說明。
當我們不使用這些框架，要完成自定義設計，那么新人就完全不知道該怎么下手。所以，今天這篇內容，就是針對 B 端設計所需具備了解的基本規范進行說明。
幫助大家快速了解和掌握 B 端設計所需的規范知識。
B 端設計是 UI 類設計中的一個大類，它包含了非常多種面向企業、商業的客戶端類型，包括電腦、手機、平板、大屏等等，針對不同客戶端和系統，基礎規范都有一定的差異。本文主要集中在 WEB 端的管理界面設計。
WEB 管理界面雖然看起來和一般的網頁差別很大，但說到底，它也是網頁的一種，它遵循網頁設計的基本原則。我們對規范的解釋以網頁基礎規范為框架展開，并會加入一部分 B 端特有的設計元素規范說明。
主要包含的規范內容包含下面這些模塊：
規范的解釋，會涉及到不少網頁前端制作的知識點，建議立志在 B 端進行深耕的設計師，都要掌握 HTML + CSS 這些前端知識。
我們過去做過這個系列的詳解，可以通過下方的鏈接查看：
還要聲明一點，規范中總結的內容，包含 “規則” 和 “建議” 兩種類型，規則指的是瀏覽器、代碼等限制產生的硬性規范，而建議則是我根據自己經驗整理出來便于大家理解的內容。
在自己的項目中，如果出現 “建議” 無法適應的情況，那么完全可以根據實際場景來做決策，不需要拘泥于我給出的數值和限制。
下面，就開始進入正題吧！
首先，我們來解析一下 B 端布局的規范，即界面排版應該遵守的基本原則。
在前端 HTML CSS 的知識中，需要定義不同 DIV（或其它標簽）的長寬數值，并將這些大小不一的矩形進行排列、移動、嵌套，來實現界面的視覺樣式。
換句話說，所有置入畫面中的元素都包含一個矩形的外邊框，無論是文字、圖標、圖片、按鈕、標簽還是符號。
所以，在界面的布局中，無論我們使用什么樣的內容、字段，對于前端的頁面來講都只是無數矩形的排列過程。我稱這種布局的設計思路為 “矩陣布局法”。
矩陣布局法是設計方式和前端開發方式的統一，提升開發階段實現設計稿的效率和準確性，是每一個專業 B 端設計師都需要具備的素養。
在此基礎上，我們還有幾個統一的原則需要遵守：
1. 數值使用標準
在 UI 領域中，元素尺寸的定義不像平面設計大多以比例或“感覺”來制定，更多是使用手動輸入數值的方法來完成。
主流的系統、規范都會建議我們通過網格化參考工具來輔助我們進行布局設計，比如 Android MD 系統使用的 8*8 網格系統（常用電腦分辨率可以完美支持）。
也就是說，在這個系統中，元素的外邊框、間距，都是以 8 的倍數來設置的。這樣無論我們在設計還是在開發過程中，對于使用的數值都會有相應的默契。
但是，以 8 的倍數為基準的設計，跨越的幅度有點太大了，比如一個圖標，當你覺得 16px 小的時候，那下一檔 24px 頁可能太大了。所以，我的建議是對于相對比較復雜的項目來說，使用小一級的 4*4 網格來設計，會更兼顧靈活度和數值的統一性。
即設置元素的尺寸、間距的時候，我們都用 4 的倍數來完成，當你覺得元素的長或寬不合適，就對它進行 4px 的增減，比如下面的案例：
要警惕的是，4px 的基準，是針對元素視圖邊框的值，文字字號、圖標柵格等次級內容，并不會受到該原則的影響。且該原則只是一個設計基準的 “建議”，而不是限制，在特殊場景中可以選擇打破它。
2. 固定和響應尺寸
使用 4 的倍數完成設計，并不能解決 B 端設計中的所有尺寸問題。因為在 B 端的實際應用中，我們會加入響應式的邏輯，即頁面元素尺寸隨瀏覽器窗口的變動而變動。
所以，在設計 B 端界面元素的時候，我們要考慮兩種場景，固定尺寸和響應尺寸。
固定尺寸即不管環境發生什么變化，它的大小是定死的。比如圖標、標題、LOGO 等元素。而響應尺寸，則是一個 “未知數”，是需要一定的計算規則 “求得” 的。
比如還是搜索欄的案例，搜索框響應尺寸，而搜索按鈕是固定尺寸，那么在不同的寬度下面，它們顯示的效果如下：
要理解響應式尺寸對應規則，除了了解 CSS 中 Width:auto 屬性值的使用外，最簡單的就是搞清楚 UI 設計軟件中的響應式布局功能。
元素是響應還是固定尺寸是我們在設計過程中就做后決定的，而不是等設計做完以后再看圖說話。所以了解固定和響應尺寸的內容，在我們定義組件的過程中就要通過軟件的響應式功能進行設置，并需要在后期的標注和文檔中進行說明。
3. 常用的界面布局
最后，就是 B 端界面設計使用的主流布局形式了。雖然網頁因為畫布比手機大得多，設計的靈活性更高，但在 B 端中可以應用的布局形式也不多，只有固定的幾種。因為 B 端頁面布局中有幾個常用需要預留的坑位：導航、標題欄、工具欄、內容區域。
主要使用左右或上下布局兩個方向：
左右布局的形式，通常是左側作為導航區域，頂部作為工具欄使用。這種做法通常是因為系統內模塊較多，需要的導航數也多，用戶需要經常切換到不同模塊中去，所以左右分欄的布局可以很好的提升操作效率。
而上下布局中，則是面向一些處理場景、功能比較簡單的平臺，導航模塊少，且切換的頻率不高，主要的操作都集中在內容區域的設置上，沒有邊欄的影響還能提高操作的專注性和效率。
要使用哪種類型的布局，需要根據當前的項目功能做決定。但即使選擇了其中一類，也并不代表我們的工作就結束了，還需要在這個布局的框架下做進一步的規劃。
比如，我們需要制定內容區域多欄設計的比例劃分、復雜表單填寫系統中的內容引導欄、列表條目展開的側邊欄形式等等……
每套項目都需要先確定頁面的布局框架，然后再開始針對具體頁面、業務內容進行設計，保證整套系統操作方式的一致性。
文章來源：優設網 作者：超人的電話亭
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
5分鐘帶你了解服務設計的原則、案例及常用方法！
我們常說，現在是體驗至上的時代，用戶對產品的使用不再是單純的需求滿足，更要獲得滿意的體驗。服務設計的發展為我們改善用戶的體驗提供了新的思路，從本質出發，任何產品都是在提供某種服務，服務的質量從根本上決定了用戶的體驗。
什么是服務設計
服務設計一直在我們的生活中，我們無時無刻不在體驗著各式各樣的服務。荷蘭一家專業的服務設計機構31 Volts是這樣描述服務設計的：“如果有兩家緊挨著的咖啡店，出售同樣價格的咖啡時，服務設計是讓你走進其中一家而不是另一家的原因。”這個描述很生動，同時也說明了服務設計的作用。
其實服務設計的定義還有很多，行業內不同的專家和學者都有自己的理解和解讀，不管定義如何，重要的是服務設計的思維方式，可以幫助我們從全局改善服務體驗。
服務設計的原則及案例說明
2010年在《This is Service Design Thinking》一書中，作者首次提出了5個服務設計基本原則，這些原則之后也被廣泛使用，但隨著服務設計的不斷發展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項。
a.以人為中心(Human-centered)
以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用，服務設計當然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務影響的人。
在日本，農產品市場存在這樣一個問題，農產品批發商無法及時從種植者處了解農產品的相關狀況、收獲量等信息，因此他們也就無法與要購買農產品的人進行談判，這樣造成的結果可能是糧食的浪費。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發現了這一問題，他們希望利用自身能力（軟件方面的優勢）去解決這一問題，因此將目標設定為：創建一個可以提供有用數據而又不給農民或農產品批發商帶來負擔的系統。
最終的產出的結果是Fudoloop這個應用程序，通過Fudoloop，批發商可以提前一天從農民那里收到信息，進而協調買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農產品信息的農民，一種是從Fudoloop上獲取農產品信息的批發商，Fudoloop分別為兩種用戶進行了設計。
圖片來源：Fudoloop
在設計Fudoloop時存在這樣一個問題，農產品市場中的相關從業人員普遍年齡較大、受教育程度低、軟件使用經驗很少，面對這樣的用戶，顯然通常的軟件設計并不符合他們的需求，因此Fudoloop的界面設計非常簡單且信息突出，從事農產品相關工作的人員可以輕松的使用Fudoloop完成農產品信息的更新，而不會因為學習產生很大的壓力。Fudoloop還在大型農業貿易展覽會邀請了一些行業內的人員和用戶參與到了產品的體驗中，并收集了他們反饋的建議，以改善產品。
圖片來源：IDEO
NJC在設計Fudoloop時充分堅持了以人為中心的原則，考慮到服務涉及的不同用戶，并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當簡單、以人為本的思想匯聚在一起時，創新就會發生”。
b.協作(Collaborative)
這條原則說的是，不同背景和職能的利益相關者應該參與到服務設計流程中，收集多方訴求，發現不同看待問題的角度，才會更好的解決問題。
在美國舊金山，有一所學校和Revolution Foods這家餐飲公司合作，為學校內的人員提供豐富的、營養的午餐，但是實際來餐廳就餐的人數與預期相差很大，數據顯示，有72%可以承擔起午餐費用的人并沒有來到食堂吃午餐。經過調查發現其中的原因，很多學生等校內人員并不愿意排長隊或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時間。
為了改善這種情況，這所學校請來了全球頂尖的設計咨詢公司IDEO，他們與1300多名學生、父母、營養人員、董事會專員、校長、老師和社區團體等利益相關者一起工作，重新去設計了學校的午餐，并且制定了針對三種年齡的就餐體驗的建議，完成了飲食、就餐空間、新技術使用等多方面的優化和設計。
圖片來源：IDEO
最終，學校完美的改善了午餐服務的體驗，這其中包含了所有利益相關者的想法和工作，因此設計成果也被人們所接受，越來越多的校內人員會選擇學校的午餐，之后，這種設計模式也被舊金山的許多學校采納和推出。
所以，服務中涉及到的利益相關者有很多，多收集他們的想法與建議，甚至讓他們參與到服務設計中去，問題會得到更好的解決。
c.迭代(Iterative)
迭代是一個不斷接受反饋不斷優化的過程，如此重復執行，讓產品變得越來越好。服務設計也需要迭代，不要避免犯錯誤，而是從錯誤中學習和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務進行迭代的核心所在。隨著互聯網的發展，迭代的思維早已滲透到每一個互聯網產品，此處就不再過多解釋。
d.有序(Sequential)
服務設計應該是一系列相互關聯的活動，并且是按照順序進行的，精準的把控服務每一個環節的節奏，用戶才能獲得更愉悅的體驗。
以外賣為例，用戶的使用過程包含訂外賣時的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個過程，而服務的提供者主要包括商家、平臺和外賣小哥，為了保證用戶能夠獲得流暢的服務體驗，需要各個服務提供者在服務展開的不同環節推出優質的服務，如下圖。
在訂外賣時，平臺會為用戶推出“超值優惠”“限時秒殺”等優惠活動，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進入到選擇商品并下單的過程，一方面，商家會推出優惠的活動、推薦菜品等，另一方面，平臺也會給出自己的優惠。
下單后，用戶面臨的是一個配送過程中的等待時間，為了緩解用戶在等待過程中的焦慮情緒，平臺會及時更新和推送外賣小哥的狀態，如到達商家、取餐中、與用戶的距離等，同時會給出用戶預期的送達時間，若超過預期時間用戶還可進行催單，商家可以聯系用戶表達歉意，整個過程用戶對配送狀態是可視的。
用戶收到外賣時首先會與外賣小哥接觸，包括與外賣小哥提前確定取餐的時間地點，取外賣時的短暫對話等，這些都會影響用戶對服務的印象，因此外賣小哥需要保證服務態度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對商家的第一印象，然后是餐品是否符合用戶預期，讓用戶滿意。
在用戶就餐后，首先平臺要提供給用戶評價的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺為用戶提供更多的優惠，引導用戶能夠再次回到商家訂餐。
從外賣的案例中我們可以看到，服務是一個過程，是需要有序展開的，每一個環節的體驗都會影響到用戶對服務的印象，在恰當的環節提供恰當的優質服務，才能確保用戶的整體體驗。
e.真實(Real)
服務本質上是無形的，應該用“物理元素”來可視化，這樣可以用戶的服務記憶，增強用戶對他們所接受服務的感知。
同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團這個平臺和外賣小哥來完成的，用戶和商家的接觸僅僅是送達的餐食，因此無法通過像到店體驗一樣，讓用戶感知到商家提供的更多服務。
為了讓服務變得更加“有形化”，商家就需要花費更多的心思，如圖，商家為了增強用戶對服務的感知，一般會在在包裝上花費很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗也會變得很好，商家的形象也會提升很多。
圖片來源：古田路9號
f.整體(Holistic)
整體就是要著眼于整個用戶旅程，考慮用戶與服務的每個觸點（觸點的概念后文會進行介紹），并兼顧多方利益相關者的需求。也就是所謂的全方位服務體驗，考慮服務環境的方方面面，沒有任何遺漏。這個原則實施起來并不是那么簡單，從整體角度思考問題會使問題變得復雜。不過在服務設計中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務藍圖。
服務設計的常用方法-服務藍圖
a.服務藍圖簡介
服務藍圖是一張圖表，通過列出在每個階段發生的、不同角色執行的所有活動，顯示了服務的整個過程。如圖所示是一個服務藍圖的簡單示例，垂直方向上展示服務中的利益相關者，水平方向上為用戶的歷程，也就是用戶經歷的不同階段。在服務藍圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務，也可以稱之為“前臺”，可見線下方代表的是后臺進程，用戶無法看到但需要給用戶提供支持，后臺進程還可以存在內部交互線，用來表示內部人員的聯系。用戶與前臺服務之間存在另外一條交互線（line of interaction），用來表示用戶與服務之間的接觸。
圖片來源：Service Design Tools
明確了服務藍圖的大致框架之后，還需要注意服務藍圖中一個非常重要的概念——觸點。觸點就是在服務的各階段，用戶和產品、服務、后臺產生的接觸，每個觸點也是服務可以進行展開和優化的方向。
b.Uber服務藍圖繪制
為了明確服務藍圖的繪制和分析過程，下面將結合下圖所示的Uber服務藍圖進行說明。
圖片來源：Medium
(1) 明確用戶歷程
用戶使用Uber打車服務主要可以簡單分為以下三個階段：注冊（下載APP - 新用戶注冊），乘車階段（下單 - 等待車輛到達 - 乘車 - 到達目的地）、乘車后（付款 - 評價）。
(2) 明確利益相關者
用戶與之產生互動的前臺服務人員為司機，而設計師、開發人員、項目經理等負責后臺的服務支持，以保證Uber按照預期的目標運作。
(3) 明確前后臺活動
一方面，需要明確和用戶接觸的前臺活動有哪些，Uber打車服務中和用戶產生接觸的主要為司機及車輛，因此需要確保司機是合格的、車輛內部的環境是干凈舒適的，同時司機在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費用的收取，提醒用戶離開前帶好隨身物品，以及評價乘客等。
另一方面，用戶對后臺的流程可能并不了解，但需要明確哪些后臺活動和支持會對用戶產生影響。比如在用戶下單時能夠自動獲取用戶定位，告知用戶預期的時間和價格，以及發送給用戶司機的狀態等。
在明確前后臺活動時，我們可以以用戶歷程為線，分步驟進行分析，確保每個環節中涉及到的前后臺活動沒有被遺漏。
(4)明確關鍵觸點
在服務藍圖中我們可以標注用戶與服務的主要接觸點，針對觸點進行設計是提升服務體驗的一個重要和有效的手段。
在Uber打車服務中還有一些需要注意的觸點，一是等待時間，這包括用戶發起乘車請求后、付款時以及評價司機時，等待時間是造成用戶體驗較差的一個原因，因此需要注意標注出這些觸點，并想辦法優化，在服務設計中需要注意相關環節的應盡量簡單，減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點，如司機態度不友好、乘客下車時忘記帶隨身物品等，可能造成失敗的服務體驗的觸點應該精心地去設計，避免這樣的情況發生。
通過以上過程我們完成了Uber服務藍圖的繪制，從中可以獲取到Uber打車服務的整體概貌及其相互關系。
///
結語
服務設計的思維能夠幫助我們從全局的角度去審視和思考，發現更多改善服務的可能性，從而為用戶提供更好的體驗。因此對于產品和設計等相關人員來說，不能僅僅把目光放在產品本身，而是要從服務的角度去正確看待產品和用戶的關系，以用戶為中心，找到用戶與產品的每一個接觸點來進行服務設計，這樣才能保證用戶在整個流程中都能得到好的體驗。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶體驗設計就像是一場直面自我的修行，無論是從認知提升、工作能力等維度，都在時間和實踐中不斷去促進自我對事物的探索，在過程中不斷獲取對世界的感知和成就感。在學校里所接觸的關于交互設計的認知，大部分局限于產品領域與基礎交互，而后逐漸過渡到交互體驗與設計的結合并且作用于商業，成長過程中也會不斷思考，這次想聊聊設計價值，大概分為三點：價值思維、價值判斷、價值體現。
我的設計能夠給用戶/產品產生什么價值？如何體現設計的價值？可能很多朋友也會和我一樣有這樣的疑惑，假如能夠在接觸需求后便思考該需求背后的價值，那對應的行動也會有很大差異性。
可能對于大部分的設計師而言，作為主要的執行力，需要肩負起項目的責任，所以會把大部分時間都投身在項目需求和日常溝通來提升自身能力，很少有剩余時間去沉淀已做完的設計，只有在產品體驗會或者其他渠道的反饋中獲取最后的問題，久而久之就像是打補丁，既無法體現設計價值，自身能力也無法得到完整的提高。然而促使設計師進步的往往不是技能的熟練，而是對業務需求思考的廣度和深度。因此需要樹立起價值的概念，價值可以驅使行動產生改變。
價值觀因人而異，而價值觀會影響一個人的行為引導其做出選擇，對價值的思考取決于思維上升空間有多大。因此需要有一個思維模型能夠幫助我們更好的建立起價值思維，可以幫到我們更加有邏輯的思考。相信許多朋友都聽過「Why-How-What」即黃金圈法則，個人認為可以從日常需求中幫助設計師建立起一套價值思維。黃金圈解析：
△ 圖片來自網上
了解黃金法則后，我們看看如何把黃金圈的思維模型運用到工作中。
假設我們接到一個「商城系統」的設計需求，可以嘗試這樣拆分：
WHY：我為什么做
關注點：站在產品角度，對產品真正的幫助和提升
HOW：我要怎么做：
關注點：需求做的更好，超出玩家預期
WHAT：需要做什么
關注點：讓玩家使用更加高效，滿足多種場景
綜上所述，設計師處于不同的階段，所關注的價值層面對應的行動也會不同，不僅要求設計師在需求之外還需要全局思維的思考延伸，了解當前產品階段最需要的是什么，更多需要設計師自我審視，建立價值思維的思考模型，不僅僅停留在行動層的思考。
（我為什么要做）價值觀——（我要怎么做）能力——（我要做什么）行動
「黃金圈」法則可以幫助我們建立起價值思維，然而每個設計師有各自的價值衡量，以下是我認為的一些價值維度：
1. 層次與目標
日常我們總會接受到大大小小的需求，簡單和復雜會摻雜混合，從工作角度而言需求是都要做的，但是從設計價值的角度而言，需求是有輕重緩急之分。那如何進行價值判斷呢，一般的設計需求從目標上可分為三個層次：
2. 二八法則分配
當有了一個基礎劃分后，就可以對需求進行合理評估，考慮到現實情況下通常會面臨這些情況：
時間緊迫：日常需要大量的時間進行協作溝通和跟進
精力有限：任務重加班多，無法長時間保持高效的工作狀態
所以可嘗試根據二八法則對時間精力進行分配，對于一些價值較低的需求，可以和需求方充分溝通，過濾無效信息后快速處理；對于價值較高的需求，投入大量時間與精力設計與打磨。對于初中級的設計師來說，滿足「可用性」和「易用性」是仍需要多加錘煉的基礎能力，對于高級以上的設計師來說，有了一定的經驗下達成前兩者較為容易，可以把更多的時間精力投入在「愉悅感」的設計上。
前面講了價值與判斷，但設計無論是賦能或者是驅動，還是需要明確最終目標是什么，我的理解是最終服務于產品解決問題。那如何體現設計價值就顯得尤為重要，以下簡單拋出兩點：
1. 提升體驗和口碑
雖然不能直接為產品帶來實際收益，但是帶來體驗提升，而口碑的增長相當于為長線運營打下基礎，也為后續進入的產品矩陣留下增長空間，例如最近大火的《天地劫》，相信后續的出品也會讓玩家更加期待。
像這類的例子有許多，例如《王者榮耀》的公眾號還有專門的 UI 迭代日記，即便是運營多年的產品仍然在不斷的打磨和提升體驗，為產品帶來正面影響。
△ 圖片來自王者榮耀公眾號
2. 帶來商業利潤，促進社交、消費增長
這類體現通常是商業化/社交相關，《陰陽師》眾所周知的抽卡系統和「畫符咒」的交互方式也帶來了大量的社交互動和用戶增長，還有《Pokémon GO》捕捉寶可夢和「投擲精靈球」，促進了玩家大量的線下的互動場景，我認為這些都是設計價值的體現。
這些設計相對于大部分玩家是一種「隱形」的存在，不像角色、場景設計等容易被感知，對于設計的價值體現一定不只是給產品錦上添花，是能夠通過對用戶/玩家群體的理解去塑造和滿足需求。
文章來源：優設 作者：阿澤與設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天，我們來談談有關使用的三個概念的含義：有用性，可用性和實用性。前兩個術語，：有用性，可用性，在用戶體驗和設計方面被廣泛使用，而第三個術語，實用性，很少被提及。然而，我們將會提到，在三個術語中，實用性可能是對設計師和企業來說最重要的一個。
Author/Copyright holder: MsSaraKelly.
有用性
一個有用的產品能讓用戶完成一個任務或目標。這些任務或目標只有在一些情景中才是明確且意義重大的，其他情境中則不行。
例如，用戶使用文字處理程序包，如微軟的Word或者LibreOffice中的Writer能夠制作文字文件，包括信件、報告、整本書等等，但任務是明確的，結果是看得到的。我能用這個工具寫信嗎? 是的,你可以。對于任何想使用文字處理程序包的人來說都可以。
另一方面，一件藝術品可能對某個人是“有用的”，可以照亮他們的工作室，但可能對另一個人就沒用了。藝術具有主觀性，這意味著不同的人對“點亮工作室”這個任務有著不同的要求，可能需要極為不同的產品來達到這個“有用的”標準。
然而，無論提到哪種有用的形式，重要的是有許多潛在用戶認為產品有用。(從商業角度來看，至少要有足夠的用戶才能讓產品盈利)。
任何用戶都不可能接受沒用的東西。
Author/Copyright holder: Alastair Cook.
可用性
可用性針對的是某個特定產品?？捎眯哉f明產品不僅具有有用性，它還要仔細考慮產品的使用方式，以及確保用戶愉快、簡單(或盡可能簡單)且有效地使用產品。
大衛·麥奎琳曾在《達爾文》雜志中發表文章《可用性》，里面提到;“可用性與人類行為有關。它承認人類是懶惰，情緒化的，不愿投入大量的精力做事，比如，獲得一張信用卡，他們通常更喜歡做容易的事，逃避難做的事情?！?
許多“有用的”產品并不具有可用性。想象一下，有一扇門，外面有個把手，上面寫著“只能推”。門肯定是一種有用的產品——它把里外分開，可以確保人們有效地使用空調和暖氣，還能降噪，等等……
但是一個需要指示的門可用性有多大呢? 其實，一扇門也就只能推或者拉。從用戶的角度來看，當他們看到門時，他們應該清楚地知道需要采取什么行動——如果不能而且需要一個標志來解釋; 那么這個門的可用性太小。
值得注意的是，對于一個產品來說，即使可用性小也沒關系，但要不具備有用性才是真的糟糕。你看當今世界上有很多帶有“推”或“拉”標志的門，這就說明了這一點?？捎眯暂^低通常只是一個小麻煩(你可能會抱怨那扇門有多不靈活，但你可能不會去修——因為付出太多回報甚微)，而不會影響全局。
然而，許多品牌(如蘋果)已經建立了整個產品線，設備比他們的競爭對手更具可用性，即使用途實際上是一樣的。例如，iPod并不是世界上第一個MP3播放器。然而，從用戶的角度來看，這是當時最好用的MP3播放器。正是良好的可用性讓iPod從一眾MP3里脫穎而出，成為世界上最暢銷、最受歡迎的播放器。
Author/Copyright holder: Aido2002.
實用性
一個產品既具備有用性又具備可用性，但仍然不能被使用。設計的最終目標不是讓產品具備這兩種性能，而是讓用戶能用上這個設計。如果沒有用戶使用，這個產品就是失敗的，不管它的設計有多好——它仍然是個敗筆。
在個人交通領域有兩個有名的案例。第一個例子可能對于大多數讀者來說非常陌生遙遠—辛克萊C5。克萊夫?辛克萊爵士(Sir Clive Sinclair)是計算機行業的一位領軍人物，他普及了計算機并使千家萬戶都用上了這款產品。他旗下的ZX Sinclair系列電腦賣出了數百萬臺，全世界的家庭里都傳出磁帶游戲的嗡嗡聲，十分快樂。
成功后，克萊夫爵士決定公布他的酷愛的一個項目—單人電池供電的環保汽車。(盡管它在營銷文獻中被稱為“輔助踏板自行車”)?？巳R夫在C5產品的投放市場時投入了數百萬英鎊。這款產品既具備有用性，也具備可用性，但遺憾的是，人們討厭它。沒有人使用C5，英國電視和媒體經常嗤之以鼻。該產品最初的產量為14000臺，結果直到公司破產前，只售出了5000臺。
第二件事就比較新?！百惛裢笔且环N個人交通工具，可以讓用戶用兩個輪子去（幾乎）任何地方，它于2001年推出，2002年投放市場。它的發明者迪安·卡門(Dean Kamen)預測在世界各地銷售上百萬臺。事實上，在投放市場后的6年里，它的銷量還不到3萬部。該公司已經出售和轉售多次，自從它推出，雖然賽格威滿足了少數人的需求，取得了些成功。但事實卻是，人們不使用這種工具。
為什么這兩個具備有用性和可用性的產品沒有得到使用？在Sinclair C5的案例中，產品未能滿足特定的需求。正如BBC最近提到的，如今公眾的環保意識十分強烈，Sinclair C5產品可能非常受歡迎，但在C5發布的時候，環保問題還沒有這么迫切。
Author/Copyright holder: Aido2002.
以賽格威為例，《連線》雜志說：“但這根本沒用: 賽格威在技術方面無人能及?？上н@毫無意義?！霸摴疚茨艽_保產品在發布時通過過相關法律規定(在許多地方在公共場合使用它們不是合法的，現在仍然是不合法的)?！痹缙诘氖褂谜咭矆蟾嬲f，他們因為使用賽格威電動車而遭到嘲笑，形象受到詆毀那么銷量肯定無望。
一個成功的產品肯定要得以應用。就算生產了一個具備有用性和實用性的產品，但用戶仍可能不想使用它。
如果要使用一個產品，它必須是有用的。但如果沒有得到使用，它就沒有意義，這意味著它永遠不會成功。一個產品也應該具備可用性，以增加使用的機會——一個產品的可用性越大，用戶用起來就越舒心，也會更容易說服別人使用它。然而，就算具備可用性和有用性，也不能保證一個設計得以使用。除了可用性和有用性之外，還有其他的考慮因素會影響產品的市場普及度。
文章來源：站酷 作者：馬克筆設計留學
藍藍設計( 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 提議引入“點擊=播放”的操作方式。但當他們設計出了這樣的優化方案后，卻發現在測試過程中老用戶們對這樣的交互方式感到陌生和沮喪?；谟脩舴答?，最終，他們采取了一個折中的方案，既保留了原先的復選框作為多選操作的區域，讓用戶仍然能夠選擇樂曲生成列表并且播放；同時又引入了點擊單曲直接播放的操作。相比第一版優化方案，用戶的接受程度有了明顯提升。
△ Melon 播放器的點選操作邏輯
設備環境
10 年前，高端大屏幕手機在東南亞和非洲市場普及率并不高，因此產品出海時需要考慮當地常見的設備是什么，并作出相應的適配。近幾年，隨著市場經濟的發展以及中國手機的成功出海，即使是東南亞和非州的發展中國家，高端移動設備的普及率也已經很高，這為設計師在考慮通用性的過程中減輕了不少負擔。不過，在為每個地區的用戶做產品設計時，仍然需要調研清楚當地設備的使用情況，比如什么樣設備更流行、普及率更高；如果某一地區的設備不夠發達，那么設計的操作也需要考慮到設備不同所造成的差異。
業態/監管
在不同的國家或者地區，各個行業的標準與制度也可能存在很大區別。例如財會軟件行業中，在北美和英國占據了重要市場份額的 Quickbooks、Xero 等公司，卻無法成功打入歐洲一些國家的市場。因為財會軟件本身的功能、流程設計與當地的財務制度是緊密相關的。在這樣的情況下，歐洲本土的企業顯然會對當地的政策和制度更加熟悉，也更容易設計出符合當地企業與會計需求的財會產品。
2015 年，Airbnb 進入中國市場。在最初的市場調研和用戶調研之后，針對本土化，他們所邁出的第一步就是根據中國的業態環境對產品的前 10%和后 10%做了改造。其中，產品的前 10%指的是登錄這一類用戶開始使用產品所需要進行的步驟，而后 10%指的則是支付等用戶完成一個完整流程所需要進行的操作。因為當用戶進入到產品主要鏈路中時，其功能流程基本相通（搜索地點、挑選房間、瀏覽信息等），不需要做過多的改變；但產品的前 10%和后 10%則決定了用戶能不能把產品用起來并不遇到障礙。因此，針對登錄的部分，愛彼迎將原先的 Facebook 等第三方登錄替換成了微信與微博賬號的登錄；而在支付的部分，愛彼迎引入了支付寶與微信支付的方式，打破了中國本土用戶進入產品和完成訂單的壁壘。
△ Airbnb 產品中國本土化的“前 10%與后 10%”策略
社會經濟
社會經濟環境的不同代表著社會階層狀況的不同，它會影響人們在消費時的行為方式。螞蟻金服在調研菲律賓市場時發現，當地擁有銀行賬戶的人口僅占了總人口的 34%，同期中國擁有銀行賬戶的人口則占了總人口的 85%。而這 34%的人基本上都是當地的富人及中產階層。在貧富分化嚴重的菲律賓，大部分普通民眾是沒有銀行賬戶的。這一人口學特征很大程度影響了螞蟻金服電子錢包業務對菲律賓目標用戶的描繪，繼而影響了產品各個層面的設計。
文化/宗教
在各個文化/宗教里存在著不同的意象，也會有各自的表達方式與禁忌等等。在某個文化下表示友好的行為，在另一種文化下可能是一種冒犯。這些都是在設計時需要去注意的。除此之外，在不同的文化/宗教語境下，人們會有不同的行為模式與價值取向，這里我們會引入一個模型——霍夫斯泰德文化維度模式，來對這一問題進行更詳細的解讀。
霍夫斯泰德文化維度模式是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個理論框架。它可以幫助我們對于不同文化群體的價值觀有一個較為全面的了解，從而更明白該文化群體中人們的行為傾向。此理論總結了衡量各文化價值觀的六個維度：
權力距離指數（power distance index，縮寫為 PDI）：指在家庭、公司、社區等組織機構中地位較低的成員對于權力分配不平等的接受程度。權力距離指數高的文化，組織更中心化、有特定的等級秩序、更容易聽從領袖的決策；而權力距離指數低的文化，組織更扁平化、主張人人平等、更傾向于自己做判斷而不易受控制。
個人主義（individualism，縮寫為 IDV）：與集體主義相對，指個人融入集體的程度。個人主義越高的文化，自我意識更強烈，更看重依靠個人努力獲取利益和價值，追求隱私保證和自由；而個人主義程度越低的文化，會期望得到“團體”的照顧，更忠誠地依賴于群體和熟悉的社交關系，更傾向跟隨主流價值觀做決定。
不確定性規避指數（uncertainty avoidance index，縮寫為 UAI）：指社會能在多大程度上容忍不確定性。不確定性規避指數越高，人們會更遵循規則，恐懼變化、喜歡熟悉，并且習慣通過已知經驗推演事物邏輯。而不確定性規避指數越低，人們會更有更強的安全感，對變化的包容性更強，有著更輕松的生活態度，鼓勵冒險，對風險的承受度更高。
男性化（masculinity，縮寫為 MAS）：與女性化（femininity）相對，指人們（不論男女）更富有競爭精神，自信與野心，注重財富和社會資源的積累，而女性化社會責注重人們之間的關系和生活的品質。故男性化程度高的社會，人們會更加自信、進取、好勝，追求英雄主義，關注物質成功及權利地位；而男性化程度低的社會，人們會更加注重合作與謙和，信奉中庸共識主義，更享受生活、關愛他人。（注：男女平等）
長期導向（long-term orientation，縮寫為 LTO）：最初名為“儒家動力”（Confucian dynamism），指社會對未來的重視程度。長期導向的社會，注重堅持不懈和節儉，愿意計劃未來生活，也會設定長期目標；而短期導向的社會，會認為活在當下更重要。
放任與約束（indulgence vs. restraint，縮寫為 IVR）：指社會成員在多大程度上意圖控制自身的欲望。放縱指數越高的社會，人們會更加樂觀、積極、沖動，認同隨心所欲的觀點，更傾向自我欲望的滿足和表達；而克制指數越高的社會，則會在心態上更加嚴肅、嚴謹、審慎，會有更嚴格的社會規范制度，而認為休閑娛樂不重要。
使用他們官方網站（ https://www.hofstede-insights.com/ ）上的 Culture Comparison Tool，可以查詢到各個國家的文化維度指數，也可以選擇不同的國家進行對比。
△ 日本與荷蘭的文化維度指數對比 – hofstede
在為特定地區的用戶設計產品時，我們可以從這些維度去解讀他們的行為傾向，并據此提出相應的解決方案或者設計方案。滴滴團隊在開拓墨西哥市場時，根據墨西哥的文化維度指數在產品的本土化上制定了從功能到外觀等不同層面上的設計策略。
△ 墨西哥地區的文化特征指數
△ 滴滴墨西哥的本土化設計策略
這類源于文化差異的設計差異并不少見。在淘寶等國內的電商平臺上，“按照銷量排序”是一個被高頻使用的功能，消費者們認為什么產品買的人多，什么產品就更好。這樣的觀念也催生了一大批店家刷單的行為。但當在北美的電商平臺亞馬遜上，我們會發現并沒有按銷量排序這個選項。因為美國的用戶相對來說個人主義更強、更相信自己的判斷和選擇，他們不認為他人推薦的就一定是好的。
△ 國內外電商平臺對比
在企業即時通訊工具行業，國內的主流產品，如企業微信、釘釘等，都選擇了藍色這一比較沉穩的顏色作為主色調，在產品功能的形態上也偏向于嚴肅。而海外的辦公產品 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.”產品的出海其實只是我們在設計中會遇到的一種場景，在這個特定場景下我們的設計思考與其他場景下是互通的。如果僅僅完成了翻譯這一步，那我們就忽視了在新市場下另一群用戶的特征、需求、使用情景、操作習慣等關鍵信息。無論是不是在為產品的出海而設計，我們始終應該保持對用戶的好奇，讓最終的設計實現我們期望達成的目標。
文章來源：優設 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2015年之后的中國互聯網，人口紅利、流量紅利逐漸退場。2019年遭遇第一場資本寒冬，上半年投資總金額同比下降了58.5%。也在2019年，“精益創業”、“精益數據分析”、“增長黑客”等一系列數據思潮開始流行。而UX設計師作為半個產品經理，我們很容易將這股“數據熱”遷移到自己身上：每個UX設計師都要學數據分析了嗎？數據和設計是什么關系？天天盯數據會限制設計師的想象力嗎？數據到底要怎么用？……
過往，設計師一般不會把“數據”掛在嘴邊。我們提倡“以用戶為中心，打磨極致用戶體驗”，較少考慮成本和商業效益。
通俗來說，就是產品經理負責“生意”，設計師負責“體驗”。以“造鞋”為例子，產品經理做了市場調研，決定要生產兒童運動鞋，設計師負責設計“適合4-11歲的兒童在城市公園玩鬧”的鞋子應該長什么樣、穿著它跑跑跳跳是不是舒服的。但是設計師不需要擔心運動鞋的銷量，產品經理則要跟老板匯報銷量業績。
在紅利消退、產品同質化嚴重和快速迭代的多重壓力下，UX設計迎來了更高的挑戰：僅憑主觀判斷“好不好用、好不好看”來打磨產品內在體驗，不考慮產品的生存、增長和盈利，很難在行業立足。與此同時，隨著數據采集工具的日漸成熟，數據以“客觀”和“便捷”兩大特點，幫助我們更快獲得“設計的依據”。精益化設計是必然趨勢，而“數據分析”是精益化設計的手段之一。
沿用“設計鞋”的案例，UX設計師要在自己所在領域思考：在設計調研的過程中，我們用什么數據指標來衡量這個兒童鞋好穿、好賣？在鞋進行批量生產前，我們有沒有數據資源支持我們研究父母/小孩對鞋子外觀的偏好、小孩運動時容易受到哪些物理傷害等等？如果有條件進行小范圍的數據實驗，我們如何設計數據實驗來評估好穿好賣？
“理解任何事物都需要先對它進行定義，這樣才能夠在頭腦中清楚地知道正在討論的是這個東西，而不是其他東西。”非常喜歡美國經濟學家Thomas Sowell在《經濟學的思維方式》里說的這句話。
如果我們對“數據”下定義，那么產品設計語境中的“數據”具體是什么？數據是怎么產生的？
從數據采集手段來看，互聯網產品的數據來源主要有3個：二手資料數據、問卷調研數據和應用埋點數據。
行業數據和競品數據一般通過二手資料獲得，包括商業交易數據、用戶群的態度和意愿、用戶輿論指數、競品的用戶規模和盈利狀況等宏觀數據。常用的搜索渠道有：百度指數、企鵝智酷、艾瑞、尼爾森、各大科技資訊平臺等。
我們可以將這些理解為“市場數據”，在立項期對產品方向有一定指導意義，能快速了解市場概況，也能幫助產品思考差異化定位的問題。
以“騰訊文檔為”項目為例，我們想提高騰訊文檔用戶創建文檔的成功率，通過模板創建文檔是關鍵路徑之一。研究用戶通過模板創建的路徑時，想大概了解用戶找模板時可能會在意什么。于是我們嘗試使用百度指數搜索“模板”、“文檔模板”、“PPT模板”、“Word模板”、“Excel模板”，從搜索量得知：PPT模板搜索量最高，符合我們的推測；Word模板內容中，簡歷、合同需求量較大，而部分用戶只是想要好看的Word背景等等。雖然我們得到的有效信息不多，但我們能夠通過二手資料的方式，快速了解用戶需求的基本面。
問卷調研數據是通過向目標用戶發放問卷獲得的，側重于收集人口學信息、用戶自述的歷史行為、主觀態度或意愿，比如用戶滿意度調查、流失用戶原因調查等。本質上是通過建立假設、再進行抽樣統計的方法來得到用戶口述的答案。也就是，問卷傾向于聽用戶說了什么、而看不見用戶真正做了什么。嚴謹的問卷分析也會比對后臺數據，校驗用戶說的和做的是否一致，以清洗無效數據。
較之于問卷調研數據，我們想看“用戶做了什么”，則通過分析應用埋點數據獲得。
“應用埋點數據”也叫“埋點數據”、“前端頁面數據”，我們可以簡單理解為“通過技術手段獲得用戶在應用內（網站、客戶端、小程序等）的操作行為數據”。其背后原理是：用戶和界面發生交互，系統需要向服務器發送請求和返回請求，把這些請求預埋一段計數代碼，就能得到頁面的曝光數據和用戶的操作數據。
埋點需要產品經理或設計師做好數據指標的定義，跟開發工程師提前溝通，讓開發工程師在代碼中嵌入埋點。一個埋點由多個字段組成，規范地定義字段，有利于我們在數據平臺搜索埋點更方便。當我們懷疑數據有效性時，也更方便排查埋點問題。
埋點類型可分為曝光埋點、操作埋點和時長埋點：
1. 曝光埋點可以捕捉頁面被展示的次數，可以是針對整個頁面，也可以是頁面中的某個區域。即我們常說的PV、UV。
2. 操作埋點則是在用戶對頁面某個區域（按鈕、卡片、提示條等）進行手勢操作（點擊、雙擊、長按、滑動等）時，進行打點記錄。對應的，也稱之為某個操作的PV、UV。
3. 時長埋點是通過標記以上兩類埋點、并計算時間差獲得的。比如，我們記錄用戶選取模板耗費的時長，可以通過離開頁面的時間（t2）-進入頁面的時間（t1）計算。而離開頁面則用點擊左上角返回按鈕、點擊具體模板等“離開”操作來核算。
基于以上3種原始數據，我們可以運算得出點擊率、功能滲透率、人均點擊次數、人均使用時長等具有對比價值的數據。
較之于二手資料和調研數據，埋點數據更加貼近用戶的真實表現，作為反饋指標的靈敏度更高，可挖掘性更強，也能作為客觀衡量指標引入到每一次產品迭代中。
設計師理解埋點的原理，有助于在數據采集環節跟數據開發更好地溝通，并提出合理的數據需求。另外，當我們拿到一組數據，也需要從根本原理上去判斷數據的信度和效度，確保數據沒有質量問題再進行下一步分析。
數據分析能力會在UX設計師的崗位招聘要求中被提及，但除了電商和廣告行業的數據化設計知識體系較為成熟，其他領域還在探索。另外，相比于市場營銷、產品經理、產品運營等職能，設計師的分析框架是相對晚熟的。
實際上，我們很難從招聘廣告中歸納“具備數據分析能力的設計師”長什么樣，但我們期望這樣的設計師對數據的感知力強、分析邏輯清晰、數據經驗豐富，對某個垂直領域的數據儀表盤了如指掌等等。
數據對UX設計有什么用？或者說，在設計鏈路的哪一個環節，數據和設計才能發生化學反應？
UX設計日常流程為：得到一個需求（需求評審/需求挖掘）——輸出設計方案（設計決策）——驗證設計方案（設計實驗）。順著這個流程，我們來看看數據在UX設計各階段的作用。
肖恩·凱利斯在《增長黑客》開篇就提到“倉筒組織”這個概念：職能組織有各自的KPI，但未必對最終的業務目標都有利。比如開發人力有限的情況下，產品經理想上線新功能，市場運營想搞推廣活動，設計想做UI大改版做炫酷的動畫——就像N匹馬有N個方向，馬車跑不快。
尤其是當產品進入成長期，我們會發現“能做的事情真的太多了”！不僅僅是來自老板和產品經理的需求，每天都有用戶想教你做產品，剛剛競爭對手又上線了N個新功能等等。另外，當多個產品經理分管不同業務線，每個產品經理都會認為自己提的需求優先級最高。那么，ABCD這幾個需求，哪個更值得即刻實現？
有目標導向和成本意識的設計師，不會拿到PRD就開始畫稿，而是做需求評審。下次產品經理給你提需求，或者自己想要主動提案，不妨從下面幾個問題開始思考效益。
如果這個新功能上線或對已有功能做這些優化點：
｜正向評估：如果做，能使哪些用戶在什么場景受益？用戶會因此使用、消費、甚至推薦我們的產品嗎？
｜負向評估：如果不做，是否會造成用戶口碑變差，甚至棄用我們的產品？
｜數據導向：預估這個需求對大盤數據（AARRR）有何貢獻？如果無法在短期看到對大盤數據的直接提升，應該取什么樣的數據指標來評估其價值（GSM模型）？
｜比對優先級：目前有ABCD四個需求，而人力資源有限，當下最應該解決哪個數據環節的問題？
我們以騰訊文檔的Excel按行填寫功能為例，闡述如何在需求評審階段就思考數據效益。
一開始，我們只是從用戶吐槽中了解到在手機端使用Excel錄入信息的困擾：協作人之間容易竄行誤刪誤改別人填寫的行，甚至把創建人輸入的表頭信息都給刪掉了。
我們模擬信息收集場景，摘出Excel移動端輸入的體驗節點，發現“在有限的屏幕內去處理表格信息，需要來回滾動/縮放表格，再回到自己的行再輸入”這一點最容易發生錯誤，尤其在沒有凍結首行的情況下。
我們有收集表功能，也支持表格轉收集表，但是都依賴創建人主動去使用這個品類/這個功能。我們是否可以在創建人不干預的情況下，直接把來回滾動的表格輸入變成縱向的表單輸入？
以上都是從“感知”角度發現和分析問題，確認了“存在這么一個問題”，然后提出了一個可行的想法。往往這個時候，我們容易為之興奮。
但是如果我們堅持更精益的投入產出比，我們應當評估“這是不是一個要優先解決的問題”，即評估收益：改變Excel移動端的輸入體驗，能帶來什么收益？
首先，我們做正負向評估。
｜正向評估：如果做，用戶可以在手機端更順暢地錄入信息，避免串行刪改的錯誤。雖然這不足以吸引新用戶使用我們的產品，但這個體驗未在競品實現，能形成差異化的記憶點，也許能帶來好的口碑。
｜負向評估：如果不做，手機端的Excel輸入體驗跟其他競品無差，用戶倒不會因此流失，但是創建人會因為協作者的犯錯苦惱，也許會因此轉為采用“IM一對一溝通”來避免出錯。
然后是設定數據目標：如果這個功能落到數據板上，能作何貢獻？
｜數據導向：我們預期這個功能能夠通過提升手機端的輸入體驗，來避免用戶出錯，降低創建人整理數據的負擔，以提高用戶留存（而非預期這是一個拉新功能）。并且，設計假設正確，應該能通過一些數據指標看到用戶的行為變化。
最后，對比同期提出的幾個產品需求，評估優先級。
｜比對優先級：假設Excel按行填寫的需求是A（圖中黃色點），同期有一個影響文檔安全分享的需求B。如果我們按照正負向評估去考量優先級，將AB兩個需求都放在象限圖里，越外層越應該優先處理，那么我們就應該優先處理需求B。
以上是為了將思維可視化呈現給讀者，實操時更重要的是數據意識和敏感度。圖示僅供參考，用何種形式表達不重要。
掌握一套清晰的需求評審思路，才有話語權去討論這個需求是做還是不做、即刻要做還是延后再做。這不僅僅是UX設計師需要具備的目標導向思維和需求分析能力，而是整個團隊都應該建立的數據意識和工作流。這也適用于對設計師提案的自我審查，避免自娛自樂。
產品在不同的成長階段關注的短期效益會有所不同。初創期，產品先要驗證其假設的需求是不是用戶真實需求、商業模式是否可行。當產品發展到一定的用戶規模，我們可以通過對比關鍵數據指標，去判斷現階段是否符合預期。這就像我們去醫院抽血做體檢，血樣指標可以反映我們當前是否健康。
如何檢驗產品健康度呢？我們首先關注宏觀的數據轉化是否符合預期，即AARRR。海盜指標這一套，想必大家耳熟能詳。但對設計師來說，難點在于如何將宏觀數據轉化與具體的用戶使用場景進行關聯，進而落實到具體的設計任務。
以騰訊文檔為例，在線文檔的核心用戶價值是“從創作到協作的多人多端無縫同步”，因此我們定義用戶的關鍵路徑是“創作→分享→協作”，即：
基于關鍵路徑，我們繼續下鉆分析每一個環節，建立用于監控“轉化質量”的行為漏斗。比如在“分享”這一步，落到APP里，這個行為漏斗是：
我們發現僅30%的創建人在分享文檔前設置了非私密權限——這個數據并不符合我們的預期，因為這會導致創建人分享文檔后，協作人無法直接查看或編輯文檔。協作人需要進行權限申請，創建人則需要處理相應的權限申請通知或更改權限，從“申請權限”到“審批通過”的時間差降低了協作效率。
我們進一步去找關聯的數據指標，來確認“這給用戶造成了困擾”——“有多少用戶在文檔分享出去之后再返回來設置權限”‘、“一個創建者平均要處理多少次權限申請”等等。
通過小范圍的用戶測試，我們了解到“權限設置”是一個視覺盲區。于是，我們優化分享頁的信息展示，來改善“用戶看不見權限設置”這個問題。另外，當創建人在處理權限申請的通知時，提供修改權限的入口，以避免重復處理同一個文檔的申請消息。
最終，我們將“分享前進行權限設置”的轉化提高到80%——吹牛的，業務數據太敏感，無法以真實數據跟大家分享，本文的數字皆為脫敏數據。
這就像一個剝洋蔥的過程。先找到產品的核心價值和對應的主路徑，再拆解到對應的多個用戶任務流，關注微觀的某個環節轉化是否有問題。利用數據診斷產品健康度，然后繼續用數據或其他研究方法下鉆，下鉆到可以落地到設計點的層面。
2016年聽了白木彰老師在杭州的一次現場分享，他對“Design”的理解非常透徹。“Sign”是“標志”，應該是大家最共通的常識，就像國旗是這個國家的sign。那“De”是什么？臺下有人回答“重新定義”，而白木彰很自信地說：“不，這是一個否定詞”。
對于UX來說，同理。每一次的設計都是一次否定，否定現有體驗的合理性，否定現有的產品、服務或某一功能完全滿足需求。反過來想，則是審問自己的設計方案：每一次的“否定”，真的更好嗎？
這里舉一個“小需求”為例：騰訊文檔Excel的PC端右鍵菜單高度優化。筆者目前負責騰訊文檔編輯模塊的UX工作，日常就是很多這樣的“小優化”，其實這更加考驗數據敏感度和對“嚴謹”的堅持。
需求背景就是用戶反饋“右鍵菜單太長了，小屏幕看不到菜單底部的內容”。
“展示問題”的解法有很多：
解法1/ 用UI手段，降低單個menu item的高度。
解法2/ 重新歸類，通過折疊來縮短菜單。
解法3/ 當菜單無法完整展示，重新錨定其在屏幕的坐標。
對比競品，確實有表格產品通過（2）去解決這個問題，但是我們撈數據發現：右鍵菜單中，插入行列是高頻操作（紅色部分），點擊次數比其他功能高5～130倍，且人均點擊量分別是3次和2次。我們決定不去對增加行列進行菜單折疊，因為這樣做雖然我們解決了“菜單太高”的問題，但降低了點擊效率。
接到某個需求的“A問題”，我們容易一葉障目。但是，會不會因為我們解決了A問題而引發B問題呢？數據幫助我們快速決策，避免B問題的出現。謹慎對待每一次小設計，因為每一次小設計都是一次否定。
大家對數據實驗應該不陌生，常用的方法有AB測試和灰度測試，是一種控制變量的抽樣實驗方法。
AB測試是指通過抽取抽取等量用戶樣本進行AB兩個設計方案的投放，對比兩組數據，進行方案擇優。這兩個方案的差異要嚴格控制在“僅有一個因素的差異”。這跟我們初中做生物實驗論證“一棵小樹的生長需要陽光”的思路一樣：兩組等量的小樹，一組有陽光，一組沒有陽光，經歷相同的時間后對比生長的平均高度差。水、空氣、養分等其他條件要嚴格一致。因此大改版等“多變量”的設計并不適用于AB測試去印證。
大改版則通過灰度測試或拆分變量去做AB測試來確保效果?；叶葴y試是指如果軟件要在不久的將來推出一個全新的功能，或者做一次比較重大的改版的話，要先進行一個小范圍的嘗試工作，然后再慢慢放量，直到這個全新的功能覆蓋到所有用戶。也就是說在全量發布的黑白之間有一個灰，所以這種方法也通常被稱為灰度測試。
設計師需要觀察綜合的數據指標，以騰訊文檔為例常規的指標有：PV、UV、人均點擊次數、功能滲透率、使用該功能的留存率等等。另外是多渠道收集用戶反饋，包括騰訊文檔的“吐個槽”社區、微博搜索關鍵詞、隨訪身邊的用戶朋友等。
數據化設計不是對“精心打磨體驗”的否定。恰恰相反，對設計工匠來說，數據分析能力是一種新的“打磨工具”，提倡在設計實施和決策過程中更科學和客觀。UX和數據的關系，就像我們期望鞋子被量產之前能夠有數據佐證“這款鞋好看好穿好賣”，而不是否定“好看又好穿的鞋子能帶來更好的銷量”。
文章來源：站酷 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近公司在梳理整個產品在用戶體驗層面上可優化的問題，然后匯總整合。公司的交互專家就提出可以利用尼爾森可用性原則來將所以問題歸類，進行整合。
What？尼爾森可用性原則是什么這么厲害？雖然之前也有聽到過這個原則，但是具體的內容并不是很熟悉，于是打開百度開始搜索……
尼爾森（Jakob Nielsen）是一位人機交互學博士，于1995年1月1日發表了「十大可用性原則」。十大可用性原則分別為：狀態可見、匹配現實、用戶可控、一致性、認知易取、防錯、高效靈活、優美且簡約、容錯、人性化幫助。
十大可用性原則既可以用來指導Web端，也可以指導移動端，當然其他涉及交互的場景也同樣適用。
知道了這些基本信息之后，也看了一些其他大佬對可用性原則的理解和感悟的文章，接下來我自己羅列一些具體案例來幫助理解和記憶這些原則。
系統應該在適當的時間給與合適的反饋，以此讓用戶了解正在發生的事情。
個人理解：產品應該清楚地告訴用戶任務當前的狀態、流程進度。
案例：
「狀態加載」是最簡單的狀態可見的展示，告訴用戶當前是加載狀態，讓用戶在等待過程中不會焦慮
「未讀提示」讓用戶知道有需要了解的信息還是未讀狀態，讓用戶可以及時了解
「更新提示」在視頻、閱讀、電臺等產品中會用的比較多，讓用戶實時了解更新狀態
外賣配送信息、快遞物流信息的顯示也是狀態可見的一種
「操作提示」可以幫助用戶知道自己已經操作成功，并且在有效進行中
系統應該說用戶習慣的語言，比如：用戶熟悉的單詞、短語和概念，而不是系統導向的術語。遵循現實世界的約定，使信息以自然且合乎邏輯的順序出現。
個人理解：產品的文案提示應該是用戶熟悉的語言，設計風格應該符合目標用戶的喜好，信息的呈現盡量貼近真實世界。
案例：
「特有風格」在二次元、金融產品、某類人群專用產品等會表現的更突出，特有的設計風格和專業的術語會讓用戶對產品更有信賴感
「模擬現實」在運動軟件、AR游戲中比較常見，讓用戶更有真實感
當用戶錯誤地選擇了的某個功能后，系統需要提供一個明確的「緊急出口」，來讓用戶離開其不想要的狀態，而且無需額外的對話框，支持撤銷和重做。
個人理解：當用戶誤操作之后，可以有撤銷重做的選擇，可以后悔。
案例：
「返回、關閉」就是最常見的讓用戶可控制的按鈕
「撤回」某些聊天軟件的幾分鐘內信息可撤回并且支持重新編輯
我們不應當讓用戶去懷疑不同的語句、狀態或操作是否在表達同一件事。設計需遵循平臺的慣例。
個人理解：同一個產品需要統一的設計規范，同類型的產品也應該遵循基本的用戶習慣。
案例：
「規范統一」是指風格統一、交互統一、視覺統一
「同類型統一」可以讓用戶在使用過程中更加方便，沒有壓力
PS：網易云音樂和QQ音樂的操作有些不一致，切換使用會稍微不習慣
通過將對象、操作和選項進行可視化，最大限度地減輕用戶的記憶負擔。用戶不需要記住對話框中某一部分到另一部分的信息。系統操作的指示信息需要易于被用戶發現和獲取。
個人理解：就是把需要記憶的信息呈現出來，讓用戶直接確認就行。
案例：
「歷史記錄」保留用戶的查看和搜索信息，方便用戶后續查看
「關鍵信息」在購物車中的顯示非常重要，可以方便用戶直接確認下單
「觀看記錄」在讀書、視頻類的產品中非常重要，不需要用戶去記憶上次看到的節點
文章來源：UI設計 作者：IAM蒼蒼君
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在有一次面試的時候，我問候選人一個問題：你覺得你作為設計師，最擅長的是什么？候選人回答我說他最擅長的是移動端的設計。
緊接著我又問主流的移動端設計規范有哪些呢？他開始支支吾吾說不出所以然，我再次提醒他做移動端的時候是怎么做的，有沒有參照什么設計規范？他歸納總結了半天，說是去參考一些比較成熟的 APP，看他們是怎么做的。
他的回答有問題么？有問題，錯了么？也沒錯。但是他沒有聚焦問題，也對成熟的設計規范一無所知，成熟的 APP 設計規范本身也是屬于可參照的坐標系；但他們都有一個更加底層的規范，那就是 iOS 設計規范和 Materia Design 等移動端設計規范。
他的回答更多像是知其然而不知其所以然，這些設計規范我們可以理解為一種被普遍接受且廣泛運用的方法論，而我們在做設計的時候，就是在有意或者無意中運用這些設計規范進行輸出方案。
萌新設計師拿到需求就開始上手畫圖，設計老油條拿到需求會思忖再三；萌新設計師設計過程中東借西鑒，設計老油條設計過程中會運用完整的設計體系；萌新設計師評審設計的時候總是三緘其口，設計老油條評審設計的時候口若懸河。
是什么導致這兩者之間的差別呢？
這就涉及到設計進階中的一個重要的問題了：你在做設計的時候，有沒有自己的方法論？
百度百科上對于方法論的定義是“關于認識世界、改造世界的方法的理論”。
如果聚焦在設計行業，可以理解為，關于分析問題、解決問題的方法的理論，初級的設計師傾向于通過經驗化的手段解決問題，高階的設計師則通過一定的設計理論去支撐自己的設計，關于方法論的沉淀，可以看出設計師個人能力階段。
1. 總結歸納
像軟件工程師一樣，每個人都有自己的技術棧，設計師也可以這樣理解，你的職業成長依賴于相關的某一行業；因此你的“技術棧”，構成了你設計能力的基本盤，大類比如 B 端交互設計師和 C 端交互設計，體驗設計師和視覺設計師等，小類如 B 端可視化設計師、C 端動效設計師等。
在各自行業積累的經驗，是我們個人技能的護城河，通過對這些經驗的總結和歸納，我們在遇到類似需求的時候，可以快速復用；這也是為什么招聘的時候一般會要求有類似行業經驗的設計師優先。
同時，我們在運用這些經驗去設計的時候，可以理解為是一種本能的直覺；我將其稱之為設計師的直覺，就像色彩搭配、文字間距、頁面留白這些基本的設計要素，大多數設計師都是依賴于設計師直覺（經驗）進行設計。
2. 復盤
設計師的經驗構成了我們方法論的基礎，但是在平時的設計中，如果不注重項目復盤和總結，沉淀的經驗也大多都是毫無章法的記憶碎片；因此針對項目的復盤很重要，復盤既包含設計層面的，也包含產品規劃、人員協同層面的，這些也剛好構成設計師多維能力的一部分，比如產品能力、溝通能力等。
復盤可以讓我們的經驗更好的轉化為可用的方法論，比如之前在設計長表單的時候，遇到了很多復雜的問題，既有業務方面的，也有交互方面的；通過之前的一盤復盤文章《如何設計一個超長長長長長的復雜表單》，我將遇到的問題以及解決方法分析并記錄。
實際上，初版的設計稿并沒有像文中所寫的那么完善，而是在后續的不斷優化中，我將復盤后的一些方案加以運用，取得了良好的效果。
總結歸納和復盤的區別在于，總結歸納是在一個項目階段內展開的，是碎片經驗的累計；而復盤是一個項目階段結束后，從項目的全局視角出發，通過回顧和反思，發現項目的優點和不足，以此來激發新的思路和新的方案，為以后的項目提供參考；而總結歸納也可以作為復盤的一個手段，兩者相輔相成。
機制，于是花時間精心準備，組織大型會議，或激烈討論或洗耳恭聽，在心里留下一個又一個“哦，原來如此”，“哦，不過如此”，“哦，彼此彼此”的回響，時隔幾周后這樣的氣泡便消失殆盡，難免困惑其意義幾何。
3. 抽象
方法論本身是一個抽象的概念，人們將現實世界中發現問題解決問題的方法總結成一套可以加以復用的理論，抽象一方面可以延伸方法論的使用范圍，也可以更好的進行指導設計；通用的規則一般要比狹隘的規則容易遵守，我們所見到的大多數設計規范，都是依據原子設計理論，通過對原子、分子、組織、模板、頁面的定義，產出相應的設計規范和資產。
在產出設計規范的過程中，是將設計風格映射到原子設計理論上，從而抽象出各自行業內的設計規范；在運用設計規范的時候，我們又將設計規范解構到各自的業務中，從而產出符合業務場景的設計，解決業務問題。
4. 刻意練習
最近看了一本書，《刻意練習》書中寫道：
“反復做一件事情，目的是找出你在哪些方面存在不足，并且聚焦于在那些方面取得進步，試著采用不同的方法來提高，直到你最終找到適合自己的方法。
為了在沒有導師的時候有效地練習某種技能，牢牢記住以下三個 F，將是有幫助的；這三個 F，其實是以字母 F 開頭三個單詞，即：專注（focus）、反饋（feedback）以及糾正（fix it）；將技能分解成一些組成部分，以便反復地練習，并且有效地分析、確定你的不足之處，然后想出各種辦法來解決它們?！?
刻意練習適合需要大量時間來進行鞏固的技能型能力，比如插畫、排版等，我們可以看到大多數學習插畫需要的一個基本要求就是多畫多練習；而同樣，刻意練習在寫作溝通方面也有著比較突出的作用，當你輸出的內容越多，你的寫作技能同樣也會提升（當然這不是絕對的線性關系）
如果說總結歸納、復盤和抽象是形成自己方法論的理論基礎，那刻意練習就類似于手段了，通過刻意練習，可以將方法論加深固化為自己的專有技能，提升自己的多維能力。
通過對設計經歷的總結歸納、復盤和抽象，形成一套屬于自己的完整方法論體系。
同時，基于對相關技能的刻意練習，加固完善方法論體系，有助于我們學習業務知識，提升業務能力；快速輸出方案，提高設計效率。
文章來源：優設 作者：星野隨記
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天我們來聊一聊動畫法則與動畫曲線，做動效不但要遵循物理規律還要結合人們的視覺體驗，想讓動效更自然更符合實際，對于動畫法則與動畫曲線的學習是必不可少的，希望此篇文章能幫助到你~
首先我們說一說動畫法則，動畫有12項基本法則，源自于迪士尼動畫師經累積數十年的動畫制作經驗所整理出來的，我們逐一來分析學習
01.擠壓與拉伸（Squeeze and stretch）
當有力作用到物體身上時，物體將會產生一定的形變，比如你在拍球時，球落地后會被擠壓，彈起時會產生拉伸，對于具體的擠壓與拉伸的強度，與物體的硬度和用力的大小有關。做動畫要遵循運動規律讓動畫更自然。
如下圖小球的彈跳，左側是無擠壓與拉伸的效果，右側是加入擠壓與拉伸后的效果，明顯右側更自然一些
從擠壓與拉伸的程度上，我們還可以看出物體的硬度，擠壓與拉伸的程度越明顯，物體越柔軟，反之，物體越硬,如下圖我們做一個夸張點的對比，可以看出右側小球硬度更高一些。
02.預備動作(anticpation )
當物體要發生運動或者人物要做動作之前會有一個預備動作，比如向前方扔東西，一般都會抬手向后然后在向前?；蛘呷嗽谔咧皶认露装l力，然后在高高跳起，做動畫也是一樣，預備動作可以讓用戶知道即將發生什么。例如下圖中的藍色小球會看起來更有活力和沖勁。
03.布局（staging）
staging是表演；展現；分階段進行；籌劃的意思，我們可以理解為布局或者構圖，例如看動畫時，有些表達人物特性的畫面會靜止幾秒，有些場景素材過于復雜的地方會對突出的人物打聚光燈，來引導用戶的視覺走向。
04.連續與關鍵(straight & pose to pose)
我們可以理解成是兩種動畫制作方法，第一種是連續，也就是根據連續的動作逐一來制作每一幀的畫面；第二種叫做關鍵，也就是先制作好關鍵的動畫，然后再制作關鍵動畫之間的畫面。(連續與關鍵適用于手繪動畫，而用AE或者一些動畫軟件在制作時可以結合使用)舉個例子，比如你想做由于矩形逐步變幻成三角形的動畫，如下圖
05.跟隨動作與重疊動作（follow through & overlapping）
跟隨動作意思是動作的一個延續性，比如人物戴著紅領巾向前跑然后停止，在停止的時候，紅領巾是向前飄動的；重疊動作是指人物在運動的時候身體的關節并不是同一時間開始同一時間結束的，而是兩者有重疊，如果同時開始和結束的話會很機械。
06.緩入緩出(slow in & slow out )
這個是最常用的動畫法則，后面的動畫曲線中也會詳細說明這部分的，因為所有物體從靜止到開始運動再到最后停止，都是一個逐步加速在逐步減速到停止的一個狀態，當然機械物體的運動除外，比如傳送帶上的貨物，就屬于勻速運動。
07.動作弧線（action arc）
人物運動時會受到骨骼的影響，會呈現弧線運動，如果是直線運動就會生硬很多，舉個例子
如果你看到了很明顯的區別，卻還是不知道為什么的話，我們來這樣看
是不是瞬間豁然開朗
08.次要動作（secondary action）
次要動作我們可以理解為細節，主要是點綴主要動作的，比如用右手敲門，左手自然下垂，會給人感覺很放松，如果左手握拳會給人氣憤的感覺，如果眼睛四處張望看起來就比較像小偷，這里的左手和眼睛就屬于次要動作，可以豐富主要動作，但是不要太過，適當即可。
09.節奏(rhythm)
節奏可以使畫面更有張力。有快有慢，有急速，有慢鏡頭，這些都可以使畫面充滿節奏感，很平均的畫面就會很機械。
10.夸張（exaggeration）
夸張是可以增加對用戶的吸引力的，和現實一模一樣不是最優的選擇，合理的講動畫夸張化往往可以呈現出更好的效果。（可以用擠壓與拉伸，加快或放慢等等）
11.實體圖（real figure）
可以理解為立體的形態，一個圓很平，但是立體的球就會有空間感，同時要保持畫面的平衡。
12.吸引力（apparl）
畫面有創新，獨特，可以讓用戶過目不忘，吸引力強
以上要合理的運用才會達到最好的效果，不要機械的使用，說完了動畫法則，我們看一下動畫曲線。
首先動畫曲線有什么作用？在哪里可以調節呢？
動畫曲線可以現實對象運動的仿真效果，比如加速運動、減速運動、勻速運動、自由落體等等；在圖表編輯器中為某個屬性添加動畫時，可以在速度圖表中查看和調整動畫曲線，從而影響對象的變化速率，使其更真實。
正式學習動畫曲線之前我們先說一個小知識
關鍵幀
時間軸上的關鍵幀會有一些不同的形狀，關鍵幀圖標形態取決于關鍵幀之間的時間間隔的插值方法。當圖標的一半為深灰色時，顏色較深的一半表示這一側附近沒有關鍵幀，或者其插值由應用于前一關鍵幀的定格插值所取代。
我們一起來看下有幾種圖標類型
讓我們來一一解釋，先看最簡單的四個
圓形：
自動貝塞爾曲線（對兩側速度不同的關鍵幀進行柔和的連接）下面動圖可以看出兩者的不同對比
正方形:
定格（硬性變化）在文字變換動畫中常用
凹三角和凸三角都是停止關鍵幀，可以通過右鍵點擊切換保持關鍵幀來調整
凹三角是曲線關鍵幀轉換為停止關鍵幀后的狀態；凸三角是普通線性關鍵幀轉換為停止關鍵幀后的狀態
了解了關鍵幀之后我們來看看速度曲線與值曲線
最后我們來學習下動畫曲線，動畫曲線可以分為：線性動畫，緩入動畫，緩出動畫，緩入緩出動畫，我們逐一來舉例說明
線性動畫（linear）
動畫從開始到結束一直是同樣的速度運動，也就是勻速直線運動，看起來不是很自然，例如現實生活中的傳送帶就是勻速直線運動。
緩入動畫(ease-in) -加速運動
動畫的速度先慢后快，動畫曲線先是陡峭再平緩，例如現實生活中汽車啟動，但是緩入動畫會在速度最快的時候停止，會很突然，有點像被磁鐵吸住的感覺。
緩出動畫（ease-out）-減速運動
與緩入動畫正好相反，緩出動畫的速度先快后慢，例如現實生活中汽車慢慢停止
緩入緩出動畫(ease-in-out )
速度由慢變快再變慢，例如現實生活中的汽車啟動加速到停止。但是默認的F9對于實際效果來講并不夠，還需要我們把對比調節的更強，如下圖我們可以看到調整前后的不同節奏感。
總結一下，單純的線性動畫與緩入動畫和緩出動畫并不太符合正常的運動規律；當緩入緩出動畫相互結合時才會更符合正常的運動規律，但是時間上的掌握也是需要慢慢琢磨的，希望此篇文章可以給你帶來一些啟發
文章來源：站酷 作者：凌旬
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
傳統的汽車中控系統，大多是相對固定的硬件組合到一起，共同構成中心的控制臺，控制著包括導航、收音機、播放器、空調等在內的各種功能。一直到 2000 年前后，汽車的中控臺都一直以這樣相對固定的物理按鈕和旋鈕來搭建，用戶也可以通過官方或者第三方服務，來升級功能，比如將磁帶播放器升級為CD播放器乃至于內嵌電視功能等等。
隨著移動端技術的發展，iOS 和 Android 等智能軟件系統的完善和提升，汽車的中控系統也不再受限于固化的硬件功能。平臺化的軟件體系讓中控系統有了更多的可能性，影音娛樂開始更加豐富，而已然完善的移動端觸摸式交互生態，則為汽車中控以屏幕替代物理按鈕打下基礎，各類原本存在于手機電腦的新型的 APP 、功能、服務也逐漸出現在汽車中控系統上，而特斯拉更是一步到位，以一塊巨大的觸摸屏徹底革新了中控的交互體驗，OTA 升級，有機多樣的UI交互，徹底釋放開了汽車中控交互體驗上的想象力。新的問題出現了，新的方法在迭代，新的趨勢也得到了印證。
寶馬奔馳保時捷等頂級的汽車廠商大都在中控臺的設計上，探索了各自的可能性，國內廠商也毫不示弱，不過其中絕大多數的系統都基于我們熟悉的 Android 或者是 Android Auto 作為基礎來進行定制和優化，而蘋果則基于自家 iOS 生態，在 2013 年推出了 iOS in the Car 服務，目前正式名稱為 Carplay。而目前各大廠商所青睞的 Android Auto 也上在 Carplay 發布之后所跟進并發布的。
目前，Carplay 和 Android Auto 都已經上行業標準級別的存在，今天這篇文章， 我們先聊聊 Carplay。
CarPlay 車載系統旨在令用戶通過汽車制造商之原生車載系統來使用、操控iOS設備并發揮其功能。該產品的首個版本計劃于2014年發布，最早出現在一些制造商的汽車展覽上。
Carplay 本身并非完全獨立的存在，它本身會和 iPhone 一起聯動，讓iPhone 成為你的車鑰匙和輔助管理系統。
CarPlay 車載讓你能夠在駕駛車輛時智能、安全地使用各項 iPhone 功能。你可以開導航、打電話、收發信息、聽喜歡的歌。所有這一切，都整合在車內的中控顯示屏上。在 iOS 14 中，CarPlay 車載還引入了全新的 app 類別和適用于 CarPlay 車載儀表盤的自定墻紙。
Carplay 以 蘋果自身在移動端交互和用戶體驗上的深厚積淀，總結和梳理出了一套可供學習和值得參考借鑒的規范。
這些規范對于需要考慮車載使用場景的廠商以及正在布局車載移動端軟件或者系統的廠商的設計師而言，都有著相當的參考和學習價值。
作為車內輔助、操作、娛樂的中心，Carplay 可以直接連接到汽車中控的觸摸屏上，提供基于 iOS 的相關的服務和應用。Carplay 的整體設計圍繞著車內駕駛這一使用場景，而它的設計原則也圍繞著這一場景來規劃：
Carplay 當中會有提供音頻內容的 APP，諸如 Podcasts，網絡電臺，新聞，音樂，體育節目等等，這些服務和 APP 將會通過內置的屏幕顯示，并且借助最常見的「標簽欄+列表」來呈現基本的框架，并且必須包含「播放」界面。盡管這類服務和應用是借由內置的界面框架來呈現，但是依然有值得注意的要點：
使用此圖標代表明確的、本地的的內容。
使用此圖標來標識在線的內容，確保用戶知道內容來自網絡，并且會耗費網絡流量。
在進行音頻內容播放的時候，Carplay 會顯示「正在播放」的界面，并且會使用如下界面：
在設計這個相關的界面功能的時候，需要注意以下幾點：
Carplay 能夠內嵌到不同廠商的車中，自然也可以控制車內的硬件。這一部分的硬件驅動支持通常是由廠商提供，并且借由 Carplay 內的界面，提供統一的交互體驗。
VoIP 也就是基于 IP 的語音傳輸功能，而在 Carplay 中，VoIP 應用主要借助 Siri 服務，并且全由 Siri 操控，它并不為用戶提供直接的交互界面，因此無需專門設計 UI 界面。
它支持閱讀信息和編寫/回復消息，不過需要用戶授予權限
當你的 APP 有推送信息未讀的時候，通常會在 APP 的右上角增加一個紅色的小紅點標識，并且其中會有一個白色數字用來標識未讀信息的數量。
對于錯誤信息，應當妥善處理，并且絕對是要在必要的時候才推送報錯信息。
在加載內容的時候，使用黑屏或者靜態的界面，可能會讓它整體上看起來像是死機了一樣，者可能會導致用戶離開。
在 Carplay 當中，有2種常見的導航模式：
橫向導航。通常使用標簽欄來進行導航，不同內容橫向排布，用戶可以快速點擊不同標簽切換。
分層導航。用戶在屏幕上點選不同選項，通往不同的子界面。其中地圖應用采用的是這種結構。
音樂類應用可以使用橫向導航，也可以使用分層導航，在設計導航的過程中，應當注意：
全面的測試，是確保應用可用性的重要前提。
無論音頻是否是你的 APP 的主要內容呈現形式，你都需要了解用戶對于音頻有哪些期待，并且盡量去貼合這些需求。
在管理汽車功能的頁面當中，廠商提供的功能和數據將會無縫的接入到 Carplay 當中，比如氣候、網絡、GPS 等等。當數據不可用的時候，盡量提供合理的響應方式。
比如當汽車通過隧道，沒有 GPS 信息的時候，盡量以不打擾的方式來告知用戶。
3.3、iPhone
Carplay 是和 iPhone 連接起來使用的，并且在程序數據上也相互兼容互通，只是Carplay 本身提供的是簡化之后的 UI ，并且針對駕駛的場景進行了優化。
支持 Carplay 的車輛通常會有物理按鈕和旋鈕，它們可以作為 Carplay 交互的輔助。當物理按鍵作為用戶的主要交互介質的時候，通常至少會存在一個 Siri 按鈕，導航控件，選擇控件，以及后退控件。
這些控件和 Carplay 應當高度對應，無論是播放、暫停、上一首/下一首 都應該做出準確的相應。具體可以參閱：MPRemoteCommandCenter
當 Carplay 投射的屏幕不支持觸摸的時候，還有基于旋鈕的焦點式交互方式，當用戶擰動旋鈕的時候，能夠讓光標從一個元素切換到另一個元素，激活并交互。
文章來源：優設 作者：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn