如何提拔網(wǎng)頁(yè)內(nèi)容的可讀性(4)
對(duì)齊模式
談到可讀性的時(shí)候,對(duì)齊其實(shí)也個(gè)無(wú)法回避的話題。而在排版中,不同的對(duì)齊模式也是能構(gòu)成對(duì)比的。
通常,在對(duì)齊的設(shè)計(jì)上有兩種常規(guī)思路:
·正文和題目采用不同的對(duì)齊模式,構(gòu)成對(duì)比
·在悉數(shù)排版中相沿雷同的對(duì)齊模式
從某種意義上來(lái)說(shuō),兩種思路都是對(duì)的。選取那種思路,重要取決于文本、題目和其他設(shè)計(jì)元素之間的關(guān)系。假如采用雷同的對(duì)齊體例,能否保證題目和正文之間有顯明對(duì)比、能否從背景和其他元素中脫穎而出?文本的行間距、字體大小、和其他元素之間的距離能否構(gòu)成優(yōu)秀的視覺(jué)差?
在談到UI中的對(duì)齊題目的時(shí)候,最直觀的模型是一段文本和按鈕之間的關(guān)系。排版中,文本元素和按鈕之間的對(duì)齊模式應(yīng)該是怎樣的?這個(gè)題目很故意思,很多設(shè)計(jì)師傾向于讓文本和按鈕縱向排列,居中對(duì)齊,但是網(wǎng)站的其他元素搭配進(jìn)來(lái)的時(shí)候,又每每不會(huì)居中對(duì)齊。所以,對(duì)齊體例,是由元素自己的屬性來(lái)決定,根據(jù)整個(gè)設(shè)計(jì),合理搭配。
長(zhǎng)文本內(nèi)容
對(duì)于包含大量文本內(nèi)容的網(wǎng)站而言,正文部分的內(nèi)容排版就顯得相稱緊張了。假如文本內(nèi)容都是無(wú)縫的呈現(xiàn)出來(lái)的話,用戶很可能由于沒(méi)有條理而無(wú)法捉住緊張信息。
所以,網(wǎng)頁(yè)中大量的文本信息,應(yīng)該考慮下列因素:
1、文本塊的區(qū)域和大小
2、每行筆墨的長(zhǎng)度和高度
3、項(xiàng)目編號(hào)和列表
4、字符的粗體和斜體
5、色彩
所有的這些屬性都能將文本中特定的關(guān)鍵詞、信息甚至語(yǔ)氣同其他的內(nèi)容區(qū)分開(kāi)來(lái),它們會(huì)成為文本中緊張的錨點(diǎn),將和總要的信息通過(guò)這種差異和對(duì)比,推送到用戶面前。
在較長(zhǎng)的文本區(qū)塊中(尤其是博客和長(zhǎng)文中)使用不同的樣式來(lái)區(qū)分不同類型的內(nèi)容,如許做可以顯明降低用戶閱讀的委靡度。將長(zhǎng)內(nèi)容分解為更易于閱讀的部分,用戶才更容易買(mǎi)單。
保持同等
同等性幾乎是所有設(shè)計(jì)領(lǐng)域都遵循的原則,無(wú)論你在首頁(yè)或者題目、正文中是如何運(yùn)用對(duì)比的,最好將它延長(zhǎng)到整個(gè)設(shè)計(jì)規(guī)范當(dāng)中去。
盡量使用雷同的色彩,一樣的樣式,同一的字體,假如設(shè)計(jì)無(wú)法保證同等性,會(huì)讓用戶在界面中感到疑惑。確保用戶到哪個(gè)地方都會(huì)覺(jué)得他們?cè)谀愕木W(wǎng)站或者APP當(dāng)中。
Ntgrate 這個(gè)網(wǎng)站就很好的貫徹了同等性的設(shè)計(jì)。背景同一使用了菱形的柵格,而文本則同一使用白底黑字的卡片來(lái)承載,同時(shí)網(wǎng)站中的大圖則是置于背景和文本而卡片之間。
結(jié)語(yǔ)
對(duì)比度是讓設(shè)計(jì)項(xiàng)目在視覺(jué)上更具吸引力的緊張工具,它讓排版布局更加富有條理結(jié)構(gòu),高對(duì)比度的設(shè)計(jì)讓內(nèi)容的可讀性有顯明的提拔,而這也是設(shè)計(jì)可用性達(dá)標(biāo)的最基本條件。
2/2 首頁(yè) 上一頁(yè) 1 2本文地址:http://m.likemindfilms.com/tutorial/di18.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門(mén)正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏