激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

如何在APP界面設計中把文字排版做到極致?

發(fā)布時間：2024-03-03 13:46:15 瀏覽量：145次

做ui設計的朋友們，你們一定在設計中碰到排版的吧，根據(jù)我的經(jīng)驗，排版是UI設計中最難的部分。它們存在于各種形式并與我們相處了很長的時間。還好我們有許多規(guī)則、實踐方式與理論可以幫助那些比較難跟上的人。在這篇文章中，我將給你幾個實用的提示和技巧讓你可以在項目設計中使用。

超越理論的實際案例

雖然排版是一個非常吸引人的主題，但我不會用太理論的東西來煩你。也不會解析字母和連字等等關系，以下我們將直接進入練習。

想想使用者

我們應該記住美學之外我們還有使用者。你正在設計的應用不僅運行在iPhone X上，而是有更多不同的設備…

所以你使用的字體必須靈活。你的字體應該提供各種粗細變化、在特殊符號中的寬度范圍，它也必須要渲染地非常好。必須要注意這些方面，確保你的用戶不會因你的無知而受苦。好的排版對觀看者來說是“沒有感覺”的，而不好的排版呈現(xiàn)在屏幕中則會感到非?？膳隆?/p>

了解是什么原因讓字母可讀性更高，可以讓我們更好的去反省我們應該為我們的界面選擇什么樣的字體。

一、易辨性(Legibility)

易辨性是我們可以多輕易在一個字體中區(qū)分兩個字母。這是非常專注在字體、字母與細節(jié)的細微排版。當然，這也是最重要的因素之一。不是所有的字體當初被設計出來都是都是容易閱讀的。最常見的問題是大寫的字母“I”和小寫的“L”之間沒什么區(qū)別。你必須避免這種字體，因為如果使用者在小屏幕上閱讀可能會出問題。

X高(X-height)

我們讀的字母有95％是小寫字母。大小寫字母之間比例上越大的字體可讀性更高。

字腔(Counters)

我們的字母中還有許多空白。例如看看o、u、d。這些空間被稱為字腔，排版專家相信這個空間越大可以幫助我們更容易分辨這個字母。

粗細(Weight)

細的字體通常比較粗的類型的字體更易辨認。粗細和字腔有關，必須考慮到不能去修改文字的形狀。

哪一個更容易閱讀？

最佳文字筆劃粗細約為x-height的18％。

寬比例(Wide Proportion)

字符的寬度相較于它的高度被稱為比例。一般來說，比起壓縮過的字母，你會想要較寬的字母，因為它有更好的易讀性。

第一眼的差別是很微小的

字距(Letter spacing)

沒有一個根本的方式來計算字母的間距，但大多數(shù)時候越大的文字大小需要更小的字距。字型有時顯得太開所以你必須要手動調(diào)整間距。對UI設計來說它通常出現(xiàn)在標題時。

再說一次，其實差異非常微小

二、易讀性(Readability)

易讀性關乎于整體的閱讀體驗。我們可以輕松掃視文字編排、區(qū)分標題、副標題、段落和區(qū)塊。這樣的宏觀排版使文字更具視覺吸引力，也令人更想去閱讀。這真的是一門藝術，利用對比、顏色、大小、構圖和微小的細節(jié)成就更好的閱讀體驗。

襯線字(Serif)對上非襯線字(Sans Serif)

歷史告訴我們襯線字更易于辨識。他們在傳統(tǒng)印刷中使用了很長的時間，同時也真的提高了大型區(qū)塊文字的閱讀體驗。襯線字讓我們的視線更容易穿梭于文字間。

但這個原則在網(wǎng)頁和手機上則是不一樣的。其實有些無襯線字體也是很容易閱讀的，且目前視覺設計來說更喜歡簡單無裝飾的字體。在網(wǎng)頁瀏覽特別是手機上，我們其實可以看到更多的無襯線字體。而且螢幕顯示器并不是一張紙，通常我們不會在網(wǎng)絡上閱讀很長的文章，而在app中更是如此。

在twitter中沒有半個襯線字，但在Medium中有襯線字卻很合理

但這一切都取決于你的項目內(nèi)容，以及用戶會如何使用您的內(nèi)容。例如在Medium上我們使用的是襯線字，因為大多數(shù)時候你會在Medium上讀很長的文章，所以這是一個不錯的設計方法。

行高(Line height)

當講到行距時我非常建議使用黃金比例。

將你的字母大小乘以1.618，你將會得到完美的行高。

如果你是有經(jīng)驗的老手的話，你可以手動調(diào)整這個結果。當然，這個規(guī)則也有例外，如果必要的話你隨時可以打破這個規(guī)格。

都是微小的差別，但卻大大影響我們的可讀性

文字區(qū)塊的寬度

這就像我們在走在薄冰上。太寬的對于文字區(qū)塊會讓我們的眼睛很難找到下一行文字。但如果太窄的話，眼睛將需要從一條線跳到另一條線，這樣會經(jīng)常打破閱讀節(jié)奏。我們的潛意識在跳至下一行時會充滿活力(只要它不那么頻繁)。

為了激勵讀者并讓他們持續(xù)閱讀，你的每行文字長度應該有50到75個字符。

顏色

這當然取決于你的項目，但在這里我想分享一個技巧。用下面的方式選擇你的主要顏色來取代純灰色(或黑色)：

看粉紅三角形的區(qū)塊

這樣會比使用常見的#CCC更獨特且更有吸引力。這些小細節(jié)將會讓你的視覺體驗更好。

留白空間

這在滿多的書籍和出版物中是一個滿大的議題，但是當涉及到排版的話你需要記住這一點：

留白的基本作用是減少讓閱讀者一次看到這么多數(shù)量的文字

這讓我們的版面布局更容易快速掃視，并且不會讓我們的內(nèi)容負擔太重。白色的空間引導我們的眼睛穿梭在布局中并且創(chuàng)造規(guī)則、精細和優(yōu)雅的感覺。

層級(Hierarchy)

層級關系定義了我們?nèi)绾伍喿x內(nèi)容。它告訴我們?nèi)绾螀^(qū)分標題、副標題和正文。我們可以透過使用不同的對比度、文字大小、內(nèi)間距、外間距等來實現(xiàn)這一點。我們必須掌握這一個重要的技巧以獲得良好的可讀性。

注意細節(jié)，日期的顏色和描述的顏色不同，但是一開始很難看出區(qū)別。

分隔器(Separators)

將內(nèi)容分成幾個部分的好方法是使用分隔器。目前最流行的是簡單的一條線。它是個微小的方式但仍在可讀性方面發(fā)揮重要的作用。

另一種方式是現(xiàn)在非常流行的卡片式設計。這個方式當內(nèi)容不相關的時候使用真的很棒。對于常常用大拇指使用手機來說非常的棒，而且也讓我們方便掃視整個布局。

重復和節(jié)奏

這是UI設計中最耗時的部分。任何重復的元素可以提供一致性，重復的部分可以是位置、文字大小、顏色、內(nèi)距、外距，一些規(guī)則的使用等等。例如我通常讓內(nèi)距/外距的大小為5，所以它看起來會更一致(這是我的規(guī)則之一)，「重復」將產(chǎn)生「節(jié)奏」。

三、結論

學習排版技巧可以比作是一個迷人的旅程，而且當你的的技能開始進步之后，結果是讓人非常滿意的。這個技能不是從閱讀本篇文章就能獲得，而是需要不斷學習和不斷的動手練習。所以打開你的Sketch或者Photoshop，動手開始創(chuàng)造一些超棒的作品吧！

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定