成本思維是什么？
今天跟大家聊聊一種思維，不是產品思維也不是交互思維而是：成本思維
為什么設計師要有成本思維，以及成本思維在做我們做設計時對我們有什么幫助。
不僅僅在工作中我們需要思考成本，在生活中我們也無時無刻都在計算成本。成本總是和收益掛鉤，所以貝克爾在《人類行為的經濟學分析》中提到：人的任何行為都是理性選擇的結果，無利可圖的事人們事不會去做。雖然這句話不能覆蓋所有的人，但是大多數人就是如此。
在夜深人靜的夜晚你饑腸轆轆想吃夜宵，你可以選擇下樓到周邊小吃店就餐，也可以選擇叫外賣，前者付出的成本是你需要通過身體行動來交換最后的結果，后者則是花費一定的金錢來代替前者的行動。
那么我們通常會如何選擇呢？如果這兩種成本有很大的差異，比如需要到很遙遠的地方那么除了身體行動成本外，時間成本也會計算其中，所以相比后者成本陡然增大，于是我們就會選擇成本低收益大的方式。但是假如你現在極度想要吃那家的夜宵，外賣點餐會特別影響口感，那么你可能會選擇前者，這里由于外賣口感和主觀意愿影響到了我們理性的選擇。
成本決定了收益的效率、大小和方式，小到你伸手拿一支筆你會選擇最近的，大到我們人生的投資。成本與收益之間并非是直接關系，收益的大小的不取決于成本的大小，還有風險因素。例如我們在對 UI 界面進行優化，可以選擇的方式有很多：
我們的目標是讓用戶獲得更好的體驗并且提升業務價值。3 種方式需要的成本高低不同，我們都希望付出最小的成本達到最好的效果，于是我們就會考慮到風險因素，假如新流程用戶不會用怎么辦，假如新版本導致的數據下滑怎么辦，假如行業出了新政策了怎么辦等等。所以除了這些成本外也要考慮應對風險的成本。
你看為什么有錢人都會坐頭等艙是因為頭等艙可以幫他們節約更多的時間，提供更好的環境與服務，讓他們產出更多的價值。還有假如你的車壞了，你最直接的方法就是花錢找人幫你修而不是自學自修，因為你將花費太高的成本。
再舉一個例子，我們想提升能力，有的人選擇自學、白嫖，有的人選擇報培訓班，這也只是時間和金錢上的成本選擇，如果你的自學（白嫖）在短時間收益很大那就毫無疑問幫你省了一大筆錢，但是如果自學很久都毫無效果，那么時間就是你花費的成本，時間和金錢不同的是，時間不可逆。看起來花錢比花時間更好？不是，花錢也有風險，比如課程質量和服務很差，錢沒了還學不到，甚至賠上了時間。但如果你選對了，那么收益就遠遠會大于自學。
1. 實現成本
實現成本指的是想法與落地中間需要付出的行為、時間和其他損耗，例如我們希望提升用戶下單的轉化率，我們可以選擇：
在這幾個方案中最低成本是 「按鈕設計更明顯」，因為只需要調整樣式和簡單開發就可以實現，但收益并不是最高的，而其他的方案需要更多的角色花費更多的時間來參與，但是收益也不是顯而易見的。所以如果你的產品比較成熟，那么我們一定選擇成本更低的方案，反之我們會進行更高成本的嘗試。
還有比如我們找工作，新公司福利待遇比現在公司好 50%，平臺也更大，是否不需要思考直接去呢？當然不是，你需要考慮通勤成本、生活成本、自身成長成本等等因素。如果你 50%薪資漲幅換來的是 996、每天通勤時間 3、4 個小時，不僅僅是時間精力，還有我們的身體健康的成本，我會覺得遠遠不值，成本太高。
2. 機會成本
我們先來看一下定義：機會成本是指面臨多方案抉擇時，被舍棄的選項中價值最高的就是本次決策的機會成本。舉個例子，比如當前版本我們有 1 個開發一個設計一個產品，我們面臨著兩個需求，但是資源和時間只夠我們做一個需求，這時候 2 選 1，那個被拋棄的需求所擁有的價值就是我們所選擇的那個需求的機會成本，相當于我們放棄了那個需求所擁有的價值。
再通俗一點講，我現在有 100 萬，面臨著兩個選擇：1.銀行理財，年收益 4%，40000. 2.做生意投資，年收益 8%，80000，那么就相當于我花費了這 4w 的潛在成本獲得了 8 萬的收益。
3. 邊際成本
邊際成本的理解很簡單，我們可以理解為我們每付出一定的成本收貨的收益或者每收獲 1 個單位的收益所付出的成本。用一個通俗一點的例子來講，比如你一共學習 10 天，第一天學完你考了 30 分，第二天學完你考了 50 分……第8天學完你考了94分，第9天學完你考了98分第10天學完你考了100分，花費的單位天數一樣但是每次增加的分數卻越來越少，收益也就越來越少。
在做產品設計的時候，我們往往會有一個板塊叫為你推薦，比如微信閱讀中的這個板塊，它一次提供了用戶 6 本書，雖然算法可以算出有許多書，但是這里每次只提供給用戶 6 本，是因為涉及到了邊際成本，少量多次提供能夠讓用戶更聚焦，更快的選擇好書本進行閱讀，每多提供幾本書，用戶選擇閱讀的時間成本就會越大。有同學會問：那我只給 1 本不就好了，用戶就能馬上讀了，何必要推薦 6 本？
我們如何保證那一本剛好是用戶想讀的，沒有辦法做到如此精準，如果每次只推薦一本書，而用戶嘗試了幾次都不喜歡，他們就會放棄，所以這里就會選擇一個臨界值，比如我們可以選擇每次放不同數量的書，根據數據判斷在給用戶幾本書的時候用戶閱讀轉化和選擇時間成本更低。
4. 體驗成本
體驗成本也是我們設計師需要時刻關注的，俞軍老師在產品方法論中提到，用戶價值=新體驗-舊體驗-替換成本，體驗成本可以包含很多信息，最主要的就是認知與交互的成本。
認知成本
如何降低認知成本可以從以下這些點進行優化
1.文案
文案的設計要求是簡單易懂，避免產生歧義，之前給大家舉過的一個高德地圖導航在到達目的地之后給出一個“原路返回”按鈕的分析，大家可以再思考一下，是否會產生歧義。還有確定、確認大家是否知道怎么用呢？
文案也需要有情感化，避免生硬、帶負面情緒的問題等等。
2.樣式
視覺最為直觀，一個按鈕一個控件的樣式是否能滿足用戶的心智和預期，將會影響用戶的認知，例如以下的幾個按鈕，出現在不同場景用戶會出現一系列問題：為什么我點了沒用？為什么還不能點？我到底該點哪里？
還有你的品牌是否識別度高，也決定了用戶對你的認知，最近小米花了百萬請大師做了新的 logo，在視覺上更加圓潤，在圓 logo 的基礎上做了很多的微調，實際上也是避免了太大的 logo 變化導致品牌認知成本的提高，認知成本一旦太高，品牌市場的敏感度和曝光度還有各種替換、衍生、配套的隱性成本也會大大增加。所以這一舉動是明智的。
3.信息
比如我們希望新用戶去關注一些大咖、kol 獲得更好的推薦，但是如果我們只是將推薦者的頭像和昵稱給新用戶，那么這個策略就是失敗的。因為我們沒有考慮新用戶的認知：1. 我為什么要關注她 2. 關注她我能獲得什么。所以僅僅依靠頭像和名字在這里對用戶的認知是沒有任何幫助的。
行為成本
我們通過利用肢體來和媒介進行交互，目的是完成某項任務。其實只需要你抬手，那么就是產生了成本，只不過某些成本是固定的無法減少的，比如你要去騎車那就需要去解鎖，如果沒有鎖車可能就會被偷走，這是出于安全考慮。
行為成本在具體數字產品中我們可以發現很多，例如你只需要將手機拿起，屏幕就會亮，相比于找到解鎖鍵再按一下成本就低了很多。而亮屏后不直接解鎖是為了防止誤觸或者隱私，所以還需要通過指紋或者人臉進行識別。
例如幾種不同的驗證方式，利用滑動拼圖來解鎖和輸入相關驗證碼解鎖，前者比后者的學習成本和操作成本都低。
在移動端我總結了幾個減少交互成本的方法，不妨來看下：
soul 音頻處理；日期選擇；iPhone 底部橫條切換窗口
游戲昵稱隨機；股票買入數量
這里也有同學會問，既然都可以代替，那滑動能否代替輸入？必須也是可以的，例如 iOS 自帶的計時器中選擇時間的控制器，還有鬧鐘設置，這里要注意的是，滑動代替輸入是要基于本身該信息是由范圍內并且不需要精細化控制的，比如房價篩選，房價本身量級很大，用戶篩選也不會精確到個位數，在這里用點擊和輸入會比滑動的成本更低。
反例就是音量、明暗控制，大家可以感受一下輸入在這里的雞肋。你需要精確控制選輸入，需要大致的范圍選點擊，非常模糊的感受選擇滑動。
例如我們在開車進行導航的時候，打字輸入非常不便，于是加入了語音輸入。還有在微信進行賬號切換時，我們可以選擇利用語音輸入數字來驗證身份。
對于新用戶操作復雜功能和界面的時候，提供更多提示能夠很大程度上減少用戶的操作成本。
在 iOS 或者安卓的手勢控制中，我們會發現又一些常用的手勢比如：點擊、拖動、輕掃、雙擊、縮放，這里我們可以定義為一級手勢。還有一些不常用的比如：重按、長按、三指滑動、三指縮放等，這些手勢的認知成本和行為成本都很高，定義為二級手勢，不建議頻繁使用。
設計師在日常工作中接到的需求繁多，無論是在做需求之前還是在思考設計方案的時候，成本思維可以幫助我們很好的規避一些問題和風險，我們追求控制成本使收益最大化。所以學會控制成本的設計師不僅僅題可以提高個人工作效率還可以幫助公司創造更多價值。
文章來源：優設 作者：應駿
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：隨著公司和業務的不斷發展，原先的系統不一定適用于現在的場景，因此需要進行升級改造。作為設計師，我們是如何系統性地去為業務帶來更多的體系化的價值？本文作者將從五個方面進行分析，與你分享。
項目背景：
當公司的發展規模到一定程度時，考慮到信息安全、持續采購成本與相關風險，企業會采取自研的方式來實現部分協同工作軟件的自產與自用，本文將以內部目標管理系統為例，闡述我們是如何系統化的做企業系統設計改版？
什么是OKR？
OKR，是Objectives 和Key Results 的縮寫，即目標和關鍵結果，它是企業進行目標制定和過程管理的重要手段。采取OKR的管理方法，將公司目標層層分解到團隊，部門再到個人，在各個層面貫穿和統一起來，以幫助實現目標達成。
改版的契機是什么？
改版不是設計說想改就能改，在做新的OKR系統之前，之前是通過「績效系統」來進行目標管理和績效評估，支持簡單的制定和結果的評估的使用，因系統操作流程、界面體驗、業務場景已經嚴重的影響到目標管理的效率和效果，具體體現在幾個方面：
總之，工具的體驗已經是嚴重影響公司員工目標管理的一道障礙，所以如何將整體的系統操作體驗提升起來是設計急需去解決的問題。
那么，確定有問題需要改，作為設計師，我們是如何去系統性的去為業務帶來更多的體系化的價值？
理清業務目標，制定設計策略，是系統性改版產品的前提，在實際工作中設計師很容易被產品的原型、對產品的描述蒙蔽，只有非常清楚的理清業務的目標，才能制定系統性、合理的設計策略來支撐業務，通過專業的設計方法來助力業務結果的達成，在這個項目中我們是如何做的呢？
對焦業務目標：
OKR系統的改版項目最開始是高層的訴求，提的業務要求很簡單“讓大家用起來，目標管理起來”，那么如何讓大家用起來、利用系統將目標管理起來是當前需要解決的的問題。
“讓大家用起來，目標管理起來”需要去解析的是，為什么舊的系統大家用不起來？為什么目標管理有這個管理機制，但是沒有依賴于系統管理起來？
制定系統的設計支持策略：
設計師同行可能會問：不都是做需求嗎，有啥做啥，有啥策略可言？如果是以這樣的方式來做設計改版，很有可能會被業務方牽著跑，即便是知道對方堅持的不是很合理，但也沒有辦法來推動這件事往更好的方向發展。
理解用戶，溯源本質問題，是最設計環節必不可少的環節，通過對用戶的深入研究，挖掘本質的共性的問題。在這個項目中，我們通過定量+定性的手段獲取用戶的心聲：
定量問卷——獲取用戶的基礎的問題：
前期在公司內部針對普通員工、MGR、HRBP、高層4種角色，調研了100多位內部用戶的心聲，將不同崗位和職級對于績效系統的問題真實反饋收集匯總。
定性訪談——深入獲取用戶的訴求：
因為系統面向對象是企業內部員工，所以針對每個角色都做了訪談調研，深入的挖掘他們對當前的產品使用問題，并將問題按照核心流程中所涉及的角色在不同階段所需的操作和流程進行了梳理，整個階段拆解為：制定階段、執行階段、結束回顧三個主要階段，拆解每個角色在這些階段中的觸點和機會點。
結合問卷、專訪談的分析和梳理，篩選出目前系統的核心問題：制定流程、對齊關系、過程跟蹤、信息觸達。
在前面已經初步發現和定義了問題，這么多分散的問題如果平鋪出來可能會嚇到產品和研發，所以接下來需要將其系統化的變為整體的設計方案，我們需要將其串聯成完整的場景，然后逐步擊破，我們是如何做的呢？
重點模塊及爭議點的討論：
在場景分析前期，我們設計內部針對“核心階段”、”對齊關系“、”權限管理“、”全員OKR“進行了討論和范疇的界定，對以下問題進行了討論：
梳理清楚角色關系圖，有助于多方去理解各個維度的關系：
結合業務需求，賦予體驗價值：
OKR系統雖然最為一個內部管理系統，我們也逐步在設計側去從“具有功能價值”往”“賦予體驗價值”去發力，將更多的“能”和“可以”轉變為“方便”、“簡單”和“輕量化”等，來提升各個流程階段中的體驗，比如：
具體到串聯場景怎么去理解？
一個新的OKR周期會經歷三個主要階段，每個階段會涉及到多個節點，在每個一個節點上去思考發力方向：
為了便于理解，將關鍵的場景提供了比較簡短的描述，這個描述就是從舊到新的過程，后面的設計展示也是圍繞著這些內容進行展開，具體如下：
1）制定階段，包含寫、看、評、管
寫：輕松撰寫，高效共創
看：簡單查看，便于跟進
評：輕量互動，便于記錄
管：高效審核，隨時跟進；條條對齊，事事關聯；
2）執行階段，包含更、改、推
更：隨時更新，條條追溯
改：慎重修改，條條有據
推：合理推送，終端打通
3）結束回顧，包含查看、追溯、復盤
查看：快捷查看歷史周期
追溯：記錄明顯標記，事事追蹤溯源
復盤：復盤總結，目標達成
經過前面一系列的調研、分析總結，設計圍繞著3個階段的關鍵結論進行展開，即OKR制定、執行、結束三個階段。
（因每個階段篇幅較長，方案設計部分僅展示部分頁面的思考過程和頁面展示）
在寫OKR時，設計讓撰寫輕松、可以高效的共創，主要通過以下3點：
1）清晰的頁面結構
讓用戶能明確的感知到系統的整體結構是有規律的，可以簡單被理解的，即左邊全局控制，右邊內容展示左邊導航全局控制著寫、審、查、通4個功能
右邊內容展示跟隨著導航內容變化
2）O與KR的錄入快速切換
為了讓用戶可以沉浸在一個頁面寫內容同時，還能縱覽全局結構，在寫OKR的頁面增加了OKR大綱的錨點切換功能，便于多個KR之間的切換，避免因頁面過長帶來的翻閱困難的問題。
3）減少步驟，減少跳轉
減少步驟，減少跳轉有很多場景都有涉及到，比如：
查看和跟進屬于第三方的協同伙伴，為了讓伙伴更輕松的跟進，做了2個設計處理：
在管理者審核下屬員工時，簡化了大量信息，前置待處理信息以及待處理的關鍵信息，讓管理者比較直觀的知道有哪些人提交了，哪些人修改了，哪些人需要重寫等等。
為了讓員工便捷的進度管理，在OKR管理頁面以輕量的臨時彈窗，來方便用戶快速發起和輸入內容，每條更新記錄同時也能同步給關聯方。
慎重修改、條條有據主要是滿足管理者和關聯管理訴求，OKR可以在中途被修改，但是修改的結果是需要明確告知相關人，在增加、刪除、減少的內容上，以特殊的示意對比來記錄依據，同時也督促發起方能審慎修改。
OKR的消息推送在整個階段中占據了非常重要的信息觸達的作用，在整個OKR的制定階段和執行階段不可或缺的部分，而消息推送過多將會導致信息冗余，那么如何合理進行推送消息也是重要一環。
我們把消息類型通過兩個維度定義消息的優先級：“重要性”和“緊急度”，通過四象限法則，我們拆出來了：
通過此模型和產品確定了每一個消息類型的所在位置，且清晰表達的了每個消息應當的位置。
每個渠道都有相應的特點，我們結合渠道的特點去確定不同優先級的消息應當推送的渠道。
最終在實現方案上，實現了有層次、分場景的消息推送方案，盡量做到少打擾用戶同時，可以及時了解重要信息。
桌面端是主力生產平臺，通常是多窗口多任務，鍵鼠操作精確高效。在專注姿態下，我們可以盡量安靜地展示更多常用功能，讓用戶在一個視圖中即可完成相對復雜的任務。同時在列表頁中，更大的空間讓我們可以把目錄樹展開，減少導航跳轉。
手機端的特點是專注當前任務?？梢酝ㄟ^信息降噪，加強對比來讓信息傳達能明確，幫助用戶完成單個任務；而清晰的導航可以避免小屏幕上頁面頻繁切換所帶來的導航負擔。
1）最終實現方案
結合終端的差異，把移動端定位為：側重便捷快速的查看和溝通，同時將重編輯的場景在移動端去除了，更加側重于查看、互動和進展更新的低成本操作的場景。
2）中途驗證效果，確保上線的效果
在設計的過程中，為了進一步的驗證設計合理性和易用性，針對角色代表進行了8組可用性測試，最終普遍反饋新版的操作體驗更好。
針對了項目的設計效果落地，設計除了在過程中不斷的跟進產品和研發提出的問題，在測試階段提出效果走查文檔，不斷的打磨細節，才能保證最終的設計效果，當然付出總會有回報，新版的系統上線除了制定、管理、查看關鍵模塊的UV和PV的業務數據達到了比較好的效果外，在新老版本的滿意度和流程操作犯錯率上也得到了一個比較好的驗證。
在OKR系統項目的整體流程中，針對產品大改版的時候，我們設計需要前置思考業務，全局看待產品，系統性的去思考和設計，助力業務結果達成的同時讓設計價值更好的體現出來，最后再回顧下整體流程：
文章來源：人人都是產品經理 作者：酷家樂用戶體驗設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一起深度用案例解析B端導航設計中的交互
hello各位在B端奮斗的小伙伴們，你是否會時常因為面對導航多種多樣的形式從而面對需求時無從下手，你又是否因為雖然見過了很多的案例仍然不得導航設計的要領和精髓，沒關系，今天我們就一起來解決這個在B端設計中困擾我們多時的難題，從交互的角度結合案例對導航進行一個立體的剖析
如果你準備好了那么就請系上安全帶現在就發車
要探討一個概念那么首先需要知道的是其精準的定義，才能展開研究，而所謂的導航（Navigation）的精準定義可以闡述為：是一種對信息的分類，幫助用戶找到想要的信息、完成預期的任務
如果你覺得這個定義很抽象，那么不妨從這個角度去理解，如果說任何界面上的功能都能夠找到在我們物理世界的隱喻的話，那么導航映射的就是我們物理世界中的路牌、導覽、線路示意圖等，因為立足于其功能而言，導航的作用用一種大白話的說法就是：告訴用戶你從哪里來，你在哪里，你可以去哪里
由此我們對導航有了一個較為準確的把控，那么請在座的各位快速回答我一個問題，你能夠告訴我以上6個內容那些不是導航嗎？
3
2
1
OK公布答案，如果你的答案是2和6那么恭喜你，你對導航的理解是較為優秀的，2和6的名稱大家想必也不陌生那就是：菜單，但是不夸張的說日常的工作中仍舊有不小數目的一波同學搞不清楚這二者的區別，那么如何對二者進行一個有效的區分呢
同樣是從定義來入手，參照前面我們給導航進行的定義方式，菜單就是：是一種對動作的分類和集合，
幫助用戶快速達到某個功能,也就是說當你對菜單的某一個欄目進行點擊時會立馬生成一個具體的動作，而導航則是對信息的分類與合集
那么明白了這點我們就可以對導航進行分類了，提到導航的分類大家一定會脫口而出一堆詞匯如：頂部導航、底部導航、左側導航、舵式導航、標簽導航、菜單導航……沒錯這的確是一種分類，但他只是導航在外觀這個維度的分類，并不是我們今天從交互、結構層去討論的重點
而立足于結構來對導航進行分類又將是如何呢？較為科學的來說是以下幾類：
全局導航
局部導航
輔助導航
內嵌導航
友好導航
遠程導航
下面我們來對這6類導航進行一步一步的具體分析
所謂全局導航是指他可以覆蓋整個產品的通路，往往表現為產品的一級分類（而且大部分情況都是一級分類），他不一定包含全局信息，但是一定可以讓用戶可以去到其目標的關鍵節點
所謂局部導航是指在同一個框架中，可以到這個節點上的上下級通路，他一定存在于嚴格的父子級關系中
所謂輔助導航就是提供用戶在全局/局部導航不可達到相關內容的快捷途徑（這個快捷途徑在本產品內）
所謂內嵌導航也叫上下文導航，是指嵌入頁面自身內容的導航，通常同在上下文超鏈接、引導搜索等
所謂友好導航是指它可以為用戶提供一個便利的前進途徑，在需要的時候能夠找到入口信息，通常在不需要的時候成隱藏狀態
所謂遠程導航是指不包含在產品結構中，以獨立的方式存在產品內，通常表現為網站地圖、索引表（地址選擇、品牌選擇）等
在從結構的層面了解了導航的基本類型之后,順便給大家提一提導航的外觀，這里并不展開說，大家需要知道的是導航的外觀使用遵循的是“同構異型”的準則，什么意思呢？同樣的結構（比如同一組數據集：商品、商品名稱、商品價格）可以嵌套進入不同的外觀如：卡片式、列表、詳情……這個視具體的業務情況、使用場景而定
常用的導航外觀基本分為以上七種外觀即：菜單欄、樹狀表、頂欄、選項卡、面包屑、文字鏈接、步驟
知道了導航的結構分類和使用場景，那么不妨來給大家一些關于導航本身的小貼士作為原則參考解決大家在實戰中的一些問題
對于B端產品來說穩定相當重要！因為B端產品對于用戶來說使用和學習成本、門檻較大，如果你很頻繁地對其路徑進行修改調整，用戶就會因為產品不符合操作的習慣、心智模型對產品很容易滋生負面情緒，對于產品本身來說這樣的傷害是需要盡量避免的
還是從穩定的方面來說，我們需要保證的是導航的變化不會因為產品的變化而發生很大的變化，舉個很簡單的例子就是當我們的產品的功能增多時，尤其是二級導航的項目增多，導致原來如果是橫向布局的導航不得不改成縱向布局的導航，這就所謂的因為產品的變化發生很大的變化，所以在選擇導航布局的時候就需要打下一個很好的基礎便于日后的拓展
這是站在一個外觀和交互共同的層面去看，導航的大小一定要足夠，而且其位置一定要是用戶認為足夠清晰的，確保在視覺反饋的的層面對于用戶來說是友好的，其次就是所有的可交互區域需要有積極的響應，與內容區要有對比，可以將其稱為界面的熱情度，這也是一個優秀界面的自我修養
一個頁面中允許出現兩個主導航，同一個界面中允許出現兩個同樣的導航項，并不是說一個項在導航中只能夠出現一次，并沒有那么死板
這對于To B 的設計來說十分重要，不同于To C的產品，B端產品的一個重點就是要符合用戶的預期，所以我們一定要避免“因為有趣所以這設計”這個思路
界面上面所有的界面編排，所有的組件，所有的控件，所有的模式都是可以找到隱喻的，比如文字鏈和帶“跳轉”的文字鏈，它代表的隱喻是不一樣的，所以我們就需要賦予其不同的外觀和交互響應對應戶進行反饋
回到最初導航的定義，它的本質是對信息進行分類，讓用戶快速完成任務，這也是導航的本職工作，很多時候不一定要拘泥于這個項目它應該嚴格存在于哪個層級之中這樣的思路進行設計，而是根據用戶的需求，如何將這個項目合理的分類于最適合的集合之中
這是一個立足于外觀的點，根據大量的案例分析和眼動測試，目前市面上最為常見的按照信息權重布局的導航可分為：橫向式、縱向式、縱橫式，由于這部分我們不展開說，所以直接在上圖整理了每種布局的特征、優劣勢和應用場景
知道了上面的分類和注意事項之后，下面我們用一個具體案例來對導航的交互層面設計進行一個深度體驗（因為此內容十分精彩也涉及到機密，所以不在這里做具體展示，以示意的方式來敘述），總共分為六步，看看這是否也是你工作場景中比較頭疼的呢
需要搞清楚導航項的定義是因為導航項的定義決定了你的目標界面是什么，所謂的目標界面就是導航所引導你到的哪一個分類的信息處
所以我們首先先來整理一下導航中每個導航項的界面定義，這也是我們日常工作中對導航梳理十分重要的一步
當問題被羅列出來之后我們就會自然而然的產生各種各樣的疑問，比如導航分類之間存在有的存在流程上的關系，但是有的分類卻并不屬于流程，這是為什么呢？再比如有的導航分類和導航項之間名字一樣但內容卻不一樣這又是為什么呢……（想一想這是不是我們工作中也經常遇到的疑問呢）這都是后面我們需要去優化的地方
保留住上面的問題，我們來做第二步，這一步我們需要搞明白用戶的使用路徑，因為這樣我們可以很好的給任務類產品做一級分類
通過基于不同角色的用戶體驗地圖我們可以得出不同的用戶操作路徑，于是便可以很順暢的得出這一套操作流程的大框架
基于業務中的任務鏈路推導出每一步的操作路徑，于是我們就可以將用戶的操作路徑就可以提煉為一級導航
得出了一級導航，下面我需要角色的權限進行一下區分，這也是B端產品的必備屬性
于是我們為每一個導航項進行了角色權限的梳理對應，那么一級導航中每個導航分類所對應的角色也瞬間一目了然，這里面多說一句，當用戶用不同權限的賬號登錄產品時，能看到不同的內容這才是一個優秀的擁有權限設計的導航
到了這一部分對于一些完全沒有接觸過數據的同學來說理解起來可能會一些難度，我們首先需要知道的是：“相同的數據來源，可以幫我們區分界面性質，而且相同的數據來源，往往會有一組相同的界面來圍繞”
在此需要記住三個概念：
1.元數據：數據屬性的信息，用來支持如指示存儲位置、歷史數據、資源查找、文件記錄等功能，例如一件商品、一個客戶
2.記錄集：指定數據庫中檢索到的數據集合，例如訂單列表、發貨列表
3.關系列表：對來描述對象和對象的關系，比如你和我是好友，你和我在同一個企業微信群
于是我們為導航項進行數據性質的區分歸類，也就是說相同數據類型的實體往往圍繞著某個元數據并且包含系列的界面，當我們這里整理完后發現，相同數據性質的實體（這里可以理解為導航項）貌似可以歸類在一起，這是我們作為分類的一個依據
根據相同的數據性質將導航項歸入應該歸入的二級導航中，此時不妨和最初的版本進行對比，我們的一級二級導航相對而言已經通過改版清晰了很多
這一步其實是比較好理解的，很簡單的法則：“高頻次高優展示，低頻次降低權重甚至隱藏”這是針對于二級導航中每個導航項的排布進行的設計。這里不妨把頻次由高到低量化成為：實時關注、每天關注、每月關注、很少使用、極少使用這個幾個概念，分別用五角星、三角形、矩形、圓形、菱形進行代表
而關于使用頻次的高低甄別一般我們可以通過用戶調研和數據埋點的兩種常用方式來進行，這里并不展開講
于是我們可以將使用頻次作為一列新的參考放入導航項的表格中，瞬間清晰明了
根據使用頻次調整每個導航項的順序
這一步涉及的就是外觀了，不妨回顧一下2.8中對于導航的三種常見布局，根據產品的操作復雜程度等綜合需求，我們選擇了第二種形式成為最終形式
文章來源：站酷 作者：核糖bro
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
做中后臺產品的設計，基本都逃不開導航布局這個大框架。
基于用戶的 Z 字形掃描行為，重要的導航應當選擇左側導航或頂部導航。
可是橫著豎著有那么大差別嗎？被人問道為什么這么選擇，該如何回答？
今天給大家些靈感，從以下四個角度分析一下：
JR Kingsburg 曾經做過一次實驗（A comparison of three-level menu navigation structures for web design），研究 3 層導航中，哪種組合使用效率更高。
這三層中，每一層都有橫向和縱向兩種可能性，所以實驗總共有 2×2×2=8 種對照組：
他為這 8 種導航布局做了不同電商原型，讓用戶來買東西，并記錄各種數據，結果發現了很多有意思的數據：
綜合這些數據，看起來整體表現較好都是「左上上」、「左左上」、「左左左」。
科學雖然很嚴謹，卻缺乏靈活度，例如本次試驗的場景單一（電商購物），而且用來測試的界面未免也太簡陋了吧！
所以我們再從其他角度思考看看。
從占據面積的角度來看，橫向導航比縱向導航省地方，因為只要細細一條就好了。
然而，選項數量不多時橫向是可以；選項多起來，橫向導航就很擁擠了。
畢竟縱向導航方便滾動，橫向導航很少有用戶會嘗試滾動查看的，「…」也不是什么方便的操作。
所以，如果確定選項少可以選橫向，不確定或者數量多建議保險起見選縱向。
任何導航，都要占據屏幕不少空間，這對尺寸適配都是一件麻煩事。哪怕產品并不需要為移動端做響應式布局，只要是網頁端，就得考慮窗口尺寸的變化問題。因為設計師的 Mac 和大量用戶的 PC 甚至平板電腦之間，展示上的差異真的不小。
橫向導航占據空間最小，同時也是最難做尺寸適配的。尤其是如果上面除了導航之外，還放有各種 logo、頭像、圖標、搜索…各種東西時。橫向導航一般都有三種狀態：展開、折疊和收起。但是縱向導航就簡單了，只需要兩個狀態：展開和收起。頂多再讓展開狀態的寬度能夠自適應變化或手動拉伸就差不多了。
這么看來，如果產品需要考慮很多不同尺寸適配的問題，縱向導航是最簡單的選擇，除非橫向導航的內容不多維護起來不麻煩。
我之前為了研究確定按鈕放在左邊還是放在右邊好，做了一系列實驗分析，結果得出超出我預期的結論…放哪都沒多大問題，統一就好。于是，我想這個問題也可以類比一下。
大部分網站都是橫向導航，所以說如果產品是以網頁版為主，且用戶會經常穿插跳轉使用其它網頁，那么也使用橫向導航比較符合習慣。
而無論 PC 還是 Mac，系統頁面的導航在左側的情況比較多，所以說如果產品是系統軟件的話，縱向導航比較符合習慣。
然而，更更更更更重要的是，千萬不要同一個產品不同端或不同子系統的導航不一樣！用戶很可能一會兒用這個，一會兒用那個，結果操作習慣換來換去，人都弄暈啦！還有，就是改版換導航肯定要讓老用戶不滿，好不容易養成習慣改起來容易嗎？所以說，決定導航布局時還是要謹慎才好哦。
文章來源：優設 作者：體驗進階
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“色彩是我們感知世界的重要媒介，對于信息傳達有著重要的作用，能使人們能夠更有效的感知設計的意圖和內涵，使傳達更高效。且人對色彩的視覺感知與想象能力，能夠指導人做出預測、理解和決策?！?
— lyft kevyn arnott
隨著世界的數字化轉型進程大爆發，科技把每一張有形的辦公桌移到了云端，用戶沉浸在數字構建的世界中。騰訊文檔作為先進的生產力工具，產品生態越來越多元豐富，多品類多終端的復雜環境展現在我們面前，開始真正的朝復雜龐大的大規模設計邁進。我們希望能以更加專業、高效的設計姿態迎接騰訊文檔的未來挑戰。
色彩是體現品牌與基因的關鍵因素，構建科學高效的色彩系統，建立產品的品牌形象，對產品設計極具指導意義。
騰訊文檔在色彩上也進行了一些深入的挖掘和沉淀，一方面希望帶給用戶全新的品牌印象和認知，另一方面構建科學有效的色彩系統，為產品的發展提供優質高效的設計系統基礎。本文將聚焦于色彩系統的構建。
騰訊文檔代表著效率協作的先進生產力，從云端創作到云端協作，打破了辦公空間的實體界限。我們希望，新的品牌色，能夠為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和認知。
我們將標準色由平靜的天藍色，升級為更加生動、進取、科技、可靠的明亮清澈的鈷藍色。這種藍色具有更多的電子意味，蘊含了更多的活力和想象力，承載了騰訊文檔對未來數字世界新挑戰的態度和形象的進化。
同時我們認為灰色在騰訊文檔的色彩系統中起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。我們將灰色賦予了統一的品牌認知感受，將藍色加入到中性灰色里，生成了騰訊文檔特有的藍灰色。
至此，騰訊文檔標準色進化升級，它體現了騰訊文檔對可靠穩定的技術、產品體驗的追求，以及對未來智能的數字世界的不斷創新和進取，蘊藏著無限的可能性。
在一個科學有效的色彩系統里，往往包含至少兩種色彩：主色+輔助色，兩者互相搭配組合成產品體系的整體色彩感受，減少用戶在產品體驗中對反復出現的主色的視覺疲勞。
騰訊文檔的產品生態愈來愈豐富多元。我們擁有多品類的產品，為用戶提供了豐富的產品功能，其中云端協作、文檔資產的沉淀管理是騰訊文檔的非常重要的能力，在線文檔、在線表格、在線幻燈片、在線收集表、在線思維導圖、在線流程圖以及文件夾等的品類圖標，又是用戶在對文檔進行協作分享及沉淀時，識別不同類型文件的關鍵因素?；诖?，騰訊文檔相較于其他產品需要更多的輔助色。
于是，如何有效的選擇既符合品牌調性又有區別度的輔助色是構建騰訊文檔色彩系統的關鍵。在輔助色選擇上，我們以鄰近色、互補色、對比色為主要方法構建了輔助色彩體系。
1. 創建色相色板，保持相同明度、相同飽和度
我們以騰訊文檔標準色#1E6FFF（H 218 S 88 B 100) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以 218°為起點，以 15°為增量或減量標準，生成 24 色色板。這個色板是我們選取輔助色的重要依據。
2. 以鄰近色、互補色、對比色為原則選擇豐富的輔助色彩
為了保持騰訊文檔的基礎品牌調性，并保證其具有極清晰的識別度，我們以品牌藍色為起點，選擇了相對較多的鄰近色，以保證在色溫上保持騰訊文檔整體色調的清爽感。并利用對比色及互補色，選擇更加豐富多元的色相，以保證能夠滿足各種使用場景下對色彩的需求。
總的原則是利用鄰近色構建有質感、品牌感的色彩家族，利用對比色及互補色擴展色相，以制造更強烈的色彩對比，滿足一些沖突性場景。
3. 校正輔助色
雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導致在視覺感受上的感官體驗并不同頻。
黃色、綠色的明度即發光度較高，藍色就稍微偏暗一些，導致色板看起來不一致。為了讓不同色相看起來更加協調，需要調整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。
校正原則：
校正后我們得到了清澈明亮、清晰易分辨的騰訊文檔的主色+輔助色。并且針對視障群體進行了色彩測試。
灰色是產品體驗設計中至關重要的一節，工具型產品大部分是由各種各樣的容器、面板、列表組成?；疑珵楫a品界面創造結構、表達邊界、建立信息層次，保持舒適的對比度是提高可讀性和吸引用戶注意力的關鍵。
前面我們已經定義了騰訊文檔的藍灰色，在界面的設計中，我們將其與中性的灰色結合，共同構建灰色的色彩體系 。
騰訊文檔藍灰色相擴展：
中性灰色色相擴展：
為構建一個高效易用的灰色調色板，我們將藍灰色彩作為 Y 軸，有透明度的中性灰色作為 X 軸，兩者透明度保持一致，建立起騰訊文檔有梯度的、豐富的灰色調色板。
對比度是否合理是閱讀體驗是否舒適的重要評價維度，過高或者過低的對比度都會影響閱讀體驗及識別度。下圖是對比度的鐘型曲線圖，隨著對比度的增加，舒適度和識別度都在上升，但一旦超過一個界點，對比度越增加，識別度和友好度亦會逐步下降。
為保證視障用戶的使用，保證足夠的對比度，遵守 WCAG 2.0 的標準，我們對調色板灰色的對比度進行了可用性測試，以指導騰訊文檔體驗設計中灰色調色板的使用。
是：對比度在 AA 標準以上，符合 W3C 標準，可以使用。
中：僅可用于 disable 狀態。
否：對比度在 AA 標準以下，不符合 W3C 標準，不可使用。
定義好文檔的主色、輔助色以及中性色后，我們需建立完整的調色板來滿足不同場景下顏色的使用。以傳達品牌精神，建立色彩層級，或傳達信息，或強化界面層級。
在色彩系統中，很多產品使用 Tints and shades 系統，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調色板。但這種方法得到的調色板往往比較刻板僵硬，故騰訊文檔采用了另一種方式，將已生成的灰色色板與色相疊加，在符合無障標準的區域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調色板。
Tencentdocs_blue：
生成主色-藍色色階：
用同樣的方法將輔助色生成色階：
現在，我們有一個梯度豐富，能夠支持騰訊文檔設計系統的調色板了～
實際案例
實踐才是硬道理，我們嘗試以這個調色板為指導來調整優化騰訊文檔鏈接色的優化調整。
為保證用戶閱讀體驗的舒適度，鏈接之類的彩色文本，要求顏色在背景下可以達到 4.5:1 對比度以上，以使它能夠清晰的從灰色文本、背景中脫穎而出。于是，我們放棄了品牌藍_1E6FFF，選擇了品牌藍 70_175CEB 作為鏈接色。
以后，選擇顏色，so easy～
這個長長的制作調色板的故事就要結束了，我在這項工作中，重新審視過去設計中的設計決策方法，在其中學到了很多東西，希望本文對您也有所幫助。
我們經?？焖俚膭邮?，依靠主觀情感去選擇顏色，在剛開始可能沒遇到什么特別的問題，但隨著產品的壯大和發展，往往會越來越凌亂。抽絲剝繭的搭建色彩系統，真正讓色彩為設計服務，簡化團隊的工作，相信您會有更愉快的工作體驗～
文章來源：優設 作者：騰訊ISUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“搜索”是產品中一個非常必要的功能模塊，搜索就像為用戶提供了一條便捷的綠色通道，方便用戶快速檢索內容。
搜索動作在 App 中依靠搜索框來完成，好用的搜索框很大程度上決定了產品的搜索體驗如何。大多數搜索框存在相似性，但真正好的搜索框會在細節上為用戶帶來差異化的反饋，帶來很暖很貼心的感覺。
從體驗層面上看，一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為：
其中使用中會涉及到跳轉和輸入兩種不同的狀態，在下面的文章里我會展開來分析。
回想常用 App 的搜索框，好像它們的樣式看起來差別并不是很大，但其實每個搜索框的細節都是經過精心設計的，下面總結了幾種常見的搜索框類型。
1. 搜索圖標
頁面上只提供一個放大鏡圖標，通常需要用戶點擊圖標后才能跳轉到搜索頁面，例如小紅書就將搜索圖標放置在頁面右上角。
2. 基本搜索框
基本的搜索框組成包括放大鏡圖標、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式，文字提示為搜索，簡潔清晰。
3. 文字提示類搜索框
和基本搜索框的唯一不同的地方在于，這類搜索框中的文字提示部分不再是搜索兩個字，而是根據產品需求支持預置多組文字提示并在搜索框內循環展示。
△ 在大眾點評的頂部搜索框中，文字提示部分循環展示了三組不同的內容，引導用戶快速檢索到好吃的和好玩的。
4. 功能類搜索框
之所以叫做功能類搜索框，是在文字提示類搜索框的基礎上根據產品功能的需要額外添加了常用的功能性圖標，如掃碼圖標、拍照圖標、語音圖標等，賦予搜索框更多的功能屬性。
△ 經常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標，點擊之后可以快速掃描圖書條碼或二維碼，快速識別書的內容，省去檢索的麻煩。
△ 淘寶搜索框的組成更復雜，除了支持掃碼外還有相機圖標，方便用戶拍照識別商品。
使用搜索框搜索的過程總體可以分為四部分：搜索前、點擊搜索框、輸入中、搜索后。設計分析過程中我們要先理清整體的搜索流程，再考慮每個狀態對應的交互細節及反饋，這樣才能保持邏輯清晰。
位置
大多數搜索框出現在頁面頂部，作為一個大的觸摸目標更符合用戶的認知習慣，更容易被用戶發現和使用。
△ 在蘋果自帶的地圖應用中，搜索框放在頁面中部偏下的位置，相比于頂部搜索框，這樣的位置分布更方便用戶單手操作。
樣式
搜索前的狀態除了前面講的幾種常見的搜索框樣式外，有些產品會直接在搜索框增加“搜索”按鈕。
△ 阿里系產品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕，相比于點擊搜索框再點擊鍵盤搜索內容推薦，直接點擊按鈕簡化了搜索流程。
搜索框
點擊搜索框后，框內的放大鏡圖標會消失，出現閃爍的光標引導用戶輸入，搜索框右側會出現“取消”按鈕。
△ 點擊大眾點評的搜索框后，搜索頁會出現三個選項，點擊每一個選項，搜索框內的文字提示都會改變，有效幫助用戶提升搜索準確度，雖然是很小的點但做的很用心。
鍵盤
點擊搜索框后會彈起鍵盤，在不輸入內容的情況下，點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內容。
搜索頁
搜索頁的內容通常包括歷史搜索、搜索發現、熱門推薦等版塊，記錄用戶的搜索行為，推薦目標商品或服務，提高轉化率。
△ 豆瓣將最熱門的內容都展現在搜索頁中，包括實時更新的熱門書影音榜單、熱門小組、熱門話題等，為用戶提供有效的引導。
關于歷史搜索我們還可以繼續深入分析，思考這些記錄怎么排序、最多顯示幾條記錄……
△ 網易云音樂的歷史搜索最多可以保留10條，采用橫向滑動的手勢交互可以節省屏幕空間。根據內容長短一屏一次可以顯示2-3條記錄，這會導致排在后面的歷史記錄不容易被用戶快速發現。
△ 淘寶的歷史搜索可以容納更多的數量，當搜索記錄超過兩行時會有一個小的展開按鈕，點擊按鈕可以查看早期的記錄，這樣既能節省屏幕空間也能最大化容納歷史記錄。
刪除/取消
當開始輸入內容時，在搜索框的右側會出現刪除圖標，方便用戶一鍵刪除輸入的內容，這里要注意區分刪除和取消的區別。
△ 在淘寶中點擊“刪除”圖標，頁面會返回到上一級也就是搜索頁；
△ 點擊“取消”按鈕，頁面會直接返回到主頁也就是搜索前的狀態。
搜索提示
在用戶輸入內容時，產品會根據用戶輸入的內容提供相對應的搜索推薦，這是搜索框的必備的交互反饋。
通過合理的詞條推薦能極大降低用戶的思考時間，提高搜索效率，同時省去再次點擊搜索按鈕的流程，降低用戶的操作步驟。
字數限制
目前我所知道的大多數 App 在搜索時都沒有字數限制問題。
回顧一下搜索使用場景會發現用戶在搜索框內輸入任何內容都是有可能的，盡量不要約束用戶的輸入內容。無論用戶輸入多少內容，點擊都可以完成基本的搜索操作，這樣整個流程才完整。
△ 在百度中輸入過多字符時，會提示查詢限制在38個漢字以內，多的字符會被忽略，雖然給出了提示但并未打斷用戶的操作流程，可以讓用戶繼續完成搜索。
符合預期
搜索的理想狀態是搜索到的結果符合用戶的預期，滿足用戶的搜索需求，并把最吻合的搜索結果排在前面，為用戶帶來清晰的結果展示。
智能提示
智能提示是對用戶輸入內容上的一種提示或糾正，如果用戶輸入的內容有問題或不夠標準，在搜索結果中會能給最貼切的搜索結果。
△ 在淘寶中輸入“shouji”或“souji”，淘寶會根據拼音給出“手機”的搜索結果，但仍保留原標簽，方便用戶再次點擊搜索；輸入“手ji”時，會直接給出“手機”標簽，這種差異化的反饋能更好的為用戶服務。
無結果提示
△ 相比于直接顯示搜索無結果的狀態，拼多多的搜索結果首先會標明相關商品較少，然后將搜索內容拆分成不同的標簽進一步引導用戶來發現內容。
這里介紹了關于搜索框設計的一些基本體驗，學會從整體到局部再到具體細節一步步分析，大家會挖掘到更多更細的設計要點。
文章來源：優設 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：產業互聯網是一種新的經濟形態，利用信息技術與互聯網平臺，充分發揮互聯網在生產要素配置中的優化和集成作用，實現互聯網與傳統產業深度融合。要想實現真正意義上的去互聯網化，就要拋棄傳統、原始的發展模式，用全新的視角來看待產業互聯網。
以撮合和對接為代表的互聯網平臺模式紅利的見頂，讓越來越多的人開始尋找新的發展突破口，產業互聯網的概念便是在這樣一種大背景下誕生的。同經典的互聯網模式不同，產業互聯網時代的互聯網模式更加深入，更加多元。
對于經典互聯網模式的執念，最終讓產業互聯網或多或少地陷入到了流量的怪圈當中。因此，早期的互聯網玩家基本上都在將獲取流量看成是發展的終極目標，無論是以賦能還是以改造為出發點的模式，幾乎都是以獲取B端流量為終極追求的。
或許，這便是產業互聯網的概念當中有“互聯網”的字眼的根本原因。然而，如果產業互聯網僅僅只是局限于此，那么，等到B端流量被瓜分殆盡，看似光鮮的產業互聯網或許又將陷入沉寂，一切都將從頭開始。
產業互聯網正在遭遇到的困局，為我們生動地詮釋了這一點。可見，流量始終都不是產業互聯網的關鍵，除此之外，產業互聯網應當有更加豐富的內涵和意義。
于是，我們不禁會問，產業互聯網的本質是什么？什么才是產業互聯網的關鍵？筆者始終認為，盡管產業互聯網本身有“互聯網”的字眼。
但是，從本質上來看，它已經與互聯網不再有太多的聯系，無論是從商業模式上，還是從內在的驅動力上，產業互聯網都是一個完全不一樣的嶄新存在。站在新角度，而不是互聯網的角度來看待產業互聯網，并且尋找產業互聯網的正確發展模式，或許才是產業互聯網真正步入正軌的關鍵所在。
伴隨著產業互聯網概念誕生的是S2B的商業模式，很顯然，這種商業模式與互聯網時代經典的B2B模式是有著一定的聯系的?？梢哉f，S2B模式是在B2B模式的基礎上衍生而來的。
盡管產業互聯網的擁躉者們一直都在試圖給S2B模式賦予新的內涵和意義，但是，如果無法厘清互聯網在其中扮演的角色和作用，縱然是給S2B模式加上再多的標簽，或許都將無濟于事。
盡管產業互聯網的概念當中有“互聯網”的字眼，但是，它卻是一個去互聯網化的過程。
換句話說，產業互聯網，其實是一場互聯網玩家的自我革命。如果一味地綁定產業互聯網與互聯網之間的聯系，而不是厘清其與互聯網之間的聯系，那么，所謂的產業互聯網的概念或許僅僅只是一個概念而已。
從本質上來看，所謂的產業互聯網是一個去互聯網化的過程。它不僅要改變經典意義上的互聯網商業模式，而且還要改變互聯網技術的主導地位。
所謂的改變互聯網的商業模式，其實就是要改變傳統意義上的平臺和中心為主導的商業模式，通過去平臺化和去中心化的方式以達成行業運行效率的提升，我們現在看到的以互聯網公司為主導的數字化工廠的出現就是在這樣一種脈絡下建立起來的。
商業模式的重塑僅僅只是一個方面，產業互聯網對于新技術的探索和實踐則是另外一個方面。同PC時代向移動互聯網時代的轉移僅僅只是建構在互聯網技術之上不同，從消費互聯網時代向產業互聯網時代的轉變更多地是在以新技術作為基礎設施，從而去建構一個全新的時代。
我們現在所看到的大數據、云計算、區塊鏈和人工智能等新技術都是產業互聯網的底層技術，盡管這些技術誕生于互聯網的襁褓之中，但是，很多技術恰恰是為了修正互聯網的問題才出現的。
比如，以大數據為代表的智能推薦，以區塊鏈為代表的去中心化的商業模式，基本上都是在這種邏輯下衍生而來的。因此，所謂的產業互聯網其實是一個去互聯網化的過程。
不可否認的是，互聯網時代的來臨的確在一定程度上提升了行業運行效率，但是，我們同樣應當看到的是互聯網所帶來的這種效率的提升是建立在強大的規模優勢之上的。
換句話說，互聯網時代的來臨帶來的是實體經濟的式微，形成的是互聯網經濟與實體經濟的分野。如何修復和彌合互聯網經濟與實體經濟的鴻溝，讓兩者實現統一，才是產業互聯網真正應該思考的重要課題。
然而，當產業互聯網的概念被提出，我們看到的是玩家們試圖在用它進一步鞏固互聯網的主導地位，讓實體經濟進一步成為附庸。很顯然，這種做法是徹底地將產業互聯網看成了一種概念和工具，而沒有真正理解產業互聯網的內涵和意義。
因此，我們需要用一種全新的方式來看待產業互聯網。拋棄將產業互聯網看成是一種工具的觀點，真正將產業互聯網看成是一個“產業”與“互聯網”深度融合的過程。這里的“產業”就是實體經濟，而“互聯網”就是互聯網經濟。
從這個角度來看，產業互聯網并不是互聯網的一種，而是一個實體經濟與虛擬經濟深度融合的過程。
經過了產業互聯網時代的修復和彌合之后，在消費互聯網時代形成的互聯網行業與傳統行業之間對立、此消彼長的發展狀態將會得到修復，從而真正將行業的發展帶入到一個深度融合的新階段。
可以預見的是，經過了產業互聯網時代之后，經典意義上的互聯網模式和經典意義上的互聯網企業都將不復存在，而是將會與實體經濟一道匯聚到數字化的長河里。
流量思維的長期存在，最終導致的是平臺思維的延續以及第三方的產生。
如果一直都存在第三方，那么，行業運行過程當中始終必然要遵循一種供應方——平臺——需求方的運行邏輯。在信息不對稱的大背景下，我們是需要平臺的撮合和對接的。這便是互聯網平臺存在的意義。
然而，隨著信息的逐步公開和透明，特別是隨著大數據、云計算為代表的新技術的成熟，信息不對稱的現象得到了最大程度上的消解，縱然是不需要第三方平臺，我們依然可以實現供應方與需求方的對接。這就是產業互聯網的概念出現的內在原因。
在產業互聯網時代，并不存在嚴格意義上的平臺和中心，每一個部分都是參與者，每一個部分都是組成行業運行不可或缺的條件。
如果我們依然還在用流量的思維來看待產業互聯網，那么，最終所導致的必然是一個又一個平臺的誕生，行業的運行依然沒有擺脫互聯網式的邏輯。欲要讓產業互聯網跳出這樣一種發展魔咒，首先要做的就是要進行去流量的操作。
當我們不再以流量的思維來看待產業上下游的時候，我們便不再用平臺和中心的邏輯來看待和定位自己，我們所做的一切也不再是為了維持自身的市場地位而進行的操作。
這才是真正意義上的產業互聯網，當流量不再是產業互聯網的主導，所謂的產業互聯網才能真正跳出互聯網模式的束縛，真正進入到一個全新的時代，從這個邏輯上來看，所謂的產業互聯網同樣是一個去互聯網化的過程。
之所以會說產業互聯網是一種去互聯網化的存在，還有一個主要原因在于它是一種中間狀態，而不是一個終極狀態。所謂的中間狀態，其實就是一個過渡階段。
當這個階段完成之后，產業的發展必然還將會以另外一種全新狀態來呈現。在我看來，產業互聯網的終極狀態是數字化以及數字化基礎上的智能化。當產業互聯網時代的終極狀態來臨，互聯網將會以新的狀態存在，而不再是現在這樣一種形式存在。
這是產業互聯網經歷了數年的發展之后，越來越多地玩家開始將關注的焦點聚焦在數字化和智能化身上的根本原因所在。
透過這些玩家的實踐，我們可以看出現在這個階段的產業互聯網當中“互聯網”占據的比重越來越少，而數字化在其中所占據的比重越來越大。需要明確的是，對于互聯網的越來越少的提及，并不說明互聯網已經不復存在，而是說互聯網開始以一種全新的形式存在。
比如，現在很多的互聯網平臺就成為了一個數據的集散中心和處理中心，通過這種方式可以繼續給自身的發展帶來新的動能。如果我們將產業互聯網看成是一種終極狀態，而不是中間狀態的時候，目前這種狀態便不會出現，產業互聯網的發展又回到了那個以撮合和中介為主導的怪圈當中。
真正將產業互聯網看成是一個中間狀態，依然是一個去互聯網化的過程。
當我們把產業互聯網看成了中間狀態之后，我們才能拋棄互聯網的商業模式，通過不斷試水新模式、新技術來尋找發展的突破口，產業互聯網行業的發展才能真正進入到一個全新的時代。由此可見，產業互聯網同樣必然是一個去互聯網化的過程。
一味地將產業互聯網與互聯網深度綁定，最終讓產業互聯網蛻變成了互聯網的附庸。很顯然，這種方式是無法讓產業互聯網的作用發揮到最大的。
實現真正意義上的去互聯網化，拋棄傳統、原始的發展模式，以全新的視角來看待產業互聯網，產業互聯網才能有新的內涵和意義，才能有更多新的想象空間。
文章來源：人人都是產品經理 作者：孟永輝
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
語言交流是人類的本能，近幾年語音交互的迅速崛起讓產品更加人性化了。然而即使不考慮技術限制，人與機器的互動也不是只有聽或說單一模態的，因為這不符合我們的自然交流。目前，在居家場景中，用戶與電視的交互依然是對眾多信息-圖像、語音、觸感-的同時處理，它們分別對應著觀看、聽說和必要的遙控器操作。對UX設計師而言，如何讓電視端同時承載這樣多的感知設計是值得思考的。
語音體驗設計是一個很大的系統，從用研、功能、內容到交互、技術實現等等，而GUI的展示只是一種輔助模態。今天我想探討的是如何結合GUI與VUI展開界面設計。
文章分兩個部分：電視端VUI的搭建和一次改版迭代。
1. VUI的構成
2. 改版需求
3. 界面改版
4. 設計驗證
“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”
<Voice User Interface Design>
VUI：是一種交互模態，讓人能夠或多或少通過語音交互與機器共同完成一系列任務；
領域：是將用戶想要完成的任務分為一些大的類型，比如視頻領域、音樂領域、百科領域等；
意圖：指某領域下的具體任務，比如視頻領域下的“我想看某部電影”，即為影視搜索意圖。
小明：“給我推薦點美劇”；
電視：“看看這些有沒有你喜歡的”，并推送一些熱門美劇；
小明：考慮了一會兒....說“風騷律師吧”；
電視：起播《風騷律師》。
在這個故事中，除了眾所周知的VUI應具備的基礎功能-聽和說-以外，我們還需要定義更完整的體驗流程：
1. 小明如何開啟與電視的對話？因為電視機不能一直處于聆聽狀態，那樣很可能會識別用戶無意圖的語言，從而誤響應。
2. 電視端應該以什么方式推薦美劇？如果只一個個播報片名，小明會記不住。
3. 推薦幾部合適？隔空喊話的情況下（遠場語音，下圖解釋），最好不需要再用遙控器翻頁。
4. 如果小明問的是其他領域問題，比如天氣、歌曲、球賽等，對應的媒體資源會涉及到多樣化的信息類型，如圖形、音頻等。不僅要統一設計風格，還要為未來可能支持的新領域/新意圖預留承載框架。
5. 如果小明的詢問得到了錯誤答復，或者一直未被答復，除了技術上提高識別率和語義理解程度，該怎么緩解用戶的茫然和憤怒情緒？
6. 當小明問了一個問題，不被理解，但換個問法卻成功理解。如何教會小明盡可能一次就做出能被識別的表達？
7. 我們能支持幾十個領域、幾百種意圖，怎樣能讓小明知道一共有哪些？
8. 如何結束對話，以免電視一直聆聽造成誤識別？
9. ......
為了回答以上問題，我們經過大量的模擬對話、競品分析和demo體驗，從而定義了電視端VUI的交互流程和組成模塊：
喚起、聆聽、思考、反饋、退出：
電視端的語音有三種對話狀態：
1. 單輪對話：每說一句話都需要喚起一次語音；
2. 多輪對話：一次喚起，多輪對話，但輪數受限于領域范圍；
3. 全雙工模式：一次喚起，多輪對話，輪數不限。
圖源網絡
這是本文重點描述的部分，電視端的GUI包括：
1. 狀態指示動畫：告知用戶當前狀態；
2. 提示詞條：提示用戶有哪些說法；
3. 用戶指令：用戶說法的文字識別結果，它讓人知道自己說的話是否被正確識別，若出了錯，用戶就知道原來是錯在這一環節；
4. 電視答復：文字+音頻；
5. 內容展示：所有媒資內容的呈現，如果沒有，則不展示。比如，天氣需要展示圖像，而交通限行用一句話回答即可。
舊版設計方案概覽：
語音GUI分為兩塊：語音基礎界面（必須）和內容展示區（可選），基礎界面包括上圖中的1234內容。
上圖效果是從17年逐漸搭建起來的框架，隨著需求增多、不同設計師的參與，設計越來越碎片。從易用性、視覺、開發維護難度和新功能兼容上，都存在很多問題：
1. 布局調整
由于電視用戶使用最多、最重要的功能是觀看影視，所以優先考慮視頻領域。因此布局調整的優先順序是：基礎界面>視頻領域>其他領域。
2. 建立視覺規范
建立原子化設計規范：配色方案、文字、間距、圓角、圖標，以及可復用和拓展的組件、模版。
3. 統一狀態動效
將上文的5種基礎狀態結合全雙工狀態統一設計，并為未來可能開發的主動提示等狀態，預留一席之地。
經過競品分析，窮舉了7種可能的布局方式：
這么多的優缺點該如何取舍？我們將痛點歸類，并根據通用的交互原則排列了優先級：
最后決定用B1-底部長矩形，但設計UI時需要借鑒B2那樣增加一點漸變過渡。而針對B1的痛點，需要重新設計小面積狀態指示動畫，并定義好低欄左側的識別文字與右側的提示詞條之間間距，從技術上，我們能做到跟進用戶說話和播報內容，說一句、展示一句。
電視端就像是一塊自由發揮的大畫布。視頻海報的擺放，得從幾個方面考慮：
1. 背景占比：半屏、全屏、半屏至全屏；
2. 導航方式：宮格（我們的海報尺寸是可以統一的，所以不考慮瀑布流，此階段也沒有專題分類，無需考慮tab欄和泳道欄）；
3. 海報方向：橫幅、豎幅；
4. 展示數量：是否超過一頁、海報尺寸。
市面上的競品就有這幾種方案：
行為數據顯示，我們用戶的視頻意圖分兩種：明確自己想看什么－“播放陳情令”，和不明確目標、向電視尋求推薦－“推薦點古裝劇”。我們分別稱為普通推薦和個性化推薦。由于前者在大多數情況下內容較少，所以用半屏，后者則用全屏。由于視頻會單獨設計一個APP，故最后定的普推和個推的坑位都是十張：
上面確定了視頻領域，而其他幾十個領域的信息，同所有平面設計的信息一樣，都是文字、圖片、圖標的排列組合，可以把它們按照原子化設計系統，從分子到模版逐步搭建：
這樣的結構，能確保20多個帶內容的領域都能從中找到對應的排列方式，模版如下表。這里看起來可能比較抽象，可以先看后面的UI效果圖再回來看這里。
實際界面中，內容可能會以前面的任何一種排列形式出現，給較少的內容使用大背景是浪費，反過來則擁擠雜亂，故不同內容需要不同的背景。依然還是窮舉了5種背景待選擇：
1. 卡片
2. 懸空半透明容器
3. 半屏羽化背景
4. 半屏實心背景
5. 全屏背景
按照痛點的優先級打分：
可見方案d-半屏實心背景最佳，但它最適合內容量級為中等的情況。所以我們考慮了是否也采用卡片和全屏來適應內容過少和過多的情況。最后結論是：只采用方案d和e，舍棄a，因為d的背景高度可以隨內容的多寡而變化。這樣以來，設計就不會很碎片化了。
到這里，已經確定了語音基礎界面（低欄）、各領域信息排列方式和背景。接下來就像搭積木把它們組合起來，這一步重點考慮的是內容是否上焦點和翻頁，這需要根據具體領域的資源參數和使用場景甄別。
正好在做這個項目時，我們電視端的視覺規范也在完善中，所以焦點色、文字、柵格等規范是直接從規范庫搬過來的。
實際效果：（抱歉GIF原圖太大了，只好展示一小截。手機拍攝有一點色差，實際的色彩還原度是很高的。）
我們找來40名用戶體驗新舊版本語音，進行了偏好測試和用戶反饋收集，部分反饋如下：
40名用戶中，有80%認為新版更好，分別有12.5%和7.5%的人認為兩者差不多和舊版更好。這次的改版中，UI&交互、動效、顏色&背景三者，體驗感分別提升了12%、2%和7%。
當時大家對新版評價最高的是：簡潔易看、空間利用率高、布局更好。
吐槽最多的問題是：背景色太深、配色單一，動畫不夠好看、不夠明顯。我們隨即對背景色做了優化，上圖看到的是優化后的效果。
后續兼容性驗證：新版結構能較好適應節假日換膚、半屏小程序、第三方App適配等多種需求。
文章復盤了電視端語音的基礎界面、視頻領域、其他領域和背景的重構過程。主要用到的方法有原子化設計理論、競品分析、痛點云圖（表格形式）和用戶偏好測試。對界面布局有較好的優化效果。最大的收獲是掌握了從最底層元素展開剖析的方法，這種細致的方法用來搭建界面設計會很穩固、全面，并且拓展性強。
經驗和不足：
1. 大屏經常強調沉浸式體驗，因而電視端疊加功能很多，但必須要注意分個主次。一是疊加內容不能太多，要么就不疊加、全屏展示。二是一定要考慮背景播的不確定因素，避免花亂；
2. 上面只是分析了二維平面，還有次級頁面、時序等三、四維的規則還未深入學習研究。這樣的研究會對所有App設計都有更好的指引。
3. 我們雖然已有了簡單的導航、柵格等布局規范，但內容展示區依然是毫無章法的自定義排列，智能電視產品還沒有像手機、PC一樣較成熟的設計框架，我覺得蘋果的tvOS模版規范做的比較穩定，我們也應該借鑒，形成自己的風格。
文章來源：優設 作者：lady珠珠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
每一個在公司勤勤懇懇埋頭耕耘的設計師小朋友，都常常會在腦海中不禁閃過各種問號：
但是苦于只有極少的團隊會匹配用研資源，這些疑問往往是石沉大海。更有甚者，等到用戶流失才心急火燎的改版。
在日常工作中，由于 UI 設計師在業務的中上游，很難直面用戶，不能獲得直觀的第一手資料，很難獲得用戶體驗的話語權，經常被產品和運營牽著鼻子走。長此以往，設計部門的存在感也也會大打折扣。
那么我們怎樣在勢單力薄的情況下在用戶體驗上做一些工作呢？筆者結合這些年的摸索經歷，談談怎么一步一步從小到大的探索用戶體驗的調研。
在初創業務或公司中，人手和資金往往都比較緊張，很難系統的對用戶進行調研。這就需要設計師本人用最小的成本推動用戶調研和用戶體驗的提升。這個階段調研的內容應主要集中在產品的可用性方面，以定性調研為主，輸出的結果也不求高大全。
我們可以通過以下幾個手段進行初期信息積累：
1. 后臺用戶投訴或反饋
用戶常常是懶惰的，當用戶在系統中投訴時，一般都是遇見一些令他無法忍受的嚴重問題。設計師可以把后臺的反饋內容都搜集起來，內容加以分類甄別。一般會有可用性問題、業務問題、情緒表達等內容。這些不是我們都能處理的，我們應優先從可用性問題下入手，解決一些功能上的阻礙，這就足以解決許多關鍵環節的體驗問題。而情緒表達類的留言也要留心總結，里面能夠折射出用戶的消費心理和需求的痛點癢點，為未來的設計提供指引。
2. 粉絲用戶群
運營和客服同學都會組建一些深度用戶為主的粉絲群，在這里你能看到各式各樣的吐槽。設計師同學潛伏其中，不但能聆聽用戶心聲，也可以發出問題，主動收集反饋。這里的粉絲也很樂于溝通，并接受輕松的訪談。但是粉絲一般是中高級用戶，所以初級問題容易被忽略，這需要更加廣泛的調研來補充。
3. 內部招募體驗
這是一種非常直觀且有意義的調研，在項目初期階段就可以檢驗出產品中存在的問題。
方法如下：邀請公司內部的同學現場使用產品，在操作時匯報自己的所觀所想。設計同學可以在一旁觀察和引導，并在用戶進行不下去的時候給予必要的幫助。招募 3-8 個初中級用戶，往往就足以發現產品操作流程中存在的絕大多數的問題。在此情境下的用戶一般都更加有耐心，所以足以使它們停頓、困惑甚至放棄操作的問題對外部用戶影響更甚。最好全程錄像，更有利于事后分析對比。
4. 內部專家訪問
在一線的客服、運營、銷售等同學往往對用戶都有著更加深刻的認知。由于他們的工作目標不一樣，所以他們的精力不全在改善用戶體驗上。但對于用戶的痛點他們有更強認知，也有自己的調研積累，這是我們極佳的信息來源。與他們進行訪談會聽到很多真知灼見，他們也很愿意配合一些調研活動，如投放問卷、聯絡訪談用戶等，這是我們不可或缺的助力。
5. 數據挖掘
技術同學對于用戶信息會有一套基礎的統計，通過他們的幫助，我們能了解用戶的使用機型、使用時間、活躍時長、分布城市等，從而確定主要的使用場景和人群。用戶是否有跨平臺的操作習慣也能在這里展現。埋點和 A/B 測也是后期極為重要的工具。
△多渠道搜集用戶反饋
當業務有一定規模時，設計的目標就不僅僅限于可用性問題的研究了，我們需要對用戶和業務有更深入的了解。用戶群體不同，需求也會有差異。我們調研時，如果不清晰的劃分用戶群體，就會造成數據失真。這樣的調研結果，對設計的指引將大打折扣。比如相機這種通用功能，也會為高級用戶做出個性化設置。它沒有假定色溫調節是多數人都需要的，而給它一個外露的位置。但也沒有主觀臆斷此功能無人使用，而把它刪去。
這時就需要我們去系統調研用戶了。
1. 劃分目標用戶
系統調研的第一步就是劃分調研的目標用戶。
很多時候設計師都希望輸出一份全面的用戶畫像，顯得高大上而富有意義。但是精準的用戶畫像成本很高，往往在建立后又不知道如何使用。其實建立用戶畫像是個細分后并不斷修正的過程。
用戶一般可以分為以下幾類：
業務足夠成熟的時候，他們會成為非常重要的增長點，具體的劃分方法可以根據業務類型和產品需求來定。
2. 梳理調研維度
在確定目標用戶后就要關注調研的維度了。銷售和產品往往也有自己用戶畫像，我們可以有所借鑒，但它和設計師所追求的并不完全一致。
設計師的用戶畫像可以分以下幾個維度。
不同的業務類型，用戶調研的側重會有不同。
例如企業級產品往往與使用者消費習慣無關，但和認知能力關系較大，使用者與付費者也分離。而 K12 類產品的消費周期、使用習慣與電商類也有很大區別。
△ 用戶畫像維度劃分
只有充分的前期準備，才能使我們順利的展開深入調研。系統的調研方法筆者將在后續文章中闡述，在這段時間，設計師們趕緊揮舞起勤勞的小手吧，期待下次我們相會。
文章來源：站酷 作者：58UXD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B 端的一些業務場景中常會使用地圖元素來展示信息，但是 B 端的頁面情況較為復雜多變，與 C 端的百度地圖等使用場景以及業務具有一定的差異性。在工作中，我們對于地圖頁面的布局、交互統一性上的研究還是較少，所以我進行了業務場景下的列表與地圖的關系的設計沉淀。
地圖作為一種將地理信息以二維的手段展示的圖像。日常紙質地圖常常會分為兩個模塊：地圖信息、列表信息。對于現 web 端的產品，地圖也保留兩者的信息區域并進行不同的布局排布，如百度地圖等。針對 web 端的產品，因為有交互形式的出現，所以在地圖上會存在更多的信息展示。
地圖信息：
列表信息：
針對現在工作、學習過程中遇到過的具有地圖元素的業務，我進行了整理并總結出了一些不同場景下存在情況以及現業務階段存在的問題。
首先我總結了列表的信息與地圖信息的關系，一共為三種不同的情況。
隨后，我針對打點詳情信息的復雜度進行了三種程度的區分：簡單；復雜；極復雜（較少）
最后，我走查線上業務版本發現了一些現地圖元素的一些問題。
1. 排版不統一
針對地圖的兩種布局，使用較為隨意，并沒有規定其合適的場景使用不同的排版形式。
2. 功能入口的交互不統一
針對于地圖上的列表，常有功能有定位、查看詳情，以及一些特殊場景下的特殊功能入口。然而，這些功能其入口常常不統一，點擊列表，有時承載的是查看詳情，有時是地圖定位、甚者點擊卡片不承載任何功能入口。
3. 地圖打點與列表的對應混亂
有時地圖上會存在多個列表的情況下，從而導致列表信息與地圖上打點信息對應的混亂，這樣會讓用戶感到信息的不明確。
根據以上存在的問題以及情況，我們總結了兩點設計原則，針對地圖模塊進行了修改與推進。
地圖中常包含了四類元素：列表：主要信息、地圖、地圖打點、打點的詳情信息。
針對以上問題，我們從三個點進行了整理分析：列表的交互形式、地圖與列表的整體布局、地圖打點的詳情信息。
列表交互：針對地圖列表，點擊列表的主要交互操作分為三種
地圖布局：為了清晰整體的地圖層級，我們將列表與地圖分為了兩種不同的形式
并且，根據整體的布局結構，我們將這兩種布局形式中包含的隱形的邏輯從而進行了區分，將地圖與列表進行了主從關系的分配。針對于第一種形式，地圖為底，列表作為具有陰影的第二層結構，其包含了隱形的地圖為主、列表為從的邏輯形式；
而針對列表與地圖的左右排布結構而言，因為兩者處于同其級別的元素，更具左右、上下的閱讀習慣，其包含了列表為主、地圖為從的邏輯形式。
而后，根據整體布局的邏輯形式，我們將上文總結的三種不同業務場景進行了分配，并提出了使用建議。
針對于地圖（主）/列表（從）的布局情況：
針對列表（主）/地圖（從）的布局情況：
打點的詳情信息：上文我們根據打點的詳情信息分成了三類：
針對這三種情況，我們提出了三種情況下使用的交互形式。
對于簡單的信息來說，可以推薦使用氣泡彈窗的形式；針對復雜的信息展示嘗試用右側抽屜的形式以及替換當前列表；針對極復雜的場景如需要展示畫布或者列表的話可以考慮底部抽屜的展示形式。
針對氣泡彈窗以及右側抽屜，我們也提出簡單的使用建議。
氣泡彈窗：
右側抽屜：
最后，根據上述總結的內容，我繪制了一張表格簡單的流程圖供大家快速的參考。以上結論，僅僅是一個初步的總結，對于更加的細節的點還需要繼續進行研究迭代，例如簡單于復雜的界限等。
文章來源：優設 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn