- 零基礎(chǔ)學(xué)網(wǎng)頁UI設(shè)計(jì)
- 胡雪梅
- 374字
- 2020-11-02 10:02:41
1.5.7 縱向分割風(fēng)格
縱向分割設(shè)計(jì)風(fēng)格的特點(diǎn)是將屏幕一分為二,甚至是分為多欄。在網(wǎng)頁UI設(shè)計(jì)中使用分屏式設(shè)計(jì)可以方便呈現(xiàn)不同的信息,制造左右對比的效果,同時(shí)劃分網(wǎng)頁的有效區(qū)域,方便用戶進(jìn)行快速選擇和視覺聚焦。圖1-33所示為縱向分割風(fēng)格的網(wǎng)頁UI。

圖1-33 縱向分割風(fēng)格網(wǎng)頁
☆ 小技巧:縱向分割風(fēng)格網(wǎng)頁中分割線的偏向性
縱向居中分割頁面:使用縱向線分割頁面時(shí),分割線居中就等于均等分割網(wǎng)頁,但視覺偏向左邊時(shí),頁面會更具母性,即內(nèi)向型。相反,如果視覺偏向右邊時(shí),網(wǎng)頁頁面則具有父性,即外向型。
縱向分割且左側(cè)面積大:當(dāng)頁面被縱向分割時(shí),左右排布的內(nèi)容就會具備一種包含時(shí)間性的隱喻。左側(cè)面積較大時(shí),會表現(xiàn)出過去、經(jīng)典的感覺,或暗含過去的屬性。
縱向分割且右側(cè)面積大:右側(cè)面積較大時(shí),所帶來的感受就會顯得更加外向和具有攻擊性,有種面向未來的感覺,因此這種分割布局會呈現(xiàn)出一種前進(jìn)的感覺。
推薦閱讀
- 網(wǎng)絡(luò)科學(xué)視角下的推薦系統(tǒng)研究
- Learn pfSense 2.4
- 這就是搜索引擎
- 云計(jì)算和大數(shù)據(jù)技術(shù)實(shí)戰(zhàn)
- RocketMQ技術(shù)內(nèi)幕:RocketMQ架構(gòu)設(shè)計(jì)與實(shí)現(xiàn)原理
- 計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)及應(yīng)用
- 計(jì)算機(jī)網(wǎng)絡(luò)
- JavaScript+jQuery前端開發(fā)基礎(chǔ)教程(微課版)
- 系統(tǒng)工程的藝術(shù):用基于模型的系統(tǒng)工程方法構(gòu)建復(fù)雜系統(tǒng)(原書第2版)
- NS2仿真實(shí)驗(yàn)
- 網(wǎng)頁制作案例教程(第2版)
- Quarkus云原生微服務(wù)開發(fā)實(shí)戰(zhàn)
- Wordpress Web Application Development(Third Edition)
- 科技文獻(xiàn)信息檢索與利用
- Android 應(yīng)用案例開發(fā)大全(第二版)