亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

提高UI 界面高級感的5個排版實用技巧

作者:直尚教育
分類: 觀點/經驗
2020-05-28
6269

UI 界面中,排版設計同樣重要。如何將至關重要的信息,有效地傳遞給用戶,這是界面本身的職責,而在絕大多數時候,這通常是靠文本來完成。這就是為什么有效的排版對于改善 UI 整體的用戶體驗如此的重要。而優化排版,本質上也是在優化 UI 和 UX。今天就跟大家分享提高UI 界面高級感的5個排版實用技巧。


43.png


雖然在絕大多數時候,優化排版是在提升排版布局的可讀性,提升課訪問性,但是它最低的標準和最核心的要素,依然是要保證排版本身的「可用性」。降低用戶使用時的障礙和摩擦,減少認知負荷。出色的排版設計能夠讓用戶注意到內容,而不是排版本身上。


「實際上, 排版本身并不是選擇字體,也不是制作字體和布局,它是塑造文本的呈現形式,達到最佳體驗的過程。」——Oliver Reichenstein


關于排版在 UI 設計種的重要性,就不再強調了,那么下面,我將分享 5 個實用性較強的排版優化技巧:


1、強化層次結構來提升UI的清晰度


將必要的文本內容集合起來,重新組織,有意識地梳理視覺層次結構,要讓用戶能夠清晰地感知到內容。對于信息層級,通常會按照標題、副標題、正文、引用說明等常見的文本元素構成。


而清晰的文本層次結構,是依托于符合文本本身所屬層次的響應的樣式,這樣才能確保可讀性。大標題應當突出,正文應當清晰明了,副標題起到的是對標題的輔助說明作用,所以應當適當縮小,這樣一來,文本元素之前的大小關系,位置關系都更加清晰了。


一個經驗法則是,通過修改字號大小的加倍和減半來快速理清相互關系。比如,如標題字使用了 32px,那么正文字體使用 16 px 來創建這個對比度。


44.png


在更加復雜多變的使用場景中,普通正文標題使用正文的2倍字號,標題中需要突出顯示話,那么可以使用正文的3倍字號,而在特別的專題或者需要著重強調說明的場景之下,使用正文的4倍字號來呈現。


2、有意識地創造具有呼吸感的排版


字間距、行高、行長是在進行排版的時候,最常調整的屬性。缺少足夠的間距,可能會讓文本難以閱讀,但是間接過多,可能會讓用戶在閱讀的時候感到稀疏難受。


· 行高


在不同的地方,可能會使用不同的術語來表述「行高」的概念,比如 PS 當中會使用「行距」來描述它,本質上,它們描述的是同一個東西——兩行文本的垂直間距大小。


行高本身并不存在一個標準的數值,它通常取決于字體本身的特征以及設計需求。一般而言,很多設計當中,傾向于將行高設置為字體高度的 1.5倍,在實際的設計當中,會根據字體本身的設計特征和應用場景(移動端閱讀可能會適當增加,智能手表這種使用場景上可能會設置得更高),進行合理的調整。如果你的正文使用的是 16 號字體的話,那么這個規則可以直接拿來用——這是久經驗證的。


45.png


· 字間距


字間距指的是文本在橫向上的間距。很少有人會在橫向的字間距的設置上花費太多的時間,但是它確實是會對閱讀產生影響的。在英文字體當中,字間距通常會遵循下面的準則:


使用大寫字母的時候,需要增加字間距


字號增加的時候,需要適當減小字間距


增大字體粗細的時候,需要適當減小字間距


46.png


通常在排版的時候,軟件會自動調整不同字母和字母之間的距離,而在進行視覺設計的時候,還需要注意字偶距的問題。


· 行長


行長本質上說的是文本段落的寬度,文本每行的長度。通常,文本的行長要控制得相對短一點,這樣易于閱讀。在大屏幕上,比如 1440px 寬度的筆記本電腦屏幕上,使用每行 60~80 字符的長度(中文通常控制在每行 35~42 個字之間),但是,如果在是移動端的屏幕上,那么每行的字符數要縮短到 35~45 這個范疇(中文則可以控制在20~25個字即可)。


47.png


3、根據內容來選取字體


在選取文本字體的時候,需要考慮到潛在讀者的體驗。不同的字體能夠給界面和體驗帶來截然不同的體驗,字體的選擇能夠影響用戶對于界面的第一印象。


注:英文字體通常不會有很大的選擇空間,在這方面中日韓三國在文本字體上,存在的問題明顯會更多一些。不過在移動端 APP 上,不少應用可以選擇非系統默認的第三方字體,而在網頁上,要實現起來會麻煩很多,所以通常只會調用本地的字體。


「優秀的設計師將文本視作為內容,偉大的設計師將文本視作為 UI。」——Cameron Moll


正確的字體選擇,能夠在信息和視覺兩個層面給用戶傳遞信息,錯誤的選擇會導致誤解和混亂的結果。


48.png


4、使用同一字體家族


如果你在不同字體的搭配上,并沒有足夠豐富的經驗,那么使用同一字體族的字體來進行設計,總是最為安全的選擇。通常,一個字體族是為一個明確的目標來設計的。它們有著更為統一的、富有凝聚力的外觀,在設計使用過程中,會更加便捷。


使用字體族的另外一個好處在于,它可以更快適配不同文本元素在排版上的需求,你可以更快地通過調整字體大小、粗細、文字大小、色彩來制造相應的對比,呈現不同的視覺效果。


另外,同一字體族當中,通常會附帶有相應的斜體、等寬字體等等,這可以應對一些相對特殊的需求,而不用手工去修改。


49.png


5、盡可能使用左對齊來提高可讀性


在世界上絕大多數的國家和地區,所使用的文字排版都是從左到右的(比如阿拉伯語就是反過來的),閱讀順訊是自上而下的。這決定了左對齊是確保可讀性的重要基準。


左對齊給人的雙眼提供了一個掃讀時候的基準位置,在大量、長時間閱讀的過程在,極大地減小了閱讀壓力——而居中對齊則明顯做不到這一點。


另外,還要額外注意一點,就是要避免在段落的最后一行只有一個字,單字成行在排版中叫「寡字」,這是需要避免的。


50.png


結語


排版是數字時代每個設計師都需要學習和掌握的重要技能,無論你的設計項目是什么樣的,這些基本的規則總能給你的設計帶來更好的效果。不過這些排版技巧都還只是非常基礎的部分,在實際的設計當中,還會涉及到很多更加復雜的排版布局——但是這些基礎,始終是最重要的事情。


來源:優設網


原文作者:Jeremiah Lam




微信圖片_20190711105744.jpg


直線網公眾號,第一時間學習最新教程,看最新行業動態!!


3
2
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          欧美国产日产图区| 欧美不卡123| 极品少妇xxxx精品少妇| 亚洲一区二区中文在线| 国产精品白丝在线| 中文字幕精品在线不卡| 欧美一级午夜免费电影| 欧美久久高跟鞋激| 8x福利精品第一导航| 欧美日韩国产经典色站一区二区三区| caoporm超碰国产精品| 丁香婷婷综合色啪| 99久久精品免费精品国产| 成人午夜av在线| 一本到三区不卡视频| 色欲综合视频天天天| 在线观看成人小视频| 欧美午夜不卡在线观看免费| 欧美日韩国产首页| 日韩欧美视频一区| 国产欧美日韩三区| 亚洲色图在线视频| 五月综合激情网| 久久精品99国产精品日本| 国内精品第一页| 成人手机在线视频| 欧美色网一区二区| 日韩一区二区精品葵司在线| 精品sm在线观看| 亚洲日本成人在线观看| 日韩电影免费在线| 国产成a人亚洲精品| 色婷婷综合久久久| 日韩欧美黄色影院| 亚洲欧洲av在线| 日韩精品1区2区3区| 粉嫩久久99精品久久久久久夜| 972aa.com艺术欧美| 日韩午夜在线观看| 亚洲欧美国产77777| 日本中文字幕不卡| 一本久道久久综合中文字幕| 欧美一区二区在线看| 国产精品国产三级国产| 美女视频黄频大全不卡视频在线播放| 成人毛片视频在线观看| 91精品久久久久久久久99蜜臂| 久久久久久黄色| 香蕉加勒比综合久久| 成人免费视频播放| 日韩欧美一区二区视频| 一区二区三区四区高清精品免费观看| 免费成人在线网站| 日本高清成人免费播放| 国产欧美精品一区| 久久99精品久久久| 欧美午夜精品一区| 国产精品视频九色porn| 日韩电影免费在线看| 91视视频在线直接观看在线看网页在线看 | 欧美日韩国产首页在线观看| 欧美激情一区二区三区| 卡一卡二国产精品| 在线观看区一区二| 亚洲色欲色欲www| av在线一区二区三区| 中文字幕精品一区| 国产高清视频一区| 久久久久久日产精品| 日本v片在线高清不卡在线观看| 91麻豆123| 亚洲精品日日夜夜| 91视频xxxx| 亚洲桃色在线一区| 成人高清视频在线| 国产日本欧美一区二区| 国产成人在线视频网站| 国产色产综合色产在线视频| 精品在线免费视频| 精品美女在线播放| 国产盗摄精品一区二区三区在线| 久久丝袜美腿综合| 国产福利一区二区三区视频| 久久精品日韩一区二区三区| 国产91精品一区二区| 国产精品嫩草影院av蜜臀| www.视频一区| 亚洲制服欧美中文字幕中文字幕| 在线视频一区二区三区| 亚洲一区二区3| 欧美一级在线视频| 久久97超碰国产精品超碰| 日韩精品最新网址| 国产不卡免费视频| 亚洲免费看黄网站| 欧美女孩性生活视频| 日韩va亚洲va欧美va久久| 日韩精品一区二区三区蜜臀| 精品一区二区三区在线观看| 久久久久久久久久久久久女国产乱| 国产精品18久久久久久久网站| 中文字幕乱码亚洲精品一区| 在线观看日韩一区| 免费成人在线观看视频| 精品捆绑美女sm三区| 成人黄色国产精品网站大全在线免费观看 | 亚洲综合区在线| 日韩一区二区三区观看| 丁香激情综合五月| 午夜激情久久久| 国产亚洲短视频| 欧美性xxxxxx少妇| 韩国欧美国产一区| 一区二区三区国产豹纹内裤在线| 91精品国产一区二区人妖| 国产91丝袜在线18| 日韩激情一区二区| 一区在线观看视频| 欧美成人精品二区三区99精品| 成人天堂资源www在线| 日本系列欧美系列| 国产精品麻豆99久久久久久| 337p亚洲精品色噜噜噜| 不卡一区二区在线| 国内精品写真在线观看| 亚洲一区精品在线| 中文字幕色av一区二区三区| 精品久久国产老人久久综合| 色拍拍在线精品视频8848| 国产一区二区三区综合| 夜夜嗨av一区二区三区四季av| 337p日本欧洲亚洲大胆精品| 欧美极品aⅴ影院| 欧美日韩精品一区二区三区| 国产成人亚洲精品青草天美| 亚洲3atv精品一区二区三区| 国产精品国产三级国产| 久久蜜桃一区二区| 欧美一区二区三区性视频| 91黄色免费观看| av资源网一区| 国产99一区视频免费| 日本伊人精品一区二区三区观看方式 | 一区二区在线观看不卡| 国产日韩欧美高清在线| 精品国产一区久久| 91精品国产免费久久综合| 欧美在线观看禁18| gogo大胆日本视频一区| 国产1区2区3区精品美女| 精品一二线国产| 久久99国产精品久久99果冻传媒| 三级在线观看一区二区| 亚洲视频你懂的| 亚洲日韩欧美一区二区在线| 中文无字幕一区二区三区 | 久久精品国产第一区二区三区| 一区二区在线观看视频| 亚洲色图在线看| 亚洲欧美日韩在线不卡| 中文字幕字幕中文在线中不卡视频| 国产精品色哟哟| 国产精品嫩草影院com| 国产精品入口麻豆九色| 亚洲视频 欧洲视频| 亚洲一区精品在线| 日韩电影在线免费| 美女mm1313爽爽久久久蜜臀| 美日韩一区二区| 国内精品伊人久久久久av影院| 国产精品一区在线观看你懂的| 国产一区二区三区日韩| 不卡的电视剧免费网站有什么| av综合在线播放| 欧美在线播放高清精品| 欧美高清视频不卡网| 日韩欧美在线影院| 久久久精品国产免费观看同学| 国产午夜精品一区二区三区四区| 久久九九国产精品| 国产精品久久久久久久岛一牛影视 | 国产成人在线免费| av电影天堂一区二区在线观看| 91在线观看高清| 欧美福利视频一区| 久久久午夜电影| 亚洲精选视频在线| 水野朝阳av一区二区三区| 久久99精品国产麻豆婷婷洗澡| 北条麻妃国产九九精品视频| 欧美三级三级三级爽爽爽| 欧美成人一级视频| 亚洲三级视频在线观看| 免费成人在线观看| 91在线云播放| 日韩三级中文字幕| 亚洲欧美日韩系列| 国产一区高清在线| 欧美日韩国产首页| 欧美国产在线观看|