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