超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

如何合理創(chuàng)建間距系統(tǒng),來更快的實現(xiàn)設(shè)計方案。

2019-3-29    資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

讓設(shè)計師和開發(fā)團隊有意識的利用好間距系統(tǒng),可以提高產(chǎn)品的可讀性和一致性。

Cheatsheet總結(jié)了我的方法


我最近致力于為電子健康記錄(EHR)產(chǎn)品定義間距系統(tǒng),以改善產(chǎn)品頁面的可讀性和一致性。我提出了3個間距規(guī)則(3C規(guī)則)和以4為基準的間距網(wǎng)格,并且這些規(guī)則與新的印刷系統(tǒng)配合得非常好。


存在的問題


當定位垂直元素時,設(shè)計師不應(yīng)做出隨意或者任其自然的判斷。通常設(shè)計師通過按住Shift和上下箭頭鍵在Photoshop中實現(xiàn)垂直增量:“根據(jù)實際情況來決定使用5px或10px?!边@種方法雖然是10的倍數(shù)并且可用,但是它不符合任何印刷要求的規(guī)范。

——Robert Bringhurst,著有《印刷風格元素》一書。


  • 我們在EHR產(chǎn)品中使用了5px、10px、15px、20px的邊距/填充,但是在何時何種情況下使用這些間距,我們并沒有一個嚴格的規(guī)范。

  • 邊距/填充只是間距系統(tǒng)的一部分,字體行高也會增加額外的高度空間,但目前我們沒有為現(xiàn)有(舊的)文字樣式創(chuàng)建行高規(guī)范。

  • 相似的組件和內(nèi)容在產(chǎn)品中看起來不一致,這造成了EHR產(chǎn)品的整體樣式不統(tǒng)一,并且因為數(shù)據(jù)疏密程度不同,造成了閱讀體驗的不流暢。

Image title



解決問題


步驟1:確定文本行高(確定基準網(wǎng)格)

首先我們假設(shè)使用非常流行的8點基準網(wǎng)格(即以8的倍數(shù)為一個間距規(guī)單位)會達到好的效果,因此在實驗中,我把基準主體字體大小設(shè)置為13px,行高設(shè)置為8的倍數(shù)即16px或則24px然后看看這兩個行高規(guī)則是否有用。如果沒用,則意味著8點基準網(wǎng)格是不適用的。

Image title

然后我將基準字體大小設(shè)置為13px,并在16px和24px之間的偶數(shù)尋找行高值。開始我將它與18px(6的倍數(shù))匹配,如果成功那就意味著我采用了6點基準網(wǎng)格,也就是6的倍數(shù)(間距會是3、6、12、18、24)。后來我嘗試了20px的行高,使用起來效果很好,所以我采用了4點基準柵格(也就是間距為2、4、8、12、16、20等)。

Image title


步驟2:用??硕珊蛶缀渭墧?shù)來確定間距值


“隨著可選擇數(shù)量的增加,做出決定的難度將會增加。”

——??硕?/span>


我們要想出一個可感知的間距系統(tǒng)來簡化設(shè)計決策,另外將所需值的數(shù)量保持在一個最小范圍內(nèi)。

  • 間距值是基準網(wǎng)格的倍數(shù)數(shù)值(如步驟1中確定的4點基準網(wǎng)格),因此我的間距值為4點基網(wǎng)格(2、4、8、12、16、20、24、28…)

  • 一般來說,4–-5個間距值已經(jīng)為產(chǎn)品設(shè)計提供了足夠的差異性,即使對于復(fù)雜的企業(yè)產(chǎn)品也足夠了,但是在實際過程中可能需要靈活的在規(guī)范中增加間距值。

  •    我決定使用4點基準網(wǎng)格,因為它提供了更好的視覺可感知區(qū)間,對于層次結(jié)構(gòu)的展示來說非常好,因此間距值應(yīng)該是(2、4、8、16)。

Image title


如何以可預(yù)見的方式應(yīng)用這些間距值?3C法則來拯救你。

我深受Nathan Curtis上面文章中介紹的Insets,Stacks&Inline等間距詞匯的影響。我決定在其基礎(chǔ)上構(gòu)建一個額外的詞匯組,以便我的團隊更容易理解每個詞匯的使用環(huán)境。我將所有的間距規(guī)則分解成3個C:容器、內(nèi)容和組件。

· 容器規(guī)則使用了平方差的概念(使用16px)

· 內(nèi)容規(guī)則使用了堆棧的概念(頭部堆棧使用2px,葉節(jié)點堆棧使用0、4、8、16px具體取決于內(nèi)容類型)

· 組件規(guī)則使用內(nèi)聯(lián)的概念(大多數(shù)情況下使用8px,4px表示關(guān)聯(lián)關(guān)系)



第1C:容器規(guī)則

容器是UI中的框架,其中包含內(nèi)容,通常這些內(nèi)容是頁面、卡片、模態(tài)、彈窗等。由于容器在層次結(jié)構(gòu)中處于最高層次,所以我確保所有容器的間距值(在我的例子中是16px)。提示:切勿在任何間距計算中包含邊框。

Image title


Image title


第2C:內(nèi)容規(guī)則

  • 內(nèi)容存在于容器內(nèi)部,內(nèi)容包含:

  • 標題(h1、h2、h3、h4、h5) 以段落,列表,表格,表格的形式穿插數(shù)據(jù)。

所有這些內(nèi)容都是使用頁邊距垂直疊加的,但字體行高也為指定的頁邊距增加了額外的間距。我無法以一致的方式解決這個問題,因此我同時考慮了行高和邊距,創(chuàng)建了自己的處理堆棧的方法,以下是我的過程:


A)首先解決頭部堆棧

  • 如下圖,我通過使用2個選項來獲取標題的行高。

Image title


  • 為了簡化這2個選項之間的行高決策,我計算了每個行高比,并決定使用等于1.5或更高的行高。對于選擇哪個行高,我仍然猶豫不決,但是在進行了視覺探索并回顧了設(shè)計團隊的結(jié)果之后,我們確定了應(yīng)該采用那個行高選項。

Image title

視覺探索的過程

  • 我從頂部的H1開始,嘗試使用2px、4px、8px等的不同間距選項。行高為36px的間距選項都很緊湊,但4px間距與行高40px感覺恰到好處!

Image title

 

  • 接下來我解決了H2問題,在我們的產(chǎn)品中,H2恰好是白色頁面的第一個標題。所以根據(jù)容器規(guī)則,最上面的H2在頂部有16px。我決定在所有H2標題上面給出16px間距高度(最大允許間距值),因為這個值使得層次結(jié)構(gòu)非常清晰。

Image title

 

  • 然后我在所有標題(H2、H3、H4、H5)和列表、段落、表格之間進行了間距值0px、2px、4px和8px的實驗。2px和4px的間距相差無多,但是我們在設(shè)計團隊內(nèi)部審查結(jié)果時,2px的視覺感知更好,盡可能的堅持只有一個邊際數(shù)值,因為它簡化了設(shè)計和開發(fā)過程。

標題和葉節(jié)點間距實驗

標題和葉節(jié)點間距實驗

標頭堆棧 - 間距為2px和4px


B)接下來解決葉節(jié)點堆棧

EHR有4種主要類型的葉節(jié)點:

  • 表單(幾乎50%的產(chǎn)品)
  • 列表(幾乎30%的產(chǎn)品)
  • 表格(可能是產(chǎn)品的15%)
  • 段落(可能是產(chǎn)品的5%)

我開始為最簡單的內(nèi)容類型——段落來處理間距。


每個段落內(nèi)的間距

這非常簡單,只需要清空段落中的所有文本行空間,這樣兩行之間就有0px邊距。

Image title

Sketch中的排版段落(行高20px是通過視覺探索得出的,并使用WCAG SC 1.4.8進行驗證,其中規(guī)定“ 行間距至少是段落內(nèi)的空間的1.5倍 ”(20/13 = 1.538)


兩個連續(xù)段落之間的間距

我第一個想法是使用行高為20px的間距,但后來看到了WCAG SC 1.4.8,其中指出 ? “段落間距至少要比行間距大1.5倍,因此一段最后一行的行高為250%,這樣可以保持距離下一段第一行間距更合適。 假設(shè)%值是根據(jù)基本字體為13px的大小計算的,我計算出兩段之間的實際間距應(yīng)約為(ps - ls)= 13px,將使用margin-bottom:13px在CSS中定義。但是13px不是我們在步驟2中確定的間距值之一,因此我選擇了16px作為段落底部的邊距。

Image title

解釋WCAG SC 1.4.8中的段落間隔規(guī)則

在Sketch中多段落排版

在Sketch中多段落排版


如果對計算結(jié)果有疑問,我總是用視覺探索進行交叉檢查。與其他可能的值相比,段落之間的16px間距最佳。其實我認為12px間距會更好。但是我不想僅為這個用例為整個間距系統(tǒng)添加額外的值,另外我們的EHR產(chǎn)品沒有很多段落,幾乎沒有任何連續(xù)的段落。

Image title

列表中列表項內(nèi)的間距

列表是由多個同質(zhì)數(shù)據(jù)項組成的數(shù)據(jù)結(jié)構(gòu),由于列表將所有這些同質(zhì)數(shù)據(jù)項組合在一起,因此列表項不像段落(它們之間有16px)那樣間距很重要。同時列表項仍然需要稍微分開,所以我嘗試了0px和16px之間的間距,我只有3個值可以試驗2、4、8,總體看起來列表項之間的間距為8px看起來最適合層次結(jié)構(gòu)。

Image title

帶有標簽的2個連續(xù)輸入字段之間的間距

表單有連續(xù)的輸入字段,一個接一個地疊加在另一個之下。

Image title

無標簽2個連續(xù)輸入字段之間的間距

無標簽對于可訪問性來說并不是一個好的處理方式。然而在某些情況下,標簽最好不要顯示,這些情況是:

  • 當多個輸入字段一起表示1個對象時(例如在下面的地址部分,“地址”字段包括街道地址1,街道地址2,城市,州,郵編)
  •   當標簽過于明顯/重復(fù)且無法拼寫時,例如搜索。

Image title

 

第3C:組件規(guī)則

組件有按鈕、輸入字段、圖標等,這些組件通常放置在一起(內(nèi)聯(lián))。此外所有的組件的尺寸均為4的倍數(shù)(也是8的倍數(shù)),因此按鈕和輸入域內(nèi)部有一個24px高度的空間(加上1px 頂部和1px的底部邊框,整體高度為26px)。當組件能完美利用好基準網(wǎng)格,并且按規(guī)則設(shè)置間距時,整體布局才會完美和諧。


2個組件的間距

我用了一個簡單的規(guī)則,即在大多數(shù)時候任意2個相鄰組件之間使用8px間距。在少數(shù)情況下使用4px來顯示兩個組件之間更緊密的關(guān)系(格式塔的接近性原則)。

內(nèi)聯(lián)間距為8px(玫紅色)和4px(橙色


組件內(nèi)部間距

我對組件內(nèi)部的任何左/右填充都使用了8px。

Image title

圖標在組件內(nèi)部間距

根據(jù)格式塔的接近性原則,將圖標放在組件內(nèi),將他們的間距設(shè)置為4px,而不是通常的8px。

Image title

外部圖標與組件間距

如果圖標與組件關(guān)聯(lián)組合,則其與組件間距為4px以顯示其關(guān)聯(lián)關(guān)系(格式塔的鄰近原則)。但是如果圖標與一組組件關(guān)聯(lián),那么它與最后一個組件間距8px,以表明它不僅僅是與最后一個組件關(guān)聯(lián),而是與整個組件關(guān)聯(lián)。

Image title


結(jié)論

  • 你將提出一個具有有限數(shù)值和有明確使用規(guī)范的間距系統(tǒng),這非常易于使用并且合乎邏輯記憶。
  • 在UI中使用間距,使其信息層次結(jié)構(gòu)更加合理清晰,并遵守可訪問性指南WCAG1.4.8,這有助于不同能力的人更好的掌握和理解信息。
  • 開發(fā)工程師了解間距系統(tǒng),并且熟悉其應(yīng)用的場景和規(guī)則,這樣可以讓設(shè)計和開發(fā)之間的溝通更順暢,工作效率更高等。
  • 設(shè)計師不再需要對所有內(nèi)容進行排查,開發(fā)工程師不再需要花時間檢查Zeplin等其他工具中樣式問題。

藍藍設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計  cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.miumiuwan.com

存檔