網(wǎng)頁設(shè)計(jì)中如何為Web設(shè)計(jì)可讀內(nèi)容

2022-06-28    分類: 網(wǎng)站建設(shè)

網(wǎng)站建設(shè)不僅僅是讓東西看起來很棒。您必須創(chuàng)建一個(gè)人們將實(shí)際閱讀的設(shè)計(jì),并幫助他們參與內(nèi)容。有時(shí)候,說起來容易做起來難。
人們通常關(guān)注的時(shí)間很短,你不應(yīng)該指望他們消化屏幕上的每一個(gè)字。但是,您可以使用某些設(shè)計(jì)技術(shù)和元素來幫助用戶盡可能多地閱讀。

下面創(chuàng)新互聯(lián)成都網(wǎng)頁設(shè)計(jì)公司帶你來了解下:


用尺寸和比例建立層次結(jié)構(gòu)
可讀設(shè)計(jì)從多層次的文本開始。建立思想等級(jí)可以幫助用戶瀏覽文本。
較大的尺寸是一種視覺提示,它告訴用戶首先閱讀某件事物,因?yàn)樗亲钪匾?。大多?shù)用戶的眼睛自然會(huì)從較大的元素移動(dòng)到較小的元素,從而創(chuàng)造出一個(gè)很好的視覺流。
大多數(shù)用戶的眼睛自然會(huì)從較大的元素移動(dòng)到較小的元素,從而創(chuàng)造出一個(gè)很好的視覺流。
充分利用設(shè)計(jì)中的H2,H3和H4標(biāo)簽,并為可用于分割大塊文本的小標(biāo)題創(chuàng)建一致的縮放比例。
使用一致的文字展示位置和尺寸創(chuàng)建比例尺可以讓用戶更輕松地瀏覽文本。對(duì)于長篇內(nèi)容和主頁上的短內(nèi)容(例如上面的敘述)都是如此。
請(qǐng)注意主頁如何在英雄區(qū)域中有四個(gè)不同級(jí)別的文本。上面有一個(gè)很大的標(biāo)題,上面有一小段代碼。然后,主體內(nèi)容的風(fēng)格具有更加強(qiáng)調(diào)的粗線。大多數(shù)用戶會(huì)按照以下順序看到這些字詞:標(biāo)題,粗體文本,正文文本,由于字體的重量,大小和規(guī)模而產(chǎn)生的標(biāo)題摘錄。

選擇可讀字體


盡管有趣的新穎字體或精心制作的腳本可能會(huì)帶來很多樂趣,但它并不總是最終用戶的選擇。
可讀字體最可能實(shí)際讀取。
原因如下:
高度可讀的字體更易于掃描。
Letterforms很容易看到不同的尺寸。
字母不能一起運(yùn)行或產(chǎn)生尷尬的空間或形狀。
這些字體通常用于用戶,并且很容易。(甚至類似的字體,但不是來自同一個(gè)家庭的字體,大多數(shù)用戶都很熟悉。)

可讀字體的特征包括:


標(biāo)準(zhǔn)重量 - 不要太厚或太薄
常見的x高度 - 不要太短或高
更圓的字母 - 使“o”具有圓形
輕微或沒有傾斜
不太接近或相距甚遠(yuǎn)的字母
看看這些特征,你可以看到幾乎任何類型的類別都可能包含可讀的選項(xiàng)。您不必僅僅依靠襯線或無襯線; 其他字體的混合實(shí)際上是好的。只要確保測(cè)試我們計(jì)劃在該字體中使用的詞語,以確保它們易于閱讀。
掃描人員的堆棧內(nèi)容

堆疊內(nèi)容可以追溯到層次結(jié)構(gòu)。但有了額外的元素 - 在堆疊內(nèi)容時(shí)考慮文本和非文本元素。


如果用戶在屏幕上看到文本塊和圖像,則圖像幾乎總是首先引起他或她的注意,因此堆疊元素非常重要,這可以幫助用戶從圖像移動(dòng)到圖像到文本。
上面的新西蘭Alzheimers公司使用堆疊技術(shù)將用戶轉(zhuǎn)到主要標(biāo)題。請(qǐng)注意文本如何與三個(gè)人一起定位在圖像的中心。你的眼睛會(huì)首先進(jìn)入臉部,但隨后會(huì)進(jìn)入內(nèi)部帶有文字的微妙動(dòng)畫圈。然后,他們的目光轉(zhuǎn)向更小,更次要的文本塊。
事情就是這樣:當(dāng)你第一次看到你可能沒有想過的圖像時(shí),所有這些發(fā)生得如此之快。大多數(shù)用戶在決定是否與內(nèi)容交互時(shí)以相同的方式掃描整個(gè)屏幕。
播放視覺效果
通過將視覺效果與其他元素進(jìn)行整合來實(shí)現(xiàn)更逼真的設(shè)計(jì)。
真的想確保用戶看到你的內(nèi)容?以有意義的方式整合文本和視覺效果。創(chuàng)建一個(gè)英雄圖像,使用有趣的視覺,不尋常的顏色配對(duì)或動(dòng)畫和文字的組合使用戶暫停。
設(shè)計(jì)師有時(shí)犯的錯(cuò)誤是將每個(gè)元素分離到自己的盒子或空間中。通過將視覺效果與其他元素進(jìn)行整合來實(shí)現(xiàn)更逼真的設(shè)計(jì)。
上面的Octavo Designs有一個(gè)你無法避免被吸引進(jìn)去的主頁。對(duì)于初學(xué)者來說,在明亮的彩色背景上有一頭非常有趣的牛。文字是圖像的一部分。(它實(shí)際上觸及了頂部的牛角。)這種視覺效果和文字結(jié)合將用戶吸引到內(nèi)容中,讓他們更想要更多。
保持線條(和思想)簡(jiǎn)短
在規(guī)劃設(shè)計(jì)時(shí),請(qǐng)考慮短時(shí)間爆發(fā)。每個(gè)頁面或屏幕應(yīng)集中在一個(gè)簡(jiǎn)單的思想和簡(jiǎn)單易讀的文本塊上。
以鼓勵(lì)閱讀的方式為用戶構(gòu)建和組織思想:
使用一到三個(gè)句子段落
合并項(xiàng)目列表
使用小標(biāo)題分割大塊文字
包含交互鏈接
突出顯示或大膽的關(guān)鍵點(diǎn)
為了清晰和簡(jiǎn)潔,編輯所有副本

創(chuàng)建一個(gè)焦點(diǎn)


每個(gè)設(shè)計(jì)都應(yīng)該有一個(gè)焦點(diǎn)。焦點(diǎn)是幾乎每個(gè)用戶都會(huì)首先看到的設(shè)計(jì)的一部分。它通常具有高度的視覺效果,或與屏幕上的其他元素形成鮮明對(duì)比。
協(xié)調(diào)中心應(yīng)該確定設(shè)計(jì)的內(nèi)容以及用戶應(yīng)該關(guān)心的原因。
在上面的例子中,Abingworth使用亮粉紅色斑點(diǎn)作為焦點(diǎn)。它由于顏色和好奇(它是什么?)而引起注意,因?yàn)樗c屏幕另一側(cè)的白色開放空間形成對(duì)比。
設(shè)計(jì)的重點(diǎn)應(yīng)該是你最好的形象,插圖或動(dòng)畫,并與關(guān)鍵信息相關(guān)。協(xié)調(diào)中心應(yīng)該確定設(shè)計(jì)的內(nèi)容以及用戶應(yīng)該關(guān)心的原因。因?yàn)檫@是用戶看起來的第一個(gè)地方,它為他們?nèi)绾危ㄒ约叭绻┡c設(shè)計(jì)交互設(shè)定了基調(diào)。
結(jié)論
創(chuàng)建用戶實(shí)際閱讀的內(nèi)容不僅僅是屏幕上的文本。它將書寫和視覺元素結(jié)合在一起,吸引用戶,幫助他們了解設(shè)計(jì)的內(nèi)容,然后決定與其保持交互。

雖然聽起來很多,但這一切都發(fā)生在毫秒級(jí)。有研究表明,大多數(shù)用戶對(duì)金魚的注意力都在8秒之內(nèi) - 在那些容易閱讀的內(nèi)容中充分利用時(shí)間。


本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:重慶網(wǎng)站建設(shè)公司成都網(wǎng)頁設(shè)計(jì)公司,成都網(wǎng)站設(shè)計(jì)公司,網(wǎng)站建設(shè) 成都,成都 網(wǎng)站建設(shè),成都企業(yè)網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),網(wǎng)站建設(shè)設(shè)計(jì),網(wǎng)站開發(fā)網(wǎng)站制作設(shè)計(jì)

當(dāng)前標(biāo)題:網(wǎng)頁設(shè)計(jì)中如何為Web設(shè)計(jì)可讀內(nèi)容
當(dāng)前鏈接:http://www.muchs.cn/news22/172672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、App設(shè)計(jì)靜態(tài)網(wǎng)站、軟件開發(fā)網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化