很多情況下，用戶選擇一個產品的理由是有沒有某個功能，但棄用的理由卻常是產品好不好用。能否打造優質的B端用戶體驗，成了影響B端產品用戶續約的一個關鍵因素。
(1）流程越短越好。 我們在上班、逛街的時候，傾向選擇一條最短的路線，希望用最少的時間到達目的地。用戶操作系統時也希望這樣。
(2）整合功能場景。 某個功能由誰、在什么場景下操作，以及可能會遇到什么問題、需要什么關聯功能來解決，如果功能點相互獨立， 關聯很少，會讓用戶用起來很不順手，有種斷層的感覺。
（3）有效指導異常。Saas 有一個特點是功能模塊間會盡可能相互獨立，基礎數據的設置和業務上面的使用往往是在不同的功能模塊內。這會導致B端用戶在遇到空數據的情況下， 可能不知道該怎么操作。這時，需要要提示用戶按具體步驟操作來順利完成任務。
交互體驗，對上承接了業務，對下承接了視覺。好的交互體驗能讓業務流程簡捷，更關注用戶習慣。 B端產品的交互和C端產品差異較大，C端常用的移動客戶端屏幕小，可顯示的內容較少，需要不停地跳轉完成操作，但B端產品大多用電腦來操作，一頁可顯示的內容較多。所以做B端產品交互一般需要注意下面幾點：
(1）少跳轉。曾有用戶反饋，說某個功能操作流程太長了，操作起來很麻煩。通過走查發現流程其實是沒有問題的，不能再縮減流程了。通過可用性測試發現是因為跳轉頁面導致，用戶在操作時去了另一個界面，然后再返回來，讓用戶在操作時感覺流程更長。于是就把頁面跳轉優化成了彈窗，彈窗里面操作完點擊關閉即可， 改后用戶覺得流程縮短了，操作效率更高了。
B 端產品能用彈窗的時候，不要跳轉，哪怕彈窗里面加彈窗，只要不跳出這個頁面，用戶都會覺得沒有阻斷他的操作。雖然，從交互的角度講，彈窗里再加彈窗不符合規范，但在實用性面前是可以商榷的。
(2）少彈窗。 相比彈窗，在某些場景下，有更好的處理方式。比如，直接放頁面上。 彈窗是點擊按鈕觸發的，自動完成操作后關閉，或者用戶手動關閉。雖然比跳轉好，但比不上在頁面上直接呈現高效。
頁面上直接呈現是理想狀態。但是往往因為內容太多，很多時候不得不隱藏起來。直接呈現對于頁面的布局和設計都有極高的要求，原則是高頻且重點的內容外露。
（3）交互形式統一。 整個系統里面的交互規則要保持一致，大到彈窗的出現形式是居中彈出還是右側滑出，小到多選控件是不是一致。 在整個系統里面相同的業務都用同一個控件。雖然可能由于一些業務的特殊性， 需要對控件做個性化處理，但不要影響整體的一致性。
(1）信息清晰。 信息清晰不僅指信息結構的層次，還包括頁面的內容，最好讓用戶一眼就能看到上面寫了什么，有什么功能。有些設計師不喜歡加黑、大、粗的字， 覺得不夠高級，而是根據自己的美感把字體設計為一些個性化字體，且字號不大。
很多時候B端用戶的操作時間比C端用戶長，他們需要長時間盯著頁面，所以頁面信息清晰就能減少他們的疲勞。
(2）信息緊湊。 當頁面上想要呈現的內容較多時，設計師一定要壓縮空間，使布局合理緊湊。
(3）少用圖標。 有時候，設計師會使用圖標來代替文字表達，并花大精力設計很好看的圖標。圖標的應用在C端產品中非常常見，一是為了節省空間，二是為了美觀。但在B端產品中，大多數情況下，圖標越少越好，有時文字的簡寫比圖標來得直觀易懂。圖標過多用戶需要使用很多遍才能記住每個按鈕的含義。
B端產品設計需要非常重視用戶體驗。這直接影響到用戶的工作效率，轉而影響到軟件的續約率。 為打造好的用戶體驗，我們通常從業務層面、交互層面、視覺層面來著手提升用戶體驗。 很多時候，有些好的交互方案會受到技術框架的限制，導致方案無法實施。
但是為了產品獲得更好的用戶體驗，首要考慮的依然是用戶的使用流暢度、易用性，而不是實現的復雜程度、系統現有框架的限制、現有規范的標準。 系統上的難點應當留給內部去解決，把最大的便利性留給用戶。這樣我們才能獲得更好的產品口碑、更高的續約率、更大的市場。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在B端產品設計中，理解并設計好流程，對產品的體驗非常重要。通常涉及到有三個方面的流程：業務流程、審批流程、操作流程。
在企業的日常經營中，為了對業務過程進行更好的管理，企業會梳理出一系列流程、規范以及作業標準。流程化能夠幫助企業各崗位的員工更好地分工合作，使企業效率更高。對于 B端產品，設計師首先要讀懂業務流程，然后才能設計好產品。 業務流程，是指為達到特定的業務目標而由不同的人分工合作完成的一系列活動?；顒又g不僅有嚴格的先后順序限定，而且活動的內容、方式、責任等也都必須有明確的安排和界定，以使不同活動在不同崗位角色之間進行流轉交接。
下圖是某企業的采購流程，涉及了五個部門、多個崗位角色、多個業務活動。
業務流程大多是企業根據業務特征、自身經營特點以及資源配置情況而制定的，在業務上具有一定的通用性，但在具體應用上又充滿了企業的個性。業務流程和單據是經典搭檔，可以說“流程 + 單據=業務”， 每個環節的工作形成一張單據，記錄著時間、地點、參與人、業務狀況。當這個環站的工作完成后，進入到下一個環節的工作時，單據也會隨之流轉到下一個系統中對應的功能節點，并形成一張新的單據，記錄新的信息。
下圖是某企業采購流程中從采購到結算部分涉及的單據：
除讀懂業務流程外，我們還需要應用“場景驅動的設計”方法，整理出每個環節中涉及的用戶、場景，以及作業的特征，并大膽地通過設計來改造流程，最后通過設計減少人員工作量，減少流程中的多余環帶， 提升企業效率。這樣才能設計出對客戶有價值、用戶體驗好的產品。企業的收貨流程，要經過到貨簽收、質檢、 收貨入庫等過程，每個環節都會有諸多問題。下面是梳理了某企業收貨流程的簡易體驗地圖：
經過對場景和可行性分析后，設計了一套新的業務流程。流程簡化為貨車司機直接將貨物送入指定倉庫的電子圍欄，并全自動質檢、入庫，大幅降低了人工成本并提升了工作效率。這一步通常是產品經理去完成，作為用戶體驗設計師在調研的過程中發現有好的流程優化方法，或者看到好的競品值得參考，可以和產品經理溝通一起推動產品業務流程用戶體驗的提升。
在企業中，出于對重點業務的管理需求，除了會制定固定的業務流程方便大家協作，還會對業務關鍵節點做審批。簡單的審批只需要在流程進行到關鍵節點時，將重要結果發給相應業務管理者審批。但是，由于一些企業組織機構復雜，管理嚴格，為了保證業務的合規與安全，需要多個角色、多個環節的審批，這個流程即是審批流程。
（1）首先員工提交需要審批的材料（系統中是提交單據)。
(2）各環節審批者會根據流程分別對材料進行審批。
(3）審批通過后會自動進行到下一步。
(4）審批不通過，就此流程結束。
(5）退回則打回到流程起點，待改進后重新走流程。
(6）審批都通過后，審批流程結束。
在實際應用中，可能會有非常復雜的流程與功能。比如除常規的審批通過、不通過、退回功能外，還會有改派、加簽、抄送等。
(1）改派：當前審批人將審批材料轉給其他人。
(2）加簽：增加審批的步驟，在一些企業中還會有前加簽、后加簽。
(3）抄送：將材料同時抄送給某人或某角色。
以上只是列舉一些常用的動作，在一些大型企業或者國企，流程和功能更復雜。當面對復雜而多變的審批需求時，需要將審批流程設計得更加靈活、自由，具有自定義功能。另外，需要將審批流程設計得更加模塊化，可以在任何一個業務環節中加入審批過程。
在審批流程的設計中， 根據企業制定的審批規則，自動判斷是否符合標準，自動審批。尤其對一些每天都在發生、經常重復而不重要的事情，可以完全省去人工審批的過程，采用自動審批，自動觸發業務流程，以此來提高審批效率。
前面兩個流程主要基于企業業務制定，在企業沒有信息化前就已經存在了，在改造優化上還有一些阻力和困難。作為用戶體驗設計師，可以通過對操作流程的優化來改進用戶體驗。
以上文中的收貨案例為例子：
（1）系統中收到若干個質檢任務。
(2）逐一打印質檢單。
（3）帶著質檢單來到倉庫，尋找需要質檢的貨品。
(4）找到貨品，逐箱打開進行檢查，業務操作不熟練的還需要詢問老員工。
(5） 將質檢結果隨時記在打印出的質檢單上。
(6） 逐一檢查完畢，回到辦公室，將信息錄入系統。
這個過程繁瑣，而且在操作的過程中，容易出錯。因此根據實際工作中的業務場景，對操作流程進行了優化如下：
整個操作流程省去了“打印單據”“重復記錄單據”“詢問老員工” 的過程，并簡化了“尋找單據”的過程及記錄結果的過程。
在對操作流程的設計過程中，也應遵循“場景驅動設計”的方法，并將物理實體、數字實體統一考慮，充分利用各自的特點，盡最簡化用戶的 操作流程，并降低操作的復雜度。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、前言
視頻播放器中承載著極其豐富的內容畫面和播控功能，尤其是在寸土寸金的移動端視頻播放器中，為使內容更沉浸消費，需盡可能克制界面中的功能元素/入口直接外露?；诖朔N場景下，合理的手勢設計不但可為界面“減負”，還可幫助用戶更快捷觸達功能、提升操控便捷性。
視頻場景中目前已有部分的常規單向手勢已被用戶廣泛接受并形成習慣認知，如「單擊 →暫?！?、「雙擊→點贊」、「長按→快進」、「橫滑→導航」、「縱滑→切視頻」、「雙指捏合→縮放視窗」等通用手勢。
那么如何在保留用戶對于常規通用手勢認知的基礎上，進一步對視頻場景中的手勢交互進行擴容升級？這也是我們接下來在手勢進階交互上的重點探索方向。
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規的基礎通用手勢進行打散重組、并結合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構建便捷高效的進階手勢體驗設計。
二、什么是「組合手勢」
「組合手勢」是基于常規手勢的組合擴展，其通常由兩種或兩種以上的常規基礎手勢所構成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規手勢為例，其觸發機制一般可分為兩個階段：step1交互信號→step2執行任務，即用戶通過某一基礎手勢發出交互信號，系統收到信號確認后便可立即執行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現有常規手勢兩階段觸發機制的基礎上，嘗試引入「意圖識別」環節，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發一般可分為三個階段：step1交互信號→step2意圖識別→step3執行任務，前兩階段均可由對應的基礎分支手勢構成并進行組合搭配、以尋求最高效的手勢組合觸發路徑。
由于「組合手勢」并不像常規手勢那樣早已被系統定義為可供直接調用的接口，因此，其差異化創新具有較大設計靈活度，尤其需根據具體的使用場景進行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發成本高。
2.競品調研及選型
通過對競品進行調研，我們發現競品均有使用長按手勢作為切入口以觸發相關播控功能、并歸納出“視頻播控觸發”目前主流的三種長按交互選型， 分別為：長按觸發獨立播控面板、長按觸發浮層播控選項、長按觸發特定播控功能。
選型A
「長按觸發獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發浮層播控選項」：通過長按手勢可觸發置于視窗上層的浮層選項入口，一定程度上可延續視頻觀看的沉浸體驗，但浮層擴展性有限；
選型C
「長按觸發特定播控功能」：通過長按手勢觸發特定的某個播控功能（如長按“快進”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設計方案
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經過和業務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
step1：以“長按手勢”創建一個新模式，即發出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統默認開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標功能項以選擇功能；
step3：用戶滑選錨定至目標功能后，松手釋放即可完成最后的功能執行確認。
「長按+向上滑選」快捷觸發對應功能項；
「長按+向下滑選」快捷觸發“快進”（一定程度上兼容老用戶對于此功能的使用習慣）。
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產生滑選行為便松手，則松手后依然可通過點選的方式觸發對應播控功能項。
3）易用性打磨
差異化的創新設計形式在前期總會面臨質疑和挑戰，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發完成后便進行了一次小范圍內的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優化。
我們根據測試目標、用戶類別、測試前序準備及測試步驟等環節提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發現仍有部分易用性細節可進一步打磨優化。
3.1 ）擴展觸發熱區：
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發熱區，屏幕中除頂/底bar框架區以及本身就自帶長按事件的按鈕入口之外，其它大面積區域熱區均可支持長按觸發快捷菜單，以降低觸發難度、提升易用性。
3.2 ）支持跟手觸發：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應反饋：
靈活判斷當前手勢觸控狀態（如滑入選擇 / 松手觸發），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發機制。
方案上線及驗證
以AB實驗對本次設計方案進行定量測試驗證：
「對照組」效果：長按觸發“快進”（各播控功能入口仍歸置于基礎菜單面板之中）；
「實驗組」效果：長按觸發“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經過近半個月的觀察，大盤指標穩定、播放完成率等滿意度指標穩步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發訴求。
「實驗組」的“快進”雖多了一步觸發步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續走高，通過滑選觸發“快進”的操作習慣也快速被培養起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發出交互信號而觸發浮出小窗入口，隨后系統根據用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結語
便捷手勢的設計出發點是為提升操控效率、縮減功能觸發路徑，從而使視頻內容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家帶來幫助和啟發，后續我們也將持續深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
如今人們出行都離不開手機，都通過手機接觸過互聯網地圖，手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢，形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前，讓我們先看看地圖的發展歷程。
地圖擁有著古老的歷史，記錄了人類對世界認知的演進過程，經歷過泥板、壁畫、羊皮、紙張等載體，依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。
隨著照相機和飛機的發展，出現了航空攝影測量技術，讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展，讓紙媒地圖開始融入人們的生活，地圖的平面設計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。
再隨著衛星影像、瓦片地圖技術和互聯網的發展，人們可以日常地使用電子地圖。受限于網絡速度的限制，矢量地圖應運而生，在特定范圍顯示相應的矢量瓦片信息，讓互聯網地圖的形狀趨向統一化。
iPhone革命性的觸屏體驗，通過手勢與地圖進行直觀自然的交互體驗，結合內置GPS、陀螺儀傳感器，小藍點成為地圖定位的通用標志，激發更多地圖的功能和創意。
二、手機地圖的創新體驗
手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢，結合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。
手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換，幫助人們更好的映射到真實世界。
可視化信息是互聯網地圖的主要優勢之一，將數據轉化為可視化圖形，歸類在不同的數據層，可以單個或多個層級疊加在地圖上展示，傳達位置上的數據。
底圖是手機地圖的基礎，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內容不斷細化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內容。
觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。
單指拖動
拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。
單指劃動
當用戶想快速翻閱時會撥走要略過的內容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區域，是比拖動要快速的瀏覽方式。
雙指拖動縮放
物理控件只能讓地圖根據屏幕中心進行縮放，而觸屏縮放能讓地圖根據兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認知。
雙指劃動縮放
劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標位置。
單指快捷縮放
為了讓用戶能單手并可控地縮放地圖，不少地圖都設計了自己獨有的縮放方式。 zenly，通過屏幕兩側的邊緣，直接完成地圖的最大和最小縮放跨度。
snapchat拖動右側邊可緣喚起縮放滑塊，并使用emoji來表達距離，充滿幽默感。
騰訊地圖，通過劃動右側的滑塊，實現單手順滑地縮放，滑塊也支持劃動手勢。
百度地圖，通過點擊一個縮放控件，讓地圖以當前中心點進行分段縮放。
無限循環的地圖
地球是圓的，可以無限巡航，一些應用將縮到最小的世界地圖做循環處理，以呼應地球的循環轉動體驗。
方向視角切換
在陌生的環境用戶未必能分得清楚南北方向，利用手機的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉到用戶面向的方向，有助于用戶二次確認自己的定位。
更多地圖使用了2D/3D視角的切換方式，2D是南北向的標準地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對應物理空間。
旋轉方向
可通過雙指或陀螺儀旋轉地圖，地圖上的文字也做出相應調整，保持水平、沿道路方向調整，以保證可讀性。
3D的旋轉也一樣，在保持水平和沿道路方向的同時，文字保持垂直。
當縮小到足夠遠時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。
雙指拖動調整視角
地圖3D視角也支持自由調節，通過雙指平行的上下滑動，可以平順調整3D視圖鳥瞰的角度。
在地圖的最低視角做回彈處理，生動不呆板。
遠近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進時有俯沖的感覺。
四、可視化信息：生動呈現地圖動態數據
從古代開始，人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記，地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢，就是能提供實時的信息數據。將數據標記在相應位置的坐標上，并分別歸類在不同的層級，疊加在地圖上查看。
地圖的常用數據形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內容。
點數據
點數據是單個地理坐標上的標記，代表該位置上的信息，是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型，使用頻率越高的樣式越簡潔，地標建筑做形象化圖形標識。
聚合圖在地圖上呈現也是點數據，它實質是顯示一定區域內的信息聚合，但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多，在地圖上信息過于密集。
百度的充電樁地圖就是以區域聚合充電樁數量，根據縮放調整數據的聚合。
騰訊地圖的文博地圖也是聚合圖，并根據文物的類型做了快速篩選。
線數據
線數據在地圖上呈現為線性，一般都沿著可行道路展示信息。導航路線是最常用的線數據，它提供具體行駛路線方案，并實時展示線路行駛的進度與方向。
也有粗略表示進度的線路數據，如快遞的物流進度路線就不需要具體的實際線路，只需要示意大致進程。
街景地圖則僅展示有全景圖的道路范圍，不提供進度與方向。
面數據
面數據要展示地圖上的具體區域，疫情環境下出現了區域風控需求，需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。
zenly使用了反向的面數據，根據用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。
熱力圖
熱力圖以特殊的高亮梯度顯示地圖上區域的熱度，熱力圖的數據不會指向地圖上具體的位置，它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。
高德地圖的空氣質量地圖，使用聚合圖作為空氣質量評分，熱力圖作為空氣質量范圍。
snapchat使用熱力圖來表現該區域用戶發布動態的熱度，引導用戶發現內容，由于熱力圖不指向具體位置，能更好的保護用戶隱私。
熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數據，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經地點。
路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。
讓數據動起來
地圖是安靜的，但真實世界是忙碌的，讓數據動起來，給地圖增添更多情感化設計，緩解用戶的等待壓力。
忙碌的商家
外賣小哥端午節雨中送餐
公交努力奔來
五、底圖：為更好呈現信息的色彩系統
手機地圖的底圖最常使用矢量瓦片地圖，因為數據體積小，在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域，不展示具體細節，因此需要通過顏色去傳達不同區域的屬性或功能。
人們對于顏色和環境是能建立一定的聯想的，如綠色想到大自然，藍色想到水，紅色想到警示。根據人們對色彩的聯想，給矢量地圖中不同屬性的區域進行配色，幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出700多種顏色，最后簡化為25個顏色，形成了地圖的色彩系統。
工具類地圖應用以地圖為核心基礎，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的，各地圖廠商的標準地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關心的數據。
而一些垂直場景的應用，地圖區域功能的描述相對次要，通常會對地圖的用色進行大幅度精簡。以打車應用為例，地圖用色少且色調相近，突出核心的打車狀態信息顏色，同時體現應用的品牌特色。
不少運用地圖的概念設計中，會更極致的使用單色系地圖，僅突出數據信息的顏色，充滿未來感。
六、未來的地圖
隨著網絡速度的提升，手機硬件的升級，順應AR/VR技術的發展，地圖逐步進入3D和全真時代。蘋果地圖在現有的地圖的3D視圖下，已對地標建筑賦予更多細節，并在夜間模式模擬了燈光效果。
3D地圖就像是虛擬世界中的基礎建設一樣，蘋果地圖添加精細地標模型后，同時應用到Carplay的導航中，在駕駛時可直觀看到與現實世界對應的3D地標。
谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。
同時全真模擬日照和天氣系統，和現實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。
隨著地圖的立體全真化，地圖的數據也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助AR設備，人們無需對照地圖即可完成導航。
結語
地圖歷來是人們借助藝術的手法，以極具想象力的方式對世界進行再現，它遵循科學測量的法則，使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知，而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球，而是呈現人們眼中的世界，它寄托著人們對美好生活的想象，更好的認識、探索和規劃世界。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
其實用戶故事還是由人物故事演化而來。
傳統的人物故事主人公一定是一個響當當的名人，至少是做出了某種貢獻的，并且這類的內容傳播目的并不在于轉化或“帶貨”，而是為了傳遞某種價值觀。
或許我們可以把傳統的人物故事稱為“名人傳記”。
到現在，越來越多的企業、品牌，甚至是個人IP都在做用戶案例故事，而這類內容與傳統人物故事恰恰相反：
那么，如何讓用戶幫你的產品講好故事，賣得更好？接下來從三點展開說說。
以目的為導向，在決定做用戶故事/用戶案例分享前，首先要明確：
一般做用戶故事，我們所期望達到的效果不外乎是以下三種：
1）品牌宣傳
通過用戶故事達到品牌曝光和宣傳的效果，讓用戶知道我們的品牌、知道有這么一個產品。
B端產品，且對接客戶是比較有名的公司，會比較適合使用客戶故事來進行品牌宣傳。
比如：影刀RPA、三維家。
內容結構一般是某大公司使用了我們的產品，解決了什么問題，達到了一個怎樣的驚人效果。
2）產品介紹
這類產品的功能或許比較多，借助用戶故事來介紹產品及其功能的使用場景，并根據不同的用戶使用場景來給出具體的解決方案。
比如：印象筆記、訊飛智能錄音筆。
一般內容結構是用戶在某類場景下遇到什么難點，如何使用產品，達到了什么目的/收獲了什么。
3）種草營銷
如果是為了營銷，讓用戶種草某類產品而輸出用戶故事，那么此類故事要深究用戶的痛點和爽點，這樣才能精準打動用戶，促使用戶進行下一步的使用、購買等轉化動作。
比如：微眾銀行（理財產品）、人人都是產品經歷（付費課程）。
值得一提的是，像小紅書的種草筆記也是很不錯的素材，但對于種草軟文來說篇幅略短，需要擴寫。
一般內容結構是用戶使用產品前后的對比、反轉，給人一種出其不意的效果，讀者看了后會覺得很爽，也想達到一樣的效果。
用戶故事的素材來源一般有以下幾個方式：
1）用戶投稿
最簡單快捷的方式就是由用戶自行撰寫，當然如果能提前跟用戶溝通好主題、確認好內容框架，并且用戶文筆還不錯，那自然是最好的。但這個方式對用戶的門檻還是比較高的。
如果用戶故事想要追求真實性、接地氣，這類素材是最合適的。要是真能遇到一個很不錯的故事，還可以由官方再次編輯再進行傳播。
素材收集渠道：官方自有投稿渠道、用戶外部平臺分享（如小紅書、微博、豆瓣等）。
2）征稿活動
策劃征稿活動，明確內容主題、內容要求，由用戶輸出，再由官方進行二次創作。
二次創作的方式一般有2種：
①一篇長文
長文形式一般是在用戶原創的基礎上（此類用戶的創作水平一般，文案多以流水文形式呈現），對排版、邏輯、結構進行打亂重建，讓文章結構整體更具邏輯性及可讀性，并突出產品優勢，必要時可能需要加上一些“夸張手法”。
②一個專題
從大量稿件中篩選一批有相同點的精彩內容，由官方匯總成專題，并加上官方導語、前言或結語等。這種形式的工作量會輕松很多，并且豐富性更強。
征稿方式：公眾號、官方社區、核心用戶群等官方自有陣地發布征稿活動。
3）征集話題
以話題形式征集用戶案例素材，官方借用相關案例進行原創輸出。
手段跟征稿活動的方式差不多，但活動形式較后者更輕。話題討論對用戶和運營方的壓力都不大，并且對運營方來說可創作的自由性更大。
形式同樣可以長文或專題的結構來呈現，如果是專題，只需要把比較精彩的內容呈現出來即可；如果是長文，需要提煉主觀點，再結合產品進行小觀點的闡述。
征集方式：公眾號、官方社區、核心用戶群等官方自有陣地發布話題征集活動。
4）核心用戶采訪
這類素材是最真實、最有說服力的，但同時操作難度也是比較大的，并且還有一個隱形問題，就是你辛辛苦苦做了人物采訪，好不容易輸出了一篇自認為很優秀的用戶故事，但讀者卻不這樣認為，各項數據可能都不會太好看。
但這類用戶故事是最適合做品牌宣傳的。因為你做了一個很高大上的東西出來，無論是掛在公司網站首頁，還是用來推廣產品，這都可以作為一個品牌的門面。
在方式上來說，可以采用問卷的形式，最終文稿還是由官方撰寫。問卷的形式最簡單便捷也是使用互聯網工作風格的。
對于使用產品的核心用戶，他們既不會自行撰寫，也不會參與任何的話題討論，但是典型的使用用戶，那么可以根據他們對產品的使用習慣，提出相關的問題，以問卷或邀約訪談的方式進行了解他們對產品的使用感受。
對于提供案例故事的用戶，最好能由官方給與一定的獎勵，哪怕是由用戶自發輸出的內容，也應當給與一定的回應，會顯得品牌方更有人情味。
當然獎勵不一定非要實物獎勵或金錢獎勵，有時候一個肯定或感謝也能讓用戶感到很暖心。
一般回饋用戶不過就是“老四樣”：
1）金錢獎勵
根據用戶參與的程度、提供素材的豐富度、故事的完整度等設定不同等級的金錢獎勵標準。
2）物質獎勵
對于參與的用戶，可以獎勵一些產品周邊、紀念品等實物。
3）榮譽獎勵
設置一些徽章、頭銜名稱給到用戶，比如xx代言人，xx宣傳官等。
4）流量獎勵
給與一些運營位、廣告位宣傳參與的用戶或其公司，類似異業合作，此類獎勵適用于小有名氣的kol或商家用戶；
如果是B端產品的用戶，還可以有“人脈獎勵”，即搭建核心用戶社群或舉辦線下交流會，定期舉辦一些課程、培訓等，不僅能幫助用戶搭建人脈橋梁，還能讓用戶有收獲知識的快感。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“三角測量”在用戶體驗研究領域正在變成一個時髦用語。它究竟是什么？它可以如何幫助你提高用戶洞察的質量呢？
“三角測量”這一術語源自幾何學，它指的是根據已知的點向未知的點構建三角形的方式來確定該點的位置。
在社會科學領域，三角測量指采用多種調查方法來研究同一種現象（例如訪談或定量調查等）。這一概念跟法醫學中的“交叉詰問”（cross- examination）接近，通過詢問多位目擊者的證詞更易接近事實真相。這是通過發現數據的一致性和不一致性來實現的。
根據《研究設計百科全書》（Encyclopedia of Research Design）的定義：
三角測量是指使用多種來源的數據進行研究，或使用多種方法分析數據，以提升調查研究的可信度。
研究的可信度通常包含：
Denzin [1] 認為，沒有哪一種的方法、理論或觀察員可以捕獲一項研究中所有相關或者重要事物。而三角測量法正是被提出來解決這一問題的。Denzin 在 20 世紀 70 年代確定了四種主要類型的三角測量法，如今仍舊被研究學界廣泛地認可。
（[1]諾曼·K.鄧津，伊利諾伊大學香檳分校社會學系榮譽教授，質性研究法終身成就獎獲得者之一）
1）數據三角測量（多數據集）
指在一項研究中使用不同的數據源。尤其是，通過不同的樣本策略收集數據，例如收集不同時間、不同環境或不同的研究對象的數據。這種方法可以用其他數據的優點來彌補當前數據存在的不足，這樣可以提升結果的有效性和可靠性。
2）研究員三角測量（多研究員）
該方法指在同一調查中采用多個調查人員 / 評估人員。為了做好三角測量，每一位評估者都會使用相同方法（例如訪談、觀察）進行相同的實驗，之后將所有評估者的發現進行比較。如果所有研究人員都得出了一樣的結論，那么其有效性就成立。
在用戶體驗研究中，同樣可以通過讓多個研究人員分析同一組定性數據來實現。使用不同種族、年齡、性別和階級群體的研究人員可以糾正諸如觀察者或訪談者偏見的問題。
3）理論三角測量（多理論）
該方法只涉及一組數據，但研究人員會采用不同的理論或替代的理論進行詮釋。人們甚至通過一些相互矛盾的理論視角來看待數據。
4）方法三角測量（多方法）
指在使用不同的方法來研究一種情景或現象。其目的是用其他方法的優點補足某一種方法的不足和偏差。該類型的三角測量與在社會科學研究中所使用的“混合研究方法”（mixed-method approaches）類似，用一種方法得出的結果來提升、增強和闡述另一種方法的結果。
不同的方法可以解答不同的問題，但同樣也有一定的局限性。在用戶研究（或者說任何一種社會研究）中沒有哪種方法是完美的。
利益相關者或初級研究員們會經常來問我，究竟該如何解決各種研究方法的局限性，我的解答通常就是“三角測量”。即使是計劃周密、控制得當的研究仍舊會存在局限。但針對特定的問題采用 多個視角（方法、數據點、研究人員以及理論），可以提升我們的信心，幫助我們獲得可信度。
在用戶體驗研究中，最常用的三角測量類型就是“方法三角測量”（例如通過調查和訪談來研究同樣的問題）和“研究員三角測量”（例如多個研究員分析同一組數據）。三角測量使我們對研究數據更有信心，揭示意想不到的發現，對現象有更清晰的認識。
針對一個問題使用多種方法進行研究以理解用戶的行為及其原因。例如，我們可以調查用戶如何使用一個特定的功能，然后通過深度訪談來探究為什么用戶會這樣用。使用混合方法常?？梢宰屛覀冇酶逦囊暯强磫栴}。
通常來說，研究會從定性的方法開始，以確定和縮小問題。例如，在做發現研究時，我們可以從訪談開始，一旦我們確定了一些主題，就可以用定量的方法來驗證我們的見解。當然過程也可以反過來，這取決于我們正在研究的問題。
無論是哪種類型的三角測量都是基于這樣一個假設：使用不同的數據來源、方法或者研究員可以減少數據集或方法論的偏差。
這意味著，使用三角測量可以增加我們對自己的見解的信心。
然而使用這一方法的同時，需要警告的是，它也可能導致“證實偏差”。可能你不太熟悉這一含義，“證實偏差”就是描述我們潛在的傾向，即注意、聚焦且更相信那些符合我們現有信念的證據。
如果你之前并未使用過三角測量，請記住它有時會得出矛盾和不一致的結果。在這些情況下，要由研究者來理解數據和不一致的來源。這對于經驗較少的研究者來說尤其有挑戰性。
三角測量有助于我們對正在研究的現象有更寬泛的視野但仍舊不是全貌。不用說，合適的設計研究仍舊對保證可信度至關重要。如果你的設計研究較差，那么三角測量將對你幫助不大 —— 輸出的質量往往取決于輸入的質量。
理想情況下，我們希望有數月的時間以及無限的預算來進行研究。但是事實是，我們通常會發現我們幾乎沒有足夠時間來嚴格執行某一種方法，且資源有限。這就使得應用三角測量具有相當大的挑戰性，它無法應用在我們所做的每個研究中。
所以我們應該如何決定什么時候使用三角測量呢？
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
文字是設計中的重要組成部分，就像我們平時看到的海報，里面各種被精心設計過的字體經常會成為視覺焦點，以醒目且個性化方式傳達出內容的精髓，最后達到的效果事半功倍。
雖然在UI設計中不需要對文字過分設計，但圖文作為主要的傳播途徑，字體的使用是否規范合理將直接影響著信息傳播的優先級、重要程度以及用戶的接收質量和效率。所以不管是平面設計還是UI設計，字體都是不可忽視的核心元素，做好對文字信息層級的處理，對用戶的視覺體驗有著至關重要的作用。
互聯網經過多年的發展，也積累的很多的專業字體知識，設計師應該去了解字體的性格及特征并將其合理運用，才能將信息更清晰的傳達給用戶。本文將圍繞著字型、字號、字距、字重等幾個屬性，針對各方面深度解析，希望能夠幫到大家。
一、字體的基本特征
二、字體的基本屬性
三、不同場景下的屬性參考
四、字體使用基本原則
五、UI設計需注意的問題
六、結語
文字是信息內容的載體，能最直接的將信息清晰的表達出來，字體則表現了文字的外在特征，合理的使用這些屬性特征不僅能清晰準確的傳遞信息、用于特定場景還能賦予情感表達，展現出獨特的魅力，例如：健身、器械類的產品使用的字體通常會給人一種力量、剛硬、壯實的感覺，而女性專用產品字體則顯的纖細、苗條。
不同類型的字體傳達出不同的氣質，綜合來講，字體可分為黑體、宋體、圓體、書法體這四類，平時大家看到的各種形形色色的其他字體，基本是通過這幾類延伸而來。
在UI設計中，絕大多數的文字排版用的是黑體，諸如思源黑體、阿里巴巴普惠體、蘋方（ios）、微軟雅黑（PC web）等都是標準的黑體。另外，特定場景如瓷片區、卡片、banner、專題頭圖、引導頁、閃屏等，對于用什么字體不會有太大的限制，在避免商用侵權的前提下符合產品氣質即可。
黑體字的筆畫橫平豎直、粗細均勻且字面呈正方形，一般來說，沒有襯線的字體都可以稱作黑體。黑體結構清晰、簡潔有力，能讓界面顯得莊重還附有現代感，雖然氣質上沒有太大的個性化、但可塑性很強，這也是在UI設計中、黑體一直很受青睞的原因，無論是標題、正文、提示等使用場景都可以作為首選，對老設計師能多一個選擇、新手設計師也不易犯錯。
iOS與Android是移動設備的兩大系統，雖然很多設計師用一稿適配兩端、遇到特殊頁面也只是單獨拎出來微調即可，但對于中、大型的互聯網公司則很難滿足優質用戶體驗中的部分細微差別，例如：iOS的蘋方字體在Android設備中無法高度還原、預留的文字數量上限位置無法顯示完整等，都會影響用戶體驗。
此外，iOS和Android都有自己獨立的設計規范，大家有時間的可自行查看，本文只對字體規范作基本了解。
iOS使用的是「蘋方」字體，提供了6個字重，英文字體為「San Francisco」；Android使用的是Google聯合Adobe發布的「思源黑體」，為充分滿足設計要求，提供了7個字重，英文字體為「Roboto」。
此外，如果界面中涉及的數據較多，數字使用DIN字體也是不錯的選擇，字體外形較長，易用且耐看，很適合數據統計展示，不過這款字體商用的話需要收費的。
字號的大小決定信息的層次和權重，不規律的使用字號會讓頁面信息雜亂，不利于用戶閱讀。在設定字號規范時，需特別注意最小值和遞增值。
最小值決定信息的可讀性，以2倍圖為例，iOS11系統將最小字號規范為11pt（22px），但很多產品依然將最小字號設定為20px，甚至部分產品將18px的數字加粗運用在標簽中，所以最小字號的設定并沒有固定數值，原則上不影響用戶的瀏覽就行。筆者建議最小字號不要低于20px，在設計過程中，可以通過設備實時預覽，因為同樣的字號在不同的環境、色值、背景下，其視覺效果都有所區別。
其次，遞增值決定著信息層級區分的明顯程度，遵循字號越大、遞增值越大的原則，常用字號數量控制在6種左右。iOS和Android都是采用的2倍數柵格系統，為了讓字號的層級區分更明顯，字號設定要避開奇數且最小遞增值不要低于4px，下面舉幾個常見的例子：
①：20、24、28、32、40、48、64...
②：20、24、30、36、42、48、64...
③：22、26、30、34、40、48、60...
...
規范好的字號該如何使用，還得根據界面中的實際場景來決定，如下圖：
字間距是指兩個字符之間的橫向間隔距離，在界面排版中，除了西文的字間距調整需求較大外，中文通常只保持默認，只有少數場景才會手動調整，且沒有固定的規律，保持視覺舒適狀態即可。例如：banner、界面大標題、重要數字（取件碼）顯示等。
行高是指包圍在字體之外的隱形邊框，一個字體元素的的行高等于文字上邊框+下邊框+字號的高度之和。
西文字體因高度的參差不齊，本身就能制造出視覺上的上下空間，通常行高為字號的1.2倍，而中文字體沒有上下間隙的延伸，行高則較大，一般在1.5倍左右，如果字號較小且折行較多，行高甚至能達到字號的2倍。
字重指的是字體的粗細，不同的字重能體現出不同的層級關系，給用戶的視覺感受也截然不同。
像蘋方、思源、阿里巴巴普惠這些家族字體一般都會有極細體、細體、常規體、黑體、粗體等多個字重，在UI設計中，實用的就常規體、加粗兩個字重，再通過色彩、字號使其成為對立關系，明顯的拉開文字內容層級后，方能保持良好的瀏覽體驗。
這種主要針對標點符號，以英文字母為標準，半角是指一個符號占用一個標準字符（英文）的位置，全角則是占用兩個字符位置。
眾所周知，中文使用都是全角、英文使用半角，并且會隨著中/英文的切換而自動改變，但有時候難免會操作失誤讓頁面中的某處信息看著怪怪的卻不明所以、另外中文信息中的時間/日期也大多會使用半角符號，所以設計師對此有一定的了解時候、，在處理這些細枝末節就能做到收放自如。
在色彩規范中，除主/輔助色之外，設計師還會提供3~4個等級的配色，如通用的#333（標題）、#666（正文）、#999（提示）、#ccc（占位符），這也是UI通用的文字色用色規范，不同的字號需用色規律。
如果想進一步延展，可以增加一點品牌色，也可以使用#000（純黑）調整不透明度來體現文字色彩層級，深色模式中很常見，下面我們一起來了解幾個常見的使用場景。
標題的主要作用是讓用戶以最快的速度了解界面主要信息，需要時刻吸引用戶的注意力，例如APP中的導航欄、模塊標題、內容標題、數據統計等。需要簡單明了且有沖擊力，字號一般會控制在30px以上并加粗顯示，直接使用一級色值（#333）即可。
在特殊場景下，標題也可以使用主體色值，但一定要注意容器背景與其他信息色彩的協調，不然花里胡哨的還不如用回一級色值。
正文并不需要吸引用戶注意力，它主要是提供標題的注釋或內容的詳細說明。
當白色背景文本內容過多、在需要用戶仔細閱讀的情況下，一定要注意顏色不能太深，不然顯的主次不分，還有些刺眼，這里推薦26~30px字號使用二級文字（#666）色值。
提示類文字使用場景就相對較多，它除了給用戶展示當前狀態，還能給予合理的引導，促進用戶進行下一步操作。常見使用色值為三級（#999）、四級色值（#ccc），例如界面中的操作注意事項、表單占位符等。字號一般為24px，因使用場景不同，也會有特殊的存在，例如表單中占位符的字號會跟隨輸入后的字號統一。
超鏈接在字號、色值上沒有一定的限制，但需要一個特定的輔助元素/屬性來提示用戶這是可點擊的。
例如APP登錄頁面，找回密碼、注冊、獲取驗證碼等，大部分都是用主體色、圖標（右箭頭）等方式強化可操作入口，而PC端網頁中超鏈接的表現方式，下劃線、藍色字體、>>這三種方式幾乎能涵蓋所有。
規范并非不可更改，它只能幫助設計師在大部分使用場景中減少設計出入并提高產出效率，但總有一些使用場景需特殊對待，字體也不例外，如以下場景：
◇ APP金剛區入口字體大多使用24px，一級色值（#333）；
◇ 底部Tab欄字體未激活使用淺色，激活后切換為一級色值（#333）或主體色；
◇ 重量級的提示語用紅色色值；
◇ 按鈕中的文字跟隨按鈕的等級權重變化；
◇ 深色容器標簽的文字反白；
◇ ......
雖說黑體（蘋方、思源、阿里巴巴普惠）是UI設計中的首選字體，但這也僅僅只是建立在不出錯的的情況下、滿足基本條件而選擇，如果想表達出產品的類型、情感、氣質等品牌屬性，在不影響用戶識別的前提下，可選擇一款符合產品氣質的字體，打造出差異化的瀏覽體驗，對于追求完美的APP來時是一個不錯的解決方案。
例如，部分藝術、女性類的APP會選擇使用宋體，整體看起來有一種高端、時尚且優雅的感覺。
整體界面使用特殊字體還是相對較少，為了更好的體現出產品屬性/風格，將其融入不同的模塊及使用場景，會讓產品更有特色，例如banner、瓷片區、大標題、頭圖等，對用戶的視覺吸引力能得到很大提升。
在一個APP中，堅持使用同一個家族的字體，對標題、正文等文字信息有一個統一的視覺規劃，這樣有助于建立起體系化的設計思路，避免在開發落地時存在一致性問題，減少開發與設計的出入。
筆者曾見過這樣的設計師，界面中原本用了「蘋方」字體，在一個特殊場景下，「蘋方」的粗體字重無法滿足大標題的使用需求，于是將大標題單獨改為「阿里巴巴普惠體」的最大字重。
從表面上看，上述的設計需求是滿足了，但稍有不慎就會成為沒有價值的藝術品，首先，單獨一處使用不同家族的字體，會影響整體視覺的一致性；其次，若程序沒有嵌入另外的字體，產品落地后其視覺效果毫無改觀，且更沒有必要為了某個場景的使用要單獨嵌入幾十到幾百兆的家族字體，讓應用安裝包無故加大。在設計中，有時候在解決某個問題時，解決方案并非無可替代，加粗字體亦是如此。
另外，在可用性、實用性強且必要的情況下，并非不能再增加一個家族字體，例如所有標題系列使用「阿里巴巴普惠體」、數字系列都使用「DIN」，前提是一定要形成體系化，并非某一處的使用。
在同一個界面中，字體色值、字號、字重等，都是用于區分信息層級，盡量不要使用過多的層級，避免層級混亂影響信息瀏覽。
在信息層級處理方式的四個基本原則中，「對比」就是將復雜的信息通過元素的各種屬性以不同的視覺效果呈現，來體現信息節奏感，并非是為了好看而隨意給文字賦予各種屬性及樣式效果。
避頭尾使用在文字內容較多的折行場景中，主要處理標點符號剛好出現在一行文字的開頭或結尾時，通過自動調整單行的字符間距、在視覺上將標點符號前移或后移。
在新聞資訊類應用的詳情頁中，避頭尾使用的較多，用以避免頭/尾存在標點符號造成視覺重量不一、信息參差不齊的問題出現。
很多時候，為了區分信息層級，首先想到的是利用不同的字號、字重來體現，這當然沒有問題，但如果結合字體的明暗關系（灰度色值等級）則效果更佳。
如下圖：標題一級色值（#333）、正文二級色值（#666）、時間日期三級色值（#999）。
備用字體只會運用在web頁面中，如果網站需要一款特殊的字體才能彰顯其獨特的氣質、同時又擔心用戶在某些設備中因為沒有這個字體而無法瀏覽其效果，則會另外再選擇一款相近的通用字體作為備選，以彌補視覺體驗上的損失。
如果字體包不大，也可以讓開發將其放在服務器端，這樣能讓所有用戶都能看到相同的效果，省去了不少麻煩。
可讀性應該是選擇字體的首要元素，雖說很多文字我們都可以從前后字義、聯想詞等角度將自己的理解補充完整，但完全沒有必要。
UI設計不像海報那樣融入較多的藝術成分，更需要的是內容清晰、表意明確、高效率的傳達，任何增加用戶閱讀、理解成本的做法都應該規避掉，例如過于變形的可愛風格、書法手寫體等都盡量少用。
文本內容是UI界面中占比較多的元素之一，設計師需要對其基本屬性及使用場景有一個清晰的了解，使用的是否恰當取決于我們對字體的選擇。雖說在UI領域，字體模塊類的文章比較少（更多是文字、字庫的設計），但它在設計規范中的地位是舉足輕重，選好一款字體對設計來說是錦上添花。
關于UI界面中的字體，其實沒有太多的講究，也沒必要整得花里胡哨，重點在于排版過重中注意信息層級的劃分以及有足夠的視覺舒適度即可。
作者：大漠飛鷹CYSJ 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
按鈕設計是我們經常會遇到的一個類型，一個好的按鈕其最重要的就是激起點擊欲，讓人忍不住去戳戳戳。
我們來看看下面這個按鈕：
很普通，處處都很常見的一種按鈕，沒有任何點擊欲。
那我們應該怎么做出她的點擊欲呢？
其實就是要讓按鈕更有立體感，話不多說直接上干貨！
可以用不同的顏色，放大一圈，形成對比：
上下錯開一些讓按鈕的造型飽滿立體一些，從原來的單一一層變為兩層：
為了讓按鈕更立體我們可以把這兩層個復制一層，往下移動幾個像素：
這樣按鈕是不是就已經立體多了？別急，還有呢！
這里細節就比較多，想把按鈕做到晶瑩剔透可不容易，給大家好好講一下。
先給圖形加上一個內發光：
使用剪切蒙版，涂顏色或者再來一層內發光，加強這個效果：
復制一層，選用更深的顏色，向下移動，剪切蒙版到里面去，把按鈕有一個明顯的明暗分割線，形成這種光的層次和厚度：
沿著造型刻畫高光，和邊緣有些間隔：
在白色的底座上加入按鈕的投影：
這樣一個剔透，立體感強的按鈕造型就完成啦！
那還能不能讓點擊欲更強一些呢？
放上文案看看：
就還是有點單對吧。
這種時候我們就可以從按鈕的文案出發，加入一些圖案，讓它更生動！
比如這里的文案是“發射”，就聯想到了火箭，我們可以繪制一個火箭出來。
把它加入到按鈕上：
這樣一個豐富且有點擊欲的按鈕就完成了！
并可以用同樣的邏輯去延展別的按鈕，讓他們保持統一性：
增強按鈕的點擊欲的方式，其實就是讓它變得立體且豐富。
1.層次：單獨的一個色塊，會很單薄，增加層次增加其在造型上的豐富度。
2.厚度：厚度可以讓按鈕變得更立體。
3.光影：讓按鈕富有變化，更立體和吸引人。
4.表像圖形：一個關聯文案信息的點綴圖案，可以讓人更有食欲。
作者：菜心輕量文 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天和大家分享用了幾年的一個社交軟件Instagram。發現這款軟件整體的設計與體驗有值得學習的地方，從10個維度分享分享，希望大家喜歡啦～～
下圖是關于Instagram的從2010-2022整個圖標變化的過程，從中能發現：
1.圖標從擬物的風格慢慢變成扁平的風格。
2.從具象的相機變成更加簡約線形的相機圖標。
3.顏色越來越艷麗、明亮，給人年輕、炫彩、簡約的設計感受。
4.從logo的變化中能看出頁面將從擬物的時代跨進了扁平時代，也能折射Instagram界面必將是往極簡、炫彩的方向走。
我重新臨摹Instagram啟動圖標，發現里面有許多的設計小知識點值得學習。
例如：圖標背景顏色有黃色、紅色、紫紅色、紫色，相鄰的兩個顏色互為鄰近色，使得繪制出的背景自然而炫彩，非常不錯的設計，漸變的融入也很自然。
當我們自己做漸變的圖標背景時可以用兩兩相鄰的顏色，讓漸變融入的更自然。
明顯的發現Instagram顏色跟色譜的規律一致，顏色從左到右色相的變化值在50度左右，4種顏色都是用的高飽和度、高明度的色彩，非常艷麗、明亮，利用漸變附在英文上做出英文版的logo。
iPhone 14的字體漸變也是用的這種方法，利用兩兩相鄰的顏色來做漸變。連蘋果、Instagram都在用，趕緊學起來吧，你也可以的～～
1.通過自己仔細的觀察發現Instagram攝像頭圖標圓角是帶有平滑過度的圓角，和普通的圓角不一樣。
2.平滑圓角給用戶的感受會更舒適、平滑、有活力，而普通的圓角顯得更加生硬、不自然。
3.蘋果的主題圖標都是帶有平滑過度的圓角而不是一個普通圓角，使得圖標顯得更加自然。
4.可以去看看之前原研哉幫小米設計的logo，會發現他們的logo給人干凈會更加有活力、生命力，而不是使用這種普通圓角，而是一種平滑過度的圓角～
1.從Instagram的啟動頁面看出，Instagram追求的是簡約、突出品牌色的方向。
2.主界面主要以用戶發的圖片為主而不是文字，往往圖片比文字更容易產生閱讀與反饋。
3.整體的界面簡約、素白，圖標都是統一用黑色線條的描邊。
4.當自己關注的用戶，發了一些視頻，頭像上附帶Instagram的品牌色的圓形，在白色的界面用品牌色進行了點綴，讓單調的界面更具有識別性。
Instagram的發現頁面做的很不錯，我重新繪制了這個頁面，發現系統想推送給你的圖片或者視頻會做等比放大2倍處理，一屏顯示圖片或者視頻至少有一個最大顯示，給用戶的感受是有主次。同時開發也能很好實現這種布局，具有一定的規律性。
在Instagram界面當用戶發的圖片超出5張時，圖片下方的輪播點會出現變化，有大有小。
我重新繪制了一個用戶發的7張圖片的示例，當用戶在左右滑動圖片時，輪播的點會跟著動，同時會有大小的顯示，暗示用戶后面或者前面還有多張圖片，有近大遠小的感覺，非常細節的設計～（可以利用在自己的一些設計上）
1.在Instagram的用戶界面，視頻、多張圖片、單張圖片和置頂4種狀態右上角有個圖標的標識，讓用戶清晰知道圖片的內容狀態，提前給用戶有個心理預期與區分。
2.當用戶點擊進去類似抖音的布局，可以進行上下滑動切換視頻內容，雙擊可給該視頻點贊，整體的體驗很絲滑，沒有任何的卡頓與拖沓。同時界面圖標用線性的形式，布局統一、和諧。
Instagram整體的圖標設計是線性的圖標，線性圖標給人的感覺是可點擊、可操作的，同時感覺簡潔明快的氣質。圖標的統一讓每一個界面的視覺感受都是一致的。
這個界面放在你面前可能都會知道是Instagram這個應用，這個界面框架已經形成品牌意識。 Instagram幾年一直沒有更改這個布局，非常經典的設計，沒有太多花里胡哨的圖標與信息，只有簡約的線性圖標與用戶發布的圖片，克制的設計。也有很多相機應用、戶外廣告都借鑒了Instagram布局，已經在用戶的心智里面了～
1.越來越多的企業的品牌色往鮮艷的方向走，突出品牌形象。
2.圖片的排版不一定是同樣大小的，可以有大有小，取決于更想給用戶傳達什么。
3.圖標的統一性很重要，當整個app的圖標風格都一致時，給用戶的體驗的感受也是一致的。
4.不斷重復一個設計框架、設計組件時，會形成品牌意識，讓用戶記得你的產品。
藍藍設計的小編 http://www.syprn.cn