新聞動態(tài)
怎樣進(jìn)行網(wǎng)頁UI設(shè)計讓視覺層次感更加突出?
公司新聞 發(fā)布者:JHC 2019-09-03 11:36 訪問量:304
眾所周知,相較于平淡無奇,毫無重點(diǎn)的網(wǎng)頁UI設(shè)計,具有良好視覺層次結(jié)構(gòu)的網(wǎng)頁UI設(shè)計更受用戶青睞。為什么呢?答案其實(shí)很簡單。極賦視覺層次感的頁面設(shè)計不僅極具設(shè)計美感,取悅用戶身心。而且還建立了清晰直觀的視覺層級, 方便用戶簡單快速的識別和讀取需要的頁面內(nèi)容,從而提升用戶體驗(yàn),降低跳出率。
但是,究竟如何才能結(jié)合網(wǎng)頁/產(chǎn)品特色和用戶的真實(shí)需求, 將頁面視覺內(nèi)容層級化, 從而提供更加優(yōu)質(zhì)的用戶體驗(yàn),實(shí)現(xiàn)與用戶的互動, 最終促成產(chǎn)品購買呢?下面小編就結(jié)合最新且具有極佳視覺層次感的網(wǎng)頁設(shè)計實(shí)例分析和介紹視覺內(nèi)容組織技巧,以及在原型化這些網(wǎng)頁設(shè)計的過程中(這里結(jié)合了 一款原型工具M(jìn)ockplus進(jìn)行詳細(xì)說明)需要注意的原型設(shè)計技巧:
1.利用界面元素尺寸大小建立層級結(jié)構(gòu)
界面元素(例如文字,圖片或形狀等)尺寸越大,越突出,越容易吸引用戶的注意。所以,在具體的網(wǎng)頁界面設(shè)計中,設(shè)計師可以通過有梯度的尺寸變化,創(chuàng)建頁面信息的層級關(guān)系。當(dāng)然內(nèi)容重要性上,也應(yīng)該是與尺寸大小成正比的(即越大越重要)。
2.利用界面元素明暗,陰影以及透明度的不同,體現(xiàn)簡單層級
如白底黑字般,同類元素,同一色彩,不同的明暗,陰影以及透明度,也可體現(xiàn)簡單的層級關(guān)系。當(dāng)然,在沒有過多顏色的參與下,不同文字,圖片等多種的頁面元素結(jié)合透明度,陰影以及明暗,也可使整款設(shè)計極具簡約風(fēng)和層次感。(點(diǎn)擊鏈接更多的簡約風(fēng)網(wǎng)頁設(shè)計技巧)
3.利用色彩,劃分頁面層級
色彩,作為設(shè)計師最常使用的視覺層次工具,也為他們創(chuàng)建極富層級感的網(wǎng)頁設(shè)計發(fā)揮著舉足輕重的作用。而具體的設(shè)計技巧,大家可以參考以下幾點(diǎn):
首先,色彩明亮的頁面元素更容易從相對柔和的元素中脫穎而出。而且,某些色彩,尤其是某些主題配色方案的選擇,對于確定網(wǎng)頁的整體基調(diào),吸引用戶注意,作用也非常明顯。例如,藍(lán)色,一般代表平靜祥和,適合一些日常事物管理類軟件選擇。而紅色,則代表熱情喜氣,適合一些節(jié)日相關(guān)購物促銷類軟件選擇。其次,色彩飽和度的梯度變化,也可體現(xiàn)直觀而豐富的層次結(jié)構(gòu)。
同一色彩,飽和度的梯度變化,也可幫助展現(xiàn)網(wǎng)站元素的層次結(jié)構(gòu)。最后,色彩模塊,對于體現(xiàn)界面元素的邏輯關(guān)系,作用也是顯而易見存在同一邏輯關(guān)系的各個頁面元素就近放置在同一色彩模塊,可以讓頁面組織結(jié)構(gòu)更加清晰,易于用戶快速查看相關(guān)內(nèi)容。
4.利用頁面布局,展現(xiàn)網(wǎng)頁層級結(jié)構(gòu)
頁面布局也是設(shè)計師們常用的視覺工具之一。一方面,同一網(wǎng)站,內(nèi)部各個頁面可以根據(jù)軟件或產(chǎn)品展示內(nèi)容需求,采用多樣的布局模式,增加頁面的多變性和可讀性。另一方面,也可直接在不同頁面采用重復(fù)的頁面布局,方便幫助用戶形成一定的閱讀習(xí)慣,快速有效的查詢需要的信息。
5.利用留白和間距,突出界面視覺內(nèi)容
留白的巧妙運(yùn)用,能夠非常有效地突出頁面信息。而頁面內(nèi)部元素之間,保持適當(dāng)?shù)拈g距,讓彼此之間的相互聯(lián)系而不“擁擠雜亂”,也是吸引用戶注意的不錯策略。
6.利用對比,凸顯網(wǎng)頁層級結(jié)構(gòu)關(guān)系
以上所提及的各種視覺組織工具,例如尺寸,色彩,明暗,間距等等,同類或不同類之間的鮮明對比,也可以讓頁面視覺上更加美觀而豐富,同時體現(xiàn)元素之間的結(jié)構(gòu)層次關(guān)系。
7.采用不同的界面風(fēng)格,打造獨(dú)特的網(wǎng)頁視覺層級
當(dāng)然,并不是說設(shè)計師就必須通過以上的設(shè)計工具展示網(wǎng)頁重要性層級結(jié)構(gòu)。實(shí)際上,結(jié)合設(shè)計師特有創(chuàng)意,獨(dú)特紋理(texture),圖形或圖像元素等,打造出具有設(shè)計師獨(dú)特風(fēng)格的視覺層級,也會是不錯的嘗試。
8.分析用戶需求和網(wǎng)頁瀏覽模式,優(yōu)化頁面內(nèi)容和位置
在進(jìn)行網(wǎng)頁界面層級結(jié)構(gòu)化的過程中,并不是毫無章法,盲目的隨意添加或突出某個部分,而是需要分析用戶行為,根據(jù)用戶需求等級進(jìn)行相應(yīng)結(jié)構(gòu)層次的劃分。否則,再怎么賦有層次感,用戶也會因?yàn)檎也坏叫枰臇|西,莞爾離開。
9.其他設(shè)計工具
而其它視覺設(shè)計工具,例如界面文本方面,文本字體,排版,對齊方式等等,也可突出頁面的層級關(guān)系。
關(guān)鍵字: 網(wǎng)頁設(shè)計 UI設(shè)計 網(wǎng)站優(yōu)化 開封網(wǎng)站優(yōu)化 網(wǎng)頁UI設(shè)計
文章連接: http://www.hsjyfc.com.cn/gsxw/412.html
版權(quán)聲明:文章由 晨展科技 整理收集,來源于互聯(lián)網(wǎng)或者用戶投稿,如有侵權(quán),請聯(lián)系我們,我們會立即刪除。如轉(zhuǎn)載請保留