网易首页 > 网易号 > 正文 申请入驻

如何设计出“好看”的UI界面(一):排版的六项原则

0
分享至

文/哥白尼

排版是界面设计中最基本的,也最重要的,就像是绘画中的造型设计,要是形体不准,上面的细节装饰再丰富也是徒劳。

好的排版能有效地向用户传递关键信息,同时也能提升产品的用户体验,排版已经变成了设计师越来越重视的一个环节,下面总结了一些排版的知识点,希望可以和大家一起成长。

界面设计的6个关键点:

  1. 1.留白

  2. 2.放大比例

  3. 3.对齐与平衡

  4. 4.父子主次关系

  5. 5.穿插与分割

  6. 6.人物与界面关系

1.留白

设计最重要的一点是清晰,所以留白的主要目的是突出重要信息,合理的利用空间关系,使重要的信息一目了然,同时可以让界面透气。

留白的多少,是由界面功能的性质决定的。

1.一般基本功能留白的空间,不会太大,以功能清晰为原则。

2.一些特殊功能的留白空间,会根据界面性质,选择多留出空间,用来增加界面特有的气氛。

或是用来突出重点信息,或是为了符合功能的特点

2.放大比例

界面设计中,让人眼前一亮又印象深刻的,一个最简单的方法,就是打破自己的设计习惯,打破常规,放大功能之间的比例,给画面增加视觉冲击力。

下面看一个案例:

示例a:

示例b:

a和b哪个界面更吸引你?是不是一目了然的a?

3.对齐和画面平衡

对齐是界面设计中一个重要的细节,可以无形中提升画面的整体品质,也是对UI设计师是否合格的一个基本判定。

1.对齐是界面中各个功能之间的调整,比如:文字之间的对齐,文字与界面间距的等比对齐,界面与界面之间的细微对齐调整。

2.对齐也是让画面保持平衡的一种手段,避免画面出现视觉上的不对称不舒服,让画面失衡。

3.对齐不只是信息之间的对齐,还包括画面中功能之间相互呼应的“对齐”,比如图中的左上角和右下角的区域间的对应,避免了一头过重而让画面失去平衡。

4.对齐也包括界面中,功能之间倾斜角度的一致性。

整个界面相关功能的倾斜度都是一致的,包括弹窗、文字和背景装饰,会让画面更有动感。

4. 父子主次关系

是指界面中的层级关系,不只是点击操作上的顺序展现,还有视觉上的主次功能先后顺序的展示。

1. 在界面设计中,点击出现的先后顺序的展现,比如切换按钮界面。

2. 视觉上的观看顺序,比如合成功能,技能树。

5.穿插与分割

1.在二次元风格的界面中出现的比较多,也是二次元界面的排版特点,可以让画面更加有活力和动感,也更接近漫画和杂志的排版布局。

2.还可以更好的制造出空间感,让画面层次更加丰富。

6.人物与界面关系

其实,游戏UI界面就是,人物与功能和背景三者之间相互衬托相互穿插的展示。

1.一般以角色为主的界面,都是功能围绕角色进行排版设计,比如选择角色界面、换装界面、抽卡界面等。

2.以功能为主的界面,角色会用来衬托功能进行展示,比如7日登录界面、恭喜获得界面、一些奖励界面和一些活动界面等。

而背景会根据游戏世界观和游戏本身的风格进行设计,用来装饰和衬托整个画面。

但是,不论怎样设计,都要记住游戏界面是为信息服务的,虽然我们可以加装饰,做各种形式的展示,但是信息部分一定要清晰直观,要第一时间传递给玩家。

同时,整个画面要保持视觉上的平衡。

总结

不论什么样的游戏风格,制作过程中这些思考都是必不可少的,只有通过思考制作出来的界面,才是有灵魂的。

https://zhuanlan.zhihu.com/p/88175933

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
西媒:连续三年的清洗尝试,拉莫斯考虑今夏直接赔钱遣散夸西

西媒:连续三年的清洗尝试,拉莫斯考虑今夏直接赔钱遣散夸西

懂球帝
2026-05-21 14:48:43
性学专家李银河说:你若50岁左右,人生余额已不多。不出意外…

性学专家李银河说:你若50岁左右,人生余额已不多。不出意外…

豁达宇宙
2025-10-22 18:31:20
打工时代快要结束了?2027局势大转变,普通人往后该咋谋生

打工时代快要结束了?2027局势大转变,普通人往后该咋谋生

石辰搞笑日常
2026-05-20 11:38:35
炒作“碳水脸”的人有最丑陋的嘴脸

炒作“碳水脸”的人有最丑陋的嘴脸

极目新闻
2026-05-21 14:59:06
法总统非洲黑中国翻车,抢话筒训人遭硬刚,三国抵制马克龙成笑话

法总统非洲黑中国翻车,抢话筒训人遭硬刚,三国抵制马克龙成笑话

青烟小先生
2026-05-21 10:04:25
大蒜被关注!医生发现:肺结节病人吃大蒜,不用多久或迎来5变化

大蒜被关注!医生发现:肺结节病人吃大蒜,不用多久或迎来5变化

阿兵科普
2026-05-17 22:37:24
善恶有报,移居英国仅2年,57岁吴秀波再迎噩耗,步入李易峰后尘

善恶有报,移居英国仅2年,57岁吴秀波再迎噩耗,步入李易峰后尘

有范又有料
2025-12-17 14:54:06
南海生变,菲律宾头号帮手就位,新华社给出定性,国防部也撂重话

南海生变,菲律宾头号帮手就位,新华社给出定性,国防部也撂重话

独舞独舞
2026-05-21 18:29:38
曼联新帅蓝图曝光:锁定安德森搭档B费,下赛季剑指英超冠军

曼联新帅蓝图曝光:锁定安德森搭档B费,下赛季剑指英超冠军

乐道足球C
2026-05-21 14:36:53
翁虹女儿颜值炸裂!凭成人礼火上热搜,力压小酒窝被封最美星二代

翁虹女儿颜值炸裂!凭成人礼火上热搜,力压小酒窝被封最美星二代

八卦王者
2026-05-19 15:10:05
“摸奶子”再惹争议,OPPO的流量反噬开始了

“摸奶子”再惹争议,OPPO的流量反噬开始了

品牌头版
2026-05-13 10:18:15
苏州一小学网购45把一次性雨伞全损退货“伞身写有学生姓名”,最新进展:校家委会主动联系商家致歉,已补货款及运费损失

苏州一小学网购45把一次性雨伞全损退货“伞身写有学生姓名”,最新进展:校家委会主动联系商家致歉,已补货款及运费损失

大风新闻
2026-05-21 10:19:44
泽连斯基很生气!打向基辅的俄导弹,竟能拆出一百多种西方零件!

泽连斯基很生气!打向基辅的俄导弹,竟能拆出一百多种西方零件!

青青子衿
2026-05-18 02:26:44
绝密会议强逼周恩来交权!24名高层无记名表决,为何18人宁可当场抗命也要力保他?

绝密会议强逼周恩来交权!24名高层无记名表决,为何18人宁可当场抗命也要力保他?

史海孤雁
2026-05-14 16:02:24
将与U17国足争冠!日本队挑衅:个人能力可实现压制 冠军是我们的

将与U17国足争冠!日本队挑衅:个人能力可实现压制 冠军是我们的

风过乡
2026-05-21 13:03:16
奇妙的缘分!偶遇26年后湖南工程师与普京再见面,互赠的礼物都是瓷器,当事人讲述

奇妙的缘分!偶遇26年后湖南工程师与普京再见面,互赠的礼物都是瓷器,当事人讲述

潇湘晨报
2026-05-20 23:53:12
俄方给中国提了醒:要想拿下台岛,必须毁掉美军的西太平洋基地!

俄方给中国提了醒:要想拿下台岛,必须毁掉美军的西太平洋基地!

观察者小海风
2026-04-03 13:23:29
连灭日本两大主力!李诗沣2-0横扫世界第36,下轮欲为师弟复仇

连灭日本两大主力!李诗沣2-0横扫世界第36,下轮欲为师弟复仇

钉钉陌上花开
2026-05-21 14:15:24
利物浦赚翻!世界级王牌主动来投!2000 万救回 1.3 亿水货伊萨克

利物浦赚翻!世界级王牌主动来投!2000 万救回 1.3 亿水货伊萨克

澜归序
2026-05-21 05:46:23
沉寂5日,中方准时兑现承诺,要购买美国客机,特朗普对华改称呼

沉寂5日,中方准时兑现承诺,要购买美国客机,特朗普对华改称呼

老白观天下
2026-05-21 16:11:54
2026-05-21 19:27:00
GameRes游资网 incentive-icons
GameRes游资网
GameRes游资网
7367文章数 10467关注度
往期回顾 全部

科技要闻

好到离谱也不够!英伟达交出816亿美元营收

头条要闻

特朗普称将与赖清德交谈 外交部表态

头条要闻

特朗普称将与赖清德交谈 外交部表态

体育要闻

常住人口7000的小镇,拥有了一支德甲球队

娱乐要闻

反转!金秀贤与金赛纶未成年时交往不实

财经要闻

英伟达业绩超预!指引再新高仍不够亮眼

汽车要闻

小鹏正在研发"高达" 融合机器人技术的主动悬架

态度原创

教育
艺术
手机
公开课
军事航空

教育要闻

小学生中学生情境口语English英语学习洗漱刷牙Wash and Brush

艺术要闻

崔雪冬 2026年油画新作

手机要闻

高通首次2nm!骁龙8 Elite Gen6细节出炉:主频飙到5GHz

公开课

李玫瑾:为什么性格比能力更重要?

军事要闻

伊朗警告:任何新袭击将促使战场扩大到中东以外

无障碍浏览 进入关怀版