網站設計的排版概論 - 金沙設計 SUMAART

網站設計的排版概論

By:limo- 2019-10-14 10:51:34

排版是網站設計系統中最重要的方面之一,要儘早建立起來,要考慮通過字型與使用者交流的資訊有多少。型別可以佔任何給定螢幕的85-90%。網站設計的排版通常是你需要掌握的基本元件之一,因為它需要與其他元素如圖示和UI控制元件協調工作。你的線條高度甚至會影響許多其他的結構元素,比如間距和網格。以下是你需要仔細考慮的幾個關鍵方面。


選擇字型


在選擇字型時要考慮很多因素,特別是在螢幕上使用的時候。您可能還需要與品牌/營銷團隊進行跨職能合作,以適應您的品牌的字型,並確定如何將它們融入您的系統。字型可以是另一個觸點,幫助你在整個數字體驗中微妙地傳達正確的基調和個性。如果你的品牌有一個非常獨特的字型,不適合擴大閱讀或小尺寸,你可以選擇保留它的顯示大小元素,如標題,使用不太頻繁。在這種情況下,您可能想要將它與一個更清晰的字型配對,以顯示更小的字型。如果效能是一個關鍵目標,那麼許多網站設計系統將經常利用不同平臺的系統/本機字型堆疊來避免載入網站設計體(如Shopify Polaris系統所示)。當然,您也可以決定處理這些事情,這取決於您的系統是否需要支援產品或營銷網站(品牌個性可能是更高的優先順序)。在做決定時要考慮很多因素,但在個性、表現和螢幕可讀性之間找到適當的平衡是個好主意。


選擇字型權重和樣式


考慮在最複雜的螢幕中建立簡潔的層次結構需要多少權重或變數,在什麼情況下使用加粗的版本和壓縮的版本是有意義的?保持這個字型變體列表的簡短通常是有好處的,因為載入整個字型家族的每個部分可能不是很有效(而且獲得許可的成本更高)。您在UI中使用特定樣式的頻率是多少?例如,如果您有一個或兩個非常小的斜體應用程式,請考慮權衡載入額外的webfont和利用瀏覽器呈現的斜體的利弊。此外,尋找機會,您可以通過增加型別大小而不是新增額外的字型權重來實現對層次結構的相同效果。


字型大小、行高和響應能力


一旦你知道了你使用的字型,這可能是你花費最多時間的地方。字型大小和行高是密切相關的,並且通常會受到設計中使用的一些底層網格的影響。許多網站設計師會從建立基本字型大小(通常是最常用的字型大小)開始,然後從中確定合適的行高。以1.5x字型大小的行高作為起點是一個普遍的經驗法則。許多網站設計師會使用行高作為基礎來建立一個基礎的基線網格,所有的尺寸都被對映到這個基線網格中,或者平均地劃分到這個基線網格中。這裡的系統方法將幫助您定義系統的其他特徵,如圖示大小、空白、填充和間距值,以及UI元件的一般大小。


當您開始處理這些字型和行高匹配時,還要考慮需要多少大小,以及哪些大小將對映到特定的權重或樣式。確保您適應了所有需要的應用程式,包括從幫助文字和表單標籤、正文副本和副標題到標題的所有內容。


您還需要定義這些大小如何跨不同的裝置和視口尺寸工作,通常,裝置之間最大的尺寸差異發生在更大的顯示器尺寸上。你的方法也可能受到你選擇的型別單位的影響,從px到rems, ems,甚至vh/vw單位(基於視口寬度或高度的流體單位)。從技術角度看,這些值中的許多將被編碼成易於使用的令牌或變數系統,而不是硬編碼,以使它們更容易維護。


這裡有一些排印深度指導,讓你開始:


一個為更快的網站設計-網站開發切換建立一個可訪問的和和諧的排版系統的框架


Priyanka Godbole指導您如何稽核排版,確定基本字型大小、標題大小、權重和行高。這10步的過程用於建立印刷系統的PracticeFusion的電子健康記錄是適用的,如果你是從零開始,或如果你是完善現有的系統。


版式設計系統




Dan Mall對網站設計系統中現有的排版分類感到失望,他探索了使設計系統中的排版更加可預測和直觀的不同方法。他提倡使用一個數字系統進行規範的預置,每個預置都包含各種屬性的組合——大小、主導、重量——這是系統所需要的。這使得在預設級別的任何更改都可以系統地應用於繼承該樣式的任何元件。


建立您的設計系統,第1部分:排版


排版可以說是任何網站設計中最重要的部分,當我們想到網站的內容時,我們想到的是文字。Sebastiano Guerriero詳細介紹瞭如何使用CSS全域性設定排版設計系統。從選擇正確的字體系列到建立由變數控制的模組型別比例,本指南將帶您瞭解為設計系統建立一組和諧的值的基本原理。


數學網路排版


你的數學教授是對的,你應該在課堂上多注意聽講!Brent Jackson帶領我們設計更好的網頁排版系統。通過將你的排版系統建立在數學的基礎上,你可以在保持一致的閱讀體驗的同時降低複雜性。從你的口袋到巨大的桌面顯示器,網路無處不在,這意味著你的型別系統需要在一致性和靈活性之間取得平衡,Brent的文章向我們介紹了為每個裝置設計CSS型別系統的基本原理。


更有意義的排版


蒂姆•布朗(Tim Brown)向我們展示了一個使用模組化秤從type構建網站設計體驗的例子,並解釋了他為什麼使用特定的數字作為他的秤。這包括選擇特定的比例,使用第二個基數來開發一個雙鏈模組比例,並將比例的數字應用於特定的CSS測量。他還研究了確定線高和線間距的戰術。