游戏界面“可读性”设想【版式篇】

情义无价943

来历：知乎



界面版式设想，是一项根本的设想技术。
根本到设想师很少去想其中的法则标准，以为只要看起来都雅、扎眼就对了。

面临策划需求，拿来就做是个毛病的设想习惯。
界面排版不是为美妙办事，而是为内容办事。

不要为了美妙而疏忽了“可读性”的本质题目。
以下，总结了四条设想标准，避免在细节之处出错。


栅格化标准
栅格是由一系列纪律的小网格组成，在Web设想中经常利用8作为栅格的最小步进单元。



同一步进单元，使元素巨细、间距都有纪律可循。



不外，栅格标准中的最小单元并没有明白的规定，可以依照自己的设想习惯以及游戏版式结构去重新界说。

在游族，栅格标准为：
横排最小单元4PX，竖排最小单元16PX。
基于这个数字，建造同一的界面栅格模板：



栅格模板可以帮助设想师制定出界面行距与间距标准，内容行距的呼吸节奏感了如指掌。



在界面的既定例则下，进而完善一切的控件模组标准。帮助游戏产物建立同一的顶层版式设想说话。



遵守栅格系统的设想细节，不管是元素、模块或页面，都有纪律可循。
依照以上的标准方式，可以有用削减设想决议的时候与相同消耗，提升工作效力。




对齐标准

“只要界面上恰好有空间，就把信息随意“扔”到那边。”
这是在界面设想中，最多见的题目。



对齐意味着有序，给人有种稳定、平安的感受。
很多时辰，设想师需要决心制造对齐的成果。

例如属性信息，可以制定一份命名法则：
1，字数分歧
在一些属性题目中，尽能够利用字数分歧的命名方式。



2，由少最多
当字数没法分歧时，保证题目首尾对齐。
由少最多的排序方式会让视觉加倍有序。



TIPS：
分歧游戏范例，数值的对齐方式分歧。

卡牌用户更习惯数字左对齐的形式，便于首字符对照。
而MMO或SLG为右对齐的形式。




密切性

相互相关项该当靠近，归组在一路。这有助于构造信息，削减紊乱，为玩家供给清楚阅读的结构。



假如多个内容相互之间存在密切性，它们就会成为一个视觉单元。
反之，两个视觉单元之间要决心冷淡，不要混为一谈。



密切性总是被说起，其感化还远不但上面案例那末简单。



在《文化醒觉》中，选中方针后弹出的界面，其位置与指向性也属于密切性的设想范围。对照《权利的游戏》，体验就要轻量、友爱一些。



当看到某些理论时，不要只关注案例自己。
“举一反三”才能更好的经过设想处理题目。


行长标准

行长，指单行笔墨的长度，假如一行中包括字数太多，文本内容会很难阅读。
常规界面中的描写文本，倡议单行控制在20-24个字之间。



对于通告或故事描写等界面，由于文本内容很是多，常常需要更长的行数支持。
这类情况，倡议单行控制在44-46个字之间。



字数较多时，整版笔墨内容要经过隔行与染色来区分信息层级，确保通篇内容的可读性，避免出现下图中的情况：




设想习惯
除了版式标准之外，设想师还需要增强对内容的了解。
请连结两个设想习惯：
1，填入正确的文案
避免利用姑且文本去添补界面内容，这会影响你对”可读性“的设想判定。



2，充实斟酌多种信息状态
有多状态组成的界面，需要在UI结果图中将状态设想完全，避免现实利用时出现识别度题目。



不要疏忽这些设想细节，越是根本，就越轻易出错。
至此，关于可读性的三个篇章已经竣事，倡议收藏、分享，你一定会用到。

- 文末福利 -  
关注公众号<GameUE>，答复“栅格模板”
送给你已经分好层的PSD文件





杨曦 · 游族收集UEDC
专注游戏用户体验设想10年
曾任职网易、腾讯、畅游

<hr/><关于增加微信>
加了不措辞也没事，我帮你附上“专业圈子”的标签。
标签到200人时，会组建便于大师交换的专业微信群。
接待关注公众号：GameUE




原文地址：https://zhuanlan.zhihu.com/p/112079007
免责声明：
1、文章部分图片源于收集，均为表示图；
2、一切文章、图片、音频视频文件等材料版权归版权一切人一切；
3、因非原创文章及图片等内容没法和版权者联系，如原作者或编辑以为作品不宜上网供阅读，或不应无偿利用，请实时告诉我们，以敏捷采纳适当办法，避免给双方形成不需要的经济损失；
4、本页面内容由爬虫法式自动收集于互联网，如无意中加害了媒体或小我的常识产权，请电邮【E-Mail:cb@yoyodoc.com】告之，我们将于24小时内删除。

chwbn765

有个疑问想问下大佬，关于卡牌游戏和moba游戏的数值对齐方式分歧，背后是有什么缘由吗？

术数古籍专卖疤

在同一纬度的数值显现中，明显右对齐是个更好的体验（便于位数之间的对照，mmo、slg等数值更大的游戏中还会经过逗号做更直观的比力，一般rpg游戏的数值系统中，每成长到1-2个阶段就会多个逗号出来，也有益于玩家建立阶段性成长的体验追求）。

抛个概念吧：一切左对齐排版的数值游戏，要末是当前界面没有同纬度比力需求，底子不纠结对齐方式；要末就是“xx游戏就是这么做的，所以我们也要一样”…