超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

2018-5-29    藍(lán)藍(lán)設(shè)計(jì)的小編

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

眾所周知,相較于平淡無(wú)奇,毫無(wú)重點(diǎn)的網(wǎng)頁(yè)UI設(shè)計(jì),具有良好視覺(jué)層次結(jié)構(gòu)的網(wǎng)頁(yè)UI設(shè)計(jì)更受用戶青睞。為什么呢?答案其實(shí)很簡(jiǎn)單。極賦視覺(jué)層次感的頁(yè)面設(shè)計(jì)不僅極具設(shè)計(jì)美感,取悅用戶身心。而且還建立了清晰直觀的視覺(jué)層級(jí), 方便用戶簡(jiǎn)單快速的識(shí)別和讀取需要的頁(yè)面內(nèi)容,從而提升用戶體驗(yàn),降低跳出率。

但是,究竟如何才能結(jié)合網(wǎng)頁(yè)/產(chǎn)品特色和用戶的真實(shí)需求, 將頁(yè)面視覺(jué)內(nèi)容層級(jí)化, 從而提供更加優(yōu)質(zhì)的用戶體驗(yàn),實(shí)現(xiàn)與用戶的互動(dòng), 最終促成產(chǎn)品購(gòu)買(mǎi)呢?下面小編就結(jié)合且具有極佳視覺(jué)層次感的網(wǎng)頁(yè)設(shè)計(jì)實(shí)例分析和介紹視覺(jué)內(nèi)容組織技巧,以及在原型化這些網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中(這里結(jié)合了 一款原型工具M(jìn)ockplus進(jìn)行詳細(xì)說(shuō)明)需要注意的原型設(shè)計(jì)技巧:

1.利用界面元素尺寸大小建立層級(jí)結(jié)構(gòu)

界面元素(例如文字,圖片或形狀等)尺寸越大,越突出,越容易吸引用戶的注意。所以,在具體的網(wǎng)頁(yè)界面設(shè)計(jì)中,設(shè)計(jì)師可以通過(guò)有梯度的尺寸變化,創(chuàng)建頁(yè)面信息的層級(jí)關(guān)系。當(dāng)然內(nèi)容重要性上,也應(yīng)該是與尺寸大小成正比的(即越大越重要)。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,利用文字的尺寸大小,體現(xiàn)網(wǎng)頁(yè)信息的層級(jí)。

注意:尺寸大小也要控制在用戶能夠接受的范圍內(nèi)

太大,能夠展示的內(nèi)容有限。太小,易讀性差,也會(huì)比較繁雜。

原型設(shè)計(jì)技巧:

在利用Mockplus (一款具有豐富組件庫(kù)和圖標(biāo)庫(kù)的原型工具)創(chuàng)建網(wǎng)頁(yè)原型時(shí),絕大部分的組件都是可以簡(jiǎn)單通過(guò)寬高屬性或拖拉邊框兩種方式調(diào)整其尺寸,輕松創(chuàng)建直觀的層次結(jié)構(gòu)。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,Mockplus允許用戶簡(jiǎn)單通過(guò)寬高屬性或拖拉邊框的方式調(diào)整組件尺寸大小。

2.利用界面元素明暗,陰影以及透明度的不同,體現(xiàn)簡(jiǎn)單層級(jí)

如白底黑字般,同類元素,同一色彩,不同的明暗,陰影以及透明度,也可體現(xiàn)簡(jiǎn)單的層級(jí)關(guān)系。當(dāng)然,在沒(méi)有過(guò)多顏色的參與下,不同文字,圖片等多種的頁(yè)面元素結(jié)合透明度,陰影以及明暗,也可使整款設(shè)計(jì)極具簡(jiǎn)約風(fēng)和層次感。(點(diǎn)擊鏈接更多的簡(jiǎn)約風(fēng)網(wǎng)頁(yè)設(shè)計(jì)技巧)

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,文字明暗,結(jié)合尺寸變化,讓頁(yè)面層級(jí)更加清晰簡(jiǎn)約:

原型設(shè)計(jì)技巧:

而在這一方面,小編發(fā)現(xiàn)Mockplus提供了專門(mén)透明度屬性,可以根據(jù)層級(jí)設(shè)計(jì)需求,修改屬性數(shù)值進(jìn)行設(shè)置。

如若,需要添加元素陰影,也可輕松通過(guò)組件的重疊實(shí)現(xiàn)。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,“圖片”與“形狀”組件的組合,實(shí)現(xiàn)陰影的添加。

3.利用色彩,劃分頁(yè)面層級(jí)

色彩,作為設(shè)計(jì)師最常使用的視覺(jué)層次工具,也為他們創(chuàng)建極富層級(jí)感的網(wǎng)頁(yè)設(shè)計(jì)發(fā)揮著舉足輕重的作用。而具體的設(shè)計(jì)技巧,大家可以參考以下幾點(diǎn):

首先,色彩明亮的頁(yè)面元素更容易從相對(duì)柔和的元素中脫穎而出。如圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,明亮的紅色和黃色更易從相對(duì)較柔和的粉色背景中脫穎而出。

而且,某些色彩,尤其是某些主題配色方案的選擇,對(duì)于確定網(wǎng)頁(yè)的整體基調(diào),吸引用戶注意,作用也非常明顯。例如,藍(lán)色,一般代表平靜祥和,適合一些日常事物管理類軟件選擇。而紅色,則代表熱情喜氣,適合一些節(jié)日相關(guān)購(gòu)物促銷類軟件選擇。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,利用紅色突出網(wǎng)頁(yè)促銷信息。

其次,色彩飽和度的梯度變化,也可體現(xiàn)直觀而豐富的層次結(jié)構(gòu)。

同一色彩,飽和度的梯度變化,也可幫助展現(xiàn)網(wǎng)站元素的層次結(jié)構(gòu)。如圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

最后,色彩模塊,對(duì)于體現(xiàn)界面元素的邏輯關(guān)系,作用也是顯而易見(jiàn)

存在同一邏輯關(guān)系的各個(gè)頁(yè)面元素就近放置在同一色彩模塊,可以讓頁(yè)面組織結(jié)構(gòu)更加清晰,易于用戶快速查看相關(guān)內(nèi)容。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,利用色彩模塊,更直觀地劃分功能區(qū)。

原型設(shè)計(jì)技巧:

而這一方面,Mockplus提供了非常強(qiáng)大的色彩選擇器,設(shè)計(jì)師們可以簡(jiǎn)單點(diǎn)擊實(shí)現(xiàn)色彩的選擇和添加。其色彩收藏功能,也為以后復(fù)用和保持整款設(shè)計(jì)配色的一致性提供了可能。

當(dāng)然,結(jié)合“形狀”組件,為頁(yè)面添加豐富的功能色塊,以及添加“鼠標(biāo)懸停時(shí)”或“點(diǎn)擊時(shí)”的簡(jiǎn)單色彩交互狀態(tài),也不是難事。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,添加色塊劃分界面功能結(jié)構(gòu)。

4.利用頁(yè)面布局,展現(xiàn)網(wǎng)頁(yè)層級(jí)結(jié)構(gòu)

頁(yè)面布局也是設(shè)計(jì)師們常用的視覺(jué)工具之一。一方面,同一網(wǎng)站,內(nèi)部各個(gè)頁(yè)面可以根據(jù)軟件或產(chǎn)品展示內(nèi)容需求,采用多樣的布局模式,增加頁(yè)面的多變性和可讀性。另一方面,也可直接在不同頁(yè)面采用重復(fù)的頁(yè)面布局,方便幫助用戶形成一定的閱讀習(xí)慣,快速有效的查詢需要的信息。

而具體單個(gè)頁(yè)面的布局模式,大家可以嘗試以下的方式實(shí)現(xiàn):

*利用網(wǎng)格劃分不同頁(yè)面模塊

網(wǎng)格是公認(rèn)的劃分頁(yè)面功能模塊的工具之一。而它在組織界面視覺(jué)內(nèi)容方面,作用也不可小視。加之,結(jié)合各個(gè)網(wǎng)格的色彩變化,也能使整個(gè)頁(yè)面更加炫酷直觀。如下圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

*利用位置不同體現(xiàn)邏輯關(guān)系

同一邏輯關(guān)系(比如同類,從屬,因果等)或相近/相關(guān)的元素放在同一或并列的網(wǎng)頁(yè)位置或模塊內(nèi),更易于用戶瀏覽所需頁(yè)面信息。

當(dāng)然,每個(gè)邏輯關(guān)系內(nèi),結(jié)合大小標(biāo)題和列表進(jìn)行展示,層級(jí)關(guān)系會(huì)更加深入清晰。

*利用點(diǎn)線

網(wǎng)頁(yè)設(shè)計(jì)中,設(shè)計(jì)師不僅可以直接使用點(diǎn)線標(biāo)出需要強(qiáng)調(diào)的內(nèi)容,還可以利用點(diǎn)線劃分頁(yè)面板塊和布局。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,通過(guò)位置的不同體現(xiàn)內(nèi)容之間的邏輯關(guān)系。同時(shí),利用線條劃分頁(yè)面結(jié)構(gòu)和布局。

*利用對(duì)齊方式的不同

文字,圖片以及相關(guān)元素的對(duì)齊方式,也是體驗(yàn)不同層級(jí)結(jié)構(gòu)的重要工具。

總之,頁(yè)面布局也可幫助設(shè)計(jì)師們創(chuàng)建更具美感和層次感的網(wǎng)頁(yè)設(shè)計(jì)。

原型設(shè)計(jì)技巧:

在使用Mockplus時(shí),設(shè)計(jì)師可簡(jiǎn)單使用“快速格子+自動(dòng)填充”的功能組合,實(shí)現(xiàn)界面網(wǎng)格的輕松添加。而且,在具體的設(shè)計(jì)過(guò)程中,對(duì)齊方式,標(biāo)尺以及參考線等工具的使用,也可使網(wǎng)頁(yè)布局設(shè)計(jì)更加簡(jiǎn)便快捷。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,利用Mockplus的快速格子和自動(dòng)填充功能制作網(wǎng)頁(yè)網(wǎng)格,劃分界面功能結(jié)構(gòu)。

5.利用留白和間距,突出界面視覺(jué)內(nèi)容

留白的巧妙運(yùn)用,能夠非常有效地突出頁(yè)面信息。而頁(yè)面內(nèi)部元素之間,保持適當(dāng)?shù)拈g距,讓彼此之間的相互聯(lián)系而不“擁擠雜亂”,也是吸引用戶注意的不錯(cuò)策略。如圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

6.利用對(duì)比,凸顯網(wǎng)頁(yè)層級(jí)結(jié)構(gòu)關(guān)系

以上所提及的各種視覺(jué)組織工具,例如尺寸,色彩,明暗,間距等等,同類或不同類之間的鮮明對(duì)比,也可以讓頁(yè)面視覺(jué)上更加美觀而豐富,同時(shí)體現(xiàn)元素之間的結(jié)構(gòu)層次關(guān)系。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,利用色彩的強(qiáng)烈對(duì)比,突出頁(yè)面層級(jí)。

此外,頁(yè)面元素的相互疊加,清晰度,以及細(xì)節(jié)展示程度的對(duì)比,也能有效地凸顯網(wǎng)頁(yè)內(nèi)容的重要性層級(jí)。

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

如圖,靠前的圖片和文字應(yīng)該更加重要,清晰,細(xì)節(jié)也應(yīng)更豐富,從而方便用戶識(shí)別讀取,避免層次混亂。

7.采用不同的界面風(fēng)格,打造獨(dú)特的網(wǎng)頁(yè)視覺(jué)層級(jí)

當(dāng)然,并不是說(shuō)設(shè)計(jì)師就必須通過(guò)以上的設(shè)計(jì)工具展示網(wǎng)頁(yè)重要性層級(jí)結(jié)構(gòu)。實(shí)際上,結(jié)合設(shè)計(jì)師特有創(chuàng)意,獨(dú)特紋理(texture),圖形或圖像元素等,打造出具有設(shè)計(jì)師獨(dú)特風(fēng)格的視覺(jué)層級(jí),也會(huì)是不錯(cuò)的嘗試。如下圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

總之,不管是否使用以上的設(shè)計(jì)工具,結(jié)合設(shè)計(jì)師創(chuàng)意,打造獨(dú)具一格的視覺(jué)層級(jí)風(fēng)格,都是不錯(cuò)的設(shè)計(jì)理念。

原型設(shè)計(jì)技巧:

而在這一點(diǎn)上,Mockplus提供了很多優(yōu)質(zhì)功能,幫助設(shè)計(jì)師隨心設(shè)計(jì),并簡(jiǎn)單快捷的原型化,測(cè)試和迭代這些天馬行空的創(chuàng)意。

比如,其團(tuán)隊(duì)協(xié)作和團(tuán)隊(duì)管理功能,方便設(shè)計(jì)師更加地完成設(shè)計(jì)。其8種演示和分享方式,例如導(dǎo)出圖片,HTML以及演示包等等,為設(shè)計(jì)師根據(jù)切實(shí)需要,選擇適當(dāng)?shù)姆绞綔y(cè)試和分享相關(guān)設(shè)計(jì)提供了便利。

此外,其組件樣式庫(kù),也為保存和分享需要的組件樣式并隨時(shí)復(fù)用提供了可能。

8.分析用戶需求和網(wǎng)頁(yè)瀏覽模式,優(yōu)化頁(yè)面內(nèi)容和位置

在進(jìn)行網(wǎng)頁(yè)界面層級(jí)結(jié)構(gòu)化的過(guò)程中,并不是毫無(wú)章法,盲目的隨意添加或突出某個(gè)部分,而是需要分析用戶行為,根據(jù)用戶需求等級(jí)進(jìn)行相應(yīng)結(jié)構(gòu)層次的劃分。否則,再怎么賦有層次感,用戶也會(huì)因?yàn)檎也坏叫枰臇|西,莞爾離開(kāi)。

此外,除了根據(jù)用需求決定哪些內(nèi)容需要放在最緊要,最突出的位置,以吸引用戶。同時(shí)還需要根據(jù)用戶瀏覽網(wǎng)頁(yè)時(shí)的閱讀模式,分析重要內(nèi)容的頁(yè)面位置。

根據(jù)美國(guó)著名網(wǎng)站設(shè)計(jì)工程師Nielsen Norman Group研究表示,用戶總是在網(wǎng)頁(yè)瀏覽中慣用“F”或“Z”型閱讀模式,即用戶常常是從左到右,開(kāi)頭結(jié)尾詳細(xì)閱讀,而中間部分則根據(jù)網(wǎng)頁(yè)或文章大小標(biāo)題結(jié)構(gòu),選擇性閱讀的模式。如下圖:

2018網(wǎng)頁(yè)UI設(shè)計(jì):輕松搞定視覺(jué)層次感

那么,網(wǎng)頁(yè)設(shè)計(jì)中,設(shè)計(jì)師就需要注意頁(yè)面首尾內(nèi)容的趣味性和實(shí)用性,以及中間主體部分注意大小標(biāo)題簡(jiǎn)潔明了,建立清晰的框架層次結(jié)構(gòu)。

總之,無(wú)論是用戶行為畫(huà)像,還是用戶瀏覽模式分析,最終都是希望能夠根據(jù)用戶需求,更加合理的安排和分布頁(yè)面內(nèi)容,直觀清晰,易識(shí)別。

9.其他設(shè)計(jì)工具

而其它視覺(jué)設(shè)計(jì)工具,例如界面文本方面,文本字體,排版,對(duì)齊方式等等,也可突出頁(yè)面的層級(jí)關(guān)系。

原型設(shè)計(jì)技巧:

如若設(shè)計(jì)師希望通過(guò)網(wǎng)頁(yè)文本的尺寸,字體,顏色,排版以及對(duì)齊方式等實(shí)現(xiàn)框架結(jié)構(gòu)的構(gòu)建時(shí),Mockplus的“單行文字”和“多行文字”組件就可以輕松幫助實(shí)現(xiàn)。而且,適當(dāng)?shù)慕Y(jié)合一定的交互設(shè)計(jì),也可使整款設(shè)計(jì)更具吸引力。

結(jié)語(yǔ)

當(dāng)然,層次結(jié)構(gòu)化不僅能讓網(wǎng)頁(yè)更加直觀清晰,賞心悅目。而且,具有一定局限性的Android 或iOS app,例如頁(yè)面尺寸的限制,設(shè)備屏幕的限制,響應(yīng)與否的限制等等,更需要清晰的層次結(jié)構(gòu),讓頁(yè)面擺脫混亂繁雜,吸引更多用戶點(diǎn)擊使用。而這方面,也同樣適用以上所有設(shè)計(jì)技巧。

總之, 無(wú)論如何, 及時(shí)地將各種設(shè)計(jì)想法,通過(guò)一款實(shí)用且強(qiáng)大的原型工具(比如以上介紹到的Mockplus), 轉(zhuǎn)化成直觀可視的原型,更進(jìn)一步的測(cè)試和迭代,才是創(chuàng)建真正美觀實(shí)用,深受用戶喜愛(ài)的web/app的必經(jīng)之道。

總之,希望以上介紹的相關(guān)層次結(jié)構(gòu)設(shè)計(jì)技巧和原型設(shè)計(jì)技巧能對(duì)你有所啟發(fā)。

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔