編者按：互聯網的誕生本就是一個奇跡，作為其中最重要的載體之一，網頁就是這個大時代最重要的縮影，相關技術、設計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網頁設計發展史，我們可以看到技術、設計與思想的演進，看到無數有識之士改變世界的剪影。本文作者是網站Froont.com的聯合創始人Sandijs Ruluks。
當我發現設計網頁有多投機取巧的方法之時，就逐漸開始對手打網頁代碼失去興趣。的確，許多網頁設計的問題并不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什么會有做設計和寫代碼的分工？隨著技術的發展，許多在過去難以解決的問題現在可以輕松搞定，但為什么與此同時一些簡單的事情反而越來越難以實現？這些問題的答案并不是簡單的是與否，對與錯，也許我們需要從網頁設計的整個發展歷程來尋找答案，找到真正彌合設計與代碼之間隔膜的原因所在。
溫故歷史之前，不妨看看2014年最優秀的網頁設計：《愛不釋手！2014年最佳的20個優秀網頁設計》
在互聯網真正開始之時，黑色的顯示屏僅能顯示單色的像素?？梢哉f，當互聯網天地初開之時，Web Design 僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進入千家萬戶，而那時候，才是屬于互聯網的狂野西部。
能夠顯示圖片的瀏覽器的誕生，是促使網頁設計這個行業誕生的重要先決條件。實際上在當時，最接近于信息結構化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的網頁設計書《Creating Killer Sites》講述了他設計優秀網站的秘訣：在表格中嵌套表格，將靜態的表格和動態的表格以巧妙的方式結合到一起。盡管表格本身是用來承載數據的，用來承載內容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，并且大行其道。
網頁設計所面臨的另外一個問題，就是如何保持網頁那脆弱的結構。也正是因為這種需求，切片設計（Slicing Design）逐漸流行了起來。設計師創建出漂亮的網頁布局，隨后開發者將整個設計稿切片，找出呈現設計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，表格可是近乎柵格系統一般的靈活的設計神器，也正是因此，那個時代的開發者并不喜歡前端的代碼。（表格嵌套表格有多亂？）
JavaScript的出現補足了尚且原始的HTML。舉個例子，如果你想寫個彈出窗，或者想動態修改某些對象的順序？HTML不行，但是JS可以！不過此時JS的主要問題在于，它處于整個網頁布局的頂層并且需要單獨加載。很多時候它僅僅被懶惰的開發者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。今天，同樣的功能如果CSS能實現，我們會盡量避免使用JS。不可否認的是，JS本身確實很強大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。
作為一門新技術，Flash為網頁開發者/設計師帶來了前所未有的自由，它打破了之前網頁設計所固有的限制。借助Flash，設計師可以隨心所欲地在網頁上展現任何形狀、布局、動畫和交互，可以使用任何喜歡的字體，他們借助Flash熔于一體。所有的這一切最終會被打包成為一個文件，然后被發送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術般的網頁。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設計并不開放，也不利于搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發布他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，Flash開始走下坡路——至少在網頁設計領域。
差不多是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生了。CSS的基本概念是將網頁內容的樣式分離出來，所以網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。早期版本的CSS并沒有現在那么靈活，和許多新事物一樣，它最大的障礙在于許多瀏覽器還沒來得及接納這一新技術，對于開發者而言，這是一個頭疼的事情。需要明確說明的是，CSS并非全新的編程語言，它僅僅只是一種聲明性語言。那么網頁設計師需要學習編程嗎？可能需要。但是網頁設計師需要懂得CSS么？當然需要。
此刻，在手機上瀏覽網頁本就是一種全新的挑戰。設計師除了要為不同設備設計不同的布局，還面臨著內容控制的問題：小屏幕上展示的內容要和桌面端一樣多，還是需要剝離開來？桌面端網頁上閃亮精致的小廣告要如何在手機上呈現？加載速度也是一個大問題，移動端設備的網絡加載速度不夠快，而且桌面端網頁會消耗大量的流量。網頁設計亟待改進。
第一個重大的改進是柵格系統的出現。經過摸索，960柵格系統最終勝出，經典的12欄柵格被設計師們廣泛的接納，甚至成為許多設計師最常用的設計工具。接下來，各種常見的設計元素諸如表格、導航、按鈕被標準化，打包成為可復用的套件，這基本上就構成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是Bootstrap和Foundation，它們也使得網站和APP之間的界限逐漸模糊。當然，它們也不是沒有缺點，借助這些庫設計出來的網頁往往大同小異，而且網頁設計師要想使用它們還得深入了解相關的代碼知識。
驚才絕艷的設計師Ethan Marcotte決定挑戰傳統的網頁設計，它讓網頁在內容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設計命名為響應式網頁設計。網頁設計師依然只需要HTML和CSS就可以實現這種功能，不得不承認這種設計理念非常超前。不過大家對于響應式設計依然有些許誤解。對于設計師而言，響應式設計意味著為設計許多不同的布局。對于用戶而言，響應式設計就意味著這個網頁可以在手機上完美瀏覽。對于開發者而言，響應式設計意味著如何控制好網站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現效果，等等。簡而言之，就是一個網站能在任何情況下良好展現。至少在這一點上，所有人能達成共識。
設計網頁布局總會花費大量的時間，好在這個時候我們開始拋棄復雜的光影效果，重新專注于根本的內容呈現。在此之前，網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設計，而簡化這些視覺元素之后，就是我們說所的“扁平化設計”。將復雜的效果淡化之后，視覺的扁平化，也促使內容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大范圍使用，網頁字體和版式設計的結合令網頁視覺更加漂亮。有趣的是，這時候的網頁設計開始有返璞歸真的感覺。
技術的革新已經開始將網頁設計推動到一個全新的境界。在許多設計平臺上，設計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，并且這些代碼非常靈活，可控度極高！試想一下，開發者無需擔心瀏覽器兼容性，可以專注于更加實際的問題！
新誕生的概念正在推動網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width1），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創建布局，輕松修改屬性而無需編寫過多代碼。
網頁設計正在飛速發展，未來還會有越來越多的創新，就讓我們拭目以待吧！
文章來源：UI中國 推薦：陳子木
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
確保用戶成功且無壓力的登錄體驗需要我們不斷地思考。
大家好，我是Clippp。今天為大家分享的文章是「登錄頁」設計。幾乎所有的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但仔細思考會發現，每個登錄頁都有差異化的點，而這些點正是產品無一物二的地方。
登錄體驗是指用戶通過入口進入應用、網站或服務，建立自己的身份。
登錄流程通常由主登錄流程和恢復流程組成，其中主登錄流程包括填寫用戶名、手機號、密碼等，恢復流程包括忘記密碼、重置密碼、其他登錄方式等。登錄體驗的目標是確保用戶成功登錄帳戶。
使用簡潔、常用的頁面布局和文字，有助于用戶輕松執行熟悉的操作。保持設計簡單也有助于將體驗輕松擴展到不同設備和屏幕尺寸。
▲ Pinterest采用了居中對齊的重疊式登錄頁設計，用醒目的紅色按鈕來突出登錄動作，還支持Google和Facebook作為其他登錄方式。
登錄頁是強調品牌的首要接觸點。登錄操作最好于中心位置，頁面上的其他元素應謹慎增加，避免注意力從登錄任務上移開。
設計思考：
用戶花在登錄頁上的時間越少越好，要讓用戶盡快發現產品中的優點和價值！
登錄(或恢復)操作應引起用戶的全部注意力：
最好將登錄頁表單放在頁面中心位置；
不需要復雜或冗長的文字解釋，例如可以利用簡單的“輸入密碼”來提示用戶完成操作；
要求用戶一次只做一件重要的事情，例如將找回密碼這種復雜的流程分解為多個步驟進行。
▲ Facebook保留用戶的登錄信息，并將恢復流程分為幾個邏輯步驟。
▲ 亞馬遜將輔助恢復選項放在“更多幫助”中，這有助于使主要操作保持重點。
設計思考：
使用卡片式布局；
將操作分為主要動作和次要動作；
使用尺寸大而突出的登錄按鈕；
盡量減少次要操作的次數，以避免使頁面出現混亂。
在登錄過程的每個階段，用戶都可能會失敗。輸入錯誤的郵箱，忘記密碼或網絡問題等，所有這些問題都可能導致登錄意圖急劇下降。
因此清晰及時的反饋設計對用戶來說很重要。
▲ 信息輸入錯誤時會提示錯誤具體的原因。
▲ 密碼輸入有誤時，Facebook會在下方增加“使用Google登錄”選項。
設計思考：
鼓勵用戶嘗試合適的替代方案；
登錄失敗后，將用戶導航到單獨頁面并組織其他登錄方法；
展示最有效的登錄方法，并在發生問題時及時對用戶做出反饋。
除了輸入賬號密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用戶選擇，同時防止忘記密碼造成無法登錄的情況。
添加過多的登錄方式會使頁面混亂，降低登錄意圖，附加選項應該限制為2或3種方式。
▲ Medium登錄表單的設計盡管很清晰，但過多的登錄方式會阻礙用戶的選擇和判斷。
▲ Airbnb登錄頁能看到大量的輔助登錄方式，過多的選項可能會導致用戶的認知負荷。
設計思考：
當前無密碼登錄正在迅速普及。在很多移動App中，基于手機號的身份驗證已成為常態，指紋和FaceID也出現在許多地方，從而實現了無縫和安全的身份驗證流程。
找到產品最適合的登錄方式，并將其作為主要選擇能有效提升效率！
登錄涉及用戶輸入敏感的個人數據，例如手機號、郵箱、密碼等，用戶愿意輸入信息意味著他們信任這個平臺或產品。
雖然減少與用戶的摩擦很重要，但有時網站也會提供額外的身份驗證來確保用戶信息的安全。
▲ B站利用文字驗證方式來增強用戶帳戶的安全性。
設計思考：
登錄表單應該代表品牌的形象，任何視覺上的變化都必須慢慢進行，因為完全改變視覺設計可能會導致缺乏信任。
登錄意圖是一種體驗，在這種體驗中用戶角色和類型可以無所不包。
可以嘗試以下方式來定義用戶的范圍以便更清楚的了解用戶：
登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關鍵階段。
登錄入口：用戶是通過郵箱、搜索引擎還是通過應用跳轉到登錄頁？
常用設備：手機、瀏覽器等設備可以為用戶帶來個性化的體驗。
用戶群組：利用年齡或地理位置等方式也能進行分離用戶群主的劃分。
通過分析具有代表性的登錄頁設計來展示登陸頁的多種設計表達。
▲ Google采用多階段的登錄方式，郵箱和密碼分兩步進行輸入。這種格式對谷歌來說有一些安全優勢，也可以在下一步為用戶提供個性化的選擇。
▲ Uber的登錄頁采用簡單的樣式，注重使用體驗，引導用戶輸入手機號來進行下一步。
▲ Facebook利用右對齊的登錄表單很好地集中注意力，左邊的空間被用來展示品牌的信息和形象。
▲ 亞馬遜的登錄頁從視覺設計上看有些陳舊，但卻是管理用戶注意力的一個很好的例子。黃色的“繼續”按鈕和簡潔的頁面使登錄看起來簡單而快速。
▲ Figma的登錄頁位于畫面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁面整體的設計利用線框組成，非常簡潔高效。
文章來源：展開 作者：Clippp
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁的第一印象至關重要，它在很大程度上決定用戶是否有興趣瀏覽下去。而這個第一印象則是由網頁的首屏部分所決定，它是最直接傳遞出網頁的功能與印象的媒介。
一個好的首屏，也能讓你在同質化嚴重的情況下，脫穎而出實現彎道超車。好的，今天就讓我們一起來研究一下，網頁首屏部分的組成、方式以及設計手法吧。
說到首屏大家肯定第一反應是這樣的一個形式，有小伙伴可能會說，這個不就是個 Banner 嗎？那也是很多設計師的誤區，網頁首屏中存在著大量的交互元素在其中。
我們現在來看第一個網頁，這里就包括了五個互動的按鈕在其中，這個是 Banner 所不具備的功能，接下來我們快速的瀏覽一下，這個區域的主要組成模塊。
這個網頁，是一個簡單的組合形式，我們可以劃分為全局導航欄和形象部分。
這兩個網頁是類似的形式，我們稱之為大尺寸頁眉，即這整個區域都是頁眉的區域。
這其中我們又可以細分為：全局導航欄、全屏圖片和形象文案部分。
我們順著這個思路繼續分下去，看到這個網頁的首屏部分，包括了全局導航欄、形象文案和社交鏈接。
但具體我們的首屏高度要設計多少呢？這里我們可以參考 w3school 網站的數據。其他的尺寸我們直接忽略掉，剩下的我們看到 1366×768 像素的尺寸是一個最常見的尺寸。
這里我建立了一個 1920X1080 高度的畫板，點擊標記區域的 “視口高度” 將數值改為 768 像素，即可。
右面的畫板上就出現了一個虛線標記的地方，這個就是我們的視口高度。
有很多小伙伴問我，老師什么是主頁？什么是著陸頁？它們是相同類型的東西嗎？答案肯定是否定的。
我們以這個網頁為例，它是一個游戲的專題頁面，并不是這個網頁的主頁。
而是這個網頁的著陸頁，用戶點擊搜索推廣、信息流或其他形式的廣告打開的第一個頁面。著陸頁可以是網站上的一個頁面，也有直接把主頁當作著陸頁使用的情況。
進入的才是這個網頁真正的主頁部分。
如果還不理解，我們可以一本書籍為例。這個書籍的封面可以理解為首頁。而它內部的每一個頁面都可以理解為著陸頁。每個頁面都有自己專門的關鍵詞，這樣就不需要用戶，每次都是從首頁進入了，方便用戶使用。
著陸頁可以著重用來介紹專題活動或者產品。
這個著陸頁作為整個這個網站的介紹專題頁出現。用戶在搜索時，可以根據關鍵詞直接搜索到這個網頁。
這個著陸頁也同樣是起著介紹專題的作用。
著陸頁也常被用介紹產品，這樣我們在搜索這個產品的時候，就可以更快的找到了。
很多情況下，網頁首屏的形式不斷地被強調，而首屏的功能性卻總是被忽略。這樣就會出現影響用戶使用的情況，因為網頁最重要的作用就是傳遞和收集信息。
所以設計師在設計一個網頁的首屏部分時，應該更多的去考慮這個網頁想要的提供的功能是什么，而不是一味的追求形式感。當然不同的行業，所要求的網頁的功能也是不同的。接下來的部分我們主要來探討一下這個問題。
一個網頁主要受到三個因素的影響。行業、功能和形式。這三個元素又在互相影響。
首先，行業決定了功能性。我們用醫療這個大行業下的，醫院類型、保健類型和醫學院類型的網頁來說明。
首先我們來看醫院類型的網頁，這種特定的行業類型，要求的網頁功能就會比較全面。
首先就是為了方便用戶提供的預約功能。
在這個基礎上，網頁中還會加入導航功能，這是為了讓用戶更容易去找到這家醫院。
網頁設計者還會添加問診功能來方便用戶直接進行查詢。
這個網頁我們就看得更加詳細了，同樣是添加了一個問診功能。
我們來總結一下，除了最基本的形象功能外，醫院類型的網頁還添加了預約功能、客服功能、導航功能和問診功能，其本質都是為了可以更好的服務客戶。
到了保健類型的網頁時，這個功能就會相應的發生變化，由于是保健的性質，更多是從招攬客戶這個點而出發的。
所以這類的網頁，雖然同屬醫療行業，卻有了不同的功能，這里更多的是發揮著這個網頁的形象功能，增加信賴感。
這個網頁則是直接把服務流程放在了首屏部分，可以讓用戶最容易地理解整個服務流程。
這個網頁也是同樣的設計邏輯，通過展示形象來吸引用戶。
保健行業的網頁，幾乎都存在著預約功能，這樣主要是提供了一個用戶和商家互動的渠道，也是契合這類型行業的實際需求。
最后我們來看一下，醫療學校類型的網頁。
因為是屬于教育行業，所以更多是一個形象功能的展示。
這個網頁是一個護士的招聘網站，他就用過輪播視頻的方式，讓用戶能最直觀地感受到護士這個職業的內容和價值。
教育行業的網頁，則更多的是一個形象功能，向客戶傳遞自己的價值觀。
前面說了行業決定功能，以此類推，功能確定著形式，我們主要以旅行行業的網頁進行說明。
這個網頁主要是向用戶展示環境以及服務，也就是我們前面說的形象功能，所以在設計的時候直接做了一個全屏的形式，最好地向用戶展示自己的信息。
這個網頁也是同樣的功能，展示自己的形象，將自己的景色展示出來，這樣可以讓用戶最直觀的看到。
這里則是在展示形象功能的基礎上，添加了一個預定的功能，網頁的形式也發生了一定的改變。
這里還可以將預定功能的形式放在頁眉和主欄的交界處，創造一定的層次感。
這是一個酒店的網頁，在設計的時候，添加了一個銷售的功能，這樣在設計的時候網頁形式也相應的進行調整。
而最后到了形式的部分，它并不決定任何事情，而是反過來促進行業。
化妝品的行業對網頁的美觀度要求很高，當我們瀏覽到這樣的網頁時，并不會增加我們購買的欲望，甚至這樣的網頁起到的是一個反作用。
而當我們就瀏覽到這樣的化妝品的網頁時，他是可以提升我們購買力的。
我們放在一起對比一下，是不是孰優孰劣就一目了然了。前面我們說了，行業決定著功能，功能決定著形式，形式反過來促進行業。所以最終呈現給用戶的網頁是一個多方綜合的結果。
在確定了行業和功能的前提下，就需要我們多去了解網頁的設計形式有哪些。這里，給大家介紹一下現在時下流行的設計形式——等分屏式。
等分屏式很容易理解，就是將網頁一分為二，AB 兩個部分，它們既可以展示相同的信息，也可以展示不同的信息。以這種形式設計的網頁，被稱為雙專欄型的網頁。
最常見的形式為一半圖片，一半文字。這就類似于我們的畫冊結構—— 圖字組合。
第二種形式則是，左右都有圖片，它們既可以說明同一件事情，也可以截然不同—— 圖圖組合。
第三個則是大圖小圖的對比形式，這種形式會賦予網頁一定的藝術感和時尚感 —— 大小圖組合。
圖字組合的形式，和我們在觀看畫冊習慣基本相同，一半圖片一半文字，可以很好的傳遞出網頁的信息，方便用戶理解。
這個婚戒的網頁，使用這個形式，更加增添了高級感。
它們也是可以左右進行一個對調的，這個網頁同樣是依靠這種形式，傳遞出一種簡約高級的感覺。
這個網頁使用的是圖圖組合的形式，左右照片連貫，講述的是一件事情，給用戶一定的聯想和視覺沖擊力。
這里左右選擇的是一個關聯性的圖片， 創造了一定的故事性，同時也傳遞出來這個網頁的產品。
大小圖組合，更加可以凸顯出來網頁的時尚感。
上述的三種組合，并不是永恒一成不變的，就拿圖圖組合來說，我們可以通過移動網頁的分割線，創造出很多形式?？梢赃x擇縮小圖片的范圍，更多的去展示文字的信息。
也可以選擇放大圖片，這些大家都可以根據實際的需求進行操作。
大小圖的組合，也可以不局限于規規矩矩的排列形式。
我們也可以在規則內，任意移動小圖來創造出新的感覺出來。甚至可以將小圖拆分，創造出更加活潑的版面結構出來。
這個飾品的網頁就是利用這種形式，多角度的展示了自己的飾品。
這個網頁則是用這種形式，創造出一定的故事性，提高用戶繼續瀏覽這個網頁的興趣。
我們也可以更進一步的，把大圖也調整，重新布局在頁面中，就可以創造出更多的版面形式了。
使用這個形式的網頁，提升這個網頁的活潑度和設計感。
這樣調整了圖字組合和大小圖組合，我們就可以得到了 5 種完全不同的形式網頁了。
通過上面的思路，我們也可以嘗試去結合不同的組合，也可以創造出很多新的形式。更多的組合形式就需要小伙伴們自己去嘗試和發現了。
到這里大家有沒有一個感受，就是網頁設計其實是可以非常靈活的，形式也是多種多樣。
文章來源：優設 作者：研習社
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品設計的初期，為了讓產品覆蓋到更多終端，需要對網頁設計進行響應式和自適應設計，制定界面適配規則時，你是否也有過如下疑問
寬度單位我是用百分比還是px？還是rem？區別是什么？
什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素？瀏覽器窗口大小和設備大小和分辨率大小區是什么區別？
什么是響應式網站，自適應又是什么？兩者有何區別和聯系？
百分比寬度布局和流式布局和前者的關系是什么？
既然響應式這么流行，為何淘寶、京東等沒有去做，而是單獨開發了一個移動端版？這里面有那些坑需要避開？
歷史長廊
在早期，硬件設備落后，網頁使用的是絕對靜態布局為主，絕對固定寬度的布局被稱為是靜態布局（StaticLayout），也有叫固定布局（Fixed Layout）。
后隨時代變遷，技術發展。因瀏覽器的增多，開發者們忙于兼容各種瀏覽器。在這個期間，實際已經有了針對各設備適配的解決方案，只是未成為主流，這種新布局方式叫自適應布局（Adaptive Web Design，簡稱AWD）。
在當時，大多指的就是寬度自適應布局。在這種新思想下，又出現了兩派的具體解決方案：百分比寬度布局和流體式布局（Fluid Layout）。
在當時，大家都還沒有響應式布局的概念，但此時出現了一個新的詞--漸進增強。漸進增強出現后，另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子：gmail和qqmail。這兩個都是百分比寬度布局，都屬于自適應布局，但有區別。
qqmail就是css hack的完美體現，你用任何一個瀏覽器，幾乎可以看到同一個樣子的郵箱，為的是用戶體驗統一。gmail則使用了漸進增強，你的瀏覽器越新越強，你看到的效果就越好，為的是用戶體驗增強。再后來，Google發布了Android，移動互聯網爆發，html5標準發布。
互聯網大戰從PC打到了手機。手機雖然屏幕變小了，但是卻提供了更豐富的功能，用戶要求不斷提高，網站更加看重的是用戶體驗了，所以，谷歌式的漸進增強被廣泛認可，結合自適應的思想，出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。
描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等，以適應不同設備。
現如今，為何需要考慮多設備的兼顧呢，依然是因為時代發展與生活方式的變遷：
即便是PC或Mac用戶，有查顯示只有一半的人會將瀏覽器全屏顯示，而剩下的一般人使用多大的瀏覽器，很難預知；
臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加，“主流設備”的概念正在消失；
屏幕分辨率正飛速發展，同一張圖片在不同設備上看起來，大小可能天差地別。
結合自身產品用戶訪問瀏覽器分辨率
鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。
因此我們需要在了解基本布局方式的特征下，選擇適合自身產品的布局實現方式。
靜態式、自適應、流體式、響應式布局，A+R混合布局的特點對比如下
靜態式布局：
窗口縮小后內容被遮擋時，拖動滾動條顯示布局。不管在哪種設備，哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。
自適應布局：
用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。
分別為不同的屏幕分辨率設備設計不同的樣式布局，相當于多個靜態布局組成的一個系列合集，每個靜態布局對應一個屏幕分辨率范圍，頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小，當可視窗口改變時，不會出現橫向滾動條，UI，圖片，文字會自動縮放，元素內容、布局、交互方式基本不變。
彈性布局：
以百分比作為頁面的基本單位，可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度，并能完美利用有效空間展現最佳效果。
流體式布局：
屬于自適應的一個子集，也是通過百分比自動適配設備屏幕分辨率和可視窗口大小，不同于百分比自適應的是隨著窗口大小的改變，頁面的布局會發生小的變化，可以進行適配調整，這個正好與自適應相補。
響應式布局：
如果從廣義上講，響應式布局實際上就是更好、更機智、更靈活的去實現自適應，他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性（如寬高）的變化。
頁面的設計和開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和刪格、布局、圖片、css media query的使用等。
狹義上講，響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
R和A上的區別
當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。
他們之間主要的區別是DOM結構，當采用響應式思維開發時，HTML代碼在各種情況下都會一樣（除非你用JS移除某些DOM節點），而在自適應開發中我們可能會有不一樣的代碼結構和體驗。
R采用流體＋斷點，在斷點之間，頁面依然會隨窗口大小自動縮放（通過fluid grid），直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始（通常采用mobile first策略），所以舊的網站要做RWD很可能要完全重建。
A只在針對幾種分辨率（如320，480，760，960，1200，1600px）進行優化，在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站（desktop version）而對于更小的分辨率做針對性的優化（適應），減小重構的成本。
兩種設計思維都是有效的，需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計，例如通過自適應開發來構建定制化體驗。
兩種方法各有利弊，但是如果同時使用它們到底會得到什么呢？A+R模型結合了基于單個主要臨界點的自適應和響應式方法。
混合式布局就是為不同終端設備的屏幕分辨率定義布局（適配各種尺寸的PC、手機、穿戴設備等等），在每個布局中，頁面元素隨著窗口調整而自動適配，混合了百分比、像素為基本單位的組合方式?？梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。
自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低，但拓展性比較差；而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。
很多時候，單一方式的布局響應無法滿足理想效果，需要結合多種組合方式，但原則上盡可能是保持簡單輕巧，而且同一斷點內（發生布局改變的臨界點稱之為斷點，后面內容會講到）保持統一邏輯。
否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式，非等分的多欄結構布局則需要采用混合布局的實現方式。
選型
如何考慮實踐過程中的判斷呢。一是看應用場景，二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類。現在的CSS框架基本都具備響應性。
但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上，識別UA，渲染不同版本的模板，組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。
當各個版本間的差異很大時，維護成本很可能會大到無法接受。即便分開做，架構上也要調整，后端服務化，應用層app化。
根據不同公司的技術特點，調整的成本也難講是否可行。對于大型站，分開做更清晰，同時用響應式組件解決復用、功能同步的問題?？傊?，根據場景響應式可以從各種層面，各種粒度上做。這是現代web開發的特點。
建議開發一套響應式電腦網站（過渡到平板端，不過渡到手機端）和開發一套響應式手機端網站（過渡到平板端以下的尺寸，不過渡到平板端）響應式布局有可能造成冗余的代碼較多，對研發的要求也更高，比如如何更好地讓圖片，適配，UI動畫自適應各種布局。
大站還是要考慮數據計算和承載的問題，會對桌面和移動端輸出不同數據，減輕壓力。
實踐與技巧
首先，我們需要了解幾種分辨率的差別。
ps：原生應用可查詢橫縱兩個方向的像素密度，通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率
以一個SaaS類后臺產品為例，對于基本流量來自Web端網頁的產品而言，需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況，數據來源百度統計，如圖所示：
如上所述，選擇適配方式時，設計目標為：區分web與pad端可共享的設計布局大于手機端，且產品規劃上web端為主流量來源，pad端屬于短期兼顧?？紤]技術維護成本與開發成本的平衡，于是判斷需要選擇A+R模式來完成產品的跨端設計。
自適應（A）方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點，根據全局統計信息定義，我們會得到一些相似處：
左側的可視區代表整個屏幕小于960px時的具體布局和內容
右側的可視區代表整個屏幕大于等于960px時的另一種布局
在使用響應式（R）技術時，我們可以利用主要臨界點創建兩個互不相同的體驗情景，每種體驗里，我們都可以在可用空間內定義二級臨界點去調整布局。
通過結合自適應和響應的方法，我們得到A+R模型。利用自適應技術，我們將致力于體驗和功能，作出兩種不同的情景設計。使用響應式組件，我們可以處理上下文內的UI組件和布局。
這種設計方法要求設計師真正了解他們想要提供的體驗，以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的，你的產品將具有很強的靈活性，但同時也很復雜。
因為你要處理不同的代碼庫和環境（非強制性）,Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站，則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。
刪格
柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言，這是一項十分有效的輔助手段。
1. 列和槽（Columns and Gutters）列（Column）用于對齊內容。其中的槽（Gutter）是指相鄰列之間的空間，把控頁面留白,有助于分隔內容。
2. 頁面邊距（Side Margins）頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值，這些值決定了每個屏幕尺寸的最小呼吸空間。
3，用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分，將內容排列在4-4-4或3-3-3-3大小的文本框中，也有部分設計系統采用來24列的形式，如Ant-D
4，斷點是指屏幕尺寸的特定范圍，列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內，布局會根據可用的屏幕尺寸重新調整，以獲得最佳的布局視圖。
如果較小的屏幕有足夠的可用空間容納內容，則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示，該列將垂直放置圖文內容。
5，網格規則，列跟槽的寬度是以網格作為基本單位來做增減，所以應該先定義好柵格的原子單位，“網紅款”8點網格指的是設計頁面時，也應該遵循8點規律。值得注意的是，列跟槽的值盡量取8的倍數，但不是非得是8的倍數。
產品中各類元素應該遵循這個倍數原則（圖標、組件大小等），不同的設計系統根據自身需求，設定這個規則。例如在Material Design中使用的是2X網格。
6.流體柵格與混合刪格
流體柵格有不同寬度的列，固定的槽和固定的邊距。流體柵格有靈活的內容寬度，根據屏幕大小變化在流體柵格中，列可以增長或收縮以適應可用空間。
混合柵格既有不同的寬度，也有固定寬度。在現代布局中，一些元素超出了網格邊緣，與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。
如果內容寬度大于可用的屏幕尺寸，那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格，以充分適應內容。
設計需在技術方案前介入，根據你的產品特點，進行設計方案評估，可借助的手段有刪格，網格規則等，設計斷點規則時，需關注設備的常見系統分辨率。
移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量，這些差別是可以通過響應式設計來解決的。事實上，你可以認為如果一種設計不能兼顧兩種平臺的主要差別，就不能算是合格的響應式設計。
但是，如果確實想要處理好平臺間的所有差異，我們就回到了原點：進行兩種不同的設計或者使用A+R的模型，在尋求合適的過程中，關注技術的革新。
A與B不是硬幣的正反面，它們為了解決同一個問題而生，是同一種思想的延伸。
文章來源：站酷 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：UI設計師在日常工作中經常會進行Banner的設計，Banner代指任何投放于線上的各種尺寸的廣告圖，在設計Banner圖時，需要考慮到多種因素，內容、受眾、效果等等；本文作者分享了關于Banner應用和交互設計，我們一起來了解一下。
Banner是每個UI設計師家常便飯的項目，聊聊banner的那些事。
banner翻譯成中文是橫幅或旗幟，為了體現產品的中心意旨，利用鮮明的內容去表達最主要的情感思想或宣傳中心，從而給整個產品起到宣傳的效果。
在互聯網時代，banner被廣泛應用在pc網頁、app設計等互聯網平臺間，作為設計師做一張banner乃家常便飯，如何才能設計一張高質量的banner呢？
創意新穎、風格貼切的banner能第一時間吸引用戶眼球，有利于banner的觸達，帶來高效率的點擊，創造更高的價值。
關鍵詞：文藝、氣質、素雅、安靜、格調。
畫面大量的留白；色彩以高級灰為主，飽和度和純度低，明度高；字體多采用襯線體，標題文案突出，輔助文案偏小，整體突出高級感；畫面點綴多采用精細的線條。
關鍵詞：高冷、時尚、大氣、品質。
色彩多以黑白灰；文字清晰簡潔內容少；焦點主圖很大，突出表現細節；畫面精簡，無點綴物。
關鍵詞：傳統、中國風、意境、韻律。
畫面采用對稱式構圖，文字排版有采用豎排；色彩上采用中國傳統顏色，采用物體的固有色，避免艷麗刺激的色彩；字體多采用書法字體，書法主要分為篆、隸、楷、行、草五種書體；圖形活用中國風元素，剪紙、燈籠、折扇、祥云、梅花、水墨等作為輔助元素。
關鍵詞：青春、活力、年輕、動感、時尚。
色彩飽和度和純度高；排版多樣性，視覺沖擊力強；運用幾何圖形裝飾在產品、背景、氛圍裝飾上。
關鍵詞：可愛、甜美、卡哇伊、Q、呆萌。
色彩鮮亮透明，營造軟萌可愛的感覺；字體采用少年字體、手寫字體、卡通字體；點綴元素多使用卡通小元素。
關鍵詞：促銷、活動、節日、熱鬧。
畫面整體氛圍熱鬧，內容飽滿，很少留白；色彩豐富，紅色、黃色、橙色、紫色偏多；主標題文字偏大，字體剛硬，視覺沖擊力強，點綴元素有光效、舞臺、五彩的漸變、沖擊性的線條或多邊形等。
關鍵詞：未來、科技。
科技類banner，文字和背景圖非常具有科技感，畫面具有空間感；色彩以冷色調為主，常見有藍色、紫色、黑色；點綴元素有光效、金屬、線條、光點。
關鍵詞：場景、趣味、手繪感、扁平。
畫面具有故事性和趣味性；色彩扁平的配色，上色沒有高光和陰影；字體偏向年輕化，圓潤、無襯線體字體；點綴元素以涂鴉的小裝飾為主。
1）創意監控
產品在用戶心中需要良好的正面形象，banner傳播對內容需要進行嚴格控制，把握好政治導向關、價值取向關和格調品味關。廣告內容需真實準確，不引起歧義。
2）情景約束
用戶體驗產品需要有愉悅感，banner需呈現積極陽光的正面情景，素材圖片傳達正向的情緒和氛圍。
3）版權約束
避免法律糾紛，圖片素材、文字等內容應該要有版權，banner中不使用來源不明的字體、圖片、視頻等素材。
1）確定文案
文案盡量簡潔明了，用詞準確、文案通順、語言生動。用詞準確是最基本要求，活動、權益、業務表述文字內容符合業務方需求，無錯別字。文案通順、表述清晰，適合產品目標群體閱讀與理解。語言生動、精簡、有吸引力，集中核心訴求點，亮點突出。
1）板式
排版結構：
banner由多元素組成，banner內在包含：色彩、構圖、風格等，外在包括文案、產品配圖、背景、點綴這幾個部分組成，設計過程通過拆分一步步執行，思路清晰且效率高。
構圖方式：
對齊構圖
畫面中相關內容遵循對齊原則，便于用戶視線快速瀏覽，接受重要信息。常見的對齊方式左對齊、右對齊、居中對齊，建議banner中只使用一種對齊方式，多種對齊方式用戶閱讀視線分散，增加用戶認知成本。
聚攏構圖
畫面內容拆分為文字區、圖片區、氛圍區，相關內容聚集在一個區域，其次聚焦一個視覺重點，弱化其他元素，視覺出現層級。
留白構圖
根據產品頁面留出適當的安全邊距，保證banner在適配過程中不會出現重要信息看不全的情況。排版時，元素之間需要留出空隙，畫面看起來有透氣感，減少用戶認知信息的負擔。
降噪構圖
色彩、文字的種類不宜過多，點綴圖形運用不合理，會分散讀者注意力，成為用戶閱讀的“噪音”。
重復構圖
排版注意整體設計的一致性和連貫性，避免出現不同類型的視覺元素，使畫面出現跳躍。
對比構圖
banner中重點信息加大與周圍元素間的視覺差異，通過顏色對比、字體的大小字重對比、構成的面積對比等方式，以便于用戶快速獲取重點信息，豐富banner的視覺層級，吸引用戶。
構圖樣式：
對稱構圖
通過對畫面的平均分割保證畫面的平衡，對稱構圖給人有力、穩固的視覺感受。
居中構圖
居中構圖很好的突出主題，畫面中規中矩，活躍感較弱；用戶視覺焦點會聚集中心位置，視覺焦點需要重點刻畫，周圍元素弱化處理。
左右構圖
左右構圖分為2種，左文右圖、左圖右文。2種構圖樣式，區別在于用戶的瀏覽過程中是先看文字還是先看圖片。
當配圖示意不明確時，建議使用左文右圖的排版。
配圖主要是根據文案內容繪制的輔助圖形，用戶只看圖無法明確活動內容，建議采用左文右圖的板式。根據“F形”閱讀模式，瀏覽習慣往往從左向右從上往下，將文字信息放在左邊有助于用戶快速瀏覽，獲取重點信息。
當配圖示意明確，圖比文字更加重要時，建議使用左圖右文的排版。
用戶根據圖片即可明白活動內容，運營或業務方希望有吸引力的活動圖片獲取用戶的注意力。
衍生構圖
基于banner受限尺寸和高度，會衍生出一些構圖方式，例如放射性構圖、傾斜構圖等。不規則的構圖，設計上具有層次感，豐富的視覺呈現給人眼前一亮，更容易吸引用戶眼球。
構成比例
banner大多為左右排版，圖文比例4:6，接近黃金分割比例0.618，文案標題比例約2:1。畫面中文案占比一定要大于配圖，用戶更關注是是內容本身。
2）配色
色彩體系：
暖色系
暖色系主要由紅、黃、橙等構成的色調。容喲聯想到陽光、火焰、熱血等場景，給用戶積極、活潑、溫暖的感覺。暖色系色彩的飽和度越高，溫暖屬性越突出，用于電商活動，渲染氣氛。
冷色系
冷色系主要由青、藍等構成的色調。容易聯想到海洋、冰雪等場景，給用戶寒冷等感覺，適宜表現恬靜、低沉、嚴肅、理性的內容，比如科技類產品。
同色系
同色系又稱單色，這種色系的搭配在產品本身顏色比較統一的情況下，提取產品鄰近色，作為畫面的搭配色，讓整體畫面變得統一和諧。
類似色系
類似色相比同色系，它具有豐富性和可變化性，基于banner整體的主色調以后通過添加與主色相近的輔助色，是整個畫面變得豐富活躍起來，同時這些配色方式也相對容易。
對比色系
對比色系，色相環上相距120度-180度之間的2種顏色（180度則為互補色），對比色之間的搭配能夠給畫面帶來華麗、跳躍、濃郁的視覺美感，高純度、高明度、等面積的搭配，會產生強烈的刺激感，干擾用戶視覺體驗。畫面中往往會考慮補色之間的面積比例、純度比例、明度比例、空間間隔的比例，平衡畫面之間的視覺感。
創新配色
除了基本的色系配色系外，還可以嘗試更多的配色風格。畫面中有目的地運用色彩元素，豐富畫面的色調。
色彩比例：
banner色彩需要考慮頁面統一性；banner尺寸較小，信息色彩不宜過多，2-3種即可。畫面主要由主色、輔色、點綴色組成，色彩的黃金法則60:30:10的法則，60%左右的主色、30%左右的輔助色、10%左右的點綴色。
3）字體
字體類型：
無襯線體
粗的黑體，具有官方嚴肅氣質，自帶有力量感，視覺沖擊強烈，與速度線條、碎片、劃痕等設計手法十分搭配。細的黑體，具有年輕、簡約、細致的感覺。無襯線體易讀性較強，常用于科技類banner中。
襯線體
襯線體裝飾性較強，給人帶來活潑、輕松的感覺。比較適用于文化、文藝、美食、女性、時尚等行業。
圓體/卡通字體
具有趣味性和活潑感，適用于兒童、寵物類、休閑食品、家居等行業。
書法體
有韻味和藝術感，視覺張力豐富，適用于中國風、藝術感等畫面。硬筆書法字體：優雅、有親切感，適合傳統、文化等畫面。
字體樣式：
考慮字體大小、字重、顏色。文案有主文案和副文案之分，需要有對比性。字體的顏色選擇需要考慮與背景色的搭配效果、banner主題間的關聯，選擇合適的顏色能凸顯文案。
4）輔助圖形
幾何圖形：
幾何圖形是banner設計中常見的輔助元素，它的多樣性和簡約性設計師十分著迷。幾何圖形可以創作無線的可能，用戶對其有意無意地進行自我詮釋。
圓形
圓形象征著圓滿、融合、自然、和諧、無窮，在設計中具有非常強的包容性，由于其自身的可拓展性，將圓形進行拉伸、疊加、重復可獲取豐富的圖形。
三角形
三角形具有方向感、變化感，它的銳利給以垂直、剛強、莊嚴、向上的感覺，其長度有穿透感，象征崇高和無限。
方形
方形具有對稱、有序、平靜、專業屬性，給人穩定安全統一感。
多邊形
多邊形的形狀會給人帶來穩重感，通過多邊形凸顯產品的尊貴感。
不規則圖形
不規則的圖形營造畫面的氛圍，突出主體元素，激發用戶點擊欲望。
流暢的線條：
流暢的線條給畫面帶來韻律感。
立體幾何圖：
立體幾何載體讓整體畫面格調顯得品質高。
5）動效
展現商品質感和工藝或者展示同商品不同狀態時，動態banner比靜態banner點擊率高。呈現商品多樣性和系列感需要靜態廣告。
1）傳達
呈現出來的畫面鮮明地表達活動主旨，文案內容，可用性。
2）美感
板式設計、配色、字體設計、風格、插圖、點綴圖案以及動效這些運用是否合理。
3）效率
整體復雜程度，后期banner修改和加工工作難度，可不可重復利用。
4）創意
畫面主題是否突出，具有吸引力，刺激用戶點擊。
現實中多是單張banner圖，而互聯網產品中大多采用多張輪播banner。有限的屏幕內采用多張輪播提高空間的利用率，其次用戶長時間盯單一廣告會疲憊，輪播banner有利于吸引用戶注意，激發用戶探索欲望。
電商產品用得比較多，全圓角矩形或不規則矩形，此類banner運用在促銷活動中，實效性特別強。
運營強度較弱，banner在頁面權重較低的專題活動會用到白底模版化banner。排版左文右圖，內容由主標題、副標題和小插圖組成，例如支付寶首頁中間位置banner。
需要吸引用戶來參與運營活動，可以采用懸浮圖標的形式，吸引用戶的注意力，對頁面布局不產生影響。
用于產品中同一個功能模塊，多個不同入口，或者不同服務類型的商品入口。商城或者熱門板塊使用。包括：兩個入口、三個入口、四個入口、五個入口、六個入口。
1）功能
banner在頁面中所承擔的責任是什么，活動運營、功能區入口、系統公告、還是第三方廣告。
2）數量
banner位置所承載內容數量是多少，同時存在幾個內容。
3）頻率
banner采用的是靜態banner還是輪播的方式。固定banner多久更換一次，輪播形式的banner，幾個banner輪播，輪播的速率是多少。
4）層級
banner在頁面中與其他功能區相比，banner位所屬的信息層級是什么樣。
1）靜態/動態
靜態banner。如果內容中有一個非常重量級的，其他的都是差不多的不怎么重要的，可以考慮只將重量級內容放在顯眼位置的Banner上，且靜態不輪播，其余內容放在別的運營位里。
動態輪播。輪播banner圖注意幀數不宜過多，加上輪播指示器，提示用戶banner的個數以及banner可以左右滑動。
2）尺寸
屏幕占比大的banner有更強的營銷感和氛圍感，常見電商平臺的頂部banner。
屏幕占比小的banner會低調些，不會干擾用戶閱讀瀏覽頁面，例如金融類平臺。
1）圖片大小
保證產品啟動加載時間和操作流暢，上傳廣告圖的大小建議在300kb以內。
2）圖片格式
輸出的格式：JPG、PNG、JPEG、BMP、GIF。
文章來源：人人都是產品經理 作者：界白
藍藍設計( 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
B 端的一些業務場景中常會使用地圖元素來展示信息，但是 B 端的頁面情況較為復雜多變，與 C 端的百度地圖等使用場景以及業務具有一定的差異性。在工作中，我們對于地圖頁面的布局、交互統一性上的研究還是較少，所以我進行了業務場景下的列表與地圖的關系的設計沉淀。
地圖作為一種將地理信息以二維的手段展示的圖像。日常紙質地圖常常會分為兩個模塊：地圖信息、列表信息。對于現 web 端的產品，地圖也保留兩者的信息區域并進行不同的布局排布，如百度地圖等。針對 web 端的產品，因為有交互形式的出現，所以在地圖上會存在更多的信息展示。
地圖信息：
列表信息：
針對現在工作、學習過程中遇到過的具有地圖元素的業務，我進行了整理并總結出了一些不同場景下存在情況以及現業務階段存在的問題。
首先我總結了列表的信息與地圖信息的關系，一共為三種不同的情況。
隨后，我針對打點詳情信息的復雜度進行了三種程度的區分：簡單；復雜；極復雜（較少）
最后，我走查線上業務版本發現了一些現地圖元素的一些問題。
1. 排版不統一
針對地圖的兩種布局，使用較為隨意，并沒有規定其合適的場景使用不同的排版形式。
2. 功能入口的交互不統一
針對于地圖上的列表，常有功能有定位、查看詳情，以及一些特殊場景下的特殊功能入口。然而，這些功能其入口常常不統一，點擊列表，有時承載的是查看詳情，有時是地圖定位、甚者點擊卡片不承載任何功能入口。
3. 地圖打點與列表的對應混亂
有時地圖上會存在多個列表的情況下，從而導致列表信息與地圖上打點信息對應的混亂，這樣會讓用戶感到信息的不明確。
根據以上存在的問題以及情況，我們總結了兩點設計原則，針對地圖模塊進行了修改與推進。
地圖中常包含了四類元素：列表：主要信息、地圖、地圖打點、打點的詳情信息。
針對以上問題，我們從三個點進行了整理分析：列表的交互形式、地圖與列表的整體布局、地圖打點的詳情信息。
列表交互：針對地圖列表，點擊列表的主要交互操作分為三種
地圖布局：為了清晰整體的地圖層級，我們將列表與地圖分為了兩種不同的形式
并且，根據整體的布局結構，我們將這兩種布局形式中包含的隱形的邏輯從而進行了區分，將地圖與列表進行了主從關系的分配。針對于第一種形式，地圖為底，列表作為具有陰影的第二層結構，其包含了隱形的地圖為主、列表為從的邏輯形式；
而針對列表與地圖的左右排布結構而言，因為兩者處于同其級別的元素，更具左右、上下的閱讀習慣，其包含了列表為主、地圖為從的邏輯形式。
而后，根據整體布局的邏輯形式，我們將上文總結的三種不同業務場景進行了分配，并提出了使用建議。
針對于地圖（主）/列表（從）的布局情況：
針對列表（主）/地圖（從）的布局情況：
打點的詳情信息：上文我們根據打點的詳情信息分成了三類：
針對這三種情況，我們提出了三種情況下使用的交互形式。
對于簡單的信息來說，可以推薦使用氣泡彈窗的形式；針對復雜的信息展示嘗試用右側抽屜的形式以及替換當前列表；針對極復雜的場景如需要展示畫布或者列表的話可以考慮底部抽屜的展示形式。
針對氣泡彈窗以及右側抽屜，我們也提出簡單的使用建議。
氣泡彈窗：
右側抽屜：
最后，根據上述總結的內容，我繪制了一張表格簡單的流程圖供大家快速的參考。以上結論，僅僅是一個初步的總結，對于更加的細節的點還需要繼續進行研究迭代，例如簡單于復雜的界限等。
文章來源：優設 作者：土撥鼠
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
接下來為大家分享一下我收集到的案例：
藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。
--網站建設UI設計--
導語：TMS（運輸管理系統）是一個物流運輸平臺，它是供應鏈管理系統（SCM）的一部分。廣義的TMS平臺涉及面較廣，不同企業的業務模式不一樣。本文所探討的TMS是具有實際運營能力的第三方物流運營平臺，它主要是一種通過技術的手段整合社會物流信息，優化配置物流資源，幫助貨主降低物流成本并提供管理運輸業務。下面從業務描述、系統架構和功能模塊三個方面作一個簡單的分析，一方面是梳理業務的作業場景，另一方面宏觀認識產品的整體框架，分析具體功能解決的問題點。
通常來說，整個運輸階段分為三個階段來完成：
貨主提出運輸需求，建立任務訂單推給運營方。
客戶下訂單的方式有很多，比如電話、郵件、發信息、TMS系統、其他平臺等。提出的任務需求，也稱客戶訂單，它是貨主和運營方的交互憑證，承擔著需求描述、運單跟蹤、應收結算等功能。
貨主訂單主要包含4方面的信息，收發貨地信息、貨物信息、用車信息、增值服務。
運營方按照一定的運輸規則處理，做這個規則處理的過程，一般稱之為計劃，計劃的形式有多種，主要有拼單、拆單、規劃線路圖、地圖合單等，然后再將計劃好的這個訂單分派給合適的承運方。
最常見的手段是拼單，又稱零擔運輸。將多個貨主訂單合并拼成一個派車訂單，一般規則的處理條件有：訂單量、裝載能力、價格、路線、發貨時間、收貨時間等。
計劃的手段除零擔集貨外，還有大單拆分、長單分段等，主要目的來達到成本分攤的作用。計劃的手段有智能計算，和人工處理+半自動計算。
承運方接受訂單，并將訂單分配給司機，由司機執行完成運輸任務，這個階段又稱之為調度。運營方將計劃的訂單分配給承運方，生成最終的運輸訂單，它是運營方同下游承運方的唯一標識，這個憑證會關聯到訂單的跟蹤監控和應付結算等功能。
基礎資料的建立，對TMS的需求任務單和調度非常重要，只有建立了合作關系，才能在客戶需求訂單上選擇到正確（有合作關系）的客戶，在計劃調度的時候才能匹配到正確（有合作關系）的承運方。
錄入貨主、承運方的信息，以便于后期訂單的生成， 這些信息的維護可以保證每個訂單都有歸屬客戶，方便訂單的管理。
1）貨主管理
客戶資料會有專門的CRM維護。
2）承運方管理
有承運商、自營車輛和2C車主三種。 2C車主，個人司機管理模塊，沒有合作關系。個體司機加入平臺，需要進行注冊認證，只有認證通過后才能給這些司機派發運輸訂單。
司機的信息維護除了注冊認證外，還有在平臺的所有活動數據記錄等。和承運方相比，此前不需要有固定的協議合同，相當于臨時工的概念。
3）用戶管理
運營方用戶之間建立的合作權限關系。
在第一階段，貨主提出用車需求。需求訂單信息包括收發貨人信息、貨物信息、用車信息和增值服務，詳細描述在上面的「業務描述」中有說明。具體到TMS系統中，這里不但只是貨主的信息錄入，它還包括收發貨人信息關聯、地圖定位、里程預估、上下游價格等。
客戶訂單它是貨主和運營方的唯一標識，貨主的訂單狀態有，待計劃、待調度、已調度、等待提貨，取貨中、運輸中、已完成等多個狀態。
客戶需求訂單創建成功以后，就開始進入到運輸業務的第二階段，運營根據一定的規則處理，將訂單進行自營車輛運輸、派送給承運方或者轉給2C車主，這邊的基本流程為：
1）審單
TMS系統對客戶的需求訂單做分析，分析出有問題的訂單，比如信息填寫不完整、地址解析錯誤等。
2）計劃
計劃和調度是運輸業務的第二個階段，它關系到整個運輸的最終成本控制，是整個運輸過程最重要的核心組成部分。
計劃的目的，是為了解決時效優先還是成本優先，更多的作業場景是在這兩者間作一個平衡處理。運營方作計劃的規則處理，會受到以下3個條件約束：
常見的計劃優化手段有：裝載優化、路線優化。 運輸計劃的方式有很多，總之在滿足時效的同時，成本最低是計劃的主要目的，主要手段有三種：
關于城配：
考慮到TMS中訂單量大、位置信息較為復雜，純人力計劃效率低，有時不能夠滿足客戶的需求。
所以一些企業會根據訂單結合計劃承運方作出進一步的優化「智能調度」，利用算法圍繞貨物、車、路線、時間合理規劃策略，實現最優資源的分配方案，完成最終的運輸工作。
3）調度
把計劃的訂單進行派發給相應的承運方，這個過程稱之調度。派發的渠道有三個，分別是自營、合作承運商和2C車主。
承運方接單后，會將調度的信息同步到WMS，包含車輛提貨時間、運送車型等。告知到倉庫的目的 ，可以讓倉庫可以提前備貨，節省提貨時間。下面所說比價計價模式，就是在調度的時候，根據各個承運方給出的報價，會選擇合適的、性價比高的承運方。
4）跟蹤
訂單跟蹤是運輸業務的第三個階段，承運方已經開始執行配送任務，實時跟蹤訂單狀態，并將狀態信息回傳給運營方和貨主。實時獲取訂單的當前狀態，比如位置信息、貨物的溫度等，也方便平臺管理司機，以保障訂單任務的順利完成。
提貨：
跟蹤監控：
簽收：
中轉站：
5）回單
一種發貨的憑證，證明對方已收到貨，也是最終貨主結算的憑證。
收貨方簽收訂單后，司機需要上傳回單并更改狀態完結訂單，考慮到線下是作業，回單的照片清晰、其他敏感信息等原因外，運營方需要再次確認后將回單再返回給貨主。
回單也分電子回單和紙質回單，電子回單：大部分情況下都采用這種，司機將簽收方的訂單，拍照上傳即可；紙質回單，需要將回單寄回給貨主，當然回單還是會掃描記錄到TMS系統中。
在客戶訂單簽收之前，都可以上報異常，上報異常需要對異常情況進行詳細說明，比如貨損損壞情況，進而進行協調處理，界定賠償責任等。
上報異常的渠道可以通過電話聯系運營方，由運營方的客服部門進行對接，異常訂單也會進入到TMS異常管理中，并對異常進行記錄、處理、跟蹤工作。比如上述所說簽收方在簽收的同時發現問題，也可進行異常上報。
根據不同需求維護不同的價格模板，方便使用和管理。上游價格模板，對商家進行收款的計價規則； 下游價格模板，對承運方進行付款的計價規則。
根據制定好的價格模板，規定價格模板的應用條件。對符合該條件的商家套用模板進行計算，價格模板的調用可以從不同維度，比如：線路、商家、貨物類型等。不管下游承運商，還是上游的貨主，不同的客戶都會應用不同的報價模板。
在結算管理中，對生成的訂單費用進行審核，實際業務的變動對最終賬單核算也會有調整，審核無誤后生成最終的賬單，然后由財務人員對照賬單進行上下游的收款和付款。
文章來源：人人都是產品經理 作者：亦果兒
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn