若何设想好UI界面（一）：排版篇

摸金狂人

来历：知乎
排版是界面设想中最根基的，也最重要的，就像是绘画中的外型设想，如果形体不准，上面的细节装潢再丰富也是徒劳。
好的排版能有用地向用户传递关键信息，同时也能提升产物的用户体验，排版已经酿成了设想师越来越重视的一个环节，下面总结了一些排版的常识点，希望可以和大师一路成长。

界面设想的6个关键点：
1 留白
2 放大比例
3 对齐与平衡
4 父子主次关系
5 穿插与朋分
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
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！

天然灵凡

。。。。比我教员讲的有用，教员就放个PPT，讲几句，画吧。

没想爱上你堑

哈哈，感谢，比来太忙没偶然候写了，既然有人看，那我争取找时候接着写

华梦一生

很棒，恰好对我期末作业有帮助，感谢[爱]

pmhuhc77635

能对他人有用，我也很高兴哈哈

荷叶224

公然实战就是纷歧样…讲的很有营养

朲賤芿嗳2017

大佬开班吗？

淡淡如菊795

还没计划，你有题目可以随时问，我看到尽快答复

紫色爱玫瑰咎

感谢你[赞]自己这几年项目都不可，想学二次元的，但就是设想不会做，叨教有需要报一个班么？