互聯(lián)網(wǎng)時(shí)代的人們早就受夠了信息爆炸，我們每天都會(huì)經(jīng)系統(tǒng)推送、應(yīng)用通知、微信、電話、短信等各類渠道收到大量消息。有多久你沒有查收自己的郵箱？就算打開郵件，又有多少推薦內(nèi)容讓你有興趣進(jìn)一步了解？是 EDM 老了沒用了？真正的原因，可能是我們一開始就錯(cuò)誤地忽視了 EDM 設(shè)計(jì)。

對于 95 后以及更年輕的群體來說，EDM 確實(shí)是個(gè)上了年紀(jì)的概念。EDM（Email Direct Marketing）也叫 Email 營銷、電子郵件營銷。企業(yè)向目標(biāo)客戶發(fā)送 EDM 郵件，建立同目標(biāo)客戶的溝通渠道，向其直接傳達(dá)相關(guān)信息，用來促進(jìn)銷售轉(zhuǎn)化。

這個(gè)起源于上世紀(jì) 80 年代中期，正式誕生于 90 年代的早期互聯(lián)網(wǎng)產(chǎn)物現(xiàn)在已經(jīng)三十多歲了。時(shí)至今日，EDM 早已成為了全球公認(rèn)的網(wǎng)絡(luò)營銷重要方法之一，其卓越效果為互聯(lián)網(wǎng)人數(shù)十年的實(shí)踐所證實(shí)。但 EDM 在我國的應(yīng)用還處于非常低級的水平，不僅沒有系統(tǒng)的理論，在實(shí)踐中也存在許多誤區(qū)。

在這樣一個(gè)重視審美與強(qiáng)調(diào)更新及時(shí)的時(shí)代，EDM 郵件樸實(shí)無華的外表與「一旦發(fā)出就固定呈現(xiàn)」的內(nèi)容特質(zhì)顯得有些格格不入。作為用戶體驗(yàn)設(shè)計(jì)師，我們可以做什么讓 EDM 不落伍呢？

避免成為垃圾郵件

首先，我們可以在設(shè)計(jì)層面上避免 EDM 郵件被郵箱軟件識(shí)別為垃圾郵件，不帶敏感詞語或內(nèi)容、淡化商業(yè)廣告色彩、減少數(shù)字與附件使用都有助于降低被郵箱系統(tǒng)屏蔽的風(fēng)險(xiǎn)。我們更可以在全量發(fā)送前，對指定郵箱進(jìn)行小范圍測試以確保郵件發(fā)送成功率。

其次，從其歷史來源來看，早期的 EDM 來源于垃圾郵件，這使人們對其本能地缺乏好感，存在排斥心理。因此 EDM 的節(jié)奏和時(shí)機(jī)必須做好控制，對郵件發(fā)送的各類數(shù)據(jù)做好統(tǒng)計(jì)，掌握用戶的閱讀習(xí)慣，能更好地提升郵件的打開率。

保持最佳郵件格式

郵件內(nèi)容需要設(shè)計(jì)為一定的格式來發(fā)送，常用的郵件格式包括純文本格式、HTML 格式和 Rich Media 格式，或者是這些格式的組合。一般來說，HTML 格式和 Rich Media 格式的電子郵件比純文本格式具有更好的體驗(yàn)效果。但 Rich Media 格式的電子郵件易造成郵件過大，并且無法確保用戶在客戶端均能夠正常顯示，所以在設(shè)計(jì)時(shí)我們優(yōu)先選擇 HTML 格式郵件。

確保跨端體驗(yàn)

與網(wǎng)頁不同，我們無法針對不同設(shè)備做郵件內(nèi)容相應(yīng)的適配設(shè)計(jì)，兼顧設(shè)備特性的通用模版也就成為了設(shè)計(jì)時(shí)的必要關(guān)注點(diǎn)。對用戶來說，一封郵件閱讀體驗(yàn)很差，那么無論郵件的內(nèi)容多么精彩、多么吸引人，最終的結(jié)果也可能只會(huì)被丟棄在一邊。因此，我們通常會(huì)按照移動(dòng)端尺寸對郵件界面進(jìn)行設(shè)計(jì)，注意字體大小、最佳尺寸以及鏈接按鈕的大小等。

除此以外，郵件中鏈接的定義也應(yīng)得到我們充分的重視。由于郵件中的鏈接我們同樣無法預(yù)先針對不同打開設(shè)備進(jìn)行單獨(dú)編輯，在有條件的情況下我們可以對鏈接所跳轉(zhuǎn)的頁面進(jìn)行響應(yīng)式設(shè)計(jì)以確保高質(zhì)量的跨端瀏覽體驗(yàn)，或者我們也可以采用默認(rèn)跳轉(zhuǎn)路徑而后重定向的傳統(tǒng)方式。

與「我」緊密相關(guān)

EDM 營銷與一般的營銷方式最大的區(qū)別是：EDM 是一對一的溝通，讓用戶感覺到尊重，讓他感覺到這是為他所建立并且是他所獨(dú)享的溝通方式。在標(biāo)題、正文的文案上強(qiáng)調(diào)「我」，在內(nèi)容上也應(yīng)如此。用戶在意什么，我們就發(fā)送什么。把握住用戶關(guān)注的信息，幫助用戶收集支持 TA 做決策所需的信息。當(dāng)我們發(fā)送郵件給用戶，給予其操作行為的反饋或提醒時(shí)，不要浪費(fèi)這最好的營銷機(jī)會(huì)。優(yōu)先提供給用戶與之行為或特征相關(guān)的服務(wù)與幫助，其次通過個(gè)性化服務(wù)或產(chǎn)品推薦促進(jìn)購買或注冊轉(zhuǎn)化，有助于我們將營銷機(jī)會(huì)轉(zhuǎn)化為實(shí)際銷售成果。

兼顧質(zhì)量和效率

做好個(gè)性化對 EDM 內(nèi)容模型要求頗高，但從設(shè)計(jì)角度講，我們完全可以以原子設(shè)計(jì)思維實(shí)現(xiàn)郵件內(nèi)容模塊的低成本創(chuàng)建與復(fù)用。以通用設(shè)計(jì)模塊為「殼」，內(nèi)容與組合規(guī)則為「核」，快速響應(yīng) EDM 的運(yùn)營需求。

以上 5 點(diǎn)就是我結(jié)合近期項(xiàng)目經(jīng)驗(yàn)所得。EDM 雖老，但設(shè)計(jì)可以讓 EDM 老而彌新。祝經(jīng)你精心設(shè)計(jì)的 EDM 郵件，一經(jīng)發(fā)出，封封有回應(yīng)

文章來源：優(yōu)設(shè)    作者：魚子醬聊設(shè)計(jì)

這幾天在工作中處理了一個(gè)歷史遺留問題：彈窗適配，幾經(jīng)折騰終于落定發(fā)包。于是我也趁著這個(gè)機(jī)會(huì)把彈窗體系梳理研究了一遍。

我們常見的彈窗有對話框，提示框，有時(shí)候在需求溝通中經(jīng)常會(huì)聽到產(chǎn)品同學(xué)說，給這里加個(gè)彈窗，那里加個(gè)提示框吧。實(shí)際上，這個(gè)彈窗到底該不該加？這個(gè)彈窗承載的是提示說明文字內(nèi)容，還是需要引導(dǎo)用戶下一步操作？接下來我們從彈窗的屬性來聊聊我們的彈窗到底在什么時(shí)候加比較合適？用什么形態(tài)展示體驗(yàn)會(huì)更好？

彈窗體系：模態(tài)與非模態(tài)

模態(tài)彈窗：是指在用戶任務(wù)中，終止了用戶的上一步行為。也就是說，這個(gè)模態(tài)彈窗必須要用戶操作才可以進(jìn)行下一步動(dòng)作。所以在產(chǎn)品設(shè)計(jì)中，我們通常會(huì)用模態(tài)彈窗引導(dǎo)用戶去做我們要他做的操作。

常見的模態(tài)彈窗有這幾種：對話框、動(dòng)作欄、浮層。

對話框：對話框主要是給用戶提供選項(xiàng)、相關(guān)的操作。另外，在一些對話框中，也可以展現(xiàn)圖片、頭像、步驟圖、其它輸入項(xiàng)等。

動(dòng)作欄：常見的動(dòng)作欄一般會(huì)出現(xiàn)屏幕下方，比如選擇某個(gè)內(nèi)容時(shí)候，出現(xiàn)的選擇。

浮層：彈出窗口，浮動(dòng)于頂層窗口，氣泡。

非模態(tài)彈窗：是指不強(qiáng)制用戶操作，他的作用相當(dāng)于內(nèi)容信息提示，他的出現(xiàn)不打擾用戶的當(dāng)前操作，并且有時(shí)間限制，在一定時(shí)間里能自動(dòng)消失。比如「xxx 功能已更新哦」，這種提示是不需要用戶點(diǎn)擊操作，讓用戶看到就可以了。

常見的非模態(tài)彈窗有這幾種：toast/hud、snackbar、notice（通知）

toast/hud：iOS 用戶更習(xí)慣于在中間感知反饋信息，通常在信息提示完 3 秒左右后會(huì)消失，安卓通常會(huì)出現(xiàn)在屏幕頂部或者下部，不會(huì)遮擋主體內(nèi)容。需要注意的是 toast 只有文字，hud 是可以帶有圖標(biāo)的。

snackbar；可以理解為加強(qiáng)版的 Toast

notice：系統(tǒng)消息、通知推送，也是不干擾用戶行為，有消失時(shí)間，是非模態(tài)的彈窗。

什么場景下使用什么彈框

了解完彈窗體系后，我們就可以針對具體場景來看產(chǎn)品同學(xué)說加個(gè)彈窗到底合適不合適？我們可以從下面的幾個(gè)使用場景來看用什么樣的彈窗合適。

1. 重要打斷用戶操作

在一些重要操作，避免用戶操作失誤。不過目前很多人都覺得這類彈框有利有弊，有的地方出現(xiàn)得不合時(shí)宜，打斷了用戶的使用狀態(tài)。所以在設(shè)計(jì)這類彈框時(shí)要非常謹(jǐn)慎，得通過多研究確認(rèn)是否有必要出現(xiàn)。

對話框相對來說比動(dòng)作欄更重要，因?yàn)樵谝曈X中心，更能強(qiáng)烈引起用戶的重視，對于十分重要的內(nèi)容需要打斷用戶上一步任務(wù)的，采用對話框的彈窗，對于不是特別重要信息露出又需要終止用戶上一步動(dòng)作的情況下，一般采用動(dòng)作欄彈框。

2. 定制化廣告彈窗

如功能更新、升級、優(yōu)惠券彈窗。這一類一般是強(qiáng)制用戶看到的，要展示出與眾不同的特色，在視覺上比較突出，會(huì)使用模態(tài)的彈窗浮層形式。

3. 給予一定提示

比如提示用戶狀態(tài)、信息、反饋，確保用戶知曉自己所處的狀態(tài)，并可以做出相應(yīng)的措施。一般使用非模態(tài)的彈窗。

4. 用戶操作反饋

出現(xiàn)在用戶操作完之后的反饋，比如提醒用戶頁面正在加載中、保存成功、已刪除、已刷新等等。

可以不用彈窗的反饋例子：完成頁

比如已支付成功、下載完畢、簽到成功，這一類是告訴你上個(gè)動(dòng)作結(jié)束了，下一步不需要進(jìn)行引導(dǎo)了，這種反饋大多數(shù)都不采用彈窗形式展現(xiàn)了。

需要注意事項(xiàng)

1. 層級關(guān)系

彈框是內(nèi)容和導(dǎo)航的補(bǔ)充，用于通知、操作菜單、成功或加載狀態(tài)的 toast，他是寫在蒙層上面的一層內(nèi)容。

2. 適配方式

下面我們需要了解的是這幾種彈窗在開發(fā)那的實(shí)現(xiàn)形式。我們可以理解為 2 種形式：

一種是開發(fā)直接用系統(tǒng)的接口，缺點(diǎn)是具有不可定制，形式美觀度不夠好。

另一種是開發(fā)用代碼會(huì)單獨(dú)寫出一個(gè)模態(tài)彈框系統(tǒng)，這套系統(tǒng)與整體設(shè)計(jì)語言具有一致性，可以復(fù)用在各個(gè)任務(wù)中，可以定制化設(shè)計(jì)。

需要注意的是，代碼寫出來的模態(tài)樣式要考慮在不同機(jī)型的適配情況，考慮不同機(jī)型的邊界。這個(gè)適配也有兩種實(shí)現(xiàn)形式，一種是固定寬高尺寸，展示在不同機(jī)型尺寸中，另一種是常用的等比例縮放。這個(gè)就需要開發(fā)與設(shè)計(jì)進(jìn)行密切的溝通，能盡量合理地在不同機(jī)型展現(xiàn)更加合適，避免出現(xiàn)極限的情況。

我們是這樣操作的，為了避免尺寸比例混亂的情況，會(huì)設(shè)計(jì)一個(gè)彈窗的寬高尺寸范圍，開發(fā)同學(xué)代碼寫出的這套彈窗的適配在各個(gè)機(jī)型中，是在一定縮放比例下，適用各個(gè)不同情況下的視覺展示。這套彈窗可以調(diào)用在首頁引導(dǎo)、升級等各個(gè)頁面的彈窗設(shè)計(jì)中。

文章來源：優(yōu)設(shè)    作者：詠舍

本系列文章旨在由淺入深、由理論到實(shí)踐地介紹 VR 設(shè)計(jì)。無論你在做哪個(gè)領(lǐng)域的設(shè)計(jì)，都能通過這個(gè)系列了解 VR 設(shè)計(jì)的特點(diǎn)。本文是第一集，深入分析 VR 界面的文字設(shè)計(jì)。

文章來源：優(yōu)設(shè)    作者：愛奇藝XRD

今天，90％ 的媒體互動(dòng)都是基于屏幕的，通過手機(jī)，平板，筆記本電腦，電視和智能手表來與外界產(chǎn)生聯(lián)系。多屏設(shè)計(jì)已成為商業(yè)設(shè)計(jì)中不可或缺的一部分，響應(yīng)式設(shè)計(jì)正迅速成為常態(tài)。作為 UI 設(shè)計(jì)師，我們希望為我們的產(chǎn)品在不同尺寸下都能為用戶提供良好的用戶體驗(yàn)，柵格系統(tǒng)可以幫助我們做到這一點(diǎn)。

即使是我們只針對一個(gè)尺寸進(jìn)行設(shè)計(jì)，我們也經(jīng)常面臨設(shè)計(jì)布局方面的問題。合理運(yùn)用柵格系統(tǒng)可以幫助我們控制布局結(jié)構(gòu)并實(shí)現(xiàn)一致和有組織的設(shè)計(jì)。柵格系統(tǒng)就像無形的膠水一樣凝聚一個(gè)設(shè)計(jì)，即使元素看上去是彼此分離，但通過網(wǎng)格將它們連接在一起，實(shí)現(xiàn)良好的層次結(jié)構(gòu)，位置關(guān)系和一致性。

設(shè)計(jì)師和開發(fā)者之間的協(xié)作過程中，柵格系統(tǒng)在前端開發(fā)中是被應(yīng)用的很廣泛一套體系，許多優(yōu)秀的設(shè)計(jì)都使用了柵格系統(tǒng)，使用柵格系統(tǒng)可以加速開發(fā)并保證視覺還原。柵格系統(tǒng)雖然是傳統(tǒng)設(shè)計(jì)方法中的一部分，但它仍舊能幫助我們?nèi)ピO(shè)計(jì)這個(gè)多終端的世界。看到這里，你可能非常想知道柵格系統(tǒng)在頁面中是如何運(yùn)作的，那么今天我們一起來學(xué)習(xí)并且實(shí)踐我們的格柵系統(tǒng)。

「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」

「柵格系統(tǒng)可以幫助我們設(shè)計(jì)，但卻不能保證我們的設(shè)計(jì)。它有多種可能的用途，并且每個(gè)設(shè)計(jì)師都可以尋找適合其個(gè)人風(fēng)格的解決方案。但是必須學(xué)習(xí)如何使用網(wǎng)格。這是一門需要實(shí)踐的藝術(shù)?！?

——Josef Müller-Brockmann《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》作者

什么是柵格系統(tǒng)？

柵格系統(tǒng)可以讓你依靠秩序與邏輯去完成設(shè)計(jì)。

早在 20 世紀(jì)初，德國、荷蘭、瑞士等國的平面設(shè)計(jì)師們發(fā)現(xiàn)通過維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，二戰(zhàn)后這種理念在瑞士得到了良好的發(fā)展，直到 20 世紀(jì) 40 年代后期，第一次出現(xiàn)了使用網(wǎng)格進(jìn)行輔助設(shè)計(jì)的印刷作品。由瑞士設(shè)計(jì)師大師 Josef Müller-Brockmann（約瑟夫·米勒-布羅克曼）所著的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》一書，自 1961 年出版以來暢銷至今，對設(shè)計(jì)界有著深遠(yuǎn)的影響。史稱 Swiss Typography Movement （瑞士新浪潮平面設(shè)計(jì)運(yùn)動(dòng)），后來成為全球風(fēng)靡的 International Typographic Style （國際主義設(shè)計(jì)風(fēng)格)）。

△ 約瑟夫·米勒一布羅克曼 (Josef Muller-brockmann, 1914-1996)

瑞士的一位平面設(shè)計(jì)師和教師。1958 年任《新平面設(shè)計(jì)》（New Graphic Design）主編 1966 年被任命為 IBM 的歐洲設(shè)計(jì)顧問。布羅克曼因他的極簡主義設(shè)計(jì)與簡潔的排版、圖形和色彩而聞名，他的設(shè)計(jì)對 21 世紀(jì)的眾多平面設(shè)計(jì)師都產(chǎn)生了重大影響。

柵格系統(tǒng)的優(yōu)勢

1. 減少?zèng)Q策成本提高設(shè)計(jì)理解力

柵格系統(tǒng)在頁面排版布局、尺寸設(shè)定方面給了設(shè)計(jì)者直觀的參考，它讓頁面設(shè)計(jì)變得有規(guī)律，從而減少了設(shè)計(jì)決策成本；UI 設(shè)計(jì)也是需要理性的、客觀的、具有數(shù)學(xué)邏輯美感的。熟練運(yùn)用網(wǎng)格系統(tǒng)能夠讓你的設(shè)計(jì)更有秩序和節(jié)奏感，頁面信息的展現(xiàn)更加清晰，提高閱讀效率，從而提供給用戶舒適的使用體驗(yàn)。加快認(rèn)知速度。這意味著用戶在使用產(chǎn)品完成特定的任務(wù)時(shí)，例如發(fā)送消息，預(yù)訂酒店房間或乘車。用戶能夠連貫地理解并找到下一條信息或下一步要采取的步驟。

2. 響應(yīng)化

因?yàn)槿藗兪褂貌煌愋偷脑O(shè)備與產(chǎn)品進(jìn)行互動(dòng)，從智能手表的小屏幕到超寬屏電視，交互是流暢的，并且沒有固定的尺寸。使用產(chǎn)品時(shí)，人們通常會(huì)在多個(gè)設(shè)備之間切換，以完成該產(chǎn)品的單個(gè)任務(wù)。所以響應(yīng)式設(shè)計(jì)不應(yīng)該是一種品，而是一種必需品。這意味著設(shè)計(jì)師不能再為單個(gè)設(shè)備的屏幕構(gòu)建。多設(shè)備環(huán)境迫使設(shè)計(jì)人員根據(jù)動(dòng)態(tài)網(wǎng)格系統(tǒng)進(jìn)行思考，而不是固定寬度。使用網(wǎng)格可以跨不同屏幕尺寸的多個(gè)設(shè)備創(chuàng)建連貫的體驗(yàn)。

3. 加速團(tuán)隊(duì)協(xié)作設(shè)計(jì)

當(dāng)多位設(shè)計(jì)師共同設(shè)計(jì)產(chǎn)品時(shí)，一個(gè)統(tǒng)一標(biāo)準(zhǔn)就變得尤為重要。如果沒有一個(gè)統(tǒng)一的框架去約束的話，我們的產(chǎn)品的頁面和組件的標(biāo)準(zhǔn)可能各式各樣，這樣的話整個(gè)產(chǎn)品的頁面都會(huì)比較混亂。因此，網(wǎng)格系統(tǒng)有助于將界面設(shè)計(jì)工作分開，因?yàn)槎辔辉O(shè)計(jì)師可以在統(tǒng)一的布局下進(jìn)行不同部分工作，并且無縫集成并保持連貫。

4. 加速開發(fā)并保證視覺還原

大多數(shù)設(shè)計(jì)項(xiàng)目的實(shí)施，涉及到設(shè)計(jì)者和開發(fā)者之間的協(xié)作。柵格化提高了頁面布局的一致性和復(fù)用性；避免了設(shè)計(jì)師與開發(fā)者在細(xì)節(jié)上的反復(fù)溝通確認(rèn)，從而提升了整個(gè)設(shè)計(jì)開發(fā)流程的效率、并能幫助開發(fā)者實(shí)現(xiàn)較為理想的設(shè)計(jì)還原。

柵格系統(tǒng)的基本構(gòu)成

1. 列和槽（Columns and Gutters）

列（Columns） 和槽（Gutters）。列（Column）是內(nèi)容的容器，水槽（Gutter）用來調(diào)節(jié)相鄰兩個(gè)列的間距，把控頁面留白；列和列間距加上頁面邊距（Margin）加起來屏幕的水平寬度。列和列間距的內(nèi)容區(qū)域（Content width）由 N個(gè)列和（N-1）個(gè)水槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，手機(jī)采用 4 列。當(dāng)然，你可以根據(jù)項(xiàng)目特點(diǎn)來設(shè)計(jì)你的網(wǎng)格系統(tǒng)，列和水槽的寬度我們可以利用 8 點(diǎn)網(wǎng)格系統(tǒng)來定義，下面會(huì)講到。列的數(shù)量越多，頁面就會(huì)被分割得越「碎」，在頁面設(shè)計(jì)時(shí)就會(huì)越難把控，適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的頁面設(shè)計(jì)，列間距寬度數(shù)值對頁面的影響，與外邊距大體類似，即間距越大頁面越輕松簡單，反之亦然。用戶已經(jīng)習(xí)慣通過鼠標(biāo)滾輪或滾動(dòng)條（scrollbar）來縱向?yàn)g覽頁面內(nèi)容，因此豎直方向可以無限延伸，所以柵格系統(tǒng)在豎直方向的柵格可以不體現(xiàn)出來，我們在執(zhí)行設(shè)計(jì)時(shí)只要在水平方向保持規(guī)律的變化就可以了。

2. 頁面邊距（Side Margins）

頁面邊距就是內(nèi)容區(qū)域（Content field）以外的空間，比較推薦的設(shè)計(jì)就是頁面邊距可以隨著屏幕尺寸的增大而增大。頁面邊距在移動(dòng)設(shè)備上通常是 12Px到 40Px 之間，在平板設(shè)備和桌面設(shè)備頁面邊距變化就相當(dāng)多了。在響應(yīng)式設(shè)計(jì)中，你選擇了一個(gè)頁面邊距之后，縮小頁面寬度時(shí)頁面還是會(huì)有你設(shè)置的最小頁面邊距，直到到達(dá)下一個(gè)響應(yīng)點(diǎn)（breakpoint）。當(dāng)你增大頁面寬度時(shí)，頁面就有更多的頁面邊距，直到頁面寬度到達(dá)下一個(gè)響應(yīng)點(diǎn)（breakpoint）。

3. 模塊（Field Elements）

模塊就是你的設(shè)計(jì)區(qū)塊，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設(shè)計(jì)模塊，所以并不需要遵循柵格系統(tǒng)。模塊的定義是很靈活的，它可以是個(gè)小的單位或是元素，也可以是一個(gè)元素豐富的區(qū)塊。

以 12 柵格系統(tǒng)為例，一個(gè) 12 柵格系統(tǒng)可以根據(jù)業(yè)務(wù)需要被 2 等分、3 等分、4 等分、6 等分、12 等分，還可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不對稱分割，具體采用哪種比例的組合需要我們根據(jù)自己業(yè)務(wù)需求來定。

4. 8 點(diǎn)網(wǎng)格（8pt spatial system）

柵格系統(tǒng)大的層面可以幫助設(shè)計(jì)者更好的進(jìn)行版式設(shè)計(jì)與內(nèi)容布局，而小的方面可以輔助設(shè)計(jì)師規(guī)范頁面內(nèi)各種元素的對齊與間距的設(shè)定。從用戶體驗(yàn)角度來講，這兩者同等重要，從執(zhí)行層面來講，我們一般先做版式設(shè)計(jì)與布局，然后再填充內(nèi)容、調(diào)整細(xì)節(jié)。

由于列跟水槽的寬度是以網(wǎng)格作為基本單位來增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網(wǎng)格」的大小。目前最普適易用的就是 8 點(diǎn)網(wǎng)格。我們也可以利用 8 點(diǎn)網(wǎng)格法來制定產(chǎn)品中的間距，建立 8 點(diǎn)為一個(gè)單位的網(wǎng)格，使用 8 的倍數(shù)來定義模塊的間距與元素的尺寸。8 點(diǎn)網(wǎng)格有如下幾點(diǎn)優(yōu)勢：

• 目前主流桌面設(shè)備的屏幕分辨率在豎直與水平方向基本都可以被 8 整除，使用 8 作為最小原子足夠普適。可以確保不同布局之間的視覺一致性，同時(shí)可以靈活的適配多種尺寸的設(shè)計(jì)。以 8 為單位符合「偶數(shù)原則」。偶數(shù)原則可以在頁面縮放中的避免類似于 0.5、0.75、1.25 等次像素的出現(xiàn)，從而使頁面各類元素在大多數(shù)場景下都能有比較精致的細(xì)節(jié)表現(xiàn)。
• 在網(wǎng)格系統(tǒng)中應(yīng)該更加注重的是間距，而間距要遵循網(wǎng)格系統(tǒng)（例如使用 4、8、16、24、32 等和 8 具有規(guī)律的數(shù)字）同時(shí)在產(chǎn)品中的各類元素也要遵循這類原則（例如圖標(biāo)大小、組件大小等）。所以布局的水平和垂直節(jié)奏和各個(gè)組件的節(jié)奏會(huì)相互重疊，整體的設(shè)計(jì)將更加完整。
• 開發(fā)工程師使用的前端開源組件庫比如 Metronic、Antdesign 等也是基于 8 的原子單位來設(shè)計(jì)，因此如果設(shè)計(jì)師也使用以 8 為基本單位的柵格系統(tǒng)，開發(fā)與設(shè)計(jì)師相互對接就會(huì)更加方便，開發(fā)實(shí)現(xiàn)頁面時(shí)也能更高品質(zhì)地去還原我們的設(shè)計(jì)。

如果設(shè)計(jì)上沒有立即可識(shí)別的間距系統(tǒng)時(shí)，這種設(shè)計(jì)可能會(huì)讓用戶感覺廉價(jià)、不一致，而且通常不值得信任。如果設(shè)計(jì)上遵循一個(gè) 8pt 網(wǎng)格系統(tǒng)時(shí)，節(jié)奏變得可預(yù)測和視覺上的愉悅。對于用戶來說，這種體驗(yàn)是經(jīng)過修飾和可預(yù)測的，這增加了用戶對品牌的信任和喜愛。

無論有多少個(gè)設(shè)計(jì)師在協(xié)同合作，現(xiàn)在都有一個(gè)一致的間距規(guī)范，決策成本將大大降低。設(shè)計(jì)師可以輕松地從另一個(gè)設(shè)計(jì)師停止的地方開始設(shè)計(jì)，或者輕松地并行構(gòu)建。我們定義下規(guī)范可以及時(shí)和開發(fā)同學(xué)溝通，因此可以為工程師節(jié)省時(shí)間。

5. 基線網(wǎng)格（Baseline Grid）

基線網(wǎng)格由密集的水平行組成，這些行提供文本的對齊和間距準(zhǔn)則，類似于您在直紋紙上書寫的方式。在下面的示例中，每 8px 行在紅色和白色之間交替。

△ 基線網(wǎng)格

提示：將所有行高設(shè)置為基本單位（8x 或 4px）的增量非常重要，這樣您的文本才能與基線網(wǎng)格完美對齊。

△ 字體行高

響應(yīng)式設(shè)計(jì)

1. 什么是響應(yīng)式？

設(shè)計(jì)師需要通過設(shè)計(jì)讓內(nèi)容在不同的平臺(tái)上體驗(yàn)最大化，確保讓用戶在任何一個(gè)屏幕上看到內(nèi)容的時(shí)候，會(huì)覺得這些內(nèi)容就是為這個(gè)平臺(tái)而設(shè)計(jì)的，而不是單純的縮放而來。這種無縫的體驗(yàn)，才是跨屏幕設(shè)計(jì)的真正難點(diǎn)所在。想要制定一套針對不同設(shè)備和屏幕的設(shè)計(jì)方案，你需要一整套的策略。用戶體驗(yàn)同時(shí)包含了性能、交互、效率等多方面內(nèi)容，也就是說，對于一個(gè)線上的響應(yīng)式頁面，我們不僅要關(guān)注視覺上看到的，也要關(guān)注我們操作、使用時(shí)的感受，這些綜合因素最終影響著用戶使用時(shí)的效率與體驗(yàn)。

2. 響應(yīng)式設(shè)計(jì)的核心步驟

確保核心的用戶體驗(yàn)

雖然用戶體驗(yàn)是無處不在的，但是對于特定產(chǎn)品，最核心的體驗(yàn)是存在的。產(chǎn)品通常是用來解決用戶所面臨的特定問題的，它的這一特質(zhì)讓產(chǎn)品變得有意義。關(guān)鍵的內(nèi)容和關(guān)鍵的功能的組合，通常構(gòu)成了產(chǎn)品的核心用戶體驗(yàn)。如果你并沒有想明白這個(gè)問題，不妨問問自己：用戶需要完成哪些最常見/最重要的任務(wù)？找到問題的答案之后，你的產(chǎn)品就應(yīng)當(dāng)從各個(gè)方面、各個(gè)渠道，完整而全面地支撐這些功能，幫助用戶完成這些任務(wù)。舉個(gè)例子，Uber 的核心用戶體驗(yàn)是隨時(shí)隨地叫車，無論設(shè)備的屏幕大小如何，你進(jìn)行的設(shè)計(jì)全部都應(yīng)該圍繞著這個(gè)需求和功能來進(jìn)行。叫車是 Uber 的核心功能，即使使用 Apple Watch 這種極小的屏幕尺寸都應(yīng)該順利地完成這個(gè)任務(wù)。

敲定你的產(chǎn)品所覆蓋的設(shè)備類型

現(xiàn)在的移動(dòng)端設(shè)備屏幕尺寸各不相同，單獨(dú)為某一個(gè)設(shè)備設(shè)計(jì)內(nèi)容無疑是不現(xiàn)實(shí)的。根據(jù)你的產(chǎn)品覆蓋人群、受眾分類、使用場景，綜合考慮你的內(nèi)容會(huì)優(yōu)先呈現(xiàn)在哪些設(shè)備和平臺(tái)上，然后有意識(shí)地篩選出常見的設(shè)備類型：手機(jī)，平板，桌面端，智能電視，智能手表……

不同的設(shè)備組合通常是基于不同的場景、需求和服務(wù)來構(gòu)成的，用戶會(huì)針對不同的屏幕進(jìn)行不同模式的交互，甚至處理的內(nèi)容也會(huì)有差異。比如說，在手機(jī)上，用戶更加傾向于使用輕量級的任務(wù)，并且進(jìn)行一定量的溝通和交流。在平板上，用戶行為更多集中在內(nèi)容消費(fèi)上，并且目前平板的使用量被認(rèn)為在逐步降低。桌面端依然是用戶完成較為專業(yè)、復(fù)雜任務(wù)的首選平臺(tái)，足以應(yīng)付復(fù)雜多樣的內(nèi)容。了解各種設(shè)備類型和使用場景是用來構(gòu)建用戶體驗(yàn)的關(guān)鍵。

針對不同內(nèi)容來匹配用戶體驗(yàn)

并非所有的內(nèi)容都符合不同設(shè)備的使用場景，比如智能手表就不適合展示大量的文本內(nèi)容。你的產(chǎn)品所覆蓋的設(shè)備組當(dāng)中，每種設(shè)備的使用場景不同，應(yīng)該匹配的用戶體驗(yàn)也不一樣。移動(dòng)端用戶和桌面端用戶的需求就是不同的，場景差異也很大。以 Evernote 為例，它可以在多種不同類型的設(shè)備之間同步和切換，其桌面端版本就針對用戶的內(nèi)容需求進(jìn)行了優(yōu)化：Evernote 的桌面端應(yīng)用程序針對閱讀性的內(nèi)容和多媒體進(jìn)行了優(yōu)化，而移動(dòng)端的 Evernote 則強(qiáng)化了拍攝記錄、圖片和音頻記錄的功能：其次，不同的設(shè)備屏幕具備不同的輸入方式，設(shè)計(jì)師如果忽略輸入方式上的獨(dú)特性，也常常會(huì)出現(xiàn)許多問題，這里就不擴(kuò)展開來了。

優(yōu)先為最小的屏幕做設(shè)計(jì)

一直以來，設(shè)計(jì)師都習(xí)慣從最大的屏幕著手設(shè)計(jì)，最后考慮最小的屏幕上的顯示效果，這意味著絕大多數(shù)的設(shè)計(jì)都是從桌面端開始設(shè)計(jì)的，通常桌面端的內(nèi)容和功能更全面。當(dāng)桌面端的整體設(shè)計(jì)完成之后，再推進(jìn)到其他設(shè)備端的設(shè)計(jì)。然而，在進(jìn)行桌面端設(shè)計(jì)的時(shí)候，我們常常會(huì)遭遇「廚房水槽」困境：由于產(chǎn)品通常會(huì)牽涉到多個(gè)利益相關(guān)方，許多多余的功能會(huì)被加入進(jìn)來。而實(shí)踐經(jīng)驗(yàn)表明，移動(dòng)端優(yōu)先的設(shè)計(jì)往往能夠更好的專注于核心功能，更適合作為產(chǎn)品設(shè)計(jì)的起點(diǎn)。當(dāng)你優(yōu)先設(shè)計(jì)最小屏幕所需要的界面的時(shí)候，這種局面會(huì)強(qiáng)制你從最關(guān)鍵最重要的地方開始設(shè)計(jì)。這也是之前設(shè)計(jì)圈和產(chǎn)品開發(fā)領(lǐng)域一直所強(qiáng)調(diào)的「移動(dòng)端優(yōu)先」的策略的由來。在此之后，再進(jìn)行平板、桌面和電視端的設(shè)計(jì)，就是一個(gè)自然地做加法的過程了。在絕大多數(shù)的案例當(dāng)中，最小屏幕通常是手機(jī)屏幕。

測試你的設(shè)計(jì)

產(chǎn)品的測試環(huán)境并不一定都得是在現(xiàn)實(shí)世界中尋找，但是在盡可能讓真實(shí)的用戶來做可用性測試，并且在產(chǎn)品發(fā)布之前解決所有的用戶體驗(yàn)上的問題。

3. 為何要利用柵格系統(tǒng)來進(jìn)行響應(yīng)式設(shè)計(jì)?

響應(yīng)式可以響應(yīng)的前提有兩點(diǎn)：1、頁面布局具有規(guī)律性、2、元素寬高可用百分比代替固定數(shù)值，而這兩點(diǎn)正是柵格系統(tǒng)本身就具有的典型特點(diǎn)，所以利用柵格系統(tǒng)進(jìn)行響應(yīng)式的設(shè)計(jì)是順理成章的，也比較快捷，所以響應(yīng)式與柵格化天生一對好搭檔。

如何建立柵格系統(tǒng)

第1步：確定列的數(shù)量

第一階段先不要限制自己的列數(shù)。首先，創(chuàng)建一個(gè)低保真或高保真的原型。設(shè)計(jì)一些基本元素和用戶流程。在此之后，就開始設(shè)計(jì)最優(yōu)的列數(shù)和大小。如果在項(xiàng)目開始設(shè)計(jì)之后不得不改變我們的柵格系統(tǒng)，不要有負(fù)擔(dān)，我們需要有一些試錯(cuò)的空間。

我們在設(shè)計(jì)頁面時(shí)，用到最多的布局方式就是等分布局，即頁面內(nèi)容區(qū)域被 N 等分，每一份的寬度則根據(jù)屏幕寬度自適應(yīng)調(diào)整。那么就從這個(gè)角度出發(fā)，思考一下頁面的網(wǎng)格應(yīng)該設(shè)置為多少列，才能的滿足各種等分布局的需要。與 web 類似，移動(dòng)端最方便的網(wǎng)格之一是 12 列網(wǎng)格。這個(gè)網(wǎng)格將允許我們在一行中同時(shí)放置偶數(shù)和奇數(shù)個(gè)元素。

對于移動(dòng)端來說，12 列網(wǎng)格的缺點(diǎn)是一個(gè)列的寬度太小，你可能很少創(chuàng)建一個(gè)列寬度的元素。如果你選擇 2、4 或 8 列網(wǎng)格，請記住在一行中放置奇數(shù)個(gè)元素可能會(huì)出現(xiàn)的問題。

Pro-Tip：

界面設(shè)計(jì)通常包含數(shù)百個(gè)不同的頁面，因此，一個(gè)網(wǎng)格可能不適合所有的頁面。如果需要，創(chuàng)建額外的柵格系統(tǒng)，但不要忘記設(shè)計(jì)的一致性。網(wǎng)格系統(tǒng)的一致性：相同的布局邊距、列之間相等或成比例的水槽，以及更改列本身的寬度時(shí)其他模塊也需要保持相同的比例。

第2步：定義水槽和邊距

首先，讓我們先翻閱目標(biāo)屏幕的設(shè)計(jì) Guideline，以找出通常頁面邊距（Side Margins）。目前，Android 和 iOs 的最小推薦布局邊距為 16pt。web 端則依照屏幕尺寸不同而不同。這意味著，如果你希望遵循系統(tǒng)指南，則頁面邊距不應(yīng)小于 16pt。（但可以更大的）

在選擇 12 列網(wǎng)格時(shí)，列之間的水槽不應(yīng)該太大，因?yàn)橛捎诹械膶挾刃『退鼈冎g的大寬度的水槽，列將在視覺上產(chǎn)生分裂的感覺。同時(shí)我建議你選擇與8pt 間距系統(tǒng)成比例的水槽大小。所以布局的水平和垂直節(jié)奏會(huì)相互重疊。水槽與頁面邊距成比例。那么網(wǎng)格更加一致，也將允許我們輕松地在其中放置特殊元素，如輪播（carousel）。

第3步：定義 8pt間距系統(tǒng)

了幫助不同設(shè)計(jì)能力的設(shè)計(jì)者們在界面布局上的一致性和韻律感，統(tǒng)一設(shè)計(jì)到開發(fā)的布局語言，減少還原損耗。在大量的實(shí)踐中，我們提取了一組可以用于 UI 布局空間決策的數(shù)組，他們都保持了 8 倍數(shù)的原則、具備動(dòng)態(tài)的韻律感。經(jīng)過驗(yàn)證，可以在一定程度上幫助我們更快更好地實(shí)現(xiàn)布局空間上的設(shè)計(jì)決策。定義網(wǎng)格系統(tǒng)方法很多，如運(yùn)用 8 點(diǎn)網(wǎng)格系統(tǒng)、斐波那契數(shù)列、某最小原子單位的增量、從底層系統(tǒng)參數(shù)化定義間距等，我們以最小原子單位的增量為例去定義網(wǎng)格系統(tǒng)。最小單元格的數(shù)值選擇需要從兩方面考慮：

• 一方面是該數(shù)值是否能被大多數(shù)手機(jī)屏幕的寬度整除，即廣泛的適用性；
• 另一方面是在具體使用時(shí)是否具有一定的靈活性。

在適用性方面，4、6、8、10 這四個(gè)數(shù)值都是基本可以滿足的，在靈活性方面，4px 表現(xiàn)最佳，但是頁面就會(huì)被分割的非常細(xì)碎，在設(shè)計(jì)時(shí)比較難于把控。因此我們需要根據(jù) APP 的實(shí)際情況選擇合適的數(shù)值，4px 或 6px 單元格比較適合頁面內(nèi)容信息較多，布局排版比較復(fù)雜的產(chǎn)品。而 8px 單元格對一般的設(shè)計(jì)場景都可以很好的滿足，比較適合大多數(shù)的 項(xiàng)目，因此是比較推薦使用的。

那么假設(shè)我們以 8 為基準(zhǔn)的去延展系統(tǒng)間距，得到如下間距系統(tǒng)：

1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數(shù)或能被 8 整除

但是目前間距數(shù)量太多，過于細(xì)碎也會(huì)導(dǎo)致間距比較亂，所以我們繼續(xù)優(yōu)化梳理（以 6 為基準(zhǔn)，前面?zhèn)€數(shù)是后面?zhèn)€數(shù)的 2 倍遞增），得到以下間距系統(tǒng)：

1、2、8、16、24、32、48、64、80、96

第4步：sketch布局設(shè)置

利用 sketch 的布局設(shè)置功能，即可快速搭建出網(wǎng)格系統(tǒng)的參考布局，在平時(shí)做設(shè)計(jì)的過程中，可以經(jīng)常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設(shè)計(jì)效率。

我們來解釋一下這些設(shè)置分別是什么：

• Total Width：就是內(nèi)容區(qū)域（Container）的值；
• Offset：表示柵格的偏移量，我們只要設(shè)定完成以后按 Center 按鈕即可，會(huì)自動(dòng)居中；
• Number of Columns：就是柵格數(shù)；
• Gutter on outside：是非常重要的設(shè)置，勾選以后才能跟前端的柵格算法匹配；
• Gutter Width：就是柵格之間的間距；
• Columns Width：就是柵格的寬度。

如何做到響應(yīng)式?

在傳統(tǒng)的柵格化系統(tǒng)設(shè)計(jì)中，列的寬度和水槽的寬度是保持不變的，只是列的「數(shù)量」發(fā)生變化。為什么要這么處理呢？這是為了讓設(shè)計(jì)更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會(huì)顯示兩張卡片，并把第三張卡片進(jìn)行折行顯示在第二行上。不需要做任何的調(diào)整，因?yàn)橐呀?jīng)知道它位于第四列上了。在手機(jī)上，答案也很簡單，只需要一張卡片，其他的就會(huì)自動(dòng)堆到下面的行中。但是目前我有更多的響應(yīng)策略，例如當(dāng)視窗（Viewport）發(fā)生變化時(shí)，內(nèi)容區(qū)域的元素如何去響應(yīng)，具體到我們當(dāng)前的柵格系統(tǒng)，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調(diào)整。

1. 固定柵格或是斷點(diǎn)系統(tǒng)（Fixed boxes or breakpoint system）

固定網(wǎng)格，列寬和水槽寬不會(huì)改變，只是改變列的數(shù)目，當(dāng)窗口縮放時(shí)，排版布局不會(huì)發(fā)生任何改變，只有當(dāng)達(dá)到一個(gè)臨界值（開發(fā)那邊設(shè)置好的固定的值），界面才會(huì)發(fā)生改變。在此之前界面排版都是不變的，就像一部分被切掉了。

如果開發(fā)那邊寫了一個(gè)固定柵格，當(dāng)你從桌面縮小到平板電腦，就像是在桌面的瀏覽器寬度時(shí)，你不會(huì)看到任何變化，設(shè)計(jì)就像是被剪掉了一樣。但當(dāng)達(dá)到平板屏幕尺寸臨界點(diǎn)時(shí)，設(shè)計(jì)布局馬上就會(huì)改變，平板電腦上的顯示效果就會(huì)好起來。如果繼續(xù)減小這個(gè)值，同樣的事情也會(huì)發(fā)生，在到達(dá)另一個(gè)臨界值之前，設(shè)計(jì)看起來都是不變的。下面是常見的斷點(diǎn)系統(tǒng)（Breakpoint System）

如圖，響應(yīng)式是以視窗的最小寬度作為基本依據(jù)來制定每種寬度下 Columns、Gutters、與 Margins 的響應(yīng)策略，也就是說 Viewport Min-width 是做出響應(yīng)的觸發(fā)條件，視窗每達(dá)到一個(gè)最小寬度，就會(huì)觸發(fā)該寬度下預(yù)設(shè)的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應(yīng)式才會(huì)在各種復(fù)雜分辨率條件下都能給用戶比較好的體驗(yàn)。
每個(gè)視窗寬度的最小值是觸發(fā)響應(yīng)的關(guān)鍵值，因此我們給這些用于觸發(fā)的關(guān)鍵值起了個(gè)名字叫「Breakpoint」，每個(gè) Breakpoint 觸發(fā)一種響應(yīng)策略。

2. 流動(dòng)?xùn)鸥瘢‵luid Grid）

流動(dòng)?xùn)鸥裣到y(tǒng)是編輯內(nèi)容，儀表板，圖像，視頻，數(shù)據(jù)可視化等理想的響應(yīng)策略。當(dāng)窗口縮小時(shí)，內(nèi)容將動(dòng)態(tài)地發(fā)生變化，文本會(huì)進(jìn)行換行，元素也會(huì)變窄。然而，這些元素在內(nèi)容寬度縮小到下一個(gè)臨界值之前，布局是不會(huì)變化的。在各種情況下，對用戶來說，擴(kuò)展內(nèi)容的大小比擴(kuò)展可見內(nèi)容的數(shù)量更有用。

所以我想說的是，斷點(diǎn) BreakPoint 只是一個(gè)更改布局的參考點(diǎn)。這就是為什么列寬和水槽的數(shù)量不會(huì)改變的原因，因?yàn)槲覀兿胱屧O(shè)計(jì)師在考慮布局時(shí)能夠更容易地創(chuàng)建一致性。內(nèi)容寬度會(huì)隨著窗口的縮放而發(fā)生改變，例如圖片會(huì)縮小，文本會(huì)換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。

在每個(gè)斷點(diǎn)處，列計(jì)數(shù)是固定的，列寬度是最小網(wǎng)格 8PT 的倍數(shù)。行高是列大小的倍數(shù)，遵循推薦的縱橫比。邊距和填充是小單位的固定倍數(shù)。在斷點(diǎn)之間，實(shí)際列寬是網(wǎng)格區(qū)域的百分比，而不是一個(gè)小的單位倍數(shù)。內(nèi)容尺度流暢。

首先從所以屏幕大小中選擇一個(gè)基本尺寸，然后按照推薦的縱橫比以基本大小的倍數(shù)構(gòu)建每個(gè)響應(yīng)式尺寸。當(dāng)每個(gè)塊使用相同基礎(chǔ)大小的倍數(shù)時(shí)，就會(huì)出現(xiàn)網(wǎng)格。遵循此方法可確保柵格系統(tǒng)一致性，甚至跨產(chǎn)品的一致性。

3. 混合柵格（Hybrid Boxes）

在實(shí)際項(xiàng)目中，使用流動(dòng)網(wǎng)格和固定網(wǎng)格的組合也是常見的做法。網(wǎng)站通常是流動(dòng)網(wǎng)格，因?yàn)樗ミm應(yīng)各種不同終端的大小。后臺(tái)系統(tǒng)設(shè)計(jì)、工具型的界面設(shè)計(jì)就比較經(jīng)常使用網(wǎng)格和流動(dòng)網(wǎng)格組合的形式。例如的后臺(tái)管理系統(tǒng)（dashboard）側(cè)邊欄是固定網(wǎng)格，右側(cè)內(nèi)容是流動(dòng)網(wǎng)格。混合柵格在每個(gè)維度上有不同的縮放規(guī)則，所以它們不使用統(tǒng)一的縮放比。當(dāng)用戶需要調(diào)整瀏覽器的大小以使內(nèi)容在一個(gè)維度上伸縮而在另一個(gè)維度上不伸縮時(shí)，便使用混合網(wǎng)格。

面板對柵格系統(tǒng)的影響

1. 靈活面板（Flexible panels）

靈活的面板允許折疊和擴(kuò)展?fàn)顟B(tài)。面板的展開狀態(tài)為固定寬度，用戶無法調(diào)節(jié)。當(dāng)用戶將鼠標(biāo)懸停在折疊的面板上時(shí)，面板就會(huì)展開。當(dāng)靈活的面板擴(kuò)展時(shí)，它們要么壓縮內(nèi)容和網(wǎng)格，要么將內(nèi)容推到瀏覽器邊緣之外。

2. 固定面板（Fixed panels）

固定面板保持靜態(tài)寬度，不能折疊，也存在于響應(yīng)網(wǎng)格之外。

3. 懸浮面板（Floating panels）

此面板樣式漂浮在主要內(nèi)容區(qū)域之上，不影響響應(yīng)網(wǎng)格。浮動(dòng)面板將任何 UI 元素隱藏在其下方，用戶必須將其移除。內(nèi)聯(lián)菜單、下拉菜單和工具提示也是浮動(dòng)的。

總結(jié)

寫這篇文章的目的是想提供一些關(guān)于如何在響應(yīng)式設(shè)計(jì)中使用柵格系統(tǒng)，我知道對于我自己來說，我花了很多時(shí)間理解網(wǎng)格是如何工作的。我在 YouYube 上看了很多視頻，也閱讀了大量的文章，但每個(gè)人都在關(guān)注它為什么重要，卻不去注重到底怎么在自己的項(xiàng)目中使用這些原則。

你要做的最好的事情就是從現(xiàn)在開始注意那些優(yōu)秀設(shè)計(jì)是如何對齊元素的，你將會(huì)開始閱讀這些設(shè)計(jì)系統(tǒng)。為了幫助理解，這里有一些設(shè)計(jì)系統(tǒng)概述了它們的網(wǎng)格使用：

• Google’s Material Design System
  https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins
• Intuit’s Design System
  https://designsystem.quickbooks.com/foundations/responsive-column-grid/
• IBM’s Carbon Design System
  https://www.carbondesignsystem.com/guidelines/layout#2x-grid-fundamentals

在完全理解了網(wǎng)格的工作原理之后，你將成為了一名更好的設(shè)計(jì)師，因?yàn)槟阒懒四愕脑O(shè)計(jì)將如何在臨界值之間進(jìn)行轉(zhuǎn)換。你也可以落地你的設(shè)計(jì)，使它們能夠達(dá)到像素級完美。這樣的規(guī)范帶來了更一致，更簡潔的設(shè)計(jì)，當(dāng)用戶從一個(gè)界面到另一個(gè)界面流轉(zhuǎn)時(shí)，這真的提升了產(chǎn)品的檔次。我建議在你的設(shè)計(jì)中去應(yīng)用這些網(wǎng)格，并和開發(fā)同學(xué)一起，以實(shí)踐的方式將它們落地，這將會(huì)是一個(gè)非常不錯(cuò)的進(jìn)步。

文章來源：優(yōu)設(shè)    作者：IvanZheng

Dribbble 經(jīng)歷了資本入駐、創(chuàng)始人出走之后，最大的事情應(yīng)該就是這次改版吧？這個(gè)全球最大、最有影響力的設(shè)計(jì)師社區(qū)的每一個(gè)動(dòng)作都必然會(huì)牽扯著每個(gè)設(shè)計(jì)從業(yè)者的注意力，新版背后到底有哪些變化？這些變化又是出于什么樣的想法來修改的？看看 Dribbble 的官博是怎么說的吧：

在過去的10年當(dāng)中，Dribbble 已經(jīng)成長成為一個(gè)全球性的社區(qū)，成千上萬的人從這里獲得啟發(fā)和靈感，助力設(shè)計(jì)，而我們從最初分享設(shè)計(jì)作品小樣的創(chuàng)意社區(qū)，逐步成長為一個(gè)全球設(shè)計(jì)師產(chǎn)品和作品集展示和社交的平臺(tái)。在此，而我們也第一次開始問自己一個(gè)簡單的問題：【我們到底是在做些什么？】

今天，我們很高興宣布，我們在過去的10年當(dāng)中首次進(jìn)行了徹底的重設(shè)計(jì)。

Dribbble 的新時(shí)代

在過去十年當(dāng)中，我們所設(shè)計(jì)的 Dribbble 頁面的特點(diǎn)，是將設(shè)計(jì)師的作品和內(nèi)容放在首位，所以叫我們不追隨潮流，采用了極簡風(fēng)格的設(shè)計(jì)，即使潮流來來去去，它們也只是 Dribbble 展示內(nèi)容的一部分。我們提供了一幅未經(jīng)修飾的畫布，這樣就可以和最瘋狂最激進(jìn)的設(shè)計(jì)探索相輔相成。不過，這么多年來，Dribbble 這種「隱形」的設(shè)計(jì)，在視覺美學(xué)上確實(shí)和時(shí)代脫節(jié)了。這次，我們創(chuàng)建了一套有著一致樣式的設(shè)計(jì)和代碼庫，用以替代以往不斷修改、龐大且不一致的代碼。

「我們新的設(shè)計(jì)系統(tǒng)旨在保持整個(gè)視覺和諧的同時(shí)，展示你的創(chuàng)造力?！?

如今，我們正在改進(jìn) Dribbble 的界面，以更加干凈的布局、統(tǒng)一的設(shè)計(jì)系統(tǒng)、更加簡化的配色方案、更加輕便的代碼庫（加載也更加迅速），以及全新配置的文件，來更好地幫你將作品推到最前沿，正確而合理地展示你的創(chuàng)作和個(gè)性。

我們新的設(shè)計(jì)系統(tǒng)旨在保持整個(gè)視覺和諧的同時(shí)，展示你的創(chuàng)造力。它是你分享設(shè)計(jì)作品和創(chuàng)造力的理想畫布，而新的美學(xué)特質(zhì)也可以更好地反應(yīng)此刻我們的公司的氣質(zhì)。

全新的設(shè)計(jì)師個(gè)人頁面

在進(jìn)行重設(shè)計(jì)的時(shí)候，我們明確知道，我們要完全重新思考社交化的設(shè)計(jì)師作品展示，并且將創(chuàng)意更大化地呈現(xiàn)。對于 Dribbble Pro 用戶和 Pro Business 訂閱者，你現(xiàn)在擁有一個(gè)全新的、經(jīng)過全面修改的設(shè)置和配置頁面，可以在 Dribbble 上充分展示自己的個(gè)性，

你的頁面，你的個(gè)性

Pro 用戶和 Pro Business 用戶可以通過上傳你自己的首圖和定制化的歡迎語，來個(gè)性化你的個(gè)頁面。

你還會(huì)注意到，你的個(gè)人頁面還可以上傳更大的照片，這可以讓你的作品對于頁面的訪客、你的客戶、招聘設(shè)計(jì)師的企業(yè)人事而言，看起來都是非常出挑的。新的網(wǎng)格布局是可以自定義的，因此你可以充分完美地設(shè)置和展示內(nèi)容。

此外，我們還修改了「關(guān)于我們」這個(gè)部分，新版當(dāng)中，這個(gè)部分你可以將所有的個(gè)人信息匯集到一起，以便完整而充分地展示你的個(gè)人經(jīng)歷、展示簡歷和技能。

尋求工作機(jī)會(huì)？

如果你正在尋求工作機(jī)會(huì)，新的信息發(fā)送組件，確保了你的客戶或者招聘企業(yè)可以一鍵聯(lián)系到你，他們可以直接從你的個(gè)人資料頁向你發(fā)送信息，非常輕松地和你取得聯(lián)系。

面向所有人的新個(gè)人頁面

當(dāng)然，并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個(gè)人頁面，無論你是普通用戶、內(nèi)容創(chuàng)作者還是內(nèi)容策劃人，Dribbble 上每個(gè)普通用戶的個(gè)人頁面也都會(huì)升級。尚未訂閱 Pro 服務(wù)的設(shè)計(jì)師會(huì)注意到，他們的個(gè)人頁面會(huì)更加簡潔，而設(shè)計(jì)作品會(huì)以更加聚焦的形式，吸引到每一個(gè)訪客的目光。

全新的收藏頁

我們將以往的帶有分享功能的收藏合集頁（之前叫 Buckets）給翻新了，你可以精心策劃整頁內(nèi)容和案例，從一個(gè)情緒板到完整的項(xiàng)目，這意味著，借助這個(gè)收藏頁功能，你可以更加輕松地在 Dribbble 上尋找和搜集靈感。

給策劃人的個(gè)人頁面

現(xiàn)在，我們可以非常自豪地宣布，即使你并沒有將 Dribbble 作品給分享出來，每個(gè)人也都會(huì)擁有一個(gè)策劃人頁面，你可以在其中搜集和整理自己喜歡的作品，來展示你的個(gè)人品味，通過保存別人的作品，來創(chuàng)建新的合集，我們會(huì)自動(dòng)將它添加到你的個(gè)人頁資料頁當(dāng)中，讓全世界的同好因?yàn)槠肺欢P(guān)注你。

升級發(fā)現(xiàn)頁

我們在整個(gè)改版設(shè)計(jì)過程中，面臨最大的挑戰(zhàn)，其實(shí)是圖片網(wǎng)格，因?yàn)檫@是絕大多數(shù)用戶每天瀏覽圖片、發(fā)現(xiàn)設(shè)計(jì)靈感的地方，我們有意識(shí)地去弱化 Dribbble 本身 UI，避免喧賓奪主，讓每個(gè)用戶的作品成為視覺焦點(diǎn)，減少噪音。

當(dāng)然，我們還未完成…

2020 年才剛剛開始，我們迫不及待地想要展示我們計(jì)劃中的一切。從案例研究到更好的視頻支持，再到作品集展示，擺在我們眼前的改版路線圖足以證明我們的雄心，所有的這一切都是為了讓全球的設(shè)計(jì)師能夠從中獲益，走向成功。請期待我們進(jìn)一步的改版升級吧！

文章來源：優(yōu)設(shè)    作者：Dribbble

在B端的UI設(shè)計(jì)過程中經(jīng)常要接觸到大量的表單設(shè)計(jì)，且要展示海量數(shù)據(jù)，因此如何展示更清晰且讓用戶使用起來更便捷是設(shè)計(jì)師主要需要考慮的。結(jié)合自己在實(shí)際工作中遇到的列表類型總結(jié)了 web 表格設(shè)計(jì)的常用基礎(chǔ)列表模式，并進(jìn)行匯總以便后續(xù)使用。

一、基礎(chǔ)型列表

web列表中的基礎(chǔ)表格樣式，通常用于橫向表格的縱列數(shù)據(jù)較少時(shí)，使頁面不需要滑動(dòng)條也可以展示完全。操作項(xiàng)一般置于頁面最右側(cè)，便于用戶瀏覽完全后進(jìn)行操作。

二、 帶有進(jìn)度條的列表

用于查看數(shù)據(jù)完成進(jìn)度，通常與網(wǎng)格型列表搭配使用，方便數(shù)據(jù)的直觀對比，進(jìn)度條用不同顏色進(jìn)行區(qū)分，降低用戶認(rèn)知負(fù)荷。

三、可進(jìn)行選擇、排序、篩選、表頭分組且?guī)в袃鼋Y(jié)列的復(fù)合型表格

由于業(yè)務(wù)場景的復(fù)雜性，在B端系統(tǒng)中通常一個(gè)表格會(huì)涉及到大量復(fù)雜的操作，這就需要將多種樣式疊加應(yīng)用提高使用效率，防止用戶產(chǎn)生疑惑。此圖中用戶既會(huì)進(jìn)行單選或者批量選擇，也有可能會(huì)對數(shù)據(jù)進(jìn)行排序、篩選查看，對于專業(yè)術(shù)語或用戶不常見的名詞應(yīng)給予一定的幫助說明。另外由于指標(biāo)列選項(xiàng)過多，屏幕無法展示完全，還需要將重要列凍結(jié)，其他列增加滑動(dòng)條來展示。

四、用于小計(jì)及總計(jì)的表格

小計(jì)行可能會(huì)出現(xiàn)一頁多行的情況，用特殊顏色隔開，方便用戶快速識(shí)別不同部分；總計(jì)行一般出現(xiàn)于頁面最末端，通常只有一行，文字加粗顯示。

五、行凍結(jié)、帶有角標(biāo)的可編輯表格

點(diǎn)擊帶有角標(biāo)的表格可直接進(jìn)行編輯更改數(shù)值；

整行凍結(jié)：當(dāng)用戶向上滾動(dòng)查看或者翻頁時(shí)，凍結(jié)的行依然懸浮顯示于頁面頂部。

六、主從型列表-可展開表格

表格默認(rèn)收起狀態(tài)，因?yàn)?B 端產(chǎn)品的業(yè)務(wù)數(shù)據(jù)量通常較大，默認(rèn)展開多個(gè)主從關(guān)系表格對服務(wù)器的性能損耗較大。因此設(shè)定只有當(dāng)用戶點(diǎn)擊下轉(zhuǎn)箭頭，此表格單獨(dú)展開。

七、雙排文字表格

適用于一屏以內(nèi)文字內(nèi)容較多且不需要完全展示時(shí)的解決方案。

我們都遇到過這樣頭痛的問題，當(dāng)列表字段太多，一屏無法完全展示，這時(shí)應(yīng)該怎么做？當(dāng)用戶需要鼠標(biāo)頻繁去滑動(dòng)橫向滾動(dòng)條查看一屏以外的信息時(shí)，易導(dǎo)致操作成本和對屏幕展示信息的記憶成本提高，而產(chǎn)品的易用性降低。因此提供了除增加滾動(dòng)條外的另一條解決方案，使用雙排文字表格，可節(jié)省列表空間，部分內(nèi)容省略表示，鼠標(biāo)hover時(shí)展示全部內(nèi)容。

總結(jié)：

1.關(guān)于對齊方式：隨著工作范圍的深入展開，發(fā)現(xiàn)之前做表格時(shí)對對齊方式并未做過多深入研究，導(dǎo)致不同項(xiàng)目的對齊方式并不一致，因此總結(jié)出一套方法：文本信息左對齊，因?yàn)楝F(xiàn)代人的閱讀方式習(xí)慣從左到右，符合正常的心智；數(shù)據(jù)信息右對齊，更加方便數(shù)字大小的直觀對比；內(nèi)容一樣居中對齊，視覺上更均衡；表頭與信息內(nèi)容對齊方式一致，給用戶視覺上的統(tǒng)一感，降低視覺噪音。

2.當(dāng)設(shè)計(jì)師把設(shè)計(jì)稿交給開發(fā)時(shí)，雖然已經(jīng)標(biāo)好注、切好圖同時(shí)也包括交互注釋，但是不代表開發(fā)能把界面表達(dá)的跟設(shè)計(jì)稿完全一樣，甚至?xí)泻艽笃?。我們在設(shè)計(jì)的時(shí)候會(huì)考慮到字體大小、是否加粗、對齊方式等設(shè)計(jì)層級，但前端在開發(fā)時(shí)可能并不會(huì)注意到這些細(xì)節(jié)，因此需要保持與前端的良好溝通，包括出具走查文檔及當(dāng)面溝通，更能提高工作的質(zhì)量和效率。

3.由于B端系統(tǒng)的復(fù)雜性，常需要不同的表單樣式結(jié)合使用，因此還需設(shè)計(jì)時(shí)根據(jù)業(yè)務(wù)場景靈活運(yùn)用。

文章來源：站酷    作者：小魔女4376