如何更好的把握設(shè)計(jì)布局和細(xì)節(jié)

2021-04-05    分類: 網(wǎng)站建設(shè)

1.保持導(dǎo)航和內(nèi)容的清晰流暢。


留白不代表一定要用白色,而是預(yù)留出一些范圍來組織頁(yè)面空間中的元素,組織頁(yè)面中的細(xì)節(jié): 導(dǎo)航、頁(yè)眉頁(yè)腳、圖像、文字、列表、logo、圖片等


如圖所示:拿google首頁(yè)和google產(chǎn)品做一個(gè)對(duì)比,同一個(gè)空間下的logo、導(dǎo)航、文字的清晰元素布局




2. 增強(qiáng)文字和圖片的可讀性。


研究用戶,設(shè)計(jì)師即使是創(chuàng)建一些簡(jiǎn)單簡(jiǎn)潔的設(shè)計(jì),其過程也是非常復(fù)雜的。


如圖所示:這是國(guó)內(nèi)外最知名的專注寫作的社區(qū),標(biāo)題與摘要,側(cè)邊欄與正文區(qū)的區(qū)隔




3. 建立平衡和諧的布局。


網(wǎng)格布局是貫穿整個(gè)網(wǎng)頁(yè)設(shè)計(jì)的,網(wǎng)格設(shè)計(jì)在美國(guó)視覺設(shè)計(jì)中是一門深入的學(xué)科,保持各種網(wǎng)格的輕重,平衡設(shè)計(jì)模塊。


如圖所示:彈窗與正文的網(wǎng)格平衡,網(wǎng)格系統(tǒng)的黃金比例的平衡






4. 減少視覺疲勞。


充分利用色彩、光、影來適配人的視覺系統(tǒng),減少疲勞,調(diào)配感官色。


如圖所示:使用設(shè)計(jì)師網(wǎng)站和谷歌音樂做一個(gè)對(duì)比,寬屏下的視覺效果和作品hover時(shí)的文字按鈕間距大小差異, 谷歌音樂內(nèi)容和純色底色,頭部底部的距離差異




5. 能夠給元素的藝術(shù)表現(xiàn)提供可持續(xù)的空間。


倘若你孤單一人,站在一個(gè)2平米的石板上和站在一個(gè)10平米的石板上,在10平米的范圍內(nèi)你的周圍可以放置音響,你可以跳舞(哈哈,抱歉,我就是熱于跳舞的才打這個(gè)比方),在2平米的石板上你可以拿個(gè)麥克風(fēng)喊麥,可以玩倒立。留白也可以說能夠預(yù)留儲(chǔ)存空間,便于擴(kuò)展和利用。


如圖所示:人的活動(dòng)空間,文字的表達(dá)空間




尾聲:


總之,我們分析留白的時(shí)候,需要引入原生的一些原理,會(huì)比較容易理解。比如美術(shù)中的透視,色彩關(guān)系,空間關(guān)系,比如網(wǎng)格設(shè)計(jì)理論,比如網(wǎng)頁(yè)設(shè)計(jì)中的中英文字體規(guī)范,分辨率,安全寬度,首屏高度規(guī)范。通過這些原生的原理,我們能更好的把握設(shè)計(jì)布局和設(shè)計(jì)細(xì)節(jié)。

本文題目:如何更好的把握設(shè)計(jì)布局和細(xì)節(jié)
文章鏈接:http://www.bm7419.com/news44/106494.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、動(dòng)態(tài)網(wǎng)站品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站外貿(mào)建站、小程序開發(fā)

廣告

聲明:本網(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)

商城網(wǎng)站建設(shè)