熱文推薦
- 網(wǎng)站運(yùn)營(yíng)中的心理學(xué):如何影響用戶…
- 深圳SEO優(yōu)化中,如何規(guī)避常見(jiàn)的優(yōu)…
- APP設(shè)計(jì)有哪些需要注意的細(xì)節(jié)
- 商業(yè)網(wǎng)站建設(shè)一般存在哪些誤區(qū)?
- 截屏為什么火了原因分析-深圳網(wǎng)站…
- 網(wǎng)站設(shè)計(jì)中包含哪些內(nèi)容?
- 深圳SEO優(yōu)化中的技術(shù)細(xì)節(jié),你必須…
- 網(wǎng)站內(nèi)容更新的最佳實(shí)踐,保持搜索…
- UI視覺(jué)設(shè)計(jì)師工作流程的總結(jié)與建議…
- 為什么別人就能設(shè)計(jì)出高大上的頁(yè)面…

網(wǎng)頁(yè)設(shè)計(jì)師,可以從印刷設(shè)計(jì)學(xué)些什么?
1. 讓讀者保持專注
印刷設(shè)計(jì)專注于易讀性,網(wǎng)頁(yè)上也是如此:只是把“讀者”換成“用戶”而已。
目標(biāo)應(yīng)當(dāng)是清晰的表達(dá),并且讓人能夠輕松縱覽整個(gè)設(shè)計(jì)。我們來(lái)看幾個(gè)從印刷設(shè)計(jì)沿用過(guò)來(lái)的概念。
排版
就像報(bào)紙,用戶不會(huì)閱讀網(wǎng)站上的每個(gè)字——至少一開(kāi)始不會(huì)。正如免費(fèi)電子書(shū)《為人眼進(jìn)行網(wǎng)頁(yè)UI設(shè)計(jì)》里面描述的,掃視頁(yè)面是用戶的標(biāo)準(zhǔn)行為。
為掃視而設(shè)計(jì)時(shí),有兩種模式需要考慮。首先是F模式。
F模式反映了用戶zui通常的掃視頁(yè)面的方式。他們的視線從上面開(kāi)始橫向移動(dòng),然后沿著左邊垂直移動(dòng),尋找突出的文字。
一旦找到激起他們興趣的內(nèi)容,他們又會(huì)開(kāi)始橫向?yàn)g覽頁(yè)面。
還有Z模式:
Z模式也是一種自然的瀏覽模式,通常用于報(bào)紙,網(wǎng)頁(yè)上也是如此。用戶在頁(yè)面頂部水平瀏覽,然后向左下移動(dòng),在頁(yè)面的下一行再次進(jìn)行水平移動(dòng)搜尋。
文字
和印刷一樣,網(wǎng)頁(yè)文字也應(yīng)該有清晰的層次。選擇適合的字號(hào),有助于關(guān)鍵詞在頁(yè)面上突出,讓用戶更輕松的瀏覽頁(yè)面。
清晰的文字層次:World Baking Day網(wǎng)站
我們來(lái)看看文字層次中一些常見(jiàn)的層級(jí):
主要:頁(yè)面上zui顯著的文字更大更閃耀,吸引用戶的注意力。通常用于標(biāo)題與裝飾。
次要:介于中間的所有內(nèi)容。不像標(biāo)題那么顯著,但要在頁(yè)面的常規(guī)文字中突出顯示。
再次:主要內(nèi)容所選的文字。文字層次中的這一級(jí),有助于使用戶沉浸在正文中。
其他:更小的一級(jí),使用斜體、粗體、下劃線、不同顏色等等。
配合運(yùn)用,建立文字的層次,可以創(chuàng)造出秩序,防止用戶迷失其中。
要測(cè)試你頁(yè)面的易讀性,可以使用“3秒原則”:簡(jiǎn)略地瀏覽頁(yè)面,然后看向別處。其中突出的內(nèi)容有沒(méi)有反映出你設(shè)計(jì)意圖?如果是的,那你方向正確,繼續(xù)保持;如果不是,則需要打回重新設(shè)計(jì)——可能確實(shí)如此。
2. 建立平衡感
無(wú)論平衡感來(lái)自于對(duì)稱、非對(duì)稱或是放射狀,都是為了讓設(shè)計(jì)創(chuàng)造出穩(wěn)固與一致的感覺(jué)。如果用戶在你的網(wǎng)頁(yè)上感到輕松,他們會(huì)更愿意逗留。
圖片或文字不要過(guò)于密集:時(shí)刻考慮元素的間隙。排版傾向于簡(jiǎn)潔——密集的布局會(huì)妨礙用戶。眼睛難以接受雜亂,使人更難接受信息的流轉(zhuǎn)。
考慮使用極簡(jiǎn)的設(shè)計(jì),通過(guò)白色、黑色或非常深的背景和前景元素達(dá)到平衡?!稙槿搜圻M(jìn)行網(wǎng)頁(yè)UI設(shè)計(jì)》里討論過(guò),負(fù)空間的運(yùn)用可以引導(dǎo)用戶的注意力。
網(wǎng)頁(yè)上極少干擾信息,創(chuàng)造了一種平靜與秩序的感覺(jué)——當(dāng)然,也希望有助于促成用戶購(gòu)買(mǎi)。
3. 創(chuàng)造可靠的設(shè)計(jì)
讓你的設(shè)計(jì)對(duì)于所有用戶都是可靠的。不要使用兩種以上的字體,確保所有年齡層的用戶都能閱讀。過(guò)于雜亂會(huì)擾亂信息。
如果你發(fā)現(xiàn)自己在屏幕前手足無(wú)措,你的設(shè)計(jì)可能包含了過(guò)多的圖片。
選擇配色方案時(shí)也要時(shí)刻為用戶著想——如果是醫(yī)院網(wǎng)站,使用冷靜柔和的色彩;如果受眾是青少年,則適合更鮮明的色彩。
下面是一些書(shū)籍設(shè)計(jì)中常犯的錯(cuò)誤,同樣適用于網(wǎng)頁(yè):
-
未經(jīng)過(guò)足夠的測(cè)試:始終要盡可能廣泛對(duì)設(shè)計(jì)進(jìn)行測(cè)試。內(nèi)容可能會(huì)跨越多種媒介(網(wǎng)頁(yè)、電子書(shū)、印刷品),這會(huì)使得文字有新面貌。而且,有些字體轉(zhuǎn)換到新媒介上可能會(huì)變得不易閱讀。找到適用于所有情境的字體非常重要。還要考慮你的設(shè)計(jì)在不同屏幕尺寸、不同分辨率和不同瀏覽器中如何展現(xiàn)。
-
不恰當(dāng)?shù)恼Z(yǔ)調(diào):為每個(gè)頁(yè)面元素選擇正確的語(yǔ)調(diào)。與字體一樣,標(biāo)題應(yīng)該吸引讀者注意,副標(biāo)題作為標(biāo)題的闡明或補(bǔ)充,正文要像一段友好的對(duì)話——溫暖親切,讓讀者渴望了解更多信息。
-
不恰當(dāng)?shù)母袷剑鹤裱闼x的媒介:否則,會(huì)一直浪費(fèi)時(shí)間修改文件,應(yīng)對(duì)CMYK用于印刷、RGB用于網(wǎng)站這樣的問(wèn)題。
http://www.dongguanlifeng.com/wangzhansheji/3337.html 網(wǎng)頁(yè)設(shè)計(jì)師,可以從印刷設(shè)計(jì)學(xué)些什么?
相關(guān)新聞
- 深圳網(wǎng)站制作中的頁(yè)面加載速度優(yōu)化:讓客戶不…
- 深圳網(wǎng)站制作與品牌建設(shè):如何打造獨(dú)特的品牌…
- 如何避免深圳網(wǎng)站制作中的常見(jiàn)設(shè)計(jì)誤區(qū)?
- 深圳自適應(yīng)網(wǎng)站設(shè)計(jì):如何讓網(wǎng)站更智能、便捷…
- 深圳網(wǎng)站建設(shè)中的數(shù)據(jù)安全:保護(hù)你的在線資產(chǎn)…
- 深圳網(wǎng)站制作中的頁(yè)面結(jié)構(gòu)設(shè)計(jì):提升用戶留存…
- 在深圳如何打造一個(gè)高效的企業(yè)官方網(wǎng)站?
- 從客戶需求到上線:深圳網(wǎng)站制作的全流程拆解…