中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

一般來(lái)說(shuō)，文字的實(shí)際占位在頁(yè)面中并不是緊貼文字可視邊界，是有一定的額外邊距的，所以對(duì)于標(biāo)注稿中的文字部分來(lái)說(shuō)，開(kāi)發(fā)往往做出來(lái)的效果與設(shè)計(jì)稿會(huì)有偏差。那如何精確視覺(jué)規(guī)范，又能兼顧開(kāi)發(fā)實(shí)現(xiàn)，是本文探討的一個(gè)問(wèn)題。文章提供一套設(shè)計(jì)方法，旨在更加嚴(yán)謹(jǐn)?shù)膶?shí)現(xiàn)規(guī)范化，精確化，在設(shè)計(jì)與開(kāi)發(fā)之間的保持平衡。

我用4px網(wǎng)格設(shè)計(jì)方法2年多了，也嘗試著讓我的團(tuán)隊(duì)使用這套方法論。如今，我終于克服了拖延癥，決定來(lái)探討這個(gè)方法，并期望用這篇文章來(lái)獲得一些大家的反饋。

問(wèn)題

在平時(shí)的工作中，讓我感到抓狂的是，文本占位幾乎總是比實(shí)際的文本高度要高。因此，當(dāng)使用文本占位的高度來(lái)應(yīng)用邊距規(guī)范時(shí)，總是會(huì)顯得比預(yù)期的要更大。文字行高越大，偏差就越大。

在下面的示例中，設(shè)計(jì)是通過(guò)運(yùn)用文本之間的空間來(lái)創(chuàng)建的，當(dāng)所有間距都為32px時(shí)，所有的垂直間距實(shí)際上會(huì)比32px大很多（譯者注：這個(gè)大家在使用sketch時(shí)應(yīng)該會(huì)經(jīng)常遇到）。

Photo by Max Delsid on Unsplash

解決

由于這樣的問(wèn)題，我使用4px網(wǎng)格方法來(lái)規(guī)范視覺(jué)精度。以下是我的一般設(shè)計(jì)過(guò)程：

1. 在背景中設(shè)置一個(gè)4px的網(wǎng)格
2. 把所有的元素和文本都對(duì)齊在網(wǎng)格上
3. 使用網(wǎng)格來(lái)測(cè)量文本之間的留白區(qū)域，而不是直接使用文本占位的大小
4. 此外，受到Medium上 Nathan Curtis 的《 Space in Design Systems 》文章影響，我也給團(tuán)隊(duì)定義了一組間距值，方便快速使用。

為了讓所有內(nèi)容都能對(duì)齊于網(wǎng)格上，這種方法基本上將文本的可視高度取整為4的倍數(shù)，這樣可能會(huì)造成1-2Px的誤差，但其實(shí)仍然會(huì)比直接用文本占位來(lái)設(shè)定間距更為精確。

測(cè)量文本上方最近的一條網(wǎng)格線(xiàn)的距離

有一個(gè)例外：在組件或者某個(gè)容器中的圖標(biāo)或者文本應(yīng)該垂直居中，而無(wú)論他們是否對(duì)齊于基準(zhǔn)網(wǎng)格上。因?yàn)榇蠖鄶?shù)時(shí)候開(kāi)發(fā)可以使用彈性布局（flexbox）將元素直接居中，這比標(biāo)注靜態(tài)的間距更為實(shí)用。

每個(gè)行內(nèi)元素中的文本在sketch中都使用上下居中對(duì)齊，基線(xiàn)在此時(shí)沒(méi)有對(duì)齊也是沒(méi)有關(guān)系的。

理由

傳統(tǒng)意義上，網(wǎng)格設(shè)計(jì)常常用于紙媒印刷，用來(lái)打造垂直方向上的節(jié)奏感，這在設(shè)計(jì)Web用戶(hù)體驗(yàn)的工作中，同樣也需要把控好這樣的節(jié)奏感。

對(duì)我來(lái)說(shuō)，使用4px網(wǎng)格方法是視覺(jué)精度（對(duì)用戶(hù)）和設(shè)計(jì)效率（對(duì)我來(lái)說(shuō)）之間的平衡。在問(wèn)題部分，我討論了使用文本占位來(lái)對(duì)齊所帶來(lái)的麻煩，用戶(hù)其實(shí)是看不見(jiàn)這個(gè)所謂的文字外框的。所以使用這種“嚴(yán)謹(jǐn)”的設(shè)計(jì)，其實(shí)是沒(méi)有多大意義的，會(huì)造成視覺(jué)上的不平衡，并沒(méi)有給用戶(hù)帶來(lái)好處。

另一個(gè)角度來(lái)說(shuō)，忽略文本占位空間，使用網(wǎng)格來(lái)進(jìn)行測(cè)量，則可以獲得更高的精度。下面是這兩種方法的比較，我們可以看到，當(dāng)使用相同的間距值（32px,12px,32px,32px）時(shí)，使用網(wǎng)格測(cè)量的設(shè)計(jì)更準(zhǔn)確的反映了預(yù)期的間距。

（譯者注：這個(gè)有個(gè)點(diǎn)我想提一句，在實(shí)際輸出標(biāo)注稿的時(shí)候，間距不是圖中所示，標(biāo)注會(huì)自動(dòng)減去文字占位空間，比如Seattle與City in Washington之間的標(biāo)注間距可能是8px，這樣開(kāi)發(fā)寫(xiě)出來(lái)的css代碼才能與頁(yè)面中的實(shí)際文本占位對(duì)齊。）

有人可能會(huì)說(shuō)，如果是因?yàn)閺奈谋菊嘉欢a(chǎn)生了太多的間距，那么，將上圖第一張卡片設(shè)計(jì)中的“Seattle”間距從32px降低到28px或者24px來(lái)與頂部和左側(cè)的Padding值相同不就行了。但是，這樣做就成了一件靠感覺(jué)的事情，除非去計(jì)算像素，否則永遠(yuǎn)無(wú)法確定。另一方面，4px網(wǎng)格規(guī)范提供了一個(gè)更精確、更好把控的方法來(lái)確定間距大小。

就設(shè)計(jì)效率而言，這似乎需要做更多的工作，但是由于網(wǎng)格的存在，設(shè)計(jì)軟件（比如sketch或Figma）可以利用自動(dòng)吸附功能幫助對(duì)齊網(wǎng)格線(xiàn)，因此實(shí)際處理時(shí)其實(shí)并不麻煩。下面是我平時(shí)使用網(wǎng)格布局時(shí)的工作流程。

我的工作流中如何處理好文本

或者，做的時(shí)候可以選擇不使用網(wǎng)格參考線(xiàn)，只是用一個(gè)像素塊手動(dòng)測(cè)量，但是這就需要將畫(huà)面方法至像素大?。ㄗg者注：我自己平時(shí)就經(jīng)常這么干，這樣測(cè)量會(huì)更準(zhǔn)確）。

上圖是一個(gè)可選的工作流，直接量?jī)蓚€(gè)文本之間的間距，而不使用網(wǎng)格參考

已知問(wèn)題：如何與開(kāi)發(fā)對(duì)接？

當(dāng)開(kāi)發(fā)拿到這樣的設(shè)計(jì)標(biāo)注稿時(shí)，看到的間距可能是看似沒(méi)有規(guī)律的隨機(jī)間距，這對(duì)開(kāi)發(fā)來(lái)說(shuō)，并不友好。

上文中，我提到了一篇文章《Space in Design Systems》，文章中主要討論了如何使用css 類(lèi)來(lái)表示間距值，這有助于加強(qiáng)設(shè)計(jì)與開(kāi)發(fā)之間的一致性。不幸的是，使用我的這種方法，幾乎不可能將間距表示為一組css類(lèi)，因?yàn)殚g距值具有隨機(jī)性。

我們還研究了許多人提出的一種減少隨機(jī)性問(wèn)題的熱門(mén)技術(shù)，使用::before和::after CSS偽類(lèi)來(lái)“裁切”邊界框 （本質(zhì)上是對(duì)行內(nèi)元素的間距校正）。然而，我的開(kāi)發(fā)男友則告訴我：

使用::before和::after CSS偽類(lèi)并不理想，因?yàn)樵诓煌淖煮w，瀏覽器，操作系統(tǒng)甚至不同的屏幕分辨率上都不一致。針對(duì)某一個(gè)字體做好的設(shè)置，在其他地方又可能出現(xiàn)問(wèn)題。

從開(kāi)發(fā)的角度來(lái)說(shuō)，這樣做也沒(méi)有遵循很好的代碼規(guī)范，因?yàn)槭鞘褂昧素?fù)邊距，將無(wú)關(guān)的多余元素應(yīng)用到了DOM結(jié)構(gòu)中，這可能會(huì)導(dǎo)致一些意想不到的副作用。因此，在真實(shí)項(xiàng)目中，這種技術(shù)不值得冒險(xiǎn)。

（譯者注：貌似這里作者并沒(méi)有明確與開(kāi)發(fā)的對(duì)接，我個(gè)人認(rèn)為，作為垂直方向上的間距，在文字大小不變的情況下，讓開(kāi)發(fā)直接按標(biāo)注的間距值來(lái)寫(xiě)CSS值，復(fù)雜度也能接受。）

不同語(yǔ)言如何應(yīng)用

我曾經(jīng)做了一項(xiàng)不同地區(qū)語(yǔ)言的研究，研究我的方法是否支持8種書(shū)寫(xiě)語(yǔ)言（拉丁語(yǔ)，漢語(yǔ)，西里爾語(yǔ)，德語(yǔ)，希臘語(yǔ)，韓語(yǔ)，日語(yǔ)和泰語(yǔ)）。然后我意識(shí)到，無(wú)論使用哪種度量方法，最終開(kāi)發(fā)都是從標(biāo)注稿中獲得間距值寫(xiě)進(jìn)CSS中的邊界框間距才是最重要的。

不同的字體，即使行高相同，可視高度也會(huì)有區(qū)別。然而，正如下面的圖中所示，盡管有一些細(xì)微的改變，所有語(yǔ)言的內(nèi)容仍然相對(duì)集中在相同的位置上。

Photo by Joshua Sortino on Unsplash

問(wèn)題

如果有任何不合理的地方，或者你有任何問(wèn)題，反饋或更好的解決方案，請(qǐng)讓知道！我已經(jīng)研究這個(gè)課題很長(zhǎng)時(shí)間了，所以我很想聽(tīng)聽(tīng)你的想法。

原文：https://uxdesign.cc/the-4px-baseline-grid-89485012dea6

作者：Ethan Wang

譯者：彩云sky，公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議