① 導航的起源與本質
導航，英文是 Navigation，是 Navigate 的名詞形式，源于 1530 年代，由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學儀器，找到從一個島嶼到另一個島嶼的路徑。
圖1 導航的起源
誕生于中世紀大航海的導航，從誕生之初就跟起點、目標和路徑密切相關。隨著導航的發展，導航領域從海洋擴展到陸地，航空、太空，以及互聯網。
圖2 導航領域的類型
今天我們重點要聊的就是移動互聯網產品的導航設計，雖然脫離了物理空間，但導航的本質始終是不變的。
圖3 導航的本質
導航本質：告訴用戶“我”在哪里（起點）？“我”能去到哪里（目標）？“我”該怎么去（路徑）？
基于此，導航設計一定要能清晰的體現用戶當前所在的位置（一般用選中態表示），并通過其他未選中的導航，來告知用戶可以去的目標，再通過最簡單的點擊或滑動等操作讓用戶去往目的地。
圖4 互聯網產品導航示意
我歸納了移動端常見的 10 種導航形式，大家可以根據其優缺點和適用場景按需選用。
圖5 移動端常見的10種導航形式
① 底 Tab 導航
底 Tab 導航在 iOS 中叫標簽導航，在 Android 中稱之為底部導航，我將其稱為底 Tab 導航，它是 iOS 中最倡導和常見的導航形式。（現在也全面征服了 Android 系統）
圖6 底Tab導航
優點：清晰直觀的展示了產品的核心功能，點擊切換方便快捷。
缺點：只能容納 3-5 個，數量有限。
使用場景：產品包含 3~5 個需要高頻切換使用的非同類型模塊時可用。
② 舵式導航
舵式導航可以看做是底 Tab 導航的一個變異，區別就在于把中間的導航像船舵一樣凸顯，以此來強調中間的導航功能（一般用于承載發布類功能）。
圖7 舵式導航
優點：舵式導航特殊的造型和顏色可以很好的吸引用戶注意力，促進功能轉化。
缺點：為了讓舵居中，導航個數只能為 3 個或 5 個，數量有限制。聚合多個發布類功能時，需要二次選擇，操作不夠便捷。
使用場景：對于強調 UGC 類的產品或者特別高頻的操作可以使用。
③ 頂 Tab 導航
頂 Tab 導航最開始是 Android 推出用以抗衡 iOS 底 Tab 導航的，結果大家已經有感知了（抗衡徹底失敗）。但頂 Tab 導航并沒有因此而消失，而是重新找到了自己作為次級導航的生態位。
圖8 頂Tab導航
優點：可以承載 2~N 個導航，可拓展性強，手勢切換比較便捷。
缺點：手勢切換有學習成本，頂部點擊不方便，看不見的導航內容不容易被發現和使用。
使用場景：作為主導航幾乎已被底 Tab 取代，作為次級導航非常常見，特別是有多個并列層級的內容需要展示時。
④ 抽屜導航
如果產品只有一類核心展示的內容，可以使用抽屜導航而不用底 Tab 導航，以最大限度的利用屏幕空間。
圖9 抽屜導航
優點：可拓展性強，可以收納多個不常用的功能，釋放屏幕展示空間。
缺點：被隱藏的功能不容易被發現和使用。
使用場景：某些核心功能比較單一的產品，或者跟底 Tab 導航組合使用，收納不常用的功能。
⑤ 菜單式導航
跟抽屜式導航類似，把一組操作收納到一個地方，用戶可以點擊快速選擇。
圖10 菜單式導航
優點：可拓展性強，可以收納多個功能，釋放屏幕展示空間。
缺點：被隱藏的功能不容易被發現和使用。
使用場景：當頁面功能較多，無法全部直接展示時，可以使用下拉菜單統一收納。
⑥ 宮格式導航
早期比較流行的主導航，現在是比較常用的局部導航。
圖11 宮格式導航
優點：信息層級扁平，個數較少時，核心功能一目了然，用戶選擇成本低。
缺點：個數較多時視覺認知成本、查找成本都很高，進入功能后切換成本也高。
使用場景：平臺類產品的核心功能展示，或者普通產品的重要功能/運營入口。
⑦ 列表式導航
對于主要以文本為載體的產品，采用列表式導航非常常見，比如短信、郵件、記事本、設置等。
圖12 列表式導航
優點：有足夠的文本/圖標顯示空間，可以顯示標題和輔助文字，傳遞的信息內容相對豐富、直觀，而且可以顯示多條內容。
缺點：整體頁面信息會比較密集，頁面布局相對呆板，條目多時查找會比較困難。
使用場景：適用于展示多條以文本為主體的內容。
⑧ 瀑布流導航
對于主要以圖片/視頻為載體的產品，采用瀑布流導航的非常常見，比如花瓣、點評、淘寶、bilibili 等。
圖13 瀑布流導航
優點：能夠凸顯圖片的吸引力，讓用戶聚焦在圖片上，促進內容的轉化。同時可以承載無限多的內容，自動加載不翻頁，增強用戶瀏覽的沉浸感和效率。
缺點：屏幕空間占用較大，依賴于信息推薦的精準度。
使用場景：適用于展示多條以圖片為主體的內容。
⑨ 輪播式導航
當產品/模塊提供的信息足夠簡單扁平，一屏即可顯示全部核心信息時，可以采用整屏輪播或區域輪播的導航形式。
圖14 輪播式導航
優點：操作簡單，信息呈現直觀。
缺點：未輪播的信息曝光率和轉化率都比較低。
使用場景：簡單的小工具類產品可以整屏顯示核心信息。運營廣告位可以區域輪播展示。
⑩ 沉浸式導航
在活動類、游戲類產品中，常常采用沉浸式導航，增強用戶沉浸感。
圖15 沉浸式導航
優點：導航與頁面融為一體，視覺感受沉浸，頁面更有吸引力。
缺點：用戶可能注意不到某些是內容的元素，導致該元素的轉化率較低。
適用場景：活動類、游戲類的產品中。
① 確認信息結構
導航設計是以信息結構為基礎的，所以在進行導航設計之前，我們需要將范圍層提供的所有信息進行分析，刪減、分類、整理形成特定的信息結構。
圖16 從信息到信息結構
以微信的部分信息為例，我們將信息進行分類、整理、命名形成了上述的組織系統，讓信息與信息之間的邏輯關系一目了然。
這里大家可以參考行業競品的信息架構，結合自己對業務關系的理解，輔助以卡片分類的方式，整理出最適合的信息結構。
PS：為了提升導航的易用性，建議的導航廣度最好不超過 5，深度不超過 3。這樣符合米勒定律，用戶的選擇壓力較小，也不容易迷失在較深的路徑中。（當然這只是一個建議，優先要保證的還是信息結構的合理性，不能為了滿足上述建議而破壞信息之間本身的邏輯關系，時刻牢記認知成本＞操作成本，不能為了減少操作成本而增加認知成本）
② 選擇導航形式
根據信息結構中主導航功能的個數，以及主導航功能之間的優先級關系，再結合各導航的適用場景、個數限制、內容豐富度、功能可見性、操作便捷性等，匹配合適的主導航、次級導航和局部導航形式。
圖17 導航總結
從現況來看，多數產品都愿意采用底 Tab 的主導航形式，因為可以曝光多個功能，用戶點擊操作方便，學習成本低，利于其他功能的轉化，后續拓展也比較方便（可以配合抽屜式導航、頂 Tab 導航，菜單式導航和局部導航混合使用）
③ 優化導航路徑
信息結構梳理了信息節點之間的邏輯關系，但用戶在真正使用產品時，有些子節點的功能/信息，其優先級和頻率反而更高，為了讓用戶能夠方便快捷的使用這些子功能，還需要結合用戶的使用場景，在合適的場景下添加一些節點和路徑，以提升用戶操作的流暢性和效率。
圖18 組織系統和導航系統的關系
還是以微信的導航設計為例，因為添加好友，掃一掃、收付款功能重要性和使用頻率，微信特地在首頁增加了一個菜單導航，方便用戶能更快捷的觸達這些功能。
所以導航設計，不僅要正確的反映信息之間的結構關系，選擇合適的導航形式，更重要的是根據用戶的目標、認知和習慣來組織導航節點，讓用戶可以很直觀的理解“我”在哪，“我”可以去哪？并通過最便捷的操作到達目的地。
作者：悅姐聊設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在選擇網頁設計尺寸時，我們并非只讓產品在部分設備上對訪問者保持可訪問性以及吸引力，而是希望他們無論使用什么設備都可以更好的進行體驗瀏覽。
在早期的設計中我們可能需要針對不同的分辨率輸出不一樣的設計稿，但現在大部分網站平臺都是響應式，這意味著我們只需要做一個在不同設備上都兼容良好的設計即可。
因此我們可以得出B端Web設計中采用主流的最大寬度并非最佳選擇，而是要基于不同設備上的尺寸選擇最具合適的那個。
由于Web端分辨率太分散，我們只考慮占比最大的前幾個，根據百度流量學院里面有關PC端分辨率的占比，排名前三的是1920×1080、1440×900、1366×768。
這三個主流的尺寸在市場中總計占比70.38%，意味著這幾個分辨率的市場占有率體量巨大。它的背后說明了16:9的分辨率已經逐漸的形成一定的規模和使用習慣，我們只需要按照當下主流的分辨率進行針對性的設計即可。
設計稿可在1920、1440以及1366這三個尺寸中進行選擇。
為了更好的在不同的尺寸中都保持體驗的一致性，兼容性原則作為我們選擇最主要的設計標準。
更直白點就是設計尺寸在放大或者縮小的情況下都可以減少因為分辨率帶來的差異性。因此以1440作為基礎的設計尺寸的話，向上或向下適配誤差會較小。
那么假設我們用1366的尺寸做設計稿適配到1920的界面上，界面看上去肯定會特別松散。反之，如果我們用1920的尺寸適配到1366上，界面又會顯得擁擠，甚至可能會出現錯位，這個時候，就只剩下1440的尺寸最適合做設計稿。
設計分辨率的建立要優先考慮目標用戶主要使用的設備，以真實的用戶的應用設備作為基準。這個基準以外的分辨率都是可以進行次要考慮。
由于B端的業務屬性，它需要滿足更細分、特定的商業目標受眾，我們對其進行定制化需求設計。
通過前期調研，發現該集團所有的操作電腦都是由企業統一派發的24寸、分辨率為1920×1080顯示器。那么我們在設計中只需要選擇該分尺寸即可，不需要考慮上下兼容的事。
同理，假如我們的目標用戶都使用1366寬的商務筆記本，那么我們的設計尺寸則可以改為1366×768。
當我們確定好設計尺寸是1440×900后，最好不要直接使用900作為基礎的設計高度，那么高度該如何定義呢。
這里我們不得不提首屏的概念，它指的是不滾動web網頁屏幕的情況下就能被用戶看到的畫面。
根據尼爾森的可用性研究報告，首屏的關注度在80.3%，首屏以下的關注度僅有19.7%，這兩個數據足以表明每一個需要轉化率的網站首屏的重要性，因此我們需要掌握頁面高度，盡可能的把頁面中重要信息在首屏展示。
B端web界面的展示依托于瀏覽器，而瀏覽器除了主窗口顯示的頁面外，還包含了瀏覽器高度（頁簽欄、地址欄、書簽欄）、底部狀態欄。因此我們真實的設計高度=電腦分辨率-瀏覽器高度（130px左右）-底部狀態欄（30px左右），因此可以得出首屏高度≤740為安全區，我們在這個區域內設計的話基本可以保證首屏的內容的展示效率最高。
作者：江鳥的設計生活
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側的安全距離（如網頁的寬度為1920px，內容區為1400px，那么安全距離為兩側各260px）等。
作為UI設計師，在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距，利用各間距之間的規律來組織界面內容，確保信息的節奏性，給用戶輕松、預約的瀏覽體驗。
間距可以讓界面信息更有節奏，提升內容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心態，任何一次的改動與調整都要先考慮清楚為什么，能給產品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。
設計師層面：規范的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。
開發層面：開發可以按照基礎間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量，在使用8px、16px、24px、32px、48px...等，開發直接使用基礎間距x1、x2、x3...，以此類推，在開發眼中，肉眼定然看不出1px的差別，但卻能區分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設計效果。
用戶層面：有節奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗能得到很大程度的提升。
設計規范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理，間距也是設計規范中非常重要的一環，它作為規范中的最小單元，如果沒有遵循統一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師，開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規律可循。
統一的間距能讓界面的視覺效果更有節奏，設計師在設計某些相似的模塊時可直接復用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統一的問題造成整個APP的風格混亂。
對開發來說，如果清楚間距的使用規律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24...按倍數規律以此類推，若出現9的間距，開發會更正為8、15則會更正為16，自行多退少補，雖然設計師需要細心、盡量不出現這種小的出入，但任何事情都沒法做到絕對，統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通，能進一步提高開發效率。
▲ 從上圖可以看出，間距不規范、信息就像一鍋粥，而規范的使用間距就能將信息自動分組。
文字是UI設計中非常重要的信息元素，雖然大多數設計師對文字的屬性比較了解，但在真實設計中總會因其他信息的干擾不能合理運用，與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。
字符間距一般都是設計工具的默認數值，無需調整。當碰到多行文字需要避開頭尾的標點符號時，使用工具中的避頭尾功能即可自動調整字間距，如無此功能，則需手動調整，這里并沒有所謂的技巧與方法，頭尾避開標點符號即可。
另外，在設計卡片、瓷片區的標題時，有時需要通過調整字符間距來提升界面的舒適度，間距數值自行定義，但相同層級的內容標題字間距一定要保持一致。
行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設計中，行高沒有一定的標準，如無特別需要，使用系統默認的行高即可。
在UI設計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設定行高標準，尤其是新聞資訊類型的應用本身就以文字內容為主，不同的行高對文字的易讀性會產生較大的影響。
文字行高一般會設定為字號的1.2～1.5倍，具體值跟字號有很大關系，文字越小，行高就越大。例如，我們可以設定字號32px為中間值（非絕對），小于或等于32的字體、行高為字號的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號的1.5倍，不難發現，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？
文本段落間距的重要性在移動UI界面中并不明顯，更多體現在網頁設計中。需要著重糾正一點的是，部分設計師在設置段間距時習慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內容脫節。
如有需要，一定要手動設置段間距，這里沒有固定的數值和規律，視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。
定義間距其實并沒有一個絕對的標準，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數值還得根據產品自身定位及內容組織形式，前提是所有間距都要遵循最小單位并基于倍數形成規律。
在設計界面時，需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系，這就是為什么當我們打開新聞資訊、電商類應用會發現信息非常緊湊，而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎；基數越大、頁面的留白就越多，使用不同的基數，呈現出來的視覺效果也形態各異。
筆者在工作中通常以8px作為基數，以此衍生出8、16、24、32、48、64這6個間距數值，完全能夠滿足絕大多數的使用場景。當然，針對信息較少的頁面也會使用到120、160、200...其他間距數值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數定義間距數值時，沒有40、56這兩個數值，難道他們不是8的倍數嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點，設計師在定義間距時，需要遵循倍數規則，但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規則，當間距數值越大時，根據基數所跳躍的倍數就越大，其實設定字號也是相同的邏輯（后期詳解）。
從信息層級角度來看，等級權重越高、間距就越大，在現實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區分信息層級，塊外間距一定會大于塊內間距，也能保持塊內信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊，每個模塊內元素的間距都會比各模塊之間的間距小很多。
需要通過各元素的間距來體現出信息的關聯性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認為比相互距離較遠的物體更有關聯性，因此，相關聯的元素之間靠的越近，用戶越能感知到信息的關聯，同時更能了解整個界面中各模塊信息的邏輯關系。
很多時候，想讓一個元素變的突出，可以用加大字號、修改色值或后加粗等方式進行強調，但這并不是突出信息的唯一方式，當所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強調信息的方式，它能引導用戶將注意力集中在特定的內容上。
善用柵格系統（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協調。柵格系統可以讓設計師在元素的親疏關系上更快作出決策，后續不管是迭代還是更換設計成員，都能保持統計的間距規范。
這個問題在很多團隊中都是硬傷，甚至在設計驗收時還被直接忽略。在主流UI設計工具中，添加文本元素時，都會有默認行高，在前面的內容中有講過多行文本的行高為字號的1.2~1.5倍，那么單行文字的行高到底是需要手動設置還是遵循默認，筆者認為都是可以的，但一定要與開發保持一致。
行高決定著文字邊緣與定界框的間距，而開發只能看到定界框與其他元素的間距。
1）默認行高
默認行高值會隨著字號的變化基于一定的倍數自動增減，需要將此規律或倍數告知開發，開發將此規則植入代碼方能最大化還原設計效果。另外在設計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距+文字元素間距=實際間距）或手動測量才能達到精準狀態，下圖為例：
2）手動設置行高
手動設置即字號是多少、就將行高設置為多少，確保文字邊緣緊貼定界框，在設計過程中調整間距時，無需計算，根據設計工具的智能提示調整即可。
在同一APP應用中，根據最小基數定義的間隔值數量不易過多，一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等，以5px的基數為5、10、15、25、40、60等。數量過多會導致界面不同元素、模塊的間距差異化不夠明顯，數量太少無法滿足多元素、模塊使用場景，也會導致間距跨度較大。
設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關系，我們需要根據柵格系統中間距值的增大、設置更大的區間值，讓相鄰間距值之間的視覺差異更加明顯。
當界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等，需知「此消彼長」的道理。
如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發，或許會有不一樣的收獲。雖然在剛開始的時候，規范間距帶來的效果甚微，但隨著團隊規模不斷擴大、界面數量越來越多、內容越來越復雜時就會發現，所有內容統一間距規范，不管是構建一致性界面視覺效果、還是對開發和設計師來說，既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規范使用，決定著界面是否規整、信息傳達是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設計師的發揮和思考空間。制定設計規范有助于項目的高效運轉，間距也好、色彩也罷，設計師依然需要從實際用戶場景出發，通過不斷的思考和經驗總結，打磨出更合理、更符合項目需求的設計規范。
作者：大漠飛鷹CYSJ
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在設計一個產品的時候，我們要透過現象看本質。
我們是為誰？解決什么問題？分析的結果將直接影響到方案的好壞。 這里推薦大家采用5W1H分析法，5W1H分析法也叫六何分析法，是一種思考方法，也可以說是一種場景創造分析法。
5W1H分析法包含如下幾個方面：
Why：為什么要做，是原因。
What：做什么、做成什么，是目標。
Where：在哪兒做，是地點。
When：什么時候做，是時間。
Who：誰來做，是執行對象。
How：怎么做，是方法。
通過上述分析我們可以（假設）知道：我們的用戶是技術人員、基層管理人員；做這個頁面的目的是為了讓用戶隨時掌握各項工作的進展情況，快速進入需要處理的工作事項。 根據結論可以得出工作臺是一個導航頁面或者綜合管理頁面，它是用戶感知產品價值的重要“門面”，使用者有一定的經驗，屬于高級用戶。從設計角度來看，首頁工作臺是整個系統規范與視覺風格的核心場景。
主要是技術人員、基層管理人員
P0:各類數據指標的匯總、我的動態
p1:總量趨勢、數據排名、操作匯總
p2:分發匯總、待辦事項
重點突出、簡潔、清晰
下面這張圖是產品給的原型，也是B端面試題中經常會遇到的題目。如果你打算就按照產品給的原型直接做美化，那估計很難被選中。
做需求分析的目的之一就是為了做信息處理，這里要提到一個詞叫“屏效”。B端產品我們都知道，目的是“降本增效”，在合理的信息布局下盡量利用交互等手段讓頁面縮短。
比如：上面原型中有兩個top10排名，如果一行展示會比較擁擠，也體現不了top10排名?？紤]“易讀性”我們會放兩行，但這樣又占據了屏幕空間，在與產品溝通后我們把它整合到一起，利用按鈕組切換進行查看。同時排名也是業務人員需要關注的，所以我們把它們往上放。
頂部個人信息內容比較少，也沒必要占一整行，我們把它移到右邊；各類指標因前3個是不能點擊的，為了和后面可點擊按鈕做區分，我們整合到一個卡片上；待辦事項與產品溝通后說不太重要，移動到了最下面，操作匯總模塊往上移；
到這里模塊之間的信息優先級基本處理完成，下面就要對單個模塊進行拆解處理。
首先我們要觀察哪個是：重要信息、次要信息、輔助信息，上面我們提到了“效率”，把重要信息突出顯示，就是為了讓用戶一眼就能看清，不需要去尋找或被次要信息干擾。
最后一個模塊原型上只有一個標題，這真是驗證了一句話：“巧婦難為無米之炊”，所以又去找產品溝通，為什么單個模型可以點擊查看更多？用戶在這個地方想要獲取什么樣的數據？
經過一番溝通，拿到了一些“米”，巧婦終于可以干活了。為了體現“易發現性”，我們在后面這個模塊上加了一個詳情按鈕。
其實上面的圖是我處理過的，產品的原型可不長這個樣子，模塊大小、間距都是隨便給的。你如果也按照產品給的原型模塊大小做，估計研發會“罵娘”，因為這樣沒法按照比例進行換算，也就沒法做自適應。
這一步主要就是做柵格化處理，我們需要定義每個模塊的占比與間距。B端產品通常選用24柵格布局，也就是24欄+23水槽+2頁邊距。
我遇到的工作臺頁面有兩種，一種是帶左側樹，一種是不帶，這兩種對應的柵格化數值不太一樣。 按照目前常用的尺寸1440*900來計算：不帶左側樹我采用的是1440=2*20+43*24+16*23。
如果大家做的是帶左側樹，可以參考下圖數據
重點來了，我個人覺得這一節才是工作臺、數據分析頁面的核心，但很多人都忽略了，覺得不就是幾個圖表，唰唰唰一下就搞定了......
上面我們提到過B端測試題給的都是原始數據（表格），需要設計師自己根據數據找合適的可視化圖形進行展示。
如果你對可視化圖表不熟悉，不知道什么時候該用柱圖、折線圖、餅圖；不知道隨時間變化該用什么圖形；不知道體現排名的數據該用什么圖形。那你很難輸出一份有理有據的作品。
因圖表類型太多，詳細的留到后面文章討論，這次只對原型中使用的到圖表進行分析：
柱狀圖是常用的數據可視化圖形之一，可用于隨時間變化而產生變量的數據統計，也可用于數據類別的對比、排名。
如圖，柱狀圖能展示知乎文章觀看者地域分布，也能反應出不同時間段的情況，并通過圖形能夠快速了解 分布最多和最少的省份。
優點：
人眼對長短（高度）比較敏感，可以直觀體現數據差異性。
缺陷：
分類過多時數據的展示效果會降低。
能把圖形視覺與體驗都兼顧好，才能體現設計師的價值。 設計師的能力不僅體現在技法上，更多的是體現在思考能力上。圖形擴展性設計和創新性設計都需要設計師做縝密的思考，只有這樣才會有出彩的設計結果。
信息層級：
視覺展示：
2個人站在一起我們除了對比高度、顏值，還有會對比胖廋。那么，柱狀體的粗細和間距如何定義呢？ 在圖中，中間柱狀圖的柱子間距過于疏散沒有規律；右邊圖中的柱子間距又過小，視覺上顯得擁擠，并且當分類過多時，過小的間距會導致柱狀體之間沒有獨立性，不易閱讀。
定義柱狀體的間距可以用5分原則設計法，即柱子之間的間距為N，左右兩邊與柱子之間的距離就是2/N。 如圖所示。這也是很多界面設計中常用的技法，其原理就是接近黃金比例，視覺上較為舒適。同時，在保證界面元素整體協調性的情況下，盡可能把柱子的寬度設計成N，這樣視覺上最為協調。
另外，在設計圖形前，設計師最好能了解到真實數據，這樣才能結合真實的數據來設計圖形，盡可能還原落地后的樣子。在圖中，圖形的設計和落地后的樣子存在較大的差異。問題就出在設計前設計師沒有了解數據的真實情況，前端工程師按照設計圖把X軸的數值固定了。
相似圖表：
堆積柱狀圖：堆積柱狀圖可以展示兩個或多個數據的變化，以及數據之間的綜合比較情況。
分組柱狀圖：分組柱狀圖可以在同一數軸上展示各個分類下的不同分組數據。
有序柱狀圖：與有序條形圖一樣，有序柱狀圖也能呈現數據的排名情況。
折線圖常用于表示一個連續時間段內數據的變化趨勢，主要功能是能夠清晰地反映出數據隨時間變化的趨勢。
如圖，折線圖不僅能展示不同月份的價格趨勢，還能清晰呈現數據的峰值和低谷。折線圖也可以是多條線，用來分析多組數據隨時間變化的趨勢及數據間的趨勢比較。
優點：
直觀反映數據變化趨勢
缺陷：
無序的類別無法展示數據特點。
折線圖可以用于展示數據的趨勢變化，通過折線的起伏波動可以幫助人們探究數據背后的邏輯。但如果折線圖的設計不夠合理，在視覺上會讓人產生錯誤的認知。在圖中，有的折線圖的刻度值設置不合理，如中間折線圖的刻度值未從0開始，導致折線的呈現夸大；右邊折線圖的刻度值過高，趨勢變化呈現過于平緩，這些都是在不客觀地表達數據。正確的方式應該是刻度值從0開始，隨著數據的增減，刻度值也做相應的變化。
視覺展示：
在折線圖設計中，還需要注意折線的粗細要適中。在圖中，其中一條折線過細，這會降低數據可視化的表現；另一條過粗，就會損失折線中的數據波動細節。在產品的圖形設計中，一般網格線和起始線都是1像素，折線一般用2像素，這樣的粗細會有較好的視覺表現。
相似圖表：
階梯線圖：線在數據點之間形成一系列步驟。
面積圖：與折線圖唯一不同的是，其自變量數據和坐標軸之間有顏色填充，這樣能更加突出數據的趨勢變化。
提到數據的占比，相信你第一個就會想到餅圖，主要用來展示數據分布情況。 餅圖是展示占比數據最直觀的圖形，通過弧度大小來表示分類的占比多少。但餅圖有一定的局限性，當占比數值接近或占比分類過多時，在視覺上就不容易辨別各個類別占比的大小。在數據可視化產品中，因為餅圖是大面積的色塊，視覺上會非常突顯，很容易搶走重要數據的風頭，所以使用時要酌情考慮。
優點：
直觀顯示各項占總體的占比，分布情況，強調整體與個體間的比較。
缺陷：
分類過多，則扇形越小，無法展現圖表。
每個圖形都有自己的設計規范，如當餅圖分類過多時，一般不把文字放在圖形元素上，因為一旦出現幾個相對較小的占比數據，字就很容易溢出，不容易辨別指向的分類，如圖中的右圖所示。好的解決方案就是，在圖形的外圍用引線指出分類數據，或者加示例圖展示。
視覺展示：
另外，餅圖的分類最好從12點鐘的位置開始，這樣較為符合人的閱讀習慣，即從上到下、從左到右，如圖中。如果餅圖隨意從不同位置開始展示，就會缺少規范，這樣當多個餅圖同時展示時容易出現混亂。
同時，在餅圖的分類中如果沒帶排序，如1月、2月……，那么占比最好能夠從大到小依次排列，這樣還能直觀地呈現出分類的排名情況。任何時候，如果有“其他”這項分類，無論其占比多少都要放在最后，因為其數據通常是最不被關注的數據。
相似圖表：
嵌套圈餅圖：用于一個指標在不同維度的占比。
跑道圖：看到占比的同時，可以直觀看到指標在當前維度下的排名情況。
表格看起來簡單，但想設計好也不是一件容易事。通常我們見到的（產品中）表格都屬于比較簡單的表格。
在BI系統中有一些復雜的表報，如果直接用組件信息會很難閱讀。我們需要對表格的視覺進行調整，讓信息獲取更高效，這就需要一些設計技巧和原則。
而圖中（上圖）的項目名稱長短不一，居中對齊在視覺上會使切入點呈現“Z”字形，影響閱讀效率。左對齊可以使線性結構在視覺上不跳躍，閱讀流暢且更具美感。表格中的數字需要右對齊，因為當我們在面對一個長數字時，一般會從右往左讀。比如數字￥368,568,023.00，我們一般是從個位到最后的千萬位順序識別數字體量，有的人可以通過千分符迅速判斷數字的體量，但其實也是從右到左的瀏覽順序，因此數字右對齊最符合人的閱讀方式。
在圖中（下圖），讓我們感受一下數字左對齊、居中對齊、右對齊的閱讀效率，以及對各個數據體量的對比感知。
文字左對齊和數字右對齊，針對的是長短不一的名稱和大體量的數字，而對于文字數量一樣、體量較小的數字也可以嘗試用居中對齊的方式，對稱的元素本身就具有美感。如圖所示，通過對表格中的文字和數字的重新排版，相信在閱讀效率上會有較大的提高。雖然提高了閱讀效率，但這相比優秀的表格設計還差得很遠，其中最明顯的是表格的邊框在視覺上過于突出，接下來我們繼續調整。
如圖（下圖）所示，通過弱化邊框在視覺上能夠突出表格的內容。表格邊框可以讓信息的呈現更有條理，能夠提高易讀性，但在視覺層級上不能高于內容信息。
將表格的邊框與分割線去掉，用留白分隔內容，無框勝有框，增大留白可以使表格更有空間感。這樣的設計需要注意的是，元素的間隔不能太小，不然會顯得擁擠。由于去掉邊框后有些問題會被放大，比如標題與內容沒有對比，因此需要增強對比，在整體上要有層次。
圖中的表格加強了標題，這樣看起來更有層次。強調標題的方法有很多種，不一定只是加粗字體或加大字號，還可以給標題欄添加背景，以形成對比。
如果在一組數據中有重要數據和次要數據之分，那么就需要在對重要數據的設計上著重突出，表格的設計同樣如此。圖中所示就是把重要的數據信息通過增加背景色與其他元素形成較為突出的對比，這種設計是一種為用戶做選擇的設計方法，容易讓用戶的視覺停留在他本想重點關注的地方。
由于人們常常會對熟悉的事物產生審美疲勞，因此設計中有創新才容易給人眼前一亮的感覺。
下圖在背景上面給了一根橫線，來凸顯這一列的數據，這樣除了可以加強信息傳達也可以打破常規的表格樣式（這里只是提供一種思路）。
表格數字最容易出問題的是數字字體的運用，因為很多數字字體不是等距設計，比如數字“1”所占的字間距面積要小于“8”的。如果遇到一組大量級的數字，就有可能會誤導觀者。
如下圖所示，本來32,118,116,00大于28,558,363,00，但由于不同數字所占寬度不一樣，這樣的設計在視覺上容易誤導用戶。因此，表格中的數字要使用表格字體，因為表格字體每個數字所占面積一致，這樣就不會出現案例中的問題了。
其實很多表格里面的數字字體都存在類似問題。下圖是修改數字字體后的設計，這樣就能客觀地呈現數據了。
表格中常用的字體有Roboto、DIN、微軟雅黑、思源黑體、宋體、蘋方字體等。
四、視覺設計
參考631配色法
對有含義的顏色要謹慎使用，例如：紅、黃、綠
常用的圖標分為兩類：
工具圖標：包含一定產品功能隱喻的簡化抽象圖形，代替文字節省界面空間，方便用戶理解，常用于b端產品里面。
如圖，里面來自不同產品的圖標，雖然表現形式不太一樣，風格不太一樣，但都是為了體現圖標后面文字的意思。
裝飾圖標：主要目的是用來裝飾界面的視覺元素，樣式大于功能，常用于產品宣傳、活動等頁面。 如圖，云計算、大數據相關的產品，語義都比較復雜，很難通過圖標去表達，既然看不懂，就抽象點。
在 B 端產品中，應用最廣泛的還是工具圖標。 可能有人覺得工具類圖標太簡單了，它是看起來簡單，想做好一點都不容易。
首先要保證“一致性”， 粗細一致、圓角一致、透視一致、大小一致，同時還要把語義用圖形表達出來。
一般采用8的倍數：8、16、24、32、40、48、...
12px、14px、16px、20px、24px，可采用“回退機制”
作者：夜鶯YEAH
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
根據公司結構和職能角色的需求不同，用研中部分是行為觀察，部分是商業戰略，部分是心理學，部分是數據分析，部分是設計，部分是團隊促進。用研可以有不同的風格，因此可以在行業范圍內四處移換位置。根據公司規模和類型的不同，我見過很多用研團隊變成設計部門的一部分，有些則變成營銷部門的一部分，還有一些則在產品管理部門——最終在哪都根據公司的規模和類型來決定。在我任職期間的某個時候，我自己的團隊已經集結到了之前提到的各個部門。
所以...有沒有一個部門可以更加適合配備用研部門，讓用研更加成功且具有影響力呢? 這是我想找到的答案。
...
用研部門應該存在于...
...在設計團隊？
攝影：Harpal Singh 于 Unsplash
優勢：
研究與設計交織在一起：用研已經成為許多用戶體驗設計師工作職位描述中的一部分，而用研的核心就是指導設計。研究結果可以指導交互行為，并且它從一開始就已經嵌入了設計過程里。如果一個設計團隊有專門設立研究部門，會讓這個團隊變成一個強大的聯盟。讓更大的設計團隊統一研究整體用戶策略，會讓之后的調研和設計過程更加整體和完善。同樣，設計師也有想改善用戶體驗的眾多想法，并且通常很高興能看到用戶和他們的想法進行交流。這直接與這些創造用戶體驗改善的設計師們，促成了一個強有力的文化測試、迭代、再測試的過程。由于設計與用研的過程是結合在一起的，因此可以立刻將這些用戶洞察應用到設計中去。
類似的工作流程：用研的工作流程與傳統的設計流程十分相似。設計領導者可以無縫地理解研究的各個階段：復查現有的數據，引導生產性研究，匯編各種信息從而尋找新的模式，創建一份報告，陳述研究結果，在上線后測試等等。同時，從設計概念開始，征求意見、進行測試比較設計方案的好壞、迭代設計、產出最終的版本、呈現并且在上線之后進行迭代。設計和用研通常希望攜手合作，共同努力改善數字化體驗。
劣勢：
設計≠用研：不是所有的設計師都會進行研究，要么是因為他們沒有時間，要么是因為他們沒有接受過理解研究方法的訓練。（相反，也不是所有的研究人員都是設計師）通常，公司會安排設計師同時做研究員的工作，反之亦然。這對最終實現的產品來說可能是災難性的。尤其是在較小的公司中，設計師需要扮演很多職能。這意味著他們“有時候“有時間能親自調研。不幸的是，在設計和用研沒有明確定義的前提下，這意味著雇傭部門和領導團隊認為這兩者是可以互換的 (注意: 這并不意味著某些設計師沒有資格，只是“視覺設計師 / 平面設計師”、“UI設計師”和“UX設計師”的技能組合是有區別的，但我不會在這里討論這些!)
用戶需求可能會被遺忘: 有時候，一個設計規劃圖會被過分熱烈的創造性驅動從而創建，而不是來自于數據或研究。很多時候，創意人員會對他們喜歡的新想法產生依戀，即使它并非源于用戶需要的東西(有時候我們都會為此感到內疚)。不幸的是，這意味著研究可能是事后的想法，更經常地被作為驗證工具而使用，而不是在產品生命周期中預先定義需求。這對于用研來說可能成為難以克服的一個障礙，特別是如果設計概念與利益攸關方或決策者領導人一起審查，他們喜歡并認為這是一個“ 可以去做的設計”。這意味著研究的機會很有可能喪失。
...在市場運營團隊？
攝影：Carlos Muza 于 Unsplash
優勢：
相似的技能組合:市場研究和 UX / 產品的研究在他們特定的核心研究中，共享相似的過程和研究方法。在社會心理學、市場營銷學、人類學、人的因素、運作和設計等許多領域進行 “人的研究” 所使用的工具包非常相似：定量方法，如大樣本調查和分析；定性方法，如面對面的觀察，焦點小組，適度的訪談，日記研究以及其他。每個領域的方法都需要研究設計、用戶招募和研究分析。對于市場團隊來說，這是一個非常熟悉的世界，作為 用研 流動到這個部門意味著領導者可能會對你的角色需求有一個徹底的了解。
共同的目標是了解用戶: 市場團隊也將是你的擁護者。無論如何，源自于產品和設計的用戶研究的洞察力，為市場部門關注的許多舉措增添了直接價值。透過略微不同的角度來看，市場營銷和用戶體驗有著相似的目標(理解客戶) 。盡管如此，當團隊協作并共享信息，在以業務或用戶為中心的舉措之間建立平衡時，用研結果還是能夠幫助我們進行決策。
劣勢：
商業需求可能與用戶需求相反:如果組成“聚焦點”的事物變化太大，那么這個”聚焦點“既可以將市場營銷與用戶體驗結合起來，也可以將它們分開。當業務需求與用戶需求相矛盾時，可能會產生摩擦。如果市場部門的領導層將眼前的業務優先級置于用戶研究之上，那么獲取工具和客戶的途徑就可能受到限制。在一天結束的時候，市場團隊關注創收，即使這對用戶來說不是最好的體驗(比如在某個地方放置廣告，可能會干擾網頁，以確保用戶看到它) ; 而用研團隊關注什么是對用戶體驗最好的(比如在頁面上放置一個廣告，使其不會干擾用戶的任務，冒著用戶看不到并參與其中的風險)。
用研 ≠ 市場研究: 有時候，流動到市場部門意味著其他人將 用研視作為市場研究的延伸。由于這一點，一些項目有可能被認為應該由市場專家處理，而不是用戶體驗專家。例如，營銷活動的目標可能是“我們如何讓用戶使用這次促銷活動” ？另一方面，用研 可能會強調用戶的需求，比如“用戶希望如何獲得有關促銷活動的通知” ？這種情況（關注點的轉移）并不可能經常出現在市場部的議程表上。
...在產品管理團隊？
攝影：Marvin Meyer 于 Unsplash
優勢：
為產品使用路徑圖研究分配時間:通過將 用研 嵌入到產品管理團隊中，研究有機會通過在產品路徑圖中劃出其應有的空間和時間來充分發揮其潛力。通過讓 用研 和產品經理向同一個領導層匯報，這意味著目標和優先級可以被共享，并且在同一時間被一起審查。這可能是一個有效的工作方式，特別是當你與產品經理一起工作的項目，他們知道如何使他們的產品更直觀地呈現給用戶。用研的產品管理為定義實際產品需求創建了一種更加無縫的方法。這意味著路線規劃圖中留出了時間，在積壓成定局之前走出去，獲得用戶見解。這告知了大家需要開發的功能的優先級，并在完成設計之前，就形成產品了本身的特性。當 用研 與產品經理的目標緊密相連時，每個注入了用戶見解的產品階段都變得更加容易(因為它應該是在一個理想的世界中!)
更容易地與決策者進行知識交換:將產品經理的內部結構與 用研 的內部結構相結合，也意味著他們可以獲得更多用戶關于他們的體驗的言論，從而形成定期更新，并且可以更容易地進入用戶途徑。用研經常關注復查定性趨勢的反饋(比如 Qualtrics 或者 Medallia 系統)（在線調查或客戶體驗管理系統），這意味著產品經理聽到這些趨勢的機會變得更加頻繁。產品經理一般來說應該對他們的用戶群有深刻的理解，但是他們通常很難在傾聽用戶的基礎上來保持沖刺、業務分析、 KPI 和產品路線圖規劃。因為團隊會議中現在有一個指定的用戶代言人一直在場，這就是為什么與 用研 如此緊密地聯系在一起對產品經理來說是有益的。參加這些會議使得 用研 有機會直接與那些最需要了解用戶需求的人進行自發的對話。加入同一個團隊可以使這些溝通渠道更加開放，并且可以更加頻繁地了解用戶對產品經理的需求。
劣勢：
研究的優先級可能會降低:不幸的是，轉到產品管理團隊意味著有時研究的優先級會降低。當利益相關者對產品交付施加壓力時，這通常意味著產品需要盡快推出。然之后，產品經理必須專注于發布他們產品路線圖規劃上的項目，并在時間表和開發周期內實現業務目標。為了滿足這些時間要求，盡快交付某些東西成為更緊迫的目標，而不是交付一個經過研究和磨練的產品(這需要更多的時間)。
更多的評估而不是生產性研究: 把用研流動這個部門可能意味著這項研究變得更加可評估(或者驗證、可用性和迭代測試) ，而不是生產性(或者理解需求、價值和概念發現或開發的測試) ，就像在設計團隊下可以做的那樣。這不是一件壞事，而只是需要牢記在心，以便作為一個用戶倡導者，用研 的工作可以更直言不諱地說，需要留出時間來做更深入、生產性的工作，從長遠來看而不是短期內為產品提供信息。提前了解這個可能的障礙意味著用研可以更好地裝備自己的 ROI（投資回報率）影響，以便為更深入的研究騰出時間。
...在自己獨立的部門？
攝影：José Alejandro Cuffia 于 Unsplash
注意: 我還沒有在一個獨立的，指定的 UX 研究部門作為一個 UX 研究員的工作經驗。我只能推測將一個獨立的 用研 團隊集合起來會是什么樣子，或者當 用研 成為一個大型組織中自己的分支時，領導力的優缺點是什么。
優勢（推測）：
擁有自己帶領的用研部門，可以為更深入地研究需求提供機會。它將有能力根據合作伙伴的規劃路線圖從而制定自己的規劃路線圖。它可以讓部門領導層能夠深入地支持研究人員的需求，因為需求經常遇到障礙（如招聘、用戶日程安排、預算、批準、 ResearchOps（ Research Operation service 研究運營管理） 的行政工作等)。能夠擁有一個研究路線規劃圖，并為發現和生成性研究騰出時間，從長遠來看，可能會大大有助于產品和客戶體驗的信息共享。擁有一個獨立的團隊可以使這些研究成為奢侈品。當一個領導者致力于使研究成功，這意味著他們希望研究可以帶來更多戰略上的影響。
正如我之前提到的，一些被稱為 “ ResearchOps（研究運營管理）” 或者研究操作的東西，是一個趨勢短語，類似于 “ designnops①” 或者 “ DevOps②” 等等。拋開時髦不說，設立一個獨立的部門和領導層可能意味著在決策層有一個更大的席位，這反過來又意味著在使體驗研究產生影響方面有更多的投資。當投入更多資金進行研究時，業務側就有機會進行戰略思考并得到支持。一個獨立的 用研 部門反過來將能夠雇傭人來支持行政管理，為研究人員能夠專注于他們眼前的工作和分析而負責。在小型組織中，甚至在大型組織中的小型 用研 團隊中(比如我的團隊) ，研究人員往往負責所有的職能，這也是可以的！但是，如果有一個專門關注于這些研究人員需求的部門，并擴大他們工作的影響(不管團隊規模有多大) ，我相信將有更大的機會去收集更好、更深入的見解，研究過程也能充分發揮其影響力和潛力。
①Design Systems Ops 是設計團隊的一部分，他需要足夠了解設計，并且要了解他們試圖概念化什么。同時，Design Systems Ops 需要理解工程師的需求和定義方法，這將有助于設計系統的裝運和規?；?。在某些程度上，一個 Design Systems Ops 是兩個世界的翻譯。
② DevOps（ Development和Operations的組合詞）是一組過程、方法與系統的統稱，用于促進開發（應用程序/軟件工程）、技術運營和質量保障（QA）部門之間的溝通、協作與整合。它是一種重視“軟件開發人員（Dev）”和“IT運維技術人員（Ops）”之間溝通合作的文化、運動或慣例。透過自動化“軟件交付”和“架構變更”的流程，來使得構建、測試、發布軟件能夠更加地快捷、頻繁和可靠。
劣勢（推測）：
相反，單獨作為一個獨立的 用研 部門，也可能使得決策層難以接受。如果不流入一個直接產生收入影響的部門內（至少在短期內，比如在銷售或營銷方面) ，那么 用研 的工作就很難得到認可。利益相關者之間的伙伴關系和一致性，對于用研人員能夠成功地完成他們的工作來說至關重要。如果沒有它，如果 用研 的需求被認為不是直接以產品為中心，同樣的職位可以幫助 用研， 也可能會阻礙他們。開展生產性研究的時間可能被視為“有風險” ，而且當團隊的領導層與其他更為成熟的角色(即風險較低的角色)分離時，可能很難獲得合作伙伴和利益相關者的支持。
同樣，投資一個獨立的用研團隊總的來說可能是有風險的。可能很難預測到有形的ROI（投資回報率）預測，以便業務合作伙伴能夠理解，并在第一時間投入資金。這意味著，決策者們可能認為給用研分配預算或增加人數是有風險的，其他研究需求也是如此。一般來說，R&D（產品研發）在組織中是一個棘手的領域，而 用研 肯定會在這個預算范圍內。盡管有證據表明，對研發的投資有能力改變企業經營的底線，并且可以通過創新保持企業價值，所以相對于獨立的用研部門，緊迫的商業需求可能話語權更大。
...
作者：三分設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在設計項目中，甲方通常會表述的需求是「我要做什么？」因為這個需求對于甲方來說，是最迫切和最直接的。但站在設計公司的角度來說，除此之外，還有另外三點甲方容易忽視的內容需要了解，一是「我是誰？」二是「為什么做？」三是「用在哪？」
「我是誰？」包括甲方公司的名稱，品牌理念，所屬行業，主營業務，主打產品和主要受眾等；
「我要做什么？」包括甲方所需設計內容的具體細節，主要是設計類別，種類，數量，尺寸，以及預算和周期等；
「為什么做？」是指甲方通過設計內容想達到什么目的，是進行品牌的宣傳，還是獲得更多潛在用戶信息；
「用在哪？」則是說最終完成的作品以什么途徑進行展示，線上還是線下，網頁還是包裝等。
「明確」意味著，甲方向乙方所提供的需求內容，皆為真實的，準確無誤的，有理有據的，不會隨意修改的。
以上兩點，則為本文提及的「清晰明確的需求」的整體框架和詳細內容。在真實案例中，還需要依據具體的情況進行增減和調整，靈活運用。
不過萬變不離其宗，牢記「清晰」代表甲方的需求是系統和完整的，「明確」代表甲方對自己提出的需求是清楚和確定的，就能夠在實際操作中很好的運用。
在設計項目中，甲乙雙方擁有一致的目標，都是為了產出優質的、令甲方滿意的作品。但在具體的工作過程中，雙方人員有不同的分工和職責。
設計項目中甲乙雙方有自己的分工和職責
在整個設計過程中，設計師實際上是在充當“翻譯”的角色，需要根據其設計領域的專業知識、經驗、和設計技巧，將甲方的需求以視覺語言的形式翻譯過來，最終呈現出與甲方企業品牌高度契合，并且能夠強化和凸顯品牌特色的作品。這些就是設計項目中設計師的工作職責。
好的設計需要甲乙雙方共同努力
而完成好的設計作品，是甲乙雙方共同努力的結果。并且，最終能否做出有價值的、令甲方滿意的設計作品，取決于設計師對甲方需求的理解。而讓設計師充分理解甲方需求的一個重要前提，就是甲方已經將自己的需求清晰明確地傳達給了設計師。
雖然專業的設計師在做設計之前也會做很多的研究和背景調查，但對甲方各方面情況最為了解的，還是甲方自己。 所以，梳理出清晰明確的需求是甲方在設計項目中的工作職責。我的朋友小張產生了那么多的抱怨，也正是因為沒有意識到這一點。
真實的設計項目工作中，常常能聽到大家的抱怨，「完成工作不是最困難的，最難的是溝通」。
這種抱怨有時來自甲方，「你理解錯了」，「我不是這個意思」，「你這個跟我想的完全不一樣」……
有時來自設計師，「為什么要改」，「到底要怎么改」，「到底要改成什么樣」……
甲方與設計師的矛盾：都感覺自己在對牛彈琴
可想而知，如果設計方始終在抱怨甲方沒說清楚，甲方又始終認為設計方沒有理解到位，那或多或少都會影響雙方工作人員的情緒，造成工期拖延，最終的作品也很難讓甲方感到滿意。
所以，為了甲乙雙方共同的目標，請甲方人員按照前文對「清晰明確的需求」的解釋，盡量將自己的需求梳理完備。
也請乙方珍惜甲方的勞動成果，結合自身的專業知識，好好理解和消化。大家共同努力，去攻克這個千古難題。
需求溝通的目的是達成雙方的共識
這一點，幾乎是毋庸置疑的。如果甲方在項目工作中對自身需求進行了系統的梳理，并將需求完整無誤的列出，那在和設計師溝通時，只需將提前準備好的需求對乙方進行傳達，同時也能夠更準確和迅速的對設計師的反饋做出判斷，從而給到進一步的修改意見。
可以肯定的是，甲方前期的需求準備得越清晰明確，和乙方對接工作時所面臨的其他問題就會越少。相應的就能大大提高工作的效率，也有助于更好的完成設計項目的目標，促使甲乙雙方達到「雙贏」的效果。
先思考 再行動
今天這篇文章的重點在于，「工作中，方法固然重要，但具有工作意識，認清自身工作內容，并明白自身工作的重要性，也同樣重要」。
有了正確的工作意識，才能找到問題的關鍵，那么解決問題的辦法自然就有了。 甲方提出清晰明確的需求，設計師才不會越幫越忙！
作者：子博設計
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在日常生活中，說明書、指路牌、做ppt、設計網站、繪制海報中等都需要信息設計?？梢哉f，信息設計已經滲透到了人們生活的方方面面，信息設計存在于我們目前看到的每一個畫面。
對于B端產品來說，信息設計的好壞，一方面決定了用戶在使用產品中的難易程度；另一方面也影響著后續當產品功能添加時，產品的延展性如何。
信息設計是我一直較為關注的設計領域，從早期設計感性的純粹視覺思考，到現在越來越趨向于邏輯理性化的設計思維，這是一種設計提升的思維模式。
在二十世紀七十年代，英國倫敦的平面設計師特格拉姆第一次使用了“信息設計”這一術語。當時使用該術語的目的僅為區別于傳統的平面設計以及產品設計等平行設計專業。從那時起，信息設計就真正地從平面設計中脫離出來，廣泛應用在其他領域。
信息設計的主旨是什么？
通過對信息圖表設計的基礎認識,從信息的收集篩選、應用情景構思方式、視覺表現到信息圖表的設計模式、制作流程等方法，設計出符合閱讀順序，使觀眾清晰有效閱讀的設計方案。這種準確、形象、快捷的傳達方式已經顯示出信息設計方法獨特的優勢。
信息層級的排列不僅影響視覺上的美觀度，更影響人們在檢索信息時候的效率。尤其是對于B端復雜場景，我們不僅需要考慮清晰的傳遞業務價值，合理的信息層級劃分也是提高產品體驗的重要部分，好的信息層級則意味著更好的使用體驗。
試想一下，如果我們想要買一個手機，那么我們會如何買到手機呢？首先，我們會收集相關手機的信息，例如，先上網搜索最新的手機信息（向朋友詢問或者平時就有想好的品牌機型），然后我們的大腦會把這些信組合起來，得出買什么品牌什么型號的判斷。最后，我們在一堆信息中，提取出有效信息，進而指導自己的下一步行動。由此可見，我們獲取信息的步驟：
因此，我們在信息設計時可以借鑒以下基本思路。
1、根據自己的經驗與用戶需求收集盡可能全面的信息
2、分析信息池中哪部分信息是用戶最關注的。
但是，當產品的目標用戶不止一類時，我們就需要考慮多方案滿足不同的用戶對信息的需求。例如，在電商平臺搜索商品，我們既可以通過店鋪搜索或商品搜索，也可以通過天貓提供的商品目錄樹直接查找。
3、思考如何信息呈現，設計師更是需要思考如何呈現信息才能讓用戶更容易接受和理解，只有會組織信息，才可能打造一款用戶喜愛的產品。
檢測頁面的設計是否有效，需要我們對用戶的行為做分析。我們可以將用戶瀏覽頁面的行為也分為三個層次：
1、核心行為層：是指用戶首先關注這個頁面核心重點，觸發到的用戶首要、核心行為，對應信息分層的重點核心層。
2、了解行為層：是指用戶產生了解的意愿，繼續了解內容的行為，對應信息分層的次要輔助層。
3、查看更多行為層：是指用戶接收到信息后尋求更多信息的行為，如行動按鈕、文字鏈接等交互行為，對應信息分層的詳細信息層。
所以，如果頁面設計質量高、信息層級傳達得準確，那么用戶的行為層次應該會恰好和頁面的信息層次相對應，這也是我們進行頁面設計質量檢測的標準之一。
既然信息層級設計對于使用體驗比較關鍵，那么怎樣做好頁面的信息層級設計則顯得尤為重要。
我發現網上的資料也是參差不齊，查閱到的資料幾乎都在講排版設計的四個基本設計原則：親密、對齊、對比、重復。這四個方法雖然有用，但在面對復雜層級排版時仍會面對困惑。因此我對頁面排版進行了進一步的探索及思考，今天我們來說說除去上面四大設計原則以外的方法：
平時我們很容易被忽略的一點，就是信息的前置處理。我也曾遇到過某些信息很復雜導致排版很困難，來來回回多次修改設計總是不滿意，但卻忽略了這些信息是否真實地被需要。
信息前置處理本質就是判斷我們當前所要呈現的信息是不是必要的。這也是日常工作中經常遇到的場景，比如有時候產品給到了我們很多信息，可能僅僅是信息全部展開，所以我們在設計的時候就不能直接開始，需要通過當前頁面的業務場景去進行判斷，確定每個信息的合理性，兩個步驟進行判斷：
上述兩個問題的確認，會直接影響后面的信息設計排版。因此我們需要在源頭，比如去和產品或者業務溝通，弄清楚該信息呈現的緣由以及必要性，這樣能夠幫助我們最后理清楚信息層級。
我們在進行B端產品信息設計時，可以圍繞“簡約四策略”進行設計。
英國易用性專家協會主席賈爾斯 ?科爾伯恩 ( Giles Colbore ）的《簡約至上》一書詳細講解了簡約的四策略：刪除、組織、隱藏和轉移。
刪除是指將界面上不重要的內容及元素刪掉，只保留對用戶來說重要的內容。這樣不僅可以讓設計師在設計界面時只專注于重要的問題，也有利于用戶專心完成目標。設計目的是聚焦可用信息，去掉分散用戶精力的信息，從而為用戶提供價值。
我們在刪除的過程中，切記不要隨意刪除。刪除信息非常考驗判斷信息重要程度的能力，畢竟刪除了不該刪除的信息會給用戶造成不好的體驗。
組織是指對確定下來的信息進行有層次的整理。如果我們不對篩選出來的重要信息進行有序的整理，那么用戶在使用過程中就會覺得很復雜，抓不住重點。
信息組織的要求是以產品定位和用戶需求為線索，先考慮信息展示的主題，再考慮信息的分類方式（如時間、 顏色、大小、字母等），最后將松散的信息組織起來，并保證信息間界限明確。
右圖進行了信息組織，明顯會比左圖看上去體驗更好
信息的重要程度就決定了我們需要將哪些信息作為主體，哪些信息作為次要輔助信息，哪些信息甚至可以收起或者省略。
隱藏是指將用戶不常用的信息隱藏起來，在用戶需要時才出現。但是，我們要注意隱藏策略的使用方式。
第一，隱藏與刪除不一樣，刪除的信息是用戶不需要的、多余的，但隱藏的信息是用戶需要的，只是比較不常用而已。
第二，在設計信息隱藏時，要考慮清楚使用隱藏是否給用戶帶來了不必要的麻煩。例如，信息隱藏時沒有給用戶應有的提示，用戶就很難發現該信息。
首先，徹底隱藏需要隱藏的信息，只在合適的時機出現相關內容。
其次，能在界面中給出細微的提示，讓用戶順利地找到隱藏信息。
最后，提示要在用戶的視線范圍內，如果超出了用戶的視線范圍，即使提示再明顯，用戶也看不到。
在B端產品設計中，有一個永恒的爭論話題：表格操作欄需不需要隱藏。
關于這個話題，一部分人認為不應該隱藏，原因在于隱藏了操作欄，用戶就會以為表格數據是不能操作的。另一部分人認為應該隱藏，因為每條致據都把操作欄展示山來，感覺太多余。
1、需要隱藏的情況：當表格列數很多、已經出現橫向滾動條且操作欄的功能不常用時，可隱藏操作欄。當用戶將鼠標移到數據行上時，就會顯示操作欄的功能。
2、不需要隱藏的情況：當表格操作欄的功能都比較重要，一旦用戶操作頻率較高，無須隱藏操作欄。這時隱藏會導致用戶在操作時不直接。
3、隱藏一部分操作功能當表格列數很多、已經出現橫向滾動條，但操作欄的部分功能很常用時，這部分常用的功能就無須隱藏。當用戶將鼠標移到數據行上，就會顯示操作欄中不常用的功能。
轉移就是將合適的信息放到合適的地方。
例如，我們在設計一個 B端產品注冊界面時，期望用戶除了填寫賬號、密碼、驗證碼以外，還期望用戶填寫生日信息。因為產品經理希望在用戶生日時給用戶發送生日祝福，讓他們感受到產品的溫暖。想要再做用戶分層的時候，用年齡分層。但是，生日信息放在注冊界面顯然不合適，這時可以將生日信息填寫步驟轉移至用戶注冊完成后進行。當用戶完成注冊時，系統可以給予溫馨提示，告訴用戶 “你已完成注冊，當你填寫了生日，你將在生日的時候收到神秘禮物”。
注意：B端產品經理在設計界面信息轉移時，要清楚該信息被轉移的原因，如果盲目地轉移，反而會讓用戶無法在合適的位置找到合適的信息，降低了用戶獲取信息的效率。確定了信息設計的前置的信息處理以后，就到了設計師的主場，信息的排版設計。
在信息量較大的頁面中，設計師需要充分了解產品功能和用戶所需，對頁面的內容進行劃分，明確各部分內容的優先級，建立信息層級。通常我們可以從產品設計的角度，可以將頁面信息劃分為3個層次：
1、重點核心層（吸引用戶）是指用戶在短暫的 3-5 秒內瀏覽頁面后，最能夠吸引他的核心內容。這部分也是頁面的核心功能、是頁面最想展示給用戶的內容，必須少而精，在設計中需要突出展示。
2、次要輔助層（幫助理解）是指用戶被重點核心信息吸引后，進一步在頁面中停留 3 – 5 分鐘，就會閱讀相關的、幫助了解核心內容的輔助信息，如說明信息或其他相關功能，這部分信息比較重要，但不需要強化展示。
3、詳細信息層（詳細了解）是指更多的信息或補充信息，詳細信息層會以更多的交互方式展示信息。這部分信息并不十分重要，但也需要展示。
B端產品業務比較復雜，頁面內容也會較多，信息的有效組織尤其重要。信息設計不是簡單的內容堆砌，需要根據用戶場景和需求做出優化處理，構建有效的信息的層級幫助用戶去理解業務內容。
總結出以下五種方法來幫助我們更合理地進行信息設計：
信息分組是最常用的設計形式，能夠將復雜的信息打散重組，聚合相似信息，分割差異化信息，有助于降低信息的復雜性，幫助用戶快速定位信息、瀏覽內容，從而降低頁面整體的復雜度。
常用的分組方式有三種方式：間距、分割線、卡片。
我們可以根據信息復雜度更好地選擇分割方式，讓界面的表達清晰明確。
面對復雜的信息內容，用戶容易產生退縮情緒，組件是目前大部分設計師在進行信息排布時必備的部分，包含：
1、樹形結構：對于有關聯性的多層級非常適合，可以將復雜的層級結構進行收攏，從而能夠顯著降低信息的復雜度。
2、表格結構：對于信息多且關聯性不大的復雜信息，可以聚合到表格來進行呈現，但表格的呈現方式不宜濫用，需要根據我們場景來進行選擇。
3、分步驟：將復雜內容分步拆解，把用戶的關注點從頁面內容轉移到步驟進度上，可以減少用戶的心理壓力。另外節點信息頁也可以幫助用戶更好地理解業務流程。
4、tab標簽：更適合同級的數據，對于同類型的結構可以更好地將頁面進行拆分，從而讓當前頁面更簡潔。
通過改變布局的設計方式，我們可以將多層結構的樣式通過拆分布局來將其控制在三層內。這里底層邏輯就是當遇到相對比較復雜邏輯時，我們可以考慮通過改變結構來減少其復雜度，如下圖：
我們可以利用信息融合的形式來減弱其對層級的影響。信息融合從本質上講就是將某兩種層級信息通過不同的組合方式，讓其融入到同一個層級中。
在進行B端布局時，信息融入用得比較多。比如我們最常見的標題、搜索和按鈕等都放在同一行上。這樣既能夠節省視覺空間，還能夠降低信息層級的復雜度。
但在進行信息融入的過程中，我們需要注意的是：如果放在同一層級會造成理解上的誤解時，這個時候不要采用該方案。比如搜索框的位置，放在哪個層級決定了對應的搜索范圍。
信息弱化的原則是，將某些超出層級的部分進行弱化。比如有5個層級，但其巧妙地將功能篩選融入到了當前的結構中，使得即使超過3層我們也不會覺得其特別復雜，如下圖：銷氪平臺就對數據和視圖切換行進行了弱化，雖然還是有4種層級，但從視覺感知的層面上不會覺得視覺凌亂。
通過上述5種方案：信息分組、組件拆分、更改布局、信息融入、信息弱化，我們可以將大部分層級過多的復雜信息簡化，從而讓我們最終的頁面呈現不會太過復雜，更容易被用戶理解。
一、減少頁面元素設計
不同于C端產品，B端產品更強調效率。正如奧卡姆剃刀原則所說“如無必要，勿增實體”。
頁面內容需要以簡潔為主，避免無關要素形成信息干擾。而設計師更加感性，擔心設計過于平淡，會在界面中添加各種視覺元素，反而會增加用戶的認知成本。
體驗設計行業需要創新，但是B端產品設計需要更加謹慎，尊重用戶的習慣，完整表達業務邏輯性、保證內容的可理解性，是設計師必須去關注的。
當你想用卡片來對信息分組時，你有沒有糾結過到底是用線框卡片還是背景色填充呢？經過多次糾結和多次的設計對比，我發現分組方式其實也包含著一定的規則：
如果卡片少，用色塊；
如果卡片多，用線框，你會發現卡片過多時，線性設計會讓頁面顯得更整潔和清新，色塊設計就會讓頁面顯得更厚重。
當你整個頁面都全是線框時，你可以利用色塊的卡片來達到突出頁面重心的效果，讓整體頁面沒有那么單調，可以看到下圖的例子，右側的頁面會相對更穩重一點。
在進行色塊時，時常會糾結用灰色底還是彩色底來進行。那么這兩者到底有沒有界限的區分呢，我們應該何時使用這兩種色彩呢。
可以看出目前這兩種顏色的運用更多的是功能上的區分：
1.彩色背景更適用于「想要引起用戶注意的界面」，比如一些功能引導或者營銷性質的頁面。從表現性質上來講更重。
2.而灰色背景更適用于「利用灰色背景來區分層級關系」或者一些微弱提示的信息。從表現形式上來講更輕。
在某些特定的場景下，內容頁面也可以通過可視化展示幫助用戶理解信息，例如常見的身份證圖片上傳等，很多用戶無法分清楚正面反面，借助圖片可視化提示，便于用戶更好地理解信息。
作者：789研習社 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
交互系統設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析，關注以人為本的用戶需求。
交互設計有許多的方法和理論，如格式塔心理學原理、尼爾森可用性原則、7±2法則、3次點擊法則、功能可見性原則、菲茨定律等。
系統應當在適當的時間內快速讓用戶知道當前所處的狀態，即無論單擊、雙擊還是滾動都會給用戶一個反饋，讓用戶對過去發生、當前目標、以及對未來去向有所了解，防止用戶出現錯誤操作。
常見的反饋有刷新提示、加載提示、支付提示、下載提示、進度提示等（具體見#產品中的反饋機制#文章）
示例：進度條、已讀文章標題變灰
軟件的使用更符合現實的場景，通過直觀的視覺來貼近真實的世界，比如使用易懂和約定俗成的表達。
示例：圖標ICON等圖形化手法代替純語言文字（音樂播放轉盤）
產品需要支持用戶“反悔”，即在用戶出現誤操作時，需要給用戶提供“緊急出口”，做出“撤銷”“返回”“取消”“重做”等功能。
示例：微信聊天的撤回及重新編輯功能；備忘錄的恢復刪除功能
產品的信息架構、交互方式、視覺表現等應該具有一致性，主要包括結構一致性、色彩一致性、文字一致性、操作一致性、反饋一致性
給用戶錯誤的提示不如在用戶發生錯誤之前避免它，可以幫助用戶排除一些容易出錯的情況，或者進行二次確認。
示例：微信朋友圈編輯內容后點選返回會出現是否保留此次編輯的彈窗以及在付款頁面等重要操作之前給出彈窗是否確認支付，銀行卡號輸入時自動以4位數字為一組便于用戶輸入防錯
將用戶的記憶負擔最小化，盡量減少用戶記憶信息，應該提供信息讓用戶辨認。
示例：淘寶的搜索功能，使用關鍵詞聯想要搜索的內容，避免有些商品名稱記不全可以輕松搜索到；引導頁的新功能提示
既能保證第一次使用者能清晰明白功能，又能給老用戶提供更高效的使用方式，允許用戶可以定制常用功能。
示例：支付寶首頁可以自定義放置常用功能；餓了么訂單頁面支持用戶再次購買上次的菜單，不需要重復選擇
去除冗余和不相關元素，適當留白，讓功能突出，不會分散用戶注意力，簡潔精致的圖形能留下深刻的印象。
示例：知乎、簡書等內容為主的產品，減少元素使用，讓用戶聚焦內容，提升用戶體驗
盡量幫助用戶從錯誤中恢復，讓損失降到最低。指出錯誤信息，并給解決建議。
示例：word的自動保存功能；登錄頁密碼輸入錯誤，給出錯誤提示并修改建議
當用戶需要幫助時給予用戶適當的幫助入口，幫助文檔要易于查找， 專注于用戶任務。
示例：微信 、淘寶等頁面的幫助與反饋
我們都會有一種習慣，越是對一件事情經驗豐富，我們就越容易把事情想（做）得復雜，設計師也是如此，我們很容易過度思考，導致我們最終的解決方案很復雜。
這樣看來好像我們是為了用戶體驗而想盡辦法，但是最終會分散和混淆用戶的意志力，反而讓用戶體驗更糟糕。
怎樣讓我們在設計中做到“化繁為簡”呢？這時候我們可以用到一個定律“奧卡姆剃刀定律”。
首先要說明的是“奧卡姆剃刀定律”它來源于哲學，就像“菲茨定律”、“?？?海曼定律”和“米勒定律”一樣，它們出自心理學和物理學，它們都不是直接為了設計而出現的。
但是它們提出的原則是可以運用在設計中來提升我們的設計和用戶體驗?；蛟S有人已經無形之中運用了這種方法，但是并不知道它的背后竟然還有這么一個理論。
在設計時，我們運用奧卡姆剃刀原則，剔除那些不必要的元素（視覺、交互、功能等），如果兩個產品有相同功能時，奧卡姆剃刀的原則是建議選擇更簡單的。
因此我們在做設計時務必分析每個元素是否必要，在不影響整體功能的情況下應該盡可能的減少不必要的元素。
在如今強大的互聯網時代和強大的設計工具下，設計師很容易忘乎所以，在設計時往往將簡單的需求設計得非常復雜。
它們可能是一個很多功能和信息的網站，但是卻很難使用和維護，有人認為我的網站設計就應該做得更多，它應該擁有更多的功能和信息，但實際上應該做得更少。
一旦出現這種想法時我們應該問自己，我們最開始的目標是什么？我們要解決的真正問題是什么？
十四世紀時期（文藝復興時期），歐洲的學者們忙于“辯論”（打嘴炮），把研究“似是而非”的東西當作智慧的象征。
例如：
黑色的白色是否存在
上帝的噴嚏是哈欠還是電閃雷鳴？
不是張三也不是李四的人本身是否存在？
在這些毫無意義的“口嗨”中，奧卡姆實在是看不下去了，奧卡姆覺得他們的爭論是毫無意義的，由此他提出了奧卡姆剃刀定律：如無必要，勿增實體。與我們中國哲學中的“大道至簡”有異曲同工之妙
奧卡姆剃刀的觀點是“不要浪費較多的東西去做用較少的東西同樣可以做好的事情”，簡單點就是“如無必要，勿增實體”
拉丁文形式有以下幾種：
我們可以從三個方面來解釋這個觀點：
從三個解釋奧卡姆剃刀的觀點我們可以引申出設計中的一些方法：
如果一件事情可以用已有的“A”來解釋，那么就不要再去發明“B”來解釋這件事，新的這個解釋可能存在漏洞。
這一條與雅各布定律中表達的想法是一致的，雅各布定律講“用戶會將大量的時間花在其他的網站（產品）上，而不是你的網站（產品）”。那我們在設計前就應該多看，一名優秀的設計師除了具備良好的理論知識和高超的技能外，還應該有開闊的眼界。
擁有開闊的眼界你才會知道原來已經有了這么好的設計解決辦法，而不是固步自封的“創新”。
如果已經有了一種很好的設計方案"A"或者是某一個功能的設計大家已經有了一個統一的標準，那么我們在做同類設計的時候最好的方法是與之保持一致性，不要再去做設計“B”，因為新的設計“B”可能會比設計“A”更難用，然后最終導致這個設計是一個失敗的設計。當然。如果你有成本能接受創新后的失敗，那么也可以嘗試，但最好的還是先選擇設計“A”。
這一點其他詳細內容可查看雅各布定律
如果同一件事情有N種理論來解釋，那最簡單的便是正確的。
在設計一個功能的時候，如果我們設計了幾種方案，或者在計時有幾種交互方式方案，那么最簡單的交互方式肯定是最好的。
能夠N次做好的事情，就不要用N+1次來完成。
這一點我們可以理解為“降低復雜性的最好辦法就是避免復雜”，如果一個交互或者是一個步驟，能用N次來解決，那么我們就一定不要讓他用N加一次來解決這個事情。
當我們接到用戶的需求時，用戶會根據自己想要的東西而提出很多的需求，有些是可以采納的，有些卻又是不可取的，用戶并不會意識自己的對錯，他們只會說我想要這些東西。
那匹馬的故事大家應該都聽過，但經典的例子還是可以一直舉著：
一百多年前，福特公司的創始人亨利·福特到處跑去問客戶：“您需要一個什么樣的更好的工具交通工具？”
幾乎所有人的回答都是：“我要一匹更快的馬”。
很多人聽到這個答案后就跑到馬場去選好的馬匹配種，以滿足客戶的需求。
但是福特并沒有立馬去馬場，而是接著往下問。
福特：你為什么需要一匹更快的馬？
客戶：因為可以跑得更快！
福特：你為什么需要跑得更快？
客戶：因為這樣我就可以更早地到達目的地！
然后福特發明了汽車，很地滿足了客戶的需求。
我們可以說這是剔除現象看本質，看清用戶到底需要什么，我們做出的產品才會是好產品。
UI設計師最忌諱的就是拿到原型就直接開始設計，這樣做是很危險的。拿到原型的第一時間應該把刀直接架在原型上，反過來推動我們思考，什么東西是必須展示出來的，哪些直接去掉，哪些可以隱藏起來等等，又或者是哪些流程最好一步解決，哪些分開解決。總而言之，這一刀是讓我們設計師在設計前對產品的原型有所思考。
正如前面所說的，越是經驗豐富越容易將事情做復雜，有時候為了追求設計上的美感，或是完美的用戶體驗反而將設計做得復雜了，而這一刀的作用就是在我們完成設計后用來自我檢查的，剔除我們設計中不必要的元素。
提起簡單性最具代表性的就是“蘋果”，它的創始人斯史蒂夫·喬布斯就是一個極簡主義者，喬布斯在會議中會問大家“我們下一步應該做的十件事情是什么？”喬布斯會將大家的建議記下來，然后再刪掉一些他認為愚蠢的，最后剩下最終確定的前十大“最應該做的事”。喬布斯會把最后七件全部都劃掉，最后宣布只做前面三件事。
還有一個故事就是，在設計iPod時其中有一個設計方案是有可拆卸內存卡的插槽，喬布斯覺得它太復雜了所以沒有選，第二個是轉盤的設計代替按鍵的設計，轉盤的轉動可以讓我們快速的下拉列表，而如果是按鍵找歌可能需要按幾百次。
自從項目開始，喬布斯每天都投入其中。他最主要的要求就是“簡化！”他會瀏覽用戶界面的每一個頁面，并且會做嚴格的測試：如果要找某一首歌或者使用某項功能，按鍵次數不能超過三次，而且按鍵的過程要自然。如果他覺得導航不夠清楚，或者需要按鍵三次以上，他就會非常生氣。
當然還有后續iPhone、iPad、MacBook的設計也同樣如此，喬布斯對于產品一生都在追求極簡設計。
喬布斯的故事有很多，畢竟他是一個極簡主義者，有興趣的可以去讀一讀《史蒂夫·喬布斯傳》
簡單≠容易，復雜≠完美，就像《小王子》的作者安托萬·德·圣埃克蘇佩里說的”完美不是在沒有什么可以補充的時候實現的，而是在沒有什么可以帶走的時候實現的“
奧卡姆剃刀并不像“費茨法則”那樣有明確公式告訴你怎么做，例如將按鈕放置在用戶最快能點擊的地方，按鈕的大小應該減少用戶調整的過程，使用戶能快速的擊中目標。
奧卡姆剃刀在設計中的運用沒有直接針對某一項設計，它算是對設計師思想上的一種指導，就像它指導其他科學家在科學創造中那樣，它是一種方法，可以指導你在設計中思考問題時如何做出更好的選擇和設計。
作者：宇宙設計大本營 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大部分的設計師應該都沒有見過所謂的“交互設計文檔”吧？在實際工作中，所謂的交互設計文檔是由交互設計師所輸出的，但是大部分的互聯網公司是沒有交互設計師的。交互設計師的工作內容被UI設計師與產品經理相互分攤。那公司為什么不招聘一個交互設計師崗位呢？（boss：呵呵～一個人能完成的任務為什么要兩個人?。?br style="margin:0px;padding:0px;outline:none;box-sizing:inherit;" /> 所以本篇文章為了讓我們設計師能夠很好的了解什么是交互說明文檔？它是干嘛的？有什么用？如果制作？有哪些內容等多方面全面了解。（哪里有了解的不到位錯誤的地方，也希望各位大神多多指點相互學習。讓我卷～）
交互文檔，即交互設計說明文檔（英文名“Design Requirement Document”）。又稱“DRD文檔”。用來承載交互說明、交互原型、項目背景等內容，存檔并交互項目相關伙伴的團隊協作文檔。
也許你想到：什么？交互文檔（DRD）我壓根沒見過，這難道不是口頭說說就行嘛？無需交互設計師。（大部分公司的交互文檔是由UI設計師/產品經理來撰寫）但是有的公司產品也分擔著UI設計師的工作.......只要你如果優秀干啥都行，不優秀話語權都沒有。（比如我們這些“小美工”。職位只是對一個工作的劃分不代表對你能力的劃分，只是公司的一種小手段～
回歸正題，作為交互設計師，工作職責起到“對接上下游，承上啟下”的作用，不論是在方案評審的講解，還是日常的工作溝通，都應具備優秀的溝通能力、語言表達和DRD表達能力。而DRD不僅能完美的詮釋出產品的內容和需求，還能夠為產品出一套完整的設計規范，讓產品保持一致性，方便團隊協作減少溝通成本，也方便后期的修改。
DRD是利于團隊協作的媒介，也是產品規范與項目總結的重要輸出文檔。
交互文檔撰寫并不是只有給自己看，最重要的是給：產品經理、UI設計師、開發（最需要）等等。并且作為交互設計師的輸出物，交互文檔是聯系開發流程上下游的重要文件，它需要具備良好的可讀性、唯一性和時效性。
首先不同公司，不同團隊產品經理與UI/UX設計師之間的配合輸出物是不固定的。
1. 大部分公司，產品經理細心點會連交互說明和原型一起出了（包含在PRD文檔里），但是大部分會出現體驗層的漏洞。
2. 如果公司產品是負責傳一句話，有交互設計師的情況下，交互需要從功能規劃、信息架構、原型說明一起搞了。
3. 還有在小公司比較罕見的流程就是產品搞PRD，交互搞交互文檔，彼此之間的邏輯可以互相印證。
作為交互設計師的下游，我們也需要較早的介入需求溝通之中，提早避免后期可能存在的問題出現。
（但是很多時候交互設計師就是我們自己）
開發是最需要看交互文檔的重要成員之一，因為他決定著產品的邏輯以及頁面的跳轉流程、交互方式、動效方式等等。（不過大多數公司只有簡單的PRD文檔，開發也只是簡單看看～）
你習慣用什么工具撰寫交互文檔？PPT、Sketch、AI、Axure … ？
你習慣用什么格式輸出你的交互文檔呢？PPT、PDF、HTML …？
其實使用什么工具都無所謂，只要能夠正確的描述出交互文檔所需要表達的內容和邏輯就行。（就是誰都看得懂）
我比較喜歡使用Axure軟件撰寫交互設計文檔，大家可以根據自身愛好或者公司規定進行選擇（例如sketch、figma、PS等等..都是可以的。
說了這么多，究竟交互文檔包含哪些內容呢？
一般來說，一份最基本的DRD文檔需要包含：DRD封面、更新日志、文檔圖例、產品背景、頁面交互、業務流程圖、交互原型、回收站等模塊。
DRD封面：包括產品/項目名稱、版本編號、撰寫時間、撰寫人等基本信息。按需可增加參與該項目的各方負責人。（如：產品經理，交互設計師，視覺設計師，開發，測試，團隊名稱等）
更新日志，包含具體新增或修改的內容，修改人，修改日期等信息。在實際工作中，方案的修改和優化是不可避免的。更新日志方便項目成員一目了然關注到重點更新的內容，也方便開發找到對應的負責人進行溝通，提升工作效率。
針對你在該文檔所用到的圖例進行說明，輔助閱讀（如：操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。）。特別適合剛入團隊，首次閱讀你DRD文檔的人來講，是非常有利于團隊成員對你文檔的理解。
可包括一些項目背景、需求分析、用戶調研、競品分析等。用于設計思路的整理和記錄，方便閱讀，方便參與評審會的人理解整個項目背景下的設計思路，也方便日后總結與溝通。但無需將所有的分析內容都放入，結構化整理重點內容放入即可。
業務流程圖的目的就是梳理并分析優化業務流程。我知道很多同學做UI設計師的時候可以完全不管業務，直接做設計，但是作為交互設計師了解產品業務是非常重要的，因為不了解業務你就無法完成交互設計，優化業務場景。
舉個例子：在教育考試系統中一般流程是：教育局出通知→學生報名考試→老師審核→報名通過→老師編排學生考試名單→學生開始考試對號入座→教育局公布成績→學生查詢成績→考試結束，看這一些列的流程，因為關聯特別多，如果對業務不熟悉的話設計起來會非常的不便，如果前期因為業務流程不熟悉而設計出錯誤的交互稿的話，后面就會特別麻煩。
一聽： 先聽客戶/產品介紹。以最簡單的方式了解產品重點，即基本要素中的角色、活動、協作關系梳理出即可。
二溝通： 完成上一步后，就可以進行提問了。主要是沿著流程進行發問，重點放在分支、產物關系上。看看是否存在分支的情況，各協作之間是否有交付物。
三確認： 最后一步就是自己講一遍流程，和客戶代表或者業務產品進行確認是否有理解偏差的地方。
以醫院APP取號業務為例
頁面交互是交互文檔的主要內容可以詳細說明界面中元素的來源，控件的交互方式，數據的樣式，字段的長度規定，頁面元素的狀態變化等。每個交互頁面的內容應該包括：文檔頁面標題、界面標題、界面、設計說明。
文檔頁面標題：一般在每一頁文檔的頂部。寫明當頁內容是屬于哪個模塊或流程的，讓看的人不容易迷失；
界面標題：注意命名，方便交互稿中的互相聯系，如“跳轉【XX頁面】”，“回到【XX界面】狀態”；
界面：界面尺寸建議按實際界面的比例縮小，避免你想當然的設計并不符合規范，也避免一個界面太大影響閱讀效果；
設計說明：邏輯關系、操作流程或反饋、元素狀態、字符限制、異常/特殊狀態 等等，都可以放在設計說明中；
藍藍設計的小編 http://www.syprn.cn