中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請(qǐng)輸入搜索關(guān)鍵詞
知識(shí)庫(kù) 知識(shí)庫(kù)

優(yōu)網(wǎng)知識(shí)庫(kù)

探索行業(yè)前沿,共享知識(shí)寶庫(kù)

UI中的頁(yè)面 布局小技巧 - 拷貝

發(fā)布日期:2025-01-03 10:52:13 瀏覽次數(shù): 1260 來(lái)源:CppTeam




页面布局小技巧


前言


在设计中页面布局和排版决定了用户阅读时的便捷和清晰程度,在此总结了几个小技巧分享给大家



01

接近性原则


当我们有很多个元素时,排列得较为靠近的在视觉上我们就会把它们归为一体


先来几个小栗子 

这样排版时,视觉上就会认为这样是一个整体,或者每一个单独的元素为一个模块组成了一个这样的整体。

当我们将上两行元素紧凑排放,而增加与第三行元素的间距,此时视觉上上面两行就是与下面一行分开的一个整体,此时画面被分为两个板块

当我们再改变元素的排版,使得三行都有一定的间距时,视觉上会将这些元素看做为三个模块



文字排版也遵循一样的规则

当文字紧凑排列视觉上会更加舒服,将文字视为一个整体。


举个栗子~

调整过后,可以明显地感觉到用户名字,头像及时间为一个整体,评论单拎出来,使得信息更加清晰了



运用到排版中,我们会发现,适当增加间距可以使得阅读和观看更加清晰有效


来一个实例体会一下

将相关表单字段和标签放置在一个紧凑的布局中,可以让用户一目了然地了解到每个字段的用途。

02

常用页面布局


列表布局

列表布局是小屏幕限制下的常见版式,适用于较长的文字信息组合的界面布局。如:对话列表,分类信息展示等。

*优点信息直观,节省界面空间,浏览效率高

*缺点列表形式单一,容易产生视觉疲劳


卡片流

卡片式采取了图像与文字结合的方式传递信息,在有限的空间增加了视觉上的无限可能

*优点信息直观,节省界面空间,浏览效率高

*缺点呈现的信息量较小


瀑布流与Feed流

瀑布流是指在页面滑动的时候,内容会不断刷新出来,Feed流在流动时会对内用进行干预,根据用户的喜好来推荐内容

*优点:展示具有吸引力,并且不断更新

*缺点依赖图片的质量好坏


宫格布局

通常承载较为重要的功能,一般用于快捷键的入口。标签式布局视觉上会程序出比较明显的层级

*优点入口展示清晰,查找方便

*缺点扩展性较差,标题不宜长


手风琴布局

手风琴布局常用语两级结构的界面中,当用户点击分类图标式,可展开二级内容

*优点可以承载较多信息,减少界面跳转率

*缺点同时打开多个菜单时,容易找不到标题

总结


页面布局的样式还有很多,UI设计师们也可以在此基础上创造无限可能,在适用性和用户的浏览高效性的需求下,界面功能清晰地呈现就显得尤为重要啦~



優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念,誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門(mén)戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門(mén)戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用(手機(jī)站APP開(kāi)發(fā))、微信定制開(kāi)發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個(gè)人信息保護(hù)聲明》

專屬顧問(wèn) 專屬顧問(wèn)
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問(wèn)!
專屬顧問(wèn)
馬上咨詢
聯(lián)系專屬顧問(wèn)
聯(lián)系專屬顧問(wèn)
聯(lián)系專屬顧問(wèn)
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢

和我們?cè)诰€交談!